/* aifredas.lt — static site. Colours, radii and type sizes come from the shared kit tokens (tokens.css, copied from packages/ui/src/tokens.css). Light and dark modes switch exactly as in the application: prefers-color-scheme unless says otherwise (mode.js). Controls mirror the kit's Button (tones primary / quiet / ghost) and Chip (ok / caution / neutral). */ @import url("tokens.css"); @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin.woff2") format("woff2"); } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/source-serif-4-latin.woff2") format("woff2"); } :root { --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Source Serif 4", "Iowan Old Style", Georgia, serif; --measure: 1120px; /* The staff rail gradient is the same in both modes (tokens.css comment). */ --band-gradient: linear-gradient(180deg, var(--workspace-nav-gradient-start) 0%, var(--workspace-nav-gradient-end) 100%); --shadow-shot: 0 24px 48px -24px rgb(12 34 64 / 35%); } :root[data-color-mode="dark"] { --shadow-shot: 0 24px 48px -24px rgb(0 0 0 / 60%); } @media (prefers-color-scheme: dark) { :root:not([data-color-mode="light"]) { --shadow-shot: 0 24px 48px -24px rgb(0 0 0 / 60%); } } /* ---------- Base (mirrors packages/ui/src/base.css) ---------- */ @layer base { * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-body-md); line-height: 1.5; color: var(--color-ink-strong); background: var(--color-surface); -webkit-font-smoothing: antialiased; font-feature-settings: "cv02", "cv03", "cv04", "cv11"; } h1, h2, h3 { margin: 0; font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.012em; text-wrap: pretty; } p { margin: 0; text-wrap: pretty; } a { color: var(--color-brand); text-decoration: none; } a:hover { color: var(--color-anchor); } svg { display: block; } ul { margin: 0; padding: 0; list-style: none; } :where(a[href], button:not(:disabled), summary) { cursor: pointer; } :where(button) { font: inherit; } .kit-num { font-variant-numeric: tabular-nums; } } /* Focus is intentionally unlayered: nothing may remove it. */ :where(a[href], button, summary, [tabindex]):focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } @media (pointer: coarse) { :where([data-kit-button], [data-kit-control]) { min-height: 2.75rem; } } /* ---------- Kit primitives ---------- */ /* Button: tones and sizes as in packages/ui/src/button.tsx; `lg` is the one marketing-only size (48px), added here rather than inlined per page. */ [data-kit-button] { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; border: 1px solid transparent; border-radius: var(--radius-control); font-weight: 600; white-space: nowrap; transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; height: 2.25rem; min-height: 2.25rem; padding: 0 0.75rem; font-size: var(--text-body); } [data-kit-button][data-kit-size="sm"] { height: 2rem; min-height: 2rem; padding: 0 0.625rem; font-size: var(--text-table); } [data-kit-button][data-kit-size="lg"] { height: 3rem; min-height: 3rem; padding: 0 1.375rem; font-size: var(--text-body-lg); } [data-kit-button][data-tone="primary"] { border-color: var(--color-brand); background: var(--color-anchor); color: var(--color-brand-ink); } [data-kit-button][data-tone="primary"]:hover { background: var(--color-brand); color: var(--color-brand-ink); } [data-kit-button][data-tone="quiet"] { border-color: var(--color-hairline); background: var(--color-surface); color: var(--color-ink-strong); } [data-kit-button][data-tone="quiet"]:hover { border-color: var(--color-brand); color: var(--color-brand); } [data-kit-button][data-tone="ghost"] { background: transparent; color: var(--color-ink-muted); } [data-kit-button][data-tone="ghost"]:hover { background: var(--color-surface-sunken); color: var(--color-ink-strong); } [data-kit-button][data-tone="ghost"][data-on-band] { color: rgb(255 255 255 / 76%); } [data-kit-button][data-tone="ghost"][data-on-band]:hover { background: rgb(255 255 255 / 10%); color: #fff; } /* Chip: packages/ui/src/chip.tsx */ [data-kit-chip] { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; padding: 0.125rem 0.5rem; font-size: var(--text-chip); font-weight: 600; white-space: nowrap; } [data-kit-chip][data-tone="ok"] { background: var(--color-gain-bg); color: var(--color-gain); } [data-kit-chip][data-tone="caution"] { background: var(--color-caution-bg); color: var(--color-caution); } [data-kit-chip][data-tone="neutral"] { background: var(--color-canvas); color: var(--color-ink-muted); } /* Overline / section label */ .overline { font-size: var(--text-overline); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-caption); } .arrow-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-body-lg); font-weight: 600; min-height: 2.75rem; } /* Colour mode toggle: icon shown follows data-mode, as in ColorModeToggle. */ [data-color-mode-toggle] { width: 2rem; min-width: 2rem; padding: 0; } [data-color-mode-toggle] svg { width: 1rem; height: 1rem; display: none; } [data-color-mode-toggle][data-mode="light"] .icon-light, [data-color-mode-toggle][data-mode="dark"] .icon-dark, [data-color-mode-toggle][data-mode="system"] .icon-system, [data-color-mode-toggle]:not([data-mode]) .icon-system { display: block; } /* ---------- Layout ---------- */ .skip { position: absolute; left: -999px; top: 8px; background: var(--color-anchor); color: var(--color-brand-ink); padding: 8px 12px; border-radius: 6px; z-index: 10; } .skip:focus { left: 8px; } .wrap { width: min(100% - 48px, var(--measure)); margin: 0 auto; } @media (max-width: 640px) { .wrap { width: calc(100% - 40px); } } .site-header { border-bottom: 1px solid var(--color-hairline); background: var(--color-surface); position: sticky; top: 0; z-index: 5; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 4.5rem; gap: 24px; } .wordmark { font-size: var(--text-nav-brand); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-brand); } .site-nav { display: flex; align-items: center; gap: 32px; font-size: var(--text-body-md); font-weight: 500; } .site-nav a { color: var(--color-ink-strong); } .site-nav a:hover { color: var(--color-brand); } .site-nav a[aria-current="page"] { color: var(--color-brand); border-bottom: 2px solid var(--color-brand); padding-bottom: 2px; } .header-actions { display: flex; align-items: center; gap: 8px; } .menu { display: none; position: relative; } @media (max-width: 900px) { .site-header .wrap { height: 3.75rem; } .site-nav, .header-actions .demo { display: none; } .menu { display: block; } .menu summary { list-style: none; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; color: var(--color-ink-strong); border-radius: var(--radius-control); } .menu summary::-webkit-details-marker { display: none; } .menu[open] summary { background: var(--color-surface-sunken); } .menu-panel { position: absolute; right: -20px; left: auto; top: 3.25rem; min-width: 260px; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-panel); box-shadow: 0 12px 32px -12px rgb(0 0 0 / 30%); padding: 8px; display: flex; flex-direction: column; gap: 2px; } .menu-panel a { display: flex; align-items: center; min-height: 2.75rem; padding: 0 12px; border-radius: var(--radius-control); font-size: var(--text-body-base); font-weight: 500; color: var(--color-ink-strong); } .menu-panel a:hover { background: var(--color-surface-sunken); } .menu-panel [data-kit-button] { margin-top: 6px; justify-content: center; } } @media (min-width: 901px) { .menu-panel { display: none; } } /* Hero */ .hero { background: var(--color-canvas); border-bottom: 1px solid var(--color-hairline); padding: 96px 0 88px; } .hero .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; } .hero-copy { display: flex; flex-direction: column; gap: 24px; max-width: 560px; } .hero h1 { font-size: clamp(2.125rem, 4.2vw, 3.5rem); line-height: 1.08; } .hero .lede { font-size: 1.125rem; line-height: 1.55; color: var(--color-ink-muted); } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; } .hero .note { font-size: var(--text-body); color: var(--color-ink-caption); } .hero-single .wrap { display: flex; flex-direction: column; gap: 24px; } .hero-single h1 { max-width: 760px; } .hero-single .lede { max-width: 680px; } @media (max-width: 900px) { .hero { padding: 48px 0 40px; } .hero .wrap { grid-template-columns: 1fr; gap: 32px; } .hero-actions [data-kit-button] { width: 100%; } } /* Product illustration: a frame with the staff rail and kit number panels. */ .shot { display: flex; border-radius: var(--radius-panel); overflow: hidden; border: 1px solid var(--color-hairline-strong); background: var(--color-surface); box-shadow: var(--shadow-shot); min-height: 420px; } .shot-rail { width: 168px; flex-shrink: 0; background: var(--band-gradient); display: flex; flex-direction: column; gap: 6px; padding: 18px 12px; } .shot-rail .brand { font-size: var(--text-caption); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--workspace-nav-section); padding: 0 8px 10px; } .shot-rail div:not(.brand) { font-size: var(--text-table); color: var(--workspace-nav-ink-muted); padding: 7px 10px; border-radius: 6px; } .shot-rail .active { color: var(--workspace-nav-ink); background: linear-gradient(90deg, var(--workspace-nav-active-start), var(--workspace-nav-active-end)); border-left: 2px solid var(--workspace-nav-active-stripe); } .shot-main { flex-grow: 1; background: var(--color-canvas); display: flex; flex-direction: column; gap: 14px; padding: 20px; min-width: 0; } .shot-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .shot-title b { font-size: var(--text-body-lg); font-weight: 600; } .shot-title span { font-size: var(--text-label); color: var(--color-ink-caption); } .tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .tile { background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-panel); padding: 12px; display: flex; flex-direction: column; gap: 6px; } .tile span { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-caption); } .bar { height: 14px; background: var(--color-ink-strong); opacity: 0.85; border-radius: 3px; } .bar-muted { background: var(--color-hairline-strong); opacity: 1; height: 12px; } .bar-faint { background: var(--color-hairline); opacity: 1; height: 12px; } .panel { background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-panel); padding: 14px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; } .panel-head { display: flex; justify-content: space-between; font-size: var(--text-label); color: var(--color-ink-caption); } .row { display: flex; align-items: center; gap: 10px; } .row span { width: 88px; font-size: var(--text-label); color: var(--color-ink-muted); flex-shrink: 0; } .track { flex-grow: 1; height: 10px; background: var(--color-chart-grid); border-radius: 3px; overflow: hidden; } .track i { display: block; height: 10px; } .s2 { background: var(--color-series-2); } .s4 { background: var(--color-series-4); } .s6 { background: var(--color-series-6); } .s7 { background: var(--color-series-7); } .chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; } .shot-table { flex-direction: column; min-height: 0; } .shot-table > div { display: grid; grid-template-columns: 3fr 2fr 2fr; gap: 12px; padding: 12px 18px; align-items: center; border-top: 1px solid var(--color-hairline-soft); } .shot-table .shot-head { display: flex; justify-content: space-between; border-top: 0; border-bottom: 1px solid var(--color-hairline); font-size: var(--text-body); font-weight: 600; padding: 14px 18px; } .shot-table .shot-cols { border-top: 0; padding: 10px 18px; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-ink-caption); } .shot-table .shot-foot { display: flex; justify-content: space-between; background: var(--color-surface-sunken); border-top: 1px solid var(--color-hairline); font-size: var(--text-table); color: var(--color-ink-muted); } .shot-table .shot-foot b { color: var(--color-brand); font-weight: 600; } @media (max-width: 640px) { .shot-rail { width: 120px; } .tiles { grid-template-columns: 1fr; } } /* Sections */ .section { padding: 96px 0; } .section-tight { padding: 0 0 96px; } .section-head { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin-bottom: 40px; } .section h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.15; } .section-head p { font-size: 1.0625rem; line-height: 1.55; color: var(--color-ink-muted); } @media (max-width: 900px) { .section { padding: 56px 0; } .section-tight { padding: 0 0 56px; } .section-head { margin-bottom: 28px; } } .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .card { display: flex; flex-direction: column; gap: 16px; background: var(--color-surface); border: 1px solid var(--color-hairline); border-radius: var(--radius-panel); padding: 36px; } .cards-3 .card { padding: 28px; gap: 12px; } .card-dashed { background: var(--color-canvas); border-style: dashed; border-color: var(--color-hairline-strong); } .card h3 { font-size: 1.625rem; } .card h3.sans, .col h3.sans { font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; } .cards-3 .card h3 { font-size: 1.25rem; } .card p { font-size: var(--text-body-lg); line-height: 1.6; color: var(--color-ink-muted); } .cards-3 .card p { font-size: var(--text-body-md); } .card svg { color: var(--color-brand); } .card-dashed svg { color: var(--color-caution); } .icon-box { width: 40px; height: 40px; border-radius: var(--radius-panel); background: var(--color-brand-soft); display: flex; align-items: center; justify-content: center; color: var(--color-brand); } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .bullets { display: flex; flex-direction: column; gap: 8px; font-size: var(--text-body-md); color: var(--color-ink-strong); } .bullets li { position: relative; padding-left: 16px; line-height: 1.5; } .bullets li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 999px; background: var(--color-brand); } .bullets li [data-kit-chip] { vertical-align: 1px; margin-left: 4px; } @media (max-width: 900px) { .cards, .cards-3 { grid-template-columns: 1fr; } .card { padding: 24px; } } .columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .col { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 2px solid var(--color-ink-strong); } .col .num { font-size: var(--text-body); font-weight: 700; color: var(--color-brand); } .col h3 { font-size: 1.1875rem; } .col p { font-size: var(--text-body-md); line-height: 1.6; color: var(--color-ink-muted); } .col svg { color: var(--color-brand); } @media (max-width: 900px) { .columns, .columns-3 { grid-template-columns: 1fr; gap: 20px; } } /* Dark band: the staff-rail recipe, identical in both modes. */ .band { background: var(--band-gradient); color: var(--workspace-nav-ink); padding: 88px 0; } .band .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; } .band-copy { display: flex; flex-direction: column; gap: 16px; } .band .overline { color: var(--workspace-nav-section); } .band h2 { color: var(--workspace-nav-ink); } .band-copy p { font-size: 1rem; line-height: 1.6; color: var(--workspace-nav-ink-muted); } .band a { color: var(--workspace-nav-ink); } .band-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; } .band-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--workspace-nav-border); font-size: var(--text-body-lg); line-height: 1.5; } .band-list li::before { content: ""; margin-top: 7px; width: 6px; height: 6px; border-radius: 999px; background: var(--workspace-nav-active-stripe); flex-shrink: 0; } @media (max-width: 900px) { .band { padding: 56px 0; } .band .wrap { grid-template-columns: 1fr; gap: 24px; } .band-list { grid-template-columns: 1fr; } } .strip { background: var(--color-canvas); border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); padding: 64px 0; } .strip .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; } .strip h2 { font-size: 1.875rem; line-height: 1.2; } .strip p { font-size: var(--text-body-lg); line-height: 1.6; color: var(--color-ink-muted); } .strip .bullets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; align-items: start; } @media (max-width: 900px) { .strip .wrap { grid-template-columns: 1fr; gap: 24px; } .strip .bullets { grid-template-columns: 1fr; } } .cta { padding: 96px 0; border-bottom: 1px solid var(--color-hairline); } .cta .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; } .cta-copy { display: flex; flex-direction: column; gap: 16px; } .cta-copy p { font-size: 1rem; line-height: 1.6; color: var(--color-ink-muted); } .cta-box { display: flex; flex-direction: column; gap: 16px; background: var(--color-canvas); border: 1px solid var(--color-hairline); border-radius: var(--radius-panel); padding: 28px; } .cta-box .label { font-size: var(--text-table); font-weight: 600; color: var(--color-ink-muted); } .cta-box .email { font-family: var(--font-serif); font-size: 1.625rem; word-break: break-all; user-select: all; } .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; } .cta-actions [data-kit-button] { flex-grow: 1; } [data-copy-email][data-copied] { background: var(--color-gain); border-color: var(--color-gain); color: #fff; } .cta-box small { font-size: var(--text-body); color: var(--color-ink-caption); line-height: 1.5; } .cta-inline { background: var(--color-canvas); border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); padding: 64px 0; } .cta-inline.plain { background: var(--color-surface); border-top: 0; } .cta-inline .wrap { display: flex; align-items: center; justify-content: space-between; gap: 48px; } .cta-inline h2 { font-size: 1.875rem; line-height: 1.2; } .cta-inline p { font-size: var(--text-body-lg); line-height: 1.6; color: var(--color-ink-muted); } @media (max-width: 900px) { .cta { padding: 56px 0; } .cta .wrap, .cta-inline .wrap { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; gap: 24px; } .cta-inline [data-kit-button] { width: 100%; } } .site-footer { padding: 40px 0 48px; } .site-footer .wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .footer-id { display: flex; flex-direction: column; gap: 8px; } .footer-id .wordmark { font-size: var(--text-body); } .footer-id p { font-size: var(--text-body); line-height: 1.6; color: var(--color-ink-caption); } .footer-links { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: var(--text-body); font-weight: 500; } .footer-links a { color: var(--color-ink-muted); min-height: 2rem; display: inline-flex; align-items: center; } .footer-links a:hover { color: var(--color-brand); } /* Legal pages */ .page-head { padding: 64px 0 40px; border-bottom: 1px solid var(--color-hairline); } .page-head .wrap { display: flex; flex-direction: column; gap: 12px; } .page-head h1 { font-size: clamp(1.875rem, 3.4vw, 2.5rem); line-height: 1.15; } .page-head p { font-size: var(--text-body-lg); color: var(--color-ink-caption); } .legal { padding: 48px 0 80px; } .legal .wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 80px; } .toc { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-body-md); position: sticky; top: 6rem; align-self: start; } .toc .overline { padding: 0 12px 8px; } .toc a { color: var(--color-ink-muted); padding: 8px 12px; border-radius: var(--radius-control); } .toc a:hover { color: var(--color-brand); background: var(--color-brand-soft); } .toc hr { border: 0; border-top: 1px solid var(--color-hairline); margin: 12px; } .prose { display: flex; flex-direction: column; gap: 36px; max-width: 720px; font-size: 1rem; line-height: 1.65; } .prose section { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 6rem; } .prose h2 { font-size: 1.625rem; } .prose h3 { font-size: 1.125rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; } .prose ul { padding-left: 20px; list-style: disc; display: flex; flex-direction: column; gap: 6px; } .prose .muted { font-size: var(--text-body-md); color: var(--color-ink-caption); } .notice { display: flex; gap: 12px; align-items: flex-start; background: var(--color-caution-bg); border: 1px solid var(--color-caution-fill); border-radius: var(--radius-panel); padding: 14px 16px; font-size: var(--text-body-md); line-height: 1.5; color: var(--color-caution); } .notice b { flex-shrink: 0; } .table { display: flex; flex-direction: column; border: 1px solid var(--color-hairline); border-radius: var(--radius-panel); overflow: hidden; font-size: var(--text-body-md); } .table > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 1fr); gap: 16px; padding: 12px 16px; border-top: 1px solid var(--color-hairline-soft); } .table > div:first-child { border-top: 0; background: var(--color-surface-sunken); font-size: var(--text-table-head-compact); font-weight: 700; letter-spacing: 0.075em; text-transform: uppercase; color: var(--color-ink-caption); padding: 10px 16px; } @media (max-width: 900px) { .legal .wrap { grid-template-columns: 1fr; gap: 32px; } .toc { position: static; } .table > div { grid-template-columns: 1fr; gap: 4px; } .table > div:first-child { display: none; } } /* Facts still to fill before launch. */ .todo { background: var(--color-caution-bg); color: var(--color-caution); border-radius: 4px; padding: 0 4px; }