/* ============================================================ AJCE MCA Department — "Warm Academic Authority" Redesign Matches ajce.in homepage design system (navy / terra / gold) Scoped under .ece-root so it does not conflict with Slate's main.css ============================================================ */ :root { --ece-ink:#1B1B1E; --ece-ink-80:#3A3A3D; --ece-ink-50:#7A7A7D; --ece-ink-25:#BABABC; --ece-ink-10:#E5E5E6; --ece-ink-05:#F2F2F3; --ece-paper:#FAFAF8; --ece-white:#FFFFFF; --ece-navy:#0A1F3F; --ece-navy-light:#1A3A64; --ece-terra:#C2532A; --ece-terra-dark:#A0421F; --ece-terra-glow:#E86B3E; --ece-gold:#C89B3C; --ece-sage:#526B5E; --ece-ff-head:'Fraunces','Georgia',serif; --ece-ff-body:'Outfit','Helvetica Neue',sans-serif; --ece-ff-mono:'Space Mono',monospace; --ece-ease:cubic-bezier(.4,0,.2,1); --ece-max:1280px; } /* Reset / Base — scoped so original Slate still works for untouched pages */ .ece-root, .ece-root *, .ece-root *::before, .ece-root *::after { box-sizing:border-box; } .ece-root { margin:0 !important; padding:0 !important; font-family:var(--ece-ff-body); color:var(--ece-ink-80); background:var(--ece-paper); line-height:1.6; -webkit-font-smoothing:antialiased; } /* Smooth scroll + anchor offset so in-page jumps clear the sticky header */ html { scroll-behavior:smooth; } .ece-root section[id], .ece-root [id^="pathways"], .ece-root [id^="grants"], .ece-root [id^="courses"], .ece-root [id^="updates"], .ece-root [id^="about"], .ece-root [id^="coacademic"], .ece-root [id^="contact"] { scroll-margin-top:100px; } /* ===== Sticky-header plumbing ===== position:sticky on .ece-hdr is bounded by its nearest positioning/layout ancestor. Because mcaheader-new.html is injected into a short (~92px) wrapper
, the sticky header used to "release" as soon as the user scrolled past that wrapper's height. Making the wrapper display:contents removes its box from layout, so the header's effective parent becomes and it can stay pinned through the entire page scroll. Covers three page layouts: 1. index.html — >
2. inner pages — >
3. adm. navigators — > .ece-new-header-wrap >
*/ body > div:has(> .ece-topbar), .ece-new-header-wrap, .ece-new-header-wrap > div:has(> .ece-topbar) { display:contents; } .ece-root a { color:var(--ece-navy); text-decoration:none; transition:color .2s var(--ece-ease); } .ece-root a:hover { color:var(--ece-terra); text-decoration:none; } .ece-root img { max-width:100%; display:block; } .ece-root ul, .ece-root ol { list-style:none; margin:0; padding:0; } .ece-root h1, .ece-root h2, .ece-root h3, .ece-root h4, .ece-root h5 { font-family:var(--ece-ff-head); color:var(--ece-ink); line-height:1.25; font-weight:700; margin:0 0 .6em; } .ece-root p { margin:0 0 1em; } .ece-wrap { max-width:var(--ece-max); margin:0 auto; padding:0 28px; } /* Scroll reveal */ .ece-sr { opacity:0; transform:translateY(24px); transition:opacity .6s var(--ece-ease), transform .6s var(--ece-ease); } .ece-sr.v { opacity:1; transform:none; } /* ========== TOPBAR ========== */ .ece-topbar { background:var(--ece-navy); font-size:11px; letter-spacing:.4px; color:rgba(255,255,255,.45); } .ece-topbar .ece-wrap { display:flex; align-items:center; justify-content:flex-end; min-height:30px; } .ece-topbar a { color:rgba(255,255,255,.55); padding:0 6px; font-weight:500; white-space:nowrap; } .ece-topbar a:hover { color:var(--ece-gold); } .ece-tb-links { display:flex; gap:2px; flex-wrap:nowrap; align-items:center; } @media(max-width:840px){ .ece-topbar { padding:5px 0; } .ece-topbar .ece-wrap { justify-content:center; min-height:0; } .ece-tb-links { flex-wrap:wrap; justify-content:center; gap:1px 4px; row-gap:3px; } .ece-tb-links a { font-size:10.5px; padding:2px 5px; } } /* ========== HEADER ========== */ .ece-hdr { position:sticky; top:0; z-index:9000; background:var(--ece-white); border-bottom:1px solid var(--ece-ink-10); transition:box-shadow .3s; } .ece-hdr.scrolled { box-shadow:0 2px 20px rgba(0,0,0,.06); } .ece-hdr-inner { display:flex; align-items:center; justify-content:space-between; height:62px; gap:12px; } .ece-logo { display:flex; align-items:center; gap:12px; text-decoration:none; min-width:0; flex:1; } .ece-logo-icon { display:block; width:42px; height:42px; border-radius:6px; overflow:hidden; flex-shrink:0; text-decoration:none; transition:transform .2s var(--ece-ease); } .ece-logo-icon:hover { transform:scale(1.05); } .ece-logo-icon img { width:100%; height:100%; object-fit:contain; display:block; } .ece-logo-text { min-width:0; line-height:1.2; text-decoration:none; transition:color .2s var(--ece-ease); } .ece-logo-text:hover .ece-ln1 { color:var(--ece-terra); } .ece-logo-text .ece-ln1 { font-family:'Constantia','Palatino Linotype','Book Antiqua',Georgia,serif !important; font-size:16px; font-weight:700; color:var(--ece-ink); display:block; letter-spacing:.1px; transition:color .2s var(--ece-ease); } .ece-logo-text .ece-ln2 { font-family:var(--ece-ff-body); font-size:11px; font-weight:500; color:var(--ece-terra); text-transform:uppercase; letter-spacing:1.2px; display:block; margin-top:2px; } @media(max-width:1080px){ .ece-logo-text .ece-ln1{font-size:14px;} .ece-logo-text .ece-ln2{font-size:10px;letter-spacing:1px;} } @media(max-width:400px){ .ece-logo-icon{width:36px;height:36px;} .ece-logo-text .ece-ln1{font-size:12.5px;} } /* Desktop nav */ .ece-desk-nav { display:flex; align-items:center; gap:0; } .ece-ni { position:relative; } .ece-ni > a { display:block; padding:19px 16px; font-size:13.5px; font-weight:600; color:var(--ece-ink-80); transition:color .15s; line-height:24px; } .ece-ni > a:hover, .ece-ni:hover > a { color:var(--ece-terra); } .ece-ni::after { content:''; position:absolute; bottom:0; left:16px; right:16px; height:2.5px; background:var(--ece-terra); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ece-ease); } .ece-ni:hover::after { transform:scaleX(1); } .ece-dd { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(6px); min-width:280px; max-height:75vh; overflow-y:auto; background:var(--ece-white); border:1px solid var(--ece-ink-10); border-top:3px solid var(--ece-terra); box-shadow:0 14px 44px rgba(0,0,0,.1); padding:10px 0; opacity:0; visibility:hidden; transition:all .2s var(--ece-ease); z-index:9999; } .ece-dd::before { content:''; position:absolute; top:-14px; left:0; right:0; height:14px; } .ece-ni:hover > .ece-dd { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .ece-dd a { display:block; padding:7px 22px; font-size:12.5px; color:var(--ece-ink-80); font-weight:400; transition:all .12s; } .ece-dd a:hover { background:var(--ece-ink-05); color:var(--ece-terra); } .ece-dd .ece-sep { height:1px; background:var(--ece-ink-10); margin:5px 0; } .ece-dd::-webkit-scrollbar { width:3px; } .ece-dd::-webkit-scrollbar-thumb { background:var(--ece-ink-25); border-radius:3px; } @media(max-width:1080px){ .ece-desk-nav { display:none; } } /* Hamburger */ .ece-ham { display:none; background:var(--ece-white); border:1px solid var(--ece-ink-10); cursor:pointer; width:44px; height:44px; min-width:44px; border-radius:8px; transition:all .2s; position:relative; z-index:1; flex-shrink:0; padding:0; -webkit-appearance:none; appearance:none; outline:none; } .ece-ham:hover { background:var(--ece-ink-05); border-color:var(--ece-ink-25); } .ece-ham span { display:block; width:18px; height:2px; background:var(--ece-ink); margin:4px auto; border-radius:2px; transition:all .3s var(--ece-ease); } .ece-ham.on { border-color:var(--ece-terra); } .ece-ham.on span { background:var(--ece-terra); } .ece-ham.on span:nth-child(1){ transform:rotate(45deg) translate(4px,4px); } .ece-ham.on span:nth-child(2){ opacity:0; } .ece-ham.on span:nth-child(3){ transform:rotate(-45deg) translate(4px,-4px); } @media(max-width:1080px){ .ece-ham { display:flex; flex-direction:column; align-items:center; justify-content:center; } } /* Mobile drawer */ .ece-mob-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:99990; } .ece-mob-overlay.show { display:block; } .ece-mob-nav { display:none; position:fixed; top:0; right:0; bottom:0; width:330px; max-width:88vw; background:var(--ece-white); z-index:99995; flex-direction:column; overflow-y:auto; overflow-x:hidden; box-shadow:-4px 0 30px rgba(0,0,0,.15); } .ece-mob-nav.open { display:flex; } .ece-mob-hd { display:flex; align-items:center; justify-content:space-between; padding:18px 22px 14px; border-bottom:1px solid var(--ece-ink-10); flex-shrink:0; } .ece-mob-hd span { font-family:var(--ece-ff-head); font-size:17px; font-weight:700; color:var(--ece-ink); } .ece-mob-close { width:36px; height:36px; border:1px solid var(--ece-ink-10); border-radius:50%; display:flex; align-items:center; justify-content:center; background:none; cursor:pointer; font-size:20px; color:var(--ece-ink-50); transition:all .15s; } .ece-mob-close:hover { background:var(--ece-ink-05); color:var(--ece-ink); } .ece-mob-nav .ece-mi { border-bottom:1px solid var(--ece-ink-10); } .ece-mob-nav .ece-mi:last-child { border-bottom:none; } .ece-mob-nav .ece-mi > a { display:flex; align-items:center; justify-content:space-between; padding:14px 22px; font-size:14.5px; font-weight:600; color:var(--ece-ink-80); transition:color .15s; } .ece-mob-nav .ece-mi > a:hover { color:var(--ece-terra); } .ece-mob-nav .ece-mi.ece-has-sub > a::after { content:'\f107'; font-family:FontAwesome; font-size:14px; color:var(--ece-ink-25); transition:transform .25s var(--ece-ease), color .15s; } .ece-mob-nav .ece-mi.xp > a::after { transform:rotate(180deg); color:var(--ece-terra); } .ece-mob-nav .ece-mi.xp > a { color:var(--ece-terra); } .ece-mob-nav .ece-sub { max-height:0; overflow:hidden; background:var(--ece-ink-05); transition:max-height .35s var(--ece-ease); } .ece-mob-nav .ece-mi.xp > .ece-sub { max-height:2000px; } .ece-mob-nav .ece-sub a { display:block; padding:10px 22px 10px 38px; font-size:13px; color:var(--ece-ink-80); border-left:2px solid transparent; transition:all .12s; } .ece-mob-nav .ece-sub a:hover, .ece-mob-nav .ece-sub a:active { background:rgba(194,83,42,.04); color:var(--ece-terra); border-left-color:var(--ece-terra); } /* ========== HERO (index page) ========== */ .ece-hero { background:var(--ece-navy); position:relative; overflow:hidden; } .ece-hero::after { content:''; position:absolute; top:0; right:0; width:50%; height:100%; background:linear-gradient(135deg,rgba(194,83,42,.12),rgba(10,31,63,.4)); pointer-events:none; } .ece-hero-grid { display:grid; grid-template-columns:1fr 1.25fr; min-height:520px; position:relative; z-index:1; gap:40px; } .ece-hero-left { padding:44px 0 60px; display:flex; flex-direction:column; justify-content:center; } .ece-hero-right { position:relative; padding:28px 0; display:flex; flex-direction:column; justify-content:center; min-width:0; } /* ===== Instagram-style 3-up portrait slider ===== Three visible slides at 9:16 aspect, auto-advance one card at a time, continuous loop via track-reset on transition end. */ .ece-hero-slider { width:100%; --vis: 3; /* visible count — desktop */ --gap: 14px; position:relative; overflow:hidden; padding:8px 0; } .ece-hero-track { display:flex; gap:var(--gap); will-change:transform; transition:transform .65s cubic-bezier(.55,.08,.35,1); } .ece-hero-slide { flex:0 0 calc((100% - (var(--vis) - 1) * var(--gap)) / var(--vis)); aspect-ratio: 3 / 4; /* Instagram portrait 2026 — 1080×1440 */ border-radius:10px; overflow:hidden; position:relative; background:#1a1a2e; box-shadow:0 12px 32px rgba(0,0,0,.35); transform:translateY(0); transition:transform .4s var(--ece-ease), box-shadow .4s var(--ece-ease); } .ece-hero-slide:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.45); } .ece-hero-slide img { width:100%; height:100%; object-fit:cover; display:block; } .ece-hero-slide-caption { position:absolute; left:0; right:0; bottom:0; padding:14px 14px 12px; background:linear-gradient(0deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 55%, transparent 100%); color:#fff; font-family:var(--ece-ff-head); font-size:.84rem; font-weight:600; line-height:1.3; letter-spacing:.1px; } /* Arrows (hidden by default; show on hover of slider area) */ .ece-hero-arr { position:absolute; top:50%; width:36px; height:36px; transform:translateY(-50%); background:rgba(10,31,63,.82); border:1px solid rgba(255,255,255,.15); border-radius:50%; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; font-family:inherit; z-index:4; opacity:0; transition:opacity .2s var(--ece-ease), background .2s, transform .2s; padding:0; } .ece-hero-arr:hover { background:var(--ece-terra); } .ece-hero-arr.prev { left:-6px; } .ece-hero-arr.next { right:-6px; } .ece-hero-slider:hover .ece-hero-arr { opacity:1; } /* Bullet dots below the slider for scrub position */ .ece-hero-dots { display:flex; justify-content:center; gap:6px; margin-top:12px; } .ece-hero-dots button { width:7px; height:7px; border-radius:50%; border:none; background:rgba(255,255,255,.22); cursor:pointer; padding:0; transition:all .25s var(--ece-ease); } .ece-hero-dots button.active { background:var(--ece-terra-glow); width:22px; border-radius:4px; } /* Responsive — 2 slides on tablet, 1 on phone */ @media (max-width:900px) { .ece-hero-slider { --vis: 2; --gap: 12px; } } @media (max-width:560px) { .ece-hero-slider { --vis: 1; --gap: 0px; } .ece-hero-slide { border-radius:8px; } .ece-hero-arr { display:none; } } .ece-hero-eyebrow { font-family:var(--ece-ff-mono); font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--ece-terra-glow); margin-bottom:18px; display:flex; align-items:center; gap:10px; } .ece-hero-eyebrow::before { content:''; width:28px; height:2px; background:var(--ece-terra-glow); } .ece-hero h1 { font-family:var(--ece-ff-head); font-size:clamp(1.9rem,3.6vw,2.8rem); font-weight:800; line-height:1.12; color:var(--ece-white); margin-bottom:20px; font-variation-settings:'opsz' 144; } .ece-hero h1 em { font-style:italic; color:var(--ece-terra-glow); font-weight:300; } .ece-hero-desc { font-size:14.5px; line-height:1.8; color:rgba(255,255,255,.62); margin-bottom:28px; max-width:560px; } .ece-hero-desc strong { color:rgba(255,255,255,.88); font-weight:600; } .ece-hero-btns { display:flex; gap:10px; flex-wrap:wrap; } .ece-btn-fill { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; font-size:13.5px; font-weight:600; border-radius:4px; background:var(--ece-terra); color:#fff !important; border:1px solid var(--ece-terra); cursor:pointer; transition:all .2s var(--ece-ease); line-height:1; } .ece-btn-fill:hover { background:var(--ece-terra-dark); color:#fff !important; border-color:var(--ece-terra-dark); transform:translateY(-1px); box-shadow:0 4px 16px rgba(194,83,42,.25); } .ece-btn-line { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; font-size:13.5px; font-weight:600; border-radius:4px; background:transparent; color:#fff !important; border:1px solid rgba(255,255,255,.22); cursor:pointer; transition:all .2s var(--ece-ease); line-height:1; } .ece-btn-line:hover { border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.06); color:#fff !important; } .ece-btn-campus { display:inline-flex; align-items:center; padding:13px 28px; font-size:13.5px; font-weight:600; border-radius:4px; background:transparent; color:var(--ece-gold) !important; border:1px solid var(--ece-gold); cursor:pointer; transition:all .2s var(--ece-ease); line-height:1; } .ece-btn-campus:hover { background:var(--ece-gold); color:var(--ece-navy) !important; transform:translateY(-1px); } .ece-hero-kpi { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,.06); margin-top:30px; border-radius:6px; overflow:hidden; } .ece-kp { background:rgba(255,255,255,.03); padding:14px 10px; text-align:center; } .ece-kp a { display:block; color:inherit; } .ece-kp .v { font-family:var(--ece-ff-head); font-size:1.3rem; font-weight:700; color:var(--ece-gold); display:block; line-height:1.1; } .ece-kp .l { font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:rgba(255,255,255,.4); margin-top:3px; display:block; } @media(max-width:960px){ .ece-hero-grid { grid-template-columns:1fr; gap:20px; min-height:auto; } .ece-hero-left { padding:34px 0 20px; } .ece-hero-right { padding:0 0 40px; } .ece-hero-kpi { grid-template-columns:repeat(2,1fr); } } /* ========== TICKER ========== */ .ece-ticker { background:var(--ece-white); border-bottom:1px solid var(--ece-ink-10); overflow:hidden; } .ece-ticker-track { display:flex; animation:mcatscroll 60s linear infinite; width:max-content; } .ece-ticker-track:hover { animation-play-state:paused; } @keyframes mcatscroll { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} } .ece-tk { display:flex; align-items:center; gap:7px; padding:9px 26px; white-space:nowrap; font-size:12px; color:var(--ece-ink-50); border-right:1px solid var(--ece-ink-10); } .ece-tk b { font-weight:700; color:var(--ece-navy); } /* ========== SECTIONS ========== */ .ece-sh { margin-bottom:28px; } .ece-sh-eyebrow { font-family:var(--ece-ff-mono); font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:var(--ece-terra); margin-bottom:6px; } .ece-sh h2 { font-family:var(--ece-ff-head); font-size:clamp(1.6rem,3vw,2.1rem); font-weight:700; color:var(--ece-ink); line-height:1.15; margin:0; font-variation-settings:'opsz' 72; } /* ========== DEPT UPDATES ========== */ .ece-updates { padding:50px 0; background:var(--ece-paper); border-bottom:1px solid var(--ece-ink-10); } .ece-updates-card { background:var(--ece-white); border:1px solid var(--ece-ink-10); border-radius:8px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.02); } .ece-updates-header { background:var(--ece-navy); color:#fff; padding:14px 22px; border-bottom:3px solid var(--ece-terra); display:flex; align-items:center; gap:10px; font-family:var(--ece-ff-head); font-size:1.05rem; font-weight:700; } .ece-updates-header i { color:var(--ece-terra-glow); } .ece-updates-body { max-height:340px; overflow-y:auto; padding:6px 0; } .ece-updates-body ul { list-style:none; padding:0; margin:0; } .ece-updates-body li { padding:11px 22px; border-bottom:1px solid var(--ece-ink-10); font-size:13px; line-height:1.55; display:flex; flex-direction:column; gap:3px; } .ece-updates-body li:last-child { border-bottom:none; } .ece-updates-body label { font-family:var(--ece-ff-mono); font-size:10px; color:var(--ece-ink-50); text-transform:uppercase; letter-spacing:.5px; display:flex; align-items:center; gap:6px; } .ece-updates-body label img { height:11px; } .ece-updates-body a { color:var(--ece-ink-80); font-weight:500; } .ece-updates-body a:hover { color:var(--ece-terra); } .ece-updates-body::-webkit-scrollbar { width:4px; } .ece-updates-body::-webkit-scrollbar-thumb { background:var(--ece-ink-25); border-radius:3px; } .ece-updates-more { padding:10px 22px; text-align:right; border-top:1px solid var(--ece-ink-10); background:var(--ece-ink-05); } .ece-updates-more a { font-size:12px; font-weight:700; color:var(--ece-terra); text-transform:uppercase; letter-spacing:.5px; } /* ========== ABOUT / DEPARTMENT INTRO ========== */ .ece-about { padding:58px 0; border-bottom:1px solid var(--ece-ink-10); background:var(--ece-white); } .ece-about-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:52px; align-items:start; } @media(max-width:900px){ .ece-about-grid { grid-template-columns:1fr; gap:32px; } } .ece-about-text { font-size:15px; color:var(--ece-ink-80); line-height:1.85; text-align:justify; } .ece-about-text h3 { font-family:var(--ece-ff-head); font-size:1.3rem; margin-top:28px; margin-bottom:12px; color:var(--ece-ink); } .ece-about-text h4 { font-family:var(--ece-ff-head); font-size:1.05rem; margin-top:20px; margin-bottom:8px; color:var(--ece-navy); } .ece-about-text p { margin-bottom:14px; } .ece-about-text ul { list-style:disc; padding-left:22px; margin:10px 0 18px; } .ece-about-text ul li { margin-bottom:6px; font-size:14px; } .ece-about-text a { color:var(--ece-terra); } .ece-about-text a:hover { text-decoration:underline; } .ece-about-side { background:var(--ece-ink-05); border:1px solid var(--ece-ink-10); padding:24px; border-radius:8px; } .ece-about-side h3 { font-family:var(--ece-ff-head); font-size:1rem; font-weight:700; padding-bottom:8px; margin:0 0 12px; border-bottom:2px solid var(--ece-terra); color:var(--ece-ink); display:flex; align-items:center; gap:8px; } .ece-about-side h3 i { color:var(--ece-terra); } .ece-about-side ol, .ece-about-side ul { padding-left:20px; margin:0 0 16px; list-style:decimal; } .ece-about-side ul { list-style:disc; } .ece-about-side li { font-size:12.5px; color:var(--ece-ink-80); padding:2px 0; line-height:1.6; } .ece-about-side li a { color:var(--ece-navy-light); } .ece-about-side li a:hover { color:var(--ece-terra); } /* Courses Table */ .ece-table-wrap { overflow-x:auto; margin:16px 0 24px; } .ece-table { width:100%; border-collapse:collapse; font-size:13px; } .ece-table thead th { background:var(--ece-navy); color:#fff; font-weight:600; padding:10px 12px; text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.5px; border:1px solid var(--ece-navy-light); } .ece-table tbody td { padding:10px 12px; border:1px solid var(--ece-ink-10); color:var(--ece-ink-80); vertical-align:top; } .ece-table tbody tr:nth-child(even) { background:var(--ece-ink-05); } .ece-table a { color:var(--ece-terra); font-weight:500; } .ece-table a:hover { text-decoration:underline; } /* ========== PROGRAMS / PATHWAYS CARDS ========== */ .ece-progs { padding:56px 0; background:var(--ece-ink-05); border-bottom:1px solid var(--ece-ink-10); } .ece-prog-row { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } @media(max-width:900px){ .ece-prog-row { grid-template-columns:repeat(2,1fr); } } @media(max-width:560px){ .ece-prog-row { grid-template-columns:1fr; } } .ece-pc { border:1px solid var(--ece-ink-10); padding:22px 22px; background:var(--ece-white); transition:all .25s var(--ece-ease); border-radius:6px; position:relative; overflow:hidden; display:block; } .ece-pc::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ece-terra); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ece-ease); } .ece-pc:hover::before { transform:scaleX(1); } .ece-pc:hover { border-color:var(--ece-terra); box-shadow:0 6px 20px rgba(194,83,42,.06); } .ece-pc h4 { font-family:var(--ece-ff-head); font-size:1.1rem; font-weight:700; color:var(--ece-ink); margin:0 0 8px; } .ece-pc p { font-size:13px; color:var(--ece-ink-50); line-height:1.6; margin:0; } .ece-pc p strong { color:var(--ece-ink-80); font-weight:600; } /* ========== GRANTS / WIDGETS GRID ========== */ .ece-widgets { padding:50px 0; border-bottom:1px solid var(--ece-ink-10); background:var(--ece-white); } .ece-wg { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } @media(max-width:900px){ .ece-wg { grid-template-columns:repeat(3,1fr); } } @media(max-width:600px){ .ece-wg { grid-template-columns:repeat(2,1fr); } } .ece-wi { border:1px solid var(--ece-ink-10); background:var(--ece-white); border-radius:6px; overflow:hidden; transition:all .22s var(--ece-ease); } .ece-wi:hover { border-color:var(--ece-terra); box-shadow:0 4px 16px rgba(0,0,0,.05); transform:translateY(-1px); } .ece-wi img { width:100%; height:auto; display:block; } /* ========== CO-ACADEMIC / PROGRAMS POSTS ========== */ .ece-coacad { padding:56px 0; background:var(--ece-ink-05); border-bottom:1px solid var(--ece-ink-10); } .ece-posts { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } @media(max-width:900px){ .ece-posts { grid-template-columns:repeat(2,1fr); } } @media(max-width:560px){ .ece-posts { grid-template-columns:1fr; } } .ece-post { background:var(--ece-white); border:1px solid var(--ece-ink-10); border-radius:6px; overflow:hidden; transition:all .25s var(--ece-ease); display:flex; flex-direction:column; } .ece-post:hover { border-color:var(--ece-terra); box-shadow:0 6px 24px rgba(0,0,0,.05); transform:translateY(-2px); } .ece-post .ece-post-img { aspect-ratio:16/10; overflow:hidden; } .ece-post .ece-post-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ece-ease); } .ece-post:hover .ece-post-img img { transform:scale(1.05); } .ece-post .ece-post-body { padding:16px 20px 20px; flex:1; display:flex; flex-direction:column; } .ece-post h3 { font-family:var(--ece-ff-head); font-size:1.05rem; font-weight:700; color:var(--ece-ink); margin:0 0 8px; } .ece-post h3 a { color:inherit; } .ece-post h3 a:hover { color:var(--ece-terra); } .ece-post h3 i { color:var(--ece-terra); margin-right:6px; } .ece-post p { font-size:12.5px; color:var(--ece-ink-50); line-height:1.6; margin:0; flex:1; text-align:justify; } /* ========== CONTACT / AMACE ========== */ .ece-contact { padding:60px 0; background:var(--ece-white); border-bottom:1px solid var(--ece-ink-10); } .ece-contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; } @media(max-width:900px){ .ece-contact-grid { grid-template-columns:1fr; } } .ece-amace-body { font-size:14.5px; color:var(--ece-ink-80); line-height:1.8; } .ece-amace-body p { margin-bottom:12px; } .ece-amace-body .ece-amace-img { float:left; width:130px; margin:0 18px 10px 0; border-radius:4px; overflow:hidden; } .ece-hod-block { display:flex; gap:18px; background:var(--ece-ink-05); padding:18px; border-radius:8px; margin-top:20px; border-left:3px solid var(--ece-terra); clear:both; } .ece-hod-block img { width:110px; height:140px; object-fit:cover; border-radius:4px; flex-shrink:0; } .ece-hod-block div { font-size:13.5px; line-height:1.7; } .ece-hod-block b { font-family:var(--ece-ff-head); color:var(--ece-ink); font-size:15px; } .ece-reach-title { font-family:var(--ece-ff-head); font-size:1.2rem; font-weight:700; color:var(--ece-ink); margin-bottom:18px; display:flex; align-items:center; gap:8px; } .ece-reach-title i { color:var(--ece-terra); } .ece-reach-list { list-style:none; padding:0; margin:0; } .ece-reach-list li { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--ece-ink-10); } .ece-reach-list li:last-child { border-bottom:none; } .ece-reach-list .ece-reach-icon { width:36px; height:36px; border-radius:50%; background:var(--ece-ink-05); color:var(--ece-terra); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:14px; } .ece-reach-list h3 { font-family:var(--ece-ff-head); font-size:.95rem; font-weight:700; color:var(--ece-ink); margin:0 0 3px; } .ece-reach-list p { font-size:13px; margin:0; color:var(--ece-ink-80); line-height:1.65; } .ece-reach-list a { color:var(--ece-navy-light); } .ece-reach-list a:hover { color:var(--ece-terra); } /* ========== CO-ACADEMIC QUICKLINKS ========== */ .ece-qlinks { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; } .ece-ql { font-size:12px; font-weight:500; color:var(--ece-ink-50); padding:7px 14px; border:1px solid var(--ece-ink-10); border-radius:4px; background:var(--ece-white); transition:all .2s; display:inline-flex; align-items:center; gap:5px; } .ece-ql:hover { border-color:var(--ece-terra); color:var(--ece-terra); background:rgba(194,83,42,.03); } /* ========== INNER PAGE LAYOUT (2-col with sidebar) ========== */ .ece-page { padding:44px 0 60px; background:var(--ece-paper); } .ece-page-title { font-family:var(--ece-ff-head); font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; color:var(--ece-ink); margin:0 0 8px; font-variation-settings:'opsz' 72; } .ece-page-crumb { font-family:var(--ece-ff-mono); font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ece-terra); margin-bottom:6px; } .ece-page-lead { font-size:15px; color:var(--ece-ink-50); margin:0 0 28px; max-width:720px; line-height:1.7; } .ece-page-hdr { border-bottom:1px solid var(--ece-ink-10); padding-bottom:24px; margin-bottom:32px; } .ece-page-layout { display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:start; } @media(max-width:980px){ .ece-page-layout { grid-template-columns:1fr; } } .ece-page-content { background:var(--ece-white); border:1px solid var(--ece-ink-10); border-radius:8px; padding:30px 34px; box-shadow:0 1px 4px rgba(0,0,0,.02); } .ece-page-content h1, .ece-page-content h2, .ece-page-content h3, .ece-page-content h4, .ece-page-content h5 { font-family:var(--ece-ff-head); color:var(--ece-ink); margin:1.4em 0 .55em; font-weight:700; } .ece-page-content h2 { font-size:1.55rem; } .ece-page-content h3 { font-size:1.25rem; color:var(--ece-navy); } .ece-page-content h4 { font-size:1.05rem; color:var(--ece-ink); } .ece-page-content h5 { font-size:.95rem; } .ece-page-content p { font-size:14.5px; line-height:1.8; margin:0 0 14px; color:var(--ece-ink-80); } .ece-page-content ul, .ece-page-content ol { margin:10px 0 16px; padding-left:22px; } .ece-page-content ul { list-style:disc; } .ece-page-content ol { list-style:decimal; } .ece-page-content li { font-size:14px; line-height:1.75; color:var(--ece-ink-80); margin-bottom:5px; } .ece-page-content a { color:var(--ece-terra); } .ece-page-content a:hover { text-decoration:underline; } .ece-page-content img { margin:10px 0; border-radius:4px; } .ece-page-content blockquote { border-left:3px solid var(--ece-terra); padding:8px 18px; margin:18px 0; font-family:var(--ece-ff-head); font-style:italic; color:var(--ece-ink); font-size:1.08rem; background:var(--ece-ink-05); border-radius:0 4px 4px 0; } .ece-page-content table { width:100%; border-collapse:collapse; margin:14px 0; font-size:13.5px; } .ece-page-content table th { background:var(--ece-navy); color:#fff; padding:10px 12px; text-align:left; font-weight:600; font-size:12.5px; border:1px solid var(--ece-navy-light); } .ece-page-content table td { padding:9px 12px; border:1px solid var(--ece-ink-10); vertical-align:top; } .ece-page-content table tbody tr:nth-child(even) { background:var(--ece-ink-05); } .ece-page-content .image.fit { width:100%; margin:14px 0; border-radius:6px; overflow:hidden; } .ece-page-content .image.fit img { width:100%; display:block; } /* ========== REDESIGNED SIDEBAR / MCASIDEMENU ========== */ .ece-sidebar { position:sticky; top:90px; background:var(--ece-white); border:1px solid var(--ece-ink-10); border-radius:8px; overflow:hidden; } .ece-sidebar-hd { padding:14px 18px; background:var(--ece-navy); color:#fff; border-bottom:3px solid var(--ece-terra); font-family:var(--ece-ff-head); font-size:.95rem; font-weight:700; display:flex; align-items:center; gap:8px; } .ece-sidebar-hd i { color:var(--ece-terra-glow); font-size:.9rem; } .ece-sidebar-group { border-bottom:1px solid var(--ece-ink-10); } .ece-sidebar-group:last-child { border-bottom:none; } .ece-sidebar-toggle { display:flex; width:100%; align-items:center; justify-content:space-between; padding:12px 18px; background:var(--ece-ink-05); border:none; border-left:3px solid transparent; font-family:var(--ece-ff-body); font-size:13px; font-weight:700; color:var(--ece-ink); cursor:pointer; text-transform:uppercase; letter-spacing:1px; transition:all .18s; text-align:left; } .ece-sidebar-toggle:hover { background:#ECECEC; border-left-color:var(--ece-terra); color:var(--ece-terra); } .ece-sidebar-toggle::after { content:'\f107'; font-family:FontAwesome; font-size:13px; color:var(--ece-ink-50); transition:transform .25s var(--ece-ease); } .ece-sidebar-group.open .ece-sidebar-toggle { color:var(--ece-terra); border-left-color:var(--ece-terra); background:#fff; } .ece-sidebar-group.open .ece-sidebar-toggle::after { transform:rotate(180deg); } .ece-sidebar-links { max-height:0; overflow:hidden; transition:max-height .4s var(--ece-ease); } .ece-sidebar-group.open .ece-sidebar-links { max-height:3000px; } .ece-sidebar-links a { display:block; padding:8px 18px 8px 24px; font-size:12.5px; color:var(--ece-ink-80); border-left:2px solid transparent; transition:all .15s; line-height:1.45; } .ece-sidebar-links a:hover, .ece-sidebar-links a.active { background:rgba(194,83,42,.04); color:var(--ece-terra); border-left-color:var(--ece-terra); } .ece-sidebar-single a { display:block; padding:12px 18px; border-left:3px solid transparent; font-family:var(--ece-ff-body); font-size:13px; font-weight:700; color:var(--ece-ink); text-transform:uppercase; letter-spacing:1px; transition:all .18s; } .ece-sidebar-single a:hover { border-left-color:var(--ece-terra); color:var(--ece-terra); background:rgba(194,83,42,.03); } .ece-sidebar-single { border-bottom:1px solid var(--ece-ink-10); } .ece-sidebar-single:last-child { border-bottom:none; } @media(max-width:980px){ .ece-sidebar { position:static; margin-top:28px; } } /* ========== FOOTER ========== */ .ece-footer { background:var(--ece-white); padding:28px 0 0; border-top:1px solid var(--ece-ink-10); color:var(--ece-ink-80); } .ece-footer a { color:var(--ece-ink-80); } .ece-footer a:hover { color:var(--ece-terra); } .ece-footer-copy { text-align:center; padding:16px 20px; border-top:1px solid var(--ece-ink-10); margin-top:12px; font-size:12px; color:var(--ece-ink-50); } /* ========== UTILITY HELPERS ========== */ .ece-iframe-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:6px; margin:14px 0; } .ece-iframe-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; } .ece-video-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:24px 0; } @media(max-width:720px){ .ece-video-grid { grid-template-columns:1fr; } } /* Old Slate content compatibility inside .ece-page-content (legacy markup) */ .ece-page-content .row { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:18px; margin:14px 0; align-items:start; } .ece-page-content .col-md-3, .ece-page-content .col-md-6, .ece-page-content .col-md-offset-3, .ece-page-content .col-md-12 { width:auto; padding:0; } .ece-page-content .row img { max-width:100%; border-radius:4px; } .ece-page-content .section.group { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:14px; margin:18px 0; } .ece-page-content .col.span_1_of_4, .ece-page-content .col.span_1_of_3, .ece-page-content .col.span_1_of_2, .ece-page-content .col.span_1_of_5 { width:auto; padding:0; } .ece-page-content .image.fit { display:block; } /* Override Slate fonts that leak in if assets/css/main.css still loads */ body.ece-root, .ece-root input, .ece-root button, .ece-root select, .ece-root textarea { font-family: var(--ece-ff-body) !important; } /* ========== LEGACY BANNER (inside converted pages) ========== Some inner pages (placements, workshops, redhatacademy, …) had a