/* ========================================================================== SITE FONTS (restyle, Oct 2026) -------------------------------------------------------------------------- IBM Plex Sans for body text, Jost for headings, labels, nav and big numbers, IBM Plex Sans Condensed for SVG chart text - the type from Jim's jameslantos.com demo. Self-hosted in fonts/ (SIL Open Font License 1.1, see fonts/OFL-*.txt), latin + latin-ext only: every character on the site is covered (the ← → ≠ arrows/symbols fall back exactly as on Google Fonts). Loaded by functions.php on every blank-canvas page and post. Fonts only: no size, spacing or colour changes, and no page palette is touched. How the rules win: - --serif / --sans are defined in each page's own palette block (scoped to .mac-page- / .case-), so they are overridden with !important on every element. Colours in those blocks are left alone. - The font rules carry an extra "html " in front. In the demo the same rules come after the page CSS; this file loads before it (head vs the Custom HTML block), so one extra type selector gives the same winners and losers as the demo: it beats a page rule of equal specificity and still loses to a more specific one. - SVG charts: CSS outranks the font-family attributes in the chart markup, so the 82 charts change font without any edit to their SVG. ========================================================================== */ @font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/ibm-plex-sans-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans';font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/ibm-plex-sans-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/ibm-plex-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-condensed-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Jost';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/jost-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Jost';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/jost-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} :root,body,body *{ --serif:'IBM Plex Sans','Segoe UI','Helvetica Neue',Arial,sans-serif !important; --sans:'Jost','Century Gothic','Futura','Trebuchet MS',sans-serif !important; --disp:'Jost','Century Gothic','Futura','Trebuchet MS',sans-serif; } /* Headings, labels and big numbers in Jost (selector list as in the demo) */ html h1,html h2,html h3,html h4,html h5,html .brand,html .hlead h2,html .hhero h1,html .pivot, html .stat b,html .cred b,html .crow b,html .case .stat-row b,html .footbrand b,html .num b, html .strip b,html .five li:before,html .caps li:before{font-family:var(--disp)} html h1,html h2,html .hlead h2,html .hhero h1{font-weight:500;letter-spacing:0} html h3,html h4{font-weight:600} /* SVG chart text: the markup's own font-family attributes, remapped */ svg [font-family*="Gill"]{font-family:'IBM Plex Sans Condensed','IBM Plex Sans','Arial Narrow',Arial,sans-serif} svg [font-family*="Georgia"]{font-family:'Jost','Century Gothic','Futura','Trebuchet MS',sans-serif} /* Nav: in Jost the link row is up to 15px wider than the nav between 1141px (where the burger menu ends) and 1159px, so the last link was cut off. Tighter gaps in that band only (17px -> 14px); font size unchanged. Case pages' nav (style.css) has room and is not affected. */ @media (min-width:1141px) and (max-width:1159px){html .nav ul{gap:14px}} /* Two headings were moved from h3 up to h2 by the accessibility work (1 Oct): Case Studies' category headings and the decks page's company names. In the source - and the demo - they are h3, which the demo gives weight 600, so they keep that weight here instead of h2's 500. (The decks page's footer headings, h4 -> h2, need nothing: their own rule sets 700, as in the demo.) */ html .cathead h2,html .deckrow .who h2{font-weight:600} /* Nav, 1041-1140px, on the 9 pages whose own CSS switches to the burger menu only at 1040px (the homepage, Services, References and the blog switch at 1140px). Their link row was already too wide there before the restyle (up to 72px, scrolling sideways) and Jost made it ~13px wider. In this band these pages now get the burger menu exactly as the homepage has it at these widths: the same rules, copied from the homepage's own @media(max-width:1140px) blocks. The decks page is matched by its slug prefix only, as robots.txt already publishes it - its full address must not appear in a public file. */ @media (min-width:1041px) and (max-width:1140px){ :root:has(> body:is(.mac-page-about,.mac-page-ai-policy,.mac-page-case-studies,.mac-page-contact,.mac-page-marketplaces,.mac-page-methods,.mac-page-privacy,.mac-page-terms,[class*="mac-page-evaluation-decks-"])){--navh:72px} html body:is(.mac-page-about,.mac-page-ai-policy,.mac-page-case-studies,.mac-page-contact,.mac-page-marketplaces,.mac-page-methods,.mac-page-privacy,.mac-page-terms,[class*="mac-page-evaluation-decks-"]) .nav .wrap{gap:12px;padding:0 18px;min-height:72px;flex-wrap:nowrap} html body:is(.mac-page-about,.mac-page-ai-policy,.mac-page-case-studies,.mac-page-contact,.mac-page-marketplaces,.mac-page-methods,.mac-page-privacy,.mac-page-terms,[class*="mac-page-evaluation-decks-"]) .logo{flex:0 1 auto;min-width:0;overflow:hidden} html body:is(.mac-page-about,.mac-page-ai-policy,.mac-page-case-studies,.mac-page-contact,.mac-page-marketplaces,.mac-page-methods,.mac-page-privacy,.mac-page-terms,[class*="mac-page-evaluation-decks-"]) .logo img{height:auto;width:auto;max-height:40px;max-width:100%} html body:is(.mac-page-about,.mac-page-ai-policy,.mac-page-case-studies,.mac-page-contact,.mac-page-marketplaces,.mac-page-methods,.mac-page-privacy,.mac-page-terms,[class*="mac-page-evaluation-decks-"]) .burger{display:flex;flex:0 0 auto;margin-left:auto} html body:is(.mac-page-about,.mac-page-ai-policy,.mac-page-case-studies,.mac-page-contact,.mac-page-marketplaces,.mac-page-methods,.mac-page-privacy,.mac-page-terms,[class*="mac-page-evaluation-decks-"]) .nav ul{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:0; background:var(--paper);border-bottom:1px solid var(--sky3); box-shadow:0 12px 26px rgba(31,45,56,.15);padding:6px 0; max-height:calc(100vh - var(--navh));overflow-y:auto} html body:is(.mac-page-about,.mac-page-ai-policy,.mac-page-case-studies,.mac-page-contact,.mac-page-marketplaces,.mac-page-methods,.mac-page-privacy,.mac-page-terms,[class*="mac-page-evaluation-decks-"]) .nav ul.open{display:flex} html body:is(.mac-page-about,.mac-page-ai-policy,.mac-page-case-studies,.mac-page-contact,.mac-page-marketplaces,.mac-page-methods,.mac-page-privacy,.mac-page-terms,[class*="mac-page-evaluation-decks-"]) .nav ul li{width:100%} html body:is(.mac-page-about,.mac-page-ai-policy,.mac-page-case-studies,.mac-page-contact,.mac-page-marketplaces,.mac-page-methods,.mac-page-privacy,.mac-page-terms,[class*="mac-page-evaluation-decks-"]) .nav ul a{display:block;padding:15px 26px;border-bottom:none;border-left:3px solid transparent;font-size:20px} html body:is(.mac-page-about,.mac-page-ai-policy,.mac-page-case-studies,.mac-page-contact,.mac-page-marketplaces,.mac-page-methods,.mac-page-privacy,.mac-page-terms,[class*="mac-page-evaluation-decks-"]) .nav ul a[aria-current="true"]{border-left-color:var(--gold);background:var(--sky)} } /* ========================================================================== SAND BACKGROUND + TEXT CONTRAST (Phase 1a + 1c, Oct 2026) -------------------------------------------------------------------------- Jim's "darker" demo (8 Oct): a sand gradient under a fine grain and lighter- than-white surface colours, on every ported page and post: - Phase 1a: pages whose body carries a mac-page-* class (12 standard pages, /blog/, the blog posts, the decks page). - Phase 1c (Jim, 8 Oct): the 21 case studies too (body class case-), in place of their own tint. Each keeps its own blue, blue-d, gold, ink, ink-soft and --cs* chart colours; only the surfaces change, and only its text colours are darkened where needed. Each page's own palette block is not edited. - Tokens: set on the page's own scope element (body + content wrapper), which beats the page's palette block without !important. Text colours keep 4.5:1 on the darkest pixel text can sit on (the --sky2 bands, and the body with the grain at full strength, #DDD5C4), same hue, darkened only as much as needed: standard pages ink-soft #625B51, gold-text #7F531F, blue (links) #2B655F; case pages their own --gold-text / --ink-soft-text / --blue-text (the tokens style.css uses for text), listed per page below. - Grain: the demo's own inline SVG (feTurbulence, brown at up to 12% opacity), over the gradient. Both scroll with the page (no background-attachment:fixed, which is costly to repaint on phones). - Chart panels keep their own light fills (Jim, 8 Oct) - charts are untouched. - The decks page is matched by its class prefix only (its full address must never appear in a public file). ========================================================================== */ html body[class*="mac-page-"],html body [class*="mac-page-"]{ --paper:#FAF6EC;--sky:#EFE8D8;--sky2:#E6DDC9;--sky3:#D5CAB2;--rule:#DAD1BD;--gold-p:#FBF0D4;--gold:#8F5A18; --ink-soft:#625B51;--gold-text:#7F531F;--blue:#2B655F; } html body:is(.case-appeal-support,.case-art-museum,.case-book-production,.case-catalog-data,.case-citynavigator,.case-course-development,.case-design-retailer,.case-frozen-food-diagnostic,.case-art-museum-consumer-behavior,.case-art-museum-social-plan,.case-design-retailer-consumer-behavior,.case-design-retailer-social-plan,.case-heritage-brand-consumer-behavior,.case-heritage-brand-amazon-opportunity,.case-heritage-brand-content-plan,.case-destination-guides,.case-distressed-ecommerce,.case-document-analysis,.case-heritage-brand-amazon,.case-home-furnishings,.case-logistics,.case-market-research,.case-monster,.case-publishing,.case-social-protocol,.case-social-research,.case-vendor-management,.case-venture-funding,.case-website-performance),html body :is(.case-appeal-support,.case-art-museum,.case-book-production,.case-catalog-data,.case-citynavigator,.case-course-development,.case-design-retailer,.case-frozen-food-diagnostic,.case-art-museum-consumer-behavior,.case-art-museum-social-plan,.case-design-retailer-consumer-behavior,.case-design-retailer-social-plan,.case-heritage-brand-consumer-behavior,.case-heritage-brand-amazon-opportunity,.case-heritage-brand-content-plan,.case-destination-guides,.case-distressed-ecommerce,.case-document-analysis,.case-heritage-brand-amazon,.case-home-furnishings,.case-logistics,.case-market-research,.case-monster,.case-publishing,.case-social-protocol,.case-social-research,.case-vendor-management,.case-venture-funding,.case-website-performance){ --paper:#FAF6EC;--sky:#EFE8D8;--sky2:#E6DDC9;--sky3:#D5CAB2;--rule:#DAD1BD;--gold-p:#FBF0D4; } /* Case pages: text colours on the sand (own hue, darkened only where needed) */ html body.case-appeal-support,html body .case-appeal-support{--gold-text:#864F16;--ink-soft-text:#545D69;--blue-text:#2F5480} html body.case-art-museum,html body .case-art-museum{--gold-text:#775707;--ink-soft-text:#605870;--blue-text:#5B4A7A} html body.case-book-production,html body .case-book-production{--gold-text:#775707;--ink-soft-text:#555D6A;--blue-text:#3B5177} html body.case-catalog-data,html body .case-catalog-data{--gold-text:#775707;--ink-soft-text:#605870;--blue-text:#5B4A7A} html body.case-citynavigator,html body .case-citynavigator{--gold-text:#864F16;--ink-soft-text:#515F5F;--blue-text:#166462} html body.case-course-development,html body .case-course-development{--gold-text:#775707;--ink-soft-text:#5D5D4B;--blue-text:#5A6033} html body.case-design-retailer,html body .case-design-retailer{--gold-text:#775707;--ink-soft-text:#605870;--blue-text:#5B4A7A} html body.case-frozen-food-diagnostic,html body .case-frozen-food-diagnostic{--gold-text:#775707;--ink-soft-text:#605870;--blue-text:#5B4A7A} html body.case-art-museum-consumer-behavior,html body .case-art-museum-consumer-behavior{--gold-text:#775707;--ink-soft-text:#605870;--blue-text:#5B4A7A} html body.case-art-museum-social-plan,html body .case-art-museum-social-plan{--gold-text:#775707;--ink-soft-text:#605870;--blue-text:#5B4A7A} html body.case-design-retailer-consumer-behavior,html body .case-design-retailer-consumer-behavior{--gold-text:#775707;--ink-soft-text:#605870;--blue-text:#5B4A7A} html body.case-design-retailer-social-plan,html body .case-design-retailer-social-plan{--gold-text:#775707;--ink-soft-text:#605870;--blue-text:#5B4A7A} html body.case-heritage-brand-consumer-behavior,html body .case-heritage-brand-consumer-behavior{--gold-text:#775707;--ink-soft-text:#605870;--blue-text:#5B4A7A} html body.case-heritage-brand-amazon-opportunity,html body .case-heritage-brand-amazon-opportunity{--gold-text:#775707;--ink-soft-text:#605870;--blue-text:#5B4A7A} html body.case-heritage-brand-content-plan,html body .case-heritage-brand-content-plan{--gold-text:#775707;--ink-soft-text:#605870;--blue-text:#5B4A7A} html body.case-destination-guides,html body .case-destination-guides{--gold-text:#775707;--ink-soft-text:#665B4A;--blue-text:#815211} html body.case-distressed-ecommerce,html body .case-distressed-ecommerce{--gold-text:#775707;--ink-soft-text:#635B4E;--blue-text:#75572C} html body.case-document-analysis,html body .case-document-analysis{--gold-text:#775707;--ink-soft-text:#555D65;--blue-text:#44525F} html body.case-heritage-brand-amazon,html body .case-heritage-brand-amazon{--gold-text:#775707;--ink-soft-text:#605870;--blue-text:#5B4A7A} html body.case-home-furnishings,html body .case-home-furnishings{--gold-text:#7F531F;--ink-soft-text:#625B51;--blue-text:#2B655F} html body.case-logistics,html body .case-logistics{--gold-text:#775707;--ink-soft-text:#535F53;--blue-text:#3A6638} html body.case-market-research,html body .case-market-research{--gold-text:#775707;--ink-soft-text:#665A50;--blue-text:#90491F} html body.case-monster,html body .case-monster{--gold-text:#775707;--ink-soft-text:#585B73;--blue-text:#4B4E9B} html body.case-publishing,html body .case-publishing{--gold-text:#874E29;--ink-soft-text:#655B4E;--blue-text:#5C3A54} html body.case-social-protocol,html body .case-social-protocol{--gold-text:#775707;--ink-soft-text:#585F4A;--blue-text:#536230} html body.case-social-research,html body .case-social-research{--gold-text:#864F16;--ink-soft-text:#555D6A;--blue-text:#15559E} html body.case-vendor-management,html body .case-vendor-management{--gold-text:#775707;--ink-soft-text:#526054;--blue-text:#3B6541} html body.case-venture-funding,html body .case-venture-funding{--gold-text:#775707;--ink-soft-text:#525F57;--blue-text:#2D674C} html body.case-website-performance,html body .case-website-performance{--gold-text:#855015;--ink-soft-text:#545E64;--blue-text:#2D6376} /* Case pages: the chart cards (.figblock) keep each page's own light paper, as before the sand (manager, 8 Oct) - the charts inside look exactly as they did. */ html body.case-appeal-support .figblock{background:#FCFCFD} html body.case-art-museum .figblock{background:#FCFBF9} html body.case-book-production .figblock{background:#FCFCFA} html body.case-catalog-data .figblock{background:#FCFBF9} html body.case-citynavigator .figblock{background:#FCFDFD} html body.case-course-development .figblock{background:#FDFCF7} html body.case-design-retailer .figblock{background:#FCFBF9} html body.case-destination-guides .figblock{background:#FFFDF8} html body.case-distressed-ecommerce .figblock{background:#FDFCFA} html body.case-document-analysis .figblock{background:#FCFCFC} html body.case-heritage-brand-amazon .figblock{background:#FCFBF9} html body.case-home-furnishings .figblock{background:#FFFDFA} html body.case-logistics .figblock{background:#FCFDFB} html body.case-market-research .figblock{background:#FFFCF8} html body.case-monster .figblock{background:#FCFCFD} html body.case-publishing .figblock{background:#FFFCF7} html body.case-social-protocol .figblock{background:#FDFDFB} html body.case-social-research .figblock{background:#FFFFFF} html body.case-vendor-management .figblock{background:#FCFCFB} html body.case-venture-funding .figblock{background:#FCFDFC} html body.case-website-performance .figblock{background:#FFFDFA} /* Home Furnishings had the standard pages' gold; the demo gives it theirs too */ html body.case-home-furnishings,html body .case-home-furnishings{--gold:#8F5A18} html:has(> body:is([class*="mac-page-"],.case-appeal-support,.case-art-museum,.case-book-production,.case-catalog-data,.case-citynavigator,.case-course-development,.case-design-retailer,.case-frozen-food-diagnostic,.case-art-museum-consumer-behavior,.case-art-museum-social-plan,.case-design-retailer-consumer-behavior,.case-design-retailer-social-plan,.case-heritage-brand-consumer-behavior,.case-heritage-brand-amazon-opportunity,.case-heritage-brand-content-plan,.case-destination-guides,.case-distressed-ecommerce,.case-document-analysis,.case-heritage-brand-amazon,.case-home-furnishings,.case-logistics,.case-market-research,.case-monster,.case-publishing,.case-social-protocol,.case-social-research,.case-vendor-management,.case-venture-funding,.case-website-performance)){background:#F3EDE0} html body:is([class*="mac-page-"],.case-appeal-support,.case-art-museum,.case-book-production,.case-catalog-data,.case-citynavigator,.case-course-development,.case-design-retailer,.case-frozen-food-diagnostic,.case-art-museum-consumer-behavior,.case-art-museum-social-plan,.case-design-retailer-consumer-behavior,.case-design-retailer-social-plan,.case-heritage-brand-consumer-behavior,.case-heritage-brand-amazon-opportunity,.case-heritage-brand-content-plan,.case-destination-guides,.case-distressed-ecommerce,.case-document-analysis,.case-heritage-brand-amazon,.case-home-furnishings,.case-logistics,.case-market-research,.case-monster,.case-publishing,.case-social-protocol,.case-social-research,.case-vendor-management,.case-venture-funding,.case-website-performance){min-height:100vh; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.18 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#F6F1E6 0%,#F3EDE0 45%,#EFE8D8 100%)!important; background-color:#F3EDE0!important} /* Fixed fade, desktop only (Jim's 7 Oct memo: "the fade is fixed to the screen, the grain scrolls with the page"). Wide screens with a mouse only - phones and tablets keep both layers scrolling, as before. Same two layers and grain strength; only the gradient layer is pinned to the window. */ @media (min-width:1041px) and (hover:hover){ html body:is([class*="mac-page-"],.case-appeal-support,.case-art-museum,.case-book-production,.case-catalog-data,.case-citynavigator,.case-course-development,.case-design-retailer,.case-frozen-food-diagnostic,.case-art-museum-consumer-behavior,.case-art-museum-social-plan,.case-design-retailer-consumer-behavior,.case-design-retailer-social-plan,.case-heritage-brand-consumer-behavior,.case-heritage-brand-amazon-opportunity,.case-heritage-brand-content-plan,.case-destination-guides,.case-distressed-ecommerce,.case-document-analysis,.case-heritage-brand-amazon,.case-home-furnishings,.case-logistics,.case-market-research,.case-monster,.case-publishing,.case-social-protocol,.case-social-research,.case-vendor-management,.case-venture-funding,.case-website-performance){background-attachment:scroll,fixed!important} } /* Table headers, as in the demo. The demo's 2px line under the header is drawn as an inset shadow instead of a border, so header rows keep their height (no shift). */ html body:is([class*="mac-page-"],.case-appeal-support,.case-art-museum,.case-book-production,.case-catalog-data,.case-citynavigator,.case-course-development,.case-design-retailer,.case-frozen-food-diagnostic,.case-art-museum-consumer-behavior,.case-art-museum-social-plan,.case-design-retailer-consumer-behavior,.case-design-retailer-social-plan,.case-heritage-brand-consumer-behavior,.case-heritage-brand-amazon-opportunity,.case-heritage-brand-content-plan,.case-destination-guides,.case-distressed-ecommerce,.case-document-analysis,.case-heritage-brand-amazon,.case-home-furnishings,.case-logistics,.case-market-research,.case-monster,.case-publishing,.case-social-protocol,.case-social-research,.case-vendor-management,.case-venture-funding,.case-website-performance) th{background:var(--sky2)!important;color:var(--ink)!important;box-shadow:inset 0 -2px 0 var(--blue)} html body:is([class*="mac-page-"],.case-appeal-support,.case-art-museum,.case-book-production,.case-catalog-data,.case-citynavigator,.case-course-development,.case-design-retailer,.case-frozen-food-diagnostic,.case-art-museum-consumer-behavior,.case-art-museum-social-plan,.case-design-retailer-consumer-behavior,.case-design-retailer-social-plan,.case-heritage-brand-consumer-behavior,.case-heritage-brand-amazon-opportunity,.case-heritage-brand-content-plan,.case-destination-guides,.case-distressed-ecommerce,.case-document-analysis,.case-heritage-brand-amazon,.case-home-furnishings,.case-logistics,.case-market-research,.case-monster,.case-publishing,.case-social-protocol,.case-social-research,.case-vendor-management,.case-venture-funding,.case-website-performance) th a{color:var(--ink)!important} /* White surfaces -> sand, as in the demo: form cards and fields (WPForms), About's logo wall */ html body:is([class*="mac-page-"],.case-appeal-support,.case-art-museum,.case-book-production,.case-catalog-data,.case-citynavigator,.case-course-development,.case-design-retailer,.case-frozen-food-diagnostic,.case-art-museum-consumer-behavior,.case-art-museum-social-plan,.case-design-retailer-consumer-behavior,.case-design-retailer-social-plan,.case-heritage-brand-consumer-behavior,.case-heritage-brand-amazon-opportunity,.case-heritage-brand-content-plan,.case-destination-guides,.case-distressed-ecommerce,.case-document-analysis,.case-heritage-brand-amazon,.case-home-furnishings,.case-logistics,.case-market-research,.case-monster,.case-publishing,.case-social-protocol,.case-social-research,.case-vendor-management,.case-venture-funding,.case-website-performance) .wpforms-container :is(input:not([type=submit]):not([type=hidden]):not([type=checkbox]):not([type=radio]),textarea,select){background-color:var(--paper)} html body:is([class*="mac-page-"],.case-appeal-support,.case-art-museum,.case-book-production,.case-catalog-data,.case-citynavigator,.case-course-development,.case-design-retailer,.case-frozen-food-diagnostic,.case-art-museum-consumer-behavior,.case-art-museum-social-plan,.case-design-retailer-consumer-behavior,.case-design-retailer-social-plan,.case-heritage-brand-consumer-behavior,.case-heritage-brand-amazon-opportunity,.case-heritage-brand-content-plan,.case-destination-guides,.case-distressed-ecommerce,.case-document-analysis,.case-heritage-brand-amazon,.case-home-furnishings,.case-logistics,.case-market-research,.case-monster,.case-publishing,.case-social-protocol,.case-social-research,.case-vendor-management,.case-venture-funding,.case-website-performance) .logowall img{background:var(--paper)} html body:is([class*="mac-page-"],.case-appeal-support,.case-art-museum,.case-book-production,.case-catalog-data,.case-citynavigator,.case-course-development,.case-design-retailer,.case-frozen-food-diagnostic,.case-art-museum-consumer-behavior,.case-art-museum-social-plan,.case-design-retailer-consumer-behavior,.case-design-retailer-social-plan,.case-heritage-brand-consumer-behavior,.case-heritage-brand-amazon-opportunity,.case-heritage-brand-content-plan,.case-destination-guides,.case-distressed-ecommerce,.case-document-analysis,.case-heritage-brand-amazon,.case-home-furnishings,.case-logistics,.case-market-research,.case-monster,.case-publishing,.case-social-protocol,.case-social-research,.case-vendor-management,.case-venture-funding,.case-website-performance) .formcard{background:var(--paper)} html body:is([class*="mac-page-"],.case-appeal-support,.case-art-museum,.case-book-production,.case-catalog-data,.case-citynavigator,.case-course-development,.case-design-retailer,.case-frozen-food-diagnostic,.case-art-museum-consumer-behavior,.case-art-museum-social-plan,.case-design-retailer-consumer-behavior,.case-design-retailer-social-plan,.case-heritage-brand-consumer-behavior,.case-heritage-brand-amazon-opportunity,.case-heritage-brand-content-plan,.case-destination-guides,.case-distressed-ecommerce,.case-document-analysis,.case-heritage-brand-amazon,.case-home-furnishings,.case-logistics,.case-market-research,.case-monster,.case-publishing,.case-social-protocol,.case-social-research,.case-vendor-management,.case-venture-funding,.case-website-performance) :is(.field,.formcard) :is(input:not([type=submit]):not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea){background:var(--paper)} /* ========================================================================== MARKETPLACES CSS REPAIR (8 Oct) The Marketplaces page CSS (the client's file, ported as-is) has a stray fragment + an unclosed @media(max-width:820px){, so browsers drop every rule after it: at all widths the hero photo was 900px wide, the page scrolled sideways and the nav was not fixed. These are those dropped rules, in their order, scoped to this page with one extra type selector so they win exactly where they would have won by coming last. Generated by tools/marketplaces-css-fix.py from wp-blocks/marketplaces.css. ========================================================================== */ @media (max-width:1040px){ html:root:where(:has(> body.mac-page-marketplaces)){--navh:72px} html :where(body.mac-page-marketplaces) .nav .wrap{gap:12px;padding:0 18px;min-height:72px;flex-wrap:nowrap} html :where(body.mac-page-marketplaces) .logo{flex:0 1 auto;min-width:0;overflow:hidden} html :where(body.mac-page-marketplaces) .logo img{height:auto;width:auto;max-height:40px;max-width:100%} html :where(body.mac-page-marketplaces) .burger{display:flex;flex:0 0 auto;margin-left:auto} } @media (max-width:560px){ html:root:where(:has(> body.mac-page-marketplaces)){--navh:64px} html :where(body.mac-page-marketplaces) .nav .wrap{padding:0 14px;min-height:64px} html :where(body.mac-page-marketplaces) .logo img{max-height:32px} html :where(body.mac-page-marketplaces) .burger{width:44px;height:38px;padding:0 10px} html :where(body.mac-page-marketplaces) .nav ul a{font-size:19px;padding:14px 20px} } html :where(body.mac-page-marketplaces) .nav{position:fixed;top:0;left:0;right:0;z-index:1000} html body:where(.mac-page-marketplaces){padding-top:var(--navh)} html :where(body.mac-page-marketplaces) .hhero .pic{text-align:center} html :where(body.mac-page-marketplaces) .hhero .heropic{display:block;width:100%;max-width:330px;height:auto;margin:0 auto; border:1px solid var(--rule)} @media (max-width:900px){ html :where(body.mac-page-marketplaces) .hhero .heropic{max-width:260px} } html :where(body.mac-page-marketplaces) .nav{position:fixed;top:0;left:0;right:0;z-index:1000} html body:where(.mac-page-marketplaces){padding-top:var(--navh)} html :where(body.mac-page-marketplaces) figure.chartnarrow{display:none;margin:30px 0;padding:0} html :where(body.mac-page-marketplaces) figure.chartnarrow svg{display:block;width:100%;height:auto; border:1px solid var(--rule);background:var(--paper)} @media (max-width:760px){ html:is(html):where(:has(> body.mac-page-marketplaces)), html body:where(.mac-page-marketplaces){overflow-x:hidden;max-width:100%} html :where(body.mac-page-marketplaces) img, html :where(body.mac-page-marketplaces) svg, html :where(body.mac-page-marketplaces) table, html :where(body.mac-page-marketplaces) pre, html :where(body.mac-page-marketplaces) iframe{max-width:100%} html :where(body.mac-page-marketplaces) figure.figfull, html :where(body.mac-page-marketplaces) figure.figfull.big{width:100%;max-width:100%;margin-left:0; margin-right:0;transform:none;overflow-x:visible} html :where(body.mac-page-marketplaces) figure.figfull svg, html :where(body.mac-page-marketplaces) figure svg, html :where(body.mac-page-marketplaces) .fig svg, html :where(body.mac-page-marketplaces) .figure svg, html :where(body.mac-page-marketplaces) figure.figfull.big svg{min-width:0;width:100%;height:auto} html :where(body.mac-page-marketplaces) figure.figfull:after{content:none} html :where(body.mac-page-marketplaces) figure.figfull.chartwide{display:none} html :where(body.mac-page-marketplaces) figure.chartnarrow{display:block} html :where(body.mac-page-marketplaces) table, html :where(body.mac-page-marketplaces) .scaletbl{min-width:0;width:100%;font-size:16px} html :where(body.mac-page-marketplaces) table, html :where(body.mac-page-marketplaces) table tbody, html :where(body.mac-page-marketplaces) table tr, html :where(body.mac-page-marketplaces) table td, html :where(body.mac-page-marketplaces) table th, html :where(body.mac-page-marketplaces) .scaletbl, html :where(body.mac-page-marketplaces) .scaletbl tbody, html :where(body.mac-page-marketplaces) .scaletbl tr, html :where(body.mac-page-marketplaces) .scaletbl td, html :where(body.mac-page-marketplaces) .scaletbl th{display:block;width:100%} html :where(body.mac-page-marketplaces) table thead, html :where(body.mac-page-marketplaces) .scaletbl thead{display:none} html :where(body.mac-page-marketplaces) table tr, html :where(body.mac-page-marketplaces) .scaletbl tr{border-bottom:2px solid var(--rule);padding:10px 0} html :where(body.mac-page-marketplaces) table td, html :where(body.mac-page-marketplaces) .scaletbl td{border-bottom:none;padding:5px 0;width:100%} html :where(body.mac-page-marketplaces) table td:first-child, html :where(body.mac-page-marketplaces) .scaletbl td:first-child{width:100%;padding-top:12px; font-weight:700;color:var(--blue-d)} html :where(body.mac-page-marketplaces) .scaletbl td.n{text-align:left;font-size:20px} html :where(body.mac-page-marketplaces) .scaletbl tr.grp td{background:var(--sky2);padding:8px 10px} html :where(body.mac-page-marketplaces) figure.lead, html :where(body.mac-page-marketplaces) figure.lead.left, html :where(body.mac-page-marketplaces) figure.lead.right, html :where(body.mac-page-marketplaces) figure.inline, html :where(body.mac-page-marketplaces) figure.inline.left, html :where(body.mac-page-marketplaces) figure.inline.right, html :where(body.mac-page-marketplaces) figure.shot, html :where(body.mac-page-marketplaces) figure.shot.left, html :where(body.mac-page-marketplaces) figure.shot.right, html :where(body.mac-page-marketplaces) figure.sortfig, html :where(body.mac-page-marketplaces) figure.spoolfig, html :where(body.mac-page-marketplaces) figure.gradfig, html :where(body.mac-page-marketplaces) figure.nostpic, html :where(body.mac-page-marketplaces) figure.heroshot, html :where(body.mac-page-marketplaces) .me2 figure{float:none;width:100%;max-width:320px;margin:24px auto} html :where(body.mac-page-marketplaces) .cards, html :where(body.mac-page-marketplaces) .quotes, html :where(body.mac-page-marketplaces) .vidrow, html :where(body.mac-page-marketplaces) .hlgrid, html :where(body.mac-page-marketplaces) .strip, html :where(body.mac-page-marketplaces) .doors, html :where(body.mac-page-marketplaces) .reflist{display:block} html :where(body.mac-page-marketplaces) .cards article, html :where(body.mac-page-marketplaces) .quotes>figure, html :where(body.mac-page-marketplaces) .vidrow .vid, html :where(body.mac-page-marketplaces) .strip>div{width:100%;margin:0 0 18px} html :where(body.mac-page-marketplaces) .reflist li{margin:0 0 16px} html :where(body.mac-page-marketplaces) p, html :where(body.mac-page-marketplaces) li, html :where(body.mac-page-marketplaces) td, html :where(body.mac-page-marketplaces) th, html :where(body.mac-page-marketplaces) h1, html :where(body.mac-page-marketplaces) h2, html :where(body.mac-page-marketplaces) h3, html :where(body.mac-page-marketplaces) h4, html :where(body.mac-page-marketplaces) figcaption, html :where(body.mac-page-marketplaces) blockquote{overflow-wrap:anywhere} } @media (max-width:430px){ html :where(body.mac-page-marketplaces) .wrap{padding-left:16px;padding-right:16px} html :where(body.mac-page-marketplaces) table td, html :where(body.mac-page-marketplaces) .scaletbl td{font-size:16px} } @media (max-width:760px){ html :where(body.mac-page-marketplaces) td, html :where(body.mac-page-marketplaces) th, html :where(body.mac-page-marketplaces) .scaletbl td, html :where(body.mac-page-marketplaces) .scaletbl th, html :where(body.mac-page-marketplaces) .scaletbl td.n, html :where(body.mac-page-marketplaces) .scaletbl th.n, html :where(body.mac-page-marketplaces) table.reftable td, html :where(body.mac-page-marketplaces) table.reftable th{white-space:normal} html :where(body.mac-page-marketplaces) table, html :where(body.mac-page-marketplaces) table.reftable, html :where(body.mac-page-marketplaces) .scaletbl, html :where(body.mac-page-marketplaces) .dtable{table-layout:auto} html :where(body.mac-page-marketplaces) figure svg, html :where(body.mac-page-marketplaces) .figfull svg, html :where(body.mac-page-marketplaces) .chartnarrow svg{min-width:0} } @media (max-width:760px){ html :where(body.mac-page-marketplaces) table th, html :where(body.mac-page-marketplaces) .scaletbl th, html :where(body.mac-page-marketplaces) table.reftable th, html :where(body.mac-page-marketplaces) .dtable th, html :where(body.mac-page-marketplaces) .cases th{display:none} html :where(body.mac-page-marketplaces) table tr:has(> th), html :where(body.mac-page-marketplaces) .scaletbl tr:has(> th), html :where(body.mac-page-marketplaces) table.reftable tr:has(> th){display:none} html :where(body.mac-page-marketplaces) .hide-sm{display:none} } @media (max-width:760px){ html :where(body.mac-page-marketplaces) table.cases td:first-child, html :where(body.mac-page-marketplaces) table.cases th:first-child, html :where(body.mac-page-marketplaces) table.deftable td:first-child, html :where(body.mac-page-marketplaces) .scaletbl td:first-child, html :where(body.mac-page-marketplaces) table.reftable td:first-child{width:100%} html :where(body.mac-page-marketplaces) table.cases td, html :where(body.mac-page-marketplaces) table.cases th{display:block;width:100%} html :where(body.mac-page-marketplaces) p, html :where(body.mac-page-marketplaces) li, html :where(body.mac-page-marketplaces) td, html :where(body.mac-page-marketplaces) th, html :where(body.mac-page-marketplaces) h1, html :where(body.mac-page-marketplaces) h2, html :where(body.mac-page-marketplaces) h3, html :where(body.mac-page-marketplaces) h4, html :where(body.mac-page-marketplaces) figcaption, html :where(body.mac-page-marketplaces) blockquote{overflow-wrap:break-word;word-break:normal} html :where(body.mac-page-marketplaces) table tr:has(> th), html :where(body.mac-page-marketplaces) .scaletbl tr:has(> th), html :where(body.mac-page-marketplaces) table.reftable tr:has(> th), html :where(body.mac-page-marketplaces) table.cases tr:has(> th){display:flex;flex-wrap:wrap;gap:16px; background:var(--sky);border-bottom:2px solid var(--rule);padding:9px 12px} html :where(body.mac-page-marketplaces) table th, html :where(body.mac-page-marketplaces) .scaletbl th, html :where(body.mac-page-marketplaces) table.reftable th, html :where(body.mac-page-marketplaces) .dtable th, html :where(body.mac-page-marketplaces) table.cases th{display:inline-block;width:auto;background:none;color:var(--blue-d); padding:0;font-size:14px;letter-spacing:.06em;text-transform:uppercase; border:none;white-space:nowrap} html :where(body.mac-page-marketplaces) th.hide-sm, html :where(body.mac-page-marketplaces) td.hide-sm, html :where(body.mac-page-marketplaces) .hide-sm{display:none} } html :where(body.mac-page-marketplaces) figure.lead img, html :where(body.mac-page-marketplaces) figure.shot img, html :where(body.mac-page-marketplaces) figure.inline img, html :where(body.mac-page-marketplaces) figure.sortfig img, html :where(body.mac-page-marketplaces) figure.spoolfig img, html :where(body.mac-page-marketplaces) figure.gradfig img, html :where(body.mac-page-marketplaces) figure.heroshot img, html :where(body.mac-page-marketplaces) .nostpic img, html :where(body.mac-page-marketplaces) .collage img, html :where(body.mac-page-marketplaces) .me2 figure img, html :where(body.mac-page-marketplaces) .ridersfig img, html :where(body.mac-page-marketplaces) .logowall img, html :where(body.mac-page-marketplaces) .life-img, html :where(body.mac-page-marketplaces) .cell-img, html :where(body.mac-page-marketplaces) .road-sign{box-shadow:9px 11px 22px -8px rgba(43,41,38,.34); border-radius:2px;} html :where(body.mac-page-marketplaces) .hhero .heroart, html :where(body.mac-page-marketplaces) .hhero .heroseal, html :where(body.mac-page-marketplaces) .logo img{box-shadow:none} @media (max-width:760px){ html :where(body.mac-page-marketplaces) figure.lead img, html :where(body.mac-page-marketplaces) figure.shot img, html :where(body.mac-page-marketplaces) figure.inline img, html :where(body.mac-page-marketplaces) figure.sortfig img, html :where(body.mac-page-marketplaces) figure.spoolfig img, html :where(body.mac-page-marketplaces) figure.gradfig img, html :where(body.mac-page-marketplaces) figure.heroshot img, html :where(body.mac-page-marketplaces) .nostpic img, html :where(body.mac-page-marketplaces) .collage img, html :where(body.mac-page-marketplaces) .me2 figure img, html :where(body.mac-page-marketplaces) .ridersfig img{box-shadow:6px 7px 15px -6px rgba(43,41,38,.30);} } html :where(body.mac-page-marketplaces) .formcard button.btn{font:inherit;border:none;cursor:pointer} html :where(body.mac-page-marketplaces) .formcard button.btn::-moz-focus-inner{border:0;padding:0}