/* /m/gov.css — generated by cms-import/build.js. The Pidoxa design system as this section uses it: tokens, reset and components. @font-face lives in the theme stylesheet, shared by all four modules, so it is not repeated here. */ /* Pidoxa type — licensed families served from the brand's Adobe Fonts (Typekit) kit. Kit: https://use.typekit.net/pwg7aux.css tt-travels-next 100–900, roman + italic (display / headings) tt-travels-next-outline 900, roman + italic (display accent only) futura-pt 300–700 (body text) Space Mono (Google) is the data/metadata face; nothing else is loaded. */ /* * The Typekit service used to deliver this font or fonts for use on websites * is provided by Adobe and is subject to these Terms of Use * http://www.adobe.com/products/eulas/tou_typekit. For font license * information, see the list below. * * futura-pt: * - http://typekit.com/eulas/00000000000000007758da2b * - http://typekit.com/eulas/00000000000000007758da2c * - http://typekit.com/eulas/000000000000000077586b60 * - http://typekit.com/eulas/000000000000000077586b5a * - http://typekit.com/eulas/000000000000000077586b5c * - http://typekit.com/eulas/000000000000000077586b59 * - http://typekit.com/eulas/000000000000000077586b55 * - http://typekit.com/eulas/000000000000000077586b5e * - http://typekit.com/eulas/000000000000000077586b5b * - http://typekit.com/eulas/000000000000000077586b5d * - http://typekit.com/eulas/00000000000000007735d694 * - http://typekit.com/eulas/000000000000000077586b57 * futura-pt-bold: * - http://typekit.com/eulas/000000000000000077586b5f * - http://typekit.com/eulas/000000000000000077586b58 * helvetica-lt-pro: * - http://typekit.com/eulas/0000000000000000775aa95b * - http://typekit.com/eulas/0000000000000000775aa963 * - http://typekit.com/eulas/0000000000000000775aa962 * - http://typekit.com/eulas/0000000000000000775aa95d * - http://typekit.com/eulas/0000000000000000775aa95c * - http://typekit.com/eulas/0000000000000000775c6969 * tt-travels-next: * - http://typekit.com/eulas/0000000000000000774f76f3 * - http://typekit.com/eulas/0000000000000000774f76f2 * - http://typekit.com/eulas/0000000000000000774f76f7 * - http://typekit.com/eulas/0000000000000000774f76f4 * - http://typekit.com/eulas/0000000000000000774f76f5 * - http://typekit.com/eulas/0000000000000000774f76f6 * - http://typekit.com/eulas/0000000000000000774f76f9 * - http://typekit.com/eulas/0000000000000000774f76f8 * - http://typekit.com/eulas/0000000000000000774f76fb * - http://typekit.com/eulas/0000000000000000774f76fc * - http://typekit.com/eulas/0000000000000000774f76ff * - http://typekit.com/eulas/0000000000000000774f76fa * - http://typekit.com/eulas/0000000000000000774f76fe * - http://typekit.com/eulas/0000000000000000774f76fd * - http://typekit.com/eulas/0000000000000000774f7701 * - http://typekit.com/eulas/0000000000000000774f7705 * - http://typekit.com/eulas/0000000000000000774f7700 * - http://typekit.com/eulas/0000000000000000774f7702 * tt-travels-next-outline: * - http://typekit.com/eulas/0000000000000000774f7704 * - http://typekit.com/eulas/0000000000000000774f7703 * * © 2009-2026 Adobe Systems Incorporated. All Rights Reserved. */ /*{"last_published":"2026-09-03 16:39:29 UTC"}*/ /**/ .tk-futura-pt { font-family: "futura-pt",sans-serif; } .tk-futura-pt-bold { font-family: "futura-pt-bold",sans-serif; } .tk-tt-travels-next-outline { font-family: "tt-travels-next-outline",sans-serif; } .tk-tt-travels-next { font-family: "tt-travels-next",sans-serif; } .tk-helvetica-lt-pro { font-family: "helvetica-lt-pro",sans-serif; } /* vietnamese */ /* latin-ext */ /* latin */ /* vietnamese */ /* latin-ext */ /* latin */ /* Alternative display face, shipped as a project file. Bricolage Grotesque variable (opsz, wdth, wght) — see --font-display-alt and the .pdx-alt-display scope in typography.css. */ .sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent); border:1px solid color-mix(in srgb,currentColor 50%,transparent); border-radius:2px;box-sizing:border-box;overflow:hidden} @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}} html.sc-dc-streaming .sc-placeholder, html.sc-dc-streaming .sc-interp.sc-missing{position:relative; background:color-mix(in srgb,currentColor 5%,transparent); border-color:transparent} html.sc-dc-streaming .sc-placeholder::before, html.sc-dc-streaming .sc-interp.sc-missing::before{content:''; position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%); background-size:400% 100%;animation:sc-shine 1.4s ease infinite} html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before, html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none; background:color-mix(in srgb,currentColor 8%,transparent)} .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace; color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word} .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden; vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5); border-radius:2px;box-sizing:border-box;color:transparent; user-select:none} .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em; color:color-mix(in srgb,currentColor 50%,transparent); background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px; padding:0 3px} .sc-host.sc-has-error{position:relative} .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch; padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace; border-radius:4px;white-space:pre-wrap;pointer-events:none} /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both in sync until dc-runtime regains a build step. */ @media print { @page { margin: 0.5cm; } figure, table { break-inside: avoid; } #dc-root, #dc-root > .sc-host { height: auto; } *, *::before, *::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; } } :root{ /* --- Primary: black & white foundations. Used as large background fields. --- */ --pdx-ink:#141414;/* brand black */ --pdx-ink-900:#241C23; --pdx-ink-800:#332A31; --pdx-ink-700:#4A4048; --pdx-ink-600:#6B6069; --pdx-ink-500:#8E838C; --pdx-ink-400:#B3AAB1; --pdx-ink-300:#D2CBD0; --pdx-ink-200:#E6E1E4; --pdx-ink-100:#F2EFF1; --pdx-paper:#F7F5F6;/* off-white page */ --pdx-white:#FFFFFF; /* --- Secondary: accent colors. One at a time, never a rainbow in one view. --- */ --pdx-flare:#ed4d3a;/* red-orange, the default accent */ --pdx-magenta:#e34696; --pdx-aqua:#a8d8d5; --pdx-citron:#cede69; --pdx-mint:#79c393; --pdx-indigo:#4c52a0; --pdx-violet:#8661a8; /* --- Service-line accents (one accent owns one service) --- */ --pdx-service-creative:var(--pdx-flare); --pdx-service-marketing:var(--pdx-magenta); --pdx-service-development:var(--pdx-indigo); --pdx-service-security:var(--pdx-mint); --pdx-service-web:var(--pdx-aqua); /* --- Semantic aliases: light surface (default) --- */ --text-strong:var(--pdx-ink); --text-body:var(--pdx-ink-800); --text-muted:var(--pdx-ink-600); --text-faint:var(--pdx-ink-500); --text-inverse:var(--pdx-paper); --text-accent:var(--pdx-flare); --text-link:var(--pdx-ink); --text-link-hover:var(--pdx-flare); --surface-page:var(--pdx-paper); --surface-card:var(--pdx-white); --surface-sunken:var(--pdx-ink-100); --surface-raised:var(--pdx-white); --surface-inverse:var(--pdx-ink); --surface-accent:var(--pdx-flare); --border-hairline:var(--pdx-ink-200); --border-default:var(--pdx-ink-300); --border-strong:var(--pdx-ink); --border-focus:var(--pdx-flare); --accent:var(--pdx-flare); --accent-contrast:var(--pdx-white); /* --- Semantic states --- */ --state-success:var(--pdx-mint); --state-success-ink:#0B4F2C; --state-warning:var(--pdx-citron); --state-warning-ink:#43490F; --state-danger:var(--pdx-flare); --state-danger-ink:#6B1409; --state-info:var(--pdx-indigo); --state-info-ink:#1D204B; --overlay-scrim:rgba(20,20,20,.72); --overlay-glass:rgba(247,245,246,.06); } /* Inverse scope: put class="pdx-dark" on any black-field section. */ .pdx-dark{ --text-strong:var(--pdx-paper); --text-body:var(--pdx-ink-200); --text-muted:var(--pdx-ink-400); --text-faint:var(--pdx-ink-500); --text-inverse:var(--pdx-ink); --text-link:var(--pdx-paper); --text-link-hover:var(--pdx-flare); --surface-page:var(--pdx-ink); --surface-card:var(--pdx-ink-900); --surface-sunken:#0D0D0D; --surface-raised:var(--pdx-ink-800); --surface-inverse:var(--pdx-paper); --border-hairline:rgba(247,245,246,.14); --border-default:rgba(247,245,246,.26); --border-strong:var(--pdx-paper); --accent-contrast:var(--pdx-ink); } :root{ --font-display:'tt-travels-next','Helvetica Neue',Helvetica,Arial,sans-serif; --font-display-alt:'Bricolage Grotesque','tt-travels-next',sans-serif; --font-display-outline:'tt-travels-next-outline','tt-travels-next',sans-serif; --font-text:'futura-pt','futura-pt-bold','Futura PT','Futura',Avenir,'Century Gothic',sans-serif; /* Adobe splits Futura PT: 'futura-pt' carries 300/400/500 and 'futura-pt-bold' is a separate family holding the real 700. Both are listed above so the browser can reach the true bold cut instead of synthesising one. Use --font-text-bold when setting 700. */ --font-text-bold:'futura-pt-bold','futura-pt','Futura PT',Avenir,sans-serif; --font-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* Weights actually used. Display runs heavy; text stays regular. futura-pt ships Light 300 / Book 400 / Medium 500 in the kit; 700 comes from the separate futura-pt-bold family, so pair --fw-text-bold with --font-text-bold. */ --fw-display:800; /* @kind font */ /* TT Travels Next ExtraBold */ --fw-subhead:600; /* @kind font */ /* TT Travels Next DemiBold */ --fw-text:400; /* @kind font */ --fw-text-medium:500; /* @kind font */ /* Futura PT Medium — labels, buttons, eyebrows */ --fw-text-light:300; /* @kind font */ --fw-text-bold:700; /* @kind font */ /* Futura PT Heavy */ --fw-text-demi:600; /* @kind font */ /* Futura PT Demi */ /* Display scale. Swiss/large-typography: headlines are set tight and big. */ --type-display-1:clamp(3.5rem,9vw,8.5rem); --type-display-2:clamp(2.75rem,6.5vw,5.5rem); --type-display-3:clamp(2rem,4.2vw,3.5rem); --type-heading-1:2.25rem; --type-heading-2:1.75rem; --type-heading-3:1.3125rem; --type-body-lg:1.1875rem; --type-body:1rem; --type-body-sm:.9375rem; --type-caption:.8125rem; --type-label:.6875rem; --lh-display:.92; /* @kind font */ --lh-heading:1.08; /* @kind font */ --lh-subhead:1.2; /* @kind font */ --lh-body:1.55; /* @kind font */ --lh-tight:1.3; /* @kind font */ --ls-display:-.035em; /* @kind font */ --ls-heading:-.02em; /* @kind font */ --ls-body:.005em; /* @kind font */ /* Futura's small x-height wants a hair of tracking at text sizes */ --ls-label:.14em;/* all-caps labels only */ --ls-eyebrow:.2em; /* @kind font */ /* Composite roles */ --text-eyebrow-transform:uppercase; /* @kind other */ } /* Alternative display face. Put class="pdx-alt-display" on , a section or a slide to swap TT Travels Next for Bricolage Grotesque; every display token follows. Bricolage sets a little wider, so it takes less negative tracking. */ .pdx-alt-display{ --font-display:var(--font-display-alt); --ls-display:-.025em; /* @kind font */ --ls-heading:-.015em; /* @kind font */ } :root{ /* 4px base, doubling at the top end. */ --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; --space-11:192px; --gutter:24px; --section-y:clamp(64px,9vw,160px); /* @kind spacing */ --container-max:1320px; --container-narrow:720px; --grid-cols:12; /* @kind other */ } :root{ /* Geometry is square by default. Radius is the exception, not the rule. */ --radius-0:0px; --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-pill:999px;/* tags, badges, small counters only */ /* Structure comes from hairlines, not shadows. */ --stroke-hairline:1px; /* @kind spacing */ --stroke-medium:2px; /* @kind spacing */ --stroke-heavy:3px; /* @kind spacing */ --rule-thick:6px;/* the heavy section rule under display type */ /* Two shadows total. Both only for things that float above the page. */ --shadow-menu:0 4px 16px rgba(20,20,20,.10),0 1px 0 rgba(20,20,20,.06); --shadow-modal:0 24px 64px rgba(20,20,20,.28); --shadow-none:none; /* Focus is always a visible offset ring in the accent. */ --focus-ring:0 0 0 2px var(--surface-page),0 0 0 4px var(--accent); /* Motion: rational, quick, no bounce, no overshoot. */ --ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */ --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */ --ease-in:cubic-bezier(.7,0,.84,0); /* @kind other */ --dur-instant:90ms; /* @kind other */ --dur-fast:160ms; /* @kind other */ --dur-base:240ms; /* @kind other */ --dur-slow:420ms; /* @kind other */ --dur-reveal:640ms; /* @kind other */ /* Blur is used sparingly: sticky headers over content, scrims. */ --blur-header:saturate(140%) blur(14px); /* @kind other */ --blur-scrim:blur(4px); /* @kind other */ } @media (prefers-reduced-motion:reduce){:root{--dur-instant:1ms; /* @kind other */--dur-fast:1ms; /* @kind other */--dur-base:1ms; /* @kind other */--dur-slow:1ms; /* @kind other */--dur-reveal:1ms /* @kind other */}} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-text);font-size:var(--type-body);line-height:var(--lh-body);font-weight:var(--fw-text);-webkit-font-smoothing:antialiased;text-wrap:pretty} h1,h2,h3,h4{color:var(--text-strong);margin:0;text-wrap:balance} h1,h2,h3{font-family:var(--font-display)} h1{font-weight:var(--fw-display);font-size:var(--type-display-2);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase} h2{font-weight:var(--fw-display);font-size:var(--type-heading-1);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);text-transform:uppercase} h3{font-weight:var(--fw-subhead);font-size:var(--type-heading-2);line-height:var(--lh-subhead);letter-spacing:var(--ls-heading);text-transform:uppercase} h4{font-family:var(--font-text);font-weight:var(--fw-text-bold);font-size:var(--type-heading-3);line-height:var(--lh-tight)} p{margin:0} a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-standard)} a:hover{color:var(--text-link-hover)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus-ring)} ::selection{background:var(--accent);color:var(--accent-contrast)} img,svg,video{display:block;max-width:100%} hr{border:none;border-top:var(--stroke-hairline) solid var(--border-hairline);margin:0} /* Type roles as classes, for cards, kits and slides. */ .pdx-display{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--type-display-1);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--text-strong)} .pdx-eyebrow{font-family:var(--font-text);font-weight:var(--fw-text-medium);font-size:var(--type-label);line-height:1;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)} .pdx-lede{font-size:var(--type-body-lg);line-height:1.45;color:var(--text-body)} .pdx-mono{font-family:var(--font-mono);font-size:var(--type-caption);letter-spacing:.02em} .pdx-rule{border-top:var(--rule-thick) solid var(--border-strong)} .pdx-container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)} /* Pidoxa type — licensed families served from the brand's Adobe Fonts (Typekit) kit. Kit: https://use.typekit.net/pwg7aux.css tt-travels-next 100–900, roman + italic (display / headings) tt-travels-next-outline 900, roman + italic (display accent only) futura-pt 300–700 (body text) Space Mono (Google) is the data/metadata face; nothing else is loaded. */ /* * The Typekit service used to deliver this font or fonts for use on websites * is provided by Adobe and is subject to these Terms of Use * http://www.adobe.com/products/eulas/tou_typekit. For font license * information, see the list below. * * futura-pt: * - http://typekit.com/eulas/00000000000000007758da2b * - http://typekit.com/eulas/00000000000000007758da2c * - http://typekit.com/eulas/000000000000000077586b60 * - http://typekit.com/eulas/000000000000000077586b5a * - http://typekit.com/eulas/000000000000000077586b5c * - http://typekit.com/eulas/000000000000000077586b59 * - http://typekit.com/eulas/000000000000000077586b55 * - http://typekit.com/eulas/000000000000000077586b5e * - http://typekit.com/eulas/000000000000000077586b5b * - http://typekit.com/eulas/000000000000000077586b5d * - http://typekit.com/eulas/00000000000000007735d694 * - http://typekit.com/eulas/000000000000000077586b57 * futura-pt-bold: * - http://typekit.com/eulas/000000000000000077586b5f * - http://typekit.com/eulas/000000000000000077586b58 * helvetica-lt-pro: * - http://typekit.com/eulas/0000000000000000775aa95b * - http://typekit.com/eulas/0000000000000000775aa963 * - http://typekit.com/eulas/0000000000000000775aa962 * - http://typekit.com/eulas/0000000000000000775aa95d * - http://typekit.com/eulas/0000000000000000775aa95c * - http://typekit.com/eulas/0000000000000000775c6969 * tt-travels-next: * - http://typekit.com/eulas/0000000000000000774f76f3 * - http://typekit.com/eulas/0000000000000000774f76f2 * - http://typekit.com/eulas/0000000000000000774f76f7 * - http://typekit.com/eulas/0000000000000000774f76f4 * - http://typekit.com/eulas/0000000000000000774f76f5 * - http://typekit.com/eulas/0000000000000000774f76f6 * - http://typekit.com/eulas/0000000000000000774f76f9 * - http://typekit.com/eulas/0000000000000000774f76f8 * - http://typekit.com/eulas/0000000000000000774f76fb * - http://typekit.com/eulas/0000000000000000774f76fc * - http://typekit.com/eulas/0000000000000000774f76ff * - http://typekit.com/eulas/0000000000000000774f76fa * - http://typekit.com/eulas/0000000000000000774f76fe * - http://typekit.com/eulas/0000000000000000774f76fd * - http://typekit.com/eulas/0000000000000000774f7701 * - http://typekit.com/eulas/0000000000000000774f7705 * - http://typekit.com/eulas/0000000000000000774f7700 * - http://typekit.com/eulas/0000000000000000774f7702 * tt-travels-next-outline: * - http://typekit.com/eulas/0000000000000000774f7704 * - http://typekit.com/eulas/0000000000000000774f7703 * * © 2009-2026 Adobe Systems Incorporated. All Rights Reserved. */ /*{"last_published":"2026-09-03 16:39:29 UTC"}*/ /**/ .tk-futura-pt { font-family: "futura-pt",sans-serif; } .tk-futura-pt-bold { font-family: "futura-pt-bold",sans-serif; } .tk-tt-travels-next-outline { font-family: "tt-travels-next-outline",sans-serif; } .tk-tt-travels-next { font-family: "tt-travels-next",sans-serif; } .tk-helvetica-lt-pro { font-family: "helvetica-lt-pro",sans-serif; } /* vietnamese */ /* latin-ext */ /* latin */ /* vietnamese */ /* latin-ext */ /* latin */ /* Alternative display face, shipped as a project file. Bricolage Grotesque variable (opsz, wdth, wght) — see --font-display-alt and the .pdx-alt-display scope in typography.css. */ :root{ /* --- Primary: black & white foundations. Used as large background fields. --- */ --pdx-ink:#141414;/* brand black */ --pdx-ink-900:#241C23; --pdx-ink-800:#332A31; --pdx-ink-700:#4A4048; --pdx-ink-600:#6B6069; --pdx-ink-500:#8E838C; --pdx-ink-400:#B3AAB1; --pdx-ink-300:#D2CBD0; --pdx-ink-200:#E6E1E4; --pdx-ink-100:#F2EFF1; --pdx-paper:#F7F5F6;/* off-white page */ --pdx-white:#FFFFFF; /* --- Secondary: accent colors. One at a time, never a rainbow in one view. --- */ --pdx-flare:#ed4d3a;/* red-orange, the default accent */ --pdx-magenta:#e34696; --pdx-aqua:#a8d8d5; --pdx-citron:#cede69; --pdx-mint:#79c393; --pdx-indigo:#4c52a0; --pdx-violet:#8661a8; /* --- Service-line accents (one accent owns one service) --- */ --pdx-service-creative:var(--pdx-flare); --pdx-service-marketing:var(--pdx-magenta); --pdx-service-development:var(--pdx-indigo); --pdx-service-security:var(--pdx-mint); --pdx-service-web:var(--pdx-aqua); /* --- Semantic aliases: light surface (default) --- */ --text-strong:var(--pdx-ink); --text-body:var(--pdx-ink-800); --text-muted:var(--pdx-ink-600); --text-faint:var(--pdx-ink-500); --text-inverse:var(--pdx-paper); --text-accent:var(--pdx-flare); --text-link:var(--pdx-ink); --text-link-hover:var(--pdx-flare); --surface-page:var(--pdx-paper); --surface-card:var(--pdx-white); --surface-sunken:var(--pdx-ink-100); --surface-raised:var(--pdx-white); --surface-inverse:var(--pdx-ink); --surface-accent:var(--pdx-flare); --border-hairline:var(--pdx-ink-200); --border-default:var(--pdx-ink-300); --border-strong:var(--pdx-ink); --border-focus:var(--pdx-flare); --accent:var(--pdx-flare); --accent-contrast:var(--pdx-white); /* --- Semantic states --- */ --state-success:var(--pdx-mint); --state-success-ink:#0B4F2C; --state-warning:var(--pdx-citron); --state-warning-ink:#43490F; --state-danger:var(--pdx-flare); --state-danger-ink:#6B1409; --state-info:var(--pdx-indigo); --state-info-ink:#1D204B; --overlay-scrim:rgba(20,20,20,.72); --overlay-glass:rgba(247,245,246,.06); } /* Inverse scope: put class="pdx-dark" on any black-field section. */ .pdx-dark{ --text-strong:var(--pdx-paper); --text-body:var(--pdx-ink-200); --text-muted:var(--pdx-ink-400); --text-faint:var(--pdx-ink-500); --text-inverse:var(--pdx-ink); --text-link:var(--pdx-paper); --text-link-hover:var(--pdx-flare); --surface-page:var(--pdx-ink); --surface-card:var(--pdx-ink-900); --surface-sunken:#0D0D0D; --surface-raised:var(--pdx-ink-800); --surface-inverse:var(--pdx-paper); --border-hairline:rgba(247,245,246,.14); --border-default:rgba(247,245,246,.26); --border-strong:var(--pdx-paper); --accent-contrast:var(--pdx-ink); } :root{ --font-display:'tt-travels-next','Helvetica Neue',Helvetica,Arial,sans-serif; --font-display-alt:'Bricolage Grotesque','tt-travels-next',sans-serif; --font-display-outline:'tt-travels-next-outline','tt-travels-next',sans-serif; --font-text:'futura-pt','futura-pt-bold','Futura PT','Futura',Avenir,'Century Gothic',sans-serif; /* Adobe splits Futura PT: 'futura-pt' carries 300/400/500 and 'futura-pt-bold' is a separate family holding the real 700. Both are listed above so the browser can reach the true bold cut instead of synthesising one. Use --font-text-bold when setting 700. */ --font-text-bold:'futura-pt-bold','futura-pt','Futura PT',Avenir,sans-serif; --font-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace; /* Weights actually used. Display runs heavy; text stays regular. futura-pt ships Light 300 / Book 400 / Medium 500 in the kit; 700 comes from the separate futura-pt-bold family, so pair --fw-text-bold with --font-text-bold. */ --fw-display:800; /* @kind font */ /* TT Travels Next ExtraBold */ --fw-subhead:600; /* @kind font */ /* TT Travels Next DemiBold */ --fw-text:400; /* @kind font */ --fw-text-medium:500; /* @kind font */ /* Futura PT Medium — labels, buttons, eyebrows */ --fw-text-light:300; /* @kind font */ --fw-text-bold:700; /* @kind font */ /* Futura PT Heavy */ --fw-text-demi:600; /* @kind font */ /* Futura PT Demi */ /* Display scale. Swiss/large-typography: headlines are set tight and big. */ --type-display-1:clamp(3.5rem,9vw,8.5rem); --type-display-2:clamp(2.75rem,6.5vw,5.5rem); --type-display-3:clamp(2rem,4.2vw,3.5rem); --type-heading-1:2.25rem; --type-heading-2:1.75rem; --type-heading-3:1.3125rem; --type-body-lg:1.1875rem; --type-body:1rem; --type-body-sm:.9375rem; --type-caption:.8125rem; --type-label:.6875rem; --lh-display:.92; /* @kind font */ --lh-heading:1.08; /* @kind font */ --lh-subhead:1.2; /* @kind font */ --lh-body:1.55; /* @kind font */ --lh-tight:1.3; /* @kind font */ --ls-display:-.035em; /* @kind font */ --ls-heading:-.02em; /* @kind font */ --ls-body:.005em; /* @kind font */ /* Futura's small x-height wants a hair of tracking at text sizes */ --ls-label:.14em;/* all-caps labels only */ --ls-eyebrow:.2em; /* @kind font */ /* Composite roles */ --text-eyebrow-transform:uppercase; /* @kind other */ } /* Alternative display face. Put class="pdx-alt-display" on , a section or a slide to swap TT Travels Next for Bricolage Grotesque; every display token follows. Bricolage sets a little wider, so it takes less negative tracking. */ .pdx-alt-display{ --font-display:var(--font-display-alt); --ls-display:-.025em; /* @kind font */ --ls-heading:-.015em; /* @kind font */ } :root{ /* 4px base, doubling at the top end. */ --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px; --space-11:192px; --gutter:24px; --section-y:clamp(64px,9vw,160px); /* @kind spacing */ --container-max:1320px; --container-narrow:720px; --grid-cols:12; /* @kind other */ } :root{ /* Geometry is square by default. Radius is the exception, not the rule. */ --radius-0:0px; --radius-sm:2px; --radius-md:4px; --radius-lg:8px; --radius-pill:999px;/* tags, badges, small counters only */ /* Structure comes from hairlines, not shadows. */ --stroke-hairline:1px; /* @kind spacing */ --stroke-medium:2px; /* @kind spacing */ --stroke-heavy:3px; /* @kind spacing */ --rule-thick:6px;/* the heavy section rule under display type */ /* Two shadows total. Both only for things that float above the page. */ --shadow-menu:0 4px 16px rgba(20,20,20,.10),0 1px 0 rgba(20,20,20,.06); --shadow-modal:0 24px 64px rgba(20,20,20,.28); --shadow-none:none; /* Focus is always a visible offset ring in the accent. */ --focus-ring:0 0 0 2px var(--surface-page),0 0 0 4px var(--accent); /* Motion: rational, quick, no bounce, no overshoot. */ --ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */ --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */ --ease-in:cubic-bezier(.7,0,.84,0); /* @kind other */ --dur-instant:90ms; /* @kind other */ --dur-fast:160ms; /* @kind other */ --dur-base:240ms; /* @kind other */ --dur-slow:420ms; /* @kind other */ --dur-reveal:640ms; /* @kind other */ /* Blur is used sparingly: sticky headers over content, scrims. */ --blur-header:saturate(140%) blur(14px); /* @kind other */ --blur-scrim:blur(4px); /* @kind other */ } @media (prefers-reduced-motion:reduce){:root{--dur-instant:1ms; /* @kind other */--dur-fast:1ms; /* @kind other */--dur-base:1ms; /* @kind other */--dur-slow:1ms; /* @kind other */--dur-reveal:1ms /* @kind other */}} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-text);font-size:var(--type-body);line-height:var(--lh-body);font-weight:var(--fw-text);-webkit-font-smoothing:antialiased;text-wrap:pretty} h1,h2,h3,h4{color:var(--text-strong);margin:0;text-wrap:balance} h1,h2,h3{font-family:var(--font-display)} h1{font-weight:var(--fw-display);font-size:var(--type-display-2);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase} h2{font-weight:var(--fw-display);font-size:var(--type-heading-1);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);text-transform:uppercase} h3{font-weight:var(--fw-subhead);font-size:var(--type-heading-2);line-height:var(--lh-subhead);letter-spacing:var(--ls-heading);text-transform:uppercase} h4{font-family:var(--font-text);font-weight:var(--fw-text-bold);font-size:var(--type-heading-3);line-height:var(--lh-tight)} p{margin:0} a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur-fast) var(--ease-standard)} a:hover{color:var(--text-link-hover)} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus-ring)} ::selection{background:var(--accent);color:var(--accent-contrast)} img,svg,video{display:block;max-width:100%} hr{border:none;border-top:var(--stroke-hairline) solid var(--border-hairline);margin:0} /* Type roles as classes, for cards, kits and slides. */ .pdx-display{font-family:var(--font-display);font-weight:var(--fw-display);font-size:var(--type-display-1);line-height:var(--lh-display);letter-spacing:var(--ls-display);text-transform:uppercase;color:var(--text-strong)} .pdx-eyebrow{font-family:var(--font-text);font-weight:var(--fw-text-medium);font-size:var(--type-label);line-height:1;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--text-muted)} .pdx-lede{font-size:var(--type-body-lg);line-height:1.45;color:var(--text-body)} .pdx-mono{font-family:var(--font-mono);font-size:var(--type-caption);letter-spacing:.02em} .pdx-rule{border-top:var(--rule-thick) solid var(--border-strong)} .pdx-container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)} body { margin: 0; background: var(--pdx-paper); } a { color: var(--pdx-ink); } a:hover { color: var(--pdx-indigo); } /* == pdx-qa-fixes start == */ /* Launch-QA responsive + widget fixes. Re-run cms-import/qa-fix.js to update. */ /* --- Header: one nowrap row that overflowed every phone viewport. Let the bar wrap and drop the nav onto its own full-width line, so every nav item stays visible and tappable instead of leaving the viewport. --- */ @media (max-width: 899px){ header > .pdx-container{flex-wrap:wrap;row-gap:var(--space-3);column-gap:var(--space-4)} header > .pdx-container > nav{order:3;width:100%;flex-wrap:wrap;column-gap:var(--space-5);row-gap:var(--space-2)} header > .pdx-container > div[style*="margin-left"]{margin-left:auto} } /* --- Footer columns: multi-column grids that ran past the right edge. --- */ @media (max-width: 899px){ footer > .pdx-container{flex-wrap:wrap} footer [style*="grid-template-columns"]{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} footer nav{flex-wrap:wrap} } /* --- #practices panels: three cards locked at flex-basis 58%/21%/21% with flex-wrap:nowrap. At 390px that is 198px/72px/72px and the body copy inside renders 1px wide and 693px tall — one character per line. Below the breakpoint the row becomes a stack and every panel opens, because a hover-to-expand affordance has no meaning on a touch device. --- */ @media (max-width: 899px){ #practices .pdx-container > div:nth-child(2){flex-direction:column;height:auto!important} #practices .pdx-container > div:nth-child(2) > div{flex:1 1 auto!important} #practices .pdx-container > div:nth-child(2) [data-pdx-detail]{ opacity:1!important;visibility:visible!important;pointer-events:auto!important} #practices .pdx-container > div:nth-child(2) h3{font-size:clamp(20px,5vw,26px)!important} } /* --- Desktop panels: the capture froze one panel open and the other two at opacity:0/pointer-events:none, so two of the three business units were invisible AND unclickable at every width. qa-fix.js's script drives [data-pdx-open]; these rules are what it toggles against. --- */ @media (min-width: 900px){ #practices [data-pdx-detail]{ opacity:0;visibility:hidden;pointer-events:none; transition:opacity 160ms cubic-bezier(.33,0,.2,1),visibility 0s linear 160ms} #practices [data-pdx-open] [data-pdx-detail]{ opacity:1;visibility:visible;pointer-events:auto; transition:opacity 360ms cubic-bezier(.33,0,.2,1) 180ms,visibility 0s} } #practices [data-pdx-panel]:focus-visible{outline:2px solid var(--pdx-ink);outline-offset:2px} /* --- Tap targets: the testimonial dots are 40x2px, well under any usable size. Grow the hit area without changing the 2px/3px rule the design draws, by padding the button and keeping the bar as its background. --- */ #testimonials [aria-label^="Testimonial "]{ height:24px!important;background-clip:content-box!important; padding-block:11px!important;box-sizing:border-box!important} #testimonials [aria-label^="Testimonial "][aria-current="true"]{padding-block:10.5px!important} /* --- A funnel that inherits module chrome renders it as siblings of
. public/css/funnel.css carried an unscoped "body.funnel a{color:var(--fgood)}" that outranked the design system's bare "a{}" and repainted the site nav green. The stylesheet is fixed at source; this keeps the live site correct until that deploy lands, and is harmless afterwards. :not() guards the .f-head/.f-foot fallback chrome, which is dark and genuinely wants white links. --- */ body.funnel > header:not(.f-head) a, body.funnel > footer:not(.f-foot) a{color:var(--text-link)} body.funnel > header:not(.f-head) a:hover, body.funnel > footer:not(.f-foot) a:hover{color:var(--text-link-hover)} /* == pdx-qa-fixes end == */ /* Landing-page component styles, from the page bundle. The markup that needs them (classes prefixed lp- and lpg-) lives in a page body, so the rules belong in the module stylesheet that page already loads. NOTE: no asterisk-slash inside this comment. The first one ends it, and everything after would be parsed as CSS and silently dropped. */ /* Pidoxa Innovations (gov) landing page — primitives extracted from page markup. Tokens, .pdx-* helpers and the Typekit @import come from /m/gov.css, which already carries every token this page references (--pdx-mint/indigo/aqua, --surface-card/sunken, --text-faint, .pdx-container, .pdx-eyebrow, .pdx-lede, .pdx-mono). The only thing it lacked was .pdx-creds, defined below. EVERYTHING is scoped under .lpg. This stylesheet is appended to the gov module's custom_css, which serves every page under /gov — an unscoped rule here would restyle the live gov site. The page body is wrapped in
, so these only ever apply to it. */ /* Button hover fill: mint instead of the default flare accent. Authored as a page-local rule in the source; scoped here for the same reason as the rest. */ .lpg button, .lpg a[href] { --accent: var(--pdx-mint); --accent-contrast: var(--pdx-ink); } /* Credentials strip: four intrinsic columns plus a fixed one for the NAICS list, which is the only multi-line value. Collapses to two, then lets the NAICS cell span the full width rather than squeezing it. */ .lpg .pdx-creds { display: grid; grid-template-columns: repeat(4, max-content) 345px; align-items: start; justify-content: center; } @media (max-width: 940px) { .lpg .pdx-creds { grid-template-columns: repeat(2, max-content); } .lpg .pdx-creds > *:last-child { grid-column: 1 / -1; } } /* The UEI/SDVOSB line in the nav is the first thing to go when space runs out. */ @media (max-width: 1100px) { .lpg .pdx-nav-id { display: none; } } .lpg .pdx-nav-id:hover { color: var(--pdx-ink); } /* Anchor targets clear the 68px sticky header. */ .lpg [id] { scroll-margin-top: 84px; } .lpg-navlink { text-decoration: none; color: var(--text-body); transition: color var(--dur-fast) var(--ease-standard); } .lpg-navlink:hover { color: var(--pdx-ink); } /* Was . Structure here, colours inline per instance, exactly as the marketing LP resolves its own buttons. */ .lpg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-text); font-weight: var(--fw-text-medium); letter-spacing: .08em; text-transform: uppercase; line-height: 1; white-space: nowrap; text-decoration: none; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transform: translateY(0); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard); } a.lpg-btn:hover { transform: translateY(-2px); } .lpg-btn-lg { padding: 19px 32px; font-size: 15px; } .lpg-btn-md { padding: 14px 22px; font-size: 13px; } .lpg-btn-sm { padding: 9px 14px; font-size: 11px; } /* Practice-area card. Replaces the source's style-hover="" attribute, which is a design-tool affordance and not a real attribute the browser honours. */ .lpg-card { display: flex; flex-direction: column; gap: var(--space-4); text-decoration: none; color: inherit; background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-6); transition: transform var(--dur-base) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .lpg-card:hover { transform: translateY(-2px); border-color: var(--pdx-ink); } .lpg-chip { border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 5px 11px; font-size: var(--type-label); font-weight: var(--fw-text-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-body); white-space: nowrap; } /* Capability card — fixed structure, accent supplied inline per card. */ .lpg-cap { background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-md); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); } .lpg-diff { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-hairline); } .lpg-seal { display: block; width: 88px; height: auto; flex: none; } /* Primary buttons on the government landing page are ink, not mint. The page bundle stylesheet above asks for mint; the signed-off design renders them black, and that is the reference. Only four elements read this variable and all four are buttons, so nothing else moves. To go back to the bundle intent, delete this rule. */ .lpg button, .lpg a[href] { --accent: var(--pdx-ink); --accent-contrast: var(--pdx-white); } /* pdx-funnel-btn-text: funnel.css colors every #app link green, which hid the label on the green done button */ body.funnel #app a.f-btn{color:#fff}