LipstickByColor.github.io/404.html at main · LipstickByColor/LipstickByColor.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page not found · Lipstick Color Finder</title>
<meta name="robots" content="noindex" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💄</text></svg>">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3D5R6QNPX3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-3D5R6QNPX3');
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet" />
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --cream: #FAF6F1;
    --espresso: #2A1A14;
    --espresso-mid: #5C3D30;
    --blush: #C87890;
    --text-muted: #8C6858;
  }

  html, body {
    min-height: 100vh;
    background: var(--cream);
    color: var(--espresso);
    font-family: 'DM Sans', sans-serif;
  }

  body::before {
    content: '';
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    opacity: 0.4;
  }

  .page {
    position: relative; z-index: 1;
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 40px 80px;
  }

  .back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted); text-decoration: none;
    margin-bottom: 48px;
    transition: color 0.15s;
  }
  .back:hover { color: var(--espresso); }

  .hero-label {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--blush); margin-bottom: 12px; font-weight: 500;
  }

  h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300; font-size: clamp(36px, 6vw, 56px);
    line-height: 1.05; letter-spacing: -0.01em;
    margin-bottom: 28px;
  }
  h1 em { font-style: italic; font-weight: 400; }

  .body-text {
    font-size: 17px; line-height: 1.75; color: var(--espresso-mid);
    max-width: 560px;
    margin-bottom: 28px;
  }

  .cta {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--espresso); text-decoration: none;
    border-bottom: 1px solid var(--blush); padding-bottom: 2px;
    transition: color 0.15s, border-color 0.15s;
  }
  .cta:hover { color: var(--blush); }
</style>
</head>
<body>
<div class="page">
  <a href="/" class="back">← Back to home</a>
  <p class="hero-label">404</p>
  <h1>Page <em>not found</em></h1>
  <p class="body-text">The page you're looking for doesn't exist or may have moved.</p>
  <a href="/" class="cta">Find your shade →</a>
</div>
</body>
</html>