/* ========================================================================= Jake Bloor — Portfolio theme Custom design layer on top of MudBlazor. Theme is driven by the `.jb-dark` class on (set pre-paint + on toggle) so colours never flash. ========================================================================= */ /* Palette: Adobe "My Color Theme" — 004170, 49ACF2, 008CF0, 224F70, 006EBD */ :root { --jb-bg: #f4f8fc; --jb-bg-alt: #e7f1fb; --jb-surface: #ffffff; --jb-surface-2: #ffffff; --jb-text: #0a2540; --jb-muted: #496781; --jb-border: rgba(0, 65, 112, 0.12); --jb-primary: #006EBD; --jb-primary-soft: rgba(0, 110, 189, 0.12); --jb-secondary: #008CF0; --jb-accent: #49ACF2; --jb-glass: rgba(255, 255, 255, 0.72); --jb-shadow: 0 14px 34px -16px rgba(0, 65, 112, 0.28); --jb-shadow-lg: 0 26px 60px -22px rgba(0, 65, 112, 0.36); --jb-radius: 16px; color-scheme: light; } html.jb-dark { --jb-bg: #071624; --jb-bg-alt: #0c2033; --jb-surface: #0f2740; --jb-surface-2: #143253; --jb-text: #e6f0fa; --jb-muted: #9fb6cc; --jb-border: rgba(255, 255, 255, 0.09); --jb-primary: #49ACF2; --jb-primary-soft: rgba(73, 172, 242, 0.16); --jb-secondary: #008CF0; --jb-accent: #6fbff5; --jb-glass: rgba(7, 22, 38, 0.72); --jb-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.6); --jb-shadow-lg: 0 30px 70px -24px rgba(0, 0, 0, 0.72); color-scheme: dark; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } body { font-family: 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif; background-color: var(--jb-bg); color: var(--jb-text); transition: background-color 0.4s ease, color 0.3s ease; overflow-x: hidden; } main { display: block; } .jb-muted { color: var(--jb-muted) !important; } ::selection { background: var(--jb-primary); color: #fff; } /* ---- WASM boot / loading screen ---------------------------------------- */ .jb-boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: var(--jb-bg); z-index: 5000; } .jb-boot-mark { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 16px; color: #fff; font-weight: 800; font-family: 'Sora', sans-serif; font-size: 1.5rem; letter-spacing: -1px; background: linear-gradient(135deg, #006EBD, #49ACF2); box-shadow: 0 12px 30px -10px #006EBD; } .jb-boot-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--jb-border); border-top-color: var(--jb-primary); animation: jbSpin 0.8s linear infinite; } #blazor-error-ui .reload { color: var(--jb-primary); } /* ---- Section scaffolding ------------------------------------------------ */ .jb-section { padding: clamp(4rem, 8vw, 7rem) 0; position: relative; } .jb-section--alt { background: var(--jb-bg-alt); } .jb-section-head { max-width: 720px; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); text-align: center; } .jb-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jb-primary); margin-bottom: 0.6rem; } .jb-section-title { position: relative; } .jb-section-title::after { content: ""; display: block; width: 56px; height: 4px; margin: 0.9rem auto 0; border-radius: 4px; background: linear-gradient(90deg, var(--jb-primary), var(--jb-accent)); } .jb-section-subtitle { color: var(--jb-muted); margin-top: 1rem; } .jb-lead { font-size: 1.12rem; line-height: 1.7; } /* ---- Reveal-on-scroll --------------------------------------------------- */ .jb-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .jb-reveal.jb-revealed { opacity: 1; transform: none; } /* Hero intro animation */ @keyframes jbFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .jb-fade-in { opacity: 0; animation: jbFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .jb-delay-1 { animation-delay: 0.1s; } .jb-delay-2 { animation-delay: 0.22s; } .jb-delay-3 { animation-delay: 0.34s; } .jb-delay-4 { animation-delay: 0.46s; } .jb-delay-5 { animation-delay: 0.58s; } /* ---- Cards -------------------------------------------------------------- */ .jb-card { background: var(--jb-surface) !important; border: 1px solid var(--jb-border); border-radius: var(--jb-radius) !important; padding: 1.6rem; box-shadow: var(--jb-shadow); transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .jb-card:hover { transform: translateY(-6px); box-shadow: var(--jb-shadow-lg); border-color: color-mix(in srgb, var(--jb-primary) 40%, var(--jb-border)); } .h-100 { height: 100%; } .jb-icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; background: var(--jb-primary-soft); color: var(--jb-primary); } .jb-icon-badge--lg { width: 54px; height: 54px; flex-basis: 54px; } /* ---- Nav / AppBar ------------------------------------------------------- */ .jb-appbar { backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); background: var(--jb-glass) !important; border-bottom: 1px solid var(--jb-border); } .jb-brand { text-transform: none !important; font-weight: 800 !important; padding-left: 6px !important; } .jb-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; font-weight: 800; font-family: 'Sora', sans-serif; color: #fff; background: linear-gradient(135deg, var(--jb-primary), var(--jb-accent)); box-shadow: 0 6px 16px -6px var(--jb-primary); } .jb-brand-text { margin-left: 10px; font-family: 'Sora', sans-serif; color: var(--jb-text); } .jb-nav-link { text-transform: none !important; font-weight: 600 !important; color: var(--jb-text) !important; opacity: 0.82; border-radius: 10px !important; } .jb-nav-link:hover { opacity: 1; background: var(--jb-primary-soft) !important; color: var(--jb-primary) !important; } .jb-resume-btn { text-transform: none !important; border-radius: 12px !important; } /* ---- Scroll progress + back to top + skip link -------------------------- */ .jb-progress-track { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 2000; background: transparent; } .jb-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--jb-primary), var(--jb-accent)); transition: width 0.08s linear; } .jb-backtotop { position: fixed !important; right: 24px; bottom: 24px; z-index: 1500; opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.9); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } .jb-backtotop.jb-visible { opacity: 1; visibility: visible; transform: none; } .jb-skip-link { position: absolute; left: -999px; top: 8px; z-index: 3000; background: var(--jb-primary); color: #fff; padding: 10px 16px; border-radius: 10px; text-decoration: none; } .jb-skip-link:focus { left: 12px; } /* ---- Hero --------------------------------------------------------------- */ .jb-hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding-top: 84px; } .jb-hero-inner { position: relative; z-index: 2; width: 100%; } .jb-hero-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; } .jb-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; animation: jbFloat 16s ease-in-out infinite; } .jb-orb--1 { width: 460px; height: 460px; background: var(--jb-primary); top: -120px; left: -80px; } .jb-orb--2 { width: 380px; height: 380px; background: var(--jb-secondary); bottom: -120px; right: -60px; animation-delay: -5s; } .jb-orb--3 { width: 300px; height: 300px; background: #004170; top: 40%; right: 25%; opacity: 0.32; animation-delay: -9s; } @keyframes jbFloat { 0%,100% { transform: translate(0,0); } 33% { transform: translate(30px,-30px); } 66% { transform: translate(-20px,20px); } } .jb-grid-overlay { position: absolute; inset: 0; background-image: linear-gradient(var(--jb-border) 1px, transparent 1px), linear-gradient(90deg, var(--jb-border) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 40%, transparent 78%); opacity: 0.5; } .jb-hero-photo { position: absolute; inset: 0; background: url('images/dev-desk.jpg') center/cover no-repeat; opacity: 0.12; -webkit-mask-image: radial-gradient(ellipse 70% 85% at 82% 42%, #000 6%, transparent 68%); mask-image: radial-gradient(ellipse 70% 85% at 82% 42%, #000 6%, transparent 68%); } html.jb-dark .jb-hero-photo { opacity: 0.20; } .jb-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; background: var(--jb-surface); border: 1px solid var(--jb-border); box-shadow: var(--jb-shadow); margin-bottom: 1.4rem; } .jb-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,0.6); animation: jbPulse 2s infinite; } @keyframes jbPulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.5); } 70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } } .jb-hero-name { font-size: clamp(2.4rem, 6vw, 4rem) !important; line-height: 1.05 !important; margin-bottom: 0.6rem; } .jb-gradient-text { background: linear-gradient(120deg, var(--jb-primary), var(--jb-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .jb-hero-role { font-family: 'Sora', sans-serif; font-size: clamp(1.3rem, 3.5vw, 2rem); font-weight: 700; display: flex; align-items: center; min-height: 2.4em; } .jb-role-prefix { color: var(--jb-muted); } .jb-typed { color: var(--jb-primary); } .jb-caret { display: inline-block; width: 3px; height: 1.1em; margin-left: 4px; background: var(--jb-secondary); animation: jbBlink 1s step-end infinite; } @keyframes jbBlink { 50% { opacity: 0; } } .jb-hero-tagline { max-width: 52ch; color: var(--jb-muted); font-size: 1.1rem; margin: 1.2rem 0 2rem; } .jb-hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; } .jb-hero-actions .mud-button-root { text-transform: none !important; border-radius: 12px !important; padding: 10px 22px !important; } .jb-hero-social { display: flex; align-items: center; gap: 6px; margin-top: 1.6rem; flex-wrap: wrap; } .jb-hero-location { display: inline-flex; align-items: center; gap: 4px; color: var(--jb-muted); font-size: 0.9rem; margin-left: 8px; } /* Hero avatar */ .jb-hero-visual { display: flex; justify-content: center; } .jb-avatar-wrap { position: relative; width: min(320px, 74vw); aspect-ratio: 1; } .jb-avatar { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 5px solid var(--jb-surface); box-shadow: var(--jb-shadow-lg); } .jb-avatar-ring { position: absolute; inset: -14px; border-radius: 50%; background: conic-gradient(from 0deg, var(--jb-primary), var(--jb-accent), #004170, var(--jb-primary)); animation: jbSpin 9s linear infinite; filter: blur(2px); opacity: 0.85; } @keyframes jbSpin { to { transform: rotate(360deg); } } .jb-float-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 12px; font-weight: 700; font-size: 0.85rem; background: var(--jb-surface); border: 1px solid var(--jb-border); box-shadow: var(--jb-shadow); animation: jbBob 5s ease-in-out infinite; } .jb-float-chip--1 { top: 8%; left: -6%; color: #006EBD; } .jb-float-chip--2 { bottom: 14%; left: -4%; color: var(--jb-primary); animation-delay: -1.5s; } .jb-float-chip--3 { top: 24%; right: -6%; color: var(--jb-secondary); animation-delay: -3s; } @keyframes jbBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .jb-scroll-cue { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: none; border: none; color: var(--jb-muted); cursor: pointer; animation: jbBob 2.4s ease-in-out infinite; } /* ---- About -------------------------------------------------------------- */ .jb-about-photo { position: relative; border-radius: var(--jb-radius); overflow: hidden; box-shadow: var(--jb-shadow-lg); border: 1px solid var(--jb-border); } .jb-about-photo img { display: block; width: 100%; height: 100%; max-height: 440px; object-fit: cover; } .jb-about-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0, 65, 112, 0.55)); pointer-events: none; } .jb-about-photo-badge { position: absolute; z-index: 2; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; color: #fff; background: rgba(0, 65, 112, 0.5); backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.18); } /* ---- Stats -------------------------------------------------------------- */ .jb-stat-card, .jb-gh-stat { text-align: center; padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 4px; } .jb-stat-icon { color: var(--jb-primary); font-size: 2rem !important; margin-bottom: 6px; } .jb-stat-value { font-family: 'Sora', sans-serif; font-weight: 800; background: linear-gradient(120deg, var(--jb-primary), var(--jb-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Skill bars --------------------------------------------------------- */ .jb-skill-card .jb-skillbar { margin-bottom: 1rem; } .jb-skillbar-head { display: flex; justify-content: space-between; font-size: 0.9rem; font-weight: 600; margin-bottom: 6px; } .jb-skillbar-track { height: 9px; border-radius: 999px; background: var(--jb-bg-alt); overflow: hidden; border: 1px solid var(--jb-border); } .jb-skillbar-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--jb-primary), var(--jb-accent)); transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .jb-revealed .jb-skillbar-fill { width: var(--pct); } /* ---- Tech stack --------------------------------------------------------- */ .jb-techstack { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; max-width: 900px; margin: 0 auto; } .jb-tech-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 0.92rem; background: var(--jb-surface); border: 1px solid var(--jb-border); box-shadow: var(--jb-shadow); transition: transform 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .jb-tech-pill:hover { transform: translateY(-3px); color: var(--jb-primary); border-color: var(--jb-primary); } .jb-tech-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--jb-primary), var(--jb-accent)); } /* ---- Experience timeline ------------------------------------------------ */ .jb-exp-card { text-align: left; } .jb-exp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .jb-exp-role { font-weight: 700; } .jb-exp-company { color: var(--jb-primary); font-weight: 600; } .jb-exp-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.85rem; margin: 8px 0 12px; } .jb-exp-meta span { display: inline-flex; align-items: center; gap: 4px; } .jb-exp-list { margin: 0; padding-left: 1.1rem; } .jb-exp-list li { margin-bottom: 6px; font-size: 0.92rem; line-height: 1.55; } .jb-chip-current { height: 24px !important; } /* ---- Projects ----------------------------------------------------------- */ .jb-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 2.4rem; } .jb-project-card { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; } .jb-project-banner { position: relative; height: 116px; display: flex; align-items: center; justify-content: center; } .jb-project-initial { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2.6rem; color: rgba(255,255,255,0.92); text-shadow: 0 2px 12px rgba(0,0,0,0.25); } .jb-featured-badge, .jb-fork-badge { position: absolute; top: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: rgba(0,0,0,0.35); color: #fff; backdrop-filter: blur(4px); } .jb-featured-badge { right: 10px; } .jb-fork-badge { left: 10px; } .jb-project-body { padding: 1.3rem 1.4rem 1.4rem; display: flex; flex-direction: column; flex: 1; } .jb-project-title { font-weight: 700; } .jb-project-desc { margin-top: 6px; flex: 1; } .jb-star-count { display: inline-flex; align-items: center; gap: 2px; font-size: 0.85rem; } .jb-tech-chip { cursor: pointer; } .jb-project-actions { display: flex; gap: 6px; border-top: 1px solid var(--jb-border); padding-top: 10px; margin-top: auto; } /* ---- GitHub stats ------------------------------------------------------- */ .jb-contrib-card { text-align: center; } .jb-contrib-graph { overflow-x: auto; } .jb-contrib-graph img { max-width: 100%; height: auto; } /* ---- Education / Certifications ---------------------------------------- */ .jb-edu-card, .jb-cert-card { display: flex; align-items: flex-start; gap: 1rem; } .jb-edu-institution { color: var(--jb-primary); font-weight: 600; } .jb-edu-qual { font-weight: 700; margin-top: 2px; } .jb-cert-name { font-weight: 600; } .jb-volunteer-card { display: flex; align-items: center; gap: 1rem; } .jb-volunteer-icon { color: var(--jb-secondary); font-size: 2rem !important; flex: 0 0 auto; } /* ---- Contact ------------------------------------------------------------ */ .jb-contact-row { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0; text-decoration: none; color: var(--jb-text); border-bottom: 1px solid var(--jb-border); transition: transform 0.25s ease; } .jb-contact-row:hover:not(.jb-contact-row--static) { transform: translateX(6px); } .jb-contact-row--static { cursor: default; } .jb-contact-form { padding: 1.8rem !important; } /* ---- Footer ------------------------------------------------------------- */ .jb-footer { background: var(--jb-bg-alt); border-top: 1px solid var(--jb-border); } .jb-brand-mark--footer { width: 30px; height: 30px; font-size: 0.85rem; } .jb-footer-links { gap: 6px; } .jb-footer-link { color: var(--jb-muted) !important; cursor: pointer; font-size: 0.92rem; } .jb-footer-link:hover { color: var(--jb-primary) !important; } .jb-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .jb-build-meta { display: flex; flex-wrap: wrap; gap: 8px; } .jb-build-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; font-family: 'JetBrains Mono', monospace; color: var(--jb-muted); background: var(--jb-surface); border: 1px solid var(--jb-border); } .jb-build-chip .mud-icon-root { font-size: 0.95rem !important; } /* ---- Utility ------------------------------------------------------------ */ .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .jb-align-center { align-items: center; } .text-center { text-align: center; } .justify-center { justify-content: center; } /* ---- Blazor error UI ---------------------------------------------------- */ #blazor-error-ui { color-scheme: light dark; background: var(--jb-surface); color: var(--jb-text); bottom: 0; box-shadow: 0 -1px 12px rgba(0,0,0,0.2); display: none; left: 0; padding: 0.8rem 1.4rem; position: fixed; width: 100%; z-index: 3000; border-top: 2px solid var(--jb-primary); } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.7rem; } /* ---- Reduced motion ----------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .jb-reveal { opacity: 1; transform: none; } .jb-skillbar-fill { width: var(--pct); } } /* ---- Responsive --------------------------------------------------------- */ @media (max-width: 900px) { .jb-hero { min-height: auto; padding-top: 110px; padding-bottom: 3rem; text-align: center; } .jb-hero-copy { display: flex; flex-direction: column; align-items: center; } .jb-hero-role, .jb-hero-social { justify-content: center; } .jb-hero-visual { margin-top: 2rem; } .jb-scroll-cue { display: none; } } @media (max-width: 600px) { .jb-footer-bottom { flex-direction: column; align-items: flex-start; } .jb-hero-actions { justify-content: center; } }