Shopping | Samin

by Samin Sami

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bags crafted to move with your story</title>
<meta name="description" content="Crafted with care and designed to follow you from day to night.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
:root {
  --cream: #EEEAE3;
  --black: #111111;
  --paper: #f7f7f7;
  --text: #545454;
  --glow: #EAFE79;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  font-family: 'Inter Tight', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  color: var(--text);
}
::selection { background: var(--glow); color: var(--black); }

/* Typography Utilities */
.font-serif { font-family: 'Instrument Serif', serif; }
.text-cream { color: var(--cream); }
.text-black { color: var(--black); }
.text-paper { color: var(--paper); }
.text-main { color: var(--text); }
.text-glow { color: var(--glow); }

/* Signature Serif Glow */
.serif-glow {
  position: relative;
  display: inline-block;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  color: var(--text);
  z-index: 1;
}
.serif-glow::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: var(--glow);
  -webkit-text-stroke-width: var(--stroke-w, 16px);
  -webkit-text-stroke-color: var(--glow);
  z-index: -1;
  pointer-events: none;
}

/* Animations */
@keyframes tubularCurl {
  0% { transform: perspective(600px) rotateX(-110deg) scaleY(0.15)...