/* Base layout */ .who-we-are-page { /* Color Variables (WWAN: Who We Are Nesi) */ --wwa-primary: #0d5aa6; /* Primary Blue */ --wwa-primary-dark: #074880; /* Darker Primary for hover */ --wwa-accent: #0b3058; /* Accent/Dark Secondary */ --wwa-light: #f4f8fc; /* Light background/off-white */ --wwa-border: #c7c7c7; /* Standard border color */ --wwa-text: #1f2c3d; /* Dark text */ --wwa-muted: #5a6b7d; /* Muted/Secondary text */ } .who-we-are-page section + section { margin-top: 20px; } /* Scroll Reveal Animation */ /* Reveal-on-scroll (progressive enhancement) Only hide elements when JS adds .reveal-enabled to */ .reveal-enabled .js-reveal-on-scroll { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .reveal-enabled .js-reveal-on-scroll.is-visible { opacity: 1; transform: none; } /* ----------------------------------- */ /* Hero Section */ /* ----------------------------------- */ .wwa-hero { position: relative; min-height: 100vh; background-size: cover; background-position: center; color: #ffffff; } .wwa-hero__overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(10, 38, 70, 0.86) 0%, rgba(10, 38, 70, 0.65) 100%); display: flex; align-items: center; } .wwa-hero .container { position: relative; z-index: 1; padding-top: clamp(72px, 10vh, 140px); padding-bottom: clamp(72px, 10vh, 140px); } .wwa-hero__eyebrow { font-size: 0.95rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 18px; color: #ffffff; font-weight: 600; } .wwa-hero__title { font-size: clamp(2.2rem, 4vw, 3.4rem); margin: 0 0 18px; line-height: 1.2; padding-top: 30% !important; } .wwa-hero__description { max-width: 640px; font-size: 1.05rem; line-height: 1.75; color: rgba(255, 255, 255, 0.9); } .who-we-are-page .wwa-hero__eyebrow, .who-we-are-page .wwa-hero__title, .who-we-are-page .wwa-hero__description { padding-left: 5%; } /* ----------------------------------- */ /* Section Headings */ /* ----------------------------------- */ .wwa-section-heading { text-align: left; margin-bottom: 48px; } .wwa-section-heading__eyebrow { text-transform: uppercase; letter-spacing: 3px; font-weight: 600; font-size: 0.85rem; color: var(--wwa-primary); margin: 12px 0 0; } .wwa-decade-heading { scroll-margin-top: 96px; } .wwa-section-heading__title { font-size: clamp(2rem, 3.2vw, 2.6rem); color: var(--wwa-text); margin: 0; line-height: 1.2; } .wwa-section-heading__description { margin: 18px 0 0; max-width: none; width: 100%; font-size: 1.05rem; line-height: 1.7; color: var(--wwa-muted); } /* ----------------------------------- */ /* Overview Section */ /* ----------------------------------- */ .wwa-overview .container { padding-top: 80px; padding-bottom: 72px; } .wwa-overview__content { display: flex; justify-content: flex-start; max-width: none; } .wwa-overview__text { font-size: 1.05rem; line-height: 1.8; color: var(--wwa-text); width: 100%; text-align: left; } .wwa-overview__text p { margin-left: 0; margin-right: 0; width: 100%; } .wwa-overview__text p + p { margin-top: 1.2em; } /* ----------------------------------- */ /* Journey (Timeline) Section */ /* ----------------------------------- */ .wwa-journey { background: var(--wwa-light); } .wwa-journey .container { padding-top: 80px; padding-bottom: 80px; } .wwa-timeline { position: relative; margin-top: 52px; padding-bottom: 24px; } .wwa-timeline__line { position: absolute; top: 0; bottom: 0; left: 50%; display: flex; } /* Timeline decade selector navigation */ .wwa-timeline-nav { margin: 6px auto 24px; padding: 12px 0 16px; border-bottom: 1px solid #2D2D2D; max-width: calc((min(420px, 90vw)) * 2 + 152px); } .wwa-timeline-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; gap: 72px; } .wwa-timeline-nav__item { position: relative; } .wwa-timeline-nav__item + .wwa-timeline-nav__item::before { content: ''; position: absolute; left: -36px; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: #2D2D2D; } .wwa-timeline-nav__link { color: #2D2D2D; text-decoration: none; font-weight: 500; transition: color 0.2s ease; font-size: 1rem; } .wwa-timeline-nav__link:hover { color: #2896d2; } .wwa-timeline-nav__link.is-active { color: #000000; font-weight: 700; } /* Decade heading highlight when targeted/activated */ .wwa-decade-heading.is-highlighted, .wwa-decade-heading:target { color: #2896d2; font-weight: 700; } .wwa-journey .wwa-section-heading { margin-bottom: 16px; } /* On smaller viewports adjust layout of the selector for consistency */ @media (max-width: 1100px) { .wwa-timeline-nav { max-width: 100%; } .wwa-timeline-nav__list { flex-wrap: wrap; gap: 16px 40px; } .wwa-timeline-nav__item::before { display: none; } } .location-map-frame--static img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ----------------------------------- */ /* Journey (Timeline) Section */ /* ----------------------------------- */ .wwa-journey { background: var(--wwa-light); } .wwa-journey .container { padding-top: 80px; padding-bottom: 80px; } .wwa-timeline { position: relative; margin-top: 52px; padding-bottom: 24px; } .wwa-timeline__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(13, 90, 166, 0.25) 0%, rgba(13, 90, 166, 0.65) 45%, rgba(11, 48, 88, 0.9) 100%); } .wwa-timeline__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 46px; } .wwa-timeline__item { position: relative; display: flex; justify-content: flex-start; } .wwa-timeline__item--right { justify-content: flex-end; } .wwa-timeline__card { background: #ffffff; border-radius: 22px; border: 1px solid #dbe4ef; box-shadow: 0 26px 44px rgba(16, 51, 83, 0.18); padding: 32px 34px; max-width: min(420px, 90vw); display: flex; flex-direction: column; gap: 18px; } .wwa-timeline__item--left .wwa-timeline__card { margin-right: 76px; } .wwa-timeline__item--right .wwa-timeline__card { margin-left: 76px; } .wwa-timeline__marker { position: absolute; top: 44px; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; border: 4px solid #ffffff; background: var(--wwa-primary); box-shadow: 0 0 0 8px rgba(13, 90, 166, 0.15); z-index: 2; } .wwa-timeline__year { display: inline-flex; align-items: center; justify-content: center; width: max-content; padding: 6px 20px; border-radius: 999px; background: var(--wwa-primary); color: #ffffff; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem; } .wwa-timeline__title { margin: 0; font-size: 1.3rem; color: var(--wwa-text); line-height: 1.35; } .wwa-timeline__card .wwa-timeline__content { color: var(--wwa-muted); font-size: 0.95rem; line-height: 1.65; } .wwa-timeline__card .wwa-timeline__content p { margin: 0; } .wwa-timeline__description { color: var(--wwa-muted); font-size: 0.75rem; line-height: 1.72; } @media (max-width: 1100px) { .wwa-timeline__item { justify-content: flex-start; } .wwa-timeline__item--left .wwa-timeline__card, .wwa-timeline__item--right .wwa-timeline__card { margin: 0 0 0 92px; } .wwa-timeline__line { left: 46px; } .wwa-timeline__marker { left: 46px; } .wwa-timeline__card { max-width: min(400px, 92vw); padding: 28px; } .wwa-timeline__title { font-size: 1.2rem; } .wwa-timeline__card .wwa-timeline__content { font-size: 0.92rem; line-height: 1.6; } .wwa-timeline__year { font-size: 0.85rem; padding: 5px 16px; } } @media (max-width: 640px) { .wwa-timeline__item--left .wwa-timeline__card, .wwa-timeline__item--right .wwa-timeline__card { margin-left: 64px; } .wwa-timeline__line { left: 28px; } .wwa-timeline__marker { left: 28px; } /* Compact on small screens */ .wwa-timeline__card { max-width: 100%; padding: 22px; } .wwa-timeline__title { font-size: 1.08rem; } .wwa-timeline__card .wwa-timeline__content { font-size: 0.9rem; line-height: 1.58; } .wwa-timeline-nav__link { font-size: 0.95rem; } .wwa-timeline-nav__item + .wwa-timeline-nav__item::before { height: 16px; } .wwa-decade-heading { scroll-margin-top: 84px; } } /* ----------------------------------- */ /* Featured Content Section */ /* ----------------------------------- */ .wwa-featured { background: #ffffff; } .wwa-featured .container { padding-top: 90px; padding-bottom: 90px; } .wwa-featured__header { text-align: left; max-width: none; margin: 0 0 56px; } .wwa-featured__eyebrow { text-transform: uppercase; letter-spacing: 2px; color: var(--wwa-primary); margin-bottom: 12px; font-size: 0.85rem; font-weight: 600; } .wwa-featured__title { margin: 0; font-size: clamp(2rem, 3vw, 2.6rem); color: var(--wwa-text); line-height: 1.2; } .wwa-featured__grid { display: grid; gap: 60px; grid-template-columns: 1fr; } .wwa-featured__partner { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 28px; width: 100%; } /* Standalone photo, rendered outside the grid for alignment with content */ .wwa-featured__photo { margin-bottom: 20px; } .wwa-featured__photo .wwa-featured__partner-image { max-width: none; width: 100%; } .wwa-featured__partner-image { display: block; max-width: 820px; width: 100%; } .wwa-featured__partner-image img { width: 100%; height: auto; display: block; border-radius: 22px; box-shadow: 0 20px 44px rgba(12, 38, 72, 0.18); } .wwa-featured__partner.is-logo .wwa-featured__partner-image { max-width: none; width: auto; } .wwa-featured__partner.is-logo .wwa-featured__partner-image img { max-width: 360px; width: 100%; height: auto; border-radius: 0; box-shadow: none; } .wwa-featured__partner.is-logo .wwa-featured__partner-content { max-width: none; width: 100%; } .wwa-featured__partner.is-photo .wwa-featured__partner-image { max-width: 820px; } .wwa-featured__partner-content { max-width: none; width: 100%; color: var(--wwa-muted); font-size: 1.02rem; line-height: 1.8; } .wwa-featured__partner-content p { text-align: justify; text-justify: inter-word; } .wwa-featured__partner-content p { margin: 0; } /* ----------------------------------- */ /* Supporters Section */ /* ----------------------------------- */ .wwa-supporters__frame { background: #ffffff; border-radius: 26px; border: 1px solid #e3eaf3; box-shadow: 0 26px 42px rgba(14, 48, 82, 0.14); padding: 40px 44px; overflow: hidden; } .wwa-supporters__heading { margin: 0 0 22px; color: var(--wwa-text); font-size: clamp(1.9rem, 2.6vw, 2.2rem); line-height: 1.2; } .wwa-supporters__description { margin: 0 0 22px; color: var(--wwa-muted); } .wwa-supporters__grid { display: grid; gap: 32px 56px; align-items: center; justify-items: center; justify-content: center; } .wwa-supporters__grid + .wwa-supporters__grid { margin-top: 36px; } .wwa-supporters__logo { display: flex; align-items: center; justify-content: center; padding: 10px; transition: transform 0.3s ease; outline-offset: 4px; min-height: 96px; } .wwa-supporters__logo img { max-width: 170px; max-height: 72px; width: auto; height: auto; object-fit: contain; opacity: 1; transition: opacity 0.3s ease; } .wwa-supporters__logo:hover img, .wwa-supporters__logo:focus img { opacity: 0.9; } .wwa-supporters__logo:hover, .wwa-supporters__logo:focus { transform: translateY(-4px); } /* Desktop layouts for two rows */ @media (min-width: 900px) { .wwa-supporters__grid--row1 { grid-template-columns: repeat(3, minmax(160px, 1fr)); } .wwa-supporters__grid--row2 { grid-template-columns: repeat(2, minmax(160px, 1fr)); justify-content: center; } .wwa-supporters__logo img { max-width: 185px; max-height: 80px; } } /* Tablet */ @media (min-width: 640px) and (max-width: 899px) { .wwa-supporters__frame { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 28px 40px; justify-items: center; } .wwa-supporters__grid { display: contents; } .wwa-supporters__grid + .wwa-supporters__grid { margin-top: 0; } .wwa-supporters__logo img { max-width: 165px; max-height: 70px; } .wwa-supporters__logo { min-height: 90px; } } /* Mobile */ @media (max-width: 639px) { .wwa-supporters__frame { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 22px; justify-items: center; } .wwa-supporters__grid { display: contents; } .wwa-supporters__grid + .wwa-supporters__grid { margin-top: 0; } /* Mobile logo sizing */ .wwa-supporters__logo img { max-width: 140px; max-height: 56px; } .wwa-supporters__logo { min-height: 88px; } } /* Small Mobile refinements */ @media (max-width: 480px) { .wwa-supporters__grid--row1, .wwa-supporters__grid--row2 { gap: 18px 18px; } .wwa-supporters__logo img { max-width: 135px; max-height: 56px; } .wwa-supporters__logo { min-height: 82px; } } /* ----------------------------------- */ /* Locations (Map) Section */ /* ----------------------------------- */ .wwa-locations .container { padding-top: 90px; padding-bottom: 90px; } .wwa-locations__grid { display: grid; grid-template-columns: 1fr; gap: 36px; } .location-card { background: #ffffff; border-radius: 26px; border: 1px solid #e3eaf3; box-shadow: 0 26px 42px rgba(14, 48, 82, 0.14); overflow: hidden; display: flex; flex-direction: column; } .location-card__map { padding: 12px 28px 28px; display: flex; } .location-map-frame { border: 1px solid var(--wwa-border); border-radius: 18px; overflow: hidden; background: #ffffff; box-shadow: 0 16px 32px rgba(16, 51, 83, 0.16); width: 100%; display: flex; } .location-map-frame .leaflet-map, .location-map-frame .leaflet-container { display: block; width: 100%; height: 360px; } .nesi-pin img { width: 28px !important; height: auto; display: block; } .location-map-frame--static { position: relative; } .location-map-frame__image { display: block; width: 100%; height: 100%; object-fit: cover; } .location-map-frame__marker { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); width: 36px; height: 36px; pointer-events: none; } .location-card__body { padding: 24px 28px 12px; } .location-card__body h3 { font-size: 1.4rem; margin: 0 0 14px; color: var(--wwa-text); } .location-card__body p { margin: 0 0 12px; font-size: 1rem; line-height: 1.6; color: var(--wwa-muted); } .location-card__address { font-weight: 600; color: var(--wwa-text); display: block; margin-top: 16px; } /* ----------------------------------- */ /* Responsive Design (Media Queries) */ /* ----------------------------------- */ /* Tablet & Larger Mobile Landscape (Max 1100px) */ @media (max-width: 1100px) { .wwa-featured__grid { gap: 48px; } .wwa-featured__partner-image { max-width: 680px; } } /* Smaller Tablet & Larger Mobile Portrait (Max 900px) */ @media (max-width: 900px) { .wwa-locations__grid { grid-template-columns: 1fr; } .location-card__map { padding: 12px 20px 20px; } .location-card__body { padding: 20px 20px 10px; } .location-map-frame .leaflet-map, .location-map-frame .leaflet-container { height: 300px; } } /* Medium Mobile (Max 640px) */ @media (max-width: 640px) { .who-we-are-page .container { padding-top: 60px; padding-bottom: 60px; } .wwa-hero .container { padding-top: 80px; padding-bottom: 80px; } .wwa-hero__eyebrow { letter-spacing: 2px; } .wwa-section-heading { margin-bottom: 30px; } .wwa-section-heading__title { font-size: 2rem; } .location-card__map { padding: 10px 16px 16px; } .location-card__body { padding: 18px 16px 10px; } .location-map-frame .leaflet-map, .location-map-frame .leaflet-container { height: 260px; } .who-we-are-page section + section { margin-top: 30px; } .wwa-timeline__list { gap: 32px; } .wwa-supporters__frame { padding: 36px 32px; } .wwa-supporters__heading { font-size: 1.85rem; } .wwa-supporters__description { font-size: 1rem; } .wwa-featured__grid { gap: 44px; } .wwa-featured__partner-content { font-size: 1rem; } .location-card__map { padding: 10px 16px 16px; } .location-map-frame .leaflet-map, .location-map-frame .leaflet-container { height: 260px; } } /* Small Mobile (Max 480px) */ @media (max-width: 480px) { .wwa-hero__title { font-size: 2.1rem; } .wwa-hero__description { font-size: 1rem; } .location-card__body { padding: 20px 16px 12px; } .location-card__map { padding: 10px 16px 16px; } .location-map-frame .leaflet-map, .location-map-frame .leaflet-container { height: 240px; } .wwa-supporters__grid { gap: 20px; } .wwa-supporters__frame { padding: 24px 20px; } }