@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
@@ -7099,68 +7099,68 @@ select[data-v-665b8067] {
7099
7099
  margin: 0 auto;
7100
7100
  }
7101
7101
 
7102
- .root[data-v-27d98913] {
7103
- --logo-width: var(--aa5a55f0);
7102
+ .root[data-v-dc7e5167] {
7103
+ --logo-width: var(--v2fb35d8a);
7104
7104
  --logo-max-width: 20rem;
7105
7105
  --tab-nav-height: 56px;
7106
7106
  --hamburger-nav-height: 32px;
7107
7107
  --hamburger-nav-width: 32px;
7108
7108
  }
7109
- .layout[data-v-27d98913] {
7109
+ .layout[data-v-dc7e5167] {
7110
7110
  -webkit-box-align: center;
7111
7111
  -ms-flex-align: center;
7112
7112
  align-items: center;
7113
7113
  }
7114
- .nav-container[data-v-27d98913] {
7114
+ .nav-container[data-v-dc7e5167] {
7115
7115
  max-width: 100%;
7116
7116
  overflow: hidden;
7117
7117
  }
7118
- .logo-container[data-v-27d98913] {
7118
+ .logo-container[data-v-dc7e5167] {
7119
7119
  }
7120
7120
  /* The CTA container is a plain block: every family below positions the BOX, and the
7121
7121
  button then fills whatever box it is given (full width for the mobile row,
7122
7122
  content width everywhere else). */
7123
- .cta-container[data-v-27d98913] {
7123
+ .cta-container[data-v-dc7e5167] {
7124
7124
  min-width: 0;
7125
7125
  }
7126
7126
 
7127
7127
  /* DESKTOP_TAB_1 */
7128
- .desktop-tab-horizontal-stack-left-logo-right-menu[data-v-27d98913] {
7128
+ .desktop-tab-horizontal-stack-left-logo-right-menu[data-v-dc7e5167] {
7129
7129
  display: -webkit-box;
7130
7130
  display: -ms-flexbox;
7131
7131
  display: flex;
7132
7132
  }
7133
- .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container[data-v-27d98913] {
7133
+ .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container[data-v-dc7e5167] {
7134
7134
  -webkit-box-flex: 1;
7135
7135
  -ms-flex: 1;
7136
7136
  flex: 1;
7137
7137
  margin-left: 1rem;
7138
7138
  }
7139
- .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container__inner[data-v-27d98913] {
7139
+ .desktop-tab-horizontal-stack-left-logo-right-menu .nav-container__inner[data-v-dc7e5167] {
7140
7140
  display: inline-block;
7141
7141
  float: right;
7142
7142
  max-width: 100%;
7143
7143
  }
7144
7144
 
7145
7145
  /* DESKTOP_TAB_2 */
7146
- .desktop-tab-horizontal-stack-left-logo-left-menu[data-v-27d98913] {
7146
+ .desktop-tab-horizontal-stack-left-logo-left-menu[data-v-dc7e5167] {
7147
7147
  display: -webkit-box;
7148
7148
  display: -ms-flexbox;
7149
7149
  display: flex;
7150
7150
  }
7151
- .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container[data-v-27d98913] {
7151
+ .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container[data-v-dc7e5167] {
7152
7152
  -webkit-box-flex: 1;
7153
7153
  -ms-flex: 1;
7154
7154
  flex: 1;
7155
7155
  margin-left: 1rem;
7156
7156
  }
7157
- .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container__inner[data-v-27d98913] {
7157
+ .desktop-tab-horizontal-stack-left-logo-left-menu .nav-container__inner[data-v-dc7e5167] {
7158
7158
  display: inline-block;
7159
7159
  max-width: 100%;
7160
7160
  }
7161
7161
 
7162
7162
  /* DESKTOP_TAB_3 */
7163
- .desktop-tab-horizontal-stack-left-logo-centered-menu[data-v-27d98913] {
7163
+ .desktop-tab-horizontal-stack-left-logo-centered-menu[data-v-dc7e5167] {
7164
7164
  display: grid;
7165
7165
  grid-template-columns:
7166
7166
  [logo-start] var(--logo-max-width) [logo-end nav-start] 1fr [nav-end] var(
@@ -7173,14 +7173,14 @@ select[data-v-665b8067] {
7173
7173
  margin-top: 1rem;
7174
7174
  margin-bottom: 1rem;
7175
7175
  }
7176
- .desktop-tab-horizontal-stack-left-logo-centered-menu .logo-container[data-v-27d98913] {
7176
+ .desktop-tab-horizontal-stack-left-logo-centered-menu .logo-container[data-v-dc7e5167] {
7177
7177
  grid-column: logo-start / logo-end;
7178
7178
  justify-self: start;
7179
7179
  }
7180
- .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container[data-v-27d98913] {
7180
+ .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container[data-v-dc7e5167] {
7181
7181
  grid-column: nav-start / nav-end;
7182
7182
  }
7183
- .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container__inner[data-v-27d98913] {
7183
+ .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container__inner[data-v-dc7e5167] {
7184
7184
  /* start - center content */
7185
7185
  display: inline-block;
7186
7186
  -webkit-transform: translateX(-50%);
@@ -7191,7 +7191,7 @@ select[data-v-665b8067] {
7191
7191
  /* end - center content */
7192
7192
  }
7193
7193
  /* DESKTOP_TAB_4 */
7194
- .desktop-tab-horizontal-stack-centered-logo-right-menu[data-v-27d98913] {
7194
+ .desktop-tab-horizontal-stack-centered-logo-right-menu[data-v-dc7e5167] {
7195
7195
  display: grid;
7196
7196
  -webkit-column-gap: 1rem;
7197
7197
  -moz-column-gap: 1rem;
@@ -7200,26 +7200,26 @@ select[data-v-665b8067] {
7200
7200
  [col-start] 1fr [logo-start] var(--logo-max-width)
7201
7201
  [logo-end nav-start] 1fr [nav-end];
7202
7202
  }
7203
- .desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container[data-v-27d98913] {
7203
+ .desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container[data-v-dc7e5167] {
7204
7204
  grid-column: logo-start / logo-end;
7205
7205
  }
7206
- .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container[data-v-27d98913] {
7206
+ .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container[data-v-dc7e5167] {
7207
7207
  grid-column: nav-start / nav-end;
7208
7208
  }
7209
- .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container__inner[data-v-27d98913] {
7209
+ .desktop-tab-horizontal-stack-centered-logo-right-menu .nav-container__inner[data-v-dc7e5167] {
7210
7210
  /* start - align right content */
7211
7211
  float: right;
7212
7212
  max-width: 100%;
7213
7213
  /* end - align right content */
7214
7214
  }
7215
7215
  /* DESKTOP_TAB_5 */
7216
- .desktop-tab-vertical-stack-centered-logo-centered-menu[data-v-27d98913] {
7216
+ .desktop-tab-vertical-stack-centered-logo-centered-menu[data-v-dc7e5167] {
7217
7217
  -webkit-box-align: center;
7218
7218
  -ms-flex-align: center;
7219
7219
  align-items: center;
7220
7220
  justify-items: center;
7221
7221
  }
7222
- .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-27d98913] {
7222
+ .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-dc7e5167] {
7223
7223
  display: grid;
7224
7224
  grid-template-rows: repeat(2, minmax(0, 1fr));
7225
7225
  row-gap: 1rem;
@@ -7228,16 +7228,16 @@ select[data-v-665b8067] {
7228
7228
  [row2-end];
7229
7229
  }
7230
7230
  .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav
7231
- .logo-container[data-v-27d98913] {
7231
+ .logo-container[data-v-dc7e5167] {
7232
7232
  grid-row: row1-start / row1-end;
7233
7233
  }
7234
7234
  .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav
7235
- .nav-container[data-v-27d98913] {
7235
+ .nav-container[data-v-dc7e5167] {
7236
7236
  grid-row: row2-start / row2-end;
7237
7237
  width: 100%;
7238
7238
  }
7239
7239
  .desktop-tab-vertical-stack-centered-logo-centered-menu.show-nav
7240
- .nav-container__inner[data-v-27d98913] {
7240
+ .nav-container__inner[data-v-dc7e5167] {
7241
7241
  display: inline-block;
7242
7242
  -webkit-transform: translateX(-50%);
7243
7243
  transform: translateX(-50%);
@@ -7245,7 +7245,7 @@ select[data-v-665b8067] {
7245
7245
  position: relative;
7246
7246
  max-width: 100%;
7247
7247
  }
7248
- .desktop-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-27d98913] {
7248
+ .desktop-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-dc7e5167] {
7249
7249
  display: -webkit-box;
7250
7250
  display: -ms-flexbox;
7251
7251
  display: flex;
@@ -7255,14 +7255,14 @@ select[data-v-665b8067] {
7255
7255
  }
7256
7256
 
7257
7257
  /* MOBILE_TAB_1 */
7258
- .mobile-tab-vertical-stack-centered-logo-centered-menu[data-v-27d98913] {
7258
+ .mobile-tab-vertical-stack-centered-logo-centered-menu[data-v-dc7e5167] {
7259
7259
  -webkit-box-align: center;
7260
7260
  -ms-flex-align: center;
7261
7261
  align-items: center;
7262
7262
  justify-items: center;
7263
7263
  width: 100%;
7264
7264
  }
7265
- .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-27d98913] {
7265
+ .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav[data-v-dc7e5167] {
7266
7266
  display: grid;
7267
7267
  row-gap: 1rem;
7268
7268
  grid-template-rows:
@@ -7270,21 +7270,21 @@ select[data-v-665b8067] {
7270
7270
  [row2-end];
7271
7271
  }
7272
7272
  .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav
7273
- .logo-container[data-v-27d98913] {
7273
+ .logo-container[data-v-dc7e5167] {
7274
7274
  grid-row: row1-start / row1-end;
7275
7275
  }
7276
- .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav .nav-container[data-v-27d98913] {
7276
+ .mobile-tab-vertical-stack-centered-logo-centered-menu.show-nav .nav-container[data-v-dc7e5167] {
7277
7277
  grid-row: row2-start / row2-end;
7278
7278
  width: 100%;
7279
7279
  }
7280
- .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-27d98913] {
7280
+ .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav[data-v-dc7e5167] {
7281
7281
  display: -webkit-box;
7282
7282
  display: -ms-flexbox;
7283
7283
  display: flex;
7284
7284
  }
7285
7285
 
7286
7286
  /* DESKTOP_TAB_6 */
7287
- .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-27d98913] {
7287
+ .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-dc7e5167] {
7288
7288
  display: grid;
7289
7289
  grid-template-rows:
7290
7290
  [row1-start] var(--tab-nav-height)
@@ -7296,28 +7296,28 @@ select[data-v-665b8067] {
7296
7296
  justify-items: center;
7297
7297
  }
7298
7298
  .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav
7299
- .logo-container[data-v-27d98913] {
7299
+ .logo-container[data-v-dc7e5167] {
7300
7300
  grid-row: row2-start / row2-end;
7301
7301
  text-align: center;
7302
7302
  }
7303
7303
  .desktop-tab-vertical-stack-centered-menu-centered-logo.show-nav
7304
- .nav-container[data-v-27d98913] {
7304
+ .nav-container[data-v-dc7e5167] {
7305
7305
  grid-row: row1-start / row1-end;
7306
7306
  }
7307
- .layout desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-27d98913] {
7307
+ .layout desktop-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-dc7e5167] {
7308
7308
  display: -webkit-box;
7309
7309
  display: -ms-flexbox;
7310
7310
  display: flex;
7311
7311
  }
7312
7312
  /* MOBILE_TAB_2 */
7313
- .mobile-tab-vertical-stack-centered-menu-centered-logo[data-v-27d98913] {
7313
+ .mobile-tab-vertical-stack-centered-menu-centered-logo[data-v-dc7e5167] {
7314
7314
  -webkit-box-align: center;
7315
7315
  -ms-flex-align: center;
7316
7316
  align-items: center;
7317
7317
  justify-items: center;
7318
7318
  width: 100%;
7319
7319
  }
7320
- .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-27d98913] {
7320
+ .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav[data-v-dc7e5167] {
7321
7321
  display: grid;
7322
7322
  grid-template-rows:
7323
7323
  [row1-start] var(--tab-nav-height)
@@ -7326,22 +7326,22 @@ select[data-v-665b8067] {
7326
7326
  margin-top: 1rem;
7327
7327
  }
7328
7328
  .mobile-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
  }
7332
- .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav .nav-container[data-v-27d98913] {
7332
+ .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav .nav-container[data-v-dc7e5167] {
7333
7333
  grid-row: row1-start / row1-end;
7334
7334
  width: 100%;
7335
7335
  }
7336
- .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-27d98913] {
7336
+ .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav[data-v-dc7e5167] {
7337
7337
  display: -webkit-box;
7338
7338
  display: -ms-flexbox;
7339
7339
  display: flex;
7340
7340
  }
7341
7341
 
7342
7342
  /* DESKTOP_TAB_NO_LOGO_1, DESKTOP_HAMBURGER_NO_LOGO_1 */
7343
- .desktop-tab-left-menu-no-logo[data-v-27d98913],
7344
- .desktop-hamburger-no-logo-left-menu[data-v-27d98913] {
7343
+ .desktop-tab-left-menu-no-logo[data-v-dc7e5167],
7344
+ .desktop-hamburger-no-logo-left-menu[data-v-dc7e5167] {
7345
7345
  display: -webkit-box;
7346
7346
  display: -ms-flexbox;
7347
7347
  display: flex;
@@ -7349,15 +7349,15 @@ select[data-v-665b8067] {
7349
7349
  -ms-flex-pack: start;
7350
7350
  justify-content: flex-start;
7351
7351
  }
7352
- .desktop-tab-left-menu-no-logo .logo-container[data-v-27d98913],
7353
- .desktop-hamburger-no-logo-left-menu .logo-container[data-v-27d98913] {
7352
+ .desktop-tab-left-menu-no-logo .logo-container[data-v-dc7e5167],
7353
+ .desktop-hamburger-no-logo-left-menu .logo-container[data-v-dc7e5167] {
7354
7354
  display: none;
7355
7355
  }
7356
7356
 
7357
7357
  /* DESKTOP_TAB_NO_LOGO_2, DESKTOP_HAMBURGER_NO_LOGO_2, MOBILE_TAB_NO_LOGO_1 */
7358
- .desktop-tab-centered-menu-no-logo[data-v-27d98913],
7359
- .desktop-hamburger-no-logo-centered-menu[data-v-27d98913],
7360
- .mobile-tab-centered-menu-no-logo[data-v-27d98913] {
7358
+ .desktop-tab-centered-menu-no-logo[data-v-dc7e5167],
7359
+ .desktop-hamburger-no-logo-centered-menu[data-v-dc7e5167],
7360
+ .mobile-tab-centered-menu-no-logo[data-v-dc7e5167] {
7361
7361
  display: -webkit-box;
7362
7362
  display: -ms-flexbox;
7363
7363
  display: flex;
@@ -7365,15 +7365,15 @@ select[data-v-665b8067] {
7365
7365
  -ms-flex-pack: center;
7366
7366
  justify-content: center;
7367
7367
  }
7368
- .desktop-tab-centered-menu-no-logo .logo-container[data-v-27d98913],
7369
- .desktop-hamburger-no-logo-centered-menu .logo-container[data-v-27d98913],
7370
- .mobile-tab-centered-menu-no-logo .logo-container[data-v-27d98913] {
7368
+ .desktop-tab-centered-menu-no-logo .logo-container[data-v-dc7e5167],
7369
+ .desktop-hamburger-no-logo-centered-menu .logo-container[data-v-dc7e5167],
7370
+ .mobile-tab-centered-menu-no-logo .logo-container[data-v-dc7e5167] {
7371
7371
  display: none;
7372
7372
  }
7373
7373
 
7374
7374
  /* DESKTOP_TAB_NO_LOGO_3, DESKTOP_HAMBURGER_NO_LOGO_3 */
7375
- .desktop-tab-right-menu-no-logo[data-v-27d98913],
7376
- .desktop-hamburger-no-logo-right-menu[data-v-27d98913] {
7375
+ .desktop-tab-right-menu-no-logo[data-v-dc7e5167],
7376
+ .desktop-hamburger-no-logo-right-menu[data-v-dc7e5167] {
7377
7377
  display: -webkit-box;
7378
7378
  display: -ms-flexbox;
7379
7379
  display: flex;
@@ -7381,14 +7381,14 @@ select[data-v-665b8067] {
7381
7381
  -ms-flex-pack: end;
7382
7382
  justify-content: flex-end;
7383
7383
  }
7384
- .desktop-tab-right-menu-no-logo .logo-container[data-v-27d98913],
7385
- .desktop-hamburger-no-logo-right-menu .logo-container[data-v-27d98913] {
7384
+ .desktop-tab-right-menu-no-logo .logo-container[data-v-dc7e5167],
7385
+ .desktop-hamburger-no-logo-right-menu .logo-container[data-v-dc7e5167] {
7386
7386
  display: none;
7387
7387
  }
7388
7388
 
7389
7389
  /* DESKTOP_HAMBURGER_1, MOBILE_HAMBURGER_1 */
7390
- .desktop-hamburger-horizontal-stack-left-logo-right-menu[data-v-27d98913],
7391
- .mobile-hamburger-horizontal-stack-left-logo-right-menu[data-v-27d98913] {
7390
+ .desktop-hamburger-horizontal-stack-left-logo-right-menu[data-v-dc7e5167],
7391
+ .mobile-hamburger-horizontal-stack-left-logo-right-menu[data-v-dc7e5167] {
7392
7392
  display: grid;
7393
7393
  grid-template-columns: [logo-start] auto [nav-start] var(
7394
7394
  --hamburger-nav-width
@@ -7397,8 +7397,8 @@ select[data-v-665b8067] {
7397
7397
  -ms-flex-align: start;
7398
7398
  align-items: start;
7399
7399
  }
7400
- .desktop-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-27d98913],
7401
- .mobile-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-27d98913] {
7400
+ .desktop-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-dc7e5167],
7401
+ .mobile-hamburger-horizontal-stack-left-logo-right-menu .logo-container[data-v-dc7e5167] {
7402
7402
  margin-right: 1rem;
7403
7403
  display: -webkit-box;
7404
7404
  display: -ms-flexbox;
@@ -7408,15 +7408,15 @@ select[data-v-665b8067] {
7408
7408
  justify-content: flex-start;
7409
7409
  grid-column: logo-start;
7410
7410
  }
7411
- .desktop-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-27d98913],
7412
- .mobile-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-27d98913] {
7411
+ .desktop-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-dc7e5167],
7412
+ .mobile-hamburger-horizontal-stack-left-logo-right-menu .nav-container[data-v-dc7e5167] {
7413
7413
  grid-column: nav-start;
7414
7414
  margin: var(--page-padding) 0;
7415
7415
  }
7416
7416
 
7417
7417
  /* DESKTOP_HAMBURGER_2, MOBILE_HAMBURGER_2 */
7418
- .desktop-hamburger-horizontal-stack-centered-logo-right-menu[data-v-27d98913],
7419
- .mobile-hamburger-horizontal-stack-centered-logo-right-menu[data-v-27d98913] {
7418
+ .desktop-hamburger-horizontal-stack-centered-logo-right-menu[data-v-dc7e5167],
7419
+ .mobile-hamburger-horizontal-stack-centered-logo-right-menu[data-v-dc7e5167] {
7420
7420
  display: grid;
7421
7421
  grid-template-columns:
7422
7422
  [start] var(--hamburger-nav-width)
@@ -7425,8 +7425,8 @@ select[data-v-665b8067] {
7425
7425
  -ms-flex-align: start;
7426
7426
  align-items: start;
7427
7427
  }
7428
- .desktop-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-27d98913],
7429
- .mobile-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-27d98913] {
7428
+ .desktop-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-dc7e5167],
7429
+ .mobile-hamburger-horizontal-stack-centered-logo-right-menu .logo-container[data-v-dc7e5167] {
7430
7430
  margin-left: 1rem;
7431
7431
  margin-right: 1rem;
7432
7432
  display: -webkit-box;
@@ -7437,14 +7437,14 @@ select[data-v-665b8067] {
7437
7437
  justify-content: center;
7438
7438
  grid-column: logo-start;
7439
7439
  }
7440
- .desktop-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-27d98913],
7441
- .mobile-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-27d98913] {
7440
+ .desktop-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-dc7e5167],
7441
+ .mobile-hamburger-horizontal-stack-centered-logo-right-menu .nav-container[data-v-dc7e5167] {
7442
7442
  grid-column: nav-start;
7443
7443
  margin: var(--page-padding) 0;
7444
7444
  }
7445
7445
 
7446
7446
  /* MOBILE_HAMBURGER_3 */
7447
- .mobile-hamburger-horizontal-stack-left-menu-centered-logo[data-v-27d98913] {
7447
+ .mobile-hamburger-horizontal-stack-left-menu-centered-logo[data-v-dc7e5167] {
7448
7448
  display: grid;
7449
7449
  grid-template-columns: var(--hamburger-nav-width) auto var(
7450
7450
  --hamburger-nav-width
@@ -7454,7 +7454,7 @@ select[data-v-665b8067] {
7454
7454
  -ms-flex-align: start;
7455
7455
  align-items: start;
7456
7456
  }
7457
- .mobile-hamburger-horizontal-stack-left-menu-centered-logo .logo-container[data-v-27d98913] {
7457
+ .mobile-hamburger-horizontal-stack-left-menu-centered-logo .logo-container[data-v-dc7e5167] {
7458
7458
  margin-left: 1rem;
7459
7459
  margin-right: 1rem;
7460
7460
  display: -webkit-box;
@@ -7465,18 +7465,18 @@ select[data-v-665b8067] {
7465
7465
  justify-content: center;
7466
7466
  grid-area: b;
7467
7467
  }
7468
- .mobile-hamburger-horizontal-stack-left-menu-centered-logo .nav-container[data-v-27d98913] {
7468
+ .mobile-hamburger-horizontal-stack-left-menu-centered-logo .nav-container[data-v-dc7e5167] {
7469
7469
  grid-area: a;
7470
7470
  margin: var(--page-padding) 0;
7471
7471
  }
7472
7472
  .mobile-hamburger-horizontal-stack-left-menu-centered-logo
7473
- .nav-container__inner[data-v-27d98913] {
7473
+ .nav-container__inner[data-v-dc7e5167] {
7474
7474
  float: left;
7475
7475
  max-width: 100%;
7476
7476
  }
7477
7477
 
7478
7478
  /* MOBILE_HAMBURGER_4 */
7479
- .mobile-hamburger-horizontal-stack-left-menu-left-logo[data-v-27d98913] {
7479
+ .mobile-hamburger-horizontal-stack-left-menu-left-logo[data-v-dc7e5167] {
7480
7480
  display: grid;
7481
7481
  grid-template-columns: var(--hamburger-nav-width) auto;
7482
7482
  grid-template-areas: 'a b';
@@ -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-left-logo .logo-container[data-v-27d98913] {
7487
+ .mobile-hamburger-horizontal-stack-left-menu-left-logo .logo-container[data-v-dc7e5167] {
7488
7488
  margin-left: 1rem;
7489
7489
  display: -webkit-box;
7490
7490
  display: -ms-flexbox;
@@ -7494,17 +7494,17 @@ select[data-v-665b8067] {
7494
7494
  justify-content: flex-start;
7495
7495
  grid-area: b;
7496
7496
  }
7497
- .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container[data-v-27d98913] {
7497
+ .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container[data-v-dc7e5167] {
7498
7498
  grid-area: a;
7499
7499
  margin: var(--page-padding) 0;
7500
7500
  }
7501
- .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container__inner[data-v-27d98913] {
7501
+ .mobile-hamburger-horizontal-stack-left-menu-left-logo .nav-container__inner[data-v-dc7e5167] {
7502
7502
  float: left;
7503
7503
  max-width: 100%;
7504
7504
  }
7505
7505
 
7506
7506
  /* MOBILE_HAMBURGER_NO_LOGO_1 */
7507
- .mobile-hamburger-no-logo-left-menu[data-v-27d98913] {
7507
+ .mobile-hamburger-no-logo-left-menu[data-v-dc7e5167] {
7508
7508
  display: -webkit-box;
7509
7509
  display: -ms-flexbox;
7510
7510
  display: flex;
@@ -7512,12 +7512,12 @@ select[data-v-665b8067] {
7512
7512
  -ms-flex-pack: start;
7513
7513
  justify-content: flex-start;
7514
7514
  }
7515
- .mobile-hamburger-no-logo-left-menu .logo-container[data-v-27d98913] {
7515
+ .mobile-hamburger-no-logo-left-menu .logo-container[data-v-dc7e5167] {
7516
7516
  display: none;
7517
7517
  }
7518
7518
 
7519
7519
  /* MOBILE_HAMBURGER_NO_LOGO_2 */
7520
- .mobile-hamburger-no-logo-centered-menu[data-v-27d98913] {
7520
+ .mobile-hamburger-no-logo-centered-menu[data-v-dc7e5167] {
7521
7521
  display: -webkit-box;
7522
7522
  display: -ms-flexbox;
7523
7523
  display: flex;
@@ -7525,11 +7525,11 @@ select[data-v-665b8067] {
7525
7525
  -ms-flex-pack: center;
7526
7526
  justify-content: center;
7527
7527
  }
7528
- .mobile-hamburger-no-logo-centered-menu .logo-container[data-v-27d98913] {
7528
+ .mobile-hamburger-no-logo-centered-menu .logo-container[data-v-dc7e5167] {
7529
7529
  display: none;
7530
7530
  }
7531
7531
  /* MOBILE_HAMBURGER_NO_LOGO_3 */
7532
- .mobile-hamburger-no-logo-right-menu[data-v-27d98913] {
7532
+ .mobile-hamburger-no-logo-right-menu[data-v-dc7e5167] {
7533
7533
  display: -webkit-box;
7534
7534
  display: -ms-flexbox;
7535
7535
  display: flex;
@@ -7537,37 +7537,33 @@ select[data-v-665b8067] {
7537
7537
  -ms-flex-pack: end;
7538
7538
  justify-content: flex-end;
7539
7539
  }
7540
- .mobile-hamburger-no-logo-right-menu .logo-container[data-v-27d98913] {
7540
+ .mobile-hamburger-no-logo-right-menu .logo-container[data-v-dc7e5167] {
7541
7541
  display: none;
7542
7542
  }
7543
7543
 
7544
7544
  /* ==========================================================================
7545
- Header CTA placement (BP-5852)
7546
-
7547
- Every rule here is additive and only applies once a CTA is rendered — the
7548
- track/flow-changing ones are gated on `.has-header-cta` — so a header with no
7549
- button lays out exactly as it did before. Four placements:
7550
- join - inline immediately after the nav links
7551
- edge - pinned to the header's outer right edge, nav left untouched
7552
- corner - floats top-right, out of flow, independent of a centered stack
7553
- row - full-width row below the whole stack (mobile bar nav)
7545
+ Header CTA placement. Every rule is additive and gated on the CTA being
7546
+ rendered (`.has-header-cta` / `.cta-container`), so a header without the
7547
+ button lays out exactly as before. The placement archetypes (join / edge /
7548
+ corner / row) and the per-family reasoning live in
7549
+ docs/architecture/capabilities/page-header.md.
7554
7550
  ========================================================================== */
7555
7551
 
7556
7552
  /* join - DESKTOP_TAB_1: appended flex child; the nav's `flex: 1` right-aligns the
7557
7553
  [links][button] group, so the button lands adjacent to the links. */
7558
- .desktop-tab-horizontal-stack-left-logo-right-menu .cta-container[data-v-27d98913] {
7554
+ .desktop-tab-horizontal-stack-left-logo-right-menu .cta-container[data-v-dc7e5167] {
7559
7555
  margin-left: 1rem;
7560
7556
  }
7561
7557
 
7562
7558
  /* edge - DESKTOP_TAB_2: the nav's `flex: 1` keeps the left-aligned links in place
7563
7559
  and pushes the button to the outer right edge. */
7564
- .desktop-tab-horizontal-stack-left-logo-left-menu .cta-container[data-v-27d98913] {
7560
+ .desktop-tab-horizontal-stack-left-logo-left-menu .cta-container[data-v-dc7e5167] {
7565
7561
  margin-left: 1rem;
7566
7562
  }
7567
7563
 
7568
7564
  /* edge - DESKTOP_TAB_3: reuses the grid's existing trailing spacer column, so the
7569
7565
  centered nav and left logo keep their tracks unchanged. */
7570
- .desktop-tab-horizontal-stack-left-logo-centered-menu .cta-container[data-v-27d98913] {
7566
+ .desktop-tab-horizontal-stack-left-logo-centered-menu .cta-container[data-v-dc7e5167] {
7571
7567
  grid-column: nav-end / cols-end;
7572
7568
  justify-self: end;
7573
7569
  }
@@ -7575,37 +7571,50 @@ select[data-v-665b8067] {
7575
7571
  /* join - DESKTOP_TAB_4: adds a content-width column after the nav column. The two
7576
7572
  `1fr` tracks absorb the free space (an `auto` logo track would stretch and pull
7577
7573
  the button away from the links). */
7578
- .desktop-tab-horizontal-stack-centered-logo-right-menu.has-header-cta[data-v-27d98913] {
7574
+ .desktop-tab-horizontal-stack-centered-logo-right-menu.has-header-cta[data-v-dc7e5167] {
7579
7575
  grid-template-columns:
7580
7576
  [col-start] 1fr [logo-start] var(--logo-max-width)
7581
7577
  [logo-end nav-start] 1fr [nav-end cta-start] auto [cta-end];
7582
7578
  }
7583
- .desktop-tab-horizontal-stack-centered-logo-right-menu .cta-container[data-v-27d98913] {
7579
+ .desktop-tab-horizontal-stack-centered-logo-right-menu .cta-container[data-v-dc7e5167] {
7584
7580
  grid-column: cta-start / cta-end;
7585
7581
  }
7586
7582
 
7587
7583
  /* corner - DESKTOP_TAB_5 / DESKTOP_TAB_6: out of flow, so the centered vertical
7588
7584
  stack keeps its two explicit grid rows and stays centered. */
7589
- .desktop-tab-vertical-stack-centered-logo-centered-menu.has-header-cta[data-v-27d98913],
7590
- .desktop-tab-vertical-stack-centered-menu-centered-logo.has-header-cta[data-v-27d98913] {
7585
+ .desktop-tab-vertical-stack-centered-logo-centered-menu.has-header-cta[data-v-dc7e5167],
7586
+ .desktop-tab-vertical-stack-centered-menu-centered-logo.has-header-cta[data-v-dc7e5167] {
7591
7587
  position: relative;
7592
7588
  }
7593
- .desktop-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-27d98913],
7594
- .desktop-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-27d98913] {
7589
+ .desktop-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-dc7e5167],
7590
+ .desktop-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-dc7e5167] {
7595
7591
  position: absolute;
7596
7592
  top: 0;
7597
7593
  right: 0;
7598
7594
  }
7599
7595
 
7600
- /* row - MOBILE_TAB_1 / MOBILE_TAB_2: auto-places into an implicit third grid row
7601
- below the stack (both explicit rows are taken by the logo and the nav). */
7602
- .mobile-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-27d98913],
7603
- .mobile-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-27d98913] {
7596
+ /* row - MOBILE_TAB_1: auto-places into an implicit third grid row below the stack
7597
+ (both explicit rows are taken by the logo and the nav), giving logo / nav / button. */
7598
+ .mobile-tab-vertical-stack-centered-logo-centered-menu .cta-container[data-v-dc7e5167],
7599
+ .mobile-tab-vertical-stack-centered-menu-centered-logo .cta-container[data-v-dc7e5167] {
7604
7600
  width: 100%;
7605
7601
  justify-self: stretch;
7606
7602
  }
7607
- .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav.has-header-cta[data-v-27d98913],
7608
- .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav.has-header-cta[data-v-27d98913] {
7603
+
7604
+ /* row - MOBILE_TAB_2: the button belongs directly under the nav and ABOVE the logo,
7605
+ so the grid grows a middle row for it and the logo's existing `row2` names move
7606
+ down to the third. Auto-placement would otherwise drop it below the logo. */
7607
+ .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta[data-v-dc7e5167] {
7608
+ grid-template-rows:
7609
+ [row1-start] var(--tab-nav-height)
7610
+ [row1-end cta-start] auto [cta-end row2-start] 1fr [row2-end];
7611
+ }
7612
+ .mobile-tab-vertical-stack-centered-menu-centered-logo.show-nav.has-header-cta
7613
+ .cta-container[data-v-dc7e5167] {
7614
+ grid-row: cta-start / cta-end;
7615
+ }
7616
+ .mobile-tab-vertical-stack-centered-logo-centered-menu.no-nav.has-header-cta[data-v-dc7e5167],
7617
+ .mobile-tab-vertical-stack-centered-menu-centered-logo.no-nav.has-header-cta[data-v-dc7e5167] {
7609
7618
  -ms-flex-wrap: wrap;
7610
7619
  flex-wrap: wrap;
7611
7620
  -webkit-box-pack: center;
@@ -7615,27 +7624,27 @@ select[data-v-665b8067] {
7615
7624
 
7616
7625
  /* row - MOBILE_TAB_NO_LOGO_1: single centered flex row, so the full-width button
7617
7626
  needs a wrap to drop below the nav. */
7618
- .mobile-tab-centered-menu-no-logo.has-header-cta[data-v-27d98913] {
7627
+ .mobile-tab-centered-menu-no-logo.has-header-cta[data-v-dc7e5167] {
7619
7628
  -ms-flex-wrap: wrap;
7620
7629
  flex-wrap: wrap;
7621
7630
  }
7622
- .mobile-tab-centered-menu-no-logo .cta-container[data-v-27d98913] {
7631
+ .mobile-tab-centered-menu-no-logo .cta-container[data-v-dc7e5167] {
7623
7632
  width: 100%;
7624
7633
  }
7625
7634
 
7626
7635
  /* join - DESKTOP_TAB_NO_LOGO_1 / _3: appended flex child sits adjacent to the
7627
7636
  left- / right-aligned links. */
7628
- .desktop-tab-left-menu-no-logo .cta-container[data-v-27d98913],
7629
- .desktop-tab-right-menu-no-logo .cta-container[data-v-27d98913] {
7637
+ .desktop-tab-left-menu-no-logo .cta-container[data-v-dc7e5167],
7638
+ .desktop-tab-right-menu-no-logo .cta-container[data-v-dc7e5167] {
7630
7639
  margin-left: 1rem;
7631
7640
  }
7632
7641
 
7633
7642
  /* edge - DESKTOP_TAB_NO_LOGO_2: out of flow so the nav stays exactly centered
7634
7643
  (an in-flow button would shift the centered group left). */
7635
- .desktop-tab-centered-menu-no-logo.has-header-cta[data-v-27d98913] {
7644
+ .desktop-tab-centered-menu-no-logo.has-header-cta[data-v-dc7e5167] {
7636
7645
  position: relative;
7637
7646
  }
7638
- .desktop-tab-centered-menu-no-logo .cta-container[data-v-27d98913] {
7647
+ .desktop-tab-centered-menu-no-logo .cta-container[data-v-dc7e5167] {
7639
7648
  position: absolute;
7640
7649
  top: 0;
7641
7650
  right: 0;
@@ -7646,28 +7655,43 @@ select[data-v-665b8067] {
7646
7655
  nav column; the logo track becomes `1fr` to absorb the free space that an `auto`
7647
7656
  track would otherwise share with the CTA. The mobile hamburger styles share the
7648
7657
  base rules above but never render a CTA, so their tracks are untouched. */
7649
- .desktop-hamburger-horizontal-stack-left-logo-right-menu.has-header-cta[data-v-27d98913] {
7658
+ .desktop-hamburger-horizontal-stack-left-logo-right-menu.has-header-cta[data-v-dc7e5167] {
7650
7659
  grid-template-columns: [logo-start] 1fr [cta-start] auto [nav-start] var(
7651
7660
  --hamburger-nav-width
7652
7661
  );
7653
7662
  }
7654
- .desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta[data-v-27d98913] {
7663
+ .desktop-hamburger-horizontal-stack-centered-logo-right-menu.has-header-cta[data-v-dc7e5167] {
7655
7664
  grid-template-columns:
7656
7665
  [start] var(--hamburger-nav-width)
7657
7666
  [logo-start] 1fr [cta-start] auto [nav-start] var(--hamburger-nav-width);
7658
7667
  }
7659
- .desktop-hamburger-horizontal-stack-left-logo-right-menu .cta-container[data-v-27d98913],
7660
- .desktop-hamburger-horizontal-stack-centered-logo-right-menu .cta-container[data-v-27d98913] {
7668
+ .desktop-hamburger-horizontal-stack-left-logo-right-menu .cta-container[data-v-dc7e5167],
7669
+ .desktop-hamburger-horizontal-stack-centered-logo-right-menu .cta-container[data-v-dc7e5167] {
7661
7670
  grid-column: cta-start;
7662
- align-self: center;
7671
+ /* Explicit row: the CTA sits in DOM order after the nav, and sparse grid
7672
+ auto-placement never backtracks to an earlier column on the same row —
7673
+ without this the button wraps to an implicit second row. */
7674
+ grid-row: 1;
7675
+ /* Centre the button on the hamburger icon's line: the icon is start-aligned
7676
+ with the nav's --page-padding margin, so mirror that margin and let the
7677
+ (taller) button overflow a line of the icon's height evenly. */
7678
+ align-self: start;
7679
+ margin-top: var(--page-padding);
7680
+ height: var(--hamburger-nav-height);
7681
+ display: -webkit-box;
7682
+ display: -ms-flexbox;
7683
+ display: flex;
7684
+ -webkit-box-align: center;
7685
+ -ms-flex-align: center;
7686
+ align-items: center;
7663
7687
  margin-right: 1rem;
7664
7688
  }
7665
7689
 
7666
7690
  /* DESKTOP_HAMBURGER_NO_LOGO_1..3: flex rows; `order` puts the button before the
7667
7691
  icon without reordering the DOM. */
7668
- .desktop-hamburger-no-logo-left-menu .cta-container[data-v-27d98913],
7669
- .desktop-hamburger-no-logo-centered-menu .cta-container[data-v-27d98913],
7670
- .desktop-hamburger-no-logo-right-menu .cta-container[data-v-27d98913] {
7692
+ .desktop-hamburger-no-logo-left-menu .cta-container[data-v-dc7e5167],
7693
+ .desktop-hamburger-no-logo-centered-menu .cta-container[data-v-dc7e5167],
7694
+ .desktop-hamburger-no-logo-right-menu .cta-container[data-v-dc7e5167] {
7671
7695
  -webkit-box-ordinal-group: 0;
7672
7696
  -ms-flex-order: -1;
7673
7697
  order: -1;
@@ -7680,25 +7704,25 @@ select[data-v-665b8067] {
7680
7704
  drawer, so the button gets the mobile-bar full-width row below the logo. The
7681
7705
  grid styles auto-place it into an implicit row spanning all tracks; the
7682
7706
  flex no-logo styles wrap it onto its own line. */
7683
- .mobile-hamburger-horizontal-stack-left-logo-right-menu.no-nav .cta-container[data-v-27d98913],
7707
+ .mobile-hamburger-horizontal-stack-left-logo-right-menu.no-nav .cta-container[data-v-dc7e5167],
7684
7708
  .mobile-hamburger-horizontal-stack-centered-logo-right-menu.no-nav
7685
- .cta-container[data-v-27d98913],
7709
+ .cta-container[data-v-dc7e5167],
7686
7710
  .mobile-hamburger-horizontal-stack-left-menu-centered-logo.no-nav
7687
- .cta-container[data-v-27d98913],
7688
- .mobile-hamburger-horizontal-stack-left-menu-left-logo.no-nav .cta-container[data-v-27d98913] {
7711
+ .cta-container[data-v-dc7e5167],
7712
+ .mobile-hamburger-horizontal-stack-left-menu-left-logo.no-nav .cta-container[data-v-dc7e5167] {
7689
7713
  grid-column: 1 / -1;
7690
7714
  width: 100%;
7691
7715
  margin-top: 1rem;
7692
7716
  }
7693
- .mobile-hamburger-no-logo-left-menu.no-nav.has-header-cta[data-v-27d98913],
7694
- .mobile-hamburger-no-logo-centered-menu.no-nav.has-header-cta[data-v-27d98913],
7695
- .mobile-hamburger-no-logo-right-menu.no-nav.has-header-cta[data-v-27d98913] {
7717
+ .mobile-hamburger-no-logo-left-menu.no-nav.has-header-cta[data-v-dc7e5167],
7718
+ .mobile-hamburger-no-logo-centered-menu.no-nav.has-header-cta[data-v-dc7e5167],
7719
+ .mobile-hamburger-no-logo-right-menu.no-nav.has-header-cta[data-v-dc7e5167] {
7696
7720
  -ms-flex-wrap: wrap;
7697
7721
  flex-wrap: wrap;
7698
7722
  }
7699
- .mobile-hamburger-no-logo-left-menu.no-nav .cta-container[data-v-27d98913],
7700
- .mobile-hamburger-no-logo-centered-menu.no-nav .cta-container[data-v-27d98913],
7701
- .mobile-hamburger-no-logo-right-menu.no-nav .cta-container[data-v-27d98913] {
7723
+ .mobile-hamburger-no-logo-left-menu.no-nav .cta-container[data-v-dc7e5167],
7724
+ .mobile-hamburger-no-logo-centered-menu.no-nav .cta-container[data-v-dc7e5167],
7725
+ .mobile-hamburger-no-logo-right-menu.no-nav .cta-container[data-v-dc7e5167] {
7702
7726
  width: 100%;
7703
7727
  }
7704
7728
 
@@ -7766,7 +7790,7 @@ select[data-v-665b8067] {
7766
7790
  }
7767
7791
  }
7768
7792
 
7769
- .c-overlay[data-v-b618b914] {
7793
+ .c-overlay[data-v-8003fcca] {
7770
7794
  position: fixed;
7771
7795
  inset: 0px;
7772
7796
  z-index: 40;
@@ -7784,15 +7808,15 @@ select[data-v-665b8067] {
7784
7808
  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
7785
7809
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
7786
7810
  }
7787
- .c-overlay--open[data-v-b618b914] {
7811
+ .c-overlay--open[data-v-8003fcca] {
7788
7812
  opacity: 0.7;
7789
7813
  }
7790
- .c-overlay--closed[data-v-b618b914] {
7814
+ .c-overlay--closed[data-v-8003fcca] {
7791
7815
  pointer-events: none;
7792
7816
  display: none;
7793
7817
  opacity: 0;
7794
7818
  }
7795
- .c-sidebar[data-v-b618b914] {
7819
+ .c-sidebar[data-v-8003fcca] {
7796
7820
  /* No hardcoded background: the panel background comes from the hamburger
7797
7821
  defaultButtonStyle (bound via :style), so a transparent/unset default bg
7798
7822
  renders transparent instead of being forced white */
@@ -7812,38 +7836,71 @@ select[data-v-665b8067] {
7812
7836
  max-width: 66%;
7813
7837
  }
7814
7838
  @media (min-width: 768px) {
7815
- .device--mobile .c-sidebar[data-v-b618b914] {
7839
+ .device--mobile .c-sidebar[data-v-8003fcca] {
7816
7840
  width: 66.666667%;
7817
7841
  }
7818
7842
  }
7819
- .c-sidebar--closed[data-v-b618b914] {
7843
+ .c-sidebar--closed[data-v-8003fcca] {
7820
7844
  -webkit-transform: translateX(-100%);
7821
7845
  transform: translateX(-100%);
7822
7846
  visibility: hidden;
7823
7847
  }
7824
- .c-sidebar--open[data-v-b618b914] {
7848
+ .c-sidebar--open[data-v-8003fcca] {
7825
7849
  -webkit-transform: translateX(0%);
7826
7850
  transform: translateX(0%);
7827
7851
  }
7828
- .c-chevron-transform[data-v-b618b914] {
7852
+ .c-chevron-transform[data-v-8003fcca] {
7829
7853
  -webkit-transition: -webkit-transform 0.3s ease;
7830
7854
  transition: -webkit-transform 0.3s ease;
7831
7855
  transition: transform 0.3s ease;
7832
7856
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
7833
7857
  }
7834
- .c-chevron-expanded[data-v-b618b914] {
7858
+ .c-chevron-expanded[data-v-8003fcca] {
7835
7859
  -webkit-transform: rotate(180deg);
7836
7860
  transform: rotate(180deg);
7837
7861
  }
7838
- .c-drawer-cta[data-v-b618b914] {
7862
+
7863
+ /* Design: the drawer CTA is pinned to the bottom of the panel and stays put while a
7864
+ long link list scrolls. Every rule here is scoped to --has-cta, so a drawer without
7865
+ the button keeps its original block flow and panel-level scrolling. */
7866
+ .c-sidebar--has-cta[data-v-8003fcca] {
7867
+ display: -webkit-box;
7868
+ display: -ms-flexbox;
7869
+ display: flex;
7870
+ -webkit-box-orient: vertical;
7871
+ -webkit-box-direction: normal;
7872
+ -ms-flex-direction: column;
7873
+ flex-direction: column;
7874
+ overflow: hidden;
7875
+ }
7876
+ .c-sidebar--has-cta .c-drawer-header[data-v-8003fcca] {
7877
+ -ms-flex-negative: 0;
7878
+ flex-shrink: 0;
7879
+ }
7880
+ .c-sidebar--has-cta .c-nav-list[data-v-8003fcca] {
7881
+ /* min-height:0 is what lets the list shrink below its content height, so the list —
7882
+ not the panel — is what scrolls once there are more links than fit. */
7883
+ min-height: 0;
7884
+ overflow-y: auto;
7885
+ }
7886
+ .c-drawer-cta[data-v-8003fcca] {
7839
7887
  position: relative;
7840
7888
  padding: 1rem;
7841
7889
  }
7890
+ .c-sidebar--has-cta .c-drawer-cta[data-v-8003fcca] {
7891
+ /* Pushes the button to the bottom when the links don't fill the panel; the nav
7892
+ list's own scrolling keeps it there when they overflow. */
7893
+ margin-top: auto;
7894
+ -ms-flex-negative: 0;
7895
+ flex-shrink: 0;
7896
+ /* Opaque against the panel so scrolled links don't show through. */
7897
+ background-color: inherit;
7898
+ }
7842
7899
 
7843
7900
  /* Hairline separator from the nav list, drawn in the drawer's own text colour so it
7844
7901
  works on any panel background. A pseudo-element carries the fade — opacity on the
7845
7902
  section itself would wash out the button. */
7846
- .c-drawer-cta[data-v-b618b914]::before {
7903
+ .c-drawer-cta[data-v-8003fcca]::before {
7847
7904
  content: '';
7848
7905
  position: absolute;
7849
7906
  top: 0;
@@ -8033,14 +8090,14 @@ body {
8033
8090
  visibility: hidden !important;
8034
8091
  }
8035
8092
 
8036
- .brand-page-root[data-v-1a7e8144] {
8093
+ .brand-page-root[data-v-322d4e23] {
8037
8094
  height: 100%;
8038
8095
  }
8039
- .sortable[data-v-1a7e8144] {
8096
+ .sortable[data-v-322d4e23] {
8040
8097
  outline-color: #F7768C;
8041
8098
  outline-width: 0.2rem;
8042
8099
  }
8043
- .brand-page[data-v-1a7e8144] {
8100
+ .brand-page[data-v-322d4e23] {
8044
8101
  -webkit-box-sizing: border-box;
8045
8102
  box-sizing: border-box;
8046
8103
  display: -webkit-box;
@@ -8052,7 +8109,7 @@ body {
8052
8109
  -ms-flex-direction: column;
8053
8110
  flex-direction: column;
8054
8111
  }
8055
- .brand-page__background-shapes-layer[data-v-1a7e8144] {
8112
+ .brand-page__background-shapes-layer[data-v-322d4e23] {
8056
8113
  position: fixed;
8057
8114
  top: 0;
8058
8115
  left: 0;
@@ -8063,11 +8120,11 @@ body {
8063
8120
  transform: translate3d(0, 0, 0);
8064
8121
  contain: layout paint;
8065
8122
  }
8066
- .template-preview .brand-page__background-shapes-layer[data-v-1a7e8144],
8067
- .device-wrapper .brand-page__background-shapes-layer[data-v-1a7e8144] {
8123
+ .template-preview .brand-page__background-shapes-layer[data-v-322d4e23],
8124
+ .device-wrapper .brand-page__background-shapes-layer[data-v-322d4e23] {
8068
8125
  height: 100%;
8069
8126
  }
8070
- .brand-page__inner--default[data-v-1a7e8144] {
8127
+ .brand-page__inner--default[data-v-322d4e23] {
8071
8128
  position: relative;
8072
8129
  z-index: 10;
8073
8130
  display: -webkit-box;
@@ -8079,16 +8136,16 @@ body {
8079
8136
  -ms-flex-direction: column;
8080
8137
  flex-direction: column;
8081
8138
  }
8082
- .brand-page__inner--desktop[data-v-1a7e8144] {
8139
+ .brand-page__inner--desktop[data-v-322d4e23] {
8083
8140
  min-height: 100vh;
8084
8141
  }
8085
- .brand-site__header[data-v-1a7e8144] {
8142
+ .brand-site__header[data-v-322d4e23] {
8086
8143
  container-type: inline-size;
8087
8144
  }
8088
- .brand-page__header[data-v-1a7e8144] {
8145
+ .brand-page__header[data-v-322d4e23] {
8089
8146
  padding-top: var(--page-padding);
8090
8147
  }
8091
- .brand-page__content--default[data-v-1a7e8144] {
8148
+ .brand-page__content--default[data-v-322d4e23] {
8092
8149
  margin-left: auto;
8093
8150
  margin-right: auto;
8094
8151
  margin-bottom: 2.5rem;
@@ -8105,7 +8162,7 @@ body {
8105
8162
  flex-direction: column;
8106
8163
  max-width: var(--page-max-width);
8107
8164
  }
8108
- .brand-page__content--desktop[data-v-1a7e8144] {
8165
+ .brand-page__content--desktop[data-v-322d4e23] {
8109
8166
  margin-left: auto;
8110
8167
  margin-right: auto;
8111
8168
  display: -webkit-box;
@@ -8121,15 +8178,15 @@ body {
8121
8178
  flex-direction: column;
8122
8179
  max-width: 100%;
8123
8180
  }
8124
- .brand-page__content--inner[data-v-1a7e8144] {
8181
+ .brand-page__content--inner[data-v-322d4e23] {
8125
8182
  padding-left: var(--page-padding);
8126
8183
  padding-right: var(--page-padding);
8127
8184
  }
8128
- .brand-page__content--inner--brandsite[data-v-1a7e8144] {
8185
+ .brand-page__content--inner--brandsite[data-v-322d4e23] {
8129
8186
  max-width: var(--brandsite-max-width);
8130
8187
  margin: 0 auto;
8131
8188
  }
8132
- .brand-page__content--outline-selected[data-v-1a7e8144] {
8189
+ .brand-page__content--outline-selected[data-v-322d4e23] {
8133
8190
  position: relative;
8134
8191
  z-index: 10;
8135
8192
  outline-color: #F7768C;
@@ -8137,20 +8194,20 @@ body {
8137
8194
  outline-style: dashed;
8138
8195
  outline-offset: -0.25rem;
8139
8196
  }
8140
- .brand-page__content--outline-footer-selected[data-v-1a7e8144] {
8197
+ .brand-page__content--outline-footer-selected[data-v-322d4e23] {
8141
8198
  outline-color: #f7768c;
8142
8199
  outline-width: 0.2rem;
8143
8200
  outline-style: dashed;
8144
8201
  outline-offset: -0.25rem;
8145
8202
  }
8146
8203
  @media (max-width: 640px) {
8147
- .brand-page__content--inner--full-width[data-v-1a7e8144] {
8204
+ .brand-page__content--inner--full-width[data-v-322d4e23] {
8148
8205
  padding-left: 0;
8149
8206
  padding-right: 0;
8150
8207
  }
8151
8208
  }
8152
8209
  @media (min-width: 640px) {
8153
- .brand-page__content--inner--full-width[data-v-1a7e8144] {
8210
+ .brand-page__content--inner--full-width[data-v-322d4e23] {
8154
8211
  padding-left: var(--page-padding);
8155
8212
  padding-right: var(--page-padding);
8156
8213
  }
@@ -9743,7 +9800,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
9743
9800
  color: rgb(36 36 36 / var(--tw-text-opacity))
9744
9801
  }
9745
9802
 
9746
- .header-button-settings_option-title[data-v-9a1ee526] {
9803
+ .header-button-settings_option-title[data-v-3665786e] {
9747
9804
  font-family: Lato, Helvetica, sans-serif;
9748
9805
  font-size: 0.875rem;
9749
9806
  line-height: 1.25rem;
@@ -9791,7 +9848,7 @@ input.dynamic-width-input[data-v-97be2e87]:focus {
9791
9848
  margin: 0 auto;
9792
9849
  }
9793
9850
 
9794
- .header-settings-panel_option-title[data-v-8244a08c] {
9851
+ .header-settings-panel_option-title[data-v-2b849103] {
9795
9852
  font-family: Lato, Helvetica, sans-serif;
9796
9853
  font-size: 0.875rem;
9797
9854
  line-height: 1.25rem;