/* =========================================================================== 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. =========================================================================== */ /* palette:start — generated from lib/palette.ts by `npm run tokens`. Do not edit by hand. */ .dx{ --ink:#061A33; --deep:#03101F; --panel:#0B2747; --card:#0F3159; --edge:#1C4577; --edge2:#2B5894; --paper:#F0EBE0; --body:#B8CBDC; --cap:#8FA9C2; --plate:#7E9BB8; --mit:#1A6CB5; --mitdeep:#0A4E85; --draw:#3B6FAC; --a:#35A7F5; --b:#FF5E93; --violet:#9B7CFF; --rose:#FF5E93; --brand-mit:#1A6CB5; --brand-first-experts:#FA59C6; --brand-purple-door:#B67DF7; 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; } .dx .dxpaper{ --ink:#F1F5FB; --deep:#E4ECF6; --panel:#FFFFFF; --card:#FFFFFF; --edge:#CFDCEC; --edge2:#AFC4DB; --paper:#0A1B2E; --body:#33485F; --cap:#4C6480; --plate:#54708E; --mit:#0A4E85; --mitdeep:#083A63; --draw:#7C9BC0; --a:#0E5CAE; --b:#C81C63; --violet:#5B2FE0; --rose:#C81C63; --brand-mit:#0A4E85; --brand-first-experts:#C43195; --brand-purple-door:#8B55C9; background:var(--ink); color:var(--body); } /* palette:end */ /* 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(--plate);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(.82) brightness(.98) contrast(1.06); opacity:.72;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,.93) 0,rgba(6,26,51,.86) 34%,rgba(6,26,51,.52) 68%,rgba(6,26,51,.34) 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 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)} /* Claus, 13 September: "make the actual logos on a white banner." They used to sit on a dark plate for a plain reason — the only artwork we hold is white, and a white logo on a white banner is nothing at all. The files are pure white silhouettes with no colour in them to lose, so they are re-inked to the navy and the plate becomes the white banner he asked for. Proper full-colour marks from the partners would be better than either. */ .dxpaper .dxparts{background:#DCE5F0;border-color:#DCE5F0} .dxpaper .dxparts .dxpart{background:#FFFFFF} .dxpaper .dxparts .dxpart:hover{background:#F6F9FD} .dxpaper .dxparts .dxpart h3{color:#0A1B2E} .dxpaper .dxparts .dxpart p{color:#4C6480} .dxpaper .dxparts .dxpartlogo img{opacity:1} /* The partnership section carries its own dark ground inside the paper band, so its heading takes paper ink like the paragraph beneath it. Without this it inherited the band's dark heading colour and sat at 1.16:1 — published, and unreadable. */ .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. It was .dxpart, the same class as a partner logo card, and the collision published two bugs in one day: "Back this movement." at 1.16:1 because the card's dark heading ink reached the section, and three sponsor tier descriptions at 1.99:1 because the card's pale paragraph ink reached cards on white. One name, one component. The band re-establishes the dark ground. It used to inherit the paper band's reversed tokens while painting itself navy, which is why one tier card was dark and three were white — nobody chose that, it fell out of the mix. */ .dxbacking{padding:10px 0 54px;background:var(--ink)} .dx .dxpaper .dxbacking{ --ink:#0B2747; --deep:#03101F; --panel:#0F3159; --card:#0F3159; --edge:#1C4577; --edge2:#2B5894; --paper:#F0EBE0; --body:#B8CBDC; --cap:#8FA9C2; --plate:#7E9BB8; --a:#35A7F5; --b:#FF5E93; --violet:#9B7CFF; --rose:#FF5E93; background:var(--ink); color:var(--body); padding-left:26px; padding-right:26px; padding-top:34px } .dxbacking h2{font-size:56px;line-height:1;margin-bottom:12px;color:var(--paper)} .dxbacking .dxlede{max-width:70ch;margin-bottom:32px;color:var(--body)} /* 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,.dxbacking 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)} /* The portrait frame with nobody in it yet (Claus, 13 September: "empty boxes with initials"). There is no photograph of any of the three people who have said yes — not on the drive, not in the hub — and we are not going to lift one off somebody's company website. So the empty state has to be a design and not a gap. It is a specimen plate, which is the language the whole site is drawn in: a measured grid, a monogram set in the display serif, and the same hairline the figures are ruled with. It reads as something somebody chose. Drop a photograph into the fourth column of the row and the frame becomes an at the same aspect with nothing else to change. */ .dxnoface{display:flex;align-items:center;justify-content:center; background: repeating-linear-gradient(0deg,transparent 0 17px,rgba(59,111,172,.20) 17px 18px), repeating-linear-gradient(90deg,transparent 0 17px,rgba(59,111,172,.20) 17px 18px), radial-gradient(120% 90% at 50% 34%,rgba(53,167,245,.16),transparent 62%), linear-gradient(150deg,var(--card) 0%,var(--panel) 74%)} .dxnoface span{font-family:"IBM Plex Serif",Georgia,serif;font-weight:400;font-size:50px; letter-spacing:.04em;color:var(--paper);line-height:1;position:relative; padding:14px 0;border-top:1px solid var(--draw);border-bottom:1px solid var(--draw)} /* The corner ticks that mark every measured figure on this site. */ .dxnoface::before,.dxnoface::after{content:"";position:absolute;width:11px;height:11px; border:1px solid var(--draw);border-right:0;border-bottom:0} .dxnoface::before{top:9px;left:9px} .dxnoface::after{bottom:9px;right:9px;transform:rotate(180deg)} .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} } /* ── WhatsApp: the call-out button (Claus, 13 September 2026) ──────────────────────────────── "Where is the whatsapp chat call out button." Nowhere — the number was a line of 12px grey monospace in the top strip, which reads as a system status, not as an invitation. This team answers WhatsApp within the hour and answers a generic inbox in a day, so the cheapest thing the site can do for a lead is put that within a thumb's reach of every page. It was WhatsApp green for half a day. Claus, 13 Sep: "the green whatsapp banner is NOT a chat service." He is right on both counts — this opens WhatsApp on the visitor's own phone, and green borrows the look of a live chat widget we have not built. It wears the site's own paper on ink until the real thing exists, which is a decision waiting on him: a separate business number wired to the hub's Inbox, or a chat that is not WhatsApp at all. */ .dx .dxwa{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:11px; padding:13px 19px 13px 15px;background:var(--paper);color:#0A2340;text-decoration:none; font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase; font-weight:600;border:1px solid var(--paper);box-shadow:0 10px 30px rgba(0,0,0,.42); transition:transform .16s ease,box-shadow .16s ease,background .16s ease} .dx .dxwa:hover{background:#FFFFFF;transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.5)} .dx .dxwa svg{width:23px;height:23px;flex:0 0 auto;fill:#0A2340;display:block} .dx .dxwa:focus-visible{outline:3px solid #FFD166;outline-offset:3px} /* The ring that draws the eye exactly three times and then leaves people alone. A button that pulses forever is a button people learn to ignore. */ .dx .dxwa::before{content:"";position:absolute;inset:-1px;border:2px solid var(--paper); animation:dxwaring 2.1s ease-out 3;pointer-events:none} @keyframes dxwaring{0%{opacity:.85;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.22)}} /* The call-out itself: said once, dismissible, and remembered. It is a greeting, not a pop-up — no overlay, no blocked page, and it never comes back for somebody who has closed it. */ .dx .dxwacall{position:fixed;right:22px;bottom:82px;z-index:60;width:270px;background:var(--paper); color:#123253;border:1px solid #C9BFAC;box-shadow:0 16px 40px rgba(0,0,0,.45);padding:15px 16px 14px; animation:dxwaup .34s cubic-bezier(.2,.8,.3,1) both} .dx .dxwacall p{font-size:14.5px;line-height:1.5;margin:0 0 3px;color:#123253} .dx .dxwacall b{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:#0A4E85;margin-bottom:6px;font-weight:600} .dx .dxwacall i{display:block;font-style:normal;font-size:12.5px;color:#5B6F86;margin-top:7px} .dx .dxwacall .x{position:absolute;top:5px;right:6px;width:28px;height:28px;border:0;background:none; color:#7A889B;font-size:19px;line-height:1;cursor:pointer;padding:0} .dx .dxwacall .x:hover{color:#123253} .dx .dxwacall::after{content:"";position:absolute;right:26px;bottom:-9px;width:14px;height:14px; background:var(--paper);border-right:1px solid #C9BFAC;border-bottom:1px solid #C9BFAC;transform:rotate(45deg)} @keyframes dxwaup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .dx .dxwa::before{animation:none;display:none} .dx .dxwacall{animation:none} .dx .dxwa:hover{transform:none} } /* On a phone the label goes and the glyph stays: a 54px square in the corner, clear of the thumb bar, and never sitting on top of what somebody is reading. */ @media (max-width:560px){ .dx .dxwa{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));gap:0;padding:15px; font-size:0;letter-spacing:0} .dx .dxwa svg{width:25px;height:25px} .dx .dxwacall{right:14px;left:14px;width:auto;bottom:calc(78px + env(safe-area-inset-bottom,0px))} .dx .dxwacall::after{right:22px} } /* ── The top of a phone screen, taken back (Claus, 13 September: "the top banner does not work") ─ At 375px the three strips above the hero were costing 640px of an 812px screen: the utility bar wrapped to three lines, the nav to two rows, and the facts strip to two more. A visitor arriving from an advertisement saw a wall of monospace and no headline at all. One row each. The email address goes — it is in the footer, on the contact page, and anybody who wants us has a green button in the corner. The nav scrolls sideways instead of wrapping, with Apply held out of the scroll so the one thing we want pressed is always on screen. */ @media (max-width:900px){ .dx .dxutil .dxwrap{flex-wrap:nowrap;gap:12px;padding-top:7px;padding-bottom:7px;overflow:hidden} .dx .dxutil a[href^="mailto"]{display:none} .dx .dxutil a[href*="wa.me"]{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px; color:#EAF4FF;border:1px solid #2E7FC4;padding:3px 9px;letter-spacing:.06em} .dx .dxlive{margin-left:auto;flex:1 1 auto;justify-content:flex-end;letter-spacing:.06em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .dx .dxlive span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* The nav wraps rather than scrolls. A sideways scroller saved a row and cost a word: "Tickets" sat half-hidden under the Apply button, and a word cut in half reads as a broken page, not as a hint to swipe. Tighter type and tighter gaps fit all nine links into two rows instead of three, which buys back the same space honestly. */ .dx .dxnav{flex-wrap:wrap;gap:10px 16px;font-size:14px;padding-bottom:12px; justify-content:flex-start;align-items:center} .dx .dxnav a{flex:0 0 auto;white-space:nowrap} .dx .dxnav .dxlang{margin-left:auto;padding:4px 9px;font-size:11.5px} /* Nine links will not fit on two rows at 375px however tightly they are set, so the third row stops being a leftover and becomes the point: Apply, full width, the easiest thing on the page to hit with a thumb. */ .dx .dxnav .dxbtn{flex:1 1 auto;margin-left:0;text-align:center;padding:11px 26px;order:2} /* The facts wrap rather than scroll, for the same reason as the nav: "M WORLD H…" is worse than two short lines. Smaller type keeps it to two. */ .dx .dxfacts .dxwrap{flex-wrap:wrap;gap:2px 14px;font-size:11px;letter-spacing:.06em; padding-top:7px;padding-bottom:7px} } /* ── the narrowest screens: 375px and under ─────────────────────────────────────────────────── */ @media (max-width:560px){ /* The word is the link; the number is on the button in the corner and on the contact page. Dropping it here is what gives the countdown beside it room to be read. */ .dx .dxutil .dxwanum{display:none} .dx .dxutil a[href*="wa.me"]{letter-spacing:.1em} /* The count alone, swapped in by the same script that keeps it current. */ .dx .dxlive span[data-short]{font-size:0;letter-spacing:0} .dx .dxlive span[data-short]::after{content:attr(data-short);font-size:12px;letter-spacing:.08em} /* A greeting should not be bigger than the thing it interrupts. */ .dx .dxwacall{padding:13px 14px 12px} .dx .dxwacall p{font-size:13.5px} .dx .dxwacall i{display:none} } /* ── The top strip, replaced (Claus, 13 September: "or completely remove it, and be creative on it to put somewhere else") ────────────────────────────────────────────────────────────────── The strip held three things. WhatsApp is a button in the corner now; the email address is in the footer and on the contact page; and the only thing worth keeping was the countdown, which was set in 12px grey monospace where nobody reads. So it costs three pixels instead of thirty-eight, and it says the same thing better. The rail is the runway drawn as a line: today's position between the day the site went up and the last day of the event. It is the site's own motif — everything else here is a plotted figure — and it is the one element on every page that changes by itself. The count moves to where the decision is made, beside Apply. Urgency next to the button is worth more than urgency above the logo. */ .dx .dxrail2{height:3px;background:var(--panel);position:relative;overflow:hidden} .dx .dxrail2 i{position:absolute;inset:0 auto 0 0;width:0;display:block; background:linear-gradient(90deg,var(--mit),var(--a)); transition:width 1.2s cubic-bezier(.2,.8,.3,1)} .dx .dxurgent{display:inline-flex;align-items:center;gap:7px;margin-left:auto; font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase; color:#F2F8FF;background:rgba(3,16,31,.66);border:1px solid #2E7FC4;padding:5px 10px;white-space:nowrap} .dx .dxurgent i{width:6px;height:6px;border-radius:50%;background:#7FC4F7;display:block;flex:0 0 auto; animation:dxbreathe 3.6s ease-in-out infinite} /* Inside three weeks it stops being a fact and starts being a deadline. */ .dx .dxurgent.dxnow{border-color:var(--b);color:#FFE4EE;background:rgba(58,10,28,.62)} .dx .dxurgent.dxnow i{background:var(--b);animation-duration:1.9s} .dx .dxnav .dxlang{margin-left:14px} @media (max-width:900px){ /* The chip shares the last row with Apply rather than taking one of its own — the whole point of removing the strip was to give a phone screen its height back, and a countdown on its own line would have handed a row straight back. The short form is the number, which is the part that creates the urgency; the label is already in the countdown block below. */ .dx .dxurgent{order:3;margin-left:0;font-size:11px;padding:0 10px;align-self:stretch} .dx .dxurgent span[data-short]{font-size:0;letter-spacing:0} .dx .dxurgent span[data-short]::after{content:attr(data-short);font-size:11px;letter-spacing:.1em} .dx .dxnav .dxlang{margin-left:10px} } @media (prefers-reduced-motion:reduce){ .dx .dxrail2 i{transition:none} .dx .dxurgent i{animation:none} } /* ── The partners, in their own colours (Claus, 13 September) ───────────────────────────────── Three logos in a row said who they were and nothing about them. Each card now carries a rule in that company's own colour — read off their own websites, not invented — and lights it on hover. It is the one place on the site where a colour that is not ours belongs, and it is enough: a stripe each, not three competing palettes. */ .dxparts .dxpart{border-top:3px solid transparent;transition:border-color .18s ease,background .18s ease} /* The cards sit on white inside the paper band now, so they keep the band's own inks and its light-ground brand colours — no reversal, and nothing to reverse back. */ .dxparts .dxpart.dxfe{border-top-color:var(--brand-first-experts)} .dxparts .dxpart.dxpd{border-top-color:var(--brand-purple-door)} .dxparts .dxpart.dxmit{border-top-color:var(--a)} .dxparts .dxpart.dxfe .dxgo{color:var(--brand-first-experts)} .dxparts .dxpart.dxpd .dxgo{color:var(--brand-purple-door)} .dxparts .dxpart.dxmit .dxgo{color:var(--a)} /* ── The signal, reused (Claus, 13 September) ───────────────────────────────────────────────── The big figure on the home page is the strongest thing on this site and it appeared once. This is the same drawing at a fortieth of the height, used as the rule between sections: same two colours, same dash-flow, same hairline. A divider that belongs to this site instead of a grey line that belongs to anything. */ .dx .dxpulse{height:44px;overflow:hidden;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge); background:var(--deep);opacity:.85} .dx .dxpaper .dxpulse{background:var(--panel);opacity:.7} .dx .dxpulse svg{display:block;width:100%;height:44px} .dx .dxpulse .dxslow{animation-duration:3.9s;opacity:.42} @media (max-width:900px){ .dx .dxpulse,.dx .dxpulse svg{height:32px} } @media (prefers-reduced-motion:reduce){ .dx .dxpulse .dxflow{animation:none;opacity:.4} }