From 9dd28796dd0118ace74bd41530faa1221ec542c4 Mon Sep 17 00:00:00 2001 From: Joel Date: Wed, 17 Dec 2025 11:51:41 -0800 Subject: [PATCH] fix(third-party): remove braze --- clients/web/__mocks__/braze-sdk.js | 42 - clients/web/public/static/pocket-web-ui.css | 1803 +++++++++++++++-- clients/web/src/actions.js | 7 - clients/web/src/common/api/internal/braze.js | 6 - clients/web/src/common/constants.js | 5 - .../common/utilities/braze/braze-lazy-load.js | 22 - .../common/utilities/braze/feature-flags.js | 2 - .../web/src/components/account/braze/braze.js | 33 - .../account/global-nav-account-limited.js | 5 - .../global-nav/account/global-nav-account.js | 4 - .../src/connectors/dev-tools/braze-modal.js | 40 - clients/web/src/connectors/dev-tools/braze.js | 83 - .../web/src/connectors/dev-tools/dev-tools.js | 2 - .../web/src/connectors/listen/listen-login.js | 16 - clients/web/src/connectors/listen/listen.js | 15 - .../src/connectors/settings/settings.state.js | 8 +- .../src/connectors/third-party/braze.state.js | 68 - .../third-party/third-party-init.js | 114 -- clients/web/src/containers/account/account.js | 2 - .../web/src/containers/account/braze/braze.js | 17 - clients/web/src/pages/_app.js | 2 - clients/web/src/pages/api/braze/index.js | 22 - clients/web/src/store.js | 4 - infrastructure/web/src/main.ts | 4 - turbo.json | 2 - ui/styles/legacy/global.css | 10 - ui/styles/legacy/index.css | 2 - 27 files changed, 1592 insertions(+), 748 deletions(-) delete mode 100644 clients/web/__mocks__/braze-sdk.js delete mode 100644 clients/web/src/common/api/internal/braze.js delete mode 100644 clients/web/src/common/utilities/braze/braze-lazy-load.js delete mode 100644 clients/web/src/common/utilities/braze/feature-flags.js delete mode 100644 clients/web/src/components/account/braze/braze.js delete mode 100644 clients/web/src/connectors/dev-tools/braze-modal.js delete mode 100644 clients/web/src/connectors/dev-tools/braze.js delete mode 100644 clients/web/src/connectors/third-party/braze.state.js delete mode 100644 clients/web/src/connectors/third-party/third-party-init.js delete mode 100644 clients/web/src/containers/account/braze/braze.js delete mode 100644 clients/web/src/pages/api/braze/index.js diff --git a/clients/web/__mocks__/braze-sdk.js b/clients/web/__mocks__/braze-sdk.js deleted file mode 100644 index 7b1497445..000000000 --- a/clients/web/__mocks__/braze-sdk.js +++ /dev/null @@ -1,42 +0,0 @@ -// Braze methods: https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html -const noop = function () {} - -const initialize = noop -const openSession = noop -const automaticallyShowInAppMessages = noop -const changeUser = noop -const wipeData = noop -const showInAppMessage = noop -const requestPushPermission = noop -const isPushBlocked = noop -const isPushPermissionGranted = noop -const isDisabled = noop -const disableSDK = noop -const enableSDK = noop -const destroy = noop -const setSdkAuthenticationSignature = noop -const subscribeToSdkAuthenticationFailures = noop -const logFeatureFlagImpression = noop -const getFeatureFlag = noop -const getAllFeatureFlags = noop - -export { - initialize, - openSession, - automaticallyShowInAppMessages, - changeUser, - wipeData, - showInAppMessage, - requestPushPermission, - isPushBlocked, - isPushPermissionGranted, - isDisabled, - disableSDK, - enableSDK, - destroy, - setSdkAuthenticationSignature, - subscribeToSdkAuthenticationFailures, - logFeatureFlagImpression, - getFeatureFlag, - getAllFeatureFlags -} diff --git a/clients/web/public/static/pocket-web-ui.css b/clients/web/public/static/pocket-web-ui.css index 063acaeb1..b65b26fad 100644 --- a/clients/web/public/static/pocket-web-ui.css +++ b/clients/web/public/static/pocket-web-ui.css @@ -1,218 +1,1597 @@ /* BROWSER RESETS --------------------------------------------- */ -*,:after,:before{box-sizing:border-box} -html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)} -article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block} -body{background-color:#fff;color:#212529;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;margin:0;text-align:left} -[tabindex="-1"]:focus{outline:0!important} -hr{box-sizing:content-box;height:0;overflow:visible} -h1,h2,h3,h4,h5,h6{margin-bottom:.5rem;margin-top:0} -p{margin-bottom:1rem;margin-top:0} -abbr[data-original-title],abbr[title]{border-bottom:0;cursor:help;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none} -address{font-style:normal;line-height:inherit} -address,dl,ol,ul{margin-bottom:1rem} -dl,ol,ul{margin-top:0} -ol ol,ol ul,ul ol,ul ul{margin-bottom:0} -dt{font-weight:700} -dd{margin-bottom:.5rem;margin-left:0} -blockquote{margin:0 0 1rem} -b,strong{font-weight:bolder} -small{font-size:80%} -sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline} -sub{bottom:-.25em} -sup{top:-.5em} -a{background-color:transparent;text-decoration:none} -a,a:hover{color:inherit} -a:hover{text-decoration:underline} -a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none} -a:not([href]):not([tabindex]):focus{outline:0} -code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em} -pre{margin-bottom:1rem;margin-top:0;overflow:auto} -figure{margin:0 0 1rem} -img{border-style:none} -img,svg{vertical-align:middle} -svg{overflow:hidden} -table{border-collapse:collapse} -caption{caption-side:bottom;color:#6c757d;padding-bottom:.75rem;padding-top:.75rem;text-align:left} -th{text-align:inherit} -label{display:inline-block;margin-bottom:.5rem} -button{border-radius:0} -button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color} -button,input,optgroup,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;margin:0} -button,input{overflow:visible} -button,select{text-transform:none} -select{word-wrap:normal} -[type=button],[type=reset],[type=submit],button{-webkit-appearance:button} -[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer} -[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0} -input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0} -input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox} -textarea{overflow:auto;resize:vertical} -fieldset{border:0;margin:0;min-width:0;padding:0} -legend{color:inherit;display:block;font-size:1.5rem;line-height:inherit;margin-bottom:.5rem;max-width:100%;padding:0;white-space:normal;width:100%} -progress{vertical-align:baseline} -[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto} -[type=search]{-webkit-appearance:none;outline-offset:-2px} -[type=search]::-webkit-search-decoration{-webkit-appearance:none} -::-webkit-file-upload-button{-webkit-appearance:button;font:inherit} -output{display:inline-block} -summary{cursor:pointer;display:list-item} -template{display:none} -[hidden]{display:none!important} +*, +:after, +:before { + box-sizing: border-box; +} +html { + font-family: sans-serif; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); +} +article, +aside, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section { + display: block; +} +body { + background-color: #fff; + color: #212529; + font-family: + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + Noto Sans, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, + Noto Color Emoji; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + margin: 0; + text-align: left; +} +[tabindex='-1']:focus { + outline: 0 !important; +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} +h1, +h2, +h3, +h4, +h5, +h6 { + margin-bottom: 0.5rem; + margin-top: 0; +} +p { + margin-bottom: 1rem; + margin-top: 0; +} +abbr[data-original-title], +abbr[title] { + border-bottom: 0; + cursor: help; + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + -webkit-text-decoration-skip-ink: none; + text-decoration-skip-ink: none; +} +address { + font-style: normal; + line-height: inherit; +} +address, +dl, +ol, +ul { + margin-bottom: 1rem; +} +dl, +ol, +ul { + margin-top: 0; +} +ol ol, +ol ul, +ul ol, +ul ul { + margin-bottom: 0; +} +dt { + font-weight: 700; +} +dd { + margin-bottom: 0.5rem; + margin-left: 0; +} +blockquote { + margin: 0 0 1rem; +} +b, +strong { + font-weight: bolder; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +a { + background-color: transparent; + text-decoration: none; +} +a, +a:hover { + color: inherit; +} +a:hover { + text-decoration: underline; +} +a:not([href]):not([tabindex]), +a:not([href]):not([tabindex]):focus, +a:not([href]):not([tabindex]):hover { + color: inherit; + text-decoration: none; +} +a:not([href]):not([tabindex]):focus { + outline: 0; +} +code, +kbd, +pre, +samp { + font-family: + SFMono-Regular, + Menlo, + Monaco, + Consolas, + Liberation Mono, + Courier New, + monospace; + font-size: 1em; +} +pre { + margin-bottom: 1rem; + margin-top: 0; + overflow: auto; +} +figure { + margin: 0 0 1rem; +} +img { + border-style: none; +} +img, +svg { + vertical-align: middle; +} +svg { + overflow: hidden; +} +table { + border-collapse: collapse; +} +caption { + caption-side: bottom; + color: #6c757d; + padding-bottom: 0.75rem; + padding-top: 0.75rem; + text-align: left; +} +th { + text-align: inherit; +} +label { + display: inline-block; + margin-bottom: 0.5rem; +} +button { + border-radius: 0; +} +button:focus { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; +} +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: inherit; + line-height: inherit; + margin: 0; +} +button, +input { + overflow: visible; +} +button, +select { + text-transform: none; +} +select { + word-wrap: normal; +} +[type='button'], +[type='reset'], +[type='submit'], +button { + -webkit-appearance: button; +} +[type='button']:not(:disabled), +[type='reset']:not(:disabled), +[type='submit']:not(:disabled), +button:not(:disabled) { + cursor: pointer; +} +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner, +button::-moz-focus-inner { + border-style: none; + padding: 0; +} +input[type='checkbox'], +input[type='radio'] { + box-sizing: border-box; + padding: 0; +} +input[type='date'], +input[type='datetime-local'], +input[type='month'], +input[type='time'] { + -webkit-appearance: listbox; +} +textarea { + overflow: auto; + resize: vertical; +} +fieldset { + border: 0; + margin: 0; + min-width: 0; + padding: 0; +} +legend { + color: inherit; + display: block; + font-size: 1.5rem; + line-height: inherit; + margin-bottom: 0.5rem; + max-width: 100%; + padding: 0; + white-space: normal; + width: 100%; +} +progress { + vertical-align: baseline; +} +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + height: auto; +} +[type='search'] { + -webkit-appearance: none; + outline-offset: -2px; +} +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} +output { + display: inline-block; +} +summary { + cursor: pointer; + display: list-item; +} +template { + display: none; +} +[hidden] { + display: none !important; +} /* STYLE VARIABLES --------------------------------------------- */ -.colormode-light{--color-canvas:#fff;--color-textPrimary:#1a1a1a;--color-textSecondary:#666;--color-textTertiary:#8c8c8c;--color-textLinkHover:#008078;--color-textLinkPressed:#004d48;--color-textAccent:#3668ff;--color-actionPrimary:#008078;--color-actionPrimaryHover:#004d48;--color-actionPrimarySubdued:#e8f7f6;--color-actionPrimaryText:#fff;--color-actionSecondary:#1a1a1a;--color-actionSecondaryHover:#1a1a1a;--color-actionSecondaryHoverText:#f2f2f2;--color-actionSecondaryText:#1a1a1a;--color-actionBrand:#ef4056;--color-actionBrandHover:#901424;--color-actionBrandSubdued:#fdf2f5;--color-actionBrandText:#fff;--color-actionFocus:#009990;--color-formFieldFocusLabel:#008078;--color-formFieldTextPrimary:#1a1a1a;--color-formFieldTextSecondary:#666;--color-formFieldBorder:#8c8c8c;--color-formFieldBorderHover:#333;--color-error:#b24000;--color-toggleOff:#737373;--color-toggleOffHover:#404040;--color-activeCanvas:#f9f9fb;--color-popoverCanvas:#fff;--color-popoverBorder:#d9d9d9;--color-menuItemHover:#008078;--color-menuItemHoverText:#fff;--color-menuItemActive:#004d48;--color-navCurrentTab:#e0f0ef;--color-navCurrentTabText:#008078;--color-tooltipCanvas:#1a1a1a;--color-tooltipText:#f2f2f2;--color-drawerCanvas:#fff;--color-emptyCanvas:#f3f3f3;--color-dividerPrimary:#333;--color-dividerSecondary:#8c8c8c;--color-dividerTertiary:#d9d9d9;--color-calloutBackgroundPrimary:#e8f7f6;--color-calloutBackgroundSecondary:#fdf2f5;--color-calloutAccent:#1a1a1a;--color-newsroomBackgroundPrimary:#fff0e3;--color-newsroomBackgroundSecondary:#db6900;--color-newsroomBackgroundText:#1a1a1a;--color-checkboxLabel:#404040;--color-checkboxBorder:#d9d9d9;--color-checkboxBackground:#fff;--color-checkboxInputBorder:#d9d9d9;--color-checkboxInputBackground:#fff;--color-checkboxHighlight:#009990;--color-checkboxLabelSelected:#008078;--color-checkboxBorderSelected:#008078;--color-checkboxBackgroundSelected:#e8f7f6;--color-checkboxInputBorderSelected:#008078;--color-checkboxInputBackgroundSelected:#008078;--color-paginationText:#008078;--color-paginationHover:#f2f2f2;--color-paginationHoverText:#008078;--color-paginationActive:#e8f7f6;--color-paginationActiveText:#008078} -.colormode-dark{--color-canvas:#1a1a1a;--color-textPrimary:#f2f2f2;--color-textSecondary:#8c8c8c;--color-textTertiary:#737373;--color-textLinkHover:#00a69c;--color-textLinkPressed:#00d9cc;--color-textAccent:#95d2ff;--color-actionPrimary:#008078;--color-actionPrimaryHover:#004d48;--color-actionPrimarySubdued:#00403c;--color-actionPrimaryText:#fff;--color-actionSecondary:#f2f2f2;--color-actionSecondaryHover:#f2f2f2;--color-actionSecondaryHoverText:#1a1a1a;--color-actionSecondaryText:#f2f2f2;--color-actionBrand:#ef4056;--color-actionBrandHover:#901424;--color-actionBrandSubdued:#6c000e;--color-actionBrandText:#fff;--color-actionFocus:#00ccc0;--color-formFieldFocusLabel:#00a69c;--color-formFieldTextPrimary:#f2f2f2;--color-formFieldTextSecondary:#8c8c8c;--color-formFieldBorder:#737373;--color-formFieldBorderHover:#ccc;--color-error:#e55300;--color-toggleOff:#737373;--color-toggleOffHover:#404040;--color-activeCanvas:#333;--color-popoverCanvas:#333;--color-popoverBorder:#595959;--color-menuItemHover:#008078;--color-menuItemHoverText:#fff;--color-menuItemActive:#004d48;--color-navCurrentTab:#274f4c;--color-navCurrentTabText:#00ccc0;--color-tooltipCanvas:#f2f2f2;--color-tooltipText:#1a1a1a;--color-drawerCanvas:#333;--color-emptyCanvas:#333;--color-dividerPrimary:#ccc;--color-dividerSecondary:#737373;--color-dividerTertiary:#404040;--color-calloutBackgroundPrimary:#004d48;--color-calloutBackgroundSecondary:#333;--color-calloutAccent:#00ccc0;--color-newsroomBackgroundPrimary:#fff0e3;--color-newsroomBackgroundSecondary:#db6900;--color-newsroomBackgroundText:#1a1a1a;--color-checkboxLabel:#fff;--color-checkboxBorder:#8c8c8c;--color-checkboxBackground:#1a1a1a;--color-checkboxInputBorder:#8c8c8c;--color-checkboxInputBackground:#1a1a1a;--color-checkboxHighlight:#009990;--color-checkboxLabelSelected:#e8f7f6;--color-checkboxBorderSelected:#e8f7f6;--color-checkboxBackgroundSelected:#008078;--color-checkboxInputBorderSelected:#fff;--color-checkboxInputBackgroundSelected:#fff;--color-paginationText:#00ccc0;--color-paginationHover:#404040;--color-paginationHoverText:#00ccc0;--color-paginationActive:#333;--color-paginationActiveText:#f2f2f2} -.colormode-sepia{--color-canvas:#f5eddd;--color-textPrimary:#191917;--color-textSecondary:#66635c;--color-textTertiary:#8c877e;--color-textLinkHover:#00736c;--color-textLinkPressed:#00403c;--color-textAccent:#1649ac;--color-actionPrimary:#00736c;--color-actionPrimaryHover:#00403c;--color-actionPrimarySubdued:#e8f7f6;--color-actionPrimaryText:#fff;--color-actionSecondary:#191917;--color-actionSecondaryHover:#191917;--color-actionSecondaryHoverText:#fffcf7;--color-actionSecondaryText:#191917;--color-actionBrand:#ef4056;--color-actionBrandHover:#901424;--color-actionBrandSubdued:#fdf2f5;--color-actionBrandText:#fff;--color-actionFocus:#009990;--color-formFieldFocusLabel:#00736c;--color-formFieldTextPrimary:#191917;--color-formFieldTextSecondary:#66635c;--color-formFieldBorder:#8c877e;--color-formFieldBorderHover:#33312e;--color-error:#b24000;--color-toggleOff:#66635c;--color-toggleOffHover:#403e3a;--color-activeCanvas:#fff4de;--color-popoverCanvas:#f5eddd;--color-popoverBorder:#ccc5b8;--color-menuItemHover:#00736c;--color-menuItemHoverText:#fffcf7;--color-menuItemActive:#00403c;--color-navCurrentTab:#d8decf;--color-navCurrentTabText:#00736c;--color-tooltipCanvas:#191917;--color-tooltipText:#f2f2f2;--color-drawerCanvas:#f5eddd;--color-emptyCanvas:#e0d9ca;--color-dividerPrimary:#33312e;--color-dividerSecondary:#8c877e;--color-dividerTertiary:#ccc5b8;--color-calloutBackgroundPrimary:#e8f7f6;--color-calloutBackgroundSecondary:#fdf2f5;--color-calloutAccent:#1a1a1a;--color-newsroomBackgroundPrimary:#fff0e3;--color-newsroomBackgroundSecondary:#db6900;--color-newsroomBackgroundText:#1a1a1a;--color-checkboxLabel:#404040;--color-checkboxBorder:#d9d9d9;--color-checkboxBackground:#f5eddd;--color-checkboxInputBorder:#8c8c8c;--color-checkboxInputBackground:#f5eddd;--color-checkboxHighlight:#009990;--color-checkboxLabelSelected:#008078;--color-checkboxBorderSelected:#008078;--color-checkboxBackgroundSelected:#e8f7f6;--color-checkboxInputBorderSelected:#008078;--color-checkboxInputBackgroundSelected:#008078;--color-paginationText:#00736c;--color-paginationHover:#e5decf;--color-paginationHoverText:#00736c;--color-paginationActive:#ccc5b8;--color-paginationActiveText:#191917} -:root{--color-grey10:#1a1a1a;--color-grey20:#333;--color-grey25:#404040;--color-grey30:#4d4d4d;--color-grey35:#595959;--color-grey40:#666;--color-grey45:#737373;--color-grey55:#8c8c8c;--color-grey65:#a6a6a6;--color-grey80:#ccc;--color-grey85:#d9d9d9;--color-grey95:#f2f2f2;--color-white100:#fff;--color-sepia10:#191917;--color-sepia20:#33312e;--color-sepia25:#403e3a;--color-sepia40:#66635c;--color-sepia45:#736f68;--color-sepia55:#8c877e;--color-sepia65:#a6a095;--color-sepia80:#ccc5b8;--color-sepia90:#e5decf;--color-sepia96:#f5eddd;--color-sepia100:#fff7e6;--color-cream100:#fffcf7;--color-teal25:#00403c;--color-teal30:#004d48;--color-teal45:#00736c;--color-teal50:#008078;--color-teal60:#009990;--color-teal65:#00a69c;--color-teal70:#00b2a8;--color-teal75:#00bfb4;--color-teal80:#00ccc0;--color-teal85:#00d9cc;--color-teal100:#e8f7f6;--color-tealDarker:#004d48;--color-tealDark:#008078;--color-teal:#009990;--color-tealLight:#95d5d2;--color-tealLightest:#e8f7f6;--color-coralDarker:#6c000e;--color-coralDark:#901424;--color-coral:#ef4056;--color-coralLight:#f9bfd1;--color-coralLightest:#fdf2f5;--color-amberDarker:#b24000;--color-amberDark:#e55300;--color-amber:#fcb643;--color-amberLight:#ffd25e;--color-amberLightest:#fffbe3;--color-mintDarker:#0b6639;--color-mintDark:#29a668;--color-mint:#00cb77;--color-mintLight:#82ecb7;--color-mintLightest:#c6ffe3;--color-lapisDarker:#00256d;--color-lapisDark:#1649ac;--color-lapis:#3668ff;--color-lapisLight:#95d2ff;--color-lapisLightest:#dceaff;--color-apricotDarker:#9f2600;--color-apricotDark:#d23807;--color-apricot:#f67d6d;--color-apricotLight:#feb69f;--color-apricotLightest:#fdf0ec;--color-irisDarker:#802ac3;--color-irisDark:#9971ef;--color-iris:#c4a5f7;--color-irisLight:#dab5ff;--color-irisLightest:#f2deff;--color-brandPocket:#ef4056;--color-brandFacebook:#3b5998;--color-brandTwitter:#00aced;--color-brandReddit:#ff4500;--color-brandLinkedin:#007bb6;--color-brandMastodon:#563acc;--fontSerif:"Blanco OSF",Garamond,Times,Serif;--fontSerifAlt:"Doyle",Garamond,Times,Serif;--fontSansSerif:"Graphik Web","Helvetica Neue",Helvetica,Arial,Sans-Serif;--fontSizeRootSmall:80%;--fontSizeRootMedium:87.5%;--fontSizeRoot:100%;--fontSize065:0.625rem;--fontSize075:0.75rem;--fontSize085:0.875rem;--fontSize100:1rem;--fontSize125:1.1875rem;--fontSize150:1.4375rem;--fontSize175:1.75rem;--fontSize200:2.0625rem;--fontSize250:2.5rem;--fontSize300:3rem;--spacing025:0.25rem;--spacing050:0.5rem;--spacing075:0.75rem;--spacing100:1rem;--spacing150:1.5rem;--spacing250:2.5rem;--spacing400:4rem;--spacing650:6.5rem;--size025:0.25rem;--size050:0.5rem;--size075:0.75rem;--size100:1rem;--size125:1.25rem;--size150:1.5rem;--size200:2rem;--size250:2.5rem;--size300:3rem;--size400:4rem;--size500:5rem;--zIndexRaised:3;--zIndexHeader:5;--zIndexTooltip:10;--zIndexModalShade:20;--zIndexModal:21;--zIndexColorModePicker:30;--borderStyle:1px solid var(--color-formFieldBorder);--borderRadius:4px;--buttonBorderRadius:8px;--dividerStyle:1px solid var(--color-dividerTertiary);--raisedCanvas:0 2px 12px rgba(0,0,0,.08);--itemActionLight:0 3px 8px rgba(0,0,0,.1);--itemActionsDark:0 3px 8px rgba(0,0,0,.4);--easingAccelerate:cubic-bezier(0.4,0,1,1);--easingDecelerate:cubic-bezier(0,0,0.2,1);--easingStandard:cubic-bezier(0.4,0,0.2,1);--uiControlsDurationEnterMS:100ms;--uiControlsDurationExitMS:50ms;--dialogsDurationEnterMS:150ms;--dialogsDurationExitMS:75ms;--navDrawerDurationEnterMS:250ms;--navDrawerDurationExitMS:200ms;--selectDownArrowLight:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22292.4%22%20height=%22292.4%22%3E%3Cpath%20fill=%22%23000000%22%20d=%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E");--selectDownArrowDark:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22292.4%22%20height=%22292.4%22%3E%3Cpath%20fill=%22%23FFFFFF%22%20d=%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E");--checkboxCheckMarkLight:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%2216%22%20height=%2213%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M4.635%2012.175L1.095%209.21a1.5%201.5%200%20011.927-2.3l2.49%202.087%207.45-7.962a1.5%201.5%200%20012.191%202.05l-8.391%208.968a1.5%201.5%200%2001-2.126.123z%22%20fill=%22%23FFFFFF%22/%3E%3C/svg%3E");--checkboxCheckMarkColor:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%2216%22%20height=%2213%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M4.635%2012.175L1.095%209.21a1.5%201.5%200%20011.927-2.3l2.49%202.087%207.45-7.962a1.5%201.5%200%20012.191%202.05l-8.391%208.968a1.5%201.5%200%2001-2.126.123z%22%20fill=%22%23008078%22/%3E%3C/svg%3E");--checkboxCheckMarkHover:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%2216%22%20height=%2213%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M4.635%2012.175L1.095%209.21a1.5%201.5%200%20011.927-2.3l2.49%202.087%207.45-7.962a1.5%201.5%200%20012.191%202.05l-8.391%208.968a1.5%201.5%200%2001-2.126.123z%22%20fill=%22%23004D48%22/%3E%3C/svg%3E");--crossIconColor:url("data:image/svg+xml;charset=US-ASCII,%20%3Csvg%20width=%2212%22%20height=%2212%22%20viewBox=%220%200%2012%2012%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M2.36369%200.405544C1.82296%20-0.135181%200.94627%20-0.135181%200.405544%200.405544C-0.135181%200.94627%20-0.135181%201.82296%200.405544%202.36369L4.04186%206L0.405544%209.63631C-0.135181%2010.177%20-0.135181%2011.0537%200.405544%2011.5945C0.946271%2012.1352%201.82296%2012.1352%202.36369%2011.5945L6%207.95814L9.63631%2011.5945C10.177%2012.1352%2011.0537%2012.1352%2011.5945%2011.5945C12.1352%2011.0537%2012.1352%2010.177%2011.5945%209.63631L7.95814%206L11.5945%202.36369C12.1352%201.82296%2012.1352%200.94627%2011.5945%200.405544C11.0537%20-0.135181%2010.177%20-0.135181%209.63631%200.405544L6%204.04186L2.36369%200.405544Z%22%20fill=%22%23737373%22/%3E%3C/svg%3E");--crossIconHover:url("data:image/svg+xml;charset=US-ASCII,%20%3Csvg%20width=%2212%22%20height=%2212%22%20viewBox=%220%200%2012%2012%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M2.36369%200.405544C1.82296%20-0.135181%200.94627%20-0.135181%200.405544%200.405544C-0.135181%200.94627%20-0.135181%201.82296%200.405544%202.36369L4.04186%206L0.405544%209.63631C-0.135181%2010.177%20-0.135181%2011.0537%200.405544%2011.5945C0.946271%2012.1352%201.82296%2012.1352%202.36369%2011.5945L6%207.95814L9.63631%2011.5945C10.177%2012.1352%2011.0537%2012.1352%2011.5945%2011.5945C12.1352%2011.0537%2012.1352%2010.177%2011.5945%209.63631L7.95814%206L11.5945%202.36369C12.1352%201.82296%2012.1352%200.94627%2011.5945%200.405544C11.0537%20-0.135181%2010.177%20-0.135181%209.63631%200.405544L6%204.04186L2.36369%200.405544Z%22%20fill=%22%23404040%22/%3E%3C/svg%3E")} +.colormode-light { + --color-canvas: #fff; + --color-textPrimary: #1a1a1a; + --color-textSecondary: #666; + --color-textTertiary: #8c8c8c; + --color-textLinkHover: #008078; + --color-textLinkPressed: #004d48; + --color-textAccent: #3668ff; + --color-actionPrimary: #008078; + --color-actionPrimaryHover: #004d48; + --color-actionPrimarySubdued: #e8f7f6; + --color-actionPrimaryText: #fff; + --color-actionSecondary: #1a1a1a; + --color-actionSecondaryHover: #1a1a1a; + --color-actionSecondaryHoverText: #f2f2f2; + --color-actionSecondaryText: #1a1a1a; + --color-actionBrand: #ef4056; + --color-actionBrandHover: #901424; + --color-actionBrandSubdued: #fdf2f5; + --color-actionBrandText: #fff; + --color-actionFocus: #009990; + --color-formFieldFocusLabel: #008078; + --color-formFieldTextPrimary: #1a1a1a; + --color-formFieldTextSecondary: #666; + --color-formFieldBorder: #8c8c8c; + --color-formFieldBorderHover: #333; + --color-error: #b24000; + --color-toggleOff: #737373; + --color-toggleOffHover: #404040; + --color-activeCanvas: #f9f9fb; + --color-popoverCanvas: #fff; + --color-popoverBorder: #d9d9d9; + --color-menuItemHover: #008078; + --color-menuItemHoverText: #fff; + --color-menuItemActive: #004d48; + --color-navCurrentTab: #e0f0ef; + --color-navCurrentTabText: #008078; + --color-tooltipCanvas: #1a1a1a; + --color-tooltipText: #f2f2f2; + --color-drawerCanvas: #fff; + --color-emptyCanvas: #f3f3f3; + --color-dividerPrimary: #333; + --color-dividerSecondary: #8c8c8c; + --color-dividerTertiary: #d9d9d9; + --color-calloutBackgroundPrimary: #e8f7f6; + --color-calloutBackgroundSecondary: #fdf2f5; + --color-calloutAccent: #1a1a1a; + --color-newsroomBackgroundPrimary: #fff0e3; + --color-newsroomBackgroundSecondary: #db6900; + --color-newsroomBackgroundText: #1a1a1a; + --color-checkboxLabel: #404040; + --color-checkboxBorder: #d9d9d9; + --color-checkboxBackground: #fff; + --color-checkboxInputBorder: #d9d9d9; + --color-checkboxInputBackground: #fff; + --color-checkboxHighlight: #009990; + --color-checkboxLabelSelected: #008078; + --color-checkboxBorderSelected: #008078; + --color-checkboxBackgroundSelected: #e8f7f6; + --color-checkboxInputBorderSelected: #008078; + --color-checkboxInputBackgroundSelected: #008078; + --color-paginationText: #008078; + --color-paginationHover: #f2f2f2; + --color-paginationHoverText: #008078; + --color-paginationActive: #e8f7f6; + --color-paginationActiveText: #008078; +} +.colormode-dark { + --color-canvas: #1a1a1a; + --color-textPrimary: #f2f2f2; + --color-textSecondary: #8c8c8c; + --color-textTertiary: #737373; + --color-textLinkHover: #00a69c; + --color-textLinkPressed: #00d9cc; + --color-textAccent: #95d2ff; + --color-actionPrimary: #008078; + --color-actionPrimaryHover: #004d48; + --color-actionPrimarySubdued: #00403c; + --color-actionPrimaryText: #fff; + --color-actionSecondary: #f2f2f2; + --color-actionSecondaryHover: #f2f2f2; + --color-actionSecondaryHoverText: #1a1a1a; + --color-actionSecondaryText: #f2f2f2; + --color-actionBrand: #ef4056; + --color-actionBrandHover: #901424; + --color-actionBrandSubdued: #6c000e; + --color-actionBrandText: #fff; + --color-actionFocus: #00ccc0; + --color-formFieldFocusLabel: #00a69c; + --color-formFieldTextPrimary: #f2f2f2; + --color-formFieldTextSecondary: #8c8c8c; + --color-formFieldBorder: #737373; + --color-formFieldBorderHover: #ccc; + --color-error: #e55300; + --color-toggleOff: #737373; + --color-toggleOffHover: #404040; + --color-activeCanvas: #333; + --color-popoverCanvas: #333; + --color-popoverBorder: #595959; + --color-menuItemHover: #008078; + --color-menuItemHoverText: #fff; + --color-menuItemActive: #004d48; + --color-navCurrentTab: #274f4c; + --color-navCurrentTabText: #00ccc0; + --color-tooltipCanvas: #f2f2f2; + --color-tooltipText: #1a1a1a; + --color-drawerCanvas: #333; + --color-emptyCanvas: #333; + --color-dividerPrimary: #ccc; + --color-dividerSecondary: #737373; + --color-dividerTertiary: #404040; + --color-calloutBackgroundPrimary: #004d48; + --color-calloutBackgroundSecondary: #333; + --color-calloutAccent: #00ccc0; + --color-newsroomBackgroundPrimary: #fff0e3; + --color-newsroomBackgroundSecondary: #db6900; + --color-newsroomBackgroundText: #1a1a1a; + --color-checkboxLabel: #fff; + --color-checkboxBorder: #8c8c8c; + --color-checkboxBackground: #1a1a1a; + --color-checkboxInputBorder: #8c8c8c; + --color-checkboxInputBackground: #1a1a1a; + --color-checkboxHighlight: #009990; + --color-checkboxLabelSelected: #e8f7f6; + --color-checkboxBorderSelected: #e8f7f6; + --color-checkboxBackgroundSelected: #008078; + --color-checkboxInputBorderSelected: #fff; + --color-checkboxInputBackgroundSelected: #fff; + --color-paginationText: #00ccc0; + --color-paginationHover: #404040; + --color-paginationHoverText: #00ccc0; + --color-paginationActive: #333; + --color-paginationActiveText: #f2f2f2; +} +.colormode-sepia { + --color-canvas: #f5eddd; + --color-textPrimary: #191917; + --color-textSecondary: #66635c; + --color-textTertiary: #8c877e; + --color-textLinkHover: #00736c; + --color-textLinkPressed: #00403c; + --color-textAccent: #1649ac; + --color-actionPrimary: #00736c; + --color-actionPrimaryHover: #00403c; + --color-actionPrimarySubdued: #e8f7f6; + --color-actionPrimaryText: #fff; + --color-actionSecondary: #191917; + --color-actionSecondaryHover: #191917; + --color-actionSecondaryHoverText: #fffcf7; + --color-actionSecondaryText: #191917; + --color-actionBrand: #ef4056; + --color-actionBrandHover: #901424; + --color-actionBrandSubdued: #fdf2f5; + --color-actionBrandText: #fff; + --color-actionFocus: #009990; + --color-formFieldFocusLabel: #00736c; + --color-formFieldTextPrimary: #191917; + --color-formFieldTextSecondary: #66635c; + --color-formFieldBorder: #8c877e; + --color-formFieldBorderHover: #33312e; + --color-error: #b24000; + --color-toggleOff: #66635c; + --color-toggleOffHover: #403e3a; + --color-activeCanvas: #fff4de; + --color-popoverCanvas: #f5eddd; + --color-popoverBorder: #ccc5b8; + --color-menuItemHover: #00736c; + --color-menuItemHoverText: #fffcf7; + --color-menuItemActive: #00403c; + --color-navCurrentTab: #d8decf; + --color-navCurrentTabText: #00736c; + --color-tooltipCanvas: #191917; + --color-tooltipText: #f2f2f2; + --color-drawerCanvas: #f5eddd; + --color-emptyCanvas: #e0d9ca; + --color-dividerPrimary: #33312e; + --color-dividerSecondary: #8c877e; + --color-dividerTertiary: #ccc5b8; + --color-calloutBackgroundPrimary: #e8f7f6; + --color-calloutBackgroundSecondary: #fdf2f5; + --color-calloutAccent: #1a1a1a; + --color-newsroomBackgroundPrimary: #fff0e3; + --color-newsroomBackgroundSecondary: #db6900; + --color-newsroomBackgroundText: #1a1a1a; + --color-checkboxLabel: #404040; + --color-checkboxBorder: #d9d9d9; + --color-checkboxBackground: #f5eddd; + --color-checkboxInputBorder: #8c8c8c; + --color-checkboxInputBackground: #f5eddd; + --color-checkboxHighlight: #009990; + --color-checkboxLabelSelected: #008078; + --color-checkboxBorderSelected: #008078; + --color-checkboxBackgroundSelected: #e8f7f6; + --color-checkboxInputBorderSelected: #008078; + --color-checkboxInputBackgroundSelected: #008078; + --color-paginationText: #00736c; + --color-paginationHover: #e5decf; + --color-paginationHoverText: #00736c; + --color-paginationActive: #ccc5b8; + --color-paginationActiveText: #191917; +} +:root { + --color-grey10: #1a1a1a; + --color-grey20: #333; + --color-grey25: #404040; + --color-grey30: #4d4d4d; + --color-grey35: #595959; + --color-grey40: #666; + --color-grey45: #737373; + --color-grey55: #8c8c8c; + --color-grey65: #a6a6a6; + --color-grey80: #ccc; + --color-grey85: #d9d9d9; + --color-grey95: #f2f2f2; + --color-white100: #fff; + --color-sepia10: #191917; + --color-sepia20: #33312e; + --color-sepia25: #403e3a; + --color-sepia40: #66635c; + --color-sepia45: #736f68; + --color-sepia55: #8c877e; + --color-sepia65: #a6a095; + --color-sepia80: #ccc5b8; + --color-sepia90: #e5decf; + --color-sepia96: #f5eddd; + --color-sepia100: #fff7e6; + --color-cream100: #fffcf7; + --color-teal25: #00403c; + --color-teal30: #004d48; + --color-teal45: #00736c; + --color-teal50: #008078; + --color-teal60: #009990; + --color-teal65: #00a69c; + --color-teal70: #00b2a8; + --color-teal75: #00bfb4; + --color-teal80: #00ccc0; + --color-teal85: #00d9cc; + --color-teal100: #e8f7f6; + --color-tealDarker: #004d48; + --color-tealDark: #008078; + --color-teal: #009990; + --color-tealLight: #95d5d2; + --color-tealLightest: #e8f7f6; + --color-coralDarker: #6c000e; + --color-coralDark: #901424; + --color-coral: #ef4056; + --color-coralLight: #f9bfd1; + --color-coralLightest: #fdf2f5; + --color-amberDarker: #b24000; + --color-amberDark: #e55300; + --color-amber: #fcb643; + --color-amberLight: #ffd25e; + --color-amberLightest: #fffbe3; + --color-mintDarker: #0b6639; + --color-mintDark: #29a668; + --color-mint: #00cb77; + --color-mintLight: #82ecb7; + --color-mintLightest: #c6ffe3; + --color-lapisDarker: #00256d; + --color-lapisDark: #1649ac; + --color-lapis: #3668ff; + --color-lapisLight: #95d2ff; + --color-lapisLightest: #dceaff; + --color-apricotDarker: #9f2600; + --color-apricotDark: #d23807; + --color-apricot: #f67d6d; + --color-apricotLight: #feb69f; + --color-apricotLightest: #fdf0ec; + --color-irisDarker: #802ac3; + --color-irisDark: #9971ef; + --color-iris: #c4a5f7; + --color-irisLight: #dab5ff; + --color-irisLightest: #f2deff; + --color-brandPocket: #ef4056; + --color-brandFacebook: #3b5998; + --color-brandTwitter: #00aced; + --color-brandReddit: #ff4500; + --color-brandLinkedin: #007bb6; + --color-brandMastodon: #563acc; + --fontSerif: 'Blanco OSF', Garamond, Times, Serif; + --fontSerifAlt: 'Doyle', Garamond, Times, Serif; + --fontSansSerif: 'Graphik Web', 'Helvetica Neue', Helvetica, Arial, Sans-Serif; + --fontSizeRootSmall: 80%; + --fontSizeRootMedium: 87.5%; + --fontSizeRoot: 100%; + --fontSize065: 0.625rem; + --fontSize075: 0.75rem; + --fontSize085: 0.875rem; + --fontSize100: 1rem; + --fontSize125: 1.1875rem; + --fontSize150: 1.4375rem; + --fontSize175: 1.75rem; + --fontSize200: 2.0625rem; + --fontSize250: 2.5rem; + --fontSize300: 3rem; + --spacing025: 0.25rem; + --spacing050: 0.5rem; + --spacing075: 0.75rem; + --spacing100: 1rem; + --spacing150: 1.5rem; + --spacing250: 2.5rem; + --spacing400: 4rem; + --spacing650: 6.5rem; + --size025: 0.25rem; + --size050: 0.5rem; + --size075: 0.75rem; + --size100: 1rem; + --size125: 1.25rem; + --size150: 1.5rem; + --size200: 2rem; + --size250: 2.5rem; + --size300: 3rem; + --size400: 4rem; + --size500: 5rem; + --zIndexRaised: 3; + --zIndexHeader: 5; + --zIndexTooltip: 10; + --zIndexModalShade: 20; + --zIndexModal: 21; + --zIndexColorModePicker: 30; + --borderStyle: 1px solid var(--color-formFieldBorder); + --borderRadius: 4px; + --buttonBorderRadius: 8px; + --dividerStyle: 1px solid var(--color-dividerTertiary); + --raisedCanvas: 0 2px 12px rgba(0, 0, 0, 0.08); + --itemActionLight: 0 3px 8px rgba(0, 0, 0, 0.1); + --itemActionsDark: 0 3px 8px rgba(0, 0, 0, 0.4); + --easingAccelerate: cubic-bezier(0.4, 0, 1, 1); + --easingDecelerate: cubic-bezier(0, 0, 0.2, 1); + --easingStandard: cubic-bezier(0.4, 0, 0.2, 1); + --uiControlsDurationEnterMS: 100ms; + --uiControlsDurationExitMS: 50ms; + --dialogsDurationEnterMS: 150ms; + --dialogsDurationExitMS: 75ms; + --navDrawerDurationEnterMS: 250ms; + --navDrawerDurationExitMS: 200ms; + --selectDownArrowLight: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22292.4%22%20height=%22292.4%22%3E%3Cpath%20fill=%22%23000000%22%20d=%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E'); + --selectDownArrowDark: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22292.4%22%20height=%22292.4%22%3E%3Cpath%20fill=%22%23FFFFFF%22%20d=%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E'); + --checkboxCheckMarkLight: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%2216%22%20height=%2213%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M4.635%2012.175L1.095%209.21a1.5%201.5%200%20011.927-2.3l2.49%202.087%207.45-7.962a1.5%201.5%200%20012.191%202.05l-8.391%208.968a1.5%201.5%200%2001-2.126.123z%22%20fill=%22%23FFFFFF%22/%3E%3C/svg%3E'); + --checkboxCheckMarkColor: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%2216%22%20height=%2213%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M4.635%2012.175L1.095%209.21a1.5%201.5%200%20011.927-2.3l2.49%202.087%207.45-7.962a1.5%201.5%200%20012.191%202.05l-8.391%208.968a1.5%201.5%200%2001-2.126.123z%22%20fill=%22%23008078%22/%3E%3C/svg%3E'); + --checkboxCheckMarkHover: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width=%2216%22%20height=%2213%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20fill-rule=%22evenodd%22%20clip-rule=%22evenodd%22%20d=%22M4.635%2012.175L1.095%209.21a1.5%201.5%200%20011.927-2.3l2.49%202.087%207.45-7.962a1.5%201.5%200%20012.191%202.05l-8.391%208.968a1.5%201.5%200%2001-2.126.123z%22%20fill=%22%23004D48%22/%3E%3C/svg%3E'); + --crossIconColor: url('data:image/svg+xml;charset=US-ASCII,%20%3Csvg%20width=%2212%22%20height=%2212%22%20viewBox=%220%200%2012%2012%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M2.36369%200.405544C1.82296%20-0.135181%200.94627%20-0.135181%200.405544%200.405544C-0.135181%200.94627%20-0.135181%201.82296%200.405544%202.36369L4.04186%206L0.405544%209.63631C-0.135181%2010.177%20-0.135181%2011.0537%200.405544%2011.5945C0.946271%2012.1352%201.82296%2012.1352%202.36369%2011.5945L6%207.95814L9.63631%2011.5945C10.177%2012.1352%2011.0537%2012.1352%2011.5945%2011.5945C12.1352%2011.0537%2012.1352%2010.177%2011.5945%209.63631L7.95814%206L11.5945%202.36369C12.1352%201.82296%2012.1352%200.94627%2011.5945%200.405544C11.0537%20-0.135181%2010.177%20-0.135181%209.63631%200.405544L6%204.04186L2.36369%200.405544Z%22%20fill=%22%23737373%22/%3E%3C/svg%3E'); + --crossIconHover: url('data:image/svg+xml;charset=US-ASCII,%20%3Csvg%20width=%2212%22%20height=%2212%22%20viewBox=%220%200%2012%2012%22%20fill=%22none%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d=%22M2.36369%200.405544C1.82296%20-0.135181%200.94627%20-0.135181%200.405544%200.405544C-0.135181%200.94627%20-0.135181%201.82296%200.405544%202.36369L4.04186%206L0.405544%209.63631C-0.135181%2010.177%20-0.135181%2011.0537%200.405544%2011.5945C0.946271%2012.1352%201.82296%2012.1352%202.36369%2011.5945L6%207.95814L9.63631%2011.5945C10.177%2012.1352%2011.0537%2012.1352%2011.5945%2011.5945C12.1352%2011.0537%2012.1352%2010.177%2011.5945%209.63631L7.95814%206L11.5945%202.36369C12.1352%201.82296%2012.1352%200.94627%2011.5945%200.405544C11.0537%20-0.135181%2010.177%20-0.135181%209.63631%200.405544L6%204.04186L2.36369%200.405544Z%22%20fill=%22%23404040%22/%3E%3C/svg%3E'); +} /* TYPOGRAPHY --------------------------------------------- */ -:root{font-size:var(--fontSizeRoot)} -body{background-color:var(--color-canvas);color:var(--color-textPrimary);font-family:var(--fontSansSerif)} -.h1,h1{font-size:3rem;line-height:125%;margin:0 0 2.5rem} -.h2,h2{font-size:2.5rem} -.h2,.h3,h2,h3{line-height:120%;margin:0 0 1.5rem} -.h3,h3{font-size:2rem} -.h4,h4{font-size:1.75rem;line-height:128%;margin:0 0 1.5rem} -.h5,h5{font-size:1.5rem;line-height:122%} -.h5,.h6,h5,h6{margin:0 0 1rem} -.h6,h6{font-size:1.25rem;line-height:126%} -ol,p,ul{font-size:1.25rem;margin:0 0 1.5rem} -ol,ul{padding:0 0 0 1.5em} +:root { + font-size: var(--fontSizeRoot); +} +body { + background-color: var(--color-canvas); + color: var(--color-textPrimary); + font-family: var(--fontSansSerif); +} +.h1, +h1 { + font-size: 3rem; + line-height: 125%; + margin: 0 0 2.5rem; +} +.h2, +h2 { + font-size: 2.5rem; +} +.h2, +.h3, +h2, +h3 { + line-height: 120%; + margin: 0 0 1.5rem; +} +.h3, +h3 { + font-size: 2rem; +} +.h4, +h4 { + font-size: 1.75rem; + line-height: 128%; + margin: 0 0 1.5rem; +} +.h5, +h5 { + font-size: 1.5rem; + line-height: 122%; +} +.h5, +.h6, +h5, +h6 { + margin: 0 0 1rem; +} +.h6, +h6 { + font-size: 1.25rem; + line-height: 126%; +} +ol, +p, +ul { + font-size: 1.25rem; + margin: 0 0 1.5rem; +} +ol, +ul { + padding: 0 0 0 1.5em; +} /* BASIC ELEMENTS --------------------------------------------- */ -form{font-family:var(--fontSansSerif)} -legend{border-bottom:1px solid var(--color-formFieldBorder);display:block;font-size:var(--fontSize085);font-weight:700;margin:0 0 var(--spacing150) 0} -input[type=color],input[type=date],input[type=datetime-local],input[type=email],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,textarea{-webkit-appearance:none;background:none;border:none;border-radius:var(--borderRadius);box-shadow:0 0 0 1px var(--color-formFieldBorder);color:var(--color-textPrimary);display:block;font-family:var(--fontSansSerif);line-height:160%;outline:none;padding:var(--spacing050) var(--spacing075);width:100%} -input[type=color]:disabled,input[type=date]:disabled,input[type=datetime-local]:disabled,input[type=email]:disabled,input[type=month]:disabled,input[type=number]:disabled,input[type=password]:disabled,input[type=search]:disabled,input[type=tel]:disabled,input[type=text]:disabled,input[type=time]:disabled,input[type=url]:disabled,input[type=week]:disabled,select:disabled,textarea:disabled{opacity:.5;pointer-events:none} -input[type=color]:hover:enabled,input[type=date]:hover:enabled,input[type=datetime-local]:hover:enabled,input[type=email]:hover:enabled,input[type=month]:hover:enabled,input[type=number]:hover:enabled,input[type=password]:hover:enabled,input[type=search]:hover:enabled,input[type=tel]:hover:enabled,input[type=text]:hover:enabled,input[type=time]:hover:enabled,input[type=url]:hover:enabled,input[type=week]:hover:enabled,select:hover:enabled,textarea:hover:enabled{box-shadow:0 0 0 1px var(--color-formFieldBorderHover)} -input[type=color]:focus:enabled,input[type=date]:focus:enabled,input[type=datetime-local]:focus:enabled,input[type=email]:focus:enabled,input[type=month]:focus:enabled,input[type=number]:focus:enabled,input[type=password]:focus:enabled,input[type=search]:focus:enabled,input[type=tel]:focus:enabled,input[type=text]:focus:enabled,input[type=time]:focus:enabled,input[type=url]:focus:enabled,input[type=week]:focus:enabled,select:focus:enabled,textarea:focus:enabled{box-shadow:0 0 0 2px var(--color-actionPrimary)} -input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none;display:none} -select:-moz-focusring{color:transparent;text-shadow:0 0 0 var(--color-textPrimary)} -label{cursor:pointer;font-family:var(--fontSansSerif)} -label.block{align-items:center;display:flex} -label>input[type=checkbox],label>input[type=radio]{cursor:pointer;margin:0 .725rem 0 0} -input[type=checkbox]+label,input[type=radio]+label{display:inline-block;margin:0 0 0 var(--spacing075);vertical-align:middle} -input[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-canvas);border:2px solid var(--color-formFieldBorder);border-radius:50%;height:var(--size150);margin:var(--size050) 0 var(--size050);outline:none;transition:border 50ms cubic-bezier(.4,0,.2,1),background 50ms cubic-bezier(.4,0,.2,1);vertical-align:middle;width:var(--size150)} -input[type=radio]+label{cursor:pointer;display:inline-block;margin:var(--size050) 0 var(--size050);min-height:24px;padding:0 24px;position:relative;vertical-align:bottom} -input[type=radio]+label:after,input[type=radio]+label:before{border-radius:50%;content:"";position:absolute;transition:all 50ms ease;transition-property:transform,border-color} -input[type=radio]+label:before{border:2px solid var(--color-formFieldBorder);height:24px;left:-12px;top:0;width:24px} -input[type=radio]+label:after{background:var(--color-actionPrimary);height:14px;left:-7px;top:5px;transform:scale(0);width:14px} -input[type=radio]:focus{outline:2px solid var(--color-actionPrimary);outline-offset:2px} -input[type=radio]:hover:enabled,input[type=radio]:hover:enabled+label:before{border-color:var(--color-actionPrimaryHover)} -input[type=radio]:disabled+label{opacity:.5} -input[type=radio]:disabled:hover+label,input[type=radio]:disabled:hover+label:before{cursor:not-allowed} -input[type=radio]:checked{background-color:var(--color-actionPrimary);box-shadow:inset 0 0 0 2px var(--color-canvas)} -input[type=radio]:checked,input[type=radio]:checked+label:before{border-color:var(--color-actionPrimary)} -input[type=radio]:checked+label:after{transform:scale(1)} -input[type=radio]:checked:active:enabled+label:before,input[type=radio]:checked:hover:enabled+label:before{border-color:var(--color-actionPrimaryHover)} -input[type=radio]:checked:active:enabled+label:after,input[type=radio]:checked:hover:enabled+label:after{background:var(--color-actionPrimaryHover)} -input[type=radio]:focus+label:before{box-shadow:0 0 0 2px var(--color-canvas),0 0 0 4px var(--color-formFieldFocusLabel)} -input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-canvas);border:2px solid var(--color-formFieldBorder);border-radius:4px;height:var(--size150);margin:var(--size050) 0 var(--size050);outline:none;transition:border 50ms cubic-bezier(.4,0,.2,1),background 50ms cubic-bezier(.4,0,.2,1);vertical-align:middle;width:var(--size150)} -input[type=checkbox]+label{width:calc(100% - var(--spacing075) - var(--size150))} -input[type=checkbox]:hover{border:2px solid var(--color-actionPrimary)} -input[type=checkbox]:active{border:2px solid var(--color-actionPrimaryHover)} -input[type=checkbox]:before{content:var(--checkboxCheckMarkLight);display:block;line-height:normal;opacity:0;text-align:center;transform:scale(0);transition:opacity .1s cubic-bezier(.4,0,.2,1),transform .1s cubic-bezier(.4,0,.2,1)} -input[type=checkbox]:checked{background:var(--color-actionPrimary);border:2px solid var(--color-actionPrimary)} -input[type=checkbox]:checked:before{opacity:1;transform:scale(1)} -input[type=checkbox]:checked:hover{background:var(--color-actionPrimaryHover);border:2px solid var(--color-actionPrimaryHover)} -input[type=checkbox]:focus{box-shadow:0 0 0 2px var(--color-canvas),0 0 0 4px var(--color-formFieldFocusLabel)} -input[type=checkbox]:disabled,input[type=checkbox]:disabled+label,input[type=checkbox]:disabled:checked,input[type=checkbox]:disabled:checked+label{opacity:.5;pointer-events:none} -input.toggle[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-toggleOff);border:none;border-radius:18px;color:var(--color-actionPrimary);cursor:pointer;height:36px;margin:.25 0;outline:none;transition:background 50ms cubic-bezier(.4,0,.2,1);vertical-align:middle;width:64px} -input.toggle[type=checkbox]+label{width:auto} -input.toggle[type=checkbox]:active,input.toggle[type=checkbox]:hover{background-color:var(--color-toggleOffHover);border:none} -input.toggle[type=checkbox]:active:before,input.toggle[type=checkbox]:hover:before{content:var(--crossIconHover)} -input.toggle[type=checkbox]:before{align-items:center;background-color:var(--color-canvas);border-radius:18px;content:var(--crossIconColor);display:flex;height:32px;justify-content:center;line-height:normal;margin:2px;opacity:1;transform:translateX(0);transition:transform .15s cubic-bezier(.4,0,.2,1);width:32px} -input.toggle[type=checkbox]:checked{background:var(--color-actionPrimary);border:none;color:var(--color-actionPrimary)} -input.toggle[type=checkbox]:checked:before{content:var(--checkboxCheckMarkColor);opacity:1;transform:translateX(28px)} -input.toggle[type=checkbox]:checked:hover{background:var(--color-actionPrimaryHover);border:none} -input.toggle[type=checkbox]:checked:hover:before{content:var(--checkboxCheckMarkHover)} -input.toggle[type=checkbox]:focus{box-shadow:0 0 0 2px var(--color-canvas),0 0 0 4px var(--color-formFieldFocusLabel)} -input.toggle[type=checkbox]:disabled,input.toggle[type=checkbox]:disabled+label,input.toggle[type=checkbox]:disabled:checked,input.toggle[type=checkbox]:disabled:checked+label{opacity:.5;pointer-events:none} -select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:var(--selectDownArrowLight);background-position:right .7rem top 50%;background-repeat:no-repeat;background-size:11px auto;padding-right:1.725rem} -.colormode-dark select{background-image:var(--selectDownArrowDark)} -option{color:var(--color-textPrimary)} -.colormode-dark option{color:var(--color-canvas)} -a{color:inherit;text-decoration:underline;transition:color .1s ease-out} -@media (hover:hover) and (pointer:fine){a:hover{color:var(--color-textLinkHover)}} -a.button,button,input[type=button],input[type=reset],input[type=submit]{background-color:var(--color-actionPrimary);border:none;border-radius:var(--buttonBorderRadius);color:var(--color-actionPrimaryText);display:inline-block;font-family:var(--fontSansSerif);font-size:1rem;line-height:110%;padding:.75rem;text-decoration:none;white-space:nowrap} -a.button:hover,button:hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{background-color:var(--color-actionPrimaryHover);text-decoration:none} -a.button:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{outline:1px auto var(--color-actionFocus);outline-offset:3px} -a.button:disabled,button:disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{opacity:.5;pointer-events:none} -a.button[data-tooltip],button[data-tooltip],input[type=button][data-tooltip],input[type=reset][data-tooltip],input[type=submit][data-tooltip]{border:2px solid var(--color-canvas)} -a.button[data-tooltip]:focus,button[data-tooltip]:focus,input[type=button][data-tooltip]:focus,input[type=reset][data-tooltip]:focus,input[type=submit][data-tooltip]:focus{box-shadow:0 0 0 2px var(--color-actionFocus);outline:none} -a.button.large,button.large,input[type=button].large,input[type=reset].large,input[type=submit].large{font-size:1.25rem;padding:1rem} -a.button.small,button.small,input[type=button].small,input[type=reset].small,input[type=submit].small{font-size:.85rem;line-height:1rem;padding:.75rem} -a.button.tiny,button.tiny,input[type=button].tiny,input[type=reset].tiny,input[type=submit].tiny{font-size:.85rem;line-height:1rem;padding:.375rem .75rem} -a.button.tiny .icon,button.tiny .icon,input[type=button].tiny .icon,input[type=reset].tiny .icon,input[type=submit].tiny .icon{font-size:1rem} -.colormode-dark a.button,.colormode-dark button,.colormode-dark input[type=button],.colormode-dark input[type=reset],.colormode-dark input[type=submit]{font-weight:500} -a.button.secondary,button.secondary,input[type=button].secondary,input[type=reset].secondary,input[type=submit].secondary{background-color:var(--color-canvas);border:1px solid var(--color-actionSecondary);color:var(--color-actionSecondaryText)} -a.button.secondary:hover,button.secondary:hover,input[type=button].secondary:hover,input[type=reset].secondary:hover,input[type=submit].secondary:hover{background-color:var(--color-actionSecondaryHover);color:var(--color-actionSecondaryHoverText)} -a.button.brand,button.brand,input[type=button].brand,input[type=reset].brand,input[type=submit].brand{background-color:var(--color-actionBrand);color:var(--color-actionBrandText)} -a.button.brand:hover,button.brand:hover,input[type=button].brand:hover,input[type=reset].brand:hover,input[type=submit].brand:hover{background-color:var(--color-actionBrandHover)} -a.button.text,button.text,input[type=button].text,input[type=reset].text,input[type=submit].text{background-color:transparent;color:var(--color-textPrimary)} -a.button.text:hover,button.text:hover,input[type=button].text:hover,input[type=reset].text:hover,input[type=submit].text:hover{background-color:transparent;color:var(--color-textLinkHover);text-decoration:underline} -a.button.text:focus,button.text:focus,input[type=button].text:focus,input[type=reset].text:focus,input[type=submit].text:focus{outline:none;outline-offset:3px} -a.button.inline,button.inline,input[type=button].inline,input[type=reset].inline,input[type=submit].inline{background:none;color:var(--color-textPrimary);display:inline;font-family:inherit;font-size:inherit;padding:0;text-decoration:underline} -a.button.inline:focus,button.inline:focus,input[type=button].inline:focus,input[type=reset].inline:focus,input[type=submit].inline:focus{outline:inherit} -a.button.inline:focus:before,button.inline:focus:before,input[type=button].inline:focus:before,input[type=reset].inline:focus:before,input[type=submit].inline:focus:before{display:none} -a.button.inline:hover,button.inline:hover,input[type=button].inline:hover,input[type=reset].inline:hover,input[type=submit].inline:hover{color:var(--color-textLinkHover)} -a.button.outline,button.outline,input[type=button].outline,input[type=reset].outline,input[type=submit].outline{background:transparent;border:1px solid var(--color-dividerTertiary);border-radius:8px;color:var(--color-textSecondary)} -a.button.outline:active,a.button.outline:hover,button.outline:active,button.outline:hover,input[type=button].outline:active,input[type=button].outline:hover,input[type=reset].outline:active,input[type=reset].outline:hover,input[type=submit].outline:active,input[type=submit].outline:hover{border-color:var(--color-actionFocus);color:var(--color-actionFocus)} -a.button+a.button,a.button+input[type=button],a.button+input[type=reset],a.button+input[type=submit],button+a.button,button+input[type=button],button+input[type=reset],button+input[type=submit],input[type=button]+a.button,input[type=button]+input[type=button],input[type=button]+input[type=reset],input[type=button]+input[type=submit],input[type=reset]+a.button,input[type=reset]+input[type=button],input[type=reset]+input[type=reset],input[type=reset]+input[type=submit],input[type=submit]+a.button,input[type=submit]+input[type=button],input[type=submit]+input[type=reset],input[type=submit]+input[type=submit]{margin-right:1rem} -#ot-sdk-btn.optanon-show-settings,#ot-sdk-btn.ot-sdk-show-settings{align-items:center;background-color:transparent;border:none;cursor:pointer;display:inline-flex;font-family:inherit;font-size:1rem;font-weight:400;justify-content:center;line-height:1.5;padding:0} -@media screen and (-ms-high-contrast:active){#ot-sdk-btn.optanon-show-settings,#ot-sdk-btn.ot-sdk-show-settings{border:2px solid}} -#ot-sdk-btn.optanon-show-settings,#ot-sdk-btn.ot-sdk-show-settings{color:var(--color-textPrimary);text-decoration:underline} -#ot-sdk-btn.optanon-show-settings:hover,#ot-sdk-btn.ot-sdk-show-settings:hover{color:var(--color-textLinkHover)} -#ot-sdk-btn.optanon-show-settings:focus,#ot-sdk-btn.ot-sdk-show-settings:focus{outline:none} -.icon{height:1.5rem} -.icon.small{height:1rem} +form { + font-family: var(--fontSansSerif); +} +legend { + border-bottom: 1px solid var(--color-formFieldBorder); + display: block; + font-size: var(--fontSize085); + font-weight: 700; + margin: 0 0 var(--spacing150) 0; +} +input[type='color'], +input[type='date'], +input[type='datetime-local'], +input[type='email'], +input[type='month'], +input[type='number'], +input[type='password'], +input[type='search'], +input[type='tel'], +input[type='text'], +input[type='time'], +input[type='url'], +input[type='week'], +select, +textarea { + -webkit-appearance: none; + background: none; + border: none; + border-radius: var(--borderRadius); + box-shadow: 0 0 0 1px var(--color-formFieldBorder); + color: var(--color-textPrimary); + display: block; + font-family: var(--fontSansSerif); + line-height: 160%; + outline: none; + padding: var(--spacing050) var(--spacing075); + width: 100%; +} +input[type='color']:disabled, +input[type='date']:disabled, +input[type='datetime-local']:disabled, +input[type='email']:disabled, +input[type='month']:disabled, +input[type='number']:disabled, +input[type='password']:disabled, +input[type='search']:disabled, +input[type='tel']:disabled, +input[type='text']:disabled, +input[type='time']:disabled, +input[type='url']:disabled, +input[type='week']:disabled, +select:disabled, +textarea:disabled { + opacity: 0.5; + pointer-events: none; +} +input[type='color']:hover:enabled, +input[type='date']:hover:enabled, +input[type='datetime-local']:hover:enabled, +input[type='email']:hover:enabled, +input[type='month']:hover:enabled, +input[type='number']:hover:enabled, +input[type='password']:hover:enabled, +input[type='search']:hover:enabled, +input[type='tel']:hover:enabled, +input[type='text']:hover:enabled, +input[type='time']:hover:enabled, +input[type='url']:hover:enabled, +input[type='week']:hover:enabled, +select:hover:enabled, +textarea:hover:enabled { + box-shadow: 0 0 0 1px var(--color-formFieldBorderHover); +} +input[type='color']:focus:enabled, +input[type='date']:focus:enabled, +input[type='datetime-local']:focus:enabled, +input[type='email']:focus:enabled, +input[type='month']:focus:enabled, +input[type='number']:focus:enabled, +input[type='password']:focus:enabled, +input[type='search']:focus:enabled, +input[type='tel']:focus:enabled, +input[type='text']:focus:enabled, +input[type='time']:focus:enabled, +input[type='url']:focus:enabled, +input[type='week']:focus:enabled, +select:focus:enabled, +textarea:focus:enabled { + box-shadow: 0 0 0 2px var(--color-actionPrimary); +} +input[type='search']::-webkit-search-cancel-button, +input[type='search']::-webkit-search-decoration, +input[type='search']::-webkit-search-results-button, +input[type='search']::-webkit-search-results-decoration { + -webkit-appearance: none; + display: none; +} +select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 var(--color-textPrimary); +} +label { + cursor: pointer; + font-family: var(--fontSansSerif); +} +label.block { + align-items: center; + display: flex; +} +label > input[type='checkbox'], +label > input[type='radio'] { + cursor: pointer; + margin: 0 0.725rem 0 0; +} +input[type='checkbox'] + label, +input[type='radio'] + label { + display: inline-block; + margin: 0 0 0 var(--spacing075); + vertical-align: middle; +} +input[type='radio'] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: var(--color-canvas); + border: 2px solid var(--color-formFieldBorder); + border-radius: 50%; + height: var(--size150); + margin: var(--size050) 0 var(--size050); + outline: none; + transition: + border 50ms cubic-bezier(0.4, 0, 0.2, 1), + background 50ms cubic-bezier(0.4, 0, 0.2, 1); + vertical-align: middle; + width: var(--size150); +} +input[type='radio'] + label { + cursor: pointer; + display: inline-block; + margin: var(--size050) 0 var(--size050); + min-height: 24px; + padding: 0 24px; + position: relative; + vertical-align: bottom; +} +input[type='radio'] + label:after, +input[type='radio'] + label:before { + border-radius: 50%; + content: ''; + position: absolute; + transition: all 50ms ease; + transition-property: transform, border-color; +} +input[type='radio'] + label:before { + border: 2px solid var(--color-formFieldBorder); + height: 24px; + left: -12px; + top: 0; + width: 24px; +} +input[type='radio'] + label:after { + background: var(--color-actionPrimary); + height: 14px; + left: -7px; + top: 5px; + transform: scale(0); + width: 14px; +} +input[type='radio']:focus { + outline: 2px solid var(--color-actionPrimary); + outline-offset: 2px; +} +input[type='radio']:hover:enabled, +input[type='radio']:hover:enabled + label:before { + border-color: var(--color-actionPrimaryHover); +} +input[type='radio']:disabled + label { + opacity: 0.5; +} +input[type='radio']:disabled:hover + label, +input[type='radio']:disabled:hover + label:before { + cursor: not-allowed; +} +input[type='radio']:checked { + background-color: var(--color-actionPrimary); + box-shadow: inset 0 0 0 2px var(--color-canvas); +} +input[type='radio']:checked, +input[type='radio']:checked + label:before { + border-color: var(--color-actionPrimary); +} +input[type='radio']:checked + label:after { + transform: scale(1); +} +input[type='radio']:checked:active:enabled + label:before, +input[type='radio']:checked:hover:enabled + label:before { + border-color: var(--color-actionPrimaryHover); +} +input[type='radio']:checked:active:enabled + label:after, +input[type='radio']:checked:hover:enabled + label:after { + background: var(--color-actionPrimaryHover); +} +input[type='radio']:focus + label:before { + box-shadow: + 0 0 0 2px var(--color-canvas), + 0 0 0 4px var(--color-formFieldFocusLabel); +} +input[type='checkbox'] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: var(--color-canvas); + border: 2px solid var(--color-formFieldBorder); + border-radius: 4px; + height: var(--size150); + margin: var(--size050) 0 var(--size050); + outline: none; + transition: + border 50ms cubic-bezier(0.4, 0, 0.2, 1), + background 50ms cubic-bezier(0.4, 0, 0.2, 1); + vertical-align: middle; + width: var(--size150); +} +input[type='checkbox'] + label { + width: calc(100% - var(--spacing075) - var(--size150)); +} +input[type='checkbox']:hover { + border: 2px solid var(--color-actionPrimary); +} +input[type='checkbox']:active { + border: 2px solid var(--color-actionPrimaryHover); +} +input[type='checkbox']:before { + content: var(--checkboxCheckMarkLight); + display: block; + line-height: normal; + opacity: 0; + text-align: center; + transform: scale(0); + transition: + opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1), + transform 0.1s cubic-bezier(0.4, 0, 0.2, 1); +} +input[type='checkbox']:checked { + background: var(--color-actionPrimary); + border: 2px solid var(--color-actionPrimary); +} +input[type='checkbox']:checked:before { + opacity: 1; + transform: scale(1); +} +input[type='checkbox']:checked:hover { + background: var(--color-actionPrimaryHover); + border: 2px solid var(--color-actionPrimaryHover); +} +input[type='checkbox']:focus { + box-shadow: + 0 0 0 2px var(--color-canvas), + 0 0 0 4px var(--color-formFieldFocusLabel); +} +input[type='checkbox']:disabled, +input[type='checkbox']:disabled + label, +input[type='checkbox']:disabled:checked, +input[type='checkbox']:disabled:checked + label { + opacity: 0.5; + pointer-events: none; +} +input.toggle[type='checkbox'] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: var(--color-toggleOff); + border: none; + border-radius: 18px; + color: var(--color-actionPrimary); + cursor: pointer; + height: 36px; + margin: 0.25 0; + outline: none; + transition: background 50ms cubic-bezier(0.4, 0, 0.2, 1); + vertical-align: middle; + width: 64px; +} +input.toggle[type='checkbox'] + label { + width: auto; +} +input.toggle[type='checkbox']:active, +input.toggle[type='checkbox']:hover { + background-color: var(--color-toggleOffHover); + border: none; +} +input.toggle[type='checkbox']:active:before, +input.toggle[type='checkbox']:hover:before { + content: var(--crossIconHover); +} +input.toggle[type='checkbox']:before { + align-items: center; + background-color: var(--color-canvas); + border-radius: 18px; + content: var(--crossIconColor); + display: flex; + height: 32px; + justify-content: center; + line-height: normal; + margin: 2px; + opacity: 1; + transform: translateX(0); + transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); + width: 32px; +} +input.toggle[type='checkbox']:checked { + background: var(--color-actionPrimary); + border: none; + color: var(--color-actionPrimary); +} +input.toggle[type='checkbox']:checked:before { + content: var(--checkboxCheckMarkColor); + opacity: 1; + transform: translateX(28px); +} +input.toggle[type='checkbox']:checked:hover { + background: var(--color-actionPrimaryHover); + border: none; +} +input.toggle[type='checkbox']:checked:hover:before { + content: var(--checkboxCheckMarkHover); +} +input.toggle[type='checkbox']:focus { + box-shadow: + 0 0 0 2px var(--color-canvas), + 0 0 0 4px var(--color-formFieldFocusLabel); +} +input.toggle[type='checkbox']:disabled, +input.toggle[type='checkbox']:disabled + label, +input.toggle[type='checkbox']:disabled:checked, +input.toggle[type='checkbox']:disabled:checked + label { + opacity: 0.5; + pointer-events: none; +} +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-image: var(--selectDownArrowLight); + background-position: right 0.7rem top 50%; + background-repeat: no-repeat; + background-size: 11px auto; + padding-right: 1.725rem; +} +.colormode-dark select { + background-image: var(--selectDownArrowDark); +} +option { + color: var(--color-textPrimary); +} +.colormode-dark option { + color: var(--color-canvas); +} +a { + color: inherit; + text-decoration: underline; + transition: color 0.1s ease-out; +} +@media (hover: hover) and (pointer: fine) { + a:hover { + color: var(--color-textLinkHover); + } +} +a.button, +button, +input[type='button'], +input[type='reset'], +input[type='submit'] { + background-color: var(--color-actionPrimary); + border: none; + border-radius: var(--buttonBorderRadius); + color: var(--color-actionPrimaryText); + display: inline-block; + font-family: var(--fontSansSerif); + font-size: 1rem; + line-height: 110%; + padding: 0.75rem; + text-decoration: none; + white-space: nowrap; +} +a.button:hover, +button:hover, +input[type='button']:hover, +input[type='reset']:hover, +input[type='submit']:hover { + background-color: var(--color-actionPrimaryHover); + text-decoration: none; +} +a.button:focus, +button:focus, +input[type='button']:focus, +input[type='reset']:focus, +input[type='submit']:focus { + outline: 1px auto var(--color-actionFocus); + outline-offset: 3px; +} +a.button:disabled, +button:disabled, +input[type='button']:disabled, +input[type='reset']:disabled, +input[type='submit']:disabled { + opacity: 0.5; + pointer-events: none; +} +a.button[data-tooltip], +button[data-tooltip], +input[type='button'][data-tooltip], +input[type='reset'][data-tooltip], +input[type='submit'][data-tooltip] { + border: 2px solid var(--color-canvas); +} +a.button[data-tooltip]:focus, +button[data-tooltip]:focus, +input[type='button'][data-tooltip]:focus, +input[type='reset'][data-tooltip]:focus, +input[type='submit'][data-tooltip]:focus { + box-shadow: 0 0 0 2px var(--color-actionFocus); + outline: none; +} +a.button.large, +button.large, +input[type='button'].large, +input[type='reset'].large, +input[type='submit'].large { + font-size: 1.25rem; + padding: 1rem; +} +a.button.small, +button.small, +input[type='button'].small, +input[type='reset'].small, +input[type='submit'].small { + font-size: 0.85rem; + line-height: 1rem; + padding: 0.75rem; +} +a.button.tiny, +button.tiny, +input[type='button'].tiny, +input[type='reset'].tiny, +input[type='submit'].tiny { + font-size: 0.85rem; + line-height: 1rem; + padding: 0.375rem 0.75rem; +} +a.button.tiny .icon, +button.tiny .icon, +input[type='button'].tiny .icon, +input[type='reset'].tiny .icon, +input[type='submit'].tiny .icon { + font-size: 1rem; +} +.colormode-dark a.button, +.colormode-dark button, +.colormode-dark input[type='button'], +.colormode-dark input[type='reset'], +.colormode-dark input[type='submit'] { + font-weight: 500; +} +a.button.secondary, +button.secondary, +input[type='button'].secondary, +input[type='reset'].secondary, +input[type='submit'].secondary { + background-color: var(--color-canvas); + border: 1px solid var(--color-actionSecondary); + color: var(--color-actionSecondaryText); +} +a.button.secondary:hover, +button.secondary:hover, +input[type='button'].secondary:hover, +input[type='reset'].secondary:hover, +input[type='submit'].secondary:hover { + background-color: var(--color-actionSecondaryHover); + color: var(--color-actionSecondaryHoverText); +} +a.button.brand, +button.brand, +input[type='button'].brand, +input[type='reset'].brand, +input[type='submit'].brand { + background-color: var(--color-actionBrand); + color: var(--color-actionBrandText); +} +a.button.brand:hover, +button.brand:hover, +input[type='button'].brand:hover, +input[type='reset'].brand:hover, +input[type='submit'].brand:hover { + background-color: var(--color-actionBrandHover); +} +a.button.text, +button.text, +input[type='button'].text, +input[type='reset'].text, +input[type='submit'].text { + background-color: transparent; + color: var(--color-textPrimary); +} +a.button.text:hover, +button.text:hover, +input[type='button'].text:hover, +input[type='reset'].text:hover, +input[type='submit'].text:hover { + background-color: transparent; + color: var(--color-textLinkHover); + text-decoration: underline; +} +a.button.text:focus, +button.text:focus, +input[type='button'].text:focus, +input[type='reset'].text:focus, +input[type='submit'].text:focus { + outline: none; + outline-offset: 3px; +} +a.button.inline, +button.inline, +input[type='button'].inline, +input[type='reset'].inline, +input[type='submit'].inline { + background: none; + color: var(--color-textPrimary); + display: inline; + font-family: inherit; + font-size: inherit; + padding: 0; + text-decoration: underline; +} +a.button.inline:focus, +button.inline:focus, +input[type='button'].inline:focus, +input[type='reset'].inline:focus, +input[type='submit'].inline:focus { + outline: inherit; +} +a.button.inline:focus:before, +button.inline:focus:before, +input[type='button'].inline:focus:before, +input[type='reset'].inline:focus:before, +input[type='submit'].inline:focus:before { + display: none; +} +a.button.inline:hover, +button.inline:hover, +input[type='button'].inline:hover, +input[type='reset'].inline:hover, +input[type='submit'].inline:hover { + color: var(--color-textLinkHover); +} +a.button.outline, +button.outline, +input[type='button'].outline, +input[type='reset'].outline, +input[type='submit'].outline { + background: transparent; + border: 1px solid var(--color-dividerTertiary); + border-radius: 8px; + color: var(--color-textSecondary); +} +a.button.outline:active, +a.button.outline:hover, +button.outline:active, +button.outline:hover, +input[type='button'].outline:active, +input[type='button'].outline:hover, +input[type='reset'].outline:active, +input[type='reset'].outline:hover, +input[type='submit'].outline:active, +input[type='submit'].outline:hover { + border-color: var(--color-actionFocus); + color: var(--color-actionFocus); +} +a.button + a.button, +a.button + input[type='button'], +a.button + input[type='reset'], +a.button + input[type='submit'], +button + a.button, +button + input[type='button'], +button + input[type='reset'], +button + input[type='submit'], +input[type='button'] + a.button, +input[type='button'] + input[type='button'], +input[type='button'] + input[type='reset'], +input[type='button'] + input[type='submit'], +input[type='reset'] + a.button, +input[type='reset'] + input[type='button'], +input[type='reset'] + input[type='reset'], +input[type='reset'] + input[type='submit'], +input[type='submit'] + a.button, +input[type='submit'] + input[type='button'], +input[type='submit'] + input[type='reset'], +input[type='submit'] + input[type='submit'] { + margin-right: 1rem; +} +#ot-sdk-btn.optanon-show-settings, +#ot-sdk-btn.ot-sdk-show-settings { + align-items: center; + background-color: transparent; + border: none; + cursor: pointer; + display: inline-flex; + font-family: inherit; + font-size: 1rem; + font-weight: 400; + justify-content: center; + line-height: 1.5; + padding: 0; +} +@media screen and (-ms-high-contrast: active) { + #ot-sdk-btn.optanon-show-settings, + #ot-sdk-btn.ot-sdk-show-settings { + border: 2px solid; + } +} +#ot-sdk-btn.optanon-show-settings, +#ot-sdk-btn.ot-sdk-show-settings { + color: var(--color-textPrimary); + text-decoration: underline; +} +#ot-sdk-btn.optanon-show-settings:hover, +#ot-sdk-btn.ot-sdk-show-settings:hover { + color: var(--color-textLinkHover); +} +#ot-sdk-btn.optanon-show-settings:focus, +#ot-sdk-btn.ot-sdk-show-settings:focus { + outline: none; +} +.icon { + height: 1.5rem; +} +.icon.small { + height: 1rem; +} /* APP FONTS --------------------------------------------- */ -@font-face{font-family:Blanco OSF;src:url(https://assets.getpocket.com/web-ui/assets/BlancoOSFWeb-Regular.7d5a8216b7607638e81feb748552a702.woff2)} -@font-face{font-family:Blanco OSF;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/BlancoOSFWeb-Bold.5597c92771d64715fcfc7af63ba976e9.woff2)} -@font-face{font-family:Blanco OSF;font-style:italic;src:url(https://assets.getpocket.com/web-ui/assets/BlancoOSFWeb-Italic.5e84440eca9d20d6c8311bd3bd6af473.woff2)} -@font-face{font-family:Blanco OSF;font-style:italic;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/BlancoOSFWeb-BoldItalic.45e2653f7bf12f75c2f9e8cef5e95e64.woff2)} -@font-face{font-family:Doyle;font-weight:400;src:url(https://assets.getpocket.com/web-ui/assets/Doyle-Regular.96ab1443bd74e896395776fc10e78857.woff2)} -@font-face{font-family:Doyle;font-style:italic;font-weight:400;src:url(https://assets.getpocket.com/web-ui/assets/Doyle-RegularItalic.e7af5c11daccb053aa0244f7a3e74ebf.woff2)} -@font-face{font-family:Doyle;font-weight:500;src:url(https://assets.getpocket.com/web-ui/assets/Doyle-Medium.eb6ee0eb205e8467cb3b0e61191217b2.woff2)} -@font-face{font-family:Doyle;font-style:italic;font-weight:500;src:url(https://assets.getpocket.com/web-ui/assets/Doyle-MediumItalic.10520e4820b03f63912a9b52ba5aae7a.woff2)} -@font-face{font-family:Graphik Web;font-weight:100;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-Thin-Web.f68162edaf17e6d6222ab9da5ee6a3ee.woff2)} -@font-face{font-family:Graphik Web;font-style:italic;font-weight:100;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-ThinItalic-Web.0d830398baa16b5b118e9c3a72544630.woff2)} -@font-face{font-family:Graphik Web;font-weight:200;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-Extralight-Web.3e7d8320e82a4ac557bffb30f49a7dd2.woff2)} -@font-face{font-family:Graphik Web;font-style:italic;font-weight:200;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-ExtralightItalic-Web.e2021e99b9b03e623fb707081f647e11.woff2)} -@font-face{font-family:Graphik Web;font-weight:300;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-Light-Web.4389379ad479dec8e9013bda556ef683.woff2)} -@font-face{font-family:Graphik Web;font-style:italic;font-weight:300;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-LightItalic-Web.65c8f8e7f2f448733fe4393d0967fa8b.woff2)} -@font-face{font-family:Graphik Web;font-weight:400;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-Regular-Web.e05a3b2ff4a3813954bcf8bdb83f9804.woff2)} -@font-face{font-family:Graphik Web;font-style:italic;font-weight:400;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-RegularItalic-Web.d12ea36eea34954d9fd7dee0ac29640c.woff2)} -@font-face{font-family:Graphik Web;font-weight:500;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-Medium-Web.c28abeb53c5265642e173cb1f81e8091.woff2)} -@font-face{font-family:Graphik Web;font-style:italic;font-weight:500;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-MediumItalic-Web.e983ce64531b413c98468b4d6c8a13da.woff2)} -@font-face{font-family:Graphik Web;font-weight:600;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-Semibold-Web.1e9ac78e3efd08db3b5db4380e3a1e6f.woff2)} -@font-face{font-family:Graphik Web;font-style:italic;font-weight:600;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-SemiboldItalic-Web.876e8402cf5eabe6b470184b3a9a99f9.woff2)} -@font-face{font-family:Graphik Web;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-Bold-Web.f9055a490bbbea456422bc02fde65dbd.woff2)} -@font-face{font-family:Graphik Web;font-style:italic;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-BoldItalic-Web.97ee2ed109056dd42d1c56779c9f17ad.woff2)} -@font-face{font-family:Graphik Web;font-weight:800;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-Black-Web.a525aba1cce162a75f23ba5232bafe71.woff2)} -@font-face{font-family:Graphik Web;font-style:italic;font-weight:800;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-BlackItalic-Web.e417d4a1935480005c401445a708b71c.woff2)} -@font-face{font-family:Graphik Web;font-weight:900;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-Super-Web.f16672fba11f8f3c5422665538f11733.woff2)} -@font-face{font-family:Graphik Web;font-style:italic;font-weight:900;src:url(https://assets.getpocket.com/web-ui/assets/Graphik-SuperItalic-Web.bf26f31b291983c02f78313e9b32c394.woff2)} +@font-face { + font-family: Blanco OSF; + src: url(https://assets.getpocket.com/web-ui/assets/BlancoOSFWeb-Regular.7d5a8216b7607638e81feb748552a702.woff2); +} +@font-face { + font-family: Blanco OSF; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/BlancoOSFWeb-Bold.5597c92771d64715fcfc7af63ba976e9.woff2); +} +@font-face { + font-family: Blanco OSF; + font-style: italic; + src: url(https://assets.getpocket.com/web-ui/assets/BlancoOSFWeb-Italic.5e84440eca9d20d6c8311bd3bd6af473.woff2); +} +@font-face { + font-family: Blanco OSF; + font-style: italic; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/BlancoOSFWeb-BoldItalic.45e2653f7bf12f75c2f9e8cef5e95e64.woff2); +} +@font-face { + font-family: Doyle; + font-weight: 400; + src: url(https://assets.getpocket.com/web-ui/assets/Doyle-Regular.96ab1443bd74e896395776fc10e78857.woff2); +} +@font-face { + font-family: Doyle; + font-style: italic; + font-weight: 400; + src: url(https://assets.getpocket.com/web-ui/assets/Doyle-RegularItalic.e7af5c11daccb053aa0244f7a3e74ebf.woff2); +} +@font-face { + font-family: Doyle; + font-weight: 500; + src: url(https://assets.getpocket.com/web-ui/assets/Doyle-Medium.eb6ee0eb205e8467cb3b0e61191217b2.woff2); +} +@font-face { + font-family: Doyle; + font-style: italic; + font-weight: 500; + src: url(https://assets.getpocket.com/web-ui/assets/Doyle-MediumItalic.10520e4820b03f63912a9b52ba5aae7a.woff2); +} +@font-face { + font-family: Graphik Web; + font-weight: 100; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-Thin-Web.f68162edaf17e6d6222ab9da5ee6a3ee.woff2); +} +@font-face { + font-family: Graphik Web; + font-style: italic; + font-weight: 100; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-ThinItalic-Web.0d830398baa16b5b118e9c3a72544630.woff2); +} +@font-face { + font-family: Graphik Web; + font-weight: 200; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-Extralight-Web.3e7d8320e82a4ac557bffb30f49a7dd2.woff2); +} +@font-face { + font-family: Graphik Web; + font-style: italic; + font-weight: 200; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-ExtralightItalic-Web.e2021e99b9b03e623fb707081f647e11.woff2); +} +@font-face { + font-family: Graphik Web; + font-weight: 300; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-Light-Web.4389379ad479dec8e9013bda556ef683.woff2); +} +@font-face { + font-family: Graphik Web; + font-style: italic; + font-weight: 300; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-LightItalic-Web.65c8f8e7f2f448733fe4393d0967fa8b.woff2); +} +@font-face { + font-family: Graphik Web; + font-weight: 400; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-Regular-Web.e05a3b2ff4a3813954bcf8bdb83f9804.woff2); +} +@font-face { + font-family: Graphik Web; + font-style: italic; + font-weight: 400; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-RegularItalic-Web.d12ea36eea34954d9fd7dee0ac29640c.woff2); +} +@font-face { + font-family: Graphik Web; + font-weight: 500; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-Medium-Web.c28abeb53c5265642e173cb1f81e8091.woff2); +} +@font-face { + font-family: Graphik Web; + font-style: italic; + font-weight: 500; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-MediumItalic-Web.e983ce64531b413c98468b4d6c8a13da.woff2); +} +@font-face { + font-family: Graphik Web; + font-weight: 600; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-Semibold-Web.1e9ac78e3efd08db3b5db4380e3a1e6f.woff2); +} +@font-face { + font-family: Graphik Web; + font-style: italic; + font-weight: 600; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-SemiboldItalic-Web.876e8402cf5eabe6b470184b3a9a99f9.woff2); +} +@font-face { + font-family: Graphik Web; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-Bold-Web.f9055a490bbbea456422bc02fde65dbd.woff2); +} +@font-face { + font-family: Graphik Web; + font-style: italic; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-BoldItalic-Web.97ee2ed109056dd42d1c56779c9f17ad.woff2); +} +@font-face { + font-family: Graphik Web; + font-weight: 800; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-Black-Web.a525aba1cce162a75f23ba5232bafe71.woff2); +} +@font-face { + font-family: Graphik Web; + font-style: italic; + font-weight: 800; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-BlackItalic-Web.e417d4a1935480005c401445a708b71c.woff2); +} +@font-face { + font-family: Graphik Web; + font-weight: 900; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-Super-Web.f16672fba11f8f3c5422665538f11733.woff2); +} +@font-face { + font-family: Graphik Web; + font-style: italic; + font-weight: 900; + src: url(https://assets.getpocket.com/web-ui/assets/Graphik-SuperItalic-Web.bf26f31b291983c02f78313e9b32c394.woff2); +} /* READER FONTS --------------------------------------------- */ -@font-face{font-family:IdealSans;src:url(https://assets.getpocket.com/web-ui/assets/IdealSansSSm-Book_Web.8ceb4de0789288847af513bd51c5818a.woff2)} -@font-face{font-family:IdealSans;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/IdealSansSSm-BookItalic_Web.e3cf9a006e02acd2311610854754c42b.woff2)} -@font-face{font-family:IdealSans;font-style:italic;src:url(https://assets.getpocket.com/web-ui/assets/IdealSansSSm-Semibold_Web.b23b3824fab9ab4dc8006a6f24423b0f.woff2)} -@font-face{font-family:IdealSans;font-style:italic;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/IdealSansSSm-SemiboldItalic_Web.c851e377c22a9cf75b8b20ab0a388038.woff2)} -@font-face{font-family:Inter;src:url(https://assets.getpocket.com/web-ui/assets/Inter-Regular.bcdeb499f86c03ab9093fe49b5c795ae.woff2)} -@font-face{font-family:Inter;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/Inter-Italic.2b168e564b4ccdcac9e17b648d9f41b0.woff2)} -@font-face{font-family:Inter;font-style:italic;src:url(https://assets.getpocket.com/web-ui/assets/Inter-Bold.fe38e3f307fcbac1a801c0c38dff56ef.woff2)} -@font-face{font-family:Inter;font-style:italic;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/Inter-BoldItalic.6d8374eb1ad9557adf0daf03048adcc9.woff2)} -@font-face{font-family:Sentinel;src:url(https://assets.getpocket.com/web-ui/assets/Sentinel-Book_Web.2a0c49d105a76fdcf8843ae4912732d5.woff2)} -@font-face{font-family:Sentinel;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/Sentinel-BookItalic_Web.9f137203ba87748d9f8a9239729b065a.woff2)} -@font-face{font-family:Sentinel;font-style:italic;src:url(https://assets.getpocket.com/web-ui/assets/Sentinel-Semibold_Web.f3cd3775fc8ca441f3694632cdce03da.woff2)} -@font-face{font-family:Sentinel;font-style:italic;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/Sentinel-SemiboldItalic_Web.434b7971453df9b22c5cdf4c60f994e2.woff2)} -@font-face{font-family:Tiempos;src:url(https://assets.getpocket.com/web-ui/assets/TiemposTextWeb-Regular.bf6dfa623745f8f9be2c9306dd445f99.woff2)} -@font-face{font-family:Tiempos;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/TiemposTextWeb-RegularItalic.c7b3f3d417c54b9cf7eb7026b9eff8af.woff2)} -@font-face{font-family:Tiempos;font-style:italic;src:url(https://assets.getpocket.com/web-ui/assets/TiemposTextWeb-Semibold.7e0dadfec14fed4ca5dd26b8ff3b7265.woff2)} -@font-face{font-family:Tiempos;font-style:italic;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/TiemposTextWeb-SemiboldItalic.694d22d08e25711bb9f3ceb9b78f1e7f.woff2)} -@font-face{font-family:Whitney;src:url(https://assets.getpocket.com/web-ui/assets/Whitney-Book_Web.98aad5d22b5244dd121c379f3cea2230.woff2)} -@font-face{font-family:Whitney;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/Whitney-BookItal_Web.80efdde5b097eda872e1754487ce68fc.woff2)} -@font-face{font-family:Whitney;font-style:italic;src:url(https://assets.getpocket.com/web-ui/assets/Whitney-Semibld_Web.de2dee03c81082edf5341031656ea505.woff2)} -@font-face{font-family:Whitney;font-style:italic;font-weight:700;src:url(https://assets.getpocket.com/web-ui/assets/Whitney-SemibldItal_Web.fdd7d75fa8fa59d56cc3c402c5bccb55.woff2)} -/* BRAZE STYLES --------------------------------------------- */ -.ab-iam-root .ab-in-app-message.ab-background{background-color:var(--color-canvas)!important;border:1px solid rgba(0,0,0,.12)!important;border-radius:var(--borderRadius)!important;box-shadow:0 8px 24px rgba(0,0,0,.12)!important} -.ab-iam-root .ab-message-text{color:var(--color-textPrimary)!important;font-family:var(--fontSansSerif)!important;font-weight:400!important} -.ab-iam-root .ab-close-button svg path{fill:var(--color-textPrimary)!important} -.ab-iam-root .ab-close-button:hover svg path{fill:var(--color-textLinkHover)!important} +@font-face { + font-family: IdealSans; + src: url(https://assets.getpocket.com/web-ui/assets/IdealSansSSm-Book_Web.8ceb4de0789288847af513bd51c5818a.woff2); +} +@font-face { + font-family: IdealSans; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/IdealSansSSm-BookItalic_Web.e3cf9a006e02acd2311610854754c42b.woff2); +} +@font-face { + font-family: IdealSans; + font-style: italic; + src: url(https://assets.getpocket.com/web-ui/assets/IdealSansSSm-Semibold_Web.b23b3824fab9ab4dc8006a6f24423b0f.woff2); +} +@font-face { + font-family: IdealSans; + font-style: italic; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/IdealSansSSm-SemiboldItalic_Web.c851e377c22a9cf75b8b20ab0a388038.woff2); +} +@font-face { + font-family: Inter; + src: url(https://assets.getpocket.com/web-ui/assets/Inter-Regular.bcdeb499f86c03ab9093fe49b5c795ae.woff2); +} +@font-face { + font-family: Inter; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/Inter-Italic.2b168e564b4ccdcac9e17b648d9f41b0.woff2); +} +@font-face { + font-family: Inter; + font-style: italic; + src: url(https://assets.getpocket.com/web-ui/assets/Inter-Bold.fe38e3f307fcbac1a801c0c38dff56ef.woff2); +} +@font-face { + font-family: Inter; + font-style: italic; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/Inter-BoldItalic.6d8374eb1ad9557adf0daf03048adcc9.woff2); +} +@font-face { + font-family: Sentinel; + src: url(https://assets.getpocket.com/web-ui/assets/Sentinel-Book_Web.2a0c49d105a76fdcf8843ae4912732d5.woff2); +} +@font-face { + font-family: Sentinel; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/Sentinel-BookItalic_Web.9f137203ba87748d9f8a9239729b065a.woff2); +} +@font-face { + font-family: Sentinel; + font-style: italic; + src: url(https://assets.getpocket.com/web-ui/assets/Sentinel-Semibold_Web.f3cd3775fc8ca441f3694632cdce03da.woff2); +} +@font-face { + font-family: Sentinel; + font-style: italic; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/Sentinel-SemiboldItalic_Web.434b7971453df9b22c5cdf4c60f994e2.woff2); +} +@font-face { + font-family: Tiempos; + src: url(https://assets.getpocket.com/web-ui/assets/TiemposTextWeb-Regular.bf6dfa623745f8f9be2c9306dd445f99.woff2); +} +@font-face { + font-family: Tiempos; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/TiemposTextWeb-RegularItalic.c7b3f3d417c54b9cf7eb7026b9eff8af.woff2); +} +@font-face { + font-family: Tiempos; + font-style: italic; + src: url(https://assets.getpocket.com/web-ui/assets/TiemposTextWeb-Semibold.7e0dadfec14fed4ca5dd26b8ff3b7265.woff2); +} +@font-face { + font-family: Tiempos; + font-style: italic; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/TiemposTextWeb-SemiboldItalic.694d22d08e25711bb9f3ceb9b78f1e7f.woff2); +} +@font-face { + font-family: Whitney; + src: url(https://assets.getpocket.com/web-ui/assets/Whitney-Book_Web.98aad5d22b5244dd121c379f3cea2230.woff2); +} +@font-face { + font-family: Whitney; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/Whitney-BookItal_Web.80efdde5b097eda872e1754487ce68fc.woff2); +} +@font-face { + font-family: Whitney; + font-style: italic; + src: url(https://assets.getpocket.com/web-ui/assets/Whitney-Semibld_Web.de2dee03c81082edf5341031656ea505.woff2); +} +@font-face { + font-family: Whitney; + font-style: italic; + font-weight: 700; + src: url(https://assets.getpocket.com/web-ui/assets/Whitney-SemibldItal_Web.fdd7d75fa8fa59d56cc3c402c5bccb55.woff2); +} diff --git a/clients/web/src/actions.js b/clients/web/src/actions.js index f9b04e372..6c549d283 100644 --- a/clients/web/src/actions.js +++ b/clients/web/src/actions.js @@ -157,13 +157,6 @@ export const SNOWPLOW_TRACK_PAGE_VIEW = 'SNOWPLOW_TRACK_PAGE_VIEW' export const SNOWPLOW_TRACK_ITEM_IMPRESSION = 'SNOWPLOW_TRACK_ITEM_IMPRESSION' export const SNOWPLOW_SEND_EVENT = 'SNOWPLOW_SEND_EVENT' -// Braze -export const BRAZE_INITIALIZED = 'BRAZE_INITIALIZED' -export const BRAZE_TOKEN_REQUEST = 'BRAZE_TOKEN_REQUEST' -export const BRAZE_TOKEN_SUCCESS = 'BRAZE_TOKEN_SUCCESS' -export const BRAZE_TOKEN_FAILURE = 'BRAZE_TOKEN_FAILURE' -export const TOGGLE_BRAZE = 'TOGGLE_BRAZE' - // Home Items export const HOME_CONTENT_REQUEST = 'HOME_CONTENT_REQUEST' export const HOME_CONTENT_SUCCESS = 'HOME_CONTENT_SUCCESS' diff --git a/clients/web/src/common/api/internal/braze.js b/clients/web/src/common/api/internal/braze.js deleted file mode 100644 index 14dc059a2..000000000 --- a/clients/web/src/common/api/internal/braze.js +++ /dev/null @@ -1,6 +0,0 @@ -export const getBrazeToken = (userId) => { - const body = JSON.stringify({ userId }) - - return fetch('/web-client-api/braze', { method: 'POST', body }) - .then(response => response.json()) -} diff --git a/clients/web/src/common/constants.js b/clients/web/src/common/constants.js index f5fce717e..d342b588f 100644 --- a/clients/web/src/common/constants.js +++ b/clients/web/src/common/constants.js @@ -31,11 +31,6 @@ export const CAPTCHA_SITE_KEY = '6LfIpyYUAAAAAPtNSKafudr16odFL1eQte0vR0Py' // AP export const GOOGLE_ANALYTICS_ID = 'UA-370613-9' export const FACEBOOK_APP_ID = '131450656879143' -// BRAZE -export const BRAZE_API_KEY_DEV = '76e48d24-506c-4e7e-bec2-c0f262ebbcd5' // API key for Pocket (Dev) - Web -export const BRAZE_API_KEY_PROD = '4fee55ff-f105-4a61-843b-856c583b109e' // API key for Pocket - Web (THIS IS PRODUCTION) -export const BRAZE_SDK_ENDPOINT = 'sdk.iad-05.braze.com' // SDK endpoint for Pocket (Dev) - Web (same for both dev & prod) - // SNOWPLOW export const API_USER_ID = 89624 // Pocket backend identifier for an API user used in Snowplow analytic events export const SNOWPLOW_SCHEMA_VENDOR = 'com.pocket' diff --git a/clients/web/src/common/utilities/braze/braze-lazy-load.js b/clients/web/src/common/utilities/braze/braze-lazy-load.js deleted file mode 100644 index 14a27950a..000000000 --- a/clients/web/src/common/utilities/braze/braze-lazy-load.js +++ /dev/null @@ -1,22 +0,0 @@ -// Braze methods: https://js.appboycdn.com/web-sdk/latest/doc/modules/braze.html -export { - initialize, - openSession, - automaticallyShowInAppMessages, - changeUser, - wipeData, - showInAppMessage, - requestPushPermission, - isPushBlocked, - isPushPermissionGranted, - isDisabled, - disableSDK, - enableSDK, - destroy, - setSdkAuthenticationSignature, - subscribeToSdkAuthenticationFailures, - logFeatureFlagImpression, - getFeatureFlag, - getAllFeatureFlags, - logCustomEvent -} from '@braze/web-sdk' diff --git a/clients/web/src/common/utilities/braze/feature-flags.js b/clients/web/src/common/utilities/braze/feature-flags.js deleted file mode 100644 index 9f2b887e6..000000000 --- a/clients/web/src/common/utilities/braze/feature-flags.js +++ /dev/null @@ -1,2 +0,0 @@ -export const BRAZE_LISTEN = 'EXPERIMENT_POCKET_LISTEN_ON_WEB' -export const BRAZE_SEARCH = 'EXPERIMENT_POCKET_SEARCH_ON_WEB' diff --git a/clients/web/src/components/account/braze/braze.js b/clients/web/src/components/account/braze/braze.js deleted file mode 100644 index 8c2aab902..000000000 --- a/clients/web/src/components/account/braze/braze.js +++ /dev/null @@ -1,33 +0,0 @@ -import { css } from '@emotion/css' -import { useTranslation } from 'next-i18next' - -const brazeStyle = css` - padding-bottom: 3rem; - border-bottom: var(--dividerStyle); -` - -export const Braze = ({ subscribed = false, onBrazeToggle }) => { - const { t } = useTranslation() - - return ( -
-

