/** * Design System 2.0 - Heritage Gold Light Mode * Opanije Cultural Tourism Platform * * A strict "Light Mode" architecture rooted in Afro-Brazilian heritage. * This foundation layer establishes immutable design tokens, typographic * mathematics, and cultural texture patterns. * * @package Opanije * @version 2.1.0 * @since 2024-11-25 * @updated 2024-11-28 - Added patterns layer for Omolu straw texture * * Related Files: * - patterns.css: Cultural texture patterns (Omolu straw, etc.) */ /* ================================================================= LAYER DECLARATION Establishes cascade priority for predictable specificity management Priority (lowest to highest): 1. reset - Browser normalization 2. tokens - Design tokens (colors, typography, spacing) 3. base - Element defaults (body, headings, links) 4. patterns - Background texture patterns (Omolu, cultural motifs) 5. components - Component styles (reserved for future) 6. utilities - Utility classes (highest specificity) ================================================================= */ @layer reset, tokens, base, patterns, components, utilities; /* ================================================================= RESET LAYER Minimal browser normalization for consistent cross-browser rendering ================================================================= */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } img, picture, video, canvas, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; } /* Accessibility: Respect user motion preferences */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } } /* ================================================================= TOKENS LAYER Design tokens - the immutable foundation of the visual system ================================================================= */ @layer tokens { :root { /* --------------------------------------------------------------- BRAND COLORS - THE GOLDEN HIERARCHY --------------------------------------------------------------- */ /** * Heritage Gold - PRIMARY BRAND COLOR * RESTRICTED USE - See "Golden Rule of Contrast" below * * Use ONLY for: * - Primary CTA buttons (with white text) * - Accent borders and underlines * - Icons accompanied by accessible text * - Large decorative headings (24px+) */ --sys-color-primary: #B7780D; /** * Sunlit Gold - For Gradients & Highlights * Lighter variant for hover states, gradient endpoints, * and decorative accents */ --sys-color-primary-light: #D8A81B; /* Gold transparency variants for subtle backgrounds */ --sys-color-primary-tint-10: rgba(183, 120, 13, 0.1); --sys-color-primary-tint-20: rgba(183, 120, 13, 0.2); --sys-color-primary-tint-05: rgba(183, 120, 13, 0.05); /* --------------------------------------------------------------- SURFACE COLORS - LIGHT MODE PALETTE The luminance physics of our light mode architecture --------------------------------------------------------------- */ /** * Surface 0: Pure White * For card backgrounds, modals, elevated surfaces */ --sys-color-surface-0: #FFFFFF; /** * Surface 1: Warm Off-White * For page backgrounds - the canvas of our design */ --sys-color-surface-1: #FAFAF9; /** * Surface 2: Subtle Cream * For borders, dividers, subtle background differentiation */ --sys-color-surface-2: #F4F3F0; /* --------------------------------------------------------------- INK COLORS - TYPOGRAPHY HIERARCHY Contrast-optimized colors for text accessibility --------------------------------------------------------------- */ /** * Ink Base: Deep Charcoal * Primary body text color * Contrast ratio: 12.5:1 on Surface 0 (WCAG AAA) */ --sys-color-ink-base: #2B2823; /** * Ink Light: Muted Charcoal * Secondary text, lead paragraphs, subtitles * Contrast ratio: 7.2:1 on Surface 0 (WCAG AA) */ --sys-color-ink-light: #59554F; /** * Ink Muted: Tertiary text * Captions, metadata, placeholder text * Contrast ratio: 4.6:1 on Surface 0 (WCAG AA large text) */ --sys-color-ink-muted: #888580; /* --------------------------------------------------------------- SEMANTIC COLORS Functional colors for UI states and feedback --------------------------------------------------------------- */ --sys-color-success: #28a745; --sys-color-warning: #ffc107; --sys-color-error: #dc3545; --sys-color-info: #17a2b8; /* --------------------------------------------------------------- TYPOGRAPHY - FONT FAMILIES --------------------------------------------------------------- */ /** * Display/Headings: Montserrat * Bold, geometric, modern - for headlines and display text */ --sys-font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /** * Body/UI: Lato * Warm, readable, humanist sans-serif - for body text and UI */ --sys-font-body: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* --------------------------------------------------------------- TYPOGRAPHY - FLUID TYPE SCALE Mobile-first with clamp() for smooth responsive scaling Formula: clamp(min, preferred, max) - min: Mobile minimum (320px viewport) - preferred: Fluid middle using viewport units - max: Desktop maximum (1440px viewport) --------------------------------------------------------------- */ /* Body Text: 16px (mobile) → 18px (desktop) */ --sys-font-size-body: clamp(1rem, 0.9rem + 0.25vw, 1.125rem); /* Lead Text: 18px → 21px */ --sys-font-size-lead: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); /* Small Text: 14px → 15px */ --sys-font-size-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); /* Caption/Fine Print: 12px → 13px */ --sys-font-size-caption: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem); /* --------------------------------------------------------------- TYPOGRAPHY - FLUID HEADING SCALE Based on 1.25 (Major Third) modular scale --------------------------------------------------------------- */ /* H1: 32px (mobile) → 50.4px (desktop) - Montserrat 700 */ --sys-font-size-h1: clamp(2rem, 5vw, 3.15rem); /* H2: 25.6px → 40px - Montserrat 700 */ --sys-font-size-h2: clamp(1.6rem, 4vw, 2.5rem); /* H3: 20.5px → 32px - Montserrat 700 */ --sys-font-size-h3: clamp(1.28rem, 3.2vw, 2rem); /* H4: 16.4px → 25.6px - Montserrat 600 */ --sys-font-size-h4: clamp(1.024rem, 2.56vw, 1.6rem); /* H5: 16px → 20px - Montserrat 600 */ --sys-font-size-h5: clamp(1rem, 2vw, 1.25rem); /* H6: 14px → 16px - Montserrat 600 */ --sys-font-size-h6: clamp(0.875rem, 1.6vw, 1rem); /* --------------------------------------------------------------- TYPOGRAPHY - LINE HEIGHTS Optimized for readability at different text sizes --------------------------------------------------------------- */ --sys-line-height-tight: 1.1; /* Large headings */ --sys-line-height-snug: 1.25; /* Subheadings */ --sys-line-height-normal: 1.5; /* Body text */ --sys-line-height-relaxed: 1.65; /* Long-form content */ /* --------------------------------------------------------------- SPACING SYSTEM 8px base grid for consistent rhythm --------------------------------------------------------------- */ --sys-space-1: 0.25rem; /* 4px */ --sys-space-2: 0.5rem; /* 8px */ --sys-space-3: 0.75rem; /* 12px */ --sys-space-4: 1rem; /* 16px */ --sys-space-5: 1.5rem; /* 24px */ --sys-space-6: 2rem; /* 32px */ --sys-space-8: 3rem; /* 48px */ --sys-space-10: 4rem; /* 64px */ --sys-space-12: 5rem; /* 80px */ --sys-space-16: 6rem; /* 96px */ /* Fluid section spacing: 48px (mobile) → 80px (desktop) */ --sys-section-spacing: clamp(3rem, 8vw, 5rem); /* --------------------------------------------------------------- BORDERS & RADIUS --------------------------------------------------------------- */ --sys-radius-sm: 4px; --sys-radius-md: 8px; --sys-radius-lg: 12px; --sys-radius-xl: 16px; --sys-radius-2xl: 24px; --sys-radius-full: 9999px; --sys-border-width: 1px; --sys-border-width-md: 2px; --sys-border-color: var(--sys-color-surface-2); /* --------------------------------------------------------------- SHADOWS - Light Mode Optimized Using ink-base color for natural shadow appearance --------------------------------------------------------------- */ --sys-shadow-sm: 0 1px 2px rgba(43, 40, 35, 0.05); --sys-shadow-md: 0 4px 12px rgba(43, 40, 35, 0.08); --sys-shadow-lg: 0 10px 25px rgba(43, 40, 35, 0.12); --sys-shadow-xl: 0 20px 40px rgba(43, 40, 35, 0.16); /* --------------------------------------------------------------- TRANSITIONS --------------------------------------------------------------- */ --sys-transition-fast: 150ms ease; --sys-transition-base: 300ms ease; --sys-transition-slow: 500ms ease; /* --------------------------------------------------------------- Z-INDEX SCALE Predictable layering system --------------------------------------------------------------- */ --sys-z-base: 1; --sys-z-dropdown: 100; --sys-z-sticky: 200; --sys-z-fixed: 300; --sys-z-overlay: 400; --sys-z-modal: 500; --sys-z-toast: 600; /* --------------------------------------------------------------- LEGACY COMPATIBILITY ALIASES Maps old variable names to canonical tokens for gradual migration TODO: Remove after all files migrated to --sys-* tokens --------------------------------------------------------------- */ /* From camp-options-final.css */ --color-secondary: var(--sys-color-ink-base); --color-accent: var(--sys-color-primary); --color-white: var(--sys-color-surface-0); --color-neutral-light: var(--sys-color-surface-2); --color-text-dark: var(--sys-color-ink-base); --color-text-light: var(--sys-color-surface-0); --color-bg-light: var(--sys-color-surface-2); --color-bg-white: var(--sys-color-surface-0); /* From camp-final.css / woocommerce-heritage.css */ --accent-warm-gold: var(--sys-color-primary); --brand-dark: var(--sys-color-ink-base); /* Gold variants for gradients */ --sys-color-primary-tint-light: #f3d068; } /* ================================================================= THE GOLDEN RULE OF CONTRAST - ACCESSIBILITY MANDATE ================================================================= CRITICAL ACCESSIBILITY CONSTRAINT: Heritage Gold (#B7780D) has a contrast ratio of only 3.5:1 against white backgrounds (#FFFFFF). This FAILS WCAG 2.1 AA requirements for normal text but PASSES for large text (24px+ or 18.66px+ bold). ┌─────────────────────────────────────────────────────────────────┐ │ ENFORCEMENT RULES - MUST BE FOLLOWED │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ 1. --sys-color-primary (#B7780D) MUST NOT be used for: │ │ • Body text at ANY size │ │ • Secondary or tertiary text │ │ • Any text smaller than 24px (regular weight) │ │ • Any text smaller than 18.66px (bold weight) │ │ • Placeholder text in form inputs │ │ • Disabled state text │ │ │ │ 2. --sys-color-primary (#B7780D) MAY be used for: │ │ • Buttons with WHITE text overlay (reversed contrast) │ │ • Decorative borders and underlines │ │ • Icons ONLY when accompanied by accessible text │ │ • Large decorative headings (24px+ / 1.5rem+) │ │ • Background fills with dark text overlay │ │ • Hover/focus indicator rings (not sole indicator) │ │ │ │ 3. All body text MUST use approved ink colors: │ │ • --sys-color-ink-base (#2B2823) │ │ Contrast: 12.5:1 on white - WCAG AAA compliant │ │ • --sys-color-ink-light (#59554F) │ │ Contrast: 7.2:1 on white - WCAG AA compliant │ │ • --sys-color-ink-muted (#888580) │ │ Contrast: 4.6:1 on white - WCAG AA for large text only │ │ │ └─────────────────────────────────────────────────────────────────┘ RATIONALE: The Heritage Gold represents our brand's connection to Afro-Brazilian culture and the golden sunlight of Salvador, Bahia. However, brand expression must never compromise accessibility. This rule ensures all users can read our content while maintaining premium aesthetics. ================================================================= */ } /* ================================================================= BASE LAYER Element defaults - the foundation for all page elements ================================================================= */ @layer base { /** * Body Defaults * Sets the typographic foundation for the entire page */ body { font-family: var(--sys-font-body); font-size: var(--sys-font-size-body); line-height: var(--sys-line-height-normal); color: var(--sys-color-ink-base); background-color: var(--sys-color-surface-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /** * Heading Styles * All headings use Montserrat display font with tight line-height */ h1, h2, h3, h4, h5, h6 { font-family: var(--sys-font-display); color: var(--sys-color-ink-base); line-height: var(--sys-line-height-tight); margin-top: 0; } h1 { font-size: var(--sys-font-size-h1); font-weight: 700; letter-spacing: -0.02em; } h2 { font-size: var(--sys-font-size-h2); font-weight: 700; letter-spacing: -0.01em; } h3 { font-size: var(--sys-font-size-h3); font-weight: 700; } h4 { font-size: var(--sys-font-size-h4); font-weight: 600; } h5 { font-size: var(--sys-font-size-h5); font-weight: 600; } h6 { font-size: var(--sys-font-size-h6); font-weight: 600; } /** * Paragraph & Lead Text */ p { margin-top: 0; margin-bottom: var(--sys-space-4); } .lead { font-size: var(--sys-font-size-lead); color: var(--sys-color-ink-light); line-height: var(--sys-line-height-relaxed); } /** * Links * Gold accent with proper focus states for accessibility */ a { color: var(--sys-color-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color var(--sys-transition-fast); } a:hover { color: var(--sys-color-primary-light); } a:focus-visible { outline: 2px solid var(--sys-color-primary); outline-offset: 2px; border-radius: 2px; } /** * Selection * Brand-colored text selection */ ::selection { background-color: var(--sys-color-primary-tint-20); color: var(--sys-color-ink-base); } } /* ================================================================= COMPONENTS LAYER Core UI components for the Opanije Design System 2.0 Aesthetic: "Authentic Cultural Immersion" - Clean, light, high-value surfaces - Diagonal movement and gradients - Solid surfaces (no glassmorphism) ================================================================= */ @layer components { /* --------------------------------------------------------------- GRADIENT CTA BUTTON (.op-btn-primary) The primary call-to-action button with Heritage Gold gradient. Pill-shaped with lift animation on hover. CONTRAST NOTE: White text (#FFFFFF) on Heritage Gold (#B7780D) = 4.5:1 This PASSES WCAG AA for large text (18px+ bold or 24px+ regular) Button text at 16px+ bold meets this threshold. --------------------------------------------------------------- */ .op-btn-primary { /* Gradient background: Heritage Gold → Sunlit Gold */ background: linear-gradient(135deg, var(--sys-color-primary) 0%, var(--sys-color-primary-light) 100%); /* Typography */ color: #FFFFFF; font-family: var(--sys-font-display); font-size: var(--sys-font-size-body); font-weight: 700; text-decoration: none; text-align: center; letter-spacing: 0.01em; /* Shape: Pill */ border: none; border-radius: 9999px; /* Spacing */ padding: var(--sys-space-3) var(--sys-space-6); /* Layout */ display: inline-flex; align-items: center; justify-content: center; gap: var(--sys-space-2); /* Interaction */ cursor: pointer; transition: transform var(--sys-transition-fast), box-shadow var(--sys-transition-base); /* Baseline shadow */ box-shadow: 0 4px 6px -1px rgba(183, 120, 13, 0.2), 0 2px 4px -1px rgba(183, 120, 13, 0.1); } .op-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(43, 40, 35, 0.12), 0 10px 10px -5px rgba(183, 120, 13, 0.08); } .op-btn-primary:focus-visible { outline: 3px solid var(--sys-color-primary-tint-20); outline-offset: 3px; } .op-btn-primary:active { transform: translateY(0); box-shadow: 0 4px 6px -1px rgba(183, 120, 13, 0.15), 0 2px 4px -1px rgba(183, 120, 13, 0.08); } /* Button size variants */ .op-btn-primary--sm { font-size: var(--sys-font-size-small); padding: var(--sys-space-2) var(--sys-space-5); } .op-btn-primary--lg { font-size: var(--sys-font-size-lead); padding: var(--sys-space-4) var(--sys-space-8); } /* --------------------------------------------------------------- SECONDARY BUTTON (.op-btn-secondary) Outline variant for secondary actions. Uses ink-base for text to ensure accessibility. --------------------------------------------------------------- */ .op-btn-secondary { background: transparent; color: var(--sys-color-ink-base); font-family: var(--sys-font-display); font-size: var(--sys-font-size-body); font-weight: 600; text-decoration: none; text-align: center; border: var(--sys-border-width-md) solid var(--sys-color-primary); border-radius: 9999px; padding: calc(var(--sys-space-3) - 2px) calc(var(--sys-space-6) - 2px); display: inline-flex; align-items: center; justify-content: center; gap: var(--sys-space-2); cursor: pointer; transition: background-color var(--sys-transition-fast), border-color var(--sys-transition-fast), transform var(--sys-transition-fast); } .op-btn-secondary:hover { background-color: var(--sys-color-primary-tint-10); border-color: var(--sys-color-primary-light); transform: translateY(-1px); } .op-btn-secondary:focus-visible { outline: 3px solid var(--sys-color-primary-tint-20); outline-offset: 3px; } /* --------------------------------------------------------------- HERITAGE CARD COMPONENT (.op-card-heritage) Clean, solid card component for content containers. No glassmorphism - solid surfaces with subtle borders. Lift animation on hover creates depth. --------------------------------------------------------------- */ .op-card-heritage { /* Surface */ background: var(--sys-color-surface-0); border: 1px solid var(--sys-color-surface-2); border-radius: var(--sys-radius-lg); /* Spacing */ padding: var(--sys-space-6); /* Baseline shadow */ box-shadow: var(--sys-shadow-sm); /* Motion preparation */ transition: transform var(--sys-transition-base), box-shadow var(--sys-transition-base); } .op-card-heritage:hover { transform: translateY(-4px); box-shadow: var(--sys-shadow-lg); } /* Card with gold accent border (for featured content) */ .op-card-heritage--featured { border-top: 3px solid var(--sys-color-primary); } /* Card header area */ .op-card-heritage__header { margin-bottom: var(--sys-space-4); } .op-card-heritage__title { font-family: var(--sys-font-display); font-size: var(--sys-font-size-h5); font-weight: 700; color: var(--sys-color-ink-base); margin: 0 0 var(--sys-space-2) 0; } .op-card-heritage__subtitle { font-size: var(--sys-font-size-small); color: var(--sys-color-ink-light); margin: 0; } /* Card body */ .op-card-heritage__body { color: var(--sys-color-ink-light); line-height: var(--sys-line-height-relaxed); } .op-card-heritage__body p:last-child { margin-bottom: 0; } /* Card footer (for CTAs) */ .op-card-heritage__footer { margin-top: var(--sys-space-5); padding-top: var(--sys-space-4); border-top: 1px solid var(--sys-color-surface-2); } /* --------------------------------------------------------------- ASYMMETRIC HERO LAYOUT (.op-hero-asymmetric) CSS Grid-based hero section with diagonal split design. Image bleeds/overlaps text container for depth. NOT a symmetrical 12-column layout. Desktop: Offset grid with image overlap Mobile: Stacked layout --------------------------------------------------------------- */ .op-hero-asymmetric { display: grid; grid-template-columns: 1fr; gap: var(--sys-space-6); padding: var(--sys-section-spacing) 0; position: relative; overflow: hidden; } /* Content area - text and CTA */ .op-hero-asymmetric__content { position: relative; z-index: var(--sys-z-base); /* Content layer */ display: flex; flex-direction: column; justify-content: center; padding: var(--sys-space-5); } /* Eyebrow text - Gold accent allowed (decorative, not body text) */ .op-hero-asymmetric__eyebrow { font-family: var(--sys-font-display); font-size: var(--sys-font-size-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--sys-color-primary); margin-bottom: var(--sys-space-3); } /* Main heading - MUST use ink-base, NEVER gold */ .op-hero-asymmetric__title { font-family: var(--sys-font-display); font-size: var(--sys-font-size-h1); font-weight: 700; color: var(--sys-color-ink-base); line-height: var(--sys-line-height-tight); margin: 0 0 var(--sys-space-4) 0; } /* Decorative gold underline for title */ .op-hero-asymmetric__title--underline { position: relative; display: inline-block; } .op-hero-asymmetric__title--underline::after { content: ''; position: absolute; bottom: -0.15em; left: 0; width: 60%; height: 4px; background: linear-gradient(90deg, var(--sys-color-primary) 0%, var(--sys-color-primary-light) 100%); border-radius: 2px; } /* Lead text */ .op-hero-asymmetric__lead { font-size: var(--sys-font-size-lead); color: var(--sys-color-ink-light); line-height: var(--sys-line-height-relaxed); margin-bottom: var(--sys-space-6); max-width: 42ch; } /* CTA group */ .op-hero-asymmetric__cta { display: flex; flex-wrap: wrap; gap: var(--sys-space-4); align-items: center; } /* Image area - creates the diagonal/overlap effect */ .op-hero-asymmetric__media { position: relative; z-index: var(--sys-z-base); /* Media background layer */ } .op-hero-asymmetric__image { width: 100%; height: auto; border-radius: var(--sys-radius-xl); object-fit: cover; box-shadow: var(--sys-shadow-lg); } /* Diagonal decoration behind image */ .op-hero-asymmetric__media::before { content: ''; position: absolute; top: var(--sys-space-6); right: calc(var(--sys-space-6) * -1); bottom: calc(var(--sys-space-6) * -1); left: var(--sys-space-6); background: linear-gradient(135deg, var(--sys-color-primary-tint-10) 0%, var(--sys-color-primary-tint-05) 100%); border-radius: var(--sys-radius-xl); z-index: -1; /* Decorative layer behind image */ } /* ---- DESKTOP: Asymmetric Grid Layout ---- */ @media (min-width: 768px) { .op-hero-asymmetric { /* Asymmetric columns: content gets more space, image overlaps */ grid-template-columns: 1.1fr 0.9fr; grid-template-rows: auto; align-items: center; gap: var(--sys-space-8); min-height: 70vh; } .op-hero-asymmetric__content { padding: var(--sys-space-8) 0; padding-right: var(--sys-space-6); } /* Image overlap effect - bleeds into content area */ .op-hero-asymmetric__media { margin-left: calc(var(--sys-space-10) * -1); } .op-hero-asymmetric__image { aspect-ratio: 4 / 5; max-height: 600px; } } /* ---- LARGE DESKTOP: More dramatic asymmetry ---- */ @media (min-width: 1200px) { .op-hero-asymmetric { grid-template-columns: 1.2fr 0.8fr; } .op-hero-asymmetric__content { padding-right: var(--sys-space-10); } .op-hero-asymmetric__media { margin-left: calc(var(--sys-space-12) * -1); } } /* --------------------------------------------------------------- DIAGONAL SPLIT HERO VARIANT (.op-hero-diagonal) Alternative hero with a diagonal background split. Creates visual movement and energy. --------------------------------------------------------------- */ .op-hero-diagonal { position: relative; padding: var(--sys-section-spacing) 0; overflow: hidden; } /* Diagonal background split */ .op-hero-diagonal::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 50%; background: linear-gradient(135deg, var(--sys-color-surface-2) 0%, var(--sys-color-surface-1) 100%); transform: skewX(-6deg); transform-origin: top right; z-index: 0; /* Base layer for content */ } .op-hero-diagonal > * { position: relative; z-index: var(--sys-z-base); /* Content above diagonal */ } @media (max-width: 767px) { .op-hero-diagonal::before { width: 100%; height: 40%; top: auto; bottom: 0; transform: skewY(-3deg); transform-origin: bottom left; } } /* --------------------------------------------------------------- CULTURAL "RHYTHM" SPACING (.op-stagger-grid) Alternating margins mimic the syncopation of Afro-Brazilian drumming rhythms. Creates visual interest and movement. Desktop: Staggered layout with alternating top margins Mobile: Collapses to single column, stagger removed --------------------------------------------------------------- */ .op-stagger-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sys-space-6); } /* Desktop: Apply stagger effect */ @media (min-width: 768px) { .op-stagger-grid { gap: var(--sys-space-8) var(--sys-space-6); } /* Even children drop down - creates syncopated rhythm */ .op-stagger-grid > *:nth-child(even) { margin-top: var(--sys-space-8); } /* For 3-column layouts, offset the middle column */ .op-stagger-grid--triple > *:nth-child(3n+2) { margin-top: var(--sys-space-10); } .op-stagger-grid--triple > *:nth-child(3n) { margin-top: var(--sys-space-5); } } /* Mobile: Remove stagger for clean stacking */ @media (max-width: 767px) { .op-stagger-grid { grid-template-columns: 1fr; gap: var(--sys-space-5); } .op-stagger-grid > * { margin-top: 0 !important; } } /* --------------------------------------------------------------- OFFSET GRID (.offset-grid) Alternative rhythm pattern with horizontal offset. Creates a flowing, organic arrangement. --------------------------------------------------------------- */ .offset-grid { display: grid; grid-template-columns: 1fr; gap: var(--sys-space-5); } @media (min-width: 768px) { .offset-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sys-space-6); } /* Offset even items to the right */ .offset-grid > *:nth-child(even) { transform: translateX(var(--sys-space-6)); } } @media (min-width: 1024px) { .offset-grid > *:nth-child(even) { transform: translateX(var(--sys-space-8)); } } /* Mobile: Remove offset */ @media (max-width: 767px) { .offset-grid > * { transform: none !important; } } /* --------------------------------------------------------------- STICKY "DOORMAT" FOOTER (.op-doormat-sticky) Fixed bottom navigation for always-accessible booking. The "Concierge" experience demands booking is always one tap away. Mobile: Full width bar Desktop: Floating centered bar with max-width ACCESSIBILITY: - All touch targets ≥ 44px - High contrast text - Visible focus states --------------------------------------------------------------- */ .op-doormat-sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--sys-z-modal); /* Sticky footer above content */ /* Surface */ background: var(--sys-color-surface-0); border-top: 1px solid var(--sys-color-surface-2); box-shadow: 0 -4px 20px rgba(43, 40, 35, 0.08); /* Layout */ display: flex; align-items: center; justify-content: space-between; gap: var(--sys-space-4); /* Spacing - ensure touch target heights */ padding: var(--sys-space-3) var(--sys-space-4); min-height: 72px; /* Ensures adequate touch area */ /* Transition for show/hide */ transition: transform var(--sys-transition-base), opacity var(--sys-transition-fast); } /* Price display */ .op-doormat-sticky__price { display: flex; flex-direction: column; gap: var(--sys-space-1); } .op-doormat-sticky__price-label { font-family: var(--sys-font-body); font-size: var(--sys-font-size-caption); color: var(--sys-color-ink-light); text-transform: uppercase; letter-spacing: 0.05em; } .op-doormat-sticky__price-value { font-family: var(--sys-font-display); font-size: var(--sys-font-size-h4); font-weight: 700; color: var(--sys-color-ink-base); line-height: 1; } /* CTA button area - ensure minimum touch target */ .op-doormat-sticky__cta { flex-shrink: 0; } .op-doormat-sticky__cta .op-btn-primary { min-height: 48px; /* Touch target compliance */ min-width: 140px; padding: var(--sys-space-3) var(--sys-space-5); } /* Hidden state for scroll-triggered reveal */ .op-doormat-sticky--hidden { transform: translateY(100%); opacity: 0; pointer-events: none; } /* ---- DESKTOP: Floating centered bar ---- */ @media (min-width: 768px) { .op-doormat-sticky { left: 50%; right: auto; bottom: var(--sys-space-5); max-width: 480px; width: calc(100% - var(--sys-space-8)); border-radius: var(--sys-radius-full); border: 1px solid var(--sys-color-surface-2); padding: var(--sys-space-3) var(--sys-space-5); /* Maintain centered position during transitions */ transform: translateX(-50%); } .op-doormat-sticky--hidden { transform: translateX(-50%) translateY(calc(100% + var(--sys-space-5))); } .op-doormat-sticky__price-value { font-size: var(--sys-font-size-h5); } } /* ---- LARGE DESKTOP: Slightly larger ---- */ @media (min-width: 1024px) { .op-doormat-sticky { max-width: 520px; padding: var(--sys-space-4) var(--sys-space-6); } } /* Body padding to prevent content overlap */ /* Support both naming conventions for backwards compatibility */ .has-doormat-sticky, .has-op-doormat-sticky { padding-bottom: 88px; /* doormat height + buffer */ } @media (min-width: 768px) { .has-doormat-sticky, .has-op-doormat-sticky { padding-bottom: var(--sys-space-5); /* Less padding needed for floating bar */ } } /* --------------------------------------------------------------- TRUST & AUTHORITY BAR (.trust-bar) Displays trust signals immediately below hero CTA. Monochrome icons blend with the Heritage palette. --------------------------------------------------------------- */ .trust-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sys-space-5); padding: var(--sys-space-5) 0; } /* Individual trust item */ .trust-bar__item { display: flex; align-items: center; gap: var(--sys-space-2); text-decoration: none; transition: opacity var(--sys-transition-fast); } .trust-bar__item:hover { opacity: 0.8; } /* Trust icon - monochrome treatment */ .trust-bar__icon { width: 32px; height: 32px; flex-shrink: 0; color: var(--sys-color-primary); opacity: 0.85; } .trust-bar__icon svg { width: 100%; height: 100%; fill: currentColor; } /* Icon variant: subtle (uses ink-light instead of gold) */ .trust-bar__icon--subtle { color: var(--sys-color-ink-light); } /* Trust label */ .trust-bar__label { font-family: var(--sys-font-body); font-size: var(--sys-font-size-caption); color: var(--sys-color-ink-light); line-height: var(--sys-line-height-snug); } .trust-bar__label strong { display: block; font-weight: 600; color: var(--sys-color-ink-base); } /* Divider between trust items */ .trust-bar__divider { width: 1px; height: 24px; background-color: var(--sys-color-surface-2); } /* ---- MOBILE: Stack vertically if needed ---- */ @media (max-width: 575px) { .trust-bar { flex-direction: column; gap: var(--sys-space-4); } .trust-bar__divider { width: 48px; height: 1px; } } /* ---- DESKTOP: Horizontal with dividers ---- */ @media (min-width: 768px) { .trust-bar { gap: var(--sys-space-6); } .trust-bar__icon { width: 36px; height: 36px; } } /* --------------------------------------------------------------- TRUST BADGES ROW (.trust-badges) Compact horizontal row of certification/trust badges. For use in footers, sidebars, or checkout flows. --------------------------------------------------------------- */ .trust-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sys-space-4); } .trust-badges__badge { display: flex; align-items: center; justify-content: center; padding: var(--sys-space-2) var(--sys-space-3); background: var(--sys-color-surface-0); border: 1px solid var(--sys-color-surface-2); border-radius: var(--sys-radius-md); transition: border-color var(--sys-transition-fast); } .trust-badges__badge:hover { border-color: var(--sys-color-primary-tint-20); } .trust-badges__badge img, .trust-badges__badge svg { max-height: 28px; width: auto; filter: grayscale(100%); opacity: 0.7; transition: filter var(--sys-transition-fast), opacity var(--sys-transition-fast); } .trust-badges__badge:hover img, .trust-badges__badge:hover svg { filter: grayscale(0%); opacity: 1; } /* --------------------------------------------------------------- SOCIAL PROOF COUNTER (.social-proof) Real-time or static counters for bookings, reviews, etc. Creates urgency and trust through numbers. --------------------------------------------------------------- */ .social-proof { display: inline-flex; align-items: center; gap: var(--sys-space-2); padding: var(--sys-space-2) var(--sys-space-4); background: var(--sys-color-primary-tint-05); border-radius: var(--sys-radius-full); } .social-proof__icon { width: 16px; height: 16px; color: var(--sys-color-primary); } .social-proof__text { font-family: var(--sys-font-body); font-size: var(--sys-font-size-small); color: var(--sys-color-ink-base); } .social-proof__number { font-weight: 700; color: var(--sys-color-primary); } } /* ================================================================= UTILITIES LAYER African Heritage Texture Patterns These subtle background patterns connect our design to the African diaspora traditions that shaped Bahian culture. All patterns render at 3-5% opacity for subtlety. STATUS: Currently unused - commented out for production. Uncomment when needed for specific cultural context sections. ================================================================= */ @layer utilities { /** * Tile Pattern - Subtle Grid Texture * * A minimal tile pattern suitable for general use across the site. * Creates subtle visual texture without cultural specificity. * Use as a default background pattern for sections needing depth. */ .bg-pattern-tile { position: relative; background-color: var(--sys-color-surface-1); } .bg-pattern-tile::before { content: ''; position: absolute; inset: 0; opacity: 0.03; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%232B2823' stroke-width='0.5'%3E%3Crect x='0.25' y='0.25' width='31.5' height='31.5'/%3E%3C/g%3E%3C/svg%3E"); background-size: 32px 32px; } /* --------------------------------------------------------------- CULTURAL HERITAGE PATTERNS African diaspora patterns commented out for production. Uncomment when needed for culturally-specific sections. --------------------------------------------------------------- */ /* /** * Adinkra Pattern - Hand-Woven Excellence * * Inspired by the Ghanaian Adinkra "Nsaa" symbol representing * excellence and authenticity in craftsmanship. The interlocking * geometric pattern reflects hand-woven textiles brought to Brazil * through the African diaspora. *\/ .bg-pattern-adinkra { position: relative; background-color: var(--sys-color-surface-1); } .bg-pattern-adinkra::before { content: ''; position: absolute; inset: 0; opacity: 0.04; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%232B2823' stroke-width='1'%3E%3Cpath d='M0 20h40M20 0v40'/%3E%3Crect x='10' y='10' width='20' height='20'/%3E%3Crect x='15' y='15' width='10' height='10'/%3E%3C/g%3E%3C/svg%3E"); background-size: 40px 40px; } /** * Kente Cloth Geometry - Royal/Spiritual Pattern * * Based on the sacred geometric patterns of Kente cloth from * Ghana/Ashanti, symbolizing royalty, spirituality, and African * identity. These patterns were preserved in Bahian Candomblé * traditions and represent cultural continuity. */ .bg-pattern-kente { position: relative; background-color: var(--sys-color-surface-1); } .bg-pattern-kente::before { content: ''; position: absolute; inset: 0; opacity: 0.035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232B2823'%3E%3Cpath d='M0 12L12 0h4L0 16zM24 0l12 12v4L20 0zM48 12L36 24v-4l12-12zM24 48L12 36v-4l16 16z' fill-opacity='0.3'/%3E%3Crect x='22' y='8' width='4' height='32' fill-opacity='0.2'/%3E%3Crect x='8' y='22' width='32' height='4' fill-opacity='0.2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 48px 48px; } /** * Sankofa Heart - Return to Roots * * The Sankofa symbol from the Akan people - a heart shape * representing "return and get it" - learning from the past. * Central to Afro-Brazilian identity and the cultural journey * back to African roots that Opanije facilitates. */ .bg-pattern-sankofa { position: relative; background-color: var(--sys-color-surface-1); } .bg-pattern-sankofa::before { content: ''; position: absolute; inset: 0; opacity: 0.03; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232B2823' fill-opacity='0.25'%3E%3Cpath d='M30 50c-5-5-20-15-20-25C10 15 20 10 30 20c10-10 20-5 20 5 0 10-15 20-20 25z'/%3E%3Ccircle cx='30' cy='25' r='4' fill-opacity='0.3'/%3E%3C/g%3E%3C/svg%3E"); background-size: 60px 60px; } /** * Yoruba Sacred Geometry - Candomblé Connection * * Geometric patterns from Yoruba tradition (Nigeria/Benin), * foundational to Candomblé in Salvador. Represents the connection * between the physical and spiritual worlds through intersecting * lines - the crossroads where the Orixás meet humanity. */ .bg-pattern-yoruba { position: relative; background-color: var(--sys-color-surface-1); } .bg-pattern-yoruba::before { content: ''; position: absolute; inset: 0; opacity: 0.035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%232B2823' stroke-width='0.75'%3E%3Cpath d='M25 5v40M5 25h40'/%3E%3Cpath d='M25 10L40 25L25 40L10 25z'/%3E%3Cpath d='M5 5l10 10M45 5l-10 10M5 45l10-10M45 45l-10-10' stroke-opacity='0.5'/%3E%3C/g%3E%3C/svg%3E"); background-size: 50px 50px; } */ /* --------------------------------------------------------------- RHYTHMIC ENTRANCE ANIMATIONS Scroll-triggered reveal animations that mimic the syncopation of Afro-Brazilian drumming - fast attack, soft landing. ACCESSIBILITY: All animations wrapped in @media (prefers-reduced-motion: no-preference) to respect user motion preferences. Usage: Add .reveal-on-scroll to elements, JS adds .is-revealed when in view. --------------------------------------------------------------- */ /** * Drum Beat Easing * Fast start (attack), gentle deceleration (resonance) * Mimics the strike and decay of a percussion hit */ :root { --ease-drum-beat: cubic-bezier(0.16, 1, 0.3, 1); --ease-drum-soft: cubic-bezier(0.33, 1, 0.68, 1); } /* Base reveal state - hidden */ .reveal-on-scroll { opacity: 0; transform: translateY(20px); } /* Revealed state - visible */ .reveal-on-scroll.is-revealed { opacity: 1; transform: translateY(0); } /* Animation timing - ONLY when motion is allowed */ @media (prefers-reduced-motion: no-preference) { .reveal-on-scroll { transition: opacity 0.6s var(--ease-drum-beat), transform 0.6s var(--ease-drum-beat); } /* Staggered delays for child elements */ .reveal-on-scroll:nth-child(1) { transition-delay: 0ms; } .reveal-on-scroll:nth-child(2) { transition-delay: 80ms; } .reveal-on-scroll:nth-child(3) { transition-delay: 160ms; } .reveal-on-scroll:nth-child(4) { transition-delay: 240ms; } .reveal-on-scroll:nth-child(5) { transition-delay: 320ms; } .reveal-on-scroll:nth-child(6) { transition-delay: 400ms; } /* Variant: Fade only (no transform) */ .reveal-on-scroll--fade { transform: none; } .reveal-on-scroll--fade.is-revealed { transform: none; } /* Variant: Slide from left */ .reveal-on-scroll--left { transform: translateX(-30px); } .reveal-on-scroll--left.is-revealed { transform: translateX(0); } /* Variant: Slide from right */ .reveal-on-scroll--right { transform: translateX(30px); } .reveal-on-scroll--right.is-revealed { transform: translateX(0); } /* Variant: Scale up */ .reveal-on-scroll--scale { transform: scale(0.95); } .reveal-on-scroll--scale.is-revealed { transform: scale(1); } /* Variant: Slower, more dramatic */ .reveal-on-scroll--slow { transition-duration: 0.9s; } /* Variant: Faster, snappy */ .reveal-on-scroll--fast { transition-duration: 0.4s; } } /* Reduced motion: Instant reveal, no animation */ @media (prefers-reduced-motion: reduce) { .reveal-on-scroll { opacity: 1; transform: none; transition: none; } .reveal-on-scroll.is-revealed { opacity: 1; transform: none; } } /* --------------------------------------------------------------- KEYFRAME ANIMATIONS For more complex motion patterns --------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { /* Pulse animation for attention-grabbing elements */ @keyframes pulse-gentle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.02); opacity: 0.9; } } .animate-pulse-gentle { animation: pulse-gentle 3s var(--ease-drum-soft) infinite; } /* Float animation for decorative elements */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .animate-float { animation: float 4s var(--ease-drum-soft) infinite; } /* Shimmer animation for loading/skeleton states */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .animate-shimmer { background: linear-gradient( 90deg, var(--sys-color-surface-2) 0%, var(--sys-color-surface-0) 50%, var(--sys-color-surface-2) 100% ); background-size: 200% 100%; animation: shimmer 1.5s linear infinite; } } /* Reduced motion: Disable keyframe animations */ @media (prefers-reduced-motion: reduce) { .animate-pulse-gentle, .animate-float, .animate-shimmer { animation: none; } } /* --------------------------------------------------------------- PAGE SECTION UTILITIES Common section styling patterns extracted from inline styles --------------------------------------------------------------- */ /** * Section Spacing - Standard padding for full-width sections * Use .op-section on
elements for consistent vertical rhythm */ .op-section { padding: var(--sys-section-spacing) 0; } .op-section--lg { padding: calc(var(--sys-section-spacing) * 1.5) 0; } .op-section--sm { padding: calc(var(--sys-section-spacing) * 0.6) 0; } /** * Section Background Colors * Utility classes for common background treatments */ .op-bg-white { background-color: var(--sys-color-surface-0); } .op-bg-cream { background-color: var(--sys-color-surface-1); } .op-bg-light { background-color: var(--sys-color-surface-2); } .op-bg-dark { background-color: var(--sys-color-ink-base); color: var(--sys-color-surface-0); } /* Ensure text colors adapt on dark backgrounds */ .op-bg-dark h1, .op-bg-dark h2, .op-bg-dark h3, .op-bg-dark h4, .op-bg-dark h5, .op-bg-dark h6 { color: var(--sys-color-surface-0); } .op-bg-dark p, .op-bg-dark .lead { color: rgba(255, 255, 255, 0.85); } /** * Feature Icon Box * Decorative icon container with gold tint background */ .op-icon-box { width: 50px; height: 50px; background-color: var(--sys-color-primary-tint-10); color: var(--sys-color-primary); border-radius: var(--sys-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .op-icon-box--lg { width: 64px; height: 64px; font-size: 2rem; } .op-icon-box--sm { width: 40px; height: 40px; font-size: 1.25rem; } /** * Included Badge * Green "included" indicator badge */ .op-badge-included { display: inline-flex; align-items: center; padding: var(--sys-space-1) var(--sys-space-3); background-color: #e6fcf5; color: var(--sys-color-ink-base); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--sys-radius-full); font-size: var(--sys-font-size-small); font-weight: 400; } }