/** * Bibiheybet.com - Global CSS * * CSS Reset, custom properties, @font-face, tipografiya əsasları. * Bütün frontend səhifələr bu faylı yükləyir. */ /* ============================================ CSS Reset (Modern) ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; line-height: 1.6; -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: none; border: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; line-height: 1.2; } p { overflow-wrap: break-word; } table { border-collapse: collapse; } /* ============================================ Fontlar - Google Fonts (Space Grotesk + Amiri) ============================================ */ /* Fontlar içindəki Google Fonts link ilə yüklənir */ /* ============================================ CSS Custom Properties ============================================ */ :root { /* Rənglər (tünd tema) */ --bb-bg-primary: #1a1a1a; --bb-bg-secondary: #232323; --bb-bg-section: #2a2a2a; --bb-color-ton1: #8bacc8; --bb-color-ton2: #d9d3bf; --bb-color-accent: #c9a84c; --bb-color-heading: #e2ddcc; --bb-color-muted: #9a9a8a; /* Fontlar */ --bb-font-primary: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bb-font-arabic: 'Amiri', 'Times New Roman', serif; /* Ölçülər */ --bb-container-max: 1200px; --bb-container-narrow: 800px; --bb-header-height: 80px; --bb-header-sticky-height: 60px; /* Spacing */ --bb-space-xs: 0.25rem; --bb-space-sm: 0.5rem; --bb-space-md: 1rem; --bb-space-lg: 2rem; --bb-space-xl: 3rem; --bb-space-2xl: 5rem; /* Keçidlər */ --bb-transition: 0.3s ease; --bb-transition-fast: 0.15s ease; /* Kölgələr (tünd tema) */ --bb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --bb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --bb-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); /* Border radius */ --bb-radius-sm: 4px; --bb-radius-md: 8px; --bb-radius-lg: 12px; /* Z-index */ --bb-z-header: 100; --bb-z-menu: 200; --bb-z-overlay: 190; --bb-z-player: 150; } /* ============================================ Tipografiya Əsasları ============================================ */ body { font-family: var(--bb-font-primary); font-weight: 400; font-size: 16px; color: var(--bb-color-ton2); background-color: var(--bb-bg-primary); } h1, h2, h3, h4, h5, h6 { font-family: var(--bb-font-primary); font-weight: 600; color: var(--bb-color-heading); } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.1rem; } h6 { font-size: 1rem; } p { margin-bottom: var(--bb-space-md); line-height: 1.7; } strong, b { font-weight: 600; } /* Ərəb mətnlər üçün */ .bb-arabic-text { font-family: var(--bb-font-arabic); direction: rtl; text-align: right; line-height: 2; } /* İkinci dərəcəli yazılar */ .bb-text-muted { color: var(--bb-color-muted); } /* ============================================ Layout Əsasları ============================================ */ .bb-container { width: 100%; max-width: var(--bb-container-max); margin: 0 auto; padding: 0 var(--bb-space-md); } .bb-container-narrow { width: 100%; max-width: var(--bb-container-narrow); margin: 0 auto; padding: 0 var(--bb-space-md); } .bb-page { display: flex; flex-direction: column; min-height: 100vh; } .bb-main { flex: 1; } /* ============================================ Link & Düymə Əsasları ============================================ */ .bb-link { color: var(--bb-color-accent); transition: opacity var(--bb-transition-fast); } .bb-link:hover { opacity: 0.8; } .bb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bb-space-sm); padding: 0.75rem 1.5rem; font-family: var(--bb-font-primary); font-weight: 500; font-size: 0.95rem; border-radius: var(--bb-radius-sm); transition: all var(--bb-transition); cursor: pointer; border: none; text-decoration: none; } .bb-btn-primary { background-color: var(--bb-color-ton1); color: #1a1a1a; } .bb-btn-primary:hover { background-color: #a0c4e0; } .bb-btn-accent { background-color: var(--bb-color-accent); color: #ffffff; } .bb-btn-accent:hover { background-color: #d4b45c; } .bb-btn-outline { background-color: transparent; color: var(--bb-color-ton2); border: 1px solid rgba(255, 255, 255, 0.2); } .bb-btn-outline:hover { background-color: rgba(255, 255, 255, 0.1); color: #ffffff; } /* ============================================ Section Əsasları ============================================ */ .bb-section { padding: var(--bb-space-2xl) 0; } .bb-section-alt { background-color: var(--bb-bg-section); } .bb-separator { width: 60px; height: 2px; background-color: var(--bb-color-accent); margin: var(--bb-space-md) 0; } /* ============================================ Kart Əsasları ============================================ */ .bb-card { background-color: var(--bb-bg-secondary); border-radius: var(--bb-radius-md); overflow: hidden; transition: transform var(--bb-transition), box-shadow var(--bb-transition); } .bb-card:hover { transform: translateY(-4px); box-shadow: var(--bb-shadow-md); } .bb-card-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; } .bb-card-body { padding: var(--bb-space-lg); } /* ============================================ Utility Classes ============================================ */ .bb-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .bb-text-center { text-align: center; } .bb-text-right { text-align: right; } /* Lazy load placeholder */ .bb-lazy { opacity: 0; transition: opacity 0.4s ease; } .bb-lazy.bb-loaded { opacity: 1; } /* ============================================ Breadcrumb ============================================ */ .bb-breadcrumb { padding: 1.2rem 0 0; } .bb-breadcrumb-list { display: flex; flex-wrap: wrap; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; } .bb-breadcrumb-item a { color: var(--bb-color-muted); font-size: 0.85rem; transition: color var(--bb-transition-fast); } .bb-breadcrumb-item a:hover { color: var(--bb-color-accent); } .bb-breadcrumb-active span { color: var(--bb-color-ton2); font-size: 0.85rem; font-weight: 500; } .bb-breadcrumb-sep { color: var(--bb-color-muted); font-size: 0.75rem; margin: 0 0.5rem; opacity: 0.5; user-select: none; } html[dir="rtl"] .bb-breadcrumb-list { flex-direction: row-reverse; } html[dir="rtl"] .bb-breadcrumb-item a, html[dir="rtl"] .bb-breadcrumb-active span { font-family: 'Noto Naskh Arabic', 'Amiri', serif; } /* ============================================ Responsive Breakpoints (Mobile-first) ============================================ */ /* Tablet (768px+) */ @media (min-width: 768px) { h1 { font-size: 3rem; } h2 { font-size: 2.25rem; } h3 { font-size: 1.75rem; } .bb-container { padding: 0 var(--bb-space-lg); } } /* Desktop (1024px+) */ @media (min-width: 1024px) { h1 { font-size: 3.5rem; } h2 { font-size: 2.5rem; } .bb-section { padding: var(--bb-space-2xl) 0; } }