/* ========================================================================= DS9 — stylesheet Hand-written design layer. The build script and the editorial agent MUST NOT modify this file. New content types get their styles added here deliberately, by a human. Typefaces: IBM Plex Sans + IBM Plex Mono, self-hosted from assets/fonts. Chosen for full Slovak diacritic coverage and a technical register. No third-party font CDN: no external requests, no cookie banner needed. ========================================================================= */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root { /* colour — light */ --paper: #f5f6f4; --paper-2: #eceeea; --paper-3: #e3e6e1; --ink: #10151a; --ink-2: #4e5860; --ink-3: #7c868e; --rule: #dbdfd9; --accent: #1f6b54; --accent-ink: #14493a; --accent-soft: rgba(31, 107, 84, 0.10); --selection: rgba(31, 107, 84, 0.18); /* type */ --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", "Consolas", monospace; --t-display: clamp(2.35rem, 1.55rem + 3.3vw, 4.05rem); --t-h1: clamp(1.95rem, 1.45rem + 2.1vw, 2.95rem); --t-h2: clamp(1.35rem, 1.22rem + 0.62vw, 1.7rem); --t-h3: 1.075rem; --t-lead: clamp(1.14rem, 1.05rem + 0.42vw, 1.32rem); --t-body: 1.0625rem; --t-small: 0.875rem; --t-micro: 0.75rem; --lh-tight: 1.12; --lh-snug: 1.32; --lh-body: 1.66; /* space */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2.25rem; --s7: 3.5rem; --s8: 5.5rem; --s9: 8rem; /* measure */ --measure: 36rem; /* ~68 characters of prose */ --measure-wide: 52rem; /* transcripts, figures, diagrams */ --shell: 64rem; /* page container */ --radius: 2px; --rule-w: 1px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } @media (prefers-color-scheme: dark) { :root { --paper: #0d1113; --paper-2: #141a1d; --paper-3: #1b2226; --ink: #e6e9e5; --ink-2: #a3aca8; --ink-3: #79837f; --rule: #222a2d; --accent: #4fbf9b; --accent-ink: #7ad4b7; --accent-soft: rgba(79, 191, 155, 0.13); --selection: rgba(79, 191, 155, 0.22); } } /* Manual override, set by the theme toggle on */ html[data-theme="light"] { color-scheme: light; --paper: #f5f6f4; --paper-2: #eceeea; --paper-3: #e3e6e1; --ink: #10151a; --ink-2: #4e5860; --ink-3: #7c868e; --rule: #dbdfd9; --accent: #1f6b54; --accent-ink: #14493a; --accent-soft: rgba(31, 107, 84, 0.10); --selection: rgba(31, 107, 84, 0.18); } html[data-theme="dark"] { color-scheme: dark; --paper: #0d1113; --paper-2: #141a1d; --paper-3: #1b2226; --ink: #e6e9e5; --ink-2: #a3aca8; --ink-3: #79837f; --rule: #222a2d; --accent: #4fbf9b; --accent-ink: #7ad4b7; --accent-soft: rgba(79, 191, 155, 0.13); --selection: rgba(79, 191, 155, 0.22); } /* ---------- 2. Fonts ----------------------------------------------------- */ @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* ---------- 3. Reset ----------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body); font-feature-settings: "kern", "liga", "calt"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; } ::selection { background: var(--selection); } img, svg, video { display: block; max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); } .skip-link { position: absolute; left: var(--s4); top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: var(--s2) var(--s4); border-radius: var(--radius); transition: top 0.18s var(--ease); } .skip-link:focus { top: var(--s4); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- 4. Layout ---------------------------------------------------- */ .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--s5); } @media (min-width: 40rem) { .shell { padding-inline: var(--s6); } } main { flex: 1 0 auto; } .section-block { padding-block: var(--s8); } .section-block + .section-block { padding-block-start: 0; } /* Prose column, with wide children allowed to break out */ .prose { max-width: var(--measure); } .prose > .wide { max-width: var(--measure-wide); width: min(var(--measure-wide), 100%); } /* Wide children start at the text edge and grow to the right, matching the diagram and lead image, which are siblings of .prose inside the same shell. A symmetric breakout would only be correct if .prose were centred in the shell; it is left-aligned, so a negative start margin pushed body figures out into the left margin, away from the text they belong to. */ /* ---------- 5. Typography ------------------------------------------------ */ h1, h2, h3, h4 { font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.021em; text-wrap: balance; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); letter-spacing: -0.015em; line-height: var(--lh-snug); } h3 { font-size: var(--t-h3); letter-spacing: -0.006em; } .display { font-size: var(--t-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.032em; text-wrap: balance; } .lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } .eyebrow { font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); } .meta { font-family: var(--font-mono); font-size: var(--t-small); color: var(--ink-3); line-height: 1.5; } .prose p, .prose ul, .prose ol { text-wrap: pretty; } .prose > * + * { margin-block-start: var(--s5); } .prose > h2 { margin-block-start: var(--s7); } .prose > h3 { margin-block-start: var(--s6); margin-block-end: calc(var(--s5) * -0.4); } .prose > h2 + *, .prose > h3 + * { margin-block-start: var(--s4); } .prose ul, .prose ol { padding-inline-start: 1.15rem; } .prose li + li { margin-block-start: var(--s2); } .prose li::marker { color: var(--ink-3); } .prose strong { font-weight: 600; } .prose blockquote { border-inline-start: 2px solid var(--accent); padding-inline-start: var(--s5); color: var(--ink-2); font-style: italic; } /* Links: the underline grows rather than appearing. */ a { color: inherit; text-decoration: none; } .prose a, .link { color: var(--ink); background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-block-end: 0.08em; transition: background-size 0.22s var(--ease), color 0.22s var(--ease); } .prose a:hover, .link:hover { color: var(--accent-ink); background-size: 100% 2px; } /* ---------- 6. Header and footer ---------------------------------------- */ .site-header { border-block-end: var(--rule-w) solid var(--rule); position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(150%) blur(10px); } .site-header__inner { display: flex; align-items: center; gap: var(--s5); min-height: 4rem; } .wordmark { font-family: var(--font-mono); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; } .wordmark span { color: var(--accent); } .site-nav { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s5); } .site-nav a { font-size: var(--t-small); color: var(--ink-2); position: relative; padding-block: var(--s2); transition: color 0.18s var(--ease); } .site-nav a:hover { color: var(--ink); } .site-nav a[aria-current="page"] { color: var(--ink); } .site-nav a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0; bottom: -0.1rem; height: 1px; background: var(--accent); } .lang-switch, .theme-toggle { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); background: none; border: var(--rule-w) solid var(--rule); border-radius: var(--radius); padding: var(--s1) var(--s2); cursor: pointer; transition: border-color 0.18s var(--ease), color 0.18s var(--ease); } .lang-switch:hover, .theme-toggle:hover { color: var(--ink); border-color: var(--ink-3); } @media (max-width: 46rem) { .site-nav { gap: var(--s4); } .site-nav a { font-size: var(--t-micro); } } .site-footer { border-block-start: var(--rule-w) solid var(--rule); margin-block-start: var(--s8); padding-block: var(--s6); color: var(--ink-3); font-size: var(--t-small); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: baseline; justify-content: space-between; } /* ---------- 7. Hero ------------------------------------------------------ */ .hero { padding-block: clamp(var(--s7), 10vw, var(--s9)) var(--s8); max-width: 46rem; } .hero .eyebrow { display: block; margin-block-end: var(--s5); } .hero .display { margin-block-end: var(--s5); } .hero .lead { max-width: var(--measure); } .hero__actions { margin-block-start: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; } /* ---------- 8. Capability list ------------------------------------------ */ .capabilities { display: grid; gap: 0; border-block-start: var(--rule-w) solid var(--rule); } .capability { display: grid; gap: var(--s2) var(--s6); padding-block: var(--s5); border-block-end: var(--rule-w) solid var(--rule); } @media (min-width: 48rem) { .capability { grid-template-columns: 14rem 1fr; align-items: start; padding-block: var(--s6); } } .capability h3 { font-size: 1rem; } .capability p { color: var(--ink-2); max-width: var(--measure); } /* ---------- 9. Index rows (work, notes) --------------------------------- */ /* Deliberately a list, not cards: no boxes, no shadows, no thumbnails grid. */ .index-list { border-block-start: var(--rule-w) solid var(--rule); } .index-row { display: block; padding-block: var(--s6); border-block-end: var(--rule-w) solid var(--rule); position: relative; transition: background-color 0.2s var(--ease); } .index-row::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--s5) * -1); width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 0.28s var(--ease); } .index-row:hover::before, .index-row:focus-visible::before { transform: scaleY(1); } .index-row__head { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: baseline; margin-block-end: var(--s3); } .index-row__title { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.55rem); letter-spacing: -0.018em; } .index-row:hover .index-row__title { color: var(--accent-ink); } .index-row__summary { color: var(--ink-2); max-width: var(--measure); } .index-row__foot { margin-block-start: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); } /* ---------- 10. Tags and stack ------------------------------------------ */ .tag-row { display: flex; flex-wrap: wrap; gap: var(--s2); } .tag { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.02em; color: var(--ink-3); border: var(--rule-w) solid var(--rule); border-radius: var(--radius); padding: 0.15rem var(--s2); white-space: nowrap; } .tag--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .maturity { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; } .maturity--production { color: var(--accent); } .maturity--pilot { color: var(--ink-2); } .maturity--prototype { color: var(--ink-3); } /* ---------- 11. Article header ------------------------------------------ */ .article-header { padding-block: var(--s7) var(--s6); border-block-end: var(--rule-w) solid var(--rule); margin-block-end: var(--s7); max-width: var(--measure-wide); } .article-header .eyebrow { display: block; margin-block-end: var(--s4); } .article-header h1 { margin-block-end: var(--s5); } .article-header .lead { max-width: var(--measure); } .article-header__meta { margin-block-start: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); } .factbox { margin-block-start: var(--s6); display: grid; gap: var(--s4) var(--s6); border-block: var(--rule-w) solid var(--rule); padding-block: var(--s5); } @media (min-width: 44rem) { .factbox { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .factbox dt { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-block-end: var(--s2); } .factbox dd { font-size: var(--t-small); color: var(--ink); } .factbox ul { list-style: none; padding: 0; } .factbox li { position: relative; padding-inline-start: var(--s4); } .factbox li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.62em; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; } /* ---------- 12. SIGNATURE: transcript block ------------------------------ */ /* Real interaction with a real system, shown rather than described. This is the one loud element on the site. Everything else stays quiet. */ .transcript { background: var(--paper-2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.62; overflow: hidden; } .transcript__title { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border-block-end: var(--rule-w) solid var(--rule); background: var(--paper-3); color: var(--ink-2); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; } .transcript__title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .transcript__body { padding: var(--s5); overflow-x: auto; display: grid; gap: var(--s3); } .tline { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s4); align-items: start; } @media (max-width: 34rem) { .tline { grid-template-columns: 1fr; gap: var(--s1); } } .tline__role { color: var(--ink-3); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; padding-block-start: 0.18em; user-select: none; } .tline__text { white-space: pre-wrap; word-break: break-word; } .tline--in .tline__text { color: var(--ink); } .tline--out .tline__text { color: var(--ink-2); } .tline--comment .tline__text { color: var(--ink-3); font-style: italic; } .tline--result .tline__text { color: var(--ink); } .tline--result .tline__role { color: var(--accent); } /* The approval gate: the argument of half the portfolio, made visible. */ .tline--approval { background: var(--accent-soft); border-inline-start: 2px solid var(--accent); margin-inline: calc(var(--s5) * -1); padding: var(--s3) var(--s5); grid-template-columns: 5.5rem 1fr; } .tline--approval .tline__role { color: var(--accent); font-weight: 500; } .tline--approval .tline__text { color: var(--ink); } /* ---------- 13. Terminal / code ----------------------------------------- */ .terminal { background: var(--paper-2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius); padding: var(--s5); font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.6; overflow-x: auto; color: var(--ink-2); } .terminal .cmd { color: var(--ink); display: block; } .terminal .cmd::before { content: "$ "; color: var(--accent); } .prose :not(pre) > code { font-family: var(--font-mono); font-size: 0.88em; background: var(--paper-2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius); padding: 0.08em 0.32em; } /* ---------- 14. Figures, diagrams, video -------------------------------- */ figure { margin: 0; } .figure { display: grid; gap: var(--s3); } .figure img, .figure svg { width: 100%; border: var(--rule-w) solid var(--rule); border-radius: var(--radius); background: var(--paper-2); } .figure--diagram svg { border: none; background: none; } .figure figcaption { font-family: var(--font-mono); font-size: var(--t-micro); line-height: 1.55; color: var(--ink-3); max-width: var(--measure); } .figure figcaption b { color: var(--ink-2); font-weight: 500; } /* Video facade: no third-party code until the visitor asks for it. */ .video { position: relative; aspect-ratio: 16 / 9; border: var(--rule-w) solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); } .video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } .video__play { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--paper) 25%, transparent); border: 0; cursor: pointer; transition: background-color 0.22s var(--ease); } .video__play:hover { background: color-mix(in srgb, var(--paper) 8%, transparent); } .video__play span { font-family: var(--font-mono); font-size: var(--t-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--paper); background: var(--ink); padding: var(--s3) var(--s5); border-radius: var(--radius); } .video__note { margin-block-start: var(--s2); font-family: var(--font-mono); font-size: var(--t-micro); color: var(--ink-3); } /* ---------- 15. Caveat --------------------------------------------------- */ .caveat { border-inline-start: 2px solid var(--ink-3); padding: var(--s2) 0 var(--s2) var(--s5); color: var(--ink-2); font-size: var(--t-small); } .caveat::before { content: attr(data-label); display: block; font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-block-end: var(--s2); } /* ---------- 16. Testimonial --------------------------------------------- */ .testimonial { border-block: var(--rule-w) solid var(--rule); padding-block: var(--s6); max-width: var(--measure-wide); } .testimonial blockquote { font-size: var(--t-lead); line-height: 1.45; letter-spacing: -0.012em; text-wrap: pretty; border: 0; padding: 0; font-style: normal; color: var(--ink); } .testimonial figcaption { margin-block-start: var(--s4); font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } /* ---------- 17. Services ------------------------------------------------- */ .package { border-block-start: var(--rule-w) solid var(--rule); padding-block: var(--s6); display: grid; gap: var(--s4); } @media (min-width: 52rem) { .package { grid-template-columns: 3rem 1fr; column-gap: var(--s6); } .package__num { grid-row: span 3; } } .package__num { font-family: var(--font-mono); font-size: var(--t-small); color: var(--accent); padding-block-start: 0.35em; } .package h3 { font-size: 1.2rem; letter-spacing: -0.015em; } .package p { color: var(--ink-2); max-width: var(--measure); } .package ul { max-width: var(--measure); padding-inline-start: 1.1rem; color: var(--ink-2); } .package li + li { margin-block-start: var(--s2); } /* ---------- 18. Contact -------------------------------------------------- */ .contact-form { display: grid; gap: var(--s5); max-width: var(--measure); margin-block-start: var(--s6); } .field { display: grid; gap: var(--s2); } .field label { font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); } .field input, .field textarea { font: inherit; color: var(--ink); background: var(--paper-2); border: var(--rule-w) solid var(--rule); border-radius: var(--radius); padding: var(--s3) var(--s4); transition: border-color 0.18s var(--ease); } .field input:hover, .field textarea:hover { border-color: var(--ink-3); } .field textarea { min-height: 9rem; resize: vertical; } .field__help { font-size: var(--t-small); color: var(--ink-3); } .button { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: var(--t-small); letter-spacing: 0.04em; color: var(--paper); background: var(--ink); border: var(--rule-w) solid var(--ink); border-radius: var(--radius); padding: var(--s3) var(--s5); cursor: pointer; justify-self: start; transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); } .button:hover { background: var(--accent); border-color: var(--accent); } .button--quiet { color: var(--ink); background: none; border-color: var(--rule); } .button--quiet:hover { background: none; border-color: var(--accent); color: var(--accent-ink); } /* ---------- 19. Pagination / prev-next ---------------------------------- */ .article-nav { margin-block-start: var(--s8); border-block-start: var(--rule-w) solid var(--rule); padding-block-start: var(--s5); display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: space-between; font-size: var(--t-small); } /* ---------- 20. Motion ---------------------------------------------------- */ /* One orchestrated device: content rises slightly as it enters. Nothing else. */ .reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); transition-delay: var(--reveal-delay, 0ms); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ---------- 21. Print ---------------------------------------------------- */ @media print { .site-header, .site-footer, .article-nav, .video__play { display: none; } body { background: #fff; color: #000; } .prose a { background: none; text-decoration: underline; } }