/* style.css */

:root {

/* --- DARK MODE (Default) --- */

--bg-color: #0f1115;

--card-bg: #1b1e26;

--text-main: #e0e0e0;

--text-muted: #9ba1b0;

--border-color: rgba(255, 255, 255, 0.05);

--accent: #3b82f6; /* Blue (Default) */

--parker-accent: #c53677; /* Fiery Fuchsia */

--slice-accent: #8b5cf6; /* Purple */

--study-accent: #2563eb; /* Royal Blue */

--pit-accent: #dc2626; /* Racing Red */

--about-accent: #14b8a6; /* Teal */

--changelog-bg: rgba(0, 0, 0, 0.2);

--scrollbar-track: rgba(0, 0, 0, 0.1);

--scrollbar-thumb: rgba(255, 255, 255, 0.15);

--scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);

}

/* --- LIGHT MODE OVERRIDES --- */

[data-theme="light"] {

--bg-color: #f3f4f6; /* Light Gray Background */

--card-bg: #ffffff; /* Pure White Cards */

--text-main: #111827; /* Dark Gray/Black Text */

--text-muted: #4b5563; /* Medium Gray Text */

--border-color: rgba(0, 0, 0, 0.08); /* Subtle dark border */

--changelog-bg: rgba(0, 0, 0, 0.05);

--scrollbar-track: rgba(0, 0, 0, 0.05);

--scrollbar-thumb: rgba(0, 0, 0, 0.2);

--scrollbar-thumb-hover: rgba(0, 0, 0, 0.3);

}

/* Light logo appearing black on light theme (home/privacy pages) */

[data-theme="light"] .logo img {

filter: brightness(0) saturate(100%) invert(0%) sepia(9%) saturate(93%) hue-rotate(337deg) brightness(102%) contrast(83%);

}

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

site-header,

site-footer {

display: contents;

}

body {

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

background-color: var(--bg-color);

color: var(--text-main);

line-height: 1.6;

transition:

background-color 0.3s ease,

color 0.3s ease;

}

a {

text-decoration: none;

color: inherit;

transition: 0.2s;

}

ul {

list-style: none;

}

/* Layout Utilities */

.container {

max-width: 1100px;

margin: 0 auto;

padding: 20px;

}

.header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 40px 0;

}

/* Logo */

.logo {

display: flex;

align-items: center;

gap: 12px;

}

.logo a {

display: flex;

align-items: center;

}

.logo img {

height: auto;

max-height: 80px;

width: auto;

max-width: 100%;

transition: opacity 0.2s;

}

/* Navigation */

.nav-link {

margin-left: 20px;

color: var(--text-muted);

font-size: 0.9rem;

transition: color 0.2s ease;

}

.nav-link.active {

color: var(--accent);

font-weight: 600;

}

/* Default Hover (Blue) - Theme overrides are handled at the bottom */

.nav-link:hover {

color: var(--accent);

}

/* Navigation Container Fix */

.header nav {

display: flex;

align-items: center;

}

/* --- THEME TOGGLE BUTTON --- */

.theme-toggle {

background: none;

border: none;

cursor: pointer;

margin-left: 25px;

padding: 5px;

color: var(--text-muted);

display: flex;

align-items: center;

transition:

color 0.2s,

transform 0.2s;

}

.theme-toggle:hover {

color: var(--accent); /* Default Blue hover */

transform: rotate(15deg);

}

.theme-toggle svg {

width: 22px;

height: 22px;

fill: currentColor;

}

/* Hero Section */

.hero {

text-align: center;

padding: 60px 20px;

}

.hero h1 {

font-size: 3rem;

margin-bottom: 20px;

line-height: 1.1;

}

.hero p {

font-size: 1.2rem;

color: var(--text-muted);

max-width: 600px;

margin: 0 auto 30px;

}

/* Buttons */

.btn {

display: inline-block;

padding: 12px 24px;

border-radius: 8px;

font-weight: 700;

background-color: var(--accent);

color: white;

background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2) 50%, transparent 50%) !important;

background-size: 200% 100% !important;

