/* ========================================================================== Service details page - resources/views/website/services/details.blade.php (hero) - resources/views/website/newdetails/newdetails.blade.php (body) Every class is prefixed with "sd-" so nothing leaks into other pages. Logical properties (inline-start/end) keep Arabic (RTL) and English (LTR) mirrored. ========================================================================== */ :root { --sd-primary: #421f61; --sd-deep: #381a52; --sd-deeper: #24103a; --sd-violet: #6b3a93; --sd-accent: #dea8e4; --sd-soft: #f7f2fa; --sd-line: rgba(66, 31, 97, 0.1); --sd-muted: rgba(66, 31, 97, 0.75); --sd-radius: 20px; --sd-shadow: 0 10px 30px rgba(66, 31, 97, 0.08); --sd-shadow-hover: 0 20px 44px rgba(66, 31, 97, 0.16); --sd-nav-h: 80px; /* height of the site's fixed navbar */ } html { scroll-padding-top: calc(var(--sd-nav-h) + 64px); } /* The site sets body { overflow-x: hidden }, which turns into a scroll container and stops position: sticky from working. "clip" hides sideways overflow the same way without that side effect. Scoped to pages that have the in-page menu. */ body:has(.sd-subnav) { overflow-x: clip !important; overflow-y: visible !important; } /* ---------- shared building blocks ---------- */ .sd-section { padding-block: clamp(64px, 8vw, 112px); position: relative; } .sd-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(32px, 4vw, 52px); } .sd-head--center { align-items: center; text-align: center; } .sd-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: var(--sd-soft); color: var(--sd-violet); font-size: 13px; font-weight: 700; letter-spacing: 0.3px; } .sd-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .sd-head--center .sd-eyebrow { align-self: center; } .sd-eyebrow--light { background: rgba(255, 255, 255, 0.12); color: var(--sd-accent); } .sd-title { color: var(--sd-primary); font-weight: 800; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.35; margin: 0; max-width: 860px; } .sd-title--light { color: #fff; } .sd-lead { color: var(--sd-muted); font-size: clamp(15px, 1.3vw, 17px); line-height: 1.9; max-width: 820px; margin: 0; } .sd-lead--light { color: rgba(255, 255, 255, 0.82); } .sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 200px; padding: 15px 26px; border-radius: 14px; border: 2px solid transparent; font-weight: 700; font-size: 16px; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .sd-btn i { font-size: 20px; } .sd-btn:hover { transform: translateY(-2px); } .sd-btn:focus-visible, .sd-subnav__link:focus-visible, .sd-more__card:focus-visible, .sd-faq__item summary:focus-visible { outline: 3px solid var(--sd-accent); outline-offset: 3px; } .sd-btn--light { background: #fff; color: var(--sd-primary) !important; border-color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); } .sd-btn--light:hover { background: var(--sd-accent); border-color: var(--sd-accent); } .sd-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, 0.45); } .sd-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; } .sd-btn--outline { background: transparent; color: var(--sd-primary) !important; border-color: var(--sd-primary); } .sd-btn--outline:hover { background: var(--sd-primary); color: #fff !important; } .sd-card { background: #fff; border: 1px solid var(--sd-line); border-radius: var(--sd-radius); box-shadow: var(--sd-shadow); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .sd-card:hover { transform: translateY(-4px); box-shadow: var(--sd-shadow-hover); border-color: rgba(107, 58, 147, 0.25); } /* ---------- hero (inside the purple page header) ---------- */ .sd-hero { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(48px, 6vw, 80px); } .sd-hero__text { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .sd-crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.65); } .sd-crumbs a { color: rgba(255, 255, 255, 0.8) !important; text-decoration: none; } .sd-crumbs a:hover { color: #fff !important; } .sd-crumbs [aria-current] { color: var(--sd-accent); font-weight: 700; } .sd-hero__title { color: #fff; font-weight: 800; font-size: clamp(28px, 4vw, 48px); line-height: 1.35; margin: 0; } .sd-hero__desc { color: rgba(255, 255, 255, 0.85); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.9; max-width: 640px; } /* the description comes from the rich-text editor with inline styles; normalise them */ .sd-hero__desc *, .sd-hero__desc div[style], .sd-hero__desc p[style], .sd-hero__desc span[style] { margin: 0 !important; text-align: inherit !important; background: none !important; color: inherit !important; font-size: inherit !important; line-height: inherit !important; } .sd-hero__desc p + p { margin-top: 10px !important; } .sd-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; } .sd-hero__trust { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; padding: 10px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; font-size: 14px; } .sd-hero__stars { color: #ffc94d; letter-spacing: 2px; } .sd-hero__trust-text { color: rgba(255, 255, 255, 0.8); } .sd-hero__media { position: relative; max-width: 520px; width: 100%; margin-inline: auto; } .sd-hero__frame { position: relative; z-index: 1; border-radius: 28px; padding: 10px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 30px 60px rgba(10, 3, 20, 0.45); transform: rotate(-2deg); transition: transform 0.5s ease; } html[dir="ltr"] .sd-hero__frame { transform: rotate(2deg); } .sd-hero__frame:hover { transform: rotate(0); } .sd-hero__frame img { display: block; width: 100%; aspect-ratio: 6 / 5; object-fit: cover; border-radius: 20px; background: rgba(255, 255, 255, 0.06); } .sd-hero__glow { position: absolute; inset: 10% 5%; background: radial-gradient(circle, rgba(222, 168, 228, 0.55), transparent 65%); filter: blur(40px); z-index: 0; } @media (min-width: 1024px) { .sd-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 56px; } .sd-hero__text { align-items: flex-start; text-align: start; } .sd-crumbs, .sd-hero__actions { justify-content: flex-start; } } /* ---------- in-page menu ---------- */ .sd-subnav { position: sticky; top: var(--sd-nav-h); z-index: 30; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sd-line); } .sd-subnav__track { display: flex; gap: 8px; padding-block: 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .sd-subnav__track::-webkit-scrollbar { display: none; } .sd-subnav__link { flex-shrink: 0; padding: 9px 16px; border-radius: 999px; color: var(--sd-primary) !important; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color 0.25s ease, color 0.25s ease; } .sd-subnav__link:hover { background: var(--sd-soft); } .sd-subnav__link.is-active { background: var(--sd-primary); color: #fff !important; } @media (min-width: 1024px) { .sd-subnav__track { justify-content: center; } } /* ---------- 1. what is the service ---------- */ .sd-what { background: #fff; } .sd-what__cards { display: grid; grid-template-columns: 1fr; gap: 20px; } .sd-what__card { padding: 30px 28px; display: flex; flex-direction: column; gap: 14px; text-align: start; position: relative; overflow: hidden; } .sd-what__card::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--sd-primary), var(--sd-accent)); opacity: 0; transition: opacity 0.3s ease; } .sd-what__card:hover::before { opacity: 1; } .sd-what__card-top { display: flex; align-items: center; justify-content: space-between; } .sd-what__index { font-size: 40px; font-weight: 800; line-height: 1; color: var(--sd-soft); -webkit-text-stroke: 1px rgba(66, 31, 97, 0.18); } .sd-icon-badge { width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(135deg, var(--sd-primary), var(--sd-violet)); display: grid; place-items: center; box-shadow: 0 10px 20px rgba(66, 31, 97, 0.28); flex-shrink: 0; } .sd-icon-badge img { width: 32px; height: 32px; object-fit: contain; } .sd-card__title { color: var(--sd-primary); font-weight: 800; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.5; margin: 0; } .sd-card__text { color: var(--sd-muted); font-size: 15.5px; line-height: 1.95; margin: 0; } @media (min-width: 768px) { .sd-what__cards--2, .sd-what__cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .sd-what__cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sd-what__card { padding: 36px 34px; } } /* ---------- 2. what we offer you (approved design — keep) ---------- */ .sd-offers { background: radial-gradient(circle at 12% 0%, rgba(222, 168, 228, 0.18), transparent 45%), radial-gradient(circle at 90% 100%, rgba(222, 168, 228, 0.12), transparent 45%), var(--sd-deep); overflow: hidden; } /* Cards keep the original look (white card, huge gradient number cut by the top edge, flips to purple on hover) inside a centred, equal-height grid. */ .sd-offers__grid { --sd-offer-gap: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sd-offer-gap); } .sd-offer { position: relative; flex: 0 0 100%; padding: 0 24px 28px; border-radius: 18px; background: #fff; color: var(--sd-primary); display: flex; flex-direction: column; gap: 10px; text-align: start; overflow: hidden; cursor: default; box-shadow: 0 14px 34px rgba(12, 4, 20, 0.28); transition: transform 0.35s ease, background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease; } /* thin accent line along the bottom that grows on hover */ .sd-offer::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--sd-accent), #8c4fb5); transform: scaleX(0.25); transform-origin: var(--sd-origin, right); transition: transform 0.4s ease; } html[dir="ltr"] .sd-offer::after { --sd-origin: left; } .sd-offer__number { display: block; font-size: clamp(84px, 8vw, 124px); font-weight: 800; line-height: 1; margin-top: -0.4em; margin-bottom: 6px; background: linear-gradient(to bottom, #fff 30%, var(--sd-primary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; letter-spacing: -2px; } .sd-offer__title { color: inherit; font-weight: 800; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; margin: 0; } .sd-offer__text { color: var(--sd-muted); font-size: 15px; line-height: 1.9; margin: 0; transition: color 0.35s ease; } .sd-offer:hover { transform: translateY(-6px); background: var(--sd-primary); color: #fff; box-shadow: 0 22px 44px rgba(12, 4, 20, 0.4); } .sd-offer:hover::after { transform: scaleX(1); } .sd-offer:hover .sd-offer__number { background: linear-gradient(to bottom, var(--sd-primary) 30%, #fff 100%); -webkit-background-clip: text; background-clip: text; } .sd-offer:hover .sd-offer__text { color: rgba(255, 255, 255, 0.85); } .sd-offers__cta { margin-top: clamp(36px, 5vw, 60px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 32px; } .sd-offers__divider { width: 1px; height: 52px; background: rgba(255, 255, 255, 0.25); } .sd-rating { display: flex; flex-direction: column; gap: 4px; color: #fff; } .sd-rating__score { display: flex; align-items: center; gap: 8px; font-size: 24px; font-weight: 800; } .sd-rating__text { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.78); } @media (min-width: 640px) { .sd-offer { flex-basis: calc((100% - var(--sd-offer-gap)) / 2); } } @media (min-width: 1024px) { .sd-offers__grid { --sd-offer-gap: 28px; } .sd-offer { flex-basis: calc((100% - 2 * var(--sd-offer-gap)) / 3); padding: 0 28px 34px; } } @media (max-width: 639px) { .sd-offers__grid { --sd-offer-gap: 16px; } .sd-offer { padding: 0 20px 24px; } } @media (max-width: 480px) { .sd-offers__divider { display: none; } .sd-offers__cta { flex-direction: column; } .sd-rating { align-items: center; text-align: center; } } /* ---------- 3. why choose Quarizm ---------- */ .sd-why { background: linear-gradient(180deg, var(--sd-soft) 0%, #fff 100%); } .sd-why__layout { display: grid; grid-template-columns: 1fr; gap: 40px; } .sd-why__intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .sd-why__intro .sd-eyebrow { align-self: center; } .sd-why__mascot { display: none; } .sd-why__grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .sd-feature { display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: #fff; border: 1px solid var(--sd-line); border-radius: 18px; box-shadow: var(--sd-shadow); text-align: start; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .sd-feature:hover { transform: translateY(-3px); box-shadow: var(--sd-shadow-hover); border-color: rgba(107, 58, 147, 0.25); } .sd-feature__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--sd-soft); display: grid; place-items: center; flex-shrink: 0; } .sd-feature__icon img { width: 30px; height: 30px; object-fit: contain; } .sd-feature__title { color: var(--sd-primary); font-weight: 800; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; margin: 0 0 6px; } .sd-feature__text { color: var(--sd-muted); font-size: 15px; line-height: 1.85; margin: 0; } @media (min-width: 768px) { .sd-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { .sd-why__layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 56px; align-items: start; } .sd-why__intro { position: sticky; top: calc(var(--sd-nav-h) + 90px); align-items: flex-start; text-align: start; } .sd-why__intro .sd-eyebrow { align-self: flex-start; } .sd-why__mascot { display: block; width: 200px; height: auto; margin-top: 12px; } } /* ---------- 4. previous works: see works-showcase.css ---------- */ /* ---------- 5. reviews (shared partial), only on this page ---------- */ .sd-anchor { scroll-margin-top: calc(var(--sd-nav-h) + 64px); } /* ---------- 6. technologies band ---------- */ .sd-tech { background: #fff; padding-bottom: 0; } .sd-tech__band { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 32px; background: radial-gradient(circle at 100% 0%, rgba(222, 168, 228, 0.25), transparent 50%), linear-gradient(135deg, var(--sd-primary) 0%, var(--sd-deeper) 100%); box-shadow: 0 30px 60px rgba(36, 16, 58, 0.3); overflow: hidden; } .sd-tech__content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } .sd-tech__content .sd-eyebrow { align-self: center; } .sd-tech__logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .sd-tech__logo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.8); font-size: 12px; font-weight: 600; transition: transform 0.3s ease, background-color 0.3s ease; } .sd-tech__logo:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.14); } .sd-tech__logo img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 12px; padding: 6px; } @media (min-width: 1024px) { .sd-tech__band { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; } .sd-tech__content { align-items: flex-start; text-align: start; } .sd-tech__content .sd-eyebrow { align-self: flex-start; } .sd-tech__logo img { width: 60px; height: 60px; } } /* ---------- 7. other services ---------- */ .sd-more { background: #fff; } .sd-more__grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .sd-more__card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--sd-line); box-shadow: var(--sd-shadow); text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background-color 0.3s ease; } .sd-more__card:hover { transform: translateY(-3px); border-color: var(--sd-primary); box-shadow: var(--sd-shadow-hover); } .sd-more__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--sd-soft); display: grid; place-items: center; flex-shrink: 0; color: var(--sd-violet); font-size: 18px; } .sd-more__icon img { width: 28px; height: 28px; object-fit: contain; } .sd-more__title { flex: 1; color: var(--sd-primary); font-weight: 700; font-size: 16px; line-height: 1.5; } .sd-more__arrow { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--sd-soft); color: var(--sd-primary); font-size: 14px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } html[dir="ltr"] .sd-more__arrow i { transform: scaleX(-1); } .sd-more__card:hover .sd-more__arrow { background: var(--sd-primary); color: #fff; } @media (min-width: 640px) { .sd-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .sd-more__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- 8. FAQ ---------- */ .sd-faq { background: var(--sd-soft); } .sd-faq__layout { display: grid; grid-template-columns: 1fr; gap: 32px; } .sd-faq__intro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } .sd-faq__intro .sd-eyebrow { align-self: center; background: #fff; } .sd-faq__list { display: flex; flex-direction: column; gap: 12px; } .sd-faq__item { background: #fff; border: 1px solid var(--sd-line); border-radius: 18px; box-shadow: var(--sd-shadow); overflow: hidden; transition: border-color 0.3s ease; } .sd-faq__item[open] { border-color: rgba(107, 58, 147, 0.35); } .sd-faq__item summary { display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; list-style: none; } .sd-faq__item summary::-webkit-details-marker { display: none; } .sd-faq__num { font-size: 14px; font-weight: 800; color: var(--sd-violet); background: var(--sd-soft); border-radius: 10px; padding: 6px 9px; flex-shrink: 0; } .sd-faq__q { flex: 1; color: var(--sd-primary); font-weight: 700; font-size: clamp(15px, 1.3vw, 17px); line-height: 1.6; } .sd-faq__toggle { position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--sd-soft); flex-shrink: 0; transition: background-color 0.3s ease, transform 0.3s ease; } .sd-faq__toggle::before, .sd-faq__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background: var(--sd-primary); border-radius: 2px; transform: translate(-50%, -50%); transition: transform 0.3s ease, background-color 0.3s ease; } .sd-faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .sd-faq__item[open] .sd-faq__toggle { background: var(--sd-primary); } .sd-faq__item[open] .sd-faq__toggle::before, .sd-faq__item[open] .sd-faq__toggle::after { background: #fff; } .sd-faq__item[open] .sd-faq__toggle::after { transform: translate(-50%, -50%) rotate(0); } .sd-faq__a { padding: 0 20px 20px; padding-inline-start: 66px; color: var(--sd-muted); font-size: 15px; line-height: 1.9; } @media (max-width: 480px) { .sd-faq__a { padding-inline-start: 20px; } } @media (min-width: 1024px) { .sd-faq__layout { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 56px; align-items: start; } .sd-faq__intro { position: sticky; top: calc(var(--sd-nav-h) + 90px); align-items: flex-start; text-align: start; } .sd-faq__intro .sd-eyebrow { align-self: flex-start; } } /* ---------- 9. final call to action ---------- */ .sd-future { background: var(--sd-soft); padding-top: 0; } .sd-future__card { display: grid; grid-template-columns: 1fr; align-items: center; gap: 24px; padding: clamp(28px, 5vw, 56px); border-radius: 32px; background: radial-gradient(circle at 0% 100%, rgba(222, 168, 228, 0.3), transparent 50%), linear-gradient(135deg, var(--sd-violet) 0%, var(--sd-primary) 55%, var(--sd-deeper) 100%); box-shadow: 0 30px 60px rgba(36, 16, 58, 0.3); overflow: hidden; } .sd-future__content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; } .sd-future__image img { width: 100%; max-width: 360px; height: auto; margin-inline: auto; display: block; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3)); } @media (min-width: 768px) { .sd-future__card { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); } .sd-future__content { align-items: flex-start; text-align: start; } } /* ---------- small screens & motion ---------- */ @media (max-width: 480px) { .sd-btn { width: 100%; min-width: 0; } .sd-hero__actions { width: 100%; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .sd-card, .sd-offer, .sd-feature, .sd-btn, .sd-more__card, .sd-tech__logo, .sd-hero__frame { transition: none !important; } }