/* Make Break Inc. - retro "corporate firmware" theme. See docs/DESIGN.md. Mobile-first: base styles are for phones, media queries add space for bigger screens. */ /* ---------- Font (self-hosted, SIL Open Font License; see assets/fonts) ---------- */ @font-face{ font-family:"Silkscreen"; src:url("../fonts/Silkscreen-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; } /* ---------- Design tokens ---------- */ /* Colors are stored as space-separated RGB triplets so any transparency can be written as rgb(var(--fg-rgb) / .16). Light "paper" is the default; dark follows the system setting unless the toggle overrides it (data-theme on ). */ :root{ --font-pixel:"Silkscreen",ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* draws on an 8px grid: only crisp at sizes that are multiples of 8 */ --font-label:var(--font-pixel); --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace; --pop-pink:#ff4fa3; --pop-yellow:#ffd83b; --pop-mint:#3fe8b0; --on-pop:#15120f; /* text that sits on a pop color */ --white:#fff; --lcd:#dcd8c3; /* the pale "e-paper screen" behind sprites, same in both themes */ --lcd-line:#cdc8b0; --px-dark:#15120f; --px:4px; /* size of one art pixel; sprites scale from this */ --max:1080px; color-scheme:light; --bg-rgb:239 235 221; --fg-rgb:21 18 15; --card:#f8f5ea; --muted:#5b5549; --text-2:#3b362e; --blue-ui:#2540d9; --sprite-blue:#2540d9; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --bg-rgb:20 17 15; --fg-rgb:239 235 221; --card:#211c17; --muted:#a8a395; --text-2:#d4d0c7; --blue-ui:#8aa2ff; --sprite-blue:#5b78ff; } } :root[data-theme="dark"]{ color-scheme:dark; --bg-rgb:20 17 15; --fg-rgb:239 235 221; --card:#211c17; --muted:#a8a395; --text-2:#d4d0c7; --blue-ui:#8aa2ff; --sprite-blue:#5b78ff; } :root{ --bg:rgb(var(--bg-rgb)); --ink:rgb(var(--fg-rgb)); --line:rgb(var(--fg-rgb) / .16); --px-k:var(--ink); /* sprite outline color; fixed dark on LCD panels (see .lcd) */ } /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{background:var(--bg);-webkit-text-size-adjust:100%} html[data-motion="on"]{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font-body);font-synthesis:none} [id]{scroll-margin-top:76px} a{color:inherit} p{margin:0} h1,h2,h3{margin:0;font-family:var(--font-pixel);font-weight:400;line-height:1.25} button{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--blue-ui);outline-offset:3px} mark{color:var(--on-pop);background:var(--pop-yellow);padding:0 .25em;-webkit-box-decoration-break:clone;box-decoration-break:clone} mark.m-p{background:var(--pop-pink)} mark.m-m{background:var(--pop-mint)} /* In big headings the highlight is its own box, so it can never overlap the line above or below. */ .manifesto-quote mark,.section-title mark{display:inline-block;padding:.08em .25em;line-height:1.15} .wrap{width:min(calc(100% - 32px),var(--max));margin-inline:auto} .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:8px;top:-60px;z-index:50;padding:10px 14px;background:var(--pop-yellow);color:var(--on-pop);border:2px solid var(--ink);font-family:var(--font-label);font-size:16px} .skip:focus{top:8px} /* ---------- Sprites (pixel art drawn in assets, compiled to inline SVG) ---------- */ .sprite{display:block;flex:none;max-width:100%;height:auto;shape-rendering:crispEdges} .px-k{fill:var(--px-k)} .px-p{fill:var(--pop-pink)} .px-y{fill:var(--pop-yellow)} .px-m{fill:var(--pop-mint)} .px-b{fill:var(--sprite-blue)} .px-w{fill:var(--white)} .px-g{fill:var(--muted)} .sprite-sheet{position:absolute} /* Sprite widths: the grid width times --px (the size of one art pixel). Height follows the viewBox. */ .s-heart{width:calc(var(--px) * 13)} .s-broken{width:calc(var(--px) * 13)} .s-phone{width:calc(var(--px) * 14)} .s-bubble{width:calc(var(--px) * 18)} .s-bubblek{width:calc(var(--px) * 18)} .s-flag{width:calc(var(--px) * 12)} .s-magnifier{width:calc(var(--px) * 14)} .s-envelope{width:calc(var(--px) * 14)} .s-battery{width:calc(var(--px) * 15)} .s-moon{width:calc(var(--px) * 12)} .s-sun{width:calc(var(--px) * 12)} .s-sparkle{width:calc(var(--px) * 7)} .s-note{width:calc(var(--px) * 6)} .s-cassette{width:calc(var(--px) * 24)} .s-shredder{width:calc(var(--px) * 24)} .s-strips{width:calc(var(--px) * 18)} .s-buddy{width:calc(var(--px) * 20)} .s-waves{width:calc(var(--px) * 9)} .s-reel_a{width:calc(var(--px) * 5)} .s-reel_b{width:calc(var(--px) * 5)} .s-pause{width:calc(var(--px) * 6)} .s-play{width:calc(var(--px) * 6)} .s-arrow{width:calc(var(--px) * 7)} /* An e-paper style panel that sprites sit on, so their dark outlines read in both themes. */ .lcd{--ink:var(--px-dark);--px-k:var(--px-dark);color:var(--px-dark);background-color:var(--lcd);background-image:repeating-linear-gradient(0deg,transparent 0 3px,var(--lcd-line) 3px 4px);border:2px solid var(--ink)} /* ---------- Buttons ---------- */ .pxbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 16px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-family:var(--font-label);font-size:16px;line-height:1;text-transform:uppercase;text-decoration:none;box-shadow:3px 3px 0 var(--ink);cursor:pointer;transition:transform .08s steps(2),box-shadow .08s steps(2)} .pxbtn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);background:var(--pop-mint);color:var(--on-pop)} .pxbtn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)} .pxbtn.primary{background:var(--pop-yellow);color:var(--on-pop)} .pxbtn.primary:hover{background:var(--pop-pink)} .pxbtn .sprite{--px:2px} /* ---------- Status bar ---------- */ .statusbar{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:2px solid var(--ink)} .statusbar .wrap{width:min(calc(100% - 32px),1240px)} .statusbar-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px} .brand{display:flex;align-items:center;gap:10px;min-height:44px;font-family:var(--font-label);font-size:16px;text-decoration:none;white-space:nowrap} .brand .sprite{--px:2px} .brand .inc{display:none} .navlinks{display:none;list-style:none;margin:0;padding:0;gap:22px;font-family:var(--font-label);font-size:16px;text-transform:uppercase} .navlinks a{white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;text-decoration:none;border-bottom:2px solid transparent} .navlinks a:hover{border-bottom-color:var(--ink)} .controls{display:flex;align-items:center;gap:10px} .battery{display:none;align-items:center;gap:8px;font-family:var(--font-label);font-size:16px;text-transform:uppercase;color:var(--muted)} .battery .sprite{--px:2px} .ctrl{min-width:44px;height:44px;padding:0 10px;white-space:nowrap} .ctrl .btn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .ctrl .sprite{--px:2px} /* The icon and label show what a click will do, not the current state. */ #themeToggle[data-state="dark"] .i-moon,#themeToggle[data-state="light"] .i-sun{display:none} #motionToggle[data-state="on"] .i-play,#motionToggle[data-state="off"] .i-pause{display:none} .ctrl[hidden]{display:none} /* ---------- Windows and cards ---------- */ .window{background:var(--card);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink)} .titlebar{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--ink);color:var(--bg);font-family:var(--font-label);font-size:16px;text-transform:uppercase} .tb-dots{display:flex;gap:5px} .tb-dots i{width:10px;height:10px;background:var(--pop-pink)} .tb-dots i:nth-child(2){background:var(--pop-yellow)} .tb-dots i:nth-child(3){background:var(--pop-mint)} .window-body{padding:16px} /* ---------- Sections ---------- */ .section{padding:56px 0} .kicker{margin-bottom:14px;font-family:var(--font-label);font-size:16px;text-transform:uppercase;color:var(--muted)} .section-title{font-size:32px;max-width:14em} .lede{margin-top:20px;max-width:34em;font-size:18px;color:var(--text-2)} /* ---------- Hero ---------- */ .hero{padding:28px 0 52px} .hero-grid{display:grid;gap:28px} .boot{max-width:460px} .boot-lines{margin:0;padding:16px;font:14px/1.7 var(--font-mono);color:var(--ink);white-space:pre-wrap;min-height:190px} .bl{display:block} .cursor{display:inline-block;width:.6em;height:1.05em;margin-left:2px;vertical-align:text-bottom;background:var(--ink)} .skip-boot{margin-top:14px} .eyebrow{margin-bottom:14px;font-family:var(--font-label);font-size:16px;text-transform:uppercase;color:var(--muted)} .hero h1{font-size:56px;line-height:1.1;text-transform:uppercase} .hero h1 span{display:block} .hero h1 .h1-c{display:inline-block;margin-top:12px;padding:2px 12px;background:var(--ink);color:var(--bg);font-size:24px;line-height:1.3} .tagline{margin-top:24px;max-width:26em;font-size:clamp(18px,4.6vw,24px);line-height:1.5} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px} /* ---------- Ticker ---------- */ .ticker{border-block:2px solid var(--ink);background:var(--card);overflow:hidden} .ticker-track{display:flex;width:max-content;padding-block:14px;animation:marquee 150s linear infinite} .ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused} .ticker-list{display:flex;gap:14px;margin:0;padding:0 14px 0 0;list-style:none} .chip{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:2px solid var(--ink);background:var(--bg);white-space:nowrap;font-size:16px} .chip .lcd{display:grid;place-items:center;width:38px;height:38px} .chip .lcd .sprite{--px:2px} .chip-tag{font-weight:400;padding:4px 8px;background:var(--pop-yellow);color:var(--on-pop);font-family:var(--font-label);font-size:16px;line-height:1} .chip:nth-child(5n+2) .chip-tag{background:var(--pop-pink)} .chip:nth-child(5n+3) .chip-tag{background:var(--pop-mint)} .chip:nth-child(5n+4) .chip-tag{background:var(--white)} .chip:nth-child(5n+5) .chip-tag{background:var(--pop-yellow)} /* ---------- Manifesto ---------- */ .manifesto-quote{font-size:32px;line-height:1.3} .manifesto-quote em{font-style:normal;color:var(--text-2)} .terminal{margin-top:40px} .terminal pre{margin:0;padding:16px;font:14px/1.75 var(--font-mono);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere} .terminal .prompt{color:var(--blue-ui);font-weight:700} .terminal mark{padding:.05em .4em} .stats{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:32px 0 0;padding:0;list-style:none} .stat{min-width:0;padding:16px;border:2px solid var(--ink);background:var(--card);box-shadow:4px 4px 0 var(--ink)} .stat-num{display:block;font-family:var(--font-pixel);font-size:40px;font-weight:400;line-height:1.15} .stat-label{display:block;margin-top:8px;font-family:var(--font-label);font-size:16px;text-transform:uppercase;color:var(--muted)} /* ---------- Founders ---------- */ .founders{display:grid;gap:28px;margin-top:40px} .card{display:flex;flex-direction:column;gap:14px;padding:16px;border:2px solid var(--ink);background:var(--card);box-shadow:5px 5px 0 var(--ink)} .badge{align-self:flex-start;padding:5px 8px;border:2px solid var(--ink);font-family:var(--font-label);font-size:16px;line-height:1;text-transform:uppercase} .avatar{display:grid;place-items:center;min-height:190px;padding:16px;position:relative} .avatar .sprite{--px:8px} .founder h3{font-size:32px} .role{font-family:var(--font-label);font-size:16px;text-transform:uppercase;color:var(--muted)} .founder p.bio{color:var(--text-2)} .note{margin:auto 0 0;padding:14px 0 0;border-top:2px dashed var(--ink)} .note-label{margin-bottom:6px;font-family:var(--font-label);font-size:16px;text-transform:uppercase} .note p:last-child{font-size:16px} /* ---------- AI section ---------- */ .ai-window{margin-top:36px} .ai-body{display:grid;gap:24px;padding:16px} .ai-body > *{min-width:0} .status{display:inline-flex;align-items:center;gap:10px;padding:6px 10px;border:2px solid var(--ink);background:var(--bg);font-family:var(--font-label);font-size:16px;line-height:1.1;text-transform:uppercase} .status i{width:10px;height:10px;background:var(--pop-pink)} .nowplaying{display:grid;gap:16px;justify-items:center;padding:16px} .deck{display:flex;align-items:flex-end;justify-content:center;gap:18px;flex-wrap:wrap} .deck .s-cassette{--px:8px} .buddy-wrap{position:relative;display:flex;align-items:flex-end} .buddy-wrap .s-buddy{--px:6px} .buddy-wrap .s-note{--px:4px;position:absolute;right:-18px;top:0} .buddy-wrap .s-note.n2{right:-34px;top:26px} .progress{width:100%;max-width:340px;height:16px;border:2px solid var(--ink);background:var(--bg)} .progress-fill{height:100%;background:repeating-linear-gradient(90deg,var(--pop-mint) 0 10px,transparent 10px 14px)} .tape-label{max-width:100%;font-family:var(--font-label);font-size:16px;text-align:center;text-transform:uppercase;overflow-wrap:anywhere} .ai-name{font-size:40px;line-height:1.2;text-transform:uppercase} .ai-copy p{margin-top:16px;color:var(--text-2);max-width:34em} .fake-chat{display:grid;gap:12px;margin-top:24px;max-width:36em} .bubble{padding:12px 14px;border:2px solid var(--ink);background:var(--bg);font-size:16px;line-height:1.45} .bubble.user{margin-left:8%;background:var(--card)} .bubble.ai{margin-right:8%;background:var(--pop-yellow);color:var(--on-pop)} .bubble b{display:block;margin-bottom:4px;font-family:var(--font-label);font-size:16px;font-weight:400;text-transform:uppercase} .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px} /* ---------- Board mailroom: the shredder desk with the Notify the Board button ---------- */ .notify-zone{display:grid;justify-items:center;gap:16px;margin-top:28px;padding:16px} /* The panel is a fixed pale screen, so its text must not pick up the AI section's paragraph colors. */ .notify-zone p{margin-top:0;max-width:none;color:inherit} .zone-title{font-family:var(--font-label);font-size:16px;text-transform:uppercase} .shred-stage{--px:6px;position:relative;width:calc(var(--px) * 24);padding-top:64px} .shred-stage .s-shredder{position:relative;z-index:2} .shred-card{position:absolute;z-index:1;left:50%;top:0;display:flex;padding:6px;border:2px solid var(--px-dark);background:var(--white);transform:translateX(-50%);visibility:hidden} .shred-card .sprite{--px:4px} .shred-strips{position:relative;height:76px} .shred-strips i{position:absolute;top:0;width:9px;height:34px;border:2px solid var(--px-dark);background:var(--white);opacity:0} .shred-strips i:nth-child(4n+2){background:var(--pop-yellow)} .shred-strips i:nth-child(4n+3){background:var(--pop-pink)} .shred-strips i:nth-child(4n){background:var(--pop-mint)} .shred-strips i:nth-child(1){left:10%;--rest:34px} .shred-strips i:nth-child(2){left:17%;--rest:42px} .shred-strips i:nth-child(3){left:24%;--rest:30px} .shred-strips i:nth-child(4){left:31%;--rest:44px} .shred-strips i:nth-child(5){left:38%;--rest:36px} .shred-strips i:nth-child(6){left:45%;--rest:28px} .shred-strips i:nth-child(7){left:52%;--rest:40px} .shred-strips i:nth-child(8){left:59%;--rest:32px} .shred-strips i:nth-child(9){left:66%;--rest:44px} .shred-strips i:nth-child(10){left:73%;--rest:30px} .shred-strips i:nth-child(11){left:80%;--rest:38px} .shred-strips i:nth-child(12){left:87%;--rest:34px} .push{display:grid;justify-items:center;gap:4px} .push-tag{padding:4px 10px;border:2px solid var(--px-dark);background:var(--pop-pink);color:var(--on-pop);font-family:var(--font-label);font-size:16px;line-height:1.2;text-transform:uppercase} .push .s-arrow{--px:4px} .pxbtn.big{width:100%;max-width:420px;min-height:64px;padding:10px 16px;font-size:24px;line-height:1.2;text-align:center} .notify-zone.pressed .push{display:none} .notify-status{width:100%;font-family:var(--font-label);font-size:16px;line-height:1.35;text-transform:uppercase} .notify-status:not(:empty){padding:10px 12px;border:2px solid var(--px-dark);background:var(--pop-mint);color:var(--on-pop)} /* ---------- Footer ---------- */ .footer{padding:48px 0 40px;border-top:2px solid var(--ink)} .footer-mark{display:flex;align-items:center;gap:16px;font-family:var(--font-pixel);font-size:48px;font-weight:400;line-height:1.2;text-transform:uppercase} .footer-mark .sprite{--px:6px} .footer-copy{margin-top:20px;max-width:32em;color:var(--muted);font-size:16px} .legal{display:flex;flex-direction:column;gap:6px;margin-top:40px;font-family:var(--font-label);font-size:16px;text-transform:uppercase;color:var(--muted)} /* ---------- Animation ---------- */ @keyframes type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.96)}60%{opacity:1;transform:translateY(-3px) scale(1.02)}100%{opacity:1;transform:none}} @keyframes blink{50%{opacity:0}} @keyframes marquee{to{transform:translateX(-50%)}} @keyframes reel-a{0%{opacity:1}50%{opacity:0}} @keyframes reel-b{0%{opacity:0}50%{opacity:1}} @keyframes bob{50%{transform:translateY(calc(var(--px) * -1))}} @keyframes drift{0%{opacity:0;transform:translateY(8px)}30%{opacity:1}100%{opacity:0;transform:translateY(-14px)}} @keyframes ring{0%,45%,100%{transform:none}5%,15%,25%,35%{transform:translateX(-6px)}10%,20%,30%,40%{transform:translateX(6px)}} @keyframes ring-waves{0%,45%,100%{opacity:0}5%,25%{opacity:1}15%,35%{opacity:.35}} @keyframes dot{0%,100%{opacity:.2}33%{opacity:1}} @keyframes pulse{50%{transform:scale(1.125)}} @keyframes fill{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 25% 0 0)}} @keyframes shred-in{from{visibility:visible;transform:translate(-50%,0)}to{visibility:visible;transform:translate(-50%,72px)}} @keyframes strip-fall{from{opacity:1;transform:translateY(-38px)}to{opacity:1;transform:translateY(var(--rest,34px))}} @keyframes shred-shake{50%{transform:translateX(3px)}} @keyframes push-bob{50%{transform:translateY(6px)}} @keyframes nudge{0%,80%,100%{transform:none;box-shadow:3px 3px 0 var(--ink)}86%{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}93%{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}} @keyframes buzz{0%,100%{transform:none}12%,37%,62%,87%{transform:translate(-3px,0)}25%,50%,75%{transform:translate(3px,0)}} @keyframes hide-later{to{visibility:hidden;opacity:0}} .bl{animation:type .45s steps(24) backwards;animation-delay:calc(var(--i) * .32s + .2s)} .l1{--i:0}.l2{--i:1}.l3{--i:2}.l4{--i:3}.l5{--i:4}.l6{--i:5}.l7{--i:6} .cursor{animation:blink 1s steps(1) infinite} .hero-copy > *{animation:pop .5s steps(5) backwards} .hero-copy .eyebrow{animation-delay:2.6s} .hero-copy h1{animation-delay:2.8s} .hero-copy .tagline{animation-delay:3.1s} .hero-copy .hero-actions{animation-delay:3.3s} .skip-boot{animation:hide-later .01s linear 3.4s forwards} .hero.booted *,.hero.booted *::before{animation:none!important} .hero.booted .skip-boot{display:none} .ra1,.ra2{animation:reel-a .5s steps(1) infinite} .rb1,.rb2{animation:reel-b .5s steps(1) infinite} .s-buddy{animation:bob .8s steps(1) infinite} .s-note{animation:drift 2.4s steps(6) infinite} .s-note.n2{animation-delay:1.2s} .avatar-q .s-phone{animation:ring 2.4s steps(1) infinite} .avatar-q .s-waves{position:absolute;top:10px;animation:ring-waves 2.4s steps(1) infinite} .avatar-s .s-heart{animation:pulse 1s steps(1) infinite} .avatar-s .s-sparkle{position:absolute;--px:4px;animation:blink 1.4s steps(1) infinite} .avatar-s .s-sparkle.sp1{top:22px;left:22%} .avatar-s .s-sparkle.sp2{bottom:24px;right:22%;animation-delay:.7s} .d1{animation:dot 1.2s steps(1) infinite} .d2{animation:dot 1.2s steps(1) infinite;animation-delay:.4s} .d3{animation:dot 1.2s steps(1) infinite;animation-delay:.8s} .progress-fill{animation:fill 6s steps(20) infinite} .status i{animation:blink 1.2s steps(1) infinite} .is-buzz{animation:buzz .45s steps(1)} .push{animation:push-bob .8s steps(1) infinite} .pxbtn.big{animation:nudge 2.4s steps(1) infinite} .notify-zone.pressed .pxbtn.big{animation:none} .is-shredding .shred-card{animation:shred-in 1s steps(9) forwards} .is-shredding .s-shredder{animation:shred-shake .16s steps(1) 6 .5s} .is-shredding .shred-strips i{animation:strip-fall .7s steps(6) both} .is-shredding .shred-strips i:nth-child(3n+1){animation-delay:.8s} .is-shredding .shred-strips i:nth-child(3n+2){animation-delay:.95s} .is-shredding .shred-strips i:nth-child(3n){animation-delay:1.1s} /* ---------- Motion off: the visitor turned animations off, or their system asks for less motion ---------- */ html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important} html[data-motion="off"] .skip-boot{display:none} html[data-motion="off"] .ticker-track{width:auto;flex-direction:column;align-items:center} html[data-motion="off"] .ticker-list{flex-wrap:wrap;justify-content:center;padding-right:0} html[data-motion="off"] .ticker-list[aria-hidden="true"],html[data-motion="off"] li[aria-hidden="true"]{display:none} html[data-motion="off"] .cursor{opacity:1} @media (prefers-reduced-motion:reduce){ html:not([data-motion="on"]) *,html:not([data-motion="on"]) *::before,html:not([data-motion="on"]) *::after{animation:none!important;transition:none!important} html:not([data-motion="on"]) .skip-boot{display:none} html:not([data-motion="on"]) .ticker-track{width:auto;flex-direction:column;align-items:center} html:not([data-motion="on"]) .ticker-list{flex-wrap:wrap;justify-content:center;padding-right:0} html:not([data-motion="on"]) .ticker-list[aria-hidden="true"],html:not([data-motion="on"]) li[aria-hidden="true"]{display:none} } /* ---------- Bigger screens ---------- */ @media (min-width:460px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:420px){ .brand .inc{display:inline} .avatar .sprite{--px:10px} .avatar{height:210px} } @media (min-width:720px){ body{font-size:18px} .statusbar-inner{min-height:68px} .section{padding:88px 0} .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .window-body,.ai-body{padding:24px} .legal{flex-direction:row;justify-content:space-between} .ai-body{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:36px} } @media (min-width:920px){ .navlinks{display:flex} .hero{padding:56px 0 88px} .hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:48px} .boot{grid-column:2;grid-row:1;justify-self:end;width:100%} .hero-copy{grid-column:1;grid-row:1} .founders{grid-template-columns:repeat(3,minmax(0,1fr))} .badge{display:inline-flex;align-items:center;min-height:3.1em} .section-title{max-width:16em} } @media (min-width:720px) and (max-width:919px){ .ctrl{padding:0 14px} .ctrl .btn-label{position:static;width:auto;height:auto;overflow:visible;clip:auto} } @media (min-width:1200px){ .ctrl{padding:0 14px} .ctrl .btn-label{position:static;width:auto;height:auto;overflow:visible;clip:auto} } @media (min-width:1400px){ .battery{display:inline-flex} } /* Pixel-font sizes step in multiples of 8px so the pixels stay crisp. */ @media (min-width:420px){ .hero h1{font-size:64px} .hero h1 .h1-c{font-size:32px} } @media (min-width:720px){ .section-title,.manifesto-quote{font-size:48px} .hero h1{font-size:96px} .hero h1 .h1-c{font-size:48px} .stat-num{font-size:56px} .ai-name{font-size:48px} .footer-mark{font-size:96px} } @media (min-width:920px){ .hero h1{font-size:112px} .hero h1 .h1-c{font-size:56px} } @media (min-width:1200px){ .section-title,.manifesto-quote{font-size:56px} .hero h1{font-size:144px} .hero h1 .h1-c{font-size:72px} .ai-name{font-size:56px} .footer-mark{font-size:128px} }