/* /m/tech.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. */ :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{ /* 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)} .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; } } body { margin: 0; background: var(--pdx-paper); } a { color: var(--text-link); } a:hover { color: var(--text-link-hover); } @keyframes pdxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { [data-screen-label="02b Capability marquee"] > div { animation-duration: 1ms !important; } } :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 */ } body { margin: 0; background: var(--pdx-paper); } a { color: var(--text-link); } a:hover { color: var(--text-link-hover); } body { margin: 0; background: var(--pdx-paper); } a { color: var(--text-link); } a:hover { color: var(--text-link-hover); } /* == 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 == */ /* pdx-qa-headings */ @media (max-width:520px){h1,h2,h3{overflow-wrap:break-word;hyphens:auto}h2{font-size:clamp(1.5rem,7.2vw,2.1rem)!important}} /* 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}