/* 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)}
body.siavash-gallery-archive-page .gallery-sidebar-inner{height:100%;padding:58px 36px 34px;display:flex;flex-direction:column;background:#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}
body.siavash-gallery-archive-page .gallery-brand span{font-size:9px;line-height:1.45;letter-spacing:.08em;text-transform:uppercase;color:#aaa}
body.siavash-gallery-archive-page .gallery-nav{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
body.siavash-gallery-archive-page .gallery-nav a{position:relative;font-size:11px;line-height:1.2;color:#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 #3c3c3c;border-radius:2px;
color:#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}
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 #3a3a3a;border-radius:20px;background:transparent;
color:#c9c5be;font-size:11px;line-height:1;letter-spacing:.02em;
transition:color .2s ease,border-color .2s ease;
}
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:#666}
body.siavash-gallery-archive-page .gallery-sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:10px}
body.siavash-gallery-archive-page .gallery-sidebar-bottom a:not(.gallery-lang):not(.gallery-nav-link){font-size:10px;color:#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:#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)}
body.siavash-gallery-archive-page .gallery-tile-overlay span{font-size:9.5px;line-height:1.5;color:#888;text-transform:uppercase;letter-spacing:.08em;text-align:end}
body.siavash-gallery-archive-page .gallery-no-results{padding:100px 0;color:#777;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}
body.siavash-gallery-single-page .gallery-single-visual{position:relative;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#101010cf,#1b1b1bb8);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}
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;background:#090909;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}
body.siavash-gallery-archive-page .gallery-mobile-head-home{color:#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 #3c3c3c;border-radius:2px;
font-size:9.5px;color:#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 #3a3a3a;border-radius:20px;background:transparent;
color:#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:#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:#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:#aaa;font-size:11px}
.gallery-pagination .current{color:var(--sh-gs-ink,#fff);border-color:#777}
/* 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. */
body.siavash-gallery-single-page .gallery-single-visual{
background:#080808;
}
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;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-caption{
color:#8f8f8f;
line-height:1.7;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group{
padding:11px 0 12px;
border-top-color:rgba(255,255,255,.09);
}
body.siavash-gallery-single-page .gallery-single-details .gallery-detail-group h2{
color:#777;
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{
color:#666;
font-size:9px;
}
body.siavash-gallery-single-page .gallery-single-details .gallery-meta strong{
color:#a7a7a7;
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}
}
/* Light-mode-safe base for standalone Core pages. Theme adds the full token
skin; these values prevent a white button/black text collision if the
Core stylesheet is used without the child theme. */
html[data-theme="light"] body.siavash-gallery-single-page .gallery-single-arrow,
html[data-theme="light"] .sh-gallery-viewer-close{
background:rgba(255,255,255,.96) !important;
border-color:rgba(40,40,40,.20) !important;
color:#282828 !important;
box-shadow:0 4px 18px rgba(40,40,40,.10);
}
html[data-theme="light"] body.siavash-gallery-single-page .gallery-single-arrow:hover,
html[data-theme="light"] body.siavash-gallery-single-page .gallery-single-arrow:focus-visible,
html[data-theme="light"] .sh-gallery-viewer-close:hover,
html[data-theme="light"] .sh-gallery-viewer-close:focus-visible{
background:#fff !important;
border-color:rgba(40,40,40,.42) !important;
color:#111 !important;
}
html[data-theme="light"] body.siavash-gallery-single-page .gallery-single-counter{
background:rgba(255,255,255,.94);
color:#282828;
box-shadow:0 3px 14px rgba(40,40,40,.10);
}
html[data-theme="light"] body.siavash-gallery-single-page .gallery-single-filmstrip{
background:linear-gradient(to top,rgba(255,255,255,.90),rgba(255,255,255,0));
}
html[data-theme="light"] body.siavash-gallery-single-page .gallery-single-filmstrip-item{
border-color:rgba(40,40,40,.20);
}
html[data-theme="light"] body.siavash-gallery-single-page .gallery-single-filmstrip-item.is-current{
border-color:#282828;
}
html[data-theme="light"] body.siavash-gallery-archive-page .gallery-tile-media::after{
border-color:rgba(40,40,40,.16);
}
@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;
}
.sh-gallery-viewer-mount .gallery-single-details h1{
margin:0;
padding:0 0 34px;
border-bottom:1px solid #e4e4e4;
font-family:"Inter",sans-serif;
font-size:23px;
line-height:1.15;
font-weight:500;
letter-spacing:.16em;
text-transform:uppercase;
color:#222;
}
.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;
color:#727272;
}
.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;
}
.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;
color:#777;
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;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta span{
font-size:12px;
line-height:1.5;
color:#8a8a8a;
}
.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;
color:#666;
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;
}
.sh-gallery-viewer-mount .gallery-single-details .gallery-meta-project strong{
display:block;
font-size:13px;
color:#666;
}
.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 #dcdcdc;
background:#fafafa;
box-sizing:border-box;
}
.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;
color:#666;
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;
}
.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:#858585;
}
.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:#4f4f4f;
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{
color:#111;
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;
color:#5c5c5c;
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{
background:transparent;
color:#111;
}
@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}
body.siavash-gallery-archive-page .gallery-mobile-head-social{font-size:9px !important;color:#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:#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;
}
/* ---- 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);
background:#fff;
}
@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; }
}
/* neutralize the older light-theme !important circle-button skin so the
close control stays borderless/transparent in every theme */
html[data-theme="light"] .sh-gallery-viewer-close,
html[data-theme="light"] .gallery-single-close{
background:transparent !important;
border:0 !important;
box-shadow:none !important;
}
@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-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);
}
/* ---- 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;
color:var(--muted);
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{
color:var(--text);
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: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: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:rgba(255,255,255,.72);
}
body.siavash-gallery-archive-page .wall-cap-text{
margin:0;font-size:11px;line-height:1.55;color: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:#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:rgba(255,255,255,.65);margin:3px 0 8px}
.wall-lb-text{font-size:12px;line-height:1.6;color:rgba(255,255,255,.85);max-width:52ch;margin:0 auto}
.wall-lb-close,.wall-lb-nav{
position:fixed;border:none;background:rgba(255,255,255,.08);color:#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: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:#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:#fff;
background: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:rgba(0,0,0,.4);color:#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:#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:#fff;
}
.sh-bent-wall .wall-cap-place{
margin:2px 0 5px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72);
}
.sh-bent-wall .wall-cap-text{
margin:0;font-size:11px;line-height:1.55;color: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}
}