/* ========================================================= automations.erezb.pro — Erez Bartal AI ואוטומציה לעסקים Visual system: deep violet-black ground with purple/blue/magenta blooms, white rounded cards, glowing pink CTA. ========================================================= */ /* ---------- Tokens ---------- */ :root { /* grounds */ --night: #0A0613; --night-2: #140B23; --violet: #6A1CB0; --blue: #1F46D8; --magenta: #B01252; --crimson: #8A0B35; /* surfaces */ --card: #FFFFFF; --card-2: #F6F7FB; --card-ink: #101B3D; --card-soft: #5C6480; --card-rule: #E4E7F0; /* text on dark */ --on-dark: #FFFFFF; --on-dark-soft: #C6BCD8; --on-dark-faint:#8E85A3; --hairline: rgba(255, 255, 255, .13); /* action */ --cta: #FF2E63; --cta-2: #E0134E; --cta-ink: #FFFFFF; --cta-glow: rgba(255, 46, 99, .38); --radius: 18px; --radius-sm: 12px; --measure: 1120px; --gutter: clamp(18px, 5vw, 48px); --sect: clamp(54px, 7vw, 104px); /* one family, weight does the work. swap this line to try another face. */ --font-display: "Noto Sans Hebrew", "Arial Hebrew", system-ui, sans-serif; --font-head: var(--font-display); --font-body: var(--font-display); } /* The page commits to one dark visual world in both themes. */ :root[data-theme="light"], :root[data-theme="dark"] { color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } /* the header is sticky, so an anchor that lands at the very top of the viewport lands underneath it. Every in-page link on the site was arriving with its first 68px hidden; this is the offset that stops it. */ html { font-family: var(--font-body); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: clamp(84px, 9vw, 104px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { position: relative; margin: 0; min-height: 100vh; background: var(--night); color: var(--on-dark); font-family: var(--font-body); font-size: clamp(17px, 1.15vw, 19px); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 800; } h1, h2, .h-sect, .final h2, .about-name { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.035em; font-weight: 800; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg, iframe { max-width: 100%; display: block; } a { color: inherit; } ::selection { background: var(--cta); color: #fff; } :focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; border-radius: 6px; } /* ---------- Layout ---------- */ .wrap { position: relative; z-index: 1; width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } /* every section is a station on the route: a hairline frame that warms up once you arrive at it */ .section { position: relative; padding-block: var(--sect); max-width: calc(var(--measure) + var(--gutter) * 2.4); margin-inline: auto; border: 1px solid rgba(255, 255, 255, .07); border-radius: clamp(20px, 2.6vw, 34px); background: rgba(255, 255, 255, .014); transition: border-color .6s ease, background .6s ease, box-shadow .6s ease; } .section.is-here { border-color: rgba(255, 255, 255, .17); background: rgba(255, 255, 255, .03); box-shadow: 0 0 60px -30px rgba(255, 46, 99, .5), inset 0 1px 0 rgba(255, 255, 255, .05); } @media (max-width: 700px) { .section { margin-inline: 10px; border-radius: 18px; } } @media (prefers-reduced-motion: reduce) { .section { transition: none; } } /* --------------------------------------------------------- One continuous ground for the whole page. Sections are transparent; the colour journey happens in .page-bg, so nothing ever meets at a hard edge. --------------------------------------------------------- */ .page-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: linear-gradient( 180deg, #0A0613 0%, #150B27 9%, #1B0B2F 18%, #2E0A2C 27%, #14092A 38%, #180B31 48%, #1B0A2D 57%, #120827 66%, #240924 76%, #3E0A26 85%, #1A0A24 94%, #0A0613 100% ); } .bloom { position: absolute; border-radius: 50%; } .page-bg .bloom-layer { position: absolute; inset: 0; will-change: transform; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%); } @media (prefers-reduced-motion: reduce) { .page-bg .bloom-layer { transform: none !important; } } .bloom--blue { top: -6%; inset-inline-end: -14%; width: 78vw; height: 46vw; background: radial-gradient(closest-side, rgba(31,70,216,.62), transparent 72%); } .bloom--violet { top: 2%; inset-inline-start: -18%; width: 76vw; height: 50vw; background: radial-gradient(closest-side, rgba(106,28,176,.66), transparent 72%); } .bloom--mag1 { top: 14%; inset-inline-start: -10%; width: 70vw; height: 44vw; background: radial-gradient(closest-side, rgba(176,18,82,.5), transparent 72%); } .bloom--crim1 { top: 22%; inset-inline-end: -12%; width: 84vw; height: 48vw; background: radial-gradient(closest-side, rgba(160,14,65,.6), transparent 72%); } .bloom--violet2{ top: 36%; inset-inline-end: -16%; width: 78vw; height: 48vw; background: radial-gradient(closest-side, rgba(120,34,196,.62), transparent 72%); } .bloom--blue2 { top: 46%; inset-inline-start: -16%; width: 76vw; height: 48vw; background: radial-gradient(closest-side, rgba(36,80,232,.56), transparent 72%); } .bloom--mag2 { top: 58%; inset-inline-start: -12%; width: 74vw; height: 46vw; background: radial-gradient(closest-side, rgba(190,22,92,.5), transparent 72%); } .bloom--violet3{ top: 68%; inset-inline-end: -14%; width: 78vw; height: 46vw; background: radial-gradient(closest-side, rgba(118,32,192,.58), transparent 72%); } .bloom--crim2 { top: 80%; inset-inline-start: -14%; width: 90vw; height: 52vw; background: radial-gradient(closest-side, rgba(160,14,65,.62), transparent 72%); } .bloom--blue3 { top: 90%; inset-inline-end: -18%; width: 76vw; height: 44vw; background: radial-gradient(closest-side, rgba(31,70,216,.4), transparent 72%); } /* section classes stay as structure hooks — the ground is shared */ .bg-night, .bg-deep, .bg-crimson { background: transparent; } .bg-card { background: var(--card-2); color: var(--card-ink); } /* decorative contour lines */ .waves { position: absolute; inset-block: 0; z-index: 0; pointer-events: none; opacity: .5; width: min(320px, 26vw); height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%); } .waves--start { inset-inline-start: 0; } .waves--end { inset-inline-end: 0; transform: scaleX(-1); } @media (max-width: 860px) { .waves { display: none; } } /* ---------- Type helpers ---------- */ .eyebrow { display: inline-flex; margin-bottom: 22px; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 500; font-size: .82rem; letter-spacing: .04em; color: #FF7A9E; background: rgba(255, 46, 99, .12); border: 1px solid rgba(255, 46, 99, .3); padding: 7px 16px; border-radius: 999px; } .bg-card .eyebrow { background: rgba(255, 46, 99, .09); color: #D4114C; } .h-sect { font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.12; } /* a beat before the question, inside the heading rather than above it */ .lead-in { display: block; font-size: .5em; font-weight: 700; letter-spacing: -.02em; color: var(--on-dark-soft); margin-bottom: .35em; } .h-sub { margin-top: 20px; color: var(--on-dark-soft); font-size: clamp(1.08rem, 1.7vw, 1.28rem); max-width: 50ch; line-height: 1.65; } .bg-card .h-sub { color: var(--card-soft); } .center { text-align: center; } .center .h-sub, .center .eyebrow { margin-inline: auto; } .center .h-sub { max-width: 46ch; } /* marker under a highlighted word */ .nb { white-space: nowrap; } /* the display face is large enough that forced phrases overflow narrow screens */ @media (max-width: 760px) { .nb { white-space: normal; } } /* The bar is painted as a background rather than as one absolutely positioned box, because an inline span that wraps has no single box to position against: the old ::after collapsed to a dot on the last line whenever the phrase broke on a phone. A cloned decoration underlines every fragment instead. */ .mark { white-space: nowrap; background-image: linear-gradient(var(--cta), var(--cta)); background-repeat: no-repeat; background-size: 100% .16em; background-position: 0 calc(100% - .04em); padding-inline: 2px; margin-inline: -2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } @media (max-width: 760px) { .mark { white-space: normal; } } .grad { background: linear-gradient(92deg, #FF5C87 0%, #C86BFF 55%, #6FA8FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: clamp(.98rem, 1.4vw, 1.08rem); padding: 15px 30px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } .btn--cta { background: linear-gradient(96deg, var(--cta) 0%, var(--cta-2) 100%); color: var(--cta-ink); box-shadow: 0 10px 30px -8px var(--cta-glow), inset 0 1px 0 rgba(255,255,255,.25); } .btn--cta:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -8px var(--cta-glow); } .btn--ghost { background: transparent; color: var(--on-dark); border: 1.5px solid var(--hairline); } .btn--wa { background: #128C7E; border-color: #128C7E; color: #fff; } .btn--wa:hover { background: #0E6F64; border-color: #0E6F64; color: #fff; } .btn--ghost:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); } .bg-card .btn--ghost { color: var(--card-ink); border-color: var(--card-rule); } .bg-card .btn--ghost:hover { background: #fff; border-color: #C9CEDD; } .btn--wide { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 14px; } h1 + .btn-row, h2 + .btn-row, p + .btn-row, .h-sub + .btn-row { margin-top: clamp(26px, 3.2vw, 34px); } /* text that follows a button gets the same pocket of air the button was given above it, so the row does not read as glued to the paragraph */ .btn-row + .h-sub { margin-top: clamp(26px, 3.2vw, 34px); } .center .btn-row { justify-content: center; } /* The arrow belongs to the primary button and to nothing else: one ← per decision, always before the label, and only on a .btn--cta that carries the visitor forward. Not on a ghost button, not on a "back" link, not on a whatsapp button (it has its own mark), and not on a submit that really sends - the contact button wears one because it navigates to the checklist rather than sending, while the checklist button does send and stays bare. */ .btn .ic { font-size: 1.1em; line-height: 1; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 60; background: linear-gradient(180deg, rgba(10,6,19,.92) 0%, rgba(10,6,19,.72) 55%, rgba(10,6,19,0) 100%); backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); transition: background .2s ease; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-head); } .brand-logo { width: 34px; height: 34px; display: block; } .brand-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; } .brand-name span { color: var(--on-dark-faint); font-weight: 500; font-size: .82rem; display: block; line-height: 1.2; } /* a hairline in the gap so the three items read as separate stops */ .nav { display: flex; align-items: center; gap: 0; } .nav a { position: relative; text-decoration: none; font-family: var(--font-head); font-weight: 700; font-size: .95rem; letter-spacing: -.01em; color: rgba(255, 255, 255, .78); padding-inline: 15px; line-height: 1.5; transition: color .18s ease; } /* the separator is drawn, not typed: a middot lands at a different size and height in every font, and this one has to sit dead centre in the gap and stay round */ .nav a + a::before { content: ""; position: absolute; inset-inline-start: -2.5px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--cta); } .nav a:first-child { padding-inline-start: 0; } .nav a:last-child { padding-inline-end: 0; } .nav a:hover, .nav a.is-active { color: #fff; } /* the words are bright enough now that white alone barely reads as "you are here", so the section you are standing in gets a rule under it */ .nav a.is-active::after { content: ""; position: absolute; bottom: -5px; height: 2px; border-radius: 2px; inset-inline: 15px; background: var(--cta); } .nav a:first-child.is-active::after { inset-inline-start: 0; } .nav a:last-child.is-active::after { inset-inline-end: 0; } @media (max-width: 940px) { .nav { display: none; } } /* ---------- Hero ---------- */ /* the header is sticky, so the first frame begins exactly where the strip ends and its top border reads as part of it. This is the gap that tells them apart. */ .hero { padding-block: clamp(40px, 6vw, 76px) clamp(52px, 7vw, 92px); margin-top: clamp(16px, 2.2vw, 30px); } /* The clip and the pitch used to share a row, which left the headline 545px to work in - four lines of display type - and the clip 428px, too small to read the spreadsheet it is showing. Stacked, the words get the full measure and the picture gets a size worth looking at. */ .hero-stack { max-width: 940px; margin-inline: auto; } /* The headline carries a clause more than it used to, and from 1200px up that tipped it onto a third line and pushed the button under the fold on a laptop. The measure was the constraint, not the type size: another 100px of column puts it back on two lines at the same scale. Below 1200px nothing changes - the narrower widths never wrapped to three. */ @media (min-width: 1200px) { .hero-stack { max-width: 1040px; } } .hero-stack .hero-sub { max-width: 52ch; margin-inline: auto; } .hero-film { max-width: 800px; margin-top: clamp(44px, 6vw, 84px); } .hero h1 { font-size: clamp(2.05rem, 5.6vw, 3.9rem); line-height: 1.12; } /* nowrap that is never released: a hyphenated latin run like ל-AI must not break across lines at any width */ /* holds a run together at every width, unlike .nb which is released below 760px so a forced display phrase does not overflow a phone. Use it on short terms: "ו-AI" broke after the hyphen at 390 and stranded the latin on the next line. Never on a long phrase - that is what .nb is released for. */ .keep { white-space: nowrap; } .hero h1 .l2 { display: block; } .hero-sub { margin-top: 24px; font-size: clamp(1.15rem, 1.9vw, 1.42rem); color: var(--on-dark-soft); max-width: 36ch; } .hero-sub b { color: #fff; font-weight: 700; } /* video */ .video { position: relative; border-radius: var(--radius); overflow: hidden; background: #14091F; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 6px rgba(255,255,255,.03); aspect-ratio: 16 / 9; } .video iframe { width: 100%; height: 100%; border: 0; } /* the loop fills the 16:9 frame; object-fit keeps a clip of another ratio from letterboxing inside a box that already has a border */ .video-loop { width: 100%; height: 100%; display: block; object-fit: cover; background: #14091F; } .video-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #180C26 center/cover no-repeat; } .video-facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,6,19,.15) 0%, rgba(10,6,19,.72) 100%); } .video-play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%; background: linear-gradient(96deg, var(--cta), var(--cta-2)); box-shadow: 0 12px 34px -6px var(--cta-glow); display: grid; place-items: center; z-index: 2; transition: transform .2s ease; } .video-facade:hover .video-play { transform: scale(1.07); } .video-play svg { width: 26px; height: 26px; fill: #fff; margin-inline-start: 4px; } .video-cap { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 16px 20px; font-family: var(--font-head); font-weight: 600; font-size: .95rem; color: #fff; display: flex; align-items: center; gap: 8px; } .video-cap small { color: var(--on-dark-soft); font-weight: 400; } /* ---------- Pain chips ---------- */ .pain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 4vw, 42px); } @media (max-width: 860px) { .pain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .pain-grid { grid-template-columns: 1fr; } } .pain { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,.055); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 20px 22px; font-family: var(--font-head); font-weight: 500; font-size: 1.08rem; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .pain:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); transform: translateY(-2px); } .pain i { flex: 0 0 34px; height: 34px; border-radius: 10px; background: linear-gradient(140deg, rgba(255,46,99,.9), rgba(139,49,216,.9)); display: grid; place-items: center; } .pain i svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.7; } /* the sentences in this section are centred; only the six cards keep their own alignment, since each is an icon followed by its line */ /* the offer to see the whole thing, sitting under the problem rather than opening a section of its own - one fewer heading down the page */ .pain-more { max-width: 62ch; margin: clamp(30px, 4vw, 44px) auto 0; padding-top: clamp(26px, 3.4vw, 36px); border-top: 1px solid var(--hairline); } .pain-note { margin-top: 34px; font-size: clamp(1.2rem, 2.1vw, 1.6rem); font-family: var(--font-head); font-weight: 600; text-align: center; max-width: 46ch; margin-inline: auto; } /* --------------------------------------------------------- Three offers, read side by side. The middle one is the product most people come for, so it stands a step forward and out of the dark, the way a plan grid is normally read. Where a price would sit, the length of the session sits: it is the number this buyer actually wants. --------------------------------------------------------- */ .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: clamp(14px, 1.8vw, 22px); margin-top: clamp(56px, 6vw, 82px); max-width: 1000px; margin-inline: auto; } .plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(38px, 3.4vw, 46px) clamp(20px, 2.2vw, 26px) clamp(24px, 2.6vw, 32px); border-radius: var(--radius); background: rgba(255, 255, 255, .07); border: 1px solid var(--hairline); text-align: center; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .plan:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .28); } .plan-ico { width: 46px; height: 46px; margin-inline: auto; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); } .plan-ico svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* the three things are counted in the heading above them, so the cards carry the count - as a filled disc sitting on the top edge, half in and half out, which reads as a step marker rather than as another thing inside the card */ .plan-num { position: absolute; top: 0; inset-inline: 0; margin-inline: auto; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--card-ink); /* the hairline ring is what holds the disc together where it overlaps the white middle card - without it the lower half dissolves into it */ box-shadow: 0 0 0 1px var(--card-rule), 0 12px 26px -10px rgba(6, 2, 16, .8); font-family: var(--font-head); font-weight: 800; font-size: 1.28rem; line-height: 1; font-variant-numeric: tabular-nums; } .plan h3 { font-size: clamp(1.14rem, 2vw, 1.34rem); } .plan-line { color: var(--on-dark-soft); font-size: .96rem; line-height: 1.7; flex: 1 1 auto; } .plan-dur { margin-top: 4px; display: flex; align-items: baseline; justify-content: center; gap: 8px; font-family: var(--font-head); } .plan-dur b { font-weight: 900; letter-spacing: -.03em; line-height: 1; font-size: clamp(2.1rem, 4.2vw, 2.9rem); color: #fff; } .plan-dur span { font-size: .9rem; font-weight: 600; color: var(--on-dark-faint); } .plan-dur--text b { font-size: clamp(1.2rem, 2.3vw, 1.5rem); } .plan .btn { margin-top: 6px; } /* the middle card carries the offer, so it leaves the dark */ .plan--core { background: var(--card); border-color: transparent; margin-block: clamp(-6px, -1.4vw, -22px); padding-block: clamp(40px, 3.8vw, 52px) clamp(26px, 3vw, 36px); box-shadow: 0 30px 64px -30px rgba(6, 2, 16, .95); } .plan--core:hover { background: var(--card); transform: translateY(-3px); } .plan--core h3 { color: var(--card-ink); } .plan--core .plan-line { color: var(--card-soft); } .plan--core .plan-ico { background: rgba(255, 46, 99, .1); color: var(--cta); } .plan--core .plan-dur b { color: var(--card-ink); } .plan--core .plan-dur span { color: var(--card-soft); } .plan-tag { margin-top: auto; padding-top: clamp(14px, 1.8vw, 18px); border-top: 1px solid var(--card-rule); font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .02em; color: var(--cta); display: flex; align-items: center; justify-content: center; gap: 7px; } .plan-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cta); flex: none; } /* The three takeaways on the workshop page: the middle card used to be white, which made it the brightest object in the section and left the numbered discs fighting it for the top edge. It sits on the same ground as its neighbours now, and what marks it instead is one filled white pill - the only solid white in the block, so the eye goes there without the whole card shouting. The card still stands a little proud of the row, so the hierarchy survives the colour going away. Scoped to #take on purpose: the same two classes carry the popular offer on the home page, where the white card is still doing its job. */ #take .plan--core { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); box-shadow: 0 30px 64px -34px rgba(6, 2, 16, .9); } #take .plan--core:hover { background: rgba(255, 255, 255, .11); border-color: rgba(255, 255, 255, .3); } #take .plan--core h3 { color: var(--on-dark); } #take .plan--core .plan-line { color: var(--on-dark-soft); } #take .plan-tag { align-self: center; margin-top: auto; padding: 8px 16px; border-top: 0; border-radius: 999px; background: #fff; color: #17102A; font-size: .84rem; font-weight: 800; letter-spacing: .01em; display: inline-flex; gap: 8px; box-shadow: 0 14px 28px -16px rgba(6, 2, 16, .95); } @media (max-width: 860px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 460px; gap: 26px; } .plan--core { margin-block: 0; } } @media (prefers-reduced-motion: reduce) { .plan, .plan--core:hover { transition: none; transform: none; } } .win { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .win li { font-family: var(--font-head); font-weight: 600; font-size: .95rem; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--hairline); display: flex; align-items: center; gap: 8px; } .win li::before { content: "\2713"; color: #6FE9B4; font-weight: 700; } /* ---------- Worked example: one real event, minute by minute ---------- */ .demo { margin-top: clamp(26px, 3.6vw, 42px); } .demo-tabs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .demo-tab { font: inherit; font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--on-dark-soft); background: transparent; border: 1px solid var(--hairline); border-radius: 999px; padding: 11px 22px; cursor: pointer; transition: color .18s ease, border-color .18s ease, background .18s ease; } .demo-tab:hover { color: #fff; border-color: rgba(255,255,255,.35); } .demo-tab.is-on { color: #fff; border-color: transparent; background: linear-gradient(96deg, var(--cta), var(--cta-2)); box-shadow: 0 10px 26px -12px var(--cta-glow); } .demo-panel[hidden] { display: none; } .demo-panel { animation: demoIn .32s ease both; margin-top: 30px; } @keyframes demoIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .demo-panel { animation: none; } } .story-head { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 1.06rem; color: var(--on-dark-soft); margin-bottom: 26px; } .story-head b { color: #fff; } .story { position: relative; max-width: 660px; margin-inline: auto; display: grid; gap: 0; } .story-step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 34px; padding-bottom: 30px; } .story-step:last-child { padding-bottom: 0; } /* the rail runs between the clock and what happened */ .story-step::before { content: ""; position: absolute; top: 24px; bottom: -8px; inset-inline-start: calc(52px + 16px); width: 2px; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); } .story-step:last-child::before { display: none; } .story-step::after { content: ""; position: absolute; top: 8px; inset-inline-start: calc(52px + 11px); width: 12px; height: 12px; border-radius: 50%; background: var(--night); border: 2px solid rgba(255,255,255,.32); } .story-step.is-ai::after { background: linear-gradient(140deg, var(--cta), #8B31D8); border-color: transparent; box-shadow: 0 0 16px rgba(255,46,99,.7); } .story-time { font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--on-dark-faint); direction: ltr; text-align: left; padding-top: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; } .story-step.is-ai .story-time { color: #FF7A9E; } .story-what { font-size: 1.02rem; font-weight: 600; } .story-what span { display: block; font-weight: 400; font-size: .92rem; color: var(--on-dark-soft); margin-top: 3px; } .story-art { margin-top: 12px; } .ai-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--font-head); font-weight: 700; font-size: .86rem; color: #fff; background: linear-gradient(125deg, rgba(255,46,99,.9), rgba(139,49,216,.9)); border-radius: 999px; padding: 8px 15px; box-shadow: 0 12px 28px -16px rgba(255,46,99,.9); } .ai-chip em { font-style: normal; opacity: .8; font-weight: 500; } .story-punch { margin-top: 30px; text-align: center; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 600; color: var(--on-dark-soft); } .story-punch b { color: #fff; font-weight: 900; font-family: var(--font-display); letter-spacing: -.02em; } .demo-note { /* the line needs 732px at this size - 660 broke it in the middle */ max-width: 780px; margin: 34px auto 0; text-align: center; font-size: .96rem; line-height: 1.75; color: var(--on-dark-faint); border-top: 1px solid var(--hairline); padding-top: 22px; } @media (max-width: 620px) { .story-step { grid-template-columns: 48px minmax(0, 1fr); gap: 26px; } .story-step::before { inset-inline-start: calc(48px + 12px); } .story-step::after { inset-inline-start: calc(48px + 7px); } .story-time { font-size: .82rem; } } /* ---------- Mockup primitives used inside the story ---------- */ .frame { background: #14101F; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; overflow: hidden; box-shadow: 0 26px 60px -32px rgba(0,0,0,.95); } .frame-bar { display: flex; align-items: center; gap: 7px; padding: 9px 13px; background: rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.09); } .frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); } .frame-bar span { margin-inline-start: auto; font-size: .72rem; color: var(--on-dark-faint); font-family: var(--font-head); } .frame-body { padding: 14px 16px; font-size: .92rem; } /* form-style rows */ .f-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(255,255,255,.1); } .f-row:last-child { border-bottom: 0; } .f-row b { flex: 0 0 74px; color: var(--on-dark-faint); font-weight: 500; font-size: .84rem; } .f-row span { color: #fff; } /* chat bubble */ .bubble { background: linear-gradient(180deg, #1F7A5E, #17614A); border-radius: 14px 14px 14px 4px; padding: 11px 14px; color: #fff; font-size: .92rem; line-height: 1.55; max-width: 92%; position: relative; } .bubble .meta { display: flex; gap: 5px; align-items: center; justify-content: flex-start; margin-top: 6px; font-size: .68rem; color: rgba(255,255,255,.65); direction: ltr; } .bubble .meta svg { width: 13px; height: 13px; stroke: #7FE3C0; fill: none; stroke-width: 2.2; } /* spreadsheet strip */ .grid-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: .78rem; } .grid-mini div { padding: 8px 9px; border-inline-start: 1px solid rgba(255,255,255,.08); border-top: 1px solid rgba(255,255,255,.08); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grid-mini .h { background: rgba(255,255,255,.07); color: var(--on-dark-faint); font-weight: 600; border-top: 0; } .grid-mini .new { background: rgba(111,233,180,.12); color: #fff; } .grid-mini .tag { color: #FF7A9E; font-weight: 700; } /* task / post cards */ .mini-card { display: flex; gap: 10px; align-items: flex-start; } .mini-card .av { flex: 0 0 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(140deg, var(--cta), #8B31D8); font-size: .72rem; font-weight: 800; font-family: var(--font-head); } .mini-card p { font-size: .9rem } .mini-card .t { font-size: .72rem; color: var(--on-dark-faint); margin-top: 3px; } .pill-done { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; color: #6FE9B4; background: rgba(111,233,180,.14); border-radius: 999px; padding: 3px 10px; margin-top: 8px; } /* --------------------------------------------------------- The journey runs between the sections: each gap holds a curve that sweeps across the page and draws itself as you arrive, so scrolling feels like travelling the route. --------------------------------------------------------- */ .junction { position: relative; height: clamp(150px, 19vw, 260px); /* legs of different lengths keep the descent from feeling metronomic */ z-index: 1; pointer-events: none; overflow: hidden; } .junction:nth-of-type(2n) { height: clamp(126px, 15vw, 210px); } .junction:nth-of-type(3n) { height: clamp(170px, 22vw, 300px); } .junction svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%); } .j-base { fill: none; stroke: rgba(255,255,255,.13); stroke-width: 2; stroke-linecap: round; } .j-draw { fill: none; stroke: url(#jGrad); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 9px rgba(255,46,99,.5)); } .j-head { fill: #fff; opacity: 0; filter: drop-shadow(0 0 12px rgba(255,46,99,.95)); transition: opacity .25s ease; } .junction.is-live .j-head { opacity: 1; } .j-stop { position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: var(--night); border: 2px solid rgba(255,255,255,.26); transition: transform .4s cubic-bezier(.22,.61,.36,1), background .4s ease, border-color .4s ease, box-shadow .4s ease; } .j-stop.is-on { background: linear-gradient(140deg, var(--cta), #8B31D8); border-color: transparent; transform: scale(1.5); box-shadow: 0 0 0 6px rgba(255,46,99,.14), 0 0 24px rgba(255,46,99,.6); } @media (prefers-reduced-motion: reduce) { .j-stop, .j-head { transition: none; } } .order-note-sub { max-width: 60ch; margin-inline: auto; text-align: center; margin-top: clamp(22px, 3vw, 30px); font-size: .94rem; line-height: 1.75; color: var(--on-dark-faint); border-top: 1px solid var(--hairline); padding-top: 16px; } /* ---------- About ---------- */ .about-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 52px); align-items: center; } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } /* stacked, a full-width 3:4 portrait would own the screen */ .portrait { max-width: 320px; margin-inline: auto; } } .about-grid.is-solo { grid-template-columns: minmax(0, 1fr); } .portrait { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; background: linear-gradient(150deg, #2A1140, #170B26); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 70px -34px rgba(0,0,0,.9); } .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .portrait-ph { position: absolute; inset: 0; display: grid; place-items: center; gap: 10px; text-align: center; padding: 24px; color: var(--on-dark-faint); font-size: .88rem; } .portrait-ph svg { width: 46px; height: 46px; stroke: currentColor; fill: none; stroke-width: 1.3; margin-inline: auto; } .about-name { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.7rem); } .about-role { color: var(--on-dark-soft); margin-top: 6px; font-size: 1.02rem; } .about-lines { display: grid; gap: 10px; margin-top: 20px; } .about-lines li { display: flex; gap: 10px; color: var(--on-dark-soft); } .about-lines li::before { content: "—"; color: var(--cta); } .skills-lead { margin-top: 20px; color: var(--on-dark-soft); font-size: .95rem; } .skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .skill { font-size: .84rem; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--hairline); color: var(--on-dark-soft); direction: ltr; } .quote { margin: 28px 0 0; padding-inline-start: 24px; border-inline-start: 3px solid var(--cta); } .quote blockquote { margin: 0; font-family: var(--font-head); font-weight: 700; letter-spacing: -.02em; /* a paragraph-length statement, not a one-liner: it reads as an aside to the bio above it, so it sits a size down and well off white */ font-size: clamp(.98rem, 1.5vw, 1.14rem); line-height: 1.72; color: rgba(255, 255, 255, .68); quotes: "\201D" "\201C"; } .quote blockquote::before { content: open-quote; } .quote blockquote::after { content: close-quote; } .quote-by { margin-top: 10px; font-size: .88rem; font-weight: 600; color: var(--on-dark-faint); letter-spacing: 0; } /* ---------- Forms ---------- */ /* the form is the taller half by nature, so it takes the wider half too: the copy beside it wraps sooner and the two columns come out closer */ .form-wrap { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: center; } @media (max-width: 900px) { .form-wrap { grid-template-columns: 1fr; } } /* the pitch sits in half the page here, not across it: at the page-wide size its lines broke into three short fragments against the form and left a ragged void between the two columns */ .form-wrap .h-sect { font-size: clamp(1.8rem, 3vw, 2.25rem); } /* the question and the sting each get their own line, at every width, instead of breaking wherever the column happens to run out */ .form-wrap .h-sect .grad { display: block; } .form-wrap .h-sub { max-width: 30ch; } /* a panel of the same night as the page, lifted just enough to read as a surface - a white card here cut a hole in the journey. It sits above the section rather than punching a hole below it, so the base is lighter than the ground and carries less of its own shadow. */ .form-card { background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .035)), rgba(38, 27, 64, .56); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); color: var(--on-dark); border: 1px solid rgba(255, 255, 255, .17); border-radius: var(--radius); padding: clamp(22px, 3vw, 32px); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .09); } .form-card h3 { font-size: 1.25rem; margin-bottom: 20px; color: #fff; } .form-card .lede { color: var(--on-dark-soft); font-size: .95rem; margin-bottom: 18px; } .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } @media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } } /* start, not stretch: a field with an error slot must not push its label and input out of line with the field beside it */ .field { display: grid; gap: 6px; align-content: start; } .field + .field, .grid2 + .field, .field + .grid2, .grid2 + .grid2 { margin-top: 14px; } /* inside a two-up row the fields are siblings, and that margin pushed the second column half a line below the first - the row gap spaces them, in both the two-column and the stacked layout */ .grid2 > .field + .field { margin-top: 0; } .field label { font-size: .85rem; font-weight: 700; color: var(--on-dark); font-family: var(--font-head); } .field label .opt { font-weight: 400; color: var(--on-dark-faint); } .field input, .field textarea { font: inherit; font-size: 1rem; color: #fff; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; padding: 13px 15px; width: 100%; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } .field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, .34); } .field input:focus, .field textarea:focus { outline: none; background: rgba(255, 255, 255, .08); border-color: var(--cta); box-shadow: 0 0 0 4px rgba(255, 46, 99, .2); } .field textarea { min-height: 96px; resize: vertical; } .field.has-error input, .field.has-error textarea { border-color: #FF5C7A; } .field .err { font-size: .8rem; color: #FF8FA6; font-weight: 600; } /* the send button carries a sentence and whatsapp carries a word, so the row is split in their proportion rather than down the middle */ .form-card .form-actions { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 12px; margin-top: 18px; } @media (max-width: 620px) { .form-card .form-actions { grid-template-columns: 1fr; } } .form-card .form-actions .btn { margin-top: 0; padding-inline: 16px; } .form-card .btn { margin-top: 18px; } /* whatsapp is not a footnote here - for this audience it is often the channel they would actually use, so it gets a button, not a sentence */ .btn--wa .ic-wa { display: inline-flex; width: 19px; height: 19px; } .btn--wa .ic-wa svg { width: 100%; height: 100%; fill: currentColor; } .form-fine { margin-top: 12px; font-size: .82rem; color: var(--on-dark-faint); text-align: center; line-height: 1.7; } .form-fine a { color: var(--on-dark-soft); text-decoration: underline; text-underline-offset: 3px; } .form-fine a:hover { color: #fff; } .form-status { margin-top: 10px; font-size: .9rem; font-weight: 700; color: #FF8FA6; } .form-status:empty { margin-top: 0; } .form-status.is-open { color: #6FE9B4; } /* a failed send is a state the visitor can act on, so it gets a button */ .form-status.is-warn { color: #FFC46B; display: grid; gap: 12px; justify-items: start; } .form-status .status-go { font-size: .95rem; padding: 12px 22px; } .form-status .status-why { font-weight: 500; font-size: .8rem; color: var(--on-dark-faint); direction: ltr; text-align: start; } .btn--wa { gap: 9px; } .wa-mark { width: 19px; height: 19px; flex: 0 0 auto; } .form-done { display: none; } .form-done.is-visible { display: block; } .form-card.is-hidden { display: none; } .form-done h3 { font-size: 1.3rem; margin-bottom: 8px; } .form-done p { color: var(--on-dark-soft); } .form-done .btn-row { margin-top: 18px; } /* ---------- Final CTA ---------- */ .final h2 { font-size: clamp(2.2rem, 5.6vw, 3.9rem); max-width: 24ch; margin-inline: auto; } .final .h-sub { margin-inline: auto; } /* ---------- Who it fits: the objections, answered side by side ---------- */ .fit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 30px); max-width: 760px; margin: clamp(28px, 4vw, 42px) auto 0; } @media (max-width: 620px) { .fit-grid { grid-template-columns: 1fr; } } .fit-col { border: 1px solid var(--hairline); border-radius: clamp(16px, 2vw, 22px); background: rgba(255, 255, 255, .022); padding: clamp(20px, 2.6vw, 28px); } .fit-col--yes { border-color: rgba(111, 233, 180, .28); background: rgba(111, 233, 180, .05); } .fit-head { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; font-size: 1.12rem; color: #fff; margin-bottom: 14px; } .fit-list { display: grid; gap: 11px; } .fit-list li { position: relative; padding-inline-start: 28px; color: var(--on-dark-soft); line-height: 1.6; } .fit-list li::before { position: absolute; inset-inline-start: 0; top: -1px; font-weight: 700; font-size: 1.05rem; } .fit-col--no .fit-list li::before { content: "\00D7"; color: #FF6B8A; } .fit-col--yes .fit-list li::before { content: "\2713"; color: #6FE9B4; } /* the line that closes the fit section is a claim now, not a caveat, so it carries the weight of one */ .fit-note { max-width: 50ch; margin-inline: auto; text-align: center; margin-top: clamp(34px, 4.2vw, 52px); padding-top: clamp(26px, 3.2vw, 36px); border-top: 1px solid var(--hairline); font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; /* the cap was the reason this wrapped at every width, desktop included; the floor is what buys the single line on a phone */ font-size: clamp(.9rem, 2.6vw, 1.9rem); line-height: 1.45; color: #fff; } /* the door to what comes after, said once and quietly */ .final-after { margin-top: 30px; max-width: 56ch; margin-inline: auto; font-size: .94rem; line-height: 1.75; color: var(--on-dark-faint); border-top: 1px solid var(--hairline); padding-top: 20px; } /* a hint under a field that people hesitate to fill */ .field .hint { font-size: .82rem; color: var(--on-dark-faint); line-height: 1.5; } /* --------------------------------------------------------- The checklist page: ten processes, and the optional step between filling the form and sending it. --------------------------------------------------------- */ .proc-list { display: grid; gap: 14px; max-width: 780px; margin: clamp(30px, 4vw, 46px) auto 0; } .proc { position: relative; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 4px 18px; border: 1px solid var(--hairline); border-radius: clamp(14px, 1.8vw, 18px); background: rgba(255, 255, 255, .028); padding: clamp(18px, 2.4vw, 24px); transition: border-color .2s ease, background .2s ease; } /* the number, the text and the tick each hold their own column, so only the heading row gives up width to the box - the description and the question below it still run the full width of the card */ .proc { grid-template-columns: 3.2rem minmax(0, 1fr) 22px; } .proc-n { grid-column: 1; grid-row: 1 / span 3; } .proc h3 { grid-column: 2; grid-row: 1; } .proc > p { grid-column: 2; } .proc:hover { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .05); } .proc-n { font-family: var(--font-head); font-weight: 900; font-size: 1.5rem; color: var(--cta); direction: ltr; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.2; } .proc h3 { font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; } .proc p { color: var(--on-dark-soft); font-size: .97rem; line-height: 1.7; margin-top: 4px; } .proc .ask { margin-top: 10px; font-size: .9rem; color: var(--on-dark-faint); border-inline-start: 2px solid rgba(255, 255, 255, .16); padding-inline-start: 12px; } @media (max-width: 560px) { .proc { grid-template-columns: 2.4rem minmax(0, 1fr) 22px; gap: 4px 12px; } .proc-n { font-size: 1.25rem; } } /* ---------- ticking the list where it is read ---------- The twelve items used to be repeated as a grid of checkboxes inside a modal. Now each item is its own control: a stretched label over the whole card, and a box in the corner to show what it did. The input lives here and joins the form further down the page through its form= attribute. */ .proc-tick { position: absolute; opacity: 0; width: 0; height: 0; } .proc-hit { position: absolute; inset: 0; cursor: pointer; border-radius: inherit; } .proc-box { grid-column: 3; grid-row: 1; align-self: start; margin-top: 1px; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .3); display: grid; place-items: center; transition: background .18s ease, border-color .18s ease; } .proc-box svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 3; opacity: 0; transition: opacity .18s ease; } .proc-tick:checked ~ .proc-box { background: linear-gradient(140deg, var(--cta), #8B31D8); border-color: transparent; } .proc-tick:checked ~ .proc-box svg { opacity: 1; } .proc-tick:focus-visible ~ .proc-box { outline: 3px solid var(--cta); outline-offset: 3px; } /* a ticked item should read as chosen from across the page, not only by the state of a 22px box in its corner */ .proc:has(.proc-tick:checked) { border-color: rgba(255, 46, 99, .55); background: rgba(255, 46, 99, .07); } .proc:has(.proc-tick:checked) h3 { color: #fff; } /* ---------- what the visitor already told the first page ---------- */ .lead-known { display: none; } .is-carried .lead-known { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid rgba(255, 255, 255, .15); border-radius: 12px; background: rgba(255, 255, 255, .045); } .lead-known-k { font-size: .82rem; font-weight: 700; color: var(--on-dark-faint); font-family: var(--font-head); } .lead-known-v { font-weight: 700; color: #fff; } .lead-known-edit { margin-inline-start: auto; font: inherit; font-size: .85rem; font-weight: 600; color: var(--on-dark-soft); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; padding: 2px 4px; transition: color .18s ease; } .lead-known-edit:hover { color: #fff; } /* the second screen only asks what the first one did not */ [data-carry-only] { display: none; } .is-carried [data-carry-only] { display: revert; } .is-carried [data-no-carry], .is-carried [data-carry-fields] { display: none; } /* the visitor pressed send on the page before this one; the first thing they should read here is that it landed */ .lead-got { align-items: center; gap: 9px; margin-bottom: 18px; padding: 10px 18px 10px 14px; border-radius: 999px; border: 1px solid rgba(111, 233, 180, .34); background: rgba(111, 233, 180, .1); color: #6FE9B4; font-family: var(--font-head); font-weight: 700; font-size: .92rem; } .is-carried .lead-got { display: inline-flex; } .lead-got svg { width: 15px; height: 15px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 3.2; } .pick-count { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 16px; font-size: .88rem; color: var(--on-dark-faint); } .pick-count [data-pick-count]:empty { display: none; } .pick-count + .field { margin-top: 16px; } .pick-count.is-on, .pick-count [data-pick-count].is-on { color: #6FE9B4; font-weight: 700; } .pick-count a { color: var(--on-dark-soft); text-decoration: underline; text-underline-offset: 3px; } .pick-count a:hover { color: #fff; } /* ---------- Footer ---------- */ .site-footer { padding-block: 34px; background: transparent; } .footer-inner { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; } .footer-links { display: flex; flex-wrap: wrap; row-gap: 4px; column-gap: 0; } .footer-links a { font-size: .82rem; color: var(--on-dark-faint); text-decoration: none; } .footer-links a:hover { color: var(--on-dark); } /* a dot between the links. It rides at the end of its own link rather than the start of the next one, so a row that wraps ends on a separator instead of opening with one. Its colour is set here, not inherited, so hovering a link does not light up the punctuation beside it. */ .footer-links a::after { content: "·"; margin-inline: 11px; color: rgba(255, 255, 255, .2); } .footer-links a:last-child::after { content: none; } .footer-meta { font-size: .82rem; color: var(--on-dark-faint); direction: ltr; } /* ---------- Sticky CTA ---------- */ .float-cta { position: fixed; z-index: 70; inset-inline-end: 20px; bottom: 20px; display: flex; gap: 10px; align-items: center; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .float-cta.is-on { opacity: 1; transform: none; pointer-events: auto; } .float-cta .btn { box-shadow: 0 14px 40px -10px var(--cta-glow); } @media (max-width: 720px) { .float-cta { inset-inline: 12px; bottom: 12px; } .float-cta .btn { flex: 1; } } /* ---------- Back to the top ---------- It sits at the start edge, opposite the WhatsApp pill, so the two never argue over the same corner - and unlike the pill it stays out while the form is on screen, because that is exactly where someone wants it. */ .to-top { position: fixed; z-index: 70; inset-inline-start: 20px; bottom: 20px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; cursor: pointer; color: var(--on-dark); background: rgba(20, 13, 38, .82); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .95); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, border-color .18s ease, background .18s ease; } .to-top.is-on { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { color: #fff; border-color: rgba(255, 255, 255, .34); background: rgba(30, 20, 54, .9); } .to-top:active { transform: translateY(1px) scale(.96); } .to-top svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 720px) { .to-top { inset-inline-start: 12px; bottom: 12px; width: 44px; height: 44px; } /* the pill starts after the button instead of underneath it */ .float-cta { inset-inline-start: 68px; } } /* ---------- Standalone documents (thanks, privacy, accessibility) ---------- */ .doc-wrap { max-width: 62ch; } .doc-wrap.center { text-align: center; margin-inline: auto; } .doc-wrap h1 { margin-bottom: 14px; } .doc-wrap h2 { font-family: var(--font-head); font-weight: 800; font-size: 1.2rem; color: #fff; margin-top: 34px; margin-bottom: 8px; letter-spacing: -.02em; } .doc-wrap p { color: var(--on-dark-soft); line-height: 1.8; } .doc-wrap p + p { margin-top: 10px; } .doc-wrap b { color: #fff; font-weight: 700; } /* a button is not a link in running text - the underline is for prose */ .doc-wrap a:not(.btn) { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .doc-list { margin-top: 10px; display: grid; gap: 9px; } .doc-list li { position: relative; padding-inline-start: 20px; color: var(--on-dark-soft); line-height: 1.7; } .doc-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--cta); } .doc-wrap .nowrap { white-space: nowrap; } .doc-meta { margin-top: 36px; font-size: .84rem; color: var(--on-dark-faint); } .doc-wrap .btn-row { margin-top: 28px; justify-content: center; } /* --------------------------------------------------------- Micro-interactions: small, cheap responses that make the scroll feel travelled rather than paged through. Every one of them is off under prefers-reduced-motion. --------------------------------------------------------- */ /* a group arrives item by item instead of as one block */ .rv[data-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity .58s ease, transform .58s cubic-bezier(.22, .61, .36, 1); } .rv[data-stagger].is-in > * { opacity: 1; transform: none; } /* a row of cards is a heavier object than a line of text, so it arrives from a little further away and settles out of a slight recess. The scale is small on purpose - anything more and the type blurs on the way in. */ .plans.rv > *, .pain-grid.rv > *, .lp-facts.rv > *, .plans.rv, .pain-grid.rv, .lp-facts.rv, .form-card.rv, .lp-by.rv, .faq-list.rv > * { transform: translateY(28px) scale(.984); } .plans.rv.is-in > *, .pain-grid.rv.is-in > *, .lp-facts.rv.is-in > *, .plans.rv.is-in, .pain-grid.rv.is-in, .lp-facts.rv.is-in, .form-card.rv.is-in, .lp-by.rv.is-in, .faq-list.rv.is-in > * { transform: none; } /* every press answers */ .btn:active { transform: translateY(1px) scale(.985); } .demo-tab:active { transform: scale(.97); } /* the header tightens once you have left the top */ .header-inner { transition: height .3s cubic-bezier(.22, .61, .36, 1); } .site-header.is-stuck .header-inner { height: 58px; } .brand-logo { transition: transform .3s cubic-bezier(.22, .61, .36, 1); } .site-header.is-stuck .brand-logo { transform: scale(.9); } /* a stop on the journey rings once as you reach it */ .j-stop::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--cta); opacity: 0; pointer-events: none; } .j-stop.is-on::after { animation: stopRing .9s ease-out 1; } @keyframes stopRing { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } } /* the mockups answer the cursor the way a real window would */ @media (hover: hover) and (pointer: fine) { .frame { transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease, border-color .25s ease; } .frame:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, .22); box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .95); } } /* the AI step is the moment the process stops being manual: it breathes a few times when it arrives, then settles */ .demo.is-in .ai-chip { animation: chipBreathe 2.1s ease-in-out 3; } @keyframes chipBreathe { 0%, 100% { box-shadow: 0 12px 28px -16px rgba(255, 46, 99, .9); } 50% { box-shadow: 0 12px 28px -16px rgba(255, 46, 99, .9), 0 0 0 7px rgba(255, 46, 99, .1); } } /* the story assembles step by step when a tab opens */ .demo.is-in .story-step { animation: stepIn .45s cubic-bezier(.22, .61, .36, 1) both; } .demo.is-in .story-step:nth-child(1) { animation-delay: .05s; } .demo.is-in .story-step:nth-child(2) { animation-delay: .13s; } .demo.is-in .story-step:nth-child(3) { animation-delay: .21s; } .demo.is-in .story-step:nth-child(4) { animation-delay: .29s; } .demo.is-in .story-step:nth-child(5) { animation-delay: .37s; } @keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .rv[data-stagger] > * { opacity: 1; transform: none; transition: none; } .btn:active, .demo-tab:active { transform: none; } .header-inner, .brand-logo, .site-header.is-stuck .header-inner, .site-header.is-stuck .brand-logo { transition: none; height: auto; transform: none; } .site-header.is-stuck .header-inner { height: 68px; } .j-stop.is-on::after { animation: none; } .frame { transition: none; } .frame:hover { transform: none; } .demo.is-in .ai-chip, .demo.is-in .story-step { animation: none; } } /* ---------- Reveal ---------- */ .rv { opacity: 0; transform: translateY(20px); transition: opacity .62s ease, transform .62s cubic-bezier(.22,.61,.36,1); } .rv.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .btn, .card, .step, .pain { transition: none; } } /* ---------- Skip link ---------- */ /* read by a screen reader, absent from the page */ .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } .skip { position: absolute; inset-inline-start: 12px; top: -80px; background: var(--cta); color: #fff; padding: 10px 16px; z-index: 100; border-radius: 0 0 10px 10px; transition: top .15s ease; } .skip:focus { top: 0; } /* ---------- FAQ ---------- Six answers the page owes the reader once it decided not to name a price. Native
, so it opens without script and reads to a screen reader as the disclosure it is. */ .faq-list { max-width: 760px; margin: clamp(34px, 4.6vw, 58px) auto 0; border-top: 1px solid var(--hairline); } .faq-item { border-bottom: 1px solid var(--hairline); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: clamp(17px, 2.2vw, 22px) 2px; cursor: pointer; list-style: none; font-family: var(--font-head); font-weight: 700; font-size: clamp(1rem, 2.1vw, 1.12rem); color: var(--on-dark); transition: color .18s ease; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: #fff; } .faq-item summary:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; border-radius: 6px; } .faq-item summary i { position: relative; flex: none; width: 20px; height: 20px; transition: transform .22s ease; } /* Both bars are centred on the icon box with a translate rather than with negative margins. The margins were physical (-6.5px on the LEFT) while the anchor was logical, so on this RTL page they cancelled out and the plus sat 6.5px off centre - and the 180deg turn on opening then swung it 6.5px the other way, which is why the minus landed somewhere the plus had never been. Centred, the turn leaves the horizontal bar exactly where it started and only the vertical one goes. */ .faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 2px; border-radius: 2px; background: var(--cta); transform: translate(-50%, -50%); } .faq-item summary i::after { transform: translate(-50%, -50%) rotate(90deg); transition: opacity .22s ease; } .faq-item[open] summary { color: #fff; } .faq-item[open] summary i { transform: rotate(180deg); } .faq-item[open] summary i::after { opacity: 0; } .faq-body { padding: 0 2px clamp(19px, 2.4vw, 24px); max-width: 62ch; } .faq-body p { margin: 0; font-size: 1rem; line-height: 1.8; color: var(--on-dark-soft); } .faq-more { margin-top: clamp(26px, 3.2vw, 34px); text-align: center; font-size: .95rem; color: var(--on-dark-faint); } .faq-more a { color: var(--on-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } .faq-more a:hover { color: #fff; } @media (prefers-reduced-motion: reduce) { .faq-item summary, .faq-item summary i, .faq-item summary i::after { transition: none; } } /* ---------- Phone only ---------- */ /* Four lines that earn their place on a wide screen and only cost scrolling on a narrow one, plus the two strips that bracket the page. Everything here is scoped to the phone by design: the desktop layout is finished and nothing in this block may reach it. The hidden lines stay in the markup, because this is a layout decision rather than a content one - a crawler, a wide screen and a printed page all still get them. */ .phone-break { display: none; } @media (max-width: 760px) { /* the hook, the pull quote with its caption, and the note under the three cards - all of them restate what the section around them has already said by the time a phone gets there */ .hero .lead-in { display: none; } .quote { display: none; } .order-note-sub { display: none; } /* not hidden, only broken in two: the count and the invitation are two thoughts, and a phone has room for one of them per line */ .phone-break { display: block; } /* the strip wants a line worth reading and a phone has none to spare above the fold; it costs the visitor a scroll before they have moved */ .hero-run { display: none; } /* the nav is gone below 940px, so space-between leaves the brand alone against the far edge; the footer wraps into stacked rows for the same reason. Both read better centred on a narrow screen. */ .header-inner { justify-content: center; } .footer-inner { justify-content: center; text-align: center; } .footer-links { justify-content: center; } } /* ---------- The hero run strip ---------- */ /* A hero has a few seconds and must spend them on the one thing a visitor cannot already picture: not a form filling in, which they have seen, but the chain that runs when it does. So the whole chain stands on one line, read the way the page is read - a lead arrives on the right, a task is waiting on the left - and says its piece standing still. The pulse only gives it life. The station names are the ones on the Make canvas. Nothing here is filled with the call to action's colour. A solid crimson pill is the one thing on the page that means "press me", and five of them in a row above the real button flattened that. A stop rests as a dark outline and lights by brightening - its border, its glyph, its label and the wire behind it - with a violet bloom behind the glass. */ /* it sits inside the hero stack now, between the sentence it illustrates and the button that closes the block, so it carries its own spacing on both sides rather than hanging off the bottom of the section */ .hero-run { margin-top: clamp(30px, 3.6vw, 44px); } .hero-run + .btn-row { margin-top: clamp(24px, 3vw, 34px); } .runstrip { border-top: 1px solid var(--hairline); padding-top: clamp(22px, 2.8vw, 32px); } .run-line { display: flex; align-items: flex-start; justify-content: center; list-style: none; margin: 0; padding: 0; } .run-stop { position: relative; flex: 0 1 8.6em; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: clamp(.72rem, 1.05vw, .84rem); } .run-stop + .run-stop { margin-inline-start: clamp(18px, 2.6vw, 40px); } /* the wire hangs in the gap the margin opened, which in this direction is on the stop's own inline start, and it brightens with the stop it feeds */ .run-stop + .run-stop::before { content: ""; position: absolute; top: 22px; inset-inline-start: calc(-1 * clamp(18px, 2.6vw, 40px)); width: clamp(18px, 2.6vw, 40px); height: 2px; border-radius: 2px; background: linear-gradient(to left, rgba(139,49,216,.9), rgba(47,107,255,.9)); opacity: .22; animation-duration: 7s; animation-timing-function: ease-out; animation-iteration-count: infinite; } .run-stop + .run-stop::after { content: ""; position: absolute; top: 18px; inset-inline-start: calc(-1 * clamp(18px, 2.6vw, 40px) + 4px); width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 12px 2px rgba(139,49,216,.85); animation-duration: 7s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .run-ico { position: relative; width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1.5px solid rgba(255,255,255,.13); } /* the lit ring and its bloom, laid over the resting outline */ .run-ico::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; border: 1.5px solid rgba(255,255,255,.5); background: linear-gradient(150deg, rgba(139,49,216,.28), rgba(47,107,255,.16)); box-shadow: 0 0 0 5px rgba(139,49,216,.10), 0 10px 26px -10px rgba(139,49,216,.75); opacity: 0; animation-duration: 7s; animation-timing-function: ease-out; animation-iteration-count: infinite; } .run-ico::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: #fff; opacity: .42; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; animation-duration: 7s; animation-timing-function: ease-out; animation-iteration-count: infinite; } .run-lab { font-weight: 600; color: #D9D1E8; text-align: center; line-height: 1.3; opacity: .5; animation-duration: 7s; animation-timing-function: ease-out; animation-iteration-count: infinite; } .rs1::before, .rs1 .run-ico::after, .rs1 .run-lab { animation-name: runLit1; } .rs1 .run-ico::before { animation-name: runGlow1; } .rs2::before, .rs2 .run-ico::after, .rs2 .run-lab { animation-name: runLit2; } .rs2 .run-ico::before { animation-name: runGlow2; } .rs3::before, .rs3 .run-ico::after, .rs3 .run-lab { animation-name: runLit3; } .rs3 .run-ico::before { animation-name: runGlow3; } .rs4::before, .rs4 .run-ico::after, .rs4 .run-lab { animation-name: runLit4; } .rs4 .run-ico::before { animation-name: runGlow4; } .rs5::before, .rs5 .run-ico::after, .rs5 .run-lab { animation-name: runLit5; } .rs5 .run-ico::before { animation-name: runGlow5; } @keyframes runLit1 { 0%, 3% { opacity: var(--rest); } 6% { opacity: 1; } 9%, 90% { opacity: 1; } 97%, 100% { opacity: var(--rest); } } @keyframes runLit2 { 0%, 17% { opacity: var(--rest); } 20% { opacity: 1; } 23%, 90% { opacity: 1; } 97%, 100% { opacity: var(--rest); } } @keyframes runLit3 { 0%, 31% { opacity: var(--rest); } 34% { opacity: 1; } 37%, 90% { opacity: 1; } 97%, 100% { opacity: var(--rest); } } @keyframes runLit4 { 0%, 45% { opacity: var(--rest); } 48% { opacity: 1; } 51%, 90% { opacity: 1; } 97%, 100% { opacity: var(--rest); } } @keyframes runLit5 { 0%, 59% { opacity: var(--rest); } 62% { opacity: 1; } 65%, 90% { opacity: 1; } 97%, 100% { opacity: var(--rest); } } @keyframes runGlow1 { 0%, 3% { opacity: 0; } 6% { opacity: 1; } 9%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } } @keyframes runGlow2 { 0%, 17% { opacity: 0; } 20% { opacity: 1; } 23%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } } @keyframes runGlow3 { 0%, 31% { opacity: 0; } 34% { opacity: 1; } 37%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } } @keyframes runGlow4 { 0%, 45% { opacity: 0; } 48% { opacity: 1; } 51%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } } @keyframes runGlow5 { 0%, 59% { opacity: 0; } 62% { opacity: 1; } 65%, 90% { opacity: 1; } 97%, 100% { opacity: 0; } } /* each family keeps its own resting level, so one set of keyframes serves the wire, the glyph and the label at once */ .run-stop + .run-stop::before { --rest: .22; } .run-ico::after { --rest: .42; } .run-lab { --rest: .5; } /* the pulse leaves a stop as it lights and lands on the next one */ .rs2::after { animation-name: runPulse1; } .rs3::after { animation-name: runPulse2; } .rs4::after { animation-name: runPulse3; } .rs5::after { animation-name: runPulse4; } @keyframes runPulse1 { 0%, 7% { opacity: 0; transform: translateX(0); } 9% { opacity: 1; transform: translateX(0); } 18% { opacity: 1; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } 20%, 100% { opacity: 0; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } } @keyframes runPulse2 { 0%, 21% { opacity: 0; transform: translateX(0); } 23% { opacity: 1; transform: translateX(0); } 32% { opacity: 1; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } 34%, 100% { opacity: 0; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } } @keyframes runPulse3 { 0%, 35% { opacity: 0; transform: translateX(0); } 37% { opacity: 1; transform: translateX(0); } 46% { opacity: 1; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } 48%, 100% { opacity: 0; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } } @keyframes runPulse4 { 0%, 49% { opacity: 0; transform: translateX(0); } 51% { opacity: 1; transform: translateX(0); } 60% { opacity: 1; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } 62%, 100% { opacity: 0; transform: translateX(calc(-1 * clamp(18px, 2.6vw, 40px) + 8px)); } } .run-ico--hook { --m: url('data:image/svg+xml;utf8,'); } .run-ico--ai { --m: url('data:image/svg+xml;utf8,'); } .run-ico--reply { --m: url('data:image/svg+xml;utf8,'); } .run-ico--sheet { --m: url('data:image/svg+xml;utf8,'); } .run-ico--task { --m: url('data:image/svg+xml;utf8,'); } /* nothing to animate for a line nobody is looking at */ .runstrip.is-idle *, .runstrip.is-idle *::before, .runstrip.is-idle *::after { animation-play-state: paused; } /* with motion turned down the chain simply stands there fully lit, which is what it was built to do anyway */ @media (prefers-reduced-motion: reduce) { .runstrip *, .runstrip *::before, .runstrip *::after { animation: none !important; } .run-lab, .run-ico::after, .run-stop + .run-stop::before { opacity: 1; } .run-ico::before { opacity: 1; } .run-stop + .run-stop::after { opacity: 0; } } /* ---------- Taught at ---------- */ /* The only proof of trust on the page. Four marks that arrive at wildly different proportions - a stacked crest, two horizontal lockups and one wide single line - so they are not sized to a common height, which would have let the widest one dominate the row by half again. Each carries its own height, tuned by eye until the four read as equal weight, and the sizes live here rather than in the files so a replacement logo is a number rather than a re-export. */ .taught { margin-top: clamp(34px, 4.4vw, 56px); padding-top: clamp(26px, 3.2vw, 36px); border-top: 1px solid var(--hairline); text-align: center; } .taught-lead { font-size: .95rem; font-weight: 500; color: var(--on-dark-soft); } .taught-lead b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; } .taught-row { list-style: none; margin: clamp(18px, 2.4vw, 26px) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(22px, 4vw, 56px); } .lg { display: block; width: auto; opacity: .74; transition: opacity .2s ease; } .taught-row li:hover .lg { opacity: 1; } .lg--emeq { height: 44px; } .lg--braude { height: 38px; } .lg--netanya { height: 27px; } .lg--hackeru { height: 33px; } @media (max-width: 560px) { .taught-row { gap: 18px 26px; } .lg--emeq { height: 36px; } .lg--braude { height: 31px; } .lg--netanya { height: 22px; } .lg--hackeru { height: 27px; } } /* the same spark that marks the AI stop on the hero strip, so the button and the chain are speaking about the same thing. It sits in the accent pair rather than the call to action's colour: this is a secondary button and the mark should not argue with the real one */ .ic-ai { display: inline-block; width: 17px; height: 17px; flex: 0 0 auto; background: linear-gradient(135deg, #FF6E9C, #A45BF0 55%, #5B8CFF); -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat; --m: url('data:image/svg+xml;utf8,'); } .btn--ai { gap: 9px; } .btn--ai:hover .ic-ai { background: linear-gradient(135deg, #FF9BBD, #C08BF6 55%, #8DAEFF); } /* ========================================================= עמוד נחיתה לסדנה החינמית - /workshop/ A single-purpose page: one promise, one form, no exits. Everything here is additive; the shared system above does the rest. ========================================================= */ /* the header on this page carries the brand and nothing else - a landing page that came from an ad should have no way out but the form */ .site-header.header--bare .header-inner { justify-content: center; } /* The headline takes the full width and the two columns sit under it. A landing-page headline is the one thing a stranger reads, and squeezing it into half the page cost it a line break in the middle of a clause. The form still sits in the first screen, which is what matters. */ .lp-hero { padding-block: clamp(40px, 6vw, 78px) clamp(40px, 6vw, 72px); } /* The hero reads down one centred column: promise, who is giving it, when and where, then the form. Left-aligned it left half the page empty and the full-width chips below it looked like a different section. */ /* the headline gets its own measure, wider than the paragraph under it, so it can grow without the second line falling off */ .lp-head { max-width: min(100%, 68rem); margin-inline: auto; text-align: center; } .lp-head .eyebrow { margin-inline: auto; font-size: clamp(.86rem, 1.25vw, 1.02rem); padding: 9px 20px; gap: 5px 11px; flex-wrap: wrap; justify-content: center; } /* the two halves each stay whole, so a narrow screen breaks between them rather than inside "בשעה 20:30" - and the dot is not left hanging */ /* The chip is two halves that each have to stay whole. Above 560px they sit on one line with a middot between them; below it the middot goes and the halves stack, which needs the row to be allowed to wrap - nowrap children in a non-wrapping flex row would simply have run off the side. */ .eb-a, .eb-b { white-space: nowrap; } @media (max-width: 560px) { .eb-sep { display: none; } .eyebrow { flex-wrap: wrap; justify-content: center; gap: 0 6px; text-align: center; } } .lp-h1 { margin-top: clamp(16px, 2.2vw, 24px); font-size: clamp(2.35rem, 6.3vw, 4.4rem); line-height: 1.18; letter-spacing: -.025em; } .lp-sub { max-width: 46rem; margin: clamp(18px, 2.4vw, 26px) auto 0; color: var(--on-dark-soft); font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.75; } /* Who is giving this, answered where it is asked - beside the promise, not five sections below it. This card is now the only place I appear on the page, so it carries the whole claim: face, what I do, and where I taught. */ .lp-by { /* 52rem and not the 64 the grids above use: with the bigger portrait the content is about 700px wide, and left in a 64rem box it sat in the middle of 160px of nothing on either side. This card holds one person and one paragraph, so it is allowed to be narrower than a row of four. */ max-width: 52rem; margin-inline: auto; padding: clamp(20px, 2.6vw, 28px); background: rgba(255,255,255,.045); border: 1px solid var(--hairline); border-radius: var(--radius); } .lp-by-main { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 2.4vw, 26px); } /* a rounded square, not a circle: a circle crops a portrait at the temples and the jaw, which is most of what makes a face recognisable */ .lp-by-face { flex: none; width: clamp(144px, 16.5vw, 192px); height: clamp(144px, 16.5vw, 192px); border-radius: 18px; object-fit: cover; object-position: center 10%; border: 1px solid rgba(255,255,255,.2); } /* The column is 30rem and not the 42rem it used to be because the portrait beside it is now half again as tall. Measured, the paragraph holds the same line count anywhere between 32rem and 42rem, and only breaks to the extra line at 30 - which is what brings the text block within a few pixels of the image height instead of ending a third of the way up it. */ .lp-by-t { display: grid; gap: 10px; min-width: 0; max-width: 30rem; } .lp-by-t b { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 2.1vw, 1.65rem); line-height: 1.25; letter-spacing: -.015em; color: #fff; } .lp-by-t span { font-size: .95rem; line-height: 1.75; color: var(--on-dark-soft); } /* the one clause that says what the meeting actually is. and not , because .lp-by-t b is the heading above and would blow this up to 1.65rem */ .lp-by-t strong { font-weight: 700; color: var(--on-dark); } /* a quiet line at the foot of the paragraph, not a section of its own: it is an offer to read more, not part of the claim being made here */ .lp-by-more { margin-top: 4px; font-size: .85rem; color: var(--on-dark-faint); text-decoration: underline; text-underline-offset: 3px; } .lp-by-more:hover { color: var(--on-dark); } /* on a phone the portrait beside the text left it about 230px to wrap in. Stacked, the same words get the full column. */ @media (max-width: 560px) { .lp-by-main { flex-direction: column; text-align: center; gap: 16px; } .lp-by-t { max-width: none; } } /* --------------------------------------------------------- The roller: who this is for Two rows of business types travelling in opposite directions. The point is breadth - "there are many kinds, one of them is yours" - which is why it moves at all; a still grid of 28 is a wall. What movement costs is scanning, so the line under the rows catches anyone who did not spot themselves, and the rows stop the moment a pointer or the keyboard reaches them. The animation lives on .roller-track, which is a grandchild of the .rv wrapper and not the wrapper itself. That matters: the reveal writes `transform: none` on any .rv element the moment it arrives, and a marquee that is also a .rv would be frozen at its start the instant it came into view. --------------------------------------------------------- */ .roller { margin-top: clamp(30px, 3.8vw, 44px); display: grid; gap: clamp(10px, 1.2vw, 14px); /* the rows run the full width of the section card and fade out before they reach its rounded corners, so nothing is ever cut mid-word */ overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .roller-row { overflow: hidden; } .roller-track { display: flex; width: max-content; animation: rollFwd 58s linear infinite; will-change: transform; } .roller-track--back { animation-name: rollBack; animation-duration: 68s; } /* The two sets are identical, so a shift of exactly half the track lands the copy where the original started and the seam never shows. Both shifts are POSITIVE, which looks wrong until you remember the page is RTL: the track's inline start is its RIGHT edge, so at translateX(0) it already sits flush against the right of the row and everything overflowing hangs off to the left. Pulling it further left with a negative value opens a growing band of nothing on the right - which is exactly what swallowed the second row, whose cycle starts half a track along. Pushing right walks the overflow into view instead, and the window stays covered for the whole cycle. */ @keyframes rollFwd { from { transform: translateX(0); } to { transform: translateX(50%); } } @keyframes rollBack { from { transform: translateX(50%); } to { transform: translateX(0); } } .roller:hover .roller-track, .roller:focus-within .roller-track { animation-play-state: paused; } .roller-set { display: flex; align-items: center; gap: clamp(8px, 1vw, 12px); list-style: none; margin: 0; padding: 0; padding-inline-start: clamp(8px, 1vw, 12px); } .roller-set li { flex: none; white-space: nowrap; font-family: var(--font-head); font-weight: 600; font-size: clamp(.86rem, 1.25vw, .96rem); color: var(--on-dark-soft); background: rgba(255, 255, 255, .055); border: 1px solid var(--hairline); border-radius: 999px; padding: 10px 18px; } .roller-note { margin-top: clamp(26px, 3.2vw, 34px); font-size: clamp(.95rem, 1.5vw, 1.05rem); line-height: 1.7; color: var(--on-dark-faint); } .roller-note b { color: var(--on-dark); font-weight: 700; } /* Asked for less motion, the rows stop - but stopped they would hide two thirds of the list behind the overflow, so they become scrollable by hand instead. The mask goes too, or the ends of a scrolled row read as faded out rather than as more to come. */ @media (prefers-reduced-motion: reduce) { .roller { -webkit-mask-image: none; mask-image: none; } .roller-row { overflow-x: auto; } .roller-track { animation: none; } .roller-set[aria-hidden="true"] { display: none; } } /* The registration form runs across the page rather than down it. Five stacked fields read as a form to fill in later; three side by side read as a thing you finish now. */ /* The registration heading was inside the card, where it read as a label on a box. Out here it names the step above it, and the card below is just the fields - which is also what lets the card keep its own top padding without a heading fighting it for the space. */ .lp-form-head { /* The facts above are things you read; this is the thing you do. A gap the size of the section's own rhythm is what separates the two - run tight, the form reads as a fifth fact rather than as the next step. */ max-width: 64rem; margin: clamp(58px, 7.2vw, 96px) auto 0; text-align: center; color: #fff; /* the gap above exists to separate this from the four facts in the hero. The repeat form opens its own section, where the section padding already does that job and the margin would only double it. */ font-size: clamp(1.32rem, 2.6vw, 1.72rem); line-height: 1.3; letter-spacing: -.015em; } .lp-form-head--solo { margin-top: 0; } .lp-form { max-width: 64rem; margin: clamp(16px, 2vw, 22px) auto 0; } .lp-form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .lp-form-row > .field + .field { margin-top: 0; } @media (max-width: 720px) { .lp-form-row { grid-template-columns: 1fr; } .lp-form-row > .field + .field { margin-top: 14px; } } .lp-form .field--wide { margin-top: 14px; } .lp-form .hint { font-size: .8rem; color: var(--on-dark-faint); } .mid-cta { margin-top: clamp(32px, 4vw, 44px); } /* the four facts a person needs before they will type anything */ .lp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 64rem; margin: clamp(24px, 3vw, 32px) auto 0; } @media (max-width: 900px) { .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .lp-facts { grid-template-columns: 1fr; } } /* The same chip row serves the landing page, where there are four facts, and the confirmation page, where there are two. Left on the four-column grid the pair sat in the right half of the box - measured 158px off centre from 901px up - with each chip squeezed to 155px and the date inside it wrapped over three lines. Two items get two columns, and they go single a little earlier than the four do, because a date is a long thing to fit in half of a narrow screen. */ .lp-facts--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; margin-inline: auto; } @media (max-width: 600px) { .lp-facts--pair { grid-template-columns: 1fr; } } /* The four facts sit on white while the form under them stays on the dark card. That is the hierarchy: these are the things you scan, that is the thing you do. Every colour inside had to invert, and the values below are measured against white rather than assumed. */ /* The chip ground was #EFF1F8, which against a near-black page read as a row of lit panels. #DFE4F1 is about a tenth less bright and still clearly a light card. It costs the icon stroke, though: #FF2E63 falls to 2.83:1 there, under the 3:1 a graphic needs, so the stroke goes a shade deeper on these chips only - #E0164C measures 3.76:1 on the new ground. */ .lp-fact { display: flex; align-items: center; gap: 12px; border: 1px solid var(--card-rule); border-radius: var(--radius-sm); background: #DFE4F1; padding: 13px 16px; box-shadow: 0 12px 28px -22px rgba(6, 2, 16, .8); transition: background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s cubic-bezier(.22,.61,.36,1); } .lp-fact i { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(150deg, rgba(255,46,99,.13), rgba(47,107,255,.1)); border: 1px solid rgba(16,27,61,.09); transition: transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s ease, filter .22s ease; } /* the mark was white for a dark chip; on white it needs ink of its own. #FF2E63 on #FFFFFF measures 3.6:1, over the 3:1 a graphic needs. */ .lp-fact svg { width: 18px; height: 18px; fill: none; stroke: #E0164C; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .lp-fact b { display: block; font-size: .98rem; line-height: 1.3; color: var(--card-ink); transition: color .22s ease; } .lp-fact .t > span { display: block; font-size: .8rem; color: var(--card-soft); margin-top: 2px; transition: color .22s ease; } /* Hovering a chip brings its own content forward: the card lifts, the shadow deepens, the mark turns, and the second line - the one that is deliberately quiet at rest - comes up to full ink. Nothing moves but the card, so four of these side by side never feel busy. */ .lp-fact:hover { background: #ECEFF7; border-color: #C3CADB; box-shadow: 0 20px 42px -20px rgba(6, 2, 16, .95); } .lp-facts.rv > .lp-fact:hover { transform: translateY(-3px); } .lp-fact:hover i { transform: rotate(-6deg) scale(1.08); border-color: #C3CADB; filter: saturate(1.3); } .lp-fact:hover .t > span { color: var(--card-ink); } @media (prefers-reduced-motion: reduce) { .lp-fact, .lp-fact i { transition: none; } .lp-facts.rv > .lp-fact:hover { transform: none; } .lp-fact:hover i { transform: none; } } /* the running order, as a real timeline rather than a bulleted list: the minutes are the point, so they get their own column */ .agenda { display: flex; flex-direction: column; gap: 0; margin-top: clamp(34px, 4.2vw, 52px); } /* the line of detail reads first, from the right; the duration sits at the far left of every row in a column of its own width, so the six clocks stack into a straight edge and the block reads as one object */ .agenda li { display: grid; grid-template-columns: minmax(0, 1fr) 92px; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--hairline); } .agenda li:last-child { border-bottom: 0; } /* the clock is a sibling and not a ::before, because the gradient on this span is painted with background-clip: text - a pseudo-element background on the same box would be clipped to the glyphs along with it */ .agenda .mins { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; text-align: start; background: linear-gradient(105deg, #FF6E9C, #A45BF0 55%, #5B8CFF); -webkit-background-clip: text; background-clip: text; color: transparent; } .agenda .mins-ico { flex: none; width: 16px; height: 16px; fill: none; stroke: #A45BF0; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .agenda .what { font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 1.55; } @media (max-width: 560px) { .agenda li { grid-template-columns: 1fr; gap: 6px; justify-items: start; } } /* the confirmation page, after the routes list: quiet by design. The person has registered for a free meeting, not agreed to be sold to, so this names what exists and stops. */ .after-next { max-width: 560px; margin: clamp(32px, 4vw, 48px) auto 0; padding-top: clamp(26px, 3.2vw, 34px); border-top: 1px solid var(--hairline); text-align: start; } .after-lead { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: #fff; text-align: center; } .after-list { list-style: none; margin: clamp(16px, 2.2vw, 22px) 0 0; padding: 0; display: grid; gap: 12px; } .after-list li { padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: rgba(255,255,255,.04); color: var(--on-dark-soft); font-size: .95rem; line-height: 1.65; } .after-list b { color: var(--on-dark); } .after-fine { margin-top: 16px; text-align: center; font-size: .86rem; color: var(--on-dark-faint); } .after-fine a { color: var(--on-dark-soft); text-decoration: underline; text-underline-offset: 3px; } .after-fine a:hover { color: #fff; } /* the confirmation page: the details again, and the two ways to keep them */ .lp-cal { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; } .lp-next { display: grid; gap: 14px; margin-top: clamp(26px, 3vw, 34px); text-align: start; } .lp-next li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start; color: var(--on-dark-soft); line-height: 1.6; } .lp-next b { color: #fff; } .lp-next .n { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 800; font-size: .9rem; color: #fff; background: linear-gradient(140deg, var(--cta), #A22BC8); } /* /404.html - the address the visitor actually tried, echoed back. It is the one line on the page that usually solves the problem for them, so it sits apart from the paragraph above it rather than reading as its last sentence. */ .err-addr { margin-top: 18px; color: var(--on-dark-faint); font-size: .95rem; } .err-addr b { color: var(--on-dark-soft); font-weight: 600; }