/* Siavash Habibi Core — Gallery UI. Source: Siavash Habibi Core — protected Gallery UI. */
:root{--site-title-font:"Inter","Vazirmatn",sans-serif;--line:#272727;}
.siavash-portfolio-page .gallery-archive-button{display:inline-flex;align-items:center;justify-content:center;margin-inline-start:auto;border-bottom:1px solid #555;padding:8px 0;font-size:11px;color:#bbb;white-space:nowrap;transition:color .2s ease,border-color .2s ease}
.siavash-portfolio-page .gallery-archive-button:hover,.siavash-portfolio-page .gallery-archive-button:focus-visible{color:#fff;border-color:#fff}
/* ---------- Home lightbox: existing presentation retained ---------- */
/* v1.0.24 — safety net: hide the Home lightbox shell by default everywhere,
not only under .siavash-portfolio-page. It's normally only ever printed
on the Home template (see sh_core_home_lightbox_markup(), Core plugin),
but if that guard is ever wrong for a future page, this stops it from
rendering as a plain visible block instead of silently doing nothing. */
.lightbox{display:none}
.siavash-portfolio-page .lightbox{position:fixed;z-index:100;inset:0;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;padding:5vw}
.siavash-portfolio-page .lightbox.open{display:flex}
.siavash-portfolio-page .lightbox-box{width:min(1320px,96vw);height:min(88vh,900px);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:0;padding:0;overflow:hidden;border:1px solid #333;background:#151515}
.siavash-portfolio-page .lightbox-close{position:absolute;top:22px;right:30px;background:none;border:0;font-size:34px;cursor:pointer}
.siavash-portfolio-page .lightbox-image{min-height:55vh;background-position:center;background-size:contain;background-repeat:no-repeat;background-color:#0b0b0b}
.siavash-portfolio-page .lightbox-details{padding:38px 30px;overflow:auto;border-inline-start:1px solid var(--sh-divider-subtle);background:#121212;text-align:start}
.siavash-portfolio-page .lightbox-details h3{font-size:25px;font-weight:500;margin:0 0 8px}
.siavash-portfolio-page .lightbox-details p{color:#aaa;font-size:13px;line-height:2;margin:0}
.siavash-portfolio-page .gallery-meta{border-top:1px solid var(--line);margin-top:18px}
.siavash-portfolio-page .gallery-meta>div{display:flex;justify-content:space-between;gap:18px;padding:10px 0;border-bottom:1px solid var(--line);font-size:11px}
.siavash-portfolio-page .gallery-meta span{color:#777}.siavash-portfolio-page .gallery-meta strong{font-weight:400;text-align:end}
/* ---------- Gallery archive: square grid intentionally preserved ---------- */
body.siavash-gallery-archive-page,body.siavash-gallery-archive-page #page,body.siavash-gallery-archive-page #content,body.siavash-gallery-archive-page .site,body.siavash-gallery-archive-page .site-content{background:var(--sh-gs-paper,#000);color:var(--sh-gs-ink,#fff);margin:0;padding:0;border:0;box-shadow:none}
body.siavash-gallery-archive-page{font-family:Inter,sans-serif;overflow-x:hidden}
/* v1.0.12 — Astra (the parent theme) wraps page content in its own
#page/.ast-container/.site-main/#content divs, which can carry Astra's
own default padding/margin. That's fine for normal boxed pages, but it
left a visible gap below the footer on these full-bleed gallery pages
(site footer + get_footer() themselves have zero margin — the leftover
space was Astra's own wrapper padding). Zeroed out only here.
*/
body.siavash-gallery-archive-page #page,
body.siavash-gallery-archive-page .site-content,
body.siavash-gallery-archive-page .ast-container,
body.siavash-gallery-archive-page .site-main,
body.siavash-gallery-archive-page #content{padding:0!important;margin:0!important}
body.siavash-gallery-archive-page{margin:0!important}
html[dir="rtl"] body.siavash-gallery-archive-page,html[dir="rtl"] body.siavash-gallery-archive-page *{font-family:"Vazirmatn",sans-serif}
html[dir="ltr"] body.siavash-gallery-archive-page,html[dir="ltr"] body.siavash-gallery-archive-page *{font-family:"Inter",sans-serif}
/* v1.0.17 — footer used to sit far below the actual gallery content
(a big empty black gap) whenever the visible items were shorter than
one viewport — e.g. a filtered category with just a few photos, or
simply a tall screen. That gap came from forcing this shell to
min-height:100vh regardless of real content height, combined with a
position:fixed sidebar pinned to the viewport. Switched to a flex
layout with a position:sticky sidebar instead: the sidebar now
stretches to match .gallery-content's real height (whatever that is)
and stops sticking exactly where that content ends, so the footer
always sits flush right after — no artificial gap, and the sidebar
never overlaps the footer. Fixed for all three breakpoints below. */
body.siavash-gallery-archive-page .gallery-shell{display:flex;background:var(--sh-gs-paper,#000);padding-top:var(--sh-nav-h,74px)}
body.siavash-gallery-archive-page .gallery-sidebar{position:sticky;top:var(--sh-nav-h,74px);flex:0 0 250px;width:250px;background:#090909;z-index:20;border-inline-end:1px solid var(--sh-divider-subtle)}
/* v1.19.11 — sub-phase C: tokenized (--sh-gs-sidebar-bg, defined further
down this file), value unchanged. */
body.siavash-gallery-archive-page .gallery-sidebar-inner{height:100%;padding:58px 36px 34px;display:flex;flex-direction:column;background:var(--sh-gs-sidebar-bg,#090909)}
body.siavash-gallery-archive-page .gallery-brand{display:flex;flex-direction:column;gap:5px;color:var(--sh-gs-ink,#fff);margin-bottom:58px;transition:color .2s ease}
body.siavash-gallery-archive-page .gallery-brand strong{font-family:var(--site-title-font);font-size:12px;line-height:1.35;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
/* v1.19.11 — sub-phase C: tokenized (--sh-gs-sidebar-brand-ink), value unchanged. */
body.siavash-gallery-archive-page .gallery-brand span{font-size:9px;line-height:1.45;letter-spacing:.08em;text-transform:uppercase;color:var(--sh-gs-sidebar-brand-ink,#aaa)}
body.siavash-gallery-archive-page .gallery-nav{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
/* v1.19.11 — sub-phase C: tokenized. Value (#eee) is identical to the
existing --sh-gs-btn-ink (mobile-head-home .sh-btn label), so this
reuses that token instead of adding a duplicate for the same shade. */
body.siavash-gallery-archive-page .gallery-nav a{position:relative;font-size:11px;line-height:1.2;color:var(--sh-gs-btn-ink,#eee);padding-bottom:4px;transition:color .22s ease,opacity .22s ease}
body.siavash-gallery-archive-page .gallery-nav a:hover,body.siavash-gallery-archive-page .gallery-nav a:focus-visible,body.siavash-gallery-archive-page .gallery-nav a.is-active{color:var(--sh-gs-ink,#fff);opacity:1}
body.siavash-gallery-archive-page .gallery-nav a:not(.is-active){opacity:.55}
body.siavash-gallery-archive-page .gallery-nav a.is-active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sh-gs-ink,#fff)}
/* v1.0.11 — "back to home" and the language switch now live together in one
row with an explicit, fixed gap (was two separate blocks whose visual
spacing depended on margin-top:auto relative to variable-height content
above, so fa/en never matched). The language switch is now sized/shaped
exactly like the header's own FA/EN pill (.sh-lang), not a rectangular
button — they're the same control, so they should look the same. */
body.siavash-gallery-archive-page .gallery-sidebar-actions{display:flex;align-items:center;gap:10px;padding-top:18px;margin-top:14px;border-top:1px solid var(--sh-divider-subtle);flex-wrap:wrap}
body.siavash-gallery-archive-page .gallery-sidebar-actions .gallery-nav-link.sh-btn{
display:inline-flex;width:auto;align-items:center;justify-content:center;
padding:9px 16px;margin:0;border:1px solid var(--sh-gs-sidebar-btn-border,#3c3c3c);border-radius:2px;
/* v1.19.11 — sub-phase C: border tokenized (--sh-gs-sidebar-btn-border,
new); color reuses --sh-gs-btn-ink (already defined for
mobile-head-home.sh-btn — identical #eee shade). Values unchanged. */
color:var(--sh-gs-btn-ink,#eee);opacity:1;font-size:10.5px;letter-spacing:.05em;
}
body.siavash-gallery-archive-page .gallery-sidebar-actions .gallery-nav-link.sh-btn:hover{color:var(--sh-gs-ink,#fff);border-color:var(--sh-gs-ink,#fff);opacity:1}
/* v1.19.11 — sub-phase C: border/color wired to the existing
--sh-gs-lang-border / --sh-gs-lang-ink tokens — this desktop pill and
the mobile-head language pill already shared the exact same values
(#3a3a3a / #c9c5be), so no new tokens were needed. Values unchanged. */
body.siavash-gallery-archive-page .gallery-lang{
display:inline-flex;align-items:center;justify-content:center;
min-width:42px;height:30px;padding:5px 11px;margin:0;
border:1px solid var(--sh-gs-lang-border,#3a3a3a);border-radius:20px;background:transparent;
color:var(--sh-gs-lang-ink,#c9c5be);font-size:11px;line-height:1;letter-spacing:.02em;
transition:color .2s ease,border-color .2s ease;
}
/* v1.22 — sub-phase B: border-color tokenized (--sh-gs-control-border-hover,
defined further down this file) — same literal `#666` the mobile-head
language pill's hover used, now named once and shared by both. */
body.siavash-gallery-archive-page .gallery-lang:hover,body.siavash-gallery-archive-page .gallery-lang:focus-visible{color:var(--sh-gs-ink,#fff);border-color:var(--sh-gs-control-border-hover,#666)}
body.siavash-gallery-archive-page .gallery-sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px}
/* v1.19.11 — sub-phase C: tokenized (--sh-gs-sidebar-bottom-ink /
--sh-gs-sidebar-copy-ink, both defined further down this file),
values unchanged. */
body.siavash-gallery-archive-page .gallery-sidebar-bottom a:not(.gallery-lang):not(.gallery-nav-link){font-size:10px;color:var(--sh-gs-sidebar-bottom-ink,#ddd);transition:color .22s ease,opacity .22s ease}
body.siavash-gallery-archive-page .gallery-sidebar-bottom small{font-size:8px;line-height:1.55;color:var(--sh-gs-sidebar-copy-ink,#888);margin-top:16px;letter-spacing:.05em}
/* v1.0.15 note superseded by v1.0.17 above — .gallery-content no longer
needs any min-height of its own; it's a flex child that simply takes
its natural content height, and .gallery-shell follows it exactly. */
body.siavash-gallery-archive-page .gallery-content{flex:1;min-width:0;padding:clamp(38px,4.5vw,64px) clamp(28px,4vw,58px) 80px}
body.siavash-gallery-archive-page .gallery-mobile-head{display:none}
body.siavash-gallery-archive-page .gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(42px,4.5vw,66px) clamp(28px,4vw,58px);align-items:start}
body.siavash-gallery-archive-page .gallery-tile{display:block;width:100%;min-width:0;height:auto;overflow:visible;background:transparent}
body.siavash-gallery-archive-page .gallery-tile>a{display:block;width:100%;color:var(--sh-gs-ink,#fff)}
body.siavash-gallery-archive-page .gallery-tile-media{display:block;position:relative;width:100%;height:auto;aspect-ratio:1/1;min-height:0;overflow:hidden}
/* v2.13.2: `background:#111` removed here — confirmed dead; the v2.3.3
masonry block (`background:var(--surface)!important`) and the final
always-dark override (`background:var(--sh-gs-box-bg)!important`)
both win over this un-flagged declaration regardless. `aspect-ratio:1/1`
is left as-is — also superseded by the masonry block's `aspect-ratio:
auto!important`, but that's the old forced-square grid, a separate,
already-tracked cleanup item (not a color), not touched here. */
body.siavash-gallery-archive-page .gallery-tile-media img{display:block;width:100%;height:100%;min-width:100%;min-height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center;margin:0;padding:0;border:0;transform:scale(1);transition:transform .45s ease,opacity .3s ease}
body.siavash-gallery-archive-page .gallery-tile:hover .gallery-tile-media img{transform:scale(1.018)}
body.siavash-gallery-archive-page .gallery-tile-overlay{display:flex;min-height:0;padding:13px 1px 0;gap:18px;justify-content:space-between;align-items:baseline}
body.siavash-gallery-archive-page .gallery-tile-overlay h2{margin:0;font-family:var(--site-title-font);font-size:12px;line-height:1.5;font-weight:400;color:var(--sh-gs-ink,#fff)}
/* v1.19.11 — sub-phase C: `color:#888` removed here: confirmed dead. Same
selector is later restated as `var(--muted)!important` and then
`var(--sh-gs-ink-muted)!important` — this original value never wins. */
body.siavash-gallery-archive-page .gallery-tile-overlay span{font-size:9.5px;line-height:1.5;text-transform:uppercase;letter-spacing:.08em;text-align:end}
/* v1.19.11 — sub-phase C: `color:#777` removed here: confirmed dead, same
reasoning as `.gallery-tile-overlay span` above — a later
`!important` token rule always wins. */
body.siavash-gallery-archive-page .gallery-no-results{padding:100px 0;font-size:12px}
html[dir="rtl"] body.siavash-gallery-archive-page .gallery-tile-overlay span{text-align:start}
html[dir="rtl"] body.siavash-gallery-archive-page .gallery-brand strong{letter-spacing:0}
/* ---------- Gallery single/detail: fullscreen image + compact metadata preserved ---------- */
body.siavash-gallery-single-page{margin:0;padding:0;background:var(--sh-gs-paper,#000);color:var(--sh-gs-ink,#fff);overflow:hidden}
body.siavash-gallery-single-page #page,
body.siavash-gallery-single-page .site-content,
body.siavash-gallery-single-page .ast-container,
body.siavash-gallery-single-page .site-main,
body.siavash-gallery-single-page #content{padding:0!important;margin:0!important}
body.siavash-gallery-single-page #wpadminbar{display:none}
html[dir="rtl"] body.siavash-gallery-single-page,html[dir="rtl"] body.siavash-gallery-single-page *{font-family:"Vazirmatn",sans-serif}
html[dir="ltr"] body.siavash-gallery-single-page,html[dir="ltr"] body.siavash-gallery-single-page *{font-family:"Inter",sans-serif}
/* v1.0.10 — page now includes the site's fixed header, so the fullscreen
layout starts below it instead of covering the full viewport from y:0. */
body.siavash-gallery-single-page .gallery-single-fullscreen{position:fixed;top:var(--sh-nav-h,74px);left:0;right:0;bottom:0;max-width:100vw;height:calc(100vh - var(--sh-nav-h,74px));min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 250px;direction:ltr;background:var(--sh-gs-paper,#000);overflow:hidden}
/* v1.0.26 — Fix: this used to be a no-op (identical to the base rule
above), so the details column stayed pinned to the physical right side
in BOTH languages. Persian keeps the existing layout (image left,
details right); English now mirrors it (details left, image right) by
swapping both the column widths and the visual order of the two panels. */
html[dir="ltr"] body.siavash-gallery-single-page .gallery-single-fullscreen{grid-template-columns:250px minmax(0,1fr)}
html[dir="ltr"] body.siavash-gallery-single-page .gallery-single-visual{order:2}
html[dir="ltr"] body.siavash-gallery-single-page .gallery-single-details{order:1}
/* v1.19.11 — sub-phase C: `background:linear-gradient(45deg,#101010cf,
#1b1b1bb8)` removed here: confirmed dead. Same selector is redeclared
later (paper-reskin block, `--sh-gs-stage-bg`) with equal specificity
and no !important, so the later rule always wins — same dead-code
pattern as the `#222` family found in v1.19.10. */
body.siavash-gallery-single-page .gallery-single-visual{position:relative;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
body.siavash-gallery-single-page .gallery-single-visual img{display:block;position:absolute;inset:0;width:96%;height:96%;margin:auto;object-fit:contain;object-position:center;background:#0000}
/* v1.19.11 — sub-phase C: `background:#090909` removed here: confirmed
dead. Same selector is redeclared as `transparent` later in this file
and ultimately as an `!important` glass token (--sh-gs-glass-bg) —
this original value never reaches the screen. */
body.siavash-gallery-single-page .gallery-single-details{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:none;box-sizing:border-box}
body.siavash-gallery-single-page .gallery-single-details::-webkit-scrollbar{display:none}
html[dir="rtl"] body.siavash-gallery-single-page .gallery-single-details{direction:rtl;text-align:right;border-inline-start:0;border-inline-end:1px solid var(--sh-divider-subtle)}
/* v1.0.26 — details panel is now on the left in English, next to the
image on its right, so the divider border moves to the inline-end side
(which resolves to the physical right edge under direction:ltr). */
html[dir="ltr"] body.siavash-gallery-single-page .gallery-single-details{direction:ltr;text-align:left;border-inline-start:0;border-inline-end:1px solid var(--sh-divider-subtle)}
body.siavash-gallery-single-page .gallery-single-details-inner{display:block;width:100%;flex:none;min-height:0;height:auto;padding:35px 26px 28px;margin:0;box-sizing:border-box}
body.siavash-gallery-single-page .gallery-single-cat{margin:0 0 8px;padding:0;font-family:var(--site-title-font);font-size:9.5px;line-height:1.4;color:#777;letter-spacing:.08em}
body.siavash-gallery-single-page .gallery-single-details h1{margin:0 0 9px;padding:0;font-family:var(--site-title-font);font-size:18px;line-height:1.28;font-weight:500;color:var(--sh-gs-ink,#fff)}
html[dir="rtl"] body.siavash-gallery-single-page .gallery-single-details h1{line-height:1.3;letter-spacing:0}
body.siavash-gallery-single-page .gallery-single-details .gallery-caption{margin:0 0 12px;padding:0;font-family:var(--site-title-font);font-size:10.5px;line-height:1.6;color:#aaa}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group{margin:0;padding:9px 0 10px;border:0;border-top:1px solid var(--sh-divider-subtle)}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group:first-of-type{border-top:0;padding-top:4px}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group h2{margin:0 0 5px;padding:0;font-family:var(--site-title-font);font-size:9px;line-height:1.4;font-weight:500;color:#858585;letter-spacing:.08em}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta,body.siavash-gallery-single-page .gallery-single-details .gallery-meta>div{margin:0;border:0}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta>div{display:grid;grid-template-columns:minmax(70px,.7fr) minmax(0,1.3fr);gap:8px;padding:2.5px 0}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta-project{display:grid;grid-template-columns:minmax(74px,.7fr) minmax(0,1.3fr);gap:8px;padding:2.5px 0}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta span{font-family:var(--site-title-font);font-size:9.5px;line-height:1.45;color:#707070}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta strong{font-family:var(--site-title-font);font-size:9.8px;line-height:1.45;font-weight:400;color:#9a9a9a;word-break:normal;overflow-wrap:anywhere;white-space:normal}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta-project strong{display:block;color:#9a9a9a;text-align:start;white-space:normal;overflow-wrap:anywhere}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta-lens{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:12px;width:100%}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta-lens span{white-space:nowrap;text-align:start}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta-lens strong{display:block;width:auto;max-width:none;white-space:nowrap;overflow:visible;word-break:normal;overflow-wrap:normal;text-align:end;direction:ltr;font-size:9.5px;line-height:1.4}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group-technical{border-top:1px solid var(--sh-divider-subtle);padding-top:10px}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group-technical h2{margin-bottom:6px}
@media(max-width:900px){
body.siavash-gallery-archive-page .gallery-shell{flex-direction:column}
body.siavash-gallery-archive-page .gallery-sidebar{position:relative;flex:0 0 auto;width:100%;height:auto;inset:auto;border-inline:0;border-bottom:1px solid var(--sh-divider-subtle)}
body.siavash-gallery-archive-page .gallery-sidebar-inner{height:auto;padding:28px 24px 24px}
body.siavash-gallery-archive-page .gallery-brand{margin-bottom:28px}
body.siavash-gallery-archive-page .gallery-nav{flex-direction:row;flex-wrap:wrap;gap:16px 24px}
body.siavash-gallery-archive-page .gallery-sidebar-bottom{margin-top:20px}
body.siavash-gallery-archive-page .gallery-sidebar-bottom>a:not(.gallery-lang):not(.gallery-nav-link),
body.siavash-gallery-archive-page .gallery-sidebar-bottom>small{display:block}
body.siavash-gallery-archive-page .gallery-content,html[dir="rtl"] body.siavash-gallery-archive-page .gallery-content{margin:0;padding:28px 24px 70px}
body.siavash-gallery-archive-page .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px}
body.siavash-gallery-single-page{overflow:auto}
body.siavash-gallery-single-page .gallery-single-fullscreen{position:relative;inset:auto;top:auto;width:100%;height:auto;min-height:calc(100vh - var(--sh-nav-h,68px));padding-top:var(--sh-nav-h,68px);display:block;overflow:visible;box-sizing:border-box}
body.siavash-gallery-single-page .gallery-single-visual{position:sticky;top:var(--sh-nav-h,68px);z-index:2;width:100%;height:68vh;min-height:420px}
body.siavash-gallery-single-page .gallery-single-details{height:auto;min-height:0;overflow:visible;position:relative;z-index:3;border:0}
body.siavash-gallery-single-page .gallery-single-details-inner{padding:24px 20px 30px}
}
@media(max-width:768px){
.siavash-portfolio-page .lightbox-box{grid-template-columns:1fr;height:90vh}
.siavash-portfolio-page .lightbox-image{height:52vh;min-height:0}
.siavash-portfolio-page .lightbox-details{border-inline-start:0;border-top:1px solid var(--sh-divider-subtle);padding:22px}
}
@media(max-width:600px){
/* Archive Mobile: keep the category menu visible and usable above the gallery. */
body.siavash-gallery-archive-page .gallery-sidebar{
border-bottom:1px solid var(--sh-divider-subtle);
}
body.siavash-gallery-archive-page .gallery-sidebar-inner{
padding:20px 18px 18px;
}
body.siavash-gallery-archive-page .gallery-brand{
margin-bottom:18px;
}
body.siavash-gallery-archive-page .gallery-nav{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
align-items:center;
gap:0;
width:100%;
overflow-x:auto;
overflow-y:hidden;
padding:2px 0 7px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
body.siavash-gallery-archive-page .gallery-nav::-webkit-scrollbar{display:none}
body.siavash-gallery-archive-page .gallery-nav a{
flex:0 0 auto;
display:inline-flex;
align-items:center;
min-height:30px;
padding:0 12px;
border-inline-end:1px solid var(--sh-divider-subtle);
font-size:10px;
line-height:1.5;
white-space:nowrap;
opacity:.72;
}
body.siavash-gallery-archive-page .gallery-nav a:first-child{padding-inline-start:0}
body.siavash-gallery-archive-page .gallery-nav a:last-child{border-inline-end:0}
body.siavash-gallery-archive-page .gallery-nav a{position:relative;padding-bottom:6px}
body.siavash-gallery-archive-page .gallery-nav a.is-active{opacity:1;color:var(--sh-gs-ink,#fff)}
body.siavash-gallery-archive-page .gallery-nav a.is-active:after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:1px;background:var(--sh-gs-ink,#fff)}
body.siavash-gallery-archive-page .gallery-sidebar-actions{
display:none;
}
body.siavash-gallery-archive-page .gallery-mobile-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
}
body.siavash-gallery-archive-page .gallery-mobile-head a{color:var(--sh-gs-ink,#fff);font-size:10px}
body.siavash-gallery-archive-page .gallery-mobile-head-end{display:flex;align-items:center;gap:10px}
/* v1.22 — sub-phase B: literal greys tokenized (--sh-gs-ink-dim/
--sh-gs-btn-ink/--sh-gs-lang-ink/--sh-gs-lang-border/
--sh-gs-control-border-hover, defined further down this file in the
always-dark palette block). Values unchanged — this is the mobile
header, always inside `body.siavash-gallery-archive-page`, which is
always-dark regardless of the site's light/dark toggle. */
body.siavash-gallery-archive-page .gallery-mobile-head-home{color:var(--sh-gs-ink-dim,#999)}
body.siavash-gallery-archive-page .gallery-mobile-head-home.sh-btn{
display:inline-flex;align-items:center;justify-content:center;
padding:6px 12px;border:1px solid var(--sh-gs-line-strong,#3c3c3c);border-radius:2px;
font-size:9.5px;color:var(--sh-gs-btn-ink,#eee);
}
body.siavash-gallery-archive-page .gallery-mobile-head-home.sh-btn:hover{color:var(--sh-gs-ink,#fff);border-color:var(--sh-gs-ink,#fff)}
body.siavash-gallery-archive-page .gallery-mobile-head-lang{
display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:29px;padding:5px 10px;
border:1px solid var(--sh-gs-lang-border,#3a3a3a);border-radius:20px;background:transparent;
color:var(--sh-gs-lang-ink,#c9c5be);font-size:10px;line-height:1;
transition:color .2s ease,border-color .2s ease;
}
body.siavash-gallery-archive-page .gallery-mobile-head-lang:hover,
body.siavash-gallery-archive-page .gallery-mobile-head-lang:focus-visible{color:var(--sh-gs-ink,#fff);border-color:var(--sh-gs-control-border-hover,#666)}
/* Mobile default: editorial square layout uses two equal columns. */
body.siavash-gallery-archive-page .gallery-grid.is-editorial{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px 12px;
}
body.siavash-gallery-archive-page .gallery-grid.is-editorial .gallery-tile-media,
body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-media{
aspect-ratio:1/1;
}
body.siavash-gallery-archive-page .gallery-grid.is-compact{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px 9px;
}
body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-overlay{
display:block;
padding-top:7px;
}
body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-overlay h2{
font-size:9px;
line-height:1.5;
margin:0 0 2px;
}
body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-overlay span{
display:block;
font-size:7px;
line-height:1.5;
}
body.siavash-gallery-single-page .gallery-single-visual{height:62vh;min-height:380px}
body.siavash-gallery-single-page .gallery-single-details-inner{padding:18px 16px 28px}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta>div{grid-template-columns:1fr;gap:4px}
/* v1.0.27 — this used to be the lower-specificity `.gallery-meta
strong` and was silently defeated by the more specific base rule
further down the file, so label/value stayed spread to opposite
edges even in this single-column stacked layout instead of both
starting from the same (leading) edge. Matching the base rule's
selector still isn't enough to win here (it comes later in the
file, so equal specificity resolves in its favor regardless of
which media query matches) — !important is the correct fix for a
narrow-breakpoint override of a more specific base rule, same as
the existing .gallery-tile[hidden] override above. */
body.siavash-gallery-single-page .gallery-single-details .gallery-meta>div>strong{text-align:start !important}
body.siavash-gallery-single-page .gallery-single-details h1{font-size:18px}
}
/* ---------- Gallery single: hover prev/next arrows + filmstrip (v1.0.36) ----------
Arrows and filmstrip are hidden by default and revealed on hover of the
image area, exactly like the reference photographer-portfolio sites.
Touch devices have no hover, so .sh-controls-visible (toggled by
gallery-single.js on tap, and briefly on load) shows them there instead.
Arrow placement is intentionally physical left/right — not logical
start/end — so "previous" stays on the physical left and "next" on the
physical right in both Persian and English, matching how photo viewers
(Google Photos, native camera rolls, etc.) behave regardless of the
interface's reading direction. */
body.siavash-gallery-single-page .gallery-single-arrow{
position:absolute;top:50%;z-index:5;
display:flex;align-items:center;justify-content:center;
width:44px;height:44px;margin-top:-22px;
border:1px solid rgba(255,255,255,.22);border-radius:50%;
background:rgba(10,10,10,.42);backdrop-filter:blur(2px);
color:var(--sh-gs-ink,#fff);font-size:20px;line-height:1;text-decoration:none;
opacity:0;pointer-events:none;
transition:opacity .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease;
}
body.siavash-gallery-single-page .gallery-single-arrow span{transform:translateY(-1px)}
body.siavash-gallery-single-page .gallery-single-arrow-prev{left:16px}
body.siavash-gallery-single-page .gallery-single-arrow-next{right:16px}
body.siavash-gallery-single-page .gallery-single-visual:hover .gallery-single-arrow,
body.siavash-gallery-single-page .gallery-single-arrow:focus-visible,
body.siavash-gallery-single-page .gallery-single-visual.sh-controls-visible .gallery-single-arrow{
opacity:1;pointer-events:auto;
}
body.siavash-gallery-single-page .gallery-single-arrow:hover,
body.siavash-gallery-single-page .gallery-single-arrow:focus-visible{
background:rgba(10,10,10,.72);border-color:rgba(255,255,255,.5);
}
body.siavash-gallery-single-page .gallery-single-arrow:active{transform:scale(.92)}
body.siavash-gallery-single-page .gallery-single-filmstrip{
position:absolute;left:0;right:0;bottom:0;z-index:4;
padding:14px 16px 12px;
background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));
opacity:0;transform:translateY(10px);pointer-events:none;
transition:opacity .22s ease,transform .22s ease;
}
body.siavash-gallery-single-page .gallery-single-visual:hover .gallery-single-filmstrip,
body.siavash-gallery-single-page .gallery-single-filmstrip:focus-within,
body.siavash-gallery-single-page .gallery-single-visual.sh-controls-visible .gallery-single-filmstrip{
opacity:1;transform:translateY(0);pointer-events:auto;
}
body.siavash-gallery-single-page .gallery-single-filmstrip-track{
display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
body.siavash-gallery-single-page .gallery-single-filmstrip-track::-webkit-scrollbar{display:none}
body.siavash-gallery-single-page .gallery-single-filmstrip-item{
flex:0 0 46px;display:block;width:46px !important;height:46px !important;
max-width:46px !important;max-height:46px !important;
border-radius:2px;overflow:hidden;
border:1px solid rgba(255,255,255,.18);
opacity:.62;transition:opacity .18s ease,border-color .18s ease;
}
body.siavash-gallery-single-page .gallery-single-filmstrip-item:hover,
body.siavash-gallery-single-page .gallery-single-filmstrip-item:focus-visible{opacity:1;border-color:rgba(255,255,255,.5)}
body.siavash-gallery-single-page .gallery-single-filmstrip-item.is-current{opacity:1;border-color:var(--sh-gs-ink,#fff)}
/* v1.0.38 — some image-optimization/lazy-load plugins (seen: WP Smush's
--smush-placeholder-width/aspect-ratio custom properties, consumed by
their own injected `width:var(--smush-placeholder-width)` stylesheet
rule at the same specificity as ours) can win the cascade after gallery.css
and force the back to its native upload width (e.g. 150px) inside
this 46px box — the photo then gets clipped to a thin, stretched-looking
sliver instead of a clean square. !important guarantees this sizing
can't be overridden by any such plugin, regardless of load order. */
body.siavash-gallery-single-page .gallery-single-filmstrip-item img{
display:block !important;
width:100% !important;height:100% !important;
max-width:none !important;max-height:none !important;
object-fit:cover !important;object-position:center;
aspect-ratio:1/1 !important;
}
/* v1.0.39 — the template also now writes this exact sizing directly onto
each 's inline style attribute (single-siavash_gallery.php), so a
third-party plugin rule would have to be inline *and* !important on that
same element to still win — nothing external can. This stylesheet rule
stays as a second line of defense (e.g. if a caching plugin ever strips
inline styles) and must be kept in sync with that inline value. */
@media(hover:none){
/* No hover on touch: keep controls faintly visible so they're
discoverable, full opacity is handled by .sh-controls-visible
(tap-to-toggle, and briefly on load) via gallery-single.js. */
body.siavash-gallery-single-page .gallery-single-arrow{opacity:.55;pointer-events:auto}
body.siavash-gallery-single-page .gallery-single-filmstrip{opacity:.9;transform:translateY(0);pointer-events:auto}
}
@media(max-width:600px){
body.siavash-gallery-single-page .gallery-single-arrow{width:38px;height:38px;margin-top:-19px;font-size:17px}
body.siavash-gallery-single-page .gallery-single-arrow-prev{left:10px}
body.siavash-gallery-single-page .gallery-single-arrow-next{right:10px}
body.siavash-gallery-single-page .gallery-single-filmstrip{padding:10px 10px 9px}
body.siavash-gallery-single-page .gallery-single-filmstrip-item{width:38px !important;height:38px !important;max-width:38px !important;max-height:38px !important}
}
/* ---------- Gallery popup viewer (v1.0.37) ----------
Opened by gallery-single.js when a photo is clicked from the Gallery
grid or a Project page: it fetches that photo's real, independently
crawlable page and mounts its exact `.gallery-single-fullscreen`
markup here — same CSS as the standalone page above (activated by the
`siavash-gallery-single-page` body class the script adds while open),
just with a close button added and presented as an overlay instead of
a full navigation. */
.sh-gallery-viewer-mount{display:none}
.sh-gallery-viewer-mount.is-open{
display:block;position:fixed;inset:0;z-index:150;
overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.sh-gallery-viewer-mount .gallery-single-fullscreen{
animation:sh-gallery-viewer-in .22s ease both;
}
@media(prefers-reduced-motion:reduce){
.sh-gallery-viewer-mount .gallery-single-fullscreen{animation:none}
}
@keyframes sh-gallery-viewer-in{
from{opacity:0;transform:scale(.98)}
to{opacity:1;transform:scale(1)}
}
.sh-gallery-viewer-close{
position:fixed;top:calc(var(--sh-nav-h,74px) + 14px);z-index:160;
display:flex;align-items:center;justify-content:center;
width:40px;height:40px;margin:0;padding:0;
border-radius:50%;border:1px solid rgba(255,255,255,.25);
background:rgba(10,10,10,.5);color:var(--sh-gs-ink,#fff);font-size:22px;line-height:1;
cursor:pointer;
transition:background-color .18s ease,border-color .18s ease,transform .18s ease;
}
html[dir="rtl"] .sh-gallery-viewer-close{left:18px}
html[dir="ltr"] .sh-gallery-viewer-close{right:18px}
.sh-gallery-viewer-close:hover,.sh-gallery-viewer-close:focus-visible{
background:rgba(10,10,10,.8);border-color:rgba(255,255,255,.55);
}
.sh-gallery-viewer-close:active{transform:scale(.92)}
.sh-gallery-viewer-stage:empty{
display:flex;align-items:center;justify-content:center;min-height:100vh;
}
html.sh-gallery-viewer-lock,html.sh-gallery-viewer-lock body{overflow:hidden}
@media(max-width:600px){
.sh-gallery-viewer-close{width:36px;height:36px;font-size:19px;top:14px}
html[dir="rtl"] .sh-gallery-viewer-close{left:12px}
html[dir="ltr"] .sh-gallery-viewer-close{right:12px}
}
/* Keep the square gallery grid exactly as designed */
.gallery-tile-media,
.gallery-tile-media img{
aspect-ratio:1 / 1;
}
/* Full-image gallery/detail view: show the complete photograph */
.gallery-viewer img,
.single-gallery-image img,
.gallery-single-image img{
object-fit:contain;
}
/* Reduce layout shifts around gallery image containers */
.gallery-tile-media{overflow:hidden;}
/* Compact mobile rhythm without changing the visual language */
@media (max-width: 767px){
.site-header,
header{
max-width:100%;
}
.hero-title{
text-wrap:balance;
}
}
/* Very narrow phones */
@media (max-width: 390px){
.hero-image{max-height:74svh;}
.gallery-grid{width:100%;}
}
/* Avoid hover-only enlargement on touch devices */
@media (hover:none) and (pointer:coarse){
.gallery-tile:hover img{transform:none;}
}
/* Gallery metadata: editorial two-column alignment.
Label stays RTL/right-aligned; value stays LTR/left-aligned.
Do not use text-align: end for the value column here. */
.gallery-meta .meta-row,
.single-gallery-meta .meta-row,
.gallery-viewer .meta-row,
.meta-row{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
column-gap:18px;
align-items:baseline;
}
.meta-row > span:first-child{
text-align:right;
justify-self:stretch;
}
.meta-row > span:last-child{
text-align:left;
justify-self:stretch;
direction:ltr;
unicode-bidi:plaintext;
}
/* Keep metadata stable on narrow screens. */
@media (max-width: 480px){
.meta-row{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
column-gap:12px;
}
}
/* Gallery filter state: only one active filter should visually remain active. */
.gallery-filters [data-filter],
.gallery-filter [data-filter],
.filter-button[data-filter]{
cursor:pointer;
}
/* Image rendering hints */
img{
text-rendering:auto;
}
/* v4.2.1 — regression fix: the HTML hidden attribute must override
the gallery tile's explicit display:block rule. */
body.siavash-gallery-archive-page .gallery-tile[hidden]{
display:none !important;
}
/* Restore the intended editorial metadata alignment:
label = leading edge, value = trailing edge.
v1.0.27 — fix: this used text-align:right/left (physical), which only
reads correctly in RTL (fa), where the grid's first column happens to
land on the physical right. In LTR (en) the same grid places that
column on the physical left, so the hardcoded "right" pinned the label
against the inner/gap edge instead of the true left edge — and same
for the value on the other side — leaving English EXIF rows crammed
together instead of spread across the panel like every other page
direction/dir case. text-align:start/end tracks the grid's own
direction-based column placement instead of fighting it. */
body.siavash-gallery-single-page .gallery-single-details .gallery-meta > div > span{
text-align:start;
justify-self:stretch;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta > div > strong{
text-align:end;
justify-self:stretch;
direction:ltr;
}
/* v4.3.1 — date metadata regression fix.
Technical/EXIF values remain LTR, but the Persian date must retain
its natural RTL word order: «۲۹ مرداد ۱۴۰۵».
v1.0.27 — text-align:left changed to text-align:end for the same
reason as above: it must land on the value column's trailing edge in
both fa and en, not just fa. */
body.siavash-gallery-single-page .gallery-single-details .gallery-meta > div > strong.gallery-meta-date-value{
direction:rtl;
unicode-bidi:plaintext;
text-align:end;
white-space:nowrap;
}
/* v7.2 — Gallery display controls. Archive only. */
body.siavash-gallery-archive-page .gallery-toolbar{
display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:0 0 28px;
position:relative;z-index:10;direction:ltr;
}
body.siavash-gallery-archive-page .gallery-control{position:relative;}
/* v2.13.2 — confirmed 100% dead: every property this v7.2 block set
(size, border, background, color, the menu panel, its buttons) is
redefined later in this file (the v2.3.3 masonry-redesign block,
itself finalized by the v2.13.1 always-dark override lower down) —
same selector, equal specificity, later position always wins, so
none of this ever painted. Removed rather than migrated, same as
the gallery-home.js precedent (confirmed-dead code is deleted, not
silently carried forward). Only the still-load-bearing bits that
are NOT redefined anywhere else are kept: the svg icon rule, the
[hidden] rule and the dir="ltr" menu-direction rule (all identical
or unique — see CORE/THEME v2.13.2 changelog for the full trace). */
body.siavash-gallery-archive-page .gallery-control-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
body.siavash-gallery-archive-page .gallery-control-menu[hidden]{display:none!important}
html[dir="ltr"] body.siavash-gallery-archive-page .gallery-control-menu{direction:ltr}
body.siavash-gallery-archive-page .gallery-grid.is-editorial{grid-template-columns:repeat(2,minmax(0,1fr));}
body.siavash-gallery-archive-page .gallery-grid.is-compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 22px;}
body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-media{aspect-ratio:1/1;}
body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-overlay{padding-top:10px;gap:12px;}
body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-overlay h2{font-size:11px;}
body.siavash-gallery-archive-page .gallery-grid.is-compact .gallery-tile-overlay span{font-size:8px;}
@media(max-width:1100px){
body.siavash-gallery-archive-page .gallery-grid.is-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 20px;}
}
@media(max-width:900px){
body.siavash-gallery-archive-page .gallery-toolbar{margin-bottom:24px;}
/* "مربع بزرگ" (editorial) stays single-column/large on mobile;
"مربع کوچک" (compact) stays a 2-column small grid. Previously both
were forced to the same repeat(2,...) here, so the toggle had no
visible effect on mobile — kept intentionally distinct now. */
body.siavash-gallery-archive-page .gallery-grid.is-editorial{grid-template-columns:repeat(1,minmax(0,1fr));}
body.siavash-gallery-archive-page .gallery-grid.is-compact{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:600px){
body.siavash-gallery-archive-page .gallery-toolbar{
margin-bottom:22px;
justify-content:flex-start;
gap:7px;
}
body.siavash-gallery-archive-page .gallery-control-button{
width:36px;
height:36px;
}
/* The dropdown used to be positioned absolute relative to the small
36px button itself, which on narrow screens could push it past the
viewport edge and create horizontal scroll. Anchoring it to the
full-width toolbar instead guarantees it always stays on-screen. */
body.siavash-gallery-archive-page .gallery-control{position:static;}
body.siavash-gallery-archive-page .gallery-control-menu{
position:absolute;
inset-inline-start:12px;
inset-inline-end:12px;
left:12px;
right:12px;
width:auto;
min-width:0;
max-width:none;
}
}
@media(max-width:390px){
body.siavash-gallery-archive-page .gallery-sidebar-inner{padding-inline:14px;}
body.siavash-gallery-archive-page .gallery-grid.is-editorial{
grid-template-columns:repeat(1,minmax(0,1fr));
gap:20px 8px;
}
body.siavash-gallery-archive-page .gallery-grid.is-compact{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px 8px;
}
}
/* v1.0 semantic archive heading/pagination — matches the existing gallery visual system. */
.gallery-archive-head{padding:28px 0 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:10px}
.gallery-archive-head h1{margin:0;font-size:clamp(28px,4vw,48px);font-weight:400;line-height:1.15}
.gallery-archive-head p{margin:8px 0 0;color:var(--sh-gs-archive-head-copy,#8f8f8f);max-width:60ch;font-size:13px}
.gallery-pagination{padding:28px 0 10px}
.gallery-pagination ul{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.gallery-pagination a,.gallery-pagination span{display:inline-flex;min-width:34px;height:34px;align-items:center;justify-content:center;border:1px solid var(--sh-divider-subtle);padding:0 9px;color:var(--sh-gs-sidebar-brand-ink,#aaaaaa);font-size:11px}
.gallery-pagination .current{color:var(--sh-gs-ink,#fff);border-color:var(--sh-gs-pagination-current-border,#777777)}
/* v1.0.3 — mobile EXIF hardening. Keep the existing editorial visual
language while preventing malformed/long metadata from overflowing. */
body.siavash-gallery-single-page .gallery-single-details .gallery-meta > div > strong{
min-width:0;
max-width:100%;
overflow-wrap:anywhere;
word-break:break-word;
white-space:normal;
}
@media(max-width:600px){
body.siavash-gallery-single-page .gallery-single-details .gallery-meta,
body.siavash-gallery-single-page .gallery-single-details .gallery-meta > div{
min-width:0;
width:100%;
}
}
/* -------------------------------------------------------------------------
* Gallery refinement — v1.0.40 / Core 2.2.7
* Principle: the archive is a quiet contact sheet; the viewer is where the
* photograph, sequence and metadata take over. No decorative hover panels,
* no aggressive zoom, no UI sitting permanently on top of the image.
* ------------------------------------------------------------------------- */
body.siavash-gallery-archive-page .gallery-tile>a{
position:relative;
text-decoration:none;
outline:0;
}
/* v2.13.2: standalone `background:#0b0b0b` rule removed — confirmed
dead for the same reason as the `#111` above (later `!important`
layers always win regardless of source order). */
body.siavash-gallery-archive-page .gallery-tile-media img{
transform:none;
transition:opacity .28s ease,transform .5s cubic-bezier(.22,.61,.36,1),filter .28s ease;
will-change:transform;
}
body.siavash-gallery-archive-page .gallery-tile:hover .gallery-tile-media img,
body.siavash-gallery-archive-page .gallery-tile:focus-within .gallery-tile-media img{
transform:scale(1.012);
opacity:.92;
}
body.siavash-gallery-archive-page .gallery-tile-overlay{
padding:11px 0 0;
gap:14px;
align-items:baseline;
transition:opacity .22s ease,transform .22s ease;
}
body.siavash-gallery-archive-page .gallery-tile-overlay h2{
font-size:11px;
line-height:1.45;
letter-spacing:.01em;
}
body.siavash-gallery-archive-page .gallery-tile-overlay span{
font-size:8.5px;
line-height:1.45;
letter-spacing:.09em;
}
body.siavash-gallery-archive-page .gallery-tile>a:focus-visible .gallery-tile-media{
outline:1px solid currentColor;
outline-offset:4px;
}
/* Viewer: one calm control language. Arrows are tiny, transparent and only
appear when useful. The image remains the visual priority. */
/* v1.19.11 — sub-phase C: standalone `body.siavash-gallery-single-page
.gallery-single-visual{background:#080808}` rule removed here:
confirmed dead, same reasoning as the gradient removed earlier in this
file for the same selector — the later `--sh-gs-stage-bg` rule (paper
reskin block, further down this file) always wins. */
body.siavash-gallery-single-page .gallery-single-visual img{
width:min(96%,1500px);
height:96%;
transition:opacity .18s ease;
}
body.siavash-gallery-single-page .gallery-single-arrow{
width:40px;
height:40px;
margin-top:-20px;
border:0;
border-radius:50%;
background:rgba(0,0,0,.18);
box-shadow:none;
backdrop-filter:blur(3px);
color:rgba(255,255,255,.82);
font-size:22px;
}
body.siavash-gallery-single-page .gallery-single-arrow-prev{left:18px}
body.siavash-gallery-single-page .gallery-single-arrow-next{right:18px}
body.siavash-gallery-single-page .gallery-single-arrow:hover,
body.siavash-gallery-single-page .gallery-single-arrow:focus-visible{
background:rgba(0,0,0,.42);
border-color:transparent;
color:var(--sh-gs-ink,#fff);
}
body.siavash-gallery-single-page .gallery-single-counter{
position:absolute;
top:18px;
left:50%;
z-index:6;
transform:translateX(-50%);
padding:5px 9px;
border:1px solid rgba(255,255,255,.12);
border-radius:999px;
background:rgba(0,0,0,.20);
backdrop-filter:blur(5px);
color:rgba(255,255,255,.72);
font-family:var(--site-title-font);
font-size:9px;
line-height:1;
letter-spacing:.08em;
opacity:0;
transition:opacity .2s ease;
pointer-events:none;
}
body.siavash-gallery-single-page .gallery-single-visual:hover .gallery-single-counter,
body.siavash-gallery-single-page .gallery-single-visual.sh-controls-visible .gallery-single-counter{
opacity:1;
}
body.siavash-gallery-single-page .gallery-single-filmstrip{
padding:12px 16px 10px;
background:linear-gradient(to top,rgba(0,0,0,.52),rgba(0,0,0,0));
}
body.siavash-gallery-single-page .gallery-single-filmstrip-item{
flex-basis:44px;
width:44px !important;
height:44px !important;
max-width:44px !important;
max-height:44px !important;
border-color:rgba(255,255,255,.12);
border-radius:1px;
}
body.siavash-gallery-single-page .gallery-single-filmstrip-item.is-current{
border-color:var(--sh-gs-ink,#fff);
}
/* Gallery item metadata: text-only beside the photograph. The image remains
visually unchanged; the information column has no card/panel background.
FA places it on the physical right, EN on the physical left. */
body.siavash-gallery-single-page .gallery-single-details{
background:transparent;
}
body.siavash-gallery-single-page .gallery-single-details-inner{
padding:28px 24px 26px;
}
html[dir="rtl"] body.siavash-gallery-single-page .gallery-single-details{
text-align:right;
}
html[dir="ltr"] body.siavash-gallery-single-page .gallery-single-details{
text-align:left;
}
/* Metadata hierarchy remains text-only: labels, values and EXIF sit directly
on the page surface with no card treatment. */
body.siavash-gallery-single-page .gallery-single-details-inner{
padding:32px 24px 26px;
}
body.siavash-gallery-single-page .gallery-single-details h1{
font-size:17px;
letter-spacing:.01em;
}
/* v1.19.12 — sub-phase C (part 2): newly discovered dead colors in this
block (a middle layer between the old v1.0.40 editorial re-skin already
cleaned up in v1.19.10, and the final theme-aware `!important`-free
layer further down this file that actually wins). Cascade-traced: each
`color`/`border-top-color` below is redeclared on the exact same
selector later in the file (paired with `.sh-gallery-viewer-mount`,
same specificity, later position) and never renders. The non-color
properties in these same rules (line-height, font-size, letter-spacing,
text-transform, padding) are NOT redeclared later, so they stay — only
the dead color lines were removed. */
body.siavash-gallery-single-page .gallery-single-details .gallery-caption{
line-height:1.7;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group{
padding:11px 0 12px;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group h2{
font-size:8.5px;
letter-spacing:.1em;
text-transform:uppercase;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta>div{
padding:3px 0;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta span{
font-size:9px;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta strong{
font-size:9.5px;
}
/* Popup itself: the photograph should arrive quietly, without a heavy modal
frame. The close control is the only persistent chrome. */
.sh-gallery-viewer-mount.is-open{
background:var(--sh-gs-paper,#000);
}
.sh-gallery-viewer-mount .gallery-single-fullscreen{
animation:sh-gallery-viewer-in .18s ease both;
}
.sh-gallery-viewer-close{
width:34px;
height:34px;
border:1px solid rgba(255,255,255,.14);
border-radius:50%;
background:rgba(0,0,0,.28);
color:rgba(255,255,255,.78);
font-size:22px;
line-height:1;
box-shadow:none;
transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.sh-gallery-viewer-close:hover,
.sh-gallery-viewer-close:focus-visible{
background:rgba(0,0,0,.55);
border-color:rgba(255,255,255,.35);
color:var(--sh-gs-ink,#fff);
}
.sh-gallery-viewer-close:active{transform:scale(.94)}
@media(prefers-reduced-motion:reduce){
body.siavash-gallery-archive-page .gallery-tile-media img,
body.siavash-gallery-archive-page .gallery-tile-overlay,
body.siavash-gallery-single-page .gallery-single-visual img,
body.siavash-gallery-single-page .gallery-single-counter,
.sh-gallery-viewer-close{transition:none}
}
@media(max-width:900px){
body.siavash-gallery-single-page .gallery-single-counter{top:12px}
}
@media(max-width:600px){
body.siavash-gallery-archive-page .gallery-tile-media img{transform:none}
body.siavash-gallery-archive-page .gallery-tile:hover .gallery-tile-media img,
body.siavash-gallery-archive-page .gallery-tile:focus-within .gallery-tile-media img{transform:none;opacity:1}
body.siavash-gallery-single-page .gallery-single-counter{top:10px;font-size:8px}
body.siavash-gallery-single-page .gallery-single-arrow{width:36px;height:36px;margin-top:-18px}
body.siavash-gallery-single-page .gallery-single-arrow-prev{left:8px}
body.siavash-gallery-single-page .gallery-single-arrow-next{right:8px}
}
/* Archive hover: stable, quiet, no image jump. */
body.siavash-gallery-archive-page .gallery-tile-media img{
transform:none !important;
transition:opacity .18s ease,filter .18s ease !important;
will-change:auto;
}
body.siavash-gallery-archive-page .gallery-tile-media::after{
content:"";
position:absolute;
inset:0;
border:1px solid var(--sh-gs-hover-ring,rgba(242,239,232,.18));
opacity:0;
pointer-events:none;
transition:opacity .18s ease;
}
body.siavash-gallery-archive-page .gallery-tile:hover .gallery-tile-media img,
body.siavash-gallery-archive-page .gallery-tile:focus-within .gallery-tile-media img{
transform:none !important;
opacity:.94;
filter:none;
}
body.siavash-gallery-archive-page .gallery-tile:hover .gallery-tile-media::after,
body.siavash-gallery-archive-page .gallery-tile:focus-within .gallery-tile-media::after{opacity:1}
@media (hover:none) and (pointer:coarse){
body.siavash-gallery-single-page .gallery-single-arrow{opacity:.72}
}
/* v1.19.8 — removed: the "Light-mode-safe base for standalone Core
pages" block that used to be here (see THEME-v1.19.8-CHANGELOG.md).
Its own comment said it only existed for "if the Core stylesheet is
used without the child theme" — a scenario that never happens in this
deployment (Core and this child theme always ship together). Confirmed
via header.php that html[data-theme] really does flip to "light" on
the site's own toggle (localStorage 'sh-theme-v2'), so this !important
block was silently fighting the documented "viewer/archive gallery is
always dark, independent of the site's light/dark toggle" decision —
for the arrow buttons specifically (an extra html[data-theme="light"]
attribute-selector component gave it just enough specificity to beat
every later token-based "always dark" rule; the close button had
already been half-patched with a separate neutralize rule further
down, which is now also removed as redundant, see below).
counter/filmstrip/tile-media already have their own unconditional
dark-token rules elsewhere in this file, so nothing needs to replace
this block — removing it lets those rules show through as intended. */
@media(max-width:600px){
body.siavash-gallery-single-page .gallery-single-arrow{width:36px;height:36px;margin-top:-18px}
.sh-gallery-viewer-close{width:36px;height:36px}
}
/* -------------------------------------------------------------------------
* Photo Viewer presentation — Artlogic editorial reference
* Replaces the previous popup skin instead of layering overrides on top of it.
*
* The reference composition is deliberately quiet:
* - full white canvas
* - generous negative space
* - editorial information column on one side
* - contained photograph on the opposite side
* - one minimal close control
*
* Navigation remains functional for multi-image galleries, but never becomes
* a permanent visual element in the composition.
* ------------------------------------------------------------------------- */
/* v2.13.3 — `background:#fff;color:#222` removed here: confirmed dead.
This was the pre-v2.2.11 popup's original unconditional white base
skin; the v2.2.11 block below (`.sh-gallery-viewer-mount.is-open{
background:var(--sh-gs-surface)!important;color:var(--sh-gs-ink)
!important}`) has painted over it ever since — same selector, later,
!important. Layout properties kept, only the dead color pair removed. */
.sh-gallery-viewer-mount.is-open{
position:fixed;
inset:0;
z-index:99999;
overflow:hidden;
}
.sh-gallery-viewer-mount .sh-gallery-viewer-stage{
width:100%;
height:100%;
min-height:0;
}
.sh-gallery-viewer-mount .gallery-single-fullscreen{
position:fixed;
inset:0;
max-width:100vw;
height:100dvh;
min-height:0;
display:grid;
grid-template-columns:minmax(430px,38vw) minmax(0,1fr);
direction:ltr;
overflow:hidden;
}
.sh-gallery-viewer-mount .gallery-single-visual{
position:relative;
order:2;
width:100%;
height:100%;
min-width:0;
min-height:0;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.sh-gallery-viewer-mount .gallery-single-visual img{
position:relative;
inset:auto;
display:block;
width:auto;
height:auto;
max-width:calc(100% - 8vw);
max-height:calc(100dvh - 15vh);
object-fit:contain;
object-position:center;
margin:0;
background:transparent;
}
.sh-gallery-viewer-mount .gallery-single-details{
position:relative;
order:1;
width:100%;
height:100%;
min-width:0;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
scrollbar-width:none;
border:0;
box-sizing:border-box;
}
.sh-gallery-viewer-mount .gallery-single-details::-webkit-scrollbar{display:none}
.sh-gallery-viewer-mount .gallery-single-details-inner{
min-height:100%;
height:auto;
box-sizing:border-box;
padding:15.2vh 5.9vw 6vh 6.4vw;
margin:0;
}
.sh-gallery-viewer-mount .gallery-single-back,
.sh-gallery-viewer-mount .gallery-single-cat{
display:none;
}
/* v1.22 — sub-phase B, first pass: `border-bottom:1px solid #e4e4e4` and
`color:#222` removed here: confirmed dead. This h1 rule pre-dates two
later, equal-or-higher-specificity layers on the exact same selector
(`.sh-gallery-viewer-mount .gallery-single-details h1`) further down
this file: the "editorial paper skin" block (`border-bottom:1px solid
var(--sh-gs-line)`, later `var(--sh-gs-accent-line)`, `color:var(
--sh-gs-ink)`) and, after that, the theme-aware `!important` block
(`border-bottom-color:var(--sh-gs-line)!important;color:var(--sh-gs-ink)
!important`). The `!important` rule always wins regardless of source
order, so both literals here never actually render. Non-color layout
properties (padding, font-size, letter-spacing, uppercase, etc.) are
untouched — those aren't overridden and still apply. */
.sh-gallery-viewer-mount .gallery-single-details h1{
margin:0;
padding:0 0 34px;
font-family:"Inter",sans-serif;
font-size:23px;
line-height:1.15;
font-weight:500;
letter-spacing:.16em;
text-transform:uppercase;
}
/* v1.22 — sub-phase B: `color:#727272` removed here: confirmed dead, same
reasoning as the h1 above — overridden by the later non-important
`color:var(--sh-gs-ink-soft)` re-skin rule and then again by the
`!important` theme-aware rule further down. */
.sh-gallery-viewer-mount .gallery-single-details .gallery-caption{
margin:8.8vh 0 0;
padding:0;
font-family:"Inter",sans-serif;
font-size:15px;
line-height:1.55;
font-weight:400;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group{
margin:0;
padding:0;
border:0;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group:not(.gallery-detail-group-technical){
margin-top:20px;
}
/* v1.22 — sub-phase B: `color:#777` removed here: confirmed dead. This
selector's ancestor (``, see
single-siavash_gallery.php) always carries the plain `.gallery-detail-
group` class too, so the later `!important` rule targeting `.gallery-
detail-group h2{color:var(--sh-gs-ink-faint)!important}` matches this
h2 as well and always wins. */
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group h2{
margin:0 0 10px;
padding:0;
font-family:"Inter",sans-serif;
font-size:11px;
line-height:1.35;
font-weight:500;
letter-spacing:.11em;
text-transform:uppercase;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta,
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta>div{
margin:0;
border:0;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta>div{
display:grid;
grid-template-columns:minmax(115px,.7fr) minmax(0,1.3fr);
gap:16px;
padding:0 0 9px;
font-family:"Inter",sans-serif;
}
/* v1.22 — sub-phase B: `color:#8a8a8a` removed here: confirmed dead,
overridden by the later `!important` rule (`color:var(--sh-gs-ink-faint)
!important`) on the same selector further down this file. */
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta span{
font-size:12px;
line-height:1.5;
}
/* v1.22 — sub-phase B: `color:#666` removed here: confirmed dead, same
reasoning — overridden by the later `!important` rule (`color:var(
--sh-gs-ink-soft)!important`, shared with `.gallery-meta-project
strong` below) further down this file. */
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta strong{
min-width:0;
max-width:100%;
font-size:13px;
line-height:1.5;
font-weight:400;
white-space:normal;
overflow-wrap:anywhere;
word-break:normal;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta-project{
display:block;
padding:0;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta-project span{
display:none;
}
/* v1.22 — sub-phase B: `color:#666` removed here: confirmed dead, same
`!important` override as `.gallery-meta strong` above (the rule further
down explicitly targets this selector too). */
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta-project strong{
display:block;
font-size:13px;
}
/* v1.22 — sub-phase B: `border:1px solid #dcdcdc` / `background:#fafafa`
replaced with the equivalent tokens here (not just deleted — the later
`!important` rule only restates `border-color`/`background`, so the
literal border-width/style ("1px solid") in this shorthand is still the
live source; using the token keeps this rule truthful instead of
leaving a hardcoded value that only ever renders as a coincidence of
the override matching it). Zero visual change: the `!important` rule
further down this file already forced these exact token values. */
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical, .sh-gallery-viewer-mount .gallery-single-details .gallery-exif-box{
margin-top:34px;
padding:18px 20px 16px;
border:1px solid var(--sh-gs-box-border,#dcdcdc);
background:var(--sh-gs-box-bg,#fafafa);
box-sizing:border-box;
}
/* v1.22 — sub-phase B: `color:#666` removed here: confirmed dead, same
`.gallery-detail-group h2` `!important` override reasoning as above —
this technical/EXIF h2 also carries the plain `.gallery-detail-group`
class on its ancestor. */
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical h2, .sh-gallery-viewer-mount .gallery-single-details .gallery-exif-box h2{
margin-bottom:13px;
font-size:10px;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical .gallery-meta>div, .sh-gallery-viewer-mount .gallery-single-details .gallery-exif-box .gallery-meta>div{
grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr);
padding:5px 0;
}
/* v1.22 — sub-phase B: entire rule removed here (it only ever set
`color:#858585`): confirmed dead, overridden by the later `!important`
rule on the same selector (`color:var(--sh-gs-ink-faint)!important`)
further down this file. */
/* v1.22 — sub-phase B: `color:#4f4f4f` removed here: confirmed dead, same
reasoning (`color:var(--sh-gs-ink-soft)!important` further down this
file). `text-align`/`direction` are layout, not color — kept as-is. */
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical .gallery-meta strong, .sh-gallery-viewer-mount .gallery-single-details .gallery-exif-box .gallery-meta strong{
text-align:left;
direction:ltr;
}
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-fullscreen{
grid-template-columns:minmax(0,1fr) minmax(430px,38vw);
}
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-visual{
order:1;
}
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details{
order:2;
}
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details-inner{
padding-left:6.4vw;
padding-right:5.9vw;
}
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details h1,
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details .gallery-caption,
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details .gallery-meta{
direction:rtl;
text-align:right;
}
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details h1{
letter-spacing:0;
font-family:"Vazirmatn",sans-serif;
font-size:24px;
}
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical .gallery-meta strong, .sh-gallery-viewer-mount .gallery-single-details .gallery-exif-box .gallery-meta strong{
text-align:left;
direction:ltr;
}
.sh-gallery-viewer-mount .gallery-single-arrow{
/* v2.2.11 — was `position:fixed`, anchored to the browser viewport's own
left/right edges. That works only while the photo happens to fill the
side of the screen the arrow is pinned to. The moment the layout
mirrors for RTL (see the `html[dir="rtl"]` column swap below — photo
and text panel trade places), the viewport-fixed arrows stay put and
end up sitting over the TEXT panel instead of the photo. `position:
absolute` scopes them to `.gallery-single-visual` (which already has
`position:relative`, directly above) instead, so they always hug the
photo's own edges no matter which side of the screen it's on — no
direction-specific override needed. This matches how the standalone
permalink page's arrows already work (see the "intentionally physical
left/right" comment further up this file), just via `absolute` instead
of the standalone page's non-fixed-viewport container. */
position:absolute;
top:50%;
z-index:30;
display:flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
margin-top:-17px;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
color:#555;
opacity:0;
pointer-events:none;
transition:opacity .18s ease,color .18s ease;
}
.sh-gallery-viewer-mount .gallery-single-arrow-prev{left:22px}
.sh-gallery-viewer-mount .gallery-single-arrow-next{right:22px}
.sh-gallery-viewer-mount .gallery-single-visual:hover .gallery-single-arrow,
.sh-gallery-viewer-mount .gallery-single-visual.sh-controls-visible .gallery-single-arrow,
.sh-gallery-viewer-mount .gallery-single-arrow:focus-visible{
opacity:1;
pointer-events:auto;
}
.sh-gallery-viewer-mount .gallery-single-arrow:hover,
.sh-gallery-viewer-mount .gallery-single-arrow:focus-visible{
/* v1.19.8 — color:#111 removed here: confirmed dead. A later,
equal-specificity `!important` rule (`.sh-gallery-viewer-mount
.gallery-single-arrow:hover{color:var(--sh-gs-ink) !important}`,
further down this file) always wins the cascade — this line never
actually rendered. */
background:transparent;
}
.sh-gallery-viewer-mount .gallery-single-arrow span{
display:block;
width:9px;
height:9px;
border-top:1px solid currentColor;
border-right:1px solid currentColor;
font-size:0;
}
.sh-gallery-viewer-mount .gallery-single-arrow-prev span{
transform:rotate(-135deg) translate(-1px,-1px);
}
.sh-gallery-viewer-mount .gallery-single-arrow-next span{
transform:rotate(45deg) translate(-1px,-1px);
}
.sh-gallery-viewer-mount .gallery-single-counter,
.sh-gallery-viewer-mount .gallery-single-filmstrip{
display:none;
}
.sh-gallery-viewer-mount .sh-gallery-viewer-close{
position:fixed;
top:25px;
right:25px;
z-index:40;
width:30px;
height:30px;
padding:0;
margin:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
/* v1.19.8 — color:#5c5c5c removed here: confirmed dead, same reasoning
as the two hover colors above (later equal-specificity `!important`
token rule — `.sh-gallery-viewer-mount .sh-gallery-viewer-close{
color:var(--sh-gs-accent-ink) !important}`, further down this file —
always wins). */
font-size:0;
line-height:1;
appearance:none;
-webkit-appearance:none;
}
.sh-gallery-viewer-mount .sh-gallery-viewer-close::before,
.sh-gallery-viewer-mount .sh-gallery-viewer-close::after{
content:"";
position:absolute;
top:50%;
left:50%;
width:28px;
height:1px;
margin:-.5px 0 0 -14px;
background:currentColor;
}
.sh-gallery-viewer-mount .sh-gallery-viewer-close::before{transform:rotate(45deg)}
.sh-gallery-viewer-mount .sh-gallery-viewer-close::after{transform:rotate(-45deg)}
.sh-gallery-viewer-mount .sh-gallery-viewer-close:hover,
.sh-gallery-viewer-mount .sh-gallery-viewer-close:focus-visible{
/* v1.19.8 — color:#111 removed here: same confirmed-dead reasoning as
the arrow above (later equal-specificity `!important` token rule
always wins). */
background:transparent;
}
@media(max-width:1100px){
.sh-gallery-viewer-mount .gallery-single-fullscreen{
grid-template-columns:minmax(360px,42vw) minmax(0,1fr);
}
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-fullscreen{
grid-template-columns:minmax(0,1fr) minmax(360px,42vw);
}
.sh-gallery-viewer-mount .gallery-single-details-inner{
padding-top:12vh;
padding-left:5vw;
padding-right:4vw;
}
.sh-gallery-viewer-mount .gallery-single-visual img{
max-width:calc(100% - 5vw);
max-height:calc(100dvh - 12vh);
}
}
@media(max-width:700px){
.sh-gallery-viewer-mount.is-open{
overflow:auto;
}
.sh-gallery-viewer-mount .gallery-single-fullscreen{
position:relative;
inset:auto;
width:100%;
height:auto;
min-height:100dvh;
display:flex;
flex-direction:column;
overflow:visible;
}
.sh-gallery-viewer-mount .gallery-single-visual,
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-visual{
order:1;
width:100%;
height:64dvh;
min-height:420px;
flex:0 0 64dvh;
}
.sh-gallery-viewer-mount .gallery-single-details,
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details{
order:2;
width:100%;
height:auto;
overflow:visible;
}
.sh-gallery-viewer-mount .gallery-single-details-inner,
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details-inner{
padding:48px 24px 48px;
}
.sh-gallery-viewer-mount .gallery-single-visual img{
max-width:calc(100% - 32px);
max-height:calc(64dvh - 32px);
}
.sh-gallery-viewer-mount .gallery-single-details h1{
padding-bottom:24px;
font-size:18px;
letter-spacing:.13em;
}
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details h1{
font-size:20px;
letter-spacing:0;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-caption{
margin-top:44px;
font-size:14px;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta>div{
grid-template-columns:1fr;
gap:4px;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical, .sh-gallery-viewer-mount .gallery-single-details .gallery-exif-box{
margin-top:30px;
padding:16px;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical .gallery-meta>div, .sh-gallery-viewer-mount .gallery-single-details .gallery-exif-box .gallery-meta>div{
grid-template-columns:1fr;
}
.sh-gallery-viewer-mount .gallery-single-arrow{
opacity:.7;
pointer-events:auto;
}
.sh-gallery-viewer-mount .gallery-single-arrow-prev{left:10px}
.sh-gallery-viewer-mount .gallery-single-arrow-next{right:10px}
.sh-gallery-viewer-mount .sh-gallery-viewer-close{
top:14px;
right:14px;
}
}
@media(prefers-reduced-motion:reduce){
.sh-gallery-viewer-mount .gallery-single-arrow,
.sh-gallery-viewer-mount .sh-gallery-viewer-close{transition:none}
}
/* v2.2.8.3 — dark-theme control/divider visibility: slightly brighter than
the previous near-black lines, while remaining restrained. */
body.siavash-gallery-archive-page{
--sh-divider-subtle:rgba(232,224,211,.22);
}
body.siavash-gallery-archive-page .gallery-sidebar-actions,
body.siavash-gallery-archive-page .gallery-archive-head{
border-color:rgba(232,224,211,.22);
}
body.siavash-gallery-archive-page .gallery-sidebar{
border-inline-color:rgba(232,224,211,.22);
}
body.siavash-gallery-archive-page .gallery-sidebar-actions .gallery-nav-link.sh-btn,
body.siavash-gallery-archive-page .gallery-mobile-head-home.sh-btn,
body.siavash-gallery-archive-page .gallery-lang,
body.siavash-gallery-archive-page .gallery-mobile-head-lang,
body.siavash-gallery-archive-page .gallery-control-button,
body.siavash-gallery-archive-page .gallery-control-menu{
border-color:var(--sh-gs-nav-border,rgba(232,224,211,.28));
}
body.siavash-gallery-archive-page .gallery-control-button:hover,
body.siavash-gallery-archive-page .gallery-control-button:focus-visible,
body.siavash-gallery-archive-page .gallery-control-button[aria-expanded="true"]{
border-color:var(--sh-gs-nav-border-hover,rgba(242,239,232,.56));
}
body.siavash-gallery-single-page .gallery-single-details{
border-color:rgba(232,224,211,.22);
}
@media(max-width:600px){
body.siavash-gallery-archive-page .gallery-mobile-head-end{flex-wrap:wrap;justify-content:flex-end;row-gap:7px}
/* v1.22 — sub-phase B: tokenized (--sh-gs-social-ink/--sh-gs-copy-ink,
defined further down this file), values unchanged. */
body.siavash-gallery-archive-page .gallery-mobile-head-social{font-size:9px !important;color:var(--sh-gs-social-ink,#bdb8af) !important}
body.siavash-gallery-archive-page .gallery-mobile-head-copy{flex-basis:100%;text-align:end;font-size:7px;line-height:1.45;color:var(--sh-gs-copy-ink,#85817a)}
}
/* =========================================================================
v1.0.40 — Gallery item ("/gallery-item") editorial re-skin.
---------------------------------------------------------------------
Replaces the previous dark/mixed art direction for the single-photo
viewer (standalone page AND the AJAX popup mount — both share this
markup, see single-siavash_gallery.php) with a calm "paper" editorial
look: warm off-white ground, ink typography, a serif italic title.
Kept as one additive block, appended after every historical fix above,
so none of the existing Smush/RTL/cascade-order fixes above have to be
touched or re-verified — this only changes color, type and the two new
template pieces (action buttons, EXIF disclosure). Written once against
both contexts via comma-combined selectors instead of two copies, so
it doesn't repeat the duplication pattern of the blocks above.
========================================================================= */
body.siavash-gallery-single-page,
.sh-gallery-viewer-mount{
--sh-gs-paper:#faf9f6;
--sh-gs-paper-deep:#f2f0eb;
--sh-gs-ink:#171615;
--sh-gs-ink-soft:#55514c;
--sh-gs-ink-faint:#928d84;
--sh-gs-line:#e2ded5;
--sh-gs-accent-ink:#6b5f47;
--sh-gs-stage-bg:#edeae3;
--sh-gs-mat:#f2f0eb;
}
/* ---- stage (image side) ---- */
body.siavash-gallery-single-page .gallery-single-fullscreen,
.sh-gallery-viewer-mount .gallery-single-fullscreen{
background:var(--sh-gs-stage-bg);
}
body.siavash-gallery-single-page .gallery-single-visual,
.sh-gallery-viewer-mount .gallery-single-visual{
background:var(--sh-gs-stage-bg);
}
body.siavash-gallery-single-page .gallery-single-visual img,
.sh-gallery-viewer-mount .gallery-single-visual img{
width:auto;height:auto;
max-width:82%;max-height:78vh;
position:relative;inset:auto;margin:auto;
box-shadow:0 30px 70px -25px rgba(20,18,15,.35);
/* v1.19.9 — was a hardcoded #fff (see THEME-v1.19.9-CHANGELOG.md); SN
confirmed the white mat under the dark stage is intentional design,
asked for a warmer white via the token system instead of pure
white. */
background:var(--sh-gs-mat);
}
@media(max-width:900px){
body.siavash-gallery-single-page .gallery-single-visual img{max-width:88%;max-height:56vh}
}
@media(max-width:700px){
.sh-gallery-viewer-mount .gallery-single-visual img{max-width:calc(100% - 32px)}
}
/* ---- info column (details side) ---- */
body.siavash-gallery-single-page .gallery-single-details,
.sh-gallery-viewer-mount .gallery-single-details{
background:var(--sh-gs-paper);
color:var(--sh-gs-ink);
border-color:var(--sh-gs-line);
}
body.siavash-gallery-single-page .gallery-single-fullscreen{
grid-template-columns:minmax(0,1fr) minmax(300px,32vw);
}
html[dir="ltr"] body.siavash-gallery-single-page .gallery-single-fullscreen{
grid-template-columns:minmax(300px,32vw) minmax(0,1fr);
}
body.siavash-gallery-single-page .gallery-single-cat,
.sh-gallery-viewer-mount .gallery-single-cat{
display:block;
margin:0 0 20px;
font-size:11px;
font-weight:600;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--sh-gs-ink-faint);
}
body.siavash-gallery-single-page .gallery-single-details h1,
.sh-gallery-viewer-mount .gallery-single-details h1{
margin:0 0 26px;
padding:0 0 24px;
border-bottom:1px solid var(--sh-gs-line);
/* v2.9.1 — this was the one place left still on the old "Artlogic
reference" design direction: a Georgia serif italic title, never
brought into the site's unified Inter/Vazirmatn system. The RTL
override two rules down already corrected this for Persian; English
was the gap — exactly the "some parts still don't use the main
fonts" issue. Now both directions share the same font stack, only
differing in size/spacing where the scripts genuinely need it. */
font-family:var(--site-title-font);
font-style:normal;
font-weight:400;
font-size:24px;
line-height:1.4;
letter-spacing:0;
text-transform:none;
color:var(--sh-gs-ink);
}
html[dir="rtl"] body.siavash-gallery-single-page .gallery-single-details h1,
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details h1{
font-size:22px;
letter-spacing:0;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-caption,
.sh-gallery-viewer-mount .gallery-single-details .gallery-caption{
color:var(--sh-gs-ink-soft);
font-size:13.5px;
line-height:1.7;
}
/* ---- meta groups, restyled as a quiet specs list ---- */
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group,
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group{
border-top:1px solid var(--sh-gs-line);
padding:14px 0;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group:first-of-type,
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group:first-of-type{
border-top:0;padding-top:0;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group h2,
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group h2{
color:var(--sh-gs-ink-faint);
font-size:10.5px;
letter-spacing:.1em;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta span,
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta span{
color:var(--sh-gs-ink-faint);
}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta strong,
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta strong{
color:var(--sh-gs-ink-soft);
}
/* ---- EXIF / technical details: collapsible disclosure ---- */
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group-technical,
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical{
background:none;
border:0;
border-top:1px solid var(--sh-gs-line);
padding:0;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-exif-toggle,
.sh-gallery-viewer-mount .gallery-single-details .gallery-exif-toggle{
list-style:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 0;
font-family:var(--site-title-font);
font-size:10.5px;
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
color:var(--sh-gs-ink-faint);
}
body.siavash-gallery-single-page .gallery-single-details .gallery-exif-toggle::-webkit-details-marker,
.sh-gallery-viewer-mount .gallery-single-details .gallery-exif-toggle::-webkit-details-marker{
display:none;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-exif-plus,
.sh-gallery-viewer-mount .gallery-single-details .gallery-exif-plus{
font-size:14px;
font-weight:400;
color:var(--sh-gs-ink-faint);
transition:transform .2s ease;
text-transform:none;
letter-spacing:0;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group-technical[open] .gallery-exif-plus,
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical[open] .gallery-exif-plus{
transform:rotate(45deg);
}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group-technical .gallery-meta,
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical .gallery-meta{
padding-bottom:16px;
}
/* ---- action buttons: back to previous page / home ---- */
body.siavash-gallery-single-page .gallery-single-actions,
.sh-gallery-viewer-mount .gallery-single-actions{
display:flex;
flex-direction:column;
gap:10px;
margin-top:28px;
}
body.siavash-gallery-single-page .gallery-single-action,
.sh-gallery-viewer-mount .gallery-single-action{
display:block;
width:100%;
box-sizing:border-box;
padding:13px 16px;
font-family:var(--site-title-font);
font-size:11px;
font-weight:600;
letter-spacing:.1em;
text-transform:uppercase;
text-align:center;
text-decoration:none;
border-radius:2px;
transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
body.siavash-gallery-single-page .gallery-single-action-primary,
.sh-gallery-viewer-mount .gallery-single-action-primary{
background:var(--sh-gs-ink);
color:var(--sh-gs-paper);
border:1px solid var(--sh-gs-ink);
}
body.siavash-gallery-single-page .gallery-single-action-primary:hover,
body.siavash-gallery-single-page .gallery-single-action-primary:focus-visible,
.sh-gallery-viewer-mount .gallery-single-action-primary:hover,
.sh-gallery-viewer-mount .gallery-single-action-primary:focus-visible{
background:var(--sh-gs-paper,#000);border-color:var(--sh-gs-paper,#000);
}
body.siavash-gallery-single-page .gallery-single-action-ghost,
.sh-gallery-viewer-mount .gallery-single-action-ghost{
background:transparent;
color:var(--sh-gs-ink);
border:1px solid var(--sh-gs-line);
}
body.siavash-gallery-single-page .gallery-single-action-ghost:hover,
body.siavash-gallery-single-page .gallery-single-action-ghost:focus-visible,
.sh-gallery-viewer-mount .gallery-single-action-ghost:hover,
.sh-gallery-viewer-mount .gallery-single-action-ghost:focus-visible{
border-color:var(--sh-gs-ink);
}
html[dir="rtl"] .gallery-single-actions,
html[dir="rtl"] .gallery-exif-toggle{
direction:rtl;
text-align:right;
}
/* ---- prev/next arrows + filmstrip + counter, in ink-on-paper ---- */
body.siavash-gallery-single-page .gallery-single-arrow,
.sh-gallery-viewer-mount .gallery-single-arrow{
width:44px;height:44px;margin-top:-22px;
border:1px solid var(--sh-gs-line);
border-radius:50%;
background:rgba(250,249,246,.82);
backdrop-filter:blur(2px);
color:var(--sh-gs-ink);
opacity:0;
}
body.siavash-gallery-single-page .gallery-single-visual:hover .gallery-single-arrow,
body.siavash-gallery-single-page .gallery-single-arrow:focus-visible,
body.siavash-gallery-single-page .gallery-single-visual.sh-controls-visible .gallery-single-arrow,
.sh-gallery-viewer-mount .gallery-single-visual:hover .gallery-single-arrow,
.sh-gallery-viewer-mount .gallery-single-arrow:focus-visible,
.sh-gallery-viewer-mount .gallery-single-visual.sh-controls-visible .gallery-single-arrow{
opacity:1;
}
body.siavash-gallery-single-page .gallery-single-arrow:hover,
body.siavash-gallery-single-page .gallery-single-arrow:focus-visible,
.sh-gallery-viewer-mount .gallery-single-arrow:hover,
.sh-gallery-viewer-mount .gallery-single-arrow:focus-visible{
background:var(--sh-gs-paper);border-color:var(--sh-gs-ink-faint);
}
@media(hover:none){
body.siavash-gallery-single-page .gallery-single-arrow,
.sh-gallery-viewer-mount .gallery-single-arrow{opacity:.6}
}
body.siavash-gallery-single-page .gallery-single-counter,
.sh-gallery-viewer-mount .gallery-single-counter{
display:block;
background:rgba(250,249,246,.85);
color:var(--sh-gs-ink-soft);
border:1px solid var(--sh-gs-line);
border-radius:20px;
padding:4px 12px;
font-size:11px;
letter-spacing:.08em;
}
body.siavash-gallery-single-page .gallery-single-filmstrip,
.sh-gallery-viewer-mount .gallery-single-filmstrip{
background:0;
}
body.siavash-gallery-single-page .gallery-single-filmstrip-item,
.sh-gallery-viewer-mount .gallery-single-filmstrip-item{
border-color:rgba(250,249,246,.55);
}
body.siavash-gallery-single-page .gallery-single-filmstrip-item:hover,
body.siavash-gallery-single-page .gallery-single-filmstrip-item:focus-visible,
body.siavash-gallery-single-page .gallery-single-filmstrip-item.is-current,
.sh-gallery-viewer-mount .gallery-single-filmstrip-item:hover,
.sh-gallery-viewer-mount .gallery-single-filmstrip-item:focus-visible,
.sh-gallery-viewer-mount .gallery-single-filmstrip-item.is-current{
border-color:var(--sh-gs-paper);opacity:1;
}
/* ---- popup close button, ink-on-paper ---- */
.sh-gallery-viewer-mount .sh-gallery-viewer-close{
color:var(--sh-gs-ink-soft);
}
.sh-gallery-viewer-mount .sh-gallery-viewer-close:hover,
.sh-gallery-viewer-mount .sh-gallery-viewer-close:focus-visible{
color:var(--sh-gs-ink);
}
/* =========================================================================
v2.2.9 — /gallery-item/ single view: final editorial pass.
---------------------------------------------------------------------
One additive layer, loaded after everything above (nothing earlier is
touched), covering both the standalone permalink page and the AJAX
popup — they share the same `.gallery-single-fullscreen` markup:
- the photo's background and the text panel's background become one
flat, seamless tone with no line between them
- the photograph floats in generous, even margin
- the site header/footer never render on this page
- metadata groups are separated by space only; the single divider
that remains sits under the title and picks up the primary
button's tone
- one action button carries a tonal fill + faint border, the other
carries no fill or border at all
- the close control is invisible until the pointer/keyboard is
actually used, then fades back out
- opens on the physical corner opposite the text panel in both
reading directions
========================================================================= */
body.siavash-gallery-single-page,
.sh-gallery-viewer-mount{
--sh-gs-surface:#f6f4ee; /* one flat tone shared by photo + text */
--sh-gs-accent:#c7a15a; /* site accent — ties the divider + primary button together */
--sh-gs-accent-line:rgba(199,161,90,.45);
--sh-gs-accent-tint:rgba(199,161,90,.13);
}
/* ---- no header / footer on this page ---- */
body.siavash-gallery-single-page .sh-header,
body.siavash-gallery-single-page .sh-footer,
body.siavash-gallery-single-page .sh-mobile-panel{
display:none !important;
}
body.siavash-gallery-single-page #sh-main{
padding:0 !important;
margin:0 !important;
}
body.siavash-gallery-single-page .gallery-single-fullscreen{
top:0 !important;
height:100vh !important;
height:100dvh !important;
}
@media(max-width:900px){
body.siavash-gallery-single-page .gallery-single-fullscreen{
padding-top:0 !important;
min-height:100vh !important;
min-height:100dvh !important;
}
body.siavash-gallery-single-page .gallery-single-visual{
top:0 !important;
}
}
/* ---- one solid, seamless surface behind both the photo and the text ---- */
.sh-gallery-viewer-mount.is-open{ background:var(--sh-gs-surface); }
body.siavash-gallery-single-page .gallery-single-fullscreen,
body.siavash-gallery-single-page .gallery-single-visual,
body.siavash-gallery-single-page .gallery-single-details,
.sh-gallery-viewer-mount .gallery-single-fullscreen,
.sh-gallery-viewer-mount .gallery-single-visual,
.sh-gallery-viewer-mount .gallery-single-details{
background:var(--sh-gs-surface);
}
body.siavash-gallery-single-page .gallery-single-details,
html[dir="rtl"] body.siavash-gallery-single-page .gallery-single-details,
html[dir="ltr"] body.siavash-gallery-single-page .gallery-single-details,
.sh-gallery-viewer-mount .gallery-single-details{
border:0 !important;
}
/* ---- the photograph floats in generous, even space ---- */
body.siavash-gallery-single-page .gallery-single-visual img,
.sh-gallery-viewer-mount .gallery-single-visual img{
max-width:min(80%,1400px);
max-height:76vh;
max-height:76dvh;
box-shadow:0 40px 90px -30px rgba(30,26,18,.28);
}
@media(max-width:900px){
body.siavash-gallery-single-page .gallery-single-visual img,
.sh-gallery-viewer-mount .gallery-single-visual img{
max-width:86%;
max-height:54vh;
max-height:54dvh;
}
}
/* ---- title + the one divider that remains, in the primary button's tone ---- */
body.siavash-gallery-single-page .gallery-single-details h1,
.sh-gallery-viewer-mount .gallery-single-details h1{
padding-bottom:22px;
border-bottom:1px solid var(--sh-gs-accent-line);
font-size:22px;
font-weight:500;
color:var(--sh-gs-ink,#171615);
}
/* ---- everything below the title is grouped by space, never by lines ---- */
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group,
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group,
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group-technical,
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical{
border:0 !important;
padding:0 !important;
margin:24px 0 0;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group:first-of-type,
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group:first-of-type{
margin-top:0;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group-technical,
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical{
margin-top:30px;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-exif-toggle,
.sh-gallery-viewer-mount .gallery-single-details .gallery-exif-toggle{
padding:0 0 12px;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group-technical[open] .gallery-meta,
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical[open] .gallery-meta{
margin-top:6px;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-caption,
.sh-gallery-viewer-mount .gallery-single-details .gallery-caption{
margin-top:20px;
}
/* ---- action buttons: one tonal fill + faint border, one no fill at all ---- */
body.siavash-gallery-single-page .gallery-single-action-primary,
.sh-gallery-viewer-mount .gallery-single-action-primary{
background:var(--sh-gs-accent-tint);
border:1px solid var(--sh-gs-accent-line);
color:var(--sh-gs-ink,#171615);
}
body.siavash-gallery-single-page .gallery-single-action-primary:hover,
body.siavash-gallery-single-page .gallery-single-action-primary:focus-visible,
.sh-gallery-viewer-mount .gallery-single-action-primary:hover,
.sh-gallery-viewer-mount .gallery-single-action-primary:focus-visible{
background:var(--sh-gs-accent-tint-strong,var(--sh-gs-accent-tint));
border-color:var(--sh-gs-accent);
}
body.siavash-gallery-single-page .gallery-single-action-ghost,
.sh-gallery-viewer-mount .gallery-single-action-ghost{
background:transparent;
border:0;
text-decoration:underline;
text-underline-offset:4px;
text-decoration-color:transparent;
}
body.siavash-gallery-single-page .gallery-single-action-ghost:hover,
body.siavash-gallery-single-page .gallery-single-action-ghost:focus-visible,
.sh-gallery-viewer-mount .gallery-single-action-ghost:hover,
.sh-gallery-viewer-mount .gallery-single-action-ghost:focus-visible{
text-decoration-color:currentColor;
}
/* ---- close ("X"): no border, no fill, opposite corner from the text
panel, invisible until the pointer/keyboard moves ---- */
.sh-gallery-viewer-close,
.gallery-single-close{
position:fixed;
top:25px;
z-index:160;
width:30px;height:30px;
padding:0;margin:0;border:0;border-radius:0;
background:transparent !important;
box-shadow:none !important;
color:var(--sh-gs-ink-soft,#55514c);
opacity:0;
pointer-events:none;
transition:opacity .25s ease,color .18s ease;
}
html[dir="rtl"] .sh-gallery-viewer-close,
html[dir="rtl"] .gallery-single-close{ left:25px; right:auto; }
html[dir="ltr"] .sh-gallery-viewer-close,
html[dir="ltr"] .gallery-single-close{ right:25px; left:auto; }
.sh-gallery-viewer-close::before,.sh-gallery-viewer-close::after,
.gallery-single-close::before,.gallery-single-close::after{
content:"";position:absolute;top:50%;left:50%;
width:22px;height:1px;margin:-.5px 0 0 -11px;
background:currentColor;
}
.sh-gallery-viewer-close::before,.gallery-single-close::before{transform:rotate(45deg)}
.sh-gallery-viewer-close::after,.gallery-single-close::after{transform:rotate(-45deg)}
.sh-gallery-viewer-close:hover,.gallery-single-close:hover,
.sh-gallery-viewer-close:focus-visible,.gallery-single-close:focus-visible{
color:var(--sh-gs-ink,#171615);
}
html.sh-gallery-controls-active .sh-gallery-viewer-close,
html.sh-gallery-controls-active .gallery-single-close,
.sh-gallery-viewer-close:focus-visible,
.gallery-single-close:focus-visible{
opacity:1;
pointer-events:auto;
}
/* the popup already renders its own close button — don't duplicate it */
.sh-gallery-viewer-mount .gallery-single-close{ display:none; }
@media(hover:none){
.sh-gallery-viewer-close,.gallery-single-close{ opacity:.55; pointer-events:auto; }
}
@media(max-width:600px){
.sh-gallery-viewer-close,.gallery-single-close{ top:14px; width:26px; height:26px; }
html[dir="rtl"] .sh-gallery-viewer-close, html[dir="rtl"] .gallery-single-close{ left:14px; }
html[dir="ltr"] .sh-gallery-viewer-close, html[dir="ltr"] .gallery-single-close{ right:14px; }
}
/* v1.19.8 — removed: a neutralize rule that used to live here for the
close button's light-theme skin (background/border/shadow). Its root
cause — the "Light-mode-safe base for standalone Core pages" block —
was removed above in the same version, so this patch is now moot. */
@media(prefers-reduced-motion:reduce){
.sh-gallery-viewer-close,.gallery-single-close{ transition:none; }
}
/* =========================================================================
v2.2.11 — /gallery-item/ theme-correct colors + landscape-safe layout
---------------------------------------------------------------------
Two fixes, both additive (nothing above is edited except the single
`position:fixed`→`absolute` arrow fix earlier in this file):
1) COLORS. The single-photo view (standalone permalink AND the popup
viewer — `.sh-gallery-viewer-mount`, the "Artlogic editorial
reference" block above) never followed the site's Warm Light/Dark
toggle (`html[data-theme]`): the popup was hardcoded to a flat
white/black skin, and the standalone page was hardcoded to a fixed
warm "paper" tan skin. Neither ever changed with the toggle. This
block makes both follow it for real: Light = pure white with dark
ink text; Dark = #242424 with white text — in both cases with the
same neutral grey used for secondary/meta text, borders and the
quiet control chrome (arrows, counter, EXIF box), matching the
reference composition's own restrained, colorless secondary tone.
Since the standalone page already reads every color through the
`--sh-gs-*` custom properties, redefining those here is enough to
retheme it. The popup block was written with literal hex values, so
each one is restated here against the same tokens.
2) LANDSCAPE. Both contexts had exactly one large-viewport (side-by-side)
layout and one narrow-viewport (stacked, photo-over-text) layout,
switched purely on *width*. A short, wide viewport — a phone turned
sideways, or a small tablet in landscape — matches the "narrow"
width breakpoint and gets the stacked layout, but that layout pins
the photo panel to a `min-height` (420px) taller than the viewport
itself: the photo then renders small inside an oversized box, and
the text panel is pushed below the fold. A dedicated short-viewport
query below switches those cases back to the side-by-side layout
instead (photo and text sharing the width, not the height), so the
photo gets the viewport's actual height and the text panel is on
screen at the same time, no oversized empty photo box either side.
========================================================================= */
/* ---- 1) Gallery-owned palette ----
v2.13.1 — extended to also cover the archive/wall page (previously this
block only covered the single-photo viewer; the archive page had its
own separate, duplicated palette further down this file — see the note
near the old v2.5.0/v2.7.0/v2.8.0 blocks below for why that was a
problem, not just duplication). One definition, one set of names, both
contexts. */
body.siavash-gallery-single-page,
body.siavash-gallery-archive-page,
.sh-gallery-viewer-mount{
--sh-gs-paper:#000000;
--sh-gs-paper-deep:#000000;
--sh-gs-ink:#ffffff;
--sh-gs-ink-soft:#d0d0d0;
--sh-gs-ink-faint:#8d8d8d;
--sh-gs-ink-muted:#b8b8b8;
--sh-gs-line:#242424;
--sh-gs-line-strong:#3c3c3c;
--sh-gs-accent-ink:#ffffff;
--sh-gs-stage-bg:#000000;
--sh-gs-mat:#f4f1ea;
--sh-gs-surface:#000000;
--sh-gs-accent:#ffffff;
--sh-gs-accent-line:rgba(255,255,255,.24);
--sh-gs-accent-tint:rgba(255,255,255,.06);
--sh-gs-accent-tint-strong:rgba(255,255,255,.10);
--sh-gs-glass:rgba(36,36,36,.88);
--sh-gs-glass-strong:rgba(36,36,36,.96);
--sh-gs-glass-border:rgba(255,255,255,.22);
--sh-gs-box-bg:#242424;
--sh-gs-box-border:rgba(255,255,255,.16);
/* v2.13.2 — two warm-ivory rgba values that were still hardcoded
verbatim in three places below (tile hover-ring, nav/lang chrome
border + its hover state). Pulled into this same always-dark
palette so they're no longer separate, unnamed literals; values
unchanged. */
--sh-gs-hover-ring:rgba(242,239,232,.18);
--sh-gs-nav-border:rgba(232,224,211,.28);
--sh-gs-nav-border-hover:rgba(242,239,232,.56);
/* v1.22 — sub-phase B: mobile-head one-off greys, previously six
unnamed literals scattered across the archive page's mobile header
(home link, home pill button, language pill + its hover border,
social fallback text, copyright line) plus one duplicate hardcode on
the desktop language control's hover border. This context
(`body.siavash-gallery-archive-page`) is already inside the
always-dark palette above, so these are safe to name without a
light/dark pair — values unchanged, only named. */
--sh-gs-ink-dim:#999999; /* mobile-head-home, unselected */
--sh-gs-btn-ink:#eeeeee; /* mobile-head-home.sh-btn label */
--sh-gs-lang-ink:#c9c5be; /* mobile-head-lang label */
--sh-gs-lang-border:#3a3a3a; /* mobile-head-lang border */
--sh-gs-control-border-hover:#666666; /* gallery-lang + mobile-head-lang hover border (shared) */
--sh-gs-social-ink:#bdb8af; /* mobile-head-social fallback text */
--sh-gs-copy-ink:#85817a; /* mobile-head-copy line */
/* v1.19.11 — sub-phase C: desktop sidebar family (archive page, left
column). Same always-dark context as the mobile-head tokens above,
so no light/dark pair needed here either — values unchanged, only
named. `.gallery-lang`'s own border/label already matched
--sh-gs-lang-border/--sh-gs-lang-ink exactly (desktop and mobile
share the same pill control) and `.gallery-nav a` already matched
--sh-gs-btn-ink exactly, so those two were wired to the existing
tokens above instead of adding duplicates. */
--sh-gs-sidebar-bg:#090909; /* gallery-sidebar-inner background */
--sh-gs-sidebar-brand-ink:#aaaaaa; /* gallery-brand span */
--sh-gs-sidebar-btn-border:#3c3c3c; /* gallery-sidebar-actions .sh-btn border */
--sh-gs-sidebar-bottom-ink:#dddddd; /* gallery-sidebar-bottom a (not lang/nav-link) */
--sh-gs-sidebar-copy-ink:#888888; /* gallery-sidebar-bottom small */
/* v1.19.12 — sub-phase C (part 2): archive tabs, archive head copy, and
the Bent Light wall's hover badge / caption / internal fullscreen
lightbox. Same always-dark context, so no light/dark pair needed —
values unchanged, only named. The four `--sh-gs-cap-*`/`--sh-gs-hint-bg`/
`--sh-gs-close-bg` tokens are shared by two near-identical rule sets
(the archive's `body.siavash-gallery-archive-page .wall-*` and the
generalized `.sh-bent-wall .wall-*` used on single-project/home) that
had the exact same literal values typed out twice. */
--sh-gs-archive-head-copy:#8f8f8f; /* .gallery-archive-head p */
--sh-gs-hint-bg:rgba(0,0,0,.45); /* .wall-hint / .sh-bent-wall .wall-hint background */
--sh-gs-close-bg:rgba(0,0,0,.4); /* .wall-close / .sh-bent-wall .wall-close background */
--sh-gs-cap-place-ink:rgba(255,255,255,.72); /* .wall-cap-place / .sh-bent-wall .wall-cap-place */
--sh-gs-cap-text-ink:rgba(255,255,255,.9); /* .wall-cap-text / .sh-bent-wall .wall-cap-text */
--sh-gs-lb-place-ink:rgba(255,255,255,.65); /* .wall-lb-place (fullscreen lightbox) */
--sh-gs-lb-text-ink:rgba(255,255,255,.85); /* .wall-lb-text (fullscreen lightbox) */
--sh-gs-lb-control-bg:rgba(255,255,255,.08); /* .wall-lb-close / .wall-lb-nav */
--sh-gs-lb-control-bg-hover:rgba(255,255,255,.18); /* .wall-lb-close:hover / .wall-lb-nav:hover */
/* v1.19.14 — sub-phase C (part 3, optional low-priority item deferred
from v1.19.12/v1.19.13): `.gallery-pagination`. Same always-dark
context, so no light/dark pair needed. `.gallery-pagination a,
.gallery-pagination span`'s text colour (`#aaa`) matched the
existing --sh-gs-sidebar-brand-ink (#aaaaaa) exactly, so it was
wired to that token instead of adding a duplicate. `.current`'s
border colour (`#777`) had no exact match among existing tokens
(closest was --sh-gs-control-border-hover at #666666, a different
value), so it gets its own new token. */
--sh-gs-pagination-current-border:#777777; /* .gallery-pagination .current border */
}
/* ---- standalone + popup shared surfaces, now theme-driven ---- */
body.siavash-gallery-single-page .gallery-single-fullscreen,
body.siavash-gallery-single-page .gallery-single-visual,
body.siavash-gallery-single-page .gallery-single-details,
.sh-gallery-viewer-mount.is-open,
.sh-gallery-viewer-mount .gallery-single-fullscreen,
.sh-gallery-viewer-mount .gallery-single-visual,
.sh-gallery-viewer-mount .gallery-single-details{
background:var(--sh-gs-surface) !important;
color:var(--sh-gs-ink) !important;
}
/* ---- popup ("Artlogic reference") text + chrome, restated against tokens
instead of the hardcoded hex it shipped with ---- */
.sh-gallery-viewer-mount .gallery-single-details h1{
border-bottom-color:var(--sh-gs-line) !important;
color:var(--sh-gs-ink) !important;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-caption{
color:var(--sh-gs-ink-soft) !important;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group h2{
color:var(--sh-gs-ink-faint) !important;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta span{
color:var(--sh-gs-ink-faint) !important;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta strong,
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta-project strong{
color:var(--sh-gs-ink-soft) !important;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical,
.sh-gallery-viewer-mount .gallery-single-details .gallery-exif-box{
background:var(--sh-gs-box-bg) !important;
border-color:var(--sh-gs-box-border) !important;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical .gallery-meta span,
.sh-gallery-viewer-mount .gallery-single-details .gallery-exif-box .gallery-meta span{
color:var(--sh-gs-ink-faint) !important;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-detail-group-technical .gallery-meta strong,
.sh-gallery-viewer-mount .gallery-single-details .gallery-exif-box .gallery-meta strong{
color:var(--sh-gs-ink-soft) !important;
}
.sh-gallery-viewer-mount .gallery-single-arrow{
color:var(--sh-gs-accent-ink) !important;
}
.sh-gallery-viewer-mount .gallery-single-arrow:hover,
.sh-gallery-viewer-mount .gallery-single-arrow:focus-visible{
color:var(--sh-gs-ink) !important;
}
.sh-gallery-viewer-mount .sh-gallery-viewer-close{
color:var(--sh-gs-accent-ink) !important;
}
.sh-gallery-viewer-mount .sh-gallery-viewer-close:hover,
.sh-gallery-viewer-mount .sh-gallery-viewer-close:focus-visible{
color:var(--sh-gs-ink) !important;
}
/* ---- standalone page's own glass chrome (counter/arrows/filmstrip),
previously a fixed warm-paper rgba regardless of theme ---- */
body.siavash-gallery-single-page .gallery-single-arrow,
.sh-gallery-viewer-mount .gallery-single-arrow{
background:var(--sh-gs-glass) !important;
border-color:var(--sh-gs-line) !important;
}
body.siavash-gallery-single-page .gallery-single-arrow:hover,
body.siavash-gallery-single-page .gallery-single-arrow:focus-visible{
background:var(--sh-gs-glass-strong) !important;
border-color:var(--sh-gs-glass-border) !important;
}
body.siavash-gallery-single-page .gallery-single-counter{
background:var(--sh-gs-glass-strong) !important;
border-color:var(--sh-gs-line) !important;
color:var(--sh-gs-ink-soft) !important;
}
body.siavash-gallery-single-page .gallery-single-filmstrip-item{
border-color:var(--sh-gs-glass-border) !important;
}
body.siavash-gallery-single-page .gallery-single-filmstrip-item:hover,
body.siavash-gallery-single-page .gallery-single-filmstrip-item:focus-visible,
body.siavash-gallery-single-page .gallery-single-filmstrip-item.is-current{
border-color:var(--sh-gs-ink) !important;
}
body.siavash-gallery-single-page .gallery-single-action-primary:hover,
body.siavash-gallery-single-page .gallery-single-action-primary:focus-visible{
background:var(--sh-gs-accent-tint) !important;
border-color:var(--sh-gs-accent) !important;
}
/* ---- 2) landscape-safe layout: short-viewport phones/tablets keep the
side-by-side composition instead of an over-tall stacked photo panel ---- */
@media(max-width:900px) and (max-height:560px) and (orientation:landscape){
body.siavash-gallery-single-page .gallery-single-fullscreen{
display:grid !important;
grid-template-columns:minmax(0,1fr) minmax(220px,34vw) !important;
height:100vh !important;
height:100dvh !important;
padding-top:0 !important;
}
html[dir="ltr"] body.siavash-gallery-single-page .gallery-single-fullscreen{
grid-template-columns:minmax(220px,34vw) minmax(0,1fr) !important;
}
body.siavash-gallery-single-page .gallery-single-visual{
position:relative !important;
top:0 !important;
height:100% !important;
min-height:0 !important;
}
body.siavash-gallery-single-page .gallery-single-visual img{
max-width:90% !important;
max-height:90vh !important;
max-height:90dvh !important;
}
body.siavash-gallery-single-page .gallery-single-details{
height:100% !important;
overflow-y:auto !important;
}
body.siavash-gallery-single-page .gallery-single-details-inner{
padding:22px 20px !important;
}
.sh-gallery-viewer-mount .gallery-single-fullscreen{
display:grid !important;
flex-direction:unset !important;
grid-template-columns:minmax(0,1fr) minmax(220px,34vw) !important;
height:100vh !important;
height:100dvh !important;
}
html[dir="ltr"] .sh-gallery-viewer-mount .gallery-single-fullscreen{
grid-template-columns:minmax(220px,34vw) minmax(0,1fr) !important;
}
.sh-gallery-viewer-mount .gallery-single-visual,
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-visual{
width:auto !important;
height:100% !important;
min-height:0 !important;
flex:none !important;
}
.sh-gallery-viewer-mount .gallery-single-details,
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details{
width:auto !important;
height:100% !important;
overflow-y:auto !important;
}
.sh-gallery-viewer-mount .gallery-single-details-inner,
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-details-inner{
padding:20px 22px !important;
}
.sh-gallery-viewer-mount .gallery-single-visual img{
max-width:90% !important;
max-height:88vh !important;
max-height:88dvh !important;
}
}
/* =========================================================================
v2.2.12 — standalone page's prev/next arrow icon, drawn instead of typed.
---------------------------------------------------------------------
`‹` / `›` relied on the active font actually
shipping a clean glyph for U+2039/U+203A. Under the site's RTL font stack
(`"Vazirmatn", sans-serif` — see the `html[dir="rtl"] body...*` rule near
the top of this file) the glyph that renders is a malformed corner shape
instead of a chevron. The popup viewer never had this problem because it
already draws its arrow from a plain border box rotated with CSS (see
`.sh-gallery-viewer-mount .gallery-single-arrow span` above) instead of
trusting a text character. This block gives the standalone page's arrow
the same treatment: the text glyph is hidden (`font-size:0`) and a
1px-border corner, rotated 45°/-135°, draws the chevron instead — so it
renders identically regardless of font/glyph coverage. Placed last so it
wins over the plain `transform:translateY(-1px)` rule near the top of
this file without needing `!important`.
========================================================================= */
body.siavash-gallery-single-page .gallery-single-arrow span{
display:block;
width:9px;
height:9px;
border-top:1px solid currentColor;
border-right:1px solid currentColor;
font-size:0;
}
body.siavash-gallery-single-page .gallery-single-arrow-prev span{
transform:rotate(-135deg) translate(-1px,-1px);
}
body.siavash-gallery-single-page .gallery-single-arrow-next span{
transform:rotate(45deg) translate(-1px,-1px);
}
/* =========================================================================
v2.2.14 — arrows + close ("X") share ONE visibility rule everywhere
---------------------------------------------------------------------
Both now strictly follow `html.sh-gallery-controls-active` — the class
gallery-single.js already toggles on mousemove/touchstart/keydown and
removes again after ~2.2s idle (see showControls() in that file) — on
desktop, mobile and tablet alike. This replaces two things that used to
keep them visible without any interaction:
- arrows relied on `:hover`, which (a) has no equivalent on touch and
(b) doesn't fade after idle the way the close button does even on
desktop, so behavior differed between the two controls;
- both arrows and the close button had a `@media(hover:none)` rule
keeping them permanently dim (opacity .55–.6) on every touch
device, so on phones/tablets they were always at least faintly
visible at rest, not just on touch.
`!important` + being last in the file wins over every earlier
visibility rule for these selectors above, without needing to hunt down
and delete each one individually.
`:focus-visible` is kept as an always-on override so keyboard users
tabbing to an arrow/close link never lose sight of it.
========================================================================= */
html:not(.sh-gallery-controls-active) .sh-gallery-viewer-close,
html:not(.sh-gallery-controls-active) .gallery-single-close,
html:not(.sh-gallery-controls-active) body.siavash-gallery-single-page .gallery-single-arrow,
html:not(.sh-gallery-controls-active) .sh-gallery-viewer-mount .gallery-single-arrow{
opacity:0 !important;
pointer-events:none !important;
}
html.sh-gallery-controls-active .sh-gallery-viewer-close,
html.sh-gallery-controls-active .gallery-single-close,
html.sh-gallery-controls-active body.siavash-gallery-single-page .gallery-single-arrow,
html.sh-gallery-controls-active .sh-gallery-viewer-mount .gallery-single-arrow,
.sh-gallery-viewer-close:focus-visible,
.gallery-single-close:focus-visible,
body.siavash-gallery-single-page .gallery-single-arrow:focus-visible,
.sh-gallery-viewer-mount .gallery-single-arrow:focus-visible{
opacity:1 !important;
pointer-events:auto !important;
}
/* =========================================================================
v2.2.15 — arrows: drop the circular "glass pill" chrome
---------------------------------------------------------------------
Per the reference markup provided (bare ,
no wrapping shape) the prev/next arrows should read as a plain icon —
like the close ("X") already does — not a bordered, backdrop-blurred
circle sitting on the photo. Strips the circle/border/blur added back
in v1.0.36/v2.2.11 (`border-radius:50%`, `border`, `background`,
`backdrop-filter`) via `!important`, keeping the same fixed-size box
only as an invisible tap/click target (accessibility/mobile touch-area
size unchanged) and reusing the ink-color tokens already wired up for
this element just above. Same treatment on both the standalone page and
the popup viewer, every theme, every breakpoint.
========================================================================= */
body.siavash-gallery-single-page .gallery-single-arrow,
.sh-gallery-viewer-mount .gallery-single-arrow{
border:0 !important;
border-radius:0 !important;
background:transparent !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
box-shadow:none !important;
font-size:30px !important;
}
body.siavash-gallery-single-page .gallery-single-arrow:hover,
body.siavash-gallery-single-page .gallery-single-arrow:focus-visible,
.sh-gallery-viewer-mount .gallery-single-arrow:hover,
.sh-gallery-viewer-mount .gallery-single-arrow:focus-visible{
background:transparent !important;
border-color:transparent !important;
transform:none !important;
}
/* =========================================================================
v2.2.16 — photo counter: bottom-right, "01 — 03" + dots, always visible
---------------------------------------------------------------------
Per the reference layout provided: the position indicator moves from a
small top-center hover-only badge to a persistent bottom-right block —
a padded 2-digit count ("01 — 03", em dash, from the template) plus one
dot per sibling photo underneath, the current one filled. Unlike the
arrows/close, this is a passive position indicator rather than an
interactive control, so it stays visible the whole time instead of
fading in only on mouse movement/touch — that's why it's deliberately
NOT part of the v2.2.14 controls-active rule above. `!important` +
last-in-file wins over the old top-center/hover-only rule (~line 757)
without needing to delete it.
========================================================================= */
body.siavash-gallery-single-page .gallery-single-counter,
.sh-gallery-viewer-mount .gallery-single-counter{
top:auto !important;
bottom:20px !important;
left:auto !important;
right:20px !important;
transform:none !important;
display:flex !important;
flex-direction:row;
flex-wrap:wrap;
align-items:center !important;
align-content:space-between;
justify-content:space-between;
gap:8px !important;
opacity:1 !important;
pointer-events:auto !important;
}
html[dir="rtl"] body.siavash-gallery-single-page .gallery-single-counter,
html[dir="rtl"] .sh-gallery-viewer-mount .gallery-single-counter{
right:auto !important;
left:auto !important;
}
body.siavash-gallery-single-page .gallery-single-counter-sep{
opacity:.55;
padding:0 2px;
}
body.siavash-gallery-single-page .gallery-single-counter-dots{
display:flex;
align-items:center;
gap:6px;
}
body.siavash-gallery-single-page .gallery-single-counter-dot{
width:5px;height:5px;border-radius:50%;
background:currentColor;
opacity:.35;
}
body.siavash-gallery-single-page .gallery-single-counter-dot.is-current{
opacity:1;
}
@media(max-width:900px){
body.siavash-gallery-single-page .gallery-single-counter,
.sh-gallery-viewer-mount .gallery-single-counter{
bottom:12px !important;
}
}
/* =========================================================================
v2.2.18 — /gallery-item/ single view: bigger photo + frosted-glass surface
---------------------------------------------------------------------
Two additive, last-in-file-wins overrides on top of the v2.2.9/v2.2.11
base rules above (nothing earlier is edited):
- the photo is allowed to grow a little larger (90% instead of 80% of
the stage width; the dvh cap raised from 76dvh to 90dvh so tall
viewports aren't left with extra empty space)
- the stage/photo/details surfaces stop being one flat opaque tone and
become a translucent frosted panel over whatever sits behind it,
via a semi-transparent fill + backdrop-filter blur — the ink color
token stays as-is so text contrast is unaffected. The fill color
follows the Warm Light/Dark toggle (`html[data-theme]`), same as
the `--sh-gs-*` tokens above: white at 10% opacity in light, #242424
at 10% opacity in dark — 50px blur in both.
v2.2.20 fix — scope correction. `.sh-gallery-viewer-mount` is not
exclusive to the Gallery archive: `gallery-single.js` mounts the exact
same popup on the Home portfolio teaser and on Project pages too (see
the "POPUP" note above that file's own header comment), and it adds
the `siavash-gallery-single-page` body class on whichever page it was
opened from — not just on the Gallery pages. The first version of this
block keyed the glass background off `.sh-gallery-viewer-mount` alone,
so opening a photo from Home or a Project page blurred/tinted that
page's own layout behind the popup too. Per the requirement — this
should only ever happen on the Gallery archive (`/gallery/`) and the
standalone single-item page — the popup's glass treatment below is now
additionally gated on `body.siavash-gallery-archive-page`, the class
WordPress's own `body_class` output already adds only on the real
Gallery archive (see `class-sh-gallery-legacy.php`). Popups opened from
Home/Project keep the older, fully opaque `var(--sh-gs-surface)` panel
from v2.2.11 above, untouched.
========================================================================= */
body.siavash-gallery-single-page .gallery-single-visual img,
.sh-gallery-viewer-mount .gallery-single-visual img{
max-width:min(90%,1400px);
max-height:76vh;
max-height:90dvh;
box-shadow:0 40px 90px -30px rgba(30,26,18,.28);
}
html[data-theme="light"] body.siavash-gallery-single-page,
html[data-theme="light"] body.siavash-gallery-archive-page{
--sh-gs-glass-bg:rgba(255,255,255,.1);
}
html:not([data-theme="light"]) body.siavash-gallery-single-page,
html:not([data-theme="light"]) body.siavash-gallery-archive-page{
--sh-gs-glass-bg:rgba(36,36,36,.1);
}
/* standalone /gallery-item/ permalink page — never uses the popup mount */
body.siavash-gallery-single-page .gallery-single-fullscreen,
body.siavash-gallery-single-page .gallery-single-visual,
body.siavash-gallery-single-page .gallery-single-details{
background:var(--sh-gs-glass-bg) !important;
color:var(--sh-gs-ink) !important;
backdrop-filter:blur(50px);
-webkit-backdrop-filter:blur(50px);
}
/* popup viewer — glass only when it was opened from the Gallery archive
itself; Home/Project popups fall back to the opaque v2.2.11 panel */
body.siavash-gallery-archive-page .sh-gallery-viewer-mount.is-open,
body.siavash-gallery-archive-page .sh-gallery-viewer-mount .gallery-single-fullscreen,
body.siavash-gallery-archive-page .sh-gallery-viewer-mount .gallery-single-visual,
body.siavash-gallery-archive-page .sh-gallery-viewer-mount .gallery-single-details{
background:var(--sh-gs-glass-bg) !important;
color:var(--sh-gs-ink) !important;
backdrop-filter:blur(50px);
-webkit-backdrop-filter:blur(50px);
}
/* =========================================================================
v2.2.21 — Gallery archive (`/gallery/`) grid area: same frosted glass
---------------------------------------------------------------------
`.gallery-content` — the main grid column next to the sidebar — picks up
the same treatment as the single-item/popup panels above: the same
theme-aware `--sh-gs-glass-bg` token (white 10% in light, #242424 10%
in dark) plus `backdrop-filter: blur(50px)`. Scoped to
`body.siavash-gallery-archive-page` only, so it never reaches Home or
Project pages.
========================================================================= */
body.siavash-gallery-archive-page .gallery-content{
background:var(--sh-gs-glass-bg) !important;
backdrop-filter:blur(50px);
-webkit-backdrop-filter:blur(50px);
}
/* =========================================================================
v2.3.3 — Gallery archive (/gallery/): actual layout redesign, replacing
the v2.3.2 recolor pass above (which kept the old Artlogic-style sidebar
layout and just restated its colors — not what was asked for).
---------------------------------------------------------------------
The vertical sidebar, its duplicate mobile header, and their own
back-home/language/Instagram/email controls are gone from
gallery-archive.php — the real site header (get_header()) already
carries brand/nav/language/theme on every page, this one included, so
none of that needs a second copy here. In their place: the same
.site.archive-page shape every other interior page already uses (same
container width, same clearance under the fixed header, same
kicker/title/note as /work/), a horizontal category-tabs row instead of
a vertical list, and a masonry grid that keeps each photo's real aspect
ratio instead of cropping every tile to an identical square.
Filtering/sorting/layout-toggle JS (gallery-filter.js) only looks up
elements by id/data-attribute, so none of it needed to change.
========================================================================= */
/* ---- controls row: category tabs (left) + layout/sort toolbar (right) ---- */
body.siavash-gallery-archive-page .gallery-controls-row{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:18px 28px;
padding-bottom:22px;
margin-bottom:clamp(30px,4vw,48px);
border-bottom:1px solid var(--line);
}
body.siavash-gallery-archive-page .gallery-tabs{
display:flex;
flex-wrap:wrap;
gap:9px 26px;
}
body.siavash-gallery-archive-page .gallery-tabs a{
font-size:11px;
text-transform:uppercase;
letter-spacing:.13em;
/* v1.19.12 — sub-phase C (part 2): `color:var(--muted)` removed here:
confirmed dead — the later, generalized `.gallery-tabs a` rule further
down this file (Bent Light section) redeclares `color` on the exact
same selector and always wins (same specificity, later position). */
padding-bottom:4px;
border-bottom:1px solid transparent;
transition:color .2s ease,border-color .2s ease;
white-space:nowrap;
}
body.siavash-gallery-archive-page .gallery-tabs a:hover,
body.siavash-gallery-archive-page .gallery-tabs a:focus-visible{color:var(--text)}
body.siavash-gallery-archive-page .gallery-tabs a.is-active{
/* v1.19.12 — sub-phase C (part 2): `color:var(--text)` removed here:
confirmed dead, same reason as above — the later `.gallery-tabs
a.is-active` rule redeclares `color` and always wins. `border-bottom-
color` below is not redeclared anywhere else, so it stays live. */
border-bottom-color:var(--text);
}
/* ---- toolbar (layout/sort) — same square icon-button chrome as .control in header.php ---- */
body.siavash-gallery-archive-page .gallery-toolbar{
display:flex;align-items:center;gap:8px;margin:0;position:relative;z-index:10;
}
body.siavash-gallery-archive-page .gallery-control{position:relative}
body.siavash-gallery-archive-page .gallery-control-button{
width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--line) !important;
background:var(--surface) !important;
color:var(--muted) !important;
padding:0;cursor:pointer;border-radius:4px;
transition:color .2s ease,border-color .2s ease,background .2s ease;
}
body.siavash-gallery-archive-page .gallery-control-button:hover,
body.siavash-gallery-archive-page .gallery-control-button:focus-visible,
body.siavash-gallery-archive-page .gallery-control-button[aria-expanded="true"]{
color:var(--text) !important;
border-color:var(--line-strong) !important;
background:var(--surface-2) !important;
}
body.siavash-gallery-archive-page .gallery-control-button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
body.siavash-gallery-archive-page .gallery-control-menu{
position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:150px;
display:flex;flex-direction:column;padding:6px;
background:var(--surface-2) !important;
border:1px solid var(--line) !important;
box-shadow:0 12px 30px rgba(0,0,0,.16) !important;
z-index:30;border-radius:4px;
}
body.siavash-gallery-archive-page .gallery-control-menu[hidden]{display:none !important}
body.siavash-gallery-archive-page .gallery-control-menu button{
appearance:none;border:0;background:transparent;
color:var(--muted) !important;
text-align:start;padding:9px 10px;font:inherit;font-size:10px;line-height:1.6;
cursor:pointer;white-space:nowrap;border-radius:2px;
}
body.siavash-gallery-archive-page .gallery-control-menu button:hover,
body.siavash-gallery-archive-page .gallery-control-menu button:focus-visible,
body.siavash-gallery-archive-page .gallery-control-menu button.is-selected{
color:var(--text) !important;
background:var(--bg) !important;
}
/* ---- grid: masonry, real aspect ratios, replacing the old forced-square repeat(N,1fr) grid ---- */
body.siavash-gallery-archive-page .gallery-grid{
display:block !important;
columns:2;
column-gap:clamp(24px,3vw,40px);
}
body.siavash-gallery-archive-page .gallery-grid.is-compact{columns:3}
@media(min-width:900px){
body.siavash-gallery-archive-page .gallery-grid{columns:3}
body.siavash-gallery-archive-page .gallery-grid.is-compact{columns:4}
}
@media(min-width:1400px){
body.siavash-gallery-archive-page .gallery-grid{columns:4}
body.siavash-gallery-archive-page .gallery-grid.is-compact{columns:5}
}
@media(max-width:520px){
body.siavash-gallery-archive-page .gallery-grid{columns:1}
body.siavash-gallery-archive-page .gallery-grid.is-compact{columns:2}
}
body.siavash-gallery-archive-page .gallery-tile{
display:block !important;
width:100% !important;
height:auto !important;
break-inside:avoid;
margin:0 0 clamp(24px,3vw,40px);
}
body.siavash-gallery-archive-page .gallery-tile>a{color:var(--text) !important}
body.siavash-gallery-archive-page .gallery-tile-media{
position:relative;
aspect-ratio:auto !important;
height:auto !important;
background:var(--surface) !important;
overflow:hidden;
}
body.siavash-gallery-archive-page .gallery-tile-media img{
position:static !important;
width:100% !important;height:auto !important;
min-width:0 !important;min-height:0 !important;
max-width:none !important;max-height:none !important;
object-fit:initial !important;
transform:none !important;
}
body.siavash-gallery-archive-page .gallery-tile-overlay{
display:flex;justify-content:space-between;align-items:baseline;gap:16px;
padding:12px 1px 0;
}
body.siavash-gallery-archive-page .gallery-tile-overlay h2{
color:var(--text) !important;
font-weight:500 !important;
font-size:13px;
letter-spacing:-.01em;
}
body.siavash-gallery-archive-page .gallery-tile-overlay span{
color:var(--muted) !important;
font-size:10px;
text-transform:uppercase;
letter-spacing:.08em;
text-align:end;
white-space:nowrap;
}
html[dir="rtl"] body.siavash-gallery-archive-page .gallery-tile-overlay span{text-align:start}
body.siavash-gallery-archive-page .gallery-no-results{
color:var(--muted) !important;
padding:20px 0 !important;
font-size:14px !important;
}
/* ---- pagination — reuses .pagination (style.css, same look as /work/ archive);
only the WP paginate_links(type:list)
/
wrapper needs stripping ---- */
.gallery-pagination ul{
display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0;
}
.gallery-pagination li{display:contents}
/* ---- bottom row: pagination + Instagram/email, same tone as footer ---- */
body.siavash-gallery-archive-page .gallery-bottom-row{
display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
gap:16px;padding-top:12px;
}
body.siavash-gallery-archive-page .gallery-links{display:flex;gap:20px}
body.siavash-gallery-archive-page .gallery-links a{
color:var(--muted) !important;
font-size:10px;text-transform:uppercase;letter-spacing:.08em;
transition:color .2s ease;
}
body.siavash-gallery-archive-page .gallery-links a:hover{color:var(--text) !important}
@media(max-width:700px){
body.siavash-gallery-archive-page .gallery-controls-row{flex-direction:column;align-items:stretch}
body.siavash-gallery-archive-page .gallery-tabs{
flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
padding-bottom:2px;
}
body.siavash-gallery-archive-page .gallery-tabs::-webkit-scrollbar{display:none}
body.siavash-gallery-archive-page .gallery-toolbar{justify-content:flex-end}
}
/* =========================================================================
v2.3.4 — "Wall" gallery (replaces the masonry grid above for .is-wall).
Ported from the "Bent Light" reference design: rows of frames sized from
each photo's real aspect ratio, filling edge to edge. Click widens a
frame in place; click again opens a fullscreen lightbox. Uses the same
design tokens as the rest of the archive page (--text/--muted/--surface/
--line/--bg) so it matches the current theme instead of importing a
separate palette, and stays direction-agnostic so it mirrors correctly
under html[dir="rtl"].
========================================================================= */
body.siavash-gallery-archive-page .gallery-grid.is-wall{
display:block !important;
columns:initial !important;
column-gap:0 !important;
}
body.siavash-gallery-archive-page .gallery-grid.is-wall .gallery-wall-data{display:none}
body.siavash-gallery-archive-page .wall{
display:flex;flex-direction:column;gap:6px;
}
body.siavash-gallery-archive-page .wall-row{
display:flex;gap:6px;
transition:height 420ms cubic-bezier(.2,.8,.2,1),opacity 320ms ease;
}
body.siavash-gallery-archive-page .wall-cell{
position:relative;flex-shrink:0;height:100%;overflow:hidden;
border-radius:4px;cursor:pointer;background:var(--surface);
transition:width 420ms cubic-bezier(.2,.8,.2,1),opacity 320ms ease;
}
body.siavash-gallery-archive-page .wall-cell img{
width:100%;height:100%;object-fit:cover;display:block;
}
body.siavash-gallery-archive-page .wall-hint{
position:absolute;top:10px;inset-inline-start:10px;font-size:9.5px;color:var(--sh-gs-ink,#fff);
background:var(--sh-gs-hint-bg,rgba(0,0,0,.45));padding:3px 9px;border-radius:999px;
backdrop-filter:blur(2px);opacity:0;transition:opacity 220ms ease;
pointer-events:none;letter-spacing:.02em;text-transform:none;
}
body.siavash-gallery-archive-page .wall-cell.is-active .wall-hint{opacity:1}
body.siavash-gallery-archive-page .wall-close{
position:absolute;top:10px;inset-inline-end:10px;width:26px;height:26px;border-radius:999px;
border:none;background:var(--sh-gs-close-bg,rgba(0,0,0,.4));color:var(--sh-gs-ink,#fff);display:flex;font-size:12px;
align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(2px);
opacity:0;pointer-events:none;transition:opacity 220ms ease;
}
body.siavash-gallery-archive-page .wall-cell.is-active .wall-close{opacity:1;pointer-events:auto}
body.siavash-gallery-archive-page .wall-cap{
position:absolute;inset-inline:0;bottom:0;padding:16px 18px;color:var(--sh-gs-ink,#fff);
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.66) 100%);
opacity:0;transform:translateY(6px);
transition:opacity 320ms ease 80ms,transform 320ms ease 80ms;
pointer-events:none;
}
body.siavash-gallery-archive-page .wall-cell.is-active .wall-cap{opacity:1;transform:translateY(0)}
body.siavash-gallery-archive-page .wall-cap-title{
margin:0;font-family:var(--site-title-font);font-size:13px;font-weight:500;color:var(--sh-gs-ink,#fff);
}
body.siavash-gallery-archive-page .wall-cap-place{
margin:2px 0 5px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--sh-gs-cap-place-ink,rgba(255,255,255,.72));
}
body.siavash-gallery-archive-page .wall-cap-text{
margin:0;font-size:11px;line-height:1.55;color:var(--sh-gs-cap-text-ink,rgba(255,255,255,.9));max-width:42ch;
}
@media(prefers-reduced-motion: reduce){
body.siavash-gallery-archive-page .wall,
body.siavash-gallery-archive-page .wall-row,
body.siavash-gallery-archive-page .wall-cell,
body.siavash-gallery-archive-page .wall-cap,
body.siavash-gallery-archive-page .wall-hint{
transition:none !important;
}
}
/* ---- fullscreen lightbox (appended to body by gallery-wall.js) ---- */
.wall-lightbox{
position:fixed;inset:0;z-index:1000;display:none;
align-items:center;justify-content:center;
background:rgba(0,0,0,.94);
}
.wall-lightbox.is-open{display:flex}
.wall-lb-inner{max-width:min(1200px,92vw);max-height:88vh;text-align:center}
.wall-lb-img{
max-width:min(1200px,92vw);max-height:78vh;object-fit:contain;display:block;margin:0 auto;
border-radius:4px;
}
.wall-lb-cap{color:var(--sh-gs-ink,#fff);margin-top:16px}
.wall-lb-title{font-family:var(--site-title-font);font-size:15px;font-weight:500}
.wall-lb-place{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sh-gs-lb-place-ink,rgba(255,255,255,.65));margin:3px 0 8px}
.wall-lb-text{font-size:12px;line-height:1.6;color:var(--sh-gs-lb-text-ink,rgba(255,255,255,.85));max-width:52ch;margin:0 auto}
.wall-lb-close,.wall-lb-nav{
position:fixed;border:none;background:var(--sh-gs-lb-control-bg,rgba(255,255,255,.08));color:var(--sh-gs-ink,#fff);
border-radius:999px;display:flex;align-items:center;justify-content:center;
cursor:pointer;backdrop-filter:blur(3px);transition:background 160ms ease;
}
.wall-lb-close:hover,.wall-lb-nav:hover{background:var(--sh-gs-lb-control-bg-hover,rgba(255,255,255,.18))}
.wall-lb-close{top:20px;inset-inline-end:20px;width:38px;height:38px;font-size:16px}
.wall-lb-nav{top:50%;transform:translateY(-50%);width:44px;height:44px;font-size:20px}
.wall-lb-prev{inset-inline-start:20px}
.wall-lb-next{inset-inline-end:20px}
/* v2.13.1 — رفع تناقض سهلایهی معماری رنگ گالری آرشیو.
قبلاً همین چند رنگ سهبار، با سه اسم مختلف، تعریف شده بود:
(۱) اینجا، یک fallback chain به توکنهای سراسری پوسته
(`var(--sh-bg,var(--bg,#000))`)؛ (۲) یک بلوک `--gallery-*` پایینتر؛
(۳) بازتعریف مستقیم خودِ `--sh-bg`/`--sh-surface`/... (نزدیک انتهای
فایل). مورد (۳) مشکل واقعی بود، نه صرفاً تکرار: هرجای دیگهی کدبیس که
`var(--sh-bg)` رو ببینه حق داره فرض کنه یعنی «پسزمینهی تم فعال
سایت» — ولی داخل اسکوپ صفحات گالری، همون اسم بیخبر مقدار کاملاً
ثابت و متفاوتی میداد. مورد (۱) هم عملاً کد مرده بود، چون مورد (۳)
همیشه override میکرد و fallback هیچوقت به مقدار واقعی سراسری
نمیرسید.
تصمیم بصری («گالری همیشه تاریک، مستقل از تم روشن/تیرهی سایت») عیناً
حفظ شده — فقط حالا با فضاینام مجزا و بدون برخورد
(`--sh-gs-*`، همون سیستمی که ویوور تکعکس از قبل داشت و بالای همین
فایل به آرشیو هم تعمیم داده شد)، نه با بازتعریفِ اسم توکنهای
سراسری. */
body.siavash-gallery-archive-page,
body.siavash-gallery-single-page{
background:var(--sh-gs-paper)!important;
color:var(--sh-gs-ink)!important;
}
/* v2.13.1 — این چهار قانون قبلاً از طریق fallback chain به
var(--sh-surface-elevated,...)/var(--sh-text,...)/... به توکنهای
سراسری پوسته وصل بودن (مقادیرشون همیشه با --sh-gs-* یکی بود، چون
استایل تم همیشه با همین مقادیر ست شده بود) — الان مستقیم و صریح از
همون سیستم محلی گالری میخونن، بدون هیچ تفاوت بصری، فقط بدون فالبک
غیرضروری به توکنهایی که دیگه اینجا معنی ندارن.
این قانون همچنان آخرین (و برندهی) تعریف این سلکتورها در فایله —
نسخههای قدیمیتر (خط ۵۷۱، ۶۹۳، ۲۵۴۲...) عمداً دستنخورده موندن، چون
حذفشون نیاز به بازبینی جداگانه داره (حالتهای hover/focus/is-compact
دارن)، ولی دیگه واقعاً «برنده» نیستن. */
body.siavash-gallery-archive-page .gallery-control-menu,
body.siavash-gallery-archive-page .gallery-control-button{
background:var(--sh-gs-box-bg)!important;
color:var(--sh-gs-ink)!important;
border-color:var(--sh-gs-box-border)!important;
}
body.siavash-gallery-archive-page .gallery-tile-media{background:var(--sh-gs-box-bg)!important}
body.siavash-gallery-archive-page .gallery-tile-overlay h2{color:var(--sh-gs-ink)!important}
body.siavash-gallery-archive-page .gallery-tile-overlay span,
body.siavash-gallery-archive-page .gallery-no-results{color:var(--sh-gs-ink-muted)!important}
body.siavash-gallery-archive-page a:focus-visible,
body.siavash-gallery-archive-page button:focus-visible{outline:2px solid var(--sh-gs-accent);outline-offset:3px}
/* v2.5.0 — fullscreen viewer owns the viewport while open. */
html.sh-gallery-lightbox-open,
html.sh-gallery-lightbox-open body { overflow: hidden; }
@media (max-width: 700px) {
.wall { width: 100%; }
.wall-row { gap: 4px; }
.wall-cell { min-width: 0; }
}
body.siavash-gallery-archive-page .gallery-grid.is-wall{width:100%;max-width:none}
body.siavash-gallery-archive-page .wall{width:100%;gap:8px}
body.siavash-gallery-archive-page .wall-row{gap:8px}
body.siavash-gallery-archive-page .wall-cell{background:var(--sh-gs-box-bg)}
body.siavash-gallery-archive-page .wall-cell img{display:block;width:100%;height:100%;object-fit:cover}
body.siavash-gallery-archive-page .wall-lb-img{background:var(--sh-gs-paper)}
/* Gallery archive has its own editorial page rhythm. */
body.siavash-gallery-archive-page .archive-page.gallery-page{
width:min(100%,1500px);
margin-inline:auto;
padding-inline:clamp(18px,4vw,64px)!important;
padding-top:clamp(118px,12vw,170px)!important;
padding-bottom:clamp(70px,10vw,120px)!important;
}
body.siavash-gallery-archive-page .gallery-page .section-head{
margin-bottom:clamp(28px,4vw,52px);
}
body.siavash-gallery-archive-page .gallery-page .section-title{
color:var(--sh-gs-ink,#fff)!important;
}
body.siavash-gallery-archive-page .gallery-page .section-note{
color:#8d8d8d!important;
}
body.siavash-gallery-archive-page .gallery-controls-row{margin-bottom:clamp(20px,3vw,34px)}
body.siavash-gallery-archive-page .gallery-tabs{display:flex;gap:18px;flex-wrap:wrap}
body.siavash-gallery-archive-page .gallery-tabs a{color:var(--sh-gs-ink-faint,#8d8d8d)}
body.siavash-gallery-archive-page .gallery-tabs a.is-active{color:var(--sh-gs-ink,#fff)}
body.siavash-gallery-archive-page .gallery-bottom-row{margin-top:clamp(28px,4vw,52px)}
@media(max-width:700px){
body.siavash-gallery-archive-page .archive-page.gallery-page{
padding-inline:16px!important;
padding-top:clamp(104px,24vw,132px)!important;
}
body.siavash-gallery-archive-page .gallery-page .section-head{display:block}
body.siavash-gallery-archive-page .gallery-page .section-note{margin-top:14px;max-width:34ch}
body.siavash-gallery-archive-page .gallery-tabs{
flex-wrap:nowrap;
overflow-x:auto;
gap:0;
padding-bottom:5px;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
body.siavash-gallery-archive-page .gallery-tabs::-webkit-scrollbar{display:none}
body.siavash-gallery-archive-page .gallery-tabs a{
flex:0 0 auto;
padding-inline:14px;
min-height:34px;
display:inline-flex;
align-items:center;
border-inline-end:1px solid var(--sh-gs-line,#242424);
}
body.siavash-gallery-archive-page .gallery-tabs a:first-child{padding-inline-start:0}
body.siavash-gallery-archive-page .wall{gap:10px}
body.siavash-gallery-archive-page .wall-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
height:auto!important;
opacity:1!important;
}
body.siavash-gallery-archive-page .wall-cell,
body.siavash-gallery-archive-page .wall-cell.is-active{
width:100%!important;
height:auto!important;
aspect-ratio:4/5;
opacity:1!important;
transform:none;
transition:transform 240ms ease,opacity 240ms ease;
}
body.siavash-gallery-archive-page .wall-cell.is-active{aspect-ratio:4/5}
body.siavash-gallery-archive-page .wall-cell img{height:100%!important}
body.siavash-gallery-archive-page .wall-cell.is-active .wall-cap{opacity:1;transform:translateY(0)}
body.siavash-gallery-archive-page .wall-cell:active{transform:scale(.985)}
body.siavash-gallery-archive-page .wall-hint{top:8px;inset-inline-start:8px;font-size:8.5px}
body.siavash-gallery-archive-page .wall-close{top:8px;inset-inline-end:8px}
body.siavash-gallery-archive-page .wall-cap{padding:12px}
body.siavash-gallery-archive-page .wall-cap-title{font-size:11px}
body.siavash-gallery-archive-page .wall-cap-place{font-size:8px}
body.siavash-gallery-archive-page .wall-cap-text{font-size:9px}
}
@media(max-width:420px){
body.siavash-gallery-archive-page .wall-row{grid-template-columns:1fr}
body.siavash-gallery-archive-page .wall-cell,
body.siavash-gallery-archive-page .wall-cell.is-active{aspect-ratio:16/10}
}
html.sh-gallery-lightbox-open,html.sh-gallery-lightbox-open body{overflow:hidden!important}
@media(max-width:700px){
body.siavash-gallery-single-page .gallery-single-fullscreen{width:100%;max-width:100%;overflow-x:hidden}
body.siavash-gallery-single-page .gallery-single-visual{min-height:320px;height:56svh}
body.siavash-gallery-single-page .gallery-single-visual img{width:100%;height:100%;max-width:100%;object-fit:contain}
body.siavash-gallery-single-page .gallery-single-details-inner{width:100%;max-width:100%;overflow-wrap:anywhere}
}
/* v2.8.0 — Core Gallery owns its own visual palette. The active site theme
may change the shared font family/direction, but it must never recolor
gallery archive or single-photo surfaces, typography, controls, or viewer. */
body.siavash-gallery-archive-page,
body.siavash-gallery-single-page{
--sh-bg:#000;--sh-surface:#242424;--sh-text:#fff;--sh-text-secondary:#b8b8b8;
--sh-text-muted:#8d8d8d;--sh-divider:rgba(255,255,255,.16);--sh-divider-strong:rgba(255,255,255,.3);
--bg:#000;--surface:#242424;--surface-2:#242424;--text:#fff;--muted:#8d8d8d;--line:#242424;--line-strong:#3c3c3c;--accent:#fff;
background:#000!important;color:#fff!important;color-scheme:dark!important;
}
body.siavash-gallery-archive-page .header,
body.siavash-gallery-single-page .header{background:linear-gradient(to bottom,rgba(0,0,0,.8),transparent)!important;color:var(--sh-gs-ink,#fff)!important}
body.siavash-gallery-archive-page .header a,
body.siavash-gallery-archive-page .header button,
body.siavash-gallery-single-page .header a,
body.siavash-gallery-single-page .header button{color:var(--sh-gs-ink,#fff)!important;border-color:rgba(255,255,255,.3)!important}
body.siavash-gallery-archive-page .gallery-page,
body.siavash-gallery-single-page .gallery-single-fullscreen{font-family:var(--site-title-font)!important}
/* -------------------------------------------------------------------------
* v2.13.4 — Bent Light wall engine, generalized for the single-project
* gallery (`.sh-bent-wall`, see single-sh_project.php). Same selectors,
* values and breakpoints as the archive's `.wall*` block above (search
* "body.siavash-gallery-archive-page .wall" rule for the original) — just
* re-scoped under `.sh-bent-wall` instead of the archive's body class, so
* the one shared engine (js/gallery-wall.js) renders identically wherever
* it's dropped, per the project's "one engine, no per-page duplicates"
* rule. The one real change: `background:var(--surface)` (site-theme-
* dependent) becomes `var(--sh-gs-box-bg,#242424)` and the ink colors
* become plain `#fff`/rgba-on-black — since a project page's body does
* NOT carry the archive's "force everything dark" override, the wall
* needs to stay a dark photo surface on its own, independent of the
* page's own light/dark toggle, matching how it already looks on the
* archive.
* ------------------------------------------------------------------------- */
.sh-bent-wall{
display:flex;flex-direction:column;gap:8px;width:100%;
}
.sh-bent-wall .wall-row{
display:flex;gap:8px;
transition:height 420ms cubic-bezier(.2,.8,.2,1),opacity 320ms ease;
}
.sh-bent-wall .wall-cell{
position:relative;flex-shrink:0;height:100%;overflow:hidden;
border-radius:4px;cursor:pointer;background:var(--sh-gs-box-bg,#242424);
transition:width 420ms cubic-bezier(.2,.8,.2,1),opacity 320ms ease;
}
.sh-bent-wall .wall-cell img{
width:100%;height:100%;object-fit:cover;display:block;
}
.sh-bent-wall .wall-hint{
position:absolute;top:10px;inset-inline-start:10px;font-size:9.5px;color:var(--sh-gs-ink,#fff);
background:var(--sh-gs-hint-bg,rgba(0,0,0,.45));padding:3px 9px;border-radius:999px;
backdrop-filter:blur(2px);opacity:0;transition:opacity 220ms ease;
pointer-events:none;letter-spacing:.02em;text-transform:none;
}
.sh-bent-wall .wall-cell.is-active .wall-hint{opacity:1}
.sh-bent-wall .wall-close{
position:absolute;top:10px;inset-inline-end:10px;width:26px;height:26px;border-radius:999px;
border:none;background:var(--sh-gs-close-bg,rgba(0,0,0,.4));color:var(--sh-gs-ink,#fff);display:flex;font-size:12px;
align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(2px);
opacity:0;pointer-events:none;transition:opacity 220ms ease;
}
.sh-bent-wall .wall-cell.is-active .wall-close{opacity:1;pointer-events:auto}
.sh-bent-wall .wall-cap{
position:absolute;inset-inline:0;bottom:0;padding:16px 18px;color:var(--sh-gs-ink,#fff);
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.66) 100%);
opacity:0;transform:translateY(6px);
transition:opacity 320ms ease 80ms,transform 320ms ease 80ms;
pointer-events:none;
}
.sh-bent-wall .wall-cell.is-active .wall-cap{opacity:1;transform:translateY(0)}
.sh-bent-wall .wall-cap-title{
margin:0;font-family:var(--site-title-font);font-size:13px;font-weight:500;color:var(--sh-gs-ink,#fff);
}
.sh-bent-wall .wall-cap-place{
margin:2px 0 5px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--sh-gs-cap-place-ink,rgba(255,255,255,.72));
}
.sh-bent-wall .wall-cap-text{
margin:0;font-size:11px;line-height:1.55;color:var(--sh-gs-cap-text-ink,rgba(255,255,255,.9));max-width:42ch;
}
.sh-bent-wall .wall-lb-img{background:var(--sh-gs-paper,#000)}
@media(prefers-reduced-motion: reduce){
.sh-bent-wall,
.sh-bent-wall .wall-row,
.sh-bent-wall .wall-cell,
.sh-bent-wall .wall-cap,
.sh-bent-wall .wall-hint{
transition:none !important;
}
}
@media(max-width:700px){
.sh-bent-wall{gap:10px}
.sh-bent-wall .wall-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
height:auto!important;
opacity:1!important;
}
.sh-bent-wall .wall-cell,
.sh-bent-wall .wall-cell.is-active{
width:100%!important;
height:auto!important;
aspect-ratio:4/5;
opacity:1!important;
transform:none;
transition:transform 240ms ease,opacity 240ms ease;
}
.sh-bent-wall .wall-cell img{height:100%!important}
.sh-bent-wall .wall-cell.is-active .wall-cap{opacity:1;transform:translateY(0)}
.sh-bent-wall .wall-cell:active{transform:scale(.985)}
.sh-bent-wall .wall-hint{top:8px;inset-inline-start:8px;font-size:8.5px}
.sh-bent-wall .wall-close{top:8px;inset-inline-end:8px}
.sh-bent-wall .wall-cap{padding:12px}
.sh-bent-wall .wall-cap-title{font-size:11px}
.sh-bent-wall .wall-cap-place{font-size:8px}
.sh-bent-wall .wall-cap-text{font-size:9px}
}
@media(max-width:420px){
.sh-bent-wall .wall-row{grid-template-columns:1fr}
.sh-bent-wall .wall-cell,
.sh-bent-wall .wall-cell.is-active{aspect-ratio:16/10}
}
/*
* v1.19.15 — فیدبک فوری کلیک تب دستهبندی گالری (گالری آرشیو).
* قبلاً هیچ نشانهی بصریای در لحظهی کلیک نبود؛ کل مکث AJAX
* (اغلب ۱ تا ۲ ثانیه) بدون هیچ فیدبکی میگذشت و کلیک «بیاثر»
* بهنظر میرسید. حالا هنگام لود، گرید یک افت شفافیت خفیف میگیرد
* تا واضح باشد کلیک ثبت شده و در حال بارگذاریست.
*/
#galleryGrid.is-loading{
opacity:.55;
transition:opacity .15s ease;
pointer-events:none;
}