block
(prev/next nav buttons + the .mg-spot article panels)
- the empty
container that the script populates with pagination dots
4. Each .mg-spot article needs a data-cat="..." attribute
(space-separated category keywords) for tab filtering to
work, and each .mg-tabs__item needs a matching
data-filter="..." attribute ("all" shows everything). Give
exactly one .mg-spot the class "is-current" to start (the
script keeps this in sync afterwards). Set the panel's
accent color per project with an inline custom property,
e.g. style="--pc:#5b8cff;" on .mg-spot__media.
5. This file depends on a few CSS custom properties defined
on :root in the main stylesheet — define these yourself
if you're dropping this into a project that doesn't have
them already:
--mg-bg-soft (section background)
--mg-surface (panel background)
--mg-muted (secondary text color)
--mg-muted-2 (tertiary / faint text color)
--mg-line-2 (subtle border color)
--mg-ink (primary text color)
--mg-accent (brand accent color 1)
--mg-accent-2 (brand accent color 2)
--mg-body (body font stack)
--mg-exp-head (heading font stack)
========================================================= */
.mg-portfolio { background: var(--mg-bg-soft); overflow: clip; }
.mg-port__head {
max-width: 620px;
margin: 0 0 44px;
text-align: left;
}
.mg-port__head .mg-eyebrow { justify-content: center; }
.mg-port__head p { color: var(--mg-muted); font-size: 16px; line-height: 1.7; margin: 0; }
/* -------------------------------------------------------
Category tabs — centered row, active item as a soft pill,
inactive items as plain uppercase text (Yummily-style tabs)
------------------------------------------------------- */
.mg-tabs {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
list-style: none;
margin: 0 0 56px;
padding: 0;
}
.mg-tabs__item {
font-family: var(--mg-body);
font-weight: 600;
font-size: 12.5px;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--mg-muted);
padding: 11px 22px;
border-radius: 100px;
cursor: pointer;
user-select: none;
transition: color .25s, background .25s, box-shadow .25s;
}
.mg-tabs__item:hover { color: var(--mg-ink); }
.mg-tabs__item:focus-visible { outline: 2px solid var(--mg-accent-2); outline-offset: 2px; }
.mg-tabs__item.is-active {
color: #fff;
background: linear-gradient(90deg, var(--mg-accent), var(--mg-accent-2));
box-shadow: 0 10px 26px color-mix(in srgb, var(--mg-accent), transparent 65%);
}
/* -------------------------------------------------------
Spotlight — one project panel visible at a time
------------------------------------------------------- */
.mg-spotlight {
position: relative;
padding: 0 96px;
}
.mg-spot__nav {
position: absolute;
top: 42%;
transform: translateY(-50%);
z-index: 3;
width: 56px; height: 56px;
border-radius: 50%;
border: 1px solid var(--mg-line-2);
background: color-mix(in srgb, var(--mg-surface), transparent 8%);
backdrop-filter: blur(8px);
color: var(--mg-ink);
font-size: 19px;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all .25s;
}
.mg-spot__nav:hover {
background: linear-gradient(90deg, var(--mg-accent), var(--mg-accent-2));
border-color: transparent;
color: #fff;
transform: translateY(-50%) scale(1.06);
}
.mg-spot__nav--prev { left: 0; }
.mg-spot__nav--next { right: 0; }
.mg-spot {
display: none;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(32px, 5vw, 72px);
}
.mg-spot.is-current { display: grid; }
@media (prefers-reduced-motion: no-preference) {
.mg-spot.is-current { animation: mgSpotIn .65s cubic-bezier(.16,.8,.2,1) both; }
}
@keyframes mgSpotIn {
from { opacity: 0; transform: translateY(22px); }
to { opacity: 1; transform: translateY(0); }
}
/* media panel — colored frame, full screenshot shown uncropped */
.mg-spot__media {
position: relative;
aspect-ratio: 0 / 0.96;
border-radius: 28px;
background:
radial-gradient(120% 120% at 82% 12%, color-mix(in srgb, var(--pc, var(--mg-accent)), transparent 25%) 0%, transparent 55%),
color-mix(in srgb, var(--pc, var(--mg-accent)), #0c0c11 62%);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(19px, 15cqi, 0px);
overflow: hidden;
isolation: isolate;
}
.mg-spot__media::before {
content: "";
position: absolute;
inset: -30%;
background: radial-gradient(circle at 30% 70%, color-mix(in srgb, var(--pc, var(--mg-accent)), transparent 40%), transparent 60%);
filter: blur(40px);
opacity: .55;
z-index: -1;
}
.mg-spot__media img {
max-width: 100%;
max-height: 100%;
width: auto; height: auto;
object-fit: contain;
border-radius: 14px;
box-shadow: 0 30px 60px -20px rgba(0,0,0,.55);
}
/* info column */
.mg-spot__info { max-width: 460px; }
.mg-spot__count {
display: block;
font-family: var(--mg-exp-head);
font-size: 13px;
letter-spacing: 2px;
color: var(--mg-muted-2);
margin: 0 0 18px;
}
.mg-spot__count em { font-style: normal; color: var(--mg-muted-2); }
.mg-spot__info h3 {
font-family: var(--mg-exp-head);
font-weight: 400;
font-size: clamp(30px, 3.2vw, 46px);
line-height: 1.05;
letter-spacing: -0.3px;
text-transform: uppercase;
color: var(--mg-ink);
margin: 0 0 14px;
}
.mg-spot__meta {
font-family: var(--mg-body);
font-weight: 600;
font-size: 12.5px;
letter-spacing: 1.3px;
text-transform: uppercase;
background: linear-gradient(90deg, var(--mg-accent), var(--mg-accent-2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin: 0 0 18px;
}
.mg-spot__desc {
font-size: 15.5px;
line-height: 1.75;
color: var(--mg-muted);
margin: 0 0 30px;
}
.mg-spot__links {
display: flex;
flex-wrap: wrap;
gap: 12px 30px;
}
.mg-spot__link {
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--mg-body);
font-weight: 600;
font-size: 12.5px;
letter-spacing: 1.3px;
text-transform: uppercase;
color: var(--mg-ink);
padding-bottom: 4px;
background-image: linear-gradient(90deg, var(--mg-accent), var(--mg-accent-2));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0% 1.5px;
transition: background-size .3s ease, color .3s ease;
}
.mg-spot__link:hover { color: var(--mg-accent-2); background-size: 100% 1.5px; }
/* pagination dots */
.mg-spot__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 48px;
}
.mg-spot__dots button {
width: 8px; height: 8px;
padding: 0;
border: none;
border-radius: 100px;
background: var(--mg-line-2);
cursor: pointer;
transition: width .3s ease, background .3s ease;
}
.mg-spot__dots button:hover { background: var(--mg-muted); }
.mg-spot__dots button.is-active {
width: 26px;
background: linear-gradient(90deg, var(--mg-accent), var(--mg-accent-2));
}
@media (max-width: 900px) {
.mg-spotlight { padding: 0 8px; }
.mg-spot { grid-template-columns: 1fr; gap: 28px; }
.mg-spot__media { aspect-ratio: 4 / 3; }
.mg-spot__info { max-width: none; }
.mg-spot__nav {
position: static;
transform: none;
width: 46px; height: 46px;
font-size: 16px;
}
.mg-spot__nav--prev, .mg-spot__nav--next { display: none; }
}
@media (max-width: 600px) {
.mg-tabs { gap: 2px; margin-bottom: 40px; }
.mg-tabs__item { padding: 9px 16px; font-size: 11.5px; }
.mg-spot__media { aspect-ratio: 5 / 4; border-radius: 22px; padding: 22px; }
.mg-spot__info h3 { font-size: 28px; }
.mg-spot__desc { font-size: 14.5px; }
.mg-spot__links { gap: 10px 22px; }
}