/* ============================================================ Austin Li — portfolio Palette: bg #f1eeeb · body #5C5C5C · headings #303030 · accent #167ACC ============================================================ */ /* Fonts are loaded with a in each page's so they don't block this stylesheet. Everything degrades to the system sans if they fail. */ :root { --bg: #f1eeeb; --text: #5C5C5C; --head: #303030; --accent: #167ACC; --rule: rgba(48,48,48,.10); --soft: rgba(48,48,48,.045); --content: 860px; /* centred text column */ --wide: 1160px; /* header + gallery outer bound */ --gutter: 28px; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --ease: cubic-bezier(.22,.61,.36,1); --header-h: 116px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; font-weight: 400; line-height: 1.75; letter-spacing: .002em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body.modal-open { overflow: hidden; } h1, h2, h3, h4 { font-family: var(--display); color: var(--head); font-weight: 600; letter-spacing: -.02em; margin: 0; } p { margin: 0 0 1.15em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; } img, video, canvas { display: block; max-width: 100%; height: auto; } ::selection { background: rgba(22,122,204,.18); color: var(--head); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } /* ------------------------------------------------------------ layout */ .wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); } .col { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--head); color: var(--bg); padding: 10px 18px; border-radius: 0 0 6px 0; z-index: 200; } .skip-link:focus { left: 0; } /* ------------------------------------------------------------ header */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 90; padding-block: 30px 22px; background: linear-gradient(to bottom, var(--bg) 55%, rgba(241,238,235,0)); transition: opacity .5s var(--ease), transform .5s var(--ease); will-change: opacity, transform; } .site-header.is-hidden { opacity: 0; transform: translateY(-18px); pointer-events: none; } .site-header__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; } .brand { display: inline-block; } .brand__name { font-family: var(--display); font-size: clamp(1.4rem, 2.5vw, 1.95rem); font-weight: 600; line-height: 1.05; letter-spacing: .13em; color: var(--head); text-transform: uppercase; transition: color .35s var(--ease); } .brand__role { margin-top: .55em; font-size: clamp(.58rem, .95vw, .68rem); font-weight: 500; letter-spacing: .26em; line-height: 1.4; color: var(--text); text-transform: uppercase; transition: color .35s var(--ease); } .brand:hover .brand__role { color: var(--head); } .nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 26px; padding-top: 6px; } .nav a, .nav button { font-family: var(--sans); font-size: .82rem; font-weight: 500; letter-spacing: .04em; color: var(--text); background: none; border: 0; padding: 4px 0; cursor: pointer; position: relative; transition: color .35s var(--ease); } .nav a::after, .nav button::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--head); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .nav a:hover, .nav button:hover, .nav a[aria-current="page"] { color: var(--head); } .nav a:hover::after, .nav button:hover::after { transform: scaleX(1); } /* ------------------------------------------------------------ hero */ .hero { padding-top: calc(var(--header-h) + 6vh); padding-bottom: clamp(60px, 11vh, 130px); } .hero__grid { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: clamp(32px, 5vw, 70px); align-items: center; } .hero__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; filter: saturate(.96); } .hero__title { font-size: clamp(2.3rem, 5.6vw, 4.3rem); font-weight: 600; line-height: 1.04; letter-spacing: -.035em; text-align: center; text-wrap: balance; } .hero__lede { margin: clamp(20px, 2.6vw, 34px) auto 0; font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.7; max-width: 32em; text-align: center; text-wrap: pretty; } /* ------------------------------------------------------------ reveal */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--ease), transform .85s var(--ease); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } /* ------------------------------------------------------------ projects */ .projects { position: relative; padding-bottom: clamp(80px, 12vh, 150px); } .projects__head { padding-block: clamp(40px, 8vh, 90px) clamp(30px, 6vh, 70px); } .projects__head h2 { font-size: clamp(2.9rem, 9.5vw, 7rem); font-weight: 600; letter-spacing: -.045em; line-height: .95; } /* --- the timeline rail ------------------------------------- */ .rail { position: absolute; top: 0; bottom: 0; left: max(20px, calc(50% - (var(--content) / 2) - 74px)); width: 2px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .8s var(--ease); } .rail.is-live { opacity: 1; } .rail__track { position: absolute; inset: 0; background: rgba(22,122,204,.13); border-radius: 2px; } .rail__fill { position: absolute; top: 0; left: 0; right: 0; height: 0; background: var(--accent); border-radius: 2px; } .rail__fill::after { /* soft leading glow */ content: ''; position: absolute; left: 50%; bottom: -1px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--accent); opacity: .28; filter: blur(2px); } .dot { position: absolute; left: 50%; width: 34px; height: 34px; margin-left: -17px; margin-top: -17px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--display); font-size: .82rem; font-weight: 600; letter-spacing: .01em; display: grid; place-items: center; transform: scale(0); opacity: 0; transition: transform .62s cubic-bezier(.34,1.46,.5,1), opacity .4s var(--ease); } .dot.is-on { transform: scale(1); opacity: 1; } /* --- project blocks ---------------------------------------- */ .project { padding-block: clamp(46px, 8vh, 92px) clamp(60px, 10vh, 120px); } .project + .project { border-top: 1px solid var(--rule); } .project__head { margin-bottom: clamp(26px, 4vw, 46px); } .project__eyebrow { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; color: var(--accent); text-transform: uppercase; margin-bottom: .9em; } .project__title { font-size: clamp(1.7rem, 3.7vw, 2.75rem); font-weight: 600; line-height: 1.12; letter-spacing: -.028em; text-wrap: balance; opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .project__title.is-on { opacity: 1; transform: none; } .section-title { font-family: var(--display); font-size: 1.22rem; font-weight: 600; letter-spacing: .085em; text-transform: uppercase; color: var(--head); margin: clamp(38px, 5vw, 58px) 0 1em; } .section-title:first-child { margin-top: 0; } .lead { font-size: 1.12rem; font-weight: 500; line-height: 1.72; color: var(--head); } /* --- media ------------------------------------------------- */ figure { margin: clamp(26px, 3.6vw, 42px) 0; } figure img, figure video { width: 100%; border-radius: 3px; } figcaption { margin-top: .85em; font-size: .82rem; line-height: 1.6; color: var(--text); letter-spacing: .01em; } .media-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin: clamp(26px, 3.6vw, 42px) 0; } .media-pair figure { margin: 0; } /* stacked full-width media: tight, no stray figure margins */ .media-stack { display: grid; gap: clamp(8px, 1vw, 14px); margin: clamp(26px, 3.6vw, 42px) 0; } .media-stack figure { margin: 0; } /* --- Step 1 / Step 2, side by side ------------------------------------- */ .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 46px); margin-top: clamp(24px, 3vw, 34px); } .step { display: flex; flex-direction: column; } .step figure { margin: clamp(18px, 2.4vw, 26px) 0 0; margin-top: auto; } .step > p:last-of-type { margin-bottom: 0; } .step__no { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; color: var(--head); text-align: left; margin-bottom: .6em; } .step p { font-size: .98rem; } /* --- a row whose items keep their own aspect but share a height --------- */ .media-row { display: flex; align-items: flex-start; gap: clamp(16px, 2.4vw, 28px); margin: clamp(26px, 3.6vw, 42px) 0; } .media-row__cell { min-width: 0; } .media-row figure { margin: 0; } /* --- a diagram that shouldn't be blown up ------------------------------- */ figure.figure--narrow { margin-inline: auto; max-width: 640px; } /* --- "In Brief" + dive deeper ------------------------------------------ */ .brief { margin-top: clamp(34px, 4.5vw, 54px); display: grid; grid-template-columns: 2fr 1fr; gap: clamp(22px, 3.5vw, 48px); align-items: center; } .brief__text .section-title { margin: 0 0 .75em; } .brief__action { display: flex; } .dive { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 11px; padding: 18px 24px; border: 1px solid rgba(22,122,204,.34); border-radius: 999px; background: none; color: var(--text); font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: .01em; cursor: pointer; white-space: nowrap; transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease); } .dive:hover { color: var(--head); border-color: rgba(22,122,204,.7); background: rgba(22,122,204,.06); } .dive:active { transform: scale(.985); } .dive svg { flex: none; transition: transform .5s var(--ease); } .dive[aria-expanded="true"] svg { transform: rotate(180deg); } .deep__inner { padding-top: clamp(10px, 1.6vw, 20px); } /* Collapsed only once JS is running, so the content is never trapped. The inner block starts lifted and settles down as the panel grows, so the reveal reads as a slide rather than a fade. */ .js .deep { height: 0; overflow: hidden; transition: height .8s var(--ease); } .js .deep .deep__inner { transform: translateY(-46px); opacity: 0; transition: transform .8s var(--ease), opacity .5s var(--ease); } .js .deep.is-open .deep__inner { transform: none; opacity: 1; } .js .deep.is-done { height: auto; overflow: visible; } /* --- controls on a looping video ---------------------------- */ .video-wrap { position: relative; } .video-tools { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; opacity: 0; transform: translateY(5px); transition: opacity .35s var(--ease), transform .35s var(--ease); } .video-wrap:hover .video-tools, .video-tools:focus-within { opacity: 1; transform: none; } @media (hover: none) { .video-tools { opacity: 1; transform: none; } } .video-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(241,238,235,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--text); font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: color .3s var(--ease), border-color .3s var(--ease); } .video-btn:hover { color: var(--head); border-color: rgba(22,122,204,.5); } .video-btn svg { flex: none; transition: transform .5s var(--ease); } .video-replay:hover svg { transform: rotate(-180deg); } .video-replay.is-spun svg { transform: rotate(-360deg); } .video-speed { min-width: 48px; letter-spacing: .06em; } .video-speed.is-fast { color: var(--accent); border-color: rgba(22,122,204,.55); } /* --- the "skip" bubble ------------------------------------- */ .skip-next { position: fixed; right: clamp(14px, 2.4vw, 34px); top: 50%; transform: translate(26px, -50%) scale(.94); z-index: 70; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border: 1px solid rgba(22,122,204,.28); border-radius: 999px; background: rgba(241,238,235,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--text); font-size: .8rem; font-weight: 500; letter-spacing: .015em; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease); } .skip-next.is-shown { opacity: 1; pointer-events: auto; transform: translate(0, -50%) scale(1); } .skip-next:hover { color: var(--head); border-color: rgba(22,122,204,.6); background: rgba(241,238,235,.95); } .skip-next svg { flex: none; transition: transform .4s var(--ease); } .skip-next:hover svg { transform: translateY(3px); } /* ------------------------------------------------------------ gallery */ .gallery-head { padding-top: calc(var(--header-h) + 7vh); padding-bottom: clamp(30px, 5vh, 56px); } .gallery-head h1 { font-size: clamp(2.6rem, 8vw, 5.4rem); letter-spacing: -.045em; line-height: .98; } .gallery-head p { margin-top: 1em; max-width: 46ch; } .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(74px, 9.2vw, 118px); gap: clamp(10px, 1.3vw, 18px); padding-bottom: clamp(70px, 11vh, 130px); } .tile { position: relative; overflow: hidden; border-radius: 4px; background: var(--soft); display: block; } .tile img { width: 100%; height: 100%; object-fit: cover; transition: opacity .55s var(--ease), transform 1.1s var(--ease); } .tile__label { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; opacity: 0; transition: opacity .5s var(--ease); } .tile__label span { font-family: var(--display); font-size: clamp(1rem, 1.65vw, 1.5rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--head); transform: translateY(9px); transition: transform .55s var(--ease); } .tile:hover img, .tile:focus-visible img { opacity: .06; transform: scale(1.03); } .tile:hover .tile__label, .tile:focus-visible .tile__label { opacity: 1; } .tile:hover .tile__label span, .tile:focus-visible .tile__label span { transform: none; } .t-motor { grid-column: 1 / 5; grid-row: 1 / 4; } .t-cleat { grid-column: 5 / 7; grid-row: 1 / 4; } .t-forc { grid-column: 1 / 3; grid-row: 4 / 6; } .t-pool { grid-column: 3 / 5; grid-row: 4 / 6; } .t-cycloid { grid-column: 5 / 7; grid-row: 4 / 6; } .t-trailer { grid-column: 1 / 7; grid-row: 6 / 9; } /* ------------------------------------------------------------ project page */ .page-project { padding-top: calc(var(--header-h) + 5vh); } .page-project .projects { padding-bottom: clamp(40px, 6vh, 80px); } .page-project .project { padding-top: 0; } .page-project .project + .project { border: 0; } .crumbs { font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: clamp(22px, 3vw, 34px); } .crumbs a { color: var(--text); transition: color .3s var(--ease); } .crumbs a:hover { color: var(--head); } .pager { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--rule); padding-block: clamp(28px, 4vw, 44px); margin-bottom: clamp(50px, 8vh, 100px); font-size: .88rem; } .pager a { color: var(--text); transition: color .3s var(--ease); } .pager a:hover { color: var(--head); } .pager .pager__label { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; opacity: .6; margin-bottom: .5em; } /* ------------------------------------------------------------ 3D viewer */ .cad { position: relative; margin: clamp(26px, 3.6vw, 42px) 0; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: linear-gradient(180deg, #eeebe7, #e6e2de); } .cad__stage { display: block; width: 100%; aspect-ratio: 16 / 10; touch-action: none; cursor: grab; } .cad__stage:active { cursor: grabbing; } .cad__hint { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text); opacity: .62; pointer-events: none; transition: opacity .5s var(--ease); } .cad.is-touched .cad__hint { opacity: 0; } .cad__status { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text); background: var(--bg); transition: opacity .6s var(--ease); } .cad__status.is-gone { opacity: 0; pointer-events: none; } .cad__reset { position: absolute; right: 12px; bottom: 11px; font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text); background: rgba(241,238,235,.75); border: 1px solid var(--rule); border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: color .3s var(--ease), border-color .3s var(--ease); } .cad__reset:hover { color: var(--head); border-color: rgba(22,122,204,.5); } /* ------------------------------------------------------------ contact modal */ .modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; transition: opacity .45s var(--ease), visibility 0s linear .45s; } .modal.is-open { visibility: visible; opacity: 1; transition-delay: 0s; } .modal__scrim { position: absolute; inset: 0; background: rgba(241,238,235,.55); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); transition: backdrop-filter .5s var(--ease), -webkit-backdrop-filter .5s var(--ease); } .modal.is-open .modal__scrim { -webkit-backdrop-filter: blur(16px) saturate(1.05); backdrop-filter: blur(16px) saturate(1.05); } .modal__panel { position: relative; width: min(560px, 100%); background: var(--bg); border: 1px solid var(--rule); border-radius: 6px; padding: clamp(34px, 5vw, 54px) clamp(26px, 4.5vw, 52px) clamp(30px, 4.5vw, 46px); box-shadow: 0 26px 70px -30px rgba(48,48,48,.35); transform: translateY(20px) scale(.975); opacity: 0; transition: transform .55s var(--ease), opacity .45s var(--ease); } .modal.is-open .modal__panel { transform: none; opacity: 1; } .modal__title { font-size: 1.5rem; letter-spacing: -.02em; margin-bottom: 1.4em; } .modal__rows { display: grid; gap: 18px; } .modal__row { display: grid; grid-template-columns: 78px 1fr; align-items: baseline; gap: 14px; } .modal__key { font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; } .modal__val { font-size: 1.02rem; color: var(--head); transition: color .3s var(--ease); } a.modal__val:hover { color: var(--accent); } .modal__note { margin-top: clamp(28px, 4vw, 40px); padding-top: clamp(22px, 3vw, 30px); border-top: 1px solid var(--rule); text-align: center; font-size: .95rem; line-height: 1.7; text-wrap: balance; } .modal__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--text); font-size: 1.1rem; cursor: pointer; transition: color .3s var(--ease), background-color .3s var(--ease); } .modal__close:hover { color: var(--head); background: var(--soft); } /* ------------------------------------------------------------ footer */ .site-footer { border-top: 1px solid var(--rule); padding-block: clamp(38px, 6vh, 62px) clamp(44px, 7vh, 76px); font-size: .84rem; } .site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 30px; } .site-footer a { transition: color .3s var(--ease); } .site-footer a:hover { color: var(--head); } .site-footer nav { display: flex; flex-wrap: wrap; gap: 22px; } /* ------------------------------------------------------------ responsive */ @media (max-width: 1060px) { .rail { left: 20px; } .col, .projects .col { margin-inline: auto; } } @media (max-width: 900px) { :root { --header-h: 104px; --gutter: 22px; } .hero__grid { grid-template-columns: 1fr; gap: 34px; } .hero__photo { max-width: 300px; } .hero__title { text-align: left; } .steps { grid-template-columns: 1fr; } /* below the bento breakpoint every tile gets its cover's own shape, stacked one per row — no gaps, no crops */ .bento { grid-template-columns: 1fr; grid-auto-rows: auto; } .bento .tile { grid-column: 1 / -1 !important; grid-row: auto !important; } .t-motor, .t-trailer { aspect-ratio: 16 / 9; } .t-forc, .t-pool, .t-cycloid, .t-cleat { aspect-ratio: 4 / 3; } .t-cleat img { object-position: center 64%; } } @media (max-width: 700px) { body { font-size: 16px; } .site-header { padding-block: 20px 16px; } .site-header__inner { flex-direction: column; gap: 12px; align-items: flex-start; } .nav { justify-content: flex-start; gap: 4px 18px; padding-top: 0; } .nav a, .nav button { font-size: .76rem; } :root { --header-h: 132px; } /* keep the rail on screen and give the copy room beside it */ .rail { left: 21px; } .dot { width: 28px; height: 28px; margin-left: -14px; margin-top: -14px; font-size: .72rem; } .projects .col { padding-left: 54px; } .skip-next { padding: 11px 16px; font-size: .76rem; background: rgba(241,238,235,.96); box-shadow: 0 8px 26px -14px rgba(48,48,48,.5); } .media-pair { grid-template-columns: 1fr; } .media-row { flex-direction: column; } .media-row__cell { flex: none !important; width: 100%; } .brief { grid-template-columns: 1fr; gap: 22px; } .skip-next { top: auto; bottom: 20px; right: 50%; transform: translate(50%, 20px) scale(.94); } .skip-next.is-shown { transform: translate(50%, 0) scale(1); } .modal__row { grid-template-columns: 1fr; gap: 2px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .reveal, .project__title { opacity: 1 !important; transform: none !important; } .dot { transform: scale(1) !important; opacity: 1 !important; } .js .deep { transition: none; } .js .deep .deep__inner { transform: none !important; opacity: 1 !important; } } @media print { .site-header, .skip-next, .rail, .modal, .cad__reset { display: none !important; } body { background: #fff; } .reveal, .project__title { opacity: 1 !important; transform: none !important; } }