/* * 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; homepage.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 > * { 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); } /* `:is`, not `:where`: the focus ring is the one rule in this sheet that a later `outline: none` must not be able to win against by specificity accident. */ :is(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); } .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); } /* --- 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:active { transform: translateY(1px) scale(0.985); } .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); } .site-footer a:hover { color: var(--ink); text-decoration-color: var(--accent); } } /* --- responsive composition ------------------------------------------- */ @media (max-width: 820px) { .site-header .wrap { gap: 0.75rem; } .lockup { margin-inline-end: 0; } /* * Site-level destinations do not fit every narrow header. Scrolling the nav * keeps every destination reachable instead of clipping the final links — but * a suppressed scrollbar leaves nothing saying there is more, so the two * background layers below supply the cue. * * The technique is the `local`/`scroll` background pair: the vignette is * pinned to the box (`scroll`), while the cover rides with the content * (`local`) and parks over the vignette exactly when the last destination is * on screen. A nav that fits shows no cue at all, and one that is scrolled to * its end stops advertising more — neither of which a static gradient or a * fixed mask can do, and neither needs a line of JavaScript. */ .site-nav { gap: clamp(0.55rem, 1.6vw, 1rem); margin-inline-start: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; background: linear-gradient(to left, var(--paper) 0 34%, transparent 100%) right / 3rem 100% no-repeat local, linear-gradient(to right, var(--paper) 0 34%, transparent 100%) left / 3rem 100% no-repeat local, linear-gradient(to left, var(--accent) 0 2px, transparent 2px) right / 3rem 100% no-repeat scroll, linear-gradient(to right, var(--accent) 0 2px, transparent 2px) left / 3rem 100% no-repeat scroll, linear-gradient(to left, oklch(0.04 0.02 245 / 0.96) 0 30%, oklch(0.04 0.02 245 / 0) 100%) right / 3rem 100% no-repeat scroll, linear-gradient(to right, oklch(0.04 0.02 245 / 0.96) 0 30%, oklch(0.04 0.02 245 / 0) 100%) left / 3rem 100% no-repeat scroll; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { font-size: 0.74rem; white-space: nowrap; } } @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%; /* * Wrap instead of scroll: with five destinations a 320px row overflows by * only ~21px, too little for any scroll cue to read (the local cover sits * over it), so the last link clipped mid-word. A second line keeps every * destination visible with no gesture to discover. */ flex-wrap: wrap; 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; } .site-footer .wrap { align-items: flex-start; flex-direction: column; } .site-footer .spacer { margin-inline-start: 0; } } @media (prefers-reduced-motion: reduce) { .btn:hover, .btn:active { transform: none; } }