/* ═══════════════════════════════════════════════════════════════════════════ theme.css – Mechanical Engineering Portfolio – Global Design System ═══════════════════════════════════════════════════════════════════════════ Load order: AFTER style.css This file extends and overrides style.css without touching it directly. Contents ──────── 1. CSS custom properties (design tokens) 2. Google Fonts – JetBrains Mono (monospace accent) 3. Dot-grid background texture (all inner pages) 4. Dark mode consistency pass (about / projects / contact / resume) 5. Navigation refinements 6. Monospace labels / tags / keywords 7. Spec-sheet layout (About page) 8. Project card hover accent (Projects page) 9. Contact page refinements 10. Scroll-entrance animation initial states (GSAP sets these) 11. Reduced-motion safety net ═══════════════════════════════════════════════════════════════════════════ */ /* ─── 1. Design tokens ────────────────────────────────────────────────────── */ :root { /* Brand colours */ --clr-indigo: #4338ca; --clr-indigo-light: #6366f1; --clr-indigo-dark: #1a1a2e; --clr-indigo-mid: #2a2a3e; --clr-indigo-border: #3a3a4e; /* Neutral */ --clr-white: #ffffff; --clr-grey-100: #f8fafc; --clr-grey-200: #e2e8f0; --clr-grey-400: #94a3b8; --clr-grey-600: #4b5563; --clr-grey-cool: #CBCBCB; --clr-text-dark: #1e1e2e; /* Dot grid (light mode) */ --dot-color-light: rgba(67, 56, 202, 0.12); /* faint indigo dots */ --dot-size: 1.5px; --dot-spacing: 22px; /* Dot grid (dark mode) */ --dot-color-dark: rgba(203, 203, 203, 0.07); /* Spec-sheet */ --spec-rule: 1px solid rgba(67, 56, 202, 0.18); --spec-rule-dark: 1px solid rgba(203, 203, 203, 0.12); --spec-label-size: 0.68rem; /* Transitions */ --transition-base: 360ms ease; --transition-fast: 180ms ease; /* Isometric grid card */ --iso-line-light: rgba(67, 56, 202, 0.06); --iso-line-dark: rgba(203, 203, 203, 0.05); } /* ─── 2. JetBrains Mono (monospace accent font) ───────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap'); .mono { font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; } /* ─── 3. Dot-grid background texture ─────────────────────────────────────── */ /* Applied to the on all inner pages (about, projects, contact, resume). The landing page uses the ripple canvas instead. Technique: radial-gradient dot repeated at --dot-spacing intervals. */ body.about-page, body.projects-page, body.contact-page, body.resume-page { background-color: var(--clr-white); background-image: radial-gradient( circle, var(--dot-color-light) var(--dot-size), transparent var(--dot-size) ); background-size: var(--dot-spacing) var(--dot-spacing); background-attachment: fixed; } /* Dark mode dot grid */ body.dark-mode.about-page, body.dark-mode.projects-page, body.dark-mode.contact-page, body.dark-mode.resume-page { background-color: var(--clr-indigo-dark); background-image: radial-gradient( circle, var(--dot-color-dark) var(--dot-size), transparent var(--dot-size) ); background-size: var(--dot-spacing) var(--dot-spacing); background-attachment: fixed; } /* The .section white fill would cover the dot grid — make it transparent */ body.about-page .section, body.projects-page .section, body.contact-page .section, body.resume-page .section { background: transparent; } body.dark-mode.about-page .section, body.dark-mode.projects-page .section, body.dark-mode.contact-page .section, body.dark-mode.resume-page .section { background: transparent; } /* ─── 4. Dark mode consistency pass ──────────────────────────────────────── */ /* ── Navigation (all inner pages) ── */ body.dark-mode .nav { background: rgba(26, 26, 46, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--clr-indigo-border); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); } body.dark-mode .nav a { color: var(--clr-grey-cool); } body.dark-mode .nav a:hover { color: var(--clr-white); background-color: rgba(203, 203, 203, 0.08); } body.dark-mode .nav a.active { color: var(--clr-white); background-color: rgba(99, 102, 241, 0.18); border-radius: 6px; } /* ── Section headings ── */ body.dark-mode.about-page .about-section h2, body.dark-mode.projects-page .projects-section h2, body.dark-mode.contact-page .contact-section h2 { color: var(--clr-white); } body.dark-mode.about-page .about-section h3, body.dark-mode.projects-page .projects-section h3, body.dark-mode.contact-page .contact-section h3 { color: var(--clr-grey-cool); } /* ── Body text ── */ body.dark-mode.about-page .about-section p, body.dark-mode.projects-page .projects-section p, body.dark-mode.contact-page .contact-section p { color: var(--clr-grey-cool); } /* ── Contact form ── */ body.dark-mode.contact-page .form-group label { color: var(--clr-grey-cool); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; } body.dark-mode.contact-page .form-group input, body.dark-mode.contact-page .form-group textarea { background: var(--clr-indigo-mid); border-color: var(--clr-indigo-border); color: var(--clr-white); } body.dark-mode.contact-page .form-group input:focus, body.dark-mode.contact-page .form-group textarea:focus { border-color: var(--clr-indigo-light); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } body.dark-mode.contact-page .submit-btn { background: var(--clr-indigo); } body.dark-mode.contact-page .submit-btn:hover { background: var(--clr-indigo-light); } /* ── Social icons ── */ body.dark-mode.contact-page .social-icon { background: var(--clr-indigo-mid); color: var(--clr-grey-cool); border: 1.5px solid var(--clr-indigo-border); } body.dark-mode.contact-page .social-icon:hover { background: var(--clr-indigo); color: var(--clr-white); border-color: var(--clr-indigo-light); } /* ── Project cards ── */ body.dark-mode.projects-page .project-box { background: var(--clr-indigo-mid); border: 1.5px solid var(--clr-indigo-border); } body.dark-mode.projects-page .project-box:hover { border-color: var(--clr-indigo-light); box-shadow: 0 12px 32px rgba(99, 102, 241, 0.2); } body.dark-mode.projects-page .project-title { color: var(--clr-white); } body.dark-mode.projects-page .keyword { background: rgba(99, 102, 241, 0.12); color: var(--clr-grey-cool); border: 1px solid rgba(99, 102, 241, 0.22); } body.dark-mode.projects-page .project-box:hover .keyword { background: var(--clr-indigo); color: var(--clr-white); border-color: var(--clr-indigo-light); } /* ── Modal ── */ body.dark-mode.projects-page .modal-content { background: var(--clr-indigo-mid); border: 1px solid var(--clr-indigo-border); } body.dark-mode.projects-page .modal-header { background: linear-gradient(135deg, #2e2e48 0%, var(--clr-indigo-mid) 100%); border-bottom: 1px solid var(--clr-indigo-border); } body.dark-mode.projects-page .modal-header h2 { color: var(--clr-white); } body.dark-mode.projects-page #modalContent { color: var(--clr-grey-cool); } body.dark-mode.projects-page #modalContent h3 { color: var(--clr-white); } /* ─── 5. Navigation refinements (all pages) ──────────────────────────────── */ /* Thin engineering-rule underline on active link */ .nav a.active { position: relative; } .nav a.active::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 60%; height: 2px; background: var(--clr-indigo); border-radius: 1px; } body.dark-mode .nav a.active::after { background: var(--clr-indigo-light); } /* Light-mode nav on inner pages — subtle frosted glass */ body.about-page .nav, body.projects-page .nav, body.contact-page .nav, body.resume-page .nav { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(67, 56, 202, 0.1); box-shadow: 0 2px 12px rgba(67, 56, 202, 0.06); } /* Light mode: nav tabs use brand indigo (overrides style.css for these pages) */ body.about-page:not(.dark-mode) .nav a, body.contact-page:not(.dark-mode) .nav a, body.projects-page:not(.dark-mode) .nav a { color: var(--clr-indigo); } body.about-page:not(.dark-mode) .nav li, body.contact-page:not(.dark-mode) .nav li, body.projects-page:not(.dark-mode) .nav li { color: var(--clr-indigo); } /* Theme-toggle moon on light UI — same token (pages that load theme.css) */ body:not(.dark-mode) .dark-mode-btn .moon-icon { color: var(--clr-indigo); fill: currentColor; stroke: none; } /* ─── 6. Monospace labels / tags / keywords ───────────────────────────────── */ /* Project keyword chips */ .keyword { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.02em; background: rgba(67, 56, 202, 0.07); color: var(--clr-indigo); border: 1px solid rgba(67, 56, 202, 0.18); padding: 0.3rem 0.7rem; border-radius: 3px; /* sharper corners — more technical */ transition: all var(--transition-fast); } .project-box:hover .keyword { background: var(--clr-indigo); color: var(--clr-white); border-color: var(--clr-indigo); } /* Form labels — monospace on all pages */ .form-group label { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--clr-grey-600); } /* Section sub-labels (spec-sheet) */ .spec-label { font-family: 'JetBrains Mono', monospace; font-size: var(--spec-label-size); letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-indigo); opacity: 0.7; } body.dark-mode .spec-label { color: var(--clr-grey-cool); opacity: 0.55; } /* ─── 7. Spec-sheet layout (About page) ───────────────────────────────────── */ /* The about.html markup is replaced with a spec-sheet structure. Sections are separated by thin ruled lines with monospace callout labels, resembling an engineering drawing title block / data sheet. */ .spec-sheet { max-width: 820px; margin: 0 auto; padding-top: 0; } /* Page header — large title with drawing-style corner bracket */ .spec-header { position: relative; padding: 2rem 0 2rem 0; margin-bottom: 0; } .spec-header::before { content: ''; position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-top: 2px solid var(--clr-indigo); border-left: 2px solid var(--clr-indigo); opacity: 0.5; } .spec-header::after { content: ''; position: absolute; bottom: 0; right: 0; width: 28px; height: 28px; border-bottom: 2px solid var(--clr-indigo); border-right: 2px solid var(--clr-indigo); opacity: 0.5; } body.dark-mode .spec-header::before, body.dark-mode .spec-header::after { border-color: var(--clr-indigo-light); opacity: 0.35; } .spec-header h2 { font-family: 'Geist', sans-serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 300; color: var(--clr-text-dark); margin: 0; line-height: 1.2; letter-spacing: -0.01em; } body.dark-mode .spec-header h2 { color: var(--clr-white); } .spec-header .spec-label { display: block; margin-bottom: 0.6rem; } /* Individual spec rows */ .spec-row { display: grid; grid-template-columns: 160px 1fr; gap: 0 2rem; border-top: var(--spec-rule); padding: 1.6rem 0; align-items: start; } body.dark-mode .spec-row { border-top: var(--spec-rule-dark); } @media (max-width: 600px) { .spec-row { grid-template-columns: 1fr; gap: 0.4rem 0; } } .spec-row-label { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-indigo); padding-top: 0.2rem; line-height: 1.6; } body.dark-mode .spec-row-label { color: var(--clr-indigo-light); opacity: 0.85; } .spec-row-content { font-family: 'Geist', sans-serif; font-size: 1rem; line-height: 1.7; color: var(--clr-text-dark); } body.dark-mode .spec-row-content { color: var(--clr-grey-cool); } .spec-row-content p { margin: 0 0 0.5rem 0; font-size: 1rem; color: inherit; text-align: left; } .spec-row-content p:last-child { margin-bottom: 0; } /* Inline skill tags within spec rows */ .spec-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } .spec-tag { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.04em; padding: 0.25rem 0.6rem; border-radius: 2px; background: rgba(67, 56, 202, 0.07); color: var(--clr-indigo); border: 1px solid rgba(67, 56, 202, 0.2); } body.dark-mode .spec-tag { background: rgba(99, 102, 241, 0.1); color: var(--clr-grey-cool); border-color: rgba(99, 102, 241, 0.25); } /* Footer rule */ .spec-footer { border-top: var(--spec-rule); padding-top: 1rem; display: flex; justify-content: flex-end; } body.dark-mode .spec-footer { border-top: var(--spec-rule-dark); } .spec-footer .spec-label { font-size: 0.65rem; } /* ─── 8. Project card hover accent ────────────────────────────────────────── */ .project-box { position: relative; overflow: hidden; } .project-box > * { position: relative; z-index: 1; } /* Thin left-edge accent bar — engineering spec callout style */ .project-box::after { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: var(--clr-indigo); transition: height 0.35s ease; border-radius: 0 0 2px 2px; z-index: 2; } body.dark-mode .project-box::after { background: var(--clr-indigo-light); } .project-box:hover::after { height: 100%; } /* ─── 9. Contact page refinements ─────────────────────────────────────────── */ /* Light mode form labels — monospace */ .contact-page .form-group label { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--clr-grey-600); } /* Input focus ring — indigo */ .contact-page .form-group input:focus, .contact-page .form-group textarea:focus { border-color: var(--clr-indigo); box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.1); } /* Social section label */ .social-links h3 { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--clr-grey-600); font-weight: 400; } body.dark-mode .social-links h3 { color: var(--clr-grey-cool); opacity: 0.7; } /* ─── 10. Scroll-entrance animation initial states ────────────────────────── */ /* GSAP ScrollTrigger will animate these from their initial state to visible. Setting initial states in CSS avoids a flash of unstyled content. The .gsap-reveal class is added via JS to elements that should animate in. */ .gsap-reveal { opacity: 0; transform: translateY(28px); /* Will-change hint for GPU compositing */ will-change: opacity, transform; } /* Stagger children variant */ .gsap-reveal-stagger > * { opacity: 0; transform: translateY(20px); will-change: opacity, transform; } /* ─── 11. Reduced-motion safety net ──────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .gsap-reveal, .gsap-reveal-stagger > *, .project-box::after { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; height: auto !important; } }