# Six Senses Section Pattern Catalog
# Extracted: 2026-06-01 via Playwright/Firefox headless
# Source pages: homepage, resorts index, spas index
# Screenshots: homepage.png, resorts.png, spas.png

---

## PATTERN 01: full_bleed_video_hero

PURPOSE: Opens the site with an autoplay full-viewport video overlaid by a single long-form philosophical headline, a secondary map CTA, and a discreet "play full video" link.

STRUCTURE:
  <div class="video-js video-hero-dimensions">  <!-- full-width 1440 x 820 -->
    <video autoplay muted loop playsinline></video>
    <div class="hero-caption">
      <div class="hero-caption__content">
        <div class="hero-caption__text">
          <h1><!-- 1-sentence brand manifesto, ~20 words --></h1>
          <a class="cta-secondary"><!-- "VIEW PROPERTIES ON MAP" --></a>
        </div>
      </div>
    </div>
  </div>

KEY STYLE: viewport height 820px, video fills frame with object-fit cover, caption text is white on dark video, h1 font-family serif 40-52px, caption block left-aligned within a ~670px column, no overlay color layer (video darkness provides contrast), padding-top 0, caption sits in lower-left quadrant.

COPY PATTERN: Headline is 18-28 words, full sentence, philosophical. No eyebrow above h1. Secondary CTA in small caps uppercase, 4-5 words. Tertiary link "Play full video" at very small scale.

WHEN TO USE on bigbreath.co: Homepage opener, breathing-philosophy introduction before any scroll.

---

## PATTERN 02: featured_card_carousel

PURPOSE: Showcases 5-7 individual properties or offerings in a horizontally scrollable carousel with country eyebrow, property name h3, 1-sentence description, and an all-caps short-phrase CTA per card.

STRUCTURE:
  <div class="container">
    <h2><!-- "In the spotlight: featured properties" --></h2>
    <a class="cta-view-all"><!-- "WHERE NEXT: VIEW ALL HOTELS AND RESORTS" --></a>
    <div class="carousel center">
      <div class="flexslider">
        <ul class="slides">
          <li>  <!-- card: width ~487px, height ~684px -->
            <span class="eyebrow"><!-- COUNTRY NAME --></span>
            <img>
            <h3><!-- Property name --></h3>
            <p><!-- 1-2 sentence poetic descriptor --></p>
            <a class="cta"><!-- ALL-CAPS EVOCATIVE PHRASE --></a>
          </li>
        </ul>
      </div>
    </div>
  </div>

KEY STYLE: Container 1440px wide, carousel overflows at ~1670px so partial next card is visible. Card images tall-portrait (roughly 3:4 aspect ratio). Eyebrow uppercase spaced tracking 2-3px, 11px. h3 serif 22-26px. Body text 16px Avenir Next, color rgb(102,102,102). CTA all-caps small condensed with arrow right. Gap between cards ~20px. Bg transparent on off-white page background.

COPY PATTERN: Eyebrow = country in capitals (4-8 chars). h3 = brand + location, 3-5 words. Body = 1-2 sentences, 15-25 words, poetic. CTA = metaphorical phrase in all-caps, 4-7 words (e.g. "STILL THE CITY, STIR YOUR SOUL").

WHEN TO USE on bigbreath.co: Retreat/session type showcase, or "featured experiences" block mid-page.

---

## PATTERN 03: philosophy_text_carousel

PURPOSE: A compact rotating carousel of 3-4 short philosophy statements, each with a one-sentence supporting line and an all-caps CTA, displayed side-by-side in 3-col grid at desktop width.

STRUCTURE:
  <div class="carousel carousel-text">
    <div class="flexslider">
      <ul class="slides">
        <li class="carousel-text__slide">
          <div class="carousel-text__content">
            <p><!-- 1-sentence value statement, 15-20 words --></p>
            <a class="cta"><!-- "OUR VALUES" / "PIONEERING WELLNESS" / "SUSTAINABILITY" --></a>
          </div>
        </li>
      </ul>
    </div>
  </div>

