/* ------------------------------------------------------------------------- TradeSkills ZA - Global Design System Plain CSS only. Theme state is controlled by the .dark class on . ------------------------------------------------------------------------- */ /* -- Section 1: CSS Custom Properties -- */ :root { --bg: #FAFAFA; --fg: #000000; --card: #FFFFFF; --card-fg: #000000; --border: #EBEBEB; --muted: #F7F7F7; --muted-fg: #6B6B6B; --input: #F0F0F0; --primary: #000000; --primary-fg: #FFFFFF; --secondary: #F0F0F0; --secondary-fg: #000000; --destructive: #E5484D; --radius: 0.5rem; --shadow-sm: 0 1px 2px rgba(0,0,0,0.08); --shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08); --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); --transition: 0.15s ease; } html.dark { --bg: #000000; --fg: #FFFFFF; --card: #1C1C1C; --card-fg: #FFFFFF; --border: #2E2E2E; --muted: #262626; --muted-fg: #A1A1A1; --input: #2E2E2E; --primary: #FFFFFF; --primary-fg: #000000; --secondary: #1C1C1C; --secondary-fg: #FFFFFF; --destructive: #F2555A; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3); } /* -- Section 2: Base & Reset -- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--bg); color: var(--fg); display: flex; flex-direction: column; font-family: 'Geist', sans-serif; font-size: 15px; line-height: 1.6; min-height: 100vh; } .nav ul, .nav ol, .navbar-nav, .nav-pills, .nav-tabs, .footer-links { list-style: none; margin: 0; padding-left: 0; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } img { display: block; height: auto; max-width: 100%; } ::selection { background: var(--fg); color: var(--bg); } @media (prefers-reduced-motion: no-preference) { body { transition: background-color var(--transition), color var(--transition); } } /* -- Section 3: Typography -- */ .text-muted { color: var(--muted-fg) !important; } .text-muted-2 { color: var(--muted-fg); } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .lead { color: var(--muted-fg); font-size: 1.1rem; font-weight: 400; } .section-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .section-subtitle { color: var(--muted-fg); font-size: 0.95rem; margin-bottom: 2rem; } /* -- Section 4: Layout & Containers -- */ .page-wrapper { display: flex; flex-direction: column; min-height: 100vh; } main, .site-main { flex: 1; } .section-padding { padding: 5rem 0; } .section { padding: 4rem 0; } .section-padding-sm { padding: 3rem 0; } .container { max-width: 1280px; } /* -- Section 5: Navbar -- */ .navbar, .site-navbar { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background-color: var(--card); border-bottom: 1px solid var(--border); height: 60px; padding: 0 1.5rem; position: sticky; top: 0; z-index: 1030; } .navbar-brand { color: var(--fg); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; } .navbar-brand:hover { color: var(--fg); text-decoration: none; } .brand-mark { color: var(--fg); } .brand-accent { color: var(--muted-fg); } .nav-link, .site-navbar .nav-link { color: var(--muted-fg); font-size: 0.9rem; font-weight: 500; padding: 0 0.75rem; } .nav-link:hover, .site-navbar .nav-link:hover, .nav-link:focus { color: var(--fg); text-decoration: none; } .navbar-toggler { border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg); } .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(0,0,0,0.08); } html.dark .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.12); } .navbar-toggler-icon { filter: none; } html.dark .navbar-toggler-icon { filter: invert(1); } @media (max-width: 991.98px) { .navbar, .site-navbar { height: auto; min-height: 60px; } .navbar-collapse { background: var(--card); border-bottom: 1px solid var(--border); margin: 0 -1.5rem; padding: 1rem; } .navbar-collapse .nav-link { padding: 0.5rem 0; } } @media (prefers-reduced-motion: no-preference) { .nav-link, .site-navbar .nav-link { transition: color var(--transition); } } /* -- Section 6: Buttons -- */ .btn { align-items: center; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; display: inline-flex; font-family: 'Geist', sans-serif; font-size: 0.875rem; font-weight: 600; gap: 0.4rem; justify-content: center; padding: 0.5rem 1rem; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); } .btn-primary:hover, .btn-primary:focus { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); opacity: 0.85; } .btn-secondary { background: var(--secondary); border-color: var(--border); color: var(--secondary-fg); } .btn-secondary:hover, .btn-secondary:focus { background: var(--border); border-color: var(--border); color: var(--secondary-fg); } .btn-outline, .btn-outline-primary, .btn-outline-secondary { background: transparent; border-color: var(--border); color: var(--fg); } .btn-outline:hover, .btn-outline:focus, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--muted); border-color: var(--border); color: var(--fg); } .btn-destructive, .btn-danger { background: var(--destructive); border-color: var(--destructive); color: #fff; } .btn-destructive:hover, .btn-destructive:focus, .btn-danger:hover, .btn-danger:focus { background: var(--destructive); border-color: var(--destructive); color: #fff; opacity: 0.9; } .btn-lg { font-size: 0.95rem; padding: 0.65rem 1.5rem; } .btn-sm { font-size: 0.8rem; padding: 0.3rem 0.75rem; } .btn-icon { aspect-ratio: 1; padding: 0.5rem; } .btn-avatar { background: transparent; border-color: var(--border); border-radius: 999px; color: var(--fg); padding: 0.25rem 0.75rem 0.25rem 0.3rem; } .btn-avatar:hover, .btn-avatar:focus { background: var(--muted); border-color: var(--border); color: var(--fg); } @media (prefers-reduced-motion: no-preference) { .btn { transition: all var(--transition); } } /* -- Section 7: Cards -- */ .card, .listing-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } .card:hover, .listing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .card-body { padding: 1.25rem; } .card-img-top { aspect-ratio: 16 / 9; background: var(--muted); object-fit: cover; width: 100%; } .listing-card .listing-card-img { align-items: center; aspect-ratio: 4 / 3; background: var(--muted); display: flex; justify-content: center; overflow: hidden; } .listing-card-price { color: var(--fg); font-size: 1rem; font-weight: 700; } .listing-card-seller { align-items: center; color: var(--muted-fg); display: flex; font-size: 0.8rem; gap: 0.5rem; margin-top: 0.75rem; } .listing-card-rating { align-items: center; color: var(--muted-fg); display: flex; font-size: 0.8rem; gap: 0.25rem; } .star-filled { color: #F59E0B; } .listing-card-rating i, .seller-card-stats i { width: 14px; height: 14px; stroke: currentColor; vertical-align: -2px; } .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.5rem; } .stat-card-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; } .stat-card-label { color: var(--muted-fg); font-size: 0.85rem; margin-top: 0.25rem; } @media (prefers-reduced-motion: no-preference) { .card, .listing-card { transition: box-shadow var(--transition), transform var(--transition); } } /* -- Section 8: Forms & Inputs -- */ .form-control, .form-select { background: var(--input); border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg); font-family: 'Geist', sans-serif; font-size: 0.9rem; padding: 0.55rem 0.9rem; } .form-control:focus, .form-select:focus { background: var(--card); border-color: var(--fg); box-shadow: 0 0 0 3px rgba(0,0,0,0.08); color: var(--fg); outline: none; } html.dark .form-control:focus, html.dark .form-select:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.12); } .form-label { color: var(--fg); font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; } .form-text { color: var(--muted-fg); font-size: 0.8rem; } .form-control::placeholder { color: var(--muted-fg); } .input-group-text { background: var(--muted); border-color: var(--border); color: var(--muted-fg); } @media (prefers-reduced-motion: no-preference) { .form-control, .form-select { transition: border-color var(--transition), box-shadow var(--transition); } } /* -- Section 9: Badges & Status Indicators -- */ .badge { border-radius: calc(var(--radius) - 2px); font-family: 'Geist', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.3em 0.65em; } .badge-active, .badge-approved { background: #DCFCE7; color: #166534; } .badge-pending { background: #FEF9C3; color: #854D0E; } .badge-suspended, .badge-rejected { background: #FEE2E2; color: #991B1B; } .badge-completed { background: #DBEAFE; color: #1E40AF; } .badge-refunded { background: #F3E8FF; color: #6B21A8; } html.dark .badge-active, html.dark .badge-approved { background: #424C45; } html.dark .badge-pending { background: #4c4a3a; } html.dark .badge-suspended, html.dark .badge-rejected { background: #4c4444; } html.dark .badge-completed { background: #42464C; } html.dark .badge-refunded { background: #49464C; } /* -- Section 10: Hero Section -- */ .hero { background: var(--bg); padding: 6rem 0 5rem; text-align: center; } .hero-title { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 1.25rem; } .hero-subtitle { color: var(--muted-fg); font-size: 1.1rem; margin: 0 auto 2rem; max-width: 560px; } .hero-search { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow-md); display: flex; gap: 0.5rem; margin: 0 auto 1.5rem; max-width: 620px; padding: 0.4rem; } .hero-search input { background: transparent; border: none; color: var(--fg); flex: 1; font-family: 'Geist', sans-serif; font-size: 0.95rem; outline: none; padding: 0.4rem 0.75rem; } .hero-search .btn { flex-shrink: 0; } .hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; } .hero-tag { background: var(--muted); border: 1px solid var(--border); border-radius: 999px; color: var(--muted-fg); cursor: pointer; font-size: 0.8rem; padding: 0.25rem 0.75rem; } .hero-tag:hover { background: var(--secondary); color: var(--fg); text-decoration: none; } @media (prefers-reduced-motion: no-preference) { .hero-tag { transition: all var(--transition); } } /* -- Section 11: Category Cards -- */ .category-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .category-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; display: flex; flex-direction: column; gap: 0.5rem; padding: 1.25rem; } .category-card:hover { border-color: var(--fg); box-shadow: var(--shadow-md); text-decoration: none; transform: translateY(-2px); } .category-card-icon { font-size: 1.75rem; line-height: 1; } .category-card-name { color: var(--fg); font-size: 0.9rem; font-weight: 600; } .category-card-count { color: var(--muted-fg); font-size: 0.78rem; } @media (prefers-reduced-motion: no-preference) { .category-card { transition: all var(--transition); } } /* -- Section 12: Stats Banner -- */ .stats-banner { background: var(--fg); color: var(--bg); padding: 3rem 0; } .stat-item { text-align: center; } .stat-value { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; } .stat-label { font-size: 0.85rem; margin-top: 0.25rem; opacity: 0.65; } /* -- Section 13: Filter Sidebar -- */ .filter-sidebar { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; position: sticky; top: 76px; } .filter-title { border-bottom: 1px solid var(--border); font-size: 0.95rem; font-weight: 700; margin-bottom: 1.25rem; padding-bottom: 0.75rem; } .filter-group { margin-bottom: 1.5rem; } .filter-group-label { color: var(--muted-fg); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; margin-bottom: 0.75rem; text-transform: uppercase; } /* -- Section 14: Dashboard Sidebar -- */ .dashboard-sidebar { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; position: sticky; top: 76px; } .sidebar-user { align-items: center; border-bottom: 1px solid var(--border); display: flex; gap: 0.75rem; margin-bottom: 1rem; padding: 0.5rem 0.5rem 1rem; } .sidebar-avatar { align-items: center; background: var(--muted); border-radius: 50%; display: flex; flex-shrink: 0; font-size: 0.9rem; font-weight: 700; height: 40px; justify-content: center; width: 40px; } .sidebar-nav-link { align-items: center; border-radius: calc(var(--radius) - 2px); color: var(--muted-fg); display: flex; font-size: 0.875rem; font-weight: 500; gap: 0.6rem; padding: 0.6rem 0.75rem; text-decoration: none; } .sidebar-nav-link:hover, .sidebar-nav-link.active { background: var(--muted); color: var(--fg); text-decoration: none; } @media (prefers-reduced-motion: no-preference) { .sidebar-nav-link { transition: all var(--transition); } } /* -- Section 15: Admin Styles -- */ .admin-wrapper { display: flex; min-height: 100vh; } .admin-sidebar { background: #0A0A0A; display: flex; flex-direction: column; flex-shrink: 0; height: 100vh; overflow-y: auto; padding: 1.25rem 0; position: sticky; top: 0; width: 220px; } .admin-sidebar-brand { border-bottom: 1px solid #1E1E1E; color: #FFFFFF; font-size: 0.95rem; font-weight: 700; padding: 0 1.25rem 1.25rem; } .admin-nav-link { align-items: center; color: #A1A1A1; display: flex; font-size: 0.85rem; font-weight: 500; gap: 0.6rem; padding: 0.6rem 1.25rem; text-decoration: none; } .admin-nav-link:hover, .admin-nav-link.active { background: #1A1A1A; color: #FFFFFF; text-decoration: none; } .admin-main { background: var(--bg); flex: 1; overflow-x: hidden; } .admin-topbar { align-items: center; background: var(--card); border-bottom: 1px solid var(--border); display: flex; height: 56px; justify-content: space-between; padding: 0 1.5rem; position: sticky; top: 0; z-index: 100; } .admin-content { padding: 2rem 1.5rem; } .admin-page-title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.25rem; } .admin-page-subtitle { color: var(--muted-fg); font-size: 0.875rem; margin-bottom: 1.75rem; } .data-table, .table.data-table { border-collapse: separate; border-spacing: 0; width: 100%; } .data-table thead th { background: var(--muted); border-bottom: 1px solid var(--border); color: var(--muted-fg); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; padding: 0.75rem 1rem; text-transform: uppercase; } .data-table tbody td { border-bottom: 1px solid var(--border); font-size: 0.875rem; padding: 0.875rem 1rem; vertical-align: middle; } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: var(--muted); } @media (prefers-reduced-motion: no-preference) { .admin-nav-link { transition: all var(--transition); } } /* -- Section 16: Alerts & Flash Messages -- */ .alert { align-items: flex-start; border: 1px solid transparent; border-radius: var(--radius); display: flex; font-size: 0.875rem; gap: 0.6rem; } .alert-success { background: #DCFCE7; border-color: #BBF7D0; color: #166534; } .alert-danger { background: #FEE2E2; border-color: #FECACA; color: #991B1B; } .alert-warning { background: #FEF9C3; border-color: #FEF08A; color: #854D0E; } .alert-info { background: #DBEAFE; border-color: #BFDBFE; color: #1E40AF; } html.dark .alert-success { background: #212622; } html.dark .alert-danger { background: #262222; } html.dark .alert-warning { background: #26251D; } html.dark .alert-info { background: #212326; } .flash-message { max-width: 400px; min-width: 280px; position: fixed; right: 1rem; top: 80px; z-index: 9999; } .flash-message.is-hiding, .alert-dismissible.is-hiding { opacity: 0; } @keyframes slideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: no-preference) { .flash-message { animation: slideIn 0.2s ease; } .flash-message, .alert-dismissible { transition: opacity var(--transition); } } /* -- Section 17: Footer -- */ .site-footer { background: var(--card); border-top: 1px solid var(--border); padding: 4rem 0 2rem; } .footer-brand { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .footer-tagline { color: var(--muted-fg); font-size: 0.85rem; } .footer-text { color: var(--muted-fg); font-size: 0.875rem; max-width: 32ch; } .footer-heading { color: var(--muted-fg); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 1rem; text-transform: uppercase; } .footer-link, .footer-links a { color: var(--muted-fg); display: block; font-size: 0.875rem; margin-bottom: 0.5rem; } .footer-link:hover, .footer-links a:hover { color: var(--fg); text-decoration: none; } .footer-bottom { align-items: center; border-top: 1px solid var(--border); color: var(--muted-fg); display: flex; font-size: 0.8rem; justify-content: space-between; margin-top: 3rem; padding-top: 1.5rem; } .footer-divider { border-color: var(--border); margin: 3rem 0 1.5rem; } .footer-copy { color: var(--muted-fg); font-size: 0.8rem; } @media (prefers-reduced-motion: no-preference) { .footer-link, .footer-links a { transition: color var(--transition); } } /* -- Section 18: Dark Mode Toggle Button -- */ .theme-toggle, #themeToggle { align-items: center; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); color: var(--fg); cursor: pointer; display: flex; flex-shrink: 0; height: 36px; justify-content: center; padding: 0; width: 36px; } .theme-toggle:hover, #themeToggle:hover { background: var(--secondary); border-color: var(--fg); } .theme-toggle .icon-sun, #themeToggle .icon-sun { display: none; } .theme-toggle .icon-moon, #themeToggle .icon-moon { display: block; } html.dark .theme-toggle .icon-sun, html.dark #themeToggle .icon-sun { display: block; } html.dark .theme-toggle .icon-moon, html.dark #themeToggle .icon-moon { display: none; } @media (prefers-reduced-motion: no-preference) { .theme-toggle, #themeToggle { transition: all var(--transition); } } /* -- Section 19: Utility Classes -- */ .divider { border: none; border-top: 1px solid var(--border); margin: 2rem 0; } .avatar { align-items: center; background: var(--muted); border-radius: 50%; display: inline-flex; flex-shrink: 0; font-size: 0.85rem; font-weight: 600; height: 36px; justify-content: center; object-fit: cover; width: 36px; } .avatar-circle { align-items: center; background: var(--muted); border-radius: 50%; color: var(--fg); display: inline-flex; flex-shrink: 0; font-size: 0.85rem; font-weight: 700; height: 32px; justify-content: center; width: 32px; } .avatar-lg { font-size: 1.1rem; height: 56px; width: 56px; } .avatar-xl { font-size: 1.4rem; height: 80px; width: 80px; } .verified-badge { align-items: center; background: #16A34A; border-radius: 50%; color: #FFFFFF; display: inline-flex; font-size: 0.62rem; font-weight: 700; height: 16px; justify-content: center; line-height: 1; margin-left: 0.25rem; vertical-align: middle; width: 16px; } .verified-badge::before { border-bottom: 2px solid currentColor; border-right: 2px solid currentColor; content: ""; height: 8px; margin-top: -2px; transform: rotate(45deg); width: 4px; } .empty-state { color: var(--muted-fg); padding: 4rem 2rem; text-align: center; } .empty-state-icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; } .page-header { border-bottom: 1px solid var(--border); margin-bottom: 2rem; padding: 2rem 0 1.5rem; } .char-count { color: var(--muted-fg); display: block; font-size: 0.8rem; margin-top: 0.35rem; text-align: right; } .img-preview { background: var(--muted); border: 1px dashed var(--border); border-radius: var(--radius); margin-top: 0.75rem; min-height: 96px; overflow: hidden; } .img-preview img { height: auto; max-height: 240px; object-fit: cover; width: 100%; } /* -- Section 20: Responsive Overrides -- */ @media (max-width: 768px) { .hero { padding: 4rem 0 3rem; } .hero-title { font-size: 2.25rem; } .section-padding { padding: 3rem 0; } .filter-sidebar, .dashboard-sidebar { position: static; } .admin-sidebar { display: none; left: 0; position: fixed; top: 0; z-index: 1045; } .admin-sidebar.show, .admin-sidebar.is-open { display: flex; } .stat-card-value { font-size: 1.4rem; } } @media (max-width: 576px) { .hero-search { flex-direction: column; } .category-grid { grid-template-columns: repeat(2, 1fr); } .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; } } /* -- Section 21: Home Page Additions -- */ /* Reusable section backgrounds. */ .bg-card { background: var(--card); } .border-bottom-section { border-bottom: 1px solid var(--border); } /* Inverted (dark-on-light, or light-on-dark) section wrapper used by the "How it Works" block so it visually punctuates the page. */ .bg-inverse-section { background: var(--fg); color: var(--bg); } .bg-inverse-section .section-title, .bg-inverse-section .section-subtitle { color: var(--bg); } .bg-inverse-section .section-subtitle { opacity: 0.7; } /* How-it-works step indicators. */ .step-number { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; margin: 0 auto 1rem; } .step-title { font-weight: 700; margin-bottom: 0.5rem; } .step-desc { font-size: 0.875rem; opacity: 0.75; } /* Testimonial cards (homepage social-proof section). */ .testimonial-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); } .testimonial-quote { font-size: 0.95rem; line-height: 1.7; margin-bottom: 1.25rem; color: var(--fg); } .testimonial-author { font-weight: 600; font-size: 0.875rem; } .testimonial-role { font-size: 0.8rem; color: var(--muted-fg); } /* Final CTA banner — inverts vs. page background, swaps in dark mode so it stays legible against the already-dark surroundings. */ .cta-banner { background: var(--fg); color: var(--bg); border-radius: var(--radius); padding: 3.5rem 2rem; text-align: center; } .cta-banner .section-title, .cta-banner .section-subtitle { color: var(--bg); } .cta-banner .section-subtitle { opacity: 0.75; } html.dark .cta-banner { background: var(--card); border: 1px solid var(--border); } /* Featured / premium listing badge. Sits in the top-left corner of the card image, inverting in dark mode so it stays high-contrast. */ .badge-premium { background: #000; color: #fff; font-size: 0.7rem; } html.dark .badge-premium { background: #fff; color: #000; } /* Tighter padding for listing cards in the featured grid. */ .listing-card .card-body { padding: 1rem; } /* Emoji placeholder shown when a listing has no image. */ .listing-card-placeholder { font-size: 2.5rem; line-height: 1; } /* -- Section 22: Auth Pages (login / register) -- */ /* Full-viewport centered shell for login and register. The navbar is 60px tall so we subtract it to keep the card visually centred in the remaining space. */ .auth-page { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--bg); } .auth-card { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 2.5rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-md); } /* Register form has more fields, so it gets a slightly wider card. */ .auth-card-wide { max-width: 480px; } .auth-brand { text-align: center; margin-bottom: 1.75rem; font-weight: 700; font-size: 1rem; } .auth-title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; text-align: center; margin-bottom: 0.25rem; } .auth-subtitle { text-align: center; color: var(--muted-fg); font-size: 0.875rem; margin-bottom: 1.75rem; } /* "OR" style divider with a centred label and rules on either side. */ .auth-divider { align-items: center; color: var(--muted-fg); display: flex; font-size: 0.8rem; gap: 0.75rem; margin: 1.5rem 0; } .auth-divider::before, .auth-divider::after { background: var(--border); content: ''; flex: 1; height: 1px; } .auth-footer-text { font-size: 0.875rem; color: var(--muted-fg); } .auth-footer-text a { color: var(--fg); font-weight: 600; } /* Strength meter sits directly under the password field. */ .password-strength { height: 4px; background: var(--border); border-radius: 999px; margin-top: 0.5rem; overflow: hidden; } .password-strength-bar { height: 100%; width: 0; border-radius: 999px; transition: width 0.3s ease, background-color 0.3s ease; } /* -- Section 23: Browse Page -- */ .browse-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; } .browse-count { font-size: 0.875rem; color: var(--muted-fg); margin: 0.25rem 0 0; } .sort-select { width: auto; min-width: 180px; } .browse-search-bar { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; } .active-filter-tag { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--fg); color: var(--bg); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.8rem; font-weight: 600; } .active-filter-tag a { color: var(--bg); text-decoration: none; font-weight: 700; line-height: 1; } .active-filter-tag a:hover { text-decoration: none; opacity: 0.75; } /* Sidebar filter links — flex row with a small count pill on the right. */ .filter-link { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0.5rem; border-radius: calc(var(--radius) - 2px); font-size: 0.875rem; color: var(--muted-fg); text-decoration: none; transition: all var(--transition); } .filter-link:hover { background: var(--muted); color: var(--fg); text-decoration: none; } .filter-link-active { color: var(--fg); font-weight: 600; background: var(--muted); } .filter-count { font-size: 0.75rem; color: var(--muted-fg); background: var(--muted); border-radius: 999px; padding: 0.1rem 0.5rem; } .filter-link-active .filter-count { background: var(--card); color: var(--fg); } /* Sticky mobile filter toggle bar — only rendered below the lg breakpoint. */ .mobile-filter-toggle { background: var(--card); border-bottom: 1px solid var(--border); padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 60px; z-index: 100; } /* -- Section 24: Listing Detail Page -- */ .listing-breadcrumb { font-size: 0.8rem; margin-bottom: 1.5rem; } .listing-detail-img { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; font-size: 5rem; margin-bottom: 1.5rem; } .listing-detail-img i { width: 64px; height: 64px; stroke: var(--muted-fg); opacity: 0.5; } .listing-detail-img-photo { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); } .listing-detail-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.75rem; } /* Seller summary card sits between the listing header and the description. */ .seller-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; display: flex; align-items: flex-start; gap: 1rem; } .seller-card-stats { display: flex; gap: 1.5rem; margin-top: 0.75rem; font-size: 0.8rem; color: var(--muted-fg); flex-wrap: wrap; } .seller-card-stats .text-fg { color: var(--fg); } /* Section heading used above description and reviews. */ .section-heading { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } .listing-description { font-size: 0.9375rem; line-height: 1.75; color: var(--fg); } /* Review list — each row separated by a hairline rule. */ .review-card { border-bottom: 1px solid var(--border); padding: 1.25rem 0; } .review-card:last-child { border-bottom: none; } .review-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .review-text { font-size: 0.875rem; line-height: 1.6; color: var(--fg); margin-top: 0.5rem; } /* Sticky right-column wrapper. The JS switches in `.listing-sidebar-static` below the lg breakpoint to disable stickiness. */ .listing-sidebar { position: sticky; top: 76px; } .listing-sidebar-static { position: static; } /* Buy box. */ .order-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-md); } .order-price { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 0.25rem; } .order-price-sub { font-size: 0.8rem; color: var(--muted-fg); margin-bottom: 1.25rem; } .order-info-row { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; margin-bottom: 0.6rem; color: var(--fg); } .order-info-icon { width: 15px; height: 15px; stroke: var(--muted-fg); flex-shrink: 0; margin-top: 1px; } .escrow-notice { background: var(--muted); border-radius: var(--radius); padding: 0.75rem; font-size: 0.78rem; color: var(--muted-fg); text-align: center; } /* Related-listings list (compact horizontal cards). */ .related-listings { margin-top: 1rem; } .related-title { font-weight: 700; font-size: 0.875rem; margin-bottom: 0.75rem; } .related-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.5rem; text-decoration: none; color: var(--fg); transition: all var(--transition); } .related-card:hover { border-color: var(--fg); text-decoration: none; transform: translateX(2px); } .related-card-icon { width: 44px; height: 44px; background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .related-card-icon i { width: 20px; height: 20px; stroke: var(--muted-fg); } .related-card-photo { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius) - 1px); } .related-card-title { font-size: 0.8rem; font-weight: 600; line-height: 1.3; } .related-card-price { font-size: 0.75rem; color: var(--muted-fg); margin-top: 0.2rem; } /* -- Section 25: Create-Listing Page -- */ .page-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .page-subtitle { font-size: 0.875rem; color: var(--muted-fg); } /* Each section of the form sits in its own card so the page reads as discrete chunks rather than one long wall of inputs. */ .form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.25rem; } .form-card-title { font-size: 1rem; font-weight: 700; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); } /* Image drop zone — the actual is hidden, this is the clickable target. */ .img-upload-area { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2.5rem; text-align: center; cursor: pointer; transition: all var(--transition); color: var(--muted-fg); } .img-upload-area:hover { border-color: var(--fg); background: var(--muted); } .img-upload-area-icon { font-size: 2rem; margin-bottom: 0.5rem; display: block; } .img-upload-area-text { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; } .img-upload-area-sub { font-size: 0.78rem; } /* Premium-listing toggle is a whole bordered card that highlights when the inner checkbox is checked (CSS-only via :has()). */ .premium-toggle { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; cursor: pointer; transition: all var(--transition); } .premium-toggle:has(.premium-toggle-input:checked) { border-color: var(--fg); background: var(--muted); } .premium-toggle-input { margin-right: 0.5rem; } .premium-toggle-label { cursor: pointer; font-weight: 600; font-size: 0.9rem; display: block; margin-bottom: 0.25rem; } .premium-toggle-sub { font-size: 0.78rem; color: var(--muted-fg); } .listing-form-actions { display: flex; gap: 1rem; flex-wrap: wrap; } /* Right column container — sticks below the navbar until the viewport collapses to a single column. */ .tips-sidebar { position: sticky; top: 76px; } /* Live preview card. */ .listing-preview-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; background: var(--muted); font-size: 0.875rem; } .preview-title { font-weight: 700; margin-bottom: 0.25rem; min-height: 1.2em; color: var(--fg); } .preview-price { font-size: 1.1rem; font-weight: 700; color: var(--fg); } .preview-meta { font-size: 0.78rem; color: var(--muted-fg); margin-bottom: 0.5rem; } .tip-item { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; color: var(--muted-fg); margin-bottom: 0.6rem; } .tip-icon { color: #22C55E; font-weight: 700; flex-shrink: 0; margin-top: 0.05em; } .img-upload-area-icon i, .tip-icon i { display: block; } /* -- Section 26: Dashboard -- */ .dashboard-greeting { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.25rem; } .dashboard-subtext { font-size: 0.875rem; color: var(--muted-fg); margin-bottom: 1.5rem; } .dashboard-content { min-height: 60vh; } /* Messages tab — one row per conversation. */ .conversation-card { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 0.5rem; background: var(--card); cursor: pointer; transition: all var(--transition); text-decoration: none; color: var(--fg); } .conversation-card:hover { border-color: var(--fg); text-decoration: none; } .conversation-card.unread { border-left: 3px solid var(--fg); } .conversation-meta { flex: 1; min-width: 0; } .conversation-name { font-weight: 600; font-size: 0.875rem; } .conversation-listing { font-size: 0.78rem; color: var(--muted-fg); margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conversation-preview { font-size: 0.82rem; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conversation-time { font-size: 0.75rem; color: var(--muted-fg); white-space: nowrap; } /* Overview "quick links" grid. */ .dashboard-quick-link { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; text-align: center; text-decoration: none; color: var(--fg); transition: all var(--transition); font-weight: 600; font-size: 0.875rem; } .dashboard-quick-link:hover { border-color: var(--fg); text-decoration: none; transform: translateY(-2px); } .dashboard-quick-link-icon { font-size: 1.75rem; display: block; margin-bottom: 0.5rem; } /* Earnings table totals row. */ .earnings-total-row td { font-weight: 700; border-top: 2px solid var(--border) !important; } .text-destructive { color: var(--destructive); } /* -- Section 27: Checkout & PayFast -- */ .payfast-info-box { background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; } .payment-methods { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .payment-method-badge { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); padding: 0.25rem 0.75rem; font-size: 0.8rem; font-weight: 500; } .checkout-note-row { display: flex; gap: 0.75rem; font-size: 0.875rem; margin-bottom: 0.75rem; align-items: flex-start; } .checkout-secure-text { font-size: 0.78rem; color: var(--muted-fg); text-align: center; margin-top: 0.5rem; } .checkout-cancel-link { font-size: 0.875rem; color: var(--muted-fg); } .checkout-listing-img { background: var(--muted); border-radius: var(--radius); aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; font-size: 3rem; margin-bottom: 1rem; } .checkout-price-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; margin-bottom: 0.5rem; } .checkout-price-row.total { font-weight: 700; font-size: 1rem; padding-top: 0.5rem; border-top: 1px solid var(--border); margin-top: 0.5rem; } /* Success / cancel result pages — also reused by checkout-cancel.php. */ .success-page { text-align: center; padding: 4rem 1rem; max-width: 560px; margin: 0 auto; } .success-icon { font-size: 4rem; margin-bottom: 1.5rem; display: block; } .success-title { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.5rem; } .success-subtitle { color: var(--muted-fg); margin-bottom: 2rem; } .success-ref { font-size: 0.8rem; color: var(--muted-fg); margin-top: 1rem; font-family: monospace; } .success-steps { text-align: left; background: var(--muted); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 2rem; } .success-step { display: flex; gap: 0.75rem; font-size: 0.875rem; margin-bottom: 0.6rem; align-items: flex-start; } .success-step:last-child { margin-bottom: 0; } /* Category icon wrap */ .category-card-icon-wrap { width: 44px; height: 44px; border-radius: var(--radius); background: var(--muted); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; transition: all var(--transition); } .category-card:hover .category-card-icon-wrap { background: var(--fg); border-color: var(--fg); } .category-card-icon-wrap i { width: 20px; height: 20px; stroke: var(--fg); transition: stroke var(--transition); } .category-card:hover .category-card-icon-wrap i { stroke: var(--bg); } .empty-state-icon i { width: 48px; height: 48px; stroke: var(--muted-fg); } .filter-link-icon { display: inline-flex; align-items: center; margin-right: 0.4rem; flex-shrink: 0; } .filter-link-icon i { width: 14px; height: 14px; stroke: currentColor; } /* Sort dropdown */ .sort-btn { font-size: 0.875rem; font-weight: 500; border: 1px solid var(--border); background: var(--card); color: var(--fg); display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.45rem 0.9rem; border-radius: var(--radius); transition: all var(--transition); } .sort-btn:hover { border-color: var(--fg); background: var(--card); color: var(--fg); } .sort-dropdown-menu { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); min-width: 200px; padding: 0.35rem; } .sort-option { font-size: 0.875rem; color: var(--fg); border-radius: calc(var(--radius) - 2px); padding: 0.45rem 0.75rem; display: flex; align-items: center; } .sort-option:hover { background: var(--muted); color: var(--fg); } .sort-option.active { background: var(--muted); font-weight: 600; color: var(--fg); } /* Listing card icon placeholder */ .listing-card-img { display: flex; align-items: center; justify-content: center; } .listing-card-img i { width: 40px; height: 40px; stroke: var(--muted-fg); opacity: 0.6; } .checkout-listing-img i { width: 48px; height: 48px; stroke: var(--muted-fg); opacity: 0.5; } .success-icon i { width: 56px; height: 56px; display: block; } /* Green for success */ checkout-success .success-icon i, .icon-success i { stroke: #22C55E; } /* Red for cancel */ .icon-cancel i { stroke: var(--destructive); }