/* =========================================================================== The public site, rebuilt (/site) — Claus, 12 September 2026 --------------------------------------------------------------------------- The approved design: ink ground, IBM Plex, scientific line work, one light band for the evidence. Everything is scoped under .dx so none of it can reach the hub's own pages, which keep Design System v2.0 untouched. No JavaScript: the language switch is a link, the motion is CSS and SVG. =========================================================================== */ .dx{ /* MIT blue, 13 September 2026 (Claus, after Max). The ground is the navy off the event's own logo; the accent is the MIT blue lightened until it is legible on it (#1A6CB5 is 3.35:1 on this ground — fine as a block of colour behind white, unreadable as text on dark, which is why --a and --mit are two different values doing two different jobs). Saturation raised throughout on 13 Sep: the first pass was accurate and lifeless. The greys are gone — every neutral now carries the ground's own blue, the cards sit a clear step above it instead of melting into it, and the accents are at full chroma. Contrast was re-checked after, not before: nothing here is under 4.5:1 on its own ground. */ --ink:#061A33; --deep:#03101F; --panel:#0B2747; --card:#0F3159; --edge:#1C4577; --edge2:#2B5894; --paper:#F0EBE0; --body:#B8CBDC; --cap:#8FA9C2; --plate:#7E9BB8; --mit:#1A6CB5; --mitdeep:#0A4E85; /* The line work inside the plates — grids, axes, rings, leader lines. It used to borrow --edge and --edge2, which are BORDER colours: correct for a 1px rule between two panels, and 1.8:1 and 2.43:1 as a drawn line, against a 3:1 standard for a graphic that carries meaning. The scientific line work is the idea this whole design rests on and it was nearly invisible (13 Sep). 3.37:1 — present, still quiet. */ --draw:#3B6FAC; --a:#35A7F5; --b:#FF5E93; --violet:#9B7CFF; --rose:#FF5E93; background:var(--ink); color:var(--body); font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* The browser's own 8px margin on was showing as a white frame around every page — most visible at the very top, above the utility strip. This stylesheet only ever ships with the static site (the hub keeps globals.css), so it may own body and html directly. Both are painted: html covers the over-scroll area, which body's background does not reach. */ html,body{margin:0;background:#061A33} .dx *{box-sizing:border-box} /* Where you are, when you are using a keyboard (13 Sep). There was no focus style anywhere on either site: a person tabbing through had no way to tell what they were about to activate. That is not a polish item, it is the difference between usable and not. Two colours because no single one clears 3:1 on all three grounds this site uses. Amber reads on the ink AND on the MIT blue band, where every accent blue fails at about 2:1; on the paper bands amber disappears, so there it goes deep blue. Offset so the ring never sits on the letterforms. */ .dx :focus-visible{outline:3px solid #FFD166;outline-offset:3px} .dx .dxpaper :focus-visible{outline-color:#0A4488} .dxhead :focus-visible,.dxutil :focus-visible{outline-color:#FFD166;outline-offset:2px} .dx :focus:not(:focus-visible){outline:none} .dx a{color:var(--a);text-decoration:none} .dx a:hover{color:#7CC8FF} /* Weight 500, not 300 (Claus, 13 Sep: "more bold and vibrant"). A light serif at 56px is elegant and says nothing loudly; at this weight a headline can actually carry a page. */ .dx h1,.dx h2,.dx h3,.dx h4{font-family:"IBM Plex Serif",Georgia,serif;font-weight:500;letter-spacing:-.014em;color:var(--paper);margin:0} .dx h3,.dx h4{font-weight:600;letter-spacing:-.012em} .dx p{margin:0} .dxwrap{max-width:1440px;margin:0 auto;padding:0 56px} .dxplate{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--plate)} .dxteal{color:var(--a)} .dxviolet{color:var(--violet)} .dxrose{color:var(--rose)} /* --a, not a literal: this eyebrow sits on the light band, where a fixed #1A6CB5 was the thinnest thing on the page. The token is the right blue for whichever band it lands in. */ .dxblue{color:var(--a)} .dxlede{font-size:19px;line-height:1.62;color:var(--body);max-width:62ch} .dxmuted{color:var(--cap)} .dxser{font-family:"IBM Plex Serif",Georgia,serif} .dxr{text-align:right} /* utility + masthead */ .dxutil{background:var(--mitdeep);border-bottom:1px solid #0E5FA0;font-family:"IBM Plex Mono",monospace;font-size:12px} .dxutil .dxwrap{display:flex;align-items:center;gap:6px 22px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap} .dxutil a{color:#C3D8EC} .dxutil .dxlive{color:#DCE9F5} .dxutil .dxlive i{background:#9FD6FA} .dxlive{margin-left:auto;color:var(--a);letter-spacing:.1em;display:flex;align-items:center;gap:9px; min-width:0} .dxlive span{overflow-wrap:anywhere} .dxlive i{width:6px;height:6px;border-radius:50%;background:var(--a);display:block;animation:dxbreathe 3.6s ease-in-out infinite} .dxhead{background:var(--mit)} .dxhead .dxprog{color:#E8F3FE} .dxhead .dxevent{color:#FFFFFF} .dxhead .dxnav a{color:#F4F8FC} .dxhead .dxnav a:hover{color:#FFFFFF} .dxhead .dxsep{background:#5A96CE} .dxhead .dxlang{border-color:#7FB2E0;color:#EDF6FE !important} .dxhead .dxwrap{display:flex;align-items:center;gap:20px;padding-top:15px;padding-bottom:13px;flex-wrap:wrap} .dxbrand img{display:block;height:34px;width:auto} .dxsep{width:1px;height:30px;background:var(--edge2);display:block;flex:0 0 auto} /* the mark and the wordmark are fixed-size items in a flex row: without this the flexbox shrinks the Diabetes X mark to nothing and folds the wordmark onto two lines the moment the nav needs the space. */ /* The Diabetes X mark. Its two paths are open polylines — the inherited strand and the measured one — so they must be stroked, never filled: without fill:none the browser closed each curve and filled it black, and with no stroke-width the default 1 unit in a 46x64 viewBox came out under half a pixel. The mark has been a smudge on every page since it was drawn; the MIT blue band is simply where it finally became obvious (13 Sep). */ .dxmark{flex:0 0 auto} .dxmark path{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .dxhead .dxmark{height:34px;width:auto} /* On the blue band the accents are the wrong side of it: the sky strand is nearly the band's own colour. Both strands go light there, keeping the cool/warm pair that is the mark. */ .dxhead .dxmark .dxa{stroke:#FFFFFF} .dxhead .dxmark .dxb{stroke:#FFC2D8} .dxname{display:flex;flex-direction:column;line-height:1.18;flex:0 0 auto;min-width:0} .dxprog{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--plate)} .dxevent{font-family:"IBM Plex Serif",Georgia,serif;font-size:23px;font-weight:500;color:var(--paper)} .dxnav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:12px 22px; margin-left:auto;font-size:15px;font-weight:500} .dxnav a{color:var(--body);white-space:nowrap} .dxlang{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;border:1px solid var(--edge2);padding:7px 12px;color:var(--cap) !important} .dxbtn{display:inline-block;font-size:15px;font-weight:600;padding:13px 26px;border:1px solid transparent;transition:transform .35s cubic-bezier(.2,.7,.3,1),background .25s} .dxnav .dxbtn{background:#FFFFFF;color:var(--mitdeep) !important;padding:10px 22px;font-size:15px} .dxprimary{background:var(--a);color:#04101F !important} .dxghost{border-color:var(--paper);color:var(--paper) !important} .dxbig{padding:17px 38px;font-size:17px} /* A button should look like something you press. Hover lifts it, pressing puts it back down — without the second half the first half reads as decoration. */ .dxbtn:hover{transform:translateY(-2px)} .dxbtn:active{transform:translateY(0)} .dxprimary{box-shadow:0 2px 0 0 #1173B8} .dxprimary:hover{background:#5FBBF8;border-color:#5FBBF8;box-shadow:0 4px 0 0 #1173B8} .dxprimary:active{box-shadow:0 0 0 0 #1173B8} @media (prefers-reduced-motion:reduce){ .dxbtn,.dxbtn:hover,.dxbtn:active{transform:none;transition:none} } .dxfacts{border-top:2px solid var(--paper);border-bottom:1px solid var(--edge)} .dxfacts .dxwrap{display:flex;gap:4px 28px;padding-top:9px;padding-bottom:9px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;color:var(--cap);flex-wrap:wrap} /* The facts strip holds four facts, and this one was the only thing in it wearing the alarm colour — a deadline two months away, shouting beside three neutral greys, directly under a live counter already saying what is next. A fact dressed as an alarm reads as noise, and by November, when it IS urgent, nothing would be left to escalate to. So it is a fact until it is close: the countdown script adds .dxnear inside the last three weeks (13 Sep 2026). */ .dxwarn{margin-left:auto;color:var(--cap)} .dxwarn.dxnear{color:var(--b)} /* the countdown */ .dxrunway{display:grid;grid-template-columns:272px 1fr;border:1px solid var(--edge);background:var(--panel);margin-top:20px} .dxnext{padding:16px 22px 15px;border-right:1px solid var(--edge);background:var(--card)} .dxclock{display:flex;align-items:flex-end;gap:10px;margin-top:9px;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums} .dxclock span{text-align:center} .dxclock b{display:block;font-size:34px;line-height:1;color:var(--paper);font-weight:500} .dxclock i{display:block;font-size:12px;letter-spacing:.14em;color:var(--plate);font-style:normal;margin-top:5px} .dxclock em{font-size:23px;color:var(--edge2);font-style:normal;padding-bottom:7px} .dxnext p{font-size:13.5px;line-height:1.5;color:var(--body);margin-top:10px} .dxrail{padding:20px 28px 16px} .dxtrack{position:relative;height:40px;margin-top:12px} .dxbar,.dxbarlive{position:absolute;top:19px;height:1px;display:block} .dxbar{left:0;right:0;background:var(--edge2)} .dxbarlive{left:0;height:2px;top:18.5px;background:var(--a)} .dxstop{position:absolute;top:13px;width:1px;height:13px;background:var(--edge2);display:block} .dxstop.on{width:2px;background:var(--a)} .dxstop.done{background:var(--plate)} .dxtoday{position:absolute;left:0;top:-2px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--paper)} .dxtoday i{position:absolute;left:0;top:14px;width:11px;height:11px;margin-left:-5px;border-radius:50%;border:2px solid var(--paper);background:var(--ink);display:block} .dxstops{position:relative;height:36px} .dxstoplab{position:absolute;top:0;transform:translateX(-50%);text-align:center;white-space:nowrap} .dxstoplab.dxend{right:0;left:auto;transform:none;text-align:right} .dxstoplab b{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--plate);font-weight:400} .dxstoplab i{display:block;font-size:12px;color:var(--cap);font-style:normal;margin-top:3px} .dxstoplab.on b{color:var(--a)} .dxstoplab.on i{color:var(--paper);font-weight:600} /* hero */ .dxhero{display:grid;grid-template-columns:1fr 430px;gap:52px;align-items:stretch;margin:40px 0 30px} .dxherotext{display:flex;flex-direction:column;justify-content:flex-end} .dxhero h1{font-size:56px;line-height:1.04;max-width:20ch;margin-bottom:18px} /* a room behind the opening, turned right down: grey, a fifth visible, and a scrim that is near-solid under the headline and thins towards the figure, so the type never fights it and the sphere still reads. It is atmosphere, not a picture — at a glance you should register depth and people, not stop to look at it. */ .dxhero{position:relative} .dxheroback{position:absolute;top:-40px;bottom:-24px;left:50%;width:100vw;transform:translateX(-50%); background-size:cover;background-position:72% 42%; /* Claus, 13 Sep: "hero page don't work with the picture." He was right, and the reason is structural rather than a matter of tuning. The headline holds the left half and the sphere panel holds the right third, so the photograph could only ever appear in the ~14% strip between them — and a narrow vertical slice of a room, under a scrim, is not a room. It is a smudge, and it looked like dirt on the screen. The home page is the one page that already has a picture: the sphere IS the image. So this goes back to being texture, which is what it was always doing well — enough to stop the ground reading as flat paint, not enough to compete with the figure beside it. Every inner page keeps a real photograph, because those pages have nothing else. */ filter:saturate(.55) brightness(.7) contrast(1.05); opacity:.30;pointer-events:none;z-index:0; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 78%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 78%,transparent 100%)} /* An even scrim now, not a hard edge at 52%: with the picture back to texture there is nothing to hide behind a solid band, and the hard edge was itself visible as a seam. */ .dxheroback::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(6,26,51,.94) 0,rgba(6,26,51,.82) 45%,rgba(6,26,51,.72) 100%)} .dxhero > *:not(.dxheroback){position:relative;z-index:1} .dxhero .dxlede{max-width:52ch;margin-bottom:24px} .dxcta{display:flex;gap:12px;align-items:center;flex-wrap:wrap} /* the hundred, turning */ .dxcase{position:relative;background:var(--card);border:1px solid var(--edge2);min-height:430px;overflow:hidden} .dxcase::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 58% at 50% 46%,rgba(53,167,245,.20),rgba(15,49,89,0) 70%)} .dxglobe{position:absolute;left:50%;top:46%;width:0;height:0;transform-style:preserve-3d;animation:dxorbit 42s linear infinite} .dxp{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:rgba(240,235,224,.16);border:1px solid rgba(240,235,224,.22)} .dxp.dxknown{background:var(--a);border-color:var(--a);box-shadow:0 0 8px rgba(53,167,245,.7)} .dxp.dxnever{background:transparent;border:1.6px solid var(--b);animation:dxtick 4s ease-in-out infinite} .dxorbit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .dxring{fill:none;stroke:var(--draw);stroke-width:1} .dxspark{animation:dxspark 5s ease-in-out infinite} .dxcaselab{position:absolute;left:22px;top:20px;display:flex;flex-direction:column;gap:5px} .dxkey{position:absolute;left:0;right:0;bottom:0;padding:26px 22px 18px;display:flex;gap:20px;flex-wrap:wrap; font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;color:var(--body); background:linear-gradient(to top,var(--card) 42%,rgba(15,49,89,0))} .dxkey span{display:flex;align-items:center;gap:8px} .dxsw{width:10px;height:10px;border-radius:50%;display:block} i.dxsw.dxknown{background:var(--a)} i.dxsw.dxnever{border:1.6px solid var(--b)} /* figures */ .dxfig{margin:0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);padding:22px 0 14px} .dxfig svg{width:100%;height:auto;display:block} .dxfig figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding-top:10px;font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.7;color:var(--cap)} .dxgrid{stroke:var(--draw);stroke-width:1;stroke-dasharray:3 5} .dxgridc{fill:none;stroke:var(--draw);stroke-width:1} .dxrung{color:var(--paper)} .dxink{fill:none;stroke-width:2.1;stroke-linejoin:round;stroke-dasharray:4200;stroke-dashoffset:4200;animation:dxdraw 5s cubic-bezier(.25,.8,.3,1) forwards} .dxink.dxb{animation-delay:.25s} .dxflow{fill:none;stroke-width:2.1;stroke-dasharray:26 10;opacity:.5;animation:dxflow 2.4s linear infinite} path.dxa,circle.dxa,.dxdot.dxa{stroke:var(--a)} path.dxb,.dxdot.dxb{stroke:var(--b)} .dxdot.dxa{fill:var(--a);stroke:none} .dxdot.dxb{fill:var(--b);stroke:none} .dxfilla circle{fill:var(--a)} .dxfillb circle{fill:var(--b)} .dxaxis{font-family:"IBM Plex Mono",monospace;font-size:12px;fill:var(--plate);letter-spacing:2px} .dxaxis.dxsm{font-size:12px;letter-spacing:.5px} .dxline{fill:none;stroke:var(--paper);stroke-width:1.6} .dxline.dxa{stroke:var(--a)} .dxline.dxb{stroke:var(--b)} .dxline.dxthin{stroke-width:1.2;stroke-linecap:round} .dxdash{stroke-dasharray:2 3;stroke-width:1.2} .dxlead{stroke:var(--draw);stroke-width:1} .dxturn{transform-origin:150px 88px;animation:dxturn 34s linear infinite} /* the hundred, in words */ .dxhundred{display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:start;padding:46px 0 44px} .dxhundred h2{font-size:34px;line-height:1.12;margin-top:14px} .dxhundred p+p{margin-top:14px} /* bands */ .dxband{background:var(--deep);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)} .dxorg{display:flex;align-items:center;gap:30px;padding-top:22px;padding-bottom:22px;flex-wrap:wrap} /* Three partner logos, three different lockups: First Experts and MIT are horizontal, Purple Door is a stacked mark with its name underneath. Sizing all three by the same height made Purple Door a 36px postage stamp whose wordmark nobody could read, while the two wordmarks sat comfortably. These heights equalise the INK each logo puts on the page — measured, not guessed — so the three read as equal partners (13 Sep, Claus). */ .dxorg img{display:block;width:auto;opacity:.95} .dxorg img[src$="first-experts-white.png"]{height:32px} .dxorg img[src$="purple-door-white.png"]{height:44px} .dxorg img[src$="mit-hackmed-white.png"]{height:38px} /* the evidence: the one light band */ /* Paper — a light run, as a token swap rather than a second set of rules. Every component on this site draws its colours from the variables at the top, so redefining them on one container flips everything inside it: text, rules, cards, and the line figures, whose strokes are var(--a)/var(--b)/var(--paper) too. The site alternates in blocks, not band by band: the dark runs are the ones you feel (hero, photographs, the close), the paper runs are the ones you read (the evidence, the schedule, the prices). */ .dx .dxpaper{ --ink:#F1F5FB; --panel:#FFFFFF; --card:#FFFFFF; --edge:#CFDCEC; --edge2:#AFC4DB; --paper:#0A1B2E; --body:#33485F; --cap:#4C6480; --plate:#54708E; --a:#0E5CAE; --b:#C81C63; --violet:#5B2FE0; --rose:#C81C63; background:var(--ink); color:var(--body); } .dx .dxpaper a:hover{color:#0A4488} .dxlight{padding:62px 0 58px} .dxpaper .dxlight{padding-bottom:6px} .dxlight h2{font-size:56px;line-height:1.02;max-width:18ch;margin-bottom:16px} .dxlight .dxlede{max-width:64ch;margin-bottom:42px} .dxstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;border-top:2px solid var(--paper);padding-top:26px} .dxstat{border-left:1px solid var(--edge);padding-left:34px} .dxstat:first-child{border-left:0;padding-left:0} .dxstat b{display:block;font-family:"IBM Plex Serif",Georgia,serif;font-weight:500;font-size:56px;line-height:1} .dxstat.s0 b{color:#0E5CAE} .dxstat.s1 b{color:#C81C63} .dxstat.s2 b{color:#5B2FE0} .dxstat.s3 b{color:#0F6F86} .dxstat p{font-size:15px;line-height:1.6;color:var(--body);margin-top:14px} .dxsource{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--edge);margin-top:28px;padding-top:14px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;color:var(--cap);flex-wrap:wrap} /* reach */ .dxpaper > .dxwrap:last-child{padding-bottom:56px} .dxreach{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge);margin:46px 0 0} .dxreach div{background:var(--ink);padding:26px 24px} .dxreach b{display:block;font-family:"IBM Plex Serif",Georgia,serif;font-weight:500;font-size:44px;line-height:1;color:var(--paper)} .dxreach p{font-size:15px;line-height:1.6;color:var(--cap);margin-top:10px} /* the room — four photographs under the four numbers, same grid, same 1px edges: the numbers say how many, the photographs say who. Toned right down (grey, two-thirds opacity, a scrim over the top) so they read as texture on the ink rather than as a gallery; pointing at one lifts it, which is the page's only reward for hovering something that is not a link. */ .dxroom{border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);margin-top:46px} .dxroomgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--edge)} .dxroomgrid figure{position:relative;margin:0;overflow:hidden;background:var(--deep);aspect-ratio:4/3} /* Turned up on 13 September (Claus: "add some humans"). These were greyscaled, dropped to 74% and put under a dark veil so they read as texture rather than as a gallery — which worked, and meant the only people on the front page were a grey smudge behind a scrim. They are real people at a real MIT Hacking Medicine hackathon; the page is better for letting them be seen. A little desaturation stays so the photographs sit in the navy rather than fighting it. */ .dxroomgrid img{display:block;width:100%;height:100%;object-fit:cover; filter:saturate(.82) contrast(1.04) brightness(1.02);opacity:1; transition:opacity .55s ease,filter .55s ease,transform .8s cubic-bezier(.2,.7,.3,1)} .dxroomgrid figure::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(178deg,rgba(6,26,51,0),rgba(6,26,51,.30))} .dxroomgrid figure:hover img{filter:saturate(1) contrast(1.04) brightness(1.05);transform:scale(1.03)} .dxroomcap{display:flex;gap:30px;align-items:baseline;padding:24px 0 28px;flex-wrap:wrap} .dxroomcap .dxplate{flex:0 0 auto;position:relative;top:-1px} .dxroomcap p{font-size:17px;line-height:1.62;color:var(--body);max-width:60ch;margin:0} /* Four ways in (Claus, 13 September — the concept from a reference, not its design). The front page sent people to two of the five things they can actually do: apply to the hackathon and buy a summit ticket. Mentor, sponsor and propose-a-speaker are all built, all working, and had no route from the front page at all. This is that routing, in the site's own grid — the same 1px rule the reach and MIT grids use, so it needs no new vocabulary. No 01/02/03 numbering: these four are not a sequence and numbering them would say they were. */ .dxroles{padding:56px 0 10px} .dxroles h2{font-size:44px;line-height:1.04;max-width:20ch;margin-bottom:14px} .dxroles .dxlede{max-width:62ch;margin-bottom:36px} .dxrolegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--edge); border:1px solid var(--edge)} .dxrole{background:var(--panel);padding:26px 24px 24px;display:flex;flex-direction:column; transition:background .3s} .dxrole:hover{background:var(--card)} .dxrole h3{font-size:23px;line-height:1.14;margin:14px 0 9px} .dxrole p{font-size:15px;line-height:1.62;color:var(--body);margin:0 0 20px} .dxrole .dxgo{margin-top:auto;font-size:15px;font-weight:600;color:var(--a)} .dxrole .dxwhen{display:block;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em; color:var(--cap);margin-top:8px} /* The three organisations behind the event, each one a link to their own site. It was three plain cards with no mark and nothing to click, and Claus asked for the logos twice before this existed. The logo sits above the name on its own line because the three lockups are different shapes, and a wide wordmark sharing a baseline with a stacked one looks like a mistake. Heights equalise the ink each mark puts on the page, the same measured way as the footer row. */ .dxparts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px; background:var(--edge);border:1px solid var(--edge)} .dxpart{background:var(--panel);padding:28px 26px 24px;display:flex;flex-direction:column; color:var(--body);transition:background .3s} .dxpart:hover{background:var(--card);color:var(--body)} .dxpartlogo{display:block;height:46px;margin-bottom:20px} .dxpartlogo img{height:100%;width:auto;display:block;opacity:.95} .dxpart img[src$="first-experts-white.png"]{height:38px} .dxpart img[src$="purple-door-white.png"]{height:46px} .dxpart img[src$="mit-hackmed-white.png"]{height:42px} .dxpart h3{font-size:19px;line-height:1.2;margin-bottom:8px} .dxpart p{font-size:15px;line-height:1.6;color:var(--cap);margin:0 0 18px} .dxpart .dxgo{margin-top:auto;font-family:"IBM Plex Mono",monospace;font-size:12px; letter-spacing:.06em;color:var(--a)} /* On the paper band the logos are white artwork, so they need a dark plate to sit on. */ .dxpaper .dxpart{background:#0B2747} .dxpaper .dxpart:hover{background:#102F55} .dxpaper .dxpart h3{color:#F0EBE0} .dxpaper .dxpart p{color:#A7BACD} .dxpaper .dxparts{background:#1C4577;border-color:#1C4577} /* tracks */ .dxtracks{padding:52px 0 46px} .dxtrackhead{display:grid;grid-template-columns:1fr 420px;gap:64px;align-items:end;margin-bottom:34px} .dxtrackhead h2{font-size:44px;line-height:1.06;max-width:20ch} .dxtrackhead p{font-size:17px;line-height:1.62;padding-bottom:8px} .dxplates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px} .dxplateframe{position:relative;border:1px solid var(--edge);background:var(--panel);height:210px;display:flex;align-items:center;justify-content:center;transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s} .dxplateframe .dxplate{position:absolute;left:16px;top:14px} .dxplateframe svg{width:100%;height:180px} .dxcard:hover .dxplateframe{transform:translateY(-6px);box-shadow:0 14px 30px rgba(0,0,0,.42)} .dxcard .dxplate{margin:18px 0 8px} .dxcard h3{font-size:23px;line-height:1.12;margin-bottom:10px} .dxcard p{font-size:15px;line-height:1.62} .dxunder{display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center;border-top:2px solid var(--paper);margin-top:40px;padding-top:26px} .dxunder h3{font-size:28px;line-height:1.1;margin:8px 0} .dxunder p{font-size:17px;line-height:1.62;max-width:90ch} /* two doors */ .dxdoors{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);margin-top:8px} /* color:inherit lost to `.dx a{color:var(--a)}` on specificity, so every word inside the two doors was painted the link colour — the paragraphs included. It went unseen while the accent was a pale near-white; at full chroma the doors turned blue on blue. The selector now carries the element, so it wins, and the paragraph says its colour outright rather than inheriting. */ .dx a.dxdoor{position:relative;display:block;min-height:288px;background:var(--ink);overflow:hidden;color:var(--body)} .dxdoorback{position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.08) brightness(1.05)} .dxdoor::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,26,51,.94) 26%,rgba(6,26,51,.46))} .dxdoortext{position:relative;z-index:2;padding:34px 36px 32px;display:flex;flex-direction:column;justify-content:space-between;height:100%;min-height:288px} .dxdoortext h3{font-size:34px;line-height:1.06;margin:12px 0} .dxdoortext p{font-size:17px;line-height:1.62;max-width:44ch;color:var(--body)} .dxdoorcta{display:flex;align-items:center;gap:18px;margin-top:22px} .dxdoorcta i{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;color:var(--cap);font-style:normal} /* the four days */ .dxdays{padding:46px 0 44px} .dxdays table{width:100%;border-collapse:collapse;font-size:17px;margin-top:18px} .dxdays th{text-align:left;padding-bottom:12px;border-bottom:2px solid var(--paper);font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--plate);font-weight:400} .dxdays td{padding:17px 0;border-bottom:1px solid var(--edge);color:var(--body)} .dxdays tr:last-child td{border-bottom:0} .dxnum{font-family:"IBM Plex Mono",monospace;color:var(--plate);width:60px} .dxdays .dxser{color:var(--paper);width:200px} /* the MIT effect */ .dxmit{padding:10px 0 48px} .dxmit h2{font-size:56px;line-height:1;margin-bottom:10px} .dxmit .dxlede{max-width:60ch;margin-bottom:36px} .dxmitgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge)} .dxmitgrid div{background:var(--ink);padding:24px 22px} .dxmitgrid h4{font-size:15px;margin-bottom:8px;font-family:"IBM Plex Serif",Georgia,serif} .dxmitgrid p{font-size:15px;line-height:1.6;color:var(--cap)} /* partnership */ .dxpart{padding:10px 0 54px} .dxpart h2{font-size:56px;line-height:1;margin-bottom:12px} .dxpart .dxlede{max-width:70ch;margin-bottom:32px} /* Four fixed columns left a ragged empty cell whenever a row had three tiers, and the cards were only as tall as their own text, so the Buy buttons sat at three different heights and the shortest card read as an afterthought (13 Sep). auto-fit fills the row; the flex column below pushes every button to the same baseline whatever the card holds. */ .dxtiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px;align-items:stretch} .dxtier{border:1px solid var(--edge);background:var(--panel);padding:26px 24px 28px; display:flex;flex-direction:column} .dxtier.lead{border-color:var(--a);background:linear-gradient(180deg,rgba(53,167,245,.10),rgba(6,26,51,0)); position:relative} /* A colour alone was the only thing marking the recommended tier, which is no marking at all for anyone who does not see the difference. It says what it is now. */ .dxtier.lead::before{content:"MOST PEOPLE CHOOSE THIS";position:absolute;top:-1px;left:-1px; background:var(--a);color:#04101F;font-family:"IBM Plex Mono",monospace;font-size:12px; letter-spacing:.14em;padding:5px 9px 4px} .dxtier.lead .dxtierhead{margin-top:16px} .dxtierhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px} .dxtierhead span{font-size:15px;font-weight:700;color:var(--paper)} .dxtierhead i{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.1em;color:var(--plate);font-style:normal} .dxtier b{display:block;font-family:"IBM Plex Serif",Georgia,serif;font-weight:500;font-size:34px;line-height:1;color:var(--paper)} .dxtier.lead b{color:var(--a)} .dxtier p{font-size:15px;line-height:1.62;color:var(--cap);margin-top:16px} .dxper{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em; color:var(--a);margin-top:8px;display:block} /* close + footer */ .dxclose{background:var(--deep);border-top:1px solid var(--edge);padding:66px 0 70px;text-align:center} .dxclose .dxmark{margin:0 auto 18px;display:block;height:64px;width:auto} .dxclose h2{font-size:56px;line-height:1.02;margin:14px 0 16px} .dxclose p{font-size:19px;line-height:1.55;margin-bottom:30px} .dxfoot .dxwrap{display:flex;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:24px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;color:var(--plate);flex-wrap:wrap} .dxfoot a{color:var(--plate)} /* motion */ @keyframes dxorbit{to{transform:rotateY(360deg)}} @keyframes dxdraw{to{stroke-dashoffset:0}} @keyframes dxflow{to{stroke-dashoffset:-36}} @keyframes dxturn{to{transform:rotate(360deg)}} @keyframes dxbreathe{0%,100%{opacity:.5}50%{opacity:1}} @keyframes dxspark{0%,100%{opacity:.3}50%{opacity:.85}} @keyframes dxtick{0%,100%{box-shadow:0 0 0 0 rgba(255,94,147,0)}50%{box-shadow:0 0 0 4px rgba(255,94,147,.18)}} @media (prefers-reduced-motion: reduce){ .dx *{animation:none !important;transition:none !important} .dx .dxink{stroke-dashoffset:0 !important} } /* 900–1340px: the masthead runs out of room once "Contact" became "Contact Us", and sooner again in Malay, where every label is longer. Tighten the gap before the nav has to wrap. */ @media (min-width:901px){ .dxprog,.dxevent{white-space:nowrap} } @media (min-width:901px) and (max-width:1180px){ .dxrolegrid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:901px) and (max-width:1340px){ .dxnav{gap:11px 15px;font-size:13.5px} .dxnav .dxbtn{padding:9px 16px;font-size:13.5px} .dxhead .dxwrap{gap:14px} } /* the team works from phones */ @media (max-width:900px){ .dxwrap{padding:0 18px} /* the nav was hidden here, which left a phone with no route to any page. It wraps under the masthead instead: all nine links and the Apply button, two or three rows. */ .dxhead .dxwrap{flex-wrap:wrap;gap:12px} .dxnav{order:3;width:100%;margin-left:0;justify-content:flex-start;gap:13px 17px; border-top:1px solid var(--edge);padding-top:13px;margin-top:1px} .dxnav a{flex:0 0 auto} .dxnav .dxbtn{padding:9px 18px;margin-left:auto} .dxhero,.dxhundred,.dxtrackhead,.dxrunway{grid-template-columns:1fr;gap:24px} .dxnext{border-right:0;border-bottom:1px solid var(--edge)} .dxhero h1{font-size:34px;max-width:none} /* one column on a phone: the room would land under the headline, so it retreats */ .dxheroback{opacity:.5} /* was .15 — invisible. The phone scrim below is heavier, so this is safe. */ .dxheroback::after{background:linear-gradient(180deg,rgba(6,26,51,.9),rgba(6,26,51,.62))} /* the countdown was taking the top of a phone screen to itself: one row, smaller digits */ .dxnext{padding:13px 16px 12px} .dxclock b{font-size:28px} .dxclock em{font-size:19px;padding-bottom:5px} .dxclock i{font-size:12px} .dxnext p{font-size:13.5px;margin-top:8px} .dxrunway{margin-top:16px} .dxfacts .dxwrap{gap:3px 16px} /* the runway on a phone: the rail is a visualisation that needs width — at 375px it is a hairline with four ticks on it, saying nothing the dated list underneath does not say better. Drop the drawing, keep the dates. */ .dxrail .dxtrack{display:none} .dxrail{padding:14px 16px 16px} .dxstops{gap:6px;margin-top:2px} .dxstoplab i{font-size:12px;margin-top:0} .dxcase{min-height:376px} .dxglobe{top:41%} .dxstats,.dxreach,.dxplates,.dxtiers,.dxmitgrid,.dxdoors,.dxrolegrid{grid-template-columns:1fr} .dxroles{padding-top:40px} .dxroles h2{font-size:28px} .dxroomgrid{grid-template-columns:1fr 1fr} .dxstat{border-left:0;padding-left:0;border-top:1px solid var(--edge);padding-top:18px} .dxstat:first-child{border-top:0;padding-top:0} .dxlight h2,.dxmit h2,.dxpart h2{font-size:28px} .dxclose h2{font-size:34px} .dxhundred h2{font-size:28px} .dxtrackhead h2{font-size:28px} .dxdays table{display:block;overflow-x:auto} .dxunder{grid-template-columns:1fr} /* the rail has no room for three labels at 390px: they become a legible list under it */ .dxstops{height:auto;display:flex;flex-direction:column;gap:9px;margin-top:12px} .dxstoplab{position:static;left:auto !important;right:auto;transform:none;text-align:left; display:flex;align-items:baseline;gap:10px;white-space:normal} .dxstoplab b{width:78px;flex:0 0 auto} .dxstoplab.dxend{text-align:left} } /* --------------------------------------------------------------------------- The inner pages (/about/, /summit/, /hackathon/, /tickets/, /sponsors/, /speakers/, /faqs/, /contact-us/, /privacy-statement/). Same tokens, same rules and the same plates as the home page — these are only the components the home page did not need. --------------------------------------------------------------------------- */ .dx .dxnav a.on{color:var(--paper);border-bottom:2px solid var(--a);padding-bottom:2px} /* The opening of an inner page (Claus, 13 Sep: "do it on every page"). Every one of them opened on flat navy while the home page had a room behind it. Same rule as the home page: the picture lives on the right, the type sits on solid ink, and the two never overlap — so the picture can be as strong as it likes without costing a word of readability. */ .dxphw{position:relative;overflow:hidden} .dxpback{position:absolute;inset:0;background-size:cover;background-position:64% 38%; filter:saturate(.7) brightness(.82) contrast(1.05);opacity:.9;pointer-events:none;z-index:0; -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0,#000 72%,transparent 100%)} .dxpback::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,var(--ink) 0,var(--ink) 54%,rgba(6,26,51,.84) 70%,rgba(6,26,51,.6) 100%)} .dxphw > .dxwrap{position:relative;z-index:1} .dxphero{padding:56px 0 42px;max-width:60ch} .dxphero h1{font-size:44px;line-height:1.06;margin:14px 0 16px} .dxphero .dxlede{font-size:19px;max-width:56ch} .dxphero .dxcta{margin-top:28px} .dxsec{padding:50px 0 46px} .dxsec h2,.dxband2 h2,.dxlight h2{font-size:34px;line-height:1.08;margin:14px 0 14px} .dxsec .dxlede,.dxband2 .dxlede{max-width:66ch;margin-bottom:30px} .dxband2{background:var(--panel);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);padding:54px 0 50px} .dxband2:not(.dxpaper){background:var(--deep)} .dxbtn.dxsm{padding:10px 20px;font-size:15px;margin-top:18px} .dxnote{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.04em;color:var(--plate);margin-top:30px} /* running prose — the privacy statement is the one page that is paragraphs rather than panels. One measure, one rhythm: 66ch, a serif sub-heading with a teal rule above it, and list items marked with the same short teal dash the price tiers use. */ .dxprose{max-width:66ch} .dxprose h3{font-family:"IBM Plex Serif",Georgia,serif;font-weight:400;font-size:28px;line-height:1.2; color:var(--paper);margin:40px 0 14px;padding-top:18px;border-top:1px solid var(--edge)} .dxprose h3:first-child{margin-top:0;padding-top:0;border-top:0} .dxprose p{font-size:17px;line-height:1.7;color:var(--body);margin:0 0 15px} .dxprose p b{color:var(--paper);font-weight:600} .dxprose ul{list-style:none;margin:0 0 15px;padding:0} .dxprose li{font-size:17px;line-height:1.66;color:var(--body);padding:6px 0 6px 20px;position:relative} .dxprose li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:1px;background:var(--a)} .dxprose + .dxcols{margin-top:38px} .dxtbd{display:inline;background:rgba(255,94,147,.13);border-bottom:1px solid var(--b); color:#F0AFC5;padding:1px 5px;font-family:"IBM Plex Mono",monospace;font-size:13.5px;letter-spacing:.01em} .dxdraft{background:#2A1220;border-bottom:1px solid #5C2740} .dxdraft .dxwrap{display:flex;gap:18px;align-items:baseline;padding:14px 0 15px;flex-wrap:wrap} .dxdraft b{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#F5B8CC} .dxdraft p{font-size:15px;line-height:1.6;color:#E6C3D0;margin:0;max-width:76ch} /* cards */ .dxcols{display:grid;gap:1px;background:var(--edge);border:1px solid var(--edge)} .dxcols.c3{grid-template-columns:repeat(3,minmax(0,1fr))} .dxcols.c2{grid-template-columns:repeat(2,minmax(0,1fr))} .dxc{background:var(--ink);padding:26px 24px 28px} .dxband2 .dxc{background:var(--ink)} .dxband2:not(.dxpaper) .dxc{background:var(--deep)} .dxc h3{font-size:19px;line-height:1.15;margin-bottom:10px} .dxc p{font-size:15px;line-height:1.62;color:var(--cap)} .dxc a{font-size:15px} /* an agenda or a staged list */ .dxag{border-top:2px solid var(--paper)} .dxagr{display:grid;grid-template-columns:150px 1fr;gap:26px;padding:20px 0;border-bottom:1px solid var(--edge)} .dxagr:last-child{border-bottom:0} .dxagt{font-family:"IBM Plex Mono",monospace;font-size:13.5px;letter-spacing:.12em;color:var(--a);text-transform:uppercase;padding-top:4px} .dxagr b{display:block;font-family:"IBM Plex Serif",Georgia,serif;font-weight:400;font-size:23px;color:var(--paper);margin-bottom:6px} .dxagr p{font-size:15px;line-height:1.6;color:var(--cap)} /* prices */ .dxtier ul{list-style:none;margin:16px 0 22px;padding:0} .dxtier > .dxbtn{margin-top:auto;align-self:flex-start;white-space:nowrap} .dxtier li{font-size:15px;line-height:1.55;color:var(--cap);padding:7px 0 7px 18px;position:relative;border-top:1px solid var(--edge)} .dxtier li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:1px;background:var(--a)} .dxthen{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;color:var(--plate);margin-top:8px} /* questions */ .dxfaq{border-top:2px solid var(--paper);columns:2;column-gap:56px} .dxq{break-inside:avoid;padding:20px 0;border-bottom:1px solid var(--edge)} .dxq h3{font-size:19px;line-height:1.2;margin-bottom:8px} .dxq p{font-size:15px;line-height:1.62;color:var(--cap)} /* speakers */ /* Five speakers in a three-column grid leave an empty sixth cell. With the separator drawn as the container's background showing through 1px gaps, that empty cell rendered as a bordered box — a missing card rather than the end of the list. The separators are drawn on the cards themselves now, so the grid simply stops where the people do. */ .dxpeople{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px} .dxperson{background:var(--ink);padding:28px 24px 30px;box-shadow:0 0 0 1px var(--edge);transition:background .3s} .dxperson:hover{background:var(--panel)} /* The portrait frame. It holds a photograph when there is one and the person's initials when there is not — same size, same aspect, same rule, so a card without a picture reads as a decision rather than a hole. On 13 September none of the three confirmed speakers had a photograph anywhere, so the empty state is the one people actually see. */ .dxface{aspect-ratio:3/4;width:100%;max-width:190px;margin-bottom:20px;overflow:hidden; border:1px solid var(--edge2);background:var(--panel);position:relative} .dxface img{display:block;width:100%;height:100%;object-fit:cover; filter:saturate(.9) contrast(1.03);transition:transform .7s cubic-bezier(.2,.7,.3,1)} .dxperson:hover .dxface img{transform:scale(1.03)} .dxnoface{display:flex;align-items:center;justify-content:center; background:linear-gradient(150deg,var(--card) 0%,var(--panel) 70%)} .dxnoface span{font-family:"IBM Plex Serif",Georgia,serif;font-weight:500;font-size:44px; letter-spacing:.02em;color:var(--a);line-height:1} /* A fine rule across the frame, the same line work the plates are drawn with, so the empty frame belongs to this site rather than looking like a broken image. */ .dxnoface::after{content:"";position:absolute;left:0;right:0;bottom:26%;height:1px; background:var(--edge2)} .dxperson h3{font-size:23px;line-height:1.15;margin-bottom:7px} .dxperson p{font-size:15px;line-height:1.55;color:var(--cap);margin-bottom:12px} @media (max-width:900px){ .dxpback{opacity:.4} .dxpback::after{background:linear-gradient(180deg,rgba(6,26,51,.84),rgba(6,26,51,.95))} .dxphero{padding:34px 0 26px} .dxphero h1{font-size:34px} .dxsec h2,.dxband2 h2{font-size:28px} .dxcols.c3,.dxcols.c2,.dxpeople{grid-template-columns:1fr} .dxagr{grid-template-columns:1fr;gap:6px} .dxfaq{columns:1} }