/* ========================================================================== قصة الكوليكشن — "أرشيف من الرمل" Cinematic editorial scroll narrative. Loaded only on page-collection-story.php, after main.css + chrome-v2.css. Most selectors are prefixed with `.st` on purpose: main.css ships `body.wabar-site a{color:inherit}` and `body.wabar-site img{...}` at (0,0,1,2), which beats a bare single class. `.st .x` wins on class count. Animation contract: JS adds .story-anim to and .is-in to each element as it enters. Without .story-anim everything is visible and static, so the page never depends on JS (or fights reduced-motion) to be readable. ========================================================================== */ .st{ --st-dark:#102a38; --st-darker:#0b1f2a; --st-cream:#f8f5ef; --st-cream-2:#ece5d6; --st-ink:#102a38; --st-ink-soft:rgba(16,42,56,.66); --st-sand:#e7decb; --st-sand-soft:rgba(231,222,203,.66); --st-brown:#173f53; --st-brown-light:#c79a4a; --st-gold:#c79a4a; --st-gutter:clamp(20px,5vw,72px); --st-ease:cubic-bezier(.22,.7,.24,1); position:relative; background:var(--st-cream); color:var(--st-ink); overflow-x:clip; } /* ========================================================================== Animation primitives ========================================================================== */ /* 1. fade + rise */ .story-anim .st .st-fade{opacity:0;transform:translateY(26px);} .story-anim .st .st-fade.is-in{ opacity:1;transform:none; transition:opacity .9s var(--st-ease),transform .9s var(--st-ease); } /* 2. line mask — the type slides up from behind its own edge */ .st .st-mask{display:block;overflow:hidden;padding-bottom:.08em;} .story-anim .st .st-mask > span{display:block;transform:translateY(110%);} .story-anim .st .st-mask > span.is-in{ transform:none; transition:transform 1.05s var(--st-ease); } /* 3. rule that draws itself from the start edge */ .story-anim .st .st-grow{transform:scaleX(0);} .story-anim .st .st-grow.is-in{transform:scaleX(1);transition:transform 1s var(--st-ease);} /* 4. poster: clip-wipe upward + settle */ .story-anim .st .st-pop{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(28px);} .story-anim .st .st-pop.is-in{ opacity:1;clip-path:inset(0 0 0 0);transform:none; transition:clip-path 1.25s var(--st-ease),opacity .7s ease,transform 1.25s var(--st-ease); } /* stagger */ .story-anim .st [data-d="1"].is-in{transition-delay:.09s;} .story-anim .st [data-d="2"].is-in{transition-delay:.18s;} .story-anim .st [data-d="3"].is-in{transition-delay:.27s;} .story-anim .st [data-d="4"].is-in{transition-delay:.36s;} .story-anim .st [data-d="5"].is-in{transition-delay:.45s;} .story-anim .st [data-d="6"].is-in{transition-delay:.54s;} /* film grain — sits over the dark bands only */ .st .st-grain{ position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.42; 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.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); } /* shared atoms */ .st .st-eyebrow{ display:flex;align-items:center;gap:12px;margin:0 0 20px; font-size:12.5px;font-weight:700;letter-spacing:1.4px;line-height:1.7; color:var(--st-brown); } .st .st-eyebrow i{display:block;width:34px;height:1px;background:currentColor;opacity:.7;flex:none;} /* ========================================================================== Reading progress ========================================================================== */ .st .st-progress{ position:fixed;inset-block-start:0;inset-inline:0;z-index:60; height:3px;background:rgba(11,31,42,.16); } .st .st-progress-bar{ display:block;height:100%;width:0; background:linear-gradient(90deg,var(--st-brown),var(--st-gold)); transition:width .12s linear; } /* ========================================================================== Hero ========================================================================== */ .st .st-hero{ position:relative;isolation:isolate;overflow:hidden; display:flex;flex-direction:column;justify-content:center; min-height:min(92vh,900px); padding:clamp(90px,14vh,150px) var(--st-gutter) clamp(120px,16vh,170px); background:var(--st-dark);color:var(--st-sand);text-align:center; } /* The photographic plate drifts slower than the page (JS sets --p). */ .st .st-hero-plate{ position:absolute;inset:-14% 0;z-index:-2; background-size:cover;background-position:center 38%; transform:translate3d(0,var(--p,0px),0) scale(1.08); will-change:transform; } .st .st-hero-veil{ position:absolute;inset:0;z-index:-1; background: radial-gradient(115% 85% at 50% 42%,rgba(16,42,56,.52) 0%,rgba(16,42,56,.80) 56%,rgba(11,31,42,.96) 100%), linear-gradient(180deg,rgba(23,63,83,.34) 0%,rgba(16,42,56,0) 40%,rgba(11,31,42,.86) 100%); } .st .st-hero-watermark{ position:absolute;top:50%;right:50%;transform:translate(50%,-50%);z-index:-1; font-size:clamp(76px,15vw,230px);font-weight:900;line-height:1;white-space:nowrap; color:transparent;-webkit-text-stroke:1px rgba(231,222,203,.075); letter-spacing:-.03em;pointer-events:none;user-select:none; } .st .st-hero-inner{position:relative;z-index:3;max-width:940px;margin:0 auto;width:100%;} .st .st-hero .st-eyebrow{justify-content:center;color:var(--st-brown-light);letter-spacing:2.6px;} .st .st-hero-title{ margin:0 auto 30px;max-width:900px; font-size:clamp(30px,4.6vw,60px);font-weight:800;line-height:1.42;letter-spacing:-.01em; color:var(--st-cream); text-shadow:0 6px 40px rgba(0,0,0,.45); } /* Second line is the quieter, warmer half of the couplet. */ .st .st-hero-title-2 > span{ color:var(--st-brown-light);font-size:.8em;font-weight:700; } .st .st-hero-intro{ margin:0 auto;max-width:620px; font-size:17px;line-height:2.1;color:var(--st-sand-soft); } /* Meta row: grounds the poetry in product facts. */ .st .st-hero-facts{ display:flex;align-items:stretch;justify-content:center;gap:0; margin:42px auto 0;max-width:520px; border-top:1px solid rgba(231,222,203,.20);padding-top:26px; } .st .st-fact{flex:1;display:flex;flex-direction:column;gap:5px;padding:0 10px;} .st .st-fact + .st-fact{border-inline-start:1px solid rgba(231,222,203,.16);} .st .st-fact strong{font-size:clamp(20px,2.4vw,27px);font-weight:800;color:var(--st-gold);line-height:1.2;} .st .st-fact span{font-size:12px;font-weight:600;letter-spacing:.8px;color:var(--st-sand-soft);} .st .st-cue{ position:absolute;bottom:34px;right:50%;transform:translateX(50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:12px; color:var(--st-sand);opacity:.62;transition:opacity .3s; } .st .st-cue:hover{opacity:1;} .st .st-cue-text{font-size:11.5px;font-weight:700;letter-spacing:2.4px;} .st .st-cue-line{ display:block;width:1px;height:52px; background:linear-gradient(180deg,transparent,var(--st-sand)); animation:st-cue 2.2s ease-in-out infinite; } @keyframes st-cue{0%,100%{transform:scaleY(.42);opacity:.32;}50%{transform:scaleY(1);opacity:1;}} /* ========================================================================== Manifesto band ========================================================================== */ .st .st-manifesto{ position:relative;overflow:hidden; background:var(--st-darker);color:var(--st-sand); padding:clamp(64px,10vh,110px) var(--st-gutter); } .st .st-manifesto-inner{max-width:1000px;margin:0 auto;text-align:center;} .st .st-rule{ display:block;width:1px;height:56px;margin:0 auto 30px; background:linear-gradient(180deg,transparent,var(--st-brown-light)); } .st .st-manifesto-line{ margin:0;font-size:clamp(24px,3.4vw,44px);font-weight:700;line-height:1.5;letter-spacing:-.01em; color:var(--st-cream); } .st .st-manifesto-line em{font-style:normal;color:var(--st-brown-light);} .st .st-manifesto-sub{ margin:26px auto 0;max-width:560px; font-size:15px;line-height:2;color:var(--st-sand-soft); } /* ========================================================================== Chapter side rail ========================================================================== */ .st .st-dots{ position:fixed;inset-block-start:50%;inset-inline-start:22px;z-index:40; transform:translateY(-50%); display:flex;flex-direction:column;gap:20px; } /* The rail belongs to the chapters only. JS marks it .is-managed as soon as it takes control, then toggles .is-on while the chapters are in view. Gated on .is-managed (not .story-anim) so it also works under reduced motion; with no JS at all neither class is set and the rail simply stays visible. */ .st .st-dots.is-managed{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s;} .st .st-dots.is-managed.is-on{opacity:1;visibility:visible;} .st .st-dots .st-dot{ display:flex;align-items:center;gap:9px; font-size:10.5px;font-weight:700;letter-spacing:1px; color:var(--st-ink-soft);opacity:.5; transition:opacity .3s,color .3s; } .st .st-dots .st-dot i{ display:block;width:9px;height:9px;border-radius:50%;flex:none; border:1px solid currentColor;background:transparent; transition:background .35s,transform .35s,border-color .35s; } .st .st-dots .st-dot span{opacity:0;transform:translateX(6px);transition:opacity .3s,transform .3s;} .st .st-dots .st-dot:hover{opacity:1;} .st .st-dots .st-dot:hover span{opacity:1;transform:none;} .st .st-dots .st-dot.is-active{opacity:1;color:var(--st-brown);} .st .st-dots .st-dot.is-active i{background:var(--dot,var(--st-brown));border-color:var(--st-brown);transform:scale(1.35);} .st .st-dots .st-dot.is-active span{opacity:1;transform:none;} /* ========================================================================== Chapters ========================================================================== */ .st .st-chapters{position:relative;background:var(--st-cream);} .st .st-chapter{ position:relative;overflow:hidden; padding:clamp(74px,11vh,130px) var(--st-gutter); } .st .st-chapter + .st-chapter{border-top:1px solid rgba(16,42,56,.10);} /* A large wash of the piece's own stage colour behind its poster side. */ .st .st-chapter-glow{ position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(58% 62% at 22% 34%,var(--stage),transparent 68%); opacity:.20; } .st .st-chapter:nth-child(even) .st-chapter-glow{ background:radial-gradient(58% 62% at 78% 34%,var(--stage),transparent 68%); } .st .st-chapter-inner{ position:relative;z-index:1; display:grid;grid-template-columns:1.04fr .96fr; align-items:center;gap:clamp(34px,5vw,86px); max-width:1240px;margin:0 auto; } /* Zig-zag: the poster swaps sides every other chapter. */ .st .st-chapter:nth-child(even) .st-figure{order:2;} /* ---- chapter photo -------------------------------------------------------- 2026-08-03: the owner's own media-library shots replaced chapter-1..3.jpg and asked for them SHORTER but UNCROPPED. Those two words rule out the old frame (a fixed 3/2 box + object-fit:cover) twice over — the new files are portrait, so a landscape box would have kept only a horizontal band of each, and shrinking a cover box crops harder, not less. So the box is bound by HEIGHT and the width follows the file's own ratio: `max-height` on the image, `width:auto`, and the frame shrink-wraps it. The three ratios differ (4/5, 2/3, 4/5) so the widths differ slightly — that is the cost of not cropping, and the equal heights still line the chapters up. Nothing here is clickable any more (the lightbox was removed). */ .st .st-figure{display:flex;justify-content:center;} .st .st-figure-inner{ position:relative; width:min(100%,400px); } /* Offset hairline frame behind the card — depth without a heavy border. */ .st .st-figure-inner::before{ content:'';position:absolute;inset:0;z-index:0; border:1px solid rgba(23,63,83,.42);border-radius:22px; transform:translate(14px,14px); } .st .st-figure-inner > figure{ position:relative;z-index:1;margin:0; display:block;width:auto;height:auto; border-radius:20px;overflow:hidden; background:var(--st-cream-2); box-shadow:0 34px 70px rgba(23,63,83,.24); } /* height-capped, width follows the file: the whole frame is the whole photo. No transform here — the parallax drift and the old scale(1.06) both pushed the image past `overflow:hidden`, which is cropping by another name. story.js still sets --ip; nothing reads it for this element any more. */ .st .st-figure-inner img{ display:block; width:100%;height:auto; aspect-ratio:4/5; object-fit:cover; } /* ---- copy ---------------------------------------------------------------- */ .st .st-copy{position:relative;min-width:0;} /* Oversized outlined numeral anchoring the column. */ .st .st-numeral{ position:absolute;z-index:-1; inset-block-start:-.42em;inset-inline-start:-.12em; font-size:clamp(120px,15vw,220px);font-weight:900;line-height:.8;letter-spacing:-.05em; color:transparent;-webkit-text-stroke:1px rgba(23,63,83,.22); pointer-events:none;user-select:none; } .st .st-name{ margin:0; font-size:clamp(34px,4.6vw,60px);font-weight:800;line-height:1.24;letter-spacing:-.02em; color:var(--st-ink); } .st .st-name-rule{ display:block;width:72px;height:2px;margin:22px 0 26px; background:var(--st-brown);transform-origin:right center; } .st .st-para{margin:0 0 18px;font-size:16.5px;line-height:2.05;color:var(--st-ink-soft);} .st .st-lede{ font-size:clamp(18px,1.6vw,21px);font-weight:600;line-height:1.95;color:var(--st-ink); } .st .st-para:last-of-type{margin-bottom:0;} /* CTA — pill with a travelling arrow. */ .st .st-cta{ display:inline-flex;align-items:center;gap:10px;margin-top:30px; padding:14px 30px;border-radius:999px; background:var(--st-brown);color:var(--st-sand); font-size:15px;font-weight:700; box-shadow:0 14px 30px rgba(23,63,83,.30); transition:transform .25s var(--st-ease),box-shadow .25s,background .25s; } .st .st-cta:hover{ background:#173f53;transform:translateY(-2px); box-shadow:0 18px 38px rgba(23,63,83,.40); } .st .st-cta-arrow{transition:transform .25s var(--st-ease);} .st .st-cta:hover .st-cta-arrow{transform:translateX(-5px);} /* ========================================================================== Closing ========================================================================== */ .st .st-end{ position:relative;overflow:hidden; background:var(--st-brown);color:var(--st-sand); padding:clamp(70px,11vh,120px) var(--st-gutter);text-align:center; } .st .st-end::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(70% 100% at 50% 0%,rgba(231,222,203,.20),transparent 72%); } .st .st-end-inner{position:relative;z-index:3;max-width:860px;margin:0 auto;} .st .st-end-line{ margin:0 0 34px; font-size:clamp(23px,3.2vw,40px);font-weight:800;line-height:1.5; color:var(--st-cream); } .st .st-end-cta{ display:inline-flex;align-items:center;gap:10px; padding:15px 34px;border-radius:999px; background:var(--st-sand);color:var(--st-dark); font-size:15px;font-weight:700; box-shadow:0 14px 34px rgba(0,0,0,.28); transition:transform .25s var(--st-ease),box-shadow .25s; } .st .st-end-cta:hover{transform:translateY(-2px);box-shadow:0 20px 44px rgba(0,0,0,.36);} /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1100px){ .st .st-dots{inset-inline-start:12px;} } @media (max-width:900px){ .st .st-dots{display:none;} .st .st-hero{min-height:82vh;} .st .st-chapter-inner{grid-template-columns:1fr;gap:34px;justify-items:center;} /* Poster always leads on mobile, whatever the desktop zig-zag says. */ .st .st-chapter:nth-child(even) .st-figure{order:0;} .st .st-copy{width:100%;max-width:620px;} .st .st-figure-inner{width:max-content;max-width:min(100%,420px);} .st .st-chapter-glow, .st .st-chapter:nth-child(even) .st-chapter-glow{ background:radial-gradient(70% 42% at 50% 22%,var(--stage),transparent 70%); } } @media (max-width:600px){ .st .st-hero{padding-top:72px;padding-bottom:104px;} .st .st-hero-intro{font-size:15.5px;line-height:1.98;} .st .st-hero-facts{margin-top:32px;padding-top:22px;} .st .st-fact{padding:0 6px;} .st .st-cue{bottom:22px;} .st .st-cue-line{height:38px;} .st .st-figure-inner{width:100%;} .st .st-figure-inner::before{transform:translate(9px,9px);} .st .st-para{font-size:15.5px;line-height:1.98;} .st .st-numeral{font-size:clamp(96px,26vw,150px);inset-block-start:-.34em;} .st .st-cta{width:100%;justify-content:center;} } /* ========================================================================== Reduced motion — everything visible, nothing moves ========================================================================== */ @media (prefers-reduced-motion:reduce){ .story-anim .st .st-fade, .story-anim .st .st-fade.is-in, .story-anim .st .st-pop, .story-anim .st .st-pop.is-in, .story-anim .st .st-grow, .story-anim .st .st-grow.is-in, .story-anim .st .st-mask > span, .story-anim .st .st-mask > span.is-in{ opacity:1;transform:none;clip-path:none;transition:none; } .st .st-hero-plate{transform:none;} .st .st-figure-inner img{transform:none;transition:none;} .st .st-cue-line{animation:none;} }