/*
* What career.html's two highlight bands share: the leaf, the column of words
* and the panel's turning cards.
*
* Read from cp-all-designer css/career.css:2666-2775, 2882-2905, 3187-3260,
* 3462-3554, 3734-3772.
*
* Colour, type, padding and the measures arrive from the Style tab and are not
* repeated here. Each widget's root is `.custom-`, so the rules are
* written against the attribute the band carries and the part names each
* widget shares.
*/
[data-custom-career-highlight] {
--custom-career-highlight-leaf-light: #E8ECF4;
--custom-career-highlight-leaf-deep: #CCD5E6;
--custom-career-highlight-tint: rgba(206, 41, 41, 0.1);
isolation: isolate;
}
/* career.css:2695-2717, 3222-3251 — the brand's single leaf, laid faintly behind
the band and turned a sixth of a turn; the stylesheet draws it */
[data-custom-career-highlight][data-custom-career-leaf]::before {
content: "";
position: absolute;
z-index: 0;
width: var(--custom-career-highlight-leaf-w, 376px);
aspect-ratio: 18.545 / 18.546;
pointer-events: none;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='17.494 19.565 18.545 18.546'%3E%3Cpath transform='translate(-168.211 -171.102)' d='M203.2,209.213l.916-5.83a6.785,6.785,0,0,0-.072-3c-.709-2.523-3.105-3.239-5.423-3.49a26.479,26.479,0,0,1-6.333-1.142,12.127,12.127,0,0,1-1.577-.7A5.378,5.378,0,0,1,188,192.236c-.1-.31-.389-1.264-.212-1.569,0,0-4.58,7.892-.158,12.541C192.19,208,201.915,202.282,203.2,209.213Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='17.494 19.565 18.545 18.546'%3E%3Cpath transform='translate(-168.211 -171.102)' d='M203.2,209.213l.916-5.83a6.785,6.785,0,0,0-.072-3c-.709-2.523-3.105-3.239-5.423-3.49a26.479,26.479,0,0,1-6.333-1.142,12.127,12.127,0,0,1-1.577-.7A5.378,5.378,0,0,1,188,192.236c-.1-.31-.389-1.264-.212-1.569,0,0-4.58,7.892-.158,12.541C192.19,208,201.915,202.282,203.2,209.213Z'/%3E%3C/svg%3E") center / contain no-repeat;
background: linear-gradient(115deg,
transparent 0%,
var(--custom-career-highlight-leaf-light) 48%,
var(--custom-career-highlight-leaf-deep) 100%);
transform: rotate(-60deg);
}
[data-custom-career-highlight] [data-custom-investor-inner] {
position: relative;
z-index: 1;
}
/* career.css:3495-3497 */
[data-custom-career-highlight] [data-custom-career-grid] {
display: grid;
align-items: center;
}
[data-custom-career-highlight] [data-custom-career-body] {
box-sizing: border-box;
min-width: 0;
}
/* the column rises in once, as one (career.html:697 .crrhl__body.reveal) */
[data-custom-career-highlight] [data-custom-career-body] [data-custom-investor-head][data-custom-reveal] {
opacity: 1;
transform: none;
transition: none;
}
/* career.css:3523-3527 — the paragraphs are light, at 1.8 */
[data-custom-career-highlight] [data-custom-career-body] [data-custom-investor-intro] {
font-weight: 300;
line-height: 1.8;
}
/* career.css:3538-3547 */
[data-custom-career-highlight] [data-custom-career-quote] {
box-sizing: border-box;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
border-width: 2px; /* career.css:3541 measures 1px */
border-style: solid;
background: linear-gradient(100deg, var(--custom-career-highlight-tint), rgba(255, 255, 255, 0.96) 72%);
box-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14); /* --sh-sm, app.css:159 */
font-family: inherit;
font-style: normal;
font-weight: 600;
line-height: 1.65;
letter-spacing: 0;
text-transform: none;
}
[data-custom-career-highlight] [data-custom-career-act] {
display: flex;
}
/* ------------------------------------------------------------------ */
/* The turning cards — career.css:2882-2905, 3734-3772 */
/* ------------------------------------------------------------------ */
[data-custom-career-highlight] [data-custom-career-stage] {
position: relative;
margin: 0;
padding: 0;
list-style: none;
touch-action: pan-y;
cursor: grab;
}
[data-custom-career-highlight] [data-custom-career-stage]:active {
cursor: grabbing;
}
[data-custom-career-highlight] [data-custom-career-card] {
margin: 0;
opacity: 0;
pointer-events: none;
transform: translateX(4%);
transition: opacity 500ms cubic-bezier(0.2, 0.8, 0.2, 1),
transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* without the script the first card stands alone */
[data-custom-career-highlight] [data-custom-career-card]:first-child:not(.is-out),
[data-custom-career-highlight] [data-custom-career-card].is-on {
opacity: 1;
pointer-events: auto;
transform: none;
}
[data-custom-career-highlight] [data-custom-career-stage].is-turning [data-custom-career-card]:first-child:not(.is-on) {
opacity: 0;
pointer-events: none;
transform: translateX(4%);
}
[data-custom-career-highlight] [data-custom-career-card].is-out {
transform: translateX(-4%);
}
/* the dots, made by the script — career.css:2911-2939, 3845-3886 */
[data-custom-career-highlight] [data-custom-career-dots] {
display: flex;
justify-content: center;
}
[data-custom-career-highlight] [data-custom-career-dot] {
position: relative;
box-sizing: border-box;
flex: none;
width: var(--custom-career-highlight-dot-size, 14px);
height: var(--custom-career-highlight-dot-size, 14px);
min-width: 0;
min-height: 0;
padding: 0;
border: 0;
border-radius: 1000px; /* the design's 999px pill, an even figure */
background-color: var(--custom-career-highlight-dot, #C7D1E3);
cursor: pointer;
transition: width 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
background-color 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* a target the size of a fingertip, around the small dot */
[data-custom-career-highlight] [data-custom-career-dot]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: max(100%, 44px);
height: max(100%, 44px);
transform: translate(-50%, -50%);
}
[data-custom-career-highlight] [data-custom-career-dot]:not([aria-current="true"]):hover {
background-color: var(--custom-career-highlight-dot-hover, #99ABCC);
}
[data-custom-career-highlight] [data-custom-career-dot][aria-current="true"] {
width: var(--custom-career-highlight-dot-on-w, 30px);
background-color: var(--custom-career-highlight-dot-on, #16418C);
cursor: default;
}
[data-custom-career-highlight] [data-custom-career-dot]:focus-visible {
outline: 2px solid #16418C;
outline-offset: 4px;
}
/* ------------------------------------------------------------------ */
/* Mobile — up to 767px (career.css:3462-3493, drawn at 768) */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
[data-custom-career-highlight] [data-custom-career-body] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
[data-custom-career-highlight] [data-custom-career-body] [data-custom-investor-head] {
width: 100%;
}
[data-custom-career-highlight] [data-custom-career-quote] {
margin-right: auto;
margin-left: auto;
text-align: center;
}
[data-custom-career-highlight] [data-custom-career-act] {
justify-content: center;
width: 100%;
}
/* career.css:3486-3489 */
[data-custom-career-highlight] [data-custom-career-act] [data-custom-partner-button] {
width: 100%;
max-width: 360px;
}
}
@media (prefers-reduced-motion: reduce) {
[data-custom-career-highlight] [data-custom-career-card] {
transform: none;
transition: opacity 300ms linear;
}
[data-custom-career-highlight] [data-custom-career-card].is-out {
transform: none;
}
}