Sync styleguide 2026.05.18.1

docs/styleguide/styles/01-foundations.css

@@ -172,6 +172,8 @@
   --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width);
   --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height);
   --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint);
+  --layout-content-card-margin-top-desktop: var(--dimension-content-card-margin-top-desktop);
+  --layout-content-card-margin-top-mobile: var(--dimension-content-card-margin-top-mobile);
   --dimension-notifications-card-min-width: 445px;
   --layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
   --layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
@@ -273,6 +275,8 @@
   --dimension-object-card-mobile-width: 100%;
   --dimension-object-card-mobile-height: auto;
   --dimension-object-card-desktop-breakpoint: 768px;
+  --dimension-content-card-margin-top-desktop: 100px;
+  --dimension-content-card-margin-top-mobile: 1rem;
   --dimension-object-group-card-min-width: 450px;
   --dimension-object-group-card-max-width: 650px;
   --dimension-object-group-card-height: 700px;

docs/styleguide/styles/20-patterns-portal-header.css

@@ -20,6 +20,18 @@
   background: var(--surface-portal-header);
 }
 
+.sg-portal-header--auth-segment {
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-small);
+}
+
+.sg-portal-header--auth-segment .sg-portal-header__auth-row {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
 .sg-portal-header__main {
   display: grid;
   flex: 1 1 auto;
@@ -49,6 +61,10 @@
   justify-self: end;
 }
 
+.sg-portal-header--auth-segment .sg-portal-header__main {
+  width: 100%;
+}
+
 .sg-portal-header-pattern-variant {
   margin-bottom: var(--spacing-large);
 }

docs/styleguide/styles/22-patterns-object-card.css

@@ -70,3 +70,25 @@
 .sg-object-card--variable-height {
   height: auto;
 }
+
+.sg-object-card--content-basic {
+  width: min(70vw, var(--layout-object-card-max-width));
+  margin-inline: auto;
+  height: auto;
+}
+
+.sg-object-card-content-basic {
+  margin-top: var(--layout-content-card-margin-top-desktop);
+}
+
+@media (max-width: 767px) {
+  .sg-object-card--content-basic {
+    width: var(--layout-object-card-mobile-width);
+    min-width: 0;
+    max-width: none;
+  }
+
+  .sg-object-card-content-basic {
+    margin-top: var(--layout-content-card-margin-top-mobile);
+  }
+}

docs/styleguide/styles/30-layouts-card-list-page.css

@@ -60,7 +60,7 @@
 }
 
 .sg-card-list-page > .sg-options-row {
-  margin-top: var(--spacing-large);
+  margin-top: var(--layout-options-row-margin-top);
 }
 
 .sg-card-list-page > .sg-card-list-page__intro-block {
@@ -71,6 +71,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-large);
+  padding-bottom: calc(var(--spacing-large) - 0.25rem);
 }
 
 .sg-card-list-page__title-row {
@@ -183,4 +184,3 @@
   margin: 0;
   color: var(--text-vsf-drawer-object-card-body);
 }
-

docs/styleguide/styles/36-layouts-page-layout-app.css

@@ -0,0 +1,8 @@
+/* ========================================================= */
+/* Layouts: Page Layout App                                  */
+/* ========================================================= */
+
+.sg-page-layout-app__heading-block {
+  margin-top: var(--spacing-large);
+  margin-bottom: var(--spacing-large);
+}