/* ================================================== Auxiliary pages (apply + FAQ) @related colors ================================================== */ :root { --deel-iframe-offset-x: 24px; --deel-iframe-min-height: 1960px; /* includes error height when using same email twice */ /* todo: adjust for mobile etc */ /* clip while the cover is up: embed reserves ~2000px before it has a form to show */ --deel-iframe-loading-height: 420px; --apply-spinner-duration: 800ms; } .apply-page { min-height: 100vh; background-color: var(--cream-warm); background-image: url("../../images/deel-flagwave.gif"); /* @match flagwave_tile_size - flagwave tile width, same on both breakpoints */ background-size: 560px auto; background-repeat: repeat; } @media ( prefers-reduced-motion: reduce ) { .apply-page { background-image: url("../../images/deel-flagwave-still.png"); } } .is-motion-paused .apply-page { background-image: url("../../images/deel-flagwave-still.png"); } /* clips scoop overhang; `clip` not `hidden` (no scroll container), and not on (overflow propagates to the viewport) */ .apply { overflow-x: clip; padding-block: 32px 48px; } .apply__stage { position: relative; max-width: 847px; margin-inline: auto; } /* display: block here, not via the .has-ice-cream gate: always shown, and the application peek must match regardless of the landing toggle */ .apply__stage .ice-cream-layer { position: absolute; left: 0; display: block; width: 100%; transform: none; } .apply__stage .ice-cream__image { top: 0; left: 0; width: 100%; height: 100%; } /* no z-index on purpose: a stacking context here would trap .apply__form's raise over the scoop layer */ .apply__card { position: relative; padding-inline: 16px; overflow: hidden; border-radius: 16px; background-color: var(--deel-purple); /* temp: deel.com dark for spacing measurement and seamlessness checking purposes */ /* background-color: #121212; */ color: var(--cream-warm); } .apply__inner { max-width: 600px; margin-inline: auto; } .apply__header { padding: 28px 0 0; } .apply__eyebrow { margin-bottom: 21px; font-size: 15px; font-weight: var(--font-weight-bold); text-transform: uppercase; } .apply__title { font-size: 28px; font-weight: var(--font-weight-bold); line-height: 1.1; } .apply__desc { max-width: 520px; margin-top: 9px; font-size: 12px; font-weight: 500; line-height: 1.2; } .apply__divider { height: 1px; margin: 44px 0 0; border: 0; background-color: #FAF1DE; } /* over the scoop layer on both breakpoints (desktop value is the higher); holds only while .apply__card has no z-index */ .apply__form { position: relative; z-index: calc(var(--z-ice-cream) + 1); padding: 8px 0 16px; margin-top: 3px; } /* cross-origin iframe can't self-size: min-height is a guess until .is-sized */ .apply__iframe { display: block; width: calc(100% + (2 * var(--deel-iframe-offset-x, 0px))); min-height: var(--deel-iframe-min-height); margin-left: calc(-1 * var(--deel-iframe-offset-x, 0px)); margin-right: calc(-1 * var(--deel-iframe-offset-x, 0px)); border: 0; border-radius: 10px; } /* guess above dropped, not kept as a floor: form must shrink back when an error clears or a field hides */ /* @match apply_iframe_height - iframe height custom property, set in JS and read by the sized iframe rule */ .apply__iframe.is-sized { height: var(--deel-iframe-height); min-height: 0; } /* ------------------------------------- =Loading cover Covers the embed's near-black theme flash until its first height report. A cover, not display/visibility/opacity on the iframe: those let the browser throttle a cross-origin frame's rendering, stalling the very rAF-sent message being waited on. ------------------------------------- */ /* clip on the wrapper so the cover is its sibling, not its child: the card centers on a half pixel, and a cover clipped by the same boundary leaves a hairline of the embed's dark theme down both sides */ .apply__form.is-loading .apply__frame { height: var(--deel-iframe-loading-height); overflow: hidden; } /* bled past the clip so its antialiased edge falls under the cover */ .apply__loading { position: absolute; inset: -2px; z-index: 1; display: none; align-items: center; justify-content: center; background-color: var(--deel-purple); } .apply__form.is-loading .apply__loading { display: flex; } .apply__loading-mark { width: 34px; height: 34px; border: 3px solid rgba(250, 241, 222, 0.3); border-top-color: var(--cream-warm); border-radius: 50%; animation: apply-loading-spin var(--apply-spinner-duration) linear infinite; } @keyframes apply-loading-spin { to { transform: rotate(360deg); } } .apply__loading-text { position: absolute; clip-path: inset(50%); color: var(--cream-warm); font-size: 13px; } @media ( prefers-reduced-motion: reduce ) { .apply__loading-mark { display: none; } .apply__loading-text { position: static; clip-path: none; } } .is-motion-paused .apply__loading-mark { display: none; } .is-motion-paused .apply__loading-text { position: static; clip-path: none; } /* visibility, not display: iframe is ~2000px tall, removing it collapses two screens of page */ /* disabled pending feedback */ /* .apply__form.is-submitted .apply__iframe { visibility: hidden; } */ .apply__legal { padding: 8px 0 24px; font-size: 12px; font-weight: var(--font-weight-medium); line-height: 1.5; } .apply__legal p + p { margin-top: 12px; } .apply__legal a { text-decoration: underline; } .apply__legal a:hover { color: var(--deel-purple-light); } .apply__legal a:focus-visible { outline-color: var(--cream-warm); } .apply__back { display: block; margin: 4px 0 30px; color: var(--cream-warm); font-size: 13px; text-align: center; text-decoration: underline; } .apply__back:hover { color: var(--deel-purple-light); } .apply__back:focus-visible { outline-color: var(--cream-warm); } /* ------------------------------------- =Mobile ------------------------------------- */ @media ( max-width: 720px ) { :root { --deel-iframe-offset-x: 16px; } .apply { padding-block: 15px 48px; } .apply__stage { margin-inline: 18px; } .apply__card { padding-inline: 0; overflow: visible; border-radius: 0; background-color: transparent; } .apply__header, .apply__form, .apply__back { background-color: var(--deel-purple); } .apply__header { padding: 19px 16px 15px; border-radius: 16px; } .apply__eyebrow { margin-bottom: 3px; font-size: 9px; } .apply__title { font-size: 25px; } .apply__title:first-child { margin-top: -5px; } .apply__desc { margin-top: 9px; font-size: 9px; } .apply__divider { display: none; } /* @match card_mobile_split (partial) - the mobile frame's second card: purple fill and 16px top radius on the block between the header card and the back link */ .apply__form { padding: 16px 16px 0; margin-top: 20px; border-radius: 16px 16px 0 0; } /* no bleed: the frame sits inside the form's padding, and the cover has to follow the form's rounded top */ .apply__loading { inset: 0; border-radius: inherit; } .apply__legal { padding: 16px 16px 24px; background-color: var(--deel-purple); } .apply__back { padding: 4px 16px 30px; margin: 0; border-radius: 0 0 16px 16px; } .apply__stage .ice-cream--green { top: -153px; left: 211px; width: 193px; height: 193px; } .apply__stage .ice-cream--pink { top: 362px; left: -66px; width: 193px; height: 193px; } } @media ( min-width: 721px ) { .apply { padding-block: 79px 64px; } /* shared container caps at the landing mobile column; this page outgrows it at its own breakpoint */ .apply .container { max-width: var(--container-w); padding-inline: var(--gutter-page); } .apply__header { padding-top: 92px; } .apply__title { font-size: 40px; } /* fit-content so the focus ring hugs the word, not a 481px box; the padding comes back out of the margin */ .apply__back { width: fit-content; padding: 4px 10px; margin: 4px auto 36px; border-radius: 999px; /* shape for the focus ring only */ } } @media ( min-width: 721px ) { .apply__stage .ice-cream--green { top: 118px; left: -290px; width: 400px; height: 400px; /* @match scoop_hit_trim (partial) - scoop artwork bounds, restated against each page's own framing of the same GIFs */ --scoop-top: 11.200%; --scoop-right: 8.400%; --scoop-bottom: 4.400%; --scoop-left: 12.600%; } .apply__stage .ice-cream--pink { top: 492px; left: 780px; width: 400px; height: 400px; /* @match scoop_hit_trim (partial) - scoop artwork bounds, restated against each page's own framing of the same GIFs */ --scoop-top: 12.800%; --scoop-right: 8.800%; --scoop-bottom: 10.800%; --scoop-left: 5.200%; } } /* ================================================== =Application received ================================================== */ .apply-success { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background-color: rgba(0, 0, 0, 0.5); } /* base display beats the [hidden] UA style */ .apply-success[hidden] { display: none; } /* takes focus for announcement; nothing to act on, and it is the scrim too */ .apply-success:focus, .apply-success:focus-visible { outline: none; } .apply-success__dialog { position: relative; width: 100%; max-width: 440px; padding: 32px 32px 40px; border-radius: 16px; background-color: var(--cream-warm); color: var(--deel-purple); text-align: center; } .apply-success__close { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background-color: transparent; color: var(--deel-purple); cursor: pointer; } .apply-success__close:hover { background-color: var(--deel-purple-light); } .apply-success__close-icon { display: block; width: 15px; height: 15px; } .apply-success__scoop { display: block; width: auto; height: 200px; margin: 0 auto; } .apply-success__title { font-size: 28px; font-weight: var(--font-weight-bold); line-height: 1.1; } .apply-success__desc { margin-top: 10px; font-size: 13px; font-weight: var(--font-weight-medium); line-height: 1.4; } .apply-success__link { display: inline-block; padding: 11px 26px; margin-top: 24px; border-radius: 999px; background-color: var(--deel-purple); color: var(--cream-warm); font-size: 13px; font-weight: var(--font-weight-bold); } .apply-success__link:hover { opacity: 0.85; } .apply-success__close:focus-visible, .apply-success__link:focus-visible { outline-color: var(--deel-purple); } @media ( max-width: 720px ) { .apply-success__dialog { padding: 28px 24px 32px; } .apply-success__scoop { height: 160px; } .apply-success__title { font-size: 25px; } }