/* ============================================================= Community Builders Classic — brand stylesheet Fonts loaded in : Fraunces (display) + Outfit (UI/body) ============================================================= */ :root { /* Brand palette (exact) */ --fairway-deep: #0a2a20; --fairway: #0f3d2e; --moss: #1c5c43; --gold: #c4a35a; --gold-soft: #d9c089; --cream: #f4f1e8; --ivory: #fbfaf4; --ink: #13241c; /* Derived */ --cream-dim: rgba(244, 241, 232, 0.72); --cream-faint: rgba(244, 241, 232, 0.46); --hairline: rgba(196, 163, 90, 0.32); --hairline-dark: rgba(19, 36, 28, 0.16); /* Type */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-ui: "Outfit", system-ui, -apple-system, Segoe UI, sans-serif; /* Scale / rhythm */ --measure: 68ch; --gutter: clamp(1.25rem, 5vw, 6rem); --section-pad: clamp(5rem, 12vh, 11rem); --radius: 2px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ----------------------------- Reset ----------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--fairway-deep); color: var(--cream); font-family: var(--font-ui); font-weight: 300; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.65; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ------------------------- Typography ---------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; } .eyebrow { font-family: var(--font-ui); font-weight: 500; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--gold); margin: 0 0 1.25rem; display: inline-flex; align-items: center; gap: 0.85em; } .eyebrow::before { content: ""; width: 2.25rem; height: 1px; background: var(--gold); opacity: 0.85; } /* Italic gold emphasis — the brand's emotional accent */ .em { font-style: italic; font-weight: 400; color: var(--gold-soft); } .lede { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); line-height: 1.55; color: var(--cream-dim); max-width: 46ch; font-weight: 300; } /* --------------------------- Layout ------------------------------ */ .shell { width: 100%; padding-inline: var(--gutter); } .wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); } .section { padding-block: var(--section-pad); position: relative; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--gold); color: var(--ink); padding: 0.75rem 1.25rem; border-radius: var(--radius); font-family: var(--font-ui); font-weight: 600; } .skip-link:focus { left: 1rem; top: 1rem; } /* Visible keyboard focus everywhere */ :focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; border-radius: var(--radius); } /* --------------------------- Buttons ----------------------------- */ .btn { --bg: var(--gold); --fg: var(--ink); display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--font-ui); font-weight: 600; font-size: 0.94rem; letter-spacing: 0.02em; padding: 0.95rem 1.7rem; background: var(--bg); color: var(--fg); border: 1px solid var(--bg); border-radius: var(--radius); cursor: pointer; white-space: nowrap; transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--gold:hover { background: var(--gold-soft); border-color: var(--gold-soft); } .btn--ghost { --bg: transparent; --fg: var(--cream); border-color: rgba(217, 192, 137, 0.55); } .btn--ghost:hover { background: rgba(217, 192, 137, 0.1); border-color: var(--gold-soft); color: var(--ivory); } .btn--dark { --bg: var(--fairway-deep); --fg: var(--gold-soft); border-color: var(--fairway-deep); } .btn--dark:hover { background: var(--ink); } .btn .arrow { transition: transform 0.35s var(--ease); } .btn:hover .arrow { transform: translateX(4px); } /* ============================================================ CREST monogram (signature mark) ============================================================ */ .crest { display: inline-block; width: 3rem; line-height: 0; color: var(--gold); flex: 0 0 auto; } .crest svg { width: 100%; height: auto; display: block; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gutter); transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), border-color 0.4s var(--ease); border-bottom: 1px solid transparent; } .nav.is-scrolled { background: rgba(10, 42, 32, 0.82); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom-color: var(--hairline); } .nav__brand { display: flex; align-items: center; gap: 0.85rem; } .nav__brand .crest { width: 2.5rem; } .nav__wordmark { font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; line-height: 1; letter-spacing: 0.01em; color: var(--ivory); } .nav__wordmark small { display: block; font-family: var(--font-ui); font-weight: 400; font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); margin-top: 0.3rem; } .nav__links { display: flex; align-items: center; gap: 2rem; } .nav__links a { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--cream-dim); transition: color 0.3s var(--ease); } .nav__links a:hover { color: var(--gold-soft); } .nav__links .btn { padding: 0.6rem 1.15rem; font-size: 0.82rem; } .nav__menu-link { display: none; } @media (max-width: 860px) { .nav__links a:not(.btn) { display: none; } } @media (max-width: 560px) { .nav { padding-block: 0.85rem; } .nav__wordmark small { display: none; } .nav__wordmark { font-size: 0.78rem; max-width: 8.5rem; line-height: 1.15; } .nav__links .btn { padding: 0.55rem 0.95rem; font-size: 0.78rem; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--fairway-deep); } .hero__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02) contrast(1.02); } /* Poster is the always-on base; the video reveals only once it is playing, so iOS never shows its native play-button overlay on a paused video. */ .hero__poster { position: absolute; inset: 0; z-index: 0; } .hero__video { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity 0.7s var(--ease); } .hero__video.is-playing { opacity: 1; } /* Inward green mask: top + bottom kill any seam with the page */ .hero__mask { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, var(--fairway-deep) 0%, rgba(10, 42, 32, 0.78) 9%, rgba(10, 42, 32, 0.20) 26%, rgba(10, 42, 32, 0.0) 42%, rgba(10, 42, 32, 0.0) 50%, rgba(10, 42, 32, 0.45) 72%, rgba(10, 42, 32, 0.92) 90%, var(--fairway-deep) 100%), radial-gradient(120% 85% at 50% 42%, rgba(10, 42, 32, 0.0) 38%, rgba(10, 42, 32, 0.55) 100%); } .hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin-inline: auto; padding: 0 var(--gutter) clamp(3.5rem, 9vh, 7rem); display: grid; justify-items: center; text-align: center; } .hero__title { font-size: clamp(2.6rem, 1.6rem + 5.4vw, 6rem); max-width: 16ch; margin: 0.4rem 0 1.6rem; color: var(--ivory); } .hero__sub { max-width: 52ch; margin: 0 auto 2.4rem; color: var(--cream-dim); font-size: clamp(1.05rem, 1rem + 0.5vw, 1.3rem); font-weight: 300; } .hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; } .hero__meta { margin-top: 2.8rem; display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; align-items: center; justify-content: center; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-soft); } .hero__meta span { white-space: nowrap; } .hero__meta span + span::before { content: "·"; color: var(--gold); margin-right: 1.4rem; opacity: 0.7; } .hero__scroll { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 2; font-size: 0.62rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--cream-faint); display: grid; justify-items: center; gap: 0.6rem; } .hero__scroll::after { content: ""; width: 1px; height: 2.6rem; background: linear-gradient(var(--gold), transparent); animation: scrollPulse 2.4s var(--ease) infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 0.3; transform: scaleY(0.7); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } } /* ============================================================ SCROLL SEQUENCE (frame-by-frame story) ============================================================ */ .sequence { position: relative; background: var(--fairway-deep); } .sequence__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; } .sequence__canvas, .sequence__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sequence__canvas { z-index: 0; opacity: 0; transition: opacity 0.6s var(--ease); } @media (prefers-reduced-motion: reduce) { .sequence__canvas { display: none; } } .sequence__fallback { z-index: 0; background-size: cover; background-position: center; background-color: var(--fairway); } /* Cinematic grade: bottom-weighted so the lower-third copy stays legible */ .sequence__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(80% 70% at 50% 42%, rgba(6,16,11,0.10), rgba(6,16,11,0.52) 100%), linear-gradient(to bottom, rgba(6,16,11,0.62) 0%, rgba(6,16,11,0) 22%, rgba(6,16,11,0) 52%, rgba(6,16,11,0.88) 100%); } .sequence__loader { position: absolute; z-index: 6; right: var(--gutter); top: 1.6rem; font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cream-faint); transition: opacity 0.5s var(--ease); } .sequence__loader[hidden] { display: none; } /* Letterbox bars */ .cine__bar { position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; height: clamp(26px, 5vh, 52px); background: #06100b; transform: scaleY(0); transition: transform 0.9s var(--ease); } .cine__bar--top { top: 0; transform-origin: top; } .cine__bar--bot { bottom: 0; transform-origin: bottom; } .sequence.is-near .cine__bar { transform: scaleY(1); } /* Drifting golden light (atmosphere) */ .cine__light { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: 0.5; background: radial-gradient(7px 7px at 20% 30%, rgba(217,192,137,0.9), transparent 60%), radial-gradient(5px 5px at 70% 60%, rgba(217,192,137,0.7), transparent 60%), radial-gradient(4px 4px at 42% 80%, rgba(217,192,137,0.7), transparent 60%), radial-gradient(6px 6px at 85% 25%, rgba(196,163,90,0.7), transparent 60%), radial-gradient(3px 3px at 55% 40%, rgba(217,192,137,0.6), transparent 60%), radial-gradient(4px 4px at 33% 55%, rgba(217,192,137,0.6), transparent 60%); background-repeat: no-repeat; animation: cineDrift 14s linear infinite; } @keyframes cineDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-2%, -8%, 0); } } /* Pinned cinematic overlay */ .cine { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: grid; align-items: end; justify-items: center; } .cine__chapter { grid-area: 1 / 1; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--gutter) clamp(6rem, 16vh, 10rem); opacity: 0; transition: opacity 0.7s var(--ease); } .cine.is-ready .cine__chapter.is-active { opacity: 1; } html:not(.js) .cine__chapter { opacity: 1; } html:not(.js) .cine__chapter ~ .cine__chapter { display: none; } .cine__ghost { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -56%) translateY(var(--par, 0px)); font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(16rem, 40vw, 30rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(217,192,137,0.16); pointer-events: none; user-select: none; z-index: -1; } .cine__kick { font-family: var(--font-ui); font-weight: 500; font-size: clamp(0.66rem, 0.6rem + 0.3vw, 0.78rem); letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.4rem; display: inline-flex; align-items: center; gap: 1rem; } .cine__kick::before, .cine__kick::after { content: ""; width: 2.6rem; height: 1px; background: rgba(196,163,90,0.6); } .cine__title { font-family: var(--font-display); font-weight: 500; line-height: 0.98; letter-spacing: -0.02em; font-size: clamp(3rem, 1.6rem + 7vw, 7rem); color: var(--ivory); margin: 0 0 1.4rem; text-shadow: 0 2px 40px rgba(6,16,11,0.5); transform: translateY(var(--par, 0px)); } .cine__title em { font-style: italic; font-weight: 400; color: var(--gold-soft); } .cine__sub { font-weight: 300; font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); color: rgba(244,241,232,0.86); max-width: 56ch; margin: 0 auto; text-shadow: 0 1px 24px rgba(6,16,11,0.7); } /* filmic reveal on the active title */ .cine__chapter.is-active .cine__title { animation: cineWipe 0.9s var(--ease) both; } @keyframes cineWipe { from { clip-path: inset(0 0 100% 0); opacity: 0; transform: translateY(18px); } to { clip-path: inset(0 0 -5% 0); opacity: 1; transform: translateY(var(--par, 0px)); } } /* Progress track + chapter labels */ .cine__track { position: absolute; left: 50%; transform: translateX(-50%); bottom: 3.4rem; z-index: 6; width: min(520px, 78vw); display: flex; gap: 8px; pointer-events: none; } .cine__track i { flex: 1; height: 2px; background: rgba(244,241,232,0.2); overflow: hidden; position: relative; } .cine__track i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--fill, 0)); transform-origin: left; transition: transform 0.15s linear; } .cine__labels { position: absolute; left: 50%; transform: translateX(-50%); bottom: 2rem; z-index: 6; width: min(520px, 78vw); display: flex; justify-content: space-between; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244,241,232,0.5); pointer-events: none; } .cine__labels span { transition: color 0.4s var(--ease); } .cine__labels span.is-on { color: var(--gold-soft); } /* Panels are invisible spacers that supply scroll height under the pinned cinema */ .sequence__panels { position: relative; z-index: 0; margin-top: -100svh; pointer-events: none; } .story { position: relative; width: 100%; min-height: 100svh; } @media (max-width: 600px) { .cine__sub { max-width: 32ch; } .cine__chapter { padding-bottom: clamp(5rem, 14vh, 8rem); } } @media (prefers-reduced-motion: reduce) { .cine__light { animation: none; } .cine__chapter.is-active .cine__title { animation: none; } .cine__bar { transition: none; } .cine__title, .cine__ghost { transform: none; } } /* ============================================================ GENERIC LIGHT SECTION ============================================================ */ .panel { background: var(--cream); color: var(--ink); } .panel--ivory { background: var(--ivory); color: var(--ink); } .panel .eyebrow { color: var(--moss); } .panel .eyebrow::before { background: var(--moss); } .section-head { max-width: 54ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-head h2 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); } .section-head .lede { color: rgba(19, 36, 28, 0.66); margin-top: 1.2rem; } /* ============================================================ SCHEDULE — golf scorecard motif ============================================================ */ .scorecard { border: 1px solid var(--hairline-dark); background: var(--ivory); border-radius: var(--radius); overflow: hidden; } .scorecard__row { display: grid; grid-template-columns: 7rem 1fr auto; gap: clamp(1rem, 4vw, 3rem); align-items: baseline; padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.6rem); border-top: 1px solid var(--hairline-dark); transition: background 0.4s var(--ease); } .scorecard__row:first-child { border-top: 0; } .scorecard__row:hover { background: var(--cream); } .scorecard__time { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); color: var(--moss); letter-spacing: -0.02em; } .scorecard__time small { display: block; font-family: var(--font-ui); font-weight: 500; font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-top: 0.35rem; } .scorecard__title { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; color: var(--ink); margin-bottom: 0.35rem; } .scorecard__desc { color: rgba(19, 36, 28, 0.62); font-size: 0.95rem; max-width: 44ch; } .scorecard__hole { font-family: var(--font-ui); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); white-space: nowrap; } @media (max-width: 620px) { .scorecard__row { grid-template-columns: 1fr; gap: 0.5rem; } .scorecard__hole { display: none; } } /* ============================================================ ENTRY — deep green feature ============================================================ */ .entry { background: radial-gradient(120% 120% at 80% 0%, rgba(28, 92, 67, 0.55), transparent 60%), var(--fairway); color: var(--cream); position: relative; overflow: hidden; } .entry__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; } @media (max-width: 880px) { .entry__grid { grid-template-columns: 1fr; } } .entry h2 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); color: var(--ivory); } .entry__list { list-style: none; padding: 0; margin: 1.8rem 0 0; display: grid; gap: 0.9rem; } .entry__list li { display: flex; gap: 0.85rem; align-items: baseline; color: var(--cream-dim); } .entry__list li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 0.5em; border: 1px solid var(--gold); border-radius: 50%; } .ticket { border: 1px solid var(--hairline); background: rgba(7, 24, 18, 0.5); border-radius: var(--radius); padding: clamp(2rem, 4vw, 3rem); text-align: center; } .ticket__eyebrow { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.4rem; } .ticket__price { font-family: var(--font-display); font-weight: 500; font-size: clamp(3rem, 2rem + 5vw, 5rem); line-height: 1; color: var(--ivory); letter-spacing: -0.03em; } .ticket__price span { font-size: 0.42em; vertical-align: top; color: var(--gold-soft); margin-right: 0.1em; } .ticket__unit { color: var(--cream-faint); font-size: 0.88rem; margin: 0.9rem 0 1.8rem; letter-spacing: 0.04em; } .ticket .btn { width: 100%; justify-content: center; } .ticket__note { margin-top: 1.1rem; font-size: 0.78rem; color: var(--cream-faint); } /* ============================================================ WHO SHOULD ATTEND — chips ============================================================ */ .chips { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; } .chip { font-family: var(--font-ui); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.01em; padding: 0.7rem 1.25rem; border: 1px solid var(--hairline-dark); border-radius: 999px; color: var(--ink); background: var(--ivory); transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease); } .chip:hover { background: var(--moss); color: var(--ivory); border-color: var(--moss); transform: translateY(-2px); } /* ============================================================ GALLERY ============================================================ */ .gallery { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(0.6rem, 1.4vw, 1rem); margin-top: clamp(2rem, 4vw, 3rem); } .gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--fairway); } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); } .gallery figure:hover img { transform: scale(1.04); } .g1 { grid-column: span 5; aspect-ratio: 4 / 5; } .g2 { grid-column: span 7; aspect-ratio: 3 / 2; } .g3 { grid-column: span 7; aspect-ratio: 3 / 2; } .g4 { grid-column: span 5; aspect-ratio: 4 / 5; } @media (max-width: 700px) { .gallery { grid-template-columns: 1fr 1fr; } .g1, .g2, .g3, .g4 { grid-column: span 1; aspect-ratio: 3 / 4; } } /* ============================================================ SPONSOR CTA ============================================================ */ .sponsor-cta { background: linear-gradient(180deg, var(--fairway-deep), var(--ink)); text-align: center; } .sponsor-cta .crest { width: 4.25rem; margin-bottom: 2rem; } .sponsor-cta h2 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); max-width: 18ch; margin: 0 auto 1.4rem; color: var(--ivory); } .sponsor-cta .lede { margin: 0 auto 2.4rem; color: var(--cream-dim); } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--ink); color: var(--cream-dim); padding-block: clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--hairline); } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } @media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; gap: 2rem; } } .footer__brand { display: flex; gap: 1rem; align-items: flex-start; } .footer__brand .crest { color: var(--gold); } .footer h4 { font-family: var(--font-ui); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; } .footer a:hover { color: var(--gold-soft); } .footer__col p, .footer__col a { display: block; font-size: 0.92rem; margin-bottom: 0.5rem; } .footer__host { font-size: 0.95rem; line-height: 1.7; max-width: 34ch; margin-top: 0.4rem; } .footer__host strong { color: var(--cream); font-weight: 500; } .footer__legal { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid rgba(196,163,90,0.18); display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; font-size: 0.78rem; color: var(--cream-faint); letter-spacing: 0.03em; } /* ============================================================ REVEAL-ON-SCROLL utility ============================================================ */ /* Hidden only when JS is present; no-JS users always see content */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.is-in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .reveal, .story__card { opacity: 1 !important; transform: none !important; transition: none !important; } .hero__scroll::after { animation: none; } .btn:hover, .chip:hover, .gallery figure:hover img { transform: none; } } /* ============================================================ SPONSORS PAGE ============================================================ */ .page-hero { padding-block: clamp(8rem, 16vh, 12rem) clamp(3rem, 6vw, 5rem); background: radial-gradient(120% 90% at 50% -10%, var(--moss), var(--fairway-deep) 55%); text-align: center; } .page-hero h1 { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem); color: var(--ivory); max-width: 18ch; margin: 0.4rem auto 1.4rem; } .page-hero .lede { margin-inline: auto; color: var(--cream-dim); } .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.25rem; } .tier { border: 1px solid var(--hairline-dark); border-radius: var(--radius); background: var(--ivory); padding: clamp(1.8rem, 3vw, 2.6rem); display: flex; flex-direction: column; transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); } .tier:hover { transform: translateY(-4px); border-color: var(--gold); } .tier--feature { background: var(--fairway); color: var(--cream); border-color: var(--gold); } .tier--feature .tier__name, .tier--feature .tier__price { color: var(--ivory); } .tier--feature .tier__perks li { color: var(--cream-dim); } .tier--feature .tier__perks li::before { border-color: var(--gold); } .tier__tag { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; font-weight: 600; } .tier__name { font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; color: var(--ink); margin-bottom: 0.4rem; } .tier__price { font-family: var(--font-display); font-size: 2.4rem; color: var(--moss); letter-spacing: -0.02em; line-height: 1; margin-bottom: 1.4rem; } .tier--feature .tier__price { color: var(--gold-soft); } .tier__price span { font-size: 0.4em; vertical-align: super; } .tier__perks { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: 0.7rem; flex: 1; } .tier__perks li { display: flex; gap: 0.7rem; align-items: baseline; color: rgba(19,36,28,0.7); font-size: 0.94rem; } .tier__perks li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 0.45em; border: 1px solid var(--gold); border-radius: 50%; } .tier .btn { justify-content: center; } .tier--feature .btn { background: var(--gold); color: var(--ink); border-color: var(--gold); } .backlink { display: inline-flex; align-items: center; gap: 0.5em; color: var(--gold-soft); font-size: 0.85rem; letter-spacing: 0.04em; margin-bottom: 2rem; } .backlink:hover { color: var(--ivory); } /* Tickets page note */ .tickets__note { max-width: 58ch; margin: 2.6rem auto 0; text-align: center; color: rgba(19, 36, 28, 0.6); font-size: 0.92rem; line-height: 1.6; } /* Sponsor tier section dividers + centered section head */ .section-head--center { text-align: center; margin-inline: auto; } .section-head--center .eyebrow { justify-content: center; } .section-head--center .lede { margin-inline: auto; } .tier-divider { display: flex; align-items: center; gap: 1.25rem; margin: clamp(2.6rem, 5vw, 4.5rem) 0 1.9rem; } .tier-divider h3 { font-family: var(--font-ui); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--moss); white-space: nowrap; } .tier-divider .line { flex: 1; height: 1px; background: var(--hairline-dark); } .tier__avail { font-size: 0.95rem; color: rgba(19,36,28,0.5); margin: -0.6rem 0 1.4rem; } .tier--feature .tier__avail { color: var(--cream-faint); } /* ============================================================ MOBILE REFINEMENTS ============================================================ */ body { -webkit-tap-highlight-color: transparent; } @media (max-width: 560px) { :root { --section-pad: clamp(3.25rem, 8vh, 5rem); } /* Hero: stack CTAs full-width for thumbs, stack the meta row */ .hero__ctas { flex-direction: column; width: 100%; max-width: 22rem; margin-inline: auto; } .hero__ctas .btn { width: 100%; justify-content: center; padding-block: 1.05rem; } .hero__meta { flex-direction: column; gap: 0.55rem; margin-top: 2rem; line-height: 1.4; } .hero__meta span + span::before { display: none; } .hero__sub { margin-bottom: 2rem; } /* A touch more breathing room inside glass story cards */ .story__card { width: 100%; } .story__num { font-size: 9rem; top: -1.8rem; } } /* ============================================================ SPONSOR PAGE — fundraising goal, materials key, donations ============================================================ */ .goal { background: radial-gradient(125% 120% at 50% -20%, var(--moss), var(--fairway-deep) 62%); color: var(--cream); text-align: center; } .goal .eyebrow { justify-content: center; color: var(--gold); } .goal__fig { font-family: var(--font-display); font-weight: 500; font-size: clamp(3.4rem, 2rem + 8vw, 7rem); line-height: 1; color: var(--gold-soft); letter-spacing: -0.03em; margin: 0.5rem 0 0.9rem; } .goal__cap { font-size: 0.86rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); } .statline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(2.6rem,5vw,4rem); border: 1px solid var(--hairline); background: var(--hairline); border-radius: var(--radius); overflow: hidden; } .statline > div { background: rgba(7,24,18,0.55); padding: clamp(1.6rem,3vw,2.3rem); } .statline strong { display: block; font-family: var(--font-display); font-size: clamp(1.7rem,1.2rem+1.8vw,2.5rem); color: var(--gold-soft); letter-spacing: -0.02em; } .statline b { display: block; font-family: var(--font-ui); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem; } .statline em { font-style: normal; display: block; color: var(--cream-dim); font-size: 0.9rem; margin-top: 0.7rem; line-height: 1.45; } @media (max-width: 680px){ .statline { grid-template-columns: 1fr; } } .matkey { border: 1px solid var(--hairline-dark); border-radius: var(--radius); background: var(--ivory); padding: clamp(1.7rem,3vw,2.4rem); margin-top: 2.2rem; } .matkey h4 { font-family: var(--font-ui); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--moss); margin-bottom: 1.2rem; } .matkey ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 2rem; } @media (max-width: 620px){ .matkey ul { grid-template-columns: 1fr; } } .matkey li { display: flex; gap: 0.8rem; align-items: baseline; color: rgba(19,36,28,0.72); font-size: 0.94rem; } .matkey li::before { content:""; flex:0 0 auto; width:6px; height:6px; margin-top:0.5em; border:1px solid var(--gold); border-radius:50%; } .matkey strong { color: var(--ink); font-weight: 600; } .donate-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.2rem; max-width: 640px; } @media (max-width: 560px){ .donate-row { grid-template-columns: 1fr; } } .donate { display: grid; place-items: center; gap: 0.35rem; padding: 1.8rem 1rem; border: 1px solid var(--hairline-dark); border-radius: var(--radius); background: var(--ivory); transition: border-color .3s var(--ease), transform .3s var(--ease); } .donate:hover { border-color: var(--gold); transform: translateY(-3px); } .donate strong { font-family: var(--font-display); font-weight: 500; font-size: 2.1rem; color: var(--moss); } .donate span { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(19,36,28,0.55); } .contact-list { list-style: none; padding: 0; margin: 1.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.7rem 2.4rem; justify-content: center; font-size: 0.98rem; color: var(--cream-dim); } .contact-list a { color: var(--gold-soft); } .contact-list a:hover { color: var(--ivory); } .contact-deadline { margin-top: 1.5rem; font-size: 0.85rem; color: var(--cream-faint); letter-spacing: 0.05em; text-transform: uppercase; } /* ============================================================ PHOTO REEL — cinematic auto-scrolling gallery (footer of page) ============================================================ */ .reel { background: var(--fairway-deep); padding-block: clamp(3.5rem, 8vw, 6.5rem); overflow: hidden; position: relative; } .reel__head { text-align: center; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); padding-inline: var(--gutter); } .reel__head .eyebrow { justify-content: center; } .reel__head h2 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem); color: var(--ivory); } .reel__viewport { position: relative; } .reel__viewport::before, .reel__viewport::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(48px, 11vw, 180px); z-index: 2; pointer-events: none; } .reel__viewport::before { left: 0; background: linear-gradient(90deg, var(--fairway-deep), transparent); } .reel__viewport::after { right: 0; background: linear-gradient(270deg, var(--fairway-deep), transparent); } .reel__track { display: flex; gap: clamp(0.8rem, 1.5vw, 1.4rem); width: max-content; animation: reelScroll 60s linear infinite; will-change: transform; } .reel__viewport:hover .reel__track { animation-play-state: paused; } .reel__item { flex: 0 0 auto; height: clamp(300px, 44vh, 470px); border-radius: 4px; overflow: hidden; background: var(--fairway); border: 1px solid rgba(196, 163, 90, 0.18); } .reel__item img { height: 100%; width: auto; display: block; object-fit: cover; } /* left-to-right travel; track holds two identical sets for a seamless loop. This gentle, non-flashing marquee keeps running even under reduced motion (it carries no essential info) so the gallery always scrolls on every device. */ @keyframes reelScroll { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* ============================================================ THANK YOU / CONFIRMATION PAGE ============================================================ */ .thanks { min-height: 100svh; display: grid; place-items: center; text-align: center; background: radial-gradient(125% 95% at 50% -10%, var(--moss), var(--fairway-deep) 56%); padding: clamp(7rem, 16vh, 11rem) var(--gutter) clamp(4rem, 9vh, 6rem); } .thanks__inner { max-width: 46rem; } .thanks__check { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-soft); display: grid; place-items: center; margin: 0 auto 2.2rem; box-shadow: 0 0 0 8px rgba(196, 163, 90, 0.1); } .thanks__check svg { width: 40px; height: 40px; } .thanks__check path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: thanksDraw 0.7s 0.2s var(--ease) forwards; } @keyframes thanksDraw { to { stroke-dashoffset: 0; } } .thanks h1 { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.2rem); color: var(--ivory); max-width: 16ch; margin: 0 auto 1.4rem; } .thanks .lede { margin-inline: auto; color: var(--cream-dim); } .thanks__meta { margin-top: 1.7rem; font-size: 0.9rem; line-height: 1.6; color: var(--cream-faint); max-width: 48ch; margin-inline: auto; } .thanks__meta a { color: var(--gold-soft); } .thanks__ctas { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-top: 2.6rem; } @media (max-width: 480px) { .thanks__ctas { flex-direction: column; width: 100%; max-width: 22rem; margin-inline: auto; } .thanks__ctas .btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .thanks__check path { animation: none; stroke-dashoffset: 0; } }