/* ========================================================= Hotel Rangoli POS — stylesheet Palette drawn from an actual rangoli: marigold, coral, magenta, violet, blue, teal — one gradient reused everywhere. Two themes: - Light (default) — soft cream bg, dark ink text - Dark ([data-theme="dark"] on ) — deep space-black bg, glowing rangoli-gradient accents, sci-fi vibe Toggle preserved in localStorage (see partials/theme-toggle). ========================================================= */ :root { /* Rangoli palette — stays the same in both themes so buttons/badges look like the brand regardless of light/dark mode */ --c-orange: #F0973A; --c-coral: #EA5B6F; --c-magenta: #C2296B; --c-violet: #7B3FA0; --c-blue: #3E6FD9; --c-teal: #17998C; --gradient-brand: linear-gradient(120deg, var(--c-orange) 0%, var(--c-coral) 25%, var(--c-magenta) 45%, var(--c-violet) 65%, var(--c-blue) 85%, var(--c-teal) 100%); --gradient-btn: linear-gradient(135deg, var(--c-orange), var(--c-magenta)); --gradient-btn-hover: linear-gradient(135deg, #E8862A, #A81F5C); --gradient-btn-alt: linear-gradient(135deg, var(--c-blue), var(--c-teal)); --gradient-btn-alt-hover: linear-gradient(135deg, #2F5FC4, #128074); --gradient-danger: linear-gradient(135deg, var(--c-magenta), #8A1E4E); --gradient-danger-hover: linear-gradient(135deg, #A81F5C, #6E1840); --radius: 10px; --font-display: 'Fraunces', serif; --font-ui: 'Manrope', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ── Light theme surfaces ───────────────────────────────── */ --ink: #241527; --bg: #FAF7F5; --bg-soft: #F3EBEF; --card: #FFFFFF; --input-bg: #FFFFFF; --muted: #8A7B84; --border: #ECE0E6; --shadow: 0 2px 10px rgba(36,21,39,0.08); --gradient-nav: linear-gradient(100deg, #241527 0%, #4A2050 50%, #7B2860 100%); --nav-text: rgba(255,255,255,0.85); --nav-text-strong: #fff; --alert-bg: rgba(194,41,107,0.10); --alert-fg: #8A1E4E; --alert-border: rgba(194,41,107,0.25); --alert-success-bg: rgba(23,153,140,0.10); --alert-success-fg: #106B62; --alert-success-border: rgba(23,153,140,0.25); --badge-free-bg: rgba(23,153,140,0.14); --badge-free-fg: #106B62; --badge-occ-bg: rgba(194,41,107,0.14); --badge-occ-fg: #8A1E4E; --focus-ring: var(--c-orange); --shimmer-opacity: 1; } /* ── Dark theme override ───────────────────────────────────── Deep near-black bg with a subtle violet-tinted panel gradient, glowing rangoli accents on top. Neon-ish but still readable. */ [data-theme="dark"] { --ink: #F1E9EF; --bg: #0B0710; --bg-soft: #1A1024; --card: #150E1E; --input-bg: #1F1530; --muted: #9B8AA8; --border: rgba(190, 130, 220, 0.18); --shadow: 0 4px 22px rgba(0,0,0,0.55), 0 0 0 1px rgba(194,41,107,0.05); --gradient-nav: linear-gradient(100deg, #0F0818 0%, #2A0F3B 50%, #521A5C 100%); --nav-text: rgba(255,255,255,0.75); --nav-text-strong: #fff; --alert-bg: rgba(234,91,111,0.14); --alert-fg: #FFB4C0; --alert-border: rgba(234,91,111,0.32); --alert-success-bg: rgba(23,153,140,0.16); --alert-success-fg: #7EE7D9; --alert-success-border: rgba(23,153,140,0.38); --badge-free-bg: rgba(23,153,140,0.22); --badge-free-fg: #7EE7D9; --badge-occ-bg: rgba(234,91,111,0.20); --badge-occ-fg: #FFB0BE; --focus-ring: var(--c-coral); --shimmer-opacity: 1; } /* Dark theme adds an ambient rangoli glow behind the page — very subtle colored radial gradients that give the "cool RGB" feel without hurting readability. Kept low-opacity and pinned so scrolling stays smooth. */ [data-theme="dark"] body { background: radial-gradient(1200px 700px at 15% -10%, rgba(123,63,160,0.22), transparent 60%), radial-gradient(900px 600px at 100% 10%, rgba(62,111,217,0.18), transparent 60%), radial-gradient(1000px 800px at 50% 110%, rgba(23,153,140,0.14), transparent 60%), radial-gradient(700px 500px at 90% 90%, rgba(240,151,58,0.10), transparent 60%), var(--bg); background-attachment: fixed; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; } /* Gradient shimmer strip at top */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-brand); background-size: 300% auto; animation: shimmer 9s linear infinite; z-index: 999; } @keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } h1, h2, h3 { font-family: var(--font-ui); font-weight: 700; margin: 0 0 0.75rem; } a { color: var(--c-magenta); text-decoration: none; } .muted { color: var(--muted); font-size: 0.9em; } .brand-gradient-text { background: var(--gradient-brand); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } /* ===== Layout ===== */ .container { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 2.5rem; } .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; margin-bottom: 1rem; } .center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .login-page { background: radial-gradient(circle at 25% 20%, rgba(240,151,58,0.16), transparent 45%), radial-gradient(circle at 75% 75%, rgba(23,153,140,0.16), transparent 45%), radial-gradient(circle at 80% 15%, rgba(194,41,107,0.12), transparent 40%), var(--bg); } /* ===== Top navigation ===== */ .topnav { background: var(--gradient-nav); background-size: 200% 200%; animation: navshift 14s ease infinite; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; flex-wrap: wrap; gap: 0.4rem; margin-top: 4px; } @keyframes navshift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .topnav-brand { font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; } .topnav-links { display: flex; gap: 1rem; flex-wrap: wrap; } .topnav-links a { color: rgba(255,255,255,0.85); font-size: 0.9rem; padding-bottom: 2px; border-bottom: 2px solid transparent; } .topnav-links a:hover, .topnav-links a.active { color: #fff; border-bottom-color: var(--c-orange); } /* ===== Buttons ===== */ .btn { display: inline-block; font-family: var(--font-ui); font-weight: 600; font-size: 0.9rem; padding: 0.55rem 1rem; border-radius: 8px; border: none; cursor: pointer; background: var(--bg-soft); color: var(--ink); transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease; text-align: center; } .btn:hover { filter: brightness(1.04); transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(0.98); } .btn:disabled { opacity: 0.55; pointer-events: none; } .btn-primary { background: var(--gradient-btn); color: #fff; box-shadow: 0 3px 10px rgba(194,41,107,0.25); } .btn-primary:hover { background: var(--gradient-btn-hover); } .btn-secondary { background: var(--gradient-btn-alt); color: #fff; box-shadow: 0 3px 10px rgba(62,111,217,0.22); } .btn-secondary:hover { background: var(--gradient-btn-alt-hover); } .btn-danger { background: var(--gradient-danger); color: #fff; } .btn-danger:hover { background: var(--gradient-danger-hover); } .btn-small { padding: 0.28rem 0.6rem; font-size: 0.8rem; box-shadow: none; border-radius: 6px; } .btn-large { padding: 0.85rem 1.3rem; font-size: 1rem; } .btn-full { width: 100%; } /* ===== Forms ===== */ .form-group { margin-bottom: 0.85rem; } .form-group label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.28rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; } input[type=text], input[type=password], input[type=number], input[type=date], select { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-ui); font-size: 0.92rem; background: var(--input-bg); color: var(--ink); } input::placeholder { color: var(--muted); opacity: 0.75; } input:focus, select:focus { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .form-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.5rem; } .form-row > * { flex: 1 1 150px; } .form-row .btn { flex: 0 0 auto; } .checkbox-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; flex: 0 0 auto; } .checkbox-label input { width: auto; } .inline-form { display: inline-flex; gap: 0.4rem; align-items: center; } /* ===== Tables (data grids) ===== */ table.table { width: 100%; border-collapse: collapse; } table.table th, table.table td { text-align: left; padding: 0.55rem 0.45rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; } table.table th { color: var(--muted); font-weight: 700; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; } tr.row-inactive { opacity: 0.5; } /* ===== Badges ===== */ .badge { display: inline-block; padding: 0.18rem 0.55rem; border-radius: 20px; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .badge-free { background: var(--badge-free-bg); color: var(--badge-free-fg); } .badge-occupied { background: var(--badge-occ-bg); color: var(--badge-occ-fg); } /* ===== Alerts ===== */ .alert { background: var(--alert-bg); color: var(--alert-fg); border: 1px solid var(--alert-border); padding: 0.65rem 0.9rem; border-radius: 8px; margin-bottom: 0.85rem; font-size: 0.88rem; } .alert-success { background: var(--alert-success-bg); color: var(--alert-success-fg); border-color: var(--alert-success-border); } /* ===== Stat cards ===== */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.85rem; margin-bottom: 1.25rem; } .stat-card { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1rem 1rem; text-align: center; } .stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-brand); } .stat-value { font-size: 1.75rem; font-weight: 800; color: var(--ink); } .stat-label { color: var(--muted); font-size: 0.8rem; margin-top: 0.25rem; } /* ===== Chips (categories) ===== */ .chip-list { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.7rem; } .chip { background: var(--bg-soft); border-radius: 20px; padding: 0.3rem 0.65rem; font-size: 0.83rem; display: inline-flex; align-items: center; gap: 0.4rem; } .chip-remove { background: none; border: none; color: var(--c-magenta); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; } /* ===== Table grid (staff floor view) ===== */ .table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.85rem; margin-bottom: 1.5rem; } /* The whole card is a link/button — no separate CTA underneath. Free tables get a soft teal tint; occupied tables get a warm coral tint, so at a glance the floor plan reads correctly by colour alone. */ .table-card { position: relative; overflow: hidden; display: block; width: 100%; border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1rem 1rem; text-align: center; cursor: pointer; text-decoration: none; color: inherit; font: inherit; transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease; /* Holding a table is OUR custom gesture (opens the quick-edit popup) — without these, Chrome/Safari treat the hold as "select this text" and pop up their own copy/selection UI instead, hijacking the gesture. */ -webkit-user-select: none; -webkit-touch-callout: none; user-select: none; } .table-card:hover { transform: translateY(-2px); box-shadow: var(--shadow), 0 6px 22px rgba(0,0,0,0.10); } .table-card:active { transform: translateY(0) scale(0.985); } /* Free = calm teal card + darker teal accent strip */ .table-card.table-free { background: color-mix(in srgb, var(--c-teal, #17998C) 8%, var(--card)); border-color: color-mix(in srgb, var(--c-teal, #17998C) 25%, transparent); } /* Occupied = warm coral card + hotter accent strip */ .table-card.table-occupied { background: color-mix(in srgb, var(--c-coral, #EA5B6F) 10%, var(--card)); border-color: color-mix(in srgb, var(--c-coral, #EA5B6F) 30%, transparent); } .table-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; } .table-card.table-free::before { background: linear-gradient(90deg, var(--c-teal), var(--c-blue)); } .table-card.table-occupied::before { background: linear-gradient(90deg, var(--c-magenta), var(--c-coral)); } .table-number { font-size: 1.35rem; font-weight: 800; } .table-cap { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; } .table-order-info { font-size: 1rem; font-weight: 700; color: var(--c-magenta); margin: 0.35rem 0 0.1rem; } .table-card-form { margin: 0; -webkit-user-select: none; -webkit-touch-callout: none; user-select: none; } /* The form wraps a