:root {
--yale-blue: #00356b;
--yale-blue-700: #0b3f78;
--yale-blue-600: #184f8a;
--sky-500: #69a8ff;
--sky-400: #8bbcff;
--ink: #eaf2ff;
--text: #ccd6e8;
--muted: #9fb1cf;
--yb-900: #0b2545;
--yb-800: #13315c;
--yb-700: #1b3a6b;
--accent: #7cc5ff;
--accent-2: #b6e3ff;
--bg-0: #0b1020;
--bg-1: #0f1730;
--bg-2: #101a35;
--edge: rgba(255, 255, 255, 0.08);
--edge-2: rgba(255, 255, 255, 0.06);
--glow-cyan: rgba(105, 168, 255, 0.35);
/* Sunset/Orange theme colors */
--sunset-orange: #ff6b35;
--sunset-orange-600: #e55a2b;
--sunset-orange-700: #cc4a1f;
--sunset-peach: #ff8c69;
--sunset-coral: #ff7f50;
--sunset-bg: #2d1b0e;
--sunset-bg-light: #3d2415;
--sunset-text: #f4e6d7;
--sunset-muted: #d4b896;
--sunset-glow: rgba(255, 107, 53, 0.35);
--text-strong: #ffffff;
--text-dim: #aab7cf;
--btn-primary-bg: linear-gradient(180deg, var(--sky-500), var(--sky-400));
--btn-primary-text: #0b1730;
--btn-ghost-bg: rgba(255, 255, 255, 0.06);
--chip-bg: rgba(255, 255, 255, 0.06);
--chip-text: var(--text);
--select-bg: rgba(105, 168, 255, 0.35);
--focus-ring: 0 0 0 3px rgba(105, 168, 255, 0.35);
--radius-xl: 22px;
--shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--edge);
--bg: var(--bg-0);
--panel: rgba(16, 25, 46, 0.82);
--panelElevated: rgba(18, 30, 56, 0.88);
--panelBorder: var(--edge);
--border: var(--edge);
--muted: var(--text-dim);
--chip-border: var(--edge-2);
--accent: var(--sky-500);
--accent-1: var(--sky-500);
--accent-2: var(--sky-400);
--accent-soft: rgba(105, 168, 255, 0.16);
--glow: 0 14px 46px rgba(24, 79, 138, 0.3);
--cardShadowSm: 0 24px 60px -44px rgba(2, 8, 18, 0.7);
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 28px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--wrap-narrow: 880px;
--wrap-default: 1100px;
--wrap-wide: 1280px;
/* About page specific spacing */
--about-hero-max-width: 1200px;
--about-hero-padding-x: clamp(24px, 4vw, 48px);
--about-hero-padding-y: clamp(32px, 6vh, 56px);
--about-hero-gap: clamp(24px, 4vw, 48px);
--section-pt: var(--space-20);
--section-pb: var(--space-20);
--hero-mt: var(--space-6);
--card-gap: var(--space-8);
--grid-gap: var(--space-8);
color-scheme: dark;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
background: radial-gradient(1200px 800px at 50% -10%, var(--yale-blue-700) 0%, var(--bg-0) 60%) fixed;
color: var(--text);
}
body {
line-height: 1.6;
min-height: 100vh;
}
::selection,
::-moz-selection {
background: rgba(124, 197, 255, 0.35);
color: #fff;
}
:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
border-radius: 10px;
}
a.is-disabled {
pointer-events: none;
opacity: 0.55;
filter: saturate(0.7);
cursor: not-allowed;
}
.wrapper,
.page-wrap {
max-width: var(--wrap-default);
margin: 0 auto;
padding: 0 var(--space-6);
}
.section {
padding-top: var(--section-pt);
padding-bottom: var(--section-pb);
}
.section--tight {
padding-top: var(--space-10);
padding-bottom: var(--space-10);
margin-top: calc(-1 * var(--space-6));
}
.section--loose {
padding-top: var(--space-24);
padding-bottom: var(--space-24);
}
.hero {
margin-top: var(--hero-mt);
margin-bottom: var(--space-12);
}
.hero--slim {
margin-top: var(--hero-mt);
margin-bottom: var(--space-8);
}
.hero--slim.section-heading {
max-width: 580px;
}
.hero--slim .section-title {
font-size: clamp(2.2rem, 4vw, 3rem);
}
.hero,
.card,
.surface {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.12));
border: 1px solid var(--edge);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(18px);
}
.gradient-zen {
background: linear-gradient(135deg, rgba(0, 53, 107, 0.92), rgba(16, 26, 53, 0.88));
border: 1px solid var(--edge);
}
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--grid-gap);
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1100px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.card {
margin: 0;
padding: var(--space-8);
border-radius: var(--radius-xl);
}
.card img {
border-radius: 14px;
border: 1px solid var(--edge-2);
}
.card + .card {
margin-top: 0;
}
.stack-vert > * + * {
margin-top: var(--space-6);
}
.stack-vert--lg > * + * {
margin-top: var(--space-10);
}
.stack-vert--xl > * + * {
margin-top: var(--space-16);
}
.pad-lg {
padding: var(--space-12);
}
.pad-xl {
padding: var(--space-16);
}
h1,
h2,
h3 {
margin: 0 0 var(--space-4);
line-height: 1.15;
color: var(--text-strong);
}
h1 strong,
h2 strong,
h3 strong,
strong {
color: var(--text-strong);
}
.subtitle,
.muted,
.eyebrow {
color: var(--text-dim);
}
.card-title,
.eyebrow {
letter-spacing: 0.06em;
}
.header,
.site-nav {
position: relative;
z-index: 5;
}
@media (max-width: 420px) {
:root {
--section-pt: var(--space-16);
--section-pb: var(--space-16);
--hero-mt: var(--space-6);
}
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.section {
padding-block: 48px;
}
.hero {
margin-top: 40px;
padding: 48px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(27, 58, 107, 0.6), rgba(11, 37, 69, 0.7));
box-shadow: 0 8px 40px rgba(16, 30, 50, 0.35);
position: relative;
overflow: hidden;
}
/* About page hero layout */
.about-hero {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: var(--about-hero-padding-y) 0 clamp(32px, 6vh, 56px) !important;
margin-top: var(--hero-mt) !important;
margin-bottom: 0 !important;
}
.about-hero__container {
max-width: var(--about-hero-max-width);
margin: 0 auto;
padding: 0 var(--about-hero-padding-x);
}
.about-hero__grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--about-hero-gap);
align-items: center;
margin-top: clamp(16px, 3vh, 32px);
}
.about-hero__left {
display: flex;
flex-direction: column;
gap: clamp(20px, 4vh, 32px);
align-items: flex-start;
}
.about-hero__pfp {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.about-hero__pfp::before {
content: "";
position: absolute;
inset: -12px;
border-radius: 50%;
background: radial-gradient(circle, rgba(105, 168, 255, 0.25), rgba(105, 168, 255, 0));
filter: blur(20px);
opacity: 0.6;
}
.about-hero__avatar {
position: relative;
z-index: 1;
width: clamp(160px, 14vw, 200px);
height: clamp(160px, 14vw, 200px);
border-radius: 50%;
object-fit: cover;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(105, 168, 255, 0.2);
transition: transform 0.3s ease;
}
.about-hero__avatar:hover {
transform: scale(1.05);
}
.about-hero__summary {
max-width: 70ch;
}
.about-hero__summary p {
margin: 0 0 0.9rem;
line-height: 1.55;
color: var(--text);
}
.about-hero .section-title {
font-size: clamp(36px, 6vw, 56px);
margin: 0;
line-height: 1.1;
}
.about-hero .section-eyebrow {
margin-bottom: 0.35rem;
}
/* Mobile and tablet responsive fallbacks */
@media (max-width: 900px) {
.about-hero__grid {
grid-template-columns: 1fr;
gap: clamp(16px, 4vh, 24px);
text-align: center;
}
.about-hero__left {
align-items: center;
order: 1;
}
.about-hero__summary {
order: 2;
text-align: left;
}
.about-hero__avatar {
width: clamp(140px, 18vw, 180px);
height: clamp(140px, 18vw, 180px);
}
}
@media (max-width: 480px) {
.about-hero__avatar {
width: clamp(120px, 26vw, 160px);
height: clamp(120px, 26vw, 160px);
}
.about-hero__summary p {
margin-bottom: 0.8rem;
}
}
.grid-2 {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 900px) {
.grid-2 {
grid-template-columns: 1fr 1fr;
}
}
.grid {
display: grid;
gap: var(--grid-gap);
}
.grid-12 {
display: grid;
gap: var(--grid-gap);
}
@media (min-width: 960px) {
.grid-12 {
grid-template-columns: repeat(12, 1fr);
}
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: var(--accent);
}
main {
padding: 0;
}
.site-header {
position: sticky;
top: 16px;
z-index: 20;
padding: 1.5rem 1.25rem 0;
}
.nav-shell {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding: 0.65rem 1.1rem;
border-radius: 999px;
background: rgba(10, 21, 44, 0.85);
backdrop-filter: blur(16px);
border: 1px solid var(--edge);
box-shadow: 0 18px 44px -30px rgba(0, 15, 38, 0.8);
}
.nav-brand {
font-weight: 600;
letter-spacing: 0.02em;
}
.nav-links {
display: flex;
align-items: center;
gap: 0.4rem;
}
.nav-links a {
padding: 0.45rem 0.9rem;
border-radius: 999px;
font-size: 0.95rem;
color: var(--text-dim);
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.nav-links a:hover {
color: var(--text);
background: rgba(255, 255, 255, 0.04);
}
.nav-links a.active {
background: rgba(105, 168, 255, 0.12);
color: var(--text-strong);
border: 1px solid var(--edge);
box-shadow: 0 0 0 1px rgba(105, 168, 255, 0.2);
}
.nav-shell a.active {
background: rgba(105, 168, 255, 0.12);
color: var(--text-strong);
border: 1px solid var(--edge);
}
.hero-panel {
position: relative;
overflow: hidden;
border-radius: 32px;
padding: 4rem clamp(2rem, 5vw, 4.5rem);
margin-top: 3rem;
background: linear-gradient(180deg, rgba(0, 53, 107, 0.82), rgba(16, 26, 53, 0.88));
border: 1px solid var(--edge);
text-align: center;
box-shadow: 0 30px 80px -60px rgba(0, 28, 68, 0.65);
}
#bg-neural {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.25;
pointer-events: none;
filter: blur(0.35px);
}
.hero-panel::before {
content: "";
position: absolute;
inset: -40%;
background: radial-gradient(circle at 30% 20%, rgba(24, 79, 138, 0.55), transparent 58%),
radial-gradient(circle at 70% 25%, rgba(10, 54, 109, 0.45), transparent 55%),
radial-gradient(circle at 50% 80%, rgba(105, 168, 255, 0.38), transparent 60%);
filter: blur(42px);
opacity: 0.75;
animation: heroGlow 28s ease-in-out infinite;
transform: translateZ(0);
}
.hero-panel::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(130deg, rgba(255, 255, 255, 0.06), transparent 55%);
opacity: 0.6;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-title {
font-size: clamp(3rem, 8vw, 4.5rem);
letter-spacing: -0.04em;
margin: 0 0 1rem;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-top: 1.75rem;
}
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.15);
background: rgba(21, 34, 54, 0.8);
color: var(--ink);
text-decoration: none;
font-weight: 600;
backdrop-filter: blur(6px);
transition: transform 0.12s, background 0.2s, border-color 0.2s;
}
.btn:hover {
border-color: rgba(255, 255, 255, 0.35);
}
.btn:active {
transform: translateY(1px);
}
.btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(124, 197, 255, 0.35);
}
.btn-primary {
background: linear-gradient(180deg, var(--accent), var(--accent-2));
color: #0b2239;
border-color: transparent;
}
.btn-ghost {
background: rgba(255, 255, 255, 0.06);
color: var(--ink);
}
.section-heading {
margin: 0;
}
.section-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 0.6rem;
}
.section-title {
font-size: clamp(2rem, 5vw, 2.8rem);
margin: 0;
}
.projects-grid {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.projects-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1100px) {
.projects-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.project-card {
position: relative;
border-radius: var(--radius-xl);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
display: flex;
flex-direction: column;
gap: 1.2rem;
min-height: 100%;
}
.detail-card {
border-radius: var(--radius-xl);
padding: 1.8rem;
}
.detail-card h3 {
margin-top: 0;
}
.project-card:hover {
border-color: rgba(105, 168, 255, 0.35);
box-shadow: 0 20px 48px -32px rgba(105, 168, 255, 0.28);
}
.project-logo {
width: 72px;
height: 72px;
border-radius: 18px;
border: 1px solid var(--edge-2);
object-fit: cover;
background: rgba(255, 255, 255, 0.02);
box-shadow: inset 0 0 0 1px rgba(11, 23, 48, 0.4);
}
.project-title {
margin: 0;
font-size: 1.2rem;
font-weight: 600;
}
.project-blurb {
margin: 0;
color: var(--muted);
font-size: 0.95rem;
}
.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.chip {
display: inline-flex;
align-items: center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(124, 197, 255, 0.35);
background: rgba(124, 197, 255, 0.12);
color: var(--text);
margin: 0 8px 8px 0;
}
.footer {
margin-top: 4.5rem;
padding: 2.8rem 1.25rem;
border-top: 1px solid var(--edge-2);
color: var(--ink);
font-size: 0.9rem;
}
small {
color: var(--ink);
}
.footer-inner {
display: flex;
flex-direction: column;
gap: 1rem;
align-items: center;
}
.footer-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.reveal-on-scroll {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.reveal-on-scroll.is-visible {
opacity: 1;
transform: none;
}
.accordion .item {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
overflow: hidden;
}
.accordion .head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 16px;
cursor: pointer;
}
.accordion .body {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.accordion .item.open .body {
padding: 0 16px 14px;
}
.metric-chips {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.metric-chip {
display: inline-flex;
align-items: center;
padding: 0.3rem 0.6rem;
border-radius: 999px;
border: 1px solid var(--edge-2);
font-size: 0.78rem;
letter-spacing: 0.02em;
background: rgba(105, 168, 255, 0.14);
color: var(--text);
}
.stack-tight {
margin-top: 1.8rem;
}
.zen-grid {
display: grid;
gap: 2rem;
grid-template-columns: repeat(12, minmax(0, 1fr));
margin-top: 3rem;
}
.zen-card {
grid-column: span 12;
background: var(--panel);
border: 1px solid var(--edge);
border-radius: var(--radius-xl);
padding: clamp(1.4rem, 3vw, 2rem);
box-shadow: var(--shadow-soft);
backdrop-filter: blur(12px);
position: relative;
}
@media (min-width: 1024px) {
.zen-card.col-span-7 {
grid-column: span 7;
}
.zen-card.col-span-5 {
grid-column: span 5;
}
}
.zen-card-head {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.zen-list {
margin: 1.4rem 0 0 1.1rem;
color: var(--text);
line-height: 1.55;
}
.zen-timeline {
position: relative;
padding-left: 1.6rem;
margin-top: 1.4rem;
}
.zen-timeline::before {
content: "";
position: absolute;
left: 0.6rem;
top: 0.3rem;
width: 2px;
height: calc(100% - 0.6rem);
background: linear-gradient(180deg, rgba(105, 168, 255, 0.42), rgba(0, 53, 107, 0));
transform-origin: top;
transform: scaleY(0);
transition: transform 0.7s ease;
}
.zen-timeline.active::before {
transform: scaleY(1);
}
.zen-timeline ol {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1rem;
}
.zen-timeline li {
position: relative;
padding: 1rem 1.1rem 1rem 1.6rem;
background: rgba(9, 18, 37, 0.82);
border: 1px solid var(--edge);
border-radius: var(--radius-xl);
box-shadow: inset 0 0 0 1px rgba(5, 16, 34, 0.45);
opacity: 0;
transform: translateY(10px);
transition: opacity 0.45s ease, transform 0.45s ease;
}
.zen-timeline li.is-visible {
opacity: 1;
transform: translateY(0);
}
.zen-timeline li::before {
content: "";
position: absolute;
left: -1rem;
top: 1.3rem;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(circle, rgba(105, 168, 255, 0.9), rgba(105, 168, 255, 0));
box-shadow: 0 0 0 6px rgba(105, 168, 255, 0.2);
}
.zen-timeline h4 {
margin: 0 0 0.35rem;
font-size: 1rem;
}
.zen-timeline p {
margin: 0;
color: var(--text-dim);
font-size: 0.92rem;
}
.accordion-timeline {
position: relative;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 26px;
padding: clamp(1.2rem, 3vw, 1.8rem) clamp(1rem, 3vw, 1.6rem);
backdrop-filter: blur(10px);
box-shadow: var(--glow);
}
.accordion-timeline .timeline-rail {
position: absolute;
left: 1.1rem;
top: 1.6rem;
bottom: 1.6rem;
width: 2px;
background: linear-gradient(180deg, rgba(105, 168, 255, 0.4), rgba(0, 53, 107, 0));
overflow: hidden;
}
.accordion-timeline .timeline-rail::after {
content: "";
position: absolute;
left: 0;
top: -100%;
width: 100%;
height: 200%;
background: linear-gradient(180deg, transparent, rgba(105, 168, 255, 0.55), transparent);
animation: railPulse 5s linear infinite;
}
.timeline-item {
position: relative;
padding-left: 2.4rem;
border-bottom: 1px solid var(--edge-2);
}
.timeline-item:last-of-type {
border-bottom: none;
}
.timeline-trigger {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
background: none;
border: none;
color: inherit;
font-size: 1rem;
font-weight: 600;
padding: 1rem 0;
cursor: pointer;
text-align: left;
}
.timeline-node {
width: 12px;
height: 12px;
border-radius: 50%;
background: radial-gradient(circle, rgba(105, 168, 255, 0.92), rgba(105, 168, 255, 0));
box-shadow: 0 0 0 6px rgba(105, 168, 255, 0.2);
flex-shrink: 0;
}
.timeline-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
color: var(--text-dim);
font-size: 0.93rem;
padding-right: 1rem;
}
.timeline-item.is-open .timeline-body {
max-height: 460px;
padding-bottom: 1rem;
}
.timeline-body ul {
margin: 0.6rem 0 0 1.1rem;
}
.typing-indicator {
font-family: "SFMono-Regular", Menlo, Consolas, monospace;
color: rgba(244, 244, 255, 0.85);
font-size: 0.9rem;
margin: 0.2rem 0;
min-height: 1.2rem;
}
.discord-grid {
display: grid;
gap: 2rem;
margin-top: 3rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
@media (min-width: 1024px) {
.discord-grid {
grid-template-columns: 2fr 1fr;
}
}
.discord-stack {
backdrop-filter: blur(10px);
}
.timeline-item.is-open .timeline-trigger {
color: var(--text);
}
.timeline-item.is-open .timeline-node {
box-shadow: 0 0 0 8px rgba(105, 168, 255, 0.22);
}
.timeline-item:not(.is-open) .timeline-body ul,
.timeline-item:not(.is-open) .timeline-body p {
opacity: 0;
transition: opacity 0.25s ease;
}
.timeline-item.is-open .timeline-body ul,
.timeline-item.is-open .timeline-body p {
opacity: 1;
}
.thesis-card {
background: linear-gradient(160deg, rgba(0, 53, 107, 0.65), rgba(9, 18, 37, 0.78));
border: 1px solid var(--edge);
border-radius: var(--radius-xl);
padding: clamp(1.5rem, 3vw, 2.2rem);
box-shadow: var(--shadow-soft);
}
.thesis-list {
margin: 1.2rem 0 0 1.1rem;
color: var(--text);
line-height: 1.55;
}
/* Timeline Container */
.timeline-container {
margin-top: 1.5rem;
}
.timeline-phase {
position: relative;
padding: 1rem 0;
border-left: 2px solid rgba(255, 255, 255, 0.1);
margin-left: 1rem;
padding-left: 2rem;
}
.timeline-phase:not(:last-child)::before {
content: "";
position: absolute;
left: -6px;
top: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
}
.timeline-phase:last-child {
border-left: none;
}
.phase-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.phase-month {
font-size: 0.8rem;
font-weight: 600;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 4px 8px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
min-width: 80px;
text-align: center;
}
.timeline-phase h4 {
margin: 0;
font-size: 1.2rem;
color: #ffffff;
font-weight: 600;
}
.timeline-phase p {
margin: 0;
color: var(--text);
line-height: 1.6;
font-size: 1rem;
}
/* Responsive Timeline */
@media (max-width: 768px) {
.timeline-phase {
margin-left: 0.5rem;
padding-left: 1.5rem;
}
.phase-header {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.phase-month {
min-width: auto;
}
}
.profile-photo {
position: relative;
width: 176px;
height: 176px;
}
.profile-photo::before {
content: "";
position: absolute;
inset: -18px;
border-radius: 50%;
background: radial-gradient(circle, rgba(105, 168, 255, 0.35), rgba(105, 168, 255, 0));
filter: blur(24px);
opacity: 0.8;
}
.avatar {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
transition: transform 0.3s ease;
}
.avatar:hover {
transform: scale(1.05);
}
.tag-cloud span {
animation: chipFloat 6s ease-in-out infinite alternate;
}
.tag-cloud span:nth-child(2) {
animation-delay: 0.6s;
}
.tag-cloud span:nth-child(3) {
animation-delay: 1.1s;
}
.tag-cloud span:nth-child(4) {
animation-delay: 1.7s;
}
.tag-cloud span:nth-child(5) {
animation-delay: 2.2s;
}
.footer-links a,
.footer-links span {
color: var(--ink);
}
.timeline-rail::after {
animation: railPulse 6s linear infinite;
}
.resume-entry-header {
gap: 0.75rem;
}
.resume-entry ul li {
list-style: disc;
}
.layout-two-col {
display: grid;
gap: 2rem;
grid-template-columns: 1fr;
}
@media (min-width: 960px) {
.layout-two-col {
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
align-items: center;
}
}
.project-columns {
display: grid;
gap: 2.2rem;
grid-template-columns: 1fr;
}
@media (min-width: 960px) {
.project-columns {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
}
}
.profile-photo {
display: flex;
align-items: center;
justify-content: center;
}
.profile-pic {
width: 220px;
height: 220px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
transition: transform 0.3s ease;
border: 1px solid var(--edge);
}
.profile-pic:hover {
transform: scale(1.05);
}
.about-body p {
margin: 0 0 1.2rem;
color: var(--text);
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.tag-cloud span {
border-radius: 999px;
border: 1px solid var(--edge-2);
padding: 0.45rem 0.95rem;
font-size: 0.82rem;
background: var(--chip-bg);
color: var(--chip-text);
}
.page-section {
margin-top: 0;
}
.project-header {
display: grid;
gap: clamp(var(--space-6), 3vw, var(--space-10));
grid-template-columns: 1fr;
border-radius: var(--radius-xl);
border: 1px solid var(--edge);
background: linear-gradient(145deg, rgba(9, 18, 37, 0.92), rgba(5, 12, 24, 0.88));
box-shadow: var(--shadow-soft);
padding: clamp(2.8rem, 5vw, 4rem) clamp(2rem, 4vw, 3.4rem);
}
.project-header h1 {
margin: 0;
font-size: clamp(2.6rem, 4vw, 3.6rem);
line-height: 1.1;
}
.project-header p {
margin: 0;
color: var(--text-dim);
max-width: 62ch;
}
.project-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.timeline {
position: relative;
padding-left: 1.6rem;
margin-top: 2.2rem;
}
.timeline::before {
content: "";
position: absolute;
left: 0.55rem;
top: 0.4rem;
width: 2px;
height: calc(100% - 0.8rem);
background: linear-gradient(180deg, rgba(105, 168, 255, 0.36), rgba(0, 53, 107, 0));
transform-origin: top;
transform: scaleY(0);
transition: transform 0.6s ease-out;
}
.timeline.active::before {
transform: scaleY(1);
}
.timeline ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 1.2rem;
}
.timeline li {
position: relative;
margin: 14px 0;
padding: 14px 16px 14px 36px;
border: 1px solid var(--edge);
border-radius: var(--radius-xl);
background: rgba(8, 16, 32, 0.72);
box-shadow: inset 0 0 0 1px rgba(5, 12, 24, 0.35);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.timeline li.is-visible,
.timeline li.active {
opacity: 1;
transform: none;
}
.timeline .node {
position: absolute;
left: 8px;
top: 16px;
width: 10px;
height: 10px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #fff, rgba(105, 168, 255, 0.9));
box-shadow: 0 0 16px rgba(105, 168, 255, 0.55);
}
.timeline h4 {
margin: 0 0 0.35rem;
font-size: 1rem;
}
.timeline p {
margin: 0;
color: var(--text-dim);
font-size: 0.92rem;
}
.stacked-cards {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.resume-sheet {
margin-top: 1rem;
background: rgba(12, 20, 41, 0.9);
border: 1px solid var(--edge);
border-radius: var(--radius-xl);
padding: clamp(2rem, 4vw, 3.2rem);
box-shadow: var(--shadow-soft);
color: var(--text);
}
.resume-header {
text-align: center;
margin-bottom: 2.5rem;
}
.resume-name {
font-size: clamp(2.4rem, 5vw, 3rem);
letter-spacing: 0.02em;
margin: 0 0 0.4rem;
}
.resume-actions {
margin-top: 1.6rem;
}
.resume-actions .btn {
font-weight: 600;
}
.resume-note {
display: block;
margin-top: 0.8rem;
font-size: 0.8rem;
letter-spacing: 0.04em;
color: rgba(148, 163, 184, 0.7);
}
.resume-section {
margin-top: 2.2rem;
}
.resume-section h2 {
margin: 0 0 0.8rem;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0.26em;
text-transform: uppercase;
color: rgba(148, 163, 184, 0.85);
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
padding-bottom: 0.5rem;
}
.resume-entry {
margin-top: 1.1rem;
font-size: 0.92rem;
line-height: 1.45;
}
.resume-entry-header {
display: flex;
justify-content: space-between;
gap: 1rem;
font-weight: 600;
}
.resume-entry-header .resume-role {
font-style: italic;
font-weight: 500;
margin-left: 0.4rem;
color: rgba(226, 232, 240, 0.78);
}
.resume-date {
white-space: nowrap;
color: rgba(148, 163, 184, 0.75);
font-size: 0.85rem;
}
.resume-entry ul {
margin: 0.4rem 0 0 1.2rem;
padding: 0;
color: var(--text);
}
.resume-entry ul li {
margin-bottom: 0.35rem;
}
.resume-entry p {
margin: 0.35rem 0 0;
color: var(--text-dim);
}
.resume-skills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.6rem;
}
.resume-skills span {
border-radius: 999px;
border: 1px solid var(--edge-2);
padding: 0.35rem 0.8rem;
font-size: 0.85rem;
letter-spacing: 0.02em;
background: var(--chip-bg);
color: var(--chip-text);
}
.contact-hero {
margin: 2.6rem auto 0;
max-width: 720px;
text-align: center;
padding: clamp(2.6rem, 5vw, 3.2rem) clamp(1.6rem, 4vw, 3rem);
background: linear-gradient(180deg, rgba(7, 14, 29, 0.92), rgba(9, 18, 37, 0.86));
border-radius: var(--radius-xl);
border: 1px solid var(--edge);
box-shadow: var(--shadow-soft);
}
.contact-actions {
display: grid;
gap: 1.4rem;
margin-top: 1.6rem;
}
.contact-primary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
border-radius: 18px;
padding: 1rem 1.2rem 1rem 1.1rem;
background: linear-gradient(90deg, rgba(105, 168, 255, 0.95), rgba(139, 188, 255, 1));
color: #031226;
box-shadow: 0 20px 44px -24px rgba(105, 168, 255, 0.55);
text-align: left;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-primary:hover {
transform: translateY(-2px);
box-shadow: 0 24px 52px -26px rgba(105, 168, 255, 0.65);
}
.contact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.12);
color: inherit;
}
.contact-primary-text {
display: grid;
gap: 0.15rem;
font-size: 0.95rem;
}
.contact-primary-text span {
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.74;
}
.contact-primary-text strong {
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.01em;
}
.contact-chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.75rem;
}
.contact-chip {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.65rem;
border-radius: 16px;
padding: 0.85rem 1rem;
border: 1px solid var(--edge);
background: rgba(255, 255, 255, 0.04);
color: var(--text);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.contact-chip:hover {
transform: translateY(-2px);
border-color: rgba(105, 168, 255, 0.4);
box-shadow: 0 16px 36px -26px rgba(105, 168, 255, 0.35);
}
.contact-chip-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.06);
color: var(--text);
}
.contact-chip-text {
font-size: 0.95rem;
font-weight: 500;
}
.motivation-card {
border-radius: var(--radius-xl);
border: 1px solid var(--edge);
background: linear-gradient(160deg, rgba(0, 53, 107, 0.72), rgba(9, 18, 37, 0.78));
padding: clamp(2rem, 5vw, 3rem);
color: var(--text);
box-shadow: var(--shadow-soft);
margin: 0;
line-height: 1.7;
}
.status-chips {
display: flex;
flex-wrap: wrap;
gap: clamp(0.5rem, 1.2vw, 0.9rem);
margin-top: clamp(var(--space-4), 2vw, var(--space-6));
}
.status-chips span {
border-radius: 999px;
padding: 0.4rem 0.9rem;
border: 1px solid var(--edge-2);
background: rgba(105, 168, 255, 0.12);
color: var(--text);
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.thesis-page .section {
padding-top: clamp(var(--space-4), 1.5vw, var(--space-6));
padding-bottom: clamp(var(--space-4), 1.5vw, var(--space-6));
}
.thesis-hero {
margin-top: clamp(var(--space-8), 6vh, var(--space-16));
margin-bottom: clamp(var(--space-8), 5vw, var(--space-16));
background: linear-gradient(150deg, rgba(234, 88, 12, 0.32), rgba(30, 30, 34, 0.92));
border-color: rgba(234, 88, 12, 0.35);
}
.thesis-page .motivation-card {
margin: 0;
}
.thesis-page .thesis-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.5rem, 3vw, 2.5rem);
margin-top: clamp(var(--space-6), 3vw, var(--space-10));
}
@media (min-width: 960px) {
.thesis-page .thesis-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.thesis-page .detail-card {
margin: 0;
padding: clamp(1.8rem, 3vw, 2.4rem);
}
/* Modern thesis hero styling */
.thesis-page .hero {
position: relative;
overflow: hidden;
}
.thesis-page .hero-content {
position: relative;
z-index: 2;
}
.thesis-page .hero-subtitle {
font-size: 1.25rem;
color: var(--text-dim);
margin: 0.75rem 0 1.25rem;
line-height: 1.6;
}
.thesis-page .hero-meta {
display: flex;
align-items: center;
gap: 2rem;
margin: 1.5rem 0;
flex-wrap: wrap;
}
.thesis-page .hero-meta p {
margin: 0;
color: var(--text-dim);
font-size: 0.95rem;
}
.thesis-page .lab-button-container {
margin: 0;
}
.thesis-page .status-chips {
margin-top: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.thesis-page .status-chips span {
background: rgba(105, 168, 255, 0.1);
color: var(--accent);
border: 1px solid rgba(105, 168, 255, 0.2);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.5px;
}
@media (max-width: 768px) {
.thesis-page .hero-meta {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.thesis-page .status-chips {
gap: 0.5rem;
}
.thesis-page .status-chips span {
font-size: 0.8rem;
padding: 0.4rem 0.8rem;
}
}
.not-found {
min-height: 80vh;
display: grid;
place-items: center;
text-align: center;
gap: 1.2rem;
}
.animate-fade {
animation: subtleFadeUp 0.35s ease-out both;
}
@keyframes heroGlow {
0% {
transform: translate3d(-20px, -10px, 0) scale(1.05);
}
50% {
transform: translate3d(18px, 14px, 0) scale(1.08);
}
100% {
transform: translate3d(-20px, -10px, 0) scale(1.05);
}
}
@keyframes subtleFadeUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes chipFloat {
from {
transform: translateY(0);
}
to {
transform: translateY(-4px);
}
}
@keyframes ripple {
from {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
to {
box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
}
}
@keyframes railPulse {
0% {
transform: translateY(0);
}
100% {
transform: translateY(100%);
}
}
/* Reveal animations */
@media (prefers-reduced-motion: no-preference) {
.reveal {
opacity: 0.001;
transform: translateY(12px);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal.in {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal {
opacity: 1;
transform: none;
}
}
/* Enhanced responsive navigation */
.nav-toggle {
display: none;
background: none;
border: 0;
color: #fff;
font-size: 22px;
cursor: pointer;
padding: 8px;
}
@media (max-width: 768px) {
.nav-toggle {
display: block;
}
.nav-links {
position: fixed;
inset: 64px 0 auto 0;
background: rgba(7, 12, 22, 0.95);
backdrop-filter: blur(10px);
border-top: 1px solid var(--edge);
padding: 16px;
flex-direction: column;
gap: 10px;
transform: translateY(-8px);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s ease;
}
.nav-links.open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
}
@media (max-width: 720px) {
.nav-shell {
flex-direction: column;
align-items: stretch;
}
.nav-links {
justify-content: space-between;
}
.hero-panel {
padding: 3rem 1.5rem;
}
.hero-actions {
flex-direction: column;
}
.profile-photo {
margin: 0 auto;
}
.layout-two-col {
grid-template-columns: 1fr;
text-align: center;
}
.about-body {
text-align: left;
}
}
@media print {
body {
background: #fff;
color: #000;
}
.site-header,
.footer,
.hero-panel,
.projects-grid,
.motivation-card,
.status-chips,
.nav-shell,
.contact-actions {
display: none !important;
}
.resume-container {
margin-top: 0;
border: none;
background: #fff !important;
color: #000 !important;
box-shadow: none;
padding: 0 0 0.5in;
}
.resume-actions {
display: none !important;
}
.resume-contact {
justify-content: flex-start;
gap: 1.2rem;
}
.resume-contact a,
.resume-entry a {
color: #000;
text-decoration: underline;
}
.resume-date {
color: #000;
}
}
.card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.12));
backdrop-filter: blur(12px);
border: 1px solid var(--edge);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-soft);
}
.pane {
position: relative;
border-radius: var(--radius-xl);
padding: 48px;
background: linear-gradient(180deg, rgba(7, 14, 29, 0.88), rgba(11, 22, 43, 0.82));
border: 1px solid var(--edge);
box-shadow: var(--shadow-soft);
}
/* ======= ZEN page ======= */
.zen-hero{isolation:isolate}
.zen-title{font-size:clamp(2rem,2.4rem + 1.2vw,3.4rem);margin:0 0 .4rem}
.zen-body{
margin-top: 0;
gap: var(--space-8);
}
/* Enhanced Zen Hero Section */
.zen-hero-section {
margin-top: 40px;
padding: 60px 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(20, 20, 20, 0.9));
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
}
.zen-hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.05), transparent 50%),
radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.03), transparent 50%);
pointer-events: none;
}
.zen-hero-content {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
}
.zen-hero-text {
max-width: 500px;
}
.zen-hero-badge {
display: inline-block;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1.5rem;
}
.zen-hero-title {
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 700;
margin: 0 0 1rem;
background: linear-gradient(135deg, #ffffff, #cccccc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
}
.zen-hero-subtitle {
font-size: 1.2rem;
color: var(--text);
margin: 0 0 2rem;
line-height: 1.5;
}
.zen-hero-metrics {
display: flex;
gap: 2rem;
margin-bottom: 2.5rem;
}
.zen-metric-item {
text-align: center;
}
.zen-metric-number {
display: block;
font-size: 2.2rem;
font-weight: 700;
color: #ffffff;
line-height: 1;
margin-bottom: 0.25rem;
}
.zen-metric-label {
display: block;
font-size: 0.9rem;
color: var(--muted);
font-weight: 500;
}
.zen-hero-cta {
margin-top: 2rem;
}
.zen-cta-btn {
padding: 12px 24px;
font-size: 1rem;
font-weight: 600;
background: #ffffff;
color: #000000;
border-color: #ffffff;
}
.zen-cta-btn:hover {
background: #f0f0f0;
border-color: #f0f0f0;
}
/* Visual Card */
.zen-hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.zen-visual-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 2rem;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
min-width: 300px;
}
.zen-visual-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.zen-visual-dots {
display: flex;
gap: 0.25rem;
}
.zen-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
}
.zen-visual-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--text);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.zen-visual-content {
display: flex;
align-items: center;
gap: 1rem;
}
.zen-flow-item {
text-align: center;
flex: 1;
}
.zen-flow-icon {
width: 40px;
height: 40px;
border-radius: 8px;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #0b2239;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 600;
margin: 0 auto 0.5rem;
}
.zen-flow-text {
font-size: 0.8rem;
color: var(--muted);
font-weight: 500;
}
.zen-flow-arrow {
color: var(--accent);
font-size: 1.2rem;
font-weight: 600;
}
/* Responsive Design */
@media (max-width: 968px) {
.zen-hero-content {
text-align: center;
}
.zen-hero-metrics {
justify-content: center;
}
}
@media (max-width: 640px) {
.zen-hero-section {
padding: 40px 0;
margin-top: 20px;
}
.zen-hero-content {
padding: 0 1rem;
}
.zen-hero-metrics {
flex-direction: column;
gap: 1rem;
}
}
/* Zen Hero Metrics */
.hero-metrics {
display: flex;
gap: 2rem;
margin: 1.5rem 0;
justify-content: center;
flex-wrap: wrap;
}
.metric-item {
text-align: center;
min-width: 120px;
}
.metric-number {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--accent);
line-height: 1;
}
.metric-label {
display: block;
font-size: 0.9rem;
color: var(--muted);
margin-top: 0.25rem;
}
/* Problem & Solution */
.problem-text,
.solution-text {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.problem-text {
color: var(--text-dim);
font-style: italic;
}
.solution-text {
color: var(--text);
}
/* Approach Grid */
.approach-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-top: 1.5rem;
}
.approach-item {
text-align: center;
padding: 1.5rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.approach-icon {
font-size: 1.5rem;
margin-bottom: 1rem;
color: #ffffff;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.approach-item h3 {
margin: 0 0 0.75rem;
font-size: 1.1rem;
}
.approach-item p {
margin: 0;
color: var(--muted);
font-size: 0.95rem;
line-height: 1.5;
}
/* Process Timeline */
.section-intro {
text-align: center;
color: var(--muted);
margin-bottom: 2rem;
font-size: 1.1rem;
}
.process-header {
text-align: center;
margin-bottom: 3rem;
}
.process-subtitle {
font-size: 1.1rem;
color: var(--muted);
margin: 0.5rem 0 0;
font-style: italic;
}
.process-steps {
display: grid;
gap: 2rem;
max-width: 800px;
margin: 0 auto;
}
.process-step {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 1.5rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.process-step:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.step-number {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background: #ffffff;
color: #000000;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 1.2rem;
box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}
.step-content h3 {
margin: 0 0 0.5rem;
font-size: 1.1rem;
}
.step-content p {
margin: 0;
color: var(--muted);
line-height: 1.5;
}
/* Skills Grid */
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.skill-item {
padding: 1.5rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.skill-item h3 {
margin: 0 0 0.75rem;
font-size: 1.1rem;
color: #ffffff;
}
.skill-item p {
margin: 0;
color: var(--muted);
line-height: 1.5;
}
/* Insights Grid */
.features-header {
text-align: center;
margin-bottom: 3rem;
}
.features-subtitle {
font-size: 1.1rem;
color: var(--muted);
margin: 0.5rem 0 0;
font-style: italic;
}
.features-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.feature-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem;
border-radius: 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-card:hover::before {
opacity: 1;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.2);
}
.feature-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
margin-bottom: 1.5rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.feature-icon::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.feature-card:hover .feature-icon {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.4);
transform: scale(1.1);
}
.feature-card:hover .feature-icon::before {
opacity: 1;
}
.feature-icon svg {
width: 24px;
height: 24px;
stroke: currentColor;
transition: transform 0.3s ease;
}
.feature-card:hover .feature-icon svg {
transform: rotate(5deg);
}
.feature-content {
position: relative;
z-index: 1;
}
.feature-content h3 {
margin: 0 0 1rem;
font-size: 1.3rem;
color: #ffffff;
font-weight: 600;
}
.feature-content p {
margin: 0;
color: var(--text);
line-height: 1.6;
font-size: 1rem;
}
/* Results Grid */
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0;
}
.result-item {
text-align: center;
padding: 1.5rem;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.result-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: #ffffff;
line-height: 1;
}
.result-label {
display: block;
font-size: 0.9rem;
color: var(--text);
margin-top: 0.5rem;
font-weight: 500;
}
.results-note {
text-align: center;
color: var(--muted);
font-style: italic;
margin-top: 1.5rem;
font-size: 0.95rem;
}
/* Tech Stack */
.tech-stack {
display: grid;
gap: 2rem;
margin-top: 1.5rem;
}
.tech-category {
text-align: center;
}
.tech-category h3 {
margin: 0 0 1rem;
font-size: 1.1rem;
color: #ffffff;
}
.tech-chips {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
}
/* CTA Section */
.text-center {
text-align: center;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 1.5rem;
flex-wrap: wrap;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.hero-metrics {
gap: 1rem;
}
.metric-item {
min-width: 100px;
}
.metric-number {
font-size: 1.5rem;
}
.approach-grid {
grid-template-columns: 1fr;
}
.skills-grid,
.features-showcase {
grid-template-columns: 1fr;
}
.results-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-step {
flex-direction: column;
text-align: center;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn {
width: 100%;
max-width: 300px;
}
.tech-chips {
justify-content: center;
}
}
/* timeline & rail */
.zen-loop{position:relative;overflow:hidden}
.zen-rail{position:absolute;left:28px;top:76px;bottom:24px;width:2px;background:linear-gradient(#ffffff,#cccccc);opacity:.6;border-radius:2px}
.timeline{margin-left:24px}
.timeline-item{position:relative;border:1px solid var(--edge);background:rgba(9,18,37,.78);border-radius:var(--radius-xl);padding:16px 16px 14px;box-shadow:inset 0 0 0 1px rgba(5,12,24,0.35);transition:transform .2s ease, box-shadow .2s ease}
.timeline-item:hover{transform:translateY(-2px);box-shadow:0 16px 44px -30px rgba(255,255,255,.45)}
.timeline-item::before{content:"";position:absolute;left:-22px;top:22px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.9));box-shadow:0 0 14px rgba(255,255,255,.45)}
.timeline-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.timeline-copy{color:var(--text-dim);margin:0}
/* tiny inline icons (SVG via mask) */
.ti{--c:var(--text);width:18px;height:18px;flex:0 0 18px;display:inline-block;background:var(--c);mask-size:contain;mask-repeat:no-repeat;mask-position:center}
.ti-kickoff{mask-image: url('data:image/svg+xml;utf8,')}
.ti-rough{mask-image: url('data:image/svg+xml;utf8,')}
.ti-checkpoint{mask-image: url('data:image/svg+xml;utf8,')}
.ti-publish{mask-image: url('data:image/svg+xml;utf8,')}
/* responsive helpers (utility classes for 12-col) */
.col-span-12{grid-column:span 12}
@media (min-width: 960px){
.md\:col-span-6{grid-column:span 6}
}
/* ===== DISCORD ACCORDION ===== */
.accordion {
background: var(--panel);
border: 1px solid var(--edge);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-soft);
}
.accordion-item {
border-bottom: 1px solid var(--edge-2);
margin-bottom: var(--space-4);
}
.accordion-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.accordion-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4) 0;
cursor: pointer;
transition: color 0.3s ease;
}
.accordion-head:hover {
color: var(--accent);
}
.accordion-head h3 {
margin: 0;
font-size: 1.1rem;
font-weight: 600;
}
.accordion-toggle {
font-size: 1.2rem;
font-weight: 300;
transition: transform 0.3s ease;
color: var(--text-dim);
}
.accordion-item.is-open .accordion-toggle {
transform: rotate(45deg);
}
.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
padding: 0;
}
.accordion-item.is-open .accordion-body {
max-height: 200px;
padding-bottom: var(--space-4);
}
.accordion-body p {
margin: 0;
color: var(--text-dim);
line-height: 1.6;
}
.quick-facts {
margin-top: var(--space-6);
}
.quick-facts h4 {
margin: 0 0 var(--space-3);
font-size: 1rem;
color: var(--text-strong);
}
.quick-facts ul {
margin: 0;
padding-left: var(--space-5);
color: var(--text-dim);
}
.quick-facts li {
margin-bottom: var(--space-2);
}
.grid-2 {
display: grid;
gap: var(--grid-gap);
grid-template-columns: 1fr;
}
@media (min-width: 960px) {
.grid-2 {
grid-template-columns: 2fr 1fr;
}
}
/* ===== HOME HERO (distinct palette) ===== */
:root{
--home-bg-start:#0b1730;
--home-bg-end:#091225;
--home-accent-1:#69a8ff;
--home-accent-2:#2d6bba;
--home-ring:rgba(105,168,255,.28);
}
.home-hero{
position:relative;
overflow:hidden;
background:
radial-gradient(1200px 600px at 75% 10%, rgba(105,168,255,.22), transparent 60%),
radial-gradient(900px 500px at 20% 80%, rgba(45,107,186,.18), transparent 60%),
linear-gradient(180deg, var(--home-bg-start), var(--home-bg-end));
border:1px solid var(--border);
min-height: clamp(520px, 78vh, 880px);
}
.home-hero-inner{
position:relative;
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
gap: clamp(26px, 6vw, 56px);
padding: clamp(40px, 8vw, 80px);
z-index: 1;
}
.hero-text{min-width:0}
.hero-title{
font-size:clamp(2rem, 1.4rem + 3vw, 3.4rem);
margin:0;
letter-spacing:.2px;
}
.hero-cta{
display:flex;
gap:16px;
margin-top:18px;
align-items:center;
flex-wrap:wrap;
}
.hero-cta-buttons{
display:flex;
gap:12px;
flex-wrap:wrap;
}
.hero-cta .btn {
min-width: 152px;
justify-content: center;
padding: 0.78rem 1.65rem;
font-size: 0.95rem;
border-radius: 18px;
font-weight: 600;
letter-spacing: 0.02em;
transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.hero-cta .btn.btn-primary {
background: linear-gradient(90deg, rgba(105, 168, 255, 0.95), rgba(139, 188, 255, 1));
color: #041024;
box-shadow: 0 18px 36px -20px rgba(105, 168, 255, 0.55);
}
.hero-cta .btn.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 22px 46px -22px rgba(105, 168, 255, 0.62);
filter: brightness(1.05);
}
.hero-cta .btn.btn-ghost {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--edge);
color: var(--text);
box-shadow: 0 14px 32px -24px rgba(4, 18, 40, 0.65);
}
.hero-cta .btn.btn-ghost:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 18px 44px -26px rgba(4, 18, 40, 0.7);
}
.hero-socials {
display: flex;
gap: 0.65rem;
}
.hero-socials .social-btn {
width: 42px;
height: 42px;
border-radius: 999px;
display: grid;
place-items: center;
color: var(--text);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--edge);
box-shadow: 0 14px 32px -24px rgba(4, 18, 40, 0.65);
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.hero-socials .social-btn:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 18px 44px -26px rgba(105, 168, 255, 0.35);
}
.hero-socials svg {
width: 20px;
height: 20px;
}
.home-hero .btn-solid{
background: linear-gradient(90deg, var(--home-accent-1), rgba(139, 188, 255, 0.95));
color: #05142b;
box-shadow: 0 16px 32px -18px rgba(105,168,255,.4);
}
.home-hero .btn-solid:hover{transform:translateY(-1px)}
.home-hero .btn-ghost{
border-color: var(--edge);
background: rgba(255,255,255,.04);
}
/* Canvas positioning */
#home-neural{
position:absolute; inset:0; width:100%; height:100%;
z-index:0; pointer-events:none;
opacity:.55; /* higher than before so it’s visible */
}
/* Small screens: stack vertically */
@media (max-width:720px){
.home-hero-inner{grid-template-columns:1fr; justify-items:start}
.hero-cta{flex-wrap:wrap}
}
/* ==== Resume layout width & contact row ==== */
.resume-shell{
max-width: clamp(960px, 92vw, 1120px);
margin: clamp(-0.6rem, 1vw, 1.2rem) auto 3.4rem;
padding-inline: clamp(1rem, 4vw, 2rem);
}
.resume-sheet{
max-width: clamp(860px, 88vw, 1080px);
margin-inline: auto;
}
@media (min-width: 1280px){
.resume-sheet{ max-width: 1120px; }
}
/* contact row: keep on one line when there’s room, wrap gracefully on small viewports */
.resume-contact{
display: flex;
flex-wrap: wrap;
gap: .65rem .9rem;
align-items: center;
justify-content: center; /* center under the name */
color: var(--muted);
}
.resume-contact span{
color: inherit;
}
.resume-contact a{
color: var(--text);
text-decoration: none;
border-bottom: 1px dotted rgba(255,255,255,.18);
}
.resume-contact a:hover{ border-bottom-color: rgba(255,255,255,.38); }
.resume-meta{
display:flex;
flex-wrap:wrap;
gap:.6rem .8rem;
justify-content:center;
align-items:center;
color:var(--text-dim);
margin-bottom:0.45rem;
}
.resume-meta span{
color:inherit;
}
.resume-contact span{
opacity:0.7;
}
@media (min-width: 1024px){
.resume-contact{ font-size: 0.975rem; }
}
/* Print: match width to page for clean PDF prints */
@media print{
.resume-shell, .resume-sheet{
max-width: 7.5in; /* ~ Letter minus margins */
margin: 0 auto;
box-shadow: none;
border: none;
}
}
/* reset legacy separators */
.resume-contact span::after,
.resume-contact a::after{
content: none !important;
margin: 0 !important;
}
/* === Zen CTA + cadence === */
.cta-buttons{
display:flex;
gap:0.75rem;
margin-top:1.8rem;
}
.cta-buttons .btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:0.75rem 1.4rem;
border-radius:999px;
font-weight:600;
}
.btn.primary{
background: var(--btn-primary-bg);
color: var(--btn-primary-text);
border: none;
box-shadow: 0 18px 36px -24px rgba(105, 168, 255, 0.45);
transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.btn.primary:hover{
transform:translateY(-1px);
box-shadow:0 24px 52px -30px rgba(105,168,255,0.55);
}
.zen-cadence{
margin:1rem auto 0;
}
/* Cadence row under hero */
.chips.cadence {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.6rem;
margin: 1rem 0 1.5rem 0;
}
.chips.cadence .chip {
font-size: 0.82rem;
}
/* Overview narrative */
.overview-card{
display:flex;
flex-direction:column;
gap:1.4rem;
}
.overview-card h2{
margin:0;
font-size:0.95rem;
letter-spacing:0.22em;
text-transform:uppercase;
color:var(--text-dim);
}
.overview-card p{
margin:0;
line-height:1.65;
color:rgba(224,230,241,0.88);
}
/* zen body layout tweaks */
.zen-body{
margin-top:2.2rem;
align-items:start;
}
/* Weekly loop cards */
.weekly-loop{
display:flex;
flex-direction:column;
gap:1rem;
}
.weekly-loop h2{
margin:0 0 0.8rem 0;
font-size:0.95rem;
letter-spacing:0.22em;
text-transform:uppercase;
color:var(--text-dim);
}
/* Zen steps */
.zen-step {
display: flex;
gap: 0.9rem;
padding: 1rem 1.1rem;
border-radius: var(--radius-xl);
background: var(--panelElevated);
box-shadow: var(--shadow-soft);
border: 1px solid var(--edge);
}
.zen-step-icon {
flex: 0 0 28px;
height: 28px;
width: 28px;
display: grid;
place-items: center;
border-radius: 999px;
background: radial-gradient(120% 120% at 30% 20%, rgba(105,168,255,.3), rgba(105,168,255,.12) 60%, rgba(105,168,255,.08));
box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 2px 10px rgba(0,0,0,.25);
font-size: 0.9rem;
}
.zen-step-body h3 {
margin: 0 0 .25rem 0;
font-size: 1rem;
letter-spacing: .1px;
}
.zen-step-body p {
margin: 0;
color: var(--muted);
}
@media (max-width: 480px) {
.chips.cadence .chip { font-size: 0.78rem; }
.cta-buttons{
flex-direction:column;
align-items:stretch;
}
.cta-buttons .btn{
width:100%;
}
}
/* --- Projects hero (distinct theme) --- */
:root {
--projHueA: 205;
--projHueB: 230;
}
.projects-hero {
position: relative;
overflow: clip;
border-radius: var(--radius-xl);
padding: var(--space-12) var(--space-6) var(--space-8);
margin-top: var(--space-20);
margin-bottom: var(--space-6);
background: radial-gradient(
120% 100% at 10% 0%,
hsl(var(--projHueA) 70% 16% / 0.45) 0%,
hsl(var(--projHueB) 70% 12% / 0.3) 50%,
transparent 80%
);
border: 1px solid var(--edge);
box-shadow: var(--shadow-soft);
}
.projects-hero__inner {
position: relative;
z-index: 1;
}
.projects-hero .eyebrow {
letter-spacing: 0.16em;
font-size: 0.8rem;
color: var(--muted);
margin: 0 0 0.5rem;
}
.projects-hero h1 {
margin: 0 0 0.35rem;
}
.projects-hero .subtle {
color: var(--muted);
max-width: 70ch;
}
#projects-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
opacity: 0.9;
}
/* --- Grid & cards --- */
.projects-grid {
--gap: clamp(1rem, 2.1vw, 1.3rem);
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--gap);
margin: var(--space-6) auto var(--space-12);
}
.projects-grid > .project-card {
grid-column: span 4;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.12));
border: 1px solid var(--edge);
border-radius: var(--radius-xl);
padding: 1rem;
box-shadow: var(--shadow-soft);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
transform-style: preserve-3d;
will-change: transform;
outline: none;
position: relative;
overflow: hidden;
}
@media (max-width: 1000px) {
.projects-grid > .project-card {
grid-column: span 6;
}
}
@media (max-width: 680px) {
.projects-grid > .project-card {
grid-column: span 12;
}
}
.project-card:hover,
.project-card:focus-visible {
border-color: rgba(255, 255, 255, 0.14);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.project-card .cover {
border-radius: 14px;
overflow: hidden;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(18px, 3vw, 28px);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}
.project-card__body {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.project-card__body h3 {
margin: 0;
font-size: 1.2rem;
}
.project-card__body p {
margin: 0;
}
.project-card h3 a {
text-decoration: none;
color: inherit;
}
.project-card h3 a:hover {
text-decoration: underline;
}
.project-logo--tile {
width: clamp(72px, 18vw, 140px);
height: clamp(72px, 18vw, 140px);
object-fit: contain;
display: block;
}
.cover-discord {
background: radial-gradient(circle at 20% 20%, rgba(99,102,241,0.45), rgba(35,22,60,0.85));
}
.cover-zen {
background: radial-gradient(circle at 20% 20%, rgba(20,20,20,0.92), rgba(0,0,0,0.6));
}
.cover-thesis {
background: radial-gradient(circle at 20% 20%, rgba(240,94,40,0.45), rgba(96,24,12,0.85));
}
/* 3D tilt subtle glare */
.project-card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 120% at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.1), transparent 40%);
border-radius: inherit;
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
.project-card:hover::after,
.project-card:focus-visible::after {
opacity: 1;
}
@media (max-width: 480px) {
.chips.cadence .chip {
font-size: 0.78rem;
}
.cta-buttons {
flex-direction: column;
align-items: stretch;
}
.cta-buttons .btn {
width: 100%;
}
}
/* HERO layout refinements */
.key-points { margin: 0.75rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }
.key-points li { list-style: disc; opacity: 0.9; }
/* Hero adjustments */
.hero-card {
margin-top: clamp(18px, 5vh, 48px);
}
.hero-card .content,
.hero-card .stack {
gap: 14px;
}
.hero-card .stack {
display: flex;
align-items: center;
}
.hero-pfp {
border-radius: 9999px;
box-shadow:
0 10px 30px rgba(0,0,0,0.35),
0 0 0 3px rgba(255,255,255,0.06),
0 0 24px rgba(0,200,170,0.25);
display: inline-block;
vertical-align: middle;
width: clamp(96px, 12vw, 120px);
height: clamp(96px, 12vw, 120px);
object-fit: cover;
}
.hero-card h1 {
margin-bottom: 12px;
}
h1 + .hero-sub {
margin: 0;
font-size: clamp(16px, 1.15vw + 10px, 18px);
color: var(--text-2, #cfd6e6);
letter-spacing: 0.2px;
}
.hero-sub__yale {
font-family: "Yale 2024 Roman", "Yale", "IM FELL English", Georgia, "Times New Roman", serif;
font-weight: 500;
letter-spacing: 0.04em;
color: inherit;
}
@media (min-width: 900px) {
.hero-card .stack {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
align-items: center;
gap: 18px;
}
.hero-pfp {
width: 120px;
height: 120px;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-pfp {
transition: none;
animation: none;
}
}
/* ===== DISCORD PROJECT OVERVIEW ===== */
.project-overview {
display: grid;
gap: var(--space-8);
grid-template-columns: 1fr;
}
.project-overview .card {
background: var(--panel);
border: 1px solid var(--edge);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-soft);
}
.project-overview h2 {
margin: 0 0 var(--space-4);
font-size: 1.4rem;
font-weight: 600;
color: var(--text-strong);
}
.project-overview h3 {
margin: var(--space-5) 0 var(--space-3);
font-size: 1.1rem;
font-weight: 600;
color: var(--text-strong);
}
.project-overview p {
margin: 0 0 var(--space-4);
color: var(--text-dim);
line-height: 1.6;
}
.project-overview ul {
margin: 0;
padding-left: var(--space-5);
color: var(--text-dim);
}
.project-overview li {
margin-bottom: var(--space-2);
}
.constraints {
margin-top: var(--space-6);
padding-top: var(--space-5);
border-top: 1px solid var(--edge-2);
}
.status-details {
margin-top: var(--space-6);
}
.status-details h3 {
margin: var(--space-4) 0 var(--space-2);
font-size: 1rem;
color: var(--accent);
}
.status-details p {
margin: 0 0 var(--space-3);
font-size: 0.95rem;
}
.launch-details {
display: grid;
gap: var(--space-5);
margin-top: var(--space-5);
}
.launch-item {
padding: var(--space-4);
background: rgba(255, 255, 255, 0.02);
border: 1px solid var(--edge-2);
border-radius: 12px;
}
.launch-item h3 {
margin: 0 0 var(--space-2);
font-size: 1rem;
color: var(--accent);
}
.launch-item p {
margin: 0;
font-size: 0.95rem;
color: var(--text-dim);
}
.stack-description {
margin-top: var(--space-4);
font-size: 0.95rem;
color: var(--text-dim);
font-style: italic;
}
@media (min-width: 768px) {
.launch-details {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.launch-details {
grid-template-columns: repeat(3, 1fr);
}
}
/* ===== DISCORD PAGE STYLES ===== */
/* Discord Hero Section */
/* Professional Discord Hero */
.discord-hero-professional {
margin-top: clamp(2rem, 6vh, 3rem);
margin-bottom: clamp(2rem, 4vh, 2.5rem);
padding: clamp(2rem, 4vw, 3rem) 0;
background: linear-gradient(135deg, rgba(88, 101, 242, 0.08), rgba(114, 137, 218, 0.05));
border-radius: 20px;
border: 1px solid rgba(88, 101, 242, 0.15);
position: relative;
overflow: hidden;
}
.discord-hero-professional::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 20%, rgba(88, 101, 242, 0.1), transparent 60%),
radial-gradient(circle at 80% 80%, rgba(114, 137, 218, 0.08), transparent 60%);
pointer-events: none;
}
.hero-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
}
.hero-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.hero-title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 800;
margin: 0 0 1.25rem;
line-height: 1.1;
color: #ffffff;
letter-spacing: -0.03em;
background: linear-gradient(135deg, #ffffff, rgba(114, 137, 218, 0.8));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: clamp(1rem, 2vw, 1.2rem);
color: rgba(255, 255, 255, 0.85);
margin: 0 0 2rem;
line-height: 1.6;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 2.5rem;
margin-bottom: 2rem;
}
.stat-item {
text-align: center;
}
.stat-number {
display: block;
font-size: clamp(1.8rem, 3vw, 2.2rem);
font-weight: 700;
color: #5865f2;
margin-bottom: 0.5rem;
line-height: 1;
}
.stat-label {
display: block;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hero-cta {
margin-top: 1.5rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.cta-button {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 16px 32px;
background: linear-gradient(135deg, #5865f2, #7289da);
color: #ffffff;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(88, 101, 242, 0.3);
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(88, 101, 242, 0.4);
background: linear-gradient(135deg, #4752c4, #5865f2);
}
/* Scroll Down Indicator */
.scroll-indicator {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
margin-top: 2rem;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.scroll-indicator:hover {
opacity: 1;
}
.scroll-text {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.scroll-arrow {
color: rgba(255, 255, 255, 0.6);
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-8px);
}
60% {
transform: translateY(-4px);
}
}
/* Discord Mockup */
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
}
.discord-mockup {
background: #2f3136;
border-radius: 12px;
border: 1px solid #40444b;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
max-width: 400px;
width: 100%;
}
.mockup-header {
background: #36393f;
padding: 12px 16px;
border-bottom: 1px solid #40444b;
display: flex;
align-items: center;
gap: 12px;
}
.mockup-dots {
display: flex;
gap: 4px;
}
.mockup-dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #72767d;
}
.mockup-title {
color: #ffffff;
font-size: 0.9rem;
font-weight: 600;
}
.mockup-content {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.message-row {
display: flex;
gap: 12px;
align-items: flex-start;
}
.message-row.translated {
background: rgba(88, 101, 242, 0.1);
border-radius: 8px;
padding: 8px;
margin: 0 -8px;
}
.message-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #5865f2, #7289da);
flex-shrink: 0;
}
.message-content {
flex: 1;
}
.message-name {
color: #ffffff;
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 2px;
}
.message-text {
color: #dcddde;
font-size: 0.9rem;
line-height: 1.4;
}
.translation-badge {
display: inline-block;
background: rgba(88, 101, 242, 0.2);
color: #5865f2;
font-size: 0.75rem;
padding: 2px 6px;
border-radius: 4px;
margin-top: 4px;
}
/* Responsive Design */
@media (max-width: 968px) {
.hero-stats {
gap: 2rem;
}
.hero-wrapper {
padding: 0 1.5rem;
}
}
@media (max-width: 640px) {
.discord-hero-professional {
margin-top: clamp(2rem, 6vh, 3rem);
margin-bottom: clamp(2rem, 4vh, 2.5rem);
padding: clamp(2rem, 4vw, 3rem) 0;
}
.hero-wrapper {
padding: 0 1rem;
}
.hero-stats {
flex-direction: column;
gap: 1.5rem;
}
.cta-button {
padding: 14px 28px;
font-size: 0.95rem;
}
.scroll-indicator {
margin-top: 1.5rem;
}
.scroll-text {
font-size: 0.8rem;
}
}
.discord-hero::before {
content: "";
position: absolute;
inset: -20%;
background: radial-gradient(circle at 30% 20%, rgba(88, 101, 242, 0.3), transparent 70%),
radial-gradient(circle at 70% 25%, rgba(114, 137, 218, 0.2), transparent 65%);
filter: blur(20px);
opacity: 0.5;
animation: discordGlow 30s ease-in-out infinite;
transform: translateZ(0);
will-change: transform;
}
.discord-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(130deg, rgba(255, 255, 255, 0.06), transparent 55%);
opacity: 0.8;
}
.discord-hero .hero-content {
position: relative;
z-index: 2;
}
.discord-hero .hero-title {
font-size: clamp(2.8rem, 6vw, 4.2rem);
font-weight: 900;
letter-spacing: -0.03em;
margin: 0 0 clamp(1rem, 2vw, 1.5rem);
line-height: 1.05;
background: linear-gradient(135deg, #ffffff, rgba(114, 137, 218, 0.8));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.discord-hero .hero-subtitle {
font-size: clamp(1rem, 2.2vw, 1.25rem);
margin: 0 0 clamp(1.5rem, 3vw, 2rem);
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.5;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.discord-hero .hero-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(0.75rem, 2vw, 1rem);
margin-top: clamp(1rem, 3vw, 1.75rem);
}
.discord-hero .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: clamp(0.75rem, 2vw, 1rem) clamp(1.25rem, 3vw, 1.75rem);
border-radius: 999px;
font-weight: 600;
font-size: clamp(0.9rem, 2vw, 1rem);
transition: all 0.25s ease;
position: relative;
overflow: hidden;
min-height: 44px;
}
.discord-hero .btn-primary {
background: linear-gradient(135deg, #5865f2, #7289da);
color: #ffffff;
border: none;
box-shadow: 0 18px 36px -20px rgba(88, 101, 242, 0.55);
}
.discord-hero .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 22px 46px -22px rgba(88, 101, 242, 0.65);
filter: brightness(1.05);
background: linear-gradient(135deg, #4752c4, #5865f2);
}
.discord-hero .btn-primary:active {
transform: translateY(0);
}
.discord-hero .btn-ghost {
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--edge);
color: var(--text);
backdrop-filter: blur(10px);
}
.discord-hero .btn-ghost:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.discord-hero .btn-ghost:active {
transform: translateY(0);
}
/* Discord Page - New Organized Layout */
/* Base section styling */
.discord-overview,
.discord-technical,
.discord-performance,
.discord-stack,
.discord-privacy,
.discord-status {
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 24px;
padding: clamp(1.5rem, 3vw, 2.5rem);
margin-bottom: clamp(1rem, 2vw, 1.5rem);
backdrop-filter: blur(6px) saturate(120%);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.discord-overview:hover,
.discord-technical:hover,
.discord-performance:hover,
.discord-stack:hover,
.discord-privacy:hover,
.discord-status:hover {
transform: translateY(-4px);
border-color: rgba(105, 168, 255, 0.3);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(105, 168, 255, 0.15);
}
/* Section headers */
.discord-overview h2,
.discord-technical h2,
.discord-performance h2,
.discord-stack h2,
.discord-privacy h2,
.discord-status h2 {
margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
font-size: clamp(1.75rem, 4vw, 2.5rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.1;
color: var(--text-strong);
position: relative;
display: flex;
align-items: center;
gap: clamp(0.75rem, 1.5vw, 1rem);
}
/* Icon styling */
.section-icon {
width: clamp(1.5rem, 3vw, 2rem);
height: clamp(1.5rem, 3vw, 2rem);
color: var(--accent);
opacity: 0.8;
flex-shrink: 0;
}
.solution-icon {
width: clamp(1rem, 2vw, 1.25rem);
height: clamp(1rem, 2vw, 1.25rem);
color: var(--accent);
opacity: 0.9;
margin-right: clamp(0.5rem, 1vw, 0.75rem);
}
.flow-icon {
width: clamp(1rem, 2vw, 1.25rem);
height: clamp(1rem, 2vw, 1.25rem);
color: rgba(105, 168, 255, 0.7);
margin-right: clamp(0.5rem, 1vw, 0.75rem);
flex-shrink: 0;
}
.discord-overview h2::after,
.discord-technical h2::after,
.discord-performance h2::after,
.discord-stack h2::after,
.discord-privacy h2::after,
.discord-status h2::after {
content: '';
position: absolute;
bottom: -0.5rem;
left: 0;
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--accent), rgba(105, 168, 255, 0.5));
border-radius: 2px;
}
/* Overview Section */
.discord-overview-content {
max-width: 800px;
}
.discord-overview-text {
margin: 0 0 clamp(2rem, 4vw, 3rem);
font-size: clamp(1.125rem, 2.5vw, 1.375rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.discord-solution {
background: rgba(105, 168, 255, 0.08);
border: 1px solid rgba(105, 168, 255, 0.2);
border-radius: 16px;
padding: clamp(1.5rem, 3vw, 2rem);
position: relative;
}
.discord-solution h3 {
margin: 0 0 clamp(1rem, 2vw, 1.5rem);
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
font-weight: 700;
color: var(--accent);
}
.discord-solution p {
margin: 0;
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
/* Technical Implementation Flow */
.discord-flow {
display: grid;
gap: clamp(1.5rem, 3vw, 2rem);
margin-top: clamp(2rem, 4vw, 3rem);
}
.discord-flow-step {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(1.5rem, 3vw, 2rem);
align-items: start;
padding: clamp(1.5rem, 3vw, 2rem);
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
transition: all 0.3s ease;
}
.discord-flow-step:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(105, 168, 255, 0.15);
transform: translateX(8px);
}
.flow-number {
width: clamp(3rem, 6vw, 4rem);
height: clamp(3rem, 6vw, 4rem);
background: linear-gradient(135deg, var(--accent), rgba(105, 168, 255, 0.8));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(1.25rem, 2.5vw, 1.5rem);
font-weight: 800;
color: var(--bg-0);
box-shadow: 0 8px 24px rgba(105, 168, 255, 0.3);
}
.flow-content h3 {
margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
font-size: clamp(1.125rem, 2.2vw, 1.375rem);
font-weight: 700;
color: var(--text-strong);
display: flex;
align-items: center;
}
.flow-content p {
margin: 0;
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}
/* Performance Metrics */
.discord-performance-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: clamp(1.5rem, 3vw, 2rem);
margin: clamp(2rem, 4vw, 3rem) 0;
}
.performance-metric {
text-align: center;
padding: clamp(1.5rem, 3vw, 2rem);
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
transition: all 0.3s ease;
}
.performance-metric:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(105, 168, 255, 0.15);
transform: translateY(-4px);
}
.metric-value {
font-size: clamp(1.75rem, 3.5vw, 2.25rem);
font-weight: 800;
color: var(--accent);
margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}
.metric-label {
font-size: clamp(0.9rem, 1.8vw, 1rem);
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
.discord-constraints {
margin-top: clamp(2rem, 4vw, 3rem);
}
.discord-constraints h3 {
margin: 0 0 clamp(1rem, 2vw, 1.5rem);
font-size: clamp(1.125rem, 2.2vw, 1.375rem);
font-weight: 700;
color: var(--text-strong);
}
.constraints-list {
margin: 0;
padding-left: clamp(1.25rem, 2.5vw, 1.75rem);
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
}
.constraints-list li {
margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
font-size: clamp(1rem, 2vw, 1.125rem);
}
/* Technology Stack */
.discord-stack-grid {
display: grid;
gap: clamp(1.5rem, 3vw, 2rem);
margin-top: clamp(2rem, 4vw, 3rem);
}
.stack-item {
padding: clamp(1.5rem, 3vw, 2rem);
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
transition: all 0.3s ease;
}
.stack-item:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(105, 168, 255, 0.15);
transform: translateY(-2px);
}
.stack-category {
font-size: clamp(0.85rem, 1.7vw, 1rem);
font-weight: 600;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
}
.stack-tech {
font-size: clamp(1.125rem, 2.2vw, 1.375rem);
font-weight: 700;
color: var(--text-strong);
margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}
.stack-desc {
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
/* Privacy & User Experience */
.privacy-content {
display: grid;
gap: clamp(1.5rem, 3vw, 2rem);
margin-top: clamp(2rem, 4vw, 3rem);
}
.privacy-feature {
padding: clamp(1.5rem, 3vw, 2rem);
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
transition: all 0.3s ease;
}
.privacy-feature:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(105, 168, 255, 0.15);
transform: translateY(-2px);
}
.privacy-feature h3 {
margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
font-size: clamp(1.125rem, 2.2vw, 1.375rem);
font-weight: 700;
color: var(--text-strong);
}
.privacy-feature p {
margin: 0;
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}
/* Status Section */
.status-content {
margin-top: clamp(2rem, 4vw, 3rem);
}
.status-main {
margin-bottom: clamp(2rem, 4vw, 3rem);
}
.status-main p {
margin: 0;
font-size: clamp(1.125rem, 2.5vw, 1.375rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
}
.status-main a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid rgba(105, 168, 255, 0.3);
transition: border-color 0.3s ease;
}
.status-main a:hover {
border-color: var(--accent);
}
.status-roadmap {
display: grid;
gap: clamp(1.5rem, 3vw, 2rem);
}
.roadmap-item {
padding: clamp(1.5rem, 3vw, 2rem);
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 16px;
transition: all 0.3s ease;
}
.roadmap-item:hover {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(105, 168, 255, 0.15);
transform: translateY(-2px);
}
.roadmap-item h3 {
margin: 0 0 clamp(0.75rem, 1.5vw, 1rem);
font-size: clamp(1.125rem, 2.2vw, 1.375rem);
font-weight: 700;
color: var(--text-strong);
}
.roadmap-item p {
margin: 0;
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}
/* Responsive adjustments for new layout */
@media (max-width: 768px) {
.discord-details-grid {
grid-template-columns: 1fr;
gap: clamp(1rem, 2vw, 1.5rem);
}
.discord-stack-chips {
flex-direction: column;
align-items: center;
}
.discord-stack-chip {
width: 100%;
max-width: 200px;
}
.discord-status-grid {
grid-template-columns: 1fr;
}
}
/* Responsive Adjustments */
@media (max-width: 1024px) {
.discord-grid {
gap: clamp(1.5rem, 3vw, 2rem);
}
}
@media (max-width: 768px) {
.discord-hero {
padding: clamp(2rem, 5vw, 2.5rem) clamp(1.5rem, 4vw, 2rem);
margin-top: clamp(2rem, 6vh, 3rem);
}
.discord-hero .hero-actions {
flex-direction: column;
align-items: center;
}
.discord-hero .btn {
width: 100%;
max-width: 280px;
}
.discord-grid {
gap: clamp(1.5rem, 3vw, 2rem);
}
.accordion-timeline {
padding: clamp(1.25rem, 2.5vw, 1.5rem);
}
.timeline-item {
padding-left: clamp(2rem, 4vw, 2.5rem);
}
.discord-stack {
padding: clamp(1.25rem, 2.5vw, 1.5rem);
}
}
@media (max-width: 480px) {
.discord-hero .hero-title {
font-size: clamp(2.2rem, 8vw, 2.8rem);
}
.discord-hero .hero-subtitle {
font-size: clamp(0.95rem, 4vw, 1.1rem);
}
.timeline-trigger {
font-size: clamp(0.95rem, 4vw, 1.1rem);
}
}
/* Animation Keyframes */
@keyframes discordGlow {
0% {
transform: translate3d(-8px, -4px, 0) scale(1.01);
}
50% {
transform: translate3d(6px, 5px, 0) scale(1.02);
}
100% {
transform: translate3d(-8px, -4px, 0) scale(1.01);
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
.discord-hero::before {
animation: none;
}
.timeline-body {
transition: none;
}
.timeline-item.is-open .timeline-body {
max-height: none;
}
}