/* * College Archive Page Stylesheet * * Implements transitions for List/Grid layouts, mobile bottom drawers, * scrollbars, overlay blurs, and container styling overrides. * * @package AstraChild */ /* Body overrides. * overflow:visible is REQUIRED for position:sticky on the filter sidebar. * Astra theme sets overflow-x:hidden on body which the browser auto-converts * to overflow-y:auto (CSS spec), making body a silent scroll container. * A non-scrolling scroll container traps sticky elements inside it. * Setting overflow:visible removes body from the scroll-container chain so * sticky resolves correctly against which is the actual scroller. */ body.post-type-archive-college, body.tax-college_state, body.tax-college_city, body.tax-college_course, body.tax-college_ownership, body.tax-college_type, body.tax-college_approval { background-color: #f8fafc !important; color: #0f172a !important; overflow: visible !important; } /* Explicit font typography rules */ .cms-archive-wrap, .cms-archive-wrap h1, .cms-archive-wrap h2, .cms-archive-wrap h3, .cms-archive-wrap h4, .cms-archive-wrap h5, .cms-archive-wrap h6, .cms-archive-wrap p, .cms-archive-wrap span, .cms-archive-wrap a, .cms-archive-wrap select, .cms-archive-wrap input, .cms-archive-wrap label, .cms-archive-wrap button { font-family: "CERF", 'Inter', sans-serif !important; letter-spacing: -0.015em; } /* Custom smooth scrollbars */ .custom-scroll::-webkit-scrollbar { width: 5px; } .custom-scroll::-webkit-scrollbar-track { background: #f8fafc; border-radius: 6px; } .custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; } /* Glassmorphism support */ .glass-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Remove Astra theme container styling and background colors on college archive page */ .post-type-archive-college.ast-header-break-point #content, .post-type-archive-college #content, .tax-college_state.ast-header-break-point #content, .tax-college_state #content, .tax-college_city.ast-header-break-point #content, .tax-college_city #content, .tax-college_course.ast-header-break-point #content, .tax-college_course #content, .tax-college_ownership.ast-header-break-point #content, .tax-college_ownership #content, .tax-college_type.ast-header-break-point #content, .tax-college_type #content, .tax-college_approval.ast-header-break-point #content, .tax-college_approval #content { background: #f8fafc !important; padding: 0 !important; width: 100% !important; display: block !important; } .post-type-archive-college .site-content, .tax-college_state .site-content, .tax-college_city .site-content, .tax-college_course .site-content, .tax-college_ownership .site-content, .tax-college_type .site-content, .tax-college_approval .site-content { background: #f8fafc !important; padding: 0 !important; width: 100% !important; } .post-type-archive-college #main, .tax-college_state #main, .tax-college_city #main, .tax-college_course #main, .tax-college_ownership #main, .tax-college_type #main, .tax-college_approval #main { background: transparent !important; padding: 0 !important; margin: 0 !important; width: 100% !important; } .post-type-archive-college .site-content .ast-container, .tax-college_state .site-content .ast-container, .tax-college_city .site-content .ast-container, .tax-college_course .site-content .ast-container, .tax-college_ownership .site-content .ast-container, .tax-college_type .site-content .ast-container, .tax-college_approval .site-content .ast-container { max-width: 100% !important; padding: 0 !important; display: block !important; } .post-type-archive-college #primary, .tax-college_state #primary, .tax-college_city #primary, .tax-college_course #primary, .tax-college_ownership #primary, .tax-college_type #primary, .tax-college_approval #primary { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* Explicit container bounds */ .cms-archive-wrap .container { max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 15px !important; padding-right: 15px !important; width: 100%; } /* Custom robust grid layout rules for split workspace */ .cms-archive-wrap .cms-archive-grid { display: flex !important; gap: 2rem !important; width: 100% !important; align-items: flex-start !important; } @media (min-width: 1025px) { .cms-archive-wrap .container { padding-left: 20px !important; padding-right: 20px !important; } /* CSS sticky sidebar — works now that body overflow:visible removes * the silent scroll container Astra was creating on body. */ .filter-sidebar-drawer { position: sticky !important; top: 6rem !important; transform: none !important; display: block !important; box-shadow: none !important; background: transparent !important; width: 260px !important; flex-shrink: 0 !important; } #filterSidebar { z-index: 1 !important; } /* Lock listings column width to prevent flexbox formatting context shifts */ .cms-archive-wrap .cms-archive-grid > div.flex-1 { max-width: calc(100% - 292px) !important; } /* Hide mobile-specific filters button and backdrop on larger screens */ #mobileFilterBtn { display: none !important; } .filter-backdrop { display: none !important; } } @media (min-width: 1280px) { .cms-archive-wrap .container { padding-left: 0px !important; padding-right: 0px !important; } } /* overflow-y:scroll forces the scrollbar to always be visible so the * page width never shifts between list-mode and grid-mode. * scrollbar-gutter:stable backs this up as a fallback. */ html { overflow-y: scroll !important; scrollbar-gutter: stable !important; } /* Base wrapper layout — NO overflow property here. * Any overflow on this element gets implicitly converted to overflow-y:auto * by the browser, making it a scroll container that traps position:sticky. */ .cms-archive-wrap { width: 100% !important; min-height: 101vh !important; } /* Right column: replaces Tailwind space-y-4 to avoid flex-sibling * margin conflicts that caused different widths in list vs grid mode */ .cms-right-col { display: flex !important; flex-direction: column !important; gap: 1rem !important; min-width: 0 !important; } #collegesContainer { width: 100% !important; min-width: 0 !important; } /* View Mode Styles and Responsive Grid Columns */ /* 1. Mobile behavior: screen width < 768px (Force Grid Cards, 1 per row, hide switcher) */ @media (max-width: 767px) { /* Hide Layout Switcher Toggles entirely on mobile */ #viewToggleList, #viewToggleGrid, .view-toggle-btn, .border-l.border-slate-200\/80.pl-3, .flex.items-center.gap-1\.5.border-l.border-slate-200\/80.pl-3 { display: none !important; } /* Show Mobile Filters Button */ #mobileFilterBtn { display: flex !important; } /* Force container to stack vertically */ #collegesContainer { display: flex !important; flex-direction: column !important; gap: 1.5rem !important; width: 100% !important; } /* Hide list card views entirely on mobile */ #collegesContainer .list-card-view { display: none !important; } /* Force grid cards to display 1 per row (100% width) */ #collegesContainer .grid-card-view { display: flex !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; } } /* 2. Tablet Portrait and above: screen width >= 768px (Supports List and 3-Column Grid) */ @media (min-width: 768px) { /* Show Layout Switcher Toggles */ #viewToggleList, #viewToggleGrid, .view-toggle-btn { display: flex !important; } /* List View Mode */ #collegesContainer.view-mode-list { display: block !important; width: 100% !important; } #collegesContainer.view-mode-list .list-card-view { display: grid !important; width: 100% !important; min-width: 0 !important; margin-bottom: 1rem !important; } #collegesContainer.view-mode-list .grid-card-view { display: none !important; } /* Grid View Mode: flex layouts */ #collegesContainer.view-mode-grid { display: flex !important; flex-wrap: wrap !important; gap: 1.5rem !important; width: 100% !important; min-width: 0 !important; } #collegesContainer.view-mode-grid .list-card-view { display: none !important; } } /* 2.1 Tablet Portrait (Low-range): 768px to 899px (2 cards per row) */ @media (min-width: 768px) and (max-width: 899px) { #collegesContainer.view-mode-grid .grid-card-view { display: flex !important; flex-direction: column !important; width: calc(50% - 0.75rem) !important; min-width: 0 !important; } } /* 2.2 Tablet Portrait (High-range) & Landscape & Laptop & Desktop: 900px+ (3 cards per row) */ @media (min-width: 900px) { #collegesContainer.view-mode-grid .grid-card-view { display: flex !important; flex-direction: column !important; width: calc(33.333% - 1rem) !important; min-width: 0 !important; } } /* View Mode Transition Animations */ .college-card-wrapper { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ═══════════════════════════════════════════════════════════════════════════ GRID CARD — gcc-* (grid-college-card) component Matches the uploaded screenshot exactly. ═══════════════════════════════════════════════════════════════════════════ */ /* Outer card shell */ .grid-card-view { background: #ffffff; border-radius: 16px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); border: 1px solid #ecedf0; display: flex; flex-direction: column; overflow: hidden; transition: box-shadow 0.22s ease, transform 0.22s ease; } .grid-card-view:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } /* ── 1. NIRF Rank Bar ──────────────────────────────────────────────────── */ .gcc-nirf-bar { display: flex; align-items: center; gap: 6px; background: #f0ebf7 !important; border-bottom: 1px solid #e5dcf2 !important; padding: 9px 20px; color: #653392; } .gcc-nirf-bar svg { flex-shrink: 0; color: #653392; } .gcc-nirf-bar span { font-size: 11px; font-weight: 600; letter-spacing: 1px !important; text-transform: uppercase; color: #653392; } .gcc-nirf-bar--empty { height: 38px; /* keep cards aligned when no rank */ } /* ── 2. Card Header ────────────────────────────────────────────────────── */ .gcc-header { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 14px; } /* Logo — rounded square, NOT circle. Matches reference screenshot. */ .gcc-logo { width: 56px; height: 56px; border-radius: 12px; border: 1px solid #e2e2e8; background: #f9f9fb; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; padding: 4px; } .gcc-logo__img { width: 100%; height: 100%; object-fit: contain; } /* Name / location / badges */ .gcc-meta { flex: 1; min-width: 0; } .gcc-name { font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.3; letter-spacing: 0.6px !important; margin: 0 0 3px; } .gcc-name a { color: inherit; text-decoration: none; } .gcc-name a:hover { color: #653392; } .gcc-location { font-size: 12px; color: #64748b; letter-spacing: 0px !important; margin: 0 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gcc-badges { display: flex; flex-wrap: wrap; gap: 6px; height: 24px !important; overflow: hidden !important; margin-top: 8px; } .gcc-badge { font-size: 12px; font-weight: 500; letter-spacing: 0px !important; padding: 3px 10px; display: inline-block !important; line-height: 1.2 !important; height: 22px !important; border-radius: 999px; white-space: nowrap; } /* ── 3. Divider ────────────────────────────────────────────────────────── */ .gcc-divider { border: none; border-top: 1px solid #f1f0f5; margin: 0 20px; } /* ── 4. Stats Grid ─────────────────────────────────────────────────────── */ .gcc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 16px 20px; } .gcc-stat__label { display: block; font-size: 12px; color: #94a3b8; font-weight: 400; letter-spacing: 0px !important; line-height: 100%; margin-bottom: 3px; } .gcc-stat__value { font-size: 13px; font-weight: 600; letter-spacing: 0.6px !important; line-height: 100%; color: #0f172a; } .gcc-stat__value--na { color: #94a3b8; } .gcc-stat__link { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; line-height: 100%; letter-spacing: 0.6px !important; color: #432dd7; text-decoration: none; } .gcc-stat__link:hover { text-decoration: underline; } /* ── 5. CTA Footer ─────────────────────────────────────────────────────── */ .gcc-footer { padding: 14px 20px 18px; margin-top: auto; /* push CTA to bottom for equal-height cards */ } .gcc-cta { display: block; width: 100%; text-align: center; background: #653392; color: #ffffff !important; font-size: 13px; font-weight: 600; line-height: 100%; letter-spacing: 0.6px !important; padding: 13px 20px; border-radius: 999px; text-decoration: none !important; transition: background 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 2px 10px rgba(101, 51, 146, 0.25); } .gcc-cta:hover { background: #51237a; box-shadow: 0 4px 18px rgba(101, 51, 146, 0.35); color: #ffffff !important; } /* Mobile & Tablet Portrait Bottom Drawer Filters Styling */ @media (max-width: 1024px) { .filter-sidebar-drawer { position: fixed; bottom: 0; left: 0; right: 0; background: #ffffff; border-top-left-radius: 1.5rem; border-top-right-radius: 1.5rem; z-index: 100; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.1), 0 -8px 10px -6px rgba(0, 0, 0, 0.1); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .filter-sidebar-drawer.drawer-open { transform: translateY(0); } .filter-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .filter-backdrop.backdrop-open { opacity: 1; pointer-events: auto; } .drawer-drag-handle { width: 48px; height: 5px; background-color: #e2e8f0; border-radius: 9999px; margin: 12px auto; cursor: grab; flex-shrink: 0; } .drawer-drag-handle:active { cursor: grabbing; } } /* Skeleton Loading Shimmer for AJAX queries */ .shimmer { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer-load 1.5s infinite; } @keyframes shimmer-load { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Ensure the footer is layered on top of the sticky sidebar so the sidebar stays clean */ .site-footer, .ast-site-footer, .ast-site-footer-layout, .ast-footer-builder-layout, .site-primary-footer-wrap, .site-below-footer-wrap, .site-above-footer-wrap, .ast-footer-copyright, footer, #colophon { position: relative !important; z-index: 999 !important; } /* Breadcrumbs custom styling: 1 line, left-aligned, rounded border wrapper */ .gcc-breadcrumbs { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; border: 1px solid #e2e8f0 !important; border-radius: 999px !important; /* rounded border pill shape */ padding: 5px 14px !important; background: #f8fafc !important; margin-bottom: 1.5rem !important; width: max-content !important; max-width: 100% !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important; } .gcc-breadcrumbs a, .gcc-breadcrumbs span { display: inline-flex !important; align-items: center !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; line-height: 100% !important; letter-spacing: 0px !important; } .gcc-breadcrumbs a { color: #64748b !important; font-weight: 500 !important; } .gcc-breadcrumbs a:hover { color: #0f172a !important; } .gcc-breadcrumbs span.text-slate-600 { color: #0f172a !important; font-weight: 600 !important; letter-spacing: 0.3px !important; } .gcc-breadcrumbs span.text-\[9px\] { color: #94a3b8 !important; margin: 0 2px !important; } /* Sub-header under breadcrumbs: 10px uppercase, font-weight 600, letter-spacing 0.6px, brand black/slate color */ .gcc-archive-sub-header, .gcc-archive-sub-header span { font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.6px !important; color: #0f172a !important; text-transform: uppercase !important; } /* Main page heading: letter-spacing 0.6px */ .cms-archive-wrap h2 { letter-spacing: 0.6px !important; } /* Paragraph elements: letter-spacing 0 */ .cms-archive-wrap p { letter-spacing: 0px !important; } /* Search input field: padding-left to prevent text overlap with icon */ .gcc-search-input { padding-left: 42px !important; padding-top: 10px !important; padding-bottom: 10px !important; letter-spacing: 0px !important; } .gcc-search-icon { left: 16px !important; color: #94a3b8 !important; } /* Controls bar styles: letter-spacing 0.6px on all texts, prevent "Sort By" wrap */ .gcc-controls-bar span, .gcc-controls-bar select, .gcc-controls-bar option, .gcc-controls-bar button { letter-spacing: 0.6px !important; } .gcc-sort-label { white-space: nowrap !important; margin-right: 6px !important; } .gcc-sort-select { cursor: pointer !important; } /* Mobile responsive layout for controls bar: stack count label above filters and sorting selectors */ @media (max-width: 767px) { .gcc-controls-bar { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding: 14px 18px !important; } .gcc-controls-right { display: flex !important; flex-direction: row !important; width: 100% !important; justify-content: space-between !important; align-items: center !important; border-top: 1px solid #f1f0f5 !important; padding-top: 12px !important; margin-top: 2px !important; } /* Ensure sort container doesn't look squeezed */ .gcc-controls-right > div { display: flex !important; align-items: center !important; } } /* Filter sidebar drawer text styling: letter-spacing 0.6px */ .filter-sidebar-drawer h4, .filter-sidebar-drawer span, .filter-sidebar-drawer label, .filter-sidebar-drawer button, .filter-sidebar-drawer p { letter-spacing: 0.6px !important; } /* Counselor Desk main title heading color fix */ .gcc-counsel-title { color: #ffffff !important; } /* Counselor Desk: set letter-spacing to 0.6px for all font-weight 700 elements */ .gcc-counsel-box h4, .gcc-counsel-box .font-bold, .gcc-counsel-box button { letter-spacing: 0.6px !important; } /* Counselor Desk: make call-back button fully rounded and font-weight 600 */ .gcc-counsel-btn { border-radius: 999px !important; font-weight: 600 !important; } /* ── 6. Popup Modal Styles ─────────────────────────────────────────────── */ .gcc-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; } .gcc-modal.modal-open { display: flex; } .gcc-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .gcc-modal-content { position: relative; background: #ffffff; border-radius: 24px; padding: 32px; width: 100%; max-width: 440px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); z-index: 10; transform: scale(0.9); opacity: 0; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; } .gcc-modal.modal-open .gcc-modal-content { transform: scale(1); opacity: 1; } .gcc-modal-close { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 24px; color: #64748b; cursor: pointer; line-height: 1; transition: color 0.15s ease; } .gcc-modal-close:hover { color: #0f172a; } .gcc-modal-header { margin-bottom: 24px; } .gcc-modal-title { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 6px; letter-spacing: 0.3px; } .gcc-modal-subtitle { font-size: 12px; color: #64748b; line-height: 1.5; } .gcc-form-group { margin-bottom: 20px; } .gcc-form-group label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; color: #475569; margin-bottom: 6px; letter-spacing: 0.5px; } .gcc-form-group input { width: 100% !important; padding: 11px 16px !important; border: 1px solid #cbd5e1 !important; border-radius: 12px !important; font-size: 13px !important; background: #f8fafc !important; color: #0f172a !important; outline: none !important; transition: border-color 0.15s ease, background-color 0.15s ease !important; } .gcc-form-group input:focus { border-color: #653392 !important; background: #ffffff !important; } .gcc-form-submit { display: block; width: 100%; background: #653392; color: #ffffff !important; font-size: 13px; font-weight: 600; padding: 13px 20px; border: none; border-radius: 999px; cursor: pointer; text-align: center; transition: background 0.18s ease, box-shadow 0.18s ease; box-shadow: 0 4px 12px rgba(101, 51, 146, 0.25); letter-spacing: 0.5px; } .gcc-form-submit:hover { background: #51237a; box-shadow: 0 6px 18px rgba(101, 51, 146, 0.35); } .gcc-form-submit:disabled { background: #94a3b8; cursor: not-allowed; box-shadow: none; } .gcc-form-message { font-size: 12px; margin-bottom: 16px; display: none; padding: 10px 14px; border-radius: 10px; } .gcc-form-message.msg-error { display: block; background: #fef2f2; color: #991b1b; border: 1px solid #fee2e2; } .gcc-form-message.msg-success { display: block; background: #ecfdf5; color: #065f46; border: 1px solid #d1fae5; } /* ── 7. Pagination Styles ────────────────────────────────────────────── */ #paginationContainer ul.page-numbers { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 6px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; } #paginationContainer ul.page-numbers li { margin: 0 !important; padding: 0 !important; list-style: none !important; } #paginationContainer ul.page-numbers li a.page-numbers, #paginationContainer ul.page-numbers li span.page-numbers { display: flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; font-size: 13px !important; font-weight: 600 !important; color: #475569 !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 12px !important; text-decoration: none !important; transition: all 0.2s ease !important; cursor: pointer !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important; } #paginationContainer ul.page-numbers li a.page-numbers:hover { background: #f8fafc !important; color: #0f172a !important; border-color: #cbd5e1 !important; transform: translateY(-1px) !important; } #paginationContainer ul.page-numbers li span.page-numbers.current { background: #653392 !important; color: #ffffff !important; border-color: #653392 !important; box-shadow: 0 4px 12px rgba(101, 51, 146, 0.2) !important; } #paginationContainer ul.page-numbers li a.prev, #paginationContainer ul.page-numbers li a.next { background: #ffffff !important; color: #653392 !important; border-color: #e2e8f0 !important; } #paginationContainer ul.page-numbers li a.prev:hover, #paginationContainer ul.page-numbers li a.next:hover { border-color: #653392 !important; background: #fdfbff !important; } /* ── 8. List Card Image and Height Uniformity ─────────────────────────── */ @media (min-width: 768px) { #collegesContainer.view-mode-list .list-card-view { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; height: 235px !important; max-height: 235px !important; overflow: hidden !important; } #collegesContainer.view-mode-list .list-card-view .gcc-list-img-col { height: 100% !important; min-height: 100% !important; max-height: 100% !important; overflow: hidden !important; } #collegesContainer.view-mode-list .list-card-view .gcc-list-img-col img { height: 100% !important; width: 100% !important; object-fit: cover !important; } #collegesContainer.view-mode-list .list-card-view .gcc-list-info-col, #collegesContainer.view-mode-list .list-card-view .gcc-list-action-col { height: 100% !important; max-height: 100% !important; overflow: hidden !important; } } /* ── 9. List Card Text Spacing ────────────────────────────────────────── */ .list-card-view h3, .list-card-view a, .list-card-view strong, .list-card-view span, .list-card-view p, .list-card-view div, .list-card-view button { letter-spacing: 0.6px !important; } /* Font weight 400 elements inside list card: override letter-spacing to 0px */ .list-card-view .font-normal, .list-card-view .gcc-list-info-col p:not(.font-semibold):not(.font-bold), .list-card-view .gcc-list-info-col span.font-normal { letter-spacing: 0px !important; }