/* Karta Collective Foundation — V1 Brand guide: ~/Claude Work/karta-collective-site/V1/karta-brand-guide.pdf Rules kept here: 0 radius, no gradients, no shadows, Paper not white, Amber only as text/rule (never a fill), 8px spacing grid, 3 typefaces. */ :root { --pine: #2D4A3E; --amber: #a85c08; --paper: #FAF7F2; --gold: #c4820e; --cream: #f5f0e6; --sage: #164018; --muted: #9a8a70; --ink: #4a4a4a; --rule: #e4dccd; --serif: "Libre Baskerville", serif; --sans: "IBM Plex Sans", sans-serif; --mono: "IBM Plex Mono", monospace; --header-h: 104px; --wrap: 1184px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { margin: 0; background: var(--paper); color: var(--ink); font: 300 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--amber); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 4px; } h1, h2, h3 { font-family: var(--serif); color: var(--pine); margin: 0; font-weight: 700; line-height: 1.2; } p { margin: 0 0 16px; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; } /* ---------- Labels / section numbers (mono, letterspaced, never bold) ---------- */ .label { font: 400 12px/1.5 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); margin: 0 0 16px; } .section-head { margin-bottom: 48px; } .section-head h2, .section-head h1 { font-size: clamp(28px, 3.2vw, 36px); } .section-head .sub { font: 400 20px/1.6 var(--serif); color: var(--pine); margin-top: 16px; max-width: 640px; } /* ---------- Buttons (square, flat) ---------- */ .btn { display: inline-block; font: 500 14px/1 var(--sans); letter-spacing: 0.02em; padding: 16px 24px; border: 2px solid var(--pine); background: var(--pine); color: var(--paper); cursor: pointer; } .btn:hover { background: var(--sage); border-color: var(--sage); text-decoration: none; } .btn--light { background: var(--paper); border-color: var(--paper); color: var(--pine); } .btn--light:hover { background: var(--cream); border-color: var(--cream); } .text-link { font: 500 15px/1.5 var(--sans); color: var(--amber); border-bottom: 1px solid var(--amber); padding-bottom: 4px; } .text-link:hover { text-decoration: none; color: var(--pine); border-color: var(--pine); } /* ---------- Draft markers: visible while ; remove class at launch ---------- */ .todo { display: none; } .draft .todo { display: inline-block; font: 400 11px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--amber); border: 1px dashed var(--amber); padding: 4px 8px; margin: 8px 0; } .on-dark .todo, .draft .hero .todo { color: var(--gold); border-color: var(--gold); } /* ---------- Photo slots: show a labelled block until the file exists ---------- */ .photo { position: relative; background: var(--pine) center / cover no-repeat; overflow: hidden; } .photo .pending { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font: 400 11px/1.6 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream); border: 1px solid rgba(250, 247, 242, 0.25); } .photo.has-photo .pending { display: none; } .photo .initials { font: 400 40px/1 var(--serif); color: var(--paper); letter-spacing: 0; text-transform: none; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: var(--paper); border-bottom: 1px solid var(--rule); } .site-header .wrap { height: 100%; max-width: 1344px; display: flex; align-items: center; gap: 40px; } /* Two logos top-left: Karta (home) | Proppa (eatproppa.com) */ .brand-group { display: flex; align-items: center; gap: 24px; flex-shrink: 0; } .brand-divider { width: 1px; height: 56px; background: var(--rule); } /* Proppa: wordmark centred over the caption words (arrow sits outside the measured width). padding-top = caption height + gap, so the wordmark sits on the Karta logo's centre line. */ .brand-proppa { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 18px; } .brand-proppa img { display: block; height: 24px; width: auto; } .brand-proppa .proppa-cap { position: relative; font: 400 10px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); white-space: nowrap; } .brand-proppa .proppa-cap i { position: absolute; left: 100%; top: 0; margin-left: 0.45em; font-style: normal; letter-spacing: 0; } .brand-proppa:hover { text-decoration: none; } .brand-proppa:hover span { color: var(--pine); } .brand img { height: 84px; width: auto; } .main-nav { display: flex; gap: 32px; margin-left: auto; } .main-nav a, .header-actions > * { white-space: nowrap; } .main-nav { align-items: center; } .main-nav a { font: 500 16px/1 var(--sans); color: var(--pine); /* equal space above/below so text centres on the button; underline slot always reserved */ padding: 8px 0; border-bottom: 2px solid transparent; border-top: 2px solid transparent; } .main-nav a:hover { color: var(--amber); text-decoration: none; } /* Current page: amber underline on the link / under the button */ .main-nav a[aria-current="page"] { color: var(--pine); border-bottom-color: var(--amber); } .header-actions .btn { position: relative; } .header-actions .btn[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; background: var(--amber); } .header-actions { display: flex; align-items: center; gap: 24px; } .site-header .btn { padding: 12px 16px; } .header-actions { gap: 16px; } .menu-toggle { display: none; font: 400 12px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; background: none; border: 1px solid var(--pine); color: var(--pine); padding: 8px 12px; cursor: pointer; } @media (max-width: 960px) { .header-actions { margin-left: auto; } .menu-toggle { display: block; } .main-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 8px 32px 24px; } .main-nav a { padding: 16px 0; border-top: 0; border-bottom: 1px solid var(--rule); } .main-nav a[aria-current="page"] { border-bottom: 2px solid var(--amber); } .nav-open .main-nav { display: flex; } .site-header .wrap { gap: 16px; } } @media (max-width: 560px) { .brand-group { gap: 12px; } .brand-divider { height: 40px; } .brand-proppa img { height: 18px; } .brand-proppa { gap: 6px; padding-top: 14px; } .brand-proppa .proppa-cap { font-size: 8px; letter-spacing: 0.1em; } .site-header .btn { padding: 10px 12px; font-size: 13px; } .brand img { height: 56px; width: auto; } .wrap { padding: 0 24px; } } /* ---------- Hero ---------- */ .hero { position: relative; height: calc(100vh - var(--header-h)); min-height: 560px; max-height: 880px; overflow: hidden; background: var(--pine); color: var(--paper); } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; } .hero-slide.is-active { opacity: 1; } .hero-slide.is-active.has-photo { animation: kenburns 7s ease-out forwards; } .hero-slide:nth-child(1) { --kb-x: -2%; --kb-y: -1%; } .hero-slide:nth-child(2) { --kb-x: 2%; --kb-y: -2%; } .hero-slide:nth-child(3) { --kb-x: -1%; --kb-y: 2%; } @keyframes kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.1) translate(var(--kb-x), var(--kb-y)); } } .hero-slide .pending { align-items: flex-start; justify-content: flex-end; padding: 32px; border: 0; } /* Flat scrim (brand: no gradients). Uniform pine wash keeps text legible over any photo. */ .hero-scrim { position: absolute; inset: 0; background: rgba(22, 36, 30, 0.55); } .hero-content { position: absolute; left: 0; right: 0; bottom: 96px; } .hero-content .label { color: var(--gold); } .hero h1 { color: var(--paper); font-size: clamp(40px, 5.2vw, 54px); max-width: 720px; } .hero-sub { font: italic 400 clamp(18px, 2vw, 24px)/1.5 var(--serif); color: var(--paper); max-width: 560px; margin: 24px 0 40px; } .hero-rule { width: 64px; height: 2px; background: var(--amber); border: 0; margin: 0 0 24px; } .hero-dots { position: absolute; right: 32px; bottom: 96px; display: flex; gap: 8px; } .hero-dots span { width: 24px; height: 2px; background: rgba(250, 247, 242, 0.35); } .hero-dots span.is-active { background: var(--paper); } @media (prefers-reduced-motion: reduce) { .hero-slide.is-active.has-photo { animation: none; } .hero-slide { transition: none; } } /* ---------- Sections ---------- */ .section { padding: 96px 0; border-bottom: 1px solid var(--rule); } .section--cream { background: var(--cream); } .section--pine { background: var(--pine); color: var(--paper); border-bottom: 0; } .section--pine h2, .section--pine h3 { color: var(--paper); } .section--pine .label { color: var(--gold); } /* Mission */ .mission { display: grid; grid-template-columns: 8fr 3fr; gap: 32px 64px; align-items: center; } .mission .section-head { margin-bottom: 32px; } .mission-copy p { font-size: 18px; line-height: 1.8; } .mission-copy .lead strong { font-weight: 700; } .mission-copy .lead { font: 400 clamp(16px, 1.5vw, 18px)/1.7 var(--serif); color: var(--pine); max-width: 768px; } .mission-close { grid-column: 1 / -1; font: 700 clamp(16px, 2.3vw, 32px)/1.3 var(--serif); font-style: normal; color: var(--pine); white-space: nowrap; border-left: 3px solid var(--amber); padding-left: 24px; margin: 16px 0 0; } @media (max-width: 700px) { .mission-close { white-space: normal; font-size: 22px; } } /* Why we're different */ .points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 64px; } .point { border-top: 2px solid var(--pine); padding-top: 24px; } .point .num { font: 400 12px/1 var(--mono); letter-spacing: 0.15em; color: var(--amber); margin-bottom: 16px; } .point h3 { font-size: 22px; margin-bottom: 16px; } .point p { margin: 0; } /* Our Kartas teaser */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split .photo { aspect-ratio: 4 / 3; } .split p:not(.label) { font-size: 18px; line-height: 1.8; } .split .text-link { display: inline-block; margin-top: 16px; } .sub-head { font: italic 400 24px/1.3 var(--serif); color: var(--pine); margin-bottom: 24px; } /* Our Kartas band: full-bleed photo, solid cream panel for contrast (no gradients) */ #different { padding-bottom: 0; } .kartas-band { position: relative; margin-top: 96px; } .kartas-photo { height: clamp(520px, 50vw, 720px); background-position: center 40%; } .kartas-overlay { position: absolute; left: 0; right: 0; bottom: 64px; } .kartas-panel { background: var(--cream); border-top: 3px solid var(--amber); max-width: 480px; padding: 40px; } .kartas-panel p { font-size: 17px; line-height: 1.8; } .kartas-panel .text-link { display: inline-block; margin-top: 8px; } /* Our Brands */ .brand-spot { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; } .brand-spot .photo { aspect-ratio: 4 / 3; background-color: var(--sage); } .proppa-mark { width: 240px; aspect-ratio: 600 / 184; background: var(--paper); -webkit-mask: url("../img/proppa-logo.png") no-repeat left center / contain; mask: url("../img/proppa-logo.png") no-repeat left center / contain; margin-bottom: 32px; } .brand-spot p:not(.label) { font-size: 17px; color: var(--paper); } .brand-spot .btn { margin-top: 24px; } .brand-rule { width: 64px; height: 2px; background: var(--amber); border: 0; margin: 0 0 24px; } /* Who we are */ .people-group + .people-group { margin-top: 96px; } .people-group > h3 { font-size: 24px; font-style: italic; font-weight: 400; margin-bottom: 32px; } .founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .advisors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .person { background: var(--cream); border-top: 3px solid var(--pine); display: flex; flex-direction: column; } .person .photo { aspect-ratio: 4 / 3; } .founders-photo { aspect-ratio: 3 / 1; background-position: center 30%; } .founders-photo--below { margin-top: 32px; } .person-body { padding: 32px; display: flex; flex-direction: column; flex: 1; } .person .label { margin-bottom: 8px; } .person h4 { font: 700 22px/1.3 var(--serif); color: var(--pine); margin: 0 0 16px; } .person p { font-size: 15px; } .person .text-link { align-self: flex-start; margin-top: auto; font-size: 14px; } /* Footer (same on every page; carries contact details) */ .site-footer { background: var(--pine); color: var(--paper); padding: 40px 0; border-top: 1px solid rgba(250, 247, 242, 0.15); } .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .footer-org { display: flex; flex-direction: column; align-items: flex-start; } .footer-right { display: flex; flex-direction: column; align-items: flex-end; } .footer-brand { display: flex; align-items: center; gap: 16px; } .footer-brand img { width: 56px; height: 56px; } .footer-meta { font: 400 12px/1.5 var(--mono); letter-spacing: 0.1em; color: var(--cream); margin: 0; white-space: nowrap; } .footer-contact { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 8px 16px; } .footer-contact .label { color: var(--gold); margin: 0; flex-basis: 100%; text-align: right; } .footer-contact .label { font-size: 11px; } .footer-contact a { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/1.5 var(--mono); letter-spacing: 0.05em; color: var(--paper); } .footer-contact .icon { width: 16px; height: 16px; flex-shrink: 0; } .footer-contact a:hover { color: var(--gold); text-decoration: none; } /* ---------- /our-kartas ---------- */ /* Page intro (Our Kartas, Support): heading + text, then a photo band */ .page-intro { padding: 80px 0 56px; } .page-intro h1 { font-size: clamp(36px, 4.5vw, 48px); color: var(--amber); margin-bottom: 24px; } .page-intro p { font-size: 18px; line-height: 1.8; max-width: 720px; } .page-intro .lead { font: 400 clamp(20px, 2.2vw, 24px)/1.6 var(--serif); color: var(--pine); } .photo-band-pair { display: grid; grid-template-columns: 1fr 1fr; height: clamp(360px, 36vw, 520px); } .photo-band-single { height: clamp(280px, 28vw, 400px); background-position: center 60%; } .karta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; } .karta-card { text-align: left; font: inherit; color: inherit; text-decoration: none; background: var(--cream); border: 0; border-top: 3px solid var(--pine); padding: 0; cursor: pointer; display: flex; flex-direction: column; } .karta-card:hover h3 { color: var(--amber); } .karta-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; } .karta-card .photo { aspect-ratio: 4 / 3; } .karta-card-body { padding: 32px; display: flex; flex-direction: column; flex: 1; } .karta-card h3 { font-size: 24px; margin-bottom: 4px; } .karta-card .place { font-size: 14px; color: var(--muted); margin-bottom: 16px; } .karta-card:hover { text-decoration: none; } .karta-card .excerpt { font-size: 15px; margin-bottom: 24px; } .karta-card .meta { margin-top: auto; font: 400 11px/1.8 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .karta-card .read { margin-top: 16px; font: 500 14px/1 var(--sans); color: var(--amber); } .tag-illustrative { align-self: flex-start; font: 400 11px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); padding: 6px 8px; margin-bottom: 16px; } .karta-card--soon { cursor: default; background: transparent; border: 1px solid var(--rule); border-top: 3px solid var(--rule); min-height: 320px; justify-content: center; align-items: center; text-align: center; padding: 48px 32px; } .karta-card--soon .label { color: var(--muted); } .karta-card--soon p:not(.label) { font: italic 400 18px/1.5 var(--serif); color: var(--pine); margin: 0; } /* Individual farmer page */ .profile-page { padding: 48px 0 96px; } .back-link { display: inline-block; margin-bottom: 32px; font: 400 12px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; } .profile-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } .profile-grid .photo { aspect-ratio: 4 / 5; } .profile-body h1 { font-size: clamp(36px, 4.5vw, 48px); color: var(--amber); margin-bottom: 4px; } .profile-body .place { color: var(--muted); margin-bottom: 32px; } .profile-body > p { font-size: 17px; line-height: 1.8; max-width: 640px; } .profile-body blockquote { font: italic 400 22px/1.5 var(--serif); color: var(--pine); border-left: 3px solid var(--amber); padding-left: 24px; margin: 40px 0; max-width: 640px; } .profile-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--rule); padding-top: 24px; max-width: 640px; margin: 0; } .profile-facts dt { font: 400 11px/1.5 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .profile-facts dd { margin: 4px 0 0; font-family: var(--serif); color: var(--pine); } /* ---------- /support (standalone) ---------- */ .support-top { padding: 80px 0; } .support-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: stretch; } .support-give { display: flex; } .support-give .give-block { flex: 1; display: flex; flex-direction: column; } .support-give .bank-list { flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .support-copy h1 { font-size: clamp(36px, 4.5vw, 48px); color: var(--amber); margin-bottom: 24px; } .support-copy .lead { font: 400 clamp(19px, 1.9vw, 22px)/1.6 var(--serif); color: var(--pine); } .support-copy p { font-size: 16px; line-height: 1.75; } .support-copy .support-after { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); } .photo-full { display: block; width: 100%; height: auto; } .give-block { margin: 0; background: var(--cream); border-top: 3px solid var(--pine); padding: 24px 28px; } .give-block h2 { font-size: 20px; margin-bottom: 8px; } .bank-list { margin: 0; } .bank-row { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; min-height: 40px; padding: 6px 0; border-bottom: 1px solid var(--rule); } .bank-row:last-child { border-bottom: 0; } .bank-row dt { font: 400 10px/1.5 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .bank-row dd { margin: 0; font: 400 14px/1.4 var(--mono); color: var(--pine); } .bank-row dd:last-child { grid-column: 2 / -1; } .copy-btn { font: 400 10px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; background: none; border: 1px solid var(--pine); color: var(--pine); padding: 6px 10px; cursor: pointer; min-width: 72px; } .copy-btn:hover { background: var(--pine); color: var(--paper); } .copy-btn.is-copied { border-color: var(--sage); background: var(--sage); color: var(--paper); } .support-note { grid-column: 1 / -1; margin: 0; font-size: 15px; color: var(--ink); white-space: nowrap; } @media (max-width: 900px) { .support-note { white-space: normal; } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .section { padding: 64px 0; } .support-grid { grid-template-columns: 1fr; gap: 40px; } .support-top { padding: 56px 0; } .kartas-band { margin-top: 64px; } .kartas-photo { height: auto; aspect-ratio: 4 / 3; } .kartas-overlay { position: static; padding: 0; } .kartas-panel { max-width: none; padding: 32px 24px; } .mission, .split, .brand-spot, .founders { grid-template-columns: 1fr; gap: 32px; } .points { grid-template-columns: 1fr; gap: 40px; } .advisors { grid-template-columns: 1fr 1fr; } .founders-photo { aspect-ratio: 16 / 9; background-position: 62% 30%; } .profile-grid { grid-template-columns: 1fr; gap: 32px; } .profile-grid .photo { aspect-ratio: 4 / 3; } .photo-band-pair { height: 240px; } .hero-content { bottom: 64px; } .hero-dots { bottom: 24px; right: 24px; } .footer-row { flex-direction: column; align-items: flex-start; } .footer-right { align-items: flex-start; align-self: stretch; } .footer-contact { justify-content: flex-start; } .footer-contact .label { text-align: left; } } @media (max-width: 600px) { .advisors { grid-template-columns: 1fr; } .bank-row { grid-template-columns: 1fr auto; } .bank-row dt { grid-column: 1 / -1; } .bank-row dd:last-child { grid-column: 1 / -1; } .give-block { padding: 24px; } .footer-meta { white-space: normal; } } /* Section names in Amber (Priya's call, 2026-09-24): breaks up the pine and overrides the guide's "Pine Green for all headings". Large text, 4.6:1 on Paper. */ .section-head h2, .section-head h1 { color: var(--amber); } /* Keep the footer at the bottom on short pages (e.g. /support). */ body { min-height: 100vh; display: flex; flex-direction: column; } body > main { flex: 1; } .profile-body .tag-illustrative { margin-bottom: 24px; } .mission-mark { display: block; width: 232px; height: 232px; justify-self: center; } @media (max-width: 900px) { .mission-mark { display: none; } } .advisors .person h4 { font-size: clamp(14px, 1.3vw, 18px); white-space: nowrap; } /* First (in-progress) story card: slightly stronger than the other placeholders */ .karta-card--first { border-top-color: var(--amber); background: var(--cream); } .karta-card--first .label { color: var(--amber); } /* Phone header: fit Karta | Proppa + caption | Support | Menu on 360px screens */ @media (max-width: 480px) { .site-header .wrap { padding: 0 16px; gap: 8px; } .brand img { height: 48px; } .brand-group { gap: 10px; } .brand-divider { height: 36px; } .brand-proppa img { height: 16px; } .brand-proppa .proppa-cap { font-size: 7.5px; letter-spacing: 0.08em; } .header-actions { gap: 8px; } .site-header .btn { padding: 9px 10px; font-size: 12px; } .menu-toggle { padding: 8px; font-size: 10px; letter-spacing: 0.1em; } /* Footer contact: label, then one contact per line */ .footer-contact { flex-direction: column; align-items: flex-start; gap: 10px; } .footer-contact a { font-size: 12px; gap: 8px; } .footer-meta { white-space: nowrap; font-size: 10px; letter-spacing: 0.05em; } .footer-brand img { width: 44px; height: 44px; } }