/* ===================== tokens ===================== Sourced from the Amistad S.A.F.E. Instagram identity: cream logo ground, periwinkle outlined lettering, Progress Pride + trans flags in the profile bio. */ :root{ color-scheme: light; --cream:#fdf7ee; --cream-2:#f6ecdc; --card:#fffdf9; --ink:#2a2242; /* violet-biased near-black, not neutral */ --body:#544a6e; /* 7.4:1 on cream */ --muted:#6d6289; /* 4.9:1 on cream */ --rule:#e3d8c6; --rule-soft:#ece2d2; --peri:#4f45c9; /* primary, 7.0:1 on cream */ --peri-soft:#efedff; --peri-ink:#ffffff; --deep:#241d3d; /* dark block */ --on-deep:#f2eee6; --on-deep-mute:#c3bad8; --on-deep-accent:#a49dff; --measure:62ch; --gutter:clamp(20px,5vw,44px); --shell:1120px; --r:18px; --display:"Outfit","Avenir Next",Avenir,"Segoe UI",sans-serif; --sans:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif; } /* DARK IS OPT-IN ONLY. There is deliberately NO @media (prefers-color-scheme: dark) rule. The page is cream by default on every device, whatever the visitor's system setting. Dark applies only when the visitor presses the toggle, which sets data-theme="dark" on . v3 auto-flipped to dark purple on any device set to dark; that is what this replaces. Do not add a prefers-color-scheme rule back. */ :root[data-theme="dark"]{ color-scheme: dark; --cream:#191331; --cream-2:#1f1839; --card:#241d42; --ink:#f3efe8; --body:#ccc3e4; --muted:#a79dc6; --rule:#382e5c; --rule-soft:#2c2450; --peri:#a79fff; --peri-soft:#2a2350; --peri-ink:#161033; --deep:#120d28; --on-deep:#f2eee6; --on-deep-mute:#c3bad8; --on-deep-accent:#a49dff; } /* ===================== base ===================== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } body{ background:var(--cream);color:var(--ink); font-family:var(--sans);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased; } .shell{max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)} p{color:var(--body);max-width:var(--measure)} a{color:var(--peri);font-weight:600;text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1.5px} a:hover{text-decoration-thickness:3px} :focus-visible{outline:3px solid var(--peri);outline-offset:3px;border-radius:4px} .deep :focus-visible,footer :focus-visible{outline-color:var(--on-deep-accent)} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream); padding:12px 18px;font-family:var(--display);font-weight:700;font-size:15px;z-index:20;border-radius:0 0 10px 0} .skip:focus{left:0;top:0} /* ===================== site nav (v11) ===================== One nav on every page. The current page's link is marked with aria-current="page" in the HTML, which is what draws the underline. */ .sitenav{background:var(--cream);border-bottom:1px solid var(--rule-soft)} .navrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 22px;padding-block:15px} .navhome{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.03em; text-transform:uppercase;color:var(--ink);text-decoration:none} .navhome:hover{color:var(--peri);text-decoration:none} .navlinks{display:flex;flex-wrap:wrap;gap:2px 20px;margin-right:auto; font-family:var(--display);font-size:14.5px;font-weight:700} .navlinks a{color:var(--body);text-decoration:none;padding:6px 2px; border-bottom:2.5px solid transparent} .navlinks a:hover{color:var(--peri)} .navlinks a[aria-current="page"]{color:var(--peri);border-bottom-color:var(--peri)} /* ===================== type roles ===================== */ .label{font-family:var(--display);font-size:11.5px;font-weight:700; letter-spacing:.24em;text-transform:uppercase;color:var(--muted)} h1,h2,h3{font-family:var(--display);color:var(--ink);text-wrap:balance} h2,.pagehead h1{font-size:clamp(28px,4.3vw,45px);line-height:1.08;letter-spacing:-.02em;font-weight:800} h3{font-size:17px;font-weight:700;letter-spacing:-.005em;line-height:1.3} .lead{font-size:clamp(19px,2.3vw,23px);line-height:1.45;color:var(--ink); max-width:40ch;font-weight:500} /* ===================== buttons ===================== */ .btn{display:inline-block;font-family:var(--display);font-size:15px;font-weight:700; letter-spacing:.01em;text-decoration:none;padding:14px 24px;border-radius:999px; border:2px solid var(--peri);color:var(--peri);background:transparent; transition:background .16s ease,color .16s ease} .btn:hover{background:var(--peri);color:var(--peri-ink)} .btn.fill{background:var(--peri);color:var(--peri-ink)} .btn.fill:hover{background:transparent;color:var(--peri)} .deep .btn{border-color:var(--on-deep);color:var(--on-deep)} .deep .btn:hover{background:var(--on-deep);color:var(--deep)} .deep .btn.fill{background:var(--on-deep);color:var(--deep)} .deep .btn.fill:hover{background:transparent;color:var(--on-deep)} .btnrow{display:flex;flex-wrap:wrap;gap:12px} /* ===================== hero (home) ===================== */ .hero{padding-block:clamp(52px,8vw,96px) clamp(46px,7vw,80px)} .herotop{display:flex;align-items:center;justify-content:space-between; gap:14px;flex-wrap:wrap;margin-bottom:clamp(10px,1.4vw,16px)} .themetoggle{font-family:var(--display);font-size:11.5px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--muted); background:transparent;border:1.5px solid var(--rule);border-radius:999px; padding:7px 15px;cursor:pointer;display:inline-flex;align-items:center; gap:8px;line-height:1;transition:border-color .16s ease,color .16s ease} .themetoggle:hover{border-color:var(--peri);color:var(--peri)} .themetoggle .ico{font-size:13px;line-height:1} .mark{display:inline-block;max-width:100%} .wordmark{font-family:var(--display);font-weight:800;text-transform:uppercase; font-size:clamp(46px,11.6vw,138px);line-height:.95;letter-spacing:-.025em;display:block; color:var(--peri)} .wordmark .l2{display:block} /* Outlined lettering, matching the logo. Guarded: without text-stroke support the letters stay solid periwinkle instead of vanishing. */ @supports (-webkit-text-stroke: 2px currentColor){ .wordmark .l2{ /* ---- READ BEFORE TOUCHING THIS BLOCK ---- Outfit is loaded as a VARIABLE font. Its glyphs are built from overlapping sub-paths (the F is a stem plus two arm rectangles, and so on), which is fine when they are filled but wrong when they are stroked: -webkit-text-stroke outlines every sub-path, so the arms get drawn straight THROUGH the stem and the A's crossbar through its legs. The letters looked broken and no amount of letter-spacing fixed it, because the artifact is inside each glyph, not between them. The fix is the fill, not the spacing. paint-order:stroke fill paints the stroke first and the fill on top, so filling with the PAGE BACKGROUND (--cream, which follows the light/dark toggle) covers the interior and every internal line, leaving a clean outer edge. The fill also hides the inner half of the stroke, so the stroke width is doubled to keep the same visible weight. Do not set color:transparent here. That is what caused the bug. */ color:var(--cream); -webkit-text-stroke:clamp(3px,.56vw,6px) var(--peri); paint-order:stroke fill; /* The h1's -.025em tracking suits the SOLID line. Outlined caps with a period between every letter need air, so this line tracks positive. Do not let it inherit the h1 value. */ letter-spacing:.03em; } } /* ===================== Progress Pride bars ===================== The hero bar and the footer bar share ONE construction so a future edit cannot fix one and break the other. They are a matched pair: the page opens and closes with the same graphic, the footer bar at about half the hero's height. v11 adds .toprule — the same footrule-height bar under the nav on inner pages, so every page still opens and closes with the flag. Stripes are a CSS gradient because horizontal bands stretch to any width without distorting. The chevron is a SEPARATE SVG pinned to the left with height:100%; width:auto and a real preserveAspectRatio, so it holds the flag's true proportions at every screen size. Do NOT go back to a single . That stretched the chevron into an 84px wedge on a 17px bar, and it is what the original version did wrong. And do not give a bar a height without a width: an SVG with a viewBox and no width renders at its intrinsic width (240px), which is what made the footer rule a stub at the far left of the page. */ .pridebar{position:relative;width:100%;overflow:hidden; background:linear-gradient(to bottom, #e40303 0 16.666%, #ff8c00 16.666% 33.333%, #ffed00 33.333% 50%, #008026 50% 66.666%, #004dff 66.666% 83.333%, #750787 83.333% 100%)} .pridebar svg{position:absolute;inset:0 auto 0 0;height:100%;width:auto;display:block} /* hero: sized to the wordmark. The entry wipe uses clip-path, not scaleX, because scaling the container would squash the chevron on the way in. */ .pride{margin-top:clamp(15px,1.9vw,24px);height:clamp(26px,3.4vw,38px); border-radius:3px;animation:wipe .6s cubic-bezier(.2,.7,.3,1) both} @keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} @media (prefers-reduced-motion: reduce){.pride{animation:none;clip-path:none}} .hero .tagline{font-family:var(--display);font-weight:600; font-size:clamp(17px,2.2vw,22px);color:var(--ink);margin-top:clamp(24px,3vw,34px)} .hero .sub{margin-top:10px;max-width:46ch;font-size:18px} .hero .btnrow{margin-top:30px} .hero .pronouns{display:inline-block;margin-top:14px;font-family:var(--display); font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--peri); background:var(--peri-soft);border-radius:999px;padding:5px 14px} /* ===================== page header (inner pages, v11) ===================== */ .pagehead{padding-block:clamp(44px,6.5vw,78px) 0} .pagehead h1{margin-top:10px} .pagehead .lead{margin-top:16px} /* ===================== section frame ===================== */ section{padding-block:clamp(50px,7vw,84px)} .band{background:var(--cream-2)} .deep{background:var(--deep)} .deep h2{color:var(--on-deep)} .deep p{color:var(--on-deep-mute)} .deep .label{color:var(--on-deep-accent)} .split{display:grid;gap:14px clamp(24px,5vw,64px);grid-template-columns:1fr;align-items:start} @media (min-width:900px){ .split{grid-template-columns:172px minmax(0,1fr)} .split>.label{padding-top:.6em;position:sticky;top:24px} } .stack{display:flex;flex-direction:column;gap:20px;align-items:start} /* ===================== what we do ===================== */ .does{display:grid;gap:14px;grid-template-columns:1fr;margin-top:6px;width:100%} @media (min-width:820px){.does{grid-template-columns:repeat(3,1fr)}} .does>div{background:var(--card);border:1px solid var(--rule-soft); border-radius:var(--r);padding:22px 22px 24px;position:relative;overflow:hidden} .does>div::before{content:"";position:absolute;inset:0 0 auto 0;height:5px} .does>div:nth-child(1)::before{background:#e40303} .does>div:nth-child(2)::before{background:#008026} .does>div:nth-child(3)::before{background:#750787} .does h3{margin-top:8px} .does p{font-size:16px;margin-top:6px;max-width:34ch} .aside{border-left:3px solid var(--rule);padding-left:18px; font-size:16px;color:var(--muted);max-width:56ch} /* ===================== org facts ===================== */ .facts{width:100%} .facts>div{display:grid;grid-template-columns:1fr;gap:2px 24px; padding-block:13px;border-bottom:1px solid var(--rule-soft)} .facts>div:last-child{border-bottom:0} @media (min-width:640px){.facts>div{grid-template-columns:200px minmax(0,1fr);align-items:baseline}} .facts dt{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--muted)} .facts dd{font-size:16.5px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums} /* v8: the Mission row is a paragraph, not a figure */ .facts dd.prose{font-weight:400;line-height:1.6;color:var(--body);font-variant-numeric:normal;max-width:62ch} /* ===================== footer ===================== */ /* footer: the hero bar's bookend. Full bleed, about half the height, square corners because it is a seam between the cream page and the dark footer rather than an object sitting on the page. .toprule is the same height at the top of inner pages, under the nav. */ .footrule{height:clamp(14px,1.8vw,19px)} .toprule{height:clamp(14px,1.8vw,19px)} /* The last section's normal bottom padding left this bar marooned in ~84px of empty cream. Halved so the bar reads as the top edge of the footer. */ main>section:last-of-type{padding-bottom:clamp(26px,3.4vw,42px)} footer{background:var(--deep);color:var(--on-deep);padding-block:clamp(42px,6vw,64px)} footer .name{font-family:var(--display);font-weight:800;font-size:20px; letter-spacing:.01em;text-transform:uppercase;color:#fff;margin-bottom:12px} footer p{color:var(--on-deep-mute);font-size:15.5px;max-width:60ch} footer a{color:var(--on-deep);text-decoration-color:var(--on-deep-accent)} .flinks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px; font-family:var(--display);font-size:15px;font-weight:700} .fine{margin-top:22px;font-size:13.5px;color:var(--on-deep-mute);font-family:var(--display)}