From c9b6f02fd304e47d602af68c63d052187d296c52 Mon Sep 17 00:00:00 2001
From: Danny Morabito <danny@arx-ccn.com>
Date: Fri, 29 Nov 2024 19:16:34 +0100
Subject: [PATCH] clean css

---
 src/components/Checkbox.svelte           |   8 +-
 src/components/ColorPicker.svelte        |  20 +-
 src/components/Dialog.svelte             |   1 -
 src/components/MailboxFolderItems.svelte |  93 +---
 src/components/Notification.svelte       |   2 +
 src/components/Tooltip.svelte            |   1 -
 src/lib/base.css                         | 520 +----------------------
 src/lib/style/animations.css             |  38 ++
 src/lib/style/form.css                   |  58 +++
 src/lib/style/hr.css                     |  34 ++
 src/lib/style/layout.css                 | 167 ++++++++
 src/lib/style/mailbox-folder-items.css   |  82 ++++
 src/lib/style/notifications.css          |  74 ++++
 src/lib/style/reset.css                  |  36 ++
 src/lib/style/stamps.css                 |  20 +
 src/lib/style/typography.css             |  11 +
 src/lib/style/variables.css              |  51 +++
 src/routes/+layout.svelte                |   1 +
 src/routes/letters/[id]/+page.svelte     |   6 -
 19 files changed, 585 insertions(+), 638 deletions(-)
 create mode 100644 src/lib/style/animations.css
 create mode 100644 src/lib/style/form.css
 create mode 100644 src/lib/style/hr.css
 create mode 100644 src/lib/style/layout.css
 create mode 100644 src/lib/style/mailbox-folder-items.css
 create mode 100644 src/lib/style/notifications.css
 create mode 100644 src/lib/style/reset.css
 create mode 100644 src/lib/style/stamps.css
 create mode 100644 src/lib/style/typography.css
 create mode 100644 src/lib/style/variables.css

diff --git a/src/components/Checkbox.svelte b/src/components/Checkbox.svelte
index 9b5f306..95d8518 100644
--- a/src/components/Checkbox.svelte
+++ b/src/components/Checkbox.svelte
@@ -158,7 +158,7 @@
   }
 
   input:checked ~ .checkbox-wrapper .check-path {
-    animation: check-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+    animation: draw-svg 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
   }
 
   input:checked ~ .checkbox-wrapper .checkbox-border {
@@ -187,12 +187,6 @@
     scale: 0.95;
   }
 
-  @keyframes check-draw {
-    to {
-      stroke-dashoffset: 0;
-    }
-  }
-
   @media (prefers-reduced-motion: reduce) {
     .checkbox-container *,
     .checkbox-container {
diff --git a/src/components/ColorPicker.svelte b/src/components/ColorPicker.svelte
index d208fd7..7ba25c0 100644
--- a/src/components/ColorPicker.svelte
+++ b/src/components/ColorPicker.svelte
@@ -97,7 +97,7 @@
         transparent 60%
     );
     transform: rotate(45deg);
-    animation: shine 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
+    animation: gleam 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
   }
 
   .glow {
@@ -110,22 +110,4 @@
     );
     animation: pulse 3s infinite alternate;
   }
