/* ============================================================ CS Equity AI — stylesheet v3 Editorial light theme · paper / ink / blue / green Kinetic type, scroll dynamics, pinned sections ============================================================ */ /* ============ fonts (self-hosted, SIL OFL — see assets/fonts/OFL.txt) ============ */ /* Variable Fraunces (opsz + wght) and Inter (wght), latin + latin-ext subsets from Fontsource 5.3.0. Same unicode-ranges Google Fonts serves; the browser only downloads a subset when the page actually uses a character from it. */ @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: optional; src: url("../fonts/v5.3.0/fraunces-latin-ext-opsz-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: optional; src: url("../fonts/v5.3.0/fraunces-latin-opsz-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: optional; src: url("../fonts/v5.3.0/fraunces-latin-ext-opsz-italic.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: optional; src: url("../fonts/v5.3.0/fraunces-latin-opsz-italic.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/v5.3.0/inter-latin-ext-wght-normal.woff2") format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/v5.3.0/inter-latin-wght-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } :root { --paper: #faf9f4; --paper-2: #eff3ee; --ink: #101d29; --ink-2: #4c5c68; --ink-3: #63707a; /* was #7d8b95: 3.1:1 on --paper-2, now 4.5:1+ (WCAG AA) */ --blue: #0e6fb8; --blue-2: #4ea3dd; --green: #107e59; /* was #128a62: 3.9:1 on --paper-2, now 4.5:1+ (WCAG AA) */ --green-2: #5cbf9b; --hair: #e2e7e3; --hair-2: #cfd6d1; --serif: "Fraunces", Georgia, serif; --sans: "Inter", "Helvetica Neue", Arial, sans-serif; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--sans); background: var(--paper); color: var(--ink); line-height: 1.62; font-size: 16.5px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: #d5e9f7; } /* film-grain texture over everything, extremely faint */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 500; opacity: 0.028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; } p, li, blockquote { text-wrap: pretty; } h4, h5 { font-family: var(--sans); } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 56px); } /* reveal primitives Gated on html.js so the page is fully readable when scripting is off or main.js fails to load — otherwise everything below the fold stays at opacity 0 forever. The .js class is set inline in . */ .js .reveal { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.6s ease, transform 0.6s var(--ease-out); } .js .reveal.visible { opacity: 1; transform: translate3d(0, 0, 0); } .js .reveal-blur { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.6s ease, transform 0.6s var(--ease-out); } .js .reveal-blur.visible { opacity: 1; transform: translate3d(0, 0, 0); } .js .stagger > * { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 0.6s ease, transform 0.6s var(--ease-out); } .js .stagger.visible > * { opacity: 1; transform: translate3d(0, 0, 0); } /* without JS: no accordion, so show every answer */ html:not(.js) .faq-a { max-height: none; } /* ============ label ============ */ .label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); } .label b { color: var(--ink); font-weight: 600; } /* ============ links & buttons ============ */ .arrow-link { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 550; font-size: 0.95rem; color: var(--ink); border-bottom: 1px solid var(--hair-2); padding-bottom: 2px; transition: border-color 0.2s ease; } .arrow-link:hover { border-color: var(--ink); } .arrow-link .a { display: inline-block; transition: transform 0.25s var(--ease-out); } .arrow-link:hover .a { transform: translateX(5px); } .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; font-family: var(--sans); font-weight: 550; font-size: 0.93rem; border: 1px solid var(--ink); cursor: pointer; background: var(--ink); color: var(--paper); overflow: hidden; transition: transform 0.16s cubic-bezier(.34,1.6,.6,1), color 0.3s; will-change: transform; } .btn > span, .btn > b { position: relative; z-index: 1; font-weight: inherit; } .btn::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--blue), var(--green)); transform: translateY(101%); transition: transform 0.38s var(--ease-out); border-radius: inherit; } .btn:hover::before { transform: translateY(0); } .btn:active { transform: scale(0.94); } .btn.line { background: transparent; color: var(--ink); } .btn.line:hover { color: #fff; border-color: transparent; } .btn.sm { padding: 10px 20px; font-size: 0.85rem; } /* ============ nav ============ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250, 249, 244, 0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair); transition: transform 0.4s var(--ease-out); } .nav.hidden { transform: translateY(-100%); } .nav-inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4.5vw, 56px); height: 70px; display: flex; align-items: center; gap: 30px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-weight: 600; font-size: 1.15rem; } .brand svg, .brand-mark { display: block; } .brand-mark { width: 38px; height: 38px; flex: none; } .nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; } .nav-links > a:not(.btn) { position: relative; font-size: 0.9rem; font-weight: 500; color: var(--ink-2); transition: color 0.15s; } .nav-links > a:not(.btn)::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 0.3s var(--ease-out); } .nav-links > a:not(.btn):hover::after, .nav-links > a.active::after { transform: scaleX(1); transform-origin: 0 50%; } .nav-links > a:not(.btn):hover, .nav-links > a:not(.btn).active { color: var(--ink); } .nav-burger { display: none; margin-left: auto; background: none; border: none; cursor: pointer; width: 40px; height: 40px; } .nav-burger span { display: block; width: 20px; height: 1.5px; background: var(--ink); margin: 5px auto; transition: 0.25s; } @media (max-width: 960px) { .nav-links { position: fixed; top: 70px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--hair); flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px clamp(20px, 4.5vw, 56px) 26px; transform: translateY(-130%); /* visibility keeps the closed menu out of the tab order and the accessibility tree; delayed so it stays on screen while sliding shut */ visibility: hidden; transition: transform 0.3s var(--ease-out), visibility 0s linear 0.3s; } .nav-links.open { transform: translateY(0); visibility: visible; transition-delay: 0s; } .nav-links > a { padding: 10px 0; font-size: 1.05rem; } .nav-burger { display: block; } } /* ============ announcement ============ */ .announce { margin-top: 70px; background: var(--ink); color: #e8eef2; font-size: 0.82rem; text-align: center; padding: 9px 20px; } .announce a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 1px; } .announce a:hover { border-color: #fff; } .announce .label { color: #9db4c4; margin-right: 10px; } /* ============ hero ============ */ .hero { position: relative; min-height: calc(100vh - 106px); display: flex; flex-direction: column; justify-content: center; padding: clamp(50px, 7vh, 90px) 0 clamp(48px, 8vh, 88px); border-bottom: 1px solid var(--hair); overflow: hidden; } /* faint graph-paper grid behind the hero */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(16, 29, 41, 0.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(16, 29, 41, 0.045) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 78%); } .aurora { position: absolute; inset: -10%; pointer-events: none; z-index: 0; filter: blur(70px); opacity: 0.55; } .aurora::before, .aurora::after { content: ""; position: absolute; border-radius: 50%; } .aurora::before { width: 46vw; height: 46vw; right: -8vw; top: -6vw; background: radial-gradient(circle, rgba(78, 163, 221, 0.35), transparent 65%); animation: drift1 26s ease-in-out infinite alternate; } .aurora::after { width: 40vw; height: 40vw; left: -10vw; bottom: -14vw; background: radial-gradient(circle, rgba(92, 191, 155, 0.32), transparent 65%); animation: drift2 32s ease-in-out infinite alternate; } @keyframes drift1 { to { transform: translate(-9vw, 7vh) scale(1.15); } } @keyframes drift2 { to { transform: translate(7vw, -8vh) scale(1.1); } } @media (prefers-reduced-motion: reduce) { .aurora::before, .aurora::after { animation: none; } } #hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .hero-inner { position: relative; z-index: 2; } .hero .label { margin-bottom: 30px; display: block; } .hero h1 { font-size: clamp(2.8rem, 6.8vw, 5.6rem); max-width: 16ch; } .hero h1 .accent { font-style: italic; color: var(--blue); } .hero h1 .accent-g { font-style: italic; color: var(--green); } /* top-aligned: bottom-aligning against the tall illustration pushed the primary CTA to ~y960, below the fold on a 1366x768 laptop */ .hero-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; margin-top: 46px; align-items: start; } .hero-sub { color: var(--ink-2); font-size: 1.07rem; max-width: 46ch; } .hero-side { border-left: 1px solid var(--hair-2); padding-left: 28px; font-size: 0.9rem; color: var(--ink-2); } .hero-side .label { display: block; margin-bottom: 10px; } /* isometric neural-net illustration */ .net-viz { width: 100%; max-width: 460px; height: auto; display: block; margin: 0 0 26px; } .net-viz .ln { stroke: #b9c6cf; stroke-width: 1; stroke-dasharray: 5 7; animation: lnflow 1.6s linear infinite; } @keyframes lnflow { to { stroke-dashoffset: -12; } } .net-viz .cube { animation: cubebob 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes cubebob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .net-viz .nl { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--ink-3); text-anchor: middle; } @media (prefers-reduced-motion: reduce) { .net-viz .ln, .net-viz .cube { animation: none; } } .hero-ctas { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 34px; } @media (max-width: 880px) { .hero-cols { grid-template-columns: 1fr; gap: 30px; } .hero-side { border-left: none; border-top: 1px solid var(--hair-2); padding: 20px 0 0; } } /* ============ sections ============ */ .section { padding: clamp(72px, 11vh, 130px) 0; position: relative; } .section.tint { background: var(--paper-2); } .sec-head { display: grid; grid-template-columns: 200px 1fr; gap: 24px; border-top: 1px solid var(--ink); padding-top: 20px; margin-bottom: clamp(40px, 6vh, 70px); } .sec-head .idx { font-family: var(--serif); font-style: italic; color: var(--ink-3); font-size: 0.95rem; } .sec-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); max-width: 24ch; } .sec-head .sub { margin-top: 14px; color: var(--ink-2); max-width: 58ch; } @media (max-width: 720px) { .sec-head { grid-template-columns: 1fr; gap: 8px; } } /* ============ facts ============ */ .facts { display: grid; grid-template-columns: repeat(4, 1fr); } .fact { border-left: 1px solid var(--hair-2); padding: 8px 26px 8px 24px; } .fact:first-child { border-left: none; padding-left: 0; } .fact b { display: flex; align-items: baseline; gap: 9px; font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 3.8vw, 3.4rem); line-height: 1.1; } .fact b span { font-size: inherit; color: inherit; } .fact b em { font-size: 0.78rem; font-family: var(--sans); font-style: normal; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--green); transform: translateY(-4px); } .fact > span { display: block; margin-top: 6px; font-size: 0.85rem; color: var(--ink-2); } @media (max-width: 820px) { .facts { grid-template-columns: 1fr 1fr; gap: 30px 0; } .fact:nth-child(odd) { border-left: none; padding-left: 0; } } /* ============ pinned path ============ */ .path-grid { display: grid; grid-template-columns: 0.9fr 1.4fr; gap: clamp(30px, 5vw, 80px); align-items: start; } .path-sticky { position: sticky; top: 120px; } .path-sticky .big { font-family: var(--serif); font-style: italic; font-size: clamp(6rem, 13vw, 11rem); line-height: 0.9; color: var(--ink); position: relative; height: 1em; overflow: visible; } .path-sticky .big span { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(28px) rotate(2deg); transition: opacity 0.5s ease, transform 0.5s var(--ease-out); } .path-sticky .big span.on { opacity: 1; transform: none; } .path-sticky .names { margin-top: 34px; border-top: 1px solid var(--hair); } .path-sticky .names button { display: flex; justify-content: space-between; width: 100%; padding: 13px 2px; border: 0; border-bottom: 1px solid var(--hair); background: none; font: inherit; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; color: var(--ink-3); cursor: pointer; transition: color 0.3s; } .path-sticky .names button:hover, .path-sticky .names button.on { color: var(--ink); } .path-sticky .names button.on::after { content: "●"; color: var(--green); font-size: 0.5rem; align-self: center; } .path-step { padding: clamp(36px, 6vh, 64px) 0; border-bottom: 1px solid var(--hair); } .path-step:first-child { padding-top: 6px; } .path-step .k { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); } .path-step h3 { font-size: clamp(1.55rem, 2.8vw, 2.2rem); margin: 12px 0 14px; } .path-step p { color: var(--ink-2); max-width: 52ch; } .path-step ul { list-style: none; margin-top: 20px; } .path-step ul li { padding: 10px 0; border-bottom: 1px dotted var(--hair-2); font-size: 0.93rem; color: var(--ink-2); } .path-step ul li:last-child { border-bottom: none; } .path-step ul li::before { content: "—"; margin-right: 12px; color: var(--ink-3); } .path-step .arrow-link { margin-top: 20px; } @media (max-width: 880px) { .path-grid { grid-template-columns: 1fr; gap: 26px; } .path-sticky { position: static; } .path-sticky .big { display: none; } .path-sticky .names { display: none; } /* with JS the levels are tabs: a row of three above the panel */ .js .path-sticky .names { display: flex; margin-top: 0; border-top: 0; border-bottom: 1px solid var(--hair); } .js .path-sticky .names button { flex: 1; justify-content: center; width: auto; padding: 12px 4px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.72rem; letter-spacing: 0.1em; } .js .path-sticky .names button.on { border-bottom-color: var(--green); } .js .path-sticky .names button.on::after { content: none; } } /* ============ project marquee cards ============ */ .works-rail-wrap { overflow: hidden; } .works-rail { display: flex; gap: 18px; overflow-x: auto; padding: 6px 4px 22px; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: grab; } .works-rail::-webkit-scrollbar { display: none; } .works-rail.dragging { cursor: grabbing; scroll-snap-type: none; } .work { flex: 0 0 clamp(260px, 30vw, 360px); scroll-snap-align: start; border: 1px solid var(--hair); background: #fffefb; padding: 26px 26px 24px; display: flex; flex-direction: column; min-height: 240px; transition: transform 0.35s var(--ease-out), box-shadow 0.35s ease, border-color 0.3s; } .work:hover { transform: translateY(-6px); border-color: var(--hair-2); box-shadow: 0 24px 40px -30px rgba(20, 40, 60, 0.35); } .work .no { font-family: var(--serif); font-style: italic; color: var(--ink-3); font-size: 0.9rem; } .work h3 { font-family: var(--serif); font-weight: 550; font-size: 1.18rem; margin: 12px 0 8px; line-height: inherit; letter-spacing: normal; } .work p { font-size: 0.88rem; color: var(--ink-2); flex: 1; } .work a { margin-top: 16px; font-size: 0.82rem; font-weight: 600; color: var(--blue); } .work a:hover { text-decoration: underline; } .rail-nav { display: flex; gap: 10px; } .rail-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hair-2); background: transparent; color: var(--ink); font-size: 1.05rem; cursor: pointer; transition: background 0.25s, color 0.25s, transform 0.15s; } .rail-nav button:hover { background: var(--ink); color: var(--paper); } .rail-nav button:active { transform: scale(0.9); } .rail-nav button:disabled { opacity: 0.35; cursor: default; background: transparent; color: var(--ink); transform: none; } /* ============ split panels & dates ============ */ .split { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hair); background: #fffefb; } .split > div { padding: clamp(30px, 4vw, 50px); position: relative; overflow: hidden; } .split > div + div { border-left: 1px solid var(--hair); } .split h3 { font-size: 1.6rem; margin: 16px 0 12px; } .split p { color: var(--ink-2); font-size: 0.96rem; } .split .foot { margin-top: 28px; } .tag { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 6px 13px; border: 1px solid var(--hair-2); border-radius: 999px; color: var(--ink-2); background: #fff; } .tag.green { color: var(--green); border-color: #b9dccd; } .tag.blue { color: var(--blue); border-color: #bcd8ec; } .tag .pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 7px; } @media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split > div + div { border-left: none; border-top: 1px solid var(--hair); } } .dates { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); background: #fff; } .date-cell { border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 32px 30px 36px; position: relative; overflow: hidden; } .date-cell::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--blue), var(--green)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.5s var(--ease-out); } .date-cell:hover::after { transform: scaleX(1); } .date-cell .label { display: block; margin-bottom: 18px; } .date-cell .d { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); } .date-cell p { font-size: 0.9rem; color: var(--ink-2); margin-top: 10px; } @media (max-width: 820px) { .dates { grid-template-columns: 1fr; } } /* a single key date: one wide cell, date on the left and what it means on the right */ .dates.one { grid-template-columns: 1fr; } @media (min-width: 821px) { .dates.one .date-cell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 48px; align-items: end; } .dates.one .date-cell .label { grid-column: 1; } .dates.one .date-cell .d { grid-column: 1; } .dates.one .date-cell p { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; font-size: 0.95rem; max-width: 46ch; } } /* ============ team ============ */ .team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } @media (max-width: 980px) { .team { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .team { grid-template-columns: 1fr 1fr; gap: 26px 14px; } .member h3 { font-size: 1rem; margin-top: 12px; } .member .role { font-size: 0.62rem; letter-spacing: 0.14em; } .member .org { font-size: 0.8rem; } } .member { perspective: 700px; } .member .photo { aspect-ratio: 0.88; overflow: hidden; border: 1px solid var(--hair); transition: transform 0.4s var(--ease-out); transform-style: preserve-3d; } .member .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: saturate(0.8) contrast(1.02); transition: filter 0.4s ease, transform 0.6s var(--ease-out); } .member:hover .photo img { filter: saturate(1); transform: scale(1.045); } .member h3 { font-family: var(--serif); font-weight: 550; font-size: 1.14rem; margin-top: 18px; line-height: inherit; letter-spacing: normal; } .member .role { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); margin: 5px 0 4px; } .member .org { font-size: 0.86rem; color: var(--ink-2); } .member .arrow-link { margin-top: 12px; font-size: 0.85rem; } /* ============ quote band ============ */ .quote-band { background: var(--ink); color: #eef3f6; } .quote-band .wrap { padding-top: clamp(70px, 11vh, 120px); padding-bottom: clamp(70px, 11vh, 120px); } .quote-band .label { color: #8ba4b6; } .quote-band blockquote { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.25; max-width: 26ch; margin-top: 26px; } .quote-band blockquote em { color: var(--green-2); } .quote-band .who { margin-top: 26px; font-size: 0.88rem; color: #9db4c4; } /* ============ FAQ ============ */ .faq { border-top: 1px solid var(--hair); } .faq-item { border-bottom: 1px solid var(--hair); transition: background 0.3s; } .faq-item:hover { background: rgba(255,255,255,0.6); } .faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 24px 6px; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 18px; } .faq-q .pm { font-family: var(--sans); font-size: 1.25rem; color: var(--ink-3); transition: transform 0.3s var(--ease-out); flex-shrink: 0; } .faq-item.open .pm { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease-out); } .faq-a p { padding: 0 6px 26px; color: var(--ink-2); font-size: 0.95rem; max-width: 68ch; } .faq-a a { color: var(--blue); border-bottom: 1px solid #bcd8ec; } /* ============ endcap ============ */ .endcap { border-top: 1px solid var(--ink); padding: clamp(70px, 12vh, 130px) 0; position: relative; overflow: hidden; } .endcap h2 { font-size: clamp(2.3rem, 5.4vw, 4rem); max-width: 18ch; } .endcap h2 .accent { font-style: italic; color: var(--blue); } .endcap .row { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 38px; } .endcap p.note { margin-top: 22px; font-size: 0.88rem; color: var(--ink-3); } /* ============ footer ============ */ footer { border-top: 1px solid var(--hair-2); background: var(--paper-2); } .footer-inner { max-width: 1240px; margin: 0 auto; padding: 60px clamp(20px, 4.5vw, 56px) 36px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .footer-grid { gap: 28px 20px; } .footer-grid > :first-child { grid-column: 1 / -1; } .footer-inner { padding-top: 44px; } } footer .brand { margin-bottom: 14px; } footer p { font-size: 0.88rem; color: var(--ink-2); max-width: 34ch; } footer h2 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; font-weight: 600; line-height: inherit; } footer ul { list-style: none; } footer ul li { margin-bottom: 8px; } footer ul a { font-size: 0.9rem; color: var(--ink-2); } footer ul a:hover { color: var(--ink); } .footer-bottom { border-top: 1px solid var(--hair-2); margin-top: 46px; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 0.8rem; color: var(--ink-3); } .footer-bottom .soc { display: flex; flex-wrap: wrap; gap: 6px 18px; } .footer-bottom .soc a { color: var(--ink-2); border-bottom: 1px solid transparent; } .footer-bottom .soc a:hover { border-color: var(--ink-2); } /* ============ inner page head ============ */ .page-head { padding: clamp(64px, 10vh, 110px) 0 clamp(34px, 5vh, 54px); position: relative; overflow: hidden; } .page-head .label { display: block; margin-bottom: 26px; } .page-head h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); max-width: 20ch; } .page-head .lede { margin-top: 24px; color: var(--ink-2); font-size: 1.07rem; max-width: 58ch; } /* ============ events list ============ */ .evt { display: grid; grid-template-columns: 170px 320px 1fr; gap: 32px; padding: 40px 0; border-top: 1px solid var(--hair); align-items: start; } .evt:last-of-type { border-bottom: 1px solid var(--hair); } .evt .when { font-size: 0.85rem; color: var(--ink-2); } .evt .when .y { font-family: var(--serif); font-size: 1.8rem; color: var(--ink); display: block; margin-bottom: 6px; } .evt .thumb { border: 1px solid var(--hair); overflow: hidden; aspect-ratio: 16/10; background: #fffefb; } .evt .thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.85); transition: filter 0.4s, transform 0.7s var(--ease-out); } .evt:hover .thumb img { filter: saturate(1); transform: scale(1.04); } .evt h3 { font-size: clamp(1.3rem, 2.3vw, 1.7rem); margin: 10px 0 10px; } .evt p { color: var(--ink-2); font-size: 0.94rem; max-width: 60ch; } .evt .arrow-link { margin-top: 16px; } /* narrower screens: date and thumbnail share the top row, text runs full width below, rather than stacking a full-width image in every row */ @media (max-width: 960px) { .evt { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 16px 20px; padding: 32px 0; } .evt > .when { align-self: center; } .evt > :nth-child(3) { grid-column: 1 / -1; } } @media (max-width: 540px) { .evt { grid-template-columns: minmax(0, 1fr) 46%; } .evt .when .y { font-size: 1.55rem; } } /* ============ event detail ============ */ .event-head { padding: clamp(54px, 8vh, 84px) 0 30px; } .event-head .back { font-size: 0.85rem; color: var(--ink-2); } .event-head .back:hover { color: var(--ink); } .event-head h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin: 24px 0 14px; max-width: 24ch; } .event-head .when { color: var(--ink-2); font-size: 0.95rem; } .event-body { padding: 20px 0 100px; } .event-body .content { max-width: 780px; } .event-body h2 { font-size: 1.7rem; margin: 50px 0 16px; padding-top: 24px; border-top: 1px solid var(--hair); } .event-body h3 { font-family: var(--sans); font-weight: 600; font-size: 1.02rem; margin: 26px 0 8px; } .event-body p { color: var(--ink-2); margin-bottom: 14px; } .event-body ul { margin: 0 0 16px 2px; color: var(--ink-2); list-style: none; } .event-body ul li { padding: 8px 0; border-bottom: 1px dotted var(--hair-2); } .event-body ul li::before { content: "—"; margin-right: 10px; color: var(--ink-3); } .event-body img.figure { border: 1px solid var(--hair); margin: 28px 0 10px; } /* tall posters: capped so one image isn't a whole screen of scrolling */ .event-body img.figure.portrait { max-width: min(100%, 460px); } .event-body .caption { font-size: 0.82rem; color: var(--ink-3); margin-bottom: 26px; font-style: italic; } .project { border-top: 1px solid var(--hair); padding: 22px 0; } .project:last-child { border-bottom: 1px solid var(--hair); } .project h3 { font-family: var(--serif); font-weight: 550; font-size: 1.12rem; margin-bottom: 6px; line-height: inherit; letter-spacing: normal; } .project p { margin-bottom: 8px; font-size: 0.93rem; } .project a { font-size: 0.87rem; color: var(--blue); border-bottom: 1px solid #bcd8ec; word-break: break-all; } /* ============ misc layouts ============ */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: start; } @media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } } .two-col .side { border-left: 1px solid var(--hair-2); padding-left: 28px; } @media (max-width: 860px) { .two-col .side { border-left: none; padding-left: 0; } } .plain-list { list-style: none; } .plain-list li { padding: 13px 0; border-bottom: 1px solid var(--hair); font-size: 0.94rem; color: var(--ink-2); } .plain-list li:first-child { border-top: 1px solid var(--hair); } .plain-list li b { color: var(--ink); font-weight: 600; } .pillars { border-top: 1px solid var(--hair); } .pillar { display: grid; grid-template-columns: 200px 1fr 1.2fr; gap: 24px; padding: 34px 0; border-bottom: 1px solid var(--hair); align-items: baseline; } .pillar .no { font-family: var(--serif); font-style: italic; color: var(--ink-3); } .pillar h3 { font-size: 1.4rem; } .pillar p { color: var(--ink-2); font-size: 0.95rem; } .pillar a { color: var(--blue); border-bottom: 1px solid #bcd8ec; } @media (max-width: 860px) { .pillar { grid-template-columns: 1fr; gap: 8px; } } .partners { display: flex; flex-wrap: wrap; gap: 12px 34px; align-items: baseline; } .partners span { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--ink-2); } .give { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hair); background: #fffefb; } .give > div { padding: clamp(30px, 4vw, 48px); } .give > div + div { border-left: 1px solid var(--hair); } .give h3 { font-size: 1.5rem; margin-bottom: 14px; } .give p { color: var(--ink-2); font-size: 0.95rem; margin-bottom: 12px; } .give .kv { font-family: var(--serif); font-size: 1.2rem; margin: 16px 0 4px; } .give .warn { border-left: 2px solid var(--green); padding: 13px 17px; background: var(--paper-2); font-size: 0.87rem; color: var(--ink-2); margin-top: 18px; } .give ol { margin: 14px 0 0 18px; color: var(--ink-2); font-size: 0.92rem; } .give ol li { margin-bottom: 8px; } @media (max-width: 820px) { .give { grid-template-columns: 1fr; } .give > div + div { border-left: none; border-top: 1px solid var(--hair); } } .contact-rows { border-top: 1px solid var(--hair); } .contact-row { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 24px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--hair); } /* wide screens: rows share one set of columns, so every description starts at the same x however many buttons a row has */ @media (min-width: 821px) { .contact-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; } .contact-row { grid-column: 1 / -1; grid-template-columns: subgrid; } .contact-row > :last-child { justify-self: end; } } .contact-row h3, .contact-row h2 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; line-height: 1.06; letter-spacing: -0.015em; text-transform: none; color: inherit; margin-bottom: 0; } .contact-row p { color: var(--ink-2); font-size: 0.93rem; } @media (max-width: 820px) { .contact-row { grid-template-columns: 1fr; gap: 12px; } } /* parallax helper */ [data-parallax] { will-change: transform; } /* ============================================================ Polish pass — global refinements ============================================================ */ /* soft corner radius on all bordered surfaces */ .split, .dates, .give, .work, .evt .thumb, .member .photo, .event-body img.figure, .faq-item { border-radius: 4px; } .dates { overflow: hidden; } .split { overflow: hidden; } .give { overflow: hidden; } /* anchors land below the fixed nav */ section[id] { scroll-margin-top: 110px; } /* skip link: off-screen until focused by keyboard */ .skip-link { position: fixed; left: 16px; top: -80px; z-index: 600; background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 0 0 4px 4px; font-size: 0.9rem; font-weight: 550; transition: top 0.2s var(--ease-out); } .skip-link:focus { top: 0; } /* visible keyboard focus */ a:focus-visible, button:focus-visible, .path-step:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; } /* announcement bar: hairline gradient base */ .announce { position: relative; } .announce::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--blue), var(--green)); opacity: 0.55; } /* page heads get the hero's graph grid */ .page-head::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(16, 29, 41, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(16, 29, 41, 0.04) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 85% 90% at 40% 20%, black 25%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 85% 90% at 40% 20%, black 25%, transparent 75%); } .page-head .wrap { position: relative; z-index: 1; } /* path: the levels are tabs, one panel at a time. Panels share one grid cell, so the section is as tall as the longest level and switching never moves what's below. Without JS all three stay stacked. */ .js .path-panels { display: grid; } .js .path-step { grid-area: 1 / 1; padding-top: 6px; padding-bottom: 6px; border-bottom: 0; } .js .path-step:not(.active) { visibility: hidden; } .js .path-step.active { animation: path-in 0.45s var(--ease-out); } @keyframes path-in { from { opacity: 0; transform: translate3d(0, 10px, 0); } } @media (prefers-reduced-motion: reduce) { .js .path-step.active { animation: none; } } /* works rail: edge fade so it reads as scrollable */ .works-rail-wrap { position: relative; } .works-rail-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 90px; background: linear-gradient(to right, transparent, var(--paper)); pointer-events: none; } .section.tint .works-rail-wrap::after { background: linear-gradient(to right, transparent, var(--paper-2)); } .work .no { border-bottom: 1px solid var(--hair); display: block; padding-bottom: 10px; } /* quote band ornament + texture */ .quote-band { position: relative; overflow: hidden; } .quote-band::before { /* -0.28em pushed the glyph's ink above the band, leaving two clipped blobs */ content: "\201C"; position: absolute; top: -0.04em; right: 4%; font-family: var(--serif); font-style: italic; font-size: clamp(16rem, 30vw, 26rem); line-height: 1; color: rgba(255, 255, 255, 0.06); pointer-events: none; } .quote-band .wrap { position: relative; } /* endcap: soft glow behind headline */ .endcap::before { content: ""; position: absolute; right: -12%; top: -30%; width: 55vw; height: 55vw; border-radius: 50%; background: radial-gradient(circle, rgba(78, 163, 221, 0.14), rgba(92, 191, 155, 0.1) 45%, transparent 68%); filter: blur(50px); pointer-events: none; } .endcap .wrap { position: relative; } /* footer: link hover nudges, back-to-top */ footer ul a { display: inline-block; transition: transform 0.25s var(--ease-out), color 0.2s; } footer ul a:hover { transform: translateX(4px); } .footer-bottom .top { color: var(--ink-2); border-bottom: 1px solid transparent; } .footer-bottom .top:hover { color: var(--ink); border-color: var(--ink-2); } /* event rows: title underline sweep on hover */ .evt h3 { display: inline-block; background-image: linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-size: 0% 1px; background-position: 0 100%; transition: background-size 0.4s var(--ease-out); padding-bottom: 3px; } .evt:hover h3 { background-size: 100% 1px; } /* tags: tiny lift on hover inside interactive rows */ .tag { transition: border-color 0.25s; } /* team roles in blue for variety against green units elsewhere */ .member .role { letter-spacing: 0.2em; } /* smoother img rendering during tilt */ .member .photo { border-radius: 4px; } .member .photo img { transform-origin: center; } /* nav cta: keep label legible over gradient sweep */ .nav .btn.sm > span { white-space: nowrap; } /* selection color on dark band */ .quote-band ::selection { background: rgba(92, 191, 155, 0.4); } /* horizontal rules inside event bodies breathe more */ .event-body h2 { margin-top: 56px; } /* mobile: hero net-viz slightly smaller, centered */ @media (max-width: 880px) { .net-viz { max-width: 380px; margin: 0 auto 24px; } } /* ============================================================ Coding Happy Hour — signup components + UI pass ============================================================ */ /* three-up now/next, with the open program leading */ .split.three { grid-template-columns: 1.25fr 1fr 1fr; } .split.three > div + div { border-left: 1px solid var(--hair); } .split .feature { background: linear-gradient(170deg, rgba(18,138,98,0.055), transparent 62%); } .split .foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } @media (max-width: 1040px) { .split.three { grid-template-columns: 1fr; } .split.three > div + div { border-left: none; border-top: 1px solid var(--hair); } } /* inline CTA box on the event detail page */ .cta-box { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; border: 1px solid var(--hair); border-radius: 4px; background: linear-gradient(150deg, rgba(18,138,98,0.07), rgba(14,111,184,0.045) 70%, transparent); padding: clamp(24px, 3.4vw, 36px); margin: 6px 0 36px; } .cta-box.end { margin: 46px 0 0; } .cta-box h3, .event-body .cta-box h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; font-size: 1.45rem; margin: 14px 0 8px; } .cta-box.end h3 { margin-top: 0; } .cta-box p { color: var(--ink-2); font-size: 0.95rem; margin: 0; max-width: 46ch; } .cta-box p a { color: var(--blue); border-bottom: 1px solid #bcd8ec; } .cta-box .btn { flex-shrink: 0; } /* open-registration event row gets a green marker */ .evt.open { position: relative; } .evt.open::before { content: ""; position: absolute; left: -18px; top: 40px; bottom: 40px; width: 2px; background: linear-gradient(var(--green), rgba(18,138,98,0)); border-radius: 2px; } @media (max-width: 960px) { .evt.open::before { display: none; } } /* burger morphs to an X when the menu is open */ .nav-links.open ~ .nav-burger span, .nav-burger.is-open span { background: var(--ink); } .nav-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.is-open span:nth-child(2) { opacity: 0; } .nav-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* tighter, more confident hover on work cards */ .work:hover { border-color: var(--green-2); } /* pulse dot also works on light tag over tinted panel */ .tag.green { background: rgba(255,255,255,0.6); } /* announce bar: subtle sheen sweep to draw the eye to the open signup */ .announce a { position: relative; } .announce::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.07) 48%, transparent 66%); transform: translateX(-100%); animation: sheen 7s ease-in-out infinite; } @keyframes sheen { 0%, 62% { transform: translateX(-100%); } 92%, 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .announce::before { animation: none; } } /* event body: first paragraph sets the tone */ .event-body .content > p:first-of-type { font-size: 1.06rem; color: var(--ink-2); } /* headings inside event bodies never orphan a lone rule at the top */ .event-body .cta-box + p { margin-top: 0; } /* event rows: status tag always sits on its own line above the title */ .evt .tag { display: block; width: fit-content; margin-bottom: 12px; } /* ============ nav spacer (event detail pages) ============ */ /* matches the 70px fixed bar exactly */ .nav-spacer { height: 70px; } /* ============ clickable event cards ============ */ /* the whole row is a hit target; the real stays for keyboard + crawlers */ .evt.linked { cursor: pointer; } .evt.linked:hover .thumb { border-color: var(--hair-2); } /* ============ next / prev through the archive ============ */ .evt-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 4px; margin: 60px 0 0; overflow: hidden; } .evt-nav a { display: block; background: #fffefb; padding: 26px 28px; transition: background 0.25s; } .evt-nav a:hover { background: var(--paper-2); } .evt-nav a.next { text-align: right; } .evt-nav .k { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; } .evt-nav .t { font-family: var(--serif); font-size: 1.08rem; color: var(--ink); } .evt-nav a:only-child { grid-column: 1 / -1; } @media (max-width: 640px) { .evt-nav { grid-template-columns: 1fr; } .evt-nav a.next { text-align: left; } } /* ============ print ============ */ /* teachers and school admins print the program pages — make that legible */ @media print { .nav, .nav-spacer, .announce, .aurora, #hero-canvas, .skip-link, .rail-nav, .evt-nav, body::after { display: none !important; } html { scroll-behavior: auto; } body { background: #fff; color: #000; font-size: 11pt; } .js .reveal, .js .reveal-blur, .js .stagger > * { opacity: 1 !important; filter: none !important; transform: none !important; } .path-step { visibility: visible !important; grid-area: auto !important; } .faq-a { max-height: none !important; } .section { padding: 18pt 0 !important; } .works-rail { display: block !important; overflow: visible !important; } a { color: #000; } /* spell out link targets that are not obvious in print */ .event-body a[href^="http"]::after, .content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #444; word-break: break-all; } h1, h2, h3 { page-break-after: avoid; } .evt, .project, .member, .faq-item { page-break-inside: avoid; } footer { border-top: 1pt solid #999; } } /* ============ team sub-groups ============ */ /* keeps coaches/mentors and TAs/tech visually distinct without a new component */ .team-group + .team-group { margin-top: clamp(44px, 6vh, 62px); } /* wide screens: one row of five, the TA group keeping its own label over the fifth column. Five equal tracks with the same 28px gap as .team, so the photos all come out the same size */ @media (min-width: 1100px) { .team-groups { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 28px; align-items: start; } .team-groups > .team-group:first-child { grid-column: span 4; } .team-groups > .team-group + .team-group { margin-top: 0; } .team-groups > .team-group:last-child .team { grid-template-columns: 1fr; } } .team-group > .label { display: block; margin-bottom: 20px; } /* ============ deadlines that have passed ============ */ /* main.js compares each