/* Disney+ Perks Brand Stylesheet created by jeffculbertson 8/11/26 This stylesheet should be loaded after the base support site stylesheet(s) Brand tokens start after global SLDS CSS fixes */ /* 1. Define Brand Tokens Initial tokens defined for desktop, smaller breakpoint values follow. Not using nested media queries for widest compatibility. */ /* Desktop */ :root { /* Base color and font definitions */ --brand-color-background: #FFFFFF; --brand-color-foreground: #0B0C0F; --brand-color-primary: #056D84; --brand-color-secondary: #F3F8FB; --brand-color-accent: #7AE4FF; --brand-color-text-link: #0B7AAD; --brand-color-text-hover: #054553; --brand-ui-color-panel: #F6F7F8; --brand-ui-color-text: #636E85; --brand-ui-color-border: #D9DCE2; --brand-ui-form-background-color: #F0F2F6; --brand-ui-form-border-color: #C5CAD3; --brand-color-error: #E55805; --brand-font-family-heading: 'Inspire', sans-serif; --brand-font-family-body: 'Inspire', sans-serif; /* Button variables */ --help-button-font-family: var(--brand-font-family-body); --help-button-font-size: 1rem; --help-button-font-style: normal; --help-button-font-weight: 400; --help-button-font-transform: none; --help-button-font-line-height: 44px; --help-button-padding: 0 1rem; --help-button-font-color: var(--brand-color-background); --help-button-font-color-hover: var(--brand-color-background); --help-button-font-color-disabled: #A4CCEF; --help-button-background-color: var(--brand-color-primary); --help-button-background-color-hover: var(--brand-color-text-hover); --help-button-background-color-disabled: #70AEE6; --help-button-border-color: var(--brand-color-primary); --help-button-border-color-hover: var(--brand-color-text-hover); --help-button-border-color-disabled: #70AEE6; --help-button-border-width: 2px; --help-button-border-radius: 4px; --help-button-spacing-block-start: 0; --help-button-spacing-inline-end: 1rem; --help-button-spacing-block-end: 0; --help-button-spacing-inline-start: 1rem; /* Help Feedback component variables */ --help-feedback-container-background: var(--brand-color-primary); --help-feedback-container-height: 224px; --help-feedback-container-offset: -10rem; --help-feedback-container-width: 1085px; --help-feedback-form-width: 800px; --help-feedback-form-background-color: var(--brand-color-background); --help-feedback-form-border: none; --help-feedback-form-border-radius: 4px; --help-feedback-form-shadow: 0rem 1rem 1rem -0.4rem rgba(4, 4, 5, .3); --help-feedback-form-padding: 54px; --help-feedback-form-title-alignment: center; --help-feedback-form-title-padding-bottom: 2.5rem; --help-feedback-form-title-font-family: var(--brand-font-family-heading); --help-feedback-form-title-font-size: 2rem; --help-feedback-form-title-font-style: normal; --help-feedback-form-title-font-weight: 700; --help-feedback-form-title-font-transform: none; --help-feedback-form-title-font-color: var(--brand-color-foreground); --help-feedback-form-title-font-line-height: 38px; --help-feedback-form-description-alignment: start; --help-feedback-form-description-padding-bottom: 2rem; --help-feedback-form-description-font-family: var(--brand-font-family-body); --help-feedback-form-description-font-size: 1rem; --help-feedback-form-description-font-style: normal; --help-feedback-form-description-font-weight: 400; --help-feedback-form-description-font-transform: none; --help-feedback-form-description-font-color: var(--brand-color-foreground); --help-feedback-form-description-font-line-height: 1.5rem; --help-feedback-questions-gap: 1rem; --help-feedback-form-question-padding: 0 4.5rem; --help-feedback-form-submit-padding-top: 3rem; --help-feedback-form-submit-width: 386px; --help-feedback-form-question-label-padding-bottom: .5rem; --help-feedback-form-question-label-font-family: var(--brand-font-family-body); --help-feedback-form-question-label-font-size: .875rem; --help-feedback-form-question-label-font-style: normal; --help-feedback-form-question-label-font-weight: 400; --help-feedback-form-question-label-font-transform: none; --help-feedback-form-question-label-font-line-height: 16px; --help-feedback-form-question-label-font-color: var(--brand-color-foreground); --help-feedback-form-question-input-background-color: var(--brand-ui-form-background-color); --help-feedback-form-question-input-background-color-focus: var(--brand-ui-form-background-color); --help-feedback-form-question-input-border-color: transparent; --help-feedback-form-question-input-border-color-focus: var(--brand-color-text-link); --help-feedback-form-question-input-border-width: 1px; --help-feedback-form-question-input-border-radius: 4px; --help-feedback-form-question-input-padding-top: .5rem; --help-feedback-form-question-input-padding-end: 1rem; --help-feedback-form-question-input-padding-bottom: .5rem; --help-feedback-form-question-input-padding-start: 1rem; --help-feedback-form-question-input-font-family: var(--brand-font-family-body); --help-feedback-form-question-input-font-size: 1rem; --help-feedback-form-question-input-font-weight: 400; --help-feedback-form-question-input-font-style: normal; --help-feedback-form-question-input-font-transform: none; --help-feedback-form-question-input-font-line-height: 26px; --help-feedback-form-question-input-font-color: var(--brand-color-foreground); --help-feedback-form-question-input-shadow: none; --help-feedback-form-question-input-shadow-focus: none; --help-feedback-form-question-input-background-color-error: var(--brand-ui-form-background-color); --help-feedback-form-question-input-border-color-error: var(--brand-color-error); --help-feedback-form-question-input-shadow-error: 0 0 0 1px var(--brand-color-error); --help-feedback-form-question-error-font-color: var(--brand-color-error); --help-feedback-form-question-helper-font-size: .75rem; --help-feedback-form-question-helper-font-style: normal; --help-feedback-form-question-helper-font-weight: 400; --help-feedback-form-question-helper-font-transform: none; --help-feedback-form-question-helper-font-line-height: 1.5; --help-feedback-form-question-helper-font-color: var(--brand-ui-color-text); --help-feedback-form-question-helper-alignment: start; --help-feedback-form-file-attachment-gap: .75rem; --help-feedback-form-file-attachment-padding: .75rem; --help-feedback-form-file-attachment-background-color: var(--brand-color-background); --help-feedback-form-file-attachment-border: 1px solid var(--brand-ui-form-border-color); --help-feedback-form-file-attachment-border-radius: 4px; --help-feedback-form-file-attachment-font-size: .875rem; --help-feedback-form-file-attachment-font-line-height: 1.5; --help-feedback-form-file-attachment-font-color: var(--brand-color-foreground); --help-feedback-form-file-details-font-size: .675rem; --help-feedback-form-file-details-font-line-height: 1.25; --help-feedback-form-file-details-font-color: var(--brand-ui-color-text); } /* Tablet (1024) */ @media (width <= 64em) { :root { } } /* Mobile Landscape/Large Format (768) */ @media (width < 48em) { :root { --help-feedback-container-offset: -5rem; --help-feedback-form-question-padding: 0; } } /* Mobile Portrait/Small Format (480) */ @media (width < 30em) { :root { } } /* 2. [BRAND]-specific overrides */ .help-feedback-input .slds-has-error .slds-input, .help-feedback-input .slds-has-error .slds-textarea { background-color: var(--slds-z-input-error-background-color, var(--dxp-g-root)); border-color: var(--slds-z-input-error-border-color, var(--dxp-g-destructive)); box-shadow: var(--slds-z-input-error-shadow, var(--dxp-g-destructive) 0 0 0 1px inset); } .file-attachment-container .slds-form-element__label { --dxp-s-form-element-label-font-family: var(--help-feedback-form-question-label-font-family); --dxp-s-form-element-label-color: var(--help-feedback-form-question-label-font-color); --dxp-s-form-element-label-font-size: var(--help-feedback-form-question-label-font-size); --dxp-s-form-element-label-font-weight: var(--help-feedback-form-question-label-font-weight); --dxp-s-form-element-label-font-style: var(--help-feedback-form-question-label-font-style); --dxp-s-form-element-label-text-transform: var(--help-feedback-form-question-label-font-transform); --dxp-s-form-element-label-line-height: var(--help-feedback-form-question-label-font-line-height); --slds-z-form-element-label-margin-bottom: var(--help-feedback-form-question-label-padding-bottom); } input.help-brands-file-input { width: 100%; background-color: var(--brand-color-background); border: 1px dashed var(--brand-color-foreground); border-radius: var(--help-feedback-form-question-input-border-radius); font-size: 0; padding: 1rem; cursor: pointer; } input.help-brands-file-input::file-selector-button { display: none; } input.help-brands-file-input::after { content: attr(data-file-link); font-family: var(--brand-font-family-body); font-size: 1rem; font-weight: 400; line-height: var(--help-feedback-form-question-input-font-line-height); color: var(--brand-color-text-link); text-align: center; display: block; } .help-brands-file-attachment { --slds-c-icon-color-foreground-default: var(--brand-color-foreground); } .attachment-delete-button .slds-button_icon { --dxp-g-neutral-3: var(--brand-color-foreground); } c-help_feedback-form .plus-brands-feedback-wrap { margin-top: var(--help-feedback-container-offset, -10rem) !important; }