/* ═══════════════════════════════════════════════════════ HSC College Search — front-end styles All rules are scoped to .hcs-wrap so the active theme is never affected and never overrides the card design. NOTE (v3.13.1): the front-end scope is written as `.hcs-wrap.hcs-wrap.hcs-wrap` (the class is repeated on purpose). When this shortcode is embedded inside another plugin/page that applies broad, high-specificity resets to ALL of its descendants — e.g. the XI Class Admission Homepage, whose stylesheet carries rules such as `.ebxi-root.ebxi-root div{font:inherit}` and `.ebxi-root.ebxi-root *{margin:0;padding:0}` (specificity 0,2,1 / 0,2,0) — a single `.hcs-wrap` class loses the cascade and the card design collapses. Repeating the class raises every rule two class levels so the search UI always wins, no matter where it is embedded or in what order the stylesheets load. The modal (.hcs-modal) is a direct child of , so it is never nested and is left untouched. ═══════════════════════════════════════════════════════ */ .hcs-wrap.hcs-wrap.hcs-wrap, .hcs-modal{ --hcs-blue:#0080b9; --hcs-blue-deep:#045c86; --hcs-blue-darker:#033f5e; --hcs-ink:#06283b; --hcs-sky:#e6f3fb; --hcs-sky-2:#d3ebf7; --hcs-gold:#f5a623; --hcs-paper:#f4f8fb; --hcs-white:#fff; --hcs-line:#cfe3ef; --hcs-muted:#5a7486; --hcs-green:#1f9d76; --hcs-red:#e53e3e; --hcs-shadow:0 18px 40px -20px rgba(4,60,90,.35); --hcs-shadow-sm:0 8px 22px -14px rgba(4,60,90,.25); --hcs-radius:18px; font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--hcs-ink); line-height:1.5; -webkit-font-smoothing:antialiased; text-align:left; } .hcs-wrap.hcs-wrap.hcs-wrap{ max-width:1100px; margin:0 auto; padding:4px 0 8px; } .hcs-wrap.hcs-wrap.hcs-wrap *, .hcs-wrap.hcs-wrap.hcs-wrap *::before, .hcs-wrap.hcs-wrap.hcs-wrap *::after, .hcs-modal *, .hcs-modal *::before, .hcs-modal *::after{box-sizing:border-box} .hcs-wrap.hcs-wrap.hcs-wrap a,.hcs-modal a{color:inherit;text-decoration:none;box-shadow:none} .hcs-wrap.hcs-wrap.hcs-wrap a:hover,.hcs-modal a:hover{text-decoration:none} .hcs-wrap.hcs-wrap.hcs-wrap svg,.hcs-modal svg{display:block;flex-shrink:0} .hcs-wrap.hcs-wrap.hcs-wrap [hidden],.hcs-modal[hidden]{display:none !important} /* ═══════════ FILTER BAR ═══════════ */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-filter-bar{ background:#fff; border:1px solid var(--hcs-line); border-radius:var(--hcs-radius); padding:14px; box-shadow:var(--hcs-shadow-sm); margin:0 0 13px; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-filter-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; align-items:end; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-filter-row + .hcs-filter-row{margin-top:9px} .hcs-wrap.hcs-wrap.hcs-wrap select.hcs-dd:disabled{ background-color:#f4f6f8; color:var(--hcs-muted); cursor:not-allowed; opacity:1; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-filter-actions{ display:flex; gap:8px; margin-top:11px; padding-top:11px; border-top:1px solid var(--hcs-line); } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-field{min-width:0} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-field-label{ display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.09em; color:var(--hcs-muted); font-weight:600; margin:0 0 6px; line-height:1.3; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-req{color:var(--hcs-red)} .hcs-wrap.hcs-wrap.hcs-wrap select.hcs-dd, .hcs-wrap.hcs-wrap.hcs-wrap input.hcs-dd{ width:100%; height:auto; min-height:0; font-family:inherit; font-size:.8rem; font-weight:600; color:var(--hcs-ink); padding:9px 11px; margin:0; border:1px solid var(--hcs-line); border-radius:10px; background:#fff; -webkit-appearance:none; -moz-appearance:none; appearance:none; transition:border-color .18s,box-shadow .18s; line-height:1.4; max-width:none; } .hcs-wrap.hcs-wrap.hcs-wrap select.hcs-dd{ cursor:pointer; padding-right:28px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230080b9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; } .hcs-wrap.hcs-wrap.hcs-wrap select.hcs-dd:focus, .hcs-wrap.hcs-wrap.hcs-wrap input.hcs-dd:focus{ outline:none; border-color:var(--hcs-blue); box-shadow:0 0 0 3px rgba(0,128,185,.13); } .hcs-wrap.hcs-wrap.hcs-wrap select.hcs-dd.hcs-err, .hcs-wrap.hcs-wrap.hcs-wrap input.hcs-dd.hcs-err{ border-color:var(--hcs-red); box-shadow:0 0 0 3px rgba(229,62,62,.13); } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-field-err{ font-size:.62rem; color:var(--hcs-red); font-weight:600; margin-top:4px; display:none; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-field-err.hcs-show{display:block} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-search-wrap{grid-column:1/-1;display:flex;gap:8px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-filter-actions .hcs-btn-search{flex:1 1 auto;max-width:280px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-filter-actions .hcs-btn-reset{flex:0 0 auto} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-btn-search, .hcs-wrap.hcs-wrap.hcs-wrap .hcs-btn-reset{ font-family:inherit; font-weight:700; font-size:.82rem; border-radius:10px; cursor:pointer; transition:background .18s,color .18s,border-color .18s; display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; text-transform:none; letter-spacing:normal; line-height:1.3; margin:0; text-shadow:none; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-btn-search{ flex:1; padding:10px 12px; border:none; background:var(--hcs-blue); color:#fff; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-btn-search:hover, .hcs-wrap.hcs-wrap.hcs-wrap .hcs-btn-search:focus{background:var(--hcs-blue-deep);color:#fff} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-btn-reset{ padding:10px 16px; border:1.5px solid var(--hcs-line); background:#fff; color:var(--hcs-muted); flex-shrink:0; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-btn-reset:hover, .hcs-wrap.hcs-wrap.hcs-wrap .hcs-btn-reset:focus{ border-color:var(--hcs-blue); color:var(--hcs-blue); background:var(--hcs-sky); } .hcs-wrap.hcs-wrap.hcs-wrap button:focus-visible, .hcs-wrap.hcs-wrap.hcs-wrap select:focus-visible, .hcs-wrap.hcs-wrap.hcs-wrap input:focus-visible, .hcs-wrap.hcs-wrap.hcs-wrap a:focus-visible{outline:2px solid var(--hcs-blue);outline-offset:2px} /* ═══════════ COUNT BADGE ═══════════ */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-count-badge{ display:flex; align-items:stretch; gap:14px; margin-bottom:16px; background:linear-gradient(135deg,var(--hcs-blue),var(--hcs-blue-deep)); color:#fff; border-radius:13px; padding:12px 18px; box-shadow:var(--hcs-shadow-sm); } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cb-num{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding-right:16px; border-right:1px solid rgba(255,255,255,.28); } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cb-text{flex:1;display:flex;align-items:center;padding-left:4px;min-width:0} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-big{font-family:'Sora',sans-serif;font-weight:800;font-size:2rem;line-height:1;color:#fff} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-lab{font-size:.78rem;color:#d3e9f5} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-lab b{color:#fff;font-weight:600} /* ═══════════ GRID ═══════════ */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} /* ═══════════ INFOGRAPHIC CARD ═══════════ */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc{ background:var(--hcs-white); border:1px solid var(--hcs-line); border-radius:16px; box-shadow:var(--hcs-shadow-sm); display:flex; flex-direction:column; overflow:hidden; transition:transform .2s,box-shadow .2s,border-color .2s; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc:hover{ transform:translateY(-4px); border-color:var(--hcs-blue); box-shadow:var(--hcs-shadow); } /* ── header ── */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-header{ background:var(--hcs-blue); padding:12px 14px 12px 16px; display:flex; align-items:center; gap:12px; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-header-content{flex:1 1 0;min-width:0;overflow:hidden} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-name{ font-family:'Sora',sans-serif; font-size:.95rem; font-weight:700; color:#fff; line-height:1.28; margin:0 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-meta{ display:flex; flex-wrap:nowrap; gap:3px 10px; font-size:.67rem; font-weight:600; color:rgba(255,255,255,.8); white-space:nowrap; overflow:hidden; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-meta span{display:flex;align-items:center;gap:3px;white-space:nowrap;flex-shrink:0} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-meta span:last-child{overflow:hidden;text-overflow:ellipsis;flex-shrink:1} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-meta .hcs-val{color:#fff;font-weight:700} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-meta .hcs-meta-sep{color:rgba(255,255,255,.4);font-size:.65rem;line-height:1} /* ── rank badge ── */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-rank-badge{flex:0 0 20%;display:flex;align-items:center;justify-content:center} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-rank-circle{ width:58px;height:58px; border-radius:50%; background:#f5c200; box-shadow:0 3px 10px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.35); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; flex-shrink:0; text-align:center; padding:4px; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-rank-circle.hcs-rank-none{background:#e6eef3;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-rank-circle .hcs-rn{ font-family:'Sora',sans-serif; font-size:.88rem;font-weight:800; color:#1a1000;line-height:1.1; letter-spacing:-.01em;width:100%; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-rank-circle .hcs-rl{ font-family:'Sora',sans-serif; font-size:.48rem;font-weight:800; color:#3d2800; text-transform:uppercase; letter-spacing:.04em; line-height:1.3;width:100%; white-space:normal;word-break:break-word; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-rank-circle.hcs-rank-none .hcs-rn, .hcs-wrap.hcs-wrap.hcs-wrap .hcs-rank-circle.hcs-rank-none .hcs-rl{color:var(--hcs-muted)} /* ── section label ── */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-sec-label{ font-size:.6rem;font-weight:800; text-transform:uppercase;letter-spacing:.1em; color:var(--hcs-blue-deep); display:flex;align-items:center;gap:6px; margin-bottom:8px; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-sec-label::after{content:'';flex:1;height:1.5px;background:var(--hcs-sky-2);border-radius:1px} /* ── track record ── */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-track-zone{padding:12px 16px 0} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-track-inner{display:flex;align-items:center;gap:12px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-donut-wrap{position:relative;width:88px;height:88px;flex-shrink:0} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-donut-wrap svg{width:88px;height:88px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-donut-track{fill:none;stroke:var(--hcs-sky-2);stroke-width:8} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-donut-ring{fill:none;stroke-width:8;stroke-linecap:round} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-donut-center{ position:absolute;inset:0;padding:0 4px;text-align:center; display:flex;flex-direction:column; align-items:center;justify-content:center; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-donut-pct{font-family:'Sora',sans-serif;font-size:1.02rem;font-weight:800;color:var(--hcs-ink);line-height:1.05;letter-spacing:-.02em;white-space:nowrap} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-donut-sub{font-size:.52rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--hcs-muted);margin-top:2px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-stat-pills{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-stat-pill{ display:flex;justify-content:space-between;align-items:center; background:rgba(230,243,251,.45); border-radius:7px;padding:5px 9px;gap:8px; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-stat-pill .hcs-sk{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--hcs-blue-darker)} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-stat-pill .hcs-sv{font-family:'Sora',sans-serif;font-size:.86rem;font-weight:800;color:var(--hcs-ink)} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-stat-pill .hcs-sv.hcs-green{color:#137a5a} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-stat-pill .hcs-sv.hcs-blue{color:var(--hcs-blue)} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-nodata{ background:rgba(230,243,251,.45); border:1px dashed var(--hcs-line); border-radius:9px; padding:12px; font-size:.7rem; font-weight:600; color:var(--hcs-muted); text-align:center; } /* ── admission table ── */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-adm-zone{padding:10px 16px 14px;flex:1;display:flex;flex-direction:column} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-adm-zone .hcs-sec-label{margin-top:12px} .hcs-wrap.hcs-wrap.hcs-wrap table.hcs-adm-tbl{ width:100%; border-collapse:collapse; margin:0; border:none; background:transparent; font-size:inherit; table-layout:auto; } .hcs-wrap.hcs-wrap.hcs-wrap table.hcs-adm-tbl thead tr{border-bottom:2px solid var(--hcs-sky-2);background:transparent} .hcs-wrap.hcs-wrap.hcs-wrap table.hcs-adm-tbl thead th{ font-size:.58rem;font-weight:800; text-transform:uppercase;letter-spacing:.06em; color:var(--hcs-blue-deep); padding:4px 6px 5px; text-align:left; background:transparent; border:none; } .hcs-wrap.hcs-wrap.hcs-wrap table.hcs-adm-tbl thead th:not(:first-child){text-align:center} .hcs-wrap.hcs-wrap.hcs-wrap table.hcs-adm-tbl tbody tr{background:transparent} .hcs-wrap.hcs-wrap.hcs-wrap table.hcs-adm-tbl tbody td{ font-size:.76rem; padding:6px; border:none; border-bottom:1px dashed var(--hcs-line); vertical-align:middle; background:transparent; } .hcs-wrap.hcs-wrap.hcs-wrap table.hcs-adm-tbl tbody tr:last-child td{border-bottom:none} .hcs-wrap.hcs-wrap.hcs-wrap table.hcs-adm-tbl tbody tr.hcs-row-active td{background:rgba(230,243,251,.7)} .hcs-wrap.hcs-wrap.hcs-wrap table.hcs-adm-tbl tbody tr.hcs-row-active .hcs-g-name{font-weight:800} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-g-dot{ display:inline-block;width:7px;height:7px; border-radius:50%;margin-right:5px; vertical-align:middle;flex-shrink:0; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-g-name{font-weight:600;color:var(--hcs-ink);display:flex;align-items:center} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-g-gpa{font-family:'Sora',sans-serif;font-weight:800;font-size:.8rem;color:var(--hcs-blue);text-align:center} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-td-none,.hcs-modal .hcs-td-none{text-align:center;color:var(--hcs-muted)} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-g-seats{font-size:.72rem;font-weight:600;color:var(--hcs-muted);text-align:center} /* ── action ── */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-action{margin:0 16px 14px;display:flex;gap:7px} /* Only one button left (the other is switched off in settings): let it take the full width rather than sit half-empty. */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-action-single a, .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-action-single button{flex:1 1 100%} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-action a, .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-action button{ display:flex;align-items:center;justify-content:center;gap:5px; font-weight:700;font-size:.74rem; padding:9px 12px;border-radius:9px; transition:background .18s,color .18s,border-color .18s; flex:1;text-align:center; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-action button{ font-family:inherit; cursor:pointer; margin:0; text-transform:none; letter-spacing:normal; line-height:1.3; text-shadow:none; -webkit-appearance:none; appearance:none; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-action .hcs-btn-view{border:1.5px solid var(--hcs-blue);color:var(--hcs-blue);background:#fff} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-action .hcs-btn-view:hover{background:var(--hcs-sky);color:var(--hcs-blue)} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-action .hcs-btn-apply{border:1.5px solid var(--hcs-blue);color:#fff;background:var(--hcs-blue)} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-action .hcs-btn-apply:hover{background:var(--hcs-blue-deep);border-color:var(--hcs-blue-deep);color:#fff} /* ═══════════ EMPTY / NOTE ═══════════ */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-empty{ grid-column:1/-1; text-align:center; padding:40px 20px; color:var(--hcs-muted); background:#fff; border:1px dashed var(--hcs-line); border-radius:14px; font-size:.82rem; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-empty svg{color:var(--hcs-sky-2);margin:0 auto 10px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-empty b{color:var(--hcs-ink);display:block;margin-bottom:3px;font-family:'Sora',sans-serif} /* ── request failure state ── */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-error{ border-style:solid; border-color:#f0c2c2; background:#fffafa; max-width:640px; margin-inline:auto; line-height:1.55; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-error b{color:#a32020} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-error .hcs-relax-wrap{ margin-top:14px; border:0; padding:0; text-align:center; } /* ── why a search came back empty ── */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-empty-diag{text-align:left;padding:26px 22px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-empty-diag svg{margin:0 0 10px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-empty-diag b{font-size:.95rem;margin-bottom:5px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-diag-list{ list-style:none; margin:16px 0 0; padding:12px 14px; background:var(--hcs-paper); border:1px solid var(--hcs-line); border-radius:12px; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-diag-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; font-size:.78rem; color:var(--hcs-muted); border-bottom:1px dashed var(--hcs-line); } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-diag-item:last-child{border-bottom:0} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-diag-label{flex:1 1 auto} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-diag-count{ flex:0 0 auto; min-width:34px; text-align:center; font-family:'Sora',sans-serif; font-weight:700; color:var(--hcs-ink); background:#fff; border:1px solid var(--hcs-line); border-radius:999px; padding:1px 8px; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-diag-zero .hcs-diag-label{color:var(--hcs-red);font-weight:600} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-diag-zero .hcs-diag-count{ color:#fff; background:var(--hcs-red); border-color:var(--hcs-red); } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-relax-wrap{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-relax-title{ flex:1 0 100%; font-family:'Sora',sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.02em; text-transform:uppercase; color:var(--hcs-ink); } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-relax-btn{ cursor:pointer; font-family:inherit; font-size:.76rem; font-weight:600; padding:8px 14px; border-radius:999px; border:1.5px solid var(--hcs-blue); color:var(--hcs-blue); background:#fff; transition:background .15s ease,color .15s ease; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-relax-btn:hover{background:var(--hcs-blue);color:#fff} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-relax-btn:focus-visible{outline:2px solid var(--hcs-blue-deep);outline-offset:2px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-note{ margin-top:18px; font-size:.72rem; background:#fff8ec; border:1px solid #f3dcae; border-radius:11px; padding:10px 13px; line-height:1.5; color:#7a5a19; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-note p{margin:0 0 6px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-note p:last-child{margin-bottom:0} /* ═══════════ PAGINATION ═══════════ */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-pagination{ display:flex;align-items:center;justify-content:space-between; margin-top:22px;gap:10px; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-pg-btn{ font-family:inherit;font-weight:700;font-size:.8rem; padding:9px 18px;border-radius:10px;cursor:pointer; transition:background .18s,color .18s,border-color .18s; display:flex;align-items:center;gap:6px; border:1.5px solid var(--hcs-blue); background:#fff;color:var(--hcs-blue); text-transform:none;letter-spacing:normal;margin:0; } .hcs-wrap.hcs-wrap.hcs-wrap .hcs-pg-btn:hover:not(:disabled){background:var(--hcs-blue);color:#fff} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-pg-btn:disabled{opacity:.35;cursor:not-allowed;border-color:var(--hcs-line);color:var(--hcs-muted);background:#fff} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-pg-info{ font-family:'Sora',sans-serif;font-weight:700;font-size:.82rem; color:var(--hcs-ink);background:#fff; border:1px solid var(--hcs-line); border-radius:9px;padding:8px 18px;white-space:nowrap; } /* ═══════════ RESPONSIVE ═══════════ */ @media(max-width:960px){ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-filter-row{grid-template-columns:repeat(3,1fr)} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:640px){ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-filter-row{grid-template-columns:1fr} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-filter-row + .hcs-filter-row{margin-top:0} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-grid{grid-template-columns:1fr} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-big{font-size:1.7rem} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-pg-btn{padding:9px 12px} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-pg-info{padding:8px 10px;font-size:.75rem} } @media(max-width:400px){ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-filter-row{grid-template-columns:1fr} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-filter-actions .hcs-btn-search, .hcs-wrap.hcs-wrap.hcs-wrap .hcs-filter-actions .hcs-btn-reset{font-size:.76rem;padding:9px 10px} } @media(prefers-reduced-motion:reduce){ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc, .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc-action a, .hcs-wrap.hcs-wrap.hcs-wrap .hcs-pg-btn, .hcs-wrap.hcs-wrap.hcs-wrap .hcs-btn-search, .hcs-wrap.hcs-wrap.hcs-wrap .hcs-btn-reset{transition:none} .hcs-wrap.hcs-wrap.hcs-wrap .hcs-cc:hover{transform:none} } /* ═══════════════════════════════════════════════════════ DETAIL MODAL Rendered as a direct child of , so a theme wrapper with overflow:hidden or a transform cannot clip it. ═══════════════════════════════════════════════════════ */ body.hcs-modal-open{overflow:hidden !important} .hcs-modal{ position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; padding:14px; background:rgba(4,40,60,.55); font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--hcs-ink); line-height:1.55; animation:hcs-fade .18s ease-out; } @keyframes hcs-fade{from{opacity:0}to{opacity:1}} @keyframes hcs-pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}} .hcs-modal .hcs-modal-dialog{ position:relative; background:#fff; border-radius:18px; max-width:540px; width:100%; max-height:90vh; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; box-shadow:0 30px 60px -20px rgba(4,60,90,.45); animation:hcs-pop .2s ease-out; } /* ── hero ── */ .hcs-modal .hcs-m-hero{ background:linear-gradient(135deg,var(--hcs-blue),var(--hcs-blue-deep)); color:#fff; padding:20px 52px 16px 22px; border-radius:18px 18px 0 0; } .hcs-modal .hcs-m-hero h2{ font-family:'Sora',sans-serif; font-size:1.1rem;font-weight:800; line-height:1.2;letter-spacing:-.01em; color:#fff;margin:0;padding:0; } .hcs-modal .hcs-m-hero p{ font-size:.72rem;opacity:.8; margin:3px 0 0;padding:0;color:#fff; } .hcs-modal .hcs-modal-x{ position:absolute; top:12px;right:14px; background:rgba(255,255,255,.18); border:none;color:#fff; width:28px;height:28px; border-radius:50%; cursor:pointer; display:flex;align-items:center;justify-content:center; font-family:inherit;padding:0;margin:0; transition:background .18s; z-index:2; } .hcs-modal .hcs-modal-x:hover{background:rgba(255,255,255,.30)} .hcs-modal .hcs-modal-x:focus-visible{outline:2px solid #fff;outline-offset:2px} /* ── body ── */ .hcs-modal .hcs-m-body{padding:18px 20px} .hcs-modal .hcs-m-sec{margin-bottom:16px} .hcs-modal .hcs-m-sec:last-child{margin-bottom:0} .hcs-modal .hcs-m-sec-title{ font-size:.6rem;font-weight:800; text-transform:uppercase;letter-spacing:.1em; color:var(--hcs-blue); margin-bottom:10px; display:flex;align-items:center;gap:8px; } .hcs-modal .hcs-m-sec-title::before{ content:'';width:16px;height:3px; background:var(--hcs-blue);border-radius:2px;flex-shrink:0; } /* institute details */ .hcs-modal .hcs-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .hcs-modal .hcs-info-item{background:var(--hcs-sky);border-radius:9px;padding:9px 11px;min-width:0} .hcs-modal .hcs-info-item .hcs-ik{ font-size:.58rem;font-weight:700; text-transform:uppercase;letter-spacing:.05em; color:var(--hcs-muted);margin-bottom:2px; } .hcs-modal .hcs-info-item .hcs-iv{font-size:.78rem;font-weight:700;color:var(--hcs-ink);word-break:break-word} /* rank strip */ .hcs-modal .hcs-rank-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px} .hcs-modal .hcs-rank-card{ position:relative; background:linear-gradient(150deg,var(--hcs-blue),var(--hcs-blue-deep)); color:#fff;border-radius:11px; padding:11px 10px 10px; text-align:center;overflow:hidden; } .hcs-modal .hcs-rank-card.hcs-top{background:linear-gradient(150deg,#f6b23c,#e2870f)} .hcs-modal .hcs-rank-card .hcs-rc-scope{ font-size:.52rem;font-weight:700; text-transform:uppercase;letter-spacing:.07em;opacity:.9; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .hcs-modal .hcs-rank-card .hcs-rc-rank{ font-family:'Sora',sans-serif;font-weight:800; font-size:1.55rem;line-height:1.05;margin-top:3px; } .hcs-modal .hcs-rank-card .hcs-rc-rank .hcs-hash{font-size:.9rem;opacity:.7;font-weight:700;margin-right:1px} .hcs-modal .hcs-rank-card .hcs-rc-of{font-size:.55rem;opacity:.85;margin-top:1px} .hcs-modal .hcs-rank-card .hcs-rc-medal{position:absolute;top:5px;right:7px;font-size:.72rem} .hcs-modal .hcs-rank-card.hcs-unranked{background:#eef4f8;color:var(--hcs-muted)} .hcs-modal .hcs-rank-card.hcs-unranked .hcs-rc-rank{font-size:.92rem;margin-top:7px} .hcs-modal .hcs-rank-score{ display:flex;align-items:center;justify-content:space-between;gap:8px; background:var(--hcs-sky);border:1px solid var(--hcs-sky-2); border-radius:9px;padding:8px 11px;margin-bottom:12px; } .hcs-modal .hcs-rank-score .hcs-rs-k{ font-size:.6rem;font-weight:700; text-transform:uppercase;letter-spacing:.05em;color:var(--hcs-muted); } .hcs-modal .hcs-rank-score .hcs-rs-v{font-family:'Sora',sans-serif;font-weight:800;color:var(--hcs-blue-deep);font-size:.95rem} /* track record */ .hcs-modal .hcs-pass-bar-wrap{margin-bottom:11px} .hcs-modal .hcs-pass-bar-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;gap:8px} .hcs-modal .hcs-pass-bar-top .hcs-pb-k{ font-size:.6rem;font-weight:700; text-transform:uppercase;letter-spacing:.05em;color:var(--hcs-muted); } .hcs-modal .hcs-pass-bar-top .hcs-pb-v{font-family:'Sora',sans-serif;font-weight:800;color:var(--hcs-green);font-size:.85rem} .hcs-modal .hcs-pass-bar{height:8px;background:var(--hcs-sky-2);border-radius:20px;overflow:hidden} .hcs-modal .hcs-pass-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--hcs-green),#25b98a);border-radius:20px} .hcs-modal .hcs-perf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:11px} .hcs-modal .hcs-perf-cell{background:var(--hcs-sky);border-radius:9px;padding:8px 5px;text-align:center;min-width:0} .hcs-modal .hcs-perf-cell .hcs-pv{font-family:'Sora',sans-serif;font-weight:800;font-size:1rem;color:var(--hcs-blue-deep);line-height:1} .hcs-modal .hcs-perf-cell .hcs-pk{ font-size:.5rem;font-weight:700; text-transform:uppercase;letter-spacing:.02em; color:var(--hcs-muted);margin-top:4px;display:block; } .hcs-modal .hcs-exam-row{display:flex;gap:6px} .hcs-modal .hcs-exam-chip{flex:1;background:#fff;border:1px solid var(--hcs-line);border-radius:8px;padding:6px 4px;text-align:center;min-width:0} .hcs-modal .hcs-exam-chip .hcs-ec-v{font-family:'Sora',sans-serif;font-weight:700;font-size:.8rem;color:var(--hcs-ink)} .hcs-modal .hcs-exam-chip .hcs-ec-k{ font-size:.5rem;font-weight:700; text-transform:uppercase;letter-spacing:.02em; color:var(--hcs-muted);margin-top:2px;display:block; } .hcs-modal .hcs-exam-chip.hcs-pass .hcs-ec-v{color:var(--hcs-green)} .hcs-modal .hcs-exam-chip.hcs-fail .hcs-ec-v{color:#c0392b} .hcs-modal .hcs-perf-source{font-size:.58rem;color:var(--hcs-muted);margin-top:9px;font-style:italic} .hcs-modal .hcs-perf-note{font-size:.58rem;color:var(--hcs-muted);margin-top:10px;line-height:1.5} .hcs-modal .hcs-nodata{ background:var(--hcs-sky); border:1px dashed var(--hcs-line); border-radius:9px;padding:14px; font-size:.72rem;font-weight:600; color:var(--hcs-muted);text-align:center; } /* admission table */ .hcs-modal .hcs-m-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .hcs-modal table.hcs-modal-tbl{ width:100%;border-collapse:collapse; font-size:.76rem;margin:0;border:none;background:transparent; min-width:430px; } .hcs-modal table.hcs-modal-tbl thead th{ font-size:.58rem;font-weight:700; text-transform:uppercase;letter-spacing:.05em; color:var(--hcs-blue-deep); padding:7px 9px;text-align:left; border:none;border-bottom:2px solid var(--hcs-sky-2); background:var(--hcs-sky);white-space:nowrap; } .hcs-modal table.hcs-modal-tbl tbody td{ padding:8px 9px; border:none;border-bottom:1px solid var(--hcs-line); vertical-align:middle;background:transparent; } .hcs-modal table.hcs-modal-tbl tbody tr:last-child td{border-bottom:none} .hcs-modal table.hcs-modal-tbl tbody tr:hover{background:#f8fbfd} .hcs-modal .hcs-grp-dot{ display:inline-block;width:7px;height:7px; border-radius:50%;margin-right:6px;vertical-align:middle;flex-shrink:0; } .hcs-modal .hcs-td-grp{white-space:nowrap;font-weight:700;color:var(--hcs-ink)} .hcs-modal .hcs-td-soft{font-size:.7rem;color:var(--hcs-muted);white-space:nowrap} .hcs-modal .hcs-td-gpa{font-family:'Sora',sans-serif;font-weight:800} .hcs-modal .hcs-td-gpa.hcs-ok{color:var(--hcs-blue)} .hcs-modal .hcs-td-gpa.hcs-no{color:#c0392b} /* Seat counts carry the same weight as an eligible Min GPA, so they read as the number that matters in their table. */ .hcs-modal .hcs-td-seats{font-family:'Sora',sans-serif;font-weight:800;color:var(--hcs-blue)} .hcs-modal .hcs-td-none{text-align:center;color:var(--hcs-muted)} /* cta */ .hcs-modal .hcs-cta-btn{ display:block;width:100%; font-family:inherit;font-weight:700;font-size:.88rem; background:linear-gradient(135deg,var(--hcs-blue),var(--hcs-blue-deep)); color:#fff;border:none;border-radius:11px; padding:14px;cursor:pointer;text-align:center; transition:transform .18s;margin-top:16px; box-shadow:var(--hcs-shadow-sm);text-decoration:none; } .hcs-modal .hcs-cta-btn:hover{transform:translateY(-2px);color:#fff} .hcs-modal a:focus-visible, .hcs-modal button:focus-visible{outline:2px solid var(--hcs-blue);outline-offset:2px} @media(max-width:420px){ .hcs-modal{padding:0;align-items:flex-end} .hcs-modal .hcs-modal-dialog{max-height:94vh;border-radius:18px 18px 0 0} .hcs-modal .hcs-m-hero{border-radius:18px 18px 0 0;padding:18px 48px 14px 18px} .hcs-modal .hcs-m-body{padding:16px 18px} .hcs-modal .hcs-perf-grid{grid-template-columns:repeat(2,1fr)} .hcs-modal .hcs-m-hero h2{font-size:1rem} } @media(prefers-reduced-motion:reduce){ .hcs-modal,.hcs-modal .hcs-modal-dialog{animation:none} .hcs-modal .hcs-cta-btn:hover{transform:none} } /* ── Modal: per-group total seats strip (v3.2) ───────────── */ .hcs-wrap.hcs-wrap.hcs-wrap .hcs-seat-strip, .hcs-modal .hcs-seat-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .hcs-modal .hcs-seat-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; background: #f4f7fa; border: 1px solid #e2e8f0; border-radius: 10px; font-size: 13px; line-height: 1.1; } .hcs-modal .hcs-seat-chip .hcs-grp-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } .hcs-modal .hcs-seat-chip .hcs-seat-grp { font-weight: 600; color: #1f2d3d; } .hcs-modal .hcs-seat-chip .hcs-seat-num { color: #5a7486; font-weight: 600; }