.bkbg-prk-wrap { width: 100%; box-sizing: border-box; } .bkbg-prk-inner { margin: 0 auto; box-sizing: border-box; } .bkbg-prk-header { text-align: center; margin-bottom: 48px; } .bkbg-prk-eyebrow { font-family: var(--bkbg-prk-ey-font-family, inherit); font-size: var(--bkbg-prk-ey-font-size-d, 13px); font-weight: var(--bkbg-prk-ey-font-weight, 600); font-style: var(--bkbg-prk-ey-font-style, normal); text-decoration: var(--bkbg-prk-ey-text-decoration, none); text-transform: var(--bkbg-prk-ey-text-transform, uppercase); line-height: var(--bkbg-prk-ey-line-height-d, normal); letter-spacing: var(--bkbg-prk-ey-letter-spacing-d, 0.1em); word-spacing: var(--bkbg-prk-ey-word-spacing-d, normal); margin: 0 0 8px; } .bkbg-prk-heading { margin: 0 0 14px; } .bkbg-prk-header .bkbg-prk-heading { font-family: var(--bkbg-prk-h-font-family, inherit); font-size: var(--bkbg-prk-h-font-size-d, 34px); font-weight: var(--bkbg-prk-h-font-weight, 700); font-style: var(--bkbg-prk-h-font-style, normal); text-decoration: var(--bkbg-prk-h-text-decoration, none); text-transform: var(--bkbg-prk-h-text-transform, none); line-height: var(--bkbg-prk-h-line-height-d, 1.2); letter-spacing: var(--bkbg-prk-h-letter-spacing-d, normal); word-spacing: var(--bkbg-prk-h-word-spacing-d, normal); } .bkbg-prk-sub { font-family: var(--bkbg-prk-st-font-family, inherit); font-size: var(--bkbg-prk-st-font-size-d, 18px); font-weight: var(--bkbg-prk-st-font-weight, 400); font-style: var(--bkbg-prk-st-font-style, normal); text-decoration: var(--bkbg-prk-st-text-decoration, none); text-transform: var(--bkbg-prk-st-text-transform, none); line-height: var(--bkbg-prk-st-line-height-d, 1.6); letter-spacing: var(--bkbg-prk-st-letter-spacing-d, normal); word-spacing: var(--bkbg-prk-st-word-spacing-d, normal); max-width: 620px; margin: 0 auto; } .bkbg-prk-blurb-box { border-radius: 14px; padding: 28px; margin-bottom: 36px; border-width: 1px; border-style: solid; box-sizing: border-box; } .bkbg-prk-blurb-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; } .bkbg-prk-blurb-text { font-family: var(--bkbg-prk-bd-font-family, inherit); font-size: var(--bkbg-prk-bd-font-size-d, 15px); font-weight: var(--bkbg-prk-bd-font-weight, 400); font-style: var(--bkbg-prk-bd-font-style, normal); text-decoration: var(--bkbg-prk-bd-text-decoration, none); text-transform: var(--bkbg-prk-bd-text-transform, none); line-height: var(--bkbg-prk-bd-line-height-d, 1.7); letter-spacing: var(--bkbg-prk-bd-letter-spacing-d, normal); word-spacing: var(--bkbg-prk-bd-word-spacing-d, normal); margin: 0; } .bkbg-prk-assets-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 36px; } @media (max-width: 640px) { .bkbg-prk-assets-grid { grid-template-columns: 1fr; } } .bkbg-prk-asset-card { border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 16px; border-width: 1px; border-style: solid; box-sizing: border-box; transition: box-shadow 0.2s; } .bkbg-prk-asset-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); } .bkbg-prk-asset-icon { font-size: 40px; flex-shrink: 0; } .bkbg-prk-asset-info { flex: 1; min-width: 0; } .bkbg-prk-asset-label { font-family: var(--bkbg-prk-al-font-family, inherit); font-size: var(--bkbg-prk-al-font-size-d, 15px); font-weight: var(--bkbg-prk-al-font-weight, 700); font-style: var(--bkbg-prk-al-font-style, normal); text-decoration: var(--bkbg-prk-al-text-decoration, none); text-transform: var(--bkbg-prk-al-text-transform, none); line-height: var(--bkbg-prk-al-line-height-d, normal); letter-spacing: var(--bkbg-prk-al-letter-spacing-d, normal); word-spacing: var(--bkbg-prk-al-word-spacing-d, normal); margin-bottom: 3px; } .bkbg-prk-asset-desc { font-family: var(--bkbg-prk-ad-font-family, inherit); font-size: var(--bkbg-prk-ad-font-size-d, 13px); font-weight: var(--bkbg-prk-ad-font-weight, 400); font-style: var(--bkbg-prk-ad-font-style, normal); text-decoration: var(--bkbg-prk-ad-text-decoration, none); text-transform: var(--bkbg-prk-ad-text-transform, none); line-height: var(--bkbg-prk-ad-line-height-d, normal); letter-spacing: var(--bkbg-prk-ad-letter-spacing-d, normal); word-spacing: var(--bkbg-prk-ad-word-spacing-d, normal); } .bkbg-prk-asset-dl { border-radius: 6px; padding: 7px 16px; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; flex-shrink: 0; transition: opacity 0.2s; } .bkbg-prk-asset-dl:hover { opacity: 0.85; } .bkbg-prk-colors-section { margin-bottom: 36px; } .bkbg-prk-colors-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; } .bkbg-prk-colors-row { display: flex; gap: 14px; flex-wrap: wrap; } .bkbg-prk-color-swatch { text-align: center; } .bkbg-prk-color-chip { width: 72px; height: 72px; border-radius: 12px; margin-bottom: 6px; border: 1px solid rgba(0,0,0,0.1); } .bkbg-prk-color-name { font-size: 12px; font-weight: 600; } .bkbg-prk-color-hex { font-size: 11px; font-family: monospace; } .bkbg-prk-footer { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px; } .bkbg-prk-dl-all { display: inline-block; padding: 13px 30px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; transition: opacity 0.2s; } .bkbg-prk-dl-all:hover { opacity: 0.9; } .bkbg-prk-contact-link { display: inline-block; padding: 13px 30px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; border-width: 2px; border-style: solid; transition: opacity 0.2s; } .bkbg-prk-contact-link:hover { opacity: 0.8; } @media (max-width: 1024px) { .bkbg-prk-header .bkbg-prk-heading { font-size: var(--bkbg-prk-h-font-size-t, 34px); line-height: var(--bkbg-prk-h-line-height-t, 1.2); letter-spacing: var(--bkbg-prk-h-letter-spacing-t, normal); word-spacing: var(--bkbg-prk-h-word-spacing-t, normal); } .bkbg-prk-eyebrow { font-size: var(--bkbg-prk-ey-font-size-t, 13px); line-height: var(--bkbg-prk-ey-line-height-t, normal); letter-spacing: var(--bkbg-prk-ey-letter-spacing-t, 0.1em); word-spacing: var(--bkbg-prk-ey-word-spacing-t, normal); } .bkbg-prk-sub { font-size: var(--bkbg-prk-st-font-size-t, 18px); line-height: var(--bkbg-prk-st-line-height-t, 1.6); letter-spacing: var(--bkbg-prk-st-letter-spacing-t, normal); word-spacing: var(--bkbg-prk-st-word-spacing-t, normal); } .bkbg-prk-blurb-text { font-size: var(--bkbg-prk-bd-font-size-t, 15px); line-height: var(--bkbg-prk-bd-line-height-t, 1.7); letter-spacing: var(--bkbg-prk-bd-letter-spacing-t, normal); word-spacing: var(--bkbg-prk-bd-word-spacing-t, normal); } .bkbg-prk-asset-label { font-size: var(--bkbg-prk-al-font-size-t, 15px); line-height: var(--bkbg-prk-al-line-height-t, normal); letter-spacing: var(--bkbg-prk-al-letter-spacing-t, normal); word-spacing: var(--bkbg-prk-al-word-spacing-t, normal); } .bkbg-prk-asset-desc { font-size: var(--bkbg-prk-ad-font-size-t, 13px); line-height: var(--bkbg-prk-ad-line-height-t, normal); letter-spacing: var(--bkbg-prk-ad-letter-spacing-t, normal); word-spacing: var(--bkbg-prk-ad-word-spacing-t, normal); } } @media (max-width: 767px) { .bkbg-prk-header .bkbg-prk-heading { font-size: var(--bkbg-prk-h-font-size-m, 34px); line-height: var(--bkbg-prk-h-line-height-m, 1.2); letter-spacing: var(--bkbg-prk-h-letter-spacing-m, normal); word-spacing: var(--bkbg-prk-h-word-spacing-m, normal); } .bkbg-prk-eyebrow { font-size: var(--bkbg-prk-ey-font-size-m, 13px); line-height: var(--bkbg-prk-ey-line-height-m, normal); letter-spacing: var(--bkbg-prk-ey-letter-spacing-m, 0.1em); word-spacing: var(--bkbg-prk-ey-word-spacing-m, normal); } .bkbg-prk-sub { font-size: var(--bkbg-prk-st-font-size-m, 18px); line-height: var(--bkbg-prk-st-line-height-m, 1.6); letter-spacing: var(--bkbg-prk-st-letter-spacing-m, normal); word-spacing: var(--bkbg-prk-st-word-spacing-m, normal); } .bkbg-prk-blurb-text { font-size: var(--bkbg-prk-bd-font-size-m, 15px); line-height: var(--bkbg-prk-bd-line-height-m, 1.7); letter-spacing: var(--bkbg-prk-bd-letter-spacing-m, normal); word-spacing: var(--bkbg-prk-bd-word-spacing-m, normal); } .bkbg-prk-asset-label { font-size: var(--bkbg-prk-al-font-size-m, 15px); line-height: var(--bkbg-prk-al-line-height-m, normal); letter-spacing: var(--bkbg-prk-al-letter-spacing-m, normal); word-spacing: var(--bkbg-prk-al-word-spacing-m, normal); } .bkbg-prk-asset-desc { font-size: var(--bkbg-prk-ad-font-size-m, 13px); line-height: var(--bkbg-prk-ad-line-height-m, normal); letter-spacing: var(--bkbg-prk-ad-letter-spacing-m, normal); word-spacing: var(--bkbg-prk-ad-word-spacing-m, normal); } }