/* ============================ THE PUBLIC SITE ============================ Every public page: base.css + this file (pages/index.html adds the game's sheets for its demos). Serif headlines, sans interface, mono code. All motion inside prefers-reduced-motion. */ /* ---------- brand lockup and button (the app has its own, css/home.css) ---------- */ .doorbrand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none} .doorbrand img{width:30px;height:30px;display:block} .doorbrand b{font:600 16px/1 var(--site-serif);letter-spacing:-.005em;font-variation-settings:'SOFT' 0,'WONK' 0} /* the logo's lettering (partials/logo.php): Fraunces at its softest and wonkiest — the headings' family, friendlier */ .doorbrand .logoword{font-size:18px;font-weight:700;letter-spacing:-.02em;font-variation-settings:'SOFT' 100,'WONK' 1,'opsz' 144} .doorbtn{display:block;width:100%;margin:8px 0 0;padding:14px;border-radius:12px;background:var(--terracotta); color:#fff;font:600 15px/1 var(--site-sans);text-align:center;text-decoration:none;border:0; box-shadow:0 1px 0 var(--terra-deep) inset,0 10px 24px -14px rgba(182,74,36,.9); transition:background .2s,transform .2s,box-shadow .2s} .doorbtn:hover{background:var(--terra-deep);transform:translateY(-1px);box-shadow:0 14px 28px -14px rgba(182,74,36,.95)} .abtn{display:inline-block;font:500 13px/1 var(--site-sans);padding:9px 11px;border-radius:10px;background:transparent; border:1px solid var(--line);color:var(--ink2);text-decoration:none;transition:border-color .2s,color .2s} .abtn:hover{border-color:var(--terracotta);color:var(--terra-deep)} /* ============================ THE PAGE ITSELF ============================ */ html.landing{ /* Fraunces has no Chinese; a system Ming face carries the 中文 headlines, and IBM Plex Sans hands CJK body text to Noto Sans SC. */ --site-serif:'Fraunces','Songti SC','SimSun','Noto Serif SC',Georgia,serif; --site-sans:'IBM Plex Sans','Noto Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif; /* the container ladder: one number, three stops, every wide block reads it */ --site-max:1320px; --site-gut:clamp(20px,4.4vw,44px); --rule:rgba(120,80,55,.16); /* the hairline the whole sheet is ruled with */ --ink-soft:#22252b; /* the dark band, a hair off pure --ink */ scroll-behavior:smooth;scroll-padding-top:92px; } @media (min-width:1600px){ html.landing{ --site-max:1480px } } @media (min-width:1920px){ html.landing{ --site-max:1640px } } @media (min-width:2200px){ html.landing{ --site-max:1960px } } /* only the root scrolls, and carries the background so a bounce past the top or bottom shows the page, not white */ html.landing{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto} html.landing body{min-height:100vh;overflow:visible;font-family:var(--site-sans);background:transparent} html.landing{background-color:var(--paper)} /* the washes sit on one fixed layer, painted once: background-attachment:fixed would repaint the whole screen on every scroll frame */ html.landing::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image: radial-gradient(62% 40% at 16% 4%,rgba(214,166,124,.13) 0%,transparent 72%), radial-gradient(48% 34% at 74% 34%,rgba(188,146,110,.10) 0%,transparent 74%), radial-gradient(78% 44% at 34% 88%,rgba(206,163,124,.11) 0%,transparent 72%), radial-gradient(40% 28% at 96% 74%,rgba(176,139,108,.09) 0%,transparent 76%), radial-gradient(125% 55% at 82% -12%,var(--terra-tint) 0%,transparent 60%), radial-gradient(70% 45% at -14% 26%,var(--cyan-tint) 0%,transparent 55%)} /* grain, so the flat colour reads as paper */ html.landing body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.42; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E")} html.landing body > *:not(.lhead){position:relative;z-index:1} /* ---------- the header: a glass capsule that narrows once scrolled (.stuck) ---------- */ .lhead{position:sticky;top:0;z-index:30;padding:22px var(--site-gut) 0; transition:padding .5s cubic-bezier(.2,.8,.2,1)} .lhead.stuck{padding-top:12px} .lbar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px; max-width:var(--site-max);margin:0 auto;padding:12px 12px 12px 26px;border-radius:999px; background:rgba(255,255,255,.38); -webkit-backdrop-filter:blur(16px) saturate(1.7); backdrop-filter:blur(16px) saturate(1.7); box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(120,80,55,.06), 0 2px 6px -2px rgba(20,22,26,.06),0 18px 44px -20px rgba(120,80,55,.35); transition:max-width .55s cubic-bezier(.2,.8,.2,1),padding .5s cubic-bezier(.2,.8,.2,1), background .35s,box-shadow .35s} /* the sheen: light pooled along the top */ .lbar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.08) 48%,rgba(255,255,255,0) 70%)} /* the rim: a 1px border lit bright at the top-left and bottom-right, like light caught in the edge of a glass lens */ .lbar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px; background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,.25) 32%, rgba(255,255,255,.12) 62%,rgba(255,255,255,.75)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .lbar > *{position:relative;z-index:1} .lhead.stuck .lbar{max-width:min(1060px,100%);padding:8px 8px 8px 20px;background:rgba(255,255,255,.5); box-shadow:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(120,80,55,.07), 0 2px 6px -2px rgba(20,22,26,.07),0 22px 50px -22px rgba(120,80,55,.45)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .lbar,.lhead.stuck .lbar{background:rgba(255,255,255,.94)} } .lnav{display:flex;align-items:center;gap:2px} .lnk{font:450 15.5px/1 var(--site-sans);color:var(--ink2);text-decoration:none;padding:11px 16px;border-radius:999px; white-space:nowrap;transition:color .2s,background .2s} .lnk:hover{color:var(--ink);background:rgba(255,255,255,.7)} .lhead .abtn{border-color:transparent;border-radius:999px;font-size:15px;padding:10px 13px} .lhead .abtn:hover{background:rgba(255,255,255,.7);border-color:transparent} .doorbtn.lmini{display:inline-block;width:auto;margin:0 0 0 6px;padding:13px 24px;border-radius:999px; font-size:15.5px;white-space:nowrap;text-decoration:none;transition:padding .5s,font-size .5s,background .2s,opacity .4s,max-width .5s,margin .5s,visibility .4s} .lhead .doorbrand img{width:36px;height:36px;transition:width .5s,height .5s} .lhead .doorbrand b{font-size:24px;transition:font-size .5s} .lnk,.lhead .abtn{transition:color .2s,background .2s,font-size .5s,padding .5s} .lhead.stuck .lnk{font-size:14.5px;padding:10px 14px} .lhead.stuck .abtn{font-size:14px;padding:9px 12px} .lhead.stuck .doorbtn.lmini{padding:11px 20px;font-size:14px} /* the way in joins the bar only once the reader has scrolled, as Brilliant does */ .lhead:not(.stuck) .doorbtn.lmini{opacity:0;visibility:hidden;max-width:0;padding-left:0;padding-right:0;margin:0;overflow:hidden} .doorbtn.lmini{max-width:220px} .lhead.stuck .doorbrand img{width:30px;height:30px} .lhead.stuck .doorbrand b{font-size:20px} @media (prefers-reduced-motion:reduce){ .lhead,.lbar,.lnk,.lhead .abtn,.doorbtn.lmini,.lhead .doorbrand img,.lhead .doorbrand b{transition:none} } /* ---------- the pieces every section is built from ---------- */ .lkick{display:flex;align-items:center;gap:9px;font:500 14px/1.4 var(--site-sans);color:var(--ink2);margin:0 0 18px} .lkick::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--terracotta); box-shadow:0 0 0 4px var(--terra-tint)} .lead{font:400 clamp(15.5px,1.2vw,17.5px)/1.62 var(--site-sans);color:var(--ink2);margin:0 0 30px; max-width:60ch;text-wrap:pretty} .doorbtn.lcta{display:inline-block;width:auto;margin:0;padding:16px 26px;text-decoration:none} /* the two doors: the same object twice, only the fill tells them apart */ .lalt.doorbtn{background:var(--card);color:var(--ink); box-shadow:inset 0 0 0 1px var(--line),0 6px 16px -14px rgba(120,80,55,.8)} .lalt.doorbtn:hover{background:var(--card);color:var(--terra-deep); box-shadow:inset 0 0 0 1px var(--terracotta),0 10px 20px -14px rgba(182,74,36,.6)} .doorbtn:active{transform:translateY(1px); box-shadow:0 1px 0 var(--terra-deep) inset,0 4px 10px -8px rgba(182,74,36,.9)} .lalt.doorbtn:active{box-shadow:inset 0 0 0 1px var(--terracotta)} .doorbtn:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px} .lctarow{display:flex;align-items:center;gap:14px;flex-wrap:wrap} /* the line that opens the choice: said once, plainly, before the two doors */ .lfree{margin:0 0 14px;font:500 14.5px/1.4 var(--site-sans);color:var(--ink2)} .lfree::after{content:"";display:inline-block;width:22px;height:1px;margin-left:10px; vertical-align:.3em;background:var(--terracotta)} /* a door: what it is, then who it is for */ .doorbtn.lrole{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:14px;row-gap:3px; align-items:center;text-align:left} .lrole b{grid-column:1;font:600 16px/1.2 var(--site-sans)} .lrole span{grid-column:1;font:400 13px/1.3 var(--site-sans);opacity:.86} .lrole::after{content:"\2192";grid-column:2;grid-row:1/3;font:400 18px/1 var(--site-sans); transition:transform .2s} .lrole:hover::after{transform:translateX(3px)} .lalt.lrole span{color:var(--ink2);opacity:1} .lalt.lrole::after{color:var(--terracotta)} /* ---------- the hero: the sentence left, the demo right ---------- */ .lhero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,5.5vw,96px); align-items:center;max-width:var(--site-max);margin:0 auto; padding:clamp(34px,7vh,86px) var(--site-gut) clamp(52px,9vh,104px)} @media (min-width:1200px), (min-width:981px) and (orientation:landscape){ .lhero{min-height:calc(100svh - 88px);padding-top:clamp(24px,4vh,56px);padding-bottom:clamp(32px,6vh,72px)} } /* label · sentence · explanation · choice, in falling weight */ .lhero h1{margin:0 0 22px;max-width:16ch;text-wrap:balance; font:500 clamp(34px,3.7vw,58px)/1.08 var(--site-serif);letter-spacing:-.024em; font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0} .lhero .lkick{margin:0 0 20px} .lhero .lead{margin-bottom:0;max-width:44ch;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.7} .lhero .lpick{margin:40px 0 0} /* two equal doors: the same width, so neither reads as the leftover */ .lhero .lctarow{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));align-items:stretch; gap:12px;max-width:540px} /* light: a hairline and a soft lift, never a slab with a deep shadow */ .lhero .lctarow .doorbtn{padding:15px 18px 15px 20px;border-radius:14px; box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -12px rgba(182,74,36,.7)} .lhero .lctarow .doorbtn:hover{box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 20px -12px rgba(182,74,36,.75)} .lhero .lctarow .lalt.doorbtn{box-shadow:inset 0 0 0 1px var(--line)} .lhero .lctarow .lalt.doorbtn:hover{box-shadow:inset 0 0 0 1px var(--terracotta)} .lscene{position:relative;padding:clamp(18px,2vw,28px) clamp(16px,2vw,28px) 18px;border-radius:22px; border:1px solid var(--line);background:rgba(255,255,255,.82); box-shadow:0 1px 2px rgba(20,22,26,.04),0 24px 60px -28px rgba(120,80,55,.35)} .lsceneboard{--tile:clamp(34px,4.6vw,76px);display:flex;justify-content:center;padding:10px 0 6px} /* the grid itself is the game's own: board.css draws the squares, this only places them and hangs the effects layer over the top */ .lgrid{position:relative;display:grid;gap:5px} .lgrid::after{content:"";position:absolute;left:4%;right:4%;bottom:-14px;height:28px;z-index:-1;pointer-events:none; border-radius:50%;background:radial-gradient(closest-side,rgba(120,80,55,.22),transparent)} .lfx{position:absolute;inset:0;pointer-events:none} /* the beat in play is the dark one; the rest stay visible */ .lbeats{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 18px;padding:0;counter-reset:beat} .lbeats li{display:inline-flex;align-items:center;gap:7px;font:500 12.5px/1 var(--site-sans);color:var(--ink3); padding:6px 11px 6px 6px;border-radius:999px;background:var(--well);transition:color .25s,background .25s; counter-increment:beat} .lbeats li::before{content:counter(beat);display:grid;place-items:center;width:18px;height:18px;border-radius:50%; font:600 10.5px/1 var(--site-sans);background:#fff;color:var(--ink3);transition:color .25s} .lbeats li.on{color:#fff;background:var(--terracotta)} .lbeats li.on::before{color:var(--terra-deep)} /* the card and the program share ONE cell: whichever beat is up, the panel is as tall as the taller of the two and never moves */ .lstack{display:grid;margin:0 0 4px} .lstack > *{grid-area:1/1;align-self:start} /* beat 1: the mission card, no box drawn round it; its squares are the board's own */ .lbrief{margin:0;padding:2px 2px 0;transition:opacity .35s} .lbtag{margin:0 0 8px;font:600 12.5px/1 var(--site-sans);color:var(--terra-deep)} .lbgoal{margin:0 0 16px;max-width:26ch;text-wrap:balance; font:500 clamp(15.5px,1.3vw,17.5px)/1.35 var(--site-serif);letter-spacing:-.008em; color:var(--ink);font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0} .lbfacts{list-style:none;margin:0;padding:0;display:grid;gap:12px} .lbfacts li{display:flex;align-items:center;gap:13px;font:400 13px/1.5 var(--site-sans);color:var(--ink2)} /* the square itself, at reading size: board.css draws it, this only says how big. The .tile inside is the game's own element, built by landing.js. */ .lbtile{flex:0 0 auto;display:block;width:30px;height:30px;position:relative} .lbtile .tile{width:30px;height:30px} /* the card is beat 1's; after that the editor has the cell */ [data-beat="2"] .lbrief,[data-beat="3"] .lbrief,[data-beat="4"] .lbrief{opacity:0;pointer-events:none} /* beat 4: the win takes the editor's place — the editor's own frame and size, so nothing moves */ .lwin{height:calc(7 * var(--clh,22px) + 22px);box-sizing:border-box;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:10px;text-align:center;border-radius:12px; background:var(--card);border:1.5px solid var(--line);opacity:0;pointer-events:none;transition:opacity .4s} .lwinbadge{display:inline-flex;align-items:center;gap:7px;margin:0;padding:6px 12px 6px 7px;border-radius:999px; font:600 12.5px/1 var(--site-sans);color:var(--go-deep);background:rgba(31,157,87,.1)} .lwinbadge::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--go) no-repeat center/11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.2 4.7-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .lwintitle{margin:0;font:500 clamp(20px,1.8vw,26px)/1.2 var(--site-serif);letter-spacing:-.015em;color:var(--ink); font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0} [data-beat="4"] .lwin{opacity:1} [data-beat="4"] #editor.lheroed{opacity:0} @media (prefers-reduced-motion:no-preference){ .lwin > *{transition:translate .5s cubic-bezier(.2,.9,.3,1),opacity .4s;translate:0 8px;opacity:0} [data-beat="4"] .lwin > *{translate:0 0;opacity:1} [data-beat="4"] .lwin > :last-child{transition-delay:.12s} } /* the scrubber: the whole run, one thin track the width of the panel */ .lsbar{display:flex;align-items:center;margin:14px 2px 0} .lscrub{flex:1;display:flex;align-items:center;gap:12px;font:500 12px/1 var(--site-sans);color:var(--ink3)} .lscrublab{white-space:nowrap;min-width:3.5em} .lscrub input{flex:1;min-width:0;height:18px;margin:0;background:none;cursor:grab;-webkit-appearance:none;appearance:none} .lscrub input::-webkit-slider-runnable-track{height:4px;border-radius:99px; background:linear-gradient(var(--terracotta),var(--terracotta)) 0/var(--p,0%) 100% no-repeat,var(--well)} .lscrub input::-moz-range-track{height:4px;border-radius:99px;background:var(--well)} .lscrub input::-moz-range-progress{height:4px;border-radius:99px;background:var(--terracotta)} .lscrub input::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%; background:#fff;border:0;box-shadow:0 0 0 1.5px var(--terracotta),0 2px 6px rgba(120,60,30,.3);transition:scale .15s} .lscrub input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:0; box-shadow:0 0 0 1.5px var(--terracotta),0 2px 6px rgba(120,60,30,.3)} .lscrub input:active{cursor:grabbing} .lscrub input:active::-webkit-slider-thumb{scale:1.2} .lscrub input:focus-visible{outline:2px solid var(--terracotta);outline-offset:4px;border-radius:4px} /* ---------- the program, in the game's own editor ---------- The ids are editor.css's; this adds only a fixed height and the beat-1 fade. */ #editor.lheroed{flex:none;height:calc(7 * var(--clh) + 22px);font-size:0;transition:opacity .35s} #editor.lheroed #hl{font-size:var(--cfs)} [data-beat="1"] #editor.lheroed{opacity:0;pointer-events:none} /* ---------- meet BOLTZ: the one centred section; his motion is helper.css's ---------- */ .lmeet{max-width:var(--site-max);margin:0 auto;text-align:center; padding:clamp(72px,12vh,140px) var(--site-gut) clamp(56px,9vh,110px)} .lmeet h2{margin:0 auto 16px;max-width:18ch;text-wrap:balance; font:500 clamp(30px,3.4vw,52px)/1.1 var(--site-serif);letter-spacing:-.022em; font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0} .lmeet .lead{margin:0 auto;max-width:50ch} .lstage{--tile:clamp(50px,4.8vw,70px);--step:calc(var(--tile) + 5px);position:relative; height:calc(var(--tile) * 4.4);margin:clamp(20px,4vh,40px) auto 0} /* the ground, fading out at both ends so it reads as a place, not a box */ .lstrip{position:absolute;left:50%;bottom:0;translate:-50% 0;display:flex;gap:5px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent); mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)} .lstrip .tile{flex:none} /* wider than a phone's stage: centred and clipped, never a sideways scroll */ .lstrip{max-width:100%;overflow-x:clip;justify-content:center} .lstrip .tile.rising{animation:lrockup .55s cubic-bezier(.3,1.5,.5,1)} @keyframes lrockup{from{translate:0 40%;scale:.55;opacity:0}} /* him: moved a whole square at a time, never slid by a fraction */ .lactor{position:absolute;left:50%;bottom:calc(var(--tile) * .68);width:calc(var(--tile) * 2.9); translate:calc(-50% + var(--x,0) * var(--step)) 0;transition:translate .72s cubic-bezier(.45,.05,.3,1)} .lboltz{position:relative;z-index:2;display:block;width:100%;aspect-ratio:1;padding:0;border:0;background:none; cursor:pointer;-webkit-tap-highlight-color:transparent} .lboltz .portrait,.lboltz svg{display:block;width:100%;height:100%;overflow:visible} .lboltz svg{transform-origin:50% 90%} .lboltz:focus-visible{outline:2px solid var(--terracotta);outline-offset:6px;border-radius:24px} /* the code he is running, to his left */ .lchip{position:absolute;right:calc(100% - 4px);top:14%;z-index:3;display:flex;align-items:center;gap:8px; padding:9px 14px 9px 11px;border-radius:12px;background:var(--card);white-space:nowrap; font:500 15px/1 var(--mono);color:var(--ink); box-shadow:0 1px 2px rgba(20,22,26,.05),0 10px 24px -14px rgba(120,80,55,.5); opacity:0;translate:10px 6px;scale:.94;transition:opacity .3s,translate .45s cubic-bezier(.3,1.5,.5,1),scale .45s cubic-bezier(.3,1.5,.5,1)} .lchip::before{content:"\25B6";font-size:10px;color:var(--ink3);transition:color .2s} .lchip.on{opacity:1;translate:0 0;scale:1} .lchip.run{animation:lrun .5s ease-out} .lchip.run::before{color:var(--go)} @keyframes lrun{0%{box-shadow:0 0 0 0 rgba(31,157,87,.45),0 10px 24px -14px rgba(120,80,55,.5)} 100%{box-shadow:0 0 0 12px rgba(31,157,87,0),0 10px 24px -14px rgba(120,80,55,.5)}} /* what he says, to his right, pointing at him */ .lsay{position:absolute;left:calc(100% - 6px);top:4%;z-index:3;width:max-content;max-width:min(300px,34vw);margin:0; padding:13px 17px;border-radius:18px;background:var(--card);text-align:left; font:500 15px/1.45 var(--site-sans);color:var(--ink); box-shadow:0 1px 2px rgba(20,22,26,.05),0 14px 32px -16px rgba(120,80,55,.42)} .lsay:empty{visibility:hidden} .lsay::after{content:"";position:absolute;left:-6px;top:22px;width:14px;height:14px;rotate:45deg; background:var(--card);border-radius:0 0 0 4px} .lsay.pop{animation:lpop .5s cubic-bezier(.3,1.6,.5,1)} @keyframes lpop{0%{scale:.9}55%{scale:1.04}100%{scale:1}} /* the arrival: the board sprite drives in from the left edge */ .ldrive{position:absolute;left:50%;bottom:0;z-index:4;width:var(--tile);height:var(--tile); translate:calc(-50% - 6 * var(--step)) 0;opacity:0} .ldrive .rover{position:relative;width:100%;height:100%} .lstage.driving .ldrive{opacity:1;translate:-50% 0;transition:translate 1.5s cubic-bezier(.45,.05,.3,1),opacity .25s} .lstage.arrived .ldrive{opacity:0;scale:.6;transition:opacity .35s,scale .35s} .lstage:not(.arrived) .lactor{opacity:0;translate:-50% 20px;scale:.7} .lactor{transition:translate .72s cubic-bezier(.45,.05,.3,1),opacity .45s,scale .55s cubic-bezier(.3,1.4,.5,1)} /* the traits: three pills, no numbers; the active one fills to show the next scene coming */ .ltabs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:clamp(22px,4vh,38px) 0 0} .ltab{position:relative;overflow:hidden;padding:12px 20px;border:0;border-radius:999px;cursor:pointer; background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--line); font:600 15px/1.2 var(--site-sans);color:var(--ink3);transition:color .25s,background .25s,box-shadow .25s} .ltab span{position:relative} .ltab:hover{color:var(--ink2);background:rgba(255,255,255,.85)} .lfill{position:absolute;inset:0;background:var(--terra-tint);transform-origin:left;scale:0 1} .ltab.on{color:var(--terra-deep);background:#fff} /* the border drawn over the fill, so the filling part keeps its edge too */ .ltab.on::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; box-shadow:inset 0 0 0 1.5px var(--terracotta)} .ltab:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px} .lnote{max-width:46ch;min-height:3.2em;margin:18px auto 0;font:400 16px/1.6 var(--site-sans);color:var(--ink2);text-wrap:balance} @media (prefers-reduced-motion:no-preference){ .ltab.on .lfill{animation:ltfill 7.2s linear forwards} @keyframes ltfill{to{scale:1 1}} .lboltz svg{animation:hubbob 3.4s ease-in-out infinite} .lboltz.hop svg{animation:hubhop .62s cubic-bezier(.3,1.5,.4,1) 1} .lboltz .hbod{transform-box:fill-box;transform-origin:50% 100%;animation:breathebot 2.6s ease-in-out infinite} .lboltz .hwh{transform-box:fill-box;transform-origin:center;animation:jig 1.15s ease-in-out infinite} .lboltz .hwh2{animation-delay:.15s} .lactor.rolling .lboltz .hwh{animation:lspin .72s cubic-bezier(.45,.05,.3,1)} @keyframes lspin{to{rotate:360deg}} .lboltz .hant{transform-origin:23px 12.5px;animation:nod 3.2s ease-in-out infinite} .lboltz .hbulb{animation:blink 2.4s ease-in-out infinite} .lboltz .heye{transform-box:fill-box;transform-origin:center;animation:eyelife 9s ease-in-out infinite} .lboltz:hover .heye{animation:none;transform:scaleY(.45)} .lboltz.stuck{animation:dbump .45s cubic-bezier(.36,.07,.19,.97) 2} /* not .glow: board.css owns that name (a lit building's halo, opacity 0) */ .lboltz.hinting .hbulb{animation:hglow 1.4s ease-in-out infinite} .lboltz.calling svg{animation:hcall 2.6s ease-in-out infinite} } .lboltz.stuck .heye{animation:none;transform:scaleY(.45)} .lmeet.away .lboltz,.lmeet.away .lboltz *,.lmeet.away .lfill{animation-play-state:paused!important} @media (prefers-reduced-motion:reduce){ .lactor,.ldrive,.lchip,.ltab{transition:none} .lsay.pop{animation:none} } /* phones: no room beside him, so he speaks from above and the code sits over his shoulder */ @media (max-width:640px){ /* seven squares always fit, so the rock in front of him has a square to rise on */ .lstage{--tile:40px;height:calc(var(--tile) * 6.8);margin-top:8px} .lstrip{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} .lactor{width:calc(var(--tile) * 2.5)} /* centred on the stage, not on him: undo his roll so it never meets the screen edge */ /* stacked, never overlapping: what he says, then the line he runs, then him */ .lsay{left:50%;top:auto;bottom:calc(100% + 46px);translate:calc(-50% - var(--x,0) * var(--step)) 0; width:max-content;max-width:calc(100vw - 2 * var(--site-gut));padding:11px 15px;font-size:14.5px;text-align:center;transition:translate .72s cubic-bezier(.45,.05,.3,1)} .lsay::after{left:50%;top:auto;bottom:-6px;margin-left:-7px;border-radius:0 0 4px 0} .lchip{right:auto;left:50%;top:-34px;translate:-50% 6px;font-size:13px;padding:7px 11px 7px 9px} .lchip.on{translate:-50% 0} /* the three traits on one row that swipes; the active one is scrolled into view */ .ltabs{flex-wrap:nowrap;justify-content:flex-start;gap:8px;overflow-x:auto;margin:14px calc(var(--site-gut) * -1) 0; padding:2px var(--site-gut);scrollbar-width:none;scroll-snap-type:x proximity} .ltabs::-webkit-scrollbar{display:none} .ltab{flex:none;padding:10px 16px;font-size:14px;scroll-snap-align:center} .lnote{margin-top:12px;font-size:15px} } /* ---------- how you learn: the fix loop, on the game's own tiles ---------- */ .lfix{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5.5vw,88px); align-items:center;max-width:var(--site-max);margin:0 auto;padding:clamp(56px,10vh,120px) var(--site-gut)} .lfix h2{margin:0 0 18px;max-width:14ch;text-wrap:balance; font:500 clamp(30px,3.3vw,50px)/1.1 var(--site-serif);letter-spacing:-.022em; font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0} .lfix .lead{max-width:42ch;margin:0 0 28px} /* the loop: three numbered steps that follow the reader */ .lloop{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:loop} .lloop li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:2px;padding:10px 0; counter-increment:loop} .lloop li::before{content:counter(loop);grid-row:1/3;display:grid;place-items:center;width:30px;height:30px; border-radius:50%;font:600 13.5px/1 var(--site-sans);color:var(--ink3);background:var(--well); transition:background .3s,color .3s,scale .3s} .lloop b{font:600 16.5px/1.35 var(--site-sans);color:var(--ink3);padding-top:4px;transition:color .3s} .lloop span{font:400 14.5px/1.55 var(--site-sans);color:var(--ink3);transition:color .3s} .lloop li.on::before{background:var(--terracotta);color:#fff;scale:1.08} .lloop li.on b{color:var(--ink)} .lloop li.on span{color:var(--ink2)} .lloop li.done::before{content:"\2713";background:var(--go);color:#fff} .lloop li.done b{color:var(--ink2)} /* the console: goal, program, board, result */ .lfixbox{padding:clamp(20px,2.2vw,30px);border-radius:24px;background:rgba(255,255,255,.82); border:1px solid var(--line);box-shadow:0 1px 2px rgba(20,22,26,.04),0 24px 60px -28px rgba(120,80,55,.35)} .lfixgoal{margin:0 0 16px;font:500 14.5px/1.5 var(--site-sans);color:var(--ink2)} .lfixcode{display:grid;gap:2px;padding:12px 0;border-radius:14px;background:var(--well); font:500 15.5px/1.9 var(--mono);color:var(--ink)} .lfixline{display:flex;align-items:center;white-space:pre} .lfixline > i{width:42px;padding-right:14px;text-align:right;font-style:normal;color:var(--ink3);font-size:13px} .lfixline code{font:inherit;white-space:pre} /* the one thing to change: the number, with its own − and + */ .lnum{display:inline-flex;align-items:center;gap:2px;margin:0 3px;padding:2px;border-radius:999px; background:#fff;box-shadow:0 0 0 1.5px var(--terracotta),0 4px 12px -6px rgba(182,74,36,.6);vertical-align:middle} .lnum .c-num{min-width:1.4ch;text-align:center;font-size:17px} .lstep{width:26px;height:26px;border-radius:50%;border:0;background:var(--terra-tint);color:var(--terra-deep); font:700 16px/1 var(--site-sans);cursor:pointer;display:grid;place-items:center;transition:background .2s,scale .15s} .lstep:hover{background:var(--terracotta);color:#fff} .lstep:active{scale:.9} .lstep:disabled{opacity:.35;cursor:default;background:var(--well);color:var(--ink3)} .lstep:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px} .lfixstage{position:relative;display:flex;justify-content:center;padding:74px 0 8px} .lfixstage .lgrid{--tile:clamp(36px,3.9vw,56px)} /* his words, only when he has something to say */ .lfixsay{position:absolute;top:6px;left:50%;translate:-50% 8px;width:max-content;max-width:min(320px,94%);margin:0; padding:11px 16px;border-radius:16px;background:var(--ink);color:#fff;font:500 14px/1.45 var(--site-sans); text-align:center;opacity:0;scale:.92;transition:opacity .3s,translate .4s cubic-bezier(.3,1.5,.5,1),scale .4s cubic-bezier(.3,1.5,.5,1)} .lfixsay::after{content:"";position:absolute;left:62%;bottom:-6px;width:12px;height:12px;rotate:45deg; background:var(--ink);border-radius:0 0 3px 0} .lfixsay.on{opacity:1;translate:-50% 0;scale:1} .lfixbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:14px 0 0; padding-top:16px;border-top:1px solid var(--line)} .lfixstatus{margin:0;min-height:2.9em;display:flex;align-items:center; font:500 14.5px/1.45 var(--site-sans);color:var(--ink2)} .doorbtn.lfixrun{width:auto;flex:none;margin:0;padding:13px 24px;border-radius:999px;font-size:15px} .doorbtn.lfixrun:disabled{opacity:.55;cursor:default;transform:none} @media (prefers-reduced-motion:no-preference){ /* until the reader has touched it, the number breathes: this is the thing to change */ .lfix:not(.touched) .lnum{animation:lnudge 2.4s ease-in-out infinite} @keyframes lnudge{0%,100%{box-shadow:0 0 0 1.5px var(--terracotta),0 4px 12px -6px rgba(182,74,36,.6)} 50%{box-shadow:0 0 0 5px rgba(224,102,58,.18),0 4px 12px -6px rgba(182,74,36,.6)}} /* the game's knock back off the rock */ .rover.lbump{animation:dbump .45s cubic-bezier(.36,.07,.19,.97) 2} } @media (max-width:980px), (max-width:1199px) and (orientation:portrait){ .lfix{grid-template-columns:minmax(0,1fr)} } @media (max-width:560px){ /* phones: the steps as one line each, and the card tight enough to sit beside them on screen */ .lfix{gap:22px;padding-bottom:24px} .lfix .lead{margin-bottom:16px} .lloop{gap:0} .lloop li{padding:6px 0;align-items:center} .lloop li::before{grid-row:auto;width:26px;height:26px;font-size:12.5px} .lloop b{padding-top:0;font-size:15.5px} .lloop span{display:none} .lfixbox{padding:16px 14px} .lfixgoal{margin-bottom:12px;font-size:14px} .lfixcode{font-size:13.5px} .lfixline > i{width:30px;padding-right:10px} /* no room kept for his words: they float up over the code when he speaks */ .lfixstage{padding:16px 0 4px} .lfixstage .lgrid{--tile:calc((100vw - 2 * var(--site-gut) - 28px - 30px) / 7)} .lfixsay{top:auto;bottom:calc(100% - 10px);font-size:13.5px;padding:9px 13px} .lfixbar{margin-top:10px;padding-top:12px;gap:12px} .lfixstatus{min-height:2.9em;font-size:13.5px} .doorbtn.lfixrun{padding:11px 18px;font-size:14px} } /* ---------- what you'll learn: pinned card, rungs scroll past; phones get a snippet per rung ---------- */ .lgrow{max-width:var(--site-max);margin:0 auto;padding:clamp(56px,10vh,120px) var(--site-gut) clamp(40px,7vh,80px)} /* the heading and the card are pinned together, so what the card is about never scrolls away while the steps go by */ .lgrowside{position:sticky;top:max(92px,calc(50vh - 330px));align-self:start} .lgrowhead{margin:0 0 22px} .lgrowhead .lkick{margin-bottom:12px} .lgrow h2{margin:0 0 10px;text-wrap:balance; font:500 clamp(28px,2.7vw,42px)/1.12 var(--site-serif);letter-spacing:-.022em; font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0} .lgrow .lead{margin:0;font-size:clamp(15px,1.1vw,17px)} .lgrowbody{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:start} .lgrowcard{padding:clamp(18px,2vw,26px);border-radius:22px; background:rgba(255,255,255,.85);border:1px solid var(--line); box-shadow:0 1px 2px rgba(20,22,26,.04),0 24px 60px -28px rgba(120,80,55,.35)} .lgrowbar{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px; font:600 13.5px/1 var(--site-sans);color:var(--terra-deep)} .lgrowbar #growStep{font-weight:500;color:var(--ink3)} .lgrowpre{margin:0;padding:12px 0;border-radius:14px;background:var(--well); font:500 15px/1.8 var(--mono);color:var(--ink);overflow-x:auto} /* sized for the longest step (ten lines), so the card never jumps */ .lgrowcard .lgrowpre{min-height:calc(10 * 1.8em + 24px)} .lgrowpre > i{display:block;font-style:normal;white-space:pre;padding-right:16px} .lgrowpre > i > u{display:inline-block;width:40px;margin-right:14px;text-align:right; text-decoration:none;color:var(--ink3);font-size:13px} /* what just grew: tinted, and it slides in, one line after another */ .lgrowpre > i.lnew{background:var(--terra-tint)} /* past his memory: the lines that never ran */ .lgrowpre > i.lover{opacity:.4} .lgrowpre > i.lover > u{color:var(--terracotta);opacity:1} /* BOLTZ's memory, as the game's line meter shows it */ .lmem{display:flex;align-items:center;gap:12px;margin:14px 2px 0;font:600 13.5px/1 var(--site-sans);color:var(--go-deep)} .lmem.over{color:var(--terra-deep)} .lmembar{flex:none;width:96px;height:7px;border-radius:99px;background:var(--well);overflow:hidden} .lmembar i{display:block;height:100%;border-radius:inherit;background:var(--go);transition:width .5s} .lmem.over .lmembar i{background:var(--terracotta)} /* and what he says when it doesn't fit — his own line */ .lhalt{margin:12px 0 0;padding:12px 15px;border-radius:14px;background:var(--ink);color:#fff; font:500 14px/1.5 var(--site-sans)} .lhalt b{color:#ffd9c9;font-weight:600} .lrungs{list-style:none;margin:0;padding:0} .lrung{min-height:46vh;display:flex;flex-direction:column;justify-content:center;padding:8px 0; opacity:.32;transition:opacity .45s} .lrung.on{opacity:1} .lrung:first-child{min-height:46vh} .lskill{display:flex;align-items:center;gap:10px;margin:0 0 10px;font:600 13.5px/1 var(--site-sans);color:var(--terra-deep)} .lrung h3{margin:0 0 10px;font:500 clamp(24px,2.2vw,32px)/1.18 var(--site-serif);letter-spacing:-.015em; font-variation-settings:'SOFT' 0,'WONK' 0;color:var(--ink)} .lrung p:not(.lskill){margin:0;max-width:42ch;font:400 16px/1.65 var(--site-sans);color:var(--ink2)} .lrungcode{display:none;margin-top:16px} @media (prefers-reduced-motion:no-preference){ .lgrowpre > i.lnew{animation:lgrowin .5s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--k) * 90ms)} @keyframes lgrowin{from{opacity:0;translate:-10px 0}} } /* short laptop screens: the pinned column must still fit, so the code tightens */ @media (min-width:981px) and (max-height:760px){ .lgrowcard .lgrowpre{font-size:14px;line-height:1.62} .lgrowhead{margin-bottom:16px} } @media (max-width:980px), (max-width:1199px) and (orientation:portrait){ .lgrowbody{grid-template-columns:minmax(0,1fr)} .lgrowside{position:static} .lgrowhead{margin-bottom:28px} .lgrowcard{display:none} .lrung,.lrung:first-child{min-height:0;opacity:1;padding:0 0 36px} .lrungcode{display:block} .lrungcode .lgrowpre{font-size:14px} .lrungcode .lgrowpre > i > u{width:28px;margin-right:10px} /* each snippet is a card, like the other panels on the page, not a tint on the page */ .lrungcode .lgrowpre{background:var(--card);border:1px solid var(--line); box-shadow:0 1px 2px rgba(20,22,26,.04),0 14px 30px -22px rgba(120,80,55,.35)} /* the ten-line route: lines 1–3 and 10 tell it; the numbers show what is skipped */ .lrungcode .lgrowpre > i.lover:nth-child(n+4):not(:last-child){display:none} } /* ---------- is it right for you ---------- Heading and the language demo pinned left; the facts are ruled lines, not cards. */ .lfit{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,6vw,104px);align-items:start; max-width:var(--site-max);margin:0 auto;padding:clamp(56px,10vh,120px) var(--site-gut)} .lfitside{position:sticky;top:110px} .lfit h2,.lcost h2{margin:0 0 16px;max-width:16ch;text-wrap:balance; font:500 clamp(30px,3.3vw,50px)/1.1 var(--site-serif);letter-spacing:-.022em; font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0} .lfit .lead,.lcost .lead{max-width:40ch;margin:0 0 30px} .lfitdemo{max-width:480px;padding:clamp(16px,1.8vw,22px);border-radius:22px;background:rgba(255,255,255,.85); box-shadow:0 1px 2px rgba(20,22,26,.04),0 24px 60px -28px rgba(120,80,55,.35)} .lfitbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px; font:600 13.5px/1 var(--site-sans);color:var(--terra-deep)} .lfitsw{display:inline-flex;padding:3px;border-radius:999px;background:var(--well)} .lfitsw button{padding:7px 12px;white-space:nowrap;border:0;border-radius:999px;background:none;cursor:pointer; font:500 13px/1 var(--site-sans);color:var(--ink2);transition:background .25s,color .25s} .lfitsw button[aria-pressed="true"]{background:var(--ink);color:#fff} .lfitsay{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0} .lfitbot{flex:none;width:52px;height:52px} .lfitbot svg{display:block;width:100%;height:100%;overflow:visible} .lfitsay p{position:relative;flex:1;min-height:3em;margin:4px 0 0;padding:11px 14px;border-radius:14px;background:var(--ink); color:#fff;font:500 14.5px/1.5 var(--site-sans)} .lfitsay p::before{content:"";position:absolute;left:-5px;top:14px;width:12px;height:12px;rotate:45deg; background:var(--ink);border-radius:0 0 0 3px} .lfitsay p.pop{animation:lpop .5s cubic-bezier(.3,1.6,.5,1)} .lfitnote{margin:12px 2px 0;font:400 13.5px/1.5 var(--site-sans);color:var(--ink3)} .lfacts{margin:0;border-top:1px solid var(--rule)} .lfact{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px 28px;padding:clamp(22px,3.4vh,34px) 2px; border-bottom:1px solid var(--rule)} .lfact dt{font:500 clamp(21px,1.8vw,26px)/1.2 var(--site-serif);letter-spacing:-.012em;color:var(--ink); font-variation-settings:'SOFT' 0,'WONK' 0} .lfact dd{margin:0;font:400 16px/1.62 var(--site-sans);color:var(--ink2)} .lfact dd a{color:var(--terra-deep);font-weight:500;text-underline-offset:3px} /* ---------- what it costs ---------- */ .lcost{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(32px,6vw,104px);align-items:start; max-width:var(--site-max);margin:0 auto;padding:clamp(40px,8vh,100px) var(--site-gut) clamp(56px,10vh,120px)} .lcostside{position:sticky;top:110px} /* the plan as a line with two stops: the first is lit, the way the cable lights */ .lplan{position:relative;list-style:none;margin:0 0 26px;padding:0;display:grid;gap:22px} .lplan::before{content:"";position:absolute;left:8px;top:12px;bottom:12px;width:3px;border-radius:3px; background:linear-gradient(var(--terracotta) 0 50%,rgba(20,22,26,.16) 50%)} .lplan li{position:relative;padding-left:36px;display:grid;gap:4px} .lplan li::before{content:"";position:absolute;left:1px;top:4px;width:17px;height:17px;border-radius:50%; background:var(--paper);box-shadow:inset 0 0 0 3px var(--ink3)} .lplan li.on::before{background:var(--terracotta);box-shadow:0 0 0 5px var(--terra-tint)} .lplan b{font:500 22px/1.2 var(--site-serif);letter-spacing:-.01em;font-variation-settings:'SOFT' 0,'WONK' 0} .lplan span{font:400 15px/1.5 var(--site-sans);color:var(--ink2)} .lmore{display:inline-flex;gap:6px;font:600 15px/1 var(--site-sans);color:var(--terra-deep);text-decoration:none} .lmore span:last-child{transition:translate .25s} .lmore:hover span:last-child{translate:4px 0} .lcostfaq h3{margin:0 0 6px;font:600 13.5px/1 var(--site-sans);color:var(--terra-deep)} .lcostfaq .lfaq{margin:14px 0 0;max-width:none} @media (prefers-reduced-motion:no-preference){ .lfit.ready .lfact,.lcost.ready .lfaq details{opacity:0;translate:0 18px; transition:opacity .7s cubic-bezier(.22,.7,.3,1) var(--d,0s),translate .7s cubic-bezier(.22,.7,.3,1) var(--d,0s)} .lfit.ready .lfact.in,.lcost.ready .lfaq details.in{opacity:1;translate:0 0} .lfitbot svg{animation:hubbob 3.4s ease-in-out infinite} .lfitbot .hbulb{animation:blink 2.4s ease-in-out infinite} } @media (max-width:980px), (max-width:1199px) and (orientation:portrait){ .lfit,.lcost{grid-template-columns:minmax(0,1fr)} .lfitside,.lcostside{position:static} } @media (max-width:560px){ .lfit{padding:48px var(--site-gut) 16px;gap:28px} .lfit .lead{margin-bottom:22px} .lfact{grid-template-columns:minmax(0,1fr);gap:4px;padding:16px 2px} .lfact dt{font-size:19px} .lfact dd{font-size:15px;line-height:1.55} } /* ---------- the way in ---------- */ .lgo{text-align:center;max-width:var(--site-max);margin:0 auto; padding:clamp(40px,7vh,78px) var(--site-gut) clamp(52px,9vh,96px);border-top:1px solid var(--rule)} .lgo h2{margin:0 auto 26px;max-width:20ch;text-wrap:balance; font:500 clamp(25px,3vw,38px)/1.1 var(--site-serif);letter-spacing:-.02em; font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0} /* the landing page's ending: BOLTZ beside line 1, a caret waiting in it */ .lend{position:relative;border-top:0;padding-top:clamp(64px,12vh,140px);padding-bottom:clamp(72px,13vh,150px);overflow:hidden} .lend::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(46% 62% at 50% 38%,var(--terra-tint),transparent 72%)} .lend h2{font-size:clamp(30px,4vw,56px);max-width:16ch;margin-bottom:30px} .lendstage{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2vw,22px);margin:0 auto 34px} .lend .lboltz{width:clamp(96px,10vw,132px);cursor:default} .lendline{display:flex;align-items:center;gap:14px;min-width:min(330px,62vw);margin:0;padding:14px 18px 14px 14px; border-radius:16px;background:rgba(255,255,255,.88);text-align:left;font:500 17px/1 var(--mono);color:var(--ink); box-shadow:0 1px 2px rgba(20,22,26,.05),0 22px 50px -26px rgba(120,80,55,.45)} .lendline i{font-style:normal;font-size:13px;color:var(--ink3);width:18px;text-align:right} .lendline code{font:inherit;white-space:pre} .lcaret{display:inline-block;width:9px;height:1.2em;margin-left:-12px;background:var(--terracotta)} .lend .lcta{padding:18px 30px;font-size:16px} .lendsub{margin:18px 0 0;font:400 14px/1.5 var(--site-sans);color:var(--ink3)} @media (prefers-reduced-motion:no-preference){ .lcaret{animation:lcaret 1s steps(1) infinite} .lend .lboltz svg{animation:hubbob 3.4s ease-in-out infinite} .lend .lboltz .hbod{transform-box:fill-box;transform-origin:50% 100%;animation:breathebot 2.6s ease-in-out infinite} .lend .lboltz .hant{transform-origin:23px 12.5px;animation:nod 3.2s ease-in-out infinite} .lend .lboltz .heye{transform-box:fill-box;transform-origin:center;animation:eyelife 9s ease-in-out infinite} .lend .lboltz.hop svg{animation:hubhop .62s cubic-bezier(.3,1.5,.4,1) 1} .lend.typed .lboltz .hbulb{animation:hglow 1.4s ease-in-out infinite} .lend.away *{animation-play-state:paused!important} } @media (max-width:560px){ .lendstage{flex-direction:column;align-items:center} .lendline{margin:0} } /* ---------- a question list (the pricing page's) ---------- */ .lfaq{margin:34px 0 0;max-width:840px;border-top:1px solid var(--rule)} .lfaq details{border-bottom:1px solid var(--rule)} .lfaq summary{cursor:pointer;list-style:none;padding:20px 2px;display:flex;justify-content:space-between;gap:16px; font:500 16.5px/1.4 var(--site-sans)} .lfaq summary::-webkit-details-marker{display:none} .lfaq summary::after{content:"+";font:400 20px/1 var(--mono);color:var(--terracotta);transition:transform .22s} .lfaq details[open] summary::after{transform:rotate(45deg)} .lfaq details p{margin:0 0 22px;max-width:70ch;font:400 15px/1.7 var(--site-sans);color:var(--ink2)} /* ---------- the footer ---------- */ .lfoot{max-width:var(--site-max);margin:0 auto;padding:40px var(--site-gut) 30px;border-top:1px solid var(--rule)} .lftop{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px 40px;align-items:start} .lfcol{display:grid;gap:12px;justify-items:start} .lfcol b{margin:0 0 4px;font:600 13.5px/1.4 var(--site-sans);color:var(--ink)} .lfcol a{font:450 14px/1.4 var(--site-sans);color:var(--ink2);text-decoration:none;transition:color .2s} .lfcol a:hover{color:var(--terra-deep)} .lfbrand p{margin:12px 0 0;font:400 14px/1.6 var(--site-sans);color:var(--ink3)} .lflegal{display:flex;flex-wrap:wrap;gap:6px 26px} .lflegal a{font:450 14px/1.4 var(--site-sans);color:var(--ink2);text-decoration:none;transition:color .2s} .lflegal a:hover{color:var(--terra-deep)} .lfbase{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap; margin:32px 0 0;padding-top:20px;border-top:1px solid var(--rule)} .lfcopy{margin:0;font:400 13px/1.4 var(--site-sans);color:var(--ink3)} .lflegal a{font-size:13px;color:var(--ink3)} /* ---------- privacy · terms: sticky contents left, numbered sections right ---------- */ .ldoc{max-width:1120px;margin:0 auto;padding:clamp(38px,7vh,84px) var(--site-gut) clamp(52px,9vh,100px)} .ldochead{max-width:760px;margin:0 0 clamp(36px,6vh,60px)} .ldochead h1,.ctintro h1{margin:0 0 14px;text-wrap:balance;font:500 clamp(34px,4.4vw,56px)/1.05 var(--site-serif); letter-spacing:-.022em;font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0} .ldochead .lead,.ctintro .lead{margin:0;max-width:52ch;font:400 17px/1.6 var(--site-sans);color:var(--ink2)} .lupd{margin:18px 0 0;font:400 13.5px/1 var(--site-sans);color:var(--ink3)} .ldocgrid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start; padding-top:clamp(28px,5vh,44px);border-top:1px solid var(--rule)} .ldoctoc{position:sticky;top:112px} .ldoctoc p{margin:0 0 14px;font:600 13px/1 var(--site-sans);color:var(--ink)} .ldoctoc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--rule)} .ldoctoc a{display:block;margin-left:-1px;padding:7px 0 7px 16px;border-left:1px solid transparent; font:400 14px/1.4 var(--site-sans);color:var(--ink2);text-decoration:none;transition:color .2s,border-color .2s} .ldoctoc a:hover{color:var(--terra-deep);border-left-color:var(--terracotta)} .ldocbody{max-width:700px} .ldocsum{margin:0 0 44px;padding:26px 28px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.82); box-shadow:0 1px 2px rgba(20,22,26,.04),0 24px 60px -28px rgba(120,80,55,.35)} .ldocsum h2{margin:0 0 14px;font:600 15px/1.3 var(--site-sans)} .ldocsum ul{margin:0;padding:0;list-style:none;display:grid;gap:10px} .ldocsum li{position:relative;padding-left:22px;font:400 15px/1.55 var(--site-sans);color:var(--ink2)} .ldocsum li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--terracotta)} .ldocbody section{margin:0;padding:0 0 30px} .ldocbody section+section{padding-top:30px;border-top:1px solid var(--rule)} .ldocbody h2{display:flex;align-items:baseline;gap:14px;margin:0 0 10px;font:600 18px/1.35 var(--site-sans)} .ldocn{font:500 13px/1 var(--site-sans);color:var(--terracotta);font-variant-numeric:tabular-nums} .ldocbody p{margin:0;padding-left:31px;font:400 15.5px/1.75 var(--site-sans);color:var(--ink2)} .ldocbody p a,.ctway span a{color:var(--terra-deep);text-decoration-thickness:1px;text-underline-offset:3px} .ldocbody .ldocnext{margin:14px 0 0;padding:26px 0 0;border-top:1px solid var(--rule);font-size:15px} .ldocnext a{font-weight:600;text-decoration:none} .ldocnext a::after{content:" →"} /* ---------- contact: the ways in on the left, the form on the right ---------- */ .lcontact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,6vw,88px);align-items:start; max-width:1120px;margin:0 auto;padding:clamp(38px,7vh,84px) var(--site-gut) clamp(52px,9vh,100px)} .ctways{display:grid;gap:12px;margin:36px 0 0} .ctway{display:flex;gap:16px;align-items:flex-start;padding:18px 20px;border-radius:16px;border:1px solid var(--line); background:rgba(255,255,255,.6);color:var(--ink);text-decoration:none;transition:border-color .2s,background .2s,transform .2s} .ctway:hover{border-color:var(--terracotta);background:rgba(255,255,255,.9);transform:translateY(-1px)} .ctway svg{flex:none;width:40px;height:40px;padding:9px;border-radius:12px;background:var(--terra-tint); fill:none;stroke:var(--terra-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .ctway > span{display:grid;gap:4px} .ctway b{font:600 15.5px/1.3 var(--site-sans)} .ctway b + span{font:400 14.5px/1.5 var(--site-sans);color:var(--ink2)} .ctcard{padding:clamp(24px,3vw,36px);border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.86); box-shadow:0 1px 2px rgba(20,22,26,.04),0 24px 60px -28px rgba(120,80,55,.35)} .ctcard h2{margin:0 0 22px;font:500 clamp(22px,2.2vw,28px)/1.15 var(--site-serif);letter-spacing:-.015em; font-variation-settings:'SOFT' 0,'WONK' 0} .ctrow{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} .ctfield{display:block;margin:0 0 16px} .ctfield > span{display:block;margin:0 0 7px;font:500 13.5px/1.2 var(--site-sans);color:var(--ink)} .ctfield input,.ctfield textarea,.pickbtn{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px; background:var(--card);color:var(--ink);font:400 15px/1.45 var(--site-sans);transition:border-color .2s,box-shadow .2s} .ctfield textarea{resize:vertical;min-height:140px} .ctfield input:focus,.ctfield textarea:focus,.pickbtn:focus-visible,.pickbtn[aria-expanded="true"]{outline:none;border-color:var(--terracotta);box-shadow:0 0 0 3px var(--terra-tint)} .ctcard .doorbtn{margin:6px 0 0;padding:15px 20px} /* ---------- sign in (pages/login.html · src/site/signin.js) ---------- One card between the header and footer: email → code → name. */ /* the card owns the first screen; the footer waits below the fold instead of crowding it */ .lsignin{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100svh - 96px); padding:32px var(--site-gut) 64px} .sicard{width:100%;padding:clamp(28px,4vw,38px) clamp(26px,4vw,36px) clamp(26px,4vw,36px);border-radius:22px;border:1px solid var(--line); background:var(--card);box-shadow:0 1px 2px rgba(20,22,26,.04),0 24px 60px -28px rgba(120,80,55,.4)} .sicard h1{margin:0 0 10px;text-wrap:balance;font:500 clamp(26px,3vw,32px)/1.12 var(--site-serif);letter-spacing:-.02em; font-optical-sizing:auto;font-variation-settings:'SOFT' 0,'WONK' 0} .sicard .lead{margin:0 0 24px;font:400 15px/1.55 var(--site-sans);color:var(--ink2);overflow-wrap:anywhere} .sicard .lead b{color:var(--ink);font-weight:600} .sicard .doorbtn{margin:6px 0 0;padding:15px 20px} .sicard .doorbtn:disabled{opacity:.7;cursor:progress;transform:none} /* BOLTZ peeking over the card: he stands behind it near the top-left corner, so the card hides his wheels and only his head and deck show. The drawing and his idle motion are the landing page's (.lboltz, base.css); the peek is this page's. */ .siwrap{position:relative;width:min(440px,100%);margin-top:64px} .siwrap .sicard{position:relative;z-index:2} .sibot{position:absolute;z-index:1;left:30px;bottom:calc(100% - 46px);width:100px; transform-origin:50% 54%;transition:translate .35s cubic-bezier(.34,1.5,.5,1),rotate .5s cubic-bezier(.3,1.4,.5,1)} /* he tilts where he meets the edge, so his head stays over his hands */ .sibot:hover{translate:0 -12px} .sibot:hover .heye,.sibot.glad .heye{animation:none;transform:scaleY(.45)} /* his hands (render.js gripHTML) on the edge, in front of the card: under the head's two lower corners (55–105px), and they stay put while he ducks */ .sihand{position:absolute;z-index:3;top:-9px;left:46px;width:24px;pointer-events:none} .sihand.r{left:90px} .sihand svg{display:block;width:100%;overflow:visible;filter:drop-shadow(0 2px 1.5px rgba(20,22,26,.14))} .sihand .gfing{transform-box:fill-box;transform-origin:50% 0} /* where he goes behind the card: a soft shade on its edge */ .sishade{position:absolute;z-index:3;top:0;left:50px;width:60px;height:9px;pointer-events:none; background:radial-gradient(50% 100% at 50% 0,rgba(20,22,26,.13),transparent)} @media (prefers-reduced-motion:no-preference){ /* up from behind the card, then now and then a duck and a curious tilt */ .sibot{animation:sirise .7s cubic-bezier(.34,1.45,.5,1) .15s both,sipeek 7s ease-in-out 1.6s infinite} .sibot:hover{animation-play-state:running,paused} .sibot:hover svg{animation:hperk .5s cubic-bezier(.34,1.6,.5,1)} .sibot.hop svg{animation:hubhop .62s cubic-bezier(.3,1.5,.4,1) 1} .sibot.oops svg{animation:dbump .45s cubic-bezier(.36,.07,.19,.97) 2} .sihand{animation:sigrip .7s cubic-bezier(.34,1.45,.5,1) .45s both} /* now and then he drums his fingers on the card, one after another */ .sihand .gfing{animation:sidrum 6s ease-in-out 2.4s infinite} .sihand .gfing:nth-of-type(2){animation-delay:2.5s} .sihand .gfing:nth-of-type(3){animation-delay:2.6s} .sihand.r .gfing{animation-delay:2.75s} .sihand.r .gfing:nth-of-type(2){animation-delay:2.85s} .sihand.r .gfing:nth-of-type(3){animation-delay:2.95s} .sibot:hover ~ .sihand .gfing{animation-play-state:paused} } @keyframes sirise{from{transform:translateY(70%)}to{transform:none}} @keyframes sipeek{0%,62%,100%{transform:none} 68%{transform:translateY(34%)} /* ducks behind the edge */ 76%{transform:translateY(-4%) rotate(-7deg)} /* pops back up, head on one side */ 86%{transform:rotate(-7deg)} 92%{transform:rotate(3deg)}} @keyframes sigrip{from{opacity:0;transform:translateY(6px)}} @keyframes sidrum{0%,8%,100%{transform:none}4%{transform:scaleY(.8) translateY(-1px)}} .siwhy{margin:-6px 0 14px;font:400 12.5px/1.45 var(--site-sans);color:var(--ink3)} .sispam{margin:14px 0 0;text-align:center} .sitick{display:flex;gap:10px;align-items:flex-start;margin:-2px 0 16px;cursor:pointer; font:400 14px/1.45 var(--site-sans);color:var(--ink2)} .sitick input{flex:none;margin:2px 0 0;width:17px;height:17px;accent-color:var(--terracotta)} .silinks.sione{justify-content:center;margin:12px 0 0} .sierr{min-height:20px;margin:10px 0 0;font:500 13.5px/1.45 var(--site-sans);color:var(--terra-deep)} .sierr.ok{color:var(--go-deep)} .sigoogle{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:13px 16px;border:1px solid var(--line); border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer;font:500 15px/1 var(--site-sans); transition:border-color .2s,background .2s} .sigoogle:hover{border-color:var(--ink3);background:#fafafa} .sigoogle:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px} .sigoogle:disabled{opacity:.6;cursor:progress} .sigoogle svg{width:20px;height:20px;flex:none} .sior{display:flex;align-items:center;gap:14px;margin:20px 0;font:400 13px/1 var(--site-sans);color:var(--ink3)} .sior::before,.sior::after{content:"";flex:1;height:1px;background:var(--rule)} .siswap{margin:22px 0 0;text-align:center;font:400 14.5px/1.4 var(--site-sans);color:var(--ink2)} .siswap a{margin-left:4px;color:var(--terra-deep);font-weight:600;text-decoration:none} .siswap a:hover{text-decoration:underline;text-underline-offset:3px} .silegal{margin:16px 0 0;font:400 12.5px/1.5 var(--site-sans);color:var(--ink3);text-align:center} .silegal a{color:var(--ink2)} /* the code: six boxes drawn from one real input laid over them */ .otp{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px} .otp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:16px;cursor:text} .otp span{display:flex;align-items:center;justify-content:center;aspect-ratio:5/6;max-height:62px;border:1px solid var(--line); border-radius:12px;background:var(--card);font:500 26px/1 var(--site-serif);color:var(--ink); font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s} .otp.focus span.at{border-color:var(--terracotta);box-shadow:0 0 0 3px var(--terra-tint)} .otp.bad span{border-color:var(--terra-deep)} .silinks{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0 0} .silinks button{padding:0;border:0;background:none;cursor:pointer;font:500 13.5px/1.4 var(--site-sans);color:var(--terra-deep)} .silinks button:disabled{color:var(--ink3);cursor:default} .silinks button:not(:disabled):hover{text-decoration:underline;text-underline-offset:3px} /* A link in the row looks like the buttons beside it. Without this an fell back to the browser's own blue underline — the one thing on the card in somebody else's style. */ .silinks a{font:500 13.5px/1.4 var(--site-sans);color:var(--terra-deep);text-decoration:none} .silinks a:hover{text-decoration:underline;text-underline-offset:3px} /* inside a card, the swap line sits closer to the button it follows */ .sicard .siswap{margin-top:16px} /* ---------- the picker (src/site/picker.js): a styled