/* site.css */ :root{ --font: 'Cutive Mono', monospace; --text: rgba(255,255,255,.92); --bg: #000; --panel: rgba(10,10,10,.9); --border: rgba(255,255,255,.7); --radius: 16px; --shadow: 1px 10px 10px rgba(0,0,0,.8); /* per-page overrides via inline style on */ --bg-image: none; --bg-opacity: 1; } *{ box-sizing: border-box; } body{ margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); } #background{ position: fixed; inset: 0; background: var(--bg-image) no-repeat center center; background-size: cover; opacity: 0; z-index: -1; animation: fadeInBackground 2s forwards; } /* shared UI */ .icons{ display: flex; gap: 20px; margin-top: 20px; } .icons a{ display: inline-block; width: 40px; height: 40px; opacity: 0; transform: translateY(20px); animation: fadeInUp 3s ease forwards; } .icons a img{ width: 100%; height: 100%; transition: transform .5s ease; } .icons a:hover img{ transform: scale(1.2); } .btn{ display: inline-block; padding: 10px 20px; border: 2px solid var(--border); background: rgba(0,0,0,.6); color: rgba(255,255,255,.85); text-decoration: none; text-transform: uppercase; border-radius: 999px; transition: background-color .2s ease, transform .2s ease, color .2s ease; } .btn:hover{ background-color: rgba(255,255,255,.1); transform: translateY(-2px); color: rgba(255,255,255,1); } /* animations */ @keyframes fadeInBackground { to { opacity: var(--bg-opacity); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ---------------- Page: Home ---------------- */ .page-home{ height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } .page-home #text{ position: relative; color: white; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: 0; animation: fadeInUp 3s 0s forwards; text-align: center; max-width: 90%; line-height: 1.2; font-size: clamp(2rem, 6vw, 5rem); } .page-home .icons a:nth-child(1){ animation-delay: .6s; } .page-home .icons a:nth-child(2){ animation-delay: .7s; } .page-home .icons a:nth-child(3){ animation-delay: .8s; } .page-home .icons a:nth-child(4){ animation-delay: .9s; } .page-home .icons a:nth-child(5){ animation-delay: 1s; } .page-home .icons a:nth-child(6){ animation-delay: 1.1s; } .page-home .btn{ margin-top: 30px; font-size: 1.5rem; opacity: 0; transform: translateY(20px); animation: fadeInUp 2.5s ease 1.8s forwards; } /* ---------------- Page: Gallery ---------------- */ .page-gallery{ display: flex; flex-direction: column; align-items: center; padding: 20px; } .page-gallery h1, .page-gallery p, .page-gallery .gallery, .page-gallery .btn{ opacity: 0; transform: translateY(20px); animation: fadeInUp 1s ease forwards; } .page-gallery h1{ margin-top: 200px; margin-bottom: 0; text-align: center; text-transform: uppercase; letter-spacing: .2em; font-size: clamp(2rem, 5vw, 4rem); } .page-gallery p{ margin-bottom: 200px; text-align: center; font-size: 1.2rem; animation-delay: .5s; } .page-gallery .gallery{ display: flex; flex-direction: column; gap: 30px; width: 100%; max-width: 800px; animation-delay: 1s; } .page-gallery .gallery-item{ display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--panel); padding: 50px; border-radius: var(--radius); box-shadow: var(--shadow); text-align: left; min-width: 300px; } .page-gallery .gallery-item .description strong{ font-size: 1.25em; } .page-gallery .gallery-item img{ width: 100%; max-width: 700px; border-radius: 10px; margin-bottom: 20px; cursor: pointer; } .page-gallery .date{ font-size: .8rem; color: #666; margin-bottom: 10px; } .page-gallery .btn{ position: fixed; left: 20px; bottom: 20px; padding: 8px 16px; border-width: 1px; font-size: 1rem; border-radius: 25px; box-shadow: 0px 2px 5px rgba(0,0,0,.3); animation-delay: 4s; } /* viewer */ #image-viewer{ display: none; position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 100; justify-content: center; align-items: center; } #image-viewer img{ max-width: 100%; max-height: 100%; border-radius: 0; } #close-viewer{ position: absolute; top: 20px; right: 20px; font-size: 2rem; color: white; cursor: pointer; background: none; border: none; outline: none; }