/* ============================================================================ home.css — landing-page-only styles for Raqeemi.HomePage (route "/") ---------------------------------------------------------------------------- Loads AFTER /css/form.css. It adds nothing to :root and redefines no token. Every colour, size, shadow, radius and duration below is a form.css custom property; the only new variables are `--h-*`, and they are scoped to `.h-landing` so they cannot leak into the form pages. Rules this file obeys * RTL-first. Logical properties only. The one physical value in the file is a `translateX` on the card chevron — CSS has no logical transform, and Raqeemi.MainLayout hardcodes , so -X is unambiguously "forward". * No external assets. Every decorative surface is a gradient or a border. * Motion is opt-in: the entrance animations live inside `@media (prefers-reduced-motion: no-preference)`, so a user who asked for less motion never has a rule to override. * form.css shells (.f-app / .f-page) are deliberately NOT used: they cap the measure at 44rem and push content down 150px, which is right for a form and wrong for a landing page. `.f-btn` IS reused, because a second button implementation is how design systems die. ========================================================================== */ .h-landing { /* landing-only additions, scoped — not tokens */ --h-max: 68rem; /* wider than --page-w: this page is a grid, not a form */ --h-sec-y: clamp(4rem, 9vw, 7.5rem); --h-fs-hero: clamp(2.25rem, 7.5vw, 4.5rem); --h-fs-h2: clamp(1.625rem, 4vw, 2.5rem); --h-fs-lede: clamp(1.0625rem, 2vw, 1.3125rem); /* per-card override arrives as an inline style="--h-accent:#xxxxxx" */ --h-accent: var(--accent); display: flex; flex-direction: column; min-block-size: 100dvh; background: var(--paper); } /* Every Latin token in the copy sits in a so it cannot reorder. That fixes direction but not breaking: "Q-0002" has a break opportunity at its hyphen, and headless Chrome duly split it across two lines, leaving a dangling "-Q" that reads as garbage in an RTL paragraph. These tokens are all six characters or less, so pinning them is free. */ .h-landing bdi { white-space: nowrap; } /* ---- shell ------------------------------------------------------------- */ .h-wrap { inline-size: 100%; max-inline-size: var(--h-max); margin-inline: auto; padding-inline: var(--edge); /* [T] 25px, same gutter as the form */ } .h-section { padding-block: var(--h-sec-y); } .h-section--wash { background: var(--wash); } /* The services grid IS the primary action, so it must not be pushed a whole screen below the fold. Measured at 1440x900 in headless Chrome: the hero's bottom padding plus a full --h-sec-y left 208px of dead space and put the section heading right on the fold line. Halving the join lifts the first card row into view without touching the rhythm of the sections further down. */ .h-hero + .h-section { padding-block-start: clamp(2.5rem, 5vw, 3.5rem); } /* ---- shared headings ---------------------------------------------------- */ .h-brand { font-size: var(--fs-help); font-weight: 700; letter-spacing: 0.06em; /* Latin only — never letter-space Arabic */ color: var(--accent); } .h-kicker { font-size: var(--fs-help); font-weight: 600; color: var(--ink-soft); margin-block-end: var(--sp-2); } .h-h2 { font-size: var(--h-fs-h2); font-weight: 700; line-height: 1.25; text-wrap: balance; color: var(--ink); } .h-sub { font-size: var(--h-fs-lede); color: var(--ink-mid); max-inline-size: 40rem; margin-block-start: var(--sp-3); } /* ============================================================================ 1. HERO ------------------------------------------------------------------------ Two decorative layers, both pure CSS, both z-index:-1 under an `isolate` so they can never paint over a link: .h-hero__glow a three-lobe radial mesh. The three hues are the real catalogue accents (#1B3B8A quotation, #6D28D9 content-plan, #0F766E proposal/property/report), so the hero is literally tinted by the services it introduces. .h-hero::before a 28px dot grid, masked to fade out before the copy. ========================================================================== */ .h-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 3.5rem); } .h-hero__glow { position: absolute; inset-block-start: -35%; inset-inline: -15%; block-size: 95%; z-index: -1; pointer-events: none; background: radial-gradient(56% 66% at 84% 18%, color-mix(in oklab, #1B3B8A 26%, transparent), transparent 70%), radial-gradient(48% 60% at 54% 0%, color-mix(in oklab, #6D28D9 18%, transparent), transparent 72%), radial-gradient(46% 58% at 22% 34%, color-mix(in oklab, #0F766E 13%, transparent), transparent 74%); filter: blur(14px); } .h-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--ink) 9%, transparent) 1px, transparent 0); background-size: 28px 28px; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 62%); mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 62%); } .h-hero__title { font-size: var(--h-fs-hero); font-weight: 700; /* Plex Arabic tops out at 700 */ /* 1.12 is a Latin display value and Arabic collides at it: tall ascenders (ك, ل) plus diacritics (the damma on خُد) overlap the line above at hero size. Measured overlapping in headless Chrome at 1.12; 1.3 clears it. */ line-height: 1.3; letter-spacing: 0; /* letter-spacing breaks Arabic joining */ text-wrap: balance; margin-block-start: var(--sp-4); max-inline-size: 22ch; } /* Two blocks rather than
: the second line reflows on a phone instead of forcing a break in the wrong place. */ .h-hero__line { display: block; } .h-hero__line:last-child { color: var(--ink-mid); } .h-hero__line:last-child bdi { color: var(--ink); } .h-hero__lede { font-size: var(--h-fs-lede); line-height: 1.7; color: var(--ink-mid); max-inline-size: 38rem; /* the readable Arabic measure */ margin-block-start: var(--sp-5); } .h-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-6); } /* The one size bump on .f-btn. Everything else — colour, focus ring, active press, disabled state — is inherited from form.css. */ .h-btn-lg { block-size: 3.25rem; padding-inline: 1.75rem; font-size: 1.0625rem; border-radius: 0.75rem; } /* "no signup, no password" is the single strongest thing on the page, so it does not get help-text treatment. --fs-label + --ink-mid gives it presence without letting it compete with the two buttons directly above it. */ .h-hero__note { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-label); font-weight: 600; color: var(--ink-mid); margin-block-start: var(--sp-5); } .h-dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ok) 18%, transparent); } /* ============================================================================ 2. SERVICE GRID — the primary action ========================================================================== */ .h-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; /* 6 cards: 1 up, then 2 up, then 3 up */ margin-block-start: var(--sp-6); } @media (min-width: 640px) { .h-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .h-grid { grid-template-columns: repeat(3, 1fr); } } /* SPECIFICITY, not preference. form.css line 276 is a:not(.f-btn) { color: var(--link); border-block-end: 1px solid currentColor; font-weight: 500 } which is (0,1,1) and therefore beats a bare `.h-card` at (0,1,0). Rendered in headless Chrome, that gave every card a blue title and a 1px blue underline along its whole bottom edge. `.h-landing .h-card` is (0,2,0) and wins on class count, so the win does not depend on which sheet loads last. The same applies to every other this file styles. */ .h-landing .h-card { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); overflow: hidden; border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--sh-rest); /* the Tally hairline+lift recipe */ color: var(--ink); font-weight: 400; text-decoration: none; border-block-end: 0; /* undo the form.css link underline */ transition: box-shadow var(--dur) ease-in-out, transform var(--dur) var(--ease); } /* Per-card accent rail on the leading edge. inset-inline-start under dir=rtl is the right-hand edge, i.e. where the eye starts. Opacity-only on hover, so it costs no layout and no paint outside the rail. */ .h-card::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0.1875rem; background: var(--h-accent); opacity: 0.3; transition: opacity var(--dur) ease-in-out; } .h-card__icon { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; font-size: 1.5rem; line-height: 1; border-radius: 0.875rem; background: color-mix(in oklab, var(--h-accent) 9%, white); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--h-accent) 20%, white); margin-block-end: var(--sp-2); transition: transform var(--dur) var(--ease); } .h-card__name { font-size: 1.125rem; font-weight: 700; line-height: 1.35; } .h-card__tag { font-size: var(--fs-label); line-height: 1.65; color: var(--ink-mid); } .h-card__foot { display: flex; align-items: center; gap: var(--sp-2); margin-block-start: auto; /* pins the CTA to the bottom of every card, so a short tagline and a long one still line up across the row */ padding-block-start: var(--sp-4); font-size: var(--fs-help); font-weight: 600; color: var(--h-accent); } /* CSS-drawn chevron — no SVG, no icon font, no image. Under dir=rtl, border-inline-end is the LEFT border and border-block-end is the bottom one; that L-corner rotated 45deg reads as "<", which points along the RTL reading direction. Verified by construction, not by guess. */ .h-card__go { inline-size: 0.5rem; block-size: 0.5rem; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur) var(--ease); } @media (hover: hover) { .h-card:hover { transform: translateY(-3px); box-shadow: var(--sh-hover); } .h-card:hover::before { opacity: 1; } .h-card:hover .h-card__icon { transform: scale(1.06) rotate(-3deg); } /* translateX is the one physical value in this file: CSS has no logical translate, and this document is always dir=rtl, so -X is "forward". translate must precede rotate — after rotate it would move along the rotated axes and drift diagonally. */ .h-card:hover .h-card__go { transform: translateX(-0.1875rem) rotate(45deg); } } .h-card:active { transform: translateY(-1px); } .h-card:focus-visible { outline: 3px solid color-mix(in oklab, var(--h-accent) 45%, transparent); outline-offset: 2px; } /* ============================================================================ 3. HOW IT WORKS ========================================================================== */ .h-steps { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; margin-block-start: var(--sp-6); list-style: none; padding: 0; } @media (min-width: 820px) { .h-steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } } .h-step__num { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; font-size: 1.25rem; font-weight: 700; line-height: 1; color: var(--accent); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--accent-line); margin-block-end: var(--sp-3); } .h-step__title { font-size: 1.25rem; font-weight: 700; line-height: 1.35; margin-block-end: var(--sp-2); } .h-step__body { color: var(--ink-mid); line-height: var(--lh-body); max-inline-size: 26rem; } /* ============================================================================ 4. THE NO-SIGNUP BAND ------------------------------------------------------------------------ The only dark surface on the page, and that is the point: it is the one claim a contractor must not scroll past. --ink is form.css's text colour used as a ground; --accent-2 (#3B82F6) on it is 5.1:1, which clears AA for large text. ========================================================================== */ .h-noauth { background: var(--ink); color: var(--paper); padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center; } .h-noauth__big { font-size: clamp(1.875rem, 6vw, 3.5rem); font-weight: 700; line-height: 1.2; text-wrap: balance; color: var(--accent-2); max-inline-size: 22ch; margin-inline: auto; } .h-noauth__soft { color: color-mix(in oklab, var(--paper) 72%, transparent); } .h-noauth__sub { font-size: var(--h-fs-lede); line-height: 1.7; color: color-mix(in oklab, var(--paper) 84%, transparent); max-inline-size: 34rem; margin-inline: auto; margin-block-start: var(--sp-5); } .h-noauth__fine { font-size: var(--fs-help); line-height: 1.8; color: color-mix(in oklab, var(--paper) 55%, transparent); max-inline-size: 34rem; margin-inline: auto; margin-block-start: var(--sp-4); } /* ============================================================================ 5. TRUST ========================================================================== */ .h-trust { display: grid; gap: var(--sp-6) var(--sp-7); grid-template-columns: 1fr; margin-block-start: var(--sp-6); } @media (min-width: 760px) { .h-trust { grid-template-columns: repeat(2, 1fr); } } .h-trust__rule { display: block; inline-size: 2.25rem; block-size: 3px; border-radius: 2px; background: var(--accent); margin-block-end: var(--sp-3); } .h-trust__title { font-size: 1.1875rem; font-weight: 700; line-height: 1.4; margin-block-end: var(--sp-2); } .h-trust__body { color: var(--ink-mid); line-height: var(--lh-body); max-inline-size: 32rem; } /* ============================================================================ 6. FINAL ASK ========================================================================== */ .h-final { padding-block: 0 var(--h-sec-y); text-align: center; } .h-final__line { font-size: var(--h-fs-lede); font-weight: 600; color: var(--ink-mid); margin-block-end: var(--sp-4); } /* ============================================================================ 7. QUIET FOOTER ========================================================================== */ .h-foot { margin-block-start: auto; border-block-start: 1px solid var(--line); padding-block: var(--sp-6); font-size: var(--fs-help); color: var(--ink-soft); } .h-foot__inner { display: grid; gap: var(--sp-5); } @media (min-width: 760px) { .h-foot__inner { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: start; } .h-foot__fine { grid-column: 1 / -1; } } .h-foot__brand p + p { margin-block-start: var(--sp-2); line-height: 1.7; } .h-foot__links { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); } .h-landing .h-foot__links a { color: var(--ink-mid); text-decoration: none; border-block-end: 1px solid transparent; transition: color var(--dur) ease-in-out, border-color var(--dur) ease-in-out; } @media (hover: hover) { .h-landing .h-foot__links a:hover { color: var(--link); border-block-end-color: var(--accent-line); } } .h-landing .h-foot__links a:focus-visible { outline: 3px solid color-mix(in oklab, var(--accent) 34%, transparent); outline-offset: 3px; border-radius: 0.25rem; } .h-foot__fine { padding-block-start: var(--sp-4); border-block-start: 1px solid var(--line); color: var(--ink-ghost); } /* ============================================================================ 8. MOTION — opt-in only ------------------------------------------------------------------------ Nothing here has to be undone for a reduced-motion user: the rules simply do not exist for them, so the base state (fully visible, untransformed) stands. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { @keyframes h-rise { from { opacity: 0; transform: translateY(0.75rem); } } .h-hero__title, .h-hero__lede, .h-hero__cta, .h-hero__note { animation: h-rise 520ms var(--ease) both; } .h-hero__lede { animation-delay: 70ms; } .h-hero__cta { animation-delay: 140ms; } .h-hero__note { animation-delay: 210ms; } /* the six cards deal themselves in, 45ms apart */ .h-card { animation: h-rise 440ms var(--ease) both; } .h-card:nth-child(2) { animation-delay: 45ms; } .h-card:nth-child(3) { animation-delay: 90ms; } .h-card:nth-child(4) { animation-delay: 135ms; } .h-card:nth-child(5) { animation-delay: 180ms; } .h-card:nth-child(6) { animation-delay: 225ms; } } /* ============================================================================ 9. FORCED COLOURS (Windows high contrast) ------------------------------------------------------------------------ Every shadow is dropped in this mode, so a card with no border becomes an invisible tile. Give it a real one and remove the decoration. ========================================================================== */ @media (forced-colors: active) { .h-card { border: 1px solid CanvasText; } .h-hero__glow, .h-hero::before { display: none; } .h-trust__rule, .h-dot { forced-color-adjust: none; } }