@jaimevalasek/aioson 1.6.0 → 1.7.2

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

@@ -0,0 +1,270 @@
+# Motion — pt.squarespace.com
+
+## Motion Philosophy
+
+CSS-first, no third-party animation libraries. All animations implemented via `@keyframes` + class toggling + `IntersectionObserver`. Fast micro-interactions (300–500ms), slow scroll reveals (800–1200ms). Easing is smooth deceleration (`cubic-bezier(0.23, 1, 0.32, 1)`) for reveals and power (`cubic-bezier(0.645, 0.045, 0.355, 1)`) for CTA interactions.
+
+**No GSAP. No Framer Motion. No AOS. No Lottie.** Pure CSS + vanilla JS.
+
+---
+
+## Timing Functions
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--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 (the 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` | Exit animations |
+
+## Durations
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--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 |
+
+---
+
+## Extracted @keyframes (verbatim from pt.squarespace.com/css/index.css)
+
+### fadeIn
+```css
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  to { opacity: 1; }
+}
+```
+**Used on:** `.stats__card` — `1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards`
+
+---
+
+### ctaUnderlineSlideIn / ctaUnderlineSlideOut
+```css
+@keyframes ctaUnderlineSlideIn {
+  0% { background-position: -200% 100%, -100% 100%; }
+  to { background-position: 0 100%, 100% 100%; }
+}
+@keyframes ctaUnderlineSlideOut {
+  0% { background-position: 0 100%, 100% 100%; }
+  to { background-position: 210% 100%, 300% 100%; }
+}
+```
+**Used on:** `.cta--tertiary` (text links with sliding underline)
+- Rest state: `0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards ctaUnderlineSlideOut`
+- Hover state: `0.5s cubic-bezier(0.645, 0.045, 0.355, 1) forwards ctaUnderlineSlideIn`
+- Requires `background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor)`
+
+---
+
+### swipeIn / swipeOut
+```css
+@keyframes swipeIn {
+  0% { clip-path: polygon(101% 0%, 100% 0%, 101% 100%, 116% 100%); }
+  to { clip-path: polygon(0% 0%, 101% 0%, 101% 101%, 0% 101%); }
+}
+@keyframes swipeOut {
+  0% { clip-path: polygon(0% 0%, 101% 0%, 101% 101%, 0% 101%); }
+  to { clip-path: polygon(105% 0%, 100% 0%, 101% 100%, 100% 100%); }
+}
+```
+**Used on:** `.global-navigation__mobile-menu`
+- Open: `0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards swipeIn`
+- Close: `0.6s cubic-bezier(0.165, 0.84, 0.44, 1) forwards swipeOut`
+- **Signature effect:** The mobile drawer "wipes" in from the right using a clip-path polygon animation — not a `translateX` slide.
+
+---
+
+### rotateAnimation
+```css
+@keyframes rotateAnimation {
+  0%   { transform: rotate(0); }
+  22%  { transform: rotate(240deg); }
+  44%  { transform: rotate(480deg); }
+  66%  { transform: rotate(720deg); }
+  to   { transform: rotate(720deg); }
+}
+```
+**Used on:** `.ai-dots` — `14s cubic-bezier(0.645, 0.045, 0.355, 1) infinite`
+- Non-linear rotation: accelerates in bursts, pauses at multiples of 240°.
+
+---
+
+### scaleAnimationLarge / Medium / Small (AI dots morphing)
+```css
+@keyframes scaleAnimationLarge {
+  0%  { transform: var(--defaultTransform); }
+  11% { transform: scale(0.403) translate(-20%, -30%); }
+  22% { transform: scale(0.403) translate(-20%, -30%); }
+  33% { transform: scale(0.64) translate(40%, -45%); }
+  44% { transform: scale(0.64) translate(40%, -45%); }
+  55% { transform: var(--defaultTransform); }
+  to  { transform: var(--defaultTransform); }
+}
+@keyframes scaleAnimationMedium {
+  0%  { transform: var(--defaultTransform); }
+  11% { transform: scale(1.56) translate(-10%, -33%); }
+  22% { transform: scale(1.56) translate(-10%, -33%); }
+  33% { transform: scale(0.63) translate(10%, -85%); }
+  44% { transform: scale(0.63) translate(10%, -85%); }
+  55% { transform: var(--defaultTransform); }
+  to  { transform: var(--defaultTransform); }
+}
+@keyframes scaleAnimationSmall {
+  0%  { transform: var(--defaultTransform); }
+  11% { transform: scale(1.59) translate(-45%, -30%); }
+  22% { transform: scale(1.59) translate(-45%, -30%); }
+  33% { transform: scale(2.48) translate(5%, -15%); }
+  44% { transform: scale(2.48) translate(5%, -15%); }
+  55% { transform: var(--defaultTransform); }
+  to  { transform: var(--defaultTransform); }
+}
+```
+**Used on:** `.ai-dots__dot--large/medium/small` — `var(--defaultTiming) linear infinite`
+- Three dots orbit and morph around each other using coordinated scale+translate.
+- `--defaultTransform` is the rest position (typically `scale(1) translate(0, 0)`).
+
+---
+
+### flip
+```css
+@keyframes flip {
+  0%    { transform: rotateY(0); }
+  12.5% { transform: rotateY(0); }
+  50%   { transform: rotateY(180deg); }
+  62.5% { transform: rotateY(180deg); }
+  to    { transform: rotate(180deg); }
+}
+```
+**Used on:** `.loader__square` — `1.6s cubic-bezier(0.66, 0, 0.34, 1) infinite`
+- Loading state animation.
+
+---
+
+### supportHoverArrow
+```css
+@keyframes supportHoverArrow {
+  0%       { transform: translate(0); }
+  20%, 30% { transform: translate(2px); }
+  70%, 80% { transform: translate(-2px); }
+  to       { transform: translate(0); }
+}
+```
+**Used on:** `.support__links-cta-arrow--hovered` — `1.1s linear infinite`
+- Subtle shimmy/vibration on the support section arrow when hovered.
+
+---
+
+## CTA Hover Overlay Effect (not @keyframes — pure CSS)
+
+The primary and secondary CTA buttons use a `mix-blend-mode: difference` overlay that scales in on hover:
+
+```css
+.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 `mix-blend-mode: difference` + white fill creates an inversion effect rather than a simple color change — the button appears to "flip" colors on hover.
+
+---
+
+## Scroll Reveal Pattern
+
+No third-party library. IntersectionObserver adds `.in-view` class:
+
+```typescript
+const observer = new IntersectionObserver(
+  entries => entries.forEach(e => {
+    if (e.isIntersecting) e.target.classList.add('in-view');
+  }),
+  { threshold: 0.15 }
+);
+document.querySelectorAll('.reveal, .reveal-stagger').forEach(el => observer.observe(el));
+```
+
+CSS handles the animation:
+```css
+.reveal {
+  opacity: 0;
+  transform: translateY(16px);
+  transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1),
+              transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
+}
+.reveal.in-view { opacity: 1; transform: translateY(0); }
+```
+
+Stats cards use staggered delays (0.1s increments per child).
+
+---
+
+## Video Background Pattern
+
+Hero section uses `<video autoplay muted loop playsInline preload="auto">` with responsive sources:
+
+```html
+<video autoplay muted loop playsinline preload="auto">
+  <source src="video-desktop.webm" type="video/webm">
+  <source src="video-desktop.mp4" type="video/mp4">
+</video>
+```
+
+- Mobile: swap to `video-mobile.webm/mp4` (lighter, portrait-optimized)
+- Overlay: `rgba(0, 0, 0, 0.52)` dark layer over video
+- Card carousel videos: `preload="none"` (only hero is eager-loaded)
+
+---
+
+## Navigation Accordion (mobile)
+
+Mobile nav accordion uses CSS grid transition for smooth open/close:
+
+```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;
+}
+```
+
+`grid-template-rows: 0fr → 1fr` is the modern CSS accordion technique (no JS height calculation needed).
+
+---
+
+## Reduced Motion
+
+All animations respect `prefers-reduced-motion`:
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+Mobile menu `.animation: none` override also applied explicitly.

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

