/** * ServiceQuery Site-Specific Styles * * Styles specific to servicequery.com * Foundation styles are in /foundation/css/ * All classes use sq- prefix * * DARK MODE SITE - uses data-theme="dark" on */ /* ======================================== ACTION COLOR (Teal for ServiceQuery) ======================================== */ .sq-text-action { color: var(--hm-color-accent-cyan); } /* ======================================== BUTTON OVERRIDES (Teal primary for ServiceQuery) ======================================== */ .hm-btn-primary { border-color: var(--hm-color-accent-cyan); background: var(--hm-color-accent-cyan); } .hm-btn-primary:hover { border-color: var(--hm-color-accent-cyan-dark); background: var(--hm-color-accent-cyan-dark); } .hm-btn-secondary { border-color: var(--hm-color-accent-cyan); color: var(--hm-color-accent-cyan); } .hm-btn-secondary:hover { border-color: var(--hm-color-accent-cyan); background: var(--hm-color-accent-cyan); } /* ======================================== DARK MODE NAVIGATION ======================================== */ .sq-nav { background: var(--hm-color-bg-elevated); border-bottom: 1px solid var(--hm-color-border); } .sq-brand-text { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; } .sq-brand-service { color: var(--hm-color-accent); } .sq-brand-query { color: #4d4d4d; } .sq-brand-tm { font-size: 0.5em; vertical-align: 0.4em; color: #4d4d4d; } .sq-nav-menu { font-size: 1.1rem; margin-top: 8px; } .sq-nav .nav-link { color: var(--hm-color-text-secondary); transition: color var(--hm-transition-fast); } .sq-nav .nav-link:hover, .sq-nav .nav-link.active { color: var(--hm-color-accent-cyan); } .sq-nav-icon { font-size: 1.25rem; } /* Mobile nav toggle for dark mode */ .sq-nav .navbar-toggler { border-color: var(--hm-color-border); } .sq-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ======================================== DARK MODE FOOTER ADJUSTMENTS ======================================== */ .hm-bg-subtle { background: var(--hm-color-bg-subtle); } /* Footer link hover - teal instead of purple */ a.hm-text-secondary:hover { color: var(--hm-color-accent-cyan) !important; } /* ======================================== DARK MODE ELEMENTS ======================================== */ /* Tables in dark mode */ .table { --bs-table-bg: transparent; --bs-table-border-color: var(--hm-color-border); --bs-table-striped-bg: var(--hm-color-bg-subtle); --bs-table-hover-bg: var(--hm-color-bg-subtle); color: rgba(255, 255, 255, 0.85); } .table th { color: #fff; background-color: var(--hm-color-bg-subtle); } .table td { color: rgba(255, 255, 255, 0.8); } .table td.hm-text-secondary { color: rgba(255, 255, 255, 0.7); } .table-hover tbody tr:hover { background-color: var(--hm-color-bg-subtle); } /* Pre/Code blocks in dark mode */ .hm-pre, pre { background: #1a1525; border: 1px solid rgba(105, 54, 149, 0.3); border-radius: var(--hm-radius-md); padding: var(--hm-space-4); overflow-x: auto; } code { color: var(--hm-color-accent-cyan-light); background: var(--hm-color-bg-subtle); padding: 0.125rem 0.375rem; border-radius: var(--hm-radius-sm); font-size: 0.875em; } pre code { background: transparent; padding: 0; color: var(--hm-color-text-primary); } /* Cards in dark mode - ensure contrast */ .hm-card { background: var(--hm-color-bg-elevated); } .hm-card:hover { box-shadow: 0 8px 24px rgba(105, 54, 149, 0.35); } /* Badge adjustments */ .badge.bg-success { background-color: var(--hm-color-success) !important; } .badge.bg-warning { background-color: var(--hm-color-warning) !important; } .badge.bg-primary { background-color: var(--hm-color-accent) !important; } .badge.bg-secondary { background-color: var(--hm-color-bg-subtle) !important; color: var(--hm-color-text-secondary) !important; } /* Link accent color */ .hm-link-accent { color: var(--hm-color-accent-cyan-light); text-decoration: none; transition: color var(--hm-transition-fast); } .hm-link-accent:hover { color: var(--hm-color-accent-cyan); } /* Success/warning text colors */ .hm-text-success { color: var(--hm-color-success) !important; } .hm-text-warning { color: var(--hm-color-warning) !important; } /* Dark mode backgrounds */ .hm-bg-dark { background: #050505; } .hm-bg-base { background: var(--hm-color-bg-base); } .hm-bg-elevated { background: var(--hm-color-bg-elevated); } /* Border utilities */ .hm-border-t { border-top: 1px solid var(--hm-color-border); } .hm-border-b { border-bottom: 1px solid var(--hm-color-border); } /* ======================================== SECTION BACKGROUNDS Abstract tech imagery with dark overlay ======================================== */ .sq-bg-dataflow { background: linear-gradient(rgba(10,10,10,0.88), rgba(10,10,10,0.88)), url('/img/sq-bg-dataflow.jpg') center/cover no-repeat; } .sq-bg-connections { background: linear-gradient(rgba(10,10,10,0.88), rgba(10,10,10,0.88)), url('/img/sq-bg-connections.jpg') center/cover no-repeat; } .sq-bg-security { background: linear-gradient(rgba(10,10,10,0.88), rgba(10,10,10,0.88)), url('/img/sq-bg-security.jpg') center/cover no-repeat; } .sq-bg-code { background: linear-gradient(rgba(10,10,10,0.88), rgba(10,10,10,0.88)), url('/img/sq-bg-code.jpg') center/cover no-repeat; } .sq-bg-grid { background: linear-gradient(rgba(10,10,10,0.88), rgba(10,10,10,0.88)), url('/img/sq-bg-grid.jpg') center/cover no-repeat; } .sq-bg-tree { background: linear-gradient(rgba(10,10,10,0.88), rgba(10,10,10,0.88)), url('/img/sq-bg-tree.jpg') center/cover no-repeat; } /* Light overlay variants (for sections that need lighter feel) */ .sq-bg-dataflow-light { background: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), url('/img/sq-bg-dataflow.jpg') center/cover no-repeat; } .sq-bg-connections-light { background: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), url('/img/sq-bg-connections.jpg') center/cover no-repeat; } .sq-bg-grid-light { background: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), url('/img/sq-bg-grid.jpg') center/cover no-repeat; } .sq-bg-security-light { background: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), url('/img/sq-bg-security.jpg') center/cover no-repeat; } .sq-bg-code-light { background: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), url('/img/sq-bg-code.jpg') center/cover no-repeat; } .sq-bg-tree-light { background: linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.92)), url('/img/sq-bg-tree.jpg') center/cover no-repeat; } /* ======================================== HERO SECTION UTILITIES Consistent styling for dark hero sections ======================================== */ /* Hero heading text (white on dark backgrounds) */ .sq-hero-title { color: #fff; } /* Hero subtext with constrained width */ .sq-hero-subtext { color: rgba(255, 255, 255, 0.85); max-width: 700px; margin: 0 auto; } /* Tertiary text on dark backgrounds */ .sq-hero-muted { color: rgba(255, 255, 255, 0.7); } /* Dot separator in nav links */ .sq-dot-separator { opacity: 0.4; } /* Large stat number display */ .sq-stat-number { font-size: 2rem; font-weight: 700; } /* Code block left padding */ .sq-code-indent { padding-left: 1.5rem; } /* Ghost button on dark backgrounds */ .sq-btn-ghost { border: 2px solid rgba(255, 255, 255, 0.8); color: #fff; } .sq-btn-ghost:hover { border-color: rgba(255, 255, 255, 1); color: #fff; } /* Centered paragraph with max-width */ .sq-text-centered-md { max-width: 600px; margin: 0 auto; } /* Section eyebrow text */ .sq-eyebrow { letter-spacing: 2px; font-size: 0.85rem; } /* Card with subtle background */ .sq-card-subtle { background: var(--hm-color-bg-elevated); } /* Hero list items (slightly dimmer than subtext) */ .sq-hero-list { color: rgba(255, 255, 255, 0.8); } /* Code display on dark backgrounds */ .sq-code-muted { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; } /* Dark card overlay (for code blocks on hero) */ .sq-card-dark { background: rgba(0, 0, 0, 0.4); border-color: rgba(255, 255, 255, 0.1); } /* Pre block with dark background */ .sq-pre-dark { background: rgba(0, 0, 0, 0.3); font-size: 0.85rem; } /* Logo sizing */ .sq-logo-sm { max-width: 220px; } .sq-logo-md { max-width: 280px; } .sq-logo-lg { max-width: 350px; } /* Success border card */ .sq-card-success-border { border-color: var(--hm-color-success); } /* Accent border with subtle background */ .sq-card-accent { border-color: var(--hm-color-accent); background: rgba(105, 54, 149, 0.1); } /* Warning border with subtle background */ .sq-card-warning { border-color: var(--hm-color-warning); background: rgba(245, 158, 11, 0.1); } /* Gradient border for cards */ .sq-card-gradient-border { border: 1px solid transparent; border-image: var(--hm-gradient-text) 1; } /* Subtle bg for cards */ .sq-bg-subtle { background: var(--hm-color-bg-subtle); } /* Logo sizing additions */ .sq-logo-xs { max-width: 180px; } .sq-logo-xl { max-width: 300px; }