{t('account:tracking-title', 'Tracking for in-app messaging')}

-
- - -
-
- ) -} diff --git a/clients/web/src/components/global-nav/account/global-nav-account-limited.js b/clients/web/src/components/global-nav/account/global-nav-account-limited.js index 645ad9a7c..e742e17b7 100644 --- a/clients/web/src/components/global-nav/account/global-nav-account-limited.js +++ b/clients/web/src/components/global-nav/account/global-nav-account-limited.js @@ -67,8 +67,6 @@ const GlobalNavAccountLimited = ({ }) => { const { t } = useTranslation() - const brazeInitialized = useSelector((state) => state?.braze?.initialized) - const accountMenuTriggerRef = useRef(null) const menuRef = useRef(null) @@ -96,9 +94,6 @@ const GlobalNavAccountLimited = ({ const handleHelpCase = () => onLinkClick('help') const handleLogoutCase = () => { onLinkClick('logout') - // Fire for all users when Braze launches - if (brazeInitialized) - import('common/utilities/braze/braze-lazy-load').then(({ destroy }) => destroy()) } const updateFocus = (e) => { diff --git a/clients/web/src/components/global-nav/account/global-nav-account.js b/clients/web/src/components/global-nav/account/global-nav-account.js index 8055fa1cc..358770741 100644 --- a/clients/web/src/components/global-nav/account/global-nav-account.js +++ b/clients/web/src/components/global-nav/account/global-nav-account.js @@ -116,7 +116,6 @@ const GlobalNavAccount = ({ }) => { const { t } = useTranslation() - const brazeInitialized = useSelector((state) => state?.braze?.initialized) const analyticsInitialized = useSelector((state) => state?.analytics?.initialized) const accountMenuTriggerRef = useRef(null) @@ -146,9 +145,6 @@ const GlobalNavAccount = ({ const handleHelpCase = () => onLinkClick('help') const handleLogoutCase = () => { onLinkClick('logout') - // Fire for all users when Braze launches - if (brazeInitialized) - import('common/utilities/braze/braze-lazy-load').then(({ destroy }) => destroy()) if (analyticsInitialized) clearUserData() } const updateFocus = (e) => { diff --git a/clients/web/src/connectors/dev-tools/braze-modal.js b/clients/web/src/connectors/dev-tools/braze-modal.js deleted file mode 100644 index cd275f1b3..000000000 --- a/clients/web/src/connectors/dev-tools/braze-modal.js +++ /dev/null @@ -1,40 +0,0 @@ -import React, { useEffect, useState } from 'react' -import { Modal, ModalBody } from 'components/modal/modal' - -import Mousetrap from 'mousetrap' -import { useSelector } from 'react-redux' -import { BrazeTools } from 'connectors/dev-tools/braze' - -import { featureFlagActive } from 'connectors/feature-flags/feature-flags' - -export function BrazeModal() { - const isDevBuild = process.env.SHOW_DEV === 'included' - const [modalOpen, setModalOpen] = useState(false) - - const featureState = useSelector((state) => state.features) - const brazeUser = featureFlagActive({ flag: 'lab.braze', featureState }) - const showDevTools = brazeUser || isDevBuild - - const toggleBrazeModal = () => setModalOpen(!modalOpen) - - useEffect(() => { - Mousetrap.bind('b+r', toggleBrazeModal) // Enter dev mode - return () => Mousetrap.unbind('b+r') // Clean up - }, []) //eslint-disable-line - - const appRootSelector = '#__next' - const showModal = showDevTools && modalOpen - - return ( - - - - - - ) -} diff --git a/clients/web/src/connectors/dev-tools/braze.js b/clients/web/src/connectors/dev-tools/braze.js deleted file mode 100644 index 7cca7d560..000000000 --- a/clients/web/src/connectors/dev-tools/braze.js +++ /dev/null @@ -1,83 +0,0 @@ -import { useEffect, useState } from 'react' -import { sectionStyles } from 'components/dev-tools/tool-styles' -import { useSelector } from 'react-redux' -import Link from 'next/link' - -export const BrazeTools = () => { - const [pushGranted, setPushGranted] = useState(false) - const [pushDenied, setPushDenied] = useState(false) - const { user_id } = useSelector((state) => state.user) - const brazeInitialized = useSelector((state) => state?.braze?.initialized) - - const brazeToken = useSelector((state) => state.userBraze?.token) - - useEffect(() => { - if (!brazeInitialized) return () => {} - import('common/utilities/braze/braze-lazy-load').then( - ({ isPushBlocked, isPushPermissionGranted }) => { - if (isPushBlocked()) setPushDenied(true) - if (isPushPermissionGranted()) setPushGranted(true) - } - ) - }, [brazeInitialized]) - - const wipeBrazeData = () => { - import('common/utilities/braze/braze-lazy-load').then(({ wipeData, changeUser }) => { - wipeData() - changeUser(user_id, brazeToken) - }) - } - - const requestPush = () => { - import('common/utilities/braze/braze-lazy-load').then(({ requestPushPermission }) => { - requestPushPermission( - () => setPushGranted(true), - () => setPushDenied(true) - ) - }) - } - - return brazeInitialized ? ( -
-
-
Reset Braze
-
Wipes data and starts new session
-
- {pushGranted ? ( -
-
Push notifications
-
You’re subscribed! 🎉
-
- ) : null} - {pushDenied ? ( -
-
- Push notifications are currently blocked. -
- - Please update your settings - -
-
- ) : null} - {!pushGranted && !pushDenied ? ( -
-
Push notifications
-
Allows push notifications from Braze
-
- ) : null} -
- ) : ( - - ) -} - -const BrazeOff = () => ( -

- Braze is currently turned off. Please enable Braze on the{' '} - Account Settings - page -

-) diff --git a/clients/web/src/connectors/dev-tools/dev-tools.js b/clients/web/src/connectors/dev-tools/dev-tools.js index 1677762d6..2c41f443d 100644 --- a/clients/web/src/connectors/dev-tools/dev-tools.js +++ b/clients/web/src/connectors/dev-tools/dev-tools.js @@ -1,6 +1,5 @@ import { useEffect } from 'react' import { QaModal } from 'connectors/dev-tools/qa-modal' -import { BrazeModal } from 'connectors/dev-tools/braze-modal' import { useRouter } from 'next/router' import { useDispatch, useSelector } from 'react-redux' import { featuresAssign } from 'connectors/feature-flags/feature-flags.state' @@ -47,7 +46,6 @@ export function DevTools() { return ( <> - ) } diff --git a/clients/web/src/connectors/listen/listen-login.js b/clients/web/src/connectors/listen/listen-login.js index dc6001e9a..e6f220301 100644 --- a/clients/web/src/connectors/listen/listen-login.js +++ b/clients/web/src/connectors/listen/listen-login.js @@ -6,7 +6,6 @@ import { featureFlagActive } from 'connectors/feature-flags/feature-flags' import { LOGIN_URL } from 'common/constants' import { sendSnowplowEvent } from 'connectors/snowplow/snowplow.state' import { ListenIcon } from '@ui/icons/ListenIcon' -import { BRAZE_LISTEN } from 'common/utilities/braze/feature-flags' const loggedOutStyle = css` padding: 16px 18px; @@ -36,28 +35,13 @@ const loggedOutStyle = css` export const ListenLogin = ({ itemId, path }) => { const dispatch = useDispatch() const [listenEnrolled, setListenEnrolled] = useState(false) - const brazeInitialized = useSelector((state) => state?.braze?.initialized) const userStatus = useSelector((state) => state.user.user_status) const featureState = useSelector((state) => state.features) const listenLab = featureFlagActive({ flag: 'lab.listen', featureState }) - useEffect(() => { - if (!brazeInitialized) return () => {} - import('common/utilities/braze/braze-lazy-load').then( - ({ logFeatureFlagImpression, getFeatureFlag }) => { - const flag = getFeatureFlag(BRAZE_LISTEN) - if (flag?.enabled) setListenEnrolled(true) - logFeatureFlagImpression(BRAZE_LISTEN) - } - ) - }, [brazeInitialized]) - const showListen = listenLab || listenEnrolled const signUpEvent = () => { - import('common/utilities/braze/braze-lazy-load').then(({ logCustomEvent }) => - logCustomEvent('listen.signup') - ) dispatch(sendSnowplowEvent('listen.signup')) } diff --git a/clients/web/src/connectors/listen/listen.js b/clients/web/src/connectors/listen/listen.js index 117ad3868..9eb6d7394 100644 --- a/clients/web/src/connectors/listen/listen.js +++ b/clients/web/src/connectors/listen/listen.js @@ -25,9 +25,6 @@ export const Listen = ({ itemId, path }) => { threshold: 0.5, onChange: (inView) => { if (inView) { - import('common/utilities/braze/braze-lazy-load').then(({ logCustomEvent }) => - logCustomEvent('listen.impression', analyticsData) - ) dispatch(sendSnowplowEvent('listen.impression', analyticsData)) } } @@ -35,30 +32,18 @@ export const Listen = ({ itemId, path }) => { // Events const playEvent = () => { - import('common/utilities/braze/braze-lazy-load').then(({ logCustomEvent }) => - logCustomEvent('listen.play', analyticsData) - ) dispatch(sendSnowplowEvent('listen.play', analyticsData)) } const pauseEvent = () => { - import('common/utilities/braze/braze-lazy-load').then(({ logCustomEvent }) => - logCustomEvent('listen.pause', analyticsData) - ) dispatch(sendSnowplowEvent('listen.pause', analyticsData)) } const rateChangeEvent = (rate) => { - import('common/utilities/braze/braze-lazy-load').then(({ logCustomEvent }) => - logCustomEvent('listen.rate', { ...analyticsData, value: rate }) - ) dispatch(sendSnowplowEvent('listen.rate', { ...analyticsData, value: rate })) } const endEvent = () => { - import('common/utilities/braze/braze-lazy-load').then(({ logCustomEvent }) => - logCustomEvent('listen.end', analyticsData) - ) dispatch(sendSnowplowEvent('listen.end', analyticsData)) } diff --git a/clients/web/src/connectors/settings/settings.state.js b/clients/web/src/connectors/settings/settings.state.js index 1124a8703..28d73d2d9 100644 --- a/clients/web/src/connectors/settings/settings.state.js +++ b/clients/web/src/connectors/settings/settings.state.js @@ -18,8 +18,6 @@ import { USER_TAGS_PINS_SET } from 'actions' import { PINNED_TOPICS_SET } from 'actions' -import { TOGGLE_BRAZE } from 'actions' - import { CACHE_KEY_HOME_STORED_TOPICS } from 'common/constants' const initialState = { @@ -79,15 +77,13 @@ export const settingsSagas = [ takeLatest(USER_TAGS_EDIT_SUCCESS, saveSettings), takeLatest(USER_TAGS_DELETE_SUCCESS, saveSettings), takeLatest(USER_TAGS_PINS_SET, saveSettings), - takeLatest(PINNED_TOPICS_SET, saveSettings), - takeLatest(TOGGLE_BRAZE, saveSettings) + takeLatest(PINNED_TOPICS_SET, saveSettings) ] /** SAGA :: RESPONDERS --------------------------------------------------------------- */ const getSettings = (state) => state.settings const getHomeOnboarding = (state) => state.homeOnboarding -const getBraze = (state) => state.braze?.brazeSubscribed const getSetupState = (state) => state.homeSetup function* fetchSettings() { @@ -105,12 +101,10 @@ function* saveSettings() { try { const storedSettings = yield select(getSettings) const homeOnboarding = yield select(getHomeOnboarding) - const brazeSubscribed = yield select(getBraze) const { setupStatus, userTopics } = yield select(getSetupState) const settings = { ...storedSettings, homeOnboarding, - brazeSubscribed, setupStatus, userTopics } diff --git a/clients/web/src/connectors/third-party/braze.state.js b/clients/web/src/connectors/third-party/braze.state.js deleted file mode 100644 index 1e243196e..000000000 --- a/clients/web/src/connectors/third-party/braze.state.js +++ /dev/null @@ -1,68 +0,0 @@ -import { put, takeLatest, call } from 'redux-saga/effects' -import { SETTINGS_FETCH_SUCCESS } from 'actions' -import { BRAZE_INITIALIZED } from 'actions' -import { BRAZE_TOKEN_REQUEST } from 'actions' -import { BRAZE_TOKEN_SUCCESS } from 'actions' -import { BRAZE_TOKEN_FAILURE } from 'actions' -import { TOGGLE_BRAZE } from 'actions' - -import { getBrazeToken } from 'common/api/internal/braze' - -const initialState = { - initialized: false, - brazeSubscribed: true, - token: null -} - -/** ACTIONS - --------------------------------------------------------------- */ -export const initializeBraze = () => ({ type: BRAZE_INITIALIZED }) -export const fetchBrazeToken = (userId) => ({ type: BRAZE_TOKEN_REQUEST, userId }) -export const toggleBraze = () => ({ type: TOGGLE_BRAZE }) - -/** REDUCERS - --------------------------------------------------------------- */ -export const brazeReducers = (state = initialState, action) => { - switch (action.type) { - case BRAZE_INITIALIZED: { - return { ...state, initialized: true } - } - - case BRAZE_TOKEN_SUCCESS: { - const { token } = action - return { ...state, token } - } - - case TOGGLE_BRAZE: { - return { ...state, brazeSubscribed: !state.brazeSubscribed } - } - - case SETTINGS_FETCH_SUCCESS: { - const { settings } = action - const brazeSubscribed = (settings?.brazeSubscribed === false) ? settings.brazeSubscribed : true - return { ...state, brazeSubscribed } - } - - default: - return state - } -} - -/** SAGAS :: WATCHERS - --------------------------------------------------------------- */ -export const brazeSagas = [ - takeLatest(BRAZE_TOKEN_REQUEST, brazeTokenRequest) -] - -/** SAGA :: RESPONDERS - --------------------------------------------------------------- */ -function* brazeTokenRequest({ userId }) { - try { - const token = yield call(getBrazeToken, userId) - if (!token) throw new Error('Unable to fetch token') - - yield put({ type: BRAZE_TOKEN_SUCCESS, token }) - } catch (error) { - yield put({ type: BRAZE_TOKEN_FAILURE, error }) - } -} diff --git a/clients/web/src/connectors/third-party/third-party-init.js b/clients/web/src/connectors/third-party/third-party-init.js deleted file mode 100644 index b8cdb2c5b..000000000 --- a/clients/web/src/connectors/third-party/third-party-init.js +++ /dev/null @@ -1,114 +0,0 @@ -import { useEffect } from 'react' -import { useSelector } from 'react-redux' -import { useDispatch } from 'react-redux' - -import { BRAZE_API_KEY_DEV, BRAZE_API_KEY_PROD, BRAZE_SDK_ENDPOINT } from 'common/constants' -import { initializeBraze } from 'connectors/third-party/braze.state' -import { fetchBrazeToken } from 'connectors/third-party/braze.state' - -import { featureFlagActive } from 'connectors/feature-flags/feature-flags' -import { usePrevious } from 'common/utilities/hooks/has-changed' - -/** - * Initialization file. We are using this because of the way the _app file - * is wrapped in this version. This problem will not exist when we move - * fully to web-client - */ -export function ThirdPartyInit() { - // Initialize app once per page load - const dispatch = useDispatch() - - const { user_id } = useSelector((state) => state.user) - const settingsFetched = useSelector((state) => state.settings?.settingsFetched) - const brazeInitialized = useSelector((state) => state.braze?.initialized) - const brazeSubscribed = useSelector((state) => state.braze?.brazeSubscribed) - const brazeToken = useSelector((state) => state.braze?.token) - const prevBrazeToken = usePrevious(brazeToken) - - const enableBraze = settingsFetched && brazeSubscribed - const prevBraze = usePrevious(enableBraze) - - const isProduction = process.env.NODE_ENV === 'production' - - const featureState = useSelector((state) => state.features) - const brazeLabUser = featureFlagActive({ flag: 'lab.braze', featureState }) - - useEffect(() => { - // opted out - if (!enableBraze) return () => {} - - // braze already initialized - if (brazeInitialized) return () => {} - - // no token but logged in - if (!brazeToken && user_id) { - dispatch(fetchBrazeToken(user_id)) - return () => {} - } - - const version = process.env.RELEASE_VERSION || 'v.0.0.0' - const showLogs = process.env.BRAZE_LOGS - const APIKey = isProduction ? BRAZE_API_KEY_PROD : BRAZE_API_KEY_DEV - - // lazy load braze SDK and then initialize it and call necessary functions - // see https://github.com/braze-inc/braze-web-sdk/issues/117 for more details on why we need to lazy load - import('common/utilities/braze/braze-lazy-load').then( - ({ - isDisabled, - enableSDK, - initialize, - automaticallyShowInAppMessages, - changeUser, - openSession, - subscribeToSdkAuthenticationFailures - }) => { - if (isDisabled()) enableSDK() // Was previously disabled, need to re-enable - initialize(APIKey, { - baseUrl: BRAZE_SDK_ENDPOINT, - appVersion: version, - enableLogging: (!isProduction && showLogs) || brazeLabUser, // enable logging in development or flagged users only - openCardsInNewTab: true, - enableSdkAuthentication: true, - doNotLoadFontAwesome: true - }) - automaticallyShowInAppMessages() - if (user_id && brazeToken) changeUser(user_id, brazeToken) - openSession() - if (user_id) subscribeToSdkAuthenticationFailures(() => dispatch(fetchBrazeToken(user_id))) - } - ) - - dispatch(initializeBraze()) - }, [user_id, brazeToken, brazeInitialized, enableBraze, isProduction, brazeLabUser, dispatch]) - - useEffect(() => { - // Braze turned off, and was previously on, so disable Braze - if (!enableBraze && prevBraze) { - import('common/utilities/braze/braze-lazy-load').then(({ disableSDK }) => disableSDK()) - } - }, [enableBraze, prevBraze]) - - useEffect(() => { - // braze not initialized - if (!brazeInitialized) return () => {} - - // tokens don't match! update braze SDK - if (brazeToken !== prevBrazeToken) { - import('common/utilities/braze/braze-lazy-load').then(({ setSdkAuthenticationSignature }) => - setSdkAuthenticationSignature(brazeToken) - ) - } - }, [brazeToken, prevBrazeToken, brazeInitialized]) - - useEffect(() => { - if (brazeLabUser && 'serviceWorker' in navigator) { - navigator.serviceWorker.register('/service-worker.js').then( - (registration) => - console.info('Service Worker registration successful with scope: ', registration.scope), - (err) => console.warn('Service Worker registration failed: ', err) - ) - } - }, [brazeLabUser]) - - return <>{/* put Scripts here instead of in Next Head */} -} diff --git a/clients/web/src/containers/account/account.js b/clients/web/src/containers/account/account.js index ee3472a3e..96dc7cd4f 100644 --- a/clients/web/src/containers/account/account.js +++ b/clients/web/src/containers/account/account.js @@ -6,7 +6,6 @@ import { accountStyles } from 'components/account/account' import { Premium } from 'components/account/premium/premium' import { Profile } from 'containers/account/profile/profile' import { Email } from 'containers/account/email/email' -import { Braze } from 'containers/account/braze/braze' import { ConnectedServices } from 'containers/account/connections/connections' import { Privacy } from 'containers/account/privacy/privacy' import { useTranslation } from 'next-i18next' @@ -32,7 +31,6 @@ export const Account = () => { - diff --git a/clients/web/src/containers/account/braze/braze.js b/clients/web/src/containers/account/braze/braze.js deleted file mode 100644 index 087f2729f..000000000 --- a/clients/web/src/containers/account/braze/braze.js +++ /dev/null @@ -1,17 +0,0 @@ -import { Braze as BrazeComp } from 'components/account/braze/braze' -import { useSelector, useDispatch } from 'react-redux' -import { toggleBraze } from 'connectors/third-party/braze.state' - -export const Braze = () => { - const dispatch = useDispatch() - const subscribed = useSelector((state) => state?.braze?.brazeSubscribed) - - const onBrazeToggle = () => dispatch(toggleBraze()) - - return ( - - ) -} diff --git a/clients/web/src/pages/_app.js b/clients/web/src/pages/_app.js index 0f2adc65c..ce6b31d49 100644 --- a/clients/web/src/pages/_app.js +++ b/clients/web/src/pages/_app.js @@ -25,7 +25,6 @@ import { appSetPreferences } from 'connectors/app/app.state' import { hydrateSettings } from 'connectors/settings/settings.state' import { featureFlagActive } from 'connectors/feature-flags/feature-flags' -import { ThirdPartyInit } from 'connectors/third-party/third-party-init' import { ConfirmItemsImport } from 'connectors/confirm/items-import' /** Setup Files @@ -162,7 +161,6 @@ function PocketWebClient({ Component, pageProps, err }) { return ( - diff --git a/clients/web/src/pages/api/braze/index.js b/clients/web/src/pages/api/braze/index.js deleted file mode 100644 index d076ed01b..000000000 --- a/clients/web/src/pages/api/braze/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import jwt from 'jsonwebtoken' - -const devKey = 'shhhhh, secrets 🤫' - -const isDev = process.env.SHOW_DEV === 'included' -const privateKey = process.env.BRAZE_PRIVATE_KEY || devKey -const expiration = 60 * 60 * 24 * 30 // 30 days (60s * 60m * 24h * 30d) - -export default function getBrazeToken(req, res) { - const { userId } = JSON.parse(req.body) - - const payload = { - sub: userId, - exp: Math.floor(Date.now() / 1000) + expiration - } - - const options = !isDev ? { algorithm: 'RS256', allowInsecureKeySizes: true } : null - - const token = jwt.sign(payload, privateKey, options) - - res.status(200).json(token) -} diff --git a/clients/web/src/store.js b/clients/web/src/store.js index b6a246e17..323cf1c98 100644 --- a/clients/web/src/store.js +++ b/clients/web/src/store.js @@ -9,8 +9,6 @@ import { homeSetupReducers } from 'containers/home/setup/setup.state' import { homeSetupSagas } from 'containers/home/setup/setup.state' import { appReducers, appSagas } from 'connectors/app/app.state' -import { brazeReducers } from 'connectors/third-party/braze.state' -import { brazeSagas } from 'connectors/third-party/braze.state' import { userReducers, userSagas, accountReducers } from 'containers/account/account.state' @@ -208,7 +206,6 @@ const globalReducers = { toasts: actionToastsReducers, // Notifications of action results, shortcuts: shortcutReducers, // Keyboard shortcuts, analytics: snowplowReducers, //Analytics - braze: brazeReducers, // Braze placards: placardReducers // Mozilla Ad Placements } @@ -249,7 +246,6 @@ function* rootSaga() { ...pageHomeSaga, ...userSearchSagas, ...shortcutSagas, - ...brazeSagas, ...pageSavedIdsSagas, ...itemsSavedSagas, ...pageListsInfoSagas, diff --git a/infrastructure/web/src/main.ts b/infrastructure/web/src/main.ts index 32a8253de..a3a174f43 100644 --- a/infrastructure/web/src/main.ts +++ b/infrastructure/web/src/main.ts @@ -104,10 +104,6 @@ class WebClient extends TerraformStack { name: 'SENTRY_DSN', valueFrom: `arn:aws:ssm:${region.name}:${caller.accountId}:parameter/${config.name}/${config.environment}/SENTRY_DSN` }, - { - name: 'BRAZE_PRIVATE_KEY', - valueFrom: `arn:aws:ssm:${region.name}:${caller.accountId}:parameter/${config.name}/${config.environment}/BRAZE_PRIVATE_KEY` - }, { name: 'REVALIDATION_TOKEN', valueFrom: `arn:aws:ssm:${region.name}:${caller.accountId}:parameter/${config.name}/${config.environment}/REVALIDATION_TOKEN` diff --git a/turbo.json b/turbo.json index 722675ca9..7feba7c91 100644 --- a/turbo.json +++ b/turbo.json @@ -6,8 +6,6 @@ "TEST_SNOWPLOW", "SHOW_DEV", "RELEASE_VERSION", - "BRAZE_LOGS", - "BRAZE_PRIVATE_KEY", "REVALIDATION_TOKEN" ], "ui": "stream", diff --git a/ui/styles/legacy/global.css b/ui/styles/legacy/global.css index 859b18d7e..86e2fd42d 100644 --- a/ui/styles/legacy/global.css +++ b/ui/styles/legacy/global.css @@ -495,13 +495,3 @@ a[data-tooltip-position=top]:after,button[data-tooltip-position=top]:after{botto a[data-tooltip-position=top]:hover:after,a[data-tooltip-position=top]:hover:before,button[data-tooltip-position=top]:hover:after,button[data-tooltip-position=top]:hover:before{animation-name:tooltipFadeawayTop;transform-origin:bottom} a[data-tooltip-delay]:hover:after,a[data-tooltip-delay]:hover:before,button[data-tooltip-delay]:hover:after,button[data-tooltip-delay]:hover:before{animation-delay:1s} - -/* BRAZE STYLES --------------------------------------------- */ - -.ab-iam-root .ab-in-app-message.ab-background{background-color:var(--color-canvas)!important;border:1px solid rgba(0,0,0,.12)!important;border-radius:var(--borderRadius)!important;box-shadow:0 8px 24px rgba(0,0,0,.12)!important} - -.ab-iam-root .ab-message-text{color:var(--color-textPrimary)!important;font-family:var(--fontSansSerif)!important;font-weight:400!important} - -.ab-iam-root .ab-close-button svg path{fill:var(--color-textPrimary)!important} - -.ab-iam-root .ab-close-button:hover svg path{fill:var(--color-textLinkHover)!important} diff --git a/ui/styles/legacy/index.css b/ui/styles/legacy/index.css index 1bf84d62f..271fdfcbd 100644 --- a/ui/styles/legacy/index.css +++ b/ui/styles/legacy/index.css @@ -22,5 +22,3 @@ @import url('./fonts-reader.css'); /* TOOLTIPS STYLES --------------------------------------------- */ @import url('./tooltips.css'); -/* BRAZE STYLES --------------------------------------------- */ -@import url('./braze.css');