@@ -0,0 +1,189 @@
+# Patterns — pt.squarespace.com
+
+## Page Layout Patterns
+
+### Homepage Structure
+
+```
+┌─────────────────────────────────────┐
+│ Header (sticky, transparent → solid)│
+├─────────────────────────────────────┤
+│ Hero (full-viewport, dark)          │
+│ - Centered headline                │
+│ - Subtext                           │
+│ - Single CTA                        │
+├─────────────────────────────────────┤
+│ Content Section (light)             │
+│ - H2 headline                       │
+│ - 3-column grid                     │
+├─────────────────────────────────────┤
+│ Content Section (alternating)       │
+│ - Split layout                      │
+├─────────────────────────────────────┤
+│ CTA Section (teal or dark)          │
+│ - Centered headline + CTA           │
+├─────────────────────────────────────┤
+│ Domain Search (light gray)          │
+│ - Input + button inline             │
+├─────────────────────────────────────┤
+│ Stats Row (dark)                    │
+│ - Numbers in row                    │
+├─────────────────────────────────────┤
+│ Support Section (light)             │
+│ - Grid of support options           │
+├─────────────────────────────────────┤
+│ Final CTA (dark teal)               │
+│ - Headline + CTA                    │
+├─────────────────────────────────────┤
+│ Footer (4-column grid + legal)      │
+└─────────────────────────────────────┘
+```
+
+### Responsive Breakpoints
+
+| Breakpoint | Width | Changes |
+|------------|-------|---------|
+| Desktop | 1440px+ | Full layout, 4-col footer |
+| Tablet | 768px | 2-col grids, hamburger nav |
+| Mobile | 390px | Single column, stacked |
+
+---
+
+## Hero Pattern
+
+### Layout
+- **Container:** 100vw × 100vh or min-height
+- **Background:** solid dark (`--bg-inverse: rgb(0,0,0)`)
+- **Content:** centered flex column, max-width container
+
+### Typography
+- **Headline:** Clarkson, 42px, weight 300, white
+- **Subtext:** Clarkson, 26px, weight 400, white
+- **CTA:** 14px weight 500, white bg, black text
+
+### Spacing
+- Vertical padding: 120px+
+- Content gap: 24px
+
+---
+
+## Feature Grid Pattern
+
+### Layout
+- **Container:** max-width 1200px, centered
+- **Grid:** 3 columns on desktop, 2 on tablet, 1 on mobile
+- **Gap:** 32px
+
+### Items
+- Icon (if applicable)
+- Title (H3 or bold)
+- Description (body text)
+- Optional CTA link
+
+---
+
+## CTA Section Pattern
+
+### Layout
+- Full-width container
+- Centered content
+- Max-width 800px
+
+### Colors
+- Background: `--bg-teal: rgb(30, 76, 65)` OR `--bg-inverse`
+- Text: white
+- CTA: white button on dark, black button on light
+
+### Typography
+- Headline: 26px (same as H2)
+- Subtext: 16px
+- Button: 14px weight 500
+
+---
+
+## Footer Pattern
+
+### Layout
+- **Grid:** 4 columns desktop, 2 tablet, 1 mobile
+- **Bottom row:** copyright + legal links
+
+### Columns
+1. Products
+2. Solutions
+3. Resources
+4. Company
+
+### Colors
+- Background: `--bg-inverse` (black)
+- Text: white or `--text-light-gray`
+- Links hover: `--text-muted`
+
+### Typography
+- Column headers: 14px weight 500
+- Links: 14px weight 400
+- Legal: 12px
+
+---
+
+## Domain Search Pattern
+
+### Layout
+- Inline: input + button side by side
+- Mobile: stacked
+
+### Elements
+- Input: max-width 300px
+- Button: "Buscar" or similar
+
+### Colors
+- Background: `--bg-elevated` (rgb(223, 221, 216))
+- Input: white background
+- Border: subtle gray
+
+---
+
+## Stats Row Pattern
+
+### Layout
+- Horizontal flex row
+- Evenly spaced
+- Mobile: wraps to 2×2 grid
+
+### Content
+- Large number (Clarkson, bold)
+- Label below (gray, smaller)
+
+### Colors
+- Background: dark section
+- Numbers: white
+- Labels: light gray
+
+---
+
+## Navigation Pattern
+
+### Desktop
+- Logo: left
+- Links: center (Products, Solutions, Resources)
+- CTAs: right (Login, Get Started)
+
+### Mobile
+- Logo: left
+- Hamburger: right
+- Drawer: slides from right
+
+### Scroll Behavior
+- Starts transparent
+- Adds solid background + shadow after 50px scroll
+
+---
+
+## Content Spacing Scale
+
+| Section Type | Padding Y | Padding X |
+|--------------|-----------|-----------|
+| Hero | 120px+ | 24px |
+| Content | 80px | 24px |
+| CTA | 80px | 24px |
+| Footer | 64px | 24px |
+| Tight | 48px | 24px |

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

