/**********Color Variables**********/ :root{ } /**********X-Anchors**********/ /*color, color1, color2, color3 => colored backgrounds with (typically) white text that hover to transparent*/ /*inverse, inverse1, inverse2, inverse3 => white backgrounds with colored text that hover to transparent*/ /*clearButton => begins with transparent background and hover increases border width*/ /*gradient => a gradient background that reverses on hover*/ /*border => typically for the whites and colors to produce and different colored border*/ /*hoverBack => when hovered the background will be the contrasting color*/ /*hoverBorder => instead of switching background color like normal, or cnahging border thickness like .clearButton, this just changes the border color on hover*/ /*moreRadius, someRadius, lessRadius, noRadius => border-radius, 2rem, .5rem, .25rem, 0rem*/ /*weight100, weight 300, weight400, weight700, weight900 => font-weight 100 || 300 || 400 || 700 || 900*/ /*uppercase, notUppercase => text-transform: uppercase, text-transform: unset*/ /*icon => hides text and circularizes button*/ /*****Layout*****/ #m1m_body .x-anchor-button { position: relative; padding: .25em .5em !important; margin-bottom: 0px !important; text-align: center; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } #m1m_body .x-column > .x-anchor-button:not(:last-child) {margin-bottom: 3rem !important;} #m1m_body .x-anchor-button.clearButton::after { content: ""; position: absolute; display: block; width: calc(100% + 10px); height: calc(100% + 10px); left: -5px; top: -5px; } #m1m_body .x-anchor-button .x-anchor-content { padding: 0px !important; flex-grow: 1; max-width: 100%; } #m1m_body .x-anchor-button .x-anchor-content .x-graphic { height: auto !important; display: flex; flex-direction: row; align-items: center; } #m1m_body .x-anchor-button:not(.icon) .x-anchor-content .x-graphic:first-child:not(:only-child) {margin: 0px .75rem 0px 0px !important;} #m1m_body .x-anchor-button:not(.icon) .x-anchor-content .x-graphic:last-child:not(:only-child) {margin: 0px 0px 0px .75rem !important;} #m1m_body .x-anchor-button:not(.icon) .x-anchor-content .x-graphic:not(:last-child):not(:first-child) {margin: 0px .75rem !important;} #m1m_body .x-anchor-button .x-anchor-content .x-graphic-icon {min-width: 1em;} #m1m_body .x-anchor-button:not(.icon) .x-anchor-content .x-graphic-icon::before { position: relative !important; margin: 0px !important; left: 0px !important; top: 0px !important; } #m1m_body .x-anchor-button .x-anchor-text {margin: 0px;} #m1m_body .x-anchor-button, #m1m_body .x-anchor-button .x-anchor-text-primary {line-height: 1.25; text-align: center;} #m1m_body .x-anchor-button .x-icon::before { display: flex !important; flex-direction: column; justify-content: center; } /***skews***/ #m1m_body .x-anchor-button[class*="skew"] { margin-left: 1rem !important; margin-right: 1rem !important; padding-left: 3rem !important; padding-right: 3rem !important; } /***icon***/ #m1m_body .x-anchor-button.icon { padding: .25em !important; width: 1.666em; height: 1.666em; display: flex; flex-direction: column; justify-content: center; align-items: center; } #m1m_body .x-anchor-button.icon .x-anchor-text {position: fixed; left: -100000px; top: -100000px;} #m1m_body .x-anchor-button.icon .x-graphic, #m1m_body .x-anchor-button.icon .x-graphic-icon, #m1m_body .x-anchor-button.icon .x-icon {margin: 0px !important; max-width: 100%;} #m1m_body .x-anchor-button.icon .x-graphic-icon {height: .8em;} /*****Typography*****/ /***clearing***/ #m1m_body .x-anchor-button {text-shadow: none !important;} #m1m_body .x-anchor-button .x-anchor-text-primary {font-weight: inherit !important;} #m1m_body .x-anchor-button *, #m1m_body .x-anchor-button:hover *, #m1m_body .x-anchor-button:focus * {text-shadow: none; color: inherit !important;} #m1m_body .x-anchor-button.weight100 {font-weight: 100 !important;} #m1m_body .x-anchor-button.weight300 {font-weight: 300 !important;} #m1m_body .x-anchor-button, #m1m_body .x-anchor-button.weight400 {font-weight: 400 !important;} #m1m_body .x-anchor-button.weight700 {font-weight: 700 !important;} #m1m_body .x-anchor-button.weight900 {font-weight: 900 !important;} #m1m_body .x-anchor-button.uppercase {text-transform: uppercase;} #m1m_body .x-anchor-button, #m1m_body .x-anchor-button.not-uppercase {text-transform: unset;} /***icon***/ #m1m_body .x-anchor-button.icon * {line-height: .5 !important;} #m1m_body .x-anchor-button.icon .x-graphic-primary {font-size: 1em;} /****Colors****/ /***color***/ /**text**/ #m1m_body .x-anchor-button {color: white;} #m1m_body .x-anchor-button svg {fill: white;} /*hover*/ #m1m_body .x-anchor-button:not(.hoverBorder):hover, #m1m_body .x-anchor-button:not(.hoverBorder):focus {color: black;} #m1m_body .x-anchor-button:not(.hoverBorder):hover svg, #m1m_body .x-anchor-button:not(.hoverBorder):focus svg {fill: black;} /**clearButton**/ #m1m_body .x-anchor-button.clearButton {color: black;} #m1m_body .x-anchor-button.clearButton svg {fill: black;} /****Inverses****/ /***inverse***/ /**text**/ #m1m_body .x-anchor-button.inverse {color: black;} #m1m_body .x-anchor-button.inverse svg {fill: black;} /*hover*/ #m1m_body .x-anchor-button:not(.hoverBorder).inverse:hover, #m1m_body .x-anchor-button:not(.hoverBorder).inverse:focus {color: white;} #m1m_body .x-anchor-button:not(.hoverBorder).inverse:hover svg, #m1m_body .x-anchor-button:not(.hoverBorder).inverse:focus svg {fill: white;} /**clearButton**/ #m1m_body .x-anchor-button.inverse.clearButton {color: white;} #m1m_body .x-anchor-button.inverse.clearButton svg {fill: white;} /****Gradients****/ /*****Aesthetics*****/ /****clearing****/ #m1m_body .x-anchor-button *, #m1m_body .x-anchor-button, #m1m_body .x-anchor-button:hover, #m1m_body .x-anchor-button:focus {box-shadow: none; text-decoration: none; overflow: visible;} #m1m_body .x-anchor-button.icon {border-radius: 50% !important;} #m1m_body .x-anchor-button, #m1m_body .x-anchor-button.moreRadius {border-radius: 2em !important;} #m1m_body .x-anchor-button.someRadius {border-radius: .5em !important;} #m1m_body .x-anchor-button.lessRadius {border-radius: .25em !important;} #m1m_body .x-anchor-button.noRadius {border-radius: 0em !important;} #m1m_body .x-anchor-content {border-radius: 0px;} /***transition***/ #m1m_body .x-anchor-button {transition-property: border-color, background-color, box-shadow, opacity, transform, padding, font-size, width, height !important;} /***hover***/ #m1m_body .x-anchor-button.clearButton:hover::after, #m1m_body .x-anchor-button.clearButton:focus::after {opacity: 1;} /****General****/ #m1m_body .x-anchor-button {border: 2px solid transparent;} #m1m_body .x-anchor-button[class*="gradient"]:not(.border) {border: 0px none transparent;} /***clearButton***/ #m1m_body .x-anchor-button.clearButton {background-color: transparent !important;} #m1m_body .x-anchor-button.clearButton::after { border: inherit; border-radius: inherit; border-width: 5px; opacity: 0; } /***.hoverBorder:hover***/ #m1m_body .x-anchor-button:not(.hoverBorder):hover, #m1m_body .x-anchor-button:not(.hoverBorder):focus {background-color: transparent !important;} /***modifiers***/ #m1m_body .x-anchor-button.backWhite {background-color: white !important;} #m1m_body .x-anchor-button.backBlack {background-color: black !important;} #m1m_body .x-anchor-button.hoverWhite:hover, #m1m_body .x-anchor-button.hoverWhite:focus {background-color: white !important;} #m1m_body .x-anchor-button.hoverBlack:hover, #m1m_body .x-anchor-button.hoverBlack:focus {background-color: black !important;} /***skews***/ #m1m_body .x-anchor-button[class*="skew"] {border-left-width: 4px !important; border-right-width: 4px !important;} #m1m_body .x-anchor-button.skewRight, #m1m_body .x-anchor-button.skewLeft .x-anchor-content {transform: skewX(-45deg);} #m1m_body .x-anchor-button.skewLeft, #m1m_body .x-anchor-button.skewRight .x-anchor-content {transform: skewX(45deg);} /****Colors****/ /***color***/ #m1m_body .x-anchor-button {background-color: black; border-color: black;} #m1m_body .x-anchor-button:not(.clearButton).border {border-color: white;} /**hover**/ /*background*/ #m1m_body .x-anchor-button:not(.clearButton).border:hover, #m1m_body .x-anchor-button:not(.clearButton).border:focus {border-color: black;} /*border*/ #m1m_body .x-anchor-button.color.hoverBorder:hover, #m1m_body .x-anchor-button.color.hoverBorder:focus {border-color: white;} #m1m_body .x-anchor-button.color.hoverBack:hover, #m1m_body .x-anchor-button.color.hoverBack:focus {background-color: white !important;} /****Inverses****/ /***inverse***/ #m1m_body .x-anchor-button.inverse {background-color: white; border-color: white;} #m1m_body .x-anchor-button.inverse.border {border-color: black;} /**hover**/ /*background*/ #m1m_body .x-anchor-button.inverse.hoverBack:hover, #m1m_body .x-anchor-button.inverse.hoverBack:focus {background-color: black !important;} /*border*/ #m1m_body .x-anchor-button.inverse.border:hover, #m1m_body .x-anchor-button.inverse.border:focus {border-color: white;} #m1m_body .x-anchor-button.inverse.hoverBorder:hover, #m1m_body .x-anchor-button.inverse.hoverBorder:focus {border-color: black;} /****Gradients****/ #m1m_body .x-anchor-button[class*="gradient"]:not([class^="e"]):hover, #m1m_body .x-anchor-button[class*="gradient"]:not([class^="e"]):focus, #m1m_body .x-anchor-button[class*="gradient"][class^="e"]:hover .x-anchor-text-primary, #m1m_body .x-anchor-button[class*="gradient"][class^="e"]:focus .x-anchor-text-primary {text-decoration: underline;}