/* ========================================================= YAHATECH — neo-brutalist product studio site Design language shared with Zthrifts: Syne + Space Mono · 0px radius · hard offset shadows · thick borders · vivid colour blocks · light + dark modes --------------------------------------------------------- One stylesheet for all eight pages. Component sections are ordered: tokens → base → primitives → chrome → page blocks → responsive. Add new blocks to the page-block section, not to the bottom of the file. ========================================================= */ :root { --bg: #FDFBF7; --surface: #FFFFFF; --tint: #F4F1EA; --ink: #0F0F0F; --ink-soft: #3a3a3a; --line: #0F0F0F; --green: #87EA5F; --green-bright: #00FF66; --gold: #FFD700; --pink: #FF4785; --electric: #4D5BFF; --shadow-color: 0, 0, 0; --shadow: 6px 6px 0 0 rgba(var(--shadow-color), 1); --shadow-sm: 3px 3px 0 0 rgba(var(--shadow-color), 1); --shadow-lg: 10px 10px 0 0 rgba(var(--shadow-color), 1); --border-w: 3px; --maxw: 1240px; /* Horizontal page gutter. A token because full-bleed bands have to subtract it from their inner max-width to line up with the ordinary sections — see the `.section-tint > *` rule below. */ --gutter: clamp(1.25rem, 4vw, 3rem); --ease: cubic-bezier(0.16, 1, 0.3, 1); /* Height of the sticky header, used for `scroll-margin-top` on every jump target. Kept as a token because getting it wrong hides the heading you just linked to behind the header, which is invisible until someone follows a deep link. */ --nav-h: 78px; } html.dark { --bg: #0F0F0F; --surface: #1A1A1A; --tint: #161616; --ink: #FDFBF7; --ink-soft: #c8c8c8; --line: #FDFBF7; --shadow-color: 255, 255, 255; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Stop mobile pull-to-refresh (a swipe-down at the top reloads the page — the "random refresh" users hit) and prevent scroll chaining. */ overscroll-behavior-y: contain; } body { font-family: 'Space Mono', monospace; background: var(--bg); color: var(--ink); line-height: 1.6; /* Clips the marquees, which are deliberately wider than the viewport. Every other wide block (tables, code, frames) must scroll inside its own container instead of relying on this. */ overflow-x: hidden; transition: background-color .3s ease, color .3s ease; } /* Lock background scroll while the mobile menu is open (set on by JS). Scoped to mobile widths so the lock can never persist on desktop — a safety net in case the JS resize handler doesn't run (e.g. odd rotation events). */ @media (max-width: 900px) { html.no-scroll, html.no-scroll body { overflow: hidden; } } /* Pause continuous animations when the tab is hidden — saves battery and avoids memory-pressure tab reloads on mobile (set on by JS). */ body.anim-paused .topbar-track, body.anim-paused .strip-track, body.anim-paused .status-dot { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } h1, h2, h3 { font-family: 'Syne', sans-serif; font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; /* Syne ExtraBold is a very uneven width — W is ~1.9em where I is ~0.4em — so display lines land unpredictably. `balance` evens them out on the browsers that support it and is ignored elsewhere; it is never load-bearing. */ text-wrap: balance; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ::selection { background: var(--green-bright); color: #000; } /* A visible focus ring everywhere, in the brand colour rather than the UA default, which is invisible against the green blocks. */ :where(a, button, summary, [tabindex]):focus-visible { outline: 3px solid var(--electric); outline-offset: 3px; } html.dark :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--green-bright); } ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--bg); } /* ---------- utilities ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .75rem 1.25rem; background: var(--green-bright); color: #0F0F0F; font-weight: 700; border: var(--border-w) solid #0F0F0F; transition: top .2s var(--ease); } .skip-link:focus { top: 1rem; } .dot-accent { color: var(--green-bright); } .muted { color: var(--ink-soft); font-size: .88rem; } .highlight { display: inline-block; padding: 0 .18em; color: #0F0F0F; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .highlight-green { background: var(--green); } .highlight-pink { background: var(--pink); color: #fff; } .eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .9rem; } .link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .88rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--green-bright); padding-bottom: 2px; transition: gap .2s var(--ease); } .link-arrow:hover { gap: .8rem; } .link-ext { border-bottom-color: var(--electric); } .ext { font-size: .8em; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-family: 'Space Mono', monospace; font-weight: 700; font-size: .92rem; text-transform: uppercase; letter-spacing: .03em; padding: .8rem 1.3rem; border: var(--border-w) solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .2s ease, color .2s ease; white-space: nowrap; } .btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); } .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 rgba(var(--shadow-color), 1); } .btn-solid { background: var(--green); color: #0F0F0F; border-color: #0F0F0F; box-shadow: 3px 3px 0 0 #0F0F0F; } .btn-solid:hover { box-shadow: 6px 6px 0 0 #0F0F0F; } .btn-outline { background: transparent; } .btn-lg { font-size: 1rem; padding: 1rem 1.6rem; } .btn-arrow { transition: transform .2s var(--ease); } .btn:hover .btn-arrow { transform: translateX(4px); } /* ---------- marquees ---------- */ .topbar { background: var(--green); color: #0F0F0F; border-bottom: var(--border-w) solid #0F0F0F; overflow: hidden; white-space: nowrap; } .topbar-track { display: inline-flex; padding: .45rem 0; font-weight: 700; font-size: .74rem; letter-spacing: .12em; animation: marquee 26s linear infinite; } /* Spacing lives on the items (not flex `gap`) so all three repeated sets are exactly equal thirds — this makes the -33.333% loop perfectly seamless. A `gap` leaves one fewer gap than items, which made the strip jump each loop (perceived as a page "refresh"). */ .topbar-track span { flex: none; margin-right: 2.5rem; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-33.333%); } } .strip { background: var(--ink); color: var(--bg); border-top: var(--border-w) solid var(--line); border-bottom: var(--border-w) solid var(--line); overflow: hidden; white-space: nowrap; } .strip-track { display: inline-flex; align-items: center; padding: .8rem 0; font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(1.05rem, 2.6vw, 1.7rem); text-transform: uppercase; letter-spacing: .02em; animation: marquee 22s linear infinite; } .strip-track > * { margin-right: 2rem; } .strip-track i { color: var(--green-bright); font-style: normal; } /* ---------- header ---------- */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 4vw, 3rem); background: var(--bg); border-bottom: var(--border-w) solid var(--line); } /* The lockup ships as two flat PNGs — ink for light mode, paper for dark. `filter: invert()` on one file would be a byte cheaper and puts a grey cast on the antialiased edges of a flat-black mark, which is visible at 32 px. */ .logo-lockup { display: block; } .logo-lockup img { height: 32px; width: auto; } .logo-paper { display: none; } html.dark .logo-lockup .logo-ink { display: none; } html.dark .logo-lockup .logo-paper { display: block; } .nav-links { display: flex; gap: 1.6rem; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .nav-links a { position: relative; padding: .25rem 0; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 3px; background: var(--green-bright); transition: width .25s var(--ease); } .nav-links a:hover::after, .nav-links a.active::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: .8rem; } .theme-toggle { width: 54px; height: 28px; border: var(--border-w) solid var(--line); background: var(--surface); position: relative; cursor: pointer; padding: 0; flex: none; } .theme-toggle-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--ink); transition: transform .25s var(--ease); } html.dark .theme-toggle-knob { transform: translateX(26px); background: var(--green-bright); } .menu-btn { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 44px; height: 40px; border: var(--border-w) solid var(--line); background: var(--surface); cursor: pointer; padding: 0 9px; } .menu-btn span { height: 3px; width: 100%; background: var(--ink); } /* When the menu is open the header hamburger is hidden; the overlay has its own always-visible close (✕), so there is only ever one unambiguous control. */ body.menu-open .menu-btn { display: none; } /* ---------- mobile menu ---------- */ .mobile-menu { position: fixed; inset: 0; z-index: 60; /* above the sticky header (50) so the overlay and its ✕ cover it */ background: var(--bg); display: flex; flex-direction: column; overflow: hidden; /* the inner wrapper scrolls, so the ✕ stays pinned */ transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .35s var(--ease), opacity .25s ease, visibility .35s; } body.menu-open .mobile-menu { transform: translateY(0); opacity: 1; visibility: visible; } /* `safe center` keeps items centred on tall screens but never pushes them past the top edge on short/landscape screens, where the overflow scrolls instead (background scroll is locked while open). */ .mobile-menu-inner { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; justify-content: safe center; gap: 2rem; padding: 5rem clamp(1.5rem, 8vw, 4rem) 2.5rem; } .mobile-menu-links { display: flex; flex-direction: column; gap: .9rem; } .mobile-menu-links a { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(1.9rem, 9vw, 3rem); display: flex; align-items: baseline; gap: 1rem; } .mobile-menu-links a span { font-family: 'Space Mono', monospace; font-size: .85rem; font-weight: 700; color: var(--green-bright); } .mobile-menu-products { display: flex; flex-direction: column; gap: .6rem; } .mobile-menu-label { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); } .mobile-menu-products a { font-weight: 700; font-size: 1.05rem; } .mobile-menu-cta { align-self: flex-start; } .mobile-menu-close { /* Absolute within the non-scrolling .mobile-menu, so it stays pinned top-right even when .mobile-menu-inner scrolls on short screens. */ position: absolute; top: 1.15rem; right: clamp(1.25rem, 6vw, 2.5rem); z-index: 1; width: 48px; height: 48px; display: grid; place-items: center; border: var(--border-w) solid var(--line); background: var(--surface); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .mobile-menu-close:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); } .mobile-menu-theme { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: var(--border-w) solid var(--line); } .mobile-menu-theme-label { font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; } /* ---------- section scaffolding ---------- */ .section { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.75rem, 6.5vw, 5rem) var(--gutter); scroll-margin-top: var(--nav-h); } .section-head { max-width: 720px; margin-bottom: clamp(2rem, 4vw, 3rem); } .section-title { font-size: clamp(1.9rem, 4.6vw, 3.1rem); } .section-lead { margin-top: 1rem; font-size: 1rem; color: var(--ink-soft); max-width: 54ch; } .section-more { margin-top: clamp(1.75rem, 3vw, 2.5rem); } /* Full-bleed tinted band. `max-width: none` releases the section's own clamp; the inner content is re-clamped by the wrapper rule below. */ .section-tint { max-width: none; background: var(--tint); border-top: var(--border-w) solid var(--line); border-bottom: var(--border-w) solid var(--line); } .section-invert { max-width: none; background: var(--ink); color: var(--bg); border-top: var(--border-w) solid var(--line); border-bottom: var(--border-w) solid var(--line); } /* `inherit` + opacity, NOT `rgba(var(--shadow-color), …)`. The shadow token is 0,0,0 in light mode, which painted this eyebrow black on the black band — invisible. The band flips ink and paper with the theme, so the only value that is correct in both is the band's own text colour, dimmed. */ .section-invert .eyebrow, .section-invert .section-lead { color: inherit; opacity: .7; } /* A full-bleed band still applies its own gutter padding, so capping its children at `--maxw` would make them two gutters WIDER than the content of an ordinary section — the two then visibly fail to line up down the page. Subtract the gutters the band has already applied. */ .section-tint > *, .section-invert > * { max-width: calc(var(--maxw) - 2 * var(--gutter)); margin-left: auto; margin-right: auto; } /* ---------- hero ---------- ========================================= Sizing note — this is the block that was "too big for a laptop". The old rule was `clamp(2.8rem, 11vw, 8rem)`: 128 px on any screen wider than ~1160 px. Three lines of Syne ExtraBold at 128 px is 392 px of title alone, and with the pill, sub-heading, buttons and the stats bar the hero came to roughly 900 px — taller than the ~780 px a 13" laptop actually shows below the browser chrome, so the call-to-action sat under the fold on the machines most visitors use. The cap is now 4.6rem (73.6 px) and there is a second, shorter scale for viewports under 820 px tall — which is every laptop, and no phone (phones are narrow and tall, so they keep the full size). Measure before changing these: the constraint is viewport HEIGHT, which no `vw`-only clamp can see. ================================================================== */ .hero { padding-top: clamp(2rem, 4vw, 3.25rem); padding-bottom: clamp(2rem, 4vw, 3rem); } .hero-inner { max-width: 62rem; } .status-pill { display: inline-flex; align-items: center; gap: .6rem; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: .45rem .9rem; border: var(--border-w) solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; } .status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-bright); animation: pulse 1.8s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 255, 102, .6); } 70% { box-shadow: 0 0 0 8px rgba(0, 255, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 102, 0); } } .hero-title { display: flex; flex-direction: column; align-items: flex-start; gap: .04em; /* The lower bound is set by ONE string. "FIRST-CLASS" measures 10.98em in Syne ExtraBold (measured, not guessed — the face is very wide and very uneven), and the green highlight adds 0.36em of padding, so the line needs ~11.1em of room. At the old 2.35rem minimum it broke after the hyphen at 375 px, which put "FIRST-" alone inside the highlight block. 7.8vw keeps it on one line from 320 px up; re-measure before raising it. */ font-size: clamp(1.55rem, 7.8vw, 4.6rem); text-transform: uppercase; text-shadow: 3px 3px 0 rgba(var(--shadow-color), .1); } .hero-title .highlight { text-shadow: none; } .hero-line { display: block; } .hero-sub { margin-top: 1.35rem; font-size: clamp(.95rem, 1.5vw, 1.1rem); max-width: 52ch; color: var(--ink-soft); } .hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.85rem; } .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(2.25rem, 4.5vw, 3.25rem); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); background: var(--surface); } .hero-stat { padding: 1.1rem 1.1rem; border-right: var(--border-w) solid var(--line); } .hero-stat:last-child { border-right: 0; } /* `

` markup, visual order flipped: the number reads first, the label under it. `order` on the flex children does that without lying about the semantics (a screen reader still gets term → definition). */ .hero-stat { display: flex; flex-direction: column; } .hero-stat dd { order: -1; font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1; } .hero-stat dt { margin-top: .45rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); } /* ---------- inner page hero ---------- */ .page-hero { padding-top: clamp(2rem, 4vw, 3.25rem); padding-bottom: clamp(1.75rem, 3vw, 2.5rem); } .page-hero-inner { max-width: 60rem; } .page-title { font-size: clamp(2.1rem, 5.6vw, 3.6rem); text-transform: uppercase; } .page-lead { margin-top: 1.25rem; font-size: clamp(.95rem, 1.5vw, 1.1rem); color: var(--ink-soft); max-width: 58ch; } .page-hero .hero-actions { margin-top: 1.75rem; } .chip-nav { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; } .chip-nav a { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .45rem .85rem; border: 2px solid var(--line); background: var(--surface); transition: background .2s ease, color .2s ease; } .chip-nav a:hover { background: var(--green); color: #0F0F0F; } .crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: var(--ink-soft); margin-bottom: 1.5rem; } .crumbs a { border-bottom: 1px solid currentColor; } /* ---------- service cards (home) ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(1.1rem, 2.2vw, 1.75rem); } .card { background: var(--surface); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); padding: 1.5rem; display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s var(--ease); position: relative; } .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--card-accent, var(--green)); border-right: var(--border-w) solid var(--line); } .card:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-lg); } .card > * { padding-left: .5rem; } .card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .card-num { font-weight: 700; color: var(--ink-soft); } .card-icon { font-size: 1.4rem; width: 44px; height: 44px; display: grid; place-items: center; background: var(--card-accent, var(--green)); border: var(--border-w) solid var(--line); color: #0F0F0F; } .card h3 { font-size: 1.3rem; margin-bottom: .6rem; } .card p { font-size: .9rem; color: var(--ink-soft); flex: 1; } .card-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.1rem; } .card-tags li { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .22rem .55rem; border: 2px solid var(--line); } .card-tags-lg li { font-size: .78rem; padding: .35rem .7rem; } /* ---------- project cards ---------- */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); } .project-card { display: flex; flex-direction: column; background: var(--surface); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s var(--ease); /* `min-width: 0` — without it a grid item's automatic minimum is its content width, and a wide screenshot inside it pushes the whole document sideways. The symptom is a horizontal scrollbar on the page, not on the card. */ min-width: 0; } .project-card:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-lg); } .project-card-media { display: block; border-bottom: var(--border-w) solid var(--line); background: var(--card-accent, var(--green)); overflow: hidden; } /* * `height: auto` is load-bearing, not tidying. * * The carries width/height ATTRIBUTES (700x397 and 700x356) so the * browser can reserve space before the file arrives and avoid a layout shift. * If CSS then sets a width and an `aspect-ratio` but leaves height unset, the * attribute supplies the used height — both dimensions are specified, so * `aspect-ratio` is ignored entirely. That rendered a 550x397 box (1.385) * against a 1.768 image, and `object-fit: cover` filled the height by slicing * ~22% off each side: the Zthrifts wordmark and the Daakly nav were cut in * half. `height: auto` discards the attribute height and lets `aspect-ratio` * do its job. * * `contain`, not `cover`: these are screenshots of real products and the whole * frame is the point. The fixed 16/9 box keeps both cards' titles on one * baseline — the two sources are 1.768 and 1.966, so without it they disagree * by ~30px — and `contain` pays for that with a thin mat above and below rather * than by cropping anything. */ .project-card-media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: center; } .project-card-body { padding: 1.4rem; display: flex; flex-direction: column; flex: 1; } .project-card-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .9rem; } .project-kind { color: var(--ink-soft); } .project-status { padding: .18rem .5rem; background: var(--card-accent, var(--green)); color: #0F0F0F; border: 2px solid var(--line); } .project-card-title { font-size: clamp(1.8rem, 3.4vw, 2.4rem); text-transform: uppercase; } .project-card-body p { margin-top: .8rem; font-size: .92rem; color: var(--ink-soft); flex: 1; } .project-card-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.5rem; } /* ---------- case study ---------- */ .case-hero { padding-bottom: clamp(2rem, 4vw, 3rem); } .case-hero-inner { max-width: 58rem; } .case-hero .project-frame { margin-top: clamp(2rem, 4vw, 3rem); } .project-frame { border: var(--border-w) solid var(--line); box-shadow: var(--shadow-lg); background: var(--surface); overflow: hidden; } .frame-bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .85rem; border-bottom: var(--border-w) solid var(--line); background: var(--card-accent, var(--green)); } .frame-bar span { width: 11px; height: 11px; border: 2px solid #0F0F0F; background: var(--surface); border-radius: 50%; } .frame-bar em { margin-left: auto; font-style: normal; font-size: .74rem; font-weight: 700; color: #0F0F0F; } .project-frame img { width: 100%; height: auto; } .case-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); } .case-col h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 1rem; } .case-col p { color: var(--ink-soft); margin-bottom: 1rem; } .case-visit { margin-top: 1.5rem; } .surface-list { list-style: none; display: grid; gap: 1rem; } .surface-item { display: flex; gap: 1.25rem; padding: 1.35rem; border: var(--border-w) solid var(--line); background: var(--surface); } .surface-num { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--green-bright); line-height: 1; flex: none; } .surface-item h3 { font-size: 1.2rem; margin-bottom: .5rem; } .surface-item p { font-size: .92rem; color: var(--ink-soft); } .case-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: clamp(1.75rem, 3vw, 2.5rem); border: var(--border-w) solid var(--line); box-shadow: var(--shadow); background: var(--surface); } .case-stat { display: flex; flex-direction: column; padding: 1.25rem; border-right: var(--border-w) solid var(--line); } .case-stat:last-child { border-right: 0; } .case-stat dd { order: -1; font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1; } .case-stat dt { margin-top: .45rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); } /* ---------- services page ---------- */ .service-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(1.5rem, 4vw, 3.5rem); } .service-lead .card-num { display: block; margin-bottom: .5rem; font-size: 1.1rem; } .service-lead h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); scroll-margin-top: var(--nav-h); border-left: 8px solid var(--card-accent, var(--green)); padding-left: .8rem; } .service-short { margin-top: 1rem; color: var(--ink-soft); } .service-body p { color: var(--ink-soft); } .service-sub { font-size: .78rem; font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); margin: 1.75rem 0 .9rem; } .service-proof { margin-top: 1.5rem; font-size: .9rem; } .service-proof a { font-weight: 700; border-bottom: 2px solid var(--green-bright); } .tick-list { list-style: none; display: grid; gap: .6rem; } .tick-list li { position: relative; padding-left: 1.6rem; font-size: .93rem; color: var(--ink-soft); } .tick-list li::before { content: "✳"; position: absolute; left: 0; top: 0; color: var(--green-bright); font-size: .9rem; } .tick-list a { font-weight: 700; border-bottom: 2px solid var(--green-bright); color: var(--ink); } /* ---------- about ---------- */ .team-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } .team-card { border: var(--border-w) solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); padding: 1.35rem; } .team-card h3 { font-size: 1.25rem; } .team-title { margin-top: .4rem; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); } .team-links { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .75rem; font-size: .8rem; font-weight: 700; } .team-links a { border-bottom: 2px solid var(--green-bright); } .steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); } .step { border: var(--border-w) solid var(--bg); padding: 1.5rem; transition: background .25s ease, color .25s ease; } .step:hover { background: var(--green); color: #0F0F0F; } .step:hover .tick-list li { color: #0F0F0F; } .step-num { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 2.1rem; color: var(--green-bright); display: block; margin-bottom: .8rem; } .step:hover .step-num { color: #0F0F0F; } .step h3 { font-size: clamp(1.2rem, 3.5vw, 1.5rem); margin-bottom: .7rem; hyphens: auto; } .step p { font-size: .9rem; opacity: .88; margin-bottom: 1rem; } .step .tick-list li { color: inherit; opacity: .85; font-size: .82rem; } .info-list { display: grid; border: var(--border-w) solid var(--line); background: var(--surface); } .info-list > div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 1rem; padding: .9rem 1.25rem; border-bottom: 2px solid var(--tint); } .info-list > div:last-child { border-bottom: 0; } .info-list dt { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); } .info-list dd { font-size: .92rem; } .info-list a { border-bottom: 2px solid var(--green-bright); } /* ---------- contact ---------- */ .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); } .contact-card { border: var(--border-w) solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); padding: 1.35rem; } .contact-card h2 { font-family: 'Space Mono', monospace; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft); margin-bottom: .75rem; } .contact-card p, .contact-card address { font-style: normal; font-size: .95rem; margin-bottom: .5rem; } .contact-card a { font-weight: 700; border-bottom: 2px solid var(--green-bright); } .contact-card .muted { border: 0; font-weight: 400; } /* ---------- FAQ ---------- */ .faq { border: var(--border-w) solid var(--line); background: var(--surface); } .faq-item { border-bottom: 2px solid var(--tint); } .faq-item:last-child { border-bottom: 0; } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; cursor: pointer; list-style: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary h3 { font-family: 'Space Mono', monospace; font-size: .98rem; font-weight: 700; letter-spacing: 0; line-height: 1.5; } .faq-mark { flex: none; width: 20px; height: 20px; position: relative; } .faq-mark::before, .faq-mark::after { content: ""; position: absolute; background: var(--ink); transition: transform .2s var(--ease), opacity .2s ease; } .faq-mark::before { left: 0; top: 8px; width: 20px; height: 3px; } .faq-mark::after { left: 8px; top: 0; width: 3px; height: 20px; } .faq-item[open] .faq-mark::after { transform: rotate(90deg); opacity: 0; } .faq-item[open] summary { background: var(--tint); } .faq-answer { padding: 0 1.25rem 1.25rem; } .faq-answer p { color: var(--ink-soft); font-size: .93rem; max-width: 72ch; } /* ---------- work note ---------- */ .work-note { display: flex; align-items: center; gap: 1rem; padding: 1.35rem; border: var(--border-w) dashed var(--line); } .work-note-star { font-size: 1.4rem; color: var(--green-bright); } .work-note p { color: var(--ink-soft); } .work-note a { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--green-bright); } /* ---------- CTA ---------- */ .cta { text-align: center; } .cta-inner { border: var(--border-w) solid var(--line); box-shadow: var(--shadow-lg); background: var(--surface); padding: clamp(2rem, 5.5vw, 3.75rem) clamp(1.25rem, 4vw, 3rem); position: relative; overflow: hidden; } .cta-inner::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--line) 1.4px, transparent 1.4px); background-size: 22px 22px; opacity: .08; pointer-events: none; } .cta-inner > * { position: relative; } .cta-title { font-size: clamp(1.9rem, 5vw, 3.4rem); text-transform: uppercase; margin-bottom: 1rem; } .cta-lead { color: var(--ink-soft); max-width: 50ch; margin: 0 auto 1.75rem; } .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; } /* ---------- footer ---------- */ .footer { border-top: var(--border-w) solid var(--line); background: var(--bg); } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.25rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; } .footer-brand { max-width: 30rem; } .footer-brand .logo-lockup img { height: 30px; } .footer-brand p { margin-top: .9rem; color: var(--ink-soft); font-size: .9rem; } .footer-address { margin-top: 1rem; font-style: normal; font-size: .82rem; line-height: 1.7; color: var(--ink-soft); } .footer-cols { display: flex; flex-wrap: wrap; gap: clamp(1.75rem, 5vw, 4rem); } .footer-col h2 { font-family: 'Space Mono', monospace; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin-bottom: .9rem; } .footer-col a { display: block; font-size: .9rem; margin-bottom: .55rem; } .footer-col a:hover { color: var(--green-bright); } .footer-bottom { border-top: var(--border-w) solid var(--line); padding: 1.1rem clamp(1.25rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .76rem; color: var(--ink-soft); max-width: var(--maxw); margin: 0 auto; } /* ---------- back to top ---------- */ .to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; width: 48px; height: 48px; border: var(--border-w) solid var(--line); background: var(--green); color: #0F0F0F; font-size: 1.25rem; cursor: pointer; box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .25s ease, transform .25s var(--ease), box-shadow .15s; } .to-top.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .to-top:hover { box-shadow: var(--shadow); transform: translate(-2px, -2px); } /* ---------- scroll reveal ---------- */ /* Only hide reveal elements when JS is available to bring them back, so the site degrades to fully visible content if JS is disabled or fails. */ html.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); } html.js .reveal.in { opacity: 1; transform: translateY(0); } /* ========================================================= RESPONSIVE ========================================================= */ /* Short viewports — i.e. every laptop. This is the rule that fixes the "hero doesn't fit my screen" problem; a vw-based clamp cannot see height. Deliberately gated to >=901px so it never touches phones, which are short in pixels but narrow, and already get the small end of the clamp. */ @media (min-width: 901px) and (max-height: 820px) { .hero-title { font-size: clamp(2.2rem, 5vw, 3.5rem); } .hero { padding-top: 1.75rem; padding-bottom: 1.75rem; } .status-pill { margin-bottom: 1.15rem; } .hero-sub { margin-top: 1.1rem; } .hero-actions { margin-top: 1.5rem; } .hero-stats { margin-top: 2rem; } .page-title { font-size: clamp(2rem, 4.4vw, 3rem); } } /* Very short (a 13" laptop with a large dock, or a landscape tablet). */ @media (min-width: 901px) and (max-height: 700px) { .hero-title { font-size: clamp(2rem, 4.2vw, 2.9rem); } .hero-stats { margin-top: 1.5rem; } } @media (max-width: 1024px) { .hero-stats { grid-template-columns: repeat(2, 1fr); } .hero-stat:nth-child(2) { border-right: 0; } .hero-stat:nth-child(1), .hero-stat:nth-child(2) { border-bottom: var(--border-w) solid var(--line); } .steps { grid-template-columns: 1fr; } .service-grid { grid-template-columns: 1fr; } } /* Collapse the nav to a hamburger before it gets crowded. The theme toggle moves into the mobile menu so the top bar stays clean (logo + hamburger). */ @media (max-width: 900px) { :root { --nav-h: 70px; } .nav-links, .nav-cta, .nav-actions .theme-toggle { display: none; } .menu-btn { display: flex; } } /* On desktop the hamburger is gone, so the full-screen menu must never be able to show — this guarantees it cannot trap the user if left open on resize. */ @media (min-width: 901px) { .mobile-menu { display: none !important; } } @media (max-width: 720px) { .cards { grid-template-columns: 1fr; } .project-grid { grid-template-columns: 1fr; } .case-stats { grid-template-columns: 1fr; } .case-stat { border-right: 0; border-bottom: var(--border-w) solid var(--line); } .case-stat:last-child { border-bottom: 0; } .info-list > div { grid-template-columns: 1fr; gap: .25rem; } .surface-item { flex-direction: column; gap: .75rem; } } @media (max-width: 480px) { .hero-stats { grid-template-columns: 1fr; } .hero-stat { border-right: 0 !important; border-bottom: var(--border-w) solid var(--line); } .hero-stat:last-child { border-bottom: 0; } .btn { width: 100%; justify-content: center; } .footer-inner { flex-direction: column; } .footer-cols { gap: 2rem; } .step { padding: 1.25rem; } .step-num { font-size: 1.85rem; margin-bottom: .6rem; } .work-note { flex-direction: column; align-items: flex-start; } }