@jaimevalasek/aioson 1.6.0 → 1.7.2

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;
+}
+```