### GitHub Pages Deployment Workflow

Source: https://context7.com/muktargoni1/sweetly.html/llms.txt

Automates the deployment of static content to GitHub Pages. This workflow triggers on pushes to the 'main' branch and uses standard GitHub Actions for checkout, page configuration, artifact upload, and deployment.

```yaml
# .github/workflows/static.yml
name: Deploy static content to Pages
on:
  push:
    branches: ["main"]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: '.'
      - uses: actions/deploy-pages@v4
```

--------------------------------

### Pricing Card Styling (CSS)

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

Styles for pricing cards, including a standard and a 'pro' version. It defines layout, borders, hover effects, and specific styles for badges, tiers, prices, feature lists, and buttons. Dependencies include CSS variables for colors and fonts.

```css
.pc {
  padding: 52px 44px;
  border: 1px solid var(--ivory-dark);
  transition: border-color 0.3s, transform 0.35s;
}

.pc:hover {
  border-color: var(--rose-light);
  transform: translateY(-6px);
}

.pc.pro {
  background: var(--charcoal);
  border-color: var(--charcoal);
}

.pc-badge {
  display: inline-block;
  background: var(--rose);
  color: white;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 28px;
}

.pc-tier {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.pc.pro .pc-tier {
  color: rgba(246,242,237,0.4);
}

.pc-price {
  font-family: var(--serif);
  font-size: 58px;
  font-weight: 300;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--charcoal);
}

.pc.pro .pc-price {
  color: var(--ivory);
}

.pc-price sup {
  font-size: 24px;
  vertical-align: super;
  margin-right: 3px;
}

.pc-period {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 40px;
}

.pc.pro .pc-period {
  color: rgba(246,242,237,0.35);
}

.pc-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 44px;
}

.pc-list li {
  font-size: 13px;
  color: var(--charcoal-2);
  font-weight: 300;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}

.pc.pro .pc-list li {
  color: rgba(246,242,237,0.65);
}

.pc-list li::before {
  content: '—';
  color: var(--rose-light);
  flex-shrink: 0;
}

.pc-btn {
  width: 100%;
  padding: 15px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--charcoal);
  background: transparent;
  color: var(--charcoal);
  cursor: pointer;
  transition: all 0.3s;
}

.pc-btn:hover {
  background: var(--charcoal);
  color: var(--ivory);
}

.pc.pro .pc-btn {
  border-color: var(--ivory);
  color: var(--ivory);
}

.pc.pro .pc-btn:hover {
  background: var(--rose);
  border-color: var(--rose);
}
```

--------------------------------

### Proof Bar Styling

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

This CSS styles a 'proof bar' component, typically used to display key statistics or achievements. It features a dark background and uses flexbox for alignment of items. Each proof item includes a large number and a smaller, uppercase label, separated by a vertical rule.

```css
/* PROOF BAR */
.proof-bar {
  background: var(--charcoal);
  padding: 22px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.proof-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.proof-num {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--ivory);
  letter-spacing: -0.02em;
}
.proof-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246,242,237,0.45);
  line-height: 1.5;
}
.proof-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.1);
}
```

--------------------------------

### Testimonial Card Styling (CSS)

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

Styles for testimonial cards, featuring a dark background, subtle borders, and distinct typography for quotes and attributes. It uses CSS variables for colors and fonts. The layout is designed for a grid system.

```css
.test-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 42px 36px;
}

.test-quote {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 300;
  color: var(--rose);
  line-height: 0.6;
  margin-bottom: 18px;
  display: block;
}

.test-card p {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.65;
  color: rgba(246,242,237,0.8);
  margin-bottom: 28px;
}

.test-attr {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(246,242,237,0.3);
}
```

--------------------------------

### Global CSS Reset and Variables

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

This CSS snippet provides a universal reset for box-sizing, margin, and padding. It also defines a set of CSS variables for colors and fonts, establishing a consistent design system for the project. These variables are used throughout the stylesheet for easy theme management.

