/* ========================================================== 734 Floors Unified Global Theme (v3 DASHBOARD ALIGNED) Works for both React app and static site ========================================================== */ /* ---------- GLOBAL RESET ---------- */ * { box-sizing: border-box; } :root { --navy: #0b1b3a; --navy-light: #142b5a; /* slightly brighter navy */ --white: #ffffff; --accent: #22c55e; /* vibrant green accent for visibility */ --highlight: #00b4ff; --shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); --font-main: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; --test-bg: linear-gradient(135deg, #0b1b3a, #142b5a, #0066aa); /* Theme tokens (Tailwind-ready, HSL values) */ --color-bg: 220 68% 13%; --color-surface: 220 39% 18%; --color-text: 210 40% 98%; --color-muted: 215 20% 65%; --color-border: 215 28% 40%; --color-primary: 142 72% 45%; --color-accent: 199 89% 48%; --color-success: 142 72% 45%; --color-warning: 38 92% 50%; --color-danger: 0 84% 60%; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; } /* Theme switch mechanism: set class on or */ .theme-dark { color-scheme: dark; } .theme-light { color-scheme: light; --color-bg: 210 40% 98%; --color-surface: 0 0% 100%; --color-text: 222 47% 11%; --color-muted: 215 16% 47%; --color-border: 214 32% 91%; --color-primary: 142 72% 45%; --color-accent: 199 89% 48%; } .theme-734 { color-scheme: dark; } /* ---------- BASE LAYOUT / RESET ---------- */ html, body, #root { margin: 0; padding: 0; min-height: 100vh; height: 100%; width: 100%; font-family: var(--font-main); background: none; color: inherit; text-shadow: none; scroll-behavior: smooth; } /* The React app wrapper (MainLayout root): We let dashboard.css fine-tune layout, but this ensures full viewport height. */ .app-wrapper { min-height: 100vh; width: 100%; display: flex; flex-direction: column; flex: 1 0 auto; padding: 0.75rem 0; box-sizing: border-box; } /* Do NOT make body a flex container – MainLayout / index.css handles page layout */ body { text-align: left; /* let pages decide when to center */ overflow-y: hidden; /* dashboard/main will manage internal scrolling */ background: radial-gradient( circle at top, #020617, #020617 45%, #020617 100% ); color: #e5e7eb; } /* Generic main tag – don’t force layout rules here, MainLayout / dashboard-main will control layout inside the app */ /* ---------- MAIN LAYOUT ---------- */ main { margin: 0; padding: 1vh 1rem; width: 100%; max-width: 100vw; flex: 1; display: flex; justify-content: center; } /* On smaller screens we allow body scroll so nothing is trapped off-screen */ @media (max-width: 900px) { body { overflow-y: auto; } } /* ---------- PAGE CARD ---------- */ .page-card { width: clamp(320px, 88vw, 1000px); padding: clamp(1.2rem, 2.5vw, 2.5rem); display: flex; flex-direction: column; justify-content: space-between; text-align: center; font-size: 0.75rem; min-height: 250px; height: 200px; } .page-content { flex: 1; } .page-content h1 + p { margin-bottom: 0.8rem; } /* ========= AUTH PAGES (login, signup, portal) ========= */ .auth-card { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); width: clamp(280px, 70vw, 420px); padding: 1.2rem 1rem; text-align: center; display: flex; flex-direction: column; gap: 0.7rem; margin: 0 auto; } .auth-title { margin: 0 0 0.35rem 0; font-size: 1.25rem; font-weight: 800; } .auth-subtext { margin: 0 0 0.8rem 0; font-size: 0.95rem; color: #e6eef7; } .auth-message { margin: 0 0 0.6rem 0; font-weight: 700; color: #ffe082; } .auth-form { width: 100%; display: grid; gap: 0.6rem; justify-items: center; } .auth-form .form-input, .auth-form textarea.form-input { width: 85%; text-align: left; font-size: 0.95rem; } .auth-actions { display: flex; justify-content: center; gap: 0.8rem; margin: 0.4rem 0 0.2rem 0; } .auth-toggle-btn { border: 2px solid rgba(255, 255, 255, 0.85); background: transparent; color: var(--white); padding: 0.45rem 0.9rem; border-radius: 8px; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease; } .auth-toggle-btn:hover { transform: scale(1.03); background: rgba(255, 255, 255, 0.12); } .auth-toggle-btn.active { background: var(--accent); color: #001628; border-color: var(--accent); } .auth-submit { width: 50%; margin: 0.3rem auto 0.6rem auto; } /* ---------- INPUTS ---------- */ .form-input { padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: #e5e7eb; } .form-input::placeholder { color: rgba(229, 231, 235, 0.7); } /* ---------- BUTTONS ---------- */ .btn, button { background: linear-gradient(90deg, var(--white), var(--accent)); color: var(--navy); font-weight: bold; border: none; border-radius: 6px; padding: 0.6rem 1.2rem; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; text-decoration: none; } .btn:hover, button:hover { background: var(--white); color: black; transform: scale(1.03); } /* ---------- OPTIONAL FOOTER CLASS (if you use a global footer) ---------- */ .site-footer { width: 100%; margin-top: auto; /* ⬅ pushes footer to bottom inside .app-wrapper */ padding: 0.5rem 1rem; font-size: 0.75rem; color: #cbd5f5; background: #020617; border-top: 1px solid rgba(148, 163, 184, 0.5); text-align: center; }