/* Exhibition invitation card — rebuilt from the printed poster as HTML. Prefixed (.inv-*) to avoid collisions with the site's style.css. */ /* Dismissible announcement overlay shown over the home page on load. */ .inv-overlay{ position:fixed;inset:0; z-index:2147483000; /* above the Revolution Slider (its loader uses z-index:10000) */ isolation:isolate; /* own stacking context — slider repaints can't bleed through */ display:flex;align-items:center;justify-content:center; padding:40px 18px; overflow:auto; background:radial-gradient(120% 90% at 50% 0%, #2b343a 0%, #222a2e 45%, #171c1f 100%); opacity:1;visibility:visible; transition:opacity .55s ease, visibility 0s linear 0s; } .inv-overlay.inv-hidden{ opacity:0;visibility:hidden;pointer-events:none; transition:opacity .55s ease, visibility 0s linear .55s; } /* After the exhibition the invitation is removed entirely (no flash). Set by the inline date check in index.html, which adds .inv-expired to . */ html.inv-expired #inv-overlay{display:none} .inv-close{ position:fixed;top:18px;right:22px;z-index:2001; width:42px;height:42px;line-height:38px; font-family:"Manrope",sans-serif;font-size:30px;font-weight:300; color:rgba(244,242,236,.75);background:transparent; border:1px solid rgba(244,242,236,.3);border-radius:50%; cursor:pointer;transition:color .2s, border-color .2s, transform .2s; } .inv-close:hover{color:#fff;border-color:rgba(244,242,236,.7);transform:rotate(90deg)} .inv-card .inv-enter{ display:inline-block;margin-top:26px; font-family:"Manrope",sans-serif;font-weight:600;font-size:12px; letter-spacing:.16em;text-transform:uppercase; color:var(--inv-ink);background:transparent; border:1px solid var(--inv-accent);border-radius:0; padding:16px 36px;cursor:pointer; transition:background .25s ease, color .25s ease; } .inv-enter:hover{background:var(--inv-accent);color:#f4f2ec} @media (max-height:720px){.inv-overlay{align-items:flex-start}} .inv-card{ --inv-ink:#1d2226; --inv-ink-soft:#4a525a; --inv-paper-1:#f4f2ec; --inv-paper-2:#e9e6dd; --inv-accent:#4d6f77; /* dusty teal pulled from the painting */ position:relative; box-sizing:border-box; width:520px; max-width:92vw; padding:44px 46px 36px; text-align:center; color:var(--inv-ink); font-family:"Manrope",system-ui,-apple-system,sans-serif; background:linear-gradient(180deg,var(--inv-paper-1) 0%,var(--inv-paper-2) 100%); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 30px 64px -26px rgba(0,0,0,.7), 0 8px 22px -12px rgba(0,0,0,.5); -webkit-font-smoothing:antialiased; } .inv-card *{box-sizing:border-box;margin:0;padding:0} .inv-card::after{ /* hairline inner frame */ content:"";position:absolute;inset:9px; border:1px solid rgba(29,34,38,.16); pointer-events:none; } .inv-card > *{position:relative;z-index:1} .inv-eyebrow{ font-weight:600;font-size:11.5px;line-height:1.7; letter-spacing:.22em;text-transform:uppercase;color:var(--inv-ink-soft); } .inv-rule{width:44px;height:2px;margin:16px auto 14px;background:var(--inv-accent)} .inv-date{font-weight:700;font-size:14px;letter-spacing:.01em;color:var(--inv-ink)} .inv-name{ margin:20px 0 4px; font-weight:800;font-size:34px;line-height:1.03; letter-spacing:.005em;text-transform:uppercase;color:var(--inv-ink); } .inv-subtitle{ font-weight:500;font-size:12px;line-height:1.55; letter-spacing:.13em;text-transform:uppercase;color:var(--inv-ink-soft); max-width:280px;margin:0 auto; } .inv-artwork{ margin:22px auto 20px;width:60%;padding:6px;background:#fbfaf6; box-shadow:0 14px 30px -16px rgba(0,0,0,.55); } .inv-artwork img{display:block;width:100%;height:auto} .inv-free{ font-family:"Spectral",Georgia,serif; font-style:italic;font-weight:500;font-size:17px;color:var(--inv-ink); } .inv-gallery{margin-top:20px;display:flex;align-items:center;justify-content:center;gap:13px} .inv-gallery img{height:42px;width:auto;display:block} .inv-gallery .inv-lines{ text-align:left;font-weight:600;font-size:12px;line-height:1.45;color:var(--inv-ink); } .inv-gallery .inv-lines .inv-accent{color:var(--inv-accent)} /* staggered entrance */ .inv-reveal{opacity:0;transform:translateY(14px);animation:inv-rise .9s cubic-bezier(.2,.7,.2,1) forwards} @keyframes inv-rise{to{opacity:1;transform:none}} .inv-d1{animation-delay:.05s}.inv-d2{animation-delay:.18s}.inv-d3{animation-delay:.31s} .inv-d4{animation-delay:.44s}.inv-d5{animation-delay:.57s}.inv-d6{animation-delay:.70s}.inv-d7{animation-delay:.83s} @media (max-width:480px){ .inv-card{width:330px;padding:34px 24px 28px} .inv-name{font-size:29px} .inv-artwork{width:70%} }