/* ============================================================
JOSHI PERERA — PORTFOLIO
Google Fonts loaded via in each HTML
============================================================ */
:root {
--bg: #F7F3EC;
--text: #1C1C1C;
--text-muted: rgba(28, 28, 28, 0.45);
--font-serif: 'Cormorant Garamond', Georgia, serif;
--font-sans: 'DM Sans', system-ui, sans-serif;
--space: 20px;
--track-h: 50vh;
--ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
/* Plyr video player skin (project-video pages) */
--plyr-color-main: #F7F3EC; /* cream accent — matches palette */
--plyr-font-family: 'DM Sans', system-ui, sans-serif;
--plyr-font-size-base: 13px;
--plyr-control-spacing: 8px;
--plyr-video-background: #111;
}
*, *::before, *::after { box-sizing: border-box; }
/* Images are not draggable — pairs with the JS contextmenu guard in script.js */
img { -webkit-user-drag: none; }
/* ── Shimmer keyframe (shared) ─────────────────────────── */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* ── GIF HOVER PREVIEW (video cards — projects page) ──────────────────────── */
.card__gif {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
/* Override the .card img shimmer — gif must be transparent while loading */
background: none;
animation: none;
min-height: 0;
}
/* Opacity is driven entirely by JS once the GIF has loaded — no CSS hover rule */
/* ── CREDITS (nav__desc — project pages) ──────────────────────────────────── */
.nav__credits {
margin-top: 10px;
line-height: 2;
opacity: 0.7;
}
/* ── VIDEO POSTER (thumbnail + play overlay — all breakpoints) ────────────── */
.video-poster {
position: absolute;
inset: 0;
z-index: 2;
cursor: pointer;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.video-poster__play {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(247, 243, 236, 0.88);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.video-poster:hover .video-poster__play {
transform: scale(1.1);
background: rgba(247, 243, 236, 1);
}
.video-poster__play svg {
width: 22px;
height: 22px;
margin-left: 3px; /* optical centre for play triangle */
fill: var(--text);
}
/* ============================================================
DESKTOP (min-width: 800px)
============================================================ */
@media (min-width: 800px) {
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
background-color: var(--bg);
color: var(--text);
font-family: var(--font-sans);
font-size: clamp(13px, 1.5vw, 15px);
font-weight: 400;
line-height: 1.5;
margin: 0;
padding: 0;
overflow: hidden;
-webkit-font-smoothing: antialiased;
font-optical-sizing: auto;
}
a { text-decoration: none; color: inherit; }
p { margin: 0; }
h1, h2 {
font-family: var(--font-sans);
font-size: clamp(13px, 1.5vw, 15px);
font-weight: 400;
color: var(--text);
margin: 0;
}
/* ── NAV ───────────────────────────────────────────── */
.nav {
margin: var(--space);
width: calc(100% - 40px);
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--space);
height: auto;
position: relative;
z-index: 10;
}
.nav__logo {
font-family: var(--font-serif);
font-size: clamp(20px, 3vw, 38px);
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
text-transform: lowercase;
padding-left: 12px;
user-select: none;
-webkit-user-select: none;
}
.nav__logo a { color: inherit; }
/* Logo link on project pages — inherits nav__logo size */
.logo-link {
display: block;
transition: opacity 0.15s;
}
.logo-link:hover { opacity: 0.6; }
/* Back link below logo on project pages */
.back-link {
display: block;
font-family: var(--font-sans);
font-size: clamp(11px, 1.2vw, 13px);
font-weight: 400;
opacity: 0.38;
margin-top: 8px;
letter-spacing: 0;
transition: opacity 0.15s;
}
.back-link:hover { opacity: 0.9; }
.nav__links { grid-column-start: 2; }
.nav__desc { grid-column-start: 3; line-height: 1.6; }
.nav__links a {
display: block;
width: fit-content; /* hitbox hugs the text, not the full column */
opacity: 0.45;
transition: opacity 0.15s;
color: inherit;
line-height: 1.7;
}
.nav__links a:hover { opacity: 1; }
.nav__links a.active-page { opacity: 1; }
.nav__links a.nav-toggle--open { opacity: 1; }
.expandable {
display: none;
margin-top: 6px;
margin-bottom: 16px;
line-height: 1.6;
opacity: 0.8;
}
/* ── FILTER BAR (projects.html) ───────────────────── */
.filter-bar {
margin-top: 2px;
margin-bottom: 16px;
padding-left: 0;
}
.filter-btn {
background: none;
border: none;
font-family: var(--font-sans);
font-size: clamp(13px, 1.5vw, 15px);
color: var(--text);
cursor: pointer;
padding: 0;
display: block;
line-height: 1.7;
opacity: 0.38;
transition: opacity 0.15s;
}
.filter-btn.active,
.filter-btn:hover { opacity: 1; }
/* ── SCROLL TRACK ──────────────────────────────────── */
.scroll-track {
overflow-x: auto;
overflow-y: hidden;
position: absolute;
bottom: var(--space);
left: 0;
width: 100%;
white-space: nowrap;
}
.scroll-track { scrollbar-width: none; }
.scroll-track::-webkit-scrollbar { display: none; }
/* ── CARDS ─────────────────────────────────────────── */
.card {
display: inline-block;
margin-left: var(--space);
position: relative;
vertical-align: bottom;
overflow: hidden; /* contain image scale on hover */
}
.card img {
display: block;
height: var(--track-h);
width: auto;
/* Reserve space while loading so the track doesn't collapse */
min-width: calc(var(--track-h) * 0.67);
min-height: var(--track-h);
/* Shimmer placeholder — visible on the image itself until it loads */
background: linear-gradient(90deg, #eae6df 25%, #f2ede8 50%, #eae6df 75%);
background-size: 200% 100%;
animation: shimmer 1.8s ease-in-out infinite;
/* Hover transition */
transition: transform 0.45s var(--ease), opacity 0.2s ease;
}
.card:hover img {
transform: scale(1.03);
}
/* Clicking photos in photo project pages opens lightbox */
.page-project-photo .card img {
cursor: pointer;
}
.card__title {
display: block;
margin-bottom: 10px;
color: var(--text);
transition: opacity 0.15s;
}
.card:hover .card__title { opacity: 0.55; }
.card__client {
display: block;
opacity: 0.45;
margin-bottom: 14px;
}
.desk-sep { display: inline; }
.mob-break { display: none; }
/* ── VIDEO CARDS ───────────────────────────────────── */
/* Native video / iframe on video project pages (pre-Plyr or fallback) */
.card--video video,
.card--video iframe {
display: block;
height: var(--track-h);
aspect-ratio: 16 / 9;
border: none;
background: #111; /* dark placeholder while loading */
animation: none; /* no shimmer */
}
/* Plyr wrapper — keeps the player at track height once it initialises */
.card--video .plyr--video {
height: var(--track-h);
aspect-ratio: 16 / 9;
}
/* Bigger video on the dedicated project page */
body.page-project-video {
--track-h: 70vh;
}
/* ── FOOTER CARD ───────────────────────────────────── */
.footer-card {
display: inline-block;
margin-left: var(--space);
vertical-align: bottom;
height: var(--track-h);
position: relative;
}
.footer-inner {
position: absolute;
bottom: 0;
width: calc(100vw / 3 - 5px);
}
.footer-inner p {
margin-top: var(--space);
opacity: 0.45;
line-height: 1.6;
}
.footer-inner a:hover { text-decoration: underline; }
/* ── HOME PAGE (index.html) ───────────────────────── */
.hero-video {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 0;
object-fit: cover;
pointer-events: none; /* cursor:none works natively on