@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); :root { --paper: #f4f7f3; --paper-strong: #ffffff; --ink: #14211f; --muted: #61706c; --line: #d9e0dc; --line-strong: #a9b7b2; --teal: #12625e; --teal-dark: #0c3f3d; --amber: #b76a19; --amber-soft: #f8e7ca; --red: #8d2430; --blue: #274d85; --violet: #5d3f8f; --shadow: 0 16px 40px rgba(20, 33, 31, 0.10); --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sans: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--sans); color: var(--ink); background: linear-gradient(90deg, rgba(18, 98, 94, 0.045) 1px, transparent 1px), linear-gradient(180deg, rgba(18, 98, 94, 0.045) 1px, transparent 1px), var(--paper); background-size: 32px 32px; letter-spacing: 0; } a { color: inherit; text-decoration: none; } button, a { -webkit-tap-highlight-color: transparent; } button { font: inherit; } code { font-family: var(--mono); font-size: 0.92em; color: var(--teal-dark); background: rgba(18, 98, 94, 0.08); border: 1px solid rgba(18, 98, 94, 0.12); border-radius: 4px; padding: 0.05rem 0.28rem; } .topbar { position: fixed; inset: 0 0 auto 0; z-index: 20; height: 68px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 0 28px; background: rgba(244, 247, 243, 0.91); border-bottom: 1px solid rgba(169, 183, 178, 0.72); backdrop-filter: blur(18px); } .brand, .topbar-actions, .nav-links { display: flex; align-items: center; } .brand { gap: 10px; font-family: var(--mono); font-size: 0.95rem; font-weight: 700; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: #fff; background: var(--ink); border-radius: 6px; } .nav-links { justify-content: center; gap: 8px; } .nav-link { position: relative; padding: 10px 12px; color: var(--muted); font-size: 0.92rem; font-weight: 600; border-radius: 6px; transition: color 160ms ease, background-color 160ms ease; } .nav-link:hover, .nav-link.active { color: var(--teal-dark); background: rgba(18, 98, 94, 0.08); } .topbar-actions { gap: 10px; } .icon-button, .primary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border-radius: 6px; font-weight: 700; } .icon-button { min-width: 48px; padding: 0 12px; color: var(--teal-dark); background: transparent; border: 1px solid var(--line-strong); cursor: pointer; } .primary-action { padding: 0 16px; color: #fff; background: var(--teal-dark); border: 1px solid var(--teal-dark); transition: transform 160ms ease, background-color 160ms ease; } .primary-action:hover { transform: translateY(-1px); background: var(--ink); } main { overflow: hidden; } .section-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; } .hero { min-height: 720px; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr); gap: 48px; align-items: center; padding-top: 112px; padding-bottom: 52px; } .hero-copy { max-width: 680px; } .status-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 24px; color: var(--muted); font-family: var(--mono); font-size: 0.78rem; } .status-row > span { min-height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.72); } .status-row .status-pill { color: var(--teal-dark); background: rgba(18, 98, 94, 0.10); border-color: rgba(18, 98, 94, 0.24); } h1, h2, h3, p { margin-top: 0; } h1 { margin-bottom: 24px; max-width: 650px; font-size: 4rem; line-height: 0.98; font-weight: 700; } .lead { max-width: 650px; margin-bottom: 28px; color: #3d4d49; font-size: 1.15rem; line-height: 1.65; } .contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 650px; } .contact-chip { min-height: 62px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 10px 12px; color: var(--ink); background: rgba(255, 255, 255, 0.75); border: 1px solid var(--line); border-radius: 8px; cursor: default; } button.contact-chip { cursor: pointer; } .contact-chip:hover { border-color: rgba(18, 98, 94, 0.35); box-shadow: 0 10px 28px rgba(18, 98, 94, 0.08); } .chip-label, .summary-label, .eyebrow { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; } .architecture-board { position: relative; min-height: 520px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 26px; color: #edf6f4; background: linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(180deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px), #132321; background-size: 24px 24px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; } .board-kicker { width: fit-content; display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; color: #d7e5e1; background: rgba(18, 98, 94, 0.45); border: 1px solid rgba(120, 198, 191, 0.38); border-radius: 6px; font-family: var(--mono); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; } .board-title { max-width: 420px; margin-bottom: 0; color: #fff; font-size: 2.4rem; line-height: 1; } .board-lead { max-width: 460px; margin-bottom: 0; color: #b5c5c0; font-size: 1rem; line-height: 1.55; } .delivery-lane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .lane-step { min-height: 138px; display: flex; flex-direction: column; justify-content: space-between; padding: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; } .lane-step span { width: fit-content; color: #ffe7bd; font-family: var(--mono); font-size: 0.76rem; font-weight: 700; } .lane-step strong { display: block; color: #fff; font-size: 1.15rem; } .lane-step p { margin-bottom: 0; color: #b5c5c0; font-size: 0.86rem; line-height: 1.4; } .board-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .board-proof div { min-height: 88px; display: flex; flex-direction: column; gap: 6px; padding: 12px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; } .board-proof b { color: #fff; font-family: var(--mono); font-size: 0.85rem; } .board-proof span { color: #b5c5c0; font-size: 0.78rem; line-height: 1.3; } .evidence-band, .stack-band { padding: 64px 0; background: rgba(255, 255, 255, 0.58); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .evidence-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .evidence-card, .work-card, .lab-card, .stack-column, .education-card { background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line); border-radius: 8px; } .evidence-card { padding: 22px; } .evidence-card h2 { margin: 10px 0 12px; font-size: 1.35rem; line-height: 1.22; } .evidence-card p, .work-card p, .lab-card p, .education-card p { margin-bottom: 0; color: #4c5d59; line-height: 1.58; } .case-section, .homelab-section, .incidents-section, .education-section { padding: 88px 0; } .section-heading { max-width: 790px; margin-bottom: 34px; } .section-heading h2 { margin: 8px 0 12px; font-size: 2.45rem; line-height: 1.08; } .section-heading p { color: #4c5d59; font-size: 1.05rem; line-height: 1.62; } .case-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; } .case-summary { position: sticky; top: 92px; display: grid; gap: 14px; padding: 18px; background: #132321; color: #edf6f4; border-radius: 8px; } .case-summary > div { padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .case-summary strong { display: block; margin-top: 6px; line-height: 1.35; } .case-summary .summary-label { color: #9bb0aa; } .text-link { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--teal); border-radius: 6px; font-weight: 700; } .work-streams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .work-card { position: relative; min-height: 355px; padding: 22px; } .work-card-marker { width: 42px; height: 32px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; color: #fff; background: var(--teal-dark); border-radius: 6px; font-family: var(--mono); font-size: 0.8rem; } .work-card h3, .lab-card h3, .stack-column h3, .education-card h3 { margin-bottom: 12px; font-size: 1.24rem; } .work-card ul { display: grid; gap: 8px; margin: 18px 0 0; padding-left: 18px; color: #4c5d59; line-height: 1.45; } .work-card li::marker { color: var(--amber); } .homelab-grid, .education-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .lab-card { min-height: 230px; padding: 22px; border-top: 4px solid var(--amber); } .lab-card:nth-child(2) { border-top-color: var(--teal); } .lab-card:nth-child(3) { border-top-color: var(--blue); } .lab-card:nth-child(4) { border-top-color: var(--red); } .lab-card-ai { border-top-color: var(--violet); } .stack-matrix { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } .stack-column { padding: 20px; } .tag-list { display: flex; flex-wrap: wrap; gap: 8px; } .tag-list span { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 9px; color: var(--teal-dark); background: rgba(18, 98, 94, 0.08); border: 1px solid rgba(18, 98, 94, 0.16); border-radius: 6px; font-family: var(--mono); font-size: 0.78rem; } .incident-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; } .incident-tabs { display: grid; gap: 10px; } .incident-tab { min-height: 58px; padding: 12px 14px; color: var(--ink); text-align: left; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease; } .incident-tab:hover, .incident-tab.active { border-color: rgba(18, 98, 94, 0.35); background: rgba(18, 98, 94, 0.08); transform: translateY(-1px); } .incident-panel { min-height: 250px; padding: 22px; background: #132321; color: #edf6f4; border-radius: 8px; } .incident-panel h3 { margin-bottom: 16px; font-size: 1.38rem; } .incident-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .incident-step { min-height: 160px; padding: 14px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; } .incident-step strong { display: block; margin-bottom: 10px; color: #fff; font-family: var(--mono); font-size: 0.86rem; } .incident-step p { margin: 0; color: #bfd0cb; line-height: 1.5; } .incident-panel code { color: #ffe7bd; background: rgba(248, 231, 202, 0.14); border-color: rgba(248, 231, 202, 0.34); } .education-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } .education-card { min-height: 260px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; border-top: 5px solid var(--teal); } .education-card .summary-label { display: inline-block; margin-bottom: 18px; color: var(--teal-dark); } .education-card h3 { max-width: 92%; margin-bottom: 14px; color: var(--ink); font-size: 1.62rem; line-height: 1.08; } .education-school { margin-bottom: 16px !important; color: var(--teal-dark) !important; font-weight: 700; line-height: 1.35 !important; } .education-card:nth-child(2) { border-top-color: var(--blue); } .education-card:nth-child(3) { border-top-color: var(--amber); } .footer { padding: 34px 0; color: #c6d3cf; background: #132321; } .footer-grid { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .footer-grid strong, .footer-grid span, .footer-links a { display: block; } .footer-grid strong { color: #fff; margin-bottom: 6px; } .footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; } .footer-links a:hover { color: #fff; } .toast { position: fixed; left: 50%; bottom: 28px; z-index: 40; min-height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 18px; color: #fff; background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; box-shadow: var(--shadow); opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; } .toast.show { opacity: 1; transform: translate(-50%, 0); } .reveal { opacity: 0; transform: translateY(18px); transition: opacity 560ms ease, transform 560ms ease; } .reveal.active { opacity: 1; transform: translateY(0); } @media (max-width: 1040px) { .topbar { grid-template-columns: auto auto; justify-content: space-between; } .nav-links { display: none; } .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 116px; } .architecture-board { min-height: auto; } .case-layout, .incident-layout { grid-template-columns: 1fr; } .case-summary { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); } .case-summary .text-link { grid-column: 1 / -1; } .homelab-grid, .stack-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .topbar { height: 62px; padding: 0 14px; } .brand span:last-child { display: none; } .primary-action { padding: 0 12px; } .section-shell { width: min(100% - 28px, 1160px); } .hero { gap: 30px; padding-top: 94px; padding-bottom: 42px; } h1 { font-size: 2.75rem; line-height: 1.02; } .lead { font-size: 1rem; } .contact-grid, .evidence-grid, .work-streams, .homelab-grid, .stack-matrix, .incident-steps, .education-grid { grid-template-columns: 1fr; } .architecture-board { min-height: auto; padding: 16px; } .board-title { font-size: 2rem; } .delivery-lane, .board-proof { grid-template-columns: 1fr; } .lane-step, .board-proof div { min-height: auto; } .case-section, .homelab-section, .incidents-section, .education-section { padding: 62px 0; } .section-heading h2 { font-size: 2rem; } .case-summary { grid-template-columns: 1fr; } .work-card, .lab-card, .education-card { min-height: auto; } .footer-grid { align-items: flex-start; flex-direction: column; } .footer-links { justify-content: flex-start; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } @media print { @page { size: A4; margin: 10mm 9mm 10mm; } html { font-size: 10px !important; } body { background: #fff !important; color: #000 !important; font-size: 10px !important; line-height: 1.3 !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; } main { overflow: visible !important; } .topbar, .footer, .toast, .architecture-board, .incidents-section { display: none !important; } .section-shell { width: 100% !important; max-width: none !important; } .hero { min-height: auto; display: block !important; align-items: start !important; padding: 0 0 0.85rem !important; border-bottom: 1px solid #cfcfcf; } .hero-copy { max-width: none !important; } h1 { margin-bottom: 0.5rem !important; font-size: 3rem !important; line-height: 0.98 !important; } h2 { margin-bottom: 0.42rem !important; font-size: 1.7rem !important; line-height: 1.05 !important; } h3 { margin-bottom: 0.28rem !important; font-size: 1.16rem !important; line-height: 1.12 !important; } p { margin-bottom: 0 !important; } .lead { max-width: 94%; margin-bottom: 0.65rem !important; font-size: 1.08rem !important; line-height: 1.42 !important; } .status-row { gap: 0.35rem !important; margin-bottom: 0.55rem !important; font-size: 0.78rem !important; } .status-row > span { min-height: 0 !important; padding: 0.18rem 0.48rem !important; border-radius: 3px !important; } .contact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0.3rem !important; } .contact-chip { min-height: 0 !important; padding: 0.42rem 0.5rem !important; gap: 0.1rem !important; border-radius: 4px !important; font-size: 0.96rem !important; } .evidence-band, .stack-band, .case-section, .homelab-section, .education-section { padding: 0.9rem 0 0 !important; background: #fff; border: 0; } .evidence-band { padding-top: 0.75rem !important; } .stack-band { padding-top: 0.95rem !important; } .evidence-grid, .homelab-grid, .stack-matrix, .education-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.55rem !important; } .case-layout { display: grid !important; grid-template-columns: 1fr !important; gap: 0.48rem !important; } .work-streams { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0.55rem !important; } .homelab-grid, .stack-matrix { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .case-summary { position: static; grid-column: 1 / -1; display: grid !important; grid-template-columns: 1.15fr 1fr 1.45fr 0.85fr !important; gap: 0.48rem !important; padding: 0.55rem !important; color: #000; background: #fff; border: 1px solid #999; border-radius: 4px !important; } .case-summary > div { padding-bottom: 0 !important; border-bottom: 0 !important; } .case-summary strong { margin-top: 0.16rem !important; font-size: 0.98rem !important; line-height: 1.2 !important; } .case-summary .summary-label { color: #333; } .case-summary .text-link { min-height: 0 !important; padding: 0.22rem !important; color: #000 !important; background: #fff !important; border: 1px solid #999; border-radius: 3px !important; font-size: 0.88rem !important; } .section-heading { margin-bottom: 0.55rem !important; max-width: none !important; } .section-heading h2 { margin-bottom: 0.26rem !important; font-size: 1.75rem !important; } .section-heading p, .evidence-card p, .work-card p, .lab-card p, .education-card p, .work-card ul { color: #000; line-height: 1.3 !important; font-size: 0.92rem !important; } .evidence-card, .work-card, .lab-card, .stack-column, .education-card { break-inside: avoid; box-shadow: none; border-color: #bbb; background: #fff; border-radius: 4px !important; } .work-card, .lab-card, .education-card, .evidence-card, .stack-column { min-height: 0 !important; padding: 0.58rem !important; } .work-card-marker { width: auto !important; height: auto !important; min-height: 0 !important; margin-bottom: 0.34rem !important; padding: 0.1rem 0.34rem !important; color: #000 !important; background: #fff !important; border: 1px solid #999; border-radius: 3px !important; font-size: 0.72rem !important; } .work-card ul { display: block !important; margin: 0.36rem 0 0 !important; padding-left: 1.05rem !important; } .work-card li { margin-bottom: 0.12rem !important; } .lab-card { border-top-width: 2px !important; } .tag-list { gap: 0.24rem !important; } .tag-list span { min-height: 0 !important; padding: 0.12rem 0.34rem !important; border-radius: 3px !important; font-size: 0.76rem !important; } .education-card { border-top-width: 2px !important; } .education-card .summary-label, .chip-label, .summary-label, .eyebrow { margin-bottom: 0.22rem !important; font-size: 0.68rem !important; } .education-card h3 { max-width: none !important; font-size: 1.18rem !important; line-height: 1.08 !important; } .education-school { margin-bottom: 0.28rem !important; line-height: 1.16 !important; font-size: 0.9rem !important; } .homelab-section { break-before: page !important; page-break-before: always !important; padding-top: 0 !important; } code { padding: 0 !important; color: #000 !important; background: transparent !important; border: 0 !important; } .reveal { opacity: 1 !important; transform: none !important; } }