/* ========================================================= 2nd Summit — NEW Homepage (TEMP) Homepage-only styles layered on top of your main site CSS. Assumes: ========================================================= */ body.home{ background: #ffffff; } /* --------------------------------- HERO (2-col desktop, no overlap, taller) ---------------------------------- */ body.home .home-hero{ background: var(--feature-teal); color: #fff; overflow: hidden; } body.home .home-hero__inner{ max-width: 1100px; /* max content width */ margin: 0 auto; padding: 56px 24px 66px; /* ~30% taller than before */ min-height: 360px; /* gives breathing room */ display: grid; grid-template-columns: 1fr; /* mobile default */ gap: 22px; align-items: center; } /* Left column holds the mark so text never overlaps it */ body.home .home-hero__left{ display: grid; place-items: center; } /* Mark sizing */ body.home .home-hero__mark{ width: min(320px, 30vw); height: auto; opacity: .5; filter: saturate(0) contrast(1.1); } /* Text column */ body.home .home-hero__content{ text-align: center; /* mobile default */ } body.home .home-hero__title{ font-family: var(--font-headline); /* Brother */ font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 12px; font-size: clamp(36px, 6vw, 44px); } body.home .home-hero__sub{ margin: 0 0 18px; color: rgba(255,255,255,.86); font-size: 15px; } body.home .home-hero__cta{ display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 26px; border-radius: 999px; background: #0b0b0b; color: #fff; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 24px rgba(0,0,0,.16); font-weight: 800; font-size: 13px; text-decoration: none; } body.home .home-hero__cta:hover{ transform: translateY(-1px); } body.home .home-hero__cta:active{ transform: translateY(0); } /* Desktop: true 2-column, push content right */ @media (min-width: 992px){ body.home .home-hero__inner{ grid-template-columns: 380px 1fr; /* reserve real space for mark */ gap: 36px; padding-top: 70px; /* taller on desktop */ padding-bottom: 80px; min-height: 420px; } body.home .home-hero__left{ justify-items: start; /* mark sits left within container */ } body.home .home-hero__mark{ width: 230px; margin-left: 10px; } body.home .home-hero__content{ text-align: left; /* left-justified text */ max-width: 560px; /* keeps it tight */ justify-self: start; /* ???? pushes content to the right */ } } /* Optional: tighten on very small screens */ @media (max-width: 420px){ body.home .home-hero__inner{ padding-top: 44px; padding-bottom: 54px; min-height: 0; } body.home .home-hero__mark{ width: min(240px, 30vw); } } /* --------------------------------- SECTION WRAPPER + TITLES ---------------------------------- */ body.home .home-section{ padding: 22px 0; } body.home .home-section__title{ text-align: center; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 18px; font-size: 24px; color: var(--ink-2); } /* --------------------------------- FEATURE TILES (categories) — WHITE ---------------------------------- */ body.home .home-feature-grid{ padding: 0 16px; max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 16px; } body.home .home-feature-card{ background: #fff; border: 1px solid rgba(17,24,39,.08); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; min-height: 100%; } body.home .home-feature-card__media{ width: 100%; overflow: hidden; background: #e9eef5; } body.home .home-feature-card__media img{ width: 100%; height: auto; display: block; } body.home .home-feature-card__body{ background: #fff; color: var(--ink); padding: 14px 14px 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; } body.home .home-feature-card__title{ margin: 2px 0 0; font-weight: 800; font-size: 18px; color: var(--ink-2); } body.home .home-feature-card__text{ margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); } body.home .home-feature-card .btn-2s{ margin-top: auto; align-self: center; border-radius: 999px; font-weight: 700; font-size: 13px; } /* Tablet: 2 + 1 */ @media (min-width: 600px) and (max-width: 859.98px){ body.home .home-feature-grid{ grid-template-columns: repeat(2, 1fr); gap: 18px; } body.home .home-feature-grid > .home-feature-card:nth-child(3){ grid-column: 1 / -1; } } /* Desktop: 3-up */ @media (min-width: 860px){ body.home .home-feature-grid{ grid-template-columns: repeat(3, 1fr); gap: 18px; } body.home .home-feature-grid > .home-feature-card:nth-child(3){ grid-column: auto; } } /* --------------------------------- FEATURED EVENT SECTION ---------------------------------- */ body.home .home-week{ padding: 0 16px; max-width: 960px; margin: 0 auto; } body.home .home-week-card{ border-radius: 18px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,.18); background: #000; color: #fff; } body.home .home-week-card__hosted{ font-style: italic; font-size: 14px; color: rgba(255,255,255,.75); margin: 6px 0 18px; } /* Image */ body.home .home-week-card__media{ width: 100%; aspect-ratio: 16 / 9; overflow: hidden; max-height: 380px; } body.home .home-week-card__media img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Content Panel */ body.home .home-week-card__body{ padding: 40px 24px 44px; text-align: center; background: #000; } /* Event name — Brother, NOT script */ body.home .home-week-card__name{ font-family: var(--font-headline); font-weight: 700; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.01em; margin: 0 0 12px; } /* Subheadline */ body.home .home-week-card__details{ font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.85); margin-bottom: 18px; } /* Section labels (When / Where) */ body.home .home-week-card__body h4{ font-family: var(--font-headline); font-weight: 700; font-size: 16px; margin: 26px 0 6px; letter-spacing: -.01em; } /* Date / location text */ body.home .home-week-card__body p{ margin: 0 0 6px; font-size: 15px; } /* Button */ body.home .home-week-card .btn-2s{ margin-top: 26px; padding: 10px 28px; font-size: 14px; font-weight: 800; border-radius: 999px; } /* --------------------------------- UPCOMING EXPERIENCES (list rows) ---------------------------------- */ body.home .home-upcoming{ padding: 0 16px; max-width: 960px; margin: 0 auto; display: grid; gap: 12px; } body.home .home-upcoming-item{ background: #fff; border: 1px solid rgba(17,24,39,.12); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow); display: grid; grid-template-columns: 94px 1fr auto; align-items: center; gap: 12px; padding: 10px; } body.home .home-upcoming-item__thumb{ width: 94px; height: 68px; border-radius: 12px; overflow: hidden; background: #e9eef5; border: 1px solid rgba(2, 8, 23, .06); } body.home .home-upcoming-item__thumb img{ width: 100%; height: 100%; object-fit: cover; } body.home .home-upcoming-item__main{ min-width: 0; } body.home .home-upcoming-item__title{ margin: 0 0 2px; font-weight: 900; color: var(--ink-2); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.home .home-upcoming-item__sub{ margin: 0; color: var(--muted); font-size: 12px; line-height: 1.25; } body.home .home-upcoming-item__date{ margin-top: 8px; font-size: 12px; color: var(--ink); font-weight: 800; } body.home .home-upcoming-item__link{ justify-self: end; font-size: 12px; font-weight: 900; color: var(--ink-2); padding: 8px 10px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); background: rgba(0,0,0,.02); text-decoration: underline; text-underline-offset: 3px; } body.home .home-upcoming-item__link:hover{ background: rgba(39, 162, 144, 0.10); border-color: rgba(39, 162, 144, 0.30); } @media (max-width: 420px){ body.home .home-upcoming-item{ grid-template-columns: 84px 1fr; grid-template-rows: auto auto; } body.home .home-upcoming-item__link{ grid-column: 1 / -1; justify-self: start; } } /* --------------------------------- VIEW ALL (centered action row) ---------------------------------- */ body.home .home-actions{ display: flex; justify-content: center; margin-top: 14px; } /* --------------------------------- BRAND SECTION (REWORKED) - Full-width image band - Logo overlay centered ~25% from the top - Text constrained ONLY by .container ---------------------------------- */ body.home .home-brand{ background: #fff; padding: 0; } /* Full-width media band */ body.home .home-brand__media{ position: relative; width: 100%; overflow: hidden; background: #0b0b0b; } /* Control band height here */ body.home .home-brand__image{ width: 100%; height: 420px; object-fit: cover; object-position: center bottom; display: block; opacity: .95; } /* Overlay logo */ body.home .home-brand__logo{ position: absolute; left: 50%; top: 10%; transform: translateX(-50%); width: min(220px, 60vw); height: auto; filter: drop-shadow(0 10px 26px rgba(0,0,0,.45)); opacity: .98; } /* ✅ NEW: make the container smaller ONLY in the brand section */ body.home .home-brand > .container{ max-width: 760px; } /* Content area (constrained by Bootstrap .container) */ body.home .home-brand__content{ padding: 40px 0 20px;; text-align: center; } body.home .home-brand__content .home-brand__text{ margin: 0 0 22px; color: var(--muted); line-height: 1.7; font-size: 15px; } /* Space below About block */ body.home .home-brand__content .home-actions{ margin: 28px 0 10px; } body.home .home-brand__content .home-brand__text:last-of-type{ margin-bottom: 16px; } /* Newsletter block */ body.home .home-newsletter{ margin-top: 48px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); } body.home .home-newsletter__title{ margin: 0 0 8px; font-weight: 900; letter-spacing: -0.01em; color: var(--ink-2); } body.home .home-newsletter__text{ margin: 0 auto 12px; color: var(--muted); font-size: 15px; line-height: 1.45; } /* Responsive tweaks for band height/logo */ @media (max-width: 767.98px){ body.home .home-brand__image{ height: 240px; } body.home .home-brand__logo{ width: min(180px, 70vw); } /* keep smaller container from feeling cramped on mobile */ body.home .home-brand > .container{ max-width: 100%; } } /* --------------------------------- Updates CTA (if still used elsewhere) ---------------------------------- */ body.home .home-updates{ padding: 16px 0 28px; text-align: center; } body.home .home-updates__title{ margin: 0 0 6px; font-size: 22px; font-weight: 900; color: var(--ink-2); letter-spacing: -0.01em; } body.home .home-updates__sub{ margin: 0 auto 14px; max-width: 720px; padding: 0 16px; color: var(--muted); font-size: 13px; line-height: 1.45; } body.home .home-brand__media::after{ content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,.35), rgba(0,0,0,.45) ); } /* --------------------------------- Homepage Video Banner w/ Play Button ---------------------------------- */ .home-video-banner{ width: 100%; padding: 0 16px; /* keep your spacing */ margin-top: 60px; } .home-video-banner__inner{ position: relative; max-width: 1100px; margin: 0 auto; } .home-video-banner__video{ width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 18px; } /* Play Button */ .home-video-banner__play{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; transition: background .25s ease; } /* Subtle dark overlay on hover */ .home-video-banner__play:hover{ background: rgba(0,0,0,.25); } /* Play Circle */ .home-video-banner__play-icon{ width: 72px; height: 72px; border-radius: 999px; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .2s ease; } .home-video-banner__play-icon::before{ content: ""; width: 0; height: 0; border-left: 18px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 4px; } .home-video-banner__play:hover .home-video-banner__play-icon{ transform: scale(1.08); } /* Hide play button when video is playing */ .home-video-banner__play.is-hidden{ display: none; } .home-video-banner__video{ cursor: pointer; }