/* ============================================================ Film Transpo — shared dark-cinematic theme Link with: Pages get the background, fonts, and themed controls for free. Per-page accent: set --accent on (or a wrapper) inline. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap'); :root { --accent: #e94560; --accent-2: #ff6b6b; --violet: #7c5cff; --cyan: #22d3ee; --ink: #f4f4fb; --muted: rgba(244,244,251,0.62); --faint: rgba(244,244,251,0.40); --glass: rgba(255,255,255,0.045); --glass-bd: rgba(255,255,255,0.10); --ease: cubic-bezier(.22,.61,.36,1); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; color: var(--ink); background: #07070d; line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; } /* Living background — applied to every themed page, no markup needed */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(46vw 46vw at 6% -4%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 60%), radial-gradient(44vw 44vw at 102% 14%, color-mix(in srgb, var(--violet) 52%, transparent), transparent 60%), radial-gradient(42vw 42vw at 50% 116%, rgba(15,52,96,0.75), transparent 65%), radial-gradient(150% 120% at 50% -10%, #15123a 0%, #0b0b1c 46%, #07070d 100%); filter: blur(8px); animation: bg-breathe 26s var(--ease) infinite; } @keyframes bg-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } } body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Typography */ h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; } a { color: var(--accent); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--ink); } /* Glass surfaces */ .card, .glass { background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 18px; box-shadow: 0 18px 50px -40px rgba(0,0,0,0.9); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s, background .3s; } .card:hover, .glass.hover:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-bd)); box-shadow: 0 28px 60px -34px color-mix(in srgb, var(--accent) 55%, black); } /* Buttons */ .btn, button.btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); text-decoration: none; padding: 13px 26px; border-radius: 999px; font-weight: 600; font-size: .95rem; border: 1px solid var(--glass-bd); background: var(--glass); transition: transform .25s var(--ease), box-shadow .3s, background .3s, border-color .3s; } .btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); } .btn-primary, .btn.primary { background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-color: transparent; color: #0b0b14; box-shadow: 0 8px 30px -8px color-mix(in srgb, var(--accent) 60%, transparent); } .btn-primary:hover, .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -10px color-mix(in srgb, var(--accent) 75%, transparent); } /* Form controls — themed globally so every form inherits the look */ input, select, textarea { font-family: inherit; font-size: .95rem; color: var(--ink); background: rgba(255,255,255,0.04); border: 1px solid var(--glass-bd); border-radius: 12px; padding: 11px 13px; width: 100%; transition: border-color .2s var(--ease), background .2s, box-shadow .2s; } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,0.06); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } label { color: var(--muted); font-size: .85rem; font-weight: 500; } select option { background: #14122a; color: var(--ink); } input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); } /* Tables — for the dashboards */ table { border-collapse: collapse; width: 100%; } th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--glass-bd); } th { color: var(--faint); text-transform: uppercase; letter-spacing: 1px; font-size: .75rem; font-weight: 600; } tbody tr { transition: background .2s; } tbody tr:hover { background: rgba(255,255,255,0.03); } /* Tabs */ .tabs { display: flex; gap: .5rem; flex-wrap: wrap; } .tab { padding: 10px 18px; border-radius: 999px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: .9rem; border: 1px solid var(--glass-bd); background: var(--glass); transition: all .25s var(--ease); } .tab:hover { color: var(--ink); border-color: rgba(255,255,255,0.22); } .tab.active { color: #0b0b14; background: var(--accent); border-color: var(--accent); } /* Small bits */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .75rem; text-transform: uppercase; letter-spacing: 1.5px; border: 1px solid var(--glass-bd); background: var(--glass); color: var(--muted); } .dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; animation: dotpulse 2s ease-in-out infinite; } @keyframes dotpulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } } /* Scroll reveal (opt-in: add class="reveal", needs the tiny IO snippet) */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }