/* * ihtech.ba — dark-only, system-font, offline visual system. * * The recurring signature is a precision routing graph: ports and orthogonal * paths appear in the hero, capability ledger, method pipeline and contact * terminus. Reading surfaces stay opaque so the diagram language never * competes with copy. * * Reveal states remain gated behind `.js` on . Without JavaScript the * entire document is visible; main.js also removes the gate for reduced motion * and whenever animation setup fails. */ :root { color-scheme: dark; --paper: oklch(0.145 0.018 245); --paper-raised: oklch(0.165 0.019 245); --surface: oklch(0.19 0.02 245); --surface-2: oklch(0.225 0.022 245); --ink: oklch(0.955 0.009 240); --ink-2: oklch(0.8 0.018 240); --muted: oklch(0.68 0.024 240); --line: oklch(0.32 0.024 242); --line-soft: oklch(0.255 0.02 242); --accent: oklch(0.76 0.13 220); --accent-strong: oklch(0.7 0.15 220); --accent-ink: oklch(0.14 0.02 245); --accent-wash: oklch(0.76 0.13 220 / 0.12); --accent-line: oklch(0.76 0.13 220 / 0.45); --max: 1240px; --gutter: clamp(1rem, 4vw, 2.5rem); --section-y: clamp(5rem, 9vw, 8.5rem); --radius-control: 10px; --radius-panel: 18px; --step--1: clamp(0.8rem, 0.77rem + 0.14vw, 0.88rem); --step-0: clamp(0.98rem, 0.94rem + 0.18vw, 1.08rem); --step-1: clamp(1.1rem, 1.02rem + 0.36vw, 1.28rem); --step-2: clamp(1.3rem, 1.18rem + 0.55vw, 1.58rem); --step-3: clamp(1.9rem, 1.45rem + 2.1vw, 3.1rem); --step-4: clamp(2.65rem, 1.85rem + 4vw, 5rem); --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --ease: cubic-bezier(0.2, 0, 0, 1); --fast: 120ms; --standard: 240ms; --slow: 520ms; --shadow-float: 0 1px 2px oklch(0.04 0.02 245 / 0.36), 0 12px 28px oklch(0.04 0.03 235 / 0.24), 0 32px 72px oklch(0.04 0.04 225 / 0.18); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; min-width: 0; overflow-x: clip; background: radial-gradient(circle at 78% 4%, oklch(0.25 0.06 225 / 0.12), transparent 28rem), var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--step-0); line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--accent); color: var(--accent-ink); } h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 680; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; } img, svg { display: block; max-width: 100%; } .wrap { width: 100%; max-width: var(--max); min-width: 0; margin-inline: auto; padding-inline: var(--gutter); } .wrap > *, .hero .wrap > *, .community > *, .contact-panel > * { min-width: 0; } .skip { position: fixed; z-index: 100; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; padding: 0.7rem 1rem; border-radius: var(--radius-control); background: var(--ink); color: var(--paper); font-weight: 650; text-decoration: none; transform: translateY(calc(-100% - 1.5rem)); transition: transform var(--standard) var(--ease); } .skip:focus { transform: translateY(0); } :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* --- header ------------------------------------------------------------- */ .site-header { position: sticky; z-index: 20; inset-block-start: 0; border-block-end: 1px solid transparent; background: oklch(0.145 0.018 245 / 0); transition: background-color var(--standard) var(--ease), border-color var(--standard) var(--ease), box-shadow var(--standard) var(--ease); } .site-header[data-stuck='true'] { border-block-end-color: var(--line-soft); background: oklch(0.165 0.019 245 / 0.94); box-shadow: 0 1px 2px oklch(0.04 0.02 245 / 0.28), 0 10px 30px oklch(0.04 0.02 245 / 0.16); backdrop-filter: blur(18px) saturate(130%); } .site-header .wrap { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); min-height: 64px; max-width: 1360px; } .lockup { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 44px; margin-inline-end: auto; text-decoration: none; font-size: 1.16rem; letter-spacing: -0.045em; } .lockup img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 6px 16px oklch(0.04 0.02 245 / 0.26); } .lockup b { font-weight: 720; } .lockup span { font-weight: 440; } .site-nav { display: flex; align-items: center; gap: clamp(0.8rem, 2vw, 1.6rem); font-size: var(--step--1); } .site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration: none; transition: color var(--fast) var(--ease); } .site-nav a::after { content: ''; position: absolute; inset-inline: 0; inset-block-end: 7px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--standard) var(--ease); } .lang { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 0.9rem; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: var(--step--1); text-decoration: none; white-space: nowrap; transition: border-color var(--fast) var(--ease), background-color var(--standard) var(--ease); } /* --- hero --------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(3.75rem, 7vw, 7rem) clamp(5rem, 9vw, 8.5rem); } .hero::before { content: ''; position: absolute; z-index: -1; inset-block-start: 0; inset-inline-end: -10rem; width: min(70vw, 58rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient( circle, oklch(0.61 0.11 220 / 0.14), oklch(0.38 0.07 225 / 0.06) 35%, transparent 68% ); pointer-events: none; } .hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr); align-items: center; gap: clamp(2rem, 5vw, 5.5rem); } .kicker { display: flex; align-items: center; gap: 0.65rem; margin-block-end: 1.35rem; color: var(--muted); font-family: var(--mono); font-size: var(--step--1); font-variant-numeric: tabular-nums; font-weight: 560; line-height: 1.3; letter-spacing: 0.11em; text-transform: uppercase; } .hero .kicker::before { content: ''; width: 8px; height: 8px; border: 1px solid var(--accent); border-radius: 2px; background: var(--accent-wash); box-shadow: 16px 0 0 -3px var(--accent-line); } .hero h1 { max-width: 13.5ch; margin-block-end: 1.6rem; font-size: var(--step-4); font-weight: 720; line-height: 1.02; letter-spacing: -0.058em; } .hero-lead { max-width: 49ch; color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; } .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 2.25rem; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; max-width: 100%; padding: 0.72rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-control); font-size: var(--step-0); font-weight: 650; line-height: 1.2; text-align: center; text-decoration: none; transition: transform var(--fast) var(--ease), background-color var(--standard) var(--ease), border-color var(--standard) var(--ease), box-shadow var(--standard) var(--ease); } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 2px oklch(0.04 0.02 245 / 0.2), 0 8px 22px oklch(0.55 0.12 220 / 0.15); } .btn-secondary { border-color: var(--line-soft); background: var(--surface); color: var(--ink); } .btn:active { transform: translateY(1px) scale(0.985); } /* * The claim under the diagram. Small and quiet on purpose: it is a caption, so * it sits at the smallest step and in the muted tone, and it takes the diagram's * measure rather than the page's. */ .hero-caption { max-width: 44ch; margin-block-start: clamp(1rem, 2vw, 1.5rem); color: var(--muted); font-size: var(--step--1); line-height: 1.55; text-wrap: pretty; } @media (max-width: 900px) { .hero-caption { max-width: none; } } .hero-figure { position: relative; width: 100%; min-width: 0; } .hero-figure::before { content: ''; position: absolute; z-index: -1; inset: 12% 6%; border-radius: 50%; background: radial-gradient(circle, var(--accent-wash), transparent 68%); filter: blur(12px); } .hero-figure svg { width: 100%; height: auto; overflow: visible; } .diagram .guide { fill: none; stroke: var(--line-soft); stroke-width: 1; opacity: 0.78; } .diagram .guide-ticks { stroke: var(--line); } .diagram .edge { stroke: var(--muted); stroke-width: 1.35; opacity: 0.58; } .diagram #edge-1, .diagram .egress { stroke: var(--accent); stroke-width: 1.5; opacity: 0.72; } .diagram .node-frame { fill: var(--surface); stroke: var(--line); stroke-width: 1; } .diagram .node-core, .diagram .egress-node, .diagram .packet { fill: var(--accent); } .diagram .node-core { filter: drop-shadow(0 0 6px oklch(0.76 0.13 220 / 0.36)); } .diagram .egress { fill: none; } .diagram .egress-node { stroke: var(--paper); stroke-width: 2; } .diagram .ring { stroke: var(--accent-line); stroke-width: 1; stroke-dasharray: 3 9; opacity: 0.64; } .diagram .hub { filter: drop-shadow(0 8px 12px oklch(0.04 0.03 245 / 0.3)) drop-shadow(0 22px 30px oklch(0.04 0.04 225 / 0.2)); } .diagram .packet { opacity: 0; filter: drop-shadow(0 0 7px oklch(0.76 0.13 220 / 0.72)); } /* --- shared section type ------------------------------------------------ */ section { position: relative; padding-block: var(--section-y); scroll-margin-block-start: 76px; } .section-head { max-width: 47rem; margin-block-end: clamp(2.75rem, 5vw, 4.5rem); } .section-head h2, .community h2, .contact-panel h2 { font-size: var(--step-3); font-weight: 680; letter-spacing: -0.045em; } /* --- capabilities: routed ledger --------------------------------------- */ #capabilities { overflow: clip; background: linear-gradient(180deg, oklch(0.19 0.02 245 / 0.84), oklch(0.165 0.019 245 / 0.94)), var(--paper-raised); } #capabilities .wrap { display: grid; grid-template-columns: minmax(13rem, 0.44fr) minmax(0, 1.56fr); align-items: start; gap: clamp(3rem, 7vw, 7rem); } #capabilities .section-head { position: sticky; inset-block-start: 7rem; margin: 0; } #capabilities .section-head h2 { max-width: 10ch; } .cards { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; min-width: 0; padding-inline-start: 2.25rem; } .cards::before { content: ''; position: absolute; inset-block: 2.1rem; inset-inline-start: 0.5rem; width: 1px; background: linear-gradient( var(--accent-line), var(--line) 18%, var(--line) 82%, var(--accent-line) ); } .card { position: relative; display: grid; grid-template: 'index title body' auto 'index title points' 1fr / 3.5rem minmax(10rem, 0.7fr) minmax(0, 1.3fr); gap: 1rem clamp(1.25rem, 3vw, 2.25rem); min-width: 0; padding: clamp(1.5rem, 3vw, 2rem); overflow: visible; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-soft); transition: transform var(--standard) var(--ease), background-color var(--standard) var(--ease), box-shadow var(--standard) var(--ease); } .card::before { content: ''; position: absolute; inset-block-start: 2rem; inset-inline-start: -1.75rem; width: 1.75rem; height: 1px; background: var(--line); transition: background-color var(--standard) var(--ease); } .route-port { position: absolute; z-index: 1; inset-block-start: calc(2rem - 5px); inset-inline-start: calc(-1.75rem - 5px); width: 10px; height: 10px; border: 1px solid var(--accent-line); border-radius: 3px; background: var(--paper-raised); box-shadow: inset 0 0 0 2px var(--paper-raised); transition: background-color var(--standard) var(--ease), box-shadow var(--standard) var(--ease); } .card-index { grid-area: index; color: var(--accent); font-family: var(--mono); font-size: var(--step--1); font-variant-numeric: tabular-nums; font-weight: 620; letter-spacing: 0.12em; } .card h3 { grid-area: title; max-width: 14ch; font-size: var(--step-2); } .card > p:not(.card-index) { grid-area: body; max-width: 58ch; color: var(--ink-2); } .card ul { grid-area: points; display: grid; gap: 0.58rem; align-self: end; margin: 0; padding: 0; list-style: none; } .card li { position: relative; padding-inline-start: 1.1rem; color: var(--muted); font-size: var(--step--1); line-height: 1.5; } .card li::before { content: ''; position: absolute; inset-block-start: 0.58em; inset-inline-start: 0; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); opacity: 0.72; } /* --- method: one four-checkpoint route ---------------------------------- */ #method .section-head { width: min(100%, 47rem); margin-inline-start: auto; } #method .section-head h2 { max-width: 14ch; } .steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); min-width: 0; } .method-route { position: absolute; z-index: 0; inset-block-start: 21px; inset-inline: 12.5%; height: 1px; background: linear-gradient( 90deg, var(--accent), var(--line) 36%, var(--line) 72%, var(--accent) ); transform-origin: left center; } .step { position: relative; z-index: 1; min-width: 0; } .step-n { display: grid; place-items: center; width: 44px; height: 44px; margin-inline: auto; border: 1px solid var(--accent-line); border-radius: var(--radius-control); background: var(--paper); color: var(--accent); box-shadow: 0 1px 2px oklch(0.04 0.02 245 / 0.24), 0 8px 20px oklch(0.04 0.03 235 / 0.16); font-family: var(--mono); font-size: var(--step--1); font-variant-numeric: tabular-nums; font-weight: 620; letter-spacing: 0.08em; } .step h3 { margin-block-start: 1.7rem; font-size: var(--step-1); letter-spacing: -0.025em; } .step > p:last-child { margin-block-start: 0.75rem; color: var(--ink-2); font-size: var(--step--1); line-height: 1.62; } /* --- stack: inset technical inventory ---------------------------------- */ #stack { padding-inline: var(--gutter); } #stack .wrap { width: 100%; max-width: 1120px; padding: clamp(1.5rem, 5vw, 4rem); border: 1px solid var(--line-soft); border-radius: var(--radius-panel); background: linear-gradient(145deg, oklch(0.225 0.022 245 / 0.74), transparent 52%), var(--surface); box-shadow: inset 0 1px 0 oklch(0.92 0.01 240 / 0.025), 0 22px 58px oklch(0.04 0.025 245 / 0.16); } #stack .section-head { display: grid; grid-template-columns: minmax(9rem, 0.42fr) minmax(0, 1fr); align-items: end; gap: clamp(1.5rem, 5vw, 4rem); max-width: none; } #stack .section-head .kicker { margin: 0; } #stack .section-head h2 { max-width: 13ch; } /* * Two columns, not three: there are four groups, and 4 into 3 leaves one * orphan cell sitting next to a void. A 2x2 fills exactly, keeps every chip * row roughly the same length, and gives the longer group names room to sit * on one line. */ .stack-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; min-width: 0; overflow: hidden; border-radius: 12px; background: var(--line-soft); } .stack-group { min-width: 0; padding: clamp(1.25rem, 2.5vw, 1.75rem); background: var(--paper-raised); } .stack-group h3 { margin-block-end: 1rem; color: var(--muted); font-family: var(--mono); font-size: var(--step--1); font-weight: 620; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; } .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .chips li { max-width: 100%; padding: 0.42rem 0.68rem; border: 1px solid transparent; border-radius: 7px; background: var(--surface); color: var(--ink-2); font-family: var(--mono); font-size: var(--step--1); line-height: 1.35; overflow-wrap: anywhere; transition: transform var(--fast) var(--ease), border-color var(--standard) var(--ease), background-color var(--standard) var(--ease), color var(--standard) var(--ease); } .stack-note { max-width: 72ch; margin-block-start: 1.75rem; color: var(--muted); font-size: var(--step--1); } /* --- production: the prototype-to-production gap ------------------------ */ #production { background: linear-gradient(180deg, oklch(0.2 0.021 245 / 0.55), transparent 60%), var(--paper); } #production .section-head h2 { max-width: 22ch; } .production-lead { max-width: 62ch; margin-block-end: clamp(2.25rem, 4vw, 3.25rem); color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; } /* * A numbered ledger, not a card grid. * * There are five items, and five never divides evenly into an auto-fit grid — * it lands as 3 + 2 with an orphan cell beside a void, which is what this * section looked like first. Rows sidestep the arithmetic entirely: they read * as a sequence (which this is), they take any number of items, and they give * the body copy a full measure instead of a narrow column. */ .production { margin: 0; padding: 0; list-style: none; border-block-start: 1px solid var(--line); } .production-item { display: grid; grid-template-columns: 3.25rem minmax(0, 15rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: start; padding-block: clamp(1.35rem, 2.5vw, 1.9rem); border-block-end: 1px solid var(--line); transition: background var(--fast) var(--ease); } .production-n { color: var(--accent); font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.1em; line-height: 1.7; } .production-item h3 { font-size: var(--step-1); letter-spacing: -0.02em; line-height: 1.25; } .production-item p { color: var(--muted); font-size: var(--step-0); line-height: 1.6; } @media (max-width: 820px) { .production-item { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.5rem 1rem; } /* The number keeps its rail; the body slides under the title it belongs to. */ .production-item p { grid-column: 2; font-size: var(--step--1); } } .production-note { max-width: 58ch; margin-block-start: clamp(1.75rem, 3vw, 2.5rem); color: var(--ink-2); font-size: var(--step-0); line-height: 1.6; } .production-cta { margin-block-start: 1.5rem; } /* --- markets ------------------------------------------------------------ */ .markets-lead { max-width: 58ch; margin-block-end: clamp(2rem, 4vw, 3rem); color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; } .markets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: clip; } /* Hairline dividers come from the 1px grid gap showing the parent through. */ .market { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--surface); } .market h3 { margin-block-end: 0.6rem; font-size: var(--step-1); letter-spacing: -0.02em; } .market p { color: var(--muted); font-size: var(--step--1); line-height: 1.55; } /* --- community: full-bleed editorial split ----------------------------- */ #community { isolation: isolate; overflow: clip; } /* * The panel is anchored to the column that holds the text, never to a * percentage of the section. * * It used to be `#community::before { inset-inline: 50% 0 }` — a band starting * at half the *viewport*. The text starts at 5fr of the *content grid*, and * those two edges are not the same number, so the first ~15px of every line * sat outside the panel it was supposed to be on. Deriving the edge from * `.community-body` itself makes the two impossible to disagree: same box, one * source of truth. It bleeds right with `100vw`, which `overflow: clip` on the * section trims. */ .community { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; gap: clamp(3rem, 8vw, 8rem); min-height: 25rem; } .community-lede { align-self: center; } .community-body { position: relative; display: flex; flex-direction: column; justify-content: center; } .community-body::before { content: ''; position: absolute; z-index: -1; /* Covers the section's own vertical padding, so the band spans it fully. */ inset-block: calc(var(--section-y) * -1); /* Half the grid gap: the edge lands in the gutter, never inside the text. */ inset-inline-start: calc(clamp(3rem, 8vw, 8rem) / -2); width: 100vw; background: linear-gradient(135deg, oklch(0.225 0.022 245 / 0.7), transparent 68%), var(--surface); } .community h2 { max-width: 14ch; } .community-body { padding-block: clamp(1.5rem, 3vw, 3rem); } .community-body > p { max-width: 48ch; color: var(--ink-2); font-size: var(--step-1); line-height: 1.58; } .community-cta { margin-block-start: 1.75rem; } /* --- contact: route terminus and elevated closing surface --------------- */ .contact-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(15rem, 0.8fr); align-items: center; gap: clamp(2rem, 6vw, 5rem); min-width: 0; overflow: hidden; padding: clamp(2rem, 6vw, 5rem); border: 1px solid var(--line); border-radius: calc(var(--radius-panel) + 2px); background: radial-gradient(circle at 84% 0%, oklch(0.55 0.09 220 / 0.14), transparent 20rem), linear-gradient(145deg, var(--surface-2), var(--surface)); box-shadow: var(--shadow-float); } .contact-panel::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-end: 11%; width: 24%; height: 72px; border-inline-end: 1px solid var(--accent-line); border-block-end: 1px solid var(--accent-line); border-end-end-radius: 14px; pointer-events: none; } .contact-node { position: absolute; z-index: 1; inset-block-start: 67px; inset-inline-end: calc(35% - 5px); width: 10px; height: 10px; border: 1px solid var(--accent); border-radius: 3px; background: var(--surface-2); box-shadow: 0 0 0 4px var(--surface-2); pointer-events: none; } .contact-panel > div { position: relative; z-index: 1; } .contact-panel h2 { max-width: 12ch; margin-block-end: 1rem; } .contact-panel > div:first-child > p:last-child { max-width: 58ch; color: var(--ink-2); } .contact-side { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; min-width: 0; padding-block-start: 4rem; } .contact-mail { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; border-block-end: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: var(--step-0); text-decoration: none; overflow-wrap: anywhere; transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); } .contact-meta { color: var(--muted); font-size: var(--step--1); } /* --- footer ------------------------------------------------------------- */ .site-footer { padding-block: 2.25rem 3.5rem; border-block-start: 1px solid var(--line-soft); color: var(--muted); font-size: var(--step--1); } .site-footer .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.75rem; } .site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); text-decoration-color: transparent; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; transition: color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease); } .site-footer .spacer { margin-inline-start: auto; overflow-wrap: anywhere; } /* --- interaction states ------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { .site-nav a:hover { color: var(--ink); } .site-nav a:hover::after { transform: scaleX(1); } .lang:hover { border-color: var(--accent-line); background: var(--surface-2); } .btn:hover { transform: translateY(-2px); } .btn-primary:hover { background: var(--accent-strong); box-shadow: 0 1px 2px oklch(0.04 0.02 245 / 0.24), 0 12px 28px oklch(0.55 0.12 220 / 0.2); } .btn-secondary:hover { border-color: var(--accent-line); background: var(--surface-2); } .card:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent-line); } .card:hover::before { background: var(--accent); } .card:hover .route-port { background: var(--accent); box-shadow: inset 0 0 0 2px var(--surface-2), 0 0 0 5px var(--accent-wash); } .chips li:hover { border-color: var(--accent-line); background: var(--surface-2); color: var(--ink); } .contact-mail:hover, .site-footer a:hover { color: var(--ink); border-color: var(--accent); text-decoration-color: var(--accent); } } /* --- responsive composition ------------------------------------------- */ @media (max-width: 1040px) { .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.82fr); gap: 2rem; } #capabilities .wrap { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; } #capabilities .section-head { position: static; } #capabilities .section-head h2 { max-width: 14ch; } .card { grid-template: 'index title' auto 'index body' auto 'index points' 1fr / 3.25rem minmax(0, 1fr); } } @media (max-width: 820px) { .site-header .wrap { gap: 0.75rem; } .lockup { margin-inline-end: 0; } /* * Six destinations do not fit a 320px header, and `overflow-x: hidden` on * body hides the consequence rather than fixing it: the last links render * past the viewport edge, unreachable and invisible. Scrolling the nav keeps * every destination reachable without hiding the navigation entirely. */ .site-nav { gap: clamp(0.65rem, 2vw, 1rem); margin-inline-start: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { white-space: nowrap; } .site-nav a { font-size: 0.74rem; } .hero { padding-block-start: 3.5rem; } .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 3rem; } .hero h1 { max-width: 14ch; } /* * The claim under the diagram. Small and quiet on purpose: it is a caption, so * it sits at the smallest step and in the muted tone, and it takes the diagram's * measure rather than the page's. */ .hero-caption { max-width: 44ch; margin-block-start: clamp(1rem, 2vw, 1.5rem); color: var(--muted); font-size: var(--step--1); line-height: 1.55; text-wrap: pretty; } @media (max-width: 900px) { .hero-caption { max-width: none; } } .hero-figure { width: min(100%, 37rem); margin-inline: auto; } .steps { grid-template-columns: minmax(0, 1fr); gap: 0; } .method-route { inset-block: 21px 2rem; inset-inline: 21px auto; width: 1px; height: auto; background: linear-gradient(var(--accent), var(--line) 36%, var(--line) 72%, var(--accent)); transform-origin: center top; } .step { display: grid; grid-template: 'number title' auto 'number body' auto / 44px minmax(0, 1fr); gap: 0.65rem 1.25rem; padding-block-end: 2.75rem; } .step:last-child { padding-block-end: 0; } .step-n { grid-area: number; margin: 0; } .step h3 { grid-area: title; align-self: center; margin: 0; } .step > p:last-child { grid-area: body; margin: 0; } #stack .section-head { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } #stack .section-head .kicker { margin-block-end: 0; } .stack-grid { grid-template-columns: minmax(0, 1fr); } .community { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; min-height: 0; } /* * Stacked, the band is a full-width slab under the text rather than a * right-hand column, so it bleeds both ways and stops at the block's own * edges instead of the section's padding. */ .community-body::before { inset-block: 0; inset-inline-start: calc(var(--gutter) * -1); } .community-body { padding: 2.5rem 0; } .contact-panel { grid-template-columns: minmax(0, 1fr); } .contact-panel::before { inset-inline-end: 10%; width: 34%; height: 56px; } .contact-node { inset-block-start: 51px; inset-inline-end: calc(44% - 5px); } .contact-side { padding-block-start: 2.5rem; } } @media (max-width: 560px) { :root { --gutter: 1rem; --section-y: 4.75rem; } .site-header .wrap { flex-wrap: wrap; gap: 0 0.75rem; min-height: 60px; padding-block-end: 0.2rem; } .lockup { min-height: 52px; margin-inline-end: auto; } .site-nav { order: 3; flex: 0 0 100%; justify-content: space-between; width: 100%; margin-inline-start: 0; border-block-start: 1px solid var(--line-soft); } .site-nav a { min-height: 44px; font-size: 0.69rem; white-space: nowrap; } .site-nav a::after { inset-block-end: 3px; } section { scroll-margin-block-start: 108px; } .hero { padding-block: 3.25rem 4.75rem; } .hero::before { inset-block-start: 30%; inset-inline-end: -65%; width: 150vw; } .hero h1 { letter-spacing: -0.05em; } .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); } .hero-actions .btn { width: 100%; } /* * The claim under the diagram. Small and quiet on purpose: it is a caption, so * it sits at the smallest step and in the muted tone, and it takes the diagram's * measure rather than the page's. */ .hero-caption { max-width: 44ch; margin-block-start: clamp(1rem, 2vw, 1.5rem); color: var(--muted); font-size: var(--step--1); line-height: 1.55; text-wrap: pretty; } @media (max-width: 900px) { .hero-caption { max-width: none; } } .hero-figure { margin-block-start: 0.5rem; } .cards { padding-inline-start: 1.5rem; } .cards::before { inset-inline-start: 0.3rem; } .card { grid-template: 'index title' auto 'body body' auto 'points points' auto / 2.5rem minmax(0, 1fr); gap: 0.9rem 0.75rem; padding: 1.25rem; } .card::before { inset-block-start: 1.75rem; inset-inline-start: -1.2rem; width: 1.2rem; } .route-port { inset-block-start: calc(1.75rem - 5px); inset-inline-start: calc(-1.2rem - 5px); } .card-index { align-self: center; } .card h3 { align-self: center; max-width: none; } #stack { padding-inline: var(--gutter); } #stack .wrap { padding: 1.25rem; border-radius: 14px; } .stack-group { padding: 1.15rem; } .contact-panel { padding: 1.5rem; border-radius: 16px; } .contact-panel::before { inset-inline-end: 1.5rem; width: 30%; } .contact-node { inset-inline-end: calc(30% + 1.5rem - 5px); } .contact-side { align-items: stretch; } .contact-side .btn { width: 100%; } .contact-mail { align-self: flex-start; } .site-footer .wrap { align-items: flex-start; flex-direction: column; } .site-footer .spacer { margin-inline-start: 0; } } /* --- animation entry and accessible final states ----------------------- */ .js .reveal { opacity: 0; will-change: opacity, transform; } .js .hero-figure .hub, .js .hero-figure .node, .js .hero-figure .ring, .js .method-route { opacity: 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } .js .reveal, .js .hero-figure .hub, .js .hero-figure .node, .js .hero-figure .ring, .js .method-route { opacity: 1; transform: none; will-change: auto; } .diagram .packet { opacity: 0; } .btn:hover, .btn:active { transform: none; } }