/* ── LANGUAGE SWITCHER ─────────────────────────────────────── */ .lang-switcher { display: flex; align-items: center; gap: 0.5rem; margin-left: 1.2rem; padding-left: 1.2rem; border-left: 1px solid var(--panel-border); } /* Switcher integrado como li en el nav (junto al btn Descargar) */ .lang-switcher-inline { list-style: none; display: flex; align-items: center; } .lang-switcher-inline .lang-switcher { margin-left: 0.8rem; padding-left: 0.8rem; } .lang-btn { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.55rem; border: 1px solid transparent; background: transparent; cursor: pointer; transition: all 0.2s ease; position: relative; clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%); } .lang-btn:hover { border-color: var(--panel-border); background: rgba(255,255,255,0.04); } .lang-btn.lang-active { border-color: rgba(192,57,43,0.5); background: rgba(192,57,43,0.08); } .lang-label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.15em; color: var(--grey-light); font-weight: 600; transition: color 0.2s; } .lang-btn:hover .lang-label, .lang-btn.lang-active .lang-label { color: var(--white); } /* ── CSS FLAGS ─────────────────────────────────────────────── */ .flag { display: inline-block; width: 22px; height: 15px; position: relative; overflow: hidden; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.08); } /* ── Uruguay flag ── */ .flag-uy { background: #fff; display: flex; flex-direction: column; } .uy-stripe { flex: 1; display: block; } .uy-white { background: #ffffff; } .uy-blue { background: #0038a8; } /* Canton (square top-left) */ .uy-canton { position: absolute; top: 0; left: 0; width: 9px; height: 9px; background: radial-gradient(circle at 50% 50%, #f6c100 30%, transparent 31% ), conic-gradient( from 0deg, transparent 0deg, #f6c100 6deg, transparent 12deg, transparent 22.5deg, #f6c100 28.5deg, transparent 34.5deg, transparent 45deg, #f6c100 51deg, transparent 57deg, transparent 67.5deg, #f6c100 73.5deg, transparent 79.5deg, transparent 90deg, #f6c100 96deg, transparent 102deg, transparent 112.5deg, #f6c100 118.5deg, transparent 124.5deg, transparent 135deg, #f6c100 141deg, transparent 147deg, transparent 157.5deg, #f6c100 163.5deg, transparent 169.5deg, transparent 180deg, #f6c100 186deg, transparent 192deg, transparent 202.5deg, #f6c100 208.5deg, transparent 214.5deg, transparent 225deg, #f6c100 231deg, transparent 237deg, transparent 247.5deg, #f6c100 253.5deg, transparent 259.5deg, transparent 270deg, #f6c100 276deg, transparent 282deg, transparent 292.5deg, #f6c100 298.5deg, transparent 304.5deg, transparent 315deg, #f6c100 321deg, transparent 327deg, transparent 337.5deg, #f6c100 343.5deg, transparent 349.5deg, transparent 360deg ), #fff; } /* ── Russia flag ── */ .flag-ru { display: flex; flex-direction: column; } .ru-band { flex: 1; display: block; } .ru-white { background: #ffffff; } .ru-blue { background: #003DA5; } .ru-red { background: #CC0000; } /* ── Fuentes consistentes en TODOS los idiomas ─────────────── */ /* Garantiza que Rajdhani/Orbitron se apliquen también en versión rusa aunque el no cambie la familia tipográfica */ :lang(ru) body, :lang(ru) p, :lang(ru) li, :lang(ru) span, :lang(ru) div { font-family: var(--font-ui); /* Rajdhani */ } :lang(ru) h1, :lang(ru) h2, :lang(ru) h3, :lang(ru) .hero-title, :lang(ru) .section-title, :lang(ru) .feature-title, :lang(ru) .adv-item-title, :lang(ru) .sec-title, :lang(ru) .transport-title, :lang(ru) .plugin-card-title, :lang(ru) .fw-name, :lang(ru) .btn, :lang(ru) .btn-download-nav, :lang(ru) .stat-val, :lang(ru) .logo-text { font-family: var(--font-display); /* Orbitron */ } :lang(ru) .section-label, :lang(ru) .hero-badge, :lang(ru) .hero-cyrillic, :lang(ru) .hero-tagline, :lang(ru) .lang-label, :lang(ru) .terminal-body, :lang(ru) .terminal-title, :lang(ru) .t-line, :lang(ru) .stat-label, :lang(ru) .footer-copy, :lang(ru) .footer-status, :lang(ru) .dl-meta-item, :lang(ru) .feature-num, :lang(ru) .sec-num, :lang(ru) code { font-family: var(--font-mono); /* Share Tech Mono */ } /* ── Responsive lang switcher ── */ @media (max-width: 768px) { .lang-switcher { margin-left: 0; padding-left: 0; border-left: none; padding-top: 1rem; border-top: 1px solid var(--panel-border); justify-content: flex-start; } .lang-switcher-inline { padding-top: 1rem; border-top: 1px solid var(--panel-border); } .lang-switcher-inline .lang-switcher { margin-left: 0; padding-left: 0; border-left: none; } }