-
-  @keyframes shine {
-    0% {
-      transform: translateX(-150%) rotate(45deg);
-    }
-    100% {
-      transform: translateX(150%) rotate(45deg);
-    }
-  }
-
-  @keyframes pulse {
-    0% {
-      opacity: 0.5;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
 </style>
diff --git a/src/components/Dialog.svelte b/src/components/Dialog.svelte
index 711b79f..c33f6d0 100644
--- a/src/components/Dialog.svelte
+++ b/src/components/Dialog.svelte
@@ -15,7 +15,6 @@
 
 <dialog
 	bind:this={dialog}
-	class="glass"
 	onclose={() => { open = false; onClose(); }}
 	use:appendToBody
 >
diff --git a/src/components/MailboxFolderItems.svelte b/src/components/MailboxFolderItems.svelte
index 0623203..783dd28 100644
--- a/src/components/MailboxFolderItems.svelte
+++ b/src/components/MailboxFolderItems.svelte
@@ -8,6 +8,7 @@
 	import type { Letter } from '$lib/letter';
 	import { slide } from 'svelte/transition';
 	import { FolderLabel } from '$lib/folderLabel';
+	import '$lib/style/mailbox-folder-items.css';
 
 	let {
 		letters,
@@ -215,95 +216,3 @@
 		{@render letterGroup(sortedInbox)}
 	{/if}
 </main>
-
-<style>
-  @layer layout {
-    .letter-list {
-      display: grid;
-      gap: var(--spacing-sm);
-      overflow: hidden;
-
-      .stamp-group {
-        display: grid;
-        gap: var(--spacing-md);
-      }
-
-      .letter-group {
-        display: grid;
-        gap: var(--spacing-sm);
-      }
-
-      .letter-meta {
-        color: var(--text-secondary);
-        font-size: 0.85rem;
-        margin-bottom: var(--spacing-xs);
-        display: flex;
-        align-items: center;
-        gap: var(--spacing-xs);
-      }
-
-      & .letter-item {
-        text-decoration: none;
-        color: var(--text-primary);
-        position: relative;
-        overflow: hidden;
-        padding: var(--spacing-md);
-        border-radius: 12px;
-        background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
-        border: 1px solid var(--glass-border);
-        transition: all 0.3s ease;
-        cursor: pointer;
-
-        &::before {
-          content: '';
-          position: absolute;
-          inset: 0;
-          background: var(--gradient-shine);
-          background-size: 200% 200%;
-          opacity: 0;
-          transition: opacity 0.3s ease;
-        }
-
-        &:hover, &.selected {
-          transform: translateY(-2px) scale(1.01);
-          background: color-mix(in srgb, var(--glass-bg) 90%, var(--accent));
-          box-shadow: 0 4px 16px var(--glass-shadow);
-
-          &::before {
-            opacity: 1;
-            animation: shine 2s linear infinite;
-          }
-        }
-
-        & .subject-line {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-bottom: var(--spacing-xs);
-        }
-
-        & .letter-subject, .letter-from {
-          display: flex;
-          flex-wrap: wrap;
-          flex-direction: row;
-          align-content: center;
-          align-items: center;
-          font-weight: 600;
-        }
-
-        & .stamps-count {
-          color: var(--text-secondary);
-          font-size: 0.85rem;
-          display: flex;
-          align-items: center;
-          gap: var(--spacing-xs);
-        }
-
-        & .letter-preview {
-          color: var(--text-secondary);
-          font-size: 0.9rem;
-        }
-      }
-    }
-  }
-</style>
diff --git a/src/components/Notification.svelte b/src/components/Notification.svelte
index 231726e..ed49199 100644
--- a/src/components/Notification.svelte
+++ b/src/components/Notification.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import '$lib/style/notifications.css';
+
 	import Icon from '@iconify/svelte';
 	import { onMount } from 'svelte';
 	import { appendToBody } from '$lib/utils.svelte';
diff --git a/src/components/Tooltip.svelte b/src/components/Tooltip.svelte
index 5683fa5..de1ff2b 100644
--- a/src/components/Tooltip.svelte
+++ b/src/components/Tooltip.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte';
-	import '$lib/base.css';
 
 	export let content: string;
 	export let position: 'top' | 'bottom' | 'left' | 'right' = 'top';
diff --git a/src/lib/base.css b/src/lib/base.css
index 5a182c3..ce2f257 100644
--- a/src/lib/base.css
+++ b/src/lib/base.css
@@ -1,512 +1,8 @@
-@layer reset {
-  *, *::before, *::after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-
-  ::selection {
-    background: var(--accent);
-    color: white;
-  }
-
-  :focus {
-    outline: none;
-  }
-
-  html {
-    color-scheme: dark;
-    scroll-behavior: smooth;
-  }
-
-  body {
-    min-height: 100dvh;
-    line-height: 1.5;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  img, picture, svg, video {
-    display: block;
-    max-width: 100%;
-  }
-
-  input, button, textarea, select {
-    font: inherit;
-  }
-}
-
-@layer base {
-  @property --gradient-angle {
-    syntax: '<angle>';
-    initial-value: 0deg;
-    inherits: false;
-  }
-
-  :root {
-    --glass-bg: color-mix(in srgb, white 8%, transparent);
-    --glass-bg-dark: color-mix(in srgb, black 8%, transparent);
-    --glass-bg-darker: color-mix(in srgb, black 50%, transparent);
-    --glass-border: color-mix(in srgb, white 12%, transparent);
-    --glass-shadow: rgb(0 0 0 / 0.1);
-    --glass-glow: oklch(67% 0.2 var(--base-hue) / 0.15);
-    --depth-shadow: 0 10px 30px -10px hsl(var(--base-hue) 30% 5% / 0.3),
-    0 4px 6px -4px hsl(var(--base-hue) 30% 5% / 0.2);
-    --noise-filter: url("data:image/svg+xml,%3Csvg width='1000' height='1000' viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch' seed='2' result='noise'/%3E%3CfeColorMatrix type='saturate' values='0' in='noise' result='desaturatedNoise'/%3E%3CfeBlend in='SourceGraphic' in2='desaturatedNoise' mode='overlay' result='blend'/%3E%3CfeComposite operator='in' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E#noiseFilter");
-    --gradient-shine: linear-gradient(
-        135deg,
-        transparent 20%,
-        hsl(var(--base-hue) 100% 100% / 0.1) 40%,
-        transparent 60%
-    );
-    --base-hue: 200;
-    --accent: oklch(67% 0.2 var(--base-hue));
-    --ternary: oklch(25% 0.3 var(--base-hue));
-    --accent-light: oklch(75% 0.2 var(--base-hue));
-    --text-primary: oklch(100% 0 0);
-    --text-secondary: oklch(100% 0 0 / 0.7);
-    --blur-strength: 16px;
-    --spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);
-    --spacing-sm: clamp(0.5rem, 1vw, 1rem);
-    --spacing-md: clamp(1rem, 2vw, 2rem);
-    --spacing-lg: clamp(2rem, 4vw, 4rem);
-
-
-    --editor-bg: oklch(10% 0.02 var(--base-hue) / 0.6);
-    --toolbar-bg: oklch(15% 0.02 var(--base-hue) / 0.8);
-    --input-border: oklch(100% 0.02 var(--base-hue) / 0.15);
-    --input-focus: oklch(60% 0.2 var(--base-hue) / 0.3);
-    --chip-bg: oklch(60% 0.2 var(--base-hue) / 0.15);
-
-    --npub-color: oklch(70% 0.2 calc(var(--base-hue) + 60));
-    --nip05-color: oklch(85% 0.3 calc(var(--base-hue) - 30));
-    --email-color: oklch(70% 0.2 calc(var(--base-hue) - 60));
-    --verified-color: oklch(70% 0.2 calc(var(--base-hue) + 180));
-    --chip-success: oklch(60% 0.2 calc(var(--base-hue) + 180) / 0.5);
-    --chip-warning: oklch(60% 0.2 calc(var(--base-hue) + 60) / 0.5);
-    --chip-error: oklch(60% 0.2 calc(var(--base-hue) + 30) / 0.5);
-  }
-
-  .loading {
-    display: none;
-    opacity: 0;
-    transition: opacity 500ms ease-in;
-    position: fixed;
-    inset: 50%;
-    transform: translate(-50%, -50%);
-    background: var(--glass-bg);
-    backdrop-filter: blur(var(--blur-strength));
-    border: 1px solid var(--glass-border);
-    border-radius: 16px;
-    padding: var(--spacing-md);
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-md);
-    box-shadow: var(--depth-shadow),
-    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
-    0 0 30px var(--glass-glow);
-    width: 50vmin;
-    height: 50vmin;
-    justify-content: center;
-
-  }
-
-  .htmx-request .loading, .htmx-request.loading {
-    display: flex;
-    opacity: 1;
-  }
-}
-
-@layer layout {
-  body {
-    background: linear-gradient(
-        var(--gradient-angle),
-        oklch(10% 0.2 calc(var(--base-hue) - 3)),
-        oklch(12.5% 0.2 calc(var(--base-hue) - 2)),
-        oklch(15% 0.2 calc(var(--base-hue) - 1)),
-        oklch(17.5% 0.2 var(--base-hue)),
-        oklch(20% 0.2 calc(var(--base-hue) + 1)),
-        oklch(25% 0.2 calc(var(--base-hue) + 2)),
-        oklch(30% 0.2 calc(var(--base-hue) + 3))
-    ),
-    radial-gradient(
-        circle at top left,
-        rgb(99 102 241 / 0.15),
-        transparent 50%
-    );
-    background-blend-mode: normal, overlay;
-    font-family: 'Inter', system-ui;
-    color: var(--text-primary);
-
-    @media (prefers-reduced-motion: no-preference) {
-      animation: rotate-gradient 20s linear infinite;
-    }
-
-    &::before {
-      content: '';
-      position: fixed;
-      inset: 0;
-      background-image: var(--noise-filter);
-      opacity: 0.05;
-      z-index: -1;
-      pointer-events: none;
-    }
-  }
-
-  #app {
-    display: grid;
-    grid-template-rows: auto 1fr;
-    min-height: 100dvh;
-    padding: var(--spacing-md);
-    gap: var(--spacing-md);
-  }
-
-  #header {
-    position: sticky;
-    top: var(--spacing-md);
-    backdrop-filter: blur(var(--blur-strength)) saturate(180%);
-    background: var(--glass-bg);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 16px;
-    padding: var(--spacing-md);
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    gap: var(--spacing-md);
-    align-items: center;
-    box-shadow: var(--depth-shadow),
-    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
-    0 0 30px var(--glass-glow);
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: var(--gradient-shine);
-      background-size: 200% 200%;
-      border-radius: inherit;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    }
-
-    &:hover::before {
-      opacity: 1;
-      animation: shine 3s linear infinite;
-    }
-
-    & .title {
-      position: relative;
-      text-shadow: 0 0 20px var(--glass-glow);
-      font-size: clamp(1.5rem, 3vw, 2rem);
-      font-weight: 700;
-      text-align: center;
-      background: linear-gradient(to right, var(--text-primary), var(--accent-light));
-      -webkit-background-clip: text;
-      background-clip: text;
-      color: transparent;
-
-      &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        bottom: -4px;
-        width: 100%;
-        height: 2px;
-        background: linear-gradient(90deg, transparent, var(--accent), transparent);
-        transform: scaleX(0);
-        transition: transform 0.3s ease;
-      }
-
-      &:hover::after {
-        transform: scaleX(1);
-      }
-    }
-  }
-
-  #content {
-    height: 100%;
-    backdrop-filter: blur(var(--blur-strength));
-    background: var(--glass-bg);
-    border-radius: 16px;
-    border: 1px solid var(--glass-border);
-    padding: var(--spacing-md);
-    box-shadow: var(--depth-shadow);
-  }
-
-  #page-title {
-    width: fit-content;
-    font-size: 2.5rem;
-    font-weight: 600;
-    background: linear-gradient(to right, var(--text-primary), var(--accent-light));
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    padding-left: 1rem;
-    padding-bottom: 1rem;
-  }
-
-  h3, h4 {
-    width: fit-content;
-    background: linear-gradient(to right, var(--text-primary), var(--accent-light));
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    font-weight: 600;
-  }
-
-  h3 {
-    font-size: 1.5rem;
-    margin-bottom: 0;
-  }
-}
-
-@layer components {
-  button, .button {
-    text-decoration: none;
-    padding: 0.5rem 1rem;
-    border: 1px solid var(--glass-border);
-    background: var(--glass-bg);
-    color: var(--text-primary);
-    border-radius: 8px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    position: relative;
-    isolation: isolate;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: -2px;
-      background: linear-gradient(45deg, var(--accent), transparent);
-      border-radius: 10px;
-      z-index: -1;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    }
-
-    &:active {
-      transform: translatey(1px);
-    }
-
-    &:hover {
-      text-decoration: underline;
-      transform: translatey(-2px);
-      box-shadow: 0 0 15px var(--glass-glow);
-
-      &::before {
-        opacity: 1;
-      }
-    }
-  }
-
-
-  input[type="text"], input[type="password"] {
-    background: var(--editor-bg);
-    border: 1px solid var(--input-border);
-    color: var(--text-primary);
-    padding: var(--spacing-sm);
-    border-radius: 8px;
-    width: 100%;
-    transition: all 0.3s ease;
-
-    &:focus {
-      border-color: var(--input-focus);
-      box-shadow: 0 0 0 2px var(--input-focus),
-      0 0 15px var(--glass-glow);
-    }
-
-    &::placeholder {
-      color: var(--text-secondary);
-    }
-  }
-
-  .notification {
-    isolation: isolate;
-    contain: none;
-    position: fixed;
-    top: var(--spacing-md);
-    right: var(--spacing-md);
-    background: var(--glass-bg);
-    backdrop-filter: blur(var(--blur-strength));
-    border: 1px solid var(--glass-border);
-    border-radius: 12px;
-    padding: var(--spacing-md);
-    min-width: 300px;
-    max-width: 400px;
-    display: flex;
-    gap: var(--spacing-sm);
-    align-items: flex-start;
-    box-shadow: var(--depth-shadow),
-    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
-    0 0 30px var(--glass-glow);
-    transform: translateX(120%);
-    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-    z-index: 1000;
-
-    &.show {
-      transform: translateX(0);
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: var(--gradient-shine);
-      background-size: 200% 200%;
-      border-radius: inherit;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    }
-
-    &:hover::before {
-      opacity: 1;
-      animation: shine 3s linear infinite;
-    }
-
-    .notification-content {
-      flex: 1;
-
-      .notification-title {
-        font-weight: 600;
-        margin-bottom: var(--spacing-xs);
-        background: linear-gradient(to right, var(--text-primary), var(--accent-light));
-        -webkit-background-clip: text;
-        background-clip: text;
-        color: transparent;
-      }
-
-      .notification-message {
-        color: var(--text-secondary);
-        font-size: 0.9rem;
-      }
-    }
-
-    .close-button {
-      background: transparent;
-      border: none;
-      color: var(--text-secondary);
-      padding: 4px;
-      cursor: pointer;
-      transition: color 0.3s ease;
-
-      &:hover {
-        color: var(--text-primary);
-      }
-    }
-  }
-
-  .glass {
-    backdrop-filter: blur(var(--blur-strength));
-    background: var(--glass-bg);
-    border-radius: 16px;
-    border: 1px solid var(--glass-border);
-    padding: var(--spacing-md);
-    box-shadow: var(--depth-shadow);
-  }
-
-  p.error {
-    color: oklch(60% 50% 35);
-    font-weight: 700;
-    font-size: 0.9rem;
-    text-align: center;
-    text-shadow: -1.5px -1.5px 0 oklch(15% 10% 35),
-    1.5px -1.5px 0 oklch(15% 10% 35),
-    -1.5px 1.5px 0 oklch(15% 10% 35),
-    1.5px 1.5px 0 oklch(15% 10% 35);
-    letter-spacing: 1px;
-  }
-
-  .stamp-count {
-    display: flex;
-    place-content: center;
-    align-items: center;
-    gap: var(--spacing-sm);
-    font-size: 2em;
-
-    &.button {
-      cursor: pointer;
-      background: var(--glass-bg);
-      padding: var(--spacing-sm);
-      border: 1px solid var(--glass-border);
-      border-radius: 8px;
-      text-decoration: none;
-
-      &:hover {
-        box-shadow: 0 0 15px var(--glass-glow);
-      }
-    }
-  }
-
-  hr {
-    border: none;
-    height: 2px;
-    margin: var(--spacing-md) 0;
-    position: relative;
-    overflow: visible;
-    background: linear-gradient(
-        90deg,
-        transparent,
-        var(--accent),
-        var(--accent-light),
-        var(--accent),
-        transparent
-    );
-    inset: -1px;
-    filter: blur(2px);
-    box-shadow: 0 0 15px var(--glass-glow);
-
-    &::after {
-      content: '';
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      background: var(--gradient-shine);
-      background-size: 200% 200%;
-      opacity: 0;
-      transition: opacity 0.3s ease;
-    }
-
-    &:hover::after {
-      opacity: 1;
-      animation: shine 3s linear infinite;
-    }
-  }
-}
-
-@keyframes shine {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.section-title {
-  position: fixed;
-  display: flex;
-  width: calc(100%);
-  margin: calc(var(--spacing-md) * -1);
-  padding: var(--spacing-md);
-  background: var(--ternary);
-  border: 1px solid var(--accent);
-  z-index: 99999;
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
-  place-content: center;
-  align-items: center;
-  gap: var(--spacing-xs);
-
-  > .close-button {
-    position: absolute;
-    top: var(--spacing-md);
-    right: calc(
-        var(--spacing-md) * 2 + 1.5rem
-    );
-  }
-
-  & + * {
-    margin-top: calc(
-        1.5rem +
-        var(--spacing-md) * 3
-    );
-  }
-}
\ No newline at end of file
+@import "./style/reset.css";
+@import "./style/variables.css";
+@import "./style/layout.css";
+@import './style/form.css';
+@import "./style/animations.css";
+@import "./style/hr.css";
+@import "./style/stamps.css";
+@import "./style/typography.css";
\ No newline at end of file
diff --git a/src/lib/style/animations.css b/src/lib/style/animations.css
new file mode 100644
index 0000000..b11c116
--- /dev/null
+++ b/src/lib/style/animations.css
@@ -0,0 +1,38 @@
+@keyframes shine {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes gleam {
+  0% {
+    transform: translateX(-150%) rotate(45deg);
+  }
+  100% {
+    transform: translateX(150%) rotate(45deg);
+  }
+}
+
+@keyframes draw-svg {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/lib/style/form.css b/src/lib/style/form.css
new file mode 100644
index 0000000..dea0c65
--- /dev/null
+++ b/src/lib/style/form.css
@@ -0,0 +1,58 @@
+button, .button {
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--glass-border);
+  background: var(--glass-bg);
+  color: var(--text-primary);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  isolation: isolate;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    background: linear-gradient(45deg, var(--accent), transparent);
+    border-radius: 10px;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &:active {
+    transform: translatey(1px);
+  }
+
+  &:hover {
+    text-decoration: underline;
+    transform: translatey(-2px);
+    box-shadow: 0 0 15px var(--glass-glow);
+
+    &::before {
+      opacity: 1;
+    }
+  }
+}
+
+
+input[type="text"], input[type="password"] {
+  background: var(--editor-bg);
+  border: 1px solid var(--input-border);
+  color: var(--text-primary);
+  padding: var(--spacing-sm);
+  border-radius: 8px;
+  width: 100%;
+  transition: all 0.3s ease;
+
+  &:focus {
+    border-color: var(--input-focus);
+    box-shadow: 0 0 0 2px var(--input-focus),
+    0 0 15px var(--glass-glow);
+  }
+
+  &::placeholder {
+    color: var(--text-secondary);
+  }
+}
diff --git a/src/lib/style/hr.css b/src/lib/style/hr.css
new file mode 100644
index 0000000..22486d3
--- /dev/null
+++ b/src/lib/style/hr.css
@@ -0,0 +1,34 @@
+hr {
+  border: none;
+  height: 2px;
+  margin: var(--spacing-md) 0;
+  position: relative;
+  overflow: visible;
+  background: linear-gradient(
+      90deg,
+      transparent,
+      var(--accent),
+      var(--accent-light),
+      var(--accent),
+      transparent
+  );
+  inset: -1px;
+  filter: blur(2px);
+  box-shadow: 0 0 15px var(--glass-glow);
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: var(--gradient-shine);
+    background-size: 200% 200%;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &:hover::after {
+    opacity: 1;
+    animation: shine 3s linear infinite;
+  }
+}
diff --git a/src/lib/style/layout.css b/src/lib/style/layout.css
new file mode 100644
index 0000000..5353156
--- /dev/null
+++ b/src/lib/style/layout.css
@@ -0,0 +1,167 @@
+body {
+  background: linear-gradient(
+      var(--gradient-angle),
+      oklch(10% 0.2 calc(var(--base-hue) - 3)),
+      oklch(12.5% 0.2 calc(var(--base-hue) - 2)),
+      oklch(15% 0.2 calc(var(--base-hue) - 1)),
+      oklch(17.5% 0.2 var(--base-hue)),
+      oklch(20% 0.2 calc(var(--base-hue) + 1)),
+      oklch(25% 0.2 calc(var(--base-hue) + 2)),
+      oklch(30% 0.2 calc(var(--base-hue) + 3))
+  ),
+  radial-gradient(
+      circle at top left,
+      rgb(99 102 241 / 0.15),
+      transparent 50%
+  );
+  background-blend-mode: normal, overlay;
+  background-attachment: fixed, fixed;
+  font-family: 'Inter', system-ui;
+  color: var(--text-primary);
+
+  &::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background-image: var(--noise-filter);
+    opacity: 0.05;
+    z-index: -1;
+    pointer-events: none;
+  }
+}
+
+#app {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  min-height: 100dvh;
+  padding: var(--spacing-md);
+  gap: var(--spacing-md);
+}
+
+#header {
+  position: sticky;
+  top: var(--spacing-md);
+  backdrop-filter: blur(var(--blur-strength)) saturate(180%);
+  background: var(--glass-bg);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  padding: var(--spacing-md);
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: var(--spacing-md);
+  align-items: center;
+  box-shadow: var(--depth-shadow),
+  0 0 0 1px rgba(255, 255, 255, 0.1) inset,
+  0 0 30px var(--glass-glow);
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--gradient-shine);
+    background-size: 200% 200%;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &:hover::before {
+    opacity: 1;
+    animation: shine 3s linear infinite;
+  }
+
+  & .title {
+    position: relative;
+    text-shadow: 0 0 20px var(--glass-glow);
+    font-size: clamp(1.5rem, 3vw, 2rem);
+    font-weight: 700;
+    text-align: center;
+    background: linear-gradient(to right, var(--text-primary), var(--accent-light));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      bottom: -4px;
+      width: 100%;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, var(--accent), transparent);
+      transform: scaleX(0);
+      transition: transform 0.3s ease;
+    }
+
+    &:hover::after {
+      transform: scaleX(1);
+    }
+  }
+}
+
+#content {
+  height: 100%;
+  backdrop-filter: blur(var(--blur-strength));
+  background: var(--glass-bg);
+  border-radius: 16px;
+  border: 1px solid var(--glass-border);
+  padding: var(--spacing-md);
+  box-shadow: var(--depth-shadow);
+}
+
+#page-title {
+  width: fit-content;
+  font-size: 2.5rem;
+  font-weight: 600;
+  background: linear-gradient(to right, var(--text-primary), var(--accent-light));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  padding-left: 1rem;
+  padding-bottom: 1rem;
+}
+
+h3, h4 {
+  width: fit-content;
+  background: linear-gradient(to right, var(--text-primary), var(--accent-light));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  font-weight: 600;
+}
+
+h3 {
+  font-size: 1.5rem;
+  margin-bottom: 0;
+}
+
+.section-title {
+  position: fixed;
+  display: flex;
+  width: calc(100%);
+  margin: calc(var(--spacing-md) * -1);
+  padding: var(--spacing-md);
+  background: var(--ternary);
+  border: 1px solid var(--accent);
+  z-index: 99999;
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  place-content: center;
+  align-items: center;
+  gap: var(--spacing-xs);
+
+  > .close-button {
+    position: absolute;
+    top: var(--spacing-md);
+    right: calc(
+        var(--spacing-md) * 2 + 1.5rem
+    );
+  }
+
+  & + * {
+    margin-top: calc(
+        1.5rem +
+        var(--spacing-md) * 3
+    );
+  }
+}
diff --git a/src/lib/style/mailbox-folder-items.css b/src/lib/style/mailbox-folder-items.css
new file mode 100644
index 0000000..561d3ff
--- /dev/null
+++ b/src/lib/style/mailbox-folder-items.css
@@ -0,0 +1,82 @@
+.letter-list {
+  display: grid;
+  gap: var(--spacing-sm);
+  overflow: hidden;
+
+  .stamp-group {
+    display: grid;
+    gap: var(--spacing-md);
+  }
+
+  .letter-group {
+    display: grid;
+    gap: var(--spacing-sm);
+  }
+
+  .letter-meta {
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    margin-bottom: var(--spacing-xs);
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-xs);
+  }
+
+  & .letter-item {
+    text-decoration: none;
+    color: var(--text-primary);
+    position: relative;
+    overflow: hidden;
+    padding: var(--spacing-md);
+    border-radius: 12px;
+    background: color-mix(in srgb, var(--glass-bg) 80%, transparent);
+    border: 1px solid var(--glass-border);
+    transition: all 0.3s ease;
+    cursor: pointer;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: var(--gradient-shine);
+      background-size: 200% 200%;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    &:hover, &.selected {
+      transform: translateY(-2px) scale(1.01);
+      background: color-mix(in srgb, var(--glass-bg) 90%, var(--accent));
+      box-shadow: 0 4px 16px var(--glass-shadow);
+
+      &::before {
+        opacity: 1;
+        animation: shine 2s linear infinite;
+      }
+    }
+
+    & .subject-line {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--spacing-xs);
+    }
+
+    & .letter-subject, .letter-from {
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row;
+      align-content: center;
+      align-items: center;
+      font-weight: 600;
+    }
+
+    & .stamps-count {
+      color: var(--text-secondary);
+      font-size: 0.85rem;
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-xs);
+    }
+  }
+}
diff --git a/src/lib/style/notifications.css b/src/lib/style/notifications.css
new file mode 100644
index 0000000..c8001f4
--- /dev/null
+++ b/src/lib/style/notifications.css
@@ -0,0 +1,74 @@
+.notification {
+  isolation: isolate;
+  contain: none;
+  position: fixed;
+  top: var(--spacing-md);
+  right: var(--spacing-md);
+  background: var(--glass-bg);
+  backdrop-filter: blur(var(--blur-strength));
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  padding: var(--spacing-md);
+  min-width: 300px;
+  max-width: 400px;
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: flex-start;
+  box-shadow: var(--depth-shadow),
+  0 0 0 1px rgba(255, 255, 255, 0.1) inset,
+  0 0 30px var(--glass-glow);
+  transform: translateX(120%);
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  z-index: 1000;
+
+  &.show {
+    transform: translateX(0);
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--gradient-shine);
+    background-size: 200% 200%;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &:hover::before {
+    opacity: 1;
+    animation: shine 3s linear infinite;
+  }
+
+  .notification-content {
+    flex: 1;
+
+    .notification-title {
+      font-weight: 600;
+      margin-bottom: var(--spacing-xs);
+      background: linear-gradient(to right, var(--text-primary), var(--accent-light));
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+    }
+
+    .notification-message {
+      color: var(--text-secondary);
+      font-size: 0.9rem;
+    }
+  }
+
+  .close-button {
+    background: transparent;
+    border: none;
+    color: var(--text-secondary);
+    padding: 4px;
+    cursor: pointer;
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: var(--text-primary);
+    }
+  }
+}
diff --git a/src/lib/style/reset.css b/src/lib/style/reset.css
new file mode 100644
index 0000000..c7467a0
--- /dev/null
+++ b/src/lib/style/reset.css
@@ -0,0 +1,36 @@
+@layer reset {
+  *, *::before, *::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  ::selection {
+    background: var(--accent);
+    color: white;
+  }
+
+  :focus {
+    outline: none;
+  }
+
+  html {
+    color-scheme: dark;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    min-height: 100dvh;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  img, picture, svg, video {
+    display: block;
+    max-width: 100%;
+  }
+
+  input, button, textarea, select {
+    font: inherit;
+  }
+}
diff --git a/src/lib/style/stamps.css b/src/lib/style/stamps.css
new file mode 100644
index 0000000..f62346f
--- /dev/null
+++ b/src/lib/style/stamps.css
@@ -0,0 +1,20 @@
+.stamp-count {
+  display: flex;
+  place-content: center;
+  align-items: center;
+  gap: var(--spacing-sm);
+  font-size: 2em;
+
+  &.button {
+    cursor: pointer;
+    background: var(--glass-bg);
+    padding: var(--spacing-sm);
+    border: 1px solid var(--glass-border);
+    border-radius: 8px;
+    text-decoration: none;
+
+    &:hover {
+      box-shadow: 0 0 15px var(--glass-glow);
+    }
+  }
+}
diff --git a/src/lib/style/typography.css b/src/lib/style/typography.css
new file mode 100644
index 0000000..ec6b470
--- /dev/null
+++ b/src/lib/style/typography.css
@@ -0,0 +1,11 @@
+p.error {
+  color: oklch(60% 50% 35);
+  font-weight: 700;
+  font-size: 0.9rem;
+  text-align: center;
+  text-shadow: -1.5px -1.5px 0 oklch(15% 10% 35),
+  1.5px -1.5px 0 oklch(15% 10% 35),
+  -1.5px 1.5px 0 oklch(15% 10% 35),
+  1.5px 1.5px 0 oklch(15% 10% 35);
+  letter-spacing: 1px;
+}
diff --git a/src/lib/style/variables.css b/src/lib/style/variables.css
new file mode 100644
index 0000000..7dc2a86
--- /dev/null
+++ b/src/lib/style/variables.css
@@ -0,0 +1,51 @@
+@layer base {
+  @property --gradient-angle {
+    syntax: '<angle>';
+    initial-value: 0deg;
+    inherits: false;
+  }
+
+  :root {
+    --glass-bg: color-mix(in srgb, white 8%, transparent);
+    --glass-bg-dark: color-mix(in srgb, black 8%, transparent);
+    --glass-bg-darker: color-mix(in srgb, black 50%, transparent);
+    --glass-border: color-mix(in srgb, white 12%, transparent);
+    --glass-shadow: rgb(0 0 0 / 0.1);
+    --glass-glow: oklch(67% 0.2 var(--base-hue) / 0.15);
+    --depth-shadow: 0 10px 30px -10px hsl(var(--base-hue) 30% 5% / 0.3),
+    0 4px 6px -4px hsl(var(--base-hue) 30% 5% / 0.2);
+    --noise-filter: url("data:image/svg+xml,%3Csvg width='1000' height='1000' viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch' seed='2' result='noise'/%3E%3CfeColorMatrix type='saturate' values='0' in='noise' result='desaturatedNoise'/%3E%3CfeBlend in='SourceGraphic' in2='desaturatedNoise' mode='overlay' result='blend'/%3E%3CfeComposite operator='in' in2='SourceGraphic'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E#noiseFilter");
+    --gradient-shine: linear-gradient(
+        135deg,
+        transparent 20%,
+        hsl(var(--base-hue) 100% 100% / 0.1) 40%,
+        transparent 60%
+    );
+    --base-hue: 200;
+    --accent: oklch(67% 0.2 var(--base-hue));
+    --ternary: oklch(25% 0.3 var(--base-hue));
+    --accent-light: oklch(75% 0.2 var(--base-hue));
+    --text-primary: oklch(100% 0 0);
+    --text-secondary: oklch(100% 0 0 / 0.7);
+    --blur-strength: 16px;
+    --spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);
+    --spacing-sm: clamp(0.5rem, 1vw, 1rem);
+    --spacing-md: clamp(1rem, 2vw, 2rem);
+    --spacing-lg: clamp(2rem, 4vw, 4rem);
+
+
+    --editor-bg: oklch(10% 0.02 var(--base-hue) / 0.6);
+    --toolbar-bg: oklch(15% 0.02 var(--base-hue) / 0.8);
+    --input-border: oklch(100% 0.02 var(--base-hue) / 0.15);
+    --input-focus: oklch(60% 0.2 var(--base-hue) / 0.3);
+    --chip-bg: oklch(60% 0.2 var(--base-hue) / 0.15);
+
+    --npub-color: oklch(70% 0.2 calc(var(--base-hue) + 60));
+    --nip05-color: oklch(85% 0.3 calc(var(--base-hue) - 30));
+    --email-color: oklch(70% 0.2 calc(var(--base-hue) - 60));
+    --verified-color: oklch(70% 0.2 calc(var(--base-hue) + 180));
+    --chip-success: oklch(60% 0.2 calc(var(--base-hue) + 180) / 0.5);
+    --chip-warning: oklch(60% 0.2 calc(var(--base-hue) + 60) / 0.5);
+    --chip-error: oklch(60% 0.2 calc(var(--base-hue) + 30) / 0.5);
+  }
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b99b0f4..972bc64 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
 	import { NDKNip07Signer } from '@nostr-dev-kit/ndk';
 	import IconButton from '../components/IconButton.svelte';
 	import Icon from '@iconify/svelte';
+	import '$lib/base.css';
 
 	let { children } = $props();
 
diff --git a/src/routes/letters/[id]/+page.svelte b/src/routes/letters/[id]/+page.svelte
index 6caa98e..a58d6fe 100644
--- a/src/routes/letters/[id]/+page.svelte
+++ b/src/routes/letters/[id]/+page.svelte
@@ -162,12 +162,6 @@
     animation: spin 1s linear infinite;
   }
 
-  @keyframes spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
   .letter-card {
     container-type: inline-size;
     width: 100%;