/* ============================================================ XORAZMIY.TECH — Design System Tokens & Global Styles Mobile-first. Premium Dark Enterprise theme. ============================================================ */ /* ── Google Fonts are loaded via link in index.html ── */ /* ────────────────────────────────────────────────────────── 1. CSS CUSTOM PROPERTIES (Design Tokens) ────────────────────────────────────────────────────────── */ :root { /* Core Backgrounds */ --color-bg-base: #0A0A0F; --color-bg-surface: #12121A; --color-bg-elevated: #1C1C28; /* Brand Accent */ --color-accent: #5B6CF8; --color-accent-hover: #7B8CFF; --color-accent-glow: rgba(91, 108, 248, 0.25); /* Text */ --color-text-primary: #F0F0F8; --color-text-secondary: #A0A0B8; --color-text-muted: #606078; /* Product Colors */ --color-yemak: #FF6B35; --color-yemak-glow: rgba(255, 107, 53, 0.20); --color-unibook: #00C896; --color-unibook-glow: rgba(0, 200, 150, 0.20); /* Borders */ --color-border: rgba(255, 255, 255, 0.08); --color-border-hover: rgba(255, 255, 255, 0.16); /* Typography */ --font-display: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: clamp(2.5rem, 6vw, 3.75rem); /* Spacing */ --section-padding-y: clamp(4rem, 10vw, 8rem); /* Radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 9999px; /* Shadows */ --shadow-card: 0 1px 3px rgba(0,0,0,0.4), 0 4px 24px rgba(0,0,0,0.3); --glow-accent: 0 0 40px var(--color-accent-glow); --glow-yemak: 0 0 40px var(--color-yemak-glow); --glow-unibook: 0 0 40px var(--color-unibook-glow); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; } /* ────────────────────────────────────────────────────────── 2. RESET & BASE ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: var(--font-display); font-size: var(--text-base); font-weight: 400; line-height: 1.6; color: var(--color-text-secondary); background-color: var(--color-bg-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-text-primary); } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ────────────────────────────────────────────────────────── 3. TYPOGRAPHY SCALE ────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-text-primary); line-height: 1.15; letter-spacing: -0.02em; } h1 { font-size: var(--text-6xl); font-weight: 900; } h2 { font-size: var(--text-4xl); font-weight: 700; } h3 { font-size: var(--text-2xl); font-weight: 700; } h4 { font-size: var(--text-xl); font-weight: 600; } h5 { font-size: var(--text-lg); font-weight: 600; } h6 { font-size: var(--text-base);font-weight: 600; } p { color: var(--color-text-secondary); line-height: 1.75; } .text-mono { font-family: var(--font-mono); } /* ────────────────────────────────────────────────────────── 4. BOOTSTRAP OVERRIDES ────────────────────────────────────────────────────────── */ /* Override Bootstrap primary color */ .btn-primary { background-color: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 600; letter-spacing: 0.01em; border-radius: var(--radius-md); padding: 0.65rem 1.5rem; transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .btn-primary:hover, .btn-primary:focus { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); box-shadow: var(--glow-accent); transform: translateY(-1px); } .btn-primary:active { transform: translateY(0); } .btn-outline-light { border-color: var(--color-border-hover); color: var(--color-text-secondary); font-weight: 500; border-radius: var(--radius-md); padding: 0.65rem 1.5rem; transition: all var(--transition-fast); } .btn-outline-light:hover { background-color: var(--color-bg-elevated); border-color: var(--color-border-hover); color: var(--color-text-primary); } /* ────────────────────────────────────────────────────────── 5. LAYOUT UTILITIES ────────────────────────────────────────────────────────── */ .section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); } .section-eyebrow { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 1rem; } .section-heading { font-size: clamp(1.75rem, 4vw, var(--text-4xl)); font-weight: 800; color: var(--color-text-primary); margin-bottom: 1.25rem; } .section-subtext { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 600px; line-height: 1.75; } .divider { width: 48px; height: 3px; background: var(--color-accent); border-radius: var(--radius-full); margin: 1.5rem 0; } /* Card base */ .card-dark { background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base); } .card-dark:hover { border-color: var(--color-border-hover); transform: translateY(-3px); } /* ────────────────────────────────────────────────────────── 6. SCROLLBAR STYLING (WebKit) ────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--color-bg-base); } ::-webkit-scrollbar-thumb { background: var(--color-bg-elevated); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* ────────────────────────────────────────────────────────── 7. FOCUS STATES (Accessibility) ────────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* ────────────────────────────────────────────────────────── 8. 4K SCALING ────────────────────────────────────────────────────────── */ @media (min-width: 2560px) { :root { font-size: 18px; } .container, .container-xl, .container-xxl { max-width: 1600px; } }