/* ========================================================================== Warren Y. Soper Charitable Trust — design system Rebuild of the Squarespace concept by Shannon Alexandra. Edit the tokens in :root to re-skin the whole site. ========================================================================== */ :root { /* Brand palette (sampled from the original concept) */ --green: #424E23; /* primary background, deep olive */ --green-deep: #39431d; /* slightly darker olive for contrast bands */ --green-soft: #58633a; /* lighter olive for form fields / borders */ --cream: #FFF6ED; /* primary text + UI lines, warm off-white */ --cream-dim: rgba(255,246,237,0.62); /* muted body text */ --gold: #B48C2D; /* amber accent: sector rings + glows */ /* Type */ --serif: "Cormorant Garamond", "Orpheus Pro", Georgia, "Times New Roman", serif; --sans: "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif; /* Layout */ --maxw: 1360px; --gutter: clamp(1.25rem, 4vw, 4rem); --header-h: 96px; } /* ---------- Reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--green); } body { margin: 0; background: transparent; /* green now lives on so the spotlight layer can sit behind content */ color: var(--cream); font-family: var(--sans); font-size: 18px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(3.5rem, 9vw, 8rem); } .rule { height: 1px; background: rgba(255,246,237,0.55); border: 0; margin: 0; } .stack > * + * { margin-top: 1.25rem; } /* ---------- Type ---------- */ .display { font-family: var(--serif); font-weight: 500; line-height: 0.92; letter-spacing: -0.03em; } .h-section { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -0.02em; margin: 0; } .lead { font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.45; } .body-copy { font-size: clamp(1.02rem, 1.2vw, 1.18rem); line-height: 1.6; } .eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.78rem; } /* ========================================================================== Header ========================================================================== */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem var(--gutter); transition: background-color .4s ease, padding .4s ease, box-shadow .4s ease; } .site-header.scrolled { background: rgba(57,67,29,0.92); backdrop-filter: blur(8px); padding-block: 1rem; box-shadow: 0 1px 0 rgba(255,246,237,0.12); } .brand { font-family: var(--sans); font-size: 1.06rem; letter-spacing: -0.01em; white-space: nowrap; } .nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); } .nav a { font-size: 1.12rem; } /* sliding underline for nav + inline links */ .link-underline { position: relative; padding-bottom: 2px; } .link-underline::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.19,1,.22,1); } .link-underline:hover::after, .link-underline.is-active::after { transform: scaleX(1); } /* ---------- Pill / oval buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; font-family: var(--sans); font-size: 1.06rem; line-height: 1; padding: 0.85em 1.9em; border: 1px solid var(--cream); border-radius: 999px; color: var(--cream); background: transparent; cursor: pointer; transition: background-color .35s ease, color .35s ease, transform .35s ease; } .btn:hover { background: var(--cream); color: var(--green); } .btn .arrow { transition: transform .35s ease; } .btn:hover .arrow { transform: translateX(4px); } /* ---------- Mobile nav ---------- */ .nav-toggle { display: none; background: none; border: 0; color: var(--cream); cursor: pointer; padding: .4rem; } .nav-toggle svg { display: block; } @media (max-width: 880px) { .nav-toggle { display: inline-flex; } .nav { position: fixed; inset: 0; z-index: 55; flex-direction: column; justify-content: center; gap: 2rem; background: var(--green-deep); transform: translateX(100%); transition: transform .45s cubic-bezier(.19,1,.22,1); } .nav.open { transform: translateX(0); } .nav a { font-size: 1.6rem; font-family: var(--serif); } body.nav-open { overflow: hidden; } } /* ========================================================================== Hero (home) ========================================================================== */ .hero { min-height: 100vh; display: flex; align-items: center; padding-top: var(--header-h); } .hero-title { position: relative; } .hero-title .line { display: block; font-size: clamp(4rem, 17vw, 16rem); } .hero-sub { font-family: var(--sans); font-weight: 400; font-size: clamp(1.1rem, 2vw, 1.9rem); letter-spacing: .01em; margin-left: .4em; } /* ========================================================================== Hero spotlight — animated gold radial that eases toward the cursor and gently breathes. Reproduces the original's Squarespace "Background Art" generative gradient (radial, gold #B48C2D core → green field, follow-cursor + morph). Sits behind all content (green lives on ); JS feeds --spot-x/--spot-y. ========================================================================== */ .spotlight { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; --spot-x: 50%; --spot-y: 42%; /* default focus before JS / on touch */ background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(180,140,45,0.50) 0%, rgba(180,140,45,0.30) 13%, rgba(180,140,45,0.11) 29%, rgba(180,140,45,0) 47%); transform-origin: 50% 42%; will-change: transform, opacity; animation: spot-breathe 14s ease-in-out infinite; } @keyframes spot-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.1); opacity: 1; } } /* ========================================================================== Two-column content (About Warren / About What We Do) ========================================================================== */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; } .split.text-right { grid-template-columns: 1fr 1.05fr; } @media (max-width: 820px) { .split, .split.text-right { grid-template-columns: 1fr; } } /* The portrait sits directly on the animated spotlight (below) — same as the original, where the photo rests on the generative gold gradient. No static glow. */ .portrait-glow { position: relative; } .portrait-glow img { position: relative; z-index: 1; mix-blend-mode: lighten; } /* ========================================================================== "What We Do" — two stacked items ========================================================================== */ .dolist { display: grid; gap: 0; } .dolist .item { display: grid; grid-template-columns: 320px 1fr; gap: clamp(1.5rem, 4vw, 4rem); padding-block: clamp(2rem, 4vw, 3.25rem); border-top: 1px solid rgba(255,246,237,0.28); } .dolist .item:last-child { border-bottom: 1px solid rgba(255,246,237,0.28); } .dolist .item h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.8rem); margin: 0; letter-spacing: -0.02em; } @media (max-width: 720px) { .dolist .item { grid-template-columns: 1fr; gap: .75rem; } } /* ========================================================================== Sectors We Serve — glowing circles ========================================================================== */ .sectors { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); } @media (max-width: 760px) { .sectors { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } } .sector { aspect-ratio: 1 / 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold); box-shadow: 0 0 38px rgba(180,140,45,0.45), inset 0 0 38px rgba(180,140,45,0.22); transition: transform .5s cubic-bezier(.19,1,.22,1), box-shadow .5s ease; } .sector:hover { transform: scale(1.03); box-shadow: 0 0 60px rgba(180,140,45,0.7), inset 0 0 50px rgba(180,140,45,0.3); } .sector span { font-family: var(--sans); font-size: clamp(1.4rem, 2.5vw, 2.2rem); letter-spacing: .01em; } /* ========================================================================== Apply Now band — marquee + spinning asterisk ========================================================================== */ .applyband { position: relative; } .marquee { overflow: hidden; width: 100%; padding-block: clamp(.6rem, 2vw, 1.2rem); } .marquee__track { display: inline-flex; align-items: center; gap: 1.2rem; white-space: nowrap; will-change: transform; animation: marquee 26s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__track .m-item { font-family: var(--serif); font-weight: 500; font-size: clamp(3rem, 9vw, 8rem); line-height: 1; letter-spacing: -0.02em; } .asterisk { display: inline-block; animation: spin 9s linear infinite; } .asterisk--lg { font-size: clamp(2.2rem, 6vw, 5rem); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes spin { to { transform: rotate(360deg); } } /* Big centred Apply Now block (home/about/etc.) */ .apply-hero { text-align: center; display: grid; gap: 1.5rem; justify-items: center; } .apply-hero .display { font-size: clamp(3rem, 10vw, 9rem); } /* ========================================================================== Duotone photography (green-tinted, matching original) ========================================================================== */ .duotone { position: relative; overflow: hidden; } .duotone img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.95); transition: transform 1.2s cubic-bezier(.19,1,.22,1); } .duotone::after { content: ""; position: absolute; inset: 0; background: var(--green); mix-blend-mode: color; opacity: .82; pointer-events: none; } .duotone::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(57,67,29,.25), rgba(57,67,29,.45)); pointer-events: none; } .duotone:hover img { transform: scale(1.04); } .band-image { position: relative; min-height: clamp(360px, 48vw, 560px); display: grid; place-items: center; } .band-image .btn { position: relative; z-index: 3; } /* ========================================================================== Team grid (About) ========================================================================== */ .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); } @media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } } .team-card .photo { aspect-ratio: 4 / 5; border-radius: 2px; } .team-card .name { font-family: var(--serif); font-size: 1.5rem; margin: 1rem 0 .15rem; display: inline-flex; align-items: center; gap: .4em; } .team-card .title { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cream-dim); } /* ========================================================================== Contributions list ========================================================================== */ .contrib { border-top: 1px solid rgba(255,246,237,0.28); padding-block: clamp(2rem, 4vw, 3rem); } .contrib:last-of-type { border-bottom: 1px solid rgba(255,246,237,0.28); } .contrib h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 3vw, 2.6rem); margin: 0 0 .35rem; letter-spacing: -0.02em; } .contrib .amount { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .contrib .body-copy + .body-copy { margin-top: 1rem; } /* ========================================================================== FAQ accordion ========================================================================== */ .faq { border-top: 1px solid rgba(255,246,237,0.28); } .faq:last-of-type { border-bottom: 1px solid rgba(255,246,237,0.28); } .faq__q { width: 100%; text-align: left; background: none; border: 0; color: var(--cream); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: clamp(1.1rem, 2.2vw, 1.6rem) 0; font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: -0.01em; } .faq__icon { flex: none; width: 1.1em; height: 1.1em; position: relative; transition: transform .4s ease; } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: var(--cream); } .faq__icon::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); } .faq__icon::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); transition: transform .4s ease; } .faq.open .faq__icon::after { transform: translateX(-50%) scaleY(0); } .faq__a { overflow: hidden; max-height: 0; transition: max-height .5s ease; } .faq__a .inner { padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem); max-width: 60ch; color: var(--cream-dim); } /* ========================================================================== Forms (Contact) ========================================================================== */ .form { display: grid; gap: 1.25rem; max-width: 640px; } .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } @media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } } .field { display: grid; gap: .4rem; } .field label { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-dim); } .field input, .field textarea { background: rgba(255,246,237,0.08); border: 1px solid rgba(255,246,237,0.22); border-radius: 4px; color: var(--cream); font-family: var(--sans); font-size: 1rem; padding: .85rem 1rem; width: 100%; transition: border-color .3s ease, background-color .3s ease; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(255,246,237,0.12); } .field textarea { min-height: 150px; resize: vertical; } /* ========================================================================== Footer ========================================================================== */ .site-footer { position: relative; background: var(--green); padding-block: clamp(3rem, 6vw, 5rem); text-align: center; } .footer-nav { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 3rem); justify-content: center; margin-bottom: 2.5rem; } .footer-nav a { text-transform: uppercase; letter-spacing: .12em; font-size: .92rem; } .footer-fine { color: var(--cream-dim); font-size: .8rem; letter-spacing: .02em; } .footer-fine a { text-decoration: underline; text-underline-offset: 3px; } /* ========================================================================== Scroll reveal ========================================================================== */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s cubic-bezier(.19,1,.22,1), transform 1s cubic-bezier(.19,1,.22,1); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } .marquee__track, .asterisk, .spotlight { animation: none !important; } html { scroll-behavior: auto; } }