/* =========================================================================== Four acts inside the two devices of the hero. 1 · clock-in the workplace recognises you, and you clock in 2 · the expense you photograph the receipt, the fields fill in 3 · holidays you pick the days, whoever approves sees them 4 · the payslip the direction flips: it leaves the company and comes back read The fourth act isn't an extra: the first three all go in the same direction, and without one that comes back the product looks like a one-way mailbox. HOW IT STANDS UP The shell — laptop and phone — is a single image with the two screen rectangles cut out in the alpha. The drawings sit below, the shell falls on top: bezels, notch and dynamic island clip everything by themselves. The percentages of .tb__scr are the two holes measured on the image. WHO DOES WHAT clock-in.js only keeps the turn: it writes data-act on the container and that's it. All the choreography is here. It is the same split as magic.js, and it lets you change an animation without touching the JavaScript. Every act is display:none until its turn. It isn't a detail: it is what restarts the animations from scratch at every loop, without having to rewind them by hand. STILL IS ALREADY RIGHT Without JavaScript there is no data-act: you see the first act in its final state — inside the area, clocked in at 09:02, the attendance on the desk. The meaning isn't lost, only the motion. Same with «reduce motion». =========================================================================== */ .tb { position: relative; } /* The screens' reference is the stage, not .tb: the percentages below are measured on the shell image, and .tb also holds the caption. */ .tb__stage { position: relative; } .tb picture, .tb__frame { display: block; width: 100%; } .tb picture { position: relative; z-index: 2; } .tb__scr { position: absolute; z-index: 1; display: block; } .tb__thread { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* The two holes, measured on the image (1397 x 798). */ .tb__scr--mac { left: 9.162%; top: 6.642%; width: 70.795%; height: 74.436%; } .tb__scr--tel { left: 80.530%; top: 28.822%; width: 17.180%; height: 66.040%; } /* Who is on stage. Without data-act — no JavaScript — it is the first. */ .tb__at { display: none; } .tb:not([data-act]) .tb__at--1, .tb[data-act="1"] .tb__at--1, .tb[data-act="2"] .tb__at--2, .tb[data-act="3"] .tb__at--3, .tb[data-act="4"] .tb__at--4, .tb[data-act="5"] .tb__at--5, .tb[data-act="6"] .tb__at--6, .tb[data-act="7"] .tb__at--7 { display: block; } /* Animated geometries work in viewBox coordinates: without this, old Safari measures the pivot on the drawing box and things slide. */ .tb__me, .tb__wave, .tb__pill, .tb__done, .tb__tap, .tb__time, .tb2__flash, .tb2__reticle, .tb2__outcome, .tb2__spark, .tb2__value, .tb2__euro, .tb2__pill, .tb2__done, .tb3__g, .tb3__count, .tb3__pill, .tb3__tap, .tb3__done, .tb4__notice, .tb4__sheet, .tb4__read, .tbm1__p5, .tbm1__row, .tbm1__bar, .tbm__flash, .tbm1__wave, .tbm1__new, .tbm5__n, .tbm7__light, .tbm7__ic, .tbm__seg, .tbm2__digit, .tbm2__row, .tbm2__ok, .tbm2__neg, .tbm2__tick, .tbm3__count, .tbm3__row, .tbm3__g, .tbm3__ok, .tbm3__tick, .tbm4__p9, .tbm4__row, .tbm4__send, .tbm4__read, .tb5__hours, .tb5__minus, .tb5__plus, .tb5__share, .tb5__pill, .tb5__done, .tb6__notice, .tb6__time, .tb6__pill, .tb6__tap, .tb6__done, .tbm5__margin, .tbm5__row, .tbm5__cost, .tbm6__anomaly, .tbm6__reply, .tbm6__past, .tbm6__seg, .tbm6__cell, .tbm6__row, .tbm6__ask, .tbm7__p, .tb7__r, .tb7__again, .tb__thread-p { transform-box: view-box; } /* =========================================================================== How things are made. This is also the still state: what you see without JavaScript and with «reduce motion» is the end of the first act. =========================================================================== */ /* --- shared pieces -------------------------------------------------------- */ .tb__pill, .tb2__pill, .tb3__pill { fill: var(--lp-accent); } .tb__tap, .tb3__tap { fill: none; stroke: var(--lp-accent); stroke-width: 3; opacity: 0; } .tb__done circle, .tb2__done circle, .tb3__done circle, .tb5__done circle, .tb6__done circle, .tb4__read circle, .tbm4__read circle { fill: #2FA36B; } .tb__done path, .tb2__done path, .tb3__done path, .tb5__done path, .tb6__done path, .tb4__read path, .tbm4__read path { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .tbm4__read path { stroke-width: 3.4; } .tbm__flash { fill: var(--lp-accent); opacity: 0; } /* The sign in the header: every act has its own, otherwise the seven desks all open with the same blue strip and look like the same screen. */ .tbm__seg { opacity: .55; } html.js.mo-clock .tb.is-run .tbm__seg { animation: tb-rise-seg .5s var(--mo-ease-enter, ease) .15s both; } @keyframes tb-rise-seg { from { opacity: 0; transform: translateY(8px); } to { opacity: .55; transform: none; } } /* --- act 1 · clock-in ----------------------------------------------------- */ /* On the laptop the same work area seen from the other side: where the people are right now. It is the thing that differs most from all the other desks, and it is also what you'd expect from geofencing. */ .tbm1__zone { fill: rgba(0,128,246,.14); stroke: var(--lp-accent); stroke-width: 2.5; stroke-dasharray: 9 7; } .tbm1__wave { fill: none; stroke: var(--lp-accent); stroke-width: 3; opacity: 0; transform-origin: 420px 324px; } .tbm1__new { transform-origin: 392px 300px; } .tb__zone { fill: rgba(0,128,246,.18); stroke: var(--lp-accent); stroke-width: 2.5; stroke-dasharray: 9 7; } .tb__wave { fill: none; stroke: var(--lp-accent); stroke-width: 3; opacity: 0; transform-origin: 120px 170px; } .tb__pin { fill: var(--bbx-blue-800); } .tb__me { fill: var(--bbx-blue-900); transform: translate(112px, 196px); } .tb__pill { opacity: 0; transform-origin: 120px 463px; } .tb__tap { transform-origin: 120px 463px; } .tb__done { transform-origin: 120px 463px; } .tb__time rect { fill: var(--bbx-blue-50); } .tb__time text, .tb2__euro text, .tb3__count text, .tbm2__digit text, .tbm3__count text { font: 700 20px/1 var(--bbx-font-sans); text-anchor: middle; letter-spacing: -.02em; } .tb__time text { fill: var(--lp-accent-press); } .tbm1__p5 { fill: #fff; transform-origin: 802px 132px; } .tbm1__bar { fill: var(--lp-accent); transform-origin: 430px 0; } .tbm1__row { transform-origin: 546px 463px; } /* --- act 2 · the expense --------------------------------------------------- */ .tb2__flash { opacity: 0; } .tb2__spark { fill: var(--lp-accent); transform-origin: 92px 71px; } .tb2__value { fill: var(--lp-accent); transform-origin: 92px 0; } .tb2__euro rect { fill: var(--bbx-blue-50); } .tb2__euro text { fill: var(--lp-accent-press); } .tb2__pill { opacity: 0; transform-origin: 120px 463px; } .tb2__done { transform-origin: 120px 463px; } .tbm2__c { fill: var(--lp-dark); font: 700 19px/1 var(--bbx-font-sans); text-anchor: end; letter-spacing: -.02em; } .tbm2__c--big { fill: var(--lp-accent-press); font-size: 22px; text-anchor: start; } .tbm2__digit rect { fill: rgba(255,255,255,.16); } .tbm2__digit text { fill: #fff; } .tbm2__row { transform-origin: 546px 463px; } .tbm2__neg rect { fill: #EDF1F6; } .tbm2__ok rect { fill: var(--lp-accent); } .tbm2__tick { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } /* --- act 3 · holidays ------------------------------------------------------ */ .tb3__g { fill: var(--lp-accent); } .tb3__count rect { fill: var(--bbx-blue-50); } .tb3__count text { fill: var(--lp-accent-press); } .tb3__pill { opacity: 0; transform-origin: 120px 463px; } .tb3__tap { transform-origin: 120px 463px; } .tb3__done { transform-origin: 120px 463px; } .tbm3__count rect { fill: rgba(255,255,255,.16); } .tbm3__count text { fill: #fff; } .tbm3__row { transform-origin: 546px 463px; } .tbm3__g { fill: var(--lp-accent); } .tbm3__ok rect { fill: var(--lp-accent); } .tbm3__tick { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } /* --- act 4 · the payslip --------------------------------------------------- */ .tb4__notice { transform-origin: 120px 61px; } .tb4__sheet { transform-origin: 120px 270px; } .tb4__read { transform-origin: 120px 463px; } .tbm4__p9 { fill: #fff; transform-origin: 898px 132px; } .tbm4__row { transform-origin: 546px 463px; } .tbm4__send rect { fill: var(--lp-accent); } .tbm4__read { transform-origin: 880px 465px; } /* --- the thread ------------------------------------------------------------ */ .tb__thread-l { fill: none; stroke: var(--lp-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 620; stroke-dashoffset: 620; opacity: 0; } .tb__thread-p { fill: var(--lp-accent); opacity: 0; } /* =========================================================================== THE MOTION From here down everything is under .mo-clock: removing that word from the line in switches the animation off and leaves the result. Times are in seconds and not in percentages: every act is a scene of its own, and reading «at 3.2 seconds the button is tapped» is more honest than reading «at 40%». The length of an act is decided by clock-in.js, and it must stay longer than the last delay in here (about 7 seconds). Everything goes through .is-run, which clock-in.js removes and puts back at every scene change. It isn't a whim: switching display from none to block does NOT rewind the animations — the browser finds them already finished and leaves them finished, and from the second act on you only saw the result. Removing and adding the class makes them apply again from scratch. =========================================================================== */ html.js.mo-clock .tb.is-run .tb__at [class*="tb"], html.js.mo-clock .tb.is-run .tb__at { animation-fill-mode: both; } /* --- recurring pieces ------------------------------------------------------ */ @keyframes tb-enter { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } } @keyframes tb-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes tb-exit { from { opacity: 1; } to { opacity: 0; transform: scale(.9); } } @keyframes tb-blink { 0% { opacity: 0; } 30% { opacity: .14; } 100% { opacity: 0; } } @keyframes tb-beat { 0%,100% { transform: scale(1); } 50% { transform: scale(.955); } } @keyframes tb-wave { from { opacity: .85; transform: scale(.62); } to { opacity: 0; transform: scale(1.25); } } @keyframes tb-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes tb-pop { 0% { opacity: .22; transform: scale(.72); } 55% { transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } } /* Like tb-pop, but it starts from nothing. It is for what has NOT happened yet: the holiday days not yet picked and the anomalies not yet found were already visible in transparency, and it looked like a defect rather than a wait. The attendance dot instead starts from .22 and rightly so: that is an empty seat, and it is there even before it fills up. */ @keyframes tb-appear { 0% { opacity: 0; transform: scale(.72); } 55% { transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } } @keyframes tb-tap { from { opacity: .8; transform: scale(.5); } to { opacity: 0; transform: scale(2.1); } } @keyframes tb-trace { from { opacity: 1; stroke-dashoffset: 620; } to { opacity: 1; stroke-dashoffset: 0; } } @keyframes tb-trace-ind { from { opacity: 1; stroke-dashoffset: -620; } to { opacity: 1; stroke-dashoffset: 0; } } @keyframes tb-vanish { from { opacity: 1; } to { opacity: 0; } } @keyframes tb-draw { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } } /* The packet follows the arc by hand instead of with offset-path: five points taken on the same cubic as the thread. offset-path on SVG elements is still patchy, a translate isn't. */ @keyframes tb-travel { 0% { opacity: 1; transform: translate(1275px, 240px); } 25% { transform: translate(1229px, 169px); } 50% { transform: translate(1157px, 143px); } 75% { transform: translate(1058px, 152px); } 100% { opacity: 1; transform: translate(930px, 185px); } } @keyframes tb-travel-ind { 0% { opacity: 1; transform: translate(930px, 185px); } 25% { transform: translate(1058px, 152px); } 50% { transform: translate(1157px, 143px); } 75% { transform: translate(1229px, 169px); } 100% { opacity: 1; transform: translate(1275px, 240px); } } /* --- the thread, the same in every act except the direction of the fourth --- */ html.js.mo-clock .tb.is-run .tb__thread-l { animation: tb-trace .62s var(--mo-ease, ease) both, tb-vanish .3s linear 1.5s both; } html.js.mo-clock .tb.is-run .tb__thread-p { animation: tb-travel .62s var(--mo-ease, ease) .06s both, tb-vanish .25s linear 1.1s both; } html.js.mo-clock .tb.is-run .tb__thread-l--ind { animation: tb-trace-ind .62s var(--mo-ease, ease) both, tb-vanish .3s linear 1.5s both; } html.js.mo-clock .tb.is-run .tb__thread-p--ind { animation: tb-travel-ind .62s var(--mo-ease, ease) .06s both, tb-vanish .25s linear 1.1s both; } html.js.mo-clock .tb.is-run .tb__at--1 .tb__thread-l, html.js.mo-clock .tb.is-run .tb__at--1 .tb__thread-p { animation-delay: 4.3s, 5.4s; } html.js.mo-clock .tb.is-run .tb__at--2 .tb__thread-l, html.js.mo-clock .tb.is-run .tb__at--2 .tb__thread-p { animation-delay: 4.6s, 5.7s; } html.js.mo-clock .tb.is-run .tb__at--3 .tb__thread-l, html.js.mo-clock .tb.is-run .tb__at--3 .tb__thread-p { animation-delay: 4.0s, 5.1s; } html.js.mo-clock .tb.is-run .tb__at--4 .tb__thread-l, html.js.mo-clock .tb.is-run .tb__at--4 .tb__thread-p { animation-delay: 1.8s, 2.9s; } html.js.mo-clock .tb.is-run .tb__at--5 .tb__thread-l, html.js.mo-clock .tb.is-run .tb__at--5 .tb__thread-p { animation-delay: 4.0s, 5.1s; } html.js.mo-clock .tb.is-run .tb__at--6 .tb__thread-l, html.js.mo-clock .tb.is-run .tb__at--6 .tb__thread-p { animation-delay: 3.4s, 4.5s; } /* --- act 1 · clock-in ------------------------------------------------------ */ @keyframes tb-walk { 0% { transform: translate(26px, 330px); } 35% { transform: translate(58px, 286px); } 65% { transform: translate(78px, 236px); } 100%{ transform: translate(112px, 196px); } } @keyframes tb-light-up { from { opacity: .42; } to { opacity: 1; } } html.js.mo-clock .tb.is-run .tb__me { animation: tb-walk 1.9s var(--mo-ease, ease) .2s both; } html.js.mo-clock .tb.is-run .tb__zone { animation: tb-light-up .5s ease 1.9s both; } html.js.mo-clock .tb.is-run .tb__wave { animation: tb-wave .9s ease-out 2s both; } html.js.mo-clock .tb.is-run .tb__pill { animation: tb-enter .4s var(--mo-ease-enter, ease) 2.5s both, tb-beat .3s ease 3.3s, tb-exit .3s ease 3.8s both; } html.js.mo-clock .tb.is-run .tb__tap { animation: tb-tap .7s ease-out 3.35s both; } html.js.mo-clock .tb.is-run .tb__done { animation: tb-enter .45s var(--mo-ease-enter, ease) 3.85s both; } html.js.mo-clock .tb.is-run .tb__time { animation: tb-rise .45s var(--mo-ease-enter, ease) 4.05s both; } html.js.mo-clock .tb.is-run .tbm1__wave { animation: tb-wave .9s ease-out 5.05s both; } html.js.mo-clock .tb.is-run .tbm1__new { animation: tb-enter .45s var(--mo-ease-enter, ease) 5.2s both; } html.js.mo-clock .tb.is-run .tbm1__p5 { animation: tb-pop .5s var(--mo-ease-enter, ease) 5.1s both; } html.js.mo-clock .tb.is-run .tbm1__row { animation: tb-rise .5s var(--mo-ease-enter, ease) 5.35s both; } html.js.mo-clock .tb.is-run .tbm1__bar { animation: tb-fill 1s var(--mo-ease, ease) 5.9s both; } /* --- act 2 · the expense --------------------------------------------------- */ @keyframes tb-snap { 0% { opacity: 0; } 22% { opacity: .95; } 100% { opacity: 0; } } @keyframes tb-shine { 0% { opacity: 0; transform: scale(.4) rotate(-25deg); } 45% { opacity: 1; transform: scale(1.15) rotate(0); } 100% { opacity: 0; transform: scale(.9) rotate(20deg); } } html.js.mo-clock .tb.is-run .tb2__reticle { animation: tb-vanish .35s ease 1.5s both; } html.js.mo-clock .tb.is-run .tb2__flash { animation: tb-snap .5s ease-out 1.2s both; } html.js.mo-clock .tb.is-run .tb2__outcome { animation: tb-rise .5s var(--mo-ease-enter, ease) 1.6s both; } html.js.mo-clock .tb.is-run .tb2__spark { animation: tb-shine 1.1s ease 1.9s both; } html.js.mo-clock .tb.is-run .tb2__value { animation: tb-fill .45s var(--mo-ease, ease) both; } html.js.mo-clock .tb.is-run .tb2__field--a .tb2__value { animation-delay: 2.1s; } html.js.mo-clock .tb.is-run .tb2__field--b .tb2__value { animation-delay: 2.45s; } html.js.mo-clock .tb.is-run .tb2__field--c .tb2__value { animation-delay: 2.8s; } html.js.mo-clock .tb.is-run .tb2__euro { animation: tb-rise .45s var(--mo-ease-enter, ease) 3.2s both; } html.js.mo-clock .tb.is-run .tb2__pill { animation: tb-enter .4s var(--mo-ease-enter, ease) 3.6s both, tb-beat .3s ease 4.2s, tb-exit .3s ease 4.5s both; } html.js.mo-clock .tb.is-run .tb2__done { animation: tb-enter .45s var(--mo-ease-enter, ease) 4.55s both; } html.js.mo-clock .tb.is-run .tbm2__digit { animation: tb-rise .45s var(--mo-ease-enter, ease) 5.6s both; } html.js.mo-clock .tb.is-run .tbm2__row { animation: tb-rise .5s var(--mo-ease-enter, ease) 5.7s both; } html.js.mo-clock .tb.is-run .tbm2__ok { animation: tb-beat .35s ease 6.4s both; } html.js.mo-clock .tb.is-run .tbm2__tick { stroke-dasharray: 40; animation: tb-draw .4s var(--mo-ease, ease) 6.5s both; } /* --- act 3 · holidays ------------------------------------------------------ */ html.js.mo-clock .tb.is-run .tb3__g { animation: tb-appear .4s var(--mo-ease-enter, ease) both; } html.js.mo-clock .tb.is-run .tb3__g--1 { animation-delay: .5s; } html.js.mo-clock .tb.is-run .tb3__g--2 { animation-delay: .8s; } html.js.mo-clock .tb.is-run .tb3__g--3 { animation-delay: 1.1s; } html.js.mo-clock .tb.is-run .tb3__count { animation: tb-rise .45s var(--mo-ease-enter, ease) 1.6s both; } html.js.mo-clock .tb.is-run .tb3__pill { animation: tb-enter .4s var(--mo-ease-enter, ease) 2.1s both, tb-beat .3s ease 3s, tb-exit .3s ease 3.3s both; } html.js.mo-clock .tb.is-run .tb3__tap { animation: tb-tap .7s ease-out 3.05s both; } html.js.mo-clock .tb.is-run .tb3__done { animation: tb-enter .45s var(--mo-ease-enter, ease) 3.35s both; } html.js.mo-clock .tb.is-run .tbm3__count { animation: tb-rise .45s var(--mo-ease-enter, ease) 5s both; } html.js.mo-clock .tb.is-run .tbm3__row { animation: tb-rise .5s var(--mo-ease-enter, ease) 5.1s both; } html.js.mo-clock .tb.is-run .tbm3__g { animation: tb-appear .35s var(--mo-ease-enter, ease) both; } html.js.mo-clock .tb.is-run .tbm3__g--1 { animation-delay: 5.5s; } html.js.mo-clock .tb.is-run .tbm3__g--2 { animation-delay: 5.75s; } html.js.mo-clock .tb.is-run .tbm3__g--3 { animation-delay: 6s; } html.js.mo-clock .tb.is-run .tbm3__ok { animation: tb-beat .35s ease 6.4s both; } html.js.mo-clock .tb.is-run .tbm3__tick { stroke-dasharray: 40; animation: tb-draw .4s var(--mo-ease, ease) 6.5s both; } /* --- act 4 · the payslip, going the other way ------------------------------ */ html.js.mo-clock .tb.is-run .tbm4__row { animation: tb-rise .5s var(--mo-ease-enter, ease) .4s both; } /* The button leaves when the read tick arrives: the tick lands exactly on its centre, and one on top of the other they would look like the same thing. */ html.js.mo-clock .tb.is-run .tbm4__send { animation: tb-beat .35s ease 1.4s both, tb-exit .3s ease 5.7s both; } html.js.mo-clock .tb.is-run .tb4__notice { animation: tb-rise .5s var(--mo-ease-enter, ease) 2.9s both, tb-vanish .35s ease 4.1s both; } html.js.mo-clock .tb.is-run .tb4__sheet { animation: tb-rise .55s var(--mo-ease-enter, ease) 3.7s both; } html.js.mo-clock .tb.is-run .tb4__read { animation: tb-enter .45s var(--mo-ease-enter, ease) 5s both; } html.js.mo-clock .tb.is-run .tbm4__p9 { animation: tb-pop .5s var(--mo-ease-enter, ease) 5.8s both; } html.js.mo-clock .tb.is-run .tbm4__read { animation: tb-enter .4s var(--mo-ease-enter, ease) 5.9s both; } /* Flashes of the incoming rows: one per act, on the same timing as the row. */ html.js.mo-clock .tb.is-run .tbm__flash { animation: tb-blink .9s ease both; } html.js.mo-clock .tb.is-run .tb__at--1 .tbm__flash { animation-delay: 5.4s; } html.js.mo-clock .tb.is-run .tb__at--2 .tbm__flash { animation-delay: 5.75s; } html.js.mo-clock .tb.is-run .tb__at--3 .tbm__flash { animation-delay: 5.15s; } html.js.mo-clock .tb.is-run .tb__at--4 .tbm__flash { animation-delay: .45s; } html.js.mo-clock .tb.is-run .tb__at--5 .tbm__flash { animation-delay: 5.15s; } html.js.mo-clock .tb.is-run .tb__at--6 .tbm__flash { animation-delay: 2.55s; } /* --- act 5 · the job's profitability -------------------------------------- */ .tb5__hours text { fill: var(--lp-dark); font: 800 40px/1 var(--bbx-font-sans); text-anchor: middle; letter-spacing: -.03em; } .tb5__minus rect, .tb5__plus rect { fill: #EAF0F7; } .tb5__minus path, .tb5__plus path { stroke: var(--lp-accent-press); stroke-width: 3.4; stroke-linecap: round; fill: none; } .tb5__share { fill: var(--lp-accent); transform-origin: 44px 0; } .tb5__pill { fill: var(--lp-accent); opacity: 0; transform-origin: 120px 463px; } .tb5__done { transform-origin: 120px 463px; } .tbm5__margin rect { fill: rgba(255,255,255,.16); } .tbm5__margin text { fill: #fff; } .tbm5__row { transform-origin: 546px 395px; } /* Numbers can't be counted by hand in CSS: they are two overlapping texts that swap places when the job takes in the hours from the phone. The revenue has no second one: it is the only one that doesn't move, and that is the point. */ .tbm5__n { fill: var(--lp-dark); font: 800 30px/1 var(--bbx-font-sans); letter-spacing: -.03em; } .tbm5__n--post { opacity: 0; } html.js.mo-clock .tb.is-run .tbm5__n--pre { animation: tb-vanish .35s ease 5.9s both; } html.js.mo-clock .tb.is-run .tbm5__n--post { animation: tb-rise .45s var(--mo-ease-enter, ease) 6s both; } /* The cost stops at 62% of the revenue: that is the margin the pill at the top speaks of, and two numbers that don't add up show. */ .tbm5__cost { fill: var(--lp-accent); transform-origin: 430px 0; } @keyframes tb-cost { from { transform: scaleX(0); } to { transform: scaleX(.62); } } html.js.mo-clock .tb.is-run .tb5__plus { animation: tb-beat .35s ease .7s both; } html.js.mo-clock .tb.is-run .tb5__hours { animation: tb-enter .4s var(--mo-ease-enter, ease) .95s both; } html.js.mo-clock .tb.is-run .tb5__share { animation: tb-fill .7s var(--mo-ease, ease) 1.4s both; } html.js.mo-clock .tb.is-run .tb5__pill { animation: tb-enter .4s var(--mo-ease-enter, ease) 2.2s both, tb-beat .3s ease 3s, tb-exit .3s ease 3.35s both; } html.js.mo-clock .tb.is-run .tb5__done { animation: tb-enter .45s var(--mo-ease-enter, ease) 3.4s both; } html.js.mo-clock .tb.is-run .tbm5__row { animation: tb-rise .5s var(--mo-ease-enter, ease) 5.1s both; } html.js.mo-clock .tb.is-run .tbm5__cost { animation: tb-cost 1.2s var(--mo-ease, ease) 5.6s both; } html.js.mo-clock .tb.is-run .tbm5__margin { animation: tb-rise .45s var(--mo-ease-enter, ease) 6.9s both; } /* --- act 6 · checking clock-ins with the AI -------------------------------- */ .tbm6__anomaly rect { fill: rgba(255,255,255,.16); } .tbm6__anomaly text { fill: #FFD79A; } .tbm6__reply rect { fill: rgba(47,163,107,.9); } .tbm6__reply text { fill: #fff; } .tbm6__anomaly text, .tbm6__reply text { font: 700 20px/1 var(--bbx-font-sans); text-anchor: middle; letter-spacing: -.02em; } /* The wrong cell is wrong even before, but amber before the AI passes over it reads as «already flagged»: underneath there is grey, and the amber comes with the pass. */ .tbm6__cell { fill: #FDF0D8; } html.js.mo-clock .tb.is-run .tbm6__cell { animation: tb-vanish .4s ease 1.7s both reverse; } .tbm6__seg { fill: #E8A33D; } .tbm6__row { transform-origin: 546px 463px; } .tbm6__ask rect { fill: var(--lp-accent); } .tb6__time rect { fill: var(--bbx-blue-50); } .tb6__time text { fill: var(--lp-accent-press); font: 700 26px/1 var(--bbx-font-sans); text-anchor: middle; letter-spacing: -.02em; } .tb6__pill { fill: var(--lp-accent); opacity: 0; transform-origin: 120px 463px; } .tb6__tap { fill: none; stroke: var(--lp-accent); stroke-width: 3; opacity: 0; transform-origin: 120px 463px; } .tb6__done { transform-origin: 120px 463px; } /* The pass goes down the list: it is the only way to show «it is looking» without writing «artificial intelligence» anywhere. */ @keyframes tb-pass { from { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(230px); opacity: 0; } } html.js.mo-clock .tb.is-run .tbm6__past { animation: tb-pass 1.5s ease-in-out .3s both; } html.js.mo-clock .tb.is-run .tbm6__seg { animation: tb-appear .4s var(--mo-ease-enter, ease) both; } html.js.mo-clock .tb.is-run .tbm6__seg--1 { animation-delay: 1.75s; } html.js.mo-clock .tb.is-run .tbm6__seg--2 { animation-delay: 1.9s; } html.js.mo-clock .tb.is-run .tbm6__anomaly { animation: tb-rise .45s var(--mo-ease-enter, ease) 2.1s both, tb-exit .35s ease 6.9s both; } html.js.mo-clock .tb.is-run .tbm6__row { animation: tb-rise .5s var(--mo-ease-enter, ease) 2.5s both; } html.js.mo-clock .tb.is-run .tbm6__ask { animation: tb-beat .35s ease 3s both; } html.js.mo-clock .tb.is-run .tb6__notice { animation: tb-rise .5s var(--mo-ease-enter, ease) 4.5s both; } html.js.mo-clock .tb.is-run .tb6__time { animation: tb-enter .4s var(--mo-ease-enter, ease) 5s both; } html.js.mo-clock .tb.is-run .tb6__pill { animation: tb-enter .4s var(--mo-ease-enter, ease) 5.5s both, tb-beat .3s ease 6.2s, tb-exit .3s ease 6.5s both; } html.js.mo-clock .tb.is-run .tb6__tap { animation: tb-tap .7s ease-out 6.25s both; } html.js.mo-clock .tb.is-run .tb6__done { animation: tb-enter .45s var(--mo-ease-enter, ease) 6.55s both; } html.js.mo-clock .tb.is-run .tbm6__reply { animation: tb-enter .45s var(--mo-ease-enter, ease) 7s both; } /* --- act 7 · and then there is everything else --------------------------- The sections arrive one after the other and not all together: seen appearing they are counted, seen already there they are just looked at. */ /* The tiles don't just arrive: afterwards, one at a time, they light up and grow a touch. It is the difference between «there are other sections» and «there are many»: the first is read, the second is felt. Each tile's pivot is written in the markup in viewBox coordinates: with transform-box set to fill-box it would be cleaner, but Safari only got it from 16 and the tiles would have flown away. */ .tbm7__light { fill: var(--lp-accent); opacity: 0; } .tbm7__ic { fill: #D8E7F8; } @keyframes tb-light-up-p { 0% { transform: scale(1); } 45% { transform: scale(1.055); } 100% { transform: scale(1); } } @keyframes tb-glow { 0% { opacity: 0; } 45% { opacity: .1; } 100% { opacity: 0; } } html.js.mo-clock .tb.is-run .tbm7__p .tbm7__light { animation: tb-glow 1.1s ease both; } html.js.mo-clock .tb.is-run .tbm7__p { animation: tb-enter .38s var(--mo-ease-enter, ease) both, tb-light-up-p 1.1s ease both; } .tb7__again rect { fill: var(--lp-accent); } .tb7__again text { fill: #fff; font: 700 20px/1 var(--bbx-font-sans); text-anchor: middle; letter-spacing: -.01em; } html.js.mo-clock .tb.is-run .tbm7__p { animation: tb-enter .38s var(--mo-ease-enter, ease) both; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(2) { animation-delay: 0.35s, 2.10s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(2) .tbm7__light { animation-delay: 2.10s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(3) { animation-delay: 0.47s, 2.44s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(3) .tbm7__light { animation-delay: 2.44s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(4) { animation-delay: 0.59s, 2.78s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(4) .tbm7__light { animation-delay: 2.78s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(5) { animation-delay: 0.71s, 3.12s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(5) .tbm7__light { animation-delay: 3.12s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(6) { animation-delay: 0.83s, 3.46s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(6) .tbm7__light { animation-delay: 3.46s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(7) { animation-delay: 0.95s, 3.80s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(7) .tbm7__light { animation-delay: 3.80s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(8) { animation-delay: 1.07s, 4.14s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(8) .tbm7__light { animation-delay: 4.14s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(9) { animation-delay: 1.19s, 4.48s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(9) .tbm7__light { animation-delay: 4.48s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(10) { animation-delay: 1.31s, 4.82s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(10) .tbm7__light { animation-delay: 4.82s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(11) { animation-delay: 1.43s, 5.16s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(11) .tbm7__light { animation-delay: 5.16s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(12) { animation-delay: 1.55s, 5.50s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(12) .tbm7__light { animation-delay: 5.50s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(13) { animation-delay: 1.67s, 5.84s; } html.js.mo-clock .tb.is-run .tbm7__p:nth-of-type(13) .tbm7__light { animation-delay: 5.84s; } html.js.mo-clock .tb.is-run .tb7__r { animation: tb-rise .4s var(--mo-ease-enter, ease) both; } html.js.mo-clock .tb.is-run .tb7__r:nth-of-type(2) { animation-delay: .6s; } html.js.mo-clock .tb.is-run .tb7__r:nth-of-type(3) { animation-delay: .78s; } html.js.mo-clock .tb.is-run .tb7__r:nth-of-type(4) { animation-delay: .96s; } html.js.mo-clock .tb.is-run .tb7__r:nth-of-type(5) { animation-delay: 1.14s; } html.js.mo-clock .tb.is-run .tb7__r:nth-of-type(6) { animation-delay: 1.32s; } html.js.mo-clock .tb.is-run .tb7__r:nth-of-type(7) { animation-delay: 1.5s; } html.js.mo-clock .tb.is-run .tb7__again { animation: tb-enter .45s var(--mo-ease-enter, ease) 2.1s both; } /* Whoever asked for less motion sees the first act finished, which is already a whole sentence: inside the area, clocked in, and the attendance on the desk. */ @media (prefers-reduced-motion: reduce) { html.js.mo-clock .tb *, html.js.mo-clock .tb { animation: none !important; } } /* =========================================================================== The caption: what you are looking at, said in words. =========================================================================== */ /* The caption sits below, so the stage alone would end up higher than the text beside it: the same space the caption takes below is kept above the stage, and the devices go back to the middle. --tb-caption is the sum of what is below (18 of gap + 44 of line). */ .tb { --tb-caption: 62px; padding-top: var(--tb-caption); } .tb__caption { display: flex; flex-direction: column; align-items: center; gap: 11px; margin-top: 18px; min-height: 44px; text-align: center; } .tb__caption p { max-width: 34em; font-size: 17px; font-weight: 700; line-height: 1.3; color: #fff; letter-spacing: -.01em; opacity: .5; } /* The four steps: the lit one says where we are, the others that there are more to come. They are an elongated pill, not a dot, because at this size two dots close together read as one. */ .tb__steps { display: flex; gap: 5px; } .tb__steps li { width: 6px; height: 6px; border-radius: var(--lp-radius-pill); background: rgba(255,255,255,.22); transition: width .3s var(--mo-ease, ease), background-color .3s ease; } .tb[data-act="1"] .tb__steps li:nth-child(1), .tb[data-act="2"] .tb__steps li:nth-child(2), .tb[data-act="3"] .tb__steps li:nth-child(3), .tb[data-act="4"] .tb__steps li:nth-child(4), .tb[data-act="5"] .tb__steps li:nth-child(5), .tb[data-act="6"] .tb__steps li:nth-child(6), .tb[data-act="7"] .tb__steps li:nth-child(7), .tb:not([data-act]) .tb__steps li:nth-child(1) { width: 18px; background: var(--lp-accent); } /* The caption enters by itself, like the scene it belongs to. */ /* The caption enters like the scene it belongs to, but stops at half opacity: it is a label, it must not take over the scene. */ @keyframes tb-rise-half { from { opacity: 0; transform: translateY(10px); } to { opacity: .5; transform: none; } } html.js.mo-clock .tb.is-run .tb__caption p { animation: tb-rise-half .45s var(--mo-ease-enter, ease) .1s both; } @media (max-width: 900px) { .tb__caption { max-width: 560px; margin-inline: auto; } } /* The three cards of the people working on the job arrive after the bars: first you see the count, then who it is made of. */ .tbm5__q { transform-box: view-box; } html.js.mo-clock .tb.is-run .tbm5__q { animation: tb-rise .42s var(--mo-ease-enter, ease) both; } html.js.mo-clock .tb.is-run .tbm5__q:nth-of-type(1) { animation-delay: 6.4s; } html.js.mo-clock .tb.is-run .tbm5__q:nth-of-type(2) { animation-delay: 6.55s; } html.js.mo-clock .tb.is-run .tbm5__q:nth-of-type(3) { animation-delay: 6.7s; }