/* Motion & polish layer for the Mahdi template (2026).
Loaded after style.css / colors/purple.css; remove the in modules/head.tpl to switch it off. */
/* colors/purple.css (merged 2026-10-06 so it costs no request; the theme's accent colour) */
.bg-primary,
.btn-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.nav-pills .nav-link.active,
.pagination li a:hover,
.pagination .active a,
#preloader #status .spinner > div,
.social-icon li a:hover,
.back-to-top:hover,
.section-title .titles .title.title-line:after,
.section-title .titles .title.title-line:before,
.bg-modern.bg-animation-right:after,
.service-wrapper:hover:after,
.portfolioFilter li a:hover,
.portfolioFilter li a.active,
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span,
.sidebar .widget .tagcloud > a:hover {
background-color: #662e9b !important;
}
.text-primary,
.btn-outline-primary,
.page-next-level .page-next li a:hover,
.navbar-custom .navbar-nav .nav-item .nav-link:hover,
.navbar-custom .navbar-nav .nav-item .nav-link:active,
.navbar-custom .navbar-nav .nav-item.active .nav-link,
.navbar-custom .navbar-nav .dropdown .dropdown-item:hover,
.navbar-custom .navbar-nav .dropdown .dropdown-item:focus,
.navbar-custom .navbar-nav.navbar-nav-link .nav-item .nav-link:hover,
.navbar-custom .navbar-nav.navbar-nav-link .nav-item .nav-link:active,
.navbar-custom .navbar-nav.navbar-nav-link.active .nav-link,
.nav-sticky.navbar-custom .navbar-nav .nav-item .nav-link:hover,
.nav-sticky.navbar-custom .navbar-nav .nav-item .nav-link:active,
.nav-sticky.navbar-custom .navbar-nav .nav-item.active .nav-link .nav-link,
.interests-desc:hover .icon,
.service-wrapper:hover .content .title,
.service-wrapper:hover .big-icon .icons,
.timeline-page .timeline-item .event:hover .title,
.portfolio-box .portfolio-box-img .overlay-work .work-content .work-icon:hover,
.portfolio-box .gallary-title .title:hover,
.blog-post .content .title:hover,
.blog-post .content a:hover,
.sidebar .widget .catagories li a:hover,
.sidebar .widget .post-recent .post-recent-content a:hover,
.comment-area .media-list .media .media-body a:hover {
color: #662e9b !important;
}
.btn-primary,
.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.nav-pills .nav-link.active,
.pagination li a:hover,
.pagination .active a,
.social-icon li a:hover,
.section-title .titles span:before,
.section-title .titles span:after,
.owl-theme .owl-controls .owl-page span {
border-color: #662e9b !important;
}
a.text-primary:hover,
a.text-primary:focus {
color: #4c2274 !important;
}
.btn-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
box-shadow: 0 3px 5px 0 rgba(102, 46, 155, 0.3);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary.focus {
background-color: #4c2274 !important;
border-color: #4c2274 !important;
}
/* self-hosted fonts (OFL, see fonts/*-OFL.txt / Roboto-LICENSE.txt) */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/montserrat-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/montserrat-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
--mm-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--mm-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
--mm-ink: #0d0a1f;
--mm-ink-2: #170e33;
--mm-violet: #662e9b;
--mm-violet-2: #8b5cf6;
--mm-lilac: #c4b5fd;
--mm-cyan: #22d3ee;
--mm-pink: #f0abfc;
--mm-grad: linear-gradient(135deg, #8b5cf6 0%, #662e9b 55%, #4c1d95 100%);
--mm-grad-line: linear-gradient(90deg, #8b5cf6, #22d3ee, #f0abfc);
}
/* ---------- scroll progress ---------- */
.mm-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 1000;
background: var(--mm-grad-line);
transform: scaleX(0);
transform-origin: 0 50%;
pointer-events: none;
}
/* ---------- preloader: same ink as the hero, so the hand-off is seamless ---------- */
#preloader {
background: var(--mm-ink) !important;
background-image: none !important;
}
#preloader #status .logo img { filter: brightness(0) invert(1); }
#preloader #status .spinner > div { background: linear-gradient(135deg, #8b5cf6, #22d3ee) !important; }
/* ---------- navbar ---------- */
.navbar-custom .mm-logo-light { display: none; }
.nav-sticky.navbar-custom {
background-color: rgba(255, 255, 255, 0.84) !important;
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
box-shadow: 0 1px 0 rgba(102, 46, 155, 0.08), 0 12px 30px -14px rgba(30, 20, 60, 0.25);
}
@media (min-width: 992px) {
.navbar-custom .navbar-nav-link .nav-link { position: relative; }
.navbar-custom .navbar-nav-link .nav-link::after {
content: "";
position: absolute;
left: 8px;
right: 8px;
bottom: 2px;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, #8b5cf6, #22d3ee);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.25s var(--mm-ease-out);
}
.navbar-custom .navbar-nav-link .nav-item:last-child .nav-link::after { right: 0; }
.navbar-custom .navbar-nav-link .nav-item.active .nav-link::after { transform: scaleX(1); }
.mm-home .navbar-custom:not(.nav-sticky) .mm-logo-dark { display: none; }
.mm-home .navbar-custom:not(.nav-sticky) .mm-logo-light { display: inline-block; }
.mm-home .navbar-custom:not(.nav-sticky) .navbar-nav.navbar-nav-link .nav-item .nav-link { color: rgba(233, 228, 255, 0.72) !important; }
.mm-home .navbar-custom:not(.nav-sticky) .navbar-nav.navbar-nav-link .nav-item.active .nav-link,
.mm-home .navbar-custom:not(.nav-sticky) .navbar-nav.navbar-nav-link .nav-item .nav-link:hover { color: #ffffff !important; }
.mm-home .navbar-custom:not(.nav-sticky) .social-icon li a {
color: #e9e4ff;
border-color: rgba(233, 228, 255, 0.35);
}
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
.navbar-custom .navbar-nav-link .nav-link:hover::after { transform: scaleX(1); }
}
/* phones/tablets: the home page keeps a dark glass bar over the dark hero */
@media (max-width: 991px) {
.mm-home .navbar-custom {
background-color: rgba(13, 10, 31, 0.86) !important;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
.mm-home .navbar-custom .mm-logo-dark { display: none; }
.mm-home .navbar-custom .mm-logo-light { display: inline-block; }
.mm-home .navbar-custom .navbar-toggler { color: #e9e4ff; }
.mm-home .navbar-custom .navbar-nav .nav-item .nav-link { color: rgba(233, 228, 255, 0.8) !important; }
.mm-home .navbar-custom .navbar-nav .nav-item.active .nav-link { color: #ffffff !important; }
.mm-home .navbar-custom .social-icon li a { color: #e9e4ff; border-color: rgba(233, 228, 255, 0.35); }
}
/* ---------- hero ---------- */
.mm-hero {
position: relative;
overflow: hidden;
isolation: isolate;
background: linear-gradient(160deg, var(--mm-ink) 0%, var(--mm-ink-2) 55%, #0a1330 100%) !important;
}
.mm-hero > .container { z-index: 1; }
.mm-hero .title-heading { position: relative; z-index: 2; }
.mm-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.mm-blob {
position: absolute;
border-radius: 50%;
will-change: transform;
}
.mm-blob-1 {
width: 620px; height: 620px; left: -180px; top: -200px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.55), rgba(139, 92, 246, 0) 68%);
animation: mm-drift-1 22s var(--mm-ease-in-out) infinite alternate;
}
.mm-blob-2 {
width: 560px; height: 560px; right: -160px; top: 4%;
background: radial-gradient(circle, rgba(34, 211, 238, 0.28), rgba(34, 211, 238, 0) 68%);
animation: mm-drift-2 26s var(--mm-ease-in-out) infinite alternate;
}
.mm-blob-3 {
width: 520px; height: 520px; left: 32%; bottom: -260px;
background: radial-gradient(circle, rgba(240, 171, 252, 0.22), rgba(240, 171, 252, 0) 68%);
animation: mm-drift-3 30s var(--mm-ease-in-out) infinite alternate;
}
@keyframes mm-drift-1 { to { transform: translate3d(140px, 90px, 0) scale(1.12); } }
@keyframes mm-drift-2 { to { transform: translate3d(-120px, 110px, 0) scale(0.9); } }
@keyframes mm-drift-3 { to { transform: translate3d(90px, -80px, 0) scale(1.15); } }
.mm-grid {
position: absolute;
inset: 0;
overflow: hidden;
-webkit-mask-image: radial-gradient(ellipse 70% 65% at 62% 42%, #000 25%, transparent 78%);
mask-image: radial-gradient(ellipse 70% 65% at 62% 42%, #000 25%, transparent 78%);
}
.mm-grid::before {
content: "";
position: absolute;
inset: -48px;
background-image:
linear-gradient(rgba(196, 181, 253, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(196, 181, 253, 0.08) 1px, transparent 1px);
background-size: 48px 48px;
animation: mm-grid-pan 14s linear infinite;
}
@keyframes mm-grid-pan { to { transform: translate3d(48px, 48px, 0); } }
.mm-spot {
position: absolute;
left: 0; top: 0;
width: 640px; height: 640px;
margin: -320px 0 0 -320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0) 62%);
opacity: 0;
transition: opacity 0.6s ease;
will-change: transform;
}
.mm-hero.is-pointer .mm-spot { opacity: 1; }
.mm-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
max-width: 100%;
padding: 6px 14px;
margin-bottom: 18px;
border-radius: 999px;
font: 500 12px/1.4 "Montserrat", sans-serif;
letter-spacing: 0.5px;
color: #e9e4ff;
background: rgba(139, 92, 246, 0.14);
border: 1px solid rgba(196, 181, 253, 0.28);
}
.mm-dot {
position: relative;
flex: none;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--mm-cyan);
}
.mm-dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--mm-cyan);
animation: mm-ping 2.4s var(--mm-ease-out) infinite;
}
@keyframes mm-ping {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(3); opacity: 0; }
}
.mm-hero .title-heading .heading {
color: #ffffff;
font-weight: 700;
letter-spacing: -0.5px;
}
.mm-hero .mm-rot-word {
background: linear-gradient(90deg, #c4b5fd 0%, #22d3ee 55%, #f0abfc 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent;
}
/* every phrase sits in the same grid cell, so the heading keeps the height of the longest one */
.mm-rot { display: inline-grid; vertical-align: top; }
.mm-rot-word { grid-area: 1 / 1; visibility: hidden; }
.mm-rot-word.is-on { visibility: visible; }
.mm-hero .title-heading p.text-muted {
color: rgba(226, 220, 245, 0.74) !important;
line-height: 1.85;
}
.mm-hero .mm-btn {
position: relative;
overflow: hidden;
padding: 11px 22px;
border: 0;
color: #ffffff;
background: var(--mm-grad) !important;
box-shadow: 0 12px 30px -12px rgba(139, 92, 246, 0.9);
transition: transform 0.16s var(--mm-ease-out), box-shadow 0.25s ease;
}
.mm-hero .mm-btn::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 55%; height: 100%;
background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0));
transform: translateX(-160%) skewX(-20deg);
transition: transform 0.7s var(--mm-ease-out);
pointer-events: none;
}
.mm-btn-ghost {
margin-left: 10px;
padding: 10px 21px;
color: #e9e4ff !important;
border: 1px solid rgba(196, 181, 253, 0.38);
background: rgba(255, 255, 255, 0.03);
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.16s var(--mm-ease-out);
}
.mm-hero .mm-btn:active,
.mm-btn-ghost:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
.mm-hero .mm-btn:hover { box-shadow: 0 16px 36px -12px rgba(139, 92, 246, 1); }
.mm-hero .mm-btn:hover::after { transform: translateX(280%) skewX(-20deg); }
.mm-btn-ghost:hover { color: #ffffff !important; background: rgba(139, 92, 246, 0.2); border-color: rgba(196, 181, 253, 0.65); }
}
/* portrait inside the tensor */
.mm-stage {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 440px;
}
.mm-tensor {
position: absolute;
left: 50%; top: 50%;
width: 600px; height: 600px;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 0;
}
.mm-avatar {
position: relative;
z-index: 1;
padding: 7px;
border-radius: 50%;
}
.mm-avatar::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 0deg, #8b5cf6, #22d3ee, #f0abfc, #8b5cf6);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
animation: mm-spin 9s linear infinite;
}
.mm-avatar::after {
content: "";
position: absolute;
inset: -36px;
z-index: -1;
border-radius: 50%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.42), rgba(139, 92, 246, 0) 66%);
animation: mm-breathe 5s ease-in-out infinite alternate;
}
.mm-avatar .avatar {
width: 216px;
height: 216px;
object-fit: cover;
border: 4px solid rgba(13, 10, 31, 0.9);
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.85);
}
@keyframes mm-spin { to { transform: rotate(360deg); } }
@keyframes mm-breathe { from { transform: scale(0.94); opacity: 0.75; } to { transform: scale(1.06); opacity: 1; } }
/* entrance once the preloader is gone */
.mm-js .mm-hero .title-heading > *,
.mm-js .mm-hero .mm-stage { opacity: 0; }
.mm-ready .mm-hero .title-heading > * { animation: mm-rise 0.9s var(--mm-ease-out) both; }
.mm-ready .mm-hero .title-heading > :nth-child(2) { animation-delay: 80ms; }
/* the heading is the page's largest paint: it slides in but is never transparent, so it counts as painted at once */
.mm-js .mm-hero .title-heading > h1 { opacity: 1; transform: translateY(18px); }
.mm-ready .mm-hero .title-heading > h1 { animation-name: mm-rise-t; }
@keyframes mm-rise-t { from { transform: translateY(18px); } to { transform: none; } }
.mm-ready .mm-hero .title-heading > :nth-child(4) { animation-delay: 160ms; }
.mm-ready .mm-hero .title-heading > :nth-child(5) { animation-delay: 240ms; }
.mm-ready .mm-hero .mm-stage { animation: mm-pop 1.2s var(--mm-ease-out) 100ms both; }
@keyframes mm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mm-pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@media (max-width: 767px) {
.mm-stage { min-height: 370px; }
.mm-tensor { width: 360px; height: 360px; }
.mm-avatar .avatar { width: 150px; height: 150px; }
.mm-eyebrow { font-size: 10.5px; letter-spacing: 0.2px; gap: 8px; padding: 5px 12px; }
.mm-hero .title-heading .heading { font-size: 28px; }
.mm-btn-ghost { margin-left: 6px; }
}
/* ---------- light sections: soft colour instead of flat grey ---------- */
#resume.bg-light {
background: radial-gradient(900px 420px at 8% 0%, rgba(139, 92, 246, 0.07), rgba(139, 92, 246, 0) 60%), #f8f9fc !important;
}
#news.bg-light {
background: radial-gradient(900px 420px at 92% 0%, rgba(34, 211, 238, 0.07), rgba(34, 211, 238, 0) 60%), #f8f9fc !important;
}
/* ---------- scroll reveals (JS adds .mm-reveal / .is-in) ---------- */
.mm-js .mm-reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s var(--mm-ease-out), transform 0.9s var(--mm-ease-out);
transition-delay: var(--mm-delay, 0ms);
}
.mm-js .mm-reveal[data-reveal="left"] { transform: translateX(-32px); }
/* side reveals must not widen the page before they play */
.mm-js #resume { overflow-x: hidden; overflow-x: clip; }
.mm-js .mm-reveal[data-reveal="right"] { transform: translateX(32px); }
/* the mask goes on the child: IntersectionObserver treats a fully clipped target as invisible */
.mm-js .mm-reveal[data-reveal="mask"] { opacity: 1; transform: none; }
.mm-js .mm-reveal[data-reveal="mask"] > * {
-webkit-clip-path: inset(0 0 100% 0 round 6px);
clip-path: inset(0 0 100% 0 round 6px);
transition: clip-path 1.1s var(--mm-ease-in-out), -webkit-clip-path 1.1s var(--mm-ease-in-out);
}
.mm-js .mm-reveal[data-reveal="line"] { opacity: 1; transform: none; }
.mm-js .mm-reveal.is-in { opacity: 1; transform: none; }
.mm-js .mm-reveal[data-reveal="mask"].is-in > * {
-webkit-clip-path: inset(0 0 0 0 round 6px);
clip-path: inset(0 0 0 0 round 6px);
}
.mm-js .section-title .titles span {
transform: scaleX(0.2);
transition: transform 1s var(--mm-ease-out) 0.15s;
}
.mm-js .section-title.is-in .titles span { transform: none; }
/* education timeline: the spine draws itself */
.mm-js .timeline-page::after {
transform: scaleY(0);
transform-origin: top center;
transition: transform 1.4s var(--mm-ease-in-out);
}
.mm-js .timeline-page.is-in::after { transform: scaleY(1); }
.timeline-page .timeline-item .event {
transition: transform 0.25s var(--mm-ease-out), box-shadow 0.25s ease, border-color 0.25s ease !important;
}
/* ---------- skill bars ---------- */
.progress-box .progress {
background: rgba(102, 46, 155, 0.09);
border-radius: 8px;
}
.progress-box .progress .progress-bar {
background: linear-gradient(90deg, #662e9b, #8b5cf6 60%, #22d3ee) !important;
box-shadow: 0 4px 14px -4px rgba(139, 92, 246, 0.75);
}
.mm-js .progress-box .progress .progress-bar {
animation: none !important;
-webkit-clip-path: inset(-40px 100% -40px 0);
clip-path: inset(-40px 100% -40px 0);
transition: clip-path 1.2s var(--mm-ease-out) 0.15s, -webkit-clip-path 1.2s var(--mm-ease-out) 0.15s;
}
.mm-js .progress-box.is-in .progress .progress-bar {
-webkit-clip-path: inset(-40px -40px -40px 0);
clip-path: inset(-40px -40px -40px 0);
}
.progress-box .progress .progress-value { font-variant-numeric: tabular-nums; }
.nav-pills .nav-link {
transition: background-color 0.2s ease, box-shadow 0.25s ease, color 0.2s ease, transform 0.16s var(--mm-ease-out);
}
.nav-pills .nav-link.active {
background: var(--mm-grad) !important;
box-shadow: 0 12px 26px -12px rgba(102, 46, 155, 0.85);
}
.nav-pills .nav-link:active { transform: scale(0.98); }
/* the photo beside "Work expertise" gets a slow scan line */
.cta-full .padding-less.img { overflow: hidden; }
.cta-full .padding-less.img::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(140deg, rgba(102, 46, 155, 0.35), rgba(13, 10, 31, 0.05) 60%);
pointer-events: none;
}
.cta-full .padding-less.img::after {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 40%;
background: linear-gradient(180deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 0.22), rgba(34, 211, 238, 0));
mix-blend-mode: screen;
transform: translateY(-100%);
animation: mm-scan 6s linear infinite;
pointer-events: none;
}
@keyframes mm-scan { to { transform: translateY(260%); } }
/* ---------- hobby cards ---------- */
.interests-desc {
overflow: hidden;
border: 1px solid rgba(102, 46, 155, 0.06);
transition: transform 0.25s var(--mm-ease-out), box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease !important;
}
.interests-desc::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0) 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.interests-desc .icon { transition: transform 0.25s var(--mm-ease-out), color 0.2s ease !important; }
@media (hover: hover) and (pointer: fine) {
.interests-desc:hover {
border-color: rgba(139, 92, 246, 0.25);
box-shadow: 0 18px 40px -18px rgba(102, 46, 155, 0.45) !important;
}
.interests-desc:hover::after { opacity: 1; }
.interests-desc:hover .icon { color: var(--mm-violet) !important; transform: scale(1.12) rotate(-6deg); }
}
/* ---------- blog cards ---------- */
.blog-post {
overflow: hidden;
transition: transform 0.3s var(--mm-ease-out), box-shadow 0.3s ease !important;
}
.blog-post img { transition: transform 0.8s var(--mm-ease-out); }
@media (hover: hover) and (pointer: fine) {
.blog-post:hover { transform: translateY(-6px); }
.blog-post:hover > img { transform: scale(1.05); }
}
/* ---------- footer ---------- */
.footer.bg-dark {
background: linear-gradient(180deg, #140d2b 0%, var(--mm-ink) 100%) !important;
}
.footer.bg-dark:not(.footer-bar) {
position: relative;
overflow: hidden;
}
@keyframes mm-sweep { to { transform: translateX(440%); } }
.footer-bar { border-top: 1px solid rgba(196, 181, 253, 0.08); }
.footer .social-icon li a {
transition: transform 0.2s var(--mm-ease-out), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
}
@media (hover: hover) and (pointer: fine) {
.footer .social-icon li a:hover,
.navbar-custom .social-icon li a:hover {
transform: translateY(-3px);
border-color: transparent !important;
box-shadow: 0 10px 22px -10px rgba(139, 92, 246, 0.9);
}
}
/* ---------- work expertise: zooming photo, rising data points, bars replay per tab ---------- */
.cta-full .padding-less.img.mm-has-kb { background-image: none !important; }
.mm-kb {
position: absolute;
inset: 0;
z-index: 0;
background-size: cover;
background-position: center;
animation: mm-kb 24s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes mm-kb {
from { transform: scale(1); }
to { transform: scale(1.12) translate3d(-2%, -1.5%, 0); }
}
.cta-full .padding-less.img::before { z-index: 1; }
.cta-full .padding-less.img::after { z-index: 2; }
.mm-bit {
position: absolute;
bottom: -8px;
z-index: 3;
width: 4px;
height: 4px;
border-radius: 50%;
background: #22d3ee;
box-shadow: 0 0 10px 2px rgba(34, 211, 238, 0.7);
opacity: 0;
animation-name: mm-bit;
animation-timing-function: linear;
animation-iteration-count: infinite;
pointer-events: none;
}
.mm-bit:nth-child(3n) { background: #f0abfc; box-shadow: 0 0 10px 2px rgba(240, 171, 252, 0.7); }
.mm-bit:nth-child(3n+1) { width: 3px; height: 3px; }
@keyframes mm-bit {
0% { transform: translate3d(0, 0, 0); opacity: 0; }
12% { opacity: 0.95; }
85% { opacity: 0.5; }
100% { transform: translate3d(0, var(--rise, -500px), 0); opacity: 0; }
}
.mm-js .progress-box.mm-reset,
.mm-js .progress-box.mm-reset .progress .progress-bar { transition: none !important; }
/* ---------- blog: floating wireframe cubes and tilting cards ---------- */
#news.mm-has-float { position: relative; overflow: hidden; }
#news.mm-has-float > .container { position: relative; z-index: 1; }
.mm-float {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.mm-cube {
position: absolute;
display: block;
width: 56px;
height: 56px;
color: rgba(139, 92, 246, 0.35);
animation: mm-float 16s var(--mm-ease-in-out) infinite alternate;
will-change: transform;
}
.mm-cube svg { display: block; width: 100%; height: 100%; }
.mm-cube:nth-child(1) { left: 4%; top: 14%; width: 64px; height: 64px; animation-duration: 17s; }
.mm-cube:nth-child(2) { left: 14%; bottom: 12%; width: 38px; height: 38px; color: rgba(34, 211, 238, 0.45); animation-duration: 13s; animation-delay: -4s; }
.mm-cube:nth-child(3) { right: 6%; top: 10%; width: 48px; height: 48px; animation-duration: 19s; animation-delay: -8s; }
.mm-cube:nth-child(4) { right: 16%; bottom: 18%; width: 72px; height: 72px; color: rgba(240, 171, 252, 0.4); animation-duration: 21s; animation-delay: -2s; }
.mm-cube:nth-child(5) { left: 46%; top: 6%; width: 30px; height: 30px; color: rgba(34, 211, 238, 0.4); animation-duration: 15s; animation-delay: -6s; }
.mm-cube:nth-child(6) { left: 58%; bottom: 6%; width: 42px; height: 42px; animation-duration: 18s; animation-delay: -10s; }
@keyframes mm-float {
from { transform: translate3d(0, 0, 0) rotate(0deg); }
to { transform: translate3d(18px, -28px, 0) rotate(24deg); }
}
@media (max-width: 767px) {
.mm-cube:nth-child(n+4) { display: none; }
}
.blog-post { position: relative; background-color: #ffffff; } /* opaque, so the floating cubes pass behind it */
.blog-post.mm-tilting { transition: transform 0.12s linear, box-shadow 0.3s ease !important; }
.blog-post::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.blog-post.mm-tilting::before { opacity: 1; }
.blog-post .content a .feather { transition: transform 0.25s var(--mm-ease-out); }
@media (hover: hover) and (pointer: fine) {
.blog-post:hover .content li:last-child a .feather { transform: translateX(3px); }
}
/* ---------- footer: wave, constellation, logo shine, words, icons, heartbeat ---------- */
.mm-wave {
position: relative;
height: 70px;
margin-top: -1px;
overflow: hidden;
background: #f8f9fc;
line-height: 0;
}
.mm-wave-layer {
position: absolute;
left: 0;
bottom: 0;
width: 200%;
height: 100%;
animation: mm-wave 18s linear infinite;
}
.mm-wave-back { fill: #8b5cf6; opacity: 0.18; animation-duration: 26s; }
.mm-wave-mid { fill: #22d3ee; opacity: 0.16; animation-duration: 19s; animation-direction: reverse; }
.mm-wave-front { fill: #140d2b; animation-duration: 13s; }
@keyframes mm-wave {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (max-width: 767px) {
.mm-wave { height: 44px; }
}
.mm-net {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.mm-foot-logo { position: relative; display: inline-block; line-height: 0; }
.mm-shine {
position: absolute;
inset: 0;
overflow: hidden;
-webkit-mask: url("../images/logo-light.svg") center / contain no-repeat;
mask: url("../images/logo-light.svg") center / contain no-repeat;
pointer-events: none;
}
.mm-shine i {
position: absolute;
top: -20%;
bottom: -20%;
left: 0;
width: 45%;
background: linear-gradient(100deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 0.95) 45%, rgba(240, 171, 252, 0.95) 55%, rgba(240, 171, 252, 0));
transform: translateX(-120%);
animation: mm-logo-shine 5.5s var(--mm-ease-in-out) infinite;
}
@keyframes mm-logo-shine {
0%, 55% { transform: translateX(-120%); }
85%, 100% { transform: translateX(340%); }
}
.mm-word { display: inline-block; }
.mm-js .footer .mm-reveal .mm-word {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s var(--mm-ease-out), transform 0.6s var(--mm-ease-out);
transition-delay: calc(var(--i) * 22ms + 200ms);
}
.mm-js .footer .mm-reveal.is-in .mm-word { opacity: 1; transform: none; }
.mm-js .footer .mm-reveal .social-icon li {
opacity: 0;
transform: translateY(12px) scale(0.9);
transition: opacity 0.5s var(--mm-ease-out), transform 0.6s var(--mm-ease-out);
}
.mm-js .footer .mm-reveal .social-icon li:nth-child(1) { transition-delay: 700ms; }
.mm-js .footer .mm-reveal .social-icon li:nth-child(2) { transition-delay: 770ms; }
.mm-js .footer .mm-reveal .social-icon li:nth-child(3) { transition-delay: 840ms; }
.mm-js .footer .mm-reveal .social-icon li:nth-child(4) { transition-delay: 910ms; }
.mm-js .footer .mm-reveal.is-in .social-icon li { opacity: 1; transform: none; }
.footer-bar { position: relative; overflow: hidden; }
.footer-bar::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 30%;
height: 1px;
background: linear-gradient(90deg, rgba(34, 211, 238, 0), #22d3ee, rgba(240, 171, 252, 0));
transform: translateX(-100%);
animation: mm-sweep 7s linear infinite;
pointer-events: none;
}
.footer-bar .mdi-heart {
display: inline-block;
animation: mm-heart 1.6s ease-in-out infinite;
}
@keyframes mm-heart {
0%, 60%, 100% { transform: scale(1); }
15% { transform: scale(1.28); }
30% { transform: scale(1); }
45% { transform: scale(1.16); }
}
/* ---------- the two tracks: every [data-track] element gets its accent ---------- */
[data-track="eng"] { --tk: #8b5cf6; --tk-deep: #5b21b6; --tk-soft: rgba(139, 92, 246, 0.1); }
[data-track="acad"] { --tk: #06b6d4; --tk-deep: #0e7490; --tk-soft: rgba(34, 211, 238, 0.13); }
/* ---------- highlight cards floating over the hero's lower edge ---------- */
.mm-stats {
position: relative;
z-index: 3;
margin-top: -150px;
}
.mm-stat {
position: relative;
height: 100%;
padding: 22px 20px 18px;
border-radius: 16px;
overflow: hidden;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 26px 50px -26px rgba(30, 20, 60, 0.45), 0 0 0 1px rgba(102, 46, 155, 0.07);
transition: transform 0.25s var(--mm-ease-out), box-shadow 0.25s ease;
}
.mm-stat::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: linear-gradient(90deg, var(--tk), rgba(240, 171, 252, 0.8), rgba(255, 255, 255, 0));
}
.mm-stat-tag,
.mm-track-tag,
.mm-tl-tag {
display: inline-block;
padding: 5px 9px;
border-radius: 999px;
font: 600 10px/1 "Montserrat", sans-serif;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--tk-deep);
background: var(--tk-soft);
}
.mm-stat-num {
margin: 12px 0 6px;
font: 700 40px/1.1 "Montserrat", sans-serif;
font-variant-numeric: tabular-nums;
color: #1e1b3a;
}
.mm-stat-num small { font-size: 18px; font-weight: 600; color: #8a90a2; }
.mm-stat-label { margin: 0; color: #6b7280; font-size: 13.5px; line-height: 1.55; }
@media (hover: hover) and (pointer: fine) {
.mm-stat:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -26px rgba(30, 20, 60, 0.55), 0 0 0 1px rgba(139, 92, 246, 0.2); }
}
@media (max-width: 767px) {
.mm-stats { margin-top: -90px; }
.mm-stat { padding: 16px 14px 14px; }
.mm-stat-num { font-size: 30px; }
.mm-stat-label { font-size: 12.5px; }
}
/* ---------- about: floating chips on the photo, quick facts ---------- */
.mm-about-photo { position: relative; }
.mm-float-chip {
position: absolute;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 13px;
border-radius: 999px;
font: 600 12px/1 "Montserrat", sans-serif;
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 16px 30px -14px rgba(30, 20, 60, 0.5);
animation: mm-bob 5s ease-in-out infinite alternate;
}
.mm-chip-eng { left: -14px; top: 12%; color: #5b21b6; }
.mm-chip-acad { right: -14px; bottom: 14%; color: #0e7490; animation-delay: -2.5s; }
.mm-js .mm-float-chip.mm-reveal { transition-delay: 0.9s; }
.mm-js .mm-chip-acad.mm-reveal { transition-delay: 1.1s; }
@keyframes mm-bob { from { transform: translateY(0); } to { transform: translateY(-10px); } }
@media (max-width: 767px) {
.mm-chip-eng { left: 8px; }
.mm-chip-acad { right: 8px; }
}
.mm-facts { margin: 18px 0 20px; }
.mm-facts li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
color: #6b7280;
font-size: 14px;
}
.mm-facts .feather { flex: none; color: var(--mm-violet); }
/* ---------- two tracks ---------- */
.mm-tracks {
overflow: hidden;
background:
radial-gradient(700px 360px at 10% 18%, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0) 60%),
radial-gradient(700px 360px at 90% 82%, rgba(34, 211, 238, 0.1), rgba(34, 211, 238, 0) 60%),
#fbfbfe;
}
.mm-track-row { position: relative; }
.mm-track {
position: relative;
height: 100%;
padding: 1.5px;
border-radius: 18px;
overflow: hidden;
isolation: isolate;
background: rgba(102, 46, 155, 0.1);
box-shadow: 0 30px 60px -36px rgba(30, 20, 60, 0.45);
}
.mm-track::before { /* a light arc that keeps orbiting the card's border */
content: "";
position: absolute;
left: 50%; top: 50%;
z-index: -1;
width: 250%;
aspect-ratio: 1;
background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0 60%, var(--tk) 76%, #f0abfc 86%, rgba(255, 255, 255, 0) 95%);
transform: translate(-50%, -50%) rotate(0deg);
animation: mm-orbit 7s linear infinite;
}
.mm-track[data-track="acad"]::before { animation-duration: 8.5s; animation-direction: reverse; }
@keyframes mm-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
.mm-track-inner {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 30px 28px 26px;
border-radius: 16.5px;
background: #ffffff;
}
.mm-track-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.mm-track-icon,
.mm-project-icon {
flex: none;
display: grid;
place-items: center;
border-radius: 14px;
}
.mm-track-icon {
width: 52px; height: 52px;
color: #ffffff;
background: linear-gradient(135deg, var(--tk), var(--tk-deep));
box-shadow: 0 14px 28px -12px var(--tk);
}
.mm-track-title { margin: 8px 0 2px; font-size: 22px !important; font-weight: 700; }
.mm-track-sub { margin: 0; color: #6b7280; font-size: 13.5px; }
.mm-track-list { list-style: none; margin: 18px 0; padding: 0; }
.mm-track-list li {
position: relative;
margin-bottom: 10px;
padding-left: 22px;
color: #4b5563;
font-size: 14.5px;
line-height: 1.6;
}
.mm-track-list li::before {
content: "";
position: absolute;
left: 2px; top: 0.62em;
width: 8px; height: 8px;
border-radius: 2px;
background: var(--tk);
transform: rotate(45deg);
}
.mm-track-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
font-weight: 600;
color: var(--tk-deep, #5b21b6) !important;
}
.mm-track-link .feather { transition: transform 0.25s var(--mm-ease-out); }
@media (hover: hover) and (pointer: fine) {
.mm-track-link:hover .feather { transform: translateX(4px); }
}
/* engineering visual: requests travelling API -> Redis -> SQL */
.mm-flow {
display: flex;
align-items: center;
padding: 14px 16px;
border-radius: 12px;
background: linear-gradient(135deg, #0f0b24, #1b1240);
}
.mm-flow-node {
position: relative;
flex: none;
padding: 8px 11px;
border-radius: 8px;
font: 600 11.5px/1 "Montserrat", sans-serif;
color: #e9e4ff;
border: 1px solid rgba(196, 181, 253, 0.35);
background: rgba(139, 92, 246, 0.18);
}
.mm-flow-node::after {
content: "";
position: absolute;
inset: -1px;
border-radius: 8px;
box-shadow: 0 0 16px rgba(139, 92, 246, 0.9);
opacity: 0;
animation: mm-glow 2.4s ease-in-out infinite;
}
.mm-flow-node:nth-of-type(2)::after { animation-delay: 0.6s; }
.mm-flow-node:nth-of-type(3)::after { animation-delay: 1.2s; }
@keyframes mm-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.mm-flow-link {
position: relative;
flex: 1;
height: 8px;
margin: 0 6px;
overflow: hidden;
background-image: repeating-linear-gradient(90deg, rgba(196, 181, 253, 0.4) 0 6px, rgba(196, 181, 253, 0) 6px 10px);
background-size: 100% 2px;
background-position: center;
background-repeat: no-repeat;
}
.mm-flow-link i {
position: absolute;
inset: 0;
background: radial-gradient(circle at 4px 50%, #22d3ee 0 3px, rgba(34, 211, 238, 0) 4px) no-repeat;
animation: mm-packet 1.6s linear infinite;
}
.mm-flow-link i + i {
background: radial-gradient(circle at 4px 50%, #f0abfc 0 3px, rgba(240, 171, 252, 0) 4px) no-repeat;
animation-delay: -0.8s;
}
.mm-flow-link ~ .mm-flow-link i { animation-delay: -0.4s; }
.mm-flow-link ~ .mm-flow-link i + i { animation-delay: -1.2s; }
@keyframes mm-packet { from { transform: translateX(-8px); } to { transform: translateX(100%); } }
/* research visual: frontal slices of a tensor drifting apart, ≈ a ∘ b ∘ c */
.mm-slices {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 66px;
padding: 10px 16px;
border-radius: 12px;
background: linear-gradient(135deg, #07202a, #0c2f3d);
color: rgba(165, 243, 252, 0.75);
font: 600 16px/1 "Montserrat", sans-serif;
}
.mm-slice-stack { position: relative; flex: none; width: 66px; height: 48px; }
.mm-slice {
position: absolute;
left: 16px; top: 7px;
width: 34px; height: 34px;
border: 1.5px solid rgba(165, 243, 252, 0.85);
border-radius: 3px;
background-color: rgba(34, 211, 238, 0.1);
background-image:
linear-gradient(rgba(165, 243, 252, 0.28) 1px, transparent 1px),
linear-gradient(90deg, rgba(165, 243, 252, 0.28) 1px, transparent 1px);
background-size: 8.5px 8.5px;
animation: mm-slice 4.8s var(--mm-ease-in-out) infinite;
}
.mm-slice:nth-child(1) { --x0: -6px; --y0: 6px; --x1: -14px; --y1: 12px; }
.mm-slice:nth-child(2) { --x0: 0px; --y0: 0px; --x1: 0px; --y1: 0px; }
.mm-slice:nth-child(3) { --x0: 6px; --y0: -6px; --x1: 14px; --y1: -12px; }
@keyframes mm-slice {
0%, 15%, 100% { transform: translate(var(--x0), var(--y0)); }
45%, 70% { transform: translate(var(--x1), var(--y1)); }
}
.mm-vec {
flex: none;
display: inline-block;
border-radius: 3px;
opacity: 0.35;
animation: mm-vec 4.8s var(--mm-ease-in-out) infinite;
}
.mm-vec-a { width: 6px; height: 32px; background: #c4b5fd; }
.mm-vec-b { width: 32px; height: 6px; background: #67e8f9; }
.mm-vec-c { width: 24px; height: 6px; background: #f0abfc; rotate: -40deg; }
@keyframes mm-vec {
0%, 15%, 100% { opacity: 0.35; transform: scale(0.9); }
45%, 70% { opacity: 1; transform: scale(1); }
}
/* the ∘ that joins the two cards */
.mm-track-join {
position: absolute;
left: 50%; top: 50%;
z-index: 2;
width: 56px; height: 56px;
margin: -28px 0 0 -28px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 14px 30px -12px rgba(30, 20, 60, 0.4);
font: 700 24px/1 "Montserrat", sans-serif;
}
.mm-track-join span {
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mm-track-join::before {
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 1.5px solid rgba(139, 92, 246, 0.4);
animation: mm-ring 2.6s var(--mm-ease-out) infinite;
}
@keyframes mm-ring { from { transform: scale(0.9); opacity: 0.9; } to { transform: scale(1.55); opacity: 0; } }
/* ---------- chips (skills, tech tags) ---------- */
.mm-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.mm-chips li {
padding: 9px 14px;
border-radius: 999px;
font: 500 13.5px/1.2 "Montserrat", sans-serif;
color: #3b2a63;
background: #ffffff;
border: 1px solid rgba(102, 46, 155, 0.14);
box-shadow: 0 6px 16px -10px rgba(30, 20, 60, 0.35);
transition: transform 0.2s var(--mm-ease-out), border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, opacity 0.45s var(--mm-ease-out);
}
.mm-chips li em { margin-left: 6px; font-style: normal; font-size: 11.5px; color: #8a90a2; }
.mm-chips-sm { gap: 7px; margin: 2px 0 18px; }
.mm-chips-sm li {
padding: 6px 11px;
font-size: 12px;
color: var(--tk-deep, #5b21b6);
background: var(--tk-soft, rgba(139, 92, 246, 0.08));
border-color: transparent;
box-shadow: none;
}
.mm-js .mm-chips.mm-reveal li {
opacity: 0;
transform: translateY(8px) scale(0.96);
transition-delay: calc(var(--i, 0) * 35ms);
}
.mm-js .mm-chips.mm-reveal.is-in li { opacity: 1; transform: none; }
.mm-js .mm-chips.mm-reset li { transition: none !important; }
@media (hover: hover) and (pointer: fine) {
.mm-chips li:hover,
.mm-js .mm-chips.mm-reveal.is-in li:hover {
transform: translateY(-2px);
color: #5b21b6;
border-color: rgba(139, 92, 246, 0.45);
box-shadow: 0 10px 20px -12px rgba(102, 46, 155, 0.6);
}
}
.cta-full .nav-pills .nav-link { padding-top: 6px; padding-bottom: 6px; }
/* ---------- experience & education timeline ---------- */
.mm-legend { display: flex; justify-content: center; gap: 20px; margin-top: 16px; }
.mm-legend span {
display: inline-flex;
align-items: center;
gap: 8px;
font: 600 12px/1 "Montserrat", sans-serif;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--tk-deep);
}
.mm-legend span::before {
content: "";
width: 10px; height: 10px;
border-radius: 50%;
background: var(--tk);
box-shadow: 0 0 0 4px var(--tk-soft);
}
.timeline-page.mm-tl::after { background: linear-gradient(180deg, #8b5cf6, #06b6d4) !important; }
.mm-tl .event {
text-align: left !important;
background: #ffffff;
border-left: 3px solid var(--tk) !important;
}
.mm-tl .event .title { font-weight: 600; }
.mm-tl .event .company { display: block; margin-top: 4px; color: var(--tk-deep); font-weight: 500; }
.mm-tl-tag { margin-bottom: 8px; }
.mm-tl-points { margin: 12px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; }
.mm-tl-points li { margin-bottom: 6px; }
.mm-tl-tech { margin: 10px 0 0; font-size: 12.5px; font-style: italic; color: #8a90a2; }
.mm-tl .duration { font-weight: 600; font-size: 13px; color: var(--tk-deep); }
.mm-tl .duration[data-track]::after {
border-color: var(--tk) !important;
background-color: #ffffff !important;
box-shadow: 0 0 0 4px var(--tk-soft);
transition: background-color 0.3s ease;
}
.mm-tl .timeline-item.is-passed .duration[data-track]::after { background-color: var(--tk) !important; }
.mm-tl .event:hover .title { color: var(--tk-deep) !important; }
.mm-tl-runner { /* a dot that travels down the spine as you scroll */
position: absolute;
left: 50%; top: 0;
z-index: 2;
width: 14px; height: 14px;
margin-left: -7px;
border-radius: 50%;
background: radial-gradient(circle, #ffffff 0 2px, #8b5cf6 3px);
box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.18), 0 0 22px rgba(139, 92, 246, 0.85);
opacity: 0;
transition: opacity 0.4s ease;
will-change: transform;
}
.mm-tl.is-in .mm-tl-runner { opacity: 1; }
@media (max-width: 767px) {
.mm-tl-runner { left: 1px; }
}
/* ---------- projects ---------- */
.mm-project {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
padding: 26px 24px 22px;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(102, 46, 155, 0.1);
box-shadow: 0 18px 40px -28px rgba(30, 20, 60, 0.4);
transition: transform 0.3s var(--mm-ease-out), box-shadow 0.3s ease, border-color 0.3s ease;
}
.mm-project::after {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: linear-gradient(90deg, var(--tk), #f0abfc, var(--tk));
transform: scaleX(0.25);
transform-origin: left center;
transition: transform 0.5s var(--mm-ease-out);
}
.mm-project::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), var(--tk-soft), rgba(255, 255, 255, 0) 65%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.mm-project.mm-tilting { transition: transform 0.12s linear, box-shadow 0.3s ease, border-color 0.3s ease; }
.mm-project.mm-tilting::before { opacity: 1; }
.mm-project-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mm-project-icon {
width: 46px; height: 46px;
border-radius: 12px;
color: var(--tk-deep);
background: var(--tk-soft);
transition: transform 0.3s var(--mm-ease-out);
}
.mm-project-metric {
padding: 7px 10px;
border-radius: 999px;
font: 700 12px/1 "Montserrat", sans-serif;
color: var(--tk-deep);
background: var(--tk-soft);
}
.mm-project-org { font: 600 11px/1.3 "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #636a7e; }
.mm-project-title { margin: 8px 0 10px; font-size: 18px; font-weight: 700; line-height: 1.35; }
.mm-project-desc { margin-bottom: 16px; color: #6b7280; font-size: 14px; line-height: 1.65; }
.mm-project .mm-chips-sm { margin: auto 0 0; }
.mm-project .mm-track-link { margin-top: 14px; }
@media (hover: hover) and (pointer: fine) {
.mm-project:hover { transform: translateY(-6px); border-color: rgba(139, 92, 246, 0.3); box-shadow: 0 28px 50px -28px rgba(30, 20, 60, 0.5); }
.mm-project:hover::after { transform: scaleX(1); }
.mm-project:hover .mm-project-icon { transform: rotate(-8deg) scale(1.08); }
}
/* ---------- awards: a dark band in the middle of the page ---------- */
.mm-awards {
position: relative;
overflow: hidden;
color: #ffffff;
background: linear-gradient(160deg, var(--mm-ink) 0%, var(--mm-ink-2) 60%, #0a1330 100%);
}
.mm-awards::before {
content: "";
position: absolute;
inset: -48px;
background-image:
linear-gradient(rgba(196, 181, 253, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(196, 181, 253, 0.05) 1px, transparent 1px);
background-size: 48px 48px;
animation: mm-grid-pan 16s linear infinite;
pointer-events: none;
}
.mm-awards::after {
content: "";
position: absolute;
left: -160px; top: -200px;
width: 560px; height: 560px;
border-radius: 50%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0) 68%);
animation: mm-drift-1 24s var(--mm-ease-in-out) infinite alternate;
pointer-events: none;
}
.mm-awards > .container { position: relative; z-index: 1; }
.mm-awards .section-title .title { color: #ffffff; }
.mm-awards .section-title p.text-muted { color: rgba(226, 220, 245, 0.7) !important; }
.mm-award {
position: relative;
height: 100%;
padding: 28px 20px 24px;
border-radius: 16px;
overflow: hidden;
text-align: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(196, 181, 253, 0.16);
transition: transform 0.3s var(--mm-ease-out), border-color 0.3s ease, background-color 0.3s ease;
}
.mm-award::before { /* a sheen that crosses each card now and then */
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 40%;
background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0));
transform: translateX(-120%) skewX(-18deg);
animation: mm-sheen 7s var(--mm-ease-in-out) infinite;
pointer-events: none;
}
.mm-awards .row > div:nth-child(2) .mm-award::before { animation-delay: 0.5s; }
.mm-awards .row > div:nth-child(3) .mm-award::before { animation-delay: 1s; }
.mm-awards .row > div:nth-child(4) .mm-award::before { animation-delay: 1.5s; }
@keyframes mm-sheen { 0%, 60% { transform: translateX(-120%) skewX(-18deg); } 90%, 100% { transform: translateX(320%) skewX(-18deg); } }
.mm-award-icon {
display: grid;
place-items: center;
width: 56px; height: 56px;
margin: 0 auto 14px;
border-radius: 50%;
font-size: 28px;
color: #fde68a;
background: radial-gradient(circle, rgba(253, 230, 138, 0.22), rgba(253, 230, 138, 0.04));
box-shadow: 0 0 0 1px rgba(253, 230, 138, 0.25);
animation: mm-bob 4s ease-in-out infinite alternate;
}
.mm-award[data-track="acad"] .mm-award-icon {
color: #67e8f9;
background: radial-gradient(circle, rgba(103, 232, 249, 0.22), rgba(103, 232, 249, 0.04));
box-shadow: 0 0 0 1px rgba(103, 232, 249, 0.3);
}
.mm-award-rank {
font: 700 34px/1.1 "Montserrat", sans-serif;
font-variant-numeric: tabular-nums;
background: linear-gradient(90deg, #fde68a, #f0abfc);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mm-award-of { margin: 4px 0 10px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: rgba(226, 220, 245, 0.6); }
.mm-award-title { margin: 0; color: #ffffff; font-size: 15px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
.mm-award:hover { transform: translateY(-5px); border-color: rgba(253, 230, 138, 0.4); background-color: rgba(255, 255, 255, 0.07); }
}
/* ---------- footer contact ---------- */
.mm-foot-mail {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
padding: 8px 16px;
border-radius: 999px;
font-size: 14px;
color: #e9e4ff !important;
border: 1px solid rgba(196, 181, 253, 0.3);
background: rgba(139, 92, 246, 0.12);
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.16s var(--mm-ease-out);
}
.mm-foot-mail:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
.mm-foot-mail:hover { background: rgba(139, 92, 246, 0.25); border-color: rgba(196, 181, 253, 0.55); }
}
/* ================= round 4: skills orbit, richer timeline & skills motion, blog and article ================= */
/* ---------- skills panel: the stack in orbit (replaces the stock photo) ---------- */
.cta-full .container-fluid .padding-less.img.mm-orbit-col {
background: radial-gradient(120% 80% at 30% 18%, #2a1860 0%, #140d2f 52%, #0a0f24 100%);
}
.mm-orbit {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
}
.mm-orbit::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(196, 181, 253, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(196, 181, 253, 0.06) 1px, transparent 1px);
background-size: 40px 40px;
-webkit-mask-image: radial-gradient(circle at 50% 46%, #000 20%, transparent 72%);
mask-image: radial-gradient(circle at 50% 46%, #000 20%, transparent 72%);
}
.mm-orbit-glow {
position: absolute;
left: 15%; right: 15%; top: 46%;
aspect-ratio: 1;
margin-top: -35%;
border-radius: 50%;
background: radial-gradient(circle, rgba(139, 92, 246, 0.38), rgba(139, 92, 246, 0) 65%);
animation: mm-breathe 6s ease-in-out infinite alternate;
}
.mm-orbit-stage {
position: absolute;
left: 50%; top: 46%;
width: min(72%, 400px);
aspect-ratio: 1;
transform: translate(-50%, -50%);
}
.mm-ring {
position: absolute;
border-radius: 50%;
border: 1px dashed rgba(196, 181, 253, 0.22);
animation: mm-spin var(--spin) linear infinite;
transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.mm-ring-3 { inset: 0; --spin: 70s; --orb: #a78bfa; }
.mm-ring-2 { inset: 17%; --spin: 52s; --orb: #22d3ee; animation-direction: reverse; }
.mm-ring-1 { inset: 33%; --spin: 38s; --orb: #f0abfc; }
.mm-orb-slot {
position: absolute;
inset: 0;
transform: rotate(var(--a));
pointer-events: none;
}
.mm-orb {
position: absolute;
left: 50%; top: 0;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
white-space: nowrap;
font: 600 11.5px/1 "Montserrat", sans-serif;
color: #ece8ff;
background: rgba(20, 13, 43, 0.85);
border: 1px solid rgba(196, 181, 253, 0.28);
box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.8);
animation: mm-upright var(--spin) linear infinite;
transition: opacity 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease, color 0.5s ease;
}
.mm-ring-2 .mm-orb { animation-direction: reverse; }
.mm-orb::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--orb);
box-shadow: 0 0 8px var(--orb);
}
/* the badge cancels the ring's spin, so its label always stays level */
@keyframes mm-upright {
from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); }
to { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg)); }
}
.mm-orbit[data-focus] .mm-orb { opacity: 0.4; }
.mm-orbit[data-focus="all"] .mm-orb,
.mm-orbit[data-focus="outer"] .mm-ring-3 .mm-orb,
.mm-orbit[data-focus="middle"] .mm-ring-2 .mm-orb,
.mm-orbit[data-focus="inner"] .mm-ring-1 .mm-orb {
opacity: 1;
color: #ffffff;
border-color: var(--orb);
box-shadow: 0 0 22px -4px var(--orb), 0 8px 20px -10px rgba(0, 0, 0, 0.8);
}
.mm-orbit[data-focus="outer"] .mm-ring-3,
.mm-orbit[data-focus="middle"] .mm-ring-2,
.mm-orbit[data-focus="inner"] .mm-ring-1 {
border-style: solid;
border-color: rgba(196, 181, 253, 0.45);
box-shadow: 0 0 36px -12px var(--orb), inset 0 0 36px -18px var(--orb);
}
.mm-core {
position: absolute;
left: 50%; top: 50%;
width: 22%;
aspect-ratio: 1;
display: grid;
place-items: center;
border-radius: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle at 35% 30%, #3b2a7a, #140d2b 70%);
box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.3), 0 0 50px -6px rgba(139, 92, 246, 0.85);
perspective: 400px;
}
.mm-core::before {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
background: conic-gradient(from 0deg, #8b5cf6, #22d3ee, #f0abfc, #8b5cf6);
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
animation: mm-spin 6s linear infinite;
}
.mm-cube3d {
position: relative;
width: 36px; height: 36px;
transform-style: preserve-3d;
animation: mm-cube-rot 12s linear infinite;
}
.mm-cube3d i {
position: absolute;
inset: 0;
border: 1.5px solid rgba(165, 243, 252, 0.85);
background: rgba(34, 211, 238, 0.08);
box-shadow: inset 0 0 10px rgba(34, 211, 238, 0.3);
}
.mm-cube3d i:nth-child(1) { transform: translateZ(18px); }
.mm-cube3d i:nth-child(2) { transform: rotateY(180deg) translateZ(18px); }
.mm-cube3d i:nth-child(3) { transform: rotateY(90deg) translateZ(18px); }
.mm-cube3d i:nth-child(4) { transform: rotateY(-90deg) translateZ(18px); }
.mm-cube3d i:nth-child(5) { transform: rotateX(90deg) translateZ(18px); }
.mm-cube3d i:nth-child(6) { transform: rotateX(-90deg) translateZ(18px); }
@keyframes mm-cube-rot {
from { transform: rotateX(-24deg) rotateY(0deg); }
to { transform: rotateX(-24deg) rotateY(360deg); }
}
.mm-orbit-caption {
position: absolute;
left: 28px; top: 28px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 6px;
}
.mm-orbit-kicker {
font: 600 10.5px/1 "Montserrat", sans-serif;
letter-spacing: 1.6px;
text-transform: uppercase;
color: rgba(196, 181, 253, 0.75);
}
.mm-orbit-now { display: inline-block; font: 700 20px/1.2 "Montserrat", sans-serif; color: #ffffff; }
.mm-code {
position: absolute;
left: 24px; right: 24px; bottom: 24px;
z-index: 2;
padding: 12px 14px 14px;
border-radius: 12px;
background: rgba(12, 8, 30, 0.8);
border: 1px solid rgba(196, 181, 253, 0.18);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.85);
font: 11.5px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
color: #d6d0f5;
}
.mm-code-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.mm-code-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.mm-code-bar i:nth-child(2) { background: #febc2e; }
.mm-code-bar i:nth-child(3) { background: #28c840; }
.mm-code-bar span { margin-left: 8px; font: 500 11px/1 "Montserrat", sans-serif; color: rgba(196, 181, 253, 0.6); }
.mm-code-line {
display: block;
padding: 0;
overflow: hidden;
white-space: nowrap;
font: inherit;
color: inherit;
background: none;
}
.mm-code-line b { font-weight: 600; color: #c4b5fd; }
.mm-code-line em { font-style: normal; color: #67e8f9; }
.mm-code-line u { text-decoration: none; color: #f0abfc; }
.mm-code-line s { text-decoration: none; color: #fde68a; }
.mm-code-1 { animation: mm-type-1 9s steps(40) infinite; } /* motion.js sets steps() to each line's length */
.mm-code-2 { animation: mm-type-2 9s steps(40) infinite; }
.mm-code-2::after {
content: "";
display: inline-block;
width: 7px; height: 1.1em;
margin-left: 2px;
vertical-align: -2px;
background: #c4b5fd;
animation: mm-blink 1s steps(2) infinite;
}
@keyframes mm-type-1 {
0% { clip-path: inset(0 100% 0 0); opacity: 1; }
24% { clip-path: inset(0 0 0 0); }
88% { clip-path: inset(0 0 0 0); opacity: 1; }
95%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes mm-type-2 {
0%, 28% { clip-path: inset(0 100% 0 0); opacity: 1; }
50% { clip-path: inset(0 0 0 0); }
88% { clip-path: inset(0 0 0 0); opacity: 1; }
95%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
@keyframes mm-blink { to { visibility: hidden; } }
.mm-orbit:not(.is-live) *,
.mm-orbit:not(.is-live) *::before,
.mm-orbit:not(.is-live) *::after { animation-play-state: paused !important; }
/* a curved, slightly bent screen: the edge facing the content bows out and the panel turns away a little */
@media (min-width: 992px) {
.cta-full .container-fluid .padding-less.img.mm-orbit-col {
border-top-right-radius: 110px 50%;
border-bottom-right-radius: 110px 50%;
box-shadow: inset -2px 0 0 rgba(196, 181, 253, 0.4), 26px 0 60px -30px rgba(139, 92, 246, 0.65);
transform: perspective(1400px) rotateY(5deg);
transform-origin: left center;
}
.mm-code { right: 84px; }
}
/* below the lg grid the panel sits above the content instead of beside it; there the bottom edge curves */
@media (max-width: 991px) {
.cta-full .container-fluid .padding-less.img.mm-orbit-col {
position: relative !important;
height: 560px !important;
border-bottom-left-radius: 50% 70px;
border-bottom-right-radius: 50% 70px;
box-shadow: inset 0 -2px 0 rgba(196, 181, 253, 0.4), 0 26px 60px -30px rgba(139, 92, 246, 0.65);
}
.mm-code { bottom: 58px; }
}
@media (max-width: 768px) {
.cta-full .container-fluid .padding-less.img.mm-orbit-col { height: 540px !important; }
.mm-orbit-stage { top: 44%; }
.mm-code { font-size: 11px; left: 16px; right: 16px; bottom: 58px; }
.mm-orb { gap: 5px; padding: 5px 8px; font-size: 10px; }
}
/* ---------- experience & education: progress spine, focus, 3D entrance ---------- */
.timeline-page.mm-tl::after { background: rgba(102, 46, 155, 0.14) !important; }
.mm-tl-fill {
position: absolute;
left: 50%; top: 0;
z-index: 1;
width: 2px;
height: 95%;
margin-left: -1px;
background: linear-gradient(180deg, #8b5cf6, #06b6d4);
box-shadow: 0 0 12px rgba(139, 92, 246, 0.6);
transform: scaleY(0);
transform-origin: top center;
will-change: transform;
}
@media (max-width: 767px) {
.mm-tl-fill { left: 0; margin-left: 0; }
}
.mm-tl .event {
position: relative;
transition: transform 0.45s var(--mm-ease-out), box-shadow 0.45s ease, border-color 0.45s ease !important;
}
.mm-tl .timeline-item.is-active .event {
transform: translateY(-4px);
box-shadow: 0 26px 50px -28px rgba(30, 20, 60, 0.5), 0 0 0 1px var(--tk-soft);
}
.mm-tl .duration { transition: color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; }
.mm-tl .timeline-item.is-active .duration {
color: #ffffff;
border-color: transparent !important;
background: linear-gradient(135deg, var(--tk), var(--tk-deep));
box-shadow: 0 12px 24px -12px var(--tk);
}
.mm-js .mm-tl .mm-reveal[data-reveal="left"] { transform: perspective(900px) translateX(-40px) rotateY(12deg); }
.mm-js .mm-tl .mm-reveal[data-reveal="right"] { transform: perspective(900px) translateX(40px) rotateY(-12deg); }
.mm-js .mm-tl .mm-reveal.is-in[data-reveal] { transform: none; }
.mm-js .mm-tl .mm-reveal .mm-tl-event > *,
.mm-js .mm-tl .mm-reveal .mm-tl-points li {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s var(--mm-ease-out), transform 0.6s var(--mm-ease-out);
}
.mm-js .mm-tl .mm-reveal .mm-tl-points li { transform: translateX(-8px); }
.mm-js .mm-tl .mm-reveal.is-in .mm-tl-event > *,
.mm-js .mm-tl .mm-reveal.is-in .mm-tl-points li { opacity: 1; transform: none; }
.mm-js .mm-tl .mm-reveal.is-in .mm-tl-event > :nth-child(1) { transition-delay: 0.25s; }
.mm-js .mm-tl .mm-reveal.is-in .mm-tl-event > :nth-child(2) { transition-delay: 0.32s; }
.mm-js .mm-tl .mm-reveal.is-in .mm-tl-event > :nth-child(3) { transition-delay: 0.39s; }
.mm-js .mm-tl .mm-reveal.is-in .mm-tl-event > :nth-child(4) { transition-delay: 0.46s; }
.mm-js .mm-tl .mm-reveal.is-in .mm-tl-event > :nth-child(5) { transition-delay: 0.6s; }
.mm-js .mm-tl .mm-reveal.is-in .mm-tl-points li:nth-child(1) { transition-delay: 0.5s; }
.mm-js .mm-tl .mm-reveal.is-in .mm-tl-points li:nth-child(2) { transition-delay: 0.58s; }
.mm-js .mm-tl .mm-reveal.is-in .mm-tl-points li:nth-child(3) { transition-delay: 0.66s; }
.mm-js .mm-tl .mm-reveal.is-in .mm-tl-points li:nth-child(4) { transition-delay: 0.74s; }
@media (min-width: 768px) {
.mm-tl .mm-tl-event::before { /* connector from the spine to the card */
content: "";
position: absolute;
top: 17px;
width: 30px;
height: 2px;
transition: transform 0.5s var(--mm-ease-out) 0.35s;
}
.mm-tl .event-description-right.mm-tl-event::before {
left: -33px;
background: linear-gradient(90deg, var(--tk), var(--tk-soft));
transform-origin: left center;
}
.mm-tl .event-description-left.mm-tl-event::before {
right: -31px;
background: linear-gradient(270deg, var(--tk), var(--tk-soft));
transform-origin: right center;
}
.mm-js .mm-tl .mm-reveal:not(.is-in) .mm-tl-event::before { transform: scaleX(0); }
}
.mm-tl .duration[data-track]::before { /* a ring that pings when the scroll reaches an entry */
content: "";
position: absolute;
top: 12px;
width: 12px; height: 12px;
border-radius: 50%;
background: var(--tk);
opacity: 0;
pointer-events: none;
}
.mm-tl .date-label-left[data-track]::before { right: -37px; }
.mm-tl .duration-right[data-track]::before { left: -37px; }
@media (max-width: 767px) {
.mm-tl .duration[data-track]::before { left: -21px !important; right: auto !important; }
}
.mm-tl .timeline-item.is-passed .duration[data-track]::before { animation: mm-dot-ping 1s var(--mm-ease-out) 1; }
@keyframes mm-dot-ping { from { transform: scale(1); opacity: 0.6; } to { transform: scale(3.2); opacity: 0; } }
#resume .main-icon {
position: relative;
color: #ffffff;
border-color: transparent !important;
background: linear-gradient(135deg, #8b5cf6, #06b6d4) !important;
box-shadow: 0 14px 30px -10px rgba(139, 92, 246, 0.8);
}
#resume .main-icon::after {
content: "";
position: absolute;
inset: -6px;
border-radius: inherit;
border: 1.5px solid rgba(139, 92, 246, 0.45);
animation: mm-ring 2.6s var(--mm-ease-out) infinite;
}
/* ---------- skills & tools: sliding tab indicator, pane headings, chips that flip in ---------- */
.mm-has-ind { position: relative; }
.mm-has-ind .nav-item { position: relative; z-index: 1; }
.mm-pill-ind {
position: absolute;
left: 0; top: 0;
z-index: 0;
list-style: none;
border-radius: 8px;
background: var(--mm-grad);
box-shadow: 0 14px 28px -12px rgba(102, 46, 155, 0.85);
transition: transform 0.45s var(--mm-ease-in-out);
pointer-events: none;
}
.mm-has-ind .nav-link {
background-color: transparent !important;
border: 1px solid rgba(102, 46, 155, 0.12) !important;
transition: border-color 0.3s ease, background-color 0.2s ease !important;
}
.mm-has-ind .nav-link.active {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.mm-has-ind .nav-link .title { transition: color 0.3s ease; }
.mm-has-ind .nav-link.active .title { color: #ffffff !important; }
@media (hover: hover) and (pointer: fine) {
.mm-has-ind .nav-link:not(.active):hover { background-color: rgba(139, 92, 246, 0.06) !important; }
}
.mm-pane-head { margin-bottom: 18px; }
.mm-pane-count {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
font: 600 11px/1 "Montserrat", sans-serif;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #5b21b6;
background: rgba(139, 92, 246, 0.1);
}
.mm-pane-count b { font-size: 13px; }
.mm-pane-title { margin: 12px 0 6px; font-size: 20px !important; font-weight: 700; }
.mm-pane-desc { max-width: 520px; margin: 0; color: #6b7280; font-size: 14.5px; line-height: 1.6; }
.mm-pane-in .mm-pane-head > * { animation: mm-rise 0.6s var(--mm-ease-out) both; }
.mm-pane-in .mm-pane-head > :nth-child(2) { animation-delay: 60ms; }
.mm-pane-in .mm-pane-head > :nth-child(3) { animation-delay: 120ms; }
.mm-js .mm-chips.mm-reveal { perspective: 700px; }
.mm-js .mm-chips.mm-reveal li {
transform: translateY(14px) rotateX(-55deg) scale(0.96);
transform-origin: 50% 0;
}
#skills .mm-chips li::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
margin-right: 8px;
vertical-align: 2px;
border-radius: 50%;
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
}
/* ---------- blog: post grid, feature card ---------- */
/* DLE wraps the list in its own container (#dima-content.row on this install) */
.mm-post-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
margin: 34px 0 0;
}
.mm-post-grid > div.mm-single { grid-template-columns: 1fr; }
.mm-post-wrap { min-width: 0; }
.mm-post {
display: flex;
flex-direction: column;
height: 100%;
border-radius: 18px;
overflow: hidden;
background: #ffffff;
border: 1px solid rgba(102, 46, 155, 0.1);
box-shadow: 0 24px 50px -30px rgba(30, 20, 60, 0.45);
}
.mm-post-media {
position: relative;
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #ffffff;
border-right: 1px solid rgba(102, 46, 155, 0.08);
}
.mm-post-media img {
display: block;
width: 100%; height: 100%;
padding: 18px;
object-fit: contain;
transition: transform 0.8s var(--mm-ease-out);
}
.mm-post-media::after { /* a thin gradient rule that grows on hover */
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 3px;
background: linear-gradient(90deg, #8b5cf6, #22d3ee, #f0abfc);
transform: scaleX(0.2);
transform-origin: left center;
transition: transform 0.6s var(--mm-ease-out);
pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
.mm-post:hover .mm-post-media::after { transform: scaleX(1); }
}
.mm-post-cat {
position: absolute;
left: 16px; top: 16px;
z-index: 1;
padding: 6px 11px;
border-radius: 999px;
font: 600 11px/1 "Montserrat", sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
color: #ffffff;
background: rgba(13, 10, 31, 0.75);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.mm-post-body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px; }
.mm-post-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: #8a90a2; }
.mm-post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.mm-post-title { margin: 12px 0 10px; font-size: 21px !important; font-weight: 700; line-height: 1.35; }
.mm-post-title a { color: #1e1b3a; transition: color 0.2s ease; }
.mm-post-title a:hover { color: #5b21b6; }
.mm-post-excerpt {
display: -webkit-box;
margin-bottom: 18px;
overflow: hidden;
color: #6b7280;
font-size: 14.5px;
line-height: 1.7;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.mm-post-foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid rgba(102, 46, 155, 0.08);
}
.mm-post-author { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 "Montserrat", sans-serif; color: #3b2a63; }
.mm-post-author img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.mm-post-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #5b21b6 !important; }
.mm-post-more .feather,
.mm-article-back .feather { transition: transform 0.25s var(--mm-ease-out); }
@media (hover: hover) and (pointer: fine) {
.blog-post:hover .mm-post-media img { transform: scale(1.05); }
.mm-post:hover .mm-post-more .feather { transform: translateX(4px); }
.mm-article-back:hover .feather { transform: translateX(-4px); }
}
@media (min-width: 768px) {
.mm-single .mm-post { flex-direction: row; }
.mm-single .mm-post-media { flex: 0 0 48%; aspect-ratio: auto; min-height: 340px; }
.mm-single .mm-post-media img { padding: 30px; }
.mm-single .mm-post-body { padding: 36px 40px; }
.mm-single .mm-post-title { font-size: 28px !important; }
.mm-single .mm-post-excerpt { font-size: 15.5px; -webkit-line-clamp: 6; }
}
/* ---------- article page ---------- */
.mm-article { max-width: 880px; margin: 0 auto 40px; }
.mm-article-head {
position: relative;
overflow: hidden;
isolation: isolate;
padding: 44px 44px 58px;
border-radius: 22px;
color: #ffffff;
background: linear-gradient(150deg, #0d0a1f 0%, #1c1142 60%, #0a1a33 100%);
box-shadow: 0 30px 60px -30px rgba(30, 20, 60, 0.65);
}
.mm-article-head::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image:
linear-gradient(rgba(196, 181, 253, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(196, 181, 253, 0.06) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%);
mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 75%);
}
.mm-article-bg span { position: absolute; z-index: -1; border-radius: 50%; will-change: transform; }
.mm-article-bg span:nth-child(1) {
width: 420px; height: 420px; right: -120px; top: -170px;
background: radial-gradient(circle, rgba(139, 92, 246, 0.55), rgba(139, 92, 246, 0) 68%);
animation: mm-drift-2 20s var(--mm-ease-in-out) infinite alternate;
}
.mm-article-bg span:nth-child(2) {
width: 380px; height: 380px; left: -140px; bottom: -220px;
background: radial-gradient(circle, rgba(34, 211, 238, 0.32), rgba(34, 211, 238, 0) 68%);
animation: mm-drift-1 24s var(--mm-ease-in-out) infinite alternate;
}
.mm-article-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: rgba(226, 220, 245, 0.6); }
.mm-article-crumbs a { color: rgba(233, 228, 255, 0.85); }
.mm-article-crumbs a:hover { color: #ffffff; }
.mm-article-title { margin: 16px 0 20px; font-size: 38px; font-weight: 700; line-height: 1.2; letter-spacing: -0.5px; color: #ffffff; }
.mm-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font-size: 14px; color: rgba(226, 220, 245, 0.8); }
.mm-article-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.mm-article-author { font-weight: 600; color: #ffffff; }
.mm-article-author img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(196, 181, 253, 0.5); }
.mm-article-layout {
position: relative;
margin: -26px 18px 0;
padding: 44px 46px 36px;
border-radius: 20px;
background: #ffffff;
border: 1px solid rgba(102, 46, 155, 0.08);
box-shadow: 0 24px 50px -30px rgba(30, 20, 60, 0.35);
}
.mm-article-body { font-size: 17px; line-height: 1.85; color: #374151; }
.mm-article-body * { max-width: 100%; }
.mm-article-body p { margin-bottom: 1.2em; }
.mm-article-body img {
display: block;
width: auto;
height: auto;
margin: 6px auto 28px;
padding: 12px;
border-radius: 14px;
background: #ffffff;
border: 1px solid rgba(102, 46, 155, 0.08);
box-shadow: 0 18px 40px -22px rgba(30, 20, 60, 0.45);
}
.mm-article-body h2,
.mm-article-body h3,
.mm-article-body h4 { margin: 1.6em 0 0.6em; font-weight: 700; color: #1e1b3a; }
.mm-article-body a { color: #5b21b6; text-decoration: underline; text-underline-offset: 3px; }
.mm-article-body blockquote {
margin: 1.4em 0;
padding: 14px 18px;
border-left: 3px solid #8b5cf6;
border-radius: 0 12px 12px 0;
background: #f7f5ff;
color: #4b5563;
}
.mm-article-label {
display: inline-block;
margin-right: 12px;
font: 600 11px/1 "Montserrat", sans-serif;
letter-spacing: 1.4px;
text-transform: uppercase;
color: #8a90a2;
}
.mm-article-tags { display: flex; flex-wrap: wrap; align-items: center; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(102, 46, 155, 0.1); }
.mm-article-taglist { font-size: 0; }
.mm-article-taglist a {
display: inline-block;
margin: 4px 8px 4px 0;
padding: 8px 13px;
border-radius: 999px;
font: 500 13px/1 "Montserrat", sans-serif;
color: #5b21b6;
background: rgba(139, 92, 246, 0.08);
transition: background-color 0.2s ease, transform 0.2s var(--mm-ease-out);
}
.mm-article-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.mm-share {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 999px;
font: 600 13px/1 "Montserrat", sans-serif;
color: #3b2a63 !important;
background: #ffffff;
border: 1px solid rgba(102, 46, 155, 0.16);
cursor: pointer;
transition: transform 0.16s var(--mm-ease-out), background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mm-share i { font-size: 16px; }
.mm-share:active { transform: scale(0.97); }
.mm-share.is-done { color: #047857 !important; background: #ecfdf5; border-color: #a7f3d0; }
@media (hover: hover) and (pointer: fine) {
.mm-share:hover { background: rgba(139, 92, 246, 0.08); border-color: rgba(139, 92, 246, 0.35); }
.mm-article-taglist a:hover { background: rgba(139, 92, 246, 0.16); transform: translateY(-2px); }
}
.mm-author {
display: flex;
align-items: flex-start;
gap: 20px;
margin-top: 34px;
padding: 24px;
border-radius: 16px;
background: linear-gradient(135deg, #f7f5ff, #effcff);
border: 1px solid rgba(102, 46, 155, 0.1);
}
.mm-author-photo {
flex: none;
width: 76px; height: 76px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px rgba(139, 92, 246, 0.35);
}
.mm-author h4, .mm-author .mm-author-name { margin: 6px 0; font-size: 19px; font-weight: 700; color: #1f1937; }
.mm-author p { margin: 0 0 10px; color: #6b7280; font-size: 14.5px; line-height: 1.6; }
.mm-author-links { display: flex; flex-wrap: wrap; gap: 14px; }
.mm-author-links a { font-size: 14px; font-weight: 600; color: #5b21b6; }
.mm-article-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 600; color: #5b21b6 !important; }
.mm-js .mm-article-head > *,
.mm-js .mm-article-layout { opacity: 0; }
.mm-ready .mm-article-head > * { animation: mm-rise 0.8s var(--mm-ease-out) both; }
.mm-ready .mm-article-head > :nth-child(3) { animation-delay: 80ms; }
.mm-ready .mm-article-head > :nth-child(4) { animation-delay: 160ms; }
.mm-ready .mm-article-layout { animation: mm-rise 0.9s var(--mm-ease-out) 0.25s both; }
@media (max-width: 767px) {
.mm-article-head { padding: 30px 22px 44px; border-radius: 18px; }
.mm-article-title { font-size: 27px; }
.mm-article-layout { margin: -20px 0 0; padding: 28px 20px; }
.mm-article-body { font-size: 16px; }
.mm-author { flex-direction: column; }
}
/* ---------- SEO round: visible Persian name, language link, heading sizes after the H1/H2 fix ---------- */
.mm-hero .title-heading h1.heading { font-size: 42px !important; line-height: 1.3; }
@media (max-width: 767px) { .mm-hero .title-heading h1.heading { font-size: 30px !important; } }
.mm-about-name { font-size: 28px !important; font-weight: 600; }
.mm-fa-name,
.mm-foot-name span {
font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
font-weight: 500;
}
.mm-fa-name { display: inline-block; margin-inline-start: 8px; font-size: 0.7em; color: #8a90a2; }
@font-face { font-family: "Vazirmatn"; font-weight: 500; font-display: optional; src: url("/fa/fonts/vazirmatn-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
.mm-foot-name { margin: 0 0 14px; color: rgba(233, 228, 255, 0.85); font: 600 15px/1.4 "Montserrat", sans-serif; letter-spacing: 0.3px; }
.mm-foot-name span { color: rgba(233, 228, 255, 0.6); }
.mm-lang {
display: inline-flex;
align-items: center;
margin-inline-end: 14px;
padding: 4px 12px;
border-radius: 999px;
font: 600 13px/1.4 "Vazirmatn", Tahoma, sans-serif;
color: #3c4858;
border: 1px solid rgba(60, 72, 88, 0.3);
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.mm-lang:hover { color: #5b21b6; border-color: rgba(139, 92, 246, 0.5); background: rgba(139, 92, 246, 0.06); }
}
@media (min-width: 992px) {
.mm-home .navbar-custom:not(.nav-sticky) .mm-lang { color: #e9e4ff; border-color: rgba(233, 228, 255, 0.35); }
}
@media (max-width: 991px) {
.mm-lang { margin: 12px 0 0; }
.mm-home .navbar-custom .mm-lang { color: #e9e4ff; border-color: rgba(233, 228, 255, 0.35); }
}
/* ---------- experience & education, compact two-track layout (replaces the zig-zag timeline) ---------- */
.mm-xp { margin-top: 44px; }
.mm-xp-cols {
display: grid;
grid-template-columns: 1.35fr 1fr;
gap: 36px;
align-items: start;
}
.mm-xp-head {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 18px;
font: 700 17px/1.2 "Montserrat", sans-serif;
color: #1e1b3a;
text-transform: uppercase;
letter-spacing: 1px;
}
.mm-xp-head small {
margin-inline-start: auto;
font: 600 12px/1 "Montserrat", sans-serif;
letter-spacing: 0.5px;
text-transform: none;
color: var(--tk-deep);
background: var(--tk-soft);
padding: 6px 10px;
border-radius: 999px;
}
.mm-xp-icon {
display: grid;
place-items: center;
width: 34px; height: 34px;
border-radius: 10px;
color: #ffffff;
background: linear-gradient(135deg, var(--tk), var(--tk-deep));
box-shadow: 0 10px 22px -10px var(--tk);
}
.mm-xp-list {
position: relative;
margin: 0;
padding: 0 0 0 30px;
list-style: none;
}
.mm-xp-list::before { /* the spine sits in its own gutter, never under the cards */
content: "";
position: absolute;
left: 8px; top: 10px; bottom: 10px;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, var(--tk), rgba(139, 92, 246, 0.12));
transform-origin: top center;
}
.mm-xp-item { position: relative; margin-bottom: 14px; }
.mm-xp-dot {
position: absolute;
left: -30px; top: 20px;
width: 18px; height: 18px;
border-radius: 50%;
background: #ffffff;
border: 3px solid var(--tk);
box-shadow: 0 0 0 4px var(--tk-soft);
transition: transform 0.25s var(--mm-ease-out), box-shadow 0.25s ease, background-color 0.25s ease;
}
.mm-xp-card {
padding: 16px 18px 14px;
border-radius: 14px;
background: #ffffff;
border: 1px solid rgba(102, 46, 155, 0.08);
box-shadow: 0 16px 34px -26px rgba(30, 20, 60, 0.45);
transition: transform 0.25s var(--mm-ease-out), box-shadow 0.25s ease, border-color 0.25s ease;
}
.mm-xp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mm-xp-role { margin: 0; font: 700 16px/1.35 "Montserrat", sans-serif; color: #1e1b3a; }
.mm-xp-date {
flex: none;
font: 600 11.5px/1 "Montserrat", sans-serif;
color: var(--tk-deep);
background: var(--tk-soft);
padding: 6px 9px;
border-radius: 999px;
white-space: nowrap;
}
.mm-xp-org { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 6px; font-size: 13.5px; font-weight: 500; color: var(--tk-deep); }
.mm-xp-now {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 999px;
font: 600 10.5px/1.6 "Montserrat", sans-serif;
letter-spacing: 0.6px;
text-transform: uppercase;
color: #047857;
background: #ecfdf5;
}
.mm-xp-now::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: #10b981;
animation: mm-now 1.8s ease-in-out infinite;
}
@keyframes mm-now { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.mm-xp-sum { margin: 0; font-size: 14px; line-height: 1.6; color: #6b7280; }
.mm-xp-more {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 8px;
padding: 4px 0;
border: 0;
background: none;
cursor: pointer;
font: 600 12.5px/1 "Montserrat", sans-serif;
color: var(--tk-deep);
}
.mm-xp-more .feather { transition: transform 0.3s var(--mm-ease-out); }
.mm-xp-card.is-open .mm-xp-more .feather { transform: rotate(180deg); }
.mm-xp-detail { /* grid rows 0fr -> 1fr: the accordion case, where height has no transform equivalent */
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.35s var(--mm-ease-out);
}
.mm-xp-detail > div { overflow: hidden; min-height: 0; opacity: 0; transition: opacity 0.25s ease; }
.mm-xp-card.is-open .mm-xp-detail { grid-template-rows: 1fr; }
.mm-xp-card.is-open .mm-xp-detail > div { opacity: 1; }
.mm-xp-detail ul { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: #4b5563; }
.mm-xp-detail li { margin-bottom: 5px; }
.mm-xp-detail li::marker { color: var(--tk); }
.mm-xp-tech { margin: 6px 0 0; font-size: 12px; font-style: italic; color: #8a90a2; }
.mm-xp-focus {
margin: 6px 0 0 30px;
padding: 18px 20px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), rgba(139, 92, 246, 0.08));
border: 1px dashed rgba(6, 182, 212, 0.35);
}
.mm-xp-focus-kicker { font: 600 10.5px/1 "Montserrat", sans-serif; letter-spacing: 1.4px; text-transform: uppercase; color: #0e7490; }
.mm-xp-focus p { margin: 8px 0 10px; font-size: 14px; line-height: 1.6; color: #4b5563; }
@media (hover: hover) and (pointer: fine) {
.mm-xp-item:hover .mm-xp-card { transform: translateY(-3px); border-color: rgba(139, 92, 246, 0.22); box-shadow: 0 22px 40px -26px rgba(30, 20, 60, 0.55); }
.mm-xp-item:hover .mm-xp-dot { transform: scale(1.15); background: var(--tk); box-shadow: 0 0 0 6px var(--tk-soft); }
}
/* the template styles bare h3/h4 inside sections; keep these compact */
#resume .mm-xp-head { font-size: 16px !important; line-height: 1.2; } /* style.css sets h3 30px !important */
#resume .mm-xp-role { font-size: 15.5px !important; line-height: 1.35; } /* and h4 24px !important */
#resume .mm-xp-org, #resume .mm-xp-sum { margin-top: 0; }
/* the mobile switch: Industry | Academic */
.mm-xp-switch {
position: relative;
display: none;
grid-template-columns: 1fr 1fr;
max-width: 360px;
margin: 0 auto 24px;
padding: 4px;
border-radius: 999px;
background: #ffffff;
border: 1px solid rgba(102, 46, 155, 0.12);
box-shadow: 0 12px 26px -18px rgba(30, 20, 60, 0.45);
}
.mm-xp-switch button {
position: relative;
z-index: 1;
padding: 10px 12px;
border: 0;
border-radius: 999px;
background: none;
cursor: pointer;
font: 600 13.5px/1 "Montserrat", sans-serif;
color: #3b2a63;
transition: color 0.3s ease;
-webkit-tap-highlight-color: transparent;
}
.mm-xp-switch button b { margin-inline-start: 4px; font-size: 11.5px; opacity: 0.7; }
.mm-xp-switch button[aria-selected="true"] { color: #ffffff; }
.mm-xp-ind {
position: absolute;
top: 4px; bottom: 4px; left: 4px;
width: calc(50% - 4px);
border-radius: 999px;
background: linear-gradient(135deg, #8b5cf6, #5b21b6);
box-shadow: 0 10px 22px -10px rgba(139, 92, 246, 0.9);
transition: transform 0.4s var(--mm-ease-in-out), background 0.4s ease;
}
.mm-xp[data-view="acad"] .mm-xp-ind { transform: translateX(100%); background: linear-gradient(135deg, #06b6d4, #0e7490); }
@media (max-width: 991px) {
.mm-xp { margin-top: 30px; }
.mm-xp-switch { display: grid; }
.mm-xp-cols { display: block; }
.mm-xp-col { display: none; }
.mm-xp[data-view="eng"] .mm-xp-col[data-col="eng"],
.mm-xp[data-view="acad"] .mm-xp-col[data-col="acad"] { display: block; animation: mm-rise 0.45s var(--mm-ease-out) both; }
/* the switch shows which column is on; the heading stays for screen readers and the outline */
.mm-xp-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width: 575px) {
.mm-xp-top { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
.mm-xp-list { padding-left: 26px; }
.mm-xp-dot { left: -26px; width: 16px; height: 16px; }
.mm-xp-list::before { left: 7px; }
.mm-xp-focus { margin-left: 26px; }
}
/* entrance: the spine draws, then dots and cards follow one by one */
.mm-js .mm-xp-col .mm-xp-list::before { transform: scaleY(0); transition: transform 1.1s var(--mm-ease-in-out); }
.mm-js .mm-xp-col.is-in .mm-xp-list::before { transform: scaleY(1); }
.mm-js .mm-xp-col .mm-xp-item { opacity: 0; transform: translateX(-16px); transition: opacity 0.6s var(--mm-ease-out), transform 0.7s var(--mm-ease-out); transition-delay: calc(var(--i, 0) * 80ms + 150ms); }
.mm-js .mm-xp-col.is-in .mm-xp-item { opacity: 1; transform: none; }
.mm-js .mm-xp-col .mm-xp-dot { transform: scale(0.4); }
.mm-js .mm-xp-col.is-in .mm-xp-dot { transform: none; transition-delay: calc(var(--i, 0) * 80ms + 250ms); }
.mm-js .mm-xp-col .mm-xp-focus { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--mm-ease-out) 0.5s, transform 0.7s var(--mm-ease-out) 0.5s; }
.mm-js .mm-xp-col.is-in .mm-xp-focus { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
.mm-js .mm-xp-col.is-in .mm-xp-item:hover .mm-xp-dot { transform: scale(1.15); transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
.mm-xp-now::before { animation: none; }
.mm-js .mm-xp-col .mm-xp-list::before,
.mm-js .mm-xp-col .mm-xp-item,
.mm-js .mm-xp-col .mm-xp-dot,
.mm-js .mm-xp-col .mm-xp-focus { transform: none !important; transition: opacity 0.3s ease !important; }
.mm-xp-detail { transition: none; }
.mm-xp-col { animation: none !important; }
}
/* ---------- back to top ---------- */
.back-to-top {
border-radius: 10px !important;
background: var(--mm-grad) !important;
box-shadow: 0 12px 24px -10px rgba(102, 46, 155, 0.85);
transition: transform 0.2s var(--mm-ease-out), box-shadow 0.2s ease !important;
}
@media (hover: hover) and (pointer: fine) {
.back-to-top:hover { transform: translateY(-3px); }
}
/* ---------- reduced motion: keep the fades, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
.mm-blob,
.mm-grid::before,
.mm-dot::after,
.mm-avatar::before,
.mm-avatar::after,
.cta-full .padding-less.img::after,
.footer-bar::after,
.footer-bar .mdi-heart,
.mm-wave-layer,
.mm-shine i,
.mm-kb,
.mm-cube,
.mm-float-chip,
.mm-track::before,
.mm-flow-node::after,
.mm-flow-link i,
.mm-slice,
.mm-vec,
.mm-track-join::before,
.mm-awards::before,
.mm-awards::after,
.mm-award::before,
.mm-award-icon,
.mm-orbit-glow,
.mm-ring,
.mm-orb,
.mm-core::before,
.mm-cube3d,
.mm-code-1,
.mm-code-2,
.mm-code-2::after,
.mm-article-bg span,
#resume .main-icon::after,
.mm-tl .timeline-item.is-passed .duration[data-track]::before,
.mover { animation: none !important; }
.mm-orb { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); }
.mm-js .mm-tl .mm-reveal[data-reveal],
.mm-js .mm-tl .mm-reveal .mm-tl-event > *,
.mm-js .mm-tl .mm-reveal .mm-tl-points li { transform: none !important; }
.mm-pane-in .mm-pane-head > *,
.mm-ready .mm-article-head > *,
.mm-ready .mm-article-layout { animation: mm-fade 0.4s ease both !important; }
.mm-tl-runner { display: none; }
.mm-js .mm-chips.mm-reveal li { transform: none !important; }
.mm-bit { display: none; }
.mm-js .footer .mm-reveal .mm-word,
.mm-js .footer .mm-reveal .social-icon li { transform: none !important; transition: opacity 0.4s ease !important; }
.mm-ready .mm-hero .title-heading > *,
.mm-ready .mm-hero .mm-stage { animation: mm-fade 0.4s ease both !important; }
.mm-js .mm-reveal,
.mm-js .mm-reveal[data-reveal],
.mm-js .mm-reveal[data-reveal="mask"] > * {
transform: none !important;
-webkit-clip-path: none !important;
clip-path: none !important;
transition: opacity 0.4s ease !important;
}
.mm-js .section-title .titles span,
.mm-js .timeline-page::after { transform: none !important; transition: none !important; }
.mm-js .progress-box .progress .progress-bar { -webkit-clip-path: none !important; clip-path: none !important; transition: none !important; }
.mm-hero .mm-btn::after { display: none; }
}
@keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } }
/* ---------- Tensor Notes round: code, tables, figures, and Persian (RTL) posts ---------- */
.mm-article-body pre {
margin: 0 0 1.6em;
padding: 18px 20px;
overflow-x: auto;
border-radius: 14px;
background: #15112b;
border: 1px solid rgba(167, 139, 250, 0.18);
box-shadow: 0 18px 40px -26px rgba(30, 20, 60, 0.6);
direction: ltr;
text-align: left;
}
.mm-article-body pre code {
display: block;
padding: 0;
color: #e9e4ff;
background: none;
font: 13.5px/1.7 Consolas, "SFMono-Regular", Menlo, monospace;
white-space: pre;
}
.mm-article-body :not(pre) > code {
padding: 2px 6px;
border-radius: 6px;
color: #5b21b6;
background: rgba(139, 92, 246, 0.08);
font: 0.88em Consolas, "SFMono-Regular", Menlo, monospace;
direction: ltr;
unicode-bidi: isolate;
}
.mm-article-body table { display: block; overflow-x: auto; margin: 0 auto 1.6em; font-variant-numeric: tabular-nums; }
.mm-article-body th { color: #1e1b3a; font: 600 13px/1.4 "Montserrat", sans-serif; }
.mm-article-body tbody tr:nth-child(even) { background: #f7f5ff; }
.mm-article-body td { border-bottom: 1px solid rgba(102, 46, 155, 0.06); }
.mm-article-body ol, .mm-article-body ul { margin: 0 0 1.2em; padding-inline-start: 1.4em; }
.mm-article-body li { margin-bottom: 0.4em; }
.mm-article-body em { color: #6b7280; }
.mm-article-body p[style*="center"] em { display: inline-block; max-width: 600px; font-size: 14px; line-height: 1.6; }
.mm-rtl,
.mm-rtl .mm-article-body,
.mm-rtl .mm-post-excerpt,
.mm-rtl .mm-author p { font-family: "Vazirmatn", "Roboto", Tahoma, sans-serif; }
.mm-rtl h1, .mm-rtl h2, .mm-rtl h3, .mm-rtl h4,
.mm-rtl .mm-post-author,
.mm-rtl .mm-share,
.mm-rtl .mm-article-label,
.mm-rtl .mm-article-taglist a,
.mm-rtl .mm-article-body th { font-family: "Vazirmatn", "Montserrat", Tahoma, sans-serif; letter-spacing: 0; }
.mm-rtl .mm-article-title { line-height: 1.5; }
.mm-rtl .mm-article-body { line-height: 2.05; text-align: right; }
.mm-rtl .mm-article-body blockquote { border-left: 0; border-right: 3px solid #8b5cf6; border-radius: 12px 0 0 12px; }
.mm-rtl .mm-article-body table { direction: ltr; }
.mm-rtl .mm-article-label { margin-right: 0; margin-left: 12px; font-size: 12px; text-transform: none; }
.mm-rtl .mm-article-taglist a { margin: 4px 0 4px 8px; }
.mm-rtl .mm-article-back .feather,
.mm-rtl .mm-post-more .feather { transform: scaleX(-1); }
.mm-post.mm-rtl .mm-post-cat { left: auto; right: 16px; }
.mm-post.mm-rtl .mm-post-title { line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
.mm-post.mm-rtl:hover .mm-post-more .feather { transform: scaleX(-1) translateX(4px); }
}
@font-face { font-family: "Vazirmatn"; font-weight: 400; font-display: optional; src: url("/fa/fonts/vazirmatn-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Vazirmatn"; font-weight: 700; font-display: optional; src: url("/fa/fonts/vazirmatn-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
/* ---------- Lighthouse round: section titles are h2 and their items h3; keep the sizes they had as h4/h5/h6 ---------- */
.section-title h2.title.title-line { font-size: 24px !important; }
h3.designation { font-size: 16px !important; }
h3.mm-project-title { font-size: 18px !important; }
h3.mm-award-title { font-size: 16px !important; }
#interests h3.title { font-size: 16px !important; }
/* ---------- More notes (fed by rss.xml) ---------- */
.mm-more { margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(102, 46, 155, 0.1); }
.mm-more-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.mm-more-item {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px;
border-radius: 14px;
background: #faf9ff;
border: 1px solid rgba(102, 46, 155, 0.1);
transition: transform 0.2s var(--mm-ease-out), border-color 0.2s ease, background-color 0.2s ease;
}
.mm-more-item b { color: #1e1b3a; font-size: 15px; line-height: 1.45; }
.mm-more-item span { color: #8a90a2; font-size: 13px; }
.mm-more-item:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
.mm-more-item:hover { transform: translateY(-3px); border-color: rgba(139, 92, 246, 0.35); background: #ffffff; }
}
.mm-rtl .mm-more-item b { font-family: "Vazirmatn", "Montserrat", Tahoma, sans-serif; line-height: 1.7; }
/* ---------- Series bar (previous / next part), filled from js/series.json ---------- */
/* "Related reading" under an article (engine/modules/show.full.php, {mm-related}) */
.mm-related { margin-top: 34px; padding: 20px 22px; border-radius: 16px; background: #f7f5ff; border: 1px solid rgba(102, 46, 155, 0.1); }
.mm-related .mm-article-label { display: block; margin-bottom: 10px; }
.mm-related ul { margin: 0; padding-inline-start: 1.2em; }
.mm-related li { margin: 6px 0; line-height: 1.7; }
.mm-related a { color: #5b21b6 !important; font-weight: 600; text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mm-series-nav { margin-top: 34px; padding: 22px; border-radius: 16px; background: linear-gradient(135deg, #f7f5ff, #effcff); border: 1px solid rgba(102, 46, 155, 0.1); }
.mm-series-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.mm-series-head .mm-article-label { margin: 0; }
.mm-series-all { font-size: 14px; font-weight: 600; color: #5b21b6 !important; }
.mm-series-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mm-series-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 14px; background: #ffffff; border: 1px solid rgba(102, 46, 155, 0.12); transition: transform 0.2s var(--mm-ease-out), border-color 0.2s ease; }
.mm-series-card span { color: #8a90a2; font-size: 13px; font-weight: 600; }
.mm-series-card b { color: #1e1b3a; font-size: 15.5px; line-height: 1.45; }
.mm-series-next { text-align: end; }
.mm-series-card.is-soon { background: rgba(255, 255, 255, 0.6); border-style: dashed; }
.mm-series-card.is-soon b { color: #6b7280; }
.mm-series-card.is-empty { visibility: hidden; }
a.mm-series-card:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
a.mm-series-card:hover { transform: translateY(-3px); border-color: rgba(139, 92, 246, 0.4); }
}
@media (max-width: 575px) {
.mm-series-links { grid-template-columns: 1fr; }
.mm-series-card.is-empty { display: none; }
.mm-series-next { text-align: start; }
}
.mm-rtl .mm-series-card b, .mm-rtl .mm-series-card span, .mm-rtl .mm-series-all { font-family: "Vazirmatn", "Montserrat", Tahoma, sans-serif; }
.mm-rtl .mm-series-card b { line-height: 1.7; }
/* ---------- Persian section frame (category 8): navbar, footer, list heading ---------- */
.mm-nav-fa .navbar-nav .nav-link { font-family: "Vazirmatn", Tahoma, sans-serif; letter-spacing: 0; text-transform: none; font-size: 14px; }
.mm-foot-fa .mm-foot-name, .mm-foot-fa .mm-words { font-family: "Vazirmatn", Tahoma, sans-serif; letter-spacing: 0; }
.mm-foot-fa .mm-words { line-height: 2; }
.section-title h1.title.title-line { font-size: 28px !important; }
.section-title[lang="fa"] .title { font-family: "Vazirmatn", "Montserrat", Tahoma, sans-serif; letter-spacing: 0; }
.section-title[lang="fa"] p { font-family: "Vazirmatn", Tahoma, sans-serif; }
@media (max-width: 991px) {
.mm-nav-fa .navbar-collapse { direction: rtl; text-align: right; }
.mm-nav-fa .navbar-nav { align-items: flex-start; padding-right: 4px; }
}
/* ---------- research visual: t-SVD, X = U * S * V^T; violet and cyan are what a rank-k truncation keeps ---------- */
.mm-tsvd-link { display: block; margin: 4px 0 14px; text-decoration: none !important; }
.mm-tsvd-panel { display: block; padding: 12px 14px 10px; border-radius: 12px; background: linear-gradient(135deg, #07202a, #0c2f3d); transition: box-shadow 0.25s ease, transform 0.2s cubic-bezier(0.23, 1, 0.32, 1); }
.mm-tsvd { display: block; width: 100%; max-width: 330px; height: auto; margin: 0 auto; overflow: visible; }
.mm-tsvd-cap { display: block; margin-top: 4px; text-align: center; font: 500 12px/1.5 "Montserrat", "Vazirmatn", sans-serif; color: rgba(165, 243, 252, 0.72); }
.mm-tsvd-cap u { text-decoration-color: rgba(165, 243, 252, 0.45); text-underline-offset: 3px; color: #e0f2fe; }
.mm-tsvd-cap[dir="rtl"] { font-family: "Vazirmatn", Tahoma, sans-serif; }
.mm-tb-top { fill: rgba(34, 211, 238, 0.10); stroke: rgba(165, 243, 252, 0.85); stroke-width: 1; }
.mm-tb-side { fill: rgba(34, 211, 238, 0.18); stroke: rgba(165, 243, 252, 0.85); stroke-width: 1; }
.mm-tb-front { fill: rgba(34, 211, 238, 0.08); stroke: rgba(165, 243, 252, 0.9); stroke-width: 1.2; }
.mm-tbs-top, .mm-tbs-side, .mm-tbs-front { fill: rgba(34, 211, 238, 0.03); stroke: rgba(165, 243, 252, 0.6); stroke-width: 1; }
.mm-tb-line { fill: none; stroke: rgba(165, 243, 252, 0.45); stroke-width: 0.8; }
.mm-tk-front, .mm-tk-top { fill: #c4b5fd; stroke: #a78bfa; stroke-width: 1; }
.mm-tk-side { fill: #8b5cf6; stroke: #a78bfa; stroke-width: 1; }
.mm-tt-front, .mm-tt-top { fill: #a5f3fc; stroke: #22d3ee; stroke-width: 0.8; }
.mm-tt-side { fill: #22d3ee; stroke: #22d3ee; stroke-width: 0.8; }
.mm-td-front, .mm-td-top, .mm-td-side { fill: rgba(165, 243, 252, 0.16); stroke: rgba(165, 243, 252, 0.42); stroke-width: 0.8; }
.mm-tl { fill: #e0f2fe; font: italic 600 15px "Times New Roman", "STIX Two Text", serif; }
.mm-tl-sup { font-size: 10px; font-style: normal; }
.mm-top { fill: rgba(165, 243, 252, 0.85); font: 600 18px "Montserrat", sans-serif; }
.mm-tk-label { fill: #c4b5fd; font: italic 600 11px "Times New Roman", serif; }
/* X splits into its three factors, then the kept parts light up while the dropped tubes fade */
.mm-tf { transform-box: fill-box; }
.mm-tf-o1, .mm-tf-u, .mm-tf-o2, .mm-tf-s, .mm-tf-o3, .mm-tf-v { animation: mm-tsvd-in 7s cubic-bezier(0.77, 0, 0.175, 1) infinite; }
.mm-tf-u { animation-delay: 0.08s; }
.mm-tf-o2 { animation-delay: 0.16s; }
.mm-tf-s { animation-delay: 0.24s; }
.mm-tf-o3 { animation-delay: 0.32s; }
.mm-tf-v { animation-delay: 0.4s; }
.mm-tk, .mm-tt { animation: mm-tsvd-keep 7s ease-in-out infinite; }
.mm-td { animation: mm-tsvd-drop 7s ease-in-out infinite; }
@keyframes mm-tsvd-in { 0%, 8% { opacity: 0.15; transform: translateX(-9px); } 26%, 90% { opacity: 1; transform: none; } 100% { opacity: 0.15; transform: translateX(-9px); } }
@keyframes mm-tsvd-keep { 0%, 36% { opacity: 0.5; } 48%, 86% { opacity: 1; } 100% { opacity: 0.5; } }
@keyframes mm-tsvd-drop { 0%, 36% { opacity: 1; } 48%, 86% { opacity: 0.22; } 100% { opacity: 1; } }
.mm-tsvd-link:active .mm-tsvd-panel { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
.mm-tsvd-link:hover .mm-tsvd-panel { box-shadow: 0 0 0 1px rgba(165, 243, 252, 0.35), 0 14px 30px -18px rgba(34, 211, 238, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
.mm-tf, .mm-tk, .mm-tt, .mm-td { animation: none !important; opacity: 1; transform: none; }
.mm-td { opacity: 0.4; }
}
.mm-article-body h2[id] { scroll-margin-top: 90px; }
/* ---------- Skills: faint signature syntax of each tab's languages, behind the content ---------- */
.cta-full .cta-full-img-box { position: relative; isolation: isolate; }
.mm-glyphs {
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
pointer-events: none;
-webkit-mask-image: radial-gradient(ellipse 58% 52% at 60% 58%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.75) 50%, #000 75%);
mask-image: radial-gradient(ellipse 58% 52% at 60% 58%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.75) 50%, #000 75%);
}
.mm-glyph {
position: absolute;
white-space: nowrap;
font-family: "Cascadia Code", "JetBrains Mono", Consolas, "SFMono-Regular", Menlo, monospace;
font-weight: 500;
letter-spacing: 0.2px;
color: #3b2a63;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.mm-glyph.is-in { opacity: 0.17; transform: none; }
.mm-glyph.is-out { opacity: 0; transform: translateY(-6px); transition-duration: 0.22s; transition-delay: 0s !important; }
.mm-glyph.is-in.is-near { opacity: 0.5; transition-delay: 0s !important; transition-duration: 0.35s; }
.mm-glyph > span { display: inline-block; animation: mm-glyph-float 11s ease-in-out infinite alternate; }
.mm-glyph i { font-style: normal; }
.mm-glyph .k { color: #6d28d9; }
.mm-glyph .t { color: #0e7490; }
.mm-glyph .s { color: #be185d; }
.mm-glyph sub, .mm-glyph sup { font-size: 0.7em; }
@keyframes mm-glyph-float { from { transform: translate(0, 0); } to { transform: translate(6px, -5px); } }
@media (max-width: 767px) {
.mm-glyph-x { display: none; }
.mm-glyph.is-in { opacity: 0.13; }
}
@media (prefers-reduced-motion: reduce) {
.mm-glyph, .mm-glyph.is-out { transform: none; transition: opacity 0.2s ease; }
.mm-glyph > span { animation: none; }
}
/* open source sub-heading inside Selected Projects */
.mm-oss-title { margin: 0; font-size: 15px !important; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #636a7e; }
.mm-nav-cta .nav-link { color: #5b21b6 !important; }
/* ---------- Article fit on phones ----------
The article is a flex child of #dima-content.row; with min-width:auto it grew to the longest code line
(633px on a 375px phone) and the browser zoomed the whole page out. The template also forces
h1/h2/h3 to 42/36/30px with !important, which is far too big inside an article on a phone. */
#dima-content > .mm-article { flex: 0 0 100%; max-width: 100%; min-width: 0; }
.mm-article-layout, .mm-article-body { min-width: 0; }
.mm-article-body pre { max-width: 100%; }
.mm-article-title { font-size: 38px !important; }
.mm-article-body h2 { font-size: 27px !important; line-height: 1.35; }
.mm-article-body h3 { font-size: 21px !important; line-height: 1.4; }
.mm-article-body h4 { font-size: 18px !important; }
.mm-rtl .mm-article-body h2, .mm-rtl .mm-article-body h3 { line-height: 1.7; }
@media (max-width: 767px) {
.mm-article-title { font-size: 26px !important; line-height: 1.35; }
.mm-rtl .mm-article-title { line-height: 1.6; }
.mm-article-body h2 { font-size: 21px !important; }
.mm-article-body h3 { font-size: 18px !important; }
.mm-article-body h4 { font-size: 16.5px !important; }
.mm-article-body pre code { font-size: 12.5px; }
}
/* code blocks are plain (DLE's parser breaks ), so style the pre itself */
.mm-article-body pre { color: #e9e4ff; font: 13.5px/1.7 Consolas, "SFMono-Regular", Menlo, monospace; white-space: pre; tab-size: 4; }
@media (max-width: 767px) { .mm-article-body pre { font-size: 12.5px; } }
/* ---------- Article LCP: title, frame and cover are painted at once; they only slide in ---------- */
.mm-js .mm-article-head > *,
.mm-js .mm-article-layout { opacity: 1; transform: translateY(14px); }
.mm-ready .mm-article-head > *,
.mm-ready .mm-article-layout { animation-name: mm-rise-t; }
@media (prefers-reduced-motion: reduce) {
.mm-js .mm-article-head > *, .mm-js .mm-article-layout { transform: none; }
.mm-ready .mm-article-head > *, .mm-ready .mm-article-layout { animation: none !important; }
}
/* ---------- Section headings: the divider follows the heading's last line, also when it wraps on a phone ---------- */
.section-title .titles { position: relative; display: flex; flex-direction: column; align-items: center; margin-bottom: 24px; }
.section-title .titles .title.title-line { margin-bottom: 0 !important; }
.section-title .titles .title.title-line:before,
.section-title .titles .title.title-line:after { top: auto; bottom: 3px; }
.section-title .titles span { top: auto; bottom: 0; height: 0; }
.section-title .titles span:before,
.section-title .titles span:after { top: -12px; }
/* ---------- Hobbies: two compact columns on a phone; the drawn icons follow the theme colour ---------- */
.interests-desc svg.icon { color: inherit; }
@media (max-width: 575.98px) {
#interests .row + .row { margin-left: -6px; margin-right: -6px; }
#interests .row + .row > [class*="col-"] { margin-top: 12px !important; padding: 0 6px !important; }
#interests .interests-desc { padding: 11px 8px !important; height: calc(100% - 0px); display: flex; align-items: center; }
#interests .interests-desc .hobbies { width: 100%; }
#interests .hobbies > .rounded-pill { margin-right: 12px !important; flex: 0 0 auto; }
#interests .interests-desc .icon { width: 22px !important; height: 22px !important; }
#interests .interests-desc .hobbies:before { left: 37px; }
#interests h3.title { font-size: 13.5px !important; line-height: 1.35; }
}
/* ---------- Hero slideshow: three scenes on the tensor canvas, with tabs that show progress ---------- */
.mm-tensor { transition: opacity 0.22s ease; }
.mm-tensor.is-switching { opacity: 0; }
.mm-scenes { display: none; position: relative; z-index: 2; max-width: 360px; margin: 4px auto 0; text-align: center; }
.mm-js .mm-scenes { display: block; }
.mm-scene-tabs {
display: inline-flex; gap: 4px; padding: 4px;
border-radius: 999px;
background: rgba(13, 10, 31, 0.55);
border: 1px solid rgba(196, 181, 253, 0.16);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.mm-scene {
position: relative; overflow: hidden;
border: 0; border-radius: 999px;
padding: 8px 15px 10px;
background: transparent;
color: rgba(233, 228, 255, 0.6);
font: 600 12px/1 Montserrat, sans-serif; letter-spacing: 0.3px;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
}
.mm-scene.is-on { color: #ffffff; background: rgba(139, 92, 246, 0.24); }
.mm-scene:focus { outline: none; }
.mm-scene:focus-visible { box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.7); }
.mm-scene:active { transform: scale(0.97); }
.mm-scene-bar { position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(196, 181, 253, 0.14); overflow: hidden; }
.mm-scene:not(.is-on) .mm-scene-bar { opacity: 0; }
.mm-scene-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a78bfa, #22d3ee); transform-origin: 0 50%; transform: scaleX(0); }
.mm-scene-cap { min-height: 2.9em; margin: 10px auto 0; padding: 0 8px; font-size: 12.5px; line-height: 1.45; color: rgba(233, 228, 255, 0.68); transition: opacity 0.18s ease; }
.mm-scene-cap.is-out { opacity: 0; }
@media (hover: hover) and (pointer: fine) { .mm-scene:hover { color: #ffffff; } }
.mm-js .mm-hero .mm-scenes { opacity: 0; }
.mm-ready .mm-hero .mm-scenes { animation: mm-rise 0.9s var(--mm-ease-out) 300ms both; }
@media (max-width: 767px) {
.mm-stage { min-height: 360px; }
.mm-scenes { margin-top: -6px; }
.mm-scene { padding: 8px 13px 10px; font-size: 11.5px; }
.mm-scene-cap { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.mm-ready .mm-hero .mm-scenes { animation: mm-fade 0.4s ease both !important; }
.mm-tensor { transition: none; }
}
/* the 600px canvas overflows the 440px stage on wide screens; keep the tabs below its lowest figure */
@media (min-width: 768px) { .mm-scenes { margin-top: 84px; } }
@media (min-width: 768px) { .mm-scenes { max-width: 430px; } }
/* ---------- Footer section links ---------- */
.mm-foot-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 26px; font-size: 13.5px; }
.mm-foot-nav a { color: rgba(233, 228, 255, 0.72); transition: color 0.2s ease; }
.mm-foot-nav a:hover, .mm-foot-nav a:focus-visible { color: #ffffff; }
.mm-track-link + .mm-track-link { margin-left: 22px; }
.mm-rtl .mm-track-link + .mm-track-link, [dir="rtl"] .mm-track-link + .mm-track-link { margin-left: 0; margin-right: 22px; }
#about .mm-track-link.mt-3 { display: inline-flex; }
/* ---------- Accessibility round: readable small labels, links in text that do not rely on colour alone ---------- */
.mm-article-label, .mm-more-item span { color: #636b7d; }
.mm-article-body p a, .mm-article-body li a, .mm-article-body td a {
text-decoration: underline !important; /* the theme sets a { text-decoration: none !important } */
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* Article code blocks are (DLE's parser breaks ), which shares its class with the
home page's floating code card above; undo that card's positioning inside articles. */
.mm-article-body pre.mm-code {
position: static;
left: auto; right: auto; bottom: auto;
z-index: auto;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* ---------- Related reading under an article ---------- */
.mm-related { margin-top: 30px; padding: 18px 20px; border-radius: 14px; background: #faf9ff; border: 1px solid rgba(102, 46, 155, 0.1); }
.mm-related ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.mm-related li a { font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer-bar a { color: rgba(233, 228, 255, 0.8); }
/* ---------- Two language links in the navbar (Turkish edition, 2026-10-06) ----------
English pages show FA + TR, Persian pages English + Türkçe, Turkish pages EN + FA. Between 992 and 1199px the
extra link would wrap the menu, so the menu links tighten a little there. */
@media (min-width: 992px) {
.mm-lang + .mm-lang { margin-inline-start: -6px; }
}
@media (max-width: 991px) {
.mm-lang { margin-inline-end: 8px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
.navbar-custom .navbar-nav .nav-item .nav-link { margin: 0 4px !important; letter-spacing: 0.4px !important; white-space: nowrap; }
.mm-lang { margin-inline-end: 8px; padding: 4px 9px; }
}
/* Right-to-left pages (html[dir="rtl"], e.g. Persian): the theme's style-rtl.css mirrors the grid and Bootstrap;
these rules mirror what motion.css positions itself. */
[dir="rtl"] .mm-xp-list { padding: 0 30px 0 0; }
[dir="rtl"] .mm-xp-list::before { left: auto; right: 8px; }
[dir="rtl"] .mm-xp-dot { left: auto; right: -30px; }
[dir="rtl"] .mm-xp-focus { margin: 6px 30px 0 0; }
[dir="rtl"] .mm-xp-detail ul, [dir="rtl"] .mm-tl-points { padding-left: 0; padding-right: 18px; }
[dir="rtl"] .mm-xp-ind { left: auto; right: 4px; }
[dir="rtl"] .mm-xp[data-view="acad"] .mm-xp-ind { transform: translateX(-100%); }
@media (max-width: 575px) {
[dir="rtl"] .mm-xp-list { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .mm-xp-dot { left: auto; right: -26px; }
[dir="rtl"] .mm-xp-list::before { left: auto; right: 7px; }
[dir="rtl"] .mm-xp-focus { margin-left: 0; margin-right: 26px; }
}
.mm-js[dir="rtl"] .mm-xp-col .mm-xp-item { transform: translateX(16px); }
.mm-js[dir="rtl"] .mm-xp-col.is-in .mm-xp-item { transform: none; }
[dir="rtl"] .mm-post .mm-post-cat { left: auto; right: 16px; }
/* arrows point the way the text reads */
[dir="rtl"] .feather-arrow-right, [dir="rtl"] .feather-arrow-left { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
[dir="rtl"] .mm-track-link:hover .feather { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .mm-post:hover .mm-post-more .feather { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .mm-article-back:hover .feather { transform: scaleX(-1) translateX(-4px); }
[dir="rtl"] .blog-post:hover .content li:last-child a .feather { transform: scaleX(-1) translateX(3px); }
}
/* Languages: generated by content/i18n/generate.py from languages.json */
/*mm-i18n:css*/
html:lang(fa) body, :lang(fa) :not(code):not(pre):not(kbd):not(samp):not(i):not(.mdi):not(.mm-code):not(.mm-code *):not(.katex *) { font-family: "Vazirmatn", "Roboto", Tahoma, sans-serif !important; }
:lang(fa) * { letter-spacing: 0 !important; text-transform: none !important; }
.mm-lang-menu { position: relative; display: inline-block; }
.mm-lang-menu summary { list-style: none; cursor: pointer; }
.mm-lang-menu summary::-webkit-details-marker { display: none; }
.mm-lang-menu .mm-lang-list { position: absolute; inset-inline-end: 0; top: 100%; display: grid; gap: 4px; padding: 8px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px rgba(13,10,31,.18); z-index: 20; }
/*/mm-i18n:css*/