/* ============================================================ Rentyon — Landing page stylesheet Standalone: this file is the only stylesheet the landing page loads. RTL is handled with CSS logical properties; the layout mirrors automatically when . ============================================================ */ /* ------------------------------------------------------------ 1. Design tokens ------------------------------------------------------------ */ :root { /* Brand colors */ --purple: #361F42; --purple-deep: #2A1834; /* hover / darker surfaces */ --purple-soft: #4A2E5A; /* raised surfaces on dark */ --blue: #96C8E2; --blue-tint: #E7F1F8; /* pale blue wash */ --bg: #F6F3EF; --surface: #FFFFFF; /* Text on light */ --ink: #361F42; --ink-soft: rgba(54, 31, 66, 0.74); --ink-mute: rgba(54, 31, 66, 0.52); /* Text on dark */ --paper: #F6F3EF; --paper-soft: rgba(246, 243, 239, 0.76); --paper-mute: rgba(246, 243, 239, 0.55); /* Lines */ --line: rgba(54, 31, 66, 0.12); --line-strong: rgba(54, 31, 66, 0.22); --line-dark: rgba(246, 243, 239, 0.16); /* Status (used in phone mock UI) */ --ok: #3E7C5B; --ok-tint: #E3EFE8; --warn: #9A6B22; --warn-tint: #F5EBDA; --late: #A4453E; --late-tint: #F6E4E2; /* Typography */ --font-display: 'Fraunces', 'Amiri', Georgia, serif; --font-body: 'Instrument Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --display-sm: clamp(1.5rem, 1.2rem + 1.6vw, 2.125rem); --display-md: clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem); --display-lg: clamp(2.375rem, 1.6rem + 3.9vw, 3.875rem); --track-caps: 0.14em; /* Spacing */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --section-pad: clamp(4rem, 9vw, 7.5rem); /* Radius */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(54, 31, 66, 0.06), 0 2px 8px rgba(54, 31, 66, 0.05); --shadow-md: 0 2px 6px rgba(54, 31, 66, 0.06), 0 12px 28px rgba(54, 31, 66, 0.10); --shadow-lg: 0 8px 20px rgba(54, 31, 66, 0.12), 0 32px 64px rgba(54, 31, 66, 0.18); /* Layout */ --container: 71.25rem; /* 1140px */ --header-h: 4.5rem; } /* Arabic: swap type, relax leading, drop latin letter-spacing */ html[lang="ar"] { --font-display: 'Amiri', 'Fraunces', Georgia, serif; --font-body: 'IBM Plex Sans Arabic', 'Instrument Sans', system-ui, sans-serif; --track-caps: 0; } /* ------------------------------------------------------------ 2. Base ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0; text-wrap: balance; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { line-height: 1.45; font-weight: 700; } p { margin: 0; } a { color: inherit; } section { scroll-margin-top: calc(var(--header-h) + 1rem); } ::selection { background: var(--blue); color: var(--purple); } /* ------------------------------------------------------------ 3. Primitives ------------------------------------------------------------ */ .container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .section { padding-block: var(--section-pad); } .section--dark { background: var(--purple); color: var(--paper); } /* Eyebrow label above headings */ .eyebrow { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-mute); margin-block-end: var(--sp-4); } html[lang="ar"] .eyebrow { font-size: var(--text-sm); } .eyebrow::before { content: ""; inline-size: 1.75rem; block-size: 2px; border-radius: 1px; background: var(--blue); } .section--dark .eyebrow { color: var(--paper-mute); } .section-head { max-width: 42rem; margin-block-end: clamp(2.5rem, 5vw, 4rem); } .section-head h2 { font-size: var(--display-md); } .section-head__sub { margin-block-start: var(--sp-4); font-size: var(--text-md); color: var(--ink-soft); max-width: 38rem; } .section--dark .section-head__sub { color: var(--paper-soft); } /* Serif italic accent inside headlines */ .accent { font-style: italic; color: var(--purple); position: relative; white-space: nowrap; } .accent::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0.04em; block-size: 0.28em; background: var(--blue); opacity: 0.45; z-index: -1; border-radius: 2px; } .section--dark .accent { color: var(--blue); } .section--dark .accent::after { opacity: 0.22; } html[lang="ar"] .accent { font-style: normal; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.875rem 1.625rem; border-radius: var(--r-pill); border: 1px solid transparent; font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; } .btn:active { transform: translateY(1px); } .btn .btn__icon { inline-size: 1.125rem; block-size: 1.125rem; flex-shrink: 0; } .btn--primary { background: var(--purple); color: var(--paper); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: var(--purple-deep); box-shadow: var(--shadow-md); } .btn--light { background: var(--blue); color: var(--purple); } .btn--light:hover { background: #A9D3E8; } .btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); } .btn--ghost:hover { border-color: var(--purple); } .btn--lg { padding: 1.0625rem 2.125rem; font-size: var(--text-md); } .btn--sm { padding: 0.5625rem 1.125rem; font-size: var(--text-sm); } /* ------------------------------------------------------------ 4. Header ------------------------------------------------------------ */ .header { position: sticky; inset-block-start: 0; z-index: 50; background: rgba(246, 243, 239, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block-end: 1px solid transparent; transition: border-color 0.25s ease; } .header.is-scrolled { border-block-end-color: var(--line); } .header__inner { display: flex; align-items: center; gap: var(--sp-5); min-block-size: var(--header-h); } .brand { display: inline-flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--ink); } .brand__logo { inline-size: 2.25rem; block-size: 2.25rem; } .brand__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; letter-spacing: 0.01em; } html[lang="ar"] .brand__name { letter-spacing: 0; } .header__nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); margin-inline-start: auto; } .header__nav a { font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: color 0.15s ease; } .header__nav a:hover { color: var(--ink); } .header__actions { display: flex; align-items: center; gap: var(--sp-3); } .lang-toggle { appearance: none; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 0.5rem 1rem; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .lang-toggle:hover { border-color: var(--purple); background: var(--surface); } /* Mobile menu button */ .menu-btn { display: none; appearance: none; background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-sm); inline-size: 2.5rem; block-size: 2.5rem; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); } /* ------------------------------------------------------------ 5. Hero ------------------------------------------------------------ */ .hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(4rem, 8vw, 7rem); } .hero::before { /* soft blue glow behind the phone side */ content: ""; position: absolute; inset-block-start: -20%; inset-inline-end: -12%; inline-size: 55%; aspect-ratio: 1; background: radial-gradient(circle at center, rgba(150, 200, 226, 0.38) 0%, transparent 65%); pointer-events: none; } .hero__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: center; position: relative; } .hero__title { font-size: var(--display-lg); margin-block-end: var(--sp-5); } .hero__sub { font-size: var(--text-lg); color: var(--ink-soft); max-width: 34rem; margin-block-end: var(--sp-6); } .hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } .hero__note { margin-block-start: var(--sp-4); font-size: var(--text-sm); color: var(--ink-mute); } /* Phone composition */ .hero__visual { position: relative; display: flex; justify-content: center; padding-block: var(--sp-7) var(--sp-5); } .float-card { position: absolute; display: flex; align-items: center; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.75rem 1rem; box-shadow: var(--shadow-md); font-size: var(--text-sm); line-height: 1.35; max-inline-size: 15rem; z-index: 2; } .float-card strong { display: block; font-weight: 600; } .float-card span { color: var(--ink-mute); font-size: var(--text-xs); } .float-card__dot { inline-size: 2.125rem; block-size: 2.125rem; border-radius: var(--r-pill); display: grid; place-items: center; flex-shrink: 0; } .float-card__dot--ok { background: var(--ok-tint); color: var(--ok); } .float-card__dot--blue { background: var(--blue-tint); color: var(--purple); } .float-card__dot svg { inline-size: 1.125rem; block-size: 1.125rem; } .float-card--top { inset-block-start: 0; inset-inline-start: -4%; } .float-card--bottom { inset-block-end: 8%; inset-inline-end: -3%; } /* ------------------------------------------------------------ 6. Phone frame + mock UI To use real screenshots: drop an image inside .phone__screen as — it will cover the mock UI automatically. ------------------------------------------------------------ */ .phone { inline-size: clamp(15rem, 24vw, 18.5rem); aspect-ratio: 9 / 19; background: var(--purple); border-radius: 2.6rem; padding: 0.625rem; box-shadow: var(--shadow-lg); position: relative; flex-shrink: 0; } .phone__screen { position: relative; block-size: 100%; background: var(--bg); border-radius: 2rem; overflow: hidden; display: flex; flex-direction: column; } .phone__notch { position: absolute; inset-block-start: 0.5rem; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 34%; block-size: 1.125rem; background: var(--purple); border-radius: var(--r-pill); z-index: 3; } .phone__shot { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; z-index: 2; } /* Mock UI inside the phone (placeholder until screenshots) */ .mock { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); padding: 3.25rem 0.875rem 1rem; font-size: 0.6875rem; } .mock__greet { color: var(--ink-mute); font-size: 0.625rem; } .mock__name { font-family: var(--font-display); font-size: 1rem; color: var(--ink); } .mock-card { background: var(--purple); color: var(--paper); border-radius: var(--r-md); padding: 0.875rem; } .mock-card--light { background: var(--surface); color: var(--ink); border: 1px solid var(--line); } .mock-card__label { font-size: 0.625rem; color: var(--blue); margin-block-end: 2px; } .mock-card--light .mock-card__label { color: var(--ink-mute); } .mock-card__value { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; } .mock-card__meta { font-size: 0.625rem; color: var(--paper-mute); margin-block-start: 4px; } .mock-bar { block-size: 4px; border-radius: 2px; background: rgba(246, 243, 239, 0.2); margin-block-start: 0.5rem; overflow: hidden; } .mock-bar__fill { block-size: 100%; inline-size: 86%; background: var(--blue); border-radius: 2px; } .mock-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0.5625rem 0.625rem; } .mock-row__title { font-weight: 600; color: var(--ink); } .mock-row__sub { color: var(--ink-mute); font-size: 0.5625rem; } .chip { font-size: 0.5625rem; font-weight: 600; padding: 0.1875rem 0.5rem; border-radius: var(--r-pill); white-space: nowrap; } .chip--ok { background: var(--ok-tint); color: var(--ok); } .chip--warn { background: var(--warn-tint); color: var(--warn); } .chip--late { background: var(--late-tint); color: var(--late); } .chip--blue { background: var(--blue-tint); color: var(--purple); } /* Abstract skeleton pieces for showcase mocks */ .mock-line { block-size: 0.5rem; border-radius: var(--r-pill); background: rgba(54, 31, 66, 0.08); } .mock-line--w60 { inline-size: 60%; } .mock-line--w80 { inline-size: 80%; } .mock-line--w40 { inline-size: 40%; } .mock-photo { aspect-ratio: 16 / 10; border-radius: var(--r-sm); background: linear-gradient(135deg, rgba(150, 200, 226, 0.5), rgba(150, 200, 226, 0.15)), var(--blue-tint); display: grid; place-items: center; color: var(--purple); } .mock-photo svg { inline-size: 1.5rem; block-size: 1.5rem; opacity: 0.5; } .mock-card--light .mock-line + .mock-line { margin-block-start: 0.375rem; } .mock-card--light .mock-sign { margin-block-start: 0.625rem; } .mock-sign { block-size: 2.25rem; border-radius: var(--r-sm); border: 1px dashed var(--line-strong); display: grid; place-items: center; } .mock-sign svg { inline-size: 4rem; block-size: 1.5rem; color: var(--purple); opacity: 0.7; } /* ------------------------------------------------------------ 7. Problem section (dark) ------------------------------------------------------------ */ .problem__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); } .problem-card { background: rgba(246, 243, 239, 0.05); border: 1px solid var(--line-dark); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2rem); } .problem-card__num { font-family: var(--font-display); font-style: italic; font-size: var(--text-md); color: var(--blue); display: block; margin-block-end: var(--sp-3); } html[lang="ar"] .problem-card__num { font-style: normal; } .problem-card h3 { font-size: var(--text-lg); margin-block-end: var(--sp-2); color: var(--paper); } .problem-card p { color: var(--paper-soft); font-size: var(--text-sm); line-height: 1.7; } .problem__closer { margin-block-start: clamp(2.5rem, 5vw, 4rem); font-family: var(--font-display); font-size: var(--display-sm); font-style: italic; color: var(--blue); text-align: center; text-wrap: balance; } html[lang="ar"] .problem__closer { font-style: normal; } /* ------------------------------------------------------------ 8. How it works ------------------------------------------------------------ */ .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); counter-reset: step; position: relative; } .step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-sm); } .step__num { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--blue); display: block; margin-block-end: var(--sp-4); } .step h3 { font-size: var(--text-lg); margin-block-end: var(--sp-2); } .step p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.7; } /* connector between steps (desktop only) */ .step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 3rem; inset-inline-end: calc(-1 * clamp(1.5rem, 3vw, 2.5rem)); inline-size: clamp(1.5rem, 3vw, 2.5rem); border-block-start: 2px dashed var(--line-strong); } /* ------------------------------------------------------------ 9. Features ------------------------------------------------------------ */ .features__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } .feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-5); transition: box-shadow 0.2s ease, transform 0.2s ease; } .feature:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .feature__icon { inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--r-sm); background: var(--blue-tint); color: var(--purple); display: grid; place-items: center; margin-block-end: var(--sp-4); } .feature__icon svg { inline-size: 1.25rem; block-size: 1.25rem; } .feature h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); margin-block-end: var(--sp-1); line-height: 1.35; } .feature p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.6; } /* Tenant panel */ .tenant-panel { margin-block-start: clamp(2.5rem, 5vw, 4rem); background: var(--purple); color: var(--paper); border-radius: var(--r-lg); padding: clamp(2rem, 5vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: center; } .tenant-panel h3 { font-size: var(--display-sm); margin-block-end: var(--sp-3); } .tenant-panel__kicker { color: var(--blue); font-family: var(--font-display); font-style: italic; font-size: var(--text-md); } html[lang="ar"] .tenant-panel__kicker { font-style: normal; } .tenant-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); } .tenant-list li { display: flex; align-items: center; gap: var(--sp-3); background: rgba(246, 243, 239, 0.06); border: 1px solid var(--line-dark); border-radius: var(--r-md); padding: 0.875rem 1.125rem; font-size: var(--text-sm); } .tenant-list__icon { inline-size: 2rem; block-size: 2rem; border-radius: var(--r-pill); background: rgba(150, 200, 226, 0.16); color: var(--blue); display: grid; place-items: center; flex-shrink: 0; } .tenant-list__icon svg { inline-size: 1rem; block-size: 1rem; } /* ------------------------------------------------------------ 10. App showcase ------------------------------------------------------------ */ .showcase { overflow: hidden; } .showcase__stage { display: flex; justify-content: center; align-items: flex-end; gap: clamp(1rem, 3vw, 2.5rem); } .showcase__stage .phone { inline-size: clamp(12rem, 20vw, 16rem); } .showcase__stage .phone--side { transform: translateY(1.75rem) scale(0.94); opacity: 0.96; } .showcase__captions { display: flex; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem); margin-block-start: var(--sp-7); flex-wrap: wrap; } .showcase__caption { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--ink-soft); } .showcase__caption::before { content: ""; inline-size: 0.5rem; block-size: 0.5rem; border-radius: var(--r-pill); background: var(--blue); } /* ------------------------------------------------------------ 11. Who it's for ------------------------------------------------------------ */ .profiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); } .profile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.75rem, 3vw, 2.5rem); box-shadow: var(--shadow-sm); } .profile__icon { inline-size: 3rem; block-size: 3rem; border-radius: var(--r-md); background: var(--purple); color: var(--blue); display: grid; place-items: center; margin-block-end: var(--sp-5); } .profile__icon svg { inline-size: 1.5rem; block-size: 1.5rem; } .profile h3 { font-size: var(--text-lg); margin-block-end: var(--sp-2); } .profile p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.7; } /* ------------------------------------------------------------ 12. About ------------------------------------------------------------ */ .about__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-block-start: var(--sp-6); } .about-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.75rem, 3vw, 2.5rem); } .about-card h3 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 600; display: flex; align-items: center; gap: var(--sp-3); margin-block-end: var(--sp-3); } .about-card h3::before { content: ""; inline-size: 0.625rem; block-size: 0.625rem; border-radius: var(--r-pill); background: var(--blue); } .about-card p { color: var(--ink-soft); line-height: 1.75; } .about__lede { font-family: var(--font-display); font-size: var(--display-sm); line-height: 1.35; max-width: 46rem; } html[lang="ar"] .about__lede { line-height: 1.6; } /* ------------------------------------------------------------ 13. Security & trust ------------------------------------------------------------ */ .security { background: var(--blue-tint); border-block: 1px solid var(--line); } .security__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } .security-item { display: flex; gap: var(--sp-4); align-items: flex-start; } .security-item__icon { inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--purple); display: grid; place-items: center; flex-shrink: 0; } .security-item__icon svg { inline-size: 1.25rem; block-size: 1.25rem; } .security-item h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); margin-block-end: var(--sp-1); } .security-item p { color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.65; } /* ------------------------------------------------------------ 14. FAQ ------------------------------------------------------------ */ .faq__list { max-width: 46rem; } .faq-item { border-block-end: 1px solid var(--line); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-5); font-weight: 600; font-size: var(--text-md); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ""; inline-size: 0.875rem; block-size: 0.875rem; flex-shrink: 0; background: linear-gradient(var(--purple), var(--purple)) center / 100% 2px no-repeat, linear-gradient(var(--purple), var(--purple)) center / 2px 100% no-repeat; transition: transform 0.25s ease; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item p { color: var(--ink-soft); line-height: 1.75; padding-block-end: var(--sp-5); max-width: 40rem; } /* ------------------------------------------------------------ 15. Final CTA ------------------------------------------------------------ */ .cta { text-align: center; position: relative; overflow: hidden; } .cta::before { content: ""; position: absolute; inset-block-end: -55%; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 70rem; aspect-ratio: 2 / 1; background: radial-gradient(ellipse at center, rgba(150, 200, 226, 0.18) 0%, transparent 60%); pointer-events: none; } .cta__inner { position: relative; max-width: 46rem; margin-inline: auto; } .cta h2 { font-size: var(--display-md); margin-block-end: var(--sp-4); } .cta p { color: var(--paper-soft); font-size: var(--text-md); margin-block-end: var(--sp-6); } .cta__note { font-size: var(--text-sm); color: var(--paper-mute); margin-block-start: var(--sp-4); } /* ------------------------------------------------------------ 16. Footer ------------------------------------------------------------ */ .footer { background: var(--purple-deep); color: var(--paper); padding-block: clamp(3rem, 6vw, 4.5rem) var(--sp-6); } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); padding-block-end: var(--sp-7); border-block-end: 1px solid var(--line-dark); } .footer .brand { color: var(--paper); } .footer__tagline { color: var(--paper-mute); font-size: var(--text-sm); max-width: 20rem; margin-block-start: var(--sp-4); line-height: 1.7; } .footer__col h4 { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--paper-mute); margin-block-end: var(--sp-4); } html[lang="ar"] .footer__col h4 { font-size: var(--text-sm); } .footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); } .footer__links a { color: var(--paper-soft); text-decoration: none; font-size: var(--text-sm); transition: color 0.15s ease; } .footer__links a:hover { color: var(--paper); } .footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-block-start: var(--sp-5); font-size: var(--text-xs); color: var(--paper-mute); } /* ------------------------------------------------------------ 17. Reveal animation (subtle) ------------------------------------------------------------ */ .reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .btn, .feature { transition: none; } } /* ------------------------------------------------------------ 18. Responsive ------------------------------------------------------------ */ @media (max-width: 62rem) { /* ~992px: tablet */ .hero__inner { grid-template-columns: 1fr; } .hero__visual { padding-block-start: var(--sp-6); } .hero::before { inset-inline-end: -30%; inset-block-start: 30%; } .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tenant-panel { grid-template-columns: 1fr; } .security__grid { grid-template-columns: 1fr; max-width: 30rem; } .profiles { grid-template-columns: 1fr; max-width: 30rem; } .steps { grid-template-columns: 1fr; max-width: 30rem; } .step:not(:last-child)::after { inset-inline: 2.75rem auto; inset-block-start: auto; inset-block-end: calc(-1 * clamp(1.5rem, 3vw, 2.5rem)); inline-size: 0; block-size: clamp(1.5rem, 3vw, 2.5rem); border-block-start: none; border-inline-start: 2px dashed var(--line-strong); } .header__nav { position: absolute; inset-block-start: 100%; inset-inline: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-block-end: 1px solid var(--line); padding: var(--sp-3) clamp(1.25rem, 4vw, 2.5rem) var(--sp-5); display: none; box-shadow: var(--shadow-md); } .header__nav.is-open { display: flex; } .header__nav a { padding-block: var(--sp-3); font-size: var(--text-base); } .menu-btn { display: inline-flex; } .header__actions { margin-inline-start: auto; } } @media (max-width: 40rem) { /* ~640px: mobile */ .header__inner { gap: var(--sp-3); } .brand__logo { inline-size: 1.875rem; block-size: 1.875rem; } .brand__name { font-size: 1.125rem; } .lang-toggle { padding: 0.4375rem 0.75rem; } /* WhatsApp button collapses to an icon */ .header__actions .js-wa { padding: 0.5625rem; } .header__actions .js-wa span { display: none; } .header__actions .js-wa .btn__icon { inline-size: 1.25rem; block-size: 1.25rem; } .problem__grid { grid-template-columns: 1fr; } .features__grid { grid-template-columns: 1fr; } .about__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .showcase__stage { flex-direction: column; align-items: center; gap: var(--sp-6); } .showcase__stage .phone--side { transform: none; } .showcase__stage .phone { inline-size: clamp(14rem, 60vw, 16rem); } .float-card--top { inset-inline-start: 0; } .float-card--bottom { inset-inline-end: 0; } .hero__ctas .btn { flex: 1 1 100%; } .cta .btn { inline-size: 100%; } }