background-position: 100% 0 !important;

transition:

background-position 0.3s ease-out,

transform 0.2s ease,

box-shadow 0.2s ease;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

-webkit-font-smoothing: antialiased;

backface-visibility: hidden;

will-change: transform;

}

.btn:hover {

background-position: 0 0 !important;

transform: translateY(-2px);

box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);

}

.btn:active {

transform: translateY(0);

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

/* --- Secondary Button (Outline Style) --- */

.btn-secondary {

background-color: var(--card-bg);

border: 1px solid var(--border-color);

color: var(--text-main);

background-image: none !important;

box-shadow: none;

}

.btn-secondary:hover {

border-color: var(--text-muted);

transform: translateY(-2px);

box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}

/* Grids & Cards */

.grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 30px;

margin-top: 40px;

}

.card {

background: var(--card-bg);

border-radius: 12px;

padding: 30px;

border: 1px solid var(--border-color);

transition: 0.3s;

}

.card:hover {

transform: translateY(-5px);

border-color: var(--accent);

} /* Default Blue hover */

.card h3 {

font-size: 1.5rem;

margin-bottom: 10px;

}

.card p {

color: var(--text-muted);

margin-bottom: 20px;

}

/* Feature Lists */

.feature-list li {

margin-bottom: 10px;

padding-left: 20px;

position: relative;

color: var(--text-muted);

}

.feature-list li::before {

content: "•";

position: absolute;

left: 0;

color: var(--accent);

}

/* Parker Specifics */

.game-banner {

width: 100%;

height: 350px;

object-fit: cover;

object-position: top;

border-radius: 12px;

margin-bottom: 20px;

border: 1px solid var(--border-color);

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

}

/* Slice Stack Specifics */

.screenshot-row {

display: flex;

justify-content: center;

gap: 20px;

margin: 40px 0;

flex-wrap: wrap;

}

.mobile-screenshot {

width: 220px;

border-radius: 12px;

border: 1px solid var(--border-color);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

transition: transform 0.3s ease;

}

.mobile-screenshot:hover {

transform: translateY(-10px);

}

/* Footer */

footer {

text-align: center;

padding: 50px 0;

color: var(--text-muted);

font-size: 0.9rem;

margin-top: 50px;

border-top: 1px solid var(--border-color);

}

footer a {

transition: color 0.2s ease;

text-decoration: none;

}

footer a:hover {

color: var(--accent);

text-decoration: underline;

}

/* --- Skill Badges --- */

.skill-container {

display: flex;

flex-wrap: wrap;

gap: 10px;

margin-top: 15px;

}

.skill-badge {

background: rgba(255, 255, 255, 0.03);

border: 1px solid var(--border-color);

padding: 8px 14px;

border-radius: 20px;

font-size: 0.9rem;

color: var(--text-main);

transition:

border-color 0.2s ease,

transform 0.2s ease,

color 0.2s ease;

cursor: default;

user-select: none;

}

[data-theme="light"] .skill-badge {

background: rgba(0, 0, 0, 0.03);

}

.skill-badge:hover {

transform: translateY(-2px);

}

/* Make the badges glow Teal on the About page */

.about-theme .skill-badge:hover {

border-color: var(--about-accent);

color: var(--about-accent);

}

/* --- Open Source Contributions --- */

.open-source-section {

margin-top: 64px;

}

.open-source-section h2 {

text-align: center;

margin-bottom: 22px;

}

.open-source-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

gap: 20px;

}

.open-source-repo {

display: flex;

justify-content: space-between;

align-items: baseline;

gap: 10px;

margin-bottom: 12px;

}

.open-source-repo h3 {

margin-bottom: 0;

font-size: 1.2rem;

}

.open-source-repo-title-group {

display: inline-flex;

align-items: center;

gap: 8px;

}

.open-source-stars-bubble {

display: inline-flex;

align-items: center;

gap: 4px;

border: 1px solid var(--border-color);

border-radius: 999px;

padding: 2px 8px;

font-size: 0.78rem;

color: var(--text-muted);

background: rgba(255, 255, 255, 0.02);

}

