/* Fonts are loaded from base.njk ( in the ) — faster than a CSS @import, and only "Jost" is requested because it is the only family this site uses. */ /* Jost's own Ā/ā glyphs are broken (the macron line lands over the NEXT letter), so ONLY these two letters come from Urbanist — a tiny ~1 KB file with matching geometric shapes. Listed FIRST in the font stack, but limited to U+0100-0101, so every other letter still renders in Jost. Used for Persian transliteration like Jān / Nān / Ān. */ @font-face { font-family: 'MacronFix'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/l/font?kit=L0x-DF02iFML4hGCyPqnZypEi0i-HttHg5m-2j0&skey=1cdbdfe57ba870bf&v=v18) format('woff2'); unicode-range: U+0100-0101; } /* ======================== VARIABLES ======================== */ :root { --max-width: 1500px; --side-padding: clamp(1.5rem, 5vw, 10rem); /* This is the new fluid padding */ --accent: #111; --muted: #666; --overlay-opacity: 0.35; } /* ======================== GLOBAL RESET & BODY ======================== */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; /* 'MacronFix' serves ONLY Ā/ā (Jost draws those two wrong) — see @font-face above */ font-family: 'MacronFix', 'Jost', sans-serif; line-height: 1.5; color: var(--accent); direction: ltr; text-transform: uppercase; } body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; /* dvh excludes Safari's address bar (falls back to vh) */ } /* Hide empty images to prevent browser "shadow lines" (broken image borders) */ img[src=""], img:not([src]), img[src="null"], img[src="undefined"], img[src="/"] { display: none !important; } /* ======================== HOME PAGE HERO ======================== */ body.home .hero { width: 100%; height: 100vh; height: 100dvh; min-height: 400px; background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; position: relative; z-index: 0; } /* ======================== HEADER / TOP MENU ======================== */ .site-header { position: fixed; top: 0; z-index: 1000; width: 100%; } body:not(.home) .site-header { background: #fff; } .header-inner { display: flex; justify-content: space-between; align-items: center; max-width: var(--max-width); margin: 0 auto; padding: 20px var(--side-padding); } .header-inner .logo a { font-weight: 350; text-decoration: none; font-size: 2rem; color: #000; } .header-inner .main-nav { display: flex; align-items: center; } .header-inner .main-nav .nav-links { display: flex; gap: 1rem; } .header-inner .main-nav .nav-links a { text-decoration: none; color: var(--muted); font-size: 1.5rem; font-weight: 350; transition: color 0.3s ease; } .header-inner .main-nav .nav-links a:hover { color: #000; } .hero { width: 100%; min-height: 300px; background-size: cover; background-position: center; background-repeat: no-repeat; margin: 0; } body.home { margin: 0; padding: 0; height: 100vh; height: 100dvh; } body.home .hero { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; } body.home .site-main { position: relative; z-index: 1; background: transparent; box-shadow: none; } body.home .site-footer { position: absolute; bottom: 0; left: 0; width: 100%; background: transparent; color: rgb(185, 185, 185); text-align: center; padding: 1rem; z-index: 2; } /* ======================== MAIN CONTENT ======================== */ .site-main { flex: 1 0 auto; max-width: var(--max-width); margin: 40px auto; padding: 20px var(--side-padding); background: rgba(255, 255, 255, 0.0); /* === NEW: Center all direct children (like project-container) === */ display: flex; flex-direction: column; align-items: center; } body:not(.home) .site-main { margin-top: 80px; background: #fff; } /* ======================== ABOUT PAGE SPLIT ======================== */ .about-container { display: flex; gap: 60px; align-items: flex-start; margin: 0 auto 40px; font-size: 1.2rem; text-align: justify; color: #6d6d6d; } /* Add this new rule to make CV and Contact sections full-width */ .about-full-width { width: 100%; } .about-image, .about-bio { flex: 1; } .about-image img { width: 100%; height: auto; display: block; } .about-bio h1 { padding-bottom: 8px; color: #000; font-size: 1.2rem; font-weight: 350; } /* ======================== PROJECT GALLERY & DETAIL ======================== */ /* Add this new rule */ .project-page-wrapper { display: flex; flex-direction: column; align-items: center; width: 100%; } .project-container { display: flex; gap: 60px; max-width: var(--max-width); /* Use the main layout's max-width */ width: 100%; /* UPDATED: Ensure it fills the space for centering */ margin-bottom: 40px; /* UPDATED: Replaced margin: auto */ align-items: flex-start; } .project-media { flex: 0 0 60%; width: 60%; text-align: left; } /* Ensure fallback standalone images scale correctly like the gallery */ .project-media img { width: 100% !important; height: auto !important; display: block !important; object-fit: contain; } .project-details { flex: 1; text-align: left; } .project-details h1 { padding-bottom: 8px; color: #000; font-size: 1.2rem; font-weight: 450; } .project-details .project-description { color: var(--muted); text-align: justify; font-size: 1.1rem; } .project-description p + p { margin-top: 1em; } .project-details h3 { margin-top: 1.5em; margin-bottom: 0.5em; font-size: 1rem; font-weight: 350; color: #000; } .project-details h2 { font-size: 1rem; font-weight: 350; color: #000; margin-bottom: 0.5em; } .project-details h2 ~ p { font-size: 0.8rem; } .project-details h3 ~ p { font-size: 0.8rem; color: var(--muted); font-weight: 250; } .project-details h3 ~ p strong { font-weight: 350; color: var(--accent); } /* ======================== SUB-PROJECT THUMBNAIL GRID (Responsive & Centered) ======================== */ .sub-project-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; } .sub-project-thumb { aspect-ratio: 1 / 1; width: 80px; cursor: pointer; transition: transform 0.3s ease, filter 0.3s ease; border-radius: 0; overflow: hidden; } .sub-project-thumb img { width: 100%; height: 100%; object-fit: cover; } .sub-project-thumb:hover { transform: scale(1.1); filter: brightness(1.15); } .sub-project-thumb.active { filter: brightness(1.2); transform: scale(1.05); } .main-photo-wrap { position: relative; width: 100%; } /* Corner-bracket button (bottom-left of the image) — opens fullscreen */ .expand-btn { position: absolute; bottom: 10px; left: 10px; z-index: 3; width: 34px; height: 34px; padding: 6px; border: none; background: rgba(255, 255, 255, 0.55); color: #333; border-radius: 2px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.25s ease, background 0.25s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .expand-btn svg { width: 100%; height: 100%; } .expand-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.8); } .main-photo-wrap .main-photo { position: absolute; top: 0; left: 0; width: 100%; height: auto; object-fit: contain; display: block; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out; } .main-photo-wrap .main-photo.active { position: relative; opacity: 1; visibility: visible; z-index: 2; } #main-caption { color: #a8a8a8; font-size: 1rem; margin-top: 10px; min-height: 1.2em; text-align: center; } /* Styles for Dot Navigation */ .dots-container { display: flex; flex-wrap: wrap; /* many dots (e.g. 46 paintings) wrap to new lines instead of pushing the page wider */ justify-content: center; gap: 12px; margin-top: 5px; } .dot { width: 5px; height: 5px; background-color: #d1d1d1; border-radius: 50%; cursor: pointer; transition: transform 0.3s ease, background-color 0.3s ease; } .dot:hover { background-color: #888; } .dot.active { background-color: #555; transform: scale(1.2); } /* ======================== MODAL STYLING ======================== */ .modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; background-color: rgba(255, 255, 255, 0.6); display: none; backdrop-filter: blur(2px); justify-content: center; align-items: center; z-index: 1000; cursor: pointer; } .modal-backdrop.open { display: flex; } .modal-content-wrapper { display: flex; flex-direction: column; align-items: center; max-width: 90%; max-height: 90%; } .modal-image { max-width: 100%; max-height: 74vh; /* leaves room for the × above and the caption below */ object-fit: contain; cursor: pointer; } .modal-close { /* Mobile: sits above the image, centered like a header — outside the picture */ cursor: pointer; padding: 4px 10px; margin-bottom: 8px; transition: transform 0.2s ease, color 0.2s ease; font-size: 0; line-height: 1; display: flex; align-items: center; justify-content: center; } .modal-close::before { content: '\00d7'; font-size: 2.6rem; font-weight: 200; /* just a touch bolder than the original hairline */ color: #999; line-height: 1; transition: color 0.2s ease; } .modal-close:hover { transform: scale(1.1); } .modal-close:hover::before { color: #000; } /* Desktop: put the × back in the top-right corner of the screen (as before) */ @media (min-width: 769px) { .modal-close { position: absolute; top: 25px; right: 35px; margin-bottom: 0; z-index: 1001; } .modal-close::before { font-size: 3rem; } } /* ======================== MODAL CAPTION ======================== */ .modal-caption { color: #6d6d6d; font-size: 1rem; padding-top: 10px; text-align: center; width: 100%; font-weight: 350; } /* ======================== MODAL NAVIGATION ======================== */ .modal-arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 3rem; font-weight: 100; color: #999; cursor: pointer; user-select: none; padding: 0 2rem; transition: color 0.3s ease, transform 0.2s ease; z-index: 1002; display: none; } .modal-arrow:hover { color: #000; transform: translateY(-50%) scale(1.1); } .modal-arrow.prev { left: 10px; } .modal-arrow.next { right: 10px; } /* ======================== PROJECTS GRID ======================== */ .projects-grid { display: flex; flex-wrap: wrap; justify-content: center; /* rows — including the last one — are centered */ gap: 20px; align-items: flex-start; width: 100%; } .project-card { width: 220px; /* size of one project card — change this number to make cards bigger/smaller */ } @media (max-width: 560px) { .project-card { width: 100%; /* one card per row on phones */ } } .project-card { text-align: left; border: none; border-radius: 0; background: transparent; transition: transform 0.3s ease; position: relative; overflow: hidden; break-inside: unset; margin-bottom: 0; } .project-card a { position: relative; display: block; text-decoration: none; color: inherit; } .project-card a img { opacity: 1; display: block; width: 100%; height: auto; transition: transform .3s ease, filter .3s ease; backface-visibility: hidden; } /* Gentle fade-in for grid images as they load (only when JS marks the grid ready) */ .projects-grid.fade-ready .project-card img { opacity: 0; transition: opacity .5s ease, transform .3s ease, filter .3s ease; } .projects-grid.fade-ready .project-card img.loaded { opacity: 1; } .overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, var(--overlay-opacity)); backdrop-filter: blur(1px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s ease; } .overlay-text { color: #ffffff; font-size: 1.1rem; font-weight: 350; white-space: nowrap; } .project-card:hover { transform: scale(1.05); } .project-card:hover a img { filter: brightness(1.15); } .project-card:hover .overlay { opacity: 1; } /* Touch screens have no hover — the card in the middle of the screen gets the same effect while scrolling (class set by the script on the projects page) */ @media (hover: none) { .project-card.touch-active { transform: scale(1.05); } .project-card.touch-active a img { filter: brightness(1.15); } .project-card.touch-active .overlay { opacity: 1; } } .project-card h3 { margin-top: 8px; font-size: 1rem; color: var(--accent); text-decoration: none; text-align: left; font-weight: 350; } /* ======================== PROJECT NAVIGATION ======================== */ .project-nav { display: flex; justify-content: center; /* UPDATED: Moves the words to the center */ align-items: center; gap: 40px; /* UPDATED: Adds space between the two links */ width: 100%; margin-top: 60px; padding-top: 20px; } .nav-arrow { font-size: 3rem; /* Matches project description size */ font-weight: 100; /* Matches logo/description weight */ text-decoration: none; color: var(--muted); /* Matches muted variable #666 */ transition: color 0.3s ease; text-transform: uppercase; } .nav-arrow:hover { color: #000; /* Subtle hover effect */ } /* ======================== FOOTER ======================== */ footer { flex-shrink: 0; text-align: center; padding: 1rem 0; width: 100%; background: transparent; /* no background — only text and icons show */ color: rgb(185, 185, 185); font-size: 1rem; } /* Styles for the contact and CV links */ .download-link, .contact-link { display: block; margin-top: 20px; color: var(--muted); font-size: 1rem; font-weight: 250; text-decoration: none; } .download-link:hover, .contact-link:hover { color: var(--accent); } #contact p a { color: var(--muted); text-decoration: none; transition: color 0.3s ease; } #contact p a:hover { color: var(--accent); } #contact { text-align: right; margin-top: 28px; } /* Small "Imprint" link after the copyright line */ .site-footer p .imprint-link { color: inherit; text-decoration: none; transition: color 0.3s ease; } .site-footer p .imprint-link:hover { color: #666; } /* ======================== FOOTER ICON STYLES ======================== */ .footer-icons { display: flex; justify-content: center; gap: 15px; margin-bottom: 15px; } .footer-icons a { color:rgb(185, 185, 185); font-size: 1.6rem; text-decoration: none; transition: color 0.3s ease, transform 0.2s ease; display: inline-block; } /* Inline SVG icons (replaced the Font Awesome CDN font) */ .footer-icons svg { height: 1.6rem; width: auto; display: inline-block; vertical-align: middle; } .footer-icons a:hover { color: var(--accent); transform: scale(1.15); } /* ======================== DIVIDING LINE STYLE ======================== */ hr { height: 1px; background-color: #d7d7d7; border: none; margin: 40px 0; width: 100%; } /* ========================================================================== MOBILE ADAPTABILITY STYLES These rules only apply to screens 768px wide or smaller. ========================================================================== */ @media (max-width: 768px) { /* --- HEADER --- */ .header-inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1rem; } /* --- MAIN CONTENT PADDING --- */ body:not(.home) .site-main { margin-top: 140px; } .site-main { padding-left: 20px; padding-right: 20px; } /* --- LAYOUT STACKING --- */ .project-container, .about-container { flex-direction: column; gap: 40px; } .project-media, .project-details, .about-image, .about-bio { flex-basis: auto !important; width: 100% !important; } /* --- CONTACT ALIGNMENT --- */ #contact { text-align: left; } /* --- JUSTIFIED TEXT ON NARROW SCREENS --- Kept justified, but long words auto-hyphenate at line ends so the word spacing stays tight (no huge gaps between words) */ .about-container, .project-details .project-description, .project-description { text-align: justify; -webkit-hyphens: auto; hyphens: auto; /* Only break words longer than 6 characters, so short words like VISUAL stay whole while very long words can still hyphenate */ -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; hyphenate-limit-chars: 6 3 3; } /* --- HIDE MODAL ARROWS ON MOBILE --- */ .modal-arrow { display: none !important; } } /* Fix for About Page layout */ .about-details-wrapper { width: 100%; } /* ======================== ABOUT PAGE: CV SECTION TEXT SIZE (Education / Experience / Exhibitions / Festivals / Awards / Download CV) ======================== */ .about-cv h3, .about-cv h2 { font-size: 1.2rem; } .about-cv p, .about-cv h3 ~ p, .about-cv .download-link p { font-size: 1.2rem; } /* ======================== ABOUT PAGE: CONTACT SECTION TEXT SIZE ======================== */ .about-contact h2 { font-size: 1.2rem; } .about-contact p, .about-contact h2 ~ p { font-size: 1.2rem; }