/* Boostapp website: design system and components. Hebrew, right to left. Bold and simple: full-bleed photos, giant type, black and white. Palette (chosen by the owner, 27 Oct 2026): black and white, with lime for the call to action. - White page; light grey blocks separate sections; black for heroes, demo bands, closings and the footer. - Text is grey; black (white on black) is the highlight: the second half of a headline, bold lead-ins. - Buttons: lime with black text is the call to action; the second button is black with white text (a white outline on black). - Lime appears on buttons only. No cream, no green. - Product mockups use black, white and greys, so they sit well in any section. - Statuses are small chips with a symbol, never a solid button colour. Type: Almoni (Almoni DL AAA, from the Wix font library: 300, 400, 700) for Hebrew letters, Wix Madefor Display and Text (served from assets/fonts) for numbers and Latin. Almoni's own digits and Latin are drawn much smaller than its Hebrew, so its faces cover the Hebrew block only, and ₪299, 20:00 and "App Store" fall through to Madefor. On Wix both are in the editor's font menu. The B from the logo is a motif: the marker before every label, the icon on the hero's class card, the outline that traces itself on the homepage, and the favicon. */ @font-face { font-family: "Almoni"; font-weight: 300; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src: url("https://static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/open-source/almoni-dl-aaa-300.woff") format("woff"); } @font-face { font-family: "Almoni"; font-weight: 400; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src: url("https://static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/open-source/almoni-dl-aaa-400.woff") format("woff"); } @font-face { font-family: "Almoni"; font-weight: 700; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; src: url("https://static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/open-source/almoni-dl-aaa-700.woff") format("woff"); } /* Until Almoni arrives, Hebrew is drawn in Arial at 92%, Almoni's width (measured on the site's headlines, 31 Oct 2026), so the headlines wrap the same way and nothing moves when Almoni takes over. The system font that drew it before is about 10% wider: the headlines lost a line when Almoni came and moved the page (layout shift up to 0.19). */ @font-face { font-family: "Almoni Fallback"; font-weight: 300 400; size-adjust: 92%; unicode-range: U+0590-05FF, U+FB1D-FB4F; src: local("Arial Hebrew"), local("ArialHebrew"), local("Arial"), local("ArialMT"); } @font-face { font-family: "Almoni Fallback"; font-weight: 500 800; size-adjust: 92%; unicode-range: U+0590-05FF, U+FB1D-FB4F; src: local("Arial Hebrew Bold"), local("ArialHebrew-Bold"), local("Arial Bold"), local("Arial-BoldMT"); } /* Wix Madefor (SIL Open Font License, fonts/OFL.txt), served from the site since 31 Oct 2026: from Google Fonts it held up the first paint by about a second, or, loaded later, moved the headlines when it arrived. Google's variable files, one per character set (₪ is in latin-ext); the pages preload the three the first screen uses. Almoni isn't preloaded: its two files (126 KB, from Wix) held back the first screen; its fallback, above, keeps the lines. */ @font-face { font-family: "Wix Madefor Display"; font-weight: 400 800; font-display: swap; src: url("fonts/madefor-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Wix Madefor Display"; font-weight: 400 800; font-display: swap; src: url("fonts/madefor-display-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Wix Madefor Text"; font-weight: 400 800; font-display: swap; src: url("fonts/madefor-text-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Wix Madefor Text"; font-weight: 400 800; font-display: swap; src: url("fonts/madefor-text-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --card: #FFFFFF; --paper: #FFFFFF; /* White: the page */ --paper-2: #F2F2F3; /* Grey block: every second section; hairlines inside mockups */ --panel-2: #FFFFFF; --ink: #000000; /* Black: the highlight in text, top bar, heroes, dark bands, footer */ --ink-2: #5E5E64; /* Grey text */ --line: #DADADF; --mint: #BAFD4F; /* Lime: the call-to-action button, and nothing else */ --mint-hover: #A8F02E; --mint-ink: #000000; --mint-soft: #E7E7EA; /* Grey chip: statuses in mockups, the quote highlight */ --panel: #E7E7EA; /* Grey panel inside a white or grey block */ --btn-fg: #000000; /* black text on the lime button */ --lime: #BAFD4F; --blue: #000000; --link: #000000; --link-soft: #E7E7EA; /* "sent" chip */ --mute: #A0A0A0; /* grey first half of a headline (the owner's grey) */ --strong: #000000; --strong-soft: #A1A1A6; /* grey text on black cards */ --warn: #000000; /* warnings are a black chip with "!" */ --foot: #000000; --line-dark: rgba(255, 255, 255, .14); --tick-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --tick-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --tick-bg: #000000; --tick-img: var(--tick-white); --h-weight: 700; /* Almoni's heaviest; the giant numbers use Madefor at 800 */ --h-track: -0.02em; --sans: "Almoni", "Almoni Fallback", "Wix Madefor Text", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --display: "Almoni", "Almoni Fallback", "Wix Madefor Display", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --frame: 1200px; --gut: clamp(20px, 4vw, 56px); --sec-y: clamp(72px, 10vw, 136px); --r-btn: 999px; --r-field: 10px; --r-ui: 14px; --r-phone: 34px; /* The black band: heroes, dark sections, closings, the top bar */ --b1-bg: #000000; --b1-text: #FFFFFF; --b1-mute: #A0A0A0; --b1-soft: #A9A9AE; --b1-hi: #FFFFFF; --b1-line: rgba(255, 255, 255, .16); --b1-btn-bg: #BAFD4F; --b1-btn-fg: #000000; --b1-tick-bg: #FFFFFF; --b1-tick-img: var(--tick-ink); --b1-focus: #FFFFFF; } /* Band roles */ :root, .b1 { --band: var(--b1-bg); --band-text: var(--b1-text); --band-mute: var(--b1-mute); --band-soft: var(--b1-soft); --band-hi: var(--b1-hi); --band-line: var(--b1-line); --band-btn-bg: var(--b1-btn-bg); --band-btn-fg: var(--b1-btn-fg); --band-tick-bg: var(--b1-tick-bg); --band-tick-img: var(--b1-tick-img); --band-focus: var(--b1-focus); } /* Cards, phones and notes inside black sections keep black text on white */ .ui-card, .phone, .tile:not(.free), .recipe, .example { color: var(--ink); --band-text: var(--ink); --band-mute: var(--mute); --band-soft: var(--ink-2); --band-hi: #000000; --band-line: var(--line); --band-btn-bg: #000000; --band-btn-fg: #FFFFFF; --band-tick-bg: #000000; --band-tick-img: var(--tick-white); --band-focus: #000000; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 18px/1.6 var(--sans); /* Almoni's Hebrew runs about a tenth smaller than Madefor's; descriptions are 18px across the site */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; /* full-bleed photos never scroll sideways */ } img, svg { display: block; max-width: 100%; } a { color: inherit; } button { font: inherit; color: inherit; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } .num, .tab-num { font-variant-numeric: tabular-nums; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 4px; } .dark :focus-visible, .site-footer :focus-visible { outline-color: var(--band-focus); } .skip { position: absolute; inset-inline-start: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-btn); text-decoration: none; } .skip:focus { top: 12px; } /* ---------- Column: 1200px; sections run edge to edge, no frame lines ---------- */ .wrap { position: relative; max-width: var(--frame); margin: 0 auto; padding: 0 var(--gut); } .sec { overflow-x: clip; } .sec > .wrap { padding-top: var(--sec-y); padding-bottom: var(--sec-y); } .dark { background: var(--band); color: var(--band-text); } .tint { background: var(--paper-2); } /* ---------- Type ---------- */ .display, .h2 { font-weight: var(--h-weight); letter-spacing: var(--h-track); text-wrap: balance; } .display { font-size: clamp(46px, 7vw, 92px); line-height: 1.02; } .h2 { font-size: clamp(40px, 5vw, 64px); line-height: 1.04; } /* section titles: 64px on desktop */ .h3 { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.005em; } :is(.display, .h2, .h3, .gh-title, .tile h3, .price-big b) { font-family: var(--display); } .mute { color: var(--mute); } .dark .mute { color: var(--band-mute); } .lead { font-size: clamp(19px, 1.8vw, 22px); line-height: 1.6; color: var(--ink-2); max-width: 34em; text-wrap: pretty; /* no one-word last lines */ } .dark .lead { color: var(--band-soft); } .body-2 { color: var(--ink-2); } .dark .body-2 { color: var(--band-soft); } .small { font-size: 14px; line-height: 1.55; } .label { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--ink); } /* the marker is the B from the logo */ .label::before { content: ""; width: 11px; height: 14px; flex: none; background: var(--ink); -webkit-mask: url("img/b.svg") center / contain no-repeat; mask: url("img/b.svg") center / contain no-repeat; } .dark .label::before { background: var(--band-hi); } .dark .label { color: var(--band-text); } /* a label can be a co-brand lockup instead: Boostapp's B × Claude (the AI agent's section; Claude's logo from claude.ai) */ .label.co { gap: 12px; } .label.co::before { display: none; } .label.co .co-b { width: 18px; height: 23px; fill: currentColor; } .label.co .co-x { font-size: 20px; font-weight: 400; line-height: 1; opacity: .55; } .label.co .co-claude { width: 103px; height: 22px; fill: currentColor; } .labels { display: flex; flex-wrap: wrap; gap: 8px 22px; } .text-link { color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .text-link:hover { text-decoration-thickness: 2px; } .dark .text-link { color: var(--band-hi); } /* standalone links point on to the next page; links inside a sentence don't */ .text-link::after { content: "←"; display: inline-block; margin-inline-start: 7px; text-decoration: none; transition: transform .15s; } .text-link:hover::after { transform: translateX(-4px); } p .text-link::after { content: none; } @media (prefers-reduced-motion: reduce) { .text-link::after { transition: none; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-btn); border: 1.5px solid transparent; font-weight: 600; font-size: 16px; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .btn-primary { background: var(--mint); color: var(--btn-fg); border-color: transparent; } /* lime, black text: the call to action */ .btn-primary:hover { background: var(--mint-hover); } /* the second button: black with white text; on black, a white outline */ .btn-line, .btn-ink { background: #000000; color: #FFFFFF; border-color: #000000; } .btn-line:hover, .btn-ink:hover { background: #2A2A2D; border-color: #2A2A2D; } .dark .btn-line, .dark .btn-ink { background: transparent; color: var(--band-text); border-color: var(--band-text); } .dark .btn-line:hover, .dark .btn-ink:hover { background: var(--band-text); color: var(--band); border-color: var(--band-text); } .dark .btn-primary { background: var(--band-btn-bg); color: var(--band-btn-fg); border-color: transparent; } .dark .btn-primary:hover { background: var(--mint-hover); } .btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; } .actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); } /* The frosted glass is a layer behind the header, not the header itself: a backdrop-filter on the header makes it the box the phone sheet's position: fixed is measured from, and the sheet opened 48px tall instead of full screen (31 Oct 2026) */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); } .site-header .wrap { display: flex; align-items: center; gap: 28px; height: 68px; } .logo { display: inline-flex; flex: none; } .logo img { height: 26px; width: auto; } .nav { display: flex; align-items: center; gap: 4px; flex: 1; } .nav > a, .nav-item > button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--r-btn); background: none; border: 0; cursor: pointer; font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink); } .nav > a:hover, .nav-item > button:hover, .nav-item > button[aria-expanded="true"] { background: rgba(21, 31, 36, .06); } .nav > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--ink); text-decoration-thickness: 2px; } /* שיתופי פעולה: the one menu link in a gradient, so it stands out (the owner's request, 31 Oct 2026). Blue, violet and the app's magenta, all dark enough to read on white; it starts on the right, where the word starts */ .nav-grad > span { background-image: linear-gradient(270deg, #2B59C3, #7B3FE4 55%, #E6004F); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-weight: 700; } .nav > a.nav-grad:hover { background: rgba(123, 63, 228, .08); } .nav > a.nav-grad[aria-current="page"] { text-decoration-color: #7B3FE4; } .chev { width: 10px; height: 10px; transition: transform .15s; } .nav-item > button[aria-expanded="true"] .chev { transform: rotate(180deg); } .nav-item { position: relative; } .menu { position: absolute; top: calc(100% + 10px); inset-inline-start: -12px; z-index: 60; width: min(620px, 90vw); background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(21, 31, 36, .28); padding: 10px; display: none; grid-template-columns: 1fr 1fr; gap: 2px; } .menu.open { display: grid; } .menu a { display: block; padding: 12px 14px; border-radius: 8px; text-decoration: none; } .menu a:hover { background: var(--paper-2); } .menu b { display: block; font-weight: 500; font-size: 15px; } .menu span { display: block; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; margin-top: 2px; } @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } } @media (prefers-reduced-motion: no-preference) { .menu.open { animation: menu-in .18s ease-out; } } /* מוצר and סוגי עסקים: a wide panel from the logo's edge, the links in two groups with an icon each, and a black card: the business app's rating (מוצר), the free switch in a week (סוגי עסקים) (31 Oct 2026) */ .nav-item.wide { position: static; } .menu.mega { top: calc(100% + 6px); inset-inline-start: var(--gut); width: min(940px, calc(100% - 2 * var(--gut))); grid-template-columns: 1fr 1fr minmax(220px, .78fr); gap: 6px; padding: 12px; border-radius: 16px; } .mega-col { display: grid; align-content: start; gap: 2px; } .mega-h { font-size: 13.5px; font-weight: 500; color: var(--ink-2); padding: 8px 12px 6px; } .menu.mega .mega-col a { display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; } .menu.mega .mega-col a > b, .menu.mega .mega-col a > span { grid-column: 2; } .mega .ic { grid-row: 1 / span 2; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); color: var(--ink); font-style: normal; transition: background-color .15s, color .15s; } .mega .ic svg { width: 20px; height: 20px; } .mega .ic svg.wa { width: 18px; height: 18px; } .menu.mega .mega-col a:hover .ic, .menu.mega .mega-col a:focus-visible .ic { background: var(--ink); color: #FFFFFF; } .menu a.mega-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 22px; border-radius: 12px; background: #000000; color: #FFFFFF; } .menu a.mega-card:hover { background: #1C1C1E; } .menu .mega-card span { color: rgba(255, 255, 255, .72); margin: 0; } .menu .mega-card .mega-card-top { display: flex; align-items: center; gap: 12px; } .mega-card-ic { width: 44px; height: 44px; flex: none; border-radius: 10px; } /* the business app's icon, from its App Store page: it is night on the black card, so a faint ring keeps its edge */ img.mega-card-ic { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); } .mega-card-ic.white { display: flex; align-items: center; justify-content: center; background: #FFFFFF; color: #000000; font-style: normal; } .mega-card-ic.white svg { width: 22px; height: 22px; } .menu .mega-card .mega-card-k { color: #FFFFFF; font-size: 15px; font-weight: 500; line-height: 1.35; } .menu .mega-card .mega-card-n { margin-top: auto; padding-top: 28px; font-family: "Wix Madefor Display", var(--display); font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; } .menu .mega-card .mega-card-n.word { font-family: var(--display); font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 10px; } .menu .mega-card .stars { display: inline-flex; color: #FFFFFF; margin: 10px 0 6px; } /* a star filled to the rating's fraction (4.4 = four and 42%), from the right, where RTL stars start */ .star-part { position: relative; flex: none; width: 14px; height: 14px; } .star-part svg { position: absolute; inset: 0; } .star-part svg:first-child { opacity: .3; } .star-part svg + svg { clip-path: inset(0 0 0 calc(100% - var(--fill, 50%))); } .menu .mega-card .mega-card-go { margin-top: 18px; color: #FFFFFF; font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; } .menu a.mega-card:hover .mega-card-go { text-decoration-thickness: 2px; } .mega-b { position: absolute; inset-inline-end: -26px; bottom: -40px; width: 132px; height: 169px; fill: #FFFFFF; opacity: .08; pointer-events: none; } .head-actions { display: flex; align-items: center; gap: 8px; flex: none; } .head-actions .login { font-size: 15px; font-weight: 500; text-decoration: none; padding: 0 10px; height: 40px; display: inline-flex; align-items: center; } .head-actions .login:hover { text-decoration: underline; text-underline-offset: 5px; } .menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-btn); background: transparent; cursor: pointer; align-items: center; justify-content: center; } .menu-toggle svg { width: 20px; height: 20px; } .menu-toggle .i-close { display: none; } .menu-toggle[aria-expanded="true"] .i-open { display: none; } .menu-toggle[aria-expanded="true"] .i-close { display: block; } .sheet { display: none; } @media (max-width: 999px) { .nav, .head-actions .login, .head-actions .btn-line { display: none; } .site-header .wrap { justify-content: space-between; } .menu-toggle { display: inline-flex; } .sheet { position: fixed; inset: 68px 0 0 0; z-index: 49; overflow-y: auto; background: var(--paper); padding: 8px var(--gut) 40px; } .sheet.open { display: block; } .sheet details { border-bottom: 1px solid var(--line); } .sheet summary, .sheet > a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 19px; font-weight: 500; text-decoration: none; cursor: pointer; list-style: none; } .sheet summary::-webkit-details-marker { display: none; } .sheet > a { border-bottom: 1px solid var(--line); } .sheet details[open] .chev { transform: rotate(180deg); } .sheet details ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 0 0 18px; } .sheet details ul.by-col { grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 5), auto); } /* the dropdowns' groups, one per column */ .sheet details a { display: block; padding: 8px 0; text-decoration: none; color: var(--ink-2); } /* the account button at the foot of the menu, as on the Pink site */ .sheet > .m-login { justify-content: center; width: 100%; min-height: 52px; margin-top: 24px; padding: 0 22px; border: 1.5px solid var(--ink); color: var(--ink); font-size: 17px; font-weight: 600; } .sheet > .m-login:hover { background: var(--paper-2); } body.menu-open { overflow: hidden; } } /* ---------- Hero ---------- */ .hero > .wrap { padding-top: clamp(56px, 8vw, 104px); padding-bottom: 0; text-align: center; } .hero .proof { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); margin-bottom: 26px; } .stars { display: inline-flex; gap: 2px; color: var(--ink); } .dark .stars { color: var(--band-hi); } .dark .proof, .dark .price-note, .dark .crumbs { color: var(--band-soft); } .dark .price-note b { color: var(--band-text); } .stars svg { width: 14px; height: 14px; } .hero .display { max-width: 12em; margin: 0 auto; } .hero .lead { margin: 28px auto 0; text-align: center; } .hero .actions { justify-content: center; margin-top: 36px; } .price-note { margin-top: 18px; font-size: 14.5px; color: var(--ink-2); } .price-note b { color: var(--ink); font-weight: 600; } /* Phone mockup */ .phone { position: relative; width: 250px; aspect-ratio: 9 / 18.5; border: 9px solid var(--ink); border-radius: var(--r-phone); background: var(--card); color: var(--ink); overflow: hidden; box-shadow: 0 30px 50px -30px rgba(21, 31, 36, .45); } .phone::before { content: ""; position: absolute; top: 7px; left: 50%; width: 70px; height: 20px; margin-left: -35px; border-radius: 12px; background: var(--ink); z-index: 2; } .phone-screen { position: absolute; inset: 0; padding: 38px 14px 14px; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; } .app-top { display: flex; align-items: center; justify-content: space-between; } .app-top b { font-size: 15px; font-weight: 600; } .studio-dot { width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: #FFFFFF; display: grid; place-items: center; font-weight: 700; font-size: 13px; } /* Schedule card (owner's view) */ .ui-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ui); box-shadow: 0 1px 0 rgba(21, 31, 36, .04); } .sched { padding: 18px 20px 8px; } .sched-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; } .sched-head b { font-weight: 600; font-size: 16px; } .sched-head span { font-size: 13px; color: var(--ink-2); } .slot { display: grid; grid-template-columns: 54px 1fr auto; gap: 4px 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--paper-2); } .slot:first-of-type { border-top: 0; } .slot time { font-weight: 600; font-size: 15px; } .slot .what b { display: block; font-weight: 500; font-size: 15px; line-height: 1.3; } .slot .what span { font-size: 13px; color: var(--ink-2); } .slot .count { font-size: 15px; font-weight: 600; min-width: 7.5em; text-align: end; } .slot .count .full { display: inline-block; margin-inline-start: 6px; padding: 2px 8px; border-radius: 6px; background: var(--mint-soft); color: var(--mint-ink); font-size: 12px; font-weight: 700; vertical-align: 1px; opacity: 0; transform: scale(.9); transition: opacity .25s, transform .25s; } .slot.is-full .count .full { opacity: 1; transform: none; } .meter { grid-column: 2 / -1; height: 5px; border-radius: 3px; background: var(--paper-2); overflow: hidden; } .meter i { display: block; height: 100%; width: var(--w, 0%); background: var(--link); border-radius: 3px; transition: width .35s ease-out; } .slot.is-full .meter i { background: var(--mint); } .waitlist { grid-column: 2 / -1; font-size: 12.5px; color: var(--link); font-weight: 500; opacity: 0; transition: opacity .3s; } .slot.has-wait .waitlist { opacity: 1; } @media (max-width: 1099px) { .phone { width: 230px; } } @media (max-width: 719px) { .slot { grid-template-columns: 46px 1fr auto; } .slot .count { min-width: 0; } } /* ---------- Section heads ---------- */ .sec-head { display: grid; gap: 22px; max-width: 980px; margin-bottom: clamp(40px, 5vw, 64px); } .sec-head.center { margin-inline: auto; text-align: center; justify-items: center; } .sec-head .lead { max-width: 36em; } /* ---------- Business types ---------- */ .types > .wrap { padding-top: 36px; padding-bottom: 36px; display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; } .types p { font-size: 18px; color: var(--ink-2); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14.5px; text-decoration: none; background: var(--card); } .chip:hover { border-color: var(--ink); } /* ---------- Customer logos ---------- */ .logos { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); border-inline-start: 1px solid var(--line); } .logos a { display: grid; place-items: center; height: 104px; padding: 18px 22px; border-bottom: 1px solid var(--line); border-inline-end: 1px solid var(--line); } .logos img { max-height: 54px; width: auto; filter: grayscale(1); opacity: .78; mix-blend-mode: multiply; transition: filter .2s, opacity .2s; } .logos a:hover img { filter: none; opacity: 1; } .logos-note { margin-top: 16px; font-size: 14px; color: var(--ink-2); } @media (max-width: 719px) { .logos { grid-template-columns: repeat(3, 1fr); } .logos a { height: 84px; padding: 14px; } } /* ---------- Tabs: two products ---------- */ .tablist { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); } .tablist [role="tab"] { border: 0; background: none; padding: 10px 18px; border-radius: 7px; font-weight: 500; font-size: 15px; cursor: pointer; } .tablist [role="tab"][aria-selected="true"] { background: var(--strong); color: #fff; } .tabpanel { margin-top: 32px; } .tabpanel[hidden] { display: none; } .duo { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .duo .copy { display: grid; gap: 20px; align-content: start; } .ticks { display: grid; gap: 12px; } .ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; } .ticks li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--tick-bg) var(--tick-img) center / 12px no-repeat; } .dark .ticks li::before { background: var(--band-tick-bg) var(--band-tick-img) center / 12px no-repeat; } @media (max-width: 899px) { .duo { grid-template-columns: 1fr; } } /* Desktop window mockup */ .window { overflow: hidden; } .window-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--paper-2); } .window-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-2); } .window-bar span { margin-inline-start: 10px; font-size: 12.5px; color: var(--ink-2); } .window-body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 16px; } .kpi { border: 1px solid var(--paper-2); border-radius: 10px; padding: 12px 14px; } .kpi small { display: block; font-size: 12px; color: var(--ink-2); } .kpi b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-top: 2px; } .kpi em { font-style: normal; font-size: 12px; color: var(--mint-ink); font-weight: 500; } .kpi.alert em { color: var(--warn); } .wlist { grid-column: 1 / -1; border: 1px solid var(--paper-2); border-radius: 10px; } .wlist > div { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 11px 14px; border-top: 1px solid var(--paper-2); font-size: 13.5px; align-items: center; } .wlist > div:first-child { border-top: 0; } .wlist .h { font-weight: 600; font-size: 13px; color: var(--ink-2); } .pill { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--paper-2); white-space: nowrap; } /* Statuses: a symbol as well as a colour, so they never depend on colour alone */ .pill.ok { background: var(--mint-soft); color: var(--mint-ink); } .pill.ok::before { content: "\2713"; margin-inline-end: 4px; } .pill.sent { background: var(--link-soft); color: var(--link); } .pill.sent::before { content: "\2713\2713"; margin-inline-end: 4px; letter-spacing: -0.2em; } .pill.warn { background: var(--warn); color: #fff; } .pill.warn::before { content: "!"; margin-inline-end: 4px; font-weight: 700; } @media (max-width: 559px) { .window-body { grid-template-columns: 1fr 1fr; } .window-body .kpi:nth-child(3) { display: none; } } /* ---------- WhatsApp button and popup (site.js builds it in place of the .wa-float link; after Pink's site, 30 Oct) ---------- a round black button with WhatsApp's icon; once per visit a one-line invitation beside it; the popup asks what the talk is about (joining, or already a customer) and opens WhatsApp with a matching first message */ .wa-widget { position: fixed; z-index: 60; left: 20px; bottom: 20px; display: grid; justify-items: end; gap: 12px; } /* end is the left, in Hebrew */ body.menu-open .wa-widget { display: none; } .wa-fab { display: grid; place-items: center; width: 60px; height: 60px; border: 0; border-radius: 50%; background: #000; color: #25D366; cursor: pointer; box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, .14), 0 14px 30px -12px rgba(0, 0, 0, .55); transition: transform .2s ease; } .wa-fab:hover { transform: scale(1.05); } .wa-fab svg { width: 28px; height: 28px; } .wa-fab .x { display: none; width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; } .wa-fab[aria-expanded="true"] .wa { display: none; } .wa-fab[aria-expanded="true"] .x { display: block; } .wa-fab:focus-visible { outline: 3px solid #BAFD4F; outline-offset: 4px; } .wa-teaser { max-width: 240px; margin: 0; padding: 10px 14px; border-radius: 16px; border-end-end-radius: 4px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 14px 30px -14px rgba(0, 0, 0, .45); font-size: 15px; font-weight: 500; } .wa-teaser[hidden], .wa-panel[hidden] { display: none; } .wa-panel { width: min(370px, calc(100vw - 32px)); overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 70px -30px rgba(0, 0, 0, .6); transform-origin: bottom left; animation: wa-in .22s cubic-bezier(.2, .7, .3, 1); } @media (prefers-reduced-motion: reduce) { .wa-panel { animation: none; } } @keyframes wa-in { from { opacity: 0; scale: .94; translate: 0 8px; } } .wa-panel-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: #000; color: #fff; } .wa-mark { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: #BAFD4F; } .wa-mark svg { width: 17px; height: 22px; fill: #000; } .wa-panel-head b { display: block; font-size: 17px; font-weight: 700; } .wa-close { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-inline-start: auto; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; } .wa-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .wa-form { display: grid; gap: 12px; padding: 18px; } .wa-form > p { margin: 0; font-size: 15px; font-weight: 600; } .wa-form fieldset { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; } .wa-opt { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); cursor: pointer; transition: box-shadow .15s ease, background-color .15s ease; } .wa-opt:has(input:checked) { background: var(--paper-2); box-shadow: inset 0 0 0 1.5px #000; } .wa-opt input { appearance: none; display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin: 2px 0 0; border: 2px solid #C9C9CF; border-radius: 50%; } .wa-opt input:checked { border-color: #000; } .wa-opt input:checked::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #000; } .wa-opt input:focus-visible { outline: 2px solid #000; outline-offset: 2px; } .wa-opt b { display: block; font-size: 16px; font-weight: 600; } .wa-opt span { font-size: 14px; line-height: 1.45; color: var(--ink-2); } .wa-go { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 15px; border: 0; border-radius: 999px; background: #11804A; color: #fff; font: 600 17px/1 var(--sans); cursor: pointer; } .wa-go:hover { background: #0D6B3D; } .wa-go svg { width: 20px; height: 20px; } /* The visitor's number: only for new customers (site.js hides it for support) */ .wa-field { display: grid; gap: 6px; } .wa-field[hidden], .wa-error[hidden] { display: none; } .wa-field label { font-size: 15px; font-weight: 600; } .wa-field input { width: 100%; height: 50px; padding: 0 14px; border: 0; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); background: #fff; color: var(--ink); font: 400 17px/1 var(--sans); text-align: right; } .wa-field input::placeholder { color: #8E8E93; } .wa-field input:focus { outline: none; box-shadow: inset 0 0 0 2px #000; } .wa-field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #B3261E; } .wa-error { margin: 0; font-size: 13.5px; font-weight: 500; color: #B3261E; } .wa-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); } .wa-note a { color: inherit; text-decoration: underline; } @media (max-width: 559px) { .wa-widget { left: 14px; bottom: 14px; } .wa-fab { width: 54px; height: 54px; } } /* ---------- Cookie bar (consent.js builds it; after Pink's, 31 Oct) ---------- a white card at the bottom right, across the WhatsApp button's corner; on phones it spans the width and the WhatsApp button moves up above it. Accept is the lime button, decline the black one, side by side and the same size */ .consent { position: fixed; z-index: 55; right: 20px; bottom: 20px; display: grid; gap: 12px; width: min(420px, calc(100vw - 40px)); padding: 18px 20px; border-radius: 24px; background: #fff; color: var(--ink-2); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 30px 70px -30px rgba(0, 0, 0, .6); font-size: 15.5px; line-height: 1.5; text-align: start; } .consent[hidden] { display: none; } .consent p { margin: 0; } .consent .consent-title { margin-bottom: -6px; color: var(--ink); font-size: 18px; font-weight: 700; } .consent a { color: var(--ink); font-weight: 600; text-decoration: underline; } .consent { grid-template-rows: auto auto 1fr; } /* consent.js keeps the bar's first height: any spare room goes above the buttons */ .consent-btns { display: flex; gap: 8px; align-self: end; } .consent .btn { flex: 1; min-height: 44px; padding: 0 16px; } body.menu-open .consent { display: none; } @media (max-width: 559px) { .consent { right: 12px; left: 12px; bottom: 12px; width: auto; } .consent-open .wa-widget { bottom: calc(var(--consent-h, 150px) + 24px); } } /* ---------- FAQ: how to reach a person, then the questions by topic ---------- (the owner, 30 Oct: the title "קל להיות איתנו בקשר", and the questions the way Pink's site has them) a grey panel; on top the title, the line about the service and a WhatsApp button that opens the WhatsApp popup; under it the topics, each opening to its questions as white cards with a round +/− (lime when open) */ .faq3 { max-width: 1000px; margin-inline: auto; padding: clamp(28px, 5vw, 64px) clamp(16px, 5vw, 64px); border-radius: 28px; background: var(--paper-2); } .faq3-head { display: grid; justify-items: center; gap: 18px; margin-bottom: clamp(28px, 4vw, 44px); text-align: center; } .faq3-head .lead { max-width: 30em; } .faq3-reach { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; margin-top: 4px; } .faq3-reach .btn svg { width: 22px; height: 22px; color: #25D366; } .faq3-topics { display: grid; } .faq3-topic + .faq3-topic { border-top: 1px solid var(--line); } .faq3-topic > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; cursor: pointer; list-style: none; font-size: 21px; font-weight: 700; } .faq3-topic > summary::after { content: "+"; content: "+" / ""; font-family: "Wix Madefor Text", var(--sans); font-size: 28px; font-weight: 400; line-height: 1; } .faq3-topic[open] > summary::after { content: "−"; content: "−" / ""; } .faq3-topic summary::-webkit-details-marker { display: none; } .faq3-list { display: grid; gap: 12px; padding-bottom: 22px; } .faq3-list details { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04); transition: box-shadow .2s ease; } .faq3-list details[open] { box-shadow: 0 0 0 1.5px #000; } .faq3-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; cursor: pointer; list-style: none; font-size: 18px; font-weight: 500; line-height: 1.4; } .faq3-list summary .pm { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--panel); transition: background-color .2s ease; } .faq3-list summary .pm::before, .faq3-list summary .pm::after { content: ""; position: absolute; top: 14px; left: 9px; width: 12px; height: 2px; border-radius: 1px; background: #000; transition: transform .2s ease; } .faq3-list summary .pm::after { transform: rotate(90deg); } .faq3-list details[open] .pm { background: #BAFD4F; } .faq3-list details[open] .pm::after { transform: rotate(0deg); } .faq3-list details p { margin: -4px 0 0; padding: 0 20px 20px; max-width: 62ch; color: var(--ink-2); font-size: 17px; line-height: 1.7; } .faq3-list summary:focus-visible, .faq3-topic > summary:focus-visible { outline: 3px solid #000; outline-offset: 2px; border-radius: 12px; } @media (max-width: 599px) { .faq3 { border-radius: 22px; } .faq3-topic > summary { font-size: 19px; } .faq3-list summary { padding: 16px; font-size: 17px; } .faq3-list details p { padding: 0 16px 18px; font-size: 16.5px; } } /* ---------- Pillars: copy + accordion beside a mockup ---------- */ .pillar { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: start; } .pillar .copy { display: grid; gap: 22px; } .acc { border-top: 1px solid var(--line); margin-top: 8px; } .acc details { border-bottom: 1px solid var(--line); } .acc summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 500; } .acc summary::-webkit-details-marker { display: none; } .acc summary .pm { position: relative; width: 14px; height: 14px; flex: none; } .acc summary .pm::before, .acc summary .pm::after { content: ""; position: absolute; inset: 6px 0 auto; height: 2px; background: currentColor; transition: transform .2s; } .acc summary .pm::after { transform: rotate(90deg); } .acc details[open] .pm::after { transform: rotate(0deg); } .acc details p { padding: 0 0 20px; color: var(--ink-2); max-width: 34em; } .dark .acc, .dark .acc details { border-color: var(--band-line); } .dark .acc details p { color: var(--band-soft); } .mock { position: relative; background: var(--panel); border-radius: 18px; padding: clamp(18px, 3vw, 36px); } .mock.mint { background: #000000; } /* no lime in light sections */ .dark .mock { background: rgba(255, 255, 255, .07); } @media (min-width: 900px) { .pillar .mock { position: sticky; top: 100px; } .pillar.wide-mock { grid-template-columns: .85fr 1.15fr; } } @media (max-width: 899px) { .pillar { grid-template-columns: 1fr; } } /* Waitlist mockup */ .chat { background: #EFE7DD; border-radius: 14px; padding: 14px; display: grid; gap: 8px; } .bubble { max-width: 86%; background: #fff; border-radius: 12px; border-start-start-radius: 4px; padding: 9px 12px; font-size: 14px; line-height: 1.5; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); } .bubble small { display: block; font-size: 11px; color: var(--ink-2); text-align: end; margin-top: 2px; } .bubble .wa-btn { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--paper-2); color: #0B7DBB; text-align: center; font-weight: 500; } .bubble.me { justify-self: end; background: #D9FDD3; border-start-start-radius: 12px; border-start-end-radius: 4px; } /* Payments mockup */ .pay-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--paper-2); } .pay-head small { display: block; font-size: 12.5px; color: var(--ink-2); } .pay-head b { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; } .pay-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 11px 18px; border-top: 1px solid var(--paper-2); font-size: 14px; } .pay-row:first-of-type { border-top: 0; } .pay-row span:first-child small { display: block; font-size: 12px; color: var(--ink-2); } /* Bill mockup: no asterisks */ .bills { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .bill { padding: 18px; font-size: 14px; } .bill h4 { font-size: 14px; font-weight: 600; margin-bottom: 10px; } .bill li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); } .bill li span:last-child, .bill .total span:last-child { white-space: nowrap; } .bill li:first-child { border-top: 0; } .bill .ast { color: var(--warn); font-weight: 600; } .bill .inc { color: var(--mint-ink); font-weight: 600; } .bill.ours { border-color: var(--strong); box-shadow: 0 0 0 1px var(--strong); } .bill .total { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--ink); font-weight: 600; } .bill.ours .total { color: var(--strong); border-color: var(--strong); } .bill-foot { margin-top: 12px; font-size: 12.5px; color: var(--ink-2); } @media (max-width: 559px) { .bills { grid-template-columns: 1fr; } } /* ---------- App band ---------- */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--band-line); margin-top: 8px; } .stats > div { padding: 22px 0 4px; } .stats > div + div { padding-inline-start: 22px; border-inline-start: 1px solid var(--band-line); } .stats b { display: block; font-size: clamp(30px, 3.6vw, 44px); font-weight: 700; line-height: 1.1; color: var(--band-text); } .stats span { display: block; font-size: 14px; color: var(--band-soft); margin-top: 6px; } .stores { display: flex; gap: 10px; flex-wrap: wrap; } .store { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; border: 1px solid var(--band-text); border-radius: var(--r-btn); text-decoration: none; font-size: 14px; font-weight: 600; } .store:hover { background: var(--band-line); } .store svg { width: 20px; height: 20px; } .phone.light { border-color: #2B383F; } .app-hero { border-radius: 12px; background: var(--strong); color: #fff; padding: 12px; } .app-hero small { color: var(--strong-soft); display: block; font-size: 11px; } .app-hero b { font-size: 16px; font-weight: 500; } .punch { display: flex; gap: 5px; margin-top: 8px; } .punch i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--mint); } .punch i.used { background: var(--mint); } .app-row { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; font-size: 12px; } .app-row .pill { font-size: 10.5px; } .app-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .app-pay span { text-align: center; border-radius: 8px; padding: 8px 0; font-size: 11.5px; font-weight: 600; background: var(--strong); color: #fff; } .app-pay span + span { background: var(--paper-2); color: var(--ink); } @media (max-width: 899px) { .split { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr; } .stats > div + div { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid var(--band-line); } } /* ---------- Included list ---------- */ .included { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); } .included li { padding: 20px 0 20px 24px; border-bottom: 1px solid var(--line); } .included b { display: block; font-weight: 500; font-size: 20px; } .included span { display: block; color: var(--ink-2); font-size: 18px; margin-top: 4px; } @media (max-width: 899px) { .included { grid-template-columns: 1fr 1fr; } } @media (max-width: 559px) { .included { grid-template-columns: 1fr; } .included li { padding-left: 0; } } /* ---------- Quote ---------- */ .quote { display: grid; grid-template-columns: 1fr 240px; gap: clamp(28px, 5vw, 64px); align-items: center; } .quote blockquote { font-size: clamp(24px, 3vw, 36px); line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; } .quote mark { background: var(--mint-soft); color: var(--ink); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .quote figcaption { margin-top: 24px; font-size: 15px; } .quote figcaption b { display: block; font-weight: 600; } .quote figcaption span { color: var(--ink-2); } .quote img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; } @media (max-width: 719px) { .quote { grid-template-columns: 1fr; } .quote img { width: 160px; } } /* ---------- Steps (a real sequence) ---------- */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); } .steps li { padding: 24px 24px 8px 0; position: relative; } .steps li + li { border-inline-start: 1px solid var(--line); padding-inline-start: 24px; } .steps .n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--strong); color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 16px; } .steps b { display: block; font-size: 20px; font-weight: 500; margin-bottom: 6px; } .steps p { color: var(--ink-2); font-size: 18px; } .steps .when { display: block; font-size: 13px; color: var(--mint-ink); font-weight: 600; margin-bottom: 4px; } @media (max-width: 899px) { .steps { grid-template-columns: 1fr 1fr; } .steps li:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } .steps li { border-bottom: 1px solid var(--line); padding-bottom: 20px; } } @media (max-width: 559px) { .steps { grid-template-columns: 1fr; } .steps li + li { border-inline-start: 0; padding-inline-start: 0; } } /* ---------- Price card with slider ---------- */ .price-card { display: grid; grid-template-columns: 1.1fr .9fr; background: var(--card); border: 1px solid var(--ink); box-shadow: 0 0 0 1px var(--ink); border-radius: 16px; overflow: hidden; } .price-card > div { padding: clamp(24px, 4vw, 44px); } .price-card .side { background: var(--panel); border-inline-start: 1px solid var(--line); display: grid; gap: 16px; align-content: start; } .slider-label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 500; } .slider-label output { font-size: 15px; font-weight: 600; background: var(--paper-2); border-radius: 6px; padding: 2px 10px; } input[type="range"] { width: 100%; margin: 18px 0 8px; accent-color: var(--strong); height: 28px; } .scale { position: relative; height: 18px; font-size: 12.5px; color: var(--ink-2); } .scale span { position: absolute; top: 0; inset-inline-start: var(--p); transform: translateX(50%); } .scale span:first-child { transform: none; } .scale span:last-child { inset-inline-start: auto; inset-inline-end: 0; transform: none; } .price-big { display: flex; align-items: baseline; gap: 10px; margin-top: 28px; } .price-big b { font-size: clamp(56px, 7vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .price-big span { color: var(--ink-2); font-size: 15px; } .price-plan { margin-top: 8px; font-size: 15px; } .fine { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; } @media (max-width: 899px) { .price-card { grid-template-columns: 1fr; } .price-card .side { border-inline-start: 0; border-top: 1px solid var(--line); } } /* ---------- Plans table (pricing page) ---------- */ .plans { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); } .plan { padding: 24px 22px; display: grid; gap: 6px; align-content: start; } .plan + .plan { border-inline-start: 1px solid var(--line); } .plan.on { background: var(--strong); color: #fff; } .plans .plan[role="button"] { cursor: pointer; transition: box-shadow .15s; } .plans .plan[role="button"]:not(.on):hover { box-shadow: inset 0 0 0 2px var(--ink); } .plan.on .body-2 { color: var(--strong-soft); } .plan h3 { font-size: 15px; font-weight: 500; } .plan .p { font-size: 44px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .plan .p small { font-size: 15px; letter-spacing: 0; } @media (max-width: 899px) { .plans { grid-template-columns: 1fr 1fr; } .plan:nth-child(3) { border-inline-start: 0; } .plan:nth-child(n+3) { border-top: 1px solid var(--line); } } /* ---------- Comparison table ---------- */ .cmp { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 15px; } .cmp th, .cmp td { padding: 14px 18px; text-align: start; border-top: 1px solid var(--line); vertical-align: top; } .cmp thead th { border-top: 0; background: var(--paper-2); font-weight: 600; font-size: 14px; } .cmp tbody th { font-weight: 500; width: 34%; } .cmp td.us { background: var(--panel-2); } .cmp thead th:nth-child(2) { background: var(--strong); color: #fff; } .yes { color: var(--mint-ink); font-weight: 600; } .extra { color: var(--warn); font-weight: 600; } .table-scroll { overflow-x: auto; border-radius: 14px; } .table-scroll .cmp { min-width: 620px; } /* ---------- FAQ ---------- */ .faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 72px); } .faq .acc { margin-top: 0; } .faq .acc summary { font-size: 17px; } @media (max-width: 899px) { .faq { grid-template-columns: 1fr; } } /* ---------- Footer ---------- 31 Oct 2026, after the Pink site's: a hairline parts it from the black closing; the brand column carries the WhatsApp line (it opens the WhatsApp window, like the FAQ's button); the apps are grouped by app; the bottom bar holds the company, the tax authority's approval and the three documents, which are pages of this site. */ .site-footer { background: var(--foot); color: #fff; } .site-footer > .wrap { padding-top: 64px; padding-bottom: 32px; } .site-footer > .wrap::before { content: ""; position: absolute; inset: 0 var(--gut) auto; border-top: 1px solid var(--line-dark); } .foot-top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 32px; } .foot-brand img { height: 28px; width: auto; } .foot-brand p { margin-top: 16px; font-weight: 600; font-size: 19px; color: rgba(255, 255, 255, .86); } .foot-wa { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; padding: 12px 18px 12px 22px; border: 1px solid var(--line-dark); border-radius: 18px; text-decoration: none; transition: border-color .15s; } .foot-wa:hover { border-color: #fff; } .foot-wa > svg { width: 26px; height: 26px; flex: none; color: #25D366; } .foot-wa b { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; } .socials { display: flex; gap: 8px; margin-top: 22px; } .socials a { width: 40px; height: 40px; border: 1px solid var(--line-dark); border-radius: 50%; display: grid; place-items: center; } .socials a:hover { border-color: #fff; } .socials svg { width: 17px; height: 17px; } .site-footer h2 { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .55); margin-bottom: 14px; } .site-footer ul a { display: inline-block; padding: 5px 0; font-size: 15px; text-decoration: none; color: rgba(255, 255, 255, .9); } .site-footer ul a:hover { text-decoration: underline; text-underline-offset: 4px; color: #fff; } .foot-apps { display: grid; gap: 14px; } .foot-apps li { display: grid; justify-items: start; } .foot-apps li > span { font-size: 15px; color: #fff; } .site-footer .foot-apps a { padding: 2px 0; font-size: 14.5px; color: rgba(255, 255, 255, .64); } .foot-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 56px; padding-top: 22px; padding-inline-end: 72px; /* clear of the WhatsApp button */ border-top: 1px solid var(--line-dark); font-size: 14px; color: rgba(255, 255, 255, .64); } .foot-bottom a { color: rgba(255, 255, 255, .86); text-decoration: none; } .foot-bottom a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .tax-badge { display: inline-flex; align-items: center; gap: 10px; } .tax-badge img { width: 34px; height: 34px; padding: 3px; border-radius: 50%; background: #fff; } .foot-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-inline-start: auto; } @media (max-width: 999px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } } @media (max-width: 599px) { .site-footer > .wrap { padding-bottom: 104px; } /* the last line clears the WhatsApp button */ .foot-bottom { flex-direction: column; align-items: flex-start; padding-inline-end: 0; } .foot-legal { margin-inline-start: 0; } } /* ---------- WhatsApp button ---------- */ .wa-float { position: fixed; left: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 16px; background: var(--ink); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 15px; /* the outline: a white ring that shows on black sections, and a faint line outside it that shows on white */ box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 3px rgba(0, 0, 0, .14), 0 14px 30px -12px rgba(0, 0, 0, .55); } .wa-float svg { width: 22px; height: 22px; color: #25D366; } .wa-float:hover { background: #2A2A2D; } body.menu-open .wa-float { display: none; } @media (max-width: 559px) { .wa-float span { display: none; } .wa-float { width: 52px; padding: 0; justify-content: center; } } /* ---------- Page hero (inner pages) ---------- */ .page-hero > .wrap { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 88px); } .page-hero.compact > .wrap { padding-bottom: 36px; } .sec.after-hero > .wrap { padding-top: 40px; } .page-hero .display { font-size: clamp(46px, 6.6vw, 84px); max-width: 13em; } .page-hero .lead { margin-top: 26px; } .page-hero .actions { margin-top: 32px; } .crumbs { font-size: 14px; color: var(--ink-2); margin-bottom: 26px; } .crumbs a { text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .hero-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .hero-split .display { font-size: clamp(44px, 5.6vw, 74px); } @media (max-width: 899px) { .hero-split { grid-template-columns: 1fr; } } /* Callout and sources */ .callout { border: 1px solid var(--line); border-inline-start: 4px solid var(--strong); background: var(--card); border-radius: 10px; padding: 18px 20px; } .sources { font-size: 13.5px; color: var(--ink-2); display: grid; gap: 6px; } .sources a { color: var(--ink-2); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); } @media (max-width: 899px) { .two-col { grid-template-columns: 1fr; } } /* Form (switching page) */ .form { display: grid; gap: 16px; } .form[hidden] { display: none; } /* sent: only the confirmation stays (display: grid beat the hidden attribute) */ .field { display: grid; gap: 6px; } .field label { font-weight: 500; font-size: 15px; } .field input, .field select { height: 48px; border: 1px solid #8C8377; border-radius: var(--r-field); background: var(--card); padding: 0 14px; font: inherit; color: var(--ink); } .field input:focus, .field select:focus { outline: 3px solid var(--link); outline-offset: 1px; border-color: var(--ink); } .field .hint { font-size: 13px; color: var(--ink-2); } .field .err { font-size: 13.5px; color: #B3261E; font-weight: 500; } .form-ok { background: var(--mint-soft); border-radius: 10px; padding: 16px 18px; font-weight: 500; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; } } /* ---------- Inner-page pieces ---------- */ /* Reformer beds (Pilates page) */ .beds-card { padding: 18px; } .beds-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; } .beds-head b { font-weight: 600; } .beds-head span { font-size: 13px; color: var(--ink-2); } .beds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .bed { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--card); display: grid; gap: 4px; } .bed svg { width: 100%; height: 22px; color: var(--ink-2); } .bed b { font-size: 13px; font-weight: 500; } .bed small { font-size: 11.5px; color: var(--ink-2); } .bed.new { border-color: var(--strong); box-shadow: 0 0 0 1px var(--strong); } .bed.new small { color: var(--ink); font-weight: 600; } .beds-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--paper-2); font-size: 13.5px; } @media (max-width: 559px) { .beds { grid-template-columns: repeat(2, 1fr); } } /* Before and after (Pilates page) */ .versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .versus > div { display: grid; gap: 14px; align-content: start; } .versus h3 { font-size: 15px; font-weight: 600; } .versus .was h3 { color: var(--warn); } .versus .now h3 { color: var(--mint-ink); } .group-chat { background: #EFE7DD; border-radius: 14px; overflow: hidden; } .group-chat .gc-head { background: var(--card); padding: 10px 14px; font-size: 13.5px; display: flex; justify-content: space-between; gap: 8px; } .group-chat .gc-head b { font-weight: 600; } .unread { background: #25D366; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; } .group-chat .gc-body { padding: 12px; display: grid; gap: 7px; } .group-chat .bubble { max-width: 92%; font-size: 13.5px; } .group-chat .who { display: block; font-size: 12px; font-weight: 600; color: #C2185B; } .group-chat .who.b { color: #1565C0; } .group-chat .who.c { color: #6A1B9A; } @media (max-width: 719px) { .versus { grid-template-columns: 1fr; } } /* Two plan cards (Pilates page) */ .plan-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .plan-pair .plan { border: 1px solid var(--line); border-radius: 14px; background: var(--card); } .plan-pair .plan + .plan { border-inline-start: 1px solid var(--line); } .plan-pair .plan.on { background: var(--strong); border-color: var(--strong); } @media (max-width: 559px) { .plan-pair { grid-template-columns: 1fr; } } /* Extra costs table (pricing page) */ .costs { border-top: 1px solid var(--ink); } .costs > div { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: baseline; } .costs b { font-weight: 500; } .costs .v { font-weight: 600; } .costs span:last-child { color: var(--ink-2); font-size: 15px; } @media (max-width: 719px) { .costs > div { grid-template-columns: 1fr auto; } .costs span:last-child { grid-column: 1 / -1; } } /* Grouped feature lists (pricing page) */ .groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .groups h3 { font-size: 19px; font-weight: 600; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); } .groups .ticks { gap: 10px; font-size: 18px; } @media (max-width: 999px) { .groups { grid-template-columns: 1fr 1fr; } } @media (max-width: 559px) { .groups { grid-template-columns: 1fr; } } /* Form card (switching page) */ .form-card { padding: clamp(22px, 3vw, 32px); } .form-card h2 { font-size: 22px; font-weight: 500; margin-bottom: 4px; } .form-card .body-2 { margin-bottom: 18px; } .form .btn { width: 100%; } .moved { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); } .moved li { padding: 22px 0 22px 24px; border-bottom: 1px solid var(--line); } .moved b { display: block; font-weight: 500; font-size: 20px; } .moved span { display: block; color: var(--ink-2); font-size: 18px; margin-top: 4px; } @media (max-width: 899px) { .moved { grid-template-columns: 1fr 1fr; } } @media (max-width: 559px) { .moved { grid-template-columns: 1fr; } .moved li { padding-left: 0; } } /* Bill comparison (vs page) */ .bill-big { padding: clamp(20px, 3vw, 30px); } .bill-big h3 { font-size: 20px; font-weight: 500; } .bill-big .sub { font-size: 14px; color: var(--ink-2); margin-top: 2px; } .bill-big ul { margin-top: 18px; } .bill-big li { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-top: 1px dashed var(--line); font-size: 15px; } .bill-big li:first-child { border-top: 0; } .bill-big .total { display: flex; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ink); font-size: 18px; font-weight: 600; } .bill-big.ours { border-color: var(--strong); box-shadow: 0 0 0 1px var(--strong); } .bill-big.ours .total { border-color: var(--strong); } .three { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); } .three > div { border-top: 2px solid var(--strong); padding-top: 18px; display: grid; gap: 10px; align-content: start; } .three b.big { font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; line-height: 1.05; } @media (max-width: 899px) { .three { grid-template-columns: 1fr; } } /* ---------- Platform: free automations, official WhatsApp, AI agent, API ---------- */ /* Homepage tiles */ .platform { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .tile { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); text-decoration: none; transition: border-color .15s; } .tile:hover { border-color: var(--ink); } .tile .tag { justify-self: start; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--panel); color: var(--ink); } .tile h3 { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; } .tile p { color: var(--ink-2); font-size: 15px; } .tile .go { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .tile .mini { align-self: end; border-radius: 12px; background: var(--paper-2); padding: 12px; font-size: 13px; display: grid; gap: 6px; } .tile.free { background: var(--strong); border-color: var(--strong); color: #fff; } /* featured = night */ .tile.free p { color: var(--strong-soft); } .tile.free .tag { background: #FFFFFF; color: #000000; } .tile.free .mini { background: rgba(255, 255, 255, .08); color: #fff; } .tile.free:hover { border-color: #000000; } @media (max-width: 999px) { .platform { grid-template-columns: 1fr 1fr; } } @media (max-width: 559px) { .platform { grid-template-columns: 1fr; } } /* Automation recipes: when this happens, then that */ .recipes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .recipe { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 18px; display: grid; gap: 8px; align-content: start; } .recipe .step { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.45; } .recipe .k { font-size: 12px; font-weight: 700; padding: 3px 0; border-radius: 6px; text-align: center; } .recipe .when .k { background: var(--panel); color: var(--ink); } .recipe .then .k { background: var(--ink); color: #fff; } .recipe .then b { font-weight: 600; } .recipe .line { width: 2px; height: 12px; background: var(--line); margin-inline-start: 18px; } .recipe small { color: var(--ink-2); font-size: 13px; padding-top: 6px; border-top: 1px dashed var(--line); } @media (max-width: 899px) { .recipes { grid-template-columns: 1fr 1fr; } } @media (max-width: 559px) { .recipes { grid-template-columns: 1fr; } } /* Automation switchboard (hero mockup) */ .switches { padding: 6px 18px 10px; } .switches .row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--paper-2); font-size: 14px; } .switches .row:first-of-type { border-top: 0; } .switches .row small { display: block; color: var(--ink-2); font-size: 12.5px; } .toggle { width: 38px; height: 22px; border-radius: 999px; background: var(--mint); position: relative; } .toggle::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; } .zero { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--paper-2); } .zero b { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; } .zero span { font-size: 13px; color: var(--ink-2); } /* WhatsApp chat inside a phone */ .phone .wa { position: absolute; inset: 0; display: flex; flex-direction: column; } .wa-top { display: flex; align-items: center; gap: 9px; padding: 34px 12px 9px; background: var(--card); border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.3; } .wa-top b { font-weight: 600; display: block; } .wa-top small { color: var(--ink-2); font-size: 11px; } .wa-top .av { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--mint); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; } .phone .chat { flex: 1; border-radius: 0; align-content: start; padding: 12px 10px; gap: 7px; overflow: hidden; } .phone .bubble { font-size: 12.5px; max-width: 90%; } .bubble .ai { display: inline-block; margin-bottom: 3px; padding: 1px 7px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 700; } .sysnote { justify-self: center; background: rgba(255, 255, 255, .88); border-radius: 8px; padding: 4px 10px; font-size: 11.5px; color: var(--ink-2); text-align: center; } .wa-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 8px; border-top: 1px solid var(--paper-2); } .wa-btns span { padding-top: 7px; color: #0B7DBB; text-align: center; font-weight: 500; } .wa-btns span + span { border-inline-start: 1px solid var(--paper-2); } /* Notification list (WhatsApp page) */ .notify { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); } .notify li { padding: 20px 0 20px 22px; border-bottom: 1px solid var(--line); } .notify b { display: block; font-weight: 600; font-size: 20px; } .notify span { display: block; color: var(--ink-2); font-size: 18px; margin-top: 4px; } @media (max-width: 999px) { .notify { grid-template-columns: 1fr 1fr; } } @media (max-width: 559px) { .notify { grid-template-columns: 1fr; } .notify li { padding-left: 0; } } /* AI agent example chats */ .examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .example { border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; } .example h3 { font-size: 17px; font-weight: 600; padding: 16px 18px 12px; } .example .chat { border-radius: 0; } .example .chat .bubble { font-size: 13.5px; } .example .result { padding: 12px 18px; font-size: 13.5px; color: var(--ink-2); border-top: 1px solid var(--line); } .example .result b { color: var(--ink); font-weight: 600; } @media (max-width: 899px) { .examples { grid-template-columns: 1fr; } } /* API */ .code { direction: ltr; text-align: left; unicode-bidi: isolate; margin: 0; background: var(--ink); color: #E6EDF0; border-radius: 14px; padding: 18px 20px; font: 13.5px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-x: auto; white-space: pre; } .code .c { color: #8E9AA1; } .code .k { color: #FFFFFF; font-weight: 600; } .code .s { color: #D4D4D8; } code.inline { direction: ltr; unicode-bidi: isolate; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--panel); padding: 1px 6px; border-radius: 5px; } .endpoints { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); } .endpoints li { padding: 20px 0 20px 24px; border-bottom: 1px solid var(--line); } .endpoints b { display: block; font-weight: 600; font-size: 20px; } .endpoints span { display: block; color: var(--ink-2); font-size: 18px; margin-top: 4px; } .endpoints .methods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } @media (max-width: 899px) { .endpoints { grid-template-columns: 1fr 1fr; } } @media (max-width: 559px) { .endpoints { grid-template-columns: 1fr; } .endpoints li { padding-left: 0; } } .uses { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 32px); } .uses > div { border-top: 3px solid var(--ink); padding-top: 16px; display: grid; gap: 8px; align-content: start; } .uses b { font-size: 20px; font-weight: 700; } .uses p { color: var(--ink-2); font-size: 18px; } @media (max-width: 899px) { .uses { grid-template-columns: 1fr 1fr; } } @media (max-width: 559px) { .uses { grid-template-columns: 1fr; } } /* Steps on a band */ .dark .steps, .dark .steps li { border-color: var(--band-line); } .dark .steps .n { background: var(--band-hi); color: var(--band); } .dark .steps .when { color: var(--band-hi); } .dark .steps p { color: var(--band-soft); } /* ---------- Product mockups: black, white and greys only, so they fit any section ---------- */ .meter i, .slot.is-full .meter i { background: #000000; } .waitlist { color: var(--ink-2); } .slot .count .full, .pill.ok, .pill.sent { color: #000000; } .toggle { background: #000000; } .kpi:not(.alert) em { color: var(--ink-2); } .punch i { border-color: #FFFFFF; } .punch i.used { background: #FFFFFF; } .studio-dot, .wa-top .av { color: #FFFFFF; } /* ======================= Homepage ======================= */ /* ---------- Hero: centred copy above a photo band ---------- The band starts as a rounded card inside the margins and opens to full width as it scrolls up (site.js sets --p from 0 to 1). On it, Boostapp's live read of the class and today's numbers. */ .gh { padding-top: clamp(26px, 4vh, 50px); padding-bottom: clamp(48px, 7vw, 104px); overflow-x: clip; } .gh-copy { position: relative; z-index: 0; display: flex; flex-direction: column; align-items: center; text-align: center; transform-origin: 50% 30%; } .gh-rate { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 15px; color: var(--ink-2); } .gh-rate .stars svg { width: 15px; height: 15px; } .gh-title { font-size: clamp(52px, 6.4vw, 108px); line-height: .98; font-weight: 800; letter-spacing: -0.03em; } .gh-title .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; } .gh-title .ln > span { display: block; } /* the Boostapp logo in place of the word; vertical-align puts the bottom of its lowercase letters on the baseline (in the logo's own box, the descenders of "pp" take the bottom 18.5%) */ .gh-logo { display: inline-block; height: .8em; width: auto; vertical-align: -.148em; margin-inline-end: .06em; } .gh-sub { margin-top: 20px; max-width: 34em; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-2); } .gh .actions { justify-content: center; margin-top: 26px; } .gh .btn { min-height: 58px; padding: 0 30px; font-size: 18px; } .gh .btn svg { width: 20px; height: 20px; fill: currentColor; } .gh .price-note { margin-top: 18px; } .gh-band { --p: 0; position: relative; z-index: 1; margin-top: clamp(30px, 4vh, 46px); height: min(56.25vw, 1080px); /* 16:9, the photo itself: none of the grid is cropped */ overflow: hidden; isolation: isolate; background: #000; clip-path: inset(0 calc((1 - var(--p)) * var(--gut)) round calc((1 - var(--p)) * 28px)); } @property --zoom { syntax: ""; inherits: true; initial-value: 1.02; } /* a small base zoom covers the scroll parallax */ .gh-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: translateY(calc(var(--p) * -1%)) scale(var(--zoom)); transform-origin: 50% 40%; } .gh-grain { position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: .18; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* The CRM's live read of the class: who is on which mat, the class now, the AI agent at work. Black, white and greys only. Pins sit on the trainees' heads in photo coordinates (--x, --y in %). */ .gh-hud { position: absolute; inset: 0; z-index: 2; } .gh-pin { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 0; height: 0; } .gh-pin::before { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: #000; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(0, 0, 0, .35); } .gh-pin::after { content: ""; position: absolute; left: -1px; bottom: 6px; width: 2px; height: 14px; background: #fff; } .gh-pin .tag { position: absolute; left: 0; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 13px 5px 6px; border-radius: 999px; background: #fff; color: #000; font-size: 14.5px; line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .45); } .gh-pin.end .tag { transform: translateX(-88%); } .gh-pin .tag i { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: #000; color: #fff; font-style: normal; font-size: 13px; font-weight: 700; } .gh-pin .tag b { font-weight: 700; } /* a trial class carries the product's own mark from the calendar: the blue asterisk (the one colour in the mockups) */ .gh-pin .tag i.trial { background: none; } .gh-pin .tag i.trial svg { width: 22px; height: 22px; fill: none; stroke: #3B87F7; stroke-width: 3.6; stroke-linecap: round; } .gh-pin .tag span { color: var(--ink-2); } .gh-pin.ok .tag span { display: inline-flex; align-items: center; gap: 5px; color: #000; } .gh-pin.ok .tag span::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #000 var(--tick-white) center / 9px no-repeat; } .gh-card { position: absolute; z-index: 2; padding: 16px 18px 17px; border-radius: 20px; color: #000; background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .45); } .gh-card-h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; white-space: nowrap; } .gh-card-h svg { width: 12px; height: 16px; fill: #000; } .gh-card-h > span:last-child { margin-inline-start: auto; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; } .gh-now { inset-inline-start: calc(var(--gut) + 24px); top: 28px; width: 284px; } .gh-now-t { display: block; margin-top: 7px; font-size: 23px; font-weight: 700; } /* the twelve mats in the photo, one square each, in its three rows of four */ .gh-mats { direction: ltr; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; } .gh-mats i { aspect-ratio: 2 / 1; border-radius: 4px; background: #000; } .gh-now-f { margin-top: 11px; font-size: 14.5px; color: var(--ink-2); } .gh-now-f b { color: #000; font-weight: 700; } .gh-now-f span::before { content: " · "; } .gh-ai { inset-inline-end: calc(var(--gut) + 24px); bottom: 28px; width: 304px; display: grid; gap: 8px; } @media (max-width: 1199px) { .gh-ai { width: 264px; } } /* keeps clear of Daniel's tag */ /* the AI agent's card carries Claude's mark, from claude.com */ .gh-card-h svg.claude { width: 19px; height: 19px; } .gh-ai .b { max-width: 88%; padding: 8px 12px; border-radius: 15px; font-size: 14.5px; line-height: 1.4; } .gh-ai .them { justify-self: start; background: var(--panel); border-start-start-radius: 4px; } .gh-ai .me { justify-self: end; background: #000; color: #fff; border-start-end-radius: 4px; } .gh-ai-f { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); } .gh-ai-f::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #000 var(--tick-white) center / 10px no-repeat; } /* The analytics card: four numbers from today's dashboard, top left on the photo, sized to leave room for the class card */ .gh-kpis { inset-inline-end: calc(var(--gut) + 24px); top: 28px; width: min(670px, calc(100% - 2 * var(--gut) - 48px - 284px - 20px)); display: grid; grid-template-columns: repeat(4, 1fr); padding: 0; } .gh-kpis .k { display: grid; gap: 5px; align-content: start; padding: 14px 16px 15px; min-width: 0; } .gh-kpis .k + .k { border-inline-start: 1px solid var(--line); } .gh-kpis small { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; } .gh-kpis .k > b { font-family: var(--display); font-size: 29px; line-height: 1; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .gh-kpis .k > span { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; } /* classes today: occupancy per class, earliest on the left as in the product's charts, the class now in black */ .kb { position: relative; direction: ltr; display: flex; align-items: flex-end; gap: 3px; height: 26px; margin-top: 3px; } .kb i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: var(--panel); transform-origin: 50% 100%; } .kb i.now { background: #000; } .kavg { position: absolute; left: -2px; right: -2px; bottom: var(--avg); border-top: 1.5px dashed #000; } .kp { height: 6px; margin: 13px 0 7px; border-radius: 3px; background: var(--panel); overflow: hidden; } .kp s { display: block; width: var(--w); height: 100%; border-radius: inherit; background: #000; } .kd { display: flex; flex-wrap: wrap; gap: 3px; margin: 9px 0 3px; } .kd i { width: 14px; height: 14px; border-radius: 50%; background: #000 var(--tick-white) center / 8px no-repeat; } .kt { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; line-height: 1.3; font-weight: 600; white-space: nowrap; } .kt::before { content: ""; width: 12px; height: 12px; flex: none; border: 1.5px solid #000; border-radius: 3px; } /* The customer's quote under the photo: grey, with the key phrase in black */ .gh-quote { max-width: 1000px; margin-top: clamp(56px, 7vw, 100px); display: grid; justify-items: center; gap: 24px; text-align: center; } .gh-quote blockquote { font-family: var(--display); font-size: clamp(22px, 2.5vw, 34px); line-height: 1.38; font-weight: 700; letter-spacing: -0.01em; color: var(--mute); text-wrap: balance; } /* the key phrase under a lime marker stroke (the owner's choice; the one use of lime beyond buttons) */ .gh-quote mark { color: #000; padding: 0 .12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 8.6 100 4.2 100 16.4 0 19.6Z' fill='%23BAFD4F'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .gh-quote figcaption { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink-2); text-align: start; } /* his photo, with the studio's logo as a badge on the corner, as the product shows avatars */ .gh-quote .face { position: relative; flex: none; width: 64px; height: 64px; } .gh-quote .face .ph { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; } .gh-quote .face .logo { position: absolute; inset-inline-end: -6px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%; object-fit: contain; padding: 2px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0, 0, 0, .12); } /* Madefor's Latin capitals stand taller than Almoni's Hebrew: bring "Boostapp" in running text down to match */ .gh-quote [lang="en"], .gh-sub [lang="en"] { font-size: .9em; } .gh-quote figcaption b { display: block; color: #000; font-weight: 700; } /* One load sequence: the headline rises line by line, the rest follows, the photo eases in, then the class is read: tags on the mats, the class card fills, the agent answers, the numbers land */ @media (prefers-reduced-motion: no-preference) { .gh-photo { animation: gh-push 16s cubic-bezier(.2, .7, .1, 1) both; } .gh-title .ln > span { animation: gh-rise 1.2s cubic-bezier(.2, .7, .1, 1) both; } .gh-title .ln:nth-child(1) > span { animation-delay: .2s; } .gh-title .ln:nth-child(2) > span { animation-delay: .35s; } .gh-rate, .gh-sub, .gh .actions, .gh .price-note { animation: gh-up 1.1s cubic-bezier(.2, .7, .1, 1) both; } .gh-rate { animation-delay: .1s; } .gh-sub { animation-delay: .55s; } .gh .actions { animation-delay: .67s; } .gh .price-note { animation-delay: .79s; } .gh-band { animation: gh-lift 1.6s cubic-bezier(.2, .7, .1, 1) .45s both; } /* rises without the fade: its photo is the phone's largest element, and Chrome only counts it once it shows */ .gh-kpis { animation: gh-up 1s cubic-bezier(.2, .7, .1, 1) 1.25s both; } .kb i { animation: gh-grow .8s cubic-bezier(.2, .7, .1, 1) both; } .kb i:nth-child(1) { animation-delay: 1.50s; } .kb i:nth-child(2) { animation-delay: 1.55s; } .kb i:nth-child(3) { animation-delay: 1.60s; } .kb i:nth-child(4) { animation-delay: 1.65s; } .kb i:nth-child(5) { animation-delay: 1.70s; } .kb i:nth-child(6) { animation-delay: 1.75s; } .kb i:nth-child(7) { animation-delay: 1.80s; } .kb i:nth-child(8) { animation-delay: 1.85s; } .kb i:nth-child(9) { animation-delay: 1.90s; } .kp s { animation: gh-fill 1.2s cubic-bezier(.2, .7, .1, 1) 1.6s both; } .gh-now { animation: gh-up 1s cubic-bezier(.2, .7, .1, 1) 1.4s both; } .gh-mats i { animation: gh-mat .3s ease-out both; } .gh-mats i:nth-child(1) { animation-delay: 1.70s; } .gh-mats i:nth-child(2) { animation-delay: 1.77s; } .gh-mats i:nth-child(3) { animation-delay: 1.84s; } .gh-mats i:nth-child(4) { animation-delay: 1.91s; } .gh-mats i:nth-child(5) { animation-delay: 1.98s; } .gh-mats i:nth-child(6) { animation-delay: 2.05s; } .gh-mats i:nth-child(7) { animation-delay: 2.12s; } .gh-mats i:nth-child(8) { animation-delay: 2.19s; } .gh-mats i:nth-child(9) { animation-delay: 2.26s; } .gh-mats i:nth-child(10) { animation-delay: 2.33s; } .gh-mats i:nth-child(11) { animation-delay: 2.40s; } .gh-mats i:nth-child(12) { animation-delay: 2.47s; } .gh-pin { animation: gh-pop .5s cubic-bezier(.3, 1.4, .5, 1) both; } .gh-pin.m1 { animation-delay: 2s; } .gh-pin.m2 { animation-delay: 2.25s; } .gh-pin.m3 { animation-delay: 2.5s; } .gh-pin.m4 { animation-delay: 2.75s; } .gh-ai { animation: gh-up 1s cubic-bezier(.2, .7, .1, 1) 3s both; } } @keyframes gh-push { from { --zoom: 1.1; } to { --zoom: 1.02; } } @keyframes gh-rise { from { transform: translateY(108%); } } @keyframes gh-up { from { opacity: 0; transform: translateY(18px); } } @keyframes gh-lift { from { transform: translateY(18px); } } @keyframes gh-grow { from { transform: scaleY(0); } } @keyframes gh-fill { from { width: 0; } } @keyframes gh-mat { from { background: var(--panel); } } @keyframes gh-pop { from { opacity: 0; transform: scale(.6) translateY(8px); } } @media (max-width: 999px) { .gh-ai, .gh-kpis, .gh-pin.m2, .gh-pin.m4 { display: none; } /* the class card sits where Yonatan's tag would be */ } @media (max-width: 760px) { .gh { padding-top: 24px; padding-bottom: 40px; } .gh-rate { flex-direction: column; gap: 6px; font-size: 13.5px; margin-bottom: 14px; } .gh-title { font-size: clamp(44px, 12.4vw, 62px); } .gh-sub { margin-top: 16px; font-size: 18px; } .gh .actions { width: 100%; flex-direction: column; margin-top: 22px; } .gh .btn { width: 100%; min-height: 56px; font-size: 17.5px; } .gh .price-note { text-wrap: balance; } .gh-quote blockquote { text-wrap: pretty; } /* balance stops at six lines; this keeps the last word company */ .gh-band { margin-top: 30px; height: auto; aspect-ratio: 1 / 1.05; clip-path: inset(0 calc((1 - var(--p)) * 12px) round calc((1 - var(--p)) * 22px)); } /* the phone shows the middle 53.6% of the photo's width (a 1:1.05 crop of 16:9), so the pins move with it */ .gh-pin { left: calc((var(--x) - 23.2) * 1.867%); } /* the band is clipped 12px in from each side until it opens, so the card keeps 12px inside that */ .gh-now { inset-inline-start: 24px; top: 16px; width: 180px; padding: 11px 12px 12px; } .gh-now-f { font-size: 13px; } .gh-now-f span { display: block; } /* two clean lines instead of a wrap mid-phrase */ .gh-now-f span::before { content: none; } .gh-now-t { font-size: 17.5px; } } /* ---------- Two products: tabs over a photo, the product on top (site.js plays through the tabs) ---------- */ .pt-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-bottom: 0; background: #fff; } .pt-tabs [role="tab"] { position: relative; display: grid; gap: 6px; justify-items: start; align-content: start; padding: 24px clamp(18px, 2.4vw, 32px) 26px; border: 0; background: none; color: var(--mute); text-align: start; cursor: pointer; transition: color .2s; } .pt-tabs [role="tab"] + [role="tab"] { border-inline-start: 1px solid var(--line); } .pt-tabs b { font-family: var(--display); font-size: clamp(20px, 2.3vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; } .pt-tabs small { font-size: 18px; line-height: 1.4; color: var(--ink-2); } .pt-tabs [role="tab"]:hover, .pt-tabs [aria-selected="true"] { color: #000; } /* the line on the chosen tab: full once chosen, filling while the section plays itself */ .pt-bar { position: absolute; top: -1px; inset-inline: -1px 0; height: 3px; background: #000; transform: scaleX(0); transform-origin: right center; } .pt-tabs [aria-selected="true"] .pt-bar { transform: none; } .pt.playing [aria-selected="true"] .pt-bar { animation: pt-fill 9s linear both; } .pt.playing.paused [aria-selected="true"] .pt-bar { animation-play-state: paused; } @keyframes pt-fill { from { transform: scaleX(0); } } .pt-stage { position: relative; height: 680px; overflow: hidden; isolation: isolate; container-type: inline-size; border-radius: 0 0 26px 26px; background: #E6DCCD; } .pt-base, .pt-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pt-panel { position: absolute; inset: 0; } .pt-panel[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { .js .pt-panel { animation: pt-fade .5s ease both; } .js .pt-win, .js .pt-phones { animation: pt-rise .8s cubic-bezier(.2, .7, .1, 1) both; } } @keyframes pt-fade { from { opacity: 0; } } @keyframes pt-rise { from { opacity: 0; transform: translateY(18px); } } .pt-stage .phone { box-shadow: 0 50px 80px -40px rgba(40, 30, 10, .55); } /* The management system: its dashboard, laid out as in the product (from the owner's screen recording, 28 Oct 2026) */ .pt-win, .pt-ghost { position: absolute; top: 44px; bottom: 44px; inset-inline-start: max(56px, (100% - 900px) / 2); width: min(900px, calc(100% - 112px)); border-radius: 16px; display: grid; grid-template-columns: 68px minmax(0, 1fr); } /* Status colours, as in the product: green for good, amber for half full, red for needs attention. The bright ones are for bars; the -ink ones are darker so numbers stay readable on white. */ .pt-win { z-index: 2; overflow: hidden; background: #fff; color: #000; font-size: 12px; line-height: 1.35; --pd-green: #18E588; --pd-amber: #FFB020; --pd-red: #ED3B49; --pd-green-ink: #1A7F4B; --pd-red-ink: #D92D20; --pd-blue-ink: #2B59C3; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 50px 90px -40px rgba(40, 30, 10, .5); } .pt-win .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pt-win .av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--panel); font-size: 11px; font-weight: 700; font-style: normal; } /* the product's sidebar: black, the B on top, one icon set, the chosen item lit with a white edge, the lower group apart, the owner at the bottom */ .pd-nav { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; background: #000; color: #8E8E93; } .pd-logo { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 10px; background: #fff; } .pd-logo svg { width: 13px; height: 17px; fill: #000; } .pd-nav i { position: relative; display: grid; justify-items: center; gap: 3px; width: 100%; padding: 6px 0 5px; border-radius: 12px; font-size: 9.5px; font-weight: 500; font-style: normal; letter-spacing: .01em; white-space: nowrap; } :is(.pt-win, .fl-win, .cl-win) .pd-nav .ic { width: 20px; height: 20px; stroke-width: 1.6; } .pd-nav i.on { background: rgba(255, 255, 255, .13); color: #fff; } .pd-nav i.on::before { content: ""; position: absolute; top: 50%; inset-inline-start: -8px; width: 3px; height: 20px; margin-top: -10px; border-radius: 3px; background: #fff; } .pd-nav i em { position: absolute; top: 2px; inset-inline-end: 11px; display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: #FF3B30; color: #fff; font-size: 9px; font-weight: 700; font-style: normal; box-shadow: 0 0 0 2px #000; } .pd-sep { flex: none; width: 26px; height: 1px; margin: auto 0 6px; background: rgba(255, 255, 255, .14); } .pd-me { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-top: 8px; border-radius: 50%; background: #2C2C2E; color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2px #000, 0 0 0 3.5px rgba(255, 255, 255, .22); } .pd-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 0 16px; overflow: hidden; } .pd-top { display: flex; align-items: center; justify-content: space-between; height: 42px; flex: none; margin: 0 -16px; padding: 0 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); } .pd-top b { font-size: 12.5px; color: #000; } .pd-top span { display: flex; gap: 14px; } .pd-top i { position: relative; display: grid; font-style: normal; } .pd-top .badge::after { content: attr(data-n); position: absolute; top: -5px; inset-inline-end: -7px; display: grid; place-items: center; min-width: 14px; height: 14px; border-radius: 7px; background: #000; color: #fff; font-size: 9px; font-weight: 700; } .pd-hi { display: flex; align-items: center; gap: 10px; flex: none; } .pd-hi .av { width: 34px; height: 34px; background: #000; color: #fff; font-size: 13px; } .pd-hi b { display: block; font-size: 15px; } .pd-hi small { font-size: 11.5px; color: var(--ink-2); } .pd-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: start; } .pd-c { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .pd-c.w2 { grid-column: span 2; } .pd-c h4 { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; } .pd-x { flex: none; width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); background: linear-gradient(var(--ink-2), var(--ink-2)) center / 8px 1px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) center / 1px 8px no-repeat; } .pd-c p { display: grid; justify-items: center; } .pd-c p b { font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .pd-c p small { font-size: 10.5px; color: var(--ink-2); } .pd-trend { margin-inline-start: 2px; font-size: 14px; } .pd-c .pd-g { color: var(--pd-green-ink); } .pd-c .pd-r { color: var(--pd-red-ink); } .pd-c .pd-b { color: var(--pd-blue-ink); } .pd-2, .pd-3 { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; } .pd-2 p + p, .pd-3 p + p { border-inline-start: 1px solid var(--line); } .pd-bday { grid-row: span 2; align-self: stretch; gap: 8px; border-color: transparent; background: var(--paper-2); } .pd-bday p { grid-template-columns: 26px 1fr; justify-items: start; align-items: center; column-gap: 8px; } .pd-bday p .av { grid-row: span 2; background: #fff; } .pd-bday p b { font-size: 12px; font-weight: 700; letter-spacing: 0; } .pd-bday .pd-link { margin-top: auto; font-size: 11px; font-weight: 700; text-decoration: underline; } /* Takings by month: time runs left to right, as in the product; the current month is black */ .pd-sum { font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; } .pd-bars { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 150px; margin-top: 6px; padding-bottom: 16px; direction: ltr; } .pd-bars span { position: relative; flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: var(--panel); } .pd-bars span.now { background: var(--pd-green); } .pd-bars span::after { content: attr(data-m); position: absolute; inset-inline: -6px; bottom: -16px; font-size: 9.5px; color: var(--ink-2); text-align: center; } .pd-avg { position: absolute; inset-inline: 0; bottom: calc(16px + 1.34px * var(--a)); border-top: 1.5px dashed #000; } .pd-avg b { position: absolute; top: -10px; left: 4px; padding: 2px 7px; border-radius: 999px; background: #000; color: #fff; font-size: 9.5px; font-weight: 700; direction: rtl; } .pd-sel { padding: 3px 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 10px; font-weight: 500; color: var(--ink-2); } .pd-meta { font-size: 11px; color: var(--ink-2); } .pd-meta b { color: #000; } .pd-cls li { display: grid; grid-template-columns: 38px minmax(0, 1fr) 54px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--paper-2); } .pd-cls time { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .pd-cls li p { justify-items: start; min-width: 0; } .pd-cls li p b { font-size: 12px; font-weight: 700; letter-spacing: 0; } .pd-cls li p small { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pd-cap { display: grid; gap: 4px; justify-items: end; font-size: 11px; font-weight: 700; } .pd-cap i, .pd-src i { width: 100%; height: 4px; border-radius: 2px; background: var(--panel) linear-gradient(var(--c), var(--c)) no-repeat right / var(--w) 100%; } .pd-cap i { --c: var(--pd-green); } .pd-cap i.mid { --c: var(--pd-amber); } .pd-cap i.lo { --c: var(--pd-red); } .pd-month { justify-self: center; font-size: 10.5px; color: var(--ink-2); } .pd-h5 { margin-top: 2px; font-size: 11px; font-weight: 700; } .pd-src { display: grid; grid-template-columns: 62px 1fr 12px; gap: 6px; align-items: center; font-size: 10.5px; } .pd-src span { display: flex; align-items: center; gap: 5px; } .pd-src span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); } .pd-src.ig { --c: #E1306C; } .pd-src.wa { --c: #25D366; } .pd-src.web { --c: #3B6FF5; } .pd-src b { font-weight: 700; } /* The trainee app: the home screen on a phone, what the app sends around it, the system faint behind */ .pt-ghost { overflow: hidden; background: rgba(255, 255, 255, .5); box-shadow: 0 50px 90px -40px rgba(40, 30, 10, .3); filter: blur(2px); } .pt-ghost i:first-child { background: rgba(0, 0, 0, .55); } .pt-ghost i:last-child { padding: 96px 16px 0; background: repeating-linear-gradient(rgba(0, 0, 0, .06) 0 78px, transparent 78px 88px) content-box; } .pt-phones { position: absolute; z-index: 2; inset: 40px 0 auto; display: flex; align-items: flex-start; justify-content: center; } .pt-phones .phone { flex: none; width: 268px; } /* The trainee app's home screen, in its own colours (from the owner's screen recordings, 28 Oct 2026) */ .ta { --ta-pink: #E6004F; --ta-pink-soft: #FAE5EC; --ta-green: #42F03B; --ta-blue: #2B7ECE; --ta-red: #D83D38; --ta-bg: #F5F5F5; --ta-grey: #E4E5E5; --ta-line: #E4E4E4; background: var(--ta-bg); font-size: 11px; line-height: 1.3; } .ta .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ta-screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: 30px; overflow: hidden; background: inherit; } .ta-screen p { margin: 0; } .ta-btn { display: grid; place-items: center; height: 26px; border-radius: 8px; font-size: 10.5px; } .ta-btn.pink { background: var(--ta-pink-soft); color: var(--ta-pink); } .ta-btn.grey { background: var(--ta-grey); } /* The studio and the small print */ .ta-fine { font-size: 9.5px; color: #777; } .ta-studio { display: flex; align-items: center; gap: 8px; } .ta-logo { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: #000; color: #fff; font-size: 13px; font-weight: 700; font-style: normal; } .ta-studio b { display: block; font-size: 12px; font-weight: 700; } .ta-studio small { font-size: 10px; color: #777; } /* The home screen: the next class, the membership, the tab bar */ .ta-home { gap: 8px; background: #fff; } .ta-home > :not(.ta-tabs) { margin-inline: 10px; } .ta-bar { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 2px; } .ta-bar > span { display: flex; align-items: center; gap: 5px; } .ta-ico { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ta-bg); font-style: normal; } .ta-badge::after { content: attr(data-n); position: absolute; top: -3px; inset-inline-end: -3px; display: grid; place-items: center; min-width: 13px; height: 13px; border-radius: 7px; background: var(--ta-red); color: #fff; font-size: 8px; font-weight: 700; } .ta-me { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border-radius: 7px; background: var(--ta-bg); font-size: 10.5px; } .ta-rules { display: grid; gap: 3px; padding: 8px 10px; border-radius: 10px; background: #EBEBEB; font-size: 10px; color: #333; } .ta-rules b { display: flex; align-items: center; gap: 5px; font-size: 10.5px; } .ta-rules b::before { content: ""; width: 7px; height: 7px; background: #3E8EF7; transform: rotate(45deg); } .ta-label { font-size: 10px; color: #8A8A8A; } .ta-card { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--ta-line); border-radius: 10px; margin-top: -4px; } .ta-next { display: grid; grid-template-columns: 14px 1fr; column-gap: 6px; align-items: center; } .ta-dot { grid-row: span 2; width: 13px; height: 13px; border-radius: 50%; background: var(--ta-green); } .ta-next b { font-size: 12px; font-weight: 700; } .ta-next small { font-size: 9.5px; color: #777; } .ta-u { font-size: 10px; text-decoration: underline; } .ta-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ta-card .ta-fine { justify-self: center; } .ta-plan { gap: 3px; } .ta-plan b { font-size: 12px; font-weight: 700; } .ta-plan small { font-size: 10px; color: #555; } .ta-plan hr { margin: 4px 0 2px; border: 0; border-top: 1px solid var(--ta-line); } /* the month as a row of dots, as in the app: used on the start side, the classes left in blue */ .ta-left { justify-self: center; font-size: 10.5px; color: #444; } .ta-dots { display: flex; gap: 3px; margin-top: 2px; direction: ltr; } .ta-dots i { flex: 1; height: 6px; border-radius: 3px; background: #EBEBED; box-shadow: inset 0 0 0 1px #DCDCDF; } .ta-dots i.on { background: var(--ta-blue); box-shadow: none; } .ta-range { display: flex; justify-content: space-between; } .ta-plan .ta-range small { font-size: 9.5px; } .ta-tabs { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 4px 12px; border-top: 1px solid #EEE; background: #fff; } .ta-tabs span { display: grid; justify-items: center; gap: 2px; font-size: 9.5px; } /* What the app sends, as cards on the photo like the hero's: a place opening up on the waiting list, a failed standing order, the cart */ .pt-note { position: absolute; z-index: 3; display: grid; gap: 10px; width: 300px; padding: 14px 16px 16px; border-radius: 18px; color: #000; background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .45); font-size: 13px; line-height: 1.4; } .pt-note p { margin: 0; } .pt-note .ic { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pt-note-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; white-space: nowrap; } .pt-note-h svg { width: 11px; height: 14px; fill: #000; } .pt-note-h span { margin-inline-start: auto; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; } .pt-note-t { font-size: 20px; font-weight: 700; line-height: 1.2; } .pt-note-s { color: var(--ink-2); } .pt-note-c { display: grid; gap: 2px; padding-block: 10px; border-block: 1px solid var(--line); } .pt-note-c b { font-size: 15px; font-weight: 700; } .pt-note-c span { display: flex; align-items: center; gap: 6px; font-size: 13.5px; } .pt-note-st { display: flex; align-items: center; gap: 10px; } .pt-note-st i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: #000; color: #fff; font-size: 14px; font-weight: 700; font-style: normal; } .pt-note-st b { display: block; font-size: 14px; font-weight: 700; } .pt-note-st small { font-size: 12px; color: var(--ink-2); } .pt-note-a { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 2px; } .pt-note-a span { display: grid; place-items: center; height: 40px; border-radius: 12px; font-size: 14px; font-weight: 700; } .pt-note-a .yes { background: #000; color: #fff; } .pt-note-a .no { box-shadow: inset 0 0 0 1.5px #E6004F; color: #E6004F; } .pt-offer { top: 40px; inset-inline-end: 24px; } .pt-pay { top: 40px; inset-inline-start: 24px; } .pt-cart { bottom: 24px; inset-inline-start: 24px; } .pt-note-t .alert { display: flex; align-items: center; gap: 8px; } .pt-note-t .alert .ic { width: 22px; height: 22px; color: #D83D38; } .pt-note-t .alert.ok .ic { color: #1A7F4B; } .pt-note-a.one { grid-template-columns: 1fr; } .pt-cc { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 10px; } .pt-cc .ic { width: 24px; height: 24px; color: var(--ink-2); } .pt-cc small { display: block; font-size: 12px; color: #D83D38; } .pt-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; } .pt-item i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; } .pt-item i.pink { background: #FAE5EC; color: #E6004F; } .pt-item i.teal { background: #E1F5F6; color: #1E9C96; } .pt-item i .ic { width: 20px; height: 20px; } .pt-item p b { display: block; font-size: 14px; font-weight: 700; } .pt-item p small { font-size: 12px; color: var(--ink-2); } .pt-item > b { font-size: 14px; font-weight: 700; } .pt-total { display: flex; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; } /* the cart pays three ways, each in its own colours */ .pt-pays { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 2px; } .pt-pays span { display: flex; align-items: center; justify-content: center; gap: 2px; height: 40px; border-radius: 12px; direction: ltr; } .pt-pays .bit { background: #00353B; } .pt-pays .bit svg { width: 36px; height: 20px; fill: #fff; } .pt-pays .mc { background: #fff; box-shadow: inset 0 0 0 1px var(--line); } .pt-pays .mc svg { width: 32px; height: 20px; } .pt-pays .ap { background: #000; color: #fff; font-size: 16px; font-weight: 600; } .pt-pays .ap svg { width: 15px; height: 15px; margin-top: -3px; fill: #fff; } /* The store links, on a card over the photo */ .pt-card { position: absolute; z-index: 3; bottom: 24px; inset-inline-end: 24px; display: grid; gap: 10px; width: 280px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 20px 40px -20px rgba(0, 0, 0, .5); font-size: 13.5px; line-height: 1.4; } .pt-card .stores { flex-wrap: nowrap; gap: 8px; } .pt-card .store { height: 38px; gap: 6px; padding: 0 12px; border-color: #000; color: #000; font-size: 13px; } .pt-card .store:hover { background: #000; color: #fff; } .pt-card .store svg { width: 16px; height: 16px; } .pt-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .pt-rate .stars svg { width: 13px; height: 13px; } .pt-rate small { flex-basis: 100%; font-size: 12.5px; color: var(--ink-2); } /* Narrower stages: the window loses its menu, then (phones) keeps the main cards in two columns */ @container (max-width: 999px) { .pt-win, .pt-ghost { inset-inline-start: 32px; width: calc(100% - 64px); } .pt-stage .pt-note { width: 280px; } } @container (max-width: 909px) { /* tablets: the phone right of centre, the offer and the store card beside it */ .pt-pay, .pt-cart { display: none; } .pt-phones { padding-inline-end: 340px; } } @container (max-width: 759px) { .pt-win, .pt-ghost { top: 28px; inset-inline-start: 24px; width: calc(100% - 48px); grid-template-columns: minmax(0, 1fr); } :not(.win) > .pd-nav, .pt-ghost i:first-child { display: none; } /* not the inner pages' .win: its own query drops the menu */ } @container (max-width: 659px) { .pt-stage .pt-note { width: 250px; } .pt-phones { padding-inline-end: 300px; } } @container (max-width: 579px) { .pt-win { top: 20px; bottom: 0; inset-inline: 16px; width: auto; border-radius: 16px 16px 0 0; } .pd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pd-c.w2 { grid-column: 1 / -1; } .pd-c.w2.m-half { grid-column: auto; align-self: stretch; align-content: space-between; } .pd-c.m-half h4 { white-space: normal; } .pd-c.m-half .pd-x { display: none; } .pd-bday, .pd-c.m-off { display: none; } /* phones: the home screen alone, a little smaller, above the store card */ .pt-ghost, .pt-stage .pt-note { display: none; } .pt-phones { inset-block-start: 24px; padding-inline-end: 0; } .pt-phones .phone { transform: scale(.9); transform-origin: 50% 0; } .pt-card { inset-inline: 16px; bottom: 16px; width: auto; } } @media (max-width: 699px) { .pt-tabs [role="tab"] { padding: 16px 14px 18px; } .pt-tabs b { font-size: 18px; } .pt-tabs small { display: none; } .pt-stage { height: 680px; } } /* ---------- The two products, alive (site.js runs a short story each time a tab opens on screen) ---------- The management system: the dashboard fills in, a payment arrives, the evening class fills up. The trainee app: a free place is taken, the card is updated, the cart is paid. The markup is the resting state, which is what reduced motion and no JS show. */ /* a swap: the old text leaves upwards as the new one arrives from below, in the same place */ .sw { display: inline-grid; } .sw-a { display: grid; } .sw > * { grid-area: 1 / 1; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .1, 1); } .sw > :last-child { opacity: 0; transform: translateY(8px); } .s-yes .sw[data-k="yes"] > :first-child, .s-fix .sw[data-k="fix"] > :first-child, .s-paid .sw[data-k="paid"] > :first-child { opacity: 0; transform: translateY(-8px); } .s-yes .sw[data-k="yes"] > :last-child, .s-fix .sw[data-k="fix"] > :last-child, .s-paid .sw[data-k="paid"] > :last-child { opacity: 1; transform: none; } /* a tap: the button gives a little and a ring spreads from the finger */ .tap { position: relative; overflow: hidden; transition: transform .15s ease; } .tap.is-tap { transform: scale(.95); } .tap.is-tap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px; border-radius: 50%; background: rgba(255, 255, 255, .5); animation: pt-tap .6s ease-out both; } @keyframes pt-tap { from { transform: scale(0); opacity: 1; } to { transform: scale(7); opacity: 0; } } /* The management system: the dashboard fills in */ @media (prefers-reduced-motion: no-preference) { .pt-panel.live .pd-bars span { transform-origin: 50% 100%; animation: pd-grow .9s cubic-bezier(.2, .7, .1, 1) both; } .pt-panel.live .pd-bars span:nth-child(1) { animation-delay: .3s; } .pt-panel.live .pd-bars span:nth-child(2) { animation-delay: .38s; } .pt-panel.live .pd-bars span:nth-child(3) { animation-delay: .46s; } .pt-panel.live .pd-bars span:nth-child(4) { animation-delay: .54s; } .pt-panel.live .pd-bars span:nth-child(5) { animation-delay: .62s; } .pt-panel.live .pd-bars span:nth-child(6) { animation-delay: .7s; } .pt-panel.live .pd-avg { animation: pd-draw 1s cubic-bezier(.2, .7, .1, 1) 1.1s both; } .pt-panel.live .pd-cap i, .pt-panel.live .pd-src i { animation: pd-meter 1s cubic-bezier(.2, .7, .1, 1) backwards; } .pt-panel.live .pd-cls li:nth-child(1) i { animation-delay: .5s; } .pt-panel.live .pd-cls li:nth-child(2) i { animation-delay: .6s; } .pt-panel.live .pd-cls li:nth-child(3) i { animation-delay: .7s; } .pt-panel.live .pd-cls li:nth-child(4) i { animation-delay: .8s; } .pt-panel.live .pd-src.ig i { animation-delay: .9s; } .pt-panel.live .pd-src.wa i { animation-delay: 1s; } .pt-panel.live .pd-src.web i { animation-delay: 1.1s; } } @keyframes pd-grow { from { transform: scaleY(0); } } @keyframes pd-draw { from { clip-path: inset(0 100% 0 0); } } @keyframes pd-meter { from { background-size: 0 100%; } } .pd-cap i { transition: background-size .8s cubic-bezier(.2, .7, .1, 1); } /* then something happens: a notification under the bell, and the card it moves lights up */ .pd-toast { position: absolute; z-index: 3; top: 50px; inset-inline-end: 14px; display: flex; align-items: center; gap: 10px; width: 264px; padding: 10px 14px 10px 12px; border-radius: 14px; background: #000; color: #fff; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(-10px) scale(.96); pointer-events: none; transition: opacity .3s ease, transform .55s cubic-bezier(.3, 1.3, .5, 1); } .pt-panel.s-toast .pd-toast { opacity: 1; transform: none; } .pd-toast p { display: grid; gap: 1px; min-width: 0; } .pd-toast b { font-size: 12.5px; font-weight: 700; } .pd-toast small { font-size: 11px; color: #A9A9AE; } .pd-ok { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--pd-green) var(--tick-ink) center / 14px no-repeat; } .pd-flash { animation: pd-flash 1.4s ease-out; } @keyframes pd-flash { from { background-color: #E3FBEF; box-shadow: 0 0 0 2px var(--pd-green); } } .pd-cls li.pd-flash { border-radius: 8px; } .pt-panel.live .pd-bars span.pd-flash { animation: pd-pulse 1.2s ease-out; } @keyframes pd-pulse { 35% { transform: scaleY(1.05); filter: brightness(1.12); } } .pd-top .badge.bump::after { animation: pd-bump .5s cubic-bezier(.3, 1.6, .5, 1); } @keyframes pd-bump { from { transform: scale(.3); } } /* The trainee app: what it sends arrives one card at a time */ .pt-panel.anim .pt-note { opacity: 0; transform: translateY(14px) scale(.96); } .pt-panel.anim .pt-note { transition: opacity .45s ease, transform .7s cubic-bezier(.3, 1.25, .5, 1); } .pt-panel.anim.s-offer .pt-offer, .pt-panel.anim.s-pay .pt-pay, .pt-panel.anim.s-cart .pt-cart { opacity: 1; transform: none; } .pt-note-a .done { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 12px; background: var(--panel); font-size: 14px; font-weight: 700; } .pt-note-a .done .ic, .pt-note-a .yes .ic, .pt-paid .ic { width: 18px; height: 18px; stroke-width: 2.6; } .pt-note-a .yes .sw > :last-child { display: flex; align-items: center; justify-content: center; gap: 6px; } .pt-cc small.sw { display: grid; } .pt-cc small .ok { color: var(--ink-2); } .pt-paid { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; margin: 2px 0 0; border-radius: 12px; background: var(--panel); font-size: 14px; font-weight: 700; } /* on the phone: the confirmation drops in from the top, and the month loses a class */ .ta-push { position: absolute; z-index: 5; top: 30px; inset-inline: 8px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 12px 26px -10px rgba(0, 0, 0, .4); opacity: 0; transform: translateY(-140%); transition: transform .6s cubic-bezier(.3, 1.2, .5, 1), opacity .3s ease; } .pt-panel.s-push .ta-push { opacity: 1; transform: none; } .ta-home > .ta-push { margin-inline: 0; } .ta-push p { flex: 1; min-width: 0; } .ta-push b { display: block; font-size: 10.5px; font-weight: 700; } .ta-push small { font-size: 10px; color: #333; } .ta-push > span { align-self: flex-start; font-size: 9px; color: #8A8A8A; } .ta-pi { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; background: #000; } .ta-pi svg { width: 9px; height: 12px; fill: #fff; } .ta-dots i { transition: background-color .5s ease, box-shadow .5s ease; } .s-yes .ta-dots i.use { background: #EBEBED; box-shadow: inset 0 0 0 1px #DCDCDF; } /* ---------- Customers: their logos under the two products, as on the current site ---------- */ .clients { display: grid; gap: clamp(28px, 3.4vw, 44px); margin-top: clamp(64px, 8vw, 112px); } .clients-h { justify-self: center; text-align: center; font-size: 17px; font-weight: 500; color: var(--ink-2); } .clients-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(18px, 2.6vw, 36px) clamp(12px, 2.6vw, 36px); } .clients-grid li, .clients-grid a { display: grid; place-items: center; height: 96px; } .clients-grid a { border-radius: 12px; } /* the files carry their own empty margin, so they are drawn at the full cell height */ .clients-grid img { width: auto; height: 100%; max-width: 100%; object-fit: contain; filter: grayscale(1); transition: filter .2s; } .clients-grid a:hover img { filter: none; } @media (max-width: 719px) { .clients-grid { grid-template-columns: repeat(4, 1fr); } .clients-grid li, .clients-grid a { height: 60px; } } /* ---------- Business management: three topics as tabs under a photo of the owner, Intercom style ---------- */ .bm-stage { position: relative; height: 640px; overflow: hidden; isolation: isolate; container: bm / inline-size; border-radius: 0 0 26px 26px; background: radial-gradient(rgba(0, 0, 0, .07) 1px, transparent 1.6px) 0 0 / 22px 22px, linear-gradient(165deg, #F5F5F7 0%, #E4E4E9 100%); } /* money, as a story: a trainee pays in the app (the phone, left), the payment lands in the CRM's כרטסת as a new line (the window, right), the report goes to the accountant. The markup holds the end state (.is-static: reduced motion, no JS); site.js plays the steps as classes on .fl */ .fl { position: absolute; inset: 0; --ok: #16A34A; --ok-soft: #E8F7EE; } .fl .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :where(.fl) p { margin: 0; } /* the phone: a current iPhone with the studio's checkout, the Apple Pay sheet, then the receipt */ .fl .fl-phone { position: absolute; z-index: 2; top: 64px; inset-inline-end: 56px; width: 236px; border: 7px solid #0B0B0C; border-radius: 44px; transform: scale(var(--s, 1)); transform-origin: top left; box-shadow: 0 0 0 1.5px #48484A, 0 44px 80px -34px rgba(0, 0, 0, .45); } .fl .fl-phone::before { top: 9px; width: 76px; height: 22px; margin-left: -38px; border-radius: 12px; background: #000; z-index: 4; } .fl-screen { position: absolute; inset: 0; overflow: hidden; border-radius: 37px; background: #fff; } .fl-screen::after { content: ""; position: absolute; z-index: 2; inset: 0; background: rgba(0, 0, 0, .32); opacity: 0; transition: opacity .3s ease; } .fl-status { position: absolute; z-index: 3; top: 13px; inset-inline: 24px; display: flex; align-items: center; justify-content: space-between; direction: ltr; font-size: 11.5px; } .fl-status b { font-weight: 700; } .fl-status svg { width: 46px; height: 10px; fill: currentColor; } .fl-checkout, .fl-paid { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 44px 14px 14px; transition: opacity .35s ease, transform .35s ease; } .fl-nav { display: grid; grid-template-columns: 22px 1fr 22px; align-items: center; margin-bottom: 14px; text-align: center; } .fl-nav .ic { width: 18px; height: 18px; } .fl-nav b { font-size: 14px; font-weight: 700; } .fl-prod { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, #FFF3F7, #FCE4EC); } .fl-prod i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: #E6004F; box-shadow: 0 3px 8px -2px rgba(230, 0, 79, .25); } .fl-prod i .ic { width: 21px; height: 21px; } .fl-prod b { display: block; font-size: 13.5px; font-weight: 800; } .fl-prod small { font-size: 11px; color: #9A5A70; } .fl-lines { display: grid; gap: 8px; margin-top: 14px; padding: 0 2px; font-size: 12px; } .fl-lines p { display: flex; justify-content: space-between; color: var(--ink-2); } .fl-lines b { color: #000; font-weight: 600; } .fl-total { display: flex; align-items: baseline; justify-content: space-between; margin: auto 2px 12px; padding-top: 12px; border-top: 1px dashed #D9D9DE; font-size: 12.5px; } .fl-total b { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; } .fl-ap { position: relative; display: flex; align-items: center; justify-content: center; gap: 2px; height: 44px; border-radius: 13px; background: #000; color: #fff; font-size: 18px; font-weight: 600; direction: ltr; transition: transform .15s ease; } .fl-ap svg { width: 17px; height: 17px; margin-top: -3px; fill: #fff; } .fl-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; } .fl-alt span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 11px; font-size: 12px; font-weight: 600; } .fl-alt .bit { background: #00353B; } .fl-alt .bit svg { width: 28px; height: 16px; fill: #fff; } .fl-alt .card { background: #F2F2F5; } /* the Apple Pay sheet, dark as on iOS; Face ID turns green */ .fl-sheet { position: absolute; z-index: 3; inset: auto 6px 6px; display: grid; gap: 10px; padding: 16px 16px 14px; border-radius: 28px; background: #1C1C1E; color: #fff; transform: translateY(112%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); } .fl-sheet-tag { display: none; } .fl-sheet-h { display: flex; align-items: center; justify-content: space-between; direction: ltr; } .fl-sheet-h span { display: flex; align-items: center; gap: 1px; font-size: 17px; font-weight: 600; } .fl-sheet-h svg { width: 16px; height: 16px; margin-top: -3px; fill: #fff; } .fl-sheet-h small { font-size: 12px; color: #0A84FF; } .fl-sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 12px; } .fl-sheet-row:nth-child(2) { justify-content: flex-start; } .fl-sheet-row span b { display: block; font-size: 12px; font-weight: 600; } .fl-sheet-row small { font-size: 11px; color: #98989F; } .fl-visa { width: 34px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #1A1F71, #3B6FD8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); } .fl-face { display: grid; justify-items: center; gap: 4px; padding-top: 4px; color: #fff; font-size: 11px; transition: color .25s ease; } .fl-face svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .fl-face .ok, .fl-face small.ok { display: none; } /* the receipt */ .fl-paid { align-items: center; padding-top: 74px; text-align: center; } .fl-badge { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--ok); box-shadow: 0 10px 24px -8px rgba(22, 163, 74, .55); } .fl-badge svg { width: 30px; height: 30px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .fl-badge path { --d: 30; stroke-dasharray: 30; } .fl-badge::before, .fl-badge::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--ok); border-radius: 50%; opacity: 0; } .fl-paid > b { margin-top: 16px; font-size: 16px; font-weight: 800; } .fl-paid-sum { font-size: 34px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; } .fl-receipt { display: grid; gap: 9px; width: 100%; margin-top: 18px; padding: 13px 14px; border-radius: 14px; background: #F5F5F7; font-size: 11.5px; text-align: start; } .fl-receipt p { display: flex; justify-content: space-between; color: var(--ink-2); } .fl-receipt b { color: #000; font-weight: 600; } .fl-receipt .ok b { color: var(--ok); } /* the CRM window: about three quarters of the stage, cut by its edge, open on the כרטסת */ .fl-win { position: absolute; z-index: 1; top: 40px; bottom: -90px; inset-inline-start: -2px; width: calc(75% + 2px); display: grid; grid-template-columns: 64px minmax(0, 1fr); overflow: hidden; border-radius: 18px; background: #fff; color: #0B0B0C; font-size: 12.5px; line-height: 1.35; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .04), 0 40px 80px -40px rgba(0, 0, 0, .3); } .fl-main { position: relative; display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 22px 24px; } .fl-head { display: flex; align-items: center; gap: 8px; } .fl-title { margin-inline-end: auto; } .fl-title small { display: block; font-size: 11.5px; color: var(--ink-2); } .fl-title b { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } .fl-search, .fl-pill, .fl-export, .fl-sent { position: relative; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 12px; white-space: nowrap; } .fl-search { width: 160px; background: #F4F4F6; color: var(--ink-2); } .fl-pill { box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; } .fl-export { background: #0B0B0C; color: #fff; font-weight: 600; transition: transform .15s ease; } .fl-sent { display: none; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 700; } .fl-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .fl-stats p { display: grid; gap: 4px; padding: 14px 16px; border-radius: 14px; background: #F6F6F8; } .fl-stats small { font-size: 11.5px; color: var(--ink-2); } .fl-num { display: flex; align-items: center; gap: 8px; } .fl-num b { font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .fl-delta { flex: none; padding: 2px 7px; border-radius: 999px; white-space: nowrap; background: var(--ok-soft); color: var(--ok); font-size: 11px; font-weight: 700; font-style: normal; opacity: 0; transform: scale(.6); } .fl-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); } .fl-tabs span { padding-bottom: 10px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; } .fl-tabs .on { color: #000; font-weight: 700; box-shadow: inset 0 -2px 0 #000; } /* the documents, newest first; the new payment opens at the top */ .fl-th, .fl-tr { display: grid; grid-template-columns: minmax(0, 1fr) 88px 112px 70px 96px; gap: 12px; align-items: center; } .fl-th { margin-top: -8px; padding: 0 10px 2px; font-size: 11px; color: var(--ink-2); } .fl-tr { height: 52px; padding: 0 10px; border-top: 1px solid #F0F0F3; border-radius: 10px; font-size: 12.5px; } .fl-who { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 0; } .fl-who i { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 12px; font-weight: 700; font-style: normal; } .fl-who b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; } .fl-who small { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .av-green { background: #E6F7EC; color: #156B3F; } .av-violet { background: #EEE9FB; color: #5B3FB5; } .av-blue { background: #E5EEFB; color: #2050B0; } .av-pink { background: #FCE7EF; color: #B0003C; } .av-amber { background: #FCF3E2; color: #8A5A08; } .av-teal { background: #E1F5F6; color: #126E6A; } .fl-date { color: var(--ink-2); font-variant-numeric: tabular-nums; } .fl-amt { font-weight: 700; font-variant-numeric: tabular-nums; } .fl-m { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 11.5px; font-weight: 600; font-style: normal; white-space: nowrap; } .fl-m.ap { gap: 1px; background: #000; color: #fff; font-size: 12px; direction: ltr; } .fl-m.ap svg { width: 11px; height: 11px; margin-top: -2px; fill: #fff; } .fl-m.bit { background: #00353B; } .fl-m.bit svg { width: 24px; height: 14px; fill: #fff; } .fl-m.card, .fl-m.hok { background: #F4F4F6; color: #333; } .fl-m .ic { width: 13px; height: 13px; } .fl-m.card { direction: ltr; font-variant-numeric: tabular-nums; } .fl-tr em { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; font-style: normal; white-space: nowrap; } .fl-tr em::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); } .fl-tr em.open::before { background: #F59E0B; box-shadow: 0 0 0 3px #FEF3C7; } .fl-new { height: 0; opacity: 0; overflow: hidden; border-top-color: transparent; transition: height .45s cubic-bezier(.2, .7, .1, 1), opacity .3s ease; } .fl-new .fl-sum { color: var(--ok); } /* the send dialog, as in the product: "דוח הכנסות" to the accountant's email, then the success screen */ .fl-win::after { content: ""; position: absolute; z-index: 1; inset: 0; background: rgba(15, 15, 20, .3); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .fl-dialog { position: absolute; z-index: 2; top: 84px; left: 50%; width: 290px; margin-left: -145px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 60px -20px rgba(0, 0, 0, .45); opacity: 0; transform: scale(.94) translateY(10px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .1, 1); } .fl-d-h { display: flex; align-items: center; justify-content: space-between; } .fl-d-h b { font-size: 16px; font-weight: 800; } .fl-d-h i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #F4F4F6; font-size: 15px; font-style: normal; } .fl-d-sub { margin: 2px 0 14px; font-size: 11.5px; color: var(--ink-2); } .fl-form { display: grid; gap: 10px; } .fl-field { display: grid; gap: 4px; } .fl-field small { font-size: 11px; font-weight: 600; color: var(--ink-2); } .fl-field span { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 12px; border-radius: 10px; background: #F4F4F6; font-size: 12.5px; } .fl-go { position: relative; display: grid; place-items: center; height: 42px; margin-top: 6px; border-radius: 12px; background: #0B0B0C; color: #fff; font-size: 13.5px; font-weight: 700; transition: transform .15s ease; } .fl-ok { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 20px; border-radius: inherit; background: #fff; text-align: center; opacity: 0; transition: opacity .3s ease; } .fl-ok b { margin-top: 8px; font-size: 15px; font-weight: 800; } .fl-ok small { font-size: 12px; color: var(--ink-2); } .fl-chip { position: absolute; z-index: 5; top: 0; left: 0; padding: 6px 12px; border-radius: 999px; background: var(--ok); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; } /* the steps */ .fl.is-static .fl-checkout, .fl.s-paid .fl-checkout { opacity: 0; transform: scale(.98); } .fl-paid { opacity: 0; transform: scale(.96); } .fl.is-static .fl-paid, .fl.s-paid .fl-paid { opacity: 1; transform: none; } .fl.s-sheet .fl-sheet { transform: none; } .fl.s-sheet .fl-screen::after { opacity: 1; } .fl.s-paid .fl-sheet { transform: translateY(112%); transition-duration: .3s; } .fl.s-paid .fl-screen::after { opacity: 0; } .fl.s-face .fl-face { color: #30D158; } .fl.s-face .fl-face .scan { display: none; } .fl.s-face .fl-face .ok, .fl.s-face .fl-face small.ok { display: block; } .fl.s-paid .fl-paid .fl-badge path, .fl.s-sent .fl-ok .fl-badge path { animation: fl-draw .45s .15s ease-out both; } .fl.s-paid .fl-paid .fl-badge::before, .fl.s-sent .fl-ok .fl-badge::before { animation: fl-ring 1.2s .1s ease-out both; } .fl.s-paid .fl-paid .fl-badge::after, .fl.s-sent .fl-ok .fl-badge::after { animation: fl-ring 1.2s .4s ease-out both; } .fl.is-static .fl-new, .fl.s-row .fl-new { height: 52px; opacity: 1; } .fl.is-static .fl-new { background: #F2FBF5; } .fl.s-row .fl-new { animation: fl-flash 1.8s ease-out both; } .fl.is-static .fl-delta, .fl.s-row .fl-delta { opacity: 1; transform: none; transition: opacity .3s ease .25s, transform .4s cubic-bezier(.3, 1.6, .5, 1) .25s; } .fl.is-static .fl-sent { display: flex; } .fl.s-dialog .fl-win::after { opacity: 1; } .fl.s-dialog .fl-dialog { opacity: 1; transform: none; } .fl.s-sent .fl-ok { opacity: 1; } .fl.s-out .fl-dialog { opacity: 0; transform: scale(.96); } .fl.s-out .fl-win::after { opacity: 0; } /* a finger's tap, then the button at work */ .fl.s-tap-pay .fl-ap, .fl.s-tap-export .fl-export, .fl.s-tap-gen .fl-go { transform: scale(.95); } .fl.s-tap-pay .fl-ap::after, .fl.s-tap-export .fl-export::after, .fl.s-tap-gen .fl-go::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); animation: fl-tap .6s ease-out both; pointer-events: none; } .fl.s-gen .fl-go b { opacity: 0; } .fl.s-gen .fl-go::before { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: fl-spin .7s linear infinite; } @keyframes fl-draw { from { stroke-dashoffset: var(--d); } } @keyframes fl-flash { 0%, 35% { background: #DDF5E6; } 100% { background: #F2FBF5; } } @keyframes fl-tap { 0% { transform: scale(1.7); opacity: 0; } 35% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes fl-spin { to { transform: rotate(360deg); } } @keyframes fl-ring { from { transform: scale(1); opacity: .55; } to { transform: scale(1.9); opacity: 0; } } /* the money topic tells a longer story: every topic gets 12 seconds */ .bm.playing [aria-selected="true"] .pt-bar { animation-duration: 12s; } /* calendar and memberships, as a story: the CRM's יומן on the week (from the owner's screen recording of the product's calendar); a new class goes on today and the trainees book it from the app, one by one, until it is full; then its list opens (the owner tried cards like the hero's and kept the popup): who's new and comes for the first time, who's back after 14 days, whose membership ends; then the attendance is marked, one by one. The markup holds the end state (.is-static: reduced motion, no JS); site.js plays the steps as classes on .cl */ .cl { position: absolute; inset: 0; --cl-end: 56px; --ok: #16A34A; /* the new class in Boostapp's lime: the lime itself for its chips (black text, like the buttons), a deeper lime for its ring and bar, a light tint behind */ --new: #BAFD4F; --new-deep: #84CC16; --new-soft: #F1FDDC; --new-ink: #3F6212; } .cl .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :where(.cl) p { margin: 0; } /* the window: cut by the stage's right edge and bottom, like the כרטסת's */ .cl-win { position: absolute; z-index: 1; top: 40px; bottom: -90px; inset-inline-start: -2px; inset-inline-end: var(--cl-end); display: grid; grid-template-columns: 64px minmax(0, 1fr); overflow: hidden; border-radius: 18px; background: #fff; color: #0B0B0C; font-size: 12.5px; line-height: 1.35; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .04), 0 40px 80px -40px rgba(0, 0, 0, .3); } .cl-nav, .cl-add { position: relative; display: flex; align-items: center; gap: 4px; height: 34px; padding: 0 8px; border-radius: 10px; font-size: 12px; font-weight: 600; white-space: nowrap; } .cl-nav { box-shadow: inset 0 0 0 1px var(--line); } .cl-nav .ic { width: 14px; height: 14px; color: var(--ink-2); } .cl-add { gap: 6px; padding: 0 12px; background: #0B0B0C; color: #fff; transition: transform .15s ease; } .cl-add .ic { width: 14px; height: 14px; stroke-width: 2.2; } /* the week: a column a day with its date on top, hairlines between them, today shaded; a few classes each, tinted by type */ .cl-cols { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: -6px -8px 0; } .cl-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 0 8px 16px; } .cl-col + .cl-col { border-inline-start: 1px solid #F0F0F3; } .cl-col.on { border-radius: 14px 14px 0 0; background: #F6F6F8; } .cl-col.on, .cl-col.on + .cl-col { border-color: transparent; } .cl-day { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; font-size: 12px; color: var(--ink-2); } .cl-day b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #000; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .cl-col.on .cl-day { color: #000; font-weight: 600; } .cl-col.on .cl-day b { background: #000; color: #fff; font-size: 13px; } .cl-c { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: none; height: 58px; padding: 0 10px; overflow: hidden; border-radius: 10px; } .cl-c > b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #0B0B0C; font-size: 12.5px; font-weight: 700; } .cl-m { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; } .cl-n { display: flex; align-items: center; gap: 3px; margin-inline-start: auto; font-size: 11px; font-weight: 600; opacity: .85; } .cl-n svg { width: 12px; height: 12px; } .cl-n b { display: inline-block; font-weight: 700; } .cl-c.pink { background: #FCEDF2; color: #B0003C; } .cl-c.blue { background: #EBF2FC; color: #2050B0; } .cl-c.gold { background: #FCF5E6; color: #8A5A08; } .cl-c.green { background: #EAF7EF; color: #156B3F; } .cl-c.teal { background: #E6F6F7; color: #126E6A; } .cl-c.lime { background: var(--new-soft); color: var(--new-ink); } /* the new class: it opens up in its place, ringed; its bar fills as the trainees book, "חדש" turns "מלא"; it stays lit when the window dims */ .cl-slot { flex: none; height: 0; margin-bottom: -8px; overflow: hidden; opacity: 0; transition: height .5s cubic-bezier(.2, .7, .1, 1), margin .5s cubic-bezier(.2, .7, .1, 1), opacity .3s ease; } .cl-new { z-index: 2; height: 72px; box-shadow: inset 0 0 0 1.5px var(--new-deep); transition: transform .15s ease; } .cl-pr { display: flex; align-items: center; gap: 6px; } .cl-bar { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(132, 204, 22, .22); } .cl-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--new-deep); } .cl-tag, .cl-full { flex: none; padding: 1px 6px; border-radius: 6px; background: var(--new); color: #000; font-size: 10px; font-weight: 700; font-style: normal; } .cl-full { display: none; } .cl-toast { position: absolute; z-index: 3; bottom: 34px; left: calc(50% + var(--cl-end) / 2); display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #0B0B0C; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, 12px); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .5); pointer-events: none; } .cl-toast .ic { width: 17px; height: 17px; color: #30D158; stroke-width: 2.2; } /* the class's list, as in the product: a header in the class's lime tint, who is booked, their membership's balance, attendance */ .cl-win::after { content: ""; position: absolute; z-index: 1; inset: 0; background: rgba(15, 15, 20, .3); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .cl-dialog { position: absolute; z-index: 2; top: 56px; right: 88px; width: 440px; overflow: hidden; border-radius: 20px; background: #fff; color: #0B0B0C; font-size: 12.5px; line-height: 1.35; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 60px -20px rgba(0, 0, 0, .45); opacity: 0; transform: scale(.94) translateY(10px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .1, 1); } .cl-d-top { display: grid; gap: 10px; padding: 18px 20px 16px; background: var(--new-soft); } .cl-d-h { display: flex; align-items: center; gap: 8px; } .cl-d-h b { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; } .cl-d-h em { padding: 2px 8px; border-radius: 6px; background: var(--new); color: #000; font-size: 11px; font-weight: 700; font-style: normal; } .cl-d-h i { display: grid; place-items: center; width: 28px; height: 28px; margin-inline-start: auto; border-radius: 50%; background: #fff; } .cl-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: #4E5A3A; } .cl-meta span { display: flex; align-items: center; gap: 5px; } .cl-meta .ic { width: 14px; height: 14px; } .cl-d-body { padding: 14px 20px 16px; } .cl-seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #F4F4F6; } .cl-seg span { flex: 1; display: flex; justify-content: center; gap: 5px; padding: 7px 0; border-radius: 9px; font-size: 12px; color: var(--ink-2); white-space: nowrap; } .cl-seg .on { background: #fff; color: #000; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); } .cl-seg b { font-variant-numeric: tabular-nums; } .cl-th, .cl-r { display: grid; grid-template-columns: minmax(0, 1fr) 76px 64px; gap: 10px; align-items: center; } .cl-th { margin-top: 14px; padding: 0 4px 6px; font-size: 11px; color: var(--ink-2); } .cl-th span:last-child { text-align: center; } .cl-r { min-height: 54px; padding: 0 4px; border-top: 1px solid #F0F0F3; } .cl-who { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 0; } .cl-who > i { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 12px; font-weight: 700; font-style: normal; } .cl-who p { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; } .cl-who b { font-size: 13px; font-weight: 700; white-space: nowrap; } .cl-who small { font-size: 11px; color: var(--ink-2); } .cl-r em { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; font-style: normal; white-space: nowrap; } .cl-r em .ic { width: 11px; height: 11px; stroke-width: 2.2; } /* a first class carries the product's trial mark, the blue asterisk, as on the hero's pin */ .cl-r .t-new { background: #E8F1FE; color: #1F5FC8; } .cl-r .t-new .ic { width: 12px; height: 12px; color: #3B87F7; stroke-width: 3.4; } .cl-r .t-back { background: #FEF3C7; color: #92400E; } .cl-r .t-end { background: #FEE2E2; color: #B91C1C; } .cl-bal { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .cl-bal.end { color: #B91C1C; } /* attendance: ✓ turns green, ✗ steps back */ .cl-att { display: flex; justify-content: center; gap: 6px; } .cl-att i { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); transition: background .2s ease, color .2s ease, box-shadow .2s ease, opacity .25s ease; } .cl-att .ic { width: 14px; height: 14px; stroke-width: 2.2; } .cl-sum { display: flex; align-items: center; gap: 6px; margin-top: 2px; padding: 12px 4px 0; border-top: 1px solid #F0F0F3; font-size: 12.5px; color: var(--ink-2); } .cl-sum .ic { width: 17px; height: 17px; color: var(--ok); } .cl-sum b { display: inline-block; color: #000; font-weight: 800; font-variant-numeric: tabular-nums; } /* the steps */ .cl.is-static .cl-slot, .cl.s-new .cl-slot { height: 72px; margin-bottom: 0; opacity: 1; } .cl.s-new .cl-new { animation: cl-flash 1.8s ease-out both; } .cl.s-new .cl-toast { animation: cl-toast 2.4s .35s ease both; } .cl b.bump { animation: cl-bump .35s cubic-bezier(.3, 1.6, .5, 1); } .cl.is-static .cl-full, .cl.s-full .cl-full { display: block; } .cl.is-static .cl-tag, .cl.s-full .cl-tag { display: none; } .cl.is-static .cl-win::after, .cl.s-dialog .cl-win::after { opacity: 1; } .cl.is-static .cl-dialog, .cl.s-dialog .cl-dialog { opacity: 1; transform: none; } .cl.s-out .cl-dialog { opacity: 0; transform: scale(.96); } .cl.s-out .cl-win::after { opacity: 0; } /* the list fills from the top; the three marks pop, one after another; then the attendance, row by row */ .cl-r, .cl-sum { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .1, 1); } .cl.is-static .cl-r, .cl.s-dialog .cl-r, .cl.is-static .cl-sum, .cl.s-dialog .cl-sum { opacity: 1; transform: none; } .cl.s-dialog .cl-r:nth-child(1) { transition-delay: .2s; } .cl.s-dialog .cl-r:nth-child(2) { transition-delay: .3s; } .cl.s-dialog .cl-r:nth-child(3) { transition-delay: .4s; } .cl.s-dialog .cl-r:nth-child(4) { transition-delay: .5s; } .cl.s-dialog .cl-r:nth-child(5) { transition-delay: .6s; } .cl.s-dialog .cl-sum { transition-delay: .7s; } .cl-r em { opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); } .cl.is-static .cl-r em, .cl.s-tags .cl-r em { opacity: 1; transform: none; } .cl.s-tags .cl-r:nth-child(2) em { transition-delay: .35s; } .cl.s-tags .cl-r:nth-child(3) em { transition-delay: .7s; } .cl.is-static .cl-att i:first-child, .cl-r.in .cl-att i:first-child { background: var(--ok); color: #fff; box-shadow: 0 4px 10px -4px rgba(22, 163, 74, .6); } .cl.is-static .cl-att i:last-child, .cl-r.in .cl-att i:last-child { opacity: .3; } .cl-r.in { animation: cl-in 1s ease-out; } .cl-r.in .cl-att i:first-child path { --d: 20; stroke-dasharray: 20; animation: fl-draw .35s ease-out both; } /* a finger's tap: the button, the new class, each ✓ */ .cl.s-tap-add .cl-add, .cl.s-tap-card .cl-new { transform: scale(.95); } .cl.s-tap-add .cl-add::after, .cl.s-tap-card .cl-new::after, .cl-r.in .cl-att i:first-child::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); animation: fl-tap .6s ease-out both; pointer-events: none; } @keyframes cl-flash { 0%, 30% { background: #DDFAA8; } 100% { background: var(--new-soft); } } @keyframes cl-toast { 0% { opacity: 0; transform: translate(-50%, 12px); } 12%, 86% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 6px); } } @keyframes cl-bump { from { transform: scale(1.6); } } @keyframes cl-in { from { background: #E8F7EE; } } /* leads, as a story (from the owner's screen recording of the product's pipeline, ניהול מתעניינים): leads come into the first stage from the site, a landing page and Instagram; a WhatsApp automation answers each of them; one moves to a trial class, then becomes a paying client. The window is the calendar's (.cl-win). The markup holds the end state (.is-static: reduced motion, no JS); site.js plays the steps as classes on .ld */ .ld { position: absolute; inset: 0; --cl-end: 56px; --ok: #16A34A; --ld-h: 82px; } .ld .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } :where(.ld) p { margin: 0; } /* the board: a column a stage, each with its dot and its count */ .ld-board { position: relative; flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .ld-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: 14px; background: #F6F6F8; } .ld-col.k-new { --c: #8E8E93; } .ld-col.k-contact { --c: #E3A93C; } .ld-col.k-trial { --c: #3B87F7; } .ld-col.k-paid { --c: var(--ok); } .ld-col-h { display: flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 4px; font-size: 12.5px; } .ld-col-h::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); } .ld-col-h > b { font-weight: 700; white-space: nowrap; } .ld-col-h span { margin-inline-start: auto; font-size: 11.5px; color: var(--ink-2); white-space: nowrap; } .ld-col-h span b { display: inline-block; color: #000; font-weight: 700; font-variant-numeric: tabular-nums; } /* a lead: name and age, phone, then its tags (where it came from, what happened) */ .ld-c { position: relative; display: flex; flex-direction: column; gap: 3px; height: var(--ld-h); padding: 10px 11px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06); transition: transform .15s ease; } .ld-c-h { display: flex; align-items: center; gap: 6px; } .ld-c-h b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 700; } .ld-c-h small { flex: none; margin-inline-start: auto; font-size: 10.5px; color: var(--ink-2); } .ld-ph { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; } .ld-tags { display: flex; gap: 5px; margin-top: auto; overflow: hidden; } .ld-tags i { display: inline-flex; align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; font-style: normal; white-space: nowrap; } .ld-tags svg { flex: none; width: 11px; height: 11px; } .ld-tags .ic { stroke-width: 2.2; } .ld-tags .ig { background: #FCE7EF; color: #C2185B; } .ld-tags .fb { background: #E7F0FE; color: #1877F2; } .ld-tags .web { background: #EEEEF1; color: #2C2C2E; } .ld-tags .lp { background: #E1F5F6; color: #126E6A; } .ld-tags .wa { background: #E3F8EA; color: #128C4A; } .ld-tags .trial { background: #E8F1FE; color: #1F5FC8; } .ld-tags .paid { background: var(--ok); color: #fff; } .ld-c.paid { box-shadow: inset 0 0 0 1.5px var(--ok), 0 1px 2px rgba(0, 0, 0, .06); } /* the leads that come in, and the places the moving one lands: closed until their step */ .ld-slot { flex: none; height: 0; margin-bottom: -8px; overflow: hidden; opacity: 0; transition: height .45s cubic-bezier(.2, .7, .1, 1), margin .45s cubic-bezier(.2, .7, .1, 1), opacity .3s ease; } .ld-slot.b .ld-c, .ld-slot.c .ld-c { opacity: 0; transition: opacity .15s ease; } .ld-slot.a .wa, .ld-slot.l2 .wa, .ld-slot.l3 .wa { opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); } /* the card on its way between stages */ .ld-fly { position: absolute; z-index: 6; top: 0; left: 0; box-shadow: 0 0 0 1.5px #000, 0 26px 44px -16px rgba(0, 0, 0, .45); pointer-events: none; } /* the WhatsApp automation's message, beside the lead it went to, as in WhatsApp: the studio's message in green, its button under it */ .ld-pop { position: absolute; z-index: 4; top: 40px; right: calc(25% + 4px); width: 300px; padding: 12px; border-radius: 18px; background: #fff; color: #111B21; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 60px -20px rgba(0, 0, 0, .45); opacity: 0; transform: translateX(10px) scale(.96); transform-origin: 100% 0; transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .1, 1); } .ld-pop::before { content: ""; position: absolute; top: 30px; right: -5px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); box-shadow: 1px -1px 0 rgba(0, 0, 0, .04); } .ld-pop-h { display: flex; align-items: center; gap: 8px; padding: 0 2px 10px; font-size: 12.5px; } .ld-pop-h i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #25D366; color: #fff; } .ld-pop-h i svg { width: 15px; height: 15px; } .ld-pop-h b { font-weight: 700; } .ld-pop-h span { margin-inline-start: auto; font-size: 11px; color: var(--ink-2); } .ld-chat { display: grid; padding: 12px; border-radius: 12px; background: #EFEAE2; } .ld-msg { display: grid; gap: 4px; justify-self: end; width: 90%; opacity: 0; transform: translateY(6px) scale(.97); transform-origin: 0 0; transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .1, 1); } .ld-bub { padding: 8px 10px 5px; border-radius: 0 10px 10px 10px; background: #D9FDD3; font-size: 12.5px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); } .ld-bub small { display: flex; align-items: center; justify-content: flex-start; gap: 3px; margin-top: 2px; direction: ltr; font-size: 10px; color: #667781; } .ld-bub small svg { width: 15px; height: 10px; fill: none; stroke: #53BDEB; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ld-btn { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 10px; background: #fff; color: #008069; font-size: 12.5px; font-weight: 600; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); } .ld-btn .ic { width: 14px; height: 14px; } .ld-pop-f { padding: 10px 2px 0; font-size: 11.5px; color: var(--ink-2); } /* what the product says when a lead moves */ .ld-toast { position: absolute; z-index: 5; bottom: 30px; left: calc(50% + var(--cl-end) / 2); display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: #E3F8EA; color: #14532D; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, 12px); box-shadow: 0 0 0 1px rgba(22, 163, 74, .18), 0 16px 40px -14px rgba(0, 0, 0, .35); pointer-events: none; } .ld-toast .ic { width: 17px; height: 17px; color: var(--ok); stroke-width: 2.2; } /* the steps: three leads come in, newest on top */ .ld.s-in1 .ld-slot.l2, .ld.s-in2 .ld-slot.l3, .ld.s-in3 .ld-slot.a, .ld.is-static .ld-slot.l2, .ld.is-static .ld-slot.l3, .ld.is-static .ld-slot.c { height: var(--ld-h); margin-bottom: 0; opacity: 1; } .ld.s-in1 .ld-slot.l2 .ld-c, .ld.s-in2 .ld-slot.l3 .ld-c, .ld.s-in3 .ld-slot.a .ld-c { animation: ld-in 1.6s ease-out both; } /* WhatsApp answers them */ .ld.s-wa .ld-pop { opacity: 1; transform: none; } .ld.s-wa .ld-msg { opacity: 1; transform: none; transition-delay: .35s; } .ld.s-wa-out .ld-pop { opacity: 0; transform: translateX(10px) scale(.96); } .ld.is-static .ld-slot .wa, .ld.s-sent .ld-slot .wa { opacity: 1; transform: none; } .ld.s-sent .ld-slot.l3 .wa { transition-delay: .2s; } .ld.s-sent .ld-slot.l2 .wa { transition-delay: .4s; } /* Noa is picked up, lands on the trial class, then on paying client */ .ld.s-lift1 .ld-slot.a .ld-c, .ld.s-lift2 .ld-slot.b .ld-c { transform: scale(.97); box-shadow: inset 0 0 0 1.5px #000; } .ld.s-lift1 .ld-slot.a .ld-c::after, .ld.s-lift2 .ld-slot.b .ld-c::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 2px rgba(0, 0, 0, .45); animation: fl-tap .6s ease-out both; pointer-events: none; } .ld.s-m1 .ld-slot.a { height: 0; margin-bottom: -8px; opacity: 0; } .ld.s-m1 .ld-slot.b, .ld.s-m2 .ld-slot.c { height: var(--ld-h); margin-bottom: 0; opacity: 1; } .ld.s-m2 .ld-slot.b { height: 0; margin-bottom: -8px; opacity: 0; } .ld.s-m1-in .ld-slot.b .ld-c, .ld.s-m2-in .ld-slot.c .ld-c, .ld.is-static .ld-slot.c .ld-c { opacity: 1; } .ld.s-m1-in .ld-slot.b .ld-c { animation: ld-trial 1.4s ease-out both; } .ld.s-m2-in .ld-slot.c .ld-c { animation: ld-paid 1.4s ease-out both; } .ld.s-m1-in .ld-toast.t1, .ld.s-m2-in .ld-toast.t2 { animation: cl-toast 2.2s ease both; } .ld b.bump { animation: cl-bump .35s cubic-bezier(.3, 1.6, .5, 1); } @keyframes ld-in { 0%, 30% { background: #F1FDDC; } 100% { background: #fff; } } @keyframes ld-trial { 0%, 30% { background: #E8F1FE; } 100% { background: #fff; } } @keyframes ld-paid { 0%, 30% { background: #DDF6E5; } 100% { background: #fff; } } /* the topics: a white strip of three columns joined to the photo, as in the two-products section; the chosen one is black, with its line */ .bm-tabs, .bm-desc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-inline: 1px solid var(--line); background: #fff; } .bm-tabs { border-top: 1px solid var(--line); } .bm-tabs [role="tab"] { position: relative; display: block; padding: 24px clamp(18px, 2.4vw, 32px) 4px; border: 0; background: none; text-align: start; color: var(--mute); cursor: pointer; } .bm-tabs [role="tab"] + [role="tab"], .bm-desc > div + div { border-inline-start: 1px solid var(--line); } .bm-tabs b { font-family: var(--display); font-size: clamp(20px, 2.3vw, 30px); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; } .bm-tabs [role="tab"]:hover, .bm-tabs [aria-selected="true"] { color: #000; } .bm-tabs [aria-selected="true"] .pt-bar { transform: none; } .bm-desc > div { padding: 8px clamp(18px, 2.4vw, 32px) 24px; } .bm-desc p { font-size: 18px; line-height: 1.45; color: var(--ink-2); max-width: 30em; } /* narrower stages */ @container bm (max-width: 1000px) { .fl .fl-phone { inset-inline-end: 32px; } .fl-search { display: none; } .cl, .ld { --cl-end: 24px; } } @container bm (max-width: 860px) { .fl-win { width: calc(100% - 210px); } .fl-th, .fl-tr { grid-template-columns: minmax(0, 1fr) 112px 66px 92px; } .fl-th span:nth-child(2), .fl-date, .fl-pill { display: none; } .fl .fl-phone { inset-inline-end: 24px; --s: .85; } /* the week keeps five days */ .cl-cols { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cl-col:nth-child(6) { display: none; } .cl-dialog { right: 24px; } /* the leads keep their four stages; the sources and WhatsApp become icons */ .ld-tags :is(.ig, .fb, .web, .lp, .wa) span { display: none; } } @container bm (max-width: 760px) { .fl-win, .cl-win { grid-template-columns: minmax(0, 1fr); } :is(.fl-win, .cl-win) .pd-nav { display: none; } .fl-main { padding: 18px; } } @container bm (max-width: 673px) { /* the leads story on phones: three stages (no נוצר קשר), the cards without phone and age; a card with a status shows it alone */ .ld { --cl-end: 12px; --ld-h: 64px; } .ld-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ld-col.k-contact, .ld-c-h small, .ld-ph, .ld-pop-f { display: none; } .ld-col { gap: 6px; padding: 6px; } .ld-col-h { flex-wrap: wrap; gap: 0 5px; padding: 2px; font-size: 11.5px; } .ld-col-h span { width: 100%; margin-inline-start: 0; padding-inline-start: 13px; font-size: 10.5px; } .ld-c { padding: 8px; } .ld-c-h b { font-size: 12px; } .ld-tags i { padding: 0 5px; } .ld-c:has(.trial, .paid) .ld-tags i:first-child, .ld-tags :is(.trial, .paid) svg { display: none; } .ld-pop { top: 44px; left: 0; right: calc(33.3% + 2px); width: auto; padding: 10px; } .ld-chat { padding: 10px; } .ld-msg { width: 100%; } .ld-bub { font-size: 12px; } .ld-toast { left: 50%; bottom: 20px; font-size: 12.5px; } /* the calendar story on phones: three days (yesterday, today, tomorrow), and the class's list rises over them */ .cl { --cl-end: 12px; } .cl-win { top: 12px; bottom: -40px; inset-inline-start: 12px; } .cl-nav, .cl-n svg { display: none; } .cl-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: -4px; } .cl-col:nth-child(-n+2) { display: none; } .cl-col { gap: 6px; padding: 0 4px 12px; } .cl-day { gap: 4px; height: 42px; } .cl-c { height: 70px; padding: 0 7px; } .cl-new { height: 86px; } .cl.is-static .cl-slot, .cl.s-new .cl-slot { height: 86px; } .cl-c > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: 11.5px; line-height: 1.25; } .cl-toast { left: 50%; bottom: 20px; font-size: 12.5px; } .cl-dialog { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; } .cl-d-top { gap: 8px; padding: 14px 16px 12px; } .cl-d-body { padding: 12px 16px 14px; } .cl-meta span:not(:nth-child(2)), .cl-seg span:last-child, .cl-th span:nth-child(2), .cl-bal { display: none; } .cl-th, .cl-r { grid-template-columns: minmax(0, 1fr) 64px; } .cl-r { min-height: 52px; padding-block: 6px; } /* the money story on phones: the report on top, and of the paying only the Apple Pay sheet, under it: it rises from the stage's edge, Face ID turns green, and the ₪500 flies up into the report */ .fl-win { top: 12px; bottom: auto; height: 284px; inset-inline: 12px; width: auto; } .fl .fl-phone { top: auto; bottom: 14px; inset-inline-end: auto; left: calc(50% - 125px); width: 250px; height: 214px; aspect-ratio: auto; overflow: visible; border: 0; border-radius: 28px; background: none; box-shadow: none; transform: none; } .fl .fl-phone::before, .fl-screen::after, .fl-status, .fl-checkout, .fl-paid { display: none; } .fl-screen { overflow: visible; border-radius: 28px; background: none; } .fl-sheet { inset: auto 0 0; padding-top: 20px; box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .5); } /* with no phone around it, a tag says where this happens */ .fl-sheet-tag { position: absolute; top: -13px; left: 50%; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: 999px; background: #fff; color: #000; font-size: 11.5px; font-weight: 700; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 6px 16px -6px rgba(0, 0, 0, .35); } .fl-sheet-tag svg { width: 9px; height: 12px; fill: #000; } .fl.is-static .fl-sheet, .fl.s-paid .fl-sheet { transform: none; } .fl.is-static .fl-face { color: #30D158; } .fl.is-static .fl-face .scan { display: none; } .fl.is-static .fl-face .ok, .fl.is-static .fl-face small.ok { display: block; } .fl-main { gap: 12px; padding: 14px; } .fl-title b { font-size: 18px; } .fl-tabs, .fl.is-static .fl-sent, .fl-stats p:last-child, .fl-d-sub { display: none; } .fl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fl-num { flex-wrap: wrap; gap: 2px 6px; } .fl-stats p { padding: 10px 12px; } .fl-num b { font-size: 17px; } .fl-th, .fl-tr { grid-template-columns: minmax(0, 1fr) 54px 76px; gap: 8px; } .fl-th span:nth-child(3), .fl-meth { display: none; } .fl-tr { height: 46px; } .fl-new { height: 0; } .fl.is-static .fl-new, .fl.s-row .fl-new { height: 46px; } .fl-dialog { top: 6px; width: 260px; margin-left: -130px; padding: 14px; } .fl-form { gap: 7px; } .fl-field span { height: 32px; } .fl-go { height: 38px; } } @media (max-width: 699px) { .bm-stage { height: 560px; } .bm-tabs [role="tab"] { padding: 16px 8px 14px; text-align: center; } .bm-tabs b { font-size: 17px; } /* phones: only the chosen topic's line, under the three titles */ .bm-desc { grid-template-columns: 1fr; border-top: 1px solid var(--line); } .bm-desc > div, .bm-desc > div + div { display: none; padding: 14px 18px 18px; border-inline-start: 0; } .bm:has(#bm-tab-cal[aria-selected="true"]) .bm-desc > :nth-child(1), .bm:has(#bm-tab-money[aria-selected="true"]) .bm-desc > :nth-child(2), .bm:has(#bm-tab-leads[aria-selected="true"]) .bm-desc > :nth-child(3) { display: block; } } /* ---------- Customer communication: a trainee reading her phone, and the messages Boostapp sent her ---------- (the owner's pick, 30 Oct: version 5 of the options, in the spirit of bit's and morning's pages) the photo on a lime block, Boostapp's B on its corner, four message cards over its edges: each with its channel as a bold round badge in the channel's colour (bit), a short title, and grey lines in place of the text (morning). Phones: the photo, then the cards two by two under it */ .cm { container: cm / inline-size; } .cm-stage { position: relative; height: 520px; max-width: 600px; margin: 0 auto; } .cm-stage p { margin: 0; } .cm-stage .ic { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cm-photo { position: absolute; top: 34px; left: 28.3%; width: 46.7%; height: 452px; overflow: hidden; border-radius: 30px; background: #BAFD4F; } /* the site's lime, as the photo's backdrop */ .cm-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .cm-hub { position: absolute; z-index: 3; top: 10px; left: calc(75% - 30px); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #000; box-shadow: 0 0 0 5px #fff, 0 14px 30px -10px rgba(0, 0, 0, .45); } .cm-hub svg { width: 18px; height: 23px; fill: #fff; } .cm-card { position: absolute; z-index: 2; display: grid; gap: 4px; width: max(180px, 35.3%); padding: 16px 16px 14px; border-radius: 18px; background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 22px 46px -22px rgba(0, 0, 0, .35); } .cm-card.c-wa { --c: #25D366; --cink: #128C4A; top: 64px; left: 4.3%; } .cm-card.c-push { --c: #3B87F7; --cink: #1F5FC8; top: 150px; right: 4.3%; } .cm-card.c-list { --c: #E6004F; --cink: #B0003C; top: 286px; left: 4.3%; } .cm-card.c-mail { --c: #E3A93C; --cink: #8A5A08; top: 362px; right: 4.3%; } .cm-badge { position: absolute; top: -18px; right: -14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c); color: #fff; box-shadow: 0 0 0 4px #fff; } .cm-badge svg { width: 21px; height: 21px; } .cm-card small { padding-inline-start: 30px; font-size: 11.5px; font-weight: 600; color: var(--cink); } .cm-card b { margin-top: 2px; font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; } .cm-bars { display: grid; gap: 6px; margin-top: 6px; } .cm-bars i { display: block; height: 7px; border-radius: 4px; background: #ECECF0; } .cm-bars i:last-child { width: 68%; } @container cm (max-width: 559px) { .cm-card { padding: 15px 14px 13px; } .cm-card b { font-size: 14.5px; } } @container cm (max-width: 459px) { .cm-stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 12px; padding: 8px 4px 4px; } .cm-photo { position: relative; grid-column: 1 / -1; inset: auto; width: 100%; height: 400px; } .cm-stage .cm-hub { top: -6px; left: auto; right: 10px; } .cm-stage .cm-card { position: relative; inset: auto; width: auto; padding: 18px 12px 12px; } .cm-stage .c-wa, .cm-stage .c-push { margin-top: -110px; } .cm-badge { top: -16px; right: -6px; width: 40px; height: 40px; } .cm-badge svg { width: 19px; height: 19px; } .cm-card small { padding-inline-start: 24px; font-size: 10.5px; white-space: nowrap; } .cm-card b { font-size: 14px; } .cm-bars i:last-child { display: none; } } /* ---------- API: the tools the studio already works with, connected (the owner's request, 30 Oct; after Intercom's "Works with the tools you already use") ---------- White tiles with each tool's own logo, three columns, rows cut by a fade at the top and bottom; the columns drift slowly up and down (the middle one the other way), each with its four tiles twice for a seamless loop. Reduced motion: still. Sizes follow the tile's font-size, which follows the picture's width; on narrow pictures the tiles with an icon and a name put the icon over the name */ .tl { container: tl / inline-size; } .tl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; height: clamp(330px, 82cqw, 470px); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); } .tl-track { display: grid; transform: translateY(-40px); } .tl-t { display: flex; align-items: center; justify-content: center; gap: .5em; height: 5.25em; margin-bottom: 12px; padding: 0 .6em; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 10px 24px -18px rgba(0, 0, 0, .25); direction: ltr; font-size: clamp(10.5px, 2.8cqw, 16px); white-space: nowrap; } .tl-t svg { display: block; flex: none; } .tl-t .i { width: 1.65em; height: 1.65em; } .tl-t span { font-family: "Wix Madefor Display", var(--display); font-size: .92em; font-weight: 600; letter-spacing: -0.01em; color: #3C4043; } .tl-t.gpt span { font-size: 1.15em; color: #000; } .tl-t.rav span { direction: rtl; font-family: var(--display); font-size: 1.75em; font-weight: 700; letter-spacing: -0.02em; color: #101143; } .tl-t.rav b { font-weight: inherit; color: #1381E5; } @container tl (max-width: 419px) { .tl-t.st { flex-direction: column; gap: .35em; height: 6.6em; } .tl-t:not(.st) { height: 6.6em; } } @media (prefers-reduced-motion: no-preference) { .tl-track { transform: none; animation: tl-up 32s linear infinite; } .tl-col:nth-child(2) .tl-track { animation-name: tl-down; animation-duration: 38s; } .tl-col:nth-child(3) .tl-track { animation-duration: 28s; } } @keyframes tl-up { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes tl-down { from { transform: translateY(-50%); } to { transform: translateY(0); } } .tl { position: relative; } .tl-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ---------- Customer videos: the old site's row of short videos (the owner's request, 30 Oct), as wide as the hero's photo, its ends fading out ---------- Tall 9:16 cards with the video's opening frame, the owner's name and studio at the bottom and a play mark; the row scrolls sideways (and snaps), starts centred (site.js), and the arrows on its sides move it two cards at a time. The videos themselves play from the cards once they're on Wix */ .vr-sec > .wrap { padding-bottom: 0; } /* the row runs below the title at the page's full width, and takes the section's bottom space */ .vr { --fade: clamp(36px, 9vw, 170px); --cw: clamp(168px, 17vw, 236px); position: relative; isolation: isolate; padding-bottom: var(--sec-y); } /* behind the row (the owner: "boring, add something to the BG"): a lime band across the whole page, through the middle of the cards */ .vr::before { content: ""; position: absolute; z-index: -1; inset-inline: 0; top: calc(4px + var(--cw) * 16 / 9 * .3); height: calc(var(--cw) * 16 / 9 * .46); background: #BAFD4F; } .vr-track { display: grid; grid-auto-flow: column; grid-auto-columns: var(--cw); gap: 16px; overflow-x: auto; padding: 4px var(--fade) 12px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--fade); scrollbar-width: none; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); } .vr-track::-webkit-scrollbar { display: none; } .vr-c { position: relative; margin: 0; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: var(--paper-2); scroll-snap-align: center; isolation: isolate; } .vr-c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .1, 1); } .vr-c::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); pointer-events: none; } .vr-c figcaption { position: absolute; z-index: 1; inset: auto 16px 16px; display: grid; gap: 2px; color: #fff; line-height: 1.25; } .vr-c figcaption b { font-size: 18px; font-weight: 700; } .vr-c figcaption span { font-size: 14px; opacity: .8; } .vr-play { position: absolute; z-index: 1; top: 12px; inset-inline-end: 12px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5); } .vr-play svg { width: 14px; height: 14px; margin-left: 3px; fill: #000; } /* play points right, in Hebrew too */ @media (hover: hover) { .vr-c:hover img { transform: scale(1.04); } } .vr-nav { position: absolute; z-index: 2; top: calc((100% - var(--sec-y) - 8px) / 2); display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #000; color: #fff; transform: translateY(-50%); cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); } .vr-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .vr-nav.prev { right: max(var(--gut), calc(var(--fade) - 60px)); } .vr-nav.next { left: max(var(--gut), calc(var(--fade) - 60px)); } .vr-nav:hover { background: #fff; color: #000; } .vr-nav:focus-visible { outline: 3px solid #BAFD4F; outline-offset: 3px; } @media (max-width: 599px) { .vr-nav { display: none; } .vr-c figcaption b { font-size: 16px; } } /* ---------- Social posts, with Higgsfield: the studio's Facebook and Instagram connected, posts and stories made in the CRM ---------- (the owner's request, 30 Oct, with a recording of the product's page) the label is a lockup, B × Higgsfield. The picture: the product's own posts (the eight the owner sent) as a wall in two columns, faded top and bottom; one post picked (lime ring), and over the wall the new post: made from scratch or from the gallery, the class it's for, where it goes (Facebook, Instagram, a story) and when */ .label.co .co-hf { display: inline-flex; align-items: center; gap: 7px; font-family: "Wix Madefor Display", var(--display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .label.co .co-hf svg { width: 22px; height: 22px; fill: currentColor; } /* the owner: "add NEW FEATURE tag to this section", in Hebrew */ .tag-new { display: inline-flex; align-items: center; height: 26px; margin-inline-start: 4px; padding: 0 11px; border-radius: 999px; background: #BAFD4F; color: #000; font-size: 14px; font-weight: 700; } .so { position: relative; width: 100%; height: 600px; max-width: 600px; margin: 0 auto; } .so p { margin: 0; } .so .ic { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .so-wall { position: absolute; inset: 0 0 0 14%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent); } .so-col { display: grid; align-content: start; gap: 14px; } .so-col:nth-child(2) { margin-top: -84px; } .so-wall img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .45); } .so-pick { position: relative; } .so-pick img { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #BAFD4F, 0 18px 34px -16px rgba(0, 0, 0, .5); } .so-pick::after { content: ""; position: absolute; top: 10px; left: 10px; width: 28px; height: 28px; border-radius: 50%; background: #BAFD4F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-8.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; } /* the new post, over the wall */ .so-new { position: absolute; z-index: 2; left: 0; bottom: 34px; display: grid; gap: 12px; width: min(330px, 66%); padding: 16px; border-radius: 22px; background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 30px 60px -24px rgba(0, 0, 0, .45); } .so-new-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .so-new-h b { font-size: 17px; font-weight: 800; } .so-tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: #F2F2F4; font-size: 13px; font-weight: 600; } .so-tabs i { padding: 5px 11px; border-radius: 999px; font-style: normal; color: var(--ink-2); } .so-tabs i.on { background: #000; color: #fff; } .so-sel { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; background: #F4F4F6; } .so-sel img { width: 48px; height: 60px; flex: none; object-fit: cover; border-radius: 8px; } .so-sel span { display: grid; gap: 2px; min-width: 0; line-height: 1.3; } .so-sel b { font-size: 15px; font-weight: 700; } .so-sel small { font-size: 13px; color: var(--ink-2); } .so-k { font-size: 12.5px; font-weight: 700; color: var(--ink-2); } .so-ch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px !important; } .so-ch i { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px 0 9px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #000; font-size: 13.5px; font-style: normal; font-weight: 600; } .so-ch svg { width: 17px; height: 17px; flex: none; } .so-ch .st { width: 17px; height: 17px; border-radius: 50%; background: conic-gradient(#FEDA75, #FA7E1E, #D62976, #962FBF, #4F5BD5, #FEDA75); -webkit-mask: radial-gradient(circle, transparent 5.5px, #000 6px); mask: radial-gradient(circle, transparent 5.5px, #000 6px); } .so-when { display: flex; align-items: center; gap: 8px; } .so-when span { display: inline-flex; flex: 1; align-items: center; gap: 7px; height: 40px; padding: 0 12px; border-radius: 12px; background: #F4F4F6; font-size: 14px; font-weight: 600; } .so-when em { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; background: #BAFD4F; color: #000; font-size: 14.5px; font-style: normal; font-weight: 700; } @media (max-width: 599px) { .so { height: 680px; } /* taller on phones, so the posts show above the new-post card */ .so-wall { inset: 0; } .so-new { left: 50%; bottom: 18px; width: min(330px, calc(100% - 24px)); transform: translateX(-50%); } } /* ---------- Logos in a bordered row (the Pilates page) ---------- */ .logos { margin-top: clamp(56px, 7vw, 96px); border-color: var(--line); } .logos a { border-color: var(--line); } /* ---------- Closing: the copy in the middle, and what Boostapp did tonight drifting past above and below it ---------- (the owner, 30 Oct: no photo in the closing, "improve it") two rows of evening notices (bookings, payments, renewals, leads, reminders), each a lime icon, a line and the time; the rows drift the opposite ways and fade out at both ends, the way the stories row does. Reduced motion: still, a little off-centre */ .closing2 { display: grid; gap: clamp(36px, 5vw, 64px); padding: clamp(64px, 9vw, 128px) 0; overflow: hidden; background: #000; color: #fff; text-align: center; } .cl-copy { display: grid; justify-items: center; gap: 24px; max-width: 900px; margin: 0 auto; padding: 0 var(--gut); } .closing2 .h2 { font-size: clamp(44px, 6.4vw, 96px); } .closing2 .lead { max-width: 34em; } .closing2 .actions { justify-content: center; } .cf { --fade: clamp(36px, 12vw, 220px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent); } .cf-run { display: flex; width: max-content; transform: translateX(18%); } .cf + .cl-copy + .cf .cf-run { transform: translateX(32%); } .cf-set { display: flex; gap: 12px; padding-inline-end: 12px; } .cf-c { display: inline-flex; align-items: center; gap: 10px; flex: none; height: 52px; padding-inline: 7px 18px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); font-size: 16px; white-space: nowrap; } .cf-c i { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #BAFD4F; color: #000; } .cf-c svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cf-c small { font-family: "Wix Madefor Text", var(--sans); font-size: 13.5px; color: rgba(255, 255, 255, .5); } @media (max-width: 599px) { .cf-c { height: 44px; gap: 8px; padding-inline: 5px 14px; font-size: 14.5px; } .cf-c i { width: 32px; height: 32px; } .cf-c svg { width: 16px; height: 16px; } } @media (prefers-reduced-motion: no-preference) { .cf-run { transform: none; animation: cf-run 80s linear infinite; } .cf + .cl-copy + .cf .cf-run { transform: none; animation-direction: reverse; animation-duration: 92s; } } @keyframes cf-run { from { transform: translateX(0); } to { transform: translateX(50%); } } /* ---------- Product features: copy beside a product mockup ---------- */ .feat { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(32px, 5vw, 80px); align-items: center; } .feat.flip .feat-copy { order: 2; } .feat-copy { display: grid; gap: 20px; justify-items: start; } .feat-copy .h2 { font-size: clamp(36px, 4.6vw, 64px); } /* each half of the title balances on its own, so a long second half splits evenly instead of leaving one word */ .feat-copy .h2 .mute { display: block; } .feat-copy .h2 br { display: none; } .feat-copy .ticks { font-size: 18px; font-weight: 500; } /* a line can carry the lime marker of the hero's quote (tilted a little, like a highlighter); the WhatsApp line takes WhatsApp's own logo: its icon for the tick, its wordmark for the word */ .feat-copy .ticks mark { color: #000; padding: 0 .12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 8.6 100 4.2 100 16.4 0 19.6Z' fill='%23BAFD4F'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .ticks li.wa::before { width: 24px; height: 24px; margin-top: 0; border-radius: 0; background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 346 346"%3E%3Cpath fill="%2325D366" d="M173,0C77.45,0,0,77.45,0,173c0,31.43,8.38,60.91,23.04,86.31L0,346l89.87-21.25c24.67,13.54,53,21.25,83.13,21.25,95.55,0,173-77.45,173-173S268.55,0,173,0ZM173,315.01c-28.91,0-55.81-8.64-78.24-23.48l-53.1,13.52,14.89-50.75c-16.11-23.03-25.56-51.06-25.56-81.3,0-78.43,63.58-142.01,142.01-142.01s142.01,63.58,142.01,142.01-63.58,142.01-142.01,142.01Z"/%3E%3Cpath fill="%2325D366" d="M213.54,195.84l41.86,19.73c1.92.91,3.15,2.85,2.98,4.97-.45,5.51-2.66,16.55-12.56,26.44-27.93,27.93-78.09-3.67-80.13-4.89-12.34-6.63-24.06-15.49-35.17-26.61-11.11-11.11-19.98-22.84-26.61-35.17-1.22-2.04-32.82-52.19-4.89-80.13,9.9-9.9,20.93-12.1,26.44-12.56,2.12-.17,4.07,1.06,4.97,2.98l19.73,41.86c.93,1.98.52,4.33-1.02,5.88l-14.71,14.71c-3.18,3.18-4.12,8.13-1.92,12.06,5.37,9.63,12.59,18.9,20.95,27.43,8.53,8.36,17.8,15.58,27.43,20.95,3.93,2.19,8.88,1.26,12.06-1.92l14.71-14.71c1.55-1.55,3.9-1.96,5.88-1.02Z"/%3E%3C/svg%3E') center / contain no-repeat; } /* the official account carries a verified mark at the end of its line, blue as on Instagram */ .ticks .vf { display: inline-block; width: 1em; height: 1em; margin-inline-start: 6px; vertical-align: -0.14em; } .ticks .nw { white-space: nowrap; } /* WhatsApp's own wordmark, in its green, sitting on the line like a word */ .ticks .wa-word { display: inline-block; width: 5.1em; height: 0.99em; vertical-align: -0.22em; } .feat-mock .ui-card { border-radius: 20px; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .3); } .feat-mock .code { border-radius: 20px; padding: 24px 26px; font-size: 14px; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .45); } .feat-more { margin-top: 24px; } @media (max-width: 899px) { .feat { grid-template-columns: 1fr; } .feat.flip .feat-copy { order: 0; } } /* ---------- AI agent: a conversation it handles, and the settings behind it (site.js adds .drawn) ---------- (the owner's request, 30 Oct) an agent that answers, tells the client about the studio, her membership and the classes, books and moves classes, and sends a payment link; the studio sets what it knows and how it talks. The chat on the start side, the agent's settings under it on the other, a lime glow behind */ /* the band behind it (the owner: "boring, add something to the BG"): a lime glow behind the chat, Claude's terracotta in the corner, a faint dot grid, and a giant outlined AGENT AI across the middle of the band, behind the content (the owner's words, 30 Oct; it was 23:41 at first; moved to the bottom edge once and back, the owner: "it was fine at the middle"). Phones: on two lines */ .ai-band { position: relative; isolation: isolate; } .ai-band::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 27% 42%, rgba(186, 253, 79, .3), transparent 72%), radial-gradient(34% 44% at 6% 94%, rgba(217, 119, 87, .42), transparent 70%), radial-gradient(30% 36% at 94% 6%, rgba(186, 253, 79, .12), transparent 70%), radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.6px) 0 0 / 26px 26px; } .ai-band::after { content: "AGENT AI"; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); direction: ltr; pointer-events: none; white-space: pre; font-family: "Wix Madefor Display", var(--display); font-size: clamp(110px, 16vw, 300px); font-weight: 800; line-height: .84; letter-spacing: -0.035em; text-align: center; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .11); } @media (max-width: 599px) { .ai-band::after { content: "AGENT\A AI"; font-size: 27vw; } } .ag { position: relative; display: grid; } .ag::before { content: ""; position: absolute; inset: 6% -4% 34%; background: radial-gradient(closest-side, rgba(186, 253, 79, .2), transparent); pointer-events: none; } .ag p { margin: 0; } .ag .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ag-chat { position: relative; z-index: 1; display: grid; gap: 10px; width: calc(100% - 40px); justify-self: start; padding: 16px 16px 24px; border-radius: 24px; background: #fff; color: #000; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .7); } .ag-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .ag-av { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: #FBEEE8; } .ag-av svg { width: 22px; height: 22px; } .ag-head b { display: block; font-size: 15px; font-weight: 700; } .ag-head small { display: block; font-size: 12.5px; color: var(--ink-2); } .ag-head small::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: #25D366; vertical-align: 1px; } .ag-msgs { display: grid; gap: 10px; } .ag-msgs .b { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 15px; line-height: 1.45; } .ag-msgs .them { justify-self: start; background: var(--panel); border-start-start-radius: 4px; } .ag-msgs .me { justify-self: end; background: #000; color: #fff; border-start-end-radius: 4px; } /* what the agent did, in the conversation: the class moved in the calendar, a payment link */ .ag-act { display: flex; align-items: center; gap: 6px; width: fit-content; margin-top: 9px; padding: 4px 10px; border-radius: 999px; background: #BAFD4F; color: #000; font-size: 12.5px; font-weight: 700; } .ag-act .ic { width: 13px; height: 13px; stroke-width: 2.6; } .ag-link { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px; border-radius: 12px; background: #fff; color: #000; } .ag-link > i { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #BAFD4F; } .ag-link > i .ic { width: 18px; height: 18px; } .ag-link span { display: grid; min-width: 0; line-height: 1.3; } .ag-link b { font-size: 14px; font-weight: 700; } .ag-link small { font-size: 12px; color: var(--ink-2); } .ag-link em { flex: none; margin-inline-start: auto; padding: 7px 12px; border-radius: 999px; background: #000; color: #fff; font-size: 12.5px; font-weight: 700; font-style: normal; } .ag-msgs .b:has(.ag-link) { max-width: 100%; } /* the payment card takes the whole width it needs */ @media (max-width: 599px) { .ag-chat, .ag-set { width: calc(100% - 16px); } .ag-link em { padding: 7px 10px; font-size: 12px; } } /* the agent's settings: what it knows (the studio's documents), how it talks (its instructions) */ .ag-set { position: relative; z-index: 2; display: grid; gap: 10px; width: calc(100% - 40px); justify-self: end; margin-top: -26px; padding: 16px 18px 18px; border-radius: 20px; background: #fff; color: #000; box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 30px 60px -24px rgba(0, 0, 0, .6); } .ag-set-h { display: flex; align-items: center; gap: 8px; } .ag-set-h > i:first-child { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #000; color: #fff; } .ag-set-h b { font-size: 15px; font-weight: 800; } .ag-set-h .toggle { flex: none; margin-inline-start: auto; } .ag-k { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--ink-2); } .ag-docs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .ag-docs li { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; background: #F4F4F6; font-size: 12.5px; font-weight: 600; } .ag-docs li .ic { width: 14px; height: 14px; color: var(--ink-2); } .ag-docs li.add { background: none; box-shadow: inset 0 0 0 1.5px var(--line); color: var(--ink-2); } .ag-ins { padding: 10px 12px; border-radius: 12px; background: #F4F4F6; font-size: 13px; line-height: 1.55; color: #333; } .ag-ins::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-inline-start: 2px; vertical-align: -0.2em; background: #000; } @media (prefers-reduced-motion: no-preference) { .js .ag-chat .ag-msgs > * { opacity: 0; transform: translateY(10px); } .js .ag-chat.drawn .ag-msgs > * { animation: ai-in .5s cubic-bezier(.2, .7, .1, 1) forwards; } .js .ag-chat.drawn .ag-msgs > :nth-child(1) { animation-delay: .2s; } .js .ag-chat.drawn .ag-msgs > :nth-child(2) { animation-delay: 1s; } .js .ag-chat.drawn .ag-msgs > :nth-child(3) { animation-delay: 2s; } .js .ag-chat.drawn .ag-msgs > :nth-child(4) { animation-delay: 2.8s; } } @keyframes ai-in { to { opacity: 1; transform: none; } } /* ---------- Price ---------- */ .price-card { border: 0; box-shadow: none; background: #fff; border-radius: 26px; } .price-card .side { background: #000; color: #fff; border: 0; } .price-card .side .ticks li::before { background: #fff var(--tick-ink) center / 12px no-repeat; } .price-card .side .fine { color: #A9A9AE; } .price-big b { font-size: clamp(76px, 9vw, 124px); letter-spacing: -0.045em; } /* The new price list (31 Oct 2026): the slider steps through eight plans; the black side lists what is included in every plan (the things often sold as extras), then the paid add-ons, said plainly. */ .price-how { margin-top: 14px; max-width: 36em; font-size: 15px; line-height: 1.55; color: var(--ink-2); } .price-card .side .price-inc-h { font-size: 19px; } .price-inc { grid-template-columns: 1fr 1fr; gap: 12px 18px; font-size: 16.5px; } .price-extra { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 15.5px; line-height: 1.55; color: #D6D6DA; } .price-extra b { color: #fff; } .slider-label output { white-space: nowrap; } @media (max-width: 479px) { .price-inc { grid-template-columns: 1fr; gap: 10px; } } /* ---------- FAQ ---------- */ .faq2 .acc summary { font-size: 18px; } /* ---------- Inner pages, in the homepage's language (31 Oct 2026, the owner: "based on what you can learn from the main page") ---------- The hero is the homepage's: centred copy on white (the crumbs, a label, a two-tone title, a line, the lime and black buttons, a note), and under it a stage, rounded 28px, with the product in context: the studio-wall photo of the two-products tabs, or a grey dot grid, with the product's own window or phone on top and frosted cards like the hero's. The AI agent's hero is the AI band (.ih.dark.ai-band). Page-specific pieces live in assets/pages/.css. */ .ih { padding-top: clamp(22px, 3.5vh, 44px); padding-bottom: clamp(56px, 8vw, 112px); overflow-x: clip; } .ih > .wrap { padding-top: 0; padding-bottom: 0; } .ih-copy { display: flex; flex-direction: column; align-items: center; text-align: center; } .ih .crumbs { margin-bottom: 18px; } .ih-copy > .label { margin-bottom: 18px; } .ih-title { font-family: var(--display); font-size: clamp(46px, 5.8vw, 92px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; max-width: 16em; } .ih-title .mute { display: block; } .ih-sub { margin-top: 22px; max-width: 34em; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; } .ih .actions { justify-content: center; margin-top: 28px; } .ih .btn { min-height: 58px; padding: 0 30px; font-size: 18px; } .ih .btn svg { width: 20px; height: 20px; fill: currentColor; } .ih-note { margin-top: 18px; font-size: 14.5px; color: var(--ink-2); } .ih-note b { color: var(--ink); font-weight: 600; } .ih .ticks.inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 24px; font-size: 17px; font-weight: 500; } /* the hero on black (the AI agent): the AI band behind it */ .ih.dark .crumbs, .ih.dark .ih-note { color: var(--band-soft); } .ih.dark .ih-note b { color: var(--band-text); } .ih.dark .ih-sub { color: var(--band-soft); } /* copy beside the stage instead of over it (a page with a form) */ .ih.split .ih-copy { align-items: flex-start; text-align: start; } .ih.split .actions { justify-content: flex-start; } .ih.split .ticks.inline { justify-content: flex-start; } .ih-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; } @media (max-width: 899px) { .ih-split { grid-template-columns: 1fr; } } /* The stage: a photo (.ih-bg) or a grey dot grid (.dots), the product on top */ .ih-stage { position: relative; isolation: isolate; container: ihs / inline-size; margin-top: clamp(36px, 5vw, 60px); height: clamp(440px, 48vw, 640px); overflow: hidden; border-radius: 28px; background: var(--paper-2); } .ih-split .ih-stage { margin-top: 0; } .ih-stage > .ih-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } .ih-stage.dots { background: #F2F2F3 radial-gradient(rgba(0, 0, 0, .075) 1px, transparent 1.6px) 0 0 / 22px 22px; } .ih-stage.lime { background: #BAFD4F; } /* the communication section's backdrop, for a photo of a trainee */ @media (max-width: 599px) { .ih-stage { border-radius: 22px; } } /* Frosted cards on a stage, the hero's (.gh-card) look; each page places its own */ .st-card { position: absolute; z-index: 3; padding: 14px 16px 15px; border-radius: 20px; color: #000; background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .45); } .st-card p { margin: 0; } .st-card-h { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; white-space: nowrap; } .st-card-h > svg:not(.ic) { width: 12px; height: 16px; fill: #000; } .st-card-h > span:last-child:not(:first-child) { margin-inline-start: auto; font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; } .st-card .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .st-card small { font-size: 13.5px; color: var(--ink-2); } /* The product's own window, as in the two-products tab: the black sidebar (.pd-nav, the same markup), and the page's screen beside it. Status colours as in the product */ .win { position: absolute; z-index: 2; display: grid; grid-template-columns: 68px minmax(0, 1fr); overflow: hidden; border-radius: 16px; background: #fff; color: #000; font-size: 12px; line-height: 1.35; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 50px 90px -40px rgba(40, 30, 10, .5); --pd-green: #18E588; --pd-amber: #FFB020; --pd-red: #ED3B49; --pd-green-ink: #1A7F4B; --pd-red-ink: #D92D20; --pd-blue-ink: #2B59C3; } .win .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .win .pd-nav .ic { width: 20px; height: 20px; stroke-width: 1.6; } .win .av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--panel); font-size: 11px; font-weight: 700; font-style: normal; } .win-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 0 18px 18px; overflow: hidden; } .win-top { display: flex; align-items: center; justify-content: space-between; height: 42px; flex: none; margin: 0 -18px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--ink-2); } .win-top b { font-size: 12.5px; color: #000; } .win-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } .win-h small { display: block; font-size: 12px; color: var(--ink-2); } .win-h b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; } /* below 760px of stage the window drops its menu, as the homepage's does */ @container ihs (max-width: 759px) { .win { grid-template-columns: minmax(0, 1fr); } .win .pd-nav { display: none; } } /* The trainee app's phone (a current iPhone: thin bezel, Dynamic Island) */ .phone2 { position: absolute; z-index: 2; width: 270px; aspect-ratio: 9 / 19.5; padding: 9px; border-radius: 46px; background: #111; color: #000; box-shadow: 0 0 0 1.5px #3A3A3C, 0 40px 80px -30px rgba(0, 0, 0, .55); } .phone2-screen { position: relative; height: 100%; overflow: hidden; border-radius: 38px; background: #fff; font-size: 12.5px; line-height: 1.4; } .phone2-screen::before { content: ""; position: absolute; top: 9px; left: 50%; z-index: 5; width: 84px; height: 24px; margin-left: -42px; border-radius: 14px; background: #000; } .phone2-bar { direction: ltr; display: flex; justify-content: space-between; padding: 13px 26px 0; font-family: "Wix Madefor Text", var(--sans); font-size: 12.5px; font-weight: 600; } /* A row of the homepage's customer logos, smaller (proof on inner pages) */ .logos-row { display: grid; gap: 26px; } .logos-row .clients-h { justify-self: center; } .logos-row ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px clamp(22px, 4vw, 52px); } .logos-row li { display: grid; place-items: center; height: 72px; } .logos-row img { width: auto; height: 100%; max-width: 150px; object-fit: contain; filter: grayscale(1); } /* Steps on white or grey (the 14 days, the switching week): a number, when, what */ .steps2 { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; counter-reset: s; } .steps2 li { position: relative; display: grid; align-content: start; gap: 8px; padding: 22px 22px 24px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); } .tint .steps2 li { box-shadow: none; } .steps2 li::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 50%; background: #000; color: #fff; font-family: "Wix Madefor Text", var(--sans); font-size: 15px; font-weight: 700; } .steps2 small { font-size: 14px; font-weight: 600; color: var(--ink-2); } .steps2 b { font-size: 21px; font-weight: 700; line-height: 1.3; } .steps2 p { color: var(--ink-2); font-size: 17px; line-height: 1.6; } @media (max-width: 899px) { .steps2 { grid-template-columns: 1fr 1fr; } } @media (max-width: 559px) { .steps2 { grid-template-columns: 1fr; } } /* One price card on the business-type pages: the starting price only (owner, 31 Oct: the site leads with ₪83 and names no other price; the pricing page's slider is the one place that shows the rest) */ .price-card .plans-one { grid-template-columns: minmax(0, 1fr); }