Alejandro Veras
eb9137b300
- English stays at /, Spanish at /es/ and Arabic at /ar/ (right to left) - EN · ES · AR switch in the header and mobile menu - Pages are written in English; the build translates them through src/i18n/es.json and src/i18n/ar.json, including browser-script strings - rtl.css mirrors the layout and loads Arabic fonts on /ar/ pages - hreflang alternates on every page and a multilingual sitemap - scripts/i18n-extract.mjs lists strings that still need translating Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
78 lines
3.4 KiB
CSS
78 lines
3.4 KiB
CSS
/* Arabic: right-to-left layout and type. Loaded only on /ar/ pages, after styles.css. */
|
|
:root {
|
|
--font-sans: "Noto Sans Arabic", "Inter Tight", "Inter", ui-sans-serif, system-ui, "Geeza Pro", Tahoma, sans-serif;
|
|
}
|
|
/* Arabic letters join; tracking (positive or negative) breaks them apart. */
|
|
body *:not(.brand-word):not(.brand-word *):not(.foot-word) { letter-spacing: 0 !important; }
|
|
.h-display-lg, .h-display, .h-lg, .h-md, .rule h3, .book h3, .shout q {
|
|
font-family: "Noto Kufi Arabic", var(--font-sans); line-height: 1.35;
|
|
}
|
|
.statement, .poem, .quote-line { line-height: 1.6; }
|
|
.eyebrow, .btn, .text-link, .tag-upper { font-size: 13.5px; }
|
|
|
|
/* The logo, code samples, URLs and the giant footer word stay left to right. */
|
|
.brand, .foot-word, .file, .qlist p, .panel-url, .lang-switch, [dir="ltr"] { direction: ltr; }
|
|
|
|
/* Arrows */
|
|
.flip { transform: scaleX(-1); }
|
|
.btn:hover svg.flip, .text-link:hover svg.flip { transform: translateX(-3px) scaleX(-1); }
|
|
.btn:hover .go { transform: translateX(-3px); }
|
|
.tab-btn .arr { transform: translateX(4px) scaleX(-1); }
|
|
.tab-btn[aria-selected="true"] .arr { transform: scaleX(-1); }
|
|
#vprev svg, #vnext svg { transform: scaleX(-1); }
|
|
|
|
/* Physical offsets mirrored */
|
|
.skip { left: auto; right: 16px; }
|
|
.mobile-menu .sub a { padding-left: 2px; padding-right: 18px; }
|
|
.panel-url { margin-left: 0; margin-right: auto; }
|
|
.cursor { margin-left: 0; margin-right: 2px; }
|
|
.cluster { text-align: right; }
|
|
.dash { left: auto; right: 228px; }
|
|
.profile { left: auto; right: 0; }
|
|
.code { right: auto; left: 0; }
|
|
.feature::before { left: auto; right: 0; }
|
|
.stat { padding: 28px 0 0 24px; }
|
|
.stat b sup { margin-left: 0; margin-right: 2px; }
|
|
.quote-line { padding-left: 0; border-left: 0; padding-right: 20px; border-right: 2px solid var(--accent); }
|
|
.flow { left: auto; right: -32px; }
|
|
.process-step:not(:last-child)::after { right: auto; left: -16px; }
|
|
.tab-btn { text-align: right; }
|
|
.principle { padding: 32px 0 8px 32px; }
|
|
.industries { border-left: 0; border-right: 1px solid var(--mist); }
|
|
.industry { border-right: 0; border-left: 1px solid var(--mist); }
|
|
.progress { transform-origin: 100% 50%; }
|
|
|
|
@media (min-width: 641px) {
|
|
.stat + .stat { padding-left: 0; border-left: 0; padding-right: 24px; border-right: 1px solid var(--mist); }
|
|
}
|
|
@media (max-width: 1100px) {
|
|
.stat-note { border-right: 0 !important; }
|
|
}
|
|
@media (min-width: 901px) {
|
|
.principle + .principle { padding-left: 0; border-left: 0; padding-right: 32px; border-right: 1px solid var(--mist); }
|
|
}
|
|
@media (max-width: 900px) {
|
|
.flow { right: 16px; }
|
|
.process-step:not(:last-child)::after { left: auto; right: 58px; }
|
|
}
|
|
@media (max-width: 1100px) {
|
|
.cluster .panel { right: auto; }
|
|
}
|
|
|
|
/* Homepage */
|
|
.cluster-fit .dash { left: auto; right: 176px; }
|
|
.cluster-fit .profile { left: auto; right: 0; }
|
|
.cluster-fit .code { right: auto; left: 0; }
|
|
@media (max-width: 1100px) {
|
|
.cluster-fit .panel { right: auto; left: auto; }
|
|
}
|
|
.w-side { right: auto; left: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter))); }
|
|
.w-top { left: auto; right: max(var(--gutter), calc((100vw - var(--page-max)) / 2 + var(--gutter))); }
|
|
@media (max-width: 700px) { .w-side { left: var(--gutter); right: var(--gutter); } }
|
|
.varrows { right: auto; left: 1.2rem; }
|
|
.jfinal { left: auto; right: 1.2rem; }
|
|
.jreplay { right: auto; left: 1rem; }
|
|
.cc::before { right: auto; left: -40px; }
|
|
/* Scroll-driven word tracks move left to right in every language. */
|
|
.wmask, .pbword { direction: ltr; }
|