/* ============================================================ NEXO PRINT — Landing page styles ============================================================ */ /* ───── Skip link ───── */ .skip-link { position: absolute; top: -100px; inset-inline-start: 0; padding: var(--space-3) var(--space-4); background: var(--color-navy); color: white; z-index: 9999; border-end-end-radius: var(--radius-md); } .skip-link:focus { top: 0; } /* ───── Utility bar ───── */ .utility-bar { background: var(--color-neutral-900); color: var(--color-neutral-100); font-size: 0.8125rem; padding: 0.5rem 0; text-align: center; } .utility-bar a { color: var(--color-blue-light); text-decoration: underline; text-underline-offset: 3px; } /* ───── Header ───── */ .site-header { --bar-main-h: 86px; --bar-cats-h: 54px; --header-total: calc(var(--bar-main-h) + var(--bar-cats-h)); position: sticky; top: 0; z-index: 100; background: #fff; transition: box-shadow var(--duration-fast) var(--ease-out); } .site-header.is-scrolled { box-shadow: var(--shadow-md); } /* ───── Full-screen hero mode (home) — hide ALL top bars on load, ───── bring them back (as a fixed overlay) once the hero image shrinks. The hero React island toggles .hero-mode / .hero-docked on . */ body.hero-mode #siteHeaderRoot { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; opacity: 0; transform: translateY(-100%); transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); pointer-events: none; } body.hero-mode.hero-docked #siteHeaderRoot { opacity: 1; transform: none; pointer-events: auto; } /* در حالتِ هیرو، نوارِ بالا فضای flow اشغال نمی‌کند تا عکس از بالای صفحه شروع شود. */ body.hero-mode #main { margin-block-start: 0; } /* محتوای بعد از هیرو کمی بالا کشیده می‌شود تا باندِ پایانیِ هیرو جمع‌وجور شود (فقط کمی فضای خالی—با خطوط—بالا/پایینِ نوشته‌ها می‌ماند، بعد محتوای اصلی). */ body.hero-mode .hero-assurance { position: relative; z-index: 40; margin-block-start: -22vh; } /* ── Bar 1 — brand · search · account ── */ .header-main { background: rgba(255,255,255,0.94); backdrop-filter: saturate(180%) blur(12px); } .header-main > .container { display: flex; align-items: center; gap: var(--space-6); height: var(--bar-main-h); /* Logo pinned to the LEFT, cart/account actions to the RIGHT (per brand request, applied site-wide via the shared header). The search field and the action group keep their own RTL flow for correct Persian text/icon placement. */ direction: ltr; } .header-main > .container > .header-search { direction: rtl; } .header-main > .container > .header-actions { direction: rtl; } .site-logo { display: flex; align-items: center; gap: 9px; flex-shrink: 0; direction: ltr; } .logo-mark { height: 38px; width: auto; display: block; } .logo-full { height: 70px; width: auto; display: block; align-self: center; margin-top: 12px; } .logo-word { font-family: 'Saira', var(--font-sans); font-style: italic; font-weight: 800; font-size: 1.85rem; line-height: 1; letter-spacing: -0.005em; display: inline-flex; } .lw-nexo { color: var(--color-navy); } .lw-print { color: var(--color-blue); font-weight: 600; } /* ── Bar 1 — sign-in button ── */ .btn-signin { background: var(--color-blue); color: #fff; border: 1px solid var(--color-blue); display: inline-flex; align-items: center; gap: 0.45rem; margin-inline-start: 0.4rem; } .btn-signin:hover { background: var(--color-blue-dark); border-color: var(--color-blue-dark); color: #fff; } /* ── Bar 2 — full product category navigation (white, VistaPrint-style) ── */ .header-cats { background: #fff; border-bottom: 1px solid var(--color-border); } .header-cats > .container { display: flex; align-items: stretch; height: var(--bar-cats-h); } .header-cats .site-nav { flex: 1; display: flex; align-items: stretch; justify-content: space-between; gap: var(--space-1); } .header-cats .mega-item { display: flex; } .header-cats .mega-trigger, .header-cats .site-nav-link { position: relative; display: inline-flex; align-items: center; color: var(--color-text); font-size: 0.9375rem; font-weight: 500; padding: 0 0.25rem; border-radius: 0; background: transparent; white-space: nowrap; } .header-cats .mega-trigger::after, .header-cats .site-nav-link::after { content: ''; position: absolute; inset-inline: 0; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--color-navy); transform: scaleX(0); transition: transform 160ms var(--ease-out); } .header-cats .mega-trigger:hover, .header-cats .site-nav-link:hover, .header-cats .mega-item.is-active .mega-trigger { background: transparent; color: var(--color-navy); } .header-cats .mega-trigger:hover::after, .header-cats .site-nav-link:hover::after, .header-cats .mega-item.is-active .mega-trigger::after { transform: scaleX(1); } /* Deals — accent like VistaPrint */ .header-cats .nav-deals { color: var(--color-danger); font-weight: 700; } .header-cats .nav-deals:hover { color: var(--color-danger); } .header-cats .nav-deals::after { background: var(--color-danger); } /* ── Bar 1 help link ── */ .header-help { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9375rem; font-weight: 500; color: var(--color-slate); padding: 0.5rem 0.625rem; border-radius: var(--radius-md); white-space: nowrap; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .header-help:hover { background: var(--color-neutral-100); color: var(--color-navy); } .logo-img-dark { display: none; } .site-nav { display: flex; gap: var(--space-1); align-items: center; } .site-nav .mega-item { position: relative; } .mega-trigger, .site-nav-link { padding: 0.625rem 0.875rem; border-radius: var(--radius-md); font-weight: 500; color: var(--color-text); font-size: 0.9375rem; font-family: var(--font-sans); background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .mega-trigger:hover, .site-nav-link:hover, .mega-item.is-active .mega-trigger { background: var(--color-neutral-100); color: var(--color-navy); } .mega-trigger .chev { display: inline-block; font-size: 0.75rem; margin-inline-start: 2px; transition: transform var(--duration-fast) var(--ease-out); } .mega-item.is-active .mega-trigger .chev { transform: rotate(180deg); } /* ───── Mega menu panels ───── */ .mega-backdrop { /* Anchor to the header bottom (absolute, not fixed) so the overlay always starts exactly below the category nav row — regardless of the utility bar or scroll position. Fixed + viewport-top math used to tint the nav row. */ position: absolute; top: 100%; left: 0; right: 0; height: 100vh; background: rgba(15, 23, 42, 0.4); opacity: 0; pointer-events: none; transition: opacity var(--duration-normal) var(--ease-out); z-index: 1; } .site-header.is-mega-open .mega-backdrop { opacity: 1; pointer-events: auto; } .mega-panel { position: absolute; top: 100%; left: 0; right: 0; background: white; border-top: 1px solid var(--color-border); box-shadow: 0 16px 32px -8px rgba(15, 23, 42, 0.18); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s linear 220ms; z-index: 2; max-height: calc(100vh - var(--header-total)); overflow: auto; } .mega-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-spring), visibility 0s; } .mega-grid { display: grid; grid-template-columns: repeat(3, 1fr) 1.2fr; gap: var(--space-8); /* Each panel as short as its content allows; minimal vertical padding. */ padding-block: var(--space-5); align-items: start; } .mega-grid--2col { grid-template-columns: repeat(2, 1fr) 1.2fr; } .mega-col-title { font-size: 0.875rem; text-transform: none; font-weight: 700; color: var(--color-navy); margin: 0 0 var(--space-1); letter-spacing: -0.005em; } .mega-col-sub { font-size: 0.75rem; color: var(--color-text-faint); margin: 0 0 var(--space-3); font-weight: 500; } .mega-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; } .mega-col li a { display: flex; align-items: center; gap: var(--space-2); padding: 0.4375rem var(--space-2); margin-inline-start: -0.5rem; border-radius: var(--radius-md); font-size: 0.875rem; color: var(--color-text); transition: background 120ms var(--ease-out), color 120ms var(--ease-out), padding-inline-start 160ms var(--ease-out); position: relative; } .mega-col li a::after { content: '←'; font-size: 0.75rem; color: var(--color-blue); opacity: 0; margin-inline-start: auto; transition: opacity 120ms var(--ease-out), transform 160ms var(--ease-out); } .mega-col li a:hover { background: var(--color-mist); color: var(--color-navy); } .mega-col li a:hover::after { opacity: 1; transform: translateX(-2px); } .mega-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; } /* Mega promo card */ .mega-promo { background: var(--color-mist); border-radius: var(--radius-xl); padding: var(--space-5); position: relative; display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden; } .promo-tag { align-self: flex-start; background: var(--color-navy); color: white; font-size: 0.6875rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-full); } .promo-art { flex: 0 0 130px; height: 130px; min-height: 130px; background: white; border-radius: var(--radius-lg); display: grid; place-items: center; padding: var(--space-3); box-shadow: var(--shadow-sm); } .promo-art svg { width: auto; height: 100%; max-width: 100%; } .promo-text h5 { margin: 0 0 var(--space-1); font-size: 1rem; color: var(--color-navy); font-weight: 700; } .promo-text p { margin: 0 0 var(--space-3); font-size: 0.875rem; color: var(--color-text-muted); } .header-search { flex: 1; max-width: 620px; min-width: 0; position: relative; } .header-search input { width: 100%; height: 44px; padding-inline-start: 2.5rem; padding-inline-end: 1rem; border-radius: var(--radius-full); border: 1.5px solid var(--color-border); background: var(--color-neutral-50); font: inherit; font-size: 0.9375rem; transition: border var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .header-search input:focus { outline: none; border-color: var(--color-blue); background: white; box-shadow: var(--shadow-focus); } .header-search .ico { position: absolute; inset-inline-start: 0.875rem; top: 50%; transform: translateY(-50%); color: var(--color-text-faint); } .header-actions { display: flex; align-items: center; gap: 0.25rem; margin-inline-start: auto; } .action-divider { width: 1px; height: 34px; background: var(--color-border); margin-inline: 0.35rem; flex-shrink: 0; } .action-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 62px; padding: 0.4rem 0.55rem; border: 0; background: transparent; cursor: pointer; border-radius: var(--radius-md); color: var(--color-slate); transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .action-btn:hover { background: var(--color-neutral-100); color: var(--color-navy); } .action-ico { position: relative; display: inline-flex; } .action-label { font-size: 0.75rem; font-weight: 600; line-height: 1; white-space: nowrap; } .action-btn .badge { position: absolute; top: -6px; inset-inline-end: -8px; background: var(--color-danger); color: #fff; font-size: 0.6875rem; font-weight: 700; line-height: 1; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: transparent; border: 0; color: var(--color-text); transition: background var(--duration-fast) var(--ease-out); position: relative; } .icon-btn:hover { background: var(--color-neutral-100); } .icon-btn .badge { position: absolute; top: 4px; inset-inline-end: 4px; background: var(--color-danger); color: white; font-size: 0.6875rem; font-weight: 700; min-width: 18px; height: 18px; padding: 0 4px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; } @media (max-width: 900px) { .header-cats { display: none; } .mega-panel { display: none; } .action-btn[href="#help"], .action-divider { display: none; } } @media (max-width: 560px) { .header-search { display: none; } } /* ───── HERO — product mosaic + offer card (Vista-inspired) ───── */ .hero { position: relative; background: var(--color-mist); overflow: hidden; } /* full-bleed product mosaic strip */ .hero-mosaic { display: grid; grid-template-columns: repeat(6, 1fr); height: clamp(330px, 26vw, 362px); width: 100%; gap: 10px; padding: 10px; background: var(--color-mist); } .htile { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-2xl); } .htile--sky { background: var(--color-sky); } .htile--navy { background: var(--color-navy); } .htile--cream { background: var(--color-cream); } .htile--blue { background: #DCEBF8; } .htile--mist { background: #E7F0E9; } .htile-art { width: 80%; height: 80%; display: flex; align-items: center; justify-content: center; } .htile-art svg { width: 100%; height: 100%; } .htile image-slot { width: 100%; height: 100%; display: block; --islot-fb-pad: 10%; } .htile image-slot::part(frame) { background: rgba(27,58,107,0.05); } .htile--blue image-slot::part(ring) { border-color: rgba(27,58,107,0.3); } .industry-gallery > div image-slot { width: 100%; height: 100%; display: block; --islot-fb-pad: 12%; } .industry-gallery > div image-slot::part(frame) { background: transparent; } /* centered offer card */ .hero-offer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; width: clamp(620px, 56vw, 840px); max-width: calc(100% - 3rem); background: var(--color-navy); color: #fff; border-radius: var(--radius-2xl); padding: clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 4vw, 3rem); text-align: center; box-shadow: var(--shadow-xl), inset 0 0 0 1px rgba(255,255,255,0.06); } .offer-eyebrow { margin: 0 0 var(--space-2); font-size: clamp(0.9375rem, 1.4vw, 1.0625rem); color: var(--color-sky); font-weight: 500; } .offer-title { margin: 0 0 var(--space-2); font-size: clamp(1.625rem, 3.6vw, 2.375rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; } .offer-sub { margin: 0 auto var(--space-3); max-width: 54ch; font-size: clamp(0.9375rem, 1.3vw, 1.0625rem); line-height: 1.5; color: rgba(255,255,255,0.82); } .offer-code { margin: 0 0 var(--space-3); font-size: 1rem; font-weight: 600; } .offer-code span { display: inline-block; background: rgba(255,255,255,0.1); border: 1px dashed rgba(255,255,255,0.4); padding: 0.15rem 0.65rem; border-radius: var(--radius-sm); margin-inline-start: 0.4rem; letter-spacing: 0.08em; font-weight: 700; } .offer-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } .offer-btn { min-height: 44px; } .offer-btn--primary { background: #fff; color: var(--color-navy); border-color: #fff; } .offer-btn--primary:hover { background: var(--color-sky); border-color: var(--color-sky); transform: translateY(-1px); box-shadow: var(--shadow-md); } .offer-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); } .offer-btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.85); } /* ───── Assurance strip under the hero ───── */ .hero-assurance { background: #fff; border-bottom: 1px solid var(--color-border); } .assurance-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); padding-block: var(--space-6); } .assurance-item { display: flex; align-items: center; gap: var(--space-4); justify-content: center; } .assurance-icon { flex-shrink: 0; width: 54px; height: 54px; border-radius: var(--radius-full); background: var(--color-sky); color: var(--color-navy); display: grid; place-items: center; } .assurance-item h4 { margin: 0 0 2px; font-size: 1.0625rem; font-weight: 700; color: var(--color-text); } .assurance-item p { margin: 0; font-size: 0.9375rem; color: var(--color-text-muted); } /* ───── Hero responsive ───── */ @media (max-width: 1100px) { .hero-mosaic { grid-template-columns: repeat(4, 1fr); } .htile--hide-md { display: none; } } @media (max-width: 860px) { .assurance-grid { grid-template-columns: 1fr; gap: var(--space-4); } .assurance-item { justify-content: flex-start; } } @media (max-width: 720px) { .hero { padding-bottom: var(--space-10); } .hero-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; height: auto; aspect-ratio: 1 / 1; max-height: 420px; } .hero-offer { position: static; transform: none; width: auto; margin: -2.75rem var(--space-4) 0; border-radius: var(--radius-xl); } } /* ───── Curve transition ───── */ .curve-down { position: relative; height: 60px; margin-top: -60px; z-index: 2; background: var(--color-mist); border-start-start-radius: 40px; border-start-end-radius: 40px; } /* ───── Unbox story ───── */ .unbox-section { padding-block: clamp(4rem, 8vw, 7rem); background: var(--color-mist); text-align: center; position: relative; overflow: hidden; } .section-eyebrow { display: inline-block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; color: var(--color-blue); text-transform: uppercase; margin-bottom: var(--space-4); } .section-title { font-size: clamp(1.625rem, 3.5vw, 2.5rem); line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 var(--space-3); color: var(--color-neutral-900); } .section-sub { font-size: 1.0625rem; color: var(--color-text-muted); max-width: 38rem; margin: 0 auto var(--space-10); } .unbox-stage { position: relative; width: 100%; max-width: 920px; height: clamp(420px, 64vw, 640px); margin: 0 auto; } .unbox-stage svg { overflow: visible; } .unbox-stage .fly { opacity: 0; transform-box: fill-box; transform-origin: 450px 360px; } /* ───── Categories (horizontal carousel) ───── */ .cats-section { padding-block: clamp(1.5rem, 3vw, 3rem); background: white; } .cat-row { padding-block: clamp(0.875rem, 1.75vw, 1.5rem); } .cat-row .cats-head { margin-bottom: var(--space-5); } .cats-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-8); } .cats-head .section-title { margin: 0; } .cats-head-text { max-width: 760px; } .cats-sub { margin: var(--space-2) 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--color-slate); } .cats-controls { display: flex; align-items: center; gap: var(--space-4); } .cats-link { color: var(--color-blue); font-weight: 600; font-size: 0.9375rem; } .cats-link:hover { color: var(--color-blue-dark); } .cats-arrows { display: flex; gap: var(--space-2); } .cats-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--color-border); background: white; color: var(--color-navy); display: grid; place-items: center; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .cats-arrow:hover { background: var(--color-navy); border-color: var(--color-navy); color: white; } .cats-arrow:active { transform: scale(0.95); } .cats-arrow:disabled { opacity: 0.35; cursor: not-allowed; } .cats-arrow:disabled:hover { background: white; border-color: var(--color-border); color: var(--color-navy); } .cat-carousel-wrap { width: 100%; overflow: hidden; margin-top: var(--space-4); } .cat-carousel { display: flex; gap: var(--space-4); overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-inline: max(var(--space-6), calc((100vw - var(--container-max)) / 2 + var(--space-6))); padding-block: var(--space-3) var(--space-6); /* Hide scrollbar but keep functionality */ scrollbar-width: none; -ms-overflow-style: none; } .cat-carousel::-webkit-scrollbar { display: none; } .cat-tile { flex: 0 0 232px; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; color: var(--color-text); } /* ── Per-row uniform sizing (size differs row to row, matches reference) ── */ .cat-row[data-size="sm"] .cat-tile { flex-basis: 178px; } .cat-row[data-size="md"] .cat-tile { flex-basis: 232px; } .cat-row[data-size="lg"] .cat-tile { flex-basis: 352px; } .cat-tile-frame { width: 100%; aspect-ratio: 1 / 1; background: var(--color-cream); border-radius: var(--radius-2xl); display: grid; place-items: center; overflow: hidden; position: relative; transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out); } .cat-tile-frame svg { width: 84%; height: 84%; transition: transform var(--duration-slow) var(--ease-spring); } .cat-tile:hover .cat-tile-frame { background: var(--color-cream-dark); box-shadow: var(--shadow-lg); transform: translateY(-4px); } .cat-tile:hover .cat-tile-frame svg { transform: scale(1.05); } /* Row 1 category tiles are user-replaceable image slots wrapping the SVG icon */ .cat-tile-frame image-slot { width: 100%; height: 100%; display: block; --islot-fb-pad: 8%; } .cat-tile-frame image-slot::part(frame) { background: transparent; } .cat-tile-label { padding-inline: var(--space-1); } .cat-tile-label h3 { font-size: 1.0625rem; font-weight: 600; margin: 0; line-height: 1.4; color: var(--color-text); text-wrap: pretty; } /* ── Product card (name + price + fav) ── */ .cat-tile--product .cat-tile-frame { aspect-ratio: 1 / 1; } .cat-fav { position: absolute; top: 12px; inset-inline-end: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--color-slate); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-xs); z-index: 2; transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .cat-fav svg { width: 20px; height: 20px; } .cat-fav:hover { color: #E0567A; transform: scale(1.08); } .cat-fav.is-fav { color: #E0567A; } .cat-fav.is-fav svg { fill: #E0567A; } .cat-tile--product:hover .cat-fav { color: #E0567A; } .cat-tile--product .cat-tile-label { display: flex; flex-direction: column; gap: 3px; } .cat-price { font-size: 0.9375rem; font-weight: 700; color: var(--color-navy); } .cat-unit { font-size: 0.8125rem; color: var(--color-text-faint); } /* ── Photo card (Shop by collection — user drops a real photo) ── */ .cat-tile--photo, .cat-tile--ugc { cursor: pointer; } .cat-photo { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--radius-2xl); overflow: hidden; background: var(--color-cream); transition: box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); } .cat-tile--photo:hover .cat-photo, .cat-tile--ugc:hover .cat-photo { box-shadow: var(--shadow-lg); transform: translateY(-4px); } /* ── UGC card (Made by you — photo with @handle overlay) ── */ .cat-ugc { position: relative; } .cat-ugc-handle { position: absolute; bottom: 12px; inset-inline-start: 12px; padding: 5px 12px; border-radius: var(--radius-full); background: rgba(15, 23, 42, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: white; font-size: 0.8125rem; font-weight: 600; pointer-events: none; z-index: 2; } /* ── Tool card (title at top, label below) ── */ .cat-frame--tool { background: var(--color-mist); align-items: center; padding: var(--space-4); } .cat-frame--tool svg { width: 58%; height: 58%; margin: auto; } .cat-tool-top { position: absolute; top: var(--space-4); inset-inline-start: var(--space-4); font-size: 1rem; font-weight: 700; color: var(--color-text); z-index: 2; } .cat-tile--tool .cat-tile-label h3 { font-size: 0.9375rem; color: var(--color-slate); font-weight: 500; } @media (max-width: 768px) { .cat-row[data-size="sm"] .cat-tile { flex-basis: 144px; } .cat-row[data-size="md"] .cat-tile { flex-basis: 200px; } .cat-row[data-size="lg"] .cat-tile { flex-basis: 270px; } } /* ───── Industry showcase ───── */ .industry-section { padding-block: clamp(4rem, 7vw, 7rem); background: linear-gradient(180deg, var(--color-mist) 0%, var(--color-sky) 100%); } .industry-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; } @media (max-width: 900px) { .industry-grid { grid-template-columns: 1fr; } } .industry-text .section-title { color: var(--color-navy); } .industry-list { margin: var(--space-6) 0 var(--space-8); padding: 0; list-style: none; display: grid; gap: var(--space-3); } .industry-list li { display: flex; align-items: center; gap: var(--space-3); font-size: 1rem; color: var(--color-text); } .industry-list .tick { width: 28px; height: 28px; border-radius: 50%; background: var(--color-navy); color: white; display: grid; place-items: center; flex-shrink: 0; } .industry-gallery { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: var(--space-4); aspect-ratio: 1 / 0.9; } .industry-gallery > div { border-radius: var(--radius-xl); background: white; display: grid; place-items: center; box-shadow: var(--shadow-md); position: relative; overflow: hidden; transition: transform var(--duration-slow) var(--ease-out); } .industry-gallery > div:hover { transform: translateY(-4px) rotate(-1deg); } .industry-gallery > div:nth-child(1) { transform: rotate(-2deg); } .industry-gallery > div:nth-child(2) { transform: rotate(1.5deg); } .industry-gallery > div:nth-child(3) { transform: rotate(1deg); } .industry-gallery > div:nth-child(4) { transform: rotate(-1.5deg); } /* ───── How it works ───── */ .how-section { padding-block: clamp(4rem, 7vw, 7rem); background: white; text-align: center; } .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-12); position: relative; } @media (max-width: 800px) { .how-grid { grid-template-columns: 1fr; } } .how-grid::before { content: ''; position: absolute; top: 56px; left: 16.66%; right: 16.66%; height: 2px; background: repeating-linear-gradient(90deg, var(--color-sky-dark) 0 8px, transparent 8px 16px); } @media (max-width: 800px) { .how-grid::before { display: none; } } .how-step { position: relative; z-index: 1; padding: var(--space-5); text-align: center; } .how-num { width: 112px; height: 112px; border-radius: 50%; background: white; border: 2px solid var(--color-sky-dark); margin: 0 auto var(--space-5); display: grid; place-items: center; font-size: 2.5rem; font-weight: 800; color: var(--color-navy); font-style: italic; position: relative; transition: transform var(--duration-slow) var(--ease-spring), background var(--duration-slow) var(--ease-out); } .how-step:hover .how-num { transform: rotate(-6deg) scale(1.05); background: var(--color-sky); } .how-num .icon { position: absolute; bottom: -8px; inset-inline-end: -8px; background: var(--color-navy); color: white; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow-sm); } .how-step h3 { font-size: 1.25rem; margin: 0 0 var(--space-2); } .how-step p { color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.6; max-width: 16rem; margin: 0 auto; } /* ───── Trust strip ───── */ .trust-section { padding-block: clamp(3rem, 6vw, 5rem); background: var(--color-mist); } .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } @media (max-width: 800px) { .trust-grid { grid-template-columns: 1fr; } } .trust-card { background: white; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-6); display: flex; gap: var(--space-4); align-items: flex-start; transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); } .trust-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .trust-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--color-sky); color: var(--color-navy); display: grid; place-items: center; } .trust-card h4 { font-size: 1.0625rem; margin: 0 0 var(--space-1); } .trust-card p { font-size: 0.875rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; } /* ───── Final CTA ───── */ .final-cta { padding-block: clamp(4rem, 7vw, 7rem); background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(123,192,238,0.18), transparent 60%), linear-gradient(180deg, #14305B 0%, #0E2347 100%); color: white; text-align: center; position: relative; overflow: hidden; } .final-cta::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 75%); } .final-cta > * { position: relative; z-index: 1; } .final-cta h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--space-4); text-wrap: balance; } .final-cta h2 em { font-style: italic; color: #7BC0EE; } .final-cta p { color: rgba(255,255,255,0.7); margin: 0 auto var(--space-8); max-width: 38rem; } .final-cta .btn-primary { background: white; color: var(--color-navy); border-color: white; } .final-cta .btn-primary:hover { background: var(--color-sky); border-color: var(--color-sky); } /* ───── Footer ───── */ .site-footer { background: var(--color-neutral-900); color: var(--color-neutral-300); padding-block: var(--space-12) var(--space-6); } .foot-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: var(--space-8); } @media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } } .foot-brand p { color: var(--color-neutral-400); font-size: 0.9375rem; line-height: 1.6; margin: var(--space-4) 0 var(--space-5); max-width: 22rem; } .foot-col h4 { color: white; font-size: 0.9375rem; margin: 0 0 var(--space-4); } .foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); } .foot-col a { color: var(--color-neutral-400); font-size: 0.875rem; transition: color var(--duration-fast) var(--ease-out); } .foot-col a:hover { color: white; } .foot-bottom { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-neutral-800); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); font-size: 0.8125rem; color: var(--color-neutral-500); } .foot-socials { display: flex; gap: var(--space-2); } .foot-socials a { width: 36px; height: 36px; border-radius: 50%; background: var(--color-neutral-800); color: var(--color-neutral-400); display: grid; place-items: center; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .foot-socials a:hover { background: var(--color-navy); color: white; } /* ───── Reveal-on-scroll utility ───── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); } .reveal.is-in { opacity: 1; transform: translateY(0); } .reveal-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); } .reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); } .reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger.is-in > *:nth-child(2) { transition-delay: 80ms; } .reveal-stagger.is-in > *:nth-child(3) { transition-delay: 160ms; } .reveal-stagger.is-in > *:nth-child(4) { transition-delay: 240ms; } .reveal-stagger.is-in > *:nth-child(5) { transition-delay: 320ms; } .reveal-stagger.is-in > *:nth-child(6) { transition-delay: 400ms; } .reveal-stagger.is-in > *:nth-child(7) { transition-delay: 480ms; } .reveal-stagger.is-in > *:nth-child(8) { transition-delay: 560ms; }