/* ============================================================ theme-ocf.css, Operation Children First Client values for nonprofit-layout. Black and white, set 2026-08-04 on Seth's call. The spruce and amber build it replaced is in git history and in the note at the bottom. WHY BLACK AND WHITE IS THE RIGHT ANSWER HERE Their logo is already black and white: a stencil wordmark knocked out of two solid silhouettes, no colour anywhere in it. The old palette invented a colour system the mark never asked for, so the header was always going to be a logo sitting on top of somebody else's idea. This palette is the logo, scaled up to a page. It also suits the name. "Operation" is stencil, military, plain. A charity page in two colours reads as money going to coats rather than to design. THE ONE RULE THAT MAKES IT WORK There is no accent colour to reserve, so CONTRAST does the job colour used to. The donate button is the only pure black block on a light band and the only pure white block on a dark one. Nothing else on the page is a filled block. Break that and the page loses its only signpost. Paper is warm, ink is soft black. Neither is pure. Pure #fff against pure #000 buzzes on a screen and looks cheap at large sizes, and this page is mostly large sizes. CONTRAST, measured not guessed ink-soft on paper ........... 8.1 : 1 body copy ink-faint on paper .......... 5.1 : 1 captions, sources accent-deep on paper ....... 15.8 : 1 large display accent-ink on accent ....... 15.8 : 1 button label, light band btn-on-dark-ink on bg ...... 17.4 : 1 button label, dark band paper-soft on ink-deep ..... 13.6 : 1 copy on dark bands paper-faint on ink-deep ..... 6.4 : 1 fine print on dark All clear AA, most clear AAA. TYPE Fraunces for display, Inter for everything else. Unchanged. With the colour gone the type is doing more work, so the serif earns its place rather than decorating. ============================================================ */ :root { /* --- the page's own ground and text --- DARK PAGE, set 2026-08-05 on Seth's call. A near black ground is the only way the backdrop mark reads, because a faint shape on warm paper has nowhere to go: it either disappears or it dirties the paper. On black it is light coming through, which is the whole Iron Asylum effect. */ --ground: #0b0b0c; --fg: #f2f1ef; /* --- light values, now used ONLY as text on a dark ground --- */ --paper: #f7f6f4; --paper-soft: #cfcdc9; --paper-faint: #91908c; --tint: #16171a; /* the quiet band, one step off ground */ /* BARELY THERE. Every section is an open band now, so a card is a hairline and a whisper of lift, not a panel. Anything heavier and the boxes chop the backdrop into pieces instead of letting it run behind the type. The words carry the page, the boxes only group them. */ --card-bg: #ffffff08; /* --- ink, now the secondary text on a dark ground --- */ --ink: #1a1b1e; /* band--ink ground, still a ground */ --ink-deep: #050506; /* hero, close and footer, the darkest */ --ink-soft: #bcbab6; /* body copy on the ground */ --ink-faint: #8d8b87; /* captions, sources, fine print */ /* --- the ACT. one white block, nothing else is filled --- */ --accent: #f2f1ef; --accent-bright: #ffffff; --accent-deep: #ffffff; --accent-ink: #0b0b0c; --accent-on-dark:#f2f1ef; --btn-on-dark-bg: #f7f6f4; --btn-on-dark-hover: #ffffff; --btn-on-dark-ink: #0b0b0c; /* --- rules --- */ --rule: #ffffff1f; --rule-strong: #ffffff45; --rule-on-dark: #ffffff2e; /* --- header --- */ --header-bg: #0b0b0cf2; --header-h: 5.5rem; --mark-size: 4rem; /* the full logo, two figures plus a three line stencil wordmark, needs every pixel it can get */ /* --- hero. heavy on the left so the copy stays readable over whatever photograph gets dropped in later --- */ /* The hero carries the LOGO, not a photograph, from 2026-08-05. The photograph moved down to the founder band where a face belongs. Because the art is a mark and not a picture, the scrim has to let go completely on the right or the logo sits under a grey film. */ --hero-scrim: linear-gradient(100deg, #0b0b0cfa 0%, #0b0b0cf0 38%, #0b0b0c66 72%, #0b0b0c00 100%); --hero-media-fit: contain; --hero-media-pos: right center; --hero-media-inset: clamp(2rem, 5vw, 5rem) clamp(1.5rem, 4vw, 4rem); /* Fades its own left edge into the ground so the headline runs under it cleanly instead of stopping at a hard image boundary. */ --hero-media-mask: linear-gradient(to right, transparent 0%, transparent 26%, #000 58%, #000 100%); /* --- band heads centred. Seth's call 2026-08-05. Ranged left against a 42rem measure the headings hugged one edge and left a hole on the other, which on a page whose whole background is one centred mark read as a misalignment rather than a choice. --- */ --head-inline: auto; --head-align: center; --head-justify: center; --eyebrow-rule-lead: 4.5rem; --card-align: center; --card-items: center; /* --- partner logos. one white ink, because the donate button is the only thing on this page allowed to carry weight --- */ /* NO page wide flatten. brightness(0) invert(1) crushed every pictorial mark to a white blob: Marathon's chevron, the State seal and the district seal all lost their drawing. The reverse is baked per logo instead, so a mark that already reads on black keeps its own colour and only the dark ink ones were inverted. */ --partner-h: 3.4rem; --partner-filter: none; --partner-opacity: 0.85; /* --- the mark backdrop --- The WHITE two figure mark now, because the page is black. At 0.07 over #0b0b0c it lands near #1f1f20, light coming through rather than a stain on top. Old note kept below. The black two figure mark. At 0.07 over warm paper its darkest part lands near #e6e5e3, a shade of the paper rather than a second surface, and ink-soft body copy over it still measures past 7:1. The full wordmark lockup is NOT used: it is as wide as the measure and has nowhere quiet to be, the failure the Northern Horizons build banked. */ --markdrop-opacity: 0.07; --markdrop-vw: 150vw; --markdrop-cap: 1100px; /* --- type --- */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --display-weight: 600; --display-tracking: -0.015em; /* --- rhythm --- Tighter than the layout default on purpose. Every band on this page is transparent, so nothing changes colour at a section edge and the gap is the ONLY separator. The default 7rem read as a hole rather than a break. 4.75rem gives a 152px gap at 1440, which separates without stranding. --- */ --band-space: clamp(2.75rem, 5.2vw, 4.75rem); --hero-space-top: clamp(4.5rem, 11vw, 8rem); /* --- measure --- */ --measure-wide: 76rem; --measure-tight: 62rem; --measure-text: 42rem; /* --- shape. softer than the gym layout on purpose, this page is asking for trust, not for intensity --- */ --radius-btn: 8px; --radius-card: 14px; --shadow-btn: 0 8px 22px #0000002e; } /* Fraunces ships a few variable axes. Flatten the whimsical one, keep a little optical warmth at display sizes. */ h1, h2, .pull__quote, .founder__quote, .tier__amount, .fact__n { font-variation-settings: "SOFT" 20, "WONK" 0, "opsz" 40; } /* If the spruce and amber version is ever wanted back, it was: paper #faf8f4 · tint #f1ede5 · ink #14322a · ink-deep #0d1f1a ink-soft #42574f · ink-faint #5d716a · accent #d9822b accent-bright #eb9640 · accent-deep #a85f14 · accent-ink #1b1005 accent-on-dark #f0a94e · rule #e0d9cc · rule-strong #c2b8a6 */