/** * Base Styles * Variables, reset, typography * * @package Enravo\Theme */ /* ========================================================================== CSS Variables ========================================================================== */ :root { /* Colors - Primary */ --erv-color-primary: #2563eb; --erv-color-primary-hover: #1d4ed8; --erv-color-primary-light: #dbeafe; /* Colors - Secondary */ --erv-color-secondary: #64748b; --erv-color-secondary-hover: #475569; /* Colors - Status */ --erv-color-success: #22c55e; --erv-color-success-light: #dcfce7; --erv-color-warning: #f59e0b; --erv-color-warning-light: #fef3c7; --erv-color-error: #ef4444; --erv-color-error-light: #fee2e2; --erv-color-info: #3b82f6; --erv-color-info-light: #dbeafe; /* Colors - Neutral */ --erv-color-text: #1e293b; --erv-color-text-muted: #64748b; --erv-color-text-light: #94a3b8; --erv-color-background: #ffffff; --erv-color-surface: #f8fafc; --erv-color-border: #e2e8f0; --erv-color-border-dark: #cbd5e1; /* Typography */ --erv-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --erv-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --erv-font-size-xs: 0.75rem; /* 12px */ --erv-font-size-sm: 0.875rem; /* 14px */ --erv-font-size-base: 1rem; /* 16px */ --erv-font-size-lg: 1.125rem; /* 18px */ --erv-font-size-xl: 1.25rem; /* 20px */ --erv-font-size-2xl: 1.5rem; /* 24px */ --erv-font-size-3xl: 1.875rem; /* 30px */ --erv-font-size-4xl: 2.25rem; /* 36px */ --erv-font-size-5xl: 3rem; /* 48px */ --erv-font-weight-normal: 400; --erv-font-weight-medium: 500; --erv-font-weight-semibold: 600; --erv-font-weight-bold: 700; --erv-line-height-tight: 1.25; --erv-line-height-normal: 1.5; --erv-line-height-relaxed: 1.75; /* Spacing */ --erv-spacing-xs: 0.25rem; /* 4px */ --erv-spacing-sm: 0.5rem; /* 8px */ --erv-spacing-md: 1rem; /* 16px */ --erv-spacing-lg: 1.5rem; /* 24px */ --erv-spacing-xl: 2rem; /* 32px */ --erv-spacing-2xl: 3rem; /* 48px */ --erv-spacing-3xl: 4rem; /* 64px */ /* Layout */ --erv-container-width: 1200px; --erv-container-padding: var(--erv-spacing-md); --erv-header-height: 70px; /* Borders */ --erv-border-radius-sm: 0.25rem; --erv-border-radius: 0.5rem; --erv-border-radius-lg: 0.75rem; --erv-border-radius-xl: 1rem; --erv-border-radius-full: 9999px; /* Shadows */ --erv-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --erv-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); --erv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --erv-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --erv-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Transitions */ --erv-transition-fast: 150ms ease; --erv-transition: 200ms ease; --erv-transition-slow: 300ms ease; /* Grid */ --erv-grid-columns-mobile: 1; --erv-grid-columns-tablet: 2; --erv-grid-columns-desktop: 4; --erv-grid-gap: var(--erv-spacing-lg); /* Z-index */ --erv-z-dropdown: 100; --erv-z-sticky: 200; --erv-z-fixed: 300; --erv-z-modal-backdrop: 400; --erv-z-modal: 500; --erv-z-tooltip: 600; } /* ========================================================================== Dark Mode Aktif etmek için: html veya body'ye data-theme="dark" ekle Örnek: ========================================================================== */ [data-theme="dark"] { /* Colors - Primary (aynı kalabilir veya ayarlanabilir) */ --erv-color-primary: #3b82f6; --erv-color-primary-hover: #60a5fa; --erv-color-primary-light: #1e3a5f; /* Colors - Status */ --erv-color-success: #22c55e; --erv-color-success-light: #14532d; --erv-color-warning: #f59e0b; --erv-color-warning-light: #451a03; --erv-color-error: #ef4444; --erv-color-error-light: #450a0a; --erv-color-info: #3b82f6; --erv-color-info-light: #1e3a5f; /* Colors - Neutral (ters çevrildi) */ --erv-color-text: #f1f5f9; --erv-color-text-muted: #94a3b8; --erv-color-text-light: #64748b; --erv-color-background: #0f172a; --erv-color-surface: #1e293b; --erv-color-border: #334155; --erv-color-border-dark: #475569; /* Shadows (daha koyu) */ --erv-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --erv-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --erv-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --erv-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --erv-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5); } /* ========================================================================== CSS Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; scroll-behavior: smooth; } body { font-family: var(--erv-font-family); font-size: var(--erv-font-size-base); line-height: var(--erv-line-height-normal); color: var(--erv-color-text); background-color: var(--erv-color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; background: transparent; border: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } /* ========================================================================== Typography ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-weight: var(--erv-font-weight-semibold); line-height: var(--erv-line-height-tight); color: var(--erv-color-text); } h1 { font-size: var(--erv-font-size-4xl); } h2 { font-size: var(--erv-font-size-3xl); } h3 { font-size: var(--erv-font-size-2xl); } h4 { font-size: var(--erv-font-size-xl); } h5 { font-size: var(--erv-font-size-lg); } h6 { font-size: var(--erv-font-size-base); } p { margin-bottom: var(--erv-spacing-md); } p:last-child { margin-bottom: 0; } a:hover { color: var(--erv-color-primary); } strong, b { font-weight: var(--erv-font-weight-semibold); } small { font-size: var(--erv-font-size-sm); } code, kbd, pre, samp { font-family: var(--erv-font-family-mono); font-size: var(--erv-font-size-sm); } code { background-color: var(--erv-color-surface); padding: var(--erv-spacing-xs) var(--erv-spacing-sm); border-radius: var(--erv-border-radius-sm); } pre { background-color: var(--erv-color-surface); padding: var(--erv-spacing-md); border-radius: var(--erv-border-radius); overflow-x: auto; } pre code { background: none; padding: 0; } blockquote { border-left: 4px solid var(--erv-color-primary); padding-left: var(--erv-spacing-md); margin: var(--erv-spacing-lg) 0; font-style: italic; color: var(--erv-color-text-muted); } hr { border: none; border-top: 1px solid var(--erv-color-border); margin: var(--erv-spacing-xl) 0; } /* ========================================================================== Accessibility ========================================================================== */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: fixed; top: 5px; left: 5px; z-index: var(--erv-z-tooltip); width: auto; height: auto; padding: var(--erv-spacing-md); background-color: var(--erv-color-background); color: var(--erv-color-text); font-size: var(--erv-font-size-base); clip: auto; text-decoration: none; box-shadow: var(--erv-shadow-lg); } .erv-skip-link { position: fixed; top: -100%; left: var(--erv-spacing-md); z-index: var(--erv-z-tooltip); padding: var(--erv-spacing-sm) var(--erv-spacing-md); background-color: var(--erv-color-primary); color: white; border-radius: var(--erv-border-radius); transition: top var(--erv-transition); } .erv-skip-link:focus { top: var(--erv-spacing-md); outline: 2px solid var(--erv-color-primary); outline-offset: 2px; } /* Focus styles */ :focus-visible { outline: 2px solid var(--erv-color-primary); outline-offset: 2px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } }