/* ========================================================== RentyCloud — public home page, built from the house libraries: NavLab N05 · HeroLab H02 / H03 / H06 · CardKit · ButtonLab · FooterLab F04. Lab blocks keep their class names; colours come from the brand tokens below. ========================================================== */ [data-site="ijar"] { --brand: #0A8FC7; --brand-rgb: 10, 143, 199; --brand-ink: #0477A8; --accent: #F6B233; --accent-rgb: 246, 178, 51; --deep: #0B2B44; --deep-2: #123A5A; --ink: #10263A; --muted: #4F6476; --page: #ffffff; --surface: #ffffff; --surface-2: #F1F7FA; --line: #DCE7EF; --warn: #5f4aa6; --warn-bg: #f7f5fd; --shadow-hover: var(--shadow-lg); --pad: clamp(20px, 2vw, 28px); } [data-site="ijar"][data-bs-theme="dark"] { --brand: #2AA3DB; --brand-rgb: 42, 163, 219; --brand-ink: #8FD3F2; --accent: #F8C15A; --accent-rgb: 248, 193, 90; --deep: #061A2B; --deep-2: #0B2B44; --ink: #E6F0F7; --muted: #9DB3C6; --page: #07131F; --surface: #0D1D2C; --surface-2: #0A1826; --line: #1D3549; --warn: #b9a6ff; --warn-bg: rgba(167,139,250,.09); } body { background: var(--page); color: var(--ink); } small { font-size: 15px; } .num { direction: ltr; unicode-bidi: isolate; display: inline-block; white-space: nowrap; } .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .wrap { max-width: 1440px; } /* ---------- ButtonLab: shine effect + icon tiles ---------- */ .fx-shine { position: relative; isolation: isolate; overflow: hidden; } .fx-shine::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(120%); transition: transform 700ms ease; } .fx-shine:hover::before { transform: translateX(-120%); } .ic { --s: 48px; display: inline-grid; place-items: center; flex: 0 0 auto; width: var(--s); height: var(--s); border-radius: calc(var(--s) * .3); font-size: calc(var(--s) * .44); line-height: 1; position: relative; } .ic-soft { background: rgba(var(--brand-rgb), .1); color: var(--brand-ink); } .ic-squircle { border-radius: 38%; } /* ========================================================== NavLab — header base + N05 (sliding indicator) ========================================================== */ .nx { container-type: inline-size; position: relative; z-index: 20; font-family: var(--font); color: var(--ink); line-height: 1.6; } :where(.nx) a, :where(.nx) a:hover { color: inherit; text-decoration: none; } .nx-bar { display: flex; align-items: center; gap: clamp(8px, 2cqi, 22px); min-height: 72px; padding: 10px clamp(14px, 3.5cqi, 40px); max-width: 1440px; margin-inline: auto; } .nx-logo { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; font-weight: 800; font-size: 20px; flex: 0 0 auto; } .nx-mark { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 1.1rem; flex: 0 0 auto; } .nx-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 .85rem; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: 600 16px var(--font); white-space: nowrap; cursor: pointer; transition: background var(--ease), color var(--ease); } .nx-end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; } .nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: 0 1.15rem; border-radius: 12px; border: 1px solid transparent; background: var(--brand); color: #fff !important; font: 700 16px var(--font); white-space: nowrap; cursor: pointer; transition: filter var(--ease), background var(--ease); } .nx-btn:hover { filter: brightness(1.08); } .nx-ico { position: relative; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 1.15rem; cursor: pointer; } .nx-ico:hover { background: var(--surface-2); } .nx-burger { display: none; place-items: center; align-content: center; gap: 4px; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; } .nx-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--ease), opacity var(--ease); } .nx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nx-drawer { position: absolute; top: 100%; inset-inline: 10px; z-index: 30; margin-top: 8px; padding: 10px; max-height: min(560px, calc(100svh - 110px)); overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-hover); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms; } .nx-drawer.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 200ms ease, transform 200ms ease; } .nx-drawer > a:not(.nx-btn) { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 50px; padding: 0 .9rem; border-radius: 12px; font-weight: 700; } .nx-drawer > a:not(.nx-btn):hover { background: var(--surface-2); } .nx-drawer .nx-btn { width: 100%; margin-top: 8px; } .nx-drawer hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; opacity: 1; } .nx-scrim { position: fixed; inset: 0; z-index: 25; background: rgba(8,10,22,.45); visibility: hidden; opacity: 0; transition: opacity 200ms ease, visibility 0s 200ms; } .is-open + .nx-scrim { visibility: visible; opacity: 1; transition: opacity 200ms ease; } /* the full bar is about 1130px wide in Arabic and 1115px in English (logo + section links + language, theme, sign-in, trial), so below 1180px it folds into the menu */ @container (max-width: 1180px) { .nx-wide { display: none !important; } .nx-burger { display: grid; } } @container (min-width: 1181px) { .nx-drawer { display: none !important; } } .n-ind { background: var(--surface); border-bottom: 1px solid var(--line); } .n-ind .announce { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .2rem .6rem; min-height: 48px; padding: 4px 56px; text-align: center; font-size: 15px; font-weight: 600; color: #fff; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 45%, var(--deep))); } .n-ind .announce a { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 40px; } .n-ind .announce .x { position: absolute; inset-inline-end: 4px; top: 2px; width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; } .n-ind[hidden] { display: none; } .n-ind.ann { border: 0; } .n-ind .track { position: relative; display: flex; gap: 2px; padding: 5px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); } .n-ind .track .ind { position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 11px; background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.12); transition: transform 280ms cubic-bezier(.3,.7,.2,1), width 280ms cubic-bezier(.3,.7,.2,1); } .n-ind .track .nx-link { position: relative; z-index: 1; background: transparent !important; } .n-ind .track .nx-link:hover, .n-ind .track .nx-link[aria-current="true"] { color: var(--ink); } .n-ind .login { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; font-weight: 700; } .site-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); } html { scroll-padding-top: 84px; } /* ========================================================== HeroLab — hero base ========================================================== */ .hx { container-type: inline-size; position: relative; overflow: hidden; isolation: isolate; font-family: var(--font); color: var(--ink); line-height: 1.7; } .hx h1, .hx h2, .hx h3, .hx p { margin: 0; color: inherit; font-family: var(--font); } :where(.hx) a { color: inherit; text-decoration: none; } :where(.hx) a:hover { color: inherit; } .hx-in { position: relative; max-width: 1440px; margin-inline: auto; padding: clamp(36px, 7cqi, 96px) clamp(20px, 5.5cqi, 80px); } .hx-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5cqi, 72px); align-items: center; } .hx-tag { display: inline-flex; align-items: center; gap: .5rem; padding: .25rem .95rem; border-radius: 999px; font-size: 15px; font-weight: 700; background: rgba(var(--brand-rgb), .1); color: var(--brand-ink); } .hx-title { font-size: clamp(34px, 6.4cqi, 78px); font-weight: 800; line-height: 1.25; margin-top: 1.1rem !important; } .hx-lead { font-size: clamp(16px, 1.9cqi, 19px); line-height: 1.9; color: var(--muted); max-width: 600px; margin-top: 1.1rem !important; } .hx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 2rem; } .hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 56px; padding: 0 1.6rem; border-radius: 14px; font: 700 17px var(--font); border: 1px solid transparent; cursor: pointer; transition: transform var(--ease), box-shadow var(--ease), background var(--ease), filter var(--ease); } .hx-btn:active { transform: translateY(1px); } .hx-btn-primary { background: var(--brand); color: #fff !important; box-shadow: 0 12px 26px rgba(var(--brand-rgb), .32); } .hx-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 14px 32px rgba(var(--brand-rgb), .42); } .hx-btn i { transition: transform var(--ease); } .hx-btn:hover .bi-arrow-left { transform: translateX(-4px); } @container (max-width: 860px) { .hx-split { grid-template-columns: minmax(0, 1fr); } } @container (max-width: 480px) { .hx-actions .hx-btn { width: 100%; } } /* ---------- H02 · dark manifesto (deep navy, pointer spotlight, rotating ending) ---------- */ .h-dark .hx-in { --mx: 30%; --my: 35%; max-width: none; color: #fff; padding-bottom: clamp(120px, 12cqi, 170px); } .h-dark { background: var(--deep); } .h-dark .hx-in::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(420px circle at var(--mx) var(--my), #000, transparent 75%); mask-image: radial-gradient(420px circle at var(--mx) var(--my), #000, transparent 75%); } .h-dark .hx-in::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(var(--brand-rgb), .45), transparent 65%); } .h-dark .hx-split { position: relative; max-width: 1440px; margin-inline: auto; } .h-dark .hx-tag { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.16); } .h-dark .hx-tag i { color: #4ade80; font-size: .6rem; } .h-dark .hx-title { font-size: clamp(36px, 5.2cqi, 70px); } .h-dark .rot { display: inline-block; height: 1.25em; overflow: hidden; vertical-align: top; } .h-dark .rot > span { display: flex; flex-direction: column; animation: hx-rot 9s cubic-bezier(.7,0,.3,1) infinite; } .h-dark .rot b { display: block; height: 1.25em; font-weight: 800; white-space: nowrap; background: linear-gradient(90deg, #8FD3F2, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } @keyframes hx-rot { 0%, 27% { transform: translateY(0); } 33%, 60% { transform: translateY(-1.25em); } 66%, 94% { transform: translateY(-2.5em); } 100% { transform: translateY(-3.75em); } } .h-dark .hx-lead { color: rgba(255,255,255,.75); } .h-dark .play { display: inline-flex; align-items: center; gap: .75rem; min-height: 56px; font-weight: 700; color: #fff; } .h-dark .play i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); font-size: 1.2rem; transition: background var(--ease); } .h-dark .play:hover i { background: rgba(255,255,255,.2); } .h-dark .stats { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-top: clamp(28px, 4cqi, 52px); padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); } .h-dark .stats b { display: block; font-size: clamp(28px, 3.2cqi, 40px); font-weight: 800; line-height: 1.3; color: #fff; } .h-dark .stats div > span { color: rgba(255,255,255,.68); font-size: 15px; } @container (max-width: 480px) { .h-dark .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .h-dark .stats div > span { display: block; line-height: 1.6; } } /* the contract wizard on a phone, inside the dark hero */ .demo { position: relative; padding: 40px 10px 70px; display: grid; justify-items: center; } .phone { position: relative; z-index: 1; width: min(100%, 400px); background: #fff; color: #10263A; border-radius: 34px; box-shadow: 0 40px 90px rgba(0,0,0,.45); padding: 22px 20px 20px; outline: 8px solid #050c14; outline-offset: -1px; --surface: #fff; --surface-2: #F1F7FA; --line: #DCE7EF; --ink: #10263A; --muted: #4F6476; --brand-ink: #0477A8; } .phone-top { display: flex; justify-content: space-between; align-items: center; font-weight: 800; } .phone-top { font-size: 19px; margin-bottom: 12px; } .phone-top .q { display: inline-flex; gap: .3rem; align-items: center; padding: .05rem .7rem; border-radius: 999px; background: rgba(10,143,199,.1); color: #0477A8; font-size: 15px; } .mini-car svg { width: 100%; height: auto; display: block; } .dmg-car .body { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; } .dmg-car .glass { fill: rgba(10,143,199,.15); stroke: var(--muted); stroke-width: 1.5; } .dmg-car .roof { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; } .dmg-car .wheel { fill: var(--ink); } .dmg-car .lbl { fill: var(--muted); font: 700 11px var(--font); text-anchor: middle; } .dmg-car .mk { stroke: #fff; stroke-width: 2.5; } .dmg-car .mk.dent { fill: #dc2626; } .dmg-car .mk.scratch { fill: #d97706; } .dmg-car .mk-n { fill: #fff; font: 800 13px var(--font); text-anchor: middle; } .dmg-car .mk:first-of-type { animation: pop 6s ease infinite; transform-box: fill-box; transform-origin: center; } @keyframes pop { 0%, 30% { transform: scale(0); } 38% { transform: scale(1.25); } 44%, 100% { transform: scale(1); } } .shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .shots span { display: flex; align-items: center; gap: .3rem; justify-content: center; padding: 6px; border-radius: 10px; border: 1.5px solid #15803d; color: #15803d; font-weight: 700; } .shots span.wait { border-style: dashed; border-color: #DCE7EF; color: #4F6476; } .sign { margin-top: 14px; padding: 10px 14px 6px; border-radius: 16px; border: 1.5px dashed #DCE7EF; color: #123A5A; text-align: center; } .sign svg { width: 70%; height: 42px; stroke-dasharray: 520; stroke-dashoffset: 520; animation: write 6s ease infinite; } @keyframes write { 0%, 45% { stroke-dashoffset: 520; } 75%, 100% { stroke-dashoffset: 0; } } .sign span { display: block; color: #4F6476; font-size: 15px; font-weight: 700; } .chip-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: .7rem; padding: 12px 16px; border-radius: 18px; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(0,0,0,.3); font-size: 15px; line-height: 1.5; } .chip-float .ico { width: 42px; height: 42px; border-radius: 13px; font-size: 1.15rem; } .chip-float b { display: block; font-size: 15px; } .chip-float small { color: rgba(255,255,255,.75); } .cf-wa { top: 0; inset-inline-start: -10px; animation: bob 5s ease-in-out infinite; } .cf-wa .ico { background: #017672; color: #fff; } /* Wamy teal (was WhatsApp green) */ .cf-late { bottom: 6px; inset-inline-end: 0; animation: bob 5s ease-in-out 1.4s infinite; } .cf-late .ico { background: #ef4444; color: #fff; } @keyframes bob { 50% { transform: translateY(-8px); } } /* ---------- paper vs system: tiles riding over the hero's edge ---------- */ .pv { position: relative; z-index: 2; margin-top: clamp(-120px, -9vw, -80px); } .pv-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .pv-head { grid-row: span 2; } .pv-head { padding: clamp(20px, 2vw, 28px); border-radius: var(--radius); background: var(--accent); color: #241a00; display: flex; flex-direction: column; justify-content: center; } .pv-head h2 { font-size: clamp(24px, 2.2vw, 30px); margin: 0 0 .4rem; color: inherit; } .pv-head p { margin: 0; color: rgba(36,26,0,.8); font-weight: 600; } .pv-tile { display: flex; flex-direction: column; gap: .7rem; padding: clamp(18px, 1.8vw, 24px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); min-width: 0; } .pv-tile .before { margin: 0; display: flex; gap: .55rem; align-items: flex-start; color: var(--muted); line-height: 1.7; padding-bottom: .7rem; border-bottom: 1px dashed var(--line); } .pv-tile .before > i { color: var(--danger); font-size: 1.25rem; margin-top: .1rem; flex: 0 0 auto; opacity: .8; } .pv-tile .after { margin: auto 0 0; display: flex; gap: .55rem; align-items: flex-start; font-weight: 700; font-size: 17px; color: var(--ink); line-height: 1.7; } .pv-tile .after > i { color: var(--ok); font-size: 1.25rem; margin-top: .1rem; flex: 0 0 auto; } /* ========================================================== CardKit — card base (used by the scroller and the plans) ========================================================== */ .ck-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; transition: transform var(--ease), box-shadow var(--ease), border-color var(--ease); } .ck-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(var(--brand-rgb), .22); } .ck-body { padding: var(--pad); display: flex; flex-direction: column; flex: 1; } .ck-title { font-size: 20px; font-weight: 800; margin: 0 0 .4rem; } .ck-title.lg { font-size: clamp(22px, 2vw, 26px); } .ck-body p { color: var(--muted); margin: 0 0 1rem; } .push { margin-top: auto; } .checks { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .7rem; } .checks li { display: flex; gap: .6rem; align-items: flex-start; } .checks i { color: var(--ok); margin-top: .15rem; } .featured-plan { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--brand), var(--accent)) border-box; box-shadow: 0 18px 44px rgba(var(--brand-rgb), .18); } .featured-plan .glow { position: absolute; inset-block-start: -110px; inset-inline-end: -110px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--brand-rgb), .14), transparent); pointer-events: none; } /* ---------- features: sideways scroller ---------- */ .hs { padding-block: clamp(56px, 7vw, 104px) clamp(48px, 6vw, 88px); } .hs-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(20px, 2.4vw, 32px); } .hs-top h2 { font-size: clamp(28px, 3.2vw, 44px); margin: .6rem 0 .4rem; text-wrap: balance; } .hs-top p { margin: 0; color: var(--muted); font-size: 17px; } .hs-ctl { display: flex; align-items: center; gap: 8px; } .hs-count { font-weight: 700; color: var(--muted); margin-inline-end: .6rem; font-size: 17px; } .hs-count b { color: var(--ink); font-size: 24px; } .hs-track { --gut: clamp(16px, 3.5vw, 48px); --edge: max(var(--gut), calc((100% - 1440px) / 2 + var(--gut))); display: grid; grid-auto-flow: column; grid-auto-columns: clamp(290px, 30vw, 440px); gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 6px var(--edge) 22px; scrollbar-width: none; } .hs-track::-webkit-scrollbar { display: none; } .hs-track:focus-visible { outline-offset: -3px; } .hs-card { scroll-snap-align: start; } .hs-card.wide { grid-column: span 2; } .hs-art { position: relative; height: 230px; padding: 22px; display: grid; align-content: center; background: radial-gradient(rgba(var(--brand-rgb), .16) 1.2px, transparent 1.2px) 0 0 / 16px 16px, var(--surface-2); border-bottom: 1px solid var(--line); } .hs-area { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .6rem; padding: .1rem .75rem; border-radius: 999px; background: rgba(var(--brand-rgb), .1); color: var(--brand-ink); font-size: 15px; font-weight: 800; } .hs-card h3 { color: var(--ink); } .hs-bar { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; } .hs-bar i { display: block; height: 100%; width: var(--p, 14%); min-width: 14%; border-radius: inherit; background: var(--brand); transition: width 200ms ease; } .scan { grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; } .qr { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--shadow); aspect-ratio: 1; } .qr i { border-radius: 2px; background: #e5e7eb; } .qr i.on { background: #0B2B44; } .slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .slots span { display: flex; align-items: center; gap: .5rem; padding: 14px 12px; border-radius: 14px; border: 1.5px dashed var(--line); background: var(--surface); font-weight: 700; font-size: 15px; color: var(--muted); } .slots span.done { border: 1.5px solid var(--ok); color: var(--ink); } .slots span.done i { color: var(--ok); } .facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .facts li { display: inline-flex; align-items: center; gap: .45rem; padding: 6px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: 15px; } .facts i { color: var(--brand-ink); } .tl { gap: 10px; } .tl > div:not(.tl-key) { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 8px; } .tl > div > span { font-size: 15px; font-weight: 700; color: var(--muted); } .tl b { position: relative; height: 30px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); } .tl b i { position: absolute; top: 5px; bottom: 5px; border-radius: 6px; } .tl .c { background: var(--brand); } .tl .b { background: #6d55c4; } .tl .l { background: var(--danger); } .tl-key { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-inline-start: 70px; font-size: 15px; color: var(--muted); font-weight: 600; } .tl-key > span { white-space: nowrap; } .tl-key i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-inline-end: 5px; vertical-align: -1px; } .book { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); font-weight: 700; } .book b { font-size: 26px; color: var(--brand-ink); } .book small { color: var(--muted); width: 100%; } .pay { gap: 12px; } .paylink { display: flex; align-items: center; gap: .5rem; padding-inline: 14px 8px; padding-block: 12px; border-radius: 14px; background: var(--brand); color: #fff; font: 600 15px var(--mono); direction: ltr; } .paylink span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .paid { justify-self: start; display: inline-flex; align-items: center; gap: .45rem; padding: 8px 14px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-weight: 800; } .settle { gap: 8px; font-size: 16px; } .settle div { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px dashed var(--line); } .settle div:last-child { border: 0; color: var(--ok); font-weight: 800; } .pbars { display: flex; align-items: flex-end; gap: 12px; height: 160px; } .pbars i { flex: 1; border-radius: 10px 10px 4px 4px; background: rgba(var(--brand-rgb), .3); } .pbars i.on { background: var(--brand); } .pbars i.neg { background: var(--danger); opacity: .75; } .hs-more { background: var(--deep); border-color: transparent; color: #fff; } .hs-more .ck-title, .hs-more h3 { color: #fff; } .hs-more .hs-area { background: rgba(255,255,255,.12); color: var(--accent); } .hs-more ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: 6px; } .hs-more li { display: flex; align-items: center; gap: .6rem; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-weight: 600; } .hs-more li:last-child { border: 0; } .hs-more li i { color: var(--accent); font-size: 1.1rem; } /* ---------- H03 · gradient band with staggered steps ---------- */ .h-grad { color: #fff; background: #0B5A84; } .h-grad .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .85; pointer-events: none; z-index: 0; animation: hx-drift 16s ease-in-out infinite alternate; } .h-grad .b1 { width: 60%; aspect-ratio: 1; background: var(--brand); top: -30%; inset-inline-start: -10%; } .h-grad .b2 { width: 50%; aspect-ratio: 1; background: #0B2B44; bottom: -40%; inset-inline-start: 30%; animation-delay: -5s; } .h-grad .b3 { width: 40%; aspect-ratio: 1; background: color-mix(in srgb, var(--accent) 70%, transparent); top: -18%; inset-inline-end: -14%; animation-delay: -9s; opacity: .3; } @keyframes hx-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(6%, 8%) scale(1.12); } } .h-grad::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px); background-size: 22px 22px; opacity: .22; pointer-events: none; } .h-grad .hx-in { z-index: 1; } .h-grad .hx-tag { background: rgba(255,255,255,.14); color: #fff; } .h-grad .hx-title { font-size: clamp(32px, 5cqi, 64px); } .h-grad .hx-lead { color: rgba(255,255,255,.88); } .h-grad .btn-white { background: #fff; color: #0B5A84 !important; box-shadow: 0 12px 30px rgba(0,0,0,.18); } .h-grad .launch { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .h-grad .step { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 22px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .h-grad .step:nth-child(2) { margin-inline-start: 8%; } .h-grad .step:nth-child(3) { margin-inline-start: 16%; background: #fff; color: #10263A; } .h-grad .step .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.18); font-size: 1.35rem; flex: 0 0 auto; } .h-grad .step:nth-child(3) .ic { background: #E6F4FA; color: #0A8FC7; } .h-grad .step > div { flex: 1; min-width: 0; } .h-grad .step b { display: block; font-size: 18px; } .h-grad .step small { display: block; font-size: 15px; opacity: .88; line-height: 1.7; } .h-grad .step .ok { margin-inline-start: auto; color: #86efac; font-size: 1.4rem; flex: 0 0 auto; } .h-grad .bar { display: block; height: 8px; border-radius: 9px; background: #E6F4FA; margin-top: .5rem; overflow: hidden; } .h-grad .bar span { display: block; height: 100%; width: 72%; border-radius: inherit; background: linear-gradient(90deg, #0A8FC7, var(--accent)); animation: hx-fill 2.4s cubic-bezier(.2,.7,.3,1) both; } @keyframes hx-fill { from { width: 0; } } @container (max-width: 860px) { .h-grad .step:nth-child(2), .h-grad .step:nth-child(3) { margin-inline-start: 0; } } /* ---------- H06 · app window: the side rail switches roles ---------- */ .rl { container-type: inline-size; } .dash { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 40px 80px rgba(20,26,46,.14); overflow: hidden; } .dash-top { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .dash-top i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); display: block; } .dash-top span { margin-inline-start: auto; font-size: 15px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0 .9rem; direction: ltr; } .dash-in { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 420px; } .dash .side { background: var(--surface-2); border-inline-end: 1px solid var(--line); display: grid; align-content: start; gap: 6px; padding: 16px 12px; } .dash .side button { display: flex; align-items: center; gap: .7rem; min-height: 52px; padding: 0 .9rem; border: 1px solid transparent; border-radius: 14px; background: transparent; color: var(--muted); font: 700 16px var(--font); text-align: start; cursor: pointer; transition: background var(--ease), color var(--ease); } .dash .side button i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); font-size: 1.05rem; flex: 0 0 auto; } .dash .side button:hover { color: var(--ink); background: var(--surface); } .dash .side button[aria-selected="true"] { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); } .dash .side button[aria-selected="true"] i { background: var(--brand); border-color: var(--brand); color: #fff; } .dash .main { padding: clamp(18px, 2.4vw, 32px); min-width: 0; } .role { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: center; } .role[hidden] { display: none; } .role h3 { font-size: clamp(22px, 2.2vw, 30px); margin: 0; text-wrap: balance; } .ticks { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; } .ticks li { display: flex; gap: .7rem; align-items: flex-start; } .ticks li::before { content: "\F26E"; font-family: "bootstrap-icons"; flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; margin-top: .2rem; border-radius: 50%; background: rgba(var(--brand-rgb), .12); color: var(--brand-ink); font-size: 1rem; } .role-ui { position: relative; display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); } .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .kpi { padding: .7rem .9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); min-width: 0; } .kpi > span { font-size: 15px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kpi b { font-size: 28px; font-weight: 800; display: block; line-height: 1.3; } .kpi.bad b { color: var(--danger); } .kpi.ok b { color: var(--ok); } .chart { padding: .8rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); } .chart-h { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; margin-bottom: .6rem; } .chart-h > span { color: var(--muted); font-weight: 500; } .cbars { display: flex; align-items: flex-end; gap: 6px; height: 110px; direction: ltr; } .cbars i { flex: 1; border-radius: 6px 6px 3px 3px; background: rgba(var(--brand-rgb), .2); transform-origin: bottom; animation: hx-grow 900ms cubic-bezier(.2,.7,.3,1) both; } .cbars i:nth-child(odd) { animation-delay: 120ms; } .cbars i:nth-child(3n) { animation-delay: 240ms; } .cbars i.on { background: var(--brand); } @keyframes hx-grow { from { transform: scaleY(0); } } .dash-toast { position: absolute; bottom: -20px; inset-inline-start: 18px; display: flex; align-items: center; gap: .6rem; padding: .55rem .9rem; border-radius: 14px; background: var(--ink); color: var(--surface); font-size: 15px; box-shadow: 0 18px 40px rgba(0,0,0,.25); animation: hx-toast 6s ease 1.2s infinite both; } .dash-toast i { color: #4ade80; font-size: 1.1rem; } @keyframes hx-toast { 0% { opacity: 0; transform: translateY(-14px); } 8%, 70% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-14px); } } .m-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: m; } .m-steps li { counter-increment: m; display: flex; align-items: center; gap: .7rem; padding: 9px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-weight: 700; } .m-steps li::before { content: counter(m); width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); } .m-steps li.d { color: var(--ink); } .m-steps li.d::before { content: "\F26E"; font-family: "bootstrap-icons"; background: #16a34a; color: #fff; } .m-steps li.c { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .15); color: var(--ink); } .m-list { display: grid; gap: 10px; } .m-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); } .m-list > div > span { font-weight: 700; } .m-list em { grid-column: 1 / -1; font-style: normal; font-size: 15px; font-weight: 700; color: var(--ok); } .m-list em.w { color: var(--warn); } .m-list em.r { color: var(--danger); } @container (max-width: 760px) { .dash-in { grid-template-columns: minmax(0, 1fr); min-height: 0; } .dash .side { display: flex; overflow-x: auto; scrollbar-width: none; border-inline-end: 0; border-bottom: 1px solid var(--line); padding: 10px; } .dash .side::-webkit-scrollbar { display: none; } .dash .side button { white-space: nowrap; flex: 0 0 auto; } .role { grid-template-columns: minmax(0, 1fr); } } @container (max-width: 480px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .kpi { padding: .6rem; } .kpi b { font-size: 22px; } .dash-toast { inset-inline: 10px; justify-content: center; } } /* ---------- pricing: fleet slider + plans ---------- */ .pr { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 64px); align-items: start; } .pr-side { position: sticky; top: 100px; } .pr-side h2 { font-size: clamp(28px, 3vw, 42px); margin: .6rem 0 .4rem; } .calc { margin-top: 1.4rem; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); } .calc label { display: block; font-weight: 800; font-size: 17px; } .calc-n { display: block; margin: .3rem 0 .6rem; font-size: 44px; font-weight: 800; line-height: 1.3; color: var(--brand-ink); } .calc-n [data-fleet-word] { font-size: 19px; color: var(--muted); } .calc input[type="range"] { width: 100%; accent-color: var(--brand); height: 32px; cursor: pointer; } .calc-ends { display: flex; justify-content: space-between; color: var(--muted); font-size: 15px; font-weight: 700; } .calc-res { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px dashed var(--line); } .pr-note { margin: 1rem 0 0; color: var(--muted); font-weight: 600; } .pr-note i { color: var(--brand-ink); margin-inline-end: .3rem; } .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; align-items: stretch; } .plan .cars { margin: 0 0 .8rem; color: var(--brand-ink); font-weight: 800; } .plan .price { font-size: 44px; font-weight: 800; line-height: 1.2; } .plan .price small { font-size: 16px; color: var(--muted); font-weight: 600; } .plan .yearly { margin: .2rem 0 1.2rem; } .fit-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .8rem; padding: .1rem .8rem; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 15px; font-weight: 800; visibility: hidden; } .plan.featured-plan .fit-pill { visibility: visible; } .plan.featured-plan .btx-ghost { background: var(--brand); color: #fff; border-color: transparent; } /* ---------- faq: two columns of cards ---------- */ .fq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; } /* ========================================================== FooterLab — base + F04 (marquee + big call to action) ========================================================== */ .fx { container-type: inline-size; position: relative; overflow: hidden; font-family: var(--font); color: var(--ink); line-height: 1.7; } .fx h3 { color: inherit; font-family: var(--font); margin: 0; } .fx p { margin: 0; } :where(.fx) a { color: inherit; text-decoration: none; transition: color var(--ease), opacity var(--ease), background var(--ease), border-color var(--ease); } :where(.fx) a:hover { color: inherit; } .fx-in { position: relative; max-width: 1440px; margin-inline: auto; padding: clamp(28px, 5cqi, 64px) clamp(20px, 5cqi, 64px); } .fx-logo { display: inline-flex; align-items: center; gap: .65rem; font-weight: 800; font-size: 21px; } .fx-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: #fff; color: var(--brand); font-size: 1.15rem; flex: 0 0 auto; } .fx-social { display: flex; flex-wrap: wrap; gap: 8px; } .fx-social a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font-size: 1.05rem; } .fx-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; font-size: 15px; } .fx-form { display: flex; gap: 8px; } .fx-form input { flex: 1; min-width: 0; min-height: 56px; border-radius: var(--radius-sm); border: 1px solid transparent; background: #fff; color: #10263A; padding: 0 1rem; font: 16px var(--font); outline: none; } .fx-form input:focus { box-shadow: 0 0 0 .25rem rgba(255,255,255,.35); } .fx-form button { flex: 0 0 auto; min-height: 56px; padding: 0 1.4rem; border: 0; border-radius: var(--radius-sm); background: var(--accent); color: #241a00; font: 800 16px var(--font); cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; } .fx-form button:hover { filter: brightness(1.05); } @container (max-width: 520px) { .fx-form { flex-direction: column; } .fx-legal { flex-direction: column; align-items: flex-start; } } .f-marq { background: var(--deep); color: #fff; } [data-bs-theme="dark"] .f-marq { background: #04111D; } .f-marq .marq { overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.2); padding-block: 16px; } .f-marq .track { display: flex; width: max-content; animation: fx-marq 30s linear infinite; } .f-marq .marq:hover .track { animation-play-state: paused; } .f-marq .track span { font-size: clamp(30px, 5.4cqi, 60px); font-weight: 800; line-height: 1.3; white-space: nowrap; padding-inline: .45em; } .f-marq .track span:nth-child(4n+1) { color: rgba(255,255,255,.45); } .f-marq .track span.dot { color: var(--accent); } @keyframes fx-marq { from { transform: translateX(0); } to { transform: translateX(50%); } } .f-marq .cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,.2); } .f-marq .cta h3 { font-size: clamp(32px, 5.4cqi, 70px); font-weight: 800; line-height: 1.3; } .f-marq .cta h3 em { font-style: normal; color: var(--accent); } .f-marq .cta-form { max-width: 640px; margin-top: 1.6rem; } .f-marq .cta-note { margin-top: .8rem; color: rgba(255,255,255,.85); font-size: 15px; } .f-marq .cta-note i { margin-inline-end: .3rem; } .f-marq .round { width: clamp(124px, 15cqi, 176px); aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: #241a00; display: grid; place-content: center; justify-items: center; gap: .2rem; text-align: center; font-weight: 800; font-size: 17px; line-height: 1.4; transition: transform 300ms cubic-bezier(.2,.7,.3,1); } .f-marq .round i { font-size: 1.6rem; } .f-marq .round:hover { transform: rotate(-10deg) scale(1.06); color: #241a00; } .f-marq .row2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.8rem; } .f-marq .inline-nav { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; } .f-marq .inline-nav a { min-height: 44px; display: inline-flex; align-items: center; color: rgba(255,255,255,.88); font-weight: 600; } .f-marq .inline-nav a:hover { color: #fff; } .f-marq .fx-legal { color: rgba(255,255,255,.78); padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.2); } .f-marq .fx-social a { border-color: rgba(255,255,255,.35); } .f-marq .fx-social a:hover { background: #fff; color: var(--brand); border-color: #fff; } @container (max-width: 760px) { .f-marq .cta { grid-template-columns: minmax(0, 1fr); } .f-marq .round { display: none; } } /* hero phone: the office's day screen */ .ph-kpis { margin-bottom: 12px; } .ph-kpis .kpi { padding: .55rem .7rem; background: #F1F7FA; border: 0; } .ph-kpis .kpi b { font-size: 24px; } .ph-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px; padding: 14px 6px; border-radius: 18px; border: 1px solid #DCE7EF; } .ph-mods > span { display: grid; justify-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: #10263A; text-align: center; line-height: 1.4; } .ph-mods > span > i { position: relative; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: rgba(10,143,199,.1); color: #0A8FC7; font-size: 1.25rem; } .ph-mods em { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; background: #dc2626; color: #fff; font: 800 15px/1 var(--font); font-style: normal; border: 2px solid #fff; } .ph-req { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: #F1F7FA; } .ph-req > i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #0A8FC7; color: #fff; flex: 0 0 auto; } .ph-req > div { flex: 1; min-width: 0; line-height: 1.5; } .ph-req b { display: block; font-size: 15px; } .ph-req small { color: #4F6476; } .ph-req > span { flex: 0 0 auto; padding: .3rem .8rem; border-radius: 10px; background: #0A8FC7; color: #fff; font-size: 15px; font-weight: 800; } .cf-late .ico { background: #7660c4; color: #fff; } /* feature cards: contract, maintenance, tracking */ .contract { grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: center; align-content: stretch; } .contract .mini-car { align-self: center; } .ct-side { display: grid; gap: 10px; } .ct-q { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-weight: 800; } .ct-q em { font-style: normal; font-size: 15px; color: var(--brand-ink); padding: 0 .7rem; border-radius: 999px; background: rgba(var(--brand-rgb), .1); } .contract .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); } .contract .shots span { color: var(--ok); border-color: var(--ok); background: var(--surface); } .contract .shots span.wait { border-color: var(--line); color: var(--muted); } .contract .sign { margin: 0; color: var(--ink); border-color: var(--line); background: var(--surface); padding-block: 4px; } .contract .sign svg { height: 34px; } .contract .sign span { color: var(--muted); } .mt-list { display: grid; gap: 8px; } .mt-list > div { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); } .mt-list > div > i { color: var(--brand-ink); font-size: 1.1rem; } .mt-list > div > span { flex: 1; font-weight: 700; } .mt-list em { font-style: normal; font-size: 15px; font-weight: 700; color: var(--ok); } .mt-list em.r { color: var(--danger); } .mt-list em.w { color: var(--warn); } .map { overflow: hidden; background: linear-gradient(rgba(var(--brand-rgb), .08) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(var(--brand-rgb), .08) 1px, transparent 1px) 0 0 / 28px 28px, var(--surface-2); } .map::before { content: ""; position: absolute; inset: 40% -10% auto -10%; height: 14px; background: color-mix(in srgb, var(--accent) 55%, transparent); transform: rotate(-12deg); border-radius: 9px; } .map .zone { position: absolute; width: 120px; height: 120px; border-radius: 50%; inset-inline-start: 46%; top: 30%; border: 2px dashed var(--brand); background: rgba(var(--brand-rgb), .08); } .map .pin { position: absolute; width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--brand); box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .2); } .map .pin.bad { background: var(--danger); box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 25%, transparent); } .alert-chip { position: absolute; bottom: 14px; inset-inline-start: 14px; display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 12px; background: var(--ink); color: var(--surface); font-size: 15px; font-weight: 700; } .alert-chip i { color: #fca5a5; } /* feature cards adapt to their own width, not the screen's */ .hs-card { container-type: inline-size; } .slots span, .contract .shots span { white-space: nowrap; } @container (max-width: 560px) { .scan { grid-template-columns: minmax(0, 1fr); } .scan .qr { display: none; } .contract { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; } .contract .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contract .sign { display: none; } } @container (max-width: 340px) { .slots { gap: 6px; } .slots span { padding: 10px 8px; gap: .35rem; } .ct-q > span { display: none; } } /* ---------- page breakpoints ---------- */ @media (max-width: 1199.98px) { .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-head { grid-column: 1 / -1; grid-row: auto; } .pr { grid-template-columns: minmax(0, 1fr); } .pr-side { position: static; } .calc { max-width: 560px; } } @media (max-width: 991.98px) { .hs-card.wide { grid-column: span 1; } .fq { grid-template-columns: minmax(0, 1fr); } .demo { max-width: 460px; margin-inline: auto; } } @media (max-width: 575.98px) { .pv-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } .pv-tile > .ic { display: none; } .hs-track { grid-auto-columns: 86%; } .hs-count { display: none; } .phone-body { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; } .chip-float { padding: 10px 12px; } .cf-wa { inset-inline-start: 0; } .n-ind .announce { padding-inline: 12px 52px; } } @media (prefers-reduced-motion: reduce) { .h-dark .rot > span, .h-grad .blob, .f-marq .track, .cf-wa, .cf-late, .dmg-car .mk:first-of-type, .cbars i, .h-grad .bar span { animation: none !important; } .sign svg { animation: none; stroke-dashoffset: 0; } .dash-toast { animation: none !important; opacity: 1; } } .fq { counter-reset: q; } .fq details { counter-increment: q; } .fq summary { justify-content: flex-start; } .fq summary::before { content: counter(q, decimal-leading-zero); flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: rgba(var(--brand-rgb), .1); color: var(--brand-ink); font-weight: 800; font-size: 15px; direction: ltr; } .fq summary::after { margin-inline-start: auto; } .fq details[open] summary::before { background: var(--brand); color: #fff; } @media (max-width: 575.98px) { .ph-mods { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ph-mods > .wide-only { display: none; } } .mt-list > div > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mt-list em { flex: 0 0 auto; white-space: nowrap; } @container (max-width: 340px) { .mt-list > div { padding: 8px 10px; gap: 8px; } } .hs-art > * { min-width: 0; } .mt-list { grid-template-columns: minmax(0, 1fr); } .slots b { display: flex; flex-direction: column; min-width: 0; font-weight: 800; line-height: 1.45; } .slots small { font-weight: 600; color: var(--muted); } .slots span { white-space: normal; padding-block: 10px; } /* RentyCloud logo: the identity's own mark and wordmark (assets/brand), navy lettering on light, white on dark */ .rc-logo { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; flex: 0 0 auto; text-decoration: none; } .rc-logo .mk { display: grid; flex: 0 0 auto; } .rc-logo .mk img { width: 66px; height: auto; display: block; } .rc-logo .nm { display: grid; } .rc-logo .nm img { width: 136px; height: auto; display: block; } .rc-logo .lg-d { display: none !important; } [data-bs-theme="dark"] .rc-logo:not(.on-dark) .lg-l { display: none !important; } [data-bs-theme="dark"] .rc-logo:not(.on-dark) .lg-d { display: block !important; } .f-marq .rc-logo .mk img { width: 84px; } .f-marq .rc-logo .nm img { width: 176px; } @media (max-width: 480px) { .site-head .rc-logo .mk img { width: 52px; } .site-head .rc-logo .nm img { width: 108px; } .site-head .nx-end > .nx-btn { display: none; } } /* hero: the identity's orange start button and its blue-to-orange cloud swoosh behind the phone */ .hx-btn-accent { background: var(--accent); color: #0B2B44 !important; box-shadow: 0 12px 26px rgba(var(--accent-rgb), .35); } .hx-btn-accent:hover { filter: brightness(1.05); } .demo .swoosh { position: absolute; z-index: 0; width: 128%; inset-inline-start: -14%; top: -6%; opacity: .95; filter: drop-shadow(0 18px 40px rgba(6,157,217,.25)); pointer-events: none; } .rc-logo { direction: ltr; } /* ---------- feature cards: one tone per area (CardKit card + ButtonLab gradient icon tile + corner dots) ---------- */ .t-sky { --tone: #069DD9; --tone-2: #0477A8; --tone-rgb: 6, 157, 217; } .t-navy { --tone: #2C6A9A; --tone-2: #0B2B44; --tone-rgb: 44, 106, 154; } .t-orange { --tone: #F6B233; --tone-2: #C9800E; --tone-rgb: 246, 178, 51; } .t-teal { --tone: #3FA7C4; --tone-2: #1F7894; --tone-rgb: 63, 167, 196; } [data-bs-theme="dark"] .t-navy { --tone: #5B9CCB; --tone-2: #8FC3E8; --tone-rgb: 91, 156, 203; } .hs-card { border-color: color-mix(in srgb, var(--tone) 18%, var(--line)); } .hs-card::before { content: ""; position: absolute; z-index: 2; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 35%, var(--accent))); } .hs-card:hover { transform: translateY(-6px); border-color: rgba(var(--tone-rgb), .4); box-shadow: 0 26px 54px rgba(var(--tone-rgb), .2); } .hs-art { background: radial-gradient(90% 120% at 100% 0%, rgba(var(--tone-rgb), .22), transparent 62%), radial-gradient(70% 90% at 0% 100%, rgba(var(--accent-rgb), .12), transparent 60%), linear-gradient(180deg, rgba(var(--tone-rgb), .07), rgba(var(--tone-rgb), .02)), var(--surface-2); border-bottom-color: color-mix(in srgb, var(--tone) 18%, var(--line)); overflow: hidden; } .hs-art:not(.map) > :not(.hs-dots) { position: relative; z-index: 1; transition: transform 320ms cubic-bezier(.2,.7,.3,1); } .hs-card:hover .hs-art > :not(.hs-dots):not(.pin):not(.zone):not(.alert-chip) { transform: translateY(-4px); } .hs-dots { position: absolute; z-index: 0; inset-block-start: 0; inset-inline-start: 0; width: 170px; height: 140px; pointer-events: none; background-image: radial-gradient(rgba(var(--tone-rgb), .35) 1.3px, transparent 1.3px); background-size: 14px 14px; -webkit-mask-image: linear-gradient(135deg, #000, transparent 70%); mask-image: linear-gradient(135deg, #000, transparent 70%); } [dir="rtl"] .hs-dots { -webkit-mask-image: linear-gradient(225deg, #000, transparent 70%); mask-image: linear-gradient(225deg, #000, transparent 70%); } .hs-card .ck-body { position: relative; padding-top: 0; } .hs-ic { position: relative; z-index: 3; width: 60px; height: 60px; margin-top: -30px; border-radius: 38%; display: grid; place-items: center; flex: 0 0 auto; background: linear-gradient(135deg, var(--tone), var(--tone-2)); color: #fff; font-size: 1.55rem; border: 4px solid var(--surface); box-shadow: 0 12px 26px rgba(var(--tone-rgb), .35); transition: transform 320ms cubic-bezier(.2,.7,.3,1); } .t-orange .hs-ic { color: #3A2500; } .hs-card:hover .hs-ic { transform: rotate(-6deg) scale(1.05); } /* .num-like: the number is ltr, so its inline-start is the physical left, opposite the icon */ .hs-num { position: absolute; top: 20px; inset-inline-start: var(--pad); font: 800 52px/1 'Inter', sans-serif; color: transparent; -webkit-text-stroke: 1.5px rgba(var(--tone-rgb), .45); direction: ltr; pointer-events: none; } .hs-kicker { display: block; margin-top: .9rem; font-size: 15px; font-weight: 800; color: color-mix(in srgb, var(--tone-2) 85%, var(--ink)); } [data-bs-theme="dark"] .hs-kicker { color: color-mix(in srgb, var(--tone) 80%, #fff); } .hs-card h3.ck-title { margin-top: .2rem; } .hs-facts { list-style: none; margin: auto 0 0; padding: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px dashed color-mix(in srgb, var(--tone) 25%, var(--line)); } .hs-facts li { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .85rem; border-radius: 999px; background: rgba(var(--tone-rgb), .09); color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.5; } .hs-facts i { color: var(--tone-2); } [data-bs-theme="dark"] .hs-facts i { color: var(--tone); } .hs-card .ck-body > p { margin-bottom: 1.1rem; } /* the closing card: dark navy, no screen above it */ .hs-more { background: radial-gradient(120% 80% at 100% 0%, rgba(var(--brand-rgb), .45), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(var(--accent-rgb), .25), transparent 60%), var(--deep); } .hs-more .ck-body { padding-top: var(--pad); } .hs-more .hs-ic { margin-top: 0; border-color: rgba(255,255,255,.15); } .hs-more .hs-num { -webkit-text-stroke-color: rgba(255,255,255,.3); } .hs-more .hs-kicker { color: var(--accent); } @media (prefers-reduced-motion: reduce) { .hs-card:hover .hs-ic, .hs-card:hover .hs-art > * { transform: none; } } .hs-more ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } /* checks 2026-10-23: phone height, dark-mode icon contrast, map chip clear of the icon */ .hs-more li { padding: 6px 0; line-height: 1.5; align-items: flex-start; } .hs-more li i { margin-top: .2rem; } [data-bs-theme="dark"] .t-navy .hs-ic { background: linear-gradient(135deg, #2C6A9A, #123A5A); } [data-bs-theme="dark"] .hs-num { -webkit-text-stroke-color: rgba(var(--tone-rgb), .65); } .map .alert-chip { inset-inline-start: auto; inset-inline-end: 14px; } .map .alert-chip { top: 14px; bottom: auto; } /* phones show one card at a time: each card keeps its own height, so none carries an empty gap */ @media (max-width: 575.98px) { .hs-track { align-items: start; } } /* a narrow closing card (phones, small windows): its list becomes wrapped chips with short labels */ @container (max-width: 560px) { .hs-more ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .9rem; } .hs-more li { padding: 6px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(255,255,255,.07); align-items: center; } .hs-more li:last-child { border: 1px solid rgba(255,255,255,.14); } .hs-more li i { margin-top: 0; } } .hs-more .t-sm { display: none; } @container (max-width: 560px) { .hs-more .t-lg { display: none; } .hs-more .t-sm { display: inline; } } /* ---------- manual work vs the system, after the owner's reference design ---------- */ .pv { background: linear-gradient(180deg, var(--deep) 0%, #082640 100%); padding-bottom: clamp(48px, 6vw, 80px); } [data-bs-theme="dark"] .pv { background: linear-gradient(180deg, var(--deep) 0%, #04111D 100%); } .pv-grid { gap: 18px; } .pv-head { position: relative; overflow: hidden; justify-content: flex-start; padding: clamp(24px, 2.6vw, 38px); border-radius: 26px; color: #0B2B44; background: linear-gradient(180deg, #F9E268 0%, #FDCA51 42%, #FCC057 62%, #F6B233 100%); box-shadow: 0 22px 50px rgba(0,0,0,.28); } .pv-head h2 { font-size: clamp(28px, 2.7vw, 42px); line-height: 1.35; margin: 0; color: #0B2B44; } .pv-bar { display: block; width: 64px; height: 4px; margin: 1.1rem 0; border-radius: 9px; background: linear-gradient(90deg, #0B2B44, var(--brand)); } .pv-head p { margin: 0; color: #1C3A55; font-weight: 600; font-size: 17px; line-height: 1.9; } .pv-car { display: block; width: calc(100% + 2 * clamp(24px, 2.6vw, 38px)); max-width: none; height: auto; margin: auto calc(-1 * clamp(24px, 2.6vw, 38px)) calc(-1 * clamp(24px, 2.6vw, 38px)); padding-top: 1rem; } .pv-tile { gap: .9rem; padding: clamp(18px, 1.8vw, 26px); border: 0; border-radius: 24px; color: #10263A; background: linear-gradient(180deg, #F8FDFE 0%, #FFFFFF 60%); box-shadow: 0 18px 44px rgba(0,0,0,.28); } .pv-pic { display: block; width: min(100%, 250px); height: auto; margin: 0 auto -.2rem; } .pv-tile .before { gap: .7rem; align-items: center; color: #4F6476; font-size: 17px; padding-bottom: 1rem; border-bottom: 1px solid #E3ECF2; } .pv-tile .before > i { color: #E5484D; font-size: 1.7rem; margin-top: 0; opacity: 1; } .pv-tile .after { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; color: #10263A; } .pv-tile .after > i { color: #22B35E; font-size: 1.7rem; margin-top: 0; } .pv-tile .after > img { width: 66px; height: auto; display: block; } @media (max-width: 1199.98px) { .pv-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 0 24px; padding-bottom: 0; } .pv-head-t { padding-bottom: clamp(24px, 2.6vw, 38px); } .pv-car { width: 100%; margin: 0; padding: 0; } } @media (max-width: 575.98px) { .pv-head { grid-template-columns: minmax(0, 1fr); } .pv-head-t { padding-bottom: 0; } .pv-car { width: calc(100% + 48px); margin: 0 -24px; } .pv-pic { width: min(100%, 220px); } } .pv-grid { grid-template-columns: minmax(0, .9fr) repeat(3, minmax(0, 1fr)); } .pv-pic { height: 120px; width: auto; max-width: 100%; object-fit: contain; } .pv-tile .after { font-size: 16px; gap: .55rem; } .pv-tile .after > img { width: 52px; } .pv-tile .before { font-size: 16px; } @media (max-width: 1199.98px) { .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .pv-grid { grid-template-columns: minmax(0, 1fr); } } .pv-grid { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr)); } @media (max-width: 1199.98px) { .pv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .pv-grid { grid-template-columns: minmax(0, 1fr); } } /* ---------- pricing, after the owner's reference design ---------- */ .pr-sec { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #EAF4FB 0%, #F6FAFD 55%, #FFFFFF 100%); padding-block: clamp(64px, 8vw, 120px); } .pr-sec::before, .pr-sec::after { content: ""; position: absolute; z-index: -1; pointer-events: none; } .pr-sec::before { inset-inline-end: -12%; top: -46%; width: 78%; height: 80%; border-radius: 0 0 50% 50% / 0 0 100% 100%; transform: rotate(-7deg); background: linear-gradient(160deg, #0B2B44 0%, #123A5A 55%, #2C6A9A 100%); box-shadow: 0 40px 0 -10px rgba(6,157,217,.25); } .pr-sec::after { inset-inline-end: -10%; bottom: -30%; width: 95%; height: 42%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: rotate(3deg); background: linear-gradient(200deg, #0B2B44 0%, #123A5A 60%, #1B4F7A 100%); box-shadow: 0 -30px 0 -6px rgba(6,157,217,.18); } [data-bs-theme="dark"] .pr-sec { background: linear-gradient(180deg, #0A1826 0%, #07131F 100%); } .pr { grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr); align-items: center; } .pr-side { position: static; } .pr-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem 1rem; border-radius: 999px; background: #DCEFF9; color: #0477A8; font-weight: 800; font-size: 16px; } .pr-side h2 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.25; margin: .9rem 0 .5rem; color: #0B2B44; } .pr-side h2 em { font-style: normal; color: #069DD9; } .pr-sub { color: #3C5568; font-size: 17px; margin: 0; } [data-bs-theme="dark"] .pr-side h2 { color: #E6F0F7; } [data-bs-theme="dark"] .pr-sub { color: #9DB3C6; } .pr-city { display: block; width: 100%; height: auto; margin: .6rem 0 -64px; position: relative; z-index: 0; } .pr-side .calc { position: relative; z-index: 1; margin-top: 0; padding: 24px 26px; border: 0; border-radius: 26px; background: #fff; box-shadow: 0 24px 50px rgba(11,43,68,.16); max-width: none; color: #10263A; } .calc-ic { position: absolute; top: 22px; inset-inline-end: 22px; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: #E6F4FA; color: #069DD9; font-size: 1.7rem; } .pr-side .calc label { color: #0B2B44; font-size: 19px; } .pr-side .calc-n { color: #069DD9; font-size: 52px; } .pr-side .calc-n [data-fleet-word] { color: #4F6476; font-size: 22px; font-weight: 700; } .pr-side .calc input[type="range"] { -webkit-appearance: none; appearance: none; height: 10px; border-radius: 99px; outline-offset: 6px; background: linear-gradient(90deg, #A7D4E3 0%, #069DD9 var(--fill, 30%), #E6EDF2 var(--fill, 30%)); } .pr-side .calc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #069DD9; border: 5px solid #fff; box-shadow: 0 4px 12px rgba(6,157,217,.45); cursor: pointer; } .pr-side .calc input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #069DD9; border: 5px solid #fff; box-shadow: 0 4px 12px rgba(6,157,217,.45); cursor: pointer; } .pr-side .calc-ends { color: #4F6476; margin-top: .4rem; } .pr-side .calc-res { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 1.1rem 0 0; padding: 14px 18px; border: 0; border-radius: 18px; background: #EEF7FC; color: #10263A; } .pr-side .calc-res > i { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #DCEFF9; color: #069DD9; font-size: 1.3rem; flex: 0 0 auto; } .pr-note { display: flex; align-items: center; gap: .6rem; margin-top: 1.4rem; color: #0B2B44; font-weight: 700; font-size: 17px; } .pr-note > i { color: #069DD9; font-size: 1.5rem; } .pr-note > span { padding-bottom: 6px; background: radial-gradient(60% 6px at 50% 100%, rgba(6,157,217,.55), transparent 70%) no-repeat bottom / 100% 8px; } [data-bs-theme="dark"] .pr-note { color: #E6F0F7; } .plans { gap: 22px; align-items: stretch; } .plan { overflow: visible; border: 0; border-radius: 28px; background: linear-gradient(180deg, #F3FAFE 0%, #FFFFFF 45%); box-shadow: 0 24px 54px rgba(11,43,68,.14); color: #10263A; text-align: center; } .plan:hover { transform: translateY(-6px); } .plan .ck-body { align-items: center; padding: 26px 24px 26px; } .plan-pic { display: block; width: min(100%, 250px); height: 128px; object-fit: contain; margin: 0 auto .4rem; } .plan .ck-title.lg { font-size: clamp(26px, 2.3vw, 34px); color: #0B2B44; margin: 0; } .plan .cars { color: #069DD9; font-size: 19px; font-weight: 800; margin: .1rem 0 .7rem; } .plan .price { color: #0B2B44; font-size: clamp(46px, 4vw, 60px); line-height: 1.1; } .plan .price small { font-size: 18px; color: #3C5568; } .plan .yearly { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem .6rem; margin: .7rem 0 1.2rem; color: #4F6476; font-size: 16px; } .plan .yearly em { font-style: normal; font-weight: 800; font-size: 15px; padding: .15rem .8rem; border-radius: 999px; background: #E3F2FA; color: #0477A8; } .plan .checks { align-self: stretch; text-align: start; gap: .9rem; margin-bottom: 1.6rem; } .plan .checks li { font-size: 17px; color: #10263A; } .plan .checks i { color: #069DD9; font-size: 1.35rem; margin-top: 0; } .plan-btn { min-height: 58px; border-radius: 16px; font-size: 18px; gap: .7rem; background: #fff; color: #0477A8; border: 1.5px solid #9CCFE6; box-shadow: none; } .plan-btn:hover { color: #0477A8; background: #F1F9FD; filter: none; } .plan.featured-plan { background: linear-gradient(180deg, #E8F6FD 0%, #FFFFFF 50%) padding-box, linear-gradient(180deg, #5BC0EB, #069DD9) border-box; border: 3px solid transparent; box-shadow: 0 0 0 6px rgba(6,157,217,.12), 0 30px 60px rgba(6,157,217,.28); } .plan.featured-plan .plan-btn { background: linear-gradient(180deg, #1AA7E0, #0789C0); color: #fff; border-color: transparent; box-shadow: 0 14px 28px rgba(6,157,217,.35); } .plan .fit-pill { position: absolute; top: -18px; inset-inline: 0; margin: 0 auto; width: max-content; padding: .3rem 1rem; border-radius: 12px; background: linear-gradient(180deg, #22B35E, #15954B); color: #fff; box-shadow: 0 8px 18px rgba(21,149,75,.3); } .plan.is-best { background: linear-gradient(180deg, #FFF6E2 0%, #FFFFFF 45%); } .plan.is-best .cars { color: #069DD9; } .plan.is-best .checks i { color: #F6B233; } .plan.is-best .yearly em { background: #FFF0CC; color: #B36E00; } .plan.is-best .plan-btn { background: linear-gradient(180deg, #FBC24A, #F2A417); color: #0B2B44; border-color: transparent; box-shadow: 0 14px 28px rgba(246,178,51,.4); } .plan-ribbon { position: absolute; z-index: 2; top: 0; inset-inline-end: 0; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1.1rem .45rem 1.4rem; border-radius: 0 28px 0 22px; background: linear-gradient(135deg, #F6B233, #F29A12); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 8px 18px rgba(246,178,51,.35); } [dir="rtl"] .plan-ribbon { border-radius: 28px 0 22px 0; } @media (max-width: 1199.98px) { .pr { grid-template-columns: minmax(0, 1fr); } .pr-side { max-width: 640px; } } @media (max-width: 767.98px) { .plans { grid-template-columns: minmax(0, 1fr); } .plan .fit-pill { top: -14px; } } .pr-city { margin-bottom: -28px; } .pr-side .calc-res { font-size: 16px; padding: 12px 14px; } .pr-side .calc-res > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 420px) { .pr-side .calc-res > span { white-space: normal; } } /* the corner swooshes stay in the corners when the section stacks, away from the title */ @media (max-width: 1199.98px) { .pr-sec::before { width: 60%; height: 260px; top: -200px; } .pr-sec::after { height: 180px; bottom: -120px; } } /* ---------- roles: a colour per role, subtitles, screen header, what each role can reach ---------- */ .rl-sec2 { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #F5FAFD 0%, #FFFFFF 70%); } .rl-sec2::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(40% 40% at 8% 20%, rgba(6,157,217,.10), transparent 70%), radial-gradient(30% 35% at 95% 85%, rgba(246,178,51,.12), transparent 70%), radial-gradient(rgba(6,157,217,.12) 1.2px, transparent 1.2px) 0 0 / 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); } [data-bs-theme="dark"] .rl-sec2 { background: linear-gradient(180deg, #0A1826 0%, #07131F 70%); } .rl-sec2 .st h2 em { font-style: normal; color: #069DD9; } .rl-sec2 .eyebrow i { margin-inline-end: .3rem; } .rl-sec2 .dash { border: 0; border-radius: 28px; box-shadow: 0 40px 90px rgba(11,43,68,.16), 0 0 0 1px rgba(11,43,68,.06); } .rl-sec2 .dash-top i:nth-child(1) { background: #FF5F57; } .rl-sec2 .dash-top i:nth-child(2) { background: #FEBC2E; } .rl-sec2 .dash-top i:nth-child(3) { background: #28C840; } .rl-sec2 .dash-in { grid-template-columns: 270px minmax(0, 1fr); } .rl-sec2 .side { gap: 8px; padding: 18px 14px; background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 60%, var(--surface))); } .rl-sec2 .side button { position: relative; min-height: 68px; gap: .8rem; padding: 0 .9rem; border-radius: 16px; } .rl-sec2 .side button > i { width: 44px; height: 44px; border-radius: 14px; border: 0; background: rgba(var(--tone-rgb), .12); color: var(--tone-2); font-size: 1.2rem; transition: transform var(--ease), background var(--ease); } [data-bs-theme="dark"] .rl-sec2 .side button > i { color: var(--tone); } .rl-t { display: grid; line-height: 1.4; text-align: start; } .rl-t b { color: var(--ink); font-size: 16px; } .rl-t small { color: var(--muted); font-size: 15px; font-weight: 600; } .rl-sec2 .side button:hover > i { transform: scale(1.06); } .rl-sec2 .side button[aria-selected="true"] { background: var(--surface); border-color: transparent; box-shadow: 0 14px 30px rgba(var(--tone-rgb), .18); } .rl-sec2 .side button[aria-selected="true"]::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 4px; border-radius: 0 4px 4px 0; background: var(--tone); } [dir="rtl"] .rl-sec2 .side button[aria-selected="true"]::before { border-radius: 4px 0 0 4px; } .rl-sec2 .side button[aria-selected="true"] > i { background: linear-gradient(135deg, var(--tone), var(--tone-2)); color: #fff; box-shadow: 0 8px 18px rgba(var(--tone-rgb), .35); } .rl-sec2 .side button.t-orange[aria-selected="true"] > i { color: #3A2500; } .rl-sec2 .main { padding: clamp(22px, 2.6vw, 40px); } .rl-sec2 .role { gap: clamp(22px, 3vw, 52px); } .rl-kicker { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .8rem; padding: .25rem .9rem; border-radius: 999px; background: rgba(var(--tone-rgb), .12); color: var(--tone-2); font-size: 15px; font-weight: 800; } [data-bs-theme="dark"] .rl-kicker { color: var(--tone); } .rl-sec2 .role h3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.4; } .rl-sec2 .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 1.2rem; } .rl-sec2 .ticks li { align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--tone) 14%, var(--line)); font-weight: 600; line-height: 1.6; } .rl-sec2 .ticks li::before { margin-top: 0; background: var(--tone); color: #fff; } .rl-sec2 .t-orange .ticks li::before { color: #3A2500; } .rl-access { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .rl-access li { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .85rem; border-radius: 999px; font-size: 15px; font-weight: 700; } .rl-access li.y { background: rgba(34,179,94,.1); color: #15803D; } .rl-access li.n { background: transparent; color: var(--muted); border: 1px dashed var(--line); } [data-bs-theme="dark"] .rl-access li.y { color: #4ADE80; background: rgba(74,222,128,.1); } .rl-sec2 .role-ui { padding: 18px; border-radius: 22px; border-color: color-mix(in srgb, var(--tone) 22%, var(--line)); background: linear-gradient(180deg, rgba(var(--tone-rgb), .07), var(--surface-2) 60%); box-shadow: 0 24px 50px rgba(var(--tone-rgb), .16); } @container (max-width: 760px) { .rl-sec2 .dash-in { grid-template-columns: minmax(0, 1fr); } .rl-sec2 .side { padding: 10px; } .rl-sec2 .side button { min-height: 60px; } .rl-sec2 .side button[aria-selected="true"]::before { inset-block: auto 0; inset-inline: 14px; width: auto; height: 4px; border-radius: 4px 4px 0 0; } .rl-sec2 .ticks { grid-template-columns: minmax(0, 1fr); } } /* the checklist goes two-column only when the window is wide enough for short lines */ .rl-sec2 .ticks { grid-template-columns: minmax(0, 1fr); } @container (min-width: 1200px) { .rl-sec2 .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 480px) { .rl .kpi > span { white-space: normal; line-height: 1.4; } } /* ---------- how it works: numbered three-step flow on the gradient band ---------- */ .how2 { background: #0A4A6E; } .how2 .hx-in { max-width: 1440px; margin-inline: auto; } .how-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 24px 48px; align-items: end; margin-bottom: clamp(48px, 5vw, 72px); } .how2 .hx-title { font-size: clamp(32px, 4cqi, 54px); } .how2 .hx-title em { font-style: normal; display: block; background: linear-gradient(90deg, #8FD3F2, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .how2 .hx-lead { max-width: 640px; } .how-cta { display: grid; justify-items: start; gap: 18px; } .how-cta .btn-white { min-height: 58px; } .how-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .how-trust li { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .85rem; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 15px; font-weight: 700; } .how-trust i { color: var(--accent); } .how-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); } /* the dashed line joining the three numbers */ .how-steps::before { content: ""; position: absolute; top: 0; inset-inline: 16%; height: 4px; margin-top: -2px; border-radius: 4px; background: linear-gradient(90deg, var(--accent), #8FD3F2); -webkit-mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 24px); mask: repeating-linear-gradient(90deg, #000 0 14px, transparent 14px 24px); } .how-step { position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 56px clamp(20px, 2vw, 28px) clamp(22px, 2vw, 28px); border-radius: 26px; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform var(--ease), background var(--ease); } .how-step:hover { transform: translateY(-6px); background: rgba(255,255,255,.14); } .how-n { position: absolute; top: -32px; inset-inline-start: 50%; transform: translateX(50%); width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #0B2B44; font: 800 28px/1 'Inter', sans-serif; box-shadow: 0 0 0 8px rgba(255,255,255,.15), 0 14px 30px rgba(0,0,0,.25); } [dir="ltr"] .how-n { transform: translateX(-50%); } .how-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; font-size: 1.45rem; } .how-step h3 { margin: .4rem 0 0; font-size: clamp(20px, 1.8vw, 24px); color: inherit; } .how-step p { margin: 0; color: rgba(255,255,255,.85); line-height: 1.8; } .how-chips { list-style: none; margin: auto 0 0; padding: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px dashed rgba(255,255,255,.22); } .how-chips li { padding: .25rem .8rem; border-radius: 999px; background: rgba(255,255,255,.12); font-size: 15px; font-weight: 700; color: #fff; } .how-chips li::before { content: "\F26E"; font-family: "bootstrap-icons"; margin-inline-end: .3rem; color: #86EFAC; } .how-step.is-go { background: #fff; color: #10263A; border-color: transparent; box-shadow: 0 30px 60px rgba(0,0,0,.25); } .how-step.is-go:hover { background: #fff; } .how-step.is-go .how-n { background: linear-gradient(135deg, #F8C15A, #F29A12); color: #0B2B44; } .how-step.is-go .how-ic { background: linear-gradient(135deg, #069DD9, #0477A8); color: #fff; box-shadow: 0 10px 22px rgba(6,157,217,.35); } .how-step.is-go p { color: #4F6476; } .how-step.is-go .how-chips { border-top-color: #E3ECF2; } .how-step.is-go .how-chips li { background: #EEF7FC; color: #0B2B44; } .how-step.is-go .how-chips li::before { color: #22B35E; } .how-step.is-go .bar { display: block; height: 8px; border-radius: 9px; background: #E6F4FA; margin-top: .9rem; overflow: hidden; } .how-step.is-go .bar span { display: block; height: 100%; width: 72%; border-radius: inherit; background: linear-gradient(90deg, #069DD9, var(--accent)); animation: hx-fill 2.4s cubic-bezier(.2,.7,.3,1) both; } @container (max-width: 980px) { .how-head { grid-template-columns: minmax(0, 1fr); } .how-steps { grid-template-columns: minmax(0, 1fr); gap: 52px; padding-inline-start: 0; } .how-steps::before { top: 0; bottom: 0; inset-inline: auto; inset-inline-start: 50%; width: 4px; height: auto; margin: 0; background: linear-gradient(180deg, var(--accent), #8FD3F2); -webkit-mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 24px); mask: repeating-linear-gradient(180deg, #000 0 14px, transparent 14px 24px); opacity: .6; } } .how2 .b3 { opacity: .16; } .how2 .b1 { background: #069DD9; opacity: .55; } .how2 .b3 { display: none; } /* ---------- FAQ: side panel + one column of questions with topic icons ---------- */ .fq-sec { position: relative; background: radial-gradient(50% 60% at 100% 0%, rgba(6,157,217,.08), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgba(246,178,51,.08), transparent 70%); } .fq2 { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 72px); align-items: start; } .fq-side { position: sticky; top: 110px; } .fq-side .eyebrow i { margin-inline-end: .3rem; } .fq-side h2 { font-size: clamp(32px, 3.6vw, 50px); line-height: 1.25; margin: .8rem 0 .6rem; } .fq-side h2 em { font-style: normal; color: #069DD9; } .fq-side > p { color: var(--muted); font-size: 17px; margin: 0; } .fq-help { position: relative; overflow: hidden; display: grid; justify-items: start; gap: .4rem; margin-top: 1.8rem; padding: 26px; border-radius: 26px; color: #fff; background: radial-gradient(90% 80% at 100% 0%, rgba(6,157,217,.45), transparent 60%), radial-gradient(70% 70% at 0% 100%, rgba(246,178,51,.28), transparent 60%), #0B2B44; box-shadow: 0 26px 56px rgba(11,43,68,.28); } .fq-help::after { content: ""; position: absolute; inset-block-end: -90px; inset-inline-start: -90px; width: 260px; height: 260px; border-radius: 50%; pointer-events: none; background: repeating-radial-gradient(circle, rgba(255,255,255,.08) 0 1px, transparent 1px 30px); } .fq-help img { width: 110px; height: auto; margin-bottom: .4rem; } .fq-help b { font-size: 22px; } .fq-help > span { color: rgba(255,255,255,.82); font-size: 16px; } .fq-help .btx { margin-top: .8rem; background: var(--accent); color: #0B2B44; box-shadow: 0 12px 26px rgba(246,178,51,.35); } .fq-help .btx:hover { color: #0B2B44; } .fq-list { display: grid; gap: 12px; } .fq-list details { position: relative; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 6px 18px rgba(11,43,68,.05); transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease); } .fq-list details:hover { border-color: rgba(6,157,217,.35); transform: translateY(-2px); } .fq-list details[open] { border-color: rgba(6,157,217,.4); box-shadow: 0 18px 40px rgba(6,157,217,.14); } .fq-list details[open]::before { content: ""; position: absolute; inset-block: 16px; inset-inline-start: -1px; width: 4px; border-radius: 4px; background: linear-gradient(180deg, #069DD9, var(--accent)); } .fq-list summary { gap: .9rem; min-height: 72px; padding: .8rem 1.1rem; font-size: 17px; } .fq-list summary::before { content: none; } .fq-ic { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 15px; display: grid; place-items: center; background: rgba(6,157,217,.1); color: #0477A8; font-size: 1.25rem; transition: background var(--ease), color var(--ease); } [data-bs-theme="dark"] .fq-ic { color: #8FD3F2; } .fq-list details[open] .fq-ic { background: linear-gradient(135deg, #069DD9, #0477A8); color: #fff; box-shadow: 0 8px 18px rgba(6,157,217,.3); } .fq-q { flex: 1; min-width: 0; } .fq-list summary::after { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); margin-inline-start: auto; } .fq-list details[open] summary::after { background: rgba(6,157,217,.12); } .fq-list .acc-body { margin: 0 1.1rem 1.1rem; padding: 1rem 1.1rem; border-radius: 14px; background: var(--surface-2); color: var(--muted); font-size: 16px; line-height: 1.9; } @media (max-width: 991.98px) { .fq2 { grid-template-columns: minmax(0, 1fr); } .fq-side { position: static; } .fq-help { margin-top: 1.2rem; } } .fx-credit a { color: #fff; font-weight: 800; border-bottom: 1px solid rgba(246,178,51,.7); } .fx-credit a:hover { color: var(--accent); } /* English (left to right): arrows and chevrons were picked for Arabic, so they mirror. The glyph flips, not the element, so hover movements on the icon still work. */ [dir="ltr"] :is(.bi-arrow-left, .bi-arrow-right, .bi-chevron-left, .bi-chevron-right, .bi-arrow-up-left, .bi-arrow-up-right, .bi-caret-left-fill, .bi-caret-right-fill):not(.flip-rtl)::before { display: inline-block; transform: scaleX(-1); } .rc-lang { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .8rem; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; } .rc-lang:hover { color: var(--ink); background: var(--surface-2); } /* English (LTR): Latin words run wider than the Arabic, so the big titles step down a size; the outlined card number moves to the right edge, away from the icon that now sits on the left. */ [dir="ltr"] .h-dark .hx-title { font-size: clamp(27px, 3.4cqi, 50px); } [dir="ltr"] .pv-head h2 { font-size: clamp(24px, 2.1vw, 32px); } [dir="ltr"] .pr-side h2 { font-size: clamp(28px, 2.8vw, 42px); } [dir="ltr"] .how2 .hx-title { font-size: clamp(30px, 3.4cqi, 48px); } [dir="ltr"] .hs-num { inset-inline-start: auto; left: auto; right: var(--pad); }