/* index.css — the portfolio grid. One job: make six pages look like a body of work, then get the visitor to the form. Everything here is plain CSS. */ :root{ --ink :#0B0B0C; --ink-2 :#131315; --bone :#EDE8E0; --bone-dim :rgba(237,232,224,.66); --bone-faint:rgba(237,232,224,.40); --clay :#C2593A; --line :rgba(237,232,224,.14); --pad :clamp(22px,5vw,80px); --serif :"Didot","Bodoni 72","Playfair Display",Georgia,serif; --sans :-apple-system,BlinkMacSystemFont,"Inter","Helvetica Neue",Arial,sans-serif; --ease :cubic-bezier(.22,1,.36,1); } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{background:var(--ink);color:var(--bone);font-family:var(--sans); font-size:clamp(.95rem,1.05vw,1.02rem);line-height:1.6; -webkit-font-smoothing:antialiased} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} .label{font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-faint)} .serif{font-family:var(--serif);font-weight:400;letter-spacing:-.015em} /* ---------- nav ---------- */ .nav{position:fixed;top:0;left:0;right:0;z-index:20; display:flex;align-items:center;justify-content:space-between;gap:16px; padding:18px var(--pad); background:linear-gradient(180deg,rgba(11,11,12,.82),rgba(11,11,12,0))} .nav__brand{font-family:var(--serif);font-size:1.05rem} .nav__brand span{color:var(--clay)} .nav__cta{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase; min-height:44px;display:inline-flex;align-items:center;padding:0 20px; border:1px solid var(--line);border-radius:100px; transition:background .35s var(--ease),color .35s var(--ease)} .nav__cta:hover{background:var(--bone);color:var(--ink)} /* ---------- hero ---------- */ .top{padding:clamp(120px,20vh,200px) var(--pad) clamp(50px,8vh,90px); max-width:1180px;margin:0 auto} .top h1{font-family:var(--serif);font-weight:400; font-size:clamp(2.4rem,7vw,5rem);line-height:1.02;margin:16px 0 22px} .top h1 em{font-style:italic;color:var(--clay)} .top__lede{color:var(--bone-dim);max-width:52ch;font-size:clamp(1rem,1.5vw,1.16rem)} /* the three claims, stated plainly and kept honest */ .claims{display:grid;gap:26px;grid-template-columns:repeat(3,1fr); max-width:1180px;margin:0 auto;padding:0 var(--pad) clamp(50px,8vh,90px)} .claims div{border-top:1px solid var(--line);padding-top:16px} .claims b{display:block;font-family:var(--serif);font-weight:400; font-size:clamp(1.05rem,1.7vw,1.35rem);margin-bottom:6px} .claims p{color:var(--bone-dim);font-size:.92rem} @media (max-width:760px){ .claims{grid-template-columns:1fr;gap:20px} } /* ---------- the grid ---------- */ .work{max-width:1180px;margin:0 auto;padding:0 var(--pad) clamp(60px,10vh,120px)} .work__head{display:flex;align-items:baseline;justify-content:space-between; gap:18px;flex-wrap:wrap;margin-bottom:clamp(24px,4vh,40px)} .work__head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.2rem)} .grid{display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:repeat(2,1fr)} @media (max-width:760px){ .grid{grid-template-columns:1fr} } /* Cards are VISIBLE by default. Only once JavaScript has run and set .js-anim on do they start hidden and fade in. With JS broken or blocked the whole portfolio is still there, which is the point. */ .card{display:block;position:relative} .js-anim .card{opacity:0;transform:translateY(18px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .js-anim .card.is-in{opacity:1;transform:none} .card__shot{position:relative;overflow:hidden;background:var(--ink-2); aspect-ratio:3/2;border:1px solid var(--line)} .card__shot img{width:100%;height:100%;object-fit:cover; transition:transform 1.1s var(--ease),filter .6s var(--ease); filter:brightness(.82)} .card:hover .card__shot img{transform:scale(1.04);filter:brightness(1)} /* the little tag that says whether it is a real place or an invented one */ .card__flag{position:absolute;top:12px;left:12px;z-index:2; font-size:.56rem;letter-spacing:.18em;text-transform:uppercase; padding:6px 10px;border-radius:100px;background:rgba(11,11,12,.66); border:1px solid var(--line);backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);color:var(--bone-dim)} .card__flag.is-real{color:var(--bone);border-color:rgba(237,232,224,.4)} .card__body{padding-top:14px;display:grid;gap:6px} .card__name{font-family:var(--serif);font-size:clamp(1.15rem,2vw,1.5rem)} .card__style{color:var(--clay);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase} .card__what{color:var(--bone-dim);font-size:.92rem;max-width:44ch} .card__go{margin-top:4px;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase; color:var(--bone-faint);transition:color .35s var(--ease)} .card:hover .card__go{color:var(--bone)} /* ---------- the rest of the roster ---------- */ .also{max-width:1180px;margin:0 auto;padding:0 var(--pad) clamp(60px,10vh,110px)} .also__inner{border-top:1px solid var(--line);padding-top:22px} .also__list{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:16px} .also__list li{font-family:var(--serif);font-size:clamp(1rem,1.6vw,1.3rem); color:var(--bone-dim);padding:8px 16px;border:1px solid var(--line);border-radius:100px; transition:color .35s var(--ease),border-color .35s var(--ease)} .also__list li:hover{color:var(--bone);border-color:rgba(237,232,224,.38)} /* ---------- footer ---------- */ .foot{border-top:1px solid var(--line);padding:34px var(--pad); display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between; color:var(--bone-faint);font-size:.74rem} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js-anim .card{opacity:1;transform:none;transition:none} .card__shot img{transition:none} } /* ---------- the enquiry form, tinted to this page ---------- */ .lead{ --lf-bg : var(--ink-2); --lf-fg : var(--bone); --lf-accent : var(--clay); --lf-line : rgba(237,232,224,.20); --lf-muted : var(--bone-dim); } .lead__btn{color:var(--bone);font-weight:600} .lead__field select option{background:var(--ink-2);color:var(--bone)} /* ---------- how we quote, and how it goes ---------- Deliberately no numbers. Pricing is per market and per property (Romania 1500 up to ultra premium 4000 to 5000) and the first contact rules say no prices, so a flat public figure would cap the top of that range. */ .pricing,.process{border-top:1px solid var(--line)} .pricing__in{max-width:1180px;margin:0 auto; padding:clamp(60px,10vh,120px) var(--pad) clamp(60px,10vh,120px)} .pricing__in h2{font-family:var(--serif);font-weight:400; font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.1;margin:14px 0 clamp(30px,5vh,52px); max-width:24ch} .terms{list-style:none;display:grid;gap:12px;color:var(--bone-dim); font-size:.98rem;max-width:72ch} .terms li{padding-left:20px;position:relative} .terms li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px; background:var(--clay)} .terms b{color:var(--bone);font-weight:500} .steps{list-style:none;counter-reset:s;display:grid;gap:clamp(20px,3vw,34px); grid-template-columns:repeat(3,1fr)} @media (max-width:860px){ .steps{grid-template-columns:1fr} } .steps li{counter-increment:s;border-top:1px solid var(--line);padding-top:16px} .steps li::before{content:"0" counter(s);display:block;color:var(--clay); font-size:.62rem;letter-spacing:.2em;margin-bottom:10px} .steps h3{font-family:var(--serif);font-weight:400; font-size:clamp(1.1rem,1.8vw,1.4rem);margin-bottom:8px} .steps p{color:var(--bone-dim);font-size:.94rem} .steps b{color:var(--bone);font-weight:500} .need{margin-top:clamp(30px,5vh,54px);border:1px solid var(--line); padding:clamp(22px,3vw,34px);display:grid;gap:12px;max-width:80ch} .need p{color:var(--bone-dim);font-size:.94rem} .need b{color:var(--bone);font-weight:500}