/* ===== index.html styles ===== */
:root {
--navy: #071521;
--navy-soft: #0d2235;
--blue: #1f6f9f;
--blue-light: #6bb6d6;
--gold: #c99a3e;
--gray-50: #f7f9fb;
--gray-100: #eef2f5;
--gray-300: #cbd5df;
--gray-600: #667687;
--gray-800: #243447;
--white: #ffffff;
--shadow: 0 18px 45px rgba(7, 21, 33, 0.14);
--header-shadow: 0 8px 24px rgba(7, 21, 33, 0.08);
--gold-shadow: 0 12px 24px rgba(201, 154, 62, 0.28);
--radius: 18px;
--danger: #b42318;
--max-width: 1180px;
--substation-image: url("images/Substation.webp");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: var(--gray-800);
line-height: 1.6;
background: var(--white);
}
a {
color: inherit;
text-decoration: none;
}
.contact p a[href="request-a-quote.html"] {
text-decoration: underline;
}
img {
max-width: 100%;
display: block;
}
.container {
width: min(100% - 40px, var(--max-width));
margin: 0 auto;
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: rgba(255,255,255,0.75);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(203, 213, 223, 0.75);
box-shadow: var(--header-shadow);
}
.site-header::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--blue), var(--gold));
}
.nav {
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: 14px 0;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-weight: 800;
letter-spacing: 0.02em;
color: var(--navy);
}
.logo-mark {
--logo-image-size: 42px;
width: calc(var(--logo-image-size) + 6px);
height: calc(var(--logo-image-size) + 6px);
border-radius: 12px;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
display: grid;
place-items: center;
box-shadow: 0 8px 22px rgba(7, 21, 33, 0.22);
border: 1px solid #efc571;
flex-shrink: 0;
}
.logo-image {
width: var(--logo-image-size);
height: var(--logo-image-size);
display: block;
}
.logo-text span {
display: block;
line-height: 1.05;
}
.logo-text small {
display: block;
color: var(--gray-600);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.2;
text-transform: none;
margin-top: 3px;
white-space: nowrap;
}
.nav-links {
display: flex;
align-items: center;
gap: 22px;
color: var(--gray-800);
font-size: 0.95rem;
font-weight: 700;
}
.nav-links a {
transition: color 0.2s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
color: var(--blue);
}
.nav-item {
position: relative;
}
.nav-dropdown-trigger {
align-items: center;
display: inline-flex;
gap: 6px;
}
.nav-dropdown-trigger::after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
content: "";
margin-top: 2px;
}
.nav-dropdown {
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(203, 213, 223, 0.9);
border-radius: 8px;
box-shadow: 0 18px 38px rgba(7, 21, 33, 0.16);
display: grid;
gap: 2px;
left: 50%;
min-width: 190px;
opacity: 0;
padding: 8px;
pointer-events: none;
position: absolute;
top: calc(100% + 14px);
transform: translate(-50%, -6px);
transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
visibility: hidden;
z-index: 80;
}
.nav-dropdown::before {
content: "";
height: 14px;
left: 0;
position: absolute;
right: 0;
top: -14px;
}
.nav-dropdown a {
border-radius: 6px;
color: var(--gray-800);
padding: 9px 10px;
white-space: nowrap;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
background: rgba(201, 154, 62, 0.12);
color: var(--navy);
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
visibility: visible;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
font-weight: 800;
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
white-space: nowrap;
}
.btn:hover {
transform: translateY(-2px);
}
.btn-primary {
background: var(--gold);
color: var(--navy);
box-shadow: var(--gold-shadow);
}
.btn-primary:hover {
background: #d9aa50;
}
.btn-secondary {
background: transparent;
color: var(--white);
border-color: rgba(255,255,255,0.45);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.8);
}
.hero {
position: relative;
min-height: 690px;
display: flex;
align-items: center;
overflow: hidden;
color: var(--white);
background:
linear-gradient(
90deg,
rgba(7, 21, 33, 0.96) 0%,
rgba(7, 21, 33, 0.84) 34%,
rgba(7, 21, 33, 0.46) 58%,
rgba(7, 21, 33, 0.12) 100%
),
url("images/datacenterinside.webp") center center / cover no-repeat;
}
.hero::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 110px;
background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 760px;
padding: 105px 0 130px;
margin-left: max(20px, calc((100vw - var(--max-width)) / 2));
margin-right: auto;
}
.eyebrow {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
color: var(--gold);
text-transform: uppercase;
font-size: 0.82rem;
font-weight: 900;
letter-spacing: 0.18em;
margin-bottom: 24px;
}
.eyebrow::after {
content: "";
width: 72px;
height: 2px;
background: linear-gradient(90deg, var(--gold), rgba(201, 154, 62, 0));
margin-top: 10px;
}
h1 {
font-size: clamp(2.7rem, 5.7vw, 5.6rem);
line-height: 0.98;
letter-spacing: -0.055em;
margin-bottom: 20px;
}
.hero-subhead {
display: block;
max-width: 720px;
color: rgba(255,255,255,0.92);
font-size: clamp(1.35rem, 2.6vw, 2.2rem);
line-height: 1.18;
font-weight: 700;
letter-spacing: -0.025em;
margin-bottom: 28px;
}
.hero p {
max-width: 650px;
color: rgba(255,255,255,0.82);
font-size: clamp(1.02rem, 2vw, 1.22rem);
margin-bottom: 34px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.hero-card-row {
position: relative;
z-index: 2;
margin-top: -82px;
}
.stats-card {
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 26px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
border: 1px solid rgba(203, 213, 223, 0.7);
}
.stat {
padding: 8px 16px;
border-right: 1px solid var(--gray-100);
}
.stat:last-child {
border-right: 0;
}
.stat strong {
display: block;
color: var(--navy);
font-size: 1.35rem;
line-height: 1.1;
margin-bottom: 6px;
}
.stat span {
color: var(--gray-600);
font-size: 0.95rem;
}
section {
padding: 92px 0;
}
.section-header {
max-width: 820px;
margin-bottom: 42px;
}
.section-kicker {
color: var(--blue);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 900;
margin-bottom: 10px;
}
h2 {
color: var(--navy);
font-size: clamp(2rem, 3.5vw, 3.25rem);
line-height: 1.08;
letter-spacing: -0.035em;
margin-bottom: 16px;
}
.section-header p,
.about-copy p {
color: var(--gray-600);
font-size: 1.08rem;
}
.section-header a {
color: var(--blue);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.section-header a:hover {
color: var(--navy);
}
.about {
background:
linear-gradient(135deg, #fffaf1 0%, #f7f9fb 58%, #eef4f9 100%);
color: var(--gray-800);
border-top: 1px solid rgba(203, 213, 223, 0.65);
border-bottom: 1px solid rgba(203, 213, 223, 0.65);
}
.about h2 {
color: var(--navy);
}
.about-copy p {
color: var(--gray-600);
}
.about .section-kicker {
color: var(--blue);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
.about-card {
background: var(--white);
border: 1px solid rgba(203, 213, 223, 0.7);
border-radius: 28px;
padding: 40px;
box-shadow: var(--shadow);
}
.about-card h3 {
color: var(--navy);
font-size: 1.5rem;
line-height: 1.2;
margin-bottom: 18px;
}
.about-list {
list-style: none;
display: grid;
gap: 14px;
color: var(--gray-700);
}
.about-list li {
position: relative;
padding-left: 28px;
}
.about-list li::before {
content: "\2713";
position: absolute;
left: 0;
color: var(--blue);
font-weight: 900;
}
.about-copy p + p {
margin-top: 16px;
}
.services {
background: linear-gradient(180deg, #f2f6fa 0%, #eaf1f7 100%);
}
.service-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.service-card {
background: var(--white);
border: 1px solid rgba(203, 213, 223, 0.7);
border-radius: var(--radius);
padding: 32px;
min-height: 360px;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow);
border-color: rgba(31, 111, 159, 0.35);
}
.icon {
width: 56px;
height: 56px;
border-radius: 16px;
display: grid;
place-items: center;
background: rgba(31, 111, 159, 0.1);
color: var(--blue);
margin-bottom: 24px;
font-size: 1.55rem;
}
.service-card h3 {
color: var(--navy);
font-size: 1.35rem;
line-height: 1.2;
margin-bottom: 13px;
}
.service-card p {
color: var(--gray-600);
margin-bottom: 20px;
}
.service-card ul {
list-style: none;
display: grid;
gap: 8px;
color: var(--gray-800);
font-size: 0.95rem;
}
.service-card li {
position: relative;
padding-left: 20px;
}
.service-card li::before {
content: "";
position: absolute;
left: 0;
top: 0.65em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--gold);
}
.service-card-link {
color: inherit;
display: flex;
flex-direction: column;
height: 100%;
}
.service-card-link:focus-visible {
outline: 3px solid rgba(31, 111, 159, 0.45);
outline-offset: 5px;
}
.service-card-cta {
align-self: flex-start;
color: var(--blue);
font-size: 0.9rem;
font-weight: 900;
margin-top: auto;
padding-top: 22px;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.quote {
background:
linear-gradient(90deg, rgba(7, 21, 33, 0.78), rgba(13, 34, 53, 0.64)),
var(--substation-image) center/cover no-repeat;
color: var(--white);
padding: 86px 0;
}
.quote-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 42px;
}
.quote-copy {
max-width: 720px;
}
.quote-action {
display: grid;
gap: 12px;
justify-items: end;
text-align: right;
flex: 0 1 520px;
}
.quote-action span {
max-width: 520px;
color: rgba(255,255,255,0.72);
font-size: 0.95rem;
line-height: 1.7;
margin-top: 4px;
}
.quote h2 {
color: var(--white);
margin-bottom: 12px;
}
.quote p {
color: rgba(255,255,255,0.82);
max-width: 690px;
font-size: 1.08rem;
margin-bottom: 26px;
}
.quote-copy a {
color: var(--white);
font-weight: 800;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.quote-copy a:hover {
color: var(--gold);
}
.contact {
background: linear-gradient(180deg, #f7f9fb 0%, #eef3f7 100%);
color: var(--gray-800);
border-top: 1px solid rgba(203, 213, 223, 0.65);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 42px;
align-items: start;
}
.contact-summary {
list-style: none;
display: grid;
gap: 16px;
color: var(--gray-600);
margin-top: 28px;
}
.contact-summary strong {
color: var(--navy);
display: block;
}
.contact-form {
background: var(--gray-50);
border: 1px solid rgba(203, 213, 223, 0.7);
border-radius: var(--radius);
padding: 28px;
box-shadow: 0 18px 40px rgba(7, 21, 33, 0.08);
}
.contact-form h3 {
color: var(--navy);
font-size: 1.35rem;
margin-bottom: 16px;
}
.contact-form .field {
margin-bottom: 14px;
}
.contact-form label,
.contact-form .label {
margin-bottom: 6px;
}
.contact-form textarea {
min-height: 104px;
}
.contact-form .contact-submit-row {
justify-content: flex-start;
margin-top: 18px;
}
.contact-form .contact-submit-row button {
min-width: 180px;
}
.site-footer {
background: var(--navy);
color: rgba(255,255,255,0.75);
padding: 34px 0;
}
.footer-inner {
display: flex;
justify-content: space-between;
gap: 20px;
align-items: center;
font-size: 0.92rem;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.footer-links a:hover {
color: var(--white);
}
.thank-you-page {
min-height: calc(100vh - 144px);
background: linear-gradient(180deg, #f7f9fb 0%, #eef3f7 100%);
padding-top: 76px;
display: grid;
align-items: center;
}
.thank-you-section {
padding: 92px 0;
}
.thank-you-content {
max-width: 760px;
}
.thank-you-content h1 {
color: var(--navy);
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1.02;
letter-spacing: 0;
margin-bottom: 18px;
}
.thank-you-content p {
color: var(--gray-600);
font-size: 1.12rem;
max-width: 620px;
margin-bottom: 30px;
}
.thank-you-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.policy-page {
padding-top: 76px;
background: linear-gradient(180deg, #f2f6fa 0%, #eaf1f7 100%);
min-height: 100vh;
}
.policy-hero {
position: relative;
overflow: hidden;
color: var(--white);
background:
linear-gradient(
90deg,
rgba(7, 21, 33, 0.96),
rgba(7, 21, 33, 0.86) 42%,
rgba(7, 21, 33, 0.62) 72%,
rgba(7, 21, 33, 0.38)
),
var(--substation-image) center / cover no-repeat;
padding: 92px 0 110px;
}
.policy-hero::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 70px;
background: linear-gradient(to top, #f2f6fa, rgba(242, 246, 250, 0));
}
.policy-hero-content {
position: relative;
z-index: 1;
max-width: 860px;
}
.policy-hero h1 {
font-size: clamp(2.5rem, 5.4vw, 5rem);
line-height: 1;
letter-spacing: -0.055em;
margin-bottom: 18px;
}
.policy-hero p {
max-width: 700px;
color: rgba(255, 255, 255, 0.82);
font-size: clamp(1.02rem, 2vw, 1.2rem);
}
.policy-content {
width: min(100% - 40px, 980px);
margin: -70px auto 92px;
position: relative;
z-index: 2;
}
.policy-card {
background: var(--white);
border: 1px solid rgba(203, 213, 223, 0.75);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 42px;
}
.policy-meta {
color: var(--gray-600);
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 30px;
}
.policy-section {
padding: 0;
margin-top: 32px;
}
.policy-section:first-of-type {
margin-top: 0;
}
.policy-section h2 {
color: var(--navy);
font-size: clamp(1.35rem, 2.4vw, 1.85rem);
line-height: 1.18;
letter-spacing: -0.015em;
margin-bottom: 12px;
padding-top: 4px;
}
.policy-section h3 {
color: var(--navy);
font-size: 1.04rem;
line-height: 1.3;
margin: 20px 0 8px;
}
.policy-section p,
.policy-section li {
color: var(--gray-800);
font-size: 1rem;
line-height: 1.72;
}
.policy-section p + p {
margin-top: 12px;
}
.policy-section ul {
display: grid;
gap: 8px;
margin: 10px 0 0;
padding-left: 22px;
}
.policy-section a {
color: var(--blue);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.policy-section a:hover {
color: var(--navy);
}
.policy-contact {
margin-top: 12px;
padding-left: 0;
list-style: none;
color: var(--gray-800);
line-height: 1.7;
}
/* ===== study breakout page styles ===== */
.study-page {
background: var(--white);
padding-bottom: 96px;
padding-top: 76px;
}
.study-page h2,
.study-page h3,
.study-hero h1 {
letter-spacing: 0;
}
.study-hero {
position: relative;
color: var(--white);
display: flex;
align-items: center;
min-height: 560px;
overflow: hidden;
padding: 96px 0 118px;
}
.study-hero-substation {
background:
linear-gradient(
90deg,
rgba(7, 21, 33, 0.96) 0%,
rgba(7, 21, 33, 0.86) 42%,
rgba(7, 21, 33, 0.52) 74%,
rgba(7, 21, 33, 0.28) 100%
),
var(--substation-image) center / cover no-repeat;
}
.study-hero-datacenter {
background:
linear-gradient(
90deg,
rgba(7, 21, 33, 0.96) 0%,
rgba(7, 21, 33, 0.86) 42%,
rgba(7, 21, 33, 0.52) 74%,
rgba(7, 21, 33, 0.28) 100%
),
url("images/datacenterinside.webp") center / cover no-repeat;
}
.study-hero::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 76px;
background: linear-gradient(to top, var(--white), rgba(255, 255, 255, 0));
}
.study-hero-content {
position: relative;
z-index: 1;
max-width: 780px;
}
.breadcrumb-link {
color: rgba(255, 255, 255, 0.82);
display: inline-flex;
font-size: 0.86rem;
font-weight: 800;
margin-bottom: 18px;
text-decoration: underline;
text-underline-offset: 4px;
}
.breadcrumb-link:hover {
color: var(--white);
}
.study-hero h1 {
font-size: clamp(2.45rem, 5.2vw, 5rem);
line-height: 1;
margin-bottom: 22px;
max-width: 820px;
}
.study-hero p {
color: rgba(255, 255, 255, 0.88);
font-size: clamp(1.03rem, 1.8vw, 1.2rem);
max-width: 720px;
}
.study-section {
padding: 86px 0;
}
.study-band {
background: linear-gradient(180deg, #f7f9fb 0%, #eef4f9 100%);
border-bottom: 1px solid rgba(203, 213, 223, 0.65);
border-top: 1px solid rgba(203, 213, 223, 0.65);
}
.study-two-column {
align-items: center;
display: grid;
gap: 48px;
grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
}
.study-copy {
max-width: 760px;
}
.study-copy p {
color: var(--gray-600);
font-size: 1.04rem;
line-height: 1.76;
}
.study-copy p + p {
margin-top: 16px;
}
.study-panel,
.study-callout,
.study-diagram-card,
.info-card,
.process-card {
background: var(--white);
border: 1px solid rgba(203, 213, 223, 0.76);
border-radius: 16px;
box-shadow: 0 16px 38px rgba(7, 21, 33, 0.1);
}
.study-panel,
.study-callout {
padding: 32px;
}
.study-panel h3,
.study-callout h3,
.info-card h3,
.process-card h3 {
color: var(--navy);
font-size: 1.22rem;
line-height: 1.25;
margin-bottom: 12px;
}
.study-callout {
background: linear-gradient(135deg, #fffaf1 0%, #ffffff 68%);
border-color: rgba(201, 154, 62, 0.34);
}
.study-callout p,
.info-card p,
.process-card p,
.study-diagram-card figcaption {
color: var(--gray-600);
line-height: 1.7;
}
.check-list {
display: grid;
gap: 12px;
list-style: none;
}
.check-list li {
color: var(--gray-800);
line-height: 1.62;
padding-left: 24px;
position: relative;
}
.check-list li::before {
background: var(--gold);
border-radius: 50%;
content: "";
height: 8px;
left: 0;
position: absolute;
top: 0.72em;
width: 8px;
}
.info-grid {
display: grid;
gap: 22px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.standards-grid,
.fault-type-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.info-card {
padding: 26px;
}
.process-grid {
display: grid;
gap: 22px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.process-card {
padding: 28px;
}
.process-card span {
color: var(--blue);
display: block;
font-size: 0.82rem;
font-weight: 900;
letter-spacing: 0.12em;
margin-bottom: 14px;
}
.study-diagram-card {
margin: 0;
overflow: hidden;
padding: 20px;
}
.compact-diagram-card {
align-self: stretch;
display: grid;
align-content: center;
}
.study-diagram-card figcaption {
border-top: 1px solid rgba(203, 213, 223, 0.68);
font-size: 0.94rem;
margin-top: 16px;
padding-top: 14px;
}
.technical-diagram {
display: block;
height: auto;
width: 100%;
}
.technical-diagram text {
fill: var(--navy);
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
font-weight: 800;
}
.diagram-lines line,
.diagram-lines path,
.coord-lines line,
.axis line {
fill: none;
stroke: #43536a;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 5;
}
.diagram-impedance path {
fill: none;
stroke: #43536a;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 5;
}
.ground-symbol line {
stroke: #43536a;
stroke-linecap: round;
stroke-width: 4;
}
.fault-marks line {
stroke: #43536a;
stroke-linecap: round;
stroke-width: 5;
}
.fault-marks circle {
fill: var(--white);
stroke: #43536a;
stroke-width: 4;
}
.fault-bolt {
fill: none;
stroke: var(--danger);
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 9;
}
.diagram-labels text {
font-size: 24px;
}
.breaker rect {
fill: var(--white);
stroke: #111827;
stroke-width: 4;
}
.breaker text {
font-size: 20px;
text-anchor: middle;
}
.breaker.opens rect {
animation: breakerTrip 2.8s ease-in-out infinite;
fill: #f04438;
}
.fault-star path {
animation: faultFlash 1.2s ease-in-out infinite;
fill: #f4b72f;
stroke: var(--danger);
stroke-width: 3;
}
.fault-star text {
font-size: 28px;
}
.trip-pulse circle {
animation: tripPulse 2.8s ease-out infinite;
fill: none;
opacity: 0;
stroke: var(--danger);
stroke-width: 5;
}
.trip-pulse circle + circle {
animation-delay: 0.25s;
}
.grid-lines line {
stroke: rgba(102, 118, 135, 0.3);
stroke-width: 2;
}
.curve {
fill: none;
stroke-linecap: round;
stroke-width: 7;
}
.downstream-curve {
stroke: var(--blue);
}
.upstream-curve {
stroke: var(--gold);
}
.inrush-curve,
.maintenance-curve {
fill: none;
stroke: #2f855a;
stroke-dasharray: 10 10;
stroke-linecap: round;
stroke-width: 6;
}
.coord-margin,
.arcing-current-line {
stroke: var(--danger);
stroke-dasharray: 8 8;
stroke-width: 4;
}
.normal-point {
fill: var(--gold);
}
.maintenance-point {
fill: #2f855a;
}
.arc-conductors rect {
fill: #c6ccd4;
stroke: #6f7b88;
stroke-width: 3;
}
.arc-core path {
fill: url(#arcGlow);
stroke: #f4b72f;
stroke-width: 2;
}
.pressure-waves path {
fill: none;
stroke: var(--blue-light);
stroke-linecap: round;
stroke-width: 6;
}
.debris circle,
.debris path {
fill: #111827;
opacity: 0.86;
}
.vapor-cloud ellipse {
fill: rgba(102, 118, 135, 0.26);
stroke: rgba(102, 118, 135, 0.24);
stroke-width: 2;
}
.arc-labels text {
font-size: 21px;
}
.text-link {
color: var(--blue);
display: inline-flex;
font-weight: 900;
margin-top: 24px;
text-decoration: underline;
text-underline-offset: 4px;
}
.text-link:hover {
color: var(--navy);
}
.references-section {
background: var(--navy);
color: var(--white);
}
.references-section h2,
.references-section .section-kicker {
color: var(--white);
}
.reference-list {
display: grid;
gap: 14px;
list-style: none;
margin-top: 24px;
max-width: 980px;
}
.reference-list li {
color: rgba(255, 255, 255, 0.78);
line-height: 1.7;
padding-left: 24px;
position: relative;
}
.reference-list li::before {
background: var(--gold);
border-radius: 50%;
content: "";
height: 8px;
left: 0;
position: absolute;
top: 0.75em;
width: 8px;
}
.reference-list a {
color: var(--white);
font-weight: 900;
text-decoration: underline;
text-underline-offset: 4px;
}
@keyframes breakerTrip {
0%, 34%, 100% {
fill: var(--white);
}
42%, 74% {
fill: #f04438;
}
}
@keyframes faultFlash {
0%, 100% {
transform: scale(0.92);
transform-origin: 514px 364px;
}
45% {
transform: scale(1.08);
transform-origin: 514px 364px;
}
}
@keyframes tripPulse {
0%, 40% {
opacity: 0;
transform: scale(0.6);
transform-origin: 460px 372px;
}
52% {
opacity: 0.75;
}
82%, 100% {
opacity: 0;
transform: scale(1.25);
transform-origin: 460px 372px;
}
}
@media (max-width: 920px) {
.quote-inner {
flex-direction: column;
align-items: flex-start;
}
.quote-action {
flex: 0 1 auto;
justify-items: start;
text-align: left;
}
.quote-action .btn {
width: auto;
}
.footer-inner {
align-items: flex-start;
flex-direction: column;
}
.hero {
min-height: 620px;
}
.stats-card,
.about-grid,
.service-grid,
.quote-inner,
.contact-grid,
.study-two-column,
.info-grid,
.standards-grid,
.fault-type-grid,
.process-grid {
grid-template-columns: 1fr;
}
.stat {
border-right: 0;
border-bottom: 1px solid var(--gray-100);
padding: 10px 0 18px;
}
.stat:last-child {
border-bottom: 0;
}
}
@media (max-width: 820px) {
.nav {
align-items: flex-start;
flex-direction: column;
gap: 4px;
min-height: 0;
padding: 8px 0 10px;
}
.nav-links {
width: 100%;
justify-content: flex-start;
column-gap: 18px;
row-gap: 6px;
flex-wrap: wrap;
}
.nav-dropdown {
left: 0;
min-width: 180px;
top: calc(100% + 10px);
transform: translateY(-6px);
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
transform: translateY(0);
}
.quote-page {
padding-top: 94px;
}
.policy-page,
.study-page {
padding-top: 94px;
}
}
@media (max-width: 620px) {
.logo-text small {
white-space: normal;
}
.container {
width: min(100% - 28px, var(--max-width));
}
.nav-links .btn {
width: 100%;
}
.hero-content {
padding: 115px 0 110px;
margin-left: 14px;
margin-right: 14px;
}
.hero-actions .btn {
width: 100%;
}
section {
padding: 68px 0;
}
.study-hero {
min-height: 520px;
padding: 78px 0 98px;
}
.study-section {
padding: 64px 0;
}
.study-panel,
.study-callout,
.study-diagram-card,
.info-card,
.process-card {
border-radius: 14px;
}
.study-panel,
.study-callout,
.info-card,
.process-card {
padding: 24px;
}
.study-diagram-card {
padding: 14px;
}
.technical-diagram text {
font-size: 19px;
}
.service-card,
.about-card,
.contact-form {
padding: 26px;
}
.contact-form .grid-2 {
grid-template-columns: 1fr;
}
.policy-hero {
padding: 62px 0 92px;
}
.policy-content {
width: min(100% - 28px, var(--max-width));
margin: -46px auto 68px;
}
.policy-card {
padding: 28px 22px;
}
}
/* ===== request-a-quote.html styles ===== */
.quote-page {
padding-top: 76px;
background: linear-gradient(180deg, #f2f6fa, #eaf1f7);
min-height: 100vh;
}
.quote-hero {
position: relative;
overflow: hidden;
color: #ffffff;
background:
linear-gradient(
90deg,
rgba(7, 21, 33, 0.96),
rgba(7, 21, 33, 0.84) 42%,
rgba(7, 21, 33, 0.58) 70%,
rgba(7, 21, 33, 0.34)
),
var(--substation-image)
center / cover no-repeat;
padding: 92px 0 104px;
}
.quote-hero::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 70px;
background: linear-gradient(to top, #f2f6fa, rgba(242, 246, 250, 0));
}
.quote-hero-content {
position: relative;
z-index: 1;
max-width: 820px;
}
.quote-hero h1 {
font-size: clamp(2.7rem, 5.7vw, 5.2rem);
line-height: 0.98;
letter-spacing: -0.055em;
margin-bottom: 20px;
}
.quote-hero p {
max-width: 700px;
color: rgba(255, 255, 255, 0.82);
font-size: clamp(1.02rem, 2vw, 1.22rem);
}
.quote-hero p a {
color: var(--white);
font-weight: 800;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.quote-hero p a:hover {
color: var(--gold);
}
.form-page {
width: min(100% - 40px, 980px);
margin: -70px auto 92px;
position: relative;
z-index: 2;
}
.form-card {
background: #ffffff;
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid rgba(203, 213, 223, 0.7);
overflow: hidden;
}
form {
padding: 34px 40px 44px;
}
.required-note {
color: var(--gray-600);
font-size: 0.9rem;
margin: 0 0 16px;
}
.required-note-asterisk {
color: var(--danger);
}
.quote-form-progress {
margin-bottom: 16px;
padding: 18px 20px;
border: 1px solid rgba(203, 213, 223, 0.85);
border-radius: 16px;
background: #f8fafc;
}
.quote-progress-summary {
display: flex;
justify-content: space-between;
gap: 16px;
margin-bottom: 12px;
color: var(--navy);
font-weight: 800;
}
.quote-progress-steps {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
color: var(--gray-600);
font-size: 0.76rem;
text-align: center;
}
.quote-progress-steps li::before {
content: "";
display: block;
height: 5px;
margin-bottom: 7px;
border-radius: 999px;
background: #d9e1e8;
}
.quote-progress-steps li.is-complete::before,
.quote-progress-steps li.is-current::before {
background: var(--gold);
}
.quote-progress-steps li.is-current {
color: var(--navy);
font-weight: 800;
}
button.quote-progress-button {
min-height: auto;
width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
button.quote-progress-button:not(:disabled):hover,
button.quote-progress-button:not(:disabled):focus-visible {
color: var(--navy);
text-decoration: underline;
text-underline-offset: 3px;
}
button.quote-progress-button:disabled {
cursor: default;
opacity: 0.58;
}
.quote-draft-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
padding: 10px 14px;
border-radius: 12px;
background: #eef5f8;
color: var(--gray-700);
font-size: 0.86rem;
}
button.quote-draft-clear {
min-height: auto;
flex: 0 0 auto;
padding: 4px 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--navy);
font-size: 0.84rem;
text-decoration: underline;
text-underline-offset: 3px;
}
.quote-confirm-dialog {
position: fixed;
inset: 50% auto auto 50%;
width: min(calc(100% - 32px), 360px);
max-height: calc(100vh - 32px);
margin: 0;
padding: 0;
overflow: auto;
transform: translate(-50%, -50%);
border: 1px solid rgba(203, 213, 223, 0.9);
border-top: 5px solid var(--gold);
border-radius: 20px;
background: linear-gradient(145deg, #ffffff, #f3f7fa);
color: var(--navy);
box-shadow: 0 28px 80px rgba(7, 21, 33, 0.28);
}
.quote-confirm-dialog::backdrop {
background: rgba(7, 21, 33, 0.64);
backdrop-filter: blur(3px);
}
.quote-confirm-dialog form {
padding: 24px;
}
.quote-confirm-heading {
display: flex;
align-items: center;
gap: 11px;
}
.quote-confirm-heading img {
width: 32px;
height: 32px;
flex: 0 0 auto;
}
.quote-confirm-dialog h2 {
margin: 0;
color: var(--navy);
font-size: 1.35rem;
letter-spacing: -0.025em;
}
.quote-confirm-actions {
display: flex;
justify-content: flex-start;
gap: 12px;
margin-top: 20px;
}
.quote-confirm-actions button {
min-width: 140px;
white-space: nowrap;
}
button.quote-confirm-cancel {
border-color: rgba(7, 21, 33, 0.2);
background: #ffffff;
box-shadow: none;
}
button.quote-confirm-clear {
background: var(--gold);
color: var(--navy);
box-shadow: var(--gold-shadow);
}
body:has(.quote-confirm-dialog[open]) {
overflow: hidden;
}
.form-step-heading {
margin: 0 0 24px;
padding-bottom: 18px;
border-bottom: 1px solid rgba(203, 213, 223, 0.8);
}
.form-step-kicker {
display: block;
margin-bottom: 5px;
color: #826413;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.form-step-heading h2 {
margin: 0 0 7px;
color: var(--navy);
font-size: clamp(1.45rem, 3vw, 1.9rem);
letter-spacing: -0.025em;
}
.form-step-heading p {
margin: 0;
color: var(--gray-600);
}
.form-step-actions {
display: flex;
justify-content: space-between;
gap: 14px;
margin: 30px 0 18px;
}
button.form-step-back {
border-color: rgba(7, 21, 33, 0.22);
background: #ffffff;
box-shadow: none;
}
.form-step-actions .form-step-next {
margin-left: auto;
}
.upload-validation-error {
margin-top: 10px;
color: var(--danger);
font-size: 0.88rem;
font-weight: 700;
}
.quote-review {
display: grid;
gap: 14px;
margin-bottom: 24px;
}
.quote-review-section {
padding: 16px 18px;
border: 1px solid rgba(203, 213, 223, 0.85);
border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
}
.quote-review-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.quote-review-section h3 {
margin: 0;
color: var(--navy);
font-size: 1rem;
}
button.quote-review-edit {
min-height: auto;
padding: 2px 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--navy);
font-size: 0.82rem;
text-decoration: underline;
text-underline-offset: 3px;
}
.quote-review-details {
display: grid;
grid-template-columns: minmax(130px, 0.4fr) 1fr;
gap: 7px 16px;
margin: 0;
font-size: 0.9rem;
}
.quote-review-details dt {
color: var(--gray-600);
font-weight: 700;
}
.quote-review-details dd {
margin: 0;
color: var(--navy);
overflow-wrap: anywhere;
}
.project-basics-panel {
margin: 0 0 28px;
padding: 22px 22px 4px;
border: 1px solid rgba(203, 213, 223, 0.75);
border-left: 4px solid var(--gold);
border-radius: 18px;
background: linear-gradient(135deg, #fffaf1, #f8fafc 58%, #f2f7fa);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.project-basics-panel .field:last-child {
margin-bottom: 18px;
}
.field,
.section {
margin-bottom: 22px;
}
[hidden] {
display: none !important;
}
.conditional,
.conditional-disabled,
.conditional-option {
opacity: 0;
transform: translateY(-3px);
transition:
opacity 110ms ease,
transform 110ms ease;
}
.conditional.is-visible,
.conditional-disabled.is-visible,
.conditional-option.is-visible {
opacity: 1;
transform: translateY(0);
}
label,
.label {
display: block;
margin-bottom: 8px;
font-weight: 800;
font-size: 0.96rem;
color: var(--navy);
}
.required::after {
content: " *";
color: var(--danger);
}
.hint {
display: block;
color: var(--gray-600);
font-size: 0.88rem;
margin-top: 6px;
}
.tooltip-text {
cursor: help;
border-bottom: 1px dotted var(--gray-600);
}
.tooltip-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
margin-left: 6px;
border-radius: 50%;
background: rgba(31, 111, 159, 0.1);
color: var(--blue);
font-size: 12px;
font-weight: 900;
cursor: pointer;
vertical-align: middle;
flex-shrink: 0;
}
.tooltip-icon:focus-visible,
.tooltip-icon.is-tooltip-open {
outline: 3px solid rgba(31, 111, 159, 0.18);
outline-offset: 2px;
background: rgba(31, 111, 159, 0.16);
}
.enhanced-tooltip {
position: fixed;
z-index: 1000;
padding: 9px 11px;
border-radius: 8px;
background: rgba(17, 24, 39, 0.96);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
color: #ffffff;
font-size: 0.82rem;
font-weight: 650;
line-height: 1.35;
pointer-events: none;
}
.enhanced-tooltip[hidden] {
display: none;
}
input:where(:not([type="checkbox"]):not([type="radio"])),
select,
textarea {
width: 100%;
border: 1px solid var(--gray-300);
border-radius: 12px;
background: #ffffff;
padding: 12px 13px;
font-size: 15px;
color: var(--gray-800);
outline: none;
transition: 0.2s;
font-family: inherit;
}
input[type="checkbox"],
input[type="radio"] {
width: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
transition: none;
accent-color: var(--blue);
}
textarea {
min-height: 145px;
resize: vertical;
}
.project-description-textarea {
min-height: 72px;
}
input:where(:not([type="checkbox"]):not([type="radio"])):focus,
select:focus,
textarea:focus {
border-color: var(--blue);
box-shadow: 0 0 0 4px rgba(31, 111, 159, 0.12);
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.grid-3 {
display: grid;
grid-template-columns: 1.2fr 0.8fr 0.7fr;
gap: 14px;
}
.choices {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 18px;
margin-top: 6px;
}
.choices.one {
grid-template-columns: 1fr;
max-width: 50%;
}
.choices.option-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 100%;
gap: 8px 12px;
}
.choices.analysis-options {
max-width: 100%;
gap: 14px;
}
.choices.inline-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 100%;
}
.choices.inline-cards.type-study {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.half-width {
max-width: 50%;
}
.small-number-field {
max-width: 220px;
}
.building-scope-row {
display: grid;
grid-template-columns: 220px;
gap: 14px;
align-items: end;
max-width: 220px;
}
.building-breakdown {
margin-top: 14px;
border: 1px solid rgba(203, 213, 223, 0.9);
border-radius: 14px;
padding: 16px;
background: #f8fafc;
}
.building-breakdown-heading {
display: block;
margin-bottom: 12px;
}
.building-breakdown-heading .label,
.building-breakdown-heading .hint {
margin: 0;
}
.building-breakdown-title {
display: grid;
gap: 0;
}
.building-breakdown-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 24px;
margin-bottom: 14px;
padding: 10px 12px;
border: 1px solid rgba(203, 213, 223, 0.9);
border-radius: 10px;
background: #ffffff;
}
.building-breakdown .building-scope-row {
display: block;
max-width: none;
margin-bottom: 0;
}
.building-breakdown #building_count {
width: 84px;
max-width: 84px;
}
.building-breakdown-controls .field,
.project-basics-panel .building-breakdown-controls .field:last-child {
display: flex;
align-items: center;
gap: 10px;
max-width: none;
margin-bottom: 0;
}
.building-breakdown-controls label[for="building_count"] {
display: inline-flex;
align-items: center;
gap: 6px;
width: max-content;
margin: 0;
white-space: nowrap;
}
.building-breakdown-controls label[for="building_count"] .tooltip-icon {
margin-left: 0;
}
.building-breakdown-mode {
margin: 0;
}
.compact-check {
display: inline-flex;
align-items: center;
gap: 8px;
width: auto;
margin: 0;
padding: 6px 0;
color: var(--gray-700);
font-size: 0.9rem;
font-weight: 700;
line-height: 1.25;
cursor: pointer;
}
.compact-check input {
width: auto;
margin: 0;
accent-color: var(--blue);
}
.building-breakdown-grid {
display: grid;
gap: 0;
}
.building-breakdown-row {
display: grid;
grid-template-columns: var(--building-scope-template, minmax(140px, 1.1fr) repeat(var(--building-scope-columns), minmax(110px, 1fr)));
gap: 10px;
align-items: start;
}
.building-breakdown-row.is-header {
align-items: center;
margin-bottom: 2px;
padding: 8px 10px;
border-radius: 8px;
background: #eef2f6;
color: var(--gray-600);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
}
.building-breakdown-row:not(.is-header) {
padding: 10px;
border-bottom: 1px solid rgba(203, 213, 223, 0.75);
}
.building-breakdown-row:not(.is-header):last-child {
border-bottom: 0;
}
.building-breakdown-row .field,
.project-basics-panel .building-breakdown-row .field:last-child {
margin-bottom: 0;
}
.building-breakdown-row .field label {
display: none;
}
.building-label-cell {
min-width: 0;
}
.building-label-cell .field {
min-width: 0;
}
.building-label-control {
position: relative;
min-width: 0;
}
.building-breakdown-row .building-label-control input {
padding-right: 42px;
}
.building-breakdown-row .field .building-same-as-above {
position: absolute;
top: 50%;
right: 7px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
width: 30px;
min-width: 0;
height: 30px;
min-height: 0;
margin: 0;
padding: 0;
border: 1px solid rgba(148, 163, 184, 0.85);
border-radius: 7px;
background: #ffffff;
box-shadow: none;
color: var(--gray-500);
appearance: none;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: 1;
cursor: pointer;
transform: translateY(-50%);
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.building-breakdown-row .field .building-same-as-above:hover {
border-color: rgba(31, 111, 235, 0.55);
color: var(--blue);
}
.building-same-as-above-icon {
position: relative;
width: 13px;
height: 13px;
pointer-events: none;
}
.building-same-as-above-icon::before,
.building-same-as-above-icon::after {
content: "";
position: absolute;
width: 7.5px;
height: 7.5px;
border: 1.25px solid currentColor;
border-radius: 2.5px;
background: #ffffff;
}
.building-same-as-above-icon::before {
top: 1px;
left: 1px;
opacity: 0.7;
}
.building-same-as-above-icon::after {
right: 1px;
bottom: 1px;
}
.building-same-as-above-text {
position: relative;
color: currentColor;
font-size: 0.5rem;
font-weight: 525;
line-height: 1;
pointer-events: none;
}
.building-same-as-above:active {
border-color: var(--blue);
background: rgba(31, 111, 235, 0.1);
color: var(--blue);
}
.building-same-as-above:focus-visible {
outline: 3px solid rgba(31, 111, 235, 0.2);
outline-offset: 2px;
}
.building-breakdown-row input,
.building-breakdown-row select {
min-height: 44px;
padding: 10px 11px;
border-radius: 10px;
font-size: 0.92rem;
}
.building-breakdown-row.is-similar-scope-linked > .field {
pointer-events: none;
}
.building-breakdown-row.is-similar-scope-linked > .field input,
.building-breakdown-row.is-similar-scope-linked > .field select {
border-color: #cbd5e1;
background-color: #e2e8f0;
color: #64748b;
opacity: 0.78;
}
.building-breakdown-load {
display: grid;
grid-template-columns: minmax(0, 1fr) 74px;
border-radius: 10px;
}
.building-breakdown-load input:where(:not([type="checkbox"]):not([type="radio"])) {
border-radius: 10px 0 0 10px;
border-right: 0;
}
.building-breakdown-load select {
border-radius: 0 10px 10px 0;
background-color: #ffffff;
font-weight: 700;
font-size: 0.86rem;
}
.building-breakdown-load:focus-within {
box-shadow: 0 0 0 4px rgba(31, 111, 159, 0.12);
}
.building-breakdown-load:focus-within input,
.building-breakdown-load:focus-within select {
border-color: var(--blue);
}
.building-breakdown-load input:focus,
.building-breakdown-load select:focus {
box-shadow: none;
}
.building-breakdown-load select:invalid {
font-weight: 400;
}
.requested-date-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: -4px;
}
.requested-date-inline {
max-width: 100%;
}
.date-input-with-picker {
position: relative;
}
.date-input-with-picker > input[type="text"] {
width: 100%;
padding-right: 46px;
}
.requested-date-picker {
position: absolute;
right: 44px;
bottom: 0;
width: 1px;
height: 1px;
min-height: 0;
padding: 0;
border: 0;
opacity: 0;
pointer-events: none;
}
.requested-date-picker-button {
position: absolute;
top: 1px;
right: 1px;
bottom: 1px;
display: flex;
width: 44px;
min-height: 0;
padding: 0;
border: 0;
border-radius: 0 11px 11px 0;
background: transparent;
box-shadow: none;
color: var(--gray-600);
cursor: pointer;
}
.requested-date-picker-button svg {
width: 20px;
height: 20px;
pointer-events: none;
}
.requested-date-picker-button:hover {
background: rgba(31, 111, 159, 0.08);
box-shadow: none;
color: var(--blue);
transform: none;
}
.requested-date-picker-button:focus-visible {
outline: 3px solid rgba(31, 111, 159, 0.18);
outline-offset: -3px;
}
.data-options-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
gap: 18px;
align-items: start;
}
.data-requirements-panel {
margin-bottom: 22px;
padding: 18px;
border: 1px solid rgba(203, 213, 223, 0.9);
border-radius: 14px;
background: #f8fafc;
}
.data-requirements-panel > .field,
.project-basics-panel .data-requirements-panel > .field:last-child {
margin-bottom: 0;
}
.project-info-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.model-info-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: start;
}
.model-info-field {
width: calc((100% - 14px) / 2);
max-width: calc((100% - 14px) / 2);
}
.model-info-row .model-info-field {
width: 100%;
max-width: 100%;
}
.model-info-controls {
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 12px;
align-items: start;
max-width: 100%;
}
.model-info-controls .choices {
margin-top: 0;
}
.model-info-controls .radio-pills .choice {
min-height: 45px;
padding-top: 0;
padding-bottom: 0;
align-items: center;
}
.model-software-control {
min-width: 0;
}
.model-software-control input {
min-height: 45px;
}
.model-software-note {
margin-top: 1px;
font-size: 0.82rem;
}
.design-load-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: end;
max-width: 100%;
}
.design-load-row > .field {
margin-bottom: 0;
}
.input-with-unit {
display: grid;
grid-template-columns: minmax(0, 1fr) 110px;
border-radius: 12px;
}
.input-with-unit input:where(:not([type="checkbox"]):not([type="radio"])) {
border-radius: 12px 0 0 12px;
border-right: 0;
}
.input-with-unit select {
border-radius: 0 12px 12px 0;
background-color: #f8fafc;
font-weight: 700;
}
.input-with-unit:focus-within {
box-shadow: 0 0 0 4px rgba(31, 111, 159, 0.12);
}
.input-with-unit:focus-within input,
.input-with-unit:focus-within select {
border-color: var(--blue);
}
.input-with-unit input:focus,
.input-with-unit select:focus {
box-shadow: none;
}
.lineups-stack {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
max-width: 100%;
}
.choice {
display: flex;
align-items: flex-start;
gap: 10px;
font-weight: 600;
cursor: pointer;
color: var(--gray-800);
line-height: 1.45;
border: 1px solid var(--gray-300);
border-radius: 14px;
background: #ffffff;
padding: 13px 14px;
transition: 0.2s;
}
.choice:hover {
border-color: var(--blue);
box-shadow: 0 8px 18px rgba(7, 21, 33, 0.08);
transform: translateY(-1px);
}
.choice:has(input:focus-visible) {
outline: 3px solid rgba(31, 111, 159, 0.18);
outline-offset: 2px;
}
.choice:has(input:checked) {
border-color: var(--blue);
background: #eef7fb;
box-shadow: 0 0 0 3px rgba(31, 111, 159, 0.12);
}
.choice input {
width: auto;
margin-top: 4px;
flex: 0 0 auto;
accent-color: var(--blue);
}
.option-grid .choice {
padding: 9px 11px;
border-radius: 11px;
font-size: 0.92rem;
font-weight: 500;
line-height: 1.35;
}
.option-grid .choice:hover {
box-shadow: 0 5px 12px rgba(7, 21, 33, 0.06);
transform: none;
}
.equipment-distribution-details {
margin: 4px 0 22px;
border: 1px solid rgba(203, 213, 223, 0.9);
border-radius: 14px;
background: #f8fafc;
overflow: hidden;
}
.equipment-distribution-details > summary {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 16px;
color: var(--navy);
font-size: 0.96rem;
font-weight: 800;
cursor: pointer;
list-style: none;
}
.equipment-distribution-details > summary::-webkit-details-marker {
display: none;
}
.equipment-distribution-details > summary::after {
content: "+";
margin-left: auto;
color: var(--blue);
font-size: 1.25rem;
line-height: 1;
}
.equipment-distribution-details[open] > summary {
border-bottom: 1px solid rgba(203, 213, 223, 0.9);
}
.equipment-distribution-details[open] > summary::after {
content: "−";
}
.equipment-distribution-details > summary:focus-visible {
outline: 3px solid rgba(31, 111, 159, 0.18);
outline-offset: -3px;
}
.equipment-distribution-details-content {
padding: 18px 16px 4px;
}
.equipment-distribution-details-content > .field {
margin-bottom: 20px;
}
.equipment-checklist-hint {
margin: -3px 0 7px;
}
.feeder-data-options {
width: 100%;
max-width: 100%;
gap: 8px;
margin-top: 0;
grid-template-columns: 1fr;
}
.choices.one.feeder-data-options {
max-width: 100%;
}
.feeder-data-options .choice {
width: 100%;
max-width: 100%;
min-height: 44px;
padding: 9px 11px;
border: 1px solid var(--gray-300);
border-radius: 10px;
background: #ffffff;
box-shadow: none;
font-weight: 500;
font-size: 0.9rem;
line-height: 1.35;
transform: none;
}
.feeder-data-options .choice:hover {
border-color: var(--blue);
background: #ffffff;
box-shadow: 0 5px 12px rgba(7, 21, 33, 0.06);
transform: none;
}
.feeder-data-options .choice:has(input:checked) {
border-color: var(--blue);
background: #eef7fb;
box-shadow: 0 0 0 3px rgba(31, 111, 159, 0.1);
}
.data-requirements-panel .feeder-data-options .tooltip-text {
border-bottom: 0;
}
.data-requirements-panel .feeder-data-options .tooltip-icon {
margin-left: auto;
}
.analysis-group {
display: grid;
border: 1px solid var(--gray-300);
border-radius: 14px;
background: #ffffff;
overflow: hidden;
transition: 0.2s;
}
.analysis-group:hover {
border-color: var(--blue);
box-shadow: 0 8px 18px rgba(7, 21, 33, 0.08);
transform: translateY(-1px);
}
.analysis-group:has(.analysis-card input:checked) {
border-color: var(--blue);
background: #eef7fb;
box-shadow: 0 0 0 3px rgba(31, 111, 159, 0.12);
}
.analysis-card {
padding: 16px;
border: 0;
border-radius: 0;
background: transparent;
position: relative;
z-index: 1;
}
.analysis-card:hover {
border-color: transparent;
background: transparent;
box-shadow: none;
transform: none;
}
.analysis-card:has(input:checked) {
border-color: transparent;
background: transparent;
box-shadow: none;
transform: none;
}
.analysis-card-text {
display: flex;
flex-direction: column;
gap: 3px;
}
.analysis-card-title {
font-weight: 800;
color: var(--navy);
line-height: 1.25;
}
.analysis-card-description {
font-size: 0.88rem;
font-weight: 400;
color: var(--gray-600);
line-height: 1.35;
}
.analysis-subfield {
width: 100%;
margin: 0;
padding: 0 16px 0 calc(16px + 10px + 18px);
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.analysis-subfield > .label {
font-size: 0.9rem;
color: var(--navy);
margin-bottom: 10px;
}
.analysis-inline-choice {
grid-template-columns: repeat(2, max-content);
gap: 8px;
max-width: max-content;
}
.analysis-subfield .choices.one {
max-width: 260px;
}
.analysis-subfield .choices.one:has(input[type="checkbox"]),
.analysis-subfield .choices.coordination-services {
max-width: 100%;
gap: 0;
}
.analysis-subfield .choice {
padding: 8px 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
font-weight: 500;
transform: none;
}
.analysis-subfield .choices.one:has(input[type="checkbox"]) .choice,
.analysis-subfield .coordination-services .choice {
padding: 3px 0;
}
.analysis-subfield .short-circuit-recommendations .choice {
padding: 0;
}
.analysis-subfield .choice:hover,
.analysis-subfield .choice:has(input:checked) {
border-color: transparent;
background: transparent;
box-shadow: none;
transform: none;
}
.coordination-option-text {
display: grid;
gap: 1px;
}
.coordination-option-helper {
margin-top: 0;
font-size: 0.82rem;
font-weight: 400;
line-height: 1.4;
}
.radio-pills .choice {
justify-content: center;
min-width: 76px;
padding: 8px 14px;
border: 1px solid var(--gray-300);
border-radius: 999px;
background: #ffffff;
}
.radio-pills .choice:hover,
.radio-pills .choice:has(input:checked) {
border-color: var(--blue);
background: #eef7fb;
}
.analysis-subfield .tooltip-text {
border-bottom: 0;
}
.analysis-subfield textarea {
min-height: 88px;
}
.upload-zone {
width: 100%;
border: 2px dashed var(--gray-300);
border-radius: var(--radius);
padding: 24px;
text-align: center;
background: var(--gray-50);
cursor: pointer;
transition: 0.2s;
}
.upload-zone:hover,
.upload-zone.dragover {
border-color: var(--blue);
background: #eef4f9;
}
.upload-zone strong {
display: block;
font-size: 1rem;
margin-bottom: 5px;
color: var(--navy);
}
.upload-zone > span {
display: block;
color: var(--gray-600);
font-size: 0.92rem;
}
.upload-zone input {
width: auto;
max-width: 100%;
margin-top: 16px;
padding: 8px;
background: #ffffff;
}
.reference-transfer-options {
display: grid;
gap: 8px;
margin-top: 12px;
padding: 14px;
border: 1px dashed var(--gray-300);
border-radius: var(--radius);
background: #fbfcfd;
}
.larger-file-size-options {
margin-top: 12px;
margin-bottom: 0;
}
.larger-file-size-options .reference-transfer-options {
margin: 0;
padding: 18px 16px 12px;
border: 0;
border-radius: 0;
background: transparent;
}
.upload-link-request {
margin-top: 0;
margin-bottom: 0;
padding: 9px 11px;
border-radius: 10px;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.35;
}
.fileshare-link-field {
margin-top: 2px;
}
.fileshare-link-field label {
font-size: 0.9rem;
}
.file-list {
margin-top: 12px;
color: var(--gray-600);
font-size: 0.86rem;
text-align: left;
word-break: break-word;
}
.selected-files {
display: grid;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.selected-files li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border: 1px solid rgba(203, 213, 223, 0.85);
border-radius: 6px;
padding: 8px 10px;
background: #ffffff;
}
.selected-file-details {
display: grid;
gap: 2px;
min-width: 0;
}
.selected-file-name {
overflow-wrap: anywhere;
color: var(--navy);
font-weight: 700;
}
.selected-file-size {
color: var(--gray-500);
font-size: 0.8rem;
}
.remove-file-button {
flex: 0 0 auto;
border: 1px solid rgba(203, 213, 223, 0.95);
border-radius: 6px;
padding: 6px 10px;
background: #ffffff;
color: var(--danger);
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
}
.remove-file-button:hover,
.remove-file-button:focus-visible {
border-color: var(--danger);
background: #fff5f5;
}
.legal-box {
background: var(--gray-50);
border: 1px solid rgba(203, 213, 223, 0.7);
border-radius: var(--radius);
padding: 18px;
color: var(--gray-600);
font-size: 0.92rem;
}
.legal-box strong {
color: var(--navy);
}
.legal-box a {
color: var(--blue);
font-weight: 800;
text-decoration: underline;
text-underline-offset: 3px;
}
.legal-box a:hover {
color: var(--navy);
}
.validation-error {
margin-top: 8px;
color: var(--danger);
font-size: 0.86rem;
display: none;
}
.field.has-error:not(.has-control-error) input,
.field.has-error:not(.has-control-error) select,
.field.has-error:not(.has-control-error) textarea,
.field.has-error .control-has-error {
border-color: var(--danger);
}
.building-breakdown-load input.control-has-error {
border-right: 1px solid var(--danger);
}
.building-breakdown-load select.control-has-error {
border-left: 1px solid var(--danger);
}
.field.has-error .validation-error {
display: block;
}
.building-breakdown-load + .validation-error.align-unit-error {
text-align: right;
}
.honeypot {
position: absolute;
left: -9999px;
opacity: 0;
height: 0;
overflow: hidden;
}
.submit-row {
margin-top: 32px;
display: flex;
gap: 14px;
justify-content: center;
}
button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 22px;
border-radius: 999px;
font-weight: 800;
border: 2px solid transparent;
cursor: pointer;
background: var(--gold);
color: var(--navy);
box-shadow: var(--gold-shadow);
font-family: inherit;
font-size: 1rem;
}
.submit-row button {
min-width: 300px;
}
@media (max-width: 960px) {
.building-breakdown[data-conditional-columns="3"] {
padding: 14px;
}
.building-breakdown[data-conditional-columns="3"] .building-breakdown-row,
.building-breakdown[data-conditional-columns="3"] .building-breakdown-row.is-header {
grid-template-columns: 1fr;
}
.building-breakdown[data-conditional-columns="3"] .building-breakdown-row.is-header {
display: none;
}
.building-breakdown[data-conditional-columns="3"] .building-breakdown-row {
gap: 8px;
padding: 12px 0;
border-top: 1px solid rgba(203, 213, 223, 0.9);
}
.building-breakdown[data-conditional-columns="3"] .building-breakdown-row:first-of-type {
border-top: 0;
padding-top: 0;
}
.building-breakdown[data-conditional-columns="3"] .building-breakdown-row.is-header + .building-breakdown-row {
border-top: 0;
padding-top: 0;
}
.building-breakdown[data-conditional-columns="3"] .building-breakdown-row .field label {
display: block;
margin-bottom: 5px;
font-size: 0.82rem;
}
}
@media (max-width: 860px) {
.building-breakdown[data-conditional-columns="2"] {
padding: 14px;
}
.building-breakdown[data-conditional-columns="2"] .building-breakdown-row,
.building-breakdown[data-conditional-columns="2"] .building-breakdown-row.is-header {
grid-template-columns: 1fr;
}
.building-breakdown[data-conditional-columns="2"] .building-breakdown-row.is-header {
display: none;
}
.building-breakdown[data-conditional-columns="2"] .building-breakdown-row {
gap: 8px;
padding: 12px 0;
border-top: 1px solid rgba(203, 213, 223, 0.9);
}
.building-breakdown[data-conditional-columns="2"] .building-breakdown-row:first-of-type {
border-top: 0;
padding-top: 0;
}
.building-breakdown[data-conditional-columns="2"] .building-breakdown-row.is-header + .building-breakdown-row {
border-top: 0;
padding-top: 0;
}
.building-breakdown[data-conditional-columns="2"] .building-breakdown-row .field label {
display: block;
margin-bottom: 5px;
font-size: 0.82rem;
}
}
@media (max-width: 800px) {
.building-breakdown[data-conditional-columns="1"] {
padding: 14px;
}
.building-breakdown[data-conditional-columns="1"] .building-breakdown-row,
.building-breakdown[data-conditional-columns="1"] .building-breakdown-row.is-header {
grid-template-columns: 1fr;
}
.building-breakdown[data-conditional-columns="1"] .building-breakdown-row.is-header {
display: none;
}
.building-breakdown[data-conditional-columns="1"] .building-breakdown-row {
gap: 8px;
padding: 12px 0;
border-top: 1px solid rgba(203, 213, 223, 0.9);
}
.building-breakdown[data-conditional-columns="1"] .building-breakdown-row:first-of-type {
border-top: 0;
padding-top: 0;
}
.building-breakdown[data-conditional-columns="1"] .building-breakdown-row.is-header + .building-breakdown-row {
border-top: 0;
padding-top: 0;
}
.building-breakdown[data-conditional-columns="1"] .building-breakdown-row .field label {
display: block;
margin-bottom: 5px;
font-size: 0.82rem;
}
}
@media (prefers-reduced-motion: reduce) {
.conditional,
.conditional-disabled,
.conditional-option,
.breaker.opens rect,
.fault-star path,
.trip-pulse circle {
animation: none;
transition: none;
transform: none;
}
}
@media (max-width: 520px) {
.model-info-controls {
grid-template-columns: 1fr;
gap: 10px;
max-width: 320px;
}
.model-info-controls .analysis-inline-choice {
grid-template-columns: repeat(2, max-content);
max-width: max-content;
}
.model-software-control {
max-width: 320px;
}
}
@media (max-width: 720px) {
.submit-row button {
width: 100%;
}
.project-info-row {
grid-template-columns: 1fr;
gap: 0;
}
.model-info-row {
grid-template-columns: 1fr;
gap: 0;
}
.model-info-field {
width: 100%;
max-width: 100%;
}
.choices.one,
.choices.option-grid,
.choices.analysis-options,
.choices.inline-cards,
.choices.inline-cards.type-study {
grid-template-columns: 1fr;
max-width: 100%;
}
.option-grid .choice {
padding: 13px 14px;
border-radius: 14px;
font-size: 15px;
}
.analysis-subfield {
width: 100%;
margin-left: 0;
padding-left: 18px;
}
.analysis-inline-choice {
grid-template-columns: repeat(2, max-content);
max-width: max-content;
}
.form-page {
width: min(100% - 28px, var(--max-width));
margin: -46px auto 68px;
}
form {
padding-left: 24px;
padding-right: 24px;
}
.grid-2,
.grid-3,
.choices {
grid-template-columns: 1fr;
}
.model-info-controls .analysis-inline-choice {
grid-template-columns: repeat(2, max-content);
max-width: max-content;
}
.half-width,
.building-scope-row,
.design-load-row,
.data-options-row,
.requested-date-row,
.lineups-stack {
max-width: 100%;
}
.building-scope-row,
.data-options-row,
.requested-date-row,
.design-load-row {
grid-template-columns: 1fr;
}
.lineups-stack {
grid-template-columns: 1fr;
}
.building-breakdown {
padding: 14px;
}
.building-breakdown-controls {
display: grid;
gap: 10px;
}
.building-breakdown-mode {
margin-bottom: 0;
}
.building-breakdown-row,
.building-breakdown-row.is-header {
grid-template-columns: 1fr;
}
.building-breakdown-row.is-header {
display: none;
}
.building-breakdown-row {
gap: 8px;
padding: 12px 0;
border-top: 1px solid rgba(203, 213, 223, 0.9);
}
.building-breakdown-row:first-of-type {
border-top: 0;
padding-top: 0;
}
.building-breakdown-row.is-header + .building-breakdown-row {
border-top: 0;
padding-top: 0;
}
.building-breakdown-row .field label {
display: block;
margin-bottom: 5px;
font-size: 0.82rem;
}
}
@media (max-width: 620px) {
.quote-progress-steps li {
font-size: 0;
}
.quote-progress-steps li::before {
margin-bottom: 0;
}
.quote-draft-bar,
.form-step-actions,
.submit-row {
align-items: stretch;
flex-direction: column;
}
.quote-draft-bar {
align-items: flex-start;
}
.quote-confirm-dialog form {
padding: 24px;
}
.quote-confirm-actions {
flex-direction: column-reverse;
}
.quote-confirm-actions button {
width: 100%;
}
.form-step-actions button,
.submit-row button,
.submit-row .form-step-back {
width: 100%;
}
.quote-review-details {
grid-template-columns: 1fr;
gap: 2px;
}
.quote-review-details dd {
margin-bottom: 7px;
}
.quote-hero {
padding: 62px 0 92px;
}
.quote-hero h1 {
font-size: clamp(2.2rem, 12vw, 3.2rem);
}
form {
padding-left: 22px;
padding-right: 22px;
}
}
/* ===== article-style study page overrides ===== */
.study-page {
background: var(--white);
padding-bottom: 96px;
padding-top: 76px;
}
.study-page .container {
width: min(100% - 44px, 960px);
}
.study-page.short-circuit-page,
.study-page.arc-flash-page {
--study-article-hero-image: url("images/breakout-hero-switchgear-wide.webp");
}
.study-page.short-circuit-page {
--study-article-hero-image: url("images/short-circuit-hero-faulted-cables.webp");
}
.study-page.arc-flash-page {
--study-article-hero-image: url("images/arc-flash-hero-racking-breaker.avif");
}
.study-page.coordination-page {
--study-article-hero-image: url("images/breakout-hero-switchgear-wide.webp");
}
.study-page .study-hero {
background:
linear-gradient(
90deg,
rgba(7, 21, 33, 0.92) 0%,
rgba(7, 21, 33, 0.78) 50%,
rgba(7, 21, 33, 0.42) 100%
),
var(--study-article-hero-image) center / cover no-repeat;
border-bottom: 1px solid rgba(203, 213, 223, 0.9);
color: var(--white);
min-height: 0;
padding: 74px 0 58px;
}
.study-page .study-hero::after {
display: none;
}
.study-page .study-hero-content {
max-width: none;
}
.study-page .breadcrumb-link {
color: var(--gold);
display: inline-flex;
flex-direction: column;
align-items: flex-start;
font-size: 0.82rem;
font-weight: 900;
letter-spacing: 0.18em;
margin-bottom: 18px;
text-decoration: none;
text-transform: uppercase;
}
.study-page .breadcrumb-link:hover {
color: #d9aa50;
}
.study-page .breadcrumb-link::after {
background: linear-gradient(90deg, var(--gold), rgba(201, 154, 62, 0));
content: "";
height: 2px;
margin-top: 10px;
width: 72px;
}
.study-page .eyebrow {
display: none;
}
.study-page .study-hero h1 {
color: var(--white);
font-size: clamp(2.25rem, 4.8vw, 3.75rem);
line-height: 1.05;
margin-bottom: 18px;
max-width: 760px;
}
.study-page .study-hero p {
color: rgba(255, 255, 255, 0.88);
font-size: 1.08rem;
line-height: 1.78;
max-width: 800px;
}
.study-page .hero-actions {
display: none;
}
.study-page .study-section {
background: #ffffff;
border: 0;
color: var(--gray-800);
padding: 0;
scroll-margin-top: 110px;
}
.study-page .study-band {
background: linear-gradient(180deg, #f5f8fb 0%, #eef4f8 100%);
}
.study-page .references-section {
background: linear-gradient(180deg, #fffaf1 0%, #f7f9fb 100%);
color: var(--gray-800);
}
.study-page .study-section > .container {
border-top: 1px solid rgba(203, 213, 223, 0.88);
padding: 44px 0;
}
.study-page .study-band > .container,
.study-page .references-section > .container {
border-top: 0;
}
.study-page .study-section:first-of-type > .container {
border-top: 0;
}
.study-page .study-two-column {
display: block;
}
.study-page .study-copy,
.study-page .section-header {
max-width: 850px;
}
.study-page .section-kicker {
display: none;
}
.study-page h2,
.study-page .references-section h2 {
border-bottom: 1px solid rgba(201, 154, 62, 0.58);
color: var(--navy);
font-size: clamp(1.42rem, 2.4vw, 1.95rem);
line-height: 1.25;
margin-bottom: 18px;
padding-bottom: 10px;
}
.study-page h3 {
color: var(--navy);
font-size: 1.04rem;
line-height: 1.35;
margin-bottom: 8px;
}
.study-page .study-copy p,
.study-page .section-header p,
.study-page .info-card p,
.study-page .process-card p,
.study-page .study-panel li,
.study-page .study-callout p,
.study-page .reference-list li {
color: var(--gray-800);
font-size: 1.03rem;
line-height: 1.82;
}
.study-page .study-copy p + p,
.study-page .section-header p + p {
margin-top: 15px;
}
.study-page .study-diagram-card {
background: #ffffff;
border: 1px solid rgba(203, 213, 223, 0.95);
border-radius: 8px;
box-shadow: none;
margin: 28px 0 4px;
padding: 18px;
}
.study-page .source-figure-card img,
.study-page .source-figure-item img {
display: block;
height: auto;
margin: 0 auto;
max-width: 100%;
}
.study-page .source-figure-card img {
max-height: 620px;
object-fit: contain;
}
.study-page .arc-source-figure {
margin: 26px 0;
text-align: center;
width: 98%;
}
.study-page .arc-source-figure img {
width: 100%;
}
.study-page .source-figure-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.study-page .source-figure-grid figcaption {
grid-column: 1 / -1;
}
.study-page .source-figure-item {
background: #ffffff;
border: 1px solid rgba(203, 213, 223, 0.7);
border-radius: 6px;
display: grid;
gap: 8px;
padding: 10px;
}
.study-page .short-circuit-figure-grid .source-figure-item {
background: transparent;
border: 0;
border-radius: 8px;
overflow: hidden;
padding: 0;
}
.study-page .short-circuit-figure-grid .source-figure-item img {
width: 100%;
}
.study-page .source-figure-item span {
color: var(--gray-600);
font-size: 0.9rem;
font-weight: 800;
text-align: center;
}
.study-page .coordination-source-figure {
margin-left: calc((min(100%, 850px) - min(100%, 680px)) / 2);
margin-right: auto;
max-width: 680px;
padding: 14px;
}
.study-page .coordination-source-figure img {
max-height: 560px;
}
.study-page .tcc-source-figure {
margin-left: auto;
margin-right: auto;
max-width: 570px;
}
.study-page .tcc-source-figure img {
max-height: none;
width: 100%;
}
.study-page .study-diagram-card figcaption {
color: var(--gray-600);
font-size: 0.92rem;
line-height: 1.58;
margin-top: 14px;
}
.study-page .info-grid,
.study-page .standards-grid,
.study-page .fault-type-grid {
display: grid;
gap: 18px 28px;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 22px;
}
.study-page .process-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 22px;
max-width: 900px;
}
.study-page .info-card,
.study-page .process-card {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
padding: 2px 0;
}
.study-page .info-card h3,
.study-page .process-card h3 {
color: var(--blue);
}
.study-page .process-card span {
color: var(--blue);
display: block;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.12em;
margin-bottom: 6px;
}
.study-page .study-panel,
.study-page .study-callout {
background: rgba(247, 249, 251, 0.82);
border: 1px solid rgba(203, 213, 223, 0.92);
border-radius: 8px;
box-shadow: none;
margin: 24px 0 0;
max-width: 850px;
padding: 22px 24px;
}
.study-page .study-panel-note {
color: var(--gray-700);
font-size: 1.01rem;
line-height: 1.75;
margin: 14px 0 0;
max-width: 850px;
}
.study-page .check-list {
gap: 8px;
}
.study-page .check-list li {
padding-left: 20px;
}
.study-page .check-list li::before {
background: var(--blue);
height: 6px;
top: 0.88em;
width: 6px;
}
.study-page .check-list a {
color: var(--blue);
text-decoration: underline;
text-underline-offset: 3px;
}
.study-page .check-list a:hover {
color: var(--navy);
}
.study-page .text-link {
color: var(--blue);
font-size: 1rem;
margin-top: 18px;
}
.study-page .study-cta {
display: flex;
margin-bottom: -28px;
margin-top: 24px;
width: fit-content;
}
.study-page .study-pagination {
align-items: center;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(203, 213, 223, 0.95);
border-radius: 999px;
bottom: calc(16px + env(safe-area-inset-bottom));
box-shadow: 0 14px 36px rgba(7, 21, 33, 0.16);
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
left: 50%;
margin: 0;
max-width: min(460px, calc(100vw - 28px));
overflow: hidden;
position: fixed;
transform: translateX(-50%);
transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
width: 100%;
z-index: 850;
}
body.study-pagination-hidden .study-page .study-pagination {
opacity: 0;
pointer-events: none;
transform: translate(-50%, 12px);
visibility: hidden;
}
.study-page .study-pagination a,
.study-page .study-pagination span {
align-items: center;
border-right: 1px solid rgba(203, 213, 223, 0.95);
color: var(--gray-700);
display: flex;
font-size: 0.8rem;
font-weight: 800;
justify-content: center;
line-height: 1;
min-height: 30px;
padding: 7px 10px;
text-decoration: none;
}
.study-page .study-pagination a:last-child,
.study-page .study-pagination span:last-child {
border-right: 0;
}
.study-page .study-pagination a:hover,
.study-page .study-pagination a:focus-visible {
background: rgba(201, 154, 62, 0.1);
color: var(--navy);
}
.study-page .study-pagination span {
background: var(--navy);
color: #ffffff;
}
@media (prefers-reduced-motion: no-preference) {
body.study-page-enter-next .study-page {
animation: studyPageEnterNext 260ms ease-out both;
}
body.study-page-enter-prev .study-page {
animation: studyPageEnterPrev 260ms ease-out both;
}
body.study-page-exit-next .study-page {
animation: studyPageExitNext 180ms ease-in both;
}
body.study-page-exit-prev .study-page {
animation: studyPageExitPrev 180ms ease-in both;
}
@keyframes studyPageEnterNext {
from {
opacity: 0;
transform: translateX(28px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes studyPageEnterPrev {
from {
opacity: 0;
transform: translateX(-28px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes studyPageExitNext {
to {
opacity: 0;
transform: translateX(-28px);
}
}
@keyframes studyPageExitPrev {
to {
opacity: 0;
transform: translateX(28px);
}
}
}
.study-page .reference-list {
gap: 10px;
margin-top: 20px;
max-width: 900px;
}
.study-page .reference-list a {
color: var(--blue);
}
.study-page .reference-list a:hover {
color: var(--navy);
}
.study-page .reference-list li::before {
background: var(--gold);
top: 0.9em;
}
.study-page .technical-diagram text {
font-size: 20px;
}
.definition-link {
-webkit-appearance: none;
appearance: none;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
color: inherit;
cursor: pointer;
display: inline;
font: inherit;
font-weight: inherit;
line-height: inherit;
min-height: 0;
padding: 0;
text-decoration-line: underline;
text-decoration-style: dashed;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
vertical-align: baseline;
}
.definition-link:hover,
.definition-link:focus-visible {
color: inherit;
text-decoration-style: solid;
}
.definition-link:focus-visible {
outline: none;
}
.definition-backdrop {
background: rgba(7, 21, 33, 0.24);
inset: 0;
position: fixed;
z-index: 999;
}
.definition-popover {
background: #ffffff;
border: 1px solid rgba(203, 213, 223, 0.95);
border-radius: 8px;
box-shadow: 0 18px 45px rgba(7, 21, 33, 0.22);
color: var(--gray-800);
left: 50%;
max-width: min(360px, calc(100vw - 32px));
padding: 18px 20px;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
width: max-content;
z-index: 1000;
}
.definition-backdrop[hidden],
.definition-popover[hidden] {
display: none;
}
.definition-popover h2 {
border: 0;
color: var(--navy);
font-size: 1.05rem;
line-height: 1.3;
margin: 0 34px 8px 0;
padding: 0;
}
.definition-popover p {
color: var(--gray-800);
font-size: 0.98rem;
line-height: 1.65;
margin: 0;
}
.definition-popover-close {
align-items: center;
appearance: none;
background: transparent;
border: 0;
color: var(--gray-600);
cursor: pointer;
display: inline-flex;
font-size: 1.35rem;
height: 30px;
justify-content: center;
line-height: 1;
padding: 0;
position: absolute;
right: 12px;
top: 10px;
width: 30px;
}
.definition-popover-close:hover,
.definition-popover-close:focus-visible {
color: var(--navy);
}
@media (max-width: 820px) {
.study-page {
padding-top: 94px;
}
.study-page .study-hero {
padding: 38px 0 30px;
}
.study-page .study-section > .container {
padding: 36px 0;
}
.study-page .info-grid,
.study-page .standards-grid,
.study-page .fault-type-grid,
.study-page .process-grid,
.study-page .source-figure-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.study-page .container {
width: min(100% - 28px, var(--max-width));
}
.study-page .study-hero h1 {
font-size: clamp(2rem, 11vw, 3rem);
}
.study-page .study-pagination a,
.study-page .study-pagination span {
font-size: 0.72rem;
min-height: 29px;
padding: 7px 5px;
}
.study-page .study-diagram-card {
margin-top: 22px;
padding: 12px;
}
.study-page .study-panel,
.study-page .study-callout {
padding: 18px 18px;
}
}