/* ========================================= DLK Academy - Global Site Styles File: /css/site.css ========================================= */ /* ---------- Reset & Base ---------- */ html, body { height: 100%; } body { margin: 0; padding: 0; font-family: 'Raleway', Arial, sans-serif; background-color: #ffffff; color: #1f2937; line-height: 1.6; } /* Headings & text */ h1, h2, h3, h4, h5, h6 { font-weight: 700; margin-bottom: 0.75rem; color: #111827; } p { margin-bottom: 1rem; color: #374151; } /* ---------- Navbar ---------- */ .navbar-brand span { font-weight: 600; font-size: 1.1rem; } .nav-link { color: #374151 !important; font-weight: 500; transition: color 0.3s ease; } .nav-link:hover { color: #2563eb !important; } /* ---------- Buttons (shared) ---------- */ .btn-telegram { color: #fff !important; background: linear-gradient(135deg, #2563eb, #1d4ed8); border: none; border-radius: 8px; padding: 0.75rem 1.5rem; font-weight: 600; transition: all 0.3s ease; display: inline-block; } .btn-telegram:hover { opacity: 0.9; transform: translateY(-2px); } /* Pulse Effect */ .shadow-pulse { transition: box-shadow 0.3s ease; } .shadow-pulse:hover { animation: pulse-shadow 1.5s infinite; } @keyframes pulse-shadow { 0% { box-shadow: 0 0 10px rgba(37, 99, 235, 0.4); } 50% { box-shadow: 0 0 25px rgba(37, 99, 235, 0.8); } 100% { box-shadow: 0 0 10px rgba(37, 99, 235, 0.4); } } /* ---------- Footer ---------- */ footer { font-size: 0.85rem; color: #6b7280; } footer a { color: #2563eb; text-decoration: none; } footer a:hover { text-decoration: underline; } /* ========================================= GRAND LANGUAGE LANDING (scoped) Only applies when is present ========================================= */ :root{ --dlk-primary:#2563eb; --dlk-primary-2:#1d4ed8; --dlk-dark:#0b1020; --glass-br: 16px; --shadow: 0 10px 40px rgba(31,41,55,.25); } /* Scope everything to .landing / .landing-body */ .landing .landing-body { color: #fff; /* animated gradient mesh */ background: radial-gradient(1200px 800px at 10% 10%, rgba(37,99,235,.25), transparent 50%), radial-gradient(900px 700px at 90% 20%, rgba(29,78,216,.25), transparent 50%), radial-gradient(900px 900px at 30% 90%, rgba(99,102,241,.20), transparent 50%), linear-gradient(180deg, #0b1020 0%, #0b1226 100%); overflow: hidden; /* landing fills screen */ } /* Floating orbs */ .landing .orbs span{ position:absolute; border-radius:50%; filter: blur(20px); opacity:.35; pointer-events:none; animation: float 18s ease-in-out infinite; } .landing .orbs span:nth-child(1){ width:220px;height:220px; left:-40px; top:-40px; background:#60a5fa; animation-delay:0s;} .landing .orbs span:nth-child(2){ width:260px;height:260px; right:-60px; top:10%; background:#93c5fd; animation-delay:2s;} .landing .orbs span:nth-child(3){ width:280px;height:280px; left:10%; bottom:-80px; background:#a78bfa; animation-delay:4s;} .landing .orbs span:nth-child(4){ width:200px;height:200px; right:15%; bottom:-60px; background:#60a5fa; animation-delay:6s;} @keyframes float{ 0%,100%{ transform: translateY(0) translateX(0) } 50%{ transform: translateY(-25px) translateX(10px) } } /* Center stage */ .landing .stage{ position:relative; min-height:100dvh; /* desktop & mobile */ display:grid; place-items:center; padding: 24px; isolation:isolate; } /* Glass card */ .landing .box{ width: min(560px, 92vw); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.08)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.18); border-radius: var(--glass-br); box-shadow: var(--shadow); text-align:center; padding: clamp(28px, 6vw, 48px); color:#e5e7eb; animation: rise .9s cubic-bezier(.2,.9,.2,1) both; } @keyframes rise{ from{ opacity:0; transform: translateY(18px) scale(.98) } to{ opacity:1; transform: translateY(0) scale(1) } } .landing .logo{ width: 120px; height:120px; border-radius:20px; margin:0 auto 14px auto; box-shadow: 0 12px 30px rgba(37,99,235,.35); animation: spinIn 1.1s cubic-bezier(.2,.9,.2,1) both; } @keyframes spinIn{ from{ transform: rotate(-8deg) scale(.92); opacity:0 } to{ transform: rotate(0deg) scale(1); opacity:1 } } .landing .title{ margin: 6px 0 8px; font-weight:800; letter-spacing:.3px; font-size: clamp(28px, 4.4vw, 42px); line-height:1.1; background: linear-gradient(90deg, #ffffff 0%, #cfe0ff 60%, #ffffff 100%); -webkit-background-clip:text; background-clip:text; color: transparent; } .landing .subtitle{ margin: 0 0 24px; color:#c7d2fe; opacity:.92; font-size: clamp(14px, 2.2vw, 16px); } /* Stacked actions */ .landing .actions{ display:flex; flex-direction:column; gap:14px; width: min(360px, 100%); margin-inline:auto; } .landing .lang-btn{ display:block; width:100%; padding: 14px 20px; border-radius:12px; font-size: 1.05rem; font-weight:700; letter-spacing:.3px; text-decoration:none; color:#fff; background: linear-gradient(135deg, var(--dlk-primary), var(--dlk-primary-2)); box-shadow: 0 8px 24px rgba(37,99,235,.35); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; position: relative; overflow: hidden; } .landing .lang-btn::after{ content:""; position:absolute; inset:0; background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.25) 35%, transparent 70%); transform: translateX(-120%); transition: transform .6s ease; } .landing .lang-btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 32px rgba(37,99,235,.5); filter: saturate(1.05); } .landing .lang-btn:hover::after{ transform: translateX(120%); } .landing .lang-btn.en{ background: linear-gradient(135deg, #3b82f6, #1d4ed8); } .landing .lang-btn.ms{ background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 8px 24px rgba(34,197,94,.35); } .landing .note{ margin-top:16px; font-size:.85rem; color:#d1d5db; opacity:.85 } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ .landing .orbs span, .landing .box, .landing .logo, .landing .lang-btn, .landing .lang-btn::after{ animation:none !important; transition:none !important; } } /* ---------- Mobile fit ---------- */ @media (max-width: 480px) { html, body { height: auto; } .landing-body { overflow-y: auto; } .landing .box { width: 94vw; padding: 20px 16px; border-radius: 14px; } .landing .logo { width: 84px; height: 84px; box-shadow: 0 8px 20px rgba(37,99,235,.28); } .landing .title { font-size: clamp(22px, 6vw, 28px); margin-bottom: 6px; } .landing .subtitle { font-size: 14px; margin-bottom: 16px; } .landing .actions { width: 100%; gap: 10px; } .landing .lang-btn { padding: 12px 16px; font-size: 1rem; border-radius: 10px; box-shadow: 0 6px 18px rgba(37,99,235,.32); } .landing .note { font-size: 12px; margin-top: 10px; } } /* iOS safe areas */ @supports (padding: max(0px)) { .landing-body { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); padding-top: max(0px, env(safe-area-inset-top)); padding-bottom: max(0px, env(safe-area-inset-bottom)); } }