pigeonfresh

{{padded @index}}

pigeonfresh

.C1PrimaryHero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 13rem 0 3.5rem;

  @import "styles/content-wrapper";
  @import "styles/copy-wrapper";
  @import "styles/updates-wrapper";
  @import "styles/ripple-wrapper";

pigeonfresh

.booking-content-wrapper {
    position: relative;
    min-height: 15rem;
    padding: 0 0 3rem;

    @include theme($laColeccion $grandFiestaAmericana) {
      color: #fff;
      &::before {
        position: absolute;
        top: -1rem;

pigeonfresh

import AbstractBlock from '../AbstractBlock';
import { scrollTransition, baseTransition } from '../../../util/transitions';

export default class CTextBlock extends AbstractBlock {
  public static readonly displayName: string = 'c-text-block';

  constructor(el: HTMLElement) {
    super(el);
    const transition = baseTransition(this.getElements('[data-transition-item]'));
    scrollTransition(el, transition);

pigeonfresh

import { gsap, Power3 } from 'gsap';

export const baseTransition = (
  elements: HTMLElement | ReadonlyArray<HTMLElement>,
  props?: gsap.AnimationVars,
): gsap.core.Animation =>
  gsap.from(elements, {
    duration: 1.2,
    y: 40,
    ease: Power3.easeOut,

pigeonfresh

if (process.env.NODE_ENV === 'development') {
      import('qa-tools').then((tools: any) => {
        const props = {
          maxWidth: 'var(--content-wrapper-max-width)',
          padding: 'var(--content-wrapper-side-padding)',
          gridGap: 'var(--grid-gap)',
          gridColumns: 'var(--columns)',
          color: 'var(--color-violet)',
        };
        tools.gridOverlay(props);

pigeonfresh

import { gsap } from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import AbstractComponent from '../AbstractComponent';

gsap.registerPlugin(ScrollTrigger);

export default class Visual extends AbstractComponent {
  public static readonly displayName: string = 'visual';
  private static readonly offset: number = 200;
  private picture: HTMLPictureElement | null = this.getElement('picture');

pigeonfresh

Atoms:

Type related:

All copy related items to build up a page are managed with this collection of items. Options with an * are mandatory/require configuration by the author or developer

Heading

Authorable options:

• type* (h1 to h6)
• copy* (string|html)

pigeonfresh

@mixin light-color-scheme {
  background: #fff;
  color: #111;
}

@mixin dark-color-scheme {
  background: #111;
  color: #fff;
}

pigeonfresh

@function strip-unit($number) {
  @if type-of($number) == "number" and not unitless($number) {
    @return $number / ($number * 0 + 1);
  }
  @return $number;
}

@function fluid(
  $startValue,
  $endValue,