Spaces:
Running
Running
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Shlonak — How Are You Today?</title> | |
| <!-- Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Lucide Icons --> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <style> | |
| /* ============================================================= | |
| SHLONAK — A WARM, CINEMATIC SOCIAL MOOD DASHBOARD | |
| ============================================================= */ | |
| /* ---- CSS Custom Properties ---- */ | |
| :root { | |
| /* Dark palette — warm neutrals with a sophisticated accent */ | |
| --bg: #1b1917; | |
| --bg-deep: #151310; | |
| --bg-card: #23201d; | |
| --bg-raised: #2c2824; | |
| --bg-hover: #35312c; | |
| /* Text */ | |
| --text: #f3eee9; | |
| --text-faded: #b5ada5; | |
| --text-muted: #7a736b; | |
| /* Accent — saffron / clay */ | |
| --accent: #c9986a; | |
| --accent-soft: rgba(201, 152, 106, 0.12); | |
| --accent-glow: rgba(201, 152, 106, 0.35); | |
| /* Functional */ | |
| --border: rgba(255,255,255,0.06); | |
| --border-subtle: rgba(255,255,255,0.035); | |
| --radius-sm: 10px; | |
| --radius-md: 18px; | |
| --radius-lg: 28px; | |
| --radius-xl: 40px; | |
| /* Typography */ | |
| --font-display: 'Cormorant Garamond', serif; | |
| --font-body: 'DM Sans', sans-serif; | |
| --font-arabic: 'Noto Naskh Arabic', serif; | |
| /* Spacing */ | |
| --space-xs: 6px; | |
| --space-sm: 10px; | |
| --space-md: 16px; | |
| --space-lg: 24px; | |
| --space-xl: 36px; | |
| --space-2xl: 56px; | |
| /* Shadows */ | |
| --shadow-card: 0 4px 24px rgba(0,0,0,0.3); | |
| --shadow-raised: 0 8px 40px rgba(0,0,0,0.35); | |
| --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.04); | |
| --shadow-glow: 0 0 30px var(--accent-glow); | |
| } | |
| /* ---- Reset & Base ---- */ | |
| *, | |
| *::before, | |
| *::after { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: var(--font-body); | |
| background: var(--bg); | |
| color: var(--text); | |
| min-height: 100vh; | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| ::selection { | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| } | |
| /* ---- Scrollbar ---- */ | |
| ::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--bg-hover); | |
| border-radius: 20px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--text-muted); | |
| } | |
| /* ---- Animations ---- */ | |
| @keyframes fadeUp { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes scaleIn { | |
| from { opacity: 0; transform: scale(0.92); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| @keyframes slideRight { | |
| from { opacity: 0; transform: translateX(-20px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes gentlePulse { | |
| 0%, 100% { opacity: 0.4; transform: scale(1); } | |
| 50% { opacity: 0.7; transform: scale(1.05); } | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-6px); } | |
| } | |
| @keyframes shimmer { | |
| 0% { background-position: -200% center; } | |
| 100% { background-position: 200% center; } | |
| } | |
| @keyframes dotBounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-4px); } | |
| } | |
| @keyframes ripple { | |
| 0% { transform: scale(0); opacity: 0.5; } | |
| 100% { transform: scale(4); opacity: 0; } | |
| } | |
| @keyframes heartbeat { | |
| 0%, 100% { transform: scale(1); } | |
| 25% { transform: scale(1.15); } | |
| 50% { transform: scale(1); } | |
| 75% { transform: scale(1.08); } | |
| } | |
| @keyframes sunGlow { | |
| 0%, 100% { box-shadow: 0 0 20px rgba(201,152,106,0.2), 0 0 60px rgba(201,152,106,0.06); } | |
| 50% { box-shadow: 0 0 30px rgba(201,152,106,0.3), 0 0 80px rgba(201,152,106,0.1); } | |
| } | |
| @keyframes confettiFall { | |
| 0% { transform: translateY(0) rotate(0deg); opacity: 1; } | |
| 100% { transform: translateY(400px) rotate(720deg); opacity: 0; } | |
| } | |
| .anim-fade-up { animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } | |
| .anim-fade-in { animation: fadeIn 0.5s ease forwards; } | |
| .anim-scale-in { animation: scaleIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; } | |
| .anim-slide-right { animation: slideRight 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; } | |
| .delay-1 { animation-delay: 0.1s; } | |
| .delay-2 { animation-delay: 0.2s; } | |
| .delay-3 { animation-delay: 0.3s; } | |
| .delay-4 { animation-delay: 0.4s; } | |
| .delay-5 { animation-delay: 0.5s; } | |
| .delay-6 { animation-delay: 0.6s; } | |
| /* ---- AMBIENT BACKGROUND ---- */ | |
| .ambient-canvas { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 0; | |
| overflow: hidden; | |
| pointer-events: none; | |
| } | |
| .ambient-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.12; | |
| pointer-events: none; | |
| } | |
| .orb-1 { | |
| width: 500px; height: 500px; | |
| top: -10%; left: -5%; | |
| background: var(--accent); | |
| animation: gentlePulse 8s ease-in-out infinite; | |
| } | |
| .orb-2 { | |
| width: 400px; height: 400px; | |
| bottom: -5%; right: -10%; | |
| background: #8b7355; | |
| animation: gentlePulse 10s ease-in-out infinite 2s; | |
| } | |
| .orb-3 { | |
| width: 300px; height: 300px; | |
| top: 40%; left: 60%; | |
| background: #6b5b4a; | |
| animation: gentlePulse 12s ease-in-out infinite 4s; | |
| } | |
| /* Noise texture overlay */ | |
| .noise-overlay { | |
| position: fixed; | |
| inset: 0; | |
| z-index: 1; | |
| opacity: 0.025; | |
| pointer-events: none; | |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); | |
| background-repeat: repeat; | |
| background-size: 256px; | |
| } | |
| /* ---- APP SHELL ---- */ | |
| .app-shell { | |
| position: relative; | |
| z-index: 2; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| /* ---- NAVBAR ---- */ | |
| .navbar { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| backdrop-filter: blur(20px) saturate(1.2); | |
| -webkit-backdrop-filter: blur(20px) saturate(1.2); | |
| background: rgba(27, 25, 23, 0.65); | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .navbar-inner { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 0 var(--space-lg); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 68px; | |
| } | |
| .nav-brand { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| } | |
| .nav-brand a { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| text-decoration: none; | |
| color: var(--text-faded); | |
| font-size: 0.78rem; | |
| font-weight: 400; | |
| letter-spacing: 0.02em; | |
| transition: color 0.3s; | |
| white-space: nowrap; | |
| } | |
| .nav-brand a:hover { | |
| color: var(--accent); | |
| } | |
| .nav-brand a svg { | |
| width: 14px; height: 14px; | |
| transition: transform 0.3s; | |
| } | |
| .nav-brand a:hover svg { | |
| transform: translateX(3px); | |
| } | |
| .logo-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| } | |
| .logo-icon { | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 12px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| display: grid; | |
| place-items: center; | |
| transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); | |
| } | |
| .logo-group:hover .logo-icon { | |
| background: var(--accent-soft); | |
| border-color: var(--accent); | |
| transform: rotate(-8deg); | |
| } | |
| .logo-icon svg { | |
| width: 18px; | |
| height: 18px; | |
| color: var(--accent); | |
| transition: all 0.4s; | |
| } | |
| .logo-group:hover .logo-icon svg { | |
| color: var(--accent); | |
| transform: rotate(8deg) scale(1.1); | |
| } | |
| .logo-text { | |
| font-family: var(--font-display); | |
| font-size: 1.5rem; | |
| font-weight: 500; | |
| color: var(--text); | |
| letter-spacing: -0.02em; | |
| line-height: 1; | |
| } | |
| .logo-text span { | |
| color: var(--text-muted); | |
| font-weight: 300; | |
| } | |
| .nav-right { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| } | |
| .nav-time { | |
| display: none; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| font-variant-numeric: tabular-nums; | |
| letter-spacing: 0.03em; | |
| } | |
| .nav-avatar { | |
| width: 38px; | |
| height: 38px; | |
| border-radius: 50%; | |
| background: var(--accent-soft); | |
| border: 2px solid var(--border); | |
| display: grid; | |
| place-items: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .nav-avatar::before { | |
| content: ''; | |
| position: absolute; | |
| inset: -2px; | |
| border-radius: 50%; | |
| border: 2px solid transparent; | |
| border-top-color: var(--accent); | |
| animation: spin 8s linear infinite; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .nav-avatar:hover::before { | |
| opacity: 1; | |
| } | |
| .nav-avatar:hover { | |
| border-color: var(--accent); | |
| box-shadow: 0 0 20px var(--accent-glow); | |
| } | |
| .nav-avatar svg { | |
| width: 18px; | |
| height: 18px; | |
| color: var(--accent); | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* ---- MAIN ---- */ | |
| main { | |
| flex: 1; | |
| max-width: 1100px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: var(--space-xl) var(--space-lg); | |
| } | |
| /* ---- HERO ---- */ | |
| .hero { | |
| text-align: center; | |
| padding: var(--space-2xl) 0 var(--space-xl); | |
| position: relative; | |
| } | |
| .hero-greeting-ar { | |
| font-family: var(--font-arabic); | |
| font-size: clamp(2.4rem, 5.5vw, 4.2rem); | |
| font-weight: 700; | |
| color: var(--text); | |
| line-height: 1.3; | |
| margin-bottom: var(--space-md); | |
| text-shadow: 0 0 60px var(--accent-glow); | |
| opacity: 0; | |
| animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) forwards; | |
| } | |
| .hero-greeting-ar .highlight { | |
| color: var(--accent); | |
| position: relative; | |
| } | |
| .hero-greeting-ar .highlight::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: var(--accent); | |
| border-radius: 2px; | |
| opacity: 0.4; | |
| } | |
| .hero-sub { | |
| font-family: var(--font-display); | |
| font-size: clamp(1.1rem, 2.2vw, 1.6rem); | |
| font-weight: 300; | |
| color: var(--text-faded); | |
| font-style: italic; | |
| letter-spacing: 0.02em; | |
| opacity: 0; | |
| animation: fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; | |
| } | |
| .hero-sub .name-highlight { | |
| color: var(--accent); | |
| font-weight: 400; | |
| transition: all 0.4s; | |
| cursor: default; | |
| } | |
| .hero-sub .name-highlight:hover { | |
| text-shadow: 0 0 20px var(--accent-glow); | |
| } | |
| .hero-divider { | |
| margin: var(--space-xl) auto; | |
| width: 60px; | |
| height: 2px; | |
| background: var(--border); | |
| border-radius: 2px; | |
| position: relative; | |
| opacity: 0; | |
| animation: fadeIn 0.6s 0.3s forwards; | |
| } | |
| .hero-divider::before { | |
| content: ''; | |
| position: absolute; | |
| top: -3px; left: 50%; transform: translateX(-50%); | |
| width: 8px; height: 8px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| opacity: 0.5; | |
| } | |
| /* ---- MOOD GRID ---- */ | |
| .mood-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: var(--space-md); | |
| margin-bottom: var(--space-xl); | |
| opacity: 0; | |
| animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.2s forwards; | |
| } | |
| .mood-card { | |
| position: relative; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); | |
| overflow: hidden; | |
| isolation: isolate; | |
| } | |
| .mood-card::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: var(--accent-soft); | |
| opacity: 0; | |
| transition: opacity 0.5s; | |
| z-index: 0; | |
| } | |
| .mood-card:hover::before { | |
| opacity: 1; | |
| } | |
| .mood-card.active { | |
| background: var(--accent-soft); | |
| border-color: rgba(201, 152, 106, 0.3); | |
| } | |
| .mood-card:hover { | |
| transform: translateY(-4px); | |
| border-color: rgba(201, 152, 106, 0.2); | |
| box-shadow: 0 12px 40px rgba(0,0,0,0.2), 0 0 40px var(--accent-glow); | |
| } | |
| .mood-card .mood-icon-wrap { | |
| position: relative; | |
| z-index: 1; | |
| width: 52px; | |
| height: 52px; | |
| border-radius: 16px; | |
| background: var(--bg-raised); | |
| border: 1px solid var(--border-subtle); | |
| display: grid; | |
| place-items: center; | |
| margin: 0 auto var(--space-sm); | |
| transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); | |
| } | |
| .mood-card:hover .mood-icon-wrap { | |
| background: var(--accent-soft); | |
| border-color: rgba(201, 152, 106, 0.3); | |
| transform: scale(1.08); | |
| box-shadow: 0 0 24px var(--accent-glow); | |
| } | |
| .mood-card.active .mood-icon-wrap { | |
| background: var(--accent-soft); | |
| border-color: rgba(201, 152, 106, 0.4); | |
| } | |
| .mood-card svg { | |
| width: 22px; | |
| height: 22px; | |
| color: var(--text-faded); | |
| transition: all 0.4s; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .mood-card:hover svg { | |
| color: var(--accent); | |
| } | |
| .mood-card.active svg { | |
| color: var(--accent); | |
| } | |
| .mood-card .mood-label { | |
| position: relative; | |
| z-index: 1; | |
| font-family: var(--font-display); | |
| font-size: 1.05rem; | |
| font-weight: 500; | |
| color: var(--text); | |
| transition: all 0.3s; | |
| } | |
| .mood-card .mood-label-ar { | |
| font-family: var(--font-arabic); | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| margin-top: 2px; | |
| transition: all 0.3s; | |
| } | |
| .mood-card:hover .mood-label, | |
| .mood-card.active .mood-label { | |
| color: var(--accent); | |
| } | |
| /* ---- STATUS SECTION ---- */ | |
| .status-section { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-xl); | |
| margin-bottom: var(--space-xl); | |
| opacity: 0; | |
| animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.3s forwards; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .status-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| .status-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: var(--space-lg); | |
| flex-wrap: wrap; | |
| gap: var(--space-md); | |
| } | |
| .status-title { | |
| font-family: var(--font-display); | |
| font-size: 1.5rem; | |
| font-weight: 400; | |
| color: var(--text); | |
| } | |
| .status-title .accent-dot { | |
| display: inline-block; | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| background: var(--accent); | |
| margin-left: 6px; | |
| vertical-align: middle; | |
| animation: dotBounce 2s ease-in-out infinite; | |
| } | |
| .live-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| background: var(--bg-deep); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: 100px; | |
| padding: 5px 14px; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| } | |
| .live-dot { | |
| width: 6px; height: 6px; | |
| border-radius: 50%; | |
| background: #5c9e6e; | |
| position: relative; | |
| } | |
| .live-dot::after { | |
| content: ''; | |
| position: absolute; | |
| inset: -3px; | |
| border-radius: 50%; | |
| border: 1px solid #5c9e6e; | |
| animation: gentlePulse 2s ease-in-out infinite; | |
| } | |
| .status-input-area { | |
| position: relative; | |
| margin-bottom: var(--space-md); | |
| } | |
| .status-textarea { | |
| width: 100%; | |
| background: var(--bg-deep); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-md) var(--space-lg); | |
| padding-right: 110px; | |
| color: var(--text); | |
| font-family: var(--font-body); | |
| font-size: 0.93rem; | |
| resize: none; | |
| outline: none; | |
| transition: all 0.4s; | |
| line-height: 1.7; | |
| min-height: 110px; | |
| } | |
| .status-textarea::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .status-textarea:focus { | |
| border-color: rgba(201, 152, 106, 0.3); | |
| background: var(--bg-raised); | |
| box-shadow: 0 0 0 4px var(--accent-soft); | |
| } | |
| .textarea-actions { | |
| position: absolute; | |
| bottom: var(--space-sm); | |
| right: var(--space-sm); | |
| display: flex; | |
| gap: var(--space-xs); | |
| } | |
| .textarea-action { | |
| width: 34px; height: 34px; | |
| border-radius: 10px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| display: grid; | |
| place-items: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .textarea-action:hover { | |
| background: var(--accent-soft); | |
| border-color: var(--accent); | |
| } | |
| .textarea-action svg { | |
| width: 14px; height: 14px; | |
| color: var(--text-faded); | |
| } | |
| .textarea-action:hover svg { | |
| color: var(--accent); | |
| } | |
| .status-actions { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: var(--space-md); | |
| } | |
| .status-emoji-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .emoji-btn { | |
| width: 34px; height: 34px; | |
| border-radius: 50%; | |
| background: var(--bg-deep); | |
| border: 1px solid var(--border); | |
| display: grid; | |
| place-items: center; | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| user-select: none; | |
| } | |
| .emoji-btn:hover { | |
| background: var(--accent-soft); | |
| border-color: var(--accent); | |
| transform: scale(1.15) rotate(5deg); | |
| } | |
| .emoji-btn.active { | |
| background: var(--accent-soft); | |
| border-color: var(--accent); | |
| box-shadow: 0 0 16px var(--accent-glow); | |
| } | |
| .status-submit { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 28px; | |
| border-radius: 100px; | |
| background: var(--accent); | |
| color: var(--bg-deep); | |
| border: none; | |
| font-family: var(--font-body); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| letter-spacing: 0.02em; | |
| cursor: pointer; | |
| transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .status-submit::after { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(255,255,255,0); | |
| transition: background 0.3s; | |
| } | |
| .status-submit:hover::after { | |
| background: rgba(255,255,255,0.08); | |
| } | |
| .status-submit:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 30px var(--accent-glow); | |
| } | |
| .status-submit:active { | |
| transform: translateY(0) scale(0.98); | |
| } | |
| .status-submit svg { | |
| width: 15px; height: 15px; | |
| transition: transform 0.3s; | |
| } | |
| .status-submit:hover svg { | |
| transform: translateX(3px); | |
| } | |
| /* ---- ACTIVITIES FEED ---- */ | |
| .section-label { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| margin-bottom: var(--space-lg); | |
| opacity: 0; | |
| animation: fadeIn 0.5s 0.4s forwards; | |
| } | |
| .section-label-line { | |
| flex: 1; | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| .section-label-text { | |
| font-family: var(--font-display); | |
| font-size: 0.95rem; | |
| color: var(--text-muted); | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| font-weight: 500; | |
| } | |
| .activities-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| } | |
| .activity-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-lg); | |
| transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); | |
| opacity: 0; | |
| animation: fadeUp 0.6s cubic-bezier(0.22,1,0.36,1) forwards; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .activity-card::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; top: 0; bottom: 0; | |
| width: 3px; | |
| background: var(--accent); | |
| opacity: 0; | |
| transition: opacity 0.4s; | |
| border-radius: 0 3px 3px 0; | |
| } | |
| .activity-card:hover::before { | |
| opacity: 0.5; | |
| } | |
| .activity-card:hover { | |
| border-color: rgba(201, 152, 106, 0.15); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow-raised); | |
| } | |
| .activity-header { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: var(--space-md); | |
| margin-bottom: var(--space-sm); | |
| } | |
| .activity-avatar { | |
| width: 44px; | |
| height: 44px; | |
| border-radius: 14px; | |
| background: var(--bg-raised); | |
| border: 1px solid var(--border-subtle); | |
| display: grid; | |
| place-items: center; | |
| flex-shrink: 0; | |
| transition: all 0.3s; | |
| } | |
| .activity-card:hover .activity-avatar { | |
| border-color: rgba(201, 152, 106, 0.2); | |
| box-shadow: 0 0 16px var(--accent-glow); | |
| } | |
| .activity-avatar svg { | |
| width: 20px; height: 20px; | |
| color: var(--text-muted); | |
| } | |
| .activity-user-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .activity-name { | |
| font-family: var(--font-body); | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| color: var(--text); | |
| margin-bottom: 2px; | |
| } | |
| .activity-time { | |
| font-size: 0.72rem; | |
| color: var(--text-muted); | |
| letter-spacing: 0.02em; | |
| } | |
| .activity-body { | |
| margin-left: 60px; | |
| color: var(--text-faded); | |
| font-size: 0.88rem; | |
| line-height: 1.7; | |
| word-break: break-word; | |
| } | |
| .activity-body .body-highlight { | |
| color: var(--text); | |
| font-weight: 500; | |
| } | |
| .activity-footer { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-md); | |
| margin-top: var(--space-md); | |
| margin-left: 60px; | |
| } | |
| .activity-action { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 0.75rem; | |
| color: var(--text-muted); | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| padding: 4px 10px; | |
| border-radius: 8px; | |
| user-select: none; | |
| } | |
| .activity-action:hover { | |
| background: var(--accent-soft); | |
| color: var(--accent); | |
| } | |
| .activity-action.liked { | |
| color: #c16a6a; | |
| } | |
| .activity-action.liked:hover { | |
| background: rgba(193, 106, 106, 0.08); | |
| } | |
| .activity-action svg { | |
| width: 14px; height: 14px; | |
| transition: transform 0.3s; | |
| } | |
| .activity-action:hover svg { | |
| transform: scale(1.15); | |
| } | |
| .activity-action.liked svg { | |
| animation: heartbeat 0.6s ease; | |
| color: #c16a6a; | |
| } | |
| /* ---- PERSONAL REPLY ---- */ | |
| .reply-section { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-xl); | |
| margin-bottom: var(--space-xl); | |
| opacity: 0; | |
| animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.45s forwards; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .reply-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| .reply-header { | |
| font-family: var(--font-display); | |
| font-size: 1.4rem; | |
| font-weight: 400; | |
| color: var(--text); | |
| margin-bottom: var(--space-md); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .reply-header svg { | |
| width: 20px; height: 20px; | |
| color: var(--accent); | |
| } | |
| .reply-quote { | |
| font-family: var(--font-arabic); | |
| font-size: 1.15rem; | |
| color: var(--text-faded); | |
| line-height: 2; | |
| text-align: right; | |
| margin-bottom: var(--space-lg); | |
| padding: var(--space-md) var(--space-lg); | |
| background: var(--bg-deep); | |
| border-radius: var(--radius-sm); | |
| border-right: 2px solid var(--accent); | |
| opacity: 0.85; | |
| } | |
| .reply-input-wrap { | |
| position: relative; | |
| } | |
| .reply-input { | |
| width: 100%; | |
| background: var(--bg-deep); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-md) var(--space-lg); | |
| padding-right: 60px; | |
| color: var(--text); | |
| font-family: var(--font-body); | |
| font-size: 0.93rem; | |
| outline: none; | |
| transition: all 0.4s; | |
| min-height: 60px; | |
| } | |
| .reply-input::placeholder { | |
| color: var(--text-muted); | |
| } | |
| .reply-input:focus { | |
| border-color: rgba(201, 152, 106, 0.3); | |
| box-shadow: 0 0 0 4px var(--accent-soft); | |
| } | |
| .reply-send { | |
| position: absolute; | |
| right: var(--space-sm); | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 38px; height: 38px; | |
| border-radius: 10px; | |
| background: var(--accent); | |
| border: none; | |
| display: grid; | |
| place-items: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .reply-send:hover { | |
| transform: translateY(-50%) scale(1.05); | |
| box-shadow: 0 4px 16px var(--accent-glow); | |
| } | |
| .reply-send:active { | |
| transform: translateY(-50%) scale(0.95); | |
| } | |
| .reply-send svg { | |
| width: 16px; height: 16px; | |
| color: var(--bg-deep); | |
| } | |
| .replies-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-md); | |
| margin-top: var(--space-lg); | |
| } | |
| .reply-item { | |
| display: flex; | |
| gap: var(--space-md); | |
| align-items: flex-start; | |
| padding: var(--space-md); | |
| background: var(--bg-deep); | |
| border-radius: var(--radius-sm); | |
| border: 1px solid var(--border-subtle); | |
| transition: all 0.3s; | |
| animation: fadeUp 0.4s ease forwards; | |
| } | |
| .reply-item:hover { | |
| border-color: var(--border); | |
| background: var(--bg-raised); | |
| } | |
| .reply-avatar { | |
| width: 36px; height: 36px; | |
| border-radius: 12px; | |
| background: var(--bg-raised); | |
| border: 1px solid var(--border-subtle); | |
| display: grid; | |
| place-items: center; | |
| flex-shrink: 0; | |
| } | |
| .reply-avatar svg { | |
| width: 16px; height: 16px; | |
| color: var(--text-muted); | |
| } | |
| .reply-body { | |
| flex: 1; | |
| } | |
| .reply-name { | |
| font-size: 0.82rem; | |
| font-weight: 500; | |
| color: var(--text); | |
| margin-bottom: 2px; | |
| } | |
| .reply-text { | |
| font-size: 0.85rem; | |
| color: var(--text-faded); | |
| line-height: 1.6; | |
| } | |
| /* ---- WEATHER STRIP ---- */ | |
| .weather-strip { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-sm); | |
| overflow-x: auto; | |
| padding: 4px 0 12px; | |
| -webkit-overflow-scrolling: touch; | |
| scrollbar-width: none; | |
| margin-bottom: var(--space-xl); | |
| } | |
| .weather-strip::-webkit-scrollbar { display: none; } | |
| .weather-hour { | |
| flex-shrink: 0; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-md); | |
| padding: 14px 20px; | |
| min-width: 90px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.4s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .weather-hour::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; left: 50%; transform: translateX(-50%); | |
| width: 0; height: 2px; | |
| background: var(--accent); | |
| transition: width 0.4s; | |
| border-radius: 2px; | |
| } | |
| .weather-hour:hover::after, | |
| .weather-hour.active::after { | |
| width: 40%; | |
| } | |
| .weather-hour:hover { | |
| border-color: rgba(201, 152, 106, 0.2); | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 24px rgba(0,0,0,0.15); | |
| } | |
| .weather-hour.active { | |
| background: var(--accent-soft); | |
| border-color: rgba(201, 152, 106, 0.3); | |
| } | |
| .weather-icon { | |
| width: 28px; height: 28px; | |
| margin: 0 auto 6px; | |
| display: grid; | |
| place-items: center; | |
| position: relative; | |
| } | |
| .weather-icon svg { | |
| width: 22px; height: 22px; | |
| color: var(--text-muted); | |
| transition: all 0.3s; | |
| } | |
| .weather-hour:hover .weather-icon svg, | |
| .weather-hour.active .weather-icon svg { | |
| color: var(--accent); | |
| transform: scale(1.1); | |
| } | |
| .weather-time { | |
| font-size: 0.68rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 3px; | |
| } | |
| .weather-temp { | |
| font-family: var(--font-display); | |
| font-size: 1.2rem; | |
| font-weight: 500; | |
| color: var(--text); | |
| } | |
| /* ---- QUOTE CARD ---- */ | |
| .quote-section { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: var(--radius-lg); | |
| padding: var(--space-xl); | |
| margin-bottom: var(--space-xl); | |
| opacity: 0; | |
| animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.5s forwards; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .quote-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 1px; | |
| background: var(--border); | |
| } | |
| .quote-deco { | |
| font-family: var(--font-display); | |
| font-size: 6rem; | |
| line-height: 1; | |
| color: var(--accent); | |
| opacity: 0.06; | |
| position: absolute; | |
| top: -10px; | |
| right: 20px; | |
| user-select: none; | |
| pointer-events: none; | |
| } | |
| .quote-content { | |
| font-family: var(--font-arabic); | |
| font-size: 1.35rem; | |
| font-weight: 500; | |
| color: var(--text-faded); | |
| line-height: 2; | |
| text-align: right; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .quote-author { | |
| margin-top: var(--space-md); | |
| font-family: var(--font-display); | |
| font-style: italic; | |
| font-size: 0.95rem; | |
| color: var(--text-muted); | |
| text-align: right; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .quote-author::before { | |
| content: '—'; | |
| margin-right: 8px; | |
| color: var(--accent); | |
| opacity: 0.5; | |
| } | |
| /* ---- FOOTER ---- */ | |
| .page-footer { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: var(--space-xl) var(--space-lg) var(--space-2xl); | |
| text-align: center; | |
| } | |
| .footer-line { | |
| height: 1px; | |
| background: var(--border); | |
| margin-bottom: var(--space-lg); | |
| max-width: 200px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .footer-text { | |
| font-size: 0.78rem |