.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
word-break: normal !important;
}
.wpcf7 .hidden-fields-container {
display: none;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}main.blog-list-page,
main.single-post-page,
main.faq-page,
main.error-404 {
padding: 100px 2rem !important;
}
.btn.btn-blue {
margin-top: 10px;
background-color: var(--blue);
color: var(--secondary);
border: none;
padding: 12px 24px;
border-radius: 20px;
}
.back-to-top, .sound-section {
position: fixed;
bottom: 1em;
right: 1em;
font-size: 32px;
z-index: 99999;
}
.sound-section {
bottom: 2.5em;
}
#backToTop, #soundToggle {
height: 1em;
width: 1em;
background-color: var(--blue);
color: #093146;
display: flex;
align-items: center;
justify-content: center;
border-radius: 1em;
border: 2px solid #093146;
}
.sound-section .ri-volume-up-line {
font-size: 0.5em;
}
.back-to-top .ri-arrow-up-line {
font-size: 0.75em;
}
.post-details {
max-width: 900px;
margin: 100px auto;
color: var(--ink);
}
#menu-language {
position: relative; width: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
#menu-language .sub-menu {
position: absolute; top: 150%;
left: 50%;
transform: translateX(-50%);
background: var(--secondary);
width: 100%;
min-width: 120px;
border-radius: 8px;
display: none;
}
#menu-language li.trp-language-switcher-container:hover .sub-menu,
#menu-language li.trp-language-switcher-container ul.sub-menu:hover {
display: block !important;
}
#menu-language .sub-menu span.trp-menu-ls-label {
display: flex;
align-items: center;
gap: 6px;
padding: 10px;
}
#menu-language li {
font-size: 14px;
}
li.current-language-menu-item > a {
color: var(--secondary);
border: 2px solid var(--secondary);
padding: 6px 14px;
border-radius: 150px;
min-width: 120px;
}
.blog-list-page,
.single-post-page {
margin: 0 auto;
color: var(--ink);
}
.blog-list-hero {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.blog-list-hero__heading {
display: flex;
flex-direction: column;
gap: 10px;
flex-shrink: 0;
}
.blog-list-label {
font-size: 0.95rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--ink);
}
.blog-list-title {
font-size: clamp(2rem, 3vw, 3.2rem);
line-height: 1.05;
margin: 0;
}
.blog-list-controls {
display: grid;
gap: 16px;
grid-template-columns: 500px 1fr;
align-items: end;
flex-shrink: 0;
}
.blog-list-control label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: var(--ink);
}
.blog-search-input {
display: flex;
align-items: stretch;
gap: 10px;
}
.blog-search-input input {
width: 100%;
padding: 16px 18px;
border: 1px solid var(--border);
border-radius: 14px;
font-size: 1rem;
color: var(--ink);
background: var(--bg);
}
.blog-search-clear {
border: 1px solid var(--border);
background: var(--bg);
color: var(--ink);
padding: 0 18px;
border-radius: 14px;
cursor: pointer;
min-width: 90px;
}
.blog-search-clear:hover {
background: var(--bg);
}
.blog-list-filter select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
padding: 16px 18px;
border: 1px solid var(--border);
border-radius: 14px;
font-size: 1rem;
background: var(--bg);
color: var(--ink);
}
.blog-list-tags {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
margin-bottom: 32px;
}
.blog-list-tags__label {
font-weight: 700;
color: var(--ink);
min-width: 120px;
}
.blog-list-tags__chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.blog-filter-tag {
border: 1px solid var(--border);
background: var(--bg);
color: var(--ink);
padding: 10px 16px;
border-radius: 999px;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s ease;
}
.blog-filter-tag.active,
.blog-filter-tag:hover {
background: var(--blue);
color: var(--secondary);
border-color: var(--blue);
}
.blog-list-meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 12px;
margin-bottom: 32px;
color: var(--ink);
font-size: 0.95rem;
}
.blog-list-grid {
display: grid;
gap: 1.5rem;
row-gap: 4rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.blog-card {
display: flex;
flex-direction: column;
background: var(--bg);
border-radius: 28px;
overflow: hidden;
border: 1px solid var(--secondary);
box-shadow: 0 18px 60px rgba(15, 23, 42, 0.06);
min-height: 100%;
position: relative;
}
.blog-card:hover .blog-card__media img {
transform: scale(1.1);
}
.blog-card__media {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
}
.blog-card__media img {
width: 100%;
height: 100%;
object-fit: fill;
display: block;
transition: transform 0.6s;
}
.blog-card__media--placeholder {
display: grid;
place-items: center;
min-height: 200px;
background: var(--bg);
}
.blog-card__body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
padding-bottom: 80px;
}
.blog-card__header {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
position: absolute;
left: 20px;
bottom: 20px;
}
.blog-card__category {
display: inline-flex;
padding: 8px 14px;
background: var(--blue);
color: var(--secondary);
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.blog-card__date {
color: var(--ink);
font-size: 0.9rem;
}
.blog-card__title {
margin: 0;
font-size: 1.75rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.blog-card__title a {
color: var(--ink);
text-decoration: none;
}
.blog-card__title a:hover {
color: var(--ink-soft);
}
.blog-card__meta {
margin-top: auto;
display: flex;
align-items: center;
padding-top: 16px;
}
.blog-card__author-info {
display: flex;
align-items: center;
gap: 12px;
}
.blog-card__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.blog-card__avatar-img {
width: 100%;
height: 100%;
display: block;
}
.blog-card__author {
color: var(--ink);
font-size: 0.95rem;
font-weight: 600;
}
.blog-no-results {
padding: 24px;
border-radius: 22px;
background: var(--bg);
border: 1px solid var(--border);
color: var(--ink);
text-align: center;
grid-column: 1 / -1;
}
.single-article {
display: grid;
gap: 48px;
}
.single-article-hero {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center;
padding: 52px;
background: var(--bg);
border-radius: 40px;
box-shadow: 0 30px 80px rgba(15, 23, 42, 0.08);
}
.single-article-hero__content {
display: grid;
gap: 28px;
max-width: 620px;
}
.single-article-hero__eyebrow {
display: inline-flex;
padding: 10px 14px;
border-radius: 14px;
background: var(--blue);
color: var(--secondary);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
max-width: fit-content;
}
.single-article-hero__summary {
margin: 0;
font-size: 1.05rem;
line-height: 1.9;
color: var(--ink);
}
.single-article-hero__meta {
display: flex;
align-items: center;
gap: 18px;
}
.single-article-hero-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--blue);
flex-shrink: 0;
}
.single-article-hero-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.single-article-hero-author {
display: grid;
gap: 6px;
}
.single-article-hero-author__name {
font-size: 1rem;
font-weight: 700;
color: var(--ink);
}
.single-article-hero-author__role {
font-size: 0.95rem;
color: var(--ink-soft);
}
.single-article-hero-card {
position: absolute;
width: calc(100% - 60px);
height: calc(100% - 60px);
border-radius: 30px;
overflow: hidden;
border: 16px solid #fff;
box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
background: #fff;
}
.single-article-hero-card--back {
top: 44px;
left: 20px;
transform: rotate(-6deg);
}
.single-article-hero-card--front {
top: 0;
right: 0;
transform: rotate(8deg);
}
.single-article-hero-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.single-article-hero img {
width: 100%;
height: auto;
display: block;
border-radius: 30px;
object-fit: cover;
}
.single-article-heading {
display: flex;
flex-direction: column;
gap: 16px;
}
.single-article-labels {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.single-article-category {
background: var(--ink);
color: var(--secondary);
padding: 10px 18px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.single-article-title {
margin: 0;
font-size: clamp(3rem, 4vw, 4.8rem);
line-height: 1.03; }
.single-article-summary-grid {
display: grid;
grid-template-columns: 300px minmax(0, 1fr);
gap: 40px;
align-items: start;
}
.single-article-sidebar {
display: grid;
gap: 28px;
position: sticky;
top: 120px;
align-self: start;
}
.single-meta-block {
display: grid;
gap: 12px;
}
.single-meta-label {
display: block;
color: var(--ink);
font-size: 0.9rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 700;
}
.single-meta-value {
font-size: 1rem;
color: var(--ink);
font-weight: 600;
}
.single-category-badge {
background: var(--blue);
color: var(--secondary);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 999px;
font-size: 0.88rem;
letter-spacing: 0.04em;
}
.single-topics-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.single-topic-pill {
background: var(--blue);
color: var(--secondary);
padding: 10px 14px;
border-radius: 999px;
font-size: 0.85rem;
font-weight: 600;
}
.single-share-block {
display: grid;
gap: 14px;
}
.single-share-links {
display: flex;
gap: 10px;
}
.single-share-link {
display: inline-flex;
width: 44px;
height: 44px;
border-radius: 50%;
align-items: center;
justify-content: center;
background: var(--bg);
color: var(--ink);
font-size: 0.95rem;
text-decoration: none;
border: 1px solid transparent;
transition: background 0.2s ease, border-color 0.2s ease;
}
.single-share-link:hover {
background: var(--bg);
border-color: var(--border);
}
.single-article-intro p {
margin: 0;
font-size: 1.05rem;
line-height: 1.9;
color: var(--ink);
}
.single-article-content {
display: grid;
gap: 32px;
}
.single-article-content h2,
.single-article-content h3,
.single-article-content h4 {
margin-top: 0;
color: var(--ink);
}
.single-article-content p,
.single-article-content ul,
.single-article-content ol {
color: var(--ink);
line-height: 1.9;
font-size: 1rem;
}
.single-article-content ul,
.single-article-content ol {
padding-left: 1.5rem;
}
.single-article-content blockquote {
margin: 0;
padding: 24px;
background: var(--bg);
border-left: 4px solid var(--ink);
color: var(--ink);
border-radius: 18px;
}
.single-post-page .single-share-links a i {
font-size: 1.5rem;
}
.single-post-page .single-meta-label {
display: flex;
align-items: center;
font-size: 1rem;
}
@media (max-width: 1040px) {
.blog-list-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.single-article-summary-grid {
grid-template-columns: 1fr;
}
.single-article-sidebar {
position: static;
top: auto;
}
}
@media (max-width: 720px) {
.blog-list-hero,
.blog-list-controls {
grid-template-columns: 1fr;
}
.blog-list-grid {
grid-template-columns: 1fr;
}
.single-post-page {
padding: 40px 16px 80px;
}
.single-article-summary-grid {
gap: 24px;
}
}
@media (max-width: 720px) {
.blog-list-hero,
.blog-list-controls {
grid-template-columns: 1fr;
}
.blog-list-grid {
grid-template-columns: 1fr;
}
.blog-list-page {
padding: 30px 16px;
}
}
.faq-page {
padding: 100px 2rem;
max-width: 1160px;
margin: 0 auto;
color: var(--ink);
}
.faq-section {
display: grid;
gap: 32px;
}
.faq-page .faq-section .section-header h2 {
font-size: clamp(2rem, 3vw, 3.2rem);
}
.faq-search-input {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
}
.faq-search-input input {
width: 100%;
border: 1px solid var(--border);
border-radius: 18px;
padding: 18px 20px;
font-size: 1rem;
color: var(--ink);
background: var(--bg);
}
.faq-search-input input:focus {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
.faq-search-clear {
border: 1px solid var(--border);
border-radius: 18px;
background: var(--bg);
color: var(--ink);
font-size: 1.5rem;
line-height: 1;
width: 52px;
height: 52px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.faq-wrapper {
display: grid;
gap: 18px;
}
.faq-category-block {
border: 2px solid var(--border);
border-radius: 24px;
overflow: hidden;
background: var(--bg);
box-shadow: 0 18px 60px rgba(15, 23, 42, 0.05);
}
.faq-category-toggle {
width: 100%;
background: transparent;
border: none;
padding: 26px 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
cursor: pointer;
text-align: left;
}
.faq-category-toggle:hover,
.faq-item-toggle:hover {
background: rgba(31, 128, 255, 0.04);
}
.faq-category-title {
display: block;
font-size: clamp(1rem, 2vw, 1.4rem);
font-weight: 700;
color: var(--ink);
}
.faq-category-description {
margin-top: 10px;
color: var(--ink);
font-size: 1rem;
line-height: 1.8;
}
.faq-category-icon,
.faq-toggle-icon {
display: inline-flex;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--blue);
position: relative;
transition: background 0.25s ease;
}
.faq-category-icon::before,
.faq-toggle-icon::before,
.faq-category-icon::after,
.faq-toggle-icon::after {
content: '';
position: absolute;
background: var(--secondary);
}
.faq-category-icon::before,
.faq-toggle-icon::before {
top: 50%;
left: 50%;
width: 10px;
height: 2px;
transform: translate(-50%, -50%);
}
.faq-category-icon::after,
.faq-toggle-icon::after {
top: 50%;
left: 50%;
width: 2px;
height: 10px;
transform: translate(-50%, -50%);
}
.faq-category-toggle[aria-expanded="true"] .faq-category-icon::after,
.faq-item-toggle[aria-expanded="true"] .faq-toggle-icon::after {
display: none;
}
.faq-category-content {
border-top: 1px solid var(--border);
padding: 0 30px 24px;
display: none;
gap: 0;
}
.faq-category-toggle[aria-expanded="true"] + .faq-category-content {
display: grid;
}
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-item:last-of-type {
border-bottom: none;
}
.faq-item-toggle {
width: 100%;
background: transparent;
border: none;
padding: 22px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
cursor: pointer;
}
.faq-item-toggle span {
display: block;
font-size: 1.05rem;
color: var(--ink);
font-weight: 600;
}
.faq-answer {
padding-bottom: 22px;
color: var(--ink);
line-height: 1.8;
display: none;
}
.faq-item-toggle[aria-expanded="true"] + .faq-answer {
display: block;
}
.faq-answer p {
margin: 0;
}
.faq-no-results,
.faq-empty {
padding: 24px;
border-radius: 24px;
background: var(--bg);
border: 1px solid var(--border);
color: var(--ink);
text-align: center;
}
.faq-category-block.expanded {
border-color: var(--blue);
}
.main-content .error-404 {
padding: 100px 2rem;
text-align: center;
}
.contact-form-panel .contact-form .btn-primary-dark {
background: var(--blue) !important;
}
.events-page .events-page-list .section-head {
margin-bottom: 0px !important;
}
@media (max-width: 900px) {
.faq-category-toggle,
.faq-category-content,
.faq-search-input {
padding-left: 20px;
padding-right: 20px;
}
.faq-search {
width: 100%;
}
.single-article-hero {
grid-template-columns: 1fr;
padding: 32px;
}
.single-article-hero__visual {
min-height: 360px;
padding: 24px;
}
}
@media (max-width: 720px) {
.faq-page {
padding: 40px 16px;
}
.faq-category-toggle,
.faq-item-toggle {
padding: 18px 0;
}
.faq-category-description {
font-size: 0.95rem;
}
.single-article-hero {
padding: 24px;
}
.single-article-hero__content {
gap: 20px;
}
.single-article-hero__visual {
min-height: 260px;
}
.single-article-hero-card {
position: relative;
width: 100%;
height: auto;
transform: none;
top: 0;
left: 0;
right: 0;
border-width: 12px;
}
.single-article-hero-card--back {
top: 0;
left: 0;
}
.single-article-hero-card--front {
top: 0;
right: 0;
}
}:root {
--ink:           #1a1a1a;
--ink-soft:      #4a4a4a;
--muted:         #6b7280;
--bg:            #ffffff;
--card:          #ffffff;
--secondary:     #ffffff;
--border:        rgba(0, 0, 0, 0.08);
--blue:          #2DC2FF;
--golden-mustard: #f9bc19;
--vibrant-magenta: #f235f1;
--deep-orange: #fc8039;
--burnt-orange: #fc7d36;
--radius:        14px;
--radius-lg:     24px;
--radius-xl:     32px;
--shadow-soft:   0 1px 2px rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.12);
--shadow-elev:   0 4px 12px -4px rgba(0,0,0,0.08), 0 24px 48px -16px rgba(0,0,0,0.18);
--glass-bg:        rgba(255,255,255,0.55);
--glass-bg-strong: rgba(255,255,255,0.78);
--glass-border:    rgba(255,255,255,0.6);
--glass-shadow:    0 8px 32px -8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
--font-display:  "Bebas Neue", Impact, sans-serif;
--font-sans:     "Inter", system-ui, -apple-system, sans-serif;
} *, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-sans);
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, .display, .font-display {
font-family: var(--font-display);
letter-spacing: 0.005em;
font-weight: 400;
margin: 0;
}
.container {
max-width: 1280px;
margin: 0 auto;
}
@media (min-width: 768px) { .container { padding: 0 2rem; } }
@media (min-width: 1800px) { .container { max-width: 1600px; } }
.italic { font-family: var(--font-sans); font-style: italic; font-weight: 300; }
.centered { text-align: center; max-width: 760px; margin: 0 auto 3.5rem; }
.eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.35em;
font-weight: 600;
margin: 0 0 0.85rem;
} .lede { line-height: 1.65; font-size: 1.05rem; }
.lede.small { font-size: 0.85rem; } .display { font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1.02; } .glass {
background: var(--glass-bg);
backdrop-filter: saturate(180%) blur(24px);
-webkit-backdrop-filter: saturate(180%) blur(24px);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
.glass-strong {
background: var(--glass-bg-strong);
backdrop-filter: saturate(200%) blur(28px);
-webkit-backdrop-filter: saturate(200%) blur(28px);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
}
.glass-dark {
background: rgba(20,20,20,0.55);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border: 1px solid rgba(255,255,255,0.18);
}
.translucent { background: rgba(255,255,255,0.42); backdrop-filter: blur(18px); }
.translucent-dark { background: rgba(20,20,20,0.85); color: #fff; backdrop-filter: blur(18px); } .sky-backdrop {
position: fixed;
inset: 0;
z-index: -10;
overflow: hidden;
pointer-events: none;
opacity: 0;
transition: opacity 0.6s ease;
}
.sky {
position: absolute; inset: 0;
background: linear-gradient(to bottom, #cfe9ff 0%, #e8f4ff 60%, #ffffff 100%);
}
.sun {
position: absolute;
width: 42vmin; height: 42vmin;
border-radius: 50%;
top: 85%; left: 15%;
transform: translate(-50%, -50%) scale(0.9);
background: radial-gradient(circle, #fff7c2 0%, #ffd76b 40%, rgba(255,180,80,0) 70%);
filter: blur(6px);
opacity: 1;
will-change: top, left, transform, background;
}
.moon {
position: absolute;
width: 18vmin; height: 18vmin;
border-radius: 50%;
top: 120%; left: 80%;
transform: translate(-50%, -50%) scale(0.9);
background: radial-gradient(circle at 35% 35%, #ffffff 0%, #e6ecff 45%, #9aa6c8 80%, rgba(120,130,170,0) 100%);
box-shadow: 0 0 80px 10px rgba(220,230,255,0.35);
opacity: 0;
will-change: top, left, opacity;
}
.stars {
position: absolute; inset: 0;
opacity: 0;
background-image:
radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
radial-gradient(1px   1px   at 28% 42%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 47% 12%, #fff 50%, transparent 51%),
radial-gradient(1px   1px   at 63% 33%, #fff 50%, transparent 51%),
radial-gradient(2px   2px   at 78% 22%, #fff 50%, transparent 51%),
radial-gradient(1px   1px   at 88% 48%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 18% 65%, #fff 50%, transparent 51%),
radial-gradient(1px   1px   at 38% 78%, #fff 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 72% 70%, #fff 50%, transparent 51%),
radial-gradient(1px   1px   at 92% 82%, #fff 50%, transparent 51%);
} .navbar {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
padding: 1rem 0;
transition: padding 0.3s ease;
}
.navbar.scrolled { padding: 0.6rem 0; }
.navbar-inner {
display: flex; align-items: center; justify-content: space-between;
border-radius: var(--radius-lg);
padding: 0.6rem 1.5rem;
transition: all 0.3s ease;
background: rgba(45,194,255);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.18);
}
.home .navbar-inner {
background: transparent;
backdrop-filter: none;
border: none;
box-shadow: none;
}
.navbar.scrolled .navbar-inner {
background: rgba(255,255,255,0.78);
border-color: rgba(255,255,255,0.6);
box-shadow: var(--glass-shadow);
}
.logo {
font-family: var(--font-display);
font-size: 1.6rem;
letter-spacing: 0.18em;
color: #fff;
transition: color 0.3s;
}
.logo span { color: rgba(255,255,255,0.55); }
.navbar.scrolled .logo { color: var(--ink); }
.navbar.scrolled .logo span { color: rgba(0,0,0,0.55); }
.nav-links { display: none; gap: 1.75rem; }
.nav-links a {
font-size: 13px;
font-weight: 500;
color: var(--secondary);
transition: color 0.2s;
}
.navbar.scrolled .nav-links a { color: rgba(0,0,0,0.78); }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-actions { display: flex; align-items: center; gap: 4px; }
.lang-select { position: relative; display: none; }
@media (min-width: 768px) { .lang-select { display: block; } }
.lang-btn {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.45rem 0.75rem;
border-radius: var(--radius);
border: 1px solid rgba(255,255,255,0.25);
color: rgba(255,255,255,0.9);
font-size: 12px; font-weight: 600;
transition: background 0.2s;
}
.lang-btn:hover { background: rgba(255,255,255,0.1); }
.navbar.scrolled li.current-language-menu-item > a {
color: var(--blue);
border-color: var(--blue);
}
.navbar.scrolled .lang-btn:hover { background: rgba(0,0,0,0.05); }
.lang-menu {
position: absolute; right: 0; top: 100%; margin-top: 0.5rem;
width: 110px;
background: var(--glass-bg-strong);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-elev);
}
.lang-menu button {
display: inline;
width: 100%;
padding: 0.5rem 1rem;
text-align: left;
font-size: 14px; font-weight: 500;
color: rgba(0,0,0,0.65);
}
.lang-menu button img {
width: 20%;
display: inline;
}
.lang-menu button:hover { background: rgba(0,0,0,0.05); color: var(--ink); }
.btn-book {
display: none;
background: var(--secondary);
color: var(--blue);
padding: 0.55rem 1rem;
border-radius: var(--radius);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
transition: background 0.2s;
}
.navbar.scrolled .btn-book { background: var(--blue); color: var(--secondary); }
@media (min-width: 640px) { .btn-book { display: inline-flex; } }
.mobile-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: #fff;
border-radius: var(--radius);
border: 1px solid rgba(255,255,255,0.25);
background: rgba(255,255,255,0.08);
font-size: 1.35rem;
}
.navbar.scrolled .mobile-toggle { color: var(--ink); }
@media (min-width: 1024px) { .mobile-toggle { display: none; } }
.mobile-menu-backdrop {
position: fixed;
inset: 0;
z-index: 1001;
background: rgba(6,19,32,0.48);
backdrop-filter: blur(4px);
visibility: hidden;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.mobile-menu {
position: fixed;
top: 0;
right: 0;
z-index: 1002;
display: flex;
flex-direction: column;
width: min(88vw, 360px);
height: 100vh;
padding: 1rem;
background:
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,252,255,0.98));
box-shadow: -22px 0 55px rgba(6,19,32,0.24);
transform: translateX(105%);
visibility: hidden;
pointer-events: none;
transition: transform 0.28s ease, visibility 0.28s ease;
overflow-y: auto;
}
.mobile-menu-backdrop.is-open {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.mobile-menu.is-open {
visibility: visible;
pointer-events: auto;
transform: translateX(0);
}
.mobile-menu-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.35rem 0 1rem;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.mobile-menu .logo {
color: var(--ink);
font-size: 1.35rem;
}
.mobile-menu .logo span { color: rgba(0,0,0,0.5); }
.mobile-menu-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius);
background: rgba(0,0,0,0.06);
color: var(--ink);
font-size: 1.4rem;
transition: background 0.2s ease, transform 0.2s ease;
}
.mobile-menu-close:hover {
background: rgba(0,0,0,0.1);
transform: rotate(90deg);
}
.mobile-menu-links {
display: flex;
flex-direction: column;
gap: 0.45rem;
padding: 1.15rem 0;
}
.mobile-menu-links a {
display: flex;
align-items: center;
gap: 0.8rem;
min-height: 48px;
padding: 0.8rem 0.85rem;
color: var(--ink);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
font-size: 13px;
border-radius: var(--radius);
background: rgba(45,194,255,0.08);
transition: background 0.2s ease, transform 0.2s ease;
}
.mobile-menu-links a:hover {
background: rgba(45,194,255,0.16);
transform: translateX(-3px);
}
.mobile-menu-links i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #ffffff;
color: var(--blue);
font-size: 1rem;
box-shadow: 0 8px 20px rgba(6,19,32,0.08);
}
.mobile-menu-actions {
display: grid;
gap: 0.85rem;
padding-top: 0.35rem;
}
.mobile-book {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
min-height: 50px;
background: var(--blue);
color: var(--secondary);
border-radius: var(--radius);
box-shadow: 0 14px 32px rgba(45,194,255,0.28);
}
.mobile-whatsapp {
display: flex;
align-items: center;
gap: 0.7rem;
min-height: 48px;
padding: 0.7rem 0.85rem;
border: 1px solid rgba(37,211,102,0.25);
border-radius: var(--radius);
background: rgba(37,211,102,0.08);
color: #0f7a39;
font-size: 13px;
font-weight: 700;
}
.mobile-whatsapp i {
font-size: 1.2rem;
}
.mobile-lang {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem;
}
.mobile-lang button {
min-height: 40px;
border-radius: var(--radius);
background: rgba(6,19,32,0.06);
color: rgba(0,0,0,0.7);
font-size: 12px;
font-weight: 700;
transition: background 0.2s ease, color 0.2s ease;
}
.mobile-lang button:hover {
background: var(--blue);
color: #ffffff;
}
.mobile-menu-footer {
margin-top: auto;
padding-top: 1.15rem;
}
.mobile-socials {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6rem;
}
.mobile-socials a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
border-radius: var(--radius);
background: #ffffff;
color: var(--ink);
font-size: 1.2rem;
box-shadow: 0 8px 20px rgba(6,19,32,0.08);
transition: transform 0.2s ease, color 0.2s ease;
}
.mobile-socials a:hover {
color: var(--blue);
transform: translateY(-2px);
}
.mobile-menu-footer p {
margin-top: 0.85rem;
color: rgba(0,0,0,0.55);
font-size: 12px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.12em;
}
body.mobile-menu-open { overflow: hidden; }
@media (min-width: 1024px) {
.mobile-menu,
.mobile-menu-backdrop {
display: none;
}
} .hero {
position: relative;
width: 100%;
height: 100vh; min-height: 640px;
overflow: hidden;
}
.hero-video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.hero-overlay {
position: absolute; inset: 0;
background:
linear-gradient(to top,    rgba(0,0,0,0.4), transparent 60%),
linear-gradient(to right,  rgba(0,0,0,0.7), rgba(0,0,0,0.35) 50%, transparent 75%);
}
.hero-content {
position: relative; z-index: 5;
height: 100%;
display: flex; align-items: center;
}
.hero-text { max-width: 640px; color: #fff; }
.hero-chip {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.4rem 0.9rem;
border-radius: 999px;
background: var(--blue);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.18);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.25em;
font-weight: 500;
animation: fade-in-left 0.9s cubic-bezier(0.22,1,0.36,1) both;
}
.dot {
position: relative;
display: inline-block;
width: 8px; height: 8px;
background: #fff;
border-radius: 50%;
}
.dot::before {
content: ""; position: absolute; inset: 0;
background: inherit;
border-radius: inherit;
opacity: 0.6;
animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.dot-red { background: #ef4444; }
.dot-red::before { background: #ef4444; }
.hero-title {
margin: 1.5rem 0 0;
font-family: var(--font-display);
font-size: clamp(3rem, 9vw, 6rem);
line-height: 0.92;
color: #fff;
animation: fade-in-left 0.9s 0.1s cubic-bezier(0.22,1,0.36,1) both;
text-wrap: balance;
}
.hero-title-italic {
font-family: var(--font-sans);
font-style: italic;
font-weight: 300;
letter-spacing: -0.02em;
}
.hero-desc {
margin: 1.5rem 0 0;
font-size: 1rem;
line-height: 1.5;
color: rgba(255,255,255,0.85);
max-width: 560px;
font-weight: 300;
animation: fade-in-left 0.9s 0.25s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-ctas{
margin-top: 2rem;
display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.hero-follow .hero-follow-text,
.hero-awards-text {
font-size: 1.75rem;
font-weight: 500;
color: rgba(255,255,255,0.85);
display: flex; align-items: center;
}
.hero-awards-text {
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.hero-follow {
margin-top: 1.5rem;
display: flex; flex-wrap: wrap; gap: 1.5rem;
align-items: center;
animation: fade-in-left 0.9s 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-awards {
display: flex; flex-wrap: wrap; gap: 0.75rem;
animation: fade-in-left 0.9s 0.4s cubic-bezier(0.22,1,0.36,1) both;
margin-bottom: 2rem;
}
.hero-follow i {
font-size: 2rem;
}
.hero-follow i.ri-instagram-line:hover {
color: #ee2a7b;
}
.hero-follow i.ri-youtube-fill:hover {
color: red;
}
.hero-follow i.ri-tiktok-fill:hover {
color: #000000;
}
.hero-awards img {
width: 15%;
filter: brightness( 300% ) contrast( 100% ) saturate( 0% ) blur( 0px ) hue-rotate( 0deg )
}
.btn-primary-light {
background: #fff; color: var(--ink);
padding: 0.9rem 1.5rem;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
display: inline-flex; align-items: center; gap: 0.5rem;
box-shadow: var(--shadow-elev);
transition: background 0.2s, transform 0.2s;
}
.btn-primary-light:hover { background: rgba(255,255,255,0.9); }
.btn-primary-light .arrow { transition: transform 0.2s; }
.btn-primary-light:hover .arrow { transform: translateX(4px); }
.btn-ghost-dark {
background: rgba(20,20,20,0.45);
backdrop-filter: blur(20px);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
padding: 0.85rem 1.3rem;
border-radius: 999px;
font-size: 14px;
font-weight: 500;
display: inline-flex; align-items: center; gap: 0.5rem;
transition: background 0.2s;
}
.btn-ghost-dark:hover { background: rgba(255,255,255,0.1); }
.hero-social {
margin-top: 3rem;
display: none;
align-items: center; gap: 1.5rem;
animation: fade-in-left 0.9s 0.55s cubic-bezier(0.22,1,0.36,1) both;
}
@media (min-width: 640px) { .hero-social { display: flex; } }
.avatars { display: flex; }
.avatars div {
width: 36px; height: 36px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.8);
background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
backdrop-filter: blur(10px);
margin-left: -8px;
}
.avatars div:first-child { margin-left: 0; }
.stars-rating { color: var(--gold); font-size: 13px; }
.stars-rating span { margin-left: 0.5rem; color: rgba(255,255,255,0.9); font-weight: 600; font-size: 12px; }
.social-text p { margin: 0.2rem 0 0; font-size: 12px; color: rgba(255,255,255,0.7); }
.hero-scroll {
position: absolute;
left: 50%; bottom: 2rem;
transform: translateX(-50%);
z-index: 5;
display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
color: rgba(255,255,255,0.7);
font-size: 10px;
letter-spacing: 0.35em;
}
.hero-scroll:hover { color: #fff; }
.scroll-arrow { animation: pulse-arrow 2s ease-in-out infinite; } .events { position: relative; padding: 6rem 0; background: var(--bg); }
@media (min-width: 768px) { .events { padding: 3rem 0; } }
.event-sound-toggle {
position: fixed;
top: 88px;
left: 14px;
z-index: 900;
display: none;
align-items: center;
gap: 0.45rem;
min-height: 40px;
padding: 0.55rem 0.8rem;
border-radius: 999px;
background: linear-gradient(135deg, #2dc2ff, #061320);
color: #ffffff;
box-shadow: 0 14px 32px rgba(45,194,255,0.32), 0 0 0 1px rgba(255,255,255,0.22) inset;
backdrop-filter: blur(14px);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 0.22s ease, transform 0.22s ease;
overflow: visible;
}
.event-sound-toggle::before,
.event-sound-toggle::after {
content: "";
position: absolute;
inset: -5px;
border-radius: inherit;
pointer-events: none;
}
.event-sound-toggle::before {
border: 1px solid rgba(45,194,255,0.55);
animation: event-sound-ring 1.8s ease-out infinite;
}
.event-sound-toggle::after {
inset: 3px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent);
border-radius: inherit;
transform: translateX(-120%);
animation: event-sound-shine 2.7s ease-in-out infinite;
}
.event-sound-toggle i {
font-size: 1.05rem;
line-height: 1;
animation: event-sound-icon 1.1s ease-in-out infinite;
}
.event-sound-toggle.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
animation: event-sound-pop 0.34s ease both;
}
.event-sound-toggle.is-muted {
background: linear-gradient(135deg, #ffffff, #eef7fb);
color: var(--ink);
box-shadow: 0 12px 28px rgba(6,19,32,0.18), 0 0 0 1px rgba(6,19,32,0.08) inset;
}
.event-sound-toggle.is-muted::before {
border-color: rgba(6,19,32,0.18);
animation: none;
}
.event-sound-toggle.is-muted i {
animation: none;
}
@media (max-width: 767px) {
.event-sound-toggle { display: inline-flex; }
}
@keyframes event-sound-ring {
0% {
opacity: 0.85;
transform: scale(0.96);
}
100% {
opacity: 0;
transform: scale(1.22);
}
}
@keyframes event-sound-shine {
0%, 45% { transform: translateX(-120%); }
75%, 100% { transform: translateX(120%); }
}
@keyframes event-sound-icon {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.16); }
}
@keyframes event-sound-pop {
0% { transform: translateY(-8px) scale(0.96); }
100% { transform: translateY(0) scale(1); }
}
.events-bg {
position: absolute; inset: 0;
background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
background-size: 22px 22px;
opacity: 0.7;
pointer-events: none;
}
.section-head {
position: relative;
display: flex; flex-direction: column; gap: 1.5rem;
margin-bottom: 3.5rem;
}
@media (min-width: 768px) {
.section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.section-lede { max-width: 420px; color: var(--muted); line-height: 1.65; font-size: 15px; }
.events-grid {
position: relative;
display: grid; gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .events-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } }
@media (min-width: 1200px) { .events-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.event-card {
display: flex; flex-direction: column;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: transform 0.3s, box-shadow 0.3s;
}
.event-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-elev); }
.event-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--secondary); }
.event-media video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.event-card:hover .event-media video { transform: scale(1.04); }
.event-vignette {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 50%, rgba(0,0,0,0.2));
pointer-events: none;
}
.event-chips {
position: absolute; top: 1rem; left: 1rem; right: 1rem;
display: flex; justify-content: space-between; align-items: flex-start;
gap: 0.5rem;
}
.chips-left { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.chip {
display: inline-flex; align-items: center; gap: 0.4rem;
background: var(--glass-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--glass-border);
color: var(--ink);
font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.18em;
padding: 0.3rem 0.6rem;
border-radius: 999px;
}
.chip-strong {
background: var(--glass-bg-strong);
font-size: 12px;
padding: 0.35rem 0.75rem;
}
.event-body {
padding: 1.75rem;
display: flex; flex-direction: column; flex: 1;
}
.event-time {
color: rgba(0,0,0,0.55);
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.18em;
margin: 0 0 0.5rem;
}
.event-title {
font-family: var(--font-display);
font-size: 1.75rem;
letter-spacing: 0.04em;
margin: 0 0 0.65rem;
}
.event-desc { color: var(--muted); line-height: 1.65; font-size: 14px; flex: 1; margin: 0; }
.event-ctas { display: flex; flex-wrap: wrap; gap: 0.65rem; margin: 1.5rem 0 0;}
.btn-dark {
display: inline-flex; align-items: center; gap: 0.5rem;
background: var(--ink); color: #fff;
padding: 0.75rem 1.25rem;
border-radius: 999px;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.15em;
transition: background 0.2s;
}
.btn-dark:hover { background: rgba(0,0,0,0.85); }
.btn-light {
display: inline-flex; align-items: center; gap: 0.5rem;
background: var(--secondary);
border: 1px solid var(--border);
color: var(--ink);
padding: 0.75rem 1.25rem;
border-radius: 999px;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.15em;
transition: background 0.2s;
}
.btn-light:hover { background: rgba(0,0,0,0.05); }
.btn-on-dark {
display: inline-flex; align-items: center; gap: 0.5rem;
background: #fff; color: var(--ink);
padding: 0.85rem 1.75rem;
border-radius: 999px;
font-size: 13px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.15em;
}
.btn-on-dark:hover { background: rgba(255,255,255,0.9); } .about { padding: 3rem 0; }
@media (min-width: 768px) { .about { padding: 3rem 0; } }
.about-grid {
display: grid; gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .about-grid { grid-template-columns: repeat(3, 1fr); } }
.about-card, .g-card {
padding: 2rem;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-soft);
transition: transform 0.3s, box-shadow 0.3s;
}
.about-card:hover, .g-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-elev); }
.icon-square {
width: 48px; height: 48px;
border-radius: 16px;
background: var(--ink); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 1.4rem;
margin-bottom: 1.25rem;
}
.about-card h3, .g-card h3 {
font-family: var(--font-display);
font-size: 1.5rem;
letter-spacing: 0.04em;
margin: 0 0 0.65rem;
}
.about-card p, .g-card p { color: var(--muted); line-height: 1.65; font-size: 14px; margin: 0; } .stats { padding: 5rem 0; }
.stats-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem;
text-align: center;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-num { font-family: var(--font-display); font-size: 3rem; margin: 0; color: #fff; }
.stat-num.small { font-size: 1.85rem; }
.stat-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.25em;
color: rgba(255,255,255,0.6);
margin: 0.65rem 0 0;
}
.star.gold { color: var(--gold); font-size: 1.25rem; } .reviews { padding: 6rem 0; }
@media (min-width: 768px) { .reviews { padding: 8rem 0; } }
.google-chip {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 999px;
margin-bottom: 1.5rem;
}
.g-logo { font-weight: 700; font-size: 14px; }
.reviews-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
.review {
padding: 1.75rem;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-soft);
}
.review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.review-head > div:first-child { display: flex; align-items: center; gap: 0.75rem; }
.avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: var(--ink); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700;
}
.r-name { font-weight: 600; margin: 0; }
.r-date { font-size: 12px; color: var(--muted); margin: 0; }
.quote-mark { color: rgba(0,0,0,0.15); font-size: 2.5rem; line-height: 1; font-family: Georgia, serif; }
.review p { color: rgba(0,0,0,0.85); line-height: 1.65; margin: 0.75rem 0 0; } .checkin { padding: 6rem 0; }
.checkin-grid {
display: grid; gap: 2.5rem;
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 768px) { .checkin-grid { grid-template-columns: 1fr 1fr; } }
.checkin-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.checkin-image {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--radius-xl);
overflow: hidden;
border: 1px solid var(--border);
box-shadow: var(--shadow-elev);
}
.checkin-image img { width: 100%; height: 100%; object-fit: cover; }
.checkin-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
}
.checkin-card {
position: absolute;
left: 1.25rem; right: 1.25rem; bottom: 1.25rem;
border-radius: var(--radius-lg);
padding: 1rem;
display: flex; align-items: center; gap: 0.75rem;
}
.pin {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--ink); color: #fff;
display: flex; align-items: center; justify-content: center;
animation: float-slow 4s ease-in-out infinite;
} .guarantees { padding: 6rem 0; }
@media (min-width: 768px) { .guarantees { padding: 8rem 0; } }
.g-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .g-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .g-grid { grid-template-columns: repeat(4, 1fr); } }
.g-card { text-align: center; }
.g-card .icon-square { margin: 0 auto 1.25rem; } .gallery { padding: 6rem 0; }
@media (min-width: 768px) { .gallery { padding: 8rem 0; } }
.gallery-grid {
display: grid; gap: 0.75rem;
grid-template-columns: 1fr 1fr;
grid-auto-flow: dense;
}
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.g-item {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--radius-lg);
}
.g-item.tall { grid-row: span 2; aspect-ratio: 3 / 4; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.g-item:hover img { transform: scale(1.1); }
.g-item::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
opacity: 0.6;
transition: opacity 0.3s;
}
.g-item:hover::after { opacity: 0.3; } .awards { padding: 6rem 0; }
@media (min-width: 768px) { .awards { padding: 8rem 0; } }
.awards-grid {
display: grid; gap: 1.25rem;
grid-template-columns: 1fr;
margin-top: 3.5rem;
}
@media (min-width: 640px) { .awards-grid { grid-template-columns: repeat(3, 1fr); } }
.award {
text-align: center;
padding: 2rem;
border-radius: var(--radius-xl);
box-shadow: var(--shadow-soft);
}
.trophy {
width: 80px; height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), rgba(217,164,65,0.6));
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1.25rem;
font-size: 2rem;
box-shadow: var(--shadow-soft);
}
.award-year {
font-family: var(--font-display);
font-size: 2rem;
margin: 0;
} .payment { padding: 5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.payment-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 768px) { .payment-grid { grid-template-columns: 1fr 1fr; } }
.payment-methods { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.5rem; }
.pay-chip {
padding: 0.65rem 1rem;
border-radius: var(--radius);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
color: rgba(0,0,0,0.8);
}
.wa-card {
display: flex; align-items: center; gap: 1rem;
padding: 1.25rem;
border-radius: var(--radius-xl);
transition: box-shadow 0.3s;
}
.wa-card:hover { box-shadow: var(--shadow-elev); }
.wa-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: #25D366; color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 1.5rem;
box-shadow: var(--shadow-soft);
}
.wa-text { flex: 1; }
.wa-number {
font-family: var(--font-display);
font-size: 1.5rem;
margin: 0.25rem 0 0;
letter-spacing: 0.05em;
}
.wa-card .arrow { color: rgba(0,0,0,0.5); font-size: 1.25rem; transition: transform 0.2s, color 0.2s; }
.wa-card:hover .arrow { transform: translateX(4px); color: var(--ink); } .footer {
position: relative;
background: #2DC2FF;
color: #ffffff;
padding: 3rem 0 2.5rem;
overflow: hidden;
}
.newsletter {
border-radius: var(--radius-xl);
padding: 2rem;
margin-bottom: 4rem;
display: flex; flex-direction: column; gap: 1.5rem;
}
@media (min-width: 768px) { .newsletter { flex-direction: row; align-items: center; padding: 2.5rem; } }
.newsletter > div { flex: 1; }
.newsletter h3 {
font-family: var(--font-display);
font-size: 1.85rem;
letter-spacing: 0.04em;
margin: 0;
color: #fff;
}
.newsletter form { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
@media (min-width: 640px) { .newsletter form { flex-direction: row; min-width: 420px; } }
.input-wrap { position: relative; flex: 1; }
.input-icon {
position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
color: rgba(255,255,255,0.4);
}
.input-wrap input {
width: 100%;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
border-radius: 999px;
padding: 0.85rem 1rem 0.85rem 2.5rem;
font-size: 14px;
outline: none;
transition: border-color 0.2s, background 0.2s;
}
.input-wrap input::placeholder { color: rgba(255,255,255,0.4); }
.input-wrap input:focus { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.15); }
.newsletter form button {
background: #fff; color: var(--ink);
padding: 0.85rem 1.5rem;
border-radius: 999px;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.15em;
transition: background 0.2s;
}
.newsletter form button:hover { background: rgba(255,255,255,0.9); }
.footer-grid {
display: grid; gap: 3rem;
grid-template-columns: 1fr;
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: 5fr 2fr 2fr 3fr;
gap: 2.5rem;
}
}
.footer-brand .logo.on-dark { color: #fff; font-size: 1.85rem; letter-spacing: 0.18em; margin-top: 0; }
.footer-brand .logo.on-dark span { color: rgba(255,255,255,0.55); }
.contact-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.65rem; font-size: 14px; }
.contact-list a, .contact-list li { color: rgba(255,255,255,0.85); transition: color 0.2s; }
.contact-list a:hover { color: #fff; }
.footer-col-title {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.25em;
font-weight: 600;
color: #fff;
margin: 0 0 1rem;
}
.footer ul li { margin-bottom: 0.65rem; font-size: 14px; color: var(--secondary); }
.footer ul li a:hover { color: #fff; }
.socials { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.socials a {
width: 40px; height: 40px;
border-radius: var(--radius);
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.7);
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
transition: all 0.2s;
}
.socials a:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); transform: translateY(-2px); color: #fff; }
.contact-list a svg {
width: 13px; height: 13px;
}
.footer-bottom {
display: flex; flex-direction: column; gap: 1rem;
padding-top: 2rem;
font-size: 12px;
}
@media (min-width: 768px) {
.footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-bottom p { color: var(--secondary); margin: 0; }
.footer .legal a {
color: var(--secondary);
}
.legal { display: flex; flex-wrap: wrap; gap: 1.5rem; color: rgba(255,255,255,0.6); }
.legal a:hover { color: #fff; } @keyframes fade-in-left {
from { opacity: 0; transform: translateX(-30px); }
to   { opacity: 1; transform: translateX(0); }
}
@keyframes float-slow {
0%, 100% { transform: translateY(0); }
50%      { transform: translateY(-10px); }
}
@keyframes pulse-arrow {
0%, 100% { transform: translateY(0);    opacity: 0.6; }
50%      { transform: translateY(8px);  opacity: 1; }
}
@keyframes ping {
75%, 100% { transform: scale(2); opacity: 0; }
}
.reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1), transform 0.9s cubic-bezier(0.22,1,0.36,1);
}
.reveal.in { opacity: 1; transform: translateY(0); }h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
}
.container {
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
}
@media (min-width: 576px) {
.container {
max-width: 576px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1600px) {
.container {
max-width: 1440px;
}
} .d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-1 { flex: 1 1 0 !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-stretch { align-items: stretch !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.min-vh-100 { min-height: 100vh !important; }
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-muted { color: var(--muted) !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.overflow-hidden { overflow: hidden !important; }
.events-grid{
gap: 1.5rem;
}
.event-card{
border-radius: 0px;
overflow: unset;
background: transparent;
box-shadow: none;
border: 0px;
gap: 16px;
position: relative;
cursor: pointer;
}
.event-card-link {
position: absolute;
inset: 0;
z-index: 4;
border-radius: 10px;
}
.event-card:hover{
box-shadow: none;
}
.event-card .event-media{
border-radius: 10px;
box-shadow: var(--shadow-elev);
position: relative;
z-index: 1;
}
.event-card .event-title{
margin: 0 0 0rem; 
transition: all 0.3s ease;   
}
.event-card:hover .event-title{
color: var(--blue);
}
.event-card .event-body{
border-radius: 10px; padding: 0px;
background-color: transparent !important; }
.event-card .event-desc{ line-height: 1.5;
}
.event-ctas {
display: none;
}
.event-price{
text-align: right;
position: absolute;
right: -10px;
top: -10px;
width: 64px;
height: 64px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #000000;
color: #ffffff;
border-radius: 50px;
z-index: 1;
transition: all 0.3s ease;
}
.event-card:hover .event-price{
transform: rotate(25deg);
}
.event-price p {
line-height: 1.3;
font-size: 12px;
margin: 0;
}
.event-price h4,
.event-price h6 {
font-size: 24px;
line-height: 1;
font-weight: 500;
margin: 0;
}
.event-card .event-time{ }
.event-card .event-media{
aspect-ratio: 1 / 1;
box-shadow: 0px 20px 20px -5px rgba(0, 0, 0, 0.4);
}
.event-card .event-poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
transform: scale(1);
transition: opacity 0.25s ease, transform 0.7s ease;
z-index: 0;
}
.event-card .event-preview-video {
opacity: 0;
transform: scale(1);
z-index: 0;
}
.event-card.is-previewing .event-preview-video,
.event-card:hover .event-preview-video,
.event-card:focus-visible .event-preview-video {
opacity: 1;
transform: scale(1.05);
}
.event-card.is-previewing .event-poster,
.event-card:hover .event-poster,
.event-card:focus-visible .event-poster {
opacity: 0;
transform: scale(1.05);
}
.event-card:focus-visible {
outline: 3px solid rgba(45, 194, 255, 0.45);
outline-offset: 5px;
}
.event-audio-bar {
position: absolute;
left: 1rem;
right: auto;
bottom: 1rem;
z-index: 2;
min-width: 64px;
height: 40px;
padding: 0 0.6rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.26rem;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 14px;
background: rgba(7, 18, 30, 0.78);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
backdrop-filter: blur(14px);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.22s ease, transform 0.22s ease, background 0.22s ease;
pointer-events: none;
overflow: hidden;
}
.event-audio-bar span {
width: 3px;
height: 11px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
opacity: 0.86;
transform: scaleY(0.58);
transform-origin: center bottom;
}
.event-card.is-previewing .event-audio-bar,
.event-card:hover .event-audio-bar,
.event-card:focus-visible .event-audio-bar {
opacity: 1;
transform: translateY(0);
}
.event-card.is-previewing .event-audio-bar span {
animation: event-audio-pulse 0.74s ease-in-out infinite;
}
.event-card.is-previewing .event-audio-bar span:nth-child(2) {
height: 18px;
animation-delay: 0.11s;
}
.event-card.is-previewing .event-audio-bar span:nth-child(3) {
height: 15px;
animation-delay: 0.22s;
}
.event-card.is-previewing .event-audio-bar span:nth-child(4) {
height: 20px;
animation-delay: 0.33s;
}
.event-card.is-previewing .event-audio-bar span:nth-child(5) {
height: 17px;
animation-delay: 0.44s;
}
.event-card.is-audio-blocked .event-audio-bar {
background: rgba(7, 18, 30, 0.68);
}
.event-card.is-audio-blocked .event-audio-bar span {
animation-play-state: paused;
opacity: 0.28;
transform: scaleY(0.42);
}
@media (max-width: 767px) {
.event-audio-bar {
left: 0.8rem;
bottom: 0.8rem;
min-width: 64px;
height: 38px;
padding: 0 0.6rem;
border-radius: 13px;
}
.event-audio-bar span {
width: 4px;
height: 12px;
}
.event-card.is-previewing .event-audio-bar span:nth-child(2) {
height: 18px;
}
.event-card.is-previewing .event-audio-bar span:nth-child(3) {
height: 14px;
}
.event-card.is-previewing .event-audio-bar span:nth-child(4) {
height: 21px;
}
.event-card.is-previewing .event-audio-bar span:nth-child(5) {
height: 16px;
}
}
@keyframes event-audio-pulse {
0%, 100% {
transform: scaleY(0.45);
}
50% {
transform: scaleY(1);
}
}
.event-chips{
display: none;
}
.event-boat-icn{
width: 70px;
opacity: 0.3;
position: absolute;
bottom: 0;
right: 0;
transition: all 0.3s ease;
}
.event-card:hover .event-boat-icn{
opacity: 0.9;
}
@media (max-width: 767px) {
.event-boat-icn{
opacity: 1;
}
}
.bg-golden-mustard{
background-color: var(--golden-mustard);
}
.bg-vibrant-magenta{
background-color: var(--vibrant-magenta);
}
.bg-deep-orange{
background-color: var(--deep-orange);
}
.bg-burnt-orange{
background-color: var(--burnt-orange);
} .about {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.72)),
radial-gradient(circle at 12% 10%, rgba(45, 194, 255, 0.16), transparent 28%),
radial-gradient(circle at 90% 70%, rgba(249, 188, 25, 0.12), transparent 30%);
}
.about-experience {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
align-items: center;
}
.about-copy {
max-width: 680px;
}
.about-copy .display {
margin-bottom: 1.25rem;
}
.about-copy .lede {
color: var(--ink-soft);
max-width: 620px;
margin: 0;
}
.about-points {
display: grid;
gap: 0;
margin-top: 2.25rem;
border-top: 1px solid var(--border);
}
.about-point {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 1rem;
padding: 1.15rem 0;
border-bottom: 1px solid var(--border);
}
.about-point > span {
font-family: var(--font-display);
font-size: 1.65rem;
line-height: 1;
color: var(--blue);
}
.about-point h3 {
margin: 0 0 0.35rem;
font-family: var(--font-display);
font-size: 1.45rem;
font-weight: 400;
line-height: 1;
}
.about-point p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
.about-visual {
position: relative;
min-height: 420px;
border-radius: 18px;
overflow: hidden;
box-shadow: var(--shadow-elev);
}
.about-visual::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.36)),
linear-gradient(90deg, rgba(45, 194, 255, 0.22), rgba(252, 128, 57, 0.12));
pointer-events: none;
}
.about-visual img {
width: 100%;
height: 100%;
min-height: 420px;
object-fit: cover;
transition: transform 0.8s ease;
}
.about-visual:hover img {
transform: scale(1.04);
}
.about-visual-card {
position: absolute;
z-index: 1;
left: 1.25rem;
bottom: 1.25rem;
width: min(240px, calc(100% - 2.5rem));
padding: 1.25rem;
border-radius: 14px;
color: var(--ink);
}
.about-visual-card .eyebrow {
margin-bottom: 0.45rem;
}
.about-visual-card strong {
display: block;
font-family: var(--font-display);
font-size: 3rem;
font-weight: 400;
line-height: 0.95;
}
.about-visual-card span {
display: block;
color: var(--muted);
font-weight: 600;
}
@media (min-width: 900px) {
.about-experience {
grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.75fr);
gap: clamp(2rem, 5vw, 5rem);
}
}
@media (max-width: 767px) {
.about-copy .display {
margin-bottom: 1rem;
}
.about-point {
grid-template-columns: 40px minmax(0, 1fr);
}
.about-visual,
.about-visual img {
min-height: 340px;
}
} .stats {
position: relative;
overflow: hidden;
min-height: 620px;
display: flex;
align-items: stretch;
padding: 0;
background: #050a1f;
}
.stats-bg {
position: absolute;
inset: 0;
}
.stats-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.stats::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg, rgba(5, 10, 31, 0.92) 0%, rgba(5, 10, 31, 0.72) 44%, rgba(5, 10, 31, 0.2) 100%),
linear-gradient(0deg, rgba(5, 10, 31, 0.86) 0%, rgba(5, 10, 31, 0.18) 58%, rgba(5, 10, 31, 0.5) 100%);
pointer-events: none;
}
.stats-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1fr);
align-content: end;
gap: 2.5rem;
width: 100%;
padding-top: 5rem;
padding-bottom: 4rem;
}
.stats-intro {
max-width: 760px;
}
.stats-intro .display {
color: #ffffff;
max-width: 720px;
margin-bottom: 1rem;
}
.stats-intro .lede {
max-width: 520px;
margin: 0;
color: rgba(255, 255, 255, 0.72);
}
.stats-counter {
width: fit-content;
}
.stats-counter .stat-num {
margin: 0;
color: #ffffff;
font-size: clamp(5.5rem, 15vw, 13rem);
line-height: 0.8;
letter-spacing: 0;
text-shadow: 0 20px 80px rgba(0, 0, 0, 0.38);
}
.stats-counter .stat-label {
margin-top: 1rem;
color: rgba(255, 255, 255, 0.76);
}
.stats-proof {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
overflow: hidden;
border-radius: 12px;
background: rgba(255, 255, 255, 0.18);
box-shadow: var(--shadow-elev);
}
.stats-proof .stat {
padding: 1.25rem;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(18px);
}
.stats-proof .stat-num {
margin: 0;
color: #ffffff;
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1;
}
.stats-proof .stat-label {
margin-top: 0.55rem;
color: rgba(255, 255, 255, 0.68);
}
@media (min-width: 768px) {
.stats {
min-height: 720px;
}
.stats-content {
grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
grid-template-areas:
"intro proof"
"counter proof";
align-items: end;
padding-top: 7rem;
padding-bottom: 5rem;
}
.stats-intro {
grid-area: intro;
}
.stats-counter {
grid-area: counter;
}
.stats-proof {
grid-area: proof;
align-self: end;
}
} .reviews {
position: relative;
overflow: hidden;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)),
radial-gradient(circle at 12% 20%, rgba(45, 194, 255, 0.12), transparent 28%),
radial-gradient(circle at 88% 18%, rgba(249, 188, 25, 0.12), transparent 28%);
}
.reviews-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
align-items: start;
}
.reviews-summary {
position: sticky;
top: 110px;
}
.reviews-summary .display {
margin-bottom: 1rem;
}
.reviews-summary .lede {
max-width: 520px;
margin: 0;
color: var(--ink-soft);
}
.review-score {
display: inline-flex;
align-items: center;
gap: 1rem;
margin-top: 2rem;
padding: 1rem 1.25rem;
border: 1px solid var(--border);
border-radius: 12px;
background: rgba(255, 255, 255, 0.72);
box-shadow: var(--shadow-soft);
}
.review-score strong {
font-family: var(--font-display);
font-size: 4rem;
font-weight: 400;
line-height: 0.85;
}
.review-score p {
margin: 0.25rem 0 0;
color: var(--muted);
font-size: 13px;
font-weight: 600;
}
.reviews-panel {
display: grid;
gap: 1rem;
}
.reviews-slider {
overflow: hidden;
border-radius: 18px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.82);
box-shadow: var(--shadow-elev);
}
.reviews-track {
display: flex;
transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.reviews .review-slide {
flex: 0 0 100%;
min-height: 340px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(1.5rem, 4vw, 2.75rem);
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78)),
radial-gradient(circle at 100% 0%, rgba(45, 194, 255, 0.16), transparent 34%);
color: var(--ink);
border: 0;
box-shadow: none;
}
.reviews .review-slide .r-date,
.reviews .review-slide p {
color: var(--muted);
}
.reviews .review-slide > p {
max-width: 680px;
margin-top: 1.5rem;
color: var(--ink);
font-size: clamp(1.2rem, 2.2vw, 1.75rem);
line-height: 1.5;
}
.reviews .review-slide .quote-mark {
color: rgba(45, 194, 255, 0.28);
}
.reviews .review-slide .avatar {
background: var(--blue);
color: #ffffff;
}
.reviews-slider-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0 0;
}
.reviews-slider-nav button {
min-width: 72px;
padding: 0.7rem 1rem;
border-radius: 999px;
background: #ffffff;
color: var(--ink);
border: 1px solid var(--border);
box-shadow: var(--shadow-soft);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.reviews-slider-nav button:hover {
transform: translateY(-2px);
background: var(--ink);
color: #ffffff;
}
.review-dots {
display: flex;
justify-content: center;
gap: 0.5rem;
}
.review-dots button {
min-width: 0;
width: 9px;
height: 9px;
padding: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.18);
}
.review-dots button.is-active {
width: 26px;
border-radius: 999px;
background: var(--blue);
}
.reviews .review {
border-radius: 14px;
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(18px);
}
.reviews .review-feature {
padding: clamp(1.5rem, 4vw, 2.5rem);
background:
linear-gradient(135deg, rgba(5, 10, 31, 0.94), rgba(10, 22, 40, 0.9)),
radial-gradient(circle at 100% 0%, rgba(45, 194, 255, 0.2), transparent 32%);
color: #ffffff;
}
.reviews .review-feature .r-date,
.reviews .review-feature p {
color: rgba(255, 255, 255, 0.72);
}
.reviews .review-feature > p {
max-width: 640px;
color: rgba(255, 255, 255, 0.9);
font-size: clamp(1.15rem, 2vw, 1.55rem);
line-height: 1.55;
}
.reviews .review-feature .quote-mark {
color: rgba(255, 255, 255, 0.22);
}
.review-list {
display: grid;
gap: 1rem;
}
.review-list .review {
display: grid;
grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
gap: 1.25rem;
align-items: center;
padding: 1.25rem;
}
.review-list .review-head {
margin: 0;
justify-content: flex-start;
}
.review-list .review > p {
margin: 0;
}
.reviews-source {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
border-radius: 999px;
color: var(--muted);
background: rgba(255, 255, 255, 0.68);
border: 1px solid var(--border);
}
@media (min-width: 900px) {
.reviews-layout {
grid-template-columns: minmax(320px, 0.68fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 5rem);
}
}
@media (max-width: 767px) {
.reviews-summary {
position: static;
}
.reviews .review-slide {
min-height: 420px;
}
.reviews-slider-nav {
gap: 0.75rem;
}
.reviews-slider-nav button {
min-width: 64px;
padding: 0.65rem 0.75rem;
}
.review-list .review {
grid-template-columns: 1fr;
}
.reviews-source {
align-items: flex-start;
border-radius: 14px;
}
} .reviews {
padding: 6rem 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 250, 253, 0.9)),
radial-gradient(circle at 10% 0%, rgba(45, 194, 255, 0.12), transparent 32%),
radial-gradient(circle at 90% 12%, rgba(249, 188, 25, 0.1), transparent 28%);
}
.reviews-head {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
align-items: end;
margin-bottom: 2rem;
}
.reviews-head .display {
max-width: 720px;
}
.reviews-rating {
display: inline-flex;
align-items: center;
gap: 1rem;
justify-self: start;
padding: 0.95rem 1.15rem;
border: 1px solid var(--border);
border-radius: 12px;
background: #ffffff;
box-shadow: var(--shadow-soft);
}
.reviews-rating strong {
font-family: var(--font-display);
font-size: 3.5rem;
font-weight: 400;
line-height: 0.85;
}
.reviews-rating p {
margin: 0.25rem 0 0;
color: var(--muted);
font-size: 13px;
font-weight: 600;
}
.reviews .reviews-slider {
overflow: hidden;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.reviews .reviews-track {
display: flex;
gap: 1rem;
transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reviews .review-slide {
flex: 0 0 calc((100% - 2rem) / 3);
min-height: 300px;
padding: 1.5rem;
border: 1px solid var(--border);
border-radius: 14px;
background: #ffffff;
box-shadow: var(--shadow-soft);
color: var(--ink);
}
.reviews .review-slide:nth-child(even) {
transform: translateY(1.25rem);
}
.reviews .review-top {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 1.25rem;
}
.reviews .review-slide .avatar {
background: var(--ink);
}
.reviews .review-slide .star {
margin-bottom: 1rem;
letter-spacing: 0.08em;
}
.reviews .review-slide > p {
margin: 0;
color: var(--ink-soft);
font-size: 1rem;
line-height: 1.7;
}
.reviews-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 2.75rem;
}
.reviews-actions {
display: flex;
align-items: center;
gap: 0.8rem;
}
.reviews-actions > button {
width: 42px;
height: 42px;
min-width: 0;
padding: 0;
border-radius: 50%;
border: 1px solid var(--border);
background: #ffffff;
color: var(--ink);
box-shadow: var(--shadow-soft);
font-size: 1.25rem;
line-height: 1;
}
.reviews-actions > button:hover {
background: var(--ink);
color: #ffffff;
transform: translateY(-2px);
}
.reviews .review-dots button {
background: rgba(0, 0, 0, 0.16);
}
.reviews .review-dots button.is-active {
background: var(--blue);
}
.reviews .reviews-source {
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--muted);
}
@media (min-width: 768px) {
.reviews-head {
grid-template-columns: minmax(0, 1fr) auto;
}
.reviews-rating {
justify-self: end;
}
}
@media (max-width: 900px) {
.reviews .review-slide {
flex-basis: calc((100% - 1rem) / 2);
}
}
@media (max-width: 640px) {
.reviews {
padding: 5rem 0;
}
.reviews .review-slide {
flex-basis: 100%;
min-height: 280px;
}
.reviews .review-slide:nth-child(even) {
transform: none;
}
.reviews-controls {
align-items: flex-start;
flex-direction: column;
}
} .reviews {
padding: 6rem 0;
background:
linear-gradient(180deg, #ffffff 0%, #f5fbff 100%),
radial-gradient(circle at 90% 12%, rgba(45, 194, 255, 0.12), transparent 30%);
}
.reviews-showcase {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
align-items: center;
}
.reviews-copy {
max-width: 620px;
}
.reviews-copy .display {
margin-bottom: 1rem;
}
.reviews-copy .lede {
color: var(--ink-soft);
margin: 0;
}
.reviews-trust {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
width: min(100%, 420px);
margin-top: 2rem;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--border);
box-shadow: var(--shadow-soft);
}
.reviews-trust div {
padding: 1rem;
background: #ffffff;
}
.reviews-trust strong {
display: block;
font-family: var(--font-display);
font-size: 2.8rem;
font-weight: 400;
line-height: 0.95;
}
.reviews-trust span {
display: block;
margin-top: 0.35rem;
color: var(--muted);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.reviews-carousel {
min-width: 0;
}
.reviews-frame {
overflow: hidden;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.65);
background:
linear-gradient(135deg, rgba(5, 10, 31, 0.96), rgba(10, 22, 40, 0.92)),
radial-gradient(circle at 100% 0%, rgba(45, 194, 255, 0.22), transparent 34%);
box-shadow: var(--shadow-elev);
}
.reviews .reviews-carousel .reviews-track {
display: flex;
gap: 0;
transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reviews .reviews-carousel .review-slide {
flex: 0 0 100%;
min-height: 430px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(1.5rem, 4vw, 3rem);
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: #ffffff;
transform: none;
}
.reviews .reviews-carousel .review-slide .star {
margin-bottom: 2rem;
color: var(--golden-mustard);
letter-spacing: 0.12em;
}
.reviews .reviews-carousel .review-slide > p {
max-width: 720px;
margin: 0;
color: rgba(255, 255, 255, 0.94);
font-size: clamp(1.55rem, 3vw, 2.5rem);
line-height: 1.25;
}
.review-person {
display: flex;
align-items: center;
gap: 0.85rem;
margin-top: 2.5rem;
}
.review-person .avatar {
background: #ffffff;
color: var(--ink);
}
.review-person .r-name {
color: #ffffff;
}
.review-person .r-date {
color: rgba(255, 255, 255, 0.62);
}
.reviews .reviews-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.25rem;
}
.reviews .reviews-source {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: 999px;
background: #ffffff;
color: var(--muted);
}
.reviews .reviews-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.reviews .reviews-actions > button {
width: 44px;
height: 44px;
min-width: 0;
padding: 0;
border-radius: 50%;
border: 1px solid var(--border);
background: #ffffff;
color: var(--ink);
box-shadow: var(--shadow-soft);
font-size: 1.2rem;
}
.reviews .reviews-actions > button:hover {
background: var(--ink);
color: #ffffff;
}
.reviews .review-dots {
display: flex;
gap: 0.45rem;
}
.reviews .review-dots button {
width: 8px;
height: 8px;
min-width: 0;
padding: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.18);
}
.reviews .review-dots button.is-active {
width: 24px;
border-radius: 999px;
background: var(--blue);
}
@media (min-width: 900px) {
.reviews-showcase {
grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 5rem);
}
}
@media (max-width: 640px) {
.reviews {
padding: 5rem 0;
}
.reviews-trust {
grid-template-columns: 1fr;
}
.reviews .reviews-carousel .review-slide {
min-height: 430px;
}
.reviews .reviews-controls {
align-items: flex-start;
flex-direction: column;
}
} .party-gallery {
position: relative;
padding: 3rem 0;
overflow: hidden;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.94)),
radial-gradient(circle at 8% 0%, rgba(45, 194, 255, 0.12), transparent 28%);
}
@media (min-width: 768px) {
.section-head{
margin-bottom: 2rem;
}
.party-gallery {
padding: 3rem 0;
}
}
.gallery-showcase {
display: grid;
gap: 0rem;
margin-top: 1.5rem;
}
.gallery-strip {
position: relative;
display: grid;
grid-template-columns: minmax(1.25rem, 1fr) minmax(220px, 300px) minmax(0, 1200px) minmax(1.25rem, 1fr);
align-items: center;
gap: 1.5rem;
overflow: hidden;
padding: 3rem 0;
border-top: 1px solid var(--border);
}
.gallery-strip::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.72;
}
.gallery-strip-day::before {
background: linear-gradient(90deg, rgba(45, 194, 255, 0.1), rgba(255, 255, 255, 0));
}
.gallery-strip-sunset::before {
background:
linear-gradient(90deg, rgba(252, 128, 57, 0.2), rgba(242, 53, 241, 0.08), rgba(255, 255, 255, 0)),
radial-gradient(circle at 78% 48%, rgba(255, 210, 120, 0.25), transparent 26%);
}
.gallery-strip-formentera::before {
background: linear-gradient(90deg, rgba(45, 194, 255, 0.12), rgba(255, 255, 255, 0));
}
.gallery-strip-head {
position: relative;
z-index: 1;
grid-column: 2;
grid-row: 1;
display: block;
margin: 0;
padding-right: 0rem;
}
.gallery-strip-head .eyebrow {
margin: 0 0 0.75rem;
color: var(--muted);
}
.gallery-strip-head h3 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(2.2rem, 4vw, 3.5rem);
font-weight: 400;
line-height: 0.92;
max-width: 100%;
}
.gallery-strip-reverse {
grid-template-columns: minmax(1.25rem, 1fr) minmax(0, 1200px) minmax(220px, 300px) minmax(1.25rem, 1fr);
}
.gallery-strip-reverse .gallery-strip-head {
grid-column: 3;
grid-row: 1;
justify-self: end;
text-align: right;
padding-right: 0;
padding-left: 0px;
}
.gallery-strip-reverse .marquee-gallery {
grid-column: 1 / 3;
grid-row: 1;
}
.marquee-gallery {
position: relative;
z-index: 1;
grid-column: 3 / 5;
overflow: hidden;
width: 100%;
padding: 0.25rem 0;
cursor: grab;
user-select: none;
touch-action: pan-y;
}
.marquee-gallery.is-dragging {
cursor: grabbing;
}
.marquee-gallery::before,
.marquee-gallery::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: min(12vw, 120px);
z-index: 2;
pointer-events: none;
} .marquee-track {
display: flex;
width: max-content;
gap: 1rem;
animation: gallery-marquee 34s linear infinite;
will-change: transform;
}
.marquee-reverse .marquee-track {
animation-name: gallery-marquee-reverse;
}
.marquee-gallery:hover .marquee-track {
animation-play-state: paused;
}
.marquee-track a {
display: block;
width: clamp(210px, 20vw, 330px);
aspect-ratio: 4 / 3;
border-radius: 10px;
overflow: hidden;
background: var(--secondary);
box-shadow: var(--shadow-soft);
transform: translateZ(0);
}
.marquee-track img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease, filter 0.7s ease;
pointer-events: none;
}
.marquee-track a:hover img {
transform: scale(1.08);
filter: saturate(1.08) contrast(1.04);
}
@keyframes gallery-marquee {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - 0.5rem)); }
}
@keyframes gallery-marquee-reverse {
from { transform: translateX(calc(-50% - 0.5rem)); }
to { transform: translateX(0); }
}
@media (max-width: 767px) {
.party-gallery {
padding: 0rem 0;
}
.gallery-showcase {
margin-top: 2.5rem;
}
.gallery-strip {
display: block;
padding: 2rem 0;
}
.gallery-strip-reverse {
display: block;
}
.gallery-strip-head {
padding: 0 1.25rem 1rem;
}
.gallery-strip-reverse .gallery-strip-head {
text-align: right;
padding: 0 1.25rem 1rem;
}
.gallery-strip-head h3 {
max-width: none;
}
.marquee-track {
gap: 0.75rem;
animation-duration: 26s;
}
.marquee-track a {
width: 76vw;
border-radius: 10px;
}
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation-play-state: paused;
}
}
.custom-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: rgba(4, 8, 18, 0.88);
}
.custom-lightbox.is-open {
display: flex;
}
.custom-lightbox img {
max-width: min(1100px, 92vw);
max-height: 82vh;
border-radius: 14px;
object-fit: contain;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}
.custom-lightbox button {
position: absolute;
top: 1rem;
right: 1rem;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: #ffffff;
font-size: 30px;
line-height: 1;
}
.custom-lightbox p {
position: absolute;
left: 50%;
bottom: 1.25rem;
transform: translateX(-50%);
width: min(92vw, 720px);
margin: 0;
color: #ffffff;
text-align: center;
font-weight: 600;
}
.waves-container{
position: absolute;
bottom: -10px;
width: 100%;
min-height: 80px;
}
.waves-container svg{
width: 100%;
height: auto;
} .wave-svg .wave-1,
.wave-svg .wave-2,
.wave-svg .wave-3 {
transform-box: fill-box;
transform-origin: center;
will-change: transform;
}
.wave-svg .wave-1 {
animation: wave-drift-1 8s ease-in-out infinite alternate !important;
}
.wave-svg .wave-2 {
animation: wave-drift-2 10s ease-in-out infinite alternate !important;
}
.wave-svg .wave-3 {
animation: wave-drift-3 12s ease-in-out infinite alternate !important;
}
@keyframes wave-drift-1 {
from { transform: translate3d(-18px, -8px, 0) scaleX(1.03); }
to { transform: translate3d(18px, 10px, 0) scaleX(1.03); }
}
@keyframes wave-drift-2 {
from { transform: translate3d(20px, 8px, 0) scaleX(1.04); }
to { transform: translate3d(-20px, -10px, 0) scaleX(1.04); }
}
@keyframes wave-drift-3 {
from { transform: translate3d(-14px, 6px, 0) scaleX(1.02); }
to { transform: translate3d(14px, -8px, 0) scaleX(1.02); }
}
@-webkit-keyframes wave-drift-1 {
from { -webkit-transform: translate3d(-18px, -8px, 0) scaleX(1.03); transform: translate3d(-18px, -8px, 0) scaleX(1.03); }
to { -webkit-transform: translate3d(18px, 10px, 0) scaleX(1.03); transform: translate3d(18px, 10px, 0) scaleX(1.03); }
}
@-webkit-keyframes wave-drift-2 {
from { -webkit-transform: translate3d(20px, 8px, 0) scaleX(1.04); transform: translate3d(20px, 8px, 0) scaleX(1.04); }
to { -webkit-transform: translate3d(-20px, -10px, 0) scaleX(1.04); transform: translate3d(-20px, -10px, 0) scaleX(1.04); }
}
@-webkit-keyframes wave-drift-3 {
from { -webkit-transform: translate3d(-14px, 6px, 0) scaleX(1.02); transform: translate3d(-14px, 6px, 0) scaleX(1.02); }
to { -webkit-transform: translate3d(14px, -8px, 0) scaleX(1.02); transform: translate3d(14px, -8px, 0) scaleX(1.02); }
}
@media (prefers-reduced-motion: reduce) {
.wave-svg .wave-1,
.wave-svg .wave-2,
.wave-svg .wave-3 {
animation: none !important;
}
}  .checkin {
position: relative;
overflow: hidden;
padding: clamp(5rem, 8vw, 8rem) 0;
background:
linear-gradient(180deg, #ffffff 0%, #eef9ff 46%, #ffffff 100%),
radial-gradient(circle at 12% 14%, rgba(45, 194, 255, 0.18), transparent 28%);
}
.checkin::before {
content: "OCEANBEAT";
position: absolute;
right: -0.06em;
bottom: -0.34em;
color: rgba(0, 0, 0, 0.035);
font-family: var(--font-display);
font-size: clamp(8rem, 18vw, 20rem);
line-height: 1;
pointer-events: none;
}
.checkin .container {
position: relative;
z-index: 1;
}
.checkin-grid {
display: grid;
grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
gap: clamp(1.25rem, 3vw, 2.25rem);
align-items: stretch;
}
.checkin-visual,
.checkin-panel {
min-height: 620px;
border-radius: 18px;
}
.checkin-visual {
position: relative;
overflow: hidden;
background: #d9eef7;
box-shadow: 0 28px 90px rgba(5, 24, 39, 0.22);
}
.checkin-visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.checkin-photo-shade {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.02) 26%, rgba(0, 0, 0, 0.72) 100%),
linear-gradient(90deg, rgba(0, 0, 0, 0.24), transparent 58%);
}
.checkin-place-card,
.checkin-time-card {
position: absolute;
z-index: 2;
border: 1px solid rgba(255, 255, 255, 0.26);
background: rgba(7, 12, 20, 0.72);
color: #ffffff;
backdrop-filter: blur(18px);
box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}
.checkin-place-card {
left: 1.25rem;
right: 1.25rem;
bottom: 1.25rem;
display: flex;
align-items: center;
gap: 1rem;
padding: 1.1rem;
border-radius: 14px;
}
.checkin-pin {
width: 54px;
height: 54px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--blue);
color: #06111a;
font-size: 13px;
font-weight: 900;
}
.checkin-place-card p,
.checkin-place-card h3,
.checkin-place-card span {
margin: 0;
}
.checkin-place-card p {
color: rgba(255, 255, 255, 0.62);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.checkin-place-card h3 {
margin-top: 0.15rem;
color: #ffffff;
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.4rem);
font-weight: 400;
line-height: 0.95;
}
.checkin-place-card span {
display: block;
margin-top: 0.25rem;
color: rgba(255, 255, 255, 0.78);
font-weight: 700;
}
.checkin-time-card {
top: 1.25rem;
right: 1.25rem;
width: 150px;
padding: 1rem;
border-radius: 14px;
text-align: center;
}
.checkin-time-card strong {
display: block;
color: var(--blue);
font-family: var(--font-display);
font-size: 4.5rem;
font-weight: 400;
line-height: 0.82;
}
.checkin-time-card span {
display: block;
margin-top: 0.55rem;
color: rgba(255, 255, 255, 0.76);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
line-height: 1.35;
text-transform: uppercase;
}
.checkin-panel {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(1.35rem, 4vw, 3.5rem);
background:
linear-gradient(145deg, rgba(7, 13, 23, 0.98), rgba(10, 28, 43, 0.94)),
radial-gradient(circle at 94% 8%, rgba(45, 194, 255, 0.2), transparent 34%);
color: #ffffff;
box-shadow: 0 28px 90px rgba(5, 24, 39, 0.2);
}
.checkin-panel .eyebrow {
color: var(--blue);
}
.checkin-panel .display {
margin: 0 0 1rem;
color: #ffffff;
}
.checkin-panel .lede {
max-width: 620px;
margin: 0;
color: rgba(255, 255, 255, 0.72);
}
.checkin-panel .lede strong {
color: #ffffff;
}
.checkin-action-grid {
display: grid;
gap: 0.75rem;
margin-top: 2rem;
}
.checkin-action-grid a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 76px;
padding: 1rem 1.1rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
color: #ffffff;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.checkin-action-grid a:hover {
transform: translateY(-2px);
border-color: rgba(45, 194, 255, 0.54);
background: rgba(45, 194, 255, 0.12);
}
.checkin-action-grid span {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.checkin-action-grid strong {
font-size: clamp(0.95rem, 2vw, 1.1rem);
overflow-wrap: anywhere;
text-align: right;
}
.checkin-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
margin-top: 2rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
}
.checkin-steps div {
padding: 1rem;
background: rgba(255, 255, 255, 0.055);
}
.checkin-steps span {
display: block;
margin-bottom: 0.65rem;
color: var(--blue);
font-size: 12px;
font-weight: 900;
}
.checkin-steps p {
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: 13px;
line-height: 1.5;
}
@media (max-width: 980px) {
.checkin-grid {
grid-template-columns: 1fr;
}
.checkin-visual,
.checkin-panel {
min-height: auto;
}
.checkin-visual {
aspect-ratio: 16 / 11;
}
}
@media (max-width: 640px) {
.checkin {
padding: 4.5rem 0;
}
.checkin-visual {
aspect-ratio: auto;
min-height: 430px;
border-radius: 14px;
}
.checkin-panel {
border-radius: 14px;
}
.checkin-time-card {
width: 126px;
}
.checkin-time-card strong {
font-size: 3.8rem;
}
.checkin-place-card {
align-items: flex-start;
}
.checkin-action-grid a {
align-items: flex-start;
flex-direction: column;
}
.checkin-action-grid strong {
text-align: left;
}
.checkin-steps {
grid-template-columns: 1fr;
}
} .page-banner-contact {
min-height: 620px;
display: flex;
align-items: flex-end;
padding: 9rem 0 4.5rem;
color: #ffffff;
isolation: isolate;
}
.page-banner-contact .page-banner-content {
max-width: 720px;
padding-top: 0.5rem;
}
.page-banner-contact .event-back {
display: inline-flex;
margin-bottom: 1.5rem;
color: rgba(255,255,255,0.9);
}
.page-banner-contact .eyebrow {
color: rgba(255, 255, 255, 0.82);
letter-spacing: 0.18em;
font-size: 0.82rem;
text-transform: uppercase;
margin-bottom: 1rem;
}
.page-banner-contact .display {
margin: 0;
font-size: clamp(4rem, 7vw, 7rem);
line-height: 0.92;
color: #ffffff;
max-width: 760px;
}
.page-banner-contact .lede {
margin-top: 1.2rem;
max-width: 640px;
color: rgba(255, 255, 255, 0.84);
font-size: 1.05rem;
line-height: 1.75;
}
.page-banner-contact .banner-actions {
margin-top: 2.25rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.page-banner-contact .banner-actions a {
min-width: 160px;
}
.page-banner-contact .page-banner-shade {
background:
linear-gradient(180deg, rgba(4, 11, 18, 0.18) 0%, rgba(4, 11, 18, 0.65) 48%, rgba(4, 11, 18, 0.88) 100%),
linear-gradient(90deg, rgba(4, 11, 18, 0.55), rgba(4, 11, 18, 0.16) 58%, rgba(4, 11, 18, 0.02) 100%);
}
@media (max-width: 980px) {
.page-banner .page-banner-grid,
.banner-highlights {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.page-banner {
padding: 3.5rem 0 2rem;
}
.page-banner .page-banner-grid {
gap: 1.5rem;
}
.banner-panel {
min-height: auto;
}
.banner-panel-badge {
left: 1rem;
bottom: 1rem;
right: 1rem;
flex-wrap: wrap;
}
}
.contact-page {
padding: clamp(4rem, 6vw, 6rem) 0;
background: #f7fbff;
}
.contact-grid {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: start;
}
.contact-form-panel,
.contact-details-panel {
border-radius: 28px;
box-shadow: 0 32px 90px rgba(11, 35, 65, 0.12);
}
.contact-form-panel {
background: #ffffff;
padding: clamp(2rem, 3vw, 3rem);
}
.contact-form-panel .section-header {
max-width: 640px;
margin-bottom: 2rem;
}
.contact-form-panel .section-header h2 {
margin: 0.5rem 0 0;
color: #06111a;
font-size: clamp(2.6rem, 4vw, 3.4rem);
line-height: 1.02;
}
.contact-form-panel .section-header .lede {
margin-top: 1rem;
color: #526478;
}
.contact-form {
display: grid;
gap: 1.25rem;
}
.contact-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.contact-form label {
display: grid;
gap: 0.55rem;
color: #0f1f2f;
font-weight: 600;
font-size: 0.95rem;
}
.contact-form input,
.contact-form textarea {
width: 100%;
border: 1px solid #d7e5ee;
border-radius: 18px;
padding: 1rem 1.2rem;
font-size: 1rem;
color: #08101a;
background: #f8fcff;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: #7ac5ff;
box-shadow: 0 0 0 4px rgba(45, 194, 255, 0.15);
}
.contact-form textarea {
min-height: 190px;
resize: vertical;
}
.btn-primary-dark {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 1rem 1.7rem;
border-radius: 999px;
border: none;
background: #0d1a28;
color: #ffffff;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
.btn-primary-dark:hover {
background: #152a42;
transform: translateY(-1px);
}
.contact-details-panel {
display: grid;
gap: 1.5rem;
padding: clamp(1.5rem, 3vw, 2rem);
background: linear-gradient(180deg, #ffffff 0%, #eff9ff 100%);
}
.contact-card {
border-radius: 24px;
background: #ffffff;
padding: 1.75rem;
box-shadow: 0 20px 60px rgba(37, 94, 137, 0.08);
}
.contact-card-secondary {
background: #eef8ff;
}
.contact-card-title {
display: inline-flex;
margin-bottom: 1rem;
color: #0e2f52;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 700;
}
.contact-card h3 {
margin: 0 0 0.85rem;
color: #06111a;
font-size: 1.4rem;
line-height: 1.2;
}
.contact-card p {
margin: 0;
color: #526478;
line-height: 1.8;
}
.contact-panel-list {
margin-top: 1.5rem;
}
.contact-panel-list li {
margin: 1rem 0 0;
list-style: none;
}
.contact-panel-list li:first-child {
margin-top: 0;
}
.contact-panel-list a {
display: inline-flex;
align-items: center;
gap: 0.6rem;
color: #0f1f2f;
text-decoration: none;
font-weight: 600;
}
.contact-panel-list a:hover {
color: #0b3a6e;
}
.contact-card-link {
display: inline-flex;
margin-top: 1.35rem;
color: #0b3a6e;
font-weight: 700;
text-decoration: none;
}
.contact-card-info-grid {
display: grid;
gap: 1rem;
}
.contact-card-info-grid span {
display: block;
font-size: 0.82rem;
color: #6b7c90;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 700;
}
.contact-card-info-grid strong {
display: block;
margin-top: 0.35rem;
color: #0d1a28;
line-height: 1.55;
}
@media (max-width: 980px) {
.contact-grid,
.page-hero-contact .hero-links {
grid-template-columns: 1fr;
}
.contact-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.page-hero-contact {
padding: 3.5rem 0;
}
.page-hero-contact h1 {
font-size: clamp(2.4rem, 10vw, 3.4rem);
}
.contact-form-panel,
.contact-details-panel {
border-radius: 20px;
}
.contact-card {
padding: 1.5rem;
}
} .guarantees {
position: relative;
overflow: hidden;
padding: clamp(3rem, 8vw, 3rem) 0;
background:
linear-gradient(180deg, #ffffff 0%, #eff9ff 52%, #ffffff 100%),
radial-gradient(circle at 10% 12%, rgba(45, 194, 255, 0.16), transparent 30%),
radial-gradient(circle at 92% 82%, rgba(252, 128, 57, 0.12), transparent 30%);
}
.guarantees::before {
content: "FAQ";
position: absolute;
left: -0.04em;
top: -0.22em;
color: rgba(0, 0, 0, 0.035);
font-family: var(--font-display);
font-size: clamp(10rem, 22vw, 24rem);
line-height: 1;
pointer-events: none;
}
.guarantees .container {
position: relative;
z-index: 1;
}
.faq-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
}
.faq-intro {
max-width: 620px;
}
.faq-intro .display {
margin-bottom: 1rem;
max-width: 590px;
}
.faq-intro .lede {
margin: 0;
color: var(--ink-soft);
}
.faq-promise-card {
display: grid;
gap: 0.45rem;
margin-top: 2rem;
padding: 1.35rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.82);
}
.faq-promise-card .eyebrow {
margin: 0;
color: var(--muted);
}
.faq-promise-card strong {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 400;
line-height: 0.95;
}
.faq-promise-card span {
color: var(--muted);
line-height: 1.55;
}
.faq-panel {
display: grid;
gap: 1rem;
}
.faq-guarantees {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--border);
box-shadow: var(--shadow-soft);
}
.faq-guarantee {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 0.9rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.88);
}
.faq-guarantee > span {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--ink);
color: #ffffff;
font-size: 11px;
font-weight: 900;
}
.faq-guarantee h3 {
margin: 0 0 0.25rem;
font-size: 1.35rem;
line-height: 1;
}
.faq-guarantee p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.55;
}
.faq-list {
display: grid;
gap: 0.75rem;
}
.faq-list details {
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.9);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.faq-list summary {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 72px;
padding: 1rem 3.2rem 1rem 1.2rem;
color: var(--ink);
cursor: pointer;
list-style: none;
}
.faq-list summary::-webkit-details-marker {
display: none;
}
.faq-list summary span {
font-weight: 800;
line-height: 1.35;
}
.faq-list summary::after {
content: "+";
position: absolute;
top: 50%;
right: 1rem;
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #eef8fd;
color: var(--ink);
font-size: 1.4rem;
font-weight: 400;
line-height: 1;
transform: translateY(-50%);
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.faq-list details[open] summary::after {
background: var(--blue);
color: #06111a;
transform: translateY(-50%) rotate(45deg);
}
.faq-list details p {
margin: 0;
padding: 0 1.2rem 1.2rem;
color: var(--muted);
line-height: 1.65;
}
.faq-list details:hover,
.faq-list details:focus-within {
border-color: rgba(45, 194, 255, 0.5);
}
.faq-list summary:focus-visible {
outline: 3px solid rgba(45, 194, 255, 0.35);
outline-offset: -3px;
}
@media (min-width: 960px) {
.faq-layout {
grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1fr);
}
.faq-intro {
position: sticky;
top: 110px;
}
}
@media (min-width: 700px) {
.faq-guarantees {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.faq-guarantee {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.faq-promise-card,
.faq-list details,
.faq-guarantees {
border-radius: 12px;
}
.faq-list summary {
min-height: 68px;
padding-left: 1rem;
padding-right: 3rem;
}
.faq-list details p {
padding-left: 1rem;
padding-right: 1rem;
}
} .awards {
position: relative;
overflow: hidden;
padding: clamp(5rem, 8vw, 8rem) 0;
background:
linear-gradient(180deg, #ffffff 0%, #fff8e5 50%, #f1fbff 100%),
radial-gradient(circle at 86% 12%, rgba(249, 188, 25, 0.18), transparent 30%),
radial-gradient(circle at 12% 88%, rgba(45, 194, 255, 0.14), transparent 30%);
}
.awards::before {
content: "AWARDS";
position: absolute;
right: -0.06em;
top: -0.2em;
color: rgba(0, 0, 0, 0.035);
font-family: var(--font-display);
font-size: clamp(8rem, 17vw, 20rem);
line-height: 1;
pointer-events: none;
}
.awards .container {
position: relative;
z-index: 1;
}
.awards-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.awards-copy {
max-width: 650px;
}
.awards-copy .display {
margin-bottom: 1rem;
}
.awards-copy .lede {
max-width: 620px;
margin: 0;
color: var(--ink-soft);
}
.awards-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
width: min(100%, 460px);
margin-top: 2rem;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--border);
box-shadow: var(--shadow-soft);
}
.awards-stats div {
padding: 1rem;
background: rgba(255, 255, 255, 0.88);
}
.awards-stats strong {
display: block;
font-family: var(--font-display);
font-size: clamp(2.4rem, 5vw, 4rem);
font-weight: 400;
line-height: 0.9;
}
.awards-stats span {
display: block;
margin-top: 0.5rem;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.awards-showcase {
display: grid;
gap: 1rem;
}
.award-feature {
position: relative;
overflow: hidden;
min-height: 420px;
display: grid;
grid-template-rows: minmax(260px, 1fr) auto;
padding: 0;
border-radius: 18px;
background: #07101b;
color: #ffffff;
box-shadow: 0 28px 90px rgba(5, 24, 39, 0.22);
}
.award-feature::after {
content: "";
position: absolute;
inset: auto -12% -30% 24%;
height: 58%;
border-radius: 50%;
background: rgba(255, 255, 255, 0.06);
transform: rotate(-8deg);
pointer-events: none;
}
.award-feature-media {
position: relative;
overflow: hidden;
min-height: 300px;
}
.award-feature-media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(7, 13, 23, 0.02) 20%, rgba(7, 13, 23, 0.78) 100%),
linear-gradient(90deg, rgba(7, 13, 23, 0.18), rgba(7, 13, 23, 0));
}
.award-feature-media img {
width: 100%;
height: 100%;
min-height: 300px;
object-fit: cover;
filter: saturate(1.06) contrast(1.04);
transition: transform 0.8s ease;
}
.award-feature:hover .award-feature-media img {
transform: scale(1.04);
}
.award-feature-content {
position: relative;
z-index: 1;
margin-top: -7rem;
padding: clamp(1.35rem, 4vw, 2.5rem);
}
.award-badge {
position: absolute;
top: clamp(-4.4rem, -7vw, -3.2rem);
right: clamp(1.25rem, 3vw, 2.25rem);
display: inline-flex;
align-items: center;
justify-content: center;
width: clamp(92px, 11vw, 130px);
height: clamp(92px, 11vw, 130px);
border: 1px solid rgba(255, 255, 255, 0.32);
border-radius: 50%;
background:
linear-gradient(135deg, rgba(255, 224, 138, 0.96), rgba(249, 188, 25, 0.96) 54%, rgba(201, 131, 23, 0.96));
color: #06111a;
font-family: var(--font-display);
font-size: clamp(2.2rem, 4vw, 3.25rem);
line-height: 1;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}
.award-medal {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 116px;
height: 116px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(135deg, #ffe08a, var(--golden-mustard) 54%, #c98317);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}
.award-medal::before,
.award-medal::after {
content: "";
position: absolute;
bottom: -34px;
width: 30px;
height: 54px;
background: var(--blue);
transform-origin: top center;
}
.award-medal::before {
left: 33px;
transform: rotate(16deg);
}
.award-medal::after {
right: 33px;
background: var(--deep-orange);
transform: rotate(-16deg);
}
.award-medal span {
width: 76px;
height: 76px;
border: 2px solid rgba(255, 255, 255, 0.62);
border-radius: 50%;
}
.award-feature .eyebrow {
margin-bottom: 0.8rem;
color: var(--golden-mustard);
}
.award-feature h3 {
max-width: 560px;
margin: 0;
color: #ffffff;
font-size: clamp(2.3rem, 5vw, 4.5rem);
line-height: 0.95;
}
.award-feature p:last-child {
max-width: 520px;
margin: 1rem 0 0;
color: rgba(255, 255, 255, 0.74);
line-height: 1.65;
}
.awards-timeline {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
}
.award-year-card {
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 1rem;
align-items: center;
min-height: 112px;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.88);
box-shadow: var(--shadow-soft);
}
.award-year-card img {
width: 86px;
height: 86px;
border-radius: 10px;
object-fit: cover;
background: #edf6fa;
}
.award-year-card span {
display: block;
font-family: var(--font-display);
font-size: clamp(2.1rem, 5vw, 3rem);
line-height: 0.9;
}
.award-year-card p {
margin: 0;
color: var(--muted);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
text-align: left;
text-transform: uppercase;
}
.award-year-card.is-current {
border-color: rgba(249, 188, 25, 0.56);
background: #ffffff;
}
.award-year-card.is-current span {
color: var(--deep-orange);
}
@media (min-width: 960px) {
.awards-layout {
grid-template-columns: minmax(320px, 0.72fr) minmax(0, 1fr);
}
}
@media (min-width: 700px) {
.awards-timeline {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.award-year-card {
display: block;
min-height: 0;
padding: 0;
overflow: hidden;
}
.award-year-card img {
width: 100%;
height: 150px;
border-radius: 0;
}
.award-year-card div {
padding: 1rem;
}
.award-year-card p {
margin-top: 0.7rem;
text-align: left;
}
}
@media (max-width: 640px) {
.awards-stats {
grid-template-columns: 1fr;
}
.award-feature {
min-height: 430px;
border-radius: 14px;
}
.award-feature-content {
margin-top: -5.5rem;
}
.award-badge {
top: -3rem;
right: 1rem;
}
.award-medal {
width: 92px;
height: 92px;
}
.award-medal span {
width: 60px;
height: 60px;
}
.award-medal::before,
.award-medal::after {
bottom: -28px;
width: 24px;
height: 44px;
}
.award-year-card {
border-radius: 12px;
}
} .awards {
padding: clamp(5rem, 8vw, 8rem) 0;
background:
linear-gradient(180deg, #ffffff 0%, #f5fbff 100%),
radial-gradient(circle at 12% 10%, rgba(45, 194, 255, 0.12), transparent 30%),
radial-gradient(circle at 86% 18%, rgba(249, 188, 25, 0.1), transparent 28%);
}
.awards::before {
right: -0.04em;
top: auto;
bottom: -0.32em;
color: rgba(0, 0, 0, 0.03);
}
.awards-shell {
display: grid;
gap: clamp(2rem, 4vw, 3.5rem);
}
.awards-head {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
align-items: end;
}
.awards-head .display {
max-width: 760px;
}
.awards-head .lede {
max-width: 560px;
margin: 0;
color: var(--ink-soft);
}
.awards-feature-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
align-items: stretch;
}
.awards .award-feature {
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
grid-template-rows: none;
align-items: center;
padding: clamp(1rem, 2vw, 1.25rem);
border: 1px solid var(--border);
border-radius: 18px;
background: #ffffff;
color: var(--ink);
box-shadow: var(--shadow-elev);
}
.awards .award-feature::after {
display: none;
}
.awards .award-feature-media {
min-height: 0;
margin: 0;
border-radius: 14px;
background: #eef8fd;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.awards .award-feature-media::after {
display: none;
}
.awards .award-feature-media img {
width: 100%;
height: 100%;
min-height: 360px;
object-fit: contain;
padding: clamp(1rem, 3vw, 2rem);
filter: none;
}
.awards .award-feature:hover .award-feature-media img {
transform: none;
}
.awards .award-feature-content {
margin: 0;
padding: clamp(1.25rem, 4vw, 3rem);
}
.awards .award-feature-content .eyebrow {
color: var(--deep-orange);
}
.awards .award-feature h3 {
max-width: 520px;
color: var(--ink);
font-size: clamp(2.5rem, 5vw, 4.75rem);
}
.awards .award-feature p:last-child {
max-width: 460px;
color: var(--muted);
}
.awards-proof {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 18px;
background: var(--border);
box-shadow: var(--shadow-soft);
}
.awards-proof div {
min-height: 132px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.25rem;
background: rgba(255, 255, 255, 0.9);
}
.awards-proof strong {
font-family: var(--font-display);
font-size: clamp(2.8rem, 6vw, 4.75rem);
font-weight: 400;
line-height: 0.9;
}
.awards-proof span {
margin-top: 0.6rem;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.35;
text-transform: uppercase;
}
.awards .awards-timeline {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.awards .award-year-card {
display: grid;
grid-template-columns: 118px minmax(0, 1fr);
gap: 1rem;
align-items: center;
min-height: 142px;
padding: 0.9rem;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 16px;
background: rgba(255, 255, 255, 0.9);
box-shadow: var(--shadow-soft);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.awards .award-year-card:hover {
transform: translateY(-3px);
border-color: rgba(45, 194, 255, 0.35);
box-shadow: var(--shadow-elev);
}
.awards .award-year-card img {
width: 118px;
height: 118px;
border-radius: 12px;
object-fit: contain;
padding: 0.65rem;
background: #f3fbff;
}
.awards .award-year-card div {
padding: 0;
}
.awards .award-year-card span {
color: var(--ink);
font-size: clamp(2.5rem, 5vw, 3.5rem);
}
.awards .award-year-card p {
margin-top: 0.45rem;
color: var(--muted);
line-height: 1.35;
}
.awards .award-year-card.is-current {
border-color: rgba(252, 128, 57, 0.38);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 238, 0.96));
}
.awards .award-year-card.is-current span {
color: var(--deep-orange);
}
@media (min-width: 760px) {
.awards-head {
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.48fr);
}
.awards .awards-timeline {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.awards .award-year-card {
grid-template-columns: 1fr;
min-height: 0;
padding: 1rem;
}
.awards .award-year-card img {
width: 100%;
height: 190px;
}
}
@media (min-width: 1040px) {
.awards-feature-grid {
grid-template-columns: minmax(0, 1fr) minmax(250px, 0.34fr);
}
}
@media (max-width: 760px) {
.awards .award-feature {
grid-template-columns: 1fr;
border-radius: 14px;
}
.awards .award-feature-media img {
min-height: 260px;
}
.awards .award-feature-content {
padding: 1.25rem 0.5rem 0.5rem;
}
.awards-proof {
border-radius: 14px;
}
.awards-proof div {
min-height: 110px;
}
.awards .award-year-card {
border-radius: 14px;
}
} .reviews {
position: relative;
overflow: hidden;
padding: clamp(3rem, 8vw, 3rem) 0;
background:
linear-gradient(180deg, #ffffff 0%, #f3fbff 54%, #ffffff 100%),
radial-gradient(circle at 10% 14%, rgba(45, 194, 255, 0.13), transparent 30%),
radial-gradient(circle at 90% 12%, rgba(249, 188, 25, 0.11), transparent 28%);
}
.reviews::before {
content: "REVIEWS";
position: absolute;
right: -0.05em;
bottom: -0.32em;
color: rgba(0, 0, 0, 0.03);
font-family: var(--font-display);
font-size: clamp(8rem, 17vw, 20rem);
line-height: 1;
pointer-events: none;
}
.reviews .container {
position: relative;
z-index: 1;
}
.reviews-showcase {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
}
.reviews-copy {
max-width: 680px;
}
.reviews-copy .display {
max-width: 650px;
margin-bottom: 1rem;
}
.reviews-copy .lede {
max-width: 560px;
margin: 0;
color: var(--ink-soft);
}
.reviews-trust {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
width: min(100%, 460px);
margin-top: 2rem;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--border);
box-shadow: var(--shadow-soft);
}
.reviews-trust div {
padding: 1rem;
background: rgba(255, 255, 255, 0.92);
}
.reviews-trust strong {
display: block;
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(2.7rem, 5vw, 4rem);
font-weight: 400;
line-height: 0.9;
}
.reviews-trust span {
display: block;
margin-top: 0.5rem;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.35;
text-transform: uppercase;
}
.reviews-carousel {
min-width: 0;
}
.reviews-frame {
position: relative;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 18px;
background: #ffffff;
box-shadow: 0 26px 80px rgba(5, 24, 39, 0.14);
}
.reviews-frame::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 6px;
background: linear-gradient(90deg, var(--blue), var(--golden-mustard), var(--deep-orange));
z-index: 2;
}
.reviews .reviews-carousel .reviews-track {
display: flex;
gap: 0;
transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reviews .reviews-carousel .review-slide {
position: relative;
flex: 0 0 100%;
min-height: 390px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(1.5rem, 4vw, 3rem);
border: 0;
border-radius: 0;
background: #ffffff;
box-shadow: none;
color: var(--ink);
transform: none;
}
.reviews .reviews-carousel .review-slide::before {
content: "\201C";
position: absolute;
top: 1.25rem;
right: clamp(1.25rem, 4vw, 2.5rem);
color: rgba(45, 194, 255, 0.14);
font-family: Georgia, serif;
font-size: clamp(6rem, 12vw, 10rem);
line-height: 0.8;
pointer-events: none;
}
.reviews .reviews-carousel .review-slide .star {
position: relative;
z-index: 1;
width: fit-content;
margin: 0 0 1.5rem;
padding: 0.45rem 0.75rem;
border-radius: 999px;
background: #fff8df;
color: var(--golden-mustard);
font-size: 0.9rem;
letter-spacing: 0.08em;
}
.reviews .reviews-carousel .review-slide > p {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0;
color: var(--ink);
font-size: clamp(1.35rem, 2.6vw, 2.2rem);
line-height: 1.28;
}
.reviews .review-person {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 0.85rem;
margin-top: 2.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border);
}
.reviews .review-person .avatar {
width: 48px;
height: 48px;
flex: 0 0 auto;
background: var(--ink);
color: #ffffff;
}
.reviews .review-person .r-name {
margin: 0;
color: var(--ink);
}
.reviews .review-person .r-date {
margin: 0.2rem 0 0;
color: var(--muted);
}
.reviews .reviews-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.25rem;
}
.reviews .reviews-source {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: 999px;
background: #ffffff;
color: var(--muted);
box-shadow: var(--shadow-soft);
}
.reviews .reviews-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.reviews .reviews-actions > button {
width: 44px;
height: 44px;
min-width: 0;
padding: 0;
border: 1px solid var(--border);
border-radius: 50%;
background: #ffffff;
color: var(--ink);
box-shadow: var(--shadow-soft);
font-size: 1.15rem;
line-height: 1;
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.reviews .reviews-actions > button:hover {
transform: translateY(-2px);
background: var(--ink);
color: #ffffff;
}
.reviews .review-dots {
display: flex;
align-items: center;
gap: 0.45rem;
}
.reviews .review-dots button {
width: 8px;
height: 8px;
min-width: 0;
padding: 0;
border-radius: 50%;
background: rgba(0, 0, 0, 0.18);
}
.reviews .review-dots button.is-active {
width: 26px;
border-radius: 999px;
background: var(--blue);
}
@media (min-width: 940px) {
.reviews-showcase {
grid-template-columns: minmax(320px, 0.64fr) minmax(0, 1fr);
}
}
@media (max-width: 700px) {
.reviews-trust {
grid-template-columns: 1fr;
}
.reviews .reviews-carousel .review-slide {
min-height: 420px;
}
.reviews .reviews-controls {
align-items: flex-start;
flex-direction: column;
}
.reviews .reviews-source {
border-radius: 14px;
}
} .awards {
position: relative;
overflow: hidden;
padding: clamp(5rem, 8vw, 8rem) 0;
background:
linear-gradient(180deg, #ffffff 0%, #f7fbfd 48%, #ffffff 100%),
radial-gradient(circle at 12% 12%, rgba(45, 194, 255, 0.1), transparent 28%),
radial-gradient(circle at 92% 20%, rgba(249, 188, 25, 0.1), transparent 26%);
}
.awards::before {
content: "AWARDS";
position: absolute;
left: -0.05em;
bottom: -0.34em;
color: rgba(0, 0, 0, 0.028);
font-family: var(--font-display);
font-size: clamp(8rem, 17vw, 20rem);
line-height: 1;
pointer-events: none;
}
.awards .container {
position: relative;
z-index: 1;
}
.awards-shell {
display: grid;
gap: clamp(1.5rem, 4vw, 3rem);
}
.awards-head {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0rem;
align-items: end;
}
.awards-head .display {
max-width: 760px;
}
.awards-head .lede {
max-width: 590px;
margin: 0;
color: var(--ink-soft);
}
.awards-feature-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
align-items: stretch;
}
.awards .award-feature {
min-height: 0;
display: block;
padding: clamp(1.35rem, 4vw, 2.25rem);
border: 1px solid var(--border);
border-radius: 16px;
background: #ffffff;
color: var(--ink);
box-shadow: var(--shadow-soft);
}
.awards .award-feature::after,
.awards .award-feature-media {
display: none;
}
.awards .award-feature-content {
margin: 0;
padding: 0;
}
.awards .award-feature-content .eyebrow {
color: var(--deep-orange);
}
.awards .award-feature h3 {
max-width: 560px;
margin: 0;
color: var(--ink);
font-size: clamp(2.3rem, 4.8vw, 4rem);
line-height: 0.98;
}
.awards .award-feature p:last-of-type {
max-width: 620px;
margin: 1rem 0 0;
color: var(--muted);
line-height: 1.7;
}
.award-review-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1.25rem;
color: var(--ink);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.award-review-link:hover {
color: var(--blue);
}
.awards-proof {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--border);
box-shadow: var(--shadow-soft);
}
.awards-proof div {
min-height: 118px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1.1rem;
background: #ffffff;
}
.awards-proof strong {
display: block;
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 400;
line-height: 0.9;
}
.awards-proof span {
display: block;
margin-top: 0.55rem;
color: var(--muted);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.35;
text-transform: uppercase;
}
.awards .awards-timeline {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
}
.awards .award-year-card {
display: grid;
grid-template-columns: 128px minmax(0, 1fr);
gap: 1rem;
align-items: center;
min-height: 150px;
padding: 0.9rem;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 16px;
background: #ffffff;
box-shadow: var(--shadow-soft);
transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.awards .award-year-card:hover {
transform: translateY(-3px);
border-color: rgba(45, 194, 255, 0.34);
box-shadow: var(--shadow-elev);
}
.awards .award-year-card img {
width: 128px;
height: 128px;
border-radius: 12px;
object-fit: contain;
padding: 0.7rem;
background: #f3fbff;
}
.awards .award-year-card div {
padding: 0;
}
.awards .award-year-card small {
display: block;
margin-bottom: 0.5rem;
color: var(--muted);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.awards .award-year-card span {
display: block;
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(2.8rem, 5vw, 4rem);
line-height: 0.85;
}
.awards .award-year-card p {
margin: 0.55rem 0 0;
color: var(--muted);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.35;
text-transform: uppercase;
}
.awards .award-year-card.is-current {
border-color: rgba(252, 128, 57, 0.42);
background:
linear-gradient(180deg, #ffffff, #fffaf1);
}
.awards .award-year-card.is-current span {
color: var(--deep-orange);
}
@media (min-width: 760px) { .awards-feature-grid {
grid-template-columns: minmax(0, 1fr) minmax(240px, 0.34fr);
}
.awards .awards-timeline {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.awards .award-year-card {
grid-template-columns: 1fr;
align-content: start;
min-height: 0;
padding: 1rem;
}
.awards .award-year-card img {
width: 100%;
height: 190px;
}
}
@media (max-width: 640px) {
.awards .award-feature,
.awards-proof,
.awards .award-year-card {
border-radius: 14px;
}
.awards .award-year-card {
grid-template-columns: 104px minmax(0, 1fr);
min-height: 126px;
}
.awards .award-year-card img {
width: 104px;
height: 104px;
}
} .awards {
position: relative;
overflow: hidden;
padding: clamp(3rem, 8vw, 3rem) 0;
background:
linear-gradient(180deg, #ffffff 0%, #eef9ff 52%, #ffffff 100%),
radial-gradient(circle at 10% 10%, rgba(45, 194, 255, 0.14), transparent 30%),
radial-gradient(circle at 92% 18%, rgba(249, 188, 25, 0.12), transparent 28%);
}
.awards::before {
content: "AWARDS";
position: absolute;
right: -0.05em;
bottom: -0.34em;
color: rgba(0, 0, 0, 0.03);
font-family: var(--font-display);
font-size: clamp(8rem, 17vw, 20rem);
line-height: 1;
pointer-events: none;
}
.awards .container {
position: relative;
z-index: 1;
}
.awards-modern-head {
align-items: center;
margin: 0;
}
.awards-modern {
display: grid;
gap: clamp(1rem, 4vw, 1rem);
}
.awards-modern-head .display {
margin-bottom: 1rem;
}
.awards-modern-head .lede {
max-width: 620px;
margin: 0;
color: var(--ink-soft);
}
.awards-modern-feature {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
align-items: center;
gap: clamp(1rem, 4vw, 3rem);
padding: clamp(1rem, 3vw, 2rem);
border: 1px solid var(--border);
border-radius: 18px;
background: #ffffff;
box-shadow: 0 26px 80px rgba(5, 24, 39, 0.13);
}
.awards-modern-image {
display: flex;
align-items: center;
justify-content: center;
min-height: 360px;
border-radius: 14px;
background:
linear-gradient(180deg, #f2fbff, #fff8e8),
radial-gradient(circle at 50% 0%, rgba(45, 194, 255, 0.16), transparent 38%);
}
.awards-modern-image img {
width: min(86%, 420px);
max-height: 330px;
object-fit: contain;
filter: drop-shadow(0 18px 35px rgba(5, 24, 39, 0.16));
}
.awards-modern-copy {
padding: clamp(0.5rem, 2vw, 1.5rem);
}
.awards-modern-copy .eyebrow {
color: var(--deep-orange);
}
.awards-modern-copy h3 {
max-width: 560px;
margin: 0;
font-size: clamp(2.7rem, 5.5vw, 5rem);
line-height: 0.92;
}
.awards-modern-copy > p:last-of-type {
max-width: 560px;
margin: 1rem 0 0;
color: var(--muted);
line-height: 1.7;
}
.awards-modern-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
margin-top: 1.5rem;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--border);
}
.awards-modern-stats div {
padding: 1rem;
background: #ffffff;
}
.awards-modern-stats strong {
display: block;
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.1rem);
font-weight: 400;
line-height: 0.9;
}
.awards-modern-stats span {
display: block;
margin-top: 0.45rem;
color: var(--muted);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1.35;
text-transform: uppercase;
}
.awards-modern .award-review-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 1.35rem;
color: var(--ink);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.awards-modern .award-review-link:hover {
color: var(--blue);
}
.awards-modern-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.awards-modern-card {
display: grid;
grid-template-columns: 132px minmax(0, 1fr);
gap: 1rem;
align-items: center;
min-height: 160px;
padding: 1rem;
border: 1px solid var(--border);
border-radius: 16px;
background: rgba(255, 255, 255, 0.92);
box-shadow: var(--shadow-soft);
transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.awards-modern-card:hover {
transform: translateY(-3px);
border-color: rgba(45, 194, 255, 0.34);
box-shadow: var(--shadow-elev);
}
.awards-modern-card.is-current {
border-color: rgba(252, 128, 57, 0.42);
background: linear-gradient(180deg, #ffffff, #fffaf1);
}
.awards-modern-card img {
width: 132px;
height: 132px;
border-radius: 12px;
object-fit: contain;
padding: 0.7rem;
background: #f3fbff;
}
.awards-modern-card p {
margin: 0 0 0.45rem;
color: var(--muted);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.awards-modern-card strong {
display: block;
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(2.8rem, 5vw, 4rem);
font-weight: 400;
line-height: 0.85;
}
.awards-modern-card.is-current strong {
color: var(--deep-orange);
}
.awards-modern-card span {
display: block;
margin-top: 0.6rem;
color: var(--muted);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
line-height: 1.35;
text-transform: uppercase;
}
@media (min-width: 900px) {
.awards-modern-head .eyebrow {
grid-column: 1 / -1;
}
}
@media (max-width: 980px) {
.awards-modern-feature {
grid-template-columns: 1fr;
}
.awards-modern-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.awards-modern-feature,
.awards-modern-card {
border-radius: 14px;
}
.awards-modern-image {
min-height: 260px;
}
.awards-modern-image img {
max-height: 230px;
}
.awards-modern-stats {
grid-template-columns: 1fr;
}
.awards-modern-card {
grid-template-columns: 104px minmax(0, 1fr);
min-height: 126px;
}
.awards-modern-card img {
width: 104px;
height: 104px;
}
} .payment {
position: relative;
overflow: hidden;
padding: clamp(4.5rem, 7vw, 6.5rem) 0;
border: 0;
background:
linear-gradient(180deg, #ffffff 0%, #f2fbff 100%),
radial-gradient(circle at 10% 20%, rgba(45, 194, 255, 0.14), transparent 28%),
radial-gradient(circle at 90% 72%, rgba(249, 188, 25, 0.11), transparent 28%);
}
.payment::before {
content: "PAY";
position: absolute;
left: -0.05em;
bottom: -0.36em;
color: rgba(0, 0, 0, 0.03);
font-family: var(--font-display);
font-size: clamp(9rem, 18vw, 22rem);
line-height: 1;
pointer-events: none;
}
.payment .container {
position: relative;
z-index: 1;
}
.payment-modern {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
align-items: stretch;
}
.payment-modern-copy,
.payment-modern-panel {
border: 1px solid var(--border);
border-radius: 18px;
background: rgba(255, 255, 255, 0.92);
box-shadow: var(--shadow-soft);
}
.payment-modern-copy {
padding: clamp(1.5rem, 4vw, 3rem);
}
.payment-modern-copy .display {
max-width: 680px;
margin-bottom: 1rem;
}
.payment-modern-copy .lede {
max-width: 560px;
margin: 0;
color: var(--ink-soft);
}
.payment .payment-methods {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.8rem;
}
.payment .pay-chip {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 0.65rem 0.9rem;
border: 1px solid var(--border);
border-radius: 999px;
background: #ffffff;
color: var(--ink);
box-shadow: var(--shadow-soft);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.payment-modern-panel {
display: grid;
gap: 1px;
overflow: hidden;
background: var(--border);
}
.payment-actions,
.payment-social,
.payment-note {
background: #ffffff;
}
.payment-actions {
display: grid;
gap: 1px;
background: var(--border);
}
.payment-action {
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 0.9rem;
align-items: center;
min-height: 92px;
padding: 1rem;
background: #ffffff;
transition: background 0.24s ease, transform 0.24s ease;
}
.payment-action:hover {
background: #f4fbff;
}
.payment-action > span {
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--ink);
color: #ffffff;
font-weight: 900;
}
.payment-action-primary > span {
background: #25D366;
color: #06111a;
}
.payment-action p,
.payment-action strong {
margin: 0;
}
.payment-action p {
color: var(--muted);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.payment-action strong {
display: block;
margin-top: 0.25rem;
color: var(--ink);
font-size: clamp(0.95rem, 2vw, 1.05rem);
overflow-wrap: anywhere;
}
.payment-social {
padding: 1.1rem;
}
.payment-social .eyebrow {
margin-bottom: 0.8rem;
color: var(--muted);
}
.payment-social-links {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.6rem;
}
.payment-social-links a {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 12px;
background: #f7fbfd;
color: var(--ink);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.12em;
transition: transform 0.24s ease, background 0.24s ease, color 0.24s ease;
}
.payment-social-links a:hover {
transform: translateY(-2px);
background: var(--ink);
color: #ffffff;
}
.payment-note {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.1rem;
}
.payment-note span {
color: var(--deep-orange);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.payment-note strong {
color: var(--ink);
text-align: right;
}
@media (min-width: 900px) {
.payment-modern {
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.48fr);
}
}
@media (max-width: 640px) {
.payment-modern-copy,
.payment-modern-panel {
border-radius: 14px;
}
.payment-social-links {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.payment-note {
align-items: flex-start;
flex-direction: column;
}
.payment-note strong {
text-align: left;
}
} .payment {
padding: clamp(3rem, 7vw, 3rem) 0;
border: 0;
background:
linear-gradient(180deg, #ffffff 0%, #eef9ff 100%),
radial-gradient(circle at 12% 12%, rgba(45, 194, 255, 0.12), transparent 28%);
}
.booking-help {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
overflow: hidden;
border: 1px solid var(--border);
border-radius: 18px;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 54%, rgba(255, 255, 255, 0.76) 100%),
url(//oceanbeat.com/wp-content/themes/oceanbeat/assets/images/hero-boat.jpg) center / cover no-repeat;
box-shadow: 0 26px 80px rgba(5, 24, 39, 0.12);
}
.booking-help::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(45, 194, 255, 0.12)),
radial-gradient(circle at 92% 18%, rgba(249, 188, 25, 0.22), transparent 28%);
pointer-events: none;
}
.booking-help > * {
position: relative;
z-index: 1;
}
.booking-help-main {
padding: clamp(1.5rem, 4vw, 3rem);
}
.booking-help-main .display {
max-width: 720px;
margin-bottom: 1rem;
}
.booking-help-main .lede {
max-width: 560px;
margin: 0;
color: var(--ink-soft);
}
.booking-payments {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1.75rem;
}
.booking-payments span {
min-height: 40px;
display: inline-flex;
align-items: center;
padding: 0.65rem 0.9rem;
border: 1px solid var(--border);
border-radius: 999px;
background: #f7fbfd;
color: var(--ink);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.06em;
}
.booking-help-actions {
display: grid;
gap: 1px;
background: rgba(0, 0, 0, 0.08);
}
.booking-contact {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: 1rem;
align-items: center;
min-height: 96px;
padding: 1rem 1.25rem;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(14px);
transition: background 0.24s ease;
}
.booking-contact:hover {
background: rgba(255, 255, 255, 0.96);
}
.booking-contact > span {
width: 52px;
height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--ink);
color: #ffffff;
font-weight: 900;
}
.booking-contact > span i {
font-size: 1.35rem;
line-height: 1;
}
.booking-contact-whatsapp > span {
background: #25D366;
color: #06111a;
}
.booking-contact p,
.booking-contact strong {
margin: 0;
}
.booking-contact p {
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.booking-contact strong {
display: block;
margin-top: 0.15rem;
color: var(--ink);
font-size: 1.15rem;
}
.booking-help-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
border-top: 1px solid var(--border);
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(14px);
}
.booking-help-bottom p {
margin: 0;
color: var(--muted);
line-height: 1.5;
}
.booking-help-bottom strong {
color: var(--ink);
}
.booking-socials {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.booking-socials a {
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
background: #ffffff;
color: var(--ink);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
transition: transform 0.24s ease, background 0.24s ease, color 0.24s ease;
}
.socials a,
.booking-socials a
a i, button i{
font-weight: normal;
}
.booking-socials a i,
.socials a i {
font-size: 1.15rem;
line-height: 1;
}
.booking-socials a:hover {
transform: translateY(-2px);
background: var(--ink);
color: #ffffff;
}
@media (min-width: 900px) {
.booking-help {
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr);
}
.booking-help-bottom {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.booking-help {
border-radius: 14px;
}
.booking-help-bottom {
align-items: flex-start;
flex-direction: column;
}
} .booking-help {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.booking-help-main {
min-height: 430px;
display: flex;
flex-direction: column;
justify-content: center;
}
.booking-help-side {
display: flex;
flex-direction: column;
justify-content: center;
gap: 1rem;
padding: clamp(1.25rem, 3vw, 2rem);
background: rgba(255, 255, 255, 0.82);
backdrop-filter: blur(18px);
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.booking-help-side .eyebrow {
margin: 0;
color: var(--muted);
}
.booking-help-actions {
display: grid;
gap: 0.75rem;
background: transparent;
}
.booking-contact {
min-height: 76px;
padding: 0.85rem;
border: 1px solid var(--border);
border-radius: 14px;
background: rgba(255, 255, 255, 0.9);
box-shadow: var(--shadow-soft);
}
.booking-contact:hover {
background: #ffffff;
}
.booking-contact > span {
width: 46px;
height: 46px;
}
.booking-contact strong {
font-size: 1rem;
}
.booking-socials {
padding-top: 0.25rem;
}
.booking-help-bottom {
background: rgba(255, 255, 255, 0.9);
}
@media (min-width: 900px) {
.booking-help {
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.34fr);
}
.booking-help-side {
border-top: 0;
border-left: 1px solid rgba(0, 0, 0, 0.08);
}
.booking-help-bottom {
grid-column: 1 / -1;
}
}
@media (max-width: 640px) {
.booking-help-main {
min-height: 360px;
}
} .newsletter-modern {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
align-items: center;
margin-bottom: 4rem;
padding: clamp(1.5rem, 4vw, 3rem);
border: 1px solid rgba(255, 255, 255, 0.24);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(5, 10, 31, 0.94), rgba(10, 31, 48, 0.86)),
radial-gradient(circle at 92% 12%, rgba(45, 194, 255, 0.24), transparent 30%),
radial-gradient(circle at 12% 100%, rgba(249, 188, 25, 0.18), transparent 30%);
box-shadow: 0 26px 80px rgba(0, 0, 0, 0.18);
}
.newsletter-modern::before {
content: "OCEANBEAT";
position: absolute;
right: -0.04em;
bottom: -0.38em;
color: rgba(255, 255, 255, 0.055);
font-family: var(--font-display);
font-size: clamp(5rem, 12vw, 12rem);
line-height: 1;
pointer-events: none;
}
.newsletter-modern > * {
position: relative;
z-index: 1;
}
.newsletter-copy {
max-width: 560px;
}
.newsletter-copy .eyebrow {
color: var(--blue);
}
.newsletter-modern h3 {
max-width: 520px;
color: #ffffff;
font-size: clamp(2.2rem, 4vw, 4rem);
line-height: 0.95;
}
.newsletter-copy p:not(.eyebrow) {
max-width: 500px;
margin: 1rem 0 0;
color: rgba(255, 255, 255, 0.72);
line-height: 1.65;
}
.newsletter-action {
display: grid;
gap: 0.9rem;
}
.newsletter-modern form {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
width: 100%;
min-width: 0;
}
.newsletter-modern .input-wrap {
min-width: 0;
}
.newsletter-modern .input-wrap input {
min-height: 54px;
border-color: rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.12);
}
.newsletter-modern .input-wrap input:focus {
border-color: rgba(45, 194, 255, 0.7);
background: rgba(255, 255, 255, 0.18);
}
.newsletter-modern form button {
min-height: 54px;
padding: 0.9rem 1.35rem;
background: #ffffff;
color: var(--ink);
white-space: nowrap;
}
.newsletter-modern form button:hover {
background: var(--blue);
color: #06111a;
}
.newsletter-perks {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.newsletter-perks span {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0.4rem 0.7rem;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 999px;
color: rgba(255, 255, 255, 0.72);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@media (min-width: 900px) {
.newsletter-modern {
grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.72fr);
}
}
@media (max-width: 640px) {
.newsletter-modern {
border-radius: 14px;
}
.newsletter-modern form {
grid-template-columns: 1fr;
}
.newsletter-modern form button {
width: 100%;
}
} .checkin {
position: relative;
overflow: hidden;
padding: clamp(3rem, 8vw, 3rem) 0;
background:
linear-gradient(180deg, #ffffff 0%, #eef9ff 52%, #ffffff 100%),
radial-gradient(circle at 10% 12%, rgba(45, 194, 255, 0.14), transparent 30%);
}
.checkin::before {
content: "CHECK-IN";
position: absolute;
right: -0.05em;
bottom: -0.32em;
color: rgba(0, 0, 0, 0.03);
font-family: var(--font-display);
font-size: clamp(8rem, 17vw, 20rem);
line-height: 1;
pointer-events: none;
}
.checkin .container {
position: relative;
z-index: 1;
}
.checkin-modern {
display: grid;
grid-template-columns: minmax(0, 1fr);
overflow: hidden;
border: 1px solid var(--border);
border-radius: 18px;
background: #ffffff;
box-shadow: 0 28px 90px rgba(5, 24, 39, 0.14);
}
.checkin-modern-media {
position: relative;
min-height: 360px;
overflow: hidden;
background: #d9eef7;
}
.checkin-modern-media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.42)),
linear-gradient(90deg, rgba(45, 194, 255, 0.18), rgba(255, 255, 255, 0));
pointer-events: none;
}
.checkin-modern-media img {
width: 100%;
height: 100%;
min-height: 360px;
object-fit: cover;
}
.checkin-modern-badge {
position: absolute;
left: 1.25rem;
bottom: 1.25rem;
z-index: 2;
display: flex;
align-items: center;
gap: 0.8rem;
max-width: calc(100% - 2.5rem);
padding: 0.9rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.26);
border-radius: 14px;
background: rgba(7, 12, 20, 0.72);
color: #ffffff;
backdrop-filter: blur(18px);
}
.checkin-modern-badge i {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border-radius: 50%;
background: rgba(45, 194, 255, 0.18);
color: var(--blue);
font-size: 1.3rem;
}
.checkin-modern-badge span {
color: var(--blue);
font-family: var(--font-display);
font-size: 3.8rem;
line-height: 0.8;
}
.checkin-modern-badge p {
margin: 0;
color: rgba(255, 255, 255, 0.78);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.1em;
line-height: 1.35;
text-transform: uppercase;
}
.checkin-modern-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(1.5rem, 4vw, 3rem);
}
.checkin-modern-content .display {
max-width: 620px;
margin-bottom: 1rem;
}
.checkin-modern-content .lede {
max-width: 620px;
margin: 0;
color: var(--ink-soft);
}
.checkin-modern-content .lede strong {
color: var(--ink);
}
.checkin-location {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.75rem;
padding: 1rem;
border: 1px solid var(--border);
border-radius: 14px;
background: #f7fbfd;
}
.checkin-location p,
.checkin-location h3,
.checkin-location span {
margin: 0;
}
.checkin-location p {
color: var(--muted);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.checkin-location h3 {
margin-top: 0.15rem;
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 0.95;
}
.checkin-location span:not(.checkin-pin) {
display: block;
margin-top: 0.2rem;
color: var(--muted);
font-weight: 700;
}
.checkin-pin i {
font-size: 1.35rem;
line-height: 1;
}
.checkin-modern .checkin-action-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
margin-top: 1rem;
}
.checkin-modern .checkin-action-grid a {
min-height: 82px;
display: flex;
align-items: flex-start;
justify-content: center;
flex-direction: column;
gap: 0.35rem;
padding: 1rem;
border: 1px solid var(--border);
border-radius: 14px;
background: #ffffff;
color: var(--ink);
box-shadow: var(--shadow-soft);
}
.checkin-modern .checkin-action-grid a > i {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.2rem;
border-radius: 50%;
background: #eef8fd;
color: var(--ink);
font-size: 1.1rem;
}
.checkin-modern .checkin-action-grid a:nth-child(2) > i {
background: rgba(37, 211, 102, 0.16);
color: #128c45;
}
.checkin-modern .checkin-action-grid a:nth-child(3) > i {
background: #fff6e1;
color: var(--deep-orange);
}
.checkin-modern .checkin-action-grid a:hover {
transform: translateY(-2px);
border-color: rgba(45, 194, 255, 0.38);
background: #f3fbff;
}
.checkin-modern .checkin-action-grid span {
color: var(--muted);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.checkin-modern .checkin-action-grid strong {
color: var(--ink);
font-size: 0.98rem;
overflow-wrap: anywhere;
text-align: left;
}
.checkin-modern .checkin-steps {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
overflow: hidden;
margin: 0;
border: 0;
border-top: 1px solid var(--border);
border-radius: 0;
background: var(--border);
}
.checkin-modern .checkin-steps div {
padding: 1.1rem;
background: #ffffff;
}
.checkin-modern .checkin-steps span {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.55rem;
color: var(--blue);
font-size: 16px;
font-weight: 900;
}
.checkin-modern .checkin-steps span i {
font-size: 24px;
font-weight: normal;
line-height: 1;
}
.checkin-modern .checkin-steps p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.5;
}
@media (min-width: 980px) {
.checkin-modern {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}
}
@media (max-width: 760px) {
.checkin-modern {
border-radius: 14px;
}
.checkin-modern-media,
.checkin-modern-media img {
min-height: 320px;
}
.checkin-modern .checkin-action-grid,
.checkin-modern .checkin-steps {
grid-template-columns: 1fr;
}
} .btn-primary-light i,
.btn-ghost-dark i,
.award-review-link i,
.newsletter-modern button i {
font-size: 1rem;
line-height: 1;
}
.btn-ghost-dark {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.stars-rating,
.reviews .review-slide .star {
display: inline-flex;
align-items: center;
gap: 0.12rem;
}
.stars-rating span {
margin-left: 0.35rem;
}
.review-prev i,
.review-next i {
display: inline-flex;
line-height: 1;
}
.newsletter-modern .input-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.contact-list a i {
margin-right: 0.35rem;
font-size: 0.95em;
vertical-align: -0.1em;
} .page-navbar {
background: transparent;
}
.events-page,
.event-detail-page {
background:
linear-gradient(180deg, #ffffff 0%, #eef9ff 48%, #ffffff 100%),
radial-gradient(circle at 8% 14%, rgba(45, 194, 255, 0.14), transparent 30%);
min-height: 100vh;
}
.event-detail-page {
background: #ffffff;
}
.page-banner {
position: relative;
min-height: 560px;
display: flex;
align-items: flex-end;
overflow: hidden;
padding: 9rem 0 4.5rem;
color: #ffffff;
isolation: isolate;
} .page-banner-slider {
position: absolute;
inset: 0;
z-index: -2;
overflow: hidden;
}
.page-banner-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.06);
transition: opacity 1.2s ease, transform 6s ease;
will-change: opacity, transform;
}
.page-banner-slide.active {
opacity: 1;
transform: scale(1.02);
}
.page-banner-slide.leaving {
opacity: 0;
transform: scale(1.08);
}
.page-banner-shade {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(5, 10, 20, 0.22) 0%, rgba(5, 10, 20, 0.7) 100%),
linear-gradient(90deg, rgba(5, 10, 20, 0.82) 0%, rgba(5, 10, 20, 0.32) 55%, rgba(5, 10, 20, 0.08) 100%);
z-index: -1;
}
.page-banner-content {
position: relative;
z-index: 1;
}
.page-banner .eyebrow {
color: rgba(255, 255, 255, 0.74);
}
.page-banner .display {
max-width: 780px;
color: #ffffff;
}
.page-banner .lede {
max-width: 640px;
color: rgba(255, 255, 255, 0.8);
}
.events-page-hero {
padding: 9rem 0 4.5rem;
}
.events-page-hero .display,
.events-page-hero .lede {
max-width: 760px;
}
.events-page-hero:not(.page-banner) .lede {
color: var(--ink-soft);
}
.events-page-list {
padding: 5rem 0 6rem;
}
.events-page-list .container {
display: grid;
gap: 3rem;
}
.event-list-card {
display: grid;
grid-template-columns: 260px minmax(0, 1fr) auto;
gap: 1.25rem;
align-items: center;
padding: 1rem;
border: 1px solid var(--border);
border-bottom: 3px solid transparent;
border-radius: 16px;
background: rgba(255, 255, 255, 0.92);
box-shadow: var(--shadow-soft);
transition: border-bottom-color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.event-list-card:hover {
border-bottom-color: var(--blue);
box-shadow: 0 8px 32px rgba(45, 194, 255, 0.22), 0 2px 8px rgba(0, 0, 0, 0.08);
transform: translateY(-3px);
}
.event-list-card img {
width: 260px;
aspect-ratio: 4 / 3;
border-radius: 12px;
object-fit: cover;
}
.event-list-content h2 {
margin: 0;
font-size: clamp(2.2rem, 4vw, 3.4rem);
line-height: 0.95;
}
.event-list-content > p:not(.eyebrow) {
max-width: 620px;
margin: 0.65rem 0 0;
color: var(--muted);
line-height: 1.6;
}
.event-list-meta {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 1rem;
}
.event-list-meta span {
display: inline-flex;
align-items: center;
gap: 0.35rem;
min-height: 34px;
padding: 0.45rem 0.7rem;
border-radius: 999px;
background: #f3fbff;
color: var(--ink-soft);
font-size: 12px;
font-weight: 800;
}
.event-list-action {
display: inline-flex;
align-items: center;
gap: 0.45rem;
min-height: 46px;
padding: 0.75rem 1rem;
border-radius: 999px;
background: var(--blue);
color: var(--ink);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: background 0.2s, transform 0.15s;
}
.event-list-action:hover {
background: #1aaee8;
transform: translateY(-1px);
}
.event-detail-hero {
position: relative;
min-height: 720px;
display: flex;
align-items: flex-end;
overflow: hidden;
color: #ffffff;
}
.event-detail-media {
position: absolute;
inset: 0;
}
.event-detail-media video {
width: 100%;
height: 100%;
object-fit: cover;
}
.event-detail-hero::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(5, 10, 20, 0.2), rgba(5, 10, 20, 0.82)),
linear-gradient(90deg, rgba(5, 10, 20, 0.78), rgba(5, 10, 20, 0.18));
}
.event-detail-content {
position: relative;
z-index: 1;
padding-top: 9rem;
padding-bottom: 5rem;
}
.event-detail-content .display {
max-width: 760px;
color: #ffffff;
}
.event-detail-content .lede {
max-width: 560px;
color: rgba(255, 255, 255, 0.78);
}
.event-back {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.82);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.event-detail-facts {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}
.event-detail-facts span {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.65rem 0.85rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(14px);
color: #ffffff;
font-size: 13px;
font-weight: 800;
}
.event-detail-body {
padding: 5rem 0;
}
.event-detail-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1.25rem;
align-items: start;
}
.event-detail-main,
.event-booking-card {
border: 1px solid var(--border);
border-radius: 16px;
background: #ffffff;
box-shadow: var(--shadow-soft);
}
.event-detail-main {
padding: clamp(1.5rem, 4vw, 3rem);
}
.event-detail-main h2 {
margin: 0 0 1rem;
font-size: clamp(2rem, 4vw, 3rem);
}
.event-detail-main p {
color: var(--muted);
line-height: 1.7;
}
.event-time-panel {
display: grid;
gap: 1px;
margin: 2rem 0 3rem;
border-radius: 16px;
}
.event-time-panel div {
padding: 1.15rem;
background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
}
.event-time-panel span {
display: block;
color: var(--blue);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.event-time-panel strong {
display: block;
margin-top: 0.25rem;
color: var(--ink);
font-family: var(--font-display);
font-size: 2.4rem;
font-weight: 400;
line-height: 1;
}
.event-time-panel p {
margin: 0.65rem 0 0;
font-size: 14px;
}
.event-schedule {
position: relative;
display: grid;
gap: 1.15rem;
margin: 1.75rem 0 3.25rem;
padding: 0.25rem 0;
counter-reset: eventStep;
}
.event-schedule::before {
content: "";
position: absolute;
top: 22px;
bottom: 22px;
left: 102px;
width: 3px;
border-radius: 999px;
background: linear-gradient(180deg, var(--blue), var(--deep-orange), var(--vibrant-magenta));
transform-origin: top;
animation: eventTimelineGrow 1.1s ease-out both;
}
.event-schedule::after {
content: "";
position: absolute;
top: 18px;
left: 97px;
width: 13px;
height: 13px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 0 0 6px rgba(45, 194, 255, 0.18), 0 0 28px rgba(45, 194, 255, 0.5);
animation: eventTimelinePulse 1.8s ease-in-out infinite;
}
.event-schedule > div {
position: relative;
display: grid;
grid-template-columns: 92px 22px minmax(0, 1fr);
gap: 0.85rem;
align-items: stretch;
opacity: 0;
transform: translateY(18px);
animation: eventTimelineItem 0.65s ease-out forwards;
counter-increment: eventStep;
}
.event-schedule > div:nth-child(1) {
animation-delay: 0.08s;
}
.event-schedule > div:nth-child(2) {
animation-delay: 0.18s;
}
.event-schedule > div:nth-child(3) {
animation-delay: 0.28s;
}
.event-schedule > div:nth-child(4) {
animation-delay: 0.38s;
}
.event-schedule > div::before {
content: counter(eventStep, decimal-leading-zero);
grid-column: 2;
grid-row: 1;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
width: 22px;
height: 22px;
border: 3px solid #ffffff;
border-radius: 50%;
background: var(--blue);
color: #ffffff;
font-size: 0;
box-shadow: 0 10px 24px rgba(45, 194, 255, 0.3);
transition: transform 0.25s ease, background 0.25s ease;
}
.event-schedule > div > div {
padding: 1rem 1.1rem;
border: 1px solid var(--border);
border-radius: 16px;
background: linear-gradient(180deg, #ffffff 0%, #f7fcff 100%);
box-shadow: var(--shadow-soft);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.event-schedule > div:hover::before {
transform: scale(1.18);
background: var(--deep-orange);
}
.event-schedule > div:hover > div {
transform: translateX(6px);
border-color: rgba(45, 194, 255, 0.35);
box-shadow: 0 18px 40px -26px rgba(0, 0, 0, 0.45);
}
.event-schedule time {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: center;
grid-column: 1;
grid-row: 1;
min-height: 36px;
border-radius: 999px;
background: var(--ink);
color: #ffffff;
font-size: 12px;
font-weight: 900;
box-shadow: 0 12px 24px -18px rgba(0, 0, 0, 0.8);
}
.event-schedule h3,
.event-activity-grid h3,
.event-extra-grid h3 {
margin: 0;
color: var(--ink);
font-size: 1.6rem;
line-height: 1;
}
.event-schedule p {
margin: 0.4rem 0 0;
font-size: 14px;
}
@keyframes eventTimelineGrow {
from {
transform: scaleY(0);
opacity: 0.3;
}
to {
transform: scaleY(1);
opacity: 1;
}
}
@keyframes eventTimelineItem {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes eventTimelinePulse {
0%,
100% {
transform: translateY(0) scale(1);
opacity: 0.8;
}
50% {
transform: translateY(18px) scale(1.15);
opacity: 1;
}
}
.event-included-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
margin: 2rem 0 3rem;
}
.event-included-grid div {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 1rem;
border-radius: 12px;
background: #f3fbff;
font-weight: 800;
}
.event-included-grid i {
color: var(--blue);
font-size: 1.25rem;
}
.event-benefit-list {
display: grid;
gap: 0.75rem;
margin: 1.5rem 0 3rem;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
}
@media (max-width: 640px) {
.event-benefit-list {
grid-template-columns: 1fr;
}
}
.event-benefit-list div {
display: flex;
gap: 0.75rem;
align-items: flex-start;
padding: 1rem;
border: 1px solid var(--border);
border-radius: 14px;
background: #ffffff;
}
.event-benefit-list i {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--blue);
color: #ffffff;
font-size: 1rem;
}
.event-benefit-list i:before{
margin-top: 4px;
}
.event-benefit-list p {
margin: 0;
}
.event-activity-grid,
.event-extra-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin: 1.5rem 0 3rem;
}
.event-activity-grid article,
.event-extra-grid article {
padding: 1.25rem;
border: 1px solid var(--border);
border-radius: 16px;
background: #ffffff;
box-shadow: var(--shadow-soft);
}
.event-activity-grid i,
.event-extra-grid i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: 1rem;
border-radius: 14px;
background: #f3fbff;
color: var(--blue);
font-size: 1.35rem;
}
.event-activity-grid p,
.event-extra-grid p {
margin: 0.65rem 0 0;
color: var(--muted);
font-size: 14px;
line-height: 1.65;
}
.event-good-to-know {
position: relative;
margin-top: clamp(2rem, 4vw, 3rem);
padding: clamp(1rem, 2.2vw, 1.4rem);
border: 1px solid rgba(45, 194, 255, 0.22);
border-radius: 22px;
background:
linear-gradient(135deg, rgba(45, 194, 255, 0.1), rgba(255, 255, 255, 0) 38%),
#ffffff;
box-shadow: 0 18px 42px rgba(8, 35, 74, 0.08);
}
.event-good-to-know-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.event-good-to-know-head .eyebrow {
margin: 0 0 0.35rem;
color: var(--blue);
}
.event-good-to-know-head h2 {
margin: 0;
}
.event-detail-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
counter-reset: goodStep;
}
.event-detail-steps div {
position: relative;
min-height: 152px;
padding: 1rem 1rem 1.1rem;
overflow: hidden;
border: 1px solid rgba(18, 42, 72, 0.08);
border-radius: 16px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 10px 24px rgba(8, 35, 74, 0.06);
}
.event-detail-steps div::after {
content: "";
position: absolute;
left: 1rem;
right: 1rem;
bottom: 0;
height: 3px;
border-radius: 999px 999px 0 0;
background: linear-gradient(90deg, var(--blue), #0f5470);
}
.event-step-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 1rem;
border-radius: 14px;
background: #f3fbff;
color: var(--blue);
font-size: 1.25rem;
}
.event-detail-steps strong {
position: absolute;
top: 0.85rem;
right: 0.95rem;
color: rgba(18, 42, 72, 0.1);
}
.event-booking-card {
position: sticky;
top: 110px;
padding: 1.25rem;
}
.event-booking-card h3 {
margin: 0;
font-size: 2.4rem;
}
.event-booking-price {
margin: 1rem 0;
color: var(--muted);
}
.event-booking-price strong {
color: var(--ink);
font-family: var(--font-display);
font-size: 3rem;
font-weight: 400;
}
.event-booking-button,
.event-booking-link {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 48px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.event-booking-button {
background: #25D366;
color: #06111a;
}
.event-booking-link {
margin-top: 0.65rem;
border: 1px solid var(--border);
color: var(--ink);
}
.event-booking-note {
margin: 1rem 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.55;
}
.event-extra-section {
padding: 0 0 5rem;
}
.event-section-head {
max-width: 760px;
margin-bottom: 2rem;
}
.event-section-head.compact {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1rem;
max-width: none;
}
.event-section-head .display {
color: var(--ink);
}
.event-section-head .lede {
color: var(--muted);
}
.event-extra-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 0;
}
.event-section-head.compact > div {
max-width: 640px;
}
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.9rem 1.3rem;
border: 1px solid var(--ink);
border-radius: 999px;
background: transparent;
color: var(--ink);
font-weight: 700;
text-decoration: none;
transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.btn-outline:hover {
background: var(--ink);
color: #ffffff;
transform: translateY(-1px);
}
.page-footer {
margin-top: 0;
background:
linear-gradient(135deg, #07131b 0%, #0b2633 48%, #2DC2FF 100%);
}
.page-footer::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.14), transparent 28%),
radial-gradient(circle at 85% 12%, rgba(252, 128, 57, 0.18), transparent 32%);
pointer-events: none;
}
.page-footer .container {
position: relative;
z-index: 1;
}
@media (min-width: 960px) {
.event-detail-grid {
grid-template-columns: minmax(0, 1fr) 340px;
}
.event-time-panel {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.event-detail-steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1100px) {
.event-extra-grid,
.upcoming-events-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.event-activity-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.page-banner {
min-height: 500px;
padding: 8rem 0 3.25rem;
}
.page-banner-shade {
background:
linear-gradient(180deg, rgba(5, 10, 20, 0.22) 0%, rgba(5, 10, 20, 0.78) 100%),
linear-gradient(90deg, rgba(5, 10, 20, 0.84), rgba(5, 10, 20, 0.32));
}
.event-list-card {
grid-template-columns: 1fr;
}
.event-list-card img {
width: 100%;
}
.event-list-action {
justify-content: center;
}
.event-detail-hero {
min-height: 640px;
}
.event-included-grid {
grid-template-columns: 1fr;
}
.event-schedule::before {
top: 22px;
bottom: 22px;
left: 10px;
}
.event-schedule::after {
left: 4px;
}
.event-schedule > div {
grid-template-columns: 22px minmax(0, 1fr);
gap: 0.7rem;
}
.event-schedule > div::before {
grid-column: 1;
}
.event-schedule > div > div {
grid-column: 2;
}
.event-schedule time {
grid-column: 2;
grid-row: auto;
justify-content: flex-start;
width: max-content;
padding: 0 0.8rem;
margin-bottom: -0.2rem;
}
.event-extra-grid,
.upcoming-events-grid {
grid-template-columns: 1fr;
}
.event-section-head.compact {
display: block;
}
.event-booking-card {
position: static;
}
} .event-detail-page {
background:
linear-gradient(180deg, #07131b 0%, #effaff 38%, #ffffff 72%),
radial-gradient(circle at 88% 20%, rgba(252, 128, 57, 0.18), transparent 34%);
}
.event-detail-hero {
min-height: 760px;
}
.event-detail-hero::after {
background:
linear-gradient(180deg, rgba(5, 10, 20, 0.1) 0%, rgba(5, 10, 20, 0.82) 100%),
linear-gradient(90deg, rgba(5, 10, 20, 0.88) 0%, rgba(5, 10, 20, 0.42) 48%, rgba(5, 10, 20, 0.12) 100%);
}
.event-detail-content {
width: 100%;
padding-bottom: 6.5rem;
}
.event-hero-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: clamp(2rem, 5vw, 5rem);
align-items: end;
}
.event-hero-copy .display {
max-width: 720px;
font-size: clamp(2.4rem, 5vw, 4.5rem);
line-height: 1.02;
}
.event-hero-copy .lede {
max-width: 560px;
margin-top: 1.1rem;
font-size: 1.05rem;
}
.event-hero-card {
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 22px;
background: rgba(255, 255, 255, 0.12);
box-shadow: 0 28px 70px -36px rgba(0, 0, 0, 0.85);
backdrop-filter: blur(18px);
}
.event-hero-card img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.event-hero-card-body {
padding: 1.1rem;
}
.event-status {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 30px;
padding: 0 0.7rem;
border-radius: 999px;
background: rgba(37, 211, 102, 0.16);
color: #d9ffe7;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.event-hero-card-body > div {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1rem;
margin: 1.2rem 0;
}
.event-hero-card-body p {
margin: 0;
color: rgba(255, 255, 255, 0.68);
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
}
.event-hero-card-body strong {
color: #ffffff;
font-family: var(--font-display);
font-size: 4rem;
font-weight: 400;
line-height: 0.85;
}
.event-hero-card-body a {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 48px;
border-radius: 999px;
background: #ffffff;
color: var(--ink);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.event-detail-body {
position: relative;
z-index: 3;
margin-top: -4rem;
padding: 0 0 5rem;
}
.event-detail-grid {
grid-template-columns: minmax(0, 1fr);
gap: 1.5rem;
}
.event-detail-main {
border-radius: 24px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 253, 255, 0.98) 100%);
box-shadow: 0 28px 90px -54px rgba(4, 19, 28, 0.75);
}
.event-detail-main > h2:not(:first-child) {
margin-top: 3.25rem;
}
.event-detail-main h2 {
position: relative;
padding-left: 0rem;
font-size: clamp(2rem, 4vw, 3rem);
} .event-time-panel div {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(239, 250, 255, 0.98) 100%);
}
.event-included-grid div,
.event-benefit-list div,
.event-activity-grid article,
.event-extra-grid article,
.event-detail-steps div {
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.event-included-grid div:hover,
.event-benefit-list div:hover,
.event-activity-grid article:hover,
.event-extra-grid article:hover {
transform: translateY(-4px);
border-color: rgba(45, 194, 255, 0.35);
box-shadow: 0 20px 50px -36px rgba(0, 0, 0, 0.42);
}
.event-booking-card {
overflow: hidden;
border: 0;
border-radius: 24px;
background: #ffffff;
box-shadow: 0 24px 70px -44px rgba(0, 0, 0, 0.65);
}
.event-booking-media {
position: relative;
margin: -1.25rem -1.25rem 1.25rem;
}
.event-booking-media img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.event-booking-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 42%, rgba(5, 10, 20, 0.72));
}
.event-booking-media span {
position: absolute;
left: 1rem;
bottom: 1rem;
z-index: 1;
padding: 0.45rem 0.7rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.event-booking-rows {
display: grid;
gap: 0.55rem;
margin: 1rem 0 1.15rem;
}
.event-booking-rows div {
display: flex;
align-items: center;
gap: 0.6rem;
min-height: 42px;
padding: 0.65rem 0.75rem;
border-radius: 14px;
background: #f3fbff;
color: var(--ink-soft);
font-size: 13px;
font-weight: 800;
}
.event-booking-rows i {
color: var(--blue);
font-size: 1.05rem;
}
.event-extra-section {
padding-top: 1rem;
}
.event-extra-section .container,
.upcoming-events-section .container {
position: relative;
}
.event-section-head {
margin-bottom: 2.25rem;
}
.event-extra-grid article {
border-radius: 20px;
}
@media (min-width: 960px) {
.event-detail-grid {
grid-template-columns: minmax(0, 1fr) 380px;
}
}
@media (max-width: 960px) {
.event-hero-layout {
grid-template-columns: 1fr;
}
.event-hero-card {
max-width: 420px;
}
.event-detail-body {
margin-top: -2.5rem;
}
}
@media (max-width: 760px) {
.event-detail-hero {
min-height: auto;
}
.event-detail-content {
padding-top: 8rem;
padding-bottom: 4rem;
}
.event-hero-card {
display: none;
}
.event-detail-main {
padding: 1.2rem;
border-radius: 20px;
}
.event-detail-main > h2:not(:first-child) {
margin-top: 2.35rem;
}
} .event-schedule {
position: relative;
display: grid;
gap: 1.25rem;
margin: 1.75rem 0 3rem;
padding: 0.5rem 0;
counter-reset: eventStep;
}
.event-schedule::before {
content: "";
position: absolute;
top: 1rem;
bottom: 1rem;
left: 50%;
width: 2px;
border-radius: 999px;
background: linear-gradient(180deg, var(--blue), var(--deep-orange), var(--vibrant-magenta));
transform: translateX(-50%);
}
.event-schedule::after {
display: none;
}
.event-schedule > article {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 58px minmax(0, 1fr);
gap: 1rem;
align-items: center;
min-height: 180px;
opacity: 0;
transform: translateY(14px);
animation: eventTimelineItem 0.55s ease-out forwards;
counter-increment: eventStep;
}
.event-schedule > article:nth-child(even) .event-schedule-media {
grid-column: 3;
}
.event-schedule > article:nth-child(even) .event-schedule-content {
grid-column: 1;
grid-row: 1;
}
.event-schedule > article:nth-child(1) {
animation-delay: 0.08s;
}
.event-schedule > article:nth-child(2) {
animation-delay: 0.18s;
}
.event-schedule > article:nth-child(3) {
animation-delay: 0.28s;
}
.event-schedule > article:nth-child(4) {
animation-delay: 0.38s;
}
.event-schedule > article::before {
content: counter(eventStep, decimal-leading-zero);
grid-column: 2;
grid-row: 1;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin: 0 auto;
border: 4px solid #ffffff;
border-radius: 50%;
background: var(--blue);
color: #ffffff;
font-size: 11px;
font-weight: 900;
box-shadow: 0 14px 32px -18px rgba(0, 0, 0, 0.65);
}
.event-schedule-media,
.event-schedule-content {
position: relative;
z-index: 1;
}
.event-schedule-media {
overflow: hidden;
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow-soft);
}
.event-schedule-media img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
transition: transform 0.35s ease;
}
.event-schedule-content {
padding: 1.25rem;
border: 1px solid var(--border);
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 252, 255, 0.98));
box-shadow: var(--shadow-soft);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.event-schedule > article:hover .event-schedule-media img {
transform: scale(1.05);
}
.event-schedule > article:hover .event-schedule-content {
transform: translateY(-4px);
border-color: rgba(45, 194, 255, 0.35);
box-shadow: 0 20px 50px -36px rgba(0, 0, 0, 0.42);
}
.event-schedule time {
display: inline-flex;
align-items: center;
justify-content: center;
width: max-content;
min-height: 34px;
padding: 0 0.85rem;
border-radius: 999px;
background: var(--ink);
color: #ffffff;
font-size: 12px;
font-weight: 900;
box-shadow: none;
}
.event-schedule h3 {
max-width: none;
margin-top: 1rem;
}
.event-schedule p {
max-width: none;
margin-top: 0.55rem;
}
@media (max-width: 760px) {
.event-schedule {
gap: 1rem;
padding-left: 1.25rem;
}
.event-schedule::before {
left: 0;
transform: none;
}
.event-schedule > article,
.event-schedule > article:nth-child(even) {
grid-template-columns: 1fr;
gap: 0.75rem;
min-height: auto;
}
.event-schedule > article::before {
position: absolute;
left: -1.85rem;
top: 1rem;
width: 34px;
height: 34px;
border-width: 3px;
font-size: 9px;
}
.event-schedule > article:nth-child(even) .event-schedule-media,
.event-schedule > article:nth-child(even) .event-schedule-content,
.event-schedule-media,
.event-schedule-content {
grid-column: 1;
grid-row: auto;
}
} .event-schedule {
position: relative;
display: grid;
gap: 1rem;
margin: 1.5rem 0 3rem;
padding-left: 72px;
}
.event-schedule::before {
content: "";
position: absolute;
top: 14px;
bottom: 14px;
left: 29px;
width: 2px;
border-radius: 999px;
background: linear-gradient(180deg, var(--blue), var(--deep-orange));
transform: none;
}
.event-schedule > article,
.event-schedule > article:nth-child(even) {
position: relative;
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
gap: 1rem;
align-items: stretch;
min-height: 0;
}
.event-schedule > article::before {
content: counter(eventStep, decimal-leading-zero);
position: absolute;
left: -72px;
top: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin: 0;
border: 6px solid #ffffff;
border-radius: 50%;
background: var(--ink);
color: #ffffff;
font-size: 12px;
font-weight: 900;
transform: translateY(-50%);
box-shadow: 0 18px 36px -24px rgba(0, 0, 0, 0.75);
}
.event-schedule > article:nth-child(even) .event-schedule-media,
.event-schedule > article:nth-child(even) .event-schedule-content,
.event-schedule-media,
.event-schedule-content {
grid-column: auto;
grid-row: auto;
}
.event-schedule-media {
border-radius: 16px 0 0 16px;
box-shadow: none;
}
.event-schedule-media img {
height: 100%;
min-height: 190px;
aspect-ratio: auto;
}
.event-schedule-content {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 190px;
padding: 1.5rem;
border-radius: 0 16px 16px 0;
box-shadow: none;
}
.event-schedule > article {
overflow: hidden;
border: 1px solid var(--border);
border-radius: 16px;
background: #ffffff;
box-shadow: var(--shadow-soft);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.event-schedule > article:hover {
transform: translateX(6px);
border-color: rgba(45, 194, 255, 0.35);
box-shadow: 0 22px 54px -38px rgba(0, 0, 0, 0.48);
}
.event-schedule > article:hover .event-schedule-content {
transform: none;
border-color: transparent;
box-shadow: none;
}
.event-schedule h3 {
margin-top: 0.85rem;
font-size: clamp(1.9rem, 3vw, 2.6rem);
}
.event-schedule p {
max-width: 680px;
}
@media (max-width: 760px) {
.event-schedule {
padding-left: 46px;
}
.event-schedule::before {
left: 17px;
}
.event-schedule > article,
.event-schedule > article:nth-child(even) {
grid-template-columns: 1fr;
}
.event-schedule > article::before {
left: -46px;
top: 2rem;
width: 38px;
height: 38px;
border-width: 4px;
font-size: 10px;
transform: none;
}
.event-schedule-media {
border-radius: 16px 16px 0 0;
}
.event-schedule-media img {
min-height: 180px;
}
.event-schedule-content {
min-height: auto;
padding: 1.15rem;
border-radius: 0 0 16px 16px;
}
.event-schedule > article:hover {
transform: translateY(-4px);
}
} .events-page .reveal:nth-child(2),
.event-detail-page .reveal:nth-child(2) {
transition-delay: 0.08s;
}
.events-page .reveal:nth-child(3),
.event-detail-page .reveal:nth-child(3) {
transition-delay: 0.14s;
}
.events-page .reveal:nth-child(4),
.event-detail-page .reveal:nth-child(4) {
transition-delay: 0.2s;
}
.event-schedule > article {
animation: none;
opacity: 1;
transform: none;
}
.event-schedule > article.reveal {
opacity: 0;
transform: translateY(36px);
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.event-schedule > article.reveal.in {
opacity: 1;
transform: translateY(0);
}
.events-page i,
.event-detail-page i {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.event-back i,
.event-list-action i,
.event-hero-card-body a i,
.event-booking-button i,
.event-booking-link i {
font-size: 1.15rem;
font-weight: normal;
}
.event-detail-facts i,
.event-list-meta i,
.event-booking-rows i {
flex: 0 0 auto;
font-size: 1.2rem;
font-weight: normal;
}
.event-status i {
font-size: 1.1rem;
}
.event-included-grid i {
flex: 0 0 auto;
font-size: 1.45rem;
font-weight: normal;
}
.event-benefit-list i {
font-size: 1.15rem;
font-weight: normal;
}
.event-activity-grid i,
.event-extra-grid i {
font-size: 1.55rem;
font-weight: normal;
}
.footer .socials i {
font-size: 1.15rem;
font-weight: normal;
} .event-timeline {
position: relative;
margin: 1.5rem 0 3rem;
} .event-timeline::before {
content: "";
position: absolute;
top: 26px;
bottom: 26px;
left: 50%;
transform: translateX(-50%);
width: 2px;
border-radius: 999px;
background: linear-gradient(180deg, var(--blue) 0%, var(--ink) 50%, var(--blue) 100%);
} .event-timeline-item {
position: relative;
display: grid;
grid-template-columns: 1fr 52px 1fr;
gap: 0 1.5rem;
align-items: center;
padding-bottom: 1.5rem;
}
.event-timeline-item:last-child {
padding-bottom: 0;
} .event-timeline-node {
grid-column: 2;
grid-row: 1;
justify-self: center;
position: relative;
z-index: 2;
width: 52px;
height: 52px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--ink);
border: 4px solid #ffffff;
box-shadow: 0 6px 22px -8px rgba(0, 0, 0, 0.45);
transition: transform 0.22s ease;
}
.event-timeline-node span {
color: #ffffff;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.04em;
line-height: 1;
} .event-timeline-item:first-child .event-timeline-node { background: var(--blue); } .event-timeline-item:last-child .event-timeline-node { background: var(--blue); }
.event-timeline-item:hover .event-timeline-node { transform: scale(1.12); } .event-timeline-item:nth-child(odd) .event-timeline-card {
grid-column: 1;
grid-row: 1;
} .event-timeline-item:nth-child(even) .event-timeline-card {
grid-column: 3;
grid-row: 1;
} .event-timeline-card {
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
background: #ffffff;
box-shadow: var(--shadow-soft);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.event-timeline-item:hover .event-timeline-card {
border-color: rgba(45, 194, 255, 0.32);
box-shadow: 0 20px 52px -28px rgba(0, 0, 0, 0.28);
} .event-timeline-item:nth-child(odd):hover .event-timeline-card  { transform: translateX(-5px); }
.event-timeline-item:nth-child(even):hover .event-timeline-card { transform: translateX(5px); } .event-timeline-card-inner {
display: flex;
align-items: stretch;
min-height: 160px;
} .event-timeline-item:nth-child(odd) .event-timeline-card-inner {
flex-direction: row-reverse;
} .event-timeline-item:nth-child(even) .event-timeline-card-inner {
flex-direction: row;
} .event-timeline-card-thumb {
flex-shrink: 0;
width: 100%;
max-width: 33.33%;
overflow: hidden;
background: var(--secondary);
}
.event-timeline-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.65s ease;
}
.event-timeline-item:hover .event-timeline-card-thumb img {
transform: scale(1.06);
} .event-timeline-card-text {
flex: 1;
padding: 1.35rem 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 67.66%;
width: 100%;
}
.event-timeline-card-text time {
display: block;
font-family: var(--font-display);
font-size: clamp(2rem, 3.5vw, 3rem);
line-height: 0.9;
color: var(--blue);
margin-bottom: 0.3rem;
}
.event-timeline-card-text h3 {
margin: 0 0 0.45rem;
font-family: var(--font-display);
font-size: clamp(1.5rem, 2vw, 2rem);
font-weight: 400;
line-height: 1.05;
color: var(--ink);
}
.event-timeline-card-text p {
margin: 0;
color: var(--muted);
font-size: 0.875rem;
line-height: 1.65;
}
@media (max-width: 1199px) {
.event-timeline-card-text {
padding: 1rem;
max-width: 60%;
}
.event-timeline-card-thumb{
max-width: 40%;
}
}
@media (max-width: 479px) {
.event-timeline-item:nth-child(odd) .event-timeline-card-inner{
flex-direction: column-reverse;
}
.event-timeline-item:nth-child(even) .event-timeline-card-inner{
flex-direction: column-reverse;
}
.event-timeline-card-text,
.event-timeline-card-thumb{
max-width: 100%;
}
} .event-timeline-item:nth-child(odd).reveal {
opacity: 0;
transform: translateX(-28px);
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.event-timeline-item:nth-child(even).reveal {
opacity: 0;
transform: translateX(28px);
transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.event-timeline-item.reveal.in {
opacity: 1;
transform: translateX(0);
}
.event-timeline-item:nth-child(2).reveal { transition-delay: 0.1s; }
.event-timeline-item:nth-child(3).reveal { transition-delay: 0.18s; }
.event-timeline-item:nth-child(4).reveal { transition-delay: 0.26s; } @media (max-width: 767px) {
.event-timeline {
padding-left: 48px;
}
.event-timeline::before {
left: 16px;
transform: none;
top: 18px;
bottom: 18px;
}
.event-timeline-item,
.event-timeline-item:nth-child(odd),
.event-timeline-item:nth-child(even) {
display: block;
padding-bottom: 1.25rem;
}
.event-timeline-node {
position: absolute;
left: -48px;
top: 0;
width: 36px;
height: 36px;
border-width: 3px;
grid-column: auto;
}
.event-timeline-node span { font-size: 10px; }  .event-timeline-item:nth-child(odd):hover .event-timeline-card,
.event-timeline-item:nth-child(even):hover .event-timeline-card {
transform: none;
}
.event-timeline-item:nth-child(odd).reveal,
.event-timeline-item:nth-child(even).reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
}  .event-detail-body {
padding: clamp(4rem, 7vw, 6rem) 0;
}
.event-extra-section {
padding: clamp(4rem, 7vw, 6rem) 0;
background: #f7f8fa;
} .event-detail-main > h2 {
font-size: clamp(2.8rem, 5vw, 4.5rem);
line-height: 0.9;
color: var(--ink);
letter-spacing: 0.005em;
font-family: var(--font-display);
font-weight: 400;
}
.event-detail-main > h2:not(:first-child) {
margin-top: 3.5rem;
padding-top: 3rem;
border-top: 1px solid var(--border);
} .event-detail-main > p {
color: var(--muted);
font-size: 1.05rem;
line-height: 1.7;
max-width: 720px;
margin-bottom: 0;
} .event-section-head .display {
font-size: clamp(2.8rem, 5.5vw, 4.5rem);
line-height: 0.92;
color: var(--ink);
} .event-section-head .eyebrow,
.event-extra-section .eyebrow,
.upcoming-events-section .eyebrow {
color: var(--blue);
} .event-section-head .lede {
font-size: 1.05rem;
line-height: 1.7;
color: var(--muted);
max-width: 640px;
} .event-detail-body {
position: relative;
z-index: 1;
margin-top: 0;
padding: clamp(4rem, 7vw, 6rem) 0;
background: #ffffff;
}
.event-detail-grid {
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 960px) {
.event-detail-grid {
grid-template-columns: minmax(0, 1fr);
}
}
.event-detail-main {
width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.event-detail-gallery-strip {
margin: 0 0 clamp(2rem, 4vw, 3rem);
} .event-time-panel div {
border-color: var(--border);
}
.event-time-panel span {
color: var(--blue);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.event-time-panel strong {
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 400;
line-height: 1;
}
.event-time-panel p {
color: var(--muted);
font-size: 0.875rem;
line-height: 1.55;
margin: 0;
} .event-timeline-card-text time {
color: var(--blue);
font-size: 1rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.event-timeline-card-text h3 {
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
font-weight: 400;
line-height: 0.95;
color: var(--ink);
margin: 0.4rem 0 0;
}
.event-timeline-card-text p {
color: var(--muted);
font-size: 0.9rem;
line-height: 1.65;
margin: 0.5rem 0 0;
} .event-included-grid div {
font-size: 0.875rem;
font-weight: 700;
color: var(--ink);
}
.event-included-grid i {
color: var(--blue);
} .event-benefit-list p {
font-size: 0.95rem;
line-height: 1.65;
color: var(--ink-soft);
margin: 0;
} .event-activity-grid h3,
.event-extra-grid h3 {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2vw, 1.9rem);
font-weight: 400;
line-height: 1;
color: var(--ink);
margin: 0.75rem 0 0;
letter-spacing: 0.005em;
}
.event-activity-grid p,
.event-extra-grid p {
font-size: 0.925rem;
line-height: 1.65;
color: var(--muted);
margin: 0.6rem 0 0;
} .event-detail-steps strong {
font-family: var(--font-display);
font-size: 2.75rem;
font-weight: 400;
line-height: 1;
}
.event-detail-steps p {
font-size: 0.95rem;
line-height: 1.6;
color: #1e3858;
margin: 0;
font-weight: 750;
}
@media (max-width: 900px) {
.event-good-to-know-head {
display: block;
}
.event-detail-steps {
grid-template-columns: 1fr;
}
.event-detail-steps div {
min-height: 0;
padding-right: 4.5rem;
}
} .btn-outline {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0.85rem 1.5rem;
white-space: nowrap;
} .btn.btn-on-dark {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.55rem 1rem;
border-radius: 999px;
} .upcoming-events-section {
position: relative;
overflow: hidden;
padding: clamp(4rem, 7vw, 6rem) 0;
background:
linear-gradient(180deg, #f5fbff 0%, #ffffff 42%, #f7f8fa 100%);
}
.upcoming-events-section .event-section-head.compact {
align-items: center;
margin-bottom: clamp(1.4rem, 3vw, 2.25rem);
padding-bottom: 1.25rem;
border-bottom: 1px solid rgba(18, 42, 72, 0.1);
}
.upcoming-events-section .event-section-head.compact > div {
max-width: 760px;
}
.upcoming-events-section .event-section-head .lede {
margin-top: 0.6rem;
}
.upcoming-events-section .btn-outline {
border-color: rgba(18, 42, 72, 0.16);
background: #ffffff;
box-shadow: 0 12px 28px rgba(8, 35, 74, 0.08);
}
.upcoming-events-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
counter-reset: relatedEvent;
gap: clamp(1rem, 2vw, 1.35rem);
}
@media (max-width: 1100px) {
.upcoming-events-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.upcoming-events-grid {
grid-template-columns: 1fr;
}
}
.upcoming-event-card {
counter-increment: relatedEvent;
position: relative;
isolation: isolate;
display: grid;
min-height: 0;
border: 1px solid rgba(18, 42, 72, 0.1);
border-radius: 16px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 18px 42px rgba(8, 35, 74, 0.1);
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.upcoming-event-card::before {
content: "0" counter(relatedEvent);
position: absolute;
top: 1rem;
left: 1rem;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, 0.42);
border-radius: 50%;
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
backdrop-filter: blur(14px);
font-size: 0.74rem;
font-weight: 900;
}
.upcoming-event-card:hover {
transform: translateY(-5px);
box-shadow: 0 28px 58px rgba(8, 35, 74, 0.2);
}
.upcoming-event-card-media-link {
position: relative;
z-index: 1;
display: block;
}
.upcoming-event-card-media {
height: auto;
min-height: 0;
aspect-ratio: 1 / 1;
}
.upcoming-event-card-media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.38) 100%);
pointer-events: none;
}
.upcoming-event-card-media img {
width: 100%;
height: 100%;
min-height: 0;
filter: saturate(1.08) contrast(1.04);
}
.upcoming-event-card-media span {
top: 1rem;
right: 1rem;
left: auto;
z-index: 2;
padding: 0.48rem 0.82rem;
border: 1px solid rgba(255, 255, 255, 0.34);
background: rgba(255, 255, 255, 0.16);
backdrop-filter: blur(14px);
font-size: 0.68rem;
font-weight: 900;
display: none;
}
.upcoming-event-card-body {
position: relative;
z-index: 2;
display: grid;
gap: 0.65rem;
min-height: 0;
padding: 1.25rem;
color: var(--ink);
pointer-events: auto;
}
.upcoming-event-card-meta {
color: var(--blue);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 0.1rem;
}
.upcoming-event-card-body h3 {
margin: 0 0 0.5rem;
color: var(--ink);
font-family: var(--font-display);
font-size: clamp(1.6rem, 2.2vw, 2.2rem);
font-weight: 400;
line-height: 0.95;
}
.upcoming-event-card-body > p {
margin: 0 0 1rem;
font-size: 0.9rem;
line-height: 1.6;
color: var(--muted);
}
.upcoming-event-card-footer {
padding-top: 0.85rem;
border-top: 1px solid rgba(18, 42, 72, 0.1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.upcoming-event-card-footer span {
color: #1e3858;
font-size: 0.78rem;
font-weight: 850;
}
.upcoming-event-card-footer .btn {
pointer-events: auto;
}
.btn.btn-on-dark {
background: var(--ink);
color: #ffffff;
}
.upcoming-event-card:hover .btn.btn-on-dark {
background: var(--blue);
color: #ffffff;
} @media (max-width: 760px) {
.event-detail-main > h2 {
font-size: clamp(2.4rem, 14vw, 3.5rem);
}
.event-detail-main > h2:not(:first-child) {
margin-top: 2.5rem;
padding-top: 2rem;
}
.event-section-head .display {
font-size: clamp(2.4rem, 13vw, 3.5rem);
}
.upcoming-events-section .event-section-head.compact {
align-items: flex-start;
}
.upcoming-event-card {
min-height: 0;
}
.upcoming-event-card::before {
top: 0.75rem;
left: 0.75rem;
width: 36px;
height: 36px;
font-size: 0.66rem;
}
.upcoming-event-card-media {
aspect-ratio: 1 / 1;
}
.upcoming-event-card-media img {
min-height: 0;
}
.upcoming-event-card-media span {
top: 0.75rem;
right: 0.75rem;
padding: 0.42rem 0.68rem;
font-size: 0.6rem;
}
.upcoming-event-card-body {
padding: 1rem;
}
.upcoming-event-card-body h3 {
font-size: clamp(1.65rem, 9vw, 2.15rem);
}
.upcoming-event-card-body > p {
font-size: 0.86rem;
line-height: 1.55;
}
.upcoming-event-card-footer {
align-items: center;
flex-direction: row;
gap: 0.65rem;
}
.upcoming-event-card-footer span {
min-width: 0;
}
.upcoming-event-card-footer .btn {
flex: 0 0 auto;
padding: 0.5rem 0.72rem;
}
.event-time-panel {
grid-template-columns: 1fr;
}
.event-activity-grid,
.event-extra-grid {
grid-template-columns: 1fr;
}
} .event-detail-hero.page-banner {
min-height: 560px;
padding: 9rem 0 4.5rem;
align-items: flex-end;
}
.event-detail-hero.page-banner::after {
display: none;
}
.event-detail-hero.page-banner .display {
max-width: 780px;
color: #ffffff;
}
.event-detail-hero.page-banner .lede {
max-width: 640px;
color: rgba(255, 255, 255, 0.8);
}
.event-detail-hero.page-banner .event-detail-facts {
max-width: 860px;
}
@media (max-width: 760px) {
.event-detail-hero.page-banner {
min-height: 500px;
padding: 8rem 0 3.25rem;
}
} .pricing {
position: relative;
overflow: hidden;
background: #ffffff;
padding: 5rem 0 clamp(2rem, 4vw, 3rem);
}
.pricing::before,
.pricing::after {
display: none;
}
.pricing > * {
position: relative;
z-index: 2;
}
.pricing-hero-img-wrap {
display: none;
}
.pricing .pricing-hero {
background: transparent;
padding: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}
.pricing .pricing-hero-inner {
display: block;
min-height: 0;
}
.pricing .pricing-hero-text {
max-width: 760px;
margin: 0;
}
.pricing .event-section-head {
text-align: left;
}
.pricing .event-section-head .eyebrow {
margin-bottom: 0.55rem;
color: var(--blue);
}
.pricing .event-section-head .display {
margin: 0;
color: var(--ink);
}
.split-section-title {
color: var(--ink);
font-family: var(--font-sans);
font-size: clamp(3rem, 7vw, 5.8rem);
font-style: italic;
font-weight: 300;
line-height: 0.95;
letter-spacing: 0;
text-transform: lowercase;
}
.split-section-title span {
display: inline-block;
margin-right: 0.18em;
font-family: var(--font-display);
font-style: normal;
font-weight: 400;
text-transform: uppercase;
}
.pricing .event-section-head .lede {
max-width: 640px;
margin: 0.75rem 0 0;
color: var(--muted);
}
.pricing .pricing-hero {
padding-bottom: clamp(1rem, 2vw, 1.4rem);
}
.pricing-ticket-grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(1rem, 1.8vw, 1.5rem);
max-width: 100%;
margin: 0 auto clamp(2rem, 4vw, 3rem);
}
.pricing-ticket {
--ticket-accent: #0a69dd;
--ticket-accent-dark: #084eaf;
--ticket-soft: #e9f3ff;
--ticket-page-bg: #eef6fc;
--ticket-border: color-mix(in srgb, var(--ticket-accent) 28%, transparent);
--ticket-face-height: 198px;
--ticket-radius: 28px;
--ticket-notch-size: 58px;
--ticket-notch-offset: -30px;
--ticket-perf-cut-size: 30px;
--ticket-perf-cut-offset: -16px;
position: relative;
color: var(--pricing-ink);
}
.pricing-ticket-face {
position: relative;
display: grid;
grid-template-columns: minmax(190px, 240px) minmax(190px, 230px) minmax(360px, 1fr) minmax(190px, 250px);
align-items: stretch;
min-height: 164px;
overflow: visible;
border: 1px solid var(--ticket-border);
border-radius: var(--ticket-radius);
background: #ffffff;
box-shadow: none;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.pricing-ticket:hover .pricing-ticket-face {
transform: translateY(-3px);
box-shadow: 0 24px 52px rgba(8, 35, 74, 0.18);
}
.pricing-ticket--silver {
--ticket-accent: #673ab7;
--ticket-accent-dark: #4b2792;
--ticket-soft: #f0e9ff;
--ticket-border: rgba(103, 58, 183, 0.36);
border-color: var(--ticket-border);
}
.pricing-ticket--gold {
--ticket-accent: #f27a14;
--ticket-accent-dark: #be5708;
--ticket-soft: #fff0d9;
--ticket-border: rgba(242, 122, 20, 0.38);
border-color: var(--ticket-border);
}
.pricing-ticket-face::before,
.pricing-ticket-face::after {
content: "";
position: absolute;
top: calc(var(--ticket-face-height) / 2);
z-index: 4;
width: var(--ticket-notch-size);
height: var(--ticket-notch-size);
border: 2px solid var(--ticket-border);
border-radius: 50%;
background: #ffffff;
transform: translateY(-50%);
margin-right: -1px;
}
.pricing-ticket-face::before {
left: var(--ticket-notch-offset);
clip-path: inset(0 0 0 50%);
}
.pricing-ticket-face::after {
right: var(--ticket-notch-offset);
left: unset;
clip-path: inset(0 50% 0 0);
}
.pricing-ticket-media {
position: relative;
overflow: hidden;
min-height: 164px;
border-radius: calc(var(--ticket-radius) - 1px) 0 0 calc(var(--ticket-radius) - 1px);
background:
linear-gradient(135deg, color-mix(in srgb, var(--ticket-accent) 82%, #ffffff 18%), var(--ticket-accent-dark));
}
.pricing-ticket-media::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.24), transparent 16%),
linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent 48%);
}
.pricing-ticket-art {
position: absolute;
inset: 0;
display: flex;
align-items: end;
justify-content: center;
}
.pricing-ticket-art img {
width: 112%;
height: 100%;
object-fit: cover;
opacity: 0.78;
mix-blend-mode: luminosity;
filter: saturate(1.25) contrast(1.05);
}
.pricing-ticket-main {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: clamp(1.1rem, 2vw, 1.1rem) clamp(1rem, 2vw, 1.2rem);
border-right: 2px dashed rgba(10, 105, 221, 0.35);
}
.pricing-ticket-main p {
margin: 0;
color: var(--ticket-accent-dark);
font-size: clamp(0.82rem, 1vw, 0.95rem);
font-weight: 900;
line-height: 1.1;
text-transform: uppercase;
}
.pricing-ticket-main h3 {
margin: 0;
color: var(--ticket-accent);
font-family: var(--font-display);
font-size: clamp(3rem, 5.5vw, 3.5rem);
font-weight: 400;
line-height: 0.9;
letter-spacing: 0;
text-transform: uppercase;
}
.pricing-ticket-main span {
margin-top: 0.45rem;
color: var(--ticket-accent);
font-size: clamp(0.85rem, 1vw, 1.05rem);
font-weight: 900;
line-height: 1.2;
text-transform: uppercase;
}
.pricing-ticket-list {
position: relative;
display: grid;
grid-template-columns: repeat(6, minmax(78px, 1fr));
align-items: center;
justify-items: center;
gap: 0;
min-width: 0;
padding: 1rem 0.6rem;
margin: 0;
list-style: none;
border-right: 2px dashed rgba(10, 105, 221, 0.35);
}
@media (min-width: 992px) {
.pricing-ticket-main::before,
.pricing-ticket-main::after,
.pricing-ticket-list::before,
.pricing-ticket-list::after {
content: "";
position: absolute;
right: var(--ticket-perf-cut-offset);
z-index: 3;
width: var(--ticket-perf-cut-size);
height: var(--ticket-perf-cut-size);
border: 2px solid var(--ticket-border);
border-radius: 50%;
background: #ffffff;
pointer-events: none;
}
.pricing-ticket-main::before,
.pricing-ticket-list::before {
top: var(--ticket-perf-cut-offset);
clip-path: inset(50% 0 0 0);
}
.pricing-ticket-main::after,
.pricing-ticket-list::after {
bottom: var(--ticket-perf-cut-offset);
clip-path: inset(0 0 50% 0);
}
}
.pricing-ticket--standard .pricing-ticket-main,
.pricing-ticket--standard .pricing-ticket-list {
border-right-color:  rgba(10, 105, 221, 0.35);
} .pricing-ticket--silver .pricing-ticket-main,
.pricing-ticket--silver .pricing-ticket-list {
border-right-color: rgba(103, 58, 183, 0.42);
}
.pricing-ticket--gold .pricing-ticket-main,
.pricing-ticket--gold .pricing-ticket-list {
border-right-color: rgba(242, 122, 20, 0.44);
}
.pricing-ticket--standard .pricing-ticket-list {
grid-template-columns: repeat(4, minmax(86px, 1fr));
}
.pricing-ticket--silver .pricing-ticket-list {
grid-template-columns: repeat(5, minmax(82px, 1fr));
}
.pricing-ticket-list li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.42rem;
width: 100%;
min-height: 86px;
padding: 0.3rem 0.55rem;
border-left: 1px solid rgba(18, 42, 72, 0.08);
color: var(--pricing-ink);
text-align: center;
font-size: clamp(0.58rem, 0.7vw, 0.72rem);
font-weight: 900;
line-height: 1.18;
text-transform: uppercase;
}
.pricing-ticket-list li:first-child {
border-left: 0;
}
.pricing-ticket-list li i {
color: var(--ticket-accent);
font-size: clamp(1.55rem, 2vw, 2.1rem);
line-height: 1;
font-weight: normal;
}
.pricing-ticket-stub {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
grid-template-areas:
"price code"
"per code"
"book code"
"more code";
align-content: center;
align-items: center;
justify-items: center;
gap: 0.25rem 1rem;
min-width: 0;
overflow: hidden;
padding: 1.05rem 1.65rem 1.05rem 1.1rem;
border-radius: 0 calc(var(--ticket-radius) - 1px) calc(var(--ticket-radius) - 1px) 0;
background: #ffffff;
color: var(--ticket-accent);
text-align: center;
}
.pricing-ticket-stub::before,
.pricing-ticket-stub::after {
display: none;
}
.pricing-ticket-price {
grid-area: price;
display: flex;
align-items: flex-start;
justify-content: center;
margin: 0;
color: var(--ticket-accent);
font-size: clamp(3rem, 5vw, 3.5rem);
font-weight: 900;
line-height: 0.88;
}
.pricing-ticket-price span {
margin-top: 0.38rem;
font-size: 0.42em;
}
.pricing-ticket-stub p {
grid-area: per;
margin: 0.1rem 0 0.35rem;
color: var(--ticket-accent);
font-size: clamp(0.68rem, 0.85vw, 0.84rem);
font-weight: 900;
text-transform: uppercase;
}
.pricing-ticket-barcode {
grid-area: code;
width: 28px;
height: 118px;
margin: 0;
padding: 2px 0;
background:
linear-gradient(to bottom,
#111827 0 2px,
transparent 2px 5px,
#111827 5px 6px,
transparent 6px 8px,
#111827 8px 12px,
transparent 12px 14px,
#111827 14px 15px,
transparent 15px 18px,
#111827 18px 21px,
transparent 21px 23px,
#111827 23px 24px,
transparent 24px 27px,
#111827 27px 32px,
transparent 32px 34px,
#111827 34px 36px,
transparent 36px 39px,
#111827 39px 40px,
transparent 40px 43px,
#111827 43px 47px,
transparent 47px 50px,
#111827 50px 51px,
transparent 51px 54px,
#111827 54px 58px,
transparent 58px 60px,
#111827 60px 62px,
transparent 62px 65px,
#111827 65px 66px,
transparent 66px 69px,
#111827 69px 74px,
transparent 74px 76px,
#111827 76px 77px,
transparent 77px 80px,
#111827 80px 84px,
transparent 84px 87px,
#111827 87px 88px,
transparent 88px 91px,
#111827 91px 94px,
transparent 94px 97px,
#111827 97px 99px,
transparent 99px 102px,
#111827 102px 106px,
transparent 106px 109px,
#111827 109px 112px,
transparent 112px 100%);
background-color: #ffffff;
background-repeat: no-repeat;
background-size: 100% 100%;
opacity: 0.92;
}
.pricing-ticket-btn,
.pricing-ticket-more {
display: inline-flex;
grid-area: book;
align-items: center;
justify-content: center;
gap: 0.38rem;
min-width: 132px;
min-height: 34px;
padding: 0.6rem 0.9rem;
border: 0;
border-radius: 999px;
background: var(--ticket-accent);
color: #ffffff;
box-shadow: 0 9px 18px color-mix(in srgb, var(--ticket-accent) 38%, transparent);
font-size: 0.76rem;
font-weight: 900;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.pricing-ticket-more {
grid-area: more;
min-height: 30px;
margin-top: 0.25rem;
background: #ffffff;
color: var(--ticket-accent);
border: 1px solid color-mix(in srgb, var(--ticket-accent) 32%, #ffffff);
box-shadow: none;
}
.pricing-ticket-btn:hover,
.pricing-ticket-more:hover {
color: #ffffff;
background: var(--ticket-accent-dark);
transform: translateY(-1px);
box-shadow: 0 11px 20px color-mix(in srgb, var(--ticket-accent) 34%, transparent);
}
.pricing-ticket-more:hover {
border-color: var(--ticket-accent-dark);
}
.pricing-ticket.is-expanded .pricing-ticket-more {
color: #ffffff;
background: var(--ticket-accent-dark);
}
.pricing-ticket-popular {
position: absolute;
top: -17px;
left: 46px;
z-index: 6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.1rem;
width: 78px;
min-height: 74px;
padding: 0.55rem 0.35rem;
border-radius: 5px 5px 0 0;
background: #ffffff;
color: var(--ticket-accent-dark);
box-shadow: 0 12px 28px rgba(55, 25, 114, 0.22);
font-size: 0.68rem;
font-weight: 900;
line-height: 1.05;
text-align: center;
text-transform: uppercase;
transform: none;
}
.pricing-ticket-popular::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -16px;
border-left: 39px solid transparent;
border-right: 39px solid transparent;
border-top: 16px solid #ffffff;
}
.pricing-ticket-popular i {
font-size: 0.86rem;
}
.pricing-ticket-details {
position: relative;
z-index: 1;
box-sizing: border-box;
width: calc(100% - clamp(1rem, 2vw, 1.5rem));
margin: 0 auto;
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 0 clamp(1rem, 2vw, 1.5rem);
border: 1px solid var(--ticket-border);
border-top: 0;
border-radius: 0 0 16px 16px;
background: #ffffff;
box-shadow: 0 14px 28px rgba(8, 35, 74, 0.08);
transform: translateY(-1px);
transition: max-height 0.28s ease, opacity 0.22s ease, padding 0.28s ease;
}
.pricing-ticket-details p,
.pricing-ticket-details ul {
margin: 0;
}
.pricing-ticket-details p {
color: #1e3858;
font-size: 0.95rem;
font-weight: 700;
line-height: 1.5;
}
.pricing-ticket-details ul {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.55rem;
padding: 0.8rem 0 0;
list-style: none;
}
.pricing-ticket-details li {
display: flex;
align-items: center;
gap: 0.45rem;
min-width: 0;
padding: 0.62rem 0.7rem;
border-radius: 8px;
background: var(--ticket-soft);
color: #16304f;
font-size: 0.78rem;
font-weight: 750;
line-height: 1.25;
}
.pricing-ticket-details li i {
flex: 0 0 auto;
color: var(--ticket-accent);
font-size: 1rem;
line-height: 1;
}
.pricing-ticket-details li span {
min-width: 0;
}
.pricing-ticket-details li.is-disabled {
background: #f1f4f7;
color: #8a96a5;
}
.pricing-ticket-details li.is-disabled i {
color: #a7b0bb;
}
.pricing-ticket.is-expanded .pricing-ticket-details {
max-height: 760px;
opacity: 1;
padding-top: 2rem;
padding-bottom: 1.1rem;
z-index: -1;
margin-top: -12px;
}
@media (max-width: 1199px) {
.pricing-ticket-face {
grid-template-columns: minmax(170px, 210px) minmax(170px, 210px) minmax(280px, 1fr) minmax(175px, 220px);
}
.pricing-ticket-list {
grid-template-columns: repeat(3, minmax(76px, 1fr));
}
.pricing-ticket--standard .pricing-ticket-list,
.pricing-ticket--silver .pricing-ticket-list {
grid-template-columns: repeat(3, minmax(76px, 1fr));
}
}
@media (max-width: 991px) {
.pricing-ticket {
--ticket-face-height: 174px;
--ticket-radius: 14px;
--ticket-notch-size: 40px;
--ticket-notch-offset: -21px;
--ticket-perf-cut-size: 24px;
--ticket-perf-cut-offset: -12px;
}
.pricing-ticket-face {
grid-template-columns: minmax(150px, 34%) minmax(0, 1fr) minmax(130px, 24%);
min-height: 0;
border-radius: var(--ticket-radius);
}
.pricing-ticket-media {
grid-row: 1 / span 2;
border-radius: 14px 0 0 14px;
}
.pricing-ticket-main {
position: absolute;
left: 0;
bottom: 0;
z-index: 3;
width: 34%;
min-height: 0;
padding: 0.75rem 1rem 1rem;
border-right: 0;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.58));
}
.pricing-ticket-main h3,
.pricing-ticket-main p,
.pricing-ticket-main span {
color: #ffffff;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.pricing-ticket-main h3 {
font-size: clamp(2.5rem, 9vw, 3rem);
}
.pricing-ticket-list {
grid-column: 2;
grid-row: 1;
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 1rem 0.5rem;
border-right: 1px dashed rgba(10, 105, 221, 0.25);
}
.pricing-ticket-list::before,
.pricing-ticket-list::after {
content: "";
position: absolute;
right: var(--ticket-perf-cut-offset);
z-index: 3;
width: var(--ticket-perf-cut-size);
height: var(--ticket-perf-cut-size);
border: 2px solid var(--ticket-border);
border-radius: 50%;
background: #ffffff;
pointer-events: none;
}
.pricing-ticket-list::before {
top: var(--ticket-perf-cut-offset);
clip-path: inset(50% 0 0 0);
}
.pricing-ticket-list::after {
bottom: var(--ticket-perf-cut-offset);
clip-path: inset(0 0 50% 0);
}
.pricing-ticket--standard .pricing-ticket-list,
.pricing-ticket--silver .pricing-ticket-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pricing-ticket-list li {
min-height: 74px;
padding: 0.25rem;
border-left: 0;
font-size: 0.58rem;
}
.pricing-ticket-list li i {
font-size: 1.35rem;
}
.pricing-ticket-stub {
grid-column: 3;
grid-row: 1;
grid-template-columns: minmax(0, 1fr) 22px;
min-height: 174px;
padding: 0.8rem 0.72rem;
border-radius: 0 14px 14px 0;
}
.pricing-ticket-price {
font-size: clamp(2.3rem, 8vw, 3.2rem);
}
.pricing-ticket-barcode {
width: 20px;
height: 118px;
}
.pricing-ticket-btn,
.pricing-ticket-more {
min-width: 86px;
min-height: 30px;
padding: 0.48rem 0.55rem;
font-size: 0.58rem;
}
.pricing-ticket-details {
grid-column: 1 / -1;
border-radius: 0 0 14px 14px;
}
.pricing-ticket-details ul {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.pricing {
padding-top: 2.5rem;
background-attachment: scroll;
}
.pricing .event-section-head {
text-align: center;
}
.pricing .event-section-head .display {
font-size: clamp(2.5rem, 13vw, 4rem);
line-height: 0.95;
}
.split-section-title span {
display: block;
margin-right: 0;
}
.pricing .event-section-head .lede {
margin-left: auto;
margin-right: auto;
font-size: 0.88rem;
line-height: 1.55;
}
.pricing .container {
padding-left: 0.9rem;
padding-right: 0.9rem;
}
.pricing-ticket-grid {
gap: 0.78rem;
}
.pricing-ticket {
--ticket-face-height: 144px;
--ticket-radius: 14px;
--ticket-notch-size: 34px;
--ticket-notch-offset: -18px;
--ticket-perf-cut-size: 22px;
--ticket-perf-cut-offset: -11px;
}
.pricing-ticket-face {
grid-template-columns: minmax(0, 1fr) minmax(112px, 40%);
align-items: stretch;
min-height: 144px;
border-radius: var(--ticket-radius);
box-shadow: 0 9px 22px rgba(8, 35, 74, 0.15);
}
.pricing-ticket-media {
grid-column: 1;
grid-row: 1;
min-height: 144px;
border-radius: 14px 0 0 14px;
}
.pricing-ticket-main {
grid-column: 1;
grid-row: 1;
width: auto;
right: 40%;
padding: 1rem 1rem 0.9rem 1.3rem;
border-radius: 0;
border-bottom-left-radius: 14px;
}
.pricing-ticket-main p {
font-size: 0.56rem;
}
.pricing-ticket-main h3 {
font-size: clamp(2.35rem, 7vw, 3rem);
line-height: 0.92;
}
.pricing-ticket-main span {
margin-top: 0.22rem;
font-size: 0.56rem;
}
.pricing-ticket-list {
display: none;
}
.pricing-ticket--standard .pricing-ticket-list,
.pricing-ticket--silver .pricing-ticket-list {
display: none;
}
.pricing-ticket-stub {
grid-column: 2;
grid-row: 1;
grid-template-columns: minmax(0, 1fr) 20px;
gap: 0.12rem 0.42rem;
min-height: 144px;
padding: 0.62rem 1.3rem 0.62rem 1rem;
border-radius: 0 14px 14px 0;
border-left: 1px dashed rgba(10, 105, 221, 0.28);
}
.pricing-ticket-stub::before,
.pricing-ticket-stub::after {
content: "";
display: block;
position: absolute;
left: calc(var(--ticket-perf-cut-offset) - 1px);
z-index: 3;
width: var(--ticket-perf-cut-size);
height: var(--ticket-perf-cut-size);
border: 1px solid var(--ticket-border);
border-radius: 50%;
background: #ffffff;
pointer-events: none;
}
.pricing-ticket-stub::before {
top: calc(var(--ticket-perf-cut-offset) - 1px);
clip-path: inset(50% 0 0 0);
}
.pricing-ticket-stub::after {
bottom: calc(var(--ticket-perf-cut-offset) - 1px);
clip-path: inset(0 0 50% 0);
}
.pricing-ticket-price {
font-size: clamp(1.95rem, 9.5vw, 2.72rem);
}
.pricing-ticket-price span {
margin-top: 0.26rem;
}
.pricing-ticket-stub p {
margin-bottom: 0.18rem;
font-size: 0.46rem;
}
.pricing-ticket-barcode {
width: 20px;
height: 104px;
}
.pricing-ticket-btn,
.pricing-ticket-more {
min-width: 70px;
min-height: 25px;
padding: 0.42rem 0.38rem;
font-size: 0.45rem;
white-space: nowrap;
}
.pricing-ticket-btn i {
display: none;
}
.pricing-ticket-popular {
top: -8px;
left: 13px;
width: 58px;
min-height: 46px;
padding: 0.34rem 0.22rem;
font-size: 0.5rem;
}
.pricing-ticket-popular::after {
bottom: -11px;
border-left-width: 29px;
border-right-width: 29px;
border-top-width: 11px;
}
.pricing-ticket-details {
grid-column: 1 / -1;
padding-left: 0.75rem;
padding-right: 0.75rem;
border-radius: 0 0 12px 12px;
}
.pricing-ticket-details p {
font-size: 0.82rem;
}
.pricing-ticket-details ul {
grid-template-columns: 1fr;
gap: 0.45rem;
padding-top: 0.65rem;
}
.pricing-ticket-details li {
padding: 0.6rem;
font-size: 0.76rem;
}
.pricing-ticket.is-expanded .pricing-ticket-details {
max-height: 1200px;
}
}
@media (max-width: 420px) {
.pricing .container {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.pricing-ticket-face {
grid-template-columns: minmax(0, 1fr) 160px;
}
.pricing-ticket-main {
right: 160px;
}
.pricing-ticket-main h3 {
font-size: clamp(2rem, 10.5vw, 2.75rem);
}
.pricing-ticket-main span,
.pricing-ticket-main p {
font-size: 0.8rem;
font-weight: normal;
}
.pricing-ticket-price {
font-size: clamp(1.8rem, 10vw, 2.45rem);
}
.pricing-ticket-stub {
padding: 0.58rem 0.36rem;
}
.pricing-ticket-btn,
.pricing-ticket-more {
min-width: 64px;
font-size: 0.46rem;
}
}.trp-floating-switcher {
display: flex;
flex-direction: column-reverse;
position: fixed;
z-index: 99999;
overflow: hidden;
padding: var(--switcher-padding, 10px);
border: var(--border, none);
border-radius: var(--border-radius, 8px);
background: var(--bg, #fff);
width: var(--switcher-width, auto);
top: var(--top, unset);
right: var(--right, unset);
bottom: var(--bottom, unset);
left: var(--left, unset);
box-shadow: 0 10px 20px 0 #0000000D;
}
.trp-floating-switcher .trp-switcher-dropdown-list {
flex-direction: column-reverse;
}
.trp-switcher-position-top.trp-floating-switcher {
flex-direction: column;
top: var(--wp-admin--admin-bar--height, 0);
}
.trp-floating-switcher.trp-switcher-position-top:not(.trp-ls-inline) .trp-language-switcher-inner,
.trp-floating-switcher.trp-switcher-position-top .trp-switcher-dropdown-list {
flex-direction: column;
} nav.trp-ls-inline .trp-language-switcher-inner {
flex-direction: row;
}
.trp-ls-inline.trp-opposite-language .trp-language-item {
width: 100%;
} #trp-floater-powered-by {
color: var(--text, #b3b3b3);
font-size: 12px;
text-align: center;
padding: 0 5px;
opacity: 70%;
}
#trp-floater-powered-by a {
color: var(--text, #b3b3b3);
}
.trp-switcher-position-bottom #trp-floater-powered-by {
border-top: 1px solid var(--border-color, #747474);
padding-top: 5px;
margin-top: 5px;
}
.trp-switcher-position-top #trp-floater-powered-by {
border-bottom: 1px solid var(--border-color, #747474);
padding-bottom: 5px;
margin-bottom: 5px;
} .trp-shortcode-switcher__wrapper {
position: relative;
border: none;
}
.trp-shortcode-switcher {
position: static;
display: inline-block;
overflow: hidden;
padding: 10px 0;
border: var(--border, none);
border-radius: var(--border-radius, 5px);
background: var(--bg, #fff);
width: auto;
box-shadow: none;
} .trp-shortcode-anchor:not(.trp-opposite-button) {
visibility: hidden;
}
.trp-shortcode-switcher.trp-open-on-click {
cursor: pointer;
}
.trp-shortcode-overlay {
position: absolute;
left: 0;
top: 0;
z-index: 9999;
} .trp-current-language-item__wrapper:not(.trp-hide-arrow) {
display: flex;
align-items: center;
padding-right: 10px;
justify-content: space-between;
} .trp-language-switcher-inner {
display: flex;
}
.trp-floating-switcher .trp-language-switcher-inner {
flex-direction: column-reverse;
}
.trp-shortcode-switcher .trp-language-switcher-inner {
flex-direction: column;
}
.trp-switcher-dropdown-list {
display: flex;
overflow-y: hidden; transition: max-height 0.2s ease-in-out;
max-height: 0;
transition-duration: var(--transition-duration);
}
.trp-shortcode-switcher .trp-switcher-dropdown-list {
flex-direction: column;
} .trp-ls-dropdown.is-open .trp-switcher-dropdown-list,
.trp-ls-dropdown[aria-expanded="true"] .trp-switcher-dropdown-list,
.trp-shortcode-switcher.trp-open-on-hover.is-open .trp-switcher-dropdown-list,
.trp-shortcode-switcher[aria-expanded="true"] .trp-switcher-dropdown-list {
overflow-y: auto;
max-height: min(350px, 70vh);
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--text) transparent;
}
.trp-ls-dropdown.is-transitioning .trp-switcher-dropdown-list,
.trp-shortcode-switcher.is-transitioning .trp-switcher-dropdown-list {
overflow-y: hidden !important;
}
.trp-shortcode-arrow {
pointer-events: none;
}
.trp-shortcode-switcher.is-open .trp-shortcode-arrow {
transform: rotate(180deg);
} .trp-language-item:focus { outline: none; }
.trp-language-item:focus-visible {
outline: 2px solid var(--text);
outline-offset: -2px;
} .trp-language-item {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 16px;
text-decoration: none;
min-height: 19px;
box-sizing: content-box;
}
.trp-language-item:hover {
background: var(--bg-hover, #f3f3f3);
}
.trp-language-item:hover .trp-language-item-name {
color: var(--text-hover, #000);
}
.trp-language-item__current {
pointer-events: none;
cursor: default;
}
.trp-language-item-name {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: var(--text, #000);
font-size: var(--font-size, 14px);
line-height: 1.2;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
font-weight: 400;
}
.trp-flag-image {
border-radius: var(--flag-radius, 0) !important;
aspect-ratio: var(--aspect-ratio, 4/3) !important;
width: var(--flag-size, 18px) !important;
display: inline-block !important;
height: auto !important;
}
.trp-menu-ls-label .trp-flag-image {
margin: -2px 3px;
}
.trp-custom-flag {
object-fit: cover;
} .trp-switcher-dropdown-list::-webkit-scrollbar { width: 6px; }
.trp-switcher-dropdown-list::-webkit-scrollbar-track { background: transparent; }
.trp-switcher-dropdown-list::-webkit-scrollbar-thumb {
background-color: var(--text);
border-radius: 4px;
}
.trp-switcher-dropdown-list::-webkit-scrollbar-thumb:hover {
background-color: var(--text-hover);
} .trp-flag-rounded {
border-radius: 9999px !important;
aspect-ratio: 1 / 1 !important;
}
.trp-ls-name {
padding-left: 5px;
}
@media (prefers-reduced-motion: reduce) {
.trp-switcher-dropdown-list {
transition: none !important; }
} .trp_ald_ls_container img.trp-flag-image{
padding-top: 0 !important;
}
.trp_ald_ls_container .trp-language-switcher{
position: relative;
display: inline-block;
padding: 0;
border: 0;
box-sizing: border-box;
}
.trp_ald_ls_container .trp-language-switcher > div {
box-sizing: border-box;
padding-right: 20px;
padding-bottom: 3px;
padding-left: 13px;
border: 1px solid #c1c1c1;
border-radius: 3px;
background-color: #fff;
}
.trp_ald_ls_container .trp-language-switcher > div > a {
display: block;
padding: 2px;
border-radius: 3px;
color: rgb(7, 105, 173);
}
.trp_ald_ls_container .trp-language-switcher > div > a:hover {
background: #f1f1f1;
}
.trp_ald_ls_container .trp-language-switcher > div > a.trp-ls-shortcode-disabled-language {
cursor: default;
}
.trp_ald_ls_container .trp-language-switcher > div > a.trp-ls-shortcode-disabled-language:hover {
background: none;
}
.trp_ald_ls_container .trp-language-switcher > div > a > img{
display: inline;
margin: 0 3px;
width: 18px;
height: 12px;
border-radius: 0;
}
.trp_ald_ls_container .trp-language-switcher .trp-ls-shortcode-current-language{
display: inline-block;
}
.trp_ald_ls_container .trp-language-switcher:focus .trp-ls-shortcode-current-language,
.trp_ald_ls_container .trp-language-switcher:hover .trp-ls-shortcode-current-language{
visibility: hidden;
}
.trp_ald_ls_container .trp-language-switcher .trp-ls-shortcode-language{
display: inline-block;
height: 1px;
overflow: hidden;
visibility: hidden;
z-index: 1;
max-height: 250px;
overflow-y: auto;
left: 0;
top: 0;
min-height: auto;
}
.trp_ald_ls_container .trp-language-switcher:focus .trp-ls-shortcode-language,
.trp_ald_ls_container .trp-language-switcher:hover .trp-ls-shortcode-language{
visibility: visible;
max-height: 250px;
height: auto;
overflow-y: auto;
position: absolute;
left: 0;
top: 0;
display: inline-block !important;
min-height: auto;
}
#trp_ald_x_button{
z-index: 0 !important;
}