/* ============================================================ SHARED COMPONENTS — components.css Version: S227 Scope: buddocloud.com + oclconsulting.com Load order: 1. tokens.css — design tokens, brand vars, color semantics 2. layout.css — reset, typography base, containers, utilities 3. components.css — this file: all UI components Brand-aware via body class: → dark tech aesthetic → light editorial aesthetic Table of Contents: 01. BUTTONS 02. CARDS 03. NAVIGATION (header, hamburger, footer) 04. FORMS 05. HERO & SECTION HEADERS 06. BADGES & TAGS 07. LOADING STATES 08. SCROLL-TRIGGERED ANIMATIONS 09. BUDDOCLOUD SPECIFICS (glass, terminal, feature grid, CTA) 10. OCL SPECIFICS (service cards, testimonials, process steps, team) 11. UTILITY COMPONENTS (alerts, tooltips, progress, breadcrumb, avatar) ============================================================ */ /* ============================================================ 01. BUTTONS All buttons: min-height 44px (WCAG 2.5.5 touch target) Base class goes on all buttons; variant class sets visual style. ============================================================ */ .btn-primary, .btn-secondary, .btn-outline, .btn-ghost, .btn-icon { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; font-family: inherit; font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); line-height: 1; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); transition: var(--transition-all); text-decoration: none; white-space: nowrap; user-select: none; gap: var(--space-2); } /* No border on filled buttons; transparent fills for others */ .btn-primary, .btn-secondary { border: none; } .btn-outline, .btn-ghost, .btn-icon { background: transparent; } /* Primary button */ .btn-primary { background-color: var(--brand-primary); color: var(--color-text-on-brand); } .btn-primary:hover { background-color: var(--brand-primary-hover); } .btn-primary:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Secondary button */ .btn-secondary { background-color: var(--brand-secondary); color: var(--color-text-on-brand); } .btn-secondary:hover { background-color: var(--brand-secondary-hover); } .btn-secondary:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Outline button */ .btn-outline { border: 2px solid var(--brand-primary); color: var(--brand-primary); } .btn-outline:hover { background-color: var(--brand-primary); color: var(--color-text-on-brand); border-color: var(--brand-primary); } .btn-outline:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Ghost button */ .btn-ghost { border: none; color: var(--color-text-primary); } .btn-ghost:hover { background-color: var(--color-interactive-primary); color: var(--color-text-on-brand); } .btn-ghost:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Icon-only button (square, 44x44) */ .btn-icon { border: none; width: 44px; height: 44px; padding: 0; color: var(--color-text-primary); } .btn-icon:hover { background-color: var(--color-interactive-primary); color: var(--color-text-on-brand); } .btn-icon:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Size variants */ .btn-sm { font-size: var(--font-size-sm); padding: var(--space-2) var(--space-4); min-height: 36px; border-radius: var(--radius-sm); } .btn-lg { font-size: var(--font-size-lg); padding: var(--space-4) var(--space-8); min-height: 52px; border-radius: var(--radius-lg); } /* Disabled state — applies to all button variants */ .btn-primary:disabled, .btn-secondary:disabled, .btn-outline:disabled, .btn-ghost:disabled, .btn-icon:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* buddocloud button overrides */ .buddocloud .btn-primary { border-radius: var(--radius-md); } .buddocloud .btn-primary:hover { box-shadow: var(--shadow-glow-blue); } .buddocloud .btn-secondary { background-color: var(--brand-secondary); color: #0a0a0f; /* Dark text on amber-gold for contrast */ } .buddocloud .btn-secondary:hover { background-color: var(--brand-secondary-hover); box-shadow: var(--shadow-glow-gold); } .buddocloud .btn-ghost:hover { background-color: rgba(79, 179, 255, 0.10); color: var(--color-text-primary); } .buddocloud .btn-icon:hover { background-color: rgba(79, 179, 255, 0.10); color: var(--color-text-primary); } /* OCL button overrides */ .ocl .btn-primary { border-radius: var(--radius-sm); /* Sharp corners for editorial look */ } .ocl .btn-primary:hover { box-shadow: var(--shadow-glow-green); } .ocl .btn-ghost:hover { background-color: rgba(45, 95, 74, 0.10); color: var(--color-text-primary); } .ocl .btn-icon:hover { background-color: rgba(45, 95, 74, 0.10); color: var(--color-text-primary); } /* Loading state button */ .btn-loading { pointer-events: none; position: relative; } .btn-loading::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: var(--space-2); border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 600ms linear infinite; vertical-align: middle; } /* ============================================================ 02. CARDS Base .card + semantic variants. Brand-specific hover effects via .buddocloud / .ocl body class. ============================================================ */ .card { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--space-8); transition: box-shadow var(--duration-slow) var(--ease-default), border-color var(--duration-slow) var(--ease-default); } /* Feature card — icon + title + description */ .card-feature { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--space-8); transition: box-shadow var(--duration-slow) var(--ease-default), border-color var(--duration-slow) var(--ease-default), transform var(--duration-slow) var(--ease-default); } .card-feature .card-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-md); margin-bottom: var(--space-6); background: rgba(128, 128, 160, 0.10); /* Overridden by brand selectors below */ color: var(--brand-primary); } .card-feature .card-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-4); } .card-feature .card-description { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.6; } /* Pricing card */ .card-pricing { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; transition: box-shadow var(--duration-slow) var(--ease-default), border-color var(--duration-slow) var(--ease-default); } .card-pricing .card-badge { display: inline-block; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-6); background: var(--color-bg-surface); color: var(--color-text-secondary); } .card-pricing .card-price { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-6); line-height: 1.1; } .card-pricing .card-price .price-period { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); color: var(--color-text-muted); } .card-pricing .card-feature-list { list-style: none; padding: 0; margin: 0 0 var(--space-8) 0; display: flex; flex-direction: column; gap: var(--space-4); flex: 1; } .card-pricing .card-feature-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--font-size-base); color: var(--color-text-secondary); } .card-pricing .card-feature-list li::before { content: "✓"; font-weight: var(--font-weight-bold); color: var(--color-status-success); flex-shrink: 0; line-height: 1.5; } .card-pricing .card-cta { display: block; width: 100%; padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); border: none; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); cursor: pointer; text-align: center; text-decoration: none; transition: background var(--duration-base) var(--ease-default), box-shadow var(--duration-slow) var(--ease-default); background: var(--brand-primary); color: var(--color-text-on-brand); } .card-pricing .card-cta:hover { background: var(--brand-primary-hover); } /* Featured/highlighted pricing card */ .card-pricing.featured { border: 2px solid var(--brand-primary); position: relative; } /* Testimonial card */ .card-testimonial { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--space-8); transition: box-shadow var(--duration-slow) var(--ease-default), border-color var(--duration-slow) var(--ease-default); } .card-testimonial blockquote { font-style: italic; font-size: var(--font-size-lg); line-height: 1.6; margin: 0 0 var(--space-6) 0; color: var(--color-text-primary); position: relative; } .card-testimonial .card-attribution { display: flex; flex-direction: column; gap: var(--space-2); } .card-testimonial .card-attribution .name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .card-testimonial .card-attribution .title { font-size: var(--font-size-sm); color: var(--color-text-secondary); } /* Stat card — large number + label */ .card-stat { background: var(--color-bg-elevated); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; transition: box-shadow var(--duration-slow) var(--ease-default), border-color var(--duration-slow) var(--ease-default); } .card-stat .card-stat-number { font-size: var(--font-size-4xl); font-weight: var(--font-weight-extrabold); color: var(--brand-primary); margin-bottom: var(--space-2); line-height: 1.1; } .card-stat .card-stat-label { font-size: var(--font-size-base); color: var(--color-text-secondary); } .card-stat .card-stat-icon { color: var(--brand-primary); margin-bottom: var(--space-4); } /* buddocloud card overrides */ .buddocloud .card:hover, .buddocloud .card-feature:hover, .buddocloud .card-pricing:hover, .buddocloud .card-testimonial:hover, .buddocloud .card-stat:hover { border-color: rgba(79, 179, 255, 0.30); box-shadow: var(--shadow-glow-blue); } .buddocloud .card-feature:hover { transform: translateY(-4px); } .buddocloud .card-feature .card-icon { background: rgba(79, 179, 255, 0.08); color: var(--brand-primary); } .buddocloud .card-pricing.featured { border-color: var(--brand-secondary); /* Gold featured card on dark theme */ box-shadow: var(--shadow-glow-gold); } .buddocloud .card-pricing.featured .card-badge { background: var(--brand-secondary); color: #0a0a0f; } .buddocloud .card-pricing .card-cta { background: var(--brand-secondary); color: #0a0a0f; } .buddocloud .card-pricing .card-cta:hover { background: var(--brand-secondary-hover); } .buddocloud .card-testimonial blockquote::before { content: '\201C'; font-size: 4rem; color: var(--brand-primary); position: absolute; top: -1.2rem; left: -0.5rem; font-family: Georgia, serif; line-height: 1; font-style: normal; } /* OCL card overrides */ .ocl .card:hover, .ocl .card-feature:hover, .ocl .card-pricing:hover, .ocl .card-testimonial:hover, .ocl .card-stat:hover { border-color: rgba(45, 95, 74, 0.40); box-shadow: var(--shadow-glow-green), var(--shadow-md); } .ocl .card-feature { border-left: 4px solid transparent; transition: box-shadow var(--duration-slow) var(--ease-default), border-color var(--duration-slow) var(--ease-default), border-left-color var(--duration-slow) var(--ease-default); } .ocl .card-feature:hover { border-left-color: var(--brand-primary); } .ocl .card-feature .card-icon { background: rgba(45, 95, 74, 0.08); color: var(--brand-primary); } .ocl .card-testimonial blockquote { border-left: 3px solid var(--brand-secondary); padding-inline-start: var(--space-6); font-family: Georgia, 'Times New Roman', serif; } /* ============================================================ 03. NAVIGATION CRITICAL: buddocloud.com has no mobile nav — hamburger is required. Pattern: .site-header > .header-inner > (.nav-logo + .nav-toggle + .nav-menu) JavaScript (nav.js) toggles .is-open on .nav-menu and .nav-is-open on body. ============================================================ */ /* Fixed site header */ .site-header { position: fixed; top: 0; left: 0; width: 100%; z-index: var(--z-sticky); height: var(--nav-height); } /* buddocloud: dark glassmorphism header */ .buddocloud .site-header { background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } /* OCL: clean white header */ .ocl .site-header { background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-default); box-shadow: var(--shadow-sm); } /* Header inner flex container */ .header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); padding-inline: var(--page-padding); max-width: var(--container-xl); margin-inline: auto; } /* Logo / wordmark */ .nav-logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg); color: var(--color-text-primary); flex-shrink: 0; } .nav-logo:hover { color: var(--brand-primary); } /* Desktop nav links list (hidden on mobile — see desktop override below) */ .nav-links { display: none; /* Mobile: hidden; shown at 768px+ */ align-items: center; gap: var(--space-6); list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--color-text-secondary); text-decoration: none; font-weight: var(--font-weight-medium); font-size: var(--font-size-base); padding: var(--space-2) 0; transition: color var(--duration-base) var(--ease-out); position: relative; } .nav-links a:hover, .nav-links a:focus-visible, .nav-links a.is-active { color: var(--brand-primary); } /* Active link underline indicator */ .nav-links a.is-active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--brand-primary); border-radius: 2px; } /* Nav CTA button in desktop nav */ .nav-cta { margin-left: var(--space-4); } /* ---- HAMBURGER TOGGLE BUTTON ---- */ /* Visible on mobile only (hidden at 768px+ below) */ .nav-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: none; background: transparent; cursor: pointer; color: var(--color-text-primary); position: relative; z-index: calc(var(--z-overlay) + 1); /* Above the mobile menu overlay */ border-radius: var(--radius-md); flex-shrink: 0; } .nav-toggle:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } /* Three-line hamburger icon */ .hamburger-icon { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 24px; height: 24px; pointer-events: none; /* Clicks pass through to button */ } .hamburger-icon span { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) var(--ease-out); transform-origin: center; } /* Animate to X when open (aria-expanded="true") */ .nav-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-toggle[aria-expanded="true"] .hamburger-icon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---- MOBILE MENU OVERLAY (backdrop) ---- */ .nav-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: var(--z-overlay); opacity: 0; pointer-events: none; transition: opacity var(--duration-base) var(--ease-out); } .nav-overlay.is-open { opacity: 1; pointer-events: auto; } /* ---- MOBILE MENU CONTAINER ---- */ .nav-menu { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; /* Dynamic viewport for mobile browsers */ z-index: calc(var(--z-overlay) + 1); /* Above overlay, below toggle button */ transform: translateX(-100%); transition: transform var(--duration-slow) var(--ease-out); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; } /* buddocloud mobile menu: full-screen dark */ .buddocloud .nav-menu { background: var(--color-bg-page); /* #0a0a0f */ border-right: 1px solid var(--color-border-default); } /* OCL mobile menu: full-screen warm white */ .ocl .nav-menu { background: var(--color-bg-page); /* #f8f6f2 */ border-right: 1px solid var(--color-border-default); } /* Open state */ .nav-menu.is-open { transform: translateX(0); } /* Inner content layout */ .nav-menu-inner { display: flex; flex-direction: column; padding: calc(var(--nav-height) + var(--space-8)) var(--page-padding) var(--space-8); min-height: 100%; gap: 0; } /* Mobile menu links */ .nav-menu a { color: var(--color-text-primary); text-decoration: none; font-weight: var(--font-weight-medium); font-size: var(--font-size-xl); /* Large tap targets on mobile */ padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-subtle); display: block; transition: color var(--duration-base) var(--ease-out); } .nav-menu a:last-child { border-bottom: none; } .nav-menu a:hover, .nav-menu a:focus-visible, .nav-menu a.is-active { color: var(--brand-primary); } /* Body scroll lock when mobile nav is open */ body.nav-is-open { overflow: hidden; } /* ---- DESKTOP NAVIGATION (768px+) ---- */ @media (min-width: 768px) { /* Hide hamburger and overlay on desktop */ .nav-toggle { display: none; } .nav-overlay { display: none; } /* Show desktop nav links */ .nav-links { display: flex; } /* Reset mobile menu to static desktop nav */ .nav-menu { position: static; transform: none !important; /* Override any JS-set transform */ width: auto; height: auto; overflow: visible; display: flex; flex-direction: row; background: transparent !important; border: none !important; box-shadow: none; z-index: auto; transition: none; } .nav-menu-inner { flex-direction: row; align-items: center; padding: 0; min-height: 0; gap: var(--space-6); } .nav-menu a { padding: var(--space-2) 0; border-bottom: none; font-size: var(--font-size-base); color: var(--color-text-secondary); } /* Prevent scroll-lock from persisting on resize */ body.nav-is-open { overflow: auto; } } /* ---- SITE FOOTER ---- */ .site-footer { padding-block: var(--space-16); margin-top: auto; } .buddocloud .site-footer { background: var(--color-bg-page); border-top: 1px solid rgba(255, 255, 255, 0.06); color: var(--color-text-secondary); } .ocl .site-footer { background: var(--color-bg-page); border-top: 1px solid var(--color-border-default); color: var(--color-text-primary); } .footer-inner { display: flex; flex-direction: column; gap: var(--space-8); padding-inline: var(--page-padding); max-width: var(--container-xl); margin-inline: auto; } @media (min-width: 768px) { .footer-inner { flex-direction: row; align-items: flex-start; justify-content: space-between; } } .footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); list-style: none; margin: 0; padding: 0; } .footer-links a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--font-size-sm); transition: color var(--duration-base) var(--ease-out); } .footer-links a:hover { color: var(--brand-primary); } /* Footer bottom bar (copyright + secondary links) */ .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--color-border-subtle); font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-8); } .buddocloud .footer-bottom { border-top-color: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.35); } /* ============================================================ 04. FORMS Brand-aware: buddocloud uses dark inputs, OCL uses white inputs. ============================================================ */ .form-group { margin-bottom: var(--space-6); } .form-label { display: block; margin-bottom: var(--space-2); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } .form-label .required { color: var(--color-status-error); margin-left: var(--space-1); } /* Base input, textarea, select styles */ .form-input, .form-textarea, .form-select { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); color: var(--color-text-primary); font-size: var(--font-size-base); font-family: inherit; transition: border-color var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); outline: none; appearance: none; -webkit-appearance: none; } .form-input:focus, .form-input:focus-visible, .form-textarea:focus, .form-textarea:focus-visible, .form-select:focus, .form-select:focus-visible { border-color: var(--brand-primary); box-shadow: var(--focus-ring); } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-muted); } /* Textarea specific */ .form-textarea { min-height: 120px; resize: vertical; line-height: var(--line-height-relaxed); } /* Validation states */ .form-input.is-valid, .form-textarea.is-valid, .form-select.is-valid { border-color: var(--color-status-success); background-color: var(--color-bg-success); } .form-input.is-invalid, .form-textarea.is-invalid, .form-select.is-invalid { border-color: var(--color-status-error); background-color: var(--color-bg-error); } /* Feedback and hint text */ .form-feedback { font-size: var(--font-size-sm); margin-top: var(--space-2); line-height: var(--line-height-snug); } .form-feedback.is-valid { color: var(--color-status-success); } .form-feedback.is-invalid { color: var(--color-status-error); } .form-hint { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-top: var(--space-2); } /* Two-column form row (collapses to 1 on mobile) */ .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (max-width: 768px) { .form-row { grid-template-columns: 1fr; } } /* Checkbox / radio wrapper */ .form-check { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; } .form-check-input { width: 18px; height: 18px; accent-color: var(--brand-primary); cursor: pointer; flex-shrink: 0; } .form-check-label { font-size: var(--font-size-base); color: var(--color-text-primary); cursor: pointer; user-select: none; } /* Submit area */ .form-submit { margin-top: var(--space-8); } /* OCL: sharper inputs */ .ocl .form-input, .ocl .form-textarea, .ocl .form-select { border-radius: var(--radius-sm); background: var(--color-bg-surface); /* White */ } /* ============================================================ 05. HERO & SECTION HEADERS ============================================================ */ /* Full-height hero section */ .hero { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100dvh; padding-top: calc(var(--nav-height) + var(--space-16)); padding-bottom: var(--space-16); padding-inline: var(--page-padding); overflow: hidden; } /* Hero content centering wrapper */ .hero-content { position: relative; z-index: 1; width: 100%; max-width: var(--container-md); margin-inline: auto; text-align: center; } /* Small eyebrow badge above hero heading */ .hero-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: 0.10em; text-transform: uppercase; margin-bottom: var(--space-6); } .buddocloud .hero-badge { background: rgba(79, 179, 255, 0.10); color: var(--brand-primary); border: 1px solid rgba(79, 179, 255, 0.20); } .ocl .hero-badge { background: rgba(45, 95, 74, 0.08); color: var(--brand-primary); border: 1px solid rgba(45, 95, 74, 0.20); } /* Hero main heading */ .hero-title { font-size: var(--font-size-5xl); font-weight: var(--font-weight-extrabold); line-height: var(--line-height-tight); letter-spacing: -0.03em; margin-bottom: var(--space-6); color: var(--color-text-primary); } /* Accent span inside hero title */ .hero-title .accent { color: var(--brand-primary); } .ocl .hero-title .accent { color: var(--brand-secondary); /* Gold for OCL editorial accent */ } /* Hero description / subtitle */ .hero-subtitle { font-size: var(--font-size-xl); color: var(--color-text-secondary); line-height: 1.6; max-width: 640px; margin-inline: auto; margin-bottom: var(--space-10); } /* Hero CTA button row */ .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin-bottom: var(--space-8); } /* Radial gradient background overlay (buddocloud specific) */ .hero-gradient { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(79, 179, 255, 0.08) 0%, transparent 70%); } /* buddocloud hero background */ .buddocloud .hero { background-color: var(--color-bg-page); } .buddocloud .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 50% at 50% 0%, rgba(79, 179, 255, 0.06) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 80% 60%, rgba(255, 184, 0, 0.03) 0%, transparent 50%); pointer-events: none; z-index: 0; } /* OCL hero: clean warm background with bottom color line */ .ocl .hero { background-color: var(--color-bg-surface); } .ocl .hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); pointer-events: none; z-index: 1; } /* Split hero: text left, visual right */ .hero-split { display: grid; gap: var(--space-12); align-items: center; } @media (min-width: 768px) { .hero-split { grid-template-columns: 1fr 1fr; } .hero-split .hero-content { text-align: left; margin-inline: 0; } .hero-split .hero-actions { justify-content: flex-start; } .hero-split .hero-subtitle { margin-inline: 0; } } /* Section eyebrow label */ .section-eyebrow { display: block; color: var(--brand-primary); margin-bottom: var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; } /* Section main heading */ .section-title { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-4); text-align: center; position: relative; } /* Decorative accent line above section title */ .buddocloud .section-title::before, .ocl .section-title::before { content: ''; display: block; width: 40px; height: 3px; margin: 0 auto var(--space-4); border-radius: 2px; } .buddocloud .section-title::before { background: var(--brand-secondary); /* Gold line for buddocloud */ } .ocl .section-title::before { background: var(--brand-primary); /* Green line for OCL */ } /* Section subtitle / description */ .section-subtitle { font-size: var(--font-size-lg); color: var(--color-text-secondary); max-width: 600px; margin-inline: auto; line-height: 1.6; text-align: center; } /* Left-aligned section header variant */ .section-header-left .section-title, .section-header-left .section-subtitle, .section-header-left .section-eyebrow { text-align: left; margin-inline: 0; } .section-header-left .section-title::before { margin-inline: 0; } /* ============================================================ 06. BADGES & TAGS ============================================================ */ /* Base badge */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; line-height: 1.4; } /* Badge semantic variants */ .badge-primary { background: color-mix(in srgb, var(--brand-primary) 15%, transparent); color: var(--brand-primary); } .badge-secondary { background: color-mix(in srgb, var(--brand-secondary) 15%, transparent); color: var(--brand-secondary); } .badge-success { background: var(--color-bg-success); color: var(--color-status-success); } .badge-error { background: var(--color-bg-error); color: var(--color-status-error); } .badge-warning { background: var(--color-bg-warning); color: var(--color-status-warning); } .badge-info { background: color-mix(in srgb, var(--color-status-info) 15%, transparent); color: var(--color-status-info); } .badge-neutral { background: var(--color-bg-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border-default); } /* Clickable tag (slightly larger than badge, for filtering) */ .tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); white-space: nowrap; cursor: pointer; border: 1px solid var(--color-border-default); color: var(--color-text-secondary); background: transparent; transition: all var(--duration-fast) var(--ease-out); text-decoration: none; } .tag:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 5%, transparent); } .tag.active { background: color-mix(in srgb, var(--brand-primary) 15%, transparent); border-color: var(--brand-primary); color: var(--brand-primary); } /* Horizontal scrolling tag group */ .tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* ============================================================ 07. LOADING STATES ============================================================ */ /* CSS spinner */ .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--color-border-default); border-top-color: var(--brand-primary); border-radius: 50%; animation: spin 600ms linear infinite; flex-shrink: 0; } .spinner-sm { width: 16px; height: 16px; } .spinner-lg { width: 32px; height: 32px; border-width: 3px; } /* Skeleton shimmer animation */ @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton { display: block; background: linear-gradient( 90deg, var(--color-bg-surface) 25%, color-mix(in srgb, var(--color-bg-surface) 80%, white) 50%, var(--color-bg-surface) 75% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-sm); color: transparent; user-select: none; pointer-events: none; } .skeleton-text { height: 1em; margin-bottom: var(--space-2); border-radius: var(--radius-sm); } .skeleton-heading { height: 2em; width: 60%; margin-bottom: var(--space-4); } .skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; } .skeleton-card { height: 200px; border-radius: var(--radius-md); } /* ============================================================ 08. SCROLL-TRIGGERED ANIMATIONS JavaScript sets .is-visible on elements when they enter viewport. Full reduced-motion override at the bottom of this section. ============================================================ */ .animate-fade-in { opacity: 0; transition: opacity var(--duration-deliberate) var(--ease-out); } .animate-slide-up { opacity: 0; transform: translateY(32px); transition: opacity var(--duration-deliberate) var(--ease-out), transform var(--duration-deliberate) var(--ease-out); } .animate-slide-right { opacity: 0; transform: translateX(-32px); transition: opacity var(--duration-deliberate) var(--ease-out), transform var(--duration-deliberate) var(--ease-out); } .animate-scale-in { opacity: 0; transform: scale(0.92); transition: opacity var(--duration-deliberate) var(--ease-out), transform var(--duration-deliberate) var(--ease-out); } .animate-slide-down { opacity: 0; transform: translateY(-20px); transition: opacity var(--duration-deliberate) var(--ease-out), transform var(--duration-deliberate) var(--ease-out); } /* Active state: JS adds .is-visible via IntersectionObserver */ .animate-fade-in.is-visible { opacity: 1; } .animate-slide-up.is-visible { opacity: 1; transform: translateY(0); } .animate-slide-right.is-visible { opacity: 1; transform: translateX(0); } .animate-scale-in.is-visible { opacity: 1; transform: scale(1); } .animate-slide-down.is-visible { opacity: 1; transform: translateY(0); } /* Staggered animation delay utilities */ .delay-100 { transition-delay: 100ms; } .delay-200 { transition-delay: 200ms; } .delay-300 { transition-delay: 300ms; } .delay-400 { transition-delay: 400ms; } .delay-500 { transition-delay: 500ms; } /* REDUCED MOTION: disable all animations & transitions Ensures all elements are immediately visible regardless of .is-visible state. Note: tokens.css also has a reduced-motion block for keyframe animations. This block handles component-specific transitions. */ @media (prefers-reduced-motion: reduce) { .animate-fade-in, .animate-slide-up, .animate-slide-right, .animate-scale-in, .animate-slide-down { opacity: 1; transform: none; transition: none; } .animate-fade-in.is-visible, .animate-slide-up.is-visible, .animate-slide-right.is-visible, .animate-scale-in.is-visible, .animate-slide-down.is-visible { opacity: 1; transform: none; } .delay-100, .delay-200, .delay-300, .delay-400, .delay-500 { transition-delay: 0ms; } .spinner, .btn-loading::after { animation: none; opacity: 0.6; } .skeleton { animation: none; background: var(--color-bg-surface); } .feature-card:hover { transform: none; } } /* ============================================================ 09. BUDDOCLOUD SPECIFICS Dark tech glassmorphism components unique to buddocloud.com. These classes should only be used in buddocloud HTML. ============================================================ */ /* Glassmorphism card */ .glass-card { background: rgba(20, 20, 31, 0.85); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* Glow border hover effect */ .glow-border { border: 1px solid var(--color-border-default); transition: border-color var(--duration-slow) var(--ease-default), box-shadow var(--duration-slow) var(--ease-default); } .glow-border:hover { border-color: rgba(79, 179, 255, 0.30); box-shadow: var(--shadow-glow-blue); } .glow-border.gold:hover { border-color: rgba(255, 184, 0, 0.30); box-shadow: var(--shadow-glow-gold); } /* Terminal / code demo block */ .terminal-block { background: var(--color-terminal-bg, #050508); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border-default); } .terminal-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: rgba(255, 255, 255, 0.03); border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .terminal-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; } .terminal-dot.red { background: #ff5f56; } .terminal-dot.yellow { background: #ffbd2e; } .terminal-dot.green { background: #27c93f; } .terminal-body { padding: var(--space-6); font-family: var(--font-mono); font-size: var(--font-size-sm); line-height: 1.6; color: var(--color-text-primary); } .terminal-line { display: flex; gap: var(--space-3); align-items: flex-start; } .terminal-line + .terminal-line { margin-top: var(--space-2); } .terminal-prompt { color: var(--brand-secondary); user-select: none; } .terminal-cmd { color: var(--brand-primary); } .terminal-output { color: var(--color-terminal-green, #98c379); } .terminal-comment { color: var(--color-terminal-gray, #5c6370); font-style: italic; } /* Feature grid for buddocloud.com features section */ .feature-grid-buddocloud { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); } .feature-card { background: rgba(20, 20, 31, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--space-8); transition: border-color var(--duration-slow) var(--ease-default), box-shadow var(--duration-slow) var(--ease-default), transform var(--duration-slow) var(--ease-default); } .feature-card:hover { border-color: rgba(79, 179, 255, 0.30); box-shadow: var(--shadow-glow-blue); transform: translateY(-4px); } .feature-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(79, 179, 255, 0.08); border-radius: var(--radius-md); color: var(--brand-primary); font-size: var(--font-size-xl); margin-bottom: var(--space-4); flex-shrink: 0; } .feature-card h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--space-2); } .feature-card p { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.6; } /* Horizontal stat strip */ .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-8); padding-block: var(--space-12); } .stat-item { text-align: center; } .stat-number { font-size: var(--font-size-4xl); font-weight: var(--font-weight-extrabold); color: var(--brand-primary); line-height: 1.1; margin-bottom: var(--space-2); } .stat-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; } /* buddocloud CTA / bottom section */ .buddocloud-cta-section { position: relative; background: linear-gradient(180deg, var(--color-bg-surface) 0%, var(--color-bg-page) 100%); padding-block: var(--space-20); text-align: center; overflow: hidden; } .buddocloud-cta-section::before { content: ''; position: absolute; top: 50%; left: 50%; width: 800px; height: 800px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(79, 179, 255, 0.04) 0%, transparent 70%); pointer-events: none; z-index: 0; } .buddocloud-cta-section > * { position: relative; z-index: 1; } /* ============================================================ 10. OCL SPECIFICS Editorial consulting components unique to oclconsulting.com. ============================================================ */ /* Gold decorative rule between sections */ .ocl-section-rule { width: 60px; height: 2px; border: none; border-top: 2px solid var(--brand-secondary); margin: var(--space-6) auto; display: block; } /* Service offering card (left green border accent) */ .service-card { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-left: 4px solid var(--brand-primary); padding: var(--space-8); transition: box-shadow var(--duration-slow) var(--ease-default), transform var(--duration-slow) var(--ease-default); } .service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .service-icon { margin-bottom: var(--space-4); color: var(--brand-primary); } .service-icon svg, .service-icon img { display: block; width: 40px; height: 40px; color: inherit; } .service-title { font-family: Georgia, 'Times New Roman', serif; font-size: var(--font-size-xl); color: var(--color-text-primary); margin: 0 0 var(--space-2) 0; font-weight: var(--font-weight-semibold); } .service-desc { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.75; margin: 0; } /* Editorial testimonial with gold left border */ .ocl-testimonial { margin: 0; padding: 0 0 0 var(--space-8); border-left: 3px solid var(--brand-secondary); position: relative; } .ocl-testimonial::before { content: '\201C'; /* Opening smart quote */ display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 4rem; line-height: 1; color: var(--brand-secondary); margin-bottom: calc(-1 * var(--space-6)); } .ocl-testimonial blockquote { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: var(--font-size-lg); color: var(--color-text-primary); line-height: 1.7; margin: 0; padding: 0; } .testimonial-attribution { font-style: normal; font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--space-4); } /* Hosting pricing table */ .pricing-table { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .pricing-table { grid-template-columns: repeat(3, 1fr); } } .pricing-col { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); padding: var(--space-8); text-align: center; display: flex; flex-direction: column; gap: var(--space-4); } .pricing-col.featured { border-top: 3px solid var(--brand-primary); box-shadow: var(--shadow-md); } .price-amount { font-size: var(--font-size-4xl); font-weight: var(--font-weight-extrabold); color: var(--color-text-primary); line-height: 1.1; margin: 0; } .price-period { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-top: var(--space-1); } /* Team grid (about.html) */ .ocl-about-team { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 768px) { .ocl-about-team { grid-template-columns: repeat(3, 1fr); } } .team-member { text-align: center; } .team-avatar { width: 80px; height: 80px; border-radius: 50%; background: var(--brand-primary); color: var(--color-text-on-brand); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); font-weight: var(--font-weight-bold); font-size: var(--font-size-xl); line-height: 1; text-transform: uppercase; flex-shrink: 0; } .team-name { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--space-1) 0; } .team-role { font-size: var(--font-size-sm); color: var(--color-text-secondary); font-style: italic; margin: 0; } /* Process / methodology numbered steps */ .ocl-process-steps { list-style: none; margin: 0; padding: 0; } .step { display: flex; gap: var(--space-6); position: relative; padding-bottom: var(--space-8); } /* Vertical connector line between steps */ .step::before { content: ''; position: absolute; left: 19px; /* Center of 40px step-number circle */ top: 44px; bottom: 0; width: 2px; background: var(--color-border-subtle); } .step:last-child::before { display: none; } .step-number { width: 40px; height: 40px; border-radius: 50%; background: var(--brand-primary); color: var(--color-text-on-brand); font-weight: var(--font-weight-bold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--font-size-base); line-height: 1; } .step-content { flex: 1; padding-top: var(--space-2); } .step-title { font-family: Georgia, 'Times New Roman', serif; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0 0 var(--space-2) 0; } .step-desc { font-size: var(--font-size-base); color: var(--color-text-secondary); line-height: 1.6; margin: 0; } /* Contact info grid */ .contact-info-block { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .contact-info-block { grid-template-columns: repeat(2, 1fr); } } .contact-method { display: flex; align-items: flex-start; gap: var(--space-3); } .contact-icon { flex-shrink: 0; color: var(--brand-primary); } .contact-icon svg { display: block; width: 24px; height: 24px; color: inherit; } .contact-info-block a { color: var(--brand-primary); text-decoration: none; } .contact-info-block a:hover { text-decoration: underline; } /* Footer columns (OCL has more content in footer) */ .ocl-footer-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } @media (min-width: 640px) { .ocl-footer-cols { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .ocl-footer-cols { grid-template-columns: repeat(4, 1fr); } } .footer-col-heading { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.10em; color: var(--color-text-primary); margin: 0 0 var(--space-4) 0; } /* ============================================================ 11. UTILITY COMPONENTS Shared alerts, tooltips, progress bars, breadcrumbs, avatars. ============================================================ */ /* Alert notification */ .alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); border-left: 4px solid transparent; } .alert-success { border-color: var(--color-status-success); background: var(--color-bg-success); } .alert-error { border-color: var(--color-status-error); background: var(--color-bg-error); } .alert-warning { border-color: var(--color-status-warning); background: var(--color-bg-warning); } .alert-info { border-color: var(--color-status-info); background: rgba(59, 130, 246, 0.08); } .alert-title { font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); color: var(--color-text-primary); } .alert-body { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .alert-dismiss { margin-left: auto; cursor: pointer; opacity: 0.6; color: var(--color-text-primary); flex-shrink: 0; background: none; border: none; padding: 0; line-height: 1; } .alert-dismiss:hover { opacity: 1; } /* CSS-only tooltip */ .tooltip-wrapper { position: relative; display: inline-block; } .tooltip-content { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-bg-inverse); color: var(--color-text-inverse); font-size: var(--font-size-xs); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--duration-base); z-index: var(--z-dropdown); } .tooltip-content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--color-bg-inverse); } .tooltip-wrapper:hover .tooltip-content, .tooltip-wrapper:focus-within .tooltip-content { opacity: 1; } /* Progress bar */ .progress { height: 8px; background: var(--color-bg-surface); border-radius: var(--radius-pill); overflow: hidden; border: 1px solid var(--color-border-subtle); } .progress-fill { height: 100%; background: var(--brand-primary); border-radius: var(--radius-pill); transition: width 300ms var(--ease-out); } .progress-sm { height: 4px; } .progress-lg { height: 12px; } /* Divider with optional centered text */ .divider-text { display: flex; align-items: center; gap: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); } .divider-text::before, .divider-text::after { flex: 1; height: 1px; background: var(--color-border-default); content: ''; } /* Breadcrumb navigation */ .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; padding: 0; margin: 0; } .breadcrumb-item { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .breadcrumb-item.active { color: var(--color-text-primary); } .breadcrumb-sep { color: var(--color-text-muted); } .breadcrumb-item a { color: var(--color-text-secondary); text-decoration: none; transition: color var(--duration-base); } .breadcrumb-item a:hover { color: var(--brand-primary); } /* Inline code */ code:not(pre code) { padding: 0.1em 0.4em; background: var(--color-bg-surface); border-radius: var(--radius-sm); font-size: 0.875em; color: var(--brand-primary); border: 1px solid var(--color-border-subtle); } /* Multi-line code block */ .code-block { background: var(--color-bg-elevated); overflow-x: auto; padding: var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--color-border-default); font-family: var(--font-mono); font-size: var(--font-size-sm); } /* Avatar component */ .avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--color-bg-surface); display: block; flex-shrink: 0; } .avatar-sm { width: 32px; height: 32px; } .avatar-md { width: 40px; height: 40px; } .avatar-lg { width: 56px; height: 56px; } .avatar-xl { width: 80px; height: 80px; } .avatar-initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--brand-primary); color: var(--color-text-on-brand); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); text-transform: uppercase; user-select: none; } .avatar-group { display: flex; align-items: center; } .avatar-group .avatar + .avatar { margin-left: -8px; border: 2px solid var(--color-bg-page); } /* Aspect ratio wrappers */ .aspect-16-9 { aspect-ratio: 16 / 9; overflow: hidden; } .aspect-4-3 { aspect-ratio: 4 / 3; overflow: hidden; } .aspect-1-1 { aspect-ratio: 1 / 1; overflow: hidden; } .aspect-16-9 > *, .aspect-4-3 > *, .aspect-1-1 > * { width: 100%; height: 100%; object-fit: cover; display: block; } /* Back to top button */ .scroll-to-top { position: fixed; bottom: var(--space-8); right: var(--space-8); width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--brand-primary); color: var(--color-text-on-brand); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; z-index: var(--z-dropdown); } .scroll-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .scroll-to-top:hover { background: var(--brand-primary-hover); box-shadow: var(--shadow-lg); } .scroll-to-top:focus-visible { outline: none; box-shadow: var(--focus-ring); }