/* ========================================================= PROJECT LIBRARY COMPONENTS The global identity, header, navigation, buttons and footer are inherited from assets/css/styles.css and assets/css/site-shared-theme.css. ========================================================= */ :root { --project-navy: #071d33; --project-blue: #1769e0; --project-cyan: #18b8b0; --project-gold: #ffc15b; } .project-hero { position:relative;overflow:hidden;padding:64px 0;background:linear-gradient(140deg,#071d33 0%,#0a3450 65%,#0a283f 100%);color:#fff; } .project-hero__grid { position:absolute;inset:0;opacity:.19;background-image:linear-gradient(rgba(112,203,220,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(112,203,220,.14) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to right,#000,transparent 85%); } .project-hero__layout { position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:48px;align-items:end; } .project-hero h1 { max-width:900px;margin:12px 0 15px;color:#fff;font-size:clamp(2.3rem,4.3vw,4rem);line-height:1.02;letter-spacing:-.035em; } .project-hero p { max-width:780px;margin:0;color:#c2d5e1;font-size:.97rem;line-height:1.75; } .project-hero .eyebrow { color:#68d7d1; }.project-hero__meta { display:flex;flex-wrap:wrap;gap:8px;margin-top:22px; } .project-hero__meta span { padding:7px 10px;border:1px solid rgba(161,215,227,.2);border-radius:999px;background:rgba(255,255,255,.05);color:#e0eef4;font-size:.69rem;font-weight:800; } .project-hero__note { padding:22px;border:1px solid rgba(255,193,91,.24);border-radius:18px;background:rgba(4,23,40,.42); } .project-hero__note strong { display:block;color:#ffc15b;font-size:.82rem; }.project-hero__note p { margin-top:8px;font-size:.78rem;line-height:1.65; } .project-selector { padding:58px 0 46px;background:#fff; }.compact-heading,.project-gallery-heading { display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.55fr);gap:34px;align-items:end;margin-bottom:24px; } .compact-heading h2,.project-gallery-heading h2 { max-width:760px;margin:7px 0 0;color:#0d2942;font-size:clamp(1.7rem,3vw,2.45rem); }.compact-heading>p,.project-gallery-heading>p { margin:0;color:#667c8d;line-height:1.7;font-size:.88rem; } .project-picker { display:flex;gap:14px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity;scrollbar-color:#9fb8c7 transparent; } .project-picker__card { position:relative;display:grid;grid-template-rows:120px auto auto;flex:0 0 235px;min-width:0;overflow:hidden;padding:0 0 15px;border:1px solid rgba(18,70,101,.12);border-radius:17px;background:#fff;color:#19364e;text-align:left;cursor:pointer;scroll-snap-align:start;box-shadow:0 12px 28px rgba(17,48,72,.06);transition:.18s ease; } .project-picker__card:hover,.project-picker__card.is-active { transform:translateY(-3px);border-color:rgba(23,105,224,.52);box-shadow:0 17px 34px rgba(17,48,72,.11); }.project-picker__card.is-active { box-shadow:inset 0 -3px 0 #1769e0,0 17px 34px rgba(17,48,72,.11); } .project-picker__image { display:grid;place-items:center;overflow:hidden;background:#eef4f7; }.project-picker__image img { width:100%;height:100%;object-fit:cover; }.project-picker__placeholder { font-size:2.2rem;font-weight:900;color:#1769e0; } .project-picker__index { position:absolute;top:10px;left:10px;padding:4px 7px;border-radius:999px;background:rgba(7,29,51,.82);color:#ffc15b;font-size:.62rem;font-weight:900; } .project-picker__card strong { padding:14px 14px 0;font-size:.86rem;line-height:1.4; }.project-picker__card small { padding:5px 14px 0;color:#708596;font-size:.68rem; } .project-detail-section { padding:20px 0 70px;background:linear-gradient(#f4f8fa,#fff 34%); }.project-detail { display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);overflow:hidden;border:1px solid rgba(18,70,101,.12);border-radius:23px;background:#fff;box-shadow:0 24px 58px rgba(17,48,72,.10); } .project-detail__media { position:relative;min-height:430px;background:#0a2943; }.project-detail__main { width:100%;height:100%;min-height:430px;padding:0;border:0;background:transparent;cursor:zoom-in; }.project-detail__main img { width:100%;height:100%;object-fit:contain;background:radial-gradient(circle at 50% 45%,#174d68,#071d33 72%); } .project-detail__counter { position:absolute;left:16px;bottom:16px;padding:7px 10px;border-radius:999px;background:rgba(4,21,36,.78);color:#d8e8ef;font-size:.68rem;font-weight:800; } .project-detail__copy { padding:38px;align-self:center; }.project-detail__labels { display:flex;flex-wrap:wrap;gap:7px;margin-bottom:20px; }.project-detail__labels span { padding:6px 9px;border-radius:999px;background:#eaf3fb;color:#1769e0;font-size:.65rem;font-weight:850; } .project-detail__copy h2 { margin:7px 0 13px;color:#0d2942;font-size:clamp(1.65rem,3vw,2.45rem);line-height:1.15; }.project-detail__summary { margin:0;color:#5e7486;line-height:1.75;font-size:.9rem; } .project-detail__points { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 13px;margin:23px 0 26px; }.project-detail__points span { display:flex;gap:8px;color:#315066;font-size:.76rem;line-height:1.45; }.project-detail__points span::before { content:"✓";color:#18a8ab;font-weight:900; } .project-gallery-heading { margin-top:50px; }.project-gallery { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }.project-gallery__item { position:relative;overflow:hidden;aspect-ratio:4/3;padding:0;border:1px solid rgba(18,70,101,.12);border-radius:14px;background:#eaf1f4;cursor:zoom-in; }.project-gallery__item img { width:100%;height:100%;object-fit:cover;transition:transform .22s ease; }.project-gallery__item:hover img { transform:scale(1.035); }.project-gallery__item span { position:absolute;right:8px;bottom:8px;padding:4px 7px;border-radius:999px;background:rgba(7,29,51,.74);color:#fff;font-size:.58rem;font-weight:800; } .project-gallery__actions { display:flex;justify-content:center;margin-top:20px; }.project-library-disclaimer { max-width:900px;margin:28px auto 0;color:#7b909e;font-size:.72rem;line-height:1.6;text-align:center; } .project-library-cta { padding:58px 0;background:linear-gradient(145deg,#08243c,#0b3a51);color:#fff; }.project-library-cta__inner { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:center; }.project-library-cta h2 { max-width:800px;margin:7px 0 10px;color:#fff;font-size:clamp(1.7rem,3vw,2.45rem); }.project-library-cta p { max-width:760px;margin:0;color:#bfd3df;line-height:1.7; }.project-library-cta__inner>div:last-child { display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end; }.project-library-cta .button--ghost { color:#fff;border-color:rgba(255,255,255,.28);background:transparent; } .project-lightbox { position:fixed;z-index:200;inset:0;display:grid;place-items:center;padding:60px 74px;background:rgba(2,13,23,.94); }.project-lightbox[hidden] { display:none; }.project-lightbox figure { display:grid;gap:12px;max-width:min(1200px,90vw);max-height:86vh;margin:0; }.project-lightbox img { max-width:100%;max-height:78vh;object-fit:contain;border-radius:12px; }.project-lightbox figcaption { color:#d5e5ed;font-size:.78rem;text-align:center; }.project-lightbox__close,.project-lightbox__nav { position:absolute;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;cursor:pointer; }.project-lightbox__close { top:18px;right:22px;width:44px;height:44px;border-radius:50%;font-size:1.8rem; }.project-lightbox__nav { top:50%;width:46px;height:64px;border-radius:13px;font-size:2rem;transform:translateY(-50%); }.project-lightbox__nav--prev { left:18px; }.project-lightbox__nav--next { right:18px; } .library-groups { padding:60px 0 72px;background:#fff; }.library-group-summary { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:28px; }.library-group-summary article { display:grid;grid-template-columns:38px 1fr;gap:11px;padding:17px;border:1px solid rgba(18,70,101,.11);border-radius:15px;background:#f9fbfc; }.library-group-summary article>span { display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#0c3652;color:#ffc15b;font-size:.65rem;font-weight:900; }.library-group-summary h3 { margin:0 0 4px;color:#17344e;font-size:.86rem; }.library-group-summary p { margin:0;color:#718595;font-size:.7rem;line-height:1.45; } .library-filters { display:flex;gap:8px;overflow-x:auto;margin:0 0 24px;padding-bottom:5px; }.library-filter { flex:0 0 auto;padding:9px 13px;border:1px solid rgba(18,70,101,.13);border-radius:999px;background:#fff;color:#456176;font:inherit;font-size:.72rem;font-weight:800;cursor:pointer; }.library-filter.is-active { border-color:#1769e0;background:#1769e0;color:#fff; }.library-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px; }.library-card { overflow:hidden;border:1px solid rgba(18,70,101,.12);border-radius:19px;background:#fff;box-shadow:0 13px 32px rgba(17,48,72,.065);transition:.18s ease; }.library-card:hover { transform:translateY(-4px);box-shadow:0 20px 42px rgba(17,48,72,.11); }.library-card[hidden] { display:none; }.library-card__image { position:relative;display:grid;place-items:center;overflow:hidden;aspect-ratio:16/9;background:#eaf1f4; }.library-card__image img { width:100%;height:100%;object-fit:cover; }.library-card__image>span:last-child { position:absolute;left:12px;bottom:12px;padding:5px 8px;border-radius:999px;background:rgba(7,29,51,.82);color:#ffc15b;font-size:.63rem;font-weight:900; }.library-card__placeholder { color:#1769e0;font-size:2.8rem;font-weight:900; }.library-card__body { display:grid;padding:20px; }.library-card__body small { color:#0d8f91;font-size:.65rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em; }.library-card__body strong { margin-top:8px;color:#0d2942;font-size:1.02rem; }.library-card__body p { margin:8px 0 14px;color:#687d8e;font-size:.76rem;line-height:1.58; }.library-card__body b { color:#1769e0;font-size:.74rem; }.library-empty { padding:30px;text-align:center;color:#718595; } @media (max-width:1180px) { .project-hero__layout { grid-template-columns:1fr;gap:28px; }.project-hero__note { max-width:700px; }.project-detail { grid-template-columns:1fr; }.project-detail__media,.project-detail__main { min-height:390px; }.project-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); }.library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.library-group-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:760px) { .project-hero { padding:44px 0; }.project-hero h1 { font-size:clamp(2rem,10vw,2.8rem); }.project-hero__note { padding:18px; }.compact-heading,.project-gallery-heading { grid-template-columns:1fr;gap:10px; }.project-selector { padding:45px 0 36px; }.project-picker__card { flex-basis:205px;grid-template-rows:105px auto auto; }.project-detail-section { padding-top:8px; }.project-detail { border-radius:18px; }.project-detail__media,.project-detail__main { min-height:280px; }.project-detail__copy { padding:25px 21px; }.project-detail__points { grid-template-columns:1fr; }.project-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); }.project-library-cta__inner { grid-template-columns:1fr; }.project-library-cta__inner>div:last-child { justify-content:flex-start; }.library-group-summary,.library-grid { grid-template-columns:1fr; }.project-lightbox { padding:60px 48px; }.project-lightbox__nav { width:38px;height:54px; }.project-lightbox__nav--prev { left:5px; }.project-lightbox__nav--next { right:5px; } } @media (max-width:480px) { .project-gallery { grid-template-columns:1fr 1fr;gap:8px; }.project-gallery__item { border-radius:10px; }.project-detail__media,.project-detail__main { min-height:235px; }.project-hero__meta span { font-size:.61rem; }.library-card__body { padding:17px; } } /* ========================================================= PROJECT LIBRARY THEME ALIGNMENT — V2 Matches the compact student-facing homepage. ========================================================= */ .project-library-page .project-hero { padding: 46px 0 48px; } .project-library-page .project-hero__layout { gap: 34px; } .project-library-page .project-hero h1 { max-width: 800px; margin: 9px 0 13px; font-size: clamp(2.15rem, 3.45vw, 3.25rem); line-height: 1.02; } .project-library-page .project-hero p { font-size: .86rem; line-height: 1.65; } .project-library-page .project-hero .eyebrow { font-size: .67rem; } .project-library-page .project-hero__meta { margin-top: 17px; } .project-library-page .project-hero__meta span { padding: 6px 9px; font-size: .63rem; } .project-library-page .project-hero__note { padding: 18px; border-radius: 15px; } .project-library-page .project-hero__note strong { font-size: .76rem; } .project-library-page .project-hero__note p { font-size: .72rem; } .project-library-page .compact-heading, .project-library-page .project-gallery-heading { gap: 25px; margin-bottom: 19px; } .project-library-page .compact-heading h2, .project-library-page .project-gallery-heading h2 { font-size: clamp(1.5rem, 2.5vw, 2.05rem); } .project-library-page .compact-heading > p, .project-library-page .project-gallery-heading > p { font-size: .79rem; line-height: 1.6; } .project-library-page .project-selector { padding: 42px 0 31px; } .project-library-page .project-picker { gap: 11px; padding-bottom: 11px; } .project-library-page .project-picker__card { grid-template-rows: 104px auto auto; flex-basis: 210px; padding-bottom: 13px; border-radius: 15px; } .project-library-page .project-picker__card strong { padding: 12px 12px 0; font-size: .78rem; } .project-library-page .project-picker__card small { padding: 4px 12px 0; font-size: .62rem; } .project-library-page .project-picker__index { font-size: .56rem; } .project-library-page .project-detail-section { padding: 12px 0 55px; } .project-library-page .project-detail { grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr); border-radius: 20px; } .project-library-page .project-detail__media, .project-library-page .project-detail__main { min-height: 360px; } .project-library-page .project-detail__copy { padding: 30px; } .project-library-page .project-detail__labels { margin-bottom: 15px; } .project-library-page .project-detail__labels span { font-size: .6rem; } .project-library-page .project-detail__copy h2 { margin: 6px 0 10px; font-size: clamp(1.45rem, 2.45vw, 2rem); } .project-library-page .project-detail__summary { font-size: .82rem; line-height: 1.65; } .project-library-page .project-detail__points { gap: 7px 12px; margin: 18px 0 21px; } .project-library-page .project-detail__points span { font-size: .7rem; } .project-library-page .project-gallery-heading { margin-top: 38px; } .project-library-page .project-gallery { gap: 10px; } .project-library-page .project-gallery__item { border-radius: 12px; } .project-library-page .project-library-disclaimer { margin-top: 22px; font-size: .68rem; } .project-library-page .library-groups { padding: 44px 0 58px; } .project-library-page .library-group-summary { gap: 10px; margin-bottom: 21px; } .project-library-page .library-group-summary article { grid-template-columns: 34px 1fr; gap: 9px; padding: 14px; border-radius: 13px; } .project-library-page .library-group-summary article > span { width: 30px; height: 30px; font-size: .58rem; } .project-library-page .library-group-summary h3 { font-size: .78rem; } .project-library-page .library-group-summary p { font-size: .64rem; } .project-library-page .library-filters { margin-bottom: 18px; } .project-library-page .library-filter { padding: 7px 11px; font-size: .66rem; } .project-library-page .library-grid { gap: 15px; } .project-library-page .library-card { border-radius: 17px; } .project-library-page .library-card__body { padding: 17px; } .project-library-page .library-card__body small { font-size: .59rem; } .project-library-page .library-card__body strong { font-size: .93rem; } .project-library-page .library-card__body p { margin: 7px 0 12px; font-size: .7rem; } .project-library-page .library-card__body b { font-size: .68rem; } .project-library-page .project-library-cta { padding: 44px 0; } .project-library-page .project-library-cta h2 { font-size: clamp(1.45rem, 2.5vw, 2rem); } .project-library-page .project-library-cta p { font-size: .8rem; } @media (max-width: 1180px) { .project-library-page .project-detail { grid-template-columns: 1fr; } .project-library-page .project-detail__media, .project-library-page .project-detail__main { min-height: 330px; } } @media (max-width: 760px) { .project-library-page .project-hero { padding: 30px 0 32px; } .project-library-page .project-hero__layout { gap: 15px; } .project-library-page .project-hero h1 { font-size: clamp(1.85rem, 9.5vw, 2.45rem); } .project-library-page .project-hero p { font-size: .78rem; } .project-library-page .project-hero__note { display: none; } .project-library-page .project-hero__meta { gap: 6px; margin-top: 14px; } .project-library-page .project-hero__meta span { font-size: .56rem; } .project-library-page .project-selector { padding: 34px 0 26px; } .project-library-page .project-picker__card { flex-basis: 188px; grid-template-rows: 92px auto auto; } .project-library-page .project-detail-section { padding-top: 5px; } .project-library-page .project-detail__media, .project-library-page .project-detail__main { min-height: 235px; } .project-library-page .project-detail__copy { padding: 22px 18px; } .project-library-page .project-detail__copy h2 { font-size: 1.38rem; } .project-library-page .project-detail__points { grid-template-columns: 1fr; } .project-library-page .project-gallery-heading { margin-top: 28px; } .project-library-page .library-groups { padding: 34px 0 45px; } .project-library-page .library-group-summary { display: none; } .project-library-page .library-grid { grid-template-columns: 1fr; } .project-library-page .project-library-cta { padding: 36px 0; } .project-library-page .project-library-cta__inner > div:last-child { display: grid; grid-template-columns: 1fr; } .project-library-page .project-library-cta .button { width: 100%; } } @media (max-width: 480px) { .project-library-page .project-gallery { grid-template-columns: 1fr 1fr; gap: 7px; } .project-library-page .library-card__body { padding: 15px; } } /* ========================================================= APPROVED INDEX VISUAL ALIGNMENT — V4 ========================================================= */ .project-library-page .project-hero { background: radial-gradient(circle at 78% 26%, rgba(24, 184, 176, .20), transparent 25%), radial-gradient(circle at 12% 100%, rgba(23, 105, 224, .28), transparent 34%), linear-gradient(125deg, #061726 0%, #082844 52%, #0b3852 100%); } .project-library-page .project-hero__grid { opacity: .23; background-image: linear-gradient(rgba(151, 203, 239, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(151, 203, 239, .16) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.9) 58%, transparent 95%); } .project-library-page .project-hero .eyebrow { color: #78e0dc; } .project-library-page .project-hero__note { border-color: rgba(242, 165, 49, .38); background: rgba(5, 25, 43, .56); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .project-library-page .project-hero__note strong { color: #f2a531; } .project-library-page .project-hero__meta span { border-color: rgba(151, 218, 255, .24); background: rgba(255,255,255,.055); } .project-library-page .library-group-summary article > span { background: linear-gradient(145deg, #0b2b49, #1769e0); color: #f2a531; } .project-library-page .library-filter.is-active { border-color: #1769e0; background: #1769e0; box-shadow: 0 8px 20px rgba(23,105,224,.18); } .project-library-page .library-card__body small { color: #0c8e91; } .project-library-page .library-card__body b { color: #1769e0; } .project-library-page .project-picker__card:hover, .project-library-page .project-picker__card.is-active { border-color: rgba(23,105,224,.52); } .project-library-page .project-picker__card.is-active { box-shadow: inset 0 -3px 0 #1769e0, 0 17px 34px rgba(17,48,72,.11); } .project-library-page .project-picker__placeholder { color: #1769e0; } .project-library-page .project-detail__labels span { background: #eaf3fb; color: #1769e0; } .project-library-page .project-detail__points span::before { color: #18a8ab; } .project-library-page .project-library-cta { background: radial-gradient(circle at 92% 0%, rgba(24,184,176,.18), transparent 31%), linear-gradient(125deg, #061726 0%, #082844 56%, #0b3852 100%); }