/* ==========================================================================
Kishoreganj University — a department's own site
(/explore/department/{slug} and its About / Chairman / People / Contact
pages)
Loaded *after* explore.css, whose .kiu-explore-single scope supplies the
palette, radii and shadows.
The point of this file is that every department renders the same shapes.
The old single-page template branched on which optional fields a department
had filled in — slides, vision, mission, notices — so no two departments
produced the same page. Sections here hold their structure and say when
they are empty instead.
main.css sets `html { font-size: 10px }`, so 1rem = 10px sitewide —
every size below is declared in explicit px. Do not reintroduce rem here.
========================================================================== */
/* The hero repeats its own tokens instead of inheriting them from
.kiu-dept-home, because it is used on pages that never carry that class —
the Academics views root on `.kiu-explore-single .kiu-dept-academics`. The
hero partial already pushes its own stylesheets, so keeping its colours
self-contained is what makes it render identically on all ten pages.
--kiu-heading is set here for the same reason home.css sets it on
.kiu-notice-feature: `.kiu-home h1` (0,1,1) outranks .kiu-dept-hero__title
(0,1,0), so on the Notices page — root `.kiu-home .kiu-listing
.kiu-dept-home` — the hero title would otherwise render in dark ink. */
.kiu-dept-hero {
--kiu-heading: var(--kiu-white);
}
.kiu-dept-home .kiu-section {
padding: 64px 0;
}
.kiu-dept-home .kiu-eyebrow {
display: inline-block;
margin-bottom: 10px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kiu-accent);
}
.kiu-dept-home .kiu-dept-section__title {
margin: 0;
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 800;
line-height: 1.3;
color: var(--kiu-ink);
letter-spacing: -.01em;
}
.kiu-dept-home .kiu-dept-section__title--spaced {
margin-top: 48px;
}
.kiu-dept-home .kiu-dept-section__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 28px;
}
/* --------------------------------------------------------------------------
Hero — one shape for every department, on every page
-------------------------------------------------------------------------- */
.kiu-dept-hero {
position: relative;
display: flex;
align-items: flex-end;
min-height: 460px;
overflow: hidden;
background: var(--kiu-navy-darker);
/* #kiu-navbar is `position: fixed` and out of flow, so content starts
underneath it. The hero carries the clearance for the bar and for the
hanging badge logo, exactly as components/page-hero.css does. */
padding-top: 168px;
padding-bottom: 56px;
}
.kiu-dept-hero__media {
position: absolute;
inset: 0;
}
/* Frames are stacked and cross-faded on opacity — nothing enters or leaves
the DOM, so the title layer above never reflows between photographs. */
.kiu-dept-hero__frame {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.2s var(--kiu-ease-in-out);
}
.kiu-dept-hero__frame.is-active {
opacity: 1;
}
/* A slide cropped per device is an inside the frame rather than a
background on it: only can hand a phone the phone-shaped
file. `cover` here does the same job `background-size: cover` does above,
and the residual is small because the file is already close to the frame's
shape. See App\Support\HeroDevices. */
.kiu-dept-hero__pic,
.kiu-dept-hero__pic img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
}
.kiu-dept-hero__pic img {
object-fit: cover;
object-position: center;
}
/* Two stops, not one flat wash: the copy sits at the bottom and needs the
darkest part of the scrim there, while the top stays light enough that the
photograph still reads as a photograph. */
.kiu-dept-hero__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(13, 31, 60, .45) 0%,
rgba(13, 31, 60, .72) 55%,
rgba(13, 31, 60, .92) 100%);
}
.kiu-dept-hero .container {
position: relative;
z-index: 2;
}
.kiu-dept-hero__content {
max-width: 780px;
}
.kiu-dept-hero__crumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0 0 18px;
padding: 0;
list-style: none;
font-size: 13px;
color: rgba(255, 255, 255, .72);
}
.kiu-dept-hero__crumbs li:not(:last-child)::after {
content: "/";
margin-left: 6px;
color: rgba(255, 255, 255, .4);
}
.kiu-dept-hero__crumbs a {
color: rgba(255, 255, 255, .82);
text-decoration: none;
}
.kiu-dept-hero__crumbs a:hover,
.kiu-dept-hero__crumbs a:focus-visible {
color: var(--kiu-white);
text-decoration: underline;
}
.kiu-dept-hero__eyebrow {
display: inline-block;
margin-bottom: 12px;
font-size: 12px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kiu-accent-soft);
}
/* On a sub-page the department name is demoted to this kicker so the