/* ========================================================================== Monockrom — Behind The Scenes Editorial, monochrome, "contact sheet" concept. Matches the monockrom theme: Nixie One (display titles) + Poppins (body) · dark #141414 / light #f3f0ea. ========================================================================== */ .mbts { /* The monockrom "Behind the scenes" is a DARK section: .mono-bts { background: var(--ink); color: var(--paper); } We map straight onto the theme's own inverted-section tokens so the colours and fonts are identical. Fallbacks match the live theme values. NB: --mbts-ink is the TEXT (light) and --mbts-paper is the BACKGROUND (dark) here, because this is an inverted/dark section. */ --mbts-paper: var(--ink, #141414); /* dark section background */ --mbts-ink: var(--on-dark, #f3f0ea); /* light text on dark */ --mbts-black: #000; --mbts-dim: var(--on-dark-dim, rgba(243,240,234,.60)); --mbts-line: var(--hair-light, rgba(243,240,234,.16)); --mbts-tint: var(--ink-2, #1c1c1c); /* image bed on dark */ --mbts-serif: "Nixie One", Georgia, "Times New Roman", serif; /* titles */ --mbts-sans: "Poppins", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; /* body */ --mbts-cols:3; max-width:1360px; margin:0 auto; padding:clamp(48px,7vw,120px) clamp(20px,5vw,72px) clamp(80px,10vw,160px); background:var(--mbts-paper); /* dark, like the theme's Backstage section */ color:var(--mbts-ink); font-family:var(--mbts-sans); -webkit-font-smoothing:antialiased; } .mbts *, .mbts *::before, .mbts *::after { box-sizing:border-box; } /* The lightbox + zoom overlay are moved to by JS (to escape the theme's transformed scroll wrapper), so they live OUTSIDE .mbts and must carry their own copy of the palette variables — otherwise their background is transparent. */ .mbts-modal, .mbts-zoomer { --mbts-paper: var(--ink, #141414); --mbts-ink: var(--on-dark, #f3f0ea); --mbts-black: #000; --mbts-dim: var(--on-dark-dim, rgba(243,240,234,.60)); --mbts-line: var(--hair-light, rgba(243,240,234,.16)); --mbts-tint: var(--ink-2, #1c1c1c); --mbts-serif: "Nixie One", Georgia, "Times New Roman", serif; --mbts-sans: "Poppins", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; font-family: var(--mbts-sans); box-sizing: border-box; } .mbts-modal *, .mbts-modal *::before, .mbts-modal *::after { box-sizing:border-box; } /* ----- Header ----- */ .mbts-head { max-width:760px; margin:0 0 clamp(36px,5vw,64px); } .mbts-eyebrow { font-family:var(--mbts-sans); font-size:var(--mbts-eyebrow-size, 12px); font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--mbts-dim); margin:0 0 18px; } .mbts-title { font-family:var(--mbts-serif); font-weight:400; font-size:var(--mbts-title-size, clamp(44px,7vw,104px)); line-height:1.02; letter-spacing:-.01em; color:var(--mbts-title-color, var(--mbts-ink)); margin:0 0 22px; overflow-wrap:break-word; word-break:break-word; max-width:100%; } .mbts-intro { font-family:var(--mbts-sans); font-style:italic; font-weight:300; font-size:var(--mbts-intro-size, clamp(16px,1.7vw,21px)); line-height:1.6; color:var(--mbts-dim); margin:0; max-width:60ch; } /* ----- Appearance settings (from wp-admin) ----- */ .mbts--center .mbts-head { text-align:center; margin-left:auto; margin-right:auto; } .mbts--center .mbts-intro { margin-left:auto; margin-right:auto; } .mbts--center .mbts-filters { justify-content:center; } /* Horizontal line under the heading (like the theme's "Our Team"). */ .mbts--rule .mbts-head .mbts-title::after { content:""; display:block; width:min(460px,64%); height:2px; background:var(--mbts-title-color, var(--mbts-ink)); margin:26px 0 0; } .mbts--center.mbts--rule .mbts-head .mbts-title::after { margin-left:auto; margin-right:auto; } .mbts-carousel.mbts--rule .mbts-head .mbts-title::after { margin-top:20px; } /* Heading font choice — both are the theme's own fonts. */ .mbts-title.is-sans { font-family:var(--mbts-sans); font-weight:500; letter-spacing:0; } /* ----- Filters ----- */ .mbts-filters { display:flex; flex-wrap:wrap; gap:10px 26px; padding:22px 0; margin:0 0 clamp(28px,4vw,52px); border-top:1px solid var(--mbts-line); border-bottom:1px solid var(--mbts-line); } .mbts-filter { appearance:none; background:none; border:0; cursor:pointer; padding:4px 0; font-family:var(--mbts-sans); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--mbts-dim); position:relative; transition:color .25s ease; } .mbts-filter::after { content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--mbts-ink); transition:width .3s ease; } .mbts-filter:hover { color:var(--mbts-ink); } .mbts-filter.is-active { color:var(--mbts-ink); } .mbts-filter.is-active::after { width:100%; } /* ----- Grid ----- */ .mbts-grid { display:grid; grid-template-columns:repeat(var(--mbts-cols),1fr); gap:clamp(20px,3vw,44px) clamp(18px,2.4vw,36px); } /* Single-column (vertical) layout: keep cards a comfortable, centred width instead of stretching them full-bleed. */ .mbts[style*="--mbts-cols:1"] .mbts-grid { max-width:760px; margin-inline:auto; gap:clamp(28px,4vw,56px); } .mbts-card { margin:0; } .mbts-card.is-hidden { display:none; } .mbts-card-btn { display:block; width:100%; text-align:left; background:none; border:0; padding:0; cursor:pointer; color:inherit; font-family:inherit; } /* Film frame */ .mbts-frame { position:relative; display:block; aspect-ratio:3/2; overflow:hidden; background:var(--mbts-tint); border:1px solid var(--mbts-line); } .mbts-cover { /* !important beats the theme's global "img { height:auto }" so the photo fills the whole 4:5 frame instead of sitting at the top. */ width:100% !important; height:100% !important; object-fit:cover !important; display:block; filter:grayscale(1) contrast(1.02); transform:scale(1.02); transition:filter .6s ease, transform 1.1s cubic-bezier(.16,1,.3,1); } .mbts-card-btn:hover .mbts-cover, .mbts-card-btn:focus-visible .mbts-cover { filter:grayscale(0) contrast(1); transform:scale(1.06); } /* sprocket-hole strip on top/bottom edges */ .mbts-frame::before, .mbts-frame::after { content:""; position:absolute; left:0; right:0; height:9px; background-image:radial-gradient(circle, rgba(0,0,0,.28) 1.4px, transparent 1.6px); background-size:14px 9px; background-position:center; opacity:0; transition:opacity .4s ease; pointer-events:none; } .mbts-frame::before { top:0; } .mbts-frame::after { bottom:0; } .mbts-card-btn:hover .mbts-frame::before, .mbts-card-btn:hover .mbts-frame::after { opacity:1; } .mbts-play { display:none; /* play icon hidden */ position:absolute; left:50%; top:50%; width:58px; height:58px; transform:translate(-50%,-50%) scale(1); border:1px solid rgba(255,255,255,.85); border-radius:50%; background:rgba(20,20,20,.28); backdrop-filter:blur(2px); opacity:1; transition:opacity .4s ease, transform .4s ease; } .mbts-play::after { content:""; position:absolute; left:53%; top:50%; transform:translate(-50%,-50%); border-style:solid; border-width:8px 0 8px 13px; border-color:transparent transparent transparent #fff; } /* Play icon hidden on hover (so the name overlay stays clean). */ .mbts-card-btn:hover .mbts-play, .mbts-card-btn:focus-visible .mbts-play { opacity:0; } /* Caption overlay — hidden until hover, sitting on the photo itself. */ .mbts-hover { position:absolute; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:6px; padding:26px 20px 20px; background:linear-gradient(to top, rgba(0,0,0,.74) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,0) 100%); opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .55s cubic-bezier(.16,1,.3,1); pointer-events:none; text-align:left; } .mbts-card-btn:hover .mbts-hover, .mbts-card-btn:focus-visible .mbts-hover { opacity:1; transform:none; } .mbts-hover .mbts-name { display:block; font-family:var(--mbts-serif); font-size:var(--mbts-name-size, clamp(20px,1.7vw,28px)); line-height:1.1; font-weight:400; color:var(--mbts-name-color, #fff); } .mbts-hover .mbts-sub { display:block; font-family:var(--mbts-sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); } .mbts-dot { margin:0 6px; } .mbts-empty { font-family:var(--mbts-sans); font-style:italic; font-size:18px; color:var(--mbts-dim); padding:40px 0; } /* ========================================================================== Lightbox / detail ========================================================================== */ .mbts-modal { position:fixed; inset:0; z-index:99999; background:var(--mbts-modal-bg, var(--mbts-paper)); color:var(--mbts-ink); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; touch-action:pan-y; opacity:0; transition:opacity .35s ease; } .mbts-modal.is-open { opacity:1; } .mbts-modal[hidden] { display:none; } .mbts-modal-close { position:fixed; top:22px; right:26px; z-index:3; width:46px; height:46px; border-radius:50%; border:1px solid var(--mbts-line); background:var(--mbts-paper); color:var(--mbts-ink); font-size:26px; line-height:1; cursor:pointer; transition:background .25s ease, color .25s ease, transform .25s ease; } .mbts-modal-close:hover { background:var(--mbts-ink); color:var(--mbts-paper); transform:rotate(90deg); } .mbts-modal-inner { max-width:1200px; margin:0 auto; padding:clamp(64px,9vw,120px) clamp(20px,5vw,64px) 120px; } .mbts-detail-head { max-width:780px; margin:0 auto clamp(40px,6vw,72px); text-align:center; } .mbts-detail-eyebrow { font-family:var(--mbts-sans); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--mbts-dim); margin:0 0 18px; } .mbts-detail-title { font-family:var(--mbts-serif); font-weight:400; font-size:clamp(40px,6vw,86px); line-height:1; letter-spacing:-.01em; margin:0 0 26px; } .mbts-detail-story { font-family:var(--mbts-sans); font-weight:300; font-size:var(--mbts-story-size, clamp(15px,1.3vw,18px)); line-height:1.7; color:var(--mbts-ink); } .mbts-detail-story p { margin:0 0 1em; } .mbts-detail-credit { margin:22px 0 0; font-family:var(--mbts-sans); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--mbts-dim); } .mbts-detail-videos { display:grid; grid-template-columns:1fr; gap:clamp(16px,2.2vw,28px); max-width:1000px; margin:0 auto clamp(40px,6vw,72px); } .mbts-detail-video { position:relative; width:100%; aspect-ratio:16/9; margin:0; background:#000; } .mbts-detail-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } /* Contact sheet grid */ .mbts-sheet { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,20px); } .mbts-sheet-cell { margin:0; position:relative; } .mbts-zoom { display:block; position:relative; overflow:hidden; aspect-ratio:3/2; background:var(--mbts-tint); cursor:zoom-in; border:1px solid var(--mbts-line); } .mbts-sheet-img { width:100% !important; height:100% !important; object-fit:cover !important; display:block; transition:transform 1s cubic-bezier(.16,1,.3,1); } .mbts-zoom:hover .mbts-sheet-img { transform:scale(1.04); } .mbts-sheet-no { position:absolute; left:8px; bottom:7px; font-family:var(--mbts-sans); font-size:10px; letter-spacing:.16em; color:#fff; mix-blend-mode:difference; } /* Zoom overlay */ .mbts-zoomer { position:fixed; inset:0; z-index:100000; background:rgba(10,10,10,.94); display:flex; align-items:center; justify-content:center; padding:4vw; cursor:zoom-out; opacity:0; transition:opacity .3s ease; } .mbts-zoomer.is-open { opacity:1; } .mbts-zoomer[hidden] { display:none; } .mbts-zoomer img { max-width:100%; max-height:92vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.5); } /* ========================================================================== Horizontal carousel ========================================================================== */ .mbts-carousel { padding-top:clamp(40px,6vw,90px); padding-bottom:clamp(40px,6vw,90px); } /* The carousel title defaults smaller than the full-page hero (still overridable by the "Taille du titre" setting via --mbts-title-size). */ /* Carousel title: always responsive so it fits on mobile and matches the theme's section titles — it ignores the big page-hero size on purpose. */ .mbts-carousel .mbts-title { font-size:clamp(26px,7vw,46px); margin-bottom:14px; } .mbts-carousel .mbts-intro { font-size:var(--mbts-intro-size, clamp(15px,1.4vw,18px)); } .mbts-carousel .mbts-head { margin-bottom:clamp(24px,3vw,40px); max-width:100%; } .mbts-carousel { overflow-x:hidden; } .mbts-carousel-wrap { position:relative; } .mbts-track { display:flex; gap:clamp(14px,2vw,28px); /* Centre the cards; when they overflow, "safe" keeps them left-aligned and fully scrollable instead of clipping the first card. */ justify-content:center; justify-content:safe center; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding:2px 2px 8px; scrollbar-width:none; -ms-overflow-style:none; /* hide scrollbar */ } .mbts-track::-webkit-scrollbar { width:0; height:0; display:none; } .mbts-carousel .mbts-card { flex:0 0 clamp(240px,30vw,360px); scroll-snap-align:start; } .mbts-carousel-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:48px; height:48px; border-radius:50%; border:1px solid var(--mbts-line); background:var(--mbts-paper); color:var(--mbts-ink); font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s ease, color .25s ease, opacity .25s ease; } .mbts-carousel-nav:hover { background:var(--mbts-ink); color:var(--mbts-paper); } .mbts-carousel-nav[hidden] { display:none; } .mbts-carousel-nav[disabled] { opacity:.28; cursor:default; pointer-events:none; } .mbts-carousel-prev { left:-6px; } .mbts-carousel-next { right:-6px; } @media (max-width:640px) { .mbts-carousel-nav { display:none; } } /* ========================================================================== Statement / about band (cinematic eclipse) ========================================================================== */ .mbts-statement { position:relative; overflow:hidden; max-width:none; margin:0; padding:clamp(90px,17vh,210px) clamp(20px,5vw,40px); background:#050505; color:#fff; text-align:center; } .mbts-statement-inner { position:relative; z-index:2; max-width:920px; margin:0 auto; } .mbts-statement-title { font-family:var(--mbts-serif); font-weight:400; letter-spacing:.01em; font-size:var(--mbts-statement-title-size, clamp(22px,3.2vw,42px)); line-height:1.25; color:rgba(255,255,255,.9); margin:0 0 22px; text-wrap:balance; } .mbts-statement-title.is-sans { font-family:var(--mbts-sans); } .mbts-statement-text { font-family:var(--mbts-sans); font-weight:300; font-size:clamp(14px,1.4vw,18px); line-height:1.75; color:rgba(255,255,255,.8); max-width:72ch; margin:0 auto; } .mbts-statement-text p { margin:0 0 .5em; } /* CSS eclipse: a dark moon rising from the bottom with a glowing corona. */ .mbts-eclipse { position:absolute; inset:0; z-index:1; pointer-events:none; } .mbts-eclipse::before { content:""; position:absolute; left:50%; top:104%; width:min(860px,150vw); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background:#000; box-shadow: 0 0 4px 1px rgba(255,255,255,.65), 0 0 90px 26px rgba(255,255,255,.22), 0 0 220px 80px rgba(255,255,255,.10); } .mbts-eclipse::after { content:""; position:absolute; left:50%; top:60%; transform:translate(-50%,-50%); width:200%; height:130%; background: radial-gradient(ellipse 58% 46% at 50% 50%, transparent 47%, rgba(255,255,255,.05) 49.5%, transparent 52%), radial-gradient(ellipse 80% 60% at 50% 50%, transparent 60%, rgba(255,255,255,.03) 62.5%, transparent 65%); } @media (prefers-reduced-motion:no-preference) { .mbts-eclipse::before { animation:mbts-glow 7s ease-in-out infinite alternate; } } @keyframes mbts-glow { from { box-shadow:0 0 4px 1px rgba(255,255,255,.55), 0 0 80px 22px rgba(255,255,255,.18), 0 0 200px 70px rgba(255,255,255,.08); } to { box-shadow:0 0 5px 1px rgba(255,255,255,.75), 0 0 110px 32px rgba(255,255,255,.26), 0 0 250px 90px rgba(255,255,255,.12); } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width:960px) { .mbts:not(.mbts-carousel):not(.mbts-statement) { --mbts-cols:2; } .mbts-sheet { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px) { .mbts { --mbts-cols:1; padding-left:20px; padding-right:20px; } .mbts-sheet { grid-template-columns:repeat(2,1fr); } .mbts-filters { gap:8px 18px; } } /* Motion / reveal — only hide cards for the reveal animation when JS is active. Without JS (blocked/cached), cards and their images stay fully visible. */ .mbts.is-js .mbts-card { opacity:0; transform:translateY(22px); } .mbts.is-js .mbts-card.is-in { opacity:1; transform:none; transition:opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); } @media (prefers-reduced-motion:reduce) { .mbts.is-js .mbts-card { opacity:1; transform:none; } .mbts-cover, .mbts-sheet-img { transition:none; } }