/* ===================================================================== legacy.css — "Our Legacy" timeline page. Everything scoped under .legacy so it never affects the shared header/footer or the site's global tokens. ===================================================================== */ /* Fonts come from the shared (Poppins + Playfair Display) — same as the homepage. */ /* base.css sets overflow-x:hidden on html/body, which makes body a scroll container and breaks position:sticky. `clip` prevents the horizontal scroll the same way WITHOUT breaking sticky. (Only affects this page.) */ html, body { overflow-x: clip; } .legacy { --paper:#faf8f3; --card:#ffffff; --forest:#1f4738; --forest-deep:#153228; /* headings use the site-wide maroon (matches every other page — the forest green above is kept only for the few non-heading accents below: active nav states, era tag badges, the hero image gradient). */ --l-maroon: var(--maroon, #8D2130); --l-maroon-deep: var(--maroon-900, #5F141C); --brass:#c08a2e; --clay:#b75c3e; --ink:#22261f; --muted:#6b6a5e; --l-line:#e7e2d5; background: var(--paper); color: var(--ink); font-family: var(--font-sans); padding-top: calc(var(--topbar-h, 38px) + var(--nav-h, 74px) + 8px); /* clear the fixed header */ } /* scroll progress + sticky era scrubber */ .legacy .progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--brass); width: 0%; z-index: 1002; transition: width .1s linear; } .legacy .scrubber { position: sticky; top: 60px; z-index: 15; background: rgba(250,248,243,.94); backdrop-filter: blur(6px); border-block: 1px solid var(--l-line); display: flex; overflow-x: auto; gap: 4px; padding: 12px 20px; } .legacy .scrubber a { flex: 0 0 auto; font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--muted); text-decoration: none; padding: 8px 14px; border-radius: 20px; white-space: nowrap; transition: .2s; } .legacy .scrubber a.active, .legacy .scrubber a:hover { background: var(--forest); color: #fff; } /* hero */ .legacy .hero { max-width: 1080px; margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: end; } /* .legacy .hero .blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 280px; } */ .legacy .blocks div { border-radius: 6px; overflow: hidden; position: relative; } .legacy .blocks img { width: 100%; height: 100%; object-fit: cover; display: block; } .legacy .b1 { background: linear-gradient(160deg, var(--forest), var(--forest-deep)); grid-row: 1 / 3; } .legacy .b2 { background: var(--brass); } .legacy .b3 { background: linear-gradient(160deg, #e2d9c2, #cdc0a0); } .legacy .kicker { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin: 0 0 14px; } .legacy h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 5.5vw, 68px); line-height: 1.04; letter-spacing: normal; margin: 0 0 18px; color: var(--l-maroon-deep); } .legacy .hero p.sub { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 460px; margin: 0 0 22px; } .legacy .pill-row { display: flex; gap: 10px; flex-wrap: wrap; } .legacy .pill { font-size: 12px; font-weight: 600; border: 1px solid var(--l-line); border-radius: 20px; padding: 7px 14px; color: var(--ink); } /* founders */ .legacy .founders { max-width: 1080px; margin: 8px auto 0; padding: 20px 24px 8px; } .legacy .founders__head { text-align: center; margin-bottom: 26px; } .legacy .founders__eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; } .legacy .founders__head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.4vw, 32px); color: var(--l-maroon-deep); margin: 0; } .legacy .founders__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .legacy .founder { margin: 0; text-align: center; } .legacy .founder__photo { aspect-ratio: 4/5; overflow: hidden; border-radius: 8px; border: 1px solid var(--l-line); background-color: #e6ddc9; box-shadow: 0 16px 34px -20px rgba(43,36,32,.5); } /* heritage "enhance": clean monochrome + a little more contrast/clarity */ .legacy .founder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: grayscale(1) contrast(1.12) brightness(1.03) saturate(0); transition: filter .4s, transform .6s; } .legacy .founder:hover .founder__photo img { filter: grayscale(1) contrast(1.2) brightness(1.05); transform: scale(1.03); } /* hero: single image, top right */ .legacy .blocks--single { display: block; height: auto; } .legacy .blocks--single .b1 { grid-row: auto; background: none; } .legacy .blocks--single img { width: 100%; aspect-ratio: 4/5; max-height: 420px; object-fit: cover; object-position: center 20%; border-radius: 8px; filter: grayscale(1) contrast(1.08); } .legacy .founder__name { display: block; font-family: var(--font-display); font-size: 18px; color: var(--l-maroon-deep); margin: 14px 0 2px; line-height: 1.25; } .legacy .founder__title { display: block; font-size: 12.5px; color: var(--muted); letter-spacing: .01em; } /* arrows are hidden on desktop (grid needs no nav) */ .legacy .founders__slider { position: relative; } .legacy .founders__nav { display: none; } /* ---- founders: swipeable slider on MOBILE only (desktop keeps the 3-up grid) ---- */ @media (max-width: 700px) { .legacy .founders { padding-inline: 0; } .legacy .founders__head { padding-inline: 24px; } /* left / right arrows */ .legacy .founders__nav { display: grid; place-items: center; position: absolute; top: 40%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.94); border: 1px solid var(--l-line); color: var(--forest-deep); cursor: pointer; z-index: 3; box-shadow: 0 6px 18px rgba(43,36,32,.2); transition: background .2s, color .2s; } .legacy .founders__nav svg { width: 20px; height: 20px; } .legacy .founders__nav:active { background: var(--forest); color: #fff; } .legacy .founders__nav--prev { left: 10px; } .legacy .founders__nav--next { right: 10px; } .legacy .founders__grid { display: flex; grid-template-columns: none; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 4px 24px 14px; scroll-padding-left: 24px; scrollbar-width: none; /* Firefox */ } .legacy .founders__grid::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .legacy .founder { flex: 0 0 78%; /* one card at a time, next one peeking */ scroll-snap-align: center; } } /* body layout + timeline */ .legacy .layout { max-width: 1080px; margin: 0 auto; padding: 20px 24px 40px; display: grid; grid-template-columns: 200px 1fr; gap: 48px; } .legacy .rail { position: sticky; top: 120px; align-self: start; padding-top: 6px; } .legacy .rail-era { font-family: var(--font-display); font-size: 15px; color: var(--muted); padding: 10px 0 10px 16px; border-left: 2px solid var(--l-line); margin-bottom: 4px; } .legacy .rail-era.active { color: var(--forest); border-left-color: var(--forest); font-weight: 600; } .legacy .timeline { position: relative; } .legacy .timeline .item { position: relative; scroll-margin-top: 130px; padding: 34px 0 34px 30px; border-bottom: 1px solid var(--l-line); display: grid; grid-template-columns: 110px 1fr; gap: 26px; } .legacy .timeline .item:first-child { padding-top: 0; } /* dot + dashed connector down to the next era, same visual language as academic-journey.css's .jn__node/.jn::after K-12 journey timeline */ .legacy .timeline .item::before { content: ""; position: absolute; left: 0; top: 40px; width: 12px; height: 12px; border-radius: 50%; background: var(--l-maroon); box-shadow: 0 0 0 4px var(--paper); z-index: 1; } .legacy .timeline .item:not(:last-child)::after { /* bottom:-40px (not the item's own 34px padding) — the line needs to reach the NEXT item's dot, which sits 40px from ITS top, not this item's bottom padding. Using `bottom` (not a fixed height) keeps this correct regardless of each item's actual content height. */ content: ""; position: absolute; left: 5px; top: 52px; bottom: -40px; width: 2px; background: repeating-linear-gradient(180deg, var(--l-maroon) 0 6px, transparent 6px 12px); opacity: .55; } /* first item has no top padding, so its dot (and the line below it) sit higher — same 12px dot, just starting near the top instead of 40px */ .legacy .timeline .item:first-child::before { top: 6px; } .legacy .timeline .item:first-child::after { top: 18px; } .legacy .year { font-family: var(--font-display); font-size: 24px; color: var(--l-maroon); font-weight: 500; } .legacy .year small { display: block; font-family: var(--font-sans); font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 4px; } .legacy .tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--forest); background: #e9efe9; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; } .legacy .item.milestone .tag { color: #7a4f19; background: #f3e6cc; } .legacy .item h3 { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: normal; margin: 0 0 8px; color: var(--ink); } .legacy .item p { margin: 0; font-size: 16.5px; line-height: 1.65; color: #4c4a41; } .legacy .hl-maroon { color: var(--l-maroon); font-weight: 600; } .legacy .item p + p { margin-top: 14px; } /* campus cards */ .legacy .campus-grid { max-width: 1080px; margin: 20px auto 0; padding: 0 24px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .legacy .campus-card { background: var(--card); border: 1px solid var(--l-line); border-radius: 12px; padding: 28px; } .legacy .campus-card .yr { font-size: 12px; font-weight: 700; color: var(--brass); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; } .legacy .campus-card h4 { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; color: var(--l-maroon-deep); } .legacy .campus-card p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.6; } /* closing block */ .legacy .l-end { max-width: 1080px; margin: 0 auto; padding: 60px 24px 80px; text-align: center; } .legacy .motto { font-family: var(--font-display); font-style: italic; font-size: 26px; color: var(--l-maroon-deep); margin: 0 0 26px; } .legacy .campuses { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .legacy .campuses a { font-size: 13px; font-weight: 600; text-decoration: none; color: #fff; background: var(--forest); padding: 13px 26px; border-radius: 8px; transition: opacity .2s; } .legacy .campuses a:hover { opacity: .9; } .legacy .campuses a.alt { background: var(--clay); } @media (max-width: 820px) { .legacy .hero { grid-template-columns: 1fr; } /* .legacy .hero .blocks { order: -1; height: 200px; } */ .legacy .layout { grid-template-columns: 1fr; } .legacy .rail { display: none; } .legacy .timeline .item { grid-template-columns: 80px 1fr; } .legacy .campus-grid { grid-template-columns: 1fr; } }