/* From handover/design/app/site-v3.html, brought in by scripts/extract_design.py.
Cowork owns this. Never edit it here: edit the design file and re-run
the extractor, or the two copies drift apart within a day. */
/* Every selector below is behind one class, so this sheet beats the
names kit.css also uses without being loaded after it. The kit is
still the last stylesheet on the page. See scripts/extract_design.py. */
body.st-site{
--t1:11px;
--t2:12px;
--t3:13.5px;
--t4:15px;
--r1:18px;
--r2:22px;
--r3:27px;
--r4:36px;
--r5:48px;
--r6:74px;
--r7:clamp(52px,10.5vw,152px);
--pad:clamp(22px,5.2vw,80px);
--e:cubic-bezier(.16,1,.3,1);
}
.st-site,.st-site *{box-sizing:border-box}
.st-site .lgi{height:var(--h,26px);transition:none}
html{scroll-behavior:smooth}
body.st-site{margin:0;background:var(--w);color:var(--i);font-family:var(--f);
font-size:var(--r1);letter-spacing:-.013em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.st-site button,.st-site a,.st-site input,.st-site select,.st-site textarea{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
text-decoration:none;letter-spacing:inherit}
.st-site :focus-visible{outline:2px solid var(--a);outline-offset:4px}
.st-site .k{font-size:var(--t1);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--i3)}
.st-site .k--a{color:var(--a)}
.st-site .wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad)}
/* ---------- the logo. one mark, one wordmark, colour from context ---------- */
.st-site .lg{display:inline-flex;align-items:center;gap:11px;color:var(--a);line-height:1}
.st-site .lg{transition:opacity .4s var(--e)}
.st-site .lgb:hover .lg{opacity:.62}
.st-site .lg--w{color:var(--w)} .st-site .lg--w .lg--k{color:var(--i)} .st-site .lg--k
/* ---------- the reveal. everything arrives,.st-site nothing pops ---------- */
.up{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e), transform .9s var(--e)}
.st-site .up.in{opacity:1;transform:none}
.st-site .up.d1{transition-delay:.08s}.st-site .up.d2{transition-delay:.16s}.st-site .up.d3{transition-delay:.24s}
.st-site .up.d4{transition-delay:.32s}.st-site .up.d5{transition-delay:.4s}
.st-site .ln{display:block;overflow:hidden;padding:.1em 0;margin:-.1em 0}
.st-site .ln>span{display:block;transform:translateY(104%);transition:transform 1.05s var(--e)}
.st-site .in .ln>span{transform:none}
.st-site .ln:nth-child(2)>span{transition-delay:.09s}
.st-site .ln:nth-child(3)>span{transition-delay:.18s}
.st-site .draw{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--e)}
.st-site .in .draw{transform:scaleX(1)}
/* ---------- nav ---------- */
.st-site .nav{position:fixed;top:0;left:0;right:0;z-index:40;transition:none}
.st-site .nav.sk{background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(18px);
box-shadow:0 1px 0 var(--ln)}
.st-site .nav__i{max-width:1320px;margin:0 auto;padding:0 var(--pad);height:82px;
display:flex;align-items:center;gap:40px;transition:none}
.st-site .nav.sk .nav__i{height:66px}
.st-site .nav.sk .lgi{height:22px}
.st-site .nav__l{display:flex;gap:32px;margin-left:10px}
.st-site .nav__l button{font-size:var(--t4);font-weight:600;color:var(--i2);padding:8px 0;position:relative}
.st-site .nav__l button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
background:var(--a);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--e)}
.st-site .nav__l button:hover::after{transform:scaleX(1)}
.st-site .nav__l button.on{color:var(--i);font-weight:700}
.st-site .nav__l button.on::after{transform:scaleX(1)}
.st-site .nav__r{margin-left:auto;display:flex;gap:12px;align-items:center}
.st-site .burger{display:none;width:34px;height:26px;flex-direction:column;justify-content:center;gap:7px;flex:none}
.st-site .burger i{display:block;height:2px;background:var(--i);transition:transform .5s var(--e), opacity .3s var(--e)}
.st-site .burger.on i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.st-site .burger.on i:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}
.st-site .sheet{position:fixed;inset:0;z-index:39;background:var(--i);color:var(--w);
transform:translateY(-101%);transition:transform .62s var(--e);
display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);visibility:hidden}
.st-site .sheet.on{transform:none;visibility:visible}
.st-site .sheet button[data-go]{display:block;width:100%;text-align:left;font-size:var(--r5);font-weight:700;
letter-spacing:-.04em;padding:16px 0;border-bottom:1px solid var(--i0);color:var(--w)}
.st-site .sheet .acts{margin-top:44px}
/* ---------- the language toggle. two words, a thumb that slides ---------- */
.st-site .lang{position:relative;display:flex;align-items:center;box-shadow:inset 0 0 0 1px var(--ln2);
border-radius:2px;padding:3px;margin-right:6px;isolation:isolate}
.st-site .lang__t{position:absolute;top:3px;bottom:3px;left:3px;width:42px;background:var(--i);
border-radius:1px;z-index:-1;transition:transform .55s var(--e)}
.st-site .lang button{width:42px;height:28px;font-size:var(--t2);font-weight:700;letter-spacing:.09em;
color:var(--i3);transition:none}
.st-site .lang button.on{color:var(--w)}
.st-site .lang:hover .lang__t{background:var(--a)}
/* ---------- buttons that move ---------- */
.st-site .btn{position:relative;overflow:hidden;background:var(--i);color:var(--w);
padding:14px 26px;font-size:var(--t3);font-weight:700;border-radius:2px;white-space:nowrap;
isolation:isolate}
.st-site .btn::before{content:"";position:absolute;inset:0;background:var(--a);z-index:-1;
transform:translateY(101%);transition:transform .5s var(--e)}
.st-site .btn:hover::before{transform:none}
.st-site .btn--a{background:var(--a)}.st-site .btn--a::before{background:var(--i)}
.st-site .btn--g{background:none;color:var(--i);box-shadow:inset 0 0 0 1px var(--ln2)}
.st-site .btn--g::before{background:var(--i)}
.st-site .btn--g:hover{color:var(--w)}
.st-site .btn--w{background:var(--w);color:var(--i)}.st-site .btn--w::before{background:var(--a)}
.st-site .btn--w:hover{color:var(--w)}
.st-site .btn--big{padding:20px 38px;font-size:var(--t4)}
.st-site .go{display:inline-flex;align-items:center;gap:12px;font-size:var(--t4);font-weight:700;color:var(--a)}
.st-site .go i{display:block;width:26px;height:1px;background:currentColor;position:relative;
transition:none}
.st-site .go i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;
border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.st-site .go:hover i{width:48px}
/* ---------- type ---------- */
.st-site .hero{padding:clamp(52px,6vw,84px) 0 clamp(44px,6vw,84px);position:relative}
.st-site h1{font-size:var(--r7);font-weight:700;line-height:.94;letter-spacing:-.05em;margin:22px 0 0}
.st-site html[lang=vi] h1{line-height:1.1;letter-spacing:-.035em}
.st-site html[lang=vi] .lede,.st-site html[lang=vi] h2{letter-spacing:-.02em}
.st-site html[lang=vi] h2{line-height:1.16}
.st-site h1 em{font-style:normal;color:var(--a)}
.st-site .lede{font-size:var(--r3);color:var(--i2);line-height:1.42;margin:40px 0 0;max-width:36ch;
letter-spacing:-.022em}
.st-site .acts{display:flex;gap:14px;margin-top:48px;flex-wrap:wrap}
.st-site h2{font-size:var(--r6);font-weight:700;letter-spacing:-.042em;line-height:1.02;margin:18px 0 0;max-width:16ch}
.st-site h3{font-size:var(--r4);font-weight:700;letter-spacing:-.032em;line-height:1.1;margin:0}
.st-site p{line-height:1.6;color:var(--i2);margin:18px 0 0;font-size:var(--r1)}
.st-site .sec{padding:72px 0;position:relative}
.st-site .sec--i{background:var(--i);color:var(--w)}
.st-site .sec--i p{color:var(--i4)}.st-site .sec--i .k{color:var(--i4)}
.st-site .sec__h{margin-bottom:64px;max-width:38ch}
.st-site .rule{height:1px;background:var(--ln);margin:0}
.st-site .sec--i .rule{background:var(--i0)}
/* ---------- the marquee ---------- */
.st-site .mq{overflow:hidden;padding:26px 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);
background:var(--w2)}
.st-site .mq__t{display:flex;gap:58px;width:max-content;animation:slide 34s linear infinite}
.st-site .mq:hover .mq__t{animation-play-state:paused}
.st-site .mq span{font-size:var(--r2);font-weight:700;letter-spacing:-.028em;color:var(--i3);white-space:nowrap}
.st-site .mq span b{color:var(--a);font-weight:700}
@keyframes slide{from{transform:none}to{transform:translateX(-50%)}}
/* ---------- figures ---------- */
.st-site .figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.st-site .fig{padding:40px 0 34px;position:relative}
.st-site .fig::before{content:"";position:absolute;left:0;top:0;right:22px;height:2px;background:var(--i);
transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--e)}
.st-site .in .fig::before{transform:scaleX(1)}
.st-site .fig:nth-child(2)::before{transition-delay:.1s}
.st-site .fig:nth-child(3)::before{transition-delay:.2s}
.st-site .fig:nth-child(4)::before{transition-delay:.3s}
.st-site .fig b{display:block;font-size:var(--r6);font-weight:700;letter-spacing:-.05em;line-height:.94;
font-variant-numeric:tabular-nums;padding-bottom:.04em}
.st-site .fig::after{content:"";position:absolute;left:0;bottom:22px;height:2px;width:0;background:var(--a);
transition:none}
.st-site .in .fig::after{width:34px}
.st-site .fig--big b{font-size:clamp(64px,7.4vw,104px)}
.st-site .fig span{display:block;font-size:var(--t3);color:var(--i3);margin-top:16px;max-width:18ch;line-height:1.45}
/* ---------- paths ---------- */
.st-site .paths{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.st-site .path{padding:56px 48px;position:relative;transition:transform .55s var(--e)}
.st-site .path--i{background:var(--i);color:var(--w)}
.st-site .path--i .k{color:var(--a)}
.st-site .path--w{background:var(--w2)}
.st-site .path:hover{transform:translateY(-8px)}
.st-site .path--w:hover{background:var(--aw)}
.st-site .path__n{font-size:var(--r6);font-weight:700;letter-spacing:-.05em;line-height:.86;opacity:.16;display:block}
.st-site .path--i .path__n{opacity:.32}
.st-site .path h3{margin:22px 0 0}
.st-site .path ul{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:0}
.st-site .path li{font-size:var(--r1);color:var(--i2);padding:15px 0;border-top:1px solid var(--ln2);
display:flex;align-items:center;gap:16px;transition:none}
.st-site .path--i li{color:var(--i4);border-top-color:var(--i0)}
.st-site .path li:hover{padding-left:12px}
.st-site .path li b{font-size:var(--t1);font-weight:700;color:var(--a);letter-spacing:.1em;
min-width:22px;font-variant-numeric:tabular-nums}
.st-site .path .go{margin-top:34px}
.st-site .path--i .go{color:var(--w)}
/* ---------- cards ---------- */
.st-site .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:2px}
.st-site .card{text-align:left;display:block;width:100%;background:var(--w);padding:0 0 34px;position:relative}
.st-site .card__c{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--w3);display:block}
.st-site .card__c svg,.st-site .card__img{display:block;width:100%;height:100%;object-fit:cover;
transition:transform 1.15s var(--e);transform-origin:50% 60%}
.st-site .card:hover .card__c svg,.st-site .card:hover .card__img{transform:scale(1.07)}
.st-site .card__c::after{content:"";position:absolute;inset:0;background:var(--a);opacity:0;
mix-blend-mode:multiply;transition:opacity .5s var(--e)}
.st-site .card:hover .card__c::after{opacity:.12}
.st-site .card__f{position:absolute;left:0;top:0;background:var(--w);padding:8px 14px;
font-size:var(--t1);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--a)}
.st-site .card__t{font-size:var(--r3);font-weight:700;letter-spacing:-.03em;line-height:1.14;
margin:26px 0 10px;display:block;padding-right:22px}
.st-site .card__m{font-size:var(--t3);color:var(--i3);display:block}
/* ---------- the academy, filtered ---------- */
.st-site .filt{position:sticky;top:66px;z-index:20;background:rgba(255,255,255,.94);
backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--ln);
padding:18px 0;margin-bottom:44px}
.st-site .filt__i{max-width:1320px;margin:0 auto;padding:0 var(--pad);display:flex;
align-items:center;gap:22px;flex-wrap:wrap}
.st-site .filt__q{flex:1;min-width:180px;position:relative}
.st-site .filt__q input{width:100%;padding:8px 0;border:0;background:none;outline:0;font-size:var(--t4)}
.st-site .filt__q .u{display:block;height:1px;background:var(--ln2);position:relative}
.st-site .filt__q .u::after{content:"";position:absolute;inset:0;background:var(--a);transform:scaleX(0);
transform-origin:0 50%;transition:transform .45s var(--e)}
.st-site .filt__q input:focus~.u::after{transform:scaleX(1)}
.st-site .chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.st-site .chip{font-size:var(--t3);font-weight:700;padding:7px 14px;border-radius:2px;white-space:nowrap;
box-shadow:inset 0 0 0 1px var(--ln2);color:var(--i2);transition:.3s var(--e)}
.st-site .chip:hover{box-shadow:inset 0 0 0 1px var(--i)}
.st-site .chip.on{background:var(--i);color:var(--w);box-shadow:none}
.st-site .chip em{font-style:normal;opacity:.55;margin-left:6px;font-variant-numeric:tabular-nums}
.st-site .chip[disabled]{opacity:.4;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--ln)}
.st-site .chip[disabled]:hover{box-shadow:inset 0 0 0 1px var(--ln)}
.st-site .secn{display:flex;align-items:baseline;justify-content:space-between;gap:22px;
padding-bottom:14px;border-bottom:2px solid var(--i);margin:64px 0 30px}
.st-site .secn:first-of-type{margin-top:0}
.st-site .secn h3{font-size:var(--r4);font-weight:700;letter-spacing:-.035em}
.st-site .nores{padding:80px 0;font-size:var(--r3);color:var(--i3);letter-spacing:-.02em}
.st-site .nores b{color:var(--i);display:block;font-weight:700;margin-bottom:10px}
/* ---------- the tabs. a line that moves, a screen that slides in ---------- */
.st-site .tabs{display:grid;grid-template-columns:minmax(300px,.86fr) 1.14fr;gap:clamp(30px,5vw,84px);
align-items:center}
.st-site .tabs__l{position:relative;padding-left:28px}
.st-site .rail{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--i0)}
.st-site .sec--w .rail{background:var(--ln)}
.st-site .rail__i{position:absolute;left:0;width:2px;background:rgba(79,70,229,.3);top:0}
.st-site .rail__i b{position:absolute;inset:0;background:var(--a);transform-origin:50% 0;transform:scaleY(1)}
.st-site .rail__i b.run{animation:fill 7s linear forwards}
@keyframes fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.st-site .tab{display:block;width:100%;text-align:left;padding:24px 20px 24px 0;position:relative}
.st-site .tab h3{font-size:var(--r3);font-weight:700;color:var(--i3);transition:none}
.st-site .sec--w .tab h3{color:var(--i3)}
.st-site .tab span{display:block;font-size:var(--t4);line-height:1.5;color:var(--i3);max-height:0;opacity:0;
overflow:hidden;transition:opacity .5s var(--e);margin-top:0}
.st-site .tab.on h3{color:var(--w)}
.st-site .sec--w .tab.on h3{color:var(--i)}
.st-site .tab.on span{max-height:120px;opacity:1;margin-top:14px}
.st-site .tab:hover h3{color:var(--i4)}
.st-site .sec--w .tab:hover h3{color:var(--i2)}
.st-site .tab.on:hover h3{color:var(--w)}
.st-site .sec--w .tab.on:hover h3{color:var(--i)}
.st-site .stage{position:relative}
.st-site .pnl{position:absolute;inset:0;opacity:0;transform:translateX(70px);pointer-events:none;
transition:opacity .34s ease, transform .34s ease}
.st-site .pnl.on{opacity:1;transform:none;pointer-events:auto;
transition:opacity .8s var(--e) .1s, transform .8s var(--e) .1s}
.st-site .pnl.out{opacity:0;transform:translateX(-48px);transition:opacity .3s ease, transform .3s ease}
.st-site .pnl__s{display:block;width:100%;background:var(--i0);border-radius:2px;overflow:hidden}
.st-site .sec--w .pnl__s{background:var(--w2)}
.st-site .pnl__s svg{display:block;width:100%;height:auto}
.st-site .pnl ul{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0}
.st-site .pnl li{font-size:var(--t4);color:var(--i4);padding:15px 0;border-top:1px solid var(--i0);
display:flex;gap:14px;align-items:center;opacity:0;transform:translateY(14px)}
.st-site .sec--w .pnl li{color:var(--i2);border-top-color:var(--ln)}
.st-site .pnl.on li{opacity:1;transform:none;transition:opacity .6s var(--e), transform .6s var(--e)}
.st-site .pnl.on li:nth-child(1){transition-delay:.3s}
.st-site .pnl.on li:nth-child(2){transition-delay:.38s}
.st-site .pnl.on li:nth-child(3){transition-delay:.46s}
.st-site .pnl li i{display:block;width:6px;height:6px;background:var(--a);flex:none}
/* ---------- about comparison ---------- */
.st-site .vs{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.st-site .vs>div{padding:48px 44px}
.st-site .vs>div:first-child{background:var(--w2)}
.st-site .vs>div:last-child{background:var(--i);color:var(--w)}
.st-site .vs>div:last-child .k{color:var(--a)}
.st-site .vs ul{list-style:none;margin:30px 0 0;padding:0}
.st-site .vs li{font-size:var(--r2);line-height:1.34;padding:20px 0;border-top:1px solid var(--ln2);
letter-spacing:-.022em;color:var(--i2)}
.st-site .vs>div:last-child li{color:var(--w);border-top-color:var(--i0)}
/* ---------- steps ---------- */
.st-site .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px}
.st-site .step{padding:48px 40px 48px 0;position:relative}
.st-site .step b{display:block;font-size:var(--r5);font-weight:700;letter-spacing:-.045em;
color:var(--ln2);line-height:.9;transition:none}
.st-site .sec--i .step b{color:var(--i0)}
.st-site .step:hover b{color:var(--a)}
.st-site .step h3{font-size:var(--r3);margin:24px 0 0}
/* ---------- contact ---------- */
.st-site .cx{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;align-items:start}
.st-site .fg{margin-bottom:34px;position:relative}
.st-site .fg label{display:block;margin-bottom:12px}
.st-site .fg input,.st-site .fg select,.st-site .fg textarea{width:100%;padding:16px 0;border:0;background:none;
font:inherit;font-size:var(--r3);outline:0;letter-spacing:-.026em;color:var(--i);cursor:auto}
.st-site .fg textarea{min-height:120px;resize:vertical;font-size:var(--r2)}
.st-site .fg .bar{height:1px;background:var(--ln2);position:relative;display:block}
.st-site .fg .bar::after{content:"";position:absolute;inset:0;background:var(--a);
transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--e)}
.st-site .fg input:focus~.bar::after,.st-site .fg select:focus~.bar::after,.st-site .fg textarea:focus~.bar::after{transform:scaleX(1)}
.st-site .det{display:grid}
.st-site .det>div{padding:30px 0;border-top:1px solid var(--ln)}
.st-site .det b{display:block;font-size:var(--r3);font-weight:700;letter-spacing:-.028em;margin-top:12px}
.st-site .det span.s{font-size:var(--t3);color:var(--i3);display:block;margin-top:10px;line-height:1.5}
/* ---------- foot ---------- */
.st-site .foot{background:var(--a);color:var(--w);padding:72px 0 48px}
.st-site .foot .k{color:var(--w);opacity:.7}
.st-site .foot__t{font-size:var(--r5);font-weight:700;letter-spacing:-.042em;line-height:1.02;
max-width:14ch;margin:30px 0 0}
.st-site .foot__g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-top:80px}
.st-site .foot ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.st-site .foot li a{font-size:var(--t4);color:var(--w);position:relative;display:inline-block}
.st-site .foot li a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
background:var(--w);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--e)}
.st-site .foot li a:hover{color:var(--w)}
.st-site .foot li a:hover::after{transform:scaleX(1)}
.st-site .foot__b{margin-top:76px;padding-top:30px;border-top:1px solid rgba(255,255,255,.3);
display:flex;gap:26px;flex-wrap:wrap;font-size:var(--t3);color:var(--w);opacity:.7}
.st-site .foot__b span{margin-right:auto}
.st-site .tt{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(18px);
background:var(--i);color:var(--w);padding:16px 26px;font-size:var(--t4);border-radius:2px;
opacity:0;pointer-events:none;transition:.35s var(--e);z-index:60}
.st-site .tt.on{opacity:1;transform:translateX(-50%)}
@media(prefers-reduced-motion:reduce){
.st-site,.st-site *{animation-duration:.01ms!important;transition-duration:.01ms!important}
.st-site .up{opacity:1;transform:none}.st-site .ln>span{transform:none}.st-site .draw{transform:none}
.st-site .pnl.on li{opacity:1;transform:none}
}
@media(max-width:920px){
.st-site .paths,.st-site .vs,.st-site .cx,.st-site .tabs{grid-template-columns:1fr}
.st-site .foot__g{grid-template-columns:1fr 1fr}
.st-site .nav__l{display:none}
.st-site .burger{display:flex}
.st-site .nav__r .btn{display:none}
.st-site .path{padding:40px 28px}
.st-site .stage{min-height:0;position:static}
.st-site .pnl{position:relative;display:none}
.st-site .pnl.on{display:block}
}
/* ------------------------------------------------------------------ ours
THE HOME PAGE'S HERO. Tab 1 of handover/design/app/day-v1.html, the
"picture beside" option, which is the one Gauthier picked.
Two things change and one is added.
The headline was var(--r7), a clamp that runs to 152px, and at that size
three words fill a laptop screen and the lede is below the fold. It is half
that: 74px at the top end, which is her --d6.
The eyebrow sits four pixels under the menu instead of eighty, so the first
line a person reads is the first thing on the page rather than the thing
after a gap.
And there is a photograph beside it. Grey and faded until somebody's
pointer is on it, then it comes up in colour over a second: it is the one
piece of warmth on a page that is otherwise white, black and one blue. No
rounded corners on either the picture or the tag across it, whatever her
file says, because section 7 of CLAUDE.md is not a preference. */
.st-site .hero--pic{padding:4px 0 64px}
.st-site .hero--pic .up{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
gap:44px;align-items:start}
.st-site .hero--pic h1{font-size:clamp(36px,7.4vw,74px);margin:16px 0 0}
.st-site .hero--pic .lede{margin:22px 0 0}
.st-site .hero--pic .acts{margin:30px 0 0}
.st-site .pic{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--w3)}
.st-site .pic img{width:100%;height:100%;object-fit:cover;display:block;
filter:grayscale(1) contrast(1.05);opacity:.55;
transition:opacity 1.2s var(--e)}
.st-site .pic:hover img{filter:grayscale(0);opacity:1}
/* The picture fades into the page on the two sides it meets it, so it reads as
part of the spread rather than as a photograph in a box. */
.st-site .pic::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,var(--w) 0%,rgba(255,255,255,0) 45%),
linear-gradient(0deg,var(--w) 0%,rgba(255,255,255,0) 40%)}
.st-site .pic__tag{position:absolute;left:22px;bottom:22px;z-index:2;
background:var(--i);color:var(--w);font-size:var(--t2);font-weight:700;
letter-spacing:.1em;text-transform:uppercase;padding:8px 12px}
@media(max-width:900px){
.st-site .hero--pic .up{grid-template-columns:1fr;gap:30px}
.st-site .pic{aspect-ratio:16/9}
}
@media(prefers-reduced-motion:reduce){
.st-site .pic img{transition:none}
}
/* ------------------------------------------------------------------ ours
THE BAR IS FIXED, SO THE PAGE HAS TO KNOW HOW TALL IT IS.
The bar is position:fixed and nothing reserved the space it takes, so the
first line of every page was drawn underneath it. It never showed because
each hero happened to carry a top padding big enough to push its own content
clear, which is not a rule, it is a coincidence, and the moment one hero
asked for four pixels the logo and the eyebrow were on top of each other.
So the height is named once, the bar reads it, and the page reserves exactly
that much. Neither can drift from the other, and a page cannot start under
the bar whatever padding it does or does not carry. The bar shrinks to 66 on
scroll: the reservation stays at the full height, because by then the page
has moved and a smaller bar cannot cover anything it was not already over. */
body.st-site{--nav-h:82px;padding-top:var(--nav-h)}
.st-site .nav__i{height:var(--nav-h)}
/* Now that the bar's height is reserved rather than guessed at, a hero's own
padding is breathing room instead of compensation, and it is off the scale. */
.st-site .hero{padding-top:clamp(22px,3vw,44px)}
.st-site .hero--pic{padding-top:4px}
/* ------------------------------------------------------------------ ours
THE FOUR NUMBERS, AS TILES. Tab 2 of day-v1.html, option 2, the one chosen.
Four squares, black and blue alternating, the figure in the bottom left with
its label under it, and a lighter fill that rises from the bottom while the
figure counts up. It draws once, when it comes into view, and never again,
because each tile carries the same "up" class the rest of the page uses.
Square corners, whatever her file says: section 7 of the brief. */
.st-site .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.st-site .tile{position:relative;aspect-ratio:1;background:var(--i);color:var(--w);
overflow:hidden;padding:22px;display:flex;flex-direction:column;justify-content:flex-end}
.st-site .tile:nth-child(2n){background:var(--a)}
.st-site .tile .fill{position:absolute;left:0;right:0;bottom:0;height:0;
background:rgba(255,255,255,.12);transition:none}
.st-site .tile.in .fill{height:var(--fh,60%)}
.st-site .tile b{position:relative;font-size:clamp(30px,4.2vw,58px);font-weight:700;
letter-spacing:-.04em;line-height:.9;font-variant-numeric:tabular-nums}
.st-site .tile span{position:relative;font-size:var(--t3);opacity:.8;margin-top:12px;
color:inherit;line-height:1.35}
@media(max-width:900px){ .st-site .tiles{grid-template-columns:repeat(2,1fr)} }
@media(prefers-reduced-motion:reduce){
/* The fill still shows how full the tile is. It just does not travel. */
.st-site .tile .fill{transition:none}
}
/* ------------------------------------------------------------------ ours
THE CONTENT BOX ON A BIG SCREEN. 8 September.
The box was 1320 wide with 80 of padding each side, so on a wide monitor a
person read a 1160 column with 400 pixels of nothing down either edge. It is
1360 of content now, which is 1520 of box.
Only above 1400. Below that the box was never the thing making the page
narrow, the window was, and a change there would move a layout that is
right. The bar and the filter bar are widened with it, because a header that
does not line up with the page under it is worse than a narrow page.
The ticker is untouched: it has no box, it runs the full width, and that is
the point of it. The hero photograph is a fraction of the row, so it grows
with the box on its own. */
@media(min-width:1400px){
.st-site .wrap,
.st-site .nav__i,
.st-site .filt__i{max-width:1520px}
}
/* ------------------------------------------------------------------ ours
THE ACADEMY. Tab 3 of day-v1.html.
The old page, piece for piece, in the new clothes: audience tabs with a
count, category groups with a heading, a count and a rule, and cards with
the photograph, the badge, the title, how many steps and Start. A group with
nothing in it is not drawn, so a count is always true.
It is the same page for everybody now. A learner's own record is at /my/,
which is a screen, not this screen wearing a different face. Square corners
throughout, whatever her file says. */
/* The academy's audience tabs. Named #acTabs and not .tabs, because .tabs is
already the home page's sliding steps and this sheet is on both screens.
Unscoped, these rules reached the home page and turned her step list into
a row of bordered chips with the panel beside it collapsed to nothing.
Inline, in one row, and not sticky: a bar that follows the page down ends
up over the cards. */
.st-site #acTabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
margin:0 0 44px;padding:0 0 16px;border-bottom:1px solid var(--ln)}
/* Inline, in a row. Her sliding steps are also .tab and she draws those as
display:block, width:100%, which is right for a list down a column and
turns these into three stacked bars. The id beats the class. */
.st-site #acTabs .tab{display:inline-flex;width:auto;flex:0 0 auto;
border:1px solid var(--ln2);background:var(--w);color:var(--i);cursor:pointer;
padding:11px 18px;font-family:var(--f);font-weight:600;font-size:var(--t4);
display:inline-flex;gap:10px;align-items:center;transition:none}
.st-site #acTabs .tab i{font-style:normal;font-size:var(--t2);font-weight:700;background:var(--w3);
padding:2px 8px;color:var(--i3)}
.st-site #acTabs .tab:hover{border-color:var(--i)}
.st-site #acTabs .tab.on{background:var(--i);color:var(--w);border-color:var(--i)}
.st-site #acTabs .tab.on i{background:var(--i1);color:var(--w)}
.st-site #acPanes .pane{display:none}
.st-site #acPanes .pane.on{display:block}
.st-site .group{margin:0 0 64px}
.st-site .group:last-child{margin-bottom:0}
.st-site .ghead{display:flex;align-items:baseline;gap:16px;border-bottom:2px solid var(--i);
padding-bottom:12px;margin-bottom:22px}
.st-site .ghead h3{margin:0;font-size:var(--r4);font-weight:700;letter-spacing:-.03em}
.st-site .gcount{font-size:var(--t2);letter-spacing:.08em;text-transform:uppercase;
color:var(--i3);font-weight:700}
.st-site .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.st-site .card{display:flex;flex-direction:column;background:var(--w);border:1px solid var(--ln);
overflow:hidden;text-decoration:none;color:inherit;
transition:transform .35s var(--e)}
.st-site .card:hover{transform:translateY(-3px);border-color:var(--i)}
.st-site .thumb{display:block;height:160px;background:var(--w3);position:relative}
.st-site .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.st-site .badge{position:absolute;top:12px;left:12px;font-size:var(--t1);font-weight:700;
letter-spacing:.1em;text-transform:uppercase;padding:6px 10px;background:var(--w);color:var(--i)}
.st-site .badge--free{background:var(--a);color:var(--w)}
.st-site .card .body{display:flex;flex-direction:column;gap:8px;padding:22px;flex:1}
.st-site .ttl{font-size:var(--r2);font-weight:700;line-height:1.2;letter-spacing:-.026em}
.st-site .ex{font-size:var(--t4);color:var(--i3);line-height:1.5;flex:1}
.st-site .card .meta{display:flex;justify-content:space-between;gap:12px;font-size:var(--t2);
letter-spacing:.06em;text-transform:uppercase;color:var(--i3);font-weight:700;
border-top:1px solid var(--ln);padding-top:12px;margin-top:4px}
.st-site .card .meta .go{color:var(--a)}
/* ------------------------------------------------------------------ ours
GAUTHIER'S EDITS, 8 September. Numbers 3, 4 and 5 on his list.
3. HOW IT WORKS was a viewport tall with the content floating in the middle
of it. Its height is the height of what is in it now: 72 top and bottom,
the steps and the picture centred against each other, the three lines
under the card.
4. TWO PATHS and START WITH A FREE ONE had the same too much white above and
below. 72 as well, no minimum height, and 48 between the two of them.
5. THE FOOTER was near black. It is the accent now, every word white, and
the legal line at seven tenths rather than a fifth grey nobody can read
on blue. */
.st-site .sec--i{padding:72px 0}
.st-site .sec--i .sec__h{margin-bottom:44px}
.st-site .sec--i .stage,.st-site .sec--i .pnl{min-height:0}
/* The step list and the picture card are already centred against each other by
her own .tabs grid, which does it with align-items. What was pushing them
apart is the three lines under the card: 30 above them, and the stage is as
tall as the tallest panel, so the tallest one sets the gap for all four.
Cowork's number is 16. */
.st-site .sec--i .pnl ul{margin-top:16px}
/* The stage is as tall as the tallest of the four panels, which is her rule and
is right: the section must not jump height when a tab changes. What was
wrong is where the shorter panels sat inside it. They were pinned to the top
and bottom of that height with the difference dumped in one band, which is
the empty space Gauthier saw. Centred, the difference is shared, and every
panel reads as the same block of content. */
.st-site .sec--i .pnl{display:flex;flex-direction:column;justify-content:center}
/* Two paths, and Start with a free one. */
.st-site .sec--paths,.st-site .sec--free{padding:72px 0;min-height:0}
.st-site .sec--paths + .sec--free,.st-site .sec--paths + .rule + .sec--free{margin-top:48px}
/* A programme, as one card: the courses in it, in order, under one name.
Not a link itself, because a programme is not a page: it is these courses,
and each one under it is a link. */
.st-site .card.prog{display:flex;flex-direction:column;background:var(--w);border:1px solid var(--ln)}
.st-site .prog__h{padding:22px;border-bottom:1px solid var(--ln)}
.st-site .prog__h .ttl{display:block;margin:8px 0 4px}
.st-site .prog__h .ex{display:block}
.st-site .badge--prog{display:inline-block;background:var(--i);color:var(--w);
font-size:var(--t2);font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px}
.st-site .prog__l{display:flex;flex-direction:column}
.st-site .prog__c{display:flex;gap:12px;align-items:baseline;padding:14px 22px;
border-bottom:1px solid var(--ln);text-decoration:none;color:var(--i);
font-size:var(--t4);transition:none}
.st-site .prog__c:last-child{border-bottom:0}
.st-site .prog__c:hover{background:var(--aw)}
.st-site .prog__n{flex:none;font-size:var(--t2);font-weight:700;color:var(--i3);
font-variant-numeric:tabular-nums}
.st-site .prog__t{flex:1;line-height:1.35}
/* The sector row under the audience tabs. Quieter than the tabs, because it is
a filter inside the choice they made and not a second choice of the same
size. */
.st-site .secs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.st-site .sec-b{font-size:var(--t3);font-weight:600;padding:8px 14px;border:1px solid var(--ln);
background:var(--w);color:var(--i2);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.st-site .sec-b i{font-style:normal;font-size:var(--t2);font-weight:700;color:var(--i3)}
.st-site .sec-b:hover{border-color:var(--i)}
.st-site .sec-b.on{background:var(--i);color:var(--w);border-color:var(--i)}
.st-site .sec-b.on i{color:var(--w)}
/* The audience tabs, and the lecturer button beside them. The tabs are for a
learner choosing what they are; the button is for somebody who wants to
teach. They are on one line because they are both "who are you", and the
button is the quiet kind so it does not compete with the tabs. */
.st-site .actabs{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.st-site .actabs #acTabs{flex:1 1 auto;margin:0}
.st-site .actabs__l{flex:none;white-space:nowrap}
@media(max-width:720px){
.st-site .actabs{gap:16px}
.st-site .actabs__l{width:100%;text-align:center}
}
/* The footer. Blue, and every word on it white. */
.st-site .foot{background:var(--a);color:var(--w);padding:72px 0 48px}
.st-site .foot .k{color:var(--w)}
.st-site .foot li a{color:var(--w)}
.st-site .foot li a:hover{color:var(--w)}
.st-site .foot__b{border-top:1px solid rgba(255,255,255,.35);color:rgba(255,255,255,.7)}
.st-site .foot__b a{color:rgba(255,255,255,.7)}
.st-site .foot__b a:hover{color:var(--w)}