/* ==========================================================================
main.css — base layout, typography, sections
========================================================================== */
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.6;
color: var(--color-text);
background: var(--color-bg);
overflow-x: hidden;
}
/* smooth scroll for in-page anchors (nav -> section jumps) */
html {
scroll-behavior: smooth;
}
section[id] {
scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}
/* page-level state machine on — initial is the brief intro (locked
to viewport), revealed makes the page scrollable. */
body.page--initial {
overflow: hidden;
height: 100vh;
}
body.page--revealed {
overflow-y: auto;
overflow-x: hidden;
height: auto;
}
/* ----- Container ----- */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: clamp(var(--space-5), 4vw, var(--space-7));
}
/* ----- Section base ----- */
.section {
padding-block: clamp(var(--space-8), 12vw, var(--space-10));
position: relative;
z-index: var(--z-content);
}
.section--intro {
background: linear-gradient(180deg, transparent 0%, var(--color-bg-alt) 100%);
}
.section__tag {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--fs-small);
color: var(--color-accent-1);
letter-spacing: 0.2em;
text-transform: uppercase;
margin-bottom: var(--space-4);
}
.section__title {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--fs-h1);
line-height: 1.1;
margin-bottom: var(--space-5);
letter-spacing: -0.01em;
}
.section__body {
max-width: 720px;
color: var(--color-text-soft);
font-size: 1.1rem;
line-height: 1.7;
}
/* ----- Category grid (6 directions on main page) ----- */
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-5);
margin-top: var(--space-7);
}
.category-item {
display: flex;
flex-direction: column;
border: 1px solid var(--color-line);
border-radius: var(--r-md);
background: rgba(10, 20, 40, 0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
overflow: hidden;
text-decoration: none;
color: inherit;
position: relative;
transition:
border-color var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
}
.category-item:hover {
border-color: var(--color-accent-1);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(232, 180, 92, 0.12);
}
.category-item__media {
position: relative;
aspect-ratio: 16 / 9;
background:
radial-gradient(ellipse at top left, rgba(232, 180, 92, 0.12), transparent 50%),
radial-gradient(ellipse at bottom right, rgba(184, 168, 224, 0.10), transparent 50%),
rgba(5, 8, 19, 0.6);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--color-line);
overflow: hidden;
}
.category-item__placeholder {
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.3em;
color: var(--color-text-mute);
text-transform: uppercase;
opacity: 0.7;
}
/* Image variant — actual ![]()
filling the media area */
.category-item__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms var(--ease-out),
filter 600ms var(--ease-out);
filter: brightness(0.92) saturate(0.95);
}
.category-item:hover .category-item__image {
transform: scale(1.06);
filter: brightness(1) saturate(1);
}
.category-item--image .category-item__media {
background: var(--color-bg);
}
/* Make render-image cards feel clickable */
.category-item--image {
cursor: zoom-in;
}
.category-item--image .category-item__media::after {
content: '⤢ View';
position: absolute;
inset: auto var(--space-3) var(--space-3) auto;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.2em;
color: var(--color-text);
background: rgba(5, 8, 19, 0.6);
padding: 6px 10px;
border-radius: var(--r-sm);
border: 1px solid var(--color-line);
opacity: 0;
transform: translateY(4px);
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
pointer-events: none;
backdrop-filter: blur(6px);
}
.category-item--image:hover .category-item__media::after,
.category-item--image:focus-visible .category-item__media::after {
opacity: 1;
transform: translateY(0);
}
/* ----- Project group (sub-section inside a section) ----- */
.project-group + .project-group {
margin-top: var(--space-8);
}
.project-group__title {
font-family: var(--font-display);
font-size: clamp(1.15rem, 1.8vw, 1.5rem);
font-weight: 700;
color: var(--color-text);
margin: 0 0 var(--space-5);
letter-spacing: 0.01em;
display: flex;
align-items: center;
gap: var(--space-3);
}
.project-group__title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right,
var(--color-line) 0%,
var(--color-line) 60%,
transparent 100%);
opacity: 0.7;
}
/* ----- Video card (used inside project groups) ----- */
.category-item--video {
cursor: pointer;
}
.category-item--video .category-item__media {
background:
radial-gradient(ellipse at center, rgba(232, 180, 92, 0.10), transparent 60%),
var(--color-bg);
position: relative;
overflow: hidden;
}
.category-item--video .category-item__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.55;
filter: brightness(0.85) saturate(0.9);
transition: opacity 600ms var(--ease-out),
filter 600ms var(--ease-out);
pointer-events: none;
}
.category-item--video:hover .category-item__video,
.category-item--video:focus-visible .category-item__video {
opacity: 0.75;
filter: brightness(1) saturate(1);
}
.category-item__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 64px;
height: 64px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(232, 180, 92, 0.92);
color: var(--color-bg);
border-radius: var(--r-pill);
font-size: 1.4rem;
line-height: 1;
padding-left: 4px; /* visually centre the triangle */
box-shadow: 0 8px 24px rgba(232, 180, 92, 0.35),
0 0 0 6px rgba(232, 180, 92, 0.12);
transition: transform var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
pointer-events: none;
}
.category-item--video:hover .category-item__play,
.category-item--video:focus-visible .category-item__play {
transform: translate(-50%, -50%) scale(1.08);
box-shadow: 0 12px 32px rgba(232, 180, 92, 0.5),
0 0 0 10px rgba(232, 180, 92, 0.18);
}
.category-item--video .category-item__media::after {
content: '▸ Play';
position: absolute;
inset: auto var(--space-3) var(--space-3) auto;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.2em;
color: var(--color-text);
background: rgba(5, 8, 19, 0.6);
padding: 6px 10px;
border-radius: var(--r-sm);
border: 1px solid var(--color-line);
opacity: 0;
transform: translateY(4px);
transition: opacity var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
pointer-events: none;
backdrop-filter: blur(6px);
}
.category-item--video:hover .category-item__media::after,
.category-item--video:focus-visible .category-item__media::after {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 767px) {
.category-item__play {
width: 52px;
height: 52px;
font-size: 1.1rem;
}
}
.category-item__body {
padding: var(--space-5);
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-2);
position: relative;
}
.category-item__title {
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
color: var(--color-text);
margin: 0;
letter-spacing: -0.005em;
}
.category-item__meta {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--color-text-mute);
letter-spacing: 0.05em;
margin: 0;
}
/* Link variant — shows arrow indicator on hover */
a.category-item .category-item__body::after {
content: '→';
position: absolute;
right: var(--space-5);
bottom: var(--space-5);
color: var(--color-text-mute);
font-size: 1.2rem;
line-height: 1;
transition:
color var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
a.category-item:hover .category-item__body::after {
color: var(--color-accent-1);
transform: translateX(4px);
}
/* ----- Section alt background (alternating rhythm) ----- */
.section--alt {
background: linear-gradient(180deg,
transparent 0%,
rgba(10, 20, 40, 0.5) 50%,
transparent 100%);
}
/* ----- Plan timeline (Roadmap section) ----- */
.plan-timeline {
list-style: none;
padding: 0;
margin: var(--space-7) 0 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-5);
counter-reset: plan-step;
}
.plan-timeline__item {
position: relative;
padding: var(--space-6);
border: 1px solid var(--color-line);
border-radius: var(--r-md);
background: rgba(10, 20, 40, 0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
gap: var(--space-3);
counter-increment: plan-step;
transition:
border-color var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out);
}
.plan-timeline__item::before {
content: counter(plan-step, decimal-leading-zero);
position: absolute;
top: var(--space-4);
right: var(--space-5);
font-family: var(--font-mono);
font-size: 0.85rem;
letter-spacing: 0.1em;
color: var(--color-text-mute);
opacity: 0.4;
}
.plan-timeline__item:hover {
border-color: var(--color-accent-1);
transform: translateY(-2px);
}
.plan-timeline__period {
display: inline-block;
font-family: var(--font-display);
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1;
color: var(--color-accent-1);
letter-spacing: 0.02em;
text-shadow: 0 0 24px rgba(232, 180, 92, 0.25);
}
.plan-timeline__title {
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--color-text);
margin: 0;
}
.plan-timeline__body {
color: var(--color-text-mute);
font-size: 0.95rem;
line-height: 1.55;
margin: 0;
}
/* ----- Footer ----- */
.site-footer {
padding-block: var(--space-7);
border-top: 1px solid var(--color-line);
text-align: center;
position: relative;
z-index: var(--z-content);
}
.site-footer__tagline {
font-family: var(--font-display);
color: var(--color-accent-4);
margin-bottom: var(--space-3);
font-size: var(--fs-small);
letter-spacing: 0.1em;
text-shadow: 0 0 18px rgba(127, 184, 232, 0.28);
}
.site-footer__copyright {
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--color-text-mute);
opacity: 0.7;
}
/* ----- Content reveal ----- */
.site-content {
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-slow) var(--ease-out) 200ms;
}
body.page--revealed .site-content {
opacity: 1;
pointer-events: auto;
}
/* ----- Scroll reveal animation ----- */
.reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity var(--dur-slow) var(--ease-out),
transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ----- Section CTA (used by sections without a card grid, e.g. Photography) ----- */
.section__cta {
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-top: var(--space-5);
padding: var(--space-4) var(--space-6);
background: rgba(232, 180, 92, 0.08);
border: 1px solid rgba(232, 180, 92, 0.30);
border-radius: var(--r-md);
color: var(--color-accent-1);
text-decoration: none;
font-family: var(--font-display);
font-weight: 500;
font-size: 1rem;
letter-spacing: 0.02em;
transition: background var(--dur-base) var(--ease-out),
transform var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out);
}
.section__cta:hover,
.section__cta:focus-visible {
background: rgba(232, 180, 92, 0.18);
border-color: var(--color-accent-1);
transform: translateY(-2px);
outline: none;
}
.section__cta-arrow {
display: inline-block;
transition: transform var(--dur-base) var(--ease-out);
}
.section__cta:hover .section__cta-arrow,
.section__cta:focus-visible .section__cta-arrow {
transform: translateX(4px);
}
/* ----- Utilities ----- */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
Lightbox — fullscreen image preview (used by .category-item--image)
Click any render card to open; ←/→ to navigate, Esc to close.
========================================================================== */
.lightbox {
position: fixed;
inset: 0;
z-index: var(--z-lightbox);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
background: rgba(3, 5, 12, 0.94);
backdrop-filter: blur(10px);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-slow) var(--ease-out),
visibility 0s linear var(--dur-slow);
pointer-events: none;
}
.lightbox.is-open {
opacity: 1;
visibility: visible;
transition: opacity var(--dur-slow) var(--ease-out),
visibility 0s linear 0s;
pointer-events: auto;
}
.lightbox__figure {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
max-width: min(1800px, 96vw);
max-height: 92vh;
margin: 0;
transform: scale(0.96);
transition: transform var(--dur-slow) var(--ease-out);
}
.lightbox.is-open .lightbox__figure {
transform: scale(1);
}
.lightbox__image {
max-width: 100%;
max-height: 78vh;
object-fit: contain;
display: block;
border-radius: var(--r-md);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(184, 168, 224, 0.08);
background: var(--color-bg);
}
.lightbox__video {
max-width: 100%;
max-height: 78vh;
display: none; /* forward-compat self-hosted