/* Theme Name: PHILDENT_CIRKA_20240827 Template: blankslate Author: Pistonbroke Author URI: http://pistonbroke.com/ Description: Theme for the Michigan Divorce Help website by PB Version: 20221012 License: GNU General Public License License URI: https://www.gnu.org/licenses/gpl.html Text Domain: PHILDENT_CIRKA */ /* [VARS] Base */ :root { --color_Blue: #0D5FA3; --color_BlueDarkenO: #06467a; --color_BlueDarkenOO: #03355e; --color_BlueDarkenOOOO: #001b32; --color_BlueDarkenOA70: rgba(6, 70, 122, .7); --color_BlueBrightenO: #3799E9; --color_BlueBrightenOa: #2a6fa8; --color_BlueBrightenOO: #60b8ff; --color_BlueBrightenOOO: #bce1ff; --color_BlueBrightenOOOO: #d3ebff; --color_BlueBrightenFaded: #81b8e5; --color_BlueGrayO: #385f7e; --color_Gray: #474848; --color_GrayLightenO: #797979; --color_GrayLightenOO: #9f9f9f; --color_GrayLightenOOO: #e0e0e0; --color_GrayLightenOOOO: #ededed; /* --color_Orange: #F37420; */ --color_Orange: #cb5100; --color_OrangeYellowerO: #efa320; --duration_baseTransition: 300ms; --size_roundCornersXS: 0.25em; --size_roundCornersS: 0.5em; --size_roundCornersM: 1.5em; --size_roundCornersMM: 4em; --size_roundCornersL: 8em; } /**/ /* [VARS] Desktop All */ @media screen and (min-width: 981px) { :root { --fontSizeBase: 1.3vw; --wpBlockImage_width: 26em; --pageMarginsHorizontal: 4em; --ytBoxHeight: 25em; --h_headerHeight: 9vw; --h_logoHeightMultiplier: 1.40; --h_logoTop: 1em; --h_logoLeft: calc( .5 * var(--pageMarginsHorizontal) ); /**/ --nb_baseHeight: 2.8em; --nb_subMenuItemWidth: 16em; --nb_widePanelColumns: 4; --nb_widePanelWidth: 70%; /**/ --sgBox_columnCount: 3; /**/ --sgEntry_Size: 20em; /**/ --vidEntry_Size: 33em; /**/ --tstBox_columnCount: 3; --tstBox_itemGap: 3em; /**/ --tsBox_tstEntryItemSizeH: 21em; --tsBox_tstEntryItemSizeV: 19em; /**/ --galleryThumbs_itemSize: 14em; --galleryThumbs_columnGap: 2.2em; /**/ --ptnFirstVisit_height: 27em; --ptnFirstVisit_mainLeft: 45em; --ptnFirstVisit_mainTop: 4em; /**/ --ptnCtaPorcelainVeneers_height: 28em; --ptnCtaPorcelainVeneers_mainCopyLeft: 82%; /**/ --ptnOurGuarantee_height: 28em; --ptnOurGuarantee_mainCopyLeft: 75%; /**/ --ptnGoogMap_height: 36em; /**/ --ptnContactGetStarted_height: 30em; --ptnContactGetStarted_width: 80%; /**/ --ptnDentalVideos_columnCount: 2; /**/ --ptnDentalNews_columnCount: 2; --ptnDentalNews_itemSize: 14em; /**/ --home_homeHero_height: 48em; --home_homeHero_mainHeaderLeft: 7em; --home_homeHero_mainHeaderTop: 9em; --home_homeHero_mainHeaderFontSize: 100%; --home_homeHero_docPortraitsWidth: 25em; --home_homeHero_docPortraitsBottom: 10em; --home_homeHero_docPortraitsRight: -5em; --home_homeHero_badgesSize: 75%; --home_homeHero_badgesRight: 25em; --home_homeHero_badgesBottom: 15em; --home_homeHero_heroBookWidth: 95%; --home_homeHero_heroBookBottom: 1.5em; --home_intro_photoColumnRatio: .7fr; --home_meetDentistsHeight: 30em; --home_dentalConcernColumns: 4; --home_ptnSvcThumbsColumns: 3; /**/ --pageSingle_figureSize: 33em; /**/ --pageArchiveSg_entryColumns: 3; /**/ --pageArchiveVid_entryColumns: 2; /**/ --pageArchiveTst_entryColumns: 3; /**/ --pagePostCommon_headerHeight: 37em; --pagePostCommon_headerTitleFontSize: 360%; --pagePostCommon_headerTitleWidth: 35%; --pagePostCommon_headerTitleTop: 42%; --pagePostCommon_headerTitleLeft: 2.5em; --pagePostCommon_headerPageThumbnailWidth: 115%; /**/ --pageAwards_columnCount:4; /**/ --pageOurStaff_staffColumns: 2; --pageOurStaff_staffPictureSize: 24em; /**/ --blog_indexColumns: 2; --blog_indexThumbnailSize: 18em; /**/ } } /* [VARS] Desktop Wide */ @media screen and (min-width: 981px) and (min-aspect-ratio: 10/9) { :root { --fontSizeBase: 1vw; --pageMarginsHorizontal: 10em; --wpBlockImage_width: 26em; --h_headerHeight: 7.5vw; --h_logoHeightMultiplier: 1.55; --h_logoTop: 1em; --h_logoLeft: calc( .5 * var(--pageMarginsHorizontal) ); /**/ --nb_baseHeight: 2.8em; --nb_widePanelWidth: 50%; /**/ --sgBox_columnCount: 4; /**/ --sgEntry_Size: 17em; /**/ --vidEntry_Size: 28em; /**/ --tstBox_columnCount: 4; --tstBox_itemGap: 2em; /**/ --galleryThumbs_itemSize: 20em; --galleryThumbs_columnGap: 4em; /**/ --ptnFirstVisit_height: 35em; --ptnFirstVisit_mainLeft: 72em; --ptnFirstVisit_mainTop: 8em; /**/ --ptnCtaPorcelainVeneers_height: 32em; --ptnCtaPorcelainVeneers_mainCopyLeft: 80%; /**/ --ptnOurGuarantee_height: 32em; --ptnOurGuarantee_mainCopyLeft: 70%; /**/ --ptnGoogMap_height: 44em; /**/ --ptnContactGetStarted_height: 35em; --ptnContactGetStarted_width: 60%; /**/ --ptnDentalVideos_columnCount: 2; /**/ --ptnDentalNews_columnCount: 3; --ptnDentalNews_itemSize: 14em; /**/ --pageArchiveSg_entryColumns: 4; /**/ --pageArchiveVid_entryColumns: 3; /**/ --pageArchiveTst_entryColumns: 4; /**/ --pagePostCommon_headerHeight: 43.5em; --pagePostCommon_headerTitleFontSize: 420%; --pagePostCommon_headerTitleWidth: 35%; --pagePostCommon_headerTitleLeft: 4.6em; --pagePostCommon_headerTitleTop: 42%; --pagePostCommon_headerPageThumbnailWidth: 100%; /**/ --home_homeHero_height: 45em; --home_homeHero_mainHeaderLeft: 10em; --home_homeHero_mainHeaderTop: 5em; --home_homeHero_mainHeaderFontSize: 110%; --home_homeHero_docPortraitsWidth: 24em; --home_homeHero_docPortraitsBottom: 10em; --home_homeHero_docPortraitsRight: 13em; --home_homeHero_badgesSize: 90%; --home_homeHero_badgesRight: 25em; --home_homeHero_badgesBottom: 15em; --home_homeHero_heroBookWidth: 65%; --home_homeHero_heroBookBottom: 4em; --home_intro_photoColumnRatio: .5fr; --home_meetDentistsHeight: 30em; /**/ --pageAwards_columnCount:5; /**/ --pageOurStaff_staffColumns: 3; --pageOurStaff_staffPictureSize: 24em; /**/ --blog_indexColumns: 3; /**/ } } /* [VARS] Mobile */ @media screen and (max-width: 980px) { :root { --pageMarginsHorizontal: 1.5em; --fontSizeBase: 3.6vw; --wpBlockImage_width: 23em; --userWayAccessibilityIconSize: 3em; --h_headerHeight: 11em; --h_logoTop: -.5em; --h_logoLeft: -0.5em; --h_logoHeightMultiplier: .67; /**/ --nb_baseHeight: 0; --nb_mobile_openerSize: calc( .45 * var(--h_headerHeight) ); --nb_mobile_subMenuItemWidth: 17em; /**/ --sgBox_columnCount: 1; /**/ --sgEntry_Size: 22em; /**/ --vidEntry_Size: 25em; /**/ --galleryThumbs_itemSize: 11em; --galleryThumbs_columnGap: 1.5em; /**/ --ptnFirstVisit_height: 25em; --ptnFirstVisit_mainLeft: 2em; --ptnFirstVisit_mainTop: 2.5em; /**/ --tstBox_columnCount: 1; --tstBox_itemGap: 2em; /**/ --tsBox_tstEntryItemSizeH: 20em; --tsBox_tstEntryItemSizeV: 24em; /**/ --ptnOurGuarantee_height: 45em; /**/ --ptnDentalVideos_columnCount: 1; /**/ --ptnDentalNews_columnCount: 1; --ptnDentalNews_itemSize: 14em; /**/ --ptnGoogMap_height: 36em; /**/ --ptnContactGetStarted_height: 30em; --ptnContactGetStarted_width: 85%; /**/ --pageArchiveSg_entryColumns: 1; /**/ --pageArchiveVid_entryColumns: 1; /**/ --pageArchiveTst_entryColumns: 1; /**/ --pagePostCommon_headerHeight: 50em; --pagePostCommon_headerTitleFontSize: 220%; --pagePostCommon_headerTitleWidth: 40%; --pagePostCommon_headerTitleLeft: .5em; /**/ --home: 0; --home_homeHero_height: 78em; --home_homeHero_mainHeaderLeft: 3em; --home_homeHero_mainHeaderTop: 2em; --home_homeHero_mainHeaderFontSize: 100%; --home_homeHero_docPortraitsWidth: 30em; --home_homeHero_docPortraitsBottom: 16em; --home_homeHero_docPortraitsRight: -10em; --home_homeHero_badgesSize: 90%; --home_homeHero_badgesRight: 21em; --home_homeHero_badgesBottom: 20em; --home_homeHero_heroBookWidth: 95%; --home_homeHero_heroBookBottom: 2.5em; --home_meetDentistsHeight: auto; --home_dentalConcernColumns: 2; --home_ptnSvcThumbsColumns: 2; /**/ --pageAwards_columnCount:1; /**/ --pageOurStaff_staffColumns: 1; --pageOurStaff_staffPictureSize: 22em; /**/ --blog_indexColumns: 1; --blog_indexThumbnailSize: 18em; /**/ } } /* [Font] */ @font-face {font-family: 'FontA'; font-weight: 300; font-style: normal; font-display: swap; src: url('asset/font/Poppins_Light.woff2'); } @font-face {font-family: 'FontA'; font-weight: 300; font-style: italic; font-display: swap; src: url('asset/font/Poppins_Light_Italic.woff2'); } @font-face {font-family: 'FontA'; font-weight: 400; font-style: normal; font-display: swap; src: url('asset/font/Poppins_Regular.woff2'); } @font-face {font-family: 'FontA'; font-weight: 400; font-style: italic; font-display: swap; src: url('asset/font/Poppins_Regular_Italic.woff2'); } @font-face {font-family: 'FontA'; font-weight: 500; font-style: normal; font-display: swap; src: url('asset/font/Poppins_Medium.woff2'); } @font-face {font-family: 'FontA'; font-weight: 500; font-style: italic; font-display: swap; src: url('asset/font/Poppins_Medium_Italic.woff2'); } @font-face {font-family: 'FontA'; font-weight: 600; font-style: normal; font-display: swap; src: url('asset/font/Poppins_Bold.woff2'); } @font-face {font-family: 'FontA'; font-weight: 600; font-style: italic; font-display: swap; src: url('asset/font/Poppins_Bold_Italic.woff2'); } @font-face {font-family: 'FontA'; font-weight: 700; font-style: normal; font-display: swap; src: url('asset/font/Poppins_Black.woff2'); } @font-face {font-family: 'FontA'; font-weight: 700; font-style: italic; font-display: swap; src: url('asset/font/Poppins_Black_Italic.woff2'); } @font-face {font-family: 'FontB'; font-weight: 300; font-style: normal; font-display: swap; src: url('asset/font/Courgette-Regular.woff2'); } /**/ /* [Base] */ /* html, body */ * { box-sizing: border-box; margin: 0; padding: 0; } body { position:relative; font-family: FontA; font-size: var(--fontSizeBase); background-color: white; } img { display: block; width: 100%; height: auto; } picture { display: block; } figure { display: block; } ul,ol { list-style: none; } a { color: var(--color_Blue); } a:visited { color: var(--color_Blue); } /**/ /* wp .admin-bar */ html { margin-top: 0 !important; --wp-admin--admin-bar--height: 0 !important; } body.admin-bar #wpadminbar { display: none !important; } /**/ /* .wp-block-buttons */ .wp-block-buttons a.wp-element-button { color: white; background-color: var(--color_Orange); border-radius: var(--size_roundCornersM); text-transform: uppercase; box-shadow: .15em .15em .4em rgba(0,0,0,0.5); transition-duration: 100ms; cursor: pointer; display: block; } .wp-block-buttons a.wp-element-button:hover { color: var(--color_Blue); background-color: var(--color_OrangeYellowerO); } .wp-block-buttons a.wp-element-button:active { color: white; box-shadow: none; background-color: var(--color_Blue); transform: translate(.1em, .1em); } /**/ /* .wp-block-buttons.leaf */ .wp-block-buttons.leaf a.wp-element-button { border: .1em solid white; border-radius: var(--size_roundCornersM) var(--size_roundCornersXS); background-color: var(--color_BlueBrightenO); } .wp-block-buttons.leaf a.wp-element-button:hover { color: black; background-color: var(--color_Blue); } .wp-block-buttons.leaf a.wp-element-button:active { color: white; background-color: black; } /**/ /* #content ul.blueChecks */ #content ul.blueChecks { list-style: none; margin: 1em 0 1.5em; line-height: 2em; --bulletSize: 1.5em; } #content ul.blueChecks>li { padding-left: calc( 1.3 * var(--bulletSize) ); color: black; position: relative; } #content ul.blueChecks>li::before { background-image: url(asset/list_check_blue.svg); background-size: 100% 100%; background-repeat: no-repeat; width: var(--bulletSize); height: var(--bulletSize); content: ''; top: 0.2em; left: 0; display: block; position: absolute; } /**/ /**/ /* Userway accessibility */ /* [Media] Mobile */ @media screen and (max-width: 980px) { body .uwy { z-index: 101 !important; } body .uwy.userway_p1 .userway_buttons_wrapper { top: 12vh !important; left: 97vw !important; } body .uwy .uai, body .uwy .ulsti, .uwy .uai img:not(.userway_check_on), .uwy .ulsti img:not(.userway_check_on), body .uwy .uai img:not(.userway_check_on), body .uwy .ulsti img:not(.userway_check_on) { width: var(--userWayAccessibilityIconSize) !important; height: var(--userWayAccessibilityIconSize) !important; } } /**/ /* #h */ /* #h */ #h { position: relative; } #h .wp-block-group.Header { width: 100%; height: var(--h_headerHeight); background-color: white; z-index: 100; position: fixed; } #h .wp-block-group.Header>* { position: absolute; } /**/ /* #h .logo */ #h .logo { top: var(--h_logoTop); left: var(--h_logoLeft); z-index: 110; } #h .logo a { display: block; } #h .logo img { height: calc( var(--h_logoHeightMultiplier) * var(--h_headerHeight) ); width: auto; } /**/ /* #h .callUsBook */ #h .callUsBook { top: 1em; right: calc( var(--pageMarginsHorizontal) + 3em ); gap: .5em; align-items: center; width: 45em; grid-template-columns: .5fr 1fr; display: grid; } #h .callUsBook .callUs { font-size: 110%; gap: .8em; align-items: flex-start; grid-template-columns: 3em 1fr; display: grid; } #h .callUsBook .callUs a { white-space: nowrap; } #h .callUsBook figure { width: 100%; } #h .callUsBook .callUs>p>em /* call us now */ { font-style: normal; font-size: 110%; text-transform: uppercase; } #h .callUsBook .callUs>p>strong /* phone no */ { color: var(--color_Blue); font-weight: 600; font-size: 130%; } #h .callUsBook .bookBtn { gap: .7em; justify-items: center; grid-template-columns: 1fr; position: relative; display: grid; } #h .callUsBook .bookBtn .wp-block-buttons { gap: .7em; display: flex; text-align: center; } /**/ /* [Media] Mobile */ @media screen and (max-width: 980px) { #h .wp-block-group.Header { box-shadow: .5em .5em 1em rgba(0,0,0,0.5); } #h .callUsBook { width: auto; left: 10.5em; right: auto; top: .5em; gap: 1.5em; grid-template-columns: 1fr; } #h .callUsBook .callUs { font-size: 80%; justify-self: center; align-self: center; } #h .callUsBook .callUs figure { visibility: hidden; } #h .callUsBook .bookBtn { transform: translate(1.5em, -1em); font-size: 70%; } #h .callUsBook .bookBtn .wp-block-buttons { display: grid; } #h .callUsBook .bookBtn p { text-align: center; transform: translate(-16em,.5em); left: 0; bottom: 0; position: absolute; } } /**/ /* #container */ #container { top: calc( var(--h_headerHeight) + var(--nb_baseHeight) ); position: relative; } /* [Media] Mobile */ @media screen and (max-width: 980px) { #container { top: var(--h_headerHeight); } } /**/ /* #nb */ /* opener checkbox */ #nbMenuOpenerCheck { display: none; } /* nb logo for mobile */ #nb ul.menu>li.logo { display: none; } /* phone for mobile */ #nb ul.menu>li.phone { display: none; } /* menu parent item opener */ #nb li.menu-item-has-children>a>.opener { display: none; } /* [Media] Desktop All */ @media screen and (min-width: 981px) { /* base */ #nb { top: var(--h_headerHeight); width: 100%; z-index: 90; position: fixed; } /* all items */ #nb #menu-main a { transition: background-color var(--duration_baseTransition); text-decoration: none; align-items: center; justify-content: center; display: flex; } /* .menu>ul */ #nb #menu-main { background-color: var(--color_Blue); padding: 0 var(--pageMarginsHorizontal) 0 calc( ( 1.8 * var(--h_headerHeight) ) + var(--pageMarginsHorizontal) ); display: flex; flex-wrap: nowrap; box-shadow: .5em .5em 1em rgba(0,0,0,0.3); } /* base item li */ #nb #menu-main>li { flex-grow: 1; position: relative; overflow: hidden; } /* base item a */ #nb #menu-main>li>a { --borderBottomSize: .2em; text-align: center; width: 100%; height: var(--nb_baseHeight); color: white; background-color:var(--color_Blue); transition: all var(--duration_baseTransition); line-height:1.5em; z-index: 10; position: relative; } /* base item a span */ #nb #menu-main>li>a>span { color: white; text-transform: uppercase; font-size: 100%; } /* base items hover */#nb #menu-main>li:hover>a { background-color: var(--color_Orange) !important; } /* base items current */ #nb #menu-main>li.current_page_parent>a, #nb #menu-main>li.current-menu-ancestor>a, #nb #menu-main>li.current-menu-item>a { color: white; background-color: var(--color_BlueBrightenOa); font-weight:500; } /* sub menu */ #nb #menu-main>li>ul.sub-menu { transform: translateY(-100%); opacity: 0; left: 0; top: var(--nb_baseHeight); position: absolute; transition: all var(--duration_baseTransition); padding-bottom: .3em; grid-template-columns: 1fr; display: grid; } /* sub menu last base menu item */ #nb #menu-main>li:last-child>ul.sub-menu { left: auto; right: 0; } /* sub menu shown */ #nb #menu-main>li:hover>ul.sub-menu { background-color: var(--color_Blue); transform: translateY(0); opacity: 1; } /* sub menu item li */ #nb #menu-main>li ul.sub-menu>.menu-item { position: relative; } /* sub menu item a */ #nb #menu-main>li ul.sub-menu>.menu-item>a { justify-content: left; font-size: 90%; padding: .5em .5em .5em 1.5em; width: var(--nb_subMenuItemWidth); color: white; z-index: 2; position: relative; } /* sub menu item a span */ #nb #menu-main>li ul.sub-menu>.menu-item>a>span { color: white; } /* sub menu items current */ #nb ul.sub-menu>.menu-item.current_page_parent>a, #nb ul.sub-menu>.menu-item.current-menu-item>a { background-color: var(--color_Orange); } /* sub menu items hover */ #nb ul.sub-menu a:hover { background-color: var(--color_Orange); } /* sub menu item has children a */ #nb #menu-main>li ul.sub-menu>.menu-item-has-children>a::before { top: 50%; left: 90%; transform: translate(-50%,-50%); content:"▶"; font-size: 90%; position: absolute; } /* sub sub menu */ #nb #menu-main>li ul.sub-menu ul.sub-menu { transform: translateX(0); right: 0; top: 0; background-color: var(--color_BlueDarkenO); position: absolute; transition: all var(--duration_baseTransition); opacity: 0; } /* sub sub menu shown */ #nb #menu-main>li ul.sub-menu>.menu-item:hover ul.sub-menu { transform: translateX(100%); opacity: 1; } /* sub sub menu shown bkg */ #nb #menu-main>li ul.sub-menu>.menu-item:hover ul.sub-menu::before { opacity: .7; } /* wide panel entries */ #nb #menu-main>li.widePanel { position: inherit; overflow: hidden; } #nb #menu-main>li.widePanel>ul.sub-menu { display: none !important; } /* longPanel */#nb #menu-main>li.widePanel>.widePanelItems { transform: translate(-50%, -100%); opacity: 0; left: 50%; top: var(--nb_baseHeight); width: var(--nb_widePanelWidth); background-color: var(--color_Blue); padding-bottom: 1em; transition: all var(--duration_baseTransition); align-items: center; grid-auto-flow: column; grid-template-rows: 1fr repeat(5, .5fr); display: grid; position: absolute; } /* longPanel open */#nb #menu-main>li.widePanel:hover>.widePanelItems { transform: translate(-50%, 0); opacity: 1; } /* a */#nb #menu-main>li.widePanel>.widePanelItems>a { padding: .4em 1em; display: block; text-align: center; width: 100%; line-height: 1.2em; color: white; } /* a hover */#nb #menu-main>li.widePanel>.widePanelItems>a:hover { background-color: var(--color_Orange); } /* a span */#nb #menu-main>li.widePanel>.widePanelItems>a>span { font-size: 90%; } /* lvl1 */#nb #menu-main>li.widePanel>.widePanelItems>a.lvl1 { padding: 1.5em 1em 1em; display: grid; align-items: center; height: 4.4em; grid-row-start: 1; letter-spacing: 0.1ex; text-transform: uppercase; font-weight: 500; border-bottom: .1em solid white; position: relative; } /* lvl1 bkg */#nb #menu-main>li.widePanel>.widePanelItems>a.lvl1::before { background-color: var(--color_BlueDarkenO); width: 100%; height: 100%; position: absolute; z-index: -1; opacity: .5; content: ''; } /* lvl1 hover */#nb #menu-main>li.widePanel>.widePanelItems>a.lvl1:active, #nb #menu-main>li.widePanel>.widePanelItems>a.lvl1:hover { background-color: var(--color_Orange); } /* a current */#nb #menu-main>li.widePanel>.widePanelItems>a.current-menu-item, #nb #menu-main>li.widePanel>.widePanelItems>a.current_page_item { background-color: var(--color_Orange); } /**/ } /* [Media] Mobile */ @media screen and (max-width: 980px) { /* base */ #nb { position: fixed; top: 0; right: 0; z-index: 200; } /* opener sensitve area */ #nb>label { display: block; width: 100%; height: 100%; } /* opener button with hamburger icon */ #nb>label::before { display: block; width: var(--nb_mobile_openerSize); height: var(--nb_mobile_openerSize); content: ' '; background-color: var(--color_Blue); background-image: url('data:image/svg+xml;utf8, '); background-size: 100% 100%; border-bottom-left-radius: var(--size_roundCornersS); cursor: pointer; } /* hamburger icon active */ #nb>label:active::before { background-color: white; } /* main container base */ #nb>label>.menu-main-container { position: fixed; z-index: 50; right: -100%; top: 0; width: 100%; height: 100%; overflow-y: auto; transition: right var(--duration_colourChange); } /* checkbox toggles menu */ #nb>label>input:checked~.menu-main-container { right: 0; } /* menu list */ #nb ul.menu { display: block; width: var(--nb_mobile_subMenuItemWidth); z-index: 10; position: absolute; right: 0; top: 0; height: 100%; background-color: var(--color_Blue); } /* menu list fixed bkg */ #nb ul.menu::before { box-shadow: -.5em 0 1em rgba(0,0,0,0.6); background-color: var(--color_Blue); opacity: .95; z-index: -1; width: 100%; height: 100%; display: block; content: ''; position: fixed; } /* menu items all */ #nb ul.menu .menu-item>a { padding:.4em 1em; font-family: FontA; line-height:1.3em; font-size: 120%; color: var(--color_BlueBrightenOOOO); text-decoration: none; position: relative; transition: all var(--duration_baseTransition); display: block; } /* menu items all hover */ #nb ul.menu .menu-item:hover>a { color: var(--color_BlueDarkenO); background-color: var(--color_BlueBrightenOO); } /* nb logo for mobile */ #nb ul.menu>li.logo { padding: 2em 2em 0; display: list-item; } /* phone for mobile */ #nb ul.menu>li.phone { justify-items: center; display: grid; } #nb ul.menu>li.phone>a { background-color: var(--color_BlueBrightenO); text-decoration: none; color: white; border: .2em solid white; border-radius: var(--size_roundCornersM); white-space: nowrap; padding: .5em .8em; margin: 1.5em 0; cursor: pointer; gap: .5em; display: flex; } /**/ /* menu item current */ #nb ul.menu .menu-item.current-menu-item>a { color: white !important; text-decoration: underline; } /* base menu item */ #nb ul.menu>.menu-item>a { padding-left: .9em; } /* sub menu item */ #nb ul.sub-menu>.menu-item>a { background-color: var(--color_BlueDarkenO); padding-left: 1.5em; } /* sub sub menu item */ #nb ul.sub-menu>.menu-item>ul.sub-menu>.menu-item>a { color: var(--color_BlueBrightenOO); background-color: var(--color_BlueDarkenOO); padding-left: 2em; } /* menu parent item opener */ #nb li.menu-item-has-children>a>.opener { padding: 0.3em 0.7em; top: 0; right: 0; color: white; font-size: 120%; top: 50%; transform: translateY(-50%) rotate(0); transition: all 100ms; position: absolute; display: block; } /* menu parent item open opener */ #nb li.menu-item-has-children.open>a>.opener { transform: translateY(-50%) rotate(90deg); } /* menu parent item sub-menu */ #nb li.menu-item-has-children>.sub-menu { display: none; } /* wide panel entries */ #nb ul.menu>li.widePanel .widePanelItems { display: none; } /**/ } /**/ /* sgBox */ .sgBox { gap: 4em; height: 100%; width: 100%; justify-items: center; align-items: center; grid-auto-flow: row; grid-template-columns: repeat(var(--sgBox_columnCount),1fr); display: grid; } /* [VARS] Desktop All */ @media screen and (min-width: 981px) { .sgBox>.sgEntry:nth-child(4), .sgBox>.sgEntry:nth-child(5), .sgBox>.sgEntry:nth-child(6) { display: none; } } /* [VARS] Desktop Wide */ @media screen and (min-width: 981px) and (min-aspect-ratio: 10/9) { .sgBox>.sgEntry:nth-child(4) { display: grid; } } /**/ /* sgEntry */ .sgEntry /* sgItem */ { display: grid; justify-items: center; width: var(--sgEntry_Size); gap: 1em; position: relative; } .sgEntry>.title { order: 2; text-align: center; font-weight: 500; } .sgEntry>.title>a { font-size: 120%; color: var(--color_Blue); } .sgEntry .content { width: 100%; border-radius: var(--size_roundCornersM); border: .4em solid var(--color_BlueBrightenFaded); position: relative; overflow: hidden; } .sgEntry .content>p { display: none; } .sgEntry .content>figure { display: none; overflow: hidden; } .sgEntry .content>figure>img { height: auto; width: var(--sgEntry_Size); } .sgEntry .content>figure.before { z-index: 2; display: block; position: absolute; top: 0; left: 0; width: 25%; } .sgEntry .content>figure.after { z-index: 1; display: block; } .sgEntry .content>figure>label { color: white; text-shadow: .1em .1em .3em rgba(0,0,0,0.7); font-size: 120%; font-family: fontb; padding: .5em; position: absolute; } .sgEntry .content>figure.before>label { left: 0; top: 0; } .sgEntry .content>figure.after>label { right: 0; bottom: 0; } .sgEntry .arrow { right:74%; height:100%; border:0 solid #FFF; border-left-width:.15em; font-size:200%; z-index: 3; position:absolute; top:0; } .sgEntry .arrow::before { top:40%; position:absolute; color:#FFF; } .sgEntry .arrow.l::before { left:-1.2em; content:"◀"; } .sgEntry .arrow.r::before { left:.5em; content:"▶"; } /**/ /* vidEntry */ .vidEntry { border-radius: var(--size_roundCornersS); display: grid; justify-items: center; width: var(--vidEntry_Size); gap: 1em; position: relative; overflow: hidden; } .vidEntry iframe { border: 0; width: var(--vidEntry_Size); height: calc( 0.5625 * var(--vidEntry_Size) ); } /**/ /* tstBox */ .tstBox { gap: var(--tstBox_itemGap); height: 100%; width: 100%; justify-items: center; align-items: center; grid-auto-flow: row; grid-template-columns: repeat(var(--tstBox_columnCount),1fr); display: grid; } .tstBox>.tstEntry { width: var(--tsBox_tstEntryItemSizeH); height: var(--tsBox_tstEntryItemSizeV); border-radius: var(--size_roundCornersMM); border: .2em solid var(--color_BlueBrightenFaded); overflow: hidden; background-color: white; justify-items: center; padding: 2em; gap: 2em; transition-duration: var(--duration_baseTransition); position: relative; display: grid; } .tstBox>.tstEntry:hover { border-color: var(--color_BlueBrightenO); } .tstBox>.tstEntry::after /* fade bottom */ { z-index: 2; width: 100%; height: calc( .45 * var(--tsBox_tstEntryItemSizeV) ); bottom: 0; position: absolute; display: block; background-image: linear-gradient(to bottom, transparent 0%, white 50%); content: ''; } .tstBox>.tstEntry>.cats { bottom: 1em; gap: .2em 1ex; display: flex; justify-content: center; width: 80%; flex-wrap: wrap; z-index: 3; left: 50%; transform: translateX(-50%); position: absolute; } .tstBox>.tstEntry>.cats a { font-family: fontb; color: var(--color_BlueBrightenO); } .tstBox>.tstEntry>.cats>div { white-space: nowrap; } .tstBox>.tstEntry>.cnt>a.content { gap: 1em; justify-items: center; display: grid; text-decoration: none; margin-bottom: 2em; } .tstBox>.tstEntry>.cnt>a.content .title { font-family: fontb; font-size: 150%; } .tstBox>.tstEntry>.cnt>a.content .desc { color: var(--color_GrayLightenO); font-weight: 300; } /* [VARS] Desktop All */ @media screen and (min-width: 981px) { .tstBox>.tstEntry:nth-child(4) { display: none; } } /* [VARS] Desktop Wide */ @media screen and (min-width: 981px) and (min-aspect-ratio: 10/9) { .tstBox>.tstEntry:nth-child(4) { display: grid; } } /* [VARS] Mobile */ @media screen and (max-width: 980px) { .tstBox>.tstEntry>.cats { bottom: 2em; } } /**/ /* galleryThumbs */ #content figure.galleryThumbs /* base album */ { margin: calc( 1.2 * var(--galleryThumbs_columnGap) ) 0 calc( 2 * var(--galleryThumbs_columnGap) ); gap: var(--galleryThumbs_columnGap); justify-items: center; align-items: center; grid-template-columns: repeat(var(--thumbGalleryColumns), var(--galleryThumbs_itemSize)); display: grid; } #content figure.galleryThumbs a { color: white; } #content figure.galleryThumbs>figure /* album items */ { border-radius: var(--size_roundCornersM) var(--size_roundCornersM) var(--size_roundCornersS) var(--size_roundCornersS); cursor: pointer; align-content: center; width: var(--galleryThumbs_itemSize); height: calc( 1.5 * var(--galleryThumbs_itemSize) ); transition-duration: var(--duration_baseTransition); overflow: hidden; position: relative; grid-template-rows: 1fr .3fr; display: grid; } #content figure.galleryThumbs>figure:hover { transform: scale(115%); box-shadow: .5em .5em 1em rgba(0,0,0,0.5); } #content figure.galleryThumbs>figure>a>img { top: 50%; left: 50%; transform: translate(-50%,-50%); height: 102%; width: auto; position: absolute; } #content figure.galleryThumbs>figure>figcaption { color: white; text-align: center; background-image: url(asset/swoop_galleryThumbs_a.svg); background-size: 100% auto; background-position: center top; background-repeat: no-repeat; width: 100%; height: calc( 0.6 * var(--galleryThumbs_itemSize) ); bottom: 0; position: absolute; } #content figure.galleryThumbs>figure:nth-child(2n)>figcaption { background-image: url(asset/swoop_galleryThumbs_b.svg); } #content figure.galleryThumbs>figure>figcaption>a { padding: 3em 1.5em 0; text-decoration: none; justify-content: center; align-items: center; height: 100%; display: flex; } /* [Media] Mobile */ @media screen and (max-width: 980px) { #content figure.galleryThumbs>figure>figcaption>a { font-size: 90%; line-height: 1.3em; } } /**/ /* wpcf7 */ div.wpcf7 { } div.wpcf7 form .fields { align-items: flex-start; gap: .5em; display: flex; } div.wpcf7 form .fields .input { transition-duration: 100ms; border: .15em solid var(--color_BlueBrightenO); border-radius: var(--size_roundCornersXS); font-size: 100%; padding: .5em .5em .5em 2.0em; height: 2.8em; width: 100%; font-family: FontA; background-repeat: no-repeat; background-position: .5em .8em; background-size: 1em 1em; } div.wpcf7 form .fields .field.contact-name .input { background-image: url(asset/form_name.webp); } div.wpcf7 form .fields .field.phone .input { background-image: url(asset/form_phone.webp); } div.wpcf7 form .fields .field.email .input { background-image: url(asset/form_email.webp); } div.wpcf7 form .fields .field.message .input { background-image: url(asset/form_message.webp); } div.wpcf7 form .fields .field.submit { margin: 0 .8em; } div.wpcf7 form .fields .field.submit .input { height: 3em; padding: 0 1.5em; cursor: pointer; color: white; border-color: white; border-radius: var(--size_roundCornersM); box-shadow: .1em .1em .2em rgba(255,255,255,1), .1em .1em .8em rgba(255,255,255,0.7); background-color: var(--color_Orange); } div.wpcf7 form .fields .field.submit .input:active { transform: translate(.2em, .2em); box-shadow: none; } div.wpcf7 form .wpcf7-not-valid-tip { color: var(--color_OrangeYellowerO); } div.wpcf7 form .wpcf7-response-output { color: var(--color_OrangeYellowerO); } div.wpcf7 .screen-reader-response { display: none; } /* [Media] Mobile */ @media screen and (max-width: 980px) { div.wpcf7 form .fields { gap: .8em; grid-template-columns: repeat(2, 1fr); display: grid; } div.wpcf7 form .fields .field.submit { grid-column-end: span 2; } } /**/ /* [BLOG index] [PAGE archive-care] */ body.post-type-archive-care.archive #content { padding: 0; } body.post-type-archive-care.archive #content>header, body.blog #content>header { padding: 0 var(--pageMarginsHorizontal); } body.post-type-archive-care.archive #content>header>h1, body.blog #content>header>h1 { color: var(--color_BlueDarkenO); font-size: 160%; letter-spacing: .1ex; text-transform: uppercase; font-weight: 600; text-align: center; } body.post-type-archive-care.archive #content>header>.wpcf7, body.blog #content>header>.wpcf7 { padding-top: 2em; padding-bottom: 2em; } body.post-type-archive-care.archive #content>.entries, body.blog #content>.entries { gap: 2em; padding: 0 var(--pageMarginsHorizontal) 4em; grid-template-columns: repeat(var(--blog_indexColumns),1fr); align-items: flex-start; justify-items: center; display: grid; } body.post-type-archive-care.archive #content>.entries>article, body.blog #content>.entries>article { padding-bottom: 3em; justify-items: center; display: grid; } body.post-type-archive-care.archive #content>.entries>article .entry-title, body.blog #content>.entries>article .entry-title { order: 2; padding: .75em 0; } body.post-type-archive-care.archive #content>.entries>article .entry-title>a, body.blog #content>.entries>article .entry-title>a { text-decoration: none; color: var(--color_Blue); font-weight: 500; text-transform: uppercase; } body.post-type-archive-care.archive #content>.entries>article .thumb, body.blog #content>.entries>article .thumb { order: 1; background-image: linear-gradient(to top, var(--color_GrayLightenOOO) 0%, white 150%); border-radius: var(--size_roundCornersS); width: 100%; height: var(--blog_indexThumbnailSize); overflow: hidden; position: relative; display: block; } body.post-type-archive-care.archive #content>.entries>article .thumb>img, body.blog #content>.entries>article .thumb>img { top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: auto; position: absolute; } body.post-type-archive-care.archive #content>.entries>article .excerpt, body.blog #content>.entries>article .excerpt { order: 3; } body.post-type-archive-care.archive #content>nav, body.blog #content>nav { grid-column-end: span var(--blog_indexColumns); } body.post-type-archive-care.archive #content>nav>.nav-links, body.blog #content>nav>.nav-links { gap: 2em; display: flex; } body.post-type-archive-care.archive #content>nav>h2, body.blog #content>nav>h2 { display: none; } /**/ /* [BLOG single-post] */ body.single-care #content>article>.entry-content, body.single-post #content>article>.entry-content { gap: 1.5em; display: grid; } body.single-care #content>nav:nth-of-type(1) /* top nav */, body.single-post #content>nav:nth-of-type(1) /* top nav */ { z-index: 10; top: 20em; position: absolute; } body.single-care #content>nav:nth-of-type(1)>.nav-links /* top nav nav links */, body.single-post #content>nav:nth-of-type(1)>.nav-links /* top nav nav links */ { padding-top: 2em; } body.single-care #content>nav:nth-of-type(1)>.nav-links a /* top nav a */, body.single-post #content>nav:nth-of-type(1)>.nav-links a /* top nav a */ { font-size: 120%; padding: .7em 1.5em; position: relative; display: block; color: white; } body.single-care #content>nav:nth-of-type(1)>.nav-links a::before /* top nav a bkg */, body.single-post #content>nav:nth-of-type(1)>.nav-links a::before /* top nav a bkg */ { border-radius: var(--size_roundCornersM); opacity: .7; background-color: var(--color_Blue); content: ''; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; display: block; } body.single-care #content>article>header>nav>h2, body.single-post #content>article>header>nav>h2 { display: none; } body.single-care #content>article>header>nav>.nav-links, body.single-post #content>article>header>nav>.nav-links { gap: 2ex; display: flex; } body.single-care #content>article, body.single-post #content>article { padding-bottom: 3em; gap: 1em; justify-items: center; display: grid; } body.single-care #content>article>.entry-header>.entry-title, body.single-post #content>article>.entry-header>.entry-title { top: 3em; width: 80%; } body.single-care #content>article>.entry-header>.wpcf7, body.single-post #content>article>.entry-header>.wpcf7 { padding: 2em var(--pageMarginsHorizontal); } body.single-care #content>article>.entry-content, body.single-post #content>article>.entry-content { padding: 0 var(--pageMarginsHorizontal); } body.single-care #content>article>.entry-content h2, body.single-post #content>article>.entry-content h2 { font-size: 140%; font-weight: 600; color: var(--color_Blue); } body.single-care #content>article>.entry-content h2>strong, body.single-post #content>article>.entry-content h2>strong { font-weight: inherit; } body.single-care #content>article>.entry-content h3, body.single-post #content>article>.entry-content h3 { font-size: 130%; font-weight: 600; color: var(--color_Orange); } body.single-care #content>article>.entry-content h3>strong, body.single-post #content>article>.entry-content h3>strong { font-weight: inherit; } body.single-care #content>article>.entry-content h4, body.single-post #content>article>.entry-content h4 { font-size: 115%; font-weight: 500; color: var(--color_Orange); } body.single-care #content>article>.entry-content h4>strong, body.single-post #content>article>.entry-content h4>strong { font-weight: inherit; } body.single-care #content>article>.entry-content>figure, body.single-post #content>article>.entry-content>figure, body.single-care #content>article>.entry-content>.wp-block-image>figure, body.single-post #content>article>.entry-content>.wp-block-image>figure { width: 100%; overflow: hidden; justify-items: center; display: grid; } body.single-care #content>article>.entry-content>figure>img, body.single-post #content>article>.entry-content>figure>img, body.single-care #content>article>.entry-content>.wp-block-image>figure>img, body.single-post #content>article>.entry-content>.wp-block-image>figure>img { border-radius: var(--size_roundCornersS); width: var(--pageSingle_figureSize); max-height: var(--pageSingle_figureSize); height: auto; } body.single-care #content>article>.entry-terms, body.single-post #content>article>.entry-terms { padding: 0 var(--pageMarginsHorizontal); gap: 0 2ex; flex-wrap: wrap; display: flex; } body.single-care #content>article>.entry-terms h3, body.single-post #content>article>.entry-terms h3 { font-size: 100%; font-weight: 400; color: var(--color_Orange); } body.single-care #content>nav, body.single-post #content>nav { width: 100%; justify-content: center; display: flex; } body.single-care #content>nav>.nav-links, body.single-post #content>nav>.nav-links { width: 100%; padding: 6ex; gap: 6ex; grid-auto-flow: column; display: grid; } body.single-care #content>nav>.nav-links>.nav-previous, body.single-post #content>nav>.nav-links>.nav-previous { justify-self: left; } body.single-care #content>nav>.nav-links>.nav-next, body.single-post #content>nav>.nav-links>.nav-next { justify-self: right; } body.single-care #content>nav>h2.screen-reader-text, body.single-post #content>nav>h2.screen-reader-text { display: none; } /* [VARS] Mobile */ @media screen and (max-width: 980px) { body.single-care #content>article>.entry-terms, body.single-post #content>article>.entry-terms { justify-content: center; } } /**/ /* [PAGE error404] */ body.error404 #container>article#post-0 { text-align: center; padding: 4em 0; display: grid; } body.error404 #container>article#post-0 .header { color: var(--color_Blue); font-weight: 600; font-family: FontA; text-transform: uppercase; } body.error404 #container>article#post-0 .entry-content { gap: .5em; display: grid; } body.error404 #container>article#post-0 .entry-content>* { font-size: 120%; } /**/ /* [PAGE wp_pn_home] */ body.wp_pn_home { } body.wp_pn_home #content h3 { font-weight: 600; color: var(--color_Gray); } body.wp_pn_home #content .entry-content { grid-template-columns: 1fr; display: grid; } body.wp_pn_home #content .entry-content>.promoSpaceA { border-radius: var(--size_roundCornersM); border: solid var(--color_Blue); margin:0 8em 2em; border-width: 1.25em .5em; grid-template-columns: .6fr .4fr; display: grid; overflow: hidden; background-image: linear-gradient(to right, var(--color_Blue) 0, white 200%); } body.wp_pn_home #content .entry-content>.promoSpaceA>h2.wp-block-heading { font-size: 180%; font-weight: 300; order: 1; grid-column-end: span 2; padding: .2em 0 .6em; background-color: var(--color_Blue); color: white; align-self: top; } body.wp_pn_home #content .entry-content>.promoSpaceA>.copy { padding: 1em 2em; font-size: 120%; justify-items: center; order: 3; align-self: center; gap: 1.5em; grid-template-columns: 1fr; display: grid; } body.wp_pn_home #content .entry-content>.promoSpaceA>.copy>h3 { color: white; font-size: 180%; } body.wp_pn_home #content .entry-content>.promoSpaceA>.copy p { color: white; font-size: 110%; line-height: 1.75em; } body.wp_pn_home #content .entry-content>.promoSpaceA>figure.wp-block-image { overflow: hidden; order: 4; } /**/ body.wp_pn_home #content .wp-block-group {} body.wp_pn_home #content .wp-block-group>h2.pre.wp-block-heading { font-size: 100%; color: var(--color_Gray); } body.wp_pn_home #content .wp-block-group>h2.wp-block-heading { line-height: 1.2em; font-size: 160%; font-style: normal; font-weight: 600; color: var(--color_Blue); text-align: center; } /**/ body.wp_pn_home #content .wp-block-group.homeHero { overflow: hidden; height: var(--home_homeHero_height); position: relative; } body.wp_pn_home #content .wp-block-group.homeHero>* { position: absolute; } body.wp_pn_home #content .wp-block-group.homeHero::after /* swoop */ { width: 101%; height: 63em; bottom: 0; background-image: url(asset/home_hero_swoop.svg); background-position: center bottom; background-size: 101% auto; background-repeat: no-repeat; z-index: 10; content: ' '; position: absolute; display: block; } body.wp_pn_home #content .wp-block-group.homeHero .bkg { left: 0; top: -5em; z-index: -1; width: 100%; } body.wp_pn_home #content .wp-block-group.homeHero .mainHeader { left: var(--home_homeHero_mainHeaderLeft); top: var(--home_homeHero_mainHeaderTop); z-index: 11; font-size: var(--home_homeHero_mainHeaderFontSize); } body.wp_pn_home #content .wp-block-group.homeHero .mainHeader p:nth-of-type(1)>* /* CREATING HEALTHY SMILES... */ { color: var(--color_BlueDarkenO); line-height: 1.3em; text-transform: uppercase; font-size: 300%; font-weight: 600; font-style: normal; } body.wp_pn_home #content .wp-block-group.homeHero .mainHeader p:nth-of-type(1)>:nth-child(1) /* CREATING */ { color: var(--color_Blue); } body.wp_pn_home #content .wp-block-group.homeHero .mainHeader p:nth-of-type(2) /* Philadelphia's award-winning... */ { color: black; margin: 1em 0; line-height: 1.5em; } body.wp_pn_home #content .wp-block-group.homeHero .mainHeader .wp-block-buttons /* SCHEDULE AND APPOINTMENT */ { justify-items: flex-start; display: grid; } body.wp_pn_home #content .wp-block-group.homeHero .topBadge { font-size: var(--home_homeHero_badgesSize); right: var(--home_homeHero_badgesRight); bottom: var(--home_homeHero_badgesBottom); border-radius: 15em; background-color: white; width: calc( 0.3 * var(--home_homeHero_height) ); height: calc( 0.3 * var(--home_homeHero_height) ); overflow: hidden; z-index: 11; } body.wp_pn_home #content .wp-block-group.homeHero .topBadge img { width: 115%; top: 52%; left: 52%; transform: translate(-50%,-50%); position: absolute; } body.wp_pn_home #content .wp-block-group.homeHero .freeVisit { font-size: var(--home_homeHero_badgesSize); right: calc( -17em + var(--home_homeHero_badgesRight) ); bottom: calc( 6em + var(--home_homeHero_badgesBottom) ); width: 15em; z-index: 11; padding: 1em 1em 1.5em; color: white; border: .6em solid white; border-radius: 15em; text-align: center; background-color: var(--color_Orange); box-shadow: .5em .5em 1em rgba(0,0,0,0.25); } body.wp_pn_home #content .wp-block-group.homeHero .freeVisit>* { display: block; font-style: normal; font-weight: 400; } body.wp_pn_home #content .wp-block-group.homeHero .freeVisit>br { display: none; } body.wp_pn_home #content .wp-block-group.homeHero .freeVisit>*:nth-child(1) /* FREE */ { transform: translateY(0%); font-size: 240%; font-weight: 500; text-transform: uppercase; } body.wp_pn_home #content .wp-block-group.homeHero .freeVisit>*:nth-child(3) /* First Visit */ { transform: translateY(-40%); font-size: 160%; font-weight: 500; } body.wp_pn_home #content .wp-block-group.homeHero .freeVisit>*:nth-child(5) /* Includes */ { transform: translateY(-80%); } body.wp_pn_home #content .wp-block-group.homeHero .freeVisit>*:nth-child(7) /* Exam */ { transform: translateY(-100%); } body.wp_pn_home #content .wp-block-group.homeHero .freeVisit>*:nth-child(9) /* Book Now */ { transform: translateY(-30%); color: white; background-color: var(--color_Blue); border-radius: var(--size_roundCornersM); padding: .5em 0; margin: 0 2em; text-transform: uppercase; font-weight: 500; } body.wp_pn_home #content .wp-block-group.homeHero .docPortraits { right: var(--home_homeHero_docPortraitsRight); bottom: var(--home_homeHero_docPortraitsBottom); width: var(--home_homeHero_docPortraitsWidth); } body.wp_pn_home #content .wp-block-group.homeHero .docPortraits>figure { width: 100%; bottom: 0; position: absolute; } body.wp_pn_home #content .wp-block-group.homeHero .docPortraits>figure:nth-child(1) { /* dr_han */ transform: translate(-90%, -10%) scale(115%); z-index: 3; filter: drop-shadow(0.2em 1em .75em rgba(0, 0, 0, 0.8)); } body.wp_pn_home #content .wp-block-group.homeHero .docPortraits>figure:nth-child(2) { /* dr_jeon */ z-index: 2; transform: translate(-30%, -3%) scale(70%); filter: drop-shadow(0.2em 1em .75em rgba(0, 0, 0, 0.8)); } body.wp_pn_home #content .wp-block-group.homeHero .heroBook { width: var(--home_homeHero_heroBookWidth); font-size: 120%; left: 50%; transform: translateX(-50%); bottom: var(--home_homeHero_heroBookBottom); z-index: 11; } body.wp_pn_home #content .wp-block-group.homeHero .heroBook h2 { font-weight: 500; background-color: var(--color_Blue); color: white; text-align: center; margin-bottom: .5em; } /**/ body.wp_pn_home #content .wp-block-group.intro {} body.wp_pn_home #content .wp-block-group.intro { gap: 2em; justify-items: left; padding: 2.5em var(--pageMarginsHorizontal); grid-template-columns: var(--home_intro_photoColumnRatio) 1fr; display: grid; } body.wp_pn_home #content .wp-block-group.intro>h2.wp-block-heading { text-align: left; } body.wp_pn_home #content .wp-block-group.intro>p { line-height: 1.5em; color: var(--color_Gray); } body.wp_pn_home #content .wp-block-group.intro>figure { width: 100%; grid-row-end: span 6; order: -1; } /**/ body.wp_pn_home #content .wp-block-group.dentalConcern { --thumbGalleryColumns: var(--home_dentalConcernColumns); justify-items: center; display: grid; } body.wp_pn_home #content .wp-block-group.meetDentists {} body.wp_pn_home #content .wp-block-group.meetDentists { height: var(--home_meetDentistsHeight); padding: 4em var(--pageMarginsHorizontal); gap: 2em; grid-template-columns: 1fr 1fr; background: linear-gradient(to bottom, #E0F5FF 0%, white 100%); position: relative; display: grid; } body.wp_pn_home #content .wp-block-group.meetDentists figure.docs /* docs base gallery */ { grid-row-end: span 3; order: -1; position: relative; overflow: hidden; width: 100%; height: 100%; } body.wp_pn_home #content .wp-block-group.meetDentists figure.docs>figure /* docs items */ { top: 50%; left: 50%; position: absolute; } body.wp_pn_home #content .wp-block-group.meetDentists figure.docs>figure:nth-child(1) /* jeon */ { z-index: 3; transform: scale(75%) translate(-160%, -50%); } body.wp_pn_home #content .wp-block-group.meetDentists figure.docs>figure:nth-child(2) /* han */ { z-index: 2; transform: scale(110%) translate(-45%, -40%); } body.wp_pn_home #content .wp-block-group.meetDentists figure.topDent { --topDentSize: 13em; top: 50%; left: 50%; transform: translate(-28em,2em); z-index: 4; width: var(--topDentSize); height: var(--topDentSize); position: absolute; } body.wp_pn_home #content .wp-block-group.meetDentists figure.logo { --logoSize: 23em; opacity: 0.5; top: 50%; left: 50%; transform: translate(-150%,-14em); z-index: 0; width: var(--logoSize); height: auto; position: absolute; } body.wp_pn_home #content .wp-block-group.meetDentists .btn { justify-content: center; display: flex; } body.wp_pn_home #content .wp-block-group.meetDentists h2 { text-align: left; line-height: 1.3em; } body.wp_pn_home #content .wp-block-group.meetDentists h2>:nth-child(1) /* meet your */ { color: var(--color_BlueBrightenO); font-size: 130%; font-style: normal; font-weight: 600; } body.wp_pn_home #content .wp-block-group.meetDentists h2>:nth-child(3) /* dr... */ { color: var(--color_Blue); font-style: normal; font-weight: 500; } /**/ /* [Media] Desktop All */ @media screen and (min-width: 981px) { body.wp_pn_home #content .entry-content>.promoSpaceA>.copy { font-size: 100%; } } /* [Media] Desktop Wide */ @media screen and (min-width: 981px) and (min-aspect-ratio: 10/9) { body.wp_pn_home #content .wp-block-group.meetDentists figure.docs>figure:nth-child(2) /* han */ { transform: scale(100%) translate(-45%, -40%); } body.wp_pn_home #content .wp-block-group.meetDentists figure.topDent { transform: translate(-31em,2em); } body.wp_pn_home #content .entry-content>.promoSpaceA { max-height: 35em; } } /* [Media] Mobile */ @media screen and (max-width: 980px) { /* homeHero */ body.wp_pn_home #content .wp-block-group.homeHero { font-size: 65%; } body.wp_pn_home #content .wp-block-group.homeHero .mainHeader p:nth-of-type(1)>* /* CREATING HEALTHY SMILES... */ { line-height: 1.1em; } body.wp_pn_home #content .wp-block-group.homeHero .bkg { top: -15em; left: -15em; width: 100%; height: 100%; } body.wp_pn_home #content .wp-block-group.homeHero .bkg img { width: auto; height: 100%; } body.wp_pn_home #content .wp-block-group.homeHero::after /* swoop */ { background-position-x: -80em; width: 400%; } body.wp_pn_home #content .wp-block-group.homeHero .topBadge { width: calc( 0.22 * var(--home_homeHero_height) ); height: calc( 0.22 * var(--home_homeHero_height) ); } body.wp_pn_home #content .wp-block-group.homeHero .docPortraits>figure:nth-child(2) { /* jeon */ transform: translate(-25%, -08%) scale(75%); } /**/ /* promo Space A */ body.wp_pn_home #content .entry-content>.promoSpaceA { border-radius: 0; grid-template-columns: 1fr; grid-template-columns: auto; border-left-width: .5em; border-right-width: .5em; margin-left:0; margin-right:0; } body.wp_pn_home #content .entry-content>.promoSpaceA>h2.wp-block-heading { grid-column-end: auto; } body.wp_pn_home #content .entry-content>.promoSpaceA>.copy { order: 3; } body.wp_pn_home #content .entry-content>.promoSpaceA>figure.wp-block-image { order: 2; } /**/ /* intro */ body.wp_pn_home #content .wp-block-group.intro { gap: .5em; grid-template-columns: 1fr; } body.wp_pn_home #content .wp-block-group.intro>* { order: 10; } body.wp_pn_home #content .wp-block-group.intro>h2:nth-of-type(1) { order: 1; } body.wp_pn_home #content .wp-block-group.intro>h2:nth-of-type(2) { order: 2; } body.wp_pn_home #content .wp-block-group.intro>figure { order: 3; } /**/ /* meetDentists */ body.wp_pn_home #content .wp-block-group.meetDentists { gap: 1em; grid-template-columns: 1fr; overflow: hidden; } body.wp_pn_home #content .wp-block-group.meetDentists h2 { margin-right: 5em; } body.wp_pn_home #content .wp-block-group.meetDentists figure.docs { height: 25em; transform: none; grid-row-end: auto; } body.wp_pn_home #content .wp-block-group.meetDentists figure.docs { z-index: 1; height: 12em; transform: translate(1em,0); grid-row-end: auto; } body.wp_pn_home #content .wp-block-group.meetDentists figure.logo { transform: translate(-50%,-175%); } body.wp_pn_home #content .wp-block-group.meetDentists figure.topDent { transform: translate(10%,-80%); } /**/ } /**/ /* [PAGE wp_pn_awards] */ body.wp_pn_awards .entry-content { padding-bottom: 4em; } body.wp_pn_awards .entry-content>.wp-block-gallery { justify-items: center; align-items: flex-end; padding: 3em var(--pageMarginsHorizontal); gap: 2em; grid-template-columns: repeat(var(--pageAwards_columnCount), 1fr); display: grid; } body.wp_pn_awards .entry-content>.wp-block-gallery>figure { padding: 2em; position: relative; } body.wp_pn_awards .entry-content>.wp-block-gallery>figure>img { position: relative; } body.wp_pn_awards .entry-content>.wp-block-gallery>figure>figcaption { text-align: center; margin-top: 2em; color: var(--color_BlueDarkenOO); position: relative; } body.wp_pn_awards .entry-content>.wp-block-gallery>figure>figcaption::before { opacity: .2; border-radius: var(--size_roundCornersM); background-color: var(--color_BlueGrayO); } body.wp_pn_awards .entry-content>.reFormatted { justify-items: center; display: grid; margin: 0 var(--pageMarginsHorizontal); } /**/ /* [PAGE archive] */ body.archive #content { padding: 0 var(--pageMarginsHorizontal) 4em; } body.archive #content>header { padding-bottom: 2em; } body.archive #content>header>h1 { color: var(--color_BlueDarkenO); font-size: 160%; letter-spacing: .1ex; text-transform: uppercase; font-weight: 600; text-align: center; } body.archive #content>header>.wpcf7 { padding-top: 2em; padding-bottom: 2em; } body.archive #content>.entries { gap: 1em; display: grid; } body.archive #content>.entries>article { align-items: center; justify-items: center; gap: 1em; display: grid; } body.archive #content>.entries>article>header>h2 { font-weight: 500; } body.archive #content>.entries>article>.entry-content { align-items: center; justify-items: center; gap: 1em; display: grid; } body.archive #content>nav { width: 100%; } body.archive #content>nav>.nav-links { gap: 2em; grid-auto-flow: column; display: grid; } body.archive #content>nav>.nav-links>.nav-next { justify-self: right; } body.archive #content>nav>h2 { display: none; } /**/ /* [PAGE archive-video] */ body.archive.tax-videos #content>.entries, body.post-type-archive-video #content>.entries { grid-template-columns: repeat(var(--pageArchiveVid_entryColumns),1fr); align-items: flex-start; justify-items: center; display: grid; gap: 2em; } body.archive.tax-videos #content>.entries>article>.entry-content>p, body.post-type-archive-video #content>.entries>article>.entry-content>p { width: var(--vidEntry_Size); color: var(--color_Gray); } body.archive.tax-videos #content>.entries>article>.entry-terms, body.post-type-archive-video #content>.entries>article>.entry-terms { gap: 0 2ex; flex-wrap: wrap; display: flex; } body.archive.tax-videos #content>.entries>article>.entry-terms h3, body.post-type-archive-video #content>.entries>article>.entry-terms h3 { font-size: 100%; font-weight: 400; color: var(--color_Orange); } body.archive.tax-videos #content>nav, body.post-type-archive-video #content>nav { grid-column-end: span var(--pageArchiveVid_entryColumns); } /* [VARS] Desktop Wide */ @media screen and (min-width: 981px) and (min-aspect-ratio: 10/9) { body.post-type-archive-video #content { padding-left: calc( .5 * var(--pageMarginsHorizontal) ); padding-right: calc( .5 * var(--pageMarginsHorizontal) ); } body.post-type-archive-video #content>header { padding-left: calc( .5 * var(--pageMarginsHorizontal) ); padding-right: calc( .5 * var(--pageMarginsHorizontal) ); } } /**/ /* [PAGE archive-testimonials] */ body.post-type-archive-testimonials #content { justify-items: center; display: grid; } body.tax-testimonial_category #content>.entries, body.post-type-archive-testimonials #content>.entries { grid-template-columns: repeat(var(--pageArchiveTst_entryColumns),1fr); align-items: flex-start; justify-items: center; display: grid; gap: 2em; } body.tax-testimonial_category #content>header, body.post-type-archive-testimonials #content>header { justify-items: center; display: grid; } body.tax-testimonial_category #content .entry-title a, body.post-type-archive-testimonials #content .entry-title a { text-decoration: none; text-transform: uppercase; } body.tax-testimonial_category #content .entry-summary p, body.post-type-archive-testimonials #content .entry-content p { color: var(--color_Gray); } body.tax-testimonial_category #content>.entries>article>.entry-terms, body.post-type-archive-testimonials #content>.entries>article>.entry-terms { gap: 0 2ex; flex-wrap: wrap; display: flex; } body.tax-testimonial_category #content>.entries>article>.entry-terms h3, body.post-type-archive-testimonials #content>.entries>article>.entry-terms h3 { font-size: 100%; font-weight: 400; color: var(--color_Orange); } /**/ /* [PAGE archive-smile] */ body.post-type-archive-smile #content>.entries { grid-template-columns: repeat(var(--pageArchiveSg_entryColumns),1fr); align-items: flex-start; justify-items: center; display: grid; gap: 2em; } body.post-type-archive-smile #content .header { justify-items: center; display: grid; } body.post-type-archive-smile #content .header>h1 { gap: 1.5ex; color: var(--color_Blue); align-items: center; display: flex; } body.post-type-archive-smile #content .header>h1>span:nth-child(2) { letter-spacing: 0; text-transform: capitalize; font-family: fontb; } body.post-type-archive-smile #content>.entries>article>.entry-content>p { width: var(--sgEntry_Size); color: var(--color_Gray); } /* [VARS] Desktop Wide */ @media screen and (min-width: 981px) and (min-aspect-ratio: 10/9) { body.post-type-archive-smile #content { padding-left: calc( .5 * var(--pageMarginsHorizontal) ); padding-right: calc( .5 * var(--pageMarginsHorizontal) ); } body.post-type-archive-smile #content .header { padding-left: calc( .5 * var(--pageMarginsHorizontal) ); padding-right: calc( .5 * var(--pageMarginsHorizontal) ); } body.post-type-archive-smile #content>article>.entry-content>p { width: calc( 1.35 * var(--sgEntry_Size) ); } } /**/ /* [PAGE single-testimonials] */ body.single-testimonials #content>article { gap: 1em; display: grid; } body.single-testimonials #content>article>.entry-header { justify-items: center; display: grid; } body.single-testimonials #content>article>.entry-header>nav { width: 100%; } body.single-testimonials #content>article>.entry-header>nav>h2.screen-reader-text { display: none; } body.single-testimonials #content>article>.entry-header>nav>.nav-links { margin: 0 var(--pageMarginsHorizontal); gap: 4em; grid-auto-flow: column; display: grid; } body.single-testimonials #content>article>.entry-header>nav>.nav-links>.nav-next { justify-self: right; } body.single-testimonials #content>article>.entry-header>.wpcf7 { padding: 2em var(--pageMarginsHorizontal); } body.single-testimonials #content>article>.entry-header>.entry-title { font-size: 200%; font-family: fontb; font-weight: 300; text-transform: capitalize; color: var(--color_Blue); } body.single-testimonials #content>article { padding-bottom: 4em; } body.single-testimonials #content>article>.entry-content p { color: var(--color_Gray); } /* [VARS] Desktop All */ @media screen and (min-width: 981px) { body.single-testimonials #content>article>.entry-content { padding-left: calc( 2 * var(--pageMarginsHorizontal) ); padding-right: calc( 2 * var(--pageMarginsHorizontal) ); } } /* [VARS] Desktop Wide */ @media screen and (min-width: 981px) and (min-aspect-ratio: 10/9) { body.single-testimonials #content>article>.entry-content { padding-left: var(--pageMarginsHorizontal); padding-right: var(--pageMarginsHorizontal); } } /**/ /* [PAGE single-smile] */ body.single-smile { --sgEntry_Size: 24em; --sgEntry_Spacing: 3em; } body.single-smile #content { display: none; } body.single-smile #content>article { justify-items: center; display: grid; } body.single-smile #content>article>.entry-header { justify-items: center; display: grid; } body.single-smile #content>article>.entry-header>nav { width: 100%; } body.single-smile #content>article>.entry-header>nav>h2.screen-reader-text { display: none; } body.single-smile #content>article>.entry-header>nav>.nav-links { margin: 0 var(--pageMarginsHorizontal); gap: 4em; grid-auto-flow: column; display: grid; } body.single-smile #content>article>.entry-header>nav>.nav-links>.nav-next { justify-self: right; } body.single-smile #content>article>.entry-header>.entry-title { font-weight: 400; font-size: 200%; color: var(--color_BlueBrightenO); font-family: fontb; text-align: center; } body.single-smile #content>article>.entry-header>.entry-title a { gap: 1ex; display: flex; text-decoration: none; } body.single-smile #content>article>.entry-header>.entry-title .pre { color: var(--color_Blue); letter-spacing: .1ex; margin-bottom: 1em; font-weight: 600; font-family: fonta; font-size: 80%; } body.single-smile #content>article>.entry-header>.wpcf7 { padding: 2em var(--pageMarginsHorizontal); } body.single-smile #content>article>.entry-content { padding: 0 var(--sgEntry_Spacing) var(--sgEntry_Spacing); gap: var(--sgEntry_Spacing); justify-items: center; display: grid; } body.single-smile #content>article>.entry-content>p { padding: 0 var(--pageMarginsHorizontal); } body.single-smile #content>article>.entry-terms { padding-bottom: 4em; gap: 0 2ex; flex-wrap: wrap; display: flex; } body.single-smile #content>article>.entry-terms h3 { font-size: 100%; font-weight: 400; color: var(--color_Orange); } /* [VARS] Mobile */ @media screen and (max-width: 980px) { body.single-smile { --sgEntry_Size: 20em; } body.single-smile #content>article>.entry-content { --sgEntry_Spacing: 2em; } } /**/ /* [PAGE single-video] */ body.single-video #content>article { justify-items: center; gap: 2em; display: grid; } body.single-video #content>article>.entry-header { justify-items: center; display: grid; } body.single-video #content>article>.entry-header>nav { width: 100%; } body.single-video #content>article>.entry-header>nav>h2.screen-reader-text { display: none; } body.single-video #content>article>.entry-header>nav>.nav-links { margin: 0 var(--pageMarginsHorizontal); gap: 4em; grid-auto-flow: column; display: grid; } body.single-video #content>article>.entry-header>nav>.nav-links>.nav-next { justify-self: right; } body.single-video #content>article>.entry-header>.wpcf7 { padding: 2em var(--pageMarginsHorizontal); } body.single-video #content>article>.entry-content { margin: 0 var(--pageMarginsHorizontal); gap: 1em; justify-items: center; display: grid; } body.single-video #content>article>.entry-header>.entry-title { font-size: 200%; font-family: fontb; font-weight: 300; color: var(--color_Blue); } body.single-video #content>article>.entry-terms { padding-bottom: 4em; gap: 0 2ex; flex-wrap: wrap; display: flex; } body.single-video #content>article>.entry-terms h3 { font-size: 100%; font-weight: 400; color: var(--color_Orange); } /* [VARS] Desktop All */ @media screen and (min-width: 981px) { body.single-video { --vidEntry_Size: 50em; } } /* [VARS] Desktop Wide */ @media screen and (min-width: 981px) and (min-aspect-ratio: 10/9) { body.single-video { --vidEntry_Size: 60em; } } /**/ /* [PAGE wp_pt_pagePostCommon] */ /* #content */ body.wp_pt_pagePostCommon #content { position: relative; } /**/ /* .entry-header */ body.wp_pt_pagePostCommon .entry-header { background-color: var(--color_BlueDarkenOO); width: 100%; display: grid; position: relative; } body.wp_pt_pagePostCommon .entry-header>.entry-title { width: var(--pagePostCommon_headerTitleWidth); left: var(--pagePostCommon_headerTitleLeft); top: var(--pagePostCommon_headerTitleTop); transform: translateY(-50%); font-size: var(--pagePostCommon_headerTitleFontSize); letter-spacing: -.1ex; line-height: 1.5em; font-weight: 400; color: white; text-align: left; z-index: 10; text-shadow: .1em .1em .3em var(--color_BlueDarkenOOOO); font-family: fontB; position: absolute; } body.wp_pt_pagePostCommon .entry-header>.pageThumbnail { width: 100%; height: var(--pagePostCommon_headerHeight); justify-items: center; overflow: hidden; display: grid; position: relative; } body.wp_pt_pagePostCommon .entry-header>.pageThumbnail>img { width: var(--pagePostCommon_headerPageThumbnailWidth); height: auto; left: 0; top: 50%; transform: translateY(-50%); position: absolute; z-index: 2; } body.wp_pt_pagePostCommon .entry-header>.wpcf7 { padding: 1.2em var(--pageMarginsHorizontal) 1.2em; border: solid white; border-width: .2em 0 0; bottom: 0; overflow: hidden; display: grid; position: absolute; z-index: 2; } body.wp_pt_pagePostCommon .entry-header>.wpcf7::before /* bkg */ { background: var(--color_Blue); opacity: .5; width: 100%; height: 100%; display: block; position: absolute; z-index: -1; content: ''; } /* [Media] Mobile */ @media screen and (max-width: 980px) { body.wp_pt_pagePostCommon .entry-header>.pageThumbnail>img { right: -18em; top: 0; left: auto; transform: none; height: calc( .7 * var(--pagePostCommon_headerHeight) ); width: auto; } body.wp_pt_pagePostCommon .entry-header>.entry-title { font-size: 350%; bottom: 5em; width: 70%; top: auto; transform: none; } body.wp_pt_pagePostCommon .entry-header>.wpcf7 { height: calc( .3 * var(--pagePostCommon_headerHeight) ); } body.wp_pt_pagePostCommon .entry-header>.wpcf7::before /* bkg */ { background: var(--color_Blue); opacity: 1; } } /**/ /* .entry-content */ body.wp_pt_pagePostCommon .entry-content h2 { color: var(--color_BlueDarkenO); font-weight: 500; } body.wp_pt_pagePostCommon .entry-content h3 { color: var(--color_Orange); font-weight: 500; } body.wp_pt_pagePostCommon .entry-content h3>a { color: var(--color_Orange); } body.wp_pt_pagePostCommon .entry-content p, body.wp_pt_pagePostCommon .entry-content *>li { margin: 1em 0; font-weight: 300; color: var(--color_Gray); } body.wp_pt_pagePostCommon .entry-content strong { font-weight: 500; color: black; } body.wp_pt_pagePostCommon .entry-content ul, body.wp_pt_pagePostCommon .entry-content ol { padding-left: 2ex; } body.wp_pt_pagePostCommon .entry-content ol { list-style-type: decimal; } body.wp_pt_pagePostCommon .entry-content ul { list-style-type: square; } body.wp_pt_pagePostCommon .entry-content ul>li, body.wp_pt_pagePostCommon .entry-content ol>li { padding-left: 1ex; } body.wp_pt_pagePostCommon .entry-content .wp-block-image figcaption { color: white; position: absolute; bottom: 0; } body.wp_pt_pagePostCommon .entry-content .wp-block-image figcaption>div /* wrapper */ { padding: 1em 2em 1.5em; z-index: 2; position: relative; } body.wp_pt_pagePostCommon .entry-content .wp-block-image figcaption::before /* bkg */ { opacity: .5; background-color: black; width: 100%; height: 100%; content: ''; top: 0; left: 0; z-index: 1; position: absolute; } body.wp_pt_pagePostCommon .entry-content .ytBox { padding: 2em 0; justify-items: center; display: grid; } body.wp_pt_pagePostCommon .entry-content .ytBox>.w { transform: translateY(-.5em); border: .2em solid var(--color_Blue); border-radius: var(--size_roundCornersM); box-shadow: .5em .5em 1em rgba(0,0,0,0.3); width: calc( 1.77 * var(--ytBoxHeight) ); height: var(--ytBoxHeight); aspect-ratio: 1.77 / 1; overflow: hidden; } body.wp_pt_pagePostCommon .entry-content .ytBox>.w>iframe { height: 100%; width: 100%; } /* [Media] Mobile */ @media screen and (max-width: 980px) { body.wp_pt_pagePostCommon .entry-content .ytBox { margin-left: calc( -1.5 * var(--pageMarginsHorizontal) ); margin-right: calc( -1.5 * var(--pageMarginsHorizontal) ); } body.wp_pt_pagePostCommon .entry-content .ytBox>.w { transform: none; box-shadow: none; border-left-width: 0; border-right-width: 0; border-radius: 0; width: 100%; height: calc( .5625 * 100vw ); overflow: hidden; } } /**/ /* #content.allBlocks .entry-content>.wp-block-group.reFormatted */ body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted { gap: 2em; display: grid; padding: 3em calc( 1.5 * var(--pageMarginsHorizontal) ) 4em; clear: both; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted:nth-of-type(odd) { grid-template-columns: 1fr .8fr; background-color: white; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted:nth-of-type(even) { background-color: var(--color_GrayLightenOOOO); grid-template-columns: .8fr 1fr; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted>.cntHeading { justify-self: left; grid-row: 1; grid-column: 1 / span 2; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted>.cntImage { grid-row: 2; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted>.cntImage>figure { margin: 0; width: 100%; height: auto; border-radius: var(--size_roundCornersM); overflow: hidden; position: relative; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted>.cntButton { grid-column-end: span 2; margin: .5em 1.5em 0; text-align: center; justify-content: center; display: flex; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted:nth-of-type(odd)>.cntImage { grid-column: 2; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted:nth-of-type(even)>.cntImage { grid-column: 1; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted.withYtBox:nth-of-type(odd) { grid-template-columns: 1fr 1.2fr; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted.withYtBox:nth-of-type(even) { grid-template-columns: 1.2fr 1fr; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted.withYtBox>.cntImage>.ytBox>.w { width: 100%; height: auto; } /* [Media] Mobile */ @media screen and (max-width: 980px) { body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted { gap: 1em; grid-template-columns: 1fr !important; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted>.cntHeading { grid-column-end: auto; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted>.cntImage { grid-column: auto !important; } body.wp_pt_pagePostCommon #content.allBlocks .entry-content>.wp-block-group.reFormatted>.cntButton { grid-column-end: auto; } } /**/ /**/ /* [PAGE wp_pan_meet_the_doctors] */ body.wp_pan_meet_the_doctors #content>article>.entry-content>.wp-block-group.bio { grid-template-columns: 1fr !important; padding: 2em !important; gap: 0 !important; } body.wp_pan_meet_the_doctors #content>article>.entry-content>.wp-block-group.bio>.cntHeading { padding: 2em 0; justify-self: auto !important; justify-items: center; display: grid; } body.wp_pan_meet_the_doctors #content>article>.entry-content>.wp-block-group.bio>.cntContent { padding: 2em var(--pageMarginsHorizontal); grid-template-columns: repeat(2, 1fr); display: grid; } body.wp_pan_meet_the_doctors #content>article>.entry-content>.wp-block-group.bio>.cntContent>div { background-color: white; padding: 2em; } body.wp_pan_meet_the_doctors #content>article>.entry-content>.wp-block-group.bio>.cntContent>div:nth-child(4n-1), body.wp_pan_meet_the_doctors #content>article>.entry-content>.wp-block-group.bio>.cntContent>div:nth-child(4n-2) { background-color: var(--color_GrayLightenOOOO); } /* [Media] Desktop All */ @media screen and (min-width: 981px) { body.wp_pan_meet_the_doctors #content>article>.entry-header>.entry-title { top: auto; left: 1.5em; bottom: 2em; } } /* [Media] Desktop Wide */ @media screen and (min-width: 981px) and (min-aspect-ratio: 10/9) { body.wp_pan_meet_the_doctors #content>article>.entry-header>.entry-title { left: 2.4em; } } /* [Media] Mobile */ @media screen and (max-width: 980px) { body.wp_pan_meet_the_doctors #content>article>.entry-content>.wp-block-group.bio>.cntHeading { padding: 0; } body.wp_pan_meet_the_doctors #content>article>.entry-content>.wp-block-group.bio>.cntContent { padding-left: 0; padding-right: 0; grid-template-columns: 1fr; } body.wp_pan_meet_the_doctors #content>article>.entry-content>.wp-block-group.bio>.cntContent>div:nth-child(odd) { background-color: white; } body.wp_pan_meet_the_doctors #content>article>.entry-content>.wp-block-group.bio>.cntContent>div:nth-child(even) { background-color: var(--color_GrayLightenOOOO); } } /**/ /* [PAGE wp_pan_landing_pages] */ body.wp_pan_landing_pages { --pagePostCommon_headerHeight: 20em; } body.wp_pan_landing_pages #h, body.wp_pan_landing_pages #nb { display: none; } body.wp_pan_landing_pages #container { top: 0; } body.wp_pan_landing_pages #container::before { background-image: linear-gradient(to top, white 0%, var(--color_BlueDarkenO) 100vh); width: 100%; height: 100%; top: 0; left: 0; display: block; z-index: -1; position: fixed; content: ''; } body.wp_pan_landing_pages #content { padding: 0 var(--pageMarginsHorizontal); } body.wp_pan_landing_pages #content>article>.entry-header { overflow: hidden; border-radius: 0 0 var(--size_roundCornersM) var(--size_roundCornersM); } body.wp_pan_landing_pages #content>article>.entry-header>.wpcf7 { display: none !important; } body.wp_pan_landing_pages #content>article>.entry-header>.entry-title { background-color: var(--color_BlueDarkenO); background-image: linear-gradient(to bottom, var(--color_BlueGrayO) 0, var(--color_BlueDarkenOO) 100%); padding: 1.5em; top: auto; left: auto; transform: none; text-align: center; width: 100%; position: relative; } body.wp_pan_landing_pages #content>article>.entry-header>.pageThumbnail>img { top: 50%; left: 50%; transform: translate(-50%,-50%); height: 100%; width: auto; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group>.cntHeading { justify-self: center !important; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(1) { background-color: transparent !important; padding-top: 0 !important; padding-bottom: 0 !important; grid-template-columns: 1fr !important; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(1)>.cntImage { display: none; } body.wp_pan_landing_pages #content.allBlocks .entry-content > .wp-block-group.reFormatted:nth-child(1) > .cntHeading { margin-top: 2em; border-radius: var(--size_roundCornersM); padding: 1.5em; background-color: var(--color_BlueGrayO); justify-self: center; grid-column: 1/1; } body.wp_pan_landing_pages #content.allBlocks .entry-content > .wp-block-group.reFormatted:nth-child(1) > .cntHeading>h2 { padding-top: 0; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(1)>.cntHeading>h2 { padding: 1em 0 0; text-align: center; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(1)>.cntHeading>h2>.a, body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(1)>.cntHeading>h2>.c { color: var(--color_BlueBrightenOOO); text-transform: lowercase; font-size: 160%; font-family: fontb; display: block; padding: .2em 0; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(1)>.cntHeading>h2>.b { font-weight: 600; text-transform: capitalize; color: white; font-size: 200%; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2) /* are your teeth */ { padding: 3em !important; border-radius: var(--size_roundCornersM); background-color: var(--color_BlueDarkenOO) !important; grid-template-columns: 1fr 1fr !important; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2) * { color: var(--color_BlueBrightenOOOO) !important; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2)>.cntImage { display: none; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2)>.cntHeading { grid-column: 1 / 1 !important; position: relative; width: 100%; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2)>.cntHeading>h2 { font-family: fontb; font-size: 400%; text-align: center !important; text-transform: lowercase; top: 40%; left: 50%; transform: translate(-50%,-50%); position: absolute; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2)>.cntContent { grid-column: 2 / 2 !important; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2)>.cntContent>ul { font-size: 200%; justify-content: left; flex-wrap: wrap; gap: 1ex; padding: 0; list-style: none; display: flex; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2)>.cntContent>ul>li { position: relative; margin: 0 !important; padding: 0 0 0 1em !important; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2)>.cntContent>ul>li::before { top: 0; left: 0; transform: translate(0, -.4em); font-size: 200%; color: var(--color_OrangeYellowerO); content: '•'; position: absolute; display: block; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2)>.cntContent>p { color: white !important; font-size: 200%; text-align: center; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2)>.cntContent>p:nth-of-type(2) { font-size: 260%; font-family: fontb; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(3) /* drs */ { grid-template-columns: .5fr 1fr !important; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(3)>.cntContent { padding-top: 2em; font-family: fontb; font-size: 200%; text-align: center; } /* [Media] Desktop Wide */ @media screen and (min-width: 981px) and (min-aspect-ratio: 10/9) { body.wp_pan_landing_pages #content>article>.entry-header>.pageThumbnail>img { width: 100%; height: auto; } } /* [Media] Mobile */ @media screen and (max-width: 980px) { body.wp_pan_landing_pages #content>article>.entry-header>.entry-title { top: 10%; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(1)>.cntHeading>h2>.c { color: var(--color_BlueDarkenO) !important; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2) /* are your teeth */ { grid-template-columns: 1fr !important; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2)>.cntContent { grid-column: 1 / 1 !important; } body.wp_pan_landing_pages #content>article>.entry-content>.wp-block-group:nth-child(2)>.cntHeading>h2 { top: 0; left: 0; transform: none; position: relative; } } /**/ /* [PAGE wp_pn_dr_ken_cirka] */ /* [Media] Mobile */ @media screen and (max-width: 980px) { body.wp_pn_dr_ken_cirka .entry-header > .pageThumbnail > img { right: -36em !important; } } /**/ /* [PAGE wp_pn_dr-mimi-jeon] */ /* [Media] Mobile */ @media screen and (max-width: 980px) { body.wp_pn_dr-mimi-jeon .entry-header > .pageThumbnail > img { right: -5em !important; } } /**/ /* [PAGE wp_pn_meet_our_staff] */ body.wp_pt_pagePostCommon.wp_pn_meet_our_staff #content.allBlocks .entry-content { grid-template-columns: repeat(var(--pageOurStaff_staffColumns), 1fr); align-items: flex-start; padding: 3em 6em; gap: 3em 6em; display: grid; } body.wp_pt_pagePostCommon.wp_pn_meet_our_staff #content.allBlocks .entry-content>.wp-block-group.reFormatted { padding: 0; background-color: white; gap: 1.5em; justify-items: center; grid-template-columns: 1fr; display: grid; } body.wp_pt_pagePostCommon.wp_pn_meet_our_staff #content.allBlocks .entry-content>.wp-block-group.reFormatted>.cntHeading { text-align: center; grid-row: 2; grid-column-end: auto; } body.wp_pt_pagePostCommon.wp_pn_meet_our_staff #content.allBlocks .entry-content>.wp-block-group.reFormatted>.cntContent { } body.wp_pt_pagePostCommon.wp_pn_meet_our_staff #content.allBlocks .entry-content>.wp-block-group.reFormatted>.cntImage { grid-column: 1; grid-row: 1; } body.wp_pt_pagePostCommon.wp_pn_meet_our_staff #content.allBlocks .entry-content>.wp-block-group.reFormatted>.cntImage>figure { width: var(--pageOurStaff_staffPictureSize); aspect-ratio: 1/1; margin: 0; } body.wp_pt_pagePostCommon.wp_pn_meet_our_staff #content.allBlocks .entry-content>.wp-block-group.reFormatted>.cntImage>figure>img { width: 100%; height: auto; } body.wp_pt_pagePostCommon.wp_pn_meet_our_staff #content.allBlocks .entry-content>.wp-block-group.reFormatted p { margin: 0; } /* [Media] Mobile */ @media screen and (max-width: 980px) { body.wp_pt_pagePostCommon.wp_pn_meet_our_staff #content.allBlocks .entry-content { padding-right: var(--pageMarginsHorizontal); padding-left: var(--pageMarginsHorizontal); } } /**/ /* [PAGE wp_pn_sunbit-financing] */ body.wp_pn_sunbit-financing #content.allBlocks .entry-content > .wp-block-group.reFormatted { grid-template-columns: 1fr !important; } /**/ /* [PTN ptnFooter] */ body #f { clear: both; } body #f>.wp-block-group.ptnFooter { background-color: var(--color_Blue); display: grid; justify-items: center; position: relative; } body #f>.wp-block-group.ptnFooter .wp-block-group.ptnContactGetStarted { transform: translateY(-20%); } body #f>.wp-block-group.ptnFooter .footerFooter { --colCount: 4; margin: 0 var(--pageMarginsHorizontal); gap: 1em; grid-template-columns: .4fr repeat(calc( var(--colCount) - 1 ), 1fr); justify-items: center; display: grid; } body #f>.wp-block-group.ptnFooter .footerFooter p, body #f>.wp-block-group.ptnFooter .footerFooter a, body #f>.wp-block-group.ptnFooter .footerFooter li, body #f>.wp-block-group.ptnFooter .footerFooter h2 { color: white; } body #f>.wp-block-group.ptnFooter .footerFooter h2 { margin-bottom: .5em; font-weight: 500; } body #f>.wp-block-group.ptnFooter .footerFooter strong { font-weight: 600; } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial { justify-items: center; display: grid; } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial h2 { display: none; } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial .logo { width: 90%; margin-bottom: 1em; } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial ul { --iconSize: 2.5em; --gapSize: .5em; gap: var(--gapSize); display: flex; } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial ul a { border-radius: var(--size_roundCornersL); border: .1em solid white; width: var(--iconSize); height: var(--iconSize); background-size: 60% 60%; background-repeat: no-repeat; background-position: center center; transition-duration: var(--duration_baseTransition); display: block; } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial ul a:hover { background-color: var(--color_BlueBrightenOO); } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial ul a:active { background-color: black; } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial li.google>a { background-image: url('data:image/svg+xml;utf8,'); } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial li.ex>a { background-image: url('data:image/svg+xml;utf8,'); } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial li.facebook>a { background-image: url('data:image/svg+xml;utf8,'); } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial li.linkedin>a { background-image: url('data:image/svg+xml;utf8,'); } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial li.instagram>a { background-image: url('data:image/svg+xml;utf8,'); } body #f>.wp-block-group.ptnFooter .footerFooter .contactUs a { text-decoration: none; } body #f>.wp-block-group.ptnFooter .footerFooter .officeHours li { justify-content: space-between; gap: 1em; display: flex; } body #f>.wp-block-group.ptnFooter .footerFooter .copyrightLine { padding: 4em; grid-column-end: span var(--colCount); } body #f>.wp-block-group.ptnFooter .footerFooter .copyrightLine h2 { display: none; } /* [Media] Mobile */ @media screen and (max-width: 980px) { body #f>.wp-block-group.ptnFooter { margin-top: 0; } body #f>.wp-block-group.ptnFooter .footerFooter { grid-template-columns: 1fr 1fr; margin: 0; gap: 1em; } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial { transform: translateY(-2em); margin-bottom: -2em; grid-column-end: span 2; } body #f>.wp-block-group.ptnFooter .footerFooter .logoSocial ul { --iconSize: 4em; --gapSize: 1em; margin-top: 1em; } body #f>.wp-block-group.ptnFooter .footerFooter .officeHours { grid-column-end: span 2; } body #f>.wp-block-group.ptnFooter .footerFooter .copyrightLine { grid-column-end: span 2; } } /**/ /* [PTN ptnFirstVisit] */ .wp-block-group.ptnFirstVisit { background-image: url(asset/swoop_vertical_bkg.webp); background-size: 100% 100%; height: var(--ptnFirstVisit_height); overflow: hidden; position: relative; } .wp-block-group.ptnFirstVisit>* { position: absolute; } .wp-block-group.ptnFirstVisit>.main { justify-items: left !important; top: var(--ptnFirstVisit_mainTop); left: var(--ptnFirstVisit_mainLeft); z-index: 2; } .wp-block-group.ptnFirstVisit>.main>h2 { line-height: 1.5em !important; text-align: left !important; } .wp-block-group.ptnFirstVisit>.main>h2>* { font-size: 150%; font-style: normal; font-weight: 600; color: white; } .wp-block-group.ptnFirstVisit>.main>h2>:nth-child(3) /* Free */ { color: var(--color_BlueBrightenOO); } .wp-block-group.ptnFirstVisit>.main>ul { list-style: none; margin: 1em 0 1.5em; line-height: 2em; --bulletSize: 1.5em; } .wp-block-group.ptnFirstVisit>.main>ul>li { padding-left: calc( 1.3 * var(--bulletSize) ); color: white; position: relative; } .wp-block-group.ptnFirstVisit>.main>ul>li::before { background-image: url(asset/list_check_blueb_orange.svg); background-size: 100% 100%; background-repeat: no-repeat; width: var(--bulletSize); height: var(--bulletSize); content: ''; top: 0.2em; left: 0; display: block; position: absolute; } .wp-block-group.ptnFirstVisit>.main>.valuedAt { transform: translate(-18em, -2em); font-size: 80%; padding: 2.2em 2.5em; border: .5em solid var(--color_Orange); background-color: white; border-radius: var(--size_roundCornersL); left: 0; top: 0; text-align: center; position: absolute; box-shadow: .5em .5em 1em rgba(0,0,0,0.5); } .wp-block-group.ptnFirstVisit>.main>.valuedAt>* { color: var(--color_Blue); font-style: normal; font-weight: 500; } .wp-block-group.ptnFirstVisit>.main>.valuedAt>:nth-child(1) /* valued at */ { font-size: 150%; } .wp-block-group.ptnFirstVisit>.main>.valuedAt>:nth-child(3) /* price */ { font-weight: 600; color: var(--color_Orange); font-size: 400%; } .wp-block-group.ptnFirstVisit>figure.patient { width: 100%; height: 100%; z-index: 1; } .wp-block-group.ptnFirstVisit>figure.patient>img { top: 50%; left: 50%; transform: translate(-95%, -50%); width: auto; position: absolute; height: 120%; } /* [Media] Mobile */ @media screen and (max-width: 980px) { .wp-block-group.ptnFirstVisit { background-position: 50% 0; background-size: auto 100%; } .wp-block-group.ptnFirstVisit>.main>.wp-block-buttons { justify-items: center; display: grid; } .wp-block-group.ptnFirstVisit>figure.patient>img { display: none; transform: translate(-50%, -50%); height: 105%; } } /**/ /* [PTN ptnBadges] */ .wp-block-group.ptnBadges { padding: 2em 0; box-shadow: .5em .5em 1em rgba(0,0,0,0.2); z-index: 1; } .wp-block-group.ptnBadges>figure { padding: 0 var(--pageMarginsHorizontal); gap: 3em; align-items: center; display: flex; } .wp-block-group.ptnBadges>figure>* { flex-grow: 1; flex-shrink: 1; flex-basis: 0; } .wp-block-group.ptnBadgesA>figure>figure:nth-child(1) /* A rutgers */ { order: 1; } .wp-block-group.ptnBadgesA>figure>figure:nth-child(2) /* A AAD */ { order: 2; flex: 1.3 1.3 0; } .wp-block-group.ptnBadgesA>figure>figure:nth-child(3) /* A Uni Maryland */ { order: 5; } .wp-block-group.ptnBadgesA>figure>figure:nth-child(4) /* A Penn */ { order: 4; } .wp-block-group.ptnBadgesA>figure>figure:nth-child(5) /* A invisalign */ { flex: .5 .5 0; order: 3; } .wp-block-group.ptnBadgesB>figure>figure:nth-child(1) /* B aaid */ { flex: .8 .8 0; order: 4; } .wp-block-group.ptnBadgesB>figure>figure:nth-child(3) /* B bbb */ { flex: .45 .45 0; order: 6; } .wp-block-group.ptnBadgesB>figure>figure:nth-child(4) /* B Goog */ { order: 3; flex: .7 .7 0; } .wp-block-group.ptnBadgesB>figure>figure:nth-child(5) /* B Invisalign */ { order: 1; flex: 1.3 1.3 0; } .wp-block-group.ptnBadgesB>figure>figure:nth-child(6) /* B iba */ { order: 5; flex: 1.4 1.4 0; } /* [Media] Mobile */ @media screen and (max-width: 980px) { .wp-block-group.ptnBadges { margin-bottom: 4em; } .wp-block-group.ptnBadges>figure { gap: 1.5em; flex-wrap: wrap; } .wp-block-group.ptnBadgesA>figure>figure:nth-child(1) /* A rutgers */ { flex: 4 4 40%; } .wp-block-group.ptnBadgesA>figure>figure:nth-child(2) /* A AAD */ { flex: 2 2 40%; } .wp-block-group.ptnBadgesA>figure>figure:nth-child(3) /* A Uni Maryland */ { flex: 4 4 30%; } .wp-block-group.ptnBadgesA>figure>figure:nth-child(4) /* A Penn */ { flex: 4 4 25%; } .wp-block-group.ptnBadgesA>figure>figure:nth-child(5) /* A invisalign */ { flex: 1 1 13%; } .wp-block-group.ptnBadgesB>figure>figure:nth-child(1) /* B aaid */ { flex: 3 3 25%; } .wp-block-group.ptnBadgesB>figure>figure:nth-child(2) /* B topdent */ { flex: 3 3 20%; } .wp-block-group.ptnBadgesB>figure>figure:nth-child(3) /* B bbb */ { flex: 3 3 10%; } .wp-block-group.ptnBadgesB>figure>figure:nth-child(4) /* B Goog */ { flex: 2 2 20%; } .wp-block-group.ptnBadgesB>figure>figure:nth-child(5) /* B Invisalign */ { flex: 4 4 30%; } .wp-block-group.ptnBadgesB>figure>figure:nth-child(6) /* B iba */ { flex: 4 4 50%; } } /**/ /* [PTN ptnCtaTryUs] */ .wp-block-group.ptnCtaTryUs { text-align: center; padding: 2em var(--pageMarginsHorizontal); background-color: var(--color_BlueBrightenO); color: white; } .wp-block-group.ptnCtaTryUs>h2 { color: white !important; } .wp-block-group.ptnCtaTryUs>p { margin: 1em 0; } .wp-block-group.ptnCtaTryUs .callUsNow { font-size: 140%; font-weight: 600; gap: .5em; justify-content: center; display: flex; } /**/ /* [PTN ptnSvcThumbs] */ body #content .wp-block-group.ptnSvcThumbs { --thumbGalleryColumns: var(--home_ptnSvcThumbsColumns); justify-items: center; display: grid; } /**/ /* [PTN ptnCtaInvisalign] */ body #content .wp-block-group.ptnCtaInvisalign { --marginHorizontal: calc( 1.6 * var(--pageMarginsHorizontal) ); justify-items: left; padding: 2em 0; grid-template-columns: 1fr .9fr; display: grid; } body #content .wp-block-group.ptnCtaInvisalign h2 { margin-left: var(--pageMarginsHorizontal); margin-bottom: .8em; grid-column-start: 1; } body #content .wp-block-group.ptnCtaInvisalign .mainCopy { margin-left: var(--marginHorizontal); justify-items: left; display: grid; } body #content .wp-block-group.ptnCtaInvisalign .mainCopy .learnMore { margin-bottom: 4em; } body #content .wp-block-group.ptnCtaInvisalign>figure { grid-row-start: 1; grid-row-end: span 2; grid-column-start: 2; margin-right: var(--marginHorizontal); align-self: flex-end; } body #content .wp-block-group.ptnCtaInvisalign>.callToAction { padding: 2em var(--marginHorizontal); background-color: var(--color_Blue); grid-column-end: span 2; width: 100%; justify-items: center; display: grid; } body #content .wp-block-group.ptnCtaInvisalign>.callToAction * { color: white; } body #content .wp-block-group.ptnCtaInvisalign>.callToAction>.wp-block-buttons { padding: 1em; gap: 1em; display: flex; } /* [Media] Mobile */ @media screen and (max-width: 980px) { body #content .wp-block-group.ptnCtaInvisalign { grid-template-columns: 1fr; } body #content .wp-block-group.ptnCtaInvisalign>* { order: 10; } body #content .wp-block-group.ptnCtaInvisalign>h2 { order: 2; } body #content .wp-block-group.ptnCtaInvisalign>.mainCopy { margin: 0 !important; padding: 2em var(--pageMarginsHorizontal); background-image: linear-gradient(to bottom, var(--color_BlueBrightenOOOO) 0%, white 100%); } body #content .wp-block-group.ptnCtaInvisalign>h2, body #content .wp-block-group.ptnCtaInvisalign>figure, body #content .wp-block-group.ptnCtaInvisalign>.mainCopy { margin-left: var(--pageMarginsHorizontal); margin-right: var(--pageMarginsHorizontal); } body #content .wp-block-group.ptnCtaInvisalign>figure { order: 3; grid-column-start: auto; grid-column-end: auto; grid-row-start: auto; grid-row-end: auto; margin: 0; width: 100%; } body #content .wp-block-group.ptnCtaInvisalign>.callToAction { grid-column-start: auto; grid-column-end: auto; grid-row-start: auto; grid-row-end: auto; } body #content .wp-block-group.ptnCtaInvisalign>.mainCopy>.learnMore { justify-self: center; margin-bottom: 1em; } } /**/ /* [PTN ptnBeforeAndAfters] */ body #content .wp-block-group.ptnBeforeAndAfters { justify-items: center; padding: 2em var(--pageMarginsHorizontal) 3em; background-color: white; background-image: linear-gradient(to left, white 25%, var(--color_GrayLightenOOO) 100%); display: grid; overflow: hidden; position: relative; } body #content .wp-block-group.ptnBeforeAndAfters>* { z-index: 2; } body #content .wp-block-group.ptnBeforeAndAfters>h2>a { gap: 1.5ex; display: flex; font-size: 120%; font-family: fontb; text-align: center; text-decoration: none; margin-bottom: 1em; } body #content .wp-block-group.ptnBeforeAndAfters>h2>a>*:nth-child(1) { font-style: normal; font-family: fonta; } body #content .wp-block-group.ptnBeforeAndAfters>.bkg { opacity: .5; z-index: 1; width: 100%; height: 100%; position: absolute; } body #content .wp-block-group.ptnBeforeAndAfters>.bkg img { width: auto; height: 100%; top: 0; right: 0; position: absolute; } /**/ /* [PTN ptnSmileMakeovers] */ body #content .wp-block-group.ptnSmileMakeovers { padding: 1em var(--pageMarginsHorizontal) 3em; gap: 4em; align-items: center; grid-template-columns: .7fr 1fr .7fr; display: grid; } body #content .wp-block-group.ptnSmileMakeovers .copy { text-align: center; } body #content .wp-block-group.ptnSmileMakeovers .copy h2 { margin-bottom: 2em; } body #content .wp-block-group.ptnSmileMakeovers .copy p { margin-bottom: 1.5em; } body #content .wp-block-group.ptnSmileMakeovers .copy .wp-block-buttons { margin-bottom: 1.5em; justify-items: center; display: grid; } /* [Media] Mobile */ @media screen and (max-width: 980px) { body #content .wp-block-group.ptnSmileMakeovers { gap: 1em; grid-template-columns: 1fr; } body #content .wp-block-group.ptnSmileMakeovers .copy h2 { text-align: left; margin-bottom: .5em; } body #content .wp-block-group.ptnSmileMakeovers .copy p { text-align: left; } } /**/ /* [PTN ptnCtaPorcelainVeneers] */ body #content .wp-block-group.ptnCtaPorcelainVeneers { overflow: hidden; background-image: linear-gradient(to right, var(--color_Blue) 0%, var(--color_BlueBrightenOO) 200%); height: var(--ptnCtaPorcelainVeneers_height); width: 100%; position: relative; } body #content .wp-block-group.ptnCtaPorcelainVeneers .mainCopy { padding-right: var(--pageMarginsHorizontal); width: 38%; top: 50%; left: var(--ptnCtaPorcelainVeneers_mainCopyLeft); transform: translate(-50%,-50%); gap: 1.5em; display: grid; position: absolute; } body #content .wp-block-group.ptnCtaPorcelainVeneers .mainCopy .wp-block-buttons { justify-items: center; display: grid; } body #content .wp-block-group.ptnCtaPorcelainVeneers h2, body #content .wp-block-group.ptnCtaPorcelainVeneers p { color: white !important; } body #content .wp-block-group.ptnCtaPorcelainVeneers figure>img { top: 50%; left: 0; transform: translateY(-50%); height: 105%; width: auto; position: absolute; } /**/ /* [PTN ptnPatientReviews] */ body #content .wp-block-group.ptnPatientReviews { padding: 0 calc( .5 * var(--pageMarginsHorizontal) ) 2em; justify-items: center; display: grid; position: relative; overflow: hidden; } body #content .wp-block-group.ptnPatientReviews .mainHdr { padding: 2em 0; align-content: center; align-items: center; gap: 3em; display: flex; } body #content .wp-block-group.ptnPatientReviews .mainHdr figure { width: 12em; } body #content .wp-block-group.ptnPatientReviews .bkg { top: 0; left: 50%; z-index: -1; transform: translateX(-50%); width: 100%; height: 100%; position: absolute; } body #content .wp-block-group.ptnPatientReviews .bkg>img { width: auto; height: 100%; } /* [VARS] Desktop Wide */ @media screen and (min-width: 981px) and (min-aspect-ratio: 10/9) { body #content .wp-block-group.ptnPatientReviews .bkg>img { height: auto; width: 100%; } } /* [Media] Mobile */ @media screen and (max-width: 980px) { body #content .wp-block-group.ptnPatientReviews .mainHdr { flex-wrap: wrap; gap: 1em; padding: 3em var(--pageMarginsHorizontal); } body #content .wp-block-group.ptnPatientReviews .mainHdr>h2 { flex-basis: 100%; } body #content .wp-block-group.ptnPatientReviews .mainHdr>figure { flex: .8 .8 35%; } body #content .wp-block-group.ptnPatientReviews .mainHdr>.wp-block-buttons>.wp-block-button { justify-items: center; display: grid; } body #content .wp-block-group.ptnPatientReviews .bkg { width: 100%; height: 100%; } body #content .wp-block-group.ptnPatientReviews .bkg img { width: auto; height: 100%; } } /**/ /* [PTN ptnDentalVideos] */ body #content .wp-block-group.ptnDentalVideos { padding: 3em var(--pageMarginsHorizontal); background-color: var(--color_Blue); justify-items: center; display: grid; position: relative; overflow: hidden; } body #content .wp-block-group.ptnDentalVideos>h2.wp-block-heading { margin-bottom: 1em; } body #content .wp-block-group.ptnDentalVideos>h2.wp-block-heading>a { word-spacing: .25ex; text-transform: uppercase; font-weight: 600; text-decoration: none; color: white; } body #content .wp-block-group.ptnDentalVideos .vidBox { gap: 4em; grid-template-columns: repeat(var(--ptnDentalVideos_columnCount),1fr); display: grid; } body #content .wp-block-group.ptnDentalVideos .vidBox>.vidItem>.title { margin-bottom: 1em; justify-content: center; display: flex; } body #content .wp-block-group.ptnDentalVideos .vidBox>.vidItem>.title>a { font-weight: 500; text-decoration: none; text-transform: uppercase; font-size: 140%; color: white; } body #content .wp-block-group.ptnDentalVideos .vidBox>.vidItem>.entry-content { justify-items: center; display: grid; } body #content .wp-block-group.ptnDentalVideos p { width: var(--vidEntry_Size); margin: .5em 0; color: var(--color_BlueBrightenOOOO); } body #content .wp-block-group.ptnDentalVideos .cats { width: var(--vidEntry_Size); margin: .5em 0; gap: 1em; display: flex; } body #content .wp-block-group.ptnDentalVideos .cats a { color: white; } /* [VARS] Desktop Wide */ @media screen and (min-width: 981px) and (min-aspect-ratio: 10/9) { body #content .wp-block-group.ptnDentalVideos { --vidEntry_Size: 40em; } } /**/ /* [PTN ptnDentalNews] */ body #content .wp-block-group.ptnDentalNews { padding: 3em var(--pageMarginsHorizontal); } body #content .wp-block-group.ptnDentalNews>.wp-block-heading>a { text-transform: uppercase; text-decoration: none; font-weight: 600; display: block; } body #content .wp-block-group.ptnDentalNews>.dnBox { padding: 2em; gap: 4em; grid-template-columns: repeat(var(--ptnDentalNews_columnCount),1fr); display: grid; } body #content .wp-block-group.ptnDentalNews>.dnBox>.dnEntry { gap: 1em; display: grid; } body #content .wp-block-group.ptnDentalNews>.dnBox>.dnEntry>a.content { justify-items: center; text-decoration: none; gap: .75em; display: grid; } body #content .wp-block-group.ptnDentalNews>.dnBox>.dnEntry>a.content>.title { color: var(--color_Blue); font-weight: 600; font-size: 120%; text-transform: uppercase; } body #content .wp-block-group.ptnDentalNews>.dnBox>.dnEntry>a.content>.thumbnail { border-radius: var(--size_roundCornersS); width: 100%; height: var(--ptnDentalNews_itemSize); position: relative; overflow: hidden; } body #content .wp-block-group.ptnDentalNews>.dnBox>.dnEntry>a.content>.thumbnail>img { top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; } body #content .wp-block-group.ptnDentalNews>.dnBox>.dnEntry>.cats { justify-content: center; gap: .5em 2ex; flex-wrap: wrap; display: flex; } /**/ /* [PTN ptnOurGuarantee] */ body #content .wp-block-group.ptnOurGuarantee { overflow: hidden; height: var(--ptnOurGuarantee_height); width: 100%; background-image: linear-gradient(to bottom, white -20%, var(--color_GrayLightenOOO) 100%); background-color: var(--color_GrayLightenOOO); position: relative; } body #content .wp-block-group.ptnOurGuarantee .mainCopy { padding-left: var(--pageMarginsHorizontal); width: 38%; top: 50%; left: var(--ptnOurGuarantee_mainCopyLeft); transform: translate(-50%,-50%); gap: 1.5em; display: grid; position: absolute; } body #content .wp-block-group.ptnOurGuarantee .mainCopy .wp-block-buttons { justify-items: center; display: grid; } body #content .wp-block-group.ptnOurGuarantee figure>img { top: 50%; left: var(--pageMarginsHorizontal); transform: translate(-10%,-50%); height: 105%; width: auto; position: absolute; } /* [Media] Mobile */ @media screen and (max-width: 980px) { body #content .wp-block-group.ptnOurGuarantee { border-width: 5em 0; background: var(--color_BlueBrightenOO); } body #content .wp-block-group.ptnOurGuarantee .mainCopy { padding: 1.5em; width: 65%; left: 37%; gap: 1em; z-index: 3; } body #content .wp-block-group.ptnOurGuarantee .mainCopy::before /* bkg */ { z-index: -1; opacity: .7; background-color: white; border-radius: var(--size_roundCornersS); width: 100%; height: 100%; position: absolute; content: ''; } body #content .wp-block-group.ptnOurGuarantee figure>img { z-index: 2; right: -170%; left: auto; height: 120%; } } /**/ /* [PTN ptnGoogMap] */ body .wp-block-group.ptnGoogMap { height: var(--ptnGoogMap_height); width: 100%; overflow: hidden; position: relative; } body .wp-block-group.ptnGoogMap .map img { transform: translate(-50%,-55%); top: 50%; left: 50%; z-index: 1; width: auto; height: 120%; position: absolute; } body .wp-block-group.ptnGoogMap .popUp { top: 40%; left: 55%; width: calc( 1.1 * var(--ptnGoogMap_height) ); transform: translate(-50%,-50%); z-index: 2; position: absolute; } body .wp-block-group.ptnGoogMap .popUp figcaption { top: 68%; left: 50%; font-size: 80%; width: calc( .85 * var(--ptnGoogMap_height) ); transform: translate(-50%, -50%); position: absolute; } /* [Media] Mobile */ @media screen and (max-width: 980px) { body .wp-block-group.ptnGoogMap .popUp { left: 50%; width: calc( .8 * var(--ptnGoogMap_height) ); } body .wp-block-group.ptnGoogMap .popUp figcaption { font-size: 75%; left: 55%; width: calc( .80 * var(--ptnGoogMap_height) ); } body .wp-block-group.ptnGoogMap .map img { transform: translate(-47.5%,-58%); } } /**/ /* [PTN ptnContactGetStarted] */ body .wp-block-group.ptnContactGetStarted { background-color: white; overflow: hidden; height: var(--ptnContactGetStarted_height); width: var(--ptnContactGetStarted_width); justify-items: center; align-items: flex-end; display: flex; border-radius: var(--size_roundCornersS); box-shadow: .5em .5em 2em rgba(0,0,0,0.3); z-index: 3; position: relative; } body .wp-block-group.ptnContactGetStarted h2 { color: var(--color_Blue); font-weight: 500; align-self: center; top: 1em; left: 50%; white-space: nowrap; transform: translateX(-50%); position: absolute; } body .wp-block-group.ptnContactGetStarted figure { width: 100%; height: calc( 1 * var(--ptnContactGetStarted_height) ); overflow: hidden; align-self: flex-end; position: relative; } body .wp-block-group.ptnContactGetStarted figure img { width: auto; height: 90%; } body .wp-block-group.ptnContactGetStarted figure:nth-of-type(1) img { left: -5em; bottom: 0; position: absolute; } body .wp-block-group.ptnContactGetStarted figure:nth-of-type(2) img { bottom: 0; right: -1em; position: absolute; } body .wp-block-group.ptnContactGetStarted .wpcf7 form { width: 45%; left: 50%; top: 55%; transform: translate(-50%,-50%); z-index: 1; position: absolute; } body .wp-block-group.ptnContactGetStarted .wpcf7 form .fields { gap: .5em; display: grid; } body .wp-block-group.ptnContactGetStarted .wpcf7 form .input { border: .1em solid var(--color_Blue); border-radius: var(--size_roundCornersXS); box-shadow: .5em .5em 1em rgba(0,0,0,0.3); width: 100%; font-family: fontA; font-size: 100%; } body .wp-block-group.ptnContactGetStarted .wpcf7 form .field.submit { justify-self: center; } body .wp-block-group.ptnContactGetStarted .wpcf7 form .field.submit .input { margin-top: 1.5em; cursor: pointer; border: 0; border-radius: var(--size_roundCornersS); color: white; transition-duration: calc( .5 * var(--duration_baseTransition) ); background-color: var(--color_Blue); } body .wp-block-group.ptnContactGetStarted .wpcf7 form .field.submit .input:hover { color: white; background-color: var(--color_BlueBrightenO); } body .wp-block-group.ptnContactGetStarted .wpcf7 form .field.submit .input:active { background-color: var(--color_Orange); transform: translate(.2em,.2em); box-shadow: none; } body .wp-block-group.ptnContactGetStarted .wpcf7 .screen-reader-response { display: none; } body .wp-block-group.ptnContactGetStarted .wpcf7 .wpcf7-response-output { padding: .5em 3em; } /* [Media] Mobile */ @media screen and (max-width: 980px) { body .wp-block-group.ptnContactGetStarted { padding-top: 5em; } body .wp-block-group.ptnContactGetStarted h2 { font-size: 120%; width: 85%; text-align: center; white-space: normal; } body .wp-block-group.ptnContactGetStarted figure img { width: auto; height: 80%; } body .wp-block-group.ptnContactGetStarted figure:nth-of-type(1) img { left: -6em; } body .wp-block-group.ptnContactGetStarted figure:nth-of-type(2) img { right: -6em; } body .wp-block-group.ptnContactGetStarted .wpcf7 form { width: 55%; } body .wp-block-group.ptnContactGetStarted .wpcf7 form .fields { grid-template-columns: 1fr; display: grid; } body .wp-block-group.ptnContactGetStarted .wpcf7 form .fields .field.submit { grid-column-end: auto; } } /**/