@charset "utf-8"; /* ============================================================ MODERN PORTFOLIO DESIGN SYSTEM Dark-first, minimal, with gradient accents ============================================================ */ /* Metric-matched fallback for Inter: local Arial scaled so text occupies the same width as Inter before the web font loads. Prevents layout shift (e.g. the "Projects" nav item reflowing) when Inter swaps in. */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Roboto'); ascent-override: 90.44%; descent-override: 22.52%; line-gap-override: 0%; size-adjust: 106.17%; } /* --- CSS Custom Properties --- */ :root { --color-bg: #0a0a0f; --color-bg-alt: #12121a; --color-surface: #1a1a25; --color-surface-hover: #22222f; --color-border: rgba(255, 255, 255, 0.06); --color-text: #e4e4e7; --color-text-muted: #9ca3af; --color-text-subtle: #6b7280; --color-heading: #ffffff; --color-accent: #818cf8; --color-accent-hover: #a5b4fc; --color-accent-subtle: rgba(129, 140, 248, 0.1); --color-accent-glow: rgba(129, 140, 248, 0.2); --gradient-accent: linear-gradient(135deg, #818cf8 0%, #c084fc 50%, #f472b6 100%); --gradient-surface: linear-gradient(135deg, rgba(129, 140, 248, 0.08) 0%, rgba(192, 132, 252, 0.04) 100%); --navbar-bg: rgba(10, 10, 15, 0.8); --media-icon-filter: brightness(0) invert(1); --hero-glow-1: rgba(129, 140, 248, 0.08); --hero-glow-2: rgba(192, 132, 252, 0.06); --btn-glow: rgba(129, 140, 248, 0.3); --btn-glow-hover: rgba(129, 140, 248, 0.45); --font-sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Space Grotesk', var(--font-sans); --radius: 12px; --radius-lg: 20px; --radius-sm: 8px; --radius-image: 8px; /* image corners; not overridden by the CMS theme */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 40px rgba(129, 140, 248, 0.15); --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1); --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } /* --- Light Mode --- */ [data-theme="light"] { --color-bg: #f8f9fc; --color-bg-alt: #eef0f5; --color-surface: #ffffff; --color-surface-hover: #f1f3f8; --color-border: rgba(0, 0, 0, 0.08); --color-text: #1a1a2e; --color-text-muted: #4b5563; --color-text-subtle: #9ca3af; --color-heading: #111827; --color-accent: #6366f1; --color-accent-hover: #4f46e5; --color-accent-subtle: rgba(99, 102, 241, 0.08); --color-accent-glow: rgba(99, 102, 241, 0.15); --gradient-accent: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%); --gradient-surface: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(168, 85, 247, 0.03) 100%); --navbar-bg: rgba(248, 249, 252, 0.85); --media-icon-filter: brightness(0) invert(0); --hero-glow-1: rgba(99, 102, 241, 0.06); --hero-glow-2: rgba(168, 85, 247, 0.04); --btn-glow: rgba(99, 102, 241, 0.25); --btn-glow-hover: rgba(99, 102, 241, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1); --shadow-glow: 0 0 40px rgba(99, 102, 241, 0.1); } /* --- Global Reset & Base --- */ html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Always reserve the scrollbar gutter so the nav doesn't shift between short pages (e.g. the private gallery) and long ones, or when a tall dropdown opens. Fallback to overflow-y: scroll for browsers without gutter support. */ overflow-y: scroll; scrollbar-gutter: stable; } body { font-family: var(--font-sans) !important; background-color: var(--color-bg) !important; color: var(--color-text) !important; line-height: 1.7; letter-spacing: -0.01em; /* clip (not hidden) prevents horizontal scroll without making a scroll container — which would break position: sticky (e.g. the project TOC). */ overflow-x: clip; } ::selection { background: rgba(129, 140, 248, 0.3); color: #fff; } /* White text is used to emphasize copy in dark mode. In light mode pure white would be invisible, so flip it to the dark heading color (preserving the emphasis). Covers the markup the editor produces plus span/rgb variants. */ [data-theme="light"] font[color="#ffffff" i], [data-theme="light"] font[color="#fff" i], [data-theme="light"] font[color="white" i], [data-theme="light"] [style*="rgb(255, 255, 255)"], [data-theme="light"] [style*="#ffffff"], [data-theme="light"] [style*="#fff;"], [data-theme="light"] [style*="#fff "] { color: var(--color-heading) !important; } /* --- Typography --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display) !important; font-weight: 600; letter-spacing: -0.03em; color: var(--color-heading); line-height: 1.2; } h1 { font-size: 3.2rem; font-weight: 700; } h2 { font-size: 2.2rem; } h3 { font-size: 1.5rem; } h4 { font-size: 1.15rem; font-weight: 500; } h5 { font-size: 1rem; font-weight: 600; } h6 { font-family: var(--font-sans) !important; font-size: 0.875rem; font-weight: 400; color: var(--color-text-muted); letter-spacing: 0; } p { color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.8; } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent-hover); text-decoration: none; } strong { color: var(--color-heading); font-weight: 600; } /* --- Navbar --- */ .navbar { background: var(--navbar-bg) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-bottom: 1px solid var(--color-border); padding: 0.9rem 1.5rem !important; transition: all var(--transition-smooth); position: sticky; top: 0; z-index: 1030; } .navbar-brand { font-family: var(--font-display) !important; font-weight: 600 !important; font-size: 1.1rem !important; letter-spacing: -0.02em; color: var(--color-heading) !important; transition: opacity var(--transition-fast); } .navbar-brand:hover { opacity: 0.8; color: var(--color-heading) !important; } .nav-link { font-size: 0.9rem !important; font-weight: 400; color: var(--color-text-muted) !important; padding: 0.5rem 1rem !important; transition: color var(--transition-fast); letter-spacing: 0; } .nav-link:hover, .nav-link:focus { color: var(--color-heading) !important; } .navbar-dark .navbar-toggler { border-color: var(--color-border); } .dropdown-menu { background: var(--color-surface) !important; border: 1px solid var(--color-border) !important; border-radius: var(--radius) !important; padding: 0.5rem !important; box-shadow: var(--shadow-lg); backdrop-filter: blur(20px); margin-top: 0.5rem !important; } .dropdown-item { color: var(--color-text-muted) !important; font-size: 0.875rem; padding: 0.5rem 1rem !important; border-radius: var(--radius-sm); transition: all var(--transition-fast); } .dropdown-item:hover, .dropdown-item:focus { background: var(--color-accent-subtle) !important; color: var(--color-heading) !important; } /* Lock icon beside a private project's name in the projects dropdown. */ .nav-lock-icon { vertical-align: -0.12em; margin-right: 0.4em; opacity: 0.7; } .dropdown-divider { border-top-color: var(--color-border) !important; margin: 0.3rem 0.5rem !important; } /* --- Hero / Jumbotron --- */ .jumbotron { background: var(--color-bg) !important; border-radius: 0 !important; padding: 6rem 2rem 4rem !important; margin-bottom: 0 !important; position: relative; overflow: hidden; } .jumbotron::before { content: ''; position: absolute; top: -50%; left: -25%; width: 150%; height: 150%; background: radial-gradient(ellipse at 30% 50%, var(--hero-glow-1) 0%, transparent 60%), radial-gradient(ellipse at 70% 50%, var(--hero-glow-2) 0%, transparent 60%); pointer-events: none; animation: heroGlow 8s ease-in-out infinite alternate; } @keyframes heroGlow { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } } .jumbotron h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1.2rem; position: relative; z-index: 1; } .jumbotron p { font-size: 1.15rem; max-width: 640px; margin-left: auto; margin-right: auto; color: var(--color-text-muted); position: relative; z-index: 1; } /* "Previously at" wordmark bar under the hero role line. Monochrome and theme-driven: the names use --color-heading (white in dark, ink in light); the "Previously" label and dots stay quiet. Wordmarks are plain text (no brand-asset files); to swap in an official monochrome logo later, replace a .prev-bar__mark's text with an inline at the same slot and it inherits the color/flip for free. */ .prev-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.5rem; position: relative; z-index: 1; } .prev-bar__label { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-muted); } .prev-bar__marks { display: flex; align-items: center; gap: 1.1rem; } .prev-bar__mark { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-heading); line-height: 1; } .prev-bar__sep { width: 3px; height: 3px; border-radius: 50%; background: var(--color-heading); opacity: 0.4; flex-shrink: 0; } /* Hero "split" layout: left identity column (name, role, Previously, CTA) beside a right column carrying the statement + intro. Folds two stacked centered sections into one row, cutting the homepage's vertical height. */ .jumbotron--split { text-align: left; } .hero-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: center; } .hero-identity { border-right: 1px solid var(--color-border); padding-right: 2.5rem; } .hero-identity h4 { font-size: 1.5rem; } /* Left-align the Previously bar + CTA buttons inside the split hero (the base .prev-bar stays centered for any centered layout). */ .jumbotron--split .prev-bar, .jumbotron--split .home-cta { justify-content: flex-start; } /* Compact hero CTAs: content-width, side by side, left-aligned. The short labels ("Selected work" / "Private work") fit on one row without wrapping. */ .hero-statement h2 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--color-heading); line-height: 1.15; margin: 0 0 0.9rem; } /* Override the centered, width-capped .jumbotron p for the statement column. */ .hero-statement p { max-width: none; margin: 0; } /* The boxed hero-stat is a

, so the reset above also zeroes its margin — restore clear separation from the intro with higher specificity. */ .hero-statement .hero-stat { margin-top: 2rem; } /* Hero proof stat: an impact metric (e.g. "8h → 3h") + short label, sized to read as a number in the hero. Theme-aware via tokens; wraps on narrow widths. Inert until the markup (.hero-stat / -value / -label) is added by Content. */ .hero-stat { display: inline-grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 0.85rem; row-gap: 0.15rem; margin-top: 2rem; max-width: 100%; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); } .hero-stat-value { grid-column: 2; } .hero-stat-label { grid-column: 2; } .hero-stat-value { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; background: var(--gradient-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hero-stat-label { font-size: 0.82rem; line-height: 1.3; color: var(--color-text-muted); } /* Decorative line-art game-controller mark above the value ("games launched"). Injected as a data-URI SVG (accent gradient baked in — legible on the surface box in both themes); pseudo-element is not announced to AT. */ .hero-stat::before { content: ""; grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 2.4rem; height: 2.4rem; background: url("data:image/svg+xml,") center / contain no-repeat; } /* Compact featured strip: a 3-up row of the featured cards placed directly under the hero so real work lands above the fold. Cards reuse the grid badge + year pill; smaller than the main grid so the row fits at 1280x800. Contract (CMS renders into the index.php placeholder Content adds):

BADGE + … +
Title
(x3)
*/ .featured-strip { padding-top: 0.5rem; } .hero-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .hero-featured__card { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .hero-featured__card .grid-thumb-link { position: relative; display: block; padding: 6px; border-radius: var(--radius); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); } .hero-featured__card img { display: block; width: 100%; border-radius: calc(var(--radius) - 5px); } .hero-featured__card figcaption { font-family: var(--font-display); font-weight: 500; font-size: 0.92rem; color: var(--color-heading); } /* Secondary line under the featured card title (matches the gallery thumb-label-sub role: smaller, muted, body font). */ .hero-featured__sub { display: block; margin-top: 0.15rem; font-family: var(--font-sans); font-weight: 400; font-size: 0.78rem; line-height: 1.35; color: var(--color-text-subtle); } /* Primary section heading above the featured strip — sits above the de-emphasized "Additional work" heading (1.6rem/500) in the hierarchy. */ .featured-heading { font-size: 2.2rem; font-weight: 600; color: var(--color-heading); text-align: center; margin: 0 0 1.5rem; } @media (max-width: 767px) { .hero-featured { gap: 0.6rem; } .hero-featured__card figcaption { font-size: 0.78rem; } } @media (max-width: 767px) { .hero-grid { grid-template-columns: 1fr; gap: 1.6rem; } .hero-identity { border-right: 0; padding-right: 0; padding-bottom: 1.6rem; border-bottom: 1px solid var(--color-border); } } /* Three principle boxes laid across (was stacked full-width rows with a decorative hover). Shorter section, no hover. */ /* Closing "how I work" band: the principles moved below the work on the homepage (rendered home-only into the footer.html placeholder). Sets it off from the gallery above with a top divider. */ .principles-band { border-top: 1px solid var(--color-border); padding: 3rem 0; } /* Previous/Next project navigation on project pages (replaces the footer mega-grid). Prev on the left, Next on the right; either link is omitted at the ends (first/last project), and the remaining one keeps its side. */ .prev-next-nav { display: flex; gap: 1.5rem; max-width: 1100px; margin: 2.5rem auto 0; padding-top: 2rem; border-top: 1px solid var(--color-border); } .prev-next-nav__prev, .prev-next-nav__next { display: flex; flex-direction: column; gap: 0.2rem; max-width: 46%; color: var(--color-text-muted); transition: color var(--transition-fast); } .prev-next-nav__next { margin-left: auto; text-align: right; } .prev-next-nav__dir { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-subtle); } .prev-next-nav__prev .prev-next-nav__dir::before { content: "\2190\00a0"; } .prev-next-nav__next .prev-next-nav__dir::after { content: "\00a0\2192"; } .prev-next-nav__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--color-heading); transition: color var(--transition-fast); } .prev-next-nav__prev:hover .prev-next-nav__title, .prev-next-nav__next:hover .prev-next-nav__title { color: var(--color-accent); } @media (max-width: 575.98px) { .prev-next-nav__title { font-size: 0.95rem; } } .principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .principle__num { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; opacity: 0.35; color: var(--color-heading); } .principle h5 { margin: 0.6rem 0 0.4rem; } .principle p { margin: 0; font-size: 0.9rem; line-height: 1.6; } @media (max-width: 767px) { .principles-grid { grid-template-columns: 1fr; gap: 1.4rem; } } /* --- Buttons --- */ .btn-primary { background: var(--gradient-accent) !important; border: none !important; border-radius: 50px !important; padding: 0.75rem 2rem !important; font-family: var(--font-sans) !important; font-weight: 500 !important; font-size: 0.95rem !important; letter-spacing: 0; color: #fff !important; transition: all var(--transition-smooth) !important; box-shadow: 0 4px 20px var(--btn-glow); position: relative; z-index: 1; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 30px var(--btn-glow-hover) !important; } .btn-primary:active { transform: translateY(0); } .btn-outline-dark { border-color: var(--color-border) !important; color: var(--color-text-muted) !important; border-radius: 50px !important; padding: 0.5rem 1.5rem !important; font-size: 0.85rem !important; font-weight: 500; transition: all var(--transition-fast) !important; background: transparent !important; } .btn-outline-dark:hover { background: var(--color-surface) !important; border-color: var(--color-accent) !important; color: var(--color-accent) !important; } /* Secondary action button — white stroke + white text on dark theme (uses heading color so it stays legible in light theme too) */ .btn-outline-light { background: transparent !important; border: 1.5px solid var(--color-heading) !important; border-radius: 50px !important; padding: 0.75rem 2rem !important; font-family: var(--font-sans) !important; font-weight: 500 !important; font-size: 0.95rem !important; color: var(--color-heading) !important; transition: all var(--transition-smooth) !important; } .btn-outline-light:hover { background: var(--color-heading) !important; color: var(--color-bg) !important; transform: translateY(-2px); } .btn-outline-light:active { transform: translateY(0); } /* Homepage call-to-action buttons: center them with an even gap (instead of the inline margin), and stack to equal full-width buttons on small screens. */ .home-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; margin-top: 1.5rem; } .home-cta .btn { margin-left: 0 !important; } @media (max-width: 575.98px) { .home-cta { flex-direction: column; } .home-cta .btn { width: 100%; max-width: 340px; } } /* Scroll-to-work CTA is mobile-only: redundant on desktop where the featured strip is already on screen; useful on mobile where work is below the fold. */ @media (min-width: 768px) { .home-cta__scroll { display: none; } } /* Hero CTA hierarchy: Request access = tertiary ghost (no border, muted, faint hover). Latest work = the prominent action — filled primary on desktop where the scroll CTA is hidden, and it stays outline on mobile so it doesn't compete with the filled scroll "Selected work" primary there. */ .home-cta__request { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--color-text-muted) !important; padding: 0.75rem 1rem !important; } .home-cta__request:hover { background: var(--color-surface) !important; color: var(--color-text) !important; transform: none !important; } @media (min-width: 768px) { .home-cta__private { background: var(--gradient-accent) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 4px 20px var(--btn-glow) !important; } .home-cta__private:hover { background: var(--gradient-accent) !important; color: #fff !important; box-shadow: 0 6px 30px var(--btn-glow-hover) !important; } } /* --- Sections --- */ section { padding: 1rem 0; } /* Intro tagline section */ section .container > .row > .col-12.text-center > h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 600; color: var(--color-heading); margin-bottom: 0.8rem; } /* --- Feature Cards (Design Thinker, etc.) --- */ .media { padding: 1.8rem; background: var(--color-surface); border-radius: var(--radius); border: 1px solid var(--color-border); transition: all var(--transition-smooth); height: 100%; } .media:hover { border-color: var(--color-accent-glow); background: var(--color-surface-hover); transform: translateY(-4px); box-shadow: var(--shadow-glow); } .media img { filter: var(--media-icon-filter); opacity: 0.7; } /* Project sidebar: remove card container from metadata */ .bg-light .media { background: transparent; border: none; padding: 0; } .bg-light .media:hover { transform: none; box-shadow: none; background: transparent; border-color: transparent; } .media .media-body { color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.7; } .media .media-body h5 { color: var(--color-heading); font-family: var(--font-display) !important; margin-bottom: 0.75rem !important; } .list-unstyled { margin-bottom: 0; } .project-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; padding-top: 0.25rem; } .project-tag { display: inline-block; background: var(--color-accent-subtle, rgba(99,102,241,0.1)); color: var(--color-accent); font-size: 0.7rem; font-weight: 500; padding: 0.15rem 0.5rem; border-radius: 999px; letter-spacing: 0.02em; } /* --- Project Thumbnails / Gallery --- */ a img { transition: all var(--transition-smooth) !important; border-radius: var(--radius); opacity: 1; } a img:hover { opacity: 0.85; transform: scale(1.03); box-shadow: var(--shadow-lg); } /* Selected work section */ #work { font-size: 1.15rem; font-weight: 500; color: var(--color-text-muted); position: relative; display: inline-block; } /* Project cards in footer gallery */ .col-md-6 > a > img, .col-md-4 > a > img, .col-md-3 > a > img { border-radius: var(--radius); transition: all var(--transition-smooth); } /* Featured gallery thumbnails fill their column so every card is the same size, even when a source image is lower resolution than the others. */ .col-md-6 > a > img, .col-md-4 > a > img { width: 100%; } /* Thumbnail hover overlay */ .thumb-overlay { position: relative; display: block; border-radius: var(--radius); overflow: hidden; } /* "Private" badge (lock icon on the left) shown on the thumbnail of a private project surfaced on the public grid. The featured (large) cards wrap their thumb in .grid-thumb-link so the absolute badge has a positioning context. Block (not inline-block) so a full-width thumbnail/placeholder fills the column exactly like a non-private featured card, instead of shrink-wrapping. */ .grid-thumb-link { position: relative; display: block; } .grid-private-badge { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.36rem; padding: 0.3rem 0.66rem 0.3rem 0.56rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; line-height: 1; letter-spacing: 0.02em; color: #f0c651; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); background: rgba(10, 10, 15, 0.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 999px; pointer-events: none; } .grid-private-badge svg { width: 13px; height: 13px; flex-shrink: 0; } .thumb-overlay img { display: block; width: 100%; transition: transform var(--transition-smooth), opacity var(--transition-smooth) !important; } .thumb-overlay .thumb-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0.75rem; font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; color: #fff; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--transition-smooth); pointer-events: none; border-radius: var(--radius); } /* Subtitle shown beneath the name when hovering a grid (non-featured) thumb. */ .thumb-overlay .thumb-label-sub { margin-top: 0.4rem; max-width: 92%; font-size: 0.72rem; font-weight: 400; letter-spacing: 0; line-height: 1.3; color: rgba(255, 255, 255, 0.82); } .thumb-overlay:hover .thumb-label { opacity: 1; } .thumb-overlay:hover img { transform: scale(1.05); opacity: 1 !important; } /* Solid-color placeholder for projects without a thumbnail image. Capped to the standard 400px thumbnail size (and centered) so it never renders larger than the real thumbnails on the main gallery. */ .thumb-placeholder { width: 100%; max-width: 400px; margin-left: auto; margin-right: auto; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; transition: border-color var(--transition-smooth); } .thumb-placeholder span { font-family: var(--font-display); font-weight: 700; font-size: clamp(0.9rem, 2.2vw, 1.3rem); line-height: 1.25; background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .thumb-overlay .thumb-placeholder { border-radius: var(--radius); } a:hover > .thumb-placeholder, .thumb-overlay:hover .thumb-placeholder { border-color: var(--color-accent); } /* Project titles under thumbnails */ .col-md-6 h4, .col-md-4 h4, .col-md-3 h4 { font-size: 1.1rem; font-weight: 500; margin-top: 1rem; color: var(--color-heading); } .col-md-6 h6, .col-md-4 h6, .col-md-3 h6 { font-size: 0.85rem; color: var(--color-text-subtle); font-weight: 400; margin-bottom: 1.5rem; } /* Year label on every project card. Always visible (no hover needed) so the grid reads as dated at a skim. Sits top-right of the thumbnail; the private lock badge is top-left, so the two never collide. Matches the badge's pill treatment for a consistent overlay language. Positioning context is the card's anchor (.grid-thumb-link on featured, .thumb-overlay on grid cards). */ .card-year { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; font-family: var(--font-display); font-size: 0.8rem; font-weight: 600; line-height: 1; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); background: rgba(10, 10, 15, 0.85); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 0.3rem 0.6rem; border-radius: 999px; pointer-events: none; } /* Tablet + mobile: the Private badge (top-left) and year pill (top-right) collide on narrow cards (the featured strip's 3-up cards, and 4-up col-md-3 / 2-up col-6 grid cards). On any card carrying both, drop the year pill to the bottom-right so the two never share the top row. Applied up to 991px because the 4-up grid cards are still narrow enough to collide at the 768px tablet width; desktop (>=992px) is unchanged. */ @media (max-width: 991px) { a:has(.grid-private-badge) .card-year { top: auto; bottom: 0.6rem; } } /* Phones: also tighten both badges a touch, where cards are the smallest. */ @media (max-width: 767px) { .grid-private-badge, .card-year { font-size: 0.72rem; padding: 0.26rem 0.52rem; } .grid-private-badge { gap: 0.28rem; } .grid-private-badge svg { width: 12px; height: 12px; } } /* Hover-reveal cards: a flat drawn mark at rest, the real screenshot fading in on hover. Public second-tier cards only — featured cards are password-gated and must never reveal a screenshot. The square mark sets the box; the screenshot is layered over it and cross-fades in. */ .thumb-reveal .thumb-mark { display: block; width: 100%; } .thumb-reveal .thumb-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; } .thumb-reveal:hover .thumb-shot { opacity: 1; } /* Override the generic `.thumb-overlay:hover img { opacity:1 !important }` so the mark actually fades out under the revealed screenshot. */ .thumb-reveal:hover .thumb-mark { opacity: 0 !important; } /* Collapsed "Archive" of earlier work: text links, no thumbnails, closed by default. Keeps the visible grid to the curated 6-8 without dropping the older projects entirely. */ .archive { margin: 2.5rem 0 0; border-top: 1px solid var(--color-border); padding-top: 1.25rem; } .archive > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--color-text-muted); transition: color var(--transition-fast); user-select: none; } .archive > summary::-webkit-details-marker { display: none; } /* Disclosure chevron drawn from a rotated square border (no icon dependency). */ .archive > summary::before { content: ""; width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--transition-fast); } .archive[open] > summary::before { transform: rotate(45deg); } .archive > summary:hover { color: var(--color-text); } .archive-count { color: var(--color-text-subtle); font-weight: 400; } .archive-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 1.5rem; } .archive-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); transition: color var(--transition-fast); } .archive-list a:hover { color: var(--color-accent); } .archive-title { font-size: 0.95rem; } .archive-year { font-size: 0.8rem; color: var(--color-text-subtle); font-variant-numeric: tabular-nums; flex-shrink: 0; } /* Grid dividers */ hr { border-top: 1px solid var(--color-border) !important; margin: 2rem 0; } /* --- Project Detail Pages --- */ /* Project title */ section .container > .row > .col-12 > h1.text-left { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding-bottom: 0.5rem; } /* Sidebar */ .bg-light { background: var(--color-surface) !important; border-radius: var(--radius) !important; border: 1px solid var(--color-border); padding: 1.5rem !important; } .bg-light .small, .bg-light li { color: var(--color-text-muted) !important; font-size: 0.875rem; line-height: 1.8; } .sidedesc { background: var(--color-surface) !important; border-radius: var(--radius); border: 1px solid var(--color-border); padding: 1.5rem; } /* Project content */ .projectdesc, p.projectdesc { color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.85; } h2.projectdesc { color: var(--color-heading); font-size: 1.8rem; margin-top: 2.5rem; margin-bottom: 0.75rem; } h3.projectdesc { color: var(--color-heading); font-size: 1.4rem; margin-top: 2.5rem; margin-bottom: 0.75rem; } /* Bulleted lists in project content */ ul.projectdesc-list { color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.85; margin: 0.5rem 0 1.5rem; padding-left: 1.4rem; list-style: none; } ul.projectdesc-list li { position: relative; padding-left: 0.5rem; margin-bottom: 0.5rem; } ul.projectdesc-list li::before { content: ''; position: absolute; left: -0.6rem; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); } /* Block quote: optional all-caps title, shaded background, left color strip */ .project-quote { margin: 2rem 0; padding: 1.25rem 1.5rem; background: var(--color-surface); border-left: 4px solid var(--color-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .project-quote-title { margin: 0 0 0.5rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); } .project-quote-body, .project-quote-body p { color: var(--color-text-muted); font-size: 1.1rem; line-height: 1.7; margin-bottom: 0; } .project-quote-body p + p { margin-top: 0.85rem; } /* Subhead: an all-caps metadata label that sits tight above a section title. Like .project-quote-title but a muted color (used for metadata, not quotes). */ .project-subhead { margin: 2.5rem 0 0; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-subtle); } /* "At a glance" label at the top of the case-study summary box — an understated section label, same treatment as .project-quote-title but muted so it names the box without competing with it. */ .case-summary-label { margin: 0 0 0.75rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } /* Case-study "At a glance" summary box — reusable class replacing the per-page inline style (identical box look), plus two refinements: the field labels (b) are muted + de-emphasized so the value reads as the brighter of the two, and text-wrap: pretty kills orphaned last words on the field lines. */ .case-summary { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin: 0 0 1.5rem; font-size: 0.95rem; line-height: 1.7; } .case-summary b { font-weight: 500; color: var(--color-text-muted); } .case-summary div { text-wrap: pretty; } /* Separate the field rows (Role / Timeframe / What changed / Result) so they read as distinct lines, not one run-on paragraph. Skips the label→first-field gap (the label keeps its own 0.75rem bottom margin above). */ .case-summary > div:not(.case-summary-label) + div { margin-top: 0.5rem; } /* Full-width variant: the box lifts out of the content column to span the full container above the row (Content adds `case-summary--wide` and moves the markup). Above lg the fields lay out as a 2-column grid so the extra width becomes structure + white space instead of over-long lines; the label spans both columns. Below lg it falls back to the stacked single-column box. */ .case-summary--wide { max-width: none; padding: 1.4rem 1.6rem; } @media (min-width: 992px) { .case-summary--wide { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; row-gap: 0.7rem; align-items: start; } .case-summary--wide > .case-summary-label { grid-column: 1 / -1; margin-bottom: 0.4rem; } /* Grid row-gap owns the rhythm here, so drop the stacked field top-margin. */ .case-summary--wide > div:not(.case-summary-label) + div { margin-top: 0; } } .project-subhead:first-child { margin-top: 0; } /* No gap between a subhead and the heading directly beneath it */ .project-subhead + h1, .project-subhead + h2, .project-subhead + h3 { margin-top: 0 !important; } /* Project layout: 32px gap between sidebar and content */ .bg-light + [class*="col-"] { padding-left: 32px; } /* --- Byline layout (preview) --------------------------------------------- Meta lifts up under the title as a byline + tag row; the side column slims to just a floating (background-less) TOC via `.case-rail`; the content column (`.case-content`) widens for a fuller reading experience. Content supplies the markup (byline element, class swaps, wider col classes); this is the presentation. */ .project-byline { color: var(--color-text-muted); font-size: 1.02rem; line-height: 1.5; margin: 0.35rem 0 0.55rem; text-align: left; } .project-tags--top { text-align: left; margin: 0 0 0.5rem; } /* Slim, floating TOC column: drop the boxed background, keep the sticky nav. Zero the rail's top padding (pt-2) and the TOC's default top margin so the "Jump to" label aligns with the top of the content / lead image. */ .case-rail { background: transparent !important; padding-top: 0 !important; } .case-rail .project-toc { margin-top: 0; } /* Gap between the slim rail and the widened content column. */ .case-rail + .case-content { padding-left: 40px; } /* Body copy fills the full (widened) content column, matching the figure width — Bill's explicit call. This runs ~90ch at the widest, past the ~72ch readability sweet spot, but the full-width read is the intent. */ /* Wider content column (xl only). The rail (col-xl-3) + content (col-xl-7) filled just 10 of 12 columns, leaving the content narrow with ~2 empty columns of dead space on the right. Widen the content so figures and media use that space; the running prose keeps a readable measure via max-width so text doesn't stretch too wide inside the wider column. */ @media (min-width: 1200px) { .bg-light.col-xl-3 + [class*="col-xl-7"] { flex: 0 0 70%; max-width: 70%; } .bg-light.col-xl-3 + [class*="col-xl-7"] > p.projectdesc, .bg-light.col-xl-3 + [class*="col-xl-7"] > ul.projectdesc-list, .bg-light.col-xl-3 + [class*="col-xl-7"] > blockquote.project-quote, .bg-light.col-xl-3 + [class*="col-xl-7"] > .case-summary { max-width: 42rem; } } /* Project sidebar table of contents (built by js/toc.js). Sticky so it stays pinned near the top of the viewport as the page scrolls. */ .project-toc { position: sticky; top: 5rem; margin-top: 1.75rem; } .project-toc-title { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-subtle); margin: 0 0 0.6rem; } .project-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--color-border); } .project-toc li { margin: 0; } .project-toc a { display: block; padding: 0.28rem 0 0.28rem 0.85rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.35; text-decoration: none; transition: color 0.15s, border-color 0.15s; } .project-toc a:hover { color: var(--color-heading); } .project-toc li.active > a { color: var(--color-accent); border-left-color: var(--color-accent); font-weight: 600; } /* Indent nested headings */ .project-toc-l2 a { padding-left: 1.7rem; } .project-toc-l3 a { padding-left: 2.55rem; font-size: 0.8rem; } /* On stacked (mobile) layout the sidebar sits above content — don't pin it. */ @media (max-width: 767px) { .project-toc { position: static; } } /* Remove top margin from first content element so it aligns with sidebar */ h2.projectdesc:first-child, h3.projectdesc:first-child, p.projectdesc:first-child { margin-top: 0; } /* Figures & Media */ figure, .figure { margin: 2rem 0 0; /* No overflow clip: the img/video round their own corners, so figures don't impose a different radius (which previously mismatched top vs bottom). */ } /* Lead image: the opening visual of a case study. Content drops a
as the first child of the content column; it spans the full (widened) column above the At-a-glance box and carries a lift so the page opens on a screenshot instead of a text box. */ .case-lead { margin: 0 0 1.75rem; max-width: none; } .case-lead img, .case-lead video { width: 100%; height: auto; display: block; box-shadow: var(--shadow-lg); } /* The ART page's lead is a video (poster + controls). Give it the same rounded hero treatment as the image leads and keep it from collapsing before the poster/metadata load. */ .case-lead video { border-radius: var(--radius); aspect-ratio: 16 / 9; background: #000; object-fit: cover; } /* Byline layout: tighten the gap between the lead image and the first heading below it (was lead mb 1.75rem + heading mt 2.5rem ≈ 68px) so the hero and the Overview read as connected, without cramping. */ .case-content > .case-lead { margin-bottom: 1.25rem; } .case-content > .case-lead + h2.projectdesc, .case-content > .case-lead + h3.projectdesc, .case-content > .case-lead + .project-subhead { margin-top: 0.25rem; } .figure-caption, figcaption.figure-caption { color: var(--color-text-subtle) !important; font-size: 0.85rem; padding: 0.75rem 0; line-height: 1.6; } video, .embed-responsive { border-radius: var(--radius); background: var(--color-surface); } /* ── Video play affordance (js/video-play.js) ───────────────────────────── A dark scrim + circular play icon + "Play now" label over each playable video (controls, not autoplay) until playback starts, then it fades out. */ .video-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; border-radius: var(--radius); } .video-wrap > video { display: block; max-width: 100%; } .video-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; margin: 0; padding: 0; border: 0; border-radius: inherit; background: rgba(8, 8, 14, 0.5); color: #fff; cursor: pointer; line-height: 1.2; transition: opacity 0.3s ease, background 0.25s ease; -webkit-appearance: none; appearance: none; } .video-overlay:hover, .video-overlay:focus-visible { background: rgba(8, 8, 14, 0.38); outline: none; } .video-overlay__icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.16); border: 2px solid rgba(255, 255, 255, 0.85); transition: transform 0.2s ease, background 0.2s ease; } .video-overlay:hover .video-overlay__icon, .video-overlay:focus-visible .video-overlay__icon { transform: scale(1.06); background: rgba(255, 255, 255, 0.28); } .video-overlay__icon svg { width: 30px; height: 30px; margin-left: 4px; /* optically center the play triangle */ fill: #fff; } .video-overlay__label { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); } .video-wrap.is-playing .video-overlay { opacity: 0; pointer-events: none; } @media (max-width: 575.98px) { .video-overlay__icon { width: 58px; height: 58px; } .video-overlay__icon svg { width: 24px; height: 24px; } .video-overlay__label { font-size: 0.85rem; } } img.img-fluid, img.img-responsive { /* !important to beat Bootstrap's .rounded (4px). */ border-radius: var(--radius) !important; } /* Project content images (inside figures) use the smaller image radius. More specific than img.img-fluid above, so it wins; gallery thumbnails (not in figures) keep the themed --radius. */ figure img.img-fluid, figure img.img-responsive { border-radius: var(--radius-image) !important; } /* Zoomable project images + lightbox / shadowbox */ figure img.zoomable { cursor: zoom-in; } body.lightbox-active { overflow: hidden; } .lightbox-overlay { position: fixed; inset: 0; z-index: 1100; display: none; align-items: center; justify-content: center; padding: 2.5rem; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); } .lightbox-overlay.open { display: flex; animation: lightboxFade 0.18s ease-out; } @keyframes lightboxFade { from { opacity: 0; } to { opacity: 1; } } .lightbox-figure { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; max-height: 100%; margin: 0; } .lightbox-img { /* As large as the viewport allows, never upscaled past native resolution */ max-width: 100%; max-height: 100%; min-height: 0; /* allow shrinking in the flex column so the caption fits */ width: auto; height: auto; object-fit: contain; border-radius: var(--radius-image); box-shadow: var(--shadow-lg); cursor: default; } .lightbox-caption { flex-shrink: 0; /* Match the image's width without widening the figure past it: width:0 keeps the caption out of the figure's max-content sizing, min-width:100% then fills the figure (which the image sized). */ width: 0; min-width: 100%; margin-top: 0.9rem; color: rgba(255, 255, 255, 0.8); font-size: 0.9rem; line-height: 1.5; text-align: left; } .lightbox-close { position: fixed; top: 1rem; right: 1.25rem; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); } .lightbox-close:hover { background: rgba(0, 0, 0, 0.8); transform: scale(1.05); } /* --- Footer --- */ footer, #footbg { background: var(--color-bg-alt) !important; border-top: 1px solid var(--color-border); padding: 2rem 0 !important; } /* Private gallery landing page: keep the footer at the bottom of the viewport even when the content is short. */ .private-page { min-height: 100vh; display: flex; flex-direction: column; } .private-page > footer { margin-top: auto; } footer p { color: var(--color-text-subtle) !important; font-size: 0.85rem; } /* --- Utility Overrides --- */ .bg-dark { background: transparent !important; } .mt-2 { margin-top: 1.5rem !important; } .container { max-width: var(--content-width, 1100px); } /* --- Scroll Reveal Animation --- */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-in { animation: fadeInUp 0.6s ease-out forwards; } /* Stagger delays for grid items */ .row > [class*="col-"]:nth-child(1) { animation-delay: 0s; } .row > [class*="col-"]:nth-child(2) { animation-delay: 0.1s; } .row > [class*="col-"]:nth-child(3) { animation-delay: 0.2s; } .row > [class*="col-"]:nth-child(4) { animation-delay: 0.3s; } /* --- Responsive --- */ @media (max-width: 768px) { .jumbotron { padding: 4rem 1.5rem 3rem !important; } .jumbotron h1 { font-size: 2rem; } h1 { font-size: 2.2rem; } .media { padding: 1.2rem; } .navbar { padding: 0.75rem 1rem !important; } section { padding: 0.5rem 0; } } @media (max-width: 480px) { .jumbotron h1 { font-size: 1.75rem; } .jumbotron p { font-size: 1rem; } .btn-primary { padding: 0.65rem 1.5rem !important; font-size: 0.9rem !important; } } /* --- Smooth Scrollbar --- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: var(--color-surface-hover); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-subtle); } /* --- Focus styles for accessibility --- */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* --- Prevent FOUC on icon image --- */ .jumbotron .align-items-center img { max-width: 280px; margin: 2rem auto 0; display: block; filter: brightness(0.9) contrast(1.1); opacity: 0.8; } /* ============================================================ RESUME PAGE ============================================================ */ .resume-section-title { font-family: var(--font-display) !important; font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-border); } .resume-entry { margin-bottom: 2rem; } .resume-company { font-family: var(--font-display) !important; font-size: 1.25rem; font-weight: 600; color: var(--color-heading); margin-bottom: 0; } .resume-role { font-size: 0.95rem; color: var(--color-text-muted); margin-bottom: 0.75rem; font-style: italic; } .resume-date { font-size: 0.85rem; color: var(--color-text-subtle); white-space: nowrap; } .resume-list { list-style: none; padding-left: 0; margin-top: 0.5rem; } .resume-list li { position: relative; padding-left: 1.25rem; margin-bottom: 0.5rem; font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.7; } .resume-list li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); opacity: 0.6; } .resume-skills { list-style: none; padding-left: 0; margin-bottom: 0; /* Flow the flat list into a 3-column table-like grid */ column-count: 3; column-gap: 2.5rem; } .resume-skills li { font-size: 0.9rem; color: var(--color-text-muted); padding: 0.35rem 0; border-bottom: 1px solid var(--color-border); transition: color var(--transition-fast); break-inside: avoid; } .resume-skills li:hover { color: var(--color-heading); } @media (max-width: 768px) { .resume-skills { column-count: 2; } } @media (max-width: 480px) { .resume-skills { column-count: 1; } } @media (max-width: 768px) { .resume-company { font-size: 1.1rem; } .resume-date { display: block; margin-bottom: 0.5rem; } } /* ============================================================ THEME TOGGLE ============================================================ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: all var(--transition-fast); margin-left: 0.5rem; flex-shrink: 0; } .theme-toggle:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-subtle); transform: scale(1.08); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle svg { width: 18px; height: 18px; transition: transform var(--transition-spring), opacity var(--transition-fast); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Light mode: override navbar toggler for visibility */ [data-theme="light"] .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } [data-theme="light"] .navbar-dark .navbar-toggler { border-color: rgba(0, 0, 0, 0.1); } /* Light mode: selection color */ [data-theme="light"] ::selection { background: rgba(99, 102, 241, 0.2); color: #111827; } /* Light mode: scrollbar */ [data-theme="light"] ::-webkit-scrollbar-track { background: var(--color-bg); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #d1d5db; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #9ca3af; } /* Smooth dissolve on theme change — applied via class to avoid interfering with page load */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease, fill 300ms ease, stroke 300ms ease, opacity 300ms ease !important; }