/* ------------------------------------------------------ site.css (global) ------------------------------------------------------ This file is loaded on every page in the . Provides global resets and utility classes that work with the design tokens from theme.css. */ /* ================================================ CSS RESET & BOX MODEL ================================================ */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margins and inherit fonts */ * { margin: 0; } html { /* Smooth scrolling for anchor links */ scroll-behavior: smooth; } html, body { height: 100%; } body { margin: 0; /* Use theme.css defaults for typography */ min-height: 100vh; display: flex; flex-direction: column; } /* Make images easier to work with */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Remove built-in form typography styles */ input, button, textarea, select { font: inherit; } /* Text overflow behavior */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* ================================================ LAYOUT CONTAINERS ================================================ */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } .container-fluid { width: 100%; padding: 0 var(--container-pad); } /* Main content area should grow */ main { flex: 1; } /* ================================================ SPACING UTILITIES ================================================ */ /* Margin utilities */ .mt-0 { margin-top: var(--space-0); } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-0 { margin-bottom: var(--space-0); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } /* Padding utilities */ .p-0 { padding: var(--space-0); } .p-1 { padding: var(--space-1); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-5 { padding: var(--space-5); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } /* ================================================ TYPOGRAPHY UTILITIES ================================================ */ .page-title { margin: 0 0 var(--space-6) 0; font-size: var(--text-4xl); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--color-gray-900); } .section-title { margin: 0 0 var(--space-4) 0; font-size: var(--text-2xl); font-weight: var(--font-semibold); color: var(--color-gray-800); } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .text-3xl { font-size: var(--text-3xl); } .font-normal { font-weight: var(--font-normal); } .font-medium { font-weight: var(--font-medium); } .font-semibold { font-weight: var(--font-semibold); } .font-bold { font-weight: var(--font-bold); } .text-muted { color: var(--color-gray-600); } .text-danger { color: var(--color-danger); } .text-success { color: var(--color-success); } .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } /* ================================================ DISPLAY UTILITIES ================================================ */ .d-none { display: none; } .d-block { display: block; } .d-inline { display: inline; } .d-inline-block { display: inline-block; } .d-flex { display: flex; } /* Flexbox utilities */ .flex-row { flex-direction: row; } .flex-column { flex-direction: column; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .align-center { align-items: center; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } /* ================================================ BACKGROUND UTILITIES ================================================ */ .bg-white { background-color: var(--color-white); } .bg-gray-50 { background-color: var(--color-gray-50); } .bg-gray-100 { background-color: var(--color-gray-100); } /* ================================================ BORDER UTILITIES ================================================ */ .border { border: var(--border-width) solid var(--border-color); } .border-top { border-top: var(--border-width) solid var(--border-color); } .border-bottom { border-bottom: var(--border-width) solid var(--border-color); } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } /* ================================================ COMPONENT ENHANCEMENTS ================================================ */ /* Better card styling */ .content-card { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); margin-bottom: var(--space-6); } /* Section spacing */ .section { margin-bottom: var(--space-8); } /* Loading states */ .loading { opacity: 0.6; pointer-events: none; position: relative; } .loading::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; border: 2px solid var(--color-gray-300); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } } /* Responsive utilities */ @media (max-width: 768px) { .hide-mobile { display: none; } .container { padding: 0 var(--space-4); } } @media (min-width: 769px) { .show-mobile { display: none; } } /* ================================================ ACCESSIBILITY ================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Skip to main content link */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--color-primary); color: var(--color-white); padding: var(--space-2) var(--space-4); text-decoration: none; border-radius: var(--radius-md); } .skip-link:focus { top: var(--space-2); }