[data-theme="light"] .open-source-stars-bubble {

background: rgba(0, 0, 0, 0.02);

}

.open-source-stars-bubble svg {

width: 12px;

height: 12px;

fill: currentColor;

opacity: 0.8;

}

.open-source-count {

color: var(--text-muted);

font-size: 0.9rem;

white-space: nowrap;

}

.open-source-repo-desc {

color: var(--text-muted);

margin-bottom: 12px;

}

.open-source-language-list {

margin-top: 4px;

margin-bottom: 14px;

}

.open-source-card {

transform: none;

transition:

transform 0.2s ease,

border-color 0.2s ease;

}

.open-source-card:hover {

transform: translateY(-3px);

}

.open-source-card::before,

.open-source-card:hover::before {

opacity: 0;

}

.open-source-card > *,

.open-source-card:hover > * {

transform: none;

}

.open-source-pr-list {

display: flex;

flex-direction: column;

gap: 10px;

}

.open-source-pr-item {

border: 1px solid var(--border-color);

border-radius: 10px;

padding: 10px 12px;

background: rgba(255, 255, 255, 0.02);

transition:

transform 0.2s ease,

border-color 0.2s ease;

}

[data-theme="light"] .open-source-pr-item {

background: rgba(0, 0, 0, 0.02);

}

.open-source-pr-item a {

color: var(--about-accent);

font-weight: 600;

}

.open-source-pr-item a:hover {

text-decoration: underline;

}

.open-source-pr-item:hover {

transform: translateX(4px);

border-color: rgba(20, 184, 166, 0.35);

}

.open-source-pr-meta {

color: var(--text-muted);

font-size: 0.88rem;

margin-top: 3px;

}

/* --- Tech Showcase --- */

.tech-showcase {

margin-top: 60px;

text-align: center;

}

#behind-the-scenes {

scroll-margin-top: 24px;

}

.tech-showcase h2 {

margin-bottom: 20px;

}

.tech-showcase p {

color: var(--text-muted);

margin-bottom: 30px;

max-width: 600px;

margin-left: auto;

margin-right: auto;

}

.tech-showcase-link {

color: var(--accent);

font-weight: 600;

margin-left: 5px;

white-space: nowrap;

}

.tech-showcase-link:hover {

text-decoration: underline;

}

.tech-frame {

background: var(--card-bg);

padding: 10px;

border-radius: 12px;

display: inline-block;

border: 1px solid var(--border-color);

}

.tech-frame img {

display: block;

}

/* Changelog */

.changelog-section {

max-width: 800px;

margin: 60px auto 0;

}

.changelog-section h2 {

text-align: center;

margin-bottom: 20px;

}

.changelog-box {

background: var(--changelog-bg);

border: 1px solid var(--border-color);

border-radius: 12px;

padding: 30px;

max-height: 400px;

overflow-y: auto;

}

.version-entry {

margin-bottom: 25px;

padding-bottom: 25px;

border-bottom: 1px solid var(--border-color);

}

.version-entry:last-child {

border-bottom: none;

margin-bottom: 0;

padding-bottom: 0;

}

.version-header {

display: flex;

align-items: center;

gap: 15px;

margin-bottom: 15px;

}

.version-title {

font-size: 1.2rem;

font-weight: bold;

}

.badge-latest {

font-size: 0.7rem;

padding: 4px 8px;

border-radius: 4px;

text-transform: uppercase;

letter-spacing: 0.5px;

font-weight: 800;

color: white;

}

/* Scrollbar */

.changelog-box::-webkit-scrollbar {

width: 8px;

}

.changelog-box::-webkit-scrollbar-track {

background: var(--scrollbar-track);

margin-block: 10px;

border-radius: 4px;

}

.changelog-box::-webkit-scrollbar-thumb {

background: var(--scrollbar-thumb);

border-radius: 4px;

}

.changelog-box::-webkit-scrollbar-thumb:hover {

background: var(--scrollbar-thumb-hover);

}

/* Lightbox */

