/* ============================================================================ EXCEL PU COLLEGE — NEET index.aspx | NEW SEO SECTIONS (CSS) ---------------------------------------------------------------------------- Save as: assets/css/neet-sections.css Link in : >>> EDIT THE 5 BRAND COLOURS BELOW TO MATCH YOUR SITE <<< Everything else derives from them, so changing these 5 lines re-themes all the new sections at once. ============================================================================ */ :root{ --neet-primary: #0b5e4f; /* main brand colour (headings, primary button) */ --neet-secondary: #0a3d62; /* deep accent (dark band gradient) */ --neet-accent: #f4a300; /* CTA / highlight colour */ --neet-dark: #14233a; /* dark text / dark sections */ --neet-light: #f5f8f7; /* soft section background */ /* derived (no need to edit) */ --neet-primary-soft: color-mix(in srgb, var(--neet-primary) 12%, #fff); --neet-radius: 16px; --neet-shadow: 0 10px 30px rgba(20,35,58,.08); } /* Fallback for older browsers that don't support color-mix() */ @supports not (background: color-mix(in srgb, red, blue)){ :root{ --neet-primary-soft: #e7f1ee; } } /* ---------- Section shells ---------- */ .neet-section{ padding: 64px 0; position: relative; background: #f0eefb; padding: 40px 0px; overflow: hidden; z-index: 1; } .neet-section .container { position: relative; z-index: 1; } .neet-section--soft{ background: var(--neet-light); } .neet-section--dark{ background: linear-gradient(135deg, var(--neet-secondary), var(--neet-primary)); color:#fff; } /* ---------- Headings ---------- */ .neet-eyebrow{ display:inline-block; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; font-weight:700; color:var(--neet-accent); margin-bottom:.5rem; } .neet-h2{ font-weight:800; line-height:1.2; color:var(--neet-dark); margin-bottom:.75rem; font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); } .neet-section--dark .neet-h2{ color:#fff; } .neet-lead{ font-size:1.05rem; color:#475569; max-width:62ch; } .neet-section--dark .neet-lead{ color: rgba(255,255,255,.85); } /* ---------- Feature cards (matches your emoji-card style) ---------- */ .neet-card{ height:100%; background:#fff; border:1px solid #eef2f1; border-radius:var(--neet-radius); padding:28px 24px; box-shadow:var(--neet-shadow); transition:transform .25s ease, box-shadow .25s ease; } .neet-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(20,35,58,.12); } .neet-card__icon{ font-size:2rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:14px; background:var(--neet-primary-soft); margin-bottom:16px; } .neet-card__title{ font-weight:700; font-size:1.1rem; color:var(--neet-dark); margin-bottom:.4rem; } .neet-card__text{ color:#5b6b7b; font-size:.95rem; margin:0; } /* ---------- "Who is this for" cards ---------- */ .neet-persona{ display:flex; gap:14px; align-items:flex-start; background:#fff; border:1px solid #eef2f1; border-radius:var(--neet-radius); padding:18px 20px; height:100%; box-shadow:var(--neet-shadow); } .neet-persona__check{ flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--neet-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; } .neet-persona h3{ font-size:1.02rem; font-weight:700; color:var(--neet-dark); margin:0 0 .25rem; } .neet-persona p{ font-size:.92rem; color:#5b6b7b; margin:0; } /* ---------- Stats band ---------- */ .neet-stat{ text-align:center; padding:14px 8px; } .neet-stat__num{ font-weight:800; font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem); color:#fff; } .neet-stat__num span{ color:var(--neet-accent); } .neet-stat__label{ font-size:.95rem; color:rgba(255,255,255,.82); margin-top:2px; } /* ---------- FAQ ---------- */ .neet-faq .accordion-button{ font-weight:600; color:var(--neet-dark); } .neet-faq .accordion-button:not(.collapsed){ color:var(--neet-primary); background:var(--neet-primary-soft); box-shadow:none; } .neet-faq .accordion-button:focus{ box-shadow:0 0 0 .2rem rgba(11,94,79,.25); } .neet-faq .accordion-item{ border-radius:12px; overflow:hidden; margin-bottom:12px; border:1px solid #e7edeb; } /* ---------- Buttons ---------- */ .neet-btn-primary{ display:inline-block; background:var(--neet-primary); color:#fff; font-weight:600; padding:.7rem 1.7rem; border-radius:999px; text-decoration:none; } .neet-btn-primary:hover{ filter:brightness(.95); color:#fff; } .neet-btn-accent{ display:inline-block; background:var(--neet-accent); border:none; color:#1c1300; font-weight:700; padding:.8rem 1.8rem; border-radius:999px; text-decoration:none; } .neet-btn-accent:hover{ filter:brightness(.95); color:#1c1300; } .neet-btn-outline-light{ display:inline-block; border:2px solid rgba(255,255,255,.7); color:#fff; font-weight:600; padding:.75rem 1.6rem; border-radius:999px; text-decoration:none; } .neet-btn-outline-light:hover{ background:#fff; color:var(--neet-primary); } /* ---------- Scroll reveal ---------- */ .neet-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; } .neet-reveal.is-visible{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .neet-reveal{ opacity:1 !important; transform:none !important; transition:none; } .neet-card{ transition:none; } } /* ── Page Hero ── */ .prog-hero { background: linear-gradient(135deg, #0a3d62 0%, #0b5e4f 100%); color: #fff; padding: 72px 0 64px; position: relative; overflow: hidden; } .prog-hero::before { content: ''; position: absolute; inset: 0; background: url('../images/neet-long-term-program.webp') center / cover no-repeat; opacity: .06; } .prog-hero .breadcrumb { background: transparent; padding: 0; margin-bottom: 1.2rem; } .prog-hero .breadcrumb-item, .prog-hero .breadcrumb-item a { color: rgba(255,255,255,.65); font-size: .85rem; text-decoration: none; } .prog-hero .breadcrumb-item.active { color: #f4a300; } .prog-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.35); } .prog-hero__badge { display: inline-block; background: rgba(244,163,0,.18); border: 1px solid rgba(244,163,0,.5); color: #f4a300; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .28rem .9rem; border-radius: 999px; margin-bottom: .9rem; } .prog-hero h1 { font-size: clamp(1.85rem, 1.1rem + 3vw, 2.9rem); font-weight: 800; line-height: 1.15; margin-bottom: 1rem; } .prog-hero .lead { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 56ch; margin-bottom: 1.8rem; line-height: 1.65; } .hero-btn-group { display: flex; gap: 14px; flex-wrap: wrap; } /* ── Overview intro box ── */ .intro-highlight { background: linear-gradient(135deg, #e7f1ee, #f0f7ff); border-left: 5px solid #0b5e4f; border-radius: 12px; padding: 24px 28px; font-size: 1.02rem; color: #2d4a3e; line-height: 1.7; margin-bottom: 1.5rem; } /* ── Subject cards ── */ .subj-card { border-radius: 18px; padding: 30px 26px; height: 100%; color: #fff; position: relative; overflow: hidden; box-shadow: 0 12px 36px rgba(0,0,0,.15); transition: transform .25s ease, box-shadow .25s ease; } .subj-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.22); } .subj-card--phy { background: linear-gradient(135deg, #1a6b8a 0%, #0a3d62 100%); } .subj-card--chem { background: linear-gradient(135deg, #0b5e4f 0%, #145a32 100%); } .subj-card--bio { background: linear-gradient(135deg, #7d3c98 0%, #5b2c6f 100%); } .subj-card__icon { font-size: 2.4rem; margin-bottom: 14px; display: block; } .subj-card h3 { font-weight: 700; font-size: 1.22rem; margin-bottom: .5rem; } .subj-card p { color: rgba(255,255,255,.82); font-size: .94rem; margin-bottom: .8rem; line-height: 1.6; } .subj-card ul { padding-left: 1rem; color: rgba(255,255,255,.8); font-size: .88rem; } .subj-card ul li { margin-bottom: .35rem; } /* ── Program phases ── */ .phase-card { background: #fff; border-radius: 18px; padding: 30px 26px; box-shadow: 0 10px 32px rgba(20,35,58,.08); border-top: 5px solid #0b5e4f; position: relative; height: 100%; transition: transform .25s ease; } .phase-card:hover { transform: translateY(-5px); } .phase-card:nth-child(2) { border-top-color: #f4a300; } .phase-card:nth-child(3) { border-top-color: #0a3d62; } .phase-num { font-size: 4rem; font-weight: 800; line-height: 1; color: #eef2f1; position: absolute; top: 16px; right: 22px; user-select: none; } .phase-card h3 { font-weight: 700; font-size: 1.1rem; color: #14233a; margin-bottom: .3rem; } .phase-tag { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #f4a300; margin-bottom: .8rem; display: block; } .phase-card ul { padding-left: 1rem; color: #5b6b7b; font-size: .92rem; margin: 0; } .phase-card ul li { margin-bottom: .35rem; } /* ── Why us list ── */ .why-list { list-style: none; padding: 0; margin: 0; } .why-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #eef2f1; font-size: .97rem; color: #334155; } .why-list li:last-child { border-bottom: none; } .why-icon { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: #e7f1ee; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; } .why-list strong { display: block; color: #14233a; font-weight: 700; margin-bottom: .2rem; } /* ── Path steps ── */ .path-step { display: flex; gap: 18px; align-items: flex-start; background: #fff; border-radius: 14px; padding: 20px 22px; box-shadow: 0 6px 20px rgba(20,35,58,.07); margin-bottom: 1rem; } .path-step:last-child { margin-bottom: 0; } .path-num { flex: 0 0 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, #0b5e4f, #0a3d62); color: #fff; font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; } .path-step h4 { font-size: 1rem; font-weight: 700; color: #14233a; margin: 0 0 .25rem; } .path-step p { font-size: .9rem; color: #5b6b7b; margin: 0; line-height: 1.55; } /* ── Eligibility grid ── */ .elig-grid { display: grid; gap: .75rem; } @media(min-width:576px){ .elig-grid { grid-template-columns: 1fr 1fr; } } .elig-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 4px 14px rgba(20,35,58,.06); font-size: .94rem; color: #334155; } .elig-dot { width: 10px; height: 10px; border-radius: 50%; background: #0b5e4f; flex: 0 0 auto; } /* ── Responsive ── */ @media(max-width:767px){ .prog-hero { padding: 48px 0 40px; } }