/* * Instant PDF Download -- Front-end Download PDF button styles * * Ships in phase IPD5 (ipd-v1.0-beta9). * * Scope: styles the visitor-facing "Download PDF" button in all * four variants (Logo Variant 48x48, Dark/Light 144x44, Light/Dark * 144x44, Yale Blue 144x44), all four interaction states (hover, * focus, active, disabled), and the placeholder-click success toast. * * PSD references: * IV.C.1 Button Edge Definition: two-layer ring (White 40% inner, * Black 40% outer) via box-shadow. * IV.C.1 Button Variant Colors: Dark/Light bg #0A1128, text #FEFCFB; * Light/Dark bg #FEFCFB, text #001F54; * Yale Blue bg #034078, text #FEFCFB. * IV.C.2 Interaction States: hover darker + lift + shadow, * focus outline, active down + darker, * disabled grayed + not-allowed. * IV.C.3 Sizing: text buttons 144x44, Logo Variant * 48x48, 8px corner radius. * IX.A Toast Pattern: bottom-right, ~4 second fade, * small X dismiss. */ /* ------------------------------------------------------------ * Wrapper * ------------------------------------------------------------ */ .ipd-fe-btn-wrap { margin: 16px 0; display: block; } /* ------------------------------------------------------------ * Shared base for all four button variants * ------------------------------------------------------------ */ .ipd-fe-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1.2; text-align: center; cursor: pointer; padding: 0 12px; box-sizing: border-box; box-shadow: 0 0 0 1px rgba( 254, 252, 251, 0.4 ), 0 0 0 2px rgba( 0, 0, 0, 0.4 ); transition: background-color 120ms ease, color 120ms ease, transform 80ms ease, box-shadow 120ms ease; user-select: none; } .ipd-fe-btn:focus { outline: 3px solid #034078; outline-offset: 2px; } .ipd-fe-btn:disabled, .ipd-fe-btn[disabled] { background-color: #a0a5aa !important; color: #FEFCFB !important; cursor: not-allowed; transform: none !important; box-shadow: 0 0 0 1px rgba( 254, 252, 251, 0.4 ), 0 0 0 2px rgba( 0, 0, 0, 0.4 ) !important; opacity: 0.75; } /* ------------------------------------------------------------ * Text variants (Dark/Light, Light/Dark, Yale Blue) -- 144x44 * ------------------------------------------------------------ */ .ipd-fe-btn--dark-light, .ipd-fe-btn--light-dark, .ipd-fe-btn--yale-blue { width: 144px; height: 44px; } .ipd-fe-btn--dark-light { background-color: #0A1128; color: #FEFCFB; } .ipd-fe-btn--dark-light:hover { background-color: #050912; color: #FEFCFB; transform: translateY( -1px ); box-shadow: 0 0 0 1px rgba( 254, 252, 251, 0.4 ), 0 0 0 2px rgba( 0, 0, 0, 0.4 ), 0 4px 8px rgba( 0, 0, 0, 0.25 ); } .ipd-fe-btn--dark-light:active { background-color: #02060f; color: #FEFCFB; transform: translateY( 1px ); box-shadow: 0 0 0 1px rgba( 254, 252, 251, 0.4 ), 0 0 0 2px rgba( 0, 0, 0, 0.4 ), 0 1px 2px rgba( 0, 0, 0, 0.20 ); } .ipd-fe-btn--light-dark { background-color: #FEFCFB; color: #001F54; } .ipd-fe-btn--light-dark:hover { background-color: #EDEBEA; color: #001F54; transform: translateY( -1px ); box-shadow: 0 0 0 1px rgba( 254, 252, 251, 0.4 ), 0 0 0 2px rgba( 0, 0, 0, 0.4 ), 0 4px 8px rgba( 0, 0, 0, 0.20 ); } .ipd-fe-btn--light-dark:active { background-color: #D9D6D3; color: #001F54; transform: translateY( 1px ); box-shadow: 0 0 0 1px rgba( 254, 252, 251, 0.4 ), 0 0 0 2px rgba( 0, 0, 0, 0.4 ), 0 1px 2px rgba( 0, 0, 0, 0.15 ); } .ipd-fe-btn--yale-blue { background-color: #034078; color: #FEFCFB; } .ipd-fe-btn--yale-blue:hover { background-color: #023057; color: #FEFCFB; transform: translateY( -1px ); box-shadow: 0 0 0 1px rgba( 254, 252, 251, 0.4 ), 0 0 0 2px rgba( 0, 0, 0, 0.4 ), 0 4px 8px rgba( 0, 0, 0, 0.25 ); } .ipd-fe-btn--yale-blue:active { background-color: #01223d; color: #FEFCFB; transform: translateY( 1px ); box-shadow: 0 0 0 1px rgba( 254, 252, 251, 0.4 ), 0 0 0 2px rgba( 0, 0, 0, 0.4 ), 0 1px 2px rgba( 0, 0, 0, 0.20 ); } /* ------------------------------------------------------------ * Logo Variant -- 48x48 with the bundled logo image inside * ------------------------------------------------------------ */ .ipd-fe-btn--logo-variant { width: 48px; height: 48px; padding: 0; background-color: transparent; color: transparent; font-size: 0; overflow: hidden; } .ipd-fe-btn--logo-variant:hover { transform: translateY( -1px ); box-shadow: 0 0 0 1px rgba( 254, 252, 251, 0.4 ), 0 0 0 2px rgba( 0, 0, 0, 0.4 ), 0 4px 8px rgba( 0, 0, 0, 0.25 ); } .ipd-fe-btn--logo-variant:active { transform: translateY( 1px ); box-shadow: 0 0 0 1px rgba( 254, 252, 251, 0.4 ), 0 0 0 2px rgba( 0, 0, 0, 0.4 ), 0 1px 2px rgba( 0, 0, 0, 0.20 ); } .ipd-fe-btn-logo-img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 6px; pointer-events: none; } /* ------------------------------------------------------------ * Placeholder-click toast (PSD IX.A pattern, bottom-right) * ------------------------------------------------------------ */ .ipd-fe-toast { position: fixed; right: 24px; bottom: 24px; z-index: 100000; display: flex; align-items: center; gap: 12px; min-width: 240px; max-width: 420px; padding: 12px 16px; border-radius: 4px; color: #FEFCFB; font-family: inherit; font-size: 14px; line-height: 1.4; box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.25 ); opacity: 1; transition: opacity 250ms ease, transform 250ms ease; background-color: #46B450; } .ipd-fe-toast.is-dismissed { opacity: 0; transform: translateY( 8px ); pointer-events: none; } .ipd-fe-toast__text { flex: 1 1 auto; } .ipd-fe-toast__close { flex: 0 0 auto; background: transparent; border: 0; color: #FEFCFB; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; } .ipd-fe-toast__close:hover, .ipd-fe-toast__close:focus { color: #FEFCFB; opacity: 0.85; outline: none; }