Tidal, the system

Colour

• Air#F1F4F1 · --color-airBackground
• Mist#E2E9E5 · --color-mistSoft sections
• Deep#123A33 · --color-deepDeep sections, buttons, the tide
• Deep 2#1B4A41 · --color-deep-2Hover on deep
• Ink#16241F · --color-inkText
• Muted#4E5C57 · --color-mutedSecondary text (AA on Air and Mist)
• Foam#BFE3D6 · --color-foamAccents on deep, the breathing disc
• Rule#CBD6D0 · --color-ruleLines

Type · Bricolage Grotesque

• Displayclamp 52 → 160 px · 600 · wdth 82 · −4 %

  Room to breathe.

• H1clamp 44 → 104 px · 600 · wdth 84

  Our approach

• H2clamp 36 → 80 px · 600 · wdth 86

  What we can help with

• H3clamp 22 → 30 px · 600

  A free 20-minute call

• Leadclamp 18 → 22 px · 400

  Fifty-minute sessions, in the room or online.

• Body17 px · 400 · 1.6

  The first session is for understanding, not for advice.

• Label14 px · 600 · +2 %

  How it works

Buttons and fields

Cards (CMS)

Motion

One curve for everything: cubic-bezier(.2, .7, .1, 1). Slow on purpose.

• Appear

  opacity 0→1 · y 24→0 · blur 6→0 · 1.1 s · stagger 90 ms

  [data-appear]

• Lines

  each line y 105 %→0 · 1.2 s · 90 ms apart

  [data-lines]

• Image reveal

  clip bottom→top + scale 1.08→1 · 1.4 s

  [data-reveal]

• Parallax

  y −6 % → 6 % while in view

  [data-parallax]

• Sticky

  process column stays while the steps scroll; active step darkens

  [data-steps]

• Hover

  photos scale 1.04 · arrows slide 4 px · 0.5 s

  :hover (CSS)

• Page transition

  deep-green veil rises 0.6 s, falls 0.9 s

  .veil

• Breath

  --breath 0→1→0 every 10 s · the only thing that moves by itself

  js/breath.js · TIDAL_BREATH (props below)

• Reduced motion

  everything shown at once · breath holds at 0.5 · no veil

  prefers-reduced-motion: static variant

The breathing piece

window.TIDAL_BREATH = {
  enabled: true,      // false → static fallback
  inhale: 5,          // seconds
  hold: 0,
  exhale: 5,
  pausable: true,     // pause button (WCAG 2.2.2)
  colors: { disc: '#BFE3D6', ring: 'rgba(234,244,240,.55)', ink: '#123A33' },
  words: { in: ['Breathe in', 'Coge aire'], out: ['Breathe out', 'Suelta el aire'], still: ['Breathe', 'Respira'] },
  exercise: { breaths: 6 }
}