/* ============================================================================= KuDor public site - one type system, one rhythm, one colour set. Loaded after the page stylesheets (kudor-landing.css, kudor-client.css), so it only restates the tokens and the sizes that make the pages read as one product: a single family (IBM Plex Sans Arabic) with weight for contrast, a type scale, a 64px section rhythm, a 1240px column and quieter shadows. The dark theme keeps its own tokens. ============================================================================= */ /* ---- colour: the light theme only ------------------------------------------------------------------------------------ */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F6F8F5; --surface-3: #ECF0EA; --ink: #17211B; --muted: #55625A; --faint: #7B877F; --brand: #466442; --brand-2: #5D7E58; --brand-deep: #324A2F; --brand-soft: #E8EEE6; --gold: #8F666C; --gold-2: #C3A894; --gold-soft: #F1E8E5; --border: #E3E9E3; --border-soft: #EEF2EE; --shadow: 0 18px 40px -26px rgba(20, 40, 28, .26); --shadow-sm: 0 10px 24px -18px rgba(20, 40, 28, .24); } } :root[data-theme="light"] { --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #F6F8F5; --surface-3: #ECF0EA; --ink: #17211B; --muted: #55625A; --faint: #7B877F; --brand: #466442; --brand-2: #5D7E58; --brand-deep: #324A2F; --brand-soft: #E8EEE6; --gold: #8F666C; --gold-2: #C3A894; --gold-soft: #F1E8E5; --border: #E3E9E3; --border-soft: #EEF2EE; --shadow: 0 18px 40px -26px rgba(20, 40, 28, .26); --shadow-sm: 0 10px 24px -18px rgba(20, 40, 28, .24); } /* ---- type: one family, a scale ----------------------------------------------------------------------------------------- */ :root { --dsp: "IBM Plex Sans Arabic", "Tajawal", "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif; --body: "IBM Plex Sans Arabic", "Tajawal", "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif; --maxw: 1240px; } html { font-size: 16px; } body { font-size: 16px; line-height: 1.8; font-weight: 400; font-feature-settings: "tnum" 0; } h1, h2, h3, h4 { font-weight: 700; letter-spacing: 0; text-wrap: balance; } h1, .hero h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.22; font-weight: 700; } h2, .head h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.3; font-weight: 700; } h3 { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.4; font-weight: 600; } h4 { font-size: 17px; line-height: 1.45; font-weight: 600; } p, li { font-size: 16px; } .hero-sub { font-size: 18px; line-height: 1.85; } .head p { font-size: 17px; line-height: 1.8; } .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; } .btn { font-size: 15px; font-weight: 600; padding: 13px 24px; border-radius: 12px; } small { font-size: 13px; } .nav-links a { font-size: 15px; font-weight: 500; } .hero h1 .hl { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--brand); } /* figures keep their weight but not the display size of a headline */ .stat b, .hero-stats b, .about-stats b { font-weight: 700; } .plan .amt { font-size: 38px; font-weight: 700; } /* ---- rhythm ------------------------------------------------------------------------------------------------------------ */ @media (min-width: 901px) { section { padding: 64px 0; } .head { margin-bottom: 36px; max-width: 700px; } .hero { padding: 56px 0 64px; } .showcase { padding-bottom: 56px; } .stats-band { padding: 56px 0; } .contact-sec { padding: 64px 0; } } @media (max-width: 900px) { section { padding: 48px 0; } .head { margin-bottom: 28px; } .hero { padding: 36px 0 44px; } .wrap { padding-inline: 20px; } } /* ---- surfaces: smaller radii, quieter lift ------------------------------------------------------------------------------ */ .mode, .plan, .salon-card, .hl, .echip, .faq-item, .contact-card, .pv, .stat, .tst, .type-card { border-radius: 14px; } .mode:hover, .salon-card:hover, .plan:hover { transform: translateY(-3px); } .hero-shot, .pv-visual .pv-shot { border-radius: 12px; } /* ---- photographs: one treatment ------------------------------------------------------------------------------------------ */ .salon-card .ph-img, .type-card .ph-img, .about .scene, .cascade .shot { object-fit: cover; } /* `.hl` names both the highlighted words of the hero headline and the app-highlight cards: the headline words took the card's box. */ .hero h1 .hl { display: inline; padding: 0; border: 0; background: none; border-radius: 0; box-shadow: none; gap: 0; transition: none; transform: none; color: var(--brand); } /* phones: no empty block above the dashboard picture, and the hero buttons share the width instead of wrapping their words */ @media (max-width: 900px) { .hero-visual { min-height: 0; } } @media (max-width: 480px) { .hero-cta { flex-direction: column; align-items: stretch; } .hero-cta .btn { justify-content: center; width: 100%; } } /* ============================================================================= Page structure borrowed from how good product sites are laid out: a confident headline, plain promises right under it, the problem named before the solution, and a short numbered path to start. ============================================================================= */ /* ---- hero: a bigger headline and the reasons to start under the buttons ---------------------------------------------------- */ .hero h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.15; } .hero-sub { max-width: 46ch; } .hero-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; } .hero-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); font-weight: 500; } .hero-points li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23466442' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; flex: 0 0 auto; } /* ---- four plain promises ------------------------------------------------------------------------------------------------- */ section.trust-strip { padding: 0 0 8px; overflow: visible; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); margin-top: -34px; position: relative; z-index: 2; } .trust-item { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px; } .trust-item + .trust-item { border-inline-start: 1px solid var(--border); } .trust-item .ti { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: 0 0 auto; } .trust-item b { display: block; font-size: 16px; font-weight: 600; } .trust-item p { font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: 3px; } /* ---- the problem ---------------------------------------------------------------------------------------------------------- */ .problem-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: center; } .problem-intro h2 { margin-top: 12px; } .problem-intro p { color: var(--muted); font-size: 17px; margin: 14px 0 24px; max-width: 42ch; } .problem-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .problem { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; } .problem .pn { font-size: 13px; font-weight: 600; color: var(--gold); } .problem p { font-size: 15.5px; line-height: 1.7; color: var(--ink); font-weight: 500; } /* ---- a short numbered path ----------------------------------------------------------------------------------------------- */ .steps-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; } .steps-line::before { content: ""; position: absolute; top: 21px; inset-inline: 10%; height: 2px; background: var(--border); } .steps-line li { position: relative; text-align: center; } .steps-line .sn { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; margin: 0 auto 16px; font-weight: 700; font-size: 17px; position: relative; box-shadow: 0 0 0 6px var(--bg); } .steps-line h3 { font-size: 17px; font-weight: 600; } .steps-line p { font-size: 14.5px; line-height: 1.75; color: var(--muted); margin-top: 6px; } @media (max-width: 1000px) { .trust-grid { grid-template-columns: 1fr 1fr; } .trust-item:nth-child(3) { border-inline-start: 0; } .trust-item:nth-child(n + 3) { border-top: 1px solid var(--border); } .problem-grid { grid-template-columns: 1fr; gap: 28px; } } @media (max-width: 700px) { .trust-grid { grid-template-columns: 1fr; margin-top: -20px; } .trust-item + .trust-item { border-inline-start: 0; border-top: 1px solid var(--border); } .problem-list { grid-template-columns: 1fr; } .steps-line { grid-template-columns: 1fr; gap: 22px; } .steps-line::before { display: none; } .steps-line li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; text-align: start; } .steps-line .sn { grid-row: 1 / span 2; margin: 0; } } /* the product picture leads the hero: a larger share of the width */ @media (min-width: 1001px) { .hero-grid { grid-template-columns: .92fr 1.08fr; gap: 40px; } .hero-shot { max-width: 720px; } } /* ============================================================================= A fuller first screen and purposeful motion ============================================================================= */ /* wide monitors: the column grows with the screen instead of leaving a wide empty band on each side */ @media (min-width: 1500px) { :root { --maxw: 1400px; } } @media (min-width: 1800px) { :root { --maxw: 1560px; } .hero h1 { font-size: 68px; } .hero-sub { font-size: 20px; } body { font-size: 17px; } } /* hero composition: the dashboard leads, the staff app overlaps it, a faint grid sits behind */ .hero { background-image: radial-gradient(color-mix(in oklab, var(--brand) 14%, transparent) 1px, transparent 1.4px), radial-gradient(900px 420px at 80% -8%, var(--brand-soft), transparent 64%); background-size: 26px 26px, auto; padding: 44px 0 80px; } .hero-grid { gap: 28px; align-items: center; } .hero-visual { min-height: 0; perspective: 1500px; padding-block: 12px 28px; } .hero-shot { max-width: none; width: 100%; transform: rotateY(5deg) rotateX(2deg); transform-origin: center; transition: transform .7s cubic-bezier(.2, .8, .2, 1); } .hero-visual:hover .hero-shot { transform: none; } .hero-dev--overlap { position: absolute; width: 168px; right: -6px; bottom: -6px; transform: rotate(5deg); z-index: 5; border-radius: 30px; padding: 7px; animation: kdFloat 7s ease-in-out infinite; } .hero-dev--overlap .scr { border-radius: 24px; } .hero-dev--overlap .notch { top: 13px; width: 62px; height: 16px; border-radius: 0 0 11px 11px; } @media (max-width: 1000px) { .hero-dev--overlap { display: none; } .hero-shot { transform: none; } } /* load: the hero's pieces arrive one after the other, the picture last */ @keyframes kdUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes kdTilt { from { opacity: 0; transform: translateY(30px) rotateY(0) scale(.97); } to { opacity: 1; transform: rotateY(5deg) rotateX(2deg); } } @keyframes kdMark { to { background-size: 100% .2em; } } @keyframes kdFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } } @keyframes kdPulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } } .hero .hero-pill, .hero h1, .hero-sub, .hero-cta, .hero-points, .hero-stats { animation: kdUp .7s cubic-bezier(.2, .8, .2, 1) backwards; } .hero .hero-pill { animation-delay: .05s; } .hero h1 { animation-delay: .12s; } .hero-sub { animation-delay: .22s; } .hero-cta { animation-delay: .3s; } .hero-points { animation-delay: .38s; } .hero-stats { animation-delay: .46s; } .hero-shot { animation: kdTilt .95s .25s cubic-bezier(.2, .8, .2, 1) backwards; } .hero-pill .dot { animation: kdPulse 2.2s ease-out infinite; border-radius: 50%; } /* the highlighted words are marked, not boxed or gradient-filled */ .hero h1 .hl { background-image: linear-gradient(color-mix(in oklab, var(--gold-2) 70%, transparent), color-mix(in oklab, var(--gold-2) 70%, transparent)); background-repeat: no-repeat; background-position: 100% 92%; background-size: 0 .2em; animation: kdMark .9s .8s cubic-bezier(.3, .7, .2, 1) forwards; padding-inline: .08em; } /* cards and buttons answer the hand */ .btn svg { transition: transform .25s; } .btn-primary:hover svg { transform: translateX(-4px); } :root[dir="ltr"] .btn-primary:hover svg { transform: translateX(4px); } .trust-item .ti { transition: background .3s, color .3s, transform .3s; } .trust-item:hover .ti { background: var(--brand); color: #fff; transform: translateY(-2px); } .problem { transition: transform .3s, border-color .3s, box-shadow .3s; } .problem:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); box-shadow: var(--shadow-sm); } /* entering on scroll: siblings follow one another */ .trust-grid > .reveal:nth-child(2), .problem-list > .reveal:nth-child(2), .steps-line > .reveal:nth-child(2) { transition-delay: .08s; } .trust-grid > .reveal:nth-child(3), .problem-list > .reveal:nth-child(3), .steps-line > .reveal:nth-child(3) { transition-delay: .16s; } .trust-grid > .reveal:nth-child(4), .problem-list > .reveal:nth-child(4), .steps-line > .reveal:nth-child(4) { transition-delay: .24s; } .problem-list > .reveal:nth-child(5), .steps-line > .reveal:nth-child(5) { transition-delay: .32s; } .problem-list > .reveal:nth-child(6) { transition-delay: .4s; } /* the path draws itself and its numbers pop in */ .steps-line::before { transform: scaleX(0); transform-origin: right; transition: transform 1.2s cubic-bezier(.3, .7, .2, 1) .15s; } .steps-line:has(li.in)::before { transform: scaleX(1); } :root[dir="ltr"] .steps-line::before { transform-origin: left; } .steps-line .sn { transform: scale(.5); opacity: 0; transition: transform .55s cubic-bezier(.2, 1.5, .3, 1), opacity .4s; } .steps-line li.in .sn { transform: none; opacity: 1; } .steps-line li:nth-child(2) .sn { transition-delay: .12s; } .steps-line li:nth-child(3) .sn { transition-delay: .24s; } .steps-line li:nth-child(4) .sn { transition-delay: .36s; } .steps-line li:nth-child(5) .sn { transition-delay: .48s; } @media (max-width: 700px) { .steps-line::before { display: none; } } @media (prefers-reduced-motion: reduce) { .hero *, .steps-line *, .trust-item *, .problem { animation: none !important; transition: none !important; } .steps-line::before { transform: none; } .steps-line .sn { transform: none; opacity: 1; } .hero h1 .hl { background-size: 100% .2em; } } /* ============================================================================= Modules (the dashboard's own sections as a marketing grid) and the plans ============================================================================= */ .modules .head { max-width: 760px; } .mod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .mod { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px; transition: transform .3s, border-color .3s, box-shadow .3s; } .mod .mi { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; margin-bottom: 14px; transition: background .3s, color .3s, transform .3s; } .mod h3 { font-size: 17px; font-weight: 600; } .mod p { font-size: 14.5px; line-height: 1.75; color: var(--muted); margin-top: 6px; } .mod:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); box-shadow: var(--shadow-sm); } .mod:hover .mi { background: var(--brand); color: #fff; transform: translateY(-2px); } .mod-grid > .reveal:nth-child(4n+2) { transition-delay: .07s; } .mod-grid > .reveal:nth-child(4n+3) { transition-delay: .14s; } .mod-grid > .reveal:nth-child(4n+4) { transition-delay: .21s; } .mod-banner { margin-top: 22px; background: var(--brand-deep); color: #fff; border-radius: 16px; padding: 28px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .mod-banner b { font-size: 20px; font-weight: 600; display: block; } .mod-banner p { color: #CFE0CC; font-size: 15px; margin-top: 4px; max-width: 60ch; } .mod-banner .btn-primary { background: #fff; color: var(--brand-deep); box-shadow: none; flex: 0 0 auto; } @media (max-width: 1100px) { .mod-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .mod-grid { grid-template-columns: 1fr 1fr; } .mod-banner { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .mod-grid { grid-template-columns: 1fr; } } /* the riyal sign: after the figure in Arabic, before it in English */ .sar::before { content: "\20C1"; font-weight: inherit; font-size: .8em; margin-inline-start: .2em; } html.no-sar .sar::before { content: "ر.س"; font-size: .55em; margin-inline-start: .3em; } .sar-num { display: inline-flex; align-items: baseline; white-space: nowrap; } :root[dir="ltr"] .sar-num { flex-direction: row-reverse; } :root[dir="ltr"] .sar::before { margin-inline-start: 0; margin-inline-end: .2em; } /* plans: equal cards, the features fill the card, the price reads at a glance */ .price-grid { align-items: stretch; gap: 20px; } .plan { display: flex; flex-direction: column; position: relative; padding: 30px 28px; } .plan .badge { align-self: flex-start; } .plan h3 { margin-top: 14px; font-size: 22px; } .plan .desc { min-height: 0; margin-top: 6px; } .plan .amt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 2px; font-size: 40px; font-weight: 700; line-height: 1.1; } .plan .amt small { font-size: 15px; font-weight: 500; color: var(--faint); } .amt-sub { font-size: 14px; color: var(--muted); min-height: 22px; } .plan ul { flex: 1; margin: 20px 0 26px; padding: 18px 0 0; border-top: 1px solid var(--border); list-style: none; display: grid; gap: 11px; align-content: start; } .plan ul li { display: flex; align-items: center; gap: 10px; font-size: 15px; } .plan .ribbon { position: absolute; top: -13px; inset-inline-end: 24px; background: var(--brand); color: #fff; font-size: 12.5px; font-weight: 600; padding: 5px 14px; border-radius: 999px; } .plan.pop { border-color: var(--brand); box-shadow: var(--shadow); } .plan.pop .amt { color: var(--brand); } .plan ul li.more { color: var(--brand); font-weight: 600; font-size: 14px; padding-inline-start: 2px; } /* ── geometric decoration: rings, diamonds, dot fields (all aria-hidden, never carry meaning) ── */ .flow-sec, .modules, .pricing-dark { position: relative; overflow: hidden; isolation: isolate; } .flow-sec > .wrap, .modules > .wrap, .pricing-dark > .wrap { position: relative; z-index: 1; } .geo { position: absolute; z-index: 0; pointer-events: none; display: block; } .geo-ring { width: 420px; height: 420px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--brand) 30%, transparent); inset-block-start: -150px; inset-inline-end: -120px; box-shadow: 0 0 0 46px color-mix(in oklab, var(--brand) 5%, transparent), 0 0 0 92px color-mix(in oklab, var(--brand) 3%, transparent); animation: kdSpin 80s linear infinite; } .geo-ring--b { width: 300px; height: 300px; inset-block: auto -110px; inset-inline: -90px auto; } .geo-diamond { width: 150px; height: 150px; border: 1px solid color-mix(in oklab, var(--brand) 28%, transparent); transform: rotate(45deg); inset-block-end: 12%; inset-inline-start: 4%; border-radius: 14px; background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 9%, transparent), transparent 70%); animation: kdFloat 9s ease-in-out infinite; } .geo-tri { width: 0; height: 0; border-inline: 46px solid transparent; border-block-end: 80px solid color-mix(in oklab, var(--gold-2) 22%, transparent); inset-block-start: 22%; inset-inline-start: 7%; animation: kdFloat 11s ease-in-out infinite reverse; } .geo-dots { width: 190px; height: 130px; inset-block-start: 40px; inset-inline-start: 3%; background-image: radial-gradient(color-mix(in oklab, var(--brand) 40%, transparent) 1.6px, transparent 1.8px); background-size: 20px 20px; opacity: .7; -webkit-mask-image: linear-gradient(135deg, #000, transparent 85%); mask-image: linear-gradient(135deg, #000, transparent 85%); } @keyframes kdSpin { to { transform: rotate(360deg); } } /* ── the journey: five connected steps and a line that returns ── */ .flow-sec { background: radial-gradient(900px 420px at 85% 0%, color-mix(in oklab, var(--brand) 10%, transparent), transparent 70%), radial-gradient(700px 380px at 5% 100%, color-mix(in oklab, var(--gold-2) 14%, transparent), transparent 70%), var(--bg); } .flow { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: fl; } .fnode { position: relative; text-align: center; padding: 0 12px; } .fdot { position: relative; z-index: 1; width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--brand-2), var(--brand-deep)); box-shadow: 0 14px 28px -14px color-mix(in oklab, var(--brand-deep) 70%, transparent); transform: rotate(0); transition: transform .35s, border-radius .35s; } .fnode:nth-child(even) .fdot { border-radius: 50%; background: linear-gradient(145deg, var(--gold-2), var(--gold)); } .fnode:nth-child(3) .fdot { border-radius: 20px 6px 20px 6px; } .fnode:hover .fdot { transform: translateY(-4px) rotate(-4deg); } .fdot b { position: absolute; inset-block-start: -8px; inset-inline-end: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 12px; font-weight: 700; display: grid; place-items: center; border: 1px solid var(--border); } .fnode:not(:last-child)::after { content: ""; position: absolute; z-index: 0; inset-block-start: 34px; inset-inline-start: calc(50% + 46px); width: calc(100% - 92px); height: 2px; background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--brand) 55%, transparent) 0 8px, transparent 8px 16px); animation: kdDash 1s linear infinite; } .fnode h3 { font-size: 18px; font-weight: 600; } .fnode p { font-size: 14.5px; line-height: 1.75; color: var(--muted); margin: 6px auto 0; max-width: 26ch; } .fchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; } .fchips em { font-style: normal; font-size: 12.5px; padding: 4px 11px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); border: 1px solid color-mix(in oklab, var(--brand) 18%, transparent); } .flow-loop { position: relative; margin: 34px 10% 0; height: 56px; border: 2px dashed color-mix(in oklab, var(--brand) 45%, transparent); border-block-start: 0; border-radius: 0 0 40px 40px; } .flow-loop::before, .flow-loop::after { content: ""; position: absolute; inset-block-start: -2px; width: 0; height: 0; border-inline: 6px solid transparent; border-block-end: 9px solid color-mix(in oklab, var(--brand) 70%, transparent); transform: translateY(-100%); } .flow-loop::before { inset-inline-start: -7px; } .flow-loop span { position: absolute; inset-block-end: -15px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 90%; background: var(--bg); padding: 4px 18px; font-size: 14.5px; font-weight: 600; color: var(--brand-deep); border-radius: 999px; border: 1px solid color-mix(in oklab, var(--brand) 25%, var(--border)); } .flow-sec { padding-block-end: 84px; } @keyframes kdDash { to { background-position: 16px 0; } } @keyframes kdDashY { to { background-position: 0 16px; } } @media (max-width: 900px) { .flow { grid-template-columns: 1fr; gap: 26px; position: relative; } .fnode { display: grid; grid-template-columns: 68px 1fr; column-gap: 18px; text-align: start; padding: 0; align-items: start; } .fnode .fdot { grid-row: 1 / span 3; margin: 0; } .fnode p { margin: 6px 0 0; max-width: none; } .fchips { justify-content: flex-start; } .fnode:not(:last-child)::after { inset-block-start: 72px; inset-inline-start: 33px; width: 2px; height: calc(100% - 46px); background: repeating-linear-gradient(180deg, color-mix(in oklab, var(--brand) 55%, transparent) 0 8px, transparent 8px 16px); animation: kdDashY 1s linear infinite; } .flow-loop { display: none; } .flow-sec { padding-block-end: 56px; } .geo-ring { width: 260px; height: 260px; } } /* ── modules: a quiet gradient wash behind the grid, and a livelier banner ── */ .modules { background: linear-gradient(180deg, var(--bg), color-mix(in oklab, var(--brand-soft) 55%, var(--bg)) 100%); } .mod-banner { position: relative; overflow: hidden; background: linear-gradient(120deg, #2F4430 0%, #3C5138 45%, #5C7A56 100%); } .mod-banner::before { content: ""; position: absolute; inset-block: -60% auto; inset-inline-end: -40px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 0 0 36px rgba(255,255,255,.04); } .mod-banner > * { position: relative; } /* ── pricing: a deep green field with shapes, the cards lift off it ── */ .pricing-dark { background: radial-gradient(1000px 520px at 85% -10%, rgba(156,190,149,.28), transparent 65%), radial-gradient(800px 480px at 0% 110%, rgba(195,168,148,.18), transparent 65%), linear-gradient(160deg, #3A5236 0%, #263A26 50%, #172419 100%); color: #fff; } .pricing-dark .geo-ring { border-color: rgba(255,255,255,.2); box-shadow: 0 0 0 46px rgba(255,255,255,.03), 0 0 0 92px rgba(255,255,255,.02); } .pricing-dark .geo-diamond { border-color: rgba(255,255,255,.22); background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 70%); } .pricing-dark .geo-tri { border-block-end-color: rgba(195,168,148,.28); } .pricing-dark .geo-dots { background-image: radial-gradient(rgba(255,255,255,.5) 1.6px, transparent 1.8px); inset-block-start: auto; inset-block-end: 50px; inset-inline-start: auto; inset-inline-end: 4%; } .pricing-dark .head h2 { color: #fff; } .pricing-dark .head p { color: #CFE0CC; } .pricing-dark .eyebrow { color: #E6D6C8; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); } .pricing-dark .plan { box-shadow: 0 30px 60px -28px rgba(0,0,0,.55); border-color: transparent; } .pricing-dark .plan.pop { box-shadow: 0 0 0 3px rgba(156,190,149,.6), 0 36px 70px -26px rgba(0,0,0,.6); transform: translateY(-8px); } .pricing-dark .plan.pop:hover { transform: translateY(-11px); } .pricing-dark .plan .ribbon { background: linear-gradient(120deg, var(--gold), var(--gold-2)); color: #fff; } @media (max-width: 900px) { .pricing-dark .plan.pop { transform: none; } .pricing-dark .plan.pop:hover { transform: translateY(-3px); } } @media (prefers-reduced-motion: reduce) { .geo, .fnode::after { animation: none !important; } } .pricing-dark .plan { color: var(--ink); } .pricing-dark .plan h3 { color: var(--ink); } /* services strip: whole pictures on rounded tiles, two rails drifting in opposite directions */ #services-strip { display: grid; gap: 22px; padding-block: 34px; } #services-strip .smarq-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } #services-strip .smarq { gap: 18px; padding: 8px 18px; animation-duration: 70s; } #services-strip .smarq--rev { animation-direction: reverse; } #services-strip .sv { width: 156px; } #services-strip .sv .circ { width: 156px; height: 156px; border-radius: 22px; margin-bottom: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } #services-strip .sv .circ img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; transition: transform .5s; } #services-strip .sv:hover .circ { transform: translateY(-5px); } #services-strip .sv:hover .circ img { transform: scale(1.08); } #services-strip .sv .nm { font-size: 14px; line-height: 1.5; font-weight: 600; white-space: normal; padding-inline: 4px; } @media (max-width: 600px) { #services-strip .sv { width: 124px; } #services-strip .sv .circ { width: 124px; height: 124px; border-radius: 18px; } #services-strip .smarq { gap: 14px; } } @media (prefers-reduced-motion: reduce) { #services-strip .smarq { animation: none; } #services-strip .smarq-wrap { overflow-x: auto; } } /* ── ways of serving: three emblems (circle, hexagon, diamond) hung on one dashed line ── */ #modes { position: relative; overflow: hidden; background: radial-gradient(800px 360px at 50% 0%, color-mix(in oklab, var(--brand) 9%, transparent), transparent 70%), var(--surface-2); } #modes .modes { position: relative; gap: 24px; margin-top: 56px; align-items: stretch; } #modes .modes::before { content: ""; position: absolute; inset-inline: 8%; inset-block-start: -2px; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--brand) 55%, transparent) 0 8px, transparent 8px 16px); animation: kdDash 1s linear infinite; } #modes .mode { text-align: center; padding: 78px 26px 28px; border-radius: 22px; display: flex; flex-direction: column; align-items: center; } #modes .mode::after { content: ""; position: absolute; inset-block-end: -60px; inset-inline-end: -60px; width: 170px; height: 170px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent); box-shadow: 0 0 0 26px color-mix(in oklab, var(--brand) 4%, transparent); pointer-events: none; } #modes .mode .ico { position: absolute; inset-block-start: -50px; inset-inline: 0; margin: 0 auto; width: 100px; height: 100px; border-radius: 50%; box-shadow: 0 0 0 8px var(--surface-2), 0 0 0 9px color-mix(in oklab, var(--brand) 30%, transparent), 0 20px 34px -16px color-mix(in oklab, var(--brand-deep) 60%, transparent); transition: transform .4s; } #modes .mode .ico svg { width: 36px; height: 36px; } #modes .mode:nth-child(2) .ico { border-radius: 0; clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); box-shadow: none; width: 108px; height: 108px; inset-block-start: -54px; } #modes .mode:nth-child(3) .ico { border-radius: 16px; transform: rotate(45deg); width: 82px; height: 82px; inset-block-start: -41px; } #modes .mode:nth-child(3) .ico svg { transform: rotate(-45deg); } #modes .mode:nth-child(3):hover .ico { transform: rotate(135deg); } #modes .mode:nth-child(3):hover .ico svg { transform: rotate(-135deg); } #modes .mode:hover .ico { transform: translateY(-4px) scale(1.05); } #modes .mode:nth-child(3):hover .ico { transform: rotate(135deg) scale(1.05); } #modes .mode:nth-child(3) .ico, #modes .mode:nth-child(3) .ico svg { transition: transform .5s; } #modes .mode h3 { font-size: 21px; } #modes .mode p { max-width: 34ch; } #modes .mode .k { margin-top: auto; padding: 7px 16px; border-radius: 999px; background: var(--brand-soft); font-size: 13.5px; } #modes .mode p + .k { margin-top: 16px; } @media (max-width: 900px) { #modes .modes { gap: 70px; margin-top: 64px; } #modes .modes::before { display: none; } } #modes .mode { overflow: visible; background: radial-gradient(circle at 100% 100%, color-mix(in oklab, var(--brand) 9%, transparent) 0 64px, transparent 65px), radial-gradient(circle at 100% 100%, transparent 0 88px, color-mix(in oklab, var(--brand) 5%, transparent) 89px 112px, transparent 113px), var(--surface); } #modes .mode::after { display: none; } #modes .mode .ico svg { width: 44px; height: 44px; } /* services strip: smaller tiles */ #services-strip { gap: 14px; padding-block: 26px; } #services-strip .sv { width: 120px; } #services-strip .sv .circ { width: 120px; height: 120px; border-radius: 18px; } #services-strip .sv .nm { font-size: 13px; } @media (max-width: 600px) { #services-strip .sv { width: 100px; } #services-strip .sv .circ { width: 100px; height: 100px; border-radius: 15px; } #services-strip .sv .nm { font-size: 12.5px; } } /* ── systems: every panel stays in the page, stacked in one cell, and the chosen one eases in ── */ .fx-preview { display: grid; } .fx-preview .pv { grid-area: 1 / 1; animation: none; transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .fx-preview .pv.is-hidden { display: block; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(16px) scale(.985); transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s; } .pv .pv-info > *, .pv .pv-visual { transition: opacity .5s ease, transform .65s cubic-bezier(.2,.7,.2,1); } .pv.is-hidden .pv-info > * { opacity: 0; transform: translateY(14px); transition-duration: .2s; } .pv.is-hidden .pv-visual { opacity: 0; transform: translateY(22px) scale(.95); transition-duration: .2s; } .pv:not(.is-hidden) .pv-info > :nth-child(1) { transition-delay: .05s; } .pv:not(.is-hidden) .pv-info > :nth-child(2) { transition-delay: .1s; } .pv:not(.is-hidden) .pv-info > :nth-child(3) { transition-delay: .15s; } .pv:not(.is-hidden) .pv-info > :nth-child(4) { transition-delay: .2s; } .pv:not(.is-hidden) .pv-info > :nth-child(5) { transition-delay: .26s; } .pv:not(.is-hidden) .pv-visual { transition-delay: .12s; } .pv-visual .pv-shot { transition: transform .8s cubic-bezier(.2,.7,.2,1); } .pv:not(.is-hidden) .pv-visual .pv-shot { animation: kdShot 6s ease-out both; } @keyframes kdShot { from { transform: scale(1.04); } to { transform: scale(1); } } .tab { overflow: hidden; transition-duration: .18s; } .tab:hover { transform: translateX(-4px); } .tab::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--brand), var(--gold-2)); border-radius: 3px; } .fx.is-rotating .tab.active::after { animation: kdFill 3s linear forwards; } @keyframes kdFill { to { width: 100%; } } @media (prefers-reduced-motion: reduce) { .fx-preview .pv, .pv .pv-info > *, .pv .pv-visual { transition: none !important; } .pv-shot, .tab::after { animation: none !important; } } /* ── systems: a taller, wider preview so the product screens read, and quicker eases ── */ .ico-d { background: var(--gold-soft); color: var(--gold); } .ico-e { background: var(--brand-soft); color: var(--brand); } .ico-f { background: var(--blue-soft); color: var(--blue); } @media (min-width: 1001px) { .fx { grid-template-columns: 300px minmax(0, 1fr); gap: 22px; } .pv-body { grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr); gap: 26px; padding: 26px; align-items: center; } .pv-visual { padding: 10px; min-height: 0; } .pv-info h3 { font-size: 22px; } } .fx-preview .pv { transition-duration: .3s, .4s; } .pv .pv-info > *, .pv .pv-visual { transition-duration: .3s, .45s; } .pv:not(.is-hidden) .pv-info > :nth-child(n) { transition-delay: .03s; } .pv:not(.is-hidden) .pv-info > :nth-child(3) { transition-delay: .06s; } .pv:not(.is-hidden) .pv-info > :nth-child(4), .pv:not(.is-hidden) .pv-info > :nth-child(5) { transition-delay: .09s; } .pv:not(.is-hidden) .pv-visual { transition-delay: .05s; } .fx-preview .pv.is-hidden { transition: opacity .18s ease, transform .2s ease, visibility 0s linear .2s; } .pv:not(.is-hidden) .pv-visual .pv-shot { animation-duration: 3s; } .tab { transition-duration: .15s; } /* ── steps: a staircase of cards climbing toward the result, hexagon badges, a ghost number behind each ── */ .steps-sec { position: relative; overflow: hidden; background: radial-gradient(800px 320px at 50% 0%, color-mix(in oklab, var(--brand) 8%, transparent), transparent 70%), var(--bg); } .steps-sec > .geo { z-index: 0; } .steps-sec > .wrap { position: relative; z-index: 1; } .steps-line { padding: 0; gap: 22px; align-items: start; counter-reset: none; } .steps-line::before { display: none; } .steps-line li { --k: 0; display: block; position: relative; text-align: start; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 26px 22px 24px; margin-top: calc(var(--k) * 30px); box-shadow: var(--shadow-sm); overflow: visible; transition: transform .3s, box-shadow .3s; } .steps-line li:nth-child(1) { --k: 4; } .steps-line li:nth-child(2) { --k: 3; } .steps-line li:nth-child(3) { --k: 2; } .steps-line li:nth-child(4) { --k: 1; } .steps-line li:nth-child(5) { --k: 0; } .steps-line li:hover { transform: translateY(-5px); box-shadow: var(--shadow); } .steps-line .sn { position: absolute; inset-block-start: 8px; inset-inline-end: 16px; width: auto; height: auto; margin: 0; background: none; box-shadow: none; display: block; font-size: 74px; line-height: 1; font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--brand) 28%, transparent); opacity: 1; transform: none; z-index: 0; font-variant-numeric: tabular-nums; } .steps-line .sic { position: relative; z-index: 1; display: grid; place-items: center; width: 62px; height: 68px; margin-bottom: 18px; color: #fff; background: linear-gradient(145deg, var(--brand-2), var(--brand-deep)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: transform .4s; } .steps-line li:nth-child(even) .sic { background: linear-gradient(145deg, var(--gold-2), var(--gold)); } .steps-line li:hover .sic { transform: rotate(8deg) scale(1.06); } .steps-line h3 { position: relative; z-index: 1; font-size: 18px; font-weight: 600; } .steps-line p { position: relative; z-index: 1; } /* the arrow that hands one card to the next, sitting in the gap */ .steps-line li:not(:last-child)::after { content: ""; position: absolute; z-index: 2; inset-inline-end: -33px; inset-block-start: 44px; width: 34px; height: 34px; border-radius: 50%; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23526D4E' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / 16px no-repeat; border: 1px solid color-mix(in oklab, var(--brand) 35%, var(--border)); box-shadow: 0 6px 14px -8px rgba(0,0,0,.35); opacity: 0; transition: opacity .5s ease; } :root[dir="ltr"] .steps-line li:not(:last-child)::after { inset-inline-end: -33px; transform: scaleX(-1); } .steps-line li.in:not(:last-child)::after { opacity: 1; transition-delay: calc(var(--i, 0) * .12s + .3s); } .steps-line li:nth-child(1) { --i: 1; } .steps-line li:nth-child(2) { --i: 2; } .steps-line li:nth-child(3) { --i: 3; } .steps-line li:nth-child(4) { --i: 4; } .steps-line li::before { display: none; } /* the last card is the result: filled, and it reads as the destination */ .steps-line li:last-child { background: linear-gradient(150deg, #2F4430 0%, #3C5138 55%, #5C7A56 100%); border-color: transparent; color: #fff; } .steps-line li:last-child h3 { color: #fff; } .steps-line li:last-child p { color: #D5E4D1; } .steps-line li:last-child .sn { -webkit-text-stroke-color: rgba(255,255,255,.28); } .steps-line li:last-child .sic { background: linear-gradient(145deg, var(--gold-2), var(--gold)); } .steps-sec { padding-block-end: 80px; } @media (max-width: 1100px) { .steps-line { grid-template-columns: repeat(2, 1fr); } .steps-line li { margin-top: 0 !important; } .steps-line li::after { display: none !important; } .steps-line li:last-child { grid-column: 1 / -1; } } @media (max-width: 600px) { .steps-line { grid-template-columns: 1fr; gap: 16px; } .steps-line .sn { font-size: 56px; } .steps-sec { padding-block-end: 52px; } } /* ── system tabs: text starts at the icon's side, a clear name over a readable benefit line ── */ .tab { text-align: start; gap: 14px; padding: 14px 16px; } .tab .tt { text-align: start; display: grid; gap: 3px; } .tab .tt b { font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--ink); } .tab .tt small { font-size: 13.5px; font-weight: 500; line-height: 1.45; color: var(--muted); } .tab.active .tt small { color: var(--brand); } .tab .tn { font-weight: 700; font-size: 14px; color: color-mix(in oklab, var(--faint) 55%, transparent); } .tab:not(.active) .ti { color: var(--brand); } /* buttons do not inherit the page font by themselves: the tabs' text did not match the rest of the site */ button, .tab, .tab * { font-family: inherit; } .tab .tt b { font-family: var(--dsp); } .tab .tt small, .tab .tn { font-family: var(--body); } /* ── facts: four figures counted from the system, on a deep green field ── */ .facts { position: relative; overflow: hidden; isolation: isolate; padding-block: 64px; background: radial-gradient(900px 420px at 90% 0%, rgba(156,190,149,.25), transparent 65%), linear-gradient(150deg, #2F4430 0%, #3C5138 55%, #4C6947 100%); color: #fff; } .facts > .wrap { position: relative; z-index: 1; } .facts .geo-ring { border-color: rgba(255,255,255,.18); box-shadow: 0 0 0 46px rgba(255,255,255,.03), 0 0 0 92px rgba(255,255,255,.02); } .facts .geo-diamond { border-color: rgba(255,255,255,.2); background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 70%); inset-inline-start: auto; inset-inline-end: 30%; inset-block: auto -60px; } .facts .head h2 { color: #fff; } .facts .eyebrow { color: #E6D6C8; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); } .facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; } .fact { padding: 8px 28px; text-align: start; position: relative; } .fact + .fact { border-inline-start: 1px solid rgba(255,255,255,.16); } .fact .fi { display: grid; place-items: center; width: 54px; height: 60px; color: #fff; background: linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); margin-bottom: 14px; } .fact:nth-child(even) .fi { background: linear-gradient(145deg, var(--gold-2), var(--gold)); } .fact b { display: flex; align-items: baseline; gap: 4px; font-size: 58px; line-height: 1; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } .fact b .u { font-size: 34px; color: var(--gold-2); } .fact h3 { font-size: 18px; font-weight: 600; color: #fff; margin-top: 10px; } .fact p { font-size: 14.5px; line-height: 1.75; color: #CFE0CC; margin-top: 6px; max-width: 28ch; } @media (max-width: 900px) { .facts-grid { grid-template-columns: 1fr 1fr; row-gap: 32px; } .fact:nth-child(3) { border-inline-start: 0; } .facts { padding-block: 48px; } .fact b { font-size: 46px; } } @media (max-width: 520px) { .fact { padding: 4px 16px; } .fact b { font-size: 40px; } .fact p { font-size: 13.5px; } } /* ── lighter pages: no large solid colour fields. Facts, pricing and the modules banner sit on the page itself, with fine line shapes and a soft glow instead of a filled band. ── */ .facts { background: radial-gradient(700px 300px at 90% 0%, color-mix(in oklab, var(--brand) 8%, transparent), transparent 70%), var(--bg); color: var(--ink); padding-block: 56px; } .facts .geo-ring { border-color: color-mix(in oklab, var(--brand) 26%, transparent); box-shadow: 0 0 0 46px color-mix(in oklab, var(--brand) 5%, transparent), 0 0 0 92px color-mix(in oklab, var(--brand) 3%, transparent); } .facts .geo-diamond { border-color: color-mix(in oklab, var(--brand) 26%, transparent); background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 9%, transparent), transparent 70%); } .facts .head h2 { color: var(--ink); } .facts .eyebrow { color: var(--gold); background: none; border: 0; } .facts-grid { background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-sm); padding: 28px 8px; } .fact + .fact { border-inline-start: 1px solid var(--border); } .fact .fi { color: #fff; background: linear-gradient(145deg, var(--brand-2), var(--brand-deep)); } .fact:nth-child(even) .fi { background: linear-gradient(145deg, var(--gold-2), var(--gold)); } .fact b { color: var(--brand-deep); } .fact b .u { color: var(--gold); } .fact h3 { color: var(--ink); } .fact p { color: var(--muted); } .pricing-dark { background: radial-gradient(900px 420px at 88% -8%, color-mix(in oklab, var(--brand) 11%, transparent), transparent 65%), radial-gradient(700px 380px at 0% 105%, color-mix(in oklab, var(--gold-2) 16%, transparent), transparent 65%), var(--bg); color: var(--ink); } .pricing-dark .geo-ring { border-color: color-mix(in oklab, var(--brand) 26%, transparent); box-shadow: 0 0 0 46px color-mix(in oklab, var(--brand) 5%, transparent), 0 0 0 92px color-mix(in oklab, var(--brand) 3%, transparent); } .pricing-dark .geo-diamond { border-color: color-mix(in oklab, var(--brand) 26%, transparent); background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 9%, transparent), transparent 70%); } .pricing-dark .geo-tri { border-block-end-color: color-mix(in oklab, var(--gold-2) 30%, transparent); } .pricing-dark .geo-dots { background-image: radial-gradient(color-mix(in oklab, var(--brand) 40%, transparent) 1.6px, transparent 1.8px); } .pricing-dark .head h2 { color: var(--ink); } .pricing-dark .head p { color: var(--muted); } .pricing-dark .eyebrow { color: var(--gold); background: none; border: 0; } .pricing-dark .plan { box-shadow: var(--shadow-sm); border-color: var(--border); } .pricing-dark .plan.pop { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent), var(--shadow); } .mod-banner { background: linear-gradient(120deg, var(--brand-soft), color-mix(in oklab, var(--gold-soft) 70%, var(--bg))); color: var(--ink); border: 1px solid color-mix(in oklab, var(--brand) 20%, var(--border)); } .mod-banner::before { border-color: color-mix(in oklab, var(--brand) 28%, transparent); box-shadow: 0 0 0 36px color-mix(in oklab, var(--brand) 5%, transparent); } .mod-banner p { color: var(--muted); } .mod-banner .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); } .steps-line li:last-child { background: var(--surface); border: 1px solid color-mix(in oklab, var(--brand) 45%, var(--border)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 14%, transparent), var(--shadow-sm); color: var(--ink); } .steps-line li:last-child h3 { color: var(--ink); } .steps-line li:last-child p { color: var(--muted); } .steps-line li:last-child .sn { -webkit-text-stroke-color: color-mix(in oklab, var(--brand) 28%, transparent); } /* ── one continuous page: sections carry no fill of their own and shapes are not clipped per block. The glows and the fine rings below belong to the page, so they run on across the joins between sections. ── */ .page-flow .sec-tint, .page-flow #modes, .page-flow .flow-sec, .page-flow .modules, .page-flow .pricing-dark, .page-flow .facts, .page-flow .steps-sec { background: transparent !important; } .page-flow .geo { display: none !important; } .page-flow { background-color: var(--bg); background-image: radial-gradient(900px 900px at 104% 3%, color-mix(in oklab, var(--brand) 10%, transparent), transparent 70%), radial-gradient(circle at 98% 6%, transparent 0 399px, color-mix(in oklab, var(--brand) 20%, transparent) 400px 401px, transparent 402px), radial-gradient(circle at 98% 6%, transparent 0 479px, color-mix(in oklab, var(--brand) 10%, transparent) 480px 481px, transparent 482px), radial-gradient(800px 800px at -4% 17%, color-mix(in oklab, var(--gold-2) 18%, transparent), transparent 70%), radial-gradient(circle at 1% 21%, transparent 0 329px, color-mix(in oklab, var(--gold) 18%, transparent) 330px 331px, transparent 332px), radial-gradient(900px 900px at 104% 36%, color-mix(in oklab, var(--brand) 9%, transparent), transparent 70%), radial-gradient(circle at 99% 41%, transparent 0 359px, color-mix(in oklab, var(--brand) 18%, transparent) 360px 361px, transparent 362px), radial-gradient(800px 800px at -4% 54%, color-mix(in oklab, var(--gold-2) 16%, transparent), transparent 70%), radial-gradient(circle at 0% 58%, transparent 0 419px, color-mix(in oklab, var(--brand) 16%, transparent) 420px 421px, transparent 422px), radial-gradient(circle at 0% 58%, transparent 0 499px, color-mix(in oklab, var(--brand) 8%, transparent) 500px 501px, transparent 502px), radial-gradient(900px 900px at 104% 70%, color-mix(in oklab, var(--brand) 10%, transparent), transparent 70%), radial-gradient(circle at 100% 74%, transparent 0 379px, color-mix(in oklab, var(--gold) 18%, transparent) 380px 381px, transparent 382px), radial-gradient(800px 800px at -4% 86%, color-mix(in oklab, var(--brand) 9%, transparent), transparent 70%); background-repeat: no-repeat; } /* the "why salons choose us" block: cards on the page, not a dark panel */ .page-flow .edge { background: transparent; color: var(--ink); padding: 8px 0; border-radius: 0; overflow: visible; } .page-flow .edge::after { display: none; } .page-flow .edge .head h2 { color: var(--ink); } .page-flow .edge .head p { color: var(--muted); } .page-flow .edge .eyebrow { color: var(--gold); } .page-flow .echip { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .page-flow .echip:hover { background: var(--surface); box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); } .page-flow .echip .ico { background: var(--brand-soft); color: var(--brand); } .page-flow .echip h3 { color: var(--ink); } .page-flow .echip p { color: var(--muted); } /* ── plans: narrower, a header with its own badge, the price as the hero, the popular one lifted and framed ── */ .price-grid { max-width: 1080px; margin-inline: auto; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; } .plan { padding: 0 26px; border-radius: 22px; overflow: visible; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .plan-head { display: flex; align-items: center; gap: 14px; margin-block: 26px 4px; } .plan-ic { flex: 0 0 auto; display: grid; place-items: center; width: 54px; height: 60px; color: #fff; background: linear-gradient(145deg, var(--brand-2), var(--brand-deep)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .plan:nth-child(odd) .plan-ic { background: linear-gradient(145deg, var(--gold-2), var(--gold)); } .plan.pop .plan-ic { background: linear-gradient(145deg, var(--brand-2), var(--brand-deep)); } .plan-head h3 { margin: 0; font-size: 21px; font-weight: 700; } .plan-tag { display: block; margin-top: 2px; font-size: 13.5px; color: var(--gold); font-weight: 500; } .plan .desc { margin-block: 10px 0; font-size: 14px; } .plan .amt { margin-block: 20px 4px; padding: 16px 18px; border-radius: 16px; background: linear-gradient(135deg, var(--brand-soft), color-mix(in oklab, var(--gold-soft) 60%, var(--bg))); font-size: 44px; align-items: baseline; } .plan .amt small { font-size: 14px; } .plan.pop .amt { background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 16%, var(--bg)), color-mix(in oklab, var(--gold-2) 22%, var(--bg))); } .plan .amt-sub { margin-block: 6px 0; padding-inline: 4px; } .plan-incl { margin-block: 18px 0; padding-top: 16px; border-top: 1px dashed var(--border); font-size: 13px; font-weight: 600; color: var(--brand); letter-spacing: 0; } .plan ul { margin-block: 12px 22px; padding: 0; border-top: 0; gap: 10px; } .plan ul li { font-size: 14.5px; } .plan .btn { margin-block: 0 26px; width: 100%; justify-content: center; } .plan .ribbon { inset-block-start: -14px; inset-inline-end: 22px; padding: 6px 16px; background: linear-gradient(120deg, var(--gold), var(--gold-2)); box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--gold) 70%, transparent); } .plan.pop { border: 0; box-shadow: 0 0 0 2px var(--brand), 0 0 0 8px color-mix(in oklab, var(--brand) 12%, transparent), var(--shadow); transform: translateY(-10px); } .plan.pop:hover { transform: translateY(-13px); } .plan:not(.pop):hover { transform: translateY(-4px); box-shadow: var(--shadow); } .pricing-dark .plan.pop { box-shadow: 0 0 0 2px var(--brand), 0 0 0 8px color-mix(in oklab, var(--brand) 12%, transparent), var(--shadow); } @media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; max-width: 460px; } .plan.pop { transform: none; } .plan.pop:hover { transform: translateY(-3px); } } /* ── sign-up: one compact card on the page. Marketing words and the promises on one side, a short form on the other. ── */ .page-flow .contact-sec { background: transparent; color: var(--ink); padding: 40px 0 64px; } .contact-sec .contact-grid { gap: 40px; align-items: center; padding: 38px 42px; border-radius: 26px; background: linear-gradient(135deg, var(--brand-soft), color-mix(in oklab, var(--gold-soft) 55%, var(--surface)) 60%, var(--surface)); border: 1px solid color-mix(in oklab, var(--brand) 18%, var(--border)); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .contact-sec .contact-grid::before { content: ""; position: absolute; inset-block-start: -90px; inset-inline-start: -90px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--brand) 25%, transparent); box-shadow: 0 0 0 30px color-mix(in oklab, var(--brand) 5%, transparent); pointer-events: none; } .contact-sec .contact-info h2 { color: var(--ink); font-size: clamp(26px, 3vw, 36px); } .contact-sec .contact-info > p { color: var(--muted); } .contact-sec .eyebrow { color: var(--gold); } .contact-points { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; gap: 10px; } .contact-points li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); } .contact-points .ck { width: 22px; height: 22px; border-radius: 7px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: 0 0 auto; } .contact-sec .contact-list { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 22px; } .contact-sec .contact-list li { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 600; } .contact-sec .contact-list li small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; } .contact-sec .contact-list .ci { background: var(--surface); color: var(--brand); border: 1px solid var(--border); width: 40px; height: 40px; border-radius: 12px; } .contact-sec .contact-card { padding: 26px 26px 24px; border-radius: 20px; box-shadow: var(--shadow); } .contact-sec .contact-card .field { margin-bottom: 11px; } .contact-sec .contact-card .field input { padding-block: 11px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-more { margin: 2px 0 14px; } .form-more summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--brand); list-style: none; padding: 4px 0; } .form-more summary::-webkit-details-marker { display: none; } .form-more summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-end: 8px; border-radius: 6px; background: var(--brand-soft); font-weight: 700; transition: transform .25s; } .form-more[open] summary::before { content: "\2212"; } .form-more .field { margin-top: 10px; } .form-more textarea { min-height: 64px; } @media (max-width: 900px) { .contact-sec .contact-grid { padding: 26px 20px; gap: 26px; } .field-row { grid-template-columns: 1fr; gap: 0; } } /* ── the staff app: one phone that walks through the screens, floating cards, and a list that follows it ── */ .emp:has(.app-stage) { grid-template-columns: 1fr; gap: 28px; text-align: center; } .emp:has(.app-stage) .emp-txt { max-width: 720px; margin-inline: auto; } .emp:has(.app-stage) .store-row { justify-content: center; } .app-stage { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 36px; align-items: center; text-align: start; max-width: 1040px; margin-inline: auto; width: 100%; } .app-steps { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .app-step { position: relative; width: 100%; display: flex; align-items: center; gap: 14px; text-align: start; padding: 12px 14px; border-radius: 16px; border: 1px solid transparent; background: transparent; cursor: pointer; font-family: inherit; color: var(--ink); transition: background .25s, border-color .25s, transform .25s, box-shadow .25s; overflow: hidden; } .app-step:hover { transform: translateX(-3px); } :root[dir="ltr"] .app-step:hover { transform: translateX(3px); } .app-step .n { flex: 0 0 auto; width: 38px; height: 42px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--muted); background: var(--surface-3); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); transition: background .25s, color .25s; } .app-step .t { display: grid; gap: 2px; min-width: 0; } .app-step b { font-size: 16px; font-weight: 600; } .app-step small { font-size: 13.5px; color: var(--muted); line-height: 1.5; } .app-step.on { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); } .app-step.on .n { background: linear-gradient(145deg, var(--brand-2), var(--brand-deep)); color: #fff; } .app-step.on small { color: var(--brand); } .app-step::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--brand), var(--gold-2)); border-radius: 3px; } .app-stage.is-playing .app-step.on::after { animation: kdFill 3.4s linear forwards; } .app-phone { grid-column: 2; grid-row: 1; justify-self: center; position: relative; width: 272px; padding: 9px; border-radius: 44px; background: linear-gradient(160deg, #2a302c, #0f1311); box-shadow: 0 40px 70px -30px rgba(10,30,20,.55), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 7px color-mix(in oklab, var(--brand) 9%, transparent); z-index: 2; } .app-notch { position: absolute; z-index: 3; inset-block-start: 15px; inset-inline: 0; margin-inline: auto; width: 84px; height: 22px; border-radius: 14px; background: #0f1311; } .app-screens { position: relative; border-radius: 36px; overflow: hidden; aspect-ratio: 600 / 1305; background: #fff; } .app-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(18px) scale(1.03); transition: opacity .55s ease, transform .7s cubic-bezier(.2,.7,.2,1); } .app-shot.on { opacity: 1; transform: none; } .app-cards { grid-column: 2; grid-row: 1; position: relative; align-self: stretch; pointer-events: none; z-index: 3; } .fc { position: absolute; width: 238px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: color-mix(in oklab, var(--surface) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 18px 34px -16px rgba(10,30,20,.38); opacity: 0; transform: translateY(16px) scale(.94); transition: opacity .45s ease, transform .6s cubic-bezier(.2,1.3,.3,1); } .fc b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; } .fc small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; } .fc-i { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); } .fc-i--gold { background: var(--gold-soft); color: var(--gold); } .fc-a { inset-block-start: 14%; inset-inline-end: 0; } .fc-b { inset-block-end: 16%; inset-inline-start: 0; } .app-cards.on .fc { opacity: 1; transform: none; } .app-cards.on .fc-a { transition-delay: .25s; animation: kdFloat 7s ease-in-out 1.2s infinite; } .app-cards.on .fc-b { transition-delay: .5s; animation: kdFloat 8s ease-in-out 1.5s infinite reverse; } @media (max-width: 900px) { .app-stage { grid-template-columns: 1fr; gap: 22px; } .app-phone { grid-column: 1; grid-row: 1; width: 236px; } .app-cards { grid-column: 1; grid-row: 1; } .fc { width: 190px; padding: 9px 11px; } .fc b { font-size: 13px; } .fc small { font-size: 11.5px; } .fc-i { width: 34px; height: 34px; } .fc-a { inset-inline-end: -4px; inset-block-start: 8%; } .fc-b { inset-inline-start: -4px; inset-block-end: 10%; } .app-steps { grid-column: 1; grid-row: 2; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 6px; } .app-steps li { flex: 0 0 230px; scroll-snap-align: center; } .app-step small { display: none; } } @media (max-width: 480px) { .fc { width: 160px; } .fc small { display: none; } } @media (prefers-reduced-motion: reduce) { .app-shot, .fc { transition: none !important; animation: none !important; } .app-stage.is-playing .app-step.on::after { animation: none; width: 100%; } } /* ── reviews: a ring for the average, and a stack of cards that fly forward one by one ── */ .rv-sec { --rvd: -1; } :root[dir="ltr"] .rv-sec { --rvd: 1; } .rv { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: center; margin-top: 8px; } .rv-side { display: grid; justify-items: center; gap: 16px; text-align: center; } .rv-gauge { position: relative; width: 170px; height: 170px; display: grid; place-items: center; } .rv-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .rv-gauge circle { fill: none; stroke-width: 7; } .rv-gauge .g-bg { stroke: color-mix(in oklab, var(--brand) 14%, var(--surface-3)); } .rv-gauge .g-fg { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.8s cubic-bezier(.3,.7,.2,1) .3s; } .rv.in .g-fg { stroke-dashoffset: var(--to); } .rv-gauge b { font-size: 50px; font-weight: 700; color: var(--brand-deep); line-height: 1; font-variant-numeric: tabular-nums; } .rv-stars { display: flex; gap: 3px; justify-content: center; color: var(--gold); } .rv-sum span { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); } .rv-nav { display: flex; gap: 10px; } .rv-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--brand-deep); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: background .2s, color .2s, transform .2s; } .rv-btn:hover { background: var(--brand); color: #fff; transform: translateY(-2px); } .rv-stack { display: grid; position: relative; padding: 0 42px 44px 0; } :root[dir="ltr"] .rv-stack { padding: 0 0 44px 42px; } .rv-card { grid-area: 1 / 1; position: relative; padding: 38px 42px 30px; border-radius: 26px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); transform-origin: 50% 100%; transition: transform .9s cubic-bezier(.2,.8,.2,1), opacity .7s ease, filter .7s ease; will-change: transform; overflow: hidden; } .rv-card::after { content: ""; position: absolute; inset-block-end: -70px; inset-inline-start: -50px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent); box-shadow: 0 0 0 28px color-mix(in oklab, var(--brand) 4%, transparent); pointer-events: none; } .rv-q { position: absolute; inset-block-start: 22px; inset-inline-end: 30px; color: color-mix(in oklab, var(--gold-2) 55%, transparent); transform: scale(.4) rotate(-12deg); opacity: 0; transition: transform .8s cubic-bezier(.2,1.4,.3,1) .2s, opacity .5s .2s; } .rv-rate { display: flex; gap: 4px; color: var(--gold); margin-bottom: 18px; } .rv-rate svg { opacity: 0; transform: scale(.3) rotate(-30deg); transition: transform .5s cubic-bezier(.2,1.6,.3,1) calc(.35s + var(--s) * .08s), opacity .3s calc(.35s + var(--s) * .08s); } .rv-text { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.75; font-weight: 500; color: var(--ink); margin: 0; min-height: 5.2em; } .rv-text .w { display: inline-block; opacity: 0; transform: translateY(12px); filter: blur(5px); transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1), filter .5s ease; transition-delay: 0s; } .rv-who { display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--border); opacity: 0; transform: translateY(10px); transition: opacity .5s ease .5s, transform .6s ease .5s; } .rv .av, .rv-chip .av { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-weight: 700; font-size: 19px; color: #fff; background: linear-gradient(145deg, var(--brand-2), var(--brand-deep)); flex: 0 0 auto; } .rv-who .nm { font-weight: 600; font-size: 16px; } .rv-who .rl { font-size: 13.5px; color: var(--muted); } /* positions in the stack: 0 is the card in front, 1 and 2 peek out behind it, the one just gone flies off */ .rv-card[data-pos="0"] { z-index: 5; transform: none; opacity: 1; } .rv-card[data-pos="1"] { z-index: 4; transform: translate(calc(var(--rvd) * -24px), 22px) scale(.95) rotate(calc(var(--rvd) * -1.2deg)); opacity: .85; filter: saturate(.8); } .rv-card[data-pos="2"] { z-index: 3; transform: translate(calc(var(--rvd) * -46px), 42px) scale(.9) rotate(calc(var(--rvd) * -2.4deg)); opacity: .55; filter: saturate(.6); } .rv-card[data-pos="gone"] { z-index: 6; transform: translate(calc(var(--rvd) * 90px), -30px) rotate(calc(var(--rvd) * 9deg)) scale(1.03); opacity: 0; pointer-events: none; } .rv-card[data-pos="far"] { z-index: 1; transform: translate(calc(var(--rvd) * -60px), 56px) scale(.86); opacity: 0; pointer-events: none; } .rv-card[data-pos="0"] .rv-q { transform: none; opacity: 1; } .rv-card[data-pos="0"] .rv-rate svg { opacity: 1; transform: none; } .rv-card[data-pos="0"] .rv-text .w { opacity: 1; transform: none; filter: none; transition-delay: calc(.3s + var(--d)); } .rv-card[data-pos="0"] .rv-who { opacity: 1; transform: none; } .rv-card:not([data-pos="0"]) .rv-text, .rv-card:not([data-pos="0"]) .rv-rate, .rv-card:not([data-pos="0"]) .rv-who { opacity: .0; } .rv-card[data-pos="1"] .rv-text, .rv-card[data-pos="1"] .rv-rate, .rv-card[data-pos="1"] .rv-who { opacity: 0; } .rv-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .rv-chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; cursor: pointer; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-family: inherit; font-size: 13.5px; transition: background .25s, color .25s, border-color .25s, transform .25s; overflow: hidden; } :root[dir="rtl"] .rv-chip { padding: 5px 5px 5px 14px; } .rv-chip .av { width: 30px; height: 30px; border-radius: 50%; font-size: 13px; background: var(--surface-3); color: var(--muted); transition: background .25s, color .25s; } .rv-chip:hover { transform: translateY(-2px); } .rv-chip.on { color: var(--ink); border-color: color-mix(in oklab, var(--brand) 45%, var(--border)); background: var(--brand-soft); } .rv-chip.on .av { background: linear-gradient(145deg, var(--brand-2), var(--brand-deep)); color: #fff; } .rv-chip::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; height: 2px; width: 0; background: var(--brand); } .rv.is-playing ~ .rv-chips .rv-chip.on::after { animation: kdFill 4s linear forwards; } @media (max-width: 900px) { .rv { grid-template-columns: 1fr; gap: 26px; } .rv-side { grid-template-columns: auto 1fr auto; justify-items: start; text-align: start; align-items: center; gap: 16px; } .rv-gauge { width: 96px; height: 96px; } .rv-gauge b { font-size: 28px; } .rv-stack { padding: 0 14px 38px 0; } :root[dir="ltr"] .rv-stack { padding: 0 0 38px 14px; } .rv-card { padding: 28px 22px 22px; } .rv-card[data-pos="1"] { transform: translate(calc(var(--rvd) * -10px), 16px) scale(.96); } .rv-card[data-pos="2"] { transform: translate(calc(var(--rvd) * -20px), 30px) scale(.92); } } @media (max-width: 520px) { .rv-side { grid-template-columns: auto 1fr; } .rv-nav { grid-column: 1 / -1; } .rv-chip .nm { display: none; } .rv-chip { padding: 4px; } } @media (prefers-reduced-motion: reduce) { .rv-card, .rv-text .w, .rv-rate svg, .rv-q, .rv-who { transition: none !important; } .rv-gauge .g-fg { transition: none; stroke-dashoffset: var(--to); } } /* sign-up: the form is as tall as the words beside it, and its button sits at the foot */ .contact-sec .contact-grid { align-items: stretch; } .contact-sec .contact-info { display: flex; flex-direction: column; justify-content: center; } .contact-sec .contact-card { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; } .contact-sec .contact-card .field input { padding-block: 13px; } .contact-sec .contact-card button[type="submit"] { margin-top: auto; padding-block: 14px; } .contact-sec .contact-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 22px; } @media (max-width: 900px) { .contact-sec .contact-list { grid-template-columns: 1fr; } } /* ── staff app, second take: steady marketing words on one side, the phone plays like a screen recording ── */ .app-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; max-width: 1080px; } .app-copy { grid-column: 1; grid-row: 1; } .app-copy h4 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.4; font-weight: 700; margin: 0 0 22px; } .app-copy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } .app-copy li { display: flex; gap: 16px; align-items: flex-start; } .app-copy .bi { flex: 0 0 auto; width: 50px; height: 56px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--brand-2), var(--brand-deep)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .app-copy li:nth-child(even) .bi { background: linear-gradient(145deg, var(--gold-2), var(--gold)); } .app-copy b { display: block; font-size: 17.5px; font-weight: 600; } .app-copy p { margin: 4px 0 0; font-size: 15px; line-height: 1.8; color: var(--muted); max-width: 46ch; } .app-screens { direction: ltr; background: #fff; } .app-shot { opacity: 1; transform: translateX(100%); transition: transform .65s cubic-bezier(.65,0,.2,1), filter .65s ease; filter: none; } .app-shot.on { transform: none; } .app-shot.out { transform: translateX(-26%); filter: brightness(.82); } .app-shot.jump { transition: none; } .app-tap { position: absolute; z-index: 5; inset-inline-start: 0; inset-block-start: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(15,19,17,.28); border: 2px solid rgba(255,255,255,.9); box-shadow: 0 6px 16px rgba(0,0,0,.28); opacity: 0; transform: scale(1); transition: left .75s cubic-bezier(.5,0,.2,1), top .75s cubic-bezier(.5,0,.2,1), opacity .3s ease, transform .2s ease; pointer-events: none; left: 50%; top: 105%; } .app-tap.show { opacity: 1; } .app-tap.press { transform: scale(.7); background: rgba(82,109,78,.55); } .app-tap::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(82,109,78,.7); opacity: 0; } .app-tap.press::after { animation: kdRipple .5s ease-out; } @keyframes kdRipple { from { opacity: .9; transform: scale(.8); } to { opacity: 0; transform: scale(2.2); } } .app-phone { grid-column: 2; } .app-cards { grid-column: 2; } .fc-a { inset-inline-end: -4%; } .fc-b { inset-inline-start: -4%; } @media (max-width: 900px) { .app-stage { grid-template-columns: 1fr; gap: 30px; } .app-copy { grid-column: 1; grid-row: 2; } .app-phone, .app-cards { grid-column: 1; grid-row: 1; } } @media (prefers-reduced-motion: reduce) { .app-shot { transition: none !important; } .app-tap { display: none; } } /* ── ratings are always gold: the stars, the ring behind the average, the star in the hero ── */ :root { --star: #F5B316; --star-2: #E89A0C; } .stars, .rv-stars, .rv-rate, .tst .stars, .tf-in .stars, .tf-card .stars, .salon-card .srate, .salon-card .rate svg, .salon-card .srate svg, .hero-stats .s, .hero-stats b .s { color: var(--star) !important; } .hero-stats b .s { margin-inline-end: 2px; } .rv-gauge .g-fg { stroke: var(--star); filter: drop-shadow(0 3px 6px color-mix(in oklab, var(--star) 45%, transparent)); } .rv-gauge .g-bg { stroke: color-mix(in oklab, var(--star) 16%, var(--surface-3)); } .rv-gauge b { color: var(--ink); } .rv-stars svg, .rv-rate svg { filter: drop-shadow(0 1px 2px color-mix(in oklab, var(--star) 40%, transparent)); } .rv .av--img, .rv-chip .av--img { background: #fff; border: 1px solid var(--border); overflow: hidden; padding: 0; } .rv .av--img img, .rv-chip .av--img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── staff app layout: more air between the words and the phone, the store buttons under both, a smaller phone so its screen stays crisp ── */ .emp:has(.app-stage) { display: flex; flex-direction: column; align-items: center; gap: 14px; } .emp:has(.app-stage) .emp-txt { display: contents; } .emp:has(.app-stage) .emp-txt .eyebrow { align-self: center; } .emp:has(.app-stage) .emp-txt h3, .emp:has(.app-stage) .emp-txt p { text-align: center; max-width: 720px; margin-inline: auto; } .emp:has(.app-stage) .app-stage { order: 2; margin-block: 26px 6px; } .emp:has(.app-stage) .store-row { order: 3; justify-content: center; margin-top: 14px; } .app-stage { grid-template-columns: minmax(0, 1fr) 400px; gap: 96px; max-width: 1200px; padding-inline: 12px; } .app-phone { width: 240px; } .app-copy p { max-width: 44ch; } .fc { width: 220px; } .fc-a { inset-inline-end: -14%; } .fc-b { inset-inline-start: -14%; } @media (max-width: 1100px) { .app-stage { grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; } } @media (max-width: 900px) { .app-stage { grid-template-columns: 1fr; gap: 30px; } .app-phone { width: 220px; } .fc { width: 180px; } } /* ── FAQ: all closed to begin with, wider columns, larger questions, a smooth open and close ── */ @media (min-width: 901px) { #faq .wrap { max-width: min(1360px, calc(100% - 48px)) !important; } } #faq .faq-list { gap: 14px 22px; } .faq-item > summary { padding: 20px 22px; font-size: 19px; line-height: 1.6; font-weight: 600; gap: 16px; } .faq-item .fq-a { overflow: hidden; } .faq-item .fq-a p { padding: 0 22px 22px; font-size: 16px; line-height: 1.9; } .faq-item { transition: border-color .25s, box-shadow .25s; } .faq-item[open] { border-color: color-mix(in oklab, var(--brand) 40%, var(--border)); box-shadow: var(--shadow-sm); } .faq-item .fq-i { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-soft); display: grid; place-items: center; } @media (max-width: 700px) { .faq-item > summary { font-size: 17px; padding: 16px 16px; } .faq-item .fq-a p { padding: 0 16px 18px; } } /* FAQ: nearly the full width of the window, the questions closer to the edges */ @media (min-width: 901px) { #faq .wrap { max-width: min(1700px, calc(100% - 32px)) !important; } } #faq .faq-list { gap: 14px 16px; } #faq .faq-item > summary { padding-inline: 18px; } #faq .faq-item .fq-a p { padding-inline: 18px; } /* the logo: wide, so it is sized by height and kept to its proportions */ .logo__img { height: 44px; max-width: 190px; } .logo--light .logo__img { height: 54px; max-width: 230px; } @media (max-width: 600px) { .logo__img { height: 38px; } .logo--light .logo__img { height: 48px; } } /* ── footer: five tidy columns on one grid, consistent sizes, a contact column, the logo at its proper size ── */ footer { padding: 52px 0 24px; background: linear-gradient(170deg, #2F4430 0%, #3C5138 100%); } .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr; gap: 34px; align-items: start; } .foot-brand p { color: #C4D4C6; font-size: 14.5px; line-height: 1.85; max-width: 36ch; } .foot-grid h4 { position: relative; font-size: 16px; font-weight: 600; margin: 0 0 16px; padding-bottom: 10px; } .foot-grid h4::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 26px; height: 2px; border-radius: 2px; background: var(--gold-2); } .foot-grid a, .foot-contact .fline { display: flex; align-items: center; gap: 10px; color: #C4D4C6; font-size: 14.5px; padding: 6px 0; line-height: 1.6; } .foot-grid a:hover { color: #fff; } .foot-contact .fi { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.09); display: grid; place-items: center; color: var(--gold-2); } .foot-social a { width: 40px; height: 40px; padding: 0; } .foot-bottom { font-size: 13.5px; color: #B7C7BC; } @media (max-width: 1100px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } } @media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; } .foot-contact { grid-column: 1 / -1; } } /* ── FAQ: the same width and alignment as the sections above, a calmer heading ── */ @media (min-width: 901px) { #faq .wrap { max-width: var(--maxw) !important; } } #faq .head h2 { font-size: clamp(24px, 2.4vw, 32px); } /* ── reports: a bento of real report screens, each under the question it answers ── */ .rp-sec { padding-block: 56px; } .rp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; margin-top: 6px; } .rp { grid-column: span 2; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; } .rp:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); } .rp-1 { grid-column: span 4; flex-direction: row; } .rp-2 { grid-column: span 2; } .rp-shot { position: relative; overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 10; border-bottom: 1px solid var(--border); } .rp-1 .rp-shot { flex: 1.35; aspect-ratio: auto; min-height: 300px; border-bottom: 0; border-inline-end: 1px solid var(--border); } .rp-1 .rp-body { flex: 1; justify-content: center; } .rp-dots { position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-start: 12px; display: flex; gap: 5px; } .rp-dots b { width: 8px; height: 8px; border-radius: 50%; background: #E5766B; } .rp-dots b:nth-child(2) { background: var(--gold-2); } .rp-dots b:nth-child(3) { background: var(--brand-2); } .rp-shot img { position: absolute; inset-inline-start: 0; inset-block-start: 0; width: 150%; max-width: none; height: auto; transform-origin: 0 0; transition: transform 3.2s cubic-bezier(.3,.6,.2,1); } :root[dir="rtl"] .rp-shot img { inset-inline-start: auto; left: 0; } .rp:hover .rp-shot img { transform: translateY(-14%); } .rp-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; } .rp-n { font-size: 12.5px; font-weight: 700; color: var(--gold); letter-spacing: .04em; } .rp-body h3 { font-size: 20px; font-weight: 600; margin: 0; } .rp-body p { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--muted); } .rp-1 .rp-body h3 { font-size: 24px; } .rp-notes { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; } .rp-notes li { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink); } .rp-notes .ck { width: 20px; height: 20px; border-radius: 6px; background: var(--brand); color: #fff; display: grid; place-items: center; } @media (max-width: 1000px) { .rp-grid { grid-template-columns: 1fr 1fr; } .rp, .rp-2 { grid-column: span 1; } .rp-1 { grid-column: 1 / -1; flex-direction: column; } .rp-1 .rp-shot { aspect-ratio: 16 / 9; min-height: 0; border-inline-end: 0; border-bottom: 1px solid var(--border); flex: none; } } @media (max-width: 600px) { .rp-grid { grid-template-columns: 1fr; } .rp-body { padding: 16px 18px 20px; } } @media (prefers-reduced-motion: reduce) { .rp-shot img { transition: none; } .rp:hover .rp-shot img { transform: none; } } /* ── landing footer, light: it sits on the page like everything above it, with the colour logo ── */ footer { background: linear-gradient(180deg, color-mix(in oklab, var(--brand-soft) 55%, transparent), color-mix(in oklab, var(--brand-soft) 85%, var(--bg))); color: var(--muted); border-top: 1px solid color-mix(in oklab, var(--brand) 18%, var(--border)); padding: 56px 0 26px; } footer .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.4fr; gap: 40px; } footer .logo__img { height: 58px; max-width: 250px; } footer .foot-brand p { color: var(--muted); font-size: 15px; line-height: 1.9; max-width: 38ch; margin-top: 16px !important; } footer .foot-grid h4 { color: var(--ink); font-size: 16.5px; font-weight: 600; margin-bottom: 18px; } footer .foot-grid h4::after { background: var(--gold); width: 28px; } footer .foot-grid a, footer .foot-contact .fline { color: var(--muted); font-size: 15px; padding: 7px 0; transition: color .2s, transform .2s; } footer .foot-grid a:hover { color: var(--brand-deep); transform: translateX(-3px); } :root[dir="ltr"] footer .foot-grid a:hover { transform: translateX(3px); } footer .foot-contact .fi { background: var(--surface); border: 1px solid var(--border); color: var(--brand); width: 32px; height: 32px; border-radius: 10px; } footer .foot-social { gap: 10px; margin-top: 22px; } footer .foot-social a { width: 42px; height: 42px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--brand); transition: background .2s, color .2s, transform .2s; } footer .foot-social a:hover { background: var(--brand); color: #fff; transform: translateY(-3px); } footer .foot-bottom { border-top: 1px solid color-mix(in oklab, var(--brand) 16%, var(--border)); color: var(--muted); font-size: 14px; margin-top: 38px; padding-top: 22px; } @media (max-width: 1100px) { footer .foot-grid { grid-template-columns: 1fr 1fr 1fr; } } @media (max-width: 600px) { footer .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } footer .logo__img { height: 50px; } } /* services strip: smaller round pictures */ #services-strip .sv { width: 96px; } #services-strip .sv .circ { width: 84px; height: 84px; border-radius: 50%; margin-inline: auto; margin-bottom: 9px; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--border), var(--shadow-sm); } #services-strip .sv .circ img { border-radius: 50%; } #services-strip .sv:hover .circ { transform: translateY(-4px); } #services-strip .sv .nm { font-size: 12.5px; line-height: 1.45; text-align: center; } #services-strip .smarq { gap: 14px; } @media (max-width: 600px) { #services-strip .sv { width: 84px; } #services-strip .sv .circ { width: 72px; height: 72px; border-radius: 50%; } #services-strip .sv .nm { font-size: 12px; } } /* the social buttons are flex rows by the footer's link rule: centre their icon */ footer .foot-grid .foot-social a { display: grid; place-items: center; padding: 0; gap: 0; transform: none; } footer .foot-grid .foot-social a:hover { transform: translateY(-3px); color: #fff; } footer .foot-social a svg { display: block; } /* ── partner salons: cover, a logo hung on its edge, real numbers, and a badge instead of a booking link ── */ .showcase .wrap { max-width: var(--maxw); } .pt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px; max-width: 1100px; margin-inline: auto; } .pt { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-sm); overflow: visible; transition: transform .35s, box-shadow .35s, border-color .35s; } .pt:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); } .pt-cover { position: relative; height: 190px; border-radius: 23px 23px 0 0; overflow: hidden; background: var(--surface-3); } .pt-cover .ph-img, .pt-cover .scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); } .pt:hover .pt-cover .ph-img { transform: scale(1.07); } .pt-cover .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(10,25,18,.45)); } .pt-rate { position: absolute; z-index: 2; inset-block-start: 14px; inset-inline-start: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.95); color: #0F1A14; font-weight: 700; font-size: 14px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.4); } .pt-rate svg { color: var(--star); } .pt-logo { position: relative; z-index: 3; display: grid; place-items: center; width: 74px; height: 74px; margin: -37px 24px 0; border-radius: 50%; background: linear-gradient(145deg, var(--brand-2), var(--brand-deep)); color: #fff; font-weight: 700; font-size: 28px; border: 4px solid var(--surface); box-shadow: 0 10px 22px -10px rgba(10,30,20,.5); overflow: hidden; } .pt-logo--img { background: #fff; } .pt-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .pt-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 24px 22px; flex: 1; } .pt-body h3 { font-size: 22px; font-weight: 700; margin: 0; } .pt-loc { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); } .pt-loc svg { color: var(--brand); flex: 0 0 auto; } .pt-body p { margin: 2px 0 0; font-size: 14.5px; line-height: 1.8; color: var(--muted); } .pt-stats { list-style: none; margin: 8px 0 0; padding: 14px 0; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px dashed var(--border); text-align: center; } .pt-stats li + li { border-inline-start: 1px solid var(--border); } .pt-stats b { display: block; font-size: 22px; font-weight: 700; color: var(--brand-deep); line-height: 1.2; font-variant-numeric: tabular-nums; } .pt-stats span { font-size: 12.5px; color: var(--muted); } .pt-badge { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-deep); font-size: 13px; font-weight: 600; border: 1px solid color-mix(in oklab, var(--brand) 20%, transparent); } @media (max-width: 700px) { .pt-cover { height: 170px; } } .pt-stats { grid-template-columns: repeat(var(--n, 3), 1fr); } .pt-body { padding-bottom: 22px; } .pt-badge { margin-top: 12px; } .pt-body p { flex: 1; } /* partner salons, tidier: the full column width, one even card height, only what a visitor needs */ .pt-grid { max-width: none; grid-template-columns: repeat(3, 1fr); gap: 22px; } .pt-cover { height: 170px; } .pt-logo { width: 66px; height: 66px; margin: -33px 22px 0; font-size: 25px; } .pt-body { padding: 12px 22px 22px; gap: 6px; } .pt-body h3 { font-size: 21px; } .pt-badge { margin-top: 12px; } @media (max-width: 1000px) { .pt-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .pt-grid { grid-template-columns: 1fr; } } /* ── partner salons, as tall photo cards: a dark gradient from the foot, the round logo, name, rating and a line or two ── */ .pc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .pc { position: relative; height: 430px; border-radius: 26px; overflow: hidden; isolation: isolate; color: #fff; background: #1d2a21; box-shadow: 0 30px 50px -28px rgba(8,22,14,.7); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; } .pc:hover { transform: translateY(-8px); box-shadow: 0 40px 64px -26px rgba(8,22,14,.8); } .pc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); } .pc-img--scene > * { width: 100%; height: 100%; } .pc:hover .pc-img { transform: scale(1.08); } .pc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,18,12,.18) 0%, rgba(8,18,12,0) 28%, rgba(8,18,12,.55) 58%, rgba(6,14,9,.94) 100%); } .pc-badge { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); backdrop-filter: blur(8px); } .pc-info { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 0 22px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; transition: transform .45s cubic-bezier(.2,.7,.2,1); } .pc:hover .pc-info { transform: translateY(-4px); } .pc-logo { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(145deg, var(--brand-2), var(--brand-deep)); color: #fff; font-size: 26px; font-weight: 700; border: 3px solid rgba(255,255,255,.95); box-shadow: 0 12px 24px -10px rgba(0,0,0,.7); overflow: hidden; margin-bottom: 4px; } .pc-logo--img { background: #fff; } .pc-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .pc-info h3 { font-size: 22px; font-weight: 700; margin: 0; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.45); } .pc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; color: rgba(255,255,255,.88); } .pc-rate { display: inline-flex; align-items: center; gap: 3px; color: var(--star); } .pc-rate b { margin-inline-start: 5px; color: #fff; font-weight: 700; } .pc-loc { display: inline-flex; align-items: center; gap: 5px; } .pc-info p { margin: 0; font-size: 14px; line-height: 1.75; color: rgba(255,255,255,.82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.5em; } @media (max-width: 1100px) { .pc-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .pc-grid { grid-template-columns: 1fr; } .pc { height: 400px; } } /* partner cards, shorter: the logo sits beside the name and rating, and a row of facts closes the card */ .pc { height: 350px; } .pc-info { gap: 10px; padding: 0 20px 20px; } .pc-head { display: flex; align-items: center; gap: 12px; width: 100%; } .pc-head .pc-logo { width: 58px; height: 58px; font-size: 22px; flex: 0 0 auto; margin: 0; } .pc-title { display: grid; gap: 4px; min-width: 0; } .pc-title h3 { font-size: 19px; line-height: 1.3; } .pc-info p { min-height: 0; font-size: 13.5px; line-height: 1.7; } .pc-pills { display: flex; flex-wrap: wrap; gap: 6px; } .pc-pills span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); } @media (max-width: 560px) { .pc { height: 340px; } } /* the store buttons in the footer: a pair under the social icons */ footer .store-row--foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } footer .store-row--foot .store { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 12px; background: #16201a; color: #fff; text-decoration: none; transition: transform .2s, box-shadow .2s; } footer .store-row--foot .store:hover { transform: translateY(-3px); box-shadow: 0 14px 24px -14px rgba(0,0,0,.6); color: #fff; } footer .store-row--foot .store small { display: block; font-size: 10.5px; opacity: .75; line-height: 1.2; } footer .store-row--foot .store b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; } footer .foot-grid .store-row--foot a { padding: 8px 16px; color: #fff; } footer .foot-grid .store-row--foot a, footer .store-row--foot .store { padding: 7px 12px; gap: 8px; flex: 0 1 auto; } footer .store-row--foot .store b { font-size: 13.5px; } footer .store-row--foot { gap: 8px; flex-wrap: nowrap; } @media (max-width: 1100px) { footer .store-row--foot { flex-wrap: wrap; } } /* ── growth: six cards, each over a small drawn mock (shapes only, no numbers to defend) ── */ .gr-sec { padding-block: 56px; } .gr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .gr { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 0 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-sm); overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; } .gr:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: color-mix(in oklab, var(--brand) 35%, var(--border)); } .gr h3 { font-size: 20px; font-weight: 600; margin: 0; padding-inline: 24px; } .gr p { margin: 0; padding-inline: 24px; font-size: 14.5px; line-height: 1.8; color: var(--muted); } .gr-ic { position: relative; z-index: 2; margin: -28px 24px 8px; width: 52px; height: 58px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--brand-2), var(--brand-deep)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .gr:nth-child(even) .gr-ic { background: linear-gradient(145deg, var(--gold-2), var(--gold)); } .gr-mock { position: relative; height: 150px; display: grid; place-items: center; padding: 18px 24px; background: linear-gradient(145deg, var(--brand-soft), color-mix(in oklab, var(--gold-soft) 55%, var(--surface))); border-bottom: 1px solid var(--border); overflow: hidden; } .gr-mock::before { content: ""; position: absolute; inset-block-start: -70px; inset-inline-end: -50px; width: 190px; height: 190px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--brand) 22%, transparent); box-shadow: 0 0 0 26px color-mix(in oklab, var(--brand) 4%, transparent); } .gr-mock i { display: block; height: 7px; border-radius: 4px; background: color-mix(in oklab, var(--ink) 16%, transparent); width: 100%; } .gr-mock i.s { width: 58%; margin-top: 6px; opacity: .7; } .gm-ic { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--brand); color: #fff; } .gm-ic--g { background: var(--gold); } /* 1 notifications */ .gm-note { position: relative; display: flex; align-items: center; gap: 10px; width: 78%; padding: 10px 12px; background: var(--surface); border-radius: 14px; box-shadow: 0 12px 22px -14px rgba(10,30,20,.5); } .gm-note > div { flex: 1; } .gm-note em { width: 8px; height: 8px; border-radius: 50%; background: #E5766B; } .gm-note--2 { position: absolute; width: 66%; inset-block-end: 14px; inset-inline-start: 24px; opacity: .85; transform: scale(.94); } .gm-1 { align-content: start; padding-top: 22px; } /* 2 membership */ .gm-card { position: relative; width: 68%; height: 100px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, var(--brand-2), var(--brand-deep)); box-shadow: 0 16px 26px -14px rgba(10,30,20,.6); display: grid; align-content: end; gap: 0; } .gm-card i { background: rgba(255,255,255,.55); } .gm-chip { position: absolute; inset-block-start: 12px; inset-inline-start: 14px; width: 34px; height: 24px; border-radius: 6px; background: linear-gradient(145deg, var(--gold-2), var(--gold)); } .gm-ring { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; width: 32px; height: 32px; border-radius: 50%; border: 3px solid rgba(255,255,255,.45); border-top-color: var(--star); } /* 3 incentives */ .gm-bars { position: relative; width: 74%; display: grid; gap: 10px; } .gm-bars > div { height: 12px; border-radius: 6px; background: color-mix(in oklab, var(--brand) 14%, var(--surface)); overflow: hidden; } .gm-bars b { display: block; height: 100%; width: var(--w); border-radius: 6px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); } .gm-bars > div:nth-child(2) b { background: linear-gradient(90deg, var(--gold), var(--gold-2)); } .gm-bars .gm-ic { position: absolute; inset-block-start: -20px; inset-inline-end: -18px; box-shadow: 0 8px 16px -8px rgba(0,0,0,.4); } /* 4 work area */ .gm-map { position: relative; width: 82%; height: 100px; border-radius: 16px; background: var(--surface) linear-gradient(color-mix(in oklab, var(--brand) 10%, transparent) 1px, transparent 1px) 0 0 / 100% 22px, linear-gradient(90deg, color-mix(in oklab, var(--brand) 10%, transparent) 1px, transparent 1px) 0 0 / 22px 100%; box-shadow: 0 12px 22px -14px rgba(10,30,20,.45); display: grid; place-items: center; } .gm-zone { position: absolute; width: 74px; height: 74px; border-radius: 50%; border: 2px dashed var(--brand); background: color-mix(in oklab, var(--brand) 10%, transparent); } .gm-pin { position: relative; z-index: 1; color: var(--brand-deep); } /* 5 stock */ .gm-rows { width: 76%; display: grid; gap: 10px; } .gm-rows > div { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border-radius: 12px; box-shadow: 0 8px 16px -12px rgba(10,30,20,.45); } .gm-rows > div > i { flex: 0 0 22px; height: 22px; border-radius: 7px; background: var(--brand-soft); } .gm-rows b { display: block; height: 8px; width: var(--w); border-radius: 4px; background: var(--brand); } .gm-rows .low > i { background: #FBE3E0; } .gm-rows .low b { background: #E5766B; } /* 6 amending a booking */ .gm-edit { width: 76%; display: grid; gap: 8px; } .gm-edit > div { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border-radius: 12px; box-shadow: 0 8px 16px -12px rgba(10,30,20,.45); } .gm-edit > div > i:first-child { flex: 0 0 26px; height: 26px; border-radius: 8px; background: var(--brand-soft); } .gm-edit > div > i.s { margin: 0; flex: 1; } .gm-edit span { margin-inline-start: auto; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; line-height: 1; color: #fff; background: var(--brand); } .gm-edit span.m { background: #E5766B; } .gm-edit .log { background: transparent; box-shadow: none; padding: 0 4px; } .gm-edit .log i { margin: 0; width: 60%; } @media (max-width: 1000px) { .gr-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .gr-grid { grid-template-columns: 1fr; } } .gr-mock .gm-zone { height: 74px; width: 74px; background: color-mix(in oklab, var(--brand) 10%, transparent); } /* ── growth cards with real dashboard screens, and one rhythm of spacing for every block ── */ .gr-shot { position: relative; height: 190px; overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--border); } .gr-shot img { position: absolute; inset-block-start: 0; left: 0; width: 148%; max-width: none; height: auto; transition: transform 3.2s cubic-bezier(.3,.6,.2,1); } .gr:hover .gr-shot img { transform: translateY(-16%); } .gr-shot .rp-dots { position: absolute; z-index: 2; inset-block-start: 10px; inset-inline-start: 12px; display: flex; gap: 5px; } .gr-ic { margin: -30px 24px 14px; } .gr h3 { margin-bottom: 4px; line-height: 1.4; } .gr p { text-wrap: pretty; } /* spacing: every section the same height of air, every heading block the same gaps, no single word left on a line */ :root { --sec-y: 64px; --head-gap: 40px; } .page-flow section:not(.hero):not(#services-strip):not(.trust-strip) { padding-block: var(--sec-y); } .rp-sec, .gr-sec, .flow-sec, .facts, .steps-sec, .modules, .pricing-dark, #faq, .contact-sec, .showcase { padding-block: var(--sec-y) !important; } .page-flow .head { margin-bottom: var(--head-gap); } .page-flow .head h2 { margin: 10px 0 0; line-height: 1.35; text-wrap: balance; } .page-flow .head p { margin: 14px auto 0; max-width: 62ch; line-height: 1.85; text-wrap: balance; } .page-flow .head .eyebrow { margin-bottom: 4px; } @media (max-width: 900px) { :root { --sec-y: 48px; --head-gap: 28px; } } .gr-shot img { width: 200%; inset-block-start: -13%; } .gr:hover .gr-shot img { transform: translateY(-14%); } .gr-shot { height: 200px; } /* ── growth: drawn scenes instead of screenshots, one for each idea ── */ .gr-shot { display: none; } .gv { position: relative; height: 200px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(150deg, var(--brand-soft), color-mix(in oklab, var(--gold-soft) 60%, var(--surface))); border-bottom: 1px solid var(--border); } .gv > * { position: relative; z-index: 1; } .gv i { display: block; } .gv-ring { position: absolute !important; z-index: 0 !important; inset-block-start: -80px; inset-inline-end: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--brand) 24%, transparent); box-shadow: 0 0 0 28px color-mix(in oklab, var(--brand) 4%, transparent), 0 0 0 56px color-mix(in oklab, var(--brand) 2.5%, transparent); } .gv-dot { position: absolute !important; z-index: 0 !important; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in oklab, var(--gold) 55%, transparent); } .gv-dot.d1 { inset-block-start: 22px; inset-inline-start: 26px; } .gv-dot.d2 { inset-block-end: 26px; inset-inline-start: 44px; width: 12px; height: 12px; background: color-mix(in oklab, var(--brand) 40%, transparent); } .gv-dot.d3 { inset-block-end: 40px; inset-inline-end: 30px; } .gv-ic { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--brand); color: #fff; } .gv-ic--g { background: var(--gold); } .gv-ic--r { background: #E5766B; width: 28px; height: 28px; } .gv-badge { position: absolute !important; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: var(--surface); color: var(--brand); box-shadow: 0 12px 20px -10px rgba(10,30,20,.45); } .gv-badge.b1 { inset-block-start: 30px; inset-inline-start: 36px; transform: rotate(-8deg); } .gv-badge.b2 { inset-block-start: 26px; inset-inline-start: 34px; transform: rotate(-8deg); color: var(--gold); } .gv-badge.b3 { inset-block-end: 24px; inset-inline-end: 30px; transform: rotate(7deg); } .gv-pill { position: absolute !important; inset-block-end: 16px; display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--surface); color: var(--brand-deep); font-size: 13px; font-weight: 600; box-shadow: 0 10px 18px -10px rgba(10,30,20,.4); } /* 1: a phone receiving an offer */ .gv-phone { width: 128px; height: 168px; margin-top: 34px; padding: 22px 10px 10px; border-radius: 22px 22px 0 0; background: linear-gradient(160deg, #2a302c, #0f1311); border: 5px solid #1b211d; border-bottom: 0; display: grid; align-content: start; gap: 10px; box-shadow: 0 20px 30px -16px rgba(0,0,0,.55); } .gv-notch { position: absolute; inset-block-start: 6px; inset-inline: 0; margin-inline: auto; width: 34px; height: 8px; border-radius: 6px; background: #000; } .gv-toast { display: flex; align-items: center; gap: 7px; padding: 7px; border-radius: 11px; background: #fff; box-shadow: 0 8px 14px -8px rgba(0,0,0,.6); animation: kdFloat 5s ease-in-out infinite; } .gv-toast .gv-ic { width: 24px; height: 24px; border-radius: 8px; } .gv-toast b { display: block; font-size: 10.5px; line-height: 1.2; color: var(--ink); } .gv-toast small { display: block; font-size: 8.5px; line-height: 1.3; color: var(--muted); } .gv-lines i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.18); margin-bottom: 7px; } .gv-lines i.s { width: 60%; } .gv-wave { position: absolute !important; inset-block-start: 62px; inset-inline-end: calc(50% - 98px); width: 34px; height: 34px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--brand) 50%, transparent); animation: kdWave 2.6s ease-out infinite; } .gv-wave.w2 { animation-delay: 1.3s; } @keyframes kdWave { from { transform: scale(.4); opacity: .9; } to { transform: scale(2.2); opacity: 0; } } /* 2: a membership card */ .gv-member { position: relative; width: 190px; height: 118px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, var(--brand-2), var(--brand-deep)); color: #fff; box-shadow: 0 20px 30px -16px rgba(10,30,20,.65); display: grid; align-content: end; gap: 6px; transform: rotate(-3deg); } .gv-member b { font-size: 16px; font-weight: 600; } .gv-member small { font-size: 11px; opacity: .85; } .gv-chip { position: absolute; inset-block-start: 14px; inset-inline-start: 16px; width: 34px; height: 24px; border-radius: 6px; background: linear-gradient(145deg, var(--gold-2), var(--gold)); } .gv-star { position: absolute; inset-block-start: 12px; inset-inline-end: 14px; color: var(--star); } .gv-meter { height: 6px; border-radius: 3px; background: rgba(255,255,255,.28); } .gv-meter i { height: 100%; width: var(--w); border-radius: 3px; background: var(--star); } /* 3: a podium */ .gv-podium { display: flex; align-items: flex-end; gap: 8px; height: 118px; margin-bottom: 30px; } .gv-podium > div { position: relative; width: 52px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, color-mix(in oklab, var(--brand) 55%, var(--surface)), var(--brand)); } .gv-podium .p1 { height: 110px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); } .gv-podium .p2 { height: 78px; } .gv-podium .p3 { height: 56px; } .gv-podium i { position: absolute; inset-inline: 10px; inset-block-end: 10px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.55); } .gv-medal { position: absolute; inset-block-start: -22px; inset-inline: 0; margin-inline: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--gold); box-shadow: 0 8px 14px -6px rgba(0,0,0,.4); } /* 4: ready services, as round tiles */ .gv-tiles { display: grid; grid-template-columns: repeat(3, 56px); gap: 12px; margin-bottom: 26px; } .gv-tiles span { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--brand); box-shadow: 0 12px 20px -12px rgba(10,30,20,.5); border: 3px solid #fff; } .gv-tiles span:nth-child(even) { color: var(--gold); } .gv-tiles span:nth-child(3n+2) { transform: translateY(8px); } /* 5: a shelf and a low-stock warning */ .gv-shelf { display: flex; align-items: flex-end; gap: 12px; height: 96px; padding: 0 14px 8px; border-bottom: 5px solid color-mix(in oklab, var(--brand) 35%, var(--surface)); margin-bottom: 36px; } .gv-shelf .it { width: 36px; height: 100%; display: flex; align-items: flex-end; } .gv-shelf .it i { width: 100%; height: var(--h); border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); } .gv-shelf .it.low i { background: linear-gradient(180deg, #F0A097, #E5766B); } .gv-alert { position: absolute !important; inset-block-end: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 6px; border-radius: 999px; background: var(--surface); box-shadow: 0 10px 18px -10px rgba(10,30,20,.45); } :root[dir="rtl"] .gv-alert { padding: 5px 6px 5px 14px; } .gv-alert b { font-size: 13px; font-weight: 600; color: var(--ink); } /* 6: a ticket being amended */ .gv-ticket { width: 200px; display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: 0 18px 28px -16px rgba(10,30,20,.5); transform: rotate(2deg); } .gv-ticket .r { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; background: var(--surface-2); } .gv-ticket .n { flex: 0 0 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--brand-soft); color: var(--brand-deep); } .gv-ticket .r i { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--ink) 15%, transparent); } .gv-ticket .op { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; line-height: 1; color: #fff; background: var(--brand); } .gv-ticket .op.m { background: #E5766B; } .gv-ticket .log { background: transparent; padding-inline: 0; } .gv-ticket .log b { font-size: 12.5px; font-weight: 600; color: var(--ink); } @media (prefers-reduced-motion: reduce) { .gv-toast, .gv-wave { animation: none; } } /* ── payment methods under the footer columns ── */ .foot-pay { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 34px; padding-top: 22px; border-top: 1px solid color-mix(in oklab, var(--brand) 16%, var(--border)); } .foot-pay__label { font-size: 14px; font-weight: 600; color: var(--ink); } .foot-pay ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .foot-pay .pay { display: grid; place-items: center; width: 74px; height: 44px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 8px 16px -12px rgba(10,30,20,.4); transition: transform .2s, box-shadow .2s; } .foot-pay .pay:hover { transform: translateY(-3px); box-shadow: 0 14px 22px -12px rgba(10,30,20,.45); } .foot-pay .pay img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; } .foot-pay .pay__name { font-size: 13px; font-weight: 700; color: var(--brand-deep); letter-spacing: .01em; } footer .foot-bottom { margin-top: 22px; border-top: 0; padding-top: 0; } @media (max-width: 600px) { .foot-pay .pay { width: 64px; height: 40px; } } /* reports: seven cards, the last two sharing a row */ .rp-6, .rp-7 { grid-column: span 3; } .rp-6 .rp-shot, .rp-7 .rp-shot { aspect-ratio: 16 / 7; } @media (max-width: 1000px) { .rp-6, .rp-7 { grid-column: span 1; } .rp-7 { grid-column: 1 / -1; } } @media (max-width: 600px) { .rp-7 { grid-column: auto; } } /* footer row: download buttons at one end, payment logos at the other, every logo in a card of the same size */ .foot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 28px; margin-top: 34px; padding-top: 24px; border-top: 1px solid color-mix(in oklab, var(--brand) 16%, var(--border)); } .foot-row .store-row--foot { margin: 0; flex-wrap: nowrap; } .foot-pay { border: 0 !important; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 10px; list-style: none; } .foot-pay .pay { width: 78px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 16px -12px rgba(10,30,20,.4); overflow: hidden; } .foot-pay .pay img { display: block; width: auto; height: auto; max-width: 56px; max-height: 24px; object-fit: contain; } .foot-pay .pay--mastercard img { max-height: 28px; } .foot-pay .pay--mada img { max-width: 52px; max-height: 26px; } .foot-pay .pay--tabby img, .foot-pay .pay--tamara img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; } .foot-pay .pay--tabby, .foot-pay .pay--tamara { background: transparent; border-color: transparent; box-shadow: none; } .foot-pay .pay--tabby img { border-radius: 11px; } .foot-pay .pay--tamara img { border-radius: 12px; object-fit: contain; } footer .foot-bottom { margin-top: 20px; } @media (max-width: 700px) { .foot-row { flex-direction: column; align-items: flex-start; } .foot-pay .pay { width: 68px; height: 42px; } } .foot-pay .pay img { max-width: 62px; max-height: 28px; } .foot-pay .pay--mastercard img { max-height: 32px; } .foot-pay .pay--visa img { max-height: 30px; } .foot-pay .pay--tamara img { max-width: 100%; max-height: 100%; } /* payment logos: no card behind any of them, all on the footer itself at one height */ .foot-pay { gap: 18px 24px; align-items: center; } .foot-pay .pay, .foot-pay .pay--tabby, .foot-pay .pay--tamara { width: auto; height: 34px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; transition: transform .2s; } .foot-pay .pay:hover { transform: translateY(-3px); box-shadow: none; } .foot-pay .pay img, .foot-pay .pay--tabby img, .foot-pay .pay--tamara img { width: auto; height: 34px; max-width: none; max-height: none; object-fit: contain; border-radius: 0; } .foot-pay .pay--mada img { height: 36px; } .foot-pay .pay--visa img { height: 26px; } .foot-pay .pay--mastercard img { height: 38px; } .foot-pay .pay--applepay img { height: 34px; } .foot-pay .pay--tabby img { height: 32px; border-radius: 9px; } .foot-pay .pay--tamara img { height: 30px; border-radius: 9px; } @media (max-width: 700px) { .foot-pay { gap: 14px 18px; } .foot-pay .pay img { height: 28px !important; } .foot-pay .pay--mastercard img { height: 32px !important; } .foot-pay .pay--visa img { height: 22px !important; } } /* ── small screens: the header stays one slim line ── */ @media (max-width: 700px) { #nav .nav-in { gap: 10px; } #nav .nav-cta { gap: 8px; margin-inline-start: auto; } #nav .nav-cta .btn { white-space: nowrap; padding: 9px 14px; font-size: 13px; border-radius: 12px; box-shadow: none; gap: 6px; } #nav .nav-cta .btn svg { width: 13px; height: 13px; } #nav .lang-btn { width: 36px; height: 36px; font-size: 12.5px; } #nav .logo__img { height: 34px; max-width: 150px; } } @media (max-width: 380px) { #nav .nav-cta .btn { padding: 8px 11px; font-size: 12px; } #nav .logo__img { height: 30px; max-width: 124px; } } /* payment logos are clean transparent files now: one row, a common height */ .foot-pay { gap: 16px 26px; } .foot-pay .pay img, .foot-pay .pay--tabby img, .foot-pay .pay--tamara img, .foot-pay .pay--mada img, .foot-pay .pay--visa img, .foot-pay .pay--mastercard img, .foot-pay .pay--applepay img { height: 30px; width: auto; border-radius: 0; } .foot-pay .pay--mada img { height: 32px; } .foot-pay .pay--visa img { height: 22px; } .foot-pay .pay--mastercard img { height: 32px; } .foot-pay .pay--tabby img { height: 28px; border-radius: 8px; } .foot-pay .pay--tamara img { height: 28px; border-radius: 8px; } @media (max-width: 700px) { .foot-pay .pay img { height: 26px !important; } .foot-pay .pay--visa img { height: 19px !important; } .foot-pay .pay--mastercard img, .foot-pay .pay--mada img { height: 28px !important; } .foot-pay .pay--tabby img, .foot-pay .pay--tamara img { height: 24px !important; } } @media (max-width: 400px) { .fc { width: 138px; padding: 7px 9px; gap: 8px; } .fc b { font-size: 12px; } .fc-i { width: 28px; height: 28px; border-radius: 9px; } .fc-a { inset-block-start: 4%; } .fc-b { inset-block-end: 6%; } } /* tablet and phone: the cards float around the phone, not out to the edges of the window */ @media (max-width: 900px) { .app-cards { justify-self: center; width: 100%; max-width: 440px; } .app-phone { justify-self: center; } .fc-a { inset-inline-end: 0; } .fc-b { inset-inline-start: 0; } } /* ── money: the flow, then three drawn scenes ── */ .mn-sec { padding-block: var(--sec-y, 64px); } .mn-flow { margin-bottom: 40px; } .mn-cards { margin-top: 8px; } .mv-cards { display: grid; gap: 10px; width: 210px; } .mv-pay { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: 12px; background: var(--surface); box-shadow: 0 12px 20px -12px rgba(10,30,20,.5); } .mv-pay img { height: 22px; width: auto; display: block; } .mv-pay--mada img { height: 26px; } .mv-pay--visa img { height: 17px; } .mv-pay:nth-child(1) { transform: translateX(-14px) rotate(-2deg); } .mv-pay:nth-child(3) { transform: translateX(14px) rotate(2deg); } :root[dir="rtl"] .mv-pay:nth-child(1) { transform: translateX(14px) rotate(2deg); } :root[dir="rtl"] .mv-pay:nth-child(3) { transform: translateX(-14px) rotate(-2deg); } .mv-req { width: 200px; padding: 14px; border-radius: 16px; background: var(--surface); box-shadow: 0 18px 28px -16px rgba(10,30,20,.5); display: grid; gap: 12px; } .mv-req .top { display: flex; align-items: center; gap: 10px; } .mv-req .top i { flex: 1; height: 7px; border-radius: 4px; background: color-mix(in oklab, var(--ink) 15%, transparent); } .mv-req .top i.s { flex: .6; } .mv-req .amt b { display: block; width: 62%; height: 18px; border-radius: 6px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); } .mv-req .st { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 5px 12px; border-radius: 999px; background: #FFF4DD; color: #9A6B0B; font-size: 12.5px; font-weight: 600; } .mv-req .st .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--star); animation: kdPulse 1.8s ease-in-out infinite; } .mv-rows { width: 220px; display: grid; gap: 9px; } .mv-rows .rw { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface); box-shadow: 0 10px 18px -12px rgba(10,30,20,.45); } .mv-rows .ty { flex: 0 0 22px; height: 22px; border-radius: 7px; background: var(--brand-soft); } .mv-rows .ty.b { background: var(--gold-soft); } .mv-rows .ty.r { background: #FBE3E0; } .mv-rows .rw i { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--ink) 14%, transparent); } .mv-rows .rw b { width: 38px; height: 8px; border-radius: 4px; background: var(--brand); opacity: .85; }