KEY STYLE: Container 1228px, 3 columns each ~409px wide, height 177px (very compact). No images. Background transparent. Font color rgb(0,0,0) for body, CTA in uppercase with underline or arrow. This sits inside a wider section (~630px tall) that pairs it with a large hero image carousel on the left.

COPY PATTERN: Each slide is 1 sentence 15-22 words max. CTA is a category label in 2 words, all-caps. 3 slides rotating. No eyebrow.

WHEN TO USE on bigbreath.co: Brand-values mid-page block, showing 3 breath/wellness pillars side by side.

---

## PATTERN 04: image_carousel_with_text_panel

PURPOSE: Large-format image carousel (left 60%) paired with a tabbed or rotating text panel (right 40%) allowing the user to flip through visual proof-points of values or services.

STRUCTURE:
  <section>
    <div class="carousel carousel-hero">  <!-- width 1440px, height 630px -->
      <div class="flexslider">
        <ul class="slides">
          <li><img></li>  <!-- full-bleed tall image -->
        </ul>
      </div>
    </div>
    <div class="row row-2">  <!-- 3-col CTA strip below or adjacent -->
      <div>Our values <a>OUR VALUES</a></div>
      <div>Pioneering wellness <a>PIONEERING WELLNESS</a></div>
      <div>Sustainability <a>SUSTAINABILITY</a></div>
    </div>
  </section>

KEY STYLE: Carousel images fill ~950px wide at 684px tall. Text strip below at 1228px x 177px. No padding on image container. CTAs in small-caps with tracking. Background of text strip is off-white/cream matching page bg.

COPY PATTERN: Image has no caption. Adjacent text strip holds 3 navigational labels (2 words each, all-caps) each with a 1-sentence teaser (15-20 words). User clicks label to switch image.

WHEN TO USE on bigbreath.co: "How we work" or "Our approach" section showing 3 program pillars with photography proof.

---

## PATTERN 05: editorial_split_tall_image

PURPOSE: One-to-one editorial block: a tall portrait image on one side, a text column (eyebrow + h2/h3 + body + CTA) on the other. Used to give depth to a single resort, topic, or concept.

STRUCTURE:
  <div class="row editorial">
    <div class="col-image">  <!-- 50-55% width, image 3:4 tall -->
      <img>
    </div>
    <div class="col-text">  <!-- 45-50% width, vertically centered -->
      <span class="eyebrow"><!-- COUNTRY / CATEGORY --></span>
      <h3><!-- Property or topic name --></h3>
      <p><!-- 2-3 sentences, 30-40 words --></p>
      <a class="cta"><!-- ALL-CAPS 4-6 WORD EVOCATIVE PHRASE --></a>
    </div>
  </div>

KEY STYLE: Total row height 684px. Image right-to-edge or flush. Text column has generous left padding ~60px. No border or box-shadow. Bg transparent. Alternates left/right across repeated instances on resorts index page.

COPY PATTERN: Eyebrow uppercase country/category, 1-2 words. h3 serif 22-28px, 3-5 words. Body 25-35 words, poetic. CTA all-caps 4-6 words, metaphorical not functional.

WHEN TO USE on bigbreath.co: Retreat program details, instructor bios, location features.

---

## PATTERN 06: upcoming_card_grid

PURPOSE: Grid of future openings or secondary offerings, 3-per-row, each with eyebrow location, h3 title, short description, and a "DISCOVER MORE" link. Country eyebrow differentiates the category of card.

STRUCTURE:
  <div class="carousel">  <!-- overflows at 1670px, 3 cards visible -->
    <div class="flexslider">
      <ul>
        <li>
          <span class="eyebrow"><!-- COUNTRY --></span>
          <img>
          <h3><!-- Name + year in parens --></h3>
          <p><!-- 2-3 sentence description, 35-50 words --></p>
          <a>DISCOVER MORE</a>
        </li>
      </ul>
    </div>
  </div>

