/* ===================================================================
PARABLE CONFERENCE 2026 — Identical Replica
Matching parableconference.com 1:1
=================================================================== */
/* --- Fonts (loaded via in HTML ) --- */
:root {
/* Exact palette from original */
--cream: #FAF9E8;
--gold: #D5B260;
--yellow: #EFCF48;
--green: #2E5012;
--green-bright: #4ED305;
--teal: #1C9EBC;
--orange: #CA5805;
--peach: #FEECCE;
--emerald: #023E25;
--black: #000000;
--white: #FFFFFF;
/* Font - Neue Haas Unica Extra Bold closest web-safe match */
--font: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
}
/* Announcement Strip */
.announce-strip {
display: block;
background: var(--emerald);
color: var(--cream);
text-align: center;
padding: 10px 20px;
font-family: var(--font);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.4;
cursor: pointer;
transition: background 0.3s;
animation: announce-pulse 2.5s ease-in-out 3;
}
.announce-strip:hover {
background: #035530;
}
@keyframes announce-pulse {
0%,
100% {
background: var(--emerald);
}
50% {
background: #066d3a;
box-shadow: 0 2px 20px rgba(6, 109, 58, 0.5);
}
}
.announce-strip.is-hidden {
display: none;
}
.announce-strip p {
margin: 0;
}
#countdownTimer {
font-weight: 900;
color: var(--yellow);
font-variant-numeric: tabular-nums;
}
/* Reset */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font);
background: var(--black);
color: var(--cream);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
/* Universal section layout */
.section {
position: relative;
width: 100%;
}
.section-inner {
max-width: 1200px;
margin: 0 auto;
padding: 80px 40px;
}
/* All headings: Neue Haas Unica Extra Bold = DM Sans 800 uppercase */
h1,
h2,
h3,
h4,
p.heading {
font-family: var(--font);
font-weight: 800;
text-transform: uppercase;
line-height: 1.1;
letter-spacing: -0.01em;
}
/* ===================================================================
HERO
=================================================================== */
.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--black);
overflow: hidden;
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* CRT scanline overlay — subtle, image already has built-in CRT effect */
.hero__bg::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background:
repeating-linear-gradient(0deg,
rgba(0, 0, 0, 0.04) 0px,
transparent 1px,
transparent 3px);
pointer-events: none;
}
/* Subtle vignette — image already has its own vignette */
.hero__bg::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.3) 100%);
pointer-events: none;
}
.hero__content {
position: relative;
z-index: 3;
text-align: center;
}
.hero__logo {
max-width: 900px;
width: 80vw;
margin: 0 auto 60px;
}
.hero__cta .btn {
display: inline-block;
padding: 14px 40px;
background: var(--cream);
color: var(--black);
font-family: var(--font);
font-weight: 800;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.06em;
border: none;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.hero__cta .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
/* ===================================================================
SCROLLING TICKER (YELLOW)
=================================================================== */
.ticker {
overflow: hidden;
white-space: nowrap;
padding: 14px 0;
position: relative;
z-index: 10;
}
.ticker--yellow {
background: var(--yellow);
margin-top: -54px;
}
.ticker--yellow .ticker__item {
text-transform: none;
color: var(--orange);
}
.ticker__icon {
height: 22px;
width: auto;
display: inline-block;
vertical-align: middle;
}
.ticker__item--icon {
padding: 0 0;
}
.ticker--blue {
background: var(--teal);
}
.ticker--orange {
background: var(--orange);
}
.ticker__track {
display: flex;
animation: marquee 20s linear infinite;
will-change: transform;
}
.conf-ticker-set {
display: inline-flex;
flex-shrink: 0;
}
.ticker__track img {
height: 26px;
width: auto;
display: inline-block;
vertical-align: middle;
}
.ticker--blue .ticker__item,
.ticker--orange .ticker__item {
color: var(--green-bright);
}
.ticker--orange .ticker__item {
color: var(--yellow);
}
.ticker__item {
display: inline-flex;
align-items: center;
gap: 20px;
padding: 0 30px;
font-family: var(--font);
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--black);
flex-shrink: 0;
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/* ===================================================================
ABOUT SECTION (gold/tan bg)
=================================================================== */
.about {
background: var(--gold);
padding: 80px 40px;
}
.about__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
align-items: start;
}
.about__label {
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
color: var(--cream);
margin-bottom: 12px;
}
.about__text {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 900;
text-transform: uppercase;
line-height: 1.15;
color: var(--black);
}
.about__sidebar {
display: flex;
flex-direction: column;
gap: 40px;
}
.about__sidebar-value {
font-size: 22px;
font-weight: 800;
text-transform: uppercase;
color: var(--black);
line-height: 1.3;
}
/* ===================================================================
PHOTO CAROUSEL (cream bg, horizontal scrolling images)
=================================================================== */
.carousel {
background: var(--black);
overflow: hidden;
padding: 0;
}
.carousel__track {
display: flex;
animation: marquee 40s linear infinite;
}
.carousel__img {
height: 180px;
width: auto;
flex-shrink: 0;
margin-right: 4px;
object-fit: cover;
filter: saturate(0.7) contrast(1.1);
}
/* CRT grain on carousel */
.carousel::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background:
repeating-linear-gradient(0deg,
rgba(0, 0, 0, 0.08) 0px,
transparent 1px,
transparent 3px);
z-index: 1;
}
/* ===================================================================
SCRIPTURE / QUOTE (forest green bg)
=================================================================== */
.scripture {
background: var(--green);
padding: 80px 40px;
text-align: center;
}
.scripture__text {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 800;
text-transform: uppercase;
line-height: 1.15;
color: var(--green-bright);
max-width: 900px;
margin: 0 auto 24px;
}
.scripture__cite {
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
color: var(--peach);
letter-spacing: 0.06em;
}
/* ===================================================================
HOSTED BY (black bg)
=================================================================== */
.hosted {
background: var(--black);
padding: 80px 40px;
text-align: center;
}
.hosted__title {
font-size: clamp(28px, 3.5vw, 40px);
color: var(--cream);
margin-bottom: 40px;
}
.hosted__portraits {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 40px;
}
.hosted__portrait {
width: 220px;
height: 280px;
object-fit: cover;
filter: grayscale(0.5) contrast(1.1);
}
.hosted__name {
font-size: 22px;
color: var(--cream);
margin-bottom: 8px;
}
.hosted__sub {
font-size: 16px;
text-transform: uppercase;
font-weight: 800;
color: var(--teal);
margin-bottom: 24px;
}
.hosted__bio-btn {
display: inline-block;
padding: 12px 40px;
background: var(--cream);
color: var(--black);
font-family: var(--font);
font-weight: 800;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.06em;
border: none;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.hosted__bio-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}
/* ===================================================================
KIDDOS (forest green bg)
=================================================================== */
.kiddos {
background: var(--green);
padding: 80px 40px;
}
.kiddos__heading {
font-size: 22px;
color: var(--green-bright);
text-align: center;
margin-bottom: 60px;
}
.kiddos__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 60px;
align-items: start;
}
.kiddos__label {
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
color: var(--cream);
margin-bottom: 12px;
}
.kiddos__text {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 900;
text-transform: uppercase;
line-height: 1.15;
color: var(--green-bright);
}
.kiddos__sidebar {
display: flex;
flex-direction: column;
gap: 40px;
}
.kiddos__sidebar-value {
font-size: 22px;
font-weight: 800;
text-transform: uppercase;
color: var(--green-bright);
line-height: 1.3;
}
/* ===================================================================
TICKETS (peach/cream bg)
=================================================================== */
.tickets {
background: var(--peach);
padding: 80px 40px;
text-align: center;
}
.tickets__label {
font-size: 22px;
font-weight: 800;
text-transform: uppercase;
color: var(--emerald);
margin-bottom: 24px;
}
.tickets__card {
max-width: 600px;
margin: 0 auto 40px;
background: var(--gold);
padding: 40px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: start;
text-align: left;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tickets__card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}
.tickets__card-header {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.tickets__card-title {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 800;
text-transform: uppercase;
color: var(--emerald);
line-height: 1.1;
}
.tickets__card-until {
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
color: var(--cream);
text-align: right;
line-height: 1.4;
}
.tickets__price-block {
text-align: left;
}
.tickets__divider {
grid-column: 1 / -1;
height: 1px;
background: rgba(250, 249, 232, 0.15);
margin: 4px 0;
}
.tickets__price {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 800;
color: var(--cream);
line-height: 1;
}
.tickets__price-label {
font-size: 14px;
font-weight: 800;
text-transform: uppercase;
color: var(--orange);
}
.tickets__price-was {
font-size: 0.55em;
font-weight: 400;
color: var(--cream);
opacity: 0.5;
text-decoration: line-through;
margin-left: 6px;
}
.tickets__kiddos-desc {
display: block;
font-size: 12px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--cream);
opacity: 0.65;
line-height: 1.5;
margin-top: 8px;
}
.tickets__capacity {
font-family: var(--font);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cream);
border: 1px solid rgba(250, 249, 232, 0.4);
padding: 4px 12px;
flex-basis: 100%;
text-align: left;
margin-top: 12px;
display: inline-block;
width: fit-content;
}
.tickets__cta .btn {
display: inline-block;
padding: 14px 50px;
background: var(--emerald);
color: var(--cream);
font-family: var(--font);
font-weight: 800;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.06em;
border: none;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.tickets__cta .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
/* ===================================================================
TRAVEL (dark emerald bg) — accordion cards
=================================================================== */
.travel {
background: var(--emerald);
padding: 80px 40px;
}
.travel__title {
font-size: 22px;
color: var(--cream);
text-align: center;
margin-bottom: 60px;
}
.travel__grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.travel__card {
background: rgba(250, 249, 232, 0.06);
text-align: left;
overflow: hidden;
}
.travel__card-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 20px 24px;
font-family: var(--font);
background: none;
border: none;
cursor: pointer;
color: inherit;
}
.travel__card-title {
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
color: var(--yellow);
margin: 0;
}
.travel__chevron {
font-size: 12px;
color: var(--yellow);
transition: transform 0.3s ease;
display: inline-block;
}
.travel__card.is-open .travel__chevron {
transform: rotate(180deg);
}
.travel__card-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.travel__card.is-open .travel__card-body {
max-height: 300px;
}
.travel__card-text {
font-size: 14px;
font-weight: 400;
color: var(--cream);
opacity: 0.7;
line-height: 1.6;
padding: 0 24px 20px;
margin: 0;
}
@media (max-width: 900px) {
.travel__grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 500px) {
.travel__grid {
grid-template-columns: 1fr;
}
}
/* ===================================================================
GROUP EXPERIENCES (teal bg)
=================================================================== */
.groups {
background: var(--teal);
padding: 80px 40px;
text-align: center;
}
.groups__title {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 800;
text-transform: uppercase;
color: var(--peach);
margin-bottom: 60px;
}
.groups__cards {
max-width: 1000px;
margin: 0 auto 40px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.groups__card {
background: rgba(250, 249, 232, 0.08);
padding: 40px 24px;
text-align: center;
border: none;
cursor: pointer;
font-family: var(--font);
transition: background 0.3s, transform 0.2s;
}
.groups__card:hover {
background: rgba(250, 249, 232, 0.14);
transform: translateY(-2px);
}
.groups__card-title {
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
color: var(--cream);
}
.groups__subtitle {
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
color: var(--cream);
opacity: 0.7;
margin-bottom: 40px;
}
.groups__cta .btn {
display: inline-block;
padding: 14px 50px;
background: var(--peach);
color: var(--emerald);
font-family: var(--font);
font-weight: 800;
font-size: 16px;
text-transform: uppercase;
letter-spacing: 0.06em;
border: none;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s;
}
.groups__cta .btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
@media (max-width: 600px) {
.groups__cards {
grid-template-columns: 1fr;
}
}
/* ===================================================================
BIO MODAL (bottom-sheet style)
=================================================================== */
.bio-modal,
.group-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: flex-end;
justify-content: center;
visibility: hidden;
pointer-events: none;
}
.bio-modal.is-open,
.group-modal.is-open {
visibility: visible;
pointer-events: auto;
}
.bio-modal__backdrop,
.group-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: opacity 0.3s ease;
}
.bio-modal.is-open .bio-modal__backdrop,
.group-modal.is-open .group-modal__backdrop {
opacity: 1;
}
.bio-modal__sheet,
.group-modal__sheet {
position: relative;
background: var(--black);
width: 100%;
max-width: 800px;
max-height: 85vh;
overflow-y: auto;
padding: 24px 32px 40px;
transform: translateY(100%);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.bio-modal.is-open .bio-modal__sheet,
.group-modal.is-open .group-modal__sheet {
transform: translateY(0);
}
.bio-modal__handle,
.group-modal__handle {
width: 40px;
height: 4px;
border-radius: 2px;
background: rgba(250, 249, 232, 0.3);
margin: 0 auto 24px;
}
.bio-modal__portraits {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 24px;
}
.bio-modal__portraits img {
width: 120px;
height: 150px;
object-fit: cover;
filter: grayscale(0.5) contrast(1.1);
}
.bio-modal__name,
.group-modal__title {
font-size: 22px;
font-weight: 800;
text-transform: uppercase;
color: var(--cream);
margin-bottom: 20px;
text-align: center;
}
.bio-modal__body p,
.group-modal__text {
font-size: 14px;
font-weight: 400;
color: var(--cream);
opacity: 0.8;
line-height: 1.7;
margin-bottom: 16px;
}
/* ===================================================================
FAQs (yellow bg)
=================================================================== */
.faq {
background: var(--yellow);
padding: 80px 40px;
}
.faq__title {
font-size: 22px;
color: var(--orange);
text-align: center;
margin-bottom: 40px;
}
.faq__list {
max-width: 800px;
margin: 0 auto;
list-style: none;
}
.faq__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
padding: 20px 0;
font-family: var(--font);
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
color: var(--cream);
background: none;
border: none;
cursor: pointer;
text-align: left;
}
.faq__question:hover {
opacity: 0.8;
}
.faq__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
position: relative;
}
.faq__icon::before,
.faq__icon::after {
content: '';
position: absolute;
background: var(--cream);
border-radius: 1px;
}
.faq__icon::before {
width: 100%;
height: 2px;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.faq__icon::after {
width: 2px;
height: 100%;
left: 50%;
top: 0;
transform: translateX(-50%);
transition: opacity 0.3s, transform 0.3s;
}
.faq__item.is-open .faq__icon::after {
opacity: 0;
transform: translateX(-50%) rotate(90deg);
}
.faq__answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
}
.faq__header {
display: flex;
justify-content: center;
align-items: center;
gap: 16px;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.faq__expand-btn {
margin-left: auto;
}
.faq__title {
margin-bottom: 0;
}
.faq__expand-btn {
padding: 6px 16px;
background: none;
border: 1px solid rgba(0, 0, 0, 0.2);
font-family: var(--font);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--black);
cursor: pointer;
transition: border-color 0.3s, background 0.3s;
}
.faq__expand-btn:hover {
border-color: var(--black);
background: rgba(0, 0, 0, 0.05);
}
.faq__answer-inner {
padding-bottom: 20px;
font-size: 14px;
font-weight: 400;
color: var(--black);
line-height: 1.6;
opacity: 0.7;
}
.faq__answer-inner a {
text-decoration: underline;
}
.faq__item.is-open .faq__answer {
max-height: 400px;
}
/* ===================================================================
INSTAGRAM VIDEO SECTION
=================================================================== */
.instagram-section {
background: var(--black);
padding: 60px 20px;
text-align: center;
}
@media (max-width: 768px) {
.instagram-section {
display: none;
}
}
.instagram-section__embed {
display: flex;
justify-content: center;
overflow: hidden;
max-width: 540px;
margin: 0 auto;
border-radius: 8px;
}
.instagram-section__iframe {
width: 540px;
max-width: 100%;
height: 780px;
border: none;
margin-top: -64px;
margin-bottom: -56px;
}
/* ===================================================================
FOOTER (large brand image + logo)
=================================================================== */
.footer {
position: relative;
text-align: center;
overflow: hidden;
}
.footer__parallax {
height: 400px;
background-image: url('../assets/img/footer-bg.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.footer__logo-wrap {
background: var(--black);
padding: 60px 40px 40px;
text-align: center;
}
.footer__logo {
max-width: 280px;
margin: 0 auto 20px;
opacity: 0.8;
}
.footer__copy {
font-size: 12px;
opacity: 0.3;
color: var(--cream);
}
.footer__social {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 20px;
}
.footer__social a,
.footer__share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(250, 249, 232, 0.2);
background: none;
cursor: pointer;
transition: border-color 0.3s;
}
.footer__social a:hover,
.footer__share-btn:hover {
border-color: var(--yellow);
}
.footer__social svg {
width: 16px;
height: 16px;
fill: var(--cream);
}
/* Group modal CTA */
.group-modal__cta {
display: inline-block;
margin-top: 24px;
padding: 12px 40px;
}
/* ===================================================================
RESPONSIVE
=================================================================== */
@media (max-width: 768px) {
.about__inner,
.kiddos__inner {
grid-template-columns: 1fr;
gap: 40px;
}
.hosted__portrait {
width: 160px;
height: 210px;
}
.tickets__card {
grid-template-columns: 1fr;
text-align: center;
}
.tickets__card-header {
flex-direction: column;
align-items: center;
gap: 12px;
}
.tickets__card-until {
text-align: center;
}
.tickets__price-block {
text-align: center;
}
.hero__logo {
max-width: none;
width: 95vw;
}
.ticker__track {
animation-duration: 10s;
}
.hero__bg {
will-change: auto;
transform: none !important;
}
.section-inner {
padding: 60px 24px;
}
.about,
.scripture,
.hosted,
.kiddos,
.tickets,
.travel,
.groups,
.faq {
padding: 60px 24px;
}
}
@media (max-width: 480px) {
.hero__logo {
max-width: none;
width: 95vw;
}
.hosted__portraits {
flex-direction: column;
align-items: center;
}
.hosted__portrait {
width: 200px;
height: 260px;
}
.carousel__img {
height: 140px;
}
}
/* ===================================================================
SECTION REVEAL ANIMATION
=================================================================== */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Accessibility: disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
.ticker__track,
.carousel__track {
animation: none !important;
}
.tickets__card {
transition: none;
}
}
/* Footer element sizing (consolidated) */
.footer picture {
display: block;
width: 100%;
max-height: 300px;
overflow: hidden;
}
.footer picture img {
width: 100%;
max-height: 300px;
object-fit: cover;
display: block;
}
/* Hero element inherits sizing */
.hero__bg picture {
display: block;
width: 100%;
height: 100%;
}
.hero__bg picture img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Global Transitions & Active States */
.btn, .faq__question, .travel__card-header, .groups__card, .faq-email-link, .footer__social a {
transition: all 0.3s ease;
}
.btn:active, .groups__card:active {
transform: scale(0.97);
}
.faq__icon {
transition: transform 0.3s ease;
}
/* SVG Social Icons */
.footer__icon-svg {
width: 24px;
height: 24px;
color: var(--cream);
opacity: 0.8;
}
.footer__social a:hover .footer__icon-svg {
opacity: 1;
color: var(--emerald);
}
/* FAQ Tabs */
.faq__tabs {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
max-width: 800px;
margin: 0 auto 32px;
}
.faq__tab {
padding: 8px 20px;
background: none;
border: 1.5px solid rgba(0, 0, 0, 0.15);
font-family: var(--font);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--orange);
cursor: pointer;
transition: all 0.3s ease;
}
.faq__tab:hover {
border-color: var(--orange);
}
.faq__tab--active {
background: var(--orange);
color: var(--cream);
border-color: var(--orange);
}
.faq__panel {
display: none;
}
.faq__panel--active {
display: block;
}
/* Instagram Play Icon */
.instagram-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 64px;
height: 64px;
color: rgba(255, 255, 255, 0.85);
pointer-events: none;
transition: opacity 0.4s ease;
}
.instagram-play-icon.is-hidden {
opacity: 0;
}
.instagram-section__embed {
position: relative;
}
.instagram-section__embed:hover .instagram-play-icon {
opacity: 0.6;
}