/* ========================================================================== UP Parivaar Dallas — main stylesheet Plain CSS (no Tailwind). All styling lives here as semantic classes. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Design tokens -------------------------------------------------------------------------- */ :root { /* Brand */ --brand-orange: #f45700; --brand-light: #ff8001; --brand-gold: #ffc107; --brand-navy: #150d8e; --brand-ink: #0b1b33; --brand-cream: #fff7f3; --brand-cream2: #fdf1e7; --brand-brown: #2a1608; --brand-brown-deep: #1c0e03; /* Ink (neutral text) */ --ink-900: #141414; --ink-800: #232323; --ink-500: #626669; --ink-400: #8a8f94; /* Fonts (the actual families are injected by next/font on ) */ --font-display: "Playfair Display", serif; --font-serif: "Gloock", serif; --font-sans: "Parkinsans", system-ui, sans-serif; /* Shadows */ --shadow-soft: 0 12px 40px -20px rgba(0, 0, 0, 0.18); --shadow-card: 0 20px 60px -25px rgba(31, 22, 8, 0.25); /* Layout */ --max-container: 1370px; } /* -------------------------------------------------------------------------- 2. Reset (replaces the Tailwind preflight the project used to rely on) -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: #ffffff; color: var(--ink-900); font-family: var(--font-sans); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* -------------------------------------------------------------------------- 2b. Scroll-reveal animation (applied site-wide by ScrollReveal.tsx) -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- 3. Layout helpers -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--max-container); margin-inline: auto; padding-inline: 20px; } @media (min-width: 640px) { .container { padding-inline: 32px; } } .no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } /* Image helpers for next/image fill mode */ .img-cover { object-fit: cover; } .img-cover-top { object-fit: cover; object-position: top; } /* Soft peach glow header used across all inner pages (from Figma: about_1_) */ .page-glow { background-color: #ffffff; background-image: url("/img/about_1_.jpg"); background-repeat: no-repeat; background-position: top center; background-size: 100% 660px; } /* -------------------------------------------------------------------------- 4. Typography helpers -------------------------------------------------------------------------- */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-800); } .eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 9999px; background: var(--brand-orange); } /* Uppercase eyebrow used on dark banners (dot is a literal character) */ .eyebrow-light { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em; color: var(--brand-light); } /* Base for the big Playfair display headings */ .display-title { font-family: var(--font-display); font-weight: 400; line-height: 1.05; color: #693100; } /* Responsive size pairs used by display headings (base / >=640px) */ .ts-30-36 { font-size: 30px; } .ts-30-38 { font-size: 30px; } .ts-32-40 { font-size: 32px; } .ts-34-42 { font-size: 34px; } .ts-34-44 { font-size: 34px; } .ts-34-46 { font-size: 34px; } .ts-34-48 { font-size: 34px; } .ts-36-40 { font-size: 36px; } .ts-36-48 { font-size: 36px; } @media (min-width: 640px) { .ts-36-48 { font-size: 48px; } } @media (min-width: 640px) { .ts-30-36 { font-size: 36px; } .ts-30-38 { font-size: 38px; } .ts-32-40 { font-size: 40px; } .ts-34-42 { font-size: 42px; } .ts-34-44 { font-size: 44px; } .ts-34-46 { font-size: 46px; } .ts-34-48 { font-size: 48px; } .ts-36-40 { font-size: 40px; } } /* -------------------------------------------------------------------------- 5. Buttons, links, chips (reusable components) -------------------------------------------------------------------------- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; background: linear-gradient(to right, var(--brand-orange), var(--brand-light)); padding: 14px 28px; font-size: 14px; font-weight: 600; color: #ffffff; box-shadow: 0 12px 30px -10px rgba(244, 87, 0, 0.7); transition: box-shadow 0.25s ease, transform 0.25s ease; } .btn-primary:hover { box-shadow: 0 16px 40px -10px rgba(244, 87, 0, 0.85); transform: translateY(-2px); } .btn-primary--lg { font-size: 16px; } .btn-primary--sm { padding: 10px 24px; } .btn-primary--compact { padding: 12px 24px; } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9999px; border: 1px solid rgba(0, 0, 0, 0.1); background: #ffffff; padding: 14px 28px; font-size: 14px; font-weight: 600; color: var(--ink-900); transition: border-color 0.25s ease, transform 0.25s ease; } .btn-ghost:hover { border-color: rgba(244, 87, 0, 0.4); transform: translateY(-2px); } .btn-ghost:disabled { opacity: 0.4; } .link-arrow { width: 100%; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--brand-orange); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(244, 87, 0, 0.4); } .link-arrow:hover { text-decoration-color: var(--brand-orange); } .link-arrow--spaced { margin-top: 12px; } .link-arrow--spaced-lg { margin-top: 16px; } .chip { display: inline-flex; align-items: center; padding: 12px 20px; font-size: 14px; color: var(--ink-800); transition: border-color 0.2s ease; background: #FFFFFF; border: 1px solid #EFEFEF; box-shadow: 5px 20px 65px rgba(0, 0, 0, 0.06); border-radius: 15px; } .chip:hover { border-color: rgba(244, 87, 0, 0.4); } .chip--active { border-color: rgba(244, 87, 0, 0.6); background: rgba(244, 87, 0, 0.05); color: var(--brand-orange); background: linear-gradient(90deg, #FFFDFB 0%, #FFEEE4 100%); border: 1px solid #F45700; box-shadow: 5px 20px 65px rgba(0, 0, 0, 0.06); border-radius: 16px; } .chip--shrink0 { flex-shrink: 0; } /* -------------------------------------------------------------------------- 6. Cards & shared media wrappers -------------------------------------------------------------------------- */ .card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px; box-shadow: var(--shadow-soft); } .card--rounded-lg { border-radius: 24px; } .card--elevated { box-shadow: var(--shadow-card); } /* -------------------------------------------------------------------------- 7. Navbar -------------------------------------------------------------------------- */ .nav { position: fixed; inset-inline: 0; top: 0; z-index: 50; pointer-events: none; } .nav__inner { padding-top: 16px; } .nav__bar { pointer-events: auto; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: 9999px; border: 1px solid rgba(0, 0, 0, 0.06); background: rgba(255, 255, 255, 0.9); padding: 10px 16px; backdrop-filter: blur(12px); box-shadow: 0 8px 30px -18px rgba(0, 0, 0, 0.25); transition: box-shadow 0.25s ease; } @media (min-width: 640px) { .nav__bar { padding: 10px 20px; } } .nav__bar--scrolled { box-shadow: var(--shadow-soft); } .nav__brand { flex-shrink: 0; } .nav__links { display: none; } @media (min-width: 1024px) { .nav__links { display: flex; align-items: center; gap: 28px; } } .nav__link { font-size: 15px; color: var(--ink-800); transition: color 0.2s ease; } .nav__link:hover { color: var(--brand-orange); } .nav__link--active { font-weight: 600; color: var(--brand-orange); } .nav__actions { display: flex; align-items: center; gap: 8px; } .nav__login { display: none; } @media (min-width: 640px) { .nav__login { display: inline-flex; } } .nav__toggle { display: grid; place-items: center; height: 40px; width: 40px; border-radius: 9999px; border: 1px solid rgba(0, 0, 0, 0.1); } @media (min-width: 1024px) { .nav__toggle { display: none; } } .nav__toggle-box { position: relative; display: block; height: 12px; width: 16px; } .nav__bar-line { position: absolute; left: 0; height: 2px; width: 16px; background: var(--ink-900); } .nav__bar-line--1 { top: 0; transition: transform 0.2s ease; } .nav__bar-line--2 { top: 6px; transition: opacity 0.2s ease; } .nav__bar-line--3 { top: 12px; transition: transform 0.2s ease; } .nav__toggle-box.is-open .nav__bar-line--1 { transform: translateY(6px) rotate(45deg); } .nav__toggle-box.is-open .nav__bar-line--2 { opacity: 0; } .nav__toggle-box.is-open .nav__bar-line--3 { transform: translateY(-6px) rotate(-45deg); } .nav__mobile { pointer-events: auto; margin-inline: auto; margin-top: 8px; border-radius: 24px; border: 1px solid rgba(0, 0, 0, 0.06); background: #ffffff; padding: 12px; box-shadow: var(--shadow-soft); } @media (min-width: 1024px) { .nav__mobile { display: none; } } .nav__mobile-list { display: flex; flex-direction: column; } .nav__mobile-link { display: block; border-radius: 12px; padding: 12px 16px; font-size: 15px; color: var(--ink-800); } .nav__mobile-link--active { background: rgba(244, 87, 0, 0.05); font-weight: 600; color: var(--brand-orange); } .nav__mobile-cta { padding: 8px; } .nav__mobile-login { width: 100%; } /* -------------------------------------------------------------------------- 8. Logo -------------------------------------------------------------------------- */ .logo { display: inline-flex; align-items: center; gap: 10px; } .logo__text { line-height: 1; } .logo__title { display: block; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; font-family: var(--font-sans); } .logo__sub { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.32em; } .logo__title--dark { color: #141414; } .logo__title--light { color: #ffffff; } .logo__sub--dark { color: #8a8f94; } .logo__sub--light { color: rgba(255, 255, 255, 0.7); } /* -------------------------------------------------------------------------- 9. WhatsApp floating button -------------------------------------------------------------------------- */ .fab { position: fixed; bottom: 24px; right: 24px; z-index: 40; display: grid; place-items: center; height: 56px; width: 56px; border-radius: 9999px; background: #25d366; color: #ffffff; box-shadow: 0 14px 36px -8px rgba(37, 211, 102, 0.6); transition: transform 0.2s ease; } .fab:hover { transform: scale(1.05); } /* -------------------------------------------------------------------------- 10. Footer -------------------------------------------------------------------------- */ .footer { background: var(--brand-brown-deep); color: rgba(255, 255, 255, 0.7); } .footer__grid { display: grid; gap: 40px; padding-block: 64px; } @media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } } .footer__brand { max-width: 20rem; } .footer__about { margin-top: 24px; font-size: 14px; line-height: 1.625; color: rgba(255, 255, 255, 0.6); } .footer__disclaimer { margin-top: 24px; font-size: 12px; line-height: 1.625; color: rgba(255, 255, 255, 0.35); } .footer__heading { font-size: 13px; font-weight: 600; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.9); } .footer__list { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; } .footer__link { font-size: 14px; color: rgba(255, 255, 255, 0.6); transition: color 0.2s ease; } .footer__link:hover { color: var(--brand-light); } .footer__contact { margin-top: 20px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; color: rgba(255, 255, 255, 0.6); } .footer__contact-item { display: flex; gap: 12px; } .footer__contact-item--center { align-items: center; } .footer__icon { color: var(--brand-orange); } .footer__contact-web { padding-left: 28px; color: rgba(255, 255, 255, 0.45); } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer__bottom-inner { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; } @media (min-width: 640px) { .footer__bottom-inner { flex-direction: row; } } .footer__copy { font-size: 12px; color: rgba(255, 255, 255, 0.4); } .footer__socials { display: flex; align-items: center; gap: 8px; } .footer__social { display: grid; place-items: center; height: 28px; width: 28px; border-radius: 9999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); transition: background 0.2s ease, color 0.2s ease; } .footer__social:hover { background: rgba(255, 255, 255, 0.2); color: #ffffff; } /* -------------------------------------------------------------------------- 11. Section heading (ui.tsx) -------------------------------------------------------------------------- */ .section-head--center { margin-inline: auto; max-width: 42rem; text-align: center; } .section-head--split { display: flex; flex-direction: column; gap: 24px; } @media (min-width: 768px) { .section-head--split { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .section-head__col { max-width: 28rem; } .section-head__title { margin-top: 16px; } .section-head__aside { display: flex; max-width: 31rem; gap: 12px; } @media (min-width: 768px) { .section-head__aside { align-items: flex-end; text-align: right; } } .section-head__desc { font-size: 15px; line-height: 1.625; color: var(--ink-500); } .section-head__desc--center { margin-inline: auto; margin-top: 16px; max-width: 36rem; } .section-head__desc--left { margin-top: 16px; max-width: 28rem; } /* Star rating */ .stars { display: flex; gap: 4px; } /* -------------------------------------------------------------------------- 12. Event cards (EventCard.tsx) -------------------------------------------------------------------------- */ .evc { overflow: hidden; border-radius: 28px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; padding: 12px; box-shadow: var(--shadow-card); } .evc__grid { display: grid; gap: 20px; } @media (min-width: 768px) { .evc__grid { grid-template-columns: 280px 1fr; } } .evc__media { position: relative; height: 224px; overflow: hidden; border-radius: 20px; } @media (min-width: 768px) { .evc__media { height: 100%; } } .evc__body { display: flex; flex-direction: column; padding: 8px; } @media (min-width: 768px) { .evc__body { padding: 16px; } } .evc__head { display: flex; flex-wrap: wrap; align-items: center !important; justify-content: space-between; gap: 12px; border-bottom: 1px solid #80808075; padding: 0 0 20px; } .evc__title { font-family: var(--font-display); font-size: 26px; line-height: 1.25; color: var(--ink-900); } .evc__meta { text-align: right; align-items: center; display: flex; width: 30%; justify-content: inherit; } .evc__date { font-size: 16px; color: var(--ink-500); } .evc__step-label { margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-400); } .evc__step { font-size: 20px; font-weight: 600; color: var(--ink-900); } .evc__cols { display: grid; gap: 16px; } @media (min-width: 768px) { .evc__cols { grid-template-columns: 1fr 1fr; } } .evc__where { font-size: 22px; font-weight: 400; margin-top: 16px; color: var(--ink-900); } .evc__desc { margin-top: 21px; margin-bottom: 26px; font-size: 13px; line-height: 1.625; color: var(--ink-500); } .evc__schedule { padding-left: 0; margin-top: 16px; } @media (min-width: 768px) { .evc__schedule { border-left: 1px solid rgba(0, 0, 0, 0.05); padding-left: 20px; } } .evc__schedule-list { display: flex; flex-direction: column; gap: 8px; } .evc__schedule-row { display: flex; justify-content: space-between; font-size: 13px; } .evc__schedule-label { color: var(--ink-800); font-size: 16px; } .evc__schedule-time { font-size: 16px; color: var(--ink-400); } .evc__thumb { position: relative; margin-top: 22px; margin-left: auto; height: 74px; width: 116px; overflow: hidden; border-radius: 12px; } .mec { border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; padding: 23px; box-shadow: var(--shadow-soft); transition: transform 0.2s ease; } .mec:hover { transform: translateY(-4px); } .mec__head { display: flex; align-items: flex-start; justify-content: space-between; } .mec__tag { border-radius: 9999px; background: rgba(0, 0, 0, 0.04); padding: 4px 12px; font-size: 12px; color: var(--ink-800); } .mec__thumb { position: relative; height: 64px; width: 96px; overflow: hidden; border-radius: 12px; } .mec__meta { margin-top: 16px; display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--ink-500); } .mec__meta-item { display: inline-flex; align-items: center; gap: 4px; } .mec__icon { color: var(--brand-orange); } .mec__title { margin-top: 12px; font-family: var(--font-display); font-size: 22px; line-height: 1.25; color: var(--ink-900); } .mec__desc { margin-top: 13px; margin-bottom: 20px; font-size: 13px; line-height: 1.625; color: var(--ink-500); } /* -------------------------------------------------------------------------- 13. FAQ (Faq.tsx) -------------------------------------------------------------------------- */ .faq { display: flex; flex-direction: column; gap: 12px; } .faq__item { border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); background: #ffffff; transition: border-color 0.2s ease; } .faq__item--open { border-color: rgba(244, 87, 0, 0.3); } .faq__trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; text-align: left; } .faq__question { font-size: 15px; font-weight: 600; color: var(--ink-900); } .faq__icon { display: grid; height: 24px; width: 24px; flex-shrink: 0; place-items: center; color: var(--ink-500); } .faq__panel { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.3s ease; } .faq__panel--open { grid-template-rows: 1fr; } .faq__panel-inner { overflow: hidden; } .faq__answer { padding: 0 20px 20px; font-size: 14px; line-height: 1.625; color: var(--ink-500); } /* -------------------------------------------------------------------------- 14. Tabs (Tabs.tsx) -------------------------------------------------------------------------- */ .tabs__list { margin-inline: auto; display: flex; gap: 10px; width: -moz-fit-content; width: fit-content; border-radius: 16px; box-shadow: var(--shadow-soft); } .tabs__tab { border-radius: 10px 10px 0px 0px; padding: 13px 32px; font-size: 16px; font-weight: 500; color: var(--ink-800); transition: color 0.2s ease, background 0.2s ease; background: #FFFFFF; border: 1px solid #EDD7CA; border-radius: 14px 14px 0px 0px; } .tabs__tab:hover { color: var(--brand-orange); } .tabs__tab--active { background: var(--brand-orange); color: #ffffff; } .tabs__panel { } /* -------------------------------------------------------------------------- 15. Carousel (Carousel.tsx) -------------------------------------------------------------------------- */ .carousel__head { margin-bottom: 24px; display: flex; align-items: flex-end; justify-content: space-between; } .carousel__title { font-family: var(--font-display); font-size: 26px; color: #693101 } .carousel__subtitle { margin-top: 4px; font-size: 14px; color: var(--ink-500); } .carousel__controls { display: flex; gap: 12px; } .carousel__btn { display: grid; height: 40px; width: 40px; place-items: center; border-radius: 9999px; border: 1px solid rgba(0, 0, 0, 0.1); color: var(--ink-500); transition: border-color 0.2s ease, color 0.2s ease; } .carousel__btn:hover { border-color: rgba(244, 87, 0, 0.5); color: var(--brand-orange); } .carousel__track { display: flex; scroll-snap-type: x mandatory; gap: 20px; overflow-x: auto; padding-bottom: 8px; } /* Person card (About page carousels) */ .person-card { width: 280px; flex-shrink: 0; scroll-snap-align: start; overflow: hidden; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; box-shadow: var(--shadow-soft); } .person-card__media { position: relative; height: 304px; background: #f5f5f5; } .person-card__img { padding-top: 30px; object-fit: contain; object-position: center; } .person-card__body { padding: 16px; } .person-card__name { FONT-SIZE: 16px; font-weight: 600; color: var(--ink-900); } .person-card__role { font-size: 12px; color: var(--ink-500); } /* -------------------------------------------------------------------------- 16. Membership form (MembershipForm.tsx) -------------------------------------------------------------------------- */ .form { margin-inline: auto; max-width: 48rem; } .form__card { overflow: hidden; border-radius: 24px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; box-shadow: var(--shadow-card); } .form__steps { display: flex; gap: 24px; overflow-x: auto; border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 20px 24px; } .form__step { flex-shrink: 0; text-align: left; } .form__step-num { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-400); } .form__step-num--active { color: var(--brand-orange); } .form__step-label { font-size: 14px; font-weight: 500; color: var(--ink-800); } .form__step-label--active { color: var(--brand-orange); } .form__step-underline { margin-top: 4px; display: block; height: 2px; width: 100%; background: var(--brand-orange); } .form__fields-wrap { padding: 24px; } @media (min-width: 640px) { .form__fields-wrap { padding: 32px; } } .form__section-title { font-family: var(--font-display); font-size: 22px; color: var(--ink-900); } .form__section-title span { color: var(--ink-500); } .form__fields { margin-top: 24px; display: grid; gap: 20px; } @media (min-width: 640px) { .form__fields { grid-template-columns: 1fr 1fr; } } .form__field--full { grid-column: 1 / -1; } .form__label { font-size: 14px; font-weight: 500; color: var(--ink-900); } .form__input, .form__select { margin-top: 8px; width: 100%; border-radius: 9999px; border: 1px solid rgba(0, 0, 0, 0.1); background: #ffffff; padding: 12px 16px; font-size: 14px; color: var(--ink-800); outline: none; } .form__input:focus, .form__select:focus { border-color: rgba(244, 87, 0, 0.5); } .form__actions { margin-top: 24px; display: flex; justify-content: space-between; } /* -------------------------------------------------------------------------- 17. Generic section backgrounds -------------------------------------------------------------------------- */ .section-white { background: #ffffff; } .section-cream { background: #FFFBF5; } /* Inner-page hero (page-glow) padding */ .page-hero { padding-top: 144px; padding-bottom: 56px; } .page-hero--tight { padding-top: 154px; padding-bottom: 48px; } .hero-center { text-align: center; } /* Common overlay used on full-bleed image banners */ .banner { position: relative; width: 100%; overflow: hidden; } .banner__overlay { position: absolute; inset: 0; } .home-culture__overlay { background: rgba(0, 0, 0, 0.55); } .home-cta__overlay { background: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25)); } .gallery-cta__overlay { background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)); } /* -------------------------------------------------------------------------- 18. Home page -------------------------------------------------------------------------- */ .home-hero { position: relative; min-height: 760px; width: 100%; overflow: hidden; } .home-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) ); } .home-hero__inner { position: relative; display: flex; min-height: 760px; flex-direction: column; align-items: center; justify-content: center; padding-top: 112px; text-align: center; } .home-hero__eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.9); } .home-hero__title { font-family: var(--font-display); font-size: 42px; line-height: 1.1; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } @media (min-width: 640px) { .home-hero__title { font-size: 64px; } } .home-hero__break { display: none; } @media (min-width: 640px) { .home-hero__break { display: block; } } .home-hero__cta { margin-top: 256px; } @media (min-width: 640px) { .home-hero__cta { margin-top: 288px; } } .home-about { display: grid; gap: 40px; padding-block: 80px; } @media (min-width: 768px) { .home-about { grid-template-columns: 280px 1fr; gap: 64px; } } .home-about__badge { margin-top: 56px; display: grid; } .home-about__badge svg { color: rgba(244, 87, 0, 0.5); } .home-about__badge-img { width: 70px; height: auto; } .home-about__stat { margin-top: 49px; font-family: var(--font-display); font-size: 92px; line-height: 1; color: var(--ink-900); } .home-about__stat-label { margin-top: 11px; font-size: 14px; color: black; width: 60%; } .home-about__lead { max-width: 980px; font-size: 28px; line-height: 1.5; color: var(--ink-900); } .home-about__lead-accent { color: #803E06; } .home-about__row { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; } @media (min-width: 640px) { .home-about__row { flex-direction: row; align-items: end; } } .home-about__photo { position: relative; height: 236px; width: 100%; max-width: 23rem; overflow: hidden; border-radius: 12px; } .home-about__note { max-width: 20rem; } .home-about__note-title { font-family: var(--font-serif); font-size: 21px; color: var(--ink-900); } .home-about__note-text { margin-top: 8px; font-size: 15px; line-height: 1.625; color: var(--ink-500); } .home-about__more { margin-top: 16px; } .home-journey { display: grid; gap: 48px; padding-block: 96px; } @media (min-width: 1024px) { .home-journey { grid-template-columns: 0.9fr 1.1fr; } } .home-journey__title { margin-top: 16px; } .home-journey__lead { margin-top: 20px; max-width: 24rem; font-size: 14px; line-height: 1.625; color: var(--ink-500); } .home-journey__media { display: flex; flex-direction: column; } .home-journey__photo { position: relative; margin-top: 40px; height: 550px; width: 100%; max-width: 20rem; overflow: hidden; border-radius: 16px; } /* On desktop the media column stretches to the timeline height, so push the static photo to the bottom (end) of the column. */ @media (min-width: 1024px) { .home-journey__photo { margin-top: auto; } } /* Timeline item = image div (outside the step) + the step card */ .home-journey__item { position: relative; } /* Per-step image lives in its own div, above the step; collapsed until active */ .home-journey__step-media { position: relative; height: 0; margin-bottom: 0; opacity: 0; overflow: hidden; border-radius: 12px; transition: height 0.45s ease, opacity 0.45s ease, margin-bottom 0.45s ease; } .home-journey__item--active .home-journey__step-media { height: 250px; margin-bottom: -24px; opacity: 1; } .home-journey__timeline { position: relative; display: flex; flex-direction: column; gap: 16px; padding-left: 40px; } .home-journey__line { position: absolute; left: 7px; top: 0; height: 100%; width: 1px; background: rgba(0, 0, 0, 0.03); border: 1px dashed rgba(0, 0, 0, 0.1); border-radius: 2px; } .home-journey__step { position: relative; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.06); background: #ffffff; padding: 20px; box-shadow: var(--shadow-soft); opacity: 0.55; transition: opacity 0.35s ease, border-color 0.35s ease, transform 0.35s ease; } .home-journey__item--active .home-journey__step { opacity: 1; } .home-journey__num { rotate: -90deg; position: absolute; left: -62px; top: 11px; display: grid; height: 28px; width: 58px; place-items: center; border-radius: 9999px; background: var(--brand-orange); font-size: 13px; font-weight: 600; color: #ffffff; } .home-journey__step-title { font-weight: 600; color: var(--ink-900); } .home-journey__step-desc { margin-top: 6px; font-size: 13px; line-height: 1.625; color: var(--ink-500); } .home-upcoming { padding-bottom: 32px; } .home-upcoming__list { margin-top: 40px; display: flex; flex-direction: column; gap: 24px; } .home-journey-banner { position: relative; margin-top: 64px; min-height: 560px; width: 100%; overflow: hidden; } .home-journey-banner__overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2) ); } .home-journey-banner__inner { position: relative; display: flex; min-height: 560px; align-items: center; } .home-journey-banner__card { max-width: 32rem; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.15); padding: 32px; } .home-journey-banner__title { margin-top: 16px; font-family: var(--font-display); font-size: 40px; line-height: 1.25; color: #ffffff; } @media (min-width: 640px) { .home-journey-banner__title { font-size: 52px; } } .home-journey-banner__sub { margin-top: 12px; color: rgba(255, 255, 255, 0.8); } .home-journey-banner__tabs { position: absolute; inset-inline: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); } @media (min-width: 640px) { .home-journey-banner__tabs { grid-template-columns: repeat(6, 1fr); } } .home-journey-banner__tab { border-right: 1px solid rgba(255, 255, 255, 0.15); padding: 16px 20px; } .home-journey-banner__tab--active { background: var(--brand-orange); } .home-journey-banner__tab-title { font-size: 14px; font-weight: 600; color: #ffffff; } .home-journey-banner__tab-sub { font-size: 11px; color: rgba(255, 255, 255, 0.7); } /* Full-screen pinned scroll banner (Our Journey) */ .jbanner { position: relative; height: 400vh; } .jbanner__stage { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; } .jbanner__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease; } .jbanner__slide--active { opacity: 1; } .jbanner__overlay { position: absolute; inset: 0; background: linear-gradient( to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2) ); } .jbanner__inner { position: relative; z-index: 2; /* display: flex; */ height: 87%; align-items: center; max-width: 96%; margin-top: 20px; } .jbanner__content { max-width: 100%; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.15); padding: 32px; padding-top: 150px; animation: jbannerFade 0.7s ease; width: 100%; height: 100%; } @keyframes jbannerFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .jbanner__title { margin-top: 16px; font-family: var(--font-display); font-size: 40px; line-height: 1.15; color: #ffffff; } @media (min-width: 640px) { .jbanner__title { font-size: 56px; } } .jbanner__sub { margin-top: 12px; font-size: 16px; color: rgba(255, 255, 255, 0.8); } .jbanner__tabs { position: absolute; inset-inline: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); } @media (min-width: 640px) { .jbanner__tabs { grid-template-columns: repeat(6, 1fr); } } .jbanner__tab { border-right: 1px solid rgba(255, 255, 255, 0.15); padding: 16px 20px; transition: background 0.4s ease; } .jbanner__tab--active { background: var(--brand-orange); } .jbanner__tab-title { font-size: 18px; font-weight: 600; color: #ffffff; } .jbanner__tab-sub { font-size: 15px; color: rgba(255, 255, 255, 0.7); } .home-gallery { padding-block: 96px; } .home-gallery__grid { margin-top: 40px; display: grid; gap: 16px; } @media (min-width: 768px) { .home-gallery__grid { grid-template-columns: repeat(3, 1fr); } } .home-gallery__col { display: grid; gap: 16px; } .home-gallery__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .home-gallery__tile-lg { position: relative; height: 380px; overflow: hidden; border-radius: 16px; } .home-gallery__tile-md { position: relative; height: 180px; overflow: hidden; border-radius: 16px; } .home-culture { padding-block: 96px; } .home-culture__card { margin-inline: auto; border-radius: 15px; background: #ffffff; padding: 32px; box-shadow: var(--shadow-card); } @media (min-width: 640px) { .home-culture__card { padding: 30px 20px 0 20px; } } .home-culture__title { text-align: center; font-family: var(--font-display); font-size: 30px; line-height: 1.25; color: #693100; } @media (min-width: 640px) { .home-culture__title { font-size: 38px; } } .home-culture__grid { margin-top: 40px; display: grid; gap: 32px; border-top: 1px solid #e8e8e8; } @media (min-width: 640px) { .home-culture__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .home-culture__grid { grid-template-columns: repeat(4, 1fr); } .home-culture__pillar { padding-inline: 20px; border-left: 1px solid rgba(0, 0, 0, 0.05); padding-top: 30px; padding-bottom: 40px; } .home-culture__pillar:first-child { border-left: 0; } } .home-culture__pillar-icon { display: grid; height: 44px; width: 44px; place-items: center; border-radius: 12px; background: rgba(244, 87, 0, 0.1); color: var(--brand-orange); } .home-culture__pillar-title { margin-top: 16px; font-weight: 600; color: var(--ink-900); } .home-culture__pillar-desc { margin-top: 8px; font-size: 13px; line-height: 1.625; color: var(--ink-500); } .home-testimonials { padding-block: 96px; } .home-testimonials__grid { margin-top: 48px; display: grid; gap: 24px; } @media (min-width: 768px) { .home-testimonials__grid { grid-template-columns: repeat(3, 1fr); } } .home-testimonials__col { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 768px) { } .testimonial-person { display: flex; align-items: center; gap: 12px; padding: 16px; background: #FFFFFF; border: 1px solid #EFEFEF; box-shadow: 5px 20px 65px rgba(0, 0, 0, 0.06); border-radius: 20px; } .testimonial-person__avatar { position: relative; height: 44px; width: 44px; overflow: hidden; border-radius: 9999px; } .testimonial-person__name { font-weight: 600; color: var(--ink-900); } .testimonial-person__role { font-size: 12px; color: var(--ink-500); } .testimonial-quote { padding: 24px; background: #FFFFFF; border: 1px solid #EFEFEF; box-shadow: 5px 20px 65px rgba(0, 0, 0, 0.06); border-radius: 15px; } .testimonial-quote__mark { display: block; width: 40px; height: auto; margin: 0 0 50px; } .testimonial-quote__text { margin-top: 16px; font-size: 14px; line-height: 1.625; color: var(--ink-800); margin-bottom: 20px; } .home-faq { padding-block: 96px; display: grid; gap: 48px; } @media (min-width: 1024px) { .home-faq { grid-template-columns: 1fr 0.8fr; } } .home-faq__title { margin-top: 16px; } .home-faq__lead { margin-top: 16px; max-width: 28rem; font-size: 14px; line-height: 1.625; color: var(--ink-500); } .home-faq__list { margin-top: 32px; } .home-faq__art { display: none; } @media (min-width: 1024px) { .home-faq__art { display: flex; align-items: center; justify-content: center; } } .home-cta { padding-block: 112px; } .home-cta__box { max-width: 46rem; background: rgb(0 0 0 / 46%); border-radius: 20px; padding: 20px 40px; } .home-cta__title { margin-top: 16px; font-family: var(--font-display); font-size: 34px; line-height: 1.25; color: #ffffff; } @media (min-width: 640px) { .home-cta__title { font-size: 30px; } } .home-cta__text { margin-top: 16px; max-width: 28rem; color: rgba(255, 255, 255, 0.8); } .home-cta__actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; } /* Shared: banner content padding */ .banner__content { position: relative; } .banner__content--home-journey { padding-block: 96px; } .banner__content--pad-24 { padding-block: 96px; } /* -------------------------------------------------------------------------- 19. About page -------------------------------------------------------------------------- */ .about-hero__title { margin-inline: auto; margin-top: 16px; max-width: 48rem; } .about-hero__lead { margin-inline: auto; margin-top: 16px; max-width: 36rem; font-size: 15px; line-height: 1.625; color: var(--ink-500); } .about-hero__marquee { margin-top: 48px; display: flex; align-items: end; gap: 20px; overflow-x: auto; padding-inline: 20px; } .about-hero__marquee-item { position: relative; height: 248px; width: 288px; flex-shrink: 0; overflow: hidden; border-radius: 16px; } .about-hero__marquee-item--wide { width: 380px; height: 200px; } .about-hero__marquee-item--narrow { width: 200px; } .about-founders { padding-block: 80px; } .about-founders__grid { margin-top: 48px; display: grid; border-radius: 20px; background: #FFFFFF; border: 1px solid #EFEFEF; box-shadow: 5px 20px 65px rgba(0, 0, 0, 0.06); } @media (min-width: 768px) { .about-founders__grid { grid-template-columns: repeat(3, 1fr); } } .founder-card { overflow: hidden; border-radius: -6px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; } .founder-card__media { position: relative; height: 420px; background: #f5f5f5; border-radius: 10px 0px 0px 0px; width: 100% } .founder-card__media img { padding: 10px 70px; } .founder-card__body { display: flex; align-items: center; justify-content: space-between; padding: 24px; } .founder-card__name { font-size: 22px; font-weight: 600; color: var(--ink-900); margin: 0 0 2px; } .founder-card__role { font-size: 14px; color: var(--ink-500); } .founder-card__email { font-size: 12px; color: var(--ink-400); } .founder-card--logo { display: grid; place-items: center; padding: 32px; } .about-founders__carousels { margin-top: 64px; display: flex; flex-direction: column; gap: 56px; } .about-mission { padding-block: 80px; } .about-mission__panel { background: #FFFFFF; border: 1px solid #EDD7CA; border-radius: 15px; } @media (min-width: 640px) { .about-mission__panel { padding: 32px; } } .about-mission__grid { display: grid; gap: 32px; } @media (min-width: 768px) { .about-mission__grid { grid-template-columns: 1fr 1fr; } } .about-mission__title { font-family: var(--font-display); font-size: 33px; color: #693100; } .about-mission__text { margin-top: 16px; font-size: 16px; line-height: 1.625; color: black; } .about-mission__subtitle { margin-top: 24px; font-weight: 600; color: var(--ink-900); font-size: 19px; } .about-mission__list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-500); } .about-mission__list li { display: flex; gap: 8px; } .about-mission__bullet { color: var(--brand-orange); } .about-mission__media { position: relative; height: 288px; overflow: hidden; border-radius: 16px; } @media (min-width: 768px) { .about-mission__media { height: auto; } } .about-stats { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; background: #FFFFFF; border: 1px solid #EDD7CA; border-radius: 15px; } @media (min-width: 1024px) { .about-stats { grid-template-columns: repeat(4, 1fr); } } .about-stat { display: flex; align-items: center; justify-content: space-between; background: #ffffff; padding: 24px; } .about-stat__num { font-family: var(--font-display); font-size: 45px; margin: 0 0 8px 0px; color: #693100; } .about-stat__label { font-size: 15px; color: black; } .about-stat__icon { display: grid; height: 44px; width: 44px; place-items: center; border-radius: 9999px; background: rgba(244, 87, 0, 0.1); color: var(--brand-orange); } .about-do { padding-block: 96px; } .about-do__head { margin-inline: auto; max-width: 36rem; text-align: center; } .about-do__lead { margin-top: 16px; font-size: 15px; line-height: 1.625; color: var(--ink-500); } .about-do__grid { margin-top: 48px; display: grid; gap: 24px; } @media (min-width: 640px) { .about-do__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .about-do__grid { grid-template-columns: repeat(3, 1fr); } } .about-do__card { overflow: hidden; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; box-shadow: var(--shadow-soft); transition: transform 0.2s ease; } .about-do__card:hover { transform: translateY(-4px); } .about-do__media { position: relative; height: 246px; } .about-do__body { padding: 20px; } .about-do__title { font-weight: 600; color: var(--ink-900); } .about-do__desc { margin-top: 8px; font-size: 13px; line-height: 1.625; color: var(--ink-500); } /* -------------------------------------------------------------------------- 20. Why-Join page -------------------------------------------------------------------------- */ .why-hero__title { margin-top: 16px; } .why-hero__lead { margin-inline: auto; margin-top: 16px; max-width: 36rem; font-size: 15px; line-height: 1.625; color: var(--ink-500); } .why-hero__photos { margin-top: 40px; display: grid; gap: 20px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; padding: 22px; box-shadow: var(--shadow-soft); } @media (min-width: 768px) { .why-hero__photos { grid-template-columns: 1fr 1fr; } } .why-hero__photo { position: relative; height: 358px; overflow: hidden; border-radius: 16px; } .why-profile { padding-block: 80px; display: grid; gap: 48px; } @media (min-width: 1024px) { .why-profile { grid-template-columns: 1fr 1fr; align-items: center; } } .why-profile__title { margin-top: 12px; } .why-profile__text { margin-top: 19px; max-width: 36rem; font-size: 16px; line-height: 1.625; color: var(--ink-500); } .why-profile__list { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--ink-800); } .why-profile__list li { display: flex; gap: 8px; font-size: 16px; } .why-bullet { color: var(--brand-orange); } .why-profile__photo { position: relative; margin-top: 72px; height: 180px; width: 296px; overflow: hidden; border-radius: 16px; } .profile-card { border-radius: 24px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; padding: 8px; box-shadow: var(--shadow-card); } .profile-card__banner { border-radius: 20px; background: var(--brand-cream); padding: 24px; } .profile-card__badge-row { display: flex; justify-content: flex-end; } .profile-card__badge { border-radius: 9999px; background: var(--brand-orange); padding: 4px 12px; font-size: 12px; font-weight: 500; color: #ffffff; } .profile-card__head { margin-top: -24px; display: flex; flex-direction: column; align-items: flex-start; } .profile-card__avatar { position: relative; height: 96px; width: 96px; overflow: hidden; border-radius: 9999px; border: 4px solid #ffffff; } .profile-card__name { margin-top: 12px; font-family: var(--font-display); font-size: 24px; color: var(--brand-orange); } .profile-card__location { margin-top: 4px; display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink-800); } .profile-card__pin { color: var(--brand-orange); } .profile-card__rows { display: flex; flex-direction: column; gap: 12px; padding: 24px; } .profile-card__row { display: flex; align-items: center; gap: 12px; border-radius: 12px; background: rgba(255, 247, 243, 0.6); padding: 12px 16px; font-size: 14px; color: var(--ink-800); } .profile-card__dot { height: 8px; width: 8px; border-radius: 9999px; background: var(--brand-orange); } .profile-card__tags { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid rgba(0, 0, 0, 0.05); padding-top: 16px; } .profile-card__tag { border-radius: 9999px; background: rgba(244, 87, 0, 0.1); padding: 6px 12px; font-size: 12px; color: var(--brand-orange); } .why-interests { padding-bottom: 64px; text-align: center; } .why-interests__title { margin-top: 12px; } .why-interests__lead { margin-inline: auto; margin-top: 16px; max-width: 36rem; font-size: 14px; line-height: 1.625; color: var(--ink-500); } .why-interests__chips { margin-inline: auto; margin-top: 32px; display: flex; max-width: 48rem; flex-wrap: wrap; justify-content: center; gap: 12px; } .why-wedge { padding-bottom: 32px; } .split-head { display: flex; flex-direction: column; gap: 16px; } @media (min-width: 768px) { .split-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .split-head__col { max-width: 28rem; } .split-head__title { margin-top: 12px; } .split-head__aside { max-width: 28rem; } @media (min-width: 768px) { .split-head__aside { text-align: right; } } .split-head__text { font-size: 14px; line-height: 1.625; color: var(--ink-500); } .why-wedge__grid { margin-top: 32px; display: grid; gap: 20px; } @media (min-width: 640px) { .why-wedge__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .why-wedge__grid { grid-template-columns: repeat(4, 1fr); } } .wedge-card { border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; padding: 24px; box-shadow: var(--shadow-soft); } .wedge-card--active { border-color: transparent; background: linear-gradient(to bottom right, var(--brand-orange), var(--brand-light)); color: #ffffff; } .wedge-card__title { font-weight: 600; color: var(--ink-900); } .wedge-card--active .wedge-card__title { color: #ffffff; } .wedge-card__desc { margin-top: 8px; font-size: 13px; line-height: 1.625; color: var(--ink-500); } .wedge-card--active .wedge-card__desc { color: rgba(255, 255, 255, 0.85); } .why-belong { padding-block: 80px; } .why-belong__grid { margin-top: 40px; display: grid; gap: 20px; } @media (min-width: 640px) { .why-belong__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .why-belong__grid { grid-template-columns: repeat(3, 1fr); } } .belong-card { border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; padding: 24px; box-shadow: var(--shadow-soft); } .belong-card__icon { display: grid; height: 40px; width: 40px; place-items: center; border-radius: 12px; background: rgba(244, 87, 0, 0.1); color: var(--brand-orange); } .belong-card__title { margin-top: 16px; font-weight: 600; color: var(--ink-900); } .belong-card__desc { margin-top: 8px; font-size: 13px; line-height: 1.625; color: var(--ink-500); } .belong-card__media { position: relative; margin-top: 16px; height: 128px; overflow: hidden; border-radius: 12px; } .why-steps { position: relative; overflow: hidden; background: var(--brand-brown); padding-block: 80px; color: #ffffff; text-align: center; } .why-steps__title { margin-top: 16px; font-family: var(--font-display); font-size: 32px; } @media (min-width: 640px) { .why-steps__title { font-size: 40px; } } .why-steps__lead { margin-top: 12px; color: rgba(255, 255, 255, 0.7); } .why-steps__grid { margin-top: 48px; display: grid; gap: 0; } @media (min-width: 640px) { .why-steps__grid { grid-template-columns: repeat(3, 1fr); } } .step-card { position: relative; padding: 32px 24px; } .step-card--active { border-radius: 16px; background: #ffffff; color: var(--ink-900); } .step-card__icon { margin-inline: auto; display: grid; height: 48px; width: 48px; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: #ffffff; } .step-card--active .step-card__icon { background: rgba(244, 87, 0, 0.1); color: var(--brand-orange); } .step-card__title { margin-top: 16px; font-weight: 600; color: #ffffff; } .step-card--active .step-card__title { color: var(--ink-900); } .step-card__desc { margin-top: 8px; font-size: 13px; line-height: 1.625; color: rgba(255, 255, 255, 0.7); } .step-card--active .step-card__desc { color: var(--ink-500); } .step-card__num { margin-inline: auto; margin-top: 20px; display: grid; height: 28px; width: 28px; place-items: center; border-radius: 9999px; font-size: 12px; font-weight: 600; background: #ffffff; color: var(--ink-900); } .step-card--active .step-card__num { background: var(--brand-orange); color: #ffffff; } .why-visibility { padding-block: 80px; } .why-visibility__grid { margin-top: 40px; display: grid; gap: 20px; } @media (min-width: 640px) { .why-visibility__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .why-visibility__grid { grid-template-columns: repeat(3, 1fr); } } .visibility-card { border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; padding: 24px; box-shadow: var(--shadow-soft); } .visibility-card__head { display: flex; align-items: flex-start; gap: 12px; } .visibility-card__icon { display: grid; height: 36px; width: 36px; flex-shrink: 0; place-items: center; border-radius: 12px; background: rgba(244, 87, 0, 0.1); color: var(--brand-orange); } .visibility-card__title { font-weight: 600; color: var(--ink-900); } .visibility-card__desc { font-size: 13px; color: var(--ink-500); } .visibility-card__opts { margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .visibility-opt { border-radius: 9999px; border: 1px solid rgba(0, 0, 0, 0.1); padding: 6px 8px; text-align: center; font-size: 11px; color: var(--ink-500); } .visibility-opt--active { border-color: rgba(244, 87, 0, 0.6); background: rgba(244, 87, 0, 0.05); color: var(--brand-orange); } .why-form { padding-block: 80px; } .why-form__title { text-align: center; } .why-form__body { margin-top: 40px; } /* -------------------------------------------------------------------------- 21. Gallery page -------------------------------------------------------------------------- */ .gallery-hero__title { margin-inline: auto; margin-top: 16px; max-width: 42rem; } .gallery-hero__lead { margin-inline: auto; margin-top: 16px; max-width: 32rem; font-size: 15px; line-height: 1.625; color: var(--ink-500); } .gallery-hero__stats { margin-inline: auto; margin-top: 40px; display: grid; max-width: 58rem; grid-template-columns: 1fr 1fr; gap: 24px; } @media (min-width: 640px) { .gallery-hero__stats { grid-template-columns: repeat(4, 1fr); } } .gallery-stat__num { font-family: var(--font-display); font-size: 30px; color: #693100; font-size: 41px; text-align: justify; } .gallery-stat__label { margin-top: 4px; font-size: 14px; color: black; text-align: justify; } .gallery-featured { padding-block: 64px; } .gallery-filters { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; } .gallery-featured__head { margin-top: 40px; } .gallery-featured__title { margin-top: 12px; } .gallery-masonry { margin-top: 32px; columns: 1; column-gap: 20px; } @media (min-width: 640px) { .gallery-masonry { columns: 2; } } @media (min-width: 1024px) { .gallery-masonry { columns: 3; } } .gallery-masonry > * { margin-bottom: 20px; } .gallery-tile { position: relative; width: 100%; break-inside: avoid; overflow: hidden; border-radius: 16px; } .gallery-tile--tall { height: 428px; } .gallery-tile--short { height: 208px; } .gallery-tile__img { object-fit: cover; transition: transform 0.5s ease; } .gallery-tile:hover .gallery-tile__img { transform: scale(1.05); } .gallery-tile__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent 60%); } .gallery-tile__caption { position: absolute; bottom: 16px; left: 16px; } .gallery-tile__title { font-weight: 600; color: #ffffff; } .gallery-tile__cat { font-size: 12px; color: rgba(255, 255, 255, 0.7); } .gallery-albums { padding-block: 80px; } .gallery-albums__title { margin-top: 12px; } .gallery-albums__grid { margin-top: 40px; display: grid; gap: 24px; } @media (min-width: 768px) { .gallery-albums__grid { grid-template-columns: repeat(3, 1fr); } } .album-card { padding: 21px; transition: transform 0.2s ease; background: #FFFFFF; border: 1px solid #EFEFEF; box-shadow: 5px 20px 65px rgba(0, 0, 0, 0.06); border-radius: 15px; } .album-card:hover { transform: translateY(-4px); } .album-card__media { position: relative; height: 232px; overflow: hidden; border-radius: 16px; } .album-card__count { position: absolute; left: 12px; top: 12px; border-radius: 9999px; background: rgba(0, 0, 0, 0.6); padding: 4px 12px; font-size: 12px; color: #ffffff; backdrop-filter: blur(4px); } .album-card__body { padding: 16px; } .album-card__title { font-family: var(--font-display); font-size: 20px; color: var(--ink-900); } .album-card__meta { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--ink-500); } .album-card__date { display: inline-flex; align-items: center; gap: 4px; } .gallery-experiences { padding-block: 80px; } .gallery-experiences__title { margin-top: 12px; } .gallery-experiences__grid { margin-top: 32px; display: grid; gap: 20px; } @media (min-width: 640px) { .gallery-experiences__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .gallery-experiences__grid { grid-template-columns: repeat(4, 1fr); } } .experience-tile { position: relative; height: 391px; overflow: hidden; border-radius: 16px; } .experience-tile__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent); } .experience-tile__caption { position: absolute; bottom: 16px; left: 16px; right: 16px; } .experience-tile__title { font-weight: 600; color: #ffffff; } .experience-tile__sub { font-size: 12px; color: rgba(255, 255, 255, 0.7); } .gallery-videos { padding-bottom: 96px; } .gallery-videos__grid { margin-top: 40px; display: grid; gap: 24px; } @media (min-width: 768px) { .gallery-videos__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .gallery-videos__grid { grid-template-columns: repeat(3, 1fr); } } .video-card { overflow: hidden; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; box-shadow: var(--shadow-soft); } .video-card__media { position: relative; height: 208px; } .video-card__play-layer { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.2); } .video-card__play { display: grid; height: 56px; width: 56px; place-items: center; border-radius: 9999px; background: var(--brand-orange); color: #ffffff; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .video-card__duration { position: absolute; bottom: 12px; right: 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.7); padding: 2px 8px; font-size: 12px; color: #ffffff; } .video-card__body { padding: 16px; } .video-card__tag { font-size: 12px; font-weight: 500; color: var(--brand-orange); } .video-card__title { margin-top: 4px; font-weight: 600; color: var(--ink-900); } .gallery-cta__title { font-family: var(--font-display); font-size: 34px; line-height: 1.25; color: #ffffff; } @media (min-width: 640px) { .gallery-cta__title { font-size: 44px; } } .gallery-cta__text { margin-top: 16px; max-width: 28rem; color: rgba(255, 255, 255, 0.8); } .gallery-cta__box { max-width: 32rem; } /* -------------------------------------------------------------------------- 22. Knowledge page -------------------------------------------------------------------------- */ .knowledge-hero__title { margin-top: 16px; } .knowledge-hero__lead { margin-inline: auto; margin-top: 16px; max-width: 36rem; font-size: 15px; line-height: 1.625; color: var(--ink-500); } .knowledge-hero__photos { margin-top: 40px; display: grid; gap: 20px; border-radius: 15px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; padding: 25px; } @media (min-width: 768px) { .knowledge-hero__photos { grid-template-columns: 1fr 1.6fr; } } .knowledge-hero__photo { position: relative; height: 326px; overflow: hidden; border-radius: 16px; } .knowledge-cats { padding-block: 64px; } .knowledge-cats__grid { margin-top: 40px; display: grid; gap: 24px; } @media (min-width: 640px) { .knowledge-cats__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .knowledge-cats__grid { grid-template-columns: repeat(3, 1fr); } } .knowledge-cat { padding: 18px; overflow: hidden; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; transition: transform 0.2s ease; } .knowledge-cat:hover { transform: translateY(-4px); } .knowledge-cat__media { position: relative; height: 267px; border-radius: 32px; } .knowledge-cat__media img { border-radius: 20px; } .knowledge-cat__body { padding: 20px 0 0; } .knowledge-cat__title { font-size: 18px; font-weight: 600; color: var(--ink-900); } .knowledge-cat__sub { margin-top: 6px; font-size: 13px; color: var(--ink-500); } .knowledge-ai { padding-block: 80px; } .knowledge-ai__panel { margin-top: 40px; overflow: hidden; border-radius: 24px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; box-shadow: var(--shadow-card); } .knowledge-ai__bar { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); padding: 16px 24px; } .knowledge-ai__dots { display: flex; gap: 6px; } .knowledge-ai__dot { height: 12px; width: 12px; border-radius: 9999px; } .knowledge-ai__dot--red { background: #f87171; } .knowledge-ai__dot--yellow { background: #facc15; } .knowledge-ai__dot--green { background: #4ade80; } .knowledge-ai__bar-label { font-size: 14px; color: var(--ink-500); } .knowledge-ai__body { display: flex; flex-direction: column; gap: 20px; padding: 24px; } @media (min-width: 640px) { .knowledge-ai__body { padding: 32px; } } .knowledge-ai__q { display: flex; align-items: flex-start; gap: 12px; } .knowledge-ai__q-emoji { font-size: 20px; } .knowledge-ai__q-text { padding-top: 4px; font-weight: 600; color: var(--ink-900); } .knowledge-ai__a { display: flex; align-items: flex-start; gap: 12px; } .knowledge-ai__a-badge { display: grid; height: 32px; width: 32px; flex-shrink: 0; place-items: center; border-radius: 8px; background: var(--brand-orange); font-size: 12px; font-weight: 700; color: #ffffff; } .knowledge-ai__a-text { max-width: 42rem; font-size: 14px; line-height: 1.625; color: var(--ink-500); } .knowledge-ai__sources { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 44px; font-size: 12px; color: var(--ink-500); } .knowledge-ai__source { border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.1); padding: 6px 12px; } .knowledge-ai__suggestions { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(0, 0, 0, 0.05); padding: 20px 24px; } .knowledge-ai__suggestion { padding: 8px 16px; font-size: 14px; color: var(--ink-800); background: #FFF8F4; border: 1px solid #FFE8DB; border-radius: 100px; } .knowledge-ai__suggestion--active { border: 0; background: linear-gradient(to right, var(--brand-orange), var(--brand-light)); color: #ffffff; } .knowledge-voices { padding-block: 80px; } .knowledge-voices__title { margin-top: 12px; width: 36%; } .knowledge-voices__grid { margin-top: 40px; display: grid; gap: 24px; } @media (min-width: 768px) { .knowledge-voices__grid { grid-template-columns: repeat(3, 1fr); } } .knowledge-voices__col { display: flex; flex-direction: column; gap: 11px; } /* -------------------------------------------------------------------------- 23. Events + Event detail pages -------------------------------------------------------------------------- */ .events-hero__title { margin-inline: auto; margin-top: 16px; max-width: 48rem; } .events-hero__lead { margin-inline: auto; margin-top: 16px; max-width: 32rem; font-size: 15px; line-height: 1.625; color: var(--ink-500); } .events-list { padding-bottom: 96px; display: flex; flex-direction: column; gap: 24px; } .events-list__grid { display: grid; gap: 24px; } @media (min-width: 768px) { .events-list__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .events-list__grid { grid-template-columns: repeat(3, 1fr); } } .evd { padding-top: 144px; padding-bottom: 96px; } .evd__head { margin-top: 16px; display: grid; gap: 24px; } @media (min-width: 1024px) { .evd__head { grid-template-columns: 1.3fr 1fr; align-items: flex-end; } } .evd__lead { font-size: 15px; line-height: 1.625; color: var(--ink-500); } .evd__photos { margin-top: 40px; display: grid; gap: 20px; } @media (min-width: 768px) { .evd__photos { grid-template-columns: 1.4fr 1fr; } } .evd__photo-lg { position: relative; height: 320px; overflow: hidden; border-radius: 24px; } @media (min-width: 768px) { .evd__photo-lg { height: 420px; } } .evd__photo-sm { position: relative; height: 256px; align-self: flex-start; overflow: hidden; border-radius: 24px; } @media (min-width: 768px) { .evd__photo-sm { margin-top: 64px; height: 320px; } } .evd__meta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: 13px; color: var(--ink-500); } .evd__meta-item { display: inline-flex; align-items: center; gap: 8px; } .evd__meta-icon { color: var(--brand-orange); } .evd__block { margin-top: 24px; max-width: 48rem; } .evd__h2 { font-family: var(--font-display); font-size: 26px; color: var(--ink-900); } .evd__prose { margin-top: 16px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; line-height: 1.625; color: var(--ink-500); } .evd__split { margin-top: 48px; display: grid; gap: 32px; } @media (min-width: 768px) { .evd__split { grid-template-columns: 1fr 1fr; align-items: center; } } .evd__split-media { position: relative; height: 288px; overflow: hidden; border-radius: 24px; } .evd__h3 { font-family: var(--font-display); font-size: 24px; color: var(--ink-900); } .evd__split-text { margin-top: 12px; font-size: 14px; line-height: 1.625; color: var(--ink-500); } .evd__highlights { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink-800); } .evd__highlights li { display: flex; gap: 8px; } .evd__check { color: var(--brand-orange); } .evd__quote { margin-top: 48px; max-width: 42rem; border-radius: 24px; border: 1px solid rgba(0, 0, 0, 0.05); background: #ffffff; padding: 32px; box-shadow: var(--shadow-soft); } .evd__quote-mark { display: grid; height: 36px; width: 36px; place-items: center; border-radius: 9999px; border: 1px solid rgba(244, 87, 0, 0.3); color: var(--brand-orange); } .evd__quote-text { margin-top: 20px; font-size: 15px; line-height: 1.625; color: var(--ink-800); } .evd__quote-name { margin-top: 20px; font-weight: 600; color: var(--ink-900); } .evd__quote-role { font-size: 12px; color: var(--ink-500); } .evd__block--wide { max-width: 48rem; } /* -------------------------------------------------------------------------- 23b. Contact page -------------------------------------------------------------------------- */ /* Wrapper class specific to the Contact page hero. Add Contact-only hero overrides here. */ .contactwrap { background-size: 100% 660px; height: 480px; } .contact-hero__title { margin-top: 16px; } .contact-hero__sub { margin-inline: auto; margin-top: 16px; max-width: 30rem; font-size: 15px; line-height: 1.625; color: var(--ink-500); } .contact-section { position: relative; z-index: 2; margin-top: -122px; padding-bottom: 96px; } .contact-card { display: grid; padding: 26px; box-shadow: var(--shadow-card); background: #FFFFFF; border: 1px solid #FFE8D0; border-radius: 20px; } @media (min-width: 900px) { .contact-card { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr); gap: 20px; } } .contact-info { display: flex; flex-direction: column; gap: 24px; border-radius: 20px; background: var(--brand-orange); padding: 32px; color: #ffffff; } .contact-info__title { font-family: var(--font-display); font-size: 30px; } .contact-info__text { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); } .contact-info__list { display: flex; flex-direction: column; gap: 20px; } .contact-info__item { display: flex; align-items: flex-start; gap: 16px; } .contact-info__icon { display: grid; height: 47px; width: 47px; flex-shrink: 0; place-items: center; border-radius: 12px; background: #F8691A; color: white; } .contact-info__label { font-size: 14px; font-weight: 600; } .contact-info__value { margin-top: 2px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); } .contact-form { border-radius: 20px; background: #FFF7F3; padding: 28px; } @media (min-width: 640px) { .contact-form { padding: 32px; } } .contact-form__title { font-family: var(--font-display); font-size: 26px; color: var(--ink-900); } .contact-form__grid { margin-top: 24px; display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 640px) { .contact-form__grid { grid-template-columns: 1fr 1fr; } } .contact-form__field--full { grid-column: 1 / -1; } .contact-input, .contact-textarea { width: 100%; border-radius: 30px; border: 1px solid rgba(0, 0, 0, 0.08); background: #ffffff; padding: 15px 16px; font-size: 14px; color: var(--ink-800); outline: none; } .contact-input:focus, .contact-textarea:focus { border-color: rgba(244, 87, 0, 0.5); } .contact-textarea { border-radius: 12px; min-height: 140px; resize: vertical; } .contact-form__actions { margin-top: 20px; display: flex; justify-content: flex-end; } /* -------------------------------------------------------------------------- 24. Full-bleed image banner content paddings (home CTA / culture / gallery) -------------------------------------------------------------------------- */ .banner-pad-24 { padding-block: 96px; } .banner-pad-28 { padding-block: 112px; }