/* ========================================================= MEDIA GRID STYLESHEET - Joshua Dalton Media ========================================================= Purpose ------- This file contains the reusable media grid, filter nav, and lightbox-trigger card styles shared by portfolio-like sections across joshuadaltonmedia.com. What belongs in this file ------------------------- - Shared portfolio/media filter wrappers and button styles - Shared media grid layout rules and filtered/all state classes - Shared lightbox-trigger media card shell styles - Shared media card title and play-badge styling - Shared responsive breakpoint rules for the media grid system Asset path usage ---------------- This stylesheet is intended to be referenced from pages with: Relationship to page files -------------------------- Page files should: 1. load this stylesheet before any page-specific media-grid skin 2. keep only page-specific media-grid overrides outside this file Maintenance rule ---------------- If a selector is specific to one page's brand treatment, one gallery skin, or one CTA block, it should not be added here. Keep this file focused on the shared media-grid and filter-nav system. */ .portfolio-filter{margin-top:10px;text-align:center} .portfolio-nav{display:grid;grid-template-columns:repeat(2,1fr);margin-top:0;gap:6px;width:100%} .portfolio-nav::-webkit-scrollbar{display:none} .portfolio-nav button{appearance:none;display:block;background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink);padding:clamp(8px,2.4vw,10px) clamp(10px,3vw,14px);border-radius:999px;font-size:.8rem;font-weight:700;line-height:1;cursor:pointer;white-space:nowrap;transition:background-color .18s ease,border-color .18s ease,transform .15s ease} .portfolio-nav button:hover:not(.is-active){background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);transform:translateY(-1px)} .portfolio-nav button.is-active{background:var(--accent);border-color:var(--accent);color:#fff} .portfolio-nav button.is-active:hover{transform:none} .portfolio-nav button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,77,77,.35)} .portfolio-grid{display:grid;gap:var(--portfolio-grid-gap-base,14px);grid-template-columns:var(--portfolio-grid-columns-base,1fr);grid-auto-flow:dense;margin-inline:var(--portfolio-grid-margin-inline-base,0)} .portfolio-grid-wrap{max-width:var(--portfolio-grid-wrap-max-width-base,var(--maxw));margin:var(--portfolio-grid-wrap-margin-top-base,clamp(18px,3vw,32px)) auto 0;padding-inline:var(--portfolio-grid-wrap-padding-inline-base,20px)} .portfolio-item.is-hidden{display:none} .portfolio-item[data-lb-src]{aspect-ratio:var(--portfolio-card-aspect-ratio,16/9);border-radius:var(--portfolio-card-radius,12px);background:var(--portfolio-card-bg,#000);border:var(--portfolio-card-border,1px solid var(--line));min-height:var(--portfolio-card-min-height,0);box-shadow:var(--portfolio-card-shadow,none);overflow:hidden;position:relative;cursor:pointer;transition:opacity .25s ease,transform .25s ease;scroll-snap-align:var(--portfolio-card-scroll-snap-align,initial);scroll-snap-stop:var(--portfolio-card-scroll-snap-stop,normal)} .portfolio-item[data-lb-src]:hover{transform:var(--portfolio-card-hover-transform,translateY(-2px))} .portfolio-item[data-lb-src].is-hidden{opacity:0;pointer-events:none;transform:var(--portfolio-card-hidden-transform,scale(.98))} .portfolio-item[data-lb-src] img{width:100%;height:100%;object-fit:cover;display:block} .portfolio-item[data-lb-src]::after{content:"";position:absolute;inset:0;background:var(--portfolio-card-overlay,linear-gradient(180deg,transparent,rgba(0,0,0,.55)));transition:opacity .25s ease} .portfolio-item[data-lb-src]:hover::after{opacity:var(--portfolio-card-overlay-hover-opacity,.7)} .portfolio-item[data-lb-src] h3{display:var(--portfolio-card-title-display,block);position:var(--portfolio-card-title-position,absolute);left:var(--portfolio-card-title-left,10px);right:var(--portfolio-card-title-right,auto);bottom:var(--portfolio-card-title-bottom,10px);margin:0;z-index:var(--portfolio-card-title-z-index,2);font-size:var(--portfolio-card-title-size,.9rem);line-height:var(--portfolio-card-title-line-height,1.25);font-weight:800;color:var(--portfolio-card-title-color,var(--ink));transition:transform .25s ease} .portfolio-item[data-lb-src]:hover h3{transform:var(--portfolio-card-title-hover-transform,translateY(-2px))} .portfolio-item[data-lb-src] .play-badge{position:absolute;top:var(--portfolio-play-badge-top,12px);right:var(--portfolio-play-badge-right,auto);left:var(--portfolio-play-badge-left,12px);z-index:3;display:grid;place-items:center;width:40px;height:40px;background:var(--portfolio-play-badge-bg,var(--accent));color:#fff;border:0;border-radius:50%;padding:0;font-size:14px;line-height:1;cursor:pointer;box-shadow:var(--portfolio-play-badge-shadow,0 6px 20px rgba(255,77,77,.45));transition:filter .2s ease,transform .2s ease} .portfolio-item[data-lb-src] .play-badge:hover{filter:brightness(1.1);transform:scale(1.05)} /* ================= RESPONSIVE BREAKPOINTS ================= */ @media(min-width:360px){ /* ================= FILTER NAV ================= */ .portfolio-nav{gap:6px} /* ================= MEDIA GRID ================= */ .portfolio-grid{gap:var(--portfolio-grid-gap-360,8px);margin-inline:var(--portfolio-grid-margin-inline-360,16px)} } @media(min-width:700px){ /* ================= FILTER NAV ================= */ .portfolio-nav{grid-template-columns:repeat(4,1fr)} .portfolio-nav button{font-size:1rem} /* ================= MEDIA GRID ================= */ .portfolio-grid{grid-template-columns:var(--portfolio-grid-columns-700,repeat(2,1fr));gap:var(--portfolio-grid-gap-700,12px);margin-inline:var(--portfolio-grid-margin-inline-700,10px)} .portfolio-grid.is-all{grid-template-columns:var(--portfolio-grid-columns-all-700,repeat(3,1fr))} .portfolio-grid.is-filtered{grid-template-columns:var(--portfolio-grid-columns-filtered-700,repeat(2,1fr))} } @media(min-width:1024px){ /* ================= MEDIA GRID ================= */ .portfolio-grid{grid-template-columns:var(--portfolio-grid-columns-1024,repeat(4,1fr));gap:var(--portfolio-grid-gap-1024,18px)} .portfolio-grid-wrap{max-width:var(--portfolio-grid-wrap-max-width-1024,85%);margin-inline:auto;padding-left:var(--portfolio-grid-wrap-padding-left-1024,clamp(20px,4vw,48px));padding-right:var(--portfolio-grid-wrap-padding-right-1024,clamp(20px,4vw,48px))} .portfolio-grid.is-all{grid-template-columns:var(--portfolio-grid-columns-all-1024,repeat(4,1fr))} .portfolio-grid.is-filtered{grid-template-columns:var(--portfolio-grid-columns-filtered-1024,repeat(3,1fr))} } @media(hover:hover){ /* ================= MEDIA CARDS ================= */ .portfolio-item[data-lb-src] .play-badge{transition:transform .25s ease,box-shadow .25s ease} }