.enlargeable-image {

cursor: zoom-in;

max-width: 100%;

height: auto;

border-radius: 8px;

transition: opacity 0.2s ease;

}

.lightbox-clone {

position: fixed;

top: 0;

left: 0;

width: 100vw;

height: 100vh;

object-fit: scale-down;

background-color: rgba(0, 0, 0, 0.95);

z-index: 9999;

padding: 30px;

box-sizing: border-box;

cursor: zoom-out;

animation: zoomIn 0.25s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}

.lightbox-clone.closing {

animation: zoomOut 0.2s ease-in forwards;

}

@keyframes zoomIn {

from {

opacity: 0;

transform: scale(0.9);

}

to {

opacity: 1;

transform: scale(1);

}

}

@keyframes zoomOut {

from {

opacity: 1;

transform: scale(1);

}

to {

opacity: 0;

transform: scale(0.9);

}

}

/* Animated Banner */

.banner-placeholder {

width: 100%;

height: 350px;

background-color: var(--card-bg);

border: 1px solid var(--border-color);

border-radius: 12px;

margin-bottom: 20px;

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

overflow: hidden;

position: relative;

transition:

border-color 0.5s ease,

background-color 0.5s ease;

}

.banner-placeholder.loaded {

background-color: transparent;

border-color: transparent;

}

.game-banner-animated {

width: 100%;

height: 100%;

object-fit: cover;

object-position: top;

opacity: 0;

transform: scale(1.02);

transition:

opacity 0.8s ease-out,

transform 0.8s ease-out;

}

.banner-placeholder.loaded .game-banner-animated {

opacity: 1;

transform: scale(1);

}

/* ========================================= */

/* RESPONSIVE LAYOUT */

/* ========================================= */

@media (max-width: 900px) {

.container {

padding: 18px;

}

.header {

flex-direction: column;

gap: 14px;

padding: 26px 0 18px;

}

.header nav {

width: 100%;

justify-content: center;

flex-wrap: wrap;

gap: 8px;

}

.nav-link {

margin-left: 0;

padding: 7px 12px;

border-radius: 999px;

border: 1px solid var(--border-color);

background: var(--card-bg);

font-size: 0.85rem;

line-height: 1;

}

.theme-toggle {

margin-left: 0;

border-radius: 999px;

border: 1px solid var(--border-color);

padding: 7px;

}

.hero h1 {

font-size: clamp(2rem, 7vw, 2.6rem);

}

.hero p {

font-size: 1.06rem;

}

.project-spotlight {

padding: 24px;

}

.project-spotlight-description {

font-size: 0.98rem;

}

.grid {

grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

gap: 20px;

}

.banner-placeholder {

height: 280px;

}

}

@media (max-width: 768px) {

.container {

padding: 14px;

}

.logo img {

max-height: 62px;

}

.hero {

padding: 36px 10px;

}

.hero h1 {

margin-bottom: 14px;

line-height: 1.08;

}

.hero p {

font-size: 1rem;

margin-bottom: 22px;

}

.project-spotlight {

padding: 18px;

margin-bottom: 16px;

}

.project-spotlight-actions {

flex-direction: column;

align-items: stretch;

}

.project-spotlight-actions .btn {

width: 100%;

}

.project-spotlight-indicators {

width: 100%;

justify-content: center;

}

.btn {

width: min(100%, 320px);

text-align: center;

padding: 12px 18px;

}

.grid {

grid-template-columns: 1fr;

gap: 16px;

margin-top: 24px;

}

.card {

padding: 22px;

}

.card h3 {

font-size: 1.25rem;

}

.feature-list li {

margin-bottom: 8px;

padding-left: 16px;

font-size: 0.97rem;

}

.screenshot-row {

gap: 12px;

margin: 26px 0;

}

.mobile-screenshot {

width: min(46%, 180px);

}

.banner-placeholder,

.game-banner {

height: 220px;

}

.changelog-section {

margin-top: 42px;

}

.changelog-box {

padding: 20px;

max-height: 320px;

}

.version-header {

align-items: flex-start;

flex-direction: column;

gap: 8px;

}

.achievement-toast {

width: calc(100vw - 24px);

border-radius: 12px;

padding: 12px 14px;

}

.achievement-toast.show {

bottom: 16px;

}

.lightbox-clone {

padding: 12px;

}

.open-source-grid {

grid-template-columns: 1fr;

}

}

