/* ============================================================
BRICKBYCLICK.AI - SUPPLEMENTARY STYLES
Version: 2.0
NOTE: For optimal font loading, add this to your HTML :
This file extends the base styles. Avoid conflicts by using
specific selectors rather than generic class names.
============================================================ */
/* ============================
CSS CUSTOM PROPERTIES
============================ */
:root {
/* Colors */
--bbc-bg-dark: #0a0a0f;
--bbc-bg-light: #111827;
--bbc-accent-blue: #3b82f6;
--bbc-accent-purple: #8b5cf6;
--bbc-accent-cyan: #06b6d4;
--bbc-accent-emerald: #10b981;
--bbc-text-primary: #e5e7eb;
--bbc-text-secondary: #9ca3af;
/* Effects */
--bbc-glass-bg: rgba(17, 24, 39, 0.6);
--bbc-glass-border: rgba(255, 255, 255, 0.1);
--bbc-blur: 16px;
/* Transitions */
--bbc-transition-fast: 150ms ease;
--bbc-transition-base: 300ms ease;
--bbc-transition-slow: 500ms ease;
--bbc-transition-bounce: 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* Shadows */
--bbc-shadow-glow: 0 0 20px rgba(99, 102, 241, 0.4);
--bbc-shadow-glow-strong: 0 0 30px rgba(99, 102, 241, 0.6);
--bbc-shadow-card: 0 8px 20px rgba(0, 0, 0, 0.3);
/* Spacing */
--bbc-section-padding: 3rem 2rem;
--bbc-section-padding-mobile: 2rem 1rem;
}
/* ============================
BASE / RESET ENHANCEMENTS
============================ */
html {
scroll-behavior: smooth;
}
/* Smooth scroll only when there's no preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
body.bbc-themed {
font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
background: radial-gradient(ellipse at 50% 0%, #1e1b4b 0%, var(--bbc-bg-dark) 70%);
color: var(--bbc-text-primary);
letter-spacing: 0.02em;
line-height: 1.6;
overflow-x: hidden;
}
body.bbc-themed h1,
body.bbc-themed h2,
body.bbc-themed h3,
body.bbc-themed h4 {
font-family: 'Outfit', 'Space Grotesk', sans-serif;
line-height: 1.2;
}
/* ============================
FOCUS STATES (Accessibility)
============================ */
.bbc-focus:focus-visible,
.bbc-btn:focus-visible,
.bbc-card:focus-visible,
.bbc-link:focus-visible {
outline: 2px solid var(--bbc-accent-cyan);
outline-offset: 2px;
border-radius: 4px;
}
/* Remove default focus for mouse users, keep for keyboard */
.bbc-focus:focus:not(:focus-visible),
.bbc-btn:focus:not(:focus-visible),
.bbc-card:focus:not(:focus-visible) {
outline: none;
}
/* ============================
GLASSMORPHIC CARD
============================ */
.bbc-glass {
background: var(--bbc-glass-bg);
border: 1px solid var(--bbc-glass-border);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 1rem;
transition:
transform var(--bbc-transition-base),
border-color var(--bbc-transition-base),
box-shadow var(--bbc-transition-base);
}
.bbc-glass:hover {
transform: translateY(-4px);
border-color: rgba(147, 197, 253, 0.4);
box-shadow: var(--bbc-shadow-card);
}
/* Non-hoverable glass (for static containers) */
.bbc-glass-static {
background: var(--bbc-glass-bg);
border: 1px solid var(--bbc-glass-border);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 1rem;
}
/* ============================
GRADIENT TEXT UTILITY
============================ */
.bbc-gradient-text {
background: linear-gradient(135deg, var(--bbc-accent-blue), var(--bbc-accent-purple));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--bbc-accent-blue); /* Fallback */
}
.bbc-gradient-text-alt {
background: linear-gradient(135deg, var(--bbc-accent-cyan), var(--bbc-accent-emerald));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--bbc-accent-cyan); /* Fallback */
}
/* ============================
BUTTONS
============================ */
.bbc-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: linear-gradient(135deg, var(--bbc-accent-blue), var(--bbc-accent-purple));
color: #fff;
padding: 0.875rem 1.75rem;
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 1rem;
border: none;
border-radius: 0.75rem;
letter-spacing: 0.03em;
cursor: pointer;
overflow: hidden;
transition:
transform var(--bbc-transition-base),
box-shadow var(--bbc-transition-base);
}
.bbc-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left var(--bbc-transition-slow);
}
.bbc-btn:hover {
transform: translateY(-2px);
box-shadow: var(--bbc-shadow-glow);
}
.bbc-btn:hover::before {
left: 100%;
}
.bbc-btn:active {
transform: translateY(0);
}
/* Secondary button variant */
.bbc-btn-secondary {
background: transparent;
border: 1px solid var(--bbc-glass-border);
color: var(--bbc-text-primary);
}
.bbc-btn-secondary:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: none;
}
.bbc-btn-secondary::before {
display: none;
}
/* ============================
SECTION CONTAINERS
============================ */
.bbc-section {
background: var(--bbc-glass-bg);
border: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: blur(var(--bbc-blur));
-webkit-backdrop-filter: blur(var(--bbc-blur));
border-radius: 1.5rem;
padding: var(--bbc-section-padding);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
transition: transform var(--bbc-transition-base);
}
.bbc-section:hover {
transform: translateY(-2px);
}
/* ============================
DIVIDERS
============================ */
.bbc-divider {
height: 1px;
width: 100%;
background: linear-gradient(
90deg,
transparent,
var(--bbc-glass-border),
transparent
);
margin: 2rem 0;
}
.bbc-divider-animated {
height: 2px;
width: 100%;
background: linear-gradient(
90deg,
var(--bbc-accent-blue),
var(--bbc-accent-purple),
var(--bbc-accent-cyan),
var(--bbc-accent-blue)
);
background-size: 300% 100%;
animation: bbc-gradient-shift 8s linear infinite;
margin: 2rem 0;
}
@keyframes bbc-gradient-shift {
0% { background-position: 0% 50%; }
100% { background-position: 300% 50%; }
}
/* ============================
GLOW EFFECTS
============================ */
.bbc-glow {
box-shadow: var(--bbc-shadow-glow);
transition: box-shadow var(--bbc-transition-base);
}
.bbc-glow:hover {
box-shadow: var(--bbc-shadow-glow-strong);
}
.bbc-glow-border {
position: relative;
border-radius: 0.75rem;
background: var(--bbc-bg-dark);
}
.bbc-glow-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, var(--bbc-accent-blue), var(--bbc-accent-cyan));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* ============================
CARD EFFECTS
============================ */
.bbc-card {
position: relative;
background: var(--bbc-glass-bg);
border: 1px solid var(--bbc-glass-border);
border-radius: 1rem;
padding: 1.5rem;
transition:
transform var(--bbc-transition-base),
box-shadow var(--bbc-transition-base),
border-color var(--bbc-transition-base);
}
.bbc-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(59, 130, 246, 0.2);
border-color: rgba(59, 130, 246, 0.3);
}
/* Pricing card with gradient border on hover */
.bbc-pricing-card {
position: relative;
overflow: hidden;
}
.bbc-pricing-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: 1rem;
padding: 2px;
background: linear-gradient(135deg, var(--bbc-accent-blue), var(--bbc-accent-purple));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0;
transition: opacity var(--bbc-transition-base);
}
.bbc-pricing-card:hover::before {
opacity: 1;
}
/* Featured card variant */
.bbc-pricing-card-featured::before {
opacity: 1;
}
/* ============================
FAQ ACCORDION
============================ */
.bbc-faq-item {
margin-bottom: 0.75rem;
background: rgba(17, 24, 39, 0.5);
border: 1px solid var(--bbc-glass-border);
border-radius: 0.75rem;
overflow: hidden;
transition: border-color var(--bbc-transition-base);
}
.bbc-faq-item:hover {
border-color: rgba(255, 255, 255, 0.15);
}
.bbc-faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
background: transparent;
border: none;
color: var(--bbc-text-primary);
font-family: inherit;
font-size: 1rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: background var(--bbc-transition-fast);
}
.bbc-faq-question:hover {
background: rgba(255, 255, 255, 0.03);
}
.bbc-faq-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-left: 1rem;
color: var(--bbc-text-secondary);
transition: transform var(--bbc-transition-base);
}
.bbc-faq-item[data-expanded="true"] .bbc-faq-icon {
transform: rotate(180deg);
}
.bbc-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--bbc-transition-base), padding var(--bbc-transition-base);
}
.bbc-faq-answer-inner {
padding: 0 1.5rem 1.25rem;
color: var(--bbc-text-secondary);
line-height: 1.7;
}
.bbc-faq-item[data-expanded="true"] .bbc-faq-answer {
max-height: 500px;
}
/* ============================
ECLIPSE BACKGROUND EFFECT
============================ */
.bbc-eclipse-bg {
position: fixed;
top: 50%;
left: 50%;
width: 800px;
height: 800px;
background: radial-gradient(
circle,
rgba(99, 102, 241, 0.2) 0%,
rgba(139, 92, 246, 0.1) 30%,
transparent 70%
);
border-radius: 50%;
transform: translate(-50%, -50%);
filter: blur(80px);
pointer-events: none;
z-index: -1;
will-change: transform, opacity;
animation: bbc-eclipse-drift 30s ease-in-out infinite alternate;
}
@keyframes bbc-eclipse-drift {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
}
50% {
transform: translate(-45%, -55%) scale(1.1);
opacity: 0.8;
}
100% {
transform: translate(-55%, -45%) scale(0.95);
opacity: 0.7;
}
}
/* ============================
SCROLL REVEAL ANIMATIONS
============================ */
.bbc-reveal {
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.8s cubic-bezier(0.17, 0.55, 0.55, 1),
transform 0.8s cubic-bezier(0.17, 0.55, 0.55, 1);
}
.bbc-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Staggered reveal for children */
.bbc-reveal-stagger > .bbc-reveal:nth-child(1) { transition-delay: 0.1s; }
.bbc-reveal-stagger > .bbc-reveal:nth-child(2) { transition-delay: 0.2s; }
.bbc-reveal-stagger > .bbc-reveal:nth-child(3) { transition-delay: 0.3s; }
.bbc-reveal-stagger > .bbc-reveal:nth-child(4) { transition-delay: 0.4s; }
.bbc-reveal-stagger > .bbc-reveal:nth-child(5) { transition-delay: 0.5s; }
.bbc-reveal-stagger > .bbc-reveal:nth-child(6) { transition-delay: 0.6s; }
/* ============================
UTILITY ANIMATIONS
============================ */
.bbc-float {
animation: bbc-float 6s ease-in-out infinite;
}
@keyframes bbc-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.bbc-pulse {
animation: bbc-pulse 2s ease-in-out infinite;
}
@keyframes bbc-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.6; }
}
.bbc-fade-in {
animation: bbc-fade-in 0.6s ease-out forwards;
}
@keyframes bbc-fade-in {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================
FOOTER
============================ */
.bbc-footer {
background: linear-gradient(to right, #0f172a, var(--bbc-bg-light));
color: var(--bbc-text-secondary);
padding: 3rem 1.5rem 2rem;
font-size: 0.9rem;
letter-spacing: 0.03em;
}
.bbc-footer a {
color: var(--bbc-accent-cyan);
text-decoration: none;
transition: color var(--bbc-transition-fast);
}
.bbc-footer a:hover {
color: var(--bbc-accent-purple);
}
.bbc-footer a:focus-visible {
outline: 2px solid var(--bbc-accent-cyan);
outline-offset: 2px;
border-radius: 2px;
}
/* ============================
RESPONSIVE BREAKPOINTS
============================ */
/* Tablet and below */
@media (max-width: 1024px) {
:root {
--bbc-section-padding: 2.5rem 1.5rem;
}
.bbc-eclipse-bg {
width: 600px;
height: 600px;
filter: blur(60px);
}
}
/* Mobile */
@media (max-width: 768px) {
:root {
--bbc-section-padding: 2rem 1rem;
}
.bbc-section {
border-radius: 1rem;
}
.bbc-btn {
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
}
.bbc-faq-question {
padding: 1rem 1.25rem;
font-size: 0.95rem;
}
.bbc-faq-answer-inner {
padding: 0 1.25rem 1rem;
}
/* Reduce eclipse on mobile for performance */
.bbc-eclipse-bg {
width: 400px;
height: 400px;
filter: blur(40px);
opacity: 0.5;
animation-duration: 60s; /* Slower = less CPU */
}
}
/* Small mobile */
@media (max-width: 480px) {
:root {
--bbc-section-padding: 1.5rem 1rem;
}
.bbc-card {
padding: 1.25rem;
}
.bbc-btn {
width: 100%;
}
}
/* ============================
REDUCED MOTION PREFERENCES
============================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.bbc-eclipse-bg {
display: none;
}
.bbc-reveal {
opacity: 1;
transform: none;
}
.bbc-glass:hover,
.bbc-card:hover,
.bbc-section:hover {
transform: none;
}
}
/* ============================
HIGH CONTRAST MODE
============================ */
@media (prefers-contrast: high) {
:root {
--bbc-glass-border: rgba(255, 255, 255, 0.3);
--bbc-text-secondary: #d1d5db;
}
.bbc-btn {
border: 2px solid #fff;
}
.bbc-glass,
.bbc-card,
.bbc-section {
border-width: 2px;
}
}
/* ============================
PRINT STYLES
============================ */
@media print {
.bbc-eclipse-bg,
.bbc-divider-animated {
display: none;
}
.bbc-glass,
.bbc-card,
.bbc-section {
background: #fff;
border: 1px solid #ccc;
box-shadow: none;
}
.bbc-gradient-text {
-webkit-text-fill-color: #1e40af;
color: #1e40af;
}
body.bbc-themed {
background: #fff;
color: #000;
}
}
/* ============================
UTILITY CLASSES
============================ */
/* Visually hidden but accessible to screen readers */
.bbc-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip link for keyboard navigation */
.bbc-skip-link {
position: absolute;
top: -100%;
left: 50%;
transform: translateX(-50%);
background: var(--bbc-accent-blue);
color: #fff;
padding: 0.75rem 1.5rem;
border-radius: 0 0 0.5rem 0.5rem;
font-weight: 600;
z-index: 100000;
transition: top var(--bbc-transition-fast);
}
.bbc-skip-link:focus {
top: 0;
}
/* Container with max-width */
.bbc-container {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@media (max-width: 768px) {
.bbc-container {
padding-left: 1rem;
padding-right: 1rem;
}
}