/* Sitewide palette: black/white with turquoise as the one accent — the same system the homepage already uses (--hn-*), just under the names every other page's CSS already references. Values only; every rule that reads var(--teal)/var(--gold)/etc. below repaints automatically, with no need to touch each page individually. */ :root { --teal: #1A1A1A; --teal-dark: #0D0D14; --teal-light: #2A2A32; --ice: #EAF6F6; --gold: #0E8C8C; --gold-light: #14B8B8; --dark: #1A1A1A; --grey: #6B6B6B; --grey-light: #F4F6F5; --white: #FFFFFF; /* Vivid decorative accents — for background energy (hero mesh, gradient text, glows), never for buttons/nav/text that already use --teal/--gold everywhere else on the site. Kept separate on purpose: boosting saturation here can't quietly shift contrast anywhere an existing element already depends on those tokens. */ --vivid-emerald: #14B8B8; --vivid-violet: #7B5CFF; --radius: 14px; --radius-sm: 8px; --shadow: 0 10px 30px rgba(13, 13, 20, 0.10); --shadow-lg: 0 24px 60px rgba(13, 13, 20, 0.18); --max: 1120px; /* Category accents — used to give the catalog visual variety instead of every product looking the same teal/gold regardless of type. */ --cat-general: #1A1A1A; --cat-general-bg: #EAF6F6; --cat-dev: #2B6CB0; --cat-dev-bg: #E4EEF7; --cat-design: #C2622D; --cat-design-bg: #F7E8DE; --cat-accounting: #6B46C1; --cat-accounting-bg: #EDE7F9; --cat-deck: #B83280; --cat-deck-bg: #F7E1EE; --cat-xlsx: #2F855A; --cat-xlsx-bg: #E3F1E9; /* Deck/xlsx sub-topic accents (e.g. --cat-deck-business) — deck and xlsx products already carry a finer topicSlug (used for the filter tabs on products.html) on top of their flat categorySlug ("deck"/ "xlsx"), but catalog cards colored by categorySlug alone made every deck card pink and every xlsx card green regardless of topic. These let the card thumb color vary by topic instead, same as CV cards already do by profession. */ --cat-deck-business: #2C4A7C; --cat-deck-business-bg: #E9EEF6; --cat-deck-marketing: #D6473C; --cat-deck-marketing-bg: #F8E8E7; --cat-deck-creative: #A6266B; --cat-deck-creative-bg: #F8E7F0; --cat-xlsx-finance: #2F855A; --cat-xlsx-finance-bg: #E9F6F0; --cat-xlsx-customers: #0E8C8C; --cat-xlsx-customers-bg: #E7F8F8; --cat-xlsx-operations: #B7791F; --cat-xlsx-operations-bg: #F8F1E7; --cat-xlsx-projects: #5A67D8; --cat-xlsx-projects-bg: #E7E9F8; --cat-xlsx-sales: #C53030; --cat-xlsx-sales-bg: #F8E7E7; --cat-xlsx-hr: #D53F8C; --cat-xlsx-hr-bg: #F8E7F0; /* Site-template category accents — same idea, for the "אתרים" catalog, which previously had no per-category colors at all and so every template thumb fell back to the same plain --ice tint. */ --cat-site-service: #2C7A7B; --cat-site-service-bg: #E9F6F6; --cat-site-personal: #805AD5; --cat-site-personal-bg: #EDE8F8; --cat-site-shop: #B7502A; --cat-site-shop-bg: #F8ECE7; --cat-site-creative: #A6266B; --cat-site-creative-bg: #F8E7F0; --cat-site-events: #9C6B1F; --cat-site-events-bg: #F8F2E7; } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; overflow-y: scroll; scrollbar-gutter: stable; } body { margin: 0; font-family: 'Heebo', Arial, sans-serif; color: var(--dark); background: var(--white); /* Inherits direction from rather than hardcoding rtl — js/i18n.js flips that attribute at runtime for the EN/HE toggle, and a hardcoded value here would silently override it, leaving every inset-inline-*/margin-inline-* rule mirrored wrong regardless of the toggle's own state (confirmed live: the header still rendered RTL under dir="ltr" until this was inheritance instead of a hardcode). */ line-height: 1.6; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { margin: 0; } .container { max-width: var(--max); margin: 0 auto; padding: 0 24px; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes floatSlow { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.03); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-33.3334%); } } /* ---------- Scroll-reveal ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; } .reveal.in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ---------- Marquee strip ---------- */ /* direction:ltr here is load-bearing, not cosmetic: .marquee-track is wider than its container (width:max-content) and animates via translateX. In the page's normal RTL flow an over-wide block like this sits flush against the RIGHT edge at rest with nothing buffered beyond it — so as it slides left there's no queued content to reveal, and the strip runs empty well before the loop point. Forcing ltr makes it sit flush-left with the extra copies buffered off-screen to the right, which is what the left-scrolling animation actually needs. */ .marquee { overflow: hidden; background: var(--teal-dark); padding: 12px 0; direction: ltr; } .marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; } .marquee-item { display: flex; align-items: center; gap: 10px; color: #DCEBE5; font-size: 13.5px; font-weight: 600; padding: 0 28px; white-space: nowrap; } .marquee-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); } /* ---------- Header ---------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid #ECECEC; } /* When the "my content" rail is mounted, body gets a margin-inline-start to make room for it (see body.has-sites-rail below) — but header.site is a normal body child too, so without this it would get pushed along with everything else, landing the pinned .brand 220px short of the true browser edge instead of flush against it. Counteract exactly that much margin + width so the header (and the brand pinned inside it) always spans the full viewport, with the rail sitting visually below it. */ body.has-sites-rail header.site { margin-inline-start: calc(-1 * var(--rail-w, 220px)); width: calc(100% + var(--rail-w, 220px)); } /* .nav-links is the only thing that actually lives in .nav's own centered flex flow now — both .brand and .nav-end-group (login link) are pinned straight to the true edges of header.site instead, the same reasoning as the brand: "first/last inside the centered, max-width-capped bar" still leaves visible empty margin past it on any screen wider than --max. That leaves justify-content:center free to actually center the links on the real viewport instead of just within the bar. The padding-inline-* reserve room on both sides so links never run under either pinned group. */ .nav { display: flex; align-items: center; justify-content: center; padding: 22px 24px; padding-inline-start: 190px; padding-inline-end: 150px; max-width: var(--max); margin: 0 auto; /* The home page sets its own page-wide font-family ('Assistant', for its own hero/body copy — body.home-neo below) — without pinning the header back to the site's base font here, that cascaded into the nav links too and was the last remaining reason the home header still looked different from every other page's after the previous round's fix (which only removed home's separate nav-link color/ weight/spacing, not this). */ font-family: 'Heebo', Arial, sans-serif; } .brand { position: absolute; top: 50%; inset-inline-start: 24px; transform: translateY(-50%); font-family: 'Space Grotesk', Arial, sans-serif; font-size: 22px; color: #1A1A1A; /* row-reverse, not direction:ltr — .brand's own inset-inline-start positioning depends on ITS direction (see .brand-text below for what went wrong last time this was tried with direction), but flex order is independent of that: reversing it is what actually puts the icon first (leftmost, before "DeskKit") in the page's RTL context, where a plain row would otherwise place the icon last, after the wordmark — confirmed live, that's what a first try without this looked like. */ display: flex; flex-direction: row-reverse; align-items: center; gap: 9px; letter-spacing: -.01em; } /* Icon + wordmark, same everywhere the brand or a link back to the homepage appears, not just the homepage itself. "Desk" bold in near- black, "Kit" regular weight in the accent turquoise — the icon picks up both: a document/page shape (the "Desk" — your own documents) in the same near-black as "Desk", with a small sparkle accent (the "Kit" — what DeskKit adds) in the same real teal as "Kit". The mark's own elements (.bm-doc/.bm-fold/.bm-spark) already existed in every page's header markup but were never actually styled or shown. direction:ltr lives on .brand-text, NOT .brand itself — .brand's own inset-inline-start positioning depends on ITS direction, and forcing ltr there flipped it to the physical left (the wrong side of the RTL header) instead of just reordering the two words inside it. */ .brand-text { direction: ltr; } .brand-badge { display: flex; align-items: center; } .brand-mark { width: 27px; height: 27px; } .bm-doc { fill: none; stroke: #1A1A1A; stroke-width: 1.6; stroke-linejoin: round; } .bm-fold { fill: #E4E4E4; stroke: #1A1A1A; stroke-width: 1.6; stroke-linejoin: round; } .bm-spark { fill: #0E8C8C; } .brand-desk { font-weight: 700; } .brand-kit { font-weight: 400; color: #0E8C8C; } .nav-end-group { position: absolute; top: 50%; inset-inline-end: 24px; transform: translateY(-50%); display: flex; align-items: center; gap: 14px; } @media (max-width: 860px) { .nav { justify-content: space-between; padding-inline-end: 24px; } .nav-end-group { position: static; transform: none; } } .nav-links { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; } /* No padding/border-bottom underline here on purpose — the homepage's header (body.home-neo) used to be the only place with this compact, color-only active/hover treatment, which left it a measurable 14px shorter than the header on every other page. Made the default so the header is the same height and style everywhere; --dark already equals home-neo's own --hn-ink (#1A1A1A), so the color carries over exactly. */ /* display:inline-block + vertical padding grows the actual clickable/ tappable box past its text's own ~16-17px line height — confirmed via real measurement that every nav link's hit area was under the 24px minimum touch-target size. */ .nav-links a { position: relative; color: var(--dark); opacity: .85; transition: opacity .15s ease; display: inline-block; padding-block: 6px; padding-inline: 3px; } .nav-links a:hover, .nav-links a.active { opacity: 1; } /* The current page's own tab — a small turquoise underline under just that link, so it's obvious at a glance which page you're on regardless of how similar two neighboring link labels look. var(--teal) is NOT actually teal-colored (#1A1A1A, a legacy name) so this uses the real brand teal directly, the same #0E8C8C used for .brand-kit and the quote/invoice card accents. */ .nav-links a.active::after { content: ""; position: absolute; inset-inline: 3px; bottom: 0; height: 2px; border-radius: 2px; background: #0E8C8C; } .nav-login { color: var(--grey); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 92px; padding-block: 6px; transition: color .15s ease; } .nav-login.nav-login-pending { visibility: hidden; } .nav-login:hover { color: var(--teal-dark); } .nav-login-email { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; } .lang-toggle { background: var(--white); border: 1px solid #DCE9E4; color: var(--teal-dark); font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 20px; cursor: pointer; font-family: inherit; transition: border-color .15s ease, background .15s ease; } .lang-toggle:hover { background: var(--ice); border-color: var(--teal-light); } /* Shared "switchable list" widget. .my-sites-rail itself is the global "my content" panel (js/my-panel.js) mounted on every logged-in page — a real fixed sidebar flush to the browser edge, not a card floating inside the centered .container (that read as "a card with buttons," not as page chrome, and could never actually reach the edge). The plain .my-sites-list/.my-site-row styling below is reused as-is by account-settings.html's own content dashboard, which isn't a fixed panel — just a list inside its own card there. */ .my-sites-rail { position: fixed; top: var(--header-h, 70px); bottom: 0; inset-inline-start: 0; width: var(--rail-w, 220px); overflow: hidden; background: var(--white); border-inline-end: 1px solid #EAEAEA; z-index: 30; display: flex; flex-direction: column; } /* padding, not margin: body itself must stay full viewport width (its own overflow-x:clip above clips at ITS OWN border box) so header.site's counter-negative-margin trick below actually has room to reach the true edge instead of getting clipped at a shrunk body box. */ body.has-sites-rail { padding-inline-start: var(--rail-w, 220px); } @media (max-width: 900px) { .my-sites-rail { position: static; width: 100%; height: auto; border-inline-end: none; border-bottom: 1px solid #E2E7E4; margin-bottom: 16px; } body.has-sites-rail { padding-inline-start: 0; } body.has-sites-rail header.site { margin-inline-start: 0; width: 100%; } } /* Collapsed: --rail-w drops to 0 (see js/my-panel.js), which alone already frees up the margin/header math above — this just hides the now-empty strip's border/shadow and swaps in the little pinned tab to reopen it. */ body.rail-collapsed .my-sites-rail { border-inline-end: none; box-shadow: none; } .my-panel-reopen { display: none; position: fixed; top: calc(var(--header-h, 70px) + 14px); inset-inline-start: 14px; z-index: 30; width: 34px; height: 34px; border-radius: 8px; border: 1px solid #EAEAEA; background: var(--white); align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.06); color: #1A1A1A; transition: transform .15s ease, background .15s ease; } .my-panel-reopen:hover { background: #F5F5F5; transform: translateY(-1px); } .my-panel-reopen svg { transform: rotate(180deg); } body.rail-collapsed .my-panel-reopen { display: flex; } @media (max-width: 900px) { .my-panel-reopen { display: none !important; } } /* Drag handle on the rail's content-facing edge to resize --rail-w. A plain 6px hit target would be too thin to grab reliably, so it's widened with a transparent halo and only the 2px center line paints. */ .my-panel-resize-handle { position: absolute; top: 0; bottom: 0; inset-inline-end: -4px; width: 9px; cursor: ew-resize; z-index: 31; background: transparent; } .my-panel-resize-handle::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 4px; width: 2px; background: transparent; transition: background .15s ease; } .my-panel-resize-handle:hover::after, .my-panel-resize-handle.dragging::after { background: #B0B0B0; } @media (max-width: 900px) { .my-panel-resize-handle { display: none; } } /* The rail is fixed to the same physical edge as the cookie notice and the feedback/chat FABs, on a lower z-index — without this, any of them painting on top silently hides the rail's account/logout footer (the cookie notice, shown by default to new visitors, did exactly that). Push them clear of the rail's width whenever it's actually fixed (i.e. above the same 900px breakpoint the rail itself uses). */ body.has-sites-rail .cookie-notice { inset-inline-start: var(--rail-w, 220px); } @media (min-width: 901px) { body.has-sites-rail .fab-chat, body.has-sites-rail .chat-panel { right: calc(var(--rail-w, 220px) + 24px); } } @media (max-width: 900px) { body.has-sites-rail .cookie-notice { inset-inline-start: 0; } } /* The rail carries its own account control (bottom) — once it's mounted, the header's copy is a redundant second account menu. The header's own brand (icon + "DeskKit" wordmark) stays exactly as on every other page — it's the one and only logo; the rail doesn't repeat it. */ body.has-sites-rail .nav-account-wrap { display: none; } .my-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-shrink: 0; padding-inline-end: 8px; } .my-panel-subtitle { font-size: 14px; font-weight: 700; letter-spacing: -.005em; color: #1A1A1A; padding: 18px 16px 6px; } .my-panel-collapse { width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: #9A9A9A; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease; } .my-panel-collapse:hover { background: #F5F5F5; color: #1A1A1A; } .my-panel-body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; } .my-panel-account { flex-shrink: 0; position: relative; border-top: 1px solid #EAEAEA; background: #FAFAFA; } .my-panel-account-toggle { width: 100%; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 14px 16px; font-family: inherit; color: #1A1A1A; transition: background .15s ease; } .my-panel-account-toggle:hover { background: #F5F5F5; } .my-panel-account-email { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #8A8A8A; direction: ltr; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Same dropdown as the header's account menu (js/nav-auth.js) — the rail just opens it upward since its trigger sits at the very bottom. */ .nav-account-dropdown.dropup { top: auto; bottom: calc(100% + 8px); inset-inline-end: auto; inset-inline: 8px; min-width: 0; } /* Category labels ("אתרים", "קורות חיים"…) each get their own quiet pill-shaped band — a subtle background instead of plain floating text — so the rail visually separates into distinct groups at a glance instead of reading as one long, undifferentiated list. */ .my-panel-section { margin-bottom: 10px; } .my-panel-section-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #F7F8F7; border: none; border-radius: 8px; cursor: pointer; padding: 8px 10px; font-family: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: #5A5F5C; transition: background .15s ease; } .my-panel-section-head:hover { background: #EFF1EF; } .my-panel-section-head svg { width: 11px; height: 11px; flex-shrink: 0; color: #B0B4B1; transition: transform .15s ease; } .my-panel-section.collapsed .my-panel-section-head svg { transform: rotate(180deg); } .my-panel-section.collapsed .my-panel-section-list { display: none; } .my-sites-list, .my-panel-section-list { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; } .my-site-row { display: block; padding: 10px 10px; border-radius: 4px; text-decoration: none; color: #1A1A1A; transition: background .15s ease; } .my-site-row:hover { background: #F5F5F5; } .my-site-row.active { background: #F5F5F5; box-shadow: inset 2px 0 0 #1A1A1A; } .my-site-row-name { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; } .my-site-row-tpl { display: block; font-size: 11px; color: #9A9A9A; line-height: 1.4; } /* The rail's own row treatment — a small thumbnail + text sitting in an actual bordered card (not just a hover-tinted strip of text), so "my content" reads as distinct tiles you made rather than a dense menu. Kept separate from .my-site-row above (still used as-is by account-settings.html's own dashboard) since this one needs the extra thumbnail element the simpler list doesn't have. */ .my-panel-card { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; color: #1A1A1A; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .my-panel-card:hover { background: #FAFAFA; border-color: #EEEEEE; transform: translateY(-1px); } .my-panel-card.active { background: var(--ice); border-color: #D3EDED; box-shadow: inset 2px 0 0 var(--teal); } /* One uniform, linear-stroke icon treatment for every content kind — no per-kind color (gold for CV, purple for quotes, blue for schedules) left over from the old rail. */ .my-panel-card-thumb { flex: none; width: 32px; height: 32px; border-radius: 8px; background: #F5F5F5; color: #6B6B6B; display: flex; align-items: center; justify-content: center; } .my-panel-card.active .my-panel-card-thumb { background: #fff; color: var(--teal-dark); } .my-panel-card-info { min-width: 0; } .my-panel-card-name { display: block; font-size: 13px; font-weight: 600; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .my-panel-card-tpl { display: block; font-size: 11px; color: #9A9A9A; line-height: 1.4; } /* Empty-category state: a small dashed-border "create new" chip instead of a sentence of explanatory text — reads as an invitation, not as an apology for having nothing there yet. */ .my-panel-empty-cta { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; border-radius: 10px; border: 1.5px dashed #DADFDD; color: #7A7F7C; font-size: 12.5px; font-weight: 700; text-decoration: none; transition: border-color .15s ease, color .15s ease, background .15s ease; } .my-panel-empty-cta:hover { border-color: var(--teal); color: var(--teal-dark); background: var(--ice); } .my-panel-empty-plus { font-size: 15px; line-height: 1; font-weight: 400; } /* A delete button sits beside the link (never inside it, so its click never also fires the link's navigation) — used both by the global panel and account-settings.html's own content dashboard. Red only appears on hover, as a deliberate warning cue right before a destructive click — not a resting-state color. */ .my-content-row { display: flex; align-items: center; gap: 4px; } .my-content-row .my-site-row { flex: 1; min-width: 0; } .my-content-delete-btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; color: #9A9A9A; padding: 8px; border-radius: 8px; opacity: .6; transition: opacity .15s ease, background .15s ease, color .15s ease; } .my-content-delete-btn:hover { opacity: 1; background: #FBEAEA; color: #B23333; } .my-content-delete-btn:disabled { opacity: .3; cursor: default; } .nav-account-wrap { position: relative; display: inline-flex; } .nav-account-dropdown { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; background: var(--white); border: 1px solid #EAEDEC; border-radius: 10px; box-shadow: var(--shadow-lg); padding: 14px; min-width: 220px; z-index: 500; } .nav-account-email { font-size: 12.5px; color: var(--grey); direction: ltr; text-align: end; margin-bottom: 10px; word-break: break-all; } .nav-account-dropdown button, .nav-account-dropdown a.nav-account-settings { display: block; box-sizing: border-box; width: 100%; background: none; border: 1px solid #DADFDD; border-radius: 8px; padding: 8px 12px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--dark); text-align: center; text-decoration: none; } /* The block display above outranks the browser's own [hidden]{display:none} (one more class in specificity), so the logout button stayed visibly showing through its own confirm step without this. */ .nav-account-dropdown [hidden] { display: none; } .nav-account-settings { margin-bottom: 8px; } .nav-account-settings:hover { background: var(--grey-light); } .nav-account-dropdown .nav-account-logout { color: #B23333; border-color: #F0D9D9; } .nav-account-dropdown .nav-account-logout:hover { background: #FBEEEE; } .nav-account-confirm p { font-size: 13px; margin: 0 0 10px; text-align: center; color: var(--dark); } .nav-account-confirm-row { display: flex; gap: 8px; } .nav-confirm-yes { background: #B23333 !important; color: #fff !important; border-color: #B23333 !important; } .nav-confirm-no { background: var(--grey-light) !important; } /* ---------- Auth gate overlay ---------- */ .auth-gate-overlay { position: fixed; inset: 0; background: var(--white); z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; } .auth-gate-spinner { width: 32px; height: 32px; border: 3px solid var(--ice); border-top-color: var(--teal); border-radius: 50%; animation: auth-gate-spin .8s linear infinite; } @keyframes auth-gate-spin { to { transform: rotate(360deg); } } .burger { display: none; font-size: 26px; background: none; border: none; cursor: pointer; color: var(--teal-dark); } /* ---------- Hero ---------- */ .hero { position: relative; background: linear-gradient(160deg, var(--teal-dark), var(--teal) 65%, var(--teal-light) 130%); color: var(--white); padding: 100px 24px 120px; text-align: center; overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(480px 480px at 12% 15%, rgba(14,140,140,.32), transparent 65%), radial-gradient(420px 420px at 88% 85%, rgba(20,184,184,.3), transparent 60%), radial-gradient(circle at 50% 120%, rgba(123,92,255,.2), transparent 55%); } .hero::after { content: ""; position: absolute; z-index: -1; inset-inline-end: -80px; top: -90px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(14,140,140,.35), rgba(14,140,140,0) 70%); animation: floatSlow 9s ease-in-out infinite; } .hero h1 { font-size: 46px; font-weight: 700; margin: 0 0 18px; max-width: 780px; margin-inline: auto; letter-spacing: -.01em; animation: fadeUp .6s ease both; } .hero p.lead { font-size: 18px; color: #DCEBE5; max-width: 620px; margin: 0 auto 34px; animation: fadeUp .6s .08s ease both; } .hero .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; animation: fadeUp .6s .16s ease both; } /* ========================================================================== Neo-minimal homepage reskin — scoped entirely under body.home-neo so it never touches any other page. Deliberately does NOT touch :root's --teal/--gold/pill-radius tokens (used everywhere else on the site, from the admin dashboard to every builder) — a global rebrand is a much bigger, separate decision than "redo the homepage". Own local constants instead, right here. ========================================================================== */ body.home-neo { --hn-bg: #FAFAFA; --hn-ink: #1A1A1A; --hn-action: #0E8C8C; /* The single accent color for the whole homepage — a deep turquoise, used thin and sparingly (a border, a headline figure, a hover tint) so it reads as a deliberate touch of color against the black/white palette, not a second brand color competing with it. */ --hn-accent: #0E8C8C; --hn-accent-pale: #DFF3F3; --hn-dark: #0D0D14; --hn-dark-text: #F2F2F0; --hn-dark-text-dim: #B8B8C0; --hn-grey: #6B6B6B; --hn-border: #EAEAEA; --hn-radius: 8px; color: var(--hn-ink); font-family: 'Assistant', Arial, sans-serif; /* A slow-moving wash behind the entire page — every color in it is within a couple of points of --hn-bg, so it reads as a living surface rather than flat white without ever touching text contrast. Sections with their own opaque background (flagship, steps, the cards themselves) simply paint over it, so it only shows through hero/marquee/tools' empty space. */ background: linear-gradient(120deg, #FAFAFA 0%, #F1FBFB 22%, #FAFAFA 45%, #FCFAFB 68%, #EFFAFA 85%, #FAFAFA 100%); background-size: 320% 320%; animation: hnPageWash 26s ease-in-out infinite alternate; } @keyframes hnPageWash { 0% { background-position: 0% 20%; } 100% { background-position: 100% 80%; } } @media (prefers-reduced-motion: reduce) { body.home-neo { animation: none; } } /* Bug fix, placed early on purpose: body.home-neo .reveal (specificity 0,2,1) was beating the base .reveal.in-view rule (0,2,0) in style.css, so home-neo elements NEVER actually settled to their resting position after the entrance animation — they stayed permanently offset at translateY(30px), which then made any :hover transform on the same element jump from that stale 30px baseline instead of from 0, reading as a jarring, unstable layout. This override (same specificity as the entrance rule) fixes that — and it has to sit BEFORE every section's own :hover rule below, so a tied-specificity :hover rule still wins by coming later in the file once the card/step is done entering. */ body.home-neo .reveal.in-view { transform: translateY(0); } body.home-neo header.site { background: var(--hn-bg); } body.home-neo .burger { color: var(--hn-ink); } body.home-neo .lang-toggle { background: var(--hn-bg); border-color: var(--hn-border); color: var(--hn-ink); border-radius: var(--hn-radius); } body.home-neo .lang-toggle:hover { background: var(--hn-border); border-color: var(--hn-border); } body.home-neo .cookie-notice { background: var(--hn-bg); border-top-color: var(--hn-border); } body.home-neo .cookie-notice p { color: var(--hn-grey); } /* Not var(--hn-action) directly — that teal only reaches 4.08:1 against white, enough for the large bold hero CTAs that also use it but not for this button's small 13px label (needs 4.5:1). A dedicated darker shade here keeps those larger buttons' color untouched. */ body.home-neo .cookie-notice .btn-teal { background: #0B7A7A; border-radius: var(--hn-radius); } /* ---------- Navbar + logo ---------- */ /* The home page used to run its own wider .nav/.nav-links sizing and a lighter grey/weight-500 link treatment here — confirmed live (screenshot comparison) that this made the home and invoices headers visibly not match the rest of the site's pages, which is exactly the inconsistency an earlier round already fixed once for header/footer link ORDER. Every page's header now shares one look, not just one order. */ /* ---------- Shared section rhythm + primitives ---------- */ body.home-neo .hn-hero, body.home-neo .hn-tools, body.home-neo .hn-flagship, body.home-neo .hn-steps, body.home-neo .hn-advantages { padding-block: 120px; } body.home-neo .hn-tools { position: relative; } /* A hairline turquoise seam between every major section — most useful between the two dark sections (flagship, steps) that would otherwise run into each other with no visible boundary at all. */ body.home-neo .hn-tools, body.home-neo .hn-flagship, body.home-neo .hn-steps, body.home-neo .hn-advantages { border-top: 1px solid rgba(20,184,184,.25); } /* A rounder, friendlier display face for section headlines only — the body keeps Assistant, this is used sparingly so it reads as a deliberate accent, not a full typeface swap. */ body.home-neo .hn-section-h { font-family: 'Secular One', 'Assistant', Arial, sans-serif; font-size: 38px; font-weight: 400; margin: 0 0 64px; letter-spacing: 0; } body.home-neo .hn-center { text-align: center; } body.home-neo .hn-btn { display: inline-block; padding: 14px 28px; border-radius: var(--hn-radius); font-weight: 600; font-size: 15px; cursor: pointer; border: 1.5px solid transparent; transition: opacity .15s ease, background .15s ease, transform .2s ease; } /* Hero CTAs specifically grow slightly on hover, on top of their own color change — the card buttons (.hn-btn-flat) have their own different hover reaction (color shift + shift sideways) already. */ body.home-neo .hn-cta-row .hn-btn:hover { transform: scale(1.06); } /* Shine sweep on hover: a skewed light stripe travels across the button. The label is wrapped in its own positioned+z-indexed span so it stays above the sweep instead of being painted over by it. */ body.home-neo .hn-btn-primary { background: var(--hn-action); color: var(--hn-bg); position: relative; overflow: hidden; } body.home-neo .hn-btn-primary:hover { opacity: .82; } body.home-neo .hn-btn-primary > span { position: relative; z-index: 2; } body.home-neo .hn-btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 1; background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%); transform: skewX(-20deg) translateX(0%); transition: transform .7s ease; } body.home-neo .hn-btn-primary:hover::after { transform: skewX(-20deg) translateX(320%); } @media (prefers-reduced-motion: reduce) { body.home-neo .hn-btn-primary::after { display: none; } } body.home-neo .hn-btn-secondary { background: transparent; color: var(--hn-ink); border-color: var(--hn-ink); } body.home-neo .hn-btn-secondary:hover { background: var(--hn-ink); color: var(--hn-bg); } body.home-neo .hn-btn-flat { display: block; width: 100%; text-align: center; box-sizing: border-box; background: var(--hn-action); color: var(--hn-bg); } body.home-neo .hn-btn-flat:hover { opacity: .82; } body.home-neo .hn-btn-gold { background: var(--hn-bg); color: var(--hn-ink); } body.home-neo .hn-btn-gold:hover { opacity: .85; } /* ---------- Hero ---------- */ body.home-neo .hn-hero { padding-bottom: 80px; } body.home-neo .hn-hero-split { display: grid; grid-template-columns: 55% 45%; gap: 40px; align-items: center; } body.home-neo .hn-hero-text { max-width: 520px; } body.home-neo .hn-hero-eyebrow { display: block; font-size: 13.5px; font-weight: 700; color: var(--hn-action); margin-bottom: 18px; } body.home-neo .hn-hero-text h1 { font-size: 44px; font-weight: 700; line-height: 1.28; margin: 0 0 22px; color: var(--hn-ink); } body.home-neo .hn-hero-lead { font-size: 16.5px; color: #6E6E5E; line-height: 1.8; margin: 0 0 34px; } body.home-neo .hn-cta-row { display: flex; gap: 14px; flex-wrap: wrap; } body.home-neo .hn-hero-visual { position: relative; height: 420px; } body.home-neo .hn-mock { position: absolute; width: 340px; height: 240px; border-radius: var(--hn-radius); overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.08); border: 1px solid var(--hn-border); } /* Two stacked layers so the incoming image fades in ON TOP of the still- visible outgoing one — never a gap where the box briefly shows nothing. */ body.home-neo .hn-mock-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .7s ease, transform .35s ease; } body.home-neo .hn-mock-img-a { opacity: 1; z-index: 1; } body.home-neo .hn-mock-img-b { opacity: 0; z-index: 0; } body.home-neo .hn-mock:hover .hn-mock-img { transform: scale(1.07); } @media (prefers-reduced-motion: reduce) { body.home-neo .hn-mock-img { transition: opacity .01s linear, transform .01s linear; } } /* Slow independent float per box — different duration and a phase offset on the front one — so the two never move in lockstep, reading as a quiet drift with some depth to it rather than a single flat bob. */ @keyframes hnFloatBack { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes hnFloatFront { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } body.home-neo .hn-mock-back { top: 8%; right: 4%; animation: hnFloatBack 6s ease-in-out infinite; } body.home-neo .hn-mock-front { bottom: 4%; right: 22%; animation: hnFloatFront 7.5s ease-in-out 1s infinite; } @media (prefers-reduced-motion: reduce) { body.home-neo .hn-mock-back, body.home-neo .hn-mock-front { animation: none; } } @media (max-width: 900px) { body.home-neo .hn-hero-split { grid-template-columns: 1fr; } body.home-neo .hn-hero-text { max-width: none; } body.home-neo .hn-hero-text h1 { font-size: 32px; } body.home-neo .hn-hero-visual { height: 260px; margin-top: 24px; } body.home-neo .hn-mock { width: 240px; height: 168px; } } @media (max-width: 560px) { body.home-neo .hn-hero-visual { display: none; } } /* ---------- Marquee (restyled to fit, not removed) ---------- */ /* A moving light-grey wash instead of flat white — the whole gradient stays within a few points of --hn-bg, so dark text is always at full contrast regardless of the animation's current phase. */ body.home-neo .marquee { background: linear-gradient(120deg, #F2F2F2 0%, #FAFAFA 25%, #ECECEC 50%, #FAFAFA 75%, #F2F2F2 100%); background-size: 240% 240%; animation: hnMarqueeWave 16s ease-in-out infinite alternate; border-top: 1px solid var(--hn-border); border-bottom: 1px solid var(--hn-border); } @keyframes hnMarqueeWave { 0% { background-position: 0% 40%; } 100% { background-position: 100% 60%; } } @media (prefers-reduced-motion: reduce) { body.home-neo .marquee { animation: none; } } body.home-neo .marquee-item { color: var(--hn-grey); } body.home-neo .marquee-item .dot { background: var(--hn-ink); } /* ---------- Tools grid ---------- */ /* All 5 cards, including the former "featured" one, now share one identical treatment — same dark/turquoise gradient, same icon style, same always-visible button — so nothing looks like the odd one out. Fixed height on every card means content length never changes a card's box, so nothing in this grid ever grows taller/wider than its neighbors. One single thing happens on hover (the product photo slides up from the bottom edge) instead of several effects layering on top of each other at once. */ body.home-neo .hn-tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } body.home-neo .hn-card { position: relative; overflow: hidden; background: linear-gradient(150deg, #0D0D14 0%, #123B3E 65%, #0E5B5E 100%); border: 1px solid transparent; border-radius: 16px; height: 230px; box-sizing: border-box; padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: transform .25s ease, box-shadow .25s ease; } /* Text and icon are ordinary flex children with fixed positions in the column — nothing about the hover state below touches their layout, so they never shift, even by a pixel. */ body.home-neo .hn-card > * { position: relative; z-index: 2; } body.home-neo .hn-card-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); color: #14B8B8; flex: none; transition: transform .35s ease; } body.home-neo .hn-card-icon svg { width: 19px; height: 19px; } body.home-neo .hn-card:hover .hn-card-icon { transform: scale(1.15) rotate(-6deg); } body.home-neo .hn-card h3 { margin: 0; font-size: 19px; font-weight: 700; color: var(--hn-dark-text); } body.home-neo .hn-tag { align-self: flex-start; font-size: 12.5px; font-weight: 600; color: var(--hn-dark-text-dim); border: 1px solid rgba(255,255,255,.22); border-radius: var(--hn-radius); padding: 4px 10px; } body.home-neo .hn-tag-paid { color: var(--hn-dark-text); } /* Always visible — this is the one thing that stays constant whether the card is at rest or hovered, so there's no "sudden appearance" to compete with the image sliding in. */ body.home-neo .hn-card .hn-btn-flat { margin-top: auto; background: var(--hn-bg); color: var(--hn-ink); transition: background .3s ease, color .3s ease, box-shadow .3s ease; } body.home-neo .hn-card:hover .hn-btn-flat { background: linear-gradient(135deg, #14B8B8, #0E8C8C); color: #fff; box-shadow: 0 10px 24px rgba(20,184,184,.4); } /* The product photo: parked just below the card's bottom edge, slides straight up to cover it on hover — the single hover effect, not one of three at once. Its own built-in scrim keeps the (already-light) text readable throughout the slide, so nothing needs to change color. */ body.home-neo .hn-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: translateY(100%); transition: transform .5s cubic-bezier(.22,.8,.25,1); } body.home-neo .hn-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(13,13,20,.9) 0%, rgba(13,13,20,.55) 55%, rgba(13,13,20,.15) 100%); transform: translateY(100%); transition: transform .5s cubic-bezier(.22,.8,.25,1); } body.home-neo .hn-card:hover::before, body.home-neo .hn-card:hover::after { transform: translateY(0); } /* transition re-declared here (not just on the base .hn-card rule) so this :hover's higher specificity also wins the transition-duration itself, not just the transform value — otherwise the .reveal rule's own (slower, entrance-only) transition timing wins the tie and the hover would animate at the wrong speed. */ body.home-neo .hn-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(14,140,140,.28); transition: transform .25s ease, box-shadow .25s ease; } body.home-neo .hn-card-cv::before { background-image: url("../images/previews/hero-cv-1.webp"); } body.home-neo .hn-card-featured::before { background-image: url("../images/previews/hero-site.webp"); } body.home-neo .hn-card-deck::before { background-image: url("../images/previews/hero-deck.webp"); } body.home-neo .hn-card-xlsx::before { background-image: url("../images/previews/xlsx-cashflow.webp"); } /* Not a screenshot of an actual document (that's what every other card's hover image avoided in the first place — they're all styled mockups, never a literal wall of text) — confirmed live as the reason the quote card's old hero-quote.webp read as "different words flashing in" on hover: it's a real, dense quote letter, nothing like the abstract compositions the other cards use. These two are purpose-built mockups (generic line items, no real business/customer data) in the same visual language as the other cards, generated the same way the site catalog's own template thumbnails are. */ body.home-neo .hn-card-quote::before { background-image: url("../images/previews/hero-quote-card.webp?v=3"); } body.home-neo .hn-card-invoice::before { background-image: url("../images/previews/hero-invoice-card.webp?v=3"); } @media (prefers-reduced-motion: reduce) { body.home-neo .hn-card { transition: box-shadow .3s ease; } body.home-neo .hn-card:hover { transform: none; } body.home-neo .hn-card::before, body.home-neo .hn-card::after { transition: opacity .3s ease; transform: none; opacity: 0; } body.home-neo .hn-card:hover::before, body.home-neo .hn-card:hover::after { opacity: 1; } body.home-neo .hn-card:hover .hn-card-icon { transform: none; } } @media (max-width: 900px) { body.home-neo .hn-tools-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { body.home-neo .hn-tools-grid { grid-template-columns: 1fr; } } /* ---------- Flagship banner ---------- */ body.home-neo .hn-flagship { background: var(--hn-dark); color: var(--hn-dark-text); } body.home-neo .hn-flagship-split { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: center; } body.home-neo .hn-flagship-text h2 { font-size: 30px; font-weight: 700; margin: 0 0 16px; line-height: 1.3; } body.home-neo .hn-flagship-text p { font-size: 15.5px; color: var(--hn-dark-text-dim); line-height: 1.8; margin: 0; max-width: 460px; } body.home-neo .hn-flagship-price-box { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); border-radius: var(--hn-radius); padding: 28px; text-align: center; } body.home-neo .hn-flagship-price { font-size: 34px; font-weight: 800; color: var(--hn-accent); } body.home-neo .hn-flagship-price-note { font-size: 13px; color: var(--hn-dark-text-dim); margin: 4px 0 20px; } body.home-neo .hn-flagship-price-box .hn-btn { width: 100%; box-sizing: border-box; } @media (max-width: 800px) { body.home-neo .hn-flagship-split { grid-template-columns: 1fr; } } /* A soft pulsing halo draws the eye to the one button on the page that actually starts the purchase — paused (not removed) on hover so the hover state below still reads clearly, and skipped entirely under prefers-reduced-motion. */ @keyframes hn-cta-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(14,140,140,.5); } 50% { box-shadow: 0 0 0 12px rgba(14,140,140,0); } } body.home-neo .hn-flagship-price-box .hn-btn-gold { animation: hn-cta-pulse 2.4s ease-in-out infinite; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; } body.home-neo .hn-flagship-price-box .hn-btn-gold:hover { animation-play-state: paused; opacity: 1; transform: scale(1.05); background: var(--hn-accent); color: #fff; box-shadow: 0 10px 26px rgba(14,140,140,.45); } @media (prefers-reduced-motion: reduce) { body.home-neo .hn-flagship-price-box .hn-btn-gold { animation: none; } } /* ---------- Footer ---------- */ /* The shared footer is still teal/gold on every other page (not yet redesigned), so this override is scoped to the homepage only — matching the same dark tone as the flagship banner above it, so the two dark sections read as one deliberate palette instead of a leftover old brand color breaking the black/white/accent scheme. */ body.home-neo footer.site { background: var(--hn-dark); color: var(--hn-dark-text-dim); } body.home-neo .footer-grid h4 { color: var(--hn-dark-text); } body.home-neo .footer-grid ul a:hover { color: var(--hn-accent); } body.home-neo .footer-bottom { color: #7A7A82; } /* ---------- Floating widgets ---------- */ /* Same reasoning as the footer above: these are shared, sitewide widgets still in the old teal/gold, so the recolor to the black/white/accent palette is scoped to the homepage only. */ body.home-neo .fab-chat { background: var(--hn-dark); } body.home-neo .fab-feedback { background: var(--hn-accent); color: var(--hn-dark-text); } body.home-neo .fab-a11y { border-color: var(--hn-border); color: var(--hn-ink); } body.home-neo .fab-a11y:hover { border-color: var(--hn-accent); } /* ---------- Three steps ---------- */ /* Dark section on purpose — it sits right after the (light) tools grid and right before the (light) advantages grid, and those two were reading as one long, repetitive white stretch. */ /* A flat identical --hn-dark here (same as the flagship banner right above it) read as one giant black block with no visible seam — a subtle teal-tinted gradient keeps this section dark and moody but visibly distinct from its neighbor. */ body.home-neo .hn-steps { background: linear-gradient(165deg, #0A2222 0%, var(--hn-dark) 65%); } body.home-neo .hn-steps .hn-section-h { color: var(--hn-dark-text); } body.home-neo .hn-steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } body.home-neo .hn-step { position: relative; padding-top: 8px; transition: transform .3s ease; } body.home-neo .hn-step:hover { transform: translateY(-4px); transition: transform .3s ease; } /* At rest the giant numeral is barely there — a faint watermark. As each step scrolls into view it glows turquoise, one after another (staggered via transition-delay on the numeral itself, offset from the card's own fade-in so the glow reads as a follow-up beat, not simultaneous). */ body.home-neo .hn-step-num { font-size: 110px; font-weight: 800; color: rgba(255,255,255,.07); line-height: 1; margin-bottom: -34px; transition: color .7s ease, text-shadow .7s ease; } body.home-neo .hn-step.in-view .hn-step-num { color: #14B8B8; text-shadow: 0 0 32px rgba(20,184,184,.55); } body.home-neo .hn-steps-row .hn-step:nth-child(1) .hn-step-num { transition-delay: .15s; } body.home-neo .hn-steps-row .hn-step:nth-child(2) .hn-step-num { transition-delay: .4s; } body.home-neo .hn-steps-row .hn-step:nth-child(3) .hn-step-num { transition-delay: .65s; } body.home-neo .hn-step h3 { position: relative; font-size: 19px; font-weight: 700; margin: 0 0 10px; color: var(--hn-dark-text); } body.home-neo .hn-step p { position: relative; font-size: 14.5px; color: var(--hn-dark-text-dim); line-height: 1.7; margin: 0; } @media (max-width: 800px) { body.home-neo .hn-steps-row { grid-template-columns: 1fr; gap: 56px; } } @media (prefers-reduced-motion: reduce) { body.home-neo .hn-step-num { transition: color .3s ease, text-shadow .3s ease; } body.home-neo .hn-step { transition: none; } body.home-neo .hn-step:hover { transform: none; } } /* ---------- Advantages ---------- */ /* Deliberately NOT another row of 3 equal cards — that's the steps section right above it. A left/right split (heading+intro vs. a compact stacked list) reads as a different section, not a repeat. */ body.home-neo .hn-advantages { background: var(--hn-accent-pale); } body.home-neo .hn-advantages-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; } body.home-neo .hn-advantages-intro .hn-section-h { text-align: start; margin-bottom: 16px; } body.home-neo .hn-advantages-intro p { font-size: 15.5px; color: var(--hn-grey); line-height: 1.8; max-width: 360px; margin: 0; } body.home-neo .hn-advantages-list { display: flex; flex-direction: column; gap: 28px; } body.home-neo .hn-adv-row { display: flex; gap: 18px; align-items: flex-start; } body.home-neo .hn-adv-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--hn-bg); color: var(--hn-accent); flex: none; } body.home-neo .hn-adv-icon svg { width: 20px; height: 20px; } body.home-neo .hn-adv-row h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; } body.home-neo .hn-adv-row p { font-size: 14px; color: var(--hn-grey); line-height: 1.7; margin: 0; } @media (max-width: 800px) { body.home-neo .hn-advantages-split { grid-template-columns: 1fr; gap: 32px; } body.home-neo .hn-advantages-intro .hn-section-h { text-align: center; } body.home-neo .hn-advantages-intro p { max-width: none; text-align: center; margin-inline: auto; } } /* ---------- Motion: hero entrance + scroll-reveal + card hover ---------- */ /* Hero content is above the fold, so it animates in immediately on load (a plain @keyframes, no IntersectionObserver needed) — everything else uses the shared .reveal/.in-view scroll-triggered system from effects.js, just with this page's own heavier timing (30px/.8s ease-out instead of the site-wide default's smaller, quicker one). */ @keyframes hnFadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } body.home-neo .hn-hero-eyebrow, body.home-neo .hn-hero-text h1, body.home-neo .hn-hero-lead, body.home-neo .hn-cta-row, body.home-neo .hn-hero-visual { animation: hnFadeUp .8s ease-out both; } body.home-neo .hn-hero-text h1 { animation-delay: .08s; } body.home-neo .hn-hero-lead { animation-delay: .16s; } body.home-neo .hn-cta-row { animation-delay: .24s; } body.home-neo .hn-hero-visual { animation-delay: .32s; } @media (prefers-reduced-motion: reduce) { body.home-neo .hn-hero-eyebrow, body.home-neo .hn-hero-text h1, body.home-neo .hn-hero-lead, body.home-neo .hn-cta-row, body.home-neo .hn-hero-visual { animation: none; } } body.home-neo .reveal { transform: translateY(30px); transition: opacity .8s ease-out, transform .8s ease-out; } /* Staggered wave, card-by-card/step-by-step — plain nth-child delays, no JS needed since each grid's item count is fixed and known. */ body.home-neo .hn-tools-grid .hn-card:nth-child(1) { transition-delay: 0s; } body.home-neo .hn-tools-grid .hn-card:nth-child(2) { transition-delay: .1s; } body.home-neo .hn-tools-grid .hn-card:nth-child(3) { transition-delay: .2s; } body.home-neo .hn-tools-grid .hn-card:nth-child(4) { transition-delay: .3s; } body.home-neo .hn-tools-grid .hn-card:nth-child(5) { transition-delay: .4s; } body.home-neo .hn-tools-grid .hn-card:nth-child(6) { transition-delay: .5s; } body.home-neo .hn-steps-row .hn-step:nth-child(1) { transition-delay: 0s; } body.home-neo .hn-steps-row .hn-step:nth-child(2) { transition-delay: .12s; } body.home-neo .hn-steps-row .hn-step:nth-child(3) { transition-delay: .24s; } body.home-neo .hn-advantages-list .hn-adv-row:nth-child(1) { transition-delay: 0s; } body.home-neo .hn-advantages-list .hn-adv-row:nth-child(2) { transition-delay: .12s; } body.home-neo .hn-advantages-list .hn-adv-row:nth-child(3) { transition-delay: .24s; } @media (max-width: 700px) { body.home-neo .hn-hero, body.home-neo .hn-tools, body.home-neo .hn-flagship, body.home-neo .hn-steps, body.home-neo .hn-advantages { padding-block: 64px; } } .btn { display: inline-block; padding: 14px 30px; border-radius: 30px; font-weight: 600; font-size: 15px; cursor: pointer; border: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn-gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--teal-dark); box-shadow: 0 10px 26px rgba(14,140,140,.35); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(14,140,140,.45); } .btn-outline { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.6); } .btn-outline:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); } .btn-outline-dark { background: transparent; color: var(--teal-dark); border: 1.5px solid var(--teal-dark); } .btn-outline-dark:hover { background: var(--teal-dark); color: var(--white); transform: translateY(-2px); } .btn-teal { background: linear-gradient(135deg, var(--teal), var(--teal-light)); color: var(--white); box-shadow: 0 8px 20px rgba(13,13,20,.2); } .btn-teal:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(13,13,20,.3); } .btn-disabled, .btn-disabled:hover { pointer-events: none; opacity: .55; box-shadow: none; transform: none; cursor: default; } /* ---------- Sections ---------- */ section { padding: 88px 0; } .section-head { text-align: center; max-width: 640px; margin: 0 auto 48px; } .section-head .kicker { display: inline-block; color: var(--white); background: linear-gradient(120deg, var(--vivid-emerald), var(--teal-dark)); box-shadow: 0 6px 16px rgba(20,184,184,.28); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 16px; border-radius: 20px; margin-bottom: 6px; } .section-head h2 { font-size: 34px; margin: 12px 0 12px; color: var(--teal-dark); letter-spacing: -.01em; } .section-head p { color: var(--grey); font-size: 16px; } /* ---------- Homepage tools section: heading at the reading-order start (right, in RTL) with two "flagship" cards beside it, the rest below — an asymmetric header instead of the usual centered kicker+h2. ---------- */ /* The sticky header is 64px tall and sits on top of whatever scrolls to the top of the viewport — this just clears it (64px + a small buffer). Bigger than that actively backfires: it eats into the viewport's own height budget, pushing more of the section's own content below the fold instead of revealing more of it. */ /* Tighter than the default 88px section padding — this is the section the "בואו נתחיל" anchor jumps straight to, so its own height directly decides how much of it fits above the fold without extra scrolling. */ #tools { scroll-margin-top: 66px; padding-top: 26px; padding-bottom: 48px; } .bg-ice { background: linear-gradient(180deg, var(--ice), #F7FBF9); } /* The generic `section { padding: 88px 0; }` rule is sized for a big marketing hero, not this compact toolbar-then-grid catalog page — left as-is it put a huge empty gap between the teal intro banner above and the search bar below. */ #tpl-catalog-section { padding-top: 24px; } /* ---------- Category tabs ---------- */ .tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 40px; } .tab { background: var(--white); border: 1.5px solid #DDE4E1; color: var(--dark); padding: 9px 20px; border-radius: 30px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; } .tab:hover { border-color: var(--teal); transform: translateY(-1px); } .tab.active { background: linear-gradient(135deg, var(--teal), var(--teal-light)); border-color: var(--teal); color: var(--white); } .tabs-sub { margin-bottom: 34px; } .tabs-sub .tab { font-size: 12.5px; font-weight: 600; padding: 6px 16px; border-color: #E7EBE9; color: var(--grey); } .tabs-sub .tab.active { background: var(--ice); color: var(--teal-dark); border-color: var(--teal-light); } /* ---------- Catalog search (products/sites/quote-app template pickers) ---------- */ .tpl-search-row { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .tpl-search-wrap { position: relative; width: 100%; max-width: 380px; } .tpl-search-wrap svg { position: absolute; top: 50%; inset-inline-start: 16px; transform: translateY(-50%); width: 17px; height: 17px; color: var(--grey); pointer-events: none; } .tpl-search { width: 100%; box-sizing: border-box; padding: 11px 16px 11px 40px; padding-inline-start: 40px; padding-inline-end: 16px; border: 1.5px solid #DDE4E1; border-radius: 30px; font-family: inherit; font-size: 14px; background: var(--white); transition: border-color .15s ease, box-shadow .15s ease; } .tpl-search:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,13,20,.1); } .tpl-search::placeholder { color: var(--grey); } .tpl-search-empty { grid-column: 1/-1; text-align: center; color: var(--grey); font-size: 14px; padding: 30px 0; } /* "Smart search": a checklist of cross-cutting attributes (e.g. "has horizontal scroll") that the category tabs and free-text search can't express — only used on the site-template catalog (sites.html) today, but scoped generically so another catalog page can reuse it later. */ .tpl-smart-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10.5px 18px; border-radius: 30px; border: 1.5px solid #DDE4E1; background: var(--white); color: var(--teal-dark); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: border-color .15s ease, background .15s ease, color .15s ease; } .tpl-smart-btn svg { width: 16px; height: 16px; } .tpl-smart-btn:hover { border-color: var(--teal); } .tpl-smart-btn.active { background: linear-gradient(135deg, var(--teal), var(--teal-light)); border-color: var(--teal); color: var(--white); } .tpl-smart-count { background: var(--white); color: var(--teal-dark); font-size: 11px; font-weight: 800; border-radius: 50%; width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; } .tpl-smart-panel { max-width: 800px; margin: 0 auto 28px; background: var(--ice); border: 1px solid #DCE9E4; border-radius: var(--radius); padding: 20px 22px; } .tpl-smart-checks { display: flex; flex-wrap: wrap; gap: 10px 14px; } .tpl-smart-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dark); cursor: pointer; background: var(--white); border: 1.5px solid #DCE9E4; border-radius: 20px; padding: 8px 15px; transition: border-color .15s ease, box-shadow .15s ease; } .tpl-smart-check input { accent-color: var(--teal); width: 15px; height: 15px; cursor: pointer; } .tpl-smart-check.checked { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal) inset; } .tpl-smart-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 16px; } .tpl-smart-clear { background: none; border: none; padding: 0; color: var(--grey); font-size: 13px; font-family: inherit; cursor: pointer; text-decoration: underline; } .tpl-smart-clear:hover { color: var(--dark); } @media (max-width: 640px) { .tpl-search-row { flex-direction: column; } .tpl-search-wrap { max-width: 100%; } .tpl-smart-btn { width: 100%; justify-content: center; } } /* ---------- Product grid / cards ---------- */ .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .grid.grid-2 { grid-template-columns: repeat(2, 1fr); } .grid.grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid.grid-4 { grid-template-columns: repeat(2, 1fr); } } .card { position: relative; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; border: 1px solid #EEF2F0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .card::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0; height: 4px; background: linear-gradient(90deg, var(--cat-c, var(--gold)), var(--vivid-emerald)); opacity: 0; transition: opacity .2s ease; } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } .card:hover::before { opacity: 1; } .card .thumb { background: var(--cat-bg, var(--ice)); padding: 14px; height: 170px; display: flex; align-items: center; justify-content: center; } .card .thumb img { border-radius: 6px; height: 100%; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; transition: transform .3s ease; } .card:hover .thumb img { transform: scale(1.03); } .card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card .tag { align-self: flex-start; background: var(--cat-bg, var(--ice)); color: var(--cat-c, var(--teal-dark)); font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; } .card .tag-free { background: transparent; color: var(--teal); padding: 3px 0; } .card[data-cat="general"] { --cat-c: var(--cat-general); --cat-bg: var(--cat-general-bg); } .card[data-cat="dev"] { --cat-c: var(--cat-dev); --cat-bg: var(--cat-dev-bg); } .card[data-cat="design"] { --cat-c: var(--cat-design); --cat-bg: var(--cat-design-bg); } .card[data-cat="accounting"] { --cat-c: var(--cat-accounting); --cat-bg: var(--cat-accounting-bg); } .card[data-cat="deck"] { --cat-c: var(--cat-deck); --cat-bg: var(--cat-deck-bg); } .card[data-cat="xlsx"] { --cat-c: var(--cat-xlsx); --cat-bg: var(--cat-xlsx-bg); } /* Deck/xlsx cards are tagged by their finer topicSlug (business/finance/…) rather than the flat "deck"/"xlsx" categorySlug above, so each product's actual topic — not just its file type — drives the card color. "creative" is shared with the site-template category of the same name below. */ .card[data-cat="business"] { --cat-c: var(--cat-deck-business); --cat-bg: var(--cat-deck-business-bg); } .card[data-cat="marketing"] { --cat-c: var(--cat-deck-marketing); --cat-bg: var(--cat-deck-marketing-bg); } .card[data-cat="creative"] { --cat-c: var(--cat-deck-creative); --cat-bg: var(--cat-deck-creative-bg); } .card[data-cat="finance"] { --cat-c: var(--cat-xlsx-finance); --cat-bg: var(--cat-xlsx-finance-bg); } .card[data-cat="customers"] { --cat-c: var(--cat-xlsx-customers); --cat-bg: var(--cat-xlsx-customers-bg); } .card[data-cat="operations"] { --cat-c: var(--cat-xlsx-operations); --cat-bg: var(--cat-xlsx-operations-bg); } .card[data-cat="projects"] { --cat-c: var(--cat-xlsx-projects); --cat-bg: var(--cat-xlsx-projects-bg); } .card[data-cat="sales"] { --cat-c: var(--cat-xlsx-sales); --cat-bg: var(--cat-xlsx-sales-bg); } .card[data-cat="hr"] { --cat-c: var(--cat-xlsx-hr); --cat-bg: var(--cat-xlsx-hr-bg); } /* Site-template categories (sites.html catalog) — previously uncolored, so every site card fell back to the same plain --ice tint. */ .card[data-cat="service"] { --cat-c: var(--cat-site-service); --cat-bg: var(--cat-site-service-bg); } .card[data-cat="personal"] { --cat-c: var(--cat-site-personal); --cat-bg: var(--cat-site-personal-bg); } .card[data-cat="shop"] { --cat-c: var(--cat-site-shop); --cat-bg: var(--cat-site-shop-bg); } .card[data-cat="events"] { --cat-c: var(--cat-site-events); --cat-bg: var(--cat-site-events-bg); } .card h3 { margin: 0; font-size: 16.5px; color: var(--dark); line-height: 1.35; } .card .card-cta { margin-top: auto; text-align: center; padding: 9px 20px; font-size: 13.5px; } /* Small "new" indicator as a corner dot over the thumbnail, instead of a full pill taking up its own line in the card body — keeps every card's body starting at the same point regardless of whether it happens to be new, which is what actually keeps a row of cards' CTA buttons aligned. */ .card-new-badge { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--teal-light), var(--teal)); display: flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 4px 10px rgba(13,13,20,.25); } .price { font-size: 16px; font-weight: 700; color: var(--teal-dark); } .price small { font-size: 13px; color: var(--grey); font-weight: 400; } /* ---------- Flip cards (site template catalog) ---------- */ /* The front face reuses .card wholesale (thumb/body/tag/price all work for free via the existing descendant selectors). A same-day earlier version of this made the thumb a full-bleed cropped screenshot with no padding — confirmed live that this read as worse, not better: it lost the pastel per-category background these thumbs sit in (the at-a-glance "creative vs. shop vs. personal" color cue), and made every card noticeably taller. Back to the shared .card thumb treatment (padded, contain, category-tinted background); the "make this grab people" ask is answered below instead — a bold, always-on category-color top bar (not hover-only, so the color reads even before anyone touches anything) plus a colored glow and a playful tilt on hover, rather than by cropping the screenshots harder. */ .flip-card { position: relative; perspective: 1600px; height: 314px; transition: transform .25s ease; } .flip-card .thumb { height: 128px; } .flip-card .card::before { display: block; height: 6px; opacity: 1; } .flip-card .card:hover { transform: none; box-shadow: 0 22px 40px -12px var(--cat-c, rgba(0,0,0,.3)); } .flip-card .body { gap: 6px; } .flip-card .body h3 { font-size: 16.5px; } .flip-card .body p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .flip-card:hover, .flip-card.is-flipped { transform: translateY(-8px) rotate(-.6deg); } /* "creative" collides with the deck catalog's own use of the same slug (line ~1030 above, --cat-deck-creative) — sites needed their own --cat-site-creative, already defined, just never actually wired up. Higher specificity here (two classes) wins within the site catalog only; the shared .card[data-cat="creative"] rule everywhere else (decks) is untouched. */ .flip-card .card[data-cat="creative"] { --cat-c: var(--cat-site-creative); --cat-bg: var(--cat-site-creative-bg); } .flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; } /* Flips around the horizontal axis (bottom edge lifts up and over, like a die tumbling) rather than the vertical axis — a left-right flip read as too "web-generic" next to the rest of the site. */ .flip-card:hover .flip-card-inner, .flip-card.is-flipped .flip-card-inner { transform: rotateX(180deg); } .flip-card-front, .flip-card-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius); } .flip-card-front.card { margin: 0; } .flip-card-back { transform: rotateX(180deg); background: linear-gradient(135deg, var(--teal-dark), var(--teal) 85%); color: var(--white); padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); } .flip-card-back h4 { margin: 0 0 2px; font-size: 15px; line-height: 1.35; } .flip-card-back ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; } .flip-card-back li { font-size: 13.5px; line-height: 1.4; display: flex; align-items: flex-start; gap: 8px; color: #E7F2EE; } .flip-card-back li::before { content: "\2713"; color: var(--gold-light); font-weight: 700; flex-shrink: 0; } .flip-card-back .card-cta { margin-top: auto; text-align: center; padding: 9px 20px; font-size: 13.5px; background: var(--white); color: var(--teal-dark); border: 1.5px solid transparent; border-radius: 10px; font-weight: 700; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .flip-card-back .card-cta:hover { background: var(--teal-dark); color: var(--white); border-color: var(--white); transform: scale(1.05); box-shadow: 0 8px 18px rgba(0,0,0,.3); } /* ---------- Feature list (icon rows) ---------- */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .feature { text-align: center; padding: 26px 18px; border-radius: var(--radius); transition: transform .2s ease, box-shadow .2s ease; } .feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .feature .icon { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, rgba(20,184,184,.18), rgba(13,13,20,.14)); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 24px; color: var(--teal-dark); box-shadow: inset 0 0 0 1px rgba(13,13,20,.1); } .feature:nth-child(2) .icon { background: linear-gradient(135deg, var(--cat-dev-bg), #D2E3F2); color: var(--cat-dev); box-shadow: inset 0 0 0 1px rgba(43,108,176,.1); } .feature:nth-child(3) .icon { background: linear-gradient(135deg, var(--cat-design-bg), #F2DACB); color: var(--cat-design); box-shadow: inset 0 0 0 1px rgba(194,98,45,.1); } .feature h4 { margin: 0 0 8px; font-size: 17px; } .feature p { margin: 0; color: var(--grey); font-size: 14px; } /* ---------- Coming soon banner ---------- */ .banner { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, var(--teal-dark), var(--teal) 80%); color: var(--white); border-radius: var(--radius); padding: 40px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; box-shadow: var(--shadow-lg); } .banner::before { content: ""; position: absolute; z-index: -1; inset-inline-start: -40px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(14,140,140,.35), transparent 70%); } .banner::after { content: ""; position: absolute; z-index: -1; inset-inline-end: -50px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(20,184,184,.3), transparent 70%); } .banner h3 { margin: 0 0 6px; font-size: 22px; } .banner p { margin: 0; color: #CFE3DC; font-size: 14px; max-width: 480px; } .badge-free { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--teal-dark); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-inline-start: 10px; } .badge-new { background: linear-gradient(135deg, var(--teal-light), var(--teal)); color: var(--white); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-inline-start: 10px; } /* ---------- Product detail page ---------- */ .product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 60px 0; } .product-hero .thumb { background: linear-gradient(160deg, var(--ice), #F7FBF9); border-radius: var(--radius); padding: 28px; display:flex; align-items:center; justify-content:center; } .product-hero .thumb img { border-radius: 8px; box-shadow: var(--shadow-lg); } .breadcrumb { font-size: 13px; color: var(--grey); margin-bottom: 18px; } .breadcrumb a { color: var(--teal); } .product-hero h1 { font-size: 34px; margin: 0 0 14px; color: var(--dark); letter-spacing: -.01em; } .product-hero .desc { color: var(--grey); font-size: 16px; margin-bottom: 22px; } .product-hero .price-block { display: flex; align-items: baseline; gap: 10px; margin-bottom: 26px; } .product-hero .price-block .price { font-size: 34px; } .format-badges { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; } .format-badge { background: var(--ice); color: var(--teal-dark); font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 8px; } .checklist { list-style: none; padding: 0; margin: 0 0 10px; } .checklist li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 15px; color: var(--dark); } .checklist li::before { content: "✓"; color: var(--white); font-weight: 700; flex: none; width: 19px; height: 19px; border-radius: 50%; background: var(--teal); display: flex; align-items: center; justify-content: center; font-size: 11px; margin-top: 2px; } .note-box { background: var(--grey-light); border-inline-start: 3px solid var(--gold); border-radius: 8px; padding: 14px 16px; font-size: 13px; color: var(--grey); margin-top: 18px; } /* ---------- Testimonials ---------- */ .quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .quote { position: relative; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 30px 26px 26px; transition: transform .2s ease, box-shadow .2s ease; } .quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .quote::before { content: "”"; position: absolute; top: 6px; inset-inline-end: 20px; font-size: 56px; font-weight: 700; color: var(--ice); line-height: 1; font-family: Georgia, serif; z-index: 0; } .quote p.text { position: relative; z-index: 1; color: var(--dark); font-size: 15px; margin: 0 0 16px; } .quote .who { position: relative; z-index: 1; font-size: 13px; color: var(--teal-dark); font-weight: 700; } /* ---------- Steps ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; } .step { text-align: center; position: relative; } .step .num { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--teal), var(--teal-light)); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; margin: 0 auto 14px; box-shadow: 0 8px 18px rgba(13,13,20,.28); } .step h4 { margin: 0 0 6px; font-size: 16px; } .step p { margin: 0; color: var(--grey); font-size: 14px; } /* ---------- Forms ---------- */ form.contact-form { display: grid; gap: 16px; max-width: 560px; margin: 0 auto; } .field { display: grid; gap: 6px; } .field label { font-size: 14px; font-weight: 600; } .field input, .field textarea { padding: 12px 14px; border-radius: 8px; border: 1px solid #DADFDD; font-family: inherit; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(13,13,20,.12); } .field textarea { resize: vertical; min-height: 120px; } /* ---------- Footer ---------- */ footer.site { background: linear-gradient(180deg, var(--teal-dark), #000000); color: #B8B8C0; padding: 50px 0 26px; margin-top: 60px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 30px; } .footer-grid h4 { color: var(--white); font-size: 15px; margin: 0 0 14px; } .footer-grid ul { list-style: none; padding: 0; display: grid; gap: 8px; font-size: 14px; } .footer-grid ul a { transition: color .15s ease; display: inline-block; padding-block: 4px; } .footer-grid ul a:hover { color: var(--white); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; font-size: 13px; text-align: center; color: #7A7A82; } /* ---------- Utility ---------- */ .center { text-align: center; } .mt-40 { margin-top: 40px; } /* ---------- Floating widgets: feedback + chat ---------- */ .fab { position: fixed; bottom: 24px; z-index: 200; width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; font-size: 22px; color: var(--white); box-shadow: 0 10px 26px rgba(0,0,0,.22); display: flex; align-items: center; justify-content: center; transition: transform .15s ease, box-shadow .15s ease; } .fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 14px 30px rgba(0,0,0,.28); } .fab-feedback { left: 24px; background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: var(--teal-dark); } .fab-chat { right: 24px; background: linear-gradient(135deg, var(--teal), var(--teal-light)); } .fab-chat svg { width: 24px; height: 24px; } .fab-a11y { left: 24px; bottom: 88px; box-shadow: 0 6px 16px rgba(0,0,0,.12); background: var(--white); border: 1.5px solid #DDE4E1; color: var(--teal-dark); text-decoration: none; } .fab-a11y svg { width: 24px; height: 24px; } .fab-a11y:hover { border-color: var(--teal); } .widget-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(16,30,25,.5); display: none; align-items: center; justify-content: center; padding: 20px; } .widget-overlay.open { display: flex; } .widget-modal { position: relative; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 30px 26px 24px; max-width: 380px; width: 100%; } .widget-modal h3 { margin: 0 0 6px; font-size: 19px; color: var(--teal-dark); } .widget-sub { margin: 0 0 16px; font-size: 13.5px; color: var(--grey); } .widget-close { position: absolute; top: 14px; inset-inline-end: 14px; background: var(--grey-light); border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 13px; color: var(--grey); } .star-row { display: flex; gap: 6px; margin-bottom: 16px; } .star { background: none; border: none; font-size: 30px; color: #DDE4E1; cursor: pointer; padding: 0; line-height: 1; transition: color .1s ease; } .star.filled { color: var(--gold); } .widget-modal textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; border: 1px solid #DADFDD; font-family: inherit; font-size: 13.5px; resize: vertical; margin-bottom: 14px; } .widget-note { font-size: 13px; color: var(--grey); margin-top: 10px; line-height: 1.5; } .widget-note.ok { color: var(--teal); font-weight: 600; } .widget-note.warn { color: #B23; } .widget-note a { color: var(--teal); font-weight: 600; } .chat-panel { position: fixed; bottom: 90px; right: 24px; z-index: 250; width: 320px; max-width: calc(100vw - 32px); height: 420px; max-height: calc(100vh - 130px); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden; border: 1px solid #EAEDEC; } .chat-panel.open { display: flex; } .chat-head { background: linear-gradient(135deg, var(--teal-dark), var(--teal)); color: var(--white); padding: 14px 16px; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; justify-content: space-between; } .chat-head .widget-close { position: static; background: rgba(255,255,255,.18); color: var(--white); } .chat-body { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; background: var(--grey-light); } .chat-msg { display: flex; } .chat-msg-bot { justify-content: flex-start; } .chat-msg-user { justify-content: flex-end; } .chat-bubble { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 13px; line-height: 1.55; } .chat-msg-bot .chat-bubble { background: var(--white); color: var(--dark); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .chat-msg-user .chat-bubble { background: var(--teal); color: var(--white); } .chat-link { display: block; margin-top: 6px; font-weight: 700; color: var(--teal); font-size: 12.5px; } .chat-msg-user .chat-link { color: #DCEBE5; } .chat-quick { display: flex; gap: 6px; padding: 0 12px 10px; flex-wrap: wrap; } .chat-chip { background: var(--ice); color: var(--teal-dark); border: none; padding: 6px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; } .chat-input-row { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #EDEFEE; } .chat-input-row input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 20px; border: 1px solid #DADFDD; font-family: inherit; font-size: 13px; } .chat-input-row button { padding: 9px 18px; font-size: 13px; } .cookie-notice { position: fixed; inset-inline: 0; bottom: 0; z-index: 250; background: var(--white); color: var(--teal-dark); border-top: 1px solid #DDE4E1; display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 12px 24px; box-shadow: 0 -6px 20px rgba(0,0,0,.1); } .cookie-notice p { margin: 0; font-size: 13px; max-width: 560px; color: var(--grey); } .cookie-notice p a { color: var(--teal); font-weight: 600; text-decoration: underline; display: inline-block; padding-block: 5px; } .cookie-notice button { padding: 8px 20px; font-size: 13px; flex: none; } body.cookie-notice-active .fab { display: none; } .upsell-popup-wrap { position: fixed; z-index: 260; bottom: 96px; right: 24px; width: 340px; max-width: calc(100vw - 48px); } .upsell-popup { position: relative; background: linear-gradient(155deg, var(--teal-dark), var(--teal) 75%); color: var(--white); border-radius: 18px; padding: 24px 22px 22px; animation: upsellPopIn .5s cubic-bezier(.2,.85,.25,1.3) both, upsellGlow 2.6s ease-in-out .6s infinite alternate; } .upsell-popup-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(20,184,184,.2); border: 1px solid rgba(20,184,184,.55); display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 12px; } .upsell-popup h4 { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; } .upsell-popup p { margin: 0 0 16px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.85); } .upsell-popup-cta { display: flex; width: 100%; box-sizing: border-box; justify-content: center; } .upsell-popup-close { position: absolute; top: 12px; inset-inline-end: 12px; background: rgba(255,255,255,.14); border: none; color: var(--white); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 12px; transition: background .15s ease, transform .15s ease; } .upsell-popup-close:hover { background: rgba(255,255,255,.28); transform: scale(1.08); } @keyframes upsellPopIn { from { opacity: 0; transform: translateY(26px) scale(.93); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes upsellGlow { from { box-shadow: 0 18px 44px rgba(0,0,0,.32), 0 0 0 1px rgba(14,140,140,.35), 0 0 0 rgba(20,184,184,0); } to { box-shadow: 0 18px 44px rgba(0,0,0,.32), 0 0 0 1px rgba(14,140,140,.65), 0 0 24px rgba(20,184,184,.45); } } @media (prefers-reduced-motion: reduce) { .upsell-popup { animation: upsellPopIn .01s linear both; } } @media (max-width: 640px) { .upsell-popup-wrap { right: 12px; left: 12px; bottom: 84px; width: auto; max-width: none; } } @media (max-width: 480px) { .chat-panel { right: 12px; bottom: 84px; width: calc(100vw - 24px); } .fab-chat { right: 14px; } .fab-feedback { left: 14px; } .fab-a11y { left: 14px; } } @media print { .no-print { display: none !important; } } @media (max-width: 860px) { .grid, .features, .quote-grid, .steps, .footer-grid { grid-template-columns: 1fr; } .product-hero { grid-template-columns: 1fr; padding: 30px 0; } .nav-links { position: fixed; inset-inline-end: 0; top: 68px; background: var(--white); flex-direction: column; width: 220px; padding: 20px; box-shadow: 6px 0 20px rgba(0,0,0,.08); transform: translateX(-100%); transition: transform .2s ease; height: calc(100vh - 68px); } .nav-links.open { transform: translateX(0); } .burger { display: block; } .hero h1 { font-size: 32px; } .banner { flex-direction: column; text-align: center; } } /* ---------- Domain connection guide popup ---------- */ .domain-guide-overlay { position: fixed; inset: 0; background: rgba(15,51,43,.55); z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; } .domain-guide-modal { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; padding: 34px 32px; position: relative; } .domain-guide-close { position: absolute; top: 16px; inset-inline-start: 16px; background: var(--grey-light); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer; color: var(--grey); } .domain-guide-close:hover { background: var(--ice); color: var(--teal-dark); } .domain-guide-modal h2 { font-size: 20px; color: var(--teal-dark); margin: 0 0 10px; } .domain-guide-modal > .lead { font-size: 13.5px; color: var(--grey); margin: 0 0 26px; line-height: 1.7; } .domain-guide-step { display: flex; gap: 14px; margin-bottom: 24px; } .domain-guide-step:last-of-type { margin-bottom: 0; } .domain-guide-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--ice); color: var(--teal-dark); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; } .domain-guide-step-body h3 { font-size: 14.5px; margin: 3px 0 6px; color: var(--dark); } .domain-guide-step-body p { font-size: 13px; color: var(--grey); line-height: 1.75; margin: 0; } .domain-guide-providers { display: flex; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; } .domain-guide-providers a { font-size: 12.5px; font-weight: 700; color: var(--teal); border: 1.5px solid var(--ice); border-radius: 20px; padding: 6px 14px; text-decoration: none; } .domain-guide-providers a:hover { border-color: var(--teal); background: var(--ice); } .domain-guide-note { background: var(--grey-light); border-radius: 10px; padding: 13px 15px; font-size: 12px; color: var(--grey); line-height: 1.7; margin-top: 26px; } /* ---------- Auth prompt (join-to-save popup — see js/auth-prompt.js) ---------- */ .auth-prompt-modal { max-width: 400px; text-align: center; } .auth-prompt-modal .lead { margin-bottom: 24px; } /* Google's own "Sign in with Google" branding guidelines: white background, a specific grey border (not the site's own teal/dark button language), Roboto/system-default medium weight, and the real 4-color "G" mark rather than a generic icon — this is what actually reads as "a real Google button" and builds the trust a from-scratch styled button wouldn't. */ .google-signin-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; background: #fff; color: #1F1F1F; border: 1px solid #747775; border-radius: 8px; padding: 11px 16px; font-family: 'Roboto', Arial, sans-serif; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; } .google-signin-btn:hover { background: #F8F9FA; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .google-signin-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .auth-prompt-email-link { display: block; margin-top: 16px; font-size: 12.5px; color: var(--grey); text-decoration: underline; } .auth-prompt-email-link:hover { color: var(--teal-dark); } .my-content-domain-btn { background: none; border: none; cursor: pointer; color: #8A8A8A; padding: 8px; border-radius: 8px; line-height: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; } .my-content-domain-btn:hover { background: #F5F5F5; color: #1A1A1A; } /* ---------- ATS checker (builder.html) ---------- */ .ats-modal { max-width: 620px; } .ats-textarea { width: 100%; box-sizing: border-box; border: 1.5px solid #E2E7E5; border-radius: 10px; padding: 12px 14px; font-family: inherit; font-size: 13.5px; resize: vertical; margin-bottom: 12px; } .ats-textarea:focus { outline: none; border-color: var(--teal); } .ats-attempts { font-size: 12px; color: var(--grey); margin-bottom: 14px; } .ats-submit-btn { width: 100%; } .ats-error { background: #FBEAEA; color: #963029; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; line-height: 1.7; margin-top: 14px; } .ats-result { margin-top: 26px; } .ats-result h3 { font-size: 14px; color: var(--teal-dark); margin: 20px 0 10px; } .ats-score-row { display: flex; align-items: center; gap: 14px; } .ats-score-badge { color: var(--white); font-weight: 800; font-size: 18px; border-radius: 50%; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ats-score-label { font-size: 13px; color: var(--grey); font-weight: 600; } .ats-keywords { display: flex; flex-wrap: wrap; gap: 8px; } .ats-keyword-chip { font-size: 12.5px; font-weight: 700; color: #963029; background: #FBEAEA; border-radius: 20px; padding: 5px 13px; } .ats-keywords-empty { font-size: 13px; color: var(--grey); } .ats-tips { margin: 0; padding-inline-start: 20px; font-size: 13px; color: var(--dark); line-height: 1.9; } .ats-upgrade-card { background: var(--ice); border-radius: 12px; padding: 20px; text-align: center; } .ats-upgrade-card p { font-size: 13.5px; color: var(--dark); line-height: 1.8; margin: 0 0 16px; } .ats-upgrade-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; }