/* Sabor Flow Da Nang — Tropical Heat design system Ported from Claude Design handoff (Direction B). Google Fonts loaded in each HTML . */ :root { --sf-coral: #F26B6B; --sf-orange: #F2994A; --sf-gold: #F2C94C; --sf-teal: #2E8B95; --sf-teal-deep: #1A5560; --sf-ink: #0E0B0E; --sf-ink-2: #15101A; --sf-paper: #F7EFE3; --sf-max-w: 1280px; --sf-pad: 40px; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: #0B0512; color: var(--sf-paper); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; min-height: 100vh; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* ── Background blobs (fixed, full page) ── */ .sfB-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } @keyframes blob-pulse { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.85; } } /* 5 blobs in non-overlapping screen zones, each pulsing at its own pace */ .sfB-bg > span { position: absolute; border-radius: 50%; filter: blur(80px); animation: blob-pulse ease-in-out infinite; } /* coral — top-right */ .sfB-bg > span:nth-child(1) { width: 44vw; height: 42vh; right: -8%; top: -10%; background: rgba(242, 107, 107, 0.38); animation-duration: 11s; animation-delay: 0s; } /* teal — left, upper-mid */ .sfB-bg > span:nth-child(2) { width: 37vw; height: 48vh; left: -8%; top: 36%; background: rgba(46, 139, 149, 0.32); animation-duration: 14s; animation-delay: -3s; } /* gold — bottom-center-left */ .sfB-bg > span:nth-child(3) { width: 32vw; height: 30vh; left: 16%; bottom: -8%; background: rgba(242, 201, 76, 0.28); animation-duration: 9s; animation-delay: -6s; } /* orange — top-left */ .sfB-bg > span:nth-child(4) { width: 33vw; height: 34vh; left: -5%; top: -8%; background: rgba(232, 87, 42, 0.30); animation-duration: 16s; animation-delay: -1s; } /* pink — bottom-right */ .sfB-bg > span:nth-child(5) { width: 38vw; height: 37vh; right: -5%; bottom: 2%; background: rgba(224, 91, 126, 0.26); animation-duration: 12s; animation-delay: -8s; } .sfB-bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 4px 4px; opacity: 0.7; mix-blend-mode: overlay; } body > *:not(.sfB-bg) { position: relative; z-index: 1; } /* ── Topbar ── */ .sfB-topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px max(var(--sf-pad), calc((100% - var(--sf-max-w)) / 2)); border-bottom: 1px solid rgba(255,246,232,0.06); position: sticky; top: 0; z-index: 100; background: rgba(11,5,18,0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .sfB-topbar .logo { display: flex; align-items: center; gap: 10px; } .sfB-topbar .logo .mark { width: 34px; height: 34px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; } .sfB-topbar .logo .mark img { width: 100%; height: 100%; object-fit: cover; } .sfB-topbar .logo .name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -0.5px; line-height: 1; display: flex; flex-direction: column; gap: 3px; } .sfB-topbar .logo .name .city { font-size: 8px; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; color: var(--sf-coral); } .sfB-nav { display: flex; gap: 4px; background: rgba(255,246,232,0.05); padding: 5px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.06); } .sfB-nav a { padding: 8px 15px; font-size: 12px; font-weight: 600; letter-spacing: 0.2px; border-radius: 999px; color: rgba(255,246,232,0.7); transition: all .18s; white-space: nowrap; } .sfB-nav a.active { background: linear-gradient(135deg, var(--sf-coral), var(--sf-orange)); color: #1a0d0d; box-shadow: 0 4px 12px rgba(242,107,107,0.35); } .sfB-nav a:hover:not(.active) { color: #fff; background: rgba(255,255,255,0.05); } .sfB-topbar .topbar-right { justify-self: end; display: flex; align-items: center; gap: 12px; } .sfB-ig { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: rgba(255,246,232,0.08); font-size: 11px; font-weight: 600; letter-spacing: 0.4px; white-space: nowrap; } .sfB-ig:hover { background: rgba(255,246,232,0.15); } /* hamburger */ .sfB-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,246,232,0.08); padding: 10px; border: 0; cursor: pointer; } .sfB-hamburger span { display: block; width: 100%; height: 2px; background: var(--sf-paper); border-radius: 2px; } /* mobile nav overlay */ .sfB-mobile-nav { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(11,5,18,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 6px; } .sfB-mobile-nav.open { display: flex; } .sfB-mobile-nav a { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -0.5px; padding: 10px 30px; border-radius: 14px; color: rgba(255,246,232,0.85); transition: all .15s; } .sfB-mobile-nav a:hover, .sfB-mobile-nav a.active { color: var(--sf-coral); background: rgba(242,107,107,0.1); } .sfB-mobile-nav .mnav-close { position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,246,232,0.08); display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; color: var(--sf-paper); border: 0; } /* ── Animations ── */ @keyframes sfB-dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.65); } } @keyframes sfB-mq { to { transform: translateX(-25%); } } /* ── Hero ── */ .sfB-hero { padding: 48px var(--sf-pad) 30px; max-width: var(--sf-max-w); margin-inline: auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; } .sfB-hero .left { position: relative; } .sfB-hero .kicker { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(255,246,232,0.06); border: 1px solid rgba(255,246,232,0.1); font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; font-weight: 600; color: rgba(255,246,232,0.85); } .sfB-hero .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sf-gold); box-shadow: 0 0 10px var(--sf-gold); animation: sfB-dot-pulse 1.6s ease-in-out infinite; } .sfB-hero h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 118px; line-height: 0.87; letter-spacing: -4px; margin-top: 18px; padding-right: 6px; color: var(--sf-paper); } .sfB-hero h1 .glow { background: linear-gradient(120deg, var(--sf-coral), var(--sf-gold) 50%, var(--sf-orange)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; font-family: 'Caveat Brush', cursive; letter-spacing: 0; font-weight: 400; display: inline-block; transform: rotate(-3deg) translateY(6px); margin: 0 -4px; padding-right: 6px; } .sfB-hero h1 .vn { display: block; font-size: 19px; font-weight: 700; letter-spacing: 8px; color: var(--sf-teal); margin-top: 18px; text-transform: uppercase; font-family: 'Plus Jakarta Sans', sans-serif; } .sfB-hero h1 .vn span { color: var(--sf-coral); } .sfB-hero .lead { margin-top: 26px; font-size: 15px; line-height: 1.55; color: rgba(255,246,232,0.7); max-width: 460px; } .sfB-hero .ctas { display: flex; gap: 12px; margin-top: 28px; align-items: center; flex-wrap: wrap; } /* buttons */ .sfB-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.3px; transition: transform .2s, box-shadow .2s; white-space: nowrap; } .sfB-btn.primary { background: linear-gradient(135deg, var(--sf-coral), var(--sf-orange)); color: #1a0d0d; box-shadow: 0 10px 28px rgba(242,107,107,0.35); } .sfB-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(242,107,107,0.45); } .sfB-btn.ghost { background: rgba(255,246,232,0.08); color: var(--sf-paper); border: 1px solid rgba(255,246,232,0.12); } .sfB-btn.ghost:hover { background: rgba(255,246,232,0.14); } .sfB-btn.dark { background: #1a0d0d; color: var(--sf-paper); } .sfB-btn.dark:hover { background: #000; } .sfB-hero .meta-row { display: flex; gap: 26px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,246,232,0.08); } .sfB-hero .meta-row .item .v { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 30px; line-height: 1; background: linear-gradient(135deg, var(--sf-coral), var(--sf-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .sfB-hero .meta-row .item .l { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,246,232,0.5); margin-top: 6px; } /* hero right — card stack */ .sfB-hero .hero-right { position: relative; height: 460px; } .sfB-stack-card { position: absolute; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); } .sfB-stack-card.c1 { top: 0; right: 0; width: 230px; height: 300px; background: linear-gradient(160deg, var(--sf-coral), #8B2A2A); z-index: 3; animation: card-sway-1 4.2s ease-in-out infinite alternate; } .sfB-stack-card.c2 { top: 60px; right: 200px; width: 200px; height: 260px; background: linear-gradient(160deg, var(--sf-teal), var(--sf-teal-deep)); z-index: 2; animation: card-sway-2 5.1s ease-in-out infinite alternate; animation-delay: -2.3s; } .sfB-stack-card.c3 { top: 220px; right: 80px; width: 220px; height: 220px; background: linear-gradient(160deg, var(--sf-orange), #B85A1F); z-index: 4; animation: card-sway-3 3.7s ease-in-out infinite alternate; animation-delay: -1.1s; } .sfB-stack-card.c1:hover { animation-duration: 1.6s; } .sfB-stack-card.c2:hover { animation-duration: 1.9s; } .sfB-stack-card.c3:hover { animation-duration: 1.4s; } @keyframes card-sway-1 { from { transform: rotate(4deg) translateY(2px); } to { transform: rotate(8deg) translateY(-10px); } } @keyframes card-sway-2 { from { transform: rotate(-10deg) translateY(-3px); } to { transform: rotate(-6deg) translateY(-13px); } } @keyframes card-sway-3 { from { transform: rotate(1deg) translateY(0px); } to { transform: rotate(5deg) translateY(-9px); } } .sfB-stack-card .ph { position: absolute; inset: 0; background-size: cover; background-position: center; } .sfB-stack-card.c1 .ph { background-image: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.45)), url('../assets/salsa.png'); } .sfB-stack-card.c2 .ph { background-image: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.45)), url('../assets/kizomba.png'); } .sfB-stack-card.c3 .ph { background-image: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.45)), url('../assets/bachata.png'); } .sfB-stack-card .tag { position: absolute; top: 14px; left: 14px; font-family: 'Caveat Brush', cursive; font-size: 28px; color: rgba(255,255,255,0.9); line-height: 1; } .sfB-stack-card .ph-label { position: absolute; bottom: 12px; left: 14px; right: 14px; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(255,255,255,0.80); text-transform: uppercase; } .sfB-hero .hero-right .badge { position: absolute; bottom: 0; left: 0; display: flex; align-items: center; gap: 12px; padding: 13px 17px; background: rgba(11,5,18,0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px; border: 1px solid rgba(255,246,232,0.1); z-index: 5; } .sfB-hero .hero-right .badge .ic { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--sf-gold), var(--sf-orange)); display: flex; align-items: center; justify-content: center; color: #1a0d0d; font-size: 18px; } .sfB-hero .hero-right .badge .t { font-size: 12px; font-weight: 700; } .sfB-hero .hero-right .badge .s { font-size: 10px; color: rgba(255,255,255,0.6); } /* ── Marquee ── */ .sfB-marquee { padding: 18px 0; margin-top: 30px; border-top: 1px solid rgba(255,246,232,0.06); border-bottom: 1px solid rgba(255,246,232,0.06); overflow: hidden; max-width: 1300px; margin-inline: auto; border-radius: 0; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%); } .sfB-marquee .track { display: flex; gap: 50px; animation: sfB-mq 32s linear infinite; white-space: nowrap; width: max-content; } .sfB-marquee .track span { font-family: 'Caveat Brush', cursive; font-size: 28px; color: rgba(255,246,232,0.85); display: inline-flex; align-items: center; gap: 50px; } .sfB-marquee .track span::after { content: '✦'; color: var(--sf-coral); font-size: 20px; } /* ── Pillars trio ── */ .sfB-pillars { padding: 60px var(--sf-pad) 30px; max-width: var(--sf-max-w); margin-inline: auto; } .sfB-pillars .head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 40px; } .sfB-pillars .head h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 52px; line-height: 0.95; letter-spacing: -1.5px; max-width: 540px; } .sfB-pillars .head h2 em { font-family: 'Caveat Brush', cursive; color: var(--sf-coral); font-style: normal; font-weight: 400; letter-spacing: 0; } .sfB-pillars .head .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1.5px; color: rgba(255,246,232,0.6); white-space: nowrap; } .sfB-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .sfB-pcard { position: relative; padding: 20px 20px; border-radius: 22px; overflow: hidden; min-height: auto; display: flex; flex-direction: column; justify-content: space-between; transition: transform .2s; } .sfB-pcard:hover { transform: translateY(-4px); } .sfB-pcard.c1 { background: linear-gradient(165deg, #C84747, #6B1818); color: var(--sf-paper); } .sfB-pcard.c2 { background: linear-gradient(165deg, var(--sf-teal), var(--sf-teal-deep)); color: var(--sf-paper); } .sfB-pcard.c3 { background: linear-gradient(165deg, var(--sf-gold), #B57A12); color: #2a1a04; } .sfB-pcard .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; opacity: 0.65; } .sfB-pcard h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 30px; line-height: 1; margin-top: 28px; letter-spacing: -0.8px; } .sfB-pcard h3 em { font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; } .sfB-pcard p { font-size: 13px; margin-top: 12px; opacity: 0.85; line-height: 1.5; } .sfB-pcard .arr { position: absolute; top: 24px; right: 24px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; font-size: 13px; } /* ── Schedule teaser ── */ .sfB-coming { padding: 30px var(--sf-pad) 60px; max-width: var(--sf-max-w); margin-inline: auto; } .sfB-coming .head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 24px; gap: 20px; } .sfB-coming .head h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 52px; letter-spacing: -1.5px; line-height: 0.95; } .sfB-coming .head h2 em { font-family: 'Caveat Brush', cursive; color: var(--sf-gold); font-style: normal; font-weight: 400; } .sfB-coming .head a { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; display: inline-flex; align-items: center; gap: 6px; color: var(--sf-coral); white-space: nowrap; } .sfB-coming .head a:hover { color: var(--sf-orange); } .sfB-coming-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* teaser card */ .sfB-tcard { padding: 18px 18px 20px; border-radius: 16px; background: rgba(255,246,232,0.04); border: 1px solid rgba(255,246,232,0.08); transition: all .2s; cursor: pointer; overflow: hidden; } .sfB-tcard:hover { background: rgba(255,246,232,0.07); border-color: var(--sf-coral); transform: translateY(-2px); } .sfB-tcard .day { font-family: 'Caveat Brush', cursive; font-size: 26px; line-height: 1; background: linear-gradient(135deg, var(--sf-coral), var(--sf-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .sfB-tcard .day-date { font-family: 'JetBrains Mono', monospace; font-size: 14px; letter-spacing: 0; vertical-align: middle; } .sfB-tcard .when { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 1px; color: rgba(255,255,255,0.5); margin-top: 4px; } .sfB-tcard h4 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 17px; margin-top: 12px; line-height: 1.1; letter-spacing: -0.3px; } .sfB-tcard .organizer { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.5px; color: rgba(255,255,255,0.38); margin-top: 4px; text-transform: uppercase; } .sfB-tcard .at { font-size: 12px; color: rgba(255,255,255,0.6); margin-top: 5px; } .sfB-tcard .chips { display: flex; gap: 5px; margin-top: 12px; flex-wrap: wrap; } /* ── Music chips ── */ .sfB-chip { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 3px 7px; border-radius: 4px; } .sfB-chip.salsa { background: rgba(242,107,107,0.2); color: var(--sf-coral); } .sfB-chip.bachata { background: rgba(242,201,76,0.2); color: var(--sf-gold); } .sfB-chip.kizomba { background: rgba(46,139,149,0.25); color: #7ed4dd; } .sfB-chip.zouk { background: rgba(242,153,74,0.2); color: var(--sf-orange); } /* ── CTA block ── */ .sfB-cta { position: relative; max-width: calc(var(--sf-max-w) - 2 * var(--sf-pad)); margin: 0 auto 50px; padding: 40px; border-radius: 28px; background: linear-gradient(135deg, rgba(242,107,107,0.9), rgba(242,153,74,0.9)), radial-gradient(circle at 80% 30%, rgba(242,201,76,0.5), transparent 50%); color: #1a0d0d; display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: center; overflow: hidden; } .sfB-cta::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; border: 2px dashed rgba(26,13,13,0.2); pointer-events: none; } .sfB-cta .quote { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 34px; line-height: 1.05; letter-spacing: -1px; } .sfB-cta .quote em { font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; } .sfB-cta .who { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 14px; opacity: 0.7; } .sfB-cta .cta-right { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; } .sfB-cta .cta-right a { background: #1a0d0d; color: var(--sf-paper); padding: 15px 22px; border-radius: 14px; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; letter-spacing: 0.3px; } .sfB-cta .cta-right a:hover { background: #000; } .sfB-cta .cta-right a.alt { background: rgba(26,13,13,0.12); color: #1a0d0d; border: 1px solid rgba(26,13,13,0.22); } /* ── Footer ── */ .sfB-foot { padding: 28px max(var(--sf-pad), calc((100% - var(--sf-max-w)) / 2)); display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid rgba(255,246,232,0.06); font-size: 11px; letter-spacing: 0.5px; color: rgba(255,246,232,0.5); flex-wrap: wrap; } .sfB-foot .foot-links { display: flex; gap: 20px; flex-wrap: wrap; } .sfB-foot .foot-links a:hover { color: var(--sf-coral); } .sfB-foot .foot-social { display: flex; gap: 14px; } .sfB-foot .foot-social a:hover { color: var(--sf-coral); } .sfB-foot strong { color: var(--sf-coral); font-weight: 700; } /* ── Page head (inner pages) ── */ .sfB-page { padding: 28px var(--sf-pad) 40px; max-width: var(--sf-max-w); margin-inline: auto; } .sfB-page-head { margin-top: 28px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: end; } .sfB-page-head h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 88px; line-height: 0.9; letter-spacing: -3px; } .sfB-page-head h1 em { font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; background: linear-gradient(120deg, var(--sf-coral), var(--sf-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .sfB-page-head .info { font-size: 13px; color: rgba(255,246,232,0.80); line-height: 1.55; padding: 16px 18px; border-radius: 14px; background: rgba(255,246,232,0.04); border: 1px solid rgba(255,246,232,0.08); } .sfB-page-head .info a { color: var(--sf-teal); } .sfB-page-head .info a:hover { color: var(--sf-coral); } .sfB-page-head .info b { color: var(--sf-gold); } /* filter toolbar */ .sfB-toolbar { display: flex; justify-content: space-between; align-items: center; margin: 28px 0 16px; flex-wrap: wrap; gap: 12px; } .sfB-pills { display: flex; gap: 6px; background: rgba(255,246,232,0.04); padding: 5px; border-radius: 999px; border: 1px solid rgba(255,246,232,0.06); flex-wrap: wrap; } .sfB-pills .filter-pill { padding: 8px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255,246,232,0.80); transition: all .18s; border: 0; cursor: pointer; background: transparent; } .sfB-pills .filter-pill.active { background: linear-gradient(135deg, var(--sf-coral), var(--sf-orange)); color: #1a0d0d; } .sfB-pills .filter-pill:hover:not(.active) { color: #fff; } .filterable-card.hidden { display: none; } /* ── Schedule list ── */ .sfB-list { display: flex; flex-direction: column; gap: 8px; } .sfB-row { display: grid; grid-template-columns: 130px 75px 1fr 1fr 1fr 95px; align-items: center; gap: 14px; padding: 18px 22px; border-radius: 16px; background: rgba(255,246,232,0.03); border: 1px solid rgba(255,246,232,0.06); transition: all .15s; cursor: pointer; } .sfB-row:hover { background: rgba(255,246,232,0.06); border-color: var(--sf-coral); transform: translateX(4px); } .sfB-row.today { background: linear-gradient(90deg, rgba(242,107,107,0.14), rgba(255,246,232,0.03) 60%); border-color: rgba(242,107,107,0.45); } .sfB-row .col-day { display: flex; flex-direction: column; gap: 4px; } .sfB-row .col-day .day-line { display: flex; align-items: baseline; gap: 7px; } .sfB-row .col-day .date-num { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 500; color: var(--sf-gold); opacity: 0.65; letter-spacing: -0.5px; flex-shrink: 0; } .sfB-row .col-day .name { font-family: 'Caveat Brush', cursive; font-size: 24px; line-height: 1; background: linear-gradient(135deg, var(--sf-coral), var(--sf-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .sfB-row .col-day .when { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; color: rgba(255,246,232,0.45); text-transform: uppercase; } .sfB-row .col-when { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.5px; color: rgba(255,246,232,0.5); text-transform: uppercase; } .sfB-row .col-venue { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; } .sfB-row .col-venue a { color: inherit; } .sfB-row .col-venue a:hover { color: var(--sf-coral); } .sfB-row .col-venue .pin { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: rgba(46,139,149,0.25); color: #7ed4dd; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; } .sfB-row .col-social { font-size: 14px; color: rgba(255,246,232,0.85); font-weight: 500; } .sfB-row .col-social .sub { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.5px; color: rgba(255,246,232,0.6); margin-top: 4px; text-transform: uppercase; } .sfB-row .col-music { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .sfB-row .col-city { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 5px 10px; border-radius: 6px; text-align: center; width: fit-content; } .sfB-row .col-city.danang { background: rgba(242,107,107,0.18); color: var(--sf-coral); } .sfB-row .col-city.hoian { background: rgba(46,139,149,0.22); color: #7ed4dd; } .sfB-row .col-org { font-size: 11px; color: rgba(255,246,232,0.5); text-align: right; letter-spacing: 0.3px; line-height: 1.4; } .sfB-row.today .tonight-label { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 1.5px; color: var(--sf-coral); text-transform: uppercase; margin-top: 3px; } .sfB-page .footnote { margin-top: 20px; font-size: 11px; color: rgba(255,246,232,0.6); letter-spacing: 0.5px; } /* ── Cards grid (studios / classes) ── */ .sfB-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 24px; } .sfB-cards.two { grid-template-columns: 1fr 1fr; } .sfB-card-x { position: relative; padding: 22px 22px 24px; border-radius: 18px; background: rgba(255,246,232,0.04); border: 1px solid rgba(255,246,232,0.08); overflow: hidden; transition: all .2s; } .sfB-card-x:hover { background: rgba(255,246,232,0.06); border-color: var(--sf-coral); transform: translateY(-2px); } .sfB-card-x .stripe { position: absolute; top: 0; left: 0; right: 0; height: 4px; } .sfB-card-x .stripe.salsa { background: var(--sf-coral); } .sfB-card-x .stripe.bachata { background: var(--sf-gold); } .sfB-card-x .stripe.kizomba { background: var(--sf-teal); } .sfB-card-x .stripe.zouk { background: var(--sf-orange); } .sfB-card-x .stripe.multi { background: linear-gradient(90deg, var(--sf-coral), var(--sf-gold), var(--sf-teal), var(--sf-orange)); } .sfB-card-x h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 21px; letter-spacing: -0.5px; line-height: 1.1; margin-top: 10px; } .sfB-card-x .ts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; } .sfB-card-x .info { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-size: 12px; color: rgba(255,246,232,0.7); line-height: 1.4; } .sfB-card-x .info .row { display: flex; gap: 8px; align-items: flex-start; } .sfB-card-x .info .ic { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; color: var(--sf-coral); align-items: center; justify-content: center; } .sfB-card-x .info a { color: var(--sf-orange); } .sfB-card-x .links { display: flex; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,246,232,0.08); flex-wrap: wrap; } .sfB-card-x .links a { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; padding: 6px 10px; border-radius: 8px; background: rgba(255,246,232,0.06); display: inline-flex; align-items: center; gap: 5px; } .sfB-card-x .links a:hover { background: rgba(242,107,107,0.18); color: var(--sf-coral); } .sfB-suggest { margin-top: 24px; padding: 24px; border-radius: 18px; background: rgba(255,246,232,0.04); border: 1px solid rgba(255,246,232,0.08); text-align: center; } .sfB-suggest p { color: rgba(255,246,232,0.6); margin-bottom: 16px; font-size: 14px; } /* ── Festival posters ── */ .sfB-fest { position: relative; border-radius: 24px; overflow: hidden; margin-top: 20px; display: grid; grid-template-columns: 1fr 1.4fr; min-height: 320px; border: 1px solid rgba(255,246,232,0.08); } .sfB-fest .poster { position: relative; padding: 32px 30px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .sfB-fest .poster.coral { background: linear-gradient(160deg, var(--sf-coral) 0%, #8B2A2A 70%, #4A0F0F); color: var(--sf-paper); } .sfB-fest .poster.teal { background: linear-gradient(160deg, var(--sf-teal) 0%, var(--sf-teal-deep) 60%, #0A2A30); color: var(--sf-paper); } .sfB-fest .poster::after { content: ''; position: absolute; bottom: -60px; right: -60px; width: 280px; height: 280px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.18); pointer-events: none; } .sfB-fest .poster::before { content: ''; position: absolute; bottom: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; border: 2px dashed rgba(255,255,255,0.12); pointer-events: none; } .sfB-fest .poster .pill { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 6px 12px; background: rgba(0,0,0,0.25); border-radius: 999px; width: fit-content; } .sfB-fest .poster .name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 46px; letter-spacing: -2px; line-height: 0.95; margin-top: 26px; position: relative; z-index: 1; } .sfB-fest .poster .name em { font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; } .sfB-fest .poster .dates { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-top: 14px; opacity: 0.85; position: relative; z-index: 1; } .sfB-fest .poster .big { position: absolute; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 180px; line-height: 0.85; top: 40px; right: 20px; letter-spacing: -10px; opacity: 0.18; z-index: 0; } .sfB-fest .body { padding: 28px; background: rgba(11,5,18,0.7); display: flex; flex-direction: column; gap: 14px; } .sfB-fest .body .meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: rgba(255,246,232,0.75); } .sfB-fest .body .meta .item { display: flex; gap: 6px; align-items: center; } .sfB-fest .body .meta .item b { color: var(--sf-paper); } .sfB-fest .body .styles { display: flex; flex-wrap: wrap; gap: 5px; } .sfB-fest .body p { font-size: 14px; color: rgba(255,246,232,0.8); line-height: 1.55; } .sfB-fest .body .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,246,232,0.08); } .sfB-fest .body .acts a { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; padding: 10px 16px; border-radius: 10px; background: rgba(255,246,232,0.06); display: inline-flex; align-items: center; gap: 6px; } .sfB-fest .body .acts a:hover { background: rgba(255,246,232,0.1); } .sfB-fest .body .acts a.primary { background: linear-gradient(135deg, var(--sf-coral), var(--sf-orange)); color: #1a0d0d; } /* ── Connect page ── */ .sfB-connect-hero { margin-top: 28px; padding: 40px; border-radius: 24px; background: radial-gradient(ellipse at 80% 30%, rgba(242,107,107,0.25), transparent 55%), rgba(255,246,232,0.04); border: 1px solid rgba(255,246,232,0.08); display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .sfB-connect-hero .ch-left { display: flex; align-items: center; gap: 22px; } .sfB-connect-hero .ava { width: 110px; height: 110px; border-radius: 50%; border: 3px solid var(--sf-gold); overflow: hidden; flex-shrink: 0; } .sfB-connect-hero .ava img { width: 100%; height: 100%; object-fit: cover; } .sfB-connect-hero h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -1px; } .sfB-connect-hero .h { font-family: 'Caveat Brush', cursive; font-size: 26px; background: linear-gradient(120deg, var(--sf-coral), var(--sf-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 4px; } .sfB-connect-hero p { font-size: 13px; color: rgba(255,246,232,0.80); margin-top: 8px; line-height: 1.5; } .sfB-connect-hero .ch-right { display: flex; flex-direction: column; gap: 10px; } .sfB-igrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 24px; } .sfB-igrid .ig { aspect-ratio: 1; border-radius: 12px; position: relative; overflow: hidden; border: 1px solid rgba(255,246,232,0.08); background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px); cursor: pointer; transition: transform .2s; display: flex; align-items: center; justify-content: center; } .sfB-igrid .ig:hover { transform: scale(1.02); } .sfB-igrid .ig:nth-child(1) { background-color: rgba(242,107,107,0.2); } .sfB-igrid .ig:nth-child(2) { background-color: rgba(46,139,149,0.2); } .sfB-igrid .ig:nth-child(3) { background-color: rgba(242,201,76,0.18); } .sfB-igrid .ig:nth-child(4) { background-color: rgba(242,153,74,0.2); } .sfB-igrid .ig:nth-child(5) { background-color: rgba(46,139,149,0.2); } .sfB-igrid .ig:nth-child(6) { background-color: rgba(242,107,107,0.2); } .sfB-igrid .ig:nth-child(7) { background-color: rgba(242,153,74,0.2); } .sfB-igrid .ig:nth-child(8) { background-color: rgba(242,201,76,0.18); } .sfB-igrid .ig .lbl { position: absolute; bottom: 8px; left: 10px; font-family: 'JetBrains Mono', monospace; font-size: 9px; color: rgba(255,255,255,0.85); letter-spacing: 0.5px; } .sfB-collab { margin-top: 24px; padding: 36px; border-radius: 24px; background: linear-gradient(135deg, var(--sf-teal), var(--sf-teal-deep)); text-align: center; } .sfB-collab .l { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--sf-gold); } .sfB-collab h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 44px; letter-spacing: -1.5px; margin-top: 10px; line-height: 1; } .sfB-collab h2 em { font-family: 'Caveat Brush', cursive; font-style: normal; font-weight: 400; color: var(--sf-coral); } .sfB-collab p { font-size: 14px; color: rgba(255,246,232,0.85); margin-top: 12px; max-width: 500px; margin-left: auto; margin-right: auto; line-height: 1.5; } .sfB-collab .acts { display: flex; gap: 10px; justify-content: center; margin-top: 22px; flex-wrap: wrap; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .sfB-marquee .track { animation: none; } .sfB-hero .kicker .dot { animation: none; } * { transition-duration: 0.01ms !important; } } /* ── Responsive: tablet ── */ @media (max-width: 960px) { :root { --sf-pad: 20px; } .sfB-topbar { grid-template-columns: 1fr auto; padding: 14px 20px; } .sfB-topbar .sfB-nav { display: none; } .sfB-topbar .topbar-right .sfB-ig { display: none; } .sfB-hamburger { display: flex; } .sfB-hero { grid-template-columns: 1fr; padding: 30px 20px 0; gap: 0; } .sfB-hero .hero-right { display: none; } .sfB-hero h1 { font-size: 72px; letter-spacing: -2.5px; } .sfB-hero h1 .vn { font-size: 14px; margin-top: 14px; } .sfB-marquee .track span { font-size: 22px; } .sfB-pillars { padding: 40px 20px 20px; } .sfB-pillars .head h2 { font-size: 38px; } .sfB-grid3 { grid-template-columns: 1fr; } .sfB-pcard { min-height: auto; } .sfB-pcard h3 { font-size: 26px; margin-top: 24px; } .sfB-coming { padding: 20px 20px 40px; } .sfB-coming .head h2 { font-size: 38px; } .sfB-coming-row { grid-template-columns: 1fr 1fr; } .sfB-cta { max-width: none; margin: 0 20px 36px; padding: 28px; grid-template-columns: 1fr; } .sfB-cta .quote { font-size: 26px; } .sfB-foot { padding: 20px; flex-direction: column; text-align: center; font-size: 10px; } .sfB-foot .foot-links { justify-content: center; } .sfB-foot .foot-social { justify-content: center; } .sfB-page { padding: 20px 20px 30px; } .sfB-page-head { grid-template-columns: 1fr; gap: 16px; } .sfB-page-head h1 { font-size: 56px; letter-spacing: -2px; } .sfB-toolbar { flex-direction: column; align-items: flex-start; } .sfB-pills { flex-wrap: wrap; border-radius: 14px; width: 100%; } .sfB-row { grid-template-columns: 1fr; padding: 14px 16px; gap: 8px; } .sfB-row .col-day { flex-direction: row; align-items: baseline; gap: 8px; } .sfB-row .col-day .name { font-size: 22px; } .sfB-row .col-venue { font-size: 16px; } .sfB-row .col-social { font-size: 13px; } .sfB-row .col-org { text-align: left; } .sfB-row .col-city { width: fit-content; } .sfB-cards { grid-template-columns: 1fr 1fr; } .sfB-cards.two { grid-template-columns: 1fr; } .sfB-fest { grid-template-columns: 1fr; } .sfB-fest .poster .big { font-size: 110px; } .sfB-connect-hero { grid-template-columns: 1fr; gap: 24px; padding: 24px; } .sfB-connect-hero .ch-left { flex-direction: column; text-align: center; align-items: center; } .sfB-igrid { grid-template-columns: repeat(2, 1fr); } .sfB-collab h2 { font-size: 34px; } .sfB-collab { padding: 28px; } } @media (max-width: 600px) { .sfB-hero h1 { font-size: 54px; letter-spacing: -1.5px; } .sfB-coming-row { grid-template-columns: 1fr; } .sfB-cards { grid-template-columns: 1fr; } .sfB-igrid { grid-template-columns: repeat(2, 1fr); } .sfB-page-head h1 { font-size: 44px; letter-spacing: -1.5px; } .sfB-collab h2 { font-size: 28px; } } /* ── Palm-frond background layer ── */ .sfB-palms { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .sfB-palm { position: absolute; /* 40vw total width → 10vw off-screen (matching -10% offset) → 30vw visible per side */ width: clamp(100px, 40vw, 620px); height: clamp(100px, 40vw, 620px); object-fit: contain; opacity: 0.22; filter: saturate(0.75) brightness(0.95) hue-rotate(-6deg); mix-blend-mode: lighten; transform: var(--flip, none); animation-name: sfB-palm-sway; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; will-change: transform; } .sfB-palm.corner-tl { top: -8%; left: -10vw; transform-origin: 0% 0%; } .sfB-palm.corner-tr { top: -8%; right: -10vw; transform-origin: 100% 0%; } .sfB-palm.corner-bl { bottom: -8%; left: -10vw; transform-origin: 0% 100%; } .sfB-palm.corner-br { bottom: -8%; right: -10vw; transform-origin: 100% 100%; } .sfB-palm.corner-ml { top: 32%; left: -10vw; width: clamp(120px, 49vw, 760px); height: clamp(120px, 49vw, 760px); opacity: 0.28; transform-origin: 0% 50%; } .sfB-palm.corner-mr { top: 22%; right: -10vw; width: clamp(110px, 44vw, 680px); height: clamp(110px, 44vw, 680px); opacity: 0.26; transform-origin: 100% 50%; } @keyframes sfB-palm-sway { from { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) * -0.5)); } to { transform: var(--flip, none) rotate(calc(var(--sway, 3deg) * 0.5)); } } @media (prefers-reduced-motion: reduce) { .sfB-palm { animation: none !important; } }