```css
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --ivory: #F6F2ED;
  --ivory-mid: #EDE7DD;
  --ivory-dark: #E0D8CC;
  --charcoal: #1B1917;
  --charcoal-2: #332F2B;
  --rose: #B87074;
  --rose-light: #D4A5A8;
  --rose-pale: #F0E3E4;
  --muted: #8377;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', sans-serif;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--ivory);
  color: var(--charcoal);
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: hidden;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 999;
}
```

--------------------------------

### CSS for Modal Overlay and Content

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

Styles for a modal dialog overlay and its content. The '.overlay' class creates a fixed, full-screen background with blur effects and controls the visibility and transition of the modal. The '.modal' class styles the content box, including padding, maximum width, and a subtle vertical transition. The '.modal-x' class styles the close button.

```css
/* MODAL */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(27,25,23,0.55);
  backdrop-filter: blur(6px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}

.overlay.on {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--ivory);
  padding: 60px;
  max-width: 460px;
  width: 92%;
  position: relative;
  transform: translateY(18px);
  transition: transform 0.4s;
}

.overlay.on .modal {
  transform: translateY(0);
}

.modal-x {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
```

--------------------------------

### CSS for Responsive Design Adjustments

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

Provides media queries to adjust the layout and styling for smaller screens, specifically targeting devices with a maximum width of 960px. It modifies navigation, section padding, heading sizes, grid layouts, footer alignment, and call-to-action section appearance to ensure a better user experience on mobile devices.

```css
/* RESPONSIVE */
@media (max-width: 960px) {
  nav {
    padding: 22px 30px;
  }
  .nav-mid {
    display: none;
  }
  section, .hero {
    padding: 80px 30px;
  }
  h1 {
    font-size: clamp(44px, 10vw, 70px);
  }
  .why-grid, .reminders-wrap, .voice-grid, .pricing-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .steps, .test-grid {
    grid-template-columns: 1fr;
  }
  .proof-bar, .privacy {
    padding: 36px 30px;
    justify-content: flex-start;
  }
  footer {
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
  }
  .cta-section {
    padding: 90px 30px;
  }
  .testimonials {
    padding: 70px 30px;
  }
}
```

--------------------------------

### Responsive CSS Grid Layout

Source: https://context7.com/muktargoni1/sweetly.html/llms.txt

Implements a responsive multi-column layout using CSS Grid, collapsing to a single column on smaller screens. This CSS handles desktop and mobile views for various grid elements.

```css
/* Desktop: Multi-column grids */
.why-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.pricing-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* Mobile: Single column */
@media (max-width: 960px) {
  .why-grid, .reminders-wrap, .voice-grid, .pricing-inner {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  .steps, .test-grid { grid-template-columns: 1fr; }
  section, .hero { padding: 80px 30px; }
}
```

--------------------------------

### Waitlist Form Submission Handler (JavaScript)

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

This asynchronous JavaScript function, `handleWaitlist`, manages the submission of the waitlist form. It retrieves user name and email, sends the data to a Formspree endpoint using a POST request, and updates the button text and state during submission. It provides feedback on success or failure.

```javascript
async function handleWaitlist() {
  const name = document.getElementById('wl-name').value.trim();
  const email = document.getElementById('wl-email').value.trim();
  if (!name || !email) return;
  const btn = document.querySelector('#waitlist-form button');
  btn.textContent = 'Saving...';
  btn.disabled = true;
  try {
    const res = await fetch('https://formspree.io/f/mreaowgw', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({ name, email })
    });
    if (res.ok) {
      document.getElementById('waitlist-form').style.display = 'none';
      document.getElementById('waitlist-success').style.display = 'block';
    } else {
      btn.textContent = 'Something went wrong — try again';
      btn.disabled = false;
    }
  } catch {
    btn.textContent = 'Something went wrong — try again';
    btn.disabled = false;
  }
}
```