KEY STYLE: 3 cards visible at 1440px, each ~487px wide. Card images landscape (roughly 16:9). Eyebrow uppercase tracking. h3 includes year annotation in parens. CTA is generic "DISCOVER MORE" -- functional not evocative. This is the one place on the site where functional CTAs appear. Background cream/off-white.

COPY PATTERN: 20 cards total in the data set (all upcoming properties). Body is factual descriptive, 35-50 words. CTA is always "DISCOVER MORE" (2 words, all-caps).

WHEN TO USE on bigbreath.co: "Coming soon" program announcements, waitlist teaser.

---

## PATTERN 07: services_tab_strip

PURPOSE: Horizontal strip of 5 category tabs (Offers, Gift Cards, Experiences, News, Meetings and Events) with matching card below, used to navigate between topic areas in a single compact module.

STRUCTURE:
  <section class="box box52 fadeInUp">
    <h2><!-- "What's on at Six Senses?" --></h2>
    <nav class="tabs">
      <button>OFFERS</button>
      <button>GIFT CARDS</button>
      <button>EXPERIENCES</button>
      <button>NEWS</button>
      <button>MEETINGS & EVENTS</button>
    </nav>
    <div class="tab-content">
      <!-- active card: eyebrow + image + h3 + body + CTA -->
    </div>
  </section>

KEY STYLE: Section 1440px wide, 708px tall. Tabs in uppercase Avenir Next Condensed 11-13px, spaced with generous padding. Active tab underlined or with accent color. Content below uses editorial-split layout. 42 card items detected in DOM (all tabs pre-rendered). fadeInUp animation class on scroll entry.

COPY PATTERN: Tab labels are category nouns (2-3 words). Inside each tab: eyebrow + short poetic h3 + 1-2 body sentences + all-caps evocative CTA. Section headline is conversational question format.

WHEN TO USE on bigbreath.co: "What's at BigBreath" hub showing programs, gifts, retreats, events in one compact module.

---

## PATTERN 08: resorts_index_list

PURPOSE: Full directory listing of all properties, each row showing a flexslider image (landscape thumbnail), property name as h2/h3, location text, and a "BOOK NOW" CTA button. Filtered by destination and date via a form bar above.

STRUCTURE:
  <div class="properties-list">
    <div class="properties-list-title-wrapper">
      <h1>Hotels &amp; Resorts</h1>
      <span>27 Hotels &amp; Resorts</span>
    </div>
    <div class="filters-wrapper">
      <input placeholder="Select a destination or hotel">
      <input type="date" placeholder="Check-in">
      <input type="date" placeholder="Check-out">
      <button class="search">SEARCH</button>
      <a>VIEW IN MAP</a>
    </div>
    <ul class="properties-list__items">
      <li>
        <div class="flexslider"><!-- 3-4 image thumbnails --></div>
        <div class="property-text">
          <h3><!-- Resort name --></h3>
          <p><!-- Location --></p>
          <a class="btn">BOOK NOW</a>
        </div>
      </li>
    </ul>
  </div>

KEY STYLE: List items alternate full-width rows. Image slider ~487px wide at 305px tall (landscape). Text block beside it. Filter bar at top is 1122px wide with form fields inline. Count badge "27 Hotels & Resorts" is small text below h1.

COPY PATTERN: h1 is category noun. Count text is "{n} Hotels & Resorts". Property rows have name + country only, no marketing copy. CTA is generic functional "BOOK NOW" or "DISCOVER."

WHEN TO USE on bigbreath.co: Retreats or programs directory page.

---

## PATTERN 09: spas_editorial_split_list

PURPOSE: Stacked alternating editorial pairs -- left image (landscape/tall), right text block with property name h3, 1-2 sentences, and a "DISCOVER" button. Used on the spas index to feature 3-6 top properties.

