@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css'); :root { --brand: #1f6feb; --brand-dark: #14508f; --ink: #10151c; --muted: #5c6773; --card-bg: rgba(255, 255, 255, 0.92); --card-border: rgba(16, 21, 28, 0.08); --radius: 14px; --danger: #d64545; --success: #1c8a4b; --input-bg: #ffffff; --input-border: #cfd8e3; --thumb-bg: #e5eaf0; --alert-error-bg: #fdecec; --alert-error-border: #f6c8c8; --alert-success-bg: #e8f7ee; --alert-success-border: #bfe6cd; /* topbar (header bar) tone — light mode: light/frosted bar with dark text, matching the white-card look used everywhere else in light mode */ --topbar-bg: rgba(255, 255, 255, 0.82); --topbar-border: rgba(16, 21, 28, 0.10); --topbar-ink: #10151c; --topbar-btn-bg: rgba(16, 21, 28, 0.05); --topbar-btn-border: rgba(16, 21, 28, 0.14); --topbar-btn-bg-hover: rgba(16, 21, 28, 0.12); --topbar-chip-bg: rgba(16, 21, 28, 0.05); } /* ---------- Dark mode ---------- Toggled by adding .dark-theme to (see theme.js). The page frame itself (rotating background photo + dark overlay) stays the same in both modes; dark mode instead switches every card/panel/table from the light-card look to a dark one so the whole UI reads as one dark surface instead of white cards floating on a dark photo. */ html.dark-theme { --ink: #e7ecf3; --muted: #9aa7b8; --card-bg: rgba(23, 28, 38, 0.94); --card-border: rgba(255, 255, 255, 0.10); --input-bg: #1b212c; --input-border: #333d4d; --thumb-bg: #2a3140; --alert-error-bg: rgba(214, 69, 69, 0.14); --alert-error-border: rgba(214, 69, 69, 0.4); --alert-success-bg: rgba(28, 138, 75, 0.16); --alert-success-border: rgba(28, 138, 75, 0.4); /* topbar tone — dark mode: dark/frosted bar with light text */ --topbar-bg: rgba(10, 13, 20, 0.72); --topbar-border: rgba(255, 255, 255, 0.08); --topbar-ink: #ffffff; --topbar-btn-bg: rgba(255, 255, 255, 0.05); --topbar-btn-border: rgba(255, 255, 255, 0.16); --topbar-btn-bg-hover: rgba(255, 255, 255, 0.16); --topbar-chip-bg: rgba(255, 255, 255, 0.07); } html.dark-theme .card-image { background: #232a37; } html.dark-theme .badge.admin { background: rgba(255, 193, 7, 0.18); color: #ffd76b; } html.dark-theme .badge.user { background: rgba(31, 111, 235, 0.2); color: #8fb4f7; } html.dark-theme input[type=text], html.dark-theme input[type=password], html.dark-theme input[type=number], html.dark-theme input[type=email], html.dark-theme select, html.dark-theme textarea { color: var(--ink); } html.dark-theme .sheet-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.03); } html.dark-theme tr.clickable-row:hover { background: rgba(255, 255, 255, 0.06); } .theme-toggle-btn { color: var(--topbar-ink); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: .95rem; border: 1px solid var(--topbar-btn-border); background: var(--topbar-btn-bg); cursor: pointer; font-family: inherit; line-height: 1; } .theme-toggle-btn:hover { background: var(--topbar-btn-bg-hover); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body { font-family: 'Vazirmatn', Tahoma, sans-serif; direction: rtl; color: var(--ink); line-height: 1.9; background: #0e1420; } /* Text that is inherently Latin/numeric (model names, period names, English words) is isolated so it renders left-to-right inside RTL sentences. */ .ltr, .bdi-ltr { direction: ltr; unicode-bidi: isolate; } /* ---------- Rotating background ---------- */ .bg-layer { position: fixed; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s ease-in-out; z-index: -2; } .bg-layer.active { opacity: 1; } .bg-overlay { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(10,14,22,.72) 0%, rgba(10,14,22,.85) 100%); z-index: -1; } .bg-fallback { background: radial-gradient(circle at 30% 20%, #1c2a3d 0%, #0e1420 60%); } /* ---------- Layout ---------- */ .page-wrap { min-height: 100vh; display: flex; flex-direction: column; } .topbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; background: var(--topbar-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--topbar-border); } .brand { color: var(--topbar-ink); font-weight: 700; font-size: 1.15rem; text-decoration: none; display: flex; align-items: center; gap: 8px; } /* Hamburger button — sits at the right (RTL start) of the topbar; the three bars morph into an X while the menu is open. */ .hamburger-btn { flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--topbar-btn-border); background: var(--topbar-btn-bg); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .hamburger-btn:hover { background: var(--topbar-btn-bg-hover); } .hamburger-btn span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--topbar-ink); transition: transform .2s ease, opacity .2s ease; } .hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger-btn.open span:nth-child(2) { opacity: 0; } .hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .hamburger-menu { position: absolute; top: calc(100% + 8px); right: 22px; min-width: 230px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,0.28); padding: 8px; display: flex; flex-direction: column; gap: 2px; z-index: 500; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; } .hamburger-menu.open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .15s ease, transform .15s ease; } .hamburger-menu a, .hamburger-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: right; padding: 10px 12px; border-radius: 9px; border: none; background: none; color: var(--ink); text-decoration: none; font-size: .9rem; font-family: inherit; cursor: pointer; } .hamburger-menu a:hover, .hamburger-menu button:hover { background: rgba(31, 111, 235, 0.1); } .hamburger-menu a.primary { background: var(--brand); color: #fff; } .hamburger-menu a.primary:hover { background: var(--brand-dark); } .hamburger-menu form { width: 100%; } .hamburger-menu .hamburger-user-row { border-bottom: 1px solid var(--card-border); border-radius: 0; padding-bottom: 12px; margin-bottom: 4px; font-weight: 700; } .user-chip-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; background: var(--thumb-bg); } .row-number-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, var(--auth-accent-1), var(--auth-accent-2)); color: #fff; font-size: .78rem; font-weight: 700; } .chat-unread-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .65rem; font-weight: 700; position: absolute; top: -4px; left: -6px; } main.container { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 28px 18px 60px; } .site-footer { text-align: center; padding: 20px 16px 26px; color: rgba(255,255,255,0.45); font-size: .82rem; border-top: 1px solid rgba(255,255,255,0.08); margin-top: 20px; } .site-footer-inner { max-width: 640px; margin: 0 auto; } .site-footer-title { margin: 0 0 4px; } .site-footer-copy { margin: 0 0 10px; color: rgba(255,255,255,0.35); } .site-footer-links { display: flex; justify-content: center; gap: 16px; } .site-footer-links a { color: rgba(255,255,255,0.55); text-decoration: underline; font-size: .82rem; } .site-footer-links a:hover { color: rgba(255,255,255,0.85); } .dev-contact { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; color: rgba(255,255,255,0.4); } .telegram-btn { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; transition: transform .15s ease; } .telegram-btn:hover { transform: scale(1.12); } .telegram-btn svg { width: 100%; height: 100%; display: block; } /* ---------- About page ---------- */ .about-team-grid { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; max-width: 720px; margin: 0 auto; } .about-card { flex: 1 1 300px; max-width: 340px; background: var(--card-bg); border-radius: var(--radius); padding: 26px 24px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); text-align: center; } .about-card-role { color: var(--muted); font-size: .78rem; margin-bottom: 6px; } .about-card h2 { margin: 0 0 12px; color: var(--ink); font-size: 1.15rem; } .about-card p { color: var(--muted); font-size: .88rem; line-height: 1.7; margin: 0 0 16px; } .about-telegram-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .9rem; background: rgba(41, 169, 234, 0.1); padding: 8px 16px; border-radius: 999px; } .about-telegram-link:hover { background: rgba(41, 169, 234, 0.2); } /* ---------- Cards / grid ---------- */ .page-title { color: #fff; margin-bottom: 6px; } .page-subtitle { color: rgba(255,255,255,0.65); margin-top: 0; margin-bottom: 24px; } /* Safety net: .page-title/.page-subtitle are hardcoded white for the dark photo backdrop they normally sit on. If either ever ends up nested inside a light card by mistake, this keeps them readable instead of silently going invisible in light mode. */ .panel .page-title, .card .page-title, .table-wrap .page-title, .auth-wrap .page-title, .auth-card .page-title, .profile-card .page-title { color: var(--ink); } .panel .page-subtitle, .card .page-subtitle, .table-wrap .page-subtitle, .auth-wrap .page-subtitle, .auth-card .page-subtitle, .profile-card .page-subtitle { color: var(--muted); } .breadcrumbs { position: relative; color: rgba(255,255,255,0.55); font-size: .88rem; margin-bottom: 18px; min-height: 36px; padding-right: 104px; display: flex; align-items: center; flex-wrap: wrap; } .breadcrumbs a { color: rgba(255,255,255,0.8); text-decoration: none; } .breadcrumbs a:hover { text-decoration: underline; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .card { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--card-border); overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .15s ease; box-shadow: 0 6px 18px rgba(0,0,0,0.18); } .card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.28); } .card-image { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--thumb-bg); } .card-body { padding: 14px 16px; } .card-title { font-weight: 700; font-size: 1rem; margin: 0 0 4px; } .card-meta { color: var(--muted); font-size: .84rem; margin: 0; } .card.period-card { padding: 20px 16px; align-items: center; text-align: center; } .period-icon { font-size: 1.8rem; margin-bottom: 6px; } .empty-state { background: rgba(255,255,255,0.06); border: 1px dashed rgba(255,255,255,0.25); border-radius: var(--radius); padding: 40px 20px; text-align: center; color: rgba(255,255,255,0.7); } /* ---------- Checklist ---------- */ .checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .checklist li { background: var(--card-bg); border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--card-border); } .checklist .num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .78rem; display: flex; align-items: center; justify-content: center; font-weight: 700; } .checklist .text { flex: 1; } /* ---------- White card wrapper for any data table ---------- Tables are rendered directly on top of the dark rotating background, so without an opaque wrapper their (dark) text becomes unreadable. Wrapping any bare table in this class gives it the same white card look used everywhere else on the site, and adds horizontal scrolling so wide tables never break the mobile layout. */ .table-wrap { background: var(--card-bg); border-radius: var(--radius); border: 1px solid var(--card-border); box-shadow: 0 6px 18px rgba(0,0,0,0.15); overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap table.data-table, .table-wrap table.sheet-table { box-shadow: none; border-radius: 0; } /* ---------- Full multi-column sheet table (Maintenance import) ---------- */ .sheet-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .92rem; } .sheet-table th, .sheet-table td { padding: 10px 12px; border-bottom: 1px solid var(--card-border); text-align: right; vertical-align: top; } .sheet-table thead th { position: sticky; top: 0; background: var(--brand); color: #fff; font-weight: 700; white-space: nowrap; } .sheet-table tbody tr:nth-child(even) { background: rgba(31, 111, 235, 0.05); } .sheet-table td.num-col { width: 34px; color: var(--muted); font-weight: 700; text-align: center; } .sheet-table th.num-col { text-align: center; } /* English PM table: the wrapper gets dir="ltr" so column order flows left-to-right; cell text must also left-align within it, otherwise it still LOOKS backwards even though the columns themselves are correct. */ .table-wrap[dir="ltr"] .sheet-table th:not(.num-col), .table-wrap[dir="ltr"] .sheet-table td:not(.num-col) { text-align: left; } /* ---------- Forms ---------- */ .auth-wrap { max-width: 400px; margin: 6vh auto; background: var(--card-bg); border-radius: var(--radius); padding: 30px 26px; box-shadow: 0 12px 34px rgba(0,0,0,0.35); } .auth-wrap h1 { margin-top: 0; text-align: center; font-size: 1.3rem; } .form-group { margin-bottom: 16px; } label { display: block; margin-bottom: 6px; font-size: .88rem; color: var(--muted); } input[type=text], input[type=password], input[type=number], input[type=email], select, textarea { width: 100%; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--input-border); font-family: inherit; font-size: .95rem; background: var(--input-bg); } input[type=file] { width: 100%; } textarea { min-height: 90px; resize: vertical; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 9px; border: none; background: var(--brand); color: #fff; font-family: inherit; font-size: .92rem; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--brand-dark); } .btn.btn-block { width: 100%; } .btn.btn-danger { background: var(--danger); } .btn.btn-outline { background: transparent; color: var(--brand); border: 1px solid var(--brand); } .btn.btn-sm { padding: 6px 12px; font-size: .82rem; } .alert { padding: 12px 14px; border-radius: 9px; font-size: .88rem; margin-bottom: 16px; } .alert-error { background: var(--alert-error-bg); color: var(--danger); border: 1px solid var(--alert-error-border); } .alert-success { background: var(--alert-success-bg); color: var(--success); border: 1px solid var(--alert-success-border); } .auth-switch { text-align: center; margin-top: 14px; font-size: .86rem; color: var(--muted); } /* ======================================================================== Login / Register combined card — a signature "diagonal seam" split panel. One form pane (sign in / create account, cross-faded between two slots) sits beside a gradient info panel; a glowing seam marks the boundary and pulses when the mode switches. Gradient runs from the site's own brand blue into a warm amber accent — new, but drawn from the existing palette rather than introducing an unrelated color story. ======================================================================== */ :root { --auth-accent-1: #163a63; --auth-accent-2: #d9822f; --auth-accent-glow: rgba(217, 130, 47, 0.55); } html.dark-theme { --auth-accent-1: #0d2745; --auth-accent-2: #c9711f; --auth-accent-glow: rgba(201, 113, 31, 0.5); } .auth-shell { display: flex; justify-content: center; padding: 40px 16px 60px; } .auth-card { position: relative; display: flex; width: 100%; max-width: 880px; min-height: 480px; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.35); background: var(--card-bg); } .auth-form-pane { position: relative; flex: 1 1 55%; } .auth-form-slot { position: absolute; inset: 0; padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transform: translateX(-18px); pointer-events: none; transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s; } .auth-form-slot.is-active { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; position: relative; transition: opacity .4s ease, transform .4s ease; } .auth-form-slot h1 { margin: 0 0 20px; font-size: 1.5rem; color: var(--ink); } .auth-slot-register h1 { margin-bottom: 12px; font-size: 1.25rem; } .auth-switch-line { margin-top: 16px; font-size: .86rem; color: var(--muted); text-align: center; } .auth-switch-btn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--auth-accent-2); font-weight: 700; text-decoration: underline; } /* Register form is much longer than sign-in, so it gets tighter spacing to still fit on one screen without scrolling — same fields, same animation, just denser. */ .compact-form .form-group { margin-bottom: 10px; } .compact-form label { margin-bottom: 3px; font-size: .8rem; } .compact-form input[type=text], .compact-form input[type=email], .compact-form input[type=password] { padding: 8px 10px; font-size: .88rem; } .compact-form .avatar-field input[type=file] { font-size: .78rem; padding: 6px 0; } .compact-form .btn-block { padding: 10px 18px; margin-top: 4px; } .auth-slot-register.auth-form-slot { padding-top: 30px; padding-bottom: 30px; } .auth-seam { width: 3px; flex: none; background: linear-gradient(180deg, var(--auth-accent-1), var(--auth-accent-2)); box-shadow: 0 0 14px 1px var(--auth-accent-glow); position: relative; z-index: 2; } .auth-card.is-switching .auth-seam { animation: authSeamPulse .6s ease; } @keyframes authSeamPulse { 0% { box-shadow: 0 0 6px 0 var(--auth-accent-glow); } 45% { box-shadow: 0 0 30px 5px var(--auth-accent-glow); } 100% { box-shadow: 0 0 14px 1px var(--auth-accent-glow); } } .auth-info-pane { position: relative; flex: 1 1 45%; background: linear-gradient(155deg, var(--auth-accent-1) 0%, var(--auth-accent-2) 100%); } .auth-info-slot { position: absolute; inset: 0; padding: 44px 38px; display: flex; flex-direction: column; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity .5s ease .05s, transform .5s ease .05s; } .auth-info-slot.is-active { opacity: 1; transform: translateY(0); position: relative; } .auth-info-eyebrow { color: rgba(255,255,255,0.75); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; } .auth-info-slot h2 { color: #fff; font-size: 1.9rem; margin: 10px 0 14px; line-height: 1.4; } .auth-info-slot h2 em { font-style: normal; color: #ffd28a; } .auth-info-slot p { color: rgba(255,255,255,0.85); line-height: 1.85; font-size: .92rem; margin: 0; max-width: 300px; } @media (max-width: 760px) { .auth-card { flex-direction: column; min-height: 0; } .auth-seam { width: 100%; height: 3px; } .auth-info-pane { order: -1; min-height: 150px; } .auth-form-slot, .auth-info-slot { position: static; opacity: 1; transform: none; padding: 26px 22px; } .auth-form-slot:not(.is-active), .auth-info-slot:not(.is-active) { display: none; } } /* ---------- OTP verification boxes ---------- */ .otp-boxes { display: flex; gap: 10px; justify-content: center; margin: 26px 0 10px; direction: ltr; } .otp-box { width: 46px; height: 56px; text-align: center; font-size: 1.4rem; font-weight: 700; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--ink); padding: 0; transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease; } .otp-box:focus { outline: none; border-color: var(--auth-accent-2); box-shadow: 0 0 0 4px var(--auth-accent-glow); } /* Success: every box lights up green together, then the page moves on. */ .otp-ring-success .otp-box { border-color: #1c8a4b; background: rgba(28, 138, 75, 0.14); color: #1c8a4b; transform: scale(1.06); } /* Error: every box flashes red and the whole row shakes, like a lock rejecting the wrong combination, then clears for another try. */ .otp-ring-error .otp-box { border-color: var(--danger); background: rgba(214, 69, 69, 0.14); color: var(--danger); } .otp-ring-error { animation: otpShake .5s ease; } @keyframes otpShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } } @media (max-width: 420px) { .otp-box { width: 40px; height: 50px; font-size: 1.2rem; } } /* ---------- Panel (admin) ---------- */ .panel { background: var(--card-bg); border-radius: var(--radius); padding: 22px; margin-bottom: 22px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); color: var(--ink); } .panel h2 { margin-top: 0; font-size: 1.05rem; color: var(--ink); } .stat-row { display: flex; gap: 14px; flex-wrap: wrap; } /* ---------- Circular gauges (admin dashboard) ---------- */ .gauge-row { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; background: var(--card-bg); border-radius: var(--radius); padding: 26px 20px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); margin-bottom: 22px; } .gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 130px; } .gauge-svg { width: 120px; height: 120px; } .gauge-track { fill: none; stroke: var(--card-border); stroke-width: 8; } .gauge-fill { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .6s ease; } .gauge-text { font-size: 16px; font-weight: 700; fill: var(--ink); font-family: inherit; } .gauge-label { font-size: .85rem; color: var(--ink); font-weight: 600; text-align: center; } .gauge-sublabel { font-size: .75rem; color: var(--muted); text-align: center; } .stat-box { flex: 1; min-width: 140px; background: var(--card-bg); border-radius: var(--radius); padding: 20px; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,0.15); } .stat-box .num { font-size: 1.7rem; font-weight: 800; color: var(--brand); } .stat-box .label { color: var(--muted); font-size: .85rem; } table.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; } table.data-table th, table.data-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--card-border); } table.data-table th { color: var(--muted); font-weight: 600; } tr.clickable-row { cursor: pointer; } tr.clickable-row:hover { background: rgba(31, 111, 235, 0.08); } .row-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .inline-form { display: inline-flex; gap: 6px; align-items: center; } .thumb-sm { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; background: var(--thumb-bg); } .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; } .badge.admin { background: #fff1cc; color: #9a6a00; } .badge.user { background: #e4ecfb; color: #2c56a8; } .bg-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; } .bg-thumb { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16/10; background: var(--thumb-bg); } .bg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bg-thumb form { position: absolute; top: 6px; left: 6px; margin: 0; } .bg-thumb button { background: rgba(0, 0, 0, 0.72); color: #ffffff; border: 1px solid rgba(255,255,255,0.35); border-radius: 6px; padding: 4px 10px; font-size: .72rem; font-weight: 600; cursor: pointer; } .bg-thumb button:hover { background: rgba(0, 0, 0, 0.88); } hr.sep { border: none; border-top: 1px solid var(--card-border); margin: 20px 0; } .help-text { color: var(--muted); font-size: .82rem; margin-top: 4px; } /* ---------- Back button (lives inside .breadcrumbs, right side) ---------- */ .back-btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 5; display: inline-flex; align-items: center; gap: 6px; color: #e7ecf3; text-decoration: none; padding: 7px 14px; border-radius: 999px; font-size: .85rem; border: 1px solid rgba(255,255,255,0.18); background: rgba(20,26,38,0.55); backdrop-filter: blur(4px); cursor: pointer; font-family: inherit; white-space: nowrap; } .back-btn:hover { background: rgba(255,255,255,0.16); } /* ---------- Avatar ---------- */ .avatar-sm { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--thumb-bg); flex: none; } .avatar-lg { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; background: var(--thumb-bg); display: block; margin: 0 auto 14px; border: 3px solid var(--card-bg); box-shadow: 0 4px 14px rgba(0,0,0,0.25); } .avatar-placeholder { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--muted); background: var(--thumb-bg); } /* ---------- Profile page ---------- */ .profile-card { max-width: 880px; margin: 0 auto; background: var(--card-bg); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,0.15); overflow: hidden; } .profile-form-grid { display: flex; align-items: stretch; } .profile-avatar-col { flex: 0 0 220px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px; background: linear-gradient(180deg, var(--auth-accent-1), var(--auth-accent-2)); } .profile-avatar-col .avatar-lg { margin-bottom: 12px; } .profile-name-display { color: #fff; font-weight: 700; font-size: 1.05rem; } .profile-avatar-btn { margin-top: 18px; background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); color: #fff; cursor: pointer; } .profile-avatar-btn:hover { background: rgba(255,255,255,0.24); } .profile-fields-col { flex: 1; padding: 36px 34px; min-width: 0; } .profile-section-title { font-size: 1rem; color: var(--ink); margin: 0 0 16px; } .profile-section-title-spaced { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--card-border); } .help-text-inline { color: var(--muted); font-weight: 400; font-size: .82rem; } .profile-save-btn { margin-top: 8px; padding: 11px 28px; } @media (max-width: 700px) { .profile-form-grid { flex-direction: column; } .profile-avatar-col { padding: 28px 20px; } .profile-fields-col { padding: 26px 20px; } } /* ---------- Landing page ---------- */ .hero { position: relative; text-align: center; padding: 72px 16px 44px; max-width: 760px; margin: 0 auto; } .hero-glow { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 640px; height: 420px; max-width: 90vw; background: radial-gradient(ellipse at center, var(--auth-accent-2) 0%, var(--auth-accent-1) 45%, transparent 72%); opacity: 0.28; filter: blur(40px); pointer-events: none; z-index: 0; } .hero-eyebrow { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #ffd9a3; font-size: .78rem; letter-spacing: .04em; margin-bottom: 20px; } .hero-title { position: relative; color: #fff; font-size: 2.2rem; line-height: 1.4; margin: 0 0 18px; } .hero-subtitle { position: relative; color: rgba(255,255,255,0.75); font-size: 1.05rem; line-height: 1.8; margin: 0 0 32px; max-width: 600px; margin-inline: auto; margin-bottom: 32px; } .hero-cta { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn-gradient { display: inline-flex; align-items: center; justify-content: center; padding: 12px 26px; border-radius: 10px; border: none; color: #fff; text-decoration: none; font-size: .95rem; font-weight: 700; background: linear-gradient(135deg, var(--auth-accent-1), var(--auth-accent-2)); box-shadow: 0 10px 26px -8px var(--auth-accent-glow); transition: transform .15s ease, box-shadow .15s ease; } .btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px var(--auth-accent-glow); } .btn-outline-light { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.35); color: #fff; text-decoration: none; font-size: .92rem; background: rgba(255,255,255,0.06); } .btn-outline-light:hover { background: rgba(255,255,255,0.14); } .hero-stats { position: relative; display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 44px; flex-wrap: wrap; } .hero-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; } .hero-stat-num { color: #ffd9a3; font-weight: 700; font-size: 1.1rem; } .hero-stat-label { color: rgba(255,255,255,0.55); font-size: .76rem; } .hero-stat-sep { width: 1px; height: 26px; background: rgba(255,255,255,0.15); } .feature-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; max-width: 1080px; margin: 26px auto 56px; padding: 0 16px; } .feature-card { flex: 0 1 232px; width: 232px; position: relative; background: var(--card-bg); border-radius: var(--radius); padding: 26px 22px; box-shadow: 0 6px 18px rgba(0,0,0,0.15); color: var(--ink); border: 1px solid var(--card-border); transition: transform .18s ease, box-shadow .18s ease; overflow: hidden; } .feature-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--auth-accent-1), var(--auth-accent-2)); opacity: 0; transition: opacity .18s ease; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.22); } .feature-card:hover::before { opacity: 1; } .feature-card-lead { border-color: var(--auth-accent-2); } .feature-card-lead::before { opacity: 1; } .feature-icon-badge { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 14px; background: linear-gradient(135deg, var(--auth-accent-1), var(--auth-accent-2)); } .feature-card h3 { margin: 0 0 8px; font-size: 1.02rem; } .feature-card p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.7; } .landing-cta-banner { max-width: 1080px; margin: 0 auto 56px; padding: 0 16px; } .landing-cta-banner-inner { background: linear-gradient(135deg, var(--auth-accent-1), var(--auth-accent-2)); border-radius: 22px; padding: 44px 30px; text-align: center; box-shadow: 0 20px 50px -12px var(--auth-accent-glow); } .landing-cta-banner-inner h2 { color: #fff; font-size: 1.4rem; margin: 0 0 22px; line-height: 1.6; } .btn-light-solid { display: inline-flex; align-items: center; justify-content: center; padding: 12px 26px; border-radius: 10px; border: none; color: var(--auth-accent-1); background: #fff; text-decoration: none; font-size: .95rem; font-weight: 700; } .btn-light-solid:hover { background: #fff2e0; } .btn-outline-onbanner { display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.5); color: #fff; text-decoration: none; font-size: .92rem; background: rgba(255,255,255,0.08); } .btn-outline-onbanner:hover { background: rgba(255,255,255,0.2); } @media (max-width: 640px) { .hero { padding: 50px 16px 30px; } .hero-title { font-size: 1.6rem; } .hero-stats { gap: 14px; } .landing-cta-banner-inner { padding: 32px 20px; } .feature-card { width: 100%; max-width: 320px; } } /* ---------- Language toggle (PM checklist) — sits in the breadcrumb bar, left side, mirroring the back button chip's dark-pill style since this bar always sits over the dark background photo regardless of theme. ---------- */ .breadcrumbs.has-lang-toggle { padding-left: 176px; } .lang-toggle { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: inline-flex; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; overflow: hidden; background: rgba(20,26,38,0.55); backdrop-filter: blur(4px); } .lang-btn { display: inline-flex; align-items: center; border: none; background: transparent; color: #e7ecf3; padding: 7px 16px; font-family: inherit; font-size: .82rem; cursor: pointer; white-space: nowrap; text-decoration: none; } .lang-btn.active { background: var(--brand); color: #fff; font-weight: 700; } /* ---------- Responsive ---------- */ /* ---------- Image lightbox (tap/click to zoom) ---------- */ .zoomable-img { cursor: zoom-in; } .lightbox-overlay { position: fixed; inset: 0; background: rgba(5, 7, 11, 0.92); display: none; align-items: center; justify-content: center; z-index: 9999; padding: 24px; overflow: auto; } .lightbox-overlay.active { display: flex; } /* When zoomed, switch from flex-centering to a normal scrollable block layout — centering an overflowing item with align-items/justify-content clips the parts that would need NEGATIVE scroll to reach (a well-known flexbox limitation), so the "before center" edges become unreachable. margin:auto on a block/inline-block image scrolls correctly in every direction instead. */ .lightbox-overlay.is-zoomed { display: block; text-align: center; padding: 24px 0; } .lightbox-overlay img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; cursor: zoom-in; transition: transform .2s ease; touch-action: pinch-zoom; user-select: none; } .lightbox-overlay.is-zoomed img.zoomed { display: inline-block; max-width: none; max-height: none; width: 180vw; cursor: zoom-out; margin: 0 auto; } .lightbox-close { position: fixed; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-size: 1.1rem; cursor: pointer; line-height: 1; } .lightbox-close:hover { background: rgba(255,255,255,0.18); } .lightbox-hint { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.6); font-size: .78rem; pointer-events: none; } body.lightbox-open { overflow: hidden; } /* ---------- Chat: user search dropdown ---------- */ .user-search-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; left: 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; box-shadow: 0 10px 24px rgba(0,0,0,0.2); max-height: 280px; overflow-y: auto; z-index: 50; } .user-search-dropdown.active { display: block; } .user-search-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--card-border); } .user-search-item:last-child { border-bottom: none; } .user-search-item:hover { background: rgba(31, 111, 235, 0.08); } .user-search-empty { padding: 12px; color: var(--muted); font-size: .85rem; text-align: center; } /* ---------- Chat: conversation list ---------- */ .conversation-list { display: flex; flex-direction: column; gap: 8px; } .conversation-row { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: var(--ink); border: 1px solid var(--card-border); } .conversation-row:hover { background: rgba(31, 111, 235, 0.06); } .conversation-info { flex: 1; min-width: 0; } .conversation-name { font-weight: 700; font-size: .95rem; } .conversation-preview { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } /* ---------- Chat: thread ---------- */ .chat-thread-header { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; border: 1px solid var(--card-border); } .message-list { display: flex; flex-direction: column; gap: 10px; background: rgba(0,0,0,0.15); border-radius: 14px; padding: 16px; min-height: 320px; max-height: 55vh; overflow-y: auto; margin-bottom: 12px; } .message-bubble { max-width: 78%; padding: 10px 14px; border-radius: 14px; font-size: .92rem; line-height: 1.6; word-break: break-word; } .message-bubble.mine { align-self: flex-start; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; } .message-bubble.theirs { align-self: flex-end; background: var(--card-bg); color: var(--ink); border-bottom-left-radius: 4px; } .message-text { white-space: pre-wrap; } .message-attachment-img { max-width: 100%; border-radius: 10px; display: block; margin-bottom: 6px; cursor: zoom-in; } .message-attachment-video { max-width: 100%; border-radius: 10px; display: block; margin-bottom: 6px; } .message-attachment-audio { display: block; margin-bottom: 6px; max-width: 100%; } .message-attachment-file { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: underline; } /* ---------- Chat: reply preview, message actions, delete, forward ---------- */ .message-reply-preview { font-size: .78rem; opacity: .8; border-inline-start: 3px solid currentColor; padding-inline-start: 8px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .message-actions { display: flex; gap: 4px; margin-top: 6px; opacity: 0; transition: opacity .15s ease; } .message-bubble:hover .message-actions, .message-bubble:focus-within .message-actions { opacity: 1; } .msg-action-btn { border: none; background: rgba(0,0,0,0.12); border-radius: 6px; padding: 3px 7px; font-size: .74rem; cursor: pointer; line-height: 1.4; } .message-bubble.theirs .msg-action-btn { background: rgba(0,0,0,0.06); } .msg-action-btn:hover { background: rgba(0,0,0,0.2); } .message-bubble.is-deleted { opacity: .7; } .message-deleted-text { font-style: italic; color: var(--muted) !important; } .reply-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 14px; margin-bottom: 8px; font-size: .85rem; color: var(--ink); } .reply-bar button { border: none; background: none; cursor: pointer; color: var(--muted); font-size: .9rem; } .forward-dialog { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9998; align-items: center; justify-content: center; } .forward-dialog.show { display: flex; } .forward-dialog-inner { background: var(--card-bg); border-radius: 16px; padding: 24px; width: 90%; max-width: 340px; box-shadow: 0 20px 50px rgba(0,0,0,0.35); } .forward-dialog-inner h3 { margin: 0 0 14px; color: var(--ink); font-size: 1rem; } .forward-dialog-inner input { width: 100%; } .send-bar { display: flex; align-items: center; gap: 10px; background: var(--card-bg); border-radius: 999px; padding: 8px 8px 8px 16px; border: 1px solid var(--card-border); } .send-bar input[type=text] { border: none; background: transparent; flex: 1; padding: 8px 4px; } .send-bar input[type=text]:focus { outline: none; } .attach-btn { cursor: pointer; font-size: 1.2rem; padding: 6px; border-radius: 50%; flex: none; } .attach-btn:hover { background: rgba(31, 111, 235, 0.1); } .voice-btn { border: none; background: none; color: inherit; font-family: inherit; user-select: none; -webkit-user-select: none; touch-action: none; } .voice-btn.recording { background: rgba(214, 69, 69, 0.15); color: var(--danger); transform: scale(1.12); } .voice-recording-bar { align-items: center; gap: 10px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 999px; padding: 10px 16px; margin-bottom: 8px; font-size: .86rem; color: var(--ink); } .voice-recording-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); flex: none; animation: voiceDotPulse 1s ease-in-out infinite; } @keyframes voiceDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.75); } } .voice-recording-timer, #voiceRecordingTimer { font-variant-numeric: tabular-nums; color: var(--muted); } .voice-recording-hint { color: var(--muted); font-size: .78rem; margin-inline-start: auto; } .attachment-preview { display: none; margin-top: 8px; font-size: .82rem; color: var(--muted); } .attachment-preview.active { display: block; } @media (max-width: 640px) { .topbar { padding: 12px 14px; } main.container { padding: 20px 12px 50px; } .auth-wrap { margin: 3vh auto; padding: 24px 18px; } .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .stat-row { flex-direction: column; } .sheet-table { font-size: .82rem; min-width: 420px; } .sheet-table th, .sheet-table td { padding: 8px 8px; } /* On narrow screens, pin the back button / language toggle to a top row (opposite corners) and let the breadcrumb trail text wrap onto the row(s) below instead of squeezing everything onto one line. */ .breadcrumbs { padding-right: 88px; padding-left: 0; padding-top: 38px; align-items: flex-start; } .breadcrumbs.has-lang-toggle { padding-left: 0; } .back-btn, .lang-toggle { top: 0; transform: none; } .back-btn { font-size: .78rem; padding: 6px 10px; } .lang-btn { font-size: .76rem; padding: 6px 12px; } }