/* main.css - Simple Social SPA Styles */ /* ============== CSS RESET ============== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; line-height: 1.5; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background: var(--color-bg-secondary); color: var(--color-text); min-height: 100vh; } /* ============== CSS VARIABLES ============== */ :root { --color-primary: #374151; --color-primary-hover: #1f2937; --color-secondary: #6b7280; --color-success: #22c55e; --color-error: #ef4444; --color-warning: #f59e0b; --color-bg: #ffffff; --color-bg-secondary: #f9fafb; --color-text: #1f2937; --color-text-secondary: #6b7280; --color-border: #e5e7eb; --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --border-radius: 8px; --border-radius-sm: 4px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --max-width: 600px; } /* Per-user theme flag (Settings > Appearance), set via data-theme on by Store.applyTheme(). Adding a new theme is just another block like this one, overriding the same variable names with different values. */ :root[data-theme="dark"] { --color-primary: #9ca3af; --color-primary-hover: #d1d5db; --color-secondary: #6b7280; --color-bg: #1f2937; --color-bg-secondary: #111827; --color-text: #f3f4f6; --color-text-secondary: #9ca3af; --color-border: #374151; } :root[data-theme="red"] { --color-primary: #c1483f; --color-primary-hover: #a83a32; --color-secondary: #a83a32; --color-bg: #f8e8e4; --color-bg-secondary: #f0d9d4; --color-text: #3a1f1d; --color-text-secondary: #7a4a44; --color-border: #dba9a1; } :root[data-theme="blue"] { --color-primary: #0ea5e9; --color-primary-hover: #0c8bc9; --color-secondary: #0c8bc9; --color-bg: #e3f7ff; --color-bg-secondary: #b9e4fb; --color-text: #123a52; --color-text-secondary: #3d6b86; --color-border: #9ddcf5; } /* Classic terminal green-on-black, but with the rest of the ANSI 16-color palette spread across the site's existing semantic slots (success/error/ warning/secondary) instead of everything being one color. */ :root[data-theme="hacker"] { --color-primary: #00d7d7; --color-primary-hover: #00ffff; --color-secondary: #d633d6; --color-success: #00d700; --color-error: #d70000; --color-warning: #d7d700; --color-bg: #1a1a1a; --color-bg-secondary: #0c0c0c; --color-text: #00ff00; --color-text-secondary: #808080; --color-border: #444444; } /* ============== LAYOUT ============== */ #app { min-height: 100vh; display: flex; flex-direction: column; } header { background: var(--color-bg); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 100; } .header-content { max-width: 1000px; margin: 0 auto; padding: var(--spacing-md); display: flex; justify-content: space-between; align-items: center; } .logo { font-weight: 700; font-size: 1.25rem; color: var(--color-primary); text-decoration: none; } header nav { display: flex; gap: var(--spacing-md); align-items: center; } header nav a { color: var(--color-text-secondary); text-decoration: none; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm); transition: color 0.2s, background 0.2s; } header nav a:hover { color: var(--color-text); background: var(--color-bg-secondary); } #main { flex: 1; padding: var(--spacing-xl); } .page-container { max-width: var(--max-width); margin: 0 auto; } footer { background: var(--color-bg); border-top: 1px solid var(--color-border); padding: var(--spacing-md); text-align: center; font-size: 0.875rem; color: var(--color-text-secondary); } /* ============== BADGE ============== */ .badge { background: var(--color-error); color: white; font-size: 0.75rem; font-weight: 600; border-radius: 9999px; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; vertical-align: middle; } /* ============== BUTTONS ============== */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--spacing-sm) var(--spacing-md); font-size: 0.875rem; font-weight: 500; border-radius: var(--border-radius); border: none; cursor: pointer; transition: background 0.2s, opacity 0.2s; text-decoration: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--color-primary); color: white; } .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); } .btn-secondary { background: var(--color-secondary); color: white; } .btn-ghost { background: transparent; color: var(--color-text-secondary); } .btn-ghost:hover:not(:disabled) { background: var(--color-bg-secondary); color: var(--color-text); } .load-more-container { text-align: center; margin: var(--spacing-md) 0; } .btn-danger { background: var(--color-error); color: white; } .btn-danger:hover:not(:disabled) { background: #dc2626; } .btn-like { background: transparent; color: var(--color-text-secondary); font-size: 0.875rem; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm); } .btn-like:hover { background: var(--color-bg-secondary); } .btn-like.liked { color: var(--color-error); } .btn-delete-post, .btn-delete-comment { background: transparent; color: var(--color-error); border: none; cursor: pointer; font-size: 0.75rem; padding: var(--spacing-xs); } /* ============== FORMS ============== */ .form-card { background: var(--color-bg); padding: var(--spacing-xl); border-radius: var(--border-radius); box-shadow: var(--shadow-md); } .form-card h1 { font-size: 1.5rem; margin-bottom: var(--spacing-lg); text-align: center; } .form-group { margin-bottom: var(--spacing-md); } .form-group label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: var(--spacing-xs); color: var(--color-text); } .form-input, .form-textarea { width: 100%; padding: var(--spacing-sm) var(--spacing-md); font-size: 1rem; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--border-radius); transition: border-color 0.2s, box-shadow 0.2s; } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .form-textarea { min-height: 100px; resize: vertical; } .form-footer { margin-top: var(--spacing-lg); text-align: center; font-size: 0.875rem; display: flex; flex-direction: column; gap: var(--spacing-sm); } .form-footer a { color: var(--color-primary); text-decoration: none; } .form-footer a:hover { text-decoration: underline; } /* ============== MESSAGES ============== */ .error-message { padding: var(--spacing-md); margin-bottom: var(--spacing-md); background: #fef2f2; color: var(--color-error); border-radius: var(--border-radius); font-size: 0.875rem; } .success-message { padding: var(--spacing-md); margin-bottom: var(--spacing-md); background: #f0fdf4; color: var(--color-success); border-radius: var(--border-radius); font-size: 0.875rem; } /* ============== POST CARD ============== */ .post-card { background: var(--color-bg); padding: var(--spacing-lg); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); margin-bottom: var(--spacing-md); } .post-header { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .post-user, .comment-user, .like-user-email, .user-email, .search-dropdown-item, .notification-actor { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .post-user { font-weight: 600; color: var(--color-text); text-decoration: none; } .post-user:hover { text-decoration: underline; } .post-time, .btn-delete-post, .comment-time, .btn-delete-comment, .like-user-time, .user-dropdown-item .user-time, .notification-time { flex-shrink: 0; } .post-time { font-size: 0.75rem; color: var(--color-text-secondary); } .post-body { margin-bottom: var(--spacing-md); line-height: 1.6; word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } #post-container .post-body { display: block; -webkit-line-clamp: unset; overflow: visible; } .post-body.expanded { display: block; -webkit-line-clamp: unset; overflow: visible; } .post-show-more { margin: var(--spacing-sm) 0; } .post-footer { display: flex; gap: var(--spacing-md); align-items: center; } .btn-comments { color: var(--color-text-secondary); text-decoration: none; font-size: 0.875rem; } .btn-comments:hover { color: var(--color-primary); } .comment-count { color: var(--color-text-secondary); font-size: 0.875rem; text-decoration: none; } .like-section { position: relative; display: inline-flex; align-items: center; } .btn-like-count { background: none; border: none; color: var(--color-text-secondary); font-size: 0.875rem; cursor: pointer; padding: 2px 4px; } .btn-like-count:hover { color: var(--color-primary); } .like-dropdown { position: absolute; bottom: 100%; left: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius); box-shadow: var(--shadow-md); min-width: 200px; max-width: 320px; max-height: 200px; overflow-y: auto; z-index: 10; } .like-dropdown-item { display: flex; justify-content: space-between; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); } .like-dropdown-item:last-child { border-bottom: none; } .like-dropdown-item:hover { background: var(--color-bg-secondary); } .like-user-email { color: var(--color-primary); font-size: 0.875rem; } .like-user-time { color: var(--color-text-secondary); font-size: 0.75rem; } /* ============== COMMENTS ============== */ .comment { background: var(--color-bg); padding: var(--spacing-md); border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-sm); } .comment-header { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-xs); } .comment-user { font-weight: 500; color: var(--color-text); text-decoration: none; } .comment-user:hover { text-decoration: underline; } .comment-time { font-size: 0.75rem; color: var(--color-text-secondary); } .comment-body { font-size: 0.875rem; line-height: 1.5; } .comment-form { margin-bottom: var(--spacing-lg); } .comment-form textarea { width: 100%; min-height: 80px; padding: var(--spacing-sm); margin-bottom: var(--spacing-sm); background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); resize: vertical; font-family: inherit; } /* ============== NOTIFICATIONS ============== */ .notification-item { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); background: var(--color-bg); border-radius: var(--border-radius-sm); margin-bottom: var(--spacing-sm); transition: background 0.2s; } .notification-item:hover { background: var(--color-bg-secondary); } .notification-content { display: flex; align-items: center; gap: var(--spacing-sm); text-decoration: none; color: var(--color-text); flex: 1; min-width: 0; } .notification-icon { font-size: 1.25rem; } .notification-text { font-size: 0.875rem; } .notification-time { font-size: 0.75rem; color: var(--color-text-secondary); } .notification-group { margin-bottom: var(--spacing-lg); } .notification-group h3 { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: var(--spacing-sm); text-transform: uppercase; letter-spacing: 0.05em; } .notifications-header { margin-bottom: var(--spacing-lg); } .notification-text-container { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .notification-actor { display: inline-block; max-width: 100%; vertical-align: bottom; } .notification-post-preview { font-size: 0.8rem; color: var(--color-text-secondary); font-style: italic; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============== USER RESULTS ============== */ .user-result { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: var(--color-bg); border-radius: var(--border-radius); margin-bottom: var(--spacing-sm); } .user-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1.25rem; flex-shrink: 0; } .user-info { flex: 1; min-width: 0; } .user-email { display: block; font-weight: 500; color: var(--color-text); text-decoration: none; } .user-email:hover { text-decoration: underline; } .user-date { font-size: 0.75rem; color: var(--color-text-secondary); } .btn-follow { padding: var(--spacing-xs) var(--spacing-md); font-size: 0.875rem; border-radius: var(--border-radius); border: 1px solid var(--color-primary); background: transparent; color: var(--color-primary); cursor: pointer; transition: background 0.2s, color 0.2s; } .btn-follow:hover { background: var(--color-primary); color: white; } .btn-follow.following { background: var(--color-primary); color: white; } .you-label { font-size: 0.75rem; color: var(--color-text-secondary); } /* ============== PROFILE ============== */ .profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--color-primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 2rem; margin-bottom: var(--spacing-md); } #profile-header { text-align: center; margin-bottom: var(--spacing-lg); position: relative; } #profile-actions { text-align: center; margin-bottom: var(--spacing-lg); } .profile-stats { display: flex; justify-content: center; gap: var(--spacing-lg); margin-top: var(--spacing-md); } .btn-stat { background: none; border: none; cursor: pointer; color: var(--color-text); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm); transition: background 0.2s; } .btn-stat:hover { background: var(--color-bg-secondary); } .btn-stat .stat-count { font-weight: 600; margin-right: 4px; } .btn-stat .stat-label { color: var(--color-text-secondary); } .user-dropdown { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius); box-shadow: var(--shadow-md); min-width: 250px; max-height: 300px; overflow-y: auto; z-index: 10; margin-top: var(--spacing-xs); } .user-dropdown-item { display: flex; justify-content: space-between; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); } .user-dropdown-item:last-child { border-bottom: none; } .user-dropdown-item:hover { background: var(--color-bg-secondary); } .user-dropdown-item .user-email { font-size: 0.875rem; } .user-dropdown-item .user-time { font-size: 0.75rem; color: var(--color-text-secondary); } /* ============== FEED / COMPOSER ============== */ .composer { background: var(--color-bg); padding: var(--spacing-lg); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); margin-bottom: var(--spacing-lg); } .composer textarea { width: 100%; min-height: 80px; padding: var(--spacing-sm); background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--border-radius-sm); resize: vertical; font-family: inherit; } .composer-note { font-size: 0.8125rem; color: var(--color-text-secondary); margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); line-height: 1.5; } .composer-note code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .composer-actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--spacing-sm); } #char-count { font-size: 0.75rem; color: var(--color-text-secondary); } /* ============== SETTINGS ============== */ .settings-section { background: var(--color-bg); padding: var(--spacing-xl); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); margin-bottom: var(--spacing-lg); } .settings-section h2 { font-size: 1.25rem; margin-bottom: var(--spacing-md); } .warning-text { color: var(--color-error); font-size: 0.875rem; margin-bottom: var(--spacing-lg); } .settings-note { color: var(--color-text-secondary); font-size: 0.875rem; margin-bottom: var(--spacing-md); } .settings-links { list-style: none; display: flex; flex-direction: column; gap: var(--spacing-sm); } .settings-links a { color: var(--color-primary); text-decoration: none; } .settings-links a:hover { text-decoration: underline; } /* ============== UTILITIES ============== */ .hidden { display: none !important; } .loading { text-align: center; padding: var(--spacing-xl); color: var(--color-text-secondary); } .back-link { margin-bottom: var(--spacing-lg); } .search-form { margin-bottom: var(--spacing-lg); } .search-form input { flex: 1; padding: var(--spacing-sm) var(--spacing-md); background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--border-radius); font-size: 1rem; width: 100%; } .search-section { position: relative; margin-bottom: var(--spacing-lg); } .search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--border-radius); box-shadow: var(--shadow-md); z-index: 10; max-height: 200px; overflow-y: auto; } .search-dropdown-item { display: block; padding: var(--spacing-sm) var(--spacing-md); color: var(--color-text); text-decoration: none; } .search-dropdown-item:hover { background: var(--color-bg-secondary); } .search-dropdown-empty { padding: var(--spacing-sm) var(--spacing-md); color: var(--color-text-secondary); font-size: 0.875rem; } .users-list { display: flex; flex-direction: column; gap: var(--spacing-sm); } .search-hint { text-align: center; color: var(--color-text-secondary); padding: var(--spacing-xl); } .step-info { font-size: 0.875rem; color: var(--color-text-secondary); margin-bottom: var(--spacing-md); text-align: center; } .requirements { font-size: 0.75rem; color: var(--color-text-secondary); margin-top: var(--spacing-xs); } .requirements div { display: flex; align-items: center; gap: var(--spacing-xs); } .requirements div::before { content: '○'; } .requirements div.met::before { content: '●'; color: var(--color-success); } .requirements div.unmet::before { color: var(--color-error); } /* ============== HAND TOGGLE ============== */ /* Left | switch | Right. The checkbox stays a real (hidden) checkbox so the words can highlight off :checked without any JS. */ .hand-toggle { display: flex; align-items: center; gap: var(--spacing-md); } .hand-toggle-input { position: absolute; opacity: 0; pointer-events: none; } .hand-toggle-word { font-size: 0.875rem; color: var(--color-text-secondary); } .hand-toggle-input:not(:checked) ~ .hand-left, .hand-toggle-input:checked ~ .hand-right { color: var(--color-text); font-weight: 600; } /* Neither end is "off", so the track keeps its colour in both positions. */ .hand-toggle-switch { position: relative; width: 52px; height: 28px; flex-shrink: 0; border-radius: 999px; background: var(--color-primary); cursor: pointer; } .hand-toggle-switch span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-bg); box-shadow: var(--shadow-sm); transition: transform 0.2s; } .hand-toggle-input:checked ~ .hand-toggle-switch span { transform: translateX(24px); } /* ============== SCROLL TO TOP ============== */ /* Bottom corner opposite the thumb bubble, so the two never overlap. Below the bubble's z-index, above ordinary content. */ .scroll-top-btn { position: fixed; bottom: 24px; left: 20px; width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--color-primary); color: white; font-size: 1.25rem; line-height: 1; box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 400; } .scroll-top-btn.visible { opacity: 1; pointer-events: auto; } /* Left-handed moves the bubble to this corner, so the button takes the other. */ .scroll-top-btn.scroll-top-right { left: auto; right: 20px; } /* ============== THUMB NAV ============== */ /* Bottom-right corner bubble menu. (hover: none) + (pointer: coarse) targets actual touchscreens, not a desktop browser window that's just been made narrow -- a shrunk mouse-driven window still reports pointer: fine. */ #thumb-nav { display: none; position: fixed; bottom: 24px; right: 20px; z-index: 500; } @media (hover: none) and (pointer: coarse) { #thumb-nav { display: block; } /* The bubble replaces the header's links rather than doubling up with them. Only the logged-in nav carries #main-nav, so the logged-out header keeps its links -- there's no bubble to fall back on there. */ #main-nav { display: none; } } .thumb-nav-toggle { position: relative; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--color-primary); box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; z-index: 2; } .thumb-nav-toggle span { display: block; width: 22px; height: 2px; background: white; margin: 3px 0; transition: transform 0.25s, opacity 0.25s; } #thumb-nav.open .thumb-nav-toggle span:nth-child(1) { transform: translateY(5px) rotate(45deg); } #thumb-nav.open .thumb-nav-toggle span:nth-child(2) { opacity: 0; } #thumb-nav.open .thumb-nav-toggle span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* Sits on the closed bubble, since that's the only part of this menu visible most of the time. Above the toggle's own z-index, and click-through so it can't eat a tap meant for the button underneath. Once the menu is open the Notifications item carries the count instead. */ .thumb-nav-badge { position: absolute; top: -2px; right: -2px; z-index: 3; border: 2px solid var(--color-bg); pointer-events: none; } #thumb-nav.open .thumb-nav-badge { display: none; } /* On the dot's inner side, away from the label. Counter-rotated by the item's own --rot so the number stays upright while its dot sits on the arc. */ .thumb-nav-item-badge { position: absolute; top: -24px; left: 4px; z-index: 2; transform: rotate(calc(-1 * var(--rot))); border: 2px solid var(--color-bg); pointer-events: none; } .thumb-nav-items { position: absolute; bottom: 0; right: 0; width: 56px; height: 56px; } /* Each item is a zero-size anchor point sitting at the toggle's own center. On open it translates out to its point on the arc (--tx/--ty, computed in header.js) and rotates by --rot, which swings its label around to stream straight outward from the center. Because the box is zero-size, both the rotation and the open/close scale pivot on the dot, so the dot stays put on the arc and only the flag swings. */ .thumb-nav-item { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: translate(0, 0) rotate(var(--rot)) scale(0); opacity: 0; pointer-events: none; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; text-decoration: none; } #thumb-nav.open .thumb-nav-item { transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1); opacity: 1; pointer-events: auto; } .thumb-nav-dot { position: absolute; top: -17px; left: -17px; width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); box-shadow: var(--shadow-sm); } /* The "flag": hangs off the dot's left edge and overlaps it slightly so the two read as one piece -- a banner on a flagpole ball. It sits above the dot so the end of the word can't disappear behind it; both being --color-primary, the overlap is invisible either way. */ .thumb-nav-label { position: absolute; top: -13px; right: -8px; z-index: 1; height: 26px; line-height: 26px; background: var(--color-primary); color: white; font-size: 0.75rem; font-weight: 600; white-space: nowrap; padding: 0 16px 0 12px; border-radius: 999px 0 0 999px; } /* Left-handed: the same menu in the other corner. header.js flips the arc and the label rotations; these flip everything that's pinned to a side. */ #thumb-nav.thumb-nav-left { right: auto; left: 20px; } #thumb-nav.thumb-nav-left .thumb-nav-badge { right: auto; left: -2px; } .thumb-nav-left .thumb-nav-item-badge { left: auto; right: 4px; } .thumb-nav-left .thumb-nav-label { right: auto; left: -8px; padding: 0 12px 0 16px; border-radius: 0 999px 999px 0; } /* ============== RESPONSIVE ============== */ @media (max-width: 768px) { #main { padding: var(--spacing-md); } .header-content { flex-direction: column; gap: var(--spacing-sm); } header nav { flex-wrap: wrap; justify-content: center; } .form-card { padding: var(--spacing-lg); } .post-card { padding: var(--spacing-md); } } @media (max-width: 480px) { html { font-size: 14px; } .header-content { padding: var(--spacing-sm); } header nav { gap: var(--spacing-sm); } .badge { position: absolute; top: -4px; right: -4px; } } /* ============== MEDIA UPLOAD ============== */ .media-upload-section { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); margin: var(--spacing-md) 0; padding: var(--spacing-md); background: var(--color-bg-secondary); border-radius: var(--border-radius); } .media-upload-buttons { display: flex; gap: var(--spacing-md); justify-content: center; flex-wrap: wrap; } .media-upload-note { font-size: 0.8125rem; color: var(--color-text-secondary); } /* Reserves its line so messages appearing and clearing don't shift the buttons above them. */ .media-upload-status { font-size: 0.875rem; color: var(--color-text-secondary); min-height: 1.25rem; text-align: center; } .media-preview { margin: var(--spacing-md) 0; } .media-preview-item { position: relative; display: inline-block; max-width: 100%; border-radius: var(--border-radius); } .spinner { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; border: 2px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spinner-rotate 0.7s linear infinite; } @keyframes spinner-rotate { to { transform: rotate(360deg); } } .media-preview-loading { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-md); background: var(--color-bg-secondary); border-radius: var(--border-radius); color: var(--color-text-secondary); font-size: 0.875rem; } .media-preview-item img, .media-preview-item video { max-width: 100%; max-height: 300px; display: block; border-radius: var(--border-radius); } /* Block, not the inline-block the image/video previews use: those shrink-wrap to the media's own dimensions, but an