/* The icons the live site draws out of Divi's ETmodules font, re-drawn as SVG.
*
* Divi ships its glyphs as a private-use icon font. That font is part of the
* theme, and the point of this rebuild is to leave the theme behind, so every
* glyph the pages use is re-cut here as an inline SVG mask instead. Masks, not
* background images, so each one still takes its colour from the element the
* way a font glyph does, including on hover.
*
* Loaded last, so it also overrides the per-page rules that would otherwise
* print a private-use character through content: attr(data-icon).
*
* Seven social marks, a menu caret, a hamburger, two slider chevrons and the
* three data-icon glyphs. That is every one the 66 pages use.
*/
/* --------------------------------------------------------------- machinery */
.et-social-icon a::before,
.et-menu .menu-item-has-children > a:first-child::after,
.mobile_menu_bar::before,
.et-pb-arrow-prev::before,
.et-pb-arrow-next::before,
body #page-container .et_pb_section .et_pb_button[data-icon]::before,
body .pum-container .et_pb_section .et_pb_button[data-icon]::before {
content: "" !important;
display: inline-block;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
font-family: inherit !important;
vertical-align: middle;
}
/* ------------------------------------------------------------ social icons */
.et-social-icon a::before {
width: 1em;
height: 1em;
}
.et-social-facebook a.icon::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* The live footer still labels this one Twitter and draws the current X mark. */
.et-social-twitter a.icon::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* The child theme repoints the Google icon at a map pin, and links it at the
* practice's Google listing rather than a Google+ profile. */
.et-social-google-plus a.icon::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.et-social-youtube a.icon::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.et-social-pinterest a.icon::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.et-social-linkedin a.icon::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.et-social-instagram a.icon::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* --------------------------------------------------------- menu and slider */
/* The caret on a menu item that has a submenu. */
.et-menu .menu-item-has-children > a:first-child::after {
width: 10px;
height: 10px;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
top: 4px;
}
.et-menu li li.menu-item-has-children > a:first-child::after {
top: 12px;
}
/* The mobile hamburger. Divi draws its glyph at font-size 32px, so the mask box
* is 32px: at 28 it is visibly smaller than the live one. */
.mobile_menu_bar::before {
width: 32px;
height: 32px;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.et-pb-arrow-prev::before,
.et-pb-arrow-next::before {
width: 48px;
height: 48px;
}
.et-pb-arrow-prev::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
.et-pb-arrow-next::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* ---------------------------------------------------- the data-icon buttons */
/* Three buttons carry a glyph: the header's Book Online Now (a calendar, and
* the only one drawn from FontAwesome rather than ETmodules), and the home
* page's Call and Make an Enquiry pair. Sized and offset to sit where the font
* glyph sat, which the per-page CSS positions with margin-left: -1.3em. */
body #page-container .et_pb_section .et_pb_button[data-icon]::before,
body .pum-container .et_pb_section .et_pb_button[data-icon]::before {
width: 1em;
height: 1em;
position: absolute;
margin-left: -1.3em;
top: 50%;
transform: translateY(-50%);
opacity: 1;
}
/* f073, FontAwesome calendar */
body #page-container .et_pb_section .et_pb_button[data-icon="\f073"]::before,
body .pum-container .et_pb_section .et_pb_button[data-icon="\f073"]::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* e090, ETmodules handset */
body #page-container .et_pb_section .et_pb_button[data-icon="\e090"]::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* e07e, ETmodules pointer */
body #page-container .et_pb_section .et_pb_button[data-icon="\e07e"]::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* The generic hover arrow Divi slides in on buttons that do not disable it. */
.et_pb_button::after {
content: "" !important;
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
font-size: 1em;
vertical-align: middle;
}
/* Divi's FAQ toggles. The child theme already redraws these as a rotating "+"
* in Montserrat, so only the size and colour need restating here. */
.et_pb_toggle_title::before {
content: "+" !important;
font-family: 'Montserrat', 'Raleway', sans-serif !important;
}