/* ────────────────────────────────────────────────────────────────────────── EntecPower corporate site — shared styles Cobalt-blue corporate brand. Light + dark mode (toggle via data-theme on ). Tweakable via data-brand-tone (cobalt | orange | amber | emerald) and data-display-font on . ────────────────────────────────────────────────────────────────────────── */ @import url("colors_and_type.css"); /* ── Tone variants — flipped at runtime via Tweaks ───────────────────────── */ :root, [data-theme="dark"] { --site-brand: var(--ep-brand); --site-brand-dark: var(--ep-brand-dark); --site-accent: var(--ep-accent); --site-accent-dim: var(--ep-accent-dim); --site-accent-border:var(--ep-accent-border); --site-warm-1: #ff4d2e; --site-warm-2: #ff6347; } [data-brand-tone="orange"] { --site-brand: #f7941d; --site-brand-dark: #d97a0a; --site-accent: #ffaa3d; --site-accent-dim: rgba(247,148,29,.13); --site-accent-border:rgba(247,148,29,.32); } [data-brand-tone="amber"] { --site-brand: #f59e0b; --site-brand-dark: #b45309; --site-accent: #ffdca1; --site-accent-dim: rgba(245,158,11,.14); --site-accent-border:rgba(245,158,11,.32); } [data-brand-tone="emerald"] { --site-brand: #10b981; --site-brand-dark: #047857; --site-accent: #6ee7b7; --site-accent-dim: rgba(16,185,129,.13); --site-accent-border:rgba(16,185,129,.30); } /* Display font swap (Tweaks) */ [data-display-font="pretendard"] { --site-display: var(--ep-font-sans); } [data-display-font="space-grotesk"] { --site-display: 'Space Grotesk', var(--ep-font-sans); } [data-display-font="nanum-gothic"] { --site-display: 'Nanum Gothic', var(--ep-font-sans); } /* ── Reset + base ────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--ep-font-sans); font-size: var(--ep-size-base); line-height: var(--ep-line-base); background: var(--ep-bg); color: var(--ep-ink); -webkit-font-smoothing: antialiased; --site-display: var(--ep-font-sans); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--site-brand); outline-offset: 2px; } .site-container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); } /* ── Sticky nav ──────────────────────────────────────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 100; background: rgba(15,23,42,.78); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--ep-border); } [data-theme="light"] .site-nav { background: rgba(255,255,255,.85); } .site-nav-bar { display: flex; align-items: center; gap: 28px; height: 68px; max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px,4vw,32px); } .site-nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .site-nav-brand img { height: 30px; width: auto; } .site-nav-brand .wm { font-family: var(--site-display); font-weight: 800; letter-spacing: -.01em; color: var(--ep-ink); font-size: 16px; } .site-nav-links { display: flex; align-items: center; gap: 2px; margin-left: 8px; flex: 1; } .site-nav-links a { display: inline-flex; align-items: center; padding: 8px 14px; font-size: 14px; font-weight: 500; color: var(--ep-ink); opacity: .82; border-radius: 8px; transition: all .15s; white-space: nowrap; } .site-nav-links a:hover { opacity: 1; color: var(--site-accent); background: rgba(255,255,255,.05); } .site-nav-links a.active { opacity: 1; color: var(--site-accent); background: var(--site-accent-dim); } .site-nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .site-nav-lang { background: transparent; color: var(--ep-ink); border: 1px solid var(--site-brand); border-radius: 8px; padding: 7px 28px 7px 12px; font-size: 13px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23f7941d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .site-nav-cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: var(--site-brand); color: #fff; border-radius: 8px; font-weight: 600; font-size: 14px; transition: all .15s; } .site-nav-cta:hover { background: var(--site-brand-dark); transform: translateY(-1px); } .site-nav-burger { display: none; width: 40px; height: 40px; border: 1px solid var(--ep-border); border-radius: 8px; background: transparent; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } .site-nav-burger span { width: 18px; height: 1.5px; background: var(--ep-ink); border-radius: 1px; transition: all .2s; } @media (max-width: 980px) { .site-nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; flex-direction: column; align-items: stretch; background: rgba(11,18,32,.98); backdrop-filter: blur(20px); padding: 16px; border-bottom: 1px solid var(--ep-border); gap: 4px; margin: 0; } .site-nav-links.open { display: flex; } .site-nav-links a { padding: 12px 14px; font-size: 15px; } .site-nav-burger { display: flex; } .site-nav-cta { display: none; } } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .site-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 10px; font-weight: 600; font-size: 14.5px; transition: all .2s; cursor: pointer; border: 1px solid transparent; white-space: nowrap; line-height: 1.2; } .site-btn-primary { background: linear-gradient(135deg, var(--site-brand), var(--site-brand-dark)); color: #fff; box-shadow: 0 4px 12px color-mix(in oklab, var(--site-brand) 35%, transparent); } .site-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in oklab, var(--site-brand) 50%, transparent); } .site-btn-ghost { background: transparent; color: var(--ep-ink); border-color: var(--ep-border-strong); } .site-btn-ghost:hover { background: var(--ep-brand-dim); border-color: var(--site-brand); color: var(--site-brand); } .site-btn-warm { background: linear-gradient(135deg, var(--site-warm-1), var(--site-warm-2)); color: #fff; box-shadow: 0 4px 12px rgba(255,77,46,.30); } .site-btn-warm:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,77,46,.50); } .site-btn-lg { padding: 16px 32px; font-size: 16px; } .site-btn-arrow { width: 16px; height: 16px; } /* ── Hero ────────────────────────────────────────────────────────────────── */ /* ── Hero ────────────────────────────────────────────────────────────────── */ .site-hero { position: relative; min-height: 85vh; display: flex; align-items: center; overflow: hidden; background: #020617; user-select: none; cursor: crosshair; } .hero-slides { position: absolute; inset: 0; z-index: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 0.8s ease-in-out, filter 0.5s ease; z-index: 1; } .hero-slide.active { opacity: 1; z-index: 2; } /* Diagnostic Camera Modes via CSS Filters */ .site-hero.mode-thermal .hero-slide { filter: grayscale(1) contrast(1.15) sepia(0.25) hue-rotate(185deg); } .site-hero.mode-ultrasound .hero-slide { filter: saturate(0.65); } .hero-canvas-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; } .hero-interactive-trigger { position: absolute; inset: 0; z-index: 4; cursor: crosshair; } /* Pulsing Hotspot Rings */ .hotspot-marker { position: absolute; width: 36px; height: 36px; transform: translate(-50%, -50%); pointer-events: none; /* Disable pointer events on the marker so mouse move handles lock smoothly */ z-index: 10; border: none; background: transparent; padding: 0; } .hotspot-dot { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px; border-radius: 50%; background: #ffffff; /* Solid white core for maximum brightness */ border: 2px solid var(--color); /* Outer ring of the core */ box-shadow: 0 0 16px var(--color), 0 0 8px var(--color); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease; z-index: 2; } .hotspot-marker.hovered .hotspot-dot { transform: scale(1.4); background: var(--color); /* turns color-filled when active */ box-shadow: 0 0 24px var(--color), 0 0 12px var(--color); } .hotspot-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border: 2.5px solid var(--color); /* Thicker border */ border-radius: 50%; opacity: 0; transform: scale(0.15); animation: hotspot-pulse-ring 2.0s infinite cubic-bezier(0.215, 0.610, 0.355, 1); filter: drop-shadow(0 0 6px var(--color)); /* Add strong glowing shadow */ pointer-events: none; } .hotspot-ring-1 { animation-delay: 0s; } .hotspot-ring-2 { animation-delay: 1.0s; /* staggered */ } @keyframes hotspot-pulse-ring { 0% { transform: scale(0.15); opacity: 0; } 15% { opacity: 1.0; /* Full opacity at start of pulse */ } 100% { transform: scale(1.35); opacity: 0; } } @keyframes hintPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.5); opacity: 1; } 50% { box-shadow: 0 0 0 6px rgba(34, 211, 238, 0); opacity: 0.7; } } .site-hero-photo { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .site-hero-video { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; z-index: 0; } .site-hero-graphic { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse at 70% 40%, var(--site-accent-dim), transparent 60%), radial-gradient(ellipse at 20% 80%, var(--ep-brand-dim), transparent 50%), var(--ep-bg-card); } .site-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,6,23,.35) 0%, rgba(2,6,23,.65) 50%, rgba(2,6,23,.97) 100%); z-index: 3; pointer-events: none; } .site-hero-inner { position: relative; z-index: 10; padding-block: 80px 60px; width: 100%; } .hero-grid-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; } @media (max-width: 980px) { .hero-grid-layout { grid-template-columns: 1fr; gap: 36px; } } .site-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; background: var(--site-accent-dim); border: 1px solid var(--site-accent-border); border-radius: 999px; color: var(--site-accent); font-size: 12px; font-weight: 600; letter-spacing: .06em; margin-bottom: 22px; } .site-hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--site-accent); box-shadow: 0 0 0 3px var(--site-accent-dim); } .site-hero h1 { font-family: var(--site-display); font-size: clamp(36px, 5.6vw, 68px); font-weight: 800; line-height: 1.05; letter-spacing: -.018em; margin: 0 0 22px; max-width: 16ch; text-wrap: balance; color: #fff; } .site-hero h1 .hl { background: linear-gradient(135deg, var(--site-accent), var(--site-brand)); -webkit-background-clip: text; background-clip: text; color: transparent; } .site-hero p.lead { font-size: clamp(16px, 1.8vw, 19px); color: #cbd5e1; max-width: 56ch; line-height: 1.65; margin: 0 0 32px; text-wrap: pretty; } .site-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; } .site-hero-stats { display: flex; gap: 36px; margin-top: 64px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); flex-wrap: wrap; } .site-hero-stat .v { font-family: var(--site-display); font-size: 36px; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1; } .site-hero-stat .v .unit { font-size: .55em; color: var(--site-accent); font-weight: 600; margin-left: 4px; } .site-hero-stat .l { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #94a3b8; margin-top: 8px; } /* HUD Glassmorphism Panel */ .hud-panel { background: rgba(8, 20, 38, 0.48); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 24px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), inset 0 1px 1px rgba(255, 255, 255, 0.05); color: #fff; display: flex; flex-direction: column; gap: 16px; } .hud-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding-bottom: 12px; } .hud-title { font-size: 10px; font-family: var(--ep-font-mono); letter-spacing: 0.15em; color: var(--site-accent); text-transform: uppercase; } .hud-status-badge { font-size: 10px; font-family: var(--ep-font-mono); padding: 3px 8px; border-radius: 4px; background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.25); color: #22d3ee; letter-spacing: 0.08em; } .hud-status-badge.critical { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); color: #f87171; animation: flash-red 1s infinite alternate; } @keyframes flash-red { 0% { opacity: 0.6; } 100% { opacity: 1; } } .hud-telemetry { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hud-telemetry-item { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 8px; padding: 10px 14px; } .hud-telemetry-item .label { font-size: 9.5px; font-family: var(--ep-font-mono); color: #64748b; margin-bottom: 4px; } .hud-telemetry-item .val { font-size: 16px; font-family: var(--ep-font-mono); font-weight: 700; color: #e2e8f0; } .hud-telemetry-item.warning .val { color: #f7941d; } .hud-telemetry-item.critical .val { color: #ef4444; } /* Interactive Controls */ .hud-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .hud-mode-btn { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 8px; font-size: 10.5px; font-weight: 600; font-family: var(--ep-font-mono); color: #94a3b8; cursor: pointer; transition: all 0.2s; text-align: center; letter-spacing: 0.05em; } .hud-mode-btn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } .hud-mode-btn.active { background: var(--site-accent-dim); border-color: var(--site-accent); color: var(--site-accent); box-shadow: 0 0 10px var(--site-accent-dim); } /* Live Terminal Log */ .hud-terminal { background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 10px; height: 90px; overflow-y: hidden; font-family: var(--ep-font-mono); font-size: 10px; line-height: 1.45; color: #38bdf8; display: flex; flex-direction: column; justify-content: flex-end; } .hud-terminal-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; animation: line-fade-in 0.2s ease-out; } @keyframes line-fade-in { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 0.85; transform: translateY(0); } } .hud-terminal-line.success { color: #4ade80; } .hud-terminal-line.warn { color: #fbbf24; } .hud-terminal-line.error { color: #f87171; } /* Micro-charts container */ .hud-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hud-chart-box { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 4px; } .hud-chart-box .title { font-size: 8.5px; font-family: var(--ep-font-mono); color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; } .hud-chart-canvas { width: 100%; height: 38px; background: rgba(0, 0, 0, 0.15); border-radius: 4px; pointer-events: none; } /* Slide selectors */ .hero-scene-nav { display: flex; gap: 8px; justify-content: flex-start; margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 14px; } .hero-scene-dot { background: rgba(255, 255, 255, 0.15); border: none; width: 8px; height: 8px; border-radius: 50%; cursor: pointer; padding: 0; transition: all 0.2s; } .hero-scene-dot:hover { background: rgba(255, 255, 255, 0.4); } .hero-scene-dot.active { background: var(--site-accent); transform: scale(1.3); box-shadow: 0 0 8px var(--site-accent); } /* Compact hero (sub-pages) */ .site-hero-sub { min-height: 38vh; } .site-hero-sub h1 { font-size: clamp(32px, 4.4vw, 52px); } .site-hero-sub .site-hero-inner { padding-block: 72px 56px; } /* ── Sections ────────────────────────────────────────────────────────────── */ .site-section { padding: clamp(72px, 9vw, 112px) 0; position: relative; } .site-section.tint { background: var(--ep-bg-card); } .site-section.deep { background: var(--ep-bg-footer); } .site-section-head { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: end; margin-bottom: 56px; } @media (max-width: 880px) { .site-section-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 36px; } } .site-section-label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ep-font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--site-accent); margin-bottom: 14px; } .site-section-label::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; } .site-section h2 { font-family: var(--site-display); font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.014em; line-height: 1.1; margin: 0; max-width: 18ch; text-wrap: balance; } .site-section h2 .hl { color: var(--site-accent); } .site-section .section-lead { font-size: clamp(15px, 1.6vw, 18px); color: var(--ep-muted); line-height: 1.6; max-width: 58ch; text-wrap: pretty; } .site-section-head-side { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; } /* ── Core product site pills (home values lead) ─────────────────────────── */ .site-core-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .site-core-link { display: inline-flex; align-items: center; justify-content: center; min-width: 132px; padding: 11px 26px; border-radius: 999px; font-weight: 700; font-size: 14.5px; letter-spacing: 0.03em; text-decoration: none; color: rgba(255, 255, 255, 0.96); border: 1px solid transparent; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; white-space: nowrap; } .site-core-link:hover { transform: translateY(-2px); filter: brightness(1.06); } .site-core-link--md1000 { background: linear-gradient(135deg, rgba(18, 95, 108, 0.72), rgba(42, 155, 168, 0.62)); border-color: rgba(96, 210, 220, 0.38); box-shadow: 0 0 18px rgba(56, 190, 205, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .site-core-link--md1000:hover { box-shadow: 0 0 26px rgba(56, 190, 205, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .site-core-link--cdp { background: linear-gradient(135deg, rgba(28, 92, 58, 0.72), rgba(52, 145, 82, 0.62)); border-color: rgba(110, 210, 140, 0.36); box-shadow: 0 0 18px rgba(72, 180, 110, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .site-core-link--cdp:hover { box-shadow: 0 0 26px rgba(72, 180, 110, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .site-core-link--hd6g { background: linear-gradient(135deg, rgba(98, 42, 78, 0.72), rgba(155, 68, 118, 0.62)); border-color: rgba(210, 120, 175, 0.36); box-shadow: 0 0 18px rgba(180, 90, 145, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .site-core-link--hd6g:hover { box-shadow: 0 0 26px rgba(180, 90, 145, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18); } @media (max-width: 880px) { .site-core-links { justify-content: flex-start; } .site-core-link { min-width: 0; flex: 1 1 auto; } } /* ── Grid + Cards ────────────────────────────────────────────────────────── */ .site-grid { display: grid; gap: 22px; } .site-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .site-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .site-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .site-grid.cols-3, .site-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .site-grid.cols-2, .site-grid.cols-3, .site-grid.cols-4 { grid-template-columns: 1fr; } } .site-card { background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.005)); border: 1px solid var(--ep-border); border-radius: 14px; padding: 28px; transition: all .25s; display: flex; flex-direction: column; } .site-card:hover { transform: translateY(-3px); border-color: var(--ep-border-hover); box-shadow: 0 16px 40px rgba(0,0,0,.4); } .site-card .card-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--site-accent-dim); border: 1px solid var(--site-accent-border); color: var(--site-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; flex-shrink: 0; } .site-card h3 { font-family: var(--site-display); font-size: 18px; font-weight: 700; letter-spacing: -.005em; color: var(--ep-ink); margin: 0 0 8px; } .site-card p { color: var(--ep-muted); font-size: 14.5px; line-height: 1.65; margin: 0; } .site-card .card-foot { margin-top: auto; padding-top: 18px; } /* ── Footer ─────────────────────────────────────────────────────────────── */ .site-footer { background: var(--ep-bg-footer); border-top: 1px solid var(--ep-border); padding: 64px 0 32px; color: var(--ep-muted); font-size: 14px; } .site-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 36px; } @media (max-width: 880px) { .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 480px) { .site-footer-grid { grid-template-columns: 1fr; } } .site-footer h4 { font-family: var(--site-display); color: var(--ep-ink); font-size: 14px; font-weight: 700; letter-spacing: .02em; margin: 0 0 14px; } .site-footer-brand img { height: 32px; margin-bottom: 16px; } .site-footer-brand p { color: var(--ep-muted); font-size: 13.5px; line-height: 1.65; max-width: 36ch; margin: 0; } .site-footer-link { display: block; padding: 5px 0; color: var(--ep-muted); transition: color .15s; } .site-footer-link:hover { color: var(--site-accent); } .site-footer-bottom { padding-top: 24px; border-top: 1px solid var(--ep-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: #475569; } .site-footer-social { display: flex; gap: 8px; } .site-footer-social a { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--ep-border); display: inline-flex; align-items: center; justify-content: center; color: var(--ep-muted); transition: all .15s; } .site-footer-social a:hover { color: var(--site-accent); border-color: var(--site-accent); } /* ── Badges/pills used across pages ─────────────────────────────────────── */ .site-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--site-accent-dim); color: var(--site-accent); border: 1px solid var(--site-accent-border); border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; } /* Light mode adjustments */ [data-theme="light"] { --ep-bg: #ffffff; --ep-bg-card: #f8fafc; --ep-bg-footer: #f1f5f9; --ep-ink: #1e293b; --ep-ink-strong: #0f172a; --ep-muted: #64748b; --ep-border: rgba(0,0,0,.08); --ep-border-hover: rgba(0,0,0,.22); --site-brand: #2563EB; --site-brand-dark: #1e40af; --site-accent: #0ea5e9; --site-accent-dim: rgba(14,165,233,.10); --site-accent-border: rgba(14,165,233,.30); } [data-theme="light"] .site-hero { background: var(--ep-bg-card); } [data-theme="light"] .site-hero::after { background: linear-gradient(180deg, rgba(15,23,42,.05) 0%, rgba(15,23,42,.30) 60%, rgba(15,23,42,.80) 100%); } [data-theme="light"] .site-hero p.lead { color: #e2e8f0; } [data-theme="light"] .site-hero-stat .l { color: #cbd5e1; } [data-theme="light"] .site-card { background: linear-gradient(180deg, #fff, #f8fafc); } [data-theme="light"] .site-nav-links a:hover { background: rgba(0,0,0,.04); } [data-theme="light"] .site-nav-links.open { background: rgba(255,255,255,.98); }