/* ============================================================
NATALIE MUSCAT — style.css
============================================================
Fonts loaded via Google Fonts (add to if not present):
Playfair Display — headings / display
DM Sans — body
DM Mono — labels / metadata
============================================================ */
/* ── TOKENS ─────────────────────────────────────────────── */
:root {
--dark: #1C1A16;
--cream: #F2EDE4;
--ember: #C4622A;
--sand: #C4A882;
--stone: #7A6A58;
--font-display: 'Playfair Display', Georgia, serif;
--font-body: 'DM Sans', system-ui, sans-serif;
--font-mono: 'DM Mono', 'Courier New', monospace;
--max-w: 1260px;
--gutter: clamp(1.25rem, 5vw, 3rem);
}
/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
}
html, body {
min-height: 100%;
}
body {
font-family: var(--font-body);
background: var(--cream);
color: var(--stone);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/*
Pushes the footer to the bottom of the viewport on short pages.
main grows to fill any leftover space; the footer (and nav,
since it's a sibling at the top) stay fixed in size.
*/
main {
flex: 1 0 auto;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.mono { font-family: var(--font-mono); }
/* ── NAV ─────────────────────────────────────────────────── */
.site-nav {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 0 var(--gutter);
height: 60px;
background: var(--dark);
}
.nav-logo {
font-family: var(--font-body);
font-size: 0.9rem;
font-weight: 400;
color: var(--cream);
text-decoration: none;
white-space: nowrap;
letter-spacing: 0.01em;
}
.nav-logo em {
font-family: var(--font-display);
font-style: italic;
color: var(--ember);
}
.nav-links {
display: flex;
gap: clamp(1rem, 3vw, 2rem);
list-style: none;
align-items: center;
}
.nav-links a {
font-size: 0.78rem;
color: var(--sand);
text-decoration: none;
letter-spacing: 0.04em;
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
color: var(--cream);
}
/* Burger — hidden on desktop */
.nav-burger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.nav-burger span {
display: block;
width: 22px;
height: 1.5px;
background: var(--cream);
transition: transform 0.25s, opacity 0.25s;
}
/* Open state */
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* Mobile drawer */
@media (max-width: 680px) {
.nav-burger { display: flex; }
.nav-links {
display: none;
position: absolute;
top: 60px;
left: 0;
right: 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
background: var(--dark);
padding: 0.5rem 0 1rem;
z-index: 99;
}
.nav-links.is-open { display: flex; }
.nav-links li { width: 100%; }
.nav-links a {
display: block;
padding: 0.65rem var(--gutter);
font-size: 0.85rem;
}
}
/* ── REVEAL ANIMATIONS ───────────────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
/* ── PAGE HEADER (shared across inner pages) ─────────────── */
.page-header {
padding: clamp(1.5rem, 3vw, 2rem) var(--gutter) clamp(1.5rem, 4vw, 2.5rem);
max-width: var(--max-w);
margin: 0 auto;
}
.page-header-eyebrow {
font-size: 0.68rem;
letter-spacing: 0.1em;
color: var(--stone);
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.page-header-title {
font-family: var(--font-display);
font-size: clamp(2.4rem, 6vw, 3.8rem);
font-weight: 400;
color: var(--dark);
line-height: 1.05;
}
/* ── HERO ────────────────────────────────────────────────── */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: auto;
max-width: var(--max-w);
margin: 0 auto;
padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
gap: var(--gutter);
align-items: center;
}
.hero-text { max-width: 520px; }
.hero-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--ember);
text-transform: uppercase;
margin-bottom: 1.25rem;
}
.hero-name {
font-family: var(--font-display);
font-size: clamp(3rem, 7vw, 5.5rem);
font-weight: 400;
color: var(--dark);
line-height: 1;
margin-bottom: 1.75rem;
}
.hero-name em {
display: block;
font-style: italic;
color: var(--ember);
}
.hero-bio {
font-size: clamp(0.9rem, 1.5vw, 1rem);
color: var(--stone);
line-height: 1.75;
margin-bottom: 2rem;
}
.hero-bio strong { color: var(--dark); font-weight: 500; }
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn {
display: inline-block;
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.06em;
padding: 0.75rem 1.5rem;
text-decoration: none;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-primary {
background: var(--ember);
color: var(--cream);
border: 1px solid var(--ember);
}
.btn-primary:hover {
background: #a8501f;
border-color: #a8501f;
}
.btn-ghost {
background: transparent;
color: var(--dark);
border: 1px solid var(--dark);
}
.btn-ghost:hover {
background: var(--dark);
color: var(--cream);
}
/* Hero photo */
.hero-photo {
position: relative;
height: clamp(420px, 70vh, 680px);
}
.hero-photo-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
}
.hero-photo-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 60%, var(--cream) 100%);
z-index: 1;
pointer-events: none;
}
@media (max-width: 768px) {
.hero {
grid-template-columns: 1fr;
min-height: auto;
padding-top: 2.5rem;
}
.hero-photo { order: -1; height: 55vw; min-height: 260px; }
}
/* ── THREE COLUMNS (homepage) ────────────────────────────── */
.columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
max-width: var(--max-w);
margin: 0 auto;
border-top: 1px solid color-mix(in srgb, var(--sand) 40%, transparent);
}
.col {
padding: clamp(2rem, 4vw, 3rem) var(--gutter);
border-right: 1px solid color-mix(in srgb, var(--sand) 40%, transparent);
}
.col:last-child { border-right: none; }
.col-num {
font-size: 0.65rem;
letter-spacing: 0.1em;
color: var(--ember);
display: block;
margin-bottom: 1rem;
}
.col-title {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 400;
color: var(--dark);
margin-bottom: 0.75rem;
}
.col-desc {
font-size: 0.88rem;
color: var(--stone);
line-height: 1.7;
margin-bottom: 1.25rem;
}
.col-link {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ember);
text-decoration: none;
letter-spacing: 0.04em;
}
.col-link:hover { text-decoration: underline; }
@media (max-width: 680px) {
.columns { grid-template-columns: 1fr; }
.col { border-right: none; border-top: 1px solid color-mix(in srgb, var(--sand) 40%, transparent); }
.col:first-child { border-top: 1px solid color-mix(in srgb, var(--sand) 40%, transparent); }
}
/* ── PHOTOGRAPHY — MASONRY ───────────────────────────────── */
.masonry {
columns: 3;
column-gap: 12px;
padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
max-width: var(--max-w);
margin: 0 auto;
}
.masonry-item {
break-inside: avoid;
margin-bottom: 12px;
}
.masonry-item img {
width: 100%;
height: auto;
display: block;
}
.masonry-placeholder {
background: color-mix(in srgb, var(--dark) 6%, transparent);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.4rem;
font-size: 0.65rem;
color: color-mix(in srgb, var(--stone) 50%, transparent);
letter-spacing: 0.06em;
min-height: 160px;
}
.masonry-placeholder img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 680px) {
.masonry { columns: 2; }
}
@media (max-width: 400px) {
.masonry { columns: 1; }
}
/* ── WEB DESIGN & DEVELOPMENT — PROJECTS ────────────────── */
.wd-project {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: var(--max-w);
margin: 0 auto;
padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
border-top: 1px solid color-mix(in srgb, var(--sand) 40%, transparent);
align-items: center;
}
/* Alternate: odd projects — info left, thumb right (default) */
/* Even projects — thumb left, info right */
.wd-project:nth-child(even) .wd-project-info { order: 2; padding-left: clamp(1.5rem, 3vw, 3rem); padding-right: 0; }
.wd-project:nth-child(even) .wd-project-thumb { order: 1; }
.wd-project-info {
padding-right: clamp(1.5rem, 3vw, 3rem);
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.wd-project-tag {
font-size: 0.65rem;
letter-spacing: 0.08em;
color: var(--stone);
}
.wd-project-title {
font-family: var(--font-display);
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 400;
color: var(--dark);
line-height: 1.15;
}
.wd-project-desc {
font-size: 0.9rem;
color: var(--stone);
line-height: 1.75;
}
.wd-project-link {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ember);
text-decoration: none;
letter-spacing: 0.04em;
align-self: flex-start;
}
a.wd-project-link:hover { text-decoration: underline; }
.wd-project-thumb {
aspect-ratio: 16 / 10;
background: color-mix(in srgb, var(--dark) 6%, transparent);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.wd-project-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.wd-thumb-placeholder {
font-size: 0.65rem;
color: color-mix(in srgb, var(--stone) 45%, transparent);
letter-spacing: 0.06em;
}
/* Development — status badge */
.dev-status {
font-size: 0.68rem;
letter-spacing: 0.06em;
color: var(--ember);
align-self: flex-start;
}
/* Closing line */
.wd-closing {
max-width: var(--max-w);
margin: 0 auto;
padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(3rem, 6vw, 5rem);
border-top: 1px solid color-mix(in srgb, var(--sand) 40%, transparent);
}
.wd-closing p {
font-size: 0.9rem;
color: var(--stone);
margin-bottom: 0.75rem;
}
.wd-closing-link {
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ember);
text-decoration: none;
letter-spacing: 0.04em;
}
.wd-closing-link:hover { text-decoration: underline; }
@media (max-width: 680px) {
.wd-project {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.wd-project:nth-child(even) .wd-project-info { order: 2; padding-left: 0; }
.wd-project:nth-child(even) .wd-project-thumb { order: 1; }
.wd-project-info { padding-right: 0; }
.wd-project-thumb { aspect-ratio: 16 / 9; }
}
/* ── ABOUT — BIO ─────────────────────────────────────────── */
/* ── CONTACT PAGE — BIO + CREDENTIALS SPLIT ──────────────── */
.ct-top-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter) clamp(2rem, 4vw, 3rem);
}
.ct-bio {
padding-right: clamp(1.5rem, 3vw, 3rem);
border-right: 1px solid color-mix(in srgb, var(--sand) 40%, transparent);
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.ct-bio-text {
font-size: clamp(0.9rem, 1.5vw, 1rem);
color: var(--stone);
line-height: 1.8;
}
.ct-bio-links {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.ct-bio-link {
font-family: var(--font-mono);
font-size: 0.87rem;
color: var(--ember);
text-decoration: none;
letter-spacing: 0.04em;
border-bottom: 1px solid color-mix(in srgb, var(--ember) 35%, transparent);
padding-bottom: 2px;
transition: border-color 0.2s;
cursor: pointer;
background: none;
border-top: none;
border-left: none;
border-right: none;
}
.ct-bio-link:hover {
border-bottom-color: var(--ember);
}
/* Credentials */
.ct-creds { padding-left: clamp(1.5rem, 3vw, 3rem); }
.ct-cred-item {
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1.25rem;
}
.ct-cred-num {
font-size: 0.65rem;
color: var(--ember);
letter-spacing: 0.08em;
min-width: 22px;
padding-top: 2px;
}
.ct-cred-text {
font-size: 0.88rem;
color: var(--stone);
line-height: 1.55;
}
.ct-cred-text strong { color: var(--dark); font-weight: 500; }
@media (max-width: 680px) {
.ct-top-split { grid-template-columns: 1fr; gap: 2.5rem; }
.ct-bio { padding-right: 0; border-right: none; }
.ct-creds {
padding-left: 0;
padding-top: 2rem;
border-top: 1px solid color-mix(in srgb, var(--sand) 40%, transparent);
}
}
/* ── CONTACT PAGE — FORM + PHOTO SPLIT ───────────────────── */
.ct-mid-split {
display: grid;
grid-template-columns: 7fr 3fr;
gap: clamp(2rem, 4vw, 3rem);
max-width: var(--max-w);
margin: 0 auto;
padding: clamp(2rem, 4vw, 3rem) var(--gutter);
border-top: 1px solid color-mix(in srgb, var(--sand) 40%, transparent);
align-items: start;
}
.ct-photo-img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: top center;
border-radius: 4px;
}
@media (max-width: 680px) {
.ct-mid-split { grid-template-columns: 1fr; }
.ct-photo-img { max-width: 280px; order: -1; }
}
/* ── CONTACT PAGE — EVENTS (FULL WIDTH) ──────────────────── */
.or-events {
max-width: var(--max-w);
margin: 0 auto;
padding: clamp(2rem, 4vw, 3rem) var(--gutter) clamp(3rem, 6vw, 5rem);
border-top: 1px solid color-mix(in srgb, var(--sand) 40%, transparent);
}
.or-section-label {
font-size: 0.65rem;
letter-spacing: 0.1em;
color: var(--stone);
text-transform: uppercase;
margin-bottom: 1.25rem;
display: block;
}
.or-events-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.or-events-contact {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--ember);
text-decoration: none;
letter-spacing: 0.04em;
}
.or-events-contact:hover { text-decoration: underline; }
.or-events-sublabel {
font-size: 0.62rem;
letter-spacing: 0.1em;
color: var(--stone);
text-transform: uppercase;
margin: 1.5rem 0 0.75rem;
opacity: 0.6;
}
.or-event-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 1rem 0;
border-bottom: 1px solid color-mix(in srgb, var(--sand) 25%, transparent);
transition: opacity 0.2s;
}
.or-event-item.past { opacity: 0.4; }
.or-event-date {
min-width: 42px;
text-align: center;
flex-shrink: 0;
}
.or-event-month {
display: block;
font-size: 0.65rem;
letter-spacing: 0.1em;
color: var(--stone);
text-transform: uppercase;
}
.or-event-day {
font-family: var(--font-display);
font-size: 0.9rem;
color: var(--dark);
line-height: 1;
}
.or-event-info {
display: flex;
flex-direction: column;
gap: 3px;
padding-top: 2px;
}
.or-event-name {
font-size: 0.95rem;
color: var(--dark);
font-weight: 500;
}
.or-event-loc {
font-size: 0.65rem;
color: var(--stone);
letter-spacing: 0.06em;
}
.or-event-desc {
font-size: 0.82rem;
color: var(--stone);
margin-top: 2px;
}
/* ── CONTACT ─────────────────────────────────────────────── */
.ct-form-wrap {
max-width: 100%;
}
.ct-field { display: flex; flex-direction: column; gap: 8px; }
.ct-label {
font-size: 0.65rem;
letter-spacing: 0.1em;
color: var(--stone);
text-transform: uppercase;
}
.ct-input {
background: transparent;
border: none;
border-bottom: 1px solid color-mix(in srgb, var(--stone) 40%, transparent);
color: var(--dark);
font-family: var(--font-body);
font-size: 0.95rem;
padding: 0.5rem 0;
width: 100%;
outline: none;
transition: border-color 0.2s;
border-radius: 0;
}
.ct-input::placeholder { color: color-mix(in srgb, var(--stone) 45%, transparent); }
.ct-input:focus { border-bottom-color: var(--ember); }
.ct-textarea {
resize: vertical;
min-height: 120px;
line-height: 1.6;
}
.ct-submit {
font-family: var(--font-mono);
font-size: 0.75rem;
letter-spacing: 0.06em;
color: var(--cream);
background: var(--ember);
border: none;
padding: 0.8rem 1.75rem;
cursor: pointer;
transition: background 0.2s;
}
.ct-submit:hover { background: #a8501f; }
.ct-success {
display: none;
font-size: 0.9rem;
color: var(--stone);
line-height: 1.7;
padding: 1.5rem 0;
}
.ct-success strong { color: var(--dark); }
/* ── FOOTER ──────────────────────────────────────────────── */
.site-footer {
background: var(--dark);
padding: clamp(1.5rem, 3vw, 2.5rem) var(--gutter);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.footer-logo {
font-family: var(--font-body);
font-size: 0.99rem;
color: var(--cream);
font-weight: 400;
}
.footer-logo em {
font-family: var(--font-display);
font-style: italic;
color: var(--ember);
}
.footer-sub {
font-size: 0.78rem;
letter-spacing: 0.08em;
color: var(--cream);
margin-top: 4px;
}
.footer-links {
list-style: none;
display: flex;
gap: clamp(1rem, 2vw, 1.75rem);
flex-wrap: wrap;
}
.footer-links a {
font-size: 0.72rem;
color: var(--stone);
text-decoration: none;
letter-spacing: 0.04em;
transition: color 0.2s;
}
.footer-links a:hover { color: var(--cream); }
@media (max-width: 480px) {
.site-footer { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
}