/** * OSHIDA — services / hero. * * @figma 1549:409 outer arch — 818.40 x 1302.95 at (312.79, 194.91), top * radius 409.2 (= half its width). The crown, y 195–604, is * the committed raster `services-hero-arch`; the body below it * is this file's gradient. * @figma 1549:422 silver arch mark — 197.96 x 181.38 at (621.02, 474.93). * @figma 1549:430 «خدمات ما» display type — 1056.17 x 231.71 at (206.68, 761.76). * * Owner: work package C3. */ /* -------------------------------------------------------------------------- * PAGE GROUND — cross-request to A1 / A2, see the C3 report. * * Every cached render (home, about, services, cowork, form) paints the page * frame with the SAME vertical ramp: #1C1C1C at the top, peaking at #2D2D2D * about a sixth of the way down, then falling away to #070707 at the foot. It * is a global treatment, not a services one, and it belongs in base/layout.css * on . It lives here, scoped to this route's wrapper, only so the page * matches its render today — delete this one block when A1/A2 ship the token. * * The stops are mixes of two real tokens rather than raw hex: --o-bg (#0C0C0C, * level 12) and --o-surface-nav (#2C2C2C, level 44), which happen to bracket * the measured ramp exactly. Sampled off tools/figma/renders/services-1440.webp * at x=8, mapped onto the wrapper's own block-size. * -------------------------------------------------------------------------- */ .o-services { position: relative; /* The arch overhangs the hero; clip only the inline axis so it cannot make the page scroll sideways. */ overflow-x: clip; overflow-y: visible; padding-block-end: var(--o-section-gap-lg); /* * Same reason as the about page: the header is a transparent 143px band * above this wrapper, so a gradient starting at the wrapper's own top left * a hard edge across the page. Start it at y=0 instead. */ margin-block-start: calc(var(--o-header-block-size) * -1); padding-block-start: var(--o-header-block-size); background-image: linear-gradient( to bottom, color-mix(in srgb, var(--o-surface-nav) 56%, var(--o-bg)) 0%, color-mix(in srgb, var(--o-surface-nav) 100%, var(--o-bg)) 26%, color-mix(in srgb, var(--o-surface-nav) 97%, var(--o-bg)) 37%, color-mix(in srgb, var(--o-surface-nav) 88%, var(--o-bg)) 48%, color-mix(in srgb, var(--o-surface-nav) 78%, var(--o-bg)) 63%, color-mix(in srgb, var(--o-surface-nav) 66%, var(--o-bg)) 78%, color-mix(in srgb, var(--o-surface-nav) 56%, var(--o-bg)) 93%, color-mix(in srgb, var(--o-surface-nav) 44%, var(--o-bg)) 100% ); } /* -------------------------------------------------------------------------- * The hero * * The section is 850.47px tall at the design width: 331.93 of lead-in to the * arch mark (194.91 arch top − 143 header bottom = 51.91 of that is the arch's * own lead-in), 181.38 of mark, 105.38 of gap, 231.71 of word-mark. * -------------------------------------------------------------------------- */ .o-services-hero { position: relative; display: flex; flex-direction: column; align-items: center; padding-block-start: clamp(120px, 23.05vw, 332px); } .o-services-hero__arch { position: absolute; z-index: var(--o-z-base); inset-block-start: clamp(20px, 3.6vw, 52px); inset-inline: 0; margin-inline: auto; display: flex; flex-direction: column; inline-size: clamp(240px, 56.83vw, 818px); aspect-ratio: 818.4 / 1302.95; pointer-events: none; } /* The crown carries the arch's lit rim; it is a 1x crop, never scaled past 818px. */ .o-services-hero__crown { flex: none; inline-size: 100%; } /* * Below the crown the arch is a flat per-row ramp over the page ground, so it * is a dark veil rather than a fill. Alphas solved from the render: * veil = (ground − arch) / (ground − 8) at y 604 / 770 / 1020 / 1120 / 1220 / * 1320 / 1420 / 1498, expressed as positions inside the 893.76px body. */ .o-services-hero__arch-body { flex: 1 1 auto; background-image: linear-gradient( to bottom, color-mix(in srgb, var(--o-bg-deep) 21%, transparent) 0%, color-mix(in srgb, var(--o-bg-deep) 54%, transparent) 19%, color-mix(in srgb, var(--o-bg-deep) 100%, transparent) 47%, color-mix(in srgb, var(--o-bg-deep) 84%, transparent) 58%, color-mix(in srgb, var(--o-bg-deep) 57%, transparent) 69%, color-mix(in srgb, var(--o-bg-deep) 30%, transparent) 80%, color-mix(in srgb, var(--o-bg-deep) 11%, transparent) 91%, color-mix(in srgb, var(--o-bg-deep) 0%, transparent) 100% ); } .o-services-hero__mark { position: relative; z-index: var(--o-z-raised); inline-size: clamp(96px, 13.75vw, 198px); } .o-services-hero__wordmark { position: relative; z-index: var(--o-z-raised); margin-block-start: clamp(32px, 7.32vw, 105px); inline-size: clamp(240px, 73.35vw, 1056px); }