/* Categories page — loaded in after global CSS (?v bumps cache after edits) */ /* Categories — UI only (premium dark + gold) */ .middle_wraper.categories-page{ /* overflow-x:hidden alone can create a scroll containment box and clip/stack oddly vs the header dropdown */ overflow-x: clip; overflow-y: visible; max-width: 100%; } /* Top nav: keep Category dropdown fully visible above page content */ .page-categories .header-main, .page-categories #cssmenu, .page-categories #cssmenu > ul, .page-categories #cssmenu ul ul{ overflow: visible !important; } .page-categories #cssmenu ul ul{ z-index: 10050 !important; } .page-categories #cssmenu > ul > li{ position: relative; z-index: 1; } .page-categories #cssmenu > ul > li:hover{ z-index: 10060; } .categories-page{ --lux-champagne: #f2e6c8; --lux-gold-soft: rgba(228, 205, 140, 0.55); --lux-ink: #060607; min-height: calc(100vh - 160px); padding: 0 0 70px; box-sizing: border-box; background: radial-gradient(ellipse 85% 55% at 50% -15%, rgba(212, 175, 110, 0.09), transparent 52%), radial-gradient(circle at 12% 18%, rgba(228, 205, 136, 0.14), transparent 34%), radial-gradient(circle at 88% 22%, rgba(190, 150, 95, 0.1), transparent 32%), linear-gradient(160deg, #030303 0%, #0e0e12 42%, #080809 100%); font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .categories-page .home_banner{ display:none !important; } .categories-page .inner_main{ background: transparent !important; } .categories-page, .categories-page *{ font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; } .categories-page .fa, .categories-page .fa:before{ font-family: FontAwesome !important; } .categories-shell{ max-width: 1120px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; } /* ========== Hero: banner image only, then intro text below (stacked layout) ========== */ .categories-hero{ position: relative; margin: 0; padding: 0; overflow: hidden; background: #050506; } .categories-hero-banner{ margin: 0; padding: 0; line-height: 0; background: #0a090c; } .categories-hero-img{ display: block; width: 100%; height: auto; vertical-align: top; object-fit: cover; max-height: min(52vh, 520px); object-position: center center; } @media (min-width: 768px){ .categories-hero-img{ max-height: min(48vh, 480px); } } .categories-hero-intro{ max-width: 1120px; margin: 0 auto; padding: 32px 15px 36px; box-sizing: border-box; text-align: center; border-top: 1px solid rgba(212, 175, 110, 0.22); background: linear-gradient(180deg, rgba(212, 175, 110, 0.06) 0%, transparent 48%); } .categories-hero-intro::before{ content: ""; display: block; width: min(88px, 22vw); height: 2px; margin: 0 auto 28px; margin-top: -8px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(212, 175, 110, 0.85), rgba(244, 228, 200, 0.75), rgba(212, 175, 110, 0.85), transparent); } /* Single award-categories line — Playfair + gold punctuation (theme) */ .categories-hero-heading{ font-family: "Playfair Display", Georgia, "Times New Roman", serif !important; color: #faf6ec; font-size: clamp(22px, 3.2vw, 34px); font-weight: 500; line-height: 1.35; letter-spacing: 0.04em; margin: 0 auto; padding: 0; max-width: 52rem; text-align: center; text-wrap: balance; font-feature-settings: "kern" 1, "liga" 1; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35); } .categories-hero-heading .categories-hero-slash{ color: rgba(212, 175, 110, 0.92); font-weight: 400; padding: 0 0.06em; text-shadow: 0 0 20px rgba(212, 175, 110, 0.25); } @keyframes catFadeUp{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: translateY(0); } } .categories-hero-heading{ animation: catFadeUp .55s ease both; } .categories-main{ padding-top: 34px; margin-top: 0; } /* Section title text appears once in .categories-hero-heading; no duplicate h2 above accordion */ .categories-page .categories-accordion{ padding-top: 8px; } .categories-accordion{ display: flex; flex-direction: column; gap: 14px; } .event_box{ background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.35); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateZ(0); position: relative; } .event_box::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, rgba(239,207,140,0.75), rgba(202,153,103,0.35)); opacity: 0.9; } .event_box:hover{ border-color: rgba(239,207,140,0.28); box-shadow: 0 34px 70px rgba(0,0,0,0.42), 0 0 0 1px rgba(239,207,140,0.08) inset; } /* Kill legacy inner_pages.css: .event_box float/padding, .event_box .tl { padding:20px 0 0 }, plus.png bg, h2 float */ .categories-page .event_box{ float: none !important; width: 100% !important; padding: 0 !important; margin: 0 0 14px !important; box-sizing: border-box !important; } .categories-page .event_box .contentbox{ float: none !important; width: 100% !important; } .categories-page .event_box .expand.tl{ margin: 0 !important; float: none !important; width: 100% !important; cursor: pointer; position: relative; display: flex !important; align-items: center !important; justify-content: space-between; gap: 14px; box-sizing: border-box !important; /* Equal top/bottom — beats .expand.tl { padding:0 } and .event_box .tl { padding:20px 0 0 } */ padding: 18px 20px 18px 22px !important; background: transparent none !important; background-image: none !important; } .categories-page .event_box .tl.openheader{ background: transparent none !important; background-image: none !important; } .expand{ cursor: pointer; padding: 18px 20px 18px 22px !important; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; box-sizing: border-box; } .expand h2{ margin: 0 !important; padding: 0 !important; flex: 1; min-width: 0; float: none !important; width: auto !important; font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; color: rgba(255,255,255,0.96) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.35; letter-spacing: -0.005em; } .categories-page .event_box .expand.tl h2, .categories-page .event_box .tl h2{ float: none !important; width: auto !important; max-width: none !important; text-align: left !important; } .expand h2 .cat-index{ color: rgba(239,207,140,0.95); font-weight: 700; } .expand::after{ content: "+"; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #111; font-size: 20px; font-weight: 800; line-height: 1; background: linear-gradient(145deg, #f4d48f, #d4a85c 55%, #ca9967); box-shadow: 0 10px 26px rgba(202,153,103,0.28), 0 0 0 1px rgba(255,255,255,0.22) inset; transition: transform .22s ease, filter .22s ease, box-shadow .22s ease; margin: 0; } .expand:hover::after{ filter: brightness(1.03); box-shadow: 0 12px 30px rgba(202,153,103,0.32), 0 0 0 1px rgba(255,255,255,0.26) inset; } .expand.openheader::after{ transform: rotate(45deg); } .expand_area{ /* Bottom padding comes from .rupee itself so the fee bar keeps inner space above the rounded edge */ padding: 0 18px 0 20px; background: rgba(8,8,8,0.86); border-top: 1px solid rgba(255,255,255,0.08); } .expand_area.contentbox{ margin: 0 !important; } /* Do not use .expand_area * — it overrides .rupee footer (line-height/font) from style.css + jea.css */ .expand_area{ color: rgba(255,255,255,0.82) !important; font-size: 14px !important; line-height: 1.7; } .expand_area *:not(.rupee, .rupee *){ color: rgba(255,255,255,0.82) !important; font-size: 14px !important; line-height: 1.7 !important; } .expand_area ul{ list-style: none !important; padding: 22px 24px 24px !important; margin: 0 0 16px !important; border: 1px solid rgba(255,255,255,0.22); border-radius: 16px; background: rgba(0,0,0,0.25); box-sizing: border-box; } .expand_area ul ul{ border: 0 !important; padding: 8px 0 0 4px !important; margin: 10px 0 0 !important; background: transparent !important; border-radius: 0 !important; } .expand_area ul li{ display: flex !important; align-items: flex-start; gap: 12px; padding-left: 0 !important; margin: 0 0 14px !important; } .expand_area ul li:last-child{ margin-bottom: 0 !important; } .expand_area ul li::before{ content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: linear-gradient(135deg, rgba(239,207,140,0.95), rgba(202,153,103,0.95)); box-shadow: 0 0 12px rgba(239,207,140,0.2); position: static !important; left: auto !important; top: auto !important; } /* Beats style.css/.jea.css .rupee { line-height:30px } and .apply_btn { float:right } */ .categories-page .expand_area .rupee{ margin-top: 8px; /* No negative bottom margin — it was pulling the strip flush/clipping padding with event_box overflow */ margin-left: -20px; margin-right: -18px; margin-bottom: 0 !important; /* Extra horizontal inset: icon away from left edge, Login/Apply away from right */ padding: 16px 28px 20px 28px !important; border-top: 0; border-radius: 0 0 20px 20px; width: calc(100% + 38px); box-sizing: border-box; background: linear-gradient(180deg, rgba(32,32,36,0.98), rgba(20,20,24,0.99)) !important; border-top: 1px solid rgba(255,255,255,0.1); display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; align-content: center !important; gap: 14px 18px; min-height: 64px; font-size: 15px !important; line-height: 1.25 !important; font-weight: 600; color: rgba(255,255,255,0.92) !important; } .categories-page .expand_area .rupee__icon{ display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); box-sizing: border-box; } .categories-page .expand_area .rupee__icon img{ width: 26px !important; height: 26px !important; max-width: none !important; padding: 0 !important; object-fit: contain; display: block; vertical-align: middle; } .categories-page .expand_area .rupee__label{ display: flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; min-width: 0; min-height: 0; font-size: 14px !important; line-height: 1.35 !important; font-weight: 600; letter-spacing: -0.01em; text-align: center; color: rgba(255,255,255,0.92) !important; padding: 4px 12px; margin: 0; } .categories-page .expand_area .rupee__action{ display: flex !important; align-items: center !important; justify-content: flex-end !important; align-self: center !important; flex-shrink: 0; } .categories-page .expand_area .rupee .apply_btn{ float: none !important; clear: none !important; margin: 0 !important; text-decoration: none !important; min-height: 42px !important; height: 42px !important; padding: 0 22px !important; border-radius: 999px !important; border: 0 !important; color: #111 !important; font-size: 12px !important; line-height: 1 !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(135deg, #f6e2b3, #e5b96f 45%, #ca9967) !important; box-shadow: 0 10px 24px rgba(202,153,103,0.25), 0 0 0 1px rgba(255,255,255,0.2) inset; display: inline-flex !important; align-items: center !important; justify-content: center !important; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; } .categories-page .expand_area .rupee .apply_btn:hover{ transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 14px 28px rgba(202,153,103,0.3), 0 0 0 1px rgba(255,255,255,0.25) inset; } .general_rules{ margin-top: 38px; border: 1px solid rgba(255,255,255,0.12); border-radius: 28px; overflow: hidden; background: rgba(255,255,255,0.04); box-shadow: 0 26px 52px rgba(0,0,0,0.28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 26px 22px 24px; } .general_rules h4{ margin: 0 0 14px; color: #efcf8c; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .general_rules ul{ list-style: none; padding: 0; margin: 0; } /* Grid: bullet column + text column stay aligned; minmax(0,1fr) lets long lines wrap cleanly */ .categories-page .general_rules ul li{ --gr-bullet: 8px; --gr-gap: 12px; position: relative; display: grid !important; grid-template-columns: var(--gr-bullet) minmax(0, 1fr); column-gap: var(--gr-gap); align-items: start; padding: 8px 0 !important; margin: 10px 0; color: rgba(255,255,255,0.8); line-height: 1.75; text-align: left; word-break: break-word; overflow-wrap: anywhere; } .categories-page .general_rules ul li::before{ content: ""; width: var(--gr-bullet); height: var(--gr-bullet); margin-top: 0.52em; border-radius: 50%; background: linear-gradient(135deg, rgba(239,207,140,0.95), rgba(202,153,103,0.95)); box-shadow: 0 0 10px rgba(239,207,140,0.15); position: static !important; left: auto !important; top: auto !important; align-self: start; } /* Nested fee list: sits in text column, full width */ .categories-page .general_rules ul li > ul{ grid-column: 2; margin: 10px 0 4px 0 !important; padding: 0 !important; list-style: none; } .categories-page .general_rules ul ul li{ padding: 6px 0 !important; margin: 6px 0; display: grid !important; grid-template-columns: var(--gr-bullet) minmax(0, 1fr); column-gap: var(--gr-gap); } .categories-page .general_rules ul ul li::before{ margin-top: 0.5em; } .categories-note{ text-align: center; color: rgba(239,207,140,0.92); margin: 22px 0 0; font-size: 14px; } @media (max-width: 767px){ .categories-hero-img{ max-height: 38vh; } .categories-hero-intro{ padding: 24px 15px 28px; } .categories-hero-heading{ font-size: clamp(17px, 4.5vw, 26px) !important; letter-spacing: 0.03em; line-height: 1.4; } .expand h2{ font-size: 14px !important; } .categories-page .expand_area .rupee{ grid-template-columns: auto 1fr !important; grid-template-rows: auto auto; row-gap: 10px; column-gap: 12px; padding: 16px 20px 18px 20px !important; min-height: 0; align-items: center !important; align-content: center !important; } .categories-page .expand_area .rupee__icon{ grid-column: 1; grid-row: 1 / span 2; align-self: center; } .categories-page .expand_area .rupee__label{ grid-column: 2; grid-row: 1; text-align: left; justify-content: flex-start !important; padding: 0; min-height: 0; } .categories-page .expand_area .rupee__action{ grid-column: 2; grid-row: 2; justify-content: flex-start; } .categories-page .expand_area .rupee .apply_btn{ width: 100%; max-width: 220px; } } /* ========== Professionals page (same hero + lux shell as categories) ========== */ .page-professionals.categories-page .terms_text, .page-professionals .professionals-page-body.terms_text{ background: transparent !important; padding: 8px 0 32px !important; margin-bottom: 0 !important; width: 100% !important; display: block !important; } .page-professionals .terms_text h4{ color: rgba(239, 207, 140, 0.95) !important; font-family: Poppins, system-ui, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; padding: 0 0 10px 0 !important; margin: 28px 0 0 0 !important; border-bottom: 1px solid rgba(239, 207, 140, 0.2) !important; width: 100% !important; } .page-professionals .terms_text h4:first-of-type{ margin-top: 0 !important; } .page-professionals .terms_text p, .page-professionals .terms_text ul li{ color: rgba(245, 242, 238, 0.9) !important; font-size: 15px !important; line-height: 1.7 !important; } .page-professionals .terms_text p b, .page-professionals .terms_text ul li{ color: rgba(252, 248, 240, 0.95) !important; } .page-professionals .terms_text .rupee{ display: flex !important; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; padding: 18px 22px !important; background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02)) !important; border: 1px solid rgba(255,255,255,0.12) !important; border-radius: 18px !important; width: 100% !important; box-sizing: border-box !important; } .page-professionals .terms_text .rupee > span{ flex-shrink: 0; } .page-professionals .terms_text .rupee img{ max-height: 44px; width: auto; vertical-align: middle; } .page-professionals .terms_text .apply_btn_student{ margin-left: auto; } @media (max-width: 600px){ .page-professionals .terms_text .rupee{ flex-direction: column; align-items: flex-start; } .page-professionals .terms_text .apply_btn_student{ margin-left: 0; width: 100%; text-align: center; } }