/* Custom styles */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 3.5rem; }
/* Quick-jump buttons inside the banner */
.quick-nav { margin-top: 2rem; }
.quick-nav ul.actions { flex-wrap: wrap; margin-left: -0.5rem; }
.quick-nav ul.actions li { padding: 0.5rem 0 0 0.5rem; }
/* Sticky bar, shown after the banner has been scrolled past */
.sticky-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: var(--nav-bg);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
transform: translateY(-100%);
transition: transform 0.25s ease-in-out;
}
.sticky-nav.visible { transform: translateY(0); }
.sticky-nav ul { list-style: none; margin: 0; padding: 0 1rem; display: flex; justify-content: center; flex-wrap: wrap; }
.sticky-nav a {
display: block; padding: 0.9rem 1.1rem; border-bottom: 0;
color: var(--ink); font-size: 0.8rem; letter-spacing: 0.1rem; text-transform: uppercase;
}
.sticky-nav a:hover, .sticky-nav a.active { color: #47D3E5; }
/* Skills */
.skills { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 3rem; margin: 2rem 0; text-align: center; }
.skills > div { flex: 1 1 14rem; max-width: 22rem; }
.skills h3 { margin-bottom: 0.75rem; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.tags li { padding: 0.25rem 0.8rem; border-radius: var(--radius-sm); font-size: 0.85rem; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); }
/* Portfolio cards: optional image on top, optional links below */
.items .caption .thumb { display: block; width: 100%; height: 10rem; object-fit: cover; margin-bottom: 1rem; border-radius: 0.25rem; }
.items .caption .links { list-style: none; margin: 1rem 0 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1rem; font-size: 0.85rem; }
.items .caption h6 { margin-bottom: 0.25rem; }
/* Contact */
.contact-links { list-style: none; margin: 1.5rem 0 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
/* Legal pages */
.legal { max-width: 46rem; margin: 0 auto; padding: 4rem 2rem; }
.legal h1 { margin-bottom: 1.5rem; }
.legal h2 { margin-top: 2rem; font-size: 1.2rem; }
@media screen and (max-width: 736px) {
.sticky-nav a { padding: 0.8rem 0.6rem; font-size: 0.7rem; }
}
/* ===== Modern theme ===== */
:root {
--accent: #2bc4d9;
--accent-dark: #139bb0;
--ink: #0f172a;
--muted: #64748b;
--surface: #f4f7fa;
--radius: 0.45rem;
--radius-sm: 0.3rem;
--shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.07);
--bg: #ffffff;
--card: #ffffff;
--nav-bg: rgba(255, 255, 255, 0.78);
--line: rgba(15, 23, 42, 0.08);
--line-strong: rgba(15, 23, 42, 0.12);
--footer-bg: #0f172a;
--grad: linear-gradient(135deg, #2bc4d9, #139bb0);
}
body, input, select, textarea {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: var(--muted);
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-weight: 700; letter-spacing: -0.03em; }
h1 { font-size: 4rem; letter-spacing: -0.045em; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.25rem; }
p.major, .major { color: var(--accent-dark); font-weight: 500; letter-spacing: 0.02em; }
a { color: var(--accent-dark); border-bottom: 0; }
a:hover { color: var(--accent); }
/* Gradient accent on the main title */
.banner h1 {
background: linear-gradient(90deg, var(--ink) 20%, var(--accent-dark));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
/* Sections: alternate soft background */
#skills, #contact { background: var(--surface); }
.wrapper.style1 { padding-top: 5rem; padding-bottom: 5rem; }
#wrapper.divided > * { border-top-width: 0; }
.wrapper.style1 > .inner > h2 { position: relative; padding-bottom: 1.25rem; }
.wrapper.style1 > .inner > h2::after {
content: ""; position: absolute; left: 50%; bottom: 0; width: 3rem; height: 4px;
margin-left: -1.5rem; border-radius: 4px;
background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}
/* Images */
.banner .image img, .spotlight .image img { filter: saturate(1.05); }
/* Buttons: first one filled, rest outlined pills */
.button, button, input[type="submit"] {
border-radius: var(--radius-sm); font-weight: 600; letter-spacing: 0.03em;
text-transform: none; height: auto; line-height: 1; padding: 1rem 1.6rem;
box-shadow: inset 0 0 0 2px var(--line-strong);
color: var(--ink) !important;
transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--accent), 0 6px 16px rgba(43, 196, 217, 0.25); color: var(--accent-dark) !important; }
.quick-nav ul.actions li:first-child .button,
.contact-links li:first-child .button {
background: var(--grad);
box-shadow: 0 6px 16px rgba(43, 196, 217, 0.35); color: #fff !important;
}
.quick-nav ul.actions li:first-child .button:hover,
.contact-links li:first-child .button:hover { color: #fff !important; box-shadow: 0 8px 22px rgba(43, 196, 217, 0.5); }
.contact-links .icon:before { margin-right: 0.35rem; }
/* Sticky nav: frosted glass */
.sticky-nav { background: var(--nav-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08); }
.sticky-nav a { text-decoration: none; border-bottom: 0; color: var(--ink); font-weight: 600; letter-spacing: 0.06rem; position: relative; }
.sticky-nav a::after { content: ""; position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0.45rem; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.2s ease; }
.sticky-nav a:hover::after, .sticky-nav a.active::after { transform: scaleX(1); }
.sticky-nav a.active { color: var(--ink); }
/* Skills */
.skills { max-width: 78rem; margin-left: auto; margin-right: auto; }
.skills > div { flex: 1 1 13rem; max-width: none; background: var(--card); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); }
.skills h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-dark); }
.tags li { box-shadow: none; background: rgba(43, 196, 217, 0.12); color: var(--ink); font-weight: 500; }
/* Portfolio cards */
.items.style1 > *, .items.style1.medium > * { border: 0 !important; padding: 0.6rem !important; }
.items.style1 > * > .inner {
height: 100%; box-sizing: border-box; padding: 1.75rem 1.5rem;
background: var(--surface); border-radius: var(--radius);
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.items.style1 > * > .inner:hover { transform: translateY(-4px); background: var(--card); box-shadow: var(--shadow); }
.items .caption h6 { color: var(--muted); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; text-transform: none; opacity: 0.8; }
.items .caption h3 { font-size: 1.1rem; }
.items .caption p { font-size: 0.95rem; margin-bottom: 0; }
.items .caption .thumb { border-radius: var(--radius-sm); }
/* Footer */
footer.wrapper { background: var(--footer-bg); color: #94a3b8; padding-top: 3rem; padding-bottom: 3rem; }
footer.wrapper a { color: #e2e8f0; }
footer.wrapper a:hover { color: var(--accent); }
@media screen and (max-width: 736px) {
h1 { font-size: 2.75rem; }
h2 { font-size: 2rem; }
.wrapper.style1 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}
/* ===== Roles / Tech stack cards, hero icon row ===== */
.tech-row { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0 0; padding: 0; }
.tech-row li { width: 2.9rem; height: 2.9rem; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: rgba(43, 196, 217, 0.12); color: var(--accent-dark); font-size: 1.2rem; transition: transform 0.15s ease, background-color 0.2s ease; }
.tech-row li:hover { transform: translateY(-3px); background: rgba(43, 196, 217, 0.25); }
.tech-row .icon:before { margin: 0; }
.cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; margin: 2rem auto 0 auto; max-width: 78rem; }
.cards .card { flex: 1 1 15rem; max-width: 22rem; background: var(--card); border-radius: var(--radius); padding: 1.75rem 1.5rem; box-shadow: var(--shadow); text-align: center; transition: transform 0.2s ease; }
.cards .card:hover { transform: translateY(-4px); }
.cards .card .icon { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; margin-bottom: 1rem; border-radius: var(--radius); background: var(--grad); color: #fff; font-size: 1.5rem; }
.cards .card .icon:before { margin: 0; }
.cards .card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.cards .card p { font-size: 0.95rem; margin: 0; }
.cards.stack .card { flex-basis: 12rem; max-width: 16rem; padding: 1.25rem 1.1rem; }
.cards.stack .card .icon { width: 3rem; height: 3rem; font-size: 1.3rem; border-radius: var(--radius-sm); }
h2.sub { margin-top: 4.5rem; }
/* ===== Project cards (portfolio) ===== */
.items.projects > *, .items.projects.style1 > * { width: 50% !important; }
.items.projects { max-width: 70rem; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 736px) { .items.projects > *, .items.projects.style1 > * { width: 100% !important; } }
.project { text-align: left; display: flex; flex-direction: column; height: 100%; }
.project .thumb { display: block; width: 100%; height: 11rem; object-fit: cover; margin-bottom: 1.1rem; border-radius: var(--radius-sm); }
.project .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.75rem; }
.project .year { padding: 0.2rem 0.65rem; border-radius: var(--radius-sm); background: var(--ink); color: var(--bg); font-weight: 600; letter-spacing: 0.03em; }
.project .company { color: var(--muted); opacity: 0.85; }
.project h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.project p { font-size: 0.95rem; margin-bottom: 1rem; }
.project .facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1rem; margin: auto 0 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; }
.project .facts dt { font-weight: 600; color: var(--ink); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; padding-top: 0.2rem; }
.project .facts dd { margin: 0; }
.project .facts .tags li { font-size: 0.75rem; padding: 0.15rem 0.6rem; }
.project .links { list-style: none; margin: 1rem 0 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.85rem; font-weight: 600; }
.project .facts + .links { margin-top: 1rem; }
.project .facts .tags { justify-content: flex-start; }
/* ===== Dark theme (default, see assets/js/theme.js) ===== */
html[data-theme="dark"] {
--accent: #3ad0e4;
--accent-dark: #5fdcec;
--ink: #e8edf5;
--muted: #9aa7ba;
--bg: #0b111b;
--surface: #141c2a;
--card: #1a2333;
--nav-bg: rgba(11, 17, 27, 0.72);
--line: rgba(255, 255, 255, 0.09);
--line-strong: rgba(255, 255, 255, 0.16);
--footer-bg: #070b12;
--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
color-scheme: dark;
}
html[data-theme="light"] { color-scheme: light; }
body, #wrapper, .wrapper.style1 { background-color: var(--bg); }
body { transition: background-color 0.25s ease, color 0.25s ease; }
html[data-theme="dark"] .banner .image img,
html[data-theme="dark"] .spotlight .image img { filter: brightness(0.85) saturate(1.05); }
html[data-theme="dark"] .banner h1 { background: linear-gradient(90deg, #ffffff 20%, var(--accent)); -webkit-background-clip: text; background-clip: text; }
html[data-theme="dark"] .tags li { background: rgba(58, 208, 228, 0.14); }
html[data-theme="dark"] .tech-row li { background: rgba(58, 208, 228, 0.14); }
html[data-theme="dark"] .legal a, html[data-theme="dark"] footer a { color: var(--accent-dark); }
html[data-theme="dark"] footer.wrapper a { color: #e2e8f0; }
html[data-theme="dark"] strong, html[data-theme="dark"] b, html[data-theme="dark"] label { color: var(--ink); }
/* Theme toggle button */
.theme-toggle {
position: fixed; top: 0.7rem; right: 1rem; z-index: 101;
width: 2.6rem; height: 2.6rem; padding: 0; border: 0; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
background: var(--nav-bg); color: var(--ink) !important; font-size: 1.1rem;
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow); cursor: pointer;
}
.theme-toggle:hover { color: var(--accent) !important; transform: rotate(15deg); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); }
.theme-toggle .icon:before { margin: 0; }
.theme-toggle .icon { line-height: 1; }
html[data-theme="dark"] .theme-toggle .when-light { display: none; }
html:not([data-theme="dark"]) .theme-toggle .when-dark { display: none; }
@media screen and (max-width: 736px) { .sticky-nav ul { padding-right: 3.5rem; padding-left: 0; } }
/* Toggle blends into the sticky bar once it is visible (class set in custom.js) */
.sticky-nav ul { height: 3.4rem; align-items: center; }
.sticky-nav a { padding-top: 0; padding-bottom: 0; line-height: 3.4rem; }
.sticky-nav a::after { bottom: 0.7rem; }
.theme-toggle { transition: top 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, color 0.2s ease, transform 0.15s ease; }
body.nav-visible .theme-toggle {
top: 0.4rem; background: transparent; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
body.nav-visible .theme-toggle:hover { box-shadow: none; background: var(--line); }
/* ===== Project facts v2: rows with label + tags / tech icons (replaces the version) ===== */
.project .facts { display: flex; flex-direction: column; gap: 0.7rem; margin: auto 0 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; }
.project .fact { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.project .fact .label { flex: 0 0 4.6rem; font-weight: 600; color: var(--ink); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; }
.project .fact .value { flex: 1 1 0; min-width: 0; }
.project .fact .tags, .project .fact .tech { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; }
.project .tech { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.project .tech li { margin: 0; padding: 0; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: rgba(43, 196, 217, 0.12); color: var(--accent-dark); font-size: 0.95rem; transition: transform 0.15s ease, background-color 0.2s ease; }
.project .tech li:hover { transform: translateY(-2px); background: rgba(43, 196, 217, 0.25); }
.project .tech .icon:before { margin: 0; }
html[data-theme="dark"] .project .tech li { background: rgba(58, 208, 228, 0.14); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
@media screen and (max-width: 480px) { .project .fact .label { flex-basis: 100%; } }
/* ===== Tech icons as images (swap images/icons/dummy.svg for real logos) ===== */
.tech-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tech-row li, .project .tech li { overflow: hidden; }
.tech-row li { padding: 0.55rem; }
.project .tech li { padding: 0.35rem; }
.cards.stack .card .tech-img { width: 3rem; height: 3rem; margin: 0 auto 1rem auto; }
/* Tech icons without background boxes */
.tech-row li, .project .tech li,
html[data-theme="dark"] .tech-row li, html[data-theme="dark"] .project .tech li { background: none; border-radius: 0; padding: 0; overflow: visible; }
.tech-row li:hover, .project .tech li:hover { background: none; transform: translateY(-2px) scale(1.1); }
.tech-row { gap: 1rem; }
.tech-row li { width: 2.4rem; height: 2.4rem; }
.project .tech li { width: 1.7rem; height: 1.7rem; }
/* ===== Expandable "More tools" area ===== */
.more { max-width: 67.75rem; /* = 4 tech cards (4 x 16rem) + 3 gaps (3 x 1.25rem) */ margin: 2.5rem auto 0 auto; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); text-align: left; }
.more summary {
list-style: none; cursor: pointer; padding: 1.1rem 1.5rem; display: flex; align-items: center; justify-content: space-between;
font-weight: 600; color: var(--ink); letter-spacing: 0.02em; user-select: none;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--accent-dark); transition: transform 0.2s ease; }
.more[open] summary::after { transform: rotate(45deg); }
.more summary:hover { color: var(--accent-dark); }
.more-tools { list-style: none; margin: 0; padding: 0 1.5rem 1.5rem 1.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.more-tools li { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 0.9rem; font-weight: 500; }
.more-tools .tech-img { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
/* Tech stack as a grid so the "More tools" bar always has exactly the same width as the card block */
.cards.stack { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); max-width: 67.75rem; }
.cards.stack .card { max-width: none; flex: none; }
/* Tech stack: always 4 per row on tablets/desktop, 2 on phones */
.cards.stack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards.stack .card { padding: 1.25rem 0.75rem; }
@media screen and (max-width: 736px) { .cards.stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Hero icon row: smaller, icons can be links */
.tech-row { gap: 0.9rem; }
.tech-row li { width: 1.8rem; height: 1.8rem; }
.tech-row li a { display: block; width: 100%; height: 100%; border: 0; text-decoration: none; }
.tech-row li a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
/* =====================================================================
Eye candy: gradients, textures, glow buttons, scroll progress
===================================================================== */
:root {
--violet: #7a5cff;
--grad: linear-gradient(135deg, #2bc4d9 0%, #5b8cff 55%, #7a5cff 100%);
--grad-line: linear-gradient(90deg, #2bc4d9, #7a5cff);
--dot: rgba(15, 23, 42, 0.09);
--grid: rgba(15, 23, 42, 0.05);
--glow-a: rgba(43, 196, 217, 0.20);
--glow-b: rgba(122, 92, 255, 0.16);
/* One base colour per section; the checkered texture on top is the same everywhere */
--sec-hero: var(--bg);
--sec-skills: var(--surface);
--sec-portfolio: #f1f5fc;
--sec-contact: #e4ecf8;
}
html[data-theme="dark"] {
--violet: #8e7dff;
--dot: rgba(255, 255, 255, 0.07);
--grid: rgba(255, 255, 255, 0.04);
--glow-a: rgba(58, 208, 228, 0.16);
--glow-b: rgba(142, 125, 255, 0.18);
--sec-portfolio: #0f1726;
--sec-contact: #172238;
}
/* ---- Section backgrounds: glow blobs + texture layered on the base colour ---- */
#portfolio {
background-color: var(--sec-portfolio);
background-image:
radial-gradient(45rem 28rem at 0% 0%, var(--glow-a), transparent 70%),
radial-gradient(40rem 26rem at 100% 100%, var(--glow-b), transparent 70%),
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: auto, auto, 36px 36px, 36px 36px;
}
#skills {
background-color: var(--sec-skills);
background-image:
radial-gradient(50rem 30rem at 100% 0%, var(--glow-b), transparent 70%),
radial-gradient(40rem 26rem at 0% 100%, var(--glow-a), transparent 70%),
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: auto, auto, 36px 36px, 36px 36px;
}
#contact {
background-color: var(--sec-contact);
background-image:
radial-gradient(50rem 24rem at 50% 120%, var(--glow-b), transparent 70%),
radial-gradient(36rem 20rem at 50% -20%, var(--glow-a), transparent 70%),
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: auto, auto, 36px 36px, 36px 36px;
}
/* ---- Hero: soft colour glows behind the text ---- */
.banner .content {
background-image:
radial-gradient(34rem 24rem at 0% 0%, var(--glow-a), transparent 70%),
radial-gradient(30rem 22rem at 100% 100%, var(--glow-b), transparent 70%),
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: auto, auto, 36px 36px, 36px 36px;
}
.banner h1 { background-image: linear-gradient(90deg, var(--ink) 10%, var(--accent) 55%, var(--violet) 100%); background-clip: text; -webkit-background-clip: text; }
html[data-theme="dark"] .banner h1 { background-image: linear-gradient(90deg, #ffffff 5%, var(--accent) 55%, var(--violet) 100%); background-clip: text; -webkit-background-clip: text; }
.banner p.major { background: var(--grad-line); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; font-weight: 600; }
/* ---- Headings: gradient text + gradient underline bar ---- */
.wrapper.style1 > .inner > h2 { background: linear-gradient(90deg, var(--ink) 30%, var(--accent-dark)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.wrapper.style1 > .inner > h2::after { background: var(--grad-line); width: 3.5rem; margin-left: -1.75rem; box-shadow: 0 0 14px rgba(43, 196, 217, 0.55); }
/* ---- Buttons: gradient outline, glow, shine sweep ---- */
.button { position: relative; overflow: hidden; border: 2px solid transparent; padding: calc(1rem - 2px) calc(1.6rem - 2px); box-shadow: none;
background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--grad) border-box;
color: var(--ink) !important; }
#skills .button { background: linear-gradient(var(--sec-skills), var(--sec-skills)) padding-box, var(--grad) border-box; }
#contact .button { background: linear-gradient(var(--sec-contact), var(--sec-contact)) padding-box, var(--grad) border-box; }
.button::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; transform: skewX(-20deg);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent); transition: left 0.5s ease; pointer-events: none; }
.button:hover { background: var(--grad) padding-box, var(--grad) border-box; color: #fff !important;
box-shadow: 0 8px 22px rgba(91, 140, 255, 0.45); transform: translateY(-2px); }
.button:hover::after { left: 130%; }
.button:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(91, 140, 255, 0.4); }
.quick-nav ul.actions li:first-child .button, .contact-links li:first-child .button {
background: var(--grad) padding-box, var(--grad) border-box; color: #fff !important; box-shadow: 0 6px 20px rgba(91, 140, 255, 0.45); }
.quick-nav ul.actions li:first-child .button:hover, .contact-links li:first-child .button:hover { box-shadow: 0 10px 28px rgba(122, 92, 255, 0.55); filter: brightness(1.08); }
/* ---- Cards: gradient top edge + glow on hover ---- */
.cards .card, .more {
background: var(--grad-line) top left / 100% 3px no-repeat, var(--card);
transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.cards .card:hover { box-shadow: 0 14px 34px rgba(91, 140, 255, 0.22), var(--shadow); }
.cards .card .icon { box-shadow: 0 6px 16px rgba(91, 140, 255, 0.35); }
.cards .card .tech-img { transition: transform 0.25s ease, filter 0.25s ease; }
.cards .card:hover .tech-img { transform: scale(1.12); filter: drop-shadow(0 4px 10px rgba(91, 140, 255, 0.5)); }
.items.style1 > * > .inner { background: linear-gradient(var(--surface), var(--surface)) padding-box; border: 1px solid transparent; }
.items.style1 > * > .inner:hover { background: linear-gradient(var(--card), var(--card)) padding-box, var(--grad) border-box; box-shadow: 0 14px 34px rgba(91, 140, 255, 0.2); }
.project .year { background: var(--grad); color: #fff; }
.tech-row li:hover img, .project .tech li:hover img, .more-tools li:hover img { filter: drop-shadow(0 3px 8px rgba(91, 140, 255, 0.6)); }
.more-tools li { transition: transform 0.15s ease, box-shadow 0.2s ease; }
.more-tools li:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(91, 140, 255, 0.25); }
.tags li { background: linear-gradient(135deg, rgba(43, 196, 217, 0.16), rgba(122, 92, 255, 0.16)); }
/* ---- Sticky nav + footer: gradient edges ---- */
.sticky-nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), var(--violet), transparent); opacity: 0.8; }
.sticky-nav a::after { background: var(--grad-line); }
footer.wrapper.style1 { background: var(--grad-line) top left / 100% 2px no-repeat, radial-gradient(40rem 14rem at 50% 0%, var(--glow-b), transparent 70%), var(--footer-bg); }
/* ---- Scroll progress bar (element created in custom.js) ---- */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200; background: var(--grad-line); box-shadow: 0 0 10px rgba(91, 140, 255, 0.7); pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
.button::after { display: none; }
.button, .cards .card, .more-tools li { transition: none; }
}
/* Very narrow screens: keep the sticky nav on one line */
@media screen and (max-width: 480px) {
.sticky-nav ul { flex-wrap: nowrap; padding-right: 3.2rem; }
.sticky-nav a { padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.62rem; letter-spacing: 0.03rem; }
.sticky-nav a::after { left: 0.5rem; right: 0.5rem; }
}
/* Hero background lives on the full-height banner (not on .content, which is vertically centred and
leaves bands above/below on tall or wide screens). The right half is covered by the image. */
.banner .content { background: none; }
.banner.style1 {
background-color: var(--sec-hero);
background-image:
radial-gradient(36rem 30rem at 0% 0%, var(--glow-a), transparent 70%),
radial-gradient(34rem 28rem at 45% 100%, var(--glow-b), transparent 70%),
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: auto, auto, 36px 36px, 36px 36px;
}
@media screen and (orientation: portrait) {
.banner.style1 {
background-image:
radial-gradient(30rem 24rem at 0% 100%, var(--glow-a), transparent 70%),
radial-gradient(30rem 24rem at 100% 100%, var(--glow-b), transparent 70%),
linear-gradient(var(--grid) 1px, transparent 1px),
linear-gradient(90deg, var(--grid) 1px, transparent 1px);
background-size: auto, auto, 36px 36px, 36px 36px;
}
}
/* Tighter vertical spacing between sections (about half of before) */
section.wrapper.style1 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
section.wrapper.style1 > .inner { padding-top: 3rem; padding-bottom: 1.5rem; }
h2.sub { margin-top: 3rem; }
@media screen and (max-width: 736px) {
section.wrapper.style1 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
section.wrapper.style1 > .inner { padding-top: 2rem; padding-bottom: 1rem; }
h2.sub { margin-top: 2.5rem; }
}
/* =====================================================================
Light mode polish
===================================================================== */
:root:not([data-theme="dark"]) {
--bg: #f6f8fc;
--surface: #eaf0f8;
--card: #ffffff;
--ink: #0f172a;
--muted: #55637a;
--dot: rgba(15, 23, 42, 0.13);
--grid: rgba(15, 23, 42, 0.06);
--sec-portfolio: #f0f4fb;
--sec-contact: #e0e9f7;
--glow-a: rgba(43, 196, 217, 0.30);
--glow-b: rgba(122, 92, 255, 0.22);
--line: rgba(15, 23, 42, 0.10);
--shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 28px rgba(60, 80, 140, 0.13);
}
:root:not([data-theme="dark"]) .cards .card,
:root:not([data-theme="dark"]) .more { box-shadow: var(--shadow), 0 0 0 1px rgba(15, 23, 42, 0.05); }
:root:not([data-theme="dark"]) .items.style1 > * > .inner { background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0.10)) border-box; box-shadow: var(--shadow); }
:root:not([data-theme="dark"]) .items.style1 > * > .inner:hover { background: linear-gradient(#ffffff, #ffffff) padding-box, var(--grad) border-box; }
:root:not([data-theme="dark"]) .tags li { color: #0e5f6d; }
:root:not([data-theme="dark"]) .more-tools li { background: var(--bg); box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08); }
:root:not([data-theme="dark"]) .sticky-nav { background: rgba(255, 255, 255, 0.82); }
:root:not([data-theme="dark"]) .tech-row li img, :root:not([data-theme="dark"]) .project .tech li img { filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.15)); }
/* Primary buttons: #contact/#skills outline rule (id selector) must not win over the filled style */
#contact .contact-links li:first-child .button,
#skills .button.primary {
background: var(--grad) padding-box, var(--grad) border-box;
color: #fff !important;
box-shadow: 0 6px 20px rgba(91, 140, 255, 0.45);
}
#contact .contact-links li:first-child .button:hover { color: #fff !important; box-shadow: 0 10px 28px rgba(122, 92, 255, 0.55); filter: brightness(1.08); }
#contact .contact-links li:first-child .button .icon,
#contact .contact-links li:first-child .button .icon:before { color: #fff; }