STRUCTURE:
  <main>
    <div class="intro-text">
      <h1>Six Senses Spas</h1>
      <p><!-- 2-sentence brand intro --></p>
    </div>
    <ul class="spa-list">
      <li class="spa-item">
        <div class="spa-item__image">
          <img><!-- landscape, approx 16:9 -->
        </div>
        <div class="spa-item__text">
          <span class="eyebrow"><!-- COUNTRY --></span>
          <h3><!-- Spa name --></h3>
          <p><!-- 2 sentences, 25-35 words --></p>
          <a class="btn-discover">DISCOVER</a>
        </div>
      </li>
    </ul>
  </main>

KEY STYLE: Page background white/cream. Intro text block max-width ~720px, centered. List items 1122px wide, image ~55% left, text 45% right. Button "DISCOVER" is pill-shaped, dark bg (brand purple/charcoal), white text, all-caps. 3 spas shown on initial load, "VIEW IN MAP" toggle at top right.

COPY PATTERN: Intro block is 2 sentences, factual brand positioning. Each spa has a 2-sentence evocative descriptor, 20-30 words. Button is generic "DISCOVER."

WHEN TO USE on bigbreath.co: Services or modalities page -- list of breath sessions/offerings with image and short description.

---

## PATTERN 10: journey_nav_strip

PURPOSE: A bottom-of-page wayfinding strip with 5-6 category links (Offers, Newsletter, Travel Trade, etc.) displayed as large text links in a horizontal band, inviting users to go deeper.

STRUCTURE:
  <section class="journey-nav">
    <h2><!-- "Journey through Six Senses: offers and explore" --></h2>
    <nav>
      <a>Offers</a>
      <a>Newsletter</a>
      <a>Travel Trade</a>
      <a>Media Center</a>
      <a>Careers</a>
    </nav>
  </section>

KEY STYLE: Full-width, cream background. Links are serif or condensed, large (24-32px), separated by subtle dividers. Minimal padding. Functions as a sitemap-flavored section, not a footer.

COPY PATTERN: Headline is an invitation: "Journey through [brand]: [verb] and [verb]." Links are 1-2 word category nouns.

WHEN TO USE on bigbreath.co: Bottom-of-homepage navigation block linking to retreats, newsletter, community, FAQs.

---

## PATTERN 11: footer_column_grid

PURPOSE: Standard footer with 4-5 columns: brand links column, contact info, social icons, and legal links. Logo centered or top-left. Minimal contrast -- same bg as page or dark.

STRUCTURE:
  <footer>
    <div class="footer-logo"><img alt="Six Senses logo"></div>
    <div class="footer-columns">
      <div><h4>SIX SENSES</h4><ul><li><a>News</a></li>...</ul></div>
      <div><h4>SIX SENSES HOTELS RESORTS SPAS</h4><address>...</address></div>
      <div><h4>GET IN TOUCH</h4><address>...</address></div>
      <div class="social"><a><!-- Facebook, IG, Pinterest, YouTube --></a></div>
    </div>
    <div class="footer-legal"><a>Cookie Policy</a>...</div>
  </footer>

KEY STYLE: Multi-column at desktop. Logo top-left, social icons right-aligned. Font Avenir Next 12-13px. Color rgb(102,102,102) on cream bg. No heavy borders. Legal links in very small text bottom row.

COPY PATTERN: Column heads in uppercase 11px. Links are functional nouns. Contact block has full postal address. Social icons without labels.

WHEN TO USE on bigbreath.co: Site footer, no changes needed to the pattern.

---

## PATTERN 12: full_bleed_quote

PURPOSE: A full-viewport-width section with a centered pull quote or brand statement in large serif type, no image, cream or very light background. Used as a palette-cleanser between feature sections.

STRUCTURE:
  <section class="quote-block">
    <div class="quote-block__inner">
      <blockquote>
        <!-- 1 sentence, 15-25 words, philosophical -->
      </blockquote>
    </div>
  </section>

KEY STYLE: Width 1440px. Background cream rgb(245,242,235) or near-white. Blockquote serif 36-48px, centered, max-width 860px, generous vertical padding 80-120px. No image, no CTA, no eyebrow. Text color near-black. Inferred from homepage's editorial philosophy sections; confirmed present on resort detail pages.

COPY PATTERN: One sentence. No attribution shown. Verb in present tense. 15-25 words. No CTA.

WHEN TO USE on bigbreath.co: Between hero and program cards, or before testimonials -- a breath of white space with a single defining statement.

---

## PATTERN 13: newsletter_signup

PURPOSE: A compact inline signup module at bottom of content with a one-line heading, single email input, and a submit button. Minimal design, no image.

STRUCTURE:
  <section class="newsletter">
    <h3><!-- "Stay in touch" or "Get inspired" --></h3>
    <p><!-- 1-sentence invitation --></p>
    <form>
      <input type="email" placeholder="Your email address">
      <button type="submit">SUBSCRIBE</button>
    </form>
  </section>

KEY STYLE: Width 600-900px, centered. No background image. Form inline at desktop, stacked at mobile. Button styled same as primary CTA (dark pill). Privacy note in 11px below form.

COPY PATTERN: h3 is 3-4 words imperative. Subtext is 1 sentence 10-15 words. Placeholder "Your email address." Button "SUBSCRIBE" or "JOIN."

WHEN TO USE on bigbreath.co: Bottom of homepage and retreats pages, above footer.

---

## PATTERN 14: full_page_cta

PURPOSE: A near-full-viewport section with a background image (or dark color fill), centered h2, 1-2 body lines, and a primary CTA button. Used to drive a single conversion action.

STRUCTURE:
  <section class="cta-full" style="background-image: url(...)">
    <div class="cta-full__overlay"><!-- semi-transparent dark --></div>
    <div class="cta-full__content">
      <h2><!-- 3-6 word imperative headline --></h2>
      <p><!-- 1 sentence, 10-15 words --></p>
      <a class="btn"><!-- "BOOK YOUR STAY" / "EXPLORE RETREATS" --></a>
    </div>
  </section>

KEY STYLE: Height 500-640px. Background image fills section, overlay rgba(0,0,0,0.35) to 0.45. Text white. h2 serif 36-48px centered. Button white outline or brand color fill. Generous padding top/bottom 80px.

COPY PATTERN: Headline is a verb-led invitation, 3-6 words. Body is optional 1 sentence. CTA is functional 3-4 words in uppercase.

WHEN TO USE on bigbreath.co: End of homepage, retreat detail pages, to drive booking or waitlist.

---

# Typography System (observed)

Primary serif: system-serif stack (no custom webfont loaded at this tier -- renders as Times/Georgia fallback for body headings)
Secondary sans: "Avenir Next", "Avenir Next Condensed", arial
Body size: 16px
Body color: rgb(102, 102, 102) -- medium gray, not black
Heading color: white on dark, near-black rgb(0,0,0) on light
Eyebrow style: uppercase, tracking 2-4px, 11-13px, Avenir Next Condensed
CTA style: all-caps, Avenir Next Condensed or regular, 12-14px, often with right-arrow glyph or underline

# Color Palette (observed)

Page background: off-white / cream (rgb ~245,242,235 inferred from screenshots)
Primary text: rgb(102,102,102)
Heading / accent text: rgb(0,0,0) or rgb(255,255,255)
Video hero bg: rgb(0,0,0)
CTA button fill: dark charcoal or brand purple (exact hex not extractable from computed styles)
No explicit brand_colors returned by computed style scan (colors applied via CSS classes not inline)

# bigbreath.co Priority Adoption Notes (see TOP 5 in report)

1. full_bleed_video_hero -- open with breath in motion
2. featured_card_carousel -- show retreat types / upcoming programs
3. editorial_split_tall_image -- feature each breathwork modality
4. philosophy_text_carousel -- display the 3 BigBreath pillars
5. full_page_cta -- drive retreat bookings above fold-break
