@designcrowd/library.brand-page 6.1.17-ast-header-button → 6.1.17-ast-header-button-2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. package/lib/src/{CreatedOnBrandCrowd-de-de-Cwq9enJs.js → CreatedOnBrandCrowd-de-de-CGQppEEP.js} +1 -1
  2. package/lib/src/{CreatedOnBrandCrowd-en-us-ILK04gFj.js → CreatedOnBrandCrowd-en-us-Do8u4cNA.js} +1 -1
  3. package/lib/src/{CreatedOnBrandCrowd-es-es-CbjxLxtu.js → CreatedOnBrandCrowd-es-es-Cw9i-wIi.js} +1 -1
  4. package/lib/src/{CreatedOnBrandCrowd-fr-fr-BwBDiK9z.js → CreatedOnBrandCrowd-fr-ca-DK9cVARn.js} +1 -1
  5. package/lib/src/{CreatedOnBrandCrowd-fr-ca-BwBDiK9z.js → CreatedOnBrandCrowd-fr-fr-DK9cVARn.js} +1 -1
  6. package/lib/src/{CreatedOnBrandCrowd-pt-pt-DvhJROpG.js → CreatedOnBrandCrowd-pt-br-CKvle-Uo.js} +1 -1
  7. package/lib/src/{CreatedOnBrandCrowd-pt-br-DvhJROpG.js → CreatedOnBrandCrowd-pt-pt-CKvle-Uo.js} +1 -1
  8. package/lib/src/{CreatedOnDcom-de-de-BK9imWOh.js → CreatedOnDcom-de-de-DZGQbS8x.js} +1 -1
  9. package/lib/src/{CreatedOnDcom-en-us-CyH-_qz1.js → CreatedOnDcom-en-us-CAGyRg9Z.js} +1 -1
  10. package/lib/src/{CreatedOnDcom-es-es-Dh51qYEA.js → CreatedOnDcom-es-es-B_Xbs4CX.js} +1 -1
  11. package/lib/src/{CreatedOnDcom-fr-ca-BArRxwWX.js → CreatedOnDcom-fr-ca-B_Af6mgX.js} +1 -1
  12. package/lib/src/{CreatedOnDcom-fr-fr-CdglI-ZB.js → CreatedOnDcom-fr-fr-Dn8OKUFf.js} +1 -1
  13. package/lib/src/{CreatedOnDcom-pt-br-DCehns-G.js → CreatedOnDcom-pt-br-DFsESCzy.js} +1 -1
  14. package/lib/src/{CreatedOnDcom-pt-pt-B8hl-oew.js → CreatedOnDcom-pt-pt-CjbOJw5o.js} +1 -1
  15. package/lib/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.d.ts +0 -11
  16. package/lib/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.js +6 -11
  17. package/lib/src/brand-page/components/page/Page.mixin.d.ts +2 -1
  18. package/lib/src/brand-page/components/page/Page.mixin.js +11 -1
  19. package/lib/src/brand-page/components/page-header/HeaderLayout.stories.d.ts +1 -0
  20. package/lib/src/brand-page/components/page-header/HeaderLayout.stories.js +9 -0
  21. package/lib/src/brand-page/components/page-header/PageHeader.mixin.js +3 -3
  22. package/lib/src/brand-page/constants/sections/header-display.constants.d.ts +8 -0
  23. package/lib/src/brand-page/constants/sections/header-display.constants.js +11 -0
  24. package/lib/src/brand-page/models/index.d.ts +4 -1
  25. package/lib/src/brand-page/models/index.js +5 -3
  26. package/lib/src/brand-page/utils/view-model.util.d.ts +0 -1
  27. package/lib/src/brand-page/utils/view-model.util.js +5 -5
  28. package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts +1 -0
  29. package/lib/src/bundled-translations-Cs7jWCj8.js +181 -0
  30. package/lib/src/bundles/bundled-translations.json +3 -0
  31. package/lib/src/css/library.brand-page-brandCrowd.min.css +216 -159
  32. package/lib/src/css/library.brand-page-brandPage.min.css +216 -159
  33. package/lib/src/css/library.brand-page-designCom.min.css +216 -159
  34. package/lib/src/css/library.brand-page-preview.min.css +216 -159
  35. package/lib/src/index.mjs +1 -1
  36. package/lib/src/{lib-KFjPFfxn.js → lib-BFusPgV2.js} +12063 -12041
  37. package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.js +4 -4
  38. package/package.json +1 -1
  39. package/src/brand-page/components/navigation/hamburger/HamburgerNavigation.vue +1 -0
  40. package/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.mixin.ts +6 -11
  41. package/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.vue +35 -3
  42. package/src/brand-page/components/navigation/navigation-side-menu/NavigationSideMenu.vue.test.ts +23 -17
  43. package/src/brand-page/components/page/Page.mixin.ts +17 -0
  44. package/src/brand-page/components/page/Page.vue +2 -6
  45. package/src/brand-page/components/page-header/HeaderLayout.stories.ts +10 -0
  46. package/src/brand-page/components/page-header/HeaderLayout.vue +35 -35
  47. package/src/brand-page/components/page-header/PageHeader.mixin.ts +3 -3
  48. package/src/brand-page/components/page-header/PageHeader.vue.test.ts +9 -3
  49. package/src/brand-page/components/page-header/i18n/page-header.json +5 -0
  50. package/src/brand-page/constants/sections/header-display.constants.test.ts +45 -0
  51. package/src/brand-page/constants/sections/header-display.constants.ts +19 -0
  52. package/src/brand-page/models/index.ts +10 -3
  53. package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap +0 -6
  54. package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap +0 -2
  55. package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap +0 -4
  56. package/src/brand-page/utils/view-model.util.test.ts +7 -2
  57. package/src/brand-page/utils/view-model.util.ts +6 -6
  58. package/src/bundles/bundled-translations.json +3 -0
  59. package/src/shared/page-settings/components/header-settings-panel/HeaderSettingsPanel.button-section.test.ts +25 -14
  60. package/src/shared/page-settings/components/header-settings-panel/HeaderSettingsPanel.vue +38 -26
  61. package/src/shared/page-settings/components/page-settings-section-styles/HeaderButtonSettings.vue +34 -9
  62. package/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.ts +4 -4
  63. package/lib/src/bundled-translations-B8fAEel0.js +0 -179
@@ -7129,68 +7129,68 @@ select[data-v-665b8067] {
7129
7129
  margin: 0 auto;
7130
7130
  }
7131
7131
 
