From 3a80d316e9e7913ea83e91ec5a5ba8c92c4a4225 Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Wed, 19 Nov 2025 08:57:50 -0800
Subject: [PATCH] Feat: Creative light theme poster with stains and ink effects

---
 index.html | 129 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 87 insertions(+), 42 deletions(-)
diff --git a/index.html b/index.html
index f904d6b..d93e84c 100644
--- a/index.html
+++ b/index.html
@@ -2,59 +2,104 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <title>stain</title>
+  <title>Stain Font</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
-    :root { --bg: #111; --fg: #fafafa; --muted: #666; --ui: system-ui, -apple-system, sans-serif; }
+    :root {
+      --bg: #f7f6f2;
+      --ink: #1c1c1e;
+      --stain-color: #2d3436;
+    }
+    @font-face { font-family: "Stain"; src: url("./dist/Stain.otf") format("opentype"); }
+    * { box-sizing: border-box; }
     body {
-      margin: 0; padding: 2rem;
-      background: var(--bg); color: var(--fg);
-      font-family: var(--ui);
-      display: flex; flex-direction: column; align-items: center; justify-content: center;
-      min-height: 100vh;
+      margin: 0; min-height: 100vh;
+      background: var(--bg); color: var(--ink);
+      font-family: "Stain", sans-serif;
+      overflow-x: hidden; display: flex; flex-direction: column;
+      cursor: crosshair;
     }
-    @font-face { font-family: "Stain"; src: url("./dist/Stain.otf") format("opentype"); font-display: block; }
-    .stain-font { font-family: "Stain"; }
-    .container { max-width: 800px; width: 100%; display: flex; flex-direction: column; justify-content: space-between; min-height: 60vh; }
-    .entry { border-left: 1px solid #333; padding-left: 2rem; }
-    h1 { font-size: clamp(5rem, 18vw, 10rem); line-height: 0.75; margin: 0 0 1rem -0.5rem; font-weight: normal; letter-spacing: -0.02em; }
-    .pos { font-size: 1.5rem; color: var(--muted); margin-bottom: 3rem; display: block; }
-    .def-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
-    .def-item { font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.1; color: #ccc; }
-    .footer { margin-top: auto; padding-top: 4rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem; }
-    .meta { font-size: 0.8rem; line-height: 1.6; color: var(--muted); max-width: 400px; }
-    .meta a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
-    .meta a:hover { color: var(--fg); }
-    .btn { 
-      display: inline-block; background: var(--fg); color: var(--bg); text-decoration: none;
-      padding: 0.8rem 1.5rem; border-radius: 99px; font-weight: bold; text-transform: uppercase; 
-      font-size: 0.75rem; letter-spacing: 0.1em; transition: transform 0.1s; 
+    /* Ink Bleed Background */
+    .blot {
+      position: absolute; border-radius: 50%;
+      filter: blur(50px); opacity: 0.12; z-index: -1;
+      background: var(--stain-color); pointer-events: none;
+    }
+    .b1 { width: 400px; height: 380px; top: -100px; left: -100px; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
+    .b2 { width: 500px; height: 500px; bottom: -150px; right: -100px; background: #1e272e; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
+    .b3 { width: 200px; height: 200px; top: 40%; left: 60%; opacity: 0.08; border-radius: 50% 50% 20% 80%; }
+
+    .layout {
+      max-width: 1000px; margin: 0 auto; padding: 4rem 2rem;
+      display: flex; flex-direction: column; gap: 3rem; flex: 1; justify-content: center;
+    }
+    header { text-align: center; position: relative; }
+    
+    /* Ink Splatter Decorative */
+    header::after {
+      content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg);
+      width: 120%; height: 200px; border: 2px solid var(--ink); opacity: 0.05;
+      border-radius: 80% 20% 80% 20% / 80% 80% 20% 20%; z-index: -1;
+    }
+
+    h1 {
+      font-size: clamp(4rem, 18vw, 12rem);
+      line-height: 0.8; margin: 0; letter-spacing: -0.03em;
+      text-transform: uppercase;
+      filter: contrast(150%);
+    }
+    p { font-size: clamp(1.5rem, 4vw, 2.5rem); line-height: 1.1; margin: 0; }
+    
+    .hero-block { display: grid; gap: 1.5rem; text-align: center; }
+    
+    .actions { margin-top: auto; padding-top: 3rem; text-align: center; }
+    .btn {
+      display: inline-block; padding: 1rem 3rem;
+      border: 2px solid var(--ink);
+      border-radius: 50% 90% 80% 50% / 90% 90% 60% 60%; /* Imperfect circle */
+      font-size: 1.5rem; text-decoration: none; color: var(--ink);
+      transition: all 0.2s ease; background: transparent;
+    }
+    .btn:hover {
+      background: var(--ink); color: var(--bg);
+      border-radius: 90% 60% 50% 90% / 60% 50% 90% 80%;
+      transform: scale(1.02) rotate(1deg);
+    }
+    .meta { margin-top: 2rem; opacity: 0.6; font-size: 1.2rem; }
+    .meta a { color: inherit; }
+    
+    /* Small coffee ring effect on bottom right fixed */
+    .ring {
+      position: fixed; bottom: 30px; right: 30px; width: 150px; height: 150px;
+      border: 4px solid #634d38; border-radius: 55% 45% 50% 50% / 50% 60% 40% 50%;
+      opacity: 0.1; pointer-events: none; transform: rotate(45deg);
     }
-    .btn:hover { transform: scale(1.05); }
   </style>
 </head>
 <body>
-  <div class="container">
-    <div class="entry">
-      <h1 class="stain-font">stain</h1>
-      <span class="stain-font pos">noun</span>
-      <ul class="def-list">
-        <li class="def-item stain-font">
-          a colored patch or dirty mark that is difficult to remove.
-        </li>
-        <li class="def-item stain-font">
-          a mark of disgrace associated with a particular circumstance quality or person.
-        </li>
-      </ul>
+  <div class="blot b1"></div>
+  <div class="blot b2"></div>
+  <div class="blot b3"></div>
+  <div class="ring"></div>
+
+  <div class="layout">
+    <header>
+      <h1>STAIN FONT</h1>
+    </header>
+
+    <div class="hero-block">
+      <p>A PROGRAMMATIC FONT INSPIRED BY CANDARA.</p>
+      <p>PURE OPEN SOURCE.</p>
+      <p>PUBLIC DOMAIN.</p>
+      <p>MADE BY CODE.</p>
     </div>
-    <footer class="footer">
+
+    <div class="actions">
+      <a href="./dist/Stain.otf" class="btn" download>Download Stain.OTF</a>
       <div class="meta">
-        Designed 100% programmatically.<br/>
-        Open Source & Public Domain.<br/>
-        <a href="https://github.com/multipleof4/stain.otf">multipleof4/stain.otf</a>
+        <a href="https://github.com/multipleof4/stain.otf">multipleof4 slash stain.otf</a>
       </div>
-      <a href="./dist/Stain.otf" class="btn" download>Download .OTF</a>
-    </footer>
+    </div>
   </div>
 </body>
 </html>
