/* ========================================================================== Base — reset, typography, and logical-property defaults. Everything here uses logical properties (inline/block) rather than left/right. That is what lets the same stylesheet serve Persian and Arabic (RTL) alongside English and Turkish (LTR) with almost no rtl.css. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Anchor links must clear the sticky header. */ scroll-padding-block-start: calc(var(--header-h) + var(--space-lg)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* * Deliberately NOT overflow-x: hidden. * * Setting it here makes a scroll container, and position: sticky then * resolves against instead of the viewport — which silently breaks the * product theater's sticky stage. Horizontal overflow is prevented at source * instead (no element wider than its container; wide tables and code scroll * inside their own .table-wrap). */ } /* --- Headings ------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-heading); font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-heading); /* Stops a lone orphan word on a wrapped heading. */ text-wrap: balance; } h1 { font-size: var(--fs-h1); letter-spacing: -0.02em; } h2 { font-size: var(--fs-h2); letter-spacing: -0.015em; } h3 { font-size: var(--fs-h3); } h4 { font-size: 1.0625rem; } /* Latin headings tolerate tighter tracking; Persian and Arabic do not — negative letter-spacing damages glyph joining. */ .lang-fa h1, .lang-ar h1, .lang-fa h2, .lang-ar h2 { letter-spacing: 0; } p { margin: 0; /* Running text stays near 65 characters regardless of container width. */ max-inline-size: 68ch; } /* --- Links --------------------------------------------------------------- */ a { color: var(--color-accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.25em; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--tr-teal-800); } /* Never remove the focus ring — replace it with a better one. */ :focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 3px; border-radius: 2px; } .is-dark :focus-visible { outline-color: var(--tr-teal); } /* --- Media --------------------------------------------------------------- */ img, picture, video, canvas, svg { display: block; max-inline-size: 100%; block-size: auto; } /* Attachments carry their intrinsic ratio so nothing reflows while loading. */ img[width][height] { block-size: auto; } /* --- Forms --------------------------------------------------------------- */ input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } /* --- Lists --------------------------------------------------------------- */ ul, ol { margin: 0; padding-inline-start: 1.25em; } /* --- Tables -------------------------------------------------------------- */ table { inline-size: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } th, td { text-align: start; padding: var(--space-sm) var(--space-md); border-block-end: 1px solid var(--color-border); } th { color: var(--color-heading); font-weight: var(--fw-semibold); } /* Wide content scrolls inside its own container, never the page body. */ .table-wrap, .wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; } hr { border: 0; border-block-start: 1px solid var(--color-border); margin-block: var(--space-xl); } blockquote { margin: 0; padding-inline-start: var(--space-lg); border-inline-start: 2px solid var(--tr-teal); color: var(--color-heading); } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } /* --- Layout primitives --------------------------------------------------- */ .wrap { max-inline-size: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-inline-size: var(--container-narrow); } .section { padding-block: var(--section-pad); } .section--alt { background: var(--color-bg-alt); } .section--dark { background: var(--tr-charcoal); } /* --- Accessibility helpers ----------------------------------------------- */ .screen-reader-text { position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: var(--gutter); z-index: var(--z-overlay); background: var(--tr-charcoal); color: #fff; padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-sm); text-decoration: none; transition: inset-block-start var(--dur-base) var(--ease-out); } .skip-link:focus { inset-block-start: var(--space-md); color: #fff; } /* --- Reduced motion ------------------------------------------------------ Blanket damper. Individual components additionally reset themselves to their COMPLETED state in their own stylesheets — a reveal that starts at opacity:0 must not be left invisible here. ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- Print --------------------------------------------------------------- Engineers print spec sheets. Make that produce something usable. ------------------------------------------------------------------------ */ @media print { .site-header, .site-footer, .rail, .skip-link, .cta-band { display: none !important; } body { color: #000; background: #fff; font-size: 11pt; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } }