/* ========================================================================= Prentiss Connect — main.css -------------------------------------------------------------------------- Mobile-first. Custom properties drive both light and dark modes; the dark-mode overrides live in dark-mode.css and switch on [data-theme="dark"] applied to by the theme toggle. ========================================================================= */ /* ----- 1. Variables ------------------------------------------------------ */ :root { --pc-primary: #2B347D; --pc-primary-deep: #1A1F4E; --pc-accent: #0C8342; /* Metallic gradient stops (light edge / base / dark edge) */ --pc-primary-light: #3D4A9E; --pc-primary-dark: #1A1F5E; --pc-deep-light: #2B347D; --pc-deep-dark: #141840; --pc-accent-light: #1AAD5A; --pc-accent-dark: #086830; /* Hover hue-shift palette */ --pc-primary-hover-light: #4355B8; --pc-primary-hover-dark: #222A6A; --pc-deep-hover-light: #3545A8; --pc-deep-hover-dark: #181D52; --pc-accent-hover-light: #14B858; --pc-accent-hover-dark: #0A7838; --pc-bg: #FFFFFF; --pc-surface: #F7F9FC; --pc-surface-2: #EDF2F8; --pc-text: #0F1B2D; --pc-text-muted: #4A5878; --pc-border: #E2E8F0; --pc-border-strong: #CBD5E1; --pc-info: #0EA5E9; --pc-warning: #F27D2F; --pc-critical: #E12728; --pc-shadow-soft: 0 4px 12px rgba(0,0,0,0.08); --pc-shadow-lift: 0 8px 24px rgba(0,0,0,0.12); --pc-shadow-btn: 0 2px 6px rgba(43,52,125,0.28); --pc-shadow-btn-accent: 0 2px 6px rgba(12,131,66,0.32); --pc-radius-sm: 6px; --pc-radius-md: 8px; --pc-radius-lg: 16px; --pc-radius-pill: 999px; --pc-font-heading: 'Sora', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --pc-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --pc-step-1: 0.25rem; --pc-step-2: 0.5rem; --pc-step-3: 1rem; --pc-step-4: 1.5rem; --pc-step-5: 2rem; --pc-step-6: 3rem; --pc-step-7: 4rem; --pc-step-8: 6rem; --pc-step-9: 8rem; --pc-container: 1200px; --pc-container-wide: 1400px; --pc-header-height: 80px; --pc-utility-height: 40px; --pc-transition-fast: 150ms ease; --pc-transition-med: 220ms ease; --pc-transition-slow: 400ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* ----- 2. Reset & base --------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { margin: 0; padding: 0; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; /* Layered background — creates the "ambient-lit dashboard" feel that makes glassmorphic cards look beautiful: 1. Soft blue glow blob (top-left) — primary brand color 2. Soft green glow blob (bottom-right) — accent brand color 3. Subtle dot grid for tech texture 4. Vertical ombre underneath for depth */ background-color: var(--pc-bg); background-image: /* Multiple soft colored light sources for ambient depth. */ radial-gradient(ellipse 50% 40% at 8% 12%, rgba(43, 52, 125, 0.45), transparent 65%), radial-gradient(ellipse 50% 40% at 95% 80%, rgba(12, 131, 66, 0.30), transparent 65%), radial-gradient(ellipse 35% 30% at 60% 45%, rgba(245, 158, 11, 0.14), transparent 70%), radial-gradient(ellipse 30% 25% at 25% 75%, rgba(168, 85, 247, 0.14), transparent 75%), radial-gradient(circle at 1px 1px, rgba(43, 52, 125, 0.06) 1px, transparent 1.5px), linear-gradient(180deg, color-mix(in srgb, var(--pc-bg) 92%, black 8%) 0%, var(--pc-bg) 35%, var(--pc-bg) 100%); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 28px 28px, 100% 100%; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; background-attachment: fixed; color: var(--pc-text); font-family: var(--pc-font-body); font-size: 1rem; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Kill WordPress block layout's automatic margin-block-start between sibling chrome elements (alert banner -> template-part header -> main). Without these the FSE flow layout inserts ~24px gaps. */ .pc-alert-banner, .pc-utility-bar, .pc-site-header, .pc-site-footer, header.wp-block-template-part, footer.wp-block-template-part { margin-block-start: 0 !important; margin-block-end: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } header.wp-block-template-part, footer.wp-block-template-part { padding-block-start: 0 !important; padding-top: 0 !important; } /* Prevent page background from showing as white bars between chrome elements */ header.wp-block-template-part { background: #0F1B2D !important; display: block !important; line-height: 0; } header.wp-block-template-part > * { line-height: normal; } header.wp-block-template-part > * + *, .wp-block-template-part > * + * { margin-block-start: 0 !important; margin-top: 0 !important; } /* Zero any margin/padding WordPress adds to the shortcode block wrapper */ .wp-block-template-part .wp-block-shortcode { margin: 0 !important; padding: 0 !important; display: block; } body > * + *, body .is-layout-flow > * + *:where(.pc-alert-banner, .pc-utility-bar, .pc-site-header) { margin-block-start: 0 !important; } /* Catch-all: kill any block gap WordPress injects between site-level blocks. theme.json blockGap sets both margin AND flex gap — zero both. */ .wp-site-blocks { padding-block-start: 0 !important; margin-block-start: 0 !important; margin-top: 0 !important; gap: 0 !important; row-gap: 0 !important; } .wp-site-blocks > * + * { margin-block-start: 0 !important; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4, h5, h6 { font-family: var(--pc-font-heading); font-weight: 700; margin: 0 0 var(--pc-step-3); line-height: 1.2; color: var(--pc-text); /* Balance line breaks across short headings so they don't leave a single orphan word on the last line. */ text-wrap: balance; } /* Body paragraphs get the "pretty" algorithm — prevents widows/orphans without forcing every line to be the same length. */ p { text-wrap: pretty; } h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.1; } h2 { font-size: clamp(2rem, 4vw, 2.5rem); } h3 { font-size: clamp(1.5rem, 3vw, 1.75rem); font-weight: 600; } h4 { font-size: 1.25rem; font-weight: 600; } p { margin: 0 0 var(--pc-step-3); } a { color: var(--pc-primary); text-decoration: none; transition: color var(--pc-transition-fast); } a:hover { color: var(--pc-primary-deep); } a:focus-visible { outline: 3px solid var(--pc-primary); outline-offset: 2px; border-radius: 2px; } ul, ol { padding-left: 1.25rem; } /* ----- 3. Utility -------------------------------------------------------- */ .pc-container { width: 100%; max-width: var(--pc-container); margin-inline: auto; padding-inline: var(--pc-step-3); } @media (min-width: 768px) { .pc-container { padding-inline: var(--pc-step-4); } } .pc-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .pc-honeypot { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } .pc-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 0.75rem 1rem; background: var(--pc-primary); color: #fff !important; border-radius: 0 0 var(--pc-radius-md) 0; text-decoration: none; font-weight: 600; } .pc-skip-link:focus { left: 0; } .pc-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--pc-primary); font-size: 0.875rem; margin-bottom: var(--pc-step-2); } /* ----- 4. Buttons -------------------------------------------------------- */ .pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.6rem; border: 1px solid transparent; border-radius: var(--pc-radius-sm); font-family: var(--pc-font-body); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform var(--pc-transition-fast), box-shadow var(--pc-transition-fast), background var(--pc-transition-med), color var(--pc-transition-fast), border-color var(--pc-transition-fast); line-height: 1.2; white-space: nowrap; position: relative; isolation: isolate; } .pc-btn:focus-visible { outline: 3px solid var(--pc-primary); outline-offset: 3px; } .pc-btn:hover { transform: translateY(-2px); } .pc-btn:active { transform: translateY(0); transition-duration: 80ms; } /* Buttons: brushed-metal gradients with proper depth. Each button has: - 18-22% lightness range top-to-bottom (clearly metallic, not flat) - Inset top highlight + bottom shadow for embossed feel - Outer drop-shadow with brand-color tint - Border one shade darker than mid color - On hover: gradient shifts to a brighter top, outer glow intensifies */ /* ---- Primary: brushed brand blue ---- */ .pc-btn--primary { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-primary) 76%, white 24%) 0%, var(--pc-primary) 50%, color-mix(in srgb, var(--pc-primary) 78%, black 22%) 100%); color: #fff; border-color: color-mix(in srgb, var(--pc-primary) 70%, black 30%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(0,0,0,0.20), 0 3px 6px rgba(43,52,125,0.30), 0 1px 2px rgba(0,0,0,0.15); text-shadow: 0 1px 1px rgba(0,0,0,0.18); } .pc-btn--primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-primary) 65%, white 35%) 0%, color-mix(in srgb, var(--pc-primary) 90%, white 10%) 50%, color-mix(in srgb, var(--pc-primary) 75%, black 25%) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 rgba(0,0,0,0.20), 0 6px 16px rgba(43,52,125,0.45), 0 2px 4px rgba(0,0,0,0.20); } /* ---- Secondary: logo purple ---- */ .pc-btn--secondary { background: linear-gradient(180deg, #7A78C4 0%, #6260AB 50%, #4A4888 100%); color: #fff; border-color: #38367A; box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.25), 0 3px 6px rgba(98,96,171,0.35), 0 1px 2px rgba(0,0,0,0.18); text-shadow: 0 1px 1px rgba(0,0,0,0.22); } .pc-btn--secondary:hover { background: linear-gradient(180deg, #8E8CD4 0%, #7270BF 50%, #5553A0 100%); color: #fff; border-color: #38367A; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.25), 0 6px 16px rgba(98,96,171,0.50), 0 2px 4px rgba(0,0,0,0.22); } /* ---- Accent: brushed brand green ---- */ .pc-btn--accent { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-accent) 72%, white 28%) 0%, var(--pc-accent) 50%, color-mix(in srgb, var(--pc-accent) 80%, black 20%) 100%); color: #fff; border-color: color-mix(in srgb, var(--pc-accent) 70%, black 30%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.18), 0 3px 6px rgba(12,131,66,0.30), 0 1px 2px rgba(0,0,0,0.10); text-shadow: 0 1px 1px rgba(0,0,0,0.20); } .pc-btn--accent:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-accent) 60%, white 40%) 0%, color-mix(in srgb, var(--pc-accent) 88%, white 12%) 50%, color-mix(in srgb, var(--pc-accent) 75%, black 25%) 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(0,0,0,0.18), 0 6px 16px rgba(12,131,66,0.45), 0 2px 4px rgba(0,0,0,0.15); } /* ---- Ghost: subtle outline (mobile menu, etc.) ---- */ .pc-btn--ghost { background: transparent; color: var(--pc-text); border: 1px solid var(--pc-border-strong); box-shadow: none; } .pc-btn--ghost:hover { background: var(--pc-surface); border-color: var(--pc-primary); color: var(--pc-primary); } /* ---- Facebook: "out of this world" follow button ---- Brushed Facebook-blue metal to match the button system, plus a live sweeping glare, an aurora glow on hover, and a nudging icon. Contrast: base #0B57D0 with white text ≈ 4.6:1 (WCAG AA). */ .pc-btn--facebook { --pc-fb: #0B57D0; --pc-fb-bright: #1877F2; --pc-fb-deep: #073A8C; background: linear-gradient(180deg, color-mix(in srgb, var(--pc-fb-bright) 78%, white 22%) 0%, var(--pc-fb) 52%, var(--pc-fb-deep) 100%); color: #fff; border-color: color-mix(in srgb, var(--pc-fb-deep) 80%, black 20%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.42), inset 0 -1px 0 rgba(0,0,0,0.22), 0 3px 6px rgba(11,87,208,0.35), 0 1px 2px rgba(0,0,0,0.15); text-shadow: 0 1px 1px rgba(0,0,0,0.28); overflow: hidden; /* clip the sweeping glare */ } .pc-btn--facebook .pc-fb-btn__label, .pc-btn--facebook .pc-fb-btn__icon { position: relative; z-index: 2; } .pc-btn--facebook .pc-fb-btn__icon { display: inline-flex; transition: transform var(--pc-transition-med); } /* Sweeping glare that lives on the button (subtle idle shimmer). */ .pc-fb-btn__glare { position: absolute; top: 0; left: -60%; width: 45%; height: 100%; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%); transform: skewX(-18deg); animation: pc-fb-sweep 9s ease-in-out infinite; } @keyframes pc-fb-sweep { 0%, 100% { left: -60%; } 45%, 55% { left: 130%; } } .pc-btn--facebook:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-fb-bright) 66%, white 34%) 0%, color-mix(in srgb, var(--pc-fb-bright) 92%, white 8%) 50%, var(--pc-fb) 100%); border-color: color-mix(in srgb, var(--pc-fb-deep) 80%, black 20%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), inset 0 -1px 0 rgba(0,0,0,0.22), 0 8px 22px rgba(24,119,242,0.55), 0 0 0 1px rgba(24,119,242,0.35), 0 2px 6px rgba(0,0,0,0.22); } /* Aurora glow ring behind the button on hover/focus. */ .pc-btn--facebook::before { content: ""; position: absolute; inset: -3px; z-index: 0; border-radius: inherit; background: conic-gradient(from 0deg, #1877F2, #4da3ff, #8f5cff, #1877F2, #4da3ff, #1877F2); filter: blur(7px); opacity: 0; transition: opacity var(--pc-transition-med); } .pc-btn--facebook:hover::before, .pc-btn--facebook:focus-visible::before { opacity: 0.85; animation: pc-fb-spin 6s linear infinite; } @keyframes pc-fb-spin { to { transform: rotate(360deg); } } .pc-btn--facebook:hover .pc-fb-btn__icon { transform: scale(1.18) rotate(-8deg); } .pc-btn--facebook:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } /* Respect reduced-motion: kill the sweep, spin, and idle animations. */ @media (prefers-reduced-motion: reduce) { .pc-fb-btn__glare { animation: none; opacity: 0; } .pc-btn--facebook:hover::before, .pc-btn--facebook:focus-visible::before { animation: none; } .pc-btn--facebook .pc-fb-btn__icon { transition: none; } .pc-btn--facebook:hover .pc-fb-btn__icon { transform: none; } } .pc-btn--xsmall { padding: 0.3rem 0.75rem; font-size: 0.78rem; gap: 0.3rem; } .pc-btn--small { padding: 0.5rem 1rem; font-size: 0.9rem; } .pc-btn--large { padding: 1.125rem 2rem; font-size: 1.125rem; } .pc-btn--block { display: flex; width: 100%; } /* ----- 5. Alert banner --------------------------------------------------- */ .pc-alert-banner { width: 100%; color: #fff; background: var(--pc-info); display: block; margin: 0 !important; padding-bottom: 0 !important; } .pc-alert-banner--info { background: var(--pc-info); } .pc-alert-banner--warning { background: var(--pc-warning); color: #1a1300; } .pc-alert-banner--critical { background: var(--pc-critical); } .pc-alert-banner__inner { max-width: var(--pc-container-wide); margin: 0 auto; padding: 0.3rem 3rem; display: flex; gap: 0.75rem; align-items: center; justify-content: center; text-align: center; position: relative; } .pc-alert-banner__icon { display: inline-flex; } .pc-alert-banner__message { margin: 0; font-weight: 500; } .pc-alert-banner__link { color: inherit; text-decoration: underline; margin-left: 0.5rem; } .pc-alert-banner__close { position: absolute; right: 0.75rem; top: 0; bottom: 0; margin-block: auto; display: inline-flex; align-items: center; justify-content: center; height: 28px; width: 28px; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; line-height: 0; border-radius: var(--pc-radius-sm); } .pc-alert-banner__close svg { display: block; } .pc-alert-banner__close:hover { background: rgba(255,255,255,0.15); } .pc-alert-banner.is-dismissed { display: none; } /* ----- 6. Utility bar (above main header) -------------------------------- */ .pc-utility-bar { background: var(--pc-primary-deep); color: rgba(255,255,255,0.92); font-size: 0.875rem; border: 0; margin: 0; padding: 0; } .pc-alert-banner { margin: 0; padding: 0; border: 0; } .pc-utility-bar__inner { max-width: var(--pc-container-wide); margin: 0 auto; padding: 0.25rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .pc-utility-bar__left { display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .pc-utility-bar__right { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-shrink: 0; } @media (min-width: 1024px) { /* header CTA takes over on desktop — hide from utility bar to avoid duplicates */ .pc-utility-bar__right { display: none; } } .pc-utility-bar__sep { opacity: 0.4; user-select: none; } .pc-utility-bar__phone, .pc-utility-bar__link { display: inline-flex; align-items: center; gap: 0.4rem; color: inherit; text-decoration: none; } .pc-utility-bar__phone:hover, .pc-utility-bar__link:hover { color: #fff; } .pc-utility-bar__phone strong { font-weight: 700; } @media (max-width: 767px) { .pc-utility-bar { display: none; } } /* Theme toggle — used in the main header CTA area now */ .pc-theme-toggle { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--pc-surface); border: 1px solid var(--pc-border); color: var(--pc-text); border-radius: var(--pc-radius-pill); cursor: pointer; transition: background var(--pc-transition-fast), border-color var(--pc-transition-fast), color var(--pc-transition-fast); } .pc-theme-toggle:hover { background: var(--pc-bg); border-color: var(--pc-primary); color: var(--pc-primary); } .pc-theme-toggle__icon { display: inline-flex; } .pc-theme-toggle__icon--moon { display: none; } [data-theme="dark"] .pc-theme-toggle__icon--sun { display: none; } [data-theme="dark"] .pc-theme-toggle__icon--moon { display: inline-flex; } /* ----- 7. Site header --------------------------------------------------- */ /* The FSE template-part wrapper (
) would otherwise constrain sticky to the header's own height. Letting the wrapper "disappear" from layout lets .pc-site-header stick relative to .wp-site-blocks (full page height). !important is required because the earlier "white bars" rule sets display: block !important on this wrapper. */ header.wp-block-template-part:has(> .pc-site-header) { display: contents !important; background: transparent !important; } /* wpautop wraps the shortcode output's whitespace + skip-link in

tags. In the DOM these

s are children of the FSE wrapper (display:contents doesn't change parentage), so we target the wrapper directly. Their default paragraph height shows as wasted space between the alert banner, utility bar, and site header. Collapse them — the skip link inside is position:absolute and unaffected. */ .wp-block-template-part > p, .wp-site-blocks > p { margin: 0 !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; } .pc-site-header { position: sticky; top: 0; z-index: 50; background: var(--pc-bg); border-bottom: 1px solid var(--pc-border); } /* Offset for the WP admin bar (32px desktop, 46px mobile <=782px) so the sticky header doesn't slide under it for logged-in users. */ body.admin-bar .pc-site-header { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .pc-site-header { top: 46px; } } .pc-site-header.is-scrolled { box-shadow: var(--pc-shadow-soft); } /* On the home page the header blends into the dark hero — no white strip between the utility bar and the hero image. */ body.home .pc-site-header, body.front-page .pc-site-header { background: #0F1B2D; border-bottom: 0; color: #fff; } body.home .pc-site-header .pc-site-header__logo--light, body.front-page .pc-site-header .pc-site-header__logo--light { display: none; } body.home .pc-site-header .pc-site-header__logo--dark, body.front-page .pc-site-header .pc-site-header__logo--dark { display: inline-block; } body.home .pc-site-nav__menu > .menu-item > a, body.front-page .pc-site-nav__menu > .menu-item > a { color: #fff; } body.home .pc-site-nav__menu > .menu-item > a:hover, body.front-page .pc-site-nav__menu > .menu-item > a:hover { background: rgba(255,255,255,0.10); color: var(--pc-accent); } /* Active page indicator on the dark home header. The default active-item style (line ~644) uses a near-white pill + blue text, which collides with the homepage's white-text override — the text disappears into the pill. On the dark header, use a translucent white highlight instead so the white text stays readable. */ body.home .pc-site-nav__menu > .current-menu-item > a, body.front-page .pc-site-nav__menu > .current-menu-item > a { background: rgba(255,255,255,0.14); color: #fff; } body.home .pc-site-header__tagline, body.front-page .pc-site-header__tagline { color: rgba(255,255,255,0.75); border-color: rgba(255,255,255,0.15); } body.home .pc-mobile-trigger, body.front-page .pc-mobile-trigger, body.home .pc-theme-toggle, body.front-page .pc-theme-toggle { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); color: #fff; } body.home .pc-theme-toggle:hover, body.front-page .pc-theme-toggle:hover { background: rgba(255,255,255,0.18); color: var(--pc-accent); border-color: rgba(255,255,255,0.30); } /* No overlap needed — header is solid dark on home, hero starts immediately below it. Gap is killed by .wp-site-blocks { gap: 0 } above. */ body.home .pc-main--home, body.front-page .pc-main--home { position: relative; } /* wpautop wraps the mobile-trigger button in a stray

. As a grid item that

has default paragraph margins which stretch the header row height, even though the button inside is display:none on desktop. display:contents on the

takes it out of layout entirely without affecting accessibility. */ .pc-site-header__inner > p { display: contents !important; margin: 0 !important; padding: 0 !important; } .pc-site-header__inner { max-width: var(--pc-container-wide); margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; min-height: var(--pc-header-height); } @media (max-width: 1023px) { .pc-site-header__inner { grid-template-columns: auto 1fr auto; } .pc-site-nav { display: none; } /* Keep the CTA visible but hide the CTA buttons (not the theme toggle) */ .pc-site-header__cta-btn { display: none; } } .pc-site-header__logo-link { display: inline-flex; align-items: center; } .pc-site-header__logo { height: 80px; width: auto; } .pc-site-header__logo--dark { display: none; } [data-theme="dark"] .pc-site-header__logo--light { display: none; } [data-theme="dark"] .pc-site-header__logo--dark { display: block; } .pc-site-header__tagline { margin: 0; font-size: 0.75rem; color: var(--pc-text-muted); margin-left: 0.75rem; padding-left: 0.75rem; border-left: 1px solid var(--pc-border); } @media (max-width: 1023px) { .pc-site-header__tagline { display: none; } } .pc-site-nav__menu, .pc-mobile-menu__list { list-style: none; margin: 0; padding: 0; } .pc-site-nav__menu { display: flex; align-items: center; gap: 0.5rem; justify-self: center; } .pc-site-nav__menu > .menu-item { position: relative; } .pc-site-nav__menu > .menu-item > a { display: block; white-space: nowrap; padding: 0.625rem 0.875rem; color: var(--pc-text); font-weight: 500; border-radius: var(--pc-radius-sm); transition: background var(--pc-transition-fast), color var(--pc-transition-fast); } .pc-site-nav__menu > .menu-item > a:hover, .pc-site-nav__menu > .current-menu-item > a { background: var(--pc-surface); color: var(--pc-primary); } /* Submenus */ .pc-site-nav__menu .sub-menu { list-style: none; margin: 0; padding: 0.5rem; position: absolute; top: 100%; left: 0; background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-md); box-shadow: var(--pc-shadow-lift); min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity var(--pc-transition-fast), transform var(--pc-transition-fast), visibility var(--pc-transition-fast); z-index: 110; } .pc-site-nav__menu .menu-item:hover > .sub-menu, .pc-site-nav__menu .menu-item:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } .pc-site-nav__menu .sub-menu a { display: block; padding: 0.5rem 0.75rem; color: var(--pc-text); border-radius: var(--pc-radius-sm); } .pc-site-nav__menu .sub-menu a:hover { background: var(--pc-surface); } .pc-site-header__cta { display: inline-flex; gap: 0.5rem; } .pc-mobile-trigger { display: none; background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-sm); padding: 0.5rem; cursor: pointer; color: var(--pc-text); } @media (max-width: 1023px) { .pc-mobile-trigger { display: inline-flex; align-items: center; } } /* ----- 8. Mobile menu (full-screen overlay) ------------------------------ */ .pc-mobile-menu { position: fixed; inset: 0; z-index: 200; background: rgba(247, 249, 252, 0.96); backdrop-filter: blur(8px); overflow-y: auto; opacity: 0; visibility: hidden; transform: scale(0.95); transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease; } .pc-mobile-menu.is-open { opacity: 1; visibility: visible; transform: scale(1); } .pc-mobile-menu__inner { max-width: 720px; margin: 0 auto; padding: 1.5rem; } .pc-mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .pc-mobile-menu__title { font-family: var(--pc-font-heading); font-size: 1.5rem; font-weight: 700; } .pc-mobile-menu__close { background: transparent; border: 1px solid var(--pc-border); border-radius: var(--pc-radius-pill); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--pc-text); } .pc-mobile-menu__list { list-style: none; padding: 0; margin: 0 0 1.5rem; } .pc-mobile-menu__list .menu-item { border-bottom: 1px solid var(--pc-border); } .pc-mobile-menu__list .menu-item > a { display: block; padding: 1rem 0.5rem; min-height: 48px; color: var(--pc-text); font-weight: 500; font-size: 1.1rem; text-decoration: none; } .pc-mobile-menu__list .sub-menu { list-style: none; padding: 0 0 0.5rem 1rem; margin: 0; } .pc-mobile-menu__list .sub-menu a { display: block; padding: 0.625rem 0.5rem; color: var(--pc-text-muted); font-size: 1rem; } .pc-mobile-menu__cta { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 2rem; } body.has-mobile-menu-open { overflow: hidden; } /* Push the menu down so the WP admin bar (logged-in admins only) doesn't clip the "Menu" title and close button. */ .admin-bar .pc-mobile-menu { top: 32px; } @media (max-width: 782px) { .admin-bar .pc-mobile-menu { top: 46px; } } /* ----- 9. Hero (home page slider) ---------------------------------------- */ .pc-hero { position: relative; overflow: hidden; color: #fff; min-height: 480px; max-height: 70vh; display: flex; align-items: stretch; isolation: isolate; background-color: #0F1B2D; } /* Top-edge fade so the hero bleeds visually into the solid dark header above */ .pc-hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; background: linear-gradient(180deg, #0F1B2D 0%, transparent 100%); z-index: 3; pointer-events: none; } .pc-hero__slides { list-style: none; margin: 0; padding: 0; position: relative; flex: 1; width: 100%; } .pc-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; pointer-events: none; display: flex; align-items: center; } .pc-hero__slide.is-active { opacity: 1; pointer-events: auto; } .pc-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -1; } /* Video slide background — fills the slide just like the image background. The dark gradient overlay sits in pc-hero__overlay so video frames stay readable behind the text. */ .pc-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; background: #0F1B2D; /* shows while the video loads / decodes */ } .pc-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(15,27,45,0.78), rgba(0,61,122,0.65)); z-index: -1; pointer-events: none; } .pc-hero__content { width: 100%; max-width: var(--pc-container); margin: 0 auto; padding: 1rem 1.5rem 5rem; position: relative; z-index: 4; } .pc-hero__eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.875rem; color: rgba(255,255,255,0.85); margin: 0 0 1rem; font-weight: 600; } .pc-hero__title { font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1.05; color: #fff; margin: 0 0 1rem; max-width: 24ch; } .pc-hero__sub { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 0 0 2rem; max-width: 56ch; color: rgba(255,255,255,0.92); } .pc-hero__ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; } .pc-hero__fiber-glow { position: absolute; top: 30%; left: -10%; width: 130%; height: 4px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(12,131,66,0.0) 30%, rgba(12,131,66,0.85) 50%, rgba(12,131,66,0.0) 70%, transparent 100%); filter: blur(1px); animation: pc-fiber-pulse 8s linear infinite; opacity: 0.55; z-index: 0; } @keyframes pc-fiber-pulse { 0% { transform: translateX(-30%); } 100% { transform: translateX(30%); } } @media (prefers-reduced-motion: reduce) { .pc-hero__fiber-glow { animation: none; } } .pc-hero__controls { /* Sit well above the bottom-edge SVG divider AND above the quick-action bar that comes immediately after the hero in flow. */ position: absolute; bottom: 6rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(0,0,0,0.35); padding: 0.5rem 0.75rem; border-radius: var(--pc-radius-pill); backdrop-filter: blur(6px); z-index: 5; } .pc-hero__btn { background: transparent; border: 0; color: #fff; width: 36px; height: 36px; border-radius: var(--pc-radius-pill); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.25rem; line-height: 1; } .pc-hero__btn:hover { background: rgba(255,255,255,0.12); } .pc-hero__btn--prev { transform: rotate(180deg); } .pc-hero__btn--play { font-size: 0.85rem; } .pc-hero__dots { list-style: none; margin: 0; padding: 0; display: inline-flex; align-items: center; gap: 0.4rem; } .pc-hero__dots button { background: rgba(255,255,255,0.45); border: 0; width: 10px; height: 10px; border-radius: 50%; cursor: pointer; transition: width var(--pc-transition-fast), background var(--pc-transition-fast); padding: 0; } .pc-hero__dots button.is-active { background: var(--pc-accent); width: 28px; border-radius: 5px; } .pc-hero__divider { position: absolute; bottom: -1px; left: 0; right: 0; color: var(--pc-bg); pointer-events: none; height: 80px; z-index: 4; } .pc-hero__divider svg { width: 100%; height: 100%; display: block; } @media (max-width: 767px) { .pc-hero { min-height: 440px; } .pc-hero__content { padding: 1.5rem 1.5rem 4.5rem; } } /* On narrower viewports the CTAs sit lower (taller wrapped headline + sub pushes the vertically-centered content down), so drop the controls pill into the dark center valley of the wave divider, clear of the buttons. */ @media (max-width: 1023px) { .pc-hero__controls { bottom: 1rem; } } /* Edge-mounted prev/next arrows. Sit vertically centered on the slide's left and right edges; fade in on hover or keyboard focus so they don't compete with the CTAs at rest. On touch devices (no hover), swipe and dots handle navigation, so the arrows stay hidden unless focused. */ .pc-hero__edge { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.35); color: #fff; font-size: 1.75rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity var(--pc-transition-fast), background var(--pc-transition-fast); backdrop-filter: blur(6px); z-index: 5; } .pc-hero__edge--prev { left: 1rem; } .pc-hero__edge--next { right: 1rem; } .pc-hero:hover .pc-hero__edge, .pc-hero__edge:focus-visible { opacity: 1; } .pc-hero__edge:hover { background: rgba(0,0,0,0.55); } /* ----- 10. Quick action bar --------------------------------------------- */ .pc-quickbar { /* Subtle gray panel so the white cards stand out clearly in light mode. In dark mode the variables flip and the same logic produces a slightly-lighter-than-bg panel with cards that pop on top. */ background: var(--pc-surface); border-bottom: 1px solid var(--pc-border); position: relative; z-index: 5; padding: var(--pc-step-5) 0 var(--pc-step-6); } .pc-quickbar__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .pc-quick-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.5rem 1.25rem; background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-md); color: var(--pc-text); text-decoration: none; transition: transform var(--pc-transition-fast), box-shadow var(--pc-transition-fast), border-color var(--pc-transition-fast); box-shadow: var(--pc-shadow-soft); position: relative; overflow: hidden; isolation: isolate; } .pc-quick-card::before { /* Decorative top sheen — subtle metallic highlight */ content: ""; position: absolute; inset: 0 0 auto 0; height: 50%; background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent); pointer-events: none; z-index: 0; } .pc-quick-card > * { position: relative; z-index: 1; } /* Oversized background icon — sits behind the content, tilted, with a soft drop-shadow for depth. Sized to 90% of the card's smaller dimension via clamp() so it scales with the card. */ .pc-quick-card__watermark { position: absolute; right: -18%; bottom: -22%; width: clamp(160px, 90%, 240px); height: auto; color: rgba(255, 255, 255, 0.85); opacity: 0.14; transform: rotate(-15deg); transform-origin: center; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.35)); pointer-events: none; z-index: 0; transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease; } .pc-quick-card:hover .pc-quick-card__watermark { opacity: 0.20; transform: rotate(-10deg) scale(1.06); } .pc-quick-card:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 14px 30px rgba(15, 27, 45, 0.28), 0 4px 10px rgba(15, 27, 45, 0.18); color: var(--pc-text); } .pc-quick-card__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,0.20); box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 1px 2px rgba(0,0,0,0.15); color: inherit; margin-bottom: 0.25rem; } .pc-quick-card__title { font-weight: 700; font-family: var(--pc-font-heading); font-size: 1.125rem; line-height: 1.3; } .pc-quick-card__sub { font-size: 0.875rem; opacity: 0.85; } /* ---- Topic-colored quick cards (all metallic) ---- */ .pc-quick-card--green, .pc-quick-card--blue, .pc-quick-card--amber, .pc-quick-card--red { color: #fff; border: 1px solid rgba(0,0,0,0.30); text-shadow: 0 1px 2px rgba(0,0,0,0.20); } .pc-quick-card--green { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-accent) 80%, white 20%) 0%, var(--pc-accent) 55%, color-mix(in srgb, var(--pc-accent) 80%, black 20%) 100%); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 4px 12px rgba(12,131,66,0.30); } .pc-quick-card--green:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-accent) 88%, white 12%) 0%, color-mix(in srgb, var(--pc-accent) 80%, black 20%) 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.50), 0 8px 22px rgba(12,131,66,0.45); } .pc-quick-card--blue { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-primary) 80%, white 20%) 0%, var(--pc-primary) 55%, color-mix(in srgb, var(--pc-primary) 80%, black 20%) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 4px 12px rgba(43,52,125,0.30); } .pc-quick-card--blue:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-primary) 88%, white 12%) 0%, color-mix(in srgb, var(--pc-primary) 80%, black 20%) 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 8px 22px rgba(43,52,125,0.45); } .pc-quick-card--amber { background: linear-gradient(180deg, #FCC960 0%, #F59E0B 55%, #B47208 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 12px rgba(245,158,11,0.30); } .pc-quick-card--amber:hover { background: linear-gradient(180deg, #FED885 0%, #B47208 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 8px 22px rgba(245,158,11,0.45); } .pc-quick-card--red { background: linear-gradient(180deg, #F05252 0%, #E12728 55%, #8E1818 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 4px 12px rgba(225,39,40,0.30); } .pc-quick-card--red:hover { background: linear-gradient(180deg, #F07070 0%, #8E1818 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 8px 22px rgba(225,39,40,0.45); } /* ----- 11. Sections ----------------------------------------------------- */ .pc-section { /* Glassmorphic card — semi-transparent surface that catches the colored ambient glows on the body bg, with a diagonal sheen overlay and a primary-blue glow shadow that gives the card its own colored light. */ max-width: var(--pc-container); margin: var(--pc-step-5) auto; padding: var(--pc-step-6) var(--pc-step-4); background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, transparent 55%), color-mix(in srgb, var(--pc-surface) 48%, transparent); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid color-mix(in srgb, white 30%, transparent); border-radius: var(--pc-radius-lg); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.10), 0 12px 32px rgba(15, 27, 45, 0.14), 0 0 80px -10px rgba(43, 52, 125, 0.35); position: relative; } @media (max-width: 767px) { .pc-section { padding: var(--pc-step-5) var(--pc-step-3); } } @media (min-width: 1024px) { .pc-section { padding-block: var(--pc-step-7); } } /* Sections that already wrap content in .pc-container shouldn't double-pad or constrain — the .pc-section itself is now the container. */ .pc-section > .pc-container, .pc-section > .pc-cta-banner { padding-inline: 0; max-width: 100%; } .pc-section > .pc-cta-banner > .pc-container { padding-inline: 1.5rem; } .pc-section__head { max-width: 720px; margin: 0 auto var(--pc-step-5); } .pc-section__head--center { text-align: center; } .pc-section__lead { color: var(--pc-text-muted); font-size: 1.125rem; } .pc-section__split { display: grid; gap: var(--pc-step-5); align-items: center; grid-template-columns: 1fr; } @media (min-width: 1024px) { .pc-section__split { grid-template-columns: 1fr 1fr; } } .pc-section__art img, .pc-section__art svg { border-radius: var(--pc-radius-lg); width: 100%; height: auto; max-width: 100%; } .pc-section__art { color: var(--pc-text); } .pc-section__foot { text-align: center; margin-top: var(--pc-step-5); } /* Section variants previously had alternating background colors. They now all inherit the diagonal ombre from .pc-section above so the homepage has a consistent unified card look. */ /* ----- 12. Plan cards --------------------------------------------------- */ .pc-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Subgrid rows: title / price / speeds / desc / features / cta. features=1fr absorbs any leftover height so the CTA pins to the bottom. */ grid-template-rows: auto auto auto auto 1fr auto; gap: 1.5rem 1.5rem; max-width: 920px; margin: 0 auto; } .pc-plan-card { position: relative; padding: 2rem 1.5rem 2rem; background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); box-shadow: var(--pc-shadow-soft); display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 1rem; transition: transform var(--pc-transition-med), box-shadow var(--pc-transition-med); } .pc-plan-card:hover { transform: translateY(-4px); box-shadow: var(--pc-shadow-lift); } .pc-plan-card--popular { border-color: var(--pc-accent); background: linear-gradient(180deg, var(--pc-bg) 0%, rgba(12,131,66,0.04) 100%); } .pc-plan-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--pc-accent); color: var(--pc-text); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.35rem 0.75rem; border-radius: var(--pc-radius-pill); box-shadow: 0 2px 6px rgba(12,131,66,0.4); } .pc-plan-card__title { font-size: 1.5rem; margin: 0; } .pc-plan-card__price-amount { font-family: var(--pc-font-heading); font-size: 3rem; font-weight: 700; color: var(--pc-primary); } .pc-plan-card__price-per { color: var(--pc-text-muted); font-size: 1rem; margin-left: 0.25rem; } .pc-plan-card__speeds { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; background: var(--pc-surface); border-radius: var(--pc-radius-md); padding: 0.75rem 1rem; } .pc-plan-card__speeds > div { display: flex; flex-direction: column; } .pc-plan-card__num { font-family: var(--pc-font-heading); font-weight: 700; font-size: 1.25rem; color: var(--pc-text); white-space: nowrap; } .pc-plan-card__lbl { font-size: 0.8rem; color: var(--pc-text-muted); text-transform: uppercase; letter-spacing: 0.08em; } .pc-plan-card__desc { color: var(--pc-text-muted); font-size: 0.95rem; margin: 0; } .pc-plan-card__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .pc-plan-card__features li { display: flex; align-items: center; gap: 0.5rem; color: var(--pc-text); font-size: 0.95rem; } .pc-plan-card__features svg { color: var(--pc-accent); flex-shrink: 0; } /* Pin the CTA to the bottom so cards with different feature counts have their CTAs aligned across the row. */ .pc-plan-card > .pc-btn { margin-top: auto; } .pc-plan-grid { align-items: stretch; } /* FCC compliance panel — comparison table beneath the plan cards on the Plans page. Centered, max-width constrained, scrollable on small screens. */ .pc-fcc-panel { margin-top: var(--pc-step-6); padding: var(--pc-step-5); background: var(--pc-surface); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); } .pc-fcc-panel__head { text-align: center; margin-bottom: 1.5rem; } .pc-fcc-panel__head h2 { margin: 0; font-size: 1.5rem; } .pc-fcc-panel__sub { color: var(--pc-text-muted); margin: 0.25rem 0 0; } .pc-fcc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .pc-fcc-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: var(--pc-bg); border-radius: var(--pc-radius-md); overflow: hidden; } .pc-fcc-table th, .pc-fcc-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--pc-border); vertical-align: top; } .pc-fcc-table thead th { background: linear-gradient(180deg, var(--pc-primary-deep), var(--pc-primary)); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; } .pc-fcc-table tbody th { background: var(--pc-surface); color: var(--pc-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; width: 30%; } .pc-fcc-table tbody td { color: var(--pc-text); font-weight: 500; } .pc-fcc-table tbody tr:last-child th, .pc-fcc-table tbody tr:last-child td { border-bottom: 0; } .pc-fcc-panel__links { display: flex; gap: 0.75rem 1.5rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; font-size: 0.9rem; } .pc-fcc-panel__links a { color: var(--pc-primary); } /* ----- 13. Feature grid (reliability + why) ------------------------------ */ .pc-feature-grid, .pc-why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; align-items: stretch; } .pc-feature-card, .pc-why-card { background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-md); padding: 1.75rem 1.5rem; box-shadow: var(--pc-shadow-soft); transition: transform var(--pc-transition-fast), box-shadow var(--pc-transition-fast), border-color var(--pc-transition-fast); /* Same minimum height across the row + flex layout pushes any spare space evenly so cards with shorter copy don't look top-heavy. */ min-height: 220px; display: flex; flex-direction: column; justify-content: flex-start; gap: 0.5rem; position: relative; overflow: hidden; isolation: isolate; } .pc-feature-card > *, .pc-why-card > * { position: relative; z-index: 1; } .pc-feature-card:hover, .pc-why-card:hover { transform: translateY(-3px); box-shadow: var(--pc-shadow-lift); border-color: var(--pc-primary); } /* Oversized themed icon watermark — sits behind the heading/copy, tilted with a soft drop-shadow for depth. Color is the brand primary at very low opacity in light mode; dark mode boosts opacity. */ .pc-feature-card__watermark, .pc-why-card__watermark { position: absolute; right: -30px; bottom: -30px; width: 200px; height: 200px; color: var(--pc-primary); opacity: 0.07; transform: rotate(-15deg); transform-origin: center; filter: drop-shadow(0 4px 10px rgba(43, 52, 125, 0.25)); pointer-events: none; z-index: 0; transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease, color 200ms ease; } .pc-feature-card:hover .pc-feature-card__watermark, .pc-why-card:hover .pc-why-card__watermark { opacity: 0.11; color: var(--pc-primary); transform: rotate(-10deg) scale(1.06); } .pc-feature-card__icon, .pc-why-card__icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(43,52,125,0.12), rgba(12,131,66,0.12)); border-radius: var(--pc-radius-md); color: var(--pc-primary); margin-bottom: 0.5rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.30); } .pc-feature-card h3, .pc-why-card h3 { margin: 0 0 0.25rem; font-size: 1.2rem; line-height: 1.3; } .pc-feature-card p, .pc-why-card p { color: var(--pc-text-muted); margin: 0; flex: 1; } /* ----- 14. Community list ----------------------------------------------- */ .pc-community-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .pc-availability__communities-section .pc-community-grid { grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .pc-availability__communities-section .pc-community-grid { grid-template-columns: repeat(3, 1fr); } } .pc-community-grid__col { background: var(--pc-bg); border: 1px solid var(--pc-border); border-top: 3px solid var(--pc-border); border-radius: var(--pc-radius-md); padding: 1.25rem; box-shadow: var(--pc-shadow-soft); position: relative; overflow: hidden; isolation: isolate; } /* Status-color top accent — matches the dot color for each column. */ .pc-community-grid__col--available { border-top-color: var(--pc-accent); } .pc-community-grid__col--coming-soon { border-top-color: var(--pc-warning); } .pc-community-grid__col--planned { border-top-color: var(--pc-text-muted); } /* Themed watermark icon — same treatment as the feature/why cards. Tint matches each column's status color. */ .pc-community-grid__watermark { position: absolute; right: -28px; bottom: -28px; width: 180px; height: 180px; opacity: 0.08; transform: rotate(-15deg); transform-origin: center; filter: drop-shadow(0 4px 10px rgba(15, 27, 45, 0.20)); pointer-events: none; z-index: 0; transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease; } .pc-community-grid__col--available .pc-community-grid__watermark { color: var(--pc-accent); } .pc-community-grid__col--coming-soon .pc-community-grid__watermark { color: var(--pc-warning); } .pc-community-grid__col--planned .pc-community-grid__watermark { color: var(--pc-text-muted); } .pc-community-grid__col:hover .pc-community-grid__watermark { opacity: 0.13; transform: rotate(-10deg) scale(1.06); } .pc-community-grid__col > h3, .pc-community-grid__col > ul { position: relative; z-index: 1; } .pc-community-grid__col h3 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; margin: 0 0 0.75rem; } .pc-community-grid__col ul { list-style: none; padding: 0; margin: 0; } .pc-community-grid__col li { padding: 0.4rem 0; border-bottom: 1px dashed var(--pc-border); color: var(--pc-text); font-weight: 500; } .pc-community-grid__col li:last-child { border-bottom: 0; } .pc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--pc-text-muted); } .pc-dot--available { background: var(--pc-accent); box-shadow: 0 0 0 3px rgba(12,131,66,0.18); } .pc-dot--coming-soon { background: var(--pc-warning); box-shadow: 0 0 0 3px rgba(245,158,11,0.18); } .pc-dot--planned { background: var(--pc-text-muted); box-shadow: 0 0 0 3px rgba(74,88,120,0.18); } /* ----- 15. CTA banner --------------------------------------------------- */ .pc-cta-banner { background: linear-gradient(135deg, var(--pc-primary-deep) 0%, var(--pc-primary) 50%, var(--pc-accent) 100%); color: #fff; text-align: center; border-radius: var(--pc-radius-lg); padding: var(--pc-step-7) 1.5rem; margin: 0 auto; max-width: var(--pc-container); box-shadow: var(--pc-shadow-lift); position: relative; overflow: hidden; } .pc-cta-banner::before { content: ""; position: absolute; top: -40%; left: -10%; width: 60%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%); pointer-events: none; } .pc-cta-banner h2 { color: #fff; } .pc-cta-banner p { color: rgba(255,255,255,0.9); font-size: 1.125rem; } /* ----- 16. Page hero (title strip on every interior page) -------------- Smarter design: NO big blue rectangle. The title sits centered on the page background, with a thin colored accent bar above (the "fiber line") and a subtle dot-pattern halo behind the title. Scales gracefully at any zoom level because nothing is a fixed-size colored block. */ .pc-page-hero { color: var(--pc-text); padding: var(--pc-step-5) var(--pc-step-4); position: relative; overflow: hidden; isolation: isolate; text-align: center; /* Glassmorphic card matching .pc-section. */ max-width: var(--pc-container); margin: var(--pc-step-5) auto var(--pc-step-3); background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, transparent 55%), color-mix(in srgb, var(--pc-surface) 48%, transparent); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid color-mix(in srgb, white 30%, transparent); border-radius: var(--pc-radius-lg); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.10), 0 12px 32px rgba(15, 27, 45, 0.14), 0 0 80px -10px rgba(43, 52, 125, 0.35); } /* Decorative top accent bar (gradient line) — rounded to match the card */ .pc-page-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent 0%, rgba(43,52,125,0.0) 10%, var(--pc-primary) 35%, var(--pc-accent) 65%, rgba(12,131,66,0.0) 90%, transparent 100%); border-top-left-radius: var(--pc-radius-lg); border-top-right-radius: var(--pc-radius-lg); z-index: 1; } /* Subtle dot-pattern halo behind the title — fades in/out at the edges */ .pc-page-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(43,52,125,0.07) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, black, transparent 80%); -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, black, transparent 80%); pointer-events: none; z-index: 0; opacity: 0.8; } .pc-page-hero > .pc-container, .pc-page-hero .wp-block-cover__inner-container, .pc-page-hero > .wp-block-group__inner-container { position: relative; z-index: 1; text-align: center; } .pc-page-hero--has-image { background-size: cover; background-position: center; } .pc-page-hero__title { color: var(--pc-text); margin: 0 auto; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; max-width: 22ch; } .pc-page-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--pc-primary); text-transform: uppercase; letter-spacing: 0.18em; margin: 0 auto 0.85rem; font-size: 0.78rem; font-weight: 700; padding: 0.4rem 0.95rem; background: rgba(43,52,125,0.08); border: 1px solid rgba(43,52,125,0.22); border-radius: var(--pc-radius-pill); } .pc-page-hero__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pc-accent); box-shadow: 0 0 8px var(--pc-accent); } .pc-page-hero__meta { color: var(--pc-text-muted); margin: 0.75rem auto 0; font-size: 0.95rem; } .pc-page-hero__desc { color: var(--pc-text-muted); margin: 0.75rem auto 0; max-width: 60ch; } /* When a page has a featured image, lay the hero over it darkly */ .pc-page-hero--has-image { color: #fff; } .pc-page-hero--has-image .pc-page-hero__title { color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.40); } .pc-page-hero--has-image .pc-page-hero__eyebrow { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.25); color: #fff; } .pc-page-hero--has-image .pc-page-hero__meta, .pc-page-hero--has-image .pc-page-hero__desc { color: rgba(255,255,255,0.92); } .pc-page-hero--has-image::after { display: none; } /* Override any wp:cover inline styles on FSE templates that still use them */ .pc-page-hero.wp-block-cover { min-height: auto !important; padding: var(--pc-step-4) 0 var(--pc-step-5) !important; } .pc-page-hero.wp-block-cover > .wp-block-cover__background, .pc-page-hero.wp-block-cover > .wp-block-cover__image-background { display: none !important; } .pc-page-hero.wp-block-cover > .wp-block-cover__inner-container { color: var(--pc-text); } .pc-page-hero.wp-block-cover .pc-page-hero__title, .pc-page-hero.wp-block-cover .pc-page-hero__eyebrow { color: var(--pc-text) !important; } .pc-page-hero.wp-block-cover .pc-page-hero__eyebrow { color: var(--pc-primary) !important; } .pc-page__body { /* Glassmorphic card matching .pc-section. */ max-width: var(--pc-container); margin: 0 auto var(--pc-step-7); padding: var(--pc-step-5) var(--pc-step-4); background: linear-gradient(135deg, rgba(255, 255, 255, 0.20) 0%, transparent 55%), color-mix(in srgb, var(--pc-surface) 48%, transparent); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid color-mix(in srgb, white 30%, transparent); border-radius: var(--pc-radius-lg); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.10), 0 12px 32px rgba(15, 27, 45, 0.14), 0 0 80px -10px rgba(43, 52, 125, 0.35); } /* Ensure the very last section on a page also has breathing room above the footer (covers homepage and any page-section-driven pages). */ .pc-main > .pc-section:last-of-type, .pc-main > .pc-page__body:last-of-type { margin-bottom: var(--pc-step-7); } /* WordPress's is-layout-flow strips top margin from first children with !important, killing the margin-top we'd otherwise give .pc-page-hero or the first .pc-section. Use parent padding instead — it's not touched by the layout-flow rule. Homepage opts out because its first child is the full-bleed hero carousel that's supposed to sit flush with the header. */ .pc-main { padding-top: var(--pc-step-5); } .pc-main--home { padding-top: 0; } @media (max-width: 767px) { .pc-page__body { padding: var(--pc-step-4) var(--pc-step-3); } .pc-page-hero { padding: var(--pc-step-4) var(--pc-step-3); } } /* Avoid double-padding when an inner .pc-container is already present. */ .pc-page-hero > .pc-container, .pc-page__body > .pc-container { padding-inline: 0; max-width: 100%; } /* Availability page — dark hero so the page has visual weight at the top */ .pc-main--availability .pc-page-hero { background: linear-gradient(135deg, var(--pc-primary-deep) 0%, #0F1B2D 100%); color: #fff; } .pc-main--availability .pc-page-hero::before { background: linear-gradient(90deg, transparent 0%, rgba(12,131,66,0.6) 40%, rgba(43,52,125,0.5) 70%, transparent 100%); } .pc-main--availability .pc-page-hero::after { background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 1px); } .pc-main--availability .pc-page-hero__title { color: #fff; } .pc-main--availability .pc-page-hero__eyebrow { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); color: #fff; } .pc-main--availability .pc-page-hero__desc { color: rgba(255,255,255,0.80); max-width: 56ch; font-size: 1.05rem; } /* ----- 17. Cards / archives -------------------------------------------- */ .pc-archive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .pc-card { background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-md); overflow: hidden; box-shadow: var(--pc-shadow-soft); transition: transform var(--pc-transition-fast), box-shadow var(--pc-transition-fast); display: flex; flex-direction: column; } .pc-card:hover { transform: translateY(-3px); box-shadow: var(--pc-shadow-lift); } .pc-card__thumb { display: block; } .pc-card__thumb img { width: 100%; height: auto; } .pc-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; } .pc-card__meta { color: var(--pc-text-muted); font-size: 0.85rem; margin: 0; } .pc-card__title { font-size: 1.25rem; margin: 0; } .pc-card__title a { color: var(--pc-text); } .pc-card__title a:hover { color: var(--pc-primary); } .pc-card__excerpt { color: var(--pc-text-muted); margin: 0; } .pc-card__link { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--pc-primary); font-weight: 600; margin-top: auto; } .pc-card__link:hover { gap: 0.6rem; } /* ----- 18. Forms --------------------------------------------------------- */ .pc-form { display: flex; flex-direction: column; gap: 1rem; } .pc-form__row { display: flex; flex-direction: column; gap: 0.4rem; } /* ----- Form field wrapper ----- Standard labels-above-inputs pattern. The DOM order in most templates is then

. */ box-sizing: border-box; } a.pc-contact__info-row:hover .pc-contact__info-val { color: var(--pc-primary); } .pc-contact__info-row { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.45rem; min-width: 0; flex: 1 1 0 !important; width: auto !important; max-width: none !important; background: linear-gradient(135deg, var(--pc-bg) 0%, var(--pc-surface) 100%); border: 1px solid var(--pc-border); border-top: 3px solid var(--pc-primary); border-radius: var(--pc-radius-lg); padding: 1.1rem 1rem 1.15rem; box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 4px 12px rgba(15, 27, 45, 0.06); transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms ease, border-top-width 200ms ease; cursor: default; } .pc-contact__info-row:hover { transform: translateY(-4px); border-color: var(--pc-primary); border-top-width: 4px; box-shadow: 0 2px 4px rgba(15, 27, 45, 0.06), 0 12px 28px rgba(0, 102, 204, 0.15), 0 4px 10px rgba(15, 27, 45, 0.08); } /* Decorative giant icon — sits behind the content, peeking out the bottom- right corner at very low opacity. Bumps up slightly on hover for a subtle reveal effect. */ .pc-contact__info-watermark { position: absolute; right: -40px; bottom: -40px; width: 200px; height: 200px; color: var(--pc-primary); opacity: 0.03; transform: rotate(-12deg); transform-origin: center; pointer-events: none; z-index: -1; transition: opacity 320ms ease, transform 320ms cubic-bezier(0.4, 0, 0.2, 1); } .pc-contact__info-row:hover .pc-contact__info-watermark { opacity: 0.07; transform: rotate(-8deg) scale(1.08); } .pc-contact__info-label { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .pc-contact__info-label svg { width: 42px; height: 42px; padding: 10px; background: rgba(0, 102, 204, 0.10); border-radius: 50%; color: var(--pc-primary); box-shadow: 0 2px 6px rgba(0, 102, 204, 0.18), 0 1px 2px rgba(15, 27, 45, 0.06); transition: background 200ms ease, transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms ease; } .pc-contact__info-row:hover .pc-contact__info-label svg { background: rgba(0, 102, 204, 0.18); transform: scale(1.05); box-shadow: 0 4px 12px rgba(0, 102, 204, 0.28), 0 2px 4px rgba(15, 27, 45, 0.08); } .pc-contact__info-label strong { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--pc-text-muted); } .pc-contact__info-val { color: var(--pc-text); font-weight: 600; font-size: 0.95rem; line-height: 1.4; margin-top: 0.6rem; /* Distribute text evenly so values like "8:00 AM – 5:00 PM Monday – Friday" don't leave an orphan word ("– Friday") on its own line. */ text-wrap: balance; } a.pc-contact__info-val { transition: color 180ms ease; } a.pc-contact__info-val:hover { color: var(--pc-primary); } .pc-contact__map { border-radius: var(--pc-radius-md); overflow: hidden; border: 1px solid var(--pc-border); } .pc-contact__map iframe { width: 100%; display: block; } /* ----- Office address blocks (multi-office, horizontal) ----- */ .pc-contact__offices-row { /* Glass container — matches the phone-cards container above and all other glass cards site-wide. */ padding: 1.25rem; border-radius: var(--pc-radius-lg); background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, transparent 55%), color-mix(in srgb, var(--pc-surface) 55%, transparent); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid color-mix(in srgb, white 25%, transparent); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.08), 0 8px 24px rgba(15, 27, 45, 0.10), 0 0 60px -16px rgba(43, 52, 125, 0.28); } .pc-contact__row-heading { display: flex; align-items: center; gap: 0.5rem; color: var(--pc-text); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.10em; margin: 0 0 1rem; font-weight: 700; } .pc-contact__row-heading svg { color: var(--pc-accent); } .pc-offices { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .pc-offices--multi { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .pc-office-card { background: var(--pc-bg); border: 1px solid var(--pc-border); border-left: 3px solid var(--pc-accent); border-radius: var(--pc-radius-md); padding: 1rem 1.1rem; display: flex; gap: 0.75rem; align-items: flex-start; transition: border-color var(--pc-transition-fast), box-shadow var(--pc-transition-fast); } .pc-office-card:hover { border-color: var(--pc-primary); border-left-color: var(--pc-primary); box-shadow: var(--pc-shadow-soft); } /* Card with a photo: text on the left, photo on the right. The photo STRETCHES to fill the full card height and ~50% of the width, with rounded corners + shadow. object-fit: cover handles the wide source image without distortion. */ .pc-office-card--has-photo { align-items: stretch; gap: 0.75rem; padding: 0.75rem; /* Card itself stretches to match the tallest sibling in the grid so both cards are equal-height. */ height: 100%; } .pc-office-card--has-photo .pc-office-card__main { display: flex; gap: 0.75rem; align-items: flex-start; flex: 1 1 55%; padding: 0.4rem 0 0.4rem 0.4rem; min-width: 0; } .pc-office-card__photo { flex: 0 0 45%; width: 45%; /* Vertically centered (not stretched). Natural landscape aspect ratio. */ align-self: center; aspect-ratio: 16 / 9; height: auto; object-fit: cover; object-position: center; display: block; margin: 0; margin-left: auto; border-radius: var(--pc-radius-md); border: 1px solid color-mix(in srgb, white 18%, transparent); box-shadow: 0 2px 6px rgba(15, 27, 45, 0.18), 0 10px 28px rgba(15, 27, 45, 0.25); cursor: pointer; transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1); } .pc-office-card__photo:hover { transform: scale(1.03); box-shadow: 0 4px 10px rgba(15, 27, 45, 0.22), 0 16px 40px rgba(43, 52, 125, 0.35); } /* Photo button wrapper — strips button default styling so the image inside looks normal but the whole thing is keyboard-accessible & clickable. */ .pc-office-card__photo-btn { flex: 0 0 45%; align-self: center; margin-left: auto; background: transparent; border: 0; padding: 0; cursor: pointer; position: relative; display: block; width: 45%; line-height: 0; border-radius: var(--pc-radius-md); overflow: hidden; } .pc-office-card__photo-btn .pc-office-card__photo { flex: none; width: 100%; margin: 0; border: 0; /* Inner glow via box-shadow inset — catches "light" from the top edge */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 6px rgba(15, 27, 45, 0.18), 0 10px 28px rgba(15, 27, 45, 0.25); } .pc-office-card__photo-btn:hover .pc-office-card__photo { transform: scale(1.03); } .pc-office-card__photo-btn:focus-visible { outline: 3px solid var(--pc-primary); outline-offset: 3px; } /* Photo caption — bottom-anchored label with gradient fade behind it. */ .pc-office-card__photo-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 0.85rem 0.55rem; color: #fff; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; text-align: left; line-height: 1.3; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.65) 100%); text-shadow: 0 1px 3px rgba(0,0,0,0.40); pointer-events: none; transition: opacity 200ms ease; } /* Office card title — bumped weight + size for stronger hierarchy. */ .pc-office-card__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.25rem; display: inline-block; } /* Hours-of-operation badge */ .pc-office-card__status { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.18rem 0.6rem; border-radius: var(--pc-radius-pill); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin: 0.1rem 0 0.5rem; line-height: 1.2; } .pc-office-card__status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .pc-office-card__status--open { background: rgba(12, 131, 66, 0.12); color: var(--pc-accent); border: 1px solid rgba(12, 131, 66, 0.30); } .pc-office-card__status--open .pc-office-card__status-dot { background: var(--pc-accent); box-shadow: 0 0 8px var(--pc-accent); animation: pc-pulse 2s ease-in-out infinite; } .pc-office-card__status--closed { background: rgba(100, 116, 139, 0.12); color: var(--pc-text-muted); border: 1px solid rgba(100, 116, 139, 0.30); } .pc-office-card__status--closed .pc-office-card__status-dot { background: var(--pc-text-muted); } @keyframes pc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Click-to-call tel: links inside the address text */ .pc-office-card__tel { color: var(--pc-text-muted); text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--pc-text-muted) 60%, transparent); transition: color 160ms ease, border-color 160ms ease; } .pc-office-card__tel:hover { color: var(--pc-primary); border-bottom-color: var(--pc-primary); } .pc-office-card__line { display: block; } /* Action links row (Get Directions, Prentiss Electric) */ .pc-office-card__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.75rem; padding-top: 0.65rem; border-top: 1px solid color-mix(in srgb, var(--pc-border) 60%, transparent); } .pc-office-card__link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--pc-primary); text-decoration: none; transition: color 160ms ease, transform 200ms cubic-bezier(0.4, 0, 0.2, 1); } .pc-office-card__link svg { color: var(--pc-accent); } .pc-office-card__link:hover { color: var(--pc-primary-deep); transform: translateX(2px); } .pc-office-card__link:hover svg { color: var(--pc-primary); } /* ----- Lightbox modal — always center-screen, never bottom-anchored. */ .pc-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms ease; } .pc-lightbox.is-open { opacity: 1; visibility: visible; } .pc-lightbox__img { max-width: 95%; max-height: 90vh; object-fit: contain; border-radius: var(--pc-radius-md); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.50), 0 4px 12px rgba(0, 0, 0, 0.40); transform: scale(0.92); transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1); } .pc-lightbox.is-open .pc-lightbox__img { transform: scale(1); } .pc-lightbox__close { position: absolute; top: 1.25rem; right: 1.25rem; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 180ms ease, transform 180ms ease; } .pc-lightbox__close:hover, .pc-lightbox__close:focus-visible { background: rgba(255, 255, 255, 0.22); transform: scale(1.08); outline: none; } body.has-lightbox-open { overflow: hidden; } /* Mobile: stack the photo below the text. The address text column flexes to fill, pushing the photo to the bottom of every card so photos line up across cards regardless of how many address lines each card has. */ @media (max-width: 700px) { .pc-office-card--has-photo { flex-direction: column; min-height: 0; height: 100%; } .pc-office-card--has-photo .pc-office-card__main { width: 100%; margin: 0; flex: 1 1 auto; align-self: stretch; flex-direction: row; align-items: flex-start; } .pc-office-card__photo-btn { width: 100%; flex: 0 0 auto; margin: 0; align-self: stretch; aspect-ratio: 16 / 9; max-height: 240px; } .pc-office-card__photo, .pc-office-card__photo-btn .pc-office-card__photo { width: 100%; height: 100%; flex: none; aspect-ratio: auto; object-fit: cover; align-self: stretch; margin: 0; } } .pc-office-card__icon { color: var(--pc-accent); flex-shrink: 0; margin-top: 0.2rem; } .pc-office-card__body { font-style: normal; display: flex; flex-direction: column; gap: 0.3rem; line-height: 1.5; min-width: 0; /* Fill the available card height so action links sit at the bottom and both office cards have equal-height layouts regardless of how many address lines each has. */ flex: 1; } /* Push the action links row to the bottom of the body, leaving address text + status at the top. Both cards' link rows then align horizontally. */ .pc-office-card__body .pc-office-card__links { margin-top: auto; } /* Sibling main column flexes to fill height so the body grows. The chain: card → main (align-self: stretch + align-items: stretch) → body (flex: 1) → links (margin-top: auto). This is what makes the "Get directions" / "Prentiss Electric" rows align horizontally across both cards regardless of how many address lines each card has. */ .pc-office-card--has-photo .pc-office-card__main { align-self: stretch; flex-direction: row; align-items: stretch; } .pc-office-card--has-photo .pc-office-card__main .pc-office-card__body { flex: 1; height: 100%; } .pc-office-card__title { font-family: var(--pc-font-heading); font-size: 1rem; font-weight: 700; color: var(--pc-text); line-height: 1.2; } .pc-office-card__lines { font-size: 0.9rem; color: var(--pc-text-muted); } /* ----- 25. Footer ------------------------------------------------------- */ .pc-site-footer { /* Layered background: deep gradient + subtle decorative glow at top edge */ background: radial-gradient(1200px 380px at 50% 0%, rgba(43,52,125,0.18), transparent 70%), linear-gradient(180deg, #0F1B2D 0%, #06101F 100%); color: rgba(255,255,255,0.85); margin-top: var(--pc-step-7); border-top: 1px solid rgba(255,255,255,0.08); position: relative; } .pc-site-footer::before { /* Thin colored accent line on the top edge (fiber blue → green) */ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--pc-primary) 25%, var(--pc-accent) 75%, transparent 100%); opacity: 0.7; } .pc-site-footer__inner { max-width: var(--pc-container-wide); margin: 0 auto; padding: var(--pc-step-7) 1.5rem var(--pc-step-5); display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 768px) { .pc-site-footer__inner { grid-template-columns: 1.6fr 1.2fr 1fr 1fr; gap: 3rem; } } .pc-site-footer__col { min-width: 0; } .pc-site-footer__heading { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 1.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.10); position: relative; } .pc-site-footer__heading::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 32px; height: 2px; background: var(--pc-accent); } .pc-site-footer__logo img { max-height: 100px; width: auto; } .pc-site-footer__tagline { font-size: 0.95rem; color: rgba(255,255,255,0.78); margin: 0.75rem 0 0.5rem; font-weight: 500; } .pc-site-footer__about { font-size: 0.875rem; color: rgba(255,255,255,0.62); margin-bottom: 1rem; } .pc-site-footer__affiliate-logo { display: block; margin-top: 1.5rem; opacity: 0.85; transition: opacity var(--pc-transition-fast), transform var(--pc-transition-fast); width: fit-content; } .pc-site-footer__affiliate-logo:hover { opacity: 1; transform: translateY(1px); } .pc-site-footer__affiliate-logo:active { transform: translateY(2px); } .pc-site-footer__affiliate-logo:focus-visible { outline: none; } .pc-site-footer__affiliate-logo img { width: 240px; height: auto; display: block; } .pc-site-footer__social { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #fff; transition: background var(--pc-transition-fast), border-color var(--pc-transition-fast), transform var(--pc-transition-fast); } .pc-site-footer__social:hover { background: var(--pc-primary); border-color: var(--pc-primary); color: #fff; transform: translateY(-2px); } .pc-site-footer__address { font-style: normal; color: rgba(255,255,255,0.75); margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.5; } .pc-site-footer__address p { margin: 0; } .pc-site-footer__contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; } .pc-site-footer__contact-item { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); } .pc-site-footer__contact-item:last-child { border-bottom: 0; } .pc-site-footer__contact-item > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--pc-accent); align-self: flex-start; margin-top: 0.2rem; } .pc-site-footer__contact-item a, .pc-site-footer__contact-item > div { color: rgba(255,255,255,0.85); display: flex; flex-direction: column; line-height: 1.35; text-decoration: none; gap: 0.1rem; } .pc-site-footer__contact-item a:hover { color: #fff; } .pc-site-footer__contact-item strong { color: rgba(255,255,255,0.5); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .pc-site-footer__contact-item span { font-size: 0.9rem; font-weight: 500; color: rgba(255,255,255,0.9); } .pc-site-footer__contact-item--highlight { background: linear-gradient(135deg, rgba(12,131,66,0.22), rgba(12,131,66,0.08)); border: 1px solid rgba(12,131,66,0.40); border-radius: var(--pc-radius-md); padding: 0.75rem 1rem; margin-bottom: 0.5rem; } .pc-site-footer__contact-item--highlight > svg { color: var(--pc-accent); } .pc-site-footer__contact-item--highlight strong { color: var(--pc-accent); } .pc-site-footer__contact-item > div { display: flex; flex-direction: column; line-height: 1.3; } .pc-site-footer__contact-cta { display: inline-block; margin-top: 1rem; font-size: 0.85rem; color: rgba(255,255,255,0.55); text-decoration: none; transition: color var(--pc-transition-fast); } .pc-site-footer__contact-cta:hover { color: #fff; } .pc-site-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.92rem; } .pc-site-footer__links a { color: rgba(255,255,255,0.75); text-decoration: none; transition: color var(--pc-transition-fast), padding-left var(--pc-transition-fast); display: inline-block; } .pc-site-footer__links a:hover { color: var(--pc-accent); padding-left: 0.25rem; } .pc-site-footer__newsletter { margin-top: 2.5rem; background: linear-gradient(135deg, rgba(79,70,229,0.22), rgba(99,102,241,0.10)); border: 1px solid rgba(99,102,241,0.40); border-radius: 20px; padding: 1.25rem 1.25rem 1.35rem; } .pc-site-footer__newsletter h4 { color: #fff; margin: 0 0 0.3rem; font-size: 1rem; font-weight: 700; } .pc-site-footer__newsletter-desc { font-size: 0.8rem; color: rgba(255,255,255,0.55); margin: 0 0 1rem; } .pc-newsletter { display: flex; flex-direction: column; gap: 0.5rem; } .pc-newsletter input { width: 100%; padding: 0.6rem 0.85rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15); color: #fff; border-radius: var(--pc-radius-sm); font-size: 0.9rem; box-sizing: border-box; } .pc-newsletter .pc-btn { width: 100%; justify-content: center; } .pc-newsletter input::placeholder { color: rgba(255,255,255,0.45); } .pc-newsletter input:focus { outline: 0; border-color: var(--pc-accent); background: rgba(255,255,255,0.10); } .pc-site-footer__bottom { position: relative; background: linear-gradient(180deg, rgba(43, 52, 125, 0.18) 0%, rgba(0, 0, 0, 0.35) 100%); /* Brand-colored gradient line — picks up the green/blue/amber/red palette used in the quick-action cards above. */ border-top: 2px solid transparent; border-image: linear-gradient(90deg, #0C8342 0%, #2B347D 33%, #F59E0B 66%, #E12728 100%) 1; } .pc-site-footer__bottom-inner { max-width: var(--pc-container-wide); margin: 0 auto; padding: 1.25rem 1.5rem; font-size: 0.875rem; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; color: rgba(255, 255, 255, 0.92); text-align: center; } .pc-site-footer__bottom-inner p { margin: 0; } .pc-site-footer__copyright { font-weight: 500; } .pc-site-footer__bottom-inner a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px dotted rgba(255, 255, 255, 0.45); padding-bottom: 1px; transition: border-bottom-color 180ms ease; } .pc-site-footer__bottom-inner a:hover { border-bottom-color: #fff; } .pc-site-footer__bottom-sep { display: inline-block; color: rgba(255, 255, 255, 0.55); font-size: 1.1em; user-select: none; } /* ----- 26. Back to top -------------------------------------------------- */ .pc-back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 48px; height: 48px; border-radius: 50%; background: var(--pc-primary); color: #fff; border: 0; box-shadow: var(--pc-shadow-lift); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity var(--pc-transition-med), transform var(--pc-transition-med), background var(--pc-transition-fast); z-index: 90; } .pc-back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .pc-back-to-top:hover { background: var(--pc-primary-deep); } @media print { .pc-back-to-top { display: none !important; } } /* ----- 27. Call modal --------------------------------------------------- */ .pc-call-modal { border: 0; border-radius: var(--pc-radius-md); padding: 0; background: var(--pc-bg); color: var(--pc-text); max-width: 440px; width: calc(100% - 2rem); box-shadow: var(--pc-shadow-lift); } .pc-call-modal::backdrop { background: rgba(15,27,45,0.5); backdrop-filter: blur(2px); } .pc-call-modal__inner { padding: 1.5rem; } .pc-call-modal__title { margin: 0 0 0.75rem; font-size: 1.25rem; } .pc-call-modal__body { margin: 0 0 1.5rem; color: var(--pc-text-muted); } .pc-call-modal__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } /* ----- 28. 404 / empty / pagination ------------------------------------- */ .pc-empty, .pc-404 { text-align: center; padding: var(--pc-step-7) 1rem; max-width: 600px; margin: 0 auto; } .pc-404__eyebrow { font-family: var(--pc-font-heading); font-size: 5rem; font-weight: 700; color: var(--pc-primary); margin: 0; line-height: 1; } .pc-404__searchwrap { margin: 1.5rem auto; display: flex; justify-content: center; } .pc-404__links { list-style: none; padding: 0; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; } .wp-block-query-pagination, .pc-pagination, nav.pagination { display: flex; gap: 0.5rem; justify-content: center; margin: 2.5rem 0; } /* ----- 29. Misc / page header ------------------------------------------- */ .pc-page-header { padding-block: var(--pc-step-5); text-align: center; } .pc-post-nav { display: flex; justify-content: space-between; margin-top: var(--pc-step-5); padding-top: var(--pc-step-4); border-top: 1px solid var(--pc-border); } .pc-page__thumb { margin-block: var(--pc-step-4); border-radius: var(--pc-radius-md); overflow: hidden; } .pc-page__article { line-height: 1.7; } .pc-page__article img { border-radius: var(--pc-radius-md); } /* ----- 30. Block editor outputs (in case of Gutenberg blocks) ----------- */ .wp-block-button__link.pc-btn { padding: 0.875rem 1.5rem; } .wp-block-cover.pc-page-hero { color: #fff; } /* WP wraps buttons in
— when our pc-btn--* classes leak onto the wrapper too, both wrapper and inner anchor get the metallic styling, which renders as a "rectangle inside a rectangle". Strip the wrapper styling and let only the inner anchor be the button. */ .wp-block-button.pc-btn, .wp-block-button.pc-btn--primary, .wp-block-button.pc-btn--secondary, .wp-block-button.pc-btn--accent, .wp-block-button.pc-btn--ghost { background: none !important; background-image: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; text-shadow: none !important; } .wp-block-button.pc-btn .wp-block-button__link { /* Inherit the right pc-btn--* gradient by mirroring the parent class */ background: inherit; } /* Make the inner link a real button regardless of which modifier is set */ .wp-block-button.pc-btn--primary .wp-block-button__link, .wp-block-button.pc-btn--secondary .wp-block-button__link, .wp-block-button.pc-btn--accent .wp-block-button__link, .wp-block-button.pc-btn--ghost .wp-block-button__link { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.6rem; border: 1px solid transparent; border-radius: var(--pc-radius-sm); font-weight: 600; line-height: 1.2; text-decoration: none; color: #fff; } .wp-block-button.pc-btn--primary .wp-block-button__link { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-primary) 76%, white 24%) 0%, var(--pc-primary) 50%, color-mix(in srgb, var(--pc-primary) 78%, black 22%) 100%); border-color: color-mix(in srgb, var(--pc-primary) 70%, black 30%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.40), 0 3px 6px rgba(43,52,125,0.30); text-shadow: 0 1px 1px rgba(0,0,0,0.18); } .wp-block-button.pc-btn--accent .wp-block-button__link { background: linear-gradient(180deg, color-mix(in srgb, var(--pc-accent) 72%, white 28%) 0%, var(--pc-accent) 50%, color-mix(in srgb, var(--pc-accent) 80%, black 20%) 100%); border-color: color-mix(in srgb, var(--pc-accent) 70%, black 30%); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 6px rgba(12,131,66,0.30); } .wp-block-button.pc-btn--secondary .wp-block-button__link { background: linear-gradient(180deg, #7A78C4 0%, #6260AB 50%, #4A4888 100%); border-color: #38367A; box-shadow: inset 0 1px 0 rgba(255,255,255,0.32), 0 3px 6px rgba(98,96,171,0.35); text-shadow: 0 1px 1px rgba(0,0,0,0.22); } /* ----- 32. About page ---------------------------------------------------- */ .pc-about { display: flex; flex-direction: column; gap: 1.5rem; margin-block: var(--pc-step-4); max-width: 880px; margin-inline: auto; } .pc-about__card { background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 8px 24px rgba(15, 27, 45, 0.06); transition: transform var(--pc-transition-fast), box-shadow var(--pc-transition-fast); } .pc-about__card:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 14px 32px rgba(15, 27, 45, 0.10); } .pc-about__card--mission { background: linear-gradient(135deg, color-mix(in srgb, var(--pc-primary) 8%, transparent), color-mix(in srgb, var(--pc-accent) 6%, transparent)), var(--pc-bg); border-color: color-mix(in srgb, var(--pc-primary) 25%, var(--pc-border)); } .pc-about__card--accent { background: linear-gradient(135deg, color-mix(in srgb, var(--pc-accent) 9%, transparent), transparent 60%), var(--pc-bg); border-color: color-mix(in srgb, var(--pc-accent) 30%, var(--pc-border)); } .pc-about__card-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.9rem; background: color-mix(in srgb, var(--pc-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--pc-primary) 22%, transparent); color: var(--pc-primary); border-radius: var(--pc-radius-pill); font-family: var(--pc-font-heading); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.85rem; } .pc-about__card--accent .pc-about__card-eyebrow { background: color-mix(in srgb, var(--pc-accent) 12%, transparent); border-color: color-mix(in srgb, var(--pc-accent) 30%, transparent); color: var(--pc-accent-dark, #008C50); } .pc-about__card-eyebrow svg { flex-shrink: 0; } .pc-about__card-title { font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.2; margin: 0 0 1rem; color: var(--pc-text); } .pc-about__card p { color: var(--pc-text-muted); font-size: 1.02rem; line-height: 1.7; margin: 0 0 1rem; } .pc-about__card p:last-child { margin-bottom: 0; } .pc-about__lead { font-size: 1.12rem !important; color: var(--pc-text) !important; font-weight: 500; } /* Section divider — subtle accent strip with centered icon */ .pc-about__divider { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0; color: var(--pc-primary); } .pc-about__divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--pc-border-strong), transparent); } .pc-about__divider svg { flex-shrink: 0; opacity: 0.65; } .pc-about__divider--bold { color: var(--pc-accent); } .pc-about__divider--bold span { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pc-accent) 45%, transparent), transparent); } /* Stats row */ .pc-about__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 768px) { .pc-about__stats { grid-template-columns: repeat(4, 1fr); gap: 1rem; } } .pc-about__stat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.25rem 1rem; background: var(--pc-surface); border: 1px solid var(--pc-border); border-top: 3px solid var(--pc-primary); border-radius: var(--pc-radius-md); transition: transform var(--pc-transition-fast), border-color var(--pc-transition-fast); position: relative; overflow: hidden; isolation: isolate; } .pc-about__stat > * { position: relative; z-index: 1; } .pc-about__stat:hover { transform: translateY(-2px); border-color: var(--pc-primary); } /* Themed watermark — same treatment as feature/why cards: tilted, faded, with drop-shadow for depth. */ .pc-about__stat-watermark { position: absolute; right: -22px; bottom: -22px; width: 160px; height: 160px; color: var(--pc-primary); opacity: 0.07; transform: rotate(-15deg); transform-origin: center; filter: drop-shadow(0 4px 10px rgba(43, 52, 125, 0.25)); pointer-events: none; z-index: 0; transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms ease; } .pc-about__stat:hover .pc-about__stat-watermark { opacity: 0.11; transform: rotate(-10deg) scale(1.06); } .pc-about__stat-value { font-family: var(--pc-font-heading); font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 700; line-height: 1; color: var(--pc-primary); margin-bottom: 0.4rem; letter-spacing: -0.02em; } .pc-about__stat-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--pc-text-muted); } /* Board of Directors */ .pc-about__board { background: var(--pc-bg); border: 1px solid var(--pc-border); border-radius: var(--pc-radius-lg); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 8px 24px rgba(15, 27, 45, 0.06); } .pc-about__board-head { text-align: center; margin-bottom: 1.75rem; } .pc-about__board-head h2 { margin: 0.5rem 0 0.75rem; font-size: clamp(1.6rem, 3vw, 2.1rem); } .pc-about__board-intro { color: var(--pc-text-muted); max-width: 60ch; margin: 0 auto; line-height: 1.6; } .pc-about__board-group { margin-bottom: 1.5rem; } .pc-about__board-group:last-of-type { margin-bottom: 0.5rem; } .pc-about__board-term { margin: 0 0 0.85rem; text-align: center; } .pc-about__board-term-pill { display: inline-block; padding: 0.4rem 1rem; background: linear-gradient(135deg, var(--pc-primary), var(--pc-primary-deep)); color: #fff; border-radius: var(--pc-radius-pill); font-family: var(--pc-font-heading); font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; box-shadow: 0 2px 6px rgba(0, 102, 204, 0.30); } .pc-about__board-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.6rem; } @media (min-width: 600px) { .pc-about__board-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .pc-about__board-list { grid-template-columns: repeat(3, 1fr); } } .pc-about__board-card { display: flex; flex-direction: column; gap: 0.2rem; padding: 1rem 1.15rem; background: linear-gradient(135deg, color-mix(in srgb, var(--pc-surface) 93%, white 7%) 0%, var(--pc-surface) 55%, color-mix(in srgb, var(--pc-surface) 93%, black 7%) 100%); border: 1px solid var(--pc-border); border-left: 3px solid var(--pc-primary); border-radius: var(--pc-radius-md); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.06), 0 4px 12px rgba(15, 27, 45, 0.08); position: relative; isolation: isolate; transition: transform var(--pc-transition-fast), border-color var(--pc-transition-fast); } .pc-about__board-card { transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 240ms cubic-bezier(0.4, 0, 0.2, 1), border-left-color 200ms ease; } .pc-about__board-card:hover { transform: translateY(-2px); border-left-color: var(--pc-accent); box-shadow: 0 2px 4px rgba(15, 27, 45, 0.08), 0 10px 24px rgba(43, 52, 125, 0.15); } .pc-about__board-name { font-family: var(--pc-font-heading); font-weight: 600; color: var(--pc-text); font-size: 1rem; } .pc-about__board-meta { font-size: 0.82rem; color: var(--pc-text-muted); letter-spacing: 0.02em; } .pc-about__board-note { margin-top: 1.5rem; text-align: center; color: var(--pc-text-muted); font-size: 0.88rem; font-style: italic; } /* About — bottom CTA */ .pc-about__cta { text-align: center; padding: clamp(1.75rem, 4vw, 2.75rem); background: radial-gradient(800px 240px at 50% 0%, rgba(0, 102, 204, 0.10), transparent 70%), linear-gradient(135deg, var(--pc-primary-deep), #0F1B2D); color: #fff; border-radius: var(--pc-radius-lg); box-shadow: 0 12px 32px rgba(15, 27, 45, 0.18); } .pc-about__cta h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 0.75rem; } .pc-about__cta p { color: rgba(255, 255, 255, 0.85); max-width: 56ch; margin: 0 auto 1.5rem; line-height: 1.6; } .pc-about__cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; } .pc-about__cta-actions .pc-btn { display: flex; flex: 1 1 200px; max-width: 250px; align-items: center; justify-content: center; min-height: 54px; } .pc-about__cta-actions .pc-btn--secondary { background: transparent; border: 2px solid rgba(255, 255, 255, 0.70); color: #fff; box-shadow: none; } .pc-about__cta-actions .pc-btn--secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; box-shadow: none; } [data-theme="dark"] .pc-about__card, [data-theme="dark"] .pc-about__board { background: var(--pc-surface); } [data-theme="dark"] .pc-about__stat { background: var(--pc-surface-2, var(--pc-surface)); } /* Dark-mode override removed — board cards now use the same lifted gradient/shadow language as the contact info cards (the "best" design). */ /* ----- 31. Print -------------------------------------------------------- */ @media print { .pc-utility-bar, .pc-mobile-trigger, .pc-mobile-menu, .pc-back-to-top, .pc-hero__controls, .pc-call-modal, .pc-site-footer__newsletter, .pc-theme-toggle { display: none !important; } .pc-site-header, .pc-site-footer { color: #000; background: #fff !important; } body { background: #fff !important; color: #000 !important; } a { color: #000; text-decoration: underline; } } /* ========================================================================= SITE-WIDE GLASS CARD DESIGN SYSTEM ---------------------------------------------------------------------- Unified glassmorphic treatment applied to every card across the site so the look stays consistent. Defined at the end of the file so these rules take precedence over earlier (now-legacy) card styling. Three flavors: 1. Neutral cards (info panels, feature cards, plan cards, FAQ, map, etc.) 2. Colored topic cards (quick cards + phone cards) — keep brand color but glassify the surface so the page glows show through subtly. White text stays high-contrast (ADA: white on saturated brand color = AAA). 3. Container wrappers (map, info group) — slightly more opaque so embeds stay readable. ========================================================================= */ /* --- 1. Neutral glass cards --- */ .pc-feature-card, .pc-why-card, .pc-community-grid__col, .pc-plan-card, .pc-faq__item, .pc-office-card, .pc-availability__form-card, .pc-application__online, .pc-application__pdf, .pc-contact__form, .pc-contact__info-row, .pc-about__board-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, transparent 55%), color-mix(in srgb, var(--pc-surface) 55%, transparent); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid color-mix(in srgb, white 25%, transparent); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.08), 0 8px 24px rgba(15, 27, 45, 0.10), 0 0 60px -16px rgba(43, 52, 125, 0.28); } /* --- 2. Colored topic cards — keep brand color, add glass treatment --- These already have colored gradient backgrounds; we keep those (white text on saturated color is the ADA-safe contrast path) but add glass border + colored glow shadow + backdrop saturation. */ .pc-quick-card--green, .pc-quick-card--blue, .pc-quick-card--amber, .pc-quick-card--red, .pc-contact__num-card--green, .pc-contact__num-card--blue, .pc-contact__num-card--red { backdrop-filter: saturate(140%); -webkit-backdrop-filter: saturate(140%); border-color: color-mix(in srgb, white 30%, transparent); } /* Per-color glow shadows so each card casts its own ambient light. */ .pc-quick-card--green, .pc-contact__num-card--green { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 6px 18px rgba(12, 131, 66, 0.35), 0 0 60px -12px rgba(22, 196, 98, 0.45); } .pc-quick-card--blue, .pc-contact__num-card--blue { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 6px 18px rgba(43, 52, 125, 0.35), 0 0 60px -12px rgba(123, 140, 232, 0.45); } .pc-quick-card--amber { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 6px 18px rgba(245, 158, 11, 0.35), 0 0 60px -12px rgba(252, 201, 96, 0.45); } .pc-quick-card--red, .pc-contact__num-card--red { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 6px 18px rgba(225, 39, 40, 0.35), 0 0 60px -12px rgba(240, 82, 82, 0.45); } /* --- 3. Container wrappers --- */ /* Map embed — glass frame around the iframe. */ .pc-contact__map { overflow: hidden; border-radius: var(--pc-radius-lg); background: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, transparent 55%), color-mix(in srgb, var(--pc-surface) 55%, transparent); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); border: 1px solid color-mix(in srgb, white 25%, transparent); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.08), 0 12px 32px rgba(15, 27, 45, 0.12), 0 0 80px -16px rgba(43, 52, 125, 0.30); width: 100%; margin: var(--pc-step-5) auto 0; padding: 1.25rem; } .pc-contact__map .pc-contact__row-heading { margin: 0 0 0.85rem; } .pc-contact__map iframe { display: block; width: 100%; height: 420px; border: 0; border-radius: var(--pc-radius-md); } /* Leaflet map canvas — same dimensions as the iframe used to be. */ .pc-contact__map-canvas { width: 100%; height: 420px; border-radius: var(--pc-radius-md); overflow: hidden; background: var(--pc-surface); } .pc-contact__map-canvas .leaflet-control-attribution { background: rgba(255, 255, 255, 0.85); font-size: 0.7rem; } /* Popup styling — uses FIXED dark colors (not CSS vars) because the Leaflet popup background is always white in both light and dark modes. Using theme variables would make the text white-on-white in dark mode. */ .pc-contact__map-popup { font-family: var(--pc-font-body); color: #334155; min-width: 180px; } .pc-contact__map-popup strong { display: block; font-family: var(--pc-font-heading); font-size: 1rem; color: #2B347D; } /* Title row — Prentiss Connect logo + office name side by side. */ .pc-contact__map-popup-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; } .pc-contact__map-popup-title-logo { width: auto; height: 24px; max-width: 28px; object-fit: contain; flex-shrink: 0; } .pc-contact__map-popup-addr { font-size: 0.85rem; color: #334155; white-space: pre-line; margin-bottom: 0.5rem; line-height: 1.4; } .pc-contact__map-popup-phone { display: inline-block; font-size: 0.85rem; color: #0066CC; font-weight: 600; text-decoration: none; } .pc-contact__map-popup-phone:hover { text-decoration: underline; } /* Optional sub-heading (e.g. "Corporate Headquarters") under the office name. */ .pc-contact__map-popup-sub { font-size: 0.75rem; color: #64748B; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 0.35rem; } /* Fax number — quieter than phone, since it's secondary. */ .pc-contact__map-popup-fax { font-size: 0.78rem; color: #64748B; margin-top: 0.25rem; } /* "Also home to Prentiss Electric" sister-company link at the bottom. */ .pc-contact__map-popup-sister { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px solid #E2E8F0; font-size: 0.78rem; color: #2B347D; text-decoration: none; font-weight: 600; } .pc-contact__map-popup-sister-logo { width: auto; height: 28px; max-width: 90px; object-fit: contain; flex-shrink: 0; transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), filter 220ms ease; } .pc-contact__map-popup-sister:hover { text-decoration: underline; } .pc-contact__map-popup-sister:hover .pc-contact__map-popup-sister-logo { /* Subtle "lift" — small scale + soft drop-shadow. Respectful of the brand mark (no rotation, no skewing). */ transform: scale(1.06); filter: drop-shadow(0 2px 6px rgba(43, 52, 125, 0.30)); } /* Belt-and-suspenders: also force the popup background to white in case any theme rule tries to override Leaflet's default. */ .leaflet-popup-content-wrapper { background: #ffffff !important; color: #334155 !important; } .leaflet-popup-tip { background: #ffffff !important; } .pc-contact__grid { width: 100%; margin-inline: auto; } /* ----- Business plan card (Rates page) ---------------------------------- */ @media (min-width: 1024px) { .pc-plan-grid--with-business { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pc-plan-grid--with-business .pc-plan-card__num { font-size: 1.05rem; } .pc-plan-grid--with-business .pc-plan-card__speeds { padding: 0.65rem 0.75rem; gap: 0.4rem; } .pc-plan-grid--with-business .pc-plan-card__price-amount { font-size: 2.5rem; } } .pc-plan-card--business { position: relative; background: linear-gradient(180deg, var(--pc-surface, #fff) 0%, rgba(30, 106, 203, 0.06) 100%); border: 1px solid rgba(30, 106, 203, 0.25); } .pc-plan-card--business .pc-plan-card__badge--custom { background: linear-gradient(135deg, #0f3a6e, #1e6acb); color: #fff; } .pc-plan-card--business .pc-plan-card__price-amount { background: linear-gradient(135deg, #0f3a6e, #1e6acb); -webkit-background-clip: text; background-clip: text; color: transparent; } .pc-plan-card--business .pc-plan-card__price-per { font-weight: 600; } /* Keep the price row a consistent height so the speeds box lines up across all three cards (the dollar amounts and "Custom" have very different glyph widths). */ .pc-plan-card__price { display: flex; align-items: baseline; flex-wrap: nowrap; min-height: 3.25rem; } @media (min-width: 1024px) { .pc-plan-grid--with-business .pc-plan-card__price { min-height: 2.75rem; } } .pc-plan-card--business .pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } .pc-plan-card--business .pc-btn svg { stroke: currentColor; }