/* ========================================================================== LatePals — design tokens Dark-first: this is a "chatting with pals late at night" app, so the default surface is a deep night-sky navy with warm coral / cool periwinkle glow accents, like a phone screen lighting up a dark room. ========================================================================== */ :root { --color-bg: #12121C; --color-surface: #1B1B2E; --color-surface-alt: #22223A; --color-border: #32324A; --color-text: #EDEDF7; --color-text-soft: #9C9CBE; --color-coral: #FF8F65; --color-coral-soft: #FFB199; --color-periwinkle: #8B8FE8; --color-periwinkle-soft: #B3B6F2; --color-success: #6FCF97; --color-danger: #F17171; --font-display: 'Baloo 2', 'Quicksand', sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif; --radius: 14px; --shadow-glow: 0 8px 30px -8px rgba(139, 143, 232, 0.25); --color-header-bg: rgba(18,18,28,0.85); --color-bg-glow: #1D1D3A; } /* ========================================================================== Themes. Each is a full palette swap via [data-theme] on — not just a dark/light toggle. Picked from the header's palette menu, applied instantly via JS, and saved to the user's account so it follows them across devices (see set_theme.php / js/main.js). ========================================================================== */ html[data-theme="light"] { --color-bg: #F7F5FA; --color-surface: #FFFFFF; --color-surface-alt: #EFEBF7; --color-border: #B8ACD4; --color-header-bg: rgba(247,245,250,0.85); --color-bg-glow: #E4DEF2; --color-text: #1E1E2E; --color-text-soft: #6B6B85; --color-coral: #B8461F; --color-coral-soft: #D3703F; --color-periwinkle: #5B5FCF; --color-periwinkle-soft: #4348B5; --shadow-glow: 0 8px 30px -8px rgba(91, 95, 207, 0.25); } html[data-theme="blue"] { --color-bg: #0B1830; --color-surface: #132540; --color-surface-alt: #1B3358; --color-border: #2A4A73; --color-header-bg: rgba(11,24,48,0.85); --color-bg-glow: #17294A; --color-text: #E4EEFB; --color-text-soft: #8FA8C7; --color-coral: #4FC3F7; --color-coral-soft: #7DD3F9; --color-periwinkle: #7C8FFF; --color-periwinkle-soft: #A3B0FF; --shadow-glow: 0 8px 30px -8px rgba(79, 195, 247, 0.3); } html[data-theme="orange"] { --color-bg: #1F1209; --color-surface: #2B1B0F; --color-surface-alt: #3A2515; --color-border: #55371F; --color-header-bg: rgba(31,18,9,0.85); --color-bg-glow: #2E1D10; --color-text: #FDEEE0; --color-text-soft: #C9A98A; --color-coral: #FF7A45; --color-coral-soft: #FF9A6E; --color-periwinkle: #FFC15E; --color-periwinkle-soft: #FFD48A; --shadow-glow: 0 8px 30px -8px rgba(255, 122, 69, 0.3); } html[data-theme="brown"] { --color-bg: #F2E9DD; --color-surface: #FFFDF8; --color-surface-alt: #E8DAC5; --color-border: #BBA07A; --color-header-bg: rgba(242,233,221,0.85); --color-bg-glow: #EAD9BE; --color-text: #3B2A1D; --color-text-soft: #7A6350; --color-coral: #7A4A1F; --color-coral-soft: #96602E; --color-periwinkle: #456038; --color-periwinkle-soft: #3F5C34; --shadow-glow: 0 8px 30px -8px rgba(122, 74, 31, 0.25); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: radial-gradient(circle at 20% 0%, var(--color-bg-glow) 0%, var(--color-bg) 55%); color: var(--color-text); font-family: var(--font-body); line-height: 1.55; min-height: 100vh; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0 0 0.5em; line-height: 1.2; } p { margin: 0 0 1em; } .container { max-width: 1000px; margin: 0 auto; padding: 0 20px; } .container-narrow { max-width: 560px; margin: 0 auto; padding: 0 20px; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--color-periwinkle); outline-offset: 2px; } /* ---------------- Buttons ---------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; border: 1.5px solid transparent; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: linear-gradient(135deg, var(--color-coral), var(--color-periwinkle)); color: #12121C; } .btn-primary:hover { box-shadow: var(--shadow-glow); } .btn-secondary { background: transparent; border-color: var(--color-border); color: var(--color-text); } .btn-secondary:hover { background: var(--color-surface-alt); } .btn-outline { background: transparent; border-color: var(--color-periwinkle); color: var(--color-periwinkle-soft); } .btn-small { padding: 8px 16px; font-size: 0.85rem; } .btn-danger { background: transparent; border-color: var(--color-danger); color: var(--color-danger); } .btn-danger:hover { background: rgba(241,113,113,0.12); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .link-btn { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--font-body); color: var(--color-periwinkle-soft); font-weight: 700; } /* ---------------- Header / nav ---------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--color-header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); } .site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; gap: 16px; } .logo { display: flex; align-items: center; gap: 10px; } .logo svg { width: 34px; height: 34px; } .logo-text { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; background: linear-gradient(135deg, var(--color-coral), var(--color-periwinkle)); -webkit-background-clip: text; background-clip: text; color: transparent; } .main-nav { display: flex; align-items: center; gap: 6px; } .main-nav a { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; color: var(--color-text-soft); } .main-nav a:hover, .main-nav a.active { background: var(--color-surface-alt); color: var(--color-text); } .nav-badge { background: var(--color-coral); color: #12121C; font-size: 0.7rem; font-weight: 800; border-radius: 999px; padding: 1px 6px; } .header-right { display: flex; align-items: center; gap: 10px; } .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-border); } .avatar-sm { width: 28px; height: 28px; } .avatar-lg { width: 96px; height: 96px; border-width: 3px; } .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--color-text); margin: 5px 0; border-radius: 2px; } .theme-menu { position: relative; } .theme-menu-btn { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--color-border); background: var(--color-surface-alt); color: var(--color-text); display: flex; align-items: center; justify-content: center; cursor: pointer; } .theme-menu-btn:hover { background: var(--color-surface); } .theme-menu-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px -8px rgba(0,0,0,0.4); z-index: 60; } .theme-menu-dropdown.is-open { display: block; } .theme-option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; background: none; border: none; cursor: pointer; color: var(--color-text); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; text-align: left; } .theme-option:hover { background: var(--color-surface-alt); } .theme-option.is-active { background: var(--color-surface-alt); } .theme-swatch { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--color-border); } /* ---------------- Cards / forms ---------------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 22px; } .card + .card { margin-top: 16px; } .form-row { margin-bottom: 16px; } .form-row label { display: block; font-weight: 700; font-size: 0.88rem; margin-bottom: 6px; } .form-row input, .form-row textarea, .form-row select { width: 100%; padding: 11px 14px; border: 1.5px solid var(--color-border); border-radius: 10px; font-family: var(--font-body); font-size: 0.95rem; background: var(--color-surface-alt); color: var(--color-text); } .form-row textarea { min-height: 90px; resize: vertical; } .form-note { font-size: 0.8rem; color: var(--color-text-soft); margin-top: 4px; } .form-alert { padding: 13px 16px; border-radius: 10px; font-size: 0.9rem; margin-bottom: 18px; } .form-alert.success { background: rgba(111,207,151,0.12); border: 1px solid var(--color-success); color: var(--color-success); } .form-alert.error { background: rgba(241,113,113,0.12); border: 1px solid var(--color-danger); color: var(--color-danger); } .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { width: 100%; max-width: 420px; } .auth-card .logo { justify-content: center; margin-bottom: 20px; } .auth-card h1 { text-align: center; font-size: 1.6rem; } .auth-card .subtitle { text-align: center; color: var(--color-text-soft); margin-bottom: 24px; font-size: 0.92rem; } .name-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } /* ---------------- Feed / posts ---------------- */ .compose-card textarea { min-height: 70px; } .compose-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .post { display: flex; gap: 12px; } .post-body { flex: 1; } .post-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .post-author { font-weight: 700; } .post-tag-chip { font-size: 0.75rem; color: var(--color-periwinkle-soft); } .post-time { font-size: 0.78rem; color: var(--color-text-soft); } .post-text { white-space: pre-wrap; word-break: break-word; } .post-image { margin-top: 10px; border-radius: 10px; max-height: 420px; object-fit: cover; width: 100%; } .post-actions { display: flex; gap: 16px; margin-top: 12px; } .like-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; color: var(--color-text-soft); font-weight: 700; font-size: 0.85rem; } .like-btn.is-liked { color: var(--color-coral); } .like-btn svg { width: 18px; height: 18px; } .sponsored-post { border-color: var(--color-coral); background: linear-gradient(180deg, rgba(255,143,101,0.06), transparent); } .sponsored-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-coral); font-weight: 800; margin-bottom: 8px; display: block; } /* ---------------- Search / user rows ---------------- */ .user-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); } .user-row:last-child { border-bottom: none; } .user-row-info { flex: 1; } .user-row-name { font-weight: 700; } .user-row-tag { color: var(--color-text-soft); font-size: 0.85rem; } /* ---------------- Messages ---------------- */ .messages-layout { display: grid; grid-template-columns: 280px 1fr; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; min-height: 500px; } .conversations-list { border-right: 1px solid var(--color-border); background: var(--color-surface); overflow-y: auto; max-height: 640px; } .conversation-item { display: flex; gap: 10px; align-items: center; padding: 14px; border-bottom: 1px solid var(--color-border); } .conversation-item:hover, .conversation-item.active { background: var(--color-surface-alt); } .conversation-preview { font-size: 0.82rem; color: var(--color-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; } .unread-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--color-coral); flex-shrink: 0; } .chat-panel { display: flex; flex-direction: column; background: var(--color-bg); } .chat-header { padding: 14px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 10px; } .chat-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; max-height: 500px; } .chat-bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; font-size: 0.92rem; } .chat-bubble.mine { align-self: flex-end; background: linear-gradient(135deg, var(--color-coral), var(--color-periwinkle)); color: #12121C; } .chat-bubble.theirs { align-self: flex-start; background: var(--color-surface-alt); } .chat-input-row { display: flex; gap: 10px; padding: 14px; border-top: 1px solid var(--color-border); } .chat-input-row input { flex: 1; } .chat-empty { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--color-text-soft); text-align: center; padding: 40px; } /* ---------------- Profile ---------------- */ .profile-header { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .profile-header .name { font-size: 1.4rem; margin-bottom: 2px; } .profile-header .tag { color: var(--color-text-soft); } .profile-actions { margin-left: auto; display: flex; gap: 10px; } .empty-state { text-align: center; padding: 50px 20px; color: var(--color-text-soft); } /* ---------------- Responsive ---------------- */ @media (max-width: 760px) { .main-nav { display: none; } .nav-toggle { display: block; } .site-header.nav-open .main-nav { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 14px 20px; gap: 8px; } .messages-layout { grid-template-columns: 1fr; } .conversations-list { max-height: 220px; border-right: none; border-bottom: 1px solid var(--color-border); } .name-grid { grid-template-columns: 1fr; } .profile-header { flex-direction: column; align-items: flex-start; text-align: left; } .profile-actions { margin-left: 0; } }