/* ═══════════════════════════════════════════════════════ KAUSAR DESIGN SYSTEM Version 1.1 – Foundation ═══════════════════════════════════════════════════════ */ /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; min-width: 0; } html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; max-width: 100%; } body { overflow-x: hidden; max-width: 100%; } img { display: block; max-width: 100%; height: auto; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } /* ── CSS Variables ── */ :root { /* Brand Palette */ --k-primary: #047ABA; --k-secondary: #3B76BA; --k-accent: #60A5FA; --k-dark: #16213C; --k-gold: #D6C2A1; /* Semantic (Light Mode) */ --bg: #F8FAFC; --bg-card: #ffffff; --bg-subtle: #f1f5f9; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --border: rgba(0,0,0,0.07); --border-strong: rgba(0,0,0,0.14); /* Shadows */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 16px rgba(0,0,0,0.09), 0 2px 6px rgba(0,0,0,0.04); --shadow-lg: 0 20px 60px rgba(0,0,0,0.11), 0 8px 20px rgba(0,0,0,0.06); --shadow-blue: 0 8px 32px rgba(4,122,186,0.28); /* Radii */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --radius-xl: 30px; --radius-full: 9999px; /* Nav */ --nav-h: 68px; --nav-bg: rgba(248,250,252,0.88); /* Transition */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 0.15s var(--ease); --t-base: 0.28s var(--ease); --t-slow: 0.45s var(--ease); /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Typography */ --font-sans: 'Inter', system-ui, -apple-system, sans-serif; --text-xs: 0.72rem; --text-sm: 0.825rem; --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; /* Compat aliases (existing index.php) */ --blue-primary: var(--k-accent); --blue-secondary: var(--k-secondary); --navy: var(--k-dark); --gold: var(--k-gold); --radius-lg-old: var(--radius-lg); } [data-theme="dark"] { --bg: #0d1526; --bg-card: #16213C; --bg-subtle: #1a2a45; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.13); --nav-bg: rgba(13,21,38,0.92); --shadow-sm: 0 1px 3px rgba(0,0,0,0.35); --shadow-md: 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 20px 60px rgba(0,0,0,0.55); } /* ── Base Body ── */ body { font-family: var(--font-sans); background: var(--bg); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; transition: background var(--t-base), color var(--t-base); } /* ── No-flash theme init (add to as inline script) ── */ /* ── Typography ── */ h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-primary); } h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; } h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 800; } h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; } h4 { font-size: 1.1rem; font-weight: 600; } p { color: var(--text-secondary); line-height: 1.75; } .label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--k-primary); } .text-muted { color: var(--text-muted); } .text-sm { font-size: var(--text-sm); } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 13px 26px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 700; transition: all var(--t-base); white-space: nowrap; cursor: pointer; border: none; font-family: inherit; } .btn-primary { background: var(--k-primary); color: #fff; box-shadow: var(--shadow-blue); } .btn-primary:hover { background: var(--k-secondary); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(4,122,186,0.38); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1.5px solid var(--border-strong); } .btn-secondary:hover { border-color: var(--k-accent); color: var(--k-accent); transform: translateY(-2px); } .btn-ghost { background: var(--bg-subtle); color: var(--text-secondary); } .btn-ghost:hover { background: var(--border); color: var(--text-primary); } .btn-sm { padding: 9px 18px; font-size: var(--text-xs); } .btn-lg { padding: 16px 36px; font-size: var(--text-base); } /* ── Badge ── */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; background: rgba(4,122,186,0.1); color: var(--k-primary); border: 1px solid rgba(4,122,186,0.18); } .badge-green { background:#dcfce7; color:#166534; border-color:#bbf7d0; } .badge-yellow { background:#fef9c3; color:#854d0e; border-color:#fef08a; } .badge-red { background:#fee2e2; color:#dc2626; border-color:#fecaca; } /* ── Cards ── */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .card-hover-blue:hover { border-color: var(--k-accent); box-shadow: var(--shadow-blue); } /* ── Inputs ── */ .input { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border-strong); border-radius: var(--radius); font-family: inherit; font-size: var(--text-sm); background: var(--bg-card); color: var(--text-primary); outline: none; transition: border-color var(--t-fast); } .input:focus { border-color: var(--k-accent); } .input::placeholder { color: var(--text-muted); } /* ── Section Wrapper ── */ .section { padding: var(--space-20) var(--space-8); max-width: 1280px; margin: 0 auto; } .section-full { padding: var(--space-20) var(--space-8); } .section-header { text-align: center; margin-bottom: var(--space-16); } .section-header h2 { margin-top: var(--space-3); } .section-header p { margin-top: var(--space-4); max-width: 560px; margin-left: auto; margin-right: auto; } /* ── Page Header ── */ .page-hero { padding: calc(var(--nav-h) + var(--space-16)) var(--space-8) var(--space-16); text-align: center; max-width: 720px; margin: 0 auto; } .page-hero .label { margin-bottom: var(--space-3); display: block; } .page-hero h1 { margin-bottom: var(--space-4); } .page-hero p { font-size: var(--text-lg); } /* ── Navbar ── */ #navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); transition: all 0.4s var(--ease); } #navbar.scrolled { background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-8); height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); } .nav-logo { display: flex; align-items: center; gap: var(--space-2-half, 10px); font-weight: 800; font-size: var(--text-xl); color: var(--text-primary); flex-shrink: 0; text-decoration: none; } .nav-logo img { width: 36px; height: 36px; } .nav-links { display: flex; align-items: center; gap: var(--space-1); list-style: none; } .nav-links a { padding: 8px 13px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); transition: all var(--t-fast); } .nav-links a:hover, .nav-links a.active { color: var(--text-primary); background: var(--border); } .nav-links a.active { font-weight: 600; } .nav-right { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } /* Dark toggle */ #dark-toggle { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all var(--t-fast); cursor: pointer; } #dark-toggle:hover { border-color: var(--k-accent); color: var(--k-accent); } /* User avatar in nav */ .nav-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--k-primary), var(--k-secondary)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-xs); transition: transform var(--t-fast), box-shadow var(--t-fast); text-decoration: none; } .nav-user-avatar:hover { transform: scale(1.08); box-shadow: var(--shadow-blue); } /* ── Mobile Nav ── */ .hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; border-radius: var(--radius-sm); background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; } .hamburger span { display: block; width: 20px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: all var(--t-base); } .mobile-menu { display: none; position: fixed; inset: 0; z-index: 999; background: var(--bg); padding: calc(var(--nav-h) + var(--space-8)) var(--space-8) var(--space-8); flex-direction: column; gap: var(--space-2); transform: translateX(100%); transition: transform 0.4s var(--ease); } .mobile-menu.open { transform: translateX(0); } .mobile-menu a { padding: var(--space-4); font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); border-radius: var(--radius); border-bottom: 1px solid var(--border); display: block; } /* ── Footer ── */ .site-footer { background: var(--k-dark); color: rgba(255,255,255,0.65); padding: var(--space-16) var(--space-8) var(--space-10); } .footer-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-logo { display: flex; align-items: center; gap: var(--space-2-half, 10px); font-weight: 800; font-size: var(--text-xl); color: #fff; margin-bottom: var(--space-4); } .footer-logo img { width: 32px; height: 32px; } .footer-desc { font-size: var(--text-sm); line-height: 1.75; color: rgba(255,255,255,0.45); margin-bottom: var(--space-6); } .footer-social { display: flex; gap: var(--space-2); } .social-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.55); transition: all var(--t-base); text-decoration: none; } .social-btn svg { width: 15px; height: 15px; } .social-btn:hover { background: var(--k-primary); border-color: var(--k-primary); color: #fff; transform: translateY(-2px); } .footer-col h4 { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: var(--space-5); } .footer-col ul { display: flex; flex-direction: column; gap: var(--space-2-half, 10px); } .footer-col ul a { font-size: var(--text-sm); color: rgba(255,255,255,0.45); transition: color var(--t-fast); } .footer-col ul a:hover { color: var(--k-accent); } .footer-bottom { max-width: 1280px; margin: 0 auto; padding-top: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; } .footer-bottom p { font-size: var(--text-xs); color: rgba(255,255,255,0.28); } /* Newsletter */ .newsletter-form { display: flex; gap: var(--space-2); margin-top: var(--space-4); } .newsletter-input { flex: 1; padding: 10px 14px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); color: #fff; font-family: inherit; font-size: var(--text-sm); outline: none; transition: border-color var(--t-fast); } .newsletter-input::placeholder { color: rgba(255,255,255,0.28); } .newsletter-input:focus { border-color: var(--k-accent); } .newsletter-btn { padding: 10px 16px; background: var(--k-primary); color: #fff; border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; font-family: inherit; transition: background var(--t-fast); cursor: pointer; flex-shrink: 0; border: none; } .newsletter-btn:hover { background: var(--k-secondary); } /* ── Animated Page Background ── */ .k-gradient-bg { background: linear-gradient(135deg, #e8f2ff 0%, #f8fafc 20%, #fdf6ee 40%, #edf5ff 60%, #f5f0fa 80%, #e8f2ff 100%); background-size: 400% 400%; background-attachment: fixed; animation: kGradient 18s ease infinite; } [data-theme="dark"] .k-gradient-bg, [data-theme="dark"] body.k-gradient-bg { background: linear-gradient(135deg, #0a1525 0%, #0d1a30 20%, #111e3a 40%, #0a1525 60%, #0e1e35 80%, #0a1525 100%); background-size: 400% 400%; background-attachment: fixed; animation: kGradient 18s ease infinite; } @keyframes kGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ── Scroll reveal ── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } /* ── Responsive ── */ @media (max-width: 1024px) { .footer-inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { :root { --nav-h: 58px; } .section, .section-full { padding: var(--space-12) var(--space-4); } .nav-links, .nav-right .btn { display: none; } .hamburger { display: flex; } .mobile-menu { display: flex; } .footer-inner { grid-template-columns: 1fr; gap: var(--space-8); } /* Hide logo text on mobile – show icon only */ .nav-logo-text { display: none; } /* Cards compact */ .card { padding: var(--space-4); } /* Page hero compact */ .page-hero { padding-top: calc(var(--nav-h) + var(--space-10)); padding-bottom: var(--space-10); } .page-hero h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); } .page-hero p { font-size: var(--text-base); } /* Buttons */ .btn { padding: 11px 20px; font-size: var(--text-xs); } .btn-lg { padding: 13px 26px; font-size: var(--text-sm); } /* Footer */ .site-footer { padding: var(--space-12) var(--space-4) var(--space-8); } } @media (max-width: 480px) { .section, .section-full { padding: var(--space-10) var(--space-3); } .page-hero { padding-left: var(--space-3); padding-right: var(--space-3); } .nav-inner { padding: 0 var(--space-4); } /* Prevent any fixed-width element from breaking layout */ img, video, iframe, table { max-width: 100%; } }