/* * FOUR PRIMARY ACTIONS — FOUNDATION CONTRACT * * This file owns semantic states and docked transitions only. * The resting position inside the Hero is owned exclusively by sections/hero.css. */ [data-primary-actions] { box-sizing: border-box; } [data-primary-actions] .button, [data-primary-actions] .stay-button { box-sizing: border-box; } [data-primary-actions] [data-home-action] { --home-action-active: 0; } [data-primary-actions] [data-home-action][aria-current="page"] { --home-action-active: 1; } [data-primary-actions] [data-reserve-context] { --home-action-reserve: 1; } /* * PRIMARY ACTIONS — MOBILE DOCK V1 * * Outside Hero: * - two buttons in the left column * - two buttons in the right column * - both columns positioned below the fixed menu and around the central logo */ @media (max-width: 1023px) { [data-primary-actions] { --mobile-actions-side: clamp(8px, 2.8vw, 16px); --mobile-actions-column-gap: clamp(10px, 3vw, 18px); --mobile-actions-row-gap: 6px; --mobile-actions-height: 38px; --mobile-actions-radius: 10px; } /* Dock overlay. The resting Hero layout is owned by sections/hero.css. */ body > [data-primary-actions].is-mobile-logo-dock { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 0 !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; pointer-events: none !important; transform: none !important; z-index: 10060 !important; } body > [data-primary-actions].is-mobile-logo-dock .primary-actions-dock-group { display: contents !important; } body > [data-primary-actions].is-mobile-logo-dock .button, body > [data-primary-actions].is-mobile-logo-dock .stay-button { position: fixed !important; margin: 0 !important; min-width: 0 !important; max-width: none !important; height: var(--mobile-actions-height) !important; min-height: var(--mobile-actions-height) !important; padding: 6px 8px !important; border-radius: var(--mobile-actions-radius) !important; font-size: clamp(.62rem, 2.7vw, .78rem) !important; white-space: nowrap !important; box-sizing: border-box !important; pointer-events: auto !important; transition: left 260ms var(--home-ease-soft), top 260ms var(--home-ease-soft), width 260ms var(--home-ease-soft) !important; } /* Reserve: same family, slightly smaller and WhatsApp green outline. */ body > [data-primary-actions].is-mobile-logo-dock .stay-button, [data-primary-actions] [data-reserve-context] { border: 1.5px solid #25d366 !important; box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .12) !important; } } /* ========================================================================== PRIMARY ACTIONS — GLOBAL V1 Desktop dock + active states + WhatsApp reserve identity ========================================================================== */ [data-primary-actions] { --action-neutral-bg: rgba(15, 15, 18, .88); --action-neutral-border: rgba(255, 255, 255, .18); --action-neutral-text: #ffffff; --action-active-bg: #e8c878; --action-active-border: #f4dda0; --action-active-text: #111111; --action-whatsapp: #25d366; --action-gap: 8px; } [data-primary-actions] .button, [data-primary-actions] .stay-button { background: var(--action-neutral-bg) !important; border: 1px solid var(--action-neutral-border) !important; color: var(--action-neutral-text) !important; transition: background-color var(--home-motion-fast) var(--home-ease-standard), border-color var(--home-motion-fast) var(--home-ease-standard), color var(--home-motion-fast) var(--home-ease-standard), box-shadow var(--home-motion-fast) var(--home-ease-standard), transform var(--home-motion-fast) var(--home-ease-standard) !important; } /* Current section: Events, Guide or Reports. */ [data-primary-actions] [data-home-action][aria-current="page"] { background: var(--action-active-bg) !important; border-color: var(--action-active-border) !important; color: var(--action-active-text) !important; box-shadow: 0 0 0 1px rgba(232, 200, 120, .22), 0 8px 22px rgba(0, 0, 0, .22) !important; } /* Hero and Footer: no navigation button is visually active. */ body[data-current-home-section="hero"] [data-primary-actions] [data-home-action], body[data-current-home-section="footer"] [data-primary-actions] [data-home-action] { background: var(--action-neutral-bg) !important; border-color: var(--action-neutral-border) !important; color: var(--action-neutral-text) !important; box-shadow: none !important; } /* WhatsApp reserve action: never selected, smaller, green outline. */ [data-primary-actions] [data-reserve-context], [data-primary-actions] .stay-button { border: 1.5px solid var(--action-whatsapp) !important; color: #ffffff !important; box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .10), 0 0 0 0 rgba(37, 211, 102, 0) !important; } [data-primary-actions] [data-reserve-context]:hover, [data-primary-actions] .stay-button:hover, [data-primary-actions] [data-reserve-context]:focus-visible, [data-primary-actions] .stay-button:focus-visible { background: rgba(37, 211, 102, .14) !important; border-color: #39e276 !important; box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .18), 0 0 0 3px rgba(37, 211, 102, .12) !important; } /* Keyboard accessibility. */ [data-primary-actions] .button:focus-visible, [data-primary-actions] .stay-button:focus-visible { outline: 2px solid rgba(255, 255, 255, .9) !important; outline-offset: 2px !important; } /* Desktop dock: two buttons left and two right of the central logo. */ @media (min-width: 1024px) { body > [data-primary-actions].is-group-transition { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 0 !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; pointer-events: none !important; transform: none !important; z-index: 10060 !important; } body > [data-primary-actions].is-group-transition .primary-actions-dock-group { position: fixed !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--action-gap) !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: auto !important; } body > [data-primary-actions].is-group-transition .primary-actions-dock-right { grid-template-columns: minmax(0, 1fr) minmax(96px, .78fr) !important; } body > [data-primary-actions].is-group-transition .button, body > [data-primary-actions].is-group-transition .stay-button { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; transform: none !important; box-sizing: border-box !important; pointer-events: auto !important; } } /* Mobile reserve is right-aligned within its right column. */ @media (max-width: 1023px) { body > [data-primary-actions].is-mobile-logo-dock .stay-button { justify-self: end !important; } } /* ========================================================================== MOBILE SIDE-OF-LOGO DOCK V2 ========================================================================== */ @media (max-width: 1023px) { .mobile-side-logo-placeholder { display: block !important; width: 100% !important; height: 0; flex: 0 0 auto !important; pointer-events: none !important; } body > [data-primary-actions].is-mobile-side-logo-transition { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 0 !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; display: block !important; overflow: visible !important; pointer-events: none !important; transform: none !important; z-index: 10060 !important; } body > [data-primary-actions].is-mobile-side-logo-transition .primary-actions-dock-group { display: contents !important; } body > [data-primary-actions].is-mobile-side-logo-transition .button, body > [data-primary-actions].is-mobile-side-logo-transition .stay-button { min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 5px 3px !important; border-radius: 9px !important; font-size: clamp(.48rem, 2.25vw, .68rem) !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; box-sizing: border-box !important; pointer-events: auto !important; transition: none !important; will-change: left, top, width, height !important; backface-visibility: hidden !important; } body > [data-primary-actions].is-mobile-side-logo-transition .stay-button { border-color: #25d366 !important; } body > [data-primary-actions].is-mobile-side-logo-transition .button[aria-current="page"] { box-shadow: 0 0 0 1px rgba(232, 200, 120, .20), 0 5px 14px rgba(0, 0, 0, .22) !important; } } /* MOBILE DOCK FINAL WIDTH — compact and identical on all four actions */ @media (max-width: 1023px) { body > [data-primary-actions].is-mobile-side-logo-transition .button, body > [data-primary-actions].is-mobile-side-logo-transition .stay-button { min-width: 0 !important; max-width: 76px !important; } }