/*
* perqsLabStyles — global chrome styling for the Perqs Labs site.
*
* Delivered as a static resource rather than the site's built-in
* styles.css for one practical reason: a static resource goes live on
* deploy, while the built-in stylesheet only takes effect when the site is
* republished. Iterating on site chrome therefore costs a deploy instead of
* a deploy plus a publish.
*
* WHAT THIS DOES
* The page chrome above and below the hero follows the visitor's own
* light/dark preference rather than a colour anyone has to set. Branding
* carries a single fixed BackgroundColor and has no notion of a colour
* scheme, which is what produced the white bands.
*
* Overriding --dxp-g-root / --dxp-g-root-contrast is what makes this reach
* the theme regions rather than only the element: the branding set
* resolves its own background and body-text settings through those two
* tokens, so redefining them cascades wherever the theme paints.
*
* Values match perqsLabsSiteHome's scheme tokens exactly, so the hero and
* the chrome stay in step: #101010 / #fafafa field, #343434 ink in light.
*
* color-scheme additionally hands scrollbars, form controls and focus
* rings to the browser to render appropriately — colour alone can't.
*
* HOW TO ATTACH IT
* Experience Builder > Settings > Advanced > Edit Head Markup:
*
*/
/*
* The WHOLE root family has to be overridden, not just --dxp-g-root.
*
* Branding publishes each colour three ways: the composite hex, three
* derived shades (-1/-2/-3), and an HSL decomposition (-h/-s/-l/-a) that
* theme regions compose with. The header and footer paint from
* --dxp-g-root-1, which is why overriding only the base token left a
* #ebebeb band above the hero while everything else went dark.
*
* Derived shades step AWAY from the field colour, so in dark mode they
* lighten (the platform's light-mode defaults darken).
*/
/*
* Caveat (Google Fonts, OFL-1.1) — the handwritten face for the hero's
* "already a client?" aside. Self-hosted rather than linked from
* fonts.gstatic.com, which would need a CSP Trusted Site entry and put a
* third-party request in front of first paint.
*
* The URL is RELATIVE on purpose. This stylesheet is served from
* /sfsites/c/resource/perqsLabStyles, so a relative path resolves
* against .../resource/ and lands on the font's own static resource — with
* no site prefix baked in, it works unchanged in sandbox, production and
* Builder preview.
*
* Latin subset only (74KB): the aside is three English words, and the
* cyrillic subsets would triple the payload for nothing.
*
* Declared here rather than in the component because @font-face must live
* in a document-level stylesheet; the component only names the family.
*/
@font-face {
font-family: "Caveat";
src: url("perqsLabsCaveat/Caveat-Variable.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
/* swap: the doodle is decorative, so never block text on the download */
font-display: swap;
}
:root {
color-scheme: dark light;
--dxp-g-root: #101010;
--dxp-g-root-1: #1c1c1c;
--dxp-g-root-2: #2a2a2a;
--dxp-g-root-3: #444444;
--dxp-g-root-h: 0;
--dxp-g-root-s: 0%;
--dxp-g-root-l: 6%;
--dxp-g-root-a: 1;
--dxp-g-root-contrast: #f4f2f8;
--dxp-g-root-contrast-1: #ffffff;
--dxp-g-root-contrast-2: #ffffff;
--dxp-g-root-contrast-3: #ffffff;
--dxp-g-root-contrast-h: 260;
--dxp-g-root-contrast-s: 30%;
--dxp-g-root-contrast-l: 96%;
--dxp-g-root-contrast-a: 1;
}
@media (prefers-color-scheme: light) {
:root {
--dxp-g-root: #fafafa;
--dxp-g-root-1: #ebebeb;
--dxp-g-root-2: #c2c2c2;
--dxp-g-root-3: #858585;
--dxp-g-root-h: 0;
--dxp-g-root-s: 0%;
--dxp-g-root-l: 98%;
--dxp-g-root-a: 1;
--dxp-g-root-contrast: #343434;
--dxp-g-root-contrast-1: #000000;
--dxp-g-root-contrast-2: #000000;
--dxp-g-root-contrast-3: #000000;
--dxp-g-root-contrast-h: 0;
--dxp-g-root-contrast-s: 0%;
--dxp-g-root-contrast-l: 20%;
--dxp-g-root-contrast-a: 1;
}
}
/*
* !important here is deliberate, not laziness.
*
* The branding