| <!DOCTYPE html> |
|
|
|
| <html lang="en"> |
|
|
|
| <head> |
|
|
|
| <meta charset="UTF-8"> |
|
|
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
| <title>uncannydev.com</title> |
|
|
|
| <style> |
|
|
|
| :root { |
|
|
|
| color-scheme: light; |
|
|
|
| --bg: #f4efe7; |
|
|
|
| --panel: rgba(255, 255, 255, 0.78); |
|
|
|
| --ink: #1d1a16; |
|
|
|
| --muted: #60574d; |
|
|
|
| --accent: #b74c2d; |
|
|
|
| --accent-dark: #8d371f; |
|
|
|
| --ring: rgba(183, 76, 45, 0.22); |
|
|
|
| } |
|
|
|
| * { |
|
|
|
| box-sizing: border-box; |
|
|
|
| } |
|
|
|
| body { |
|
|
|
| margin: 0; |
|
|
|
| min-height: 100vh; |
|
|
|
| display: grid; |
|
|
|
| place-items: center; |
|
|
|
| padding: 2rem; |
|
|
|
| font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; |
|
|
|
| color: var(--ink); |
|
|
|
| background: |
|
|
|
| radial-gradient(circle at top, rgba(183, 76, 45, 0.18), transparent 28rem), |
|
|
|
| linear-gradient(160deg, #f7f1e8 0%, #efe3d3 100%); |
|
|
|
| } |
|
|
|
| main { |
|
|
|
| width: min(100%, 42rem); |
|
|
|
| padding: 3rem; |
|
|
|
| border-radius: 1.75rem; |
|
|
|
| background: var(--panel); |
|
|
|
| border: 1px solid rgba(29, 26, 22, 0.08); |
|
|
|
| box-shadow: 0 24px 70px rgba(82, 53, 31, 0.16); |
|
|
|
| text-align: center; |
|
|
|
| backdrop-filter: blur(14px); |
|
|
|
| } |
|
|
|
| .eyebrow { |
|
|
|
| margin: 0 0 0.75rem; |
|
|
|
| font-size: 0.85rem; |
|
|
|
| letter-spacing: 0.22em; |
|
|
|
| text-transform: uppercase; |
|
|
|
| color: var(--muted); |
|
|
|
| } |
|
|
|
| h1 { |
|
|
|
| margin: 0; |
|
|
|
| font-size: clamp(2.25rem, 5vw, 3.8rem); |
|
|
|
| line-height: 1.02; |
|
|
|
| } |
|
|
|
| p { |
|
|
|
| margin: 1rem auto 0; |
|
|
|
| max-width: 32rem; |
|
|
|
| font-size: 1.05rem; |
|
|
|
| line-height: 1.7; |
|
|
|
| color: var(--muted); |
|
|
|
| } |
|
|
|
| .cta { |
|
|
|
| display: inline-flex; |
|
|
|
| align-items: center; |
|
|
|
| justify-content: center; |
|
|
|
| margin-top: 2rem; |
|
|
|
| padding: 0.95rem 1.4rem; |
|
|
|
| border-radius: 999px; |
|
|
|
| background: var(--accent); |
|
|
|
| color: #fff; |
|
|
|
| text-decoration: none; |
|
|
|
| font-weight: 700; |
|
|
|
| box-shadow: 0 18px 40px var(--ring); |
|
|
|
| transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; |
|
|
|
| } |
|
|
|
| .cta:hover, |
|
|
|
| .cta:focus-visible { |
|
|
|
| background: var(--accent-dark); |
|
|
|
| transform: translateY(-1px); |
|
|
|
| box-shadow: 0 22px 44px rgba(183, 76, 45, 0.28); |
|
|
|
| } |
|
|
|
| .cta:focus-visible { |
|
|
|
| outline: 3px solid rgba(29, 26, 22, 0.22); |
|
|
|
| outline-offset: 4px; |
|
|
|
| } |
|
|
|
| </style> |
|
|
|
| </head> |
|
|
|
| <body> |
|
|
|
| <main> |
|
|
|
| <p class="eyebrow">Temporary Site</p> |
|
|
|
| <h1>uncannydev.com</h1> |
|
|
|
| <p> |
|
|
|
| The main site is temporarily parked here while Pass & Play moves to its own home. |
|
|
|
| </p> |
|
|
|
| <a class="cta" href="https://pap.uncannydev.com">Pass & Play (CMPE 272)</a> |
|
|
|
| </main> |
|
|
|
| </body> |
|
|
|
| </html> |
|
|
|