7132
- .root[data-v-27d98913] {
7133
- --logo-width: var(--aa5a55f0);
7132
+ .root[data-v-dc7e5167] {
7133
+ --logo-width: var(--v2fb35d8a);
7134
7134
  --logo-max-width: 20rem;
7135
7135
  --tab-nav-height: 56px;
7136
7136
  --hamburger-nav-height: 32px;
7137
7137
  --hamburger-nav-width: 32px;
7138
7138
  }
7139
- .layout[data-v-27d98913] {
7139
+ .layout[data-v-dc7e5167] {
7140
7140
  -webkit-box-align: center;
7141
7141
  -ms-flex-align: center;
7142
7142
  align-items: center;
7143
7143
  }
7144
- .nav-container[data-v-27d98913] {
7144
+ .nav-container[data-v-dc7e5167] {
7145
7145
  max-width: 100%;
7146
7146
  overflow: hidden;
7147
7147
  }
7148
- .logo-container[data-v-27d98913] {
7148
+ .logo-container[data-v-dc7e5167] {
7149
7149
  }
7150
7150
  /* The CTA container is a plain block: every family below positions the BOX, and the
7151
7151
  button then fills whatever box it is given (full width for the mobile row,
7152
7152
  content width everywhere else). */
7153
- .cta-container[data-v-27d98913] {
7153
+ .cta-container[data-v-dc7e5167] {
7154
7154
  min-width: 0;
7155
7155
  }
7156
7156
 
7157
7157
  /* DESKTOP_TAB_1 */
7158
- .desktop-tab-horizontal-stack-left-logo-right-menu[data-v-27d98913] {
7158
+ .desktop-tab-horizontal-stack-left-logo-right-menu[data-v-dc7e5167] {
7159
7159
  display: -webkit-box;
7160
7160
  display: -ms-flexbox;
7161
7161
  display: flex;
7162
7162
  }
7163
- .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container[data-v-27d98913] {
7163
+ .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container[data-v-dc7e5167] {
7164
7164
  -webkit-box-flex: 1;
7165
7165
  -ms-flex: 1;
7166
7166
  flex: 1;
7167
7167
  margin-left: 1rem;
7168
7168
  }
7169
- .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container__inner[data-v-27d98913] {
7169
+ .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container__inner[data-v-dc7e5167] {
7170
7170
  display: inline-block;
7171
7171
  float: right;
7172
7172
  max-width: 100%;
7173
7173
  }
7174
7174
 
7175
7175
  /* DESKTOP_TAB_2 */
7176
- .desktop-tab-horizontal-stack-left-logo-left-menu[data-v-27d98913] {
7176
+ .desktop-tab-horizontal-stack-left-logo-left-menu[data-v-dc7e5167] {
7177
7177
  display: -webkit-box;
7178
7178
  display: -ms-flexbox;
7179
7179
  display: flex;
7180
7180
  }
7181
- .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container[data-v-27d98913] {
7181
+ .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container[data-v-dc7e5167] {
7182
7182
  -webkit-box-flex: 1;
7183
7183
  -ms-flex: 1;
7184
7184
  flex: 1;
7185
7185
  margin-left: 1rem;
7186
7186
  }
7187
- .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container__inner[data-v-27d98913] {
7187
+ .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container__inner[data-v-dc7e5167] {
7188
7188
  display: inline-block;
7189
7189
  max-width: 100%;
7190
7190
  }
7191
7191
 
7192
7192
  /* DESKTOP_TAB_3 */
7193
- .desktop-tab-horizontal-stack-left-logo-centered-menu[data-v-27d98913] {
7193
+ .desktop-tab-horizontal-stack-left-logo-centered-menu[data-v-dc7e5167] {
7194
7194
  display: grid;
7195
7195
  grid-template-columns:
7196
7196
  [logo-start] var(--logo-max-width) [logo-end nav-start] 1fr [nav-end] var(
@@ -7203,14 +7203,14 @@ select[data-v-665b8067] {
7203
7203
  margin-top: 1rem;
7204
7204
  margin-bottom: 1rem;
7205
7205
  }
7206
- .desktop-tab-horizontal-stack-left-logo-centered-menu .logo-container[data-v-27d98913] {
7206
+ .desktop-tab-horizontal-stack-left-logo-centered-menu .logo-container[data-v-dc7e5167] {
7207
7207
  grid-column: logo-start / logo-end;
7208
7208
  justify-self: start;
7209
7209
  }
7210
- .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container[data-v-27d98913] {
7210
+ .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container[data-v-dc7e5167] {
7211
7211
  grid-column: nav-start / nav-end;
7212
7212
  }
7213
- .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container__inner[data-v-27d98913] {
7213
+ .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container__inner[data-v-dc7e5167] {
7214
7214
  /* start - center content */
7215
7215
  display: inline-block;
7216
7216
  -webkit-transform: translateX(-50%);
@@ -7221,7 +7221,7 @@ select[data-v-665b8067] {
7221
7221
  /* end - center content */
7222
7222
  }
7223
7223
  /* DESKTOP_TAB_4 */
7224
- .desktop-tab-horizontal-stack-centered-logo-right-menu[data-v-27d98913] {
7224
+ .desktop-tab-horizontal-stack-centered-logo-right-menu[data-v-dc7e5167] {
7225
7225
  display: grid;
7226
7226
  -webkit-column-gap: 1rem;
7227
7227
  -moz-column-gap: 1rem;
@@ -7230,26 +7230,26 @@ select[data-v-665b8067] {
7230
7230
  [col-start] 1fr [logo-start] var(--logo-max-width)
7231
7231
  [logo-end nav-start] 1fr [nav-end];
7232
7232
  }
7233
- .desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container[data-v-27d98913] {
7233
+ .desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container[data-v-dc7e5167] {
7234
7234
  grid-column: logo-start / logo-end;
7235
7235
  }
7236
- .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container[data-v-27d98913] {
7236
+ .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container[data-v-dc7e5167] {
7237
7237
  grid-column: nav-start / nav-end;
7238
7238
  }
7239
- .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container__inner[data-v-27d98913] {
7239
+ .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container__inner[data-v-dc7e5167] {
7240
7240
  /* start - align right content */
7241
7241
  float: right;
7242
7242
  max-width: 100%;
7243
7243
  /* end - align right content */
7244
7244
  }
7245
7245
  /* DESKTOP_TAB_5 */
7246
- .desktop-tab-vertical-stack-centered-logo-centered-menu[data-v-27d98913] {
7246
+ .desktop-tab-vertical-stack-centered-logo-centered-menu[data-v-dc7e5167] {
7247
7247
  -webkit-box-align: center;
7248
7248
  -ms-flex-align: center;
7249
7249
  align-items: center;
7250
7250
  justify-items: center;
7251
7251
  }
7252
- .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-27d98913] {
7252
+ .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-dc7e5167] {
7253
7253
  display: grid;
7254
7254
  grid-template-rows: repeat(2, minmax(0, 1fr));
7255
7255
  row-gap: 1rem;
@@ -7258,16 +7258,16 @@ select[data-v-665b8067] {
7258
7258
  [row2-end];
7259
7259
  }
7260
7260
  .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav
7261
- .logo-container[data-v-27d98913] {
7261
+ .logo-container[data-v-dc7e5167] {
7262
7262
  grid-row: row1-start / row1-end;
7263
7263
  }
7264
7264
  .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav
7265
- .nav-container[data-v-27d98913] {
7265
+ .nav-container[data-v-dc7e5167] {
7266
7266
  grid-row: row2-start / row2-end;
7267
7267
  width: 100%;
7268
7268
  }
7269
7269
  .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav
7270
- .nav-container__inner[data-v-27d98913] {
7270
+ .nav-container__inner[data-v-dc7e5167] {
7271
7271
  display: inline-block;
7272
7272
  -webkit-transform: translateX(-50%);
7273
7273
  transform: translateX(-50%);
@@ -7275,7 +7275,7 @@ select[data-v-665b8067] {
7275
7275
  position: relative;
7276
7276
  max-width: 100%;
7277
7277
  }
7278
- .desktop-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-27d98913] {
7278
+ .desktop-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-dc7e5167] {
7279
7279
  display: -webkit-box;
7280
7280
  display: -ms-flexbox;
7281
7281
  display: flex;
@@ -7285,14 +7285,14 @@ select[data-v-665b8067] {
7285
7285
  }
7286
7286
 
7287
7287
  /* MOBILE_TAB_1 */
7288
- .mobile-tab-vertical-stack-centered-logo-centered-menu[data-v-27d98913] {
7288
+ .mobile-tab-vertical-stack-centered-logo-centered-menu[data-v-dc7e5167] {
7289
7289
  -webkit-box-align: center;
7290
7290
  -ms-flex-align: center;
7291
7291
  align-items: center;
7292
7292
  justify-items: center;
7293
7293
  width: 100%;
7294
7294
  }
7295
- .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-27d98913] {
7295
+ .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-dc7e5167] {
7296
7296
  display: grid;
7297
7297
  row-gap: 1rem;
7298
7298
  grid-template-rows:
@@ -7300,21 +7300,21 @@ select[data-v-665b8067] {
7300
7300
  [row2-end];
7301
7301
  }
7302
7302
  .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav
7303
- .logo-container[data-v-27d98913] {
7303
+ .logo-container[data-v-dc7e5167] {
7304
7304
  grid-row: row1-start / row1-end;
7305
7305
  }
7306
- .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav .nav-container[data-v-27d98913] {
7306
+ .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav .nav-container[data-v-dc7e5167] {
7307
7307
  grid-row: row2-start / row2-end;
7308
7308
  width: 100%;
7309
7309
  }
7310
- .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-27d98913] {
7310
+ .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-dc7e5167] {
7311
7311
  display: -webkit-box;
7312
7312
  display: -ms-flexbox;
7313
7313
  display: flex;
7314
7314
  }
7315
7315
 
7316
7316
  /* DESKTOP_TAB_6 */
7317
- .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-27d98913] {
7317
+ .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-dc7e5167] {
7318
7318
  display: grid;
7319
7319
  grid-template-rows:
7320
7320
  [row1-start] var(--tab-nav-height)
@@ -7326,28 +7326,28 @@ select[data-v-665b8067] {
7326
7326
  justify-items: center;
7327
7327
  }
7328
7328
  .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav
7329
- .logo-container[data-v-27d98913] {
7329
+ .logo-container[data-v-dc7e5167] {
7330
7330
  grid-row: row2-start / row2-end;
7331
7331
  text-align: center;
7332
7332
  }
7333
7333
  .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav
7334
- .nav-container[data-v-27d98913] {
7334
+ .nav-container[data-v-dc7e5167] {
7335
7335
  grid-row: row1-start / row1-end;
7336
7336
  }
7337
- .layout desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-27d98913] {
7337
+ .layout desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-dc7e5167] {
7338
7338
  display: -webkit-box;
7339
7339
  display: -ms-flexbox;
7340
7340
  display: flex;
7341
7341
  }
7342
7342
  /* MOBILE_TAB_2 */
7343
- .mobile-tab-vertical-stack-centered-menu-centered-logo[data-v-27d98913] {
7343
+ .mobile-tab-vertical-stack-centered-menu-centered-logo[data-v-dc7e5167] {
7344
7344
  -webkit-box-align: center;
7345
7345
  -ms-flex-align: center;
7346
7346
  align-items: center;
7347
7347
  justify-items: center;
7348
7348
  width: 100%;
7349
7349
  }
7350
- .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-27d98913] {
7350
+ .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-dc7e5167] {
7351
7351
  display: grid;
7352
7352
  grid-template-rows:
7353
7353
  [row1-start] var(--tab-nav-height)
@@ -7356,22 +7356,22 @@ select[data-v-665b8067] {
7356
7356
  margin-top: 1rem;
7357
7357
  }
7358
7358
  .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav
7359
- .logo-container[data-v-27d98913] {
7359
+ .logo-container[data-v-dc7e5167] {
7360
7360
  grid-row: row2-start / row2-end;
7361
7361
  }
7362
- .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav .nav-container[data-v-27d98913] {
7362
+ .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav .nav-container[data-v-dc7e5167] {
7363
7363
  grid-row: row1-start / row1-end;
7364
7364
  width: 100%;
7365
7365
  }
7366
- .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-27d98913] {
7366
+ .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-dc7e5167] {
7367
7367
  display: -webkit-box;
7368
7368
  display: -ms-flexbox;
7369
7369
  display: flex;
7370
7370
  }
7371
7371
 
7372
7372
  /* DESKTOP_TAB_NO_LOGO_1, DESKTOP_HAMBURGER_NO_LOGO_1 */
7373
- .desktop-tab-left-menu-no-logo[data-v-27d98913],
7374
- .desktop-hamburger-no-logo-left-menu[data-v-27d98913] {
7373
+ .desktop-tab-left-menu-no-logo[data-v-dc7e5167],
7374
+ .desktop-hamburger-no-logo-left-menu[data-v-dc7e5167] {
7375
7375
  display: -webkit-box;
7376
7376
  display: -ms-flexbox;
7377
7377
  display: flex;
@@ -7379,15 +7379,15 @@ select[data-v-665b8067] {
7379
7379
  -ms-flex-pack: start;
7380
7380
  justify-content: flex-start;
7381
7381
  }
7382
- .desktop-tab-left-menu-no-logo .logo-container[data-v-27d98913],
7383
- .desktop-hamburger-no-logo-left-menu .logo-container[data-v-27d98913] {
7382
+ .desktop-tab-left-menu-no-logo .logo-container[data-v-dc7e5167],
7383
+ .desktop-hamburger-no-logo-left-menu .logo-container[data-v-dc7e5167] {
7384
7384
  display: none;
7385
7385
  }
7386
7386
 
7387
7387
  /* DESKTOP_TAB_NO_LOGO_2, DESKTOP_HAMBURGER_NO_LOGO_2, MOBILE_TAB_NO_LOGO_1 */
7388
- .desktop-tab-centered-menu-no-logo[data-v-27d98913],
7389
- .desktop-hamburger-no-logo-centered-menu[data-v-27d98913],
7390
- .mobile-tab-centered-menu-no-logo[data-v-27d98913] {
7388
+ .desktop-tab-centered-menu-no-logo[data-v-dc7e5167],
7389
+ .desktop-hamburger-no-logo-centered-menu[data-v-dc7e5167],
7390
+ .mobile-tab-centered-menu-no-logo[data-v-dc7e5167] {
7391
7391
  display: -webkit-box;
7392
7392
  display: -ms-flexbox;
7393
7393
  display: flex;
@@ -7395,15 +7395,15 @@ select[data-v-665b8067] {
7395
7395
  -ms-flex-pack: center;
7396
7396
  justify-content: center;
7397
7397
  }
7398
- .desktop-tab-centered-menu-no-logo .logo-container[data-v-27d98913],
7399
- .desktop-hamburger-no-logo-centered-menu .logo-container[data-v-27d98913],
7400
- .mobile-tab-centered-menu-no-logo .logo-container[data-v-27d98913] {
7398
+ .desktop-tab-centered-menu-no-logo .logo-container[data-v-dc7e5167],
7399
+ .desktop-hamburger-no-logo-centered-menu .logo-container[data-v-dc7e5167],
7400
+ .mobile-tab-centered-menu-no-logo .logo-container[data-v-dc7e5167] {
7401
7401
  display: none;
7402
7402
  }
7403
7403
 
7404
7404
  /* DESKTOP_TAB_NO_LOGO_3, DESKTOP_HAMBURGER_NO_LOGO_3 */
7405
- .desktop-tab-right-menu-no-logo[data-v-27d98913],
7406
- .desktop-hamburger-no-logo-right-menu[data-v-27d98913] {
7405
+ .desktop-tab-right-menu-no-logo[data-v-dc7e5167],
7406
+ .desktop-hamburger-no-logo-right-menu[data-v-dc7e5167] {
7407
7407
  display: -webkit-box;
7408
7408
  display: -ms-flexbox;
7409
7409
  display: flex;
@@ -7411,14 +7411,14 @@ select[data-v-665b8067] {
7411
7411
  -ms-flex-pack: end;
7412
7412
  justify-content: flex-end;
7413
7413
  }
7414
- .desktop-tab-right-menu-no-logo .logo-container[data-v-27d98913],
7415
- .desktop-hamburger-no-logo-right-menu .logo-container[data-v-27d98913] {
7414
+ .desktop-tab-right-menu-no-logo .logo-container[data-v-dc7e5167],
7415
+ .desktop-hamburger-no-logo-right-menu .logo-container[data-v-dc7e5167] {
7416
7416
  display: none;
7417
7417
  }
7418
7418
 
7419
7419
  /* DESKTOP_HAMBURGER_1, MOBILE_HAMBURGER_1 */
7420
- .desktop-hamburger-horizontal-stack-left-logo-right-menu[data-v-27d98913],
7421
- .mobile-hamburger-horizontal-stack-left-logo-right-menu[data-v-27d98913] {
7420
+ .desktop-hamburger-horizontal-stack-left-logo-right-menu[data-v-dc7e5167],
7421
+ .mobile-hamburger-horizontal-stack-left-logo-right-menu[data-v-dc7e5167] {
7422
7422
  display: grid;
7423
7423
  grid-template-columns: [logo-start] auto [nav-start] var(
7424
7424
  --hamburger-nav-width
@@ -7427,8 +7427,8 @@ select[data-v-665b8067] {
7427
7427
  -ms-flex-align: start;
7428
7428
  align-items: start;
7429
7429
  }
7430
- .desktop-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-27d98913],
7431
- .mobile-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-27d98913] {
7430
+ .desktop-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-dc7e5167],
7431
+ .mobile-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-dc7e5167] {
7432
7432
  margin-right: 1rem;
7433
7433
  display: -webkit-box;
7434
7434
  display: -ms-flexbox;
@@ -7438,15 +7438,15 @@ select[data-v-665b8067] {
7438
7438
  justify-content: flex-start;
7439
7439
  grid-column: logo-start;
7440
7440
  }
7441
- .desktop-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-27d98913],
7442
- .mobile-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-27d98913] {
7441
+ .desktop-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-dc7e5167],
7442
+ .mobile-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-dc7e5167] {
7443
7443
  grid-column: nav-start;
7444
7444
  margin: var(--page-padding) 0;
7445
7445
  }
7446
7446
 
7447
7447
  /* DESKTOP_HAMBURGER_2, MOBILE_HAMBURGER_2 */
7448
- .desktop-hamburger-horizontal-stack-centered-logo-right-menu[data-v-27d98913],
7449
- .mobile-hamburger-horizontal-stack-centered-logo-right-menu[data-v-27d98913] {
7448
+ .desktop-hamburger-horizontal-stack-centered-logo-right-menu[data-v-dc7e5167],
7449
+ .mobile-hamburger-horizontal-stack-centered-logo-right-menu[data-v-dc7e5167] {
7450
7450
  display: grid;
7451
7451
  grid-template-columns:
7452
7452
  [start] var(--hamburger-nav-width)
@@ -7455,8 +7455,8 @@ select[data-v-665b8067] {
7455
7455
  -ms-flex-align: start;
7456
7456
  align-items: start;
7457
7457
  }
7458
- .desktop-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-27d98913],
7459
- .mobile-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-27d98913] {
7458
+ .desktop-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-dc7e5167],
7459
+ .mobile-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-dc7e5167] {
7460
7460
  margin-left: 1rem;
7461
7461
  margin-right: 1rem;
7462
7462
  display: -webkit-box;
@@ -7467,14 +7467,14 @@ select[data-v-665b8067] {
7467
7467
  justify-content: center;
7468
7468
  grid-column: logo-start;
7469
7469
  }
7470
- .desktop-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-27d98913],
7471
- .mobile-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-27d98913] {
7470
+ .desktop-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-dc7e5167],
7471
+ .mobile-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-dc7e5167] {
7472
7472
  grid-column: nav-start;
7473
7473
  margin: var(--page-padding) 0;
7474
7474
  }
7475
7475
 
7476
7476
  /* MOBILE_HAMBURGER_3 */
7477
- .mobile-hamburger-horizontal-stack-left-menu-centered-logo[data-v-27d98913] {
7477
+ .mobile-hamburger-horizontal-stack-left-menu-centered-logo[data-v-dc7e5167] {
7478
7478
  display: grid;
7479
7479
  grid-template-columns: var(--hamburger-nav-width) auto var(
7480
7480
  --hamburger-nav-width
@@ -7484,7 +7484,7 @@ select[data-v-665b8067] {
7484
7484
  -ms-flex-align: start;
7485
7485
  align-items: start;
7486
7486
  }
7487
- .mobile-hamburger-horizontal-stack-left-menu-centered-logo .logo-container[data-v-27d98913] {
7487
+ .mobile-hamburger-horizontal-stack-left-menu-centered-logo .logo-container[data-v-dc7e5167] {
7488
7488
  margin-left: 1rem;
7489
7489
  margin-right: 1rem;
7490
7490
  display: -webkit-box;
@@ -7495,18 +7495,18 @@ select[data-v-665b8067] {
7495
7495
  justify-content: center;
7496
7496
  grid-area: b;
7497
7497
  }
7498
- .mobile-hamburger-horizontal-stack-left-menu-centered-logo .nav-container[data-v-27d98913] {
7498
+ .mobile-hamburger-horizontal-stack-left-menu-centered-logo .nav-container[data-v-dc7e5167] {
7499
7499
  grid-area: a;
7500
7500
  margin: var(--page-padding) 0;
7501
7501
  }
7502
7502
  .mobile-hamburger-horizontal-stack-left-menu-centered-logo
7503
- .nav-container__inner[data-v-27d98913] {
7503
+ .nav-container__inner[data-v-dc7e5167] {
7504
7504
  float: left;
7505
7505
  max-width: 100%;
7506
7506
  }
7507
7507
 
7508
7508
  /* MOBILE_HAMBURGER_4 */
7509
- .mobile-hamburger-horizontal-stack-left-menu-left-logo[data-v-27d98913] {
7509
+ .mobile-hamburger-horizontal-stack-left-menu-left-logo[data-v-dc7e5167] {
7510
7510
  display: grid;
7511
7511
  grid-template-columns: var(--hamburger-nav-width) auto;
7512
7512
  grid-template-areas: 'a b';
@@ -7514,7 +7514,7 @@ select[data-v-665b8067] {
7514
7514
  -ms-flex-align: start;
7515
7515
  align-items: start;
7516
7516
  }
7517
- .mobile-hamburger-horizontal-stack-left-menu-left-logo .logo-container[data-v-27d98913] {
7517
+ .mobile-hamburger-horizontal-stack-left-menu-left-logo .logo-container[data-v-dc7e5167] {
7518
7518
  margin-left: 1rem;
7519
7519
  display: -webkit-box;
7520
7520
  display: -ms-flexbox;
@@ -7524,17 +7524,17 @@ select[data-v-665b8067] {
7524
7524
  justify-content: flex-start;
7525
7525
  grid-area: b;
7526
7526
  }
7527
- .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container[data-v-27d98913] {
7527
+ .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container[data-v-dc7e5167] {
7528
7528
  grid-area: a;
7529
7529
  margin: var(--page-padding) 0;
7530
7530
  }
7531
- .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container__inner[data-v-27d98913] {
7531
+ .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container__inner[data-v-dc7e5167] {
7532
7532
  float: left;
7533
7533
  max-width: 100%;
7534
7534
  }
7535
7535
 
7536
7536
  /* MOBILE_HAMBURGER_NO_LOGO_1 */
7537
- .mobile-hamburger-no-logo-left-menu[data-v-27d98913] {
7537
+ .mobile-hamburger-no-logo-left-menu[data-v-dc7e5167] {
7538
7538
  display: -webkit-box;
7539
7539
  display: -ms-flexbox;
7540
7540
  display: flex;
@@ -7542,12 +7542,12 @@ select[data-v-665b8067] {
7542
7542
  -ms-flex-pack: start;
7543
7543
  justify-content: flex-start;
7544
7544
  }
7545
- .mobile-hamburger-no-logo-left-menu .logo-container[data-v-27d98913] {
7545
+ .mobile-hamburger-no-logo-left-menu .logo-container[data-v-dc7e5167] {
7546
7546
  display: none;
7547
7547
  }
7548
7548
 
7549
7549
  /* MOBILE_HAMBURGER_NO_LOGO_2 */
7550
- .mobile-hamburger-no-logo-centered-menu[data-v-27d98913] {
7550
+ .mobile-hamburger-no-logo-centered-menu[data-v-dc7e5167] {
7551
7551
  display: -webkit-box;
7552
7552
  display: -ms-flexbox;
7553
7553
  display: flex;
@@ -7555,11 +7555,11 @@ select[data-v-665b8067] {
7555
7555
  -ms-flex-pack: center;
7556
7556
  justify-content: center;
7557
7557
  }
7558
- .mobile-hamburger-no-logo-centered-menu .logo-container[data-v-27d98913] {
7558
+ .mobile-hamburger-no-logo-centered-menu .logo-container[data-v-dc7e5167] {
7559
7559
  display: none;
7560
7560
  }
7561
7561
  /* MOBILE_HAMBURGER_NO_LOGO_3 */
7562
- .mobile-hamburger-no-logo-right-menu[data-v-27d98913] {
7562
+ .mobile-hamburger-no-logo-right-menu[data-v-dc7e5167] {
7563
7563
  display: -webkit-box;
7564
7564
  display: -ms-flexbox;
7565
7565
  display: flex;
@@ -7567,37 +7567,33 @@ select[data-v-665b8067] {
7567
7567
  -ms-flex-pack: end;
7568
7568
  justify-content: flex-end;
7569
7569
  }
7570
- .mobile-hamburger-no-logo-right-menu .logo-container[data-v-27d98913] {
7570
+ .mobile-hamburger-no-logo-right-menu .logo-container[data-v-dc7e5167] {
7571
7571
  display: none;
7572
7572
  }
7573
7573
 
7574
7574
  /* ==========================================================================
7575
- Header CTA placement (BP-5852)
7576
-
7577
- Every rule here is additive and only applies once a CTA is rendered — the
7578
- track/flow-changing ones are gated on `.has-header-cta` — so a header with no
7579
- button lays out exactly as it did before. Four placements:
7580
- join - inline immediately after the nav links
7581
- edge - pinned to the header's outer right edge, nav left untouched
7582
- corner - floats top-right, out of flow, independent of a centered stack
7583
- row - full-width row below the whole stack (mobile bar nav)
7575
+ Header CTA placement. Every rule is additive and gated on the CTA being
7576
+ rendered (`.has-header-cta` / `.cta-container`), so a header without the
7577
+ button lays out exactly as before. The placement archetypes (join / edge /
7578
+ corner / row) and the per-family reasoning live in
7579
+ docs/architecture/capabilities/page-header.md.
7584
7580
  ========================================================================== */
7585
7581
 
7586
7582
  /* join - DESKTOP_TAB_1: appended flex child; the nav's `flex: 1` right-aligns the
7587
7583
  [links][button] group, so the button lands adjacent to the links. */
7588
- .desktop-tab-horizontal-stack-left-logo-right-menu .cta-container[data-v-27d98913] {
7584
+ .desktop-tab-horizontal-stack-left-logo-right-menu .cta-container[data-v-dc7e5167] {
7589
7585
  margin-left: 1rem;
7590
7586
  }
7591
7587
 
7592
7588
  /* edge - DESKTOP_TAB_2: the nav's `flex: 1` keeps the left-aligned links in place
7593
7589
  and pushes the button to the outer right edge. */
7594
- .desktop-tab-horizontal-stack-left-logo-left-menu .cta-container[data-v-27d98913] {
7590
+ .desktop-tab-horizontal-stack-left-logo-left-menu .cta-container[data-v-dc7e5167] {
7595
7591
  margin-left: 1rem;
7596
7592
  }
7597
7593
 
7598
7594
  /* edge - DESKTOP_TAB_3: reuses the grid's existing trailing spacer column, so the
7599
7595
  centered nav and left logo keep their tracks unchanged. */
7600
- .desktop-tab-horizontal-stack-left-logo-centered-menu .cta-container[data-v-27d98913] {
7596
+ .desktop-tab-horizontal-stack-left-logo-centered-menu .cta-container[data-v-dc7e5167] {
7601
7597
  grid-column: nav-end / cols-end;
7602
7598
  justify-self: end;
7603
7599
  }
@@ -7605,37 +7601,50 @@ select[data-v-665b8067] {
7605
7601
  /* join - DESKTOP_TAB_4: adds a content-width column after the nav column. The two
7606
7602
  `1fr` tracks absorb the free space (an `auto` logo track would stretch and pull
7607
7603
  the button away from the links). */
7608
- .desktop-tab-horizontal-stack-centered-logo-right-menu.has-header-cta[data-v-27d98913] {
7604
+ .desktop-tab-horizontal-stack-centered-logo-right-menu.has-header-cta[data-v-dc7e5167] {
7609
7605
  grid-template-columns:
7610
7606
  [col-start] 1fr [logo-start] var(--logo-max-width)
7611
7607
  [logo-end nav-start] 1fr [nav-end cta-start] auto [cta-end];
7612
7608
  }
7613
- .desktop-tab-horizontal-stack-centered-logo-right-menu .cta-container[data-v-27d98913] {
7609
+ .desktop-tab-horizontal-stack-centered-logo-right-menu .cta-container[data-v-dc7e5167] {
7614
7610
  grid-column: cta-start / cta-end;
7615
7611
  }
7616
7612
 
7617
7613
  /* corner - DESKTOP_TAB_5 / DESKTOP_TAB_6: out of flow, so the centered vertical
7618
7614
  stack keeps its two explicit grid rows and stays centered. */
7619
- .desktop-tab-vertical-stack-centered-logo-centered-menu.has-header-cta[data-v-27d98913],
7620
- .desktop-tab-vertical-stack-centered-menu-centered-logo.has-header-cta[data-v-27d98913] {
7615
+ .desktop-tab-vertical-stack-centered-logo-centered-menu.has-header-cta[data-v-dc7e5167],
7616
+ .desktop-tab-vertical-stack-centered-menu-centered-logo.has-header-cta[data-v-dc7e5167] {
7621
7617
  position: relative;
7622
7618
  }
7623
- .desktop-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-27d98913],
7624
- .desktop-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-27d98913] {
7619
+ .desktop-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-dc7e5167],
7620
+ .desktop-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-dc7e5167] {
7625
7621
  position: absolute;
7626
7622
  top: 0;
7627
7623
  right: 0;
7628
7624
  }
7629
7625
 
7630
- /* row - MOBILE_TAB_1 / MOBILE_TAB_2: auto-places into an implicit third grid row
7631
- below the stack (both explicit rows are taken by the logo and the nav). */
7632
- .mobile-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-27d98913],
7633
- .mobile-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-27d98913] {
7626
+ /* row - MOBILE_TAB_1: auto-places into an implicit third grid row below the stack
7627
+ (both explicit rows are taken by the logo and the nav), giving logo / nav / button. */
7628
+ .mobile-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-dc7e5167],
7629
+ .mobile-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-dc7e5167] {
7634
7630
  width: 100%;
7635
7631
  justify-self: stretch;
7636
7632
  }
7637
- .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav.has-header-cta[data-v-27d98913],
7638
- .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav.has-header-cta[data-v-27d98913] {
7633
+
7634
+ /* row - MOBILE_TAB_2: the button belongs directly under the nav and ABOVE the logo,
7635
+ so the grid grows a middle row for it and the logo's existing `row2` names move
7636
+ down to the third. Auto-placement would otherwise drop it below the logo. */
7637
+ .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta[data-v-dc7e5167] {
7638
+ grid-template-rows:
7639
+ [row1-start] var(--tab-nav-height)
7640
+ [row1-end cta-start] auto [cta-end row2-start] 1fr [row2-end];
7641
+ }
7642
+ .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta
7643
+ .cta-container[data-v-dc7e5167] {
7644
+ grid-row: cta-start / cta-end;
7645
+ }
7646
+ .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav.has-header-cta[data-v-dc7e5167],
7647
+ .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav.has-header-cta[data-v-dc7e5167] {
7639
7648
  -ms-flex-wrap: wrap;
7640
7649
  flex-wrap: wrap;
7641
7650
  -webkit-box-pack: center;
@@ -7645,27 +7654,27 @@ select[data-v-665b8067] {
7645
7654
 
7646
7655
  /* row - MOBILE_TAB_NO_LOGO_1: single centered flex row, so the full-width button
7647
7656
  needs a wrap to drop below the nav. */
7648
- .mobile-tab-centered-menu-no-logo.has-header-cta[data-v-27d98913] {
7657
+ .mobile-tab-centered-menu-no-logo.has-header-cta[data-v-dc7e5167] {
7649
7658
  -ms-flex-wrap: wrap;
7650
7659
  flex-wrap: wrap;
7651
7660
  }
7652
- .mobile-tab-centered-menu-no-logo .cta-container[data-v-27d98913] {
7661
+ .mobile-tab-centered-menu-no-logo .cta-container[data-v-dc7e5167] {
7653
7662
  width: 100%;
7654
7663
  }
7655
7664
 
7656
7665
  /* join - DESKTOP_TAB_NO_LOGO_1 / _3: appended flex child sits adjacent to the
7657
7666
  left- / right-aligned links. */
7658
- .desktop-tab-left-menu-no-logo .cta-container[data-v-27d98913],
7659
- .desktop-tab-right-menu-no-logo .cta-container[data-v-27d98913] {
7667
+ .desktop-tab-left-menu-no-logo .cta-container[data-v-dc7e5167],
7668
+ .desktop-tab-right-menu-no-logo .cta-container[data-v-dc7e5167] {
7660
7669
  margin-left: 1rem;
7661
7670
  }
7662
7671
 
7663
7672
  /* edge - DESKTOP_TAB_NO_LOGO_2: out of flow so the nav stays exactly centered
7664
7673
  (an in-flow button would shift the centered group left). */
7665
- .desktop-tab-centered-menu-no-logo.has-header-cta[data-v-27d98913] {
7674
+ .desktop-tab-centered-menu-no-logo.has-header-cta[data-v-dc7e5167] {
7666
7675
  position: relative;
7667
7676
  }
7668
- .desktop-tab-centered-menu-no-logo .cta-container[data-v-27d98913] {
7677
+ .desktop-tab-centered-menu-no-logo .cta-container[data-v-dc7e5167] {
7669
7678
  position: absolute;
7670
7679
  top: 0;
7671
7680
  right: 0;
@@ -7676,28 +7685,43 @@ select[data-v-665b8067] {
7676
7685
  nav column; the logo track becomes `1fr` to absorb the free space that an `auto`
7677
7686
  track would otherwise share with the CTA. The mobile hamburger styles share the
7678
7687
  base rules above but never render a CTA, so their tracks are untouched. */
7679
- .desktop-hamburger-horizontal-stack-left-logo-right-menu.has-header-cta[data-v-27d98913] {
7688
+ .desktop-hamburger-horizontal-stack-left-logo-right-menu.has-header-cta[data-v-dc7e5167] {
7680
7689
  grid-template-columns: [logo-start] 1fr [cta-start] auto [nav-start] var(
7681
7690
  --hamburger-nav-width
7682
7691
  );
7683
7692
  }
7684
- .desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta[data-v-27d98913] {
7693
+ .desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta[data-v-dc7e5167] {
7685
7694
  grid-template-columns:
7686
7695
  [start] var(--hamburger-nav-width)
7687
7696
  [logo-start] 1fr [cta-start] auto [nav-start] var(--hamburger-nav-width);
7688
7697
  }
7689
- .desktop-hamburger-horizontal-stack-left-logo-right-menu .cta-container[data-v-27d98913],
7690
- .desktop-hamburger-horizontal-stack-centered-logo-right-menu .cta-container[data-v-27d98913] {
7698
+ .desktop-hamburger-horizontal-stack-left-logo-right-menu .cta-container[data-v-dc7e5167],
7699
+ .desktop-hamburger-horizontal-stack-centered-logo-right-menu .cta-container[data-v-dc7e5167] {
7691
7700
  grid-column: cta-start;
7692
- align-self: center;
7701
+ /* Explicit row: the CTA sits in DOM order after the nav, and sparse grid
7702
+ auto-placement never backtracks to an earlier column on the same row —
7703
+ without this the button wraps to an implicit second row. */
7704
+ grid-row: 1;
7705
+ /* Centre the button on the hamburger icon's line: the icon is start-aligned
7706
+ with the nav's --page-padding margin, so mirror that margin and let the
7707
+ (taller) button overflow a line of the icon's height evenly. */
7708
+ align-self: start;
7709
+ margin-top: var(--page-padding);
7710
+ height: var(--hamburger-nav-height);
7711
+ display: -webkit-box;
7712
+ display: -ms-flexbox;
7713
+ display: flex;
7714
+ -webkit-box-align: center;
7715
+ -ms-flex-align: center;
7716
+ align-items: center;
7693
7717
  margin-right: 1rem;
7694
7718
  }
7695
7719
 
7696
7720
  /* DESKTOP_HAMBURGER_NO_LOGO_1..3: flex rows; `order` puts the button before the
7697
7721
  icon without reordering the DOM. */
7698
- .desktop-hamburger-no-logo-left-menu .cta-container[data-v-27d98913],
7699
- .desktop-hamburger-no-logo-centered-menu .cta-container[data-v-27d98913],
7700
- .desktop-hamburger-no-logo-right-menu .cta-container[data-v-27d98913] {
7722
+ .desktop-hamburger-no-logo-left-menu .cta-container[data-v-dc7e5167],
7723
+ .desktop-hamburger-no-logo-centered-menu .cta-container[data-v-dc7e5167],
7724
+ .desktop-hamburger-no-logo-right-menu .cta-container[data-v-dc7e5167] {
7701
7725
  -webkit-box-ordinal-group: 0;
7702
7726
  -ms-flex-order: -1;
7703
7727
  order: -1;
@@ -7710,25 +7734,25 @@ select[data-v-665b8067] {
7710
7734
  drawer, so the button gets the mobile-bar full-width row below the logo. The
7711
7735
  grid styles auto-place it into an implicit row spanning all tracks; the
7712
7736
  flex no-logo styles wrap it onto its own line. */
7713
- .mobile-hamburger-horizontal-stack-left-logo-right-menu.no-nav .cta-container[data-v-27d98913],
7737
+ .mobile-hamburger-horizontal-stack-left-logo-right-menu.no-nav .cta-container[data-v-dc7e5167],
7714
7738
  .mobile-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
7715
- .cta-container[data-v-27d98913],
7739
+ .cta-container[data-v-dc7e5167],
7716
7740
  .mobile-hamburger-horizontal-stack-left-menu-centered-logo.no-nav
7717
- .cta-container[data-v-27d98913],
7718
- .mobile-hamburger-horizontal-stack-left-menu-left-logo.no-nav .cta-container[data-v-27d98913] {
7741
+ .cta-container[data-v-dc7e5167],
7742
+ .mobile-hamburger-horizontal-stack-left-menu-left-logo.no-nav .cta-container[data-v-dc7e5167] {
7719
7743
  grid-column: 1 / -1;
7720
7744
  width: 100%;
7721
7745
  margin-top: 1rem;
7722
7746
  }
7723
- .mobile-hamburger-no-logo-left-menu.no-nav.has-header-cta[data-v-27d98913],
7724
- .mobile-hamburger-no-logo-centered-menu.no-nav.has-header-cta[data-v-27d98913],
7725
- .mobile-hamburger-no-logo-right-menu.no-nav.has-header-cta[data-v-27d98913] {
7747
+ .mobile-hamburger-no-logo-left-menu.no-nav.has-header-cta[data-v-dc7e5167],
7748
+ .mobile-hamburger-no-logo-centered-menu.no-nav.has-header-cta[data-v-dc7e5167],
7749
+ .mobile-hamburger-no-logo-right-menu.no-nav.has-header-cta[data-v-dc7e5167] {
7726
7750
  -ms-flex-wrap: wrap;
7727
7751
  flex-wrap: wrap;
7728
7752
  }
7729
- .mobile-hamburger-no-logo-left-menu.no-nav .cta-container[data-v-27d98913],
7730
- .mobile-hamburger-no-logo-centered-menu.no-nav .cta-container[data-v-27d98913],
7731
- .mobile-hamburger-no-logo-right-menu.no-nav .cta-container[data-v-27d98913] {
7753
+ .mobile-hamburger-no-logo-left-menu.no-nav .cta-container[data-v-dc7e5167],
7754
+ .mobile-hamburger-no-logo-centered-menu.no-nav .cta-container[data-v-dc7e5167],
7755
+ .mobile-hamburger-no-logo-right-menu.no-nav .cta-container[data-v-dc7e5167] {
7732
7756
  width: 100%;
7733
7757
  }
7734
7758
 
@@ -7796,7 +7820,7 @@ select[data-v-665b8067] {
7796
7820
  }
7797
7821
  }
7798
7822
 
7799
- .c-overlay[data-v-b618b914] {
7823
+ .c-overlay[data-v-8003fcca] {
7800
7824
  position: fixed;
7801
7825
  inset: 0px;
7802
7826
  z-index: 40;
@@ -7814,15 +7838,15 @@ select[data-v-665b8067] {
7814
7838
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
7815
7839
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
7816
7840
  }
7817
- .c-overlay--open[data-v-b618b914] {
7841
+ .c-overlay--open[data-v-8003fcca] {
7818
7842
  opacity: 0.7;
7819
7843
  }
7820
- .c-overlay--closed[data-v-b618b914] {
7844
+ .c-overlay--closed[data-v-8003fcca] {
7821
7845
  pointer-events: none;
7822
7846
  display: none;
7823
7847
  opacity: 0;
7824
7848
  }
7825
- .c-sidebar[data-v-b618b914] {
7849
+ .c-sidebar[data-v-8003fcca] {
7826
7850
  /* No hardcoded background: the panel background comes from the hamburger
7827
7851
  defaultButtonStyle (bound via :style), so a transparent/unset default bg
7828
7852
  renders transparent instead of being forced white */
@@ -7842,38 +7866,71 @@ select[data-v-665b8067] {
7842
7866
  max-width: 66%;
7843
7867
  }
7844
7868
  @media (min-width: 768px) {
7845
- .device--mobile .c-sidebar[data-v-b618b914] {
7869
+ .device--mobile .c-sidebar[data-v-8003fcca] {
7846
7870
  width: 66.666667%;
7847
7871
  }
7848
7872
  }
7849
- .c-sidebar--closed[data-v-b618b914] {
7873
+ .c-sidebar--closed[data-v-8003fcca] {
7850
7874
  -webkit-transform: translateX(-100%);
7851
7875
  transform: translateX(-100%);
7852
7876
  visibility: hidden;
7853
7877
  }
7854
- .c-sidebar--open[data-v-b618b914] {
7878
+ .c-sidebar--open[data-v-8003fcca] {
7855
7879
  -webkit-transform: translateX(0%);
7856
7880
  transform: translateX(0%);
7857
7881
  }
7858
- .c-chevron-transform[data-v-b618b914] {
7882
+ .c-chevron-transform[data-v-8003fcca] {
7859
7883
  -webkit-transition: -webkit-transform 0.3s ease;
7860
7884
  transition: -webkit-transform 0.3s ease;
7861
7885
  transition: transform 0.3s ease;
7862
7886
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
7863
7887
  }
7864
- .c-chevron-expanded[data-v-b618b914] {
7888
+ .c-chevron-expanded[data-v-8003fcca] {
7865
7889
  -webkit-transform: rotate(180deg);
7866
7890
  transform: rotate(180deg);
7867
7891
  }
7868
- .c-drawer-cta[data-v-b618b914] {
7892
+
7893
+ /* Design: the drawer CTA is pinned to the bottom of the panel and stays put while a
7894
+ long link list scrolls. Every rule here is scoped to --has-cta, so a drawer without
7895
+ the button keeps its original block flow and panel-level scrolling. */
7896
+ .c-sidebar--has-cta[data-v-8003fcca] {
7897
+ display: -webkit-box;
7898
+ display: -ms-flexbox;
7899
+ display: flex;
7900
+ -webkit-box-orient: vertical;
7901
+ -webkit-box-direction: normal;
7902
+ -ms-flex-direction: column;
7903
+ flex-direction: column;
7904
+ overflow: hidden;
7905
+ }
7906
+ .c-sidebar--has-cta .c-drawer-header[data-v-8003fcca] {
7907
+ -ms-flex-negative: 0;
7908
+ flex-shrink: 0;
7909
+ }
7910
+ .c-sidebar--has-cta .c-nav-list[data-v-8003fcca] {
7911
+ /* min-height:0 is what lets the list shrink below its content height, so the list —
7912
+ not the panel — is what scrolls once there are more links than fit. */
7913
+ min-height: 0;
7914
+ overflow-y: auto;
7915
+ }
7916
+ .c-drawer-cta[data-v-8003fcca] {
7869
7917
  position: relative;
7870
7918
  padding: 1rem;
7871
7919
  }
7920
+ .c-sidebar--has-cta .c-drawer-cta[data-v-8003fcca] {
7921
+ /* Pushes the button to the bottom when the links don't fill the panel; the nav
7922
+ list's own scrolling keeps it there when they overflow. */
7923
+ margin-top: auto;
7924
+ -ms-flex-negative: 0;
7925
+ flex-shrink: 0;
7926
+ /* Opaque against the panel so scrolled links don't show through. */
7927
+ background-color: inherit;
7928
+ }
7872
7929
 
7873
7930
  /* Hairline separator from the nav list, drawn in the drawer's own text colour so it
7874
7931
  works on any panel background. A pseudo-element carries the fade — opacity on the
7875
7932
  section itself would wash out the button. */
7876
- .c-drawer-cta[data-v-b618b914]::before {
7933
+ .c-drawer-cta[data-v-8003fcca]::before {
7877
7934
  content: '';
7878
7935
  position: absolute;
7879
7936
  top: 0;
@@ -8063,14 +8120,14 @@ body {
8063
8120
  visibility: hidden !important;
8064
8121
  }
8065
8122
 
8066
- .brand-page-root[data-v-1a7e8144] {
8123
+ .brand-page-root[data-v-322d4e23] {
8067
8124
  height: 100%;
8068
8125
  }
8069
- .sortable[data-v-1a7e8144] {
8126
+ .sortable[data-v-322d4e23] {
8070
8127
  outline-color: #b2bdfb;
8071
8128
  outline-width: 0.2rem;
8072
8129
  }
8073
- .brand-page[data-v-1a7e8144] {
8130
+ .brand-page[data-v-322d4e23] {
8074
8131
  -webkit-box-sizing: border-box;
8075
8132
  box-sizing: border-box;
8076
8133
  display: -webkit-box;
@@ -8082,7 +8139,7 @@ body {
8082
8139
  -ms-flex-direction: column;
8083
8140
  flex-direction: column;
8084
8141
  }
8085
- .brand-page__background-shapes-layer[data-v-1a7e8144] {
8142
+ .brand-page__background-shapes-layer[data-v-322d4e23] {
8086
8143
  position: fixed;
8087
8144
  top: 0;
8088
8145
  left: 0;
@@ -8093,11 +8150,11 @@ body {
8093
8150
  transform: translate3d(0, 0, 0);
8094
8151
  contain: layout paint;
8095
8152
  }
8096
- .template-preview .brand-page__background-shapes-layer[data-v-1a7e8144],
8097
- .device-wrapper .brand-page__background-shapes-layer[data-v-1a7e8144] {
8153
+ .template-preview .brand-page__background-shapes-layer[data-v-322d4e23],
8154
+ .device-wrapper .brand-page__background-shapes-layer[data-v-322d4e23] {
8098
8155
  height: 100%;
8099
8156
  }
8100
- .brand-page__inner--default[data-v-1a7e8144] {
8157
+ .brand-page__inner--default[data-v-322d4e23] {
8101
8158
  position: relative;
8102
8159
  z-index: 10;
8103
8160
  display: -webkit-box;
@@ -8109,16 +8166,16 @@ body {
8109
8166
  -ms-flex-direction: column;
8110
8167
  flex-direction: column;
8111
8168
  }
8112
- .brand-page__inner--desktop[data-v-1a7e8144] {
8169
+ .brand-page__inner--desktop[data-v-322d4e23] {
8113
8170
  min-height: 100vh;
8114
8171
  }
8115
- .brand-site__header[data-v-1a7e8144] {
8172
+ .brand-site__header[data-v-322d4e23] {
8116
8173
  container-type: inline-size;
8117
8174
  }
8118
- .brand-page__header[data-v-1a7e8144] {
8175
+ .brand-page__header[data-v-322d4e23] {
8119
8176
  padding-top: var(--page-padding);
8120
8177
  }
8121
- .brand-page__content--default[data-v-1a7e8144] {
8178
+ .brand-page__content--default[data-v-322d4e23] {
8122
8179
  margin-left: auto;
8123
8180
  margin-right: auto;
8124
8181
  margin-bottom: 2.5rem;
@@ -8135,7 +8192,7 @@ body {
8135
8192
  flex-direction: column;
8136
8193
  max-width: var(--page-max-width);
8137
8194
  }
8138
- .brand-page__content--desktop[data-v-1a7e8144] {
8195
+ .brand-page__content--desktop[data-v-322d4e23] {
8139
8196
  margin-left: auto;
8140
8197
  margin-right: auto;
8141
8198
  display: -webkit-box;
@@ -8151,15 +8208,15 @@ body {
8151
8208
  flex-direction: column;
8152
8209
  max-width: 100%;
8153
8210
  }
8154
- .brand-page__content--inner[data-v-1a7e8144] {
8211
+ .brand-page__content--inner[data-v-322d4e23] {
8155
8212
  padding-left: var(--page-padding);
8156
8213
  padding-right: var(--page-padding);
8157
8214
  }
8158
- .brand-page__content--inner--brandsite[data-v-1a7e8144] {
8215
+ .brand-page__content--inner--brandsite[data-v-322d4e23] {
8159
8216
  max-width: var(--brandsite-max-width);
8160
8217
  margin: 0 auto;
8161
8218
  }
8162
- .brand-page__content--outline-selected[data-v-1a7e8144] {
8219
+ .brand-page__content--outline-selected[data-v-322d4e23] {
8163
8220
  position: relative;
8164
8221
  z-index: 10;
8165
8222
  outline-color: #b2bdfb;
@@ -8167,20 +8224,20 @@ body {
8167
8224
  outline-style: dashed;
8168
8225
  outline-offset: -0.25rem;
8169
8226
  }
8170
- .brand-page__content--outline-footer-selected[data-v-1a7e8144] {
8227
+ .brand-page__content--outline-footer-selected[data-v-322d4e23] {
8171
8228
  outline-color: #f7768c;
8172
8229
  outline-width: 0.2rem;
8173
8230
  outline-style: dashed;
8174
8231
  outline-offset: -0.25rem;
8175
8232
  }
8176
8233
  @media (max-width: 640px) {
8177
- .brand-page__content--inner--full-width[data-v-1a7e8144] {
8234
+ .brand-page__content--inner--full-width[data-v-322d4e23] {
8178
8235
  padding-left: 0;
8179
8236
  padding-right: 0;
8180
8237
  }
8181
8238
  }
8182
8239
  @media (min-width: 640px) {
8183
- .brand-page__content--inner--full-width[data-v-1a7e8144] {
8240
+ .brand-page__content--inner--full-width[data-v-322d4e23] {
8184
8241
  padding-left: var(--page-padding);
8185
8242
  padding-right: var(--page-padding);
8186
8243
  }
@@ -9773,7 +9830,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
9773
9830
  color: rgb(24 24 24 / var(--tw-text-opacity))
9774
9831
  }
9775
9832
 
9776
- .header-button-settings_option-title[data-v-9a1ee526] {
9833
+ .header-button-settings_option-title[data-v-3665786e] {
9777
9834
  font-family: Inter, Helvetica, sans-serif;
9778
9835
  font-size: 0.875rem;
9779
9836
  line-height: 1.25rem;
@@ -9821,7 +9878,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
9821
9878
  margin: 0 auto;
9822
9879
  }
9823
9880
 
9824
- .header-settings-panel_option-title[data-v-8244a08c] {
9881
+ .header-settings-panel_option-title[data-v-2b849103] {
9825
9882
  font-family: Inter, Helvetica, sans-serif;
9826
9883
  font-size: 0.875rem;
9827
9884
  line-height: 1.25rem;