--------------------------------

### CSS for Call-to-Action Section

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

Styles the call-to-action (CTA) section, including background gradients, positioning for overlay elements, and typography for headings and paragraphs. It ensures that the CTA elements are prominently displayed and visually engaging, with specific styling for the primary button.

```css
.cta-section {
  position: relative;
  padding: 120px 64px;
  text-align: center;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  background: linear-gradient(180deg, var(--rose-pale) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cta-section h2 {
  font-size: clamp(36px, 5vw, 72px);
  position: relative;
  margin: 0 auto 22px;
  max-width: 640px;
}

.cta-section p {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 52px;
  position: relative;
}

.cta-section .btn-primary {
  position: relative;
}

.cta-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 20px;
  position: relative;
}
```

--------------------------------

### CSS for Footer Layout and Styling

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

Styles the footer section, including a top border, padding, and flexbox layout for aligning items. It defines styles for the footer logo, navigation links, and copyright text, ensuring a consistent and visually appealing footer across the site. Hover effects are applied to navigation links for interactivity.

```css
/* FOOTER */
footer {
  border-top: 1px solid var(--ivory-dark);
  padding: 40px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.foot-logo {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--charcoal);
}

.foot-logo em {
  font-style: normal;
  color: var(--rose);
}

.foot-links {
  display: flex;
  gap: 32px;
  list-style: none;
}

.foot-links a {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.3s;
}

.foot-links a:hover {
  color: var(--rose);
}

.foot-copy {
  font-size: 12px;
  color: var(--muted);
}
```

--------------------------------

### Voice Option Styling (CSS)

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

Styles for the voice option component, including active and hover states. It defines layout, borders, background colors, and pseudo-elements for visual feedback. Dependencies include CSS variables like --ivory-dark, --rose-light, --rose-pale, --rose, --serif, --charcoal-2.

```css
.voice-option {
  background: white;
  padding: 22px 26px;
  border: 1px solid var(--ivory-dark);
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.voice-option.active, .voice-option:hover {
  border-color: var(--rose-light);
  background: var(--rose-pale);
}

.voice-option.active::after {
  content: '✓';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--rose);
}
```

--------------------------------

### JavaScript for Intersection Observer Animations

Source: https://context7.com/muktargoni1/sweetly.html/llms.txt

This JavaScript code utilizes the Intersection Observer API to create scroll-triggered entrance animations for elements with the 'reveal' class. It observes elements and adds an 'in' class when they enter the viewport, triggering CSS transitions for a smooth reveal effect. The CSS defines the initial hidden state and the final visible state with transitions.

```javascript
const obs = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add('in');
  });
}, { threshold: 0.1 });

document.querySelectorAll('.reveal').forEach(el => obs.observe(el));

// CSS animation classes
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.12s; }
.reveal-d2 { transition-delay: 0.24s; }
.reveal-d3 { transition-delay: 0.36s; }
```

--------------------------------

### Waitlist Form Enter Key Submission (JavaScript)

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

This JavaScript code enables form submission via the Enter key for the waitlist form. It attaches an event listener to the name and email input fields, triggering the `handleWaitlist` function when the Enter key is pressed.

```javascript
['wl-name','wl-email'].forEach(id => {
  document.getElementById(id).addEventListener('keydown', e => {
    if (e.key === 'Enter') handleWaitlist();
  });
});
```

--------------------------------

### Privacy Information Block Styling (CSS)

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

Styles for privacy information blocks, designed to be displayed side-by-side or wrapped on smaller screens. It includes styling for icons, text, and uses CSS variables for colors.

```css
.priv-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.priv-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.priv-text strong {
  font-size: 13px;
  color: var(--charcoal);
  display: block;
  margin-bottom: 2px;
}

.priv-text span {
  font-size: 12px;
  color: var(--muted);
}
```

--------------------------------

### Hero Section Styling and Animations

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

