/* * Karaz Business Support - Design System * CSS custom properties (variables) for colors, typography, and spacing */ :root { /* Color Tokens */ --color-primary: #ec131e; --color-primary-light: #ff3a44; --color-primary-dark: #cc0f18; --color-primary-alpha-10: rgba(236, 19, 30, 0.1); --color-primary-alpha-20: rgba(236, 19, 30, 0.2); --color-charcoal: #222222; --color-text-main: #1b0d0e; --color-text-muted: #6b5d5e; --color-bg-light: #fcf8f8; --color-surface-light: #ffffff; --color-border-light: #f3e7e8; --color-bg-dark: #1a0b0c; --color-surface-dark: #2a1516; --color-border-dark: #3d2224; --color-white: #ffffff; --color-black: #000000; /* Typography */ --font-family-base: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-primary: 0 10px 15px -3px var(--color-primary-alpha-20); /* Radii */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms ease-in-out; --transition-normal: 300ms ease-in-out; --transition-slow: 500ms ease-in-out; /* Theme Defaults (Light) */ --theme-bg: var(--color-bg-light); --theme-surface: var(--color-surface-light); --theme-text: var(--color-text-main); --theme-text-muted: var(--color-text-muted); --theme-border: var(--color-border-light); } /* Dark Mode (optional override, applied with .dark class on ) */ html.dark:root { --theme-bg: var(--color-bg-dark); --theme-surface: var(--color-surface-dark); --theme-text: var(--color-bg-light); --theme-text-muted: #a39596; --theme-border: var(--color-border-dark); } /* Reset & Base Styles */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-family-base); scroll-behavior: smooth; background-color: var(--theme-bg); color: var(--theme-text); line-height: 1.5; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; overflow-x: hidden; /* Prevent horizontal scroll */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Typography Base */ h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0.5rem; font-weight: 700; line-height: 1.2; } p { margin-top: 0; margin-bottom: 1rem; } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } a:hover.link-primary { color: var(--color-primary); } img, video { max-width: 100%; height: auto; } /* Utility Classes */ .container { width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .container { padding-left: 2.5rem; padding-right: 2.5rem; } } .text-primary { color: var(--color-primary); } .text-white { color: var(--color-white); } .text-muted { color: var(--theme-text-muted); } .bg-primary { background-color: var(--color-primary); } .bg-surface { background-color: var(--theme-surface); } .bg-black { background-color: var(--color-black); } .font-bold { font-weight: 700; } .font-black { font-weight: 900; } .hidden { display: none !important; } /* Grid Helpers */ .grid { display: grid; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Section Spacing */ .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; } /* Animations Utilities */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-in.visible { opacity: 1; transform: translateY(0); }