/* WordPress adds margins between blocks; cleared here, first, so every component rule below can set its own */ :root :where(.wp-block-post-content, .wp-block-post-content .wp-block-group, .foot .wp-block-group) > * { margin-block: 0; } :root :where(.wp-block-post-content .wp-block-buttons) { margin-block: 0; } :root :where(.wp-block-image) { margin: 0; } /* headings as in site-v2: they inherit the body's line-height; components below set their own sizes, spacing and tracking */ :root :where(h1, h2, h3, h4, h5, h6) { font-family: var(--sans); font-weight: 600; margin: 0; color: var(--black); line-height: inherit; letter-spacing: normal; } /* ========================================================================== Zanzalakht · theme styles (generated from site-v2/v2.css by site-v2/_src/to_theme_css.py) Built only from the brand kit (zanzalakht-colors.css): - paper + ink everywhere; one lead colour per section - green and orange meet only on a horizon (the header, the footer strip) - three shapes: the horizon line, the dot, the vertical stroke ========================================================================== */ :root { --paper: var(--z-paper); --ink: var(--z-ink); --black: var(--z-black); --orange: var(--z-orange); --green: var(--z-green); --dot: var(--z-cream); --menu: #FBDEA5; /* the menu bar: the colour of the logo's own background */ --page: #FDEFD4; /* the page background */ --muted: #655D57; /* stone-700: 6.1:1 on paper */ --green-text: var(--z-green-800); --rule: var(--z-sand-700); --warm: var(--z-sand-50); --sans: Kodchasan, "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; /* the logo's own font, now the site font (2026-11-06) */ --arabic: "IBM Plex Sans Arabic", Tahoma, sans-serif; --wordmark: Kodchasan, var(--sans); --s: 1; /* desktop step scale, set from 992px up (see @scale) */ --wide: 1320px; --gutter: clamp(12px, 2vw, 32px); --section: clamp(64px, 9vw, 128px); /* header heights; the horizon sits at --hz-sky of them (where the logo's own horizon falls) */ --hz-sky: 58.125%; --hz-full: 104px; --hz-small: 72px; --hz-h: var(--hz-full); --ease: cubic-bezier(.22, .61, .36, 1); } @media (max-width: 991px) { :root { --hz-full: 76px; --hz-small: 62px; } } *, *::before, *::after { box-sizing: border-box; } html { scroll-padding-top: var(--hz-small); } body { margin: 0; background: var(--page); color: var(--ink); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3 { margin: 0; color: var(--black); font-weight: 600; text-wrap: balance; } p { margin: 0; } a { color: inherit; } :focus-visible { outline: 3px solid var(--black); outline-offset: 3px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .wrap { width: 100%; max-width: calc(var(--wide) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- small parts ---------- */ /* the title mark is the logo's ز: its stroke and its dot, copied from the logo's outlines (same shape and proportions) */ .dot { display: inline-block; width: 5px; height: 38px; margin-block: -9px -9px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='535.36 174.32 27.36 213.72'%3E%3Ccircle cx='549.04' cy='188' r='13.68' fill='%23FF6525'/%3E%3Cpath d='M555.8,232.86c.16-3.6-12.63-9.71-12.75-6.92-2.26,51.71,2.13,103.46,0,155.18-.15,3.6,12.64,9.7,12.75,6.92,2.13-51.72-2.26-103.47,0-155.18Z' fill='%23000'/%3E%3C/svg%3E") center top / 100% 100% no-repeat; } .dot--hollow { width: 10px; height: 10px; margin: 0; transform: none; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--orange); } .eyebrow, .label, .tag, .stage { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .label { color: var(--green-text); } .muted { color: var(--muted); font-size: 15px; } .btn, .wp-block-button__link, .form .wpcf7-submit { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; position: relative; border: 2px solid var(--black); border-radius: 2px; background: transparent; color: var(--black); font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color .2s, color .2s, box-shadow .2s, padding .25s; } .btn:hover, .wp-block-button__link:hover, .form .wpcf7-submit:hover { background: var(--black); color: var(--page); box-shadow: 4px 4px 0 var(--orange); padding-inline-end: 70px; } /* room for the dots */ .link, .link-p a { font-weight: 600; font-size: 15px; color: var(--black); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } .link:hover, .link-p a:hover { text-decoration-thickness: 2px; } /* colour touches: orange and green as lines and hover effects, never as fills behind text */ /* three dots float up inside a button on hover (it makes room for them), as the footer's dots once did */ .btn::before, .wp-block-button__link::before { content: ""; position: absolute; inset-inline-end: 12px; top: 50%; width: 44px; height: 34px; margin-top: -17px; pointer-events: none; background-image: radial-gradient(circle closest-side, var(--orange) 96%, transparent 100%), radial-gradient(circle closest-side, var(--green) 96%, transparent 100%), radial-gradient(circle closest-side, var(--orange) 96%, transparent 100%); background-size: 13px 13px, 17px 17px, 10px 10px; background-repeat: no-repeat; background-position: 10% calc(100% - 0.0px), 50% calc(100% - 13.1px), 90% calc(100% - 4.1px); opacity: 0; transition: opacity .25s; } .btn:hover::before, .wp-block-button__link:hover::before { opacity: 1; animation: btn-dots 5.5s linear infinite; } @keyframes btn-dots { 0% { background-position: 10% calc(100% - 0.00px), 50% calc(100% - 13.10px), 90% calc(100% - 4.09px); } 2.5% { background-position: 10% calc(100% - 0.09px), 50% calc(100% - 13.56px), 90% calc(100% - 3.13px); } 5% { background-position: 10% calc(100% - 0.34px), 50% calc(100% - 13.86px), 90% calc(100% - 2.27px); } 7.5% { background-position: 10% calc(100% - 0.76px), 50% calc(100% - 13.99px), 90% calc(100% - 1.52px); } 10% { background-position: 10% calc(100% - 1.34px), 50% calc(100% - 13.95px), 90% calc(100% - 0.90px); } 12.5% { background-position: 10% calc(100% - 2.05px), 50% calc(100% - 13.74px), 90% calc(100% - 0.44px); } 15% { background-position: 10% calc(100% - 2.89px), 50% calc(100% - 13.37px), 90% calc(100% - 0.14px); } 17.5% { background-position: 10% calc(100% - 3.82px), 50% calc(100% - 12.83px), 90% calc(100% - 0.01px); } 20% { background-position: 10% calc(100% - 4.84px), 50% calc(100% - 12.16px), 90% calc(100% - 0.05px); } 22.5% { background-position: 10% calc(100% - 5.90px), 50% calc(100% - 11.35px), 90% calc(100% - 0.26px); } 25% { background-position: 10% calc(100% - 7.00px), 50% calc(100% - 10.44px), 90% calc(100% - 0.63px); } 27.5% { background-position: 10% calc(100% - 8.10px), 50% calc(100% - 9.45px), 90% calc(100% - 1.17px); } 30% { background-position: 10% calc(100% - 9.16px), 50% calc(100% - 8.39px), 90% calc(100% - 1.84px); } 32.5% { background-position: 10% calc(100% - 10.18px), 50% calc(100% - 7.30px), 90% calc(100% - 2.65px); } 35% { background-position: 10% calc(100% - 11.11px), 50% calc(100% - 6.20px), 90% calc(100% - 3.56px); } 37.5% { background-position: 10% calc(100% - 11.95px), 50% calc(100% - 5.12px), 90% calc(100% - 4.55px); } 40% { background-position: 10% calc(100% - 12.66px), 50% calc(100% - 4.09px), 90% calc(100% - 5.61px); } 42.5% { background-position: 10% calc(100% - 13.24px), 50% calc(100% - 3.13px), 90% calc(100% - 6.70px); } 45% { background-position: 10% calc(100% - 13.66px), 50% calc(100% - 2.27px), 90% calc(100% - 7.80px); } 47.5% { background-position: 10% calc(100% - 13.91px), 50% calc(100% - 1.52px), 90% calc(100% - 8.88px); } 50% { background-position: 10% calc(100% - 14.00px), 50% calc(100% - 0.90px), 90% calc(100% - 9.91px); } 52.5% { background-position: 10% calc(100% - 13.91px), 50% calc(100% - 0.44px), 90% calc(100% - 10.87px); } 55% { background-position: 10% calc(100% - 13.66px), 50% calc(100% - 0.14px), 90% calc(100% - 11.73px); } 57.5% { background-position: 10% calc(100% - 13.24px), 50% calc(100% - 0.01px), 90% calc(100% - 12.48px); } 60% { background-position: 10% calc(100% - 12.66px), 50% calc(100% - 0.05px), 90% calc(100% - 13.10px); } 62.5% { background-position: 10% calc(100% - 11.95px), 50% calc(100% - 0.26px), 90% calc(100% - 13.56px); } 65% { background-position: 10% calc(100% - 11.11px), 50% calc(100% - 0.63px), 90% calc(100% - 13.86px); } 67.5% { background-position: 10% calc(100% - 10.18px), 50% calc(100% - 1.17px), 90% calc(100% - 13.99px); } 70% { background-position: 10% calc(100% - 9.16px), 50% calc(100% - 1.84px), 90% calc(100% - 13.95px); } 72.5% { background-position: 10% calc(100% - 8.10px), 50% calc(100% - 2.65px), 90% calc(100% - 13.74px); } 75% { background-position: 10% calc(100% - 7.00px), 50% calc(100% - 3.56px), 90% calc(100% - 13.37px); } 77.5% { background-position: 10% calc(100% - 5.90px), 50% calc(100% - 4.55px), 90% calc(100% - 12.83px); } 80% { background-position: 10% calc(100% - 4.84px), 50% calc(100% - 5.61px), 90% calc(100% - 12.16px); } 82.5% { background-position: 10% calc(100% - 3.82px), 50% calc(100% - 6.70px), 90% calc(100% - 11.35px); } 85% { background-position: 10% calc(100% - 2.89px), 50% calc(100% - 7.80px), 90% calc(100% - 10.44px); } 87.5% { background-position: 10% calc(100% - 2.05px), 50% calc(100% - 8.88px), 90% calc(100% - 9.45px); } 90% { background-position: 10% calc(100% - 1.34px), 50% calc(100% - 9.91px), 90% calc(100% - 8.39px); } 92.5% { background-position: 10% calc(100% - 0.76px), 50% calc(100% - 10.87px), 90% calc(100% - 7.30px); } 95% { background-position: 10% calc(100% - 0.34px), 50% calc(100% - 11.73px), 90% calc(100% - 6.20px); } 97.5% { background-position: 10% calc(100% - 0.09px), 50% calc(100% - 12.48px), 90% calc(100% - 5.12px); } 100% { background-position: 10% calc(100% - 0.00px), 50% calc(100% - 13.10px), 90% calc(100% - 4.09px); } } /* selected text: green on the light page, orange on the dark bands (ink text on both) */ ::selection { background: var(--green); color: var(--ink); } .hero ::selection, .founder ::selection, .field:has(.give) ::selection, .horizon__sky:has(.now-photo) ::selection { background: var(--orange); color: var(--ink); } .areas > *, .articles article, .project-row, .give > * { transition: border-color .2s, box-shadow .2s; } .areas > *:hover, .project-row:hover { border-top-color: var(--green); box-shadow: 0 -2px 0 var(--green); } .articles article:hover, .give > *:hover { border-top-color: var(--orange); box-shadow: 0 -2px 0 var(--orange); } /* vertical strokes drawn as the earlier site's pen stroke: thin, tilted 2.5 degrees, a 2px corner radius */ .story .quote-group, .founder .quote { position: relative; padding-inline-start: 30px; } .story .quote-group::before, .founder .quote::before { content: ""; position: absolute; inset-inline-start: 0; top: 4px; bottom: 4px; width: 3px; background: var(--green); border-radius: 2px; transform: rotate(.6deg); } /* Why the zanzalakht (home): the seasonal tree stays beside the words while they scroll (drawn by v2.js) */ .seasons { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .seasons__tree { position: sticky; top: calc(var(--hz-small) + 24px); height: calc(100vh - var(--hz-small) - 24px); margin-top: 24px; display: flex; align-items: center; justify-content: center; } /* stays centred in the window while the menu stays clear */ .seasons__tree svg { display: block; width: auto; height: min(68vh, 560px); max-width: 100%; overflow: visible; } /* a faint wash of the season's sky reaches from the tree across the words, so the two sides read as one scene; it moves with the sticky tree and turns with the season (v2.js sets --season-sky) */ @property --season-sky { syntax: ""; inherits: true; initial-value: transparent; } .seasons { position: relative; isolation: isolate; } .seasons__text { position: relative; z-index: 1; } /* above the wash */ .seasons__tree { --season-sky: transparent; transition: --season-sky .9s ease; } .seasons__tree::before { content: ""; position: absolute; z-index: -1; inset-inline-start: -12%; top: 4%; width: 240%; height: 92%; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 42% 50%, color-mix(in srgb, var(--season-sky) 32%, transparent) 0%, color-mix(in srgb, var(--season-sky) 18%, transparent) 55%, transparent 100%); } .seasons__tree stop { transition: stop-color .9s ease; } /* the sky and ground turn with the season */ .seasons__sun { fill: #fff; transition: opacity .9s ease; } .seasons__branch, .seasons__root, .seasons__rachis { fill: none; stroke-linecap: round; } .seasons__branch { stroke: var(--black); } .seasons__root { stroke: var(--ink); } .seasons__rachis { stroke-width: .9; transition: stroke .8s ease; } .seasons__blade, .seasons__berry { transition: fill .8s ease; } .seasons__berry { transform-box: fill-box; transform-origin: center; } .seasons__fall { position: absolute; overflow: hidden; border-radius: 50%; pointer-events: none; } /* laid over the oval by v2.js */ .seasons__bit { position: absolute; top: 0; width: 9px; height: 6px; border-radius: 60% 0; opacity: .8; } .seasons__bit--petal { width: 7px; height: 7px; border-radius: 50% 50% 50% 0; } .seasons__text { display: flex; flex-direction: column; } .seasons__ch { min-height: 80vh; justify-content: center; } .seasons__ch:first-child { min-height: 70vh; } @media (max-width: 860px) { .seasons { grid-template-columns: minmax(0, 1fr); gap: 0; } /* on phones the tree sits at the top while the words pass under it; the header, when it comes back, lies over its empty top */ .seasons__tree { top: 0; z-index: 2; height: calc(36vh + var(--hz-small) + 28px); margin-top: 0; padding: calc(var(--hz-small) + 16px) 0 12px; background: var(--page); } .seasons__tree svg { height: min(32vh, 420px); } .seasons__tree::before { display: none; } .seasons__ch { min-height: 60vh; } } /* ========================================================================== Hero ========================================================================== */ .hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; padding-block: clamp(56px, 8vw, 112px) 0; position: relative; isolation: isolate; } /* the dark ink behind the whole hero, edge to edge */ .hero::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; background: var(--ink); } body { overflow-x: clip; } .hero__text { display: flex; flex-direction: column; gap: 24px; padding-bottom: clamp(24px, 4vw, 64px); } .hero h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.06; letter-spacing: -.02em; max-width: 13ch; } .lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; max-width: 56ch; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; } /* the vertical stroke: runs down the photo's edge and on into the next section */ .hero__media { position: relative; margin: 0; } .hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .hero__media::before { content: ""; position: absolute; inset-inline-start: -22px; top: 22%; bottom: -96px; width: 4px; background: var(--green); border-radius: 2px; transform: rotate(.6deg); /* barely tilted: only a feeling of the pen */ } @media (max-width: 860px) { .hero { grid-template-columns: minmax(0, 1fr); padding-top: 0; } .hero__media { order: -1; margin-inline: calc(var(--gutter) * -1); } .hero__media img { aspect-ratio: 4 / 3; } .hero__media::before { inset-inline-start: var(--gutter); top: auto; bottom: -48px; height: 120px; } .hero__text { padding-top: 32px; } } /* ========================================================================== Sections on paper ========================================================================== */ .block { padding-block: var(--section); display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); } .block__head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; } .block__head h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -.015em; } .block__intro { color: var(--muted); max-width: 60ch; } /* six areas: a ruled grid, a dot on each */ .areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; } .areas > * { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 6px; padding-block: 28px; border-top: 1px solid var(--rule); } .areas > .has-dot::before { margin-block: -14px -14px; } .areas h3 { font-size: 20px; line-height: 1.4; } .areas p { grid-column: 2; color: var(--muted); font-size: 16px; } .areas--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 860px) { .areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .areas { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Beit Hayat: the horizon is a solid green line; the photographs stand across it ========================================================================== */ .horizon { --ph: clamp(220px, 26vw, 340px); } .horizon__sky { position: relative; background: var(--menu); border-bottom: 6px solid transparent; color: var(--black); padding-block: var(--section) calc(var(--ph) * .625 + 48px); } .horizon__text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(32px, 6vw, 96px); align-items: end; } .horizon__text .label { grid-column: 1 / -1; color: var(--black); } .horizon h2, .horizon__title { grid-column: 1 / -1; font-size: clamp(48px, 7vw, 96px); line-height: 1; letter-spacing: -.025em; } .horizon__lede { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; max-width: 34ch; } .facts { display: grid; gap: 0; margin: 0; } .facts div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-top: 1px solid rgb(0 0 0 / .3); font-size: 15px; } .facts dt { font-weight: 600; } .facts dd { margin: 0; text-align: end; } .horizon__sky::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--green); } .horizon__photos { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); margin-top: calc(var(--ph) * -.625); } .horizon__photos figure { margin: 0; } .horizon__photos img { width: 100%; height: var(--ph); object-fit: cover; } .horizon__more { padding-top: 28px; } @media (max-width: 860px) { .horizon__text { grid-template-columns: minmax(0, 1fr); } .horizon__photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .horizon__photos figure:last-child { display: none; } } /* ---------- projects ---------- */ .projects { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); } .projects > * { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 24px; border-top: 2px solid var(--black); } .projects h3 { font-size: 28px; line-height: 1.2; } .projects p { max-width: 48ch; } .stage { color: var(--muted); } @media (max-width: 700px) { .projects { grid-template-columns: minmax(0, 1fr); } } /* ---------- founder ---------- */ .founder { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-block: var(--section); border-top: 1px solid var(--rule); } .founder__photo { margin: 0; } .founder__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--warm); } .founder__text { display: flex; flex-direction: column; gap: 20px; max-width: 62ch; } .founder .quote { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.25; font-weight: 500; color: var(--black); letter-spacing: -.01em; } /* a plain line, not flex: the title animation wraps each word in a span, and flex would turn every word gap into the 12px gap */ .founder h2 { font-size: 20px; line-height: 1.4; padding-top: 8px; } .founder h2 > span:not(.w) { display: inline-block; margin-inline-start: 7px; font-size: 15px; font-weight: 400; color: var(--muted); } @media (max-width: 760px) { .founder { grid-template-columns: minmax(0, 1fr); } .founder__photo { max-width: 360px; } } /* ---------- articles ---------- */ .articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); } .articles article { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--rule); } .articles .tag { color: var(--muted); } .articles h3 { font-size: 22px; line-height: 1.3; } .articles h3 a { text-decoration: none; } .articles h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } .articles p:last-child { color: var(--muted); font-size: 16px; } @media (max-width: 860px) { .articles { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Contact: the page's one orange field (black text on it: 7:1) ========================================================================== */ .contact { background: var(--orange); color: var(--black); } .contact__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; padding-block: clamp(56px, 7vw, 96px); } .contact .label { color: var(--black); } .contact h2 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -.02em; margin-block: 12px 16px; } .contact p { max-width: 52ch; } .contact__details { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; font-size: 16px; } @media (max-width: 760px) { .contact__inner { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Footer: paper, then the horizon strip (orange over green, 62.5 / 37.5) ========================================================================== */ .foot { background: var(--menu); } /* the footer takes the menu bar's cream, so the page is framed top and bottom */ .foot__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: 32px; padding-block: 64px 48px; font-size: 15px; color: var(--muted); } .foot .ar { width: fit-content; font-family: var(--arabic); font-size: 17px; color: var(--black); margin-bottom: 12px; } .foot__brand p:last-of-type { max-width: 40ch; } /* the client's colour square heads the footer. .foot__logo lands on the in the static preview, but WordPress's image block puts the class on the wrapping
and leaves the at its intrinsic size, so both are sized */ .foot__logo { display: block; width: 132px; height: 132px; margin: 0 0 20px; } .foot__logo, .foot__logo img { border-radius: 12px; } .foot__logo img { width: 100%; height: 100%; display: block; object-fit: cover; } .foot__links { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .foot__links a { color: var(--ink); text-decoration: none; } .foot__links a:hover { text-decoration: underline; text-underline-offset: 4px; } .foot__horizon { display: grid; grid-template-rows: 15px 9px; } .foot__horizon span:first-child { background: var(--orange); } .foot__horizon span:last-child { background: var(--green); } @media (max-width: 760px) { .foot__inner { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== "Support us": a green button that floats at the bottom of the screen, on the reading side's far end ========================================================================== */ .support-float { position: fixed; z-index: 250; bottom: 24px; inset-inline-end: 24px; display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; background: var(--green); color: var(--black); border-radius: 2px; box-shadow: 4px 4px 0 var(--black); font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color .2s, color .2s, box-shadow .2s, padding .25s, transform .35s var(--ease), opacity .35s; } .support-float::before { content: ""; position: absolute; inset-inline-end: 12px; top: 50%; width: 44px; height: 34px; margin-top: -17px; pointer-events: none; background-image: radial-gradient(circle closest-side, var(--orange) 96%, transparent 100%), radial-gradient(circle closest-side, var(--green) 96%, transparent 100%), radial-gradient(circle closest-side, var(--orange) 96%, transparent 100%); background-size: 13px 13px, 17px 17px, 10px 10px; background-repeat: no-repeat; background-position: 10% calc(100% - 0.0px), 50% calc(100% - 13.1px), 90% calc(100% - 4.1px); opacity: 0; transition: opacity .25s; } .support-float:hover { background: var(--black); color: var(--page); box-shadow: 4px 4px 0 var(--orange); padding-inline-end: 70px; } .support-float:hover::before { opacity: 1; animation: btn-dots 5.5s linear infinite; } .support-float:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; } .support-float.is-away { opacity: 0; transform: translateY(24px); pointer-events: none; } .support-float[aria-current="page"], .hz.is-open ~ .support-float, body:has(.hz.is-open) .support-float { display: none; } /* not on the Support page itself, nor over the open menu */ @media (max-width: 600px) { .support-float { bottom: 16px; inset-inline-end: 16px; min-height: 48px; padding: 0 20px; font-size: 15px; } } /* ========================================================================== Inner pages ========================================================================== */ /* page intro: label, title, one paragraph */ .page-head { padding-block: clamp(56px, 8vw, 112px) clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 20px; } .page-head h1 { font-size: clamp(40px, 5.6vw, 72px); line-height: 1.06; letter-spacing: -.02em; max-width: 18ch; } .page-head .lede { color: var(--ink); } /* text beside a picture */ .split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .split--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .prose { display: flex; flex-direction: column; gap: 18px; max-width: 64ch; } .prose h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -.015em; } .figure { margin: 0; display: flex; flex-direction: column; gap: 12px; } .figure img { width: 100%; } .figure figcaption { font-size: 14px; color: var(--muted); } .figure--cover img { aspect-ratio: 4 / 5; object-fit: cover; } @media (max-width: 860px) { .split, .split--flip { grid-template-columns: minmax(0, 1fr); } } /* three big words (objectives) */ .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; } .trio > * { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 2px solid var(--black); } .trio h3 { font-size: clamp(28px, 3vw, 36px); line-height: 1.1; display: flex; align-items: center; gap: 12px; } .trio p { color: var(--ink); font-size: 16px; } @media (max-width: 860px) { .trio { grid-template-columns: minmax(0, 1fr); } } /* a statement in large type */ .statement { padding-block: var(--section); border-top: 1px solid var(--rule); } .statement p { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.25; letter-spacing: -.01em; color: var(--black); font-weight: 500; max-width: 28ch; text-wrap: balance; } /* stage tracker: three dots on one line, the reached ones filled */ .tracker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; max-width: 640px; position: relative; } .tracker::before { content: ""; position: absolute; inset-inline-start: 6px; inset-inline-end: calc(33.33% - 6px); top: 6px; height: 2px; background: var(--black); } .tracker li { position: relative; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--muted); } .tracker li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px var(--black); position: relative; } .tracker li.is-done { color: var(--black); font-weight: 600; } .tracker li.is-done::before { background: var(--orange); box-shadow: inset 0 0 0 2px var(--black); } .horizon .tracker li { color: var(--black); } /* the network of houses (home, projects; v2.js): the places run down a line on the left, and beside them a panel holds still and shows each place's photo, uncovered from the bottom, as its name reaches the middle of the screen. The line fills as you go; reached places get a green dot, the current one an orange dot with a ring. On phones the panel holds at the top and the places pass under it. The Projects page has a plain horizontal strip (places--list): no photos, no scroll effects. */ .places { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; } .places__list { position: relative; margin: 0; padding: 0; padding-inline-start: 44px; list-style: none; } .places__list::before, .places__fill { content: ""; position: absolute; inset-inline-start: 9px; top: 10px; width: 2px; } .places__list::before { bottom: var(--tail, 0px); background: var(--rule); } /* v2.js ends it at the last dot */ .places__fill { height: 0; background: var(--black); } .places__item { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 40vh; padding-bottom: 48px; } .places__item:last-child { min-height: 0; } .places__item::before { content: ""; position: absolute; inset-inline-start: -42px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--page); box-shadow: inset 0 0 0 2px var(--black); transition: background-color .4s ease, transform .4s var(--ease); } .places__item.is-first::before, .places__item.is-active::before { background: var(--orange); } .places__item.is-past:not(.is-first)::before { background: var(--green); } .places__item.is-active::before { transform: scale(1.25); } .places__item::after { content: ""; position: absolute; inset-inline-start: -48px; top: -2px; width: 28px; height: 28px; border-radius: 50%; box-shadow: 0 0 0 2px var(--orange); opacity: 0; transform: scale(.6); } .places__region { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--green-text); } .places__name { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.015em; } .places__text { max-width: 40ch; color: var(--muted); } .places__stage { font-size: 14px; color: var(--black); } .places__panel { position: sticky; top: max(calc(var(--hz-small) + 24px), calc(50vh - 260px)); display: flex; flex-direction: column; gap: 16px; } .places__stagebox { position: relative; aspect-ratio: 4 / 3; } .places__art { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 16px; margin: 0; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .6s ease, transform .9s var(--ease); } .places__art.is-shown { opacity: 1; transform: none; pointer-events: auto; } /* the photos take the house photos' offset shadows, green and orange in turn */ .places__art img { flex: 1; min-height: 0; width: calc(100% - 8px); object-fit: cover; box-shadow: 8px 8px 0 var(--green); clip-path: inset(calc((1 - var(--p, 1)) * 100%) -12px -12px -12px); transform: scale(calc(1.06 - var(--p, 1) * .06)); transform-origin: 50% 100%; } .places__art:nth-child(even) img { box-shadow: 8px 8px 0 var(--orange); } .places__credit { font-size: 12px; line-height: 1.4; color: var(--muted); } .places__credit a { color: inherit; } .places__caption { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--rule); } .places__label { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -.01em; color: var(--black); } .places__count { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); } .places__n { color: var(--black); font-weight: 600; } /* with motion allowed: places not yet reached are faint, photos uncover (v2.js) and the current dot rings */ .motion .places__item { opacity: .35; transition: opacity .5s ease; } .motion .places__item.is-past, .motion .places__item.is-active { opacity: 1; } .motion .places__item.is-past:not(.is-active) { opacity: .7; } .motion .places__item.is-active::after { animation: place-ring 2.4s ease-out infinite; } @keyframes place-ring { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } } /* the plain strip on Projects: every place in a single row on a line, name and region only (the one-line texts are hidden), Damascus orange and the rest hollow. It never wraps; the row scrolls sideways once it no longer fits (grid-auto-flow: column sizes exactly as many tracks as there are places, instead of a fixed column count). */ .places--list { display: block; margin-top: clamp(24px, 3vw, 36px); overflow-x: auto; scrollbar-width: thin; padding-bottom: 8px; } .places--list .places__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); gap: 0 16px; padding: 0; } .places--list .places__list::before { left: var(--line-start, 8px); right: auto; top: 7px; bottom: auto; width: var(--line-w, calc(100% - 16px)); height: 2px; background: var(--black); } /* --line-start/--line-w set by v2.js to the exact dot positions */ .places--list .places__item, .motion .places--list .places__item { min-height: 0; padding: 30px 0 0; gap: 4px; opacity: 1; } .places--list .places__item::before { inset-inline-start: 0; top: 0; } .places--list .places__region { order: 2; font-size: 11px; letter-spacing: .08em; } .places--list .places__name { order: 1; font-size: 18px; line-height: 1.25; letter-spacing: 0; } .places--list .places__stage { order: 3; font-size: 13px; color: var(--muted); } .places--list .places__text, .places--list .is-first .places__region { display: none; } section:has(> .places--list) { padding-bottom: clamp(32px, 4vw, 48px); } @media (max-width: 860px) { .places { grid-template-columns: minmax(0, 1fr); gap: 8px; } .places__panel { order: -1; top: var(--hz-small); z-index: 2; gap: 8px; padding-block: 12px; background: var(--page); } .places__stagebox { width: min(100%, calc(30vh * 4 / 3)); margin-inline: auto; } .places__item { min-height: 32vh; } } .project-row { padding-top: 32px; border-top: 1px solid var(--rule); } /* timeline: the horizon line with a dot for each phase */ .timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); margin: 0; padding: 0; list-style: none; position: relative; } .timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 40px; height: 2px; background: var(--black); } .timeline li { display: flex; flex-direction: column; gap: 12px; position: relative; } .timeline li::before { content: ""; order: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); position: relative; z-index: 1; } .timeline .when { order: 0; height: 20px; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .timeline h3 { order: 2; font-size: 22px; } .timeline p { order: 3; font-size: 16px; color: var(--ink); } @media (max-width: 860px) { .timeline { grid-template-columns: minmax(0, 1fr); row-gap: 32px; padding-inline-start: 36px; } .timeline::before { inset-inline-start: 8px; inset-inline-end: auto; top: 6px; bottom: 6px; width: 2px; height: auto; } .timeline li::before { position: absolute; inset-inline-start: -36px; top: 1px; } } /* a story told in the founder's words */ .story { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; padding-block: var(--section); } .story .quote-group { margin: 0; display: flex; flex-direction: column; gap: 20px; } .story .quote-group > p:first-child { font-size: clamp(26px, 3vw, 38px); line-height: 1.25; font-weight: 500; color: var(--black); letter-spacing: -.01em; } .story .quote-group p { max-width: 60ch; } .story .cite { font-style: normal; font-weight: 600; color: var(--black); } @media (max-width: 860px) { .story { grid-template-columns: minmax(0, 1fr); } } /* people */ .people { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(20px, 2.5vw, 40px); } .person { display: flex; flex-direction: column; gap: 8px; } .person img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--warm); margin-bottom: 8px; } .person h3 { font-size: 20px; line-height: 1.3; } .person .role { font-size: 14px; line-height: 1.45; color: var(--green-text); font-weight: 600; } .person p:last-child { font-size: 15px; line-height: 1.6; color: var(--muted); } .people--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); } .people--lead .person { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 24px; align-content: start; } .people--lead .person img { grid-row: span 4; margin: 0; } .subhead { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--black); display: flex; align-items: center; gap: 10px; padding-top: 24px; border-top: 1px solid var(--rule); } .people--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } .people--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1080px) { .people, .people--five { grid-template-columns: repeat(3, minmax(0, 1fr)); } .people--lead { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .people { grid-template-columns: minmax(0, 1fr); } .people--lead .person { grid-template-columns: minmax(0, 1fr); } .people--lead .person img { grid-row: auto; margin-bottom: 8px; } } /* article cards with a picture */ .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); } .card { display: flex; flex-direction: column; gap: 12px; } .card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 8px; } .card .tag { color: var(--muted); } .card h3 { font-size: 22px; line-height: 1.3; } .card h3 a { text-decoration: none; } .card h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } .card p:last-child { color: var(--muted); font-size: 16px; } .cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 860px) { .cards, .cards--two { grid-template-columns: minmax(0, 1fr); } } /* ways to give */ .give { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; } .give > * { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-block: 28px; border-top: 1px solid currentColor; border-color: rgb(0 0 0 / .3); } .give h3 { font-size: 22px; display: flex; align-items: center; gap: 12px; } .give p { flex-grow: 1; max-width: 40ch; } .give .wp-block-buttons { margin-top: 8px; } @media (max-width: 860px) { .give { grid-template-columns: minmax(0, 1fr); } } .note { font-size: 15px; color: var(--muted); max-width: 64ch; } /* the orange field, reused for calls to give */ .field { border-top: 6px solid var(--orange); color: var(--black); padding-block: var(--section); } .field .label, .field .note { color: var(--black); } .field__head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin-bottom: clamp(32px, 4vw, 56px); } .field__head h2 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; letter-spacing: -.015em; } /* a coming-soon panel */ .soon { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: end; padding-block: clamp(40px, 5vw, 72px) var(--section); } @media (max-width: 860px) { .soon { grid-template-columns: minmax(0, 1fr); } } /* the contact form */ .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; } .form .full { grid-column: 1 / -1; } .form label { display: block; font-size: 15px; font-weight: 600; color: var(--black); } .form label span { font-weight: 400; color: var(--muted); } .form input, .form select, .form textarea { display: block; width: 100%; min-height: 48px; margin-top: 8px; padding: 12px 14px; border: 1px solid #8A7F7A; border-radius: 2px; background: #FFFFFF; color: var(--ink); font: 400 16px/1.5 var(--sans); } .form textarea { min-height: 180px; resize: vertical; } .form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--black); outline-offset: 1px; border-color: var(--black); } .form button { justify-self: start; cursor: pointer; font-family: var(--sans); } .form__done { grid-column: 1 / -1; padding: 16px; background: var(--warm); border-top: 2px solid var(--green); } .details { display: flex; flex-direction: column; gap: 20px; font-size: 16px; } .details dt { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .details dd { margin: 4px 0 0; color: var(--black); } .details > dl { margin-block: 16px; } @media (max-width: 600px) { .form { grid-template-columns: minmax(0, 1fr); } } /* a top rule as wide as the content (not the gutters) */ .ruled, .founder, .statement { border-top: 0; background: linear-gradient(var(--rule), var(--rule)) center top / calc(100% - 2 * var(--gutter)) 1px no-repeat; } .statement:not(.wrap) { background-size: 100% 1px; } /* ========================================================================== Dropdown in the site's style (v2.js builds it from the