still stretch to match the row's height (flex align-items),
same as every sibling — without re-centering, the icon stays pinned to
the top via the vendor's padding-top, leaving it looking off-center with
dead space below where a label would otherwise sit. */
@media (max-width: 560px) {
#settings-toggle .link {
display: none;
}
#settings-toggle {
display: flex;
align-items: center;
justify-content: center;
}
}
/* Sidebar (561px+): same icon-only treatment as mobile, but here there's
width to spare (100px column) rather than width to save — so make it a
true square button instead of a short wide bar, centered in the column.
Shared with ≥1024px since both use the same 100px-wide sidebar now. */
@media (min-width: 561px) {
#settings-toggle .link {
display: none;
}
#settings-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
padding: 0;
margin-left: 44px;
}
/* The vendor's own .icon sizing (new-skin.css) is 40x30 — not square —
sized for a *label* to sit underneath it (line 2 of a 2-line stacked
nav item). With the label hidden here, centering a non-square box
inside the button above still leaves the glyph itself looking
slightly off — noticeable more than the ~5px this box is short by,
since a non-square bounding box reads as visually unbalanced even
when it's technically centered. Square it and center the glyph
directly via flex instead of the vendor's line-height trick. */
#settings-toggle .icon,
#nav-more-toggle .icon {
position: static;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 0;
line-height: 1;
}
}
/* -- Mobile header: the profile name/role block above the nav row makes an
already-tight mobile header feel thick — drop it there and rely on the
home card below for the name/role instead. */
@media (max-width: 560px) {
.header .profile {
display: none;
}
}
/* Nav row: vendor's 13px top/bottom padding is sized for a taller sidebar
icon — a compact 64px mobile bar reads better a bit shorter. */
@media (max-width: 560px) {
.header .top-menu ul li a {
padding-top: 8px;
padding-bottom: 8px;
}
}
/* -- Subtitle: static "Role | Role | Role" text (no typed.js animation) ----
The vendor hard-codes `height: 20px` on .subtitle, sized for typed.js's
single-line cycling text which never wraps. Ours is static and often
wraps to 2-3 lines — the fixed height clipped the box while the text
visually overflowed below it uncounted, so the *next* flex sibling
(home card: .social) rendered as if .subtitle were still one line
tall and overlapped the overflow text. Let it size to its content. */
.card-started .profile .subtitle,
.header .profile .subtitle {
height: auto;
}
.subtitle .role-sep {
margin: 0 2px;
opacity: 0.5;
}
.card-started .profile .subtitle {
display: block;
margin-bottom: 20px;
line-height: 1.5;
font-size: 16px;
}
.header .profile .subtitle {
line-height: 1.4;
}
/* -- Content panel: continuous scroll instead of tab-switching (no vendor
equivalent) — the template shows one .card-inner at a time via
absolute-position + opacity/visibility swap, and below 1024px it falls
back to a stacked, normal-flow layout (its own CSS) with anchor-scroll
navigation instead. This makes everything ≥1024px behave the wide-
screen way, scoped to this panel, while the left sidebar is untouched
(see the 1024-1199px counter-override block earlier in this file for
why the sidebar itself also needs resetting in that range). */
@media (min-width: 1024px) {
/* .header's own width:100px is shared with 561-1023px too — see the
min-width:561px block further up. */
/* .card-started was a flat 480px (vendor default) at every width down to
1024px — fine ≥1200px where there's room to spare, but from 1024 to
1199px that left #content-scroll (which gets whatever's left over)
doing all the shrinking by itself while the profile card stayed rigid.
clamp() lets it shrink too: scales with the viewport between 320px and
480px, and — since 40vw only exceeds 480px once the viewport itself is
past ~1200px — settles back to the original fixed 480px there, so nothing
changes at the width this was already tuned for. */
.card-started {
width: clamp(320px, 40vw, 480px);
}
/* One continuous "sheet" background behind every stacked section — without
it, each .card-inner is an independent white box floating on the blue
page background with a gap between, which reads as disconnected/odd
once more than one is visible at a time (this panel shows all of them
at once, not one-at-a-time like the vendor's original tab behavior).
left tracks .card-started's own width (108px = 100px header + 8px
header margin-right, both fixed) so the two never drift out of sync. */
#content-scroll {
position: absolute;
left: calc(108px + clamp(320px, 40vw, 480px));
right: 0;
top: 15px;
bottom: 15px;
overflow-y: auto;
overflow-x: hidden;
background: #ffffff;
border-radius: 0 4px 4px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
#content-scroll .card-inner {
position: relative;
left: auto;
right: auto;
top: auto;
bottom: auto;
width: auto;
height: auto;
margin-top: 0;
margin-bottom: 0;
background: transparent;
border-radius: 0;
opacity: 1;
visibility: visible;
}
#content-scroll .card-inner:last-child {
border-bottom: none;
}
#content-scroll .card-inner .card-wrap {
height: auto;
overflow: visible;
}
/* Fade-at-the-edge decoration for the old fixed-height, internally
scrolling card — meaningless now that the whole panel scrolls together. */
#content-scroll .card-inner:before,
#content-scroll .card-inner:after {
display: none;
}
}
html[data-theme="dark"] #content-scroll {
background: #31313a;
}
html[data-theme="dark"] #content-scroll .card-inner {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
/* -- Home card header: shorter cover + avatar centered on its edge --------
The template's .slide is a tall (52% of card height) photo backdrop
sized for a single-line name (typed.js cycling one role at a time);
with a full name + pipe-joined roles that ate most of the card,
leaving no room for anything else. Also, the whole block (image,
title, subtitle, social, lnks) is only ever centered as a group via
flex `justify-content:center` against the *slide's* percentage height
— coincidental at best, and wrong the moment content length changes.
Fix both: a short fixed-height cover, the avatar absolutely pinned to
straddle its bottom edge, and the rest of the content flowing top-down
below it with deliberate spacing instead of relying on centering. */
.card-started .profile {
justify-content: flex-start;
padding: 0 40px 60px;
height: 100%;
/* Content (avatar, name, roles, 4 contact rows, 2 buttons) has a fairly
fixed natural height — on a short-but-allowed viewport (this can be
forced to exactly 100% of a 600px-floor container, see min-height on
.container), it can be taller than the box. Scrolling alone doesn't
fix this: .lnks (below) is pinned with position:absolute;bottom:0, a
fixed point on *this* box's own (visible, unscrolled) height — adding
padding or scroll room above it doesn't move it, so content can still
render underneath it. See the ≥1200px short-viewport override below,
which un-pins .lnks into normal flow specifically when that matters. */
overflow-y: auto;
}
@media (max-width: 560px) {
.card-started .profile {
height: auto;
padding: 0 20px 24px;
}
}
.card-started .profile .slide {
position: absolute;
top: 0;
left: 0;
height: 130px;
background-color: transparent;
background-image: linear-gradient(135deg, #48b1bf 0%, #0856c1 100%);
border-radius: 4px 4px 0 0;
}
/* Symmetric mirrored cut — the vendor's own :before/:after end up rotated
12deg and -8deg respectively (one from layout.css, one overridden in
new-skin.css), which doesn't read as intentional. Match magnitude, mirror
the sign, and rescale for the shorter cover. */
.card-started .profile .slide:before,
.card-started .profile .slide:after {
left: -10%;
bottom: -36px;
width: 70%;
height: 72px;
transform: rotate(7deg);
}
.card-started .profile .slide:after {
left: auto;
right: -10%;
transform: rotate(-7deg);
}
/* Avatar: true circle (object-fit crops the 413x472 portrait source to
square) straddling the cover's bottom edge, centered horizontally. */
.card-started .profile .image {
position: absolute;
top: 130px;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
width: 108px;
height: 108px;
z-index: 5;
}
.card-started .profile .image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 15%;
}
/* -- Social links: icon + visible value (PDF-style contact line), not just
an icon — so it reads as actual info (and survives a screenshot) --- */
.card-started .profile .social {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 270px;
margin: 0 0 24px;
gap: 4px;
}
.card-started .profile .social a.social-link {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 4px;
color: #646464;
font-size: 16px;
border-radius: 6px;
transition: background 0.2s ease, color 0.2s ease;
}
.card-started .profile .social a.social-link:hover {
background: rgba(8, 86, 193, 0.06);
color: #0856c1;
}
.card-started .profile .social a.social-link .fas,
.card-started .profile .social a.social-link .fab {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(8, 86, 193, 0.08);
color: #0856c1;
font-size: 16px;
}
/* Download CV / Download Contact buttons: vendor's own .lnk .ion spacing
(Basic section) assumes the icon comes *after* the text (margin-left) —
this project puts the icon first instead, so mirror that rule with the
margin flipped rather than editing the vendor original. */
.lnk .fas,
.lnk .fab {
margin: 0 8px 0 0;
position: relative;
top: -2px;
display: inline-block;
vertical-align: middle;
font-size: 18px;
transition: all 0.3s ease 0s;
}
.card-started .profile .social a.social-link .social-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
html[data-theme="dark"] .card-started .profile .social a.social-link {
color: rgba(255, 255, 255, 0.65);
}
html[data-theme="dark"] .card-started .profile .social a.social-link:hover {
background: rgba(255, 255, 255, 0.06);
}
.card-started .profile .title {
/* clears the avatar: slide height (130) + half the 108px avatar (54) + gap */
margin-top: 204px;
/* Vendor's name heading (new-skin.css) is a flat 34px at every width down
to 561px, then a flat 24px below that — fine until a name this long
(wraps to 2-3 lines) meets a 320px phone, where even 24px crowds the
card. Scale continuously with the viewport instead of jumping at one
breakpoint: 22px at the narrowest phones, ramping up to the vendor's
own 34px by 560px and staying there for every wider layout (sidebar or
desktop), where the card already has room to spare. */
font-size: clamp(22px, 5vw + 6px, 26px);
line-height: 1.25;
margin-bottom: 20px;
}
@media (max-width: 560px) {
.card-started .profile .social {
margin-bottom: 56px;
}
}
/* -- Works: project cards have no thumbnail image, so give the text room ---
Left-aligned, not centered (vendor default) — a multi-line description
reads faster left-aligned than centered, and it matches every other
card's text (summary, experience, awards) elsewhere on the page. */
.content.works .box-item {
text-align: left;
}
.content.works .box-item .desc {
padding: 12px 2px 0;
}
.content.works .box-item .desc .text {
margin-top: 6px;
font-size: 14px;
line-height: 1.55;
color: #646464;
}
html[data-theme="dark"] .content.works .box-item .desc .text {
color: rgba(255, 255, 255, 0.55);
}
.tech-chips {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tech-chips .chip {
padding: 3px 9px;
font-size: 14px;
color: #646464;
background: rgba(153, 153, 153, 0.1);
border-radius: 999px;
}
html[data-theme="dark"] .tech-chips .chip {
color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.08);
}
.content.works .box-item .date {
margin-bottom: 6px;
color: #0856c1;
border-color: #0856c1;
}
/* -- Works: banner placeholder above each project card (no vendor
equivalent) — until a real screenshot is supplied via the project's
optional `image` field (app.js), show a gradient + category icon.
aspect-ratio (not a fixed height) keeps the same proportions at any
card width, instead of a fixed 140px getting relatively more
"letterboxed" the wider the card gets (up to ~850px on a large
desktop, vs ~310px on a phone — over 5:1 vs under 3:1 for the exact
same 140px height). */
/* Gradient always fills the banner — a category icon centered on it until
a real screenshot is supplied (.work-banner-placeholder), then that
screenshot sits inset on top of it instead of replacing it
(.work-banner-photo) — so every project reads as the same "brand" banner
whether or not it has a photo yet, rather than a plain image banner
sitting next to gradient ones. */
.work-banner {
aspect-ratio: 2 / 1;
height: auto;
margin-bottom: 12px;
padding: 1px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(135deg, #48b1bf 0%, #0856c1 100%);
}
.work-banner-placeholder .fas,
.work-banner-placeholder .fab {
font-size: 32px;
color: rgba(255, 255, 255, 0.85);
}
/* The photo itself: inset from the gradient edge (the padding above) so
the gradient shows through as a mat around it, like a photo on colored
paper — the white border is what actually separates "photo" from
"background" rather than relying on the mat gap alone. Same border in
both themes, since it's a deliberate frame accent, not theme-adaptive. */
.work-banner-photo {
position: relative;
width: 100%;
height: 100%;
border-radius: 4px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
transition: transform 0.15s ease;
--stroke-pos: 1px;
--stroke-neg: -1px;
--stroke-color: rgba(255, 255, 255, 0.2);
filter: drop-shadow(var(--stroke-pos) 0 0 var(--stroke-color))
drop-shadow(var(--stroke-neg) 0 var(--stroke-color))
drop-shadow(0 var(--stroke-pos) 0 var(--stroke-color))
drop-shadow(0 var(--stroke-neg) 0 var(--stroke-color))
drop-shadow(var(--stroke-pos) var(--stroke-pos) 0 var(--stroke-color))
drop-shadow(var(--stroke-pos) var(--stroke-neg) 0 var(--stroke-color))
drop-shadow(var(--stroke-neg) var(--stroke-pos) 0 var(--stroke-color))
drop-shadow(var(--stroke-neg) var(--stroke-neg) 0 var(--stroke-color));
}
/* Hover/focus affordance: a dark scrim + magnifying-glass icon that fades
and scales in — the only other signal this is clickable is the cursor,
easy to miss on a touch device or at a glance. Pure CSS (::after), no
markup change needed — same icon font already loaded for every other
icon on the page. pointer-events:none so the overlay itself never
intercepts the click meant for .work-banner-photo underneath it. */
.work-banner-photo::after {
content: "\f00e";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
background: rgba(0, 0, 0, 0.4);
color: #ffffff;
font-size: 28px;
opacity: 0;
transform: scale(0.8);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.work-banner-photo:hover::after,
.work-banner-photo:focus-visible::after {
opacity: 1;
transform: scale(1);
}
/* -- Project screenshot zoom modal: much larger than the CV/Contact form
modals (.modal's own 420px max-width), and the same gradient mat +
white-framed photo treatment as .work-banner/.work-banner-photo
(the grid thumb), just scaled up, so the full-size view reads as the
same "card" rather than a bare image dropped on the dark backdrop.
The close button floats over its corner instead of a header bar. */
.image-modal-backdrop {
padding: 40px;
}
.image-modal {
position: relative;
width: auto;
max-width: 90vw;
max-height: 90vh;
background-image: linear-gradient(135deg, #48b1bf 0%, #0856c1 100%);
border-radius: 10px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
overflow: visible;
}
.image-modal-img {
display: block;
max-width: calc(90vw - 40px);
max-height: calc(90vh - 40px);
width: auto;
height: auto;
border-radius: 6px;
--stroke-pos: 1px;
--stroke-neg: -1px;
--stroke-color: rgba(255, 255, 255, 0.2);
filter: drop-shadow(var(--stroke-pos) 0 0 var(--stroke-color))
drop-shadow(var(--stroke-neg) 0 var(--stroke-color))
drop-shadow(0 var(--stroke-pos) 0 var(--stroke-color))
drop-shadow(0 var(--stroke-neg) 0 var(--stroke-color))
drop-shadow(var(--stroke-pos) var(--stroke-pos) 0 var(--stroke-color))
drop-shadow(var(--stroke-pos) var(--stroke-neg) 0 var(--stroke-color))
drop-shadow(var(--stroke-neg) var(--stroke-pos) 0 var(--stroke-color))
drop-shadow(var(--stroke-neg) var(--stroke-neg) 0 var(--stroke-color));
}
.image-modal-close {
position: absolute;
top: -14px;
right: -14px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #ffffff;
color: #171717;
font-size: 20px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.image-modal-close:hover {
color: #0856c1;
}
/* This button's circle is *always* white — it floats on the gradient/
photo, never on the dark modal background the other close buttons sit
on — but two separate dark-mode rules both still match plain .modal-close
in dark mode: a vendor one (html[data-theme="dark"] button, specificity
0,1,2) and this project's own (html[data-theme="dark"] .modal-close,
0,2,1, meant for the CV/Contact modals' dark card background). Between
those two the project's own rule should already win on specificity, but
either way neither is correct *here* — this button's background never
changes with theme, so its text shouldn't either. The compound selector
(.modal-close.image-modal-close, two classes) outranks every plain
single-class/attribute rule above regardless of which of those was
actually winning, so this is the one definitive place to fix it. */
.modal-close.image-modal-close {
color: #171717;
background: #ffffff;
}
html[data-theme="dark"] .modal-close.image-modal-close {
background: #31313a;
color: #ffffff;
}
/* html[data-theme="dark"] .modal sets a dark background:#31313a (for the
CV/Contact form modals) — .image-modal inherits the base .modal class,
so that rule's higher specificity (attribute selector + class beats a
plain class) would otherwise wipe out the gradient here too. Same
gradient in both themes, same reasoning as the work-banner's. */
html[data-theme="dark"] .image-modal {
background-image: linear-gradient(135deg, #48b1bf 0%, #0856c1 100%);
}
.content.works .box-item .desc {
padding-top: 0;
}
.content.works .box-item .desc .name {
margin-bottom: 0;
font-size: 16px;
}
.content.works .box-item .desc .date {
font-size: 16px;
color: #646464;
border-color: #646464;
margin-bottom: 4px;
padding: 0 5px;
font-weight: 400;
text-transform: none;
border-radius: 4px;
float: right;
}
.content.works .box-item .desc .category {
font-size: 16px;
margin-top: 0;
}
.content.works .box-item .desc .text p {
font-size: 14.5px;
text-align: justify;
}
.content.works .box-item .desc * {
line-height: normal;
}
/* -- Works: two columns once there's room to spare (≥1200px matches this
panel's own "spacious desktop" breakpoint elsewhere), instead of one
full-width card per row stretching to ~850px — a project card's
content (banner, title, 2-3 line description, chips) doesn't need
that much width, and one column per row means excess scrolling to
see every project. Below that, back to the vendor's own full-width
col-d/col-t/col-m-12 (set in app.js) — a single column stays easiest
to read once a card wouldn't have much more than ~300-400px to work
with anyway. */
@media (min-width: 1200px) {
#works-grid.grid-items .grid-item.col {
width: 50%;
}
#works-grid.grid-items {
margin-left: -12px;
margin-right: -12px;
}
#works-grid.grid-items .grid-item.col {
padding-right: 12px;
padding-left: 12px;
}
}
.content.works .grid-items .grid-item.col {
margin-top: 30px;
}
/* -- Technical Skills: compact one-line-per-category list (matches the PDF
resume) instead of the template's spacious per-group checklist. ------- */
.skills-compact {
margin: 0;
padding: 0;
list-style: none;
}
.skills-compact li {
padding: 10px 0;
border-bottom: 1px solid #eeeeee;
font-size: 16px;
line-height: 1.6;
color: #646464;
}
.skills-compact li:last-child {
border-bottom: none;
padding-bottom: 0;
}
.skills-compact strong {
color: #323232;
font-weight: 500;
}
html[data-theme="dark"] .skills-compact li {
border-bottom-color: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"] .skills-compact strong {
color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 560px) {
.skills-compact li {
padding: 8px 0;
font-size: 14.5px;
}
}
/* -- Awards & Recognitions: stacked list (no vendor equivalent) ------------
A 3-column table has no good narrow-screen behavior — either the text
gets cramped or it forces horizontal scrolling. A year badge + title +
org reads cleanly at any width without a second, mobile-only layout. */
.awards-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.award-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid #eeeeee;
}
.award-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.award-year {
flex: none;
width: 44px;
padding-top: 1px;
color: #0856c1;
font-weight: 600;
}
.award-body {
flex: 1;
min-width: 0;
}
.award-title {
font-weight: 600;
color: #323232;
}
.award-org {
margin-top: 2px;
color: #646464;
}
html[data-theme="dark"] .award-item {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .award-title {
color: rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] .award-org {
color: rgba(255, 255, 255, 0.55);
}
/* Same sizes at every width, same as the rest of this list's page — a
card list this short doesn't need a separate, smaller mobile scale. */
@media (max-width: 560px) {
.award-item {
gap: 12px;
padding: 10px 0;
}
.award-year {
width: 38px;
}
}
/* -- Education: same year-badge + body layout as Awards (no vendor
equivalent) — a vertical timeline reads as a *progression* of several
steps, which looks odd for a single highest-qualification entry; a
plain badge + degree + org reads correctly whether there's one entry
or several, with no separate "not a timeline" variant needed. */
.education-list {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
}
.education-item {
display: flex;
align-items: flex-start;
gap: 16px;
padding: 14px 0;
border-bottom: 1px solid #eeeeee;
}
.education-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.education-year {
flex: none;
width: 44px;
padding-top: 1px;
color: #0856c1;
font-size: 16px;
font-weight: 600;
}
.education-body {
flex: 1;
min-width: 0;
}
.education-degree {
font-size: 16px;
font-weight: 600;
color: #323232;
}
.education-org {
margin-top: 2px;
font-size: 16px;
color: #646464;
}
html[data-theme="dark"] .education-item {
border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .education-degree {
color: rgba(255, 255, 255, 0.85);
}
html[data-theme="dark"] .education-org {
color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 560px) {
.education-item {
gap: 12px;
padding: 10px 0;
}
.education-year {
width: 38px;
}
}
/* -- Experience: vertical left-node timeline (no template equivalent) ------ */
.resume-items.timeline {
position: relative;
padding-left: 28px;
margin: 0;
list-style: none;
}
.resume-items.timeline:before {
content: '';
position: absolute;
left: 5px;
top: 6px;
bottom: 6px;
width: 2px;
background: rgba(8, 86, 193, 0.6);
}
.resume-items .timeline-item {
position: relative;
padding: 0 0 24px 0;
}
.resume-items .timeline-item:last-child {
padding-bottom: 0;
}
.resume-items .timeline-item:before {
content: '';
position: absolute;
left: -33px;
top: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #ffffff;
border: 2px solid #0856c1;
z-index: 1;
}
@media (max-width: 560px) {
.resume-items.timeline {
padding-left: 12px;
}
.resume-items .timeline-item {
padding-bottom: 20px;
padding-left: 20px;
}
/* Keeps the dot centered on the vertical line (left:13px, unchanged) —
shifted by exactly the 6px the padding-left above just shrunk by. */
.resume-items .timeline-item:before {
left: -14px;
}
.content-scroll {
border-radius: 4px;
}
}
@media (max-width: 1240px) {
html[data-theme=dark] .header {
background: transparent;
}
}
/* -- Nav: group overflow items into a "More" menu whenever they don't fit --
Which items are hidden and whether the button shows at all is computed
in JS by measuring actual overflow (see updateNavOverflow in app.js) —
not tied to a fixed breakpoint, so it only appears when something is
genuinely hidden. Visibility itself is the native [hidden] attribute;
these rules only style the *shown* state. */
#nav-more-item {
position: relative;
}
.nav-more-menu {
display: flex;
flex-direction: column;
background: #ffffff;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
z-index: 220;
}
/* Mobile row: a full-width bar dropping down from the fixed 64px header —
.nav-more-item sits inline in a horizontal row there, so there's no
single trigger edge worth anchoring a small flyout to. */
@media (max-width: 560px) {
.nav-more-menu {
position: fixed;
left: 0;
right: 0;
}
}
/* Sidebar layouts: unlike Settings, "More" isn't pinned to a fixed spot —
it appears wherever it lands in the vertical list once earlier items are
folded into it, so opening downward from its top edge risks running off
the bottom of the viewport the same way Settings' dropdown originally
did. Flyout to the right instead, opening *upward* from the trigger's
own bottom edge — there's reliably more room above a list item than
below one that's already partway down a short sidebar. */
@media (min-width: 561px) {
.nav-more-menu {
position: absolute;
top: auto;
bottom: 0;
left: 100%;
right: auto;
min-width: 160px;
max-height: calc(100vh - 20px);
overflow-y: auto;
}
}
/* The vendor CSS sets `display` on `.top-menu ul li` (and `.nav-more-menu`
above), so those author-origin rules always beat the native [hidden]
UA-stylesheet rule regardless of specificity — force it explicitly. */
.nav-more-menu[hidden],
#nav-more-item[hidden],
.nav-overflow[hidden],
.nav-more-menu a[hidden] {
display: none !important;
}
.nav-more-menu a {
display: flex;
flex-shrink: 0;
align-items: center;
gap: 10px;
padding: 14px 20px;
color: #323232;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.nav-more-menu a:hover {
color: #0856c1;
}
.top-menu ul li.nav-more-item a[aria-expanded="true"] {
color: #0856c1;
}
html[data-theme="dark"] .nav-more-menu {
background: #31313a;
}
html[data-theme="dark"] .nav-more-menu a {
color: rgba(255, 255, 255, 0.85);
}
/* -- Whitespace: the vendor's title box reserves 51px (21px text line +
30px padding-bottom) before any body text starts, then each section
adds another 30-40px margin below its content — sized for a template
showing one section at a time, but stacked continuously here it reads
as a lot of dead air between a heading and its own text, and between
sections. Tighten both while keeping the title's colored accent/rule
(absolutely positioned, unaffected by these height changes). */
.content .title {
min-height: 0;
padding: 0;
}
.content .title:after {
display: none;
}
.content .title + .row .col {
padding-top: 16px;
}
.content .title + .row .col ul li:first-child {
padding-top: 0;
}
.content .title + .row .col * {
line-height: normal;
}
.content .title + .row .col #about-summary {
text-align: justify;
}
.content .title + .row .col h3, .content .title + .row .col .company {
font-size: 16px;
}
.content .title + .row .col .date {
font-size: 16px;
color: #646464;
border-color: #646464;
margin-bottom: 4px;
}
.content .title + .row .col ul li {
font-size: 16px;
text-align: justify;
}
.content .title + .row .col ul li p {
font-size: 14.5px;
text-align: justify;
}
.content {
margin: 0 0 26px 0;
}
.content:last-child {
margin-bottom: 10px;
}
.card-inner:before, .card-inner:after {
display: none;
}
#works-filters {
display: none;
}
/* Tighten further on mobile: vendor's 20px section-title size and the
generic 16px/25px-bottom-margin rule are sized for a wide desktop
column, and read as oversized/loose in a narrow, already-compact card. */
@media (max-width: 560px) {
.card-inner .card-wrap {
padding: 30px 20px 5px;
}
.card-inner {
padding-bottom: 0 !important;
}
.content {
margin-bottom: 0 !important;
}
.header .top-menu ul li:last-child a {
border-radius: 0;
}
.container {
max-width: 100%;
}
}
@media (max-width: 1023px) {
.card-inner {
padding-bottom: 16px;
}
.card-inner:last-child
{
margin-bottom: 50px;
padding-bottom: 0;
}
#content-scroll {
background: transparent !important;
}
}
/* ==========================================================================
Accessibility
========================================================================== */
/* -- Focus visibility: the vendor resets `outline: none`/`outline: 0` on
every and every /