` — a number beside a
body. The card now leads with a ``, so that
inherited flex laid the HEADER and the BODY side by side: the section
title sat in a narrow column to the side of its own text. It must be a
block flow — header above, body below.
(b) `.prose { max-width: 72ch }` is the right reading measure, but it was
being applied INSIDE a 1116px card. The text hugged the inline-start
edge and left a 480px void beside every paragraph, which read as
"unstyled" and "squished". The measure belongs to the CARD: constrain
the column, then let the prose fill it.
============================================================ */
.prop-item { display: block; }
.prop-list, .jr-list {
max-inline-size: 50rem; /* ≈70 Arabic characters per line inside the card */
margin-inline: auto;
display: grid; gap: 18px;
}
.jr-list { gap: 22px; }
/* The card is now the measure, so the prose fills it. */
.prose, .prop-p.prose, .jr-body.prose, .blog-body.prose { max-inline-size: 100%; }
/* The About card is now the reading column, so the summary fills it. */
.sum-prose { max-inline-size: 100%; }
/* ============================================================
17 · LONG-FORM INDEX + READING VIEW (#proposal, #journey)
A summary card per entry, then one reading view per entry. Without this the
reader had to scroll a whole essay to reach the next title.
============================================================ */
/* The INDEX spans the container so three tiles fit a line; the READING view
keeps the narrow measure that long-form text needs. */
.lf-index { max-inline-size: 100%; }
.lf-read { max-inline-size: 52rem; margin-inline: auto; }
.lf-doc { display: flex; justify-content: center; margin-bottom: 26px; }
.lf-list {
display: grid; gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1000px) { .lf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .lf-list { grid-template-columns: 1fr; } }
/* --- summary card (a tile) --- */
.lf-card {
display: grid; gap: 10px; align-content: start;
padding: 20px 22px 18px; text-decoration: none;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow);
transition: border-color .22s, box-shadow .22s, transform .22s;
}
.lf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* pin the meta line to the bottom so every tile's footer lines up */
.lf-card .lf-meta { margin-block-start: auto; padding-block-start: 4px; }
.lf-card:hover, .lf-card:focus-visible {
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
box-shadow: var(--shadow-lg); transform: translateY(-2px);
}
.lf-n {
flex: none; inline-size: 2.5rem; block-size: 2.5rem;
display: grid; place-items: center; border-radius: 11px;
font-family: var(--ff-en); font-weight: 800; font-size: .85rem; line-height: 1;
font-variant-numeric: tabular-nums; color: #fff;
background: linear-gradient(145deg, var(--navy-600), var(--navy-900));
}
.lf-cardbody { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: 7px; }
.lf-cardt {
font-size: 1rem; font-weight: 800; line-height: 1.55; color: var(--text);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lf-x {
font-size: .88rem; line-height: 1.8; color: var(--text-soft);
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.lf-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.lf-date, .lf-mins {
display: inline-flex; align-items: center; gap: 6px;
font-size: .77rem; font-weight: 700; color: var(--muted);
}
.lf-mins svg { width: 14px; height: 14px; opacity: .8; }
/* The chevron points the way the language reads. */
.lf-go {
flex: none; display: grid; place-items: center;
inline-size: 2rem; block-size: 2rem; border-radius: 50%;
color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
transition: background .22s, transform .22s;
}
.lf-go svg { width: 16px; height: 16px; }
html[dir="rtl"] .lf-go svg { transform: scaleX(-1); }
.lf-card:hover .lf-go { background: color-mix(in srgb, var(--accent) 18%, transparent); }
html[dir="rtl"] .lf-card:hover .lf-go { transform: translateX(-3px); }
html[dir="ltr"] .lf-card:hover .lf-go { transform: translateX(3px); }
/* --- reading view --- */
.lf-back {
display: inline-flex; align-items: center; gap: 8px;
margin-bottom: 18px; padding: 8px 14px 8px 12px;
font-size: .84rem; font-weight: 800; text-decoration: none;
color: var(--text-soft); background: var(--surface-2, var(--surface));
border: 1px solid var(--border); border-radius: 999px;
transition: color .2s, border-color .2s;
}
.lf-back:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.lf-back svg { width: 15px; height: 15px; }
html[dir="ltr"] .lf-back svg { transform: scaleX(-1); }
.lf-paper { padding: 34px 36px; }
.lf-head {
display: flex; align-items: flex-start; gap: 16px;
padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--border);
}
.lf-headtext { flex: 1 1 auto; min-inline-size: 0; }
.lf-t { margin: 0 0 8px; font-size: 1.3rem; font-weight: 800; line-height: 1.5; color: var(--text); }
.lf-foot { margin-top: 26px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
/* --- prev / next --- */
.lf-pager {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px;
}
.lf-pg {
display: grid; gap: 5px; padding: 16px 18px; text-decoration: none;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); transition: border-color .2s, box-shadow .2s;
}
.lf-pg:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow); }
.lf-pg-k { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.lf-pg-t { font-size: .9rem; font-weight: 700; line-height: 1.6; color: var(--text); }
.lf-pg-next { text-align: end; }
@media (max-width: 620px) {
.lf-paper { padding: 24px 20px; }
.lf-card { padding: 16px 16px; gap: 12px; }
.lf-t { font-size: 1.12rem; }
.lf-pager { grid-template-columns: 1fr; }
.lf-pg-next { text-align: start; }
}
/* ============================================================
18 · MEDIA TILES, TRAINING CHIPS, BARE FILE TITLES
============================================================ */
/* --- a video is a tile like any other, with a play badge ---
NB: do NOT set position on .gal-link here. It is already
`position: absolute; inset: 0` (section 2), which is what gives it the
.gal-item's aspect-ratio height. Overriding it to `relative` collapsed every
tile to 0px and the whole media grid went blank. Absolute is already a
containing block, so .gal-play needs nothing added. */
.gal-play {
position: absolute; inset: 0; margin: auto;
inline-size: 62px; block-size: 62px; border-radius: 50%;
display: grid; place-items: center;
color: #fff; background: color-mix(in srgb, #0b1622 55%, transparent);
border: 2px solid rgba(255, 255, 255, .82);
backdrop-filter: blur(3px);
transition: transform .22s, background .22s;
pointer-events: none;
}
.gal-play svg { width: 24px; height: 24px; margin-inline-start: 3px; }
.gal-is-video:hover .gal-play,
.gal-is-video:focus-visible .gal-play {
transform: scale(1.08); background: color-mix(in srgb, var(--accent) 78%, transparent);
}
/* A poster is 16:9 while photos are portrait-ish; crop rather than letterbox so
the grid keeps one rhythm instead of a black band. */
.gal-is-video .gal-img { object-fit: cover; }
/* --- one heading for a run of shots from the same occasion --- */
.gal-album {
grid-column: 1 / -1;
display: flex; align-items: center; gap: 12px;
margin: 10px 0 2px; font-size: 1.02rem; font-weight: 800; color: var(--text);
}
.gal-album::after {
content: ""; flex: 1 1 auto; height: 1px;
background: linear-gradient(to left, transparent, var(--border));
}
.gal-album-n {
flex: none; font-family: var(--ff-en); font-size: .72rem; font-weight: 800;
color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent);
padding: 3px 9px; border-radius: 999px;
}
/* --- video on the lightbox stage --- */
.gal-lb-vid {
max-inline-size: min(94vw, 1400px); max-block-size: 82vh;
inline-size: auto; block-size: auto;
border-radius: 10px; background: #000;
box-shadow: 0 30px 90px rgba(0, 0, 0, .55);
}
/* --- a training course that has its own certificate --- */
.chip-link { text-decoration: none; cursor: pointer; }
.chip-link:hover, .chip-link:focus-visible {
border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
box-shadow: var(--shadow);
}
.chip-go {
display: inline-grid; place-items: center; margin-inline-start: auto;
inline-size: 1.35rem; block-size: 1.35rem; color: var(--accent); opacity: .75;
}
.chip-go svg { width: 14px; height: 14px; }
.chip-link:hover .chip-go { opacity: 1; }
/* --- a title that links its file without adding a second visible control --- */
.file-title-bare { color: inherit; text-decoration: none; }
.file-title-bare:hover, .file-title-bare:focus-visible {
color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
/* ============================================================
19 · DRAWER: KEEP `visibility` OUT OF THE TRANSITION
The closed drawer is hidden with `visibility: hidden` so its close button and
its links leave the tab order and the accessibility tree. But `.icon-btn` and
`.btn` both declare `transition: .2s` — a shorthand with no property list, so
transition-property is `all`, and `visibility` is animatable. Its children
therefore kept ANIMATING from hidden, computing `visibility: hidden` for the
first ~200ms after the drawer opened, during which they could not take focus:
openDrawer()'s focus() call silently did nothing and focus stayed on .
Declared here rather than in style.css because drive.css loads second, so
this beats `.icon-btn` and `.btn` regardless of their order in that file.
============================================================ */
.drawer,
.drawer * {
transition-property: transform, background-color, color, border-color, box-shadow, opacity;
}
/* A headline figure that carries the reader to the page it evidences. */
.stat-link { text-decoration: none; color: inherit; display: block; transition: transform .2s, box-shadow .2s, border-color .2s; }
.stat-link:hover, .stat-link:focus-visible { transform: translateY(-3px); }
.stat-link:hover .lbl { color: var(--accent); }
/* A contact card with nothing to open: same look, no click affordance. */
.contact-card-static { cursor: default; }
.contact-card-static:hover { transform: none; box-shadow: var(--shadow); border-color: var(--border); }
/* ============================================================
20 · COMMUNITY GROUPS (#community)
Nasser set his contribution out in named groups — parents' councils, the
cultural centre, training, working papers — and the training entries lead
with a figure rather than a job title.
============================================================ */
.comm-group + .comm-group { margin-top: 38px; }
.comm-group-t {
display: flex; align-items: center; gap: 12px;
margin: 0 0 18px; font-size: 1.05rem; font-weight: 800; color: var(--text);
}
.comm-group-t::after {
content: ""; flex: 1 1 auto; height: 1px;
background: linear-gradient(to left, transparent, var(--border));
}
html[dir="ltr"] .comm-group-t::after { background: linear-gradient(to right, transparent, var(--border)); }
/* A contribution whose substance is its scale. */
.comm-card-metric { display: grid; gap: 10px; align-content: start; text-align: center; }
.comm-metric {
font-family: var(--ff-en); font-size: clamp(2rem, 5vw, 2.7rem); font-weight: 800;
line-height: 1; font-variant-numeric: tabular-nums;
color: var(--accent);
}
.comm-metric-t {
margin: 0; font-size: .94rem; line-height: 1.75; color: var(--text-soft);
}
/* The icon on a figure card: centred above the number, same badge treatment as
the role cards so the two kinds of card still read as a set. */
.comm-metric-ic { justify-self: center; margin-bottom: 2px; }
/* A qualification row's own documents: its certificate, and anything pinned to
it (the Master's thesis hangs off the MBA row rather than standing alone). */
.tl-docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tl-docs:empty { display: none; }
.tl-docs .cert-btn-sm { max-inline-size: 100%; }
.tl-docs .cert-btn-sm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-inline-size: 34ch; }