/* ========================================================================= INFIBYTE CINEMA — app.css Global stylesheet. Component-specific styles live in each .razor file. ========================================================================= */ /* ------------------------------------------------------------------------- GOOGLE FONTS Loaded here once instead of per-page blocks. Remove the font tags from Home.razor and Watch.razor after adding this file — the App.razor already links app.css globally. ------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Oswald:wght@300;400;600&display=swap'); /* ------------------------------------------------------------------------- RESET ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ------------------------------------------------------------------------- CSS CUSTOM PROPERTIES Define the palette once — all pages and components inherit. ------------------------------------------------------------------------- */ :root { /* Core palette */ --velvet: #6B0F0F; --crimson: #A61C1C; --crimson-hot: #C0392B; --gold: #D4AF37; --gold-light: #F0D060; --gold-dim: #8A6E1A; --black: #0A0A0A; /* Surface colours */ --card-bg: #111111; --card-border: #2A1A00; /* Typography */ --text-primary: #E8D5A3; --text-muted: #7A6040; /* Misc */ --radius: 6px; } /* ------------------------------------------------------------------------- BASE ELEMENTS ------------------------------------------------------------------------- */ html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { background-color: var(--black); color: var(--text-primary); font-family: 'Oswald', sans-serif; font-weight: 300; line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--gold-dim); text-decoration: none; transition: color 0.15s; } a:hover { color: var(--gold); } /* ------------------------------------------------------------------------- SCROLLBAR ------------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--black); } ::-webkit-scrollbar-thumb { background: var(--velvet); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--crimson); } /* ------------------------------------------------------------------------- KEYFRAME ANIMATIONS Defined globally so any component can reference them without redeclaring. ------------------------------------------------------------------------- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ------------------------------------------------------------------------- BLAZOR ERROR UI Kept from the default template — styled to fit the cinema theme. ------------------------------------------------------------------------- */ #blazor-error-ui { background: #1a0a0a; border-top: 1px solid var(--crimson); color: var(--text-primary); bottom: 0; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.6); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem; position: fixed; width: 100%; z-index: 1000; font-family: 'Oswald', sans-serif; font-size: 0.8rem; letter-spacing: 1px; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; color: var(--text-muted); transition: color 0.15s; } #blazor-error-ui .dismiss:hover { color: var(--gold); } /* ------------------------------------------------------------------------- SHARED UTILITY CLASSES Lightweight helpers available to any component that needs them. ------------------------------------------------------------------------- */ /* Visually hidden but accessible to screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Gold rule divider */ .cinema-rule { border: none; border-top: 1px solid var(--card-border); margin: 1.5rem 0; } /* Shared toast — used by Watch.razor, reusable anywhere */ .cinema-toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); background: rgba(10, 8, 0, 0.95); border: 1px solid var(--gold-dim); color: var(--gold); font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; padding: 0.6rem 1.5rem; border-radius: var(--radius); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); animation: toastIn 0.2s ease; z-index: 1000; white-space: nowrap; pointer-events: none; }