.tailgate-intro { background: var(--color-red); padding-block: clamp(40px, 5.3vw, 76px) clamp(44px, 7.3vw, 106px); } .tailgate-intro__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(28px, 3vw, 44px); } /* A foam finger that never moves is a waste of a foam finger. Anchored near the wrist so the tip travels furthest. Uses the independent `rotate` property, not `transform`, so it composes with anything GSAP writes. */ .tailgate-intro__graphic { position: relative; flex: none; width: min(313px, 62vw); transform-origin: 50% 88%; animation: tailgate-finger-wave 5s ease-in-out infinite alternate; } @keyframes tailgate-finger-wave { from { rotate: -2.5deg; } to { rotate: 2.5deg; } } .tailgate-intro__finger { width: 100%; height: auto; } .tailgate-intro__star { position: absolute; width: 56%; height: auto; left: 64.5%; top: 9%; } .tailgate-intro__title { font-family: var(--font-family-secondary); font-weight: 400; font-size: clamp(32px, 4.9vw, 62px); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-sky); margin: 0 0 clamp(10px, 1vw, 14px); } .tailgate-intro__date { font-family: var(--font-family-primary); /* Figma: Komet Medium. */ font-weight: 500; font-size: clamp(22px, 3.1vw, 40px); line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-cream); margin: 0 0 clamp(18px, 2vw, 29px); } /* The body comes from a WYSIWYG, so its paragraphs carry no class and have to be reached through the wrapper. That makes this selector one type more specific than .tailgate-intro__kicker, which would silently lose — hence the kicker rule below is scoped to match. */ .tailgate-intro__body p { font-family: var(--font-family-primary); font-weight: 400; font-size: clamp(15px, 1.85vw, 24px); line-height: 1.3; color: var(--color-cream); margin: 0 0 1.2em; } .tailgate-intro__body .tailgate-intro__kicker { font-weight: 800; text-transform: uppercase; color: var(--color-sky); margin: 0; } @media (min-width: 992px) { .tailgate-intro__inner { flex-direction: row; align-items: flex-start; gap: 11.9%; } .tailgate-intro__graphic { width: 28.7%; } .tailgate-intro__copy { width: 59.4%; } } @media (prefers-reduced-motion: reduce) { .tailgate-intro__graphic { animation: none; } }  .tailgate-locations { padding-block: clamp(40px, 4.4vw, 63px) clamp(24px, 2.8vw, 40px); } .tailgate-locations__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(30px, 3vw, 42px); } .tailgate-locations__map { flex: none; width: min(477px, 100%); border-radius: 14px; overflow: hidden; } .tailgate-locations__map img { display: block; width: 100%; height: auto; } .tailgate-locations__list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: clamp(20px, 2vw, 29px); } .tailgate-locations__item { display: grid; grid-template-columns: clamp(24px, 2.4vw, 35px) 1fr; column-gap: clamp(12px, 1.25vw, 18px); align-items: start; } .tailgate-locations__pin { width: 100%; height: auto; margin-top: 0.12em; } .tailgate-locations__name { font-family: var(--font-family-tertiary); font-weight: 800; font-size: clamp(20px, 2.4vw, 34px); line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: #000; margin: 0; } .tailgate-locations__detail { font-family: var(--font-family-tertiary); font-weight: 800; font-size: clamp(14px, 1.7vw, 24px); line-height: 1.25; color: #000; margin: 0.15em 0 0; } /* Below the desktop breakpoint these sit behind the copy rather than out in the margins, so they drop to a tint. At 992px+ there is room and they go to full strength. */ .tailgate-locations__deco { position: absolute; display: block; pointer-events: none; z-index: 0; opacity: 0.28; } .tailgate-locations__deco img { width: 100%; height: auto; } .tailgate-locations__deco--star-a { width: 12.1%; right: -0.4%; top: 65%; } .tailgate-locations__deco--star-b { width: 12.1%; left: -2.6%; bottom: -62%; } @media (min-width: 992px) { .tailgate-locations__inner { flex-direction: row; align-items: flex-start; gap: 3.14%; } .tailgate-locations__map { width: 46.8%; } .tailgate-locations__list { width: 50%; } .tailgate-locations__deco { opacity: 1; } }  .tailgate-rsvp { padding-block: clamp(34px, 3.9vw, 56px) clamp(44px, 5.5vw, 76px); } .tailgate-rsvp__title { position: relative; z-index: 1; font-family: var(--font-family-primary); /* Figma: Komet Black. */ font-weight: 900; font-size: clamp(26px, 3.4vw, 48px); line-height: 1.1; text-transform: uppercase; text-align: center; color: var(--color-navy); margin: 0 0 clamp(26px, 3vw, 44px); } .tailgate-rsvp__embed { position: relative; z-index: 1; background: #fff; border-radius: 15px; padding: clamp(14px, 1.6vw, 24px); width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; } .tailgate-rsvp__embed iframe { display: block; max-width: 100%; } .tailgate-rsvp__deco { position: absolute; display: block; pointer-events: none; z-index: 0; opacity: 0.28; } .tailgate-rsvp__deco img { width: 100%; height: auto; } /* The seals are circular badges with text set around the rim — they read as stickers, so they turn slowly and continuously. The independent `rotate` property composes with the wrapper's parallax transform. */ .tailgate-rsvp__seal { animation: tailgate-seal-spin 26s linear infinite; } @keyframes tailgate-seal-spin { to { rotate: 360deg; } } .tailgate-rsvp__deco--seal-a { width: 22.4%; right: -7.7%; top: 14%; } .tailgate-rsvp__deco--seal-b { width: 22.5%; left: -10.3%; top: 52%; } .tailgate-rsvp__deco--star { width: 12.1%; right: -0.3%; top: 84%; } @media (min-width: 992px) { .tailgate-rsvp__deco { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .tailgate-rsvp__seal { animation: none; } }  .footer { background: var(--color-navy); padding-block: clamp(40px, 7.3vw, 106px) clamp(42px, 7.8vw, 112px); } .footer__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(26px, 3.4vw, 46px) clamp(30px, 4.4vw, 62px); } /* Not a uniform height in Figma: the three Hub marks are ~82px, Oliv ~90px and The Parker 92px. Each mark carries that as its own optical scale, so the rail stays balanced whichever logos an editor puts in it. */ .footer__logo { height: calc(clamp(46px, 5.7vw, 82px) * var(--tg-logo-scale, 1)); width: auto; } @media (min-width: 992px) { .footer__logos { flex-wrap: nowrap; justify-content: space-between; gap: 0; } }  .copyright { color: #fff; background-color: #121212; } .copyright__container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; font-size: 12px; line-height: 1; padding: 1rem var(--x-gap); } .copyright img { display: inline-block; height: 1.1em; width: auto; vertical-align: middle; }