/* ========================================================================== Ėja — svetainė / marketing site · built on the APPROVED cool system Layout: sticky left index rail (wide) → sticky top bar (narrow). Flat, hairline-separated sections. The only motion: the two brand marks (token-driven, play once, respect reduced motion) + standard UI hovers. ========================================================================== */ @import url("ds/styles.css"); /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } :root { /* "desk" behind the 1440px canvas on large monitors — between --tone and --line so it never merges with the tonal band inside the canvas */ --desk: #DDE0E3; } html { color-scheme: light dark; } /* ========================================================================== DARK MODE — system-driven (prefers-color-scheme), derived from the DS's own dark-surface tokens: the ink becomes the paper. Same temperature discipline: one cool family, contrast from lightness, never pure black. Accent flips to --accent-on-dark (#9DB0C6) so slate still reads. ========================================================================== */ @media (prefers-color-scheme: dark) { :root { /* surfaces: ink-family, page darker than card, band a step lighter */ --paper: #19242D; /* = --surface-ink: the page */ --paper-2: #1F2A34; /* raised surface */ --tone: #212D38; /* tonal band */ --desk: #10181E; /* behind the canvas on wide screens */ /* text: light cool grays, same three-step hierarchy */ --ink: #E6E8EA; /* = --text-on-ink */ --ink-2: #C4CBD1; --muted: #8D98A2; --text-faint: #7A858F; /* lines: lifted from the surface, not from black */ --line: #2B3641; --line-2: #39454F; --dline: #5A6873; /* accent: the DS's slate-for-dark; deep variant is LIGHTER here (AA) */ --accent: #9DB0C6; /* = --accent-on-dark */ --accent-deep: #AFC1D3; --accent-soft: #273543; --surface-accent: #273543; --text-on-accent: #19242D; --border-ink: rgba(230, 232, 234, 0.16); --focus-ring: var(--accent); } } body { margin: 0; background: var(--desk); color: var(--text-body); font-family: var(--font-sans); font-size: var(--text-body-size); line-height: var(--text-body-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } a { color: var(--link); } ::selection { background: var(--accent-soft); color: var(--ink); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-xs); } /* language switching: */ [data-lang="lt"] .en { display: none !important; } [data-lang="en"] .lt { display: none !important; } /* ---------- entrance: one page-level breath, never per-element ---------- */ .rail, .topbar, main { transition: opacity var(--dur-slow) var(--ease-out); } html.boot .rail, html.boot .topbar, html.boot main { opacity: 0; } /* ---------- brand mark animation support ---------- */ .mark rect { transform-box: fill-box; transform-origin: center; } @keyframes eja-pop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } } .mark .flash { animation: eja-pop 380ms var(--ease); } /* ---------- shell ---------- */ .shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: start; max-width: var(--container-wide); margin: 0 auto; min-height: 100vh; background: var(--surface-page); } /* frame the page on very wide screens — the canvas reads as a sheet on a desk */ @media (min-width: 1441px) { .shell { border-left: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong); } } main { min-width: 0; padding: 0 clamp(24px, 4vw, 72px); } /* ---------- rail (wide screens) ---------- */ .rail { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-7) var(--space-6); border-right: var(--hairline); } .rail-logo { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 30px; letter-spacing: var(--track-display); line-height: 1; color: var(--text-strong); text-decoration: none; } .rail-nav { display: flex; flex-direction: column; gap: 2px; } .rail-nav a { position: relative; display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline; gap: var(--space-2); padding: 6px 0; font-size: 15px; font-weight: var(--w-regular); color: var(--text-body); text-decoration: none; transition: color var(--dur-base) var(--ease); } /* the brand's square-dot marks the active section — same language as the marks */ .rail-nav a::before { content: ""; position: absolute; left: -14px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--ink); opacity: 0; transform: scale(0.4); transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } .rail-nav a[aria-current="true"]::before { opacity: 1; transform: none; } .rail-nav .n { font-family: var(--font-mono); font-size: var(--size-xs); font-weight: var(--w-medium); color: var(--text-muted); transition: color var(--dur-base) var(--ease); } @media (hover: hover) { .rail-nav a:hover { color: var(--accent-deep); } } .rail-nav a[aria-current="true"], .rail-nav a[aria-current="true"] .n { color: var(--accent-deep); } .rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--size-xs); font-weight: var(--w-medium); letter-spacing: var(--track-wide); color: var(--text-muted); } .rail-foot a { color: var(--text-body); text-decoration: none; } @media (hover: hover) { .rail-foot a:hover { color: var(--accent-deep); } } /* language toggle */ .lang-toggle { display: inline-flex; gap: var(--space-2); align-items: baseline; border: 0; padding: 0; background: none; font-family: var(--font-mono); font-size: var(--size-xs); font-weight: var(--w-medium); letter-spacing: var(--track-wide); color: var(--text-muted); cursor: pointer; } .lang-toggle span { transition: color var(--dur-base) var(--ease); } .lang-toggle .on { color: var(--text-strong); } @media (hover: hover) { .lang-toggle:hover span:not(.on) { color: var(--text-body); } } /* ---------- top bar (narrow screens) ---------- */ .topbar { display: none; } @media (max-width: 1023px) { .shell { grid-template-columns: minmax(0, 1fr); } .rail { display: none; } .topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) clamp(20px, 4vw, 40px); background: var(--surface-page); border-bottom: var(--hairline); } .topbar-logo { font-family: var(--font-display); font-weight: var(--w-bold); font-size: 24px; letter-spacing: var(--track-display); line-height: 1; color: var(--text-strong); text-decoration: none; } .topbar { justify-content: space-between; } main { padding: 0 clamp(20px, 4vw, 40px); } } /* ---------- shared section primitives ---------- */ .section { display: grid; grid-template-columns: repeat(12, 1fr); /* DS rule: section rhythm comes from adjacent margins, no doubling — full space above a section start, roughly half below its end, so two meeting sections produce ~1.5× section-space, not 2× */ padding: var(--section-space) 0 calc(var(--section-space) * 0.55); border-top: var(--hairline); scroll-margin-top: var(--space-3); } .section:first-child { border-top: 0; } .marker { grid-column: 1 / 13; margin-bottom: var(--space-8); } .label { font-family: var(--font-mono); font-size: var(--size-xs); font-weight: var(--w-medium); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-muted); } .label .num { color: var(--accent); } .lead { margin: 0; font-size: var(--size-lead); font-weight: var(--w-regular); line-height: var(--lh-normal); color: var(--text-body); max-width: var(--measure); } /* ---------- 01 hero ---------- */ .hero { padding: var(--hero-padding) 0 var(--section-space); border-top: 0; } .hero-meta { grid-column: 1 / 13; margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: var(--hairline); } .hero h1 { grid-column: 1 / 12; margin: 0; font-family: var(--text-hero-family); font-weight: var(--text-hero-weight); font-size: clamp(2.5rem, 5.2vw, 4.75rem); line-height: var(--text-hero-lh); letter-spacing: var(--text-hero-track); color: var(--text-strong); text-wrap: balance; } .hero h1 em { font-style: normal; color: var(--accent); } /* lead sits directly under the headline — one thought, no void inside it; the mark owns the right column and hangs lower into the whitespace */ .hero .lead { grid-column: 1 / 7; align-self: start; margin-top: var(--space-7); } .hero-mark { grid-column: 9 / 13; align-self: start; justify-self: end; margin-top: var(--space-7); width: min(100%, 240px); } @media (max-width: 1023px) { .hero h1 { grid-column: 1 / 13; } .hero .lead { grid-column: 1 / 13; } .hero-mark { grid-column: 1 / 13; justify-self: start; width: 140px; margin-top: var(--space-7); } } /* ---------- tonal band (02 ką darome) ---------- */ .band { background: var(--surface-tone); margin: 0 calc(-1 * clamp(24px, 4vw, 72px)); padding: var(--band-padding) clamp(24px, 4vw, 72px); border-top: 0; } @media (max-width: 1023px) { .band { margin: 0 calc(-1 * clamp(20px, 4vw, 40px)); padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); } } .band-intro { grid-column: 1 / 8; margin-bottom: var(--space-8); } @media (max-width: 1023px) { .band-intro { grid-column: 1 / 13; } } /* static index — a table of contents, not buttons: no hover motion */ .index-list { grid-column: 1 / 13; border-top: 1px solid var(--border-strong); } .index-row { display: grid; grid-template-columns: 3em minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-6); padding: var(--space-5) 0; border-bottom: var(--hairline); } .index-row .n { font-family: var(--font-mono); font-size: var(--size-sm); font-weight: var(--w-medium); color: var(--text-muted); } .index-row .t { font-family: var(--font-display); font-weight: var(--w-strong); font-size: clamp(1.15rem, 1.6vw, 1.4rem); letter-spacing: var(--track-tight); line-height: var(--lh-snug); color: var(--text-strong); } .index-row .d { font-size: 14px; color: var(--text-muted); max-width: 32ch; text-align: right; } @media (max-width: 767px) { .index-row { grid-template-columns: 3em minmax(0, 1fr); row-gap: var(--space-1); } .index-row .d { grid-column: 2; text-align: left; max-width: none; } } /* ---------- 03 požiūris ---------- */ .prin-grid { grid-column: 1 / 13; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); } .prin { border-top: 2px solid var(--text-strong); padding-top: var(--space-4); } .prin .n { font-family: var(--font-mono); font-size: var(--size-xs); font-weight: var(--w-medium); color: var(--accent); } .prin h3 { margin: var(--space-2) 0 0; font-family: var(--font-display); font-weight: var(--w-h2); font-size: 1.25rem; letter-spacing: var(--track-tight); line-height: var(--lh-snug); color: var(--text-strong); text-wrap: balance; } .prin p { margin: var(--space-4) 0 0; font-size: 15px; line-height: var(--lh-relaxed); color: var(--text-muted); } @media (max-width: 767px) { .prin-grid { grid-template-columns: 1fr; gap: var(--space-6); } } /* quiet colophon under the principles — credibility without a lecture */ .prin-note { grid-column: 1 / 13; margin: var(--space-7) 0 0; font-family: var(--font-mono); font-size: var(--size-xs); font-weight: var(--w-medium); letter-spacing: 0.02em; color: var(--text-muted); } /* ---------- 04 kontaktai + footer ---------- */ .contact { padding-bottom: 0; } /* tighter rhythm at the finale — less dead space above and below the row */ .contact .marker { margin-bottom: var(--space-7); } /* the closing statement — the page's summary, set large; the email answers it */ .contact-statement { grid-column: 1 / 10; margin: 0 0 var(--space-9); font-family: var(--font-display); font-weight: var(--w-h2); font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: var(--track-tight); line-height: var(--lh-snug); color: var(--text-strong); text-wrap: balance; } @media (max-width: 1023px) { .contact-statement { grid-column: 1 / 13; margin-bottom: var(--space-8); } } .contact-main { grid-column: 1 / 8; align-self: end; } .contact-mail { position: relative; display: inline-block; margin-top: var(--space-4); font-family: var(--font-display); font-weight: var(--w-h2); font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: var(--track-tight); line-height: 1.05; color: var(--text-strong); text-decoration: none; transition: color var(--dur-base) var(--ease); } /* underline draws in from the left — not a fade, a line being made */ .contact-mail::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); } @media (hover: hover) { .contact-mail:hover { color: var(--accent-deep); } .contact-mail:hover::after { transform: scaleX(1); } } .contact-mail:focus-visible::after { transform: scaleX(1); } .contact-line { margin: var(--space-5) 0 0; font-family: var(--font-mono); font-size: var(--size-sm); font-weight: var(--w-medium); letter-spacing: var(--track-wide); color: var(--text-muted); } /* the resolution of chaos→structure — big enough to end the story, bottom-aligned with the email so both read as one closing row */ .contact-mark { grid-column: 9 / 13; align-self: end; justify-self: end; width: min(100%, 264px); margin-bottom: -12px; /* optical: the svg has ~20px internal whitespace below the last square row — pull down so squares sit on the email baseline, not the svg box edge */ } /* tablets and phones keep the desktop's closing row: email left, mark right */ .footer-bar { position: relative; grid-column: 1 / 13; margin-top: var(--space-8); padding: var(--space-6) 0 var(--space-8); border-top: var(--hairline); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); font-family: var(--font-mono); font-size: var(--size-xs); font-weight: var(--w-medium); letter-spacing: var(--track-wide); color: var(--text-muted); } /* the sign-off: live-text ė (never a drawn glyph), set like a book colophon — centered ON the hairline, the rule breaking around the glyph */ .footer-e { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 0 16px; background: var(--surface-page); font-family: var(--font-display); font-weight: var(--w-bold); font-size: 34px; line-height: 1; letter-spacing: 0; color: var(--text-strong); user-select: none; } /* ========================================================================== MOBILE DESIGN (≤767px) — not shrunken desktop: its own rhythm. Phones don't need the sheet's silence; they need tempo. Macro spacing drops a full step, marks go right to keep the diagonal, type holds size. ========================================================================== */ @media (max-width: 767px) { /* tempo: full space above a section, less inside, less below. padding-block only — never clobber the band's horizontal padding */ .section { padding-block: var(--space-7) var(--space-6); scroll-margin-top: 64px; /* clear the sticky topbar */ } .marker { margin-bottom: var(--space-6); } /* hero: statement → lead → mark, stepping left-left-right (diagonal) */ .hero { padding-block: var(--space-7); } .hero-meta { margin-bottom: var(--space-5); } .hero .lead { margin-top: var(--space-5); } .hero-mark { justify-self: end; width: 120px; margin-top: var(--space-6); } /* band: tighter intro, denser rows */ .band { padding-block: var(--space-7); } .band-intro { margin-bottom: var(--space-6); } .index-row { padding: var(--space-4) 0; grid-template-columns: 2.2em minmax(0, 1fr); } /* readability on small screens: body-tone ink, one step up in size */ .index-row .d { font-size: 15px; color: var(--text-body); } /* principles: closer to their marker, steady gaps */ .prin-grid { gap: var(--space-6); } .prin p { margin-top: var(--space-3); font-size: 16px; color: var(--text-body); } .prin-note { margin-top: var(--space-6); font-size: var(--size-sm); } /* contact: one closing row — email left, mark right, shared baseline. Two stacked half-width rows made two voids; one row makes one gesture. */ .contact-statement { margin-bottom: var(--space-7); } .contact-main { grid-column: 1 / 9; } .contact-mail { font-size: clamp(1.6rem, 8.5vw, 2rem); } .contact-mark { grid-column: 9 / 13; justify-self: end; align-self: end; width: min(100%, 96px); margin: 0 0 4px; } /* the © is the last word — nothing hollow beneath it */ .contact { padding-block-end: 0; } .footer-bar { margin-top: var(--space-6); padding-top: var(--space-5); padding-bottom: var(--space-6); } .footer-e { font-size: 28px; padding: 0 12px; } }