/* ========================================================================= Prentiss Connect — dark-mode.css -------------------------------------------------------------------------- Activated when is set by the theme toggle. Overrides only the variables — every component-level rule in main.css already references those variables, so swapping values flips the theme. ========================================================================= */ [data-theme="dark"] { --pc-primary: #7B8CE8; --pc-primary-deep: #4A5AB0; --pc-accent: #16C462; /* Deeper page background + lifted card surface for clearer visual hierarchy in dark mode. Cards now stand off the page more clearly. */ --pc-bg: #060B17; --pc-surface: #1C2540; --pc-surface-2: #2A3656; --pc-text: #F1F5F9; --pc-text-muted: #94A3B8; --pc-border: #2C3A55; --pc-border-strong: #3D4D6F; --pc-info: #38BDF8; --pc-warning: #FBBF24; --pc-critical: #F87171; --pc-shadow-soft: 0 4px 12px rgba(0,0,0,0.4); --pc-shadow-lift: 0 8px 24px rgba(0,0,0,0.55); --pc-shadow-btn: 0 2px 6px rgba(123,140,232,0.40); --pc-shadow-btn-accent: 0 2px 6px rgba(22,196,98,0.38); /* Metallic gradient stops — dark mode */ --pc-primary-light: #9AAAF0; --pc-primary-dark: #5C6CC8; --pc-deep-light: #6272D8; --pc-deep-dark: #3A4898; --pc-accent-light: #30E07A; --pc-accent-dark: #0EA050; /* Hover hue-shifts — dark mode */ --pc-primary-hover-light: #AABAF8; --pc-primary-hover-dark: #6272D8; --pc-deep-hover-light: #7282E8; --pc-deep-hover-dark: #4A5AB0; --pc-accent-hover-light: #40EE88; --pc-accent-hover-dark: #12B55A; --pc-warning: #F27D2F; --pc-critical: #E12728; } /* A few component-level tweaks that don't fit cleanly into variables */ [data-theme="dark"] body { /* Layered "ambient-lit dashboard" background — the foundation that makes glassmorphic cards look like the dashboard reference: 1. Soft primary-blue glow blob top-left (strong enough to read) 2. Soft accent-green glow blob bottom-right 3. Subtle dot grid for tech texture 4. Radial ombre vignette underneath */ background-color: var(--pc-bg); background-image: /* Multiple bold colored light sources — the dashboard reference's signature look. These need to be VISIBLY colored, not subtle. */ radial-gradient(ellipse 50% 40% at 8% 12%, rgba(123, 140, 232, 0.60), transparent 65%), radial-gradient(ellipse 50% 40% at 95% 80%, rgba(22, 196, 98, 0.45), transparent 65%), radial-gradient(ellipse 35% 30% at 60% 45%, rgba(245, 158, 11, 0.20), transparent 70%), radial-gradient(ellipse 30% 25% at 25% 75%, rgba(168, 85, 247, 0.18), transparent 75%), radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px), radial-gradient( ellipse 100% 50% at 50% 0%, color-mix(in srgb, var(--pc-bg) 88%, white 12%) 0%, var(--pc-bg) 50%, color-mix(in srgb, var(--pc-bg) 95%, black 5%) 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; } [data-theme="dark"] .pc-site-header { background: rgba(10,15,28,0.85); } [data-theme="dark"] .pc-utility-bar { background: #060A14; } [data-theme="dark"] .pc-mobile-menu { background: rgba(20, 27, 46, 0.96); } [data-theme="dark"] .pc-form input, [data-theme="dark"] .pc-form select, [data-theme="dark"] .pc-form textarea { background: var(--pc-surface); color: var(--pc-text); } [data-theme="dark"] .pc-form input:focus, [data-theme="dark"] .pc-form select:focus, [data-theme="dark"] .pc-form textarea:focus { box-shadow: 0 0 0 3px rgba(59,158,255,0.25); } /* Bright dark-mode green needs dark text for AA contrast — gradient is set in main.css via the --pc-accent-* variables; we just override the text. */ [data-theme="dark"] .pc-btn--accent, [data-theme="dark"] .pc-btn--accent:hover { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25); } [data-theme="dark"] .pc-plan-card--popular { background: linear-gradient(180deg, var(--pc-bg) 0%, rgba(16,212,136,0.06) 100%); } [data-theme="dark"] .pc-plan-card__badge { color: #06150C; } [data-theme="dark"] .pc-cta-banner { background: linear-gradient(135deg, #1E2D4F 0%, #2563EB 50%, #10D488 100%); } [data-theme="dark"] .pc-feature-card__icon, [data-theme="dark"] .pc-why-card__icon { background: linear-gradient(135deg, rgba(59,158,255,0.15), rgba(16,212,136,0.15)); } /* Themed-icon watermark — brighter in dark mode against the deep surface, with a colored glow that picks up the accent blue. */ [data-theme="dark"] .pc-feature-card__watermark, [data-theme="dark"] .pc-why-card__watermark { color: #7B8CE8; opacity: 0.18; filter: drop-shadow(0 6px 14px rgba(123, 140, 232, 0.40)); } [data-theme="dark"] .pc-feature-card:hover .pc-feature-card__watermark, [data-theme="dark"] .pc-why-card:hover .pc-why-card__watermark { color: #7B8CE8; opacity: 0.26; } /* Community-list watermarks — keep their per-status color but bump opacity so they read on the deep dark surface. */ [data-theme="dark"] .pc-community-grid__watermark { opacity: 0.16; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); } [data-theme="dark"] .pc-community-grid__col:hover .pc-community-grid__watermark { opacity: 0.22; } /* About-page stat watermarks — same accent-blue treatment as the feature/why card watermarks for visual consistency. */ [data-theme="dark"] .pc-about__stat-watermark { color: #7B8CE8; opacity: 0.18; filter: drop-shadow(0 6px 14px rgba(123, 140, 232, 0.40)); } [data-theme="dark"] .pc-about__stat:hover .pc-about__stat-watermark { color: #7B8CE8; opacity: 0.26; } [data-theme="dark"] .pc-availability__intro, [data-theme="dark"] .pc-availability__map, [data-theme="dark"] .pc-application__pdf, [data-theme="dark"] .pc-faq__cta, [data-theme="dark"] .pc-faq__empty, [data-theme="dark"] .pc-rates__toolbar, [data-theme="dark"] .pc-speedtest__edu-card, [data-theme="dark"] .pc-speedtest__ref, [data-theme="dark"] .pc-speedtest__btn--secondary { background: var(--pc-surface); } /* Speedtest watermarks — boost opacity in dark mode so the tilted glyph reads against the darker card surface (same treatment as feature/why). */ [data-theme="dark"] .pc-speedtest__btn-watermark, [data-theme="dark"] .pc-speedtest__edu-watermark, [data-theme="dark"] .pc-speedtest__ref-watermark { opacity: 0.16; filter: drop-shadow(0 6px 14px rgba(123, 140, 232, 0.35)); } [data-theme="dark"] .pc-speedtest__btn:hover .pc-speedtest__btn-watermark, [data-theme="dark"] .pc-speedtest__edu-card:hover .pc-speedtest__edu-watermark, [data-theme="dark"] .pc-speedtest__ref:hover .pc-speedtest__ref-watermark { opacity: 0.24; } [data-theme="dark"] .pc-contact__num-card--featured { background: rgba(16,212,136,0.08); } /* Contact info cards — darker shadows + slightly brighter watermark so the elevation and the decorative glyph are both visible against the dark bg. */ [data-theme="dark"] .pc-contact__info-row { background: linear-gradient(135deg, var(--pc-bg) 0%, var(--pc-surface) 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30), 0 4px 14px rgba(0, 0, 0, 0.35); } [data-theme="dark"] .pc-contact__info-row:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 32px rgba(59, 158, 255, 0.20), 0 4px 12px rgba(0, 0, 0, 0.40); } [data-theme="dark"] .pc-contact__info-watermark { color: var(--pc-primary); opacity: 0.06; } [data-theme="dark"] .pc-contact__info-row:hover .pc-contact__info-watermark { opacity: 0.11; } /* Slightly stronger badge shadow in dark mode so it reads against the dark gradient surface. */ [data-theme="dark"] .pc-contact__info-label svg { box-shadow: 0 2px 8px rgba(59, 158, 255, 0.22), 0 1px 3px rgba(0, 0, 0, 0.40); } [data-theme="dark"] .pc-contact__info-row:hover .pc-contact__info-label svg { box-shadow: 0 4px 14px rgba(59, 158, 255, 0.32), 0 2px 5px rgba(0, 0, 0, 0.50); } /* Glassmorphic cards in dark mode — colored glow shadows + slightly more transparent surface so the ambient body glows show through. */ [data-theme="dark"] .pc-page-hero, [data-theme="dark"] .pc-page__body, [data-theme="dark"] .pc-section { background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, transparent 55%), color-mix(in srgb, var(--pc-surface) 40%, transparent); border-color: color-mix(in srgb, white 12%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 6px rgba(0, 0, 0, 0.40), 0 16px 40px rgba(0, 0, 0, 0.50), 0 0 100px -10px rgba(123, 140, 232, 0.55); } /* Board member cards — use a lifted lighter panel with a deep shadow, matching the contact info cards visual language. Surface-2 + a touch of brand-blue tint gives the card a tech feel without being too dark. */ [data-theme="dark"] .pc-about__board-card { background: linear-gradient(135deg, color-mix(in srgb, var(--pc-surface-2) 92%, var(--pc-primary) 8%) 0%, var(--pc-surface-2) 55%, color-mix(in srgb, var(--pc-surface-2) 90%, black 10%) 100%); border-color: var(--pc-border-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 6px rgba(0, 0, 0, 0.30), 0 6px 18px rgba(0, 0, 0, 0.30); } [data-theme="dark"] .pc-about__board-card:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px rgba(123, 140, 232, 0.20); } /* Nested sub-cards (forms, panels inside the page-body card). Dark mode: switch from the page-bg "black hole" to a LIGHTER raised panel using surface-2 + a brand-blue tint, with a diagonal ombre. This makes forms feel like a lifted tech panel rather than a black box. */ [data-theme="dark"] .pc-application__online, [data-theme="dark"] .pc-application__pdf, [data-theme="dark"] .pc-contact__form, [data-theme="dark"] .pc-availability__form-card { background: linear-gradient(160deg, color-mix(in srgb, var(--pc-surface-2) 90%, var(--pc-primary) 10%) 0%, var(--pc-surface-2) 55%, color-mix(in srgb, var(--pc-surface-2) 92%, black 8%) 100%); border-color: var(--pc-border-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.30); } /* ========================================================================= DARK-MODE COUNTERPART for the glass card design system in main.css. Stronger transparency + colored glow shadows so cards float on the ambient-lit background. ========================================================================= */ /* Neutral glass cards in dark mode */ [data-theme="dark"] .pc-feature-card, [data-theme="dark"] .pc-why-card, [data-theme="dark"] .pc-community-grid__col, [data-theme="dark"] .pc-plan-card, [data-theme="dark"] .pc-faq__item, [data-theme="dark"] .pc-office-card, [data-theme="dark"] .pc-contact__map, [data-theme="dark"] .pc-contact__info-row, [data-theme="dark"] .pc-contact__numbers, [data-theme="dark"] .pc-contact__offices-row, [data-theme="dark"] .pc-contact__info { background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, transparent 55%), color-mix(in srgb, var(--pc-surface) 40%, transparent); border-color: color-mix(in srgb, white 14%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.40), 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 80px -16px rgba(123, 140, 232, 0.40); } /* Sub-card forms (raised lighter panels inside outer cards) */ [data-theme="dark"] .pc-application__online, [data-theme="dark"] .pc-application__pdf, [data-theme="dark"] .pc-contact__form, [data-theme="dark"] .pc-availability__form-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, transparent 55%), color-mix(in srgb, var(--pc-surface-2) 55%, transparent); border-color: color-mix(in srgb, white 15%, transparent); } /* Colored topic cards in dark mode — brighter inner highlights, deeper colored glows. Brand color stays so white text remains AAA-contrast. */ [data-theme="dark"] .pc-quick-card--green, [data-theme="dark"] .pc-contact__num-card--green { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 22px rgba(12, 131, 66, 0.45), 0 0 90px -10px rgba(22, 196, 98, 0.60); } [data-theme="dark"] .pc-quick-card--blue, [data-theme="dark"] .pc-contact__num-card--blue { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 22px rgba(43, 52, 125, 0.45), 0 0 90px -10px rgba(123, 140, 232, 0.60); } [data-theme="dark"] .pc-quick-card--amber { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 22px rgba(245, 158, 11, 0.45), 0 0 90px -10px rgba(252, 201, 96, 0.60); } [data-theme="dark"] .pc-quick-card--red, [data-theme="dark"] .pc-contact__num-card--red { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 8px 22px rgba(225, 39, 40, 0.45), 0 0 90px -10px rgba(240, 82, 82, 0.60); }