/* Aurebesh (Galactic Basic Standard) — Star Wars alphabet easter egg */ @font-face { font-family: 'Aurebesh'; src: url('/fonts/AurebeshAF-Canon.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } /* Aurebesh preview bar — shows selected text in galactic script */ .aurebesh-preview { position: fixed; bottom: 0; left: 0; right: 0; z-index: 10000; background: rgba(15, 15, 35, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 167, 38, 0.3); padding: 8px 16px; display: none; align-items: center; gap: 12px; font-size: 14px; } .aurebesh-preview.visible { display: flex; } .aurebesh-preview .aurebesh-text { font-family: 'Aurebesh', sans-serif; color: #ffa726; font-size: 1.4em; letter-spacing: 0.05em; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aurebesh-preview .aurebesh-label { color: rgba(255, 255, 255, 0.4); font-size: 11px; white-space: nowrap; } /* Aurebesh content — renders paragraph text in Star Wars script, headings stay readable */ .aurebesh-content p, .aurebesh-content li, .aurebesh-content blockquote, .aurebesh-content td, .aurebesh-content code { font-family: 'Aurebesh', sans-serif; color: #ffa726; letter-spacing: 0.05em; line-height: 1.8; font-size: 1.1em; } .aurebesh-content a { color: #ffa726; text-decoration: underline; } .aurebesh-content strong, .aurebesh-content b { color: #ffcc02; } /* Galaxy Map Page Styles */ .galactic-grid { display: grid; grid-template-columns: repeat(26, 1fr); /* A-Z */ grid-auto-rows: 1fr; gap: 2px; background-size: cover; background-position: center; background-image: url('/galaxy.png'); width: 100%; max-width: 1200px; margin: auto; } .cell { border: 1px solid #444; display: flex; align-items: center; justify-content: center; background: rgba(30,30,30,0.3); /* semi-transparent to show background image */ font-size: 12px; aspect-ratio: 1 / 1; position: relative; min-width: 40px; min-height: 40px; } .cell.selected { border: 2px solid var(--mud-palette-primary); background-color: rgba(126, 111, 255, 0.2); } .close-btn { margin-top: 8px; } .empty { opacity: 0.4; font-size: 10px; } .galactic-grid-with-headers { display: grid; grid-template-columns: 40px repeat(26, 1fr); grid-template-rows: 40px repeat(20, 1fr); width: 100%; max-width: 1240px; margin: auto; background-size: cover; background-position: center; background-image: url('/galaxy.png'); gap: 2px; } .header-cell { display: flex; align-items: center; justify-content: center; background: #222; color: #fff; font-weight: bold; font-size: 14px; border: 1px solid #444; z-index: 1; } .col-header { grid-row: 1; } .row-header { grid-column: 1; } .empty-header { background: transparent; border: none; grid-column: 1; grid-row: 1; } .popover-close { position: absolute; top: 4px; right: 4px; color: #fff; background: transparent; } .galaxy-layout { display: flex; flex-direction: row; width: 100%; height: calc(100vh - 80px); box-sizing: border-box; } .galaxy-grid-panel { flex: 8 1 0; min-width: 0; overflow: auto; } .galaxy-details-panel { flex: 2 1 0; min-width: 200px; overflow: auto; border-left: 1px solid rgba(255,255,255,0.1); } /* * Text size buckets — applied via [data-text-size="..."] on . * The data attribute is set synchronously by an inline script in App.razor's * block (reading localStorage), so the page comes up at the user's * chosen size on the very first paint with zero flash. Switching sizes is a * single attribute toggle — no MudTheme rebuild, no Blazor re-render. * * Each bucket is a uniform multiplier of MudBlazor's default rem values: * small × 0.85 * default × 1.00 (no override needed — matches MudBlazor defaults) * large × 1.15 * extra-large × 1.30 */ html[data-text-size="small"] { --mud-typography-default-size: 0.74375rem; --mud-typography-h1-size: 5.1rem; --mud-typography-h2-size: 3.1875rem; --mud-typography-h3-size: 2.55rem; --mud-typography-h4-size: 1.80625rem; --mud-typography-h5-size: 1.275rem; --mud-typography-h6-size: 1.0625rem; --mud-typography-subtitle1-size: 0.85rem; --mud-typography-subtitle2-size: 0.74375rem; --mud-typography-body1-size: 0.85rem; --mud-typography-body2-size: 0.74375rem; --mud-typography-button-size: 0.74375rem; --mud-typography-caption-size: 0.6375rem; --mud-typography-overline-size: 0.6375rem; } html[data-text-size="large"] { --mud-typography-default-size: 1.00625rem; --mud-typography-h1-size: 6.9rem; --mud-typography-h2-size: 4.3125rem; --mud-typography-h3-size: 3.45rem; --mud-typography-h4-size: 2.44375rem; --mud-typography-h5-size: 1.725rem; --mud-typography-h6-size: 1.4375rem; --mud-typography-subtitle1-size: 1.15rem; --mud-typography-subtitle2-size: 1.00625rem; --mud-typography-body1-size: 1.15rem; --mud-typography-body2-size: 1.00625rem; --mud-typography-button-size: 1.00625rem; --mud-typography-caption-size: 0.8625rem; --mud-typography-overline-size: 0.8625rem; } html[data-text-size="extra-large"] { --mud-typography-default-size: 1.1375rem; --mud-typography-h1-size: 7.8rem; --mud-typography-h2-size: 4.875rem; --mud-typography-h3-size: 3.9rem; --mud-typography-h4-size: 2.7625rem; --mud-typography-h5-size: 1.95rem; --mud-typography-h6-size: 1.625rem; --mud-typography-subtitle1-size: 1.3rem; --mud-typography-subtitle2-size: 1.1375rem; --mud-typography-body1-size: 1.3rem; --mud-typography-body2-size: 1.1375rem; --mud-typography-button-size: 1.1375rem; --mud-typography-caption-size: 0.975rem; --mud-typography-overline-size: 0.975rem; }