/** * ============================================================ * CareerSetu Pro * Master Stylesheet * Version: V50 Ultra Premium * ============================================================ * * FILE: * public_html/assets/css/style.css * * PURPOSE: * - Master CSS entry point * - Loads complete CareerSetu Pro design system * - Maintains correct stylesheet dependency order * - Public Website * - Authentication * - Jobs * - Candidate Portal * - Admin Portal * - Animations * - Responsive Layer * * IMPORTANT: * Add only style.css inside the main website . * Other CSS files are loaded automatically from here. * ============================================================ */ /* ============================================================ 01. DESIGN SYSTEM / VARIABLES ============================================================ */ @import url("./variables.css"); /* ============================================================ 02. GLOBAL RESET / BASE ============================================================ */ @import url("./base.css"); /* ============================================================ 03. GLOBAL COMPONENTS ============================================================ */ @import url("./components.css"); /* ============================================================ 04. PUBLIC HEADER / NAVIGATION ============================================================ */ @import url("./header.css"); /* ============================================================ 05. PUBLIC FOOTER ============================================================ */ @import url("./footer.css"); /* ============================================================ 06. HOMEPAGE ============================================================ */ @import url("./home.css"); /* ============================================================ 07. JOBS / JOB DETAILS / COMPANIES ============================================================ */ @import url("./jobs.css"); /* ============================================================ 08. AUTHENTICATION ============================================================ */ @import url("./auth.css"); /* ============================================================ 09. CANDIDATE APPLICATION ============================================================ */ @import url("./candidate.css"); /* ============================================================ 10. ADMIN APPLICATION ============================================================ */ @import url("./admin.css"); /* ============================================================ 11. GLOBAL ANIMATIONS ============================================================ */ @import url("./animations.css"); /* ============================================================ 12. FINAL RESPONSIVE OVERRIDES IMPORTANT: KEEP THIS LAST ============================================================ */ @import url("./responsive.css"); /* ============================================================ 13. MASTER DOCUMENT SAFETY ============================================================ */ html { width: 100%; min-height: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { width: 100%; min-height: 100vh; min-height: 100dvh; margin: 0; overflow-x: hidden; background: var(--cs-body-bg, #f8fafc); color: var(--cs-text, #0f172a); font-family: var( --cs-font-primary, "Inter", "Segoe UI", Arial, sans-serif ); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ 14. GLOBAL BOX MODEL SAFETY ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* ============================================================ 15. GLOBAL MEDIA SAFETY ============================================================ */ img, picture, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } /* ============================================================ 16. GLOBAL FORM FONT INHERITANCE ============================================================ */ button, input, select, textarea { font: inherit; } /* ============================================================ 17. BUTTON CURSOR ============================================================ */ button, [type="button"], [type="submit"], [type="reset"] { cursor: pointer; } button:disabled, [type="button"]:disabled, [type="submit"]:disabled, [type="reset"]:disabled { cursor: not-allowed; } /* ============================================================ 18. GLOBAL LINK SAFETY ============================================================ */ a { color: inherit; } a, button { -webkit-tap-highlight-color: transparent; } /* ============================================================ 19. ACCESSIBILITY FOCUS ============================================================ */ :focus { outline: none; } :focus-visible { outline: 3px solid rgba(var(--cs-primary-rgb, 37, 99, 235), 0.25); outline-offset: 3px; } /* ============================================================ 20. SCREEN READER ONLY ============================================================ */ .cs-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .cs-sr-only-focusable:focus, .cs-sr-only-focusable:focus-visible { position: fixed !important; top: 12px; left: 12px; z-index: 100000; width: auto !important; height: auto !important; padding: 10px 16px !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; border-radius: 8px; background: #ffffff; color: #0f172a; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15); } /* ============================================================ 21. GLOBAL APP ROOT ============================================================ */ #app, .cs-app { position: relative; display: flex; flex-direction: column; width: 100%; min-height: 100vh; min-height: 100dvh; } /* ============================================================ 22. PUBLIC WEBSITE MAIN ============================================================ */ .cs-site-main { position: relative; flex: 1 0 auto; width: 100%; } /* ============================================================ 23. CANDIDATE APP ROOT ============================================================ */ .cs-candidate-app { position: relative; width: 100%; min-height: 100vh; min-height: 100dvh; background: var(--cs-candidate-bg, #f8fafc); } /* ============================================================ 24. ADMIN APP ROOT ============================================================ */ .cs-admin-app { position: relative; width: 100%; min-height: 100vh; min-height: 100dvh; background: var(--cs-admin-bg, #f8fafc); } /* ============================================================ 25. GLOBAL CONTENT WIDTH SAFETY ============================================================ */ .cs-container, .container, .cs-site-main, .cs-candidate-main, .cs-admin-main, .cs-candidate-content, .cs-admin-content { min-width: 0; } /* ============================================================ 26. FLEX CHILD OVERFLOW FIX ============================================================ */ .cs-flex-child, .cs-navbar, .cs-hero-content, .cs-job-card-content, .cs-candidate-main, .cs-admin-main, .cs-candidate-content, .cs-admin-content { min-width: 0; } /* ============================================================ 27. LONG TEXT / URL PROTECTION ============================================================ */ .cs-break-word, .cs-job-title, .cs-company-name, .cs-profile-name, .cs-admin-candidate-name, .cs-payment-detail-value { overflow-wrap: anywhere; word-break: break-word; } /* ============================================================ 28. GLOBAL TABLE SAFETY ============================================================ */ table { border-collapse: collapse; border-spacing: 0; } .cs-table-responsive, .cs-candidate-table-wrap, .cs-admin-table-wrap { max-width: 100%; } /* ============================================================ 29. GLOBAL IFRAME SAFETY ============================================================ */ iframe { max-width: 100%; border: 0; } /* ============================================================ 30. GLOBAL HIDDEN ATTRIBUTE ============================================================ */ [hidden] { display: none !important; } /* ============================================================ 31. DISABLED ELEMENT ============================================================ */ [disabled], .cs-disabled { cursor: not-allowed; opacity: 0.6; } /* ============================================================ 32. NO SCROLL Used by mobile menu / modal / sidebar JS ============================================================ */ body.cs-no-scroll { overflow: hidden; } /* ============================================================ 33. SELECTION ============================================================ */ ::selection { background: rgba(var(--cs-primary-rgb, 37, 99, 235), 0.18); color: var(--cs-text-dark, #0f172a); } /* ============================================================ 34. GLOBAL SCROLLBAR ============================================================ */ * { scrollbar-width: thin; scrollbar-color: var(--cs-gray-300, #cbd5e1) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--cs-gray-300, #cbd5e1); background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--cs-gray-400, #94a3b8); background-clip: padding-box; } /* ============================================================ 35. FORM AUTOFILL FIX ============================================================ */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { -webkit-text-fill-color: var(--cs-text, #0f172a); transition: background-color 99999s ease-in-out 0s; } /* ============================================================ 36. FILE INPUT SAFETY ============================================================ */ input[type="file"] { max-width: 100%; } /* ============================================================ 37. NUMBER INPUT ============================================================ */ input[type="number"] { appearance: textfield; -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; } /* ============================================================ 38. SEARCH INPUT ============================================================ */ input[type="search"] { appearance: none; -webkit-appearance: none; } input[type="search"]::-webkit-search-cancel-button { cursor: pointer; } /* ============================================================ 39. PASSWORD MANAGER / ICON SPACE ============================================================ */ .cs-password-field { position: relative; } .cs-password-field input { padding-right: 48px; } /* ============================================================ 40. LOADING STATE ============================================================ */ .cs-is-loading { position: relative; pointer-events: none; user-select: none; } .cs-is-loading > * { opacity: 0.65; } /* ============================================================ 41. PAGE TRANSITION SAFETY ============================================================ */ .cs-page-main { position: relative; width: 100%; } /* ============================================================ 42. STICKY ELEMENT SAFETY ============================================================ */ .cs-sticky { position: sticky; top: calc( var(--cs-header-height, 76px) + 16px ); } /* ============================================================ 43. Z-INDEX SAFETY LAYERS ============================================================ */ .cs-site-header { z-index: var(--cs-z-header, 1000); } .cs-dropdown-menu { z-index: var(--cs-z-dropdown, 1050); } .cs-candidate-sidebar, .cs-admin-sidebar { z-index: var(--cs-z-sidebar, 1100); } .cs-modal-backdrop, .cs-admin-modal-backdrop { z-index: var(--cs-z-modal, 2000); } .cs-toast-container { z-index: var(--cs-z-toast, 3000); } /* ============================================================ 44. MOBILE TAP TARGET SAFETY ============================================================ */ @media (max-width: 767.98px) { button, .cs-btn, .cs-nav-action, .cs-candidate-icon-button, .cs-admin-icon-button { min-height: 42px; } } /* ============================================================ 45. LARGE SCREEN CONTENT PROTECTION ============================================================ */ @media (min-width: 1600px) { .cs-container, .container { max-width: var(--cs-container-xl, 1320px); } } /* ============================================================ 46. REDUCED MOTION FALLBACK ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ============================================================ 47. HIGH CONTRAST / FORCED COLORS ============================================================ */ @media (forced-colors: active) { .cs-btn, .cs-card, .cs-input, .cs-select, .cs-textarea { border: 1px solid CanvasText; } } /* ============================================================ 48. PRINT BASE ============================================================ */ @media print { html, body { background: #ffffff !important; color: #000000 !important; } body { min-height: auto; } a { text-decoration: none; } .cs-no-print { display: none !important; } .cs-print-only { display: block !important; } } /* ============================================================ 49. PRINT ONLY DEFAULT ============================================================ */ .cs-print-only { display: none; } /* ============================================================ 50. CAREERSETU PRO MASTER READY ============================================================ */ /* * IMPORTANT DEVELOPMENT RULE: * * Do not place page-specific CSS below this section. * * Use: * * home.css -> Homepage * jobs.css -> Jobs / Companies * auth.css -> Login / Registration * candidate.css -> Candidate Application * admin.css -> Admin Application * * animations.css -> Animation utilities * responsive.css -> Final responsive overrides * * style.css should remain the MASTER ENTRY FILE. */ /* ============================================================ END OF CAREERSETU PRO V50 MASTER STYLESHEET ============================================================ */