/* * ============================================================ * antcpu — Global Stylesheet * Version: 1.0.0 * Last updated: August 2026 * * Import at the top of every page : * * * Table of Contents: * 1. Design Tokens * 2. Dark Mode Overrides * 3. Reset & Base * 4. Typography * 5. Layout Utilities * 6. Navigation * 7. Buttons * 8. Forms & Inputs * 9. Cards * 10. Badges & Tags * 11. Progress Bars * 12. Avatars * 13. Tables * 14. Modals * 15. Alerts & Toasts * 16. Footer * 17. Animations * 18. Responsive Utilities * ============================================================ */ /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* Backgrounds */ --bg: #f8f9fb; --bg-card: #ffffff; --bg-alt: #eef1f6; /* Text */ --text-primary: #0d0f14; --text-secondary:#4a5568; --text-muted: #8a94a6; /* Accent — Blue (primary) */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: #dbeafe; /* Accent — Purple (marketing / week 2) */ --purple: #7c3aed; --purple-hover: #6d28d9; --purple-soft: #f3e8ff; /* Borders & Shadows */ --border: #e2e8f0; --shadow: 0 2px 16px rgba(0,0,0,0.07); --shadow-lg: 0 8px 40px rgba(0,0,0,0.12); --shadow-xl: 0 20px 60px rgba(0,0,0,0.16); /* Border Radius */ --radius: 12px; --radius-sm: 8px; --radius-xs: 4px; --radius-full: 9999px; /* Transitions */ --transition: 0.25s ease; --transition-slow: 0.4s ease; /* Typography */ --font: 'Inter','Segoe UI',system-ui,-apple-system,sans-serif; --font-mono: 'Fira Code','Cascadia Code','Courier New',monospace; /* Week Identity Colors */ --w1: #2563eb; /* Explorer — blue */ --w2: #7c3aed; /* Creator — purple */ --w3: #059669; /* Collaborator — green */ --w4: #d97706; /* Leader — amber */ /* Semantic Colors */ --success: #059669; --success-soft: #d1fae5; --warning: #d97706; --warning-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2; --info: #0891b2; --info-soft: #cffafe; /* Rank Colors */ --gold: #d97706; --silver: #64748b; --bronze: #92400e; /* Spacing Scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Z-index Scale */ --z-base: 1; --z-dropdown: 10; --z-sticky: 50; --z-nav: 100; --z-modal: 200; --z-toast: 300; } /* ============================================================ 2. DARK MODE OVERRIDES ============================================================ */ [data-theme="dark"] { --bg: #0d0f14; --bg-card: #161b27; --bg-alt: #1a2035; --text-primary: #f0f4ff; --text-secondary:#a0aec0; --text-muted: #4a5568; --accent: #3b82f6; --accent-hover: #60a5fa; --accent-soft: #1e3a5f; --purple: #a78bfa; --purple-hover: #c4b5fd; --purple-soft: #2e1a47; --border: #1e2d45; --shadow: 0 2px 16px rgba(0,0,0,0.4); --shadow-lg: 0 8px 40px rgba(0,0,0,0.6); --shadow-xl: 0 20px 60px rgba(0,0,0,0.8); --success-soft: #064e3b; --warning-soft: #451a03; --danger-soft: #450a0a; --info-soft: #0c4a6e; } /* ============================================================ 3. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text-primary); line-height: 1.6; transition: background var(--transition), color var(--transition); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent-hover); } ul, ol { list-style: none; } button { font-family: var(--font); cursor: pointer; } input, select, textarea { font-family: var(--font); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); } /* ============================================================ 4. TYPOGRAPHY ============================================================ */ h1, h2, h3, h4, h5, h6 { font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); } h1 { font-size: clamp(2rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); } h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); } h4 { font-size: 1rem; } h5 { font-size: 0.9rem; } h6 { font-size: 0.82rem; } p { color: var(--text-secondary); line-height: 1.7; } .text-primary { color: var(--text-primary) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-muted { color: var(--text-muted) !important; } .text-accent { color: var(--accent) !important; } .text-success { color: var(--success) !important; } .text-warning { color: var(--warning) !important; } .text-danger { color: var(--danger) !important; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .font-mono { font-family: var(--font-mono); } .section-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--space-3); display: block; } .section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.2; margin-bottom: var(--space-4); } .section-sub { font-size: 1.05rem; color: var(--text-secondary); max-width: 600px; margin-bottom: var(--space-12); line-height: 1.7; } .text-center .section-sub { margin-left: auto; margin-right: auto; } /* ============================================================ 5. LAYOUT UTILITIES ============================================================ */ .container { max-width: 1140px; margin: 0 auto; padding: 0 var(--space-6); } .container-wide { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-6); } .container-narrow { max-width: 720px; margin: 0 auto; padding: 0 var(--space-6); } .section { padding: var(--space-20) 0; } .section-sm { padding: var(--space-12) 0; } .section-alt { background: var(--bg-alt); } .flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-end { justify-content: flex-end; } .flex-wrap { flex-wrap: wrap; } .flex-1 { flex: 1; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } .grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-6); } .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-6); } .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); } .w-full { width: 100%; } .h-full { height: 100%; } .relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; } .overflow-hidden { overflow: hidden; } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } .px-4 { padding-left: var(--space-4); padding-right: var(--space-4); } .py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); } .hidden { display: none !important; } .visible { display: block !important; } .divider { border: none; border-top: 1px solid var(--border); margin: var(--space-6) 0; } /* ============================================================ 6. NAVIGATION ============================================================ */ .nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--bg); border-bottom: 1px solid var(--border); transition: background var(--transition); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav-logo { font-size: 1.25rem; font-weight: 900; color: var(--text-primary); letter-spacing: -0.03em; text-decoration: none; transition: opacity var(--transition); } .nav-logo:hover { opacity: 0.8; color: var(--text-primary); } .nav-logo span { color: var(--accent); } .nav-links { display: flex; align-items: center; gap: var(--space-8); list-style: none; } .nav-links a { font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); transition: color var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--accent); } .nav-right { display: flex; align-items: center; gap: var(--space-3); } .nav-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; cursor: pointer; border: 2px solid var(--accent-soft); transition: all var(--transition); } .nav-avatar:hover { transform: scale(1.05); } .theme-toggle { background: var(--bg-alt); border: 1.5px solid var(--border); color: var(--text-primary); width: 40px; height: 40px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: all var(--transition); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .nav-mobile-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text-primary); font-size: 1.4rem; padding: var(--space-2); } /* ============================================================ 7. BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px 22px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all var(--transition); border: none; font-family: var(--font); text-decoration: none; white-space: nowrap; line-height: 1; } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .btn-xs { padding: 5px 12px; font-size: 0.72rem; } .btn-sm { padding: 7px 16px; font-size: 0.82rem; } .btn-lg { padding: 14px 32px; font-size: 1rem; border-radius: var(--radius); } .btn-xl { padding: 16px 40px; font-size: 1.05rem; border-radius: var(--radius); } .btn-full { width: 100%; justify-content: center; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37,99,235,0.35); } .btn-secondary { background: var(--bg-alt); color: var(--text-primary); border: 1.5px solid var(--border); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); } .btn-outline { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border); } .btn-outline:hover { border-color: var(--accent); color: var(--accent); } .btn-ghost { background: transparent; color: var(--text-secondary); border: none; } .btn-ghost:hover { background: var(--bg-alt); color: var(--text-primary); } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { background: #047857; color: #fff; transform: translateY(-1px); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #b91c1c; color: #fff; transform: translateY(-1px); } .btn-warning { background: var(--warning); color: #fff; } .btn-warning:hover { background: #b45309; color: #fff; transform: translateY(-1px); } .btn-purple { background: var(--purple); color: #fff; } .btn-purple:hover { background: var(--purple-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,58,237,0.35); } .btn-white { background: #fff; color: var(--accent); } .btn-white:hover { background: #f0f4ff; color: var(--accent-hover); } /* ============================================================ 8. FORMS & INPUTS ============================================================ */ .form-group { margin-bottom: var(--space-5); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-2); } label .required { color: var(--accent); margin-left: 2px; } label .optional { color: var(--text-muted); font-weight: 400; font-size: 0.78rem; margin-left: 4px; } input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="date"], select, textarea { width: 100%; background: var(--bg-alt); border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 11px 14px; font-size: 0.92rem; color: var(--text-primary); font-family: var(--font); transition: border-color var(--transition), box-shadow var(--transition); outline: none; appearance: none; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input::placeholder, textarea::placeholder { color: var(--text-muted); } textarea { resize: vertical; min-height: 100px; line-height: 1.6; } select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a94a6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; } input.input-error { border-color: var(--danger) !important; } input.input-success { border-color: var(--success) !important; } .error-msg { font-size: 0.75rem; color: var(--danger); margin-top: var(--space-1); display: none; } .error-msg.visible { display: block; } .field-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: var(--space-1); } .char-count { font-size: 0.75rem; color: var(--text-muted); } .checkbox-item { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; margin-bottom: var(--space-3); } .checkbox-item input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; cursor: pointer; accent-color: var(--accent); } .checkbox-item span { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; } /* ============================================================ 9. CARDS ============================================================ */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-6); box-shadow: var(--shadow); transition: all var(--transition); } .card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .card-accent { border-top: 3px solid var(--accent); } .card-success { border-left: 3px solid var(--success); } .card-warning { border-left: 3px solid var(--warning); } .card-danger { border-left: 3px solid var(--danger); } .card-purple { border-top: 3px solid var(--purple); } .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .card-header h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); } /* ============================================================ 10. BADGES & TAGS ============================================================ */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 0.68rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } .badge-accent { background: var(--accent-soft); color: var(--accent); } .badge-success { background: var(--success-soft); color: var(--success); } .badge-warning { background: var(--warning-soft); color: var(--warning); } .badge-danger { background: var(--danger-soft); color: var(--danger); } .badge-purple { background: var(--purple-soft); color: var(--purple); } .badge-muted { background: var(--bg-alt); color: var(--text-muted); border: 1px solid var(--border); } /* Week identity tags */ .tag-w1 { background: #dbeafe; color: #1e40af; } .tag-w2 { background: #f3e8ff; color: #6b21a8; } .tag-w3 { background: #d1fae5; color: #065f46; } .tag-w4 { background: #fef3c7; color: #92400e; } .tag-dev { background: #dbeafe; color: #1e40af; } .tag-mkt { background: #f3e8ff; color: #6b21a8; } [data-theme="dark"] .tag-w1, [data-theme="dark"] .tag-dev { background: #1e3a5f; color: #93c5fd; } [data-theme="dark"] .tag-w2, [data-theme="dark"] .tag-mkt { background: #3b0764; color: #d8b4fe; } [data-theme="dark"] .tag-w3 { background: #064e3b; color: #6ee7b7; } [data-theme="dark"] .tag-w4 { background: #451a03; color: #fcd34d; } /* Live pulse badge */ .badge-live { background: var(--accent-soft); color: var(--accent); } .badge-live::before { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: var(--radius-full); animation: pulse 2s infinite; } /* ============================================================ 11. PROGRESS BARS ============================================================ */ .progress-wrap { height: 8px; background: var(--bg-alt); border-radius: var(--radius-xs); overflow: hidden; border: 1px solid var(--border); } .progress-fill { height: 100%; border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--accent), var(--purple)); transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .progress-fill-success { background: var(--success); } .progress-fill-warning { background: var(--warning); } .progress-fill-danger { background: var(--danger); } .progress-sm .progress-wrap { height: 4px; } .progress-lg .progress-wrap { height: 12px; } /* ============================================================ 12. AVATARS ============================================================ */ .avatar { border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; background: var(--accent); } .avatar-xs { width: 24px; height: 24px; font-size: 0.6rem; } .avatar-sm { width: 32px; height: 32px; font-size: 0.72rem; } .avatar-md { width: 40px; height: 40px; font-size: 0.85rem; } .avatar-lg { width: 56px; height: 56px; font-size: 1rem; } .avatar-xl { width: 72px; height: 72px; font-size: 1.2rem; } .avatar-online { position: relative; } .avatar-online::after { content: ''; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--success); border: 2px solid var(--bg-card); } /* ============================================================ 13. TABLES ============================================================ */ .table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .table { width: 100%; border-collapse: collapse; } .table thead tr { background: var(--bg-alt); border-bottom: 2px solid var(--border); } .table th { padding: 12px 16px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); text-align: left; white-space: nowrap; } .table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--transition); } .table tbody tr:last-child { border-bottom: none; } .table tbody tr:hover { background: var(--bg-alt); } .table td { padding: 13px 16px; font-size: 0.88rem; color: var(--text-secondary); vertical-align: middle; } .table td strong { color: var(--text-primary); } .table-center th, .table-center td { text-align: center; } .table-highlight { background: var(--accent-soft) !important; } /* ============================================================ 14. MODALS ============================================================ */ .modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: var(--space-6); opacity: 0; pointer-events: none; transition: opacity var(--transition); } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; box-shadow: var(--shadow-xl); transform: translateY(20px); transition: transform var(--transition); } .modal-overlay.open .modal { transform: translateY(0); } .modal-sm .modal { max-width: 440px; } .modal-lg .modal { max-width: 860px; } .modal-header { padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--bg-card); z-index: 1; } .modal-header h3 { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .modal-close { background: none; border: none; font-size: 1.2rem; color: var(--text-muted); cursor: pointer; transition: color var(--transition); padding: var(--space-1); border-radius: var(--radius-xs); } .modal-close:hover { color: var(--text-primary); } .modal-body { padding: var(--space-6); } .modal-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); background: var(--bg-alt); } /* ============================================================ 15. ALERTS & TOASTS ============================================================ */ .alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 0.88rem; line-height: 1.5; margin-bottom: var(--space-4); } .alert-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; } .alert-accent { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .alert-success { background: var(--success-soft); border-color: var(--success); color: var(--success); } .alert-warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); } .alert-danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } /* Toast container */ .toast-container { position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-3); pointer-events: none; } .toast { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: var(--space-3); font-size: 0.88rem; color: var(--text-primary); pointer-events: all; animation: slideInRight 0.3s ease, fadeOut 0.3s ease 2.7s forwards; max-width: 320px; } .toast-success { border-left: 3px solid var(--success); } .toast-warning { border-left: 3px solid var(--warning); } .toast-danger { border-left: 3px solid var(--danger); } .toast-accent { border-left: 3px solid var(--accent); } /* ============================================================ 16. FOOTER ============================================================ */ .footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: var(--space-10) 0; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); } .footer-logo { font-size: 1.1rem; font-weight: 900; color: var(--text-primary); letter-spacing: -0.03em; text-decoration: none; } .footer-logo span { color: var(--accent); } .footer-links { display: flex; gap: var(--space-6); list-style: none; flex-wrap: wrap; } .footer-links a { font-size: 0.85rem; color: var(--text-muted); transition: color var(--transition); } .footer-links a:hover { color: var(--accent); } .footer-copy { font-size: 0.8rem; color: var(--text-muted); } .footer-sm { padding: var(--space-6) 0; } .footer-sm .footer-inner { justify-content: space-between; } /* ============================================================ 17. ANIMATIONS ============================================================ */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .animate-fade-in { animation: fadeIn 0.4s ease forwards; } .animate-slide-up { animation: slideUp 0.4s ease forwards; } .animate-slide-down { animation: slideDown 0.4s ease forwards; } .animate-scale-in { animation: scaleIn 0.3s ease forwards; } /* Skeleton loader */ .skeleton { background: linear-gradient( 90deg, var(--bg-alt) 25%, var(--border) 50%, var(--bg-alt) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); } .skeleton-text { height: 14px; margin-bottom: var(--space-2); } .skeleton-title { height: 24px; margin-bottom: var(--space-3); width: 60%; } .skeleton-card { height: 120px; } /* ============================================================ 18. RESPONSIVE UTILITIES ============================================================ */ /* Mobile nav open state */ @media (max-width: 768px) { .nav-links { display: none; } .nav-mobile-toggle { display: block; } .nav-links.open { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: var(--space-5) var(--space-6); gap: var(--space-5); z-index: var(--z-nav); } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; text-align: center; } .footer-links { justify-content: center; } .modal-overlay { padding: var(--space-4); align-items: flex-end; } .modal { max-height: 90vh; border-radius: var(--radius) var(--radius) 0 0; } .toast-container { bottom: var(--space-4); right: var(--space-4); left: var(--space-4); } .toast { max-width: 100%; } .section { padding: var(--space-12) 0; } .section-sm { padding: var(--space-8) 0; } .hide-mobile { display: none !important; } } @media (max-width: 480px) { .container, .container-wide, .container-narrow { padding: 0 var(--space-4); } h1 { font-size: clamp(1.6rem, 8vw, 2.4rem); } h2 { font-size: clamp(1.3rem, 6vw, 1.8rem); } .btn-xl { padding: 13px 28px; font-size: 0.95rem; } .btn-lg { padding: 12px 24px; font-size: 0.92rem; } .hide-xs { display: none !important; } } @media (min-width: 769px) { .hide-desktop { display: none !important; } .grid-2 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(3,1fr); } .grid-4 { grid-template-columns: repeat(4,1fr); } } @media (min-width: 1024px) { .grid-4-lg { grid-template-columns: repeat(4,1fr); } } /* Print */ @media print { .nav, .footer, .btn, .theme-toggle, .nav-mobile-toggle { display: none !important; } body { background: #fff; color: #000; } .card { border: 1px solid #ccc; box-shadow: none; } }