/* Blinco Style Engine — base.css (the quality floor) * * This file is the deterministic quality floor: it ships with EVERY generated * site, unchanged. Generated markup only uses these classes + the design tokens * a pack supplies in :root. The generator NEVER writes raw colors, font * families, or physical spacing — it references variables and utility classes, * so RTL, rhythm, focus, and reduced-motion are correct by construction. * * Everything is LOGICAL-property based → flip and the whole * site mirrors with zero per-site overrides. Selectors are kept flat and * utility-ish to avoid the section-vs-element specificity collisions that wreck * LLM-authored CSS. * * Token contract a pack's tokens.css MUST define on :root (see design/tokens): * colours : --bg --surface --surface-2 --text --muted --line --accent --accent-contrast * type : --font-display --font-body --font-mono (with Arabic fallbacks baked in) * scale : --step--2 … --step-7 (fluid, set by the type-scale generator) * space : --space-1 … --space-9 (4px base rhythm) * shape : --radius --radius-lg --shadow-1 --shadow-2 --shadow-3 * motion : --ease --ease-out --dur-1 --dur-2 * layout : --container --measure --section-pad */ /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; } html:focus-within { scroll-behavior: smooth; } body { min-block-size: 100%; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, svg, video, canvas { display: block; max-inline-size: 100%; block-size: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; } a { color: inherit; text-decoration: none; } ul[class], ol[class] { list-style: none; padding-inline-start: 0; } p, h1, h2, h3, h4, li, figure, blockquote { overflow-wrap: break-word; } :where(h1, h2, h3, h4) { text-wrap: balance; } :where(p) { text-wrap: pretty; } /* ---------- ground ---------- */ :root { color-scheme: light dark; } body { background: var(--bg); color: var(--text); font-family: var(--font-body, system-ui, sans-serif); font-size: var(--step-0, 1rem); } ::selection { background: var(--accent); color: var(--accent-contrast); } /* ---------- type ---------- */ h1, h2, h3, h4, .display { font-family: var(--font-display, var(--font-body)); font-weight: 680; line-height: 1.04; letter-spacing: -0.02em; } h1, .t-h1 { font-size: var(--step-6); } h2, .t-h2 { font-size: var(--step-4); } h3, .t-h3 { font-size: var(--step-2); line-height: 1.16; } h4, .t-h4 { font-size: var(--step-1); line-height: 1.2; } .t-display { font-size: var(--step-7); line-height: 0.98; letter-spacing: -0.03em; } .lede { font-size: var(--step-1); line-height: 1.5; color: var(--muted); max-inline-size: var(--measure); } small, .t-small { font-size: var(--step--1); } .eyebrow { font-family: var(--font-mono, var(--font-body)); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .mono { font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; } .measure { max-inline-size: var(--measure); } .balance { text-wrap: balance; } /* ---------- layout primitives ---------- */ .section { padding-block: var(--section-pad, clamp(3.5rem, 8vw, 8rem)); position: relative; } .wrap { inline-size: min(100% - (var(--space-5) * 2), var(--container, 76rem)); margin-inline: auto; } .wrap--narrow { --container: 54rem; } .wrap--wide { --container: 88rem; } .stack > * + * { margin-block-start: var(--flow, var(--space-4)); } .stack-sm { --flow: var(--space-2); } .stack-lg { --flow: var(--space-6); } .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, var(--space-3)); } .grid { display: grid; gap: var(--gap, var(--space-5)); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(var(--min, 16rem), 1fr)); } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } .split { display: grid; gap: var(--gap, var(--space-7)); align-items: center; grid-template-columns: 1fr; } @media (min-width: 56rem) { .split { grid-template-columns: var(--split, 1fr 1fr); } .split--wide-start { --split: 1.2fr 1fr; } .split--wide-end { --split: 1fr 1.2fr; } } @media (max-width: 56rem) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } .cols-3.keep-2, .cols-4.keep-2 { grid-template-columns: 1fr 1fr; } } .bleed { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } .center-x { display: grid; justify-items: center; text-align: center; } .between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .order-flip > :first-child { order: 2; } /* ---------- surfaces (used sparingly — not everything is a card) ---------- */ .panel { background: var(--surface); border-radius: var(--radius-lg, 1rem); padding: var(--pad, var(--space-6)); } .panel-2 { background: var(--surface-2, var(--surface)); } .raise { box-shadow: var(--shadow-2); } .raise-lg { box-shadow: var(--shadow-3); } .hairline { border-block-end: 1px solid var(--line); } .divide > * + * { border-block-start: 1px solid var(--line); padding-block-start: var(--space-4); margin-block-start: var(--space-4); } .pill { display: inline-flex; align-items: center; gap: .5em; padding: .4em .85em; border-radius: 999px; background: var(--surface); font-size: var(--step--1); } .ratio { position: relative; overflow: hidden; border-radius: var(--radius-lg, 1rem); background: var(--surface-2, var(--surface)); } .ratio > :where(img, video, .ph) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; } .ratio[data-ar="4/3"] { aspect-ratio: 4 / 3; } .ratio[data-ar="3/2"] { aspect-ratio: 3 / 2; } .ratio[data-ar="16/9"] { aspect-ratio: 16 / 9; } .ratio[data-ar="1/1"] { aspect-ratio: 1 / 1; } .ratio[data-ar="3/4"] { aspect-ratio: 3 / 4; } .ratio[data-ar="4/5"] { aspect-ratio: 4 / 5; } /* image placeholders the imagery stage paints later (never a white void) */ .ph { display: block; inline-size: 100%; block-size: 100%; min-block-size: 8rem; background: radial-gradient(120% 120% at 15% 10%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%), linear-gradient(135deg, var(--surface-2, var(--surface)), var(--surface)); } /* ---------- controls ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding-block: .8em; padding-inline: 1.35em; border-radius: var(--radius, .7rem); font-weight: 600; font-size: var(--step-0); line-height: 1; transition: transform var(--dur-1, .16s) var(--ease-out, ease), box-shadow var(--dur-1, .16s) var(--ease-out, ease), background-color var(--dur-1, .16s) var(--ease-out, ease); will-change: transform; } .btn:active { transform: translateY(1px) scale(.99); } .btn--primary { background: var(--accent); color: var(--accent-contrast); box-shadow: var(--shadow-1); } .btn--primary:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); } .btn--ghost { color: var(--text); box-shadow: inset 0 0 0 1px var(--line); } .btn--ghost:hover { background: var(--surface); } .btn--text { padding-inline: 0; } .btn--text::after { content: "\2192"; transition: transform var(--dur-1, .16s) var(--ease-out, ease); } [dir="rtl"] .btn--text::after { content: "\2190"; } .btn--text:hover::after { transform: translateX(.25em); } [dir="rtl"] .btn--text:hover::after { transform: translateX(-.25em); } .btn--lg { font-size: var(--step-1); padding-block: .95em; padding-inline: 1.6em; } .field { display: grid; gap: .4rem; } .field > label { font-size: var(--step--1); color: var(--muted); } .input, .textarea, .select { inline-size: 100%; padding: .8em 1em; background: var(--surface); color: var(--text); border-radius: var(--radius, .7rem); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--dur-1, .16s) var(--ease-out, ease); } .input:focus, .textarea:focus, .select:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); } .textarea { min-block-size: 6.5rem; resize: vertical; } /* ---------- header / nav (the one place structure is shared) ---------- */ .bar { position: sticky; inset-block-start: 0; z-index: 40; background: color-mix(in oklab, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(12px); } .bar__in { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); } .bar__logo { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); margin-inline-end: auto; } .bar__logo img { max-block-size: 2.1rem; inline-size: auto; } .bar__nav { display: flex; align-items: center; gap: var(--space-4); } .bar__nav a { color: var(--muted); transition: color var(--dur-1) var(--ease-out); } .bar__nav a:hover { color: var(--text); } .bar__toggle { display: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius); color: var(--text); } .bar__toggle span, .bar__toggle span::before, .bar__toggle span::after { content: ""; display: block; inline-size: 1.1rem; block-size: 2px; background: currentColor; border-radius: 2px; transition: transform var(--dur-1) var(--ease-out); } .bar__toggle span { position: relative; margin-inline: auto; } .bar__toggle span::before { position: absolute; inset-block-start: -.4rem; inline-size: 1.1rem; } .bar__toggle span::after { position: absolute; inset-block-start: .4rem; inline-size: 1.1rem; } @media (max-width: 52rem) { .bar__toggle { display: grid; place-content: center; } .bar__nav { position: absolute; inset-inline: 0; inset-block-start: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-3); background: var(--bg); border-block-start: 1px solid var(--line); display: none; } .bar__nav a { padding-block: var(--space-3); } .bar.is-open .bar__nav { display: flex; } .bar.is-open .bar__toggle span { background: transparent; } .bar.is-open .bar__toggle span::before { transform: translateY(.4rem) rotate(45deg); } .bar.is-open .bar__toggle span::after { transform: translateY(-.4rem) rotate(-45deg); } } /* language switcher (lives in the bar) */ .langs { display: inline-flex; gap: .5rem; align-items: center; } .langs a, .langs [aria-current] { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--step--1); color: var(--muted); } .langs [aria-current] { color: var(--text); font-weight: 600; } .langs svg { inline-size: 1.15em; block-size: auto; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 12%, transparent); } /* ---------- footer ---------- */ .foot { padding-block: var(--space-7) var(--space-6); color: var(--muted); } .foot a { color: var(--muted); } .foot a:hover { color: var(--text); } /* ---------- utilities ---------- */ .accent { color: var(--accent); } .on-accent { background: var(--accent); color: var(--accent-contrast); } .muted { color: var(--muted); } .hide\@sm { } @media (max-width: 52rem) { .hide\@sm { display: none !important; } } .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- a11y / motion safety ---------- */ :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius, .5rem); } @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal], [data-parallax], [data-marquee] { opacity: 1 !important; transform: none !important; } }