/* ── original.css ──────────────────────────────────────────────────────────── Dark theme — activates when carries the class "original-theme". Every rule here is scoped to that class so it never interferes with the Stardew theme (the default). ──────────────────────────────────────────────────────────────────────────── */ /* 1. CSS custom-property overrides — section backgrounds and cards pick these up automatically since they already reference the vars. */ body.original-theme { --sdv-bg: #000000; --sdv-bg-alt: #000000; --sdv-bg-light: #000000; --sdv-input-bg: #363636; --sdv-highlight: #2dd4bf; color: white; background-color: black; } /* 2. Kill the parallax background on */ html:has(body.original-theme) { background-image: none !important; background-color: black !important; } /* 3. Font — switch text elements to Mona Sans. The wildcard rule has specificity (0,1,1). Boxicons sets .bx { font-family:'boxicons' !important } at (0,1,0) — lower specificity — so it would lose. The explicit .bx restoration below has (0,2,1) and wins, keeping every icon font intact. */ body.original-theme, body.original-theme * { font-family: 'Mona Sans', sans-serif !important; } /* Restore icon fonts — must be scoped MORE specifically than the * rule above */ body.original-theme .bx, body.original-theme [class^="bx-"], body.original-theme [class*=" bx-"] { font-family: 'boxicons' !important; } body.original-theme .brittanysignature { font-family: 'Brittany Signature' !important; color: white !important; } /* 4. Base text / links */ body.original-theme p { color: white; } body.original-theme a { color: white; } body.original-theme a:hover { color: #2dd4bf; } /* ── Navbar ─────────────────────────────────────────────────────────────── */ body.original-theme .navbar { background-color: #000b14 !important; max-height: 50px; } body.original-theme .sticky-nav { background-color: #000b14 !important; } body.original-theme .navbar-menu { background-color: #000b14 !important; } body.original-theme .logo { color: white !important; font-family: 'Mona Sans', sans-serif !important; } body.original-theme .navbar-burger { color: white !important; } body.original-theme .navbar-item { color: white !important; font-family: 'Mona Sans', sans-serif !important; } body.original-theme .navbar-item::after { background: white !important; } body.original-theme .navbar-item:hover::after { width: 100%; } body.original-theme .navbar-item:hover { background-color: #000b14 !important; color: white !important; } /* Theme toggle button — plain, matches other nav links */ body.original-theme #theme-toggle { background: none !important; background-color: transparent !important; color: white !important; border: none !important; border-image: none !important; font-family: 'Mona Sans', sans-serif !important; font-size: inherit !important; padding: 0; } /* ── Footer ─────────────────────────────────────────────────────────────── */ body.original-theme .footer { background-color: #000000f2 !important; } body.original-theme .footer p, body.original-theme .footer a { color: white !important; } body.original-theme .footer a:hover { color: #2dd4bf !important; } body.original-theme .footer .bx { color: white !important; } /* ── Hero (.main) ───────────────────────────────────────────────────────── */ body.original-theme .main { background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,1)), url('../uploads/background.jpg') !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-attachment: fixed !important; } /* Fixed attachment causes jank on iOS/Android — fall back to scroll on mobile */ @media (max-width: 768px) { body.original-theme .main { background-attachment: scroll !important; } } body.original-theme .main-title { color: white !important; } body.original-theme .main-title-name { background: linear-gradient(to right, #3b82f6, #2dd4bf) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; color: unset !important; } body.original-theme .main-subtitle { color: #a5a5a5 !important; } body.original-theme .bx { color: white !important; } /* ── Section title gradient treatment (replaces Stardew solid colour) ───── */ body.original-theme .intro-title, body.original-theme .toolkit-title, body.original-theme .awards-title, body.original-theme .mbti-title, body.original-theme .projects-title, body.original-theme .te-section-title, body.original-theme .education-title, body.original-theme .coursework-section-title { background: linear-gradient(to right, #3b82f6, #2dd4bf) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ── Intro ───────────────────────────────────────────────────────────────── */ body.original-theme .intro-text { color: #a5a5a5 !important; } /* ── Toolkit ─────────────────────────────────────────────────────────────── */ body.original-theme .toolkit-subtitle { color: white !important; } body.original-theme .toolkit-icons { color: white !important; } body.original-theme img.toolkit-icons { filter: none !important; } body.original-theme .toolkit-buttons { background-color: transparent !important; border: 0 !important; border-image: none !important; box-shadow: none !important; } /* ── Awards ──────────────────────────────────────────────────────────────── */ body.original-theme .award-card { background-color: #111111 !important; border: none !important; border-image: none !important; border-style: unset !important; } body.original-theme .award-title { color: white !important; } body.original-theme .award-issue { color: #a5a5a5 !important; } /* ── MBTI ────────────────────────────────────────────────────────────────── */ body.original-theme .mbti-subtitle { color: white !important; } body.original-theme .mbti-card { background-color: #111111 !important; border: none !important; border-image: none !important; border-style: unset !important; } body.original-theme .mbti .progress::-webkit-progress-value { background: linear-gradient(to right, #3b82f6, #2dd4bf) !important; } body.original-theme .mbti .progress::-moz-progress-bar { background: linear-gradient(to right, #3b82f6, #2dd4bf) !important; } body.original-theme .mbti .progress { background-color: #222 !important; } /* ── Projects ────────────────────────────────────────────────────────────── */ body.original-theme .project-card { background-color: #141414 !important; border: none !important; border-image: none !important; border-style: unset !important; } body.original-theme .project-title { color: white !important; } body.original-theme .project-desc { color: white !important; } /* ── Technical Experience ────────────────────────────────────────────────── */ body.original-theme .te-card { background-color: #141414 !important; border: none !important; border-image: none !important; border-style: unset !important; } body.original-theme .te-title { color: white !important; } body.original-theme .te-company { color: white !important; } body.original-theme .te-desc { color: white !important; } body.original-theme .te-desc li { color: white !important; } /* ── Education ───────────────────────────────────────────────────────────── */ body.original-theme .education-icons { color: white !important; } /* ── Coursework ──────────────────────────────────────────────────────────── */ body.original-theme .coursework-card { background-color: #141414 !important; border: none !important; border-image: none !important; border-style: unset !important; } body.original-theme .coursework-title { color: white !important; } body.original-theme .timeline-marker.is-warning { background-color: #2dd4bf !important; border-color: #3b82f6 !important; } /* ── Admin / forms ───────────────────────────────────────────────────────── */ body.original-theme .admin { background-color: black !important; } body.original-theme .card { background-color: #141414 !important; border: none !important; border-image: none !important; border-style: unset !important; } body.original-theme .card-footer { border-top: 1px solid #363636; background-color: #141414; } body.original-theme .white { color: white !important; } body.original-theme .title { color: white !important; } body.original-theme .subtitle { color: #a5a5a5 !important; } body.original-theme .label { color: white !important; } /* ── Form inputs ─────────────────────────────────────────────────────────── */ body.original-theme .input, body.original-theme .textarea { background-color: #363636 !important; color: white !important; border-color: #555 !important; border-image: none !important; } body.original-theme .input::placeholder { color: #a8a8a8 !important; } body.original-theme input[type="text"], body.original-theme input[type="password"] { background-color: #363636 !important; color: white !important; border-image: none !important; border-width: 1px !important; border-style: solid !important; border-color: #555 !important; } body.original-theme input[type="text"]:focus, body.original-theme input[type="password"]:focus { outline: none; border-color: #3b82f6 !important; } /* input[type="submit"] — undo stardew's pixel-art image replacement */ body.original-theme input[type="submit"] { background-image: none !important; font-size: 1rem !important; line-height: 1.5 !important; width: auto !important; height: auto !important; padding: 0.4em 0.8em !important; background-color: #363636 !important; color: white !important; border: 1px solid transparent !important; border-image: none !important; cursor: pointer !important; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ body.original-theme button, body.original-theme .button { border-image: none !important; border-width: 1px !important; font-size: 1rem !important; } body.original-theme .button.is-dark { background-color: #363636 !important; color: white !important; border-color: transparent !important; } body.original-theme .button.is-link { background-color: #485fc7 !important; color: white !important; border-color: transparent !important; } body.original-theme .button.is-light { background-color: #f5f5f5 !important; color: #363636 !important; border-color: transparent !important; } body.original-theme .button.is-danger, body.original-theme .button.is-danger.is-light { background-color: #f14668 !important; color: white !important; border-color: transparent !important; } /* ── Bulma tags ──────────────────────────────────────────────────────────── */ body.original-theme .tag.is-dark { background-color: #363636 !important; color: white !important; } /* ── Select / checkbox ───────────────────────────────────────────────────── */ body.original-theme select { background-color: #363636; outline: 1px solid #555; } body.original-theme option { background-color: #363636; } body.original-theme input[type="checkbox"] { appearance: checkbox; } body.original-theme input[type="checkbox"]:before { display: none; } body.original-theme input[type="checkbox"]:checked:before { display: none; } /* ── Inline styles that embed var(--sdv-dark) as text ────────────────────── */ body.original-theme [style*="var(--sdv-dark)"] { color: white !important; } /* ── Resume page ─────────────────────────────────────────────────────────── */ body.original-theme .resume-page { background-color: black !important; } body.original-theme .resume-header { background-color: #000b14 !important; } body.original-theme .resume-name { color: white !important; } body.original-theme .resume-contact a { color: #a5a5a5 !important; } body.original-theme .resume-contact a:hover { color: #2dd4bf !important; } body.original-theme .resume-section-title { background: linear-gradient(to right, #3b82f6, #2dd4bf) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; border-bottom-color: #3b82f6 !important; } body.original-theme .resume-card { background-color: #141414 !important; border: none !important; border-image: none !important; border-style: unset !important; } body.original-theme .resume-role { color: white !important; } body.original-theme .resume-org { color: #2dd4bf !important; } body.original-theme .resume-meta { color: #a5a5a5 !important; opacity: 1 !important; } body.original-theme .resume-card li, body.original-theme .resume-card p { color: white !important; } body.original-theme .skill-group-label { color: white !important; } body.original-theme .skill-tag { background-color: #363636 !important; color: white !important; } body.original-theme .download-btn { background-color: #3b82f6 !important; color: white !important; border-color: #3b82f6 !important; } body.original-theme .download-btn:hover { background-color: #2dd4bf !important; border-color: #2dd4bf !important; }