/* ===== Accommodation page v2 ===== */ .acc-hero{ background: radial-gradient(900px 600px at 20% 0%, rgba(72, 61, 255, .18), transparent 60%), radial-gradient(900px 600px at 80% 0%, rgba(190, 72, 255, .14), transparent 60%), radial-gradient(1200px 800px at 50% 10%, rgba(0,0,0,.06), transparent 65%), linear-gradient(180deg, #f7f7fb 0%, #f2f3fb 40%, #eef0fb 100%); } .acc-hr{ width: 64px; height: 3px; border: 0; opacity: 1; margin: 14px auto 28px; background: rgba(0,0,0,.18); border-radius: 999px; } .acc-intro-card{ margin: 0 auto 28px; padding: 22px 22px; border-radius: 22px; background: rgba(255,255,255,.75); border: 1px solid rgba(0,0,0,.07); box-shadow: 0 18px 55px rgba(0,0,0,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .acc-intro-card p{ margin: 0 0 12px; line-height: 1.65; color: rgba(0,0,0,.78); } .acc-muted{ color: rgba(0,0,0,.62) !important; margin-top: 10px; } .acc-code-row{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 6px; } .acc-code{ padding: 10px 14px; border-radius: 14px; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.08); font-weight: 600; } .acc-code span{ font-weight: 800; letter-spacing: .02em; } /* Pills (secondary CTAs) */ .acc-pill{ display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.10); color: rgba(0,0,0,.75); text-decoration: none; font-weight: 700; transition: transform .12s ease, background .12s ease, border-color .12s ease; } .acc-pill:hover{ transform: translateY(-1px); border-color: rgba(0,0,0,.18); background: #fff; text-decoration: none; } /* Callout (replaces alert) */ .acc-callout{ margin-top: 18px; padding: 16px 18px; border-radius: 18px; background: rgba(242,201,76,.16); border: 1px solid rgba(242,201,76,.35); } .acc-callout-title{ font-weight: 800; margin-bottom: 4px; } .acc-callout a{ font-weight: 800; text-decoration: underline; color: #111; } /* ===== Accordion ===== */ .acc-accordion{ margin: 0 auto; display: grid; gap: 14px; } .acc-item{ border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.78); border: 1px solid rgba(0,0,0,.07); box-shadow: 0 14px 40px rgba(0,0,0,.10); } .acc-toggle{ position: absolute; opacity: 0; pointer-events: none; } .acc-header{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; cursor: pointer; margin: 0; font-weight: 800; color: #111; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75)); border-bottom: 1px solid rgba(0,0,0,.06); } .acc-stars{ font-weight: 800; color: rgba(0,0,0,.55); margin-left: auto; } .acc-chevron{ width: 10px; height: 10px; border-right: 2px solid rgba(0,0,0,.45); border-bottom: 2px solid rgba(0,0,0,.45); transform: rotate(-45deg); transition: transform .14s ease; margin-left: 6px; } .acc-content{ display: none; padding: 16px; background: rgba(255,255,255,.55); } .acc-toggle:checked + .acc-header .acc-chevron{ transform: rotate(45deg); } .acc-toggle:checked ~ .acc-content{ display: block; } /* Inner cards inside accordion */ .acc-card{ border-radius: 18px; padding: 18px; background: rgba(255,255,255,.82); border: 1px solid rgba(0,0,0,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); margin-bottom: 14px; } .acc-subtitle{ margin: 0 0 12px; font-weight: 800; letter-spacing: -0.01em; } .acc-note{ color: rgba(0,0,0,.70); margin-bottom: 10px; } /* Images */ .acc-img{ width: 100%; border-radius: 16px; border: 1px solid rgba(0,0,0,.08); box-shadow: 0 18px 40px rgba(0,0,0,.12); object-fit: cover; aspect-ratio: 4 / 3; } /* Table */ .acc-table-wrap{ border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.02); margin: 10px 0 14px; } .acc-table{ width: 100%; border-collapse: collapse; } .acc-table th{ text-align: left; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; color: rgba(0,0,0,.55); padding: 12px 12px; background: rgba(255,255,255,.85); border-bottom: 1px solid rgba(0,0,0,.08); } .acc-table td{ padding: 12px 12px; border-bottom: 1px solid rgba(0,0,0,.06); color: rgba(0,0,0,.78); vertical-align: top; } .acc-table tr:last-child td{ border-bottom: 0; } .acc-table td:last-child{ font-weight: 800; white-space: nowrap; } /* Includes list */ .acc-includes-title{ font-weight: 800; margin-bottom: 6px; } .acc-list{ margin: 0; padding-left: 18px; color: rgba(0,0,0,.74); } /* Primary action button (same style language as your yellow CTA) */ .acc-btn{ display: inline-flex; align-items: center; justify-content: center; margin-top: 12px; padding: 12px 16px; border-radius: 999px; background: #f2c94c; color: #111; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; border: 0; box-shadow: 0 16px 30px rgba(242,201,76,.28); transition: transform .12s ease, filter .12s ease; } .acc-btn:hover{ transform: translateY(-1px); filter: brightness(1.02); text-decoration: none; } /* Responsive spacing */ @media (max-width: 767px){ .acc-content{ padding: 12px; } .acc-card{ padding: 14px; } .acc-intro-card{ padding: 18px; } }