/* Margdarshan — shared stylesheet. Edit this file once; every page updates automatically. */ /* ===================== TOKENS ===================== */ :root{ --font-display:'Fraunces',Georgia,serif; --font-body:'Hind',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace; --ink:#0F2A3D; --ink-soft:#16394F; --on-ink:#EAF1EF; --on-ink-muted:#AFC3C2; --paper:#F4F6F4; --surface:#FFFFFF; --line:#DCE3DF; --text:#16232B; --text-muted:#52625F; --gold:#C97F1E; --gold-strong:#A9660F; --teal:#1F6F5C; --plum:#8B4B6B; --slate:#3D5A80; --rust:#C4432E; --radius-sm:9px; --radius-md:16px; --radius-lg:24px; --shadow-sm:0 1px 2px rgba(15,42,61,.07); --shadow-md:0 10px 28px rgba(15,42,61,.09); --shadow-lg:0 24px 56px rgba(15,42,61,.16); --ease:cubic-bezier(.22,.61,.36,1); --container:1180px; --header-h:72px; /* ---------- Stream theme system — DISABLED ---------- Previously, pages opted into a per-stream accent colour via , each with its own --stream-primary/--stream-accent/--stream-soft/--stream-border. That made buttons, links, badges and active states look different colour from page to page, breaking one consistent brand identity. The tokens below are now the ONLY definition, site-wide, restoring the single original gold accent for every stream. The data-stream attribute can remain on pages (harmless) but no longer changes colour; any future [data-stream="x"] override block should NOT be re-added. */ --stream-primary:var(--gold-strong); --stream-accent:var(--gold); --stream-soft:rgba(201,127,30,.10); --stream-border:rgba(201,127,30,.30); } /* [data-stream="govt-exams"] reserved for a future stream palette. */ [data-theme="dark"]{ --paper:#0B1A22; --surface:#122633; --line:#1E3A46; --text:#E7EEEC; --text-muted:#94ACA7; --gold:#E8A33D; --teal:#3FA78D; --plum:#C87DA4; --slate:#7FA0C9; --rust:#E8674C; --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 10px 28px rgba(0,0,0,.4); --shadow-lg:0 24px 56px rgba(0,0,0,.5); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .25s var(--ease),color .25s var(--ease);} img,svg{display:block;max-width:100%;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0;color:var(--text);} p{margin:0;} button{font-family:inherit;} :focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px;} section{scroll-margin-top:var(--header-h);} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;} } .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .skip-link{position:absolute;left:-999px;top:0;background:var(--gold);color:#1a1204;padding:.65rem 1.1rem;border-radius:0 0 var(--radius-sm) 0;z-index:1000;font-weight:600;} .skip-link:focus{left:0;} .container{max-width:var(--container);margin:0 auto;padding:0 1.25rem;} @media (min-width:768px){.container{padding:0 2rem;}} .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--stream-primary);font-weight:600;} [data-theme="dark"] .eyebrow{color:var(--stream-accent);} .section-head{max-width:640px;margin-bottom:2.5rem;} .section-head h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin-top:.6rem;} .section-head p{color:var(--text-muted);margin-top:.8rem;font-size:1.05rem;} .btn{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.5rem;border-radius:999px;font-weight:600;font-size:.98rem;border:1px solid transparent;cursor:pointer;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);} .btn:hover{transform:translateY(-2px);} .btn-primary{background:var(--stream-accent);color:#241703;box-shadow:var(--shadow-sm);} .btn-primary:hover{background:var(--stream-primary);box-shadow:var(--shadow-md);} .btn-ghost{background:transparent;color:var(--on-ink);border-color:rgba(255,255,255,.35);} .btn-ghost:hover{background:rgba(255,255,255,.1);} /* ===================== PROGRESS BAR ===================== */ .progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--stream-accent);width:0%;z-index:1100;transition:width .1s linear;} /* ===================== HEADER ===================== */ .site-header{position:sticky;top:0;z-index:900;background:var(--ink);box-shadow:var(--shadow-sm);} .nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:1rem;} .logo{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:#fff;} .logo svg{flex-shrink:0;} .nav-links{display:none;align-items:center;gap:1.9rem;} .nav-links a,.nav-links .drop-btn{color:var(--on-ink-muted);font-weight:600;font-size:.97rem;background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:.35rem;padding:.4rem 0;transition:color .15s;} .nav-links a:hover,.nav-links .drop-btn:hover,.nav-links a:focus-visible,.nav-links .drop-btn[aria-expanded="true"]{color:#fff;} .drop-wrap{position:relative;} .dropdown-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:.5rem;min-width:220px;display:grid;gap:.15rem;} .dropdown-menu[hidden]{display:none;} .dropdown-menu a{display:flex;align-items:center;justify-content:space-between;color:var(--text);font-weight:600;padding:.65rem .8rem;border-radius:var(--radius-sm);font-size:.93rem;} .dropdown-menu a:hover{background:var(--paper);} .dropdown-menu a span{color:var(--text-muted);font-weight:500;font-size:.8rem;} .nav-actions{display:flex;align-items:center;gap:.4rem;} .icon-btn{width:42px;height:42px;border-radius:999px;border:none;background:transparent;color:var(--on-ink-muted);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s;} .icon-btn:hover{background:rgba(255,255,255,.1);color:#fff;} .icon-sun{display:none;} [data-theme="dark"] .icon-moon{display:none;} [data-theme="dark"] .icon-sun{display:block;} .menu-toggle{display:grid;} .menu-toggle .icon-close{display:none;} .menu-toggle[aria-expanded="true"] .icon-open{display:none;} .menu-toggle[aria-expanded="true"] .icon-close{display:grid;} .mobile-panel{display:none;position:absolute;top:var(--header-h);left:0;right:0;background:var(--ink);border-top:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-lg);} .mobile-panel.is-open{display:block;} .mobile-panel .container{padding:1.25rem 1.25rem 1.75rem;display:flex;flex-direction:column;gap:.35rem;} .mobile-panel a,.mobile-panel .drop-btn{color:var(--on-ink);font-weight:600;padding:.75rem .5rem;border-radius:var(--radius-sm);font-size:1.02rem;background:none;border:none;text-align:left;display:flex;justify-content:space-between;width:100%;cursor:pointer;} .mobile-panel a:hover,.mobile-panel .drop-btn:hover{background:rgba(255,255,255,.06);} .mobile-sub{display:none;padding-left:1rem;border-left:1px solid rgba(255,255,255,.12);margin:.15rem 0 .4rem .9rem;} .mobile-sub.is-open{display:flex;flex-direction:column;gap:.1rem;} .mobile-sub a{font-size:.95rem;color:var(--on-ink-muted);} @media (min-width:1024px){ .nav-links{display:flex;} .menu-toggle,.mobile-panel{display:none !important;} } /* ===================== HERO ===================== */ .hero{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;padding:4.5rem 0 3.5rem;} .hero-bg{position:absolute;inset:0;opacity:.5;pointer-events:none;} .hero-inner{position:relative;display:grid;gap:2.5rem;} .hero h1{color:#fff;font-size:clamp(2.1rem,5.4vw,3.4rem);margin-top:.9rem;max-width:16ch;} .hero-sub{margin-top:1.15rem;color:var(--on-ink-muted);font-size:1.1rem;max-width:46ch;line-height:1.65;} .hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem;} .trust-strip{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2.2rem;} .trust-chip{display:flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:600;color:var(--on-ink);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.5rem .9rem;} .trust-chip svg{color:var(--gold);flex-shrink:0;} /* Journey / roadmap */ .journey{display:grid;gap:1rem;position:relative;} .journey-list{display:grid;gap:1rem;position:relative;} .journey-item{position:relative;display:flex;gap:1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);padding:1.1rem 1.2rem;} .journey-node{flex-shrink:0;width:38px;height:38px;border-radius:999px;background:var(--gold);color:#241703;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:.95rem;} .journey-item h3{color:#fff;font-size:1.02rem;font-family:var(--font-body);font-weight:700;} .journey-item p{color:var(--on-ink-muted);font-size:.9rem;margin-top:.25rem;} @media (min-width:1024px){ .hero-inner{grid-template-columns:1.1fr 1fr;align-items:center;} .journey-list{grid-template-columns:1fr;position:relative;} .journey-list::before{content:"";position:absolute;left:19px;top:38px;bottom:38px;width:2px;background:repeating-linear-gradient(to bottom,rgba(232,163,61,.55) 0 6px,transparent 6px 12px);} } /* ===================== STREAMS ===================== */ .streams{padding:5rem 0;} .stream-grid{display:grid;gap:1.4rem;grid-template-columns:1fr;} @media (min-width:640px){.stream-grid{grid-template-columns:repeat(2,1fr);}} @media (min-width:1180px){.stream-grid{grid-template-columns:repeat(5,1fr);}} .stream-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.9rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease);} .stream-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);} .stream-icon{width:48px;height:48px;border-radius:var(--radius-sm);display:grid;place-items:center;color:#fff;} .stream-card h3{font-size:1.15rem;} .stream-card p{color:var(--text-muted);font-size:.92rem;flex-grow:1;} .stream-chips{display:flex;flex-wrap:wrap;gap:.4rem;} .stream-chips span{font-size:.74rem;font-weight:600;color:var(--text-muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.28rem .65rem;} .stream-link{font-weight:700;font-size:.9rem;display:inline-flex;align-items:center;gap:.35rem;margin-top:.3rem;} .stream-link svg{transition:transform .15s;} .stream-card:hover .stream-link svg{transform:translateX(3px);} .s-science .stream-icon{background:var(--teal);} .s-commerce .stream-icon{background:var(--gold-strong);} .s-arts .stream-icon{background:var(--plum);} .s-diploma .stream-icon{background:var(--slate);} .s-iti .stream-icon{background:var(--rust);} .s-science .stream-link{color:var(--teal);} .s-commerce .stream-link{color:var(--gold-strong);} .s-arts .stream-link{color:var(--plum);} .s-diploma .stream-link{color:var(--slate);} .s-iti .stream-link{color:var(--rust);} /* ===================== CAREER EXPLORER ===================== */ .explorer{padding:5rem 0;background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .explorer-controls{display:flex;flex-direction:column;gap:1.1rem;margin-bottom:2rem;} .search-box{position:relative;max-width:420px;} .search-box svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--text-muted);} .search-box input{width:100%;padding:.85rem 1rem .85rem 2.7rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--text);font-size:.98rem;font-family:inherit;} .search-box input:focus-visible{outline:3px solid var(--gold);} .tabs{display:flex;flex-wrap:wrap;gap:.55rem;} .tab-btn{padding:.55rem 1.05rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--text-muted);font-weight:600;font-size:.86rem;cursor:pointer;transition:all .15s;} .tab-btn:hover{color:var(--text);} .tab-btn[aria-selected="true"]{background:var(--ink);color:#fff;border-color:var(--ink);} .career-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.75rem;} .career-item a{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper);height:100%;transition:border-color .15s,transform .15s;} .career-item a:hover{border-color:var(--gold);transform:translateY(-2px);} .career-item strong{font-size:.95rem;font-weight:700;} .career-item span{font-size:.78rem;color:var(--text-muted);} .career-item[hidden]{display:none;} #noResults{text-align:center;color:var(--text-muted);padding:2.5rem 0;} #noResults[hidden]{display:none;} .explorer-count{font-size:.85rem;color:var(--text-muted);margin-top:1.2rem;font-family:var(--font-mono);} /* ===================== WHY / FEATURES ===================== */ .why{padding:5rem 0;} .feature-grid{display:grid;gap:1.3rem;grid-template-columns:1fr;} @media (min-width:640px){.feature-grid{grid-template-columns:repeat(2,1fr);}} @media (min-width:1024px){.feature-grid{grid-template-columns:repeat(3,1fr);}} .feature-card{padding:1.6rem;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);} .feature-card .f-icon{width:44px;height:44px;border-radius:var(--radius-sm);background:var(--paper);display:grid;place-items:center;color:var(--gold-strong);margin-bottom:1rem;} [data-theme="dark"] .feature-card .f-icon{color:var(--gold);} .feature-card h3{font-size:1.05rem;} .feature-card p{color:var(--text-muted);font-size:.92rem;margin-top:.5rem;} /* ===================== AFTER 10 BANNER ===================== */ .after10{padding:0 0 5rem;} .after10-card{background:linear-gradient(135deg,var(--ink),var(--ink-soft));border-radius:var(--radius-lg);padding:2.6rem 2rem;display:grid;gap:1.5rem;color:var(--on-ink);position:relative;overflow:hidden;} .after10-card h2{color:#fff;font-size:clamp(1.5rem,3vw,2rem);max-width:26ch;} .after10-card p{color:var(--on-ink-muted);margin-top:.7rem;max-width:52ch;} @media (min-width:768px){.after10-card{grid-template-columns:1fr auto;align-items:center;padding:3rem;}} /* ===================== FAQ ===================== */ .faq{padding:5rem 0;} .faq-list{display:grid;gap:.7rem;max-width:760px;} .faq-item{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);overflow:hidden;} .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.3rem;background:none;border:none;text-align:left;font-weight:700;font-size:1rem;cursor:pointer;color:var(--text);} .faq-q svg{flex-shrink:0;transition:transform .2s var(--ease);color:var(--text-muted);} .faq-item[data-open="true"] .faq-q svg{transform:rotate(180deg);} .faq-a{padding:0 1.3rem;color:var(--text-muted);font-size:.95rem;line-height:1.7;max-height:0;overflow:hidden;transition:max-height .25s var(--ease),padding .25s var(--ease);} .faq-item[data-open="true"] .faq-a{padding:0 1.3rem 1.25rem;} /* ===================== FOOTER ===================== */ .site-footer{background:var(--ink);color:var(--on-ink-muted);padding:4rem 0 2rem;} .footer-top{display:grid;gap:2.4rem;grid-template-columns:1fr;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.1);} @media (min-width:768px) and (max-width:1023px){.footer-top{grid-template-columns:1fr 1fr;}} @media (min-width:1024px){.footer-top{grid-template-columns:1.3fr repeat(4,1fr);}} .footer-brand .logo{margin-bottom:.9rem;} .footer-brand p{max-width:34ch;font-size:.9rem;line-height:1.7;} .footer-col h4{color:#fff;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-body);margin-bottom:1rem;} .footer-col ul{display:grid;gap:.6rem;} .footer-col a{font-size:.92rem;transition:color .15s;} .footer-col a:hover{color:#fff;} .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-top:1.6rem;font-size:.82rem;} /* ===================== BACK TO TOP ===================== */ .back-to-top{position:fixed;right:1.25rem;bottom:1.25rem;width:46px;height:46px;border-radius:999px;background:var(--ink);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-md);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:800;} .back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;} /* Reveal on scroll */ .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);} .reveal.is-visible{opacity:1;transform:translateY(0);} ul,ol{margin:0;padding:0;list-style:none;} .btn-outline{background:transparent;color:var(--text);border-color:var(--line);} .btn-outline:hover{background:var(--surface);box-shadow:var(--shadow-sm);} .nav-links a[aria-current="page"]{color:#fff;} .dropdown-menu a[aria-current="page"]{background:var(--paper);color:var(--gold-strong);} .mobile-panel a[aria-current="page"]{color:var(--gold);} /* ===================== BREADCRUMB ===================== */ .breadcrumb-bar{background:var(--ink);border-top:1px solid rgba(255,255,255,.08);} .breadcrumb{display:flex;align-items:center;gap:.5rem;padding:.85rem 0;font-size:.85rem;color:var(--on-ink-muted);flex-wrap:wrap;} .breadcrumb a{color:var(--on-ink-muted);font-weight:600;} .breadcrumb a:hover{color:#fff;} .breadcrumb span[aria-current]{color:#fff;font-weight:600;} .breadcrumb svg{color:var(--on-ink-muted);flex-shrink:0;} /* ===================== PAGE HERO ===================== */ .page-hero{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;padding:3.2rem 0 3.5rem;} .page-hero-bg{position:absolute;inset:0;opacity:.5;pointer-events:none;} .page-hero-inner{position:relative;max-width:760px;} .page-hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3rem);margin-top:.9rem;} .page-hero p{margin-top:1.1rem;color:var(--on-ink-muted);font-size:1.08rem;max-width:56ch;line-height:1.65;} .page-hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.7rem;} .trust-strip{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.8rem;} /* ===================== GENERIC SECTIONS ===================== */ .block{padding:4.5rem 0;} .block-alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .prose{max-width:760px;color:var(--text-muted);font-size:1.03rem;line-height:1.75;display:grid;gap:1.1rem;} .prose strong{color:var(--text);} .subject-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem;} .subject-chips span{font-size:.85rem;font-weight:600;color:var(--text);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;} /* Eligibility cards */ .eligibility-grid{display:grid;gap:1.4rem;grid-template-columns:1fr;} @media (min-width:768px){.eligibility-grid{grid-template-columns:1fr 1fr;}} .elig-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;} .elig-card .e-icon{width:46px;height:46px;border-radius:var(--radius-sm);background:var(--paper);display:grid;place-items:center;color:var(--stream-primary);margin-bottom:1rem;} [data-theme="dark"] .elig-card .e-icon{color:var(--stream-accent);} .elig-card h3{font-size:1.15rem;margin-bottom:.9rem;} .elig-card ul{display:grid;gap:.65rem;} .elig-card li{display:flex;gap:.6rem;font-size:.94rem;color:var(--text-muted);} .elig-card li svg{flex-shrink:0;margin-top:.2rem;color:var(--teal);} /* NEW GROUP HEADING */ .career-group-heading{ font-size:.78rem; font-family:var(--font-mono); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--gold-strong); margin:3rem 0 1.1rem; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; align-items:center; gap:.55rem; } .career-group-heading::before{ content:""; width:7px; height:7px; border-radius:999px; background:var(--gold); flex-shrink:0; } [data-theme="dark"] .career-group-heading{ color:var(--gold); } .career-group-heading:first-of-type{ margin-top:0; padding-top:0; border-top:none; } /* The collapsible-groups JS (scripts.html) wraps each career-group-heading in its own .career-group container, which would otherwise make the :first-of-type rule above match every group instead of just the first. This keeps the "no border on the very first group" behaviour correct after that wrapping happens. */ .career-group:first-of-type .career-group-heading{ margin-top:0; padding-top:0; border-top:none; } @media (min-width:768px){ .career-group-heading{ margin-top:3.6rem; padding-top:2rem; } } /* Career grid (reused pattern) */ .career-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.85rem;} .career-item a{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.1rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper);height:100%;transition:border-color .15s,transform .15s;} .career-item strong{font-size:.97rem;font-weight:700;} .career-item span{font-size:.8rem;color:var(--text-muted);} /* Journey / roadmap */ .journey-list{display:grid;gap:1rem;position:relative;} .journey-item{position:relative;display:flex;gap:1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.2rem 1.3rem;} .journey-item h3{font-size:1.02rem;font-family:var(--font-body);font-weight:700;} .journey-item p{color:var(--text-muted);font-size:.92rem;margin-top:.25rem;} @media (min-width:1024px){ .journey-list{grid-template-columns:repeat(4,1fr);} .journey-list::before{content:"";position:absolute;left:0;right:0;top:19px;height:2px;background:repeating-linear-gradient(to right,var(--line) 0 8px,transparent 8px 16px);z-index:0;} .journey-item{flex-direction:column;position:relative;z-index:1;} } /* Pros & cons */ .proscons{display:grid;gap:1.4rem;grid-template-columns:1fr;} @media (min-width:768px){.proscons{grid-template-columns:1fr 1fr;}} .pc-card{border-radius:var(--radius-lg);padding:1.8rem;border:1px solid var(--line);} .pc-card.pros{background:rgba(31,111,92,.06);} .pc-card.cons{background:rgba(196,67,46,.06);} .pc-card h3{font-size:1.1rem;display:flex;align-items:center;gap:.5rem;} .pc-card.pros h3{color:var(--teal);} .pc-card.cons h3{color:var(--rust);} .pc-card ul{margin-top:1rem;display:grid;gap:.7rem;} .pc-card li{display:flex;gap:.6rem;font-size:.94rem;color:var(--text-muted);} .pc-card li svg{flex-shrink:0;margin-top:.2rem;} .pc-card.pros li svg{color:var(--teal);} .pc-card.cons li svg{color:var(--rust);} /* Related streams */ .related-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);} @media (min-width:768px){.related-grid{grid-template-columns:repeat(4,1fr);}} .related-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.3rem;text-align:center;transition:transform .15s,box-shadow .15s;} .related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);} .related-card strong{display:block;font-size:1rem;margin-top:.3rem;} .related-card span{font-size:.78rem;color:var(--text-muted);} /* FAQ */ .faq-list{display:grid;gap:.7rem;max-width:760px;} table{border-collapse:collapse;width:100%;} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}} .section-head{max-width:680px;margin-bottom:2.3rem;} .section-head h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-top:.6rem;} .section-head p{color:var(--text-muted);margin-top:.75rem;font-size:1.02rem;} .progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--stream-accent);width:0%;z-index:1100;transition:width .1s linear;} .site-header{position:sticky;top:0;z-index:900;background:var(--ink);box-shadow:var(--shadow-sm);} @media (min-width:1024px){.nav-links{display:flex;}.menu-toggle,.mobile-panel{display:none !important;}} .breadcrumb-bar{background:var(--ink);border-top:1px solid rgba(255,255,255,.08);} /* Page hero + quick facts */ .page-hero{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;padding:3rem 0 2.6rem;} .page-hero-inner{position:relative;max-width:780px;} .page-hero .meta-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-top:1rem;font-size:.85rem;color:var(--on-ink-muted);} .page-hero .meta-row svg{color:var(--gold);} .page-hero h1{color:#fff;font-size:clamp(1.9rem,4.2vw,2.8rem);margin-top:.7rem;} .page-hero p{margin-top:1rem;color:var(--on-ink-muted);font-size:1.06rem;max-width:58ch;line-height:1.65;} .page-hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.5rem;} .quickfacts{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr);margin-top:2rem;} @media (min-width:768px){.quickfacts{grid-template-columns:repeat(4,1fr);}} .qf-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);padding:1rem 1.1rem;} .qf-card span{display:block;font-size:.72rem;color:var(--on-ink-muted);text-transform:uppercase;letter-spacing:.05em;} .qf-card strong{display:block;font-family:var(--font-mono);font-size:1.05rem;color:#fff;margin-top:.35rem;} /* Quick nav */ .quicknav-bar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:var(--header-h);z-index:80;} .quicknav{display:flex;gap:.5rem;overflow-x:auto;padding:.9rem 0;scrollbar-width:none;} .quicknav::-webkit-scrollbar{display:none;} .quicknav a{flex-shrink:0;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--text-muted);font-weight:600;font-size:.83rem;white-space:nowrap;} .quicknav a:hover{color:var(--text);border-color:var(--gold);} .block{padding:4rem 0;} .prose{max-width:760px;color:var(--text-muted);font-size:1.02rem;line-height:1.75;display:grid;gap:1.05rem;} .prose ul{display:grid;gap:.6rem;margin-top:.3rem;} .prose ul li{display:flex;gap:.6rem;} .prose ul li svg{flex-shrink:0;margin-top:.25rem;color:var(--teal);} .subject-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.2rem;} .eligibility-grid{display:grid;gap:1.4rem;grid-template-columns:1fr;} .elig-card h3{font-size:1.12rem;margin-bottom:.9rem;} .journey-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));position:relative;} .journey-item{position:relative;display:flex;flex-direction:column;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.2rem 1.3rem;z-index:1;} .journey-node{flex-shrink:0;width:36px;height:36px;border-radius:999px;background:var(--gold);color:#241703;display:grid;place-items:center;font-family:var(--font-mono);font-weight:700;font-size:.9rem;} .journey-item h3{font-size:.98rem;font-family:var(--font-body);font-weight:700;} .journey-item p{color:var(--text-muted);font-size:.88rem;} @media (min-width:1024px){.journey-list::before{content:"";position:absolute;left:0;right:0;top:18px;height:2px;background:repeating-linear-gradient(to right,var(--line) 0 8px,transparent 8px 16px);z-index:0;}} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);} .table-simple th,.table-simple td{text-align:left;padding:.85rem 1.1rem;font-size:.92rem;border-bottom:1px solid var(--line);white-space:nowrap;} .table-simple th{background:var(--paper);color:var(--text-muted);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;} .table-simple tr:last-child td{border-bottom:none;} .table-note{font-size:.85rem;color:var(--text-muted);margin-top:.9rem;} .salary-cards{display:grid;gap:1.2rem;grid-template-columns:1fr;} @media (min-width:640px){.salary-cards{grid-template-columns:repeat(3,1fr);}} .salary-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;text-align:center;} .salary-card span{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;} .salary-card strong{display:block;font-family:var(--font-mono);font-size:1.5rem;margin:.5rem 0;color:var(--gold-strong);} [data-theme="dark"] .salary-card strong{color:var(--gold);} .salary-card p{font-size:.85rem;color:var(--text-muted);} .chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem;} .chip-grid .item{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.9rem 1rem;font-size:.9rem;color:var(--text-muted);} .chip-grid .item strong{display:block;color:var(--text);font-size:.95rem;margin-bottom:.15rem;} .proscons{display:grid;gap:1.4rem;grid-template-columns:1fr;} .pc-card h3{font-size:1.08rem;display:flex;align-items:center;gap:.5rem;} .pc-card li{display:flex;gap:.6rem;font-size:.93rem;color:var(--text-muted);} .myth-grid{display:grid;gap:1rem;} .myth-item{display:grid;gap:.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.2rem 1.4rem;} .myth-item .myth{font-weight:700;color:var(--rust);font-size:.92rem;display:flex;gap:.5rem;} .myth-item .fact{color:var(--text-muted);font-size:.92rem;display:flex;gap:.5rem;} .myth-item .fact strong{color:var(--teal);flex-shrink:0;} .myth-item .myth strong{flex-shrink:0;} .related-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);} @media (min-width:768px){.related-grid{grid-template-columns:repeat(5,1fr);}} .related-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.2rem;text-align:center;transition:transform .15s,box-shadow .15s;} .related-card strong{display:block;font-size:.98rem;margin-top:.2rem;} .related-card span{font-size:.76rem;color:var(--text-muted);} .site-footer{background:var(--ink);color:var(--on-ink-muted);padding:4rem 0 2rem;} .back-to-top{position:fixed;right:1.25rem;bottom:1.25rem;width:46px;height:46px;border-radius:999px;background:var(--ink);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-md);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s,transform .2s;z-index:800;} .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);} .section-head{max-width:700px;margin-bottom:2.3rem;} .page-hero{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;padding:3rem 0 2.6rem;} .page-hero-inner{position:relative;max-width:800px;} .page-hero p{margin-top:1rem;color:var(--on-ink-muted);font-size:1.06rem;max-width:60ch;line-height:1.65;} .quicknav-bar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:var(--header-h);z-index:80;} .prose{max-width:780px;color:var(--text-muted);font-size:1.02rem;line-height:1.75;display:grid;gap:1.05rem;} .note{display:flex;gap:.75rem;background:rgba(31,111,92,.07);border:1px solid rgba(31,111,92,.25);border-radius:var(--radius-md);padding:1.1rem 1.3rem;font-size:.92rem;color:var(--text-muted);max-width:780px;} .note svg{flex-shrink:0;color:var(--teal);margin-top:.15rem;} .warn{display:flex;gap:.75rem;background:rgba(196,67,46,.07);border:1px solid rgba(196,67,46,.25);border-radius:var(--radius-md);padding:1.1rem 1.3rem;font-size:.92rem;color:var(--text-muted);max-width:780px;} .warn svg{flex-shrink:0;color:var(--rust);margin-top:.15rem;} .journey-list{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));position:relative;} .table-simple th,.table-simple td{text-align:left;padding:.85rem 1.1rem;font-size:.9rem;border-bottom:1px solid var(--line);} .table-simple th{background:var(--paper);color:var(--text-muted);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;} .table-note{font-size:.85rem;color:var(--text-muted);margin-top:.9rem;max-width:780px;} .faq-list{display:grid;gap:.7rem;max-width:780px;} .page-hero{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;padding:3.4rem 0 3rem;} .page-hero h1{color:#fff;font-size:clamp(2rem,4.4vw,2.9rem);margin-top:.8rem;} .page-hero p{margin-top:1.05rem;color:var(--on-ink-muted);font-size:1.08rem;max-width:58ch;line-height:1.65;} .page-hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.6rem;} .stats-strip{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr);margin-top:2.2rem;} @media (min-width:768px){.stats-strip{grid-template-columns:repeat(4,1fr);}} .stat-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);padding:1rem 1.1rem;} .stat-card span{display:block;font-size:.72rem;color:var(--on-ink-muted);text-transform:uppercase;letter-spacing:.05em;} .stat-card strong{display:block;font-family:var(--font-mono);font-size:1.05rem;color:#fff;margin-top:.35rem;} .block{padding:4.2rem 0;} .prose{max-width:780px;color:var(--text-muted);font-size:1.03rem;line-height:1.8;display:grid;gap:1.15rem;} .prose ul{display:grid;gap:.65rem;margin-top:.3rem;} .cta-card{background:linear-gradient(135deg,var(--ink),var(--ink-soft));border-radius:var(--radius-lg);padding:2.6rem 2rem;display:grid;gap:1.5rem;color:var(--on-ink);position:relative;overflow:hidden;} .cta-card h2{color:#fff;font-size:clamp(1.5rem,3vw,2rem);max-width:26ch;} .cta-card p{color:var(--on-ink-muted);margin-top:.7rem;max-width:52ch;} @media (min-width:768px){.cta-card{grid-template-columns:1fr auto;align-items:center;padding:3rem;}} .prose{max-width:780px;color:var(--text-muted);font-size:1.03rem;line-height:1.8;display:grid;gap:1.05rem;} .contact-grid{display:grid;gap:1.4rem;grid-template-columns:1fr;} @media (min-width:768px){.contact-grid{grid-template-columns:1.1fr .9fr;align-items:start;}} .contact-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem;} .contact-card .c-icon{width:52px;height:52px;border-radius:var(--radius-sm);background:var(--paper);display:grid;place-items:center;color:var(--gold-strong);margin-bottom:1.2rem;} [data-theme="dark"] .contact-card .c-icon{color:var(--gold);} .contact-card h2{font-size:1.4rem;} .contact-card p{color:var(--text-muted);margin-top:.7rem;font-size:.98rem;line-height:1.7;} .email-pill{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;padding:.9rem 1.4rem;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-family:var(--font-mono);font-size:.98rem;font-weight:600;color:var(--text);transition:border-color .15s,transform .15s;} .email-pill:hover{border-color:var(--gold);transform:translateY(-2px);} .email-pill svg{color:var(--gold-strong);flex-shrink:0;} [data-theme="dark"] .email-pill svg{color:var(--gold);} .response-note{display:flex;gap:.6rem;margin-top:1.4rem;font-size:.86rem;color:var(--text-muted);} .response-note svg{flex-shrink:0;color:var(--teal);margin-top:.15rem;} .reason-list{display:grid;gap:.8rem;} .reason-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.1rem 1.3rem;display:flex;gap:.9rem;align-items:flex-start;} .reason-item svg{flex-shrink:0;color:var(--gold-strong);margin-top:.15rem;} [data-theme="dark"] .reason-item svg{color:var(--gold);} .reason-item strong{display:block;font-size:.95rem;color:var(--text);} .reason-item span{font-size:.86rem;color:var(--text-muted);} .page-hero h1{color:#fff;font-size:clamp(1.9rem,4.2vw,2.7rem);margin-top:.8rem;} .page-hero p{margin-top:1rem;color:var(--on-ink-muted);font-size:1.04rem;max-width:58ch;line-height:1.65;} .updated-chip{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;font-size:.82rem;font-weight:600;color:var(--on-ink);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.5rem .9rem;} .updated-chip svg{color:var(--gold);} .block{padding:3.4rem 0;} .legal-section h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin-bottom:1.1rem;} .prose{max-width:800px;color:var(--text-muted);font-size:1.01rem;line-height:1.8;display:grid;gap:1.05rem;} .prose a{color:var(--gold-strong);font-weight:600;text-decoration:underline;text-underline-offset:2px;} [data-theme="dark"] .prose a{color:var(--gold);} .note{display:flex;gap:.75rem;background:rgba(31,111,92,.07);border:1px solid rgba(31,111,92,.25);border-radius:var(--radius-md);padding:1.1rem 1.3rem;font-size:.92rem;color:var(--text-muted);max-width:800px;} .warn{display:flex;gap:.75rem;background:rgba(196,67,46,.07);border:1px solid rgba(196,67,46,.25);border-radius:var(--radius-md);padding:1.1rem 1.3rem;font-size:.92rem;color:var(--text-muted);max-width:800px;} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);margin-top:.5rem;} .table-simple{width:100%;border-collapse:collapse;} .table-simple th{background:var(--paper);color:var(--text-muted);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;} .cta-card{background:linear-gradient(135deg,var(--ink),var(--ink-soft));border-radius:var(--radius-lg);padding:2.4rem 2rem;display:grid;gap:1.4rem;color:var(--on-ink);} .cta-card h2{color:#fff;font-size:clamp(1.4rem,2.8vw,1.8rem);max-width:26ch;} .cta-card p{color:var(--on-ink-muted);margin-top:.6rem;max-width:52ch;} @media (min-width:768px){.cta-card{grid-template-columns:1fr auto;align-items:center;padding:2.6rem;}} .notfound-hero{position:relative;background:var(--ink);color:var(--on-ink);overflow:hidden;padding:5rem 0 4rem;min-height:calc(100vh - 72px);display:flex;align-items:center;} .notfound-bg{position:absolute;inset:0;opacity:.45;pointer-events:none;} .notfound-inner{position:relative;max-width:640px;margin:0 auto;text-align:center;} .notfound-code{font-family:var(--font-mono);font-size:clamp(4rem,14vw,7rem);font-weight:700;color:var(--gold);line-height:1;letter-spacing:-.02em;} .notfound-inner h1{color:#fff;font-size:clamp(1.7rem,4vw,2.4rem);margin-top:1rem;} .notfound-inner p{color:var(--on-ink-muted);font-size:1.05rem;margin-top:1rem;line-height:1.7;max-width:52ch;margin-left:auto;margin-right:auto;} .notfound-ctas{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:2rem;} .notfound-links{margin-top:3rem;padding-top:2.5rem;border-top:1px solid rgba(255,255,255,.12);} .notfound-links h2{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-mono);font-weight:600;margin-bottom:1.2rem;} .link-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem;} @media (min-width:640px){.link-grid{grid-template-columns:repeat(3,1fr);}} .link-grid a{display:block;padding:.85rem 1rem;border-radius:var(--radius-md);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--on-ink);font-weight:600;font-size:.9rem;transition:background .15s,transform .15s;} .link-grid a:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);} .report-note{margin-top:2.5rem;font-size:.85rem;color:var(--on-ink-muted);} .report-note a{color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:2px;} /* Scoped override: index.html's hero journey component uses a dark, semi- transparent variant of .journey-item/.journey-list/.journey-node, distinct from the light "roadmap" variant used on career pages. Both share class names by historical accident, so this scopes the hero's version by its .hero ancestor without needing any HTML changes. */ .hero .journey-list{display:grid;gap:1rem;position:relative;grid-template-columns:1fr;} .hero .journey-item{position:relative;display:flex;flex-direction:row;gap:1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);padding:1.1rem 1.2rem;} .hero .journey-node{width:38px;height:38px;font-size:.95rem;} .hero .journey-item h3{color:#fff;font-size:1.02rem;} .hero .journey-item p{color:var(--on-ink-muted);font-size:.9rem;} @media (min-width:1024px){ .hero-inner{grid-template-columns:1.1fr 1fr;align-items:center;} .hero .journey-list::before{content:"";position:absolute;left:19px;top:38px;bottom:38px;width:2px;background:repeating-linear-gradient(to bottom,rgba(232,163,61,.55) 0 6px,transparent 6px 12px);} } /* Dark-mode contrast boost for tinted info/warning/pros/cons boxes. Their base rgba() tint is tuned for a light background; on dark surfaces the same alpha reads a little muddy, so we lift it slightly here. */ [data-theme="dark"] .note{background:rgba(63,167,141,.14);border-color:rgba(63,167,141,.35);} [data-theme="dark"] .warn{background:rgba(232,103,76,.14);border-color:rgba(232,103,76,.35);} [data-theme="dark"] .pc-card.pros{background:rgba(63,167,141,.12);} [data-theme="dark"] .pc-card.cons{background:rgba(232,103,76,.12);} /* ---------- Read More / Read Less for long plain-text prose blocks ---------- Applied automatically by JS (see scripts.html) to .prose blocks that contain only

tags (no lists/tables), so no per-page HTML edits are needed. Height is measured at runtime from actual line-height, so it adapts to any font-size/viewport instead of using a fixed pixel cutoff. */ .prose.js-readmore{overflow:hidden;position:relative;transition:max-height .35s var(--ease);} .prose.js-readmore.is-expanded{overflow:visible;} .readmore-btn{display:inline-flex;align-items:center;gap:.35rem;margin-top:.75rem;padding:.45rem .9rem;font-family:var(--font-body);font-size:.88rem;font-weight:600;color:var(--teal);background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease);} .readmore-btn:hover,.readmore-btn:focus-visible{background:rgba(31,111,92,.08);border-color:var(--teal);} .readmore-btn svg{transition:transform .25s var(--ease);} .readmore-btn[aria-expanded="true"] svg{transform:rotate(180deg);} [data-theme="dark"] .readmore-btn{color:#5FC9AE;border-color:var(--line);} [data-theme="dark"] .readmore-btn:hover,[data-theme="dark"] .readmore-btn:focus-visible{background:rgba(95,201,174,.12);} /* ---------- Career-page identity accents ---------- These box models (button, eligibility card, subject chips, simple table header, prose links) previously had 5 near-duplicate per-stream colour blocks. Since --stream-primary/--stream-accent/--stream-soft/ --stream-border now resolve to the same global gold token everywhere (see the stream theme system note near :root), one shared block covers every stream identically — this also fixes a leftover inconsistency where each stream's dark-mode .btn-primary:hover text colour was still hardcoded to that stream's old individual brand colour. */ [data-stream] .btn-primary{color:#fff;} [data-theme="dark"][data-stream] .btn-primary:hover{color:#241703;} [data-stream] .elig-card{border-color:var(--stream-border);} [data-stream] .subject-chips span{border-color:var(--stream-border);color:var(--stream-primary);} [data-theme="dark"][data-stream] .subject-chips span{color:var(--stream-accent);} [data-stream] .table-simple th{background:var(--stream-soft);color:var(--stream-primary);} [data-theme="dark"][data-stream] .table-simple th{color:var(--stream-accent);} [data-stream] .prose a{color:var(--stream-primary);} [data-theme="dark"][data-stream] .prose a{color:var(--stream-accent);} /* ---------- Career search overlay (opened from header search icon) ---------- Same #careers section/IDs/JS logic as before; now presented as an overlay instead of a permanent lower-page section, so the homepage doesn't carry two career-browsing UIs. */ .search-overlay{position:fixed;inset:0;z-index:950;visibility:hidden;} .search-overlay[data-open="true"]{visibility:visible;} .search-overlay-backdrop{position:absolute;inset:0;background:rgba(15,42,61,.55);opacity:0;transition:opacity .25s var(--ease);} .search-overlay[data-open="true"] .search-overlay-backdrop{opacity:1;} .search-overlay-panel{position:relative;max-height:92vh;overflow-y:auto;background:var(--paper);border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-lg);transform:translateY(-16px);opacity:0;transition:transform .25s var(--ease),opacity .25s var(--ease);padding-bottom:2rem;} .search-overlay[data-open="true"] .search-overlay-panel{transform:translateY(0);opacity:1;} .search-overlay-close{position:absolute;top:1.2rem;right:1.2rem;width:40px;height:40px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--text);display:grid;place-items:center;cursor:pointer;} /* ---------- Homepage: Explore by Goal ---------- Reuses .feature-grid layout and existing card/border/radius tokens; no new grid system duplicated. */ .goal-card{padding:1.5rem 1.4rem;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:.6rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease);} a.goal-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);} .goal-card h3{margin:0;font-size:1.05rem;} .goal-card p{margin:0;color:var(--text-muted);font-size:.92rem;} .goal-card .goal-link{margin-top:.2rem;font-weight:600;font-size:.88rem;color:var(--gold-strong);} [data-theme="dark"] .goal-card .goal-link{color:var(--gold);} .goal-card.is-soon{background:var(--paper);border-style:dashed;cursor:default;} .soon-badge{display:inline-flex;align-self:flex-start;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--text-muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.25rem .6rem;} /* ---------- Official Source link ---------- Small, reusable citation-style link for placing next to a factual claim (salary, fees, eligibility, governing body, exam details, etc.) when a genuine official source exists. Plain text link + icon, no heavy badge. Intentionally has no relationship to .prose/.table-note/Read More, tables, FAQs, myth/fact or pros/cons — safe to drop in anywhere without affecting them. */ .source-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.5rem;font-size:.82rem;font-weight:600;color:var(--text-muted);text-decoration:none;border-bottom:1px dashed var(--line);padding-bottom:1px;} .source-link:hover,.source-link:focus-visible{color:var(--stream-primary);border-bottom-color:var(--stream-border);} .source-link svg{flex-shrink:0;opacity:.75;} /* ---------- Section visual (career-page illustration) ---------- Reusable pattern for a single, purposeful illustration inside a career page. Self-contained gradient card (not tied to --surface/--paper), so it reads correctly in both light and dark mode without extra rules. Not used decoratively on every section — only where a visual genuinely helps. Local SVG assets only; no stock photos. */ .section-visual{margin:1.6rem 0 0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm);} .section-visual img{display:block;width:100%;height:auto;max-height:320px;object-fit:cover;} /* ---------- Typography & spacing readability pass ---------- Additive refinements layered on top of the rules already above: later declarations of equal specificity win the cascade, so every existing .prose/.block/.section-head variant across page templates is unified in one place instead of editing each one individually. Desktop stays compact (small text-width tweak only); mobile gets tighter section padding and a calibrated paragraph size/line-height so pages read easier without needing extra scrolling. Cards, tables, FAQs and roadmaps use their own classes and are not touched by this. */ .prose{max-width:700px;} @media (max-width:767px){ h1,h2,h3,h4{line-height:1.28;} .block{padding:2.75rem 0;} .section-head{margin-bottom:1.6rem;} .section-head p{margin-top:.6rem;} .prose{font-size:1.05rem;line-height:1.68;gap:1rem;} } /* ---------- Internal navigation links (exam/college cross-links) ---------- Distinct from .source-link (used only for official external sources). Reusable sitewide for "Explore JEE Main", "Explore B.Tech Colleges" style contextual links inside body content, and for the small exam-name link inside a dark page-hero meta-row. */ .cx-link{display:inline-flex;align-items:center;gap:.3rem;margin-top:.6rem;font-size:.88rem;font-weight:700;color:var(--stream-primary);text-decoration:none;border-bottom:1px solid var(--stream-border);} .cx-link:hover,.cx-link:focus-visible{color:var(--stream-accent);border-bottom-color:var(--stream-accent);} .page-hero .meta-row a{color:var(--gold);text-decoration:underline;font-weight:600;} .page-hero .meta-row a:hover,.page-hero .meta-row a:focus-visible{color:#fff;} /* ========================================================================== GLOBAL EXAM-LINK STYLE Makes a genuine internal link to an exam page (JEE Main, JEE Advanced, NEET-UG, CUET-UG, etc.) visually distinguishable from ordinary body text, without touching links that already have their own component style (.cx-link, .related-card, .source-link, header/footer/breadcrumb nav). New exam pages just need to be added to this selector list once. ========================================================================== */ a[href="jee-main.html"]:not(.cx-link):not(.related-card):not(.source-link), a[href="jee-advanced.html"]:not(.cx-link):not(.related-card):not(.source-link), a[href="neet-ug.html"]:not(.cx-link):not(.related-card):not(.source-link), a[href="cuet-ug.html"]:not(.cx-link):not(.related-card):not(.source-link), a[href="icar-aieea.html"]:not(.cx-link):not(.related-card):not(.source-link){ color:var(--text); font-weight:700; text-decoration:underline; text-decoration-color:var(--stream-primary); text-decoration-thickness:1.5px; text-underline-offset:2px; } a[href="jee-main.html"]:not(.cx-link):not(.related-card):not(.source-link):hover, a[href="jee-advanced.html"]:not(.cx-link):not(.related-card):not(.source-link):hover, a[href="neet-ug.html"]:not(.cx-link):not(.related-card):not(.source-link):hover, a[href="cuet-ug.html"]:not(.cx-link):not(.related-card):not(.source-link):hover, a[href="icar-aieea.html"]:not(.cx-link):not(.related-card):not(.source-link):hover{ color:var(--stream-primary); text-decoration-color:var(--stream-accent); } /* ========================================================================== "ON THIS PAGE" / TOPIC NAVIGATION Auto-generated by scripts.html from the page's own headings when a page has enough of them to be worth navigating. No per-page markup required. Architecture: scripts.html wraps main's existing content in .page-nav-content and adds .page-nav as a sibling inside .page-nav-layout, which becomes a real two-column CSS grid from 1200px up (content stays left and is the same width as before down to that point; the nav column is a narrow ~16rem sticky panel that can never overlap content because it's a grid column, not a floating box). Below 1200px, the grid collapses back to a single column and a compact mobile toggle (inserted right after the page's hero) is used instead — the pre-existing compact mobile pattern, unchanged in behaviour. ========================================================================== */ .page-nav-layout{display:block;} @media (min-width:1200px){ .page-nav-layout{ display:grid; grid-template-columns:minmax(0,1fr) 16rem; gap:2.5rem; align-items:start; max-width:calc(var(--container) + 16rem + 2.5rem); margin:0 auto; padding:0 1.25rem; } .page-nav-content{min-width:0;} } @media (min-width:1200px) and (max-width:1799.98px){ .page-nav-layout{grid-template-columns:minmax(0,1fr) 14rem;gap:1.75rem;} } .page-nav{ display:none; width:100%; max-height:calc(100vh - 8rem); overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:1rem 1.1rem; font-size:.83rem; box-shadow:0 2px 10px rgba(0,0,0,.05); } @media (min-width:1200px){ .page-nav{ display:block; position:sticky; top:6.5rem; } } .page-nav h2{ margin:0 0 .6rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:700; } .page-nav ol{list-style:none;margin:0;padding:0;counter-reset:pagenav;} .page-nav li{counter-increment:pagenav;margin:0;} .page-nav a{ display:flex; gap:.5rem; align-items:baseline; padding:.32rem 0; color:var(--text-muted); text-decoration:none; line-height:1.3; font-size:.82rem; border-left:2px solid transparent; padding-left:.6rem; margin-left:-.6rem; } .page-nav a::before{ content:counter(pagenav)"."; font-weight:700; color:var(--gold-strong); flex-shrink:0; } .page-nav a:hover,.page-nav a:focus-visible{color:var(--text);} .page-nav a.is-active{color:var(--text);border-left-color:var(--gold-strong);font-weight:600;background:var(--paper);border-radius:0 6px 6px 0;} .page-nav-mobile{display:none;} @media (max-width:1199.98px){ .page-nav-mobile{display:block;margin:0 0 1.5rem;} } @media (min-width:1200px){ .page-nav-mobile{display:none !important;} .quicknav-bar.has-sidebar-nav{display:none;} } .page-nav-mobile-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.6rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:.7rem 1rem; font-family:inherit; font-size:.88rem; font-weight:700; color:var(--text); cursor:pointer; } .page-nav-mobile-toggle:hover,.page-nav-mobile-toggle:focus-visible{border-color:var(--gold-strong);} .page-nav-mobile-toggle svg{transition:transform .18s ease;flex-shrink:0;} .page-nav-mobile-toggle[aria-expanded="true"] svg{transform:rotate(180deg);} .page-nav-mobile-panel{ display:none; background:var(--surface); border:1px solid var(--line); border-top:none; border-radius:0 0 var(--radius-md) var(--radius-md); padding:.6rem 1rem .8rem; font-size:.88rem; } .page-nav-mobile-panel.is-open{display:block;} .page-nav-mobile-panel ol{list-style:none;margin:0;padding:0;counter-reset:pagenavm;} .page-nav-mobile-panel li{counter-increment:pagenavm;} .page-nav-mobile-panel a{display:flex;gap:.5rem;padding:.4rem 0;color:var(--text-muted);text-decoration:none;border-bottom:1px solid var(--line);} .page-nav-mobile-panel li:last-child a{border-bottom:none;} .page-nav-mobile-panel a::before{content:counter(pagenavm)".";font-weight:700;color:var(--gold-strong);flex-shrink:0;} /* ========================================================================== COLLAPSIBLE CAREER GROUPS Auto-applied by scripts.html to every h3.career-group-heading + the ul.career-grid that follows it. Content stays in the HTML source at all times (collapsed via max-height, not display:none/hidden) so every career link remains crawlable and present in the page's real markup. ========================================================================== */ .career-group{margin-bottom:1.6rem;} .career-group-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:0;} .career-group-head .career-group-heading{margin:0;} .open-list-btn{ display:inline-flex; align-items:center; gap:.4rem; background:var(--stream-soft); color:var(--stream-primary); border:1px solid var(--stream-border); border-radius:999px; padding:.45rem 1.1rem; font-family:inherit; font-size:.82rem; font-weight:700; letter-spacing:.02em; cursor:pointer; flex-shrink:0; transition:background .15s ease,color .15s ease; } .open-list-btn:hover{background:var(--stream-border);} .open-list-btn:focus-visible{outline:2px solid var(--stream-accent);outline-offset:2px;} .open-list-btn svg{transition:transform .18s ease;flex-shrink:0;} .open-list-btn[aria-expanded="true"] svg{transform:rotate(180deg);} .career-group-panel{ max-height:0; overflow:hidden; transition:max-height .28s ease; } .career-group-panel.is-open{max-height:4000px;} .career-group-panel .career-grid{margin-top:1rem;} /* ========================================================================== ENTRANCE EXAM CARD Reusable component for career pages: highlights a specific relevant exam with a short explanation and two clear actions (the exam guide, and coaching for it where that destination exists). Distinct from the plain .cx-link CTA (used for college-directory links) so a page can show both without visual redundancy. Multiple exams on one career page = multiple .exam-card items inside the same .exam-card-grid. ========================================================================== */ .exam-card-grid{display:grid;gap:1rem;grid-template-columns:1fr;margin:1.4rem 0;} @media (min-width:640px){.exam-card-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}} .exam-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;} .exam-card h3{margin:0;font-size:1.05rem;} .exam-card p{margin:0;font-size:.9rem;color:var(--text-muted);flex-grow:1;line-height:1.55;} .exam-card-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem;} .btn-exam-primary,.btn-exam-secondary{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.5rem 1.1rem;font-size:.85rem;font-weight:700;text-decoration:none;white-space:nowrap;} .btn-exam-primary{background:var(--gold-strong);color:#fff;} .btn-exam-primary:hover,.btn-exam-primary:focus-visible{background:var(--gold);} .btn-exam-secondary{background:var(--stream-soft);color:var(--stream-primary);border:1px solid var(--stream-border);} .btn-exam-secondary:hover,.btn-exam-secondary:focus-visible{background:var(--stream-border);} /* ========================================================================== CAREER FIT QUIZ (career-fit.html) Small reusable component set for a client-side, no-backend guidance quiz: pill-style option chips (checkbox/radio, same visual language as .tab-btn), a results grid, and a "why this matched" chip list. All scoring runs in the browser from a small in-page data array — nothing is submitted anywhere, and every result links to a real, already- existing career page (never invented). ========================================================================== */ .fit-step{margin-bottom:2.2rem;} .fit-step:last-child{margin-bottom:0;} .fit-step-label{display:block;font-weight:700;font-size:1rem;margin-bottom:.3rem;} .fit-step-hint{font-size:.85rem;color:var(--text-muted);margin:0 0 .9rem;} .fit-options{display:flex;flex-wrap:wrap;gap:.6rem;} .fit-option{position:relative;} .fit-option input{position:absolute;opacity:0;width:1px;height:1px;} .fit-option label{ display:inline-flex;align-items:center;gap:.4rem; padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--line); background:var(--paper);color:var(--text-muted);font-weight:600;font-size:.88rem; cursor:pointer;transition:all .15s; } .fit-option input:checked + label{background:var(--ink);color:#fff;border-color:var(--ink);} .fit-option input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px;} .fit-option label:hover{border-color:var(--gold-strong);} .fit-submit-row{display:flex;justify-content:center;margin-top:1.2rem;} .btn-fit-submit{ display:inline-flex;align-items:center;gap:.5rem;background:var(--gold-strong);color:#fff; border:none;border-radius:999px;padding:.9rem 2rem;font-size:.98rem;font-weight:700; cursor:pointer;font-family:inherit; } .btn-fit-submit:hover,.btn-fit-submit:focus-visible{background:var(--gold);} .fit-results{display:none;} .fit-results.is-visible{display:block;} .fit-results-empty{display:none;padding:1.2rem 1.4rem;border:1px dashed var(--line);border-radius:var(--radius-md);background:var(--paper);color:var(--text-muted);font-size:.92rem;} .fit-results-empty.is-visible{display:block;} .fit-result-grid{display:grid;gap:1.1rem;grid-template-columns:1fr;margin-top:1rem;} @media (min-width:720px){.fit-result-grid{grid-template-columns:repeat(2,1fr);}} .fit-result-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.6rem;} .fit-result-rank{display:inline-flex;align-self:flex-start;font-family:var(--font-mono);font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.2rem .6rem;} .fit-result-card h3{margin:0;font-size:1.08rem;} .fit-result-card .fit-stream{font-size:.78rem;color:var(--text-muted);font-weight:600;} .fit-result-why{font-size:.86rem;color:var(--text-muted);line-height:1.5;margin:0;} .fit-result-why strong{color:var(--text);} .fit-result-card a.fit-explore{align-self:flex-start;margin-top:.2rem;font-size:.85rem;font-weight:700;color:var(--stream-primary);text-decoration:underline;}