/* BUILD 1.0.30 (WP) — 2026-10-04 · from d180-build v8.10.1 · 180D Studio + Quotation Experience v7 — the real thing: the 180° logo everywhere, five real client stories on a paper gallery, a yellow marketing marquee as the hero floor, right-start reel, breathing footer, no yellow square dots. */ /* ===================================================================== 180D — widgets.css Static HTML/CSS/JS master prototype, authored for 1:1 Elementor conversion (ayman-ds → lovable-to-elementor-v8). STRUCTURE OF THIS FILE §0 Tokens (one continuous canvas) + the architectural background §1 Horizontal-scroll defense (nine layers — do not trim) §2 Typography baseline (Arabic 1.9 / Latin 1.75) §3 Layout primitives (container, section, grid) §4 Section-head rhythm (single-sourced) §5 Icon containers (size only — colour per component) §6 Button system (three-layer defense) §7 Card §8 Form §9 Motion (standard set + reveal + overrides) §10 Mobile performance budget §11 WordPress/Elementor neutralisation §12 Media & placeholders §13 SIGNATURE LAYER — الخيط الأحمر (red thread) + grain + wash ------------------------------------------------------------------- §H1..H6 Homepage widgets: header, hero, showcase, cta, faq, footer §A0..A9 Quotation app: shell, meter, screens, options, summary, payment, success, booking ===================================================================== */ /* --------------------------------------------------------------------- §0 TOKENS — v8.4 STYLE EXPERIMENT: the 180dagency.com wardrobe. Warm ivory canvas · ink masses · the agency burgundy #A0201E as the ONE brand voice (red acts, red winks — yellow retired for this trial). --------------------------------------------------------------------- */ :root { /* surfaces — warm ivory breathing into soft greige */ --d180-bg: #FCFBF8; /* near-white warm canvas (v8.8.5: افتح كتير بطلب عبدالرحمن) */ --d180-bg-deep: #F5F2EB; /* tonal fields */ --d180-fg: #1C1613; /* warm ink (type) */ --d180-card: #FFFFFF; /* raised light surface */ --d180-card-fg: #1C1613; --d180-muted: #F0EBE1; --d180-muted-fg: #6E6558; /* ≥5:1 on the canvas */ --d180-border: rgba(28, 22, 19, .15); /* ink — the DEEPEST black masses (strips, total, footer) — kept dark */ --d180-ink: #0D0C0B; --d180-ink-deep: #080807; --d180-ink-fg: #EDEAE0; --d180-ink-muted: #A29B8B; --d180-ink-border: rgba(237, 234, 224, .14); /* paper — on the light canvas, paper = clean white blocks */ --d180-paper: #FFFFFF; --d180-paper-fg: #1C1613; --d180-paper-muted: #6E6558; /* brand — the 180dagency burgundy, one voice everywhere */ --d180-primary: #A0201E; /* surfaces, lines, big type */ --d180-red-bright: #A0201E; /* small red TEXT on light (7.5:1) */ --d180-red-fill: #A0201E; /* red surfaces w/ white label */ --d180-primary-fg: #FFFFFF; --d180-primary-glow:#7E1614; /* pressed */ --d180-accent: #A0201E; --d180-accent-fg: #FFFFFF; --d180-accent2: #A0201E; /* micro-details + money — burgundy now */ --d180-accent2-soft:rgba(160, 32, 30, .08); /* tinted fields */ /* on-dark accents — burgundy is too deep on ink; these lift it */ --d180-ondark-red: #E2938F; /* type — Amiri restored as the display voice, Cairo carries the body */ --d180-font: "Cairo", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; --d180-font-display: "Amiri", "Cairo", Georgia, serif; /* geometry — editorial rectangles; the app speaks in soft cards */ --d180-radius: 2px; --d180-radius-lg: 2px; --d180-radius-soft: 16px; /* the quotation app + flow cards */ --d180-radius-btn: 2px; /* v8.5 client call: رجعت الحواف الحادة (البيل اترفض) */ --d180-max: 88rem; /* the site breathes wall-to-wall */ --d180-max-narrow: 64rem; --d180-pad: 1.25rem; --d180-pad-lg: 3rem; /* elevation — light theme: soft warm shadows, crisp hairlines */ --d180-shadow-sm: 0 1px 2px rgba(28,22,19,.08); --d180-shadow-md: 0 10px 28px -12px rgba(28,22,19,.16); --d180-shadow-card: 0 24px 60px -32px rgba(28,22,19,.25), inset 0 1px 0 rgba(255,255,255,.8); --d180-shadow-glow: 0 24px 60px -32px rgba(28,22,19,.25); /* gradients — token contract only; surfaces stay flat */ --d180-gradient-primary: linear-gradient(135deg, #B23431, #7E1614); --d180-gradient-accent: linear-gradient(135deg, #A0201E, #7E1614); --d180-transition: all .3s cubic-bezier(.4, 0, .2, 1); /* signature */ --d180-thread: #A0201E; --d180-thread-w: 2px; --d180-money: #A0201E; /* money speaks burgundy */ --d180-ease-enter: cubic-bezier(.2, .8, .2, 1); /* the canvas — clean warm ivory, wall to wall. A burgundy breath at the top, then the designed details riding the viewport edges: a burgundy bar on the end edge, an ink bar answering on the start. Shared by html/body and the menu overlay. */ /* v8.7.3: the edge bars retired (they kept landing over content on mobile and inside the menu) — the canvas is the soft crown only */ --d180-canvas-img: radial-gradient(64rem 36rem at 50% -8rem, rgba(160,32,30,.06), transparent 70%); --d180-canvas-pos: 50% 0; --d180-canvas-size: 100% 44rem; } /* the canvas itself — one surface under everything (SANA precedent: html/body backgrounds survive the Elementor conversion) */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body { margin: 0; background-color: var(--d180-bg) !important; background-image: var(--d180-canvas-img) !important; background-position: var(--d180-canvas-pos) !important; background-size: var(--d180-canvas-size) !important; background-repeat: no-repeat !important; background-attachment: fixed !important; color: var(--d180-fg); } @media (max-width: 767px) { html, body { background-attachment: scroll !important; } } /* global film grain — under the content, over the canvas */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* --------------------------------------------------------------------- §1 HORIZONTAL-SCROLL DEFENSE — mandatory, nine layers. --------------------------------------------------------------------- */ [class^="d180-"], [class*=" d180-"], [class^="d180-"] *, [class*=" d180-"] *, [class^="d180-"] *::before, [class*=" d180-"] *::before, [class^="d180-"] *::after, [class*=" d180-"] *::after { box-sizing: border-box; } /* 1b — section-level clip. Every top-level wrapper class. */ .d180-section, .d180-hero, .d180-header, .d180-footer, .d180-cta, .d180-showcase, .d180-faq-section, .d180-app, .d180-screen { max-width: 100%; overflow-x: hidden; overflow-x: clip; } /* 1c — grid/flex children must be allowed to shrink */ [class^="d180-"][class*="-grid"] > *, [class^="d180-"][class*="-row"] > *, .d180-form-row > *, .d180-form-field { min-width: 0; max-width: 100%; } /* 1d — media */ [class^="d180-"] img, [class*=" d180-"] img, [class^="d180-"] svg, [class*=" d180-"] svg, [class^="d180-"] video, [class*=" d180-"] video, [class^="d180-"] iframe, [class*=" d180-"] iframe { max-width: 100%; } [class^="d180-"] img, [class^="d180-"] iframe { height: auto; } /* 1e — form controls */ [class^="d180-"] input, [class^="d180-"] textarea, [class^="d180-"] select, [class^="d180-"] button { max-width: 100%; } [class^="d180-"] input[type="text"], [class^="d180-"] input[type="email"], [class^="d180-"] input[type="tel"], [class^="d180-"] input[type="url"], [class^="d180-"] input[type="number"], [class^="d180-"] textarea, [class^="d180-"] select { width: 100%; } /* 1f — long unbroken strings */ [class^="d180-"] p, [class^="d180-"] a, [class^="d180-"] span, [class^="d180-"] li, [class^="d180-"] dd { overflow-wrap: anywhere; word-break: break-word; } /* 1g — honeypot */ .d180-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* --------------------------------------------------------------------- §2 TYPOGRAPHY BASELINE — Arabic 1.9, Latin 1.75. Not the same number. --------------------------------------------------------------------- */ [class^="d180-"], [class*=" d180-"] { font-family: var(--d180-font); } [class^="d180-"] h1, [class^="d180-"] h2, [class^="d180-"] h3, [class^="d180-"] h4, [class^="d180-"][class*="-title"], [class^="d180-"][class*="-headline"] { font-family: var(--d180-font-display); font-weight: 700; /* Amiri bold — classic confidence */ line-height: 1.4; /* Naskh needs air for its ascenders */ margin: 0; } [class^="d180-"] p, [class^="d180-"] li, [class^="d180-"][class*="-desc"] { line-height: 1.75; } body.rtl [class^="d180-"] p, body.rtl [class^="d180-"] li, html[lang^="ar"] [class^="d180-"] p, html[lang^="ar"] [class^="d180-"] li, body.rtl [class^="d180-"][class*="-desc"], html[lang^="ar"] [class^="d180-"][class*="-desc"] { line-height: 1.9; } /* Latin runs inside RTL — prices, digits, URLs, the wordmark */ .d180-ltr, [dir="ltr"] { direction: ltr; unicode-bidi: embed; } /* RTL is scoped to named top-level wrappers only, never body */ .d180-section, .d180-header, .d180-footer, .d180-hero, .d180-cta, .d180-showcase, .d180-faq-section, .d180-app { direction: rtl; text-align: right; } /* --------------------------------------------------------------------- §3 LAYOUT PRIMITIVES --------------------------------------------------------------------- */ .d180-container { width: 100%; max-width: var(--d180-max); margin-inline: auto; padding-inline: var(--d180-pad); } .d180-container-narrow { max-width: var(--d180-max-narrow); } @media (min-width: 768px) { .d180-container { padding-inline: var(--d180-pad-lg); } } /* sections are TRANSPARENT — the html/body canvas runs beneath them uninterrupted; separation comes from hairlines and air, not colour */ .d180-section { position: relative; padding-block: 5rem; background: transparent; } @media (min-width: 768px) { .d180-section { padding-block: 7rem; } } /* ✅ v8.8.3: قصص النجاح خرجت من نظام الفواصل — تتداخل مع الهيرو على كانفس واحدة متصلة بلا أي خط */ .d180-cta, .d180-faq-section, .d180-footer { border-top: 1px solid var(--d180-border); } /* colored ticks riding the section dividers — yellow, red, yellow */ .d180-cta::after, .d180-faq-section::after { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 4rem; height: 2px; background: var(--d180-accent2); } .d180-cta::after { background: var(--d180-primary); width: 2.5rem; } .d180-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .d180-cols-2, .d180-cols-3, .d180-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .d180-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .d180-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --------------------------------------------------------------------- §4 SECTION-HEAD RHYTHM — single-sourced, doubled class beats Elementor's h1..h6 reset. Never set head spacing per component. The head-rule IS the red thread here (draws on reveal, §13). --------------------------------------------------------------------- */ .d180-section-head.d180-section-head { margin-bottom: 3rem; } .d180-section-head.d180-section-head .d180-eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; font-size: .8125rem; font-weight: 700; color: var(--d180-accent2); /* yellow editorial label */ } .d180-section-head.d180-section-head .d180-eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: var(--d180-fg); flex-shrink: 0; } .d180-section-head.d180-section-head .d180-section-title { margin: 0 0 1rem; font-size: 2.25rem; font-weight: 800; line-height: 1.25; } @media (min-width: 768px) { .d180-section-head.d180-section-head .d180-section-title { font-size: 3.6rem; } } .d180-section-head.d180-section-head .d180-section-desc { margin: 0; max-width: 38rem; color: var(--d180-muted-fg); font-size: 1.0625rem; } .d180-align-center { text-align: center; } .d180-align-center h1, .d180-align-center h2, .d180-align-center h3, .d180-align-center p, .d180-align-center span { text-align: center; } .d180-align-center .d180-eyebrow { justify-content: center; } .d180-align-center .d180-section-desc { margin-inline: auto; } /* Editorial head — title inline-start, description inline-end */ .d180-head-editorial { display: grid; gap: 1rem; align-items: end; } @media (min-width: 900px) { .d180-head-editorial { grid-template-columns: 1.2fr .8fr; gap: 3rem; } .d180-head-editorial .d180-section-desc { margin-bottom: .35rem; } } /* --------------------------------------------------------------------- §5 ICON CONTAINERS — SIZE AND LAYOUT ONLY. Colour per component. --------------------------------------------------------------------- */ [class^="d180-"][class*="-icon"], [class*=" d180-"][class*="-icon"] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } [class^="d180-"][class*="-icon"] svg, [class*=" d180-"][class*="-icon"] svg { width: 1.5rem; height: 1.5rem; display: block; color: inherit; fill: none; stroke: currentColor; } [class^="d180-"][class*="-icon"] i, [class*=" d180-"][class*="-icon"] i { font-size: 1.1rem; color: inherit; line-height: 1; } .d180-icon-chip { width: 3.25rem; height: 3.25rem; border-radius: var(--d180-radius); border: 1px solid var(--d180-border); background: var(--d180-card); color: var(--d180-fg); /* per-component override */ transition: var(--d180-transition); } /* --------------------------------------------------------------------- §6 BUTTON SYSTEM — compact editorial rectangles, four real states. Hover: the fill sweeps from the inline-start edge, the label eases 3px toward the arrow, the arrow travels, and a tiny yellow cell appears in the corner. Pressed sits 1px down. ~320ms throughout. --------------------------------------------------------------------- */ .d180-btn { position: relative; /* v1.0.24 — الزر سياق تراصّ مستقل، وطبقة الهوفر تحته بـz-index سالب: فتظهر فوق خلفية الزر وتحت نصّه دائمًا — حتى لو النص بلا . (كانت z-index:1 فتغطّي النص المكتوب مباشرة داخل الزر عند الوقوف عليه) */ isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; font-family: var(--d180-font); font-weight: 700; font-size: .875rem; line-height: 1.2; padding: .8rem 1.6rem; border-radius: var(--d180-radius-btn); border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color .32s var(--d180-ease-enter), color .32s var(--d180-ease-enter), border-color .32s, padding .32s var(--d180-ease-enter), transform .12s ease; overflow: hidden; } .d180-btn > * { position: relative; z-index: 2; } .d180-btn svg { width: .95rem; height: .95rem; flex-shrink: 0; transition: transform .32s var(--d180-ease-enter); } /* label shift + arrow travel toward the action (inline-start in RTL) */ .d180-btn:hover { padding-inline-start: 1.75rem; padding-inline-end: 1.25rem; } .d180-btn:hover svg { transform: translateX(-4px); } .d180-btn:active { transform: translateY(1px); } /* the sweep scaffold — each variant sets --btn-sweep */ .d180-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-sweep, transparent); transform: scaleX(0); transform-origin: 100% 50%; /* RTL: from the right */ transition: transform .38s var(--d180-ease-enter); } .d180-btn:hover::before { transform: scaleX(1); } /* red — decision moments (start project, pay, confirm) */ a.d180-btn.d180-btn-red, a.d180-btn.d180-btn-red:link, a.d180-btn.d180-btn-red:visited, button.d180-btn.d180-btn-red, .d180-btn.d180-btn-red[class] { background: var(--d180-red-fill) !important; color: #FFFFFF !important; text-decoration: none !important; --btn-sweep: var(--d180-primary-glow); } a.d180-btn.d180-btn-red:hover, button.d180-btn.d180-btn-red:hover, .d180-btn.d180-btn-red[class]:hover { color: #FFFFFF !important; } .d180-btn.d180-btn-red * { color: #FFFFFF !important; } /* paper — the light editorial button; the sweep turns it red */ a.d180-btn.d180-btn-primary, a.d180-btn.d180-btn-primary:link, a.d180-btn.d180-btn-primary:visited, button.d180-btn.d180-btn-primary, .d180-btn.d180-btn-primary[class] { background: var(--d180-paper) !important; color: var(--d180-paper-fg) !important; text-decoration: none !important; --btn-sweep: var(--d180-red-fill); } a.d180-btn.d180-btn-primary:hover, button.d180-btn.d180-btn-primary:hover, .d180-btn.d180-btn-primary[class]:hover { color: #FFFFFF !important; } .d180-btn.d180-btn-primary * { color: inherit !important; } /* outline — paper hairline; the sweep fills it with paper */ a.d180-btn.d180-btn-outline, button.d180-btn.d180-btn-outline, .d180-btn.d180-btn-outline[class] { background: transparent !important; color: var(--d180-fg) !important; border: 1px solid var(--d180-fg) !important; text-decoration: none !important; --btn-sweep: var(--d180-fg); } a.d180-btn.d180-btn-outline:hover, .d180-btn.d180-btn-outline[class]:hover { color: #FFFFFF !important; border-color: var(--d180-fg) !important; } /* ghost — label + travelling arrow-line (the reference's EXPLORE WORK) */ a.d180-btn.d180-btn-ghost, button.d180-btn.d180-btn-ghost, .d180-btn.d180-btn-ghost[class] { background: transparent !important; color: var(--d180-fg) !important; padding: .5rem 0 !important; font-weight: 600; gap: .9rem; overflow: visible; } .d180-btn-ghost::before, .d180-btn-ghost::after { display: none; } .d180-btn-ghost:hover { padding: .5rem 0 !important; } .d180-btn-ghost .d180-arrow-line { position: relative; width: 3rem; height: 1px; background: var(--d180-fg); transition: width .4s var(--d180-ease-enter), background .3s; flex-shrink: 0; } .d180-btn-ghost .d180-arrow-line::after { content: ""; position: absolute; inset-inline-start: 0; top: 50%; width: .5rem; height: .5rem; border-inline-start: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); color: var(--d180-fg); transition: color .3s; } a.d180-btn.d180-btn-ghost:hover, .d180-btn.d180-btn-ghost[class]:hover { color: var(--d180-accent2) !important; } .d180-btn-ghost:hover .d180-arrow-line { width: 4.25rem; background: var(--d180-accent2); } .d180-btn-ghost:hover .d180-arrow-line::after { color: var(--d180-accent2); } .d180-btn-block { width: 100%; } .d180-btn[disabled], .d180-btn.is-disabled { opacity: .45; pointer-events: none; } /* --------------------------------------------------------------------- §7 CARD — hairline gallery frame, lifts softly --------------------------------------------------------------------- */ .d180-card { position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 2rem; border-radius: var(--d180-radius-lg); border: 1px solid var(--d180-border); background: var(--d180-card); color: var(--d180-card-fg); transition: var(--d180-transition); height: 100%; } .d180-card:hover { transform: translateY(-6px); box-shadow: var(--d180-shadow-card); } .d180-card-title { font-size: 1.25rem; margin: 0; } .d180-card-desc { color: var(--d180-muted-fg); margin: 0; } /* --------------------------------------------------------------------- §8 FORM --------------------------------------------------------------------- */ .d180-form-row { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .d180-form-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } } .d180-form-field { margin-bottom: 1.25rem; } .d180-form-field label { display: block; margin-bottom: .6rem; font-size: .8125rem; font-weight: 600; color: var(--d180-muted-fg); } .d180-form-field input, .d180-form-field textarea, .d180-form-field select { width: 100%; max-width: 100%; padding: .9rem 1.1rem; border: 1px solid var(--d180-border); border-radius: var(--d180-radius); background: var(--d180-card); color: var(--d180-card-fg); font: inherit; font-size: 1rem; transition: border-color .3s, box-shadow .3s; } .d180-form-field textarea { min-height: 8rem; resize: vertical; } .d180-form-field :is(input, textarea, select):focus { outline: 0; border-color: var(--d180-fg); box-shadow: inset 0 calc(var(--d180-thread-w) * -1) 0 0 var(--d180-thread); } .d180-form-field select { -webkit-appearance: none; appearance: none; color-scheme: light; background-color: #FFFFFF; } .d180-form-notice { display: none; margin-top: 1rem; padding: .9rem 1.1rem; border-radius: var(--d180-radius); font-size: .9rem; } .d180-form-notice.is-ok { display: block; background: rgba(21,127,61,.08); color: #157F3D; } .d180-form-notice.is-err { display: block; background: rgba(160,32,30,.08); color: #A0201E; } /* form-section containment (v7.1 layer 9) */ .d180-contact, .d180-contact * { min-width: 0; } .d180-contact { overflow-x: clip; } /* --------------------------------------------------------------------- §9 MOTION — standard vocabulary + reveal + mandatory overrides --------------------------------------------------------------------- */ @keyframes d180-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes d180-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes d180-slide-l { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } } @keyframes d180-slide-r { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } } .d180-anim-fade { animation: d180-fade-up .7s var(--d180-ease-enter) both; } .d180-anim-in { animation: d180-fade-in .7s var(--d180-ease-enter) both; } @keyframes d180-tick { to { stroke-dashoffset: 0; } } /* Scroll reveal — content is visible by DEFAULT (no-JS safe). JS adds .is-prep before first paint to arm the animation, then .is-visible on intersection. Never on dynamic content. */ .d180-reveal.is-prep { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s var(--d180-ease-enter); transition-delay: calc(var(--i, 0) * 80ms); } .d180-reveal.is-prep.is-visible { opacity: 1; transform: none; } /* Editor preview + reduced motion — force final state */ .elementor-editor-active [class*="d180-anim-"], .elementor-editor-active .d180-reveal, .elementor-editor-active .d180-hero-line-inner, body.elementor-editor-preview [class*="d180-anim-"], body.elementor-editor-preview .d180-reveal, body.elementor-editor-preview .d180-hero-line-inner { opacity: 1 !important; transform: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { [class*="d180-anim-"], .d180-reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } .d180-thread-line::after, .d180-btn-primary::before { transition: none !important; } .d180-hero-line-inner { animation: none !important; transform: none !important; } .d180-slide-knob { animation: none !important; } .d180-tilt-col { animation: none !important; } .d180-calc-body { transition: none !important; } .d180-faq-mark { animation: none !important; } .d180-section-head .d180-eyebrow::before, .d180-meter-thread, .d180-sum-total-thread, .d180-faq-item::before { animation: none !important; transition: none !important; transform: scaleX(1) !important; } .d180-faq-item.is-open::before { transform: scaleY(1) !important; } .d180-faq-item:not(.is-open)::before { transform: scaleY(0) !important; } .d180-opt, .d180-sum-row, .d180-screen.is-in, .d180-screen.is-out { animation: none !important; } } /* instant re-render (e.g. currency switch) — no entrance replay */ .d180-screen.is-instant .d180-opt, .d180-screen.is-instant .d180-sum-row, .d180-screen.is-instant .d180-sum-total-thread { animation: none !important; } /* --------------------------------------------------------------------- §10 MOBILE PERFORMANCE BUDGET --------------------------------------------------------------------- */ @media (max-width: 767px) { [class^="d180-"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .d180-card { box-shadow: 0 4px 12px -6px rgba(28,22,19,.18) !important; } } /* --------------------------------------------------------------------- §11 WORDPRESS/ELEMENTOR NEUTRALISATION — load-bearing after conversion --------------------------------------------------------------------- */ .elementor-widget-container > [class^="d180-"] { width: 100%; } [class^="d180-"] a { text-decoration: none; } [class^="d180-"] ul, [class^="d180-"] ol { list-style: none; margin: 0; padding: 0; } /* --------------------------------------------------------------------- §12 MEDIA & PLACEHOLDERS --------------------------------------------------------------------- */ .d180-media { position: relative; overflow: hidden; border-radius: var(--d180-radius-lg); } .d180-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; } .d180-media:hover img { transform: scale(1.04); } .d180-placeholder { display: grid; place-items: center; min-height: 12rem; border: 1px dashed var(--d180-border); border-radius: var(--d180-radius-lg); background: repeating-linear-gradient(45deg, var(--d180-muted) 0 12px, transparent 12px 24px), var(--d180-bg-deep); } .d180-placeholder-label { font-size: .8rem; color: var(--d180-muted-fg); } /* --------------------------------------------------------------------- §13 SIGNATURE LAYER — الخيط الأحمر · grain · ambient wash One move, repeated everywhere. This is the identity. --------------------------------------------------------------------- */ /* The thread: a 2px red line that draws itself, inline-start origin. Put .d180-thread-line on any element; it draws when .is-visible (scroll reveal) or when a parent gains .is-selected / .is-open. */ .d180-thread-line { position: relative; } .d180-thread-line::after { content: ""; position: absolute; inset-inline: 0; bottom: calc(var(--d180-thread-off, 0px) * -1); height: var(--d180-thread-w); background: var(--d180-thread); transform: scaleX(0); transform-origin: 100% 50%; /* RTL: from the right */ transition: transform .6s var(--d180-ease-enter) .15s; } .d180-thread-line.is-visible::after, .is-visible .d180-thread-line::after, .is-selected .d180-thread-line::after, .is-open .d180-thread-line::after, .d180-thread-line.is-drawn::after { transform: scaleX(1); } /* thread as the section-head rule (already in the eyebrow ::before); draw-in variant when the head reveals */ .d180-section-head .d180-eyebrow::before { transform: scaleX(0); transform-origin: 100% 50%; transition: transform .6s var(--d180-ease-enter) .1s; } .d180-section-head.is-visible .d180-eyebrow::before { transform: scaleX(1); } /* Grain — element-level texture (the app overlay carries its own). */ .d180-grain { position: relative; } .d180-grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: screen; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Wash — subtle lift + a breath of red in the app's lower corner */ .d180-wash { position: relative; } .d180-wash::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(50rem 30rem at 50% -8rem, rgba(255,255,255,.5), transparent 70%), radial-gradient(42rem 30rem at 92% 100%, rgba(160,32,30,.05), transparent 60%); } .d180-wash > * { position: relative; z-index: 2; } /* Paper block — the decisive light editorial card on the dark canvas */ .d180-ink-block { background: var(--d180-paper); color: var(--d180-paper-fg); padding: 1.75rem 2rem; } .d180-ink-block p { margin: 0; color: var(--d180-paper-fg); font-size: .95rem; } /* editorial index — the reference's «/01» language. bidi-override guarantees the slash renders BEFORE the digits even inside an RTL paragraph (digits-only content, so override is safe). */ .d180-index { direction: ltr; unicode-bidi: bidi-override; } .d180-index::before { content: "/"; color: var(--d180-accent2); margin-inline-end: .06em; } /* section index — the numbering rhythm that ties the page together */ .d180-sec-index { font-family: var(--d180-font); font-weight: 700; font-size: .8rem; color: var(--d180-fg); } /* Skip link (a11y) */ .d180-skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 300; padding: .6rem 1.2rem; background: var(--d180-fg); color: var(--d180-bg); transition: top .3s; } .d180-skip:focus { top: 1rem; } /* Focus visibility — luxury but accessible */ [class^="d180-"] :focus-visible, [class^="d180-"]:focus-visible { outline: 2px solid var(--d180-thread); outline-offset: 3px; } /* ===================================================================== */ /* ============ HOMEPAGE WIDGETS ===================================== */ /* ===================================================================== */ /* --------------------------------------------------------------------- §H1 HEADER — transparent over hero, solidifies on scroll --------------------------------------------------------------------- */ .d180-header { position: sticky; top: 0; inset-inline: 0; z-index: 200; background: transparent; border-bottom: 1px solid transparent; transition: background .4s ease, border-color .4s ease, box-shadow .4s ease; } /* v1.0.3: تحت شريط إدارة ووردبريس (للمسجّلين فقط) لا يختفي الهيدر خلفه */ body.admin-bar .d180-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .d180-header { top: 46px; } } .d180-header.is-scrolled { background: rgba(253, 252, 249, .95); border-bottom-color: var(--d180-border); } @supports (backdrop-filter: blur(1px)) { @media (min-width: 768px) { .d180-header.is-scrolled { backdrop-filter: blur(14px); background: rgba(253,252,249,.8); } } } .d180-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 4.75rem; } .d180-logo { display: inline-flex; align-items: center; color: var(--d180-fg); } img.d180-logo-img { height: 2.3rem; width: auto; display: block; } /* v8.4 trial: the ivory logo asset flips to ink on the light canvas (header + menu only — the footer stays dark and keeps it ivory) */ .d180-header img.d180-logo-img, .d180-mobile-menu img.d180-logo-img { filter: invert(1) grayscale(1) brightness(.92); } .d180-footer-main img.d180-logo-img { height: 3rem; } .d180-app-logo img.d180-logo-img { height: 1.7rem; } .d180-logo-mark { font-family: var(--d180-font-display); font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--d180-fg); letter-spacing: .02em; /* Latin wordmark only */ } .d180-logo-mark i { font-style: normal; color: var(--d180-primary); } /* v5: the traditional nav row is gone — one smart overlay menu instead */ .d180-header-tools { display: inline-flex; align-items: center; gap: .8rem; margin-inline-start: auto; } .d180-header-cta { display: none; } @media (min-width: 560px) { .d180-header-cta { display: inline-flex; padding: .68rem 1.4rem; font-size: .875rem; } } /* the saved-quote chip — quiet, yellow-marked, lives in the header */ .d180-resume-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .58rem 1.05rem; background: transparent; border: 1px solid rgba(160, 32, 30, .45); border-radius: var(--d180-radius-btn); color: var(--d180-fg); font: inherit; font-size: .78rem; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; transition: border-color .3s, color .3s, background .3s; } .d180-resume-chip:hover { border-color: var(--d180-accent2); color: var(--d180-accent2); } .d180-resume-chip[hidden] { display: none; } .d180-header .d180-resume-chip { display: none; } @media (min-width: 768px) { .d180-header .d180-resume-chip:not([hidden]) { display: inline-flex; } } /* burger — three bare lines, no box (Wope-structure header). Middle line runs shorter; on hover it stretches and turns yellow. */ .d180-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 7px; width: 2.9rem; height: 2.75rem; padding: .5rem .15rem; background: transparent; border: 0; cursor: pointer; transition: var(--d180-transition); } .d180-burger span { display: block; height: 2px; width: 100%; background: var(--d180-fg); transition: transform .35s ease, opacity .3s ease, width .35s ease, background .3s ease; } .d180-burger span:nth-child(2) { width: 58%; } .d180-burger:hover span:nth-child(2), .d180-burger:focus-visible span:nth-child(2) { width: 100%; background: var(--d180-accent2); } .d180-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .d180-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .d180-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* --------------------------------------------------------------------- THE MENU — a full-screen editorial takeover, every viewport. Giant indexed Amiri links on the same canvas, staggered rise. --------------------------------------------------------------------- */ .d180-mobile-menu { position: fixed; inset: 0; z-index: 900; background-color: var(--d180-bg); background-image: radial-gradient(64rem 36rem at 50% -8rem, rgba(160,32,30,.05), transparent 70%); background-repeat: no-repeat; padding: 7.5rem var(--d180-pad) 2.5rem; display: flex; flex-direction: column; direction: rtl; text-align: right; overflow-y: auto; } .d180-mobile-menu[hidden] { display: none; } .d180-menu-inner { width: 100%; max-width: var(--d180-max); margin-inline: auto; display: flex; flex-direction: column; flex: 1; } .d180-menu-links { display: flex; flex-direction: column; } .d180-menu-link { display: flex; align-items: baseline; gap: 1.5rem; padding: 1.4rem .25rem; border-top: 1px solid var(--d180-border); color: var(--d180-fg); font-family: var(--d180-font-display); font-weight: 700; font-size: clamp(1.9rem, 5.5vw, 3.2rem); line-height: 1.35; transition: color .3s, padding .35s var(--d180-ease-enter); animation: d180-fade-up .55s var(--d180-ease-enter) both; } .d180-menu-link:nth-child(1) { animation-delay: .08s; } .d180-menu-link:nth-child(2) { animation-delay: .15s; } .d180-menu-link:nth-child(3) { animation-delay: .22s; } .d180-menu-link:nth-child(4) { animation-delay: .29s; } .d180-menu-link:last-child { border-bottom: 1px solid var(--d180-border); } .d180-menu-link .d180-index { font-family: var(--d180-font); font-weight: 700; font-size: .95rem; color: var(--d180-muted-fg); transition: color .3s; } .d180-menu-link:hover { color: var(--d180-accent2); padding-inline-start: 1rem; } .d180-menu-link:hover .d180-index { color: var(--d180-fg); } .d180-menu-foot { margin-top: auto; padding-top: 3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; animation: d180-fade-in .6s ease .35s both; } .d180-menu-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-inline-start: auto; font-size: .85rem; } .d180-menu-meta a { color: var(--d180-muted-fg); transition: color .3s; } .d180-menu-meta a:hover { color: var(--d180-accent2); } @media (prefers-reduced-motion: reduce) { .d180-menu-link, .d180-menu-foot { animation: none !important; } } /* --------------------------------------------------------------------- §H2 HERO — the Kurosawa cut: a photographic stage. Full-bleed image (MEDIA slot — swap in the real studio/portrait shot), cinematic scrims keeping the start side dark for the oversized statement, and the deep-black strip with its red crown as the floor. --------------------------------------------------------------------- */ .d180-hero { position: relative; display: flex; align-items: center; background: transparent; padding-block: 7rem 9rem; min-height: 62svh; } /* ✅ v8.8.3: أرضية الافتتاحية تذوب في كانفس الصفحة بلا أي حافة — آخر ~14% تتدرج من عاج الافتتاحية إلى عاج الجسم */ .d180-opening { position: relative; isolation: isolate; background: linear-gradient(180deg, #F9F7F1 0%, #F9F7F1 86%, #FCFBF8 100%); } .d180-opening > section { position: relative; z-index: 2; background: transparent; } /* v8.6 art direction: tonal depth — a charcoal breath on the top and the end corner, a whisper of burgundy on the start side, over warm ivory */ .d180-opening-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(90rem 46rem at 50% -14rem, rgba(28,22,19,.06), transparent 70%), radial-gradient(64rem 44rem at 106% 6%, rgba(28,22,19,.07), transparent 58%), radial-gradient(60rem 46rem at -6% 34%, rgba(160,32,30,.05), transparent 55%), #F9F7F1; } /* ✅ v8.8.4 (عبدالرحمن): الشبكة رجعت — في الهيرو فقط وبدرجة أفتح، عشان خلفيته متبقاش سادة. تتلاشى تمامًا قبل دخول قصص النجاح بمسافة، فالحائط يبدأ على كانفس نضيفة بلا أي خط. */ .d180-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(28, 22, 19, .07) 1px, transparent 1px), linear-gradient(0deg, rgba(28, 22, 19, .07) 1px, transparent 1px); background-size: clamp(4.25rem, 8vw, 6.75rem) clamp(4.25rem, 8vw, 6.75rem); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 22rem), transparent calc(100% - 10rem)); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 22rem), transparent calc(100% - 10rem)); animation: d180-hero-grid-in 1.8s var(--d180-ease-enter) .1s both; } @keyframes d180-hero-grid-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .d180-hero::before { animation: none !important; } } @media (max-width: 560px) { /* الهيرو أقصر على الموبايل — نطاق التلاشي يتقلص معه */ .d180-hero::before { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 11rem), transparent calc(100% - 4.5rem)); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 11rem), transparent calc(100% - 4.5rem)); } } /* the faintest paper grain, local to the opening */ .d180-opening-media::after { content: ""; position: absolute; inset: 0; opacity: .04; mix-blend-mode: multiply; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .d180-opening-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(252,251,248,.9) 0%, rgba(252,251,248,0) 22%), radial-gradient(58% 30% at 50% 96%, rgba(160,32,30,.07), transparent 72%), radial-gradient(120% 90% at 50% 30%, rgba(255,255,255,0) 36%, rgba(255,253,248,.5) 100%); } /* centred composition (Wope structure): everything stacks on the axis */ .d180-hero-body { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .d180-hero-eyebrow { display: inline-flex; align-items: center; gap: .75rem; font-size: .8rem; font-weight: 700; color: var(--d180-accent2); margin-bottom: 3rem; } .d180-hero-eyebrow::before, .d180-hero-eyebrow::after { content: ""; width: 3.5rem; height: 1px; background: var(--d180-fg); flex: none; } .d180-hero-eyebrow .d180-index { white-space: nowrap; } @media (max-width: 560px) { .d180-hero-eyebrow { white-space: nowrap; } .d180-hero-eyebrow::before, .d180-hero-eyebrow::after { display: none; } } .d180-hero-title { /* ✅ v8.9.5 عبدالرحمن: أكبر على البي سي فقط — الموبايل له مقاسه في §M، والقياس التلقائي يمنع أي لف زيادة */ font-size: clamp(1.85rem, 4.5vw, 4.2rem); font-weight: 700; line-height: 1.26; color: var(--d180-fg); margin: 0; } /* masked reveal lines — stacked on mobile, ONE line on wide screens (the Wope-reference composition; keeps the hero ~half the viewport) */ .d180-hero-line { display: block; overflow: hidden; padding: .28em .06em .1em; margin: -.28em -.06em -.1em; } .d180-hero-line-inner { display: inline-block; transform: translateY(125%); animation: d180-line-up 1s var(--d180-ease-enter) .15s forwards; } .d180-hero-line:nth-child(2) .d180-hero-line-inner { animation-delay: .32s; } @keyframes d180-line-up { to { transform: translateY(0); } } .d180-hero-title em { font-style: normal; color: var(--d180-accent2); } /* --------------------------------------------------------------------- DRAG-TO-PRICE — the hero's signature object (Wope pill, 180D voice). A black pill rail; the red knob starts at the inline START and is DRAGGED toward the end — a yellow wash (money) trails it. Releasing past ~55% (or a plain tap / Enter) glides it home and opens the quote experience. The one rounded object in a sharp-cornered system, on purpose: it reads as a mechanism, not a card. --------------------------------------------------------------------- */ /* v8.6: the drag bar is an INK MECHANISM now — charcoal presence, not a soft input field. The knob's burgundy pops against it. */ .d180-hero-slide { position: relative; overflow: hidden; width: min(36rem, 100%); height: 4.6rem; margin-top: 2.75rem; border: 1px solid rgba(255, 255, 255, .09); border-radius: 999px; background: linear-gradient(150deg, #262019 0%, #171310 100%); box-shadow: 0 26px 55px -22px rgba(28,22,19,.55), inset 0 1px 0 rgba(255,255,255,.08); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y; transition: border-color .3s ease, box-shadow .3s ease; } .d180-hero-slide:hover { border-color: rgba(226, 147, 143, .35); box-shadow: 0 30px 60px -22px rgba(28,22,19,.6), inset 0 1px 0 rgba(255,255,255,.1); } .d180-slide-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 999px; background: rgba(160, 32, 30, .35); pointer-events: none; } .d180-slide-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-inline: 5.6rem 2rem; font-family: var(--d180-font-display); font-size: 1.2rem; color: #F1EAE0; pointer-events: none; white-space: nowrap; } .d180-slide-knob { position: absolute; top: .4rem; inset-inline-start: .4rem; width: 3.7rem; height: 3.7rem; border-radius: 999px; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--d180-primary); color: #FFF; border: 0; cursor: grab; z-index: 2; box-shadow: 0 6px 18px rgba(126,22,20,.35); transition: background .3s ease, color .3s ease, box-shadow .3s ease; } .d180-hero-slide .d180-slide-knob, .d180-hero-slide .d180-slide-knob:hover, .d180-hero-slide .d180-slide-knob:focus { background: var(--d180-primary); color: #FFF; border: 0; } .d180-slide-knob:active { cursor: grabbing; } .d180-slide-knob svg { width: 1.5rem; height: 1.5rem; } /* while dragging: raw 1:1 tracking; released: sprung glide */ .d180-hero-slide:not(.is-drag) .d180-slide-knob { transition: transform .55s var(--d180-ease-enter), background .3s ease, color .3s ease, box-shadow .3s ease; } .d180-hero-slide:not(.is-drag) .d180-slide-fill { transition: width .55s var(--d180-ease-enter); } .d180-hero-slide:not(.is-drag) .d180-slide-label { transition: opacity .4s ease; } .d180-hero-slide.is-go { border-color: var(--d180-accent2); } .d180-hero-slide.is-go .d180-slide-knob { background: var(--d180-primary-glow); color: #FFFFFF; box-shadow: 0 6px 18px rgba(126,22,20,.4); } /* idle invitation — the knob nudges along the travel axis until touched */ @keyframes d180-slide-hint { 0%, 74%, 100% { transform: translateX(0); } 82% { transform: translateX(-9px); } 89% { transform: translateX(0); } 95% { transform: translateX(-4px); } } .d180-hero-slide:not(.is-touched):not(.is-go) .d180-slide-knob { animation: d180-slide-hint 4.2s ease-in-out 2.4s infinite; } /* no-JS fallback line under the hero slider */ .d180-hero-noscript { margin: 1.5rem auto 0; max-width: 40rem; font-size: .9rem; color: var(--d180-muted-fg); } /* the geo "starts from" line — an editorial rule-flanked statement */ .d180-hero-from { margin: 1.9rem 0 0; display: inline-flex; align-items: center; gap: 1rem; font-size: clamp(.95rem, 1.7vw, 1.1rem); font-weight: 600; color: var(--d180-muted-fg); } .d180-hero-from::before, .d180-hero-from::after { content: ""; width: 2.6rem; height: 1px; background: rgba(28, 22, 19, .3); flex: none; } .d180-from-val { color: var(--d180-accent2); font-weight: 800; font-size: 1.18em; margin-inline-start: .15rem; } /* ✅ v8.9.2 عبدالرحمن: «خمس أيام» بالأحمر */ .d180-from-days { color: var(--d180-accent2); font-weight: 800; white-space: nowrap; } .d180-from-val .d180-sar { height: .92em; width: auto; display: inline-block; vertical-align: -.08em; } @media (max-width: 480px) { .d180-hero-slide { height: 4.1rem; margin-top: 2.75rem; } .d180-slide-knob { width: 3.3rem; height: 3.3rem; } .d180-slide-label { font-size: 1rem; padding-inline: 4.8rem 1.5rem; } } /* --------------------------------------------------------------------- §H3 THE FLOW — قصص النجاح v3 (client reference): two FAST marquee rows of real project cards moving in OPPOSITE directions, flowing straight out of the hero (one shared canvas). Card = live shot + name plate; clicking opens the site; hovering pauses its row. Varied card ratios (wide / square / tall) give the mosaic rhythm. --------------------------------------------------------------------- */ .d180-showcase { padding: 0 0 4.5rem; background: transparent; } /* v8.5 THE TILTED WALL (client pick): a clipped stage; four columns of real project cards ride through it at different speeds, the whole wall leaning -7°. Hovering a column pauses it. Cards keep their EXACT capture ratios (16/10 · 3/4) — width per column, height from ratio. */ /* ✅ v8.8.3: الذوبان بالماسك لا بالتلوين — الكروت تتلاشى في الخلفية الحية نفسها (المتدرجة)، فلا يبقى أي حرف أو خط مرسوم عند الحواف */ .d180-showcase { position: relative; } .d180-tilt { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%); } .d180-tilt-stage { display: flex; gap: clamp(.9rem, 1.6vw, 1.5rem); justify-content: center; height: clamp(32rem, 56vw, 46rem); transform: rotate(-7deg) scale(1.14); transform-origin: 50% 50%; } /* ✅ عبدالرحمن (2026-09-08): «ارفع السكشن فوق واديله ارتفاع أكبر — كأنه متداخل مع الهيرو بشكل أوضح» — الحائط يصعد داخل نطاق الهيرو ويكسب ارتفاعًا، والكانفس المتصلة (بلا خط ولا شبكة) تبيع التداخل */ @media (min-width: 721px) { .d180-showcase { margin-top: -7rem; } .d180-tilt-stage { height: clamp(36rem, 62vw, 52rem); } } .d180-tilt-col { flex: none; width: clamp(11rem, 19vw, 18.5rem); display: flex; flex-direction: column; gap: clamp(.9rem, 1.6vw, 1.5rem); animation: d180-tilt-move var(--tilt-t, 90s) linear infinite; } .d180-tilt-col.is-reverse { animation-direction: reverse; } .d180-tilt-col:hover, .d180-tilt-col:focus-within { animation-play-state: paused; } @keyframes d180-tilt-move { from { transform: translateY(0); } to { transform: translateY(calc(-50% - clamp(.45rem, .8vw, .75rem))); } } .d180-tilt-g { display: flex; flex-direction: column; gap: clamp(.9rem, 1.6vw, 1.5rem); } .d180-tilt .d180-flow-card { width: 100%; height: auto; } /* the floating label plate — rides over the wall, never blocks clicks. ✅ v8.8.3: صارت ابنة السكشن (خارج الماسك) — نفس موضعها البصري */ .d180-tilt-plate { position: absolute; inset-inline: 0; bottom: 6.9rem; z-index: 5; display: grid; justify-items: center; pointer-events: none; } .d180-tilt-plate-main { display: inline-flex; align-items: baseline; gap: .6rem; text-align: center; } .d180-tilt-l1 { display: inline-flex; align-items: baseline; gap: .5rem; } .d180-tilt-plate-main { background: rgba(253, 252, 249, .95); border: 1px solid rgba(28, 22, 19, .14); border-radius: var(--d180-radius); box-shadow: 0 22px 50px -22px rgba(28,22,19,.35); padding: .95rem 2rem; font-family: var(--d180-font-display); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.55rem); line-height: 1.4; color: var(--d180-fg); } .d180-tilt-plate-main em { font-style: normal; color: var(--d180-accent2); } .d180-tilt-plate-main b { font-family: var(--d180-font); font-weight: 700; font-size: .7em; color: var(--d180-muted-fg); } @media (max-width: 720px) { .d180-showcase { padding-bottom: 1.5rem; } .d180-tilt-stage { height: clamp(27rem, 122vw, 34rem); gap: .8rem; transform: rotate(-6deg) scale(1.22); } .d180-tilt-col { width: clamp(7rem, 29vw, 9.5rem); gap: .8rem; } .d180-tilt-g { gap: .8rem; } .d180-tilt .d180-flow-card { border-width: 2px; border-radius: 10px; } .d180-flow-go { width: 1.9rem; height: 1.9rem; } .d180-flow-go svg { width: .85rem; height: .85rem; } .d180-tilt-plate { bottom: 2.9rem; } /* client: the plate stacks — قصص نجاح حقيقية فوق، والدعوة تحتها */ .d180-tilt-plate-main { flex-direction: column; align-items: center; gap: .2rem; padding: .75rem 1.5rem; font-size: 1rem; } .d180-tilt-dash { display: none; } .d180-tilt-plate-main b { font-size: .68em; } } .d180-flow-card { position: relative; display: block; flex: none; height: clamp(11rem, 22vw, 15.5rem); border: 3px solid rgba(160, 32, 30, .8); /* the burgundy frame (trial) */ border-radius: 14px; background: var(--d180-ink); overflow: hidden; transition: transform .4s var(--d180-ease-enter), border-color .3s, box-shadow .4s; } .d180-flow-card:hover { transform: translateY(-5px); border-color: var(--d180-accent2); box-shadow: 0 24px 50px -20px rgba(160,32,30,.3); } .d180-flow-card:focus-visible { outline: 2px solid var(--d180-accent2); outline-offset: 3px; } .d180-flow-card.is-wide { aspect-ratio: 16 / 10; } .d180-flow-card.is-tall { aspect-ratio: 3 / 4; } .d180-flow-card .d180-shot-pan { position: absolute; inset: 0; } /* the brand veil — an unmistakable red theme wash; the capture is slightly desaturated under it so the whole mosaic reads as ONE red canvas. Hovering lifts the veil and restores the site's true colors. */ .d180-flow-card .d180-shot-pan::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(160deg, rgba(28,22,19,.3) 0%, rgba(28,22,19,.34) 55%, rgba(28,22,19,.42) 100%); transition: opacity .45s ease; pointer-events: none; } .d180-flow-card .d180-shot-pan img { filter: saturate(.45) contrast(.98); transition: filter .45s ease; } .d180-flow-card:hover .d180-shot-pan::after { opacity: 0; } .d180-flow-card:hover .d180-shot-pan img { filter: none; } /* live captures: a site that overflows its own viewport leaves a white gutter on the LEFT of the shot (RTL). Anchoring top-right + a light overscan crops it away; --fit (inline custom prop, like --i) is the per-project knob when a site needs a deeper crop. */ .d180-flow-card .d180-shot-pan img { object-position: top right; /* content side — gutters fall off the left */ transform: scale(var(--fit, 1)); /* emergency per-project knob only */ transform-origin: top right; } /* the visit coin — a BIG permanent yellow arrow: «اضغط لتزور الموقع» */ .d180-flow-go { position: absolute; bottom: .8rem; inset-inline-start: .8rem; z-index: 3; width: 2.7rem; height: 2.7rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(140deg, #C2413D 0%, #A0201E 55%, #7E1614 100%); color: #FFFFFF; border: 1px solid rgba(255, 210, 205, .5); box-shadow: 0 8px 22px -8px rgba(28,22,19,.5), inset 0 1px 0 rgba(255,190,185,.4); transition: transform .35s var(--d180-ease-enter), filter .3s; } .d180-flow-go svg { width: 1.2rem; height: 1.2rem; transition: transform .35s ease; } .d180-flow-card:hover .d180-flow-go { filter: brightness(1.12); } .d180-flow-card:hover .d180-flow-go { transform: scale(1.12); } .d180-flow-card:hover .d180-flow-go svg { transform: translate(-2px, -2px); } @media (max-width: 640px) { .d180-flow-go { width: 2.3rem; height: 2.3rem; } .d180-flow-go svg { width: 1.05rem; height: 1.05rem; } } /* the pan shot fills its card */ .d180-shot-pan { position: relative; display: block; overflow: hidden; background: var(--d180-ink); } .d180-shot-pan .d180-cover { position: absolute; inset: 0; } .d180-shot-pan img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .d180-shot-pan.is-shot-missing img { display: none; } /* --------- typographic covers (stand-ins until real screenshots) ------ Each project shows as an editorial cover: category, big Amiri name, domain chip — and a giant index numeral that the hover-pan reveals. Swapping in a real screenshot = replacing .d180-cover with an . */ .d180-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: 7% 8%; direction: rtl; text-align: right; background: var(--cov-bg, #0D0C0B); color: var(--cov-fg, #EDEAE0); overflow: hidden; } .d180-cover::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 38%; height: 2px; background: var(--cov-accent, #A0201E); } .d180-cover-cat { font-size: .72rem; font-weight: 700; color: var(--cov-accent, #A0201E); } .d180-cover-name { font-family: var(--d180-font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.4; } .d180-cover-domain { font-size: .7rem; color: var(--cov-muted, #A29B8B); border: 1px solid var(--cov-line, rgba(237,234,224,.2)); padding: .22rem .75rem; direction: ltr; unicode-bidi: embed; } /* the buried numeral — the pan brings it up */ .d180-cover-num { position: absolute; bottom: 2%; inset-inline-end: 4%; font-family: var(--d180-font-display); font-weight: 700; font-size: clamp(7rem, 16vw, 12rem); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--cov-line, rgba(237,234,224,.22)); direction: ltr; user-select: none; } .d180-flow-card .d180-cover-num { display: none; } .d180-flow-card .d180-cover { padding: 3rem 9% 12%; gap: .4rem; justify-content: center; } .d180-flow-card .d180-cover-name { font-size: 1.2rem; } .d180-flow-card .d180-cover-cat { font-size: .68rem; } /* variants — white/greige/ink grounds, one burgundy crown */ .d180-cover-a { --cov-bg: #0D0C0B; --cov-accent: #E2938F; } .d180-cover-b { --cov-bg: #FFFFFF; --cov-fg: #1C1613; --cov-muted: #6E6558; --cov-line: rgba(28,22,19,.25); --cov-accent: #A0201E; } .d180-cover-c { --cov-bg: #F5F2EB; --cov-fg: #1C1613; --cov-muted: #6E6558; --cov-line: rgba(28,22,19,.25); --cov-accent: #A0201E; } .d180-cover-d { --cov-bg: #FFFFFF; --cov-fg: #1C1613; --cov-muted: #6E6558; --cov-line: rgba(28,22,19,.25); --cov-accent: #A0201E; } .d180-cover-e { --cov-bg: #0D0C0B; --cov-accent: #E2938F; } .d180-cover-f { --cov-bg: #F5F2EB; --cov-fg: #1C1613; --cov-muted: #6E6558; --cov-line: rgba(28,22,19,.25); --cov-accent: #A0201E; } /* --------------------------------------------------------------------- §H4b INCLUDED — على ماذا ستحصل بالسعر الأساسي؟ ✅ عبدالرحمن (2026-09-09): 4 مستحقات على بلاطات بيضاء هادئة، والسعر في العنوان بعملة دولة الزائر (نفس آلية الهيرو). --------------------------------------------------------------------- */ .d180-included { padding-block: 4.5rem 5.5rem; border-top: 1px solid var(--d180-border); } .d180-included::after { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 4rem; height: 2px; background: var(--d180-accent2); } .d180-included .d180-section-head.d180-section-head { margin-bottom: 2.4rem; } .d180-included-val { color: var(--d180-accent2); white-space: nowrap; } .d180-included-val .d180-sar { height: .78em; width: auto; display: inline-block; vertical-align: -.05em; } .d180-included-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 680px) { .d180-included-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ✅ عبدالرحمن (2026-09-09): راديس خفيف للبلاطات، والأيقونات عارية بلا خلفية ولا إطار */ .d180-included-item { display: flex; align-items: center; gap: 1.1rem; padding: 1.35rem 1.5rem; background: var(--d180-card); border: 1px solid var(--d180-border); border-radius: 10px; transition: transform .35s var(--d180-ease-enter), box-shadow .35s; } .d180-included-item:hover { transform: translateY(-4px); box-shadow: var(--d180-shadow-md); } .d180-included-item p { margin: 0; font-weight: 700; font-size: 1.02rem; line-height: 1.8; } /* v1.0.17 — بادج دائري أنيق (لمسة أخف: لا أوربّ لامع ولا تداخل فوق الكارت): دائرة بتدرّج عاجي ناعم، حلقة داخلية رفيعة، وظل خافت — الأيقونة حمراء. */ .d180-included-ico { flex: none; width: 3.1rem; height: 3.1rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--d180-accent2); background: radial-gradient(120% 120% at 32% 26%, #FFFFFF 0%, var(--d180-accent2-soft) 100%); box-shadow: inset 0 0 0 1px rgba(160,32,30,.16), 0 9px 20px -11px rgba(160,32,30,.42); transition: transform .4s var(--d180-ease-enter), box-shadow .35s, color .35s; } .d180-included-ico svg { width: 1.5rem; height: 1.5rem; } .d180-included-item:hover .d180-included-ico { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(160,32,30,.3), 0 13px 24px -11px rgba(160,32,30,.5); } /* --------------------------------------------------------------------- §H5 FAQ v2 — سجل الأسئلة. A sticky editorial intro (with a giant outlined «؟») beside PLATED accordion items: thematic icon plate, Amiri question, index, rotating chevron coin. Yellow leads here — the open item draws a yellow bar and its plate fills gold. --------------------------------------------------------------------- */ .d180-faq-section { background: transparent; padding-block: 5rem; } @media (min-width: 768px) { .d180-faq-section { padding-block: 7rem; } } .d180-faq-grid { display: grid; gap: 3rem; } @media (min-width: 960px) { .d180-faq-grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; } .d180-faq-intro { position: sticky; top: 6.5rem; } } .d180-faq-lead { margin: 1.1rem 0 0; max-width: 24rem; color: var(--d180-muted-fg); line-height: 1.85; font-size: .92rem; } .d180-faq-mark { display: block; margin-top: 1.2rem; font-family: var(--d180-font-display); font-weight: 700; font-size: clamp(4rem, 6.5vw, 6rem); line-height: 1.1; color: transparent; -webkit-text-stroke: 1.25px rgba(160,32,30,.3); user-select: none; animation: d180-mark-drift 9s ease-in-out infinite alternate; } @keyframes d180-mark-drift { from { transform: translateY(0); } to { transform: translateY(14px); } } .d180-faq-ask { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.4rem; font-size: .85rem; font-weight: 700; color: var(--d180-fg); border-bottom: 1px solid rgba(160,32,30,.35); padding-bottom: .3rem; transition: color .3s, border-color .3s; } .d180-faq-ask:hover { color: var(--d180-accent2); border-color: var(--d180-accent2); } .d180-faq-ask svg { width: 1rem; height: 1rem; } .d180-faq-item { position: relative; overflow: hidden; background: #FFFFFF; border: 1px solid rgba(28,22,19,.11); border-radius: 12px; /* v8.6.3 client call */ transition: border-color .3s, background .3s; } .d180-faq-item + .d180-faq-item { margin-top: .55rem; } .d180-faq-item:hover { border-color: rgba(28,22,19,.32); } .d180-faq-item.is-open { background: #FFFFFF; border-color: rgba(160,32,30,.4); } /* the open item draws a yellow bar down its start edge */ .d180-faq-item::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: var(--d180-thread-w); background: var(--d180-accent2); transform: scaleY(0); transform-origin: 50% 0; transition: transform .45s var(--d180-ease-enter); } .d180-faq-item.is-open::before { transform: scaleY(1); } .d180-faq-q { width: 100%; display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; background: transparent; border: 0; cursor: pointer; color: var(--d180-fg); font: inherit; text-align: right; direction: rtl; } @media (min-width: 768px) { .d180-faq-q { padding: 1rem 1.2rem; } } .d180-faq-ico { flex: none; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(160,32,30,.28); border-radius: 8px; color: var(--d180-accent2); transition: background .35s, color .35s, border-color .35s; } .d180-faq-ico svg { width: 1.15rem; height: 1.15rem; } .d180-faq-ico svg * { stroke-width: 1.7; } /* one voice for every icon */ .d180-faq-item.is-open .d180-faq-ico { background: var(--d180-accent2); border-color: var(--d180-accent2); color: #FFFFFF; } .d180-faq-qtext { flex: 1; min-width: 0; font-family: var(--d180-font-display); font-weight: 700; font-size: 1.02rem; line-height: 1.45; } @media (min-width: 768px) { .d180-faq-qtext { font-size: 1.2rem; } } .d180-faq-num { display: none; } .d180-faq-num-legacy { flex: none; font-size: .68rem; font-weight: 700; color: rgba(110, 101, 88, .65); direction: ltr; unicode-bidi: bidi-override; } .d180-faq-num::before { content: "/"; color: var(--d180-accent2); } .d180-faq-chev { flex: none; width: 2rem; height: 2rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(28,22,19,.22); color: var(--d180-muted-fg); transition: transform .45s var(--d180-ease-enter), background .3s, color .3s, border-color .3s; } .d180-faq-chev svg { width: .9rem; height: .9rem; } .d180-faq-item.is-open .d180-faq-chev { transform: rotate(180deg); background: var(--d180-fg); border-color: var(--d180-fg); color: #FFFFFF; } .d180-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .65s cubic-bezier(.22, .85, .22, 1); } .d180-faq-item.is-open .d180-faq-a { grid-template-rows: 1fr; } .d180-faq-a-inner { overflow: hidden; min-height: 0; } .d180-faq-a p { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .55s var(--d180-ease-enter); } .d180-faq-item.is-open .d180-faq-a p { opacity: 1; transform: none; transition-delay: .12s; } .d180-faq-a p { margin: 0 1rem; padding: .95rem 2.6rem 1.2rem 0; border-top: 1px solid rgba(28,22,19,.08); color: var(--d180-muted-fg); line-height: 1.9; font-size: .9rem; } @media (min-width: 768px) { .d180-faq-a p { margin: 0 1.2rem; padding-inline-start: 0; padding-inline-end: 3.7rem; } } /* on-dark scopes — burgundy is too deep on ink, so the few dark blocks (footer, the total strip) lift their accents to the soft on-dark red */ .d180-footer, .d180-sum-total { --d180-accent2: var(--d180-ondark-red); --d180-money: var(--d180-ondark-red); --d180-red-bright: #F0A5A1; } /* v8.6.2: the card collapsed to JUST the button, per client */ .d180-faq-wa { margin-top: 1.9rem; } /* the FAQ contact card — retired v8.6.2 (kept for reference) */ .d180-faq-card { margin-top: 1.9rem; padding: 1.5rem 1.6rem 1.6rem; background: #FFFFFF; border: 1px solid rgba(28, 22, 19, .12); border-radius: var(--d180-radius); box-shadow: 0 22px 46px -30px rgba(28, 22, 19, .4); display: grid; gap: .5rem; justify-items: start; position: relative; overflow: hidden; max-width: 24rem; } .d180-faq-card::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 2.6rem; height: 2px; background: var(--d180-accent2); } .d180-faq-card strong { font-family: var(--d180-font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.4; } .d180-faq-card p { margin: 0; color: var(--d180-muted-fg); font-size: .875rem; line-height: 1.85; } .d180-faq-card .d180-btn { margin-top: .6rem; } /* --------------------------------------------------------------------- §H6 FOOTER — the Dribbble structure in our identity: one horizontal row (wordmark · nav · socials), a floor of air, then a quiet bottom bar (© + credit ↔ small contact links). A step darker than the canvas, opened by a red tick. --------------------------------------------------------------------- */ .d180-footer { position: relative; background: var(--d180-ink); color: var(--d180-ink-fg); padding-top: 3.5rem; } /* red tick on the crossing */ .d180-footer::after { content: ""; position: absolute; top: -1px; inset-inline-start: 0; width: 4rem; height: 2px; background: var(--d180-primary); } .d180-footer-main { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem 3rem; padding-bottom: 2.75rem; } @media (min-width: 900px) { .d180-footer-main { padding-bottom: 3.25rem; } } .d180-footer-main .d180-logo-mark { font-size: 1.9rem; color: var(--d180-ink-fg); } .d180-footer-brand { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; } .d180-footer-tagline { font-size: .85rem; color: var(--d180-muted-fg); } .d180-footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; margin-inline: auto; } .d180-footer-link { color: var(--d180-ink-fg); font-size: .92rem; font-weight: 600; transition: color .3s; position: relative; padding-block: .3rem; } .d180-footer-link::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; background: var(--d180-accent2); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .35s var(--d180-ease-enter); } .d180-footer-link:hover { color: var(--d180-accent2); } .d180-footer-link:hover::after { transform: scaleX(1); } .d180-footer-socials { display: flex; gap: .7rem; } .d180-social-icon { width: 2.4rem; height: 2.4rem; border: 1px solid var(--d180-ink-border); border-radius: var(--d180-radius); color: var(--d180-ink-muted); transition: color .3s, border-color .3s, background .3s; } .d180-social-icon:hover { color: #FFFFFF; border-color: var(--d180-primary); background: var(--d180-red-fill); } .d180-social-icon svg { width: 1rem; height: 1rem; } .d180-footer-bottom { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.6rem; border-top: 1px solid var(--d180-ink-border); font-size: .8rem; color: var(--d180-ink-muted); } /* darkest step — full-bleed floor under the bottom bar */ .d180-footer-bottom::before { content: ""; position: absolute; inset-block: 0; z-index: -1; inset-inline-start: 50%; width: 100vw; transform: translateX(50%); background: var(--d180-ink-deep); } .d180-footer-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; } .d180-footer-meta a { color: var(--d180-ink-muted); transition: color .3s; } .d180-footer-meta a:hover { color: var(--d180-accent2); } .d180-footer-credit a { color: var(--d180-ink-fg); } .d180-footer-credit a:hover { color: var(--d180-red-bright); } /* ===================================================================== */ /* ============ QUOTATION APP (الأتيليه) ============================= */ /* ===================================================================== */ /* --------------------------------------------------------------------- §A0 THE CALCULATOR — the atelier lives INLINE on the page now. A framed deep-ink panel; the price meter + progress thread stay STICKY under the header while the visitor answers. The whole journey (questions → summary → contact → pay → booking) renders inside the panel — nobody leaves the page. --------------------------------------------------------------------- */ .d180-calc { padding-block: 5.5rem 6rem; scroll-margin-top: 4.5rem; } .d180-calc-head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.4rem; } /* v1.0.17 — الحاسبة سكشن واحد: هيدر أحمر ثابت (بلا زرّ) يلتحم فوق لوحة الأسئلة البيضاء في كارت واحد. القشرة تحمل الحد والظل والاستدارة؛ الرأس الأحمر يستدير من أعلى واللوحة من أسفل بلا فرغة — والحاسبة مفتوحة دائمًا. */ .d180-calc-shell { position: relative; border: 1px solid rgba(160,32,30,.22); border-radius: var(--d180-radius-soft); box-shadow: 0 34px 80px -40px rgba(126,22,20,.5); background: #FFFFFF; } .d180-calc-lead { display: flex; align-items: center; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.4rem, 3.5vw, 2.4rem); background: radial-gradient(130% 160% at 50% 0%, #B0231F 0%, #A0201E 52%, #8C1C1A 100%); color: #FFFFFF; direction: rtl; border-radius: var(--d180-radius-soft) var(--d180-radius-soft) 0 0; position: relative; overflow: hidden; } .d180-calc-lead::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .d180-calc-lead > * { position: relative; z-index: 1; } .d180-calc-lead-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; border-radius: 50%; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); color: #FFFFFF; } .d180-calc-lead-icon svg { width: 1.6rem; height: 1.6rem; } .d180-calc-lead-tx { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .d180-calc-lead-tx strong { font-family: var(--d180-font-display); font-weight: 700; font-size: clamp(1.25rem, 3vw, 1.7rem); line-height: 1.35; color: #FFFFFF; } .d180-calc-lead-tx span { font-size: clamp(.85rem, 1.9vw, .98rem); color: rgba(255,255,255,.88); font-weight: 500; line-height: 1.7; } /* اللوحة البيضاء تلتحم أسفل الرأس الأحمر بلا حد علوي ولا ظل مستقل */ .d180-calc-shell .d180-calc-panel { border: 0; border-radius: 0 0 var(--d180-radius-soft) var(--d180-radius-soft); box-shadow: none; } .d180-calc-shell .d180-calc-sticky { border-radius: 0; } .d180-cur-note { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 600; color: var(--d180-muted-fg); white-space: nowrap; padding-bottom: .4rem; } .d180-calc-panel { position: relative; background: #FFFFFF; border: 1px solid rgba(28,22,19,.12); border-radius: var(--d180-radius-soft); box-shadow: 0 30px 70px -42px rgba(28,22,19,.35); } .d180-calc-sticky { position: sticky; top: 4.72rem; z-index: 30; background: rgba(255,255,255,.97); border-bottom: 1px solid rgba(28,22,19,.1); border-radius: var(--d180-radius-soft) var(--d180-radius-soft) 0 0; overflow: hidden; /* the progress bar hugs the rounded top */ } /* v8.6.4: the progress IS the divider line under the price — full width of the box, filling burgundy from the right; no step counter */ .d180-app-progress { position: absolute; bottom: 0; inset-inline: 0; height: 3px; background: transparent; pointer-events: none; } .d180-app-progress-bar { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #B23431, #7E1614); transform: scaleX(var(--app-progress, 0)); transform-origin: 100% 50%; /* RTL: fills from the right */ transition: transform .55s var(--d180-ease-enter); } @supports (backdrop-filter: blur(1px)) { .d180-calc-sticky { background: rgba(255,255,255,.88); backdrop-filter: blur(10px); } } /* --------------------------------------------------------------------- §A1 THE METER — live price. Yellow is money. --------------------------------------------------------------------- */ .d180-meter { position: relative; z-index: 5; text-align: center; padding: .8rem 1rem .6rem; direction: rtl; } .d180-meter.is-hidden { display: none; } .d180-meter-label { display: flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; letter-spacing: .04em; color: var(--d180-muted-fg); margin-bottom: .3rem; } .d180-meter-value { display: inline-flex; align-items: baseline; gap: .7rem; font-family: var(--d180-font-display); color: var(--d180-accent2); /* the figure itself is the yellow moment */ line-height: 1; } .d180-meter-num { font-size: clamp(1.9rem, 4.6vw, 2.75rem); font-weight: 700; display: inline-flex; /* per-digit spans live here */ direction: ltr; } .d180-meter-num .d180-md { display: inline-block; text-align: center; min-width: .58em; /* layout-enforced tabular digits */ } .d180-meter-num .d180-ms { min-width: .30em; } /* thousands separator */ .d180-meter-cur { font-size: 1rem; color: var(--d180-muted-fg); font-family: var(--d180-font); font-weight: 500; } .d180-meter.is-bump .d180-meter-num { animation: d180-meter-flash .7s var(--d180-ease-enter); } @keyframes d180-meter-flash { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-4px) scale(1.025); } 100% { transform: translateY(0) scale(1); } } /* digit roll on change */ .d180-meter-num .d180-md.is-roll { animation: d180-digit .5s var(--d180-ease-enter); } @keyframes d180-digit { 0% { transform: translateY(.55em); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } /* the thread under the price — re-draws on every change */ .d180-meter-thread { width: min(7.5rem, 38vw); height: var(--d180-thread-w); margin: .55rem auto 0; background: var(--d180-thread); transform-origin: 100% 50%; } .d180-meter.is-bump .d180-meter-thread { animation: d180-thread-redraw .7s var(--d180-ease-enter); } @keyframes d180-thread-redraw { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } /* floating delta chip */ .d180-meter-delta { position: absolute; inset-inline-start: 50%; top: 100%; transform: translateX(50%); font-family: var(--d180-font); font-weight: 700; font-size: .9rem; color: var(--d180-money); pointer-events: none; opacity: 0; direction: ltr; } .d180-meter-delta.is-live { animation: d180-delta 1.15s var(--d180-ease-enter) both; } .d180-meter-delta.is-down { color: var(--d180-muted-fg); } @keyframes d180-delta { 0% { opacity: 0; transform: translateX(50%) translateY(10px); } 22% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(50%) translateY(-16px); } } /* --------------------------------------------------------------------- §A2 STAGE + SCREEN TRANSITIONS — one question at a time --------------------------------------------------------------------- */ .d180-app-stage { position: relative; z-index: 4; min-height: 24rem; display: flex; flex-direction: column; padding: 1rem clamp(1.25rem, 4vw, 2.5rem) 2.5rem; direction: rtl; text-align: right; } .d180-screen { position: relative; z-index: 1; width: 100%; max-width: 46rem; margin-inline: auto; margin-block: auto; padding-block: .5rem; } .d180-screen.is-in { animation: d180-screen-in .55s var(--d180-ease-enter) both; } .d180-screen.is-out { animation: d180-screen-out .38s cubic-bezier(.4,0,.2,1) both; } @keyframes d180-screen-in { from { opacity: 0; transform: translateY(26px) scale(.992); } to { opacity: 1; transform: none; } } @keyframes d180-screen-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-20px) scale(.995); } } .d180-q-kicker { display: flex; align-items: center; gap: .9rem; font-size: .78rem; font-weight: 700; color: var(--d180-fg); margin-bottom: 1rem; max-width: 30rem; } /* the question number — an ink plate with a soft-red slash */ .d180-q-index { font-family: var(--d180-font); font-weight: 700; font-size: .74rem; background: var(--d180-fg); color: #FFFFFF; padding: .3rem .6rem; border-radius: var(--d180-radius); } .d180-q-index.d180-index::before { color: var(--d180-ondark-red); } .d180-q-rule { flex: 1; height: 1px; background: rgba(28,22,19,.22); } /* v8.6.3: the kicker IS the progress bar now */ .d180-q-bar { flex: 1; height: 6px; border-radius: 999px; background: rgba(28, 22, 19, .08); overflow: hidden; } .d180-q-bar-fill { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #B23431, #7E1614); transform: scaleX(var(--qp, 0)); transform-origin: 100% 50%; /* RTL: fills from the right */ transition: transform .55s var(--d180-ease-enter); } .d180-q-count { color: var(--d180-muted-fg); font-weight: 600; } .d180-q-title { font-size: clamp(1.65rem, 4vw, 2.7rem); font-weight: 800; line-height: 1.38; margin: 0 0 .6rem; color: var(--d180-fg); } /* the hint — a light editorial aside: a burgundy rule, quiet type (v8.6) */ .d180-q-hint { display: block; margin: 0 0 1.7rem; padding: .15rem 1rem .15rem 0; padding-inline-start: 1rem; padding-inline-end: 0; background: transparent; border: 0; border-inline-start: 2px solid var(--d180-accent2); border-radius: 0; color: var(--d180-muted-fg); font-size: .875rem; line-height: 1.85; max-width: 36rem; } .d180-hint-ico { display: none; } .d180-q-title + .d180-q-options, .d180-q-title + .d180-q-input { margin-top: 1.6rem; } /* back + utility row */ .d180-q-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; } .d180-q-back { display: inline-flex; align-items: center; gap: .55rem; background: transparent; border: 0; cursor: pointer; color: var(--d180-muted-fg); font: inherit; font-size: .9rem; font-weight: 600; padding: .5rem .25rem; transition: color .3s; } .d180-q-back:hover { color: var(--d180-fg); } .d180-q-back svg { width: 1rem; height: 1rem; } .d180-q-restore { background: transparent; border: 0; cursor: pointer; color: var(--d180-muted-fg); font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: 4px; transition: color .3s; } .d180-q-restore:hover { color: var(--d180-accent2); } /* --------------------------------------------------------------------- §A3 OPTIONS v3 — the app-reference anatomy (client screenshot): a soft white radio-card. Corner radio fills on selection, the card draws a burgundy ring, and THE PRICE of the answer sits ON the card over a dashed rule — exactly the reference's per-option figure. [radio] [icon plate · label(+sub)] / +price --------------------------------------------------------------------- */ .d180-q-options { display: grid; gap: .7rem; grid-template-columns: minmax(0, 1fr); } .d180-q-options.is-bool { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 720px) { .d180-q-options { gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .d180-q-options.is-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .d180-opt { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .7rem; min-height: 4.4rem; padding: .85rem 1rem .8rem; padding-inline-end: 2.7rem; /* room for the corner radio */ background: #FFFFFF; border: 1px solid rgba(28,22,19,.13); border-radius: 10px; color: var(--d180-fg); cursor: pointer; text-align: right; direction: rtl; font: inherit; box-shadow: 0 6px 16px -14px rgba(28,22,19,.25); transition: border-color .3s, background .3s, box-shadow .3s, transform .35s var(--d180-ease-enter); animation: d180-fade-up .5s var(--d180-ease-enter) both; animation-delay: calc(var(--i, 0) * 45ms + .1s); } .d180-opt:hover { border-color: rgba(160,32,30,.45); transform: translateY(-1px); } .d180-opt.is-selected { border-color: var(--d180-accent2); box-shadow: 0 0 0 1px var(--d180-accent2), 0 10px 22px -16px rgba(160,32,30,.3); background: #FFFDFB; } /* the corner radio — the reference's selection language */ .d180-opt-radio { position: absolute; top: .85rem; inset-inline-end: .85rem; width: 1.15rem; height: 1.15rem; border-radius: 999px; border: 2px solid rgba(28,22,19,.28); background: #FFFFFF; transition: border-color .3s; } .d180-opt-radio::after { content: ""; position: absolute; inset: .17rem; border-radius: 999px; background: var(--d180-accent2); transform: scale(0); transition: transform .35s var(--d180-ease-enter); } .d180-opt.is-selected .d180-opt-radio { border-color: var(--d180-accent2); } .d180-opt.is-selected .d180-opt-radio::after { transform: scale(1); } /* head row: icon plate + label */ .d180-opt-head { display: flex; align-items: center; gap: .85rem; min-width: 0; } /* v1.0.17 — بادج دائري أنيق موحّد مع سكشن «ماذا يشمل السعر» */ .d180-opt-ico { flex: none; width: 2.9rem; height: 2.9rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(120% 120% at 32% 26%, #FFFFFF 0%, var(--d180-accent2-soft) 100%); box-shadow: inset 0 0 0 1px rgba(160,32,30,.16), 0 8px 18px -11px rgba(160,32,30,.4); color: var(--d180-accent2); transition: color .35s, box-shadow .35s, background .35s, transform .45s var(--d180-ease-enter); } .d180-opt-ico svg { width: 1.35rem; height: 1.35rem; } .d180-opt:hover .d180-opt-ico { transform: scale(1.05); } .d180-opt.is-selected .d180-opt-ico { background: var(--d180-accent2); border-color: var(--d180-accent2); color: #FFFFFF; } .d180-opt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; } .d180-opt-label { font-weight: 700; font-size: .96rem; line-height: 1.45; } .d180-opt-sub { font-size: .74rem; color: var(--d180-muted-fg); line-height: 1.65; font-weight: 400; } /* THE PRICE ON THE CARD — the reference's big per-option figure */ .d180-opt-price { display: flex; align-items: baseline; gap: .4rem; margin-top: auto; padding-top: .6rem; border-top: 1px dashed rgba(28,22,19,.15); color: var(--d180-money); white-space: nowrap; } .d180-opt-price b { font-size: 1.12rem; font-weight: 800; line-height: 1; direction: ltr; unicode-bidi: embed; } .d180-opt-price small { font-size: .68rem; font-weight: 600; color: var(--d180-muted-fg); } .d180-opt-price.is-zero { color: var(--d180-muted-fg); } /* list variant — denser rows for the long sector lists (no prices there) */ .is-list .d180-opt { flex-direction: row; align-items: center; gap: .8rem; min-height: 3.6rem; padding: .6rem .85rem; padding-inline-end: 2.5rem; } .is-list .d180-opt-head { flex: 1; } .is-list .d180-opt-ico { width: 2.5rem; height: 2.5rem; border-radius: 50%; } .is-list .d180-opt-ico svg { width: 1.1rem; height: 1.1rem; } .is-list .d180-opt-label { font-size: .9rem; } .is-list .d180-opt-radio { top: 50%; margin-top: -.58rem; inset-inline-end: .8rem; } .is-list .d180-opt-price { margin: 0; padding: 0; border: 0; } .is-list .d180-opt-price b { font-size: .95rem; } /* count question — the reference's big amount box (عدد المنتجات) */ .d180-count { display: grid; gap: 1rem; justify-items: start; } .d180-count-box { display: flex; align-items: center; gap: 1rem; width: min(26rem, 100%); padding: 1.1rem 1.15rem; background: #FFFFFF; border: 1px solid rgba(28,22,19,.15); border-radius: var(--d180-radius-soft); box-shadow: 0 10px 26px -22px rgba(28,22,19,.3); } .d180-count-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--d180-font); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.3rem); line-height: 1.2; color: var(--d180-fg); text-align: center; -moz-appearance: textfield; appearance: textfield; } .d180-count-input::-webkit-outer-spin-button, .d180-count-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .d180-count-input:focus-visible { outline: 0; } .d180-count-box:focus-within { border-color: rgba(160,32,30,.5); } .d180-count-unit { font-size: .85rem; font-weight: 600; color: var(--d180-muted-fg); } .d180-count-step { flex: none; width: 2.6rem; height: 2.6rem; border-radius: var(--d180-radius); display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(160,32,30,.25); background: var(--d180-accent2-soft); color: var(--d180-accent2); font: inherit; font-size: 1.3rem; font-weight: 700; line-height: 1; cursor: pointer; transition: background .3s, color .3s, border-color .3s, transform .2s var(--d180-ease-enter); } .d180-count-step:hover { background: var(--d180-accent2); color: #FFFFFF; border-color: var(--d180-accent2); } .d180-count-step:active { transform: scale(.94); } .d180-count-charge { margin: 0; font-size: .95rem; color: var(--d180-muted-fg); } .d180-count-charge.is-money { color: var(--d180-money); font-weight: 700; } .d180-count-charge b { font-weight: 800; } /* the التالي step button — deep, weighty, unmistakably the next move */ .d180-q-nav { margin-top: 1.8rem; } .d180-q-nav .d180-q-next { width: 100%; padding: 1.1rem 2.5rem; font-size: 1rem; font-weight: 800; border-radius: var(--d180-radius-btn); background: linear-gradient(150deg, #B23431 0%, #8E1B19 55%, #6E1210 100%) !important; box-shadow: 0 18px 34px -16px rgba(110, 18, 16, .55), inset 0 1px 0 rgba(255,255,255,.14); transition: transform .25s var(--d180-ease-enter), box-shadow .3s ease, opacity .3s; } .d180-q-nav .d180-q-next:not([disabled]):hover { padding: 1.1rem 2.5rem; /* cancel the base label-shift on this one */ transform: translateY(-2px); box-shadow: 0 24px 44px -18px rgba(110, 18, 16, .65), inset 0 1px 0 rgba(255,255,255,.16); } .d180-q-nav .d180-q-next[disabled] { box-shadow: none; } @media (min-width: 720px) { .d180-q-nav .d180-q-next { width: auto; min-width: 16rem; } } /* the autosave whisper on the first question */ .d180-q-autosave { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--d180-muted-fg); } .d180-q-autosave svg { width: .95rem; height: .95rem; color: var(--d180-accent2); } /* URL / text input step */ .d180-q-input { display: grid; gap: 1.25rem; } .d180-q-input .d180-form-field { margin: 0; } .d180-q-input input[type="url"], .d180-q-input input[type="text"], .d180-q-input input[type="email"], .d180-q-input input[type="tel"] { padding: 1.1rem 1.25rem; font-size: 1.05rem; background: var(--d180-card); border-color: var(--d180-border); color: var(--d180-fg); } .d180-input-ltr { direction: ltr; text-align: left; } /* smooth reveal for the conditional URL field */ .d180-q-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .55s var(--d180-ease-enter), opacity .45s ease .1s; } .d180-q-reveal.is-on { grid-template-rows: 1fr; opacity: 1; } .d180-q-reveal > div { overflow: hidden; min-height: 0; } .d180-q-reveal .d180-form-field { padding-top: 1.25rem; } .d180-q-continue { margin-top: .75rem; justify-self: start; } /* --------------------------------------------------------------------- §A4 SUMMARY — the tailored invoice that doesn't look like one --------------------------------------------------------------------- */ .d180-sum { max-width: 44rem; } .d180-sum-title { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0 0 .5rem; } .d180-sum-sub { color: var(--d180-muted-fg); margin: 0 0 2.5rem; font-size: .95rem; } .d180-sum-list { border-top: 1px solid var(--d180-border); } .d180-sum-row { display: flex; align-items: baseline; gap: 1.25rem; padding: 1.05rem .25rem; border-bottom: 1px solid var(--d180-border); animation: d180-fade-up .5s var(--d180-ease-enter) both; animation-delay: calc(var(--i, 0) * 45ms); } .d180-sum-key { font-size: .85rem; color: var(--d180-muted-fg); flex-shrink: 0; min-width: 7.5rem; } .d180-sum-val { flex: 1; font-weight: 600; font-size: .975rem; } .d180-sum-price { font-size: .875rem; font-weight: 700; color: var(--d180-money); white-space: nowrap; } /* the final figure — a deep-black strip; the number itself goes yellow */ .d180-sum-total { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.6rem 1.75rem; margin-top: 1.75rem; background: var(--d180-ink); border: 1px solid rgba(238,234,224,.1); border-radius: var(--d180-radius); flex-wrap: wrap; position: relative; overflow: hidden; } .d180-sum-total-label { font-size: .9rem; font-weight: 700; color: var(--d180-ink-fg); } .d180-sum-total-value { font-family: var(--d180-font-display); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1; color: var(--d180-accent2); direction: ltr; display: inline-flex; align-items: baseline; gap: .55rem; } .d180-sum-total-value small { font-size: .95rem; font-family: var(--d180-font); font-weight: 500; color: var(--d180-ink-muted); } .d180-sum-total-thread { position: absolute; inset-inline: 0; bottom: 0; height: var(--d180-thread-w); background: var(--d180-thread); transform-origin: 100% 50%; animation: d180-thread-redraw .9s var(--d180-ease-enter) .3s both; } .d180-sum-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; } .d180-sum-note { margin-top: 1.5rem; font-size: .82rem; color: var(--d180-muted-fg); } /* --------------------------------------------------------------------- §A5 SAVE / RESTORE QUOTE --------------------------------------------------------------------- */ .d180-save-code { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.75rem 0; padding: 1.4rem 1.5rem; border: 1px dashed rgba(160, 32, 30, .45); background: rgba(160, 32, 30, .05); } .d180-save-code-val { font-family: var(--d180-font-display); font-weight: 700; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--d180-accent2); direction: ltr; letter-spacing: .06em; /* Latin code only */ } .d180-copy-btn { display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 1px solid var(--d180-border); color: var(--d180-fg); cursor: pointer; font: inherit; font-size: .82rem; font-weight: 600; padding: .55rem 1.1rem; border-radius: var(--d180-radius-btn); transition: var(--d180-transition); } .d180-copy-btn:hover { border-color: var(--d180-accent2); color: var(--d180-accent2); } .d180-copy-btn svg { width: .95rem; height: .95rem; } /* --------------------------------------------------------------------- §A6 PAYMENT — simulated gateway hand-off. No card fields by design. --------------------------------------------------------------------- */ .d180-pay-box { border: 1px solid var(--d180-border); background: var(--d180-card); padding: 2rem; margin-block: 2rem 1.5rem; } .d180-pay-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .65rem; font-size: .95rem; } .d180-pay-row + .d180-pay-row { border-top: 1px solid var(--d180-border); } .d180-pay-row b { font-weight: 700; } .d180-pay-row .d180-sum-price { font-size: 1rem; } .d180-pay-total { font-family: var(--d180-font-display); font-weight: 700; font-size: 1.9rem; color: var(--d180-fg); direction: ltr; } .d180-pay-methods { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; } /* v1.0.4 — اختيار طريقة الدفع (مصر: EasyKash بالجنيه أو PayPal بالدولار) */ .d180-paych { display: flex; flex-direction: column; gap: .55rem; padding-block: .5rem .2rem; } .d180-paych-opt { display: flex; align-items: center; gap: .75rem; width: 100%; text-align: right; background: #fff; border: 1.5px solid var(--d180-border); border-radius: 12px; padding: .72rem .9rem; cursor: pointer; font-family: inherit; transition: border-color .18s ease, box-shadow .18s ease; } .d180-paych-opt:hover { border-color: var(--d180-fg); } .d180-paych-opt.is-on { border-color: var(--d180-fg); box-shadow: 0 8px 20px -16px rgba(28, 22, 19, .55); } .d180-paych-dot { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1.5px solid var(--d180-border); position: relative; transition: border-color .18s ease; } .d180-paych-opt.is-on .d180-paych-dot { border-color: var(--d180-accent); } .d180-paych-opt.is-on .d180-paych-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--d180-accent); } .d180-paych-tx { display: flex; flex-direction: column; gap: .12rem; min-width: 0; } /* v1.0.8 — حاوية أزرار بايبال داخل الصفحة */ .d180-pp-buttons { flex-basis: 100%; width: 100%; max-width: 26rem; } /* v1.0.13 — شاشة الانتقال المبراندة قبل بوابة الدفع (EasyKash) */ .d180-pay-transition { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; background: var(--d180-bg, #FCFBF8); opacity: 0; transition: opacity .3s ease; } .d180-pay-transition.is-in { opacity: 1; } .d180-pt-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; padding: 2rem; max-width: 30rem; direction: rtl; } .d180-pt-logo { width: 4.5rem; height: auto; margin-bottom: .3rem; } .d180-pt-spin { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 3px solid rgba(160,32,30,.18); border-top-color: var(--d180-red-fill, #A0201E); animation: d180-pt-rot .8s linear infinite; } @keyframes d180-pt-rot { to { transform: rotate(360deg); } } .d180-pt-title { font-family: var(--d180-font-display); font-weight: 700; font-size: 1.35rem; color: var(--d180-fg, #1C1613); line-height: 1.5; } .d180-pt-sub { font-size: .92rem; color: var(--d180-muted-fg, #6E6558); line-height: 1.9; } /* v1.0.10 — رسالة فشل/إلغاء الدفع: ظاهرة دائمًا، لا فشل صامت */ .d180-pp-note { flex-basis: 100%; margin: .35rem 0 0; color: var(--d180-accent); font-size: .82rem; font-weight: 700; line-height: 1.8; } .d180-paych-tx b { font-size: .92rem; font-weight: 800; color: var(--d180-fg); line-height: 1.5; } .d180-paych-tx small { font-size: .74rem; color: var(--d180-muted-fg); font-weight: 600; line-height: 1.7; } /* ✅ v8.8.0: علامات وسائل الدفع مرسومة — بلاطات بيضاء بعلامة كل وسيلة (Visa بحرفها الأزرق، دوائر Mastercard المتداخلة، والمصرية بأسمائها). في مرحلة إليمنتور تُستبدل بالشعارات الرسمية كصور. */ .d180-paylogo { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.4rem; padding: .35rem .95rem; border: 1px solid var(--d180-border); border-radius: var(--d180-radius); background: #FFFFFF; } .d180-paylogo.is-visa { font-family: Arial, Helvetica, sans-serif; font-weight: 800; font-style: italic; font-size: .98rem; letter-spacing: .03em; color: #1A1F71; direction: ltr; } /* v8.10.1: علامة PayPal — أزرقها المزدوج المعروف */ .d180-paylogo.is-paypal { font-family: Arial, Helvetica, sans-serif; font-weight: 800; font-style: italic; font-size: .95rem; letter-spacing: 0; direction: ltr; gap: 0; } .d180-paylogo.is-paypal i { font-style: italic; color: #003087; } .d180-paylogo.is-paypal b { font-style: italic; color: #009CDE; } /* قيمة الخصم بالدولار — غير مصر، آخر خطوة فقط */ .d180-pay-usd-val { font-family: var(--d180-font-display); font-weight: 700; font-size: 1.25rem; color: var(--d180-accent2); } .d180-paylogo.is-mc { direction: ltr; } .d180-mc-c { width: 1.25rem; height: 1.25rem; border-radius: 999px; display: block; } .d180-mc-r { background: #EB001B; } .d180-mc-o { background: #F79E1B; margin-inline-start: -.5rem; mix-blend-mode: multiply; } .d180-paylogo.is-ar { font-weight: 800; font-size: .84rem; color: var(--d180-fg); } .d180-paylogo.is-wallet svg { width: 1.05rem; height: 1.05rem; color: var(--d180-accent2); } .d180-pay-secure { display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--d180-muted-fg); margin-top: 1.25rem; } .d180-pay-secure svg { width: 1rem; height: 1rem; color: var(--d180-accent2); flex-shrink: 0; } /* yellow micro-detail #2 */ /* ✅ عبدالرحمن v8.8.0 «تغيير جذري تمامًا»: باب الواتساب لوحة حبر داكنة يعلوها الخيط الأحمر — ختم دائري، سؤال بخط أميري، وزرار واتساب حقيقي. قطعة مصمّمة، لا صندوق تحذير. */ .d180-pay-help { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.15rem; margin-top: 1.6rem; padding: 1.4rem 1.5rem; background: radial-gradient(30rem 14rem at 88% -45%, rgba(160, 32, 30, .32), transparent 70%), var(--d180-ink); border: 1px solid var(--d180-ink-border); border-radius: var(--d180-radius); } .d180-pay-help::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: var(--d180-thread-w); background: var(--d180-thread); } .d180-pay-help-seal { width: 3.1rem; height: 3.1rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--d180-ink-border); border-radius: 999px; color: var(--d180-ondark-red); background: rgba(255, 255, 255, .03); } .d180-pay-help-seal svg { width: 1.35rem; height: 1.35rem; } .d180-pay-help-txt { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1; } .d180-pay-help-title { font-family: var(--d180-font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.45; color: var(--d180-ink-fg); } .d180-pay-help-sub { font-size: .8rem; line-height: 1.75; color: var(--d180-ink-muted); } .d180-pay-help-btn { flex: none; } .d180-pay-help-btn svg { width: 1.05rem; height: 1.05rem; } @media (max-width: 640px) { .d180-pay-help { flex-direction: column; align-items: stretch; text-align: center; gap: .9rem; padding: 1.5rem 1.15rem 1.15rem; } .d180-pay-help-seal { margin-inline: auto; } .d180-pay-help-btn { width: 100%; } } /* processing spinner on the pay button */ .d180-btn .d180-spin { width: 1.05rem; height: 1.05rem; flex-shrink: 0; border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; border-radius: 50%; animation: d180-spin .8s linear infinite; display: none; } .d180-btn.is-busy .d180-spin { display: inline-block; } .d180-btn.is-busy { pointer-events: none; opacity: .85; } @keyframes d180-spin { to { transform: rotate(360deg); } } /* --------------------------------------------------------------------- §A7 SUCCESS — the confirmation moment --------------------------------------------------------------------- */ .d180-done { text-align: center; max-width: 38rem; } .d180-done-mark { width: 6.5rem; height: 6.5rem; margin: 0 auto 2rem; color: var(--d180-accent); } .d180-done-mark svg { width: 100%; height: 100%; } .d180-done-mark circle { stroke-dasharray: 302; stroke-dashoffset: 302; animation: d180-tick 1.1s var(--d180-ease-enter) .15s forwards; } .d180-done-mark path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: d180-tick .55s var(--d180-ease-enter) .95s forwards; } .d180-done-title { font-size: clamp(2rem, 5vw, 2.8rem); margin: 0 0 1rem; } .d180-done-order { font-size: .9rem; color: var(--d180-muted-fg); margin: 0 0 .5rem; } .d180-done-order b { color: var(--d180-accent); direction: ltr; unicode-bidi: embed; font-weight: 700; } .d180-done-desc { color: var(--d180-muted-fg); margin: 0 auto 2.5rem; max-width: 30rem; } .d180-done .d180-btn { margin-inline: auto; } /* --------------------------------------------------------------------- §A8 BOOKING — the atelier calendar --------------------------------------------------------------------- */ .d180-book { max-width: 44rem; } .d180-cal { border: 1px solid var(--d180-border); background: var(--d180-card); padding: 1.5rem; margin-block: 2rem 1.5rem; } .d180-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; } .d180-cal-month { font-family: var(--d180-font-display); font-size: 1.3rem; } .d180-cal-nav { display: inline-flex; gap: .5rem; } .d180-cal-nav button { width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--d180-border); color: var(--d180-fg); cursor: pointer; transition: var(--d180-transition); } .d180-cal-nav button:hover { border-color: var(--d180-fg); } .d180-cal-nav button[disabled] { opacity: .3; pointer-events: none; } .d180-cal-nav svg { width: 1rem; height: 1rem; } .d180-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; direction: rtl; } .d180-cal-dow { text-align: center; font-size: .68rem; font-weight: 700; color: var(--d180-muted-fg); padding-block: .5rem; } .d180-cal-day { aspect-ratio: 1; min-height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; color: var(--d180-fg); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; position: relative; transition: var(--d180-transition); direction: ltr; } .d180-cal-day.is-avail { border-color: var(--d180-border); } .d180-cal-day.is-avail:hover { border-color: var(--d180-accent2); color: var(--d180-accent2); } .d180-cal-day.is-off { color: var(--d180-muted-fg); opacity: .32; cursor: default; pointer-events: none; } .d180-cal-day.is-selected { background: var(--d180-fg); color: var(--d180-bg); border-color: var(--d180-fg); } .d180-cal-day.is-selected::after { content: ""; position: absolute; inset-inline: .45rem; bottom: .3rem; height: 2px; background: var(--d180-thread); } .d180-slots { margin-top: 1.5rem; } .d180-slots-label { font-size: .85rem; font-weight: 600; color: var(--d180-muted-fg); margin-bottom: .9rem; display: block; } .d180-slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .6rem; } .d180-slot { padding: .7rem .5rem; background: transparent; border: 1px solid var(--d180-border); color: var(--d180-fg); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; direction: ltr; transition: var(--d180-transition); } .d180-slot:hover { border-color: var(--d180-accent2); color: var(--d180-accent2); } .d180-slot.is-selected { background: var(--d180-accent); color: var(--d180-accent-fg); border-color: var(--d180-accent); } .d180-slot.is-off { opacity: .3; pointer-events: none; text-decoration: line-through; } .d180-book-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 1.75rem; } .d180-book-pick { font-size: .95rem; color: var(--d180-muted-fg); } .d180-book-pick b { color: var(--d180-fg); } /* booked screen date */ .d180-booked-when { font-family: var(--d180-font-display); font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--d180-accent); margin: 1.5rem auto 2rem; display: inline-block; --d180-thread-off: -10px; } /* --------------------------------------------------------------------- §A9 APP UTILITIES — noscript, resume banner, screen scrollbars --------------------------------------------------------------------- */ .d180-app-noscript { position: relative; z-index: 6; max-width: 34rem; margin: 4rem auto; padding: 2rem; border: 1px solid var(--d180-border); text-align: center; color: var(--d180-fg); } /* stage scrollbar (subtle) */ .d180-app-stage::-webkit-scrollbar { width: 8px; } .d180-app-stage::-webkit-scrollbar-thumb { background: rgba(28,22,19,.2); } .d180-app-stage { scrollbar-width: thin; scrollbar-color: rgba(28,22,19,.22) transparent; } /* --------------------------------------------------------------------- §13b CUSTOM CURSOR — Kurosawa-grade pointer: a yellow dot with a trailing ring that widens over anything interactive. Fine pointers only; never under prefers-reduced-motion (JS guards both). --------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { body.d180-cursor-on, body.d180-cursor-on a, body.d180-cursor-on button, body.d180-cursor-on input, body.d180-cursor-on select, body.d180-cursor-on textarea, body.d180-cursor-on [role="button"] { cursor: none; } } .d180-cursor-dot, .d180-cursor-ring { /* v1.0.1: فوق كل طبقات Elementor والثيم — عنصران بلا أي تفاعل */ position: fixed; top: 0; left: 0; z-index: 99998; pointer-events: none; will-change: transform; display: none; } body.d180-cursor-on .d180-cursor-dot, body.d180-cursor-on .d180-cursor-ring { display: block; } .d180-cursor-dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--d180-accent2); } .d180-cursor-ring { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid rgba(28, 22, 19, .35); transition: width .25s var(--d180-ease-enter), height .25s var(--d180-ease-enter), border-color .25s; } body.d180-cursor-hover .d180-cursor-ring { width: 3.4rem; height: 3.4rem; border-color: var(--d180-accent2); } /* reel position counter — Kurosawa's 01/03 language */ .d180-reel-count { font-size: .8rem; font-weight: 600; color: var(--d180-muted-fg); white-space: nowrap; direction: ltr; unicode-bidi: bidi-override; } .d180-reel-count b { color: var(--d180-fg); font-weight: 700; } /* --------------------------------------------------------------------- §14 PAPER SCOPE — one section steps into the light. Scoped token overrides: everything inside keeps reading tokens and simply adapts. Applied to: قصص نجاح عملائنا (the white gallery for real work). --------------------------------------------------------------------- */ .d180-paper-scope { --d180-fg: #131211; --d180-card-fg: #131211; --d180-muted-fg: #57534A; --d180-border: rgba(19, 18, 17, .18); --d180-card: #FFFFFF; --d180-muted: #DDD9CE; --d180-accent2: #A87F07; /* yellow deepens to gold for text on paper */ --d180-money: #A87F07; background: var(--d180-paper); color: var(--d180-fg); } .d180-paper-scope .d180-piece-frame { box-shadow: 0 22px 48px -26px rgba(19,18,17,.35); } .d180-paper-scope .d180-reel-bar { background: var(--d180-primary); } /* --------------------------------------------------------------------- §15 MENU CLOSE — an explicit, labelled X inside the overlay (the burger still morphs; this one is impossible to miss). --------------------------------------------------------------------- */ .d180-menu-close { position: absolute; top: 1.15rem; inset-inline-end: max(var(--d180-pad), calc((100vw - var(--d180-max)) / 2 + var(--d180-pad))); z-index: 5; display: inline-flex; align-items: center; gap: .6rem; background: transparent; border: 1px solid var(--d180-border); border-radius: var(--d180-radius); color: var(--d180-fg); font: inherit; font-size: .8rem; font-weight: 700; padding: .6rem 1.1rem; border-radius: var(--d180-radius-btn); cursor: pointer; transition: color .3s, border-color .3s, background .3s; } .d180-menu-close svg { width: 1rem; height: 1rem; } .d180-menu-close:hover { border-color: var(--d180-primary); color: #FFFFFF; background: var(--d180-red-fill); } /* --------------------------------------------------------------------- §M MOBILE POLISH — v8.7.0 (client: «لازم يكون مناسب للموبايل») Type steps down, paddings tighten, the launcher stacks, taps stay fat. --------------------------------------------------------------------- */ @media (max-width: 560px) { /* hero: compact and calm */ .d180-hero { padding-block: 3.5rem 4.5rem; min-height: auto; } .d180-hero-title { font-size: 1.4rem; line-height: 1.5; } /* client: the hero drag bar steps down on mobile */ .d180-hero-slide { height: 3.4rem; margin-top: 2rem; width: min(21rem, 100%); } .d180-slide-knob { width: 2.7rem; height: 2.7rem; top: .32rem; inset-inline-start: .32rem; } .d180-slide-knob svg { width: 1.15rem; height: 1.15rem; } .d180-slide-label { padding-inline: 3.9rem 1.2rem; font-size: .88rem; } /* client: the from-line is ONE line, always */ .d180-hero-from { display: block; font-size: .8rem; margin-top: 1.4rem; white-space: nowrap; } .d180-hero-from::before, .d180-hero-from::after { display: none; } .d180-from-val { font-size: 1.1em; } .d180-slide-label { font-size: .95rem; } /* the launcher stacks: text block, then a full-width action */ .d180-calc-lead { flex-direction: column; text-align: center; gap: .8rem; padding: 1.6rem 1.25rem; } .d180-calc-lead-tx { align-items: center; } .d180-calc-lead-tx strong { font-size: 1.4rem; line-height: 1.35; } .d180-calc-lead-tx span { font-size: .9rem; } /* buttons: comfortable thumb targets */ .d180-btn { padding: .9rem 1.5rem; } .d180-q-nav .d180-q-next { padding: 1.05rem 1.5rem; } /* included section rows */ .d180-included { padding-block: 3.2rem 3.8rem; } .d180-included-item { padding: .95rem 1.05rem; gap: .85rem; } .d180-included-item p { font-size: .92rem; line-height: 1.7; } .d180-included-ico svg { width: 1.35rem; height: 1.35rem; } /* FAQ rows */ .d180-faq-q { padding: .85rem .9rem; gap: .75rem; } .d180-faq-qtext { font-size: .98rem; } .d180-faq-ico { width: 2.25rem; height: 2.25rem; } .d180-faq-ico svg { width: 1.05rem; height: 1.05rem; } /* client v8.7.6: «صغر القائمة دي على الموبايل شويتين تلاتة اربعة» — the overlay menu steps WAY down on phones: smaller links, tighter rows, and the /02 index can never break vertically again. */ .d180-mobile-menu { padding: 5rem var(--d180-pad) 1.5rem; } .d180-menu-link { font-size: 1.45rem; line-height: 1.4; padding: .95rem .25rem; gap: .85rem; } .d180-menu-link .d180-index { font-size: .7rem; flex: none; white-space: nowrap; } .d180-menu-foot { padding-top: 1.8rem; gap: .9rem 1.25rem; } .d180-menu-foot .d180-btn { padding: .8rem 1.3rem; font-size: .88rem; } .d180-menu-meta { gap: .9rem; font-size: .78rem; } } @media (max-width: 480px) { /* question screens */ .d180-q-options.is-bool { grid-template-columns: minmax(0, 1fr); } .d180-q-title { font-size: 1.4rem; line-height: 1.45; } .d180-q-hint { font-size: .82rem; margin-bottom: 1.4rem; } .d180-meter-num { font-size: 1.8rem; } .d180-opt { padding: .75rem .85rem .7rem; padding-inline-end: 2.4rem; gap: .6rem; min-height: 4rem; } .d180-opt-ico { width: 2.2rem; height: 2.2rem; } .d180-opt-ico svg { width: 1.1rem; height: 1.1rem; } .d180-opt-label { font-size: .9rem; } .is-list .d180-opt-label { font-size: .82rem; line-height: 1.45; } .is-list .d180-opt { min-height: 3.2rem; padding: .55rem .75rem; padding-inline-end: 2.2rem; gap: .6rem; } .is-list .d180-opt-ico { width: 2rem; height: 2rem; } .is-list .d180-opt-ico svg { width: 1rem; height: 1rem; } .d180-opt-sub { font-size: .7rem; } .d180-opt-price b { font-size: 1rem; } .d180-opt-radio { top: .75rem; inset-inline-end: .7rem; width: 1.05rem; height: 1.05rem; } .is-list .d180-opt-radio { top: 50%; margin-top: -.53rem; } .d180-sum-title { font-size: 1.5rem; } /* client: summary rows compact — no 3-line values, no airy gaps */ .d180-sum-row { gap: .7rem; padding: .7rem .1rem; } .d180-sum-key { min-width: 5.2rem; font-size: .72rem; } .d180-sum-val { font-size: .84rem; line-height: 1.55; } .d180-sum-price { font-size: .78rem; } .d180-sum-sub { font-size: .85rem; margin-bottom: 1.5rem; } .d180-count-input { font-size: 1.6rem; } .d180-count-step { width: 2.3rem; height: 2.3rem; } .d180-pay-help-title { font-size: 1.05rem; } .d180-pay-help-sub { font-size: .76rem; } .d180-paylogo { min-height: 2.2rem; padding: .3rem .75rem; } /* section heads across the page */ .d180-section-head.d180-section-head .d180-section-title { font-size: 1.7rem; } } /* ===================================================================== */ /* ============ END widgets.css ====================================== */ /* ===================================================================== */ /* ===================================================================== WP COMPOSITION LAYER — الهيرو والحائط ويدجتان منفصلتان في إليمنتور؛ هذا البلوك يعيد كانفس الافتتاحية المتصلة بينهما كما في الأصل. ===================================================================== */ .d180-opening--hero { background: #F9F7F1; } .d180-opening--hero .d180-opening-media, .d180-opening--hero .d180-opening-scrim { z-index: 0; } .d180-showcase.d180-showcase { background: linear-gradient(180deg, #F9F7F1 0%, #F9F7F1 55%, #FCFBF8 100%); } /* حاويات إليمنتور شفافة تمامًا حول ويدجتاتنا */ .elementor-widget-d180-hero .elementor-widget-container, .elementor-widget-d180-showcase .elementor-widget-container { background: transparent; } /* wrapper الأكورديون — سلوكه الافتراضي، مثبت صراحة */ .d180-faq-list { display: block; min-width: 0; } /* ===================================================================== §BK — صفحة حجز الاجتماع بعد الدفع (v1.0.18) ===================================================================== */ /* واجهة الحجز المستقلة فوق الكانفس العاجية */ .d180-bookonly { padding-block: clamp(.5rem, 1.6vw, 1rem) clamp(3rem, 7vw, 5rem); background: var(--d180-bg); } .d180-bookonly .d180-calc-shell { max-width: 56rem; margin-inline: auto; } .d180-bookonly .d180-calc-panel { min-height: 20rem; } .d180-book-loading { text-align: center; padding: 3.5rem 1.5rem; color: var(--d180-muted-fg); } .d180-book-loading p { margin: 1rem 0 0; font-weight: 600; } .d180-book-loading .d180-spin { width: 2rem; height: 2rem; display: inline-block; vertical-align: middle; border: 2.5px solid rgba(160,32,30,.2); border-top-color: var(--d180-accent2); border-radius: 50%; animation: d180spin .7s linear infinite; } @keyframes d180spin { to { transform: rotate(360deg); } } /* بطاقة «بعد الدفع فقط» */ .d180-bookdenied { padding-block: clamp(.5rem, 1.6vw, 1rem) clamp(3rem, 7vw, 5rem); background: var(--d180-bg); } .d180-bookdenied-card { max-width: 34rem; margin-inline: auto; text-align: center; background: #FFFFFF; border: 1px solid rgba(28,22,19,.12); border-radius: var(--d180-radius-soft); padding: clamp(2rem, 5vw, 3rem); box-shadow: 0 30px 70px -42px rgba(28,22,19,.35); } .d180-bookdenied-ico { display: inline-flex; width: 3.4rem; height: 3.4rem; border-radius: 50%; align-items: center; justify-content: center; color: var(--d180-accent2); background: radial-gradient(120% 120% at 32% 26%, #FFFFFF 0%, var(--d180-accent2-soft) 100%); box-shadow: inset 0 0 0 1px rgba(160,32,30,.16); margin-bottom: 1.1rem; } .d180-bookdenied-ico svg { width: 1.6rem; height: 1.6rem; } .d180-bookdenied-card h2 { font-family: var(--d180-font-display); font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 .8rem; } .d180-bookdenied-card p { color: var(--d180-muted-fg); line-height: 1.9; margin: 0 0 1.6rem; } /* v1.0.28 — «جارٍ تأكيد دفعك» و«الدفع لم يكتمل»: نفس البطاقة بحالتيها */ .d180-bookwait-ico .d180-spin { width: 1.7rem; height: 1.7rem; display: block; border: 2.5px solid rgba(160,32,30,.2); border-top-color: var(--d180-accent2); border-radius: 50%; animation: d180spin .7s linear infinite; } .d180-bookwait-ico.is-idle .d180-spin { animation: none; border-top-color: rgba(160,32,30,.2); } .d180-bookwait-late { margin-top: .4rem; padding-top: 1.4rem; border-top: 1px solid rgba(28,22,19,.1); } .d180-bookwait-late[hidden] { display: none; } .d180-bookwait-voucher { background: var(--d180-accent2-soft, rgba(160,32,30,.06)); border-radius: var(--d180-radius-soft); padding: .9rem 1rem; color: var(--d180-fg) !important; } .d180-bookwait-voucher strong { font-size: 1.25rem; letter-spacing: .06em; } .d180-bookwait-again, a.d180-bookwait-again, button.d180-bookwait-again, button.d180-bookwait-again:hover, button.d180-bookwait-again:focus { display: block; width: fit-content; margin: 1.1rem auto 0; padding: .2rem .3rem; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: .92rem; line-height: 1.6; color: var(--d180-accent2); text-decoration: underline; text-underline-offset: .28em; } .d180-bookwait-again:focus-visible { outline: 2px solid var(--d180-thread); outline-offset: 3px; } .d180-bookfailed-err { color: var(--d180-accent2) !important; font-weight: 700; margin: 1rem 0 0 !important; } .d180-bookfailed-err[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .d180-bookwait-ico .d180-spin { animation-duration: 2.4s; } } /* ===================================================================== §PF — معرض الأعمال (v1.0.19) ===================================================================== */ .d180-portfolio { padding-block: clamp(.5rem, 1.6vw, 1rem) clamp(3.5rem, 8vw, 6rem); background: var(--d180-bg); } .d180-pf-grid { display: grid; gap: clamp(1.1rem, 2.5vw, 1.8rem); grid-template-columns: repeat(1, minmax(0, 1fr)); } @media (min-width: 620px) { .d180-pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .d180-pf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .d180-pf-card { display: flex; flex-direction: column; } .d180-pf-media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 11; border-radius: var(--d180-radius-soft); background: #EDE7DD center/cover no-repeat; box-shadow: 0 24px 54px -34px rgba(28,22,19,.5); border: 1px solid rgba(28,22,19,.08); transition: transform .5s var(--d180-ease-enter), box-shadow .4s; isolation: isolate; } .d180-pf-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(13,12,11,.6) 0%, rgba(13,12,11,0) 48%); opacity: 0; transition: opacity .4s ease; } .d180-pf-media[data-noimg="1"] { background: radial-gradient(120% 120% at 30% 20%, rgba(160,32,30,.14), transparent 60%), repeating-linear-gradient(135deg, #EEE8DE 0 14px, #E7E0D5 14px 28px); } .d180-pf-card:hover .d180-pf-media { transform: translateY(-4px); box-shadow: 0 34px 70px -34px rgba(28,22,19,.6); } .d180-pf-card:hover .d180-pf-media::after { opacity: 1; } .d180-pf-visit { position: absolute; z-index: 2; inset-inline: 1rem; bottom: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: #FFFFFF; color: var(--d180-fg); font-weight: 800; font-size: .92rem; padding: .75rem 1rem; border-radius: var(--d180-radius-btn); box-shadow: 0 14px 30px -12px rgba(0,0,0,.45); opacity: 0; transform: translateY(12px); transition: opacity .4s ease, transform .45s var(--d180-ease-enter); } .d180-pf-visit i { font-style: normal; } .d180-pf-card:hover .d180-pf-visit, .d180-pf-media:focus-visible .d180-pf-visit { opacity: 1; transform: translateY(0); } .d180-pf-info { padding: 1rem .2rem 0; } .d180-pf-row { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .d180-pf-title { font-family: var(--d180-font-display); font-weight: 700; font-size: 1.12rem; margin: 0; color: var(--d180-fg); } .d180-pf-type { flex: none; font-size: .72rem; font-weight: 700; color: var(--d180-accent2); background: var(--d180-accent2-soft); border: 1px solid rgba(160,32,30,.16); border-radius: 999px; padding: .22rem .7rem; } .d180-pf-desc { margin: .55rem 0 0; color: var(--d180-muted-fg); font-size: .88rem; line-height: 1.75; } .d180-pf-empty { text-align: center; color: var(--d180-muted-fg); font-size: 1.05rem; padding: 3rem 1rem; } @media (hover: none) { /* على اللمس: زر الزيارة ظاهر دائمًا */ .d180-pf-visit { opacity: 1; transform: none; } .d180-pf-media::after { opacity: 1; } } /* ===================================================================== §CP — بوابة العميل (تجديدات) (v1.0.20) ===================================================================== */ /* دخول */ .d180-clogin { padding-block: clamp(.5rem,1.6vw,1rem) clamp(3rem,7vw,5rem); background: var(--d180-bg); } .d180-clogin-card { max-width: 30rem; margin-inline: auto; text-align: center; background: #FFFFFF; border: 1px solid rgba(28,22,19,.12); border-radius: var(--d180-radius-soft); padding: clamp(1.8rem,4vw,2.6rem); box-shadow: 0 30px 70px -42px rgba(28,22,19,.35); display: flex; flex-direction: column; align-items: center; gap: .3rem; } .d180-clogin-card h2 { font-family: var(--d180-font-display); font-size: 1.4rem; margin: 0 0 .2rem; } .d180-clogin-card > p { color: var(--d180-muted-fg); margin: 0 0 1rem; font-size: .95rem; } .d180-clogin-input { width: 100%; text-align: center; font-size: 1.6rem; font-weight: 800; letter-spacing: .5rem; text-transform: uppercase; direction: ltr; padding: .9rem 1rem; margin-bottom: 1rem; border: 1.5px solid rgba(28,22,19,.18); border-radius: var(--d180-radius-btn); background: var(--d180-bg); color: var(--d180-fg); } .d180-clogin-input:focus { outline: none; border-color: var(--d180-accent2); background: #FFF; } .d180-clogin .d180-btn { width: 100%; justify-content: center; } .d180-clogin-err { color: var(--d180-accent2); font-weight: 700; font-size: .9rem; margin: 0 0 .6rem; } .d180-clogin-help { margin-top: 1rem; font-size: .85rem; color: var(--d180-muted-fg); text-decoration: underline; } /* لوحة العميل */ .d180-cportal { padding-block: clamp(.5rem,1.6vw,1rem) clamp(3.5rem,8vw,6rem); background: var(--d180-bg); } .d180-cp-banner { display: flex; flex-direction: column; gap: .2rem; text-align: center; background: linear-gradient(180deg, #F0F8F0, #E8F3E8); border: 1px solid rgba(46,125,50,.3); border-radius: var(--d180-radius-soft); padding: 1.1rem 1.3rem; margin-bottom: 1.8rem; color: #1E5620; } .d180-cp-banner strong { font-size: 1.05rem; } .d180-cp-banner span { font-size: .9rem; color: #2E7D32; } .d180-cp-grid { display: grid; gap: clamp(1rem,2.2vw,1.5rem); grid-template-columns: repeat(1, minmax(0,1fr)); } @media (min-width: 620px) { .d180-cp-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (min-width: 980px) { .d180-cp-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } .d180-cp-card { background: #FFFFFF; border: 1px solid rgba(28,22,19,.1); border-radius: var(--d180-radius-soft); padding: 1.4rem; box-shadow: 0 22px 50px -36px rgba(28,22,19,.4); border-top: 3px solid var(--d180-muted-fg); display: flex; flex-direction: column; } .d180-cp-card.is-active { border-top-color: #2E7D32; } .d180-cp-card.is-soon { border-top-color: #C97A00; } .d180-cp-card.is-expired { border-top-color: #A0201E; } .d180-cp-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; } .d180-cp-ico { width: 2.9rem; height: 2.9rem; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--d180-accent2); background: radial-gradient(120% 120% at 32% 26%, #FFFFFF 0%, var(--d180-accent2-soft) 100%); box-shadow: inset 0 0 0 1px rgba(160,32,30,.16); } .d180-cp-ico svg { width: 1.45rem; height: 1.45rem; } .d180-cp-badge { font-size: .72rem; font-weight: 800; padding: .25rem .7rem; border-radius: 999px; } .d180-cp-badge-active { color: #1E5620; background: rgba(46,125,50,.12); } .d180-cp-badge-soon { color: #8A5400; background: rgba(201,122,0,.14); } .d180-cp-badge-expired { color: #A0201E; background: var(--d180-accent2-soft); } .d180-cp-badge-none { color: var(--d180-muted-fg); background: rgba(28,22,19,.07); } .d180-cp-type { font-family: var(--d180-font-display); font-weight: 700; font-size: 1.2rem; margin: 0 0 .1rem; } .d180-cp-label { color: var(--d180-muted-fg); font-size: .85rem; margin: 0 0 .7rem; word-break: break-word; } .d180-cp-meta { display: flex; flex-direction: column; gap: .2rem; font-size: .9rem; margin-bottom: 1rem; } .d180-cp-date b { font-weight: 800; } .d180-cp-days { color: var(--d180-muted-fg); font-size: .82rem; } .d180-cp-renew { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: .9rem; border-top: 1px dashed rgba(28,22,19,.14); } .d180-cp-price { font-weight: 800; font-size: 1.15rem; color: var(--d180-fg); } .d180-cp-price small { font-size: .75rem; font-weight: 600; color: var(--d180-muted-fg); } .d180-cp-btn { padding: .7rem 1.2rem; font-size: .92rem; } .d180-cp-foot { text-align: center; margin-top: 2rem; color: var(--d180-muted-fg); font-size: .9rem; } .d180-cp-foot a { color: var(--d180-accent2); text-decoration: underline; } /* §CP multi-select (v1.0.21) — تحديد متعدد للتجديد */ .d180-cp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.3rem; } .d180-cp-tools-label { font-family: var(--d180-font-display); font-weight: 700; font-size: 1.15rem; color: var(--d180-fg); margin-inline-end: .5rem; } .d180-cp-tool { font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid rgba(160,32,30,.3); background: #FFF; color: var(--d180-accent2); transition: background .25s, color .25s, border-color .25s; } .d180-cp-tools .d180-cp-tool:focus { background: #FFF; color: var(--d180-accent2); border-color: rgba(160,32,30,.3); } .d180-cp-tools .d180-cp-tool:hover { background: var(--d180-accent2); color: #FFF; border-color: var(--d180-accent2); } .d180-cp-tools .d180-cp-tool.is-ghost, .d180-cp-tools .d180-cp-tool.is-ghost:focus { background: #FFF; border-color: rgba(28,22,19,.2); color: var(--d180-muted-fg); } .d180-cp-tools .d180-cp-tool.is-ghost:hover { background: var(--d180-fg); color: #FFF; border-color: var(--d180-fg); } label.d180-cp-card { cursor: pointer; } .d180-cp-card.is-noren { opacity: .92; } .d180-cp-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .d180-cp-tick { position: relative; margin-inline-start: auto; flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 2px solid rgba(28,22,19,.22); background: #FFF; transition: background .2s, border-color .2s; } .d180-cp-tick::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .2s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-11'/%3E%3C/svg%3E") center / .95rem no-repeat; } .d180-cp-card.is-sel { border-color: var(--d180-accent2); background: #FFF9F8; box-shadow: 0 0 0 2px rgba(160,32,30,.22), 0 24px 54px -34px rgba(160,32,30,.4); } .d180-cp-card.is-sel .d180-cp-tick { background: var(--d180-accent2); border-color: var(--d180-accent2); } .d180-cp-card.is-sel .d180-cp-tick::after { opacity: 1; } .d180-cp-foot-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: auto; padding-top: .9rem; border-top: 1px dashed rgba(28,22,19,.14); } .d180-cp-req { display: none; font-size: .68rem; font-weight: 800; color: #8A5400; background: rgba(201,122,0,.15); padding: .18rem .55rem; border-radius: 999px; } .d180-cp-card.is-locked .d180-cp-req { display: inline-block; } .d180-cp-card.is-locked .d180-cp-tick { background: #C97A00; border-color: #C97A00; } .d180-cp-noren { margin: auto 0 0; padding-top: .8rem; border-top: 1px dashed rgba(28,22,19,.14); font-size: .82rem; color: var(--d180-muted-fg); } /* تنبيه نقل الاستضافة */ .d180-cp-warn { margin-top: 1.4rem; } .d180-cp-warn-in { background: linear-gradient(180deg,#FFF8EC,#FDF1DC); border: 1px solid rgba(201,122,0,.4); border-radius: var(--d180-radius-soft); padding: 1.2rem 1.3rem; color: #6B4600; } .d180-cp-warn-in strong { display: block; font-size: 1.02rem; margin-bottom: .35rem; color: #8A5400; } .d180-cp-warn-in p { margin: 0 0 .9rem; line-height: 1.8; font-size: .92rem; } .d180-cp-warnlbl { display: flex; align-items: flex-start; gap: .6rem; font-weight: 700; cursor: pointer; font-size: .92rem; } .d180-cp-warnlbl input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: #C97A00; flex: none; } .d180-cp-note { margin-top: 1rem; color: var(--d180-accent2); font-weight: 700; font-size: .9rem; text-align: center; } .d180-cp-errbar { background: var(--d180-accent2-soft); border: 1px solid rgba(160,32,30,.3); color: #A0201E; font-weight: 700; border-radius: var(--d180-radius-soft); padding: .9rem 1.2rem; margin-bottom: 1.4rem; text-align: center; } /* شريط الإجمالي */ .d180-cp-bar { position: sticky; bottom: 1rem; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; padding: 1rem 1.3rem; background: #FFFFFF; border: 1px solid rgba(28,22,19,.12); border-radius: var(--d180-radius-soft); box-shadow: 0 24px 54px -28px rgba(28,22,19,.5); } .d180-cp-bar[hidden] { display: none !important; } /* يظهر عند تحديد خدمة فقط */ .d180-cp-bar:not([hidden]) { animation: d180-fade-up .4s var(--d180-ease-enter) both; } .d180-cp-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.4rem; font-size: 1rem; font-weight: 600; color: var(--d180-muted-fg); } .d180-cp-sum b { font-weight: 800; color: var(--d180-fg); } .d180-cp-sum span:last-child b { color: var(--d180-accent2); font-size: 1.2em; } .d180-cp-pay { padding: .85rem 1.8rem; flex: none; } .d180-cp-pay:disabled { opacity: .45; cursor: not-allowed; } /* §PF wall (v1.0.22) — حائط النماذج: نفس كروت الرئيسية، ثابت وقابل للتصفّح */ .d180-pf-wall { column-count: 2; column-gap: clamp(.7rem, 1.6vw, 1.4rem); } @media (min-width: 760px) { .d180-pf-wall { column-count: 3; } } @media (min-width: 1180px) { .d180-pf-wall { column-count: 4; } } .d180-pf-wall .d180-flow-card { width: 100%; height: auto; break-inside: avoid; margin-bottom: clamp(.7rem, 1.6vw, 1.4rem); } .d180-pf-cap { position: absolute; bottom: .85rem; inset-inline-end: .9rem; z-index: 3; max-width: 76%; display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; text-align: end; padding: .5rem .85rem; border-radius: 11px; background: rgba(13,12,11,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .35s ease, transform .4s var(--d180-ease-enter); } .d180-flow-card:hover .d180-pf-cap { opacity: 1; transform: translateY(0); } .d180-pf-cap b { font-family: var(--d180-font-display); font-weight: 700; font-size: 1rem; color: #FFF; line-height: 1.3; } .d180-pf-cap i { font-style: normal; font-size: .72rem; font-weight: 700; color: #E2938F; } /* touch + small cards: the name strip is always on (no hover to reveal it) */ @media (hover: none), (max-width: 759px) { .d180-pf-wall .d180-pf-cap { opacity: 1; transform: none; inset-inline: 0; bottom: 0; max-width: none; border-radius: 0; align-items: flex-start; text-align: start; padding: 1.5rem .7rem .5rem; padding-inline-start: 3.1rem; background: linear-gradient(to top, rgba(13,12,11,.88) 0%, rgba(13,12,11,.55) 55%, rgba(13,12,11,0) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; } /* الاسم حتى سطرين كاملين (لا يُقصّ من أوله)، والوصف سطر واحد */ .d180-pf-wall .d180-pf-cap b { max-width: 100%; font-size: .84rem; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .d180-pf-wall .d180-pf-cap i { max-width: 100%; font-size: .66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d180-pf-wall .d180-flow-go { width: 1.95rem; height: 1.95rem; bottom: .5rem; inset-inline-start: .5rem; } .d180-pf-wall .d180-flow-go svg { width: .9rem; height: .9rem; } .d180-pf-wall .d180-flow-card { border-width: 2px; border-radius: 11px; } } /* the closing invitation under the wall */ .d180-pf-end { margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-top: clamp(2rem, 5vw, 3.25rem); border-top: 1px solid var(--d180-border); display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; } .d180-pf-end .d180-pf-end-title { font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.3; margin: 0; color: var(--d180-fg); } .d180-pf-end .d180-pf-end-title em { font-style: normal; color: var(--d180-accent2); } .d180-pf-end .d180-pf-end-desc { margin: 0 0 .7rem; max-width: 34rem; color: var(--d180-muted-fg); font-size: 1rem; } /* ===================================================================== §PH — هيرو الصفحات الداخلية (v1.0.24): حجز الاجتماع · المعرض · بوابة العميل. هو هيرو الرئيسية نفسه — نفس خط العنوان ومقاسه ولونه، نفس الكلمة الحمراء، نفس سطر التأكيد، ونفس زر السحب — مع فرقين فقط: 1) لا ارتفاع أدنى ولا الفراغ السفلي الذي كان محجوزًا في الرئيسية لحائط قصص النجاح الصاعد داخل الهيرو: السكشن التالي يبدأ تحته مباشرة. 2) فقرة وصف أوفى بين سطر التأكيد والزر. ===================================================================== */ .d180-opening--page .d180-hero { min-height: 0; padding-block: 7rem 3rem; } /* الشبكة تبقى خلف العنوان كله وتذوب عند آخر الهيرو (الأصل يذوّبها مبكرًا لأن الحائط كان يصعد فوقها) */ .d180-opening--page .d180-hero::before { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 9rem), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 9rem), transparent 100%); } .d180-hero-desc { margin: 1.1rem auto 0; max-width: 44rem; font-size: clamp(.95rem, 1.45vw, 1.08rem); font-weight: 500; line-height: 1.95; color: var(--d180-muted-fg); text-wrap: balance; } .d180-hero .d180-hero-desc b { color: var(--d180-fg); font-weight: 700; } .d180-opening--page .d180-hero-slide { margin-top: 2.1rem; } /* زر السحب كرابط: نفس الآلية والشكل، ويعمل حتى بلا JavaScript */ a.d180-hero-slide, a.d180-hero-slide:link, a.d180-hero-slide:visited { display: block; text-decoration: none !important; color: #F1EAE0; -webkit-tap-highlight-color: transparent; } a.d180-hero-slide .d180-slide-knob { color: #FFF; } a.d180-hero-slide .d180-slide-label { color: #F1EAE0; } a.d180-hero-slide:focus-visible { outline: 2px solid var(--d180-thread); outline-offset: 4px; } @media (max-width: 560px) { .d180-opening--page .d180-hero { padding-block: 3.5rem 2rem; } .d180-opening--page .d180-hero::before { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 6rem), transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 6rem), transparent 100%); } .d180-hero-desc { font-size: .9rem; line-height: 1.9; margin-top: .85rem; } .d180-opening--page .d180-hero-slide { margin-top: 1.5rem; } /* شريط الإجمالي على الموبايل: سطر واحد مضغوط */ .d180-cp-bar { flex-wrap: nowrap; padding: .75rem .85rem; gap: .7rem; bottom: .6rem; } .d180-cp-sum { flex-direction: column; gap: 0; font-size: .82rem; line-height: 1.6; } .d180-cp-pay { padding: .8rem 1.05rem; font-size: .84rem; } .d180-cp-tools-label { flex-basis: 100%; font-size: 1.05rem; } /* أيام الأسبوع في التقويم لا تنكسر على سطرين */ .d180-cal { padding: 1rem .7rem; } .d180-cal-dow { font-size: .58rem; white-space: nowrap; overflow: hidden; } } /* ===================================================================== §WK — صفحة «أعمالنا»: الشاشة + السجل (v1.0.25 · بلا ترقيم منذ v1.0.27) شاشة عرض كبيرة (إطار متصفح) تبقى ثابتة أمام الزائر وتعرض الموقع النشط، وبجانبها سجل بأسماء العملاء بخط العرض — كقائمة الموقع الكبيرة. النزول في الصفحة أو الوقوف على اسم يبدّل الشاشة. بلا JavaScript: السجل روابط كاملة بمصغّراتها والشاشة تعرض أول عمل. لا تمرير مخطوف ولا تخطيط محسوب بالسكربت. ===================================================================== */ .d180-portfolio { overflow: visible; } /* الشاشة اللاصقة تحتاج سلفًا لا يمرّر */ @supports (overflow: clip) { .d180-portfolio { overflow-x: clip; } } .d180-wk { --wk-top: 4.75rem; /* ارتفاع الهيدر اللاصق */ --wk-pad: var(--d180-pad); position: relative; display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { .d180-wk { --wk-pad: var(--d180-pad-lg); } } body.admin-bar .d180-wk { --wk-top: calc(4.75rem + 32px); } @media (max-width: 782px) { body.admin-bar .d180-wk { --wk-top: calc(4.75rem + 46px); } } /* ---------------- الشاشة ---------------- */ .d180-wk-stage { position: sticky; top: var(--wk-top); z-index: 6; margin-inline: calc(var(--wk-pad) * -1); padding: .9rem var(--wk-pad) .8rem; background: var(--d180-bg); box-shadow: 0 18px 22px -20px rgba(28, 22, 19, .34); } .d180-wk-frame { position: relative; margin-inline: auto; max-width: max(13rem, min(100%, calc((100svh - var(--wk-top) - 19rem) * 1.6))); } .d180-wk-screen { position: relative; z-index: 1; overflow: hidden; border: 3px solid rgba(160, 32, 30, .88); border-radius: 14px; background: var(--d180-ink); box-shadow: 0 30px 60px -34px rgba(28, 22, 19, .6); } .d180-wk-bar { display: flex; align-items: center; gap: .75rem; height: 2.15rem; padding: 0 .85rem; background: #171310; direction: ltr; } .d180-wk-dots { display: inline-flex; gap: .34rem; flex: none; } .d180-wk-dots i { width: .5rem; height: .5rem; border-radius: 50%; background: rgba(237, 234, 224, .22); } .d180-wk-dots i:first-child { background: var(--d180-primary); } .d180-wk-url { flex: 1; min-width: 0; text-align: center; font-family: var(--d180-font); font-size: .7rem; font-weight: 600; line-height: 1.5; color: var(--d180-ink-muted); background: rgba(237, 234, 224, .07); border-radius: 999px; padding: .12rem .9rem; direction: ltr; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d180-wk-view, a.d180-wk-view { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--d180-ink); color: #EDEAE0; text-decoration: none; } /* v1.0.26 — الصورة تملأ إطار الشاشة بالظبط. المحدِّد مزدوج عمدًا: قاعدة الوسائط العامة (§1d: ‎height:auto‎ لكل صورة داخل d180-*) أقوى من كلاس واحد، وكانت تُسقط ارتفاع الصورة فتخرج من إطارها بلا ضبط ولا قص محسوب. */ .d180-wk-view .d180-wk-shot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: 50% 0; /* من أعلى الموقع */ transform-origin: 100% 0; /* ‎--fit‎ يقص الهامش الأبيض يسار اللقطة — كالرئيسية */ opacity: 0; transform: scale(calc(var(--fit, 1) * 1.035)); transition: opacity .5s ease, transform .9s var(--d180-ease-enter); } .d180-wk-view .d180-wk-shot.is-on { opacity: 1; transform: scale(var(--fit, 1)); } /* v1.0.27 — لقطة الخدمة قد تأتي أعرض من الشاشة: الزائد فراغ خارج الموقع (يسار المواقع العربية، يمين الإنجليزية). تثبيتها من ناحية المحتوى يُسقط الفراغ خارج الإطار ويُبقي الموقع كاملًا — بلا تكبير ولا قص من المحتوى. */ .d180-wk-view .d180-wk-shot.is-rtl { object-position: 100% 0; } .d180-wk-view .d180-wk-shot.is-ltr { object-position: 0 0; } /* صورة أعرض من الشاشة (لقطة 16:9 مثلًا): تظهر كاملة بلا أي قص، والفراغ فوقها وتحتها بلون شريط المتصفح نفسه */ .d180-wk-view .d180-wk-shot.is-fit { object-fit: contain; object-position: 50% 50%; background: #171310; } /* صورة أطول من الشاشة (صفحة كاملة، موبايل): عرضها كامل، والشاشة تنزل فيها على مهل من أعلى الموقع لآخره ثم تعود لأوله — فلا يضيع منها شيء. الوقوف عليها يوقفها. */ .d180-wk-view .d180-wk-shot.is-tour.is-on { animation: d180-wk-tour var(--wk-tour, 12s) cubic-bezier(.45, 0, .55, 1) 1.2s 2 alternate both; } .d180-wk-view:hover .d180-wk-shot.is-tour { animation-play-state: paused; } @keyframes d180-wk-tour { 0%, 7% { object-position: 50% 0; } 93%, 100% { object-position: 50% 100%; } } /* غلاف نصّي إلى أن تجهز اللقطة الحية */ .d180-wk-cover { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: .4rem; padding: 8% 9%; direction: rtl; text-align: right; background: var(--cov-bg, #0D0C0B); color: var(--cov-fg, #EDEAE0); } .d180-wk-cover em { font-style: normal; font-size: .8rem; font-weight: 700; color: var(--cov-accent, #E2938F); } .d180-wk-cover strong { font-family: var(--d180-font-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.8rem); line-height: 1.35; } .d180-wk-meta { position: relative; z-index: 1; display: flex; align-items: center; gap: .8rem; margin-top: .75rem; } /* v1.0.27 — لا ترقيم ولا عدد في الصفحة. القاعدة تُخفيهما أيضًا لو وصلت نسخة قديمة مخزَّنة من الصفحة (كاش) ما زالت تحملهما */ .d180-wk-num, .d180-wk-big, .d180-wk-count { display: none !important; } .d180-wk-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; } .d180-wk-title strong { font-family: var(--d180-font-display); font-weight: 700; font-size: 1.12rem; line-height: 1.4; color: var(--d180-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d180-wk-title span { font-size: .72rem; font-weight: 700; color: var(--d180-muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .d180-wk-visit { display: none; flex: none; } .d180-wk-progress { display: block; height: 2px; margin-top: .7rem; background: rgba(28, 22, 19, .1); overflow: hidden; } .d180-wk-progress i { display: block; height: 100%; background: var(--d180-thread); transform-origin: 100% 50%; /* RTL: يمتد من اليمين */ transition: transform .5s var(--d180-ease-enter); } /* ---------------- السجل ---------------- */ .d180-wk-list { list-style: none; margin: 0; padding: 0; } .d180-wk-item { border-top: 1px solid var(--d180-border); } .d180-wk-item:last-child { border-bottom: 1px solid var(--d180-border); } .d180-wk-row, a.d180-wk-row, a.d180-wk-row:link, a.d180-wk-row:visited, a.d180-wk-row:hover, a.d180-wk-row:focus { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 4rem 2rem; align-items: center; gap: .8rem; padding: .8rem .1rem; color: rgba(28, 22, 19, .42); text-decoration: none; transition: color .35s ease, padding .4s var(--d180-ease-enter); } /* الخيط الأحمر يُرسم تحت السطر النشط */ .d180-wk-row::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--d180-thread); transform: scaleX(0); transform-origin: 100% 50%; transition: transform .55s var(--d180-ease-enter); } .d180-wk-text { min-width: 0; display: flex; flex-direction: column; gap: .02rem; } .d180-wk-name { font-family: var(--d180-font-display); font-weight: 700; font-size: 1.14rem; line-height: 1.45; color: inherit; } .d180-wk-cat { font-size: .7rem; font-weight: 700; color: var(--d180-muted-fg); opacity: .8; transition: color .35s ease, opacity .35s ease; } .d180-wk-thumb { width: 4rem; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; border: 1.5px solid rgba(160, 32, 30, .3); filter: grayscale(1); opacity: .6; transition: filter .4s ease, opacity .4s ease, border-color .4s ease; } /* المصغّرة تملأ إطارها دائمًا — أيًّا كانت قواعد القالب للصور */ .d180-wk-thumb.d180-shot-pan img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 0; transform: scale(var(--fit, 1)); transform-origin: 100% 0; } /* لقطة الخدمة: مثبّتة من ناحية المحتوى فيسقط الفراغ الجانبي خارج المصغّرة (كالشاشة) */ .d180-wk-thumb.is-rtl img[data-shot-live] { object-position: 100% 0; transform: none; } .d180-wk-thumb.is-ltr img[data-shot-live] { object-position: 0 0; transform: none; } .d180-wk-thumb .d180-cover { padding: 0; gap: 0; align-items: center; justify-content: center; } .d180-wk-thumb .d180-cover b { font-family: var(--d180-font-display); font-weight: 700; font-size: 1.05rem; line-height: 1; } .d180-wk-thumb .d180-cover::before { display: none; } .d180-wk-go { width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--d180-border); color: inherit; transition: background .35s ease, border-color .35s ease, color .35s ease, transform .4s var(--d180-ease-enter); } .d180-wk-go svg { width: .9rem; height: .9rem; } .d180-wk-item.is-active .d180-wk-row, .d180-wk-item.is-active a.d180-wk-row:link, .d180-wk-item.is-active a.d180-wk-row:visited, .d180-wk-item.is-active a.d180-wk-row:hover, .d180-wk-item.is-active a.d180-wk-row:focus { color: var(--d180-fg); padding-inline-start: .7rem; } .d180-wk-item.is-active .d180-wk-row::after { transform: scaleX(1); } .d180-wk-item.is-active .d180-wk-cat { color: var(--d180-accent2); opacity: 1; } .d180-wk-item.is-active .d180-wk-thumb { filter: none; opacity: 1; border-color: var(--d180-accent2); } .d180-wk-item.is-active .d180-wk-go { background: var(--d180-primary); border-color: var(--d180-primary); color: #FFF; transform: scale(1.06); } a.d180-wk-row:focus-visible { outline: 2px solid var(--d180-thread); outline-offset: 2px; } /* تابلت (الشاشة فوق السجل): الإطار لا يتمدّد بعرض الصفحة كله فيبقى للسجل مكانه */ @media (min-width: 600px) and (max-width: 979px) { .d180-wk-frame { max-width: max(13rem, min(34rem, calc((100svh - var(--wk-top) - 19rem) * 1.6))); } .d180-wk-meta { max-width: 34rem; margin-inline: auto; } .d180-wk-progress { max-width: 34rem; margin-inline: auto; } } /* شاشات قصيرة جدًا (موبايل بالعرض): الشاشة لا تلتصق حتى لا تحجب السجل */ @media (max-height: 520px) and (max-width: 979px) { .d180-wk-stage { position: static; } } /* ---------------- ديسكتوب: السجل يمين، والشاشة ثابتة يسار ---------------- */ @media (min-width: 980px) { .d180-wk { --wk-top: 5.25rem; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); column-gap: clamp(2.5rem, 5vw, 5.5rem); align-items: start; } body.admin-bar .d180-wk { --wk-top: calc(5.25rem + 32px); } .d180-wk-list { order: 1; } .d180-wk-stage { order: 2; margin: 0; padding: 1.1rem 0 0 16px; background: transparent; box-shadow: none; } .d180-wk-frame { margin-inline: 0; max-width: min(100%, calc((100svh - var(--wk-top) - 12.85rem) * 1.6)); } /* إطار ثانٍ مزاح خلف الشاشة: عمق مطبوع */ .d180-wk-frame::before { content: ""; position: absolute; inset: 0; z-index: 0; border: 2px solid rgba(160, 32, 30, .38); border-radius: 14px; transform: translate(-16px, 16px); } .d180-wk-bar { height: 2.4rem; } .d180-wk-url { font-size: .74rem; } .d180-wk-meta { margin-top: 2.2rem; gap: 1.2rem; } .d180-wk-title { gap: .1rem; } .d180-wk-title strong { font-size: clamp(1.35rem, 2vw, 1.8rem); } .d180-wk-title span { font-size: .84rem; color: var(--d180-accent2); } .d180-wk-visit { display: inline-flex; } .d180-wk-progress { margin-top: 1.3rem; } .d180-wk-row, a.d180-wk-row, a.d180-wk-row:link, a.d180-wk-row:visited, a.d180-wk-row:hover, a.d180-wk-row:focus { grid-template-columns: minmax(0, 1fr) 5.2rem 2.4rem; gap: 1.1rem; padding: 1.02rem .25rem; } .d180-wk-name { font-size: clamp(1.3rem, 1.9vw, 1.85rem); line-height: 1.4; } .d180-wk-cat { font-size: .78rem; } .d180-wk-thumb { width: 5.2rem; } .d180-wk-go { width: 2.4rem; height: 2.4rem; } .d180-wk-go svg { width: 1rem; height: 1rem; } .d180-wk-item.is-active .d180-wk-row, .d180-wk-item.is-active a.d180-wk-row:link, .d180-wk-item.is-active a.d180-wk-row:visited, .d180-wk-item.is-active a.d180-wk-row:hover, .d180-wk-item.is-active a.d180-wk-row:focus { padding-inline-start: 1.1rem; } } @media (prefers-reduced-motion: reduce) { .d180-wk-shot, .d180-wk-row, .d180-wk-row::after, .d180-wk-progress i, .d180-wk-thumb, .d180-wk-go { transition: none !important; } .d180-wk-view .d180-wk-shot, .d180-wk-view .d180-wk-shot.is-on { transform: scale(var(--fit, 1)); } .d180-wk-view .d180-wk-shot.is-tour.is-on { animation: none; } }