/* ========================================================================== Soft Skill Zone — Design Tokens Single source of truth for colour, type, space, motion and elevation. Nothing else in the project should hard-code a colour or a pixel shadow. ========================================================================== */ :root { /* ---------- Brand primitives ---------- */ --ssz-indigo-50: #eef2ff; --ssz-indigo-100: #e0e7ff; --ssz-indigo-200: #c7d2fe; --ssz-indigo-300: #a5b4fc; --ssz-indigo-400: #818cf8; --ssz-indigo-500: #6366f1; --ssz-indigo-600: #4f46e5; --ssz-indigo-700: #4338ca; --ssz-indigo-800: #3730a3; --ssz-indigo-900: #312e81; --ssz-violet-400: #a78bfa; --ssz-violet-500: #8b5cf6; --ssz-violet-600: #7c3aed; --ssz-violet-700: #6d28d9; --ssz-cyan-300: #67e8f9; --ssz-cyan-400: #22d3ee; --ssz-cyan-500: #06b6d4; --ssz-cyan-600: #0891b2; --ssz-amber-400: #fbbf24; --ssz-amber-500: #f59e0b; --ssz-emerald-400:#34d399; --ssz-emerald-500:#10b981; --ssz-emerald-600:#059669; --ssz-rose-400: #fb7185; --ssz-rose-500: #f43f5e; --ssz-rose-600: #e11d48; /* ---------- Neutrals ---------- */ --ssz-white: #ffffff; --ssz-n-25: #fcfcfd; --ssz-n-50: #f8fafc; --ssz-n-100: #f1f5f9; --ssz-n-200: #e2e8f0; --ssz-n-300: #cbd5e1; --ssz-n-400: #94a3b8; --ssz-n-500: #64748b; --ssz-n-600: #475569; --ssz-n-700: #334155; --ssz-n-800: #1e293b; --ssz-n-900: #0f172a; --ssz-n-950: #060b18; /* ---------- Semantic: LIGHT theme (default) ---------- */ --bg-body: var(--ssz-n-50); --bg-surface: var(--ssz-white); --bg-surface-2: var(--ssz-n-100); --bg-surface-3: var(--ssz-n-200); --bg-inverse: var(--ssz-n-900); --bg-hero: linear-gradient(135deg, #eef2ff 0%, #faf5ff 45%, #ecfeff 100%); --text-primary: var(--ssz-n-900); --text-secondary: var(--ssz-n-600); --text-muted: #596880; /* AA-safe on white and on the tinted surfaces */ --text-inverse: var(--ssz-white); --text-brand: var(--ssz-indigo-600); --border-subtle: rgba(15, 23, 42, 0.07); --border-default: rgba(15, 23, 42, 0.12); --border-strong: rgba(15, 23, 42, 0.22); --brand: var(--ssz-indigo-600); --brand-hover: var(--ssz-indigo-700); --brand-solid: var(--ssz-indigo-600); --brand-soft: var(--ssz-indigo-50); --brand-contrast: var(--ssz-white); --accent: var(--ssz-cyan-500); --accent-soft: #ecfeff; --success: var(--ssz-emerald-600); --success-soft: #ecfdf5; --warning: var(--ssz-amber-500); --warning-soft: #fffbeb; --danger: var(--ssz-rose-600); --danger-soft: #fff1f2; --info: var(--ssz-indigo-600); --info-soft: var(--ssz-indigo-50); /* "Ink" = the text colour to use ON the matching -soft background. The plain colours above are tuned for fills, borders and icons; on a tinted background they fall below the WCAG AA 4.5:1 text threshold, so small text uses these darker variants instead. */ --brand-ink: var(--ssz-indigo-700); --success-ink: #047857; --warning-ink: #92400e; --danger-ink: #be123c; --info-ink: var(--ssz-indigo-700); --accent-ink: #0e7490; /* ---------- Glassmorphism ---------- */ --glass-bg: rgba(255, 255, 255, 0.62); --glass-bg-solid: rgba(255, 255, 255, 0.86); --glass-border: rgba(255, 255, 255, 0.80); --glass-blur: 18px; --glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.10); /* ---------- Gradients ---------- */ --grad-brand: linear-gradient(135deg, var(--ssz-indigo-600) 0%, var(--ssz-violet-600) 100%); --grad-accent: linear-gradient(135deg, var(--ssz-cyan-500) 0%, var(--ssz-indigo-600) 100%); --grad-warm: linear-gradient(135deg, var(--ssz-amber-400) 0%, var(--ssz-rose-500) 100%); --grad-mesh: radial-gradient(at 12% 18%, rgba(99,102,241,0.16) 0px, transparent 55%), radial-gradient(at 85% 8%, rgba(6,182,212,0.14) 0px, transparent 50%), radial-gradient(at 72% 88%, rgba(139,92,246,0.14) 0px, transparent 55%); --grad-text: linear-gradient(120deg, var(--ssz-indigo-600), var(--ssz-violet-600) 45%, var(--ssz-cyan-500)); /* ---------- Elevation ---------- */ --shadow-xs: 0 1px 2px rgba(15,23,42,0.05); --shadow-sm: 0 2px 6px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04); --shadow-md: 0 6px 18px rgba(15,23,42,0.08), 0 2px 6px rgba(15,23,42,0.04); --shadow-lg: 0 16px 40px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.06); --shadow-xl: 0 28px 64px rgba(15,23,42,0.16), 0 8px 20px rgba(15,23,42,0.08); --shadow-brand: 0 10px 30px rgba(79,70,229,0.32); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6); /* ---------- Button / card depth ("Shaant" look) ---------- Ek hi rang ka flat block dabane jaisa nahi lagta. Isliye button par teen parat hain: neeche halki tight chhaya (button surface se juda dikhe), usse neeche chaudi mulayam chhaya (utha hua lage), aur upar andar ki safed lakeer (kaanch jaisi chamak). Rang seedhe likhe hain, var() se nahi — chhaya ka rang brand ka hi rang hai, aur usme alpha chahiye, jo var() se nahi milta. */ --btn-grad: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%); --btn-grad-hover: linear-gradient(180deg, #6d70f3 0%, #5850e8 100%); --btn-lift: 0 1px 2px rgba(79,70,229,0.35), 0 6px 16px -6px rgba(79,70,229,0.55), inset 0 1px 0 rgba(255,255,255,0.28); --btn-lift-hover: 0 2px 4px rgba(79,70,229,0.40), 0 14px 28px -10px rgba(79,70,229,0.60), inset 0 1px 0 rgba(255,255,255,0.30); --btn-lift-press: 0 1px 2px rgba(79,70,229,0.30), inset 0 1px 2px rgba(15,23,42,0.18); /* Neutral (success/danger/warning) buttons ke liye wahi parat, bina indigo ke — warna laal button ke neeche neeli chhaya aati thi. */ --btn-lift-neutral: 0 1px 2px rgba(15,23,42,0.18), 0 6px 16px -6px rgba(15,23,42,0.30), inset 0 1px 0 rgba(255,255,255,0.22); --btn-lift-neutral-hover: 0 2px 4px rgba(15,23,42,0.20), 0 14px 28px -10px rgba(15,23,42,0.34), inset 0 1px 0 rgba(255,255,255,0.26); --card-bg: linear-gradient(180deg, #ffffff 0%, #fafbff 100%); --card-border: #eceffd; --card-lift: 0 1px 2px rgba(15,23,42,0.04), 0 12px 28px -18px rgba(15,23,42,0.30); --card-lift-hover: 0 2px 4px rgba(15,23,42,0.06), 0 22px 44px -22px rgba(15,23,42,0.38); /* ---------- Typography ---------- */ /* "Manrope Fallback" / "Poppins Fallback" neeche @font-face me bane hain — ye asli font nahi hain, sirf Roboto ko itna bada karke dikhate hain ki wo Manrope/Poppins jitni hi jagah ghere. Isse font aane par text hilta nahi. Wajah aur naap neeche likhe hain. */ --font-sans: "Manrope", "Manrope Fallback", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Heading me Poppins, padhne wale text me Manrope. Poppins ke akshar gol aur chaude hain — heading me ye achha lagta hai, par lambe paragraph aur admin ke table me jagah zyada khaata hai aur naam toot-ne lagte hain. Isliye sirf display me. */ --font-display: "Poppins", "Poppins Fallback", "Manrope", -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Fluid type scale — mobile-first, scales with viewport, no media queries needed */ /* Farsh 12.5px aur 14px — inse neeche padhne wali cheez nahi jaani chahiye. Pehle --fs-sm har phone par 13.1px hi rehta tha (14px sirf 900px+ par), aur usi par button, table, FAQ aur course ka poora matn chalta hai. */ --fs-xs: clamp(0.78rem, 0.76rem + 0.10vw, 0.82rem); --fs-sm: clamp(0.875rem, 0.84rem + 0.15vw, 0.94rem); --fs-base: clamp(0.94rem, 0.90rem + 0.20vw, 1.02rem); --fs-md: clamp(1.05rem, 1.00rem + 0.25vw, 1.16rem); --fs-lg: clamp(1.20rem, 1.12rem + 0.40vw, 1.42rem); --fs-xl: clamp(1.44rem, 1.30rem + 0.70vw, 1.85rem); --fs-2xl: clamp(1.72rem, 1.48rem + 1.15vw, 2.45rem); --fs-3xl: clamp(2.05rem, 1.65rem + 1.95vw, 3.25rem); --fs-4xl: clamp(2.45rem, 1.80vw + 1.85rem, 4.20rem); --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-tight: 1.15; --lh-snug: 1.32; --lh-normal:1.55; --lh-loose: 1.75; --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-wide: 0.02em; --ls-caps: 0.09em; /* ---------- Spacing (4px base) ---------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-7: 1.75rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-14: 3.5rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem; --section-y: clamp(3rem, 7vw, 6.5rem); --container-max: 1240px; --container-pad: clamp(1rem, 4vw, 2rem); /* ---------- Radii ---------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1); --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur-base: 260ms; --dur-slow: 480ms; --dur-slower: 800ms; --t-fast: all var(--dur-fast) var(--ease-out); --t-base: all var(--dur-base) var(--ease-out); /* ---------- Layering ---------- */ --z-base: 1; --z-sticky: 100; --z-navbar: 1000; --z-backdrop: 1050; --z-drawer: 1100; --z-modal: 1300; --z-toast: 1400; --z-loader: 1500; /* ---------- Layout constants ---------- */ --navbar-h: 68px; --sidebar-w: 268px; --sidebar-w-collapsed: 76px; } /* ========================================================================== DARK THEME Applied via — toggled by js/core/theme.js ========================================================================== */ [data-theme="dark"] { --bg-body: var(--ssz-n-950); --bg-surface: #101a2e; --bg-surface-2: #17223a; --bg-surface-3: #1f2c47; --bg-inverse: var(--ssz-white); --bg-hero: linear-gradient(135deg, #060b18 0%, #121a33 50%, #0a1a24 100%); --text-primary: #eef2f8; --text-secondary: #a8b6cc; --text-muted: #97a5bd; /* AA-safe on the dark surfaces */ --text-inverse: var(--ssz-n-900); --text-brand: var(--ssz-indigo-300); --border-subtle: rgba(255, 255, 255, 0.07); --border-default: rgba(255, 255, 255, 0.13); --border-strong: rgba(255, 255, 255, 0.26); /* Dark theme: brand text must clear 4.5:1 on the dark surfaces, so the brand colour itself is lifted a step. --brand-solid keeps the deeper tone for fills that carry white text on top. */ --brand: var(--ssz-indigo-400); --brand-hover: var(--ssz-indigo-300); --brand-solid: var(--ssz-indigo-600); --brand-soft: rgba(99, 102, 241, 0.16); --brand-contrast: var(--ssz-white); --accent: var(--ssz-cyan-400); --accent-soft: rgba(34, 211, 238, 0.14); --success: var(--ssz-emerald-400); --success-soft: rgba(16, 185, 129, 0.15); --warning: var(--ssz-amber-400); --warning-soft: rgba(245, 158, 11, 0.15); --danger: var(--ssz-rose-400); --danger-soft: rgba(244, 63, 94, 0.15); --info: var(--ssz-indigo-400); --info-soft: rgba(99, 102, 241, 0.15); /* Dark theme inks lighten instead of darken — same AA goal, opposite direction. */ --brand-ink: #a5b4fc; --success-ink: #6ee7b7; --warning-ink: #fcd34d; --danger-ink: #fda4af; --info-ink: #a5b4fc; --accent-ink: #67e8f9; --glass-bg: rgba(23, 34, 58, 0.60); --glass-bg-solid: rgba(16, 26, 46, 0.90); --glass-border: rgba(255, 255, 255, 0.10); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); --grad-mesh: radial-gradient(at 12% 18%, rgba(99,102,241,0.24) 0px, transparent 55%), radial-gradient(at 85% 8%, rgba(6,182,212,0.18) 0px, transparent 50%), radial-gradient(at 72% 88%, rgba(139,92,246,0.20) 0px, transparent 55%); --grad-text: linear-gradient(120deg, var(--ssz-indigo-300), var(--ssz-violet-400) 45%, var(--ssz-cyan-300)); --shadow-xs: 0 1px 2px rgba(0,0,0,0.30); --shadow-sm: 0 2px 6px rgba(0,0,0,0.35); --shadow-md: 0 6px 18px rgba(0,0,0,0.40); --shadow-lg: 0 16px 40px rgba(0,0,0,0.50); --shadow-xl: 0 28px 64px rgba(0,0,0,0.60); --shadow-brand: 0 10px 30px rgba(99,102,241,0.35); --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.05); /* Andhere par chaudi chhaya dikhti nahi — isliye yahan glow zyada aur kaali parat gehri, taaki button tab bhi utha hua lage. */ --btn-grad: linear-gradient(180deg, #6f72f5 0%, #5b52ea 100%); --btn-grad-hover: linear-gradient(180deg, #7d80f7 0%, #665dee 100%); --btn-lift: 0 1px 2px rgba(0,0,0,0.45), 0 8px 20px -8px rgba(99,102,241,0.55), inset 0 1px 0 rgba(255,255,255,0.18); --btn-lift-hover: 0 2px 6px rgba(0,0,0,0.50), 0 16px 32px -12px rgba(99,102,241,0.70), inset 0 1px 0 rgba(255,255,255,0.22); --btn-lift-press: 0 1px 2px rgba(0,0,0,0.45), inset 0 1px 2px rgba(0,0,0,0.35); --btn-lift-neutral: 0 1px 2px rgba(0,0,0,0.45), 0 8px 20px -8px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.14); --btn-lift-neutral-hover: 0 2px 6px rgba(0,0,0,0.50), 0 16px 32px -12px rgba(0,0,0,0.60), inset 0 1px 0 rgba(255,255,255,0.18); --card-bg: linear-gradient(180deg, #131e33 0%, #101a2e 100%); --card-border: rgba(255,255,255,0.08); --card-lift: 0 1px 2px rgba(0,0,0,0.40), 0 14px 30px -18px rgba(0,0,0,0.70); --card-lift-hover: 0 2px 6px rgba(0,0,0,0.45), 0 24px 48px -22px rgba(0,0,0,0.80); } /* Respect OS preference before the user makes an explicit choice */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } } /* ========================================================================== Font aate hi text ka hil jaana — iska ilaaj -------------------------------------------------------------------------- Font Google se aata hai aur `display=swap` par lagta hai. Matlab: pehle page phone ke apne font (Android par Roboto) me dikhta hai, phir do-teen second baad Manrope aakar use badal deta hai. Roboto Manrope se KAAFI chhota hai, isliye us pal poora page hil jaata hai — heading do line se ek line ho jaati hai, paragraph chhota ho jaata hai, aur jis button par ungli ja rahi thi wo khisak jaata hai. Patli 3G par ye jhatka saaf dikhta hai. Ilaaj: pehle se ek "nakli" font naam bana dete hain jo Roboto ko utna hi bada karke dikhata hai jitni jagah Manrope leta hai. Phir badalne par naap wahi rehta hai — sirf akshar ka roop badalta hai, jagah nahi. NAAP ANDAZE SE NAHI LIYA GAYA. Ye asli site par browser me maapa gaya (canvas measureText, 100px par ek hi vaakya): Roboto ki chaudai 1041.55 Manrope ki chaudai 1161.42 -> 1.115 yaani 111.5% Poppins ki chaudai 1265.70 -> 1.215 yaani 121.5% `src: local("Roboto")` isliye ki hamara zyadatar student Android par hai aur wahan Roboto hamesha hota hai. Jis machine par Roboto na ho, wahan ye @font-face fail ho jaata hai aur browser chupchaap agle font par chala jaata hai — kuchh bigadta nahi, bas ye faayda nahi milta. Line ki oonchai hamare CSS me pehle se tay hai (--lh-*), isliye ascent/ descent ka jhamela yahan nahi karna padta — hilne ki asli wajah chaudai hai, aur wahi theek ki gayi hai. ========================================================================== */ @font-face { font-family: "Manrope Fallback"; src: local("Roboto"), local("Helvetica Neue"), local("Arial"); size-adjust: 111.5%; font-display: swap; } @font-face { font-family: "Poppins Fallback"; src: local("Roboto"), local("Helvetica Neue"), local("Arial"); size-adjust: 121.5%; font-display: swap; }