:root { --night: #0d1321; --night-2: #141c30; --tram-yellow: #f4c430; --hooghly-teal: #1f6f78; --brick: #c8553d; --paper: #f2ede4; --paper-dim: #cdc7ba; --glass-border: rgba(242, 237, 228, 0.12); --glass-fill: rgba(242, 237, 228, 0.06); --radius: 18px; --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; } * { box-sizing: border-box; } html { background: var(--night); } body { margin: 0; font-family: var(--font-body); /* No background colour here on purpose: a solid body background would paint on top of the ::before image layer below. The night colour comes from , which fills the canvas. */ background: transparent; color: var(--paper); min-height: 100vh; } /* ------------------------------------------------------------------ Page background assets/bg.png is 1672 x 941 (16:9). It lives on its own fixed layer with background-size: cover, so it is always scaled to fill the viewport at the correct proportion and the overflow is cropped — the image is never stretched or squashed on any screen ratio. ------------------------------------------------------------------ */ body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; } body::before { z-index: -2; background-color: var(--night); background-image: url("assets/bg.png"); background-size: cover; background-position: center center; background-repeat: no-repeat; } /* Dim layer on top of the photo so text and glass cards stay readable. */ body::after { z-index: -1; background: linear-gradient(180deg, rgba(13,19,33,0.68) 0%, rgba(13,19,33,0.88) 100%); } h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; } a { color: inherit; text-decoration: none; } .glass { /* Dark translucent fill (instead of a light wash) so panels stay readable on top of the photo background. */ background: rgba(13, 19, 33, 0.55); border: 1px solid var(--glass-border); backdrop-filter: blur(16px) saturate(115%); -webkit-backdrop-filter: blur(16px) saturate(115%); border-radius: var(--radius); } .btn { font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 12px; border: none; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--tram-yellow); color: #221a02; } .btn-primary:hover { box-shadow: 0 6px 18px rgba(244,196,48,0.3); } .btn-ghost { background: transparent; border: 1px solid var(--glass-border); color: var(--paper); } .btn-ghost:hover { background: var(--glass-fill); } input, select { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid var(--glass-border); background: rgba(242,237,228,0.04); color: var(--paper); font-family: var(--font-body); font-size: 15px; outline: none; transition: border-color 0.15s ease; } input::placeholder { color: var(--paper-dim); } input:focus, select:focus { border-color: var(--tram-yellow); } label { display: block; font-size: 13px; color: var(--paper-dim); margin-bottom: 6px; margin-top: 16px; } label:first-child { margin-top: 0; } .field-error { color: var(--brick); font-size: 13px; margin-top: 6px; min-height: 18px; } .link-accent { color: var(--tram-yellow); font-weight: 600; } ::selection { background: var(--tram-yellow); color: #221a02; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }