:root { --ink: #f4f6fc; --muted: #9ba5b9; --faint: #667087; --space: #070a14; --panel: #0d1220; --panel-soft: rgba(16, 22, 38, .72); --line: rgba(183, 202, 239, .14); --blue: #9ecbff; --cyan: #7ee2e7; --violet: #a39bff; --display: 'Manrope', sans-serif; --body: 'DM Sans', sans-serif; --mono: 'DM Mono', monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--space); }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(ellipse 72% 45% at 72% -10%, rgba(72, 84, 159, .22), transparent 64%), radial-gradient(ellipse 46% 36% at -10% 42%, rgba(42, 97, 133, .12), transparent 68%), var(--space); font: 400 16px/1.6 var(--body); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .11; z-index: 10; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; } button, input, select { font: inherit; } button { cursor: pointer; } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; } .page-width { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .skip-link { position: fixed; z-index: 100; top: -4rem; left: 1rem; color: #07101e; background: var(--cyan); padding: .65rem 1rem; font-weight: 700; } .skip-link:focus { top: 1rem; }
.site-header { position: relative; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(7, 10, 20, .78); backdrop-filter: blur(18px); } .nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .brand { display: inline-flex; align-items: center; gap: 10px; font: 700 .77rem/1 var(--display); letter-spacing: .1em; } .brand-mark { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(150, 196, 255, .8); color: var(--blue); font: 700 .83rem/1 var(--display); box-shadow: inset 0 0 0 3px rgba(115, 166, 255, .1); } .site-nav { display: flex; align-items: center; gap: 2rem; color: var(--muted); font-size: .9rem; } .site-nav a:not(.nav-cta):hover { color: var(--ink); } .nav-cta { padding: .68rem 1rem; color: #06101d; border-radius: 2px; background: var(--cyan); font-weight: 700; } .nav-cta span { margin-left: .5rem; } .nav-toggle { display: none; border: 0; color: var(--ink); background: transparent; }
.hero { padding-top: clamp(4.5rem, 10vw, 8.6rem); padding-bottom: 4.2rem; } .eyebrow, .section-index, .card-kicker, .detail-meta span, .detail-aside > section > span, .timeline-number { color: var(--blue); font: 500 .68rem/1.4 var(--mono); letter-spacing: .11em; text-transform: uppercase; } .eyebrow { display: flex; align-items: center; gap: .55rem; } .eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px rgba(126, 226, 231, .7); } .hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 2rem; } h1, h2, h3, p { margin-top: 0; } h1, h2 { font-family: var(--display); letter-spacing: -.055em; } h1 { max-width: 780px; margin: .82rem 0 1.4rem; font-size: clamp(3.2rem, 7vw, 6.45rem); font-weight: 700; line-height: .97; } h1 em, h2 em { color: var(--blue); font-style: normal; } .hero > .hero-grid > div > p, .page-intro p, .event-hero > p { max-width: 570px; color: var(--muted); font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.65; } .hero-search { max-width: 610px; min-height: 62px; margin-top: 2rem; display: flex; align-items: center; gap: .85rem; padding: 0 .85rem 0 1.1rem; border: 1px solid rgba(161, 192, 255, .24); background: rgba(14, 20, 37, .76); box-shadow: 0 15px 45px rgba(0, 0, 0, .18); transition: border-color .2s, box-shadow .2s; } .hero-search:focus-within { border-color: rgba(126, 226, 231, .75); box-shadow: 0 15px 45px rgba(0, 0, 0, .18), 0 0 0 4px rgba(126, 226, 231, .08); } .hero-search svg { width: 21px; stroke: var(--cyan); fill: none; stroke-width: 1.75; } .hero-search input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; } .hero-search input::placeholder { color: #7e889d; } kbd { padding: .18rem .42rem; color: var(--faint); border: 1px solid var(--line); font: .72rem var(--mono); }
.hero-signal { position: relative; justify-self: end; width: clamp(185px, 23vw, 270px); aspect-ratio: 1; margin-right: 8%; } .signal-ring { position: absolute; border: 1px solid rgba(158, 203, 255, .2); border-radius: 50%; } .ring-one { inset: 0; animation: spin 30s linear infinite; } .ring-two { inset: 18%; border-style: dashed; animation: spinReverse 20s linear infinite; } .signal-ring::after { content: ''; position: absolute; top: 4%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); } .signal-core { position: absolute; inset: 38%; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #d8eeff, #789ee8 45%, #253567 100%); box-shadow: 0 0 34px rgba(110, 158, 255, .45); } .signal-label { position: absolute; bottom: -15px; left: -38px; color: var(--faint); font: .58rem/1.6 var(--mono); letter-spacing: .12em; }
.telemetry-strip { display: flex; align-items: end; gap: clamp(1.8rem, 6vw, 5rem); margin-top: clamp(3.8rem, 7vw, 6.8rem); padding-top: 1.55rem; border-top: 1px solid var(--line); } .telemetry-strip > div { display: grid; gap: .13rem; } .telemetry-strip b, .event-hero__stats b { font: 600 clamp(1.3rem, 2vw, 1.7rem)/1 var(--display); letter-spacing: -.04em; } .telemetry-strip span, .event-hero__stats span { color: var(--faint); font: .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; } .telemetry-status { margin-left: auto; padding-bottom: .15rem; color: var(--muted) !important; } .telemetry-status i { display: inline-block; width: 6px; height: 6px; margin-right: .5rem; border-radius: 50%; background: #82e7be; box-shadow: 0 0 8px #82e7be; }
.featured, .explore { padding-top: clamp(3.5rem, 7vw, 6.5rem); } .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.9rem; } .section-heading h2 { margin: .35rem 0 0; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.02; } .section-heading p { max-width: 260px; margin: 0; color: var(--muted); font-size: .93rem; } .result-count { padding-bottom: .3rem; color: var(--muted); font: .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; } .featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(20, 28, 48, .8), rgba(11, 15, 28, .9)); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .project-card:hover { transform: translateY(-5px); border-color: rgba(148, 199, 255, .45); box-shadow: 0 19px 38px rgba(0, 0, 0, .25); } .project-card__image { display: block; overflow: hidden; aspect-ratio: 1.57; } .thumbnail-wrap { position: relative; display: block; width: 100%; height: 100%; } .thumbnail-wrap--large { min-height: min(440px, 48vw); } .project-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .project-art { --art1: #1a508a; --art2: #8973d5; position: relative; isolation: isolate; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(circle at 67% 40%, var(--art2), transparent 12%), radial-gradient(ellipse 60% 85% at 5% 112%, var(--art1), transparent 66%), #0c172a; transition: transform .4s ease; } .project-card:hover .project-art { transform: scale(1.045); } .project-art::before { content: ''; position: absolute; inset: 8%; opacity: .9; border: 1px solid rgba(230, 245, 255, .2); transform: skew(-8deg); } .project-art__grid { position: absolute; z-index: -1; inset: 0; opacity: .23; background-image: linear-gradient(rgba(210, 235, 255, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(210, 235, 255, .18) 1px, transparent 1px); background-size: 30px 30px; transform: perspective(150px) rotateX(55deg) scale(1.4) translateY(20%); transform-origin: bottom; } .project-art__orb { position: absolute; width: 34%; aspect-ratio: 1; top: 18%; right: 16%; border: 1px solid rgba(240, 248, 255, .55); border-radius: 50%; box-shadow: inset -12px -10px 20px rgba(8, 14, 35, .4), 0 0 40px color-mix(in srgb, var(--art2), transparent 45%); } .project-art__line { position: absolute; width: 150%; height: 42%; left: -27%; top: 36%; border-top: 1px solid rgba(216, 242, 255, .75); border-radius: 50%; transform: rotate(-18deg); } .project-art__label { position: absolute; left: 8%; bottom: 10%; font: .58rem var(--mono); letter-spacing: .16em; color: rgba(239, 249, 255, .78); } .art-signal { --art1: #123b53; --art2: #75ddd5; } .art-signal .project-art__orb { border-radius: 4px; transform: rotate(45deg); } .art-shelter { --art1: #3a3b89; --art2: #ee9d86; } .art-shelter::before { transform: skew(15deg) rotate(-20deg); } .art-bloom { --art1: #265744; --art2: #c2dc72; } .art-bloom .project-art__orb { border-radius: 50% 50% 50% 8%; } .art-circuit { --art1: #552668; --art2: #e889d6; } .art-circuit .project-art__line { border-radius: 0; transform: rotate(0); top: 50%; } .art-current { --art1: #154c70; --art2: #8cb8ff; } .art-current::before { border-radius: 50%; transform: scale(.7); } .project-card__body { padding: 1.2rem 1.2rem 1rem; } .card-kicker { display: flex; justify-content: space-between; color: var(--faint); } .card-kicker span:first-child { color: var(--cyan); } .project-card h3 { margin: .7rem 0 .45rem; font: 700 1.35rem/1.1 var(--display); letter-spacing: -.035em; } .project-card h3 a:hover { color: var(--blue); } .project-card p { min-height: 3.8em; margin-bottom: 1rem; color: var(--muted); font-size: .9rem; line-height: 1.5; } .tags { display: flex; flex-wrap: wrap; gap: .38rem; } .tags span { padding: .26rem .43rem; color: #b8c9e3; border: 1px solid rgba(156, 191, 231, .14); background: rgba(127, 157, 204, .07); font: .58rem var(--mono); letter-spacing: .06em; text-transform: uppercase; } .project-card__meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: 1.25rem; padding-top: .85rem; border-top: 1px solid var(--line); } .project-card__meta > a { overflow: hidden; color: var(--faint); font: .58rem/1.3 var(--mono); letter-spacing: .04em; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .project-card__meta > a:hover { color: var(--blue); } .mini-crew { display: flex; } .mini-crew span { display: grid; place-items: center; width: 22px; height: 22px; margin-right: -4px; border: 1px solid #3e516f; border-radius: 50%; color: #d6e7ff; background: #17243c; font: 500 .48rem var(--mono); }
.explore { padding-bottom: 8rem; } .explore-controls { display: flex; align-items: end; gap: .7rem; margin-bottom: 1.5rem; padding: 1rem; border: 1px solid var(--line); background: rgba(12, 17, 31, .52); } .filter-select { min-width: 135px; flex: 1; } .filter-select--sort { max-width: 178px; } .filter-select label { display: block; margin-bottom: .3rem; color: var(--faint); font: .58rem var(--mono); letter-spacing: .08em; text-transform: uppercase; } select { width: 100%; color: #dce8fa; border: 0; outline: none; background: transparent; font-size: .82rem; } select option { color: var(--ink); background: #101727; } .clear-filters { padding: .35rem 0; border: 0; color: var(--blue); background: none; font-size: .76rem; } .is-hidden { visibility: hidden; } .project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } .empty-state { grid-column: 1 / -1; display: grid; place-items: center; min-height: 330px; padding: 3rem 1.5rem; border: 1px dashed rgba(158, 203, 255, .28); text-align: center; } .empty-state__icon { color: var(--blue); font: 2.5rem var(--display); } .empty-state h3 { margin: .6rem 0 .2rem; font: 700 1.5rem var(--display); } .empty-state p { max-width: 350px; margin-bottom: 1.2rem; color: var(--muted); }
.site-footer { border-top: 1px solid var(--line); background: rgba(4, 6, 14, .32); } .footer-wrap { min-height: 115px; display: flex; align-items: center; gap: 2rem; } .footer-wrap p { margin: 0; color: var(--muted); font-size: .84rem; } .footer-note { margin-left: auto; color: var(--faint); font: .58rem var(--mono); letter-spacing: .1em; }
.page-intro, .event-hero { padding-top: clamp(4rem, 8vw, 7rem); padding-bottom: 4.8rem; } .page-intro h1, .event-hero h1 { margin: 1rem 0 1.3rem; font-size: clamp(3rem, 6vw, 5.8rem); } .events-list { padding-bottom: 7rem; } .event-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) 85px 44px; align-items: center; gap: 1.2rem; padding: 2.3rem 0; border-top: 1px solid var(--line); } .event-row__number { align-self: start; padding-top: .25rem; color: var(--faint); font: .72rem var(--mono); } .event-row h2 { margin: .35rem 0 .5rem; font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.05; } .event-row h2 a:hover { color: var(--blue); } .event-row p { max-width: 590px; margin: 0; color: var(--muted); } .event-row__stats { text-align: right; } .event-row__stats b { display: block; font: 700 1.8rem/1 var(--display); } .event-row__stats span { color: var(--faint); font: .58rem var(--mono); text-transform: uppercase; } .round-link { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--blue); transition: background .2s; } .round-link:hover { color: #06101d; background: var(--cyan); }
.back-link { display: inline-block; margin-bottom: 2.4rem; color: var(--muted); font: .7rem var(--mono); letter-spacing: .06em; } .back-link:hover { color: var(--cyan); } .detail-hero { padding-top: 3.2rem; padding-bottom: 0; } .detail-hero__grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(2.5rem, 6vw, 6.5rem); } .detail-hero h1 { margin: .8rem 0 1.2rem; font-size: clamp(3.3rem, 6.3vw, 6.1rem); } .detail-hero__grid > div > p { max-width: 545px; color: var(--muted); font-size: 1.08rem; line-height: 1.66; } .tags--large { margin-top: 1.65rem; } .tags--large span { padding: .38rem .56rem; } .detail-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; } .button { display: inline-flex; align-items: center; gap: 1rem; padding: .8rem 1rem; color: #06101d; border: 1px solid var(--cyan); background: var(--cyan); font: 700 .72rem var(--body); letter-spacing: .04em; text-transform: uppercase; transition: transform .2s, background .2s; } .button:hover { transform: translateY(-2px); background: #c4fbfc; } .button--quiet { color: #c7d8f1; border-color: var(--line); background: transparent; } .button--quiet:hover { color: var(--ink); background: rgba(153, 188, 237, .1); } .project-art--large { min-height: min(440px, 48vw); } .project-art--large .project-art__label { font-size: .68rem; } .detail-meta { display: grid; grid-template-columns: 1fr .55fr 1.35fr; gap: 1.5rem; margin-top: 3.6rem; padding: 1.25rem 0; border-top: 1px solid var(--line); } .detail-meta div { display: grid; gap: .35rem; } .detail-meta b, .detail-meta a { font-size: .9rem; font-weight: 500; } .detail-meta a:hover { color: var(--blue); }
.detail-content { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: clamp(3rem, 8vw, 8.5rem); padding-top: clamp(5rem, 9vw, 8.5rem); padding-bottom: 8rem; } .detail-section { margin-bottom: 6.2rem; } .detail-section h2 { max-width: 590px; margin: .6rem 0 2.4rem; font-size: clamp(2.15rem, 4vw, 3.5rem); line-height: 1.02; } .timeline { border-left: 1px solid rgba(155, 186, 234, .2); } .timeline-item { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 1rem; padding: 0 0 2.4rem; } .timeline-item:last-child { padding-bottom: 0; } .timeline-mark { position: relative; left: -12px; display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid rgba(132, 200, 238, .55); border-radius: 50%; color: var(--cyan); background: #0c1424; font: .67rem var(--mono); } .timeline-number { color: var(--faint); } .timeline-item h3 { margin: .3rem 0 .3rem; font: 700 1.1rem var(--display); letter-spacing: -.02em; } .timeline-item p, .ai-section > p { max-width: 555px; margin-bottom: 0; color: var(--muted); } blockquote { max-width: 600px; margin: 0; padding: 1.2rem 0 1.2rem 1.5rem; border-left: 2px solid var(--cyan); color: #d6e4f7; font: 500 clamp(1.1rem, 2vw, 1.35rem)/1.65 var(--body); } .challenges { display: grid; gap: .9rem; } .challenges article { padding: 1.4rem; border: 1px solid var(--line); background: rgba(18, 26, 45, .45); } .challenges h3 { margin: 0 0 .32rem; color: var(--blue); font: .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; } .challenges p { margin-bottom: 1.2rem; color: var(--muted); } .challenges p:last-child { margin-bottom: 0; } .ai-section .tags { margin-top: 1.25rem; } .detail-aside { align-self: start; position: sticky; top: 1.5rem; display: grid; gap: 1rem; } .detail-aside > section { padding: 1.2rem; border: 1px solid var(--line); background: rgba(15, 21, 37, .55); } .detail-aside > section > span { display: block; margin-bottom: .8rem; color: var(--faint); } .metric { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--line); } .metric b { font: 600 1rem var(--display); } .metric small, .crew-card small { color: var(--faint); font-size: .72rem; } .crew-card { display: grid; grid-template-columns: 29px 1fr auto; align-items: center; gap: .65rem; padding: .8rem 0; border-top: 1px solid var(--line); } .crew-card i { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(158, 203, 255, .4); border-radius: 50%; color: var(--blue); font: .55rem var(--mono); font-style: normal; } .crew-card div { display: grid; line-height: 1.25; } .crew-card b { font-size: .78rem; } .crew-card em { color: var(--faint); font-style: normal; } .crew-card:hover b, .crew-card:hover em { color: var(--cyan); }
.event-hero > .section-index { color: var(--blue); } .event-hero__stats { display: flex; gap: clamp(2rem, 7vw, 5.5rem); margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .event-hero__stats div { display: grid; gap: .15rem; } .not-found { min-height: 68vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .not-found__signal { color: var(--cyan); font: .75rem var(--mono); letter-spacing: .15em; } .not-found h1 { margin: .6rem 0 1rem; font-size: clamp(3.5rem, 7vw, 6rem); } .not-found p { max-width: 470px; margin-bottom: 1.6rem; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes spinReverse { to { transform: rotate(-360deg); } }
@media (max-width: 850px) { .featured-grid, .project-grid { grid-template-columns: repeat(2, 1fr); } .detail-content { grid-template-columns: 1fr; } .detail-aside { position: static; grid-template-columns: repeat(2, 1fr); } .hero-signal { margin-right: 0; } }
@media (max-width: 620px) { .page-width { width: min(100% - 32px, 1180px); } .nav-wrap { min-height: 64px; } .nav-toggle { display: grid; gap: 5px; padding: .6rem .15rem .6rem .6rem; } .nav-toggle span { display: block; width: 21px; height: 1px; background: var(--ink); } .site-nav { position: absolute; top: 64px; left: 0; right: 0; display: none; align-items: stretch; gap: 0; padding: .6rem 1rem 1rem; border-bottom: 1px solid var(--line); background: #0a0f1d; } .site-nav.is-open { display: grid; } .site-nav a { padding: .8rem .2rem; } .nav-cta { margin-top: .4rem; text-align: center; } .hero { padding-top: 4rem; padding-bottom: 3rem; } .hero-grid { display: block; } .hero-signal { display: none; } h1 { font-size: clamp(3.1rem, 15vw, 4.2rem); } .hero-search { min-height: 57px; margin-top: 1.6rem; padding-left: .85rem; } kbd { display: none; } .telemetry-strip { flex-wrap: wrap; gap: 1.2rem 2rem; margin-top: 4rem; } .telemetry-status { width: 100%; margin-left: 0; } .section-heading { align-items: start; flex-direction: column; gap: .7rem; } .featured-grid, .project-grid { grid-template-columns: 1fr; } .featured { padding-top: 3.8rem; } .explore-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem .8rem; } .filter-select { min-width: 0; } .filter-select--sort { max-width: none; } .clear-filters { justify-self: start; } .footer-wrap { min-height: 145px; flex-wrap: wrap; align-content: center; gap: 1rem; } .footer-note { width: 100%; margin: 0; } .event-row { grid-template-columns: 35px minmax(0, 1fr) 38px; gap: .85rem; } .event-row__stats { display: none; } .detail-hero { padding-top: 2.2rem; } .detail-hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 2.3rem; } .project-art--large { min-height: 300px; } .detail-meta { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; } .detail-content { padding-top: 4.3rem; } .detail-section { margin-bottom: 4rem; } .detail-aside { grid-template-columns: 1fr; } .event-hero__stats { gap: 1.7rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }