/* ============================================================ CSS Custom Properties Apple palette: white background, #1d1d1f text, #0071e3 accent ============================================================ */ :root { --bg: #ffffff; --bg-alt: #f5f5f7; --text: #1d1d1f; --text-muted: #6e6e73; --accent: #0071e3; --accent-dark: #0064cc; --border: #d2d2d7; --live: #34c759; /* Apple system green — live indicator */ --surface: #f5f5f7; /* raised chips / stats / flow nodes */ --card-bg: #ffffff; /* project card background */ --nav-bg: #ffffff; --badge-pub-fg:#1a7f4b; --badge-pub-bg:#e6f4ee; --badge-pub-bd:#a8d9bc; --badge-wip-fg:#9a6200; --badge-wip-bg:#fef3dc; --badge-wip-bd:#f5cc85; --radius: 18px; --max: 980px; } /* ============================================================ Dark mode All theming lives in variables, so the manual toggle just swaps this block. Dark applies via system preference OR an explicit data-theme="dark" on (set by the toggle). data-theme="light" forces light even when the system is dark. Apple dark palette: #000000 bg, #f5f5f7 text, #0a84ff accent ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#000000; --bg-alt:#1c1c1e; --text:#f5f5f7; --text-muted:#98989d; --accent:#0a84ff; --accent-dark:#0071e3; --border:#38383a; --live:#30d158; --surface:#2c2c2e; --card-bg:#1c1c1e; --nav-bg:rgba(0,0,0,0.95); --badge-pub-fg:#4cd98a; --badge-pub-bg:#0d2e1c; --badge-pub-bd:#1e5c38; --badge-wip-fg:#ffc452; --badge-wip-bg:#2e1f00; --badge-wip-bd:#5c3d00; } } :root[data-theme="dark"] { --bg:#000000; --bg-alt:#1c1c1e; --text:#f5f5f7; --text-muted:#98989d; --accent:#0a84ff; --accent-dark:#0071e3; --border:#38383a; --live:#30d158; --surface:#2c2c2e; --card-bg:#1c1c1e; --nav-bg:rgba(0,0,0,0.95); --badge-pub-fg:#4cd98a; --badge-pub-bg:#0d2e1c; --badge-pub-bd:#1e5c38; --badge-wip-fg:#ffc452; --badge-wip-bg:#2e1f00; --badge-wip-bd:#5c3d00; } /* ============================================================ Back to top button ============================================================ */ #back-to-top { position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-alt); border: 1px solid var(--border); color: var(--text); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease; z-index: 150; pointer-events: none; } #back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } #back-to-top:hover { background: var(--border); } /* ============================================================ Scroll fade-in — elements start invisible, JS adds .visible ============================================================ */ .fade-up { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } /* Staggered delay for child items inside a group */ .fade-up:nth-child(2) { transition-delay: 0.08s; } .fade-up:nth-child(3) { transition-delay: 0.16s; } .fade-up:nth-child(4) { transition-delay: 0.24s; } /* ============================================================ Reset & Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ============================================================ Layout Helpers ============================================================ */ .container { max-width: var(--max); margin: 0 auto; padding: 0 22px; } section { padding: 96px 0; } /* Alternate section backgrounds — no gradients, just flat colors */ #about { background: var(--bg); } #projects { background: var(--bg-alt); } #skills { background: var(--bg); } #achievements{ background: var(--bg-alt); } #contact { background: var(--bg); } /* ============================================================ Navigation ============================================================ */ #nav { position: sticky; top: 0; z-index: 200; height: 52px; background: var(--nav-bg); border-bottom: 1px solid transparent; display: flex; align-items: center; transition: border-color 0.2s ease; } #nav.scrolled { border-bottom-color: var(--border); } .nav-inner { max-width: var(--max); margin: 0 auto; padding: 0 22px; width: 100%; display: flex; align-items: center; justify-content: space-between; } .nav-brand { font-size: 15px; font-weight: 600; color: var(--text); text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; } .nav-links { list-style: none; display: flex; gap: 28px; } .nav-links a { font-size: 14px; color: var(--text-muted); text-decoration: none; transition: color 0.12s ease; } .nav-links a:hover { color: var(--text); } .nav-links a.active { color: var(--accent); } .nav-links a.active::after { content: ''; display: block; height: 2px; background: var(--accent); border-radius: 1px; margin-top: 3px; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; } .nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--text); transition: all 0.2s ease; } /* ============================================================ Nav right group + live Adelaide clock ============================================================ */ .nav-left { display: flex; align-items: center; gap: 13px; } /* "Open to work" as a split-flap departure board — letters flip through the alphabet to land on each character, then cycle to the next phrase, like the old airport boards. Tiles stay dark in both themes (a real board is black), so it reads as hardware. */ .flap { display: inline-flex; align-items: center; gap: 8px; } .flap-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 5px rgba(52, 199, 89, 0.7); flex-shrink: 0; } .flap-board { display: inline-flex; gap: 2px; padding: 3px; background: #161618; /* fixed translucent edge so the dark board is delineated on BOTH a white (light) and a black (dark) nav, plus a touch of depth */ border: 1px solid rgba(235, 235, 235, 0.16); border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .flap-cell { position: relative; width: 13px; height: 18px; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; font-size: 11px; font-weight: 600; color: #f4f4f4; background: #2c2c2e; border-radius: 2px; overflow: hidden; } /* the split-flap seam across the middle of each tile */ .flap-cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.6); transform: translateY(-0.5px); } /* a satisfying "thunk" when a tile lands on its final letter */ .flap-cell.land { animation: flap-land 0.18s ease; } @keyframes flap-land { 0% { transform: translateY(-2px) scaleY(0.7); } 60% { transform: translateY(0) scaleY(1.06); } 100% { transform: scaleY(1); } } .nav-right { display: flex; align-items: center; gap: 24px; } .nav-clock { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; white-space: nowrap; } .clock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex-shrink: 0; box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.5); animation: clock-pulse 2.4s ease-out infinite; } .clock-zone { font-size: 11px; letter-spacing: 0.04em; opacity: 0.65; } @keyframes clock-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.45); } 70% { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); } } @media (prefers-reduced-motion: reduce) { .clock-dot { animation: none; } } /* ============================================================ Hero ============================================================ */ #hero { padding: 128px 0 96px; background: var(--bg); text-align: center; } .eyebrow { font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; } #hero h1 { font-size: 72px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.02; color: var(--text); margin-bottom: 28px; } .hero-sub { font-size: 21px; color: var(--text-muted); line-height: 1.55; max-width: 560px; margin: 0 auto 28px; } .visitor-line { margin-top: 28px; font-size: 13px; color: var(--text-muted); letter-spacing: 0.01em; } /* ============================================================ Hero Photo ============================================================ */ .hero-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; object-position: center 8%; border: 3px solid var(--border); display: block; margin: 0 auto 28px; } /* ============================================================ Buttons ============================================================ */ .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn { display: inline-block; background: var(--accent); color: #ffffff; font-size: 17px; font-weight: 500; padding: 12px 28px; border-radius: 980px; text-decoration: none; transition: background 0.12s ease; } .btn:hover { background: var(--accent-dark); } .btn-ghost { display: inline-block; background: transparent; color: var(--accent); font-size: 17px; font-weight: 500; padding: 12px 28px; border-radius: 980px; border: 1.5px solid var(--accent); text-decoration: none; transition: background 0.12s ease, color 0.12s ease; } .btn-ghost:hover { background: var(--accent); color: #ffffff; } /* ============================================================ Section Headings ============================================================ */ h2 { font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: var(--text); margin-bottom: 56px; } h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); margin-bottom: 12px; } /* ============================================================ About ============================================================ */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; } .about-text p { color: var(--text-muted); font-size: 17px; margin-bottom: 20px; } .about-text p:last-child { margin-bottom: 0; } .education h3 { font-size: 17px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; } .edu-item { display: flex; gap: 20px; padding: 20px 0; border-top: 1px solid var(--border); } .edu-item:last-child { border-bottom: 1px solid var(--border); } .edu-meta { min-width: 108px; padding-top: 2px; } .edu-year { font-size: 13px; color: var(--text-muted); } .edu-detail { display: flex; flex-direction: column; gap: 4px; } .edu-detail strong { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; } .edu-detail span { font-size: 14px; color: var(--text-muted); } .edu-grade { font-size: 13px !important; color: var(--accent) !important; } /* ============================================================ Projects ============================================================ */ .project-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; margin-bottom: 20px; } .project-card:last-child { margin-bottom: 0; } .project-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; } .project-tag { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } .project-title-block h3 { font-size: 22px; margin-bottom: 0; } .project-stack { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; } .project-stack span { font-size: 13px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); padding: 4px 12px; border-radius: 980px; white-space: nowrap; } .project-body p { font-size: 16px; color: var(--text-muted); line-height: 1.65; margin-bottom: 18px; } .project-body p:last-child { margin-bottom: 0; } /* Stats row — only inside EcoScan project */ .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); margin: 28px 0; } .stat { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: var(--surface); } .stat-num { font-size: 30px; font-weight: 700; letter-spacing: -0.04em; color: var(--text); line-height: 1; } .stat-label { font-size: 13px; color: var(--text-muted); line-height: 1.45; } .project-note { font-size: 15px !important; border-top: 1px solid var(--border); padding-top: 20px; margin-top: 6px !important; } /* Published badge — green, sits under the project title */ .published-badge { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--badge-pub-fg); background: var(--badge-pub-bg); border: 1px solid var(--badge-pub-bd); padding: 4px 10px; border-radius: 980px; } /* Work in progress badge — amber */ .wip-badge { display: inline-block; margin-top: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--badge-wip-fg); background: var(--badge-wip-bg); border: 1px solid var(--badge-wip-bd); padding: 4px 10px; border-radius: 980px; } /* Paper citation link block */ .paper-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; padding: 16px 20px; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; background: var(--bg-alt); transition: border-color 0.15s ease; flex-wrap: wrap; } .paper-link:hover { border-color: var(--accent); } .paper-meta { font-size: 13px; color: var(--text-muted); line-height: 1.55; flex: 1; } .paper-cta { font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; } /* ============================================================ Skills ============================================================ */ .skills-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .skill-group h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; } .skill-group ul { list-style: none; } .skill-group li { font-size: 16px; color: var(--text); padding: 10px 0; border-bottom: 1px solid var(--border); } .skill-group li:first-child { border-top: 1px solid var(--border); } /* ============================================================ Achievements ============================================================ */ .achieve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; } .achieve-block h3 { font-size: 17px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0; } .achieve-list { list-style: none; } .achieve-list li { font-size: 16px; color: var(--text-muted); padding: 16px 0; border-bottom: 1px solid var(--border); line-height: 1.5; } .achieve-list li:first-child { border-top: 1px solid var(--border); } .achieve-list strong { color: var(--text); display: block; margin-bottom: 2px; } .cert-date { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; } /* ============================================================ Contact ============================================================ */ .contact-wrap { max-width: 560px; margin: 0 auto; text-align: center; } .contact-wrap h2 { margin-bottom: 20px; } .contact-wrap p { font-size: 19px; color: var(--text-muted); line-height: 1.55; margin-bottom: 40px; } /* ============================================================ Contact links row ============================================================ */ .contact-links { margin-top: 24px; font-size: 15px; color: var(--text-muted); } .contact-links a { color: var(--accent); text-decoration: none; transition: opacity 0.12s ease; } .contact-links a:hover { opacity: 0.75; } .divider { margin: 0 10px; color: var(--border); } /* ============================================================ Footer ============================================================ */ footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 24px 0; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } footer span { font-size: 13px; color: var(--text-muted); } .footer-clock { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; } .footer-clock .clock-zone { font-size: 11px; letter-spacing: 0.04em; } /* ============================================================ Project architecture / pipeline diagrams Accurate visual summaries of each system — drawn with the palette so they adapt to light / dark automatically. ============================================================ */ .flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 30px 0; } .flow-node { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; text-align: center; } .flow-node small { display: block; font-size: 11px; font-weight: 400; color: var(--text-muted); margin-top: 2px; } .flow-node.key { color: #ffffff; background: var(--accent); border-color: var(--accent); } .flow-node.key small { color: rgba(255, 255, 255, 0.82); } .flow-arrow { flex-shrink: 0; color: var(--text-muted); font-size: 14px; } /* ============================================================ Hero credibility strip ============================================================ */ .hero-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 600px; margin: 0 auto 34px; } .hero-meta-item { font-size: 13px; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 980px; padding: 6px 14px; white-space: nowrap; transition: color 0.15s ease, border-color 0.15s ease; } .hero-meta-item:hover { color: var(--text); border-color: var(--text-muted); } /* ============================================================ Light / dark toggle button ============================================================ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--text-muted); cursor: pointer; transition: color 0.15s ease, background 0.15s ease; } .theme-toggle:hover { color: var(--text); background: var(--bg-alt); } .theme-toggle svg { width: 18px; height: 18px; } /* Show the icon for the active theme: sun in light, moon in dark */ .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Copy-email confirmation flash */ .btn.copied { background: var(--live); color: #ffffff; } /* ============================================================ Responsive 1024px — tablet landscape / small laptop 768px — tablet portrait (iPad) 600px — large phone 420px — small phone ============================================================ */ /* --- Tablet landscape / small laptop (≤ 1024px) ----------- */ @media (max-width: 1024px) { :root { --max: 900px; } /* The status board needs room beside the nav links — desktop only */ .flap { display: none; } #hero h1 { font-size: 62px; } .hero-sub { font-size: 19px; } .skills-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; } } /* --- Tablet portrait (≤ 768px) ---------------------------- */ @media (max-width: 768px) { h2 { font-size: 30px; margin-bottom: 36px; } section { padding: 72px 0; } #hero { padding: 80px 0 64px; } #hero h1 { font-size: 50px; } .hero-sub { font-size: 17px; } /* Stack nav into hamburger at tablet portrait */ .nav-links { display: none; position: absolute; top: 52px; left: 0; right: 0; background: var(--bg); flex-direction: column; gap: 0; border-bottom: 1px solid var(--border); z-index: 199; } .nav-links.open { display: flex; } .nav-toggle { display: flex; } .nav-clock { display: none; } /* footer clock covers mobile */ .nav-links li { border-bottom: 1px solid var(--border); } .nav-links a { display: block; padding: 14px 22px; font-size: 16px; } /* About: single column */ .about-grid { grid-template-columns: 1fr; gap: 48px; } /* Skills: 2 columns */ .skills-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } /* Achievements: single column */ .achieve-grid { grid-template-columns: 1fr; gap: 44px; } /* Project cards */ .project-header { flex-direction: column; gap: 14px; } .project-stack { justify-content: flex-start; } .project-card { padding: 28px 24px; } /* Stats row stays 3 columns — fits at 768px wide */ .stats-row { grid-template-columns: repeat(3, 1fr); } .stat { padding: 16px 14px; } .stat-num { font-size: 24px; } /* Contact links wrap cleanly */ .contact-links { line-height: 2.2; } } /* --- Large phone (≤ 600px) -------------------------------- */ @media (max-width: 600px) { h2 { font-size: 28px; } #hero { padding: 64px 0 56px; } #hero h1 { font-size: 40px; } #hero h1 br { display: none; } .hero-sub { font-size: 16px; } .hero-photo { width: 128px; height: 128px; } .stats-row { grid-template-columns: 1fr; } .skills-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .contact-wrap p { font-size: 17px; } .btn, .btn-ghost { font-size: 15px; padding: 11px 22px; } .footer-inner { flex-direction: column; align-items: flex-start; gap: 6px; } } /* --- Small phone (≤ 420px) -------------------------------- */ @media (max-width: 420px) { .container { padding: 0 16px; } #hero h1 { font-size: 34px; } .hero-photo { width: 110px; height: 110px; } .project-card { padding: 20px 16px; } .skills-grid { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; align-items: center; } .btn, .btn-ghost { width: 100%; text-align: center; } }