@media (max-width: 420px) {

.hero h1 {

font-size: 1.75rem;

}

.hero p {

font-size: 0.95rem;

}

.nav-link {

font-size: 0.8rem;

}

.card {

padding: 18px;

}

.skill-badge {

font-size: 0.82rem;

padding: 6px 10px;

}

.project-spotlight-kicker {

font-size: 0.68rem;

}

}

/* Disable hover/3D-only visuals on touch devices. */

@media (hover: none), (pointer: coarse) {

.card:hover {

transform: none;

border-color: var(--border-color);

}

.card:hover::before {

opacity: 0;

}

.card:hover > * {

transform: translateZ(0);

}

.btn:hover {

transform: none;

background-position: 100% 0 !important;

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.mobile-screenshot:hover {

transform: none;

}

}

/* ========================================= */

/* THEME OVERRIDES SYSTEM */

/* ========================================= */

/* Parker Theme (Fiery Fuchsia) */

.parker-theme .logo {

color: var(--parker-accent);

}

.parker-theme .btn {

background-color: var(--parker-accent);

}

.parker-theme li::before {

color: var(--parker-accent);

}

.parker-theme .nav-link:hover {

color: var(--parker-accent);

}

.parker-theme .nav-link.active {

color: var(--parker-accent);

}

.parker-theme .theme-toggle:hover {

color: var(--parker-accent);

}

.parker-theme .card:hover {

border-color: var(--parker-accent);

}

.parker-theme footer a:hover {

color: var(--parker-accent);

}

/* Filter: White -> Fiery Fuchsia */

.parker-theme .logo img {

filter: brightness(0) saturate(100%) invert(30%) sepia(45%) saturate(3355%) hue-rotate(310deg) brightness(83%) contrast(83%);

}

/* Slice Theme (Purple) */

.slice-theme .logo {

color: var(--slice-accent);

}

.slice-theme .btn {

background-color: var(--slice-accent);

}

.slice-theme li::before {

color: var(--slice-accent);

}

.slice-theme .nav-link:hover {

color: var(--slice-accent);

}

.slice-theme .nav-link.active {

color: var(--slice-accent);

}

.slice-theme .theme-toggle:hover {

color: var(--slice-accent);

}

.slice-theme .card:hover {

border-color: var(--slice-accent);

}

.slice-theme footer a:hover {

color: var(--slice-accent);

}

/* Filter: White -> Purple */

.slice-theme .logo img {

filter: brightness(0) saturate(100%) invert(39%) sepia(41%) saturate(3648%) hue-rotate(237deg) brightness(98%) contrast(97%);

}

/* StudySnap Theme (Royal Blue) */

.study-theme .logo {

color: var(--study-accent);

}

.study-theme .btn {

background-color: var(--study-accent);

}

.study-theme li::before {

color: var(--study-accent);

}

.study-theme .nav-link:hover {

color: var(--study-accent);

}

.study-theme .nav-link.active {

color: var(--study-accent);

}

.study-theme .theme-toggle:hover {

color: var(--study-accent);

}

.study-theme .card:hover {

border-color: var(--study-accent);

}

.study-theme footer a:hover {

color: var(--study-accent);

}

/* Filter: White -> Royal Blue */

.study-theme .logo img {

filter: brightness(0) saturate(100%) invert(25%) sepia(99%) saturate(2051%) hue-rotate(216deg) brightness(96%) contrast(91%);

}

/* About Theme (Teal) */

.about-theme .logo {

color: var(--about-accent);

}

.about-theme .btn {

background-color: var(--about-accent);

}

.about-theme .nav-link:hover {

color: var(--about-accent);

}

.about-theme .nav-link.active {

color: var(--about-accent);

}

.about-theme .theme-toggle:hover {