/* homw/FAQ.css */ /* ========================================================= FAQ SECTION — FULL FINAL ========================================================= */ /* ========================================================= SECTION ========================================================= */ .sc-faq { position: relative; width: 100%; height: auto; min-height: 0; background: #ffffff; color: #171717; overflow: hidden; } /* ========================================================= MAIN CONTENT ========================================================= */ .sc-faq .content-faq { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: 80px 48px; display: grid; grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.35fr); align-items: start; gap: 64px; box-sizing: border-box; } /* ========================================================= LEFT SIDE ========================================================= */ .sc-faq .faq-left { position: relative !important; width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= LEFT HEADER WRAPPER ========================================================= */ .sc-faq .faq-left .head-desc-left { position: relative !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; text-align: left !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= TAGLINE ========================================================= */ .sc-faq .faq-left .tagline, .sc-faq .faq-left .tagline.blue { position: relative !important; display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #24b6f1 !important; font-size: 10px !important; line-height: 1.4 !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; text-align: left !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= MAIN HEADING ========================================================= */ .sc-faq .faq-left h2 { position: relative !important; display: block !important; width: 100% !important; max-width: 9ch !important; margin: 0 !important; padding: 0 !important; color: #171717 !important; font-size: 52px !important; line-height: 1.02 !important; font-weight: 500 !important; letter-spacing: -0.03em !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= DESCRIPTION BELOW HEADING ========================================================= */ .sc-faq .faq-left .head-desc-left > p:not(.tagline) { position: relative !important; display: block !important; width: 100% !important; max-width: 360px !important; margin: 0 !important; padding: 0 !important; color: #777777 !important; font-size: 13px !important; line-height: 1.5 !important; text-align: left !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= CTA WRAPPER ========================================================= */ .sc-faq .faq-left .faq-cta { position: relative !important; width: auto !important; max-width: 280px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 10px !important; margin: 32px 0 0 !important; padding: 0 !important; text-align: left !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= CTA TEXT ========================================================= */ .sc-faq .faq-left .faq-cta p { position: relative !important; display: block !important; width: auto !important; max-width: 250px !important; margin: 0 !important; padding: 0 !important; color: #777777 !important; font-size: 10px !important; line-height: 1.4 !important; text-align: left !important; white-space: normal !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= CTA BUTTON ========================================================= */ .sc-faq .faq-left .faq-cta a, .sc-faq .faq-left .faq-cta button, .sc-faq .faq-left .faq-cta .button-primary { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 40px !important; margin: 0 !important; padding: 10px 16px !important; border-radius: 999px !important; font-size: 14px !important; line-height: 1 !important; white-space: nowrap !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= FALLBACK IF CTA IS DIRECT CHILD ========================================================= */ .sc-faq .faq-left > p { position: relative !important; display: block !important; width: auto !important; max-width: 250px !important; margin: 32px 0 10px !important; padding: 0 !important; color: #777777 !important; font-size: 10px !important; line-height: 1.4 !important; text-align: left !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } .sc-faq .faq-left > a, .sc-faq .faq-left > button, .sc-faq .faq-left > .button-primary { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 40px !important; margin: 0 !important; padding: 10px 16px !important; border-radius: 999px !important; font-size: 14px !important; line-height: 1 !important; white-space: nowrap !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= ACCORDION WRAPPER ========================================================= */ .sc-faq .faq-accordions { position: relative; width: 100%; min-width: 0; max-width: none; margin: 0; display: flex; flex-direction: column; gap: 8px; } /* ========================================================= ACCORDION CARD ========================================================= */ .sc-faq .accordion-faq { position: relative; display: block; width: 100%; min-width: 0; height: auto; min-height: 72px; margin: 0; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 10px; cursor: pointer; box-sizing: border-box; overflow: hidden; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } /* ========================================================= ACCORDION CONTENT ========================================================= */ .sc-faq .accordion-faq-content { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; gap: 0 !important; margin: 0 !important; padding: 22px 52px 22px 24px !important; box-sizing: border-box !important; overflow: visible !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= RESET P POSITIONING ========================================================= */ .sc-faq .accordion-faq-content > p { position: relative !important; width: 100% !important; height: auto !important; padding: 0 !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; box-sizing: border-box !important; } /* ========================================================= QUESTION ========================================================= */ .sc-faq .accordion-faq-content > p:first-child { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #171717 !important; font-size: 15px !important; line-height: 1.35 !important; font-weight: 600 !important; text-align: left !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; z-index: 1 !important; } /* ========================================================= ANSWER CLOSED ========================================================= */ .sc-faq .accordion-faq-content > p:nth-child(2) { position: relative !important; display: block !important; width: 100% !important; height: auto !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #777777 !important; font-size: 12px !important; line-height: 1.5 !important; font-weight: 400 !important; text-align: left !important; opacity: 0 !important; visibility: hidden !important; overflow: hidden !important; transform: none !important; transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease, visibility 0.25s ease !important; } /* ========================================================= ANSWER OPEN ========================================================= */ .sc-faq .accordion-faq.is-open .accordion-faq-content > p:nth-child(2) { max-height: 300px !important; margin-top: 8px !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; } /* ========================================================= ACTIVE QUESTION ========================================================= */ .sc-faq .accordion-faq.is-open .accordion-faq-content > p:first-child { color: #24b6f1 !important; } /* ========================================================= ACTIVE CARD ========================================================= */ .sc-faq .accordion-faq.is-open { background: #fafafa; border-color: rgba(36, 182, 241, 0.35); } /* ========================================================= HIDE ORIGINAL ICON ========================================================= */ .sc-faq .accordion-faq .icon-minus { display: none !important; } /* ========================================================= PLUS MINUS ========================================================= */ .sc-faq .accordion-faq::before, .sc-faq .accordion-faq::after { content: ""; position: absolute !important; top: 35px !important; right: 20px !important; width: 11px !important; height: 1px !important; background: #777777 !important; pointer-events: none !important; z-index: 3 !important; transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease !important; } .sc-faq .accordion-faq::after { transform: rotate(90deg) !important; } .sc-faq .accordion-faq.is-open::after { opacity: 0 !important; transform: rotate(0deg) !important; } .sc-faq .accordion-faq.is-open::before { background: #24b6f1 !important; } /* ========================================================= HOVER ========================================================= */ @media (hover: hover) { .sc-faq .accordion-faq:hover { background: #fafafa; border-color: rgba(0, 0, 0, 0.18); } .sc-faq .accordion-faq:hover .accordion-faq-content > p:first-child { color: #24b6f1; } } /* ========================================================= LARGE DESKTOP >= 1440 ========================================================= */ @media screen and (min-width: 1440px) { .sc-faq .content-faq { max-width: 1320px; padding: 88px 56px; grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.4fr); gap: 72px; } .sc-faq .faq-left h2 { font-size: 56px !important; } .sc-faq .faq-left .faq-cta, .sc-faq .faq-left > p { margin-top: 36px !important; } .sc-faq .accordion-faq { min-height: 76px; } .sc-faq .accordion-faq-content { padding: 23px 56px 23px 26px !important; } .sc-faq .accordion-faq-content > p:first-child { font-size: 16px !important; } .sc-faq .accordion-faq::before, .sc-faq .accordion-faq::after { top: 37px !important; right: 22px !important; } } /* ========================================================= DESKTOP MEDIUM 992 — 1279 ========================================================= */ @media screen and (min-width: 992px) and (max-width: 1279px) { .sc-faq .content-faq { padding: 72px 40px; grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.35fr); gap: 48px; } .sc-faq .faq-left h2 { font-size: 46px !important; } .sc-faq .faq-left .faq-cta, .sc-faq .faq-left > p { margin-top: 30px !important; } .sc-faq .accordion-faq { min-height: 70px; } .sc-faq .accordion-faq-content { padding: 20px 48px 20px 20px !important; } .sc-faq .accordion-faq::before, .sc-faq .accordion-faq::after { top: 34px !important; right: 18px !important; } } /* ========================================================= TABLET <= 991 ========================================================= */ @media screen and (max-width: 991px) { .sc-faq .content-faq { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 760px !important; gap: 32px !important; padding: 64px 24px !important; } .sc-faq .faq-left h2 { font-size: 40px !important; } .sc-faq .faq-left .faq-cta { margin-top: 28px !important; } .sc-faq .faq-left > p { margin: 28px 0 10px !important; } .sc-faq .faq-left .faq-cta p, .sc-faq .faq-left > p { font-size: 10px !important; } .sc-faq .faq-left .faq-cta a, .sc-faq .faq-left .faq-cta button, .sc-faq .faq-left .faq-cta .button-primary, .sc-faq .faq-left > a, .sc-faq .faq-left > button, .sc-faq .faq-left > .button-primary { min-height: 38px !important; padding: 9px 14px !important; font-size: 13px !important; } .sc-faq .accordion-faq { min-height: 66px !important; } .sc-faq .accordion-faq-content { padding: 19px 46px 19px 18px !important; } .sc-faq .accordion-faq-content > p:first-child { font-size: 14px !important; } .sc-faq .accordion-faq-content > p:nth-child(2) { font-size: 11px !important; } .sc-faq .accordion-faq::before, .sc-faq .accordion-faq::after { top: 31px !important; right: 18px !important; } } /* ========================================================= MOBILE <= 767 ========================================================= */ @media screen and (max-width: 767px) { .sc-faq .content-faq { gap: 28px !important; padding: 56px 20px !important; } .sc-faq .faq-left .head-desc-left { gap: 7px !important; } .sc-faq .faq-left h2 { max-width: 9ch !important; font-size: 34px !important; line-height: 1.03 !important; } .sc-faq .faq-left .head-desc-left > p:not(.tagline) { max-width: 290px !important; font-size: 10px !important; } .sc-faq .faq-left .faq-cta { margin-top: 28px !important; gap: 10px !important; } .sc-faq .faq-left > p { margin: 28px 0 10px !important; } .sc-faq .faq-left .faq-cta p, .sc-faq .faq-left > p { font-size: 9px !important; } .sc-faq .faq-left .faq-cta a, .sc-faq .faq-left .faq-cta button, .sc-faq .faq-left .faq-cta .button-primary, .sc-faq .faq-left > a, .sc-faq .faq-left > button, .sc-faq .faq-left > .button-primary { min-height: 38px !important; padding: 9px 14px !important; font-size: 13px !important; } .sc-faq .accordion-faq { min-height: 60px !important; } .sc-faq .accordion-faq-content { padding: 17px 42px 17px 16px !important; } .sc-faq .accordion-faq-content > p:first-child { font-size: 13px !important; } .sc-faq .accordion-faq-content > p:nth-child(2) { font-size: 10px !important; } .sc-faq .accordion-faq::before, .sc-faq .accordion-faq::after { top: 29px !important; right: 16px !important; } } /* ========================================================= SMALL MOBILE <= 480 ========================================================= */ @media screen and (max-width: 480px) { .sc-faq .content-faq { gap: 24px !important; padding: 48px 16px !important; } .sc-faq .faq-left h2 { font-size: 30px !important; } .sc-faq .faq-left .head-desc-left > p:not(.tagline) { max-width: 270px !important; font-size: 9.5px !important; } .sc-faq .faq-left .faq-cta { margin-top: 24px !important; gap: 9px !important; } .sc-faq .faq-left > p { margin: 24px 0 9px !important; } .sc-faq .faq-left .faq-cta p, .sc-faq .faq-left > p { font-size: 8.5px !important; } .sc-faq .faq-left .faq-cta a, .sc-faq .faq-left .faq-cta button, .sc-faq .faq-left .faq-cta .button-primary, .sc-faq .faq-left > a, .sc-faq .faq-left > button, .sc-faq .faq-left > .button-primary { min-height: 36px !important; padding: 8px 14px !important; font-size: 12px !important; } .sc-faq .accordion-faq { min-height: 58px !important; } .sc-faq .accordion-faq-content { padding: 16px 38px 16px 14px !important; } .sc-faq .accordion-faq-content > p:first-child { font-size: 12px !important; } .sc-faq .accordion-faq-content > p:nth-child(2) { font-size: 9.5px !important; } .sc-faq .accordion-faq::before, .sc-faq .accordion-faq::after { top: 27px !important; right: 14px !important; } } /* ========================================================= EXTRA SMALL <= 380 ========================================================= */ @media screen and (max-width: 380px) { .sc-faq .content-faq { padding: 44px 14px !important; } .sc-faq .faq-left h2 { font-size: 28px !important; } .sc-faq .faq-left .head-desc-left > p:not(.tagline) { font-size: 9px !important; } .sc-faq .faq-left .faq-cta p, .sc-faq .faq-left > p { font-size: 8px !important; } .sc-faq .faq-left .faq-cta a, .sc-faq .faq-left .faq-cta button, .sc-faq .faq-left .faq-cta .button-primary, .sc-faq .faq-left > a, .sc-faq .faq-left > button, .sc-faq .faq-left > .button-primary { min-height: 34px !important; padding: 7px 12px !important; font-size: 11px !important; } } /* homw/news.css */ /* ========================================================= NEWS SECTION — FULL FINAL RESPONSIVE ========================================================= */ /* ========================================================= SECTION ========================================================= */ .sc-dark { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 72px 0 !important; box-sizing: border-box !important; overflow: hidden !important; } /* ========================================================= CONTENT ========================================================= */ .sc-dark .content-news { position: relative !important; width: 100% !important; max-width: 1280px !important; margin: 0 auto !important; padding-left: 48px !important; padding-right: 48px !important; box-sizing: border-box !important; } /* ========================================================= HEADER ========================================================= */ .sc-dark .head-desc-center { position: relative !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin: 0 0 40px !important; padding: 0 !important; text-align: center !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= TAGLINE ========================================================= */ .sc-dark .head-desc-center .tagline, .sc-dark .head-desc-center .tagline.blue { position: relative !important; width: auto !important; margin: 0 !important; padding: 0 !important; font-size: 10px !important; line-height: 1.4 !important; text-align: center !important; white-space: normal !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= SECTION TITLE ========================================================= */ .sc-dark .head-desc-center h2, .sc-dark .head-desc-center .fs-3rem { position: relative !important; width: 100% !important; max-width: 960px !important; margin: 0 !important; padding: 0 !important; font-size: 48px !important; line-height: 1.08 !important; font-weight: 400 !important; letter-spacing: -0.025em !important; text-align: center !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= NEWS WRAPPER ========================================================= */ .sc-dark .grid-news { position: relative !important; width: 100% !important; height: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* ========================================================= FEATURED / MAIN CARD ========================================================= */ .sc-dark .card-news-main { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important; gap: 32px !important; align-items: start !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; overflow: visible !important; } /* ========================================================= FEATURED FIGURE ========================================================= */ .sc-dark .card-news-main .fig-news { position: relative !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 8px !important; box-sizing: border-box !important; } /* ========================================================= FEATURED IMAGE ========================================================= */ .sc-dark .card-news-main .fig-news img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= FEATURED DESCRIPTION ========================================================= */ .sc-dark .card-news-main .card-news-desc { position: relative !important; width: 100% !important; min-width: 0 !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 10px !important; margin: 0 !important; padding: 14px 0 0 !important; box-sizing: border-box !important; overflow: visible !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= FEATURED TITLE ========================================================= */ .sc-dark .card-news-main .card-news-desc h3, .sc-dark .card-news-main .card-news-desc .fs-2rem { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 24px !important; line-height: 1.35 !important; font-weight: 500 !important; color: #ffffff !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= FEATURED META ========================================================= */ .sc-dark .card-news-main .card-news-desc p { position: relative !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 10px !important; line-height: 1.4 !important; color: rgba(255, 255, 255, 0.58) !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= BLOG LIST WRAPPER ========================================================= */ .sc-dark .list-blog { position: relative !important; width: 100% !important; height: auto !important; margin: 32px 0 0 !important; padding: 0 !important; box-sizing: border-box !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= SMALL NEWS GRID ========================================================= */ .sc-dark .grid-news-sm { position: relative !important; width: 100% !important; height: auto !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; } /* ========================================================= SMALL CARD ========================================================= */ .sc-dark .card-news.card-sm { position: relative !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; border-radius: 8px !important; background: transparent !important; box-sizing: border-box !important; overflow: visible !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= SMALL CARD FIGURE ========================================================= */ .sc-dark .card-news.card-sm .fig-news { position: relative !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 8px !important; box-sizing: border-box !important; } /* ========================================================= SMALL CARD IMAGE ========================================================= */ .sc-dark .card-news.card-sm .fig-news img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; object-position: center !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* ========================================================= SMALL CARD DESCRIPTION ========================================================= */ .sc-dark .card-news.card-sm .card-news-desc { position: relative !important; width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin: 0 !important; padding: 10px 2px 0 !important; box-sizing: border-box !important; overflow: visible !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= SMALL CARD TITLE ========================================================= */ .sc-dark .card-news.card-sm .card-news-desc h3, .sc-dark .card-news.card-sm .card-news-desc .fs-xl { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-size: 13px !important; line-height: 1.4 !important; font-weight: 500 !important; color: #ffffff !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; overflow: visible !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= AUTHOR DATE ========================================================= */ .sc-dark .card-news.card-sm .author-date { position: relative !important; width: 100% !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= SMALL CARD META ========================================================= */ .sc-dark .card-news.card-sm .card-news-desc p, .sc-dark .card-news.card-sm .author-date, .sc-dark .card-news.card-sm .author-date * { position: relative !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 1.4 !important; color: rgba(255, 255, 255, 0.55) !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= LARGE DESKTOP >= 1440px ========================================================= */ @media screen and (min-width: 1440px) { .sc-dark { padding: 88px 0 !important; } .sc-dark .content-news { max-width: 1320px !important; padding-left: 56px !important; padding-right: 56px !important; } .sc-dark .head-desc-center { margin-bottom: 48px !important; } .sc-dark .head-desc-center h2, .sc-dark .head-desc-center .fs-3rem { max-width: 1000px !important; font-size: 52px !important; } .sc-dark .card-news-main { gap: 40px !important; } .sc-dark .card-news-main .card-news-desc h3, .sc-dark .card-news-main .card-news-desc .fs-2rem { font-size: 26px !important; } .sc-dark .grid-news-sm { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; } .sc-dark .card-news.card-sm .card-news-desc h3, .sc-dark .card-news.card-sm .card-news-desc .fs-xl { font-size: 14px !important; } } /* ========================================================= DESKTOP 992px — 1439px ========================================================= */ @media screen and (min-width: 992px) and (max-width: 1439px) { .sc-dark .content-news { padding-left: 40px !important; padding-right: 40px !important; } .sc-dark .head-desc-center h2, .sc-dark .head-desc-center .fs-3rem { font-size: 42px !important; } .sc-dark .card-news-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 28px !important; } .sc-dark .card-news-main .card-news-desc h3, .sc-dark .card-news-main .card-news-desc .fs-2rem { font-size: 21px !important; } .sc-dark .grid-news-sm { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; } .sc-dark .card-news.card-sm .card-news-desc h3, .sc-dark .card-news.card-sm .card-news-desc .fs-xl { font-size: 12px !important; } .sc-dark .card-news.card-sm .card-news-desc p, .sc-dark .card-news.card-sm .author-date, .sc-dark .card-news.card-sm .author-date * { font-size: 8px !important; } } /* ========================================================= TABLET <= 991px ========================================================= */ @media screen and (max-width: 991px) { .sc-dark { padding: 64px 0 !important; } .sc-dark .content-news { max-width: 760px !important; padding-left: 24px !important; padding-right: 24px !important; } .sc-dark .head-desc-center { gap: 8px !important; margin-bottom: 32px !important; } .sc-dark .head-desc-center h2, .sc-dark .head-desc-center .fs-3rem { max-width: 680px !important; font-size: 36px !important; line-height: 1.1 !important; } /* Featured jadi 1 kolom */ .sc-dark .card-news-main { grid-template-columns: 1fr !important; gap: 16px !important; } .sc-dark .card-news-main .card-news-desc { padding-top: 0 !important; } .sc-dark .card-news-main .card-news-desc h3, .sc-dark .card-news-main .card-news-desc .fs-2rem { font-size: 18px !important; } .sc-dark .list-blog { margin-top: 28px !important; } /* Card list 2 kolom */ .sc-dark .grid-news-sm { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } .sc-dark .card-news.card-sm .card-news-desc { padding-top: 9px !important; } .sc-dark .card-news.card-sm .card-news-desc h3, .sc-dark .card-news.card-sm .card-news-desc .fs-xl { font-size: 12px !important; } .sc-dark .card-news.card-sm .card-news-desc p, .sc-dark .card-news.card-sm .author-date, .sc-dark .card-news.card-sm .author-date * { font-size: 8px !important; } } /* ========================================================= MOBILE LANDSCAPE <= 767px ========================================================= */ @media screen and (max-width: 767px) { .sc-dark { padding: 56px 0 !important; } .sc-dark .content-news { max-width: 100% !important; padding-left: 20px !important; padding-right: 20px !important; } .sc-dark .head-desc-center { margin-bottom: 28px !important; } .sc-dark .head-desc-center .tagline, .sc-dark .head-desc-center .tagline.blue { font-size: 9px !important; } .sc-dark .head-desc-center h2, .sc-dark .head-desc-center .fs-3rem { max-width: 100% !important; font-size: 30px !important; line-height: 1.12 !important; } .sc-dark .card-news-main { grid-template-columns: 1fr !important; gap: 14px !important; } .sc-dark .card-news-main .card-news-desc h3, .sc-dark .card-news-main .card-news-desc .fs-2rem { font-size: 16px !important; line-height: 1.4 !important; } .sc-dark .card-news-main .card-news-desc p { font-size: 9px !important; } .sc-dark .list-blog { margin-top: 24px !important; } .sc-dark .grid-news-sm { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } .sc-dark .card-news.card-sm .card-news-desc { gap: 5px !important; padding-top: 8px !important; } .sc-dark .card-news.card-sm .card-news-desc h3, .sc-dark .card-news.card-sm .card-news-desc .fs-xl { font-size: 10px !important; line-height: 1.4 !important; } .sc-dark .card-news.card-sm .card-news-desc p, .sc-dark .card-news.card-sm .author-date, .sc-dark .card-news.card-sm .author-date * { font-size: 7.5px !important; } } /* ========================================================= MOBILE PORTRAIT <= 478px ========================================================= */ @media screen and (max-width: 478px) { .sc-dark { padding: 48px 0 !important; } .sc-dark .content-news { padding-left: 20px !important; padding-right: 20px !important; } .sc-dark .head-desc-center { margin-bottom: 24px !important; } .sc-dark .head-desc-center h2, .sc-dark .head-desc-center .fs-3rem { font-size: 26px !important; line-height: 1.12 !important; } .sc-dark .card-news-main .card-news-desc h3, .sc-dark .card-news-main .card-news-desc .fs-2rem { font-size: 15px !important; } /* Small card jadi 1 kolom */ .sc-dark .grid-news-sm { grid-template-columns: 1fr !important; gap: 20px !important; } .sc-dark .card-news.card-sm .card-news-desc { padding-top: 10px !important; } .sc-dark .card-news.card-sm .card-news-desc h3, .sc-dark .card-news.card-sm .card-news-desc .fs-xl { font-size: 12px !important; line-height: 1.4 !important; } .sc-dark .card-news.card-sm .card-news-desc p, .sc-dark .card-news.card-sm .author-date, .sc-dark .card-news.card-sm .author-date * { font-size: 8px !important; } } /* ========================================================= EXTRA SMALL <= 380px ========================================================= */ @media screen and (max-width: 380px) { .sc-dark .content-news { padding-left: 16px !important; padding-right: 16px !important; } .sc-dark .head-desc-center h2, .sc-dark .head-desc-center .fs-3rem { font-size: 23px !important; } .sc-dark .card-news-main .card-news-desc h3, .sc-dark .card-news-main .card-news-desc .fs-2rem { font-size: 14px !important; } .sc-dark .grid-news-sm { gap: 16px !important; } .sc-dark .card-news.card-sm .card-news-desc h3, .sc-dark .card-news.card-sm .card-news-desc .fs-xl { font-size: 11px !important; } } /* homw/Responsive home.css */ /* ========================================================= HOME — HERO + ABOUT FINAL CLEAN RESPONSIVE ========================================================= */ /* ========================================================= GLOBAL SAFETY ========================================================= */ .hero, .sc-about, .hero *, .sc-about * { box-sizing: border-box; } /* ========================================================= HERO SECTION ========================================================= */ .hero { position: relative !important; width: 100% !important; min-height: 100svh !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: #000000 !important; overflow: hidden !important; isolation: isolate; } /* ========================================================= HERO VIDEO ========================================================= */ .hero .hero-video, .hero-video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; z-index: 0 !important; transform: none !important; } /* ========================================================= HERO OVERLAY ========================================================= */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba( 0, 0, 0, 0.34 ); pointer-events: none; } /* ========================================================= HERO CONTENT ========================================================= */ .hero .hero-content, .hero-content { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 900px !important; min-height: 0 !important; height: auto !important; margin: 0 auto !important; padding: 120px 32px 80px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 18px !important; text-align: center !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= HERO TAGLINE ========================================================= */ .hero .tagline { position: relative !important; display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 500 !important; text-align: center !important; white-space: normal !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= HERO DESC WRAPPER ========================================================= */ .hero .hero-desc, .hero-desc { position: relative !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= HERO TITLE ========================================================= */ .hero .hero-desc h1, .hero .hero-desc .fs-4rem, .hero-desc h1, .hero-desc .fs-4rem { position: relative !important; display: block !important; width: 100% !important; max-width: 820px !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: clamp( 48px, 4.15vw, 64px ) !important; line-height: 1.02 !important; font-weight: 400 !important; letter-spacing: -0.04em !important; text-align: center !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= HERO BODY TEXT ========================================================= */ .hero .hero-desc p, .hero .hero-desc .fs-xl, .hero-desc p, .hero-desc .fs-xl { position: relative !important; display: block !important; width: 100% !important; max-width: 620px !important; margin: 0 !important; padding: 0 !important; color: rgba( 255, 255, 255, 0.74 ) !important; font-size: 14px !important; line-height: 1.55 !important; font-weight: 400 !important; text-align: center !important; white-space: normal !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= HERO BUTTON GROUP ========================================================= */ .hero .button-group, .button-group { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: auto !important; margin: 2px 0 0 !important; padding: 0 !important; flex-wrap: wrap !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= HERO DESKTOP ========================================================= */ @media screen and (min-width: 992px) { .hero { /* hampir full viewport seperti screenshot reference */ width: calc(100vw - 32px) !important; max-width: none !important; min-height: calc(100svh - 32px) !important; margin: 16px auto !important; border-radius: 18px !important; left: 50% !important; transform: translateX(-50%) !important; } } /* ========================================================= HERO LARGE DESKTOP ========================================================= */ @media screen and (min-width: 1440px) { .hero .hero-content, .hero-content { max-width: 980px !important; } .hero .hero-desc h1, .hero .hero-desc .fs-4rem, .hero-desc h1, .hero-desc .fs-4rem { max-width: 900px !important; font-size: 60px !important; } .hero .hero-desc p, .hero .hero-desc .fs-xl, .hero-desc p, .hero-desc .fs-xl { max-width: 620px !important; font-size: 14px !important; } } /* ========================================================= HERO TABLET ========================================================= */ @media screen and (max-width: 991px) { .hero { width: 100% !important; min-height: 100svh !important; margin: 0 !important; border-radius: 0 !important; left: auto !important; transform: none !important; } .hero .hero-content, .hero-content { max-width: 720px !important; padding: 100px 24px 64px !important; } .hero .hero-desc h1, .hero .hero-desc .fs-4rem, .hero-desc h1, .hero-desc .fs-4rem { max-width: 660px !important; font-size: 46px !important; line-height: 1.04 !important; } .hero .hero-desc p, .hero .hero-desc .fs-xl, .hero-desc p, .hero-desc .fs-xl { max-width: 560px !important; font-size: 14px !important; } } /* ========================================================= HERO MOBILE ========================================================= */ @media screen and (max-width: 767px) { .hero .hero-content, .hero-content { padding: 88px 20px 56px !important; gap: 16px !important; } .hero .tagline { font-size: 10px !important; } .hero .hero-desc h1, .hero .hero-desc .fs-4rem, .hero-desc h1, .hero-desc .fs-4rem { max-width: 540px !important; font-size: 40px !important; } .hero .hero-desc p, .hero .hero-desc .fs-xl, .hero-desc p, .hero-desc .fs-xl { max-width: 460px !important; font-size: 13px !important; } } /* ========================================================= HERO SMALL MOBILE ========================================================= */ @media screen and (max-width: 478px) { .hero .hero-content, .hero-content { padding: 80px 18px 48px !important; } .hero .hero-desc h1, .hero .hero-desc .fs-4rem, .hero-desc h1, .hero-desc .fs-4rem { max-width: 100% !important; font-size: 34px !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; } .hero .hero-desc p, .hero .hero-desc .fs-xl, .hero-desc p, .hero-desc .fs-xl { max-width: 100% !important; font-size: 12px !important; } .hero .button-group, .button-group { width: 100% !important; flex-direction: column !important; gap: 10px !important; } } /* ========================================================= ABOUT SECTION ========================================================= */ .sc-about { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 80px 0 64px !important; background: #ffffff !important; box-sizing: border-box !important; overflow: hidden !important; } /* ========================================================= ABOUT CONTAINER ========================================================= */ .sc-about .content-about { position: relative !important; width: 100% !important; max-width: 1280px !important; margin: 0 auto !important; padding: 0 48px !important; box-sizing: border-box !important; } /* ========================================================= TOP AREA ========================================================= */ .sc-about .content-about-main { position: relative !important; width: 100% !important; height: auto !important; display: grid !important; grid-template-columns: 220px minmax(0, 1fr) !important; align-items: start !important; column-gap: 72px !important; margin: 0 0 48px !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= TOP CHILD RESET ========================================================= */ .sc-about .content-about-main > * { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= TAGLINE ========================================================= */ .sc-about .content-about-main .tagline, .sc-about .content-about-main .tagline.blue { display: block !important; width: auto !important; margin: 4px 0 0 !important; padding: 0 !important; color: #24b6f1 !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; white-space: nowrap !important; } /* ========================================================= ABOUT DESC ========================================================= */ .sc-about .content-about-desc { position: relative !important; width: 100% !important; max-width: 760px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 18px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= ABOUT HEADING ========================================================= */ .sc-about .content-about-desc h2, .sc-about .content-about-desc .fs-3rem { position: relative !important; display: block !important; width: 100% !important; max-width: 760px !important; margin: 0 !important; padding: 0 !important; color: #171717 !important; font-size: 48px !important; line-height: 1.06 !important; font-weight: 500 !important; letter-spacing: -0.03em !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= ABOUT PARAGRAPH ========================================================= */ .sc-about .content-about-desc p, .sc-about .content-about-desc .fs-xl { position: relative !important; display: block !important; width: 100% !important; max-width: 720px !important; margin: 0 !important; padding: 0 !important; color: rgba( 0, 0, 0, 0.52 ) !important; font-size: 14px !important; line-height: 1.6 !important; font-weight: 400 !important; white-space: normal !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= STATS GRID ========================================================= */ .sc-about .grid-cards-stats { position: relative !important; width: 100% !important; display: grid !important; grid-template-columns: repeat( 3, minmax(0, 1fr) ) !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= CARD ========================================================= */ .sc-about .card-stat-about { position: relative !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 128px !important; margin: 0 !important; padding: 18px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; align-items: flex-start !important; gap: 12px !important; background: #ffffff !important; border: 1px solid rgba( 0, 0, 0, 0.08 ) !important; border-radius: 14px !important; box-sizing: border-box !important; overflow: hidden !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= CARD HEAD ========================================================= */ .sc-about .card-stat-about .card-stat-head { position: relative !important; width: 100% !important; height: auto !important; display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= NUMBER ONLY INSIDE CARD HEAD ========================================================= */ .sc-about .card-stat-about .card-stat-head > .fs-base, .sc-about .card-stat-about .card-stat-head > p, .sc-about .card-stat-about .card-stat-head > h3, .sc-about .card-stat-about .card-stat-head > h4, .sc-about .card-stat-about .card-stat-head > h5, .sc-about .card-stat-about .card-stat-head > h6 { position: relative !important; display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #000000 !important; font-size: 40px !important; line-height: 1 !important; font-weight: 500 !important; letter-spacing: -0.025em !important; white-space: nowrap !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= ICON ========================================================= */ .sc-about .card-stat-about .card-stat-head > div:last-child, .sc-about .card-stat-about .card-stat-head > .icon, .sc-about .card-stat-about .card-stat-head > .w-embed, .sc-about .card-stat-about .card-stat-head > [class*="icon"] { position: relative !important; width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; background: #ffffff !important; border: 1px solid rgba( 0, 0, 0, 0.05 ) !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 ) !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= ICON ASSET ========================================================= */ .sc-about .card-stat-about .card-stat-head svg, .sc-about .card-stat-about .card-stat-head img { display: block !important; width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; object-fit: contain !important; } /* ========================================================= CARD DESCRIPTION IMPORTANT: DIRECT CHILD ONLY ========================================================= */ .sc-about .card-stat-about > .fs-base, .sc-about .card-stat-about > p { position: relative !important; display: block !important; width: 100% !important; max-width: 170px !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: rgba( 0, 0, 0, 0.52 ) !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 400 !important; letter-spacing: 0 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= LOGO AWARD ========================================================= */ .sc-about .logo-award { position: relative !important; width: 100% !important; margin: 32px 0 0 !important; padding: 0 !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= ABOUT LARGE DESKTOP ========================================================= */ @media screen and (min-width: 1440px) { .sc-about .content-about { max-width: 1320px !important; padding: 0 56px !important; } .sc-about .content-about-main { grid-template-columns: 240px minmax(0, 1fr) !important; column-gap: 80px !important; margin-bottom: 56px !important; } .sc-about .content-about-desc h2, .sc-about .content-about-desc .fs-3rem { font-size: 52px !important; } .sc-about .card-stat-about .card-stat-head > .fs-base, .sc-about .card-stat-about .card-stat-head > p, .sc-about .card-stat-about .card-stat-head > h3, .sc-about .card-stat-about .card-stat-head > h4, .sc-about .card-stat-about .card-stat-head > h5, .sc-about .card-stat-about .card-stat-head > h6 { font-size: 42px !important; } } /* ========================================================= ABOUT MEDIUM DESKTOP ========================================================= */ @media screen and (min-width: 992px) and (max-width: 1279px) { .sc-about .content-about { padding: 0 40px !important; } .sc-about .content-about-main { grid-template-columns: 180px minmax(0, 1fr) !important; column-gap: 48px !important; } .sc-about .content-about-desc h2, .sc-about .content-about-desc .fs-3rem { font-size: 44px !important; } .sc-about .grid-cards-stats { gap: 14px !important; } .sc-about .card-stat-about { min-height: 118px !important; padding: 16px !important; } .sc-about .card-stat-about .card-stat-head > .fs-base, .sc-about .card-stat-about .card-stat-head > p, .sc-about .card-stat-about .card-stat-head > h3, .sc-about .card-stat-about .card-stat-head > h4, .sc-about .card-stat-about .card-stat-head > h5, .sc-about .card-stat-about .card-stat-head > h6 { font-size: 34px !important; } .sc-about .card-stat-about > .fs-base, .sc-about .card-stat-about > p { max-width: 150px !important; font-size: 10px !important; } } /* ========================================================= ABOUT TABLET ========================================================= */ @media screen and (max-width: 991px) { .sc-about { padding: 64px 0 56px !important; } .sc-about .content-about { max-width: 760px !important; padding: 0 24px !important; } .sc-about .content-about-main { display: flex !important; flex-direction: column !important; gap: 20px !important; margin-bottom: 40px !important; } .sc-about .content-about-main .tagline, .sc-about .content-about-main .tagline.blue { margin: 0 !important; } .sc-about .content-about-desc { max-width: 680px !important; gap: 16px !important; } .sc-about .content-about-desc h2, .sc-about .content-about-desc .fs-3rem { font-size: 40px !important; } .sc-about .grid-cards-stats { grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; gap: 14px !important; } .sc-about .card-stat-about { min-height: 112px !important; padding: 14px !important; } .sc-about .card-stat-about .card-stat-head > .fs-base, .sc-about .card-stat-about .card-stat-head > p, .sc-about .card-stat-about .card-stat-head > h3, .sc-about .card-stat-about .card-stat-head > h4, .sc-about .card-stat-about .card-stat-head > h5, .sc-about .card-stat-about .card-stat-head > h6 { font-size: 30px !important; } .sc-about .card-stat-about > .fs-base, .sc-about .card-stat-about > p { max-width: 140px !important; font-size: 10px !important; } .sc-about .card-stat-about .card-stat-head > div:last-child, .sc-about .card-stat-about .card-stat-head > .icon, .sc-about .card-stat-about .card-stat-head > .w-embed, .sc-about .card-stat-about .card-stat-head > [class*="icon"] { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; } } /* ========================================================= ABOUT MOBILE ========================================================= */ @media screen and (max-width: 767px) { .sc-about { padding: 56px 0 48px !important; } .sc-about .content-about { padding: 0 20px !important; } .sc-about .content-about-main { gap: 16px !important; margin-bottom: 32px !important; } .sc-about .content-about-desc h2, .sc-about .content-about-desc .fs-3rem { font-size: 34px !important; } .sc-about .content-about-desc p, .sc-about .content-about-desc .fs-xl { font-size: 13px !important; } .sc-about .grid-cards-stats { grid-template-columns: repeat( 2, minmax(0, 1fr) ) !important; gap: 12px !important; } .sc-about .card-stat-about { min-height: 106px !important; padding: 14px !important; } .sc-about .card-stat-about .card-stat-head > .fs-base, .sc-about .card-stat-about .card-stat-head > p, .sc-about .card-stat-about .card-stat-head > h3, .sc-about .card-stat-about .card-stat-head > h4, .sc-about .card-stat-about .card-stat-head > h5, .sc-about .card-stat-about .card-stat-head > h6 { font-size: 28px !important; } .sc-about .card-stat-about > .fs-base, .sc-about .card-stat-about > p { max-width: 130px !important; font-size: 9px !important; line-height: 1.35 !important; } .sc-about .card-stat-about .card-stat-head > div:last-child, .sc-about .card-stat-about .card-stat-head > .icon, .sc-about .card-stat-about .card-stat-head > .w-embed, .sc-about .card-stat-about .card-stat-head > [class*="icon"] { width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important; } } /* ========================================================= ABOUT SMALL MOBILE ========================================================= */ @media screen and (max-width: 478px) { .sc-about { padding: 48px 0 44px !important; } .sc-about .content-about { padding: 0 16px !important; } .sc-about .content-about-desc h2, .sc-about .content-about-desc .fs-3rem { font-size: 30px !important; } .sc-about .grid-cards-stats { grid-template-columns: 1fr !important; gap: 12px !important; } .sc-about .card-stat-about { min-height: 102px !important; padding: 14px !important; } .sc-about .card-stat-about .card-stat-head > .fs-base, .sc-about .card-stat-about .card-stat-head > p, .sc-about .card-stat-about .card-stat-head > h3, .sc-about .card-stat-about .card-stat-head > h4, .sc-about .card-stat-about .card-stat-head > h5, .sc-about .card-stat-about .card-stat-head > h6 { font-size: 26px !important; } .sc-about .card-stat-about > .fs-base, .sc-about .card-stat-about > p { max-width: 100% !important; font-size: 9px !important; } } /* homw/responsive-card-ourfocus.css */ /* ===================================================== JAGA SEMESTA OUR FOCUS — BLUE RESPONSIVE FIX ===================================================== */ /* ===================================================== 01. SECTION COLOR ===================================================== */ /* Mendukung: - Section dengan class sc-focus-blue - Section sc-dark yang memiliki content-our-focus */ :is( .sc-focus-blue, .sc-dark:has(.content-our-focus) ) { --focus-bg: #19A3CD; --focus-light: #EAF6FB; --focus-soft: #DCEFF8; --focus-title: #17384D; --focus-body: #456779; --focus-accent: #168DBB; position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 80px 0 !important; background: var(--focus-bg) !important; color: #FFFFFF !important; box-sizing: border-box !important; } /* ===================================================== 02. MAIN CONTAINER ===================================================== */ .content-our-focus { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: 1280px !important; height: auto !important; margin: 0 auto !important; padding: 0 40px !important; background: transparent !important; box-sizing: border-box !important; } /* ===================================================== 03. HEADER ===================================================== */ .content-our-focus .head-desc-center { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 900px !important; margin: 0 auto 48px !important; padding: 0 !important; gap: 10px !important; text-align: center !important; background: transparent !important; } /* TAGLINE */ .content-our-focus .head-desc-center .tagline.blue { margin: 0 !important; color: #EAF6FB !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } /* MAIN TITLE */ .content-our-focus .head-desc-center h2, .content-our-focus .head-desc-center .fs-3rem { width: 100% !important; max-width: 900px !important; margin: 0 !important; padding: 0 !important; color: #FFFFFF !important; font-size: clamp( 30px, 3.5vw, 48px ) !important; line-height: 1.12 !important; font-weight: 400 !important; letter-spacing: -0.025em !important; text-align: center !important; } /* ===================================================== 04. MAIN GRID ===================================================== */ .content-our-focus .grid-focus { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-flow: row !important; grid-auto-rows: auto !important; align-items: stretch !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; gap: 16px !important; background: transparent !important; box-sizing: border-box !important; } /* ===================================================== 05. ALL CARDS ===================================================== */ .content-our-focus .grid-focus > .card-focus { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 260px !important; margin: 0 !important; padding: 0 !important; gap: 0 !important; border: none !important; border-radius: 16px !important; background: var(--focus-light) !important; box-sizing: border-box !important; overflow: hidden !important; transition: transform 0.3s ease, box-shadow 0.3s ease; } /* ===================================================== 06. ALTERNATING BACKGROUND COLORS ===================================================== */ /* CARD 1 AND 4 */ .content-our-focus .grid-focus > .card-focus:nth-child(1), .content-our-focus .grid-focus > .card-focus:nth-child(4) { background: #EAF6FB !important; } /* CARD 2 AND 3 */ .content-our-focus .grid-focus > .card-focus:nth-child(2), .content-our-focus .grid-focus > .card-focus:nth-child(3) { background: #DCEFF8 !important; } /* ===================================================== 07. IMAGE WRAPPER ===================================================== */ .content-our-focus .card-focus .fig-news { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 260px !important; margin: 0 !important; padding: 0 !important; background: #B8DCE9 !important; border-radius: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } /* ===================================================== 08. IMAGE ===================================================== */ .content-our-focus .card-focus .fig-news img, .content-our-focus .card-focus .img-news { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; border-radius: 0 !important; transition: transform 0.4s ease; } /* ===================================================== 09. IMAGE POSITIONS ===================================================== */ /* CARD 1 IMAGE LEFT / TEXT RIGHT */ .content-our-focus .grid-focus > .card-focus:nth-child(1) .fig-news { grid-column: 1 !important; grid-row: 1 !important; } .content-our-focus .grid-focus > .card-focus:nth-child(1) .card-focus-desc { grid-column: 2 !important; grid-row: 1 !important; } /* CARD 2 TEXT LEFT / IMAGE RIGHT */ .content-our-focus .grid-focus > .card-focus:nth-child(2) .card-focus-desc { grid-column: 1 !important; grid-row: 1 !important; } .content-our-focus .grid-focus > .card-focus:nth-child(2) .fig-news { grid-column: 2 !important; grid-row: 1 !important; } /* CARD 3 TEXT LEFT / IMAGE RIGHT */ .content-our-focus .grid-focus > .card-focus:nth-child(3) .card-focus-desc { grid-column: 1 !important; grid-row: 1 !important; } .content-our-focus .grid-focus > .card-focus:nth-child(3) .fig-news { grid-column: 2 !important; grid-row: 1 !important; } /* CARD 4 IMAGE LEFT / TEXT RIGHT */ .content-our-focus .grid-focus > .card-focus:nth-child(4) .fig-news { grid-column: 1 !important; grid-row: 1 !important; } .content-our-focus .grid-focus > .card-focus:nth-child(4) .card-focus-desc { grid-column: 2 !important; grid-row: 1 !important; } /* ===================================================== 10. CARD CONTENT ===================================================== */ .content-our-focus .card-focus .card-focus-desc { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 100% !important; min-height: 260px !important; margin: 0 !important; padding: 22px !important; gap: 8px !important; color: #17384D !important; border: 0 !important; box-sizing: border-box !important; } /* ===================================================== 11. CARD CONTENT COLORS ===================================================== */ /* Default light blue */ .content-our-focus .card-focus .card-focus-desc { background: #EAF6FB !important; } /* CARD 2 AND 3 */ .content-our-focus .grid-focus > .card-focus:nth-child(2) .card-focus-desc, .content-our-focus .grid-focus > .card-focus:nth-child(3) .card-focus-desc { background: #DCEFF8 !important; } /* ===================================================== 12. ALL TITLES ===================================================== */ .content-our-focus .card-focus .card-focus-desc h1, .content-our-focus .card-focus .card-focus-desc h2, .content-our-focus .card-focus .card-focus-desc h3, .content-our-focus .card-focus .card-focus-desc h4, .content-our-focus .card-focus .card-focus-desc .is-white { width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #17384D !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: left !important; white-space: normal !important; overflow-wrap: break-word !important; } /* ===================================================== 13. DESCRIPTION TEXT ===================================================== */ .content-our-focus .card-focus .card-focus-desc p { width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #456779 !important; font-size: 13px !important; line-height: 1.55 !important; font-weight: 400 !important; text-align: left !important; white-space: normal !important; overflow-wrap: break-word !important; } /* ===================================================== 14. ICONS ===================================================== */ .content-our-focus .card-focus .card-focus-desc svg { display: block !important; flex: 0 0 22px !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; max-width: 22px !important; max-height: 22px !important; margin: 0 0 4px !important; padding: 0 !important; color: #168DBB !important; } /* ===================================================== 15. HOVER ===================================================== */ @media (hover: hover) { .content-our-focus .card-focus:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 32px rgba(8, 64, 94, 0.16) !important; } .content-our-focus .card-focus:hover .img-news { transform: scale(1.035) !important; } } /* ===================================================== 16. LARGE DESKTOP ===================================================== */ @media (min-width: 1440px) { .content-our-focus { max-width: 1320px !important; padding: 0 56px !important; } .content-our-focus .grid-focus { gap: 20px !important; } .content-our-focus .grid-focus > .card-focus { min-height: 280px !important; } .content-our-focus .card-focus .fig-news, .content-our-focus .card-focus .card-focus-desc { min-height: 280px !important; } .content-our-focus .card-focus .card-focus-desc { padding: 26px !important; } } /* ===================================================== 17. TABLET ===================================================== */ @media (max-width: 991px) { :is( .sc-focus-blue, .sc-dark:has(.content-our-focus) ) { padding: 64px 0 !important; } .content-our-focus { max-width: 760px !important; padding: 0 24px !important; } .content-our-focus .head-desc-center { margin-bottom: 36px !important; } .content-our-focus .head-desc-center h2, .content-our-focus .head-desc-center .fs-3rem { font-size: 36px !important; } /* One card per row */ .content-our-focus .grid-focus { grid-template-columns: 1fr !important; gap: 16px !important; } /* Horizontal cards */ .content-our-focus .grid-focus > .card-focus { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; min-height: 220px !important; } .content-our-focus .card-focus .fig-news, .content-our-focus .card-focus .card-focus-desc { min-height: 220px !important; } .content-our-focus .card-focus .card-focus-desc { padding: 24px !important; } } /* ===================================================== 18. MOBILE ===================================================== */ @media (max-width: 767px) { :is( .sc-focus-blue, .sc-dark:has(.content-our-focus) ) { padding: 56px 0 !important; } .content-our-focus { max-width: 100% !important; padding: 0 20px !important; } .content-our-focus .head-desc-center { margin-bottom: 28px !important; } .content-our-focus .head-desc-center h2, .content-our-focus .head-desc-center .fs-3rem { font-size: 30px !important; } .content-our-focus .grid-focus { grid-template-columns: 1fr !important; gap: 14px !important; } /* Stack cards vertically */ .content-our-focus .grid-focus > .card-focus { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; } /* Photo above */ .content-our-focus .card-focus .fig-news { order: 1 !important; grid-column: auto !important; grid-row: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 10 !important; } .content-our-focus .card-focus .img-news { position: absolute !important; width: 100% !important; height: 100% !important; min-height: 0 !important; } /* Content below */ .content-our-focus .card-focus .card-focus-desc { order: 2 !important; grid-column: auto !important; grid-row: auto !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 20px !important; } .content-our-focus .card-focus .card-focus-desc h2, .content-our-focus .card-focus .card-focus-desc h3 { font-size: 19px !important; } .content-our-focus .card-focus .card-focus-desc p { font-size: 13px !important; } } /* ===================================================== 19. SMALL MOBILE ===================================================== */ @media (max-width: 478px) { :is( .sc-focus-blue, .sc-dark:has(.content-our-focus) ) { padding: 48px 0 !important; } .content-our-focus { padding: 0 16px !important; } .content-our-focus .head-desc-center h2, .content-our-focus .head-desc-center .fs-3rem { font-size: 26px !important; } .content-our-focus .grid-focus { gap: 12px !important; } .content-our-focus .card-focus .fig-news { aspect-ratio: 4 / 3 !important; } .content-our-focus .card-focus .card-focus-desc { padding: 18px !important; } .content-our-focus .card-focus .card-focus-desc h2, .content-our-focus .card-focus .card-focus-desc h3 { font-size: 17px !important; } .content-our-focus .card-focus .card-focus-desc p { font-size: 12px !important; } } /* ===================================================== 20. EXTRA SMALL MOBILE ===================================================== */ @media (max-width: 380px) { .content-our-focus { padding: 0 14px !important; } .content-our-focus .head-desc-center h2, .content-our-focus .head-desc-center .fs-3rem { font-size: 23px !important; } .content-our-focus .card-focus .fig-news { aspect-ratio: 3 / 2 !important; } .content-our-focus .card-focus .card-focus-desc { padding: 16px !important; } .content-our-focus .card-focus .card-focus-desc h2, .content-our-focus .card-focus .card-focus-desc h3 { font-size: 16px !important; } } /* ===================================================== 21. ACCESSIBILITY ===================================================== */ @media (prefers-reduced-motion: reduce) { .content-our-focus .card-focus, .content-our-focus .card-focus .img-news { transition: none !important; transform: none !important; } } /* our-story/maps.css */ /* ===================================================== JAGA SEMESTA — OUR CHAPTER BLUE BACKGROUND ORIGINAL DARK CAROUSEL FULL RESPONSIVE CSS ===================================================== */ /* ===================================================== 01. COLOR SYSTEM & SECTION ===================================================== */ .our-chapter { --chapter-bg: #19A3CD; --chapter-blue: #24B6F1; --chapter-blue-hover: #168DBB; --chapter-white: #FFFFFF; --chapter-muted: #EAF6FB; --chapter-dark: #111111; --chapter-cta-bg: #EAF6FB; --chapter-cta-title: #17384D; --chapter-cta-body: #456779; position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: var(--chapter-bg) !important; color: var(--chapter-white) !important; box-sizing: border-box !important; overflow: hidden !important; } /* ===================================================== 02. MAPS WRAPPER ===================================================== */ .our-chapter .maps { position: relative !important; width: 100% !important; height: auto !important; min-height: 980px !important; padding: 80px 0 72px !important; background: transparent !important; box-sizing: border-box !important; overflow: hidden !important; } /* ===================================================== 03. SECTION TITLE ===================================================== */ .our-chapter .text-title { position: relative !important; z-index: 10 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; max-width: 1100px !important; margin: 0 auto 32px !important; padding: 0 40px !important; gap: 8px !important; background: transparent !important; text-align: center !important; box-sizing: border-box !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ===================================================== 04. TAGLINE ===================================================== */ .our-chapter .text-title .tag, .our-chapter .text-title .tagline, .our-chapter .text-title > span { position: relative !important; display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #EAF6FB !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; top: auto !important; left: auto !important; transform: none !important; } /* ===================================================== 05. HEADING ===================================================== */ .our-chapter .text-title h1, .our-chapter .text-title h2 { position: relative !important; width: 100% !important; max-width: 900px !important; margin: 0 !important; padding: 0 !important; color: #FFFFFF !important; font-size: 52px !important; line-height: 1.04 !important; font-weight: 400 !important; letter-spacing: -0.035em !important; text-align: center !important; white-space: normal !important; top: auto !important; left: auto !important; transform: none !important; } /* ===================================================== 06. SUBTITLE ===================================================== */ .our-chapter .text-title p { position: relative !important; width: 100% !important; max-width: 760px !important; margin: 0 !important; padding: 0 !important; color: #EAF6FB !important; font-size: 14px !important; line-height: 1.55 !important; text-align: center !important; top: auto !important; left: auto !important; transform: none !important; } /* ===================================================== 07. MAP BACKGROUND ===================================================== */ .our-chapter .petamaps { position: absolute !important; top: 160px !important; left: 50% !important; z-index: 1 !important; width: 100% !important; max-width: 1320px !important; margin: 0 !important; padding: 0 40px !important; opacity: 0.42 !important; pointer-events: none !important; transform: translateX(-50%) !important; box-sizing: border-box !important; overflow: hidden !important; } /* ===================================================== 08. MAP SVG ===================================================== */ .our-chapter .petamaps > svg { position: relative !important; display: block !important; width: 100% !important; height: auto !important; margin: 0 auto !important; filter: brightness(0) invert(1) !important; } /* ===================================================== 09. CAROUSEL CONTAINER ===================================================== */ .our-chapter .all-list { --card-width: 29rem; --card-height: 38rem; --card-overlap: 6rem; position: relative !important; z-index: 5 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; max-width: none !important; min-height: 50rem !important; margin: 0 !important; gap: 0 !important; padding-top: 64px !important; padding-bottom: 64px !important; padding-left: calc( 50% - var(--card-width) / 2 ) !important; padding-right: calc( 50% - var(--card-width) / 2 ) !important; background: transparent !important; overflow-x: auto !important; overflow-y: visible !important; scroll-snap-type: x mandatory !important; scroll-behavior: smooth !important; scroll-padding-inline: calc( 50% - var(--card-width) / 2 ) !important; overscroll-behavior-x: contain !important; scrollbar-width: none !important; -ms-overflow-style: none !important; -webkit-overflow-scrolling: touch !important; box-sizing: border-box !important; } .our-chapter .all-list::-webkit-scrollbar { display: none !important; } /* ===================================================== 10. CAROUSEL CARD BASE KEEP ORIGINAL DARK STYLE ===================================================== */ .our-chapter .all-list > .list-chapter { position: relative !important; flex: 0 0 var(--card-width) !important; width: var(--card-width) !important; min-width: var(--card-width) !important; max-width: var(--card-width) !important; height: var(--card-height) !important; min-height: var(--card-height) !important; margin: 0 !important; padding: 0 !important; background: #111111 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; overflow: hidden !important; scroll-snap-align: center !important; scroll-snap-stop: always !important; transform-origin: center center !important; transform: scale(0.84) !important; opacity: 0.38 !important; filter: brightness(0.58) !important; z-index: 2 !important; box-sizing: border-box !important; transition: transform 0.45s cubic-bezier(.22,.8,.2,1), opacity 0.35s ease, filter 0.35s ease, box-shadow 0.35s ease !important; } /* ===================================================== 11. CARD OVERLAP ===================================================== */ .our-chapter .all-list > .list-chapter + .list-chapter { margin-left: calc(var(--card-overlap) * -1) !important; } .our-chapter .all-list > .list-chapter:first-child { margin-left: 0 !important; } /* ===================================================== 12. ACTIVE CARD ===================================================== */ .our-chapter .all-list > .list-chapter.is-active { transform: scale(1) !important; opacity: 1 !important; filter: brightness(1) !important; z-index: 30 !important; box-shadow: 0 32px 80px rgba(7, 55, 82, 0.3) !important; } /* ===================================================== 13. PREVIOUS CARD ===================================================== */ .our-chapter .all-list > .list-chapter.is-prev { transform: translateX(-20px) scale(0.9) !important; opacity: 0.62 !important; filter: brightness(0.68) !important; z-index: 12 !important; } /* ===================================================== 14. NEXT CARD ===================================================== */ .our-chapter .all-list > .list-chapter.is-next { transform: translateX(20px) scale(0.9) !important; opacity: 0.62 !important; filter: brightness(0.68) !important; z-index: 12 !important; } /* ===================================================== 15. DISTANT CARDS ===================================================== */ .our-chapter .all-list > .list-chapter.is-far { transform: scale(0.84) !important; opacity: 0.28 !important; filter: brightness(0.5) !important; z-index: 2 !important; } /* ===================================================== 16. CARD IMAGE ===================================================== */ .our-chapter .all-list > .list-chapter .img-list { position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center center !important; transform: scale(1) !important; transition: transform 0.45s ease !important; } .our-chapter .all-list > .list-chapter.is-active .img-list { transform: scale(1.025) !important; } /* ===================================================== 17. ORIGINAL DARK CARD GRADIENT ===================================================== */ .our-chapter .all-list > .list-chapter::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.01) 0%, rgba(0, 0, 0, 0.05) 32%, rgba(0, 0, 0, 0.26) 55%, rgba(0, 0, 0, 0.72) 78%, rgba(0, 0, 0, 0.96) 100% ); } /* ===================================================== 18. CARD INFORMATION ===================================================== */ .our-chapter .all-list > .list-chapter .infolist { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 5 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; width: 100% !important; height: auto !important; gap: 14px !important; margin: 0 !important; padding: 24px !important; background: transparent !important; box-sizing: border-box !important; transform: none !important; } /* ===================================================== 19. CARD TEXT WRAPPER ===================================================== */ .our-chapter .all-list > .list-chapter .infolist > div { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; height: auto !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; transform: none !important; overflow: visible !important; } /* ===================================================== 20. CARD TITLE ===================================================== */ .our-chapter .all-list > .list-chapter .infolist > div > h3 { position: relative !important; display: -webkit-box !important; width: 100% !important; max-width: 20ch !important; margin: 0 !important; padding: 0 !important; color: #FFFFFF !important; font-size: 20px !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: -0.02em !important; white-space: normal !important; overflow: hidden !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; } .our-chapter .all-list > .list-chapter.is-active .infolist > div > h3 { font-size: 28px !important; line-height: 1.15 !important; } /* ===================================================== 21. CARD DESCRIPTION ===================================================== */ .our-chapter .all-list > .list-chapter .infolist > div > p { position: relative !important; display: -webkit-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, 0.78) !important; font-size: 13px !important; line-height: 1.5 !important; font-weight: 400 !important; white-space: normal !important; overflow: hidden !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; opacity: 0.78 !important; } .our-chapter .all-list > .list-chapter.is-active .infolist > div > p { opacity: 1 !important; font-size: 14px !important; } /* ===================================================== 22. CARD VIDEO BUTTON ===================================================== */ .our-chapter .all-list > .list-chapter .infolist > .button-primary, .our-chapter .all-list > .list-chapter .infolist > button { position: relative !important; z-index: 6 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 142px !important; min-height: 42px !important; margin: 2px 0 0 !important; padding: 10px 16px !important; background: var(--chapter-blue) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 999px !important; font-size: 11px !important; line-height: 1 !important; font-weight: 600 !important; letter-spacing: 0.02em !important; white-space: nowrap !important; opacity: 0.8 !important; transform: none !important; } .our-chapter .all-list > .list-chapter.is-active .infolist > .button-primary, .our-chapter .all-list > .list-chapter.is-active .infolist > button { opacity: 1 !important; } /* Original video icon */ .our-chapter .all-list > .list-chapter .button-primary::before { content: "▶"; margin-right: 7px; font-size: 8px; } /* ===================================================== 23. BOTTOM CTA REPLACE BLACK WITH LIGHT BLUE ===================================================== */ .our-chapter .cta-chapter { position: relative !important; z-index: 10 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; width: calc(100% - 80px) !important; max-width: 1280px !important; min-height: 0 !important; height: auto !important; margin: 24px auto 0 !important; padding: 28px 32px !important; column-gap: 48px !important; row-gap: 16px !important; background: var(--chapter-cta-bg) !important; border: 1px solid rgba(255, 255, 255, 0.65) !important; border-radius: 16px !important; box-shadow: 0 12px 32px rgba(9, 70, 104, 0.12) !important; box-sizing: border-box !important; overflow: visible !important; transform: none !important; } /* ===================================================== 24. CTA TEXT ===================================================== */ .our-chapter .cta-chapter .text-cta-chapter { position: relative !important; width: 100% !important; max-width: 900px !important; margin: 0 !important; padding: 0 !important; color: var(--chapter-cta-title) !important; font-size: 17px !important; line-height: 1.55 !important; font-weight: 400 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; transform: none !important; } /* ===================================================== 25. CTA BUTTON WRAPPER ===================================================== */ .our-chapter .cta-chapter > div { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; width: auto !important; margin: 0 !important; padding: 0 !important; flex-shrink: 0 !important; transform: none !important; } /* ===================================================== 26. CTA BUTTON ===================================================== */ .our-chapter .cta-chapter .button-primary, .our-chapter .cta-chapter button, .our-chapter .cta-chapter a { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 118px !important; min-height: 42px !important; margin: 0 !important; padding: 10px 16px !important; background: var(--chapter-blue) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 999px !important; font-size: 12px !important; line-height: 1 !important; font-weight: 500 !important; text-decoration: none !important; white-space: nowrap !important; transform: none !important; } /* ===================================================== 27. BUTTON HOVER ===================================================== */ @media (hover: hover) { .our-chapter .cta-chapter button:hover, .our-chapter .cta-chapter a:hover, .our-chapter .all-list .button-primary:hover { background: var(--chapter-blue-hover) !important; } } /* ===================================================== 28. LARGE DESKTOP ===================================================== */ @media (min-width: 1440px) { .our-chapter .maps { min-height: 1040px !important; } .our-chapter .all-list { --card-width: 30rem; --card-height: 39rem; --card-overlap: 6.25rem; min-height: 52rem !important; } .our-chapter .all-list > .list-chapter.is-active .infolist > div > h3 { font-size: 30px !important; } .our-chapter .cta-chapter { width: calc(100% - 112px) !important; max-width: 1320px !important; padding: 32px 36px !important; column-gap: 64px !important; } .our-chapter .cta-chapter .text-cta-chapter { font-size: 18px !important; } } /* ===================================================== 29. MEDIUM DESKTOP ===================================================== */ @media (min-width: 992px) and (max-width: 1279px) { .our-chapter .maps { min-height: 880px !important; padding: 72px 0 64px !important; } .our-chapter .text-title { padding: 0 32px !important; } .our-chapter .text-title h1, .our-chapter .text-title h2 { font-size: 44px !important; } .our-chapter .petamaps { padding: 0 32px !important; } .our-chapter .all-list { --card-width: 25rem; --card-height: 34rem; --card-overlap: 4.5rem; min-height: 44rem !important; padding-top: 52px !important; padding-bottom: 52px !important; } .our-chapter .all-list > .list-chapter .infolist { padding: 20px !important; } .our-chapter .all-list > .list-chapter.is-active .infolist > div > h3 { font-size: 24px !important; } .our-chapter .cta-chapter { width: calc(100% - 64px) !important; padding: 24px 28px !important; column-gap: 32px !important; } .our-chapter .cta-chapter .text-cta-chapter { font-size: 15px !important; } } /* ===================================================== 30. TABLET ===================================================== */ @media (min-width: 768px) and (max-width: 991px) { .our-chapter .maps { min-height: 760px !important; padding: 64px 0 56px !important; } .our-chapter .text-title { padding: 0 24px !important; } .our-chapter .text-title h1, .our-chapter .text-title h2 { font-size: 36px !important; } .our-chapter .text-title p { font-size: 12px !important; } .our-chapter .petamaps { padding: 0 24px !important; opacity: 0.32 !important; } .our-chapter .all-list { --card-width: 22rem; --card-height: 30rem; --card-overlap: 2.5rem; min-height: 38rem !important; padding-top: 40px !important; padding-bottom: 44px !important; } .our-chapter .all-list > .list-chapter.is-prev { transform: translateX(-8px) scale(0.92) !important; } .our-chapter .all-list > .list-chapter.is-next { transform: translateX(8px) scale(0.92) !important; } .our-chapter .all-list > .list-chapter .infolist { padding: 18px !important; } .our-chapter .all-list > .list-chapter.is-active .infolist > div > h3 { font-size: 21px !important; } .our-chapter .cta-chapter { width: calc(100% - 48px) !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 24px !important; padding: 22px 24px !important; } .our-chapter .cta-chapter .text-cta-chapter { font-size: 13px !important; } } /* ===================================================== 31. MOBILE ===================================================== */ @media (max-width: 767px) { .our-chapter .maps { min-height: auto !important; padding: 56px 0 48px !important; } .our-chapter .text-title { padding: 0 20px !important; margin-bottom: 18px !important; } .our-chapter .text-title h1, .our-chapter .text-title h2 { font-size: 30px !important; line-height: 1.08 !important; } .our-chapter .text-title p { font-size: 11px !important; } .our-chapter .petamaps { top: 140px !important; padding: 0 20px !important; opacity: 0.28 !important; } .our-chapter .all-list { --card-width: 84vw; --card-height: auto; --card-overlap: 0px; min-height: 0 !important; gap: 12px !important; padding-top: 28px !important; padding-bottom: 32px !important; padding-left: 8vw !important; padding-right: 8vw !important; scroll-padding-inline: 8vw !important; } .our-chapter .all-list > .list-chapter { height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 5 !important; margin-left: 0 !important; transform: scale(0.96) !important; } .our-chapter .all-list > .list-chapter + .list-chapter { margin-left: 0 !important; } .our-chapter .all-list > .list-chapter.is-active { transform: scale(1) !important; } .our-chapter .all-list > .list-chapter.is-prev, .our-chapter .all-list > .list-chapter.is-next, .our-chapter .all-list > .list-chapter.is-far { transform: scale(0.96) !important; } .our-chapter .all-list > .list-chapter .infolist { padding: 16px !important; gap: 10px !important; } .our-chapter .all-list > .list-chapter .infolist > div > h3, .our-chapter .all-list > .list-chapter.is-active .infolist > div > h3 { font-size: 18px !important; } .our-chapter .all-list > .list-chapter .infolist > div > p, .our-chapter .all-list > .list-chapter.is-active .infolist > div > p { font-size: 11px !important; } /* CTA mobile */ .our-chapter .cta-chapter { width: calc(100% - 40px) !important; grid-template-columns: 1fr !important; gap: 16px !important; margin-top: 16px !important; padding: 20px !important; } .our-chapter .cta-chapter .text-cta-chapter { max-width: 100% !important; font-size: 12px !important; line-height: 1.5 !important; } .our-chapter .cta-chapter > div { width: 100% !important; justify-content: flex-start !important; } .our-chapter .cta-chapter .button-primary, .our-chapter .cta-chapter button, .our-chapter .cta-chapter a { min-width: 110px !important; min-height: 38px !important; padding: 9px 14px !important; font-size: 10px !important; } } /* ===================================================== 32. SMALL MOBILE ===================================================== */ @media (max-width: 480px) { .our-chapter .text-title { padding: 0 16px !important; } .our-chapter .text-title h1, .our-chapter .text-title h2 { font-size: 27px !important; } .our-chapter .all-list { --card-width: 88vw; padding-left: 6vw !important; padding-right: 6vw !important; scroll-padding-inline: 6vw !important; } .our-chapter .all-list > .list-chapter .infolist { padding: 14px !important; } .our-chapter .all-list > .list-chapter .infolist > div > h3, .our-chapter .all-list > .list-chapter.is-active .infolist > div > h3 { font-size: 16px !important; } .our-chapter .all-list > .list-chapter .infolist > div > p, .our-chapter .all-list > .list-chapter.is-active .infolist > div > p { font-size: 10px !important; } .our-chapter .cta-chapter { width: calc(100% - 32px) !important; gap: 14px !important; padding: 18px 16px !important; } .our-chapter .cta-chapter .text-cta-chapter { font-size: 11px !important; } .our-chapter .cta-chapter .button-primary, .our-chapter .cta-chapter button, .our-chapter .cta-chapter a { min-width: 104px !important; min-height: 36px !important; padding: 8px 13px !important; font-size: 9.5px !important; } } /* ===================================================== 33. ACCESSIBILITY ===================================================== */ @media (prefers-reduced-motion: reduce) { .our-chapter .all-list { scroll-behavior: auto !important; } .our-chapter .all-list > .list-chapter, .our-chapter .all-list > .list-chapter .img-list { transition: none !important; } } /* our-story/ourstory responsive.css */ /* ========================================================= GET INVOLVED HERO — FINAL NATIVE VIDEO RESPONSIVE ========================================================= */ /* ========================================================= HERO SECTION ========================================================= */ .hero-get-container { position: relative !important; width: 100% !important; height: 100svh !important; min-height: 100svh !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background: #000000 !important; } /* ========================================================= HERO INNER ========================================================= */ .hero-getinv { position: relative !important; width: 100% !important; height: 100svh !important; min-height: 100svh !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background: #000000 !important; } /* ========================================================= NATIVE INSTATIC VIDEO ========================================================= */ .hero-video-getinv { position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background: #000000 !important; object-fit: cover !important; object-position: center center !important; aspect-ratio: auto !important; border: 0 !important; transform: none !important; pointer-events: none !important; } /* ========================================================= IF INSTATIC WRAPS A VIDEO ELEMENT ========================================================= */ .hero-video-getinv video, .hero-video-getinv > div, .hero-video-getinv > div video { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; object-fit: cover !important; object-position: center center !important; aspect-ratio: auto !important; border: 0 !important; transform: none !important; pointer-events: none !important; } /* ========================================================= DARK OVERLAY ========================================================= */ .hero-getinv::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; background: rgba( 0, 0, 0, 0.45 ) !important; pointer-events: none !important; } /* ========================================================= TEXT WRAPPER ========================================================= */ .hero-getinv-text { position: relative !important; z-index: 2 !important; width: 100% !important; max-width: 960px !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; padding: 120px 32px 80px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 20px !important; text-align: center !important; box-sizing: border-box !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= EYEBROW ========================================================= */ .hero-getinv-text .hero-desc { position: relative !important; display: block !important; width: 100% !important; max-width: 520px !important; margin: 0 !important; padding: 0 !important; color: rgba( 255, 255, 255, 0.72 ) !important; font-size: 14px !important; line-height: 1.45 !important; text-align: center !important; white-space: normal !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= TITLE + DESCRIPTION ========================================================= */ .hero-getinv-text .text-desc { position: relative !important; width: 100% !important; max-width: 900px !important; height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= HERO TITLE ========================================================= */ .hero-getinv-text .hero-title-getinv, .hero-getinv-text h1 { position: relative !important; display: block !important; width: 100% !important; max-width: 900px !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 72px !important; line-height: 0.98 !important; font-weight: 400 !important; letter-spacing: -0.045em !important; text-align: center !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= HERO PARAGRAPH ========================================================= */ .hero-getinv-text .text-desc p { position: relative !important; display: block !important; width: 100% !important; max-width: 620px !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: rgba( 255, 255, 255, 0.72 ) !important; font-size: 16px !important; line-height: 1.55 !important; text-align: center !important; white-space: normal !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= CTA BUTTON ========================================================= */ .hero-getinv-text .button-primary, .hero-getinv-text button, .hero-getinv-text a.button-primary { position: relative !important; z-index: 2 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 44px !important; margin: 4px 0 0 !important; padding: 11px 18px !important; border-radius: 999px !important; font-size: 14px !important; line-height: 1 !important; white-space: nowrap !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= LARGE DESKTOP >= 1440px ========================================================= */ @media screen and (min-width: 1440px) { .hero-getinv-text { max-width: 1100px !important; padding: 140px 48px 96px !important; gap: 22px !important; } .hero-getinv-text .hero-title-getinv, .hero-getinv-text h1 { max-width: 1000px !important; font-size: 84px !important; } .hero-getinv-text .text-desc p { font-size: 17px !important; } } /* ========================================================= MEDIUM DESKTOP 992px — 1279px ========================================================= */ @media screen and (min-width: 992px) and (max-width: 1279px) { .hero-getinv-text { max-width: 860px !important; padding: 110px 40px 72px !important; } .hero-getinv-text .hero-title-getinv, .hero-getinv-text h1 { max-width: 820px !important; font-size: 64px !important; } .hero-getinv-text .text-desc p { font-size: 15px !important; } } /* ========================================================= TABLET <= 991px ========================================================= */ @media screen and (max-width: 991px) { .hero-get-container, .hero-getinv { width: 100% !important; height: 100svh !important; min-height: 100svh !important; overflow: hidden !important; } .hero-video-getinv, .hero-video-getinv video, .hero-video-getinv > div, .hero-video-getinv > div video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: 50% 50% !important; aspect-ratio: auto !important; transform: none !important; } .hero-getinv-text { max-width: 720px !important; padding: 110px 24px 64px !important; gap: 18px !important; } .hero-getinv-text .hero-desc { max-width: 460px !important; font-size: 12px !important; } .hero-getinv-text .text-desc { max-width: 680px !important; gap: 14px !important; } .hero-getinv-text .hero-title-getinv, .hero-getinv-text h1 { max-width: 680px !important; font-size: 52px !important; line-height: 1 !important; } .hero-getinv-text .text-desc p { max-width: 540px !important; font-size: 14px !important; } } /* ========================================================= MOBILE LANDSCAPE <= 767px ========================================================= */ @media screen and (max-width: 767px) { .hero-get-container, .hero-getinv { height: 100svh !important; min-height: 100svh !important; } .hero-video-getinv, .hero-video-getinv video, .hero-video-getinv > div, .hero-video-getinv > div video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: 50% 50% !important; aspect-ratio: auto !important; transform: none !important; } .hero-getinv-text { max-width: 100% !important; padding: 96px 20px 56px !important; gap: 16px !important; } .hero-getinv-text .hero-desc { max-width: 360px !important; font-size: 11px !important; } .hero-getinv-text .text-desc { max-width: 100% !important; gap: 12px !important; } .hero-getinv-text .hero-title-getinv, .hero-getinv-text h1 { max-width: 560px !important; font-size: 44px !important; line-height: 1.02 !important; letter-spacing: -0.035em !important; } .hero-getinv-text .text-desc p { max-width: 440px !important; font-size: 13px !important; line-height: 1.5 !important; } .hero-getinv-text .button-primary, .hero-getinv-text button, .hero-getinv-text a.button-primary { min-height: 40px !important; padding: 10px 16px !important; font-size: 13px !important; } } /* ========================================================= MOBILE PORTRAIT <= 478px ========================================================= */ @media screen and (max-width: 478px) { .hero-get-container, .hero-getinv, .hero-video-getinv { width: 100% !important; height: 100svh !important; min-height: 100svh !important; } .hero-video-getinv, .hero-video-getinv video, .hero-video-getinv > div, .hero-video-getinv > div video { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: 50% 50% !important; aspect-ratio: auto !important; transform: none !important; } .hero-getinv-text { padding: 88px 20px 48px !important; gap: 14px !important; } .hero-getinv-text .hero-desc { max-width: 300px !important; font-size: 10px !important; } .hero-getinv-text .hero-title-getinv, .hero-getinv-text h1 { max-width: 100% !important; font-size: 36px !important; line-height: 1.04 !important; letter-spacing: -0.03em !important; } .hero-getinv-text .text-desc p { max-width: 320px !important; font-size: 12px !important; } .hero-getinv-text .button-primary, .hero-getinv-text button, .hero-getinv-text a.button-primary { min-height: 38px !important; padding: 9px 14px !important; font-size: 12px !important; } } /* ========================================================= EXTRA SMALL <= 380px ========================================================= */ @media screen and (max-width: 380px) { .hero-getinv-text { padding: 80px 16px 44px !important; } .hero-getinv-text .hero-title-getinv, .hero-getinv-text h1 { font-size: 32px !important; } .hero-getinv-text .text-desc p { max-width: 290px !important; font-size: 11px !important; } } /* ========================================================= FALLBACK FOR BROWSERS WITHOUT SVH ========================================================= */ @supports not ( height: 100svh ) { .hero-get-container, .hero-getinv { height: 100vh !important; min-height: 100vh !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media ( prefers-reduced-motion: reduce ) { .hero-video-getinv, .hero-video-getinv video { transition: none !important; } } /* src/styles/blog-detail.css */ /* ========================================================= BLOG DETAIL — FULL RESPONSIVE FINAL DESKTOP / TABLET / MOBILE ========================================================= */ /* ========================================================= PAGE WRAPPER ========================================================= */ .blog-content-list-body { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 300px !important; align-items: start !important; column-gap: 48px !important; row-gap: 48px !important; width: 100% !important; max-width: 1240px !important; margin: 0 auto !important; padding: 56px 40px 80px !important; box-sizing: border-box !important; background: #ffffff !important; color: #171717 !important; overflow: visible !important; } /* ========================================================= LEFT COLUMN ========================================================= */ .detail-blog { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; inset: auto !important; transform: none !important; } /* ========================================================= BLOG ALL ========================================================= */ .detail-blog .blog-all { position: relative !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; inset: auto !important; transform: none !important; } /* ========================================================= BREADCRUMB ========================================================= */ .detail-blog .breadcrumb, .breadcrumb { position: relative !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; width: auto !important; max-width: max-content !important; margin: 0 0 28px !important; padding: 0 !important; color: #777777 !important; cursor: pointer !important; inset: auto !important; transform: none !important; } /* ========================================================= BREADCRUMB ICON ========================================================= */ .detail-blog .breadcrumb svg, .breadcrumb svg { display: block !important; width: 14px !important; height: 14px !important; min-width: 14px !important; min-height: 14px !important; max-width: 14px !important; max-height: 14px !important; margin: 0 !important; flex-shrink: 0 !important; color: #777777 !important; fill: currentColor !important; stroke: currentColor !important; } /* ========================================================= BREADCRUMB TEXT ========================================================= */ .detail-blog .breadcrumb p, .breadcrumb p { margin: 0 !important; padding: 0 !important; color: #777777 !important; font-size: 12px !important; line-height: 1.4 !important; font-weight: 400 !important; white-space: nowrap !important; } /* ========================================================= BREADCRUMB HOVER ========================================================= */ @media (hover: hover) { .breadcrumb:hover { color: #24b6f1 !important; } .breadcrumb:hover svg { color: #24b6f1 !important; transform: translateX(-2px) !important; } .breadcrumb:hover p { color: #24b6f1 !important; } } /* ========================================================= MAIN BLOG BODY ========================================================= */ .detail-blog .blog-all > .blog-body { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; inset: auto !important; transform: none !important; } /* ========================================================= BLOG HEADER ========================================================= */ .detail-blog .blog-header { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; width: 100% !important; height: auto !important; margin: 0 0 24px !important; padding: 0 !important; inset: auto !important; transform: none !important; } /* ========================================================= BLOG TITLE ========================================================= */ .detail-blog .blog-title { position: relative !important; display: block !important; width: 100% !important; max-width: 16ch !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #171717 !important; font-size: 48px !important; line-height: 1.03 !important; font-weight: 500 !important; letter-spacing: -0.035em !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; overflow: visible !important; inset: auto !important; transform: none !important; } /* ========================================================= BLOG META ========================================================= */ .detail-blog .blog-meta { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* AUTHOR */ .detail-blog .blog-meta .blog-author { margin: 0 !important; color: #24b6f1 !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 500 !important; } /* DATE */ .detail-blog .blog-meta .blog-date { margin: 0 !important; color: #999999 !important; font-size: 10px !important; line-height: 1.4 !important; } .detail-blog .blog-meta .blog-date::before { content: "•"; margin-right: 8px; color: #bbbbbb !important; } /* ========================================================= MAIN COVER IMAGE ========================================================= */ .detail-blog .blog-body > .blog-cover { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 28px !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; object-position: center center !important; border-radius: 6px !important; overflow: hidden !important; inset: auto !important; transform: none !important; } /* ========================================================= COVER WRAPPER SUPPORT ========================================================= */ .detail-blog .blog-body .blog-cover img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center !important; } /* ========================================================= BODY PARAGRAPH ========================================================= */ .detail-blog .blog-body > p.blog-author { position: relative !important; display: block !important; width: 100% !important; max-width: 720px !important; height: auto !important; margin: 0 0 20px !important; padding: 0 !important; color: #5f5f5f !important; font-size: 14px !important; line-height: 1.72 !important; font-weight: 400 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; inset: auto !important; transform: none !important; } /* ========================================================= RICH TEXT ========================================================= */ .detail-blog .blog-richtext { position: relative !important; display: block !important; width: 100% !important; max-width: 720px !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #5f5f5f !important; font-size: 14px !important; line-height: 1.72 !important; font-weight: 400 !important; overflow: visible !important; } /* ========================================================= PARAGRAPH ========================================================= */ .detail-blog .blog-richtext p { margin: 0 0 20px !important; } .detail-blog .blog-richtext p:first-child { margin-top: 0 !important; } .detail-blog .blog-richtext p:last-child { margin-bottom: 0 !important; } /* ========================================================= ARTICLE H2 ========================================================= */ .detail-blog .blog-richtext h2 { margin: 36px 0 12px !important; color: #171717 !important; font-size: 28px !important; line-height: 1.2 !important; font-weight: 600 !important; letter-spacing: -0.02em !important; } /* ========================================================= ARTICLE H3 ========================================================= */ .detail-blog .blog-richtext h3 { margin: 28px 0 10px !important; color: #171717 !important; font-size: 21px !important; line-height: 1.25 !important; font-weight: 600 !important; } /* ========================================================= LIST ========================================================= */ .detail-blog .blog-richtext ul, .detail-blog .blog-richtext ol { margin: 16px 0 22px 20px !important; padding: 0 !important; } .detail-blog .blog-richtext li { margin-bottom: 8px !important; } /* ========================================================= LINKS ========================================================= */ .detail-blog .blog-richtext a { color: #24b6f1 !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* ========================================================= TAG ========================================================= */ .detail-blog .blog-tag, .detail-blog .blog-tags { position: relative !important; display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; } .detail-blog .blog-tag { margin-top: 24px !important; } .detail-blog .blog-tag p, .detail-blog .blog-tags p { margin: 0 !important; font-size: 10px !important; line-height: 1.4 !important; } .detail-blog .blog-tag p:first-child, .detail-blog .blog-tags p:first-child { color: #999999 !important; } .detail-blog .blog-tag p:last-child, .detail-blog .blog-tags p:last-child { color: #24b6f1 !important; } /* ========================================================= SIDEBAR ========================================================= */ .blog-list-row { position: sticky !important; top: 32px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; align-self: start !important; overflow: visible !important; } /* ========================================================= SIDEBAR HEADING ========================================================= */ .blog-list-row::before { content: "Newest Post"; display: block !important; width: fit-content !important; margin: 0 0 12px !important; padding: 0 0 8px !important; color: #171717 !important; border-bottom: 2px solid #24b6f1 !important; font-size: 16px !important; line-height: 1.2 !important; font-weight: 600 !important; } /* ========================================================= SIDEBAR CARD ========================================================= */ .blog-list-row .list-blog-row { position: relative !important; display: grid !important; grid-template-columns: 86px minmax(0, 1fr) !important; align-items: start !important; gap: 12px !important; width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 12px 0 !important; border-bottom: 1px solid rgba( 0, 0, 0, 0.08 ) !important; box-sizing: border-box !important; } /* ========================================================= SIDEBAR IMAGE ========================================================= */ .blog-list-row .list-blog-row > .blog-cover { position: relative !important; grid-column: 1 !important; grid-row: 1 !important; display: block !important; width: 86px !important; height: 64px !important; min-width: 86px !important; margin: 0 !important; object-fit: cover !important; object-position: center center !important; border-radius: 4px !important; overflow: hidden !important; inset: auto !important; transform: none !important; } /* ========================================================= SIDEBAR BODY ========================================================= */ .blog-list-row .list-blog-row > .blog-body { position: relative !important; grid-column: 2 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 4px !important; width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; inset: auto !important; transform: none !important; } /* ========================================================= SIDEBAR TITLE ========================================================= */ .blog-list-row .title-list-blog { display: -webkit-box !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color: #171717 !important; font-size: 11px !important; line-height: 1.35 !important; font-weight: 600 !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; } /* ========================================================= SIDEBAR META ========================================================= */ .blog-list-row .list-blog-row .blog-body p { width: 100% !important; margin: 0 !important; padding: 0 !important; color: #999999 !important; font-size: 9px !important; line-height: 1.35 !important; } /* ========================================================= LARGE DESKTOP >= 1440 ========================================================= */ @media screen and (min-width: 1440px) { .blog-content-list-body { grid-template-columns: minmax(0, 1fr) 320px !important; max-width: 1320px !important; column-gap: 56px !important; padding: 64px 48px 88px !important; } .detail-blog .blog-title { max-width: 17ch !important; font-size: 52px !important; } .detail-blog .blog-body > p.blog-author, .detail-blog .blog-richtext { max-width: 760px !important; } .blog-list-row .list-blog-row { grid-template-columns: 92px minmax(0, 1fr) !important; } .blog-list-row .list-blog-row > .blog-cover { width: 92px !important; min-width: 92px !important; height: 68px !important; } .blog-list-row .title-list-blog { font-size: 12px !important; } } /* ========================================================= DESKTOP MEDIUM 992 — 1279 ========================================================= */ @media screen and (min-width: 992px) and (max-width: 1279px) { .blog-content-list-body { grid-template-columns: minmax(0, 1fr) 260px !important; column-gap: 32px !important; padding: 48px 32px 64px !important; } .detail-blog .blog-title { max-width: 18ch !important; font-size: 42px !important; } .detail-blog .blog-body > p.blog-author, .detail-blog .blog-richtext { max-width: 680px !important; font-size: 13px !important; } .blog-list-row .list-blog-row { grid-template-columns: 76px minmax(0, 1fr) !important; gap: 10px !important; } .blog-list-row .list-blog-row > .blog-cover { width: 76px !important; min-width: 76px !important; height: 58px !important; } .blog-list-row .title-list-blog { font-size: 10px !important; } } /* ========================================================= TABLET <= 991 ========================================================= */ @media screen and (max-width: 991px) { .blog-content-list-body { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 820px !important; height: auto !important; margin: 0 auto !important; padding: 48px 24px 64px !important; gap: 48px !important; grid-template-columns: none !important; grid-template-rows: none !important; overflow: visible !important; } /* ARTICLE */ .detail-blog { position: relative !important; display: block !important; float: none !important; flex: 0 0 auto !important; order: 1 !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; inset: auto !important; transform: none !important; overflow: visible !important; } /* INNER */ .detail-blog .blog-all { position: relative !important; display: block !important; float: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; inset: auto !important; transform: none !important; overflow: visible !important; } /* BLOG BODY */ .detail-blog .blog-all > .blog-body { position: relative !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; inset: auto !important; transform: none !important; overflow: visible !important; } /* HEADER */ .detail-blog .blog-header { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; height: auto !important; margin: 0 0 24px !important; padding: 0 !important; inset: auto !important; transform: none !important; } /* TITLE */ .detail-blog .blog-title { width: 100% !important; max-width: 18ch !important; font-size: 40px !important; line-height: 1.05 !important; } /* COVER */ .detail-blog .blog-body > .blog-cover { width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 10 !important; margin: 0 0 28px !important; } /* BODY */ .detail-blog .blog-body > p.blog-author, .detail-blog .blog-richtext { position: relative !important; display: block !important; float: none !important; width: 100% !important; max-width: 720px !important; height: auto !important; min-height: 0 !important; margin-left: 0 !important; margin-right: 0 !important; font-size: 14px !important; line-height: 1.7 !important; inset: auto !important; transform: none !important; overflow: visible !important; } /* ======================================================= SIDEBAR -> AFTER ARTICLE ======================================================= */ .blog-list-row { position: relative !important; display: flex !important; flex-direction: column !important; float: none !important; flex: 0 0 auto !important; order: 2 !important; align-self: stretch !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; overflow: visible !important; z-index: auto !important; } .blog-list-row::before { margin: 0 0 16px !important; font-size: 16px !important; } .blog-list-row .list-blog-row { position: relative !important; display: grid !important; grid-template-columns: 110px minmax(0, 1fr) !important; align-items: center !important; width: 100% !important; height: auto !important; min-height: 0 !important; gap: 14px !important; margin: 0 !important; padding: 12px 0 !important; inset: auto !important; transform: none !important; float: none !important; } .blog-list-row .list-blog-row > .blog-cover { position: relative !important; width: 110px !important; min-width: 110px !important; height: 82px !important; margin: 0 !important; inset: auto !important; transform: none !important; } .blog-list-row .list-blog-row > .blog-body { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; inset: auto !important; transform: none !important; } .blog-list-row .title-list-blog { font-size: 13px !important; } } /* ========================================================= MOBILE <= 767 ========================================================= */ @media screen and (max-width: 767px) { .blog-content-list-body { max-width: none !important; gap: 36px !important; padding: 32px 16px 48px !important; } .detail-blog .breadcrumb, .breadcrumb { margin-bottom: 20px !important; } .detail-blog .breadcrumb p, .breadcrumb p { font-size: 11px !important; } .detail-blog .blog-header { gap: 8px !important; margin-bottom: 20px !important; } .detail-blog .blog-title { max-width: 100% !important; font-size: 32px !important; line-height: 1.07 !important; } .detail-blog .blog-meta .blog-author { font-size: 10px !important; } .detail-blog .blog-meta .blog-date { font-size: 9px !important; } .detail-blog .blog-body > .blog-cover { width: 100% !important; aspect-ratio: 4 / 3 !important; margin-bottom: 20px !important; border-radius: 5px !important; } .detail-blog .blog-body > p.blog-author, .detail-blog .blog-richtext { max-width: 100% !important; font-size: 13px !important; line-height: 1.65 !important; } .detail-blog .blog-richtext h2 { margin-top: 30px !important; font-size: 23px !important; } .detail-blog .blog-richtext h3 { font-size: 18px !important; } /* SIDEBAR */ .blog-list-row { width: 100% !important; margin-top: 4px !important; } .blog-list-row::before { margin-bottom: 10px !important; font-size: 15px !important; } .blog-list-row .list-blog-row { grid-template-columns: 96px minmax(0, 1fr) !important; gap: 12px !important; padding: 10px 0 !important; } .blog-list-row .list-blog-row > .blog-cover { width: 96px !important; min-width: 96px !important; height: 72px !important; } .blog-list-row .title-list-blog { font-size: 12px !important; } .blog-list-row .list-blog-row .blog-body p { font-size: 9px !important; line-height: 1.4 !important; } } /* ========================================================= SMALL MOBILE <= 480 ========================================================= */ @media screen and (max-width: 480px) { .blog-content-list-body { gap: 32px !important; padding: 28px 14px 42px !important; } .detail-blog .blog-title { font-size: 27px !important; line-height: 1.08 !important; } .detail-blog .blog-body > p.blog-author, .detail-blog .blog-richtext { font-size: 12px !important; line-height: 1.6 !important; } .blog-list-row .list-blog-row { grid-template-columns: 82px minmax(0, 1fr) !important; gap: 10px !important; } .blog-list-row .list-blog-row > .blog-cover { width: 82px !important; min-width: 82px !important; height: 62px !important; } .blog-list-row .title-list-blog { font-size: 11px !important; -webkit-line-clamp: 3 !important; } } /* ========================================================= EXTRA SMALL MOBILE <= 380 ========================================================= */ @media screen and (max-width: 380px) { .blog-content-list-body { padding: 26px 12px 40px !important; } .detail-blog .blog-title { font-size: 25px !important; } .detail-blog .blog-body > p.blog-author, .detail-blog .blog-richtext { font-size: 11.5px !important; } .blog-list-row .list-blog-row { grid-template-columns: 76px minmax(0, 1fr) !important; gap: 9px !important; } .blog-list-row .list-blog-row > .blog-cover { width: 76px !important; min-width: 76px !important; height: 58px !important; } .blog-list-row .title-list-blog { font-size: 10.5px !important; } } /* src/styles/event-card.css */ /* ===================================================== JAGA SEMESTA — FLOATING EVENT CMS EXISTING INSTATIC CLASSES .event-floating-host .card-event-pic .card-pict-wrap .title-card-event .card-event-state .card-place .icon-vanue .card-venue .card-date .icon-calender .card-calender-date .img-event .button-primary .close-card ===================================================== */ /* ===================================================== 01. OUTER HOST ===================================================== */ .event-floating-host { position: static !important; width: 100%; height: auto; margin: 0; padding: 0; overflow: visible !important; } /* ===================================================== 02. FLOATING CONTAINER ===================================================== */ .card-event-pic { --event-width: 400px; --event-bubble: 140px; --event-hidden: 30px; --event-bottom: 36px; --event-inset: 24px; --event-blue: #24b6f1; --event-easing: cubic-bezier(.22, 1, .36, 1); position: fixed !important; top: auto !important; left: auto !important; right: calc(-1 * var(--event-hidden)) !important; bottom: var(--event-bottom) !important; z-index: 9999 !important; display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; width: var(--event-width) !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; opacity: 1; visibility: visible; pointer-events: none; transform: none !important; transition: right .55s var(--event-easing), opacity .3s ease, visibility .3s ease; } /* ===================================================== 03. SHARED CARD ===================================================== */ .card-event-pic .card-pict-wrap { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; flex: 0 0 auto !important; margin: 0 !important; box-sizing: border-box !important; overflow: hidden !important; isolation: isolate; pointer-events: auto !important; transition: width .55s var(--event-easing), height .55s var(--event-easing), border-radius .45s ease, padding .3s ease; } /* ===================================================== 04. DEFAULT PHOTO BUBBLE ===================================================== */ .card-event-pic:not(.is-expanded) .card-pict-wrap { width: var(--event-bubble) !important; height: var(--event-bubble) !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; padding: 0 !important; background: #171717 !important; border: 3px solid var(--event-blue) !important; border-radius: 36px 36px 28px 28px / 32px 32px 40px 40px !important; box-shadow: 0 10px 32px rgba(0, 0, 0, .22) !important; cursor: pointer !important; } /* ===================================================== 05. SHARED EVENT IMAGE ===================================================== */ .card-event-pic .card-pict-wrap .img-event { position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; pointer-events: none !important; } /* ===================================================== 06. COLLAPSED GRADIENT ===================================================== */ .card-event-pic:not(.is-expanded) .card-pict-wrap::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; background: linear-gradient( 180deg, transparent 35%, rgba(0, 0, 0, .08) 68%, rgba(0, 0, 0, .3) 100% ) !important; pointer-events: none !important; } /* ===================================================== 07. BUBBLE DECORATIVE DOT ===================================================== */ .card-event-pic:not(.is-expanded) .card-pict-wrap::after { content: "" !important; position: absolute !important; right: 12px; bottom: 12px; z-index: 2 !important; display: block !important; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 3px rgba(36, 182, 241, .35); pointer-events: none !important; } /* ===================================================== 08. COLLAPSED INFORMATION ===================================================== */ .card-event-pic:not(.is-expanded) .title-card-event, .card-event-pic:not(.is-expanded) .card-event-state, .card-event-pic:not(.is-expanded) .card-pict-wrap .button-primary { display: none !important; } /* ===================================================== 09. EXPANDED POSITION ===================================================== */ .card-event-pic.is-expanded { right: var(--event-inset) !important; } /* ===================================================== 10. EXPANDED POSTER ===================================================== */ .card-event-pic.is-expanded .card-pict-wrap { width: var(--event-width) !important; max-width: calc( 100vw - 2 * var(--event-inset) ) !important; height: min( 510px, calc(100dvh - 2 * var(--event-inset)) ) !important; min-height: 0 !important; max-height: calc(100dvh - 2 * var(--event-inset)) !important; padding: 28px !important; background: #171717 !important; border: 0 !important; border-radius: 40px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, .24) !important; overflow-x: hidden !important; overflow-y: auto !important; cursor: default !important; } /* ===================================================== 11. FULL POSTER IMAGE ===================================================== */ .card-event-pic.is-expanded .card-pict-wrap .img-event { position: absolute !important; inset: 0 !important; z-index: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center !important; border-radius: inherit !important; } /* ===================================================== 12. POSTER GRADIENT ===================================================== */ .card-event-pic.is-expanded .card-pict-wrap::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; display: block !important; background: linear-gradient( 180deg, rgba(0, 0, 0, .02) 0%, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .32) 55%, rgba(0, 0, 0, .80) 78%, rgba(0, 0, 0, .95) 100% ) !important; pointer-events: none !important; } .card-event-pic.is-expanded .card-pict-wrap::after { content: none !important; display: none !important; } /* ===================================================== 13. EVENT TITLE ===================================================== */ .card-event-pic.is-expanded .title-card-event { position: relative !important; z-index: 2 !important; display: block !important; width: 100% !important; max-width: 19ch !important; height: auto !important; margin: 0 0 16px !important; padding: 0 !important; color: #ffffff !important; font-size: 25px !important; line-height: 1.2 !important; font-weight: 600 !important; text-align: left !important; white-space: normal !important; overflow-wrap: break-word !important; } /* ===================================================== 14. EVENT INFORMATION CONTAINER ===================================================== */ .card-event-pic.is-expanded .card-pict-wrap .card-event-state { position: relative !important; z-index: 3 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 0 22px !important; padding: 0 !important; gap: 12px !important; background: transparent !important; border: none !important; box-sizing: border-box !important; } /* ===================================================== 15. VENUE + DATE ROWS ===================================================== */ .card-event-pic .card-event-state .card-place, .card-event-pic .card-event-state .card-date { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 20px !important; height: auto !important; margin: 0 !important; padding: 0 !important; gap: 10px !important; background: transparent !important; box-sizing: border-box !important; } /* ===================================================== 16. LOCATION ICON ACTUAL INSTATIC CLASS: .icon-vanue ===================================================== */ .card-event-pic .card-event-state .card-place svg.icon-vanue, .card-event-pic .card-event-state .card-place .icon-vanue { position: static !important; display: block !important; flex: 0 0 20px !important; flex-grow: 0 !important; flex-shrink: 0 !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important; margin: 0 !important; padding: 0 !important; align-self: center !important; color: #ffffff !important; overflow: visible !important; transform: none !important; box-sizing: border-box !important; } /* ===================================================== 17. CALENDAR ICON ===================================================== */ .card-event-pic .card-event-state .card-date svg.icon-calender, .card-event-pic .card-event-state .card-date .icon-calender { position: static !important; display: block !important; flex: 0 0 18px !important; flex-grow: 0 !important; flex-shrink: 0 !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; margin: 0 !important; padding: 0 !important; align-self: center !important; color: #ffffff !important; overflow: visible !important; transform: none !important; box-sizing: border-box !important; } /* ===================================================== 18. NESTED SVG SUPPORT ===================================================== */ .card-event-pic .icon-vanue svg { display: block !important; width: 100% !important; height: 100% !important; max-width: 20px !important; max-height: 20px !important; } .card-event-pic .icon-calender svg { display: block !important; width: 100% !important; height: 100% !important; max-width: 18px !important; max-height: 18px !important; } /* ===================================================== 19. VENUE + DATE TEXT ===================================================== */ .card-event-pic .card-event-state .card-venue, .card-event-pic .card-event-state .card-calender-date { position: static !important; display: block !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, .9) !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 400 !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; } /* ===================================================== 20. REGISTRATION BUTTON ===================================================== */ .card-event-pic.is-expanded .card-pict-wrap .button-primary { position: relative !important; z-index: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: flex-start !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding: 12px 20px !important; background: var(--event-blue) !important; color: #ffffff !important; border: 0 !important; border-radius: 999px !important; font-size: 13px !important; line-height: 1.2 !important; font-weight: 600 !important; text-align: center !important; white-space: nowrap !important; cursor: pointer !important; transition: background .2s ease, transform .2s ease; } .card-event-pic.is-expanded .card-pict-wrap .button-primary:hover { background: #169ed4 !important; transform: translateY(-1px); } /* ===================================================== 21. CLOSE BUTTON ===================================================== */ .card-event-pic .close-card { position: absolute !important; top: 18px !important; right: 18px !important; z-index: 10 !important; display: none !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; background: rgba(0, 0, 0, .38) !important; border: 1px solid rgba(255, 255, 255, .15) !important; border-radius: 50% !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer !important; pointer-events: auto !important; transition: background .2s ease, transform .2s ease; } .card-event-pic.is-expanded .close-card { display: flex !important; } .card-event-pic .close-card:hover { background: rgba(0, 0, 0, .6) !important; transform: scale(1.05); } .card-event-pic .close-card svg { display: block !important; width: 15px !important; height: 15px !important; margin: 0 !important; color: #ffffff !important; stroke: currentColor !important; fill: none !important; pointer-events: none !important; } /* ===================================================== 22. LEGACY HIDDEN STATE ===================================================== */ .card-event-pic.is-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } /* ===================================================== 23. TABLET ===================================================== */ @media (max-width: 991px) { .card-event-pic { --event-width: 360px; --event-bubble: 120px; --event-hidden: 26px; --event-bottom: 28px; --event-inset: 16px; } .card-event-pic:not(.is-expanded) .card-pict-wrap { border-radius: 32px 32px 26px 26px / 28px 28px 36px 36px !important; } .card-event-pic.is-expanded .card-pict-wrap { height: min(460px, calc(100dvh - 40px)) !important; padding: 24px !important; border-radius: 34px !important; } .card-event-pic.is-expanded .title-card-event { font-size: 22px !important; } .card-event-pic .card-event-state .card-place .icon-vanue { flex-basis: 18px !important; width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; } .card-event-pic .card-event-state .card-venue, .card-event-pic .card-event-state .card-calender-date { font-size: 13px !important; } } /* ===================================================== 24. MOBILE ===================================================== */ @media (max-width: 767px) { .card-event-pic { --event-width: min(360px, calc(100vw - 32px)); --event-bubble: 104px; --event-hidden: 22px; --event-bottom: 20px; --event-inset: 16px; } .card-event-pic:not(.is-expanded) .card-pict-wrap { border-radius: 28px 28px 22px 22px / 24px 24px 30px 30px !important; } .card-event-pic.is-expanded .card-pict-wrap { height: min(420px, calc(100dvh - 32px)) !important; padding: 20px !important; border-radius: 28px !important; } .card-event-pic.is-expanded .title-card-event { max-width: 19ch !important; margin-bottom: 12px !important; font-size: 20px !important; } .card-event-pic.is-expanded .card-pict-wrap .card-event-state { gap: 10px !important; margin-bottom: 18px !important; } .card-event-pic .card-event-state .card-place .icon-vanue, .card-event-pic .card-event-state .card-date .icon-calender { flex-basis: 16px !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; max-width: 16px !important; max-height: 16px !important; } .card-event-pic .card-event-state .card-venue, .card-event-pic .card-event-state .card-calender-date { font-size: 12px !important; line-height: 1.5 !important; } .card-event-pic.is-expanded .card-pict-wrap .button-primary { min-height: 40px !important; padding: 11px 16px !important; font-size: 12px !important; } .card-event-pic.is-expanded .close-card { top: 14px !important; right: 14px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; } } /* ===================================================== 25. SMALL MOBILE ===================================================== */ @media (max-width: 380px) { .card-event-pic { --event-width: min(340px, calc(100vw - 20px)); --event-bubble: 96px; --event-hidden: 20px; --event-bottom: 16px; --event-inset: 10px; } .card-event-pic.is-expanded .card-pict-wrap { height: min(380px, calc(100dvh - 28px)) !important; padding: 18px !important; } .card-event-pic.is-expanded .title-card-event { font-size: 18px !important; } } /* ===================================================== 26. ACCESSIBILITY ===================================================== */ .card-event-pic .card-pict-wrap:focus-visible, .card-event-pic .close-card:focus-visible { outline: 3px solid var(--event-blue) !important; outline-offset: 4px !important; } @media (prefers-reduced-motion: reduce) { .card-event-pic, .card-event-pic .card-pict-wrap { transition: none !important; } } /* src/styles/footer.css */ /* ===================================================== JAGA SEMESTA FOOTER — FULL RESPONSIVE DESKTOP / TABLET / MOBILE ===================================================== */ /* ===================================================== 01. FOOTER MAIN CONTAINER ===================================================== */ .footer-container { --footer-blue: #24B6F1; --footer-blue-hover: #168DBB; --footer-white: #FFFFFF; --footer-muted: #D6E5ED; position: relative !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 440px !important; margin: 0 !important; padding: 72px 48px 24px !important; background: #102C41 !important; color: #FFFFFF !important; box-sizing: border-box !important; overflow: hidden !important; isolation: isolate; } /* ===================================================== 02. BACKGROUND IMAGE ===================================================== */ .footer-container .footer-img { position: absolute !important; inset: 0 !important; z-index: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; pointer-events: none !important; } /* ===================================================== 03. PHOTO OVERLAY ===================================================== */ .footer-container::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(10, 34, 52, .94) 0%, rgba(10, 34, 52, .82) 48%, rgba(10, 34, 52, .55) 100% ); pointer-events: none; } /* ===================================================== 04. MAIN CONTENT WRAPPER ===================================================== */ .footer-container .footer-cta-link { position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: 1280px !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; gap: 40px !important; background: transparent !important; box-sizing: border-box !important; } /* ===================================================== 05. TOP CTA SECTION ===================================================== */ .footer-container .footer-cta { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; gap: 32px !important; background: transparent !important; box-sizing: border-box !important; } /* ===================================================== 06. MAIN HEADING ===================================================== */ .footer-container .footer-title { position: relative !important; width: 100% !important; max-width: 720px !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: var(--footer-white) !important; font-size: clamp( 30px, 3vw, 46px ) !important; line-height: 1.12 !important; font-weight: 400 !important; letter-spacing: -.03em !important; text-align: left !important; white-space: normal !important; overflow-wrap: break-word !important; } /* ===================================================== 07. CTA BUTTON WRAPPER ===================================================== */ .footer-container .footer-action { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; width: auto !important; margin: 0 !important; padding: 0 !important; gap: 16px !important; background: transparent !important; } /* ===================================================== 08. CTA BUTTONS SUPPORT DIRECT CHILD OR WRAPPER ===================================================== */ .footer-container .footer-cta .button-primary, .footer-container .footer-cta .footer-action .button-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: auto !important; min-width: 116px !important; min-height: 44px !important; margin: 0 !important; padding: 12px 20px !important; background: var(--footer-blue) !important; color: #FFFFFF !important; border: 0 !important; border-radius: 999px !important; font-size: 13px !important; line-height: 1 !important; font-weight: 500 !important; text-align: center !important; white-space: nowrap !important; cursor: pointer !important; } /* Secondary CTA */ .footer-container .footer-cta .button-tertiary { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; margin: 0 !important; padding: 10px 4px !important; background: transparent !important; color: #FFFFFF !important; border: 0 !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; white-space: nowrap !important; } /* ===================================================== 09. ALL LINKS + SOCIAL WRAPPER ===================================================== */ .footer-container .footer-link-all { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; gap: 20px !important; background: transparent !important; } /* ===================================================== 10. NAVIGATION LINKS ===================================================== */ .footer-container .footer-link { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; gap: 12px 28px !important; } /* Footer navigation buttons */ .footer-container .footer-link .button-tertiary { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; color: #FFFFFF !important; background: transparent !important; border: 0 !important; font-size: 14px !important; line-height: 1.5 !important; font-weight: 400 !important; white-space: nowrap !important; text-decoration: none !important; } /* ===================================================== 11. SOCIAL MEDIA + EMAIL ===================================================== */ .footer-container .footer-socialmedia { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; width: 100% !important; height: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; gap: 12px !important; background: transparent !important; } /* ===================================================== 12. SOCIAL ICON WRAPPER ACTUAL CLASS: .icon-sosmed ===================================================== */ .footer-container .footer-socialmedia .icon-sosmed { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; gap: 10px !important; background: transparent !important; } /* ===================================================== 13. SOCIAL SVG ICONS ===================================================== */ .footer-container .footer-socialmedia .icon-sosmed > svg { position: static !important; display: block !important; flex: 0 0 20px !important; width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; max-width: 20px !important; max-height: 20px !important; margin: 0 !important; padding: 0 !important; color: #FFFFFF !important; object-fit: contain !important; transform: none !important; box-sizing: border-box !important; } /* ===================================================== 14. SOCIAL MEDIA LINKS ===================================================== */ .footer-container .footer-socialmedia a, .footer-container .footer-socialmedia button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; color: #FFFFFF !important; border: 0 !important; font-size: 13px !important; line-height: 1.5 !important; white-space: normal !important; text-decoration: none !important; } /* Keep nested icons compact */ .footer-container .footer-socialmedia a svg, .footer-container .footer-socialmedia button svg { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; } /* ===================================================== 15. COPYRIGHT ===================================================== */ .footer-container .footer-copyright-section { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 1280px !important; min-height: 52px !important; margin: 40px auto 0 !important; padding: 16px 0 !important; border: 0 !important; border-top: 1px solid rgba( 255, 255, 255, .26 ) !important; border-radius: 0 !important; background: transparent !important; box-sizing: border-box !important; } /* Copyright text */ .footer-container .footer-text-copyright { width: 100% !important; margin: 0 !important; padding: 0 !important; color: rgba(255, 255, 255, .85) !important; font-size: 12px !important; line-height: 1.5 !important; font-weight: 400 !important; text-align: center !important; white-space: normal !important; } /* ===================================================== 16. INTERACTION ===================================================== */ @media (hover: hover) { .footer-container .button-primary:hover { background: var(--footer-blue-hover) !important; } .footer-container .button-tertiary:hover { color: #A9E9FF !important; } .footer-container .footer-socialmedia a:hover { color: #A9E9FF !important; } } /* ===================================================== 17. LARGE DESKTOP >= 1440px ===================================================== */ @media (min-width: 1440px) { .footer-container { min-height: 480px !important; padding: 80px 56px 24px !important; } .footer-container .footer-cta-link, .footer-container .footer-copyright-section { max-width: 1320px !important; } .footer-container .footer-title { max-width: 850px !important; font-size: 46px !important; } .footer-container .footer-link { gap: 32px !important; } } /* ===================================================== 18. MEDIUM DESKTOP 992px — 1439px ===================================================== */ @media (min-width: 992px) and (max-width: 1439px) { .footer-container { min-height: 420px !important; padding: 64px 40px 22px !important; } .footer-container .footer-title { max-width: 680px !important; font-size: 36px !important; } .footer-container .footer-cta { gap: 24px !important; } .footer-container .footer-link { gap: 24px !important; } } /* ===================================================== 19. TABLET 768px — 991px ===================================================== */ @media (min-width: 768px) and (max-width: 991px) { .footer-container { min-height: 0 !important; padding: 56px 32px 20px !important; } .footer-container::after { background: linear-gradient( 90deg, rgba(10, 34, 52, .94), rgba(10, 34, 52, .70) ) !important; } .footer-container .footer-cta-link { gap: 32px !important; } .footer-container .footer-cta { grid-template-columns: 1fr !important; gap: 20px !important; } .footer-container .footer-title { max-width: 650px !important; font-size: 34px !important; } .footer-container .footer-action { justify-content: flex-start !important; } .footer-container .footer-link { gap: 18px 24px !important; } .footer-container .footer-copyright-section { margin-top: 32px !important; } } /* ===================================================== 20. MOBILE <= 767px ===================================================== */ @media (max-width: 767px) { .footer-container { min-height: 0 !important; padding: 48px 20px 16px !important; } .footer-container .footer-img { object-position: 65% center !important; } .footer-container::after { background: linear-gradient( 180deg, rgba(10, 34, 52, .88) 0%, rgba(10, 34, 52, .92) 100% ) !important; } .footer-container .footer-cta-link { gap: 32px !important; } .footer-container .footer-cta { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; } .footer-container .footer-title { max-width: 100% !important; font-size: 30px !important; line-height: 1.15 !important; } .footer-container .footer-action { width: 100% !important; align-items: center !important; justify-content: flex-start !important; gap: 16px !important; } .footer-container .footer-link-all { gap: 20px !important; } .footer-container .footer-link { flex-direction: row !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 14px 20px !important; } .footer-container .footer-socialmedia { flex-direction: row !important; align-items: center !important; gap: 12px !important; } .footer-container .footer-socialmedia .icon-sosmed { gap: 12px !important; } .footer-container .footer-copyright-section { margin-top: 36px !important; min-height: 44px !important; padding: 14px 0 !important; } .footer-container .footer-text-copyright { font-size: 11px !important; } } /* ===================================================== 21. SMALL MOBILE <= 480px ===================================================== */ @media (max-width: 480px) { .footer-container { padding: 40px 16px 14px !important; } .footer-container .footer-title { font-size: 26px !important; max-width: 24ch !important; } .footer-container .footer-action { flex-direction: row !important; flex-wrap: wrap !important; gap: 14px !important; } .footer-container .footer-cta .button-primary { min-height: 42px !important; padding: 12px 18px !important; } .footer-container .footer-link { gap: 12px 20px !important; } .footer-container .footer-link .button-tertiary { font-size: 13px !important; } .footer-container .footer-socialmedia .icon-sosmed > svg { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; } .footer-container .footer-copyright-section { margin-top: 28px !important; } } /* ===================================================== 22. EXTRA SMALL <= 380px ===================================================== */ @media (max-width: 380px) { .footer-container { padding: 36px 14px 12px !important; } .footer-container .footer-title { font-size: 23px !important; } .footer-container .footer-action { gap: 12px !important; } .footer-container .footer-text-copyright { font-size: 10px !important; } } /* ===================================================== 23. ACCESSIBILITY ===================================================== */ @media (prefers-reduced-motion: reduce) { .footer-container .button-primary, .footer-container .button-tertiary { transition: none !important; } } /* src/styles/Get-involved.css */ /* ========================================================= COLLABORATE SECTION — FULL FINAL RESPONSIVE ========================================================= */ /* ========================================================= SECTION ========================================================= */ .collaborate { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 80px 48px !important; background: #ffffff !important; color: #171717 !important; box-sizing: border-box !important; overflow: hidden !important; } /* ========================================================= MAIN CONTENT ========================================================= */ .collaborate .content-about-main { position: relative !important; width: 100% !important; max-width: 1280px !important; height: auto !important; min-height: 0 !important; margin: 0 auto 48px !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 12px !important; box-sizing: border-box !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= TAGLINE ========================================================= */ .collaborate .tagline, .collaborate .tagline.blue { position: relative !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #24b6f1 !important; font-size: 11px !important; line-height: 1.4 !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; text-align: left !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= TEXT + BUTTON ROW ========================================================= */ .collaborate .text-button-collab { position: relative !important; width: 100% !important; height: auto !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; /* BUTTON NAIK KE ATAS */ align-items: start !important; gap: 48px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= TEXT WRAPPER ========================================================= */ .collaborate .content-about-desc { position: relative !important; width: 100% !important; max-width: 900px !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= MAIN TITLE ========================================================= */ .collaborate .content-about-desc h2, .collaborate .content-about-desc .fs-3rem { position: relative !important; display: block !important; width: 100% !important; max-width: 820px !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #171717 !important; font-size: 48px !important; line-height: 1.06 !important; font-weight: 500 !important; letter-spacing: -0.03em !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= DESCRIPTION ========================================================= */ .collaborate .content-about-desc p, .collaborate .content-about-desc .fs-xl { position: relative !important; display: block !important; width: 100% !important; max-width: 760px !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #777777 !important; font-size: 16px !important; line-height: 1.6 !important; font-weight: 400 !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= HEADER BUTTON ========================================================= */ .collaborate .text-button-collab > .button-primary, .collaborate .text-button-collab > button { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; align-self: start !important; width: auto !important; min-width: 128px !important; min-height: 44px !important; margin: 0 !important; padding: 10px 18px !important; background: #24b6f1 !important; color: #ffffff !important; border: 0 !important; border-radius: 999px !important; font-size: 12px !important; line-height: 1 !important; font-weight: 500 !important; white-space: nowrap !important; flex-shrink: 0 !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= CARDS GRID ========================================================= */ .collaborate .grid-cards-stats { position: relative !important; width: 100% !important; max-width: 1280px !important; height: auto !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= CARD ========================================================= */ .collaborate .card-join { position: relative !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 210px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 14px !important; margin: 0 !important; padding: 22px 22px !important; background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.10) !important; border-radius: 12px !important; box-sizing: border-box !important; overflow: hidden !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important; } /* ========================================================= CARD HOVER ========================================================= */ @media (hover: hover) { .collaborate .card-join:hover { transform: translateY(-3px) !important; border-color: rgba(36, 182, 241, 0.30) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06) !important; } } /* ========================================================= RESET CARD CHILD ========================================================= */ .collaborate .card-join > * { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= CARD HEADER ========================================================= */ .collaborate .card-join .card-stat-head { position: relative !important; width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= ICON ========================================================= */ .collaborate .card-join .icon-wrap-stat { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 8px !important; background: #ffffff !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04) !important; flex-shrink: 0 !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } .collaborate .card-join .icon-wrap-stat svg, .collaborate .card-join .icon-wrap-stat img { position: relative !important; display: block !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= CARD TITLE ========================================================= */ .collaborate .card-join h6, .collaborate .card-join .card-stat-head h6 { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #171717 !important; font-size: 18px !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -0.015em !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= CARD DESCRIPTION ========================================================= */ .collaborate .card-join > p, .collaborate .card-join > .fs-base, .collaborate .card-join .fs-base { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #777777 !important; font-size: 13px !important; line-height: 1.55 !important; font-weight: 400 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= LARGE DESKTOP >= 1440 ========================================================= */ @media screen and (min-width: 1440px) { .collaborate { padding: 88px 56px !important; } .collaborate .content-about-main, .collaborate .grid-cards-stats { max-width: 1320px !important; } .collaborate .content-about-main { margin-bottom: 56px !important; } .collaborate .text-button-collab { gap: 64px !important; } .collaborate .content-about-desc h2, .collaborate .content-about-desc .fs-3rem { max-width: 900px !important; font-size: 54px !important; } .collaborate .content-about-desc p, .collaborate .content-about-desc .fs-xl { max-width: 800px !important; font-size: 17px !important; } .collaborate .grid-cards-stats { gap: 20px !important; } .collaborate .card-join { min-height: 224px !important; padding: 24px !important; } .collaborate .card-join h6 { font-size: 20px !important; } .collaborate .card-join .fs-base { font-size: 14px !important; } } /* ========================================================= DESKTOP MEDIUM 992 — 1279 ========================================================= */ @media screen and (min-width: 992px) and (max-width: 1279px) { .collaborate { padding: 72px 40px !important; } .collaborate .content-about-main { margin-bottom: 44px !important; } .collaborate .text-button-collab { gap: 36px !important; align-items: start !important; } .collaborate .content-about-desc h2, .collaborate .content-about-desc .fs-3rem { max-width: 720px !important; font-size: 42px !important; } .collaborate .content-about-desc p, .collaborate .content-about-desc .fs-xl { max-width: 680px !important; font-size: 14px !important; } .collaborate .grid-cards-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; } .collaborate .card-join { min-height: 200px !important; padding: 20px !important; } .collaborate .card-join h6 { font-size: 17px !important; } .collaborate .card-join .fs-base { font-size: 12px !important; } } /* ========================================================= TABLET 768 — 991 ========================================================= */ @media screen and (min-width: 768px) and (max-width: 991px) { .collaborate { padding: 64px 24px !important; } .collaborate .content-about-main { margin-bottom: 36px !important; } .collaborate .text-button-collab { grid-template-columns: 1fr !important; align-items: start !important; gap: 20px !important; } .collaborate .content-about-desc { max-width: 720px !important; gap: 12px !important; } .collaborate .content-about-desc h2, .collaborate .content-about-desc .fs-3rem { max-width: 680px !important; font-size: 36px !important; line-height: 1.08 !important; } .collaborate .content-about-desc p, .collaborate .content-about-desc .fs-xl { max-width: 620px !important; font-size: 13px !important; } .collaborate .text-button-collab > .button-primary, .collaborate .text-button-collab > button { align-self: start !important; min-width: 116px !important; min-height: 40px !important; padding: 9px 14px !important; font-size: 11px !important; } .collaborate .grid-cards-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } .collaborate .card-join { min-height: 190px !important; padding: 18px !important; gap: 12px !important; } .collaborate .card-join .icon-wrap-stat { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; } .collaborate .card-join h6 { font-size: 17px !important; } .collaborate .card-join .fs-base { font-size: 12px !important; } } /* ========================================================= MOBILE <= 767 ========================================================= */ @media screen and (max-width: 767px) { .collaborate { padding: 56px 20px !important; } .collaborate .content-about-main { margin-bottom: 32px !important; gap: 8px !important; } .collaborate .tagline, .collaborate .tagline.blue { font-size: 9px !important; } .collaborate .text-button-collab { grid-template-columns: 1fr !important; align-items: start !important; gap: 18px !important; } .collaborate .content-about-desc { max-width: 100% !important; gap: 10px !important; } .collaborate .content-about-desc h2, .collaborate .content-about-desc .fs-3rem { max-width: 100% !important; font-size: 30px !important; line-height: 1.08 !important; } .collaborate .content-about-desc p, .collaborate .content-about-desc .fs-xl { max-width: 100% !important; font-size: 12px !important; line-height: 1.55 !important; } .collaborate .text-button-collab > .button-primary, .collaborate .text-button-collab > button { align-self: start !important; min-width: 110px !important; min-height: 38px !important; padding: 9px 14px !important; font-size: 10px !important; } .collaborate .grid-cards-stats { grid-template-columns: 1fr !important; gap: 12px !important; } .collaborate .card-join { min-height: 0 !important; padding: 16px !important; gap: 10px !important; border-radius: 10px !important; } .collaborate .card-join .icon-wrap-stat { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; } .collaborate .card-join h6 { font-size: 16px !important; } .collaborate .card-join .fs-base { font-size: 11px !important; } } /* ========================================================= SMALL MOBILE <= 480 ========================================================= */ @media screen and (max-width: 480px) { .collaborate { padding: 48px 16px !important; } .collaborate .content-about-main { margin-bottom: 28px !important; } .collaborate .content-about-desc h2, .collaborate .content-about-desc .fs-3rem { font-size: 27px !important; } .collaborate .content-about-desc p, .collaborate .content-about-desc .fs-xl { font-size: 11px !important; } .collaborate .grid-cards-stats { gap: 10px !important; } .collaborate .card-join { padding: 14px !important; gap: 9px !important; } .collaborate .card-join h6 { font-size: 15px !important; } .collaborate .card-join .fs-base { font-size: 10.5px !important; } } /* ========================================================= EXTRA SMALL <= 380 ========================================================= */ @media screen and (max-width: 380px) { .collaborate { padding: 44px 14px !important; } .collaborate .content-about-desc h2, .collaborate .content-about-desc .fs-3rem { font-size: 25px !important; } .collaborate .card-join { padding: 13px !important; } .collaborate .card-join h6 { font-size: 14px !important; } .collaborate .card-join .fs-base { font-size: 10px !important; } } /* src/styles/logo loop.css */ .logo-loop { width: 100%; overflow: hidden; display: flex; align-items: center; gap: 4rem; flex-wrap: nowrap; } .logo-loop img { width: 7rem !important; height: 3rem !important; object-fit: contain; flex-shrink: 0; animation: logo-slide 15s linear infinite; } @keyframes logo-slide { from { transform: translateX(0); } to { transform: translateX(-25rem); } } .logo-award { width: 100%; overflow: hidden; display: flex; align-items: center; gap: 4rem; flex-wrap: nowrap; } .logo-award img { width: 8rem !important; height: 6rem !important; object-fit: contain; flex-shrink: 0; animation: logo-slide 15s linear infinite; } @keyframes logo-slide { from { transform: translateX(0); } to { transform: translateX(-15rem); } } /* src/styles/navbar.css */ /* ========================================================= JAGA SEMESTA NAVBAR FULL RESPONSIVE FINAL NATIVE INSTATIC LINKS ========================================================= */ /* ========================================================= 01. NAVBAR BASE ========================================================= */ .navbar { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 1000 !important; display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 1rem 1.5rem !important; box-sizing: border-box !important; background: transparent !important; } /* ========================================================= 02. LOGO ========================================================= */ .navbar > img { position: relative !important; z-index: 1010 !important; display: block !important; justify-self: start !important; width: 7rem !important; height: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ========================================================= 03. NAVBAR MENU DESKTOP ========================================================= */ .navbar-menu { position: static !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; justify-self: center !important; gap: 3rem !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; } /* ========================================================= 04. NAVIGATION BUTTON RESET ========================================================= */ .navbar-menu .button-tertiary, .navbar-menu button, .navbar-menu a { appearance: none !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #ffffff !important; font-size: 0.875rem !important; line-height: 1.4 !important; font-weight: 400 !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; pointer-events: auto !important; touch-action: manipulation !important; transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease; } /* ========================================================= 05. NAVIGATION HOVER ========================================================= */ @media (hover: hover) { .navbar-menu .button-tertiary:hover, .navbar-menu button:hover, .navbar-menu a:hover { opacity: 0.65 !important; } } /* ========================================================= 06. LANGUAGE WRAPPER ========================================================= */ .nav-lang { position: relative !important; z-index: 1012 !important; display: flex !important; align-items: center !important; justify-self: end !important; width: auto !important; margin: 0 !important; padding: 0 !important; pointer-events: auto !important; } /* ========================================================= 07. LANGUAGE BUTTON ========================================================= */ .nav-lang .button-tertiary, .nav-lang button, .nav-lang a { appearance: none !important; position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 0.875rem !important; line-height: 1 !important; font-weight: 400 !important; text-decoration: none !important; cursor: pointer !important; pointer-events: auto !important; touch-action: manipulation !important; transition: opacity 0.2s ease; } .nav-lang .button-tertiary:hover, .nav-lang button:hover, .nav-lang a:hover { opacity: 0.65 !important; } /* ========================================================= 08. HAMBURGER DEFAULT ========================================================= */ .hamburger-wrap { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= 09. HAMBURGER SVG ========================================================= */ .hamburger-menu { display: block !important; width: 1.35rem !important; height: 1.35rem !important; min-width: 1.35rem !important; min-height: 1.35rem !important; max-width: 1.35rem !important; max-height: 1.35rem !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; pointer-events: none !important; } /* ========================================================= 10. DRAWER OVERLAY ========================================================= */ .navbar-overlay { position: fixed !important; inset: 0 !important; z-index: 1001 !important; background: rgba( 0, 0, 0, 0.5 ) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; } /* ========================================================= 11. DESKTOP ========================================================= */ @media (min-width: 992px) { .navbar { display: grid !important; grid-template-columns: 1fr auto 1fr !important; align-items: center !important; gap: 0 !important; padding: 1rem 1.5rem !important; } .navbar > img { justify-self: start !important; width: 7rem !important; } .navbar-menu { position: static !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; justify-self: center !important; gap: 3rem !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; } .navbar-menu .button-tertiary, .navbar-menu button, .navbar-menu a { display: inline-flex !important; width: auto !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; font-size: 0.875rem !important; text-align: center !important; pointer-events: auto !important; } .nav-lang { justify-self: end !important; } .hamburger-wrap { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; min-width: 0 !important; min-height: 0 !important; max-width: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .navbar-overlay { display: none !important; } body.nav-menu-open { overflow: auto !important; } } /* ========================================================= 12. TABLET + MOBILE ========================================================= */ @media (max-width: 991px) { .navbar { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; gap: 0.5rem !important; padding: 0.9rem 1rem !important; } /* ======================================================= LOGO ======================================================= */ .navbar > img { justify-self: start !important; width: 6rem !important; } /* ======================================================= LANGUAGE ======================================================= */ .nav-lang { position: relative !important; justify-self: end !important; z-index: 1020 !important; pointer-events: auto !important; } .nav-lang .button-tertiary, .nav-lang button, .nav-lang a { position: relative !important; z-index: 2 !important; font-size: 0.8rem !important; pointer-events: auto !important; cursor: pointer !important; touch-action: manipulation !important; } /* ======================================================= HAMBURGER ======================================================= */ .hamburger-wrap { position: relative !important; z-index: 1025 !important; display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; align-items: center !important; justify-content: center !important; justify-self: end !important; width: 2.4rem !important; height: 2.4rem !important; min-width: 2.4rem !important; min-height: 2.4rem !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; touch-action: manipulation !important; } .hamburger-wrap .hamburger-menu { display: block !important; width: 1.35rem !important; height: 1.35rem !important; min-width: 1.35rem !important; min-height: 1.35rem !important; max-width: 1.35rem !important; max-height: 1.35rem !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; fill: currentColor !important; stroke: currentColor !important; pointer-events: none !important; transition: transform 0.25s ease !important; } /* ======================================================= DRAWER ======================================================= */ .navbar-menu { position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; z-index: 1010 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; width: min( 22rem, 86vw ) !important; height: 100dvh !important; min-height: 100vh !important; margin: 0 !important; padding: 5.5rem 1.25rem 2rem !important; box-sizing: border-box !important; background: #24B6F1 !important; box-shadow: -1.5rem 0 3rem rgba( 0, 0, 0, 0.18 ) !important; transform: translateX(105%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; overflow-y: auto !important; overflow-x: hidden !important; transition: transform 0.42s cubic-bezier( .16, 1, .3, 1 ), opacity 0.25s ease, visibility 0.25s ease !important; } /* ======================================================= DRAWER BUTTONS ======================================================= */ .navbar-menu .button-tertiary, .navbar-menu button, .navbar-menu a { position: relative !important; z-index: 5 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; min-height: 4rem !important; margin: 0 !important; padding: 0 0.25rem !important; color: #ffffff !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba( 255, 255, 255, 0.22 ) !important; border-radius: 0 !important; box-shadow: none !important; font-size: 1rem !important; line-height: 1.3 !important; font-weight: 400 !important; text-align: left !important; text-decoration: none !important; white-space: normal !important; opacity: 1 !important; pointer-events: auto !important; cursor: pointer !important; touch-action: manipulation !important; } .navbar-menu .button-tertiary:hover, .navbar-menu button:hover, .navbar-menu a:hover { background: rgba( 255, 255, 255, 0.1 ) !important; opacity: 1 !important; } .navbar-menu .button-tertiary:last-child, .navbar-menu button:last-child, .navbar-menu a:last-child { border-bottom: 0 !important; } /* ======================================================= OPEN DRAWER ======================================================= */ .navbar.is-open .navbar-menu { transform: translateX(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ======================================================= OVERLAY OPEN ======================================================= */ body.nav-menu-open .navbar-overlay { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* ======================================================= HAMBURGER OPEN ======================================================= */ .navbar.is-open .hamburger-wrap .hamburger-menu { transform: rotate(90deg) !important; } /* ======================================================= BODY LOCK ======================================================= */ body.nav-menu-open { overflow: hidden !important; } } /* ========================================================= 13. MOBILE ========================================================= */ @media (max-width: 575px) { .navbar { gap: 0.4rem !important; padding: 0.8rem 0.85rem !important; } .navbar > img { width: 5.4rem !important; } .nav-lang .button-tertiary, .nav-lang button, .nav-lang a { font-size: 0.75rem !important; } .hamburger-wrap { width: 2.2rem !important; height: 2.2rem !important; min-width: 2.2rem !important; min-height: 2.2rem !important; } .hamburger-wrap .hamburger-menu { width: 1.25rem !important; height: 1.25rem !important; min-width: 1.25rem !important; min-height: 1.25rem !important; } .navbar-menu { width: min( 19rem, 88vw ) !important; padding: 5rem 1.1rem 1.5rem !important; } .navbar-menu .button-tertiary, .navbar-menu button, .navbar-menu a { min-height: 3.75rem !important; font-size: 0.95rem !important; } } /* ========================================================= 14. EXTRA SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .navbar { padding: 0.75rem !important; } .navbar > img { width: 5rem !important; } .nav-lang .button-tertiary, .nav-lang button, .nav-lang a { font-size: 0.72rem !important; } .hamburger-wrap { width: 2rem !important; height: 2rem !important; min-width: 2rem !important; min-height: 2rem !important; } .hamburger-wrap .hamburger-menu { width: 1.15rem !important; height: 1.15rem !important; min-width: 1.15rem !important; min-height: 1.15rem !important; } .navbar-menu { width: 90vw !important; } .navbar-menu .button-tertiary, .navbar-menu button, .navbar-menu a { min-height: 3.5rem !important; font-size: 0.9rem !important; } } /* ========================================================= 15. REDUCED MOTION ========================================================= */ @media ( prefers-reduced-motion: reduce ) { .navbar-menu, .navbar-overlay, .hamburger-menu { transition: none !important; } } /* src/styles/ourstory-3section.css */ /* ========================================================= GET INVOLVED VOLUNTEER / CHAPTER / SPRING HUB FULL RESPONSIVE ========================================================= */ /* ========================================================= SHARED SECTION ========================================================= */ .getinv-volunteer, .getinv-chapter { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 72px 48px !important; background: #ffffff !important; color: #171717 !important; box-sizing: border-box !important; overflow: hidden !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; align-items: center !important; gap: 56px !important; } /* ========================================================= INNER CONTENT WIDTH BIAR NGGAK TERLALU FULL ========================================================= */ .getinv-volunteer, .getinv-chapter { padding-left: max( 48px, calc((100vw - 1376px) / 2) ) !important; padding-right: max( 48px, calc((100vw - 1376px) / 2) ) !important; } /* ========================================================= TEXT COLUMN ========================================================= */ .getinv-volunteer .text-volunteer, .getinv-chapter .text-volunteer { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; width: 100% !important; max-width: 620px !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; gap: 22px !important; box-sizing: border-box !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= TAG ========================================================= */ .getinv-volunteer .text-volunteer .tag, .getinv-chapter .text-volunteer .tag, .getinv-volunteer .text-volunteer > span, .getinv-chapter .text-volunteer > span { position: relative !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #24b6f1 !important; font-size: 14px !important; line-height: 1.4 !important; font-weight: 500 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= DESCRIPTION ========================================================= */ .getinv-volunteer .text-volunteer .text-desc, .getinv-chapter .text-volunteer .text-desc { position: relative !important; display: block !important; width: 100% !important; max-width: 620px !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #777777 !important; font-size: 16px !important; line-height: 1.65 !important; font-weight: 400 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= BUTTON GROUP ========================================================= */ .getinv-volunteer .button-group, .getinv-chapter .button-group { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; width: 100% !important; height: auto !important; gap: 12px !important; margin: 4px 0 0 !important; padding: 0 !important; top: auto !important; left: auto !important; transform: none !important; } /* ========================================================= PRIMARY BUTTON ========================================================= */ .getinv-volunteer .button-primary, .getinv-chapter .button-primary { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding: 11px 18px !important; background: #24b6f1 !important; color: #ffffff !important; border: 1px solid #24b6f1 !important; border-radius: 999px !important; box-shadow: none !important; font-size: 14px !important; line-height: 1 !important; font-weight: 500 !important; white-space: nowrap !important; cursor: pointer !important; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important; } .getinv-volunteer .button-primary:hover, .getinv-chapter .button-primary:hover { background: #169ed4 !important; border-color: #169ed4 !important; transform: translateY(-1px) !important; } /* ========================================================= SECONDARY BUTTON ========================================================= */ .getinv-volunteer .button-secondary, .getinv-chapter .button-secondary { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding: 11px 18px !important; background: transparent !important; color: #171717 !important; border: 1px solid transparent !important; border-radius: 999px !important; box-shadow: none !important; font-size: 14px !important; line-height: 1 !important; font-weight: 500 !important; white-space: nowrap !important; cursor: pointer !important; transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease !important; } .getinv-volunteer .button-secondary:hover, .getinv-chapter .button-secondary:hover { color: #24b6f1 !important; background: rgba( 36, 182, 241, 0.06 ) !important; transform: translateY(-1px) !important; } /* ========================================================= SHARED IMAGE ========================================================= */ .getinv-volunteer .volunteer-img, .getinv-chapter .chapter-img { position: relative !important; display: block !important; width: 100% !important; max-width: 640px !important; height: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; object-position: center !important; border-radius: 18px !important; justify-self: end !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; transform: none !important; } /* ========================================================= VOLUNTEER / SPRING HUB TEXT LEFT + IMAGE RIGHT ========================================================= */ .getinv-volunteer .text-volunteer { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; } .getinv-volunteer .volunteer-img { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; } /* ========================================================= CHAPTER IMAGE LEFT + TEXT RIGHT ========================================================= */ .getinv-chapter .chapter-img { grid-column: 1 !important; grid-row: 1 !important; justify-self: start !important; } .getinv-chapter .text-volunteer { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; } /* ========================================================= OPTIONAL ALTERNATE BACKGROUND ========================================================= */ .getinv-chapter { background: #fafafa !important; } /* ========================================================= LARGE DESKTOP >= 1440 ========================================================= */ @media screen and (min-width: 1440px) { .getinv-volunteer, .getinv-chapter { padding-top: 88px !important; padding-bottom: 88px !important; padding-left: max( 56px, calc((100vw - 1432px) / 2) ) !important; padding-right: max( 56px, calc((100vw - 1432px) / 2) ) !important; gap: 64px !important; } .getinv-volunteer .text-volunteer, .getinv-chapter .text-volunteer { max-width: 660px !important; gap: 24px !important; } .getinv-volunteer .text-volunteer .text-desc, .getinv-chapter .text-volunteer .text-desc { max-width: 660px !important; font-size: 17px !important; } .getinv-volunteer .volunteer-img, .getinv-chapter .chapter-img { max-width: 680px !important; border-radius: 20px !important; } } /* ========================================================= MEDIUM DESKTOP 992 - 1279 ========================================================= */ @media screen and (min-width: 992px) and (max-width: 1279px) { .getinv-volunteer, .getinv-chapter { padding: 72px 40px !important; gap: 40px !important; } .getinv-volunteer .text-volunteer, .getinv-chapter .text-volunteer { max-width: 560px !important; gap: 18px !important; } .getinv-volunteer .text-volunteer .text-desc, .getinv-chapter .text-volunteer .text-desc { max-width: 560px !important; font-size: 14px !important; line-height: 1.6 !important; } .getinv-volunteer .text-volunteer .tag, .getinv-chapter .text-volunteer .tag, .getinv-volunteer .text-volunteer > span, .getinv-chapter .text-volunteer > span { font-size: 11px !important; } .getinv-volunteer .volunteer-img, .getinv-chapter .chapter-img { max-width: 100% !important; border-radius: 16px !important; } .getinv-volunteer .button-primary, .getinv-chapter .button-primary, .getinv-volunteer .button-secondary, .getinv-chapter .button-secondary { min-height: 40px !important; padding: 9px 15px !important; font-size: 12px !important; } } /* ========================================================= TABLET 768 - 991 TEXT ABOVE + IMAGE BELOW ========================================================= */ @media screen and (min-width: 768px) and (max-width: 991px) { .getinv-volunteer, .getinv-chapter { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; padding: 64px 24px !important; gap: 28px !important; } /* always text first */ .getinv-volunteer .text-volunteer, .getinv-chapter .text-volunteer { order: 1 !important; width: 100% !important; max-width: 720px !important; gap: 16px !important; justify-self: auto !important; } .getinv-volunteer .volunteer-img, .getinv-chapter .chapter-img { order: 2 !important; width: 100% !important; max-width: none !important; aspect-ratio: 16 / 9 !important; border-radius: 14px !important; justify-self: auto !important; } .getinv-volunteer .text-volunteer .tag, .getinv-chapter .text-volunteer .tag, .getinv-volunteer .text-volunteer > span, .getinv-chapter .text-volunteer > span { font-size: 11px !important; } .getinv-volunteer .text-volunteer .text-desc, .getinv-chapter .text-volunteer .text-desc { max-width: 680px !important; font-size: 13px !important; line-height: 1.6 !important; } .getinv-volunteer .button-primary, .getinv-chapter .button-primary, .getinv-volunteer .button-secondary, .getinv-chapter .button-secondary { min-height: 40px !important; padding: 9px 14px !important; font-size: 11px !important; } } /* ========================================================= MOBILE <= 767 ========================================================= */ @media screen and (max-width: 767px) { .getinv-volunteer, .getinv-chapter { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; padding: 56px 20px !important; gap: 22px !important; } /* text always above */ .getinv-volunteer .text-volunteer, .getinv-chapter .text-volunteer { order: 1 !important; width: 100% !important; max-width: none !important; gap: 14px !important; } /* image always below */ .getinv-volunteer .volunteer-img, .getinv-chapter .chapter-img { order: 2 !important; width: 100% !important; max-width: none !important; aspect-ratio: 4 / 3 !important; border-radius: 12px !important; } .getinv-volunteer .text-volunteer .tag, .getinv-chapter .text-volunteer .tag, .getinv-volunteer .text-volunteer > span, .getinv-chapter .text-volunteer > span { font-size: 9px !important; } .getinv-volunteer .text-volunteer .text-desc, .getinv-chapter .text-volunteer .text-desc { width: 100% !important; max-width: none !important; font-size: 12px !important; line-height: 1.55 !important; } .getinv-volunteer .button-group, .getinv-chapter .button-group { gap: 8px !important; margin-top: 2px !important; } .getinv-volunteer .button-primary, .getinv-chapter .button-primary, .getinv-volunteer .button-secondary, .getinv-chapter .button-secondary { min-height: 38px !important; padding: 9px 14px !important; font-size: 10px !important; } } /* ========================================================= SMALL MOBILE <= 480 ========================================================= */ @media screen and (max-width: 480px) { .getinv-volunteer, .getinv-chapter { padding: 48px 16px !important; gap: 18px !important; } .getinv-volunteer .text-volunteer, .getinv-chapter .text-volunteer { gap: 12px !important; } .getinv-volunteer .text-volunteer .text-desc, .getinv-chapter .text-volunteer .text-desc { font-size: 11px !important; line-height: 1.55 !important; } .getinv-volunteer .volunteer-img, .getinv-chapter .chapter-img { border-radius: 10px !important; } .getinv-volunteer .button-primary, .getinv-chapter .button-primary, .getinv-volunteer .button-secondary, .getinv-chapter .button-secondary { min-height: 36px !important; padding: 8px 12px !important; font-size: 10px !important; } } /* ========================================================= EXTRA SMALL <= 380 ========================================================= */ @media screen and (max-width: 380px) { .getinv-volunteer, .getinv-chapter { padding: 44px 14px !important; gap: 16px !important; } .getinv-volunteer .text-volunteer .text-desc, .getinv-chapter .text-volunteer .text-desc { font-size: 10.5px !important; } .getinv-volunteer .button-group, .getinv-chapter .button-group { flex-direction: column !important; align-items: flex-start !important; } }