This CSS defines the layout and appearance of the hero section, including a full viewport height and padding. It features a radial gradient glow effect with a 'breathe' animation and styles for the hero content such as headings, body text, and call-to-action buttons. Elements are animated to fade in and move upwards.

```css
/* HERO */
.hero {
  min-height: 100vh;
  padding: 0 64px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  width: 760px;
  height: 760px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--rose-pale) 0%, transparent 68%);
  right: -180px;
  top: 50%;
  transform: translateY(-50%);
  animation: breathe 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe {
  0%,100% {
    opacity: 0.65;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-53%) scale(1.05);
  }
}
.hero-content {
  max-width: 680px;
  position: relative;
  z-index: 2;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 36px;
  opacity: 0;
  animation: up 1s 0.6s forwards;
}
.hero-eyebrow::before {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--rose);
}
h1 {
  font-family: var(--serif);
  font-size: clamp(52px, 6.5vw, 96px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 32px;
  opacity: 0;
  animation: up 1s 0.8s forwards;
}
h1 em {
  font-style: italic;
  color: var(--rose);
}
.hero-body {
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
  font-weight: 300;
  max-width: 480px;
  margin-bottom: 52px;
  opacity: 0;
  animation: up 1s 1s forwards;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  opacity: 0;
  animation: up 1s 1.15s forwards;
}
.btn-primary {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 17px 40px;
  background: var(--charcoal);
  color: var(--ivory);
  border: none;
  cursor: pointer;
  transition: background 0.35s;
  text-decoration: none;
  display: inline-block;
}
.btn-primary:hover {
  background: var(--rose);
}
.hero-micro {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
```

--------------------------------

### CSS Animations for Element Reveal

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

Defines CSS keyframes and classes for animating element appearance. The 'up' keyframes control the fade-in and slide-up effect, while 'reveal' and 'reveal-in' classes manage the initial state and active state of the animation. 'reveal-d1', 'reveal-d2', and 'reveal-d3' provide staggered delays for sequential animations.

```css
/* ANIMATIONS */
@keyframes up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s ease, transform 0.85s ease;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-d1 {
  transition-delay: 0.12s;
}

.reveal-d2 {
  transition-delay: 0.24s;
}

.reveal-d3 {
  transition-delay: 0.36s;
}
```

--------------------------------

### Call to Action Section Styling (CSS)

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

Styles for a call-to-action section, featuring centered text, padding, and a glowing radial gradient effect. It uses absolute positioning for the glow effect and CSS variables for colors. The overflow is hidden to contain the glow.

```css
.cta-section {
  text-align: center;
  padding: 130px 64px;
  position: relative;
  overflow: hidden;
}

.cta-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, v
```

--------------------------------

### CSS Custom Properties for Design System

Source: https://context7.com/muktargoni1/sweetly.html/llms.txt

This CSS code defines the design system's color palette and font stack using CSS custom properties. These variables ensure consistent theming throughout the application, utilizing an ivory and rose color scheme with specified serif and sans-serif fonts.

```css
:root {
  --ivory:      #F6F2ED;
  --ivory-mid:  #EDE7DD;
  --ivory-dark: #E0D8CC;
  --charcoal:   #1B1917;
  --charcoal-2: #332F2B;
  --rose:       #B87074;
  --rose-light: #D4A5A8;
  --rose-pale:  #F0E3E4;
  --muted:      #837D77;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', sans-serif;
}
```

--------------------------------

### CSS for Form Fields within Modal

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

Styles for input fields and labels within the modal. The '.field' class provides spacing. '.field label' styles the uppercase, spaced-out labels. '.field input' styles the input elements with borders, padding, and focus states, ensuring a consistent look and feel. The '.modal-sub' button styles the submit button with a charcoal background and hover effect.

```css
.modal h3 {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 300;
  margin-bottom: 10px;
}

.modal h3 em {
  font-style: italic;
  color: var(--rose);
}

.modal p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 30px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.field input {
  width: 100%;
  border: 1px solid var(--ivory-dark);
  background: white;
  padding: 14px 16px;
  font-size: 14px;
  font-family: var(--sans);
  color: var(--charcoal);
  outline: none;
  transition: border-color 0.3s;
}

.field input:focus {
  border-color: var(--rose-light);
}

.modal-sub {
  width: 100%;
  margin-top: 10px;
  background: var(--charcoal);
  color: var(--ivory);
  border: none;
  padding: 16px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s;
}

.modal-sub:hover {
  background: var(--rose);
}
```

--------------------------------

### CSS Keyframe Animations

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

This CSS code defines keyframe animations used within the project. The 'up' animation provides a fade-in and slide-up effect, while the 'breathe' animation creates a pulsating glow effect for visual elements. These animations are applied to various elements to enhance user experience.

```css
@keyframes up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes breathe {
  0%,100% {
    opacity: 0.65;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-53%) scale(1.05);
  }
}
```

--------------------------------

### Interactive Voice Option Selection (JavaScript)

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

This JavaScript code manages the selection of voice options. When a 'voice-option' element is clicked, it removes the 'active' class from all other options and adds it to the clicked element, providing a visual indication of the currently selected style.

```javascript
document.querySelectorAll('.voice-option').forEach(opt => {
  opt.addEventListener('click', () => {
    document.querySelectorAll('.voice-option').forEach(o => o.classList.remove('active'));
    opt.classList.add('active');
  });
});
```

--------------------------------

### JavaScript for Voice Style Selector Interaction

Source: https://context7.com/muktargoni1/sweetly.html/llms.txt

This JavaScript code handles the interaction for a voice style selector. It adds an 'active' class to the selected voice option and removes it from others when clicked. The associated HTML structure defines the individual voice options, each containing a label and a sample message.

```javascript
document.querySelectorAll('.voice-option').forEach(opt => {
  opt.addEventListener('click', () => {
    document.querySelectorAll('.voice-option').forEach(o => o.classList.remove('active'));
    opt.classList.add('active');
  });
});

// HTML structure
<div class="voice-option active">
  <div class="vo-label">Warm &amp; tender</div>
  <div class="vo-msg">"Good morning, love. I hope today treats you gently."</div>
</div>
```

--------------------------------

### Navigation Bar Styling and Scroll Animation

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

This CSS styles the navigation bar, setting its initial position to fixed at the top. It includes styles for the logo, navigation links, and a button. A 'scrolled' class is defined to alter the background and backdrop-filter when the user scrolls, creating a dynamic effect.

```css
/* NAV */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 26px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.5s, backdrop-filter 0.5s;
}
nav.scrolled {
  background: rgba(246,242,237,0.9);
  backdrop-filter: blur(14px);
}
.logo {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--charcoal);
  opacity: 0;
  animation: up 0.9s 0.1s forwards;
}
.logo em {
  font-style: normal;
  color: var(--rose);
}
.nav-mid {
  display: flex;
  gap: 44px;
  list-style: none;
  opacity: 0;
  animation: up 0.9s 0.25s forwards;
}
.nav-mid a {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal-2);
  text-decoration: none;
  transition: color 0.3s;
}
.nav-mid a:hover {
  color: var(--rose);
}
.nav-btn {
  opacity: 0;
  animation: up 0.9s 0.35s forwards;
}
.btn-soft {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 11px 26px;
  border: 1px solid var(--charcoal);
  background: transparent;
  color: var(--charcoal);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
  display: inline-block;
}
.btn-soft:hover {
  background: var(--charcoal);
  color: var(--ivory);
}
```

--------------------------------

### HTML Navigation Bar with Scroll Styling

Source: https://context7.com/muktargoni1/sweetly.html/llms.txt

This HTML snippet defines the navigation bar for the Sweetly application. It includes links to different sections of the page and a call-to-action button. The navigation is designed to have scroll-aware styling, indicated by the 'nav' ID.

```html
<!-- Navigation with scroll-aware styling -->
<nav id="nav">
  <div class="logo">Sweetly<em>.</em></div>
  <ul class="nav-mid">
    <li><a href="#why">The Problem</a></li>
    <li><a href="#reminders">Reminders</a></li>
    <li><a href="#pricing">Pricing</a></li>
  </ul>
  <div class="nav-btn">
    <a href="#waitlist" class="btn-soft">Try free for 7 days</a>
  </div>
</nav>
```

--------------------------------

### Section Base Styling

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

This CSS provides base styling for section elements, defining consistent padding and establishing an 'eyebrow' element style. The eyebrow is styled as an uppercase, rose-colored text with a preceding horizontal rule, commonly used for section titles.

```css
/* SECTION BASE */
section {
  padding: 110px 64px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content:'';
  width: 28px;
  height: 1px;
  background: var(--rose);
}
h2 {
```

--------------------------------

### JavaScript for Waitlist Form Submission

Source: https://context7.com/muktargoni1/sweetly.html/llms.txt

This JavaScript function handles the submission of the waitlist form to Formspree. It validates the name and email inputs, then sends a POST request with the data. It includes UI feedback for loading states and error handling, displaying a success message or an error prompt.

```javascript
async function handleWaitlist() {
  const name = document.getElementById('wl-name').value.trim();
  const email = document.getElementById('wl-email').value.trim();
  if (!name || !email) return;

  const btn = document.querySelector('#waitlist-form button');
  btn.textContent = 'Saving...';
  btn.disabled = true;

  try {
    const res = await fetch('https://formspree.io/f/mreaowgw', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify({ name, email })
    });

    if (res.ok) {
      document.getElementById('waitlist-form').style.display = 'none';
      document.getElementById('waitlist-success').style.display = 'block';
    } else {
      btn.textContent = 'Something went wrong — try again';
      btn.disabled = false;
    }
  } catch {
    btn.textContent = 'Something went wrong — try again';
    btn.disabled = false;
  }
}

// Enable Enter key submission
['wl-name','wl-email'].forEach(id => {
  document.getElementById(id).addEventListener('keydown', e => {
    if (e.key === 'Enter') handleWaitlist();
  });
});
```

--------------------------------

### Intersection Observer for Element Reveal (JavaScript)

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

This JavaScript snippet utilizes the Intersection Observer API to add an 'in' class to elements with the class 'reveal' when they become visible in the viewport. This is commonly used for scroll-triggered animations or lazy loading effects, improving perceived performance and visual appeal.

```javascript
const obs = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add('in');
  });
}, {
  threshold: 0.1
});
document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
```

--------------------------------

### JavaScript for Scroll-Based Navigation Effect

Source: https://context7.com/muktargoni1/sweetly.html/llms.txt

This JavaScript code implements a scroll-based effect for the navigation bar. When the user scrolls past 50 pixels, a 'scrolled' class is toggled on the navigation element, applying a frosted glass background and blur effect defined in the associated CSS.

```javascript
window.addEventListener('scroll', () => {
  document.getElementById('nav').classList.toggle('scrolled', scrollY > 50);
});

// CSS for scrolled state
nav.scrolled {
  background: rgba(246,242,237,0.9);
  backdrop-filter: blur(14px);
}
```

--------------------------------

### Scroll Navigation Enhancement (JavaScript)

Source: https://github.com/muktargoni1/sweetly.html/blob/main/index.html

This JavaScript code adds a 'scrolled' class to the navigation bar when the user scrolls down more than 50 pixels, allowing for visual changes to the navigation style. It enhances user experience by providing visual feedback on scroll position.

```javascript
window.addEventListener('scroll', () => {
  document.getElementById('nav').classList.toggle('scrolled', scrollY > 50);
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.