/* Prevent mobile horizontal drift */
html, body {
overflow-x: hidden;
max-width: 100vw;
width: 100%;
}
/* Suavizado de bordes y selecciones */
::selection {
background-color: #0284c7;
color: #ffffff;
}
.glass-nav {
background: rgba(15, 23, 42, 0.82);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.radial-bg {
background: radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.12) 0%, rgba(15, 23, 42, 0) 70%);
}
.card-hover {
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 16px 32px -8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(99, 102, 241, 0.35);
}
/* Education Card alignment on mobile */
@media (max-width: 767px) {
.edu-header-container,
html[lang="es"] .edu-header-container {
min-height: auto !important;
}
}
.tablet-only-break {
display: none;
}
/* On tablet (768px to 1279px), 2-column cards wrap titles & meta: synchronize section heights for perfect symmetry */
@media (min-width: 768px) and (max-width: 1279px) {
.tablet-only-break {
display: inline !important;
}
.edu-header-container {
gap: 0.5rem !important;
}
.edu-header-container h4 {
font-size: 1.05rem !important;
line-height: 1.35 !important;
}
.edu-header-container,
html[lang="es"] .edu-header-container {
min-height: 7.75rem !important;
}
.edu-meta-container {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
min-height: 4.5rem !important;
gap: 0.25rem !important;
}
.edu-meta-divider {
display: none !important;
}
.edu-meta-inst,
.edu-meta-dates,
.edu-meta-cefr {
text-align: left !important;
}
.edu-desc-container {
min-height: 11.25rem !important;
}
.edu-skills-container {
min-height: 5.75rem !important;
align-content: flex-start !important;
align-items: flex-start !important;
}
.edu-bottom-container {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: flex-start !important;
gap: 0.35rem !important;
min-height: 4.25rem !important;
}
}
/* Desktop (1280px+): Synchronize Education card section heights for exact alignment */
@media (min-width: 1280px) {
.edu-header-container,
html[lang="es"] .edu-header-container {
min-height: 4.75rem !important;
}
.edu-meta-container {
min-height: 2.25rem !important;
}
.edu-desc-container {
min-height: 7.25rem !important;
}
.edu-skills-container {
min-height: 3.5rem !important;
align-content: flex-start !important;
align-items: flex-start !important;
}
.edu-bottom-container {
min-height: 2.75rem !important;
display: flex !important;
align-items: center !important;
}
}
/* Retro Gaming & Code Aesthetics */
.font-pixel {
font-family: 'Silkscreen', monospace;
letter-spacing: -0.01em;
}
.pixel-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.2rem 0.55rem;
border-radius: 6px;
font-family: 'Silkscreen', monospace;
font-size: 0.625rem;
line-height: 1;
background: rgba(14, 165, 233, 0.1);
border: 1px solid rgba(56, 189, 248, 0.35);
color: #38bdf8;
box-shadow: 2px 2px 0px 0px rgba(15, 23, 42, 0.9);
}
.retro-hud-box {
background: rgba(15, 23, 42, 0.75);
border: 1px solid rgba(51, 65, 85, 0.85);
box-shadow: 3px 3px 0px 0px rgba(15, 23, 42, 0.9), 0 0 15px -4px rgba(2, 132, 199, 0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.retro-card {
border: 2px solid rgba(51, 65, 85, 0.95);
border-radius: 6px !important;
box-shadow: 4px 4px 0px 0px rgba(15, 23, 42, 0.95);
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.retro-card:hover {
border-color: rgba(56, 189, 248, 0.65);
box-shadow: 6px 6px 0px 0px rgba(2, 132, 199, 0.35);
transform: translateY(-2px);
}
.terminal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.4rem 0.75rem;
border-bottom: 1px solid rgba(51, 65, 85, 0.7);
background: rgba(15, 23, 42, 0.75);
font-family: 'JetBrains Mono', monospace;
font-size: 0.68rem;
color: #94a3b8;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.pixel-quest-btn {
position: relative;
z-index: 0;
clip-path: polygon(
0 6px, 2px 6px, 2px 4px, 4px 4px, 4px 2px, 6px 2px, 6px 0,
calc(100% - 6px) 0, calc(100% - 6px) 2px, calc(100% - 4px) 2px, calc(100% - 4px) 4px, calc(100% - 2px) 4px, calc(100% - 2px) 6px, 100% 6px,
100% calc(100% - 6px), calc(100% - 2px) calc(100% - 6px), calc(100% - 2px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 2px), calc(100% - 6px) calc(100% - 2px), calc(100% - 6px) 100%,
6px 100%, 6px calc(100% - 2px), 4px calc(100% - 2px), 4px calc(100% - 4px), 2px calc(100% - 4px), 2px calc(100% - 6px), 0 calc(100% - 6px)
);
border: none !important;
background: #38bdf8;
filter: drop-shadow(3px 3px 0px rgba(2, 132, 199, 0.7)) drop-shadow(0 0 16px rgba(56, 189, 248, 0.45));
animation: quest-beacon-glow 2.6s ease-in-out infinite;
transition: all 0.25s ease;
}
.pixel-quest-btn::before {
content: "";
position: absolute;
inset: 2px;
clip-path: inherit;
z-index: -1;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(8, 47, 73, 0.95));
transition: all 0.25s ease;
}
@keyframes quest-beacon-glow {
0%, 100% {
background: #38bdf8;
filter: drop-shadow(3px 3px 0px rgba(2, 132, 199, 0.7)) drop-shadow(0 0 16px rgba(56, 189, 248, 0.45));
}
50% {
background: #34d399;
filter: drop-shadow(3px 3px 0px rgba(16, 185, 129, 0.8)) drop-shadow(0 0 28px rgba(52, 211, 153, 0.65));
}
}
html.light .pixel-quest-btn,
html.light .pixel-quest-btn span,
html.light #start-adventure-btn,
html.light #start-adventure-btn span {
color: #ffffff !important;
}
.pixel-quest-btn:active {
transform: translateY(1px);
}
/* Stepped Pixel Corners Frame (8-bit / 16-bit) */
.pixel-corners-photo,
.pixel-corners-card {
clip-path: polygon(
0 12px,
4px 12px,
4px 8px,
8px 8px,
8px 4px,
12px 4px,
12px 0,
calc(100% - 12px) 0,
calc(100% - 12px) 4px,
calc(100% - 8px) 4px,
calc(100% - 8px) 8px,
calc(100% - 4px) 8px,
calc(100% - 4px) 12px,
100% 12px,
100% calc(100% - 12px),
calc(100% - 4px) calc(100% - 12px),
calc(100% - 4px) calc(100% - 8px),
calc(100% - 8px) calc(100% - 8px),
calc(100% - 8px) calc(100% - 4px),
calc(100% - 12px) calc(100% - 4px),
calc(100% - 12px) 100%,
12px 100%,
12px calc(100% - 4px),
8px calc(100% - 4px),
8px calc(100% - 8px),
4px calc(100% - 8px),
4px calc(100% - 12px),
0 calc(100% - 12px)
);
}
.pixel-corners-sm {
clip-path: polygon(
0 8px,
3px 8px,
3px 5px,
5px 5px,
5px 3px,
8px 3px,
8px 0,
calc(100% - 8px) 0,
calc(100% - 8px) 3px,
calc(100% - 5px) 3px,
calc(100% - 5px) 5px,
calc(100% - 3px) 5px,
calc(100% - 3px) 8px,
100% 8px,
100% calc(100% - 8px),
calc(100% - 3px) calc(100% - 8px),
calc(100% - 3px) calc(100% - 5px),
calc(100% - 5px) calc(100% - 5px),
calc(100% - 5px) calc(100% - 3px),
calc(100% - 8px) calc(100% - 3px),
calc(100% - 8px) 100%,
8px 100%,
8px calc(100% - 3px),
5px calc(100% - 3px),
5px calc(100% - 5px),
3px calc(100% - 5px),
3px calc(100% - 8px),
0 calc(100% - 8px)
);
}
.pixel-frame-outer {
padding: 2px;
background: linear-gradient(135deg, rgba(56, 189, 248, 0.45), rgba(51, 65, 85, 0.95) 45%, rgba(15, 23, 42, 0.95));
filter: drop-shadow(4px 4px 0px rgba(15, 23, 42, 0.95));
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.pixel-frame-outer:hover {
background: linear-gradient(135deg, rgba(56, 189, 248, 0.8), rgba(14, 165, 233, 0.6) 45%, rgba(51, 65, 85, 0.95));
filter: drop-shadow(6px 6px 0px rgba(2, 132, 199, 0.35)) drop-shadow(0 0 18px rgba(56, 189, 248, 0.25));
transform: translateY(-2px);
}
/* Small Cards & Containers (Experience Responsibilities, Lightbox Photo Cards) */
.pixel-corners-sm.hover\:border-indigo-500\/40,
.pixel-corners-sm.hover\:border-emerald-500\/40,
.pixel-corners-sm.hover\:border-cyan-500\/40,
.pixel-corners-sm.hover\:border-amber-500\/40 {
position: relative;
z-index: 0;
border: none !important;
background: #334155 !important; /* Stepped Slate-700 Border */
filter: drop-shadow(2px 2px 0px rgba(15, 23, 42, 0.9));
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.pixel-corners-sm.hover\:border-indigo-500\/40::before,
.pixel-corners-sm.hover\:border-emerald-500\/40::before,
.pixel-corners-sm.hover\:border-cyan-500\/40::before,
.pixel-corners-sm.hover\:border-amber-500\/40::before {
content: "";
position: absolute;
inset: 1.5px;
background: #020617 !important;
clip-path: inherit;
z-index: -1;
transition: all 0.22s ease;
}
/* Hover Glow across Stepped Corners (Experience Items) */
.pixel-corners-sm.hover\:border-indigo-500\/40:hover {
background: #818cf8 !important;
filter: drop-shadow(0 0 14px rgba(99, 102, 241, 0.55)) drop-shadow(3px 3px 0px rgba(15, 23, 42, 0.95)) !important;
transform: translateY(-2px);
}
.pixel-corners-sm.hover\:border-emerald-500\/40:hover {
background: #34d399 !important;
filter: drop-shadow(0 0 14px rgba(16, 185, 129, 0.55)) drop-shadow(3px 3px 0px rgba(15, 23, 42, 0.95)) !important;
transform: translateY(-2px);
}
.pixel-corners-sm.hover\:border-cyan-500\/40:hover {
background: #22d3ee !important;
filter: drop-shadow(0 0 14px rgba(6, 182, 212, 0.55)) drop-shadow(3px 3px 0px rgba(15, 23, 42, 0.95)) !important;
transform: translateY(-2px);
}
.pixel-corners-sm.hover\:border-amber-500\/40:hover {
background: #fbbf24 !important;
filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.55)) drop-shadow(3px 3px 0px rgba(15, 23, 42, 0.95)) !important;
transform: translateY(-2px);
}
/* Light Mode Overrides for Small Cards */
html.light .pixel-corners-sm.hover\:border-indigo-500\/40,
html.light .pixel-corners-sm.hover\:border-emerald-500\/40,
html.light .pixel-corners-sm.hover\:border-cyan-500\/40,
html.light .pixel-corners-sm.hover\:border-amber-500\/40 {
background: #cbd5e1 !important;
filter: drop-shadow(2px 2px 0px rgba(148, 163, 184, 0.5));
}
html.light .pixel-corners-sm.hover\:border-indigo-500\/40::before,
html.light .pixel-corners-sm.hover\:border-emerald-500\/40::before,
html.light .pixel-corners-sm.hover\:border-cyan-500\/40::before,
html.light .pixel-corners-sm.hover\:border-amber-500\/40::before {
background: #ffffff !important;
}
html.light .pixel-corners-sm.hover\:border-indigo-500\/40:hover {
background: #6366f1 !important;
filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.4)) drop-shadow(3px 3px 0px rgba(148, 163, 184, 0.6)) !important;
}
html.light .pixel-corners-sm.hover\:border-emerald-500\/40:hover {
background: #10b981 !important;
filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.4)) drop-shadow(3px 3px 0px rgba(148, 163, 184, 0.6)) !important;
}
html.light .pixel-corners-sm.hover\:border-cyan-500\/40:hover {
background: #06b6d4 !important;
filter: drop-shadow(0 0 12px rgba(6, 182, 212, 0.4)) drop-shadow(3px 3px 0px rgba(148, 163, 184, 0.6)) !important;
}
html.light .pixel-corners-sm.hover\:border-amber-500\/40:hover {
background: #d97706 !important;
filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.4)) drop-shadow(3px 3px 0px rgba(148, 163, 184, 0.6)) !important;
}
/* Photo Lightbox Cards Stepped Border & Hover Glow */
.lightbox-trigger.pixel-corners-sm {
border: none !important;
background: #334155 !important; /* Stepped Slate-700 Border */
padding: 2px !important;
box-sizing: border-box !important;
box-shadow: none !important;
filter: drop-shadow(2px 2px 0px rgba(15, 23, 42, 0.9));
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.lightbox-trigger.pixel-corners-sm > img {
clip-path: inherit !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transform: none !important;
}
.lightbox-trigger.pixel-corners-sm > div.absolute {
inset: 2px !important;
clip-path: inherit !important;
}
/* Hero Profile Photo: strictly borderless in both Dark & Light modes */
#hero-photo-card,
#hero-photo-card.pixel-corners-sm,
html.light #hero-photo-card,
html.light #hero-photo-card.pixel-corners-sm {
border: none !important;
background: transparent !important;
background-color: transparent !important;
padding: 0 !important;
box-shadow: none !important;
filter: none !important;
outline: none !important;
}
#hero-photo-card:hover,
html.light #hero-photo-card:hover {
border: none !important;
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
}
#hero-photo-card.pixel-corners-sm > #hero-portal-overlay,
#hero-photo-card.pixel-corners-sm > #hero-portal-sprite-wrap {
inset: 0 !important;
clip-path: inherit !important;
}
.lightbox-trigger.pixel-corners-sm.hover\:border-brand-500\/50:hover {
background: #38bdf8 !important;
filter: drop-shadow(0 0 14px rgba(56, 189, 248, 0.55)) drop-shadow(3px 3px 0px rgba(15, 23, 42, 0.95)) !important;
transform: translateY(-2px);
}
.lightbox-trigger.pixel-corners-sm.hover\:border-cyan-500\/50:hover {
background: #22d3ee !important;
filter: drop-shadow(0 0 14px rgba(6, 182, 212, 0.55)) drop-shadow(3px 3px 0px rgba(15, 23, 42, 0.95)) !important;
transform: translateY(-2px);
}
.lightbox-trigger.pixel-corners-sm.hover\:border-amber-500\/50:hover {
background: #fbbf24 !important;
filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.55)) drop-shadow(3px 3px 0px rgba(15, 23, 42, 0.95)) !important;
transform: translateY(-2px);
}
html.light .lightbox-trigger.pixel-corners-sm {
background: #cbd5e1 !important;
filter: drop-shadow(2px 2px 0px rgba(148, 163, 184, 0.5));
box-shadow: none !important;
}
html.light .lightbox-trigger.pixel-corners-sm.hover\:border-brand-500\/50:hover {
background: #0284c7 !important;
filter: drop-shadow(0 0 12px rgba(2, 132, 199, 0.4)) drop-shadow(2px 2px 0px rgba(148, 163, 184, 0.6)) !important;
}
html.light .lightbox-trigger.pixel-corners-sm.hover\:border-cyan-500\/50:hover {
background: #0891b2 !important;
filter: drop-shadow(0 0 12px rgba(8, 145, 178, 0.4)) drop-shadow(2px 2px 0px rgba(148, 163, 184, 0.6)) !important;
}
html.light .lightbox-trigger.pixel-corners-sm.hover\:border-amber-500\/50:hover {
background: #d97706 !important;
filter: drop-shadow(0 0 12px rgba(217, 119, 6, 0.4)) drop-shadow(2px 2px 0px rgba(148, 163, 184, 0.6)) !important;
}
.pixel-photo-frame {
padding: 4px;
background: linear-gradient(135deg, #38bdf8 0%, #0284c7 35%, #0f172a 70%, #38bdf8 100%);
filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.35)) drop-shadow(4px 4px 0px rgba(15, 23, 42, 0.95));
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#hero-photo-wrapper:hover .pixel-photo-frame {
background: linear-gradient(135deg, #34d399 0%, #38bdf8 50%, #34d399 100%);
filter: drop-shadow(0 0 28px rgba(56, 189, 248, 0.55)) drop-shadow(5px 5px 0px rgba(2, 132, 199, 0.4));
}
.pixel-photo-chassis {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(8, 47, 73, 0.95));
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#hero-photo-wrapper:hover .pixel-photo-chassis {
box-shadow: inset 0 0 22px rgba(2, 132, 199, 0.25);
}
#hero-photo-wrapper:hover span[data-i18n="hero_player_tag"] {
color: #6ee7b7;
}
#hero-photo-wrapper:hover .pixel-quest-btn {
background: #34d399 !important;
filter: drop-shadow(3px 3px 0px rgba(16, 185, 129, 0.85)) drop-shadow(0 0 35px rgba(52, 211, 153, 0.75));
animation: none;
transform: scale(1.02);
}
#hero-photo-wrapper:hover .pixel-quest-btn span[data-i18n="adventure_badge"] {
color: #6ee7b7;
}
.pixel-frame-inner {
background: rgba(15, 23, 42, 0.92);
width: 100%;
height: 100%;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
@keyframes quest-beacon {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.12); opacity: 0.75; }
}
.animate-quest-beacon {
animation: quest-beacon 1.8s ease-in-out infinite;
}
/* Adventure Mode & Pixel Art Styles */
.pixelated {
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
shape-rendering: crispEdges;
}
@keyframes portal-spawn-flash {
0% {
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.8);
filter: brightness(1);
}
50% {
box-shadow: 0 0 50px 15px rgba(56, 189, 248, 0.95), 0 0 0 4px rgba(56, 189, 248, 0.9);
filter: brightness(1.3) contrast(1.15);
}
100% {
box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
filter: brightness(1);
}
}
.portal-spawn-active {
animation: portal-spawn-flash 0.85s ease-out;
}
@keyframes pop-out-arc {
0% {
opacity: 0;
transform: translate(0, 0) scale(0.6);
}
8% {
opacity: 1;
transform: translate(calc(var(--target-x) * 0.08), calc(var(--target-y) * 0.08 - 80px)) scale(1.05);
}
45% {
opacity: 1;
transform: translate(calc(var(--target-x) * 0.45), calc(var(--target-y) * 0.45 - 200px)) scale(1.2);
}
80% {
opacity: 1;
transform: translate(calc(var(--target-x) * 0.82), calc(var(--target-y) * 0.82 - 90px)) scale(1.08);
}
94% {
opacity: 1;
transform: translate(calc(var(--target-x) * 0.96), calc(var(--target-y) * 0.96 - 15px)) scale(1.02);
}
100% {
opacity: 1;
transform: translate(var(--target-x), var(--target-y)) scale(1);
}
}
.anim-pop-out-arc {
animation: pop-out-arc 3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
/* Adventure Mode Stage Wrapper Shift (transform keeps the slide on the compositor, no page relayout per frame) */
#adventure-stage-wrapper {
position: relative;
width: 100%;
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.adventure-stage-shifted #adventure-stage-wrapper {
transform: translate3d(calc(var(--adv-content-shift, 36px) * -1), 0, 0);
}
.adventure-stage-shifted #adventure-stage-wrapper header,
.adventure-stage-shifted #adventure-stage-wrapper footer {
width: calc(100% + var(--adv-content-shift, 36px));
}
/* Light Mode Theme Overrides */
html.light body {
background-color: #f8fafc !important;
color: #0f172a !important;
}
html.light .glass-nav {
background: rgba(255, 255, 255, 0.9) !important;
border-color: #e2e8f0 !important;
}
html.light .radial-bg {
background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.08) 0%, rgba(248, 250, 252, 0) 70%) !important;
}
html.light .bg-slate-950,
html.light .bg-slate-950\/80,
html.light .bg-slate-950\/60 {
background-color: #f1f5f9 !important;
}
html.light .bg-slate-900,
html.light .bg-slate-900\/95,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/70,
html.light .bg-slate-900\/60,
html.light .bg-slate-900\/30 {
background-color: #ffffff !important;
}
html.light .border-slate-800,
html.light .border-slate-800\/90,
html.light .border-slate-800\/80,
html.light .border-slate-800\/70,
html.light .border-slate-800\/60,
html.light .border-slate-900,
html.light .border-slate-700,
html.light .border-slate-700\/80,
html.light .border-slate-700\/60 {
border-color: #e2e8f0 !important;
}
html.light .text-white {
color: #0f172a !important;
}
html.light .text-slate-100,
html.light .text-slate-200,
html.light .text-slate-300 {
color: #334155 !important;
}
html.light .text-slate-400 {
color: #64748b !important;
}
html.light .text-slate-500 {
color: #94a3b8 !important;
}
html.light .bg-slate-800,
html.light .bg-slate-800\/80,
html.light .bg-slate-800\/60 {
background-color: #f8fafc !important;
color: #1e293b !important;
border-color: #e2e8f0 !important;
}
html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-slate-700:hover {
background-color: #e2e8f0 !important;
}
html.light .card-hover:hover {
box-shadow: 0 16px 32px -8px rgba(99, 102, 241, 0.12), 0 0 0 1px rgba(99, 102, 241, 0.35) !important;
}
/* Light Mode Retro & Gaming Styles */
html.light .retro-hud-box {
background: rgba(255, 255, 255, 0.95) !important;
border-color: #cbd5e1 !important;
box-shadow: 2px 2px 0px 0px #cbd5e1 !important;
}
html.light .retro-card {
background-color: #ffffff !important;
border-color: #cbd5e1 !important;
border-radius: 6px !important;
box-shadow: 4px 4px 0px 0px #cbd5e1 !important;
}
html.light .retro-card:hover {
border-color: #0284c7 !important;
box-shadow: 5px 5px 0px 0px rgba(2, 132, 199, 0.25) !important;
}
html.light .pixel-frame-outer {
background: linear-gradient(135deg, rgba(2, 132, 199, 0.4), #cbd5e1 50%, #94a3b8) !important;
filter: drop-shadow(4px 4px 0px #cbd5e1) !important;
}
html.light .pixel-frame-outer:hover {
background: linear-gradient(135deg, #0284c7, #38bdf8 50%, #cbd5e1) !important;
filter: drop-shadow(5px 5px 0px rgba(2, 132, 199, 0.25)) !important;
}
html.light .pixel-photo-frame {
background: linear-gradient(135deg, #0284c7 0%, #38bdf8 45%, #cbd5e1 100%) !important;
filter: drop-shadow(0 0 16px rgba(2, 132, 199, 0.3)) drop-shadow(4px 4px 0px #cbd5e1) !important;
}
html.light #hero-photo-wrapper:hover .pixel-photo-frame {
background: linear-gradient(135deg, #059669 0%, #0284c7 50%, #059669 100%) !important;
filter: drop-shadow(0 0 24px rgba(2, 132, 199, 0.4)) drop-shadow(5px 5px 0px rgba(2, 132, 199, 0.3)) !important;
}
html.light .pixel-photo-chassis {
background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(8, 47, 73, 0.95)) !important;
}
html.light span[data-i18n="hero_player_tag"] {
color: #ffffff !important;
}
html.light .pixel-frame-inner {
background: #ffffff !important;
}
html.light .terminal-header {
background: #f8fafc !important;
border-bottom-color: #e2e8f0 !important;
color: #64748b !important;
}
html.light .pixel-badge {
background: rgba(2, 132, 199, 0.08) !important;
border-color: rgba(2, 132, 199, 0.35) !important;
color: #0284c7 !important;
box-shadow: 2px 2px 0px 0px #cbd5e1 !important;
}
/* Light Mode Adventure Mode (Companion & Rail) Overrides */
html.light #adventure-rail-card {
background-color: rgba(255, 255, 255, 0.96) !important;
border-color: #cbd5e1 !important;
box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.12), 0 0 0 1px #cbd5e1 !important;
}
html.light #adventure-rail-card .border-slate-800\/80 {
border-color: #e2e8f0 !important;
}
html.light #adventure-rail-card span.text-brand-400 {
color: #0284c7 !important;
}
html.light .rail-node:not(.bg-brand-600) {
background-color: #f8fafc !important;
border-color: #cbd5e1 !important;
color: #475569 !important;
}
html.light .rail-node:not(.bg-brand-600):hover {
background-color: #f1f5f9 !important;
border-color: #0284c7 !important;
color: #0f172a !important;
}
html.light .rail-node.bg-brand-600 {
background-color: #0284c7 !important;
border-color: #38bdf8 !important;
color: #ffffff !important;
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35) !important;
}
/* Rail tooltip stepped corners */
.rail-tooltip {
position: absolute;
right: calc(100% + 10px);
clip-path: polygon(
0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0,
calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px)
) !important;
background: #475569 !important;
border: none !important;
box-shadow: none !important;
filter: drop-shadow(2px 2px 0px rgba(15, 23, 42, 0.9));
z-index: 30;
}
.rail-tooltip::before {
content: "";
position: absolute;
inset: 1.5px;
clip-path: inherit;
z-index: -1;
background: #0f172a;
}
html.light .rail-tooltip {
background: #cbd5e1 !important;
color: #0f172a !important;
filter: drop-shadow(2px 2px 0px rgba(148, 163, 184, 0.5));
}
html.light .rail-tooltip::before {
background: #ffffff !important;
}
html.light #rail-exit-btn {
color: #64748b !important;
}
html.light #rail-exit-btn:hover {
color: #0284c7 !important;
}
html.light #rail-active-indicator span {
background-color: #0284c7 !important;
border: 0 !important;
border-color: transparent !important;
box-shadow: 0 0 8px rgba(2, 132, 199, 0.5) !important;
}
html.light #rail-character-sprite {
filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.18)) drop-shadow(0 0 6px rgba(2, 132, 199, 0.35)) !important;
}
html.light #flying-pixel-sprite-img {
filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.25)) drop-shadow(0 0 8px rgba(2, 132, 199, 0.4)) !important;
}
/* Light Mode Photo Portal Blur (Clean Slate-50 White Matching Avatar Window) */
/* Smooth 550ms Cinematic Photo Portal Dissolve for both Dark & Light modes */
#hero-portal-overlay {
transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), backdrop-filter 0.55s ease-out !important;
}
#hero-profile-img {
transition: filter 0.55s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
html.light #hero-photo-card {
background-color: transparent !important;
}
html.light #hero-portal-overlay {
background-color: rgba(248, 250, 252, 0.88) !important;
backdrop-filter: blur(8px) !important;
}
html.light #hero-portal-sprite {
filter: drop-shadow(0 10px 22px rgba(15, 23, 42, 0.22)) drop-shadow(0 0 10px rgba(2, 132, 199, 0.45)) !important;
}
/* html.light #adventure-dialogue-box and #dialogue-avatar-btn handled in Stepped Border System */
html.light #adventure-dialogue-box .text-white {
color: #0f172a !important;
}
html.light #adventure-dialogue-box .text-slate-200 {
color: #334155 !important;
}
html.light #adventure-dialogue-box .text-slate-400 {
color: #64748b !important;
}
html.light #adventure-dialogue-box .text-slate-500 {
color: #94a3b8 !important;
}
html.light #adventure-dialogue-box .border-slate-800\/80 {
border-color: #e2e8f0 !important;
}
/* Dynamic Theme Icons */
.theme-icon-light {
display: none !important;
}
.theme-icon-dark {
display: inline-block !important;
}
html.light .theme-icon-dark {
display: none !important;
}
html.light .theme-icon-light {
display: inline-block !important;
}
html.light #adventure-dialogue-box .bg-brand-500\/20 {
background-color: #e0f2fe !important;
color: #0284c7 !important;
border-color: #bae6fd !important;
}
html.light #dialogue-stage-label {
color: #0284c7 !important;
}
/* High contrast color overrides for Light Mode */
html.light .text-brand-300,
html.light .text-brand-400,
html.light .text-brand-500 {
color: #0284c7 !important; /* Tech Blue 600 */
}
html.light .text-cyan-200,
html.light .text-cyan-300,
html.light .text-cyan-400,
html.light .text-cyan-500 {
color: #0e7490 !important; /* Cyan 700 */
}
html.light .text-emerald-300,
html.light .text-emerald-400,
html.light .text-emerald-500 {
color: #047857 !important; /* Emerald 700 */
}
html.light .text-amber-300,
html.light .text-amber-400,
html.light .text-amber-500,
html.light .text-yellow-300,
html.light .text-yellow-400,
html.light .text-yellow-500 {
color: #b45309 !important; /* Amber 700 */
}
html.light .text-rose-300,
html.light .text-rose-400,
html.light .text-red-400 {
color: #b91c1c !important; /* Red 700 */
}
html.light .text-indigo-300,
html.light .text-indigo-400 {
color: #4338ca !important; /* Indigo 700 */
}
html.light .text-slate-400 {
color: #475569 !important; /* Slate 600 for crisp readability */
}
html.light .text-slate-500 {
color: #64748b !important; /* Slate 500 */
}
html.light code,
html.light .font-mono.text-cyan-300,
html.light .font-mono.text-amber-300,
html.light .font-mono.text-brand-300,
html.light .font-mono.text-indigo-300,
html.light .font-mono.text-blue-400 {
font-weight: 700 !important;
}
/* Light Mode Headline Gradient - higher contrast vibrant tones */
html.light .bg-clip-text {
background-image: linear-gradient(to right, #0284c7, #0ea5e9, #0891b2) !important;
}
/* Disable glow blobs in Light Mode to prevent foggy artifacts */
html.light .glow-blob {
display: none !important;
}
/* Badge & Tag Container Contrast in Light Mode */
html.light .bg-brand-950\/60,
html.light .bg-brand-500\/10 {
background-color: #f0f9ff !important;
border-color: #bae6fd !important;
}
html.light .bg-blue-950\/60,
html.light .bg-blue-500\/10 {
background-color: #eff6ff !important;
border-color: #bfdbfe !important;
}
html.light .text-blue-400 {
color: #1d4ed8 !important;
}
html.light .bg-cyan-950\/60,
html.light .bg-cyan-950\/50,
html.light .bg-cyan-500\/10,
html.light .bg-cyan-500\/20 {
background-color: #ecfeff !important;
border-color: #a5f3fc !important;
}
html.light .bg-emerald-950\/60,
html.light .bg-emerald-500\/10 {
background-color: #ecfdf5 !important;
border-color: #a7f3d0 !important;
}
html.light .bg-amber-950\/60,
html.light .bg-amber-500\/10 {
background-color: #fffbeb !important;
border-color: #fde68a !important;
}
html.light .bg-indigo-950\/60,
html.light .bg-indigo-500\/10 {
background-color: #e0e7ff !important;
border-color: #c7d2fe !important;
}
html.light .bg-rose-500\/10,
html.light .bg-rose-950\/60,
html.light .bg-red-500\/10 {
background-color: #fff1f2 !important;
border-color: #fecdd3 !important;
}
html.light .bg-teal-950\/60 {
background-color: #f0fdfa !important;
border-color: #99f6e4 !important;
}
html.light .bg-sky-950\/60 {
background-color: #f0f9ff !important;
border-color: #bae6fd !important;
}
html.light .bg-purple-950\/60 {
background-color: #faf5ff !important;
border-color: #e9d5ff !important;
}
html.light .text-brand-300 { color: #0284c7 !important; }
html.light .text-cyan-300 { color: #0891b2 !important; }
html.light .text-indigo-300 { color: #4338ca !important; }
html.light .text-emerald-300 { color: #059669 !important; }
html.light .text-amber-300 { color: #d97706 !important; }
html.light .text-teal-300 { color: #0d9488 !important; }
html.light .text-sky-300 { color: #0284c7 !important; }
html.light .text-purple-300 { color: #7c3aed !important; }
html.light .text-rose-300 { color: #e11d48 !important; }
html.light .text-blue-300 { color: #1d4ed8 !important; }
/* Fix Dark Island Sections in Light Mode (Selected Projects spotlight) */
html.light #spotlight-project .pixel-frame-inner {
background: #ffffff !important;
}
html.light #spotlight-project .bg-slate-800 {
background-color: #f1f5f9 !important;
color: #334155 !important;
border-color: #cbd5e1 !important;
}
/* Buttons in Light Mode: Modern Vibrant Tech Blue */
html.light .bg-brand-600 {
background-color: #0284c7 !important;
color: #ffffff !important;
}
html.light .hover\:bg-brand-500:hover,
html.light .bg-brand-600:hover {
background-color: #0369a1 !important;
}
html.light .shadow-brand-600\/30 {
box-shadow: 0 10px 15px -3px rgba(2, 132, 199, 0.25), 0 4px 6px -4px rgba(2, 132, 199, 0.2) !important;
}
/* Ensure All Lightbox Photo hover captions stay crisp white on dark gradient in Light Mode */
html.light .lightbox-trigger .text-white,
html.light .lightbox-trigger .text-slate-200,
html.light .lightbox-trigger [data-i18n^="interests_photo_img"],
html.light .lightbox-trigger [data-i18n^="interests_crafts_img"],
html.light .lightbox-trigger [data-i18n^="experience_img"],
html.light .lightbox-trigger .truncate,
html.light .lightbox-trigger span.drop-shadow {
color: #ffffff !important;
}
html.light .lightbox-trigger .text-cyan-300 {
color: #67e8f9 !important;
}
/* Ensure Adventure button and primary quest buttons stay crisp white in Light Mode */
html.light .pixel-quest-btn,
html.light .pixel-quest-btn span,
html.light #start-adventure-btn,
html.light #start-adventure-btn span {
color: #ffffff !important;
}
html.light .pixel-quest-btn:hover span,
html.light #start-adventure-btn:hover span {
color: #6ee7b7 !important;
}
/* Navigation Links & Dividers: Clean, snug, proportional spacing */
.nav-item-link {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
flex-shrink: 0;
padding: 0.25rem 0.25rem;
border-radius: 0.25rem;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
letter-spacing: -0.01em;
}
.nav-divider {
color: #334155;
user-select: none;
font-size: 0.75rem;
line-height: 1rem;
padding: 0;
opacity: 0.7;
}
html.light .nav-divider {
color: #94a3b8 !important;
}
html.light .nav-item-link:hover {
background-color: #e2e8f0 !important;
color: #0f172a !important;
}
/* Lightbox Modal Styles */
.lightbox-trigger {
cursor: zoom-in;
}
#image-lightbox-modal {
background-color: rgba(2, 6, 23, 0.78) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
#image-lightbox-modal.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
#image-lightbox-modal:not(.hidden) {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
#image-lightbox-modal #lightbox-caption {
color: #ffffff !important;
}
/* Lightbox stepped close button */
#image-lightbox-modal #lightbox-close-btn {
position: relative;
z-index: 0;
border: none !important;
box-shadow: none !important;
background: #475569 !important;
filter: drop-shadow(3px 3px 0px rgba(15, 23, 42, 0.95)) !important;
cursor: pointer;
}
#image-lightbox-modal #lightbox-close-btn::before {
content: "";
position: absolute;
inset: 2px;
clip-path: inherit;
z-index: -1;
background: #0f172a !important;
transition: background 0.15s ease;
}
#image-lightbox-modal #lightbox-close-btn svg {
stroke: #e2e8f0 !important;
transition: stroke 0.15s ease;
}
#image-lightbox-modal #lightbox-close-btn:hover {
background: #38bdf8 !important;
filter: drop-shadow(4px 4px 0px rgba(2, 132, 199, 0.4)) drop-shadow(0 0 12px rgba(56, 189, 248, 0.5)) !important;
transform: translateY(-2px);
}
#image-lightbox-modal #lightbox-close-btn:hover::before {
background: #1e293b !important;
}
#image-lightbox-modal #lightbox-close-btn:hover svg {
stroke: #38bdf8 !important;
}
html.light #image-lightbox-modal #lightbox-close-btn {
background: #475569 !important;
filter: drop-shadow(3px 3px 0px rgba(15, 23, 42, 0.95)) !important;
}
html.light #image-lightbox-modal #lightbox-close-btn::before {
background: #0f172a !important;
}
html.light #image-lightbox-modal #lightbox-close-btn svg {
stroke: #e2e8f0 !important;
}
html.light #image-lightbox-modal #lightbox-close-btn:hover {
background: #38bdf8 !important;
filter: drop-shadow(4px 4px 0px rgba(2, 132, 199, 0.4)) drop-shadow(0 0 12px rgba(56, 189, 248, 0.5)) !important;
}
html.light #image-lightbox-modal #lightbox-close-btn:hover::before {
background: #1e293b !important;
}
html.light #image-lightbox-modal #lightbox-close-btn:hover svg {
stroke: #38bdf8 !important;
}
#image-lightbox-modal #lightbox-content-box {
background-color: #020617 !important;
box-shadow: inset 0 0 0 2px #38bdf8, 0 0 24px rgba(56, 189, 248, 0.25), 4px 4px 0px 0px rgba(15, 23, 42, 0.95) !important;
max-height: calc(85vh - 80px);
max-height: calc(85dvh - 80px);
}
html.light #image-lightbox-modal #lightbox-content-box {
background-color: #ffffff !important;
box-shadow: inset 0 0 0 2px #0284c7, 4px 4px 0px 0px #cbd5e1 !important;
}
/* Lightbox stepped location pill */
#image-lightbox-modal #lightbox-location-link {
position: relative;
z-index: 0;
border: none !important;
box-shadow: none !important;
background: #0891b2 !important;
filter: drop-shadow(2px 2px 0px rgba(15, 23, 42, 0.8)) !important;
color: #a5f3fc !important;
transition: all 0.2s ease;
}
#image-lightbox-modal #lightbox-location-link::before {
content: "";
position: absolute;
inset: 1.5px;
clip-path: inherit;
z-index: -1;
background: #0f172a !important;
transition: background 0.2s ease;
}
#image-lightbox-modal #lightbox-location-link:hover {
background: #38bdf8 !important;
filter: drop-shadow(3px 3px 0px rgba(6, 182, 212, 0.35)) drop-shadow(0 0 10px rgba(56, 189, 248, 0.4)) !important;
color: #ffffff !important;
transform: translateY(-1px);
}
#image-lightbox-modal #lightbox-location-link:hover::before {
background: #082f49 !important;
}
#image-lightbox-modal #lightbox-location-link span {
color: inherit !important;
}
html.light #image-lightbox-modal #lightbox-location-link {
background: #0284c7 !important;
filter: drop-shadow(2px 2px 0px rgba(15, 23, 42, 0.8)) !important;
color: #bae6fd !important;
}
html.light #image-lightbox-modal #lightbox-location-link::before {
background: #0f172a !important;
}
html.light #image-lightbox-modal #lightbox-location-link:hover {
background: #38bdf8 !important;
filter: drop-shadow(3px 3px 0px rgba(2, 132, 199, 0.4)) drop-shadow(0 0 10px rgba(56, 189, 248, 0.45)) !important;
color: #ffffff !important;
}
html.light #image-lightbox-modal #lightbox-location-link:hover::before {
background: #082f49 !important;
}
#lightbox-img {
max-height: calc(82vh - 85px);
max-height: calc(82dvh - 85px);
width: auto;
height: auto;
}
@media (max-width: 640px) {
#image-lightbox-modal #lightbox-content-box {
max-height: calc(78dvh - 90px);
}
#lightbox-img {
max-height: calc(75dvh - 95px);
}
}
/* ================= TYPEWRITER CURSOR ================= */
@keyframes cursorBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
.typewriter-cursor {
display: inline-block;
width: 3px;
height: 0.85em;
vertical-align: baseline;
background-color: #38bdf8 !important;
margin-left: 3px;
margin-right: -6px;
animation: cursorBlink 1s infinite;
user-select: none;
pointer-events: none;
}
html.light .typewriter-cursor {
background-color: #0284c7 !important;
}
/* ================= PIXEL ART BUTTONS & STEPPED CORNERS SYSTEM ================= */
/* 4px stepped polygon for badges, capsules, and compact controls */
.pixel-corners-btn {
position: relative;
z-index: 0;
display: inline-flex;
align-items: center;
justify-content: center;
clip-path: polygon(
0 4px,
2px 4px,
2px 2px,
4px 2px,
4px 0,
calc(100% - 4px) 0,
calc(100% - 4px) 2px,
calc(100% - 2px) 2px,
calc(100% - 2px) 4px,
100% 4px,
100% calc(100% - 4px),
calc(100% - 2px) calc(100% - 4px),
calc(100% - 2px) calc(100% - 2px),
calc(100% - 4px) calc(100% - 2px),
calc(100% - 4px) 100%,
4px 100%,
4px calc(100% - 2px),
2px calc(100% - 2px),
2px calc(100% - 4px),
0 calc(100% - 4px)
);
}
/* 6px stepped polygon for interactive action buttons (3 distinct pixel steps) */
.pixel-btn {
position: relative;
z-index: 0;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
letter-spacing: 0.03em;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
user-select: none;
text-decoration: none;
border: none !important;
box-shadow: none !important;
filter: drop-shadow(3px 3px 0px rgba(15, 23, 42, 0.95));
clip-path: polygon(
0 6px,
2px 6px,
2px 4px,
4px 4px,
4px 2px,
6px 2px,
6px 0,
calc(100% - 6px) 0,
calc(100% - 6px) 2px,
calc(100% - 4px) 2px,
calc(100% - 4px) 4px,
calc(100% - 2px) 4px,
calc(100% - 2px) 6px,
100% 6px,
100% calc(100% - 6px),
calc(100% - 2px) calc(100% - 6px),
calc(100% - 2px) calc(100% - 4px),
calc(100% - 4px) calc(100% - 4px),
calc(100% - 4px) calc(100% - 2px),
calc(100% - 6px) calc(100% - 2px),
calc(100% - 6px) 100%,
6px 100%,
6px calc(100% - 2px),
4px calc(100% - 2px),
4px calc(100% - 4px),
2px calc(100% - 4px),
2px calc(100% - 6px),
0 calc(100% - 6px)
) !important;
}
.pixel-btn::before {
content: "";
position: absolute;
inset: 2px;
clip-path: inherit;
z-index: -1;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.pixel-btn:hover {
transform: translateY(-2px);
}
.pixel-btn:active {
transform: translate(2px, 2px);
filter: drop-shadow(1px 1px 0px rgba(15, 23, 42, 0.95));
}
/* Primary Button (Dark Mode) */
.pixel-btn-primary {
background: #38bdf8 !important; /* Stepped Cyan Outer Border */
color: #ffffff !important;
}
.pixel-btn-primary::before {
background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
}
.pixel-btn-primary:hover {
background: #7dd3fc !important;
filter: drop-shadow(4px 4px 0px rgba(2, 132, 199, 0.5)) drop-shadow(0 0 14px rgba(56, 189, 248, 0.45));
}
.pixel-btn-primary:hover::before {
background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
}
/* Secondary Button (Dark Mode) */
.pixel-btn-secondary {
background: #475569 !important; /* Stepped Slate-600 Outer Border */
color: #e2e8f0 !important;
}
.pixel-btn-secondary::before {
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
}
.pixel-btn-secondary:hover {
background: #38bdf8 !important; /* Stepped Cyan Border on Hover */
color: #ffffff !important;
filter: drop-shadow(4px 4px 0px rgba(56, 189, 248, 0.35));
}
.pixel-btn-secondary:hover::before {
background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
}
/* Icon Buttons (Dark Mode) */
.pixel-btn-icon {
background: #475569 !important;
color: #94a3b8 !important;
}
.pixel-btn-icon::before {
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important;
}
.pixel-btn-icon:hover {
background: #38bdf8 !important;
color: #38bdf8 !important;
filter: drop-shadow(4px 4px 0px rgba(56, 189, 248, 0.35));
}
.pixel-btn-icon:hover::before {
background: linear-gradient(180deg, #334155 0%, #1e293b 100%) !important;
}
/* Light Mode Button Overrides */
html.light .pixel-btn {
filter: drop-shadow(3px 3px 0px #cbd5e1);
}
html.light .pixel-btn:active {
filter: drop-shadow(1px 1px 0px #cbd5e1);
}
html.light .pixel-btn-primary {
background: #0284c7 !important;
color: #ffffff !important;
}
html.light .pixel-btn-primary::before {
background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%) !important;
}
html.light .pixel-btn-primary:hover {
background: #38bdf8 !important;
filter: drop-shadow(4px 4px 0px rgba(2, 132, 199, 0.45)) drop-shadow(0 0 14px rgba(56, 189, 248, 0.5)) !important;
}
html.light .pixel-btn-primary:hover::before {
background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%) !important;
}
html.light .pixel-btn-secondary {
background: #cbd5e1 !important;
color: #334155 !important;
}
html.light .pixel-btn-secondary::before {
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
}
html.light .pixel-btn-secondary:hover {
background: #0284c7 !important; /* Stepped Sky Blue / Celeste Border on Hover */
color: #0284c7 !important;
filter: drop-shadow(4px 4px 0px rgba(2, 132, 199, 0.35)) !important;
}
html.light .pixel-btn-secondary:hover::before {
background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
}
html.light .pixel-btn-icon {
background: #cbd5e1 !important;
color: #475569 !important;
}
html.light .pixel-btn-icon::before {
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
}
html.light .pixel-btn-icon:hover {
background: #0284c7 !important; /* Stepped Sky Blue / Celeste Border on Hover */
color: #0284c7 !important;
filter: drop-shadow(4px 4px 0px rgba(2, 132, 199, 0.35)) !important;
}
html.light .pixel-btn-icon:hover::before {
background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%) !important;
}
/* ================= TECH CAPSULES & BADGES STEPPED BORDERS ================= */
/* Dark & Light modes share the exact same 4px stepped bevel system (inset: 1.5px with clip-path: inherit).
This guarantees 100% pixel-perfect corners identical in color to borders, with no distortion,
no white box sticker artifact, no ghost letter duplicates, and zero gaps. */
/* 1. Default Slate Tech Capsules (Projects, Education, Skills) */
.pixel-corners-btn.border-slate-700\/60,
.pixel-corners-btn.border-slate-700\/80 {
background: #475569 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
.pixel-corners-btn.border-slate-700\/60::before,
.pixel-corners-btn.border-slate-700\/80::before {
content: "";
position: absolute;
inset: 1.5px;
background: #1e293b !important;
clip-path: inherit;
z-index: -1;
}
html.light .pixel-corners-btn.border-slate-700\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis):not(.loader-progress-wrapper),
html.light .pixel-corners-btn.border-slate-700\/80:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis):not(.loader-progress-wrapper) {
background: #cbd5e1 !important;
color: #334155 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
html.light .pixel-corners-btn.border-slate-700\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis):not(.loader-progress-wrapper)::before,
html.light .pixel-corners-btn.border-slate-700\/80:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis):not(.loader-progress-wrapper)::before {
content: "" !important;
position: absolute !important;
inset: 1.5px !important;
background: #ffffff !important;
clip-path: inherit !important;
z-index: -1 !important;
border: none !important;
mask: none !important;
-webkit-mask: none !important;
}
/* 2. Emerald Badges (Active Status, LASCE, Distributed Systems) */
.pixel-corners-btn.border-emerald-500\/40 {
background: #10b981 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
.pixel-corners-btn.border-emerald-500\/40::before {
content: "";
position: absolute;
inset: 1.5px;
background: #0f172a !important;
clip-path: inherit;
z-index: -1;
}
html.light .pixel-corners-btn.border-emerald-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis) {
background: #059669 !important;
color: #047857 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
html.light .pixel-corners-btn.border-emerald-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before {
content: "" !important;
position: absolute !important;
inset: 1.5px !important;
background: #ffffff !important;
clip-path: inherit !important;
z-index: -1 !important;
border: none !important;
mask: none !important;
-webkit-mask: none !important;
}
html.light #hero .pixel-corners-btn.border-emerald-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before {
background: #f8fafc !important;
}
/* 3. Cyan Badges (Guide / Guia, Python, Ethical Vodcast) */
.pixel-corners-btn.border-cyan-800\/60,
.pixel-corners-btn.border-cyan-500\/40 {
background: #0891b2 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
.pixel-corners-btn.border-cyan-800\/60::before,
.pixel-corners-btn.border-cyan-500\/40::before {
content: "";
position: absolute;
inset: 1.5px;
background: #0f172a !important;
clip-path: inherit;
z-index: -1;
}
html.light .pixel-corners-btn.border-cyan-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis),
html.light .pixel-corners-btn.border-cyan-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis) {
background: #0284c7 !important;
color: #0284c7 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
html.light .pixel-corners-btn.border-cyan-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before,
html.light .pixel-corners-btn.border-cyan-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before {
content: "" !important;
position: absolute !important;
inset: 1.5px !important;
background: #ffffff !important;
clip-path: inherit !important;
z-index: -1 !important;
border: none !important;
mask: none !important;
-webkit-mask: none !important;
}
html.light #hero .pixel-corners-btn.border-cyan-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before,
html.light #hero .pixel-corners-btn.border-cyan-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before {
background: #f8fafc !important;
}
/* 4. Indigo Badges (C++, Virtual Microscope) */
.pixel-corners-btn.border-indigo-800\/60,
.pixel-corners-btn.border-indigo-500\/40 {
background: #6366f1 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
.pixel-corners-btn.border-indigo-800\/60::before,
.pixel-corners-btn.border-indigo-500\/40::before {
content: "";
position: absolute;
inset: 1.5px;
background: #0f172a !important;
clip-path: inherit;
z-index: -1;
}
html.light .pixel-corners-btn.border-indigo-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis),
html.light .pixel-corners-btn.border-indigo-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis) {
background: #4f46e5 !important;
color: #4338ca !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
html.light .pixel-corners-btn.border-indigo-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before,
html.light .pixel-corners-btn.border-indigo-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before {
content: "" !important;
position: absolute !important;
inset: 1.5px !important;
background: #ffffff !important;
clip-path: inherit !important;
z-index: -1 !important;
border: none !important;
mask: none !important;
-webkit-mask: none !important;
}
html.light #hero .pixel-corners-btn.border-indigo-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before,
html.light #hero .pixel-corners-btn.border-indigo-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before {
background: #f8fafc !important;
}
/* 5. Amber Badges (JavaScript) */
.pixel-corners-btn.border-amber-800\/60,
.pixel-corners-btn.border-amber-500\/40 {
background: #d97706 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
.pixel-corners-btn.border-amber-800\/60::before,
.pixel-corners-btn.border-amber-500\/40::before {
content: "";
position: absolute;
inset: 1.5px;
background: #0f172a !important;
clip-path: inherit;
z-index: -1;
}
html.light .pixel-corners-btn.border-amber-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis),
html.light .pixel-corners-btn.border-amber-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis) {
background: #d97706 !important;
color: #b45309 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
html.light .pixel-corners-btn.border-amber-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before,
html.light .pixel-corners-btn.border-amber-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before {
content: "" !important;
position: absolute !important;
inset: 1.5px !important;
background: #ffffff !important;
clip-path: inherit !important;
z-index: -1 !important;
border: none !important;
mask: none !important;
-webkit-mask: none !important;
}
html.light #hero .pixel-corners-btn.border-amber-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before,
html.light #hero .pixel-corners-btn.border-amber-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before {
background: #f8fafc !important;
}
/* 6. Blue Badges (C# / .NET, Brand Badges) */
.pixel-corners-btn.border-blue-800\/60,
.pixel-corners-btn.border-brand-500\/40 {
background: #2563eb !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
.pixel-corners-btn.border-blue-800\/60::before,
.pixel-corners-btn.border-brand-500\/40::before {
content: "";
position: absolute;
inset: 1.5px;
background: #0f172a !important;
clip-path: inherit;
z-index: -1;
}
html.light .pixel-corners-btn.border-blue-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis),
html.light .pixel-corners-btn.border-brand-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis) {
background: #2563eb !important;
color: #1d4ed8 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
html.light .pixel-corners-btn.border-blue-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before,
html.light .pixel-corners-btn.border-brand-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before {
content: "" !important;
position: absolute !important;
inset: 1.5px !important;
background: #ffffff !important;
clip-path: inherit !important;
z-index: -1 !important;
border: none !important;
mask: none !important;
-webkit-mask: none !important;
}
html.light #hero .pixel-corners-btn.border-blue-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before,
html.light #hero .pixel-corners-btn.border-brand-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before {
background: #f8fafc !important;
}
/* 7. Purple Badges (Online Learning Platform) */
.pixel-corners-btn.border-purple-800\/60,
.pixel-corners-btn.border-purple-500\/40 {
background: #a855f7 !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
.pixel-corners-btn.border-purple-800\/60::before,
.pixel-corners-btn.border-purple-500\/40::before {
content: "";
position: absolute;
inset: 1.5px;
background: #0f172a !important;
clip-path: inherit;
z-index: -1;
}
html.light .pixel-corners-btn.border-purple-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis),
html.light .pixel-corners-btn.border-purple-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis) {
background: #9333ea !important;
color: #7e22ce !important;
border: none !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
}
html.light .pixel-corners-btn.border-purple-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before,
html.light .pixel-corners-btn.border-purple-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before {
content: "" !important;
position: absolute !important;
inset: 1.5px !important;
background: #ffffff !important;
clip-path: inherit !important;
z-index: -1 !important;
border: none !important;
mask: none !important;
-webkit-mask: none !important;
}
html.light #hero .pixel-corners-btn.border-purple-800\/60:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before,
html.light #hero .pixel-corners-btn.border-purple-500\/40:not(#theme-toggle-btn):not(#theme-toggle-mobile):not(.loader-progress-chassis)::before {
background: #f8fafc !important;
}
/* Dialogue avatar button: standardized with map level buttons in dark & light mode */
#dialogue-avatar-btn {
border: none !important;
box-shadow: none !important;
position: relative;
z-index: 0;
background: #475569 !important; /* Stepped Slate-600 Outer Border (Dark Mode) */
transition: background 0.18s ease, filter 0.18s ease, transform 0.15s ease;
}
#dialogue-avatar-btn::before {
content: "";
position: absolute;
inset: 1.5px;
clip-path: inherit;
z-index: -1;
background: #0f172a !important; /* Slate-900 Inner Body (Dark Mode) */
transition: background 0.18s ease;
}
#dialogue-avatar-btn:hover {
background: #38bdf8 !important; /* Celeste on Hover (Dark Mode) */
filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.6)) !important;
}
#dialogue-avatar-btn:hover::before {
background: #1e293b !important;
}
html.light #dialogue-avatar-btn {
background: #cbd5e1 !important; /* Stepped Slate-300 Grisito matching map buttons (Light Mode) */
box-shadow: none !important;
filter: none !important;
}
html.light #dialogue-avatar-btn::before {
background: #ffffff !important;
}
html.light #dialogue-avatar-btn:hover {
background: #0284c7 !important; /* Azulito on Hover matching map buttons (Light Mode) */
filter: drop-shadow(0 0 10px rgba(2, 132, 199, 0.5)) !important;
}
html.light #dialogue-avatar-btn:hover::before {
background: #f8fafc !important;
}
.rail-node {
border: none !important;
position: relative;
z-index: 0;
}
.rail-node::before {
content: "";
position: absolute;
inset: 1.5px;
clip-path: inherit;
z-index: -1;
background: #0f172a;
}
.rail-node.bg-brand-600 {
background: #38bdf8 !important;
}
.rail-node.bg-brand-600::before {
background: #0284c7 !important;
}
.rail-node.bg-slate-900 {
background: #475569 !important;
}
.rail-node.bg-slate-900:hover {
background: #38bdf8 !important;
}
html.light .rail-node.bg-brand-600 {
background: #0284c7 !important;
}
html.light .rail-node.bg-brand-600::before {
background: #0284c7 !important;
}
html.light .rail-node.bg-slate-900 {
background: #cbd5e1 !important;
}
html.light .rail-node.bg-slate-900::before {
background: #ffffff !important;
}
html.light .rail-node.bg-slate-900:hover {
background: #0284c7 !important;
}
html.light .rail-node.bg-slate-900:hover::before {
background: #f8fafc !important;
}
/* Adventure Rail Exit Button Stepped Pixel Border System (Dark & Light Mode) */
#rail-exit-btn {
border: none !important;
position: relative;
z-index: 10;
background: #475569 !important;
box-shadow: none !important;
transition: background 0.18s ease, transform 0.15s ease, filter 0.18s ease;
}
#rail-exit-btn::before {
content: "";
position: absolute;
inset: 1.5px;
clip-path: inherit;
z-index: -1;
background: #0f172a !important;
transition: background 0.18s ease;
}
#rail-exit-btn:hover {
background: #38bdf8 !important;
filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.6)) !important;
}
#rail-exit-btn:hover::before {
background: #1e293b !important;
}
html.light #rail-exit-btn {
background: #cbd5e1 !important;
color: #475569 !important;
}
html.light #rail-exit-btn::before {
background: #ffffff !important;
}
html.light #rail-exit-btn:hover {
background: #0284c7 !important;
filter: drop-shadow(0 0 10px rgba(2, 132, 199, 0.5)) !important;
}
html.light #rail-exit-btn:hover::before {
background: #f1f5f9 !important;
}
/* Theme Toggle Icons (Pure CSS instant toggle without flash) */
html.light .theme-icon-sun {
display: block !important;
}
html.light .theme-icon-moon {
display: none !important;
}
html:not(.light) .theme-icon-sun {
display: none !important;
}
html:not(.light) .theme-icon-moon {
display: block !important;
}
/* Language Switcher Chassis & Theme Toggle Buttons (Stepped Pixel Borders in Dark & Light Mode) */
.lang-switch-chassis,
#theme-toggle-btn,
#theme-toggle-mobile {
position: relative;
z-index: 0;
background: #475569 !important; /* Stepped Slate-600 Outer Border (Dark Mode) */
border: none !important;
box-shadow: none !important;
filter: drop-shadow(2px 2px 0px rgba(15, 23, 42, 0.9));
box-sizing: border-box;
transition: all 0.2s ease;
}
.lang-switch-chassis::before,
#theme-toggle-btn::before,
#theme-toggle-mobile::before {
content: "";
position: absolute;
inset: 1.5px;
background: #0f172a !important; /* Slate-900 Inner Chassis Body (Dark Mode) */
clip-path: inherit;
z-index: -1;
transition: background 0.15s ease;
}
#theme-toggle-btn:hover,
#theme-toggle-mobile:hover {
background: #38bdf8 !important;
filter: drop-shadow(2px 2px 0px rgba(56, 189, 248, 0.45)) !important;
}
#theme-toggle-btn:hover::before,
#theme-toggle-mobile:hover::before {
background: #1e293b !important;
}
/* Light Mode: Language Switcher & Theme Toggle share the EXACT SAME grisito (#cbd5e1) as map buttons */
html.light .lang-switch-chassis,
html.light [aria-label="Language selection"],
html.light [aria-label="Mobile language selector"],
html.light #theme-toggle-btn,
html.light #theme-toggle-mobile {
background: #cbd5e1 !important; /* Stepped Slate-300 grisito border matching map buttons */
border: none !important;
box-shadow: none !important;
filter: drop-shadow(2px 2px 0px rgba(203, 213, 225, 0.7)) !important;
}
html.light .lang-switch-chassis::before,
html.light [aria-label="Language selection"]::before,
html.light [aria-label="Mobile language selector"]::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 1.5px !important;
background: #f1f5f9 !important; /* Inner surface matches light navbar chassis */
clip-path: inherit !important;
z-index: -1 !important;
transition: background 0.15s ease;
}
html.light #theme-toggle-btn::before,
html.light #theme-toggle-mobile::before {
content: "" !important;
display: block !important;
position: absolute !important;
inset: 1.5px !important;
background: #ffffff !important; /* Clean normal white button surface (restored from gray) */
clip-path: inherit !important;
z-index: -1 !important;
transition: background 0.15s ease;
}
html.light #theme-toggle-btn:hover,
html.light #theme-toggle-mobile:hover {
background: #0284c7 !important; /* Azulito on hover matching map buttons */
filter: drop-shadow(0 0 10px rgba(2, 132, 199, 0.4)) !important;
}
html.light #theme-toggle-btn:hover::before,
html.light #theme-toggle-mobile:hover::before {
background: #ffffff !important;
}
html.light #theme-toggle-btn:hover .theme-icon-sun,
html.light #theme-toggle-mobile:hover .theme-icon-sun {
filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.85)) !important;
}
/* Dialogue mute and close buttons: strictly borderless & clean in both themes */
#dialogue-mute-btn,
#dialogue-close-btn,
html.light #dialogue-mute-btn,
html.light #dialogue-close-btn {
border: none !important;
box-shadow: none !important;
background: transparent !important;
filter: none !important;
clip-path: none !important;
}
#dialogue-mute-btn::before,
#dialogue-close-btn::before {
display: none !important;
}
html.light .lang-switch-btn:not(.bg-brand-600) {
color: #475569 !important;
background: transparent !important;
}
html.light .lang-switch-btn:not(.bg-brand-600):hover {
color: #0f172a !important;
background-color: #e2e8f0 !important;
}
html.light .lang-switch-btn.bg-brand-600 {
background-color: #0284c7 !important;
color: #ffffff !important;
filter: drop-shadow(1px 1px 0px rgba(2, 132, 199, 0.4));
}
html.light .edu-meta-divider .edu-pipe,
html.light .edu-meta-divider .edu-dot {
color: #94a3b8 !important;
}
html.light #tablet-subnav,
html.light #mobile-subnav {
background-color: rgba(241, 245, 249, 0.95) !important;
border-color: rgba(203, 213, 225, 0.8) !important;
}
html.light #mobile-subnav .border-t {
border-color: rgba(203, 213, 225, 0.6) !important;
}
/* Smooth Dropdown Menu Animations */
.dropdown-animated {
transform-origin: top center;
transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0.28s;
}
.dropdown-animated.dropdown-closed {
opacity: 0 !important;
transform: translateY(-16px) scale(0.97) !important;
pointer-events: none !important;
visibility: hidden !important;
}
.dropdown-animated.dropdown-open {
opacity: 1 !important;
transform: translateY(0) scale(1) !important;
pointer-events: auto !important;
visibility: visible !important;
}
.dropdown-animated a {
transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease-out;
}
.dropdown-animated.dropdown-closed a {
transform: translateY(-10px);
opacity: 0;
}
.dropdown-animated.dropdown-open a {
transform: translateY(0);
opacity: 1;
}
.dropdown-animated.dropdown-open a:nth-child(1) {
transition-delay: 0.04s;
}
.dropdown-animated.dropdown-open a:nth-child(2) {
transition-delay: 0.09s;
}
#hero-cv-arrow {
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
#hero-cv-btn[aria-expanded="true"] #hero-cv-arrow,
#hero-cv-arrow.rotate-180 {
transform: rotate(180deg);
}
/* Adventure Rail & Dialogue Slide Transitions from Right Edge */
#adventure-rail {
transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.38s ease-out;
}
/* Companion Dialogue Box Stepped Pixel Border System (Dark & Light Mode) */
#adventure-dialogue-box {
border: none !important;
position: fixed;
z-index: 50;
padding: 2px !important;
background: #0284c7 !important; /* Stepped border idle in Dark Mode */
box-shadow: none !important;
filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.5)) !important;
transition: transform 0.48s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease-out, background 0.2s ease, filter 0.2s ease;
}
#adventure-dialogue-box:hover {
background: #38bdf8 !important; /* Illuminated Cyan Stepped Border including corners on hover! */
filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.45)) drop-shadow(0 20px 25px rgba(0, 0, 0, 0.6)) !important;
}
#adventure-dialogue-inner {
background: rgba(2, 6, 23, 0.96) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
width: 100% !important;
height: 100% !important;
box-sizing: border-box !important;
}
html.light #adventure-dialogue-box {
background: #cbd5e1 !important; /* Stepped Slate-300 Border idle in Light Mode */
color: #0f172a !important;
filter: drop-shadow(0 10px 25px rgba(15, 23, 42, 0.12)) !important;
}
html.light #adventure-dialogue-box:hover {
background: #0284c7 !important; /* Illuminated Blue Stepped Border including corners on hover! */
filter: drop-shadow(0 0 16px rgba(2, 132, 199, 0.35)) drop-shadow(0 10px 25px rgba(15, 23, 42, 0.15)) !important;
}
html.light #adventure-dialogue-inner {
background: rgba(255, 255, 255, 0.98) !important;
color: #0f172a !important;
}
/* Retro Jump Keyframe Animation for Adventure Character & Avatar */
@keyframes pixel-jump-bounce {
0% {
transform: translateY(0);
}
35% {
transform: translateY(-16px);
}
65% {
transform: translateY(-16px);
}
100% {
transform: translateY(0);
}
}
/* Walker Sprite Hover Scale & Jump Consistency */
#rail-character-scale-wrap {
transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.4, 1);
transform-origin: center center;
}
#rail-character-walker:hover #rail-character-scale-wrap,
#rail-character-walker.is-jumping #rail-character-scale-wrap {
transform: scale(1.1);
}
.animate-pixel-jump {
animation: pixel-jump-bounce 0.48s cubic-bezier(0.2, 0.8, 0.4, 1) forwards !important;
}
/* Rail Walker & Indicator Glide (moved with transform instead of top to avoid layout on every frame) */
#rail-character-walker,
#rail-active-indicator {
top: 0;
transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s ease-out;
}
/* Small Landing Hop (animation wins over the translateZ(0) GPU rule, unlike Tailwind translate classes) */
@keyframes sprite-hop {
0%, 100% { transform: translateY(0); }
45% { transform: translateY(-10px); }
}
.animate-sprite-hop {
animation: sprite-hop 0.4s cubic-bezier(0.2, 0.8, 0.4, 1);
}
/* Hero CV / Resume Dropdown Stepped Border System (Dark & Light Mode) */
#hero-cv-dropdown {
position: absolute;
border: none !important;
background: #475569 !important; /* Stepped Slate-600 Outer Border */
box-shadow: none !important;
filter: drop-shadow(4px 4px 0px rgba(15, 23, 42, 0.95)) drop-shadow(0 10px 25px rgba(0, 0, 0, 0.6)) !important;
box-sizing: border-box !important;
z-index: 10;
}
#hero-cv-dropdown::before {
content: "";
position: absolute;
inset: 2px;
background: #0f172a !important; /* Slate-900 Card Body */
clip-path: inherit;
z-index: -1;
}
#hero-cv-dropdown a {
margin: 0 2px;
}
html.light #hero-cv-dropdown {
background: #cbd5e1 !important; /* Stepped Slate-300 Border (matches buttons & map levels) */
border: none !important;
box-shadow: none !important;
filter: drop-shadow(3px 3px 0px #cbd5e1) drop-shadow(0 10px 25px rgba(15, 23, 42, 0.1)) !important;
}
html.light #hero-cv-dropdown::before {
background: #ffffff !important;
}
html.light #hero-cv-dropdown a {
color: #334155 !important;
}
html.light #hero-cv-dropdown a:hover {
background-color: #f1f5f9 !important;
}
html.light #hero-cv-dropdown a .text-white {
color: #0f172a !important;
}
html.light #hero-cv-dropdown a:hover .text-white {
color: #0284c7 !important;
}
html.light #hero-cv-dropdown a .text-slate-400 {
color: #64748b !important;
}
html.light #hero-cv-dropdown .border-t {
border-color: #e2e8f0 !important;
}
#mobile-subnav .subnav-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
justify-items: center;
width: 100%;
max-width: 360px;
margin: 0 auto;
}
#mobile-subnav .nav-item-link {
width: 100%;
padding: 0.2rem 0.15rem;
font-size: 10px;
line-height: 1.25rem;
text-align: center;
justify-content: center;
white-space: nowrap;
}
#mobile-subnav .nav-divider {
padding: 0 3px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
line-height: 1;
user-select: none;
opacity: 0.7;
}
#mobile-subnav .subnav-divider-row {
grid-column: 1 / -1;
width: 100%;
}
@media (max-width: 767px) {
section[id] {
scroll-margin-top: 7.25rem;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
section[id] {
scroll-margin-top: 6.5rem;
}
}
@media (min-width: 1024px) {
section[id] {
scroll-margin-top: 4.5rem;
}
}
/* Tablet Light Mode: Skills Section (Section 04) vertical dividers match horizontal border color (#e2e8f0) */
@media (min-width: 768px) and (max-width: 1279px) {
html.light #skills .md\:divide-slate-800\/80 > :not([hidden]) ~ :not([hidden]),
html.light #skills .md\:divide-x > :not([hidden]) ~ :not([hidden]),
html.light #skills [class*="divide-"] > :not([hidden]) ~ :not([hidden]),
html.light #skills [class*="divide-"] > * {
border-color: #e2e8f0 !important;
}
}
/* Hero typewriter container: maintain fixed 3-line height in Spanish on compact mobile screens (<= 380px, e.g. Samsung Galaxy S25 / 360px) to eliminate layout shift */
@media (max-width: 380px) {
html[lang="es"] #hero-typewriter-wrapper {
min-height: 3.8em;
}
}
/* ================= PORTFOLIO PRELOADER & SKELETON SCREEN ================= */
#portfolio-loader {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
user-select: none;
background: #020617;
transition: opacity 0.4s ease-out;
}
#portfolio-loader.loader-hidden {
opacity: 0 !important;
pointer-events: none !important;
}
html.light #portfolio-loader {
background: #f8fafc !important;
}
html.light #portfolio-loader .font-pixel {
color: #0284c7 !important;
}
html.light #portfolio-loader [data-i18n="loader_init"] {
color: #64748b !important;
}
/* Loader progress wrapper (protective outer casing) & inner chassis */
#portfolio-loader .loader-progress-wrapper {
position: relative;
z-index: 0;
background: #334155 !important;
border: none !important;
box-shadow: none !important;
filter: drop-shadow(2px 2px 0px rgba(15, 23, 42, 0.95)) !important;
padding: 3px !important;
}
#portfolio-loader .loader-progress-wrapper::before {
content: "" !important;
position: absolute !important;
inset: 1.5px !important;
background: #1e293b !important;
clip-path: inherit !important;
z-index: 0 !important;
}
#portfolio-loader .loader-progress-chassis {
position: relative;
z-index: 1;
height: 14px !important;
background: #020617 !important;
border: 1px solid #334155 !important;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important;
filter: none !important;
padding: 0 !important;
}
#portfolio-loader .loader-progress-chassis::before {
display: none !important;
}
#portfolio-loader #loader-progress-bar {
position: relative;
z-index: 2;
height: 100% !important;
box-shadow: 0 0 8px rgba(6, 182, 212, 0.5) !important;
}
html.light #portfolio-loader .loader-progress-wrapper {
background: #94a3b8 !important; /* Stepped Slate-400 outer bezel */
border: none !important;
box-shadow: none !important;
filter: drop-shadow(2px 2px 0px rgba(203, 213, 225, 0.8)) !important;
}
html.light #portfolio-loader .loader-progress-wrapper::before {
background: #ffffff !important; /* Clean light casing well */
}
html.light #portfolio-loader .loader-progress-chassis {
background: #e2e8f0 !important; /* Sunken light track */
border: 1px solid #cbd5e1 !important;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}
html.light #portfolio-loader .loader-progress-chassis::before {
display: none !important;
}
html.light #portfolio-loader #loader-status-text {
color: #64748b !important;
}
html.light #portfolio-loader #loader-percent {
color: #0284c7 !important;
}
/* GPU Hardware Acceleration for Character Sprites to Guarantee Smooth 60fps Adventure Animations */
#hero-portal-sprite,
#rail-character-walker,
#rail-character-sprite,
#dialogue-avatar-sprite,
#flying-pixel-sprite-img {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
/* Photo and Image Skeleton Shimmer */
.photo-skeleton {
background: linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
background-size: 200% 100%;
animation: skeleton-pulse 1.8s ease-in-out infinite;
}
html.light .photo-skeleton {
background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
background-size: 200% 100%;
}
@keyframes skeleton-pulse {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
@media (prefers-reduced-motion: reduce) {
#portfolio-loader {
transition: none !important;
}
#loader-sprite {
animation: none !important;
}
.photo-skeleton {
animation: none !important;
}
}