/* General */ :root { --font-size: 16px; --max-width: 1200px; --side-margin: calc(var(--font-size) * 3); --side-margin-half: calc(var(--side-margin) / 2); --white: #FFFFFF; --light: #F1F1F1; --light-gray: #D9D9D9; --gray: #727272; --dark-gray: #616161; --dark: #232323; --psi-light: #D5A6BD; --nav-btn-svg-filter: invert(100%); --psi-light-svg: invert(96%) sepia(77%) saturate(870%) hue-rotate(281deg) brightness(89%) contrast(86%); --psi-dark-svg: invert(7%) sepia(54%) saturate(3953%) hue-rotate(310deg) brightness(90%) contrast(93%); --psi-dark: #4C1130; --wood-light: #886451; --wood-dark: #281D17; --standard-inset: inset 0px 1px 5px 0px rgba(131, 131, 131, 0.4); --standard-box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 3px 0 rgba(0, 0, 0, 0.19); --small-box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.2), 0 4px 4px 0 rgba(0, 0, 0, 0.19); } .inset-shadow { box-shadow: inset 0px 1px 5px 0px rgba(131, 131, 131, 0.6) } .white-background { background-color: var(--white) !important } .dark-burgundy { background-color: var(--psi-dark) } * { font-size: var(--font-size); font-family: 'Alata', Helvetica, Arial, sans-serif; } @font-face { font-family: Helvetica; src: local(Helvetica), local(Arial); font-size: 16px; line-height: 1.6; letter-spacing: 0.15px; word-spacing: 0px; font-weight: 400; } html { background-color: var(--psi-dark); } body { /* Fixed Height */ display: flex; flex-flow: column; height: 100%; background-color: var(--white); margin: 0; padding: 0; } main { /* Fill Remaining Height from */ flex-grow: 1; } picture { font-style: italic; } .m-0 { margin: 0 !important; } .c-60 { width: 60%; max-width: var(--max-width); } .container { display: flex; justify-content: center; margin-bottom: var(--side-margin-half); width: 100%; background-color: var(--light); } .hero-section { --gap-length: 2em; display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); grid-auto-rows: 1fr; gap: var(--gap-length); justify-items: center; align-items: center; width: 100%; max-width: var(--max-width); margin: 0 var(--side-margin); /* padding-bottom: 1.5em; */ } a.inline-link { text-decoration: none; color: var(--psi-dark); border-bottom: 2px dotted var(--psi-light); } a.inline-link:hover, a.inline-link:focus { border-style: solid; } .hero-section.reverse .tab-content { order: -1; } .hero-section:has(.tab-content) { margin-top: 1.5em; margin-bottom: 1.5em; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); } .hero-section:has(.tab-content) picture.illustration-image { align-self: start; } .hero-panel:has(p) { padding: 1em 2em 0; } .hero-panel p { padding: 1em 0; } .hero-title-one, .hero-title-two { font-size: calc(var(--font-size) * 3); font-family: 'EB Garamond', Georgia, 'Times New Roman', Times, serif; margin: 0; } .hero-title-one { color: var(--psi-dark); } .hero-title-two { color: var(--dark); } picture.illustration-image { display: flex; justify-content: center; } picture.illustration-image > img { height: auto; width: 480px; max-width: 100%; } .loading { background-image: url('/static/images/png/loading.png'); background-repeat: no-repeat; background-position: center; } a:hover picture, a:focus picture { transform: scale(1.01); } section.tab-content { display: flex; flex-direction: column; margin: 0 var(--side-margin); padding: 0; } section.tab-content p { margin: 0; color: var(--dark); text-align: left; padding: 1em 0; border-bottom: 2px solid #D1D1D1; } section.tab-content.page-text { margin: 0 calc(var(--side-margin) * 2); max-width: calc(var(--max-width) * 0.75); } section.tab-content.page-text > h2 { margin: 0.75em 0 0; padding-bottom: 0.1em; font-weight: 400; border-bottom: 3px double var(--psi-dark); } section.tab-content.page-text > p { border: none; } .panel .side-panel { display: flex; flex-direction: column; align-self: center; gap: 0.5em; margin: 0; padding: 0.5em var(--side-margin); } .side-panel .headings { text-align: center; margin: 0.5em auto; } .panel a.btn { color: var(--psi-dark); background-color: var(--light); border: 1px solid #D1D1D1; } .container .panel { display: flex; flex-direction: row; width: 100%; max-width: var(--max-width); } .service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 1fr; gap: 2em; justify-content: center; justify-items: stretch; width: 100%; padding: 2em var(--side-margin); background-color: var(--psi-dark); } .service-grid a { text-decoration: none; } .service-grid a:hover .grid-item, .service-grid a:focus .grid-item { box-shadow: var(--standard-inset); transform: scale(1.01); } .grid-item, .grid-item-content { font-size: calc(var(--font-size) * 1.25); } .grid-item { display: flex; flex-direction: column; color: var(--psi-dark); background-color: var(--light); border-radius: 1em; border: 1px solid var(--gray); padding: 0.5em; } .grid-item-title { font-size: calc(var(--font-size) * 1.5); color: var(--psi-dark); } .grid-item-content { color: var(--dark-gray); } .super-heading { display: block; width: fit-content; margin: 0 auto; } .super-heading > .headings { margin-bottom: 0.5em; font-size: calc(var(--font-size) * 2.5); font-weight: bold; text-align: center; font-family: 'EB Garamond', Georgia, 'Times New Roman', Times, serif; } .headings { width: 100%; max-width: fit-content; margin: 0; font-size: calc(var(--font-size) * 1.75); color: var(--psi-dark); font-family: 'Alata', Helvetica, Arial, sans-serif; } .headings.center { align-self: center; } span.name, span.phd { font-family: 'EB Garamond', Georgia, 'Times New Roman', Times, serif; } /* Navbar */ nav[role="navigation"] { overflow: hidden; position: -webkit-sticky; /* Safari */ position: sticky; top: 0; padding: 0 var(--side-margin); display: flex; justify-content: flex-end; gap: 1em; background: linear-gradient(0deg, rgb(250, 250, 250) 0%, #fff); border-bottom: 1px solid var(--light); z-index: 2; } /* Style the navigation bar links */ nav[role="navigation"] a { display: flex; flex-direction: row-reverse; align-items: center; gap: 0.25em; color: var(--dark); text-wrap: nowrap; text-overflow: ellipsis; text-decoration: none; text-align: center; margin: 0.5em 0; } nav[role="navigation"] .nav-btn { --nav-btn-padding: 0.5em; border-radius: var(--nav-btn-padding); padding-top: calc(var(--nav-btn-padding) / 2); padding-right: var(--nav-btn-padding); padding-bottom: calc(var(--nav-btn-padding) / 2); padding-left: calc(var(--nav-btn-padding) / 3); } nav[role="navigation"] .nav-btn.appt > img { -webkit-filter: var(--nav-btn-svg-filter); /* Safari/Chrome */ filter: var(--nav-btn-svg-filter); } nav[role="navigation"] .nav-btn.appt { color: var(--light); background-color: var(--psi-dark); border: 1px solid var(--psi-light); } nav[role="navigation"] .nav-btn.call { background-color: #F1F1F1; border: 1px solid #D1D1D1; } nav[role="navigation"] a > .link-label { font-size: calc(var(--font-size) * 1.75); color: var(--dark); } nav[role="navigation"] a > .link-label.phd { color: var(--psi-dark); } .nav_anchor { display: block; position: relative; top: -80px; visibility: hidden; } .hamburger-container { display: block; align-self: center; width: 40px; height: 40px; } input.hamburger-control, svg.hamburger-icon { display: block; position: relative; } input.hamburger-control { cursor: pointer; z-index: 10; opacity: 0; width: 100%; height: 100%; margin: 0; } svg.hamburger-icon { z-index: 9; top: -100%; } .hamburger-container:has(input:hover) svg.hamburger-icon { opacity: 0.85; } .hamburger-container:has(input:checked) .line { transition: y 300ms ease-in 300ms, rotate 300ms ease-in, opacity 0ms 300ms; transform-origin: center; } .hamburger-container:has(input:checked) .line { transition: y 300ms ease-in 300ms, rotate 300ms ease-in 300ms, opacity 0ms; } .hamburger-container:has(input:checked) .top, .hamburger-container:has(input:checked) .bottom { transform: translateY(45); } .hamburger-container:has(input:checked) .top { transform: translateY(20px); rotate: 45deg; } .hamburger-container:has(input:checked) .middle { opacity: 0; } .hamburger-container:has(input:checked) .bottom { transform: translateY(-20px); rotate: -45deg; } #menu-list { display: flex; flex-direction: column; justify-content: flex-start; overflow: scroll; color: var(--dark); background-color: var(--light); box-shadow: var(--standard-box-shadow); -webkit-font-smoothing: antialiased; /* Font smoothing in Safari */ position: fixed; top: 0; right: 0; margin: 0; --padding-top: 4em; padding: var(--padding-top) calc(var(--padding-top) / 2); list-style: none; width: 300px; height: calc(100dvh - calc(var(--padding-top) * 2)); min-width: 25%; max-width: fit-content; transform-origin: 0% 0%; transform: translateX(100%); transition: transform 500ms cubic-bezier(0.77, 0.2, 0.05, 1.0); } #menu-list > li { border-bottom: 1px solid var(--light-gray); } #menu-list > li:first-child { border-top: 2px double var(--gray); } #menu-list > li:last-child { display: flex; flex-direction: column; align-items: center; border: none; margin-top: auto; padding: 1em 0.5em 0; border-top: 2px double var(--psi-dark); } #menu-list > li:last-child > span { text-wrap: nowrap; } #menu-list > li span.ctt-text { font-size: calc(var(--font-size) * 1.25); font-weight: bold; color: var(--psi-dark); } #menu-list > li span.ctt-dr { font-weight: bold; font-size: calc(var(--font-size) * 1.25); font-family: 'EB Garamond', Georgia, 'Times New Roman', Times, serif; color: var(--dark); } #menu-list > li > a { font-size: calc(var(--font-size) * 1.5); transition: all 200ms ease-in; } #menu-list > li > a:hover, #menu-list > li > a:focus { transform: none; color: var(--psi-dark); border-left: 3px solid var(--light-gray); padding-left: 0.5em; transition: padding 200ms ease-in, border 200ms ease-in; } .hamburger-container:has(input:checked) #menu-list { transform: none; } a:focus-visible, button:focus-visible, .hamburger-container:focus-within { outline: 2px solid var(--psi-light); outline-offset: -2px; } a.btn:hover, a.btn:focus, a.nav-btn:hover, a.nav-btn:focus { box-shadow: var(--standard-box-shadow); } a.nav-btn:active { box-shadow: var(--standard-inset); } a.nav-btn.appt:hover > img, a.nav-btn.appt:focus > img { -webkit-filter: var(--psi-light-svg); /* Safari/Chrome */ filter: var(--psi-light-svg); } a.nav-btn.appt:hover, a.nav-btn.appt:focus { color: var(--psi-light); } a.nav-btn.call:hover > img, a.nav-btn.call:focus > img { -webkit-filter: var(--psi-dark-svg); filter: var(--psi-dark-svg); } a.nav-btn.call:hover, a.nav-btn.call:focus { color: var(--psi-dark); } nav[role="navigation"] a:first-child { justify-self: start; margin-right: auto; flex-direction: row; } nav[role="navigation"] a:first-child > .banner-logo-wrapper { display: flex; align-items: center; background-color: var(--psi-dark); border-radius: 4px; margin-right: 6px; } nav[role="navigation"] a:first-child > .banner-logo-wrapper > img { display: inline; margin: 0; padding: 3px; } nav[role="navigation"] a:first-child:hover { transform: scale(1.005); } nav[role="navigation"] img { display: block; padding: 0px; margin: 6px; } nav[role="navigation"] a > img #logo_icon { height: 400px; width: 400px; display: block; margin: 6px 2px 2px 6px; } /* Link "Buttons" */ a.btn { --side-length: 1em; display: block; align-self: center; background-color: var(--psi-dark); padding: var(--side-length) calc(var(--side-length) * 1.5); margin: 1em auto; width: fit-content; border-radius: 4px; cursor: pointer; text-decoration: none; text-wrap: nowrap; font-size: calc(var(--font-size) * 1.25); color: var(--light); } @media screen and (max-width: 960px) { nav[role="navigation"] a .optional-text, header li.header-item:first-child::before, header > ul > li.header-item { display: none; } } @media screen and (max-width: 770px) { nav[role="navigation"] a .link-label, nav[role="navigation"] img#logo_text { display: none; } } /* Mobile styling (phones, tablets) */ @media screen and (max-device-width: 960px) and (-webkit-min-device-pixel-ratio: 2) { .c-60 { width: calc(100% - calc(var(--side-margin-half) * 2)) } .hero-section:has(.tab-content) { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); grid-auto-rows: max-content; margin: 0; padding-bottom: var(--side-margin-half); } section.hero-section { grid-template-rows: min-content; grid-template-columns: 1fr; margin: 0; } .hero-section.reverse .tab-content { order: 0; } section.tab-content { margin: 0 var(--side-margin-half) var(--side-margin-half); } .reverse section.tab-content { margin: 0 var(--side-margin-half); } section.tab-content.page-text { margin: 0 var(--side-margin-half) var(--side-margin-half); } .service-grid { gap: var(--side-margin-half); padding: var(--side-margin-half); } nav[role="navigation"] { padding: 0 var(--side-margin-half); gap: 0.5em; } nav[role="navigation"] a { gap: 0; } /* Hide For Mobile Browsers */ nav[role="navigation"] a .optional-text, nav[role="navigation"] a .link-label, header li.header-item:first-child::before, header > ul > li.header-item { display: none; } header li.header-item:first-child { display: block; } } @media screen and (max-device-width: 560px) and (-webkit-min-device-pixel-ratio: 2) { .container { margin-bottom: 0; } .hero-section { grid-auto-rows: auto; } .container .panel { flex-direction: column; } .service-grid { width: auto; } footer .col:has(ul) { display: flex; justify-content: center; text-align: center; } /* Hide For Mobile Browsers */ nav[role="navigation"] img#logo_text { display: none; } }