/* ============================================================ Tokens — light theme is the default (:root). Dark theme is a full restore of the original dark-navy palette this site launched with, applied via [data-theme="dark"] on (set by js/main.js, persisted in localStorage). ============================================================ */ :root { --bg: #FFFFFF; --hero-bg: #D6EAFB; /* clearly blue, not a pale wash — contrast-checked */ --surface: #F5F9FD; --surface-featured: #E8F2FC; --border: #D9E6F2; --border-hero: #B9D9F2; --accent: #5AA9E6; --accent-hover: #4A96D2; --accent-text: #2B6CB0; --terminal: #1F9E90; --terminal-text: #0E7C70; --glow-color: rgba(90, 169, 230, 0.55); --text: #16233D; --text-muted: #4A5972; /* darkened from a paler muted tone so it still passes AA contrast on the blue hero band */ --error: #C0392B; --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --max-width: 1080px; } html[data-theme="dark"] { --bg: #0F1524; --hero-bg: #0F1524; /* dark mode has no separate light band — uniform navy */ --surface: #161D31; --surface-featured: #1C2440; --border: #2A3352; --border-hero: #2A3352; --accent: #4299E1; --accent-hover: #57A9EA; --accent-text: #4299E1; --terminal: #5FD0C4; --terminal-text: #5FD0C4; --glow-color: rgba(66, 153, 225, 0.6); --text: #F5F7FA; --text-muted: #8B96AC; --error: #E27878; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 0.15s ease, color 0.15s ease; } .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } a { color: inherit; } h1, h2, h3 { font-weight: 700; line-height: 1.2; margin: 0; } :focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; } /* ============================================================ Header ============================================================ */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--hero-bg); border-bottom: 1px solid var(--border-hero); transition: background 0.15s ease, border-color 0.15s ease; } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 20px; } .wordmark { font-family: var(--font-mono); font-weight: 500; font-size: 1rem; text-decoration: none; color: var(--text); white-space: nowrap; } .wordmark-bracket { color: var(--accent-text); } .header-main-row { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 20px; min-width: 0; /* lets social-nav shrink/wrap instead of forcing header-inner wider */ } .social-nav { display: flex; gap: 18px; } .social-nav a { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text-muted); font-size: 0.9rem; transition: color 0.15s ease; } .social-nav a:hover { color: var(--accent-hover); } .theme-toggle { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border-hero); background: transparent; color: var(--text); font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover { border-color: var(--accent-hover); color: var(--accent-hover); } .theme-toggle .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle .icon-moon { display: block; } /* ============================================================ Hero banner strip (the animated GIF — its own dark navy, unaffected by the theme) ============================================================ */ .hero-banner { width: 100%; line-height: 0; background: #0F1524; /* the banner's own navy, in case of any sub-pixel gap */ } .hero-banner-img { width: 100%; height: auto; display: block; /* No max-height/object-fit:cover here on purpose — that combination was cropping the top/bottom of the gif on wide viewports (the box becomes proportionally wider than the 1920x600 image, and cover crops whatever doesn't fit). height:auto preserves the full frame at every width. */ } /* ============================================================ Hero — photo + intro ============================================================ */ .hero { background: var(--hero-bg); padding: 64px 0 80px; border-bottom: 1px solid var(--border-hero); transition: background 0.15s ease, border-color 0.15s ease; } .hero-inner { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: center; } .hero-photo { width: 220px; height: 220px; border-radius: 12px; object-fit: cover; border: 1px solid var(--border-hero); } .hero-eyebrow { font-family: var(--font-mono); color: var(--terminal-text); font-size: 0.85rem; margin: 0 0 12px; } .hero h1 { font-size: 2.4rem; margin-bottom: 4px; } .hero-brand { font-family: var(--font-sans); font-size: 1.5rem; font-weight: 600; color: var(--accent-text); margin: 0 0 18px; } .hero-headline { color: var(--text); font-size: 1.2rem; font-weight: 500; max-width: 60ch; margin: 0 0 22px; } .tech-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 28px; } .tech-tags li { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text); background: var(--bg); border: 1px solid var(--border-hero); border-radius: 6px; padding: 5px 11px; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; padding: 11px 22px; border-radius: 8px; font-size: 0.95rem; font-weight: 500; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--text); } html[data-theme="dark"] .btn-primary { color: #06101F; } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { background: transparent; border-color: var(--border-hero); color: var(--text); } .btn-ghost:hover { border-color: var(--accent-hover); color: var(--accent-text); } .btn:disabled { opacity: 0.6; cursor: not-allowed; } /* ============================================================ Section rhythm ============================================================ */ section:not(.hero):not(.hero-banner) { padding: 72px 0; } section h2 { font-size: 1.6rem; margin-bottom: 32px; } /* ============================================================ Resume — reads like an actual resume, not a download prompt ============================================================ */ .resume { border-bottom: 1px solid var(--border); } .resume-block { margin-bottom: 36px; } .resume-block:last-child { margin-bottom: 0; } .resume-block-title { font-family: var(--font-mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-text); margin: 0 0 14px; } .resume-summary { color: var(--text); max-width: 68ch; margin: 0; } .resume-cert-list { list-style: none; padding: 0; margin: 0; } .resume-cert-list li { color: var(--text); padding: 8px 0; border-bottom: 1px solid var(--border); } .resume-cert-list li:last-child { border-bottom: none; } .resume-cert-list a, .resume-entry-client a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 0 8px var(--glow-color); transition: color 0.15s ease, text-shadow 0.15s ease; } .resume-cert-list a:hover, .resume-entry-client a:hover { color: var(--accent-hover); text-shadow: 0 0 14px var(--glow-color); } .resume-entry-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .resume-entry-role { font-weight: 600; margin: 0 0 4px; } .resume-entry-client { color: var(--text); font-size: 0.92rem; margin: 0; } .resume-entry-date { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text); margin: 0; white-space: nowrap; } .resume-entry-bullets { margin: 0; padding-left: 20px; color: var(--text); } .resume-entry-bullets li { margin-bottom: 10px; max-width: 72ch; } .resume-entry-bullets li:last-child { margin-bottom: 0; } .resume-skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .resume-skill-label { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 10px; } .resume-skill-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; } .resume-skill-tags li { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 4px 9px; } /* ============================================================ About ============================================================ */ .about { border-bottom: 1px solid var(--border); } .about-timeline { max-width: 74ch; display: flex; flex-direction: column; gap: 44px; } .about-entry { display: grid; grid-template-columns: 150px 1fr; gap: 28px; border-left: 3px solid var(--border); padding-left: 24px; } .about-entry-label { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-text); margin: 5px 0 0; } .about-entry p:not(.about-entry-label) { font-family: var(--font-serif); font-size: 1.14rem; font-weight: 400; line-height: 1.85; color: var(--text); margin: 0; } .about-entry a { color: var(--accent-text); } /* ============================================================ Software (SaaS) + Projects — shared card styles ============================================================ */ .software { border-bottom: 1px solid var(--border); } .cloud-solutions { border-bottom: 1px solid var(--border); } .projects { border-bottom: 1px solid var(--border); } .project-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 32px; margin-bottom: 20px; } .project-card-featured { background: var(--surface-featured); border-color: var(--accent); display: flex; align-items: center; gap: 32px; } .project-card-featured .project-card-body { flex: 1; } .project-card-logo { flex-shrink: 0; width: 220px; height: 110px; background: #0F1524; /* fixed dark plate — the logo's white "LEVERAGE" text needs a dark backing regardless of site theme, since the card surface itself is light in light mode */ border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 16px; } .project-card-logo img { width: 100%; height: auto; display: block; } /* DEBOS's logo (and any future square logo) — unlike LeverageCut's wide transparent lockup, this one has its own opaque black background baked in, so it doesn't need the forced dark plate. Square box, image fills it via object-fit:cover with the container clipping to rounded corners. */ .project-card-logo-square { width: 130px; height: 130px; background: transparent; padding: 0; overflow: hidden; } .project-card-logo-square img { width: 100%; height: 100%; object-fit: cover; } .project-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .project-heading h3 { font-size: 1.3rem; } .status-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--terminal-text); border: 1px solid var(--terminal); border-radius: 999px; padding: 3px 10px 3px 8px; } .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--terminal); } .project-desc { color: var(--text-muted); max-width: 62ch; margin: 0 0 20px; } .project-stack { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 24px; } .project-stack li { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; } .project-links { display: flex; gap: 12px; } /* ============================================================ Contact ============================================================ */ .contact-lede { color: var(--text-muted); max-width: 55ch; margin: -16px 0 32px; } .contact-form { max-width: 520px; } .form-row { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; } .form-row label { font-size: 0.88rem; color: var(--text-muted); } .form-row input, .form-row textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 11px 14px; color: var(--text); font-family: var(--font-sans); font-size: 0.95rem; resize: vertical; } .form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--accent-hover); } .form-row-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-status { margin: 16px 0 0; font-size: 0.9rem; min-height: 1.2em; } .contact-status[data-state="success"] { color: var(--terminal-text); } .contact-status[data-state="error"] { color: var(--error); } /* ============================================================ Footer ============================================================ */ .site-footer { border-top: 1px solid var(--border); padding: 32px 0; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer-inner p { color: var(--text-muted); font-size: 0.85rem; margin: 0; } .footer-inner .social-nav { font-size: 0.85rem; } .footer-inner .social-nav a { color: var(--text-muted); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 720px) { .header-inner { flex-direction: column; align-items: stretch; height: auto; padding: 12px 0; gap: 10px; } .theme-toggle { order: -1; /* renders first/top despite coming second in the markup — order applies to direct flex children of header-inner, which is why theme-toggle needed to move out of the old nested header-controls wrapper to make this work at all */ align-self: center; } .hero-inner { grid-template-columns: 1fr; text-align: left; } .hero-photo { width: 140px; height: 140px; } .hero h1 { font-size: 1.9rem; } .hero-actions { flex-direction: column; } .btn { justify-content: center; } .resume-entry-header { flex-direction: column; align-items: flex-start; } .about-entry { grid-template-columns: 1fr; gap: 8px; } .project-card-featured { flex-direction: column; align-items: stretch; } .project-card-logo { width: 100%; height: 90px; } .project-card-logo-square { width: 130px; height: 130px; align-self: center; } section:not(.hero):not(.hero-banner) { padding: 48px 0; } .social-nav span { display: none; } }