/* ============================================================================ TESAE design tokens — the single source of truth. Nothing else in the theme may contain a raw colour, font size or spacing value. Fluid values are clamp() interpolations between the two Figma frames: desktop anchor 1920px mobile anchor 991px (below this everything is flat) Formula and rationale: see AGENTS.md. ========================================================================== */ :root { /* ---------------------------------------------------------------- colour */ --tesae-color-primary: #529771; --tesae-color-primary-dark: #3f7858; --tesae-color-primary-soft: #b0d3c0; --tesae-color-black: #000000; --tesae-color-ink: #252525; --tesae-color-white: #ffffff; --tesae-color-tint: #f6f6f6; --tesae-color-tint-2: #e4e4e4; --tesae-color-grey: #e4e4e4; --tesae-color-grey-2: #cbcbcb; --tesae-color-text: var(--tesae-color-black); --tesae-color-text-invert: var(--tesae-color-white); --tesae-color-bg: var(--tesae-color-white); /* overlays lifted straight from the Figma layers */ --tesae-overlay-black: rgba(0, 0, 0, 0.59); --tesae-overlay-black-0: rgba(0, 0, 0, 0); --tesae-overlay-black-07: rgba(0, 0, 0, 0.07); --tesae-overlay-black-23: rgba(0, 0, 0, 0.23); --tesae-overlay-black-50: rgba(0, 0, 0, 0.5); --tesae-overlay-black-65: rgba(0, 0, 0, 0.65); /* Figma fills the countdown panel with white at 10%; the token had drifted to a solid #1C1C1C, which is why the panel read as a black box over the photograph. */ --tesae-overlay-white-10: #1c1c1c; --tesae-overlay-white-57: rgba(255, 255, 255, 0.57); --tesae-overlay-white-23: rgba(255, 255, 255, 0.23); --tesae-overlay-tint-43: rgba(251, 240, 240, 0.43); --tesae-overlay-primary-soft-0: rgba(176, 211, 192, 0); --tesae-hero-image-opacity: 1; --tesae-hero-art-rotate: -20.28deg; --tesae-hero-art-scale: 1.12; --tesae-hero-mobile-art-rotate: -4.73deg; --tesae-hero-mobile-art-scale: 2.35; /* Mobile stacks: copy, then the photograph, with the button over its lower edge. The photograph is a flex item *after* the copy rather than pinned to Figma's 403 — the headline wraps to four lines at 375 against three at 390, so a fixed top slid the picture up underneath the paragraph. It takes the leftover height instead, which is the only slack a fixed-height panel has. Figma's 804 panel draws the art 403..710 and the button 673..722: 94 and 82 up from the panel's foot, the button's bottom 12 below the art's. The wordmark sits *on* the picture's top edge, so the art is pulled back up over it by its own height. */ /* The source file is 390x307 — exactly the box Figma draws it in, so the frame shows the photograph whole. The box therefore carries its ratio and is never asked to fill leftover height: any other height would crop it, and `object-fit: cover` would take the difference off the top and bottom. */ --tesae-hero-mobile-art-ratio: 390 / 307; --tesae-hero-mobile-wordmark-height: 33px; /* How far the button rides up onto the picture: 710 - 673 in the frame, which also leaves its bottom 12 below the picture's. */ --tesae-hero-mobile-cta-lift: 37px; /* The white tail under the button — Figma's 804 - 722 — is not declared anywhere. It is whatever this min-height adds past the copy, so it shows in full when the screen has room and closes up when it does not. Everything above it is fixed by the photograph's ratio and cannot give. */ --tesae-hero-mobile-panel-max: 804px; --tesae-hero-mobile-panel-min: 620px; --tesae-hero-mobile-panel-height: clamp( var(--tesae-hero-mobile-panel-min), calc(100svh - var(--tesae-space-s)), var(--tesae-hero-mobile-panel-max) ); /* The three vertical gaps above the photograph are the only compressible things left in the mobile stack — the headline, the paragraph and the picture's ratio are all fixed. Clamped on the viewport's *height* rather than its width, so a shorter phone tightens them and the picture and the button ride up instead of falling off the first screen. Full Figma spacing from 780svh up, fully tightened at 700svh; between the two they interpolate, so it is continuous rather than a jump. 700 is the floor because that is roughly a 13 mini's usable height once the browser chrome is on — the smallest phone where the button can still be reached without scrolling. Below it the headline, the paragraph and the picture's ratio already add up to more than the screen, so there is nothing left to give. Note the anchors here are heights, not the 1920/991 width anchors the type scale uses. That is deliberate, and applies to these three tokens only. */ --tesae-hero-mobile-inner-top: clamp(16px, calc(57.5svh - 386.5px), 62px); --tesae-hero-mobile-copy-gap: clamp(12px, calc(15svh - 93px), 24px); --tesae-hero-mobile-gutter: 22px; --tesae-hero-mobile-copy-width: 100%; --tesae-hero-mobile-wordmark-gap: clamp(8px, calc(12.5svh - 79.5px), 18px); --tesae-hero-mobile-wordmark-width: 162px; --tesae-hero-mobile-cta-width: 171px; --tesae-hero-mobile-cta-height: 49px; --tesae-page-inset: 16px; --tesae-page-inset-end: 15px; --tesae-header-top: 20px; /* Clearance for the sticky desktop header, used by scroll-padding so that jumping to an anchor does not land the section's first line behind the bar. Measured, not guessed: the header runs 101px at 1920 down to 70px at 992, so this is the theme's usual 1920/991 clamp over those two anchors. Deliberately a hair generous (~2px at 1550, where the real bar dips to 86.25) — overshooting only adds air above the heading, while undershooting hides it. */ --tesae-header-clearance: clamp(70px, 3.3369vw + 36.931px, 101px); /* 101 -> 70 */ --tesae-header-inner-gutter: 20px; --tesae-header-menu-gap: clamp(22px, 2.1622vw + 0.486px, 42px); --tesae-header-nav-cta-gap: clamp(21px, 2.7027vw - 5.892px, 46px); --tesae-header-actions-gap: clamp(8px, 0.5405vw + 0.622px, 11px); --tesae-header-cta-width: clamp(171px, 8.3784vw + 88.135px, 249px); --tesae-header-cta-height: 60px; --tesae-burger-gap: 5px; --tesae-burger-bar-width: 26px; --tesae-burger-bar-height: 2px; --tesae-mobile-menu-border-width: 3px; --tesae-mobile-menu-brand-left: 11px; --tesae-mobile-menu-brand-top: 8.3538px; --tesae-mobile-menu-brand-width: 136.7512px; --tesae-mobile-menu-brand-height: 45.6462px; --tesae-mobile-menu-brand-mark-width: 47.7692px; --tesae-mobile-menu-brand-mark-height: 45.6462px; --tesae-mobile-menu-brand-word-left: 47.7692px; --tesae-mobile-menu-brand-word-top: 14.8615px; --tesae-mobile-menu-brand-word-width: 88.9819px; --tesae-mobile-menu-brand-word-height: 15.9231px; --tesae-mobile-menu-actions-top: 10.5px; --tesae-mobile-menu-actions-end: 8px; --tesae-mobile-menu-actions-gap: 11px; --tesae-mobile-menu-control-size: 45px; --tesae-mobile-menu-close-line-length: 25px; --tesae-mobile-menu-close-line-height: 2px; --tesae-mobile-menu-close-rotate: 45deg; --tesae-mobile-menu-list-top: clamp(104px, 17.1206dvh, 132px); --tesae-mobile-menu-row-step: clamp(66px, 10.1946dvh, 78.6px); --tesae-mobile-menu-item-line-box: 26.84px; --tesae-mobile-menu-social-gap: clamp(48px, 9.8781dvh, 76.16px); --tesae-mobile-menu-bottom-space: clamp(40px, 11.5975dvh, 89.417px); --tesae-mobile-menu-social-width: 245.0641px; --tesae-mobile-menu-social-height: 53.5829px; --tesae-mobile-menu-social-item-width: 51.9221px; --tesae-mobile-menu-social-item-gap: 12.4583px; --tesae-mobile-menu-font-size: clamp(22px, 0vw + 22px, 22px); --tesae-mobile-menu-line-height: 1.22; --tesae-notification-width: 382px; --tesae-notification-min-height: 587px; --tesae-notification-border-width: 2px; --tesae-notification-content-top: 130px; --tesae-notification-content-start: 46px; --tesae-notification-content-end: 12px; --tesae-notification-content-bottom: 48px; --tesae-notification-title-width: 324px; --tesae-notification-copy-width: 311px; --tesae-notification-title-copy-gap: 21px; --tesae-notification-copy-offer-gap: 23.22px; --tesae-notification-copy-cta-gap: 28px; --tesae-notification-close-top: 15px; --tesae-notification-close-end: 16px; --tesae-notification-close-size: 62px; --tesae-notification-close-line-length: 37.7211px; --tesae-notification-close-line-height: 3px; --tesae-notification-close-line-center: 50%; --tesae-notification-close-line-shift: -50%; --tesae-notification-close-line-rotate: 45deg; --tesae-notification-cta-width: 249px; --tesae-notification-cta-min-height: 59.6433px; --tesae-notification-panel-gap: 24px; --tesae-notification-mobile-panel-gap: 12px; --tesae-notification-mobile-inline-shift: 52px; /* Figma 723:3760 — on mobile the bell opens a full-screen green panel rather than the desktop card, and its close takes the bell's own slot in the header. The numbers below are viewport-relative, since the panel is inset:0. */ --tesae-notification-mobile-close-top: 10px; --tesae-notification-mobile-close-end: 68px; --tesae-notification-mobile-close-line: 25px; --tesae-notification-mobile-close-stroke: 2px; --tesae-notification-mobile-inset: 23.25px; --tesae-notification-mobile-title-top: 165.95px; /* line box, caps land at 177.45 */ --tesae-notification-mobile-copy-gap: 41.8px; --tesae-notification-mobile-copy-inset: 3px; /* the body is inset 26.25, not 23.25 */ --tesae-notification-mobile-offer-gap: 20.64px; /* the frame's blank line */ --tesae-notification-mobile-button-gap: 61.1px; --tesae-notification-mobile-button-inset: 1.38px; --tesae-notification-mobile-button-width: 179.13px; --tesae-notification-mobile-button-height: 47px; --tesae-notification-highlight-inline: 4px; --tesae-notification-highlight-block: 1px; --tesae-notification-highlight-line-height: 1; --tesae-notification-title-size: clamp(32px, 0vw + 32px, 32px); --tesae-notification-copy-size: clamp(18px, 0vw + 18px, 18px); --tesae-notification-button-size: clamp(20px, 0vw + 20px, 20px); --tesae-notification-line-height: 1.29; /* The hero has to read as one screenful. The panel keeps the Figma 940 on a display tall enough for it and otherwise shrinks to whatever the viewport gives, never below the floor — under that the composition would start colliding, so the section scrolls a little instead of collapsing. `svh` rather than `dvh`: a mobile browser hiding its toolbar mid-scroll would otherwise resize the hero under the reader's thumb. `svh` is the height with the chrome shown, so the hero fits from the first paint and never moves. Everything subtracted here is what sits outside the panel but still on screen: the panel's own top inset, the CTA that hangs below the panel's bottom edge, and a little air so the button does not sit flush against the fold. These three are the budget only — the CTA's actual position comes from `--tesae-hero-aside-overhang`, which is a Figma measurement and must stay 31. `--tesae-hero-fit-gap` is the one here meant to be tuned by eye. */ --tesae-hero-panel-max: 940px; --tesae-hero-panel-min: 520px; --tesae-hero-cta-overhang: 24px; --tesae-hero-fit-gap: 40px; --tesae-hero-panel-height: clamp( var(--tesae-hero-panel-min), calc(100svh - var(--tesae-header-top) - var(--tesae-hero-cta-overhang) - var(--tesae-hero-fit-gap)), var(--tesae-hero-panel-max) ); /* The strip below the panel, where the page wash and the deadline hand cross over. It is clearance, not composition, so it stays a fixed length. */ --tesae-hero-bridge-height: 198px; --tesae-hero-flow-height: calc(var(--tesae-hero-panel-height) + var(--tesae-hero-bridge-height)); /* Figma's 91 and 1014 against the 940 panel. As shares they follow it down. */ --tesae-hero-bg-top: 9.6809%; /* Coverage floor only — the box is normally sized by its own width, see the ratio below. 107.8723% was the box's height at 1920 and reads like a floor, but it is far above one: the box starts at 9.6809% of the panel, so 90.3191% is all it takes to reach the panel's foot. Left at the old value the floor won at every laptop size and the ratio below never got to do anything. */ --tesae-hero-bg-height: 90.3191%; /* The box's shape, and the whole point of it. Its height used to be 107.8723% of the PANEL, whose height rides on svh, while its width follows the viewport — so on a laptop the two drifted apart, the box's ratio swung from 1.86 down to 1.60, and `cover` re-cropped: it kept 98.2% of the photograph's width at 1920 and only 84.8% at 1440x900. That crop is centred, so it ate both edges — which is what pulls the left arm off the bottom corner and walks the right hand into the lead paragraph. 1920/1014 is the box at 1920, where the design's numbers were taken and where the ratio happens to equal the photograph's own. Pinning it there makes the crop identical at every width instead of a function of window height. */ --tesae-hero-bg-ratio: 1920 / 1014; --tesae-hero-bg-left: -15px; --tesae-hero-bg-width: calc(100% + 31px); --tesae-hero-title-left: 3.81%; /* Figma's 295 as a share of the 940 panel: the headline rides up with the panel. */ --tesae-hero-title-top: 31.3830%; --tesae-hero-title-width: 39.7%; --tesae-hero-aside-left: 63%; /* The right column is anchored to the panel's *bottom*, not its top. Its own height is set by the paragraph, which is clamped on width and does not shrink when the panel does — pinning it from the top would push the button off the fold on a short screen. From the bottom, the compression lands in the empty middle instead, and at 940 the paragraph still starts at Figma's 735. */ /* 940 panel, CTA bottom at 971: the button hangs 31 below the panel's edge. That is a measurement of the frame, not a taste knob — it is what places the whole right column, so changing it slides the paragraph and the button off their Figma pixels. The air at the fold is `--tesae-hero-fit-gap`; tune that instead. */ --tesae-hero-aside-overhang: 31px; --tesae-hero-aside-bottom: calc(var(--tesae-hero-aside-overhang) * -1); --tesae-hero-aside-width: 31.82%; --tesae-hero-aside-gap: 44px; --tesae-hero-cta-width: 249px; --tesae-hero-cta-height: 60px; --tesae-hero-wordmark-width: 281px; --tesae-hero-title-visual-shift: -11px; --tesae-hero-text-visual-shift: -7px; --tesae-hero-ambient-left: -6.67%; --tesae-hero-ambient-top: -1.49%; --tesae-hero-ambient-width: 108.73%; --tesae-hero-ambient-height: 122.45%; --tesae-hero-scroll-left: 72px; /* Figma puts the cue at 826..885 in a 940 panel — 55 up from the bottom edge. Held from the bottom so it keeps its distance from the fold as the panel shrinks. */ --tesae-hero-scroll-bottom: 55px; --tesae-hero-scroll-width: 45px; --tesae-hero-scroll-height: 59px; /* The cue drifts down and back so it reads as clickable. Kept small — it sits over the hero artwork and a big travel would look like a loose element. */ --tesae-hero-scroll-bob-travel: 8px; --tesae-hero-scroll-bob-duration: 1.8s; --tesae-hero-scroll-hover-opacity: 0.7; --tesae-design-width: 1920px; /* The wash is the 93px seam between the hero panel and the deadline section, drawn at 1045 = 31 (panel inset) + 940 (panel) + 74. It has to follow the panel down, or a shrinking hero leaves it stranded in the middle of the next section. */ --tesae-page-art-wash-gap: 74px; --tesae-page-art-wash-top: calc( var(--tesae-header-top) + var(--tesae-hero-panel-height) + var(--tesae-page-art-wash-gap) ); --tesae-page-art-wash-height: 356px; --tesae-page-art-wash-visible-height: 104px; --tesae-page-art-upper-left: -259px; /* Constant on purpose: this orbit is drawn over the hero/deadline band, and that band barely reflows — #deadline's h2 moves 4px between 1920 and 992, against 142px for #why's. Clamping it to the sections further down would slide it off the composition it belongs to. */ --tesae-page-art-upper-top: 590.858px; --tesae-page-art-upper-width: 2500.787px; --tesae-page-art-upper-height: 2582.767px; --tesae-page-art-upper-image-width: 2059.7px; --tesae-page-art-upper-image-height: 2169.711px; --tesae-page-art-upper-rotate: -13.2deg; --tesae-page-art-middle-left: -472.91px; /* Tracks #transactions, which climbs 380px between 1920 and 992 while this orbit used to stay put — that drift is what walked the arc down through the title and into the lead paragraph. The extra -50 lifts it clear of the heading's glyphs, which the Figma frame draws it above and the old build grazed even at 1920. */ --tesae-page-art-middle-top: clamp(2532.510px, 40.9483vw + 2080.303px, 2879.51px); --tesae-page-art-middle-width: 3443.755px; --tesae-page-art-middle-height: 3523.65px; --tesae-page-art-middle-image-width: 2488.311px; --tesae-page-art-middle-image-height: 2676.53px; --tesae-page-art-middle-rotate: -27.53deg; --tesae-page-art-lower-left: -834.39px; --tesae-page-art-lower-top: clamp(6752.960px, 87.6078vw + 5883.891px, 7361.960px); /* 7566 -> 6753, tracking #faq */ --tesae-page-art-lower-width: 3654.538px; --tesae-page-art-lower-height: 3730.018px; --tesae-page-art-lower-image-width: 2612.79px; --tesae-page-art-lower-image-height: 2810.411px; --tesae-page-art-lower-rotate: -29.33deg; /* The black band was a flat 434 while everything inside it clamps on width, so the slack grew as the page narrowed and had to pool somewhere visible — under the button or above it. The band scales instead: 434 at 1920, exactly as Figma draws it, down to 286 at 992, which is where the box's foot keeps the frame's own 74% of the band. The media panel is sized from --tesae-deadline-height and every layer inside it is a percentage of that box, so it follows along without any of its geometry moving. */ --tesae-deadline-top-height: 424px; --tesae-deadline-countdown-height: clamp(286px, 15.9483vw + 127.8px, 434px); --tesae-deadline-height: calc( var(--tesae-deadline-top-height) + var(--tesae-deadline-countdown-height) ); /* Figma hangs the button off the band's bottom edge — 397..456.6 in a 434 band — the same trick the hero CTA plays on its panel. Anchored there it holds one position at every width instead of drifting with whatever is left over above it. */ --tesae-countdown-cta-overhang: 22.6px; --tesae-deadline-copy-left: 88px; --tesae-deadline-copy-top: 102px; --tesae-deadline-copy-width: 539px; --tesae-deadline-copy-gap: 34px; --tesae-deadline-media-flip: scaleX(-1); --tesae-deadline-media-background-width: 151.875%; --tesae-deadline-media-background-height: 125.758%; --tesae-deadline-media-background-left: -51.875%; --tesae-deadline-media-background-top: -18.065%; --tesae-deadline-media-foreground-wrap-width: 89.1667%; --tesae-deadline-media-foreground-width: 170.327%; --tesae-deadline-media-foreground-height: 125.758%; --tesae-deadline-media-foreground-left: -70.327%; --tesae-deadline-media-foreground-top: -18.065%; --tesae-deadline-media-wash-width: 100%; --tesae-deadline-media-wash-height: 96.9697%; --tesae-deadline-media-wash-opacity: 0.78; --tesae-deadline-media-shade-top: 19.697%; --tesae-deadline-media-shade-height: 80.303%; --tesae-deadline-mobile-copy-height: 225px; --tesae-deadline-mobile-copy-top: 23px; --tesae-deadline-mobile-media-height: 502px; --tesae-deadline-mobile-media-bleed: 3px; --tesae-deadline-mobile-media-background-width: 210.704%; --tesae-deadline-mobile-media-background-height: 120.046%; --tesae-deadline-mobile-media-background-left: -99.067%; --tesae-deadline-mobile-media-background-top: -20.046%; --tesae-deadline-mobile-media-foreground-wrap-width: 100%; --tesae-deadline-mobile-media-foreground-width: 211.24%; --tesae-deadline-mobile-media-foreground-height: 120.046%; --tesae-deadline-mobile-media-foreground-left: -99.319%; --tesae-deadline-mobile-media-foreground-top: -20.046%; --tesae-deadline-mobile-media-wash-width: 98.9899%; --tesae-deadline-mobile-media-wash-height: 51.1952%; --tesae-deadline-mobile-media-shade-top: 27.2908%; --tesae-deadline-mobile-media-shade-height: 72.7092%; --tesae-deadline-mobile-countdown-overlap: 365px; --tesae-deadline-mobile-countdown-height: 320px; --tesae-deadline-mobile-status-height: 49px; /* Figma 1125:2006, measured from the media block's top (390 wide, 502 tall): panel 346x89 at x22/y261, its label at x26/cap238, button 171x47 at x109.5/y379.7. The panel's inset (22) and the label's (26) genuinely differ in the frame. */ --tesae-deadline-mobile-panel-inset: 22px; --tesae-deadline-mobile-label-inset: 4px; /* on top of the panel's, to reach 26 */ --tesae-deadline-mobile-label-top: 94.7px; --tesae-deadline-mobile-panel-height: 89px; /* The frame fills this panel with white at 10% over a blurred backdrop. It is its own token because --tesae-overlay-white-10 is the solid slab the desktop panel wants, and glass needs something for the blur to tint. */ --tesae-deadline-mobile-panel-glass: rgba(255, 255, 255, 0.1); --tesae-deadline-mobile-panel-gap: 9.1px; --tesae-deadline-mobile-divider-height: 51.4px; --tesae-deadline-mobile-button-gap: 29.7px; --tesae-deadline-mobile-button-width: 171px; --tesae-deadline-mobile-button-height: 47px; /* The mobile frame runs the top fade to solid white so the photograph dissolves into the copy above it; desktop keeps its 0.78. */ --tesae-deadline-mobile-wash-opacity: 1; /* Status strip: label at x20, the "69 Ημέρες" group ending 31 from the right. */ --tesae-deadline-mobile-status-pad-start: 20px; --tesae-deadline-mobile-status-pad-end: 31px; --tesae-deadline-mobile-status-value-size: 22px; --tesae-why-desktop-height: 714px; --tesae-why-desktop-top: 164px; --tesae-why-desktop-title-gap: 45px; --tesae-why-desktop-card-height: 394px; --tesae-why-mobile-top: 88px; --tesae-why-mobile-bottom: 72px; --tesae-logos-desktop-height: 346px; --tesae-logos-desktop-start: 26px; --tesae-logo-desktop-default-slide-width: 260px; --tesae-logo-desktop-default-width: 220px; --tesae-logo-desktop-default-height: 116px; --tesae-logo-desktop-mpf-slide-width: 202px; --tesae-logo-desktop-mpf-width: 167px; --tesae-logo-desktop-mpf-height: 116px; --tesae-logo-desktop-life-slide-width: 286px; --tesae-logo-desktop-life-width: 244px; --tesae-logo-desktop-life-height: 116px; --tesae-logo-desktop-tarax-slide-width: 313px; --tesae-logo-desktop-tarax-width: 243px; --tesae-logo-desktop-tarax-height: 75px; --tesae-logo-desktop-tarax-image-width: 258px; --tesae-logo-desktop-tarax-image-height: 143px; --tesae-logo-desktop-tarax-image-top: -33px; --tesae-logo-desktop-built-slide-width: 316px; --tesae-logo-desktop-built-width: 239px; --tesae-logo-desktop-built-height: 82px; --tesae-logo-desktop-presto-slide-width: 197px; --tesae-logo-desktop-presto-width: 119px; --tesae-logo-desktop-presto-height: 144px; --tesae-logo-desktop-deli-slide-width: 207px; --tesae-logo-desktop-deli-width: 121px; --tesae-logo-desktop-deli-height: 118px; /* CHANGE (20 August 2026) — the mobile logo wall is gone. It used to be one composition drawn on a 390x219 frame: six logos pinned to their own pixel, in cqw so the wall scaled as a piece, capped at 640 and centred. Nothing moved. Mobile now runs the desktop marquee twice — one row left, one row right, half a set out of phase — so all six logos pass a phone instead of sitting still, and roughly six are on screen at any moment. Every box on those rows is the desktop box times the scale below, so there is one number here instead of the twenty-six position tokens the wall needed. 0.52 is not a guess: it is the ratio the 390 frame already drew its logos at against the desktop slider — mpf 87x60 against 167x116, life 127x60 against 244x116, tarax 127x39 against 243x75, and so on for all six, every one of them 0.517-0.524. It stays a plain number rather than a clamp because a marquee is clipped by `.slick-list` and so cannot overflow at any width, and because the frame's own logo size reads better on a tablet than logos grown to fill it. Two rows of the tallest box (presto, 144 * 0.52 = 74.88) plus the gap and the padding put the section at 217.8 tall at 390 — the 219 the wall occupied. */ --tesae-logos-mobile-scale: 0.52; --tesae-logos-mobile-row-gap: 16px; --tesae-logos-mobile-pad: 26px; /* Mobile app — desktop node 1040:1712 and mobile frame 882:550. */ --tesae-app-desktop-min-height: 1321px; --tesae-app-mobile-min-height: 1343px; --tesae-app-divider-inset: clamp(46.45px, 4.6875vw, 90px); --tesae-app-divider-top: 268px; --tesae-app-divider-width: 1px; --tesae-app-wordmark-left: clamp(42.32px, 4.2708vw, 82px); --tesae-app-wordmark-top: 149px; --tesae-app-wordmark-width: clamp(215.0239px, 12.0534vw + 95.5746px, 327px); --tesae-app-title-left: clamp(45.42px, 4.5833vw, 88px); /* CSS line boxes carry more leading than Figma's trimmed text bounds. */ --tesae-app-title-top: 314px; --tesae-app-title-width: clamp(303px, 18.9451vw + 115.254px, 479px); --tesae-app-body-left: var(--tesae-app-title-left); --tesae-app-body-top: 468px; --tesae-app-body-width: clamp(335.2359px, 27.6388vw + 61.3357px, 592px); --tesae-app-badge-left: clamp(36.13px, 3.6458vw, 70px); --tesae-app-badge-top: 667px; --tesae-app-badge-width: clamp(188.632px, 8.2205vw + 107.1673px, 265px); --tesae-app-media-left: clamp(284.31px, 28.6923vw, 550.892px); --tesae-app-media-top: -50px; --tesae-app-media-width: clamp(500.8296px, 34.22vw + 161.7099px, 818.733px); --tesae-app-media-ratio: 818.716 / 1059.143; --tesae-app-backdrop-inner-width: 98.8104%; --tesae-app-backdrop-inner-height: 99.2944%; --tesae-app-backdrop-crop-left: -64.91%; --tesae-app-backdrop-crop-width: 231.11%; --tesae-app-backdrop-rotation: -0.53deg; --tesae-app-device-left: 26.9617%; --tesae-app-device-top: 10.844%; --tesae-app-device-width: 48.6336%; --tesae-app-device-height: 78.8846%; --tesae-app-device-rotation: -0.07deg; --tesae-app-screen-inset-top: 12.282%; --tesae-app-screen-inset-right: 26.098%; --tesae-app-screen-inset-bottom: 11.378%; --tesae-app-screen-inset-left: 28.534%; /* 45px at 1920, and it stays the same share of the screen box all the way down — asked for that way, and the old clamp did not do it: it ran 56 -> 29 while the box only ran 371.45 -> 227.39, so the corner's share fell from 15.1% to 12.8% and the rounding flattened out as the phone shrank. The box is linear in the viewport across the desktop range (slope 0.15522px per px, measured at 992/1024/1100/1280/1440/1550/1700/1920) and caps at 371.453 above 1920, so a plain vw clamp is enough to hold a constant ratio: 45 / 371.453 = 12.1146%, which lands on 27.55px at 992. Verified — the ratio reads 0.1212 at 1024, 1280, 1550 and 1920 alike. The max caps with the box; mobile pins its own below. */ --tesae-app-screen-radius: clamp(27.55px, 1.8804vw + 8.8966px, 45px); /* The screen's play control. Every size here is a share of the screen box rather than a length, so one set of numbers covers both breakpoints: the box already carries its own per-breakpoint insets, so a percentage of it scales the disc from 78px at 1920 down to ~47px on a phone with nothing to restate in the mobile block. The scrim only sits over the poster while the clip is stopped — it is what makes the mark read against a screenshot of a white app UI — and fades out on play. */ --tesae-app-play-size: 40%; --tesae-app-play-mark-width: 65%; /* The neutral translucent disc is deliberate: it is what Figma itself draws over the screen, because `Rectangle 3490` carries a VIDEO fill on both frames (`723:3541` mobile, `882:1602` desktop, same imageRef) and Figma paints its player control on any video-filled node. That control is editor chrome, not a layer in the file — the node tree has nothing at that position — but it is the reference that was asked for. Swapping these three lines back to --tesae-color-primary / -dark and a shadow is all it takes to return to a brand-green disc. */ --tesae-app-play-bg: var(--tesae-overlay-black-50); --tesae-app-play-bg-hover: var(--tesae-overlay-black-65); --tesae-app-play-shadow: none; --tesae-app-play-scrim: var(--tesae-overlay-black-23); --tesae-app-play-hover-scale: 1.06; --tesae-app-play-hidden-scale: 0.7; /* The desktop composition remains three-column down to 992px. Keep the checklist clear of the phone and give its wrapping copy enough measure until the dedicated mobile composition takes over at 991px. */ --tesae-app-features-left: clamp(680px, 65.625vw + 29px, 1289px); --tesae-app-features-top: 331px; --tesae-app-features-width: clamp(312px, 14.6552vw + 166.6207px, 448px); --tesae-app-features-height: 454px; --tesae-app-feature-line-height: 1.34; --tesae-app-feature-text-inset: clamp(33px, 3.014vw + 3.1313px, 61px); --tesae-app-feature-icon-width: clamp(22px, 1.378vw + 8.344px, 34.8016px); --tesae-app-feature-icon-height: clamp(20.0725px, 1.1453vw + 8.7229px, 30.712px); --tesae-app-feature-icon-bleed: -1px; --tesae-app-feature-text-shift: -6px; --tesae-app-feature-receipt-top: 0px; --tesae-app-feature-viber-top: 96px; --tesae-app-feature-online-top: 191.19px; --tesae-app-feature-email-top: 289px; --tesae-app-feature-history-top: 360px; --tesae-app-feature-print-top: 430px; --tesae-app-feature-receipt-width: clamp(245px, 6.0345vw + 185.138px, 301px); --tesae-app-feature-viber-width: clamp(270px, 12.6078vw + 144.931px, 387px); --tesae-app-feature-online-width: clamp(235px, 3.2489vw + 202.771px, 265.15px); --tesae-app-feature-email-width: clamp(240px, 8.8362vw + 152.345px, 322px); --tesae-app-feature-history-width: clamp(230px, 8.0819vw + 149.827px, 305px); --tesae-app-feature-print-width: clamp(200px, 2.2629vw + 177.55px, 221px); --tesae-app-feature-receipt-icon-top: -6.718px; --tesae-app-feature-viber-icon-top: -7.353px; --tesae-app-feature-online-icon-top: -6.153px; --tesae-app-feature-email-icon-top: -7.572px; --tesae-app-feature-history-icon-top: -6.792px; --tesae-app-feature-print-icon-top: -7.063px; --tesae-app-feature-history-nudge: -2px; --tesae-app-mobile-wordmark-top: 81px; --tesae-app-mobile-wordmark-width: 215.0239px; --tesae-app-mobile-title-top: 153px; --tesae-app-mobile-title-width: 303px; --tesae-app-mobile-body-top: 236px; --tesae-app-mobile-body-width: 335.2359px; --tesae-app-mobile-content-side: 10px; --tesae-app-mobile-media-top: 299.6335px; --tesae-app-mobile-media-width: 500.8296px; --tesae-app-mobile-media-offset: -8.3803px; --tesae-app-mobile-screen-inset-top: 12.3661%; --tesae-app-mobile-screen-inset-right: 25.9819%; --tesae-app-mobile-screen-inset-bottom: 11.9467%; --tesae-app-mobile-screen-inset-left: 28.9467%; /* The mobile frame's own corner. It used to fall out of the desktop clamp's minimum; now that the clamp is anchored on the desktop ratio it has to be stated. On a 225.75 box this is 12.85%, near enough to the desktop's 12.11% that the breakpoint step is 1.45px. */ --tesae-app-mobile-screen-radius: 29px; --tesae-app-mobile-features-left: 10px; --tesae-app-mobile-features-right: 9.2502px; /* 390 - 10 - 9.2502. The two columns and the divider inside are pinned to Figma's pixels and do not move, so letting the list stretch with the section only opened empty space to the right of them — it keeps this width and centres instead. */ --tesae-app-mobile-features-width: 345px; --tesae-app-mobile-features-top: 927px; --tesae-app-mobile-features-height: 276px; --tesae-app-mobile-feature-divider-left: 179px; --tesae-app-mobile-feature-divider-width: 0.2px; --tesae-app-mobile-feature-icon-box-width: 25px; --tesae-app-mobile-feature-icon-box-height: 26px; --tesae-app-mobile-feature-icon-bg-size: 21px; --tesae-app-mobile-feature-icon-bg-left: 4px; --tesae-app-mobile-feature-icon-bg-top: 5px; --tesae-app-mobile-feature-icon-top: -4px; --tesae-app-mobile-feature-icon-bleed: 0px; --tesae-app-mobile-feature-text-shift: -3px; --tesae-app-mobile-online-left: 31px; --tesae-app-mobile-online-top: 13px; --tesae-app-mobile-online-width: 122px; --tesae-app-mobile-online-icon-left: -31px; --tesae-app-mobile-receipt-left: 226.7498px; --tesae-app-mobile-receipt-top: 13px; --tesae-app-mobile-receipt-width: 115px; --tesae-app-mobile-receipt-icon-left: -33px; --tesae-app-mobile-viber-left: 30.7498px; --tesae-app-mobile-viber-top: 115px; --tesae-app-mobile-viber-width: 148px; --tesae-app-mobile-viber-icon-left: -30.7498px; --tesae-app-mobile-email-left: 228.7498px; --tesae-app-mobile-email-top: 97px; --tesae-app-mobile-email-width: 133px; --tesae-app-mobile-email-icon-left: -34.75px; --tesae-app-mobile-history-left: 228px; --tesae-app-mobile-history-top: 167px; --tesae-app-mobile-history-width: 142.7498px; --tesae-app-mobile-history-icon-left: -34px; --tesae-app-mobile-print-left: 228px; --tesae-app-mobile-print-top: 233px; --tesae-app-mobile-print-width: 114px; --tesae-app-mobile-print-icon-left: -34px; --tesae-app-mobile-badge-top: 1214.6304px; --tesae-app-mobile-badge-width: 188.632px; /* API panel — Figma group 882:1998, a 1748x681 panel inside the 1920 frame. Every offset below is a share of the panel *width*, so the whole composition (green wash, photo crop, copy inset) scales with the panel instead of holding 1920 pixels on a laptop. */ --tesae-api-panel-ratio: 1748 / 681; --tesae-api-desktop-overlap: 363px; --tesae-api-content-left: 3.605%; /* 63 / 1748 */ /* Figma hugs the first line's ascent, CSS adds half-leading above it, so the copy inset is measured to the *ink* (4153) rather than to the text box (4156). */ --tesae-api-content-top: 7.380%; /* 129 / 1748 */ --tesae-api-content-bottom: 4.291%; /* 75 / 1748 */ --tesae-api-copy-gap: 2.975%; /* 52 / 1748 */ --tesae-api-cta-gap: 3.375%; /* 59 / 1748 */ /* Copy columns follow the *type* scale, not the panel width. A plain share of the panel shrinks faster than clamped type does, which pushes the title onto a third line around 1550 and stretches the panel; matching the slope keeps the Figma line breaks — 2 title lines, 6 copy lines — at every desktop width. */ --tesae-api-title-width: clamp(420px, 17.457vw + 246.8px, 582px); /* 582 @1920 */ --tesae-api-text-width: clamp(487px, 19.828vw + 290.3px, 671px); /* 671 @1920 */ /* Green: solid to the edge of Rectangle 4135, then the gradient of Rectangle 4124 runs out at 1694px. */ --tesae-api-wash-solid: 33.524%; /* 586 / 1748 */ --tesae-api-wash-fade: 96.911%; /* 1694 / 1748 */ /* Background crop (882:1999). Its own left third falls outside the source, which is exactly the part the solid green covers. */ --tesae-api-background-left: 33.64%; --tesae-api-background-width: 128.89%; --tesae-api-background-shift: -6.884%; /* -103px of its own 1502px height */ /* Cut-out (882:2002). Bottom-flush with the panel; its 748px box is taller than the panel, so the head overflows the top edge — that is the design. */ --tesae-api-foreground-wrap-left: 40%; --tesae-api-foreground-wrap-width: 59.67%; --tesae-api-foreground-wrap-ratio: 1043 / 748; --tesae-api-foreground-width: 402.12%; --tesae-api-foreground-height: 374.26%; --tesae-api-foreground-left: -94.76%; --tesae-api-foreground-top: -55.26%; /* Mobile — Figma group 2629 on the 390 frame: a 368x584 panel. */ --tesae-api-mobile-panel-height: 584px; --tesae-api-mobile-panel-gutter: 11px; --tesae-api-mobile-title-top: 56px; --tesae-api-mobile-title-width: 66.58%; /* 245 / 368 */ --tesae-api-mobile-copy-top: 300px; --tesae-api-mobile-background-width: 229.68%; /* 845 / 368, height follows */ /* The cut-out starts at the frame's top (4012) while the panel's rounded photo starts at 4026.04, so her head breaks 14 above the card's edge. The scrim and the green wash both begin at the panel top, which is why the part that overhangs stays undarkened — same as the frame. Her box is 336 x 415 at (32, -14.04) in a 368 panel, and all four are cqw against that 368 so she scales with the card and stays put. A percentage width over a fixed height — which is what this was — keeps the box growing sideways only, and the picture inside it slides out of frame as the section widens. */ --tesae-api-mobile-foreground-rise: -3.8152cqw; /* -14.04 / 368 */ /* Room for the overhang above the card. Deliberately px, not cqw: this one is set *on* the panel, and an element cannot query its own container — the cqw would fall back to viewport units and open the clip by the wrong amount. Her rise is 3.8152cqw of a panel that never exceeds ~969, so 60 clears it at every width. */ --tesae-api-mobile-clip-rise: -60px; --tesae-api-mobile-foreground-wrap-left: 8.6957cqw; /* 32 / 368 */ --tesae-api-mobile-foreground-wrap-width: 91.3043cqw; /* 336 / 368 */ --tesae-api-mobile-foreground-wrap-height: 112.7717cqw; /* 415 / 368 */ --tesae-api-mobile-foreground-width: 478.76%; --tesae-api-mobile-foreground-height: 258.8%; --tesae-api-mobile-foreground-left: -112.2%; --tesae-api-mobile-foreground-top: -39.52%; /* Figma 763:4572. The copy sits 22 in, not on the 16 gutter the rest of the page uses, and the button is the frame's own 179.13 x 47. */ --tesae-api-mobile-inset: 22px; --tesae-api-mobile-button-width: 179.13px; --tesae-api-mobile-button-height: 47px; /* Two black gradients lie across the photograph — `to black` over 243 and a softer 0.65 over 282. Both are drawn vertical and rotated 90deg, so they run dark at the left, which is what lets the white title read against the picture. They cover the photo's own box (401 tall from y=14) and stop before the green takes over. */ /* 401/368 of the panel, but never taller than the frame's own 401: the wash is solid green from 58% down, so the scrim is invisible past ~339 anyway, and letting it grow to the panel's foot only put dark pixels under the rounded bottom edge. */ --tesae-api-mobile-scrim-height: min(108.9674cqw, 401px); /* The clip lands a hair inside the wash, so the two antialiased curves cannot leave a dark seam between them. */ --tesae-api-mobile-clip-inset: 1px; --tesae-api-mobile-scrim-hard: 66%; /* 243 / 368 */ --tesae-api-mobile-scrim-soft: 76.6%; /* 282 / 368 */ --tesae-tx-desktop-top: 160px; --tesae-tx-desktop-header-width: 910px; --tesae-tx-desktop-header-gap: 70px; /* Cards — Figma group 1000:596: three 553x674 cards, 42px apart. The height is not a token: the copy sets it and the grid levels the three, which is what keeps the card honest when a bullet wraps at a narrower width. */ --tesae-tx-card-gap: clamp(16px, 2.7987vw - 11.734px, 42px); /* 42 -> 16 */ --tesae-tx-card-pad: clamp(16px, 3.9828vw - 23.290px, 53px); /* 53 -> 16 */ --tesae-tx-copy-top: clamp(16px, 4.6286vw - 29.87px, 59px); /* 59 -> 16 */ --tesae-tx-title-gap: clamp(16px, 2.7987vw - 11.734px, 42px); /* 42 -> 16 */ --tesae-tx-list-gap: clamp(16px, 3.8751vw - 22.41px, 52px); /* 52 -> 16 */ --tesae-tx-bullet-indent: 2.722em; /* 49 / 18 */ --tesae-tx-bullet-icon: 1.4em; /* 25.2 / 18 */ /* The notch is a consequence of the badge, so every part of it is written against the badge's own type size — nothing here is a 1920-only pixel. Ratios are the Figma values over the 45px label: chip 124x75, inset 18, drop 10.3. */ --tesae-tx-chip-w: calc(var(--tesae-fs-h2) * 2.7556); --tesae-tx-chip-h: calc(var(--tesae-fs-h2) * 1.6667); --tesae-tx-notch-inset: calc(var(--tesae-fs-h2) * 0.4); --tesae-tx-notch-drop: calc(var(--tesae-fs-h2) * 0.2289); /* Mobile draws the same notch smaller, and puts the expand control in it. */ --tesae-tx-mobile-chip-w: 50px; --tesae-tx-mobile-chip-h: 49px; --tesae-tx-mobile-notch-inset: 9px; --tesae-tx-mobile-notch-drop: 7px; --tesae-tx-mobile-top: 88px; --tesae-tx-mobile-header-gap: 34px; --tesae-tx-mobile-bottom: 105px; --tesae-tx-mobile-grid-gap: 16px; --tesae-mobile-control-size: 34px; --tesae-mobile-tx-min-height: 155px; --tesae-fs-tx-code-mobile: 32px; --tesae-fs-tx-title-mobile: 24px; --tesae-solution-desktop-top: 170px; --tesae-solution-desktop-bottom: 9px; /* Solution — Figma group 1001:597: a 1744x585 panel split down the middle, with the figure standing 77px proud of the top edge. Everything is a share of the panel width so the composition holds as the panel narrows. */ --tesae-solution-panel-ratio: 1744 / 585; /* The copy insets are shares of the green half (872), because that half is the element they are declared on. */ --tesae-solution-copy-left: 9.060%; /* 79 / 872, past the halfway line */ --tesae-solution-copy-top: 9.748%; /* 85 / 872 */ --tesae-solution-title-width: 540px; --tesae-solution-text-width: 679px; --tesae-solution-title-gap: 6.823%; /* 59.5 / 872 */ --tesae-solution-cta-gap: 6.227%; /* 54.3 / 872 */ --tesae-solution-wash: 0.59; /* black over the room photograph */ --tesae-solution-ghost: 0.23; /* the copy of the word in front */ /* The word is sized off the half it sits in, not off the viewport. Its clamp took it from 110.7 to 43 (2.57x) while the panel only narrows 1744 -> 960 (1.8x), so the word fell away from the split it is drawn to overrun: 31px of slack at 1700, 95 at 1280. In cqw against .tesae-solution__media it keeps the frame's proportion at every desktop width. 110.7 / 872 of the half. Mobile sets its own — the panel is one column there and the container is the full width. */ --tesae-solution-display-size: 12.6950cqw; /* Figma outlines the ghosted copy in solid white, ~2px against the 110.7 type, which is what keeps it legible where it crosses him. In em so it follows the size. */ --tesae-solution-ghost-stroke: 0.018em; /* Background photograph: the same crop and scale the cut-out uses. */ --tesae-solution-photo-left: -20.30%; /* -177 / 872 */ --tesae-solution-photo-width: 147.77%; --tesae-solution-photo-shift: -14.32%; /* of its own height */ /* Cut-out figure, measured against the media half. */ --tesae-solution-cutout-left: 20.41%; /* 178 / 872 */ --tesae-solution-cutout-width: 65.37%; /* 570 / 872 */ --tesae-solution-cutout-ratio: 570 / 662; /* The cut-out is the same frame as the photograph with the room removed, so it has to land on the same crop — anything else prints the man twice. (Figma's own imageTransform for this rect reads 54px off, because the rect carries a 180° rotation the API reports separately; the render shows them coinciding.) */ --tesae-solution-cutout-img-left: -62.28%; /* -355 / 570 */ --tesae-solution-cutout-img-top: -6.95%; --tesae-solution-cutout-img-width: 226.07%; --tesae-solution-cutout-img-height: 129.76%; --tesae-solution-display-top: 33.162%; /* 194 / 585 — puts the cap-top on the frame's 202, measured, not computed */ /* Figma 882:1773 sets the word's frame at x=85 against a panel at x=88, i.e. it starts 3px OUTSIDE the dark half and the surface's clip eats that overhang — which is what lands the O's stem exactly on the panel edge instead of 3px inside it. The box is 890 wide there, wider than the 872 half it sits in, so the first line overruns the split and is cut by it. Both as shares of the half, so they follow it down. */ --tesae-solution-display-left: -0.344%; /* -3 / 872 */ --tesae-solution-display-width: 102.064%; /* 890 / 872 */ --tesae-solution-mobile-height: 592px; /* Figma 755:4561 — relative to the panel's top-left. The frame draws the display word again (the older one left this half empty); only the photograph is gone. --tesae-fs-display already clamps to the frame's 43px and --tesae-ls-display's -0.05em is its -2.15px, so only the line height differs from desktop. */ --tesae-solution-mobile-display-lh: 0.96; --tesae-solution-mobile-display-top: 75.7px; /* line box, so the caps land at 86 */ --tesae-solution-mobile-display-inset: 22px; --tesae-solution-mobile-copy-inset: 21.25px; --tesae-solution-mobile-text-inset: 3px; /* the body is inset 24.25, not 21.25 */ --tesae-solution-mobile-title-gap: 33.2px; --tesae-solution-mobile-text-gap: 28.8px; --tesae-solution-mobile-button-gap: 48.1px; --tesae-solution-mobile-button-width: 179.13px; --tesae-solution-mobile-button-height: 47px; --tesae-industries-desktop-header-gap: 77px; --tesae-industries-desktop-bottom: 5px; /* Cards — Figma group 1002:598: four 402x452 cards, 45px apart, each with the same notched corner the B2C/B2B/B2G cards use, holding an icon instead of a label. */ --tesae-ind-card-gap: clamp(16px, 3.1216vw - 14.94px, 45px); /* 45 -> 16 */ --tesae-ind-card-pad: clamp(16px, 2.7987vw - 11.73px, 42px); /* 42 -> 16 */ /* The copy runs closer to the right edge than to the left one — Figma sets the text boxes 344 wide inside a 402 card, so the inset is not symmetric. */ --tesae-ind-card-pad-end: clamp(12px, 0.4306vw + 11.73px, 16px); /* 16 -> 12 */ --tesae-ind-card-bottom: clamp(16px, 1.3993vw + 2.13px, 29px); /* 29 -> 16 */ --tesae-ind-copy-top: clamp(16px, 2.6911vw - 10.67px, 41px); /* 41 -> 16 */ --tesae-ind-title-gap: clamp(12px, 2.5834vw - 13.60px, 36px); /* 36 -> 12 */ --tesae-ind-cta-gap: clamp(12px, 2.6911vw - 14.67px, 37px); /* 37 -> 12 */ /* Badge and notch. The chip lands on the mobile frame's own 50x49 at 991, so the two frames meet rather than jumping. */ --tesae-ind-chip-w: clamp(50px, 0.8396vw + 41.68px, 57.8px); --tesae-ind-chip-h: clamp(49px, 0.8719vw + 40.36px, 57.1px); --tesae-ind-notch-inset: clamp(9px, 0.1292vw + 7.72px, 10.2px); --tesae-ind-notch-drop: clamp(9px, 0.2153vw + 6.87px, 11px); --tesae-ind-icon-size: 50%; --tesae-industries-mobile-top: 88px; --tesae-industries-mobile-header-gap: 50px; --tesae-industries-mobile-card-height: 123px; --tesae-industries-mobile-grid-gap: 16px; --tesae-industries-mobile-bottom: 64px; /* Mobile card — Figma 723:3629, card 348.16x123. The chip is Rectangle 294, 50x48.8 flush in the card's top-right corner, and the cut-out is Rectangle 52, 60x57.6 — the same badge and the same notch as the desktop card. --tesae-ind-chip-w/h and --tesae-ind-notch-inset/drop already clamp to 50/49 and 9/9 at 991px, giving a 59x58 notch, so mobile needs no sizes of its own: it reuses the desktop tokens and the desktop three-rectangle .tesae-notch. Only the +/- glyph is mobile-only. */ --tesae-ind-mobile-plus-w: 24px; --tesae-ind-mobile-plus-h: 21px; /* Icon 20 from the left, 22 from the top, ~23 square; title box starts at 57.98. */ --tesae-ind-mobile-pad-x: 20px; --tesae-ind-mobile-pad-top: 22px; --tesae-ind-mobile-icon-size: 23px; --tesae-ind-mobile-icon-gap: 15px; /* CTA row: chevron at x=18, label at x=40, baseline block at y=93 in a 123 card. */ --tesae-ind-mobile-cta-inset: 18px; --tesae-ind-mobile-cta-gap: 8px; --tesae-ind-mobile-cta-bottom: 18px; --tesae-ind-mobile-chevron-w: 11px; /* Figma sets the card titles ~121-137 wide in a 348 card, so they wrap to two lines well before the notch. The cap keeps that wrap without a fixed width. */ --tesae-ind-mobile-title-max: 16ch; /* Open card — Figma 723:3679. It inverts to black with white type, the same swap the desktop card makes on hover, and the answer runs at 14/1.6 in a box the frame keeps 52 clear of the card's right edge. */ --tesae-ind-mobile-text-size: 14px; --tesae-ind-mobile-text-end: 44px; /* leaves the frame's 274-wide answer box */ --tesae-ind-mobile-text-top: 26.8px; --tesae-ind-mobile-text-bottom: 12px; /* The open card sits tighter under its CTA than the closed one — 252 against the 18px floor a closed 123 card keeps. */ --tesae-ind-mobile-open-bottom: 10.5px; /* Card title: 28px on the desktop frame, 18px on the mobile one — neither --tesae-fs-h3 nor --tesae-fs-body-lg lands on 18 at 991, so the card carries its own clamp. 28 @1920 -> 18 @991, flat below. */ --tesae-fs-ind-card-title: clamp(18px, 1.0764vw + 7.333px, 28px); /* The CTA is 16px bold on both frames, so it needs no clamp. */ --tesae-ind-mobile-cta-size: 16px; /* Mobile bottom bar — Figma 723:3738, a 390x60 band pinned to the foot of the frame. The four items sit on equal columns: Figma centres them at 59.75, 147.75, 236.25 and 329.75 in a 390 frame, which is 4 columns of ~90 inside a ~15 inset. Icons top out 11 from the band's top and the labels' cap line lands at 38. */ --tesae-bottombar-height: 60px; --tesae-bottombar-pad-x: 15px; --tesae-bottombar-pad-top: 11px; --tesae-bottombar-icon-size: 19px; --tesae-bottombar-icon-gap: 8px; --tesae-bottombar-label-size: 11px; --tesae-faq-mobile-top: 20px; --tesae-faq-mobile-bottom: 80px; --tesae-faq-mobile-title-gap: 0; --tesae-faq-mobile-item-height: 93px; --tesae-faq-mobile-tall-item-height: 123px; --tesae-faq-mobile-medium-item-height: 100px; --tesae-faq-mobile-open-height: 267px; --tesae-faq-mobile-showmore-gap: 20.5px; /* Figma 723:3470 draws the plus as a 24 x 21 glyph and the minus as a 24-wide line, so the horizontal arm is longer than the vertical one. The build had both at 12, which is why the marks read half-size. */ --tesae-faq-mobile-icon-size: 24px; --tesae-faq-mobile-mark-width: 24px; --tesae-faq-mobile-mark-height: 21px; --tesae-faq-desktop-width: 1508px; --tesae-faq-desktop-title-gap: 68px; --tesae-faq-desktop-item-height: 97px; --tesae-faq-desktop-open-height: 227px; --tesae-faq-desktop-item-gap: 23px; --tesae-faq-desktop-showmore-gap: 35px; --tesae-form-desktop-container: 1508px; --tesae-form-desktop-width: 1502px; --tesae-form-desktop-columns: minmax(0, 507fr) minmax(0, 651fr); --tesae-form-desktop-gap: clamp(48px, 11.1948vw - 62.941px, 152px); --tesae-form-desktop-min-height: 700px; --tesae-form-desktop-viewport-gutter: clamp(0px, -1.7223vw + 33.067px, 16px); --tesae-form-section-top: clamp(0px, 13.1324vw - 130.142px, 122px); --tesae-form-section-bottom: clamp(18px, 12.2713vw - 103.608px, 132px); --tesae-form-desktop-background-depth: 389px; --tesae-form-panel-padding-inline: clamp(26px, 7.535vw - 48.672px, 96px); --tesae-form-panel-padding-top: clamp(82px, 1.507vw + 67.066px, 96px); --tesae-form-panel-padding-bottom: clamp(78px, 1.6146vw + 62.001px, 93px); --tesae-form-desktop-text-width: 495px; --tesae-form-copy-gap: clamp(22px, 1.1841vw + 10.267px, 33px); --tesae-form-column-gap: clamp(24px, 1.8299vw + 5.864px, 41px); --tesae-form-field-step: clamp(72px, 1.7223vw + 54.932px, 88px); --tesae-form-control-height: clamp(32px, 0.9688vw + 22.4px, 41px); --tesae-form-control-padding-inline: 2px; --tesae-form-textarea-height: clamp(130px, 1.0764vw + 119.333px, 140px); --tesae-form-textarea-row-shift: clamp(-2px, -0.2153vw + 2.134px, 0px); --tesae-form-textarea-padding-top: 5px; --tesae-form-footer-margin: 50px; --tesae-form-consent-top: 23px; --tesae-form-consent-left: 2px; --tesae-form-consent-gap: clamp(8px, 0.2153vw + 5.866px, 10px); --tesae-form-consent-text-shift: clamp(-3px, -0.1076vw - 0.933px, -2px); --tesae-form-checkbox-width: clamp(16px, -0.1076vw + 18.067px, 17px); --tesae-form-checkbox-height: 14px; /* The tick drawn inside the box once consent is given: two borders of a rotated rectangle, so it scales with the box and needs no asset. */ --tesae-form-check-width: 5px; --tesae-form-check-height: 9px; --tesae-form-check-stroke: 2px; --tesae-form-rule-width: 0.8px; --tesae-form-rule-color: var(--tesae-color-white); --tesae-form-label-line-height: 1.29; --tesae-form-submit-width: clamp(171px, 7.1044vw + 100.595px, 237px); --tesae-form-submit-height: clamp(47px, 1.0764vw + 36.333px, 57px); --tesae-form-button-hover-shift: -2px; --tesae-form-a11y-size: 1px; --tesae-form-a11y-offset: -1px; --tesae-form-a11y-clip: inset(50%); --tesae-form-mobile-gutter: 11.375px; --tesae-form-mobile-min-height: 1043.5px; --tesae-form-mobile-bottom: 18px; --tesae-form-mobile-padding-x: 23.875px; --tesae-form-mobile-padding-top: 77px; --tesae-form-mobile-padding-bottom: 78px; --tesae-form-mobile-copy-inset: 2px; --tesae-form-mobile-copy-gap: 22px; --tesae-form-mobile-form-gap: 30px; --tesae-form-mobile-field-height: 72px; --tesae-form-mobile-textarea-cell-height: 167px; --tesae-form-mobile-textarea-input-height: 130px; --tesae-form-mobile-footer-height: 103px; --tesae-form-mobile-submit-top: 56px; --tesae-form-mobile-select-width: 17.8988px; --tesae-form-mobile-select-height: 14.6145px; --tesae-form-mobile-select-right: 0px; --tesae-form-mobile-select-top: -1px; --tesae-testimonials-mobile-top: 64px; --tesae-testimonials-mobile-bottom: 0px; --tesae-testimonials-mobile-gutter: 11.38px; --tesae-testimonials-mobile-title-gap: 34px; --tesae-testimonials-mobile-title-shift-x: -3.62px; --tesae-testimonials-mobile-title-shift-y: -6px; /* Figma draws this card 347 x 397.709 with every part pinned to a pixel. Sitting at those pixels is what made a widening section park a fixed card beside its neighbour instead of growing it, so the card is a container and each part is expressed in cqw against that 347 reference — the whole composition scales as one piece. Every value below is / 347 * 100. */ --tesae-testimonial-mobile-ratio: 347 / 397.709; /* Figma 723:3398 sets the cards 347 wide on a 361 pitch, so the next one shows by 17.6 inside the 390 frame. Both are shares of the viewport, so that sliver stays proportional as the section widens instead of opening into a second card. */ --tesae-testimonial-mobile-slide-width: 92.5641vw; /* 361 / 390 */ --tesae-testimonial-mobile-slide-gap: 3.5897vw; /* 14 / 390 */ --tesae-testimonial-mobile-mark-left: 6.9164cqw; --tesae-testimonial-mobile-mark-top: -3.4582cqw; --tesae-testimonial-mobile-mark-width: 15.5620cqw; --tesae-testimonial-mobile-mark-height: 13.5447cqw; --tesae-testimonial-mobile-stars-top: 4.5850cqw; --tesae-testimonial-mobile-stars-right: 4.6110cqw; --tesae-testimonial-mobile-stars-width: 37.7522cqw; --tesae-testimonial-mobile-stars-height: 7.5072cqw; --tesae-testimonial-mobile-quote-left: 7.2046cqw; --tesae-testimonial-mobile-quote-top: 23.7752cqw; --tesae-testimonial-mobile-quote-width: 87.3199cqw; --tesae-testimonial-mobile-quote-height: 53.2954cqw; --tesae-testimonial-mobile-author-left: 6.0519cqw; --tesae-testimonial-mobile-author-top: 88.8242cqw; --tesae-testimonial-mobile-avatar-width: 15.5620cqw; --tesae-testimonial-mobile-avatar-height: 15.4729cqw; --tesae-testimonial-mobile-author-gap: 4.0346cqw; --tesae-testimonial-mobile-text-size: 4.6110cqw; /* the frame's 16px */ /* The quote used to be boxed to the frame's height and clipped, which hid the tail of any copy longer than the drawing allowed. It is a floor now and the card grows, exactly as the desktop card already does. Card height 397.709 of a 390 viewport; vw rather than cqw because a container cannot query itself. */ --tesae-testimonial-mobile-min-height: 101.9767vw; --tesae-testimonial-mobile-quote-gap: 11.7536cqw; /* quote foot to the author */ --tesae-testimonial-mobile-quote-end: 5.4755cqw; /* 347 - 25 - 303 */ --tesae-testimonial-mobile-pad-bottom: 10.3165cqw; --tesae-testimonial-mobile-author-pull: 1.1527cqw; /* author sits 25 - 21 further out */ --tesae-testimonial-mobile-dots-width: 74.437px; --tesae-testimonial-mobile-dot-size: 11.716px; --tesae-testimonial-mobile-dot-gap: 9.191px; --tesae-testimonial-mobile-dots-gap: 38.78px; --tesae-testimonials-desktop-height: 797px; --tesae-testimonials-desktop-title-left: 206px; --tesae-testimonials-desktop-title-top: 128px; --tesae-testimonials-desktop-slider-left: 552px; --tesae-testimonials-desktop-slider-top: 99.27px; --tesae-testimonials-desktop-slider-width: 1809px; --tesae-testimonial-desktop-slide-width: 603px; --tesae-testimonial-desktop-width: 552.517px; --tesae-testimonial-desktop-height: 633.703px; --tesae-testimonial-desktop-mark-left: 37.837px; --tesae-testimonial-desktop-mark-top: -19.8px; --tesae-testimonial-desktop-mark-width: 85.697px; --tesae-testimonial-desktop-mark-height: 74.421px; --tesae-testimonial-desktop-stars-top: 45.61px; --tesae-testimonial-desktop-stars-right: 27.93px; --tesae-testimonial-desktop-stars-width: 208.588px; --tesae-testimonial-desktop-stars-height: 41.479px; --tesae-testimonial-desktop-quote-left: 41px; --tesae-testimonial-desktop-quote-top: 164.7px; --tesae-testimonial-desktop-quote-width: 470px; --tesae-testimonial-desktop-quote-height: 215px; --tesae-testimonial-desktop-author-left: 32.83px; --tesae-testimonial-desktop-author-top: 490.5px; --tesae-testimonial-desktop-avatar-size: 85.697px; --tesae-testimonial-desktop-author-gap: 23.47px; --tesae-testimonial-desktop-dots-left: -347px; --tesae-testimonial-desktop-dots-top: 617.7px; --tesae-testimonial-desktop-dots-width: 99.851px; --tesae-testimonial-desktop-dot-size: 15.716px; --tesae-testimonial-desktop-dot-gap: 12.329px; --tesae-testimonial-desktop-list-bleed: 100px; --tesae-testimonials-desktop-watermark-left: -122px; --tesae-testimonials-desktop-watermark-top: 100px; --tesae-testimonials-desktop-watermark-width: 542px; --tesae-testimonials-desktop-watermark-height: 470px; --tesae-footer-desktop-height: 796px; --tesae-footer-desktop-band-height: 828px; --tesae-footer-desktop-band-width: 120.94%; /* 2322 / 1920 */ --tesae-footer-desktop-band-left: -8.28%; /* -159 / 1920 */ --tesae-footer-desktop-bar-top: 319px; --tesae-footer-desktop-bar-height: 477px; /* Positions inside the black bar, measured from its own top edge. */ --tesae-footer-desktop-socials-top: 130px; --tesae-footer-desktop-links-top: 363px; --tesae-footer-desktop-links-gap: 64px; --tesae-footer-desktop-copy-top: 408px; --tesae-footer-desktop-top-btn-top: 369px; --tesae-footer-desktop-top-btn-width: 57px; --tesae-footer-desktop-top-btn-height: 59px; --tesae-footer-top-arrow-size: 18px; --tesae-footer-top-arrow-stroke: 3px; /* The button shrinks from 57 to 36 between the frames but the arrow did not, so on mobile it filled 71% of the button against Figma's 47%. Scaled to match: the drawn chevron measures 17x9 there, same as the frame. */ --tesae-footer-mobile-top-arrow-size: 12.75px; --tesae-footer-mobile-top-arrow-stroke: 2.1px; /* Figma 1092:1731. The black band starts 132 below the frame top and runs 286, and the photograph is a 848.94 x 331.07 box bleeding 234.37 past the left edge — it is a cut-out, so its lower half is where the band shows through. */ --tesae-footer-mobile-band-height: 132px; --tesae-footer-mobile-bar-height: 286px; /* Mobile — Figma group at the foot of the 390 frame: the photograph straddles the band the same way, and the socials sit left rather than centred. */ --tesae-footer-mobile-gutter: 23px; /* The photograph is not 848.94 x 331.07 — that is the *bounding box* of a 837.43 x 296.87 image rotated -2.36deg. Stretching the picture to the bounding box (which the build did) makes it 11% too tall, so the image keeps its own size and the rotation puts it where Figma draws it. Centre of the bbox is (190.10, 165.54), hence left -228.62 and top 17.10. */ --tesae-footer-mobile-band-top: -21.9px; --tesae-footer-mobile-band-width: 214.73%; /* 837.43 / 390 */ --tesae-footer-mobile-band-rotate: -1.36deg; /* The box has to keep the picture's proportions. Scaling its width while its height stayed at 296.87 pushed the box from 2.82 to 7.17 wide, and object-fit:cover threw away everything outside that — 82.8% of the picture survived at 390, only 32.5% at 991, which is the "zoomed and cut" footer. */ --tesae-footer-mobile-band-ratio: 837.432 / 296.872; /* It stops growing once it is comfortably wider than the breakpoint, so it never reaches down into the socials; past that the viewport simply reveals more of it. */ --tesae-footer-mobile-band-max: 1000px; /* Figma centres the box on 190.1 against the frame's 195. */ --tesae-footer-mobile-band-nudge: -4.9px; /* The rest are measured from the top of the black band. */ --tesae-footer-mobile-socials-top: 153px; --tesae-footer-mobile-social-width: 82px; /* Figma's text y is the cap line (its layers are cap-trimmed); these are the line boxes that land the ink on it — verified against the render, not derived. */ --tesae-footer-mobile-links-top: 207.4px; --tesae-footer-mobile-links-gap: 18px; --tesae-footer-mobile-copy-top: 236.4px; --tesae-footer-mobile-top-btn-top: 154.4px; --tesae-footer-mobile-top-btn-right: 25px; --tesae-footer-mobile-top-btn-width: 36px; --tesae-footer-mobile-top-btn-height: 37px; --tesae-fs-footer-mobile: 12px; --tesae-footer-social-width: clamp(100px, 5.4898vw + 45.595px, 151px); /* Real social links. Figma's mobile group (1026:564) is 181.03 wide for four marks on a 47.56 pitch, so each circle is 38.36 and the gap 9.2; the desktop frame draws the same circles at 68 with a 15 gap. */ --tesae-footer-social-size: clamp(38.4px, 3.1862vw + 6.825px, 68px); /* 68 -> 38.4 */ --tesae-footer-social-gap: clamp(9.2px, 0.6243vw + 3.013px, 15px); /* 15 -> 9.2 */ /* ------------------------------------------------------------ typography */ --tesae-font-primary: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --tesae-fw-extralight: 250; --tesae-fw-light: 300; --tesae-fw-regular: 400; --tesae-fw-medium: 500; --tesae-fw-bold: 700; --tesae-fw-extrabold: 800; /* size desktop -> mobile */ --tesae-fs-display: clamp(43px, 7.2874vw - 29.218px, 110.7px); /* 110.7 -> 43 */ --tesae-fs-stat: clamp(40px, 3.7675vw + 2.664px, 75px); /* 75 -> 40 */ --tesae-fs-h1: clamp(32px, 3.5522vw - 3.202px, 65px); /* 65 -> 32 */ --tesae-fs-h2: clamp(30px, 1.3994vw + 18.132px, 40px); /* 45 -> 32 */ --tesae-fs-h3: clamp(20px, 0.8611vw + 11.466px, 28px); /* 28 -> 20 */ --tesae-fs-h4: clamp(18px, 1.0764vw + 7.333px, 28px); /* 28 -> 18 */ --tesae-fs-body-lg: clamp(16px, 0.6459vw + 9.600px, 22px); /* 22 -> 16 */ --tesae-fs-button: clamp(16px, 0.4306vw + 11.733px, 20px); /* 20 -> 16 */ --tesae-fs-body: clamp(16px, 0.2153vw + 13.866px, 18px); /* 18 -> 16 */ --tesae-fs-small: clamp(12px, 0.4306vw + 9.733px, 18px); /* 18 -> 14 */ --tesae-fs-caption: clamp(12px, 0.6459vw + 5.600px, 18px); /* 18 -> 12 */ --tesae-fs-app-title: clamp(24px, 2.2605vw + 1.5985px, 45px); /* 45 -> 24 */ --tesae-fs-deadline-mobile: 26px; /* unitless so they follow the clamped size */ --tesae-lh-display: 0.84; --tesae-lh-tight: 1.2; --tesae-lh-snug: 1.26; --tesae-lh-normal: 1.5; --tesae-lh-list: 1.43; --tesae-lh-loose: 1.6; --tesae-ls-display: -0.05em; /* -5.535 / 110.7, the display word is tracked tight */ --tesae-ls-tight: 0; --tesae-ls-none: 0; /* --------------------------------------------------------------- spacing */ --tesae-space-3xs: 2px; --tesae-space-2xs: 4px; --tesae-space-xs: 8px; --tesae-space-s: clamp(12px, 0.4306vw + 7.733px, 16px); /* 16 -> 12 */ --tesae-space-m: clamp(16px, 0.6611vw + 7.466px, 24px); /* 24 -> 16 */ --tesae-space-l: clamp(24px, 1.7223vw + 6.932px, 40px); /* 40 -> 24 */ --tesae-space-xl: clamp(32px, 3.4446vw - 2.136px, 64px); /* 64 -> 32 */ --tesae-space-2xl: clamp(48px, 5.1668vw - 3.203px, 96px); /* 96 -> 48 */ --tesae-space-3xl: clamp(64px, 8.1808vw - 17.072px, 140px); /* 140 -> 64 */ --tesae-section-padding: var(--tesae-space-3xl); /* ------------------------------------------------------------- container */ /* Figma gutter is 88px at 1920 -> 1744px of content. */ --tesae-container-max: 1744px; --tesae-gutter: clamp(16px, 7.7503vw - 60.814px, 88px); /* 88 -> 16 */ /* ------------------------------------------------------- component sizes */ --tesae-header-height: clamp(64px, 3.9828vw + 24.531px, 101px); /* 101 -> 64 */ --tesae-logo-height: clamp(48px, 3.6598vw + 11.733px, 82px); /* 82 -> 48 */ --tesae-header-mobile-logo-width: 145px; --tesae-social-size: clamp(24px, 0.6459vw + 17.600px, 30px); /* 30 -> 24 */ --tesae-card-radius: 10px; --tesae-icon-badge: clamp(44px, 1.5070vw + 29.07px, 58px); /* 58 -> 44 */ --tesae-bell-size: clamp(44px, 1.7223vw + 26.93px, 60px); /* 60 -> 44 */ --tesae-hero-height: clamp(520px, 45.2099vw + 71.87px, 940px); /* 940 -> 520 */ --tesae-hero-badge-height: clamp(28px, 1.5070vw + 13.066px, 42px); /* 42 -> 28 */ --tesae-hero-wordmark-height: clamp(38px, 2.1529vw + 16.66px, 58px); /* 58 -> 38 */ /* ----------------------------------------------------------------- radii */ --tesae-radius-xs: 2px; --tesae-radius-s: 7px; --tesae-radius-m: 10px; /* dominant in the design */ --tesae-radius-l: 30px; --tesae-radius-pill: 100px; /* --------------------------------------------------------------- shadows */ --tesae-shadow-card: 0 0 28.4px rgba(0, 0, 0, 0.11); --tesae-shadow-card-soft: 0 4px 13.9px rgba(0, 0, 0, 0.07); --tesae-shadow-lifted: 0 12px 34px rgba(0, 0, 0, 0.12); --tesae-shadow-notification: 0 4px 45.3px rgba(0, 0, 0, 0.68); /* drop-shadow() blur is a standard deviation, so it takes half the box-shadow blur to land on the same softness. Used where the shape is not a plain rectangle. */ --tesae-shadow-card-drop: 0 0 14.2px rgba(0, 0, 0, 0.11); --tesae-shadow-lifted-drop: 0 6px 17px rgba(0, 0, 0, 0.12); --tesae-blur-glass: blur(2px); /* The header's glass is blurred harder than the rest since it went sticky and now has real content moving under it. Its own token, so raising it does not also restyle the mobile countdown box, which shares --tesae-blur-glass. */ --tesae-blur-header: blur(26px); /* ----------------------------------------------------------- transitions */ --tesae-duration: 0.3s; --tesae-duration-slow: 0.6s; --tesae-ease: cubic-bezier(0.4, 0, 0.2, 1); --tesae-transition: var(--tesae-duration) var(--tesae-ease); /* -------------------------------------------------------------- z-layers */ --tesae-z-header: 100; --tesae-z-overlay: 200; --tesae-z-modal: 300; /* Below the burger overlay (200), so opening the menu covers the bar. */ --tesae-z-bottombar: 90; /* Above the page, below the sticky header it parks under. */ --tesae-z-sticky-status: 80; }