/* ========================================================================== sections.css — home sections 2 and 3 (reel + packages) ========================================================================== Loaded after css/styles.min.css and css/hero.css. Nothing here is minified; the clamp() calls must never go through a hand-rolled minifier. Both sections continue the hero's dark, teal-tinted ground rather than dropping to the old white page. A light band immediately under a near-black hero reads as a seam, and amber loses most of its pull on white. Weights: Cairo ships 400/600/700/800 here and Inter 400/500/600/700. There is no 900 in either, so asking for one only gets a synthetic emboldening, which thickens Arabic joins unevenly. Everything below sticks to weights that are actually loaded. ========================================================================== */ .reel, .packages, .proof, .linkgrid, .faq, .gallery, .licence, .closing, .sitefoot { --s-ground: #0b1512; --s-ground-2: #101f1b; --s-raise: #142825; --s-brand: #00c0a9; --s-brand-dim: #00a693; --s-action: #f5a30b; --s-action-hi: #ffb92e; --s-text: #f2f7f5; --s-muted: #93a8a2; --s-faint: #5d726d; --s-hairline: rgba(0, 192, 169, 0.22); } /* -------------------------------------------------------------------------- Order swap. The 2-vs-3 arrangement is a class on , set by an inline script in the before first paint so there is no flash of the wrong order. Grid rather than flex: `order` works in both, but flex items shrink by default and the reel's height is an explicit calc() that must not be negotiated away. -------------------------------------------------------------------------- */ .main { display: grid; grid-template-columns: 100%; } html.order-video-second .reel { order: 3; } html.order-video-second .packages { order: 2; } /* ========================================================================== Section 2 — the reel The film fills the section edge to edge — no inset, no letterboxing, no ground showing around it. An inset rectangle put a band of page colour between the hero and the film, which is exactly the seam that made the two sections feel unrelated; removing it is what joins them. Everything sits ON the film: a tag in one top corner, the step title large in the opposite bottom corner, and a full-width segmented rail flush to the bottom edge. A hairline reticle inset inside the frame gives all of it a margin to sit against instead of floating. ========================================================================== */ .reel { position: relative; background: #000; color: var(--s-text); /* Scroll distance per beat — and, in a scrub model, this IS the playback duration. There is no separate speed control: the film takes exactly as long as the track is tall, so the only way to slow it down is to make it taller. At 28vh the whole 24 seconds went past in about 5 seconds of ordinary scrolling, which is fast enough that the beats do not register. Measured against a 900px viewport: 28vh -> 1512px -> 5.0s at a slow drag, 3.0s at a normal wheel 60vh -> 3240px -> 10.8s , 6.5s 60vh roughly halves the fast-forward. It costs about three and a half screens of scrolling for the section, which is what a centrepiece earns — and the eleven-step version cost more than that for far less. */ --reel-step: 60vh; --reel-count: 6; /* Inset of the hairline reticle from the frame edge. */ --reel-pad: clamp(0.85rem, 3vw, 2.3rem); height: calc(var(--reel-count) * var(--reel-step) + 100vh); } .reel__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; background: #000; } .reel__stage { position: absolute; inset: 0; } .reel__media { position: absolute; inset: 0; z-index: 0; } .reel__media video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; /* Per-step framing — see reel.js. */ object-position: 50% 50%; transition: object-position 0.35s cubic-bezier(0.4, 0, 0.2, 1); } /* -------------------------------------------------------------------------- Scrim — legibility, brand tint, and the joint with the hero. Layer one is a teal wash anchored to the bottom-leading corner, exactly where the title sits, so the type is lifted off the footage by colour as well as by darkness. Layer three starts at the hero's own ground colour and fades, so the top edge of the film dissolves into the section above it instead of starting on a hard line. The radial's position is a physical axis, so it is spelled out per direction rather than trusted to flip on its own. -------------------------------------------------------------------------- */ .reel__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; } html[dir="rtl"] .reel__scrim { background: radial-gradient(110% 70% at 100% 100%, rgba(0, 150, 133, 0.22), transparent 62%), linear-gradient(to top, rgba(4, 12, 10, 0.86) 0%, rgba(4, 12, 10, 0.62) 14%, rgba(4, 12, 10, 0.24) 30%, rgba(4, 12, 10, 0.04) 42%, transparent 52%), linear-gradient(to bottom, rgba(11, 21, 18, 0.8) 0%, rgba(11, 21, 18, 0.3) 6%, rgba(11, 21, 18, 0.06) 12%, transparent 18%); } html[dir="ltr"] .reel__scrim { background: radial-gradient(110% 70% at 0% 100%, rgba(0, 150, 133, 0.22), transparent 62%), linear-gradient(to top, rgba(4, 12, 10, 0.86) 0%, rgba(4, 12, 10, 0.62) 14%, rgba(4, 12, 10, 0.24) 30%, rgba(4, 12, 10, 0.04) 42%, transparent 52%), linear-gradient(to bottom, rgba(11, 21, 18, 0.8) 0%, rgba(11, 21, 18, 0.3) 6%, rgba(11, 21, 18, 0.06) 12%, transparent 18%); } /* -------------------------------------------------------------------------- Reticle — the hairline rectangle inset inside the frame. It is what turns a video into a viewfinder, and it gives the tag and the title a margin to sit against instead of floating in open space. -------------------------------------------------------------------------- */ .reel__reticle { position: absolute; inset-block: var(--reel-pad); inset-inline: var(--reel-pad); z-index: 2; border: 1px solid rgba(255, 255, 255, 0.15); pointer-events: none; } .reel__reticle::before, .reel__reticle::after { content: ""; position: absolute; inline-size: 16px; block-size: 16px; border: 2px solid var(--s-brand); } .reel__reticle::before { inset-block-start: -1px; inset-inline-start: -1px; border-inline-end: 0; border-block-end: 0; } .reel__reticle::after { inset-block-end: -1px; inset-inline-end: -1px; border-inline-start: 0; border-block-start: 0; } .reel__tag, .reel__caption, .reel__rail { position: absolute; z-index: 3; } /* -------------------------------------------------------------------------- Tag — the section's own label, in the corner opposite the title. -------------------------------------------------------------------------- */ .reel__tag { inset-block-start: calc(var(--reel-pad) + 0.9rem); inset-inline: var(--reel-pad); margin: 0; text-align: center; font-size: clamp(1rem, 2.4vw, 1.5rem); font-weight: 800; line-height: 1.35; color: #fff; /* The scrim alone is not enough here: this sits over whatever the footage happens to be doing, and the last beat is a sunlit silver car. */ text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.65); } /* Tracking and uppercase are Latin moves. Arabic has no case, and positive letter-spacing pulls a connected script apart at the joins. */ html[lang="en"] .reel__tag { letter-spacing: 0.14em; text-transform: uppercase; } .reel__counter { display: block; margin-block-start: 0.3rem; font-size: 0.78em; font-weight: 800; color: var(--s-text); font-variant-numeric: tabular-nums; /* "05 / 11" is a single LTR run. Left to the paragraph's RTL direction the bidi algorithm reorders it around the slash and renders "11 / 05", which inverts the meaning rather than merely looking wrong. */ direction: ltr; unicode-bidi: isolate; } .reel__counter em { font-style: normal; color: rgba(242, 247, 245, 0.45); font-weight: 600; } /* -------------------------------------------------------------------------- Caption. This is an advertisement, not a figure caption, so it is sized and coloured like one. A short teal rule leads into the title, the title itself is the largest type on the page after the hero, and the note sits on a plate rather than as loose grey text — small white type in a corner was disappearing into the footage entirely. -------------------------------------------------------------------------- */ .reel__caption { inset-inline-start: calc(var(--reel-pad) + 1.1rem); inset-inline-end: calc(var(--reel-pad) + 1.1rem); inset-block-end: calc(var(--reel-pad) + clamp(1.8rem, 4vh, 2.8rem)); max-inline-size: 44rem; text-align: start; } .reel__caption::before { content: ""; display: block; inline-size: clamp(2.5rem, 7vw, 4.5rem); block-size: 4px; margin-block-end: clamp(0.7rem, 1.6vh, 1.1rem); border-radius: 2px; background: var(--s-brand); box-shadow: 0 0 22px rgba(0, 192, 169, 0.55); } .reel__label { margin: 0; font-size: clamp(2.15rem, 9vw, 5.2rem); font-weight: 800; line-height: 1.08; color: #fff; text-wrap: balance; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.7); } .reel__note { display: inline-block; margin: clamp(0.7rem, 1.8vh, 1.15rem) 0 0; padding: 0.6rem 1rem; border-radius: 4px; /* Opaque enough to stand on its own instead of blurring what is behind it. backdrop-filter over a PLAYING video re-blurs a moving source every frame, which is among the most expensive things a compositor can be asked to do during a scroll — and this plate is on screen for the whole section. */ /* Lighter and translucent. #12252A was near-solid and read as a dark slab stuck on the film; a pale wash lets the footage through and still holds white text, because the scrim underneath has already darkened the bottom of the frame. No backdrop-filter — blurring a playing video every frame is what made the scroll judder. */ background: rgba(226, 245, 241, 0.16); border: 1px solid rgba(255, 255, 255, 0.28); border-inline-start: 3px solid var(--s-brand); font-size: clamp(0.88rem, 1.25vw, 1.08rem); font-weight: 600; line-height: 1.6; color: rgba(255, 255, 255, 0.92); } /* -------------------------------------------------------------------------- Progress rail — a plain segmented bar flush to the bottom edge of the frame, no margin and no text. An earlier version labelled every segment and widened the active one to carry its service name. That put a second copy of the service list along the bottom edge, competing with the caption directly above it that already says the same thing, and the widening segment made the whole bar twitch on every step change. The rail's only job is position; it does that better as a bar. The fill is driven by scroll through --fill, so it advances continuously with the film rather than snapping segment to segment. -------------------------------------------------------------------------- */ .reel__rail { inset-inline: 0; inset-block-end: 0; display: flex; gap: 0; margin: 0; padding: 0; list-style: none; block-size: clamp(5px, 0.95vh, 8px); background: rgba(4, 14, 12, 0.5); } .reel__rail li { position: relative; flex: 1 1 0; min-inline-size: 0; overflow: hidden; } .reel__rail li + li { border-inline-start: 1px solid rgba(255, 255, 255, 0.3); } .reel__rail li::after { content: ""; position: absolute; inset: 0; background: var(--s-brand); transform: scaleX(var(--fill, 0)); transition: transform 0.12s linear; } /* transform-origin is a physical axis, so it is spelled out per direction rather than trusted to flip on its own. */ html[dir="rtl"] .reel__rail li::after { transform-origin: right center; } html[dir="ltr"] .reel__rail li::after { transform-origin: left center; } /* -------------------------------------------------------------------------- No-JS / video-failed fallback. -------------------------------------------------------------------------- */ .reel__fallback { display: none; } .no-reel .reel { height: auto; } .no-reel .reel__sticky { position: static; height: auto; min-height: 100svh; } .no-reel .reel__rail, .no-reel .reel__counter, .no-reel .reel__note { display: none; } .no-reel .reel__fallback { display: grid; gap: 0.4rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); max-inline-size: 44rem; margin: 1rem 0 0; padding: 0; list-style: none; color: rgba(242, 247, 245, 0.85); font-size: 0.92rem; } .no-reel .reel__fallback li::before { content: "✓"; color: var(--s-brand); margin-inline-end: 0.4rem; } /* -------------------------------------------------------------------------- Phone. The caption is the whole message on a 390px screen — there is no second column to carry it — so it gets more room, not less. It is lifted off the bottom edge, the title takes nearly the full width, and the note keeps its plate rather than thinning to grey text. -------------------------------------------------------------------------- */ @media (max-width: 720px) { .reel__caption { inset-block-end: calc(var(--reel-pad) + 1.6rem); inset-inline-start: calc(var(--reel-pad) + 0.85rem); inset-inline-end: calc(var(--reel-pad) + 0.85rem); } .reel__label { font-size: clamp(2.1rem, 10.5vw, 3rem); line-height: 1.12; } .reel__note { display: block; font-size: 0.92rem; padding: 0.65rem 0.85rem; } } @media (prefers-reduced-motion: reduce) { .reel__media video, .reel__rail li { transition: none; } .reel__rail li::after { transition: none; } } /* ========================================================================== Section 3 — packages ========================================================================== */ .packages { position: relative; background: var(--s-ground); color: var(--s-text); padding-block: clamp(3.5rem, 9vh, 7rem); } .packages::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 60% at 50% 0%, rgba(0, 192, 169, 0.09), transparent 60%); pointer-events: none; } .packages__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(1.75rem, 4vh, 2.75rem); } .packages__head { text-align: center; display: flex; flex-direction: column; gap: 0.6rem; } .packages__eyebrow { margin: 0; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; color: var(--s-brand); } .packages__title { margin: 0; font-size: clamp(1.7rem, 4.4vw, 2.6rem); font-weight: 800; line-height: 1.25; text-wrap: balance; } .packages__grid { display: grid; gap: 1.1rem; inline-size: 100%; max-inline-size: 58rem; } @media (min-width: 800px) { .packages__grid { grid-template-columns: 1fr 1fr; align-items: start; } } .pkg { position: relative; display: flex; flex-direction: column; gap: 1.15rem; padding: clamp(1.4rem, 3.5vw, 2.1rem); border-radius: 1.1rem; background: var(--s-raise); border: 1px solid rgba(255, 255, 255, 0.07); } /* The recommended tier carries a teal edge and nothing else — no scale, no shadow, no lift. One signal is enough, and the amber is spent on the CTA. */ .pkg--featured { border-color: var(--s-hairline); box-shadow: 0 0 0 1px var(--s-hairline); } .pkg__badge { position: absolute; inset-block-start: -0.7rem; inset-inline-start: clamp(1.4rem, 3.5vw, 2.1rem); padding: 0.28rem 0.75rem; border-radius: 999px; background: var(--s-brand); color: #04211d; font-size: 0.75rem; font-weight: 800; } .pkg__name { margin: 0; font-size: 1.3rem; font-weight: 800; } .pkg__tagline { margin: 0; font-size: 0.92rem; color: var(--s-muted); } /* Duration. The value equation's time component, stated where the decision is actually made rather than inside a collapsed FAQ answer. */ .pkg__time { display: inline-flex; align-items: center; gap: 0.45rem; align-self: flex-start; padding: 0.4rem 0.75rem; border-radius: 999px; background: rgba(0, 192, 169, 0.1); border: 1px solid var(--s-hairline); font-size: 0.85rem; font-weight: 700; color: var(--s-brand); } .pkg__time svg { inline-size: 1em; block-size: 1em; flex-shrink: 0; } .pkg__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .pkg__price { padding: 0.8rem 0.9rem; border-radius: 0.7rem; background: rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; gap: 0.15rem; } .pkg__price dt { font-size: 0.8rem; font-weight: 600; color: var(--s-muted); } .pkg__price dd { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; } .pkg__was { font-size: 0.85rem; color: var(--s-faint); text-decoration: line-through; } .pkg__now { font-size: 1.35rem; font-weight: 800; color: var(--s-text); } .pkg__unit { font-size: 0.8rem; font-weight: 600; color: var(--s-muted); } .pkg__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-block-start: 1.1rem; } .pkg__list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.92rem; line-height: 1.5; color: var(--s-muted); } .pkg__list svg { inline-size: 1.05rem; block-size: 1.05rem; margin-block-start: 0.15rem; color: var(--s-brand); flex-shrink: 0; } .pkg__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; margin-block-start: auto; padding: 0.95rem 1.5rem; border-radius: 999px; font-size: 1rem; font-weight: 800; text-decoration: none; border: 2px solid transparent; transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; } .pkg__cta--primary { background: var(--s-action); color: #1b1200; box-shadow: 0 10px 30px -8px rgba(245, 163, 11, 0.5); } .pkg__cta--primary:hover { background: var(--s-action-hi); transform: translateY(-2px); } .pkg__cta--ghost { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.16); color: var(--s-text); } .pkg__cta--ghost:hover { border-color: var(--s-brand); color: var(--s-brand); transform: translateY(-2px); } .pkg__cta svg { inline-size: 1.15em; block-size: 1.15em; flex-shrink: 0; } /* -------------------------------------------------------------------------- Reassurance strip — sits at the buttons, not in a band of its own further down. That half-second before committing is where doubt spikes, and every line here is checkable: a licence number, a live Google listing, the hours and the payment methods. -------------------------------------------------------------------------- */ .packages__assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem 1.5rem; margin: 0; padding: 1.15rem 0 0; inline-size: 100%; max-inline-size: 58rem; list-style: none; border-top: 1px solid var(--s-hairline); } .packages__assure li { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; font-weight: 600; color: var(--s-muted); } .packages__assure svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--s-brand); flex-shrink: 0; } .packages__assure a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .packages__assure a:hover { color: var(--s-brand); } @media (prefers-reduced-motion: reduce) { .pkg__cta { transition: none; } } /* ========================================================================== Sections 4-8 and the footer ========================================================================== Everything below the packages keeps the same dark ground. The variation between bands comes from surface and density — raised cards, hairline tiles, a teal closing panel — rather than from flipping to white, which would reintroduce the seam the whole page was rebuilt to remove. ========================================================================== */ .band { position: relative; background: var(--s-ground); color: var(--s-text); padding-block: clamp(3.25rem, 8vh, 6rem); } .band__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(1.6rem, 3.5vh, 2.5rem); } .band__head { display: flex; flex-direction: column; gap: 0.55rem; text-align: center; max-inline-size: 46rem; } .band__eyebrow { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--s-brand); } .band__title { margin: 0; font-size: clamp(1.65rem, 4.2vw, 2.5rem); font-weight: 800; line-height: 1.25; text-wrap: balance; } .band__sub { margin: 0; font-size: clamp(0.92rem, 1.2vw, 1.05rem); line-height: 1.7; color: var(--s-muted); text-wrap: pretty; } /* -------------------------------------------------------------------------- Proof — three real reviews and one checkable licence number. No counts are invented and no rating is aggregated here: the old page claimed a thousand-plus satisfied customers beside six Google reviews, which is the kind of contradiction that makes a visitor doubt everything else on the page. -------------------------------------------------------------------------- */ .proof__grid { display: grid; gap: 1rem; inline-size: 100%; max-inline-size: 66rem; } @media (min-width: 780px) { .proof__grid { grid-template-columns: repeat(3, 1fr); } } .review { display: flex; flex-direction: column; gap: 0.9rem; padding: clamp(1.25rem, 3vw, 1.65rem); border-radius: 1rem; background: var(--s-raise); border: 1px solid rgba(255, 255, 255, 0.07); } .review__stars { display: flex; gap: 0.15rem; color: var(--s-action); } .review__stars svg { inline-size: 1rem; block-size: 1rem; } .review__text { margin: 0; font-size: 0.95rem; line-height: 1.75; color: rgba(242, 247, 245, 0.92); } .review__who { display: flex; flex-direction: column; gap: 0.15rem; margin-block-start: auto; padding-block-start: 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.08); } .review__name { font-size: 0.92rem; font-weight: 800; color: var(--s-text); } .review__meta { font-size: 0.82rem; color: var(--s-muted); } /* The licence is one line, not a section. It occupied an entire band on the old page for a single registration number. */ .proof__licence { display: flex; align-items: center; gap: 0.6rem; inline-size: 100%; max-inline-size: 66rem; margin: 0; padding: 0.9rem 1.15rem; border-radius: 0.8rem; background: rgba(0, 192, 169, 0.07); border: 1px solid var(--s-hairline); font-size: 0.9rem; font-weight: 600; color: rgba(242, 247, 245, 0.9); text-wrap: pretty; } .proof__licence svg { inline-size: 1.2rem; block-size: 1.2rem; color: var(--s-brand); flex-shrink: 0; } /* -------------------------------------------------------------------------- Link grids — services and areas. These exist for internal linking as much as for browsing: fifteen service pages and six governorate pages need a route in from the homepage, and the reel only names the eleven items inside the VIP package. -------------------------------------------------------------------------- */ .linkgrid__list { display: grid; gap: 0.6rem; inline-size: 100%; max-inline-size: 66rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); } .linkgrid__list--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); } .linkgrid__list a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; block-size: 100%; padding: 0.9rem 1.05rem; border-radius: 0.7rem; background: var(--s-raise); border: 1px solid rgba(255, 255, 255, 0.07); color: var(--s-text); font-size: 0.94rem; font-weight: 700; text-decoration: none; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; } .linkgrid__list a:hover { background: #17302c; border-color: var(--s-hairline); transform: translateY(-2px); } .linkgrid__list svg { inline-size: 1rem; block-size: 1rem; color: var(--s-brand); flex-shrink: 0; } /* The arrow points along the reading direction, so it is mirrored for Arabic rather than left pointing the wrong way down the page. */ html[dir="rtl"] .linkgrid__list svg { transform: scaleX(-1); } /* -------------------------------------------------------------------------- FAQ —
, so it opens with no JavaScript at all and every answer stays in the DOM for search engines whether or not anyone clicks. -------------------------------------------------------------------------- */ .faq__list { inline-size: 100%; max-inline-size: 52rem; display: flex; flex-direction: column; gap: 0.6rem; } .faq__item { border-radius: 0.8rem; background: var(--s-raise); border: 1px solid rgba(255, 255, 255, 0.07); overflow: hidden; } .faq__item[open] { border-color: var(--s-hairline); } .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; font-size: 0.98rem; font-weight: 700; color: var(--s-text); cursor: pointer; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; inline-size: 0.7rem; block-size: 0.7rem; flex-shrink: 0; border-inline-end: 2px solid var(--s-brand); border-block-end: 2px solid var(--s-brand); transform: rotate(45deg); transition: transform 0.2s ease; } .faq__item[open] .faq__q::after { transform: rotate(-135deg); } .faq__a { margin: 0; padding: 0 1.2rem 1.15rem; font-size: 0.93rem; line-height: 1.75; color: var(--s-muted); } /* -------------------------------------------------------------------------- Closing CTA — the last thing before the footer, and the only band that changes ground colour, because it is the one that asks. -------------------------------------------------------------------------- */ .closing { position: relative; color: var(--s-text); background: radial-gradient(85% 120% at 50% 0%, rgba(0, 166, 147, 0.30), transparent 62%), var(--s-ground-2); padding-block: clamp(3.5rem, 9vh, 6.5rem); border-block-start: 1px solid var(--s-hairline); } .closing__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; } .closing__title { margin: 0; font-size: clamp(1.8rem, 5.5vw, 3rem); font-weight: 800; line-height: 1.2; text-wrap: balance; } .closing__sub { margin: 0; max-inline-size: 40rem; font-size: clamp(0.95rem, 1.3vw, 1.1rem); line-height: 1.7; color: rgba(242, 247, 245, 0.82); text-wrap: pretty; } .closing__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .closing__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 1rem 1.85rem; border-radius: 999px; font-size: 1.02rem; font-weight: 800; text-decoration: none; border: 2px solid transparent; transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; } .closing__cta--primary { background: var(--s-action); color: #1b1200; box-shadow: 0 12px 34px -10px rgba(245, 163, 11, 0.55); } .closing__cta--primary:hover { background: var(--s-action-hi); transform: translateY(-2px); } .closing__cta--ghost { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.2); color: var(--s-text); } .closing__cta--ghost:hover { border-color: var(--s-brand); color: var(--s-brand); transform: translateY(-2px); } .closing__cta svg { inline-size: 1.2em; block-size: 1.2em; flex-shrink: 0; } .closing__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem 1.5rem; margin: 0.35rem 0 0; padding: 0; list-style: none; } .closing__strip li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.87rem; font-weight: 600; color: rgba(242, 247, 245, 0.75); } .closing__strip svg { inline-size: 1rem; block-size: 1rem; color: var(--s-brand); flex-shrink: 0; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .sitefoot { background: #071110; color: var(--s-muted); padding-block: clamp(2.5rem, 6vh, 4rem) clamp(1.5rem, 3vh, 2rem); border-block-start: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.9rem; } .sitefoot__grid { display: grid; gap: 2rem; align-items: start; } @media (min-width: 780px) { .sitefoot__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; } } .sitefoot__brand { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.85rem; font-size: 1.1rem; font-weight: 800; color: var(--s-text); text-decoration: none; } .sitefoot__brand svg { inline-size: 1.5rem; block-size: 1.5rem; color: var(--s-brand); } .sitefoot__about { margin: 0 0 0.85rem; line-height: 1.75; max-inline-size: 30rem; } .sitefoot__licence { margin: 0; font-size: 0.82rem; color: var(--s-faint); } .sitefoot h3 { margin: 0 0 0.85rem; font-size: 0.86rem; font-weight: 800; color: var(--s-text); } .sitefoot ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; } .sitefoot a { color: inherit; text-decoration: none; transition: color 0.16s ease; } .sitefoot a:hover { color: var(--s-brand); } .sitefoot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-block-start: clamp(1.75rem, 4vh, 2.75rem); padding-block-start: 1.25rem; border-block-start: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.82rem; color: var(--s-faint); } .sitefoot__bottom p { margin: 0; } /* ========================================================================== Light bands — pricing and reviews ========================================================================== Six dark sections in a row read as one undifferentiated slab, and the eye stops registering the boundaries. These two flip to light: they are the two that ask the visitor to weigh something (what it costs, whether to believe it), and giving them a different ground makes the page breathe and marks them as the decision points. Amber loses some of its pull on white, so the primary CTA gains a deeper shadow to hold its weight against the lighter surface. ========================================================================== */ .packages.is-light, .proof.is-light, .faq.is-light { --s-ground: #f2f6f5; --s-raise: #ffffff; --s-brand: #00796b; --s-brand-dim: #00695c; --s-text: #10201d; --s-muted: #556b66; --s-faint: #8ba09b; --s-hairline: rgba(0, 121, 107, 0.24); background: var(--s-ground); color: var(--s-text); } /* The teal glow that lifts a dark band off its neighbour just muddies a light one, so it is dropped rather than recoloured. */ .packages.is-light::before, .proof.is-light::before { display: none; } .packages.is-light .pkg, .proof.is-light .review, .faq.is-light .faq__item { background: var(--s-raise); border-color: rgba(16, 32, 29, 0.1); box-shadow: 0 1px 2px rgba(16, 32, 29, 0.04), 0 12px 28px -18px rgba(16, 32, 29, 0.35); } .packages.is-light .pkg--featured { border-color: var(--s-brand); box-shadow: 0 0 0 1px var(--s-brand), 0 14px 32px -18px rgba(0, 121, 107, 0.45); } .packages.is-light .pkg__badge { color: #fff; } .packages.is-light .pkg__price { background: #eef3f2; } .packages.is-light .pkg__list, .proof.is-light .review__who { border-top-color: rgba(16, 32, 29, 0.1); } .packages.is-light .pkg__now, .proof.is-light .review__name { color: var(--s-text); } .proof.is-light .review__text { color: #24413b; } .packages.is-light .pkg__cta--primary { box-shadow: 0 12px 26px -12px rgba(245, 163, 11, 0.85); } .packages.is-light .pkg__cta--ghost { background: #fff; border-color: rgba(16, 32, 29, 0.18); color: var(--s-text); } .packages.is-light .pkg__cta--ghost:hover { border-color: var(--s-brand); color: var(--s-brand); } .proof.is-light .proof__licence { background: rgba(0, 121, 107, 0.07); border-color: var(--s-hairline); color: #24413b; } .packages.is-light .packages__assure { border-top-color: rgba(16, 32, 29, 0.12); } .packages.is-light .packages__assure li { color: var(--s-muted); } /* ========================================================================== Slider — services and areas as one horizontal row ========================================================================== Fifteen services stacked vertically was the tallest thing on the page after the reel, and on a phone it was fifteen full-width rows of nothing but a name. As a single scrolling row it costs one row of height at any width. Native overflow scrolling with x-snap: no JavaScript, no carousel library, and it keeps keyboard and trackpad behaviour the browser already provides. ========================================================================== */ .slider { position: relative; inline-size: 100%; } .slider__track { display: flex; gap: 0.65rem; margin: 0; padding: 0.25rem 0 1rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--s-brand) transparent; } .slider__track::-webkit-scrollbar { block-size: 6px; } .slider__track::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 3px; } .slider__track::-webkit-scrollbar-thumb { background: var(--s-brand); border-radius: 3px; } .slider__track > li { flex: 0 0 auto; scroll-snap-align: start; } .slider__track a { display: flex; align-items: center; gap: 0.6rem; block-size: 100%; padding: 0.85rem 1.1rem; border-radius: 0.7rem; background: var(--s-raise); border: 1px solid rgba(255, 255, 255, 0.07); color: var(--s-text); font-size: 0.92rem; font-weight: 700; white-space: nowrap; text-decoration: none; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; } .slider__track a:hover { background: #17302c; border-color: var(--s-hairline); transform: translateY(-2px); } .slider__track svg { inline-size: 0.95rem; block-size: 0.95rem; color: var(--s-brand); flex-shrink: 0; } /* The arrow points along the reading direction, so it is mirrored for Arabic rather than left pointing back up the page. */ html[dir="rtl"] .slider__track svg { transform: scaleX(-1); } /* A hint that there is more off the edge — without it a row that happens to fill the viewport looks complete. Pointer-events off so it never blocks a drag on the tiles beneath it. */ .slider::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: clamp(1.5rem, 5vw, 3.5rem); pointer-events: none; } html[dir="rtl"] .slider::after { background: linear-gradient(to left, var(--s-ground), transparent); } html[dir="ltr"] .slider::after { background: linear-gradient(to right, var(--s-ground), transparent); } /* ========================================================================== Gallery and licence ========================================================================== */ /* -------------------------------------------------------------------------- Gallery — a horizontal rail, like the services and areas rows, so a set of portrait phone photos costs one row of height instead of a wall of them. Every frame here is a RESULT, and every frame is people-free on purpose: the film already shows the crew working, and the client's photo set carries more than one brand's uniform (see the note in the build script), so a result shot is both the right content and the safe one. -------------------------------------------------------------------------- */ .gallery__track { display: flex; gap: 0.7rem; margin: 0; padding: 0.25rem 0 1rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--s-brand) transparent; } .gallery__track::-webkit-scrollbar { block-size: 6px; } .gallery__track::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 3px; } .gallery__track::-webkit-scrollbar-thumb { background: var(--s-brand); border-radius: 3px; } .gallery__track > li { flex: 0 0 auto; scroll-snap-align: start; } .gallery__fig { position: relative; margin: 0; inline-size: clamp(11rem, 42vw, 16rem); border-radius: 0.9rem; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.08); } .gallery__fig img { display: block; inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .gallery__fig:hover img { transform: scale(1.04); } .gallery__fig figcaption { position: absolute; inset-inline: 0; inset-block-end: 0; padding: 1.6rem 0.9rem 0.75rem; font-size: 0.85rem; font-weight: 700; color: #fff; background: linear-gradient(to top, rgba(4, 12, 10, 0.92), transparent); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .gallery__fig img { transition: none; } } /* -------------------------------------------------------------------------- Gallery — a grid, not a rail. A slider hides most of the work behind a gesture; the point of this section is that the work is visible at a glance. -------------------------------------------------------------------------- */ .gallery__grid { display: grid; gap: 0.75rem; inline-size: 100%; max-inline-size: 66rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, 1fr); } @media (min-width: 720px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); } /* The first frame takes a double cell, so the grid has a focal point instead of reading as a contact sheet of equals. */ .gallery__grid > li:first-child { grid-column: span 2; grid-row: span 2; } } .gallery__grid .gallery__fig { inline-size: 100%; block-size: 100%; } .gallery__grid .gallery__fig img { aspect-ratio: 4 / 5; block-size: 100%; } @media (min-width: 720px) { .gallery__grid > li:first-child .gallery__fig img { aspect-ratio: auto; } } /* -------------------------------------------------------------------------- Licence — the document itself, beside the facts. -------------------------------------------------------------------------- */ .licence__split { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); inline-size: 100%; max-inline-size: 66rem; align-items: start; } @media (min-width: 860px) { .licence__split { grid-template-columns: 0.85fr 1.15fr; } } .licence__doc { position: relative; display: block; margin: 0; border-radius: 0.9rem; overflow: hidden; border: 1px solid var(--s-hairline); background: #fff; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85); } .licence__doc img { display: block; inline-size: 100%; block-size: auto; } .licence__doc figcaption { padding: 0.7rem 0.9rem; background: var(--s-raise); color: var(--s-muted); font-size: 0.78rem; line-height: 1.5; } /* -------------------------------------------------------------------------- Compact link cluster — services and areas. These were two full bands of tiles, which is a lot of page for a visitor who has just watched the whole service list play out in the film. They exist for internal linking and for the person who wants one specific page, so they are now one band of plain pills that costs a couple of rows. -------------------------------------------------------------------------- */ .links__group { inline-size: 100%; max-inline-size: 62rem; } .links__group + .links__group { margin-block-start: 1.4rem; } .links__label { margin: 0 0 0.7rem; font-size: 0.82rem; font-weight: 700; color: var(--s-brand); } .links__set { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0; padding: 0; list-style: none; } .links__set a { display: inline-block; padding: 0.45rem 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.09); color: var(--s-muted); font-size: 0.85rem; font-weight: 600; text-decoration: none; transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease; } .links__set a:hover { color: var(--s-text); background: rgba(0, 192, 169, 0.1); border-color: var(--s-hairline); } /* ========================================================================== Stats band — the licence, the rating, the hours and the coverage ========================================================================== These four facts were a thin inline strip under the pricing cards, set in 0.88rem grey, and they read as a footnote. They are the most checkable things on the page and they were the least visible thing in the section. Given their own tiles with the value set large, they carry the weight they earn. Payment methods drop to a single line beneath, because a list of card types is not a statistic and giving it a tile alongside 5.0 and 24/7 would dilute the three that are. ========================================================================== */ .stats { display: grid; gap: 0.7rem; inline-size: 100%; max-inline-size: 58rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, 1fr); } @media (min-width: 820px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; text-align: center; padding: clamp(1rem, 2.5vw, 1.4rem) 0.8rem; border-radius: 0.9rem; background: var(--s-raise); border: 1px solid rgba(16, 32, 29, 0.1); } .stat__v { font-size: clamp(1.5rem, 4.2vw, 2.1rem); font-weight: 800; line-height: 1.1; color: var(--s-brand); font-variant-numeric: tabular-nums; /* "5.0", "24/7" and "2020/21580" are LTR runs; inside an RTL paragraph the bidi algorithm reorders them around the dot and the slashes. */ direction: ltr; unicode-bidi: isolate; } .stat__l { font-size: 0.82rem; font-weight: 600; line-height: 1.5; color: var(--s-muted); text-wrap: balance; } /* The licence number is long enough that it would set smaller than the rest; holding it back keeps the four values optically level. */ .stat--code .stat__v { font-size: clamp(1.05rem, 2.6vw, 1.35rem); } .stats__foot { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.86rem; font-weight: 600; color: var(--s-muted); } .stats__foot svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--s-brand); flex-shrink: 0; } /* On the dark ground the tiles need their own surface treatment. */ .packages:not(.is-light) .stat { background: var(--s-raise); border-color: rgba(255, 255, 255, 0.07); } /* ========================================================================== Gallery — uniform tiles ========================================================================== Equal cells, the way the original did it. A double-width hero cell made the grid read as unbalanced rather than as a set of results. ========================================================================== */ .gallery__grid > li:first-child { grid-column: auto; grid-row: auto; } .gallery__grid .gallery__fig img { aspect-ratio: 4 / 5; } @media (min-width: 720px) { .gallery__grid > li:first-child { grid-column: auto; grid-row: auto; } .gallery__grid > li:first-child .gallery__fig img { aspect-ratio: 4 / 5; } } /* ========================================================================== Stats — one instrument panel rather than four loose boxes ========================================================================== Four separate cards read as four small things. A single panel divided by hairlines reads as one set of figures, which is what they are. ========================================================================== */ .stats { display: grid; gap: 0; inline-size: 100%; max-inline-size: 58rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, 1fr); border-radius: 1.15rem; overflow: hidden; border: 1px solid var(--s-hairline); background: radial-gradient(90% 130% at 50% 0%, rgba(0, 192, 169, 0.1), transparent 70%), var(--s-raise); } @media (min-width: 820px) { .stats { grid-template-columns: repeat(4, 1fr); } } .stat { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; padding: clamp(1.25rem, 3vw, 1.9rem) 0.9rem; text-align: center; background: none; border: 0; border-radius: 0; border-inline-end: 1px solid rgba(255, 255, 255, 0.08); border-block-end: 1px solid rgba(255, 255, 255, 0.08); } /* Two-up on phones, four-up above: the trailing edge of each row and the final row must not carry a divider. */ .stat:nth-child(2n) { border-inline-end: 0; } .stat:nth-last-child(-n+2) { border-block-end: 0; } @media (min-width: 820px) { .stat:nth-child(2n) { border-inline-end: 1px solid rgba(255, 255, 255, 0.08); } .stat:last-child { border-inline-end: 0; } .stat { border-block-end: 0; } } .stat__icon { inline-size: 1.4rem; block-size: 1.4rem; color: var(--s-brand); opacity: 0.85; } .stat__v { font-size: clamp(1.7rem, 5vw, 2.5rem); font-weight: 800; line-height: 1; color: var(--s-text); font-variant-numeric: tabular-nums; /* "5.0", "24/7" and "500+" are LTR runs; RTL would reorder them around the dot, the slash and the plus. */ direction: ltr; unicode-bidi: isolate; } .stat__l { font-size: 0.8rem; font-weight: 600; line-height: 1.5; color: var(--s-muted); text-wrap: balance; } .packages.is-light .stats { border-color: rgba(16, 32, 29, 0.12); background: radial-gradient(90% 130% at 50% 0%, rgba(0, 121, 107, 0.07), transparent 70%), var(--s-raise); } .packages.is-light .stat { border-inline-end-color: rgba(16, 32, 29, 0.1); border-block-end-color: rgba(16, 32, 29, 0.1); } /* ========================================================================== Licence — the original two-column layout restored ========================================================================== Copy on one side saying what the licence means for the customer, the document itself on the other. The facts table that briefly replaced this read like a form: accurate, and persuading nobody. ========================================================================== */ .cert { display: grid; gap: clamp(1.5rem, 4vw, 3rem); inline-size: 100%; max-inline-size: 66rem; align-items: start; } @media (min-width: 900px) { .cert { grid-template-columns: 1.15fr 0.85fr; } } .cert__desc { margin: 0 0 1rem; font-size: clamp(0.95rem, 1.2vw, 1.05rem); line-height: 1.85; color: var(--s-muted); text-wrap: pretty; } .cert__list { margin: 0 0 1.25rem; padding: 0; list-style: none; display: grid; gap: 0.7rem; } .cert__list li { position: relative; padding-inline-start: 1.5rem; font-size: 0.95rem; line-height: 1.75; color: var(--s-muted); } .cert__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.65em; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--s-brand); } .cert__list strong { color: var(--s-text); font-weight: 800; } .cert__cta { margin: 0; padding: 0.95rem 1.15rem; border-radius: 0.8rem; background: rgba(0, 192, 169, 0.08); border-inline-start: 3px solid var(--s-brand); font-size: 0.95rem; line-height: 1.75; font-weight: 600; color: var(--s-text); } .cert__image { margin: 0; border-radius: 0.9rem; overflow: hidden; border: 1px solid var(--s-hairline); background: #fff; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.85); } .cert__image img { display: block; inline-size: 100%; block-size: auto; } .cert__caption { padding: 0.85rem 1rem; background: var(--s-raise); color: var(--s-muted); font-size: 0.82rem; line-height: 1.7; text-align: center; } .cert__caption strong { color: var(--s-text); font-weight: 800; } /* ========================================================================== Pricing — the original card, restored ========================================================================== Back to the layout this site already had: white card, centred header, price rows separated by hairlines, features as bordered rows, badge centred on the top edge, a teal border on the recommended tier. Two rebuilds of my own were worse than the thing that was already here. Two research-backed changes on top of the restore, both about conversion rather than looks: 1. The VIP card is FIRST in the DOM. CXL's eye-tracking study found people spend the most time on the plan listed first and choose the expensive plan most often when it appears first — so it leads on the right in Arabic and on the left in English, which DOM order gives for free. 2. The price carries real visual weight. "Price must be given the appropriate weight, both visually and semantically" is the single most repeated finding in the literature, and the struck old price had been set nearly as large as the new one. ========================================================================== */ .pricing__grid { display: grid; gap: 1.75rem; inline-size: 100%; max-inline-size: 62rem; align-items: start; } @media (min-width: 800px) { .pricing__grid { grid-template-columns: repeat(2, 1fr); } } .pricing-card { position: relative; display: flex; flex-direction: column; padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 3vw, 2rem); border-radius: 1rem; background: var(--s-raise); border: 1px solid rgba(16, 32, 29, 0.1); box-shadow: 0 1px 2px rgba(16, 32, 29, 0.04), 0 14px 30px -20px rgba(16, 32, 29, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease; } .pricing-card:hover { transform: translateY(-6px); box-shadow: 0 4px 10px rgba(16, 32, 29, 0.07), 0 26px 50px -24px rgba(16, 32, 29, 0.5); } .pricing-card--featured { border: 3px solid var(--s-brand); } .pricing-card__badge { position: absolute; inset-block-start: -0.95rem; padding: 0.45rem 1.35rem; border-radius: 2rem; background: var(--s-action); color: #1b1200; font-size: 0.8rem; font-weight: 800; white-space: nowrap; } /* The bundle already sets left: 50% on this class. Writing inset-inline-start here resolves to right: 50% in RTL, which leaves BOTH sides pinned and collapses the box to zero width — the badge came out as a circle with its text wrapped inside. Each direction therefore clears the opposite side explicitly rather than relying on a logical property to do it. */ html[dir="rtl"] .pricing-card__badge { left: auto; right: 50%; transform: translateX(50%); } html[dir="ltr"] .pricing-card__badge { right: auto; left: 50%; transform: translateX(-50%); } .pricing-card__header { text-align: center; margin-block-end: 1.5rem; } .pricing-card__title { margin: 0 0 0.4rem; font-size: clamp(1.4rem, 3.4vw, 1.75rem); font-weight: 800; color: var(--s-text); } .pricing-card__subtitle { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--s-muted); } /* Duration kept from the rebuilt version: it is the value equation's time component, and it belongs where the decision is made. */ .pricing-card__time { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0.85rem 0 0; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(0, 121, 107, 0.09); border: 1px solid var(--s-hairline); font-size: 0.82rem; font-weight: 700; color: var(--s-brand); } .pricing-card__time svg { inline-size: 1em; block-size: 1em; flex-shrink: 0; } .pricing-card__price { margin-block-end: 1.5rem; } .price-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.8rem; border-block-end: 1px solid rgba(16, 32, 29, 0.1); } .price-row:last-child { border-block-end: 0; } .price-label { font-size: 0.95rem; font-weight: 600; color: var(--s-muted); } .price-amount { display: flex; align-items: baseline; gap: 0.7rem; } /* Held well back from the new price. Set at a similar size the two read as alternatives rather than as before-and-after. */ .price-old { font-size: 0.9rem; color: var(--s-faint); text-decoration: line-through; } .price-old span { font-size: 0.8em; } .price-new { font-size: clamp(1.5rem, 4vw, 1.85rem); font-weight: 800; line-height: 1; color: var(--s-brand); font-variant-numeric: tabular-nums; } .price-new span { font-size: 0.55em; font-weight: 700; } .pricing-card__features { flex-grow: 1; margin: 0 0 1.5rem; padding: 0; list-style: none; } .pricing-card__features li { position: relative; padding: 0.7rem 0 0.7rem 0; padding-inline-start: 1.5rem; font-size: 0.93rem; line-height: 1.5; color: var(--s-text); border-block-end: 1px solid rgba(16, 32, 29, 0.08); } .pricing-card__features li:last-child { border-block-end: 0; } .pricing-card__features li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--s-brand); font-weight: 800; } .pricing-card__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; margin-block-start: auto; padding: 0.95rem 1.5rem; border-radius: 999px; font-size: 1rem; font-weight: 800; text-decoration: none; border: 2px solid var(--s-brand); color: var(--s-brand); background: transparent; transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease; } .pricing-card__cta:hover { background: rgba(0, 121, 107, 0.08); transform: translateY(-2px); } .pricing-card__cta--primary { background: var(--s-action); border-color: var(--s-action); color: #1b1200; box-shadow: 0 12px 26px -12px rgba(245, 163, 11, 0.85); } .pricing-card__cta--primary:hover { background: var(--s-action-hi); border-color: var(--s-action-hi); color: #1b1200; } .pricing-card__cta svg { inline-size: 1.15em; block-size: 1.15em; flex-shrink: 0; } /* ========================================================================== Social proof — CRAVENS applied ========================================================================== Eye-tracking work finds testimonials hold attention longer than any other social-proof format, and longest of all when they carry a face. We have no customer photographs and would not publish them if we did, so the visual anchor is an initial mark plus the car each person actually had done — which also supplies the "enumerated" and "specific" legs of CRAVENS that a bare paragraph of praise misses. ========================================================================== */ .review { display: flex; flex-direction: column; gap: 0.85rem; padding: clamp(1.35rem, 3vw, 1.75rem); border-radius: 1rem; } .review__top { display: flex; align-items: center; gap: 0.75rem; } .review__avatar { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--s-brand), var(--s-brand-dim)); color: #fff; font-size: 1.15rem; font-weight: 800; } .review__id { display: flex; flex-direction: column; gap: 0.1rem; min-inline-size: 0; } .review__name { font-size: 0.98rem; font-weight: 800; color: var(--s-text); } .review__meta { font-size: 0.82rem; color: var(--s-muted); } .review__stars { display: flex; gap: 0.15rem; color: var(--s-action); } .review__stars svg { inline-size: 1rem; block-size: 1rem; } .review__text { margin: 0; font-size: 0.95rem; line-height: 1.8; color: var(--s-text); } .review__verified { display: flex; align-items: center; gap: 0.4rem; margin-block-start: auto; padding-block-start: 0.85rem; border-block-start: 1px solid rgba(16, 32, 29, 0.1); font-size: 0.78rem; font-weight: 700; color: var(--s-brand); } .review__verified svg { inline-size: 0.85rem; block-size: 0.85rem; flex-shrink: 0; } .proof:not(.is-light) .review__verified { border-block-start-color: rgba(255, 255, 255, 0.08); } /* -------------------------------------------------------------------------- Proof at the button. CRAVENS calls it "nearby"; the Hormozi material calls it the half-second before committing, where doubt spikes. Both land in the same place: the strongest proof on the page belongs immediately above the button, not in a testimonials band several screens up. -------------------------------------------------------------------------- */ .closing__proof { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.6rem; margin: 0; padding: 0.6rem 1.15rem; border-radius: 999px; background: rgba(0, 192, 169, 0.1); border: 1px solid var(--s-hairline); font-size: 0.88rem; font-weight: 600; color: rgba(242, 247, 245, 0.9); } .closing__proof strong { color: var(--s-brand); font-weight: 800; } .closing__stars { display: inline-flex; gap: 0.1rem; color: var(--s-action); } .closing__stars svg { inline-size: 0.95rem; block-size: 0.95rem; } /* ========================================================================== Links band — last on the page, one scrolling row per group ========================================================================== The pills used to wrap, so fifteen services took two or three rows and the band cost most of a screen. Non-wrapping with sideways overflow pins each group to exactly one row at any width, phone included. ========================================================================== */ .linkgrid--compact { padding-block: clamp(2rem, 4.5vh, 3rem); } .linkgrid--compact .band__head { gap: 0.35rem; } .linkgrid--compact .band__title { font-size: clamp(1.25rem, 2.8vw, 1.7rem); } .linkgrid--compact .links__group + .links__group { margin-block-start: 1rem; } .links__set--row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-block-end: 0.5rem; scrollbar-width: thin; scrollbar-color: var(--s-brand) transparent; } .links__set--row::-webkit-scrollbar { block-size: 5px; } .links__set--row::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.06); border-radius: 3px; } .links__set--row::-webkit-scrollbar-thumb { background: var(--s-brand); border-radius: 3px; } .links__set--row > li { flex: 0 0 auto; scroll-snap-align: start; } .links__set--row a { white-space: nowrap; } /* Footer channel list — the Google profile, Instagram, WhatsApp and email were present in JSON-LD and on the area pages but nowhere clickable on the home page, so a visitor could not check the reviews the page cites. */ .sitefoot__social a { display: inline-flex; align-items: center; gap: 0.5rem; } .sitefoot__social svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--s-brand); flex-shrink: 0; } /* ========================================================================== Booking band — the ask, directly under the price ========================================================================== Placed where the decision is actually made: the visitor has just compared two numbers, and that is the moment to hand them a button rather than make them scroll to the foot of the page for one. Laid out horizontally — copy on one side, buttons on the other — so it does not read as the same block as the centred closing CTA further down. Two asks, not one ask twice. ========================================================================== */ .bookbar { --s-ground: #0b1512; --s-ground-2: #101f1b; --s-brand: #00c0a9; --s-brand-dim: #00a693; --s-action: #f5a30b; --s-action-hi: #ffb92e; --s-text: #f2f7f5; --s-muted: #93a8a2; --s-hairline: rgba(0, 192, 169, 0.22); position: relative; color: var(--s-text); background: radial-gradient(75% 140% at 80% 0%, rgba(0, 166, 147, 0.28), transparent 62%), var(--s-ground-2); padding-block: clamp(2.25rem, 5vh, 3.5rem); border-block: 1px solid var(--s-hairline); } .bookbar__inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; } @media (min-width: 880px) { .bookbar__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; text-align: start; } } .bookbar__copy { display: flex; flex-direction: column; gap: 0.55rem; align-items: center; } @media (min-width: 880px) { .bookbar__copy { align-items: flex-start; } } .bookbar__title { margin: 0; font-size: clamp(1.35rem, 3.2vw, 2rem); font-weight: 800; line-height: 1.3; text-wrap: balance; } .bookbar__sub { margin: 0; max-inline-size: 34rem; font-size: clamp(0.9rem, 1.15vw, 1rem); line-height: 1.7; color: rgba(242, 247, 245, 0.8); text-wrap: pretty; } .bookbar__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; margin: 0.25rem 0 0; padding: 0; list-style: none; } @media (min-width: 880px) { .bookbar__facts { justify-content: flex-start; } } .bookbar__facts li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.84rem; font-weight: 600; color: var(--s-muted); } .bookbar__facts svg { inline-size: 1rem; block-size: 1rem; color: var(--s-brand); flex-shrink: 0; } .bookbar__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; flex-shrink: 0; } .bookbar__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.95rem 1.7rem; border-radius: 999px; font-size: 1rem; font-weight: 800; text-decoration: none; white-space: nowrap; border: 2px solid transparent; transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .bookbar__cta svg { inline-size: 1.2em; block-size: 1.2em; flex-shrink: 0; } /* Amber leads here, because this band is the ask. Inside the pricing cards above, both buttons are the same teal — a cheaper package should not look like a lesser action. */ .bookbar__cta--primary { background: var(--s-action); color: #1b1200; box-shadow: 0 12px 30px -12px rgba(245, 163, 11, 0.6); } .bookbar__cta--primary:hover { background: var(--s-action-hi); transform: translateY(-2px); } .bookbar__cta--ghost { background: rgba(0, 192, 169, 0.1); border-color: rgba(0, 192, 169, 0.55); color: #4fe3cd; } .bookbar__cta--ghost:hover { background: rgba(0, 192, 169, 0.18); border-color: #4fe3cd; color: #ffffff; transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .bookbar__cta { transition: none; } } /* Both pricing buttons are now identical: same teal fill, same word, same destination. The card already says which tier is recommended through its badge and border, so the button does not need to say it again. */ .pricing-card__cta { background: var(--s-brand); border-color: var(--s-brand); color: #ffffff; } .pricing-card__cta:hover { background: var(--s-brand-dim); border-color: var(--s-brand-dim); color: #ffffff; } /* ========================================================================== Phone: full screen, every control on the picture ========================================================================== The film fills the viewport and the tag, title, note and rail all sit ON it, the way a piece of advertising is laid out — not stacked underneath it. The cost is known and accepted: a 16:9 master inside a viewport of roughly 0.46 wide-to-tall can only ever show about a quarter of its width once cover has done its work. That is geometry, not encoding — no re-crop of the file changes it, which is why each beat carries its own data-focus to at least aim the quarter at the right part of the frame. The real fix is a 9:16 master. The film was prompted for vertical framing and came back 16:9; regenerating it that way would make the phone view show the whole picture at full bleed with no trade at all. ========================================================================== */ @media (max-width: 720px) { /* Bigger and set on the picture, so the type carries the section rather than captioning it. */ .reel__label { font-size: clamp(2rem, 9.5vw, 2.9rem); line-height: 1.1; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.75); } .reel__caption { inset-block-end: calc(var(--reel-pad) + 2.1rem); inset-inline-start: calc(var(--reel-pad) + 0.6rem); inset-inline-end: calc(var(--reel-pad) + 0.6rem); } .reel__note { display: block; margin-block-start: 0.8rem; font-size: 0.92rem; padding: 0.7rem 0.9rem; } /* The scrim has to work harder on a phone: the copy is larger, it sits over more of the frame, and there is no ground beneath it to fall back on. */ html[dir="rtl"] .reel__scrim, html[dir="ltr"] .reel__scrim { background: linear-gradient(to top, rgba(4, 12, 10, 0.85) 0%, rgba(4, 12, 10, 0.66) 14%, rgba(4, 12, 10, 0.28) 28%, rgba(4, 12, 10, 0.06) 38%, transparent 46%), linear-gradient(to bottom, rgba(11, 21, 18, 0.85) 0%, rgba(11, 21, 18, 0.35) 6%, rgba(11, 21, 18, 0.08) 11%, transparent 16%); } .reel__tag { font-size: 0.95rem; } } /* ========================================================================== Section reveals ========================================================================== Everything below the hero rises in as it comes into view. Cost control, in order of what actually matters: 1. No scroll listener. IntersectionObserver hands the work to the browser, which does it off the main thread — a scroll handler firing on every frame down a page this tall is exactly what this avoids. 2. Only opacity and transform are animated. Both are compositor properties, so nothing here triggers layout or paint. 3. Each element is unobserved the moment it has played, so the observer empties itself as the visitor descends. 4. No library and no extra request: the setup lives in the inline script that already runs in for the order parameter. Nothing is hidden unless JavaScript has already proved it can run — the `reveal-on` class is added by that inline script, so with JS off or broken the markup renders exactly as it always did, fully visible and fully indexable. That is also why the rule is written as html.reveal-on rather than on the elements themselves. ========================================================================== */ html.reveal-on [data-rv] { opacity: 0; transform: translateY(22px); will-change: opacity, transform; } html.reveal-on [data-rv].is-in { opacity: 1; transform: none; transition: opacity 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d, 0s), transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d, 0s); will-change: auto; } /* Section headings lead their own band by a hair, so the heading is read before the cards under it arrive. */ html.reveal-on [data-rv].band__head, html.reveal-on [data-rv].packages__head { transform: translateY(16px); } @media (prefers-reduced-motion: reduce) { html.reveal-on [data-rv] { opacity: 1; transform: none; transition: none; } } /* Agency credit. Held back from the copyright line so it reads as a signature rather than as a second claim of ownership. */ /* With the domain gone the bottom row holds two things, so the credit takes a full basis and drops onto a centred line of its own beneath the copyright, clear of the space-between that governs the row above it. */ .sitefoot__credit { flex-basis: 100%; text-align: center; margin-block-start: 0.35rem; color: var(--s-faint); } .sitefoot__credit bdi { /* A Latin run inside an RTL paragraph: without isolation the bidi algorithm reorders it around the ampersand. */ direction: ltr; unicode-bidi: isolate; } /* The agency name is the only link in the footer that carries brand colour by default — everything else there inherits and only turns teal on hover. It is a signature, so it is allowed to be found without hunting for it. */ .sitefoot__credit a { color: var(--s-brand); font-weight: 700; } .sitefoot__credit a:hover { color: var(--s-text); text-decoration: underline; text-underline-offset: 3px; }