html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--kea-primary: #901D78;
--kea-primary-dark: #771662;
--kea-light: #F8F4F8;
--kea-white: #FFFFFF;
--kea-text: #2E2E2E;
--kea-border: #E3E3E3;
--kea-hover: #F2E8F0;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: white;
color: var(--kea-text);
}
.container {
width: 90%;
max-width: 1450px;
margin: 30px auto;
padding: 0 15px;
}
.header {
background: #FAE3F7;
padding: 25px 35px 25px 20px;
border-radius: 10px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(144, 29, 120, .12);
display: flex;
justify-content: space-between;
align-items: center;
}
.header h1 {
margin: 0;
}
.header p {
margin: 0;
}
.search-box,
.results-section {
background: #FAE3F7;
border: 1px solid #d7b6d2;
font-style: unset;
padding: 25px;
border-radius: 10px;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(144, 29, 120, .12);
}
.search-box h2,
.results-section h2 {
margin-bottom: 20px;
font-style: unset;
font-size: 40px;
color: var(--kea-primary);
}
/* ===========================
SEARCH SUMMARY
=========================== */
/* ==========================
SEARCH SUMMARY
========================== */
.summary-card {
display: none;
background: #FAE3F7;
border: 1px solid #e3b7dc;
border-radius: 15px;
padding: 25px 30px;
margin: 30px 0;
box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
.summary-box {
background: #fbe6f3;
border: 1px solid #efb8d9;
border-radius: 12px;
padding: 25px 30px;
margin: 30px 0;
}
.summary-box h2 {
color: #8d1976;
margin-bottom: 20px;
}
.summary-row {
display: flex;
gap: 10px;
margin-bottom: 14px;
font-size: 18px;
}
.summary-row strong {
color: #8d1976;
min-width: 170px;
}
.summary-row span {
color: #333;
font-weight: 500;
}
.form-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
width: 100%;
}
.form-group {
display: flex;
flex-direction: column;
background: #FAE3F7;
}
label {
font-weight: bold;
margin-bottom: 6px;
}
input,
select {
height: 46px !important;
line-height: 46px;
padding: 0 14px;
font-size: 16px !important;
border-radius: 8px !important;
box-sizing: border-box;
vertical-align: middle;
}
select option {
background: #FAE3F7;
color: #333;
}
/* ===== TomSelect Styling ===== */
.ts-wrapper .ts-control {
min-height: 46px !important;
height: 46px !important;
padding: 10px 14px !important;
border-radius: 8px !important;
border: 1px solid #d8a6cd !important;
background: #FAE3F7 !important;
box-sizing: border-box;
}
.ts-wrapper.single .ts-control {
display: flex;
align-items: center;
}
.ts-wrapper .ts-control input {
height: auto !important;
padding: 0 !important;
margin: 0 !important;
background: transparent;
}
.ts-dropdown {
border-radius: 8px;
border: 1px solid #d8a6cd;
background: #FAE3F7;
}
button {
margin-top: 25px;
width: 100%;
padding: 14px;
border: none;
border-radius: 6px;
background: var(--kea-primary);
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
/* Pagination */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 25px;
flex-wrap: wrap;
}
.pagination button {
width: auto !important;
margin: 0;
padding: 8px 14px;
min-width: 42px;
background: #F7DFF0;
/* Light pink */
color: #8B1977;
/* Purple text */
border: 1px solid #E6B6D6;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
transition: .2s;
}
.pagination .dots {
display: inline-block;
padding: 0 8px;
font-weight: bold;
}
.pagination button:hover {
background: #EBC6DF;
}
.pagination .active-page {
background: #8B1977 !important;
color: #fff !important;
border-color: #8B1977;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 700px;
}
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive table {
width: 100%;
min-width: 700px;
}
th {
background: var(--kea-primary);
color: white;
padding: 12px;
}
td {
padding: 12px;
border-bottom: 1px solid #ddd;
text-align: center;
}
tbody tr:nth-child(even) {
background: #fff5fc;
}
tbody tr:hover {
background: #f7d9f2;
}
footer {
width: 100%;
text-align: center;
margin-top: 20px;
padding: 15px 0;
}
@media(max-width:900px) {
.form-grid {
grid-template-columns: 1fr 1fr;
}
}
@media(max-width:600px) {
.form-grid {
grid-template-columns: 1fr;
}
}
.results-section {
overflow: hidden;
}
.table-responsive {
overflow-x: auto;
}
table {
min-width: 650px;
}
/* ===========================
Header
=========================== */
.logo-section {
display: flex;
align-items: center;
gap: 20px;
flex: 1;
min-width: 0;
}
.logo-left {
display: flex;
align-items: center;
gap: 20px;
}
.logo {
width: 220px;
margin-left: -8px;
height: auto;
flex-shrink: 0;
border-radius: 9px;
}
.title {
flex: 1;
min-width: 0;
}
.title h1 {
margin: 0;
font-size: 36px;
line-height: 1.15;
font-weight: 800;
color: #901d78;
white-space: nowrap;
}
.title p {
margin: 4px 0 0;
font-size: 35px;
line-height: 1.2;
font-weight: 800;
color: #901d78;
white-space: nowrap;
}
.navbar {
display: flex;
align-items: center;
font-style: unset;
gap: 30px;
margin-left: 30px;
flex-shrink: 0;
padding-top: 75px;
}
.navbar a {
text-decoration: none;
color: #882471;
font-style: unset;
font-size: 16px;
font-weight: 600;
}
.navbar a:hover {
color: #901D78;
}
/* ==========================
Theme Toggle
========================== */
.theme-switch {
position: relative;
display: inline-block;
width: 72px;
height: 36px;
}
.theme-switch input {
display: none;
}
.slider {
position: absolute;
inset: 0;
background: #FAE3F7;
border-radius: 40px;
cursor: pointer;
transition: .35s;
border: 1px solid #d5b0cf;
box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
.slider::before {
content: "";
position: absolute;
width: 28px;
height: 28px;
left: 4px;
top: 4px;
background: white;
border-radius: 50%;
transition: .35s;
box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
input:checked+.slider {
background: #901D78;
}
input:checked+.slider::before {
transform: translateX(36px);
}
.icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
}
.sun {
left: 10px;
}
.moon {
right: 10px;
}
/* Login Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
justify-content: center;
align-items: center;
z-index: 9999;
}
.modal-content {
background: #fff;
padding: 30px;
width: 350px;
border-radius: 12px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, .2);
animation: popup .25s ease;
}
.modal-content h2 {
margin-bottom: 10px;
color: #901D78;
font-size: 38px;
font-weight: 700;
}
.modal-content p {
margin-bottom: 20px;
color: #000000;
}
.modal-content input {
width: 100%;
margin-bottom: 15px;
padding: 12px;
font-size: 15px;
border: 1px solid #ccc;
border-radius: 6px;
}
.modal-content button {
width: 100%;
padding: 12px;
background: var(--kea-primary);
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
.close-modal {
position: absolute;
top: 15px;
right: 20px;
font-size: 30px;
font-weight: bold;
color: #901D78;
cursor: pointer;
transition: .2s;
}
.close-modal:hover {
color: #d61b5f;
transform: scale(1.15);
}
.modal-content {
position: relative;
}
select {
background: #FAE3F7;
color: #333;
border: 1px solid #cfa9c7;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
select option {
background: #FAE3F7;
color: #333;
}
select option:checked {
background: #901D78;
color: white;
}
select option:hover {
background: #901D78;
color: white;
}
/* Restore input height */
input,
select {
height: 46px !important;
padding: 0 14px;
font-size: 16px !important;
border-radius: 8px !important;
box-sizing: border-box;
}
input:focus,
select:focus {
outline: none;
border: 1px solid #901D78;
box-shadow: 0 0 0 3px rgba(144, 29, 120, .15);
}
/* ===========================================
RESPONSIVE DESIGN
=========================================== */
/* Tablet */
@media (max-width:991px) {
.header {
flex-direction: column;
gap: 20px;
text-align: center;
}
.logo-section {
flex-direction: column;
justify-content: center;
}
.navbar {
justify-content: center;
flex-wrap: wrap;
}
.form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobile */
@media (max-width:768px) {
.container {
width: 95%;
padding: 0 10px;
}
.header {
padding: 20px;
flex-direction: column;
text-align: center;
}
.logo-section {
flex-direction: column;
gap: 10px;
}
.logo {
width: 100px;
}
.title h1 {
font-size: 25px;
white-space: normal;
}
.title p {
font-size: 23px;
white-space: normal;
}
.navbar {
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}
.form-grid {
grid-template-columns: 1fr;
gap: 15px;
}
input,
select,
button {
width: 100%;
max-width: 100%;
}
.search-summary {
word-break: break-word;
}
.results-section {
overflow-x: auto;
}
table {
min-width: 700px;
}
.modal-content {
width: 90%;
padding: 20px;
}
}
/* Small phones */
@media (max-width:480px) {
.title h1 {
font-size: 28px;
}
.navbar {
font-size: 14px;
gap: 10px;
}
.search-box,
.results-section {
padding: 15px;
}
button {
font-size: 15px;
}
}
/* ---------- Tom Select ---------- */
/* Main control */
.ts-control {
background: #FAE3F7 !important;
border: 1px solid #d48ac2 !important;
border-radius: 8px !important;
height: 46px !important;
min-height: 46px !important;
display: flex;
align-items: center;
justify-content: center;
padding: 0 12px !important;
font-size: 16px;
box-sizing: border-box;
}
/* Input */
.ts-control input {
font-size: 16px !important;
line-height: 22px !important;
padding: 0 !important;
margin: 0 !important;
}
/* Placeholder */
.ts-control .item,
.ts-control input::placeholder {
color: #555;
}
/* Dropdown */
.ts-dropdown {
background: #FAE3F7 !important;
border: 1px solid #d48ac2 !important;
border-radius: 8px;
font-size: 15px;
}
/* Options */
.ts-dropdown .option {
padding: 10px 12px;
font-size: 15px;
}
/* Hover */
.ts-dropdown .option:hover,
.ts-dropdown .active {
background: #8E197A !important;
color: white !important;
}
/* Selected */
.ts-dropdown .selected {
background: #8E197A !important;
color: white !important;
}
.ts-control.focus {
border-color: #8E197A !important;
box-shadow: none !important;
}
.loading-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: not-allowed;
opacity: 0.85;
}
.spinner {
width: 18px;
height: 18px;
border: 3px solid rgba(255, 255, 255, .4);
border-top: 3px solid #fff;
border-radius: 50%;
animation: spin .8s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes popup {
from {
transform: scale(.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* ================= ABOUT ================= */
.about-section {
background: #FAE3F7;
padding: 40px;
border-radius: 15px;
margin-top: 50px;
box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
}
.about-section h2 {
color: #901D78;
font-style: unset;
margin-bottom: 18px;
font-size: 30px;
}
.about-section p {
line-height: 1.8;
color: #444;
font-size: 17px;
margin-bottom: 18px;
}
.about-section hr {
border: none;
border-top: 1px solid #e8bfdc;
margin: 35px 0;
}
/* ================= PDF MODAL ================= */
/*=========================
PDF MODAL
=========================*/
.pdf-modal {
position: relative;
width: 500px;
max-width: 90vw;
max-height: 35vh;
overflow: hidden;
background: #fff;
border-radius: 22px;
box-shadow: 0 25px 60px rgba(0, 0, 0, .20);
}
/* blur only popup */
.pdf-content {
filter: blur(9px);
opacity: .15;
pointer-events: none;
user-select: none;
}
/*=========================
COMING SOON
=========================*/
.coming-overlay {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
z-index: 10;
pointer-events: none;
}
/* close */
.coming-close {
position: absolute;
top: 12px;
right: 14px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
background: transparent;
border: none;
color: #901d78;
font-size: 30px;
font-weight: bold;
line-height: 1;
cursor: pointer;
z-index: 10;
}
.coming-close:hover {
background: transparent;
color: #70135e;
}
/* center */
.coming-center {
text-align: center;
}
.coming-icon {
font-size: 25px;
margin-bottom: 6px;
animation: float 2s infinite ease-in-out;
}
.coming-center h2 {
margin: 0;
color: #901D78;
font-size: 40px;
font-weight: 800;
letter-spacing: 2px;
}
.coming-center p {
margin-top: 18px;
font-size: 28px;
font-weight: 700;
color: #333;
}
/* animation */
@keyframes float {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0);
}
}
.pdf-disclaimer {
margin-top: 10px;
font-size: 11px;
font-weight: 600;
color: #777;
text-align: center;
}
.footer-disclaimer {
margin-top: 8px;
text-align: center;
font-size: 11px;
color: #777;
font-weight: 600;
letter-spacing: .2px;
}
/* ================= COMING SOON ================= */
#closePdfModal {
display: none !important;
}
.Pdf {
width: 100%;
display: flex;
justify-content: flex-end;
margin: 0 0 15px 0;
}
.Pdf button {
width: auto;
margin: 0;
}
/* =========================================================
RESPONSIVE DESIGN
========================================================= */
/* ================= TABLET ================= */
@media screen and (max-width: 991px) {
.container {
width: 94%;
padding: 0 10px;
}
.header {
flex-direction: column;
text-align: center;
gap: 20px;
}
.logo-section {
width: 100%;
justify-content: center;
}
.title {
max-width: 100%;
width: 100%;
}
.title h1 {
font-size: 30px;
white-space: normal;
}
.title p {
font-size: 20px;
white-space: normal;
}
.navbar {
width: 100%;
margin-left: 0;
justify-content: center;
flex-wrap: wrap;
}
.form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ================= MOBILE ================= */
@media screen and (max-width: 768px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.container {
width: 94%;
margin: 15px auto;
padding: 0;
}
/* HEADER */
.header {
width: 100%;
padding: 20px 15px;
}
.logo-section {
flex-direction: column;
gap: 12px;
}
.logo {
width: 100px;
max-width: 100px;
margin: 0;
}
.title {
width: 100%;
max-width: 100%;
text-align: center;
}
.title h1 {
font-size: 25px;
line-height: 1.2;
white-space: normal;
overflow-wrap: break-word;
}
.title p {
font-size: 16px;
line-height: 1.3;
white-space: normal;
}
/* NAVIGATION */
.navbar {
width: 100%;
margin: 0;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
/* SEARCH */
.search-box {
width: 100%;
padding: 20px 15px;
}
.form-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.form-group {
width: 100%;
min-width: 0;
}
input,
select,
.ts-wrapper {
width: 100%;
max-width: 100%;
min-width: 0;
}
/* SUMMARY */
.summary-box {
width: 100%;
padding: 20px;
}
.summary-row {
flex-direction: column;
gap: 4px;
}
.summary-row strong {
min-width: 0;
}
/* RESULTS */
.results-section {
width: 100%;
overflow: hidden;
}
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive table {
min-width: 700px;
}
/* PDF BUTTON */
.Pdf {
width: 100%;
display: flex;
justify-content: flex-end;
margin: 0 0 15px 0;
}
.Pdf button {
width: auto;
margin: 0;
}
/* ABOUT */
.about-section {
width: 100%;
padding: 25px 20px;
}
.about-section h2 {
font-size: 26px;
}
.about-section p {
font-size: 16px;
line-height: 1.7;
}
/* MODALS */
.modal-content {
width: 92%;
max-width: 92%;
}
.pdf-modal {
width: 92%;
max-width: 92vw;
}
.coming-close {
padding: 0 !important;
right: 12px;
top: 12px;
}
}
/* ================= SMALL MOBILE ================= */
@media screen and (max-width: 480px) {
.container {
width: 96%;
}
.header {
flex-direction: column;
text-align: center;
}
.logo {
width: 90px;
}
.logo-section {
width: 100%;
justify-content: center;
}
.title h1 {
font-size: 22px;
white-space: normal;
}
.title {
width: 100%;
}
.title p {
font-size: 14px;
white-space: normal;
}
.navbar {
gap: 10px;
width: 100%;
justify-content: center;
}
.navbar a {
font-size: 14px;
}
.search-box,
.results-section {
padding: 18px 14px;
}
.search-box h2,
.results-section h2 {
font-size: 23px;
}
.Pdf {
justify-content: stretch;
}
.Pdf button {
width: 100%;
}
}
/* ==========================================
NOT ALLOTTED / NA RESULTS
========================================== */
#notAllottedSection {
margin-top: 25px;
}
#notAllottedSection h2 {
margin-bottom: 10px;
}
.na-description {
margin-bottom: 15px;
font-size: 14px;
line-height: 1.5;
}
#notAllottedTable {
width: 100%;
border-collapse: collapse;
}
#notAllottedTable th,
#notAllottedTable td {
padding: 10px;
text-align: center;
border-bottom: 1px solid #ddd;
}
#notAllottedTable th {
font-weight: bold;
}
.results-note {
margin-top: 20px;
padding: 14px 18px;
font-size: 13px;
line-height: 1.6;
color: #5f2058;
background: #fff7fc;
border-left: 4px solid #981b7a;
border-radius: 6px;
}
.results-note {
margin: 15px 0 20px 0;
padding: 12px 16px;
font-size: 12px;
line-height: 1.5;
background: #fff7fc;
border-left: 4px solid #981b7a;
border-radius: 6px;
}
/* ================= CONTACT ================= */
.contact-section {
width: 100%;
max-width: 1450px;
margin: 30px auto 0;
background: #FAE3F7;
border-radius: 15px;
padding: 40px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.contact-section h2 {
color: #901D78;
font-size: 30px;
margin-bottom: 18px;
}
.contact-section h3 {
color: #901D78;
font-size: 18px;
margin: 0 0 10px;
}
.contact-section p {
color: #444;
font-size: 17px;
line-height: 1.8;
margin-bottom: 8px;
}
.contact-section hr {
border: none;
border-top: 1px solid #e8bfdc;
margin: 28px 0;
}
.contact-section a {
color: #901D78;
font-weight: 500;
}
/* ================= TEAM / DEVELOPER ================= */
.team-section {
width: 90%;
max-width: 1450px;
margin: 28px auto 0;
padding-left: 1px;
}
.team-member {
text-align: left;
}
.team-role {
color: #901D78;
font-size: 14px;
font-weight: 700;
margin-bottom: 5px;
}
.team-member h3 {
color: #901D78;
font-size: 19px;
font-weight: 700;
margin: 0 0 6px;
}
.team-member p {
color: #333;
font-size: 14px;
margin: 0 0 4px;
}
.team-work {
display: block;
color: #333;
font-size: 14px;
font-weight: 600;
margin-bottom: 3px;
}
.linkedin-link {
color: #002cbe;
font-size: 13px;
font-weight: 500;
text-decoration: none;
}
.linkedin-link:hover {
text-decoration: underline;
}
/* ================= TEAM MOBILE ================= */
@media screen and (max-width: 768px) {
.contact-section {
width: 94%;
padding: 25px 20px;
}
.contact-section h2 {
font-size: 26px;
}
.contact-section p {
font-size: 16px;
line-height: 1.7;
}
.team-section {
width: 94%;
padding-left: 20px;
}
}
@media (max-width: 768px) {
header nav {
transform: translateY(-34px);
}
}
.about-subsection {
border-top: 1px solid #e8b9df;
padding-top: 30px;
margin-top: 30px;
}
.about-subsection h2 {
margin-bottom: 20px;
}
.required-star {
color: red;
font-weight: bold;
}
#rank {
border: 1px solid #d9a6d3;
background: #fbe8f8;
color: #333;
border-radius: 8px;
}
/* =========================================
FEEDBACK FORM
========================================= */
.feedback-form {
margin-top: 30px;
padding-top: 25px;
border-top: 1px solid rgba(160, 30, 130, 0.15);
}
.feedback-form h3 {
margin-bottom: 10px;
}
.feedback-intro {
margin-bottom: 25px;
}
.feedback-field {
margin-bottom: 20px;
}
.feedback-field label {
display: block;
margin-bottom: 7px;
font-weight: 600;
}
.feedback-field input,
.feedback-field textarea {
width: 40%;
box-sizing: border-box;
padding: 12px 14px;
border: 1px solid #d9a6d3;
border-radius: 8px;
background: #fff;
font-size: 16px;
font-family: inherit;
}
.feedback-field textarea {
resize: vertical;
min-height: 60px;
}
.feedback-field input:focus,
.feedback-field textarea:focus {
outline: none;
border-color: #982080;
}
.feedback-button {
width: 40%;
display: flex;
justify-content: center;
margin-top: 25px;
}
.feedback-submit {
width: auto;
padding: 10px 28px;
border: none;
border-radius: 7px;
background: #982080;
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
.feedback-submit:hover {
opacity: 0.9;
}
/* Red mandatory star */
.required-star {
color: red;
font-weight: bold;
}
/* Honeypot */
.hidden-field {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
@media (max-width: 768px) {
.feedback-field input,
.feedback-field textarea {
width: 100%;
}
.feedback-button {
width: 100%;
justify-content: center;
}
}