/* ============================================================ SWISS JUNIORS CUP — 2e Edition Teaser Style FUN & LIGHT — joueurs, coachs, familles Inspiration: poster sportif, sticker, carnet d'enfant ============================================================ */ :root { /* SJC official palette */ --t-red: #C0182D; --t-red-dk: #8B0000; --t-red-pale: #FBEAEC; /* Soft warm background tints */ --t-cream: #FFF6F4; --t-cream-2: #FDEEEC; --t-cream-deep: #F5D8D2; /* Accents (gold + ink only, no blue/green) */ --t-gold: #E6B14A; --t-gold-dk: #B8841F; --t-gold-light: #F9E1A0; --t-ink: #1B0B0E; --t-ink-soft: #5C4144; --t-white: #ffffff; --serif: Georgia, 'Times New Roman', serif; } /* Page-scoped (apply on ) */ body.teaser-page-fun { background: radial-gradient(ellipse at 20% 0%, rgba(192,24,45,0.10) 0%, transparent 55%), radial-gradient(ellipse at 80% 35%, rgba(230,177,74,0.10) 0%, transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(192,24,45,0.06) 0%, transparent 60%), linear-gradient(180deg, var(--t-cream) 0%, #FFFBFA 45%, var(--t-cream-2) 100%); color: var(--t-ink); overflow-x: hidden; min-height: 100vh; } /* ============================================================ CONFETTI BG (decorative, light) ============================================================ */ .f-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .f-conf { position: absolute; width: 10px; height: 14px; border-radius: 2px; opacity: 0; animation: confFall linear infinite; top: -20px; } @keyframes confFall { 0% { transform: translateY(-10vh) rotate(0deg); opacity: 0; } 10% { opacity: 0.9; } 90% { opacity: 0.7; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } } /* ============================================================ SECTION & LAYOUT ============================================================ */ .fun-section { position: relative; z-index: 1; padding: 100px 20px 60px; max-width: 100%; } .f-inner { max-width: 1080px; margin: 0 auto; } /* ============================================================ 1. HERO — Logo + Big Number 02 ÉDITION ============================================================ */ .f-hero { text-align: center; margin-bottom: 64px; position: relative; padding: 60px 24px; border-radius: 24px; overflow: hidden; isolation: isolate; } /* Cinematic background image */ .f-hero::before { content: ''; position: absolute; inset: 0; background-image: url('assets/img/newsaison.png'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -2; transform: scale(1.05); transition: transform 0.8s ease; } /* Overlay for text readability */ .f-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,246,244,0.55) 0%, rgba(255,246,244,0.30) 35%, rgba(255,246,244,0.45) 65%, rgba(255,246,244,0.70) 100%), radial-gradient(ellipse at center, transparent 0%, rgba(192,24,45,0.18) 100%); z-index: -1; } .f-hero:hover::before { transform: scale(1.08); } /* Glass / blur effect on text elements for premium feel */ .f-hero .f-hero-eyebrow { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,0.85); } /* Big SJC logo at the top */ .f-hero-logo { display: inline-flex; align-items: center; justify-content: center; width: 140px; height: 140px; margin: 0 auto 24px; position: relative; } .f-hero-logo::before { content: ''; position: absolute; inset: -16px; border-radius: 50%; background: radial-gradient(circle, rgba(192,24,45,0.18) 0%, transparent 65%); filter: blur(6px); z-index: 0; } .f-hero-logo img { position: relative; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: var(--t-white); padding: 8px; box-shadow: 0 8px 24px rgba(192,24,45,0.22), 0 0 0 4px rgba(192,24,45,0.08), 0 0 0 8px rgba(192,24,45,0.04); z-index: 1; animation: fLogoFloat 5s ease-in-out infinite; } @keyframes fLogoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .f-hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: var(--t-white); color: var(--t-red-dk); padding: 8px 20px; border-radius: 50px; font-family: var(--font-heading); font-weight: 800; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; box-shadow: 0 4px 14px rgba(192,24,45,0.12); margin-bottom: 28px; border: 2px solid var(--t-red-pale); } .f-hero-eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--t-red); box-shadow: 0 0 10px var(--t-red); animation: fDot 1.4s ease-in-out infinite; } @keyframes fDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .f-bignum-wrap { display: inline-flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; margin-bottom: 18px; } .f-bignum { font-family: var(--font-heading); font-weight: 900; font-size: clamp(7rem, 22vw, 14rem); line-height: 0.85; letter-spacing: -6px; background: linear-gradient(180deg, var(--t-red) 0%, var(--t-red-dk) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; filter: drop-shadow(0 6px 0 rgba(139,0,0,0.18)); } .f-edition-stack { text-align: left; display: flex; flex-direction: column; gap: 8px; } .f-edition-word { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2rem, 6vw, 3.5rem); text-transform: uppercase; letter-spacing: 4px; color: var(--t-ink); line-height: 1; text-shadow: 0 1px 0 rgba(255,255,255,0.7), 0 0 14px rgba(255,255,255,0.5); } .f-sticker { display: inline-block; background: var(--t-red); color: var(--t-white); font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 2px; padding: 7px 18px; border-radius: 6px; transform: rotate(-4deg); box-shadow: 0 4px 0 var(--t-red-dk), 0 10px 24px rgba(192,24,45,0.3); align-self: flex-start; position: relative; border: 2px solid var(--t-red-dk); } .f-sticker::before, .f-sticker::after { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--t-white); border: 1.5px solid var(--t-red-dk); top: 50%; transform: translateY(-50%); } .f-sticker::before { left: -5px; } .f-sticker::after { right: -5px; } .f-hero-sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 3vw, 1.6rem); color: var(--t-red-dk); margin: 20px 0 0; font-weight: 500; text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 0 12px rgba(255,255,255,0.6); } /* ============================================================ 2. WELCOME BADGES — Joueurs / Coachs / Familles ============================================================ */ .f-welcome { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 0 auto 64px; max-width: 900px; } .f-wb { background: var(--t-white); border-radius: 20px; padding: 24px 22px; display: flex; align-items: center; gap: 16px; box-shadow: 0 6px 24px rgba(192,24,45,0.08), 0 1px 0 rgba(192,24,45,0.04); border: 2px solid transparent; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; position: relative; overflow: hidden; } .f-wb:hover { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 14px 36px rgba(192,24,45,0.18); } /* All cards share SJC red identity, with subtle tonal variation */ .f-wb-1 { border-color: var(--t-red); } .f-wb-1:hover { border-color: var(--t-red-dk); } .f-wb-1 .f-wb-icon { background: linear-gradient(135deg, var(--t-red), var(--t-red-dk)); color: var(--t-white); } .f-wb-2 { border-color: var(--t-gold); } .f-wb-2:hover { border-color: var(--t-gold-dk); } .f-wb-2 .f-wb-icon { background: linear-gradient(135deg, var(--t-gold-light), var(--t-gold)); color: var(--t-red-dk); } .f-wb-3 { border-color: var(--t-red-dk); } .f-wb-3:hover { border-color: var(--t-red); } .f-wb-3 .f-wb-icon { background: linear-gradient(135deg, var(--t-cream), var(--t-cream-deep)); color: var(--t-red-dk); } .f-wb-icon { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 28px; } .f-wb-icon svg { width: 32px; height: 32px; display: block; } .f-wb-title { font-family: var(--font-heading); font-weight: 800; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-ink); margin: 0 0 4px; } .f-wb-text { font-size: 14px; color: var(--t-ink-soft); margin: 0; line-height: 1.4; } /* ============================================================ 3. RIBBON — full-bleed match-ticket style with dotted edges ============================================================ */ .f-ticker-fullbleed { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 64px; z-index: 2; padding: 24px 0; } .f-ticker-wrap { position: relative; background: linear-gradient(180deg, var(--t-red) 0%, var(--t-red-dk) 100%); padding: 24px 0 26px; overflow: hidden; width: 108%; margin-left: -4%; transform: rotate(-1.2deg); box-shadow: 0 14px 40px rgba(139,0,0,0.28); } /* Top dotted line (perforation) */ .f-ticker-wrap::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 4px; background-image: radial-gradient(circle, var(--t-white) 1.5px, transparent 2px); background-size: 14px 4px; background-repeat: repeat-x; background-position: center; opacity: 0.85; } /* Bottom dotted line (perforation) */ .f-ticker-wrap::after { content: ''; position: absolute; left: 0; right: 0; bottom: 7px; height: 4px; background-image: radial-gradient(circle, var(--t-white) 1.5px, transparent 2px); background-size: 14px 4px; background-repeat: repeat-x; background-position: center; opacity: 0.85; } /* Diagonal stripe overlay for depth */ .f-ticker-wrap > .f-stripe { position: absolute; inset: 0; background-image: repeating-linear-gradient( 45deg, transparent 0, transparent 28px, rgba(255,255,255,0.04) 28px, rgba(255,255,255,0.04) 56px ); pointer-events: none; } /* Ribbon notch ends (left & right) - shaped like a ribbon tail */ .f-ribbon-notch { position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 100%; z-index: 3; pointer-events: none; } .f-ribbon-notch--left { left: 0; background: linear-gradient(90deg, var(--t-red-dk), transparent); } .f-ribbon-notch--right { right: 0; background: linear-gradient(-90deg, var(--t-red-dk), transparent); } .f-ticker { display: flex; gap: 0; white-space: nowrap; animation: fTicker 40s linear infinite; width: max-content; will-change: transform; position: relative; z-index: 2; } @keyframes fTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .f-ticker span { font-family: var(--font-heading); font-weight: 900; font-size: clamp(24px, 3.8vw, 36px); color: var(--t-white); letter-spacing: 5px; text-transform: uppercase; display: inline-flex; align-items: center; text-shadow: 0 2px 0 rgba(0,0,0,0.18), 0 0 22px rgba(255,255,255,0.08); padding: 0 28px; } /* Star separator between words (instead of football icon) */ .f-ticker span::after { content: ''; display: inline-block; width: clamp(18px, 2.2vw, 22px); height: clamp(18px, 2.2vw, 22px); margin-left: 56px; background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%23E6B14A%27%3E%3Cpath%20d%3D%27M12%202L14.4%208.6L21.2%209L16%2013.6L17.6%2020.4L12%2016.8L6.4%2020.4L8%2013.6L2.8%209L9.6%208.6L12%202Z%27%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); vertical-align: middle; } /* ============================================================ 4. BOARDING PASS — Save the date, wider format ============================================================ */ .f-ticket-wrap { margin: 0 auto 64px; max-width: 980px; perspective: 1200px; } .f-ticket { display: grid; grid-template-columns: 110px 1fr 110px; background: var(--t-white); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(192,24,45,0.18), 0 4px 12px rgba(0,0,0,0.05); transform: rotate(-0.6deg); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; min-height: 360px; } .f-ticket:hover { transform: rotate(0deg) translateY(-4px); } /* LEFT STUB — Red band with logo + vertical brand text */ .f-ticket-stub { background: linear-gradient(180deg, var(--t-red) 0%, var(--t-red-dk) 100%); color: var(--t-white); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 18px 8px; text-transform: uppercase; position: relative; writing-mode: horizontal-tb; transform: none; text-align: center; } .f-ticket-stub::before { /* Zigzag left edge */ content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background-image: linear-gradient(45deg, transparent 50%, var(--t-cream) 50%), linear-gradient(135deg, transparent 50%, var(--t-cream) 50%); background-size: 8px 8px; background-position: 0 0, 0 4px; background-repeat: repeat-y; } .f-ticket-stub::after { /* Dotted right edge for tear */ content: ''; position: absolute; right: -7px; top: 0; bottom: 0; width: 14px; background-image: radial-gradient(circle at center, var(--t-cream) 4px, transparent 4.5px); background-size: 14px 14px; background-repeat: repeat-y; background-position: center; z-index: 1; } .f-stub-logo { width: 64px; height: 64px; border-radius: 50%; background: var(--t-white); padding: 6px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.25); } .f-stub-logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; } .f-stub-vertical { writing-mode: vertical-rl; transform: rotate(180deg); display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; justify-content: center; } .f-stub-brand { font-family: var(--font-heading); font-weight: 900; font-size: 15px; letter-spacing: 4px; color: var(--t-white); } .f-stub-sub { font-family: var(--font-heading); font-weight: 600; font-size: 9.5px; letter-spacing: 2px; color: rgba(255,255,255,0.72); } .f-stub-num { font-family: var(--font-heading); font-weight: 900; font-size: 22px; letter-spacing: 2px; color: var(--t-gold-light); padding: 6px 10px; background: rgba(0,0,0,0.2); border-radius: 6px; border: 1px dashed rgba(255,255,255,0.3); } /* MAIN BODY */ .f-ticket-body { padding: 24px 28px 22px; display: flex; flex-direction: column; min-width: 0; } .f-bp-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--t-cream-deep); } .f-bp-brand { display: flex; flex-direction: column; gap: 2px; } .f-bp-brand-name { font-family: var(--font-heading); font-weight: 900; font-size: 18px; color: var(--t-red-dk); letter-spacing: 1px; text-transform: uppercase; line-height: 1.1; } .f-bp-brand-tag { font-family: var(--font-heading); font-weight: 600; font-size: 10px; color: var(--t-ink-soft); letter-spacing: 2.5px; text-transform: uppercase; } .f-bp-class { text-align: right; display: flex; flex-direction: column; gap: 2px; } .f-bp-class-label { font-family: var(--font-heading); font-weight: 700; font-size: 9px; color: var(--t-ink-soft); letter-spacing: 2px; } .f-bp-class-value { font-family: var(--font-heading); font-weight: 900; font-size: 18px; color: var(--t-gold-dk); letter-spacing: 2px; } .f-ticket-label { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--t-ink-soft); letter-spacing: 3px; text-transform: uppercase; margin: 0 0 6px; } .f-ticket-date { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--t-ink); text-transform: uppercase; letter-spacing: 1px; line-height: 1.05; margin: 0 0 18px; } /* ROUTE LINE: 01 ✈ 02 */ .f-bp-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 14px 0; margin-bottom: 4px; } .f-bp-route-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .f-bp-route-item--end { align-items: flex-end; text-align: right; } .f-bp-route-code { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2.2rem, 6vw, 3rem); color: var(--t-red); line-height: 1; letter-spacing: -1px; } .f-bp-route-item--end .f-bp-route-code { color: var(--t-red-dk); background: linear-gradient(135deg, var(--t-red), var(--t-red-dk)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .f-bp-route-name { font-family: var(--font-heading); font-weight: 800; font-size: 12px; color: var(--t-ink); letter-spacing: 1.5px; text-transform: uppercase; } .f-bp-route-meta { font-size: 10px; color: var(--t-ink-soft); letter-spacing: 1.5px; font-weight: 600; } .f-bp-route-line { position: relative; height: 24px; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(90deg, var(--t-cream-deep) 50%, transparent 50%); background-size: 8px 2px; background-repeat: repeat-x; background-position: center; min-width: 80px; } .f-bp-route-plane { width: 32px; height: 32px; background: var(--t-white); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--t-red); box-shadow: 0 4px 12px rgba(192,24,45,0.2); position: relative; z-index: 1; } .f-bp-route-plane svg { width: 18px; height: 18px; } .f-ticket-date em { font-style: italic; background: linear-gradient(135deg, var(--t-red), var(--t-gold-dk)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .f-ticket-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; padding: 14px 0; margin-top: 6px; border-top: 2px dashed var(--t-cream-deep); border-bottom: 2px dashed var(--t-cream-deep); } .f-ticket-meta-item { display: flex; flex-direction: column; gap: 2px; } .f-ticket-meta-label { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: var(--t-ink-soft); letter-spacing: 2px; text-transform: uppercase; } .f-ticket-meta-value { font-family: var(--font-heading); font-weight: 800; font-size: 14px; color: var(--t-ink); letter-spacing: 0.5px; } .f-ticket-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 14px; margin-top: auto; } /* Barcode bars */ .f-bp-barcode { display: flex; align-items: flex-end; gap: 2px; height: 38px; flex: 1; min-width: 0; overflow: hidden; } .f-bp-barcode span { display: inline-block; background: var(--t-ink); height: 100%; } .f-bp-barcode span:nth-child(1) { width: 2px; } .f-bp-barcode span:nth-child(2) { width: 1px; opacity: 0.85; } .f-bp-barcode span:nth-child(3) { width: 3px; } .f-bp-barcode span:nth-child(4) { width: 1px; } .f-bp-barcode span:nth-child(5) { width: 2px; opacity: 0.7; } .f-bp-barcode span:nth-child(6) { width: 4px; } .f-bp-barcode span:nth-child(7) { width: 1px; } .f-bp-barcode span:nth-child(8) { width: 2px; } .f-bp-barcode span:nth-child(9) { width: 3px; opacity: 0.9; } .f-bp-barcode span:nth-child(10) { width: 1px; } .f-bp-barcode span:nth-child(11) { width: 2px; } .f-bp-barcode span:nth-child(12) { width: 4px; } .f-bp-barcode span:nth-child(13) { width: 1px; opacity: 0.7; } .f-bp-barcode span:nth-child(14) { width: 3px; } .f-bp-barcode span:nth-child(15) { width: 1px; } .f-bp-barcode span:nth-child(16) { width: 2px; opacity: 0.85; } .f-bp-barcode span:nth-child(17) { width: 5px; } .f-bp-barcode span:nth-child(18) { width: 1px; } .f-bp-barcode span:nth-child(19) { width: 2px; } .f-bp-barcode span:nth-child(20) { width: 3px; opacity: 0.7; } .f-bp-barcode span:nth-child(21) { width: 1px; } .f-bp-barcode span:nth-child(22) { width: 4px; } .f-bp-barcode span:nth-child(23) { width: 1px; opacity: 0.9; } .f-bp-barcode span:nth-child(24) { width: 2px; } .f-bp-barcode span:nth-child(25) { width: 3px; } .f-bp-barcode span:nth-child(26) { width: 1px; } .f-bp-barcode span:nth-child(27) { width: 2px; opacity: 0.85; } .f-ticket-qr { width: 44px; height: 44px; border-radius: 6px; background: linear-gradient(45deg, var(--t-ink) 25%, transparent 25%) 0 0, linear-gradient(-45deg, var(--t-ink) 25%, transparent 25%) 0 0, linear-gradient(45deg, transparent 75%, var(--t-ink) 75%) 0 0, linear-gradient(-45deg, transparent 75%, var(--t-ink) 75%) 0 0, var(--t-white); background-size: 8px 8px; border: 2px solid var(--t-ink); flex-shrink: 0; } /* RIGHT TEAR-OFF STUB */ .f-ticket-tear { background: linear-gradient(180deg, var(--t-cream) 0%, var(--t-cream-2) 100%); border-left: 2px dashed var(--t-cream-deep); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 12px; text-align: center; position: relative; gap: 14px; } .f-tear-top, .f-tear-bot { font-family: var(--font-heading); font-weight: 800; font-size: 12px; color: var(--t-ink-soft); letter-spacing: 2px; } .f-tear-mid { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2rem, 5vw, 2.6rem); color: var(--t-red); line-height: 1; letter-spacing: -1px; } .f-tear-divider { width: 30px; height: 1px; background: var(--t-cream-deep); } /* ============================================================ 5. SURPRISE BUBBLES — 4 colored circles ============================================================ */ .f-surprises { text-align: center; margin-bottom: 64px; } .f-block-title { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--t-ink); text-transform: uppercase; letter-spacing: 2px; margin: 0 0 8px; } .f-block-title em { font-style: italic; color: var(--t-red); } .f-block-sub { font-size: 14px; color: var(--t-ink-soft); margin: 0 0 32px; } .f-bubbles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 720px; margin: 0 auto; } .f-bubble { background: var(--t-white); border-radius: 20px; padding: 24px 16px; text-align: center; box-shadow: 0 8px 24px rgba(29,78,137,0.1); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; position: relative; overflow: hidden; cursor: default; } .f-bubble:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 16px 40px rgba(29,78,137,0.18); } .f-bubble-emoji { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; font-size: 36px; margin: 0 auto 14px; transition: transform 0.3s ease; } .f-bubble-emoji svg { width: 42px; height: 42px; display: block; } /* SVG color (text/fill via currentColor) */ .f-bubble--red .f-bubble-emoji svg { color: var(--t-red); } .f-bubble--yellow .f-bubble-emoji svg { color: var(--t-gold-dk); } .f-bubble--blue .f-bubble-emoji svg { color: var(--t-red-dk); } .f-bubble--green .f-bubble-emoji svg { color: var(--t-gold-dk); } .f-bubble:hover .f-bubble-emoji { transform: rotate(-8deg) scale(1.1); } /* Circle background behind the icon */ .f-bubble--red .f-bubble-emoji { background: linear-gradient(135deg, var(--t-red-pale), #F8C9CE); } .f-bubble--yellow .f-bubble-emoji { background: linear-gradient(135deg, #FFF1D6, var(--t-gold-light)); } .f-bubble--blue .f-bubble-emoji { background: linear-gradient(135deg, var(--t-cream), var(--t-cream-deep)); } .f-bubble--green .f-bubble-emoji { background: linear-gradient(135deg, #FFF1D6, var(--t-gold-light)); } /* Top accent border on each card */ .f-bubble--red { border-top: 4px solid var(--t-red); } .f-bubble--yellow { border-top: 4px solid var(--t-gold); } .f-bubble--blue { border-top: 4px solid var(--t-red-dk); } .f-bubble--green { border-top: 4px solid var(--t-gold-dk); } .f-bubble-title { font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--t-ink); margin: 0 0 6px; } .f-bubble-text { font-size: 12.5px; color: var(--t-ink-soft); margin: 0; line-height: 1.4; } /* ============================================================ 6. SCOREBOARD COUNTDOWN ============================================================ */ .f-scoreboard { margin: 0 auto 64px; max-width: 720px; text-align: center; } .f-scoreboard-title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 4px; text-transform: uppercase; color: var(--t-ink); margin-bottom: 20px; } .f-scoreboard-title::before, .f-scoreboard-title::after { content: '⚡'; font-size: 18px; } .f-scoreboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; background: linear-gradient(180deg, var(--t-red-dk) 0%, #5C0000 100%); padding: 20px; border-radius: 20px; box-shadow: 0 14px 40px rgba(139,0,0,0.35), inset 0 0 0 3px rgba(230,177,74,0.25); position: relative; } .f-scoreboard-grid::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 90px; height: 16px; background: linear-gradient(180deg, var(--t-gold-dk) 0%, #6E4A0E 100%); border-radius: 4px 4px 0 0; } .f-sb-box { background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.55) 100%); border-radius: 12px; padding: 16px 8px 12px; text-align: center; position: relative; border: 1px solid rgba(230,177,74,0.18); min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .f-sb-num { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2.2rem, 7vw, 3rem); color: var(--t-gold-light); text-shadow: 0 0 18px rgba(230,177,74,0.6), 0 0 32px rgba(230,177,74,0.3); line-height: 1; letter-spacing: 1px; font-variant-numeric: tabular-nums; } .f-sb-label { font-family: var(--font-heading); font-weight: 700; font-size: 10px; color: rgba(255,255,255,0.65); letter-spacing: 3px; margin-top: 6px; text-transform: uppercase; } /* ============================================================ 7. QUOTE ============================================================ */ .f-quote { text-align: center; margin: 0 auto 56px; max-width: 600px; padding: 0 20px; } .f-quote-mark { font-family: var(--serif); font-size: 80px; line-height: 0.5; color: var(--t-gold); font-weight: 700; } .f-quote-text { font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 3vw, 1.6rem); color: var(--t-red-dk); line-height: 1.5; font-weight: 400; margin: 0 0 8px; } .f-quote-author { font-family: var(--font-heading); font-weight: 700; font-size: 11px; color: var(--t-ink-soft); letter-spacing: 3px; text-transform: uppercase; } /* ============================================================ 8. CTA — dual buttons ============================================================ */ .f-cta-wrap { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 0 auto 56px; max-width: 600px; } .f-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; border-radius: 50px; font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; text-decoration: none; transition: transform 0.25s ease, box-shadow 0.25s ease; } .f-cta--primary { background: var(--t-red); color: var(--t-white); box-shadow: 0 8px 20px rgba(230,57,70,0.35), 0 3px 0 var(--t-red-dk); border: 2px solid var(--t-red-dk); } .f-cta--primary:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(230,57,70,0.5), 0 3px 0 var(--t-red-dk); } .f-cta--ghost { background: var(--t-white); color: var(--t-red-dk); border: 2px solid var(--t-red-dk); box-shadow: 0 6px 16px rgba(139,0,0,0.12); } .f-cta--ghost:hover { background: var(--t-red-dk); color: var(--t-white); transform: translateY(-3px); } /* ============================================================ 9. OUTRO with mascot players ============================================================ */ .f-outro { text-align: center; padding: 24px 16px 16px; } .f-outro-text { font-family: var(--font-heading); font-weight: 800; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--t-red-dk); margin: 0 0 18px; } .f-mascots { display: inline-flex; gap: 12px; justify-content: center; } .f-mascot { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--t-white); box-shadow: 0 4px 12px rgba(192,24,45,0.15), 0 1px 0 rgba(0,0,0,0.04) inset; animation: fBounce 2.5s ease-in-out infinite; border: 2px solid var(--t-white); } .f-mascot svg { width: 26px; height: 26px; display: block; } .f-mascot:nth-child(1) { animation-delay: 0s; background: linear-gradient(135deg, var(--t-red-pale), #F8C9CE); } .f-mascot:nth-child(1) svg { color: var(--t-red-dk); } .f-mascot:nth-child(2) { animation-delay: 0.3s; background: linear-gradient(135deg, #FFF1D6, var(--t-gold-light)); } .f-mascot:nth-child(2) svg { color: var(--t-gold-dk); } .f-mascot:nth-child(3) { animation-delay: 0.6s; background: linear-gradient(135deg, var(--t-cream), var(--t-cream-deep)); } .f-mascot:nth-child(3) svg { color: var(--t-red); } @keyframes fBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ============================================================ FLOATING BALL — bottom-right mascot ============================================================ */ .f-floating-ball { position: fixed; bottom: 24px; right: 24px; width: 64px; height: 64px; z-index: 50; animation: fBallBounce 2.5s ease-in-out infinite; pointer-events: none; } @keyframes fBallBounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-10px) rotate(90deg); } 50% { transform: translateY(0) rotate(180deg); } 75% { transform: translateY(-6px) rotate(270deg); } } /* ============================================================ RESPONSIVE ============================================================ */ @media (min-width: 640px) { .fun-section { padding: 120px 32px 80px; } .f-bignum-wrap { gap: 28px; } .f-welcome { grid-template-columns: repeat(3, 1fr); gap: 18px; } .f-bubbles { grid-template-columns: repeat(4, 1fr); gap: 20px; } .f-bubble-emoji { width: 80px; height: 80px; font-size: 40px; } .f-bubble-emoji svg { width: 46px; height: 46px; } .f-scoreboard-grid { grid-template-columns: repeat(4, 1fr); padding: 22px; } .f-sb-box { min-height: 110px; padding: 22px 10px 16px; } } @media (min-width: 900px) { .f-inner { padding: 0 20px; } .f-edition-stack { gap: 10px; } } @media (max-width: 639px) { .f-edition-stack { text-align: center; align-items: center; } .f-sticker { transform: rotate(-3deg); align-self: center; } .f-ticker span { letter-spacing: 2px; padding: 0 14px; } .f-ticker span::after { margin-left: 28px; } /* BOARDING PASS — compact on mobile */ .f-ticket { grid-template-columns: 68px 1fr; min-height: auto; } .f-stub-logo { width: 44px; height: 44px; padding: 4px; } .f-stub-brand { font-size: 11px; letter-spacing: 2.5px; } .f-stub-sub { font-size: 8px; letter-spacing: 1.5px; } .f-stub-num { font-size: 16px; padding: 4px 8px; } .f-ticket-body { padding: 20px 18px 16px; } .f-bp-header { flex-wrap: wrap; gap: 8px; } .f-bp-brand-name { font-size: 15px; } .f-bp-class-value { font-size: 15px; } .f-ticket-tear { display: none; } .f-ticket-meta { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; } .f-bp-route { gap: 8px; padding: 10px 0; } .f-bp-route-line { min-width: 40px; } .f-bp-route-plane { width: 28px; height: 28px; } .f-bp-route-plane svg { width: 14px; height: 14px; } } @media (prefers-reduced-motion: reduce) { .f-conf, .f-mascot, .f-floating-ball, .f-ball-svg, .f-ticker { animation: none !important; } }