/* =========================================================================== moekayal.me — shared site styles Design tokens + base + reusable components for index / résumé / architecture. No build step; plain CSS. Theme is driven by [data-theme] on (see js/site.js + the inline bootstrap in each page ). =========================================================================== */ /* ---- Design tokens ------------------------------------------------------- */ :root { color-scheme:dark; /* native scrollbars/form controls/UA bg follow the theme */ --bg:#15100a; --bg2:#1e1810; --text:#ece3d4; --text2:#cbbfa6; --muted:#9a8c72; --faint:#7a6c54; --line:#2a2115; --line2:#342a1d; --dot:#4a3d2c; --thumb1:#1c160e; --thumb2:#231c12; --nav-bg:rgba(21,16,10,0.78); --accent:#e07a3a; --font-sans:'Libre Franklin', sans-serif; --font-serif:'Spectral', serif; --font-mono:'IBM Plex Mono', monospace; --maxw:1200px; } :root[data-theme="light"] { color-scheme:light; --bg:#f6f1e7; --bg2:#efe7d8; --text:#23190f; --text2:#3f3326; --muted:#6f6151; --faint:#a89a82; --line:#e4dac9; --line2:#dacdb9; --dot:#cfc1a8; --thumb1:#ece4d4; --thumb2:#f3ede0; --nav-bg:rgba(246,241,231,0.82); } /* CSS-only fallback: if JS never sets data-theme, still follow the OS. */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme:light; --bg:#f6f1e7; --bg2:#efe7d8; --text:#23190f; --text2:#3f3326; --muted:#6f6151; --faint:#a89a82; --line:#e4dac9; --line2:#dacdb9; --dot:#cfc1a8; --thumb1:#ece4d4; --thumb2:#f3ede0; --nav-bg:rgba(246,241,231,0.82); } } /* ---- Base ---------------------------------------------------------------- */ * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans); } body :not(canvas) { transition: background-color .5s ease, border-color .5s ease, color .5s ease; } ::selection { background:rgba(224,122,58,0.3); color:#fff; } @keyframes heroIn { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } } @keyframes hkmarq { from { transform:translateX(0); } to { transform:translateX(-50%); } } /* ---- Utilities ----------------------------------------------------------- */ .mono { font-family:var(--font-mono); } .serif { font-family:var(--font-serif); } .accent { color:var(--accent); } .c-text { color:var(--text); } .container { max-width:var(--maxw); margin:0 auto; } /* ---- Page scaffold + fixed overlays -------------------------------------- */ .page { min-height:100vh; overflow-x:hidden; position:relative; } .content { position:relative; z-index:1; } .bg-flow { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; } .scroll-prog { position:fixed; top:0; left:0; height:2px; width:0%; background:var(--accent); z-index:100; } .cursor-ring { position:fixed; top:0; left:0; width:34px; height:34px; border:1px solid var(--accent); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:120; opacity:0; transition:width .25s,height .25s,background .25s,opacity .3s; } .cursor-dot { position:fixed; top:0; left:0; width:6px; height:6px; background:var(--accent); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:121; opacity:0; } /* ---- Brand wordmark (nav + mobile menu) ---------------------------------- */ .brand { font-family:var(--font-serif); font-size:21px; font-weight:600; font-style:italic; color:var(--text); text-decoration:none; } /* ---- Buttons / links ----------------------------------------------------- */ .btn { display:inline-block; padding:15px 30px; font-size:14px; border-radius:999px; text-decoration:none; font-weight:600; white-space:nowrap; } .btn--solid { background:var(--text); color:var(--bg); } .btn--solid:hover { opacity:0.88; } .link-underline { color:var(--text); padding:15px 8px; font-size:14px; text-decoration:none; font-weight:600; border-bottom:1.5px solid var(--accent); white-space:nowrap; } .link-underline:hover { color:var(--accent); } /* Small tech tags + pills */ .tag-row { display:flex; flex-wrap:wrap; gap:8px; } .chip-row { display:flex; flex-wrap:wrap; gap:7px; } .tag { font-size:13px; color:var(--text2); border:1px solid var(--line2); border-radius:999px; padding:7px 15px; } .chip { font-family:var(--font-mono); font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:4px 9px; } /* ---- Navigation ---------------------------------------------------------- */ .nav { position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:var(--nav-bg); border-bottom:1px solid var(--line); } .nav__inner { max-width:var(--maxw); margin:0 auto; padding:0 48px; height:72px; display:flex; align-items:center; justify-content:space-between; } .nav__links { display:flex; gap:30px; font-size:13.5px; font-weight:500; color:var(--muted); } .nav__link { color:inherit; text-decoration:none; } .nav__link:hover { color:var(--text); } .nav__actions { display:flex; align-items:center; gap:18px; } .nav__avail { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; } .status-dot { width:7px; height:7px; border-radius:50%; background:#5cc98a; box-shadow:0 0 9px #5cc98a; } .nav__cmdk { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11px; color:var(--muted); background:var(--bg2); border:1px solid var(--line2); border-radius:7px; padding:5px 10px; cursor:pointer; flex-shrink:0; } .theme-toggle { position:relative; width:46px; height:24px; border-radius:999px; border:1px solid var(--line2); background:var(--bg2); cursor:pointer; padding:0; flex-shrink:0; } .theme-toggle__knob { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--accent); transition:transform .35s cubic-bezier(.2,.7,.2,1); } .nav__burger { display:none; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--line2); background:var(--bg2); border-radius:10px; cursor:pointer; padding:0; flex-shrink:0; } .burger { position:relative; display:block; width:16px; height:11px; } .burger span { position:absolute; left:0; width:16px; height:1.7px; background:var(--text); border-radius:2px; } .burger span:first-child { top:0; } .burger span:last-child { bottom:0; } /* ---- Mobile menu --------------------------------------------------------- */ .mobile-menu { position:fixed; inset:0; z-index:120; display:none; flex-direction:column; padding:24px 24px 40px; background:var(--bg); opacity:0; transition:opacity .25s ease; } .mobile-menu__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:42px; } .mobile-menu__close { width:42px; height:42px; border:1px solid var(--line2); background:var(--bg2); border-radius:10px; cursor:pointer; color:var(--text); font-size:17px; line-height:1; padding:0; } .mobile-menu__link { font-family:var(--font-serif); font-size:32px; font-weight:500; color:var(--text); text-decoration:none; padding:15px 0; border-bottom:1px solid var(--line); } .mobile-menu__foot { margin-top:34px; display:flex; flex-direction:column; gap:18px; } .mobile-menu__resume { font-family:var(--font-mono); font-size:13px; color:var(--accent); text-decoration:none; letter-spacing:0.04em; } .mobile-menu__email { font-family:var(--font-mono); font-size:13px; color:var(--muted); text-decoration:none; letter-spacing:0.04em; } .mobile-menu__social { display:flex; gap:22px; margin-top:4px; } .mobile-menu__social a { font-size:13px; color:var(--muted); text-decoration:none; } /* ---- Hero ---------------------------------------------------------------- */ .hero { max-width:var(--maxw); margin:0 auto; padding:104px 48px 56px; position:relative; } .hero__bg { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; } .hero__meta { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:34px; position:relative; z-index:1; } .hero__kicker { font-family:var(--font-mono); font-size:13px; letter-spacing:0.06em; color:var(--accent); text-transform:uppercase; } .hero__loc { font-family:var(--font-mono); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; text-align:right; } .hero__name { font-family:var(--font-serif); font-size:118px; line-height:0.92; font-weight:400; letter-spacing:-0.025em; margin:0; transition:transform .3s ease-out; animation:heroIn 1s cubic-bezier(.2,.7,.2,1) both; position:relative; z-index:1; } .hero__cta { display:flex; justify-content:space-between; align-items:flex-end; gap:56px; margin-top:42px; flex-wrap:wrap; position:relative; z-index:1; } .hero__lead { max-width:620px; font-size:21px; line-height:1.6; color:var(--muted); margin:0; } .hero__actions { display:flex; gap:16px; align-items:center; } .hero__hello { display:block; color:var(--accent); text-transform:none; font-size:13px; letter-spacing:0; } .hero__clock { display:block; margin-top:5px; } /* ---- Marquee ------------------------------------------------------------- */ .marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 0; } .marquee__track { display:flex; width:max-content; animation:hkmarq 32s linear infinite; font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:0.05em; color:var(--faint); } .marquee__group { display:flex; gap:28px; padding-right:28px; } /* ---- Stats --------------------------------------------------------------- */ .stats { max-width:var(--maxw); margin:0 auto; padding:0 48px; } .stats__grid { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--line); } .stat { padding:40px 0; } .stat:not(:first-child) { border-left:1px solid var(--line); padding-left:32px; } .stat__num { font-family:var(--font-serif); font-size:56px; font-weight:400; line-height:1; } .stat__label { font-size:12px; color:var(--muted); margin-top:8px; letter-spacing:0.02em; } /* ---- Credibility row ----------------------------------------------------- */ .cred { max-width:var(--maxw); margin:0 auto; padding:50px 48px; border-bottom:1px solid var(--line); } .cred__inner { display:flex; align-items:center; gap:40px; flex-wrap:wrap; } .cred__label { font-family:var(--font-mono); font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:0.06em; white-space:nowrap; } .cred__row { display:flex; align-items:center; gap:38px; flex-wrap:wrap; flex:1; } .cred__name { font-family:var(--font-serif); font-size:25px; font-weight:500; color:var(--muted); transition:color .3s; cursor:default; } .cred__name:hover { color:var(--accent); } /* ---- Generic section ----------------------------------------------------- */ .section { max-width:var(--maxw); margin:0 auto; padding:96px 48px; border-bottom:1px solid var(--line); } .eyebrow { font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:0.06em; margin-bottom:14px; } .section__title { font-family:var(--font-serif); font-size:46px; font-weight:400; letter-spacing:-0.02em; margin:0; } .section__head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:56px; } .section__aside { font-family:var(--font-serif); font-style:italic; font-size:17px; color:var(--muted); } /* ---- About --------------------------------------------------------------- */ .about-grid { display:grid; grid-template-columns:300px 1fr; gap:64px; } .about__title { margin:0 0 28px; line-height:1.05; } .about__based { font-family:var(--font-mono); font-size:12px; color:var(--muted); line-height:1.9; text-transform:uppercase; letter-spacing:0.03em; } .about-lead { font-size:21px; line-height:1.65; color:var(--text2); margin:0 0 22px; } .about__p { font-size:16px; line-height:1.75; color:var(--muted); margin:0 0 18px; } .about__p--last { margin-bottom:40px; } .pair { display:grid; grid-template-columns:1fr 1fr; gap:36px; } .label-mono { font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px; } .label-mono--accent { color:var(--accent); } .about__ai { margin-top:38px; } .about__ai-p { font-size:15px; line-height:1.65; color:var(--muted); margin:0 0 16px; max-width:560px; } /* ---- Systems map (desktop) ----------------------------------------------- An animated graph: stack → work → domains. A draws the bezier edges + flowing particles; hovering a node lights its whole connected thread (BFS) via inline styles set in js. Static fallback under prefers-reduced-motion (see js/site.js). */ .sm-desktop { display:block; } .sm-mobile { display:none; } .sm-map { position:relative; height:600px; border:1px solid var(--line2); border-radius:16px; overflow:hidden; background:radial-gradient(120% 120% at 50% 0%, rgba(224,122,58,0.06), transparent 55%), var(--bg2); } .sm-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; } .sm-colhead { position:absolute; top:20px; transform:translateX(-50%); font-family:var(--font-mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.09em; z-index:2; } .sm-hint { font-family:var(--font-serif); font-style:italic; font-size:16px; color:var(--faint); } .sm-node { appearance:none; margin:0; position:absolute; transform:translate(-50%,-50%); white-space:nowrap; z-index:2; cursor:default; } .sm-node--stack { font-family:var(--font-mono); font-size:12px; color:var(--text2); background:var(--bg); border:1px solid var(--line2); border-radius:999px; padding:6px 13px; transition:opacity .25s,border-color .25s; } .sm-node--company { font-family:var(--font-serif); font-size:15px; color:var(--text); background:var(--bg); border:1px solid var(--line2); border-radius:999px; padding:9px 18px; cursor:pointer; transition:opacity .25s,border-color .25s; } .sm-node--indie { padding:9px 18px 9px 14px; cursor:pointer; } .sm-node--domain { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); background:transparent; border:1px dashed var(--line2); border-radius:6px; padding:6px 11px; transition:opacity .25s,border-color .25s,color .25s; } .sm-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:8px; vertical-align:middle; } .sm-legend { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:0.06em; } .sm-legend .sm-dot { margin-right:0; } .sm-map .sm-legend { position:absolute; left:24px; bottom:16px; z-index:2; } /* Systems map (mobile): tap a node to trace its whole thread; spines + a "Thread" summary make the connection legible without the canvas. */ .sm-mobile { flex-direction:column; gap:0; } .sm-mobile__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; } .sm-mobile__hint { font-family:var(--font-serif); font-style:italic; font-size:15px; color:var(--muted); } .sm-mobile__reset { appearance:none; margin:0; flex-shrink:0; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color:var(--accent); background:transparent; border:1px solid var(--line2); border-radius:999px; padding:7px 14px; cursor:pointer; } .sm-mobile__group-label { font-family:var(--font-mono); font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:13px; } .sm-spine { width:1px; height:24px; background:var(--line2); margin:15px 0 15px 14px; transition:background .3s; } .sm-spine.is-active { background:var(--accent); } .smm { appearance:none; margin:0; cursor:pointer; background:var(--bg2); border:1px solid var(--line2); border-radius:999px; transition:opacity .25s, border-color .25s, box-shadow .25s; } .smm--stack { font-family:var(--font-mono); font-size:12px; color:var(--text2); padding:8px 14px; } .smm--company { font-family:var(--font-serif); font-size:15px; color:var(--text); padding:9px 17px; } .smm--indie { padding:9px 17px 9px 14px; } .smm--domain { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); background:transparent; border:1px dashed var(--line2); border-radius:6px; padding:8px 12px; } .smm .sm-dot { margin-right:7px; } /* trace states: every node in the tapped node's thread lights up; rest recede */ .smm.sm-linked { border-color:var(--accent); box-shadow:0 4px 16px rgba(224,122,58,0.22); } .smm.sm-dim { opacity:0.2; } .sm-thread { margin-top:0; opacity:0; max-height:0; overflow:hidden; border:1px solid var(--line2); border-radius:12px; background:var(--bg2); padding:0 16px; transition:opacity .35s ease, max-height .4s ease, margin-top .35s ease; } .sm-thread.is-open { opacity:1; max-height:260px; margin-top:22px; } .sm-thread__label { font-family:var(--font-mono); font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); padding-top:15px; } .sm-thread__text { font-family:var(--font-serif); font-size:15.5px; line-height:1.55; color:var(--text2); padding:7px 0 15px; } .sm-legend--mobile { margin-top:20px; } /* ---- Experience ---------------------------------------------------------- */ .exp-row { display:grid; grid-template-columns:240px 1fr; gap:48px; padding:36px 0; border-top:1px solid var(--line); } .exp-row--last { border-bottom:1px solid var(--line); } .exp__meta { font-family:var(--font-mono); font-size:12px; color:var(--muted); line-height:1.7; } .exp__meta .faint { color:var(--faint); } .exp__badge { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10.5px; color:var(--accent); text-transform:uppercase; letter-spacing:0.05em; border:1px solid var(--line2); border-radius:999px; padding:5px 11px; margin-bottom:16px; } .exp__badge .status-dot { width:6px; height:6px; box-shadow:none; } .exp__role-title { font-family:var(--font-serif); font-size:28px; font-weight:500; margin:0 0 4px; } .exp__role { font-size:14px; color:var(--accent); font-weight:600; margin-bottom:18px; } .exp__list { list-style:none; padding:0; margin:0 0 18px; display:flex; flex-direction:column; gap:11px; } .exp__list li { font-size:15px; line-height:1.6; color:var(--muted); padding-left:20px; position:relative; } .exp__list li::before { content:"—"; position:absolute; left:0; color:var(--accent); } .eduline { border:1px solid var(--line); border-radius:12px; padding:28px 30px; } .eduline__title { font-family:var(--font-serif); font-size:23px; font-weight:500; margin:0 0 4px; } .eduline__sub { font-size:14px; color:var(--muted); } .pair--mt { margin-top:40px; } /* ---- Independent cards --------------------------------------------------- */ .card { border:1px solid var(--line2); border-radius:16px; padding:36px; background:linear-gradient(180deg,rgba(224,122,58,0.05),transparent); } .card:hover { border-color:var(--accent); } .card__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; } .card__badge { font-family:var(--font-mono); font-size:10.5px; color:var(--accent); text-transform:uppercase; letter-spacing:0.05em; border:1px solid var(--line2); border-radius:999px; padding:5px 12px; } .card__meta { font-family:var(--font-mono); font-size:12px; color:var(--faint); } .card__title { font-family:var(--font-serif); font-size:30px; font-weight:500; margin:0 0 14px; } .card__desc { font-size:15.5px; line-height:1.65; color:var(--muted); margin:0 0 26px; } .card__link { font-size:14px; font-weight:600; color:var(--text); text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:2px; } .card__link:hover { color:var(--accent); } /* ---- Selected work ------------------------------------------------------- */ .work-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; } .work-card__frame { border:1px solid var(--line2); border-radius:12px; overflow:hidden; transition:border-color 0.3s; } .work-card:hover .work-card__frame { border-color:var(--accent); } .browser-bar { display:flex; align-items:center; gap:6px; padding:10px 15px; background:var(--bg2); border-bottom:1px solid var(--line2); } .browser-bar i { width:9px; height:9px; border-radius:50%; background:var(--dot); display:inline-block; } .browser-bar__url { margin-left:8px; font-family:var(--font-mono); font-size:10.5px; color:var(--faint); } .work-card__img { display:block; width:100%; height:188px; object-fit:cover; object-position:center top; } .work-card__body { text-decoration:none; color:inherit; display:block; } .work-card__body:hover { color:var(--accent); } .work-card__row { display:flex; justify-content:space-between; align-items:baseline; margin-top:18px; } .work-card__name { font-family:var(--font-serif); font-size:26px; font-weight:500; } .work-card__idx { font-family:var(--font-serif); font-style:italic; font-size:14px; color:var(--accent); } .work-card__desc { font-size:14.5px; color:var(--muted); line-height:1.55; margin:8px 0 0; } .more { margin-top:64px; } .more__label { font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; } .more-list a { display:flex; align-items:center; justify-content:space-between; padding:22px 4px; border-top:1px solid var(--line); text-decoration:none; color:inherit; transition:padding-left .25s ease; } .more-list a:last-child { border-bottom:1px solid var(--line); } .more-list a:hover { padding-left:14px; } .more-list__name { font-family:var(--font-serif); font-size:22px; font-weight:500; } .more-list__meta { display:flex; align-items:center; gap:20px; } .more-list__tag { font-size:13px; color:var(--faint); } /* ---- Contact ------------------------------------------------------------- */ .contact { max-width:var(--maxw); margin:0 auto; padding:120px 48px 80px; } .contact__title { font-family:var(--font-serif); font-size:84px; font-weight:400; letter-spacing:-0.025em; line-height:0.98; margin:0 0 36px; } .contact__lead { font-size:20px; line-height:1.6; color:var(--muted); max-width:560px; margin:0 0 44px; } .contact__email { display:inline-flex; align-items:center; gap:16px; font-family:var(--font-serif); font-size:34px; font-weight:500; color:var(--text); text-decoration:none; border-bottom:1.5px solid var(--line2); padding-bottom:8px; } .contact__email:hover { border-color:var(--accent); color:var(--accent); } /* ---- Footer -------------------------------------------------------------- */ .footer { border-top:1px solid var(--line); } .footer__inner { max-width:var(--maxw); margin:0 auto; padding:36px 48px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; } .footer__copy { font-family:var(--font-mono); font-size:12px; color:var(--faint); } .footer__social { display:flex; gap:26px; } .footer__social a { font-size:13px; color:var(--muted); text-decoration:none; } .footer__social a:hover { color:var(--accent); } .footer__top { font-family:var(--font-mono); font-size:12px; color:var(--faint); text-decoration:none; } .footer__top:hover { color:var(--accent); } /* ---- Command palette (⌘K) ----------------------------------------------- */ .cmdk { position:fixed; inset:0; z-index:200; display:none; align-items:flex-start; justify-content:center; background:rgba(0,0,0,0.45); backdrop-filter:blur(4px); opacity:0; transition:opacity .2s; } .cmdk__box { margin-top:13vh; width:min(560px,92vw); background:var(--bg2); border:1px solid var(--line2); border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,0.55); overflow:hidden; transform:translateY(10px); transition:transform .2s; } .cmdk__head { display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line2); } .cmdk__hint { font-family:var(--font-mono); font-size:12px; color:var(--accent); } .cmdk__input { flex:1; background:transparent; border:none; outline:none; color:var(--text); font-family:var(--font-sans); font-size:15px; } .cmdk__esc { font-family:var(--font-mono); font-size:10px; color:var(--faint); border:1px solid var(--line2); border-radius:4px; padding:2px 6px; } .cmdk__list { max-height:344px; overflow-y:auto; padding:8px; } .cmdk__item { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--text); } .cmdk__item-kbd { font-family:var(--font-mono); font-size:10px; color:var(--faint); } /* =========================================================================== Responsive =========================================================================== */ @media (max-width: 900px) { .nav__links, .nav__avail, .nav__cmdk { display:none !important; } .nav__burger { display:flex !important; } .nav__inner { padding-left:22px; padding-right:22px; } .hero { padding:90px 22px 46px; } .stats { padding-left:22px; padding-right:22px; } .cred { padding:40px 22px; } .contact { padding:78px 22px 56px; } .section { padding:66px 22px; } .footer__inner { padding-left:22px; padding-right:22px; } .about-grid { grid-template-columns:1fr; gap:30px; } .exp-row { grid-template-columns:1fr; gap:14px; } .pair, .work-grid { grid-template-columns:1fr; } .sm-desktop { display:none !important; } .sm-mobile { display:flex !important; } .sm-hint { display:none; } } @media (max-width: 600px) { .hero__name { font-size:54px; } .hero__meta { flex-direction:column; align-items:flex-start; gap:12px; } .hero__loc { text-align:left; } .hero__lead { font-size:17px; } .section { padding:54px 20px; } .hero { padding:82px 20px 40px; } .section__title { font-size:31px; } .about-lead { font-size:18px; } .cred__name { font-size:19px; } .cred__row { gap:16px 22px; } .card__title { font-size:25px; } .card { padding:26px; } .stats__grid { grid-template-columns:1fr 1fr; } .stat__num { font-size:40px; } .stat:not(:first-child) { border-left:none; padding-left:0; } .stat { padding-top:26px; padding-bottom:26px; } .more-list a { flex-direction:column; align-items:flex-start; gap:7px; } .more-list__name { font-size:18px; } .more-list__meta { width:100%; justify-content:space-between; } .more-list__tag { font-size:12px; } .contact__title { font-size:46px; line-height:1.0; } .contact__email { font-size:21px; word-break:break-word; } .footer__inner { flex-direction:column; align-items:flex-start; gap:14px; } } /* =========================================================================== Résumé page — a fixed "printed document" look (theme-independent). Uses its own warm-paper palette rather than the site tokens. =========================================================================== */ .resume-page { min-height:100vh; background:radial-gradient(120% 80% at 50% 0%, rgba(224,122,58,0.08), transparent 55%), #15100a; padding:32px 24px 80px; font-family:var(--font-sans); } .resume-bar { max-width:820px; margin:0 auto 24px; display:flex; align-items:center; justify-content:space-between; } .resume-bar__back { font-family:var(--font-mono); font-size:12px; color:#9a8c72; text-decoration:none; letter-spacing:0.03em; } .resume-bar__back:hover { color:#e07a3a; } .resume-bar__pdf { font-family:var(--font-mono); font-size:12px; color:#15100a; background:#e07a3a; border:none; border-radius:8px; padding:10px 18px; cursor:pointer; letter-spacing:0.03em; font-weight:600; text-decoration:none; display:inline-block; } .resume-bar__pdf:hover { opacity:0.9; } .resume-sheet { max-width:820px; margin:0 auto; background:#fbfaf6; color:#1c1611; border-radius:6px; box-shadow:0 24px 70px rgba(0,0,0,0.4); padding:60px 64px; } .resume-head { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:26px; margin-bottom:32px; gap:24px; position:relative; } .resume-head::after { content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#1c1611; transform-origin:left; transition:transform 1.4s cubic-bezier(.16,1,.3,1) .2s; } .resume-head__name { font-family:var(--font-serif); font-size:42px; font-weight:600; letter-spacing:-0.02em; margin:0 0 6px; } .resume-head__name .dot { color:#c2410c; } .resume-head__role { font-size:15px; color:#6b5e4a; font-weight:500; } .resume-head__contact { font-family:var(--font-mono); font-size:11.5px; color:#6b5e4a; line-height:1.85; text-align:right; white-space:nowrap; } .resume-summary { font-size:15.5px; line-height:1.6; color:#3d3327; margin:0 0 34px; max-width:660px; } .resume-grid { display:grid; grid-template-columns:1fr 2.1fr; gap:44px; } .resume-aside { display:flex; flex-direction:column; gap:28px; min-width:0; } .resume-main { display:flex; flex-direction:column; gap:26px; min-width:0; } .resume-label { font-family:var(--font-mono); font-size:10.5px; color:#c2410c; text-transform:uppercase; letter-spacing:0.07em; border-bottom:1px solid #e2d8c6; padding-bottom:7px; } .resume-aside .resume-label { margin-bottom:12px; } .resume-label--mt { margin-top:6px; } .resume-aside__list { font-size:13.5px; line-height:1.95; color:#3d3327; } .resume-aside__title { font-size:14px; font-weight:600; color:#1c1611; } .resume-aside__sub { font-size:12.5px; color:#6b5e4a; margin-top:2px; } .resume-skill { font-size:12.5px; line-height:1.55; color:#3d3327; margin-top:11px; } .resume-skill:first-of-type { margin-top:0; } .resume-skill__cat { display:block; font-size:12px; font-weight:600; color:#1c1611; margin-bottom:1px; } .resume-job__head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; } .resume-job__title { font-family:var(--font-serif); font-size:19px; font-weight:600; margin:0; } .resume-job__title--sm { font-size:18px; } .resume-job__title .muted { font-weight:400; color:#6b5e4a; font-size:14px; } .resume-job__date { font-family:var(--font-mono); font-size:11px; color:#6b5e4a; white-space:nowrap; } .resume-job__role { font-size:13px; color:#c2410c; font-weight:600; margin:3px 0 9px; } .resume-job__list { margin:0; padding-left:17px; font-size:13.5px; line-height:1.55; color:#3d3327; } .resume-job__desc { margin:6px 0 0; font-size:13.5px; line-height:1.55; color:#3d3327; } .resume-os-note { font-family:var(--font-mono); font-size:11.5px; color:#6b5e4a; margin:-12px 0 0; } .resume-stack { font-family:var(--font-mono); font-size:10.5px; color:#6b5e4a; letter-spacing:0.03em; margin-top:6px; } .resume-link { color:inherit; text-decoration:none; border-bottom:1px solid #d8cdb8; } .resume-link:hover { border-color:#c2410c; } @media (max-width: 680px) { .resume-sheet { padding:34px 22px; } .resume-head { flex-direction:column; gap:14px; } .resume-head__contact { text-align:left; } .resume-head__name { font-size:34px; } .resume-grid { grid-template-columns:1fr; gap:30px; } /* stack title/date so long titles never push the date off-screen */ .resume-job__head { flex-direction:column; align-items:flex-start; gap:2px; } } @media print { .noprint { display:none !important; } html, body { background:#fff !important; } .resume-page { background:#fff !important; padding:0 !important; } .resume-sheet { box-shadow:none !important; margin:0 !important; max-width:none !important; width:100% !important; border-radius:0 !important; } /* safety: never print a blank slot if a section hasn't been scrolled into view yet */ .anim-ready [data-animate], .anim-ready [data-stagger] > * { opacity:1 !important; transform:none !important; filter:none !important; } .anim-ready .resume-head::after { transform:scaleX(1) !important; } .anim-ready .resume-head__name .dot { opacity:1 !important; transform:none !important; } @page { margin:13mm; } } /* =========================================================================== AutoInspectPro architecture page — uses the shared theme tokens. =========================================================================== */ @keyframes apIn { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } } .ap-page { color:var(--text); font-family:var(--font-sans); min-height:100vh; background:radial-gradient(120% 70% at 50% -10%, rgba(224,122,58,0.10), transparent 55%); } .ap-nav { position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid var(--line); } .ap-nav__inner { max-width:900px; margin:0 auto; padding:0 32px; height:66px; display:flex; align-items:center; justify-content:space-between; } .ap-nav__back { font-family:var(--font-mono); font-size:12px; color:var(--muted); text-decoration:none; letter-spacing:0.03em; } .ap-nav__back:hover { color:var(--accent); } .ap-nav__title { font-family:var(--font-mono); font-size:11px; color:var(--faint); text-transform:uppercase; letter-spacing:0.07em; } .ap-hero { max-width:900px; margin:0 auto; padding:96px 32px 48px; } .ap-hero__kicker { font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.06em; color:var(--accent); text-transform:uppercase; margin-bottom:26px; animation:apIn .7s ease both; } .ap-h1 { font-family:var(--font-serif); font-size:82px; line-height:0.96; font-weight:400; letter-spacing:-0.025em; margin:0 0 26px; animation:apIn .8s ease both; } .ap-hero__lead { max-width:600px; font-size:20px; line-height:1.6; color:var(--muted); margin:0 0 30px; animation:apIn .9s ease both; } .ap-hero__tags { display:flex; flex-wrap:wrap; gap:10px; animation:apIn 1s ease both; } .ap-pill { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.05em; border:1px solid var(--line2); border-radius:999px; padding:7px 14px; color:var(--muted); } .ap-pill--accent { color:var(--accent); } .ap-sec { max-width:900px; margin:0 auto; padding:40px 32px 20px; } .ap-sec--caps { padding:60px 32px 40px; } .ap-eyebrow { font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:10px; } .ap-h2 { font-family:var(--font-serif); font-size:34px; font-weight:400; letter-spacing:-0.02em; margin:0 0 36px; } .ap-stack { max-width:680px; margin:0 auto; display:flex; flex-direction:column; align-items:stretch; } .ap-layer { display:flex; gap:24px; align-items:flex-start; border:1px solid var(--line2); border-radius:16px; padding:26px 28px; background:linear-gradient(180deg,rgba(224,122,58,0.04),transparent); transition:border-color .3s; } .ap-layer:hover { border-color:var(--accent); } .ap-layer__label { width:76px; flex-shrink:0; font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--faint); } .ap-layer__num { color:var(--accent); font-size:13px; margin-bottom:5px; } .ap-layer__body { flex:1; } .ap-layer__title { font-family:var(--font-serif); font-size:24px; font-weight:500; margin:0 0 6px; } .ap-layer__desc { font-size:14.5px; line-height:1.55; color:var(--muted); margin:0; } .ap-layer__desc--mb { margin-bottom:14px; } .ap-connector { display:flex; flex-direction:column; align-items:center; } .ap-connector__line { width:1px; height:18px; background:var(--line2); } .ap-connector__pill { font-family:var(--font-mono); font-size:10px; color:var(--faint); text-transform:uppercase; letter-spacing:0.06em; border:1px solid var(--line2); border-radius:999px; padding:4px 11px; background:var(--bg); } .ap-runs { margin-top:22px; border:1px dashed var(--line2); border-radius:16px; padding:22px 26px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .ap-runs__label { font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--faint); white-space:nowrap; } .ap-runs__tags { display:flex; flex-wrap:wrap; gap:10px; flex:1; } .ap-caps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .ap-cap { border:1px solid var(--line); border-radius:14px; padding:26px; } .ap-cap__num { font-family:var(--font-mono); font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:14px; } .ap-cap__title { font-family:var(--font-serif); font-size:21px; font-weight:500; margin:0 0 8px; } .ap-cap__desc { font-size:14px; line-height:1.6; color:var(--muted); margin:0; } .ap-footer { border-top:1px solid var(--line); margin-top:40px; } .ap-footer__inner { max-width:900px; margin:0 auto; padding:36px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; } .ap-footer__links { display:flex; align-items:center; gap:24px; flex-wrap:wrap; } .ap-footer__link { font-family:var(--font-mono); font-size:12px; color:var(--muted); text-decoration:none; letter-spacing:0.03em; } .ap-footer__link:hover { color:var(--accent); } .ap-footer__cta { font-family:var(--font-serif); font-size:18px; font-weight:500; color:var(--text); text-decoration:none; border-bottom:1.5px solid var(--accent); padding-bottom:3px; } .ap-footer__cta:hover { color:var(--accent); } @media (max-width: 760px) { .ap-nav__inner, .ap-hero, .ap-sec, .ap-footer__inner { padding-left:22px; padding-right:22px; } .ap-hero { padding-top:84px; padding-bottom:40px; } .ap-h1 { font-size:52px; } .ap-caps { grid-template-columns:1fr; } .ap-layer { gap:16px; padding:20px; } .ap-layer__label { width:60px; } .ap-footer__inner { flex-direction:column; align-items:flex-start; gap:16px; } .ap-nav__title { display:none; } } /* =========================================================================== Generic section reveal — "the document typesets itself". Progressive enhancement: content is fully visible by default; the hidden start-state only applies once js adds .anim-ready to , and only when the visitor accepts motion. js sets .is-in (and per-item stagger delays). Reusable on any page via [data-animate] / [data-stagger]; the résumé uses it. =========================================================================== */ @media (prefers-reduced-motion: no-preference) { .anim-ready [data-animate], .anim-ready [data-stagger] > * { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), filter 1.1s cubic-bezier(.16,1,.3,1); will-change: opacity, transform, filter; } .anim-ready [data-animate="fade"] { transform: none; filter: none; } .anim-ready [data-animate="sheet"] { transform: translateY(30px) scale(.99); filter: none; box-shadow: 0 6px 24px rgba(0,0,0,0.18); transition: opacity 1.5s cubic-bezier(.16,1,.3,1), transform 1.5s cubic-bezier(.16,1,.3,1), box-shadow 1.5s ease; } .anim-ready [data-animate].is-in, .anim-ready [data-stagger] > .is-in { opacity: 1; transform: none; filter: none; } .anim-ready [data-animate="sheet"].is-in { box-shadow: 0 24px 70px rgba(0,0,0,0.4); } /* Signature 1 — the heading rule draws left-to-right */ .anim-ready .resume-head::after { transform: scaleX(0); } .anim-ready .resume-head.is-in::after { transform: scaleX(1); } /* Signature 2 — the accent period settles in last */ .anim-ready .resume-head__name .dot { display: inline-block; opacity: 0; transform: scale(.4); transform-origin: left bottom; transition: opacity .8s ease .5s, transform 1s cubic-bezier(.16,1,.3,1) .5s; } .anim-ready .resume-head.is-in .resume-head__name .dot { opacity: 1; transform: scale(1); } /* settle: drop will-change once revealed so it doesn't pin layers */ .anim-ready [data-animate].is-in, .anim-ready [data-stagger] > .is-in { will-change: auto; } }