/* ============================================================================= LIVESTRO STRATEGY — style.css Design direction: "The Brief" Editorial intelligence-brief aesthetic. Confident, plain-spoken, grounded. --------------------------------------------------------------------------- Implementation notes for Claude Code: - Load fonts via Google Fonts (link in ): https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1 &family=IBM+Plex+Sans:wght@400;500;600 &family=IBM+Plex+Mono:wght@400;500&display=swap - All sizing uses clamp() for fluid responsiveness; named breakpoint at 760px. - The asterisk (*) is the brand glyph. Use the .ls-mark class wherever it appears — never substitute a different character or SVG. - Layout grid is 12 columns at >=960px, 6 cols at 760–960, 4 cols below. ========================================================================== */ /* ----------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ :root { /* ---- Color ---- */ --paper: #F2EFE8; /* primary background — warm off-white */ --paper-deep: #E8E3D6; /* recessed panels, table rows */ --bone: #DDD6C5; /* dividers on paper */ --ink: #15140F; /* primary text — warm near-black */ --ink-2: #3A372F; /* secondary text */ --stone: #8C857A; /* tertiary text, captions */ --rule: #15140F; /* hairline rule color (uses ink) */ --vermillion: #E84B25; /* the one accent — use sparingly */ --vermillion-2: #C03A18; /* hover / pressed */ /* Dark mode (optional, for inverted sections) */ --ink-paper: #14130E; /* near-black bg */ --ink-paper-2: #1F1E18; --paper-ink: #EFEBE0; /* near-white text on dark */ /* ---- Typography ---- */ --serif: "Instrument Serif", "Times New Roman", Georgia, serif; --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Fluid type scale — min @ 360px viewport, max @ 1440px */ --t-display: clamp(56px, 11vw, 168px); /* hero "We help teams…" */ --t-h1: clamp(40px, 7vw, 96px); --t-h2: clamp(32px, 4.4vw, 64px); --t-h3: clamp(22px, 2.2vw, 30px); --t-lead: clamp(19px, 1.6vw, 24px); --t-body: clamp(16px, 1.15vw, 18px); --t-small: 14px; --t-label: 12px; /* mono uppercase labels */ --t-index: clamp(40px, 6vw, 88px); /* the big 01/02/03 numbers */ --lh-display: 0.92; --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.5; --lh-prose: 1.6; /* Letterspacing */ --ls-display: -0.025em; --ls-tight: -0.015em; --ls-label: 0.14em; /* uppercase mono labels */ /* ---- Spacing scale (8pt base) ---- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; /* ---- Layout ---- */ --page-max: 1440px; --page-pad: clamp(20px, 4vw, 64px); --rule-w: 1px; /* ---- Motion ---- */ --ease: cubic-bezier(0.2, 0.6, 0.2, 1); --dur-fast: 140ms; --dur: 260ms; --dur-slow: 500ms; } /* ----------------------------------------------------------------------------- 2. RESET / BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Hard-clip the html element so the off-screen fixed slide-out nav panel (and the homepage marquee strip) can't extend document scrollWidth on phone viewports. overflow-x: hidden on body alone isn't enough — fixed descendants still report on the html element. */ overflow-x: clip; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--t-body); line-height: var(--lh-body); font-feature-settings: "ss01", "ss02", "kern"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Prevents the fixed-right slide-out nav panel (translateX(100%)) and the homepage marquee strip from extending the document's horizontal scroll width on phone widths. position: sticky on .nav still works. */ overflow-x: hidden; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); } button { font: inherit; cursor: pointer; } ::selection { background: var(--ink); color: var(--paper); } /* ----------------------------------------------------------------------------- 3. TYPOGRAPHY PRIMITIVES -------------------------------------------------------------------------- */ .t-display, .t-h1, .t-h2 { font-family: var(--serif); font-weight: 400; line-height: var(--lh-display); letter-spacing: var(--ls-display); text-wrap: balance; margin: 0; } .t-display { font-size: var(--t-display); font-style: italic; } .t-h1 { font-size: var(--t-h1); } .t-h2 { font-size: var(--t-h2); line-height: var(--lh-tight); } .t-h3 { font-family: var(--sans); font-size: var(--t-h3); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--ls-tight); text-wrap: balance; margin: 0; } .t-lead { font-family: var(--sans); font-size: var(--t-lead); line-height: var(--lh-prose); color: var(--ink-2); text-wrap: pretty; margin: 0; max-width: 38ch; } .t-body { font-family: var(--sans); font-size: var(--t-body); line-height: var(--lh-prose); color: var(--ink-2); text-wrap: pretty; margin: 0; max-width: 60ch; } .t-label { font-family: var(--mono); font-size: var(--t-label); font-weight: 500; text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink); margin: 0; } .t-label--muted { color: var(--stone); } .t-index { font-family: var(--mono); font-size: var(--t-index); font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--ink); } .t-italic { font-style: italic; } /* Inline accents */ em, .ital { font-style: italic; } .accent { color: var(--vermillion); } /* ----------------------------------------------------------------------------- 4. THE MARK — the asterisk is the brand glyph -------------------------------------------------------------------------- */ /* Use .ls-mark for the standalone glyph. Variants: .ls-mark--inline — superscript-style after wordmark .ls-mark--lg — large display monogram .ls-mark--xl — wall-size The wordmark is .ls-wordmark; combine with .ls-wordmark--mono for footer. */ .ls-mark { display: inline-block; color: var(--vermillion); font-family: var(--sans); font-weight: 500; line-height: 1; transform: translateY(0.02em); user-select: none; } .ls-mark--inline { font-size: 0.55em; vertical-align: super; margin-left: 0.04em; } .ls-mark--lg { font-size: 96px; } .ls-mark--xl { font-size: clamp(180px, 32vw, 480px); } .ls-wordmark { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); display: inline-flex; align-items: baseline; gap: 0; } .ls-wordmark--lg { font-size: 64px; } .ls-wordmark--xl { font-size: clamp(80px, 14vw, 220px); } .ls-wordmark--inverse { color: var(--paper-ink); } /* ----------------------------------------------------------------------------- 5. LAYOUT — page shell + grid -------------------------------------------------------------------------- */ .page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-pad); } .section { padding-block: var(--s-10); border-top: var(--rule-w) solid var(--ink); } .section:first-of-type { border-top: 0; } .section--snug { padding-block: var(--s-8); } .section--loose { padding-block: var(--s-11); } .grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--s-5); row-gap: var(--s-7); } /* Section header pattern: label on left, content right */ .section-head { display: grid; grid-template-columns: 1fr 3fr; gap: var(--s-6); align-items: baseline; margin-bottom: var(--s-8); } .section-head__title { font-family: var(--serif); font-size: clamp(36px, 5vw, 72px); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 0; text-wrap: balance; } /* Hairline divider */ .rule { border: 0; border-top: var(--rule-w) solid var(--ink); margin: 0; } .rule--muted { border-top-color: var(--bone); } /* ----------------------------------------------------------------------------- 6. NAV -------------------------------------------------------------------------- */ .nav { display: flex; align-items: center; justify-content: space-between; padding-block: var(--s-5); border-bottom: var(--rule-w) solid var(--ink); position: sticky; top: 0; background: color-mix(in oklab, var(--paper) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 50; } .nav__links { display: flex; gap: var(--s-6); list-style: none; margin: 0; padding: 0; } .nav__link { font-family: var(--mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink); position: relative; padding-block: var(--s-2); } .nav__link::before { content: "*"; color: var(--vermillion); margin-right: 6px; opacity: 0; transition: opacity var(--dur-fast) var(--ease); } .nav__link:hover::before, .nav__link[aria-current="page"]::before { opacity: 1; } /* Hamburger button — hidden on desktop, shown ≤760px via media query below */ .nav__burger { display: none; flex-direction: column; justify-content: space-between; align-items: stretch; width: 28px; height: 22px; padding: 4px 0; background: transparent; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .nav__burger span { display: block; height: 1.5px; width: 100%; background: var(--ink); transition: transform 220ms var(--ease), opacity 220ms var(--ease); transform-origin: center; } .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Backdrop element is appended once by nav.js when the page first loads. z-index sits BELOW the .nav (z:50) so the nav + its slide-out panel inside render at full opacity over the dimmed page. The .nav__links panel has its own opaque background and lives inside .nav's stacking context. */ .nav__backdrop { position: fixed; inset: 0; background: rgba(21, 20, 15, 0.42); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease); z-index: 40; } .nav__backdrop[data-open="true"] { opacity: 1; pointer-events: auto; } /* ----------------------------------------------------------------------------- 7. HERO -------------------------------------------------------------------------- */ .hero { padding-block: clamp(64px, 10vw, 160px) clamp(48px, 8vw, 128px); } .hero__eyebrow { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-7); } .hero__eyebrow::before { content: ""; display: block; width: 48px; height: 1px; background: var(--ink); } .hero__title { font-family: var(--serif); font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); margin: 0 0 var(--s-7); text-wrap: balance; max-width: 18ch; } .hero__title em { font-style: italic; color: var(--vermillion); } .hero__footer { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: end; padding-top: var(--s-7); border-top: var(--rule-w) solid var(--ink); } /* ----------------------------------------------------------------------------- 8. CHIPS — capability list -------------------------------------------------------------------------- */ .chips { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-4); /* generous breathing room — pills shouldn't crowd */ list-style: none; margin: 0; padding: 0; align-items: center; } .chip { display: inline-flex; align-items: center; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.15; /* italic descenders need a little room */ padding: var(--s-3) var(--s-5); border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); background: transparent; white-space: nowrap; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .chip:hover { background: var(--ink); color: var(--paper); } .chip--accent { border-color: var(--vermillion); color: var(--vermillion); } .chip--accent:hover { background: var(--vermillion); color: var(--paper); } /* ----------------------------------------------------------------------------- 9. BUTTONS / LINKS -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-3); font-family: var(--mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--ls-label); padding: var(--s-4) var(--s-5); border: 1px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .btn:hover { background: var(--ink); color: var(--paper); } .btn--solid { background: var(--ink); color: var(--paper); } .btn--solid:hover { background: var(--vermillion); border-color: var(--vermillion); } .btn--accent { background: var(--vermillion); border-color: var(--vermillion); color: var(--paper); } .btn--accent:hover { background: var(--vermillion-2); border-color: var(--vermillion-2); } .btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease); } .btn:hover .btn__arrow { transform: translateX(4px); } /* Inline read-more link */ .link { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .link:hover { color: var(--vermillion); border-bottom-color: var(--vermillion); } /* ----------------------------------------------------------------------------- 10. WORK / SERVICE BLOCKS — numbered rows -------------------------------------------------------------------------- */ .work-list { display: grid; gap: 0; } .work-item { display: grid; grid-template-columns: 120px 1fr 2fr; gap: var(--s-6); padding-block: var(--s-7); border-top: var(--rule-w) solid var(--ink); align-items: start; } .work-item:last-child { border-bottom: var(--rule-w) solid var(--ink); } .work-item__index { font-family: var(--mono); font-size: var(--t-index); line-height: 1; } .work-item__title { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 48px); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 0 0 var(--s-3); text-wrap: balance; } .work-item__body { font-size: var(--t-body); line-height: var(--lh-prose); color: var(--ink-2); max-width: 56ch; } /* ----------------------------------------------------------------------------- 11. CASE CARDS -------------------------------------------------------------------------- */ .case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: var(--rule-w) solid var(--ink); } .case-card { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-7) var(--s-6); border-right: var(--rule-w) solid var(--ink); border-bottom: var(--rule-w) solid var(--ink); background: var(--paper); transition: background var(--dur) var(--ease); min-height: 360px; } .case-card:nth-child(2n) { border-right: 0; } .case-card:hover { background: var(--paper-deep); } .case-card__tag { font-family: var(--mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--vermillion); } .case-card__title { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 38px); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 0; text-wrap: balance; } .case-card__body { font-size: var(--t-body); line-height: var(--lh-prose); color: var(--ink-2); margin: 0; flex-grow: 1; } /* ----------------------------------------------------------------------------- 12. INSIGHT (article) ROWS -------------------------------------------------------------------------- */ .insights { display: grid; } .insight { display: grid; grid-template-columns: 140px 1fr 200px; gap: var(--s-6); padding-block: var(--s-6); border-top: var(--rule-w) solid var(--ink); align-items: start; transition: background var(--dur-fast) var(--ease); } .insight:last-child { border-bottom: var(--rule-w) solid var(--ink); } .insight:hover { background: var(--paper-deep); } .insight__date { font-family: var(--mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--stone); padding-top: 6px; } .insight__title { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: 0 0 var(--s-3); text-wrap: balance; } .insight__excerpt { font-size: var(--t-body); line-height: var(--lh-prose); color: var(--ink-2); margin: 0; max-width: 56ch; } .insight__cta { justify-self: end; padding-top: 8px; } /* ----------------------------------------------------------------------------- 13. STAT / META TILES -------------------------------------------------------------------------- */ .meta-row { display: grid; grid-template-columns: repeat(3, 1fr); border: var(--rule-w) solid var(--ink); } .meta-tile { padding: var(--s-6); border-right: var(--rule-w) solid var(--ink); } .meta-tile:last-child { border-right: 0; } .meta-tile__kicker { font-family: var(--serif); font-style: italic; font-size: clamp(34px, 4vw, 54px); line-height: 1; margin: 0 0 var(--s-4); } .meta-tile__body { font-size: var(--t-body); line-height: var(--lh-prose); color: var(--ink-2); margin: 0; } /* ----------------------------------------------------------------------------- 14. CONTACT / CTA BLOCK -------------------------------------------------------------------------- */ .cta { background: var(--ink-paper); color: var(--paper-ink); padding: clamp(48px, 8vw, 128px) var(--page-pad); border-radius: 0; } .cta__title { font-family: var(--serif); font-style: italic; font-size: clamp(48px, 8vw, 120px); line-height: var(--lh-display); letter-spacing: var(--ls-display); margin: 0 0 var(--s-7); text-wrap: balance; max-width: 16ch; } .cta__email { font-family: var(--serif); font-style: italic; font-size: clamp(28px, 3.6vw, 48px); color: var(--vermillion); border-bottom: 1px solid var(--vermillion); padding-bottom: 8px; } /* ----------------------------------------------------------------------------- 15. FOOTER -------------------------------------------------------------------------- */ .footer { padding-block: var(--s-7); border-top: var(--rule-w) solid var(--ink); display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; } .footer__meta { font-family: var(--mono); font-size: var(--t-label); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--stone); } /* ----------------------------------------------------------------------------- 16. UTILITY -------------------------------------------------------------------------- */ .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-baseline{ align-items: baseline; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .gap-7 { gap: var(--s-7); } .mt-4 { margin-top: var(--s-4); } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .mt-8 { margin-top: var(--s-8); } .text-center { text-align: center; } .text-right { text-align: right; } /* ----------------------------------------------------------------------------- 17. RESPONSIVE — mobile-first overrides at named breakpoints -------------------------------------------------------------------------- Breakpoints: <= 760px — small / phone 761–960px — tablet >= 961px — desktop (defaults above) -------------------------------------------------------------------------- */ @media (max-width: 960px) { .section-head { grid-template-columns: 1fr; gap: var(--s-4); } .case-grid { grid-template-columns: 1fr; } .case-card { border-right: 0; } .work-item { grid-template-columns: 80px 1fr; } .work-item__body { grid-column: 2 / -1; } .insight { grid-template-columns: 120px 1fr; } .insight__cta { grid-column: 2 / -1; justify-self: start; } } @media (max-width: 760px) { :root { --page-pad: 20px; --s-10: 80px; --s-11: 112px; } /* Nav: wordmark + hamburger; the link list becomes a slide-out panel */ .nav { padding-block: var(--s-4); } .nav .ls-wordmark { font-size: 22px; } .nav__burger { display: flex; } .nav__links { position: fixed; top: 0; right: 0; bottom: 0; width: min(82vw, 320px); height: 100dvh; flex-direction: column; align-items: flex-start; gap: var(--s-5); margin: 0; padding: calc(var(--s-7) + 24px) var(--s-6) var(--s-7); background: var(--paper); /* No border-left. A previous version used a 1px border to suggest the panel edge, which then leaked as a thin vertical line at the viewport's right edge whenever overflow-x: clip didn't fully hold (Safari quirks). Visual definition for the open panel comes from the box-shadow below; when closed there is nothing along that edge at all. */ box-shadow: -16px 0 40px rgba(21, 20, 15, 0.18); /* Push hard off-screen when closed so no sub-pixel rendering can show. */ transform: translateX(110%); transition: transform 260ms var(--ease), visibility 0s linear 260ms; visibility: hidden; z-index: 60; overflow-y: auto; } .nav__links[data-open="true"] { transform: translateX(0); visibility: visible; transition: transform 260ms var(--ease), visibility 0s linear 0s; } .nav__link { font-size: 14px; padding-block: var(--s-3); } .nav__link::before { /* On the panel the asterisk lands flush, not floating mid-line */ margin-right: 10px; } /* Hero: tighter footer stacks */ .hero { padding-block: var(--s-8) var(--s-7); } .hero__title { max-width: none; } .hero__footer { grid-template-columns: 1fr; gap: var(--s-5); } /* Sections */ .section { padding-block: var(--s-9); } /* Work rows collapse: number above title */ .work-item { grid-template-columns: 1fr; gap: var(--s-4); padding-block: var(--s-6); } .work-item__index { font-size: 48px; } /* Cases — single column, generous padding */ .case-card { padding: var(--s-6) var(--s-5); min-height: 0; } /* Insights — date stacks above */ .insight { grid-template-columns: 1fr; gap: var(--s-3); padding-block: var(--s-5); } .insight__cta { padding-top: var(--s-3); } /* Meta row stacks vertically */ .meta-row { grid-template-columns: 1fr; } .meta-tile { border-right: 0; border-bottom: var(--rule-w) solid var(--ink); } .meta-tile:last-child { border-bottom: 0; } /* Chips smaller on phones — but keep generous gap */ .chips { gap: var(--s-3); } .chip { font-size: 17px; padding: 10px 14px; } /* Buttons full-width on mobile by default */ .btn--block-sm { width: 100%; justify-content: space-between; } /* Footer wraps */ .footer { flex-direction: column; align-items: flex-start; } } @media (max-width: 420px) { /* On very small screens, swap nav wordmark for the monogram */ .nav .ls-wordmark__text { display: none; } .nav .ls-wordmark .ls-mark--inline { font-size: 22px; vertical-align: baseline; margin: 0; transform: none; } } /* ----------------------------------------------------------------------------- 18. PRINT -------------------------------------------------------------------------- */ @media print { body { background: #fff; color: #000; } .nav, .cta, .btn { display: none; } .section { border-color: #000; page-break-inside: avoid; } } /* ----------------------------------------------------------------------------- 19. MOTION — reduced motion respected -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* End of style.css */