@@ -0,0 +1,165 @@
+# Websites — Squarespace Homepage
+
+## Page Topology
+
+```
+1.  Header              — Sticky navigation with transparency transition
+2.  Hero                — Full-viewport dark section with video background + CTA
+3.  Grow Your Business  — Feature grid with icons (6 product areas)
+4.  One Platform        — Platform card carousel (videos + images)
+5.  Get Started         — Teal CTA section with template thumbnails
+6.  Your Domain         — Domain search input
+7.  How To              — Step-by-step how-to guide section
+8.  Customers Served    — Statistics row (large numbers)
+9.  Made With SQSP      — Showcase of customer sites
+10. FAQ                 — Accordion FAQ section
+11. Support             — Support options grid
+12. Conversion          — Final dark CTA section with video
+13. Footer              — 4-column links + legal
+```
+
+## Section Details
+
+### Header
+- **Type:** Sticky navigation
+- **Background:** Transparent initially, solid white on scroll
+- **Content:** Logo (left), Nav links (center), CTAs (right)
+- **Mobile:** Hamburger with drawer
+
+### Hero (#homepage-hero)
+- **Background:** Black `rgb(0, 0, 0)` + `<video>` background + `rgba(0,0,0,0.52)` overlay
+- **Video:** `video-desktop.webm/mp4` (desktop), `video-mobile.webm/mp4` (< 768px)
+- **Height:** ~1007px viewport height
+- **Content:**
+  - H1: "Um site faz acontecer" (`var(--text-3xl)`, `var(--font-light)`, white)
+  - P: "Comece de graça. Não precisa de cartão de crédito." (`var(--text-xl)`, white)
+  - CTA: "Comece já" (`.cta--primary.cta--light` — white button, black text, mix-blend-mode hover)
+
+### Grow Your Business (#grow-your-business)
+- **Background:** White or off-white
+- **Layout:** Content grid
+- **Content:** Feature highlights with icons
+
+### One Platform (#one-platform)
+- **Background:** Off-white `rgb(245, 245, 244)`
+- **Layout:** Split layout (text + visual)
+
+### Get Started (#get-started)
+- **Background:** Off-white `rgb(245, 245, 244)` with rotating template thumbnail cards
+- **Content:** Centered CTA + 3 template preview images (rotate/reseda/altaloma)
+- **Video:** `templates.webm/mp4` — template showcase animation
+
+### Your Domain (#your-domain)
+- **Background:** Light gray `rgb(223, 221, 216)`
+- **Layout:** Inline input + button
+- **Input placeholder:** "Digite seu domínio"
+
+### How To (#homepage-how-to)
+- **Background:** White `rgb(255, 255, 255)`
+- **Layout:** Numbered steps with icons
+- **Content:** Step-by-step guide to getting started with Squarespace
+
+### Customers Served (#customers-served)
+- **Background:** Black `rgb(0, 0, 0)`
+- **Layout:** Horizontal stat row
+- **Content:** Large numbers + labels
+- **Animation:** `.stats__card` uses `fadeIn` 1.2s `var(--ease-sqsp-reveal)` on `.in-view`
+
+### Made With SQSP (#made-with-sqsp)
+- **Background:** Off-white `rgb(245, 245, 244)`
+- **Layout:** Grid of customer site screenshots
+- **Content:** Customer-built site showcases with hover zoom effect
+- **Interaction:** `transform: scale(1.04)` on hover, 400ms `var(--ease-sqsp-reveal)`
+
+### FAQ (#homepage-faq)
+- **Background:** White `rgb(255, 255, 255)`
+- **Layout:** Accordion list — question rows expand to reveal answers
+- **Animation:** CSS grid `grid-template-rows: 0fr → 1fr` (same accordion pattern as mobile nav)
+- **Interaction:** Click chevron → expand; click again → collapse
+
+### Support (#support)
+- **Background:** Off-white
+- **Layout:** Grid of support options
+- **Content:** Links to help resources
+
+### Conversion (#conversion)
+- **Background:** Dark `rgb(26, 26, 26)` (charcoal)
+- **Content:** Final headline + CTA
+- **Video:** `conversion-centered.mp4` plays in background
+
+### Footer (.footer)
+- **Background:** Black
+- **Layout:** 4-column grid
+- **Columns:** Products, Solutions, Resources, Company
+- **Bottom:** Copyright, Privacy, Terms
+- **Height:** ~1019px
+
+## Internal Links Discovered
+
+- `/preise` — Pricing page
+- `/templates` — Templates gallery
+- `/design-de-sites` — Design page
+- `/templates/comece-agora` — Start page
+- `/sites/construtor-de-sites-com-ai` — AI builder
+- `/design-inteligente` — Smart design
+- `/websites/criar-um-portfolio` — Portfolio builder
+- `/websites/crie-um-blog` — Blog builder
+- `/websites/analytics` — Analytics
+
+## Typography Details
+
+### Font Family: Clarkson
+- Clarkson is Squarespace's proprietary sans-serif
+- Clarkson Serif is the serif variant
+- Falls back to Helvetica Neue, Helvetica, Arial, sans-serif
+
+### Font Weights Observed
+- 300 (light) — Hero H1
+- 400 (normal) — Body, H2, buttons
+- 500 (medium) — CTAs, emphasis
+
+### Size Scale
+- Hero H1: `var(--text-3xl)` → 42px
+- H2: `var(--text-xl)` → 26px
+- H3: `var(--text-lg)` → 20px
+- Body: `var(--text-base)` → 16px
+- Small: `var(--text-sm)` → 14px
+- Caption: `var(--text-xs)` → 12px
+
+## Color Palette (Hex)
+
+| Token | Hex |
+|-------|-----|
+| `--bg-inverse` | #000000 |
+| `--bg-charcoal` | #1A1A1A |
+| `--bg-teal` | #1E4C41 |
+| `--bg-surface` | #F5F5F4 |
+| `--bg-elevated` | #DFDDD8 |
+| `--text-primary` | #000000 |
+| `--text-inverse` | #FFFFFF |
+| `--text-muted` | #898989 |
+| `--text-light-gray` | #DDDDDD |
+| `--border` | #DDDDDD |
+| `--error` | #200603 |
+
+## Interaction Summary
+
+1. **Nav scroll:** Transparent → solid at 50px scroll via JS class toggle
+2. **Mobile hamburger:** Click → `clip-path: polygon()` wipe animation (600ms) — NOT `translateX`
+3. **Mobile accordion:** `grid-template-rows: 0fr → 1fr` CSS transition (700ms)
+4. **CTA button hover:** `mix-blend-mode: difference` pseudo-element scales in (300ms) — NOT color transition
+5. **Text link hover (`.cta--tertiary`):** Dual linear-gradient `background-position` slide (500ms)
+6. **Section scroll-reveal:** `IntersectionObserver` adds `.in-view`, CSS handles `opacity + translateY` (800ms `--ease-sqsp-reveal`)
+7. **Stats cards:** Staggered `fadeIn` with 0.1s per card delay
+8. **Support arrow hover:** `supportHoverArrow` shimmy keyframe (1.1s infinite)
+9. **AI dots:** `rotateAnimation` + `scaleAnimation{Large/Medium/Small}` coordinated (14s infinite)
+10. **FAQ accordion:** Same `grid-template-rows` technique as mobile nav
+
+## Design Signatures
+
+1. **Zero border-radius** — Sharp corners everywhere
+2. **Clarkson typography** — Distinctive proprietary font
+3. **Dark heroes** — Black backgrounds with white text
+4. **Teal accents** — Dark teal for CTAs and emphasis
+5. **Minimal shadows** — Almost no shadows used
+6. **Generous whitespace** — Large section padding