/* Generated by build-styles.py. Edit the manifest-listed source styles. */ /* Source: assets/r06-1b4b1f164146cb864c00/foundations/foundations.css */ /* West Pak R03 design foundations (SW-01, SW-02, SW-03). Loaded FIRST on every R03 page (manifest pages.*.styles[0]). Spec + copy-paste markup: docs/design-system.md. Owner: foundations. Prefix: --wpa-* tokens, .wpa-* classes, data-* contracts. Never edit per page; page CSS may consume tokens and add page-specific layout only. */ /* ---------- Font: Antonio variable (100-700), self-hosted latin subset ---------- Same family name as the theme's Antonio 400 so legacy rules gain real 500/600/700 weights instead of synthetic or fallback weights. */ @font-face { font-family: 'Antonio'; font-style: normal; font-weight: 100 700; font-display: swap; src: url("../foundations/fonts/antonio-var-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Tokens ---------- */ :root { /* Brand color. VCA artwork values are canonical; live-site values noted. */ --wpa-cream: #FFF9DD; /* page background. Live: #FFFADC (Salient extra-color-3) */ --wpa-cream-2: #F7EFC8; /* alt cream band / cards on cream (derived) */ --wpa-cream-line: #E6DDB3; /* hairlines on cream (derived) */ --wpa-lime: #B6DF00; /* accent, primary button. Live: #B7E000 */ --wpa-lime-hover: #C6EA2A; /* derived */ --wpa-green: #93C11F; /* mid green (VCA) */ --wpa-olive: #5A6E00; /* live gradient start / small accents on cream (AA on cream for large text) */ --wpa-forest: #223F13; /* bands, headlines on cream, button text. Live accent: #2B4216 */ --wpa-forest-2: #2B4216; /* live accent: hover/borders on forest */ --wpa-forest-deep: #16290C; /* footer / deepest band (derived) */ --wpa-ink: #1B1F17; /* body text on cream */ --wpa-ink-soft: #3D4536; /* secondary text on cream (AA) */ --wpa-yellow: #FAD60C; /* organic accent only. Live "Make 'em now" button */ --wpa-black: #111111; /* booth black, film letterbox */ --wpa-white: #FFFFFF; /* text on dark/photo ONLY. Never a page background. */ --wpa-scrim: rgba(17, 24, 12, .55); /* Type families */ --wpa-font-display: 'Antonio', 'Arial Narrow', sans-serif; --wpa-font-body: 'Open Sans', Arial, sans-serif; /* Type scale (desktop max = live westpakavocado.com values) */ --wpa-fs-display: clamp(56px, 8.4vw, 120px); /* hero H1. Live 80-100px */ --wpa-fs-h1: clamp(44px, 5.6vw, 80px); /* page/section H1. Live 80px */ --wpa-fs-h2: clamp(34px, 3.8vw, 54px); /* section header. Live 54px */ --wpa-fs-h3: clamp(24px, 2.2vw, 34px); /* card/sub header. Live 34px */ --wpa-fs-h4: 20px; /* label caps. Live Antonio 700 20px */ --wpa-fs-lede: clamp(18px, 1.5vw, 21px); /* positioning sentence */ --wpa-fs-body: 16px; --wpa-fs-small: 14px; /* live body is 14/26 */ --wpa-fs-button: 14px; --wpa-fs-stat: clamp(64px, 9vw, 140px); /* big numerals */ --wpa-lh-display: 1.0; --wpa-lh-heading: 1.08; /* live 80/86.4 */ --wpa-lh-h3: 1.2; --wpa-lh-body: 1.65; --wpa-fw-display: 600; /* live H1/H2 weight */ --wpa-fw-h3: 600; --wpa-fw-label: 700; --wpa-tracking-heading: 0; --wpa-tracking-button: .14em; /* live 2px at 14px */ /* Space (4px grid) */ --wpa-s1: 4px; --wpa-s2: 8px; --wpa-s3: 12px; --wpa-s4: 16px; --wpa-s5: 24px; --wpa-s6: 32px; --wpa-s7: 48px; --wpa-s8: 64px; --wpa-s9: 96px; --wpa-s10: 128px; --wpa-section-y: clamp(64px, 9vw, 128px); --wpa-gutter: clamp(16px, 6vw, 90px); /* live container padding 90px */ --wpa-container: 1300px; /* live content size */ --wpa-measure: 62ch; /* Shape + motion */ --wpa-radius-sm: 8px; --wpa-radius: 16px; --wpa-radius-lg: 24px; --wpa-radius-pill: 999px; --wpa-shadow: 0 10px 30px rgba(34, 63, 19, .12); --wpa-ease: cubic-bezier(.3, 1, .3, 1); /* live Salient easing */ --wpa-dur-fast: 180ms; --wpa-dur: 320ms; /* Header contract (see header overlay below) */ --wpa-hdr-h: 128px; /* desktop Salient header */ --wpa-hdr-h-mobile: 60px; --wpa-hdr-gradient: linear-gradient(180deg, rgba(10, 18, 6, .62) 0%, rgba(10, 18, 6, .28) 55%, rgba(10, 18, 6, 0) 100%); } @media (max-width: 999px) { :root { --wpa-hdr-h: calc(var(--wpa-hdr-h-mobile) + env(safe-area-inset-top, 0px)); } } /* ---------- Tone scopes: set local surface/ink/accent; components read these ---------- */ #wpr06-body [data-tone], #wpr06-body .wpa-tone-cream, #wpr06-body .wpa-tone-forest, #wpr06-body .wpa-tone-photo { --wpa-surface: var(--wpa-cream); --wpa-fg: var(--wpa-ink); --wpa-fg-soft: var(--wpa-ink-soft); --wpa-heading: var(--wpa-forest); --wpa-accent: var(--wpa-olive); --wpa-rule: var(--wpa-cream-line); } #wpr06-body [data-tone="cream-2"] { --wpa-surface: var(--wpa-cream-2); } #wpr06-body :is([data-tone="forest"], .wpa-tone-forest) { --wpa-surface: var(--wpa-forest); --wpa-fg: var(--wpa-cream); --wpa-fg-soft: rgba(255, 249, 221, .82); --wpa-heading: var(--wpa-cream); --wpa-accent: var(--wpa-lime); --wpa-rule: rgba(255, 249, 221, .18); } #wpr06-body :is([data-tone="lime"]) { --wpa-surface: var(--wpa-lime); --wpa-fg: var(--wpa-forest); --wpa-fg-soft: var(--wpa-forest-2); --wpa-heading: var(--wpa-forest); --wpa-accent: var(--wpa-forest); --wpa-rule: rgba(34, 63, 19, .2); } #wpr06-body :is([data-tone="yellow"]) { --wpa-surface: var(--wpa-yellow); --wpa-fg: var(--wpa-forest); --wpa-fg-soft: var(--wpa-forest-2); --wpa-heading: var(--wpa-forest); --wpa-accent: var(--wpa-forest); --wpa-rule: rgba(34, 63, 19, .2); } #wpr06-body :is([data-tone="photo"], .wpa-tone-photo) { --wpa-surface: var(--wpa-forest-deep); --wpa-fg: var(--wpa-white); --wpa-fg-soft: rgba(255, 255, 255, .86); --wpa-heading: var(--wpa-white); --wpa-accent: var(--wpa-lime); --wpa-rule: rgba(255, 255, 255, .22); } /* ---------- Section pattern: header -> one sentence -> scannable points ---------- */ #wpr06-body .wpa-section { position: relative; isolation: isolate; box-sizing: border-box; padding: var(--wpa-section-y) var(--wpa-gutter); background: var(--wpa-surface, var(--wpa-cream)); color: var(--wpa-fg, var(--wpa-ink)); font-family: var(--wpa-font-body); font-size: var(--wpa-fs-body); line-height: var(--wpa-lh-body); } #wpr06-body .wpa-section__inner { max-width: var(--wpa-container); margin: 0 auto; } #wpr06-body .wpa-section__inner--narrow { max-width: 880px; } #wpr06-body .wpa-section__head { max-width: 900px; margin: 0 0 var(--wpa-s7); } #wpr06-body .wpa-section__head--center { margin-inline: auto; text-align: center; } #wpr06-body :is(.wpa-title, .wpa-section__title) { margin: 0 0 var(--wpa-s4); color: var(--wpa-heading, var(--wpa-forest)); font-family: var(--wpa-font-display); font-weight: var(--wpa-fw-display); font-size: var(--wpa-fs-h2); line-height: var(--wpa-lh-heading); letter-spacing: var(--wpa-tracking-heading); text-transform: uppercase; text-wrap: balance; } #wpr06-body .wpa-title--display { font-size: var(--wpa-fs-display); line-height: var(--wpa-lh-display); } #wpr06-body .wpa-title--h1 { font-size: var(--wpa-fs-h1); } #wpr06-body .wpa-title--h3 { font-size: var(--wpa-fs-h3); line-height: var(--wpa-lh-h3); font-weight: var(--wpa-fw-h3); } #wpr06-body .wpa-title .wpa-accent, #wpr06-body .wpa-accent { color: var(--wpa-accent); } #wpr06-body :is(.wpa-lede, .wpa-section__lede) { margin: 0; max-width: var(--wpa-measure); color: var(--wpa-fg); font-family: var(--wpa-font-body); font-size: var(--wpa-fs-lede); line-height: 1.55; font-weight: 400; text-wrap: pretty; } #wpr06-body .wpa-section__head--center .wpa-lede { margin-inline: auto; } #wpr06-body .wpa-section__actions { display: flex; flex-wrap: wrap; gap: var(--wpa-s4); align-items: center; margin-top: var(--wpa-s6); } #wpr06-body .wpa-section__head--center + .wpa-section__actions, #wpr06-body .wpa-section__head--center .wpa-section__actions { justify-content: center; } /* Photo band: background media + scrim, content on top */ #wpr06-body .wpa-section__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; } #wpr06-body .wpa-section__media > :is(img, video, picture) { width: 100%; height: 100%; object-fit: cover; display: block; } #wpr06-body .wpa-section__media > picture > img { width: 100%; height: 100%; object-fit: cover; } #wpr06-body .wpa-section__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--wpa-scrim) 0%, rgba(17, 24, 12, .2) 70%); } /* Scannable points: 1-3 short lines each, lime marker */ #wpr06-body .wpa-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wpa-s5) var(--wpa-s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } #wpr06-body .wpa-points > li { position: relative; margin: 0; padding: 0 0 0 28px; color: var(--wpa-fg-soft, var(--wpa-ink-soft)); font-size: var(--wpa-fs-body); line-height: 1.55; } #wpr06-body .wpa-points > li::before { content: ''; position: absolute; left: 0; top: .32em; width: 14px; height: 14px; border-radius: 50%; background: var(--wpa-lime); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--wpa-lime) 60%, var(--wpa-forest)); } #wpr06-body .wpa-points > li > strong:first-child { display: block; margin-bottom: var(--wpa-s1); color: var(--wpa-heading, var(--wpa-forest)); font-family: var(--wpa-font-display); font-weight: var(--wpa-fw-label); font-size: var(--wpa-fs-h4); line-height: 1.25; text-transform: uppercase; letter-spacing: .01em; } #wpr06-body .wpa-points--stack { grid-template-columns: 1fr; max-width: 720px; } /* Big stat (forest band with lime numerals) */ #wpr06-body .wpa-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wpa-s6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } #wpr06-body .wpa-stat__value { display: block; color: var(--wpa-accent); font-family: var(--wpa-font-display); font-weight: 600; font-size: var(--wpa-fs-stat); line-height: .95; } #wpr06-body .wpa-stat__label { display: block; margin-top: var(--wpa-s2); color: var(--wpa-fg); font-family: var(--wpa-font-display); font-weight: 500; font-size: var(--wpa-fs-h4); text-transform: uppercase; line-height: 1.25; } /* ---------- Buttons ---------- */ #wpr06-body .wpa-btn { --_bg: var(--wpa-lime); --_fg: var(--wpa-forest); --_bd: var(--wpa-lime); display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-height: 48px; margin: 0; padding: 14px 32px; border: 2px solid var(--_bd); border-radius: var(--wpa-radius-pill); background: var(--_bg); color: var(--_fg) !important; box-shadow: none; font-family: var(--wpa-font-body); font-weight: 700; font-size: var(--wpa-fs-button); line-height: 1.1; letter-spacing: var(--wpa-tracking-button); text-transform: uppercase; text-decoration: none !important; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--wpa-dur-fast) ease, color var(--wpa-dur-fast) ease, border-color var(--wpa-dur-fast) ease, transform var(--wpa-dur-fast) var(--wpa-ease); } #wpr06-body .wpa-btn:hover { --_bg: var(--wpa-lime-hover); --_bd: var(--wpa-lime-hover); } #wpr06-body .wpa-btn:active { transform: translateY(1px); } #wpr06-body .wpa-btn:focus-visible { outline: 3px solid var(--wpa-forest); outline-offset: 3px; } #wpr06-body :is([data-tone="forest"], [data-tone="photo"], .wpa-tone-forest, .wpa-tone-photo) .wpa-btn:focus-visible { outline-color: var(--wpa-cream); } #wpr06-body .wpa-btn--secondary { --_bg: transparent; --_fg: var(--wpa-heading, var(--wpa-forest)); --_bd: currentColor; color: var(--wpa-heading, var(--wpa-forest)) !important; } #wpr06-body .wpa-btn--secondary:hover { --_bg: var(--wpa-heading, var(--wpa-forest)); --_bd: var(--wpa-heading, var(--wpa-forest)); --_fg: var(--wpa-surface, var(--wpa-cream)); color: var(--wpa-surface, var(--wpa-cream)) !important; } #wpr06-body .wpa-btn--forest { --_bg: var(--wpa-forest); --_fg: var(--wpa-cream); --_bd: var(--wpa-forest); } #wpr06-body .wpa-btn--forest:hover { --_bg: var(--wpa-forest-2); --_bd: var(--wpa-forest-2); } #wpr06-body .wpa-btn--lg { min-height: 60px; padding: 18px 44px; font-size: 16px; } #wpr06-body .wpa-btn--xl { min-height: 72px; padding: 22px 56px; font-size: clamp(16px, 1.4vw, 20px); } #wpr06-body .wpa-btn[aria-disabled="true"], #wpr06-body .wpa-btn:disabled { opacity: .45; pointer-events: none; } /* Form submits: Salient's "slightly rounded" theme rule gives submit buttons a 20px radius. */ #wpr06-body button.wpa-btn[type="submit"] { border-radius: var(--wpa-radius-pill) !important; font-weight: 700; } /* Phones (Final QA, Oct 2): long labels ("Register for the Resource Center") wrapped to two lines at the desktop tracking. Tighter tracking and padding keep them on one line; if one still wraps, the two lines are balanced. */ @media (max-width: 480px) { #wpr06-body .wpa-btn { padding-inline: 20px; letter-spacing: .08em; text-wrap: balance; } #wpr06-body :is(.wpa-btn--lg, .wpa-btn--xl) { padding-inline: 24px; font-size: 14px; } } #wpr06-body .wpa-link { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--wpa-heading, var(--wpa-forest)) !important; text-decoration: none !important; font-family: var(--wpa-font-body); font-weight: 700; font-size: 15px; line-height: 1.3; border-bottom: 2px solid var(--wpa-lime); } #wpr06-body .wpa-link::after { content: '\2192'; font-weight: 400; transition: transform var(--wpa-dur-fast) var(--wpa-ease); } #wpr06-body .wpa-link:hover::after { transform: translateX(4px); } #wpr06-body .wpa-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } #wpr06-body .wpa-link--down::after { content: '\2193'; } #wpr06-body .wpa-link--down:hover::after { transform: translateY(3px); } /* ---------- Sticky sub-nav (journey nav) ---------- */ #wpr06-body .wpa-subnav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--wpa-cream) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--wpa-cream-line); transition: top 240ms ease; } #wpr06-body .wpa-subnav__list { list-style: none; margin: 0 auto; padding: 0 var(--wpa-gutter); max-width: calc(var(--wpa-container) + 2 * var(--wpa-gutter)); display: flex; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; } #wpr06-body .wpa-subnav__list::-webkit-scrollbar { display: none; } #wpr06-body .wpa-subnav__list > li { flex: 1 1 0; min-width: max-content; margin: 0; padding: 0; border-left: 1px solid var(--wpa-cream-line); } #wpr06-body .wpa-subnav__list > li:last-child { border-right: 1px solid var(--wpa-cream-line); } #wpr06-body .wpa-subnav__list a { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 12px 20px; box-sizing: border-box; text-align: center; color: var(--wpa-forest) !important; text-decoration: none !important; font-family: var(--wpa-font-body); font-weight: 700; font-size: 13px; line-height: 1.3; } #wpr06-body .wpa-subnav__list a::after { content: '\2193'; font-weight: 400; } #wpr06-body .wpa-subnav__list a::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--wpa-lime); transform: scaleX(0); transform-origin: center; transition: transform var(--wpa-dur) var(--wpa-ease); } #wpr06-body .wpa-subnav__list a:is([aria-current="location"], :hover)::before { transform: scaleX(1); } #wpr06-body .wpa-subnav__list a:focus-visible { outline: 2px solid var(--wpa-forest); outline-offset: -4px; } @media (max-width: 999px) { #wpr06-body .wpa-subnav__list { padding: 0; } #wpr06-body .wpa-subnav__list a { min-height: 52px; } } /* ---------- Accordion / dropdown ---------- */ #wpr06-body .wpa-accordion { border-top: 1px solid var(--wpa-rule, var(--wpa-cream-line)); } #wpr06-body .wpa-accordion__item { border-bottom: 1px solid var(--wpa-rule, var(--wpa-cream-line)); } #wpr06-body .wpa-accordion__heading { margin: 0 !important; padding: 0; font-size: inherit; line-height: inherit; } #wpr06-body .wpa-accordion__trigger { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--wpa-s4); width: 100%; min-height: 64px; padding: var(--wpa-s4) 0; cursor: pointer; color: var(--wpa-heading, var(--wpa-forest)); font-family: var(--wpa-font-display); font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; text-transform: uppercase; text-align: left; text-wrap: balance; /* no one-word second line ("…Around Your / Goals") */ } #wpr06-body .wpa-accordion__trigger::after { content: ''; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--wpa-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 16h12M16 10v12' stroke='%23223F13' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat; transition: transform var(--wpa-dur) var(--wpa-ease); } /* The plus turns into a cross on LashPop's chevron spring (stiffness 260, damping 18, mass 1; sampled exactly, 12% overshoot, settles ~0.8s). A CSS transition, so a mid-way click reverses smoothly. */ @supports (transition-timing-function: linear(0, 1)) { #wpr06-body .wpa-accordion__trigger::after { transition: transform 800ms linear(0, 0.046, 0.161, 0.313, 0.479, 0.64, 0.783, 0.902, 0.994, 1.058, 1.098, 1.117, 1.12, 1.112, 1.097, 1.078, 1.058, 1.039, 1.022, 1.009, 0.998, 0.991, 0.987, 0.986, 0.986, 0.987, 0.989, 0.991, 0.994, 0.996, 0.998, 0.999, 1, 1.001, 1.002, 1.002, 1.002, 1.002, 1.001, 1.001, 1), background-color var(--wpa-dur-fast) ease; } } #wpr06-body .wpa-accordion__trigger[aria-expanded="true"]::after { transform: rotate(45deg); } #wpr06-body .wpa-accordion__trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 2px; } #wpr06-body .wpa-accordion__trigger:hover { color: var(--wpa-accent); } #wpr06-body .wpa-accordion__panel { padding: 0 48px var(--wpa-s5) 0; color: var(--wpa-fg-soft, var(--wpa-ink-soft)); font-size: var(--wpa-fs-body); line-height: 1.6; } #wpr06-body .wpa-accordion__panel[hidden] { display: none; } #wpr06-body .wpa-accordion__panel > :first-child { margin-top: 0; } #wpr06-body .wpa-accordion__panel > :last-child { margin-bottom: 0; } /* Open/close motion lives in foundations.js (LashPop height spring on this clip + content fade, reduced-motion aware). The JS wraps each panel in .wpa-accordion__clip; only the clip changes height (overflow hidden only while it moves), so the panel's padding and text never reflow. Don't add CSS height/max-height/display transitions to the panel or the clip. */ #wpr06-body .wpa-accordion__clip { contain: layout style; } @keyframes wpa-reveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* ---------- Horizontal carousel primitive ---------- */ #wpr06-body .wpa-carousel { --wpa-per-view: 1; --wpa-carousel-gap: 24px; position: relative; } #wpr06-body .wpa-carousel__track { display: grid; grid-auto-flow: column; gap: var(--wpa-carousel-gap); grid-auto-columns: calc((100% - (var(--wpa-per-view) - 1) * var(--wpa-carousel-gap)) / var(--wpa-per-view)); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0; padding: 0; list-style: none; } #wpr06-body .wpa-carousel__track::-webkit-scrollbar { display: none; } #wpr06-body .wpa-carousel__track:focus-visible { outline: 2px solid var(--wpa-forest); outline-offset: 4px; } #wpr06-body .wpa-carousel__slide { scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; max-width: 100%; margin: 0; } /* max-width: a slide with aspect-ratio + min-height (Organics advantage cards) would otherwise widen past its column and overlap its neighbour. */ /* Swipe on the cards: native touch/trackpad scrolling (axis-locked by the browser), mouse drag in foundations.js. */ #wpr06-body .wpa-carousel__track { touch-action: pan-x pan-y pinch-zoom; } #wpr06-body .wpa-carousel__track :is(img, a, svg) { -webkit-user-drag: none; -webkit-touch-callout: none; } @media (hover: hover) and (pointer: fine) { #wpr06-body .wpa-carousel.is-scrollable:not([data-carousel-swipe="page"]) .wpa-carousel__track { cursor: grab; } #wpr06-body .wpa-carousel.is-scrollable:not([data-carousel-swipe="page"]) .wpa-carousel__track a { cursor: inherit; } } #wpr06-body .wpa-carousel:not([data-carousel-swipe="page"]):is(.is-dragging, .is-settling) .wpa-carousel__track { scroll-snap-type: none; scroll-behavior: auto; } #wpr06-body .wpa-carousel.is-dragging:not([data-carousel-swipe="page"]) .wpa-carousel__track { cursor: grabbing; user-select: none; -webkit-user-select: none; } #wpr06-body .wpa-carousel.is-dragging:not([data-carousel-swipe="page"]) .wpa-carousel__track * { pointer-events: none; } #wpr06-body .wpa-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--wpa-s4); margin-top: var(--wpa-s5); } #wpr06-body .wpa-carousel__arrows { display: flex; gap: var(--wpa-s3); } #wpr06-body .wpa-carousel__arrow { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: 52px; height: 52px; cursor: pointer; border-radius: 50% !important; /* Salient's slightly_rounded button rule forces 20px !important */ border: 2px solid var(--wpa-heading, var(--wpa-forest)); color: var(--wpa-heading, var(--wpa-forest)); font: 400 22px/1 var(--wpa-font-body); transition: background-color var(--wpa-dur-fast), color var(--wpa-dur-fast), opacity var(--wpa-dur-fast); } #wpr06-body .wpa-carousel__arrow:hover:not(:disabled) { background: var(--wpa-heading, var(--wpa-forest)); color: var(--wpa-surface, var(--wpa-cream)); } #wpr06-body .wpa-carousel__arrow:disabled { opacity: .3; cursor: default; } #wpr06-body .wpa-carousel__arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } #wpr06-body .wpa-carousel__tabs { display: flex; flex-wrap: wrap; gap: var(--wpa-s2); margin: 0; padding: 0; list-style: none; } #wpr06-body .wpa-carousel__tab { all: unset; box-sizing: border-box; cursor: pointer; padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; border-radius: var(--wpa-radius-pill); border: 2px solid transparent; color: var(--wpa-heading, var(--wpa-forest)); font: 700 13px/1.2 var(--wpa-font-body); letter-spacing: .06em; text-transform: uppercase; } #wpr06-body .wpa-carousel__tab:hover { border-color: currentColor; } #wpr06-body .wpa-carousel__tab[aria-current="true"] { background: var(--wpa-lime); border-color: var(--wpa-lime); color: var(--wpa-forest); } #wpr06-body .wpa-carousel__tab:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } #wpr06-body .wpa-carousel__tabs--dots .wpa-carousel__tab { width: 12px; height: 12px; min-height: 0; padding: 0; border-radius: 50%; background: color-mix(in srgb, currentColor 25%, transparent); border: 0; } #wpr06-body .wpa-carousel__tabs--dots .wpa-carousel__tab[aria-current="true"] { background: var(--wpa-lime); width: 32px; border-radius: 6px; } #wpr06-body .wpa-carousel__tabs--dots .wpa-carousel__tab::before { content: ''; position: absolute; inset: -16px -6px; } /* 44px hit area */ #wpr06-body .wpa-carousel__tabs--dots .wpa-carousel__tab { position: relative; } #wpr06-body .wpa-carousel__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { #wpr06-body .wpa-carousel__track { scroll-behavior: smooth; } } /* ---------- Header overlay contract (desktop + mobile interiors) ---------- A page opts in by marking its full-bleed hero with [data-header-overlay]. State classes on (set by foundations.js; :has() covers first paint): .wpa-hdr page has an overlay hero .wpa-hdr-over header currently sits over the hero (transparent, light ink) .wpa-hdr-past hero has scrolled past (header solid, hide/reveal as usual) .wpa-hdr-faded header faded out over the hero (Home: after the sky) Home's header visuals stay owned by A/cinematic (only fade applies there). */ html.wpa-hdr-faded #header-outer:not(:focus-within) { opacity: 0 !important; pointer-events: none !important; transition: opacity 360ms ease, transform 240ms ease !important; } html.wpa-hdr #header-outer { transition: opacity 360ms ease, transform 240ms ease, background-color 240ms ease !important; } /* Shared: overlay heroes start at the top of the viewport, under the header. */ html:has(#wpr06-body [data-header-overlay]) body.wpr02-page:not(.wpr06-home) #header-space { display: none !important; } /* Interior desktop: fixed header; transparent over the hero, solid after. */ @media (min-width: 1000px) { html:has(#wpr06-body [data-header-overlay]) body.wpr02-page:not(.wpr06-home) #header-outer { position: fixed !important; inset: 0 0 auto !important; width: 100% !important; z-index: 10000 !important; background: var(--wpa-hdr-surface, var(--wpa-cream)) !important; box-shadow: none !important; } html:has(#wpr06-body [data-header-overlay]) body.wpr02-page:not(.wpr06-home) #header-outer #top { background: transparent !important; box-shadow: none !important; } /* After the hero: header-v4.js hide/reveal decides visibility. */ html.wpa-hdr-past body.wpr02-page:not(.wpr06-home) #header-outer { transform: translateY(-104%) !important; } html.wpa-hdr-past body.wpr02-page:not(.wpr06-home) #header-outer:is(.wpr06-header-visible, :focus-within) { transform: none !important; } html.wpa-hdr-past body.wpr02-page:not(.wpr06-home) #header-outer.wpr06-header-occluded:not(:focus-within) { transform: translateY(-104%) !important; transition: none !important; } /* Sticky rails sit under a revealed header. */ html.wpa-hdr-past body.wpr06-header-shown #wpr06-body :is(.wpa-subnav, .sales-journey, .products-shelf, .org-journey, .colombia-journey) { top: var(--wpr06-header-height, 128px) !important; } } /* Over the hero but scrolled (Final QA, Oct 2): header-v4.js hides it on scroll-down and reveals it on scroll-up, so the logo never sits on the hero's own copy (desktop and phones; the transparent over-hero rule below would otherwise pin it with transform:none). */ html:has(#wpr06-body [data-header-overlay]).wpa-hdr-over body.wpr02-page.wpr06-header-managed:not(.wpr06-home) #header-outer:not(.wpr06-header-visible):not(:focus-within) { transform: translateY(-105%) !important; } /* Over the hero (desktop): transparent, light ink, soft top gradient. */ html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home) #header-outer { background: transparent !important; transform: none !important; } html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home) #header-outer::after { content: ''; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none; background: var(--wpa-hdr-gradient); } html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home):not([data-wpa-hdr-ink="dark"]) #header-outer { --lc-ink: #fff; color: #fff !important; } @media (min-width: 1000px) { html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home):not([data-wpa-hdr-ink="dark"]) #header-outer #logo img { filter: brightness(0) invert(1); } html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home):not([data-wpa-hdr-ink="dark"]) #header-outer #top nav > ul > li > a { color: #fff !important; } html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home):not([data-wpa-hdr-ink="dark"]) #header-outer #top nav > ul > li[class*="button_bordered"] > a::before { border-color: rgba(255, 255, 255, .85) !important; } html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home):not([data-wpa-hdr-ink="dark"]) #header-outer :is(#search-btn, .nectar-icon, .icon-salient-search) { color: #fff !important; } /* Dark solid sections: invert ink on the solid header too. */ html.wpa-hdr-past.wpa-hdr-dark body.wpr02-page:not(.wpr06-home) #header-outer #logo img { filter: brightness(0) invert(1); } html.wpa-hdr-past.wpa-hdr-dark body.wpr02-page:not(.wpr06-home) #header-outer #top nav > ul > li > a { color: var(--wpa-cream) !important; } } /* Mobile interiors (interior-header-c1 owns the compact bar). */ @media (max-width: 999px) { html:has(#wpr06-body [data-header-overlay]) body.wpr02-page:not(.wpr06-home) #ajax-content-wrap { padding-top: 0 !important; } html:has(#wpr06-body [data-header-overlay]) body.wpr02-page:not(.wpr06-home) #ajax-content-wrap::before { display: none !important; } html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home) #header-outer, html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home) #header-outer #top { background: transparent !important; } html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home) #header-outer::before { opacity: 0 !important; } html:has(#wpr06-body [data-header-overlay]):not(.wpa-hdr-past) body.wpr02-page:not(.wpr06-home):not([data-wpa-hdr-ink="dark"]) #header-outer #logo img { filter: brightness(0) invert(1); } } @media (prefers-reduced-motion: reduce) { html.wpa-hdr #header-outer, html.wpa-hdr-faded #header-outer { transition: none !important; } } /* ---------- Desktop nav at laptop widths (Final QA, Oct 2) ---------- Between the hamburger breakpoint (~1180px) and 1440px the Salient nav wrapped to two lines ("WEST PAK / WORLDWIDE", a two-line "GROWER / LOGIN" pill) and pushed the search icon off the right edge at 1280. Scale the nav type, gaps and the interior logo with the viewport. */ @media (min-width: 1000px) and (max-width: 1439px) { body.wpr02-page #header-outer #top nav > ul.sf-menu > li > a { white-space: nowrap !important; font-size: clamp(14px, 1.25vw, 19px) !important; } body.wpr02-page #header-outer #top nav > ul.sf-menu > li { margin-left: clamp(2px, .45vw, 10px) !important; } body.wpr02-page #header-outer #top nav > ul.sf-menu > li[class*="button_"] > a { padding-left: clamp(12px, 1.1vw, 20px) !important; padding-right: clamp(12px, 1.1vw, 20px) !important; } body.wpr02-page:not(.wpr06-home) #header-outer #logo img { max-width: clamp(140px, 13vw, 242px) !important; height: auto !important; } } /* ---------- Utilities ---------- */ #wpr06-body .wpa-container { max-width: var(--wpa-container); margin-inline: auto; padding-inline: var(--wpa-gutter); box-sizing: content-box; } #wpr06-body .wpa-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Source: assets/r06-1b4b1f164146cb864c00/foundations/marks.css */ /* West Pak R03 headline marks (SW-01 follow-up, Corey's Oct 2 review: "header text treatment"). A hand-drawn lime swoosh under, or ellipse around, one key phrase of a long headline, after the live westpakavocado.com treatments ("ORGANIC ADVANTAGE" ellipse, lime swoosh underline). Spec: docs/design-system.md §2a. Loaded right after foundations.css on pages that use it.

The West Pak Organic Advantage

Organic Shoppers Drive Stronger Results

One mark per headline, on 1–3 words. Colour: --wpa-mark-color (default lime; forest on lime/yellow bands automatically). Draw-in motion lives in foundations/motion.{css,js}. */ #wpr06-body .wpa-mark { --_swoosh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M3 16.5C70 6 172 2.5 296 7.2c2 .1 2.2 3.4.1 3.5C182 10 92 13.6 6.4 21.6 2.3 22 .6 17.4 3 16.5Z'/%3E%3C/svg%3E"); --_circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpath d='M64 13C158-1 290 12 293 47c3 37-133 49-224 41C12 83 1 57 17 36 36 12 112 4 196 9' fill='none' stroke='%23000' stroke-width='3.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); position: relative; display: inline-block; isolation: isolate; white-space: nowrap; } #wpr06-body .wpa-mark::after { content: ''; position: absolute; z-index: -1; pointer-events: none; left: -.03em; right: -.06em; bottom: -.17em; height: .23em; background: var(--wpa-mark-color, var(--wpa-lime)); -webkit-mask: var(--_swoosh) center / 100% 100% no-repeat; mask: var(--_swoosh) center / 100% 100% no-repeat; } /* Ellipse geometry is independent of the headline's line-height (line-height: 1 on the mark), and the mark's own vertical margins open its line just enough that the loop clears the lines above/below (it used to cut through "LET'S" on the .92 line-height Home CTA). Ink: ~.22em over the caps, ~.1em under the baseline; >= ~.1em clear air to the neighbouring line at 390-1440. */ #wpr06-body .wpa-mark--circle { line-height: 1; margin-block: .25em .12em; } #wpr06-body .wpa-mark--circle::after { left: -.3em; right: -.34em; top: -.15em; bottom: -.21em; height: auto; -webkit-mask-image: var(--_circle); mask-image: var(--_circle); } /* Room for the loop beside neighbouring words on wide screens; on phones the phrase usually starts its own line, where a left margin would indent it, so the loop simply reaches into the gutter. */ #wpr06-body .wpa-mark--circle { margin-right: .3em; } @media (min-width: 1000px) { #wpr06-body .wpa-mark--circle { margin-left: .14em; } } /* Lime disappears on lime/yellow bands: forest on lime, cream (the bag's white) on organic yellow. */ #wpr06-body [data-tone="lime"] .wpa-mark { --wpa-mark-color: var(--wpa-forest); } #wpr06-body [data-tone="yellow"] .wpa-mark { --wpa-mark-color: var(--wpa-cream); } /* A mark on a narrow screen may wrap only between whole marks, never inside one. */ @media (max-width: 420px) { #wpr06-body .wpa-mark--wrap { white-space: normal; } } /* Motion: the draw-in (swoosh wipes left to right, ellipse is drawn around the word) is played once by foundations/motion.js + motion.css as the heading arrives (SW-05). Without JS, or with reduced motion, the mark is simply there. */ /* Source: assets/r06-1b4b1f164146cb864c00/foundations/motion.css */ /* West Pak R03 site-wide motion (SW-05). Companion of foundations/motion.js; spec in docs/design-system.md §3a. Loaded right after foundations.css (and marks.css) on all five pages. Everything here is gated on html.wpa-motion (set by motion.js only when IntersectionObserver and Web Animations exist and the visitor has not asked for reduced motion), or on a mark carrying [data-wpa-draw], which only motion.js sets. Without JS the page renders exactly as authored. */ /* Boot: the per-page block reveals ([data-reveal], [data-rise]) are switched to their final state in one style pass with transitions off, so the item reveals below never double up with them. */ html.wpa-motion-boot :is([data-reveal], [data-reveal] > li, [data-rise], [data-rise] .hm-mark--marker) { transition: none !important; } /* JS disabled: the older page rules hide [data-reveal]/[data-rise] blocks until a script reveals them (AVO360 and Home do so even without a JS class). Show them. */ @media (scripting: none) { #wpr06-body :is([data-reveal], [data-reveal] > li, [data-rise]) { opacity: 1 !important; transform: none !important; } } /* ---------- Headline marks: draw once as the heading arrives ---------- Final appearance is marks.css untouched: [data-wpa-draw] is removed when the draw ends. pre = waiting below the fold (ink hidden), go = drawing (delay from --wpa-draw-delay). */ /* Swoosh underline: a left-to-right pen stroke (clip wipe). */ #wpr06-body .wpa-mark[data-wpa-draw="pre"]::after { clip-path: inset(-20% 100% -20% 0); } #wpr06-body .wpa-mark[data-wpa-draw="go"]::after { animation: wpa-swoosh 680ms cubic-bezier(.55, .05, .25, 1) var(--wpa-draw-delay, 0ms) both; } @keyframes wpa-swoosh { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% 0 -20% 0); } } /* Ellipse: drawn around the word like a pen, clockwise from the stroke's own start (top left), by intersecting the ellipse mask with a growing conic sweep (--wpa-sweep, registered by motion.js). Browsers without registered properties get the clip wipe above instead. */ html.wpa-sweep #wpr06-body .wpa-mark--circle:is([data-wpa-draw="pre"], [data-wpa-draw="go"])::after { clip-path: none; -webkit-mask-image: var(--_circle), conic-gradient(from 288deg at 50% 50%, #000 var(--wpa-sweep), transparent 0); mask-image: var(--_circle), conic-gradient(from 288deg at 50% 50%, #000 var(--wpa-sweep), transparent 0); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; } html.wpa-sweep #wpr06-body .wpa-mark--circle[data-wpa-draw="pre"]::after { --wpa-sweep: 0deg; } html.wpa-sweep #wpr06-body .wpa-mark--circle[data-wpa-draw="go"]::after { animation: wpa-sweep 760ms cubic-bezier(.5, .05, .3, 1) var(--wpa-draw-delay, 0ms) both; } @keyframes wpa-sweep { from { --wpa-sweep: 0deg; } to { --wpa-sweep: 360deg; } } /* Home marker highlight (hm-mark--marker): wipes in behind the word, left to right. Replaces the transition home-design-r03.css ties to [data-rise]; no state attribute = the static band. */ html.wpa-motion body.wpr06-home #home-experience .hm-mark--marker.hm-mark--marker { transition: none; } html.wpa-motion body.wpr06-home #home-experience .hm-mark--marker[data-wpa-draw="pre"] { background-size: 0 100%; } html.wpa-motion body.wpr06-home #home-experience .hm-mark--marker[data-wpa-draw="go"] { animation: wpa-marker 620ms cubic-bezier(.6, 0, .2, 1) var(--wpa-draw-delay, 0ms) both; } @keyframes wpa-marker { from { background-size: 0 100%; } to { background-size: 100% 100%; } } @media (prefers-reduced-motion: reduce) { #wpr06-body [data-wpa-draw]::after, #wpr06-body .hm-mark--marker[data-wpa-draw] { animation: none !important; clip-path: none !important; } #wpr06-body .hm-mark--marker[data-wpa-draw] { background-size: 100% 100% !important; } #wpr06-body .wpa-mark--circle[data-wpa-draw]::after { -webkit-mask-image: var(--_circle) !important; mask-image: var(--_circle) !important; } } /* Source: assets/r06-1b4b1f164146cb864c00/ui/mobile-nav-g21.css */ /* G21: one quiet, tactile mobile chapter rail on the reviewed interior pages. */ @media (max-width: 700px) { #wpr06-body #westpak-refresh:is(.colombia, .products, .sales) > :is(.colombia-journey, .products-shelf, .sales-journey) { top: 0; z-index: 999; height: 54px; padding: 0; overflow: hidden; border: 0; border-bottom: 1px solid #dce5d7; background: #f8faf4; box-shadow: 0 8px 20px rgb(34 57 26 / 7%); } #wpr06-body #westpak-refresh:is(.products, .sales) > :is(.products-shelf, .sales-journey) .wpr06-mini-header, #wpr06-body #westpak-refresh.sales > .sales-journey > .sales-location { display: none !important; } #wpr06-body #westpak-refresh:is(.colombia, .products, .sales) > :is(.colombia-journey, .products-shelf, .sales-journey) > .wrap { width: 100%; max-width: none; margin: 0; padding: 0; } #wpr06-body #westpak-refresh:is(.colombia, .products, .sales) :is(.colombia-journey-list, .products-shelf-list, .sales-journey-list) { display: flex; align-items: center; width: 100%; height: 53px; gap: 6px; margin: 0; padding: 5px 16px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; list-style: none; } #wpr06-body #westpak-refresh:is(.colombia, .products, .sales) :is(.colombia-journey-list, .products-shelf-list, .sales-journey-list)::-webkit-scrollbar { display: none; } #wpr06-body #westpak-refresh:is(.colombia, .products, .sales) :is(.colombia-journey-list, .products-shelf-list, .sales-journey-list) li { flex: 0 0 auto; width: auto; min-width: 0; scroll-snap-align: center; list-style: none; } #wpr06-body #westpak-refresh:is(.colombia, .products, .sales) :is(.colombia-journey-list, .products-shelf-list, .sales-journey-list) a { display: flex; align-items: center; justify-content: center; min-width: 0; width: auto; height: 42px; min-height: 42px; gap: 0; padding: 0 15px; border: 0; border-radius: 22px; background: transparent; box-shadow: none; color: #345136; font: 700 12px/1.15 "Open Sans", sans-serif; letter-spacing: .005em; text-align: center; text-decoration: none; white-space: nowrap; transition: background-color .18s ease, color .18s ease; } #wpr06-body #westpak-refresh:is(.colombia, .products, .sales) :is(.colombia-journey-list, .products-shelf-list, .sales-journey-list) a[data-g21-current="true"] { color: #233819; background: #f5d943; box-shadow: none; } #wpr06-body #westpak-refresh:is(.colombia, .products, .sales) :is(.colombia-journey-list, .products-shelf-list, .sales-journey-list) a:focus-visible { outline: 2px solid #234f76; outline-offset: -2px; } #wpr06-body #westpak-refresh.colombia .colombia-journey-list a > span:first-child, #wpr06-body #westpak-refresh.colombia .colombia-journey-list a > span:last-child, #wpr06-body #westpak-refresh.products .products-shelf-number, #wpr06-body #westpak-refresh.sales .sales-journey-list a > span:first-child, #wpr06-body #westpak-refresh.sales .sales-journey-list a > span:last-child { display: none; } #wpr06-body #westpak-refresh.products .products-shelf-name { font: inherit; white-space: nowrap; } #wpr06-body #westpak-refresh.products .products-shelf-name br { display: none; } #wpr06-body #westpak-refresh.colombia .colombia-story__map-heading { display: none; } #wpr06-body #westpak-refresh.colombia .colombia-story__map-column { top: 54px; height: min(45svh, 390px); min-height: 300px; } #wpr06-body #westpak-refresh.colombia .colombia-story__map-frame { height: 100%; border-top: 0; } #wpr06-body #westpak-refresh.colombia .colombia-story__chapter { border-bottom: 0; padding-top: 42px; } #wpr06-body #westpak-refresh.colombia :is(#why-colombia, #colombia-experience, #colombia-geography, #colombia-program), #wpr06-body #westpak-refresh.sales .sales-pillar, #wpr06-body #westpak-refresh.sales .sales-connect, #wpr06-body #westpak-refresh.products .product-collection { scroll-margin-top: 70px; } } @media (max-width: 700px) and (prefers-reduced-motion: reduce) { #wpr06-body #westpak-refresh:is(.colombia, .products, .sales) :is(.colombia-journey-list, .products-shelf-list, .sales-journey-list) a { transition: none; } } /* Source: assets/r06-1b4b1f164146cb864c00/shared/arrow-svg-g27.css */ #wpr06-body .wpr06-vector-arrow { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -.12em; overflow: visible; } /* The swipe cue is informational; its arrow uses the same SVG geometry. */ @media (max-width: 700px) { body.wpr06-home #home-experience .products .product-stage::after { content: "SWIPE IMAGE OR TABS"; padding-right: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8h12m-5-5 5 5-5 5'/%3E%3C/svg%3E") no-repeat right center / 11px 11px; } } /* Source: assets/r06-1b4b1f164146cb864c00/cinematic/edge-g26.css */ /* The status extension follows the visible top layer, separately from bottom bounce. */ html:has(> body.wpr06-page) { background-color: var(--g26-edge-top, #fff) !important; } body.wpr06-page { background-color: var(--g26-edge-bottom, #f4f4f4) !important; } /* Source: assets/r06-1b4b1f164146cb864c00/ui/interior-header-c1.css */ /* Lane C: native Salient header, compact at the theme's 999px breakpoint. Visibility remains exclusively owned by feedback/header-v4.js. */ .lc-section-toggle, .lc-section-panel, .lc-progress { display: none; } @media (max-width: 999px) { html.lc-interior { --lc-safe-top: env(safe-area-inset-top, 0px); --lc-bar-height: 60px; --lc-header-height: calc(var(--lc-bar-height) + var(--lc-safe-top)); background-color: var(--lc-edge-top, #fff) !important; } html body.lc-interior { --lc-ink: #213619; --lc-surface: #fff; --lc-hero: #fff; --lc-surface-opacity: 1; } html body.lc-interior #ajax-content-wrap { padding-top: var(--lc-header-height) !important; } html body.lc-interior #ajax-content-wrap::before { content: ''; position: absolute; inset: 0 0 auto; height: var(--lc-header-height); background: var(--lc-hero); pointer-events: none; } html body.lc-interior #header-space { display: none !important; } html body.lc-interior.wpr06-header-managed #header-outer { height: var(--lc-header-height) !important; min-height: 0 !important; padding: 0 !important; color: var(--lc-ink) !important; background: var(--lc-surface) !important; box-shadow: none !important; overflow: visible !important; transition: transform 220ms cubic-bezier(.2,.7,.2,1), opacity 180ms ease !important; transform: translate3d(0,-105%,0) !important; /* A translated-away header must not remain painted behind Safari's status region. Its existing visibility owner still controls when it returns. */ opacity: 0 !important; pointer-events: none !important; } html body.lc-interior.wpr06-header-managed #header-outer.wpr06-header-visible, html body.lc-interior.wpr06-header-managed #header-outer:focus-within { transform: translate3d(0,0,0) !important; opacity: 1 !important; pointer-events: auto !important; } html body.lc-interior.wpr06-header-managed #header-outer.wpr06-header-occluded:not(:focus-within) { transform: translate3d(0,-105%,0) !important; opacity: 0 !important; pointer-events: none !important; } html body.lc-interior #header-outer::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--lc-surface); opacity: var(--lc-surface-opacity); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background-color 180ms ease, opacity 180ms ease; } html body.lc-interior #header-outer #top { background: var(--lc-surface) !important; box-shadow: none !important; padding: var(--lc-safe-top) 0 0 !important; height: var(--lc-header-height) !important; box-sizing: border-box !important; } html body.lc-interior #header-outer #top > .container { width: 100% !important; max-width: none !important; height: 60px !important; padding: 0 max(12px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left)) !important; } html body.lc-interior #header-outer #top > .container > .row { display: grid !important; grid-template-columns: 108px minmax(0,1fr) 88px; align-items: center !important; gap: 8px; height: 60px !important; margin: 0 !important; } html body.lc-interior #header-outer #top .span_3 { grid-column: 1; grid-row: 1; width: auto !important; margin: 0 !important; float: none !important; height: 60px !important; display: flex; align-items: center; } html body.lc-interior #header-outer #top #logo { margin: 0 !important; height: 44px !important; width: 108px !important; display: flex !important; align-items: center; } html body.lc-interior #header-outer #top #logo img { width: 108px !important; height: auto !important; max-height: 38px !important; position: static !important; transform: none !important; } html body.lc-interior[data-lc-tone="dark"] #header-outer #logo img { filter: brightness(0) invert(1); } html body.lc-interior #header-outer #top .span_9 { grid-column: 3; grid-row: 1; display: flex !important; align-items: center; justify-content: flex-end; width: 88px !important; height: 60px !important; position: static !important; margin: 0 !important; float: none !important; } html body.lc-interior #header-outer #top .mobile-header { display: none !important; } html body.lc-interior #header-outer #top .mobile-search, html body.lc-interior #header-outer #top .slide-out-widget-area-toggle { position: relative !important; inset: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; float: none !important; margin: 0 !important; padding: 0 !important; width: 44px !important; height: 44px !important; } html body.lc-interior #header-outer #top .slide-out-widget-area-toggle a { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; } html body.lc-interior #header-outer #top .mobile-search, html body.lc-interior #header-outer #top .mobile-search .nectar-icon { color: var(--lc-ink) !important; } html body.lc-interior #header-outer .slide-out-widget-area-toggle .lines, html body.lc-interior #header-outer .slide-out-widget-area-toggle .lines::before, html body.lc-interior #header-outer .slide-out-widget-area-toggle .lines::after { background-color: var(--lc-ink) !important; } html body.lc-interior .lc-section-toggle { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; min-height: 44px; width: 100%; margin: 0; padding: 4px 0; border: 0; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--lc-ink); font: 600 12px/1.2 'Open Sans', sans-serif; cursor: pointer; touch-action: pan-y; } html body.lc-interior .lc-section-toggle[hidden] { display: none !important; } .lc-section-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lc-section-count { flex: none; font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 400; } .lc-chevron { flex: none; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-right: 2px; } .lc-section-toggle[aria-expanded="true"] .lc-chevron { transform: rotate(225deg); } html body.lc-interior .lc-progress { display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: transparent; pointer-events: none; } html body.lc-interior .lc-progress[hidden] { display: none !important; } .lc-progress > span { display: block; width: 100%; height: 2px; background: var(--lc-ink); transform-origin: left; transform: scaleX(var(--lc-progress,0)); transition: transform 180ms ease; } html body.lc-interior .lc-section-panel { display: block; position: absolute; top: 100%; left: 0; right: 0; max-height: min(280px,50dvh); overflow: auto; overscroll-behavior: contain; padding: 8px 16px 12px; margin: 0; background: var(--lc-surface); color: var(--lc-ink); border-bottom: 1px solid currentColor; } html body.lc-interior .lc-section-panel[hidden] { display: none !important; } .lc-section-panel a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; padding: 8px 0; box-sizing: border-box; color: inherit !important; font: 600 13px/1.4 'Open Sans', sans-serif; text-decoration: none; border-bottom: 1px solid color-mix(in srgb,currentColor 15%,transparent); } .lc-section-panel a:last-child { border-bottom: 0; } .lc-section-panel a[aria-current="location"] { text-decoration: underline; text-underline-offset: 4px; } html body.lc-interior #header-outer :is(a,button):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Hide only the verified chapter rails after successful enhancement. */ html body.lc-interior #wpr06-body [data-lc-source-nav] { display: none !important; } /* Existing G21/G5 map transport stays intact; only free the removed rail's inset. */ html body.lc-interior #wpr06-body #westpak-refresh.colombia .colombia-story__map-column { top: var(--lc-safe-top) !important; } html body.lc-interior #search-outer { color: #213619 !important; } } /* M08: translating the closed search drawer above a header at runway y=64 still leaves 63px of its white surface on screen. Closed drawers must not paint or receive input; the existing open class retains its full surface. */ html body.lc-interior.wpr06-header-managed #header-outer #search-outer:not(.material-open) { visibility: hidden !important; pointer-events: none !important; } html body.lc-interior.wpr06-header-managed #header-outer #search-outer.material-open { visibility: visible !important; pointer-events: auto !important; } @media (max-width: 359px) { html body.lc-interior #header-outer #top > .container > .row { grid-template-columns: 88px minmax(0,1fr) 88px; gap: 4px; } html body.lc-interior #header-outer #top #logo, html body.lc-interior #header-outer #top #logo img { width: 88px !important; } } @media (prefers-reduced-motion: reduce) { html body.lc-interior.wpr06-header-managed #header-outer, html body.lc-interior #header-outer::before, .lc-progress > span { transition: none !important; } } @media (max-width: 999px) { /* Match G15's visible-state specificity so its white Products/Sales fill cannot paint over the section surface or erase the inverse logo. */ html body.lc-interior.wpr06-header-managed #header-outer:is(.wpr06-header-visible,:focus-within), html body.lc-interior.wpr06-header-managed #header-outer:is(.wpr06-header-visible,:focus-within) #top { background: var(--lc-surface) !important; } html body.lc-interior #header-outer .bg-color-stripe { display: none !important; } html body.lc-interior #header-outer #top { position: relative; z-index: 1; } html body.lc-interior #header-outer .lc-progress { z-index: 2; } html body.lc-interior #header-outer .lc-section-panel { z-index: 3; } html body.lc-interior #ajax-content-wrap::before { z-index: 1; } } /* 2026-09-25 user correction: no thin line at the bottom of the header. */ @media(max-width:999px){html body.lc-interior .lc-progress,html body.lc-interior .lc-progress > span{display:none !important;}body.lc-interior #header-outer,body.lc-interior #header-outer #top{border-bottom:0 !important;}} /* R02 cold mobile first paint: reserve the existing 60px header before the presentation module and its dynamically imported visibility owner arrive. These rules expire when the existing controller takes ownership. */ @media (max-width: 999px) { html:not(.no-js) body.wpr02-page:is(.wpr02-products,.wpr02-sales,.wpr02-organics,.wpr02-colombia):not(.wpr06-header-managed) #ajax-content-wrap { padding-top: calc(60px + env(safe-area-inset-top, 0px)) !important; } /* Colombia's published film starts behind the header, without an inset. */ html:not(.no-js) body.wpr02-page.wpr02-colombia:not(.wpr06-header-managed) #ajax-content-wrap { padding-top: 0 !important; } html:not(.no-js) body.wpr02-page:is(.wpr02-products,.wpr02-sales,.wpr02-organics,.wpr02-colombia):not(.wpr06-header-managed) #header-outer { position: fixed !important; inset: 0 0 auto !important; width: 100% !important; height: calc(60px + env(safe-area-inset-top, 0px)) !important; min-height: 0 !important; padding: 0 !important; } } /* Source: assets/r06-1b4b1f164146cb864c00/shared/combined-p0-lane-b/lane-b.css */ /* Combined P0 lane B. Append after existing page styles; no Home layout rules. */ /* Suppress decorative labels with their borders and pseudo-element rules. Sales steps and the changing Home product name carry meaningful context. */ #wpr06-body .eyebrow:not(:has(.sales-step)):not(.product-stage__copy > .eyebrow), #wpr06-body .wpr06-flow-label, #wpr06-body .globe-story__eyebrow, #wpr06-body .colombia-story__eyebrow, #wpr06-body .colombia-story__map-heading > span, #wpr06-body .wp-map__eyebrow, #wpr06-body .colombia-program-label, #wpr06-body .colombia-story__map-credit, #wpr06-body [data-lane-b-caption] { display: none !important; } /* Retain actual progress / product identity without the eyebrow treatment. */ #wpr06-body .eyebrow:has(.sales-step), #wpr06-body .product-stage__copy > .eyebrow { border: 0 !important; padding-left: 0 !important; background: none !important; text-transform: none !important; letter-spacing: normal !important; } #wpr06-body .eyebrow:has(.sales-step)::before, #wpr06-body .eyebrow:has(.sales-step)::after, #wpr06-body .product-stage__copy > .eyebrow::before, #wpr06-body .product-stage__copy > .eyebrow::after { content: none !important; display: none !important; } #wpr06-body .eyebrow .sales-step { border: 0 !important; padding-right: 0 !important; } /* Match the other bag cards: an upright real bag with its own clear image area. The accessible Classic title remains in the adjacent card copy. */ #wpr06-body #westpak-refresh.products .product-classic-word { display: none; } #wpr06-body #westpak-refresh.products .product-classic-media { background: #fff; } #wpr06-body #westpak-refresh.products .product-classic-media > img { width: 100%; max-width: 340px; height: 320px; margin: 0 auto; transform: none; object-fit: contain; } @media (max-width: 760px) { #wpr06-body #westpak-refresh.products .product-classic-media > img { max-width: 280px; height: 260px; } } /* Preserve anchor navigation, current-state attributes, and keyboard focus. The underline remains visible in forced-colors modes. */ #wpr06-body #westpak-refresh:is(.products, .colombia) :is(.products-shelf-list, .colombia-journey-list) a { border-radius: 0; } #wpr06-body #westpak-refresh:is(.products, .colombia) :is(.products-shelf-list, .colombia-journey-list) a:is([data-g21-current="true"], [aria-current="location"], :hover, :focus-visible) { background: transparent; box-shadow: none; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } #wpr06-body #westpak-refresh:is(.products, .colombia) :is(.products-shelf-list, .colombia-journey-list) a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; } /* Salient's blockquote chrome must not overlap the three authored quotes. */ #wpr06-body #westpak-refresh.colombia .colombia-perspective-quotes { align-items: stretch; } #wpr06-body #westpak-refresh.colombia .colombia-perspective-quotes > blockquote { position: relative; min-width: 0; margin: 0; padding: 0 0 0 24px; border: 0; border-left: 3px solid #f4d53f; box-shadow: none; } #wpr06-body #westpak-refresh.colombia .colombia-perspective-quotes > blockquote::before, #wpr06-body #westpak-refresh.colombia .colombia-perspective-quotes > blockquote::after { content: none; display: none; } #wpr06-body #westpak-refresh.colombia .colombia-perspective-quotes > blockquote > p, #wpr06-body #westpak-refresh.colombia .colombia-perspective-quotes > blockquote > footer { margin-left: 0; padding-left: 0; text-indent: 0; transform: none; } /* Source: assets/r06-1b4b1f164146cb864c00/review-polish-r03/shared-interior.css */ /* Match Organics' established 128px desktop header on the other R02 interior pages. The cinematic Home keeps its separate 76px header. */ @media (min-width: 761px) { body.wpr02-page:is(.wpr02-products, .wpr02-sales, .wpr02-colombia) #header-space, body.wpr02-page:is(.wpr02-products, .wpr02-sales, .wpr02-colombia) #header-outer, body.wpr02-page:is(.wpr02-products, .wpr02-sales, .wpr02-colombia) #top, body.wpr02-page:is(.wpr02-products, .wpr02-sales, .wpr02-colombia) #top > .container, body.wpr02-page:is(.wpr02-products, .wpr02-sales, .wpr02-colombia) #top > .container > .row, body.wpr02-page:is(.wpr02-products, .wpr02-sales, .wpr02-colombia) #top nav, body.wpr02-page:is(.wpr02-products, .wpr02-sales, .wpr02-colombia) #top nav > ul, body.wpr02-page:is(.wpr02-products, .wpr02-sales, .wpr02-colombia) #top nav > ul > li { height: 128px !important; } body.wpr02-page:is(.wpr02-products, .wpr02-sales, .wpr02-colombia) #top nav > ul > li > a { line-height: 128px !important; } } /* R02 copied the Lane C mobile header presentation but omitted its visibility controller and fixed-position companion. Keep the native controls reachable after the chapter toggle appears below the first section. */ @media (max-width: 999px) { html body.wpr02-page.lc-interior.wpr06-header-managed #header-outer { position: fixed !important; inset: 0 0 auto !important; z-index: 10000 !important; width: 100% !important; } } /* Source: assets/r06-1b4b1f164146cb864c00/review-qa/q5-header.css */ /* Preview R02 Q5: keep wrapped desktop header labels inside the 128px row. */ @media (min-width: 1000px) { html body.wpr02-page:is(.wpr02-sales, .wpr02-products, .wpr02-organics, .wpr02-colombia) #header-outer #top nav > ul > li > a { line-height: 1.15 !important; height: 100% !important; display: flex !important; align-items: center !important; } } /* Source: assets/r06-1b4b1f164146cb864c00/review-quality-q3/footer-accessibility.css */ /* Preview-only Q3 candidate. Enqueue only on /review-2026-10-r03/ routes. */ body[class*="wpr0"] .nectar-global-section.before-footer a[href*="/legal-terms/"] { text-decoration: underline; text-underline-offset: 0.16em; text-decoration-thickness: max(1px, 0.07em); } body[class*="wpr0"] .nectar-global-section.before-footer a:focus-visible { outline: 2px solid #2b4216; outline-offset: 3px; border-radius: 2px; } /* Source: assets/r06-1b4b1f164146cb864c00/review-quality-q7/mobile-menu.css */ /* Local Q7 candidate. Enqueue only on West Pak review routes. */ body[class*="wpr0"] #slide-out-widget-area .q7-menu-close { position: absolute; top: 16px; right: 16px; z-index: 10; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: transparent; color: #fff; font: 32px/1 sans-serif; cursor: pointer; } body[class*="wpr0"].material-ocm-open > .slide_out_area_close__wrap { pointer-events: none; opacity: 0; } body[class*="wpr0"] #slide-out-widget-area .q7-menu-close:focus-visible, body[class*="wpr0"] #slide-out-widget-area .ocm-dropdown-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } body[class*="wpr0"] #slide-out-widget-area .ocm-dropdown-arrow[role="button"] { cursor: pointer; } /* Home already has a visible 44px header toggle. Show its open state as Close. */ body.wpr06-home.material-ocm-open #header-outer .slide-out-widget-area-toggle.mobile-icon a[href="#slide-out-widget-area"] { position: relative; } body.wpr06-home.material-ocm-open #header-outer .slide-out-widget-area-toggle.mobile-icon a[href="#slide-out-widget-area"] > span[aria-hidden="true"] { visibility: hidden !important; } body.wpr06-home.material-ocm-open #header-outer .slide-out-widget-area-toggle.mobile-icon a[href="#slide-out-widget-area"]::after { content: "×" !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font: 32px/1 sans-serif; text-decoration: none; pointer-events: none; } /* Source: assets/r06-1b4b1f164146cb864c00/review-qa/t3-review-footer.css */ /* Review-only mobile clearance for the hosted feedback toolbar. The widget's fixed 56px bar sits 16px above the bottom edge; 80px of footer space lets the final copyright/legal line scroll fully above it. */ @media (max-width: 700px) { body.wpr06-page:has([data-branch-comments]) .nectar-global-section.before-footer { padding-bottom: 80px; } } /* Source: assets/r06-1b4b1f164146cb864c00/colombia-r03/colombia.css */ /* Discover Colombia, Round 3 (CO-01, CO-02, CO-03). Page-specific layout only. Tokens, type, buttons, section pattern, sub-nav and the header overlay come from A/foundations (docs/design-system.md). */ /* ---------- Page base ---------- */ /* Salient sets body{overflow:hidden}, which makes a (never scrolling) scroll container and defeats position:sticky for the sub-nav. Clip only the x axis, as Organics and AVO360 do; the page still scrolls on . */ html body.wpr02-page.wpr02-colombia { overflow: clip visible !important; } #wpr06-body #westpak-refresh.colombia { background: var(--wpa-cream); color: var(--wpa-ink); font-family: var(--wpa-font-body); font-size: var(--wpa-fs-body); line-height: var(--wpa-lh-body); -webkit-font-smoothing: antialiased; } #wpr06-body #westpak-refresh.colombia *, #wpr06-body #westpak-refresh.colombia *::before, #wpr06-body #westpak-refresh.colombia *::after { box-sizing: border-box; } #wpr06-body #westpak-refresh.colombia :is(img, video, picture) { display: block; max-width: 100%; } #wpr06-body #westpak-refresh.colombia figure { margin: 0; } #wpr06-body #westpak-refresh.colombia p { margin: 0; padding: 0; } /* The p reset above outranks the foundations' centred-lede rule; restore it. */ #wpr06-body #westpak-refresh.colombia .wpa-section__head--center .wpa-lede { margin-inline: auto; } #wpr06-body #westpak-refresh.colombia :is(ul, ol) { margin: 0; padding: 0; list-style: none; } #wpr06-body #westpak-refresh.colombia li { list-style: none; } #wpr06-body #westpak-refresh.colombia abbr[title] { text-decoration: none; border: 0; } #wpr06-body #westpak-refresh.colombia .wpa-section[id] { scroll-margin-top: 72px; } /* ---------- Hero: full-viewport film, nothing floating on it ---------- */ #wpr06-body .co-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; width: 100%; min-height: 100vh; min-height: 100svh; background: #3b4852; color: #fff; } #wpr06-body .co-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } #wpr06-body .co-hero__media :is(picture, img, video) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } #wpr06-body .co-hero__video { opacity: 0; transition: opacity 900ms ease; } #wpr06-body .co-hero__media.is-playing .co-hero__video { opacity: 1; } #wpr06-body .co-hero__media.is-ending .co-hero__video { opacity: 0; transition-duration: 700ms; } #wpr06-body .co-hero__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(10, 18, 6, .34) 0%, rgba(10, 18, 6, .14) 38%, rgba(10, 18, 6, 0) 60%), linear-gradient(180deg, rgba(10, 18, 6, 0) 40%, rgba(10, 18, 6, .44) 74%, rgba(10, 18, 6, .68) 100%); } #wpr06-body .co-hero__inner { position: relative; z-index: 1; width: 100%; max-width: calc(var(--wpa-container) + 2 * var(--wpa-gutter)); margin: 0 auto; padding: calc(var(--wpa-hdr-h) + var(--wpa-s6)) var(--wpa-gutter) clamp(96px, 14vh, 150px); } #wpr06-body #westpak-refresh.colombia .co-hero__title { margin: 0 0 var(--wpa-s6); color: #fff; font-family: var(--wpa-font-display); font-weight: var(--wpa-fw-display); font-size: var(--wpa-fs-display); line-height: var(--wpa-lh-display); letter-spacing: var(--wpa-tracking-heading); text-transform: uppercase; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); } /* "Discover / COLOMBIA": the verb light, the place bold with the lime swoosh (Corey, Oct 2). */ #wpr06-body #westpak-refresh.colombia .co-hero__title .co-hero__lead { display: block; font-weight: 300; letter-spacing: .02em; opacity: .94; } #wpr06-body #westpak-refresh.colombia .co-hero__title .co-hero__word { font-weight: 700; letter-spacing: .005em; margin-bottom: .14em; } #wpr06-body #westpak-refresh.colombia .co-hero__title .co-hero__word::after { bottom: -.13em; height: .21em; } #wpr06-body .co-hero__line { max-width: 52ch; color: rgba(255, 255, 255, .94); font-size: var(--wpa-fs-lede); line-height: 1.5; text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); } #wpr06-body .co-film-toggle { position: absolute; z-index: 2; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; background: rgba(10, 18, 6, .45); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color var(--wpa-dur-fast) ease; } #wpr06-body .co-film-toggle:hover { background: rgba(10, 18, 6, .7); } #wpr06-body .co-film-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } #wpr06-body .co-film-toggle[hidden] { display: none; } #wpr06-body .co-film-toggle svg { width: 18px; height: 18px; } #wpr06-body .co-film-toggle:not(.is-paused) .co-film-toggle__play, #wpr06-body .co-film-toggle.is-paused .co-film-toggle__pause { display: none; } @media (prefers-reduced-motion: reduce) { #wpr06-body .co-hero__video, #wpr06-body .co-film-toggle { display: none !important; } } @media (max-width: 999px) { #wpr06-body .co-hero__inner { padding-top: calc(var(--wpa-hdr-h) + var(--wpa-s5)); padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 600px) { #wpr06-body .co-hero { min-height: max(560px, 100svh); } @supports (height: 100lvh) { #wpr06-body .co-hero { min-height: calc(max(560px, 100lvh) + var(--wpa-runway, 0px) + var(--wpa-toolbar-bleed, 0px)); } } #wpr06-body .co-hero__media::after { background: linear-gradient(180deg, rgba(10, 18, 6, .18) 0%, rgba(10, 18, 6, 0) 22%, rgba(10, 18, 6, .3) 60%, rgba(10, 18, 6, .72) 100%); } } /* ---------- Edge-to-edge film on iPhone (CO-01, Oct 2; technique in docs/design-system.md §6a) ---------- iOS 26 Safari floats translucent bars over the page. The hero is sized to the large viewport (lvh: the screen with the bars collapsed), so the film runs under the bottom toolbar too; the copy and the pause button are lifted by the bar's height (lvh - svh) plus the home-indicator inset. colombia.js adds a 64px top runway (--wpa-runway) and scrolls to it on a fresh load, so Safari composites the film under the status bar instead of a flat colour. */ @media (max-width: 999px) { #wpr06-body .co-hero__inner { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px) + (100lvh - 100svh) + var(--wpa-toolbar-bleed, 0px)); } #wpr06-body .co-film-toggle { bottom: calc(24px + env(safe-area-inset-bottom, 0px) + (100lvh - 100svh) + var(--wpa-toolbar-bleed, 0px)); } } /* SW-02: the shared runway supplies the hero's pixels above the viewport; no second scroll owner. */ html.wpa-runway #wpr06-body .co-hero { margin-top: calc(-1 * var(--wpa-runway)); } /* ---------- Why Colombia: head, then film still beside three points ---------- */ #wpr06-body .co-why__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wpa-s8); align-items: center; } #wpr06-body .co-why__media { overflow: hidden; border-radius: var(--wpa-radius-lg); aspect-ratio: 4 / 3; } #wpr06-body .co-why__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } #wpr06-body .co-why__points { max-width: none; gap: var(--wpa-s6); } @media (max-width: 900px) { #wpr06-body .co-why__grid { grid-template-columns: 1fr; gap: var(--wpa-s7); } #wpr06-body .co-why__media { aspect-ratio: 16 / 10; } } /* ---------- Program: forest band, one big numeral, three proof points ---------- */ #wpr06-body .co-program__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wpa-s9); align-items: center; margin-bottom: var(--wpa-s9); } #wpr06-body .co-program__head { margin: 0; } #wpr06-body .co-program__head .wpa-title { margin-bottom: var(--wpa-s5); } #wpr06-body #westpak-refresh.colombia .co-program__stats { grid-template-columns: 1fr; justify-items: start; margin-top: var(--wpa-s8); } /* The numeral's comma hangs below its line box; give the label room so they never touch. */ #wpr06-body .co-program__stats .wpa-stat__value { line-height: 1; } #wpr06-body .co-program__stats .wpa-stat__label { margin-top: .9em; letter-spacing: .03em; } #wpr06-body .co-program__head .wpa-section__actions { margin-top: var(--wpa-s7); } #wpr06-body .co-program__media { overflow: hidden; border-radius: var(--wpa-radius-lg); aspect-ratio: 4 / 5; max-width: 480px; justify-self: end; width: 100%; } #wpr06-body .co-program__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; } /* Three proof points as equal columns, each under its own lime rule (no floating bullets). */ #wpr06-body #westpak-refresh.colombia .co-program__points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wpa-s7) var(--wpa-s8); } #wpr06-body #westpak-refresh.colombia .co-program__points > li { padding: var(--wpa-s5) 0 0; border-top: 2px solid var(--wpa-lime); color: var(--wpa-fg-soft); } #wpr06-body .co-program__points > li::before { content: none; } #wpr06-body .co-program__points > li > strong:first-child { margin-bottom: var(--wpa-s2); } @media (max-width: 900px) { #wpr06-body .co-program__grid { grid-template-columns: 1fr; gap: var(--wpa-s7); margin-bottom: var(--wpa-s8); } #wpr06-body .co-program__media { max-width: none; aspect-ratio: 4 / 3; justify-self: stretch; } #wpr06-body #westpak-refresh.colombia .co-program__points { grid-template-columns: 1fr; gap: var(--wpa-s6); } } /* ---------- Availability: two seasons + combined, month pills in lime/forest ---------- */ #wpr06-body .co-season { max-width: var(--wpa-container); } #wpr06-body .co-season__row { display: grid; grid-template-columns: minmax(120px, 170px) minmax(0, 1fr); gap: var(--wpa-s4); align-items: center; padding: var(--wpa-s3) 0; border-top: 1px solid var(--wpa-cream-line); } #wpr06-body .co-season__row--head { border-top: 0; padding-bottom: var(--wpa-s2); } #wpr06-body .co-season__row--total { border-top: 2px solid var(--wpa-forest); } #wpr06-body .co-season__name { color: var(--wpa-forest); font-family: var(--wpa-font-display); font-weight: 600; font-size: 19px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2; } #wpr06-body .co-season__row--total .co-season__name { color: var(--wpa-forest); } #wpr06-body .co-season__months, #wpr06-body .co-season__bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; } #wpr06-body .co-season__months > li { text-align: center; color: var(--wpa-ink-soft); font-family: var(--wpa-font-display); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; } #wpr06-body .co-season__bar > li { display: block; height: clamp(30px, 2.8vw, 40px); border-radius: 999px; /* colour only (CO-, Oct 2): months are the column headings */ background: var(--wpa-cream-2); border: 1px solid var(--wpa-cream-line); color: var(--wpa-ink-soft); font-family: var(--wpa-font-display); font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } #wpr06-body .co-season__bar > li.is-none { color: color-mix(in srgb, var(--wpa-ink-soft) 45%, var(--wpa-cream-2)); } #wpr06-body .co-season .is-limited { background: color-mix(in srgb, var(--wpa-lime) 32%, var(--wpa-cream)); border-color: color-mix(in srgb, var(--wpa-lime) 45%, var(--wpa-cream)); color: var(--wpa-forest); } #wpr06-body .co-season .is-moderate { background: var(--wpa-lime); border-color: var(--wpa-lime); color: var(--wpa-forest); } #wpr06-body .co-season .is-strong { background: var(--wpa-green); border-color: var(--wpa-green); color: var(--wpa-forest); } #wpr06-body .co-season .is-peak { background: var(--wpa-forest); border-color: var(--wpa-forest); color: var(--wpa-cream); } #wpr06-body .co-season__legend { display: flex; flex-wrap: wrap; gap: var(--wpa-s3) var(--wpa-s6); margin-top: var(--wpa-s5); } #wpr06-body .co-season__legend > li { display: inline-flex; align-items: center; gap: 10px; color: var(--wpa-ink-soft); font-size: var(--wpa-fs-small); background: none !important; border: 0 !important; } #wpr06-body .co-season__legend > li:is(.is-peak, .is-strong, .is-moderate, .is-limited) { color: var(--wpa-ink-soft); background: none; border: 0; } #wpr06-body .co-season__legend > li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--wpa-cream-2); border: 1px solid var(--wpa-cream-line); } #wpr06-body .co-season__legend > li.is-limited::before { background: color-mix(in srgb, var(--wpa-lime) 32%, var(--wpa-cream)); } #wpr06-body .co-season__legend > li.is-moderate::before { background: var(--wpa-lime); border-color: var(--wpa-lime); } #wpr06-body .co-season__legend > li.is-strong::before { background: var(--wpa-green); border-color: var(--wpa-green); } #wpr06-body .co-season__legend > li.is-peak::before { background: var(--wpa-forest); border-color: var(--wpa-forest); } @media (max-width: 760px) { #wpr06-body .co-season__row { grid-template-columns: 1fr; gap: var(--wpa-s2); } #wpr06-body .co-season__row--head { padding: 0 0 var(--wpa-s1); } /* the month headings stay at every width: the pills carry no text */ #wpr06-body .co-season__row--head .co-season__name { display: none; } #wpr06-body .co-season__months > li { font-size: 12px; letter-spacing: 0; } #wpr06-body #westpak-refresh.colombia .co-season__legend { gap: var(--wpa-s2) var(--wpa-s4); } #wpr06-body .co-season__months, #wpr06-body .co-season__bar { gap: 3px; } #wpr06-body .co-season__bar > li { height: 24px; } } @media (max-width: 420px) { #wpr06-body .co-season__months > li { font-size: 11px; } } /* ---------- The bag: cut-out on its own blue pattern ---------- */ #wpr06-body .co-bag { --wpa-surface: #2d4ea3; --wpa-accent: var(--wpa-lime); } #wpr06-body .co-bag__media::after { background: linear-gradient(90deg, rgba(23, 44, 110, .55) 0%, rgba(23, 44, 110, .15) 55%, rgba(23, 44, 110, .35) 100%); } #wpr06-body .co-bag__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--wpa-s8); align-items: center; } #wpr06-body .co-bag__figure { display: flex; justify-content: center; } #wpr06-body .co-bag__figure img { width: min(100%, 420px); height: auto; filter: drop-shadow(0 28px 36px rgba(8, 18, 60, .45)); } #wpr06-body .co-bag__copy .wpa-section__head { margin: 0; } @media (max-width: 900px) { #wpr06-body .co-bag__grid { grid-template-columns: 1fr; gap: var(--wpa-s7); } #wpr06-body .co-bag__figure img { width: min(78%, 340px); } #wpr06-body .co-bag__copy { text-align: center; } #wpr06-body #westpak-refresh.colombia .co-bag__copy .wpa-lede { margin-inline: auto; } #wpr06-body .co-bag__copy .wpa-section__actions { justify-content: center; } } /* ---------- Let's talk: short CTA on the existing sunset drone push ---------- */ #wpr06-body .co-talk { min-height: clamp(520px, 72vh, 760px); display: flex; align-items: center; } #wpr06-body .co-talk .wpa-section__inner { width: 100%; } #wpr06-body .co-talk__media img { object-position: center 30%; } #wpr06-body .co-talk__video { position: absolute; inset: 0; object-position: center 30%; opacity: 0; pointer-events: none; } #wpr06-body .co-talk.is-co-talk-playing .co-talk__video { opacity: 1; } /* The original responsive still remains underneath every playback/fallback state. */ @media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) { #wpr06-body .co-talk .co-talk__video { display: none; } } #wpr06-body .co-talk__media::after { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10, 18, 6, .62) 0%, rgba(10, 18, 6, .38) 60%, rgba(10, 18, 6, .3) 100%); } #wpr06-body .co-talk__head { max-width: 760px; margin: 0 auto; } #wpr06-body .co-talk__head .wpa-title { margin-bottom: var(--wpa-s5); } #wpr06-body #westpak-refresh.colombia .co-talk__head .wpa-lede { max-width: 46ch; margin-inline: auto; text-wrap: balance; } #wpr06-body .co-talk .wpa-section__actions { flex-direction: column; gap: var(--wpa-s5); margin-top: var(--wpa-s7); } /* ---------- Calm reveals: fade and slide in once, never scroll-jack ---------- */ @media (prefers-reduced-motion: no-preference) { #wpr06-body #westpak-refresh.colombia.co-js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 640ms var(--wpa-ease), transform 760ms var(--wpa-ease); } #wpr06-body #westpak-refresh.colombia.co-js [data-reveal].is-in { opacity: 1; transform: none; } } /* Source: assets/r06-1b4b1f164146cb864c00/ui/viewport-theme.css */ /* CP15: native scrollY 0 for every mobile opening, as on Organics. A synthetic 64px top runway made the header drop when native scrolling returned to zero. Retain the lower media bleed that fills Safari's floating toolbar area. */ /* --wpa-toolbar-bleed: how far a full-screen hero should run past 100svh so its media also fills the area under Safari's floating bottom toolbar (iOS 26/27 show the page there; 100lvh is only ~40px more than 100svh, the toolbar covers ~98px). Keep bottom-anchored hero content above it. */ html.wpa-runway { --wpa-runway: 0px; --wpa-toolbar-bleed: 100px; } /* Native root scrolling, as on Organics; suppress edge bounce without a nested scroll container or gesture interception. */ @media(max-width:999px){ html:has(body.wpr02-page){overscroll-behavior-y:none} html body.wpr02-page{overflow:clip visible!important} } html.wpa-runway:has(#wpr06-body [data-bleed-top]) #wpr06-body { padding-top: var(--wpa-runway) !important; } html[data-wp-viewport-theme] body.wpr06-home.wpr06-header-managed::before { background: var(--wp-viewport-color) !important; } /* Keep the review portal out of Safari's fixed-container tint sampling. Its floating surfaces remain fixed inside this zero-height stacking root. */ [data-branch-comments][data-sidebar="mobile"] { position: absolute !important; inset: 0 auto auto 0 !important; width: 100% !important; height: 0 !important; /* Dormant shadow-DOM edge snap marks sit 8px beyond this host. Keep their horizontal overflow local while fixed review controls remain visible. */ overflow-x: clip !important; overflow-y: visible !important; } /* A transparent fixed header still makes Liquid Glass flatten the status strip. Over a bleeding hero it travels with the image. The normal fixed hide/reveal header resumes after the hero, and while the menu is open. */ html.wpa-hero-absolute body.wpr02-page.wpr06-header-managed #header-outer, html.wpa-hero-absolute body.wpr06-home.wpr06-header-managed #header-outer { position: absolute !important; top: var(--wpa-runway, 0px) !important; } html.wpa-hero-absolute { --wpa-header-position: absolute; --wpa-header-top: var(--wpa-runway, 0px); } /* CP16 native Safari: keep a painted compact header attached to the viewport. Native round trips retain the last fixed-container tint after an invisible or detached header; root/body/theme-color updates alone do not clear it. Reuse the real header, with its current section color, instead of adding an edge strip. This native-only policy intentionally keeps navigation visible, with a solid backplate over media. Other browser hide/reveal behavior is unchanged. */ @media(max-width:999px){ html.wpa-runway:not(.wpa-media-header) body.wpr02-page.wpr06-header-managed #header-outer#header-outer, html.wpa-runway:not(.wpa-media-header) body.wpr06-home #header-outer#header-outer{ position:fixed!important;inset:0 0 auto!important; transform:none!important;opacity:1!important;pointer-events:auto!important; background:var(--wp-viewport-color)!important; } html.wpa-runway:not(.wpa-media-header) body.wpr02-page.wpr06-header-managed #header-outer#header-outer::before, html.wpa-runway:not(.wpa-media-header) body.wpr06-home #header-outer#header-outer::before{ background:var(--wp-viewport-color)!important;opacity:1!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } } /* CP15/CP16 Oct5 phone correction: an unpainted hero header reveals the real film/poster under both the navigation row and its native safe-area padding. Keep the original solid policy for menu/search/focus and non-media sections. */ @media(max-width:999px){ html.wpa-media-header body.wpr02-page #header-outer#header-outer, html.wpa-media-header body.wpr02-page #header-outer#header-outer :is(#top,.container,.row,.bg-color-stripe){ background:transparent!important;box-shadow:none!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; } html.wpa-media-header body.wpr02-page #header-outer#header-outer::before, html.wpa-media-header body.wpr02-page #header-outer#header-outer::after{ display:none!important;content:none!important; } /* Sales authored light overlay retains its dark logo/icons over the white opening and facility film. Home/Colombia retain their white media ink. */ html.wpa-media-header body.wpr02-page:not(.wpr02-sales) #header-outer #logo img{filter:brightness(0) invert(1)!important} html.wpa-media-header body.wpr02-page:not(.wpr02-sales) #header-outer #top :is(nav>ul>li>a,.mobile-search,.nectar-icon,.icon-salient-search,.icon-salient-search::before){color:#fff9dd!important} html.wpa-media-header body.wpr02-page:not(.wpr02-sales) #header-outer .slide-out-widget-area-toggle :is(.lines,.lines::before,.lines::after){background-color:#fff9dd!important} } /* Source: assets/r06-1b4b1f164146cb864c00/footer-r03/footer.css */ /* R03 footer (SW, Oct 2 final QA open item): the shared Salient "before-footer" global section, restyled for the R03 pages only. Loaded on all five pages after the page CSS, before enforce.css. CSS only: link destinations, address and phone content are the WordPress footer, untouched. - Cream band, forest type (design-system.md §1). Under the forest "Let's Lead the Pak" band the colour change is the separation; a cream-line hairline covers pages whose last band is cream. - Content aligned to the page container (--wpa-container inside --wpa-gutter), 4 columns on desktop, 2 on phones (the logo + address spans both). - Social icons: the lime 60px boxed PNGs (incl. the old Twitter bird) are hidden and replaced by one calm line-icon set drawn as masks on the same links (same hrefs; the X logo for X/Twitter). They sit in the bottom bar beside the copyright. - Every link is a >= 44px tap target on phones. */ body[class*="wpr06"] .nectar-global-section.before-footer { --_fg: var(--wpa-forest, #223F13); --_fg-soft: var(--wpa-ink-soft, #3D4536); --_line: var(--wpa-cream-line, #E6DDB3); background: var(--wpa-cream, #FFF9DD); border-top: 1px solid var(--_line); color: var(--_fg); } /* ---- Container: the page grid, not Salient's 1425px box ---- */ body[class*="wpr06"] .nectar-global-section.before-footer > .container { position: relative; box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: clamp(48px, 6vw, 80px) max(var(--wpa-gutter, 16px), calc(50% - var(--wpa-container, 1300px) / 2)) 32px; } body[class*="wpr06"] .nectar-global-section.before-footer .vc_row.full-width-section { margin: 0 !important; padding: 0 !important; width: auto !important; left: auto !important; background: none !important; --row-bg-color: transparent !important; } body[class*="wpr06"] .nectar-global-section.before-footer :is(.row_col_wrap_12, .wpb_column.vc_col-sm-12, .inner_row, .row_col_wrap_12_inner) { width: 100% !important; max-width: none !important; flex: 1 1 100%; float: none !important; box-sizing: border-box; } body[class*="wpr06"] .nectar-global-section.before-footer .row-bg-wrap { display: none !important; } body[class*="wpr06"] .nectar-global-section.before-footer :is(.row_col_wrap_12, .row_col_wrap_12_inner, .vc_column-inner, .wpb_wrapper) { margin: 0 !important; padding: 0 !important; } body[class*="wpr06"] .nectar-global-section.before-footer .wpb_column { margin: 0 !important; padding: 0 !important; float: none; width: auto; } body[class*="wpr06"] .nectar-global-section.before-footer .wpb_column[style] { color: inherit !important; } /* ---- Link columns + address ---- */ body[class*="wpr06"] .nectar-global-section.before-footer .vc_row:not(:first-child) .inner_row:first-child > .row_col_wrap_12_inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); } body[class*="wpr06"] .nectar-global-section.before-footer .wpb_text_column { margin: 0 0 24px !important; } body[class*="wpr06"] .nectar-global-section.before-footer .wpb_text_column:last-child { margin-bottom: 0 !important; } body[class*="wpr06"] .nectar-global-section.before-footer p { margin: 0; padding: 0; font: 400 15px/1.6 var(--wpa-font-body, 'Open Sans', Arial, sans-serif); color: var(--_fg-soft); } body[class*="wpr06"] .nectar-global-section.before-footer .line30 p br { display: none; } body[class*="wpr06"] .nectar-global-section.before-footer .line30 p + p { margin-top: 4px; } body[class*="wpr06"] .nectar-global-section.before-footer .line30 a { display: flex; align-items: center; width: fit-content; min-height: 32px; color: var(--_fg) !important; text-decoration: none; transition: color 180ms var(--wpa-ease, ease); } body[class*="wpr06"] .nectar-global-section.before-footer .line30 a:hover { text-decoration: underline; text-decoration-color: var(--wpa-green, #93C11F); text-decoration-thickness: 2px; text-underline-offset: .28em; } /* Column heads ("West Pak Worldwide", "Contact Us", ...): the system's label style */ body[class*="wpr06"] .nectar-global-section.before-footer .line30 a:has(strong) { margin-bottom: 4px; } body[class*="wpr06"] .nectar-global-section.before-footer .line30 strong { font: 600 18px/1.2 var(--wpa-font-display, 'Antonio', 'Arial Narrow', sans-serif) !important; font-size: 18px !important; letter-spacing: .04em; text-transform: uppercase; color: var(--_fg); } /* Logo + address */ body[class*="wpr06"] .nectar-global-section.before-footer .img-with-aniamtion-wrap:not(.center) { margin-bottom: 16px; } body[class*="wpr06"] .nectar-global-section.before-footer .img-with-aniamtion-wrap:not(.center) img { width: 168px !important; height: auto !important; } body[class*="wpr06"] .nectar-global-section.before-footer .img-with-aniamtion-wrap:not(.center) + .wpb_text_column p { font-size: 14px; line-height: 1.7; } /* ---- Bottom bar: copyright + legal (left), social (right) ---- */ body[class*="wpr06"] .nectar-global-section.before-footer .inner_row + .inner_row { margin-top: clamp(40px, 5vw, 64px) !important; padding-top: 0; border-top: 1px solid var(--_line); } body[class*="wpr06"] .nectar-global-section.before-footer .inner_row + .inner_row p { display: flex; align-items: center; flex-wrap: wrap; column-gap: .35em; min-height: 44px; padding-top: 24px; /* bottom edge = the social row's bottom edge (both 44px, 32px up) */ font-size: 13px; color: var(--_fg-soft); } body[class*="wpr06"] .nectar-global-section.before-footer .inner_row + .inner_row a { display: inline-flex; align-items: center; min-height: 44px; color: var(--_fg) !important; } /* Social row: out of flow, aligned with the copyright line */ body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child { position: absolute !important; right: max(var(--wpa-gutter, 16px), calc(50% - var(--wpa-container, 1300px) / 2)); bottom: 32px; z-index: 1; } body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child .vc_hidden-xs { display: none !important; } body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child .row_col_wrap_12_inner { display: flex; gap: 4px; align-items: center; } body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child :is(.img-with-aniamtion-wrap, .inner, .hover-wrap, .hover-wrap-inner) { margin: 0 !important; padding: 0 !important; transform: none !important; display: block; } body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child a { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--_fg); transition: background-color 180ms var(--wpa-ease, ease), color 180ms var(--wpa-ease, ease); } body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child a img { display: none !important; } body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child a::before { content: ''; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--_icon) center / contain no-repeat; mask: var(--_icon) center / contain no-repeat; } body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child a:hover { background: var(--wpa-cream-2, #F7EFC8); } body[class*="wpr06"] .nectar-global-section.before-footer a:focus-visible { outline: 2px solid var(--_fg); outline-offset: 2px; border-radius: 4px; } body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child a:focus-visible { border-radius: 50%; } /* One line-icon family (24px grid, 1.8 stroke, round caps); X is the current X mark, outlined to match. */ body[class*="wpr06"] .nectar-global-section.before-footer a[href*="facebook.com"] { --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z'/%3E%3C/svg%3E"); } body[class*="wpr06"] .nectar-global-section.before-footer a[href*="linkedin.com"] { --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z'/%3E%3Crect x='2' y='9' width='4' height='12'/%3E%3Ccircle cx='4' cy='4' r='2'/%3E%3C/svg%3E"); } body[class*="wpr06"] .nectar-global-section.before-footer a[href*="instagram.com"] { --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='20' height='20' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M17.5 6.5h.01'/%3E%3C/svg%3E"); } body[class*="wpr06"] .nectar-global-section.before-footer a[href*="twitter.com"], body[class*="wpr06"] .nectar-global-section.before-footer a[href*="x.com/"] { --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3.5h5l12 17h-5z'/%3E%3Cpath d='M20.5 3.5l-7 8M3.5 20.5l7-8'/%3E%3C/svg%3E"); } body[class*="wpr06"] .nectar-global-section.before-footer a[href*="youtube.com"] { --_icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 17a24 24 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.6 49.6 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24 24 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.6 49.6 0 0 1-16.2 0A2 2 0 0 1 2.5 17'/%3E%3Cpath d='m10 15 5-3-5-3z'/%3E%3C/svg%3E"); } /* ---- Tablet: 2 columns ---- */ @media (max-width: 999px) { body[class*="wpr06"] .nectar-global-section.before-footer .vc_row:not(:first-child) .inner_row:first-child > .row_col_wrap_12_inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } body[class*="wpr06"] .nectar-global-section.before-footer .one-fourths:last-child { grid-column: 1 / -1; } } /* ---- Phones: 2 columns, 44px targets, social row under the copyright ---- */ @media (max-width: 690px) { body[class*="wpr06"] .nectar-global-section.before-footer > .container { padding-bottom: 24px; } body[class*="wpr06"] .nectar-global-section.before-footer .line30 a { min-height: 44px; min-width: 44px; } body[class*="wpr06"] .nectar-global-section.before-footer .line30 p + p { margin-top: 0; } body[class*="wpr06"] .nectar-global-section.before-footer .line30 a:has(strong) { margin-bottom: 0; } body[class*="wpr06"] .nectar-global-section.before-footer .line30 strong { font-size: 17px !important; } body[class*="wpr06"] .nectar-global-section.before-footer .wpb_text_column { margin-bottom: 16px !important; } /* "The WPA Experience" column: its two blocks side by side across the full width */ body[class*="wpr06"] .nectar-global-section.before-footer .one-fourths:nth-child(3) { grid-column: 1 / -1; } body[class*="wpr06"] .nectar-global-section.before-footer .one-fourths:nth-child(3) > .vc_column-inner > .wpb_wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } body[class*="wpr06"] .nectar-global-section.before-footer .one-fourths:nth-child(3) .wpb_text_column { margin: 0 !important; } body[class*="wpr06"] .nectar-global-section.before-footer .inner_row + .inner_row { margin-top: 40px !important; } body[class*="wpr06"] .nectar-global-section.before-footer .inner_row + .inner_row p { min-height: 0; padding: 16px 0 68px; } body[class*="wpr06"] .nectar-global-section.before-footer > .container > .vc_row:first-child { right: auto; left: calc(var(--wpa-gutter, 16px) - 12px); bottom: 24px; } } /* Source: assets/r06-1b4b1f164146cb864c00/foundations/enforce.css */ /* West Pak R03 site-wide type rule (SW-01). Loaded LAST on every R03 page. All page headings render in Antonio, all caps. Spec: docs/design-system.md. Opt out a single element only with data-wpa-type="keep" (e.g. a legal mark). */ #wpr06-body :is(h1, h2, h3):not([data-wpa-type="keep"]):not(.screen-reader-text):not(.sr-only):not(.visually-hidden) { font-family: var(--wpa-font-display, 'Antonio', 'Arial Narrow', sans-serif) !important; text-transform: uppercase !important; } /* Final QA (Oct 2): no one-word last lines in running copy (headlines set their own breaks). */ #wpr06-body :is(p, li) { text-wrap: pretty; } /* Source: assets/r06-1b4b1f164146cb864c00/foundations/centered-section-menus.css */ /* SW-02: section menus form one centered group, in normal and sticky states. On narrow screens the centered viewport remains natively scrollable to every link. */ #wpr06-body #westpak-refresh .wpa-subnav :is(ul,ol).wpa-subnav__list, #wpr06-body .wpa-subnav__list { display:flex; width:fit-content; max-width:min(100%,var(--wpa-container)); margin:0 auto; padding:0; justify-content:safe center; } #wpr06-body #westpak-refresh .wpa-subnav :is(ul,ol).wpa-subnav__list > li, #wpr06-body .wpa-subnav__list > li {flex:0 0 auto;min-width:max-content;width:auto} #wpr06-body #westpak-refresh .wpa-subnav :is(ul,ol).wpa-subnav__list a, #wpr06-body .wpa-subnav__list a {justify-content:center;text-align:center;padding-inline:clamp(20px,2.5vw,42px)} @media(max-width:999px){ #wpr06-body #westpak-refresh .wpa-subnav :is(ul,ol).wpa-subnav__list, #wpr06-body .wpa-subnav__list {max-width:100%;justify-content:safe center} #wpr06-body #westpak-refresh .wpa-subnav :is(ul,ol).wpa-subnav__list a, #wpr06-body .wpa-subnav__list a {padding-inline:24px} } /* Source: assets/r06-1b4b1f164146cb864c00/colombia-r03/editorial-polish.css */ /* Corey Oct 3: title choreography, film provenance, balanced program and calendar. */ #wpr06-body #westpak-refresh.colombia .co-hero__overlay { position: relative; display: flex; align-items: flex-end; width: 100%; min-height: inherit; pointer-events: none; opacity: calc(var(--co-scroll-opacity, 1) * var(--co-idle-opacity, 1)); transform: translateY(var(--co-scroll-lift, 0px)); transition: opacity 800ms ease, transform 160ms linear; will-change: opacity; } #wpr06-body #westpak-refresh.colombia .co-hero[data-copy-idle="dim"] .co-hero__overlay { --co-idle-opacity: .2; transition: opacity 8s ease, transform 160ms linear; } #wpr06-body #westpak-refresh.colombia .co-hero__title { margin-bottom: 24px; } #wpr06-body #westpak-refresh.colombia .co-hero__lead { overflow: hidden; } #wpr06-body #westpak-refresh.colombia .co-hero__lead-in, #wpr06-body #westpak-refresh.colombia .co-hero__word-in { display: inline-block; } #wpr06-body #westpak-refresh.colombia .co-hero__word { overflow: visible; } #wpr06-body #westpak-refresh.colombia .co-hero__line { max-width: 36ch; font-size: clamp(19px, 1.6vw, 25px); font-weight: 500; line-height: 1.55; letter-spacing: -.02em; text-wrap: balance; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.3); } @media (prefers-reduced-motion: no-preference) { /* Match the entrance's first frame before the module can arrive. NoJS and constrained readers keep the visible base; the head gate has a watchdog. */ html.wpa-co-copy-pending #wpr06-body .co-hero:not([data-copy-entry="true"]) .co-hero__lead-in { transform: translateY(105%); } html.wpa-co-copy-pending #wpr06-body .co-hero:not([data-copy-entry="true"]) .co-hero__word-in { transform: translateY(35%); clip-path: inset(100% 0 0); } html.wpa-co-copy-pending #wpr06-body #westpak-refresh.colombia .co-hero:not([data-copy-entry="true"]) .co-hero__word::after { transform: scaleX(0); transform-origin: left; } html.wpa-co-copy-pending #wpr06-body .co-hero:not([data-copy-entry="true"]) .co-hero__line { opacity: 0; transform: translateY(12px); } #wpr06-body .co-hero[data-copy-entry="true"] .co-hero__lead-in { animation: co-title-rise 1000ms cubic-bezier(.19,1,.22,1) both; } #wpr06-body .co-hero[data-copy-entry="true"] .co-hero__word-in { animation: co-place-reveal 1150ms cubic-bezier(.19,1,.22,1) 130ms both; } #wpr06-body #westpak-refresh.colombia .co-hero[data-copy-entry="true"] .co-hero__word::after { transform-origin: left; animation: co-rule-draw 780ms cubic-bezier(.22,1,.36,1) 580ms both; } #wpr06-body .co-hero[data-copy-entry="true"] .co-hero__line { animation: co-support-rise 1000ms cubic-bezier(.19,1,.22,1) 370ms both; } } @keyframes co-title-rise { from { transform: translateY(105%); } to { transform: translateY(0); } } @keyframes co-place-reveal { from { transform: translateY(35%); clip-path: inset(100% 0 0); } to { transform: translateY(0); clip-path: inset(0); } } @keyframes co-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes co-support-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } #wpr06-body #westpak-refresh.colombia .co-program__grid { gap: clamp(36px, 6vw, 88px); margin-bottom: 56px; } #wpr06-body #westpak-refresh.colombia .co-program__stats { margin-top: 38px; } #wpr06-body #westpak-refresh.colombia .co-program__stats > li { display: flex; align-items: center; gap: 26px; border-top: 1px solid rgba(255,255,235,.23); padding-top: 26px; } #wpr06-body #westpak-refresh.colombia .co-program__stats .wpa-stat__value { font-size: clamp(72px, 8vw, 116px); line-height: 1.1; } #wpr06-body #westpak-refresh.colombia .co-program__stats .wpa-stat__label { margin: 0; max-width: 12ch; font: 500 17px/1.45 var(--wpa-font-body); letter-spacing: 0; text-transform: none; } #wpr06-body #westpak-refresh.colombia .co-program__media { aspect-ratio: 1 / 1.16; border-radius: 4px; } #wpr06-body #westpak-refresh.colombia .co-program__points { gap: 24px; counter-reset: co-point; } #wpr06-body #westpak-refresh.colombia .co-program__points > li { display: block; padding: 26px; border: 1px solid rgba(255,255,235,.2); border-top: 2px solid var(--wpa-lime); background: rgba(255,255,235,.025); border-radius: 4px; font-size: 16px; line-height: 1.65; } #wpr06-body #westpak-refresh.colombia .co-program__points > li::before { content: none !important; } #wpr06-body #westpak-refresh.colombia .co-program__points > li > strong:first-child { display: block; font-size: clamp(26px, 2.3vw, 34px); line-height: 1.2; margin-bottom: 14px; } #wpr06-body .co-season__months, #wpr06-body .co-season__bar { position: relative; isolation: isolate; } #wpr06-body .co-season__months > li, #wpr06-body .co-season__bar > li { position: relative; } #wpr06-body .co-season__months > li::after, #wpr06-body .co-season__bar > li::after { content: ''; position: absolute; z-index: -1; inset: -14px -4px; background: var(--wpa-lime); opacity: 0; border-radius: 3px; transition: opacity 180ms ease; } @media (hover:hover) and (pointer:fine) { #wpr06-body .co-season li.is-column-hover::after { opacity: .12; } #wpr06-body .co-season__months > li.is-column-hover { color: var(--wpa-forest); } } @media (max-width: 900px) { #wpr06-body #westpak-refresh.colombia .co-program__media { aspect-ratio: 4 / 3; } #wpr06-body #westpak-refresh.colombia .co-program__points { gap: 16px; } #wpr06-body #westpak-refresh.colombia .co-program__points > li::before { margin-bottom: 18px; } } @media (prefers-reduced-motion: reduce) { #wpr06-body #westpak-refresh.colombia .co-hero__overlay { opacity: 1; transform: none; transition: none; } } /* Short landscape retains the full title and supporting line in natural flow. The overlay header can report zero layout height; reserve its visible 64px. */ @media (max-width: 999px) and (max-height: 520px) and (orientation: landscape) { #wpr06-body #westpak-refresh.colombia .co-hero__inner { padding-top: calc(max(var(--wpa-hdr-h, 64px), 64px) + var(--wpa-runway, 0px) + 24px); padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px) + (100lvh - 100svh) + var(--wpa-toolbar-bleed, 0px)); } } /* The retained title overlay keeps its scroll, idle dimming and interaction clock. */ #wpr06-body #westpak-refresh.colombia .co-hero__overlay .co-hero__inner { position: relative; height: auto; pointer-events: auto; } /* Source: assets/r06-1b4b1f164146cb864c00/colombia-r04/colombia-r04.css */ /* Discover Colombia, Round 4 (CO-03, CO-04, CO-09). Two new bands before the program, and the download strip under Availability. Page-specific layout only. Tokens, type, buttons, section pattern, sub-nav and the header overlay come from A/foundations (docs/design-system.md). Loads after colombia-r03/editorial-polish.css. */ /* ---------- What Colombia Adds (CO-03): copy beside the finca aerial ---------- */ #wpr06-body #westpak-refresh.colombia .co-adds__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 88px); align-items: center; } #wpr06-body #westpak-refresh.colombia .co-adds__head { margin: 0 0 var(--wpa-s5); } #wpr06-body #westpak-refresh.colombia .co-adds__body { max-width: var(--wpa-measure); color: var(--wpa-fg-soft); line-height: 1.65; } #wpr06-body #westpak-refresh.colombia .co-adds__media { overflow: hidden; border-radius: var(--wpa-radius-lg); aspect-ratio: 4 / 3; } #wpr06-body #westpak-refresh.colombia .co-adds__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Leadership quote slot: stays hidden until the quote arrives (CO-03). */ #wpr06-body #westpak-refresh.colombia .co-adds__quote { margin: var(--wpa-s7) 0 0; padding: var(--wpa-s2) 0 var(--wpa-s2) var(--wpa-s6); border-left: 3px solid var(--wpa-lime); } #wpr06-body #westpak-refresh.colombia .co-adds__quote[hidden] { display: none; } #wpr06-body #westpak-refresh.colombia .co-adds__quote-text { margin: 0; } #wpr06-body #westpak-refresh.colombia .co-adds__quote-text p { color: var(--wpa-heading); font-family: var(--wpa-font-display); font-weight: 500; font-size: var(--wpa-fs-h3); line-height: 1.3; text-wrap: pretty; } #wpr06-body #westpak-refresh.colombia .co-adds__quote-text p::before { content: '\201C'; } #wpr06-body #westpak-refresh.colombia .co-adds__quote-text p::after { content: '\201D'; } #wpr06-body #westpak-refresh.colombia .co-adds__quote-who { display: flex; flex-wrap: wrap; gap: 0 var(--wpa-s3); margin-top: var(--wpa-s4); color: var(--wpa-fg-soft); font-size: var(--wpa-fs-small); letter-spacing: .04em; text-transform: uppercase; } #wpr06-body #westpak-refresh.colombia .co-adds__quote-name { font-weight: 700; color: var(--wpa-heading); } @media (max-width: 900px) { #wpr06-body #westpak-refresh.colombia .co-adds__grid { grid-template-columns: 1fr; gap: var(--wpa-s7); } #wpr06-body #westpak-refresh.colombia .co-adds__media { aspect-ratio: 16 / 10; } } /* ---------- A Commitment to Stewardship (CO-04): lime band, valley photo, certifications ---------- */ #wpr06-body #westpak-refresh.colombia .co-steward__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 88px); align-items: center; } #wpr06-body #westpak-refresh.colombia .co-steward__media { overflow: hidden; border-radius: var(--wpa-radius-lg); aspect-ratio: 4 / 3; } #wpr06-body #westpak-refresh.colombia .co-steward__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; } #wpr06-body #westpak-refresh.colombia .co-steward__copy .wpa-section__head { margin-bottom: var(--wpa-s5); } #wpr06-body #westpak-refresh.colombia .co-steward__body { max-width: var(--wpa-measure); color: var(--wpa-fg-soft); line-height: 1.65; } #wpr06-body #westpak-refresh.colombia .co-steward__certs { display: flex; flex-wrap: wrap; gap: var(--wpa-s3); margin-top: var(--wpa-s6); } #wpr06-body #westpak-refresh.colombia .co-steward__certs > li { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border: 2px solid var(--wpa-forest); border-radius: var(--wpa-radius-pill); color: var(--wpa-forest); font-family: var(--wpa-font-display); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; } @media (max-width: 900px) { #wpr06-body #westpak-refresh.colombia .co-steward__grid { grid-template-columns: 1fr; gap: var(--wpa-s7); } #wpr06-body #westpak-refresh.colombia .co-steward__media { order: 1; aspect-ratio: 16 / 10; } } /* ---------- Downloads (CO-09): the data sheet and the chart, as one strip under the calendar ---------- */ #wpr06-body #westpak-refresh.colombia .co-downloads { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--wpa-s5) var(--wpa-s8); align-items: center; max-width: var(--wpa-container); margin-top: var(--wpa-s8); padding: var(--wpa-s6) var(--wpa-s7); border: 1px solid var(--wpa-cream-line); border-radius: var(--wpa-radius-lg); background: var(--wpa-cream-2); } #wpr06-body #westpak-refresh.colombia .co-downloads__title { margin: 0 0 var(--wpa-s2); color: var(--wpa-heading); font-family: var(--wpa-font-display); font-weight: var(--wpa-fw-label); font-size: var(--wpa-fs-h3); line-height: 1.2; letter-spacing: .01em; text-transform: uppercase; text-wrap: balance; } #wpr06-body #westpak-refresh.colombia .co-downloads__copy p { max-width: 48ch; color: var(--wpa-fg-soft); text-wrap: pretty; } #wpr06-body #westpak-refresh.colombia .co-downloads .wpa-section__actions { margin: 0; flex-direction: column; align-items: flex-start; gap: var(--wpa-s4); } @media (max-width: 760px) { #wpr06-body #westpak-refresh.colombia .co-downloads { grid-template-columns: 1fr; margin-top: var(--wpa-s7); padding: var(--wpa-s5); } #wpr06-body #westpak-refresh.colombia .co-downloads .wpa-section__actions { align-items: stretch; } #wpr06-body #westpak-refresh.colombia .co-downloads .wpa-btn { width: 100%; } }