/** * International Standards CSS Module * Version: 1.0.0 (2026-01-13) * * Provides support for: * - RTL (Right-to-Left) languages (Arabic, Hebrew, Farsi, etc.) * - Bi-directional text handling * - International number/date formatting * - WCAG 2.1 AA/AAA compliance enhancements * - ISO/IEC 40500:2012 accessibility standards */ /* ======================================== RTL (Right-to-Left) Support Automatically activated when ======================================== */ /* Base RTL direction */ html[dir="rtl"], :root[dir="rtl"] { direction: rtl; text-align: right; } /* Logical properties for consistent spacing in LTR/RTL */ :root { /* Use logical properties for margin/padding */ --spacing-inline-start: var(--space-4); --spacing-inline-end: var(--space-4); } /* RTL-aware layout adjustments */ html[dir="rtl"] .site-header__inner { flex-direction: row-reverse; } html[dir="rtl"] .branding { flex-direction: row-reverse; } html[dir="rtl"] .primary-nav { flex-direction: row-reverse; } html[dir="rtl"] .site-header__actions { flex-direction: row-reverse; } /* Navigation items */ html[dir="rtl"] .menu { flex-direction: row-reverse; } html[dir="rtl"] .menu-item { text-align: right; } /* Search input */ html[dir="rtl"] .header-search__input { text-align: right; padding-right: 44px; padding-left: 16px; } html[dir="rtl"] .header-search__button { left: auto; right: 8px; } /* Cards and content */ html[dir="rtl"] .post-card { text-align: right; } html[dir="rtl"] .post-card__meta { flex-direction: row-reverse; } html[dir="rtl"] .post-card__content { text-align: right; } /* Buttons with icons */ html[dir="rtl"] .btn, html[dir="rtl"] .button, html[dir="rtl"] [class*="cta"] { flex-direction: row-reverse; } html[dir="rtl"] .btn svg, html[dir="rtl"] .button svg { margin-left: var(--space-2); margin-right: 0; } /* Arrows and directional icons should flip */ html[dir="rtl"] .icon-arrow-right, html[dir="rtl"] [class*="arrow-right"] svg, html[dir="rtl"] .nav-arrow { transform: scaleX(-1); } /* Footer */ html[dir="rtl"] .site-footer__inner { flex-direction: row-reverse; } html[dir="rtl"] .footer-nav { flex-direction: row-reverse; } /* Article content */ html[dir="rtl"] .entry-content, html[dir="rtl"] .post-content { text-align: right; } html[dir="rtl"] .entry-content ul, html[dir="rtl"] .entry-content ol { padding-right: 1.5em; padding-left: 0; } html[dir="rtl"] .entry-content blockquote { border-right: 4px solid var(--color-primary); border-left: none; padding-right: var(--space-4); padding-left: 0; } /* Charts and infographics */ html[dir="rtl"] .pc3-hbar__label { text-align: right; } html[dir="rtl"] .pc3-hbar__fill { transform-origin: right center; } html[dir="rtl"] .pc3-stat { text-align: right; } /* Timeline adjustments */ html[dir="rtl"] .s-bend-timeline { direction: rtl; } html[dir="rtl"] .s-bend-timeline__item--left { text-align: left; padding-left: var(--space-8); padding-right: 0; } html[dir="rtl"] .s-bend-timeline__item--right { text-align: right; padding-right: var(--space-8); padding-left: 0; } /* ======================================== WCAG 2.1 AA/AAA Compliance ======================================== */ /* Ensure minimum contrast ratios */ :root { /* Text contrast - AA requires 4.5:1, AAA requires 7:1 */ --contrast-ratio-aa: 4.5; --contrast-ratio-aaa: 7; } /* Enhanced focus indicators (beyond default) */ :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* High contrast mode support */ @media (prefers-contrast: more) { :root { --color-text: #000000; --color-text-secondary: #1a1a1a; --color-border: rgba(0, 0, 0, 0.5); --color-border-strong: rgba(0, 0, 0, 0.8); } [data-theme="dark"] { --color-text: #ffffff; --color-text-secondary: #f0f0f0; --color-border: rgba(255, 255, 255, 0.5); --color-border-strong: rgba(255, 255, 255, 0.8); } /* Thicker borders for visibility */ .post-card, .btn, .button, input, select, textarea { border-width: 2px !important; } } /* Reduced motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Keep essential state transitions but make them instant */ .is-visible, .is-active, .is-open { transition: none !important; } /* Disable parallax effects */ [data-parallax], .parallax { transform: none !important; } /* Disable auto-playing carousels */ .carousel, .hero-carousel, [data-autoplay] { animation: none !important; } } /* ======================================== Touch Target Compliance WCAG 2.5.5: Min 44x44px, recommended 48x48px ======================================== */ /* Ensure all interactive elements meet touch target requirements */ a, button, input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"], select, [role="button"], [role="link"], [role="checkbox"], [role="radio"], [tabindex]:not([tabindex="-1"]) { min-height: 44px; min-width: 44px; } /* Inline links can be smaller but need adequate line height */ p a, li a, .entry-content a { min-height: auto; min-width: auto; padding: 2px 0; line-height: 1.5; } /* ======================================== Color Blindness Support ======================================== */ /* Don't rely solely on color to convey information */ .status-success::before, .status-error::before, .status-warning::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; } html[dir="rtl"] .status-success::before, html[dir="rtl"] .status-error::before, html[dir="rtl"] .status-warning::before { margin-right: 0; margin-left: 8px; } /* Add icons/patterns in addition to color */ .status-success::before { background-color: var(--color-success); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); } .status-error::before { background-color: var(--color-error); background-image: repeating-linear-gradient( 45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.3) 2px, rgba(255, 255, 255, 0.3) 4px ); } .status-warning::before { background-color: var(--color-warning); background-image: repeating-linear-gradient( -45deg, transparent, transparent 2px, rgba(255, 255, 255, 0.3) 2px, rgba(255, 255, 255, 0.3) 4px ); } /* ======================================== International Number/Currency Display ======================================== */ /* Use tabular numbers for aligned data */ .stat-value, .metric-value, .pc3-stat__value, .price, .currency, [data-numeric] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ======================================== Print Styles for International Use ======================================== */ @media print { /* Ensure text direction is preserved in print */ html[dir="rtl"] { direction: rtl; } /* High contrast for print */ body { color: #000; background: #fff; } /* Show URLs for links in print */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; } /* Don't print hidden elements */ [hidden], [aria-hidden="true"], .no-print { display: none !important; } } /* ======================================== Screen Reader Only Content ======================================== */ .sr-only, .screen-reader-text, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Allow SR content to become visible on focus (for skip links) */ .sr-only:focus, .screen-reader-text:focus, .skip-link:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; padding: 12px 24px; margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--color-primary); color: #fff; font-weight: 600; z-index: 100000; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } html[dir="rtl"] .sr-only:focus, html[dir="rtl"] .screen-reader-text:focus, html[dir="rtl"] .skip-link:focus { left: auto; right: 8px; }