/* ========================================================================== Marina Mužinić — portfolio Palette drawn from the work itself: sea blue-green, rock, warm yellow light. ========================================================================== */ :root { --sea-deep: #0a2b40; --sea: #14495e; --sea-light: #2a8f8a; --sun: #e8c35a; --sun-warm: #d9a441; --ultramarine:#2434b5; --sand: #f4efe6; --stone: #6b7280; --bg: #ffffff; --bg-alt: #f6f5f2; --text: #14212b; --text-soft: #4d5c66; --rule: rgba(20, 73, 94, 0.16); --accent: var(--ultramarine); --card: #ffffff; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif; --measure: 62ch; --pad: clamp(1.25rem, 5vw, 4rem); --gap: clamp(1rem, 2.5vw, 2rem); } /* The site is always light — a white gallery wall for the paintings. The former dark mode (and its prefers-color-scheme block) was removed on request; the lightbox stays dark for viewing the work. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; } a:hover { text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin: 0 0 .5em; } h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.5rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); letter-spacing: -0.01em; } h3 { font-size: 1.15rem; } p { margin: 0 0 1.1em; max-width: var(--measure); } .wrap { width: min(1200px, 100%); margin-inline: auto; padding-inline: var(--pad); } .narrow { width: min(760px, 100%); margin-inline: auto; padding-inline: var(--pad); } .eyebrow { font-family: var(--sans); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-soft); margin: 0 0 1rem; } .lede { font-size: 1.2rem; color: var(--text-soft); font-family: var(--serif); font-style: italic; } /* ---------- Bilingual ---------- Both languages live in the markup so search engines see both; js/main.js flips the attribute to choose one. Only the hidden language is ever touched, so the visible one keeps whatever display its own rules give it. ships as "en", so there is no flash before the script runs. */ html[lang="hr"] [data-lang="en"] { display: none; } html[lang="en"] [data-lang="hr"] { display: none; } .lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; margin-left: .5rem; flex: none; } .lang-toggle button { background: none; border: 0; color: var(--text-soft); cursor: pointer; font: inherit; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: .38rem .7rem; transition: background .2s ease, color .2s ease; } .lang-toggle button[aria-pressed="true"] { background: var(--accent); color: #fff; } .lang-toggle button:hover[aria-pressed="false"] { color: var(--text); } /* ---------- Skip link ---------- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--accent); color: #fff; padding: .7rem 1.1rem; font-weight: 600; } .skip:focus { left: .5rem; top: .5rem; } /* ---------- Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 68px; } .brand { font-family: var(--serif); font-size: 1.1rem; letter-spacing: .01em; text-decoration: none; white-space: nowrap; } .brand span { color: var(--text-soft); font-size: .78rem; display: block; letter-spacing: .14em; text-transform: uppercase; font-family: var(--sans); } .nav-links { display: flex; gap: clamp(1rem, 2.5vw, 2.2rem); list-style: none; margin: 0; padding: 0; align-items: center; } .nav-links a { text-decoration: none; font-size: .9rem; letter-spacing: .04em; padding: .35rem 0; border-bottom: 1px solid transparent; color: var(--text-soft); } .nav-links a:hover { color: var(--text); } .nav-links a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); } .nav-toggle { display: none; background: none; border: 1px solid var(--rule); border-radius: 4px; color: inherit; padding: .45rem .6rem; cursor: pointer; font-size: 1rem; line-height: 1; } /* 760px, not 640: between ~640 and ~760 the desktop nav row is wider than the bar (brand + toggle + four links) and the links collide with the brand, so the hamburger takes over earlier. Must match the media query in js/main.js — the JS decides when the menu is hidden. */ @media (max-width: 760px) { .nav-toggle { display: block; } .nav-links { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; flex-direction: column; align-items: flex-start; gap: 0; background: var(--bg); border-bottom: 1px solid var(--rule); box-shadow: 0 14px 30px -18px rgba(10, 43, 64, .25); padding: .5rem var(--pad) 1.25rem; } .nav-links[hidden] { display: none; } .nav-links a { padding: .8rem 0; font-size: 1rem; width: 100%; border-bottom: 0; } /* In the dropdown the desktop underline would span the full menu width and collide with the item below — mark the active page with a short left bar instead. Drawn as a background gradient so it is exactly text-height; a border-left would cover the tap padding too and bridge into the neighbouring items. */ .nav-links a[aria-current="page"] { padding-left: .75rem; background: linear-gradient(var(--accent), var(--accent)) left center / 2px 1.05em no-repeat; } .lang-toggle button { padding: .55rem .8rem; } } @media (max-width: 380px) { .brand { font-size: 1rem; } .lang-toggle button { padding: .5rem .6rem; } } /* ---------- Hero ---------- */ .hero { padding: clamp(3.5rem, 9vw, 8rem) 0 clamp(2.5rem, 6vw, 5rem); } .hero h1 { margin-bottom: .25em; } .hero .lede { max-width: 46ch; } .hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); } /* ---------- Buttons ---------- */ .btn { display: inline-block; text-decoration: none; text-align: center; padding: .8rem 1.6rem; border: 1px solid var(--text); border-radius: 2px; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; transition: background .2s ease, color .2s ease, border-color .2s ease; } .btn:hover { background: var(--text); color: var(--bg); } .btn-accent { border-color: var(--accent); background: var(--accent); color: #fff; } .btn-accent:hover { background: transparent; color: var(--text); border-color: var(--text); } .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } /* ---------- Sections ---------- */ .section { padding: clamp(3rem, 7vw, 6rem) 0; } .section-alt { background: var(--bg-alt); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--rule); padding-top: 1.25rem; } .section-head h2 { margin: 0; } .section-head a { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); } /* ---------- Gallery ---------- Masonry columns: every painting keeps its own proportions. Nothing is ever cropped to fit a grid cell. */ .gallery { columns: 2 340px; column-gap: var(--gap); } .gallery .piece { break-inside: avoid; margin: 0 0 var(--gap); display: inline-block; width: 100%; } .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); } .piece { margin: 0; } .piece-frame { display: block; width: 100%; padding: 0; border: 0; background: var(--bg-alt); cursor: zoom-in; overflow: hidden; position: relative; border-radius: 2px; line-height: 0; } .piece-frame img { width: 100%; height: auto; transition: transform .5s cubic-bezier(.2,.6,.2,1), filter .4s ease; } .piece-frame:hover img { transform: scale(1.035); filter: brightness(1.04); } .piece figcaption { margin-top: .7rem; font-size: .86rem; line-height: 1.45; } .piece .title { display: block; font-family: var(--serif); font-style: italic; } .piece .meta { display: block; color: var(--text-soft); font-size: .8rem; } /* ---------- Lightbox ---------- */ .lightbox { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; background: transparent; color: #fff; } .lightbox::backdrop { background: rgba(4, 12, 18, 0.97); backdrop-filter: blur(6px); } .lightbox-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: clamp(1rem, 4vw, 3rem); gap: 1rem; } .lightbox img { max-height: 78vh; width: auto; object-fit: contain; border-radius: 2px; } .lightbox-cap { text-align: center; font-size: .9rem; color: #d7e3e8; max-width: 60ch; } .lightbox-cap .title { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: #fff; display: block; } .lightbox-close { position: fixed; top: max(1rem, env(safe-area-inset-top)); right: max(1rem, env(safe-area-inset-right)); background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; line-height: 1; } .lightbox-close:hover { background: rgba(255,255,255,.12); } .lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 2.5rem; cursor: pointer; padding: 1rem; opacity: .65; line-height: 1; } .lightbox-nav:hover { opacity: 1; } .lightbox-prev { left: .25rem; } .lightbox-next { right: .25rem; } /* On phones the edge arrows sit where thumbs can't reach and overlap the artwork — move them to a bottom-centre pair instead. */ @media (max-width: 640px) { .lightbox img { max-height: 64vh; } .lightbox-inner { padding: 1rem; padding-bottom: 6rem; gap: .75rem; } .lightbox-cap { font-size: .84rem; } .lightbox-nav { top: auto; bottom: max(1.25rem, env(safe-area-inset-bottom)); transform: none; width: 52px; height: 52px; padding: 0; font-size: 1.6rem; opacity: .9; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; } .lightbox-prev { left: calc(50% - 62px); } .lightbox-next { right: calc(50% - 62px); } } /* ---------- About / CV ---------- */ .about-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; } @media (min-width: 900px) { .about-layout { grid-template-columns: 1.15fr 1fr; } } /* On one-column screens show the portrait before the long biography. */ @media (max-width: 899px) { .about-portrait { order: -1; } } .portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; } .portrait figcaption { font-size: .78rem; color: var(--text-soft); margin-top: .6rem; } .cv { border-top: 1px solid var(--rule); margin-top: 2.5rem; padding-top: 1.5rem; } .cv h3 { font-family: var(--sans); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 1rem; } .cv dl { margin: 0 0 2rem; display: grid; grid-template-columns: 5.5rem 1fr; gap: .55rem 1.25rem; } .cv dt { color: var(--text-soft); font-variant-numeric: tabular-nums; font-size: .9rem; } .cv dd { margin: 0; font-size: .95rem; } .cv dd em { font-family: var(--serif); } .cv dd .venue { display: block; color: var(--text-soft); font-size: .85rem; } @media (max-width: 480px) { .cv dl { grid-template-columns: 1fr; gap: .15rem; } .cv dt { margin-top: .9rem; font-size: .8rem; letter-spacing: .08em; } } .pullquote { font-family: var(--serif); font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); line-height: 1.35; font-style: italic; border-left: 2px solid var(--accent); padding-left: clamp(1rem, 3vw, 2rem); margin: 2.5rem 0; max-width: 34ch; } /* ---------- Contact ---------- */ .contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; } @media (min-width: 820px) { .contact-grid { grid-template-columns: 1fr 1fr; } } .contact-list { list-style: none; margin: 0; padding: 0; } .contact-list li { border-bottom: 1px solid var(--rule); padding: 1.1rem 0; } .contact-list .label { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); margin-bottom: .3rem; } .contact-list .value { font-size: 1.1rem; font-family: var(--serif); text-decoration: none; } .contact-list .value:hover { text-decoration: underline; text-decoration-color: var(--accent); } .form-field { margin-bottom: 1.15rem; } .form-field label { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); margin-bottom: .4rem; } .form-field input, .form-field textarea { /* Never below 16px, or iOS Safari auto-zooms the page when a field is focused. */ width: 100%; padding: .75rem .85rem; font: inherit; font-size: 1rem; color: var(--text); background: var(--card); border: 1px solid var(--rule); border-radius: 2px; } .form-field textarea { min-height: 150px; resize: vertical; } .form-field input:focus, .form-field textarea:focus { border-color: var(--accent); outline: none; } .form-note { font-size: .82rem; color: var(--text-soft); } /* ---------- Social ---------- */ .social { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 1.5rem 0 0; padding: 0; } .social a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; border: 1px solid var(--rule); border-radius: 999px; padding: .5rem 1rem; font-size: .85rem; transition: border-color .2s ease, background .2s ease; } .social a:hover { border-color: var(--accent); background: var(--card); } .social svg { width: 17px; height: 17px; flex: none; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--rule); margin-top: clamp(3rem, 8vw, 7rem); padding: 2.5rem 0; font-size: .84rem; color: var(--text-soft); } .footer-inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center; } .site-footer a { text-decoration: none; } .site-footer a:hover { text-decoration: underline; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ---------- Mobile spacing ---------- Phones get tighter vertical rhythm: the clamp() minimums above are tuned for tablets, and stacked one-column pages read better with less air. */ @media (max-width: 640px) { .hero { padding: 2.75rem 0 2rem; } .section { padding: 2.5rem 0; } .section-head { margin-bottom: 1.25rem; padding-top: 1rem; } .gallery { column-gap: 1rem; } .gallery .piece { margin-bottom: 1.5rem; } .btn-row { gap: .6rem; margin-top: 1.4rem; } .btn-row .btn { flex: 1 1 100%; padding: .95rem 1.2rem; } .pullquote { margin: 1.75rem 0; } .cv { margin-top: 1.75rem; } .cv dl { margin-bottom: 1.5rem; } .contact-list li { padding: .9rem 0; } .site-footer { margin-top: 2.5rem; padding: 2rem 0; text-align: center; } .footer-inner { flex-direction: column; align-items: center; gap: .75rem; } /* The legal link gets its own line under email · Instagram. */ .legal-sep { display: none; } .legal-link { display: block; margin-top: .4rem; } }