في DOM) ⇒ المحتوى فوقه دائماً. شفافيته تتبع العمق: خفيف عند الهيرو (لا يزاحم الفيديو) وكامل في الأعماق. ========================================================================== */ .scene3d { position: fixed; inset: 0; z-index: -1; pointer-events: none; width: 100%; height: 100%; display: block; opacity: calc(0.34 + var(--depth, 0) * 0.66); transition: opacity 0.6s linear; } .scene3d[hidden] { display: none; } /* حين ينجح WebGL تُطفأ نسخة v3 ثنائية الأبعاد (كانفاس الفقاعات + ظلال SVG)، ويبقى شريط العمق والريبل والتيكر كما اعتمدت v3. */ .webgl .dive__bubbles, .webgl .dive__life { display: none; } .dive { position: fixed; inset: 0; z-index: 0; pointer-events: none; } .dive__bubbles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: calc(0.25 + var(--depth) * 0.6); } .dive__life { position: absolute; inset: 0; overflow: hidden; } /* left فيزيائي عمداً: الحركة بـtranslateX بوحدات vw، والموضع الابتدائي في RTL يبدأ من الحافة اليمنى فتخرج الأشكال خارج الشاشة إن تُرك auto. */ .dive__shape { position: absolute; left: 0; fill: #12384c; opacity: 0; will-change: transform; } .dive__shape--fish { width: 130px; top: 22%; opacity: calc(var(--depth) * 0.85); filter: blur(1.5px); animation: driftEnd 78s linear infinite; } .dive__shape--turtle { width: 210px; top: 54%; opacity: calc(var(--depth) * 0.75); filter: blur(3px); animation: driftStart 122s linear infinite; animation-delay: -30s; } .dive__shape--fish2 { width: 76px; top: 74%; opacity: calc(var(--depth) * 0.7); filter: blur(0.8px); animation: driftEnd 54s linear infinite; animation-delay: -20s; } @keyframes driftEnd { from { transform: translateX(115vw) scaleX(-1); } to { transform: translateX(-25vw) scaleX(-1); } } @keyframes driftStart { from { transform: translateX(-30vw); } to { transform: translateX(120vw); } } .rail { position: fixed; inset-inline-end: 14px; top: 50%; translate: 0 -50%; z-index: 60; display: grid; justify-items: center; gap: 0.5rem; pointer-events: none; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; color: var(--text-dim); opacity: calc(0.25 + var(--depth) * 0.75); } .rail__cap { opacity: 0.75; } .rail__track { position: relative; width: 2px; height: 30vh; max-height: 220px; border-radius: 2px; background: rgba(111,231,242,.14); } .rail__fill { position: absolute; inset-inline: 0; top: 0; height: 0; border-radius: 2px; background: linear-gradient(to bottom, var(--cyan), var(--teal)); } .rail__dot { position: absolute; inset-inline-start: 50%; top: 0; width: 9px; height: 9px; margin-inline-start: -4.5px; margin-top: -4.5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(216,181,109,.18), 0 0 14px 2px rgba(216,181,109,.5); } .rail__read { font-family: var(--font-num); color: var(--cyan); font-size: 0.72rem; margin-top: 0.25rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(0,167,181,.12); } /* ========================================================================== hero */ .hero { position: relative; display: flex; flex-direction: column; justify-content: center; /* سقف للارتفاع: الهيرو لا يتضخم على الشاشات الطويلة جداً (ولا في الرندر الساكن) */ min-height: min(92vh, 900px); padding: 7rem 0 6.5rem; isolation: isolate; overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: -1; } .hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } .js .hero__img { transform: scale(1.05); animation: heroDrift 26s var(--ease-wave) infinite alternate; } @keyframes heroDrift { from { transform: scale(1.05) translateY(0); } to { transform: scale(1.1) translateY(-1.4%); } } /* v3 — فيديو الهيرو: فوق الصورة، يظهر بتلاشٍ عند بدء التشغيل. الصورة تبقى تحته كسقوط آمن. */ .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; transition: opacity 1.1s var(--ease-out); transform: scale(1.04); } .hero__video.is-playing { opacity: 1; } .hero__ripple { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; opacity: 0.9; } .hero__waves { position: absolute; inset-inline: 0; bottom: -2px; width: 100%; height: 26%; mix-blend-mode: screen; opacity: 0.85; } .hero__vignette { position: absolute; inset: 0; background: linear-gradient(to top, var(--ink) 4%, rgba(3,25,35,.62) 30%, rgba(3,25,35,.22) 58%, rgba(3,25,35,.5)); } .hero__content { position: relative; max-width: 880px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.92rem; color: var(--cyan); background: rgba(3,25,35,.5); border: 1px solid rgba(111,231,242,.25); padding: 0.42rem 1rem; border-radius: 999px; margin-bottom: 1rem; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hero__eyebrow .ic { color: var(--gold); } .hero__title { font-size: clamp(1.75rem, 3.5vw, 2.85rem); font-weight: 700; line-height: 1.28; color: var(--inktext); margin-bottom: 0.9rem; text-shadow: 0 3px 22px rgba(3,25,35,.85), 0 1px 4px rgba(3,25,35,.9); max-width: 24ch; } .hero__sub { font-size: clamp(0.98rem, 1.3vw, 1.12rem); color: #cfe2ea; max-width: 54ch; margin-bottom: 1.4rem; text-shadow: 0 2px 14px rgba(3,25,35,.85); } /* search box */ .search { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr auto; gap: 0.7rem; background: rgba(6, 42, 58, 0.66); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 0.9rem; box-shadow: var(--shadow); max-width: 1020px; } .search__field { display: grid; gap: 0.3rem; align-content: start; } .search__field label { font-size: 0.78rem; font-weight: 700; color: var(--gold); padding-inline-start: 0.85rem; } .search__control { position: relative; display: flex; align-items: center; gap: 0.5rem; background: rgba(3, 25, 35, 0.55); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 0.85rem; transition: border-color 0.25s, box-shadow 0.25s; } .search__control:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,167,181,.18); } .search__control .ic { color: var(--cyan); opacity: 0.9; } .search__control select, .search__control input { width: 100%; border: 0; background: transparent; color: var(--inktext); font-size: 0.98rem; padding: 0.8rem 0; outline: none; } .search__control select { appearance: none; cursor: pointer; padding-inline-end: 1.3rem; } .search__control select option { color: #10202f; background: var(--cream); } .search__control input[type="date"] { color-scheme: dark; cursor: pointer; font-family: var(--font-num); } .search__control:has(select)::after { content: ""; position: absolute; inset-inline-end: 0.9rem; top: 50%; width: 8px; height: 8px; pointer-events: none; border-inline-end: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: translateY(-70%) rotate(45deg); } .search__submit { align-self: end; min-height: 52px; } /* results */ .results { max-width: 1020px; margin-top: 1rem; animation: resultsIn 0.5s var(--ease-out); } @keyframes resultsIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .results__bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; padding-inline: 0.3rem; } .results__count { font-weight: 700; color: var(--inktext); } .results__count strong { color: var(--gold); font-family: var(--font-num); } .results__hint { font-size: 0.85rem; color: var(--text-dim); } .results__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; } .rcard { background: rgba(8, 47, 66, 0.92); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.15rem; display: grid; gap: 0.5rem; transition: transform 0.3s var(--ease-out), border-color 0.3s; } .rcard:hover { transform: translateY(-4px); border-color: var(--line-gold); } /* v3 — دخول متدرّج لبطاقات النتائج (خاصية translate المستقلة، حتى لا تُصادر transform) */ .rcard { animation: cardIn 0.6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms); } @keyframes cardIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } } .rcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; } .rcard__title { font-size: 1.06rem; color: var(--inktext); font-family: var(--font-ui); font-weight: 700; line-height: 1.5; } .rcard__badge { font-size: 0.72rem; font-weight: 700; color: var(--on-gold); background: linear-gradient(135deg, #e5c98e, var(--gold)); padding: 0.2rem 0.6rem; border-radius: 999px; white-space: nowrap; } .rcard__badge--coral { background: var(--coral); color: #2b0d06; } .rcard__badge--teal { background: linear-gradient(135deg, var(--cyan), var(--teal)); color: #02222a; } .rcard__verified { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--cyan); } .rcard__verified .ic { width: 1.05em; height: 1.05em; } .rcard__meta { font-size: 0.86rem; color: var(--text-dim); display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; } .rcard__meta span { display: inline-flex; align-items: center; gap: 0.3rem; } .rcard__meta .ic { width: 1em; height: 1em; color: var(--cyan); } .rcard__rate { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--gold); font-weight: 700; font-size: 0.92rem; } .rcard__rate .ic { fill: var(--gold); stroke: none; width: 1em; height: 1em; } .rcard__rate span { color: var(--text-dim); font-weight: 400; } .rcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; border-top: 1px solid var(--line); padding-top: 0.75rem; margin-top: 0.2rem; } .rcard__price { font-size: 0.82rem; color: var(--text-dim); } .rcard__price strong { font-family: var(--font-num); font-size: 1.35rem; color: var(--gold); } .results__empty { background: rgba(8,47,66,.92); border: 1px dashed var(--line-gold); border-radius: var(--radius); padding: 1.6rem; text-align: center; color: var(--text-dim); } .results__empty strong { color: var(--gold); display: block; font-size: 1.1rem; margin-bottom: 0.3rem; } /* v3 — الشريط الحي (موسوم تجريبياً) */ .ticker { display: inline-flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-top: 0.85rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: rgba(3, 25, 35, 0.6); border: 1px solid var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 0.85rem; color: var(--text-dim); } .ticker__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 0 rgba(111,231,242,.6); animation: pulseDot 2.4s var(--ease-out) infinite; } @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(111,231,242,.55); } 70% { box-shadow: 0 0 0 8px rgba(111,231,242,0); } 100% { box-shadow: 0 0 0 0 rgba(111,231,242,0); } } .ticker__text { color: var(--text); } .ticker__text strong { font-family: var(--font-num); color: var(--gold); font-weight: 700; } .ticker__tag { font-size: 0.7rem; font-weight: 700; color: var(--cyan); background: rgba(0,167,181,.12); border: 1px solid rgba(0,167,181,.25); padding: 0.1rem 0.55rem; border-radius: 999px; } .hero__trust { display: flex; flex-wrap: wrap; gap: 0.5rem 1.7rem; list-style: none; margin: 1.5rem 0 0; padding: 0; color: #b9d2dd; font-size: 0.93rem; font-weight: 500; } .hero__trust li { display: inline-flex; align-items: center; gap: 0.5rem; } .hero__trust .ic { color: var(--gold); } .hero__scroll { position: absolute; inset-inline-start: 50%; translate: 50% 0; bottom: 1.5rem; display: grid; justify-items: center; gap: 0.25rem; color: var(--text-dim); font-size: 0.85rem; transition: color 0.25s; } .hero__scroll svg { width: 22px; height: 22px; animation: bob 1.8s var(--ease-wave) infinite; } .hero__scroll:hover { color: var(--gold); } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /* ========================================================================== sections */ .section { padding: clamp(4rem, 8vw, 7rem) 0; position: relative; } .section__head { max-width: 660px; margin: 0 auto clamp(2.2rem, 4.5vw, 3.4rem); text-align: center; } .section__head--start { margin-inline: 0; text-align: start; } .section__eyebrow { display: inline-block; font-weight: 700; font-size: 0.88rem; color: var(--gold); letter-spacing: 0.03em; border: 1px solid var(--line-gold); border-radius: 999px; padding: 0.28rem 0.95rem; margin-bottom: 1rem; background: rgba(216,181,109,.07); } .section__title { font-size: clamp(1.7rem, 3.5vw, 2.5rem); color: var(--inktext); margin-bottom: 0.85rem; } .section__lead { color: var(--text-dim); font-size: 1.05rem; } /* ========================================================================== PSI (problem/solution/impact) */ .psi { background: transparent; } .psi__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } .psi__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem 1.5rem; transition: transform 0.35s var(--ease-out), border-color 0.35s; } .psi__card:hover { transform: translateY(-5px); border-color: var(--line-gold); } .psi__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; color: var(--gold); background: rgba(216,181,109,.1); border: 1px solid var(--line-gold); margin-bottom: 1rem; } .psi__icon svg { width: 26px; height: 26px; } .psi__icon--coral { color: var(--coral); background: rgba(255,107,74,.1); border-color: rgba(255,107,74,.3); } .psi__icon--teal { color: var(--cyan); background: rgba(0,167,181,.12); border-color: rgba(0,167,181,.3); } .psi__card h3 { font-size: 1.2rem; color: var(--inktext); margin-bottom: 0.5rem; } .psi__card p { color: var(--text-dim); font-size: 0.96rem; line-height: 1.8; } /* ========================================================================== stats (field survey) */ .stats { background: transparent; padding-block: clamp(2.5rem, 5vw, 4rem); } .stats__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } .stats__item { display: grid; justify-items: center; text-align: center; gap: 0.35rem; background: linear-gradient(160deg, rgba(8,47,66,.9), rgba(6,42,58,.55)); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.4rem; transition: transform 0.35s var(--ease-out), border-color 0.35s; } .stats__item:hover { transform: translateY(-5px); border-color: var(--line-gold); } .stats__ic { width: 28px; height: 28px; color: var(--gold); } .stats__num { font-family: var(--font-num); font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.1; color: var(--cyan); } .stats__label { color: var(--text-dim); font-size: 0.98rem; } /* ========================================================================== how */ .how { background: linear-gradient(to bottom, transparent, rgba(6,42,58,.72) 60%, transparent); } .how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; grid-template-columns: repeat(4, 1fr); } .how__step { position: relative; text-align: center; padding: 2.3rem 1.3rem 1.9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .how__num { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 0.9rem; border-radius: 50%; font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--on-gold); background: linear-gradient(135deg, #e5c98e, var(--gold)); box-shadow: var(--shadow-gold); } .how__ic { width: 24px; height: 24px; color: var(--cyan); margin-bottom: 0.5rem; } .how__step h3 { color: var(--inktext); font-size: 1.2rem; margin-bottom: 0.45rem; } .how__step p { color: var(--text-dim); font-size: 0.92rem; } /* ========================================================================== categories */ .cats { background: transparent; } .cats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .catg { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s; } .catg:hover { transform: translateY(-6px); border-color: var(--line-gold); box-shadow: var(--shadow); } .catg__media { position: relative; aspect-ratio: 16/10; overflow: hidden; } .catg__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); } .catg:hover .catg__media img { transform: scale(1.07); } .catg__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(3,25,35,.7), transparent 55%); } .catg__body { position: relative; padding: 1.15rem 1.25rem 1.3rem; } .catg__ic { width: 26px; height: 26px; color: var(--gold); margin-bottom: 0.6rem; } .catg__body h3 { font-size: 1.28rem; color: var(--inktext); margin-bottom: 0.35rem; } .catg__body > p { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 0.9rem; min-height: 2.6em; } .catg__cta { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.95rem; color: var(--gold); } .catg__cta svg { width: 1.15em; height: 1.15em; transition: transform 0.3s var(--ease-out); } .catg:hover .catg__cta svg { transform: translateX(-5px); } /* ========================================================================== offers */ .offers { background: linear-gradient(to bottom, transparent, rgba(6,42,58,.7) 55%, transparent); } .offers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .offer { border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); transition: transform 0.35s var(--ease-out), border-color 0.35s, box-shadow 0.35s; } .offer:hover { transform: translateY(-6px); border-color: var(--line-gold); box-shadow: var(--shadow); } .offer__media { position: relative; aspect-ratio: 16/10.5; overflow: hidden; } .offer__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); } .offer:hover .offer__media img { transform: scale(1.06); } .offer__badge { position: absolute; top: 0.85rem; inset-inline-start: 0.85rem; font-size: 0.78rem; font-weight: 800; color: var(--on-gold); background: linear-gradient(135deg, #e5c98e, var(--gold)); padding: 0.3rem 0.8rem; border-radius: 999px; box-shadow: 0 6px 18px -6px rgba(216,181,109,.6); } .offer__badge--coral { background: var(--coral); color: #2b0d06; } .offer__body { padding: 1.2rem 1.25rem 1.3rem; } .offer__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.45rem; } .offer__title { font-size: 1.16rem; color: var(--inktext); font-family: var(--font-ui); font-weight: 700; line-height: 1.55; } .offer__rate { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; font-weight: 700; color: var(--gold); font-size: 0.95rem; } .offer__rate .ic { fill: var(--gold); stroke: none; width: 1em; height: 1em; } .offer__rate span { color: var(--text-dim); font-weight: 400; font-size: 0.85rem; } .offer__meta { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; } .offer__meta span { display: inline-flex; align-items: center; gap: 0.35rem; } .offer__meta .ic { width: 1em; height: 1em; color: var(--cyan); } .offer__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; border-top: 1px solid var(--line); padding-top: 0.95rem; } .offer__price { color: var(--text-dim); font-size: 0.83rem; } .offer__price strong { font-family: var(--font-num); font-size: 1.4rem; color: var(--inktext); } .offer__price span { font-size: 0.8rem; } /* ========================================================================== map */ .map { background: transparent; } .map__wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 1.6rem; align-items: stretch; } .map__svg-box { background: linear-gradient(160deg, var(--deep), var(--ink)); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 1.2rem; display: grid; place-items: center; } #coastMap { width: 100%; height: auto; max-height: 560px; } .map__panel { background: var(--surface); border: 1px solid var(--line); border-radius: calc(var(--radius) + 6px); padding: 1.8rem 1.6rem; display: grid; align-content: center; } .map__placeholder { text-align: center; color: var(--text-dim); display: grid; justify-items: center; gap: 0.8rem; padding: 2rem 0; } .map__placeholder .ic { width: 40px; height: 40px; color: var(--teal); opacity: 0.7; } .map__city { font-family: var(--font-display); font-size: 1.9rem; color: var(--inktext); font-weight: 700; } .map__region { color: var(--gold); font-weight: 600; font-size: 0.95rem; margin-bottom: 1.2rem; } .map__stats { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.6rem; } .map__stats li { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; color: var(--text-dim); font-size: 0.95rem; } .map__stats strong { font-family: var(--font-num); font-size: 1.3rem; color: var(--cyan); } .map__tags-label { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.5rem; } .map__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.4rem; } .map__tags span { font-size: 0.82rem; font-weight: 600; color: var(--cyan); background: rgba(0,167,181,.12); border: 1px solid rgba(0,167,181,.25); padding: 0.28rem 0.75rem; border-radius: 999px; } .map__details { animation: fadeIn 0.35s var(--ease-out); } .map__book { justify-self: start; } /* map svg nodes */ .city-node { cursor: pointer; } .city-node circle.core { fill: var(--teal); transition: fill 0.25s, r 0.25s; } .city-node circle.ring { fill: none; stroke: var(--cyan); stroke-width: 1.5; opacity: 0; transform-origin: center; transform-box: fill-box; } .city-node text { fill: var(--text); font-family: var(--font-ui); font-size: 15px; font-weight: 600; } .city-node .city-name { font-size: 16px; font-weight: 700; fill: var(--inktext); } .city-node .city-count { font-family: var(--font-num); font-size: 15px; font-weight: 800; fill: #02222a; pointer-events: none; } .city-node:hover .city-name, .city-node.active .city-name { fill: var(--gold); } .map__note { margin-top: 0.9rem; text-align: center; color: var(--text-dim); font-size: 0.85rem; } .city-node:hover circle.core, .city-node.active circle.core { fill: var(--gold); } .city-node.active circle.ring { animation: nodePing 1.6s var(--ease-out) infinite; } @keyframes nodePing { 0% { opacity: 0.8; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.4); } } /* ========================================================================== why */ .why { background: linear-gradient(to bottom, transparent, rgba(6,42,58,.75)); } .why__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; grid-template-columns: repeat(4, 1fr); } .why__item { background: rgba(8,47,66,.6); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem; transition: transform 0.35s var(--ease-out), border-color 0.35s; } .why__item:hover { transform: translateY(-5px); border-color: var(--line-gold); } .why__ic { width: 30px; height: 30px; color: var(--gold); margin-bottom: 0.9rem; display: block; } .why__item h3 { font-size: 1.13rem; color: var(--inktext); margin-bottom: 0.45rem; font-family: var(--font-ui); font-weight: 700; } .why__item p { color: var(--text-dim); font-size: 0.92rem; line-height: 1.8; } /* ========================================================================== providers */ .providers { background: transparent; } .providers__content { min-width: 0; } .providers__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 4.5vw, 4rem); align-items: start; } .providers__steps { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.9rem; } .providers__steps li { display: grid; gap: 0.1rem; padding-inline-start: 1.1rem; border-inline-start: 3px solid var(--gold); } .providers__steps strong { color: var(--inktext); font-size: 1.05rem; } .providers__steps span { color: var(--text-dim); font-size: 0.93rem; } .providers__commission { color: var(--cyan); font-weight: 600; font-size: 0.98rem; margin-bottom: 1.5rem; padding: 0.7rem 1rem; background: rgba(0,167,181,.08); border-inline-start: 3px solid var(--teal); border-radius: 8px; } .providers__form { background: rgba(8,47,66,.55); border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); padding: 1.4rem; display: grid; gap: 0.95rem; } .providers__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem; } .providers__field { display: grid; gap: 0.3rem; position: relative; } .providers__field label { font-size: 0.84rem; font-weight: 700; color: var(--gold); } .providers__field input, .providers__field select { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(3,25,35,.55); color: var(--inktext); font-size: 0.97rem; padding: 0.78rem 0.95rem; outline: none; transition: border-color 0.25s, box-shadow 0.25s; } .providers__field input::placeholder { color: #6f8b9a; } .providers__field input:focus, .providers__field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,167,181,.16); } .providers__field select { appearance: none; cursor: pointer; padding-inline-end: 2rem; } .providers__field:has(select)::after { content: ""; position: absolute; inset-inline-end: 0.95rem; bottom: 1.25rem; width: 8px; height: 8px; pointer-events: none; border-inline-end: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(45deg); } .providers__field select option { color: #10202f; background: var(--cream); } .providers__agree { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: var(--text-dim); cursor: pointer; } .providers__agree input { margin-top: 0.3em; accent-color: var(--gold); width: 1.05em; height: 1.05em; } .providers__agree a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; } .providers__note { min-height: 1.4em; margin: 0; font-size: 0.93rem; font-weight: 600; color: var(--cyan); } .providers__note.is-error { color: var(--coral); } /* mini dashboard */ .dash { border-radius: calc(var(--radius) + 6px); overflow: hidden; background: var(--deep); border: 1px solid var(--line); box-shadow: var(--shadow); position: sticky; top: 100px; } .dash__head { display: flex; align-items: center; gap: 0.45rem; background: rgba(3,25,35,.6); padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); } .dash__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); opacity: 0.5; } .dash__dot:nth-child(1) { background: var(--coral); } .dash__dot:nth-child(2) { background: var(--gold); } .dash__dot:nth-child(3) { background: var(--teal); } .dash__dot { opacity: 0.9; } .dash__title { margin-inline-start: auto; font-size: 0.82rem; color: var(--text-dim); font-weight: 600; } .dash__body { padding: 1.3rem; } .dash__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-bottom: 1.3rem; } .dash__kpi { background: rgba(3,25,35,.5); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.9rem; } .dash__kpi span { display: block; font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.3rem; } .dash__kpi strong { font-family: var(--font-num); font-size: 1.7rem; color: var(--gold); } .dash__label { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 0.6rem; } .dash__bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-bottom: 1.3rem; } .dash__bars span { flex: 1; height: var(--h); background: linear-gradient(to top, var(--teal), var(--cyan)); border-radius: 6px 6px 2px 2px; opacity: 0.85; transform-origin: bottom; animation: barGrow 0.9s var(--ease-out) both; } .dash__bars span:nth-child(n) { animation-delay: calc(var(--i, 0) * 0.05s); } @keyframes barGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .dash__cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .dash__cal span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; background: rgba(3,25,35,.5); border: 1px solid var(--line); font-size: 0.8rem; color: var(--text-dim); font-weight: 600; } .dash__cal span.on { background: rgba(216,181,109,.15); border-color: var(--line-gold); color: var(--gold); } /* ========================================================================== v3: depths */ .depths { position: relative; background: linear-gradient(to bottom, transparent, rgba(1, 8, 14, .92) 45%, rgba(1, 8, 14, .96)); } /* v4 — مع WebGL يخفّ حجاب «الأعماق» ليُرى القاع والأشعة خلفه؛ وبلا WebGL يبقى الحجاب المعتمد في v3 حرفياً. */ .webgl .depths { background: linear-gradient(to bottom, transparent, rgba(1, 8, 14, .38) 40%, rgba(1, 8, 14, .46)); } .depths .section__title.glow { color: #eafcff; text-shadow: 0 0 26px var(--seafoam), 0 0 60px rgba(0, 167, 181, .28); } .depths .section__lead { color: #8fb0c0; } .depths__marks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } .depths__mark { display: grid; gap: 0.35rem; padding: 1.5rem 1.4rem; border-radius: var(--radius); background: rgba(2, 16, 24, .55); border: 1px solid rgba(111, 231, 242, .1); border-top: 2px solid var(--seafoam); transition: border-color 0.35s, transform 0.35s var(--ease-out); } .depths__mark:hover { transform: translateY(-5px); border-color: rgba(111, 231, 242, .3); } .depths__mark strong { font-family: var(--font-num); font-size: 1.9rem; font-weight: 800; color: var(--cyan); text-shadow: 0 0 20px var(--seafoam); } .depths__mark span { color: var(--text-dim); font-size: 0.94rem; } /* ========================================================================== final CTA */ .finalcta { background: linear-gradient(to bottom, transparent, rgba(6,42,58,.8)); } .finalcta__box { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; border-radius: calc(var(--radius) + 8px); background: radial-gradient(600px 300px at 50% 0%, rgba(0,167,181,.14), transparent), var(--surface); border: 1px solid var(--line); } .finalcta__title { font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--inktext); margin-bottom: 0.8rem; } .finalcta__sub { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 1.8rem; } /* ========================================================================== footer */ .footer { background: linear-gradient(to bottom, var(--deep), #02141d); border-top: 1px solid var(--line); padding: 3.5rem 0 1.5rem; } .footer__grid { display: grid; gap: 2.2rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; padding-bottom: 2.4rem; } .footer__tagline { color: var(--text-dim); font-size: 0.95rem; max-width: 32ch; margin-bottom: 1.1rem; } .footer__cr { color: #5f7a88; font-size: 0.86rem; } .footer__col { display: grid; gap: 0.65rem; align-content: start; } .footer__col h3 { font-size: 1rem; color: var(--inktext); margin-bottom: 0.35rem; font-family: var(--font-ui); font-weight: 700; } .footer__col a { color: var(--text-dim); font-size: 0.93rem; transition: color 0.25s; width: fit-content; } .footer__col a:hover { color: var(--gold); } .footer__bottom { border-top: 1px solid var(--line); padding-top: 1.3rem; text-align: center; color: #5f7a88; font-size: 0.88rem; } /* ========================================================================== modal */ .modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1.2rem; } .modal[hidden] { display: none; } .modal__overlay { position: absolute; inset: 0; background: rgba(2, 14, 20, 0.78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fadeIn 0.3s; } .modal__box { position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; background: var(--deep); border: 1px solid var(--line-gold); border-radius: calc(var(--radius) + 8px); padding: 2.2rem 2rem; box-shadow: var(--shadow); animation: modalIn 0.4s var(--ease-out); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: none; } } .modal__close { position: absolute; top: 1rem; inset-inline-end: 1rem; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(3,25,35,.5); color: var(--text); display: grid; place-items: center; cursor: pointer; transition: border-color 0.25s, color 0.25s; } .modal__close:hover { border-color: var(--coral); color: var(--coral); } .modal__progress { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.6rem; } .modal__progress span { width: 34px; height: 5px; border-radius: 3px; background: rgba(111,231,242,.18); transition: background 0.3s; } .modal__progress span.on { background: var(--gold); } .modal__title { font-size: 1.55rem; color: var(--inktext); text-align: center; margin-bottom: 0.4rem; } .modal__trip { text-align: center; color: var(--gold); font-weight: 600; margin-bottom: 1.5rem; } .modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-bottom: 0.9rem; } .modal__field { display: grid; gap: 0.3rem; position: relative; } .modal__field label { font-size: 0.84rem; font-weight: 700; color: var(--gold); } .modal__field input, .modal__field select { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--line); background: rgba(3,25,35,.55); color: var(--inktext); font-size: 0.97rem; padding: 0.78rem 0.95rem; outline: none; transition: border-color 0.25s, box-shadow 0.25s; } .modal__field input:focus, .modal__field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,167,181,.16); } .modal__field select { appearance: none; cursor: pointer; padding-inline-end: 2rem; } .modal__field:has(select)::after { content: ""; position: absolute; inset-inline-end: 0.95rem; bottom: 1.25rem; width: 8px; height: 8px; pointer-events: none; border-inline-end: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(45deg); } .modal__field select option { color: #10202f; background: var(--cream); } .modal__field input[type="date"] { color-scheme: dark; font-family: var(--font-num); } .modal__error { min-height: 1.3em; color: var(--coral); font-size: 0.9rem; font-weight: 600; text-align: center; margin: 0.3rem 0 0; } .modal__actions { display: flex; justify-content: center; margin-top: 1.4rem; } .modal__actions--split { justify-content: space-between; } .modal__review { margin: 0 0 1rem; display: grid; gap: 0.55rem; } .modal__review > div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 0.55rem; } .modal__review dt { color: var(--text-dim); font-size: 0.95rem; } .modal__review dd { margin: 0; color: var(--inktext); font-weight: 600; text-align: left; } .modal__total { display: flex; justify-content: space-between; align-items: center; background: rgba(216,181,109,.1); border: 1px solid var(--line-gold); border-radius: var(--radius-sm); padding: 0.9rem 1.1rem; } .modal__total span { color: var(--text-dim); } .modal__total strong { font-family: var(--font-num); font-size: 1.5rem; color: var(--gold); } .modal__step--done { text-align: center; } .modal__doneic { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 1.2rem; border-radius: 50%; color: var(--on-gold); background: linear-gradient(135deg, #e5c98e, var(--gold)); box-shadow: var(--shadow-gold); animation: donePop 0.5s var(--ease-out); } .modal__doneic svg { width: 36px; height: 36px; } @keyframes donePop { 0% { transform: scale(0); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } } .modal__ref { color: var(--text-dim); font-size: 1.05rem; margin-bottom: 0.6rem; } .modal__ref strong { font-family: var(--font-num); font-size: 1.6rem; color: var(--gold); letter-spacing: 0.03em; } .modal__donenote { color: var(--text); margin-bottom: 0.8rem; } .modal__demo { font-size: 0.85rem; color: var(--text-dim); border-top: 1px dashed var(--line-gold); padding-top: 0.9rem; margin-top: 0.6rem; } /* v3 — ميلان ثلاثي الأبعاد خفيف عند التأشير (يُوضع بعد بطاقات النتائج والعروض ليتقدّم على قواعد :hover الخاصة بها عند تساوي الأولوية). */ .tilt { transform-style: preserve-3d; will-change: transform; } .tilt.is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px) scale(1.012); transition: transform 0.12s linear, border-color 0.3s; } /* ========================================================================== reveals Progressive enhancement: content is VISIBLE by default (no-JS / static render safe). GSAP (JS) hides-then-reveals inline only when actually loaded — never via a CSS class that would leave the page blank if scripts are slow or absent. */ .reveal.is-visible, .reveal-hero.is-visible { opacity: 1; transform: none; transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + var(--d, 0ms)); } .reveal-hero.d-1 { --d: 120ms; } .reveal-hero.d-2 { --d: 260ms; } .reveal-hero.d-3 { --d: 420ms; } .reveal-hero.d-4 { --d: 560ms; } .reveal-hero.d-5 { --d: 700ms; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .reveal, .reveal-hero { opacity: 1 !important; transform: none !important; } .hero__waves { display: none; } /* v3 — طبقة الغطسة كلها تُطفأ: بلا فيديو، بلا فقاعات، بلا ظلال، بلا شريط عمق */ .dive, .rail, .hero__video, .hero__ripple { display: none !important; } .rcard { animation: none !important; opacity: 1 !important; } .tilt.is-tilting { transform: none !important; } } /* ========================================================================== responsive */ @media (max-width: 1020px) { .search { grid-template-columns: 1fr 1fr; } .search__submit { grid-column: 1 / -1; } .results__grid { grid-template-columns: 1fr 1fr; } .psi__grid, .cats__grid, .offers__grid { grid-template-columns: 1fr 1fr; } .how__steps, .why__grid { grid-template-columns: 1fr 1fr; } .map__wrap { grid-template-columns: 1fr; } .providers__grid { grid-template-columns: 1fr; } .dash { position: static; } } @media (max-width: 900px) { .nav__links { display: none; } .nav__toggle { display: flex; } .depths__marks { grid-template-columns: 1fr; } /* شريط العمق يزاحم المحتوى على الشاشات الضيقة */ .rail { display: none; } .dive__shape--turtle { width: 140px; } } @media (max-width: 640px) { body { font-size: 1rem; } .search, .results__grid, .psi__grid, .cats__grid, .offers__grid, .how__steps, .why__grid { grid-template-columns: 1fr; } .stats__grid { grid-template-columns: 1fr; } .providers__row, .modal__row { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.8rem; } .hero { padding-top: 6.5rem; } .hero__title { font-size: 2.1rem; } .modal__box { padding: 1.8rem 1.3rem; } .btn--nav { display: none; } } @media (max-width: 420px) { .footer__grid { grid-template-columns: 1fr; } } /* ========================================================================== القسم السينمائي — شواطئ السعودية (v4.2) يتفرّج ⇦ يشتهي المكان ⇦ يختار النشاط ⇦ يحجز ========================================================================== */ .studio { position: relative; padding-bottom: clamp(2rem, 5vw, 3.5rem); } .studio__track { display: grid; gap: clamp(1rem, 2.5vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); } .studio--single .studio__track { grid-template-columns: 1fr; max-width: 900px; margin-inline: auto; } .beach { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(160deg, var(--surface) 0%, var(--ink) 100%); box-shadow: var(--shadow); min-height: clamp(360px, 62vh, 620px); display: flex; align-items: flex-end; isolation: isolate; } /* الوسائط فوق خلفية البطاقة لا خلفها (z-index سالب كان يدفنها تحت خلفية .beach) */ .beach__media { position: absolute; inset: 0; z-index: 0; } .beach__video { width: 100%; height: 100%; object-fit: cover; display: block; /* حتى قبل تحميل الفيديو يبقى الإطار بلون البحر لا أبيض */ background: linear-gradient(160deg, #07394e 0%, #031923 100%); } .beach__wash { position: absolute; inset: 0; background: linear-gradient(to top, rgba(3, 25, 35, 0.95) 0%, rgba(3, 25, 35, 0.82) 22%, rgba(3, 25, 35, 0.32) 55%, rgba(3, 25, 35, 0.12) 100%); } .beach__body { position: relative; z-index: 1; padding: clamp(1.2rem, 3vw, 2.2rem); width: 100%; } .beach__region { display: inline-block; font-size: 0.82rem; font-weight: 700; color: var(--gold); border: 1px solid var(--line-gold); border-radius: 999px; padding: 0.2rem 0.8rem; background: rgba(3, 25, 35, 0.5); margin-bottom: 0.7rem; } .beach__name { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.3rem); color: var(--inktext); margin-bottom: 0.45rem; line-height: 1.25; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); } .beach__line { color: var(--text); max-width: 46ch; margin-bottom: 1.1rem; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); } .beach__soon { display: inline-block; color: var(--text-dim); font-size: 0.95rem; border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; background: rgba(3, 25, 35, 0.45); } .beach__credit { margin-top: 0.9rem; font-size: 0.78rem; color: var(--text-dim); } .beach__credit a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid var(--line); } .beach__credit a:hover, .beach__credit a:focus-visible { color: var(--gold); } @media (max-width: 620px) { .beach { min-height: 76vh; } }