/* ============================================================ landing-full.css, OPTION 7: the whole landing page. OPTION 6'S SYSTEM, EXTENDED. The hero, the type ramp and the quieter button are Option 6's, shared by gate rather than copied, so the two cannot drift. Everything here is the page that follows: a brand strip, three product chapters with a separator between each, a founder's message, the benefits, what people say, and the footer. THREE CHAPTERS, ONE RULE. Each chapter carries its own data-module, so --accent and --glow resolve to that capability's brand step the way they do in the app: orange for Investigation, purple for Data Intelligence, cyan for Build Dashboard. The chapter ground, the separator disc, the placeholder tints and the eyebrow all read from those tokens, so the three chapters are the same rules three times and not one colour is written twice. AND THE PAGE HAS NO SEAMS. Every chapter starts and ends on #141519, the ground the hero settles onto, and only its middle carries the module tint. The separators sit on that same ground, so a boundary is never a line: the colour rises out of the page and sinks back into it. #141519 is stated here the way the folds either side of it state it, because it is the page's own fall colour rather than a value this file invented. NO ANIMATION IN THIS FILE, deliberately. The structure is what is being judged first, and the product visuals are placeholders that say so. ============================================================ */ /* ---- the gate ---------------------------------------------------------- Option 7 shows the hero and this page, and nothing else. Every other option's folds stay hidden, and Option 7's page stays hidden everywhere else. */ .l7{display:none} html[data-lp-family="7"] .l7{display:block;position:relative;z-index:1} html[data-lp-family="7"] .lp-hero--2{display:flex} html[data-lp-family="7"] .lp-bg::before{display:none} /* ============================================================ THE BRAND STRIP ============================================================ Immediately under the hero, and quiet on purpose: it is a credential, not a claim. The row fades out at both ends rather than stopping at a hard edge, so it reads as more of them continuing past the frame. */ .l7-logos{position:relative;background:#141519; padding-block:clamp(44px,6vh,76px)} .l7-logos__k{display:block;text-align:center} .l7-logos__row{margin-top:clamp(24px,3vh,38px); display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(18px,2.6vh,30px) clamp(24px,2.8vw,46px)} .l7-logo{display:inline-flex;align-items:center;gap:12px; color:rgba(255,255,255,.78); transition:color .25s var(--ease)} .l7-logo:hover{color:#fff} .l7-logo__m{width:30px;height:30px;flex:none} /* a wordmark, not a caption: 600 and tracked in, the way a logotype is set */ .l7-logo__n{font-size:18px;font-weight:600;letter-spacing:-.018em;white-space:nowrap} /* THEY FLOAT, AND NO TWO OF THEM AGREE. One slow rise and fall, and every mark gets its own period and its own phase, so the row drifts rather than pulsing in step. The move is nine pixels over seven seconds: enough to be alive at a glance, too little to be a thing you watch. Nothing else in the row moves, which is what keeps it calm. */ @keyframes l7Float{ 0%,100%{transform:translate3d(0,0,0)} 50% {transform:translate3d(0,-9px,0)} } .l7-logo{will-change:transform;animation:l7Float 7s ease-in-out infinite} .l7-logo:nth-child(1){animation-duration:7.4s;animation-delay:-.2s} .l7-logo:nth-child(2){animation-duration:6.2s;animation-delay:-2.6s} .l7-logo:nth-child(3){animation-duration:8.1s;animation-delay:-1.1s} .l7-logo:nth-child(4){animation-duration:6.8s;animation-delay:-3.9s} .l7-logo:nth-child(5){animation-duration:7.9s;animation-delay:-.7s} .l7-logo:nth-child(6){animation-duration:6.5s;animation-delay:-4.6s} /* ============================================================ THE SEPARATOR ============================================================ The same object three times, and it is what makes the page read as three chapters of one story. A hairline across the whole page, opened in the middle by a disc in the chapter's own colour with that capability's own icon in it, and the capability's name set underneath in the page's smallest voice. */ .l7-sep{position:relative;background:#141519; padding-block:clamp(52px,7vh,88px)} .l7-sep__in{display:flex;align-items:center;gap:clamp(20px,3vw,40px)} .l7-sep__rule{flex:1;height:1px; background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.13) 22%, rgba(255,255,255,.13) 78%, rgba(255,255,255,0))} /* the disc: the module's brand step, flat, with its own ambient behind it. The ring is the neutral glass pair the kit uses for every emphasis state, so the only colour in the whole separator is the brand one. */ .l7-sep__disc{flex:none;position:relative; width:clamp(60px,5vw,74px);aspect-ratio:1;border-radius:50%; display:grid;place-items:center; background:var(--accent);color:var(--on-accent); box-shadow:0 0 0 1px color-mix(in srgb, #fff 16%, transparent), 0 0 0 10px color-mix(in srgb, var(--accent) 9%, transparent), 0 18px 50px -10px color-mix(in srgb, var(--accent) 60%, transparent)} .l7-sep__disc svg{width:clamp(26px,2.1vw,31px);height:auto} /* THE FOUNDER IS NOT A CAPABILITY, so its disc is not a brand one. Same component, the neutral glass pair the kit gives every non-brand emphasis, and a quote instead of an icon. The difference between it and the three coloured discs is exactly the difference between the sections. */ .l7-sep--plain .l7-sep__disc{background:var(--glass-2);color:rgba(255,255,255,.86); box-shadow:0 0 0 1px color-mix(in srgb, #fff 14%, transparent), 0 0 0 10px color-mix(in srgb, #fff 3%, transparent), 0 18px 50px -14px rgba(0,0,0,.9)} .l7-sep--plain .l7-sep__disc::after{content:"\201C"; font-family:var(--font-sans);font-size:clamp(40px,3.4vw,50px); font-weight:500;line-height:1;margin-top:.30em} /* THE LABEL IS THE SAME IN ALL THREE SEPARATORS, and it is the page's own face rather than the mono one: Inter, a step bolder than the copy around it, and white. The disc under it already carries the chapter's colour, so the name does not need to say it twice. One rule, so Investigation, Data Intelligence and Build Dashboard cannot drift apart. */ .l7-sep__lbl{display:block;margin-top:17px;text-align:center; font-family:var(--font-sans);font-size:12.5px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:#fff} /* ---- THE LIGHT THAT ARRIVES, once, on scroll ----------------------------- The rule either side of a disc is asked to feel like a wire the moment it comes on screen: a point of light runs its length INWARD, toward the disc, and arrives just as the disc itself takes a small breath (Ameer, 26 Aug: "a little bit of light in this thin line that floats... while it's reaching, some animation is happening on the investigation icon"). A LOOP, NOT AN ENTRANCE. It used to play once, ever, the first time the separator crossed the viewport (Ameer, 27 Aug: "it should animate whenever that part is reaching the center of the canvas, in an infinity loop, and the icon inside it also"). It runs continuously now, and only while the separator is in the middle band of the viewport. TWO LIGHTS, ONE ARRIVAL. The left rule's light travels left to right and the right rule's travels right to left, and both are timed to reach the disc at the same instant, 58% of the way through the loop. Everything else on the separator is keyed off that instant: the disc takes the hit, the icon reacts to it, and the disc throws two rings out of it. IT LOOPS, AND ONLY WHILE YOU ARE LOOKING AT IT. .is-live is on while the separator sits in the middle band of the viewport (see the observer at the foot of js/landing-full.js). Off it, nothing here runs at all. */ .l7-sep{--sd:3.8s} .l7-sep__rule{position:relative;overflow:hidden} .l7-sep__rule::after{content:"";position:absolute;inset-block:0;left:-16%;width:34%; background:linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 78%, #fff) 50%, transparent); opacity:0;filter:blur(.4px)} .l7-sep.is-live .l7-sep__rule::after{ animation:l7ShineL var(--sd) cubic-bezier(.3,.1,.2,1) infinite} .l7-sep.is-live .l7-sep__rule:last-of-type::after{animation-name:l7ShineR} @keyframes l7ShineL{ 0%{left:-16%;opacity:0} 7%{opacity:.9} 50%{opacity:.75} 58%{left:82%;opacity:0} 100%{left:82%;opacity:0} } @keyframes l7ShineR{ 0%{left:82%;opacity:0} 7%{opacity:.9} 50%{opacity:.75} 58%{left:-16%;opacity:0} 100%{left:-16%;opacity:0} } /* the disc takes the hit as the two lights land on it, and settles under it */ .l7-sep.is-live .l7-sep__disc{ animation:l7SepPulse var(--sd) cubic-bezier(.3,.1,.2,1) infinite} @keyframes l7SepPulse{ 0%,52%{transform:scale(1)} 63%{transform:scale(1.085)} 76%{transform:scale(.994)} 88%,100%{transform:scale(1)} } /* AND THE ICON REACTS TO IT. Not decoration on a timer: it moves because the light arrived, a beat after the disc did, which is what reads as one thing happening rather than three things animating. */ .l7-sep__disc svg, .l7-sep--plain .l7-sep__disc::after{transform-origin:50% 50%} .l7-sep.is-live .l7-sep__disc svg, .l7-sep.is-live.l7-sep--plain .l7-sep__disc::after{ animation:l7SepIcon var(--sd) cubic-bezier(.3,.1,.2,1) infinite} @keyframes l7SepIcon{ 0%,54%{transform:rotate(0) scale(1)} 65%{transform:rotate(-6deg) scale(1.12)} 78%{transform:rotate(3.5deg) scale(.99)} 90%,100%{transform:rotate(0) scale(1)} } /* two rings leave the disc when it is hit, the second trailing the first. The same mark the Data Intelligence core throws, at a tenth of the size. */ .l7-sep__ring{position:absolute;inset:0;border-radius:50%;pointer-events:none; border:1px solid var(--accent);opacity:0} .l7-sep--plain .l7-sep__ring{border-color:rgba(255,255,255,.55)} .l7-sep.is-live .l7-sep__ring{ animation:l7SepRing var(--sd) cubic-bezier(.22,.6,.3,1) infinite} .l7-sep.is-live .l7-sep__ring:nth-child(2){animation-delay:calc(var(--sd) * .11)} @keyframes l7SepRing{ 0%,58%{opacity:0;transform:scale(1)} 63%{opacity:.5;transform:scale(1.05)} 100%{opacity:0;transform:scale(2.35)} } @media (prefers-reduced-motion:reduce){ .l7-sep__disc,.l7-sep__ring,.l7-sep__disc svg{animation:none} .l7-sep__rule::after,.l7-sep__ring{display:none} } /* ============================================================ A CHAPTER ============================================================ One ground rule, three colours, no seams: it opens and closes on the page's own fall colour and only its middle carries the module. */ .l7-chapter{position:relative; padding-block:clamp(56px,8vh,110px); background: radial-gradient(ellipse 66% 40% at 16% 26%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 66%), radial-gradient(ellipse 54% 34% at 92% 74%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 66%), linear-gradient(180deg, #141519 0%, #141519 5%, color-mix(in srgb, var(--accent) 10%, #141519) 38%, color-mix(in srgb, var(--accent) 11%, #141519) 66%, #141519 95%, #141519 100%)} /* ---- the chapter's own head ---- */ .l7-head{max-width:940px;margin-inline:auto;text-align:center; padding-bottom:clamp(40px,5.5vh,72px)} .l7-head--tight{padding-bottom:clamp(30px,4vh,52px)} /* THE SAME RAMP AS OPTION 6, one step down from the page's H1: 500 weight, eased tracking, 1.06 leading, and the emphasis at 600 in the module's own accent. It is the only weight change in the whole page. */ /* THE STAGE CAPTION IS NOT PART OF THIS PAGE. On Options 2 and 6 the animated background IS the fold, and the mono caption under the buttons ("Raw data", "Entities", "Semantic model") is what makes that motion legible as a sequence rather than as texture. The family-7 page does not lead with the background, so the caption is naming something the visitor is not being asked to watch, and it reads as a stray line of code under the call to action (Ameer, 27 Aug: "that is called raw data, entities, semantic models etc... you need to remove that"). Options 2 and 6 keep it. */ html[data-lp-family="7"] .lp-stagerail{display:none} .l7-h{font-size:clamp(31px,3.3vw,50px);line-height:1.06;font-weight:500; letter-spacing:-.028em;color:#fff;text-wrap:balance} .l7-h em{font-style:normal;font-weight:600;color:var(--accent)} .l7-sub{margin-top:18px;font-size:clamp(15px,1.15vw,17.5px);line-height:1.62; font-weight:400;color:rgba(255,255,255,.7);max-width:60ch; margin-inline:auto;text-wrap:pretty} .l7-head__cta{margin-top:clamp(24px,3vh,34px)} /* ---- the smaller voices in the ramp ---- */ /* ONE LABEL TREATMENT ON THE WHOLE PAGE. The eyebrow over a feature row, the kicker over the brand strip and the name under a separator disc are the same job, so they are the same type: Inter, 600, uppercase, tracked. They are told apart by size and ink, not by a second typeface. The mono face is kept for what it is for, which is figures and identifiers. AND AN EYEBROW IS NOT AN EMPHASIS. It labels the block it sits over, which is a utility job, so it takes the page's quiet ink and not the module's brand step. The colour rule gives the accent to the one thing being emphasised; on a feature row that is the heading, and the heading is white. */ .l7-eyebrow,.l7-logos__k{ font-family:var(--font-sans);font-size:12px;font-weight:600; letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)} .l7-logos__k{color:rgba(255,255,255,.44)} .l7-eyebrow{display:inline-flex;align-items:center;gap:9px} .l7-eyebrow svg{width:15px;height:15px;color:rgba(255,255,255,.38)} /* a feature heading is the one place on the page that sits a step above the section ramp: still Inter, still the same scale, but at 600 so it holds its own column against the visual beside it */ .l7-h3{font-size:clamp(23px,1.9vw,30px);line-height:1.16;font-weight:600; letter-spacing:-.022em;color:#fff;text-wrap:balance} .l7-h4{font-size:16.5px;line-height:1.3;font-weight:600;letter-spacing:-.012em;color:#fff} .l7-p{font-size:clamp(14.5px,1.05vw,16px);line-height:1.62;font-weight:400; color:rgba(255,255,255,.68);max-width:48ch} .l7-p--s{font-size:14px;line-height:1.56;color:rgba(255,255,255,.6)} /* ---- a feature row: the visual and the copy beside it ---- */ .l7-row{display:grid;align-items:center; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); column-gap:clamp(36px,5vw,84px); padding-block:clamp(34px,5vh,64px)} .l7-row__copy{display:flex;flex-direction:column;align-items:flex-start; gap:clamp(12px,1.5vh,18px)} /* VISUAL LEFT, VISUAL RIGHT, VISUAL LEFT. The eye crosses the page as it scrolls rather than running down one edge of it, which is most of what stops three rows of the same composition reading as three of the same thing. */ .l7-row.is-flip .l7-row__shot{order:2} .l7-row.is-flip .l7-row__copy{order:1} .l7-list{display:flex;flex-direction:column;gap:11px;margin-top:4px} .l7-list li{display:flex;align-items:flex-start;gap:11px; font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.74)} /* neutral, never the accent: the standing rule is that a utility glyph takes the icon ink and brand is kept for the thing being emphasised */ .l7-list svg{flex:none;width:17px;height:17px;margin-top:2px;color:var(--icon)} .l7-stats{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px);margin-top:8px} .l7-stat{display:flex;flex-direction:column;gap:3px} .l7-stat__v{font-size:clamp(24px,2vw,30px);line-height:1;font-weight:600; letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums} .l7-stat__k{font-size:12.5px;color:rgba(255,255,255,.5)} /* ============================================================ THE PLACEHOLDER ============================================================ It has the shape of a product screen, the module's colour and just enough interior to read as an interface. It is NOT a drawing of a screen that has not been designed: the tag on it says what will go there, and the inside is deliberately abstract. */ .l7-shot{position:relative;overflow:hidden;border-radius:18px; aspect-ratio:16/10.4; background:linear-gradient(155deg, color-mix(in srgb, #fff 6%, transparent) 0%, color-mix(in srgb, var(--accent) 13%, transparent) 100%), #16171b; border:1px solid color-mix(in srgb, #fff 11%, transparent); box-shadow:0 30px 70px -34px rgba(0,0,0,.95), inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent)} .l7-shot--hero{aspect-ratio:16/7.6} .l7-shot__bar{display:flex;align-items:center;gap:6px; height:34px;padding-inline:14px;flex:none; border-bottom:1px solid color-mix(in srgb, #fff 7%, transparent)} .l7-shot__bar i{width:7px;height:7px;border-radius:50%; background:color-mix(in srgb, #fff 16%, transparent)} .l7-shot__pill{margin-inline-start:12px;height:10px;flex:1;max-width:190px; border-radius:5px;background:color-mix(in srgb, #fff 7%, transparent)} /* the tag sits over the bottom-left corner, so the interior keeps a floor clear for it: a placeholder whose own furniture collides with its own label is the one thing a placeholder must not do */ .l7-shot__in{position:absolute;inset:34px 0 0 0;display:flex; padding:clamp(14px,1.5vw,22px); padding-bottom:clamp(54px,4.6vw,66px); gap:clamp(14px,1.5vw,22px)} .l7-shot__rail{flex:none;width:clamp(56px,7%,88px); display:flex;flex-direction:column;gap:9px} .l7-shot__rail span{height:9px;border-radius:4px; background:color-mix(in srgb, #fff 8%, transparent)} .l7-shot__rail span:first-child{background:color-mix(in srgb, var(--accent) 34%, transparent)} .l7-shot__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:11px} .l7-shot__b{height:11px;border-radius:5px; background:color-mix(in srgb, #fff 9%, transparent)} .l7-shot__b--w{width:58%;background:color-mix(in srgb, #fff 20%, transparent)} .l7-shot__b--s{width:36%} .l7-shot__grid{flex:1;min-height:0;display:grid; grid-template-columns:1fr 1fr;gap:11px;margin-block:2px} .l7-shot__grid span{border-radius:12px; background:color-mix(in srgb, #fff 5%, transparent); border:1px solid color-mix(in srgb, #fff 7%, transparent)} /* the composer, on the row about asking: a field and the one control that is an action, which is the only place the accent appears inside a placeholder */ .l7-shot__field{display:flex;align-items:center;gap:10px;height:38px; padding:0 8px 0 14px;border-radius:var(--r-full); background:color-mix(in srgb, #fff 5%, transparent); border:1px solid color-mix(in srgb, #fff 9%, transparent)} .l7-shot__field i{flex:1;height:9px;border-radius:5px; background:color-mix(in srgb, #fff 12%, transparent)} .l7-shot__field b{flex:none;width:22px;height:22px;border-radius:50%; background:color-mix(in srgb, var(--accent) 78%, transparent)} /* the reasoning steps, on the row about showing its working */ .l7-shot__steps{flex:1;min-height:0;display:flex;flex-direction:column; justify-content:center;gap:13px} .l7-shot__steps span{display:flex;align-items:center;gap:11px} .l7-shot__steps i{flex:none;width:11px;height:11px;border-radius:50%; border:1.5px solid color-mix(in srgb, #fff 18%, transparent)} .l7-shot__steps span:first-child i{border-color:transparent; background:color-mix(in srgb, var(--accent) 62%, transparent)} .l7-shot__steps b{flex:1;height:9px;border-radius:5px; background:color-mix(in srgb, #fff 9%, transparent)} .l7-shot__steps span:nth-child(2) b{max-width:78%} .l7-shot__steps span:nth-child(3) b{max-width:62%} .l7-shot__steps span:nth-child(4) b{max-width:70%} /* the chips under a finished answer, on the row about what comes back */ .l7-shot__chips{display:flex;gap:8px} .l7-shot__chips i{height:20px;border-radius:var(--r-full); background:color-mix(in srgb, #fff 7%, transparent); border:1px solid color-mix(in srgb, #fff 8%, transparent)} .l7-shot__chips i:nth-child(1){width:26%} .l7-shot__chips i:nth-child(2){width:34%} .l7-shot__chips i:nth-child(3){width:20%} /* the tag is the honest part: it names what this box is standing in for */ .l7-shot__tag{position:absolute;inset-inline-start:14px;bottom:14px; display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 28px); padding:7px 12px;border-radius:var(--r-full); background:color-mix(in srgb, #101116 78%, transparent); border:1px solid color-mix(in srgb, #fff 10%, transparent); font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em; color:rgba(255,255,255,.62)} .l7-shot__tag svg{flex:none;color:rgba(255,255,255,.42)} /* ============================================================ THE ASKING ============================================================ Two things and nothing else: a question is asked, and an answer arrives. No schema, no entity cards, no semantic layer. THE CONTAINER IS KEPT, AND IT IS GLASS. It was asked to be made extremely light, not taken away: no drop shadow, no border you could point at, a fill that is almost nothing, and a backdrop blur so the panel takes its colour from the section it floats in. It is a pane, not a dashboard card. NOT ONE DROP SHADOW IN HERE. These are real glass surfaces: a translucent fill, a light caught along the top edge, and a backdrop blur, so each one takes its colour from what is behind it rather than sitting on top of it. Depth is Z and focus, never a pool of black underneath. THE COMPOSER IS THE SHAPE OF SPARK'S COMPOSER and the rule its send follows, built as glass rather than reused as product chrome: what this frame has to feel is weightless, and the real component carries a fill, a border and a control row that are the opposite of that. Everything is in cqw off the frame, so the scene is one composition at every width. js/landing-ask.js owns every move; the only CSS motion is the caret and the send's ring, which are controls answering a state. */ .aq{--aq-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E"); --aq-tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); container-type:inline-size; position:relative;overflow:hidden; aspect-ratio:16/10.6;border-radius:3.4cqw; /* the pane. A fill of almost nothing, one light along the top edge, and a hairline thin enough to read as a refraction rather than as a border. NO DROP SHADOW: this floats, it does not sit on anything. */ background:linear-gradient(158deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.015) 68%); -webkit-backdrop-filter:blur(22px) saturate(1.15); backdrop-filter:blur(22px) saturate(1.15); box-shadow:inset 0 1px 0 rgba(255,255,255,.15), inset 0 0 0 1px rgba(255,255,255,.045)} /* the one thing in the frame that is not a surface, and what gives the glass something to catch. Moved beat to beat by the script. */ .aq-key{position:absolute;z-index:0;pointer-events:none;opacity:0; left:50%;top:0;width:150%;aspect-ratio:1;margin-top:-75%; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 26%, transparent) 0%, color-mix(in srgb, var(--accent) 9%, transparent) 42%, transparent 70%)} /* THE WORLD, AND THE CAMERA THAT LOOKS INTO IT. .aq-vp carries the perspective, .aq-world carries the camera, and every object carries its own place in world coordinates. That is what lets the three blocks and the pill PART against each other as the camera moves, instead of sliding together. */ .aq-vp{position:absolute;inset:0;z-index:1; perspective:150cqw;perspective-origin:50% 50%} .aq-world{position:absolute;inset:0;transform-style:preserve-3d; transform-origin:50% 50%} /* transform-origin:0 0 with left/top at the centre puts each object's own coordinate system at the world origin, so the transform js writes reads as "put this at (x,y,z), turn it, then centre it on that point" */ .aq-o{position:absolute;left:50%;top:50%;transform-origin:0 0; visibility:hidden;will-change:transform,opacity;backface-visibility:hidden} .aq-i{display:block} /* ---- the answer: three blocks of glass ---------------------------------- */ .aq-o--kpi .aq-i{width:26.5cqw} .aq-kpi{display:flex;flex-direction:column;gap:1.1cqw; padding:3.4cqw 3cqw 3cqw;border-radius:2.6cqw} .aq-kpi__k{font-size:1.85cqw;line-height:1.2;font-weight:500; color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .aq-kpi__v{font-size:5.2cqw;line-height:1.02;font-weight:600;letter-spacing:-.028em; color:#fff;font-variant-numeric:tabular-nums} /* one stroke under the figure as it settles: the answer landing, said once */ .aq-kpi__rule{height:.42cqw;border-radius:.21cqw;margin-top:.4cqw;width:42%; background:var(--accent);transform:scaleX(0);transform-origin:left center} [dir="rtl"] .aq-kpi__rule{transform-origin:right center} /* ONE GLASS SURFACE, used by every object in all three scenes. A fill that is mostly light, an edge that catches it, a backdrop blur so it takes its colour from what is behind it, and no drop shadow anywhere. Changing this changes all three films at once, which is the point of having it. */ .aq-glass{position:relative;overflow:hidden; background:linear-gradient(158deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.035) 62%); -webkit-backdrop-filter:blur(18px) saturate(1.25); backdrop-filter:blur(18px) saturate(1.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px rgba(255,255,255,.055)} /* THE SPECULAR. One light runs across each pane of glass as it arrives, once. Glass that never catches the light is just a translucent rectangle, and this is the cheapest honest way to say the surface has a face. --sw is written by the script on the same clock as everything else. */ .aq-sweep{position:absolute;inset:-40% -60%;pointer-events:none; background:linear-gradient(102deg, transparent 34%, rgba(255,255,255,.16) 47%, rgba(255,255,255,.30) 50%, rgba(255,255,255,.16) 53%, transparent 66%); transform:translateX(calc((var(--sw,0) * 200% - 100%))); opacity:calc(1 - abs(var(--sw,0) * 2 - 1) * .35)} /* the question, set as characters so it can come apart on send, and grouped into words so a wrapped line still breaks where a sentence breaks */ .aq-ch{display:inline-block;white-space:pre;opacity:0; will-change:transform,opacity,filter} .aq-w{white-space:nowrap} /* ---- the bridge: one small step, not a scene of its own ------------------ Two entities the schema actually has, and the line the moment they are found to be joined. Deliberately not full glass cards: a plain, quiet fill is what keeps this from reading as a fourth reading rather than the beat that earns the three that follow it. */ .aq-o--bridge .aq-i{width:50cqw} .aq-bridge{display:flex;align-items:center;gap:1.8cqw} .aq-ent{display:inline-flex;align-items:center;gap:.9cqw;flex:none; padding:1.15cqw 1.9cqw;border-radius:99cqw; background:rgba(255,255,255,.08); font-size:1.62cqw;font-weight:500;letter-spacing:-.006em; color:rgba(255,255,255,.82);white-space:nowrap} .aq-ent__ic{display:flex;color:var(--accent-bright)} .aq-ent__ic svg{width:2.5cqw;height:2.5cqw} .aq-ent-line{position:relative;flex:1;height:.3cqw;min-width:5cqw; border-radius:99cqw;background:rgba(255,255,255,.13);overflow:hidden} .aq-ent-line i{position:absolute;inset:0;background:var(--accent); transform-origin:left center;transform:scaleX(0)} [dir="rtl"] .aq-ent-line i{transform-origin:right center} /* ---- the asking: one pill of glass -------------------------------------- */ .aq-o--comp .aq-i{width:84cqw} .aq-comp{display:flex;align-items:center;gap:2cqw; height:10cqw;padding:0 1.3cqw 0 3.6cqw;border-radius:99cqw; transition:box-shadow .45s var(--ease)} .aq-comp.is-armed{box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 1px rgba(255,255,255,.11)} .aq-field{flex:1;min-width:0;display:flex;align-items:center; will-change:transform,opacity,filter} .aq-q{font-size:2.5cqw;line-height:1.3;font-weight:450;letter-spacing:-.006em; color:rgba(255,255,255,.94);white-space:nowrap;overflow:hidden} .aq-caret{flex:none;width:.26cqw;height:3cqw;border-radius:.13cqw; margin-inline-start:.6cqw;background:var(--accent-bright,var(--accent)); opacity:0;transition:opacity .1s linear; animation:aqBlink 1.05s steps(1,end) infinite} @keyframes aqBlink{0%,49%{visibility:visible}50%,100%{visibility:hidden}} /* NEUTRAL UNTIL THERE IS SOMETHING TO SEND, which is the one rule this borrows from the real composer, and the reason the moment it lights is worth seeing */ .aq-send{position:relative;flex:none;width:7.4cqw;aspect-ratio:1;border-radius:50%; background:rgba(255,255,255,.10); transition:background .34s var(--ease),transform .22s var(--ease)} .aq-send::before{content:"";position:absolute;inset:0;margin:auto; width:38%;height:38%; -webkit-mask:var(--aq-arrow) center/contain no-repeat; mask:var(--aq-arrow) center/contain no-repeat; background:rgba(255,255,255,.55);transition:background .34s var(--ease)} .aq-comp.is-armed .aq-send,.aq-comp.is-firing .aq-send{background:var(--accent)} .aq-comp.is-armed .aq-send::before, .aq-comp.is-firing .aq-send::before{background:var(--on-accent)} .aq-comp.is-firing .aq-send{transform:scale(.9)} /* one ring, once, on the frame the question goes */ .aq-send::after{content:"";position:absolute;inset:-1px;border-radius:50%; border:.2cqw solid var(--accent);opacity:0;pointer-events:none} .aq-comp.is-firing .aq-send::after{animation:aqRing .68s var(--ease) forwards} @keyframes aqRing{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}} /* ---- SCENE 2: the working ---------------------------------------------- Three rows, one above the next. The ring is the whole state of a step: empty while it waits, turning while it is the one being worked on, filled with a tick once it is done. Nothing else in the row changes. */ .aq-o--step .aq-i{width:63cqw} .aq-step{display:flex;align-items:center;gap:2.6cqw; padding:2.7cqw 3.2cqw;border-radius:2.4cqw} .aq-step__ring{flex:none;position:relative;width:4.4cqw;aspect-ratio:1;border-radius:50%; border:.36cqw solid rgba(255,255,255,.20); transition:border-color .4s var(--ease),background .4s var(--ease)} .aq-step.is-doing .aq-step__ring{border-top-color:var(--accent); animation:aqSpin .9s linear infinite} @keyframes aqSpin{to{transform:rotate(360deg)}} .aq-step.is-done .aq-step__ring{background:var(--accent);border-color:var(--accent); animation:none} .aq-step__ring::after{content:"";position:absolute;inset:0;margin:auto; width:52%;height:52%;opacity:0;transition:opacity .3s var(--ease); -webkit-mask:var(--aq-tick) center/contain no-repeat; mask:var(--aq-tick) center/contain no-repeat; background:var(--on-accent)} .aq-step.is-done .aq-step__ring::after{opacity:1} .aq-step__t{font-size:2.2cqw;line-height:1.3;font-weight:450; color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---- and what the answer is built out of -------------------------------- THE JOIN, BETWEEN THE WORKING AND THE ANSWER. One pane, at the width of the rows it replaces so it lands in the same column they left, holding the two tables those rows just read and the key that relates them. .aq-ent AND .aq-ent-line ARE SCENE 1'S BRIDGE. Reused, not reinvented: the two boxes have to draw a relationship the same way or they are two ideas instead of one. The line is empty until the script draws it, which is the moment the relationship is found. */ .aq-o--schema .aq-i{width:63cqw} .aq-schema{display:flex;flex-direction:column;gap:2.2cqw; padding:3cqw 3.2cqw;border-radius:2.4cqw} .aq-schema__row{display:flex;align-items:center;gap:1.8cqw} /* the key it joins on, and the identifier in it set in mono for the reason .aq-rec__v is: the page sets identifiers in mono everywhere else */ .aq-schema__k{font-size:1.85cqw;line-height:1.2;font-weight:500; color:rgba(255,255,255,.55);white-space:nowrap} .aq-schema__k u{text-decoration:none;font-family:var(--font-mono); font-size:1.75cqw;letter-spacing:-.01em;color:rgba(255,255,255,.82)} /* the answer that comes forward after them */ .aq-o--out .aq-i{width:46cqw} .aq-out{display:flex;flex-direction:column;gap:1cqw; padding:3.4cqw 3.4cqw 3cqw;border-radius:2.6cqw} .aq-out__k{font-size:1.85cqw;font-weight:500;color:rgba(255,255,255,.6)} .aq-out__v{font-size:6.4cqw;line-height:1;font-weight:600;letter-spacing:-.03em; color:#fff;font-variant-numeric:tabular-nums} /* ---- SCENE 5: the reasoning, written down and kept ---------------------- ONE CARD THAT FILLS, so everything here is inside a single glass object rather than spread across three of them the way Scene 2's steps are. The difference between the two boxes is the difference between watching it think and reading what it wrote, and the objects have to say that before a word is read. Sized in cqw like every other scene, so it is one composition at any width. */ .aq-o--rec .aq-i{width:80cqw} .aq-rec{display:flex;flex-direction:column;gap:2.6cqw; padding:4cqw 4.2cqw 4.2cqw;border-radius:2.8cqw; transition:box-shadow .5s var(--ease)} /* sealed: the edge takes the accent, once, and holds it */ .aq-rec.is-sealed{box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 0 0 1px color-mix(in srgb, var(--accent) 34%, transparent)} .aq-rec__hd{display:flex;align-items:center;gap:1.2cqw; padding-bottom:2.2cqw;border-bottom:1px solid rgba(255,255,255,.08); font-size:1.7cqw;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--accent)} .aq-rec__hd svg{width:2.2cqw;height:2.2cqw} /* the count is the card filling, said as a number */ .aq-rec__n{margin-inline-start:auto;font-style:normal;font-weight:500; letter-spacing:0;text-transform:none;font-size:1.8cqw; color:rgba(255,255,255,.42);font-variant-numeric:tabular-nums} .aq-rec__row{display:flex;align-items:baseline;gap:1.6cqw;opacity:0; will-change:transform,opacity} /* the tick draws itself as the line lands: a mark being made, not a mark that was already on the page */ .aq-rec__tick{flex:none;display:grid;place-items:center; width:2.8cqw;height:2.8cqw;border-radius:50%;align-self:center; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); transform:scale(.5);opacity:0; transition:transform .38s cubic-bezier(.34,1.4,.5,1),opacity .3s var(--ease)} .aq-rec__tick svg{width:1.7cqw;height:1.7cqw} .aq-rec__row.is-in .aq-rec__tick{transform:none;opacity:1} .aq-rec__k{flex:none;font-size:2.15cqw;font-weight:500;letter-spacing:-.004em; color:rgba(255,255,255,.62)} /* WHAT THE LINE IS ABOUT, in mono, because every one of them is an identifier or a rule and the page sets those in mono everywhere else */ .aq-rec__v{min-width:0;text-decoration:none; font-family:var(--font-mono);font-size:2cqw;letter-spacing:-.01em; color:rgba(255,255,255,.92);opacity:0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; will-change:transform,opacity} /* ---- SCENE 3: the insight ---------------------------------------------- The grid is raw and cold on purpose: no accent in it anywhere, so that when the one reading comes forward it is the only thing in the frame with any colour on it. */ .aq-o--grid .aq-i{width:59cqw} .aq-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1.2cqw} .aq-cell{height:2.8cqw;border-radius:.6cqw; background:rgba(255,255,255,.115);will-change:transform,opacity} .aq-cell:nth-child(6n+1){background:rgba(255,255,255,.19)} .aq-o--ins .aq-i{width:53cqw} .aq-ins{display:flex;flex-direction:column;gap:.8cqw; padding:3.6cqw 3.6cqw 3.2cqw;border-radius:2.8cqw} .aq-ins__v{font-size:7.4cqw;line-height:1;font-weight:600;letter-spacing:-.032em; color:#fff;font-variant-numeric:tabular-nums} .aq-ins__t{font-size:2.2cqw;line-height:1.3;font-weight:450;color:rgba(255,255,255,.86)} .aq-ins__bar{height:.5cqw;border-radius:.25cqw;margin-top:1.4cqw; background:rgba(255,255,255,.10);overflow:hidden} .aq-ins__bar i{display:block;height:100%;border-radius:.25cqw; background:var(--accent);transform:scaleX(0);transform-origin:left center} [dir="rtl"] .aq-ins__bar i{transform-origin:right center} .aq-ins__s{font-size:1.8cqw;color:rgba(255,255,255,.5);margin-top:.4cqw} /* ---- 4. BUILD DASHBOARD: the builder's two halves ------------------------ THE PRODUCT'S SHAPE AND THE PRODUCT'S MATERIAL. Build Dashboard is a split screen, so this is a split screen: conversation left, canvas right, one seam between them. THE SURFACES ARE THE MODULE'S OWN, not invented here. css/molecules.css declares the Dashboard module's dark surface set (--panel, --box, and their strokes) on html[data-theme="dark"][data-module="dashboard"], a selector the app satisfies and a landing section cannot, because here the module lives on the SECTION and not on the root. So the block below re-resolves that exact set for this section, the same way css/bg-trace.css already re-resolves --bg for it: same values, one source, and the cards stop being black boxes and start being Spark cards (Ameer, 27 Aug: "the widgets currently appear black... use the appropriate Spark dashboard surface treatment"). FIXED PX, against a reference frame. js/landing-scenes.js scales the whole world by the frame's share of that reference on BOTH axes (see PX_REF), so one set of numbers holds at every size and nothing here needs a media query. NO BACKDROP FILTERS IN THIS SCENE. The other three films put glass on small objects; this one would be putting it on a full panel with three cards crossing it every frame, which is the most expensive thing a compositor can be asked for. Layered translucent fills read the same over this ground and cost nothing. */ html[data-theme="dark"] .l7-chapter[data-module="dashboard"], html[data-theme="dark"] .lp-mod[data-module="dashboard"]{ --panel:#171a1e; --panel-stroke:#242a2f; --box:#1c2126; --box-stroke:rgba(140,175,190,.16); --card:#1c2126; --card-stroke:rgba(140,175,190,.16); --pill:#232a2f; --hair:#1f252a; } /* ---- the shell: 1120 x 610, one window with two halves ------------------ THE GRID, and every number under it comes off these five: shell 1120 = conversation 368 + canvas 752 canvas padding 20 -> content 712 content 712 = card 344 + gutter 24 + card 344 so the left card's centre is the shell's centre line and the right card's right edge is the content's right edge, exactly, at every scale. */ .aq-o--shell .aq-i{width:1120px} .dbs{display:flex;height:610px;border-radius:20px;overflow:hidden; /* one material: a light along the top edge falling away down the panel, and a hairline thin enough to read as an edge rather than as a border */ background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,.016) 40%, rgba(255,255,255,.01) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.05), 0 50px 110px -60px rgba(0,0,0,.75)} /* the conversation is where the work comes FROM, so it sits a step back from the canvas rather than level with it */ .dbs__conv{position:relative;flex:none;width:368px; display:flex;flex-direction:column; background:rgba(8,12,16,.12); transition:opacity .9s var(--ease)} .dbs__canvas{position:relative;flex:1;min-width:0} /* THE SEAM FADES AT BOTH ENDS. A flat 1px line butting into two rounded corners is the single most obvious tell that a panel was drawn rather than rendered; a hairline that arrives and leaves is not. */ .dbs__seam{position:absolute;inset-block:0;inset-inline-start:0;width:1px; background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.10) 14%, rgba(255,255,255,.10) 86%, transparent 100%)} /* THE BOARD IS THE LAST THING YOU SEE. Once it is saved, the half of the picture that made it steps back rather than leaves, so the final frame is the dashboard with the question that built it still faintly behind it. */ .dbs.is-done .dbs__conv{opacity:.42} /* both pane headers are one object at one height, which is what makes the seam read as a single line through a single window */ /* EACH PANE IS INSET TO ITS OWN CONTENT EDGE, not to a shared number: the conversation's title starts exactly where its cards start, and the board's name starts exactly where its first card starts. That is what makes a header read as belonging to the thing under it. */ .dbs__hd{position:relative;flex:none;height:48px;display:flex;align-items:center; padding-inline:12px} .dbs__hd--c{padding-inline:20px} .dbs__hd::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px; background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.075) 10%, rgba(255,255,255,.075) 90%, transparent 100%)} .dbs__hdt,.dbs__name{font-size:13.5px;font-weight:600;letter-spacing:-.008em; color:rgba(255,255,255,.92)} .dbs__hd--c{justify-content:space-between;gap:14px} .dbs__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dbs__tools{display:flex;align-items:center;gap:10px;flex:none} /* WHERE THE NUMBERS COME FROM, named once, with the product's own connected mark. This is what "live against the source" points at. */ .dbs__src{display:inline-flex;align-items:center;gap:6px;height:28px; padding-inline:11px 12px;border-radius:99px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.07); font-size:11.5px;font-weight:500;letter-spacing:-.002em; color:rgba(255,255,255,.7);white-space:nowrap} .dbs__src svg{width:13px;height:13px;color:var(--success);flex:none} .dbs__save{display:grid;place-items:center;width:28px;height:28px;flex:none; border-radius:8px;color:rgba(255,255,255,.52); background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); transition:transform .2s cubic-bezier(.34,1.4,.5,1), color .3s var(--ease),background .3s var(--ease), box-shadow .3s var(--ease)} .dbs__save svg{width:15px;height:15px} .dbs__save.is-pressed{transform:scale(.84)} .dbs__save.is-saved{color:var(--success);background:rgba(52,211,153,.12); box-shadow:inset 0 0 0 1px rgba(52,211,153,.26)} /* ---- the conversation's own content ---- */ .dbs__body{flex:1;min-height:0;display:flex;flex-direction:column; gap:12px;padding:12px 12px 0} /* the question, as the product shows it once it has been sent: a chip on the asker's side, not a bubble with a tail */ .dbs__q{align-self:flex-end;max-width:302px; padding:9px 13px;border-radius:12px 12px 4px 12px; background:rgba(255,255,255,.075); box-shadow:inset 0 0 0 1px rgba(255,255,255,.055); font-size:12px;line-height:1.45;letter-spacing:-.002em; color:rgba(255,255,255,.9); opacity:0;transform:translateY(8px) scale(.97);transform-origin:100% 50%; transition:opacity .5s var(--ease),transform .6s cubic-bezier(.22,1,.28,1)} .dbs.is-asked .dbs__q{opacity:1;transform:none} /* the answers row, with the one control on it that matters */ .dbs__ans{display:flex;align-items:center;justify-content:space-between;gap:10px; height:40px;padding-inline:13px 6px;border-radius:11px; background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); opacity:0;transform:translateY(8px); transition:opacity .5s var(--ease),transform .6s cubic-bezier(.22,1,.28,1)} .dbs.is-answered .dbs__ans{opacity:1;transform:none} .dbs__ans em{font-style:normal;font-size:12px;font-weight:500; letter-spacing:-.002em;color:rgba(255,255,255,.62); font-variant-numeric:tabular-nums; transition:color .4s var(--ease)} /* every answer is on the board, so the row says so and the button that got them there stops asking */ .dbs__ans.is-done em{color:var(--success)} .dbs__ans.is-done .dbs__pin{opacity:.32;box-shadow:none} .dbs__pin{display:inline-flex;align-items:center;gap:6px;height:28px; padding-inline:11px;border-radius:8px; background:var(--accent);color:var(--on-accent); font-size:11.5px;font-weight:600;letter-spacing:-.002em; box-shadow:0 2px 10px -3px color-mix(in srgb, var(--accent) 60%, transparent); transition:transform .2s cubic-bezier(.34,1.4,.5,1), box-shadow .3s var(--ease)} .dbs__pin svg{width:13px;height:13px} .dbs__pin{transition:transform .2s cubic-bezier(.34,1.4,.5,1), box-shadow .3s var(--ease),opacity .5s var(--ease)} .dbs__pin.is-pressed{transform:scale(.93); box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent)} /* ---- the canvas, before anything is on it ---- */ .dbs__empty{position:absolute;inset:48px 0 0;display:flex; flex-direction:column;align-items:center;justify-content:center;gap:14px; transition:opacity .6s var(--ease),transform .7s cubic-bezier(.22,1,.28,1)} .dbs__empty__ic{display:grid;place-items:center;width:54px;height:54px; border-radius:15px;color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent)} .dbs__empty__t{font-size:13px;font-weight:500;letter-spacing:-.004em; color:rgba(255,255,255,.46)} .dbs.is-building .dbs__empty{opacity:0;transform:scale(.97) translateY(-4px)} /* WHERE THE CARD IN THE AIR IS GOING. The board opens the gap before the card arrives, so the drop lands somewhere that was already waiting for it, and it breathes once as it opens rather than simply being there. */ .dbs__slot{position:absolute;border-radius:16px; border:1px dashed color-mix(in srgb, var(--accent) 40%, transparent); background:color-mix(in srgb, var(--accent) 6%, transparent); left:var(--sx);top:var(--sy);width:var(--sw);height:var(--sh); opacity:0;transform:scale(.985); transition:opacity .36s var(--ease),transform .5s cubic-bezier(.22,1,.28,1), left .5s cubic-bezier(.4,0,.2,1),top .5s cubic-bezier(.4,0,.2,1), width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1)} .dbs.is-slotted .dbs__slot{opacity:1;transform:none} /* ---- one answer card, and it is the same card in both halves -------------- THE MODULE'S OWN CARD: --box over --box-stroke is what a Build Dashboard widget is made of in the app, so the cards here are made of it too. The one thing added is the top-edge light every raised surface on this page carries, which is what stops a flat fill reading as a hole. Authored at its CANVAS size. In the conversation the script draws it at .88 of that, and that size change is visible as it travels: it grows into the board rather than being replaced by a bigger copy of itself. */ .aq-o--dbw .aq-i{width:344px} /* THE CARD IS MADE OF THE SAME MATERIAL AS EVERYTHING ELSE IN THE FRAME. It was a solid fill before, and a solid fill sitting on a translucent panel is exactly what reads as "a black box stuck onto glass" (Ameer, 27 Aug: "I don't need this kind of black widgets... it's not looking nice"). So the card is glass now: a light gradient across its face, a thin tinted body under it so type stays legible over the bright part of the ground, and an edge that catches the light. It takes its colour FROM the section it is in rather than covering it up, and it sits a step above the panel rather than on top of it. */ .dbw{position:relative;display:flex;flex-direction:column;gap:12px; height:var(--h,160px);padding:15px 17px;border-radius:16px; background: linear-gradient(158deg, rgba(255,255,255,.155) 0%, rgba(255,255,255,.085) 46%, rgba(255,255,255,.062) 100%), linear-gradient(180deg, rgba(10,18,24,.16), rgba(10,18,24,.1)); box-shadow:inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(255,255,255,.115), 0 18px 34px -22px rgba(0,0,0,.55); transition:height .62s cubic-bezier(.22,1,.28,1), box-shadow .34s var(--ease),background .34s var(--ease)} /* IN THE AIR. The app's own .cblock.dragging is a box shadow, and a box shadow on a rounded rectangle is the cheap way to say "lifted"; a drop-shadow filter on a moving element is not. */ /* A CARD IN THE AIR GAINS BODY. Glass that stays this transparent while it crosses over another card turns both of them into an unreadable overlap (the flight from the column to the right hand column passes directly over the left hand one, and it always will). A lifted card is nearer the light and further from what is behind it, so it reads as more solid: that is both physically right and the thing that keeps the beat legible. */ .aq-o--dbw.is-lifted .dbw{ background: linear-gradient(158deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.115) 46%, rgba(255,255,255,.088) 100%), linear-gradient(180deg, rgba(27,40,49,.94), rgba(27,40,49,.91)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.17), 0 34px 60px -24px rgba(0,0,0,.72), 0 8px 18px -10px rgba(0,0,0,.55)} .dbw__hd{display:flex;align-items:center;justify-content:space-between;gap:10px} .dbw__t{font-size:12.5px;font-weight:600;letter-spacing:-.006em; color:rgba(255,255,255,.9); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dbw__m{display:flex;flex:none;color:rgba(255,255,255,.26)} .dbw__bd{flex:1;min-height:0;display:flex;align-items:center;gap:16px} /* the chart-type row the product's card carries, and it only appears once the card is on the board, which is where the product actually offers it */ .dbw__ft{display:flex;justify-content:flex-end;gap:12px;flex:none; color:rgba(255,255,255,.3); opacity:0;max-height:0;overflow:hidden;padding-top:0; border-top:0 solid rgba(255,255,255,.06); transition:opacity .45s var(--ease),max-height .45s var(--ease), padding-top .45s var(--ease)} .aq-o--dbw.is-placed .dbw__ft{opacity:1;max-height:36px;padding-top:11px; border-top-width:1px} /* the donut. A conic gradient and a hole: no canvas, no library, one paint. */ .dbw{--risk-low:rgba(216,232,242,.34);--risk-high:rgba(216,232,242,.62); --risk-crit:var(--orange-50)} .dbw__bd--donut{align-items:center;gap:18px} /* A MASKED RING, not a disc with a plug in it. The hole used to be a circle painted the card's own colour, which only works while the card is opaque; on glass it would be a grey coin sitting in the middle of the chart. The mask cuts a real hole, so the section's own ground shows through it. */ .dbw__ring{flex:none;width:var(--ring,84px);aspect-ratio:1;border-radius:50%; transition:width .62s cubic-bezier(.22,1,.28,1); background:conic-gradient(from -90deg, var(--risk-crit) 0 8%, var(--risk-high) 8% 32%, var(--risk-low) 32% 100%); -webkit-mask:radial-gradient(closest-side, transparent 0 61%, #000 62% 100%); mask:radial-gradient(closest-side, transparent 0 61%, #000 62% 100%)} .dbw__leg{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px; transition:gap .62s cubic-bezier(.22,1,.28,1)} .dbw__leg span{display:flex;align-items:center;gap:9px; font-size:11.5px;letter-spacing:-.002em;color:rgba(255,255,255,.7)} .dbw__leg b{margin-inline-start:auto;font-weight:600;color:rgba(255,255,255,.94); font-variant-numeric:tabular-nums} .dbw__d{width:6px;height:6px;border-radius:50%;flex:none} .dbw__d--low{background:var(--risk-low)} .dbw__d--high{background:var(--risk-high)} .dbw__d--crit{background:var(--risk-crit); box-shadow:0 0 0 3px color-mix(in srgb, var(--orange-50) 16%, transparent)} /* once the card is a column rather than a row in a list it has the room, and the one chart on it should use the room */ .aq-o--dbw.is-tall .dbw{--ring:158px} .aq-o--dbw.is-tall .dbw__bd--donut{gap:24px} .aq-o--dbw.is-tall .dbw__leg{gap:17px} .aq-o--dbw.is-tall .dbw__leg span{font-size:12.5px} /* the trend. A figure, and the shape of six months under it. */ .dbw__v{display:flex;flex-direction:column;gap:4px;flex:none; font-size:23px;font-weight:600;letter-spacing:-.026em;color:#fff; font-variant-numeric:tabular-nums} .dbw__v em{font-style:normal;font-size:11px;font-weight:450;letter-spacing:0; color:rgba(255,255,255,.42)} .dbw__spark{flex:1;min-width:0;height:46px;align-self:flex-end;overflow:visible} .dbw__spark polyline{fill:none;stroke:var(--accent);stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round; /* it draws itself once, on the frame its card arrives */ stroke-dasharray:170;stroke-dashoffset:calc(170 - 170 * var(--draw,1))} .dbw__fill{fill:url(#dbwGrad);stroke:none;opacity:var(--draw,1)} /* the ranked list */ .dbw__rk{flex:1;min-width:0;display:flex;flex-direction:column;gap:11px; align-self:stretch;justify-content:center} .dbw__rk span{display:flex;align-items:center;gap:11px;font-size:11.5px; letter-spacing:-.002em;color:rgba(255,255,255,.78)} .dbw__rk b{flex:none;width:14px;font-family:var(--font-mono);font-size:10px; font-weight:500;color:rgba(255,255,255,.3);font-variant-numeric:tabular-nums} .dbw__rk em{flex:1;min-width:0;font-style:normal;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .dbw__rk u{flex:none;text-decoration:none;font-weight:600; color:rgba(255,255,255,.94);font-variant-numeric:tabular-nums} /* ---- the composer, at this scene's own proportions ---------------------- IT IS A TEXTAREA IN THE PRODUCT, so the question WRAPS here too: a single nowrap line is what clipped the sentence mid-word in the opening close-up, and a sentence you cannot finish reading is a bad first beat. */ #aqDash .aq-o--comp .aq-i{width:344px} #aqDash .aq-comp{height:72px;align-items:flex-end;padding:0 8px 9px 14px; gap:8px;border-radius:14px; background:linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.038) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.13), inset 0 0 0 1px rgba(255,255,255,.06)} #aqDash .aq-comp.is-armed{box-shadow:inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.11)} #aqDash .aq-send{width:32px} #aqDash .aq-field{position:relative;display:block;align-self:stretch; padding-top:13px;overflow:hidden} #aqDash .aq-q{display:inline;white-space:normal;font-size:12.5px; line-height:1.46;letter-spacing:-.004em;overflow:visible} #aqDash .aq-caret{display:inline-block;width:1px;height:13px; vertical-align:-2px;margin-inline-start:2px} .aqd-ph{position:absolute;inset-inline:0;top:13px; font-size:12.5px;line-height:1.46;font-weight:450;letter-spacing:-.004em; color:rgba(255,255,255,.32);opacity:0;transition:opacity .4s var(--ease)} /* two placeholders, because the composer is asked two different things: one before there is a conversation, one after there is a board to refine */ .aq-comp.is-empty .aqd-ph--new, .aq-comp.is-refine .aqd-ph--more{opacity:1} /* ---- the hand ---- */ .aq-o--cur .aq-i{width:auto} .aqd-cur{position:relative;display:block;width:30px;height:30px; border-radius:50%;border:1.5px solid rgba(255,255,255,.8); box-shadow:0 0 0 1px rgba(0,0,0,.2); transform:scale(var(--grab-r,1)); transition:transform .22s cubic-bezier(.34,1.4,.5,1)} .aqd-cur i{position:absolute;inset:0;margin:auto;width:5px;height:5px; border-radius:50%;background:#fff; box-shadow:0 0 10px 2px rgba(255,255,255,.5)} /* ---- THE COACH MARK ------------------------------------------------------ One element, three moments, and a hairline that reaches from it to whatever it is about, so it reads as the product pointing at itself rather than as a label laid over the picture. Sentence case on a soft dark surface on purpose: an uppercase pill is a marketing badge, and this is the product explaining itself. */ .aq-o--coach .aq-i{width:auto} .aq-coach{position:relative;display:inline-flex;align-items:center;gap:8px; white-space:nowrap;height:34px;padding-inline:11px 14px;border-radius:11px; background:rgba(12,14,18,.92); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.06), 0 16px 32px -20px rgba(0,0,0,.9); font-family:var(--font-sans);font-size:12.5px;font-weight:500; letter-spacing:-.006em;color:rgba(255,255,255,.94)} .aq-coach__ic{display:flex;color:var(--accent-bright)} .aq-coach__ic svg{width:14px;height:14px} /* the hairline fades out of the label rather than starting hard against it */ .aq-coach__tail{position:absolute} .aq-coach__tail::after{content:"";position:absolute;width:4px;height:4px; border-radius:50%;background:var(--accent-bright); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)} .aq-coach[data-tail="down"] .aq-coach__tail{inset-inline-start:22px;top:100%; width:1px;height:26px; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.3))} .aq-coach[data-tail="down"] .aq-coach__tail::after{left:-1.5px;bottom:-2px} .aq-coach[data-tail="down-end"] .aq-coach__tail{inset-inline-end:24px;top:100%; width:1px;height:26px; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.3))} .aq-coach[data-tail="down-end"] .aq-coach__tail::after{left:-1.5px;bottom:-2px} .aq-coach[data-tail="up-end"] .aq-coach__tail{inset-inline-end:24px;bottom:100%; width:1px;height:26px; background:linear-gradient(0deg,rgba(255,255,255,.02),rgba(255,255,255,.3))} .aq-coach[data-tail="up-end"] .aq-coach__tail::after{left:-1.5px;top:-2px} .aq-coach[data-tail="start"] .aq-coach__tail{inset-inline-end:100%;top:50%; height:1px;width:30px; background:linear-gradient(270deg,rgba(255,255,255,.02),rgba(255,255,255,.3))} .aq-coach[data-tail="start"] .aq-coach__tail::after{inset-inline-start:-2px;top:-1.5px} .aq-coach[data-tail="end"] .aq-coach__tail{inset-inline-start:100%;top:50%; height:1px;width:30px; background:linear-gradient(90deg,rgba(255,255,255,.02),rgba(255,255,255,.3))} .aq-coach[data-tail="end"] .aq-coach__tail::after{inset-inline-end:-2px;top:-1.5px} @media (max-width:900px){ .aq{aspect-ratio:16/12} } @media (prefers-reduced-motion:reduce){ .aq-caret{animation:none} .aq-comp.is-firing .aq-send::after{animation:none} /* the board holds one finished frame under this query, so nothing in it is left breathing */ .dbs__save,.dbs__pin,.dbw,.dbw__ft,.dbs__q,.dbs__ans,.dbs__empty, .dbs__slot,.aqd-cur,.aqd-ph{transition:none} /* the script holds one finished frame under this query: see sync() */ } /* ============================================================ THE FOUNDER ============================================================ ITS OWN CHAPTER, and built as one. It has its own separator above it, its own ground, and a composition that belongs to nothing else on the page: one column, centred, the quote set large enough to be read at a glance, and the person underneath it rather than beside it. The ground is a soft neutral lift out of the page rather than a module tint, because this is the one section that is not about a capability. It opens and closes on #141519 like every other, so it still has no seams. */ .l7-ceo{position:relative;padding-block:clamp(58px,8vh,108px); background: radial-gradient(ellipse 62% 62% at 50% 44%, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 72%), #141519} .l7-ceo__fig{max-width:900px;margin-inline:auto;text-align:center; display:flex;flex-direction:column;align-items:center; gap:clamp(26px,3.6vh,42px)} /* THE QUOTE IS THE SECTION. Set large, light and open: a founder talking, not a product claiming, which is the one place on the page where the type gets quieter as it gets bigger. */ .l7-quote{font-size:clamp(21px,2.15vw,33px);line-height:1.44;font-weight:400; letter-spacing:-.016em;color:rgba(255,255,255,.94);text-wrap:pretty; max-width:760px} .l7-quote::before{content:"\201C"} .l7-quote::after{content:"\201D"} /* one short rule between what was said and who said it */ .l7-ceo__rule{width:56px;height:1px;background:rgba(255,255,255,.18)} .l7-by{display:flex;align-items:center;gap:15px} /* the portrait placeholder, at the size a person is on a page like this */ .l7-by__ph{flex:none;width:56px;height:56px;border-radius:50%; display:grid;place-items:center; background:linear-gradient(150deg, color-mix(in srgb, #fff 8%, transparent) 0%, color-mix(in srgb, #fff 3%, transparent) 100%); border:1px solid color-mix(in srgb, #fff 12%, transparent); color:rgba(255,255,255,.3)} .l7-by__id{display:flex;flex-direction:column;gap:2px;text-align:start} .l7-by__n{font-size:15.5px;font-weight:600;color:#fff} .l7-by__r{font-size:14px;color:rgba(255,255,255,.55)} /* ============================================================ DATA INTELLIGENCE: one band, three beats ============================================================ The whole section is one picture. Documents on the left, what Spark holds in the middle, the question and the reading on the right, and two hairlines carrying the eye between them. No panel around it and no feature rows under it: the idea is simple, so the section is. Every object is the language the Data Intelligence animation already established: a page with a folded corner, a core with rings, a question on a glass rule, a reading with a meter. The purple is the module token, so this band is the same purple as everything else that belongs to this capability. */ .l7-chapter--di{padding-block:clamp(48px,6.4vh,88px)} .l7-chapter--di .l7-head{padding-bottom:clamp(34px,4.4vh,58px)} .di7{display:grid;align-items:center; grid-template-columns:minmax(0,1fr) auto minmax(0,.86fr) auto minmax(0,1.24fr); gap:clamp(12px,1.8vw,30px); max-width:1120px;margin-inline:auto} .di7-beat{display:flex;align-items:center;justify-content:center;min-width:0} /* ---- 1. the documents ---- */ .di7-fan{position:relative;display:flex;align-items:center;justify-content:center; height:clamp(150px,13vw,186px);width:100%} .di7-doc{position:absolute;width:clamp(78px,6.6vw,96px);aspect-ratio:3/3.9; border-radius:9px; background:linear-gradient(158deg, color-mix(in srgb, #1a1526 90%, transparent) 0%, color-mix(in srgb, var(--accent) 26%, transparent) 100%); border:1px solid color-mix(in srgb, #fff 15%, transparent); box-shadow:0 24px 46px -26px rgba(0,0,0,.95); /* the folded corner, the same cut the animation's pages carry */ clip-path:polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%)} /* the title bar and the body lines, drawn rather than marked up: a page in this band is a shape, not a component with content in it */ .di7-doc::before{content:"";position:absolute;inset:12px 12px auto 12px;height:5px; border-radius:3px;background:color-mix(in srgb, var(--accent-bright) 62%, transparent)} .di7-doc::after{content:"";position:absolute;inset:25px 12px 12px 12px; background:repeating-linear-gradient(180deg, color-mix(in srgb, #fff 15%, transparent) 0 3px, transparent 3px 10px)} .di7-doc:nth-child(1){transform:translate3d(-42%,7%,0) rotate(-13deg)} .di7-doc:nth-child(2){transform:translate3d(0,-6%,0) rotate(-1deg)} .di7-doc:nth-child(3){transform:translate3d(42%,9%,0) rotate(12deg)} /* ---- 2. what Spark holds ---- */ .di7-core{position:relative;display:grid;place-items:center; width:clamp(150px,13vw,190px);aspect-ratio:1} /* the light of it */ .di7-core b{position:absolute;inset:0;border-radius:50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-bright) 88%, transparent) 0%, color-mix(in srgb, var(--accent) 34%, transparent) 36%, transparent 74%); filter:blur(2px)} /* and the two rings around it, at two attitudes, the way the animation throws them: a flat one and a turned one, so it reads as an object in a space */ .di7-core i{position:absolute;border-radius:50%; border:1px solid color-mix(in srgb, var(--accent-bright) 46%, transparent)} .di7-core i:nth-child(1){inset:8%;transform:rotate(-16deg) scaleY(.34)} .di7-core i:nth-child(2){inset:-14%;transform:rotate(12deg) scaleY(.26); border-color:color-mix(in srgb, var(--accent-bright) 26%, transparent)} /* ---- 3. the question, and what comes back ---- */ .di7-beat--out{flex-direction:column;align-items:stretch;gap:14px} .di7-ask{display:flex;align-items:center;gap:12px; padding:13px 14px 13px 18px;border-radius:var(--r-full); background:color-mix(in srgb, #16121f 66%, transparent); border:1px solid color-mix(in srgb, #fff 11%, transparent); font-size:14.5px;line-height:1.3;font-weight:500;color:var(--ink)} /* the text truncates, the control does not: the ellipsis belongs to the field rather than to the pill, or the pill clips its own send button off */ .di7-ask b{flex:1;min-width:0;font-weight:500; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .di7-ask i{flex:none;width:22px;height:22px;border-radius:50%; background:var(--accent); box-shadow:0 0 20px -2px color-mix(in srgb, var(--accent) 80%, transparent)} /* the reading, the same card the animation ends on, at one card rather than two */ .di7-kpi{display:flex;flex-direction:column;gap:8px; padding:18px 20px 19px;border-radius:18px; background:linear-gradient(150deg, color-mix(in srgb, #16121f 78%, transparent) 0%, color-mix(in srgb, var(--accent) 26%, transparent) 100%); border:1px solid color-mix(in srgb, #fff 15%, transparent); box-shadow:0 32px 66px -34px rgba(0,0,0,.95), inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent)} .di7-kpi__k{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.56)} .di7-kpi__v{font-size:clamp(24px,2vw,29px);line-height:1.05;font-weight:600; letter-spacing:-.022em;color:#fff} .di7-kpi__bar{position:relative;height:4px;border-radius:2px;margin-top:2px; background:color-mix(in srgb, #fff 10%, transparent);overflow:hidden} .di7-kpi__bar i{position:absolute;inset:0 auto 0 0;border-radius:2px; background:var(--accent-bright)} [dir="rtl"] .di7-kpi__bar i{inset:0 0 0 auto} .di7-kpi__s{font-size:12px;color:rgba(255,255,255,.48)} /* ---- the two hairlines that carry the eye across ---- */ .di7-link{position:relative;width:clamp(28px,4vw,62px);height:1px; background:linear-gradient(to right, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 55%, transparent))} .di7-link i{position:absolute;inset-inline-end:-3px;top:-2.5px; width:6px;height:6px;border-radius:50%;background:var(--accent-bright)} [dir="rtl"] .di7-link{transform:scaleX(-1)} /* ---- the three beats, named under the picture ---- */ .di7-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,26px);max-width:1120px;margin:clamp(28px,3.6vh,44px) auto 0} .di7-steps li{display:flex;align-items:center;gap:11px; padding-top:16px;border-top:1px solid color-mix(in srgb, #fff 11%, transparent)} .di7-steps__n{font-family:var(--font-mono);font-size:11.5px; color:var(--accent);font-variant-numeric:tabular-nums} .di7-steps__t{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.8)} /* ============================================================ BUILD DASHBOARD: the showcase ============================================================ The largest thing on the page, and empty on purpose. The ground inside it is the app's OWN deep sea ambient: .lp-mod[data-module="dashboard"] in css/bg-trace.css declares --bg and --bgfall on this element, and this only paints them. Nothing about the colour is invented here, and when the dashboard experience is built it will already be standing on its own floor. */ .l7-chapter--db .l7-head{padding-bottom:clamp(34px,4.6vh,60px)} /* NO DROP SHADOW (Ameer, 26 Aug: "remove the shadow... keep the container clean, lightweight, and visually refined"). The inset highlight along the top edge is what told you this was glass; the shadow underneath it was only ever weight. A hairline border and the module's own ground now do the whole job, which is lighter and reads as more refined, not less finished. */ .l7-stage{position:relative;overflow:hidden; min-height:clamp(470px,72vh,780px); border-radius:26px; background-color:var(--bgfall);background-image:var(--bg); background-size:cover;background-position:center; border:1px solid color-mix(in srgb, #8cafbe 18%, transparent); box-shadow:inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); display:grid;place-items:center} /* the scene fills the stage exactly the way the three above it fill their own column: no card around the card. */ .l7-stage .aq{width:100%;height:100%;border-radius:inherit;aspect-ratio:auto} /* ---- THREE THINGS THE BOARD DOES ---------------------------------------- Under the showcase, so the picture is still the first thing in the chapter. ONE MARKUP, THREE SKINS while the treatment is being chosen: every variant below is built from the same four elements (a mark, a number, a title and a line), and data-db-pts on the list decides which of them are shown and how. Two of the three come out of this file and out of js/landing-full.js once one is picked; none of them is a new component, each borrows a vocabulary the page already has. A the trust band's row: a hairline over each column, a quiet mark, a title and a line. Reads as part of the chapter rather than as a feature strip B the feature row's list: a mark and one line, no title. The lightest of the three, and the closest to how the rest of the page states a fact C the Data Intelligence beats: 01/02/03 over a rule, a title and a line. The most structured, and it numbers things that are not really a sequence, which is the argument against it */ .db-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,38px);max-width:1120px; margin:clamp(38px,5vh,64px) auto 0;padding:0;list-style:none} .db-pt{display:flex;flex-direction:column;min-width:0} .db-pt__ic{display:flex;color:rgba(255,255,255,.62)} .db-pt__n{font-family:var(--font-mono);font-size:11.5px; color:var(--accent);font-variant-numeric:tabular-nums} .db-pt__t{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:#fff} .db-pt__p{margin:0;font-size:13.5px;line-height:1.6;letter-spacing:-.002em; color:rgba(255,255,255,.54);text-wrap:pretty} /* A: the trust band's row */ .db-pts[data-db-pts="a"] .db-pt{gap:10px;padding-top:20px; border-top:1px solid color-mix(in srgb, #fff 11%, transparent)} .db-pts[data-db-pts="a"] .db-pt__n{display:none} /* B: the feature row's list, one line each and no title */ .db-pts[data-db-pts="b"]{gap:clamp(12px,1.6vw,26px)} .db-pts[data-db-pts="b"] .db-pt{flex-direction:row;align-items:flex-start;gap:11px} .db-pts[data-db-pts="b"] .db-pt__ic{flex:none;margin-top:1px;color:var(--accent)} .db-pts[data-db-pts="b"] .db-pt__ic svg{width:17px;height:17px} .db-pts[data-db-pts="b"] .db-pt__n, .db-pts[data-db-pts="b"] .db-pt__p{display:none} .db-pts[data-db-pts="b"] .db-pt__t{font-size:14.5px;font-weight:500; color:rgba(255,255,255,.8);line-height:1.45} /* C: the Data Intelligence beats, numbered over a rule */ .db-pts[data-db-pts="c"] .db-pt{gap:8px;padding-top:18px; border-top:1px solid color-mix(in srgb, #fff 11%, transparent)} .db-pts[data-db-pts="c"] .db-pt__ic{display:none} .db-pts[data-db-pts="c"] .db-pt__t{font-size:15px} @media (max-width:900px){ .db-pts{grid-template-columns:1fr;max-width:460px;gap:20px} } /* ============================================================ THE BENEFITS: six cards, named and explained ============================================================ One card, six times: a round badge, the name of the thing, and one plain sentence saying what it does for you. Nothing about the composition is trying to be interesting, because the job of this section is to be understood at a glance by somebody who has not read the rest of the page. */ .l7-value{position:relative;background:#141519; padding-block:clamp(52px,7vh,96px)} .l7-vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,1.6vw,24px);max-width:1180px;margin-inline:auto} .l7-val{display:flex;flex-direction:column; padding:clamp(24px,2.2vw,32px);border-radius:20px; background:linear-gradient(168deg, color-mix(in srgb, #fff 5.5%, transparent) 0%, color-mix(in srgb, #fff 2.5%, transparent) 62%); border:1px solid color-mix(in srgb, #fff 9%, transparent); transition:border-color .22s var(--ease),background .22s var(--ease)} .l7-val:hover{border-color:color-mix(in srgb, #fff 16%, transparent); background:linear-gradient(168deg, color-mix(in srgb, #fff 7.5%, transparent) 0%, color-mix(in srgb, var(--accent) 7%, transparent) 100%)} /* the badge is round and quiet: it marks the card, it does not decorate it */ .l7-val__ic{width:46px;height:46px;flex:none;border-radius:50%; display:grid;place-items:center; background:color-mix(in srgb, #fff 6%, transparent); border:1px solid color-mix(in srgb, #fff 10%, transparent); /* NOT ORANGE. Orange on this page means "this is a thing you click", and a badge on a benefits card is not one; it was the only orange on the page that was neither a button nor a link. It takes the same quiet white the quote mark in the customers wall uses (.l7-say__mark::after), so the two quiet marks on the page are the same mark. */ color:rgba(255,255,255,.6);margin-bottom:clamp(22px,2.4vw,34px)} /* THE NAME OF THE THING, and it is the loudest text on the card. A visitor who reads only the six names should already know what Spark is. */ .l7-val__t{font-size:clamp(17px,1.35vw,19.5px);line-height:1.28;font-weight:600; letter-spacing:-.016em;color:#fff;margin-bottom:10px;text-wrap:balance} .l7-val__p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.64);text-wrap:pretty} /* ============================================================ WHAT PEOPLE SAY: a wall of quote cards ============================================================ EVERY CARD IS THE SAME FOUR THINGS in the same order, so six of them read as a set rather than as six arrangements: the quote badge, the line worth remembering as a headline, the rest of what was said under it, and the person who said it. The headline is what makes a wall readable at all, because six headlines can be scanned and six paragraphs cannot. CSS columns rather than a grid: the quotes are different lengths on purpose, and columns let a short card sit under a long one without either being stretched to match a row. */ /* A SUBTLE DARK GROUND, and nothing more. One step out of the page and back into it, so the section is felt as its own plate without a rule, a tint or a decoration anywhere in it. */ .l7-says{position:relative; background:linear-gradient(180deg, #141519 0%, #16171c 22%, #16171c 78%, #141519 100%); padding-block:clamp(52px,7vh,96px)} .l7-wall{columns:3;column-gap:clamp(16px,1.8vw,24px);max-width:1180px;margin-inline:auto} .l7-say{break-inside:avoid;display:flex;flex-direction:column; margin-bottom:clamp(16px,1.8vw,24px); padding:clamp(24px,2.2vw,32px);border-radius:22px; background:linear-gradient(168deg, color-mix(in srgb, #fff 5.5%, transparent) 0%, color-mix(in srgb, #fff 2.5%, transparent) 68%); border:1px solid color-mix(in srgb, #fff 9%, transparent)} /* THE BADGE, and there is NO COLOUR ON IT. A quote mark set in a disc, the way a pull quote is marked in print. Off-white on the faintest glass: what makes a testimonial credible is the person and the sentence, and a brand-coloured flourish over the top of them is the thing that reads as decoration. */ .l7-say__mark{width:48px;height:48px;flex:none;border-radius:50%; display:grid;place-items:center; background:color-mix(in srgb, #fff 6%, transparent); margin-bottom:clamp(22px,2.2vw,30px)} .l7-say__mark::after{content:"\201D"; font-family:var(--font-sans);font-size:30px;font-weight:600;line-height:1; color:rgba(255,255,255,.6);margin-top:.34em} /* the one that leads is a shade brighter, and that is the whole difference */ .l7-say.is-lead .l7-say__mark{background:color-mix(in srgb, #fff 9%, transparent)} .l7-say.is-lead .l7-say__mark::after{color:rgba(255,255,255,.8);font-size:34px} /* THE LINE WORTH REMEMBERING. Loud enough to be read on its own, because on a wall this is the only part most people will read. */ .l7-say__t{font-size:clamp(17px,1.35vw,19.5px);line-height:1.3;font-weight:600; letter-spacing:-.016em;color:#fff;margin-bottom:12px;text-wrap:balance} .l7-say__q{font-size:14.5px;line-height:1.62;color:rgba(255,255,255,.58); text-wrap:pretty;margin-bottom:clamp(22px,2.2vw,30px)} /* THE PERSON, last and quietest: a portrait, a name, and the company in the page's own label treatment so it reads as a credential rather than as a second line of the name. */ .l7-say__by{display:flex;align-items:center;gap:13px;margin-top:auto} /* THE PORTRAIT IS A REAL FACE, because a grey disc beside a name reads as a card nobody finished. These are placeholder portraits from randomuser.me's licensed mockup set, sitting next to "Placeholder Name": they are here for the composition and they get swapped for the real customers before this page goes anywhere. Held locally in assets/faces so the page has no third party to reach for and works offline. */ .l7-say__av{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover; background:color-mix(in srgb, #fff 7%, transparent); box-shadow:0 0 0 1px color-mix(in srgb, #fff 14%, transparent)} .l7-say.is-lead .l7-say__av{width:52px;height:52px} .l7-say__id{display:flex;flex-direction:column;gap:3px;min-width:0} .l7-say__n{font-size:15px;font-weight:600;letter-spacing:-.01em;color:#fff} .l7-say__c{font-family:var(--font-sans);font-size:11.5px;font-weight:600; letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.46)} /* THE FEATURED CARD BREAKS THE WALL. column-span:all takes it across the full measure and the other five flow beneath it; a featured quote squeezed into one column is just a taller card. Across that width the headline and the quote sit beside each other rather than stacking. */ .l7-say.is-lead{column-span:all;margin-bottom:clamp(20px,2.2vw,30px); padding:clamp(28px,2.8vw,42px); display:grid;grid-template-columns:auto minmax(0,1fr); column-gap:clamp(24px,2.6vw,40px);row-gap:0;align-items:start; /* IT LEADS ON SIZE AND SURFACE, NOT ON COLOUR: the full measure, a larger headline, and one step more light in the glass. Nothing tinted. */ background:linear-gradient(150deg, color-mix(in srgb, #fff 7%, transparent) 0%, color-mix(in srgb, #fff 3.5%, transparent) 100%); border-color:color-mix(in srgb, #fff 13%, transparent)} .l7-say.is-lead .l7-say__mark{grid-row:1 / span 3;margin-bottom:0} .l7-say.is-lead .l7-say__t{font-size:clamp(21px,2vw,30px);line-height:1.24; letter-spacing:-.022em;max-width:20ch;margin-bottom:14px} .l7-say.is-lead .l7-say__q{font-size:15.5px;line-height:1.6; color:rgba(255,255,255,.7);max-width:62ch;margin-bottom:26px} .l7-say.is-lead .l7-say__by{margin-top:0} /* ============================================================ THE CLOSING CALL, AND THE FOOTER UNDER IT ============================================================ ONE GROUND FOR BOTH. The three lights belong to the pair rather than to the call alone, so they are painted on the wrapper: the footer continues out of them instead of cutting to a black plate under them, and the only thing between the two is a hairline. The three values are the design system's own brand steps, read from the primitives rather than written down again here. */ .l7-end{position:relative; background: radial-gradient(ellipse 52% 46% at 20% 62%, color-mix(in srgb, var(--orange-50) 15%, transparent) 0%, transparent 72%), radial-gradient(ellipse 50% 44% at 80% 62%, color-mix(in srgb, var(--cyan-50) 13%, transparent) 0%, transparent 72%), radial-gradient(ellipse 60% 56% at 50% 70%, color-mix(in srgb, var(--purple-50) 17%, transparent) 0%, transparent 70%), #141519} .l7-cta{position:relative;padding-block:clamp(86px,14vh,180px)} .l7-cta__in{position:relative;text-align:center; display:flex;flex-direction:column;align-items:center} .l7-cta__h{font-size:clamp(38px,5.2vw,80px);line-height:1.03;font-weight:500; letter-spacing:-.033em;color:#fff;max-width:16ch;text-wrap:balance} .l7-cta__p{margin-top:20px;font-size:clamp(16px,1.3vw,19.5px);line-height:1.58; font-weight:400;color:rgba(255,255,255,.66);max-width:46ch;text-wrap:pretty} .l7-cta__btns{margin-top:clamp(28px,3.6vh,44px);justify-content:center} /* the footer is not a plate. It has no ground of its own: it stands on the same light the call above it stands on, and hairlines do the separating. */ .l7-foot{position:relative;padding-top:clamp(24px,3.2vh,34px)} .l7-foot::before{content:"";position:absolute;inset-block-start:0; inset-inline:0;height:1px; background:linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.12) 18%, rgba(255,255,255,.12) 82%, rgba(255,255,255,0))} .l7-foot__in{display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;gap:20px clamp(20px,3vw,40px); padding-bottom:clamp(20px,2.6vh,28px)} .l7-foot__brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap} /* 28, not 26: same reason as .authlogo img in auth.css */ .l7-foot__logo{height:28px;width:auto} /* Spark is an Xpin product, and this is where that belongs: one line, linked, and quiet enough that it reads as a lineage rather than as a second brand. */ .l7-foot__xpin{display:inline-flex;align-items:center;gap:5px; font-size:13px;color:rgba(255,255,255,.44); transition:color .18s var(--ease)} .l7-foot__xpin:hover{color:rgba(255,255,255,.82)} .l7-foot__xpin svg{width:13px;height:13px} .l7-foot__right{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);flex-wrap:wrap} .l7-foot__links{display:flex;align-items:center;gap:clamp(16px,1.8vw,26px)} .l7-foot__links a{font-size:13.5px;color:rgba(255,255,255,.56); transition:color .18s var(--ease)} .l7-foot__links a:hover{color:#fff} .l7-foot__soc{display:flex;gap:9px} .l7-foot__s{width:34px;height:34px;border-radius:10px;display:grid;place-items:center; background:color-mix(in srgb, #fff 5%, transparent); border:1px solid color-mix(in srgb, #fff 8%, transparent); color:rgba(255,255,255,.56); transition:color .2s var(--ease),border-color .2s var(--ease)} .l7-foot__s:hover{color:#fff;border-color:color-mix(in srgb, #fff 18%, transparent)} .l7-foot__s svg{width:16px;height:16px} /* CENTRED, because there is one line in it now. It was `space-between` for a legal line at one end and a placeholder note at the other; the note is gone (4 Sep) and space-between on a single child pins it to the start edge. */ .l7-foot__bar{position:relative;display:flex;flex-wrap:wrap; justify-content:center;text-align:center;gap:10px;padding-block:16px; font-size:12.5px;color:rgba(255,255,255,.4)} .l7-foot__bar::before{content:"";position:absolute;inset-block-start:0; inset-inline:0;height:1px;background:rgba(255,255,255,.07)} /* ============================================================ NARROWER WINDOWS ============================================================ */ @media (max-width:980px){ .l7-vals{grid-template-columns:repeat(2,minmax(0,1fr))} .l7-wall{columns:2} } @media (max-width:900px){ /* the band becomes a column, and the hairlines turn with it */ .di7{grid-template-columns:1fr;justify-items:center; gap:clamp(14px,2.4vh,24px);max-width:420px} .di7-link{width:1px;height:clamp(26px,3.4vh,40px); background:linear-gradient(to bottom, color-mix(in srgb, var(--accent) 10%, transparent), color-mix(in srgb, var(--accent) 55%, transparent))} .di7-link i{inset-inline-end:auto;inset-inline-start:-2.5px;top:auto;bottom:-3px} .di7-beat--out{width:100%} .di7-steps{grid-template-columns:1fr;max-width:420px} /* the visual leads and the copy follows: side by side neither half has the width to be read */ .l7-row{grid-template-columns:1fr;row-gap:clamp(22px,3vh,34px)} .l7-row.is-flip .l7-row__shot{order:0} .l7-quote{max-width:none} } @media (max-width:680px){ .l7-vals{grid-template-columns:1fr} .l7-wall{columns:1} .l7-h{font-size:clamp(27px,7.4vw,34px)} .l7-cta__h{font-size:clamp(32px,9vw,42px)} .l7-foot__in{flex-direction:column;align-items:flex-start} .l7-sep__in{gap:16px} .l7-logos__row{gap:18px 26px} .l7-logo__n{font-size:13.5px} .l7-stage{min-height:min(60vh,460px)} } @media (prefers-reduced-motion:reduce){ .l7-logo,.l7-foot__col a,.l7-foot__s{transition:none} /* the row still reads as a row of marks; it just stops drifting */ .l7-logo{animation:none} }