/* ============================================================ ETERNALINK — DESIGN SYSTEM "A love letter that outlasts everything." ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap'); /* --- TOKENS ------------------------------------------------- */ :root { /* Brand color */ --rose: #B8334A; --rose-deep: #8C1F34; --rose-soft: #E8C0C7; --rose-faint: #F4DDE0; --gold: #C9983A; --gold-bright: #D4A843; --gold-soft: #E8D199; --gold-faint: #F3E7C9; --sage: #4D8B6F; --sage-soft: #B5CFC1; --sage-faint: #DDE9DF; /* Paper */ --cream: #FDFAF5; --cream-warm: #FDF8F2; --paper: #F7F1E8; --paper-deep: #EDE3D2; --paper-edge: #E0D2BB; /* Ink */ --ink: #1C1410; --ink-soft: #3D2B1F; --muted: #6B5C52; --muted-light: #8B6E5E; --hairline: rgba(28, 20, 16, 0.10); --hairline-strong: rgba(28, 20, 16, 0.18); /* Typography */ --font-display: "Fraunces", "Cormorant Garamond", "Playfair Display", Georgia, serif; --font-body: "DM Sans", "Lato", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Geometry */ --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-xl: 22px; /* Shadows — paper resting on linen */ --shadow-paper: 0 1px 2px rgba(60, 40, 30, 0.06), 0 8px 24px -8px rgba(60, 40, 30, 0.12); --shadow-paper-lift: 0 2px 4px rgba(60, 40, 30, 0.08), 0 24px 48px -16px rgba(60, 40, 30, 0.18); --shadow-press: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(60, 40, 30, 0.08); /* Layout */ --content-max: 1240px; --reading-max: 680px; } /* --- RESET & BASE ------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--cream); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; position: relative; min-height: 100vh; } /* The paper grain — subtle SVG noise behind everything */ body::before { content: ""; position: fixed; inset: 0; background-image: url("data:image/svg+xml;utf8,"); pointer-events: none; z-index: 0; mix-blend-mode: multiply; opacity: 0.55; } /* And a soft warm vignette so it feels like aged paper */ body::after { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at top, transparent 0%, transparent 55%, rgba(140, 31, 52, 0.04) 100%); pointer-events: none; z-index: 0; } img, svg { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; } input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--rose); color: var(--cream); } /* --- TYPOGRAPHY --------------------------------------------- */ .display { font-family: var(--font-display); font-weight: 380; font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 380; letter-spacing: -0.02em; line-height: 1.04; color: var(--ink); } .display em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 360; color: var(--rose-deep); } .eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .eyebrow-rose { color: var(--rose-deep); } .lead { font-family: var(--font-display); font-variation-settings: "opsz" 24, "SOFT" 100, "wght" 350; font-size: 1.25rem; line-height: 1.55; color: var(--ink-soft); font-style: italic; } .mono { font-family: var(--font-mono); letter-spacing: 0.02em; } /* --- LAYOUT ------------------------------------------------- */ .shell { position: relative; z-index: 1; } .container { max-width: var(--content-max); margin: 0 auto; padding: 0 28px; } .container-narrow { max-width: 880px; margin: 0 auto; padding: 0 28px; } .container-reading { max-width: var(--reading-max); margin: 0 auto; padding: 0 28px; } /* --- TOP NAVIGATION ----------------------------------------- */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px) saturate(120%); background: rgba(253, 250, 245, 0.78); border-bottom: 1px solid var(--hairline); } .nav-inner { max-width: var(--content-max); margin: 0 auto; padding: 18px 28px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 480, "SOFT" 30; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); } .brand-mark { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; } .nav-links { display: flex; gap: 36px; font-size: 14px; color: var(--ink-soft); } .nav-links a { position: relative; transition: color 0.18s ease; } .nav-links a:hover { color: var(--rose-deep); } .nav-links a::after { content: ""; position: absolute; bottom: -6px; left: 0; width: 0; height: 1px; background: var(--rose-deep); transition: width 0.25s ease; } .nav-links a:hover::after { width: 100%; } @media (max-width: 780px) { .nav-links { display: none; } } /* --- BUTTONS ------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 26px; font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.01em; border-radius: 999px; transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); border: 1px solid transparent; white-space: nowrap; } .btn-primary { background: var(--rose); color: var(--cream); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 22px -10px rgba(184, 51, 74, 0.6); } .btn-primary:hover { background: var(--rose-deep); transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 14px 32px -12px rgba(140, 31, 52, 0.7); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline-strong); } .btn-ghost:hover { border-color: var(--ink); background: rgba(28, 20, 16, 0.03); } .btn-dark { background: var(--ink); color: var(--cream); } .btn-dark:hover { background: var(--ink-soft); transform: translateY(-1px); } .btn-sm { padding: 9px 18px; font-size: 13px; } .btn-lg { padding: 16px 32px; font-size: 15px; } .btn-block { width: 100%; } .btn-arrow { transition: transform 0.25s ease; } .btn:hover .btn-arrow { transform: translateX(3px); } /* --- BADGES ------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; background: var(--paper); border: 1px solid var(--hairline); color: var(--muted); } .badge-rose { background: var(--rose-faint); color: var(--rose-deep); border-color: rgba(140, 31, 52, 0.2); } .badge-gold { background: var(--gold-faint); color: #8B6710; border-color: rgba(201, 152, 58, 0.3); } .badge-sage { background: var(--sage-faint); color: #2F5C46; border-color: rgba(77, 139, 111, 0.3); } .badge-ink { background: var(--ink); color: var(--cream); border-color: var(--ink); } .badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; } /* --- INPUTS ------------------------------------------------- */ .field { display: block; margin-bottom: 18px; } .field-label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .input, .textarea, .select { width: 100%; padding: 13px 16px; background: var(--cream); border: 1px solid var(--hairline-strong); border-radius: var(--radius); font-size: 15px; color: var(--ink); transition: all 0.18s ease; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 4px var(--rose-faint); } .textarea { resize: vertical; min-height: 120px; line-height: 1.6; } .input-mono { font-family: var(--font-mono); letter-spacing: 0.06em; } .input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 540px) { .input-row { grid-template-columns: 1fr; } } /* --- SHEETS (PAPER CARDS) ----------------------------------- */ .sheet { background: var(--cream-warm); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-paper); padding: 32px; position: relative; } .sheet-deckle::before { content: ""; position: absolute; top: -8px; left: 24px; right: 24px; height: 8px; background-image: url("data:image/svg+xml;utf8,"); background-size: 100px 8px; background-repeat: repeat-x; } /* --- WAX SEAL (REUSABLE BRAND MARK) ------------------------- */ .wax-seal { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--rose) 0%, var(--rose-deep) 60%, #5C0F1F 100%); display: grid; place-items: center; color: var(--gold-bright); font-family: var(--font-display); font-variation-settings: "opsz" 144, "wght" 600; font-size: 22px; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset -3px -4px 8px rgba(0,0,0,0.25), inset 2px 3px 6px rgba(255,255,255,0.18); } .wax-seal::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 0.5px dashed rgba(212, 168, 67, 0.4); } /* --- TRUST BAR --------------------------------------------- */ .trust-row { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; font-size: 13px; color: var(--muted); } .trust-row .trust-item { display: inline-flex; align-items: center; gap: 8px; } .trust-row .trust-item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); } /* --- FOOTER ------------------------------------------------- */ .footer { margin-top: 120px; padding: 64px 0 40px; border-top: 1px solid var(--hairline); background: linear-gradient(to bottom, transparent, var(--paper)); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 48px; } .footer-grid h5 { font-family: var(--font-body); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; } .footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; color: var(--ink-soft); } .footer-grid a:hover { color: var(--rose-deep); } .footer-bottom { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-bottom { flex-direction: column; gap: 12px; } } /* --- UTILITIES --------------------------------------------- */ .hr-fade { border: none; height: 1px; background: linear-gradient(to right, transparent, var(--hairline-strong), transparent); margin: 32px 0; } .text-mute { color: var(--muted); } .text-rose { color: var(--rose-deep); } .text-center { text-align: center; } .divider-ornament { display: flex; align-items: center; gap: 14px; justify-content: center; color: var(--gold); margin: 24px 0; } .divider-ornament::before, .divider-ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(201, 152, 58, 0.5), transparent); max-width: 80px; } /* --- CHECKOUT STEPPER --------------------------------------- */ .stepper { display: flex; align-items: center; gap: 0; padding: 22px 0; border-bottom: 1px solid var(--hairline); overflow-x: auto; } .stepper-step { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-right: 16px; white-space: nowrap; } .stepper-step + .stepper-step { padding-left: 16px; border-left: 1px dashed var(--hairline-strong); } .stepper-step .num { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--hairline-strong); display: grid; place-items: center; font-family: var(--font-display); font-size: 12px; font-variation-settings: "opsz" 9, "wght" 500; background: var(--cream); } .stepper-step.is-current { color: var(--ink); } .stepper-step.is-current .num { background: var(--rose); border-color: var(--rose); color: var(--cream); } .stepper-step.is-done { color: var(--ink-soft); } .stepper-step.is-done .num { background: var(--ink); border-color: var(--ink); color: var(--cream); } /* --- ENTRY ANIMATION --------------------------------------- */ @keyframes riseFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .rise { animation: riseFade 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both; } .rise-1 { animation-delay: 0.05s; } .rise-2 { animation-delay: 0.18s; } .rise-3 { animation-delay: 0.32s; } .rise-4 { animation-delay: 0.45s; } .rise-5 { animation-delay: 0.58s; }

Your letter.