/*========================================- - - - Text styles and resets - - - -=========================================*/ html { font-size: 16px; /*Most base font sizes are set on the . Setting a default of 16px here allows us to use rem's without effecting the styles set for the website attached to the MMS*/ } #system-page p { margin: 0; /*Overwrite Bootstrap defaults*/ } #system-page p + *:not(ul):not(:empty) { margin-top: .625em; } #system-page p + ul { margin-top: .5em; } #system-page h1, #system-page h2, #system-page h3, #system-page h4, #system-page h5 { text-transform: capitalize; color: inherit; font-weight: normal; /*Hierarchy will be shown by size rather than capital letters, font-weight or color*/ margin-bottom: 0; } #system-page h1 + *:not(:empty), #system-page h2 + *:not(:empty):not([class*="-card"]), #system-page h3 + *:not(:empty), #system-page h4 + *:not(:empty), #system-page h5 + *:not(:empty), #system-page h5 + *:not(:empty) { margin-top: 1rem; } #system-page .card-group h2 { /*Make up for the 1rem margin that isn't added to cards that follow the h2 inside of .card-group's*/ margin-bottom: 1rem; } #system-page article h1 { font-size: 2.4em; } #system-page aside h1 { font-size: 2em; } #system-page h2 { font-size: calc(2.4em - 9px); } #system-page h3 { font-size: calc(2.4em - 13px); } #system-page h4 { font-size: calc(2.4em - 17px); } #system-page h5 { font-size: calc(1em + 5px); } #system-page ul { padding-left: 40px; /* margin-inline-start: .25em; padding-inline-start: .25em; max-width: 420px;*/ } #system-page ul + *:not(:empty) { margin-top: 1em; } /*========================================- - - - Pages and Sections - - - -=========================================*/ #system-page section + *:not(:empty) { margin-top: 2.5em; } /*========================================- - - - Components - - - -=========================================*/ .component { position: relative; } .component + *:not(:empty) { margin-top: 1.5em; } /*___________________________________________ Fieldsets and legends ____________________________________________*/ #system-page fieldset, #system-page legend { font-size: inherit; border: none; color: inherit; padding: 0; /*Overwrites Bootstrap defaults*/ } #system-page legend { margin-bottom: .5em; grid-column: 1/-1; } /*___________________________________________ (Text-based) inputs, textareas, selects ____________________________________________*/ ::-webkit-input-placeholder, :-ms-input-placeholder, ::placeholder { padding-left: .5ch; color: inherit; opacity: .8; } #system-page input, #system-page textarea, #system-page select { margin-bottom: 0; border: 1px solid #a9a9a9; border-radius: .15rem; padding: .25em; position: relative; font-size: .95em; } #system-page .component:not(.radio-inputs):not(.checkbox-inputs) label { font-weight: inherit; display: block; margin-bottom: 0; } #system-page label + select, #system-page label + input:not([type="submit"]), #system-page label + textarea { margin-top: .15rem; } #system-page select, #system-page input[type="email"], #system-page input[type="file"], #system-page input[type="number"], #system-page input[type="password"], #system-page input[type="range"], #system-page input[type="search"], #system-page input[type="tel"], #system-page input[type="text"], #system-page input[type="url"] { width: 100%; /* max-width: 35ch;*/ } #system-page textarea { width: 70ch; max-width: 100%; min-height: 15ch; } /*___________________________________________ Radio and checkbox inputs ____________________________________________*/ #system-page .radio-inputs, #system-page .checkbox-inputs {} #system-page .radio-inputs > div + div, #system-page .checkbox-inputs > div + div { margin-top: .25rem } #system-page .radio-inputs input, #system-page .checkbox-inputs input { display: inline-block; margin: auto .5ch auto 0; } #system-page .radio-inputs label, #system-page .checkbox-inputs label { display: inline-block; font-weight: inherit; margin-bottom: 0 } /*___________________________________________ Forms ____________________________________________*/ .contact-form-inputs > div { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: .75em 15px; } #system-page .contact-form-inputs input, #system-page .contact-form-inputs select { max-width: 100%; } .wide-input { grid-column: 1/-1; } .state-zip { display: inherit; grid-template-columns: 1fr 10ch; /*grid-column: 1/-1;*/ grid-column-gap: 15px; } /*___________________________________________ More information tooltip ____________________________________________*/ * + .more-info-tooltip { position: relative; left: 0.5ch; } .more-info-tooltip { display: inline-block; cursor: pointer; } .more-info-tooltip summary { font-size: 0; height: inherit; width: inherit; height: 1.25rem; width: 1.25rem; overflow: hidden; margin-bottom: -.25rem; } .more-info-tooltip summary::before { content: 'i x'; display: inline-block; font-size: 1rem; font-family: monospace, monospace; font-weight: bold; position: relative; left: 0.3rem; bottom: .12rem; color: black; z-index: 1; transition: .125s ease-in transform, .25s ease-in color; } .more-info-tooltip[open] summary::before { transform: translateY(-1.4rem); color: white; } .more-info-tooltip summary::after { content: ''; position: absolute; left: 0; border-radius: 50%; padding: .125rem; background: #ffcc02; height: inherit; width: inherit; transition: .125s ease-in background; } .more-info-tooltip summary::after { opacity: .75; transition: .125s ease-in opacity; } .more-info-tooltip:hover summary::after, .more-info-tooltip:focus summary::after { opacity: 1; } .more-info-tooltip[open] summary::after { background: #CC0202; } .more-info-tooltip > summary::-webkit-details-marker { /*Removes carat from details element*/ display: none; } .more-info-tooltip > div { position: absolute; top: -.25rem; left: 2rem; width: 400px; max-width: inherit; background: white; z-index: 100; padding: .75rem; box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .3); } /* Known issue: Edge and IE do not natively support

. A polyfill is used for support, but adding the psuedo element styles causes the

element to show at all times. The user still sees the information so the compromise isn't too bad. Possible fix: Try other polyfills. This seems unnecessary with the Chromium-based Edge coming out soon. */ /*___________________________________________ Cards ____________________________________________*/ #system-page [class*="-card"] { box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .3); margin-bottom: 1rem; overflow: hidden; position: relative; } /*The following styles will be undone inside of the support query below so modern browsers don't have to use the lowest common denominator like IE*/ @media (min-width: 990px) { #system-page [class*="-card"] { width: calc(100% / 3 - 15px); float: left; margin-right: 15px; } } @supports (display: block) { /*@supports is used in this case to filter these styles out in IE since it doesn't support the support query at all. This is needed because IE's support of CSS grid is wonky at best*/ #system-page [class*="-card"] { /*Undo the styles applied for IE*/ float: none; width: unset; margin-right: unset; } #system-page .card-group { display: grid; grid-column-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(38ch, 1fr)); } #system-page .card-group > :not([class*="-card"]) { /*Anything that is a child of the card-group, but isn't a card will span the row that it appears in instead of being added to the grid*/ grid-column: 1/-1; } } /*___________________________________________ Member Plan/Addon Cards ____________________________________________*/ .member-plan-card, .member-addon-card { /*Cards before .show-details is clicked*/ height: 7.1rem; overflow: hidden; fill: magenta; transition: .125s ease-in-out height, .25s fill; } .member-plan-card:focus-within, .member-addon-card:focus-within { /*Dummy style triggered when a child of the card receives focus. This event is listened for to add a class of .expand to the card in the system-frontend-js.js*/ fill: transparent; } [class*="-card"].expand { height: auto; height: max-content; min-height: 113.59px; /*height is declared twice as a fallback for browsers that don't support the height property of max-content (IE/Edge)*/ } #system-page [class*="-card"] div:empty, #system-page [class*="-card"] section:empty, #system-page [class*="-card"] span:empty { display: none; } #system-page [class*="-card"] > input:first-child { /*Since the card itself is a stand in for a checkbox or a radio button, we stretch the input across the card and hide the input's box with the appearance and border properties*/ margin-top: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-top: none; border-bottom: none; transition: .125s ease-in-out border-color; z-index: 5; } #system-page .member-plan-card > input:first-child:not(:checked) { border-left: .25rem solid transparent; border-right: .25rem solid transparent; } #system-page .member-addon-card > input:first-child:not(:checked) { border-right: .25rem solid gray; } #system-page .member-plan-card > input:first-child:checked, #system-page .member-addon-card > input:first-child:checked { border-left: .25rem solid red; border-right: .25rem solid transparent; } .member-plan-card > label, .member-addon-card > label { padding: 1rem .75rem; min-height: 100%; grid-template-columns: 1fr max-content; grid-template-rows: max-content; display: grid; margin: 0; font-weight: inherit; position: relative; } .member-plan-card.expand > label, .member-addon-card.expand > label { min-height: unset; } .member-plan-card .title, .member-addon-card .title { text-transform: capitalize; font-weight: bold; line-height: 1.2; } .member-plan-card label > .title, .member-addon-card label > .title { font-size: 1.2rem; cursor: pointer; margin-bottom: .5rem; } .additional-charges .title::after { content: ': '; } .plan-cost { text-align: right; } .plan-cost .cost, .plan-cost .frequency { display: block; line-height: 1.1; } .plan-cost .frequency { font-size: .9em; margin-bottom: .75em; } #system-page [class*="-card"] .more-information { grid-column: 1/-1; position: relative; /*border-left: .25rem solid transparent; border-right: .25rem solid transparent;*/ cursor: pointer; max-width: 90%; padding: 0 .75rem 1rem; /*z-index: 6;*/ /*transition: .125s ease-in-out border-color;*/ } #system-page [class*="-card"] > input:first-child:checked { border-left: .25rem solid red; /*height: 100%;*/ } #system-page [class*="-card"] .more-information * { width: 100%; max-width: unset; } .plan-details { line-height: 1.2; } #system-page input.show-details { display: none; width: 1.2em; height: 1.2em; text-align: center; /*border: 0px transparent;*/ border-radius: 50%; transform-origin: center; background-color: currentColor; background-image: url(https://www.memberleap.com/system_components/x.svg); background-position: center; background-size: 50%; background-repeat: no-repeat; position: absolute; top: unset; bottom: 1rem; left: unset; right: .75rem; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; transition: .125s ease-in-out transform, .125s ease-in background-color, .125s ease-in border-color; z-index: 7; } #system-page input.show-details.unhide { display: block; } input[type=checkbox].show-details:focus { /*Remove outline (which is always rectangular) and replace it with box-shadow which will take the shape of the object for the focus state*/ /*Very specific selector to overwrite Bootstrap style for input outlines*/ outline: none; box-shadow: 0 0 0 3px white, 0 0 0 5px red; } #system-page .expand .show-details { /*When someone clicks on the "more-information" icon, rotate the plus sign so it appears as an x */ transform: rotate(135deg); } #system-page .show-details:checked + .more-information { /*When someone clicks on the "show-details" icon, the max-height is set so high that the entire element is revealed*/ max-height: 100em; } .show-details:checked + .more-information .plan-details { /*When someone clicks on the "more-information" icon, take away the styles that hid the full information*/ -webkit-line-clamp: unset; } .member-plan-card .additional-charges, .member-addon-card .options { padding-top: 1rem; } .member-addon-card .options label + * { /*Anything follows a label in the options section should have a .7rem gap between it and the label that proceeds it*/ margin-top: .7rem; } .additional-charges .title, .options .title { opacity: .8; } @media screen and (min-width:0\0) { /*Target just Internet Explorer*/ .member-plan-card, .member-addon-card { /*Remove limited height on cards for IE*/ height: 100%; } .member-plan-card .title, .member-addon-card .title, .member-plan-card .plan-cost, .member-addon-card .plan-cost { /*Hack to make up for IE's poor CSS Grid implementation*/ display: inline-block; width: 49%; } #system-page input.show-details { /*Toggle to show/hide .more-information is removed*/ display: none; } .member-plan-card .more-information, .member-addon-card .more-information, #system-page [class*='-card'] .more-information { /*Remove max-height/width from what would be the hidden card area*/ max-height: 100%; max-width: 100%; } } @media(max-width: 500px) { /* Switch from display:grid to prevent contents extending off the screen on iPhones */ #system-page .card-group { display: block; } } /*-End component styles---------------------------------*/ #addons { /*min-height: 308px;*/ }