/* ------------------------------------------------------------------ * Interview form page (interview-form.php) * Kept in a real .css file — loaded from in inc/header.php — so the * browser can cache it and the page never paints before its styles land. * Bump the ?v= number in inc/header.php after editing this file. * ---------------------------------------------------------------- */ .form-label { text-align: left; display: block; } .interview-page { padding-bottom: 60px; background: #fff4e6; } /* Lift the form card so it overlaps the bottom of the hero. */ .interview-page .container-lg { position: relative; z-index: 2; } /* Hero band — same artwork and fade-to-#fff4e6 treatment as the homepage, but short enough to keep the form near the top of the page. */ .interview-hero { position: relative; max-width: 1920px; margin: 0 auto; } .interview-hero .ih-img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: top center; } .interview-hero .ih-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 120px 15px 20px; background-image: linear-gradient(180deg, rgba(255, 244, 230, 0.15), rgba(255, 244, 230, 0.45), rgba(255, 244, 230, 0.85), #fff4e6); } .interview-hero .ih-inner { text-align: center; max-width: 760px; } .interview-hero .ih-eyebrow { display: inline-block; font-family: "Baloo Bhai 2", sans-serif; color: #6b2a36; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(107, 42, 54, 0.18); border-radius: 999px; padding: 3px 16px; font-size: 15px; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 10px; } .interview-hero h1 { font-family: "Baloo Bhai 2", sans-serif; color: #6b2a36; font-weight: 700; font-size: clamp(26px, 4.4vw, 42px); line-height: 1.25; margin-bottom: 6px; text-shadow: 0 2px 10px rgba(255, 244, 230, 0.9); } .interview-hero p { font-family: "Baloo Bhai 2", sans-serif; color: #7a4a2e; font-size: clamp(15px, 1.6vw, 17px); margin-bottom: 0; } /* Back link + breadcrumb strip above the card. */ .iv-crumb-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; font-family: "Baloo Bhai 2", sans-serif; } .iv-back-btn { display: inline-flex; align-items: center; gap: 8px; /* Uneven top/bottom padding on purpose: Baloo Bhai 2 leaves more room under the baseline for the Gujarati below-matras, so an even padding makes the label look like it is sitting too high in the pill. */ padding: 7px 16px 5px 13px; border-radius: 999px; background: #ffffff; border: 1px solid rgba(107, 42, 54, 0.18); box-shadow: 0 4px 12px rgba(107, 42, 54, 0.07); color: #6b2a36; font-size: 15px; font-weight: 600; line-height: 1.6; text-decoration: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; } /* The icons are centred on the line box, which for this font sits lower than the Gujarati letter bodies — lift them so icon and label read as one line. */ .iv-back-btn i { position: relative; top: -2px; font-size: 13px; line-height: 1; transition: transform .2s ease; } .iv-back-btn:hover, .iv-back-btn:focus-visible { background: #6b2a36; border-color: #6b2a36; color: #ffffff; box-shadow: 0 6px 16px rgba(107, 42, 54, 0.22); transform: translateY(-1px); } .iv-back-btn:hover i, .iv-back-btn:focus-visible i { transform: translateX(-3px); } .iv-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 7px 15px 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(107, 42, 54, 0.14); font-size: 14.5px; line-height: 1.6; } .iv-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; color: #6b2a36; font-weight: 600; } /* Chevron between the crumbs — Font Awesome is already loaded site-wide. */ .iv-breadcrumb li+li::before { content: "\f054"; position: relative; top: -1px; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 9px; line-height: 1; color: #7a4a2e; opacity: .55; } .iv-breadcrumb a { display: inline-flex; align-items: center; gap: 6px; color: #7a4a2e; font-weight: 500; text-decoration: none; transition: color .2s ease; } .iv-breadcrumb a i { position: relative; top: -2px; font-size: 12px; line-height: 1; } .iv-breadcrumb a:hover, .iv-breadcrumb a:focus-visible { color: #6b2a36; text-decoration: underline; text-underline-offset: 3px; } .interview-card { background: #ffffff; border: 1px solid rgba(107, 42, 54, 0.12); border-radius: 18px; box-shadow: 0 12px 26px rgba(107, 42, 54, 0.08); padding: 22px; } /* Same font stack the registration modal uses, so both forms read alike. */ .interview-page, .interview-form, .interview-form label, .interview-form input, .interview-form select, .interview-form textarea, .interview-form .form-check-label, .register-section-title, .interview-form .register-submit-btn, .interview-closed-box { font-family: "Baloo Bhai 2", sans-serif !important; } /* Inputs, labels, selects and error text all come from the shared .register-form rules in css/style.css — nothing is restyled here. */ .interview-form .is-invalid-field { border-color: #dc3545 !important; } .interview-closed-box { border: 1px solid rgba(185, 28, 28, 0.22); background: #fff6f6; border-radius: 18px; padding: 30px 22px; text-align: center; color: #7f1d1d; } @media (max-width: 991.98px) { .interview-hero .ih-img { height: 320px; } .interview-hero .ih-overlay { padding: 130px 15px 20px; } } @media (max-width: 767.98px) { .interview-hero .ih-img { height: 280px; } .interview-hero .ih-overlay { padding: 130px 15px 20px; } .interview-card { padding: 16px; } } @media (max-width: 575.98px) { .iv-crumb-bar { gap: 8px; margin-bottom: 12px; } .iv-back-btn { padding: 6px 13px 4px 11px; font-size: 14px; } .iv-breadcrumb { padding: 6px 12px 4px; gap: 5px; font-size: 13px; } } @media print { .header, .footer-section, .footer-bottom, .iv-crumb-bar, .interview-submit-row { display: none !important; } .interview-hero .ih-img { display: none; } }