* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* CSS Variables - Matching freemius-roles design */
:root {
/* Site roles, built from the brand palette in colors.css. */
--primary: var(--brand-blue);
--primary-dark: var(--blue-600);
--primary-light: rgba(59, 130, 246, 0.12);
--secondary: var(--blue-400);
--secondary-dark: var(--brand-blue);
--accent: #f97316;
--danger: #ef4444;
--warning: #f59e0b;
--success: #22c55e;
/* --bg-dark, --bg-card, --bg-hover, --text-primary, --text-secondary,
--border and --border-light change with the colour mode, so they
live in colors.css next to the mode tokens. */
/* Header stays off-white: the logo is designed for a light background. */
--header-bg: var(--brand-white);
--header-text: var(--brand-navy);
--header-link: var(--ink-700);
--header-sublink: var(--ink-600);
--header-border: var(--ink-100);
--header-control-border: var(--ink-200);
/* Layout: every page uses these, so page widths and edges match. */
--page-max: 1300px; /* the one boxed page width, used on every page */
--page-gutter: clamp(20px, 4vw, 40px); /* left/right padding of every section */}
/* Base Styles */body {
background: var(--bg-dark);
color: var(--text-primary);
font-family: var(--font-body);
line-height: 1.6;
overflow-x: hidden;}
h1,h2,h3,h4,h5,h6 {
font-family: var(--font-heading);
font-weight: 700;
line-height: 1.2;
margin: 0;}
/* Default heading sizes from the scale in fonts.css. :where() keeps these at
zero specificity so any class-based heading size still wins. */
:where(h1) { font-size: var(--fs-page-title); }
:where(h2) { font-size: var(--fs-section-title); }
:where(h3) { font-size: var(--fs-card-title); }
:where(h4, h5, h6) { font-size: var(--fs-subheading); }
a {
color: var(--primary);
text-decoration: none;
transition: all 0.3s ease;}
a:hover {
color: var(--primary-dark);
text-decoration: none;}
img {
max-width: 100%;
height: auto;}
.site {
min-height: 100vh;
display: flex;
flex-direction: column;}
.site-content {
flex: 1;}
/* Screen Reader Text */.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;}
/* Header Styles */.site-header {
/* Solid white bar with a hairline divider from the dark page below.
No backdrop-filter: blur on a sticky header repaints every scroll
frame and tanks performance (very visible in a VM). */
background: var(--header-bg);
border-bottom: 1px solid var(--header-border);
padding: 0;
position: sticky;
top: 0;
z-index: 1000;
transform: translateY(0);
transition: transform 0.25s ease, box-shadow 0.25s ease;}
.site-header.header-hidden {
transform: translateY(calc(-100% - 2px));}
.site-header.scrolled {
box-shadow: 0 4px 16px rgba(11, 18, 32, 0.08);}
.header-container {
max-width: calc(var(--page-max) + 2 * var(--page-gutter));
margin: 0 auto;
padding: 5px var(--page-gutter);
display: flex;
justify-content: space-between;
align-items: center;}
.site-branding .custom-logo-link {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;}
.logo-icon {
font-size: 32px;
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));}
/* Image-based logo */.site-logo-img {
height: 42px;
width: auto;
display: block;
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));}
/* Header wordmark (bellcrier-logo.svg, 7.59:1): sized by width so it never
crowds the nav; no glow on the white bar. */
.site-header .site-logo-img {
width: clamp(200px, 21vw, 260px);
height: auto;
filter: none;}
/* Image-based icon (replaces FA shield icons) */.site-icon-img {
width: 1em;
height: 1em;
object-fit: contain;
vertical-align: middle;
display: inline-block;}
/* When inside containers with explicit font-size, inherit sizing */.plan-icon .site-icon-img,.feature-icon .site-icon-img {
width: 48px;
height: 48px;}
.badge-icon .site-icon-img {
width: 16px;
height: 16px;}
.logo-text {
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: var(--font-heading);
letter-spacing: -0.5px;}
.main-navigation {
display: flex;
align-items: center;
gap: 32px;}
.main-navigation ul {
list-style: none;
display: flex;
gap: 24px;
margin: 0;
padding: 0;}
.main-navigation a {
color: var(--header-link);
font-weight: 600;
font-size: 16px;
padding: 8px 16px;
border-radius: 6px;
transition: all 0.3s ease;}
.main-navigation a:hover {
color: var(--primary-dark);
background: var(--primary-light);}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current-page-ancestor > a {
color: var(--primary-dark);
background: var(--primary-light);}
.main-navigation .btn-primary {
color: var(--brand-white);}
/* Beat `.main-navigation a:hover` (light tint), which otherwise washes the
CTA out to white-on-white. */
.main-navigation .btn-primary:hover {
color: var(--brand-white);
background: var(--primary-dark);}
/* Sign In / Logout: solid buttons in the logo's dark blue with white text,
so they stand out on the off-white header next to the blue Start Free Trial. */
.site-header .btn-secondary,
.site-header .btn-logout {
color: var(--brand-white);
background: var(--brand-stroke);
border: 1px solid var(--brand-stroke);}
.site-header .btn-secondary:hover,
.site-header .btn-secondary:focus-visible {
color: var(--brand-white);
background: var(--blue-800);
border-color: var(--blue-800);}
.site-header .btn-logout:hover {
color: var(--danger);
border-color: var(--danger);
background: rgba(239, 68, 68, 0.08);}
.menu-toggle {
display: none;
background: transparent;
border: 1px solid var(--header-control-border);
border-radius: 6px;
padding: 10px;
cursor: pointer;
flex-direction: column;
gap: 4px;}
.menu-toggle span {
width: 24px;
height: 2px;
background: var(--header-text);
transition: all 0.3s ease;}
.header-actions {
display: flex;
gap: 12px;
align-items: center;}
/* Button Styles */.btn-primary,.btn-secondary,.btn-logout,.fs-btn-primary,.fs-btn-secondary {
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
cursor: pointer;
border: none;
font-size: 15px;}
.btn-primary,.fs-btn-primary {
background: var(--primary);
color: var(--on-accent);}
.btn-primary:hover,.fs-btn-primary:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
color: var(--text-primary);}
.btn-secondary,.fs-btn-secondary {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);}
.btn-secondary:hover,.fs-btn-secondary:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-light);}
.btn-logout {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);}
.btn-logout:hover {
border-color: var(--danger);
color: var(--danger);
border-color: var(--danger);
color: var(--danger);
background: rgba(239, 68, 68, 0.1);}
.fs-btn-danger {
background: rgba(239, 68, 68, 0.1);
color: var(--danger);
border: 1px solid var(--danger);
position: relative;
overflow: hidden;
z-index: 1;}
.fs-btn-danger:hover {
background: var(--danger);
color: white;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
transform: translateY(-2px);
border-color: var(--danger);}
.fs-btn-danger i {
transition: transform 0.3s ease;}
.fs-btn-danger:hover i {
transform: rotate(15deg) scale(1.1);}
/* Hero Section */.hero-section {
padding: 120px var(--page-gutter) 150px;
background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-card) 100%);
position: relative;
overflow: hidden;}
.hero-section::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
border-radius: 50%;}
.hero-container {
max-width: var(--page-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;}
.hero-content {
z-index: 1;}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--primary-light);
border: 1px solid var(--primary);
border-radius: 50px;
font-size: 14px;
font-weight: 600;
color: var(--primary);
margin-bottom: 24px;}
.hero-title {
font-size: var(--fs-hero);
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
color: var(--text-primary);}
.gradient-text {
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: var(--font-heading) !important;
font-weight: 900;
}
.hero-subtitle {
font-size: 18px;
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 32px;
max-width: 600px;}
.hero-actions {
display: flex;
gap: 16px;
margin-bottom: 48px;}
.btn-hero-primary,.btn-hero-secondary {
padding: 16px 32px;
border-radius: 10px;
font-weight: 700;
font-size: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
cursor: pointer;
border: none;
text-decoration: none;}
.btn-hero-primary {
background: var(--primary);
color: var(--on-accent);
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);}
.btn-hero-primary:hover {
background: var(--primary-dark);
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
color: var(--text-primary);}
.btn-hero-secondary {
background: var(--bg-card);
color: var(--text-primary);
border: 1px solid var(--border);}
.btn-hero-secondary:hover {
border-color: var(--primary);
background: var(--bg-hover);}
.hero-stats {
display: flex;
gap: 20px;
align-items: stretch;
background: color-mix(in srgb, var(--sf-page) 45%, transparent);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;}
.stat-item {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
min-width: 0;}
.stat-number {
font-size: 20px;
font-weight: 700;
color: var(--primary);
line-height: 1.25;
font-family: var(--font-heading);}
.stat-label {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.8px;
line-height: 1.35;}
.stat-divider {
width: 1px;
align-self: stretch;
background: var(--border);}
/* Hero Visual */.hero-visual {
position: relative;
z-index: 1;}
.hero-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 16px;
padding: 32px;
box-shadow: 0 20px 60px rgba(11, 18, 32, 0.3);}
.hero-card.floating {
animation: float 6s ease-in-out infinite;}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
.security-indicator {
display: flex;
align-items: center;
gap: 12px;
padding: 16px;
background: var(--primary-light);
border: 1px solid var(--primary);
border-radius: 10px;
margin-bottom: 24px;}
.indicator-icon {
font-size: 24px;}
.indicator-text {
font-weight: 600;
color: var(--primary);}
.breach-monitor {
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;}
.monitor-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);}
.monitor-title {
font-weight: 700;
color: var(--text-primary);}
.monitor-items {
display: flex;
flex-direction: column;
gap: 12px;}
.monitor-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: var(--bg-card);
border-radius: 8px;
transition: all 0.3s ease;}
.monitor-item:hover {
background: var(--bg-hover);}
.item-icon {
font-size: 20px;}
.item-text {
flex: 1;
color: var(--text-secondary);
font-size: 14px;}
.item-status {
font-weight: 700;
color: var(--success);}
.item-status.pulse {
color: var(--primary);
animation: pulse 2s ease-in-out infinite;}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Product preview carousel (homepage) */
.product-preview-section {
padding: 80px var(--page-gutter) 40px;
background: var(--bg-dark);
}
.product-preview-section .section-header {
margin-bottom: 48px;
}
.product-preview-carousel {
position: relative;
max-width: var(--page-max);
margin: 0 auto;
padding: 0 56px;
outline: none;
}
.product-preview-carousel:focus-visible {
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.45);
border-radius: 20px;
}
.product-preview-viewport {
overflow: hidden;
border-radius: 18px;
border: 1px solid rgba(51, 65, 85, 0.9);
background: linear-gradient(180deg, rgba(30, 41, 59, 0.94) 0%, rgba(11, 18, 32, 0.97) 100%);
box-shadow: 0 20px 50px rgba(11, 18, 32, 0.5), inset 0 1px 0 rgba(140, 153, 173, 0.08);
}
.product-preview-track {
display: flex;
align-items: center;
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform;
}
.product-preview-slide {
flex: 0 0 100%;
margin: 0;
opacity: 0.35;
transition: opacity 0.35s ease;
}
.product-preview-slide.is-active {
opacity: 1;
}
.product-preview-image {
display: block;
width: 100%;
height: auto;
vertical-align: middle;
}
@media (max-width: 768px) {
.product-preview-section {
padding: 56px var(--page-gutter) 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.product-preview-track {
transition: none;
}
.product-preview-slide {
transition: none;
}
}
/* Features Section */.features-section {
padding: 100px var(--page-gutter);
background: var(--bg-dark);}
.password-checker-section {
padding: 0 var(--page-gutter) 70px;
background: transparent;
position: relative;
margin-top: -82px;
z-index: 6;
}
.password-checker-section::before {
content: none;
}
.password-checker-section .section-container {
max-width: var(--page-max);
margin: 0 auto;
padding: 56px 44px;
border-radius: 24px;
border: 1px solid rgba(51, 65, 85, 0.9);
background: radial-gradient(circle at 18% 10%, rgba(59, 130, 246, 0.2), transparent 36%),
radial-gradient(circle at 82% 16%, rgba(16, 185, 129, 0.18), transparent 34%),
linear-gradient(180deg, color-mix(in srgb, var(--sf-1) 94%, transparent) 0%, color-mix(in srgb, var(--sf-page) 97%, transparent) 100%);
box-shadow: 0 20px 50px rgba(11, 18, 32, 0.5), inset 0 1px 0 rgba(140, 153, 173, 0.08);
opacity: 0;
transform: translateY(38px) scale(0.985);
transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.password-checker-section .section-container.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.password-checker-section .fs-breach-checker-card {
margin-top: 20px;
max-width: 920px;
margin: 0 auto;
border: 1px solid rgba(59, 130, 246, 0.35);
box-shadow: 0 16px 42px rgba(11, 18, 32, 0.5), 0 0 0 1px rgba(16, 185, 129, 0.12);
background: linear-gradient(135deg, color-mix(in srgb, var(--sf-1) 92%, transparent), color-mix(in srgb, var(--sf-page) 96%, transparent));
}
.password-checker-section .section-title {
text-shadow: 0 0 18px rgba(59, 130, 246, 0.28);
}
.password-checker-section .bapc-input-row .bapc-input {
border: 1px solid rgba(59, 130, 246, 0.35);
background: color-mix(in srgb, var(--sf-page) 75%, transparent);
}
.password-checker-section .bapc-input-row .bapc-button {
background: linear-gradient(135deg, #10b981, #059669);
border: 1px solid rgba(16, 185, 129, 0.45);
box-shadow: 0 8px 22px rgba(16, 185, 129, 0.25);
}
.password-checker-section .bapc-input-row .bapc-button:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(16, 185, 129, 0.35);
}
.password-checker-section .trusted-by-inline {
width: 100%;
max-width: none;
margin: 86px 0 0;
text-align: center;
}
.password-checker-section .trusted-by-title {
margin: 0 0 14px;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary);
opacity: 0.9;
}
.password-checker-section .trusted-by-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 28px;
}
.password-checker-section .trusted-by-logo {
max-height: 34px;
width: auto;
opacity: 0.8;
filter: brightness(0) invert(1);
}
@media (max-width: 768px) {
.hero-section {
padding-bottom: 110px;
}
.password-checker-section {
margin-top: -48px;
padding-bottom: 56px;
}
.password-checker-section .section-container {
padding: 36px 20px;
border-radius: 18px;
}
.password-checker-section .trusted-by-logos {
gap: 18px;
}
.password-checker-section .trusted-by-logo {
max-height: 28px;
}
}
.section-container {
max-width: var(--page-max);
margin: 0 auto;}
.section-header {
text-align: center;
margin-bottom: 64px;}
.section-title {
font-size: var(--fs-section-title);
font-weight: 800;
margin-bottom: 16px;
color: var(--text-primary);}
.section-subtitle {
font-size: 18px;
color: var(--text-secondary);}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 32px;}
.feature-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 32px;
transition: all 0.3s ease;}
.feature-card:hover {
border-color: var(--primary);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(11, 18, 32, 0.3);}
.feature-icon {
font-size: 48px;
margin-bottom: 20px;
display: block;}
.feature-title {
font-size: var(--fs-card-title);
font-weight: 700;
margin-bottom: 12px;
color: var(--text-primary);}
.feature-description {
color: var(--text-secondary);
line-height: 1.7;}
/* How It Works Section */.how-it-works-section {
padding: 100px var(--page-gutter);
background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-dark) 100%);}
.steps-grid {
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
max-width: var(--page-max);
margin: 0 auto;}
.step-card {
background: var(--bg-dark);
border: 2px solid var(--border);
border-radius: 16px;
padding: 40px;
text-align: center;
flex: 1;
position: relative;
transition: all 0.3s ease;}
.step-card:hover {
border-color: var(--primary);
transform: translateY(-10px);}
.step-number {
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
background: var(--primary);
color: var(--on-accent);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 18px;}
.step-icon {
font-size: 48px;
margin: 20px 0;}
.step-title {
font-size: var(--fs-card-title);
font-weight: 700;
margin-bottom: 12px;
color: var(--text-primary);}
.step-description {
color: var(--text-secondary);
line-height: 1.6;}
.step-arrow {
font-size: 32px;
color: var(--primary);
font-weight: 700;}
/* Homepage type emphasis */
.homepage-content .hero-title,
.homepage-content .section-title,
.homepage-content .cta-title {
font-weight: 900;
letter-spacing: -0.01em;
}
.homepage-content .hero-title {
font-size: var(--fs-hero);
line-height: 1.12;
}
.homepage-content .feature-title,
.homepage-content .step-title,
.homepage-content .monitor-title {
font-weight: 800;
}
.homepage-content .hero-badge,
.homepage-content .indicator-text,
.homepage-content .stat-number {
font-weight: 800;
}
.homepage-content .btn-hero-primary,
.homepage-content .btn-hero-secondary,
.homepage-content .btn-cta {
font-weight: 800;
}
/* Pricing Section */.pricing-hero {
padding: 80px 40px 40px;
background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-card) 100%);
text-align: center;}
.pricing-hero-container {
max-width: var(--page-max);
margin: 0 auto;}
.pricing-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
background: var(--primary-light);
border: 1px solid var(--primary);
border-radius: 50px;
font-size: 14px;
font-weight: 600;
color: var(--primary);
margin-bottom: 24px;}
.pricing-hero-title {
font-size: var(--fs-page-title);
font-weight: 800;
line-height: 1.2;
margin-bottom: 20px;
color: var(--text-primary);}
.pricing-hero-subtitle {
font-size: 18px;
color: var(--text-secondary);
line-height: 1.8;}
.pricing-section {
padding: 60px var(--page-gutter);
background: var(--bg-dark);}
.pricing-container {
max-width: var(--page-max);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 32px;}
.pricing-card {
background: var(--bg-card);
border: 2px solid var(--border);
border-radius: 16px;
padding: 40px;
position: relative;
transition: all 0.3s ease;}
.pricing-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(11, 18, 32, 0.4);}
.pricing-card.featured {
border-color: var(--primary);
background: linear-gradient(135deg, var(--bg-card), var(--bg-hover));}
.popular-badge {
position: absolute;
top: -16px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: var(--on-accent);
padding: 8px 20px;
border-radius: 50px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;}
.pricing-card-header {
text-align: center;
margin-bottom: 32px;}
.plan-icon {
font-size: 48px;
margin-bottom: 16px;}
.plan-name {
font-size: 28px;
font-weight: 800;
margin-bottom: 8px;
color: var(--text-primary);}
.plan-description {
font-size: 14px;
color: var(--text-secondary);}
.pricing-card-price {
text-align: center;
margin-bottom: 32px;}
.price-currency {
font-size: 24px;
font-weight: 700;
color: var(--text-secondary);
vertical-align: top;}
.price-amount {
font-size: 64px;
font-weight: 800;
color: var(--primary);
font-family: var(--font-heading);
line-height: 1;}
.price-period {
font-size: 18px;
color: var(--text-secondary);}
.pricing-card-features {
list-style: none;
margin-bottom: 32px;}
.pricing-card-features .feature-item {
padding: 12px 0;
display: flex;
align-items: flex-start;
gap: 12px;
border-bottom: 1px solid var(--border);
justify-content: center;}
.pricing-card-features .feature-item:last-child {
border-bottom: none;}
.pricing-card-features .feature-icon {
color: var(--primary);
font-weight: 700;
font-size: 18px;}
.pricing-card-features .feature-item.disabled .feature-icon {
color: var(--text-secondary);
opacity: 0.5;}
.pricing-card-features .feature-item.disabled .feature-text {
color: var(--text-secondary);
opacity: 0.5;}
.pricing-card-features .feature-text {
color: var(--text-primary);
font-size: 15px;
line-height: 1.6;}
.btn-pricing {
width: 100%;
padding: 16px;
background: var(--bg-dark);
border: 2px solid var(--border);
border-radius: 10px;
color: var(--text-primary);
font-weight: 700;
font-size: 16px;
text-align: center;
display: block;
transition: all 0.3s ease;
cursor: pointer;}
.btn-pricing:hover {
border-color: var(--primary);
background: var(--primary);
color: var(--on-accent);
transform: translateY(-2px);}
.btn-pricing.featured {
background: var(--primary);
border-color: var(--primary);
color: var(--on-accent);}
.btn-pricing.featured:hover {
background: var(--primary-dark);
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);}
.pricing-card-note {
text-align: center;
margin-top: 16px;
font-size: 13px;
color: var(--text-secondary);}
/* Billing Toggle */.billing-toggle-container {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 24px;}
.billing-toggle {
position: relative;
display: inline-block;
width: 60px;
height: 32px;
cursor: pointer;}
.billing-toggle input {
opacity: 0;
width: 0;
height: 0;}
.billing-slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--brand-blue), var(--blue-600));
border-radius: 32px;
transition: 0.3s;}
.billing-toggle-knob {
position: absolute;
height: 24px;
width: 24px;
left: 4px;
bottom: 4px;
background-color: var(--brand-white);
border-radius: 50%;
transition: 0.3s;
box-shadow: 0 2px 4px rgba(11, 18, 32, 0.2);
}
#toggle-knob.toggled {
transform: translateX(28px);}
.billing-label {
font-size: 15px;
line-height: 1;
transition: color 0.3s ease, font-weight 0.3s ease;}
.pricing-page .billing-toggle-container {
gap: 8px;
margin: 10px 0 20px;
}
.pricing-page .billing-label {
margin: 0;
}
.savings-badge {
display: inline-block;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
color: #78350f;
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 12px;
margin-left: 6px;
animation: pulse-glow 2s ease-in-out infinite;}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
}
50% {
box-shadow: 0 0 12px 4px rgba(251, 191, 36, 0.3);
}
}
.yearly-breakdown {
text-align: center;
margin-top: -8px;
margin-bottom: 12px;}
/* Pricing Preview Section */.pricing-preview-section {
padding: 20px var(--page-gutter);
background: var(--bg-card);}
.pricing-preview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
max-width: var(--page-max);
margin: 0 auto 48px;}
.pricing-preview-card {
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 12px;
padding: 32px;
text-align: center;
transition: all 0.3s ease;}
.pricing-preview-card:hover {
transform: translateY(-5px);
border-color: var(--primary);}
.pricing-preview-card.featured {
border-color: var(--primary);
border-width: 2px;
position: relative;}
.pricing-preview-card.featured::before {
content: 'Most Popular';
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: var(--on-accent);
padding: 4px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;}
.pricing-page .pricing-container {
grid-template-columns: 1fr;
max-width: var(--page-max);
}
.pricing-page .pricing-card.dynamic-card {
padding: 0 !important;
overflow: hidden;
border: 1px solid var(--tx-700);
background: radial-gradient(circle at top, rgba(24, 65, 131, 0.2) 0%, color-mix(in srgb, var(--sf-page) 100%, transparent) 60%);
box-shadow: 0 20px 60px rgba(11, 18, 32, 0.55);
}
.pricing-page .returning-user-banner {
background: linear-gradient(135deg, rgba(49, 111, 213, 0.9) 0%, rgba(107, 160, 248, 0.85) 100%);
color: var(--on-accent);
padding: 14px 18px;
border-radius: 10px;
margin: 0 24px 20px;
text-align: center;
}
.pricing-page .returning-user-banner p {
margin: 0;
font-size: 15px;
font-weight: 600;
}
.pricing-page .pricing-card-layout {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
}
.pricing-page .pricing-card-left {
padding: 56px 48px 40px;
}
.pricing-page .pricing-card-right {
padding: 56px 40px 40px;
border-left: 1px solid rgba(140, 153, 173, 0.18);
background: linear-gradient(180deg, color-mix(in srgb, var(--sf-page) 45%, transparent) 0%, color-mix(in srgb, var(--sf-page) 65%, transparent) 100%);
}
.pricing-page .pricing-card-header {
margin-bottom: 24px;
}
.pricing-page .plan-name {
font-size: 42px;
}
.pricing-page .plan-description {
font-size: 18px;
}
.pricing-page .license-selector-container {
margin: 24px 0 26px !important;
text-align: center;
}
.pricing-page .license-selector-container label {
color: var(--text-primary);
font-size: 17px;
display: block;
margin-bottom: 8px;
font-weight: 600;
}
.pricing-page .license-selector-container select.form-select {
background: color-mix(in srgb, var(--sf-page) 75%, transparent);
color: var(--text-primary);
border: 1px solid var(--tx-700) !important;
}
.pricing-page .current-plan-info {
margin: 20px 0;
padding: 16px;
background: rgba(107, 160, 248, 0.12);
border: 1px solid rgba(107, 160, 248, 0.45);
border-radius: 10px;
text-align: center;
}
.pricing-page .current-plan-info-title {
margin: 0 0 8px;
font-weight: 700;
color: var(--ac-200);
}
.pricing-page .current-plan-info-subtitle {
margin: 0;
color: var(--ac-300);
}
.pricing-page .license-range-wrap {
margin-top: 8px;
}
.pricing-page .license-range-value {
margin-bottom: 10px;
font-size: 22px;
font-weight: 700;
color: var(--primary);
}
.pricing-page .license-range-input {
width: 100%;
accent-color: var(--primary);
height: 34px;
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
--slider-progress: 0%;
}
.pricing-page .license-range-input::-webkit-slider-runnable-track {
height: 10px;
border-radius: 999px;
border: 1px solid rgba(140, 153, 173, 0.35);
background: linear-gradient(90deg,
rgba(59, 130, 246, 0.95) var(--slider-progress),
color-mix(in srgb, var(--sf-page) 90%, transparent) var(--slider-progress));
}
.pricing-page .license-range-input::-webkit-slider-thumb {
-webkit-appearance: none;
width: 22px;
height: 22px;
margin-top: -7px;
border-radius: 50%;
border: 2px solid var(--tx-100);
background: radial-gradient(circle at 35% 35%, var(--blue-300) 0%, var(--brand-blue) 55%, var(--blue-600) 100%);
box-shadow: 0 2px 10px rgba(59, 130, 246, 0.45);
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.pricing-page .license-range-input::-moz-range-track {
height: 10px;
border-radius: 999px;
border: 1px solid rgba(140, 153, 173, 0.35);
background: color-mix(in srgb, var(--sf-page) 90%, transparent);
}
.pricing-page .license-range-input::-moz-range-thumb {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid var(--tx-100);
background: radial-gradient(circle at 35% 35%, var(--blue-300) 0%, var(--brand-blue) 55%, var(--blue-600) 100%);
box-shadow: 0 2px 10px rgba(59, 130, 246, 0.45);
transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.pricing-page .license-range-input::-moz-range-progress {
height: 10px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(59, 130, 246, 0.95), rgba(49, 111, 213, 0.95));
}
.pricing-page .license-range-input:hover::-webkit-slider-thumb,
.pricing-page .license-range-input:focus-visible::-webkit-slider-thumb,
.pricing-page .license-range-input:hover::-moz-range-thumb,
.pricing-page .license-range-input:focus-visible::-moz-range-thumb {
transform: scale(1.08);
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25), 0 3px 12px rgba(59, 130, 246, 0.5);
}
.pricing-page .license-range-input:focus-visible {
outline: none;
}
.pricing-page .license-range-labels {
display: none;
}
.pricing-page .pricing-card-price {
margin-bottom: 18px;
}
.pricing-page .yearly-breakdown {
display: none;
text-align: center;
margin-top: 2px;
margin-bottom: 12px;
}
.pricing-page .pricing-switch-link {
appearance: none;
-webkit-appearance: none;
background: none;
border: none;
color: var(--primary);
font-size: 14px;
font-weight: 700;
text-decoration: underline;
cursor: pointer;
padding: 0;
margin-left: 6px;
}
.pricing-page .pricing-switch-link:hover {
color: var(--primary-dark);
}
.pricing-page .price-currency {
font-size: 36px;
}
.pricing-page .price-amount {
font-size: 54px;
}
.pricing-page .price-period {
font-size: 22px;
}
.pricing-page .btn-pricing {
margin-top: 18px;
padding: 14px 16px;
border-radius: 12px;
font-size: 17px;
}
.pricing-page #purchase-btn {
background: var(--primary);
}
.pricing-page #upgrade-btn {
background: var(--blue-600);
}
.pricing-page #downgrade-btn {
background: #d97706;
}
.pricing-page .pricing-card-note {
margin-top: 18px;
font-size: 13px;
}
.pricing-page .pricing-included-title {
margin: 0 0 20px;
font-size: var(--fs-section-title);
color: var(--text-primary);
}
.pricing-page .pricing-card-features {
margin-bottom: 0;
}
.pricing-page .pricing-card-features .feature-item {
justify-content: flex-start;
align-items: center;
padding: 18px 0;
}
.pricing-page .pricing-card-features .feature-icon {
width: 34px;
height: 34px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(59, 130, 246, 0.14);
font-size: 18px;
margin-bottom: 0;
}
.pricing-page .pricing-card-features .feature-text {
font-size: 17px;
display: inline-flex;
align-items: center;
line-height: 1.35;
margin-top: 0;
}
.pricing-page .pricing-card-features .feature-text strong {
line-height: inherit;
}
.pricing-page .feature-count {
margin-right: 5px;
}
@media (max-width: 991px) {
.pricing-page .pricing-card-layout {
grid-template-columns: 1fr;
}
.pricing-page .pricing-card-right {
border-left: none;
border-top: 1px solid rgba(140, 153, 173, 0.18);
}
.pricing-page .pricing-card-left, .pricing-page .pricing-card-right {
padding: 32px 24px;
}
.pricing-page .plan-name {
font-size: 34px;
}
.pricing-page .price-amount {
font-size: 50px;
}
}
.pricing-preview-header h3 {
font-size: var(--fs-card-title);
margin-bottom: 16px;
color: var(--text-primary);}
.pricing-preview-price {
margin-bottom: 24px;}
.pricing-preview-features {
list-style: none;
text-align: left;}
.pricing-preview-features li {
padding: 8px 0;
color: var(--text-secondary);
font-size: 14px;}
.pricing-preview-cta {
text-align: center;
margin-top: 48px;}
.btn-primary-large {
padding: 18px 40px;
font-size: 18px;
font-weight: 700;
background: var(--primary);
color: var(--on-accent);
border-radius: 10px;
display: inline-block;
transition: all 0.3s ease;}
.btn-primary-large:hover {
background: var(--primary-dark);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
color: var(--text-primary);}
/* CTA Section */.cta-section {
padding: 100px var(--page-gutter);
border-top: 1px solid var(--border);
background: radial-gradient(760px 340px at 50% 0%, rgba(59, 130, 246, 0.24), transparent 72%), var(--sf-cta);
position: relative;
overflow: hidden;}
.cta-container {
max-width: var(--page-max);
margin: 0 auto;
text-align: center;
position: relative;
z-index: 1;}
.cta-title {
font-size: var(--fs-section-title);
font-weight: 800;
margin-bottom: 24px;
color: var(--tx-strong);}
.cta-subtitle {
font-size: 18px;
color: rgba(252, 252, 253, 0.9);
line-height: 1.8;
margin-bottom: 40px;}
.btn-cta {
padding: 18px 40px;
font-size: 18px;
font-weight: 700;
background: var(--brand-white);
color: var(--primary);
border-radius: 10px;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;}
.btn-cta:hover {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 12px 40px rgba(11, 18, 32, 0.3);}
.cta-note {
margin-top: 24px;
font-size: 14px;
color: rgba(252, 252, 253, 0.8);}
/* Footer */.site-footer {
background: var(--bg-card);
border-top: 2px solid var(--border);
padding: 60px var(--page-gutter) 30px;
margin-top: auto;}
.footer-container {
max-width: var(--page-max);
margin: 0 auto;}
.footer-widgets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;}
.footer-widget h3 {
font-size: var(--fs-subheading);
font-weight: 700;
margin-bottom: 20px;
color: var(--primary);}
.footer-widget p {
color: var(--text-secondary);
line-height: 1.7;}
.footer-widget ul {
list-style: none;}
.footer-widget ul li {
margin-bottom: 10px;}
.footer-widget ul li a {
color: var(--text-secondary);
transition: all 0.3s ease;}
.footer-widget ul li a:hover {
color: var(--primary);
padding-left: 5px;}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 30px;
border-top: 1px solid var(--border);}
.copyright,.powered-by {
color: var(--text-secondary);
font-size: 14px;}
.highlight {
color: var(--primary);
font-weight: 700;}
/* Sign In Page */.signin-page {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
padding: 60px var(--page-gutter);}
.signin-container {
width: 100%;
max-width: var(--page-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;}
.signin-card {
background: var(--bg-card);
border: 1px solid var(--border);
padding: 48px;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(11, 18, 32, 0.3);}
.signin-header {
text-align: center;
margin-bottom: 40px;}
.signin-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 24px;}
.signin-logo .logo-on-light { display: none; width: 220px; height: auto; }
[data-theme="light"] .signin-logo .logo-on-dark { display: none; }
[data-theme="light"] .signin-logo .logo-on-light { display: block; }
.signin-title {
font-size: var(--fs-page-title);
font-weight: 800;
margin-bottom: 12px;
color: var(--text-primary);}
.signin-subtitle {
font-size: 16px;
color: var(--text-secondary);}
.signin-alert {
padding: 16px;
border-radius: 8px;
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
border-left: 4px solid;}
.signin-alert-success {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
border-left-color: var(--success);
border: 1px solid rgba(16, 185, 129, 0.2);}
.signin-alert-warning {
background: rgba(245, 158, 11, 0.1);
color: var(--warning);
border-left-color: var(--warning);
border: 1px solid rgba(245, 158, 11, 0.2);}
.signin-alert-danger {
background: rgba(239, 68, 68, 0.1);
color: var(--danger);
border-left-color: var(--danger);
border: 1px solid rgba(239, 68, 68, 0.2);}
.signin-form .form-group {
margin-bottom: 24px;}
.form-label {
display: block;
font-weight: 600;
margin-bottom: 10px;
color: var(--text-primary);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;}
.form-input {
width: 100%;
padding: 14px 18px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 15px;
color: var(--text-primary);
transition: all 0.3s ease;}
.form-input:focus {
outline: none;
border-color: var(--primary);
background: var(--bg-hover);}
.form-input::placeholder {
color: var(--text-secondary);
opacity: 0.6;}
.form-remember {
display: flex;
align-items: center;}
.checkbox-label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;}
.checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;}
.checkbox-text {
color: var(--text-secondary);
font-size: 14px;}
.btn-signin {
width: 100%;
padding: 16px;
background: var(--primary);
color: var(--on-accent);
border: none;
border-radius: 10px;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;}
.btn-signin:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);}
.signin-footer {
margin-top: 32px;
text-align: center;}
.signin-link {
color: var(--primary);
font-weight: 600;
font-size: 14px;}
.signin-link:hover {
text-decoration: underline;}
.signin-divider {
margin: 24px 0;
display: flex;
align-items: center;
gap: 16px;}
.signin-divider::before,.signin-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);}
.signin-divider span {
color: var(--text-secondary);
font-size: 12px;
font-weight: 600;}
.signin-register-text {
color: var(--text-secondary);
font-size: 14px;}
.signin-register-link {
color: var(--primary);
font-weight: 700;}
.signin-features {
padding: 20px;}
.features-title {
font-size: var(--fs-card-title);
font-weight: 700;
margin-bottom: 32px;
color: var(--text-primary);}
.signin-features .feature-item {
display: flex;
gap: 20px;
margin-bottom: 32px;
align-items: flex-start;}
.signin-features .feature-icon {
font-size: 32px;}
.signin-features .feature-content h4 {
font-size: var(--fs-subheading);
font-weight: 700;
margin-bottom: 8px;
color: var(--text-primary);}
.signin-features .feature-content p {
color: var(--text-secondary);
line-height: 1.6;}
/* WooCommerce Dashboard Styles (Matching freemius-roles) */.fs-membership-container {
max-width: calc(var(--page-max) + 2 * var(--page-gutter));
margin: 0 auto;
padding: 30px var(--page-gutter);}
.fs-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
padding: 20px 0;
border-bottom: 2px solid var(--border);}
.fs-logo {
display: flex;
align-items: center;
gap: 12px;}
.fs-logo-icon {
font-size: 32px;
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.4));}
.fs-logo-text {
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: var(--font-heading);
letter-spacing: -0.5px;}
.fs-logo-subtitle {
font-size: 11px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1.5px;
margin-left: 8px;
font-weight: 600;}
.fs-logout-btn {
padding: 12px 24px;
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all .3s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;}
.fs-logout-btn:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-light);}
.fs-tabs {
display: flex;
gap: 8px;
margin-bottom: 30px;
border-bottom: 2px solid var(--border);
padding-bottom: 0;}
.fs-tab {
padding: 14px 28px;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
font-weight: 600;
font-size: 15px;
color: var(--text-secondary);
transition: all .3s ease;
position: relative;}
.fs-tab:focus-visible {
outline: 2px solid var(--primary);
outline-offset: -2px;
background: rgba(59, 130, 246, 0.1);
border-radius: 4px;}
.fs-tab:before {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 3px;
background: var(--primary);
transition: width .3s ease;}
.fs-tab:hover {
color: var(--primary);}
.fs-tab:hover:before {
width: 100%;}
.fs-tab.active {
color: var(--primary);}
.fs-tab.active:before {
width: 100%;}
.fs-tab-content {
display: none;}
.fs-tab-content.active {
display: block;
animation: fadeIn .4s ease;}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fs-breach-checker-container {
display: grid;
grid-template-columns: 1fr 380px;
gap: 30px;}
@media screen and (max-width: 991px) {
.fs-breach-checker-container {
grid-template-columns: 1fr;
}
.fs-sidebar {
order: 2;
}
.fs-main-content {
order: 1;
}
.fs-tabs {
overflow-x: auto;
white-space: nowrap;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.fs-tab {
padding: 12px 20px;
white-space: nowrap;
}
}
.fs-main-content {
display: flex;
flex-direction: column;
gap: 24px;}
.fs-welcome-card {
background: linear-gradient(135deg, var(--bg-card), var(--bg-hover));
border: 1px solid var(--border);
border-left: 4px solid var(--primary);
padding: 32px;
border-radius: 12px;}
.fs-welcome-card h2 {
margin: 0 0 16px 0;
font-size: var(--fs-section-title);
font-weight: 700;
font-family: var(--font-heading);}
.fs-plan-badge {
display: inline-flex;
padding: 8px 16px;
background: var(--primary-light);
border: 1px solid var(--primary);
border-radius: 6px;
font-size: 14px;
margin-bottom: 12px;}
.fs-plan-badge strong {
color: var(--primary);
font-weight: 700;}
.fs-status-text {
color: var(--success);
font-weight: 600;
margin-top: 12px;}
.fs-status-text-inactive {
color: var(--danger);
font-weight: 600;
margin-top: 12px;}
.fs-breach-checker-card {
background: var(--bg-card);
border: 1px solid var(--border);
padding: 32px;
border-radius: 12px;}
.fs-card-header h3 {
margin: 0 0 8px 0;
font-size: var(--fs-card-title);
font-weight: 700;
color: var(--primary);
font-family: var(--font-heading);}
.fs-card-subtitle {
color: var(--text-secondary);
font-size: 15px;
margin-bottom: 28px;
line-height: 1.6;}
.fs-form-group {
margin-bottom: 20px;}
.fs-form-label {
display: block;
font-weight: 600;
margin-bottom: 10px;
color: var(--text-primary);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;}
.fs-form-input {
width: 100%;
padding: 14px 18px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 15px;
color: var(--text-primary);
transition: all .3s ease;}
.fs-form-input:focus {
outline: none;
border-color: var(--primary);
background: var(--bg-hover);}
.fs-form-input::placeholder {
color: var(--text-secondary);
opacity: 0.6;}
.fs-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;}
.fs-stat-card {
background: var(--bg-card);
border: 1px solid var(--border);
padding: 24px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 16px;
transition: all .3s ease;}
.fs-stat-card:hover {
border-color: var(--primary);
background: var(--bg-hover);}
.fs-stat-icon {
font-size: 32px;}
.fs-stat-value {
font-size: 28px;
font-weight: 800;
color: var(--primary);
line-height: 1;
font-family: var(--font-heading);}
.fs-stat-label {
font-size: 12px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 4px;
font-weight: 600;}
.fs-sidebar {
display: flex;
flex-direction: column;
gap: 20px;}
.fs-sidebar-card {
background: var(--bg-card);
border: 1px solid var(--border);
padding: 24px;
border-radius: 12px;}
.fs-sidebar-card h4 {
margin: 0 0 16px 0;
font-size: var(--fs-subheading);
font-weight: 700;
color: var(--primary);
font-family: var(--font-heading);}
.fs-sidebar-card p {
color: var(--text-secondary);
font-size: 14px;
line-height: 1.6;
margin-bottom: 16px;}
.fs-subscription-info {
display: flex;
flex-direction: column;
gap: 0;}
.fs-info-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--border);}
.fs-info-row:last-child {
border-bottom: none;}
.fs-info-label {
color: var(--text-secondary);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;}
.fs-info-value {
color: var(--text-primary);
font-weight: 600;
font-size: 14px;}
.fs-status-active {
color: var(--success) !important;}
.fs-status-inactive {
color: var(--danger) !important;}
.fs-status-pending {
color: var(--warning) !important;}
.fs-security-alert {
display: flex;
gap: 16px;
padding: 20px;
background: rgba(59, 130, 246, 0.05);
border: 1px solid var(--success);
border-radius: 8px;
margin-top: 24px;}
.fs-alert-icon {
font-size: 32px;}
.fs-alert-content strong {
display: block;
font-size: 16px;
color: var(--success);
margin-bottom: 8px;
font-weight: 700;}
.fs-alert-content p {
margin: 0;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.6;}
.fs-alert {
padding: 16px 20px;
border-radius: 8px;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
border-left: 4px solid;}
.fs-alert-success {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
border-left-color: var(--success);
border: 1px solid rgba(16, 185, 129, 0.2);}
.fs-alert-warning {
background: rgba(245, 158, 11, 0.10);
color: var(--st-amber);
border-left-color: var(--warning);
border: 1px solid rgba(245, 158, 11, 0.2);}
.fs-alert-danger {
background: rgba(239, 68, 68, 0.1);
color: var(--danger);
border-left-color: var(--danger);
border: 1px solid rgba(239, 68, 68, 0.2);}
.fs-status-card {
background: linear-gradient(135deg, var(--bg-card), var(--bg-hover));
color: var(--text-primary);
padding: 30px;
border-radius: 12px;
margin-bottom: 30px;
border: 1px solid var(--border);
border-left: 4px solid var(--primary);}
.fs-status-card.inactive {
border-left-color: var(--danger);}
.fs-status-card.pending {
border-left-color: var(--warning);}
.fs-status-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;}
.fs-status-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--primary-light);
border: 1px solid var(--primary);
border-radius: 20px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;}
.fs-status-icon {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--primary);
display: inline-block;}
.fs-status-icon.active {
background: var(--success);}
.fs-status-icon.inactive {
background: var(--danger);}
.fs-status-icon.pending {
background: var(--warning);}
.fs-status-title {
font-size: var(--fs-card-title);
font-weight: 700;
margin: 0 0 10px 0;
color: var(--text-primary);
font-family: var(--font-heading);}
.fs-status-subtitle {
font-size: 14px;
color: var(--text-secondary);}
.fs-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 30px;}
.fs-info-card {
background: var(--bg-card);
padding: 24px;
border-radius: 12px;
border: 1px solid var(--border);}
.fs-info-card h4 {
margin: 0 0 16px 0;
font-size: 13px;
text-transform: uppercase;
color: var(--text-secondary);
font-weight: 700;
letter-spacing: 1px;}
.fs-info-item {
display: flex;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid var(--border);}
.fs-info-item:last-child {
border-bottom: none;}
.fs-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;}
.fs-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;}
.fs-success-message,.fs-error-message {
padding: 16px;
border-radius: 8px;
margin-bottom: 20px;
display: none;}
.fs-success-message {
background: rgba(16, 185, 129, 0.1);
color: var(--success);
border: 1px solid rgba(16, 185, 129, 0.2);}
.fs-error-message {
background: rgba(239, 68, 68, 0.1);
color: var(--danger);
border: 1px solid rgba(239, 68, 68, 0.2);}
/* Comparison Table */.comparison-section {
padding: 80px var(--page-gutter);
background: var(--bg-dark);}
.comparison-container {
max-width: var(--page-max);
margin: 0 auto;}
.comparison-title {
font-size: var(--fs-section-title);
font-weight: 800;
text-align: center;
margin-bottom: 48px;
color: var(--text-primary);}
.comparison-table-wrapper {
overflow-x: auto;}
.comparison-table {
width: 100%;
border-collapse: collapse;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;}
.comparison-table thead {
background: var(--bg-hover);}
.comparison-table th {
padding: 20px;
text-align: left;
font-weight: 700;
color: var(--text-primary);
font-size: 16px;}
.comparison-table th.featured {
background: var(--primary-light);
color: var(--primary);}
.comparison-table td {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
color: var(--text-secondary);}
.comparison-table td.featured {
background: rgba(59, 130, 246, 0.03);}
.comparison-table .feature-col {
font-weight: 600;
color: var(--text-primary);}
.comparison-table .check {
color: var(--success);
font-weight: 700;
font-size: 18px;}
.comparison-table .cross {
color: var(--text-secondary);
opacity: 0.5;
font-size: 18px;}
/* FAQ Section */.faq-section {
padding: 80px var(--page-gutter);
background: var(--bg-card);}
.faq-container {
max-width: var(--page-max);
margin: 0 auto;}
.faq-title {
font-size: var(--fs-section-title);
font-weight: 800;
text-align: center;
margin-bottom: 48px;
color: var(--text-primary);}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;}
.faq-item {
background: var(--bg-dark);
border: 1px solid var(--border);
padding: 28px;
border-radius: 12px;
transition: all 0.3s ease;}
.faq-item:hover {
border-color: var(--primary);
transform: translateY(-5px);}
.faq-question {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
color: var(--primary);}
.faq-answer {
color: var(--text-secondary);
line-height: 1.7;}
@media (max-width: 768px) {
.pricing-page .faq-section {
padding: 48px var(--page-gutter);
}
.pricing-page .faq-container {
max-width: 100%;
}
.pricing-page .faq-title {
font-size: var(--fs-section-title);
line-height: 1.15;
margin-bottom: 24px;
}
.pricing-page .faq-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.pricing-page .faq-item {
padding: 20px 16px;
border-radius: 10px;
}
.pricing-page .faq-item:hover {
transform: none;
}
}
.pricing-cta-section {
padding: 80px var(--page-gutter);
background: linear-gradient(135deg, var(--bg-dark), var(--bg-card));
text-align: center;}
.pricing-cta-container {
max-width: var(--page-max);
margin: 0 auto;}
.pricing-cta-title {
font-size: var(--fs-section-title);
font-weight: 800;
margin-bottom: 16px;
color: var(--text-primary);}
.pricing-cta-subtitle {
font-size: 18px;
color: var(--text-secondary);
margin-bottom: 32px;}
.btn-pricing-cta {
padding: 16px 40px;
background: var(--primary);
color: var(--on-accent);
border-radius: 10px;
font-weight: 700;
font-size: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;}
.btn-pricing-cta:hover {
background: var(--primary-dark);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
color: var(--text-primary);}
/* Responsive Design */@media (max-width: 1200px) {
.fs-breach-checker-container {
grid-template-columns: 1fr;
}
.fs-sidebar {
order: -1;
}
.hero-container {
grid-template-columns: 1fr;
gap: 60px;
}
.signin-container {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.header-container {
padding: 5px var(--page-gutter);
}
/* Billing Toggle responsive */ .billing-toggle-container {
flex-wrap: wrap;
gap: 12px;
}
.billing-label {
font-size: 14px;
}
.savings-badge {
display: block;
margin-left: 0;
margin-top: 4px;
}
/* Mobile menu styles are handled in the Mobile Menu section at 991px */ .hero-title {
font-size: var(--fs-hero);
}
.hero-subtitle {
font-size: 16px;
}
.hero-actions {
flex-direction: column;
}
.hero-stats {
flex-direction: column;
gap: 20px;
}
.stat-divider {
display: none;
}
.section-title {
font-size: var(--fs-section-title);
}
.features-grid {
grid-template-columns: 1fr;
}
.steps-grid {
flex-direction: column;
}
.step-arrow {
transform: rotate(90deg);
}
.pricing-container {
grid-template-columns: 1fr;
}
.fs-form-row {
grid-template-columns: 1fr;
}
.fs-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.fs-tab {
padding: 12px 20px;
font-size: 14px;
}
.fs-membership-container {
padding: 15px var(--page-gutter);
}
.footer-bottom {
flex-direction: column;
gap: 16px;
text-align: center;
}
/* Dashboard Responsive Fixes */ .fs-breach-checker-container {
flex-direction: column;
}
.fs-sidebar {
width: 100%;
margin-top: 30px;
}
}
/* Dashboard Layout (Desktop) */.fs-breach-checker-container {
display: flex;
gap: 30px;
align-items: flex-start;}
.fs-main-content {
flex: 1;
min-width: 0;
/* Prevent flex item from overflowing */}
.fs-sidebar {
width: 350px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 24px;}
.fs-sidebar-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;}
.fs-sidebar-card h4 {
font-size: var(--fs-subheading);
font-weight: 700;
margin-bottom: 16px;
color: var(--text-primary);
border-bottom: 1px solid var(--border);
padding-bottom: 12px;}
/* ======================================== FREEMIUS CHECKOUT & NOTIFICATIONS ======================================== *//* Freemius Notification Styles */.freemius-notification {
position: fixed;
top: -100px;
left: 50%;
transform: translateX(-50%);
z-index: 99999;
background: var(--bg-card);
border: 2px solid var(--border);
border-radius: 12px;
padding: 20px 30px;
min-width: 400px;
max-width: 600px;
box-shadow: 0 10px 40px rgba(11, 18, 32, 0.5);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.freemius-notification.freemius-notification-show {
top: 20px;}
.freemius-notification-content {
display: flex;
align-items: center;
gap: 15px;}
.freemius-notification-icon {
font-size: 24px;
flex-shrink: 0;}
.freemius-notification-message {
flex: 1;
font-size: 16px;
color: var(--text-primary);}
.freemius-notification-close {
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 24px;
cursor: pointer;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: all 0.2s ease;
flex-shrink: 0;}
.freemius-notification-close:hover {
background: var(--bg-hover);
color: var(--text-primary);}
.freemius-notification-success {
border-color: var(--success);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, var(--bg-card) 100%);}
.freemius-notification-success .freemius-notification-icon {
color: var(--success);}
.freemius-notification-error {
border-color: var(--danger);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, var(--bg-card) 100%);}
.freemius-notification-error .freemius-notification-icon {
color: var(--danger);}
.freemius-notification-info {
border-color: var(--secondary);
background: linear-gradient(135deg, rgba(49, 111, 213, 0.15) 0%, var(--bg-card) 100%);}
.freemius-notification-info .freemius-notification-icon {
color: var(--secondary);}
/* Pricing Preview Button Styles */.btn-pricing-preview {
display: inline-block;
padding: 14px 32px;
background: var(--bg-hover);
color: var(--text-primary);
border: 2px solid var(--border);
border-radius: 10px;
font-weight: 600;
font-size: 16px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
margin-top: 20px;}
.btn-pricing-preview:hover {
background: var(--primary);
border-color: var(--primary);
color: var(--on-accent);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);}
.btn-pricing-preview.featured {
background: var(--primary);
border-color: var(--primary);
color: var(--on-accent);}
.btn-pricing-preview.featured:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);}
/* Pricing card button styles */.btn-pricing-starter,.btn-pricing-platinum {
width: 100%;
padding: 16px 32px;
background: var(--bg-hover);
color: var(--text-primary);
border: 2px solid var(--border);
border-radius: 10px;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;}
.btn-pricing-starter:hover,.btn-pricing-platinum:hover {
background: var(--primary);
border-color: var(--primary);
color: var(--on-accent);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);}
.btn-pricing-platinum.featured {
background: var(--primary);
border-color: var(--primary);
color: var(--on-accent);}
.btn-pricing-platinum.featured:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);}
/* ======================================== PASSWORDLESS LOGIN STYLES ======================================== *//* Sign-in message styles */.signin-message {
padding: 16px 20px;
border-radius: 10px;
margin-top: 20px;
font-size: 15px;
display: flex;
align-items: flex-start;
gap: 10px;
animation: slideDown 0.3s ease;}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.signin-message.success {
background: rgba(16, 185, 129, 0.15);
border: 2px solid var(--success);
color: var(--success);}
.signin-message.error {
background: rgba(239, 68, 68, 0.15);
border: 2px solid var(--danger);
color: var(--danger);}
.signin-message strong {
font-weight: 700;}
/* Form hint text */.form-hint {
font-size: 14px;
color: var(--text-secondary);
margin-top: 8px;
margin-bottom: 0;}
/* Traditional login toggle */#traditional-login-toggle {
margin: 20px 0;}
#traditional-login-toggle .signin-link {
font-size: 15px;
color: var(--primary);
text-decoration: none;
transition: all 0.2s ease;}
#traditional-login-toggle .signin-link:hover {
color: var(--primary-dark);
text-decoration: underline;}
/* Button disabled state */button:disabled {
opacity: 0.6;
cursor: not-allowed;}
button:disabled:hover {
transform: none !important;
box-shadow: none !important;}
/* Responsive Freemius Notifications */@media (max-width: 768px) {
.freemius-notification {
min-width: 90%;
max-width: 90%;
padding: 16px 20px;
}
.freemius-notification-content {
gap: 10px;
}
.freemius-notification-icon {
font-size: 20px;
}
.freemius-notification-message {
font-size: 14px;
}
}
.page-id-9775 .entry-header {
display: none;}
/* ======================================== PASSWORD GENERATOR STYLES ======================================== */.fs-password-settings-toggle:hover {
background: var(--bg-card) !important;
border-color: var(--primary) !important;}
.fs-password-settings-content {
animation: fadeIn 0.3s ease;}
#password-generator-passwords>div {
position: relative;
padding: 16px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-primary);
word-wrap: break-word;
cursor: pointer;
transition: all 0.3s ease;
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.6;}
#password-generator-passwords>div:hover {
border-color: var(--primary);
background: var(--bg-hover);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);}
#password-generator-passwords>div:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.password-text {
display: block;
margin-top: 8px;
font-family: var(--font-mono);
font-size: 14px;
line-height: 1.6;
word-break: break-all;
color: var(--text-primary);
transition: color 0.2s ease, transform 0.2s ease;}
.password-text-copied {
color: var(--primary);
font-weight: 600;
transform: translateY(-2px);}
.password-copy-indicator {
position: absolute;
top: 8px;
right: 8px;
background: rgba(16, 185, 129, 0.15);
border: 1px solid rgba(16, 185, 129, 0.4);
color: var(--primary);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
padding: 4px 8px;
border-radius: 999px;
text-transform: uppercase;
pointer-events: none;}
.password-length-control {
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;}
.password-lock-visual {
display: flex;
align-items: center;
gap: 16px;}
.lock-icon-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;}
.lock-icon {
font-size: 48px;
transition: transform 0.3s ease, filter 0.3s ease;}
.lock-progress {
width: 60px;
height: 6px;
border-radius: 999px;
background: var(--border);
overflow: hidden;}
.lock-progress div {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #f59e0b, var(--brand-blue));
transition: width 0.3s ease;}
.lock-description p {
margin: 4px 0 0 0;
color: var(--text-secondary);
font-size: 13px;}
#password-length-slider {
width: 100%;
-webkit-appearance: none;
appearance: none;
height: 6px;
border-radius: 999px;
background: var(--border);
outline: none;
transition: background 0.3s ease;}
#password-length-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--primary);
cursor: pointer;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
transition: transform 0.2s ease;}
#password-length-slider::-webkit-slider-thumb:hover {
transform: scale(1.1);}
.password-length-value {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);}
.password-length-value strong {
font-size: 20px;
color: var(--text-primary);}
@media (max-width: 768px) {
.password-lock-visual {
flex-direction: column;
align-items: flex-start;
}
.lock-icon {
font-size: 40px;
}
}
@media (max-width: 768px) {
#password-generator-passwords {
grid-template-columns: 1fr;
}
.fs-password-settings-content {
padding: 16px !important;
}
}
/* ======================================== ENHANCED RESPONSIVE DESIGN ======================================== *//* Small Mobile (480px and below) */@media (max-width: 480px) {
.header-container {
padding: 5px var(--page-gutter);
}
.logo-text {
font-size: 18px;
}
.logo-icon {
font-size: 20px;
}
.site-logo-img {
height: 44px;
}
.hero-section {
padding: 40px var(--page-gutter) 30px;
}
.hero-title {
font-size: var(--fs-hero);
}
.hero-subtitle {
font-size: 15px;
}
.btn-hero-primary, .btn-hero-secondary {
padding: 12px 20px;
font-size: 14px;
}
.stat-number {
font-size: 24px;
}
.features-section, .how-it-works-section {
padding: 40px var(--page-gutter);
}
.section-title {
font-size: var(--fs-section-title);
}
.section-subtitle {
font-size: 15px;
}
.feature-card {
padding: 20px;
}
.feature-icon {
font-size: 36px;
}
.feature-title {
font-size: var(--fs-card-title);
}
.step-card {
padding: 28px 20px;
}
.pricing-hero {
padding: 40px 16px 24px;
}
.pricing-hero-title {
font-size: var(--fs-page-title);
}
.pricing-section {
padding: 32px var(--page-gutter);
}
.pricing-card {
padding: 28px 20px;
}
.plan-name {
font-size: 22px;
}
.price-amount {
font-size: 42px;
}
.fs-tab {
padding: 10px 16px;
font-size: 13px;
}
.btn-primary, .btn-secondary {
padding: 10px 18px;
font-size: 13px;
}
.signin-card {
padding: 28px 20px;
}
.signin-title {
font-size: var(--fs-page-title);
}
}
/* Tablet (1024px) */@media (max-width: 1024px) {
.header-container {
padding: 5px var(--page-gutter);
}
.logo-text {
font-size: 24px;
}
.hero-section {
padding: 80px var(--page-gutter) 60px;
}
.hero-title {
font-size: var(--fs-hero);
}
.section-title {
font-size: var(--fs-section-title);
}
.features-section, .how-it-works-section {
padding: 80px var(--page-gutter);
}
.pricing-hero {
padding: 60px 30px 30px;
}
}
/* Landscape Orientation */@media (max-height: 600px) and (orientation: landscape) {
.hero-section {
padding: 40px var(--page-gutter);
}
.hero-title {
font-size: var(--fs-hero);
}
.hero-subtitle {
font-size: 14px;
margin-bottom: 16px;
}
}
/* Print Styles */@media print {
.site-header, .site-footer, .menu-toggle, .btn-primary, .btn-secondary, .hero-actions {
display: none !important;
}
body {
background: white;
color: black;
}
.feature-card, .pricing-card {
break-inside: avoid;
}
}
/* ======================================== MOBILE MENU STYLES ======================================== */@media (max-width: 1279px) {
.menu-toggle {
display: flex;
z-index: 1201;
position: relative;
order: 3;
width: 44px;
height: 44px;
padding: 0;
align-items: center;
justify-content: center;
}
.menu-toggle span {
position: absolute;
width: 22px;
height: 2px;
border-radius: 2px;
transform-origin: center;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-toggle span:nth-child(1) {
transform: translateY(-6px);
}
.menu-toggle span:nth-child(2) {
transform: translateY(0);
}
.menu-toggle span:nth-child(3) {
transform: translateY(6px);
}
.menu-toggle.active span:nth-child(1) {
transform: translateY(0) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
transform: translateY(0) rotate(-45deg);
}
.main-navigation {
position: static;
display: flex;
align-items: center;
}
.main-navigation::before {
content: '';
position: fixed;
inset: 0;
background: rgba(11, 18, 32, 0.75);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.25s ease, visibility 0.25s ease;
z-index: 1190;
}
.main-navigation .mobile-menu-panel {
position: fixed;
inset: 0;
width: auto; /* inset:0 fills the viewport; 100vw added the scrollbar width => sideways scroll */
height: 100dvh;
padding: 96px 20px 24px;
background: var(--header-bg);
display: flex;
flex-direction: column;
gap: 20px;
overflow-y: auto;
transform: translateY(-16px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s ease;
z-index: 1200;
}
.main-navigation ul#primary-menu, .main-navigation>ul.menu {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
list-style: none;
margin: 0;
padding: 0;
}
.main-navigation ul#primary-menu li, .main-navigation>ul.menu li {
width: 100%;
border: none;
}
.main-navigation ul#primary-menu li a, .main-navigation>ul.menu li a {
display: block;
padding: 10px 0;
color: var(--header-link);
font-size: 17px;
font-weight: 600;
border-radius: 0;
background: transparent;
border: none;
text-decoration: none;
}
.main-navigation ul#primary-menu li a:hover, .main-navigation ul#primary-menu li a:focus, .main-navigation>ul.menu li a:hover, .main-navigation>ul.menu li a:focus {
color: var(--primary-dark);
background: transparent;
}
.main-navigation ul#primary-menu li + li, .main-navigation>ul.menu li + li {
border-top: 1px solid var(--header-border);
}
.main-navigation li.menu-item-has-children > a {
position: relative;
padding-right: 24px;
}
.main-navigation li.menu-item-has-children > a::after {
content: '';
position: absolute;
right: 2px;
top: 50%;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: translateY(-65%) rotate(45deg);
opacity: 0.8;
transition: transform 0.2s ease;
}
.main-navigation li.menu-item-has-children.submenu-open > a::after {
transform: translateY(-35%) rotate(225deg);
}
.main-navigation li.menu-item-has-children > .sub-menu {
display: none;
list-style: none;
margin: 0;
padding: 4px 0 10px 14px;
border-left: 1px solid var(--header-border);
}
.main-navigation li.menu-item-has-children.submenu-open > .sub-menu {
display: block;
}
.main-navigation li.menu-item-has-children > .sub-menu li {
display: block;
width: 100%;
border: none;
}
.main-navigation li.menu-item-has-children > .sub-menu li + li {
margin-top: 2px;
}
.main-navigation li.menu-item-has-children > .sub-menu a {
display: block;
width: 100%;
font-size: 15px;
font-weight: 500;
color: var(--header-sublink);
padding: 9px 0;
}
.main-navigation li.menu-item-has-children > .sub-menu a:hover,
.main-navigation li.menu-item-has-children > .sub-menu a:focus {
color: var(--primary-dark);
}
.main-navigation .header-actions {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 16px;
border-top: 1px solid var(--header-border);
}
.main-navigation .header-actions .btn-primary, .main-navigation .header-actions .btn-secondary, .main-navigation .header-actions .btn-logout {
width: 100%;
justify-content: center;
padding: 13px 18px;
font-size: 15px;
}
.main-navigation .header-actions>div[style*="inline-flex"] {
width: 100%;
justify-content: center;
margin-right: 0 !important;
margin-bottom: 4px;
}
.main-navigation.toggled::before {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.main-navigation.toggled .mobile-menu-panel {
transform: translateY(0);
opacity: 1;
visibility: visible;
pointer-events: auto;
}
body.mobile-menu-open {
overflow: hidden;
}
}
@media (max-width: 480px) {
.site-logo-img {
height: 34px;
}
.site-header .site-logo-img {
width: 200px;
height: auto;
}
.main-navigation .mobile-menu-panel {
padding: 88px 16px 20px;
}
.main-navigation ul#primary-menu li a, .main-navigation>ul.menu li a {
font-size: 16px;
padding: 9px 0;
}
}
/* Additional Emails tab mobile layout fixes */
@media (max-width: 768px) {
#tab-additional-emails > * + * {
margin-top: 12px;
}
#tab-additional-emails .fs-breach-checker-card,
#tab-additional-emails .wcec-alert-card {
margin-bottom: 12px;
}
/* Flatten plugin table/list layouts into stacked cards on mobile */
#tab-additional-emails .table-responsive,
#tab-additional-emails .dataTables_wrapper,
#tab-additional-emails .dataTables_scroll,
#tab-additional-emails .dataTables_scrollBody {
overflow: visible !important;
max-height: none !important;
}
#tab-additional-emails table,
#tab-additional-emails thead,
#tab-additional-emails tbody,
#tab-additional-emails tr,
#tab-additional-emails th,
#tab-additional-emails td {
display: block;
width: 100%;
}
#tab-additional-emails thead {
display: none;
}
#tab-additional-emails tbody tr {
margin: 0 0 12px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: color-mix(in srgb, var(--sf-1) 70%, transparent);
}
#tab-additional-emails tbody td {
border: none !important;
padding: 6px 0 !important;
white-space: normal !important;
word-break: break-word;
}
#tab-additional-emails tbody td + td {
border-top: 1px solid rgba(140, 153, 173, 0.16) !important;
margin-top: 6px;
padding-top: 8px !important;
}
/* DataTables controls stack cleanly */
#tab-additional-emails .dataTables_length,
#tab-additional-emails .dataTables_filter,
#tab-additional-emails .dataTables_info,
#tab-additional-emails .dataTables_paginate {
float: none !important;
text-align: left !important;
width: 100%;
margin: 6px 0;
}
}
/* Desktop menu from 1280px (five top-level items need the room) */@media (min-width: 1280px) {
.menu-toggle {
display: none !important;
}
.main-navigation .mobile-menu-panel {
display: contents;
}
.header-container {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
column-gap: 20px;
}
.site-branding {
grid-column: 1;
justify-self: start;
}
.main-navigation {
display: contents;
}
.main-navigation li.menu-item-has-children {
position: relative;
}
.main-navigation ul#primary-menu > li > a,
.main-navigation > ul.menu > li > a {
display: inline-flex;
align-items: center;
white-space: nowrap;
padding: 8px 10px;
}
/* Five top-level items: keep them on one line. */
.main-navigation ul#primary-menu,
.main-navigation > ul.menu {
gap: 4px;
}
.main-navigation li.menu-item-has-children > a {
gap: 8px;
}
.main-navigation li.menu-item-has-children > a::after {
content: '';
width: 6px;
height: 6px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-1px);
opacity: 0.8;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.main-navigation li.menu-item-has-children:hover > a::after,
.main-navigation li.menu-item-has-children:focus-within > a::after {
transform: rotate(225deg) translateY(-1px);
opacity: 1;
}
.main-navigation li.menu-item-has-children > .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 280px;
width: max-content;
max-width: 360px;
margin: 0;
/*margin-top: 12px;*/
padding: 10px;
list-style: none;
display: block;
gap: 0;
background: var(--header-bg);
border: 1px solid var(--header-border);
border-radius: 12px;
box-shadow: 0 18px 36px rgba(11, 18, 32, 0.12);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(8px) scale(0.98);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
z-index: 1200;
}
.main-navigation li.menu-item-has-children:hover > .sub-menu,
.main-navigation li.menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0) scale(1);
transition-delay: 0s;
}
.main-navigation li.menu-item-has-children::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 10px;
}
.main-navigation li.menu-item-has-children > .sub-menu li {
width: 100%;
border-bottom: none;
}
.main-navigation li.menu-item-has-children > .sub-menu li + li {
margin-top: 4px;
}
.main-navigation li.menu-item-has-children > .sub-menu a {
display: block;
padding: 12px 14px;
border-radius: 8px;
white-space: nowrap;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
}
.main-navigation li.menu-item-has-children > .sub-menu a:hover,
.main-navigation li.menu-item-has-children > .sub-menu a:focus {
background: var(--primary-light);
color: var(--primary-dark);
}
.main-navigation ul#primary-menu, .main-navigation>ul.menu {
grid-column: 2;
justify-self: center;
position: static;
width: auto;
max-width: none;
height: auto;
background: transparent;
border: none;
box-shadow: none;
flex-direction: row;
padding: 0;
overflow: visible;
display: flex;
transform: none;
visibility: visible;
transition: none;
margin: 0;
}
.main-navigation .header-actions {
grid-column: 3;
justify-self: end;
position: static;
width: auto;
max-width: none;
height: auto;
background: transparent;
border: none;
box-shadow: none;
flex-direction: row;
padding: 0;
margin-left: 0;
transform: none;
visibility: visible;
transition: none;
}
.main-navigation::before {
display: none;
}
.main-navigation ul#primary-menu li, .main-navigation>ul.menu li {
border-bottom: none;
}
}
/* Reduced Motion */@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.hero-card.floating {
animation: none;
}
/* Instant menu open/close for reduced motion */ .main-navigation ul#primary-menu, .main-navigation>ul.menu, .main-navigation .header-actions, .main-navigation::before {
transition: none !important;
}
}
/* FORCE FREEMIUS CHECKOUT ON TOP */#FS_CHECKOUT_IFRAME,iframe[src*='checkout.freemius.com'] {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 2147483647 !important;
background: transparent !important;}
.billing-label.active {
font-weight: 600;
color: #10b981;}
.billing-label.inactive {
font-weight: 500;
color: var(--tx-500);}
/* Dashboard tabs: mobile single-tab + hamburger dropdown */
@media (max-width: 991px) {
.fs-dashboard-wrapper .fs-tabs-shell {
position: relative;
margin-bottom: 20px;
}
.fs-dashboard-wrapper .fs-tabs-mobile {
display: flex;
align-items: center;
gap: 10px;
}
.fs-dashboard-wrapper .fs-mobile-active-tab {
flex: 1 1 auto;
min-height: 46px;
padding: 10px 12px;
border: 1px solid rgba(16, 185, 129, 0.45);
border-radius: 8px;
background: rgba(16, 185, 129, 0.12);
color: var(--primary);
font-size: 14px;
font-weight: 700;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.fs-dashboard-wrapper .fs-mobile-tabs-toggle {
width: 46px;
height: 46px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-dark);
color: var(--text-primary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
cursor: pointer;
}
.fs-dashboard-wrapper .fs-tabs {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
z-index: 30;
display: none;
flex-direction: column;
gap: 0;
margin: 0;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-card);
box-shadow: 0 16px 30px rgba(11, 18, 32, 0.45);
padding: 6px;
}
.fs-dashboard-wrapper .fs-tab {
width: 100%;
min-height: 44px;
padding: 10px 12px;
font-size: 14px;
line-height: 1.3;
text-align: left;
justify-content: flex-start;
border: none;
border-bottom: 1px solid rgba(140, 153, 173, 0.18);
border-radius: 8px;
background: transparent;
}
.fs-dashboard-wrapper .fs-tab:last-child {
border-bottom: none;
}
.fs-dashboard-wrapper .fs-tabs-shell.mobile-open .fs-tabs {
display: flex;
}
.fs-dashboard-wrapper .fs-tab::before {
display: none;
}
}
@media (min-width: 992px) {
.fs-dashboard-wrapper .fs-tabs-mobile {
display: none;
}
}
/* Mobile Horizontal Scroll Fix */@media (max-width: 991px) {
html, body {
overflow-x: hidden;
max-width: 100%;
position: relative;
}
}
/* ======================================== LANDING PAGE ======================================== */.landing-hero {
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
padding: 30px var(--page-gutter);
background: var(--bg-dark);
position: relative;
overflow: hidden;}
.landing-hero-bg {
position: absolute;
inset: 0;
pointer-events: none;}
.landing-orb {
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.4;}
.landing-orb-1 {
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.35) 0%, transparent 70%);
top: -15%;
left: -10%;
animation: orbFloat1 12s ease-in-out infinite;}
.landing-orb-2 {
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(49, 111, 213, 0.3) 0%, transparent 70%);
bottom: -10%;
right: -8%;
animation: orbFloat2 10s ease-in-out infinite;}
.landing-orb-3 {
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: orbFloat3 8s ease-in-out infinite;}
@keyframes orbFloat1 {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(40px, 30px);
}
}
@keyframes orbFloat2 {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(-30px, -40px);
}
}
@keyframes orbFloat3 {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(1.2);
}
}
.landing-content {
position: relative;
z-index: 1;
text-align: center;
max-width: var(--page-max);
width: 100%;}
.landing-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
background: var(--primary-light);
border: 1px solid var(--primary);
border-radius: 50px;
font-size: 14px;
font-weight: 600;
color: var(--primary);
margin-bottom: 32px;
animation: fadeInDown 0.6s ease both;}
.landing-title {
font-size: var(--fs-hero);
font-weight: 900;
line-height: 1.05;
margin-bottom: 24px;
color: var(--text-primary);
letter-spacing: -2px;
font-family: var(--font-heading);
animation: fadeInDown 0.6s ease 0.1s both;}
.landing-subtitle {
font-size: 22px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 48px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
animation: fadeInDown 0.6s ease 0.2s both;}
.landing-form {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
max-width: 580px;
margin: 0 auto 48px;
animation: fadeInUp 0.6s ease 0.3s both;}
.landing-input-wrapper {
position: relative;
width: 100%;}
.landing-input-icon {
position: absolute;
left: 24px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
color: var(--text-secondary);
opacity: 0.5;
pointer-events: none;
transition: color 0.3s ease;}
.landing-input {
width: 100%;
padding: 24px 24px 24px 62px;
font-size: 22px;
font-family: var(--font-body);
color: var(--text-primary);
background: var(--bg-card);
border: 2px solid var(--border);
border-radius: 16px;
outline: none;
transition: all 0.3s ease;
box-shadow: 0 4px 24px rgba(11, 18, 32, 0.2);}
.landing-input:focus {
border-color: var(--primary);
background: var(--bg-hover);
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15), 0 8px 32px rgba(11, 18, 32, 0.3);}
.landing-input:focus + .landing-input-icon,.landing-input-wrapper:focus-within .landing-input-icon {
color: var(--primary);
opacity: 1;}
.landing-input::placeholder {
color: var(--text-secondary);
opacity: 0.5;}
.landing-btn {
padding: 20px 48px;
font-size: 20px;
font-weight: 700;
font-family: var(--font-button);
color: var(--on-accent);
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border: none;
border-radius: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
width: 100%;
justify-content: center;}
.landing-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 32px rgba(59, 130, 246, 0.45);
background: linear-gradient(135deg, var(--primary-dark), var(--blue-700));}
.landing-btn:active {
transform: translateY(-1px);}
.landing-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
animation: fadeInUp 0.6s ease 0.4s both;}
.landing-trust-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-secondary);
font-weight: 500;}
.landing-trust-item i {
color: var(--primary);
font-size: 16px;}
.landing-trust-divider {
width: 1px;
height: 20px;
background: var(--border);}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Landing Page Responsive */@media (max-width: 1024px) {
.landing-title {
font-size: var(--fs-hero);
}
.landing-subtitle {
font-size: 20px;
}
}
@media (max-width: 768px) {
.landing-hero {
padding: 40px var(--page-gutter);
}
.landing-title {
font-size: var(--fs-hero);
letter-spacing: -1px;
}
.landing-subtitle {
font-size: 17px;
margin-bottom: 36px;
}
.landing-input {
padding: 20px 20px 20px 54px;
font-size: 18px;
}
.landing-input-icon {
left: 20px;
font-size: 18px;
}
.landing-btn {
padding: 18px 36px;
font-size: 18px;
}
.landing-trust {
flex-direction: column;
gap: 12px;
}
.landing-trust-divider {
display: none;
}
}
@media (max-width: 480px) {
.landing-title {
font-size: var(--fs-hero);
}
.landing-subtitle {
font-size: 15px;
}
.landing-input {
padding: 18px 16px 18px 48px;
font-size: 16px;
border-radius: 12px;
}
.landing-btn {
padding: 16px 28px;
font-size: 16px;
border-radius: 12px;
}
}
/* mobile fixes */@media (max-width: 768px) {
.fs-membership-container {
padding: 0px var(--page-gutter);
}
.fs-breach-checker-card {
padding: 18px;
}
.fs-breach-checker-card.wcec-alert-card {
margin-bottom: 30px;
}
.fs-sidebar {
width: 100%;
}
}
/* ==========================================================================
Fingerprint Detector Tab
========================================================================== */
.bafp-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 0 0 24px 0;
}
.bafp-actions .fs-btn-primary,
.bafp-actions .fs-btn-secondary {
flex: 0 0 auto;
}
.bafp-ip-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--bg-dark);
color: var(--text-secondary);
font-size: 13px;
cursor: pointer;
user-select: none;
transition: all 0.2s ease;
}
.bafp-ip-toggle:hover {
border-color: var(--primary);
color: var(--text-primary);
}
.bafp-ip-toggle input[type="checkbox"] {
width: 16px;
height: 16px;
accent-color: var(--primary);
cursor: pointer;
}
.bafp-hash-pill {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.04));
border: 1px solid var(--primary);
border-radius: 12px;
padding: 18px 22px;
margin-bottom: 20px;
color: var(--text-primary);
}
.bafp-hash-pill.bafp-loading,
.bafp-hash-pill.bafp-error {
background: var(--bg-dark);
border-color: var(--border);
color: var(--text-secondary);
text-align: center;
font-size: 14px;
}
.bafp-hash-pill.bafp-error {
border-color: var(--danger);
color: var(--danger);
}
.bafp-hash-pill .bafp-hash-label {
font-size: 13px;
font-weight: 700;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.bafp-hash-pill .bafp-hash-label i {
margin-right: 6px;
}
.bafp-hash-pill .bafp-hash-value {
font-size: 15px;
font-weight: 700;
word-break: break-all;
margin-bottom: 8px;
color: var(--text-primary);
}
.bafp-hash-pill .bafp-hash-meta {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
}
.bafp-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 8px;
}
@media (max-width: 900px) {
.bafp-grid {
grid-template-columns: 1fr;
}
}
.bafp-card {
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 12px;
}
.bafp-card-header {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.bafp-card-header i {
color: var(--primary);
font-size: 16px;
}
.bafp-card-header h4 {
margin: 0;
font-size: var(--fs-subheading);
font-weight: 700;
color: var(--text-primary);
}
.bafp-card-body {
display: flex;
flex-direction: column;
gap: 8px;
}
.bafp-kv {
display: flex;
flex-direction: column;
}
.bafp-kv-row {
display: grid;
grid-template-columns: minmax(120px, 40%) 1fr;
gap: 12px;
padding: 6px 0;
border-bottom: 1px dashed rgba(252, 252, 253, 0.05);
align-items: start;
}
.bafp-kv-row:last-child {
border-bottom: none;
}
.bafp-kv-key {
font-size: 13px;
color: var(--text-secondary);
font-weight: 600;
}
.bafp-kv-val {
font-size: 13px;
color: var(--text-primary);
word-break: break-word;
text-align: right;
}
.bafp-mono {
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--text-primary);
}
.bafp-wrap {
word-break: break-all;
white-space: normal;
}
.bafp-status-pill {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
line-height: 1.6;
}
.bafp-status-ok {
background: rgba(16, 185, 129, 0.15);
color: var(--st-green-2);
border: 1px solid rgba(16, 185, 129, 0.3);
}
.bafp-status-bad {
background: rgba(239, 68, 68, 0.15);
color: var(--st-red);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.bafp-status-neutral {
background: rgba(140, 153, 173, 0.12);
color: var(--tx-400);
border: 1px solid rgba(140, 153, 173, 0.25);
}
.bafp-status-info {
background: rgba(59, 130, 246, 0.12);
color: var(--ac-400);
border: 1px solid rgba(59, 130, 246, 0.3);
}
.bafp-fonts-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
}
.bafp-font-tag {
background: rgba(59, 130, 246, 0.1);
color: var(--ac-400);
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 6px;
padding: 3px 8px;
font-size: 11.5px;
font-weight: 600;
}
.bafp-details {
margin-top: 4px;
font-size: 12.5px;
color: var(--text-secondary);
}
.bafp-details summary {
cursor: pointer;
color: var(--primary);
font-weight: 600;
padding: 4px 0;
}
.bafp-details summary:hover {
text-decoration: underline;
}
.bafp-details > div {
margin-top: 8px;
padding: 10px;
background: color-mix(in srgb, var(--sf-page) 20%, transparent);
border-radius: 6px;
line-height: 1.6;
}
.bafp-note {
margin-top: 10px;
padding: 10px 12px;
background: rgba(59, 130, 246, 0.08);
border: 1px solid rgba(59, 130, 246, 0.25);
border-radius: 8px;
color: var(--text-secondary);
font-size: 12.5px;
line-height: 1.6;
}
.bafp-note strong {
color: var(--text-primary);
}
.bafp-ip-warning {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 0 0 24px 0;
padding: 14px 16px;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.4);
border-left-width: 4px;
border-radius: 8px;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.6;
}
.bafp-ip-warning i {
color: var(--warning);
font-size: 18px;
flex-shrink: 0;
margin-top: 2px;
}
.bafp-ip-warning strong {
color: var(--warning);
font-weight: 700;
margin-right: 4px;
}
.bafp-ip-warning a {
color: var(--primary);
text-decoration: underline;
font-weight: 600;
}
.bafp-ip-warning a:hover {
color: var(--primary-dark);
}
.bafp-hash-value-wrap {
margin-bottom: 8px;
}
.bafp-reveal-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--bg-card);
border: 1px solid var(--primary);
border-radius: 8px;
color: var(--primary);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.bafp-reveal-btn:hover {
background: var(--primary);
color: var(--on-accent);
}
.bafp-reveal-btn:focus-visible {
outline: 2px solid var(--primary);
outline-offset: 2px;
}
.bafp-hash-hidden[hidden] {
display: none !important;
}
.bafp-hash-pill .bafp-hash-value:not([hidden]) {
margin-top: 10px;
padding: 10px 12px;
background: color-mix(in srgb, var(--sf-page) 25%, transparent);
border-radius: 8px;
border: 1px dashed rgba(59, 130, 246, 0.4);
animation: bafpFadeIn 0.18s ease-out;
}
@keyframes bafpFadeIn {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
/* Shared wrappers for public tool page templates:
- templates/page-fingerprint-tool.php
- templates/page-password-tool.php
Despite the .bafp- prefix (originally namespaced for the fingerprint tool),
these are generic page-layout classes - no fingerprint-specific styling. */
.bafp-tool-main {
min-height: 100vh;
padding: 40px 0;
}
.bafp-tool-container {
max-width: calc(var(--page-max) + 2 * var(--page-gutter));
margin: 0 auto;
padding: 0 var(--page-gutter);
}
/* Editor content rendered above the detector. Inherits the dark theme so
anything typed in the WP page editor is readable on the dark background. */
.bafp-tool-intro {
margin-bottom: 32px;
color: var(--text-primary);
line-height: 1.7;
}
.bafp-tool-intro h1,
.bafp-tool-intro h2,
.bafp-tool-intro h3,
.bafp-tool-intro h4,
.bafp-tool-intro h5,
.bafp-tool-intro h6 {
color: var(--text-primary);
margin: 0 0 16px 0;
line-height: 1.25;
}
.bafp-tool-intro h1 { font-size: var(--fs-page-title); font-weight: 800; }
.bafp-tool-intro h2 { font-size: var(--fs-section-title); font-weight: 700; }
.bafp-tool-intro h3 { font-size: var(--fs-card-title); font-weight: 700; }
.bafp-tool-intro p {
color: var(--text-secondary);
font-size: 16px;
margin: 0 0 14px 0;
}
.bafp-tool-intro p:last-child { margin-bottom: 0; }
/* "At a glance" verdict strip above the detailed fingerprint cards
(dashboard = dark defaults; the public page overrides below). */
.bafp-glance {
margin: 0 0 22px;
}
.bafp-glance-head {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
}
.bafp-glance-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: 10px;
}
.bafp-glance-list li {
display: grid;
grid-template-columns: 22px 1fr;
column-gap: 10px;
align-items: center;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--bg-dark);
}
.bafp-glance-list li i {
grid-row: 1 / span 2;
font-size: 17px;
}
.bafp-glance-list li span {
font-size: 12.5px;
color: var(--text-secondary);
}
.bafp-glance-list li strong {
font-size: 14.5px;
}
.bafp-glance-list .is-ok i, .bafp-glance-list .is-ok strong { color: var(--st-green); }
.bafp-glance-list .is-warn i, .bafp-glance-list .is-warn strong { color: var(--st-amber); }
.bafp-glance-list .is-bad i, .bafp-glance-list .is-bad strong { color: var(--st-red); }
/* ===== Public free-tool pages (password checker, password generator,
fingerprint test): one light band, a plain heading and a single level of
white cards - no panel-in-panel. Theme colour vars are redefined for the
band so the shared .fs-* / .bapc-* / .bafp-* rules render light; the
dashboard copies of the tools stay dark. ===== */
.bc-tool {
color: var(--text-primary);
padding: clamp(36px, 6vh, 64px) var(--page-gutter) clamp(48px, 8vh, 88px);
background:
radial-gradient(900px 420px at 85% 0%, rgba(59, 130, 246, 0.12), transparent 70%),
linear-gradient(180deg, var(--sf-page) 0%, var(--sf-page) 100%);
}
.bc-tool-wrap { max-width: var(--page-max); margin: 0 auto; }
.bc-tool-wrap.is-wide { max-width: var(--page-max); }
.bc-tool-eyebrow {
display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
font-size: 12.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac-400);
}
.bc-tool h1 {
font-size: var(--fs-page-title); font-weight: 900; letter-spacing: -0.02em;
line-height: 1.1; color: var(--tx-50); margin: 0 0 12px;
}
.bc-tool-lead { font-size: clamp(16px, 1.8vw, 18px); color: var(--tx-300); line-height: 1.6; margin: 0 0 26px; max-width: 700px; }
.bc-tool-card {
background: var(--sf-1); border: 1px solid var(--sf-100); border-radius: 18px;
padding: clamp(20px, 3vw, 30px); box-shadow: 0 24px 50px -28px rgba(11, 18, 32, 0.28);
}
.bc-tool-private { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: 13.5px; color: var(--tx-300); line-height: 1.55; }
.bc-tool-private i { color: var(--st-green); margin-top: 3px; }
.bc-tool-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: clamp(36px, 5vh, 56px); }
.bc-tool-cols h2 { font-size: var(--fs-card-title); font-weight: 800; color: var(--tx-50); margin: 0 0 14px; }
.bc-tool-cols p { font-size: 15px; color: var(--tx-300); line-height: 1.6; margin: 0 0 12px; }
.bc-tool-steps { list-style: none; counter-reset: bcstep; margin: 0; padding: 0; display: grid; gap: 14px; }
.bc-tool-steps li { counter-increment: bcstep; display: grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: 15px; color: var(--tx-300); line-height: 1.5; }
.bc-tool-steps li::before {
content: counter(bcstep); width: 30px; height: 30px; border-radius: 50%; background: var(--sf-200); color: var(--ac-300);
font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.bc-tool-steps strong, .bc-tool-checks strong { color: var(--tx-50); }
.bc-tool-checks { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.bc-tool-checks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 15px; color: var(--tx-300); line-height: 1.5; }
.bc-tool-checks li i { color: var(--st-green); margin-top: 4px; }
.bc-tool-link { font-weight: 700; color: var(--ac-300) !important; }
.bc-tool-link:hover { text-decoration: underline; }
.bc-tool-credit { margin: 36px 0 0; font-size: 12.5px; color: var(--tx-400); }
.bc-tool-credit a { color: var(--tx-300); text-decoration: underline; }
.bc-tool .fs-btn-secondary { color: var(--tx-50); border-color: var(--sf-200); background: var(--sf-1); }
.bc-tool .bapc-consent a { color: var(--ac-300); }
.bc-tool .bapc-consent a:hover { color: var(--tx-50); }
@media (max-width: 760px) { .bc-tool-cols { grid-template-columns: 1fr; } }
/* Password generator card */
.bc-gen #password-generator-passwords .generated-password {
font-size: clamp(17px, 2.4vw, 22px) !important; padding: 16px 18px !important; margin: 0 !important;
border-radius: 12px !important; background: var(--sf-1) !important; border: 1px dashed var(--ac-300) !important;
font-family: var(--font-mono) !important;
}
.bc-gen-hint { margin: 8px 0 22px; font-size: 13px; color: var(--tx-400); }
.bc-gen-length { display: grid; gap: 8px; margin-bottom: 18px; }
.bc-gen-length label { font-size: 15px; color: var(--tx-300); }
.bc-gen-length strong { color: var(--tx-50); font-size: 18px; }
.bc-gen-options { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.bc-chip {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
border: 1px solid var(--sf-200); background: var(--sf-1); font-size: 14px; color: var(--tx-50); cursor: pointer; user-select: none;
}
.bc-chip:has(input:checked) { background: var(--sf-100); border-color: var(--ac-300); }
.bc-chip input { width: 16px; height: 16px; accent-color: var(--blue-600); cursor: pointer; }
.bc-gen-always { margin: 0 0 20px; font-size: 13px; color: var(--tx-400); }
.bc-gen-always i { color: var(--st-green); margin-right: 4px; }
.bc-gen-btn { width: 100%; justify-content: center; }
/* Fingerprint test: compact IP-lookup notice under the actions (no box) */
.bc-tool .bafp-ip-note { margin: -8px 0 24px; font-size: 12.5px; color: var(--tx-400); line-height: 1.55; max-width: 900px; }
.bc-tool .bafp-ip-note a { color: var(--tx-300); text-decoration: underline; }
.bc-tool .bafp-ip-note i { color: var(--st-amber); margin-right: 4px; }
.bafp-tool-page .bafp-card { box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04); }
.bafp-tool-page .bafp-kv-row { border-bottom-color: var(--sf-100); }
.bafp-tool-page .bafp-kv-key { color: var(--tx-400); }
.bafp-tool-page .bafp-status-ok { background: rgba(34, 197, 94, 0.14); color: var(--st-green-soft); border-color: rgba(34, 197, 94, 0.22); }
.bafp-tool-page .bafp-status-bad { background: rgba(239, 68, 68, 0.14); color: var(--st-red); border-color: rgba(239, 68, 68, 0.22); }
.bafp-tool-page .bafp-status-neutral { background: var(--sf-100); color: var(--tx-300); border-color: var(--sf-100); }
.bafp-tool-page .bafp-status-info { background: var(--sf-200); color: var(--ac-300); border-color: var(--sf-300); }
.bafp-tool-page .bafp-font-tag { background: var(--sf-300); color: var(--ac-300); border-color: var(--ac-300); }
.bafp-tool-page .bafp-details > div { background: var(--sf-1); }
.bafp-tool-page .bafp-note { background: var(--sf-100); border-color: var(--sf-300); color: var(--tx-100); }
.bafp-tool-page .bafp-ip-warning { background: rgba(245, 158, 11, 0.10); border-color: var(--st-amber-soft); color: var(--st-amber-soft); }
.bafp-tool-page .bafp-ip-warning i { color: var(--st-amber); }
.bafp-tool-page .bafp-ip-warning strong { color: var(--st-amber); }
.bafp-tool-page .bafp-ip-warning a { color: var(--ac-300); }
.bafp-tool-page .bafp-ip-toggle { border-color: var(--sf-200); color: var(--tx-100); }
.bafp-tool-page .fs-btn-secondary,
.bapw-tool-page .fs-btn-secondary,
.bapc-tool-page .fs-btn-secondary { color: var(--tx-50); border-color: var(--sf-200); background: var(--sf-1); }
.bafp-tool-page .bafp-hash-pill { background: var(--sf-1); border-color: var(--sf-300); box-shadow: 0 8px 24px -16px rgba(49, 111, 213, 0.45); }
.bafp-tool-page .bafp-hash-pill .bafp-hash-label { color: var(--ac-400); }
.bafp-tool-page .bafp-hash-pill .bafp-hash-value:not([hidden]) { background: var(--sf-1); border-color: var(--ac-300); }
.bafp-tool-page .bafp-reveal-btn { background: var(--sf-100); }
.bafp-tool-page .bafp-glance-list li { background: var(--sf-1); }
.bafp-tool-page .bafp-glance-list .is-ok { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.22); }
.bafp-tool-page .bafp-glance-list .is-ok i, .bafp-tool-page .bafp-glance-list .is-ok strong { color: var(--st-green-soft); }
.bafp-tool-page .bafp-glance-list .is-warn { background: rgba(245, 158, 11, 0.10); border-color: var(--st-amber-soft); }
.bafp-tool-page .bafp-glance-list .is-warn i, .bafp-tool-page .bafp-glance-list .is-warn strong { color: var(--st-amber); }
.bafp-tool-page .bafp-glance-list .is-bad { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.22); }
.bafp-tool-page .bafp-glance-list .is-bad i, .bafp-tool-page .bafp-glance-list .is-bad strong { color: var(--st-red); }
.bafp-tool-intro a {
color: var(--primary);
text-decoration: underline;
font-weight: 600;
}
.bafp-tool-intro a:hover { color: var(--primary-dark); }
.bafp-tool-intro ul,
.bafp-tool-intro ol {
color: var(--text-secondary);
margin: 0 0 14px 0;
padding-left: 22px;
}
.bafp-tool-intro li { margin-bottom: 6px; }
.bafp-tool-intro img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.bafp-tool-intro blockquote {
border-left: 4px solid var(--primary);
padding: 8px 16px;
margin: 16px 0;
color: var(--text-secondary);
font-style: italic;
background: rgba(59, 130, 246, 0.05);
border-radius: 0 6px 6px 0;
}
.bafp-tool-intro hr {
border: none;
border-top: 1px solid var(--border);
margin: 24px 0;
}
@media (max-width: 600px) {
.bafp-tool-main {
padding: 20px 0;
}
.bafp-tool-container {
padding: 0 var(--page-gutter);
}
.bafp-tool-intro h1 { font-size: var(--fs-page-title); }
.bafp-tool-intro h2 { font-size: var(--fs-section-title); }
.bafp-tool-intro h3 { font-size: var(--fs-card-title); }
}
/* ==========================================================================
Public Password Checker (templates/page-password-checker.php)
k-anonymity HIBP-style breach lookup. Brand-styled to match the dark
BreachAlert theme. See assets/js/password-checker.js for the JS.
========================================================================== */
.bapc-checker {
margin: 0;
}
.bapc-label {
display: block;
font-weight: 600;
color: var(--text-primary);
font-size: 14px;
margin-bottom: 8px;
}
.bapc-input-row {
display: flex;
gap: 12px;
align-items: stretch;
flex-wrap: wrap;
}
.bapc-input-row .bapc-input {
flex: 1 1 280px;
min-width: 0;
font-family: var(--font-mono);
letter-spacing: 0.04em;
}
.bapc-input-row .bapc-button {
flex: 0 0 auto;
min-height: 50px;
white-space: nowrap;
padding-left: 20px;
padding-right: 20px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.bapc-input-row .bapc-button:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.bapc-result {
margin-top: 18px;
padding: 16px 18px;
border-radius: 10px;
border: 1px solid var(--border);
border-left: 4px solid var(--border);
background: var(--bg-dark);
color: var(--text-primary);
font-size: 15px;
line-height: 1.55;
display: flex;
align-items: flex-start;
gap: 12px;
animation: bapcResultIn 0.18s ease-out;
}
.bapc-result-icon {
flex: 0 0 auto;
font-size: 22px;
line-height: 1;
margin-top: 1px;
}
.bapc-result-text {
flex: 1 1 auto;
}
.bapc-result.is-info {
background: rgba(59, 130, 246, 0.08);
border-color: rgba(59, 130, 246, 0.25);
border-left-color: var(--brand-blue);
color: var(--text-primary);
}
.bapc-result.is-info .bapc-result-icon { color: var(--brand-blue); }
.bapc-result.is-safe {
background: rgba(16, 185, 129, 0.10);
border-color: rgba(16, 185, 129, 0.25);
border-left-color: var(--success);
color: var(--text-primary);
}
.bapc-result.is-safe .bapc-result-icon { color: var(--success); }
.bapc-result.is-pwned {
background: rgba(239, 68, 68, 0.10);
border-color: rgba(239, 68, 68, 0.30);
border-left-color: var(--danger);
color: var(--text-primary);
}
.bapc-result.is-pwned .bapc-result-icon { color: var(--danger); }
.bapc-result.is-error {
background: rgba(245, 158, 11, 0.10);
border-color: rgba(245, 158, 11, 0.30);
border-left-color: var(--warning);
color: var(--text-primary);
}
.bapc-result.is-error .bapc-result-icon { color: var(--warning); }
.bapc-modal-open {
overflow: hidden;
}
.bapc-modal-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(11, 18, 32, 0.72);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
}
.bapc-modal {
width: min(680px, 100%);
border-radius: 18px;
border: 1px solid rgba(71, 85, 105, 0.9);
background: radial-gradient(circle at top, rgba(24, 65, 131, 0.22), transparent 40%),
linear-gradient(180deg, color-mix(in srgb, var(--sf-page) 96%, transparent) 0%, color-mix(in srgb, var(--sf-page) 98%, transparent) 100%);
box-shadow: 0 24px 60px rgba(11, 18, 32, 0.7);
padding: 26px 28px 24px;
position: relative;
}
.bapc-modal-close {
position: absolute;
top: 12px;
right: 14px;
border: none;
background: transparent;
color: var(--tx-400);
font-size: 30px;
line-height: 1;
cursor: pointer;
}
.bapc-modal-icon-wrap {
display: flex;
justify-content: center;
margin: 4px 0 10px;
}
.bapc-modal-icon {
width: 74px;
height: 74px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 34px;
border: 1px solid rgba(140, 153, 173, 0.35);
}
.bapc-modal-pwned .bapc-modal-icon {
color: var(--st-red);
border-color: rgba(248, 113, 113, 0.5);
background: rgba(127, 29, 29, 0.18);
}
.bapc-modal-safe .bapc-modal-icon {
color: var(--st-green-2);
border-color: rgba(52, 211, 153, 0.45);
background: rgba(6, 78, 59, 0.18);
}
.bapc-modal-error .bapc-modal-icon {
color: #f59e0b;
border-color: rgba(245, 158, 11, 0.45);
background: rgba(120, 53, 15, 0.18);
}
.bapc-modal-title {
margin: 0 0 10px;
text-align: center;
color: var(--tx-strong);
font-size: var(--fs-section-title);
line-height: 1.25;
}
.bapc-modal-text,
.bapc-modal-subtext {
margin: 0;
text-align: center;
color: var(--tx-200);
font-size: 18px;
line-height: 1.6;
}
.bapc-modal-subtext {
margin-top: 8px;
}
.bapc-modal-details {
margin-top: 20px;
border: 1px solid rgba(71, 85, 105, 0.7);
border-radius: 12px;
padding: 14px 16px;
background: color-mix(in srgb, var(--sf-1) 48%, transparent);
}
.bapc-modal-benefits {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
}
.bapc-modal-benefits li {
display: flex;
align-items: center;
gap: 10px;
color: var(--tx-100);
font-size: 15px;
}
.bapc-modal-benefits i {
color: var(--ac-400);
}
.bapc-modal-actions {
margin-top: 20px;
display: grid;
gap: 12px;
}
.bapc-modal-primary,
.bapc-modal-secondary {
width: 100%;
border-radius: 12px;
font-size: 19px;
font-weight: 700;
text-align: center;
padding: 13px 16px;
}
.bapc-modal-primary {
color: var(--on-accent);
text-decoration: none;
background: linear-gradient(135deg, var(--brand-blue), var(--blue-600));
}
.bapc-modal-secondary {
border: none;
background: transparent;
color: var(--tx-200);
cursor: pointer;
}
.bapc-fineprint {
margin: 16px 0 0 0;
color: var(--text-secondary);
font-size: 13px;
line-height: 1.6;
display: flex;
align-items: center;
gap: 6px;
}
.bapc-fineprint i { color: var(--primary); }
.bapc-consent {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 14px 0 0 0;
font-size: 13px;
line-height: 1.55;
color: var(--text-secondary);
text-align: left;
cursor: pointer;
}
.bapc-consent input { margin-top: 3px; flex-shrink: 0; }
.bapc-consent a { color: var(--primary); text-decoration: underline; }
.bapc-consent a:hover { color: var(--text-primary); }
/* Dashboard Terms-acceptance gate (free / back-office accounts missing consent). */
.ba-consent-gate {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(11, 18, 32, 0.72);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.ba-consent-box {
width: 100%;
max-width: 520px;
background: var(--bg-card, var(--sf-1));
border: 1px solid var(--border, rgba(252, 252, 253, 0.12));
border-radius: 18px;
padding: 34px 30px;
text-align: center;
box-shadow: 0 30px 80px rgba(11, 18, 32, 0.5);
}
.ba-consent-icon { font-size: 40px; color: var(--primary, var(--brand-blue)); margin-bottom: 14px; }
.ba-consent-box h2 { margin: 0 0 10px; font-size: var(--fs-card-title); font-weight: 800; color: var(--text-primary, var(--tx-strong)); }
.ba-consent-box p { margin: 0 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary, var(--tx-400)); }
.ba-consent-check {
display: flex;
align-items: flex-start;
gap: 10px;
max-width: 440px;
margin: 0 auto 6px;
text-align: left;
font-size: 13.5px;
line-height: 1.5;
color: var(--text-secondary, var(--tx-400));
cursor: pointer;
}
.ba-consent-check input { margin-top: 3px; flex-shrink: 0; }
.ba-consent-check a { color: var(--primary, var(--ac-400)); text-decoration: underline; }
.ba-consent-err { min-height: 18px; margin: 6px 0 10px; font-size: 12.5px; font-weight: 700; color: var(--st-red-soft); }
.ba-consent-btn { width: 100%; max-width: 440px; }
.ba-consent-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.bapc-steps {
margin: 0;
padding: 0;
list-style: none;
counter-reset: bapc-step;
display: grid;
gap: 12px;
}
.bapc-steps li {
counter-increment: bapc-step;
position: relative;
padding: 14px 16px 14px 56px;
background: var(--bg-dark);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.6;
}
.bapc-steps li::before {
content: counter(bapc-step);
position: absolute;
top: 50%;
left: 16px;
transform: translateY(-50%);
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--primary);
color: var(--on-accent);
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
}
.bapc-steps li strong {
display: block;
color: var(--text-primary);
margin-bottom: 4px;
font-size: 15px;
font-weight: 700;
}
.bapc-tips {
margin: 0;
padding-left: 20px;
color: var(--text-secondary);
font-size: 14px;
line-height: 1.8;
}
.bapc-tips li { margin-bottom: 4px; }
@keyframes bapcResultIn {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
.bapc-input-row { flex-direction: column; }
.bapc-checker,
.bapc-input-row,
.bapc-input-row .bapc-input {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.bapc-input-row .bapc-input {
flex: 1 1 auto;
}
.bapc-input-row .bapc-button {
width: 100%;
justify-content: center;
}
.bapc-steps li {
padding-left: 16px;
padding-top: 48px;
}
.bapc-steps li::before {
top: 12px;
left: 16px;
transform: none;
}
}
/* Global typography update */
body,
p,
li,
span,
label,
small,
input,
textarea,
select {
font-family: var(--font-body);
}
/* Text wrapped inside a heading (e.g. Title highlight
)
keeps the heading font. Without this the span rule above switched those
words to Inter, so one heading showed two fonts at two sizes. */
:is(h1, h2, h3, h4, h5, h6) :is(span, small, strong, em, b, a, label) {
font-family: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.feature-title,
.step-title,
.cta-title,
.monitor-title,
.stat-number,
.pricing-hero-title,
.pricing-card-title,
.footer-widget h3 {
font-family: var(--font-heading) !important;
}
.hero-badge,
.indicator-text {
font-family: var(--font-body) !important;
}
/* Menu links use Inter; top-level items are uppercase (see Navigation below). */
.main-navigation .menu a {
font-family: var(--font-body) !important;
}
/* All buttons (and links styled as buttons) use the button font. */
.btn-primary,
.btn-secondary,
.btn-primary-large,
.btn-logout,
.btn-signin,
.btn-hero-primary,
.btn-hero-secondary,
.btn-cta,
.btn-pricing,
.btn-pricing-starter,
.btn-pricing-platinum,
.btn-pricing-preview,
.btn-pricing-cta,
.pricing-preview-cta,
.fs-btn-primary,
.fs-btn-secondary,
.fs-btn-danger,
.fs-logout-btn,
.landing-btn,
.bapc-button,
.bafp-reveal-btn,
.wcec-event-btn,
.bx-cta,
.bx-safe-cta,
.bc-explain-cta,
.bc-feed-cta,
.bc-alert-btn,
.bc-gen-btn,
.ba-consent-btn,
.ba-404-btn,
.p6-cta,
.button,
button,
input[type="button"],
input[type="submit"] {
font-family: var(--font-button) !important;
}
/* Label text wrapped in a span inside a button keeps the button font
(the global span rule above would otherwise switch it to Inter). */
:is(.btn-primary, .btn-secondary, .btn-primary-large, .btn-logout, .btn-signin, .btn-hero-primary, .btn-hero-secondary, .btn-cta, .btn-pricing, .btn-pricing-starter, .btn-pricing-platinum, .btn-pricing-preview, .btn-pricing-cta, .pricing-preview-cta, .fs-btn-primary, .fs-btn-secondary, .fs-btn-danger, .fs-logout-btn, .landing-btn, .bapc-button, .bafp-reveal-btn, .wcec-event-btn, .bx-cta, .bx-safe-cta, .bc-explain-cta, .bc-feed-cta, .bc-alert-btn, .bc-gen-btn, .ba-consent-btn, .ba-404-btn, .p6-cta, .button, button, input[type="button"], input[type="submit"]) :is(span, small, strong, em, b) {
font-family: inherit !important;
}
.ba-404 {
min-height: 64vh;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 20px;
background:
radial-gradient(900px 400px at 50% -10%, rgba(59, 130, 246, 0.18), transparent 70%),
linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-card) 60%, var(--sf-1) 100%);
}
.ba-404-inner {
width: 100%;
max-width: 560px;
text-align: center;
}
.ba-404-badge {
width: 84px;
height: 84px;
margin: 0 auto 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 34px;
color: var(--primary);
background: var(--primary-light);
border: 1px solid var(--border-light);
border-radius: 20px;
}
.ba-404-code {
margin: 0;
font-family: var(--font-heading);
font-weight: 800;
font-size: 72px;
line-height: 1;
letter-spacing: 2px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ba-404-title {
margin: 12px 0 0;
font-size: var(--fs-section-title);
color: var(--text-primary);
}
.ba-404-text {
margin: 14px auto 0;
max-width: 460px;
font-size: 16px;
line-height: 1.6;
color: var(--text-secondary);
}
.ba-404-actions {
margin-top: 32px;
display: flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
}
.ba-404-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 26px;
border-radius: 10px;
font-weight: 700;
font-size: 15px;
transition: all 0.25s ease;
}
.ba-404-btn--primary {
background: var(--primary);
color: var(--on-accent);
}
.ba-404-btn--primary:hover {
background: var(--primary-dark);
color: var(--on-accent);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(59, 130, 246, 0.35);
}
.ba-404-btn--secondary {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border-light);
}
.ba-404-btn--secondary:hover {
border-color: var(--primary);
color: var(--primary);
background: var(--primary-light);
}
.ba-404-subtle {
margin: 26px 0 0;
font-size: 14px;
color: var(--text-secondary);
}
.ba-404-subtle a {
color: var(--primary);
font-weight: 600;
}
@media (max-width: 560px) {
.ba-404-code { font-size: 60px; }
.ba-404-title { font-size: var(--fs-section-title); }
.ba-404-btn { width: 100%; justify-content: center; }
}
/* ==========================================================================
Pages & Posts (page.php / single.php)
Centered, readable container + prose typography for Terms, Privacy,
Affiliate Terms, and blog posts. Without this these render full width.
========================================================================== */
.page-main {
padding: 56px 0 80px;
}
.content-container {
max-width: calc(var(--page-max) + 2 * var(--page-gutter));
margin: 0 auto;
padding: 0 var(--page-gutter);
}
.content-page-header {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border);
}
.content-page-title {
font-size: var(--fs-page-title);
line-height: 1.2;
margin: 0 0 10px;
color: var(--text-primary);
}
.content-page-meta {
margin: 0;
font-size: 14px;
color: var(--text-secondary);
}
.content-page-meta a { color: var(--text-secondary); text-decoration: none; }
.content-page-meta a:hover { color: var(--primary); }
.content-page-meta .byline { margin-left: 12px; }
/* Prose typography ------------------------------------------------------- */
.entry-content.prose {
color: var(--text-secondary);
font-size: 16px;
line-height: 1.75;
}
.entry-content.prose > *:first-child { margin-top: 0; }
.entry-content.prose > *:last-child { margin-bottom: 0; }
.entry-content.prose p { margin: 0 0 1.2em; }
.entry-content.prose h2 {
font-size: var(--fs-card-title);
line-height: 1.3;
color: var(--text-primary);
margin: 2em 0 0.6em;
}
.entry-content.prose h3 {
font-size: var(--fs-subheading);
color: var(--text-primary);
margin: 1.6em 0 0.5em;
}
.entry-content.prose h4 {
font-size: 16px;
color: var(--text-primary);
margin: 1.4em 0 0.4em;
}
.entry-content.prose a {
color: var(--primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.entry-content.prose a:hover { color: var(--primary-dark); }
.entry-content.prose strong { color: var(--text-primary); }
.entry-content.prose ul,
.entry-content.prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.entry-content.prose li { margin: 0.35em 0; }
.entry-content.prose blockquote {
margin: 1.5em 0;
padding: 12px 20px;
border-left: 3px solid var(--primary);
background: var(--bg-card);
border-radius: 0 8px 8px 0;
}
.entry-content.prose hr {
border: 0;
border-top: 1px solid var(--border);
margin: 2em 0;
}
.entry-content.prose img {
max-width: 100%;
height: auto;
border-radius: 10px;
}
.entry-content.prose code {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 4px;
padding: 2px 6px;
font-size: 0.9em;
}
.entry-content.prose pre {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 18px;
overflow-x: auto;
margin: 0 0 1.4em;
}
.entry-content.prose pre code { background: none; border: 0; padding: 0; }
.entry-content.prose table {
width: 100%;
border-collapse: collapse;
margin: 0 0 1.4em;
font-size: 15px;
}
.entry-content.prose th,
.entry-content.prose td {
border: 1px solid var(--border);
padding: 10px 12px;
text-align: left;
}
.entry-content.prose th {
background: var(--bg-card);
color: var(--text-primary);
}
/* Featured image, tags, post navigation ---------------------------------- */
.page-main .post-thumbnail { margin-bottom: 28px; }
.page-main .post-thumbnail img { width: 100%; border-radius: 12px; display: block; }
.entry-footer {
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid var(--border);
}
.entry-footer .tags-links { font-size: 14px; color: var(--text-secondary); }
.entry-footer .tags-links a { color: var(--primary); text-decoration: none; }
.post-navigation {
max-width: var(--page-max);
margin: 40px auto 0;
padding: 24px;
display: flex;
justify-content: space-between;
gap: 16px;
border-top: 1px solid var(--border);
}
.post-navigation a { text-decoration: none; display: block; }
.post-navigation .nav-subtitle {
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
margin-bottom: 4px;
}
.post-navigation .nav-title { color: var(--primary); font-weight: 600; }
.post-navigation .nav-next { text-align: right; margin-left: auto; }
@media (max-width: 600px) {
.page-main { padding: 36px 0 56px; }
.content-container { padding: 0 var(--page-gutter); }
.post-navigation { flex-direction: column; padding: 20px 18px; }
.post-navigation .nav-next { text-align: left; margin-left: 0; }
}
/* Archive & search listings ---------------------------------------------- */
.post-list {
display: flex;
flex-direction: column;
gap: 24px;
}
.post-summary {
padding: 24px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
}
.post-summary-title {
font-size: var(--fs-card-title);
line-height: 1.3;
margin: 0 0 8px;
}
.post-summary-title a { color: var(--text-primary); text-decoration: none; }
.post-summary-title a:hover { color: var(--primary); }
.post-summary .content-page-meta { margin-bottom: 10px; }
.post-summary-excerpt {
color: var(--text-secondary);
font-size: 15px;
line-height: 1.7;
}
.post-summary-excerpt p { margin: 0 0 0.8em; }
.post-summary-more {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 14px;
font-weight: 600;
color: var(--primary);
text-decoration: none;
}
.post-summary-more:hover { color: var(--primary-dark); }
.search-term { color: var(--primary); }
.ba-empty {
color: var(--text-secondary);
font-size: 16px;
padding: 8px 0;
}
.ba-search-again { margin-top: 16px; max-width: 420px; }
/* Pagination (the_posts_pagination) -------------------------------------- */
.page-main .pagination {
margin-top: 40px;
}
.page-main .pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.page-main .pagination .page-numbers {
display: inline-flex;
align-items: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
justify-content: center;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-secondary);
text-decoration: none;
font-size: 14px;
}
.page-main .pagination .page-numbers:hover {
border-color: var(--primary);
color: var(--text-primary);
}
.page-main .pagination .page-numbers.current {
background: var(--primary);
border-color: var(--primary);
color: var(--on-accent);
font-weight: 600;
}
.page-main .pagination .page-numbers.dots {
border-color: transparent;
}
/* Contact form (templates/page-contact.php) */
.bc-form { display: grid; gap: 16px; }
.bc-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tx-50); }
.bc-form label em { font-style: normal; font-weight: 400; color: var(--tx-400); }
.bc-form input[type="text"], .bc-form input[type="email"], .bc-form select, .bc-form textarea {
width: 100%; padding: 12px 14px; border: 1px solid var(--sf-200); border-radius: 10px; background: var(--sf-1);
color: var(--tx-50); font: inherit; font-weight: 400; font-size: 15px;
}
.bc-form textarea { resize: vertical; min-height: 140px; }
.bc-form input:focus, .bc-form select:focus, .bc-form textarea:focus { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18); }
.bc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bc-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.bc-form-note { margin: 0; font-size: 13px; color: var(--tx-400); }
.bc-form-note i { color: var(--st-green); margin-right: 4px; }
.bc-form-submit { justify-self: start; }
.bc-form-status { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 14.5px; }
.bc-form-status.is-ok { background: rgba(34, 197, 94, 0.10); border: 1px solid rgba(34, 197, 94, 0.22); color: var(--st-green-soft); }
.bc-form-status.is-error { background: rgba(239, 68, 68, 0.10); border: 1px solid rgba(239, 68, 68, 0.22); color: var(--st-red); }
@media (max-width: 640px) { .bc-form-row { grid-template-columns: 1fr; } .bc-form-submit { justify-self: stretch; justify-content: center; } }
/* ===== Dashboard: close account card ===== */
.bc-close-card { border-color: rgba(239, 68, 68, .35); }
.bc-close-warn { margin: 0 0 18px; padding-left: 20px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.bc-close-warn li { margin-bottom: 6px; }
.bc-close-locked { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 10px; background: rgba(140, 153, 173, .08); color: var(--text-secondary); font-size: 14px; line-height: 1.55; }
.bc-close-locked i { margin-top: 3px; color: var(--text-secondary); }
.bc-close-form { display: grid; gap: 14px; max-width: 520px; }
.bc-close-ack { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-primary); line-height: 1.5; cursor: pointer; }
.bc-close-ack input { margin-top: 3px; accent-color: var(--danger); }
.bc-close-type { display: grid; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.bc-close-type input { max-width: 220px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-dark); color: var(--text-primary); font: inherit; letter-spacing: .08em; }
.bc-close-btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 8px; border: 1px solid var(--danger); background: transparent; color: var(--danger); font-weight: 600; font-size: 15px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.bc-close-btn:hover:not(:disabled) { background: var(--danger); color: var(--on-accent); }
.bc-close-btn:disabled { opacity: .45; cursor: not-allowed; }
.bc-close-status { margin: 0; font-size: 14px; color: var(--text-primary); }
/* ==========================================================================
Navigation: light, quiet uppercase Inter menu text, animated underline,
and a clean dropdown that fades and slides in with staggered items.
========================================================================== */
.main-navigation .menu > li > a {
position: relative;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brand-stroke);
background: transparent;
}
.main-navigation .menu > li > a::before {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: 2px;
height: 2px;
border-radius: 2px;
background: var(--brand-blue);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.25s ease;
}
.main-navigation .menu > li > a:hover,
.main-navigation .menu > li:focus-within > a,
.main-navigation .menu > li.menu-item-has-children:hover > a {
color: var(--brand-blue);
background: transparent;
}
.main-navigation .menu > li > a:hover::before,
.main-navigation .menu > li:focus-within > a::before,
.main-navigation .menu > li.menu-item-has-children:hover > a::before {
transform: scaleX(1);
}
.main-navigation .menu > .current-menu-item > a,
.main-navigation .menu > .current_page_item > a,
.main-navigation .menu > .current-menu-ancestor > a,
.main-navigation .menu > .current-page-ancestor > a {
color: var(--brand-blue);
background: transparent;
}
.main-navigation .menu > .current-menu-item > a::before,
.main-navigation .menu > .current_page_item > a::before,
.main-navigation .menu > .current-menu-ancestor > a::before,
.main-navigation .menu > .current-page-ancestor > a::before {
transform: scaleX(1);
}
.main-navigation .sub-menu a {
font-weight: 500;
letter-spacing: 0;
}
@media (min-width: 1280px) {
.main-navigation li.menu-item-has-children > a { padding-right: 12px; }
.main-navigation li.menu-item-has-children::after { height: 16px; }
.main-navigation li.menu-item-has-children > .sub-menu {
top: calc(100% + 12px);
left: 50%;
min-width: 250px;
padding: 8px;
border-radius: 12px;
background: var(--brand-white);
border: 1px solid var(--ink-100);
box-shadow: 0 24px 48px -16px rgba(11, 18, 32, 0.22), 0 2px 8px rgba(11, 18, 32, 0.06);
transform: translate(-50%, 6px);
/* Stays hoverable while it fades out, so moving back re-opens it
smoothly; 0.1s grace before it starts closing. */
pointer-events: auto;
transition: opacity 0.18s ease 0.1s, transform 0.2s ease 0.1s, visibility 0s linear 0.3s;
}
/* Invisible hover bridge that moves with the panel and always covers the
gap between the menu item and the dropdown (the cause of the flicker). */
.main-navigation li.menu-item-has-children > .sub-menu::after {
content: '';
position: absolute;
left: -12px;
right: -12px;
top: -24px;
height: 24px;
}
.main-navigation li.menu-item-has-children > .sub-menu::before {
content: '';
position: absolute;
top: -6px;
left: 50%;
width: 11px;
height: 11px;
background: var(--brand-white);
border-left: 1px solid var(--ink-100);
border-top: 1px solid var(--ink-100);
transform: translateX(-50%) rotate(45deg);
}
.main-navigation li.menu-item-has-children:hover > .sub-menu,
.main-navigation li.menu-item-has-children:focus-within > .sub-menu {
transform: translate(-50%, 0);
transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.main-navigation li.menu-item-has-children > .sub-menu li {
opacity: 0;
transform: translateY(6px);
transition: opacity 0.2s ease, transform 0.25s ease;
}
.main-navigation li.menu-item-has-children:hover > .sub-menu li,
.main-navigation li.menu-item-has-children:focus-within > .sub-menu li {
opacity: 1;
transform: none;
}
.main-navigation li.menu-item-has-children:hover > .sub-menu li:nth-child(2),
.main-navigation li.menu-item-has-children:focus-within > .sub-menu li:nth-child(2) { transition-delay: 0.04s; }
.main-navigation li.menu-item-has-children:hover > .sub-menu li:nth-child(3),
.main-navigation li.menu-item-has-children:focus-within > .sub-menu li:nth-child(3) { transition-delay: 0.08s; }
.main-navigation li.menu-item-has-children:hover > .sub-menu li:nth-child(n+4),
.main-navigation li.menu-item-has-children:focus-within > .sub-menu li:nth-child(n+4) { transition-delay: 0.12s; }
.main-navigation li.menu-item-has-children > .sub-menu li + li { margin-top: 2px; }
.main-navigation li.menu-item-has-children > .sub-menu a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 11px 14px;
font-size: 14px;
color: var(--brand-stroke);
border-radius: 8px;
transition: background 0.2s ease, color 0.2s ease;
}
.main-navigation li.menu-item-has-children > .sub-menu a::after {
content: '\2192';
font-family: var(--font-body);
color: var(--brand-blue);
opacity: 0;
transform: translateX(-6px);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.main-navigation li.menu-item-has-children > .sub-menu a:hover,
.main-navigation li.menu-item-has-children > .sub-menu a:focus {
background: var(--blue-50);
color: var(--brand-blue);
}
.main-navigation li.menu-item-has-children > .sub-menu a:hover::after,
.main-navigation li.menu-item-has-children > .sub-menu a:focus::after {
opacity: 1;
transform: none;
}
}
/* ==========================================================================
Screenshot lightbox (homepage slider images)
========================================================================== */
.product-preview-image { cursor: zoom-in; }
.product-preview-image:focus-visible { outline: 2px solid var(--ac-400); outline-offset: -4px; }
body.bc-lightbox-open { overflow: hidden; }
.bc-lightbox {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: clamp(16px, 4vw, 56px);
background: rgba(5, 9, 18, 0.9);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.2s ease;
}
.bc-lightbox[hidden] { display: none; }
.bc-lightbox.is-open { opacity: 1; }
.bc-lightbox-figure {
margin: 0;
max-width: min(1400px, 100%);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
transform: scale(0.97);
transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bc-lightbox.is-open .bc-lightbox-figure { transform: none; }
.bc-lightbox-img {
display: block;
max-width: 100%;
max-height: calc(100vh - 140px);
border-radius: 8px;
border: 1px solid var(--sf-300);
box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}
.bc-lightbox-caption { color: var(--tx-300); font-size: 14px; text-align: center; }
.bc-lightbox-close,
.bc-lightbox-nav {
flex: 0 0 auto;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid var(--sf-300);
background: var(--sf-1);
color: var(--tx-50);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.bc-lightbox-close:hover,
.bc-lightbox-nav:hover { background: var(--sf-100); border-color: var(--ac-400); }
.bc-lightbox-close { position: absolute; top: 16px; right: 16px; }
@media (max-width: 700px) {
.bc-lightbox-nav { position: absolute; bottom: 16px; }
.bc-lightbox-prev { left: calc(50% - 52px); }
.bc-lightbox-next { right: calc(50% - 52px); }
}
/* ==========================================================================
Account menu (user icon in the header) and the colour mode switch.
The header is always light, so this uses the raw palette, not the mode
tokens. On phones the panel sits open inside the mobile menu.
========================================================================== */
.bc-account { position: relative; }
.bc-account-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 4px 6px 8px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--brand-stroke);
font-size: 27px;
line-height: 1;
cursor: pointer;
transition: color 0.2s ease;
}
.bc-account-toggle:hover,
.bc-account.is-open .bc-account-toggle { color: var(--brand-blue); }
.bc-account-toggle:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.bc-account-caret { font-size: 10px; transition: transform 0.2s ease; }
.bc-account.is-open .bc-account-caret { transform: rotate(180deg); }
.bc-account-menu {
position: absolute;
top: calc(100% + 12px);
right: -6px;
width: 290px;
padding: 8px;
text-align: left;
color: var(--brand-stroke);
background: var(--brand-white);
border: 1px solid var(--ink-100);
border-radius: 12px;
box-shadow: 0 24px 48px -16px rgba(11, 18, 32, 0.22), 0 2px 8px rgba(11, 18, 32, 0.06);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.18s ease, transform 0.2s ease, visibility 0s linear 0.2s;
z-index: 1200;
}
.bc-account-menu::before {
content: '';
position: absolute;
top: -6px;
right: 22px;
width: 11px;
height: 11px;
background: var(--brand-white);
border-left: 1px solid var(--ink-100);
border-top: 1px solid var(--ink-100);
transform: rotate(45deg);
}
/* Invisible bridge over the gap under the icon, so the mouse can reach the
panel without the hover menu closing. */
.bc-account-menu::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -14px;
height: 14px;
}
.bc-account.is-open .bc-account-menu {
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
.bc-account-head { display: grid; gap: 6px; padding: 8px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--ink-100); }
.bc-account-email { font-size: 13.5px; font-weight: 600; color: var(--brand-stroke); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-account-plan {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--blue-700);
background: var(--blue-50);
}
.main-navigation .bc-account-links { display: block; list-style: none; margin: 0; padding: 0; gap: 0; }
.main-navigation .bc-account-links + .bc-account-links,
.bc-theme-switch + .bc-account-links { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--ink-100); }
.main-navigation .bc-account-links a {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 12px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--brand-stroke);
background: transparent;
}
.main-navigation .bc-account-links a i { width: 18px; text-align: center; font-size: 14px; color: var(--ink-500); transition: color 0.2s ease; }
.main-navigation .bc-account-links a:hover,
.main-navigation .bc-account-links a:focus-visible { background: var(--blue-50); color: var(--brand-blue); }
.main-navigation .bc-account-links a:hover i,
.main-navigation .bc-account-links a:focus-visible i { color: var(--brand-blue); }
.main-navigation .bc-account-links a.is-strong { font-weight: 700; }
.main-navigation .bc-account-links a.is-danger:hover,
.main-navigation .bc-account-links a.is-danger:focus-visible { background: rgba(239, 68, 68, 0.08); color: var(--danger); }
.main-navigation .bc-account-links a.is-danger:hover i { color: var(--danger); }
.bc-theme-switch { margin-top: 4px; padding: 10px 12px 8px; border-top: 1px solid var(--ink-100); }
.bc-theme-label { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); }
.bc-theme-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
padding: 3px;
border: 1px solid var(--ink-100);
border-radius: 10px;
background: var(--ink-50);
}
.bc-theme-options button {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 8px 4px 7px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--ink-600);
font: 600 12px/1.1 var(--font-body);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.bc-theme-options button i { font-size: 15px; }
.bc-theme-options button:hover { color: var(--brand-stroke); background: rgba(59, 130, 246, 0.08); }
.bc-theme-options button:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 1px; }
.bc-theme-options button[aria-pressed="true"] { color: var(--brand-blue); background: var(--brand-white); box-shadow: 0 1px 3px rgba(11, 18, 32, 0.14); }
.header-actions .btn-primary i { font-size: 0.95em; }
@media (max-width: 1279px) {
.bc-account { width: 100%; }
.bc-account-toggle { display: none; }
.bc-account-menu,
.bc-account.is-open .bc-account-menu {
position: static;
width: auto;
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
}
.bc-account-menu::before { display: none; }
.bc-account-menu::after { display: none; }
.bc-account-head { padding: 2px 0 10px; }
.main-navigation .bc-account-links a { padding: 10px 2px; font-size: 15px; }
.bc-theme-switch { padding: 12px 0 6px; }
}
/* ==========================================================================
Dashboard breach table (markup and base styles come from the BreachAlert
plugin): colours that follow the colour mode, and masked values kept on
one line (they wrapped one character per line in the narrow column).
========================================================================== */
body .breach-resolve-toggle.is-active { color: var(--text-primary); border-color: var(--border-light); }
body .breach-resolve-toggle.is-active:hover { background: var(--bg-hover); }
.breach-exposed .wcec-exposed-item > span { min-width: 72px !important; }
.breach-exposed .fs-code { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
/* ==========================================================================
Dark mode header: near-black bar with the white-letter logo
(assets/img/bellcrier-logo-dark.svg). Default and Light keep the
off-white header and the original logo.
========================================================================== */
.site-header .site-logo-dark { display: none; }
:root[data-theme="dark"] .site-header .site-logo-light { display: none; }
:root[data-theme="dark"] .site-header .site-logo-dark { display: block; }
:root[data-theme="dark"] {
--header-bg: #05070C;
--header-text: var(--ink-50);
--header-link: var(--ink-200);
--header-sublink: var(--ink-300);
--header-border: rgba(252, 252, 253, 0.08);
--header-control-border: rgba(252, 252, 253, 0.18);
}
:root[data-theme="dark"] .site-header.scrolled { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); }
:root[data-theme="dark"] .main-navigation .menu > li > a { color: var(--ink-200); }
:root[data-theme="dark"] .main-navigation .menu > li > a:hover,
:root[data-theme="dark"] .main-navigation .menu > li:focus-within > a,
:root[data-theme="dark"] .main-navigation .menu > li.menu-item-has-children:hover > a,
:root[data-theme="dark"] .main-navigation .menu > .current-menu-item > a,
:root[data-theme="dark"] .main-navigation .menu > .current_page_item > a,
:root[data-theme="dark"] .main-navigation .menu > .current-menu-ancestor > a,
:root[data-theme="dark"] .main-navigation .menu > .current-page-ancestor > a { color: var(--blue-400); }
:root[data-theme="dark"] .main-navigation .menu > li > a::before { background: var(--blue-400); }
:root[data-theme="dark"] .bc-account-toggle { color: var(--ink-100); }
:root[data-theme="dark"] .bc-account-toggle:hover,
:root[data-theme="dark"] .bc-account.is-open .bc-account-toggle { color: var(--blue-400); }
@media (min-width: 1280px) {
:root[data-theme="dark"] .main-navigation li.menu-item-has-children > .sub-menu,
:root[data-theme="dark"] .bc-account-menu {
background: #0E1522;
border-color: var(--deep-200);
box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
}
:root[data-theme="dark"] .main-navigation li.menu-item-has-children > .sub-menu::before,
:root[data-theme="dark"] .bc-account-menu::before { background: #0E1522; border-color: var(--deep-200); }
:root[data-theme="dark"] .main-navigation li.menu-item-has-children > .sub-menu a { color: var(--ink-100); }
:root[data-theme="dark"] .main-navigation li.menu-item-has-children > .sub-menu a:hover,
:root[data-theme="dark"] .main-navigation li.menu-item-has-children > .sub-menu a:focus { background: rgba(59, 130, 246, 0.14); color: var(--blue-300); }
}
:root[data-theme="dark"] .bc-account-head,
:root[data-theme="dark"] .main-navigation .bc-account-links + .bc-account-links,
:root[data-theme="dark"] .bc-theme-switch + .bc-account-links,
:root[data-theme="dark"] .bc-theme-switch { border-color: var(--deep-200); }
:root[data-theme="dark"] .bc-account-email,
:root[data-theme="dark"] .main-navigation .bc-account-links a { color: var(--ink-100); }
:root[data-theme="dark"] .main-navigation .bc-account-links a i { color: var(--ink-400); }
:root[data-theme="dark"] .main-navigation .bc-account-links a:hover,
:root[data-theme="dark"] .main-navigation .bc-account-links a:focus-visible { background: rgba(59, 130, 246, 0.14); color: var(--blue-300); }
:root[data-theme="dark"] .main-navigation .bc-account-links a:hover i,
:root[data-theme="dark"] .main-navigation .bc-account-links a:focus-visible i { color: var(--blue-300); }
:root[data-theme="dark"] .main-navigation .bc-account-links a.is-danger:hover,
:root[data-theme="dark"] .main-navigation .bc-account-links a.is-danger:hover i { color: #F87171; }
:root[data-theme="dark"] .bc-account-plan { color: var(--blue-200); background: rgba(59, 130, 246, 0.16); }
:root[data-theme="dark"] .bc-theme-label { color: var(--ink-400); }
:root[data-theme="dark"] .bc-theme-options { background: #05070C; border-color: var(--deep-200); }
:root[data-theme="dark"] .bc-theme-options button { color: var(--ink-300); }
:root[data-theme="dark"] .bc-theme-options button:hover { color: var(--ink-50); background: rgba(59, 130, 246, 0.12); }
:root[data-theme="dark"] .bc-theme-options button[aria-pressed="true"] { color: var(--blue-300); background: var(--deep-100); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
/* ===== Motion =====
Small, calm effects so the page feels alive. Everything hidden-until-seen
is gated on .bc-motion, which main.js adds only when the visitor has not
asked for reduced motion, so without JS (or with reduced motion) all
content simply shows. */
/* Buttons: a light sheen sweeps across on hover, the arrow nudges forward. */
.bc-btn-fx { position: relative; overflow: hidden; isolation: isolate; }
.bc-btn-fx::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .34) 50%, transparent 68%);
transform: translateX(-120%); transition: transform .75s cubic-bezier(.2, .7, .2, 1);
}
.bc-btn-fx:hover::after, .bc-btn-fx:focus-visible::after { transform: translateX(120%); }
.bc-btn-fx:hover { filter: brightness(1.07) saturate(1.05); }
.bc-btn-fx .fa-arrow-right { transition: transform .25s ease; }
.bc-btn-fx:hover .fa-arrow-right { transform: translateX(4px); }
/* Cards: a soft blue light follows the cursor (set by main.js). */
/* !important: the cards set their colour with the `background` shorthand
in later, more specific rules, which would otherwise reset this layer. */
.bc-spot { background-image: radial-gradient(280px circle at var(--mx, -400px) var(--my, -400px), rgba(59, 130, 246, .11), transparent 65%) !important; }
.bc-spot:hover { border-color: rgba(59, 130, 246, .45) !important; }
.bc-incl-grid li > i, .bc-why-grid li > i, .bc-process-top i { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.bc-incl-grid li:hover > i, .bc-why-grid li:hover > i, .bc-process-steps li:hover .bc-process-top i { transform: rotate(-8deg) scale(1.08); }
/* Scroll reveal, staggered within each group. */
.bc-motion [data-bc-reveal] {
opacity: 0; transform: translateY(18px);
transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
transition-delay: var(--rv-delay, 0s);
}
.bc-motion [data-bc-reveal].is-in { opacity: 1; transform: none; }
/* Breach tracker: bars grow in once the card is seen. */
.bc-motion .bc-rank-bar { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .25s; }
.bc-motion .is-in .bc-rank-bar { transform: scaleX(1); }
/* Process: the arrows between steps draw in, step 4 pings. */
.bc-motion .bc-process-steps li::after { transform: scaleX(0); transform-origin: left center; transition: transform .45s ease calc(var(--rv-delay, 0s) + .4s); }
.bc-motion .bc-process-steps li.is-in::after { transform: scaleX(1); }
.bc-motion .bc-process-steps li.is-you.is-in .bc-process-top i { animation: bc-ping-blue 1.8s ease-out 1.2s 2; }
@keyframes bc-ping-blue { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, .55); } 70%, 100% { box-shadow: 0 0 0 14px rgba(59, 130, 246, 0); } }
/* Example alert: arrives like a notification, the bell rings, the leaked
password row flashes. */
.bc-motion .bc-alert[data-bc-reveal] { transform: translateY(26px) scale(.97); }
.bc-motion .bc-alert[data-bc-reveal].is-in { transform: none; }
.bc-motion .bc-alert.is-in .bc-alert-brand i { display: inline-block; transform-origin: 50% 0; animation: bc-ring 1s ease .6s 2; }
.bc-motion .bc-alert.is-in .bc-alert-data li.is-bad { animation: bc-flash 1.2s ease 1.1s 2; }
@keyframes bc-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
@keyframes bc-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 40% { box-shadow: 0 0 0 3px rgba(239, 68, 68, .35); } }
/* FAQ answers slide open (browsers that support animating ). */
@supports selector(::details-content) {
.bc-faqh { interpolate-size: allow-keywords; }
.bc-faqh details::details-content { height: 0; overflow: clip; transition: height .3s ease, content-visibility .3s allow-discrete; }
.bc-faqh details[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
.bc-btn-fx::after { display: none; }
.bc-feed-live::before { animation: none; }
.bc-faqh details::details-content { transition: none; }
}
/* ===== Fingerprint test page (templates/page-fingerprint-tool.php) =====
One result panel (verdict meter, Fingerprint ID, five key signals,
actions), then the raw data as closed groups with a one-line summary. */
@property --p { syntax: ''; inherits: true; initial-value: 0; }
.bafp-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; margin-bottom: 22px; }
.bafp-hero h1 { margin-bottom: 8px; }
.bafp-hero .bc-tool-lead { margin: 0; }
.bafp-local { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--tx-200); background: rgba(34, 197, 94, .10); border: 1px solid rgba(34, 197, 94, .28); padding: 8px 14px; border-radius: 999px; }
.bafp-local i { color: var(--st-green); }
.bafp-panel { background: var(--sf-1); border: 1px solid var(--sf-200); border-radius: 20px; box-shadow: var(--shadow-card); overflow: hidden; }
.bafp-panel #bafp-summary { padding: clamp(20px, 3vw, 32px); }
.bafp-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
.bafp-meter {
--c: var(--ac-300); width: clamp(120px, 13vw, 148px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--sf-200) 0); animation: bafp-fill 1.2s cubic-bezier(.2, .7, .2, 1);
}
@keyframes bafp-fill { from { --p: 0; } }
.bafp-meter-in { width: calc(100% - 22px); aspect-ratio: 1; border-radius: 50%; background: var(--sf-1); display: grid; place-content: center; text-align: center; }
.bafp-meter-in b { font-family: var(--font-heading); font-weight: 400; font-size: 42px; line-height: 1; color: var(--tx-50); }
.bafp-meter-in b small { font-size: 18px; color: var(--tx-400); }
.bafp-meter-in span { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-400); margin-top: 4px; }
.bafp-meter-in > i { font-size: 38px; color: var(--ac-300); }
.bafp-rating { display: inline-flex; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; color: var(--ac-300); background: rgba(59, 130, 246, .12); }
.bafp-result.is-high .bafp-meter { --c: #EF4444; }
.bafp-result.is-medium .bafp-meter { --c: #F59E0B; }
.bafp-result.is-low .bafp-meter { --c: #22C55E; }
.bafp-result.is-high .bafp-rating { color: var(--st-red); background: rgba(239, 68, 68, .12); }
.bafp-result.is-medium .bafp-rating { color: var(--st-amber); background: rgba(245, 158, 11, .14); }
.bafp-result.is-low .bafp-rating { color: var(--st-green); background: rgba(34, 197, 94, .14); }
.bafp-result h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; letter-spacing: -.01em; line-height: 1.2; color: var(--tx-50); margin: 0 0 8px; }
.bafp-result p { font-size: 15.5px; line-height: 1.55; color: var(--tx-300); margin: 0 0 14px; max-width: 640px; }
.bafp-id { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bafp-tool-page .bafp-id .bafp-hash-value:not([hidden]) { display: block; font-size: 13px; padding: 8px 12px; border-radius: 10px; background: var(--sf-100); border: 1px dashed var(--ac-300); color: var(--tx-100); word-break: break-all; }
.bafp-panel .bafp-glance-list { margin-top: 24px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.bafp-panel-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 28px; padding: 16px clamp(20px, 3vw, 32px); background: var(--sf-100); border-top: 1px solid var(--sf-200); }
.bafp-panel-foot .bafp-actions { margin: 0; }
.bafp-ip { flex: 1 1 380px; max-width: 640px; }
.bafp-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--tx-50); user-select: none; }
.bafp-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bafp-switch-ui { position: relative; flex-shrink: 0; width: 40px; height: 22px; border-radius: 99px; background: var(--sf-300); transition: background .2s ease; }
.bafp-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #FCFCFD; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease; }
.bafp-switch input:checked + .bafp-switch-ui { background: var(--brand-blue); }
.bafp-switch input:checked + .bafp-switch-ui::after { transform: translateX(18px); }
.bafp-switch input:focus-visible + .bafp-switch-ui { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.bafp-tool-page .bafp-ip-note { margin: 6px 0 0 50px; font-size: 12.5px; color: var(--tx-400); line-height: 1.5; max-width: none; }
.bafp-tool-page .bafp-ip-note a { color: var(--tx-300); text-decoration: underline; }
.bafp-more { margin-top: clamp(28px, 4vh, 44px); }
.bafp-more-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 14px; }
.bafp-more-head h2 { font-size: var(--fs-card-title); font-weight: 800; color: var(--tx-50); margin: 0; }
.bafp-more-head p { margin: 0; font-size: 14px; color: var(--tx-400); }
.bafp-tool-page .bafp-grid { gap: 12px; margin: 0; align-items: start; }
.bafp-tool-page details.bafp-card { padding: 0; gap: 0; background: var(--sf-1); border: 1px solid var(--sf-200); border-radius: 14px; transition: border-color .2s ease; }
.bafp-tool-page details.bafp-card[open] { border-color: rgba(59, 130, 246, .45); }
.bafp-tool-page details.bafp-card > .bafp-card-header { list-style: none; cursor: pointer; display: grid; grid-template-columns: 22px auto minmax(0, 1fr) 14px; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 0; }
.bafp-tool-page details.bafp-card > .bafp-card-header::-webkit-details-marker { display: none; }
.bafp-tool-page .bafp-card-header h3 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--tx-50); white-space: nowrap; transition: color .2s ease; }
.bafp-tool-page .bafp-card-header:hover h3 { color: var(--ac-300); }
.bafp-tool-page .bafp-card-header:focus-visible { outline: 2px solid var(--blue-400); outline-offset: -2px; border-radius: 14px; }
.bafp-card-sum { font-size: 13.5px; color: var(--tx-400); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bafp-tool-page .bafp-card-header .bafp-card-caret { font-size: 12px; color: var(--tx-400); transition: transform .2s ease; }
.bafp-tool-page details.bafp-card[open] .bafp-card-caret { transform: rotate(180deg); }
.bafp-tool-page details.bafp-card > .bafp-card-body { padding: 4px 16px 14px; border-top: 1px solid var(--sf-100); }
.bafp-learn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: clamp(28px, 4vh, 44px); }
.bafp-learn-card { background: rgba(59, 130, 246, .06); border: 1px solid var(--sf-200); border-radius: 16px; padding: 22px 24px; }
.bafp-learn-card h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: var(--tx-50); margin: 0 0 10px; }
.bafp-learn-card h2 i { color: var(--ac-400); }
.bafp-learn-card p { font-size: 15px; color: var(--tx-300); line-height: 1.6; margin: 0; }
.bafp-learn-card .bc-tool-checks { margin: 0; }
@media (max-width: 760px) {
.bafp-learn { grid-template-columns: 1fr; }
.bafp-result { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.bafp-result p { margin-inline: auto; }
.bafp-id { justify-content: center; }
.bafp-tool-page .bafp-ip-note { margin-left: 0; }
.bafp-card-sum { display: none; }
.bafp-tool-page details.bafp-card > .bafp-card-header { grid-template-columns: 22px minmax(0, 1fr) 14px; }
.bafp-panel .bafp-glance-list { grid-template-columns: 1fr 1fr; gap: 8px; }
.bafp-panel .bafp-glance-list li { padding: 10px 12px; }
.bafp-panel-foot .bafp-actions { width: 100%; }
.bafp-panel-foot .bafp-actions button { flex: 1 1 0; justify-content: center; white-space: nowrap; padding-inline: 12px; }
}