@jaimevalasek/aioson 1.5.1 → 1.7.0

package/template/.aioson/skills/design/pt.squarespace.com/.skill-meta.json

@@ -0,0 +1,31 @@
+{
+  "id": "pt.squarespace.com",
+  "name": "Squarespace Design System",
+  "source": "https://pt.squarespace.com/",
+  "extractedAt": "2026-03-31",
+  "theme": "light-dark",
+  "baseUnit": "4px",
+  "referenceSkill": null,
+  "type": "extracted",
+  "designPillars": [
+    "Sharp minimalism — zero border-radius",
+    "Bold typographic hierarchy — Clarkson font family",
+    "High contrast — black/white with teal accents"
+  ],
+  "colors": {
+    "primary": "#000000",
+    "accent": "#1E4C41",
+    "background": "#FFFFFF",
+    "surface": "#F5F5F4"
+  },
+  "fonts": {
+    "display": "Clarkson, Helvetica, sans-serif",
+    "body": "Helvetica Neue, Helvetica, Arial, sans-serif",
+    "serif": "Clarkson Serif, Georgia, serif"
+  },
+  "breakpoints": {
+    "desktop": 1440,
+    "tablet": 768,
+    "mobile": 390
+  }
+}

package/template/.aioson/skills/design/pt.squarespace.com/SKILL.md

@@ -0,0 +1,66 @@
+# Squarespace (pt.squarespace.com) Design System
+
+> Extracted from https://pt.squarespace.com/ on 2026-03-31.
+> Deep analysis completed 2026-04-01 via static file extraction (CSS/JS/fonts/media from saved site).
+> Visual clone skill — do not use in unrelated projects without adapting the tokens.
+
+## Identity
+
+**Theme:** light (with dark hero/footer sections)
+**Personality:** Clean, professional SaaS aesthetic with strong typographic hierarchy, minimal decoration, and bold black-white contrast punctuated by occasional teal accents.
+
+## Design pillars
+
+1. **Sharp minimalism** — Zero border-radius throughout; geometric precision dominates
+2. **Bold typographic hierarchy** — Large headlines (Clarkson 300), clear size differentiation
+3. **High contrast** — Black and white with teal accent; no gradients, no shadows
+
+## Animation philosophy
+
+**CSS-first, zero third-party libraries.** No GSAP, no Framer Motion, no AOS, no Lottie.
+All animations are pure `@keyframes` + class toggling + `IntersectionObserver`.
+
+Signature effects:
+- CTA hover: `mix-blend-mode: difference` pseudo-element (not a color transition)
+- Mobile menu: `clip-path: polygon()` swipe animation (not `translateX`)
+- Link underline: `background-position` animated on two linear-gradients
+- Scroll reveals: `IntersectionObserver` adds `.in-view`, CSS handles transition
+
+## Local assets available
+
+These files were extracted from the saved site and are ready to use directly:
+
+**Fonts** (`public/fonts/`):
+- `clarkson-300.woff2` — Clarkson Light (hero headlines)
+- `clarkson-400.woff2` — Clarkson Regular (body, nav)
+- `clarkson-500.woff2` — Clarkson Medium (CTAs, labels)
+- `clarkson-serif-300.woff2` — Clarkson Serif Light
+- `clarkson-serif-400.woff2` — Clarkson Serif Regular
+
+**Videos** (`public/videos/pt.squarespace.com/`):
+- `video-desktop.webm` + `.mp4` — Hero background video (1280×720)
+- `video-mobile.webm` + `.mp4` — Hero background video, portrait-optimized
+- `templates.webm` + `.mp4` — Template showcase animation
+- `blueprint-ai.webm` + `.mp4` — AI blueprint feature demo
+- `design-intelligence-3.mp4` — Design intelligence card video
+- `conversion-centered.mp4` — Final CTA section video
+
+> Reference files — replace with your own assets before publishing.
+
+## When to use
+
+Activate when building projects that need a professional, clean SaaS website aesthetic inspired by Squarespace's homepage — minimal, typography-forward, with dark hero sections and teal accents.
+
+## Activation
+
+Load `references/design-tokens.md` before writing any component.
+Load `references/motion.md` before implementing any animation or interaction.
+Load `references/components.md` to get the real class naming conventions and hover mechanics.
+
+## Skill files
+
+- `references/design-tokens.md` — CSS custom properties (colors, typography, spacing, real easing curves)
+- `references/components.md` — Component patterns, real class names, CTA hover mechanics
+- `references/patterns.md` — Page layout patterns with real section IDs
+- `references/motion.md` — All 12 extracted @keyframes, exact timings, animation usage map
+- `references/websites.md` — Complete page topology including all 11 sections

package/template/.aioson/skills/design/pt.squarespace.com/references/components.md

@@ -0,0 +1,368 @@
+# Components — pt.squarespace.com
+
+## Button
+
+### Variants
+
+| Variant | Description | Token Usage |
+|---------|-------------|-------------|
+| `primary` | Solid white bg, dark text | `bg: white`, `color: black` |
+| `secondary` | Ghost/outline style | `border: 1px solid var(--border)` |
+| `inline` | Text with arrow suffix | `color: var(--text-primary)` |
+| `cta--light` | For dark backgrounds | `bg: white`, `color: black` |
+| `cta--dark` | For light backgrounds | `bg: black`, `color: white` |
+
+### States
+
+- **default:** Base colors per variant
+- **hover (primary/secondary):** `mix-blend-mode: difference` pseudo-element scales in — NOT a color transition. The white pseudo-element with blend mode creates a color inversion effect.
+- **active:** Slight scale (0.98) if any
+- **disabled:** `opacity: 0.5`, `pointer-events: none`
+- **loading:** Spinner or text change
+
+### CTA Hover Mechanic — mix-blend-mode: difference
+
+**This is Squarespace's real CTA effect.** Do NOT implement as a simple `background-color` transition:
+
+```css
+.cta--primary,
+.cta--secondary {
+  position: relative;
+  overflow: hidden;
+}
+
+.cta--primary::after,
+.cta--secondary::after {
+  content: '';
+  mix-blend-mode: difference;
+  background-color: white;
+  transform-origin: 0;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: scaleX(0);
+  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.cta--primary:hover::after,
+.cta--secondary:hover::after {
+  transform: scaleX(1);
+}
+```
+
+**Effect:** The white fill + `difference` blend mode inverts the button colors — a black button with white text becomes white with black text without any `color:` change.
+
+### DOM Structure
+```html
+<a class="cta cta--primary cta--light">Button Text</a>
+<!-- or -->
+<button class="cta cta--primary">Button Text</button>
+```
+
+### Tokens Applied
+- `font-family: var(--font-display)`
+- `font-size: var(--text-sm)`
+- `font-weight: var(--font-medium)`
+- `padding: var(--space-3) var(--space-4)`
+- `border-radius: var(--radius-none)` (0px)
+- `transition: var(--transition-all)`
+- `cursor: pointer`
+
+### Tertiary CTA — Sliding Underline (.cta--tertiary)
+
+Text links with an animated dual-gradient underline. The underline slides in from left on hover and out to right on mouse-leave:
+
+```css
+.cta--tertiary {
+  background-image:
+    linear-gradient(currentColor, currentColor),
+    linear-gradient(currentColor, currentColor);
+  background-size: 100% 1px, 0% 1px;
+  background-repeat: no-repeat;
+  background-position: -200% 100%, -100% 100%;
+  animation: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards ctaUnderlineSlideOut;
+}
+
+.cta--tertiary:hover {
+  animation: 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards ctaUnderlineSlideIn;
+}
+```
+
+Requires `@keyframes ctaUnderlineSlideIn / ctaUnderlineSlideOut` from `motion.md`.
+
+---
+
+## Navigation
+
+### Variants
+
+| Variant | Description |
+|---------|-------------|
+| `desktop` | Horizontal links, logo left, CTAs right |
+| `mobile` | Hamburger + slide-out drawer |
+
+### States
+
+- **default:** Transparent background initially
+- **scrolled:** Solid background (e.g. `bg: white`) kicks in after ~50px scroll
+- **mobile-open:** Hamburger becomes X, drawer wipes in from right via `clip-path` animation (NOT `translateX`)
+
+### Mobile Menu — clip-path Swipe
+
+The mobile drawer does NOT use `transform: translateX`. It uses `clip-path: polygon()` animation:
+
+```css
+/* Open */
+.global-navigation__mobile-menu--open {
+  animation: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards swipeIn;
+}
+
+/* Close */
+.global-navigation__mobile-menu--close {
+  animation: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards swipeOut;
+}
+```
+
+Requires `@keyframes swipeIn / swipeOut` from `motion.md`. The menu covers full viewport, background `rgb(0, 0, 0)` with white links.
+
+### Accordion (Mobile Nav)
+
+Sub-menus use CSS grid transition — no JS height calculation:
+
+```css
+.global-navigation__accordion-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.7s cubic-bezier(0.165, 0.84, 0.44, 1),
+              padding 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+.global-navigation__accordion-content--open {
+  grid-template-rows: 1fr;
+}
+```
+
+### DOM Structure
+```html
+<header class="global-navigation">
+  <a class="global-navigation__logo-link">Logo</a>
+  <nav class="global-navigation__links">
+    <a class="cta cta--inline">Products</a>
+    <a class="cta cta--inline">Solutions</a>
+    <button class="cta cta--inline">Resources</button>
+  </nav>
+  <div class="global-navigation__cta">
+    <a class="cta cta--inline">Login</a>
+    <a class="cta cta--primary cta--light">Get Started</a>
+  </div>
+  <button class="global-navigation__hamb">☰</button>
+</header>
+```
+
+### Tokens Applied
+- `font-family: var(--font-body)`
+- `font-size: var(--text-base)`
+- `font-weight: var(--font-normal)`
+- `padding: var(--space-4) var(--space-4)`
+- `gap: var(--space-4)`
+- `transition: top var(--transition-medium) var(--ease-sqsp-cta)`
+
+---
+
+## Link
+
+### Variants
+
+| Variant | Description | Context |
+|---------|-------------|---------|
+| `nav-link` | Navigation links | Header |
+| `footer-link` | Footer links | Footer |
+| `cta--inline` | Inline CTA with arrow | Various |
+
+### States
+
+- **default:** `color: var(--text-primary)` or `var(--text-inverse)`
+- **hover:** `color: var(--text-muted)`, optional underline
+
+### Tokens Applied
+- `font-family: var(--font-body)`
+- `font-size: var(--text-base)`
+- `font-weight: var(--font-normal)`
+- `transition: var(--transition-colors)`
+
+---
+
+## Input
+
+### Variants
+
+| Variant | Description |
+|---------|-------------|
+| `text` | Standard text input |
+| `domain` | Domain search input with search button |
+
+### States
+
+- **default:** `border: 1px solid var(--border)`
+- **focus:** Border color changes to accent
+- **error:** Border color `var(--error)`
+- **disabled:** `opacity: 0.5`
+
+### DOM Structure
+```html
+<div class="input-wrapper">
+  <input type="text" class="input input--domain" placeholder="Digite seu domínio">
+</div>
+```
+
+### Tokens Applied
+- `background: var(--bg-base)`
+- `border: 1px solid var(--border)`
+- `border-radius: var(--radius-none)`
+- `padding: var(--space-3)`
+- `font-family: var(--font-body)`
+- `font-size: var(--text-base)`
+
+---
+
+## Card
+
+### Variants
+
+| Variant | Description |
+|---------|-------------|
+| `feature-card` | Icon + title + description |
+| `stat-card` | Large number + label |
+| `pricing-card` | Price + features + CTA |
+
+### States
+
+- **default:** No shadow, flat design
+- **hover:** May have subtle color shift
+
+### Tokens Applied
+- `background: var(--bg-surface)` or transparent
+- `border-radius: var(--radius-none)`
+- `box-shadow: var(--shadow-sm)` (none typically)
+- `padding: var(--space-5)`
+
+---
+
+## Card Carousel (Platform / One Platform section)
+
+A horizontally scrollable row of cards that loop. Each card holds a `<video>` or `<img>` with an absolute text label.
+
+### DOM Structure
+```html
+<div class="card-carousel">
+  <div class="card-carousel__track">
+    <div class="card-carousel__card">
+      <video autoplay muted loop playsinline preload="none">
+        <source src="/videos/website-editing.webm" type="video/webm">
+      </video>
+      <span class="card-carousel__label">Edição de website</span>
+    </div>
+    <!-- repeat cards -->
+  </div>
+</div>
+```
+
+### Key CSS
+```css
+.card-carousel__card {
+  position: relative;
+  flex-shrink: 0;
+  border-radius: var(--radius-none);
+  overflow: hidden;
+}
+
+.card-carousel__label {
+  position: absolute;
+  bottom: var(--space-4);
+  left: var(--space-4);
+  font-family: var(--font-display);
+  font-size: var(--text-sm);
+  color: var(--text-inverse);
+  background: rgba(0, 0, 0, 0.55);
+  padding: var(--space-2) var(--space-3);
+}
+```
+
+Cards use `preload="none"` — only hero video is eager-loaded.
+
+---
+
+## Section
+
+### Hero Section
+- Full viewport dark background (`background: var(--bg-inverse)`)
+- Video background: `<video autoPlay muted loop playsInline preload="auto">` with WebM + MP4 sources
+- Dark overlay: `rgba(0, 0, 0, 0.52)` absolute layer over video
+- Centered content
+- Large headline: `font-family: var(--font-display)`, `font-size: var(--text-3xl)`, `font-weight: var(--font-light)`
+- Single CTA button (`.cta--primary.cta--light`)
+
+### Content Section
+- Max-width container
+- Light background
+- H2 headline
+- Grid or flex content layout
+
+### CTA Section
+- Colored background (teal or dark)
+- Centered headline + CTA
+- White text
+
+### Footer
+- Dark background (`bg: var(--bg-inverse)`)
+- 4-column grid of links
+- Bottom row with legal text
+- `padding: var(--space-16) var(--space-8)`
+
+---
+
+## Typography Components
+
+### Display Heading (H1)
+```css
+font-family: var(--font-display);
+font-size: var(--text-3xl);
+font-weight: var(--font-light);
+color: var(--text-inverse);
+line-height: var(--leading-tight);
+```
+
+### Section Heading (H2)
+```css
+font-family: var(--font-display);
+font-size: var(--text-xl);
+font-weight: var(--font-normal);
+color: var(--text-primary);
+line-height: var(--leading-normal);
+```
+
+### Serif Heading (H3)
+```css
+font-family: var(--font-serif);
+font-size: var(--text-lg);
+font-weight: var(--font-normal);
+color: var(--text-inverse);
+```
+
+### Body Text
+```css
+font-family: var(--font-body);
+font-size: var(--text-base);
+font-weight: var(--font-normal);
+color: var(--text-primary);
+line-height: var(--leading-relaxed);
+```
+
+### Caption/Muted
+```css
+font-family: var(--font-body);
+font-size: var(--text-sm);
+font-weight: var(--font-normal);
+color: var(--text-muted);
+```

package/template/.aioson/skills/design/pt.squarespace.com/references/design-tokens.md

@@ -0,0 +1,150 @@
+# Design Tokens — pt.squarespace.com
+
+```css
+:root {
+  /* === COLORS === */
+
+  /* Background hierarchy */
+  --bg-base: rgb(255, 255, 255);        /* White page background */
+  --bg-surface: rgb(245, 245, 244);     /* Off-white section background */
+  --bg-elevated: rgb(223, 221, 216);    /* Light gray surfaces */
+  --bg-inverse: rgb(0, 0, 0);           /* Black — hero, footer */
+  --bg-charcoal: rgb(26, 26, 26);       /* Dark sections */
+  --bg-teal: rgb(30, 76, 65);           /* Teal accent sections */
+
+  /* Text hierarchy */
+  --text-primary: rgb(0, 0, 0);         /* Primary text on light */
+  --text-muted: rgb(137, 137, 137);    /* Secondary/muted text */
+  --text-inverse: rgb(255, 255, 255);  /* Text on dark backgrounds */
+  --text-light-gray: rgb(221, 221, 221);/* Light gray text */
+
+  /* Brand / Accent */
+  --accent: rgb(30, 76, 65);            /* Teal accent color */
+  --accent-hover: rgb(50, 50, 50);      /* Darker shade for hover */
+
+  /* Borders */
+  --border: rgb(221, 221, 221);         /* Default border color */
+  --border-dark: rgb(50, 50, 50);       /* Dark section borders */
+
+  /* Semantic */
+  --success: rgb(30, 76, 65);           /* Teal as success */
+  --error: rgb(32, 6, 3);               /* Dark red for errors */
+  --warning: rgb(137, 137, 137);       /* Gray for warnings */
+
+  /* Overlays */
+  --overlay-light: rgba(255, 255, 255, 0.1);
+  --overlay-dark: rgba(0, 0, 0, 0.52);  /* Hero video overlay — real value from index.css */
+
+  /* === TYPOGRAPHY === */
+
+  /* Font families */
+  --font-display: 'Clarkson', Helvetica, sans-serif;
+  --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  --font-serif: 'Clarkson Serif', Georgia, serif;
+  --font-mono: 'Courier New', monospace;
+
+  /* Type scale (based on observed values) */
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 20px;
+  --text-xl: 26px;
+  --text-2xl: 34px;
+  --text-3xl: 42px;  /* Hero headline size */
+
+  /* Font weights */
+  --font-light: 300;
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+
+  /* Line heights */
+  --leading-tight: 1.2;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.75;
+
+  /* Letter spacing */
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+
+  /* === SPACING === */
+
+  /* Base unit: 4px */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 24px;
+  --space-6: 32px;
+  --space-8: 48px;
+  --space-10: 64px;
+  --space-12: 96px;
+  --space-16: 128px;
+  --space-20: 160px;
+
+  /* Section-specific spacing */
+  --section-padding-y: 80px;
+  --section-padding-x: 24px;
+  --hero-padding-y: 120px;
+
+  /* === RADIUS === */
+
+  /* Sharp corners — signature Squarespace aesthetic */
+  --radius-none: 0px;                  /* Default — sharp corners */
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius-full: 9999px;               /* Only for pills/avatars if ever needed */
+
+  /* === SHADOWS === */
+
+  /* Minimal shadow usage — only when functionally necessary */
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+  --shadow-xl: none;
+
+  /* === MOTION === */
+
+  /* Timing functions — verbatim from pt.squarespace.com/css/index.css */
+  --ease-default: cubic-bezier(0.455, 0.03, 0.515, 0.955);  /* General transitions */
+  --ease-sqsp-reveal: cubic-bezier(0.23, 1, 0.32, 1);        /* Scroll reveals, stats — Squarespace signature ease */
+  --ease-sqsp-cta: cubic-bezier(0.645, 0.045, 0.355, 1);     /* CTA hover, mobile menu, dropdowns */
+  --ease-sqsp-menu: cubic-bezier(0.165, 0.84, 0.44, 1);      /* Mobile menu swipe, accordion */
+  --ease-out: ease-out;
+  --ease-in: ease-in;
+  --ease-in-out: ease-in-out;
+
+  /* Durations */
+  --transition-fast: 100ms;    /* Micro color changes */
+  --transition-base: 200ms;    /* Standard hover */
+  --transition-medium: 300ms;  /* Nav dropdowns, CTA hover overlay */
+  --transition-slow: 400ms;    /* Layout transitions */
+  --transition-reveal: 800ms;  /* Scroll-triggered section reveals */
+  --transition-reveal-slow: 1200ms;  /* Stats card reveal */
+
+  /* Full transition shorthand */
+  --transition-all: all var(--transition-medium) var(--ease-default);
+  --transition-colors: color var(--transition-base) var(--ease-default),
+                       background-color var(--transition-base) var(--ease-default);
+
+  /* === LAYOUT === */
+
+  --container-max: 1200px;
+  --container-narrow: 800px;
+  --grid-gap: 32px;
+  --global-nav-height: 80px;    /* Sticky nav height — used for hero padding-top offset */
+  --grid-gutter-width: 40px;    /* Column gutter observed in content sections */
+
+  /* === Z-INDEX === */
+
+  --z-base: 0;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-toast: 500;
+}
+```