/* =========================================================================== The Annual BBQ — hi-fi styles Palette: Clay & Sage (default) · Type: DM Serif Display + Manrope Alternate palettes remain swappable via the [data-palette] attribute on . =========================================================================== */ :root { /* Clay & Sage */ --cream: #fbf3e8; --paper: #fdf9f1; --deep: #2c3527; /* deepest green — hero/footer grounds */ --green: #3f4a3a; /* primary dark / text on cream */ --sage: #7a9b6e; --accent: #c25b3f; /* terracotta */ --peach: #e08a5b; --ink: #33372d; --muted: rgba(51,55,45,0.58); --hair: rgba(63,74,58,0.16); --hair-2: rgba(63,74,58,0.28); --hero-overlay: 0.46; /* hero scrim darkness */ --serif: 'DM Serif Display', Georgia, serif; --sans: 'Manrope', system-ui, -apple-system, sans-serif; --rail-w: 104px; --maxw: 1200px; --ease: cubic-bezier(.22,.61,.36,1); } [data-palette="ember"] { --cream:#f4ece1; --paper:#fbf5ec; --deep:#241712; --green:#4a3122; --sage:#9c6b3f; --accent:#b23a25; --peach:#d97b2b; --ink:#3a2a1d; --muted:rgba(58,42,29,0.58); --hair:rgba(90,50,32,0.16); --hair-2:rgba(90,50,32,0.28); } [data-palette="brick"] { --cream:#efe6d8; --paper:#f6eee0; --deep:#241a12; --green:#3a2a1c; --sage:#a98b50; --accent:#8c2f24; --peach:#bf6a32; --ink:#2e2117; --muted:rgba(46,33,23,0.58); --hair:rgba(70,48,28,0.16); --hair-2:rgba(70,48,28,0.28); } [data-palette="coal"] { --cream:#1f1815; --paper:#28201b; --deep:#140f0c; --green:#f4ece1; --sage:#c9452f; --accent:#e07a3c; --peach:#f0b24a; --ink:#f1e7da; --muted:rgba(244,236,225,0.6); --hair:rgba(244,236,225,0.14); --hair-2:rgba(244,236,225,0.26); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background .5s var(--ease), color .5s var(--ease); } .accent { color: var(--accent); } .serif { font-family: var(--serif); font-weight: 400; } /* slight letter tracking fix for DM Serif at big sizes */ .serif { letter-spacing: -0.01em; } /* ---- micro type ---------------------------------------------------------- */ .kicker { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } /* =========================================================================== Vertical year rail =========================================================================== */ .rail { position: fixed; top: 0; left: 0; bottom: 0; width: var(--rail-w); z-index: 40; display: flex; flex-direction: column; align-items: center; padding: 22px 0 20px; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(8px); border-right: 1px solid var(--hair); } .rail__brand { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-size: 20px; line-height: 1; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent); cursor: pointer; flex: 0 0 auto; } .rail__years { flex: 1 1 auto; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; width: 100%; padding: 0 6px; } .rail__year { position: relative; display: flex; align-items: center; gap: 9px; padding: 9px 6px 9px 14px; border: 0; background: none; cursor: pointer; font-family: var(--sans); color: var(--muted); text-align: left; transition: color .25s var(--ease); } .rail__year .yr { font-size: 13px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; } .rail__year .season { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .3s var(--ease), max-width .3s var(--ease); } [data-rail="season"] .rail__year .season { opacity: .8; max-width: 80px; } .rail__dot { position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(.7); width: 7px; height: 7px; border-radius: 50%; background: var(--hair-2); transition: all .3s var(--ease); } .rail__year:hover { color: var(--ink); } .rail__year[aria-current="true"] { color: var(--accent); } .rail__year[aria-current="true"] .yr { font-size: 14px; } .rail__year[aria-current="true"] .rail__dot { background: var(--accent); transform: translateY(-50%) scale(1.25); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); } .rail__foot { flex: 0 0 auto; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); cursor: pointer; padding: 6px 0; } .rail__foot:hover { color: var(--accent); } /* page content offset */ .page { margin-left: var(--rail-w); } /* =========================================================================== Hero =========================================================================== */ .hero { position: relative; height: 100vh; min-height: 620px; overflow: hidden; } .hero__media { position: absolute; inset: -2% 0; width: 100%; height: 104%; } .hero__media img { width: 100%; height: 100%; display: block; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, color-mix(in srgb, var(--deep) 30%, transparent) 0%, transparent 26%, transparent 52%, color-mix(in srgb, var(--deep) 78%, transparent) 100%); } .hero__scrim::after { content:""; position:absolute; inset:0; background: var(--deep); opacity: var(--hero-overlay); mix-blend-mode: multiply; } .hero__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 clamp(28px, 6vw, 84px) clamp(48px, 8vh, 92px); max-width: var(--maxw); } .hero__kicker { color: var(--peach); margin-bottom: 16px; } .hero__label { font-family: var(--sans); font-weight: 700; font-size: clamp(13px, 1.5vw, 19px); letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 16px; } .hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(58px, 11vw, 150px); line-height: .92; letter-spacing: -0.02em; color: #fff; margin: 0; text-shadow: 0 2px 40px rgba(0,0,0,.25); } .hero h1 em { font-style: italic; color: var(--peach); } .hero__sub { margin-top: 26px; display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,.82); font-size: 15px; font-weight: 500; } .hero__sub .line { width: 46px; height: 1px; background: rgba(255,255,255,.5); } .hero__cue { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 7px; color: rgba(255,255,255,.7); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; } .hero__cue svg { animation: bob 1.8s var(--ease) infinite; } @keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} } @media (prefers-reduced-motion: reduce){ .hero__cue svg{ animation:none; } } /* =========================================================================== Year sections =========================================================================== */ .years { padding: clamp(60px, 9vh, 130px) 0 0; } .year { position: relative; max-width: var(--maxw); padding: clamp(50px, 8vh, 110px) clamp(28px, 6vw, 84px); } .year + .year { border-top: 1px solid var(--hair); } .year__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(26px, 4vh, 48px); flex-wrap: wrap; } .year__num { font-family: var(--serif); font-weight: 400; line-height: .82; font-size: clamp(76px, 13vw, 168px); letter-spacing: -0.03em; color: var(--green); } .year__meta { text-align: right; padding-bottom: 12px; max-width: 360px; } .year__meta .season { color: var(--accent); margin-bottom: 8px; } .year__meta p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; } /* primary media row: VIDEO (wide, left) · PHOTO (tall, right) */ .year__primary { display: flex; gap: clamp(14px, 1.6vw, 22px); align-items: stretch; } .frame { position: relative; overflow: hidden; border-radius: 5px; background: color-mix(in srgb, var(--green) 9%, var(--cream)); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 20px 50px -28px rgba(40,30,20,.4); } .frame img { position: absolute; inset: -7% 0; width: 100%; height: 114%; display: block; object-fit: cover; } .frame .tag { position: absolute; z-index: 3; top: 13px; left: 14px; display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; padding: 5px 10px; border-radius: 30px; background: color-mix(in srgb, var(--deep) 55%, transparent); backdrop-filter: blur(4px); } .frame .tag svg { width: 12px; height: 12px; } .frame--video { flex: 1.8; aspect-ratio: 16 / 9; } .frame--photo { flex: 1; } /* video play affordance */ .frame__play { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 72px; height: 72px; border-radius: 50%; background: color-mix(in srgb, var(--deep) 42%, transparent); backdrop-filter: blur(3px); border: 1.5px solid rgba(255,255,255,.7); display: grid; place-items: center; color: #fff; pointer-events: none; transition: transform .3s var(--ease), background .3s var(--ease); } .frame--video:hover .frame__play { transform: translate(-50%,-50%) scale(1.08); background: color-mix(in srgb, var(--accent) 78%, transparent); } .frame__play svg { width: 24px; height: 24px; margin-left: 3px; } .thumb-play { position: absolute; z-index: 3; left: 11px; bottom: 11px; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--deep) 50%, transparent); backdrop-filter: blur(3px); border: 1px solid rgba(255,255,255,.6); display: grid; place-items: center; color: #fff; pointer-events: none; } .thumb-play svg { width: 12px; height: 12px; margin-left: 1px; } /* secondary 3-up strip */ .year__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(14px, 1.6vw, 22px); } .frame--thumb { aspect-ratio: 4 / 3; } /* =========================================================================== Stats band (deep green) =========================================================================== */ .stats { background: var(--deep); color: var(--cream); margin: clamp(40px,6vh,80px) 0; padding: clamp(46px,7vh,84px) clamp(28px,6vw,84px); } .stats__inner { max-width: var(--maxw); display: flex; flex-wrap: wrap; gap: 20px; } .stat { flex: 1 1 160px; } .stat__n { font-family: var(--serif); font-size: clamp(44px,5.5vw,76px); line-height: 1; color: var(--peach); } .stat__l { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); } /* =========================================================================== Map + RSVP =========================================================================== */ .outro { max-width: var(--maxw); padding: clamp(20px,4vh,40px) clamp(28px,6vw,84px) clamp(60px,9vh,120px); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(18px,2vw,28px); } .mapcard { position: relative; overflow: hidden; border-radius: 5px; min-height: 320px; background: var(--green); } .mapcard img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit: cover; } .mapcard__label { position: absolute; left: 18px; top: 16px; z-index: 2; } .mapcard__pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-60%); z-index: 2; color: var(--cream); } .mapcard__cap { position: absolute; left: 18px; bottom: 16px; z-index: 2; color: var(--cream); } .mapcard__cap b { font-family: var(--serif); font-weight: 400; font-size: 22px; display:block; } .mapcard__cap span { font-size: 13px; opacity: .8; } .rsvp { background: var(--paper); border: 1px solid var(--hair); border-radius: 5px; padding: clamp(28px,3vw,42px); display: flex; flex-direction: column; justify-content: center; gap: 18px; } .rsvp h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px,3.4vw,42px); line-height: 1.02; margin: 0; color: var(--green); } .rsvp p { margin: 0; color: var(--muted); font-size: 15px; } .rsvp__form { display: flex; gap: 9px; margin-top: 4px; } .rsvp__form input { flex: 1; min-width: 0; border: 1px solid var(--hair-2); background: var(--cream); border-radius: 30px; padding: 13px 18px; font-family: var(--sans); font-size: 14.5px; color: var(--ink); } .rsvp__form input::placeholder { color: var(--muted); } .rsvp__form input:focus { outline: none; border-color: var(--accent); } .rsvp__form button { border: 0; background: var(--accent); color: #fff; cursor: pointer; border-radius: 30px; padding: 13px 22px; font-family: var(--sans); font-weight: 700; font-size: 14.5px; transition: transform .15s var(--ease), filter .2s var(--ease); } .rsvp__form button:hover { filter: brightness(1.06); transform: translateY(-1px); } .rsvp__note { font-size: 12.5px; color: var(--muted); } /* =========================================================================== Footer sponsor wall =========================================================================== */ .footer { background: var(--deep); color: var(--cream); padding: clamp(54px,8vh,96px) clamp(28px,6vw,84px) 40px; } .footer__inner { max-width: var(--maxw); } .footer__head { display: flex; align-items: center; gap: 18px; margin-bottom: 36px; } .footer__head .ln { flex: 1; height: 1px; background: rgba(255,255,255,.16); } .footer__head .eyebrow { color: rgba(255,255,255,.6); white-space: nowrap; } .sponsors { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .sponsor { aspect-ratio: 5 / 2; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; display: grid; place-items: center; color: rgba(255,255,255,.42); transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease); } .sponsor:hover { border-color: var(--peach); color: var(--peach); background: rgba(255,255,255,.03); } .sponsor svg { width: 30px; height: 30px; } .footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px; color: rgba(255,255,255,.55); } .footer__bottom .serif { color: var(--cream); font-size: 17px; } .totop { background:none; border:0; color: rgba(255,255,255,.55); cursor:pointer; font: inherit; display:flex; align-items:center; gap:7px; } .totop:hover { color: var(--peach); } /* =========================================================================== Reveal animations =========================================================================== */ [data-reveal-el] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform; } [data-reveal-el].in { opacity: 1; transform: none; } [data-reveal="off"] [data-reveal-el] { opacity: 1 !important; transform: none !important; transition: none !important; } @media (prefers-reduced-motion: reduce) { [data-reveal-el] { opacity: 1 !important; transform: none !important; } } /* =========================================================================== Responsive =========================================================================== */ @media (max-width: 940px) { .year__primary { flex-direction: column; } .frame--video, .frame--photo { flex: none; width: 100%; } .frame--photo { aspect-ratio: 16/10; } .outro { grid-template-columns: 1fr; } .sponsors { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 720px) { :root { --rail-w: 0px; } .rail { flex-direction: row; inset: auto 0 0 0; top: auto; height: 60px; width: 100%; border-right: 0; border-top: 1px solid var(--hair); padding: 0 14px; } .rail__brand { width: 32px; height: 32px; font-size: 16px; } .rail__years { flex-direction: row; padding: 0 8px; gap: 0; overflow-x: auto; } .rail__year { padding: 8px 10px; } .rail__dot { display: none; } .rail__foot { display: none; } .page { margin-left: 0; padding-bottom: 60px; } .year__strip { grid-template-columns: repeat(2, 1fr); } .sponsors { grid-template-columns: repeat(3, 1fr); } .year__meta { text-align: left; } }