/* * visibility.com.ai — internet.dev Global Design Override * ───────────────────────────────────────────────── * Loaded last in every page's . * Enforces JetBrains Mono, minimal white aesthetic, * zero shadows, zero radii, zero gradients. * Reference: https://internet.dev */ /* ─── FONT: EVERYTHING BECOMES JETBRAINS MONO ──────── */ *, *::before, *::after { font-family: 'JetBrains Mono', 'Courier New', monospace !important; } /* ─── BASE ───────────────────────────────────────────── */ body { background: #FFFFFF !important; color: #111111 !important; font-size: 14px !important; line-height: 1.6 !important; -webkit-font-smoothing: antialiased !important; } /* ─── NUKE ALL BOX-SHADOWS & TEXT-SHADOWS ──────────── */ *, *::before, *::after { box-shadow: none !important; text-shadow: none !important; } /* ─── NUKE ALL BORDER-RADIUS ─────────────────────────── */ *, *::before, *::after { border-radius: 0 !important; } /* ─── NUKE GRADIENT ORBS (hero pseudo-elements) ─────── */ .hero::before, .hero::after, section::before, section::after { background: transparent !important; background-image: none !important; animation: none !important; } /* ─── NUKE ALL BACKGROUND GRADIENTS ─────────────────── */ [class*="gradient"], [class*="orb"], [class*="glow"] { background: transparent !important; background-image: none !important; animation: none !important; } /* ─── NUKE ALL CSS ANIMATIONS ON HERO ───────────────── */ @keyframes orb-drift { 0%,100% { transform: none; } } @keyframes orb-pulse { 0%,100% { opacity: 0; } } /* ─── TYPOGRAPHY ──────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: 'JetBrains Mono', monospace !important; font-weight: 700 !important; color: #111111 !important; letter-spacing: -0.02em !important; } /* ─── NAV: FROM FIXED GLASSMORPHISM → STATIC PLAIN ──── */ nav, #mainNav, header > nav { position: static !important; top: auto !important; width: 100% !important; background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; height: auto !important; padding: 28px 48px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; transition: none !important; z-index: auto !important; } /* Prevent scroll-aware nav from adding styles */ nav.scrolled, #mainNav.scrolled { background: #FFFFFF !important; border-bottom: none !important; } /* ─── LOGO ──────────────────────────────────────────── */ .logo, a.logo, .nav-logo { font-family: 'JetBrains Mono', monospace !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; color: #111111 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 0 !important; } /* Remove colored accent on logo span */ .logo span, a.logo span { color: #111111 !important; } /* ─── NAV LINKS ──────────────────────────────────────── */ .nav-right { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; } .nav-links { display: flex !important; flex-wrap: wrap !important; gap: 0 !important; align-items: center !important; } .nav-links a { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; font-weight: 400 !important; color: #666666 !important; text-decoration: none !important; padding: 6px 10px !important; background: none !important; border: none !important; border-radius: 0 !important; transition: color 120ms ease !important; } .nav-links a:hover, .nav-links a.active { color: #111111 !important; text-decoration: underline !important; background: none !important; } /* ─── NAV CTA ─────────────────────────────────────────── */ .nav-cta, a.nav-cta { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; font-weight: 500 !important; color: #111111 !important; background: none !important; border: 1px solid #111111 !important; padding: 7px 16px !important; text-decoration: none !important; letter-spacing: 0 !important; display: inline-block !important; transition: background 120ms ease, color 120ms ease !important; transform: none !important; } .nav-cta:hover, a.nav-cta:hover { background: #111111 !important; color: #FFFFFF !important; text-decoration: none !important; transform: none !important; } /* ─── HERO / PAGE HERO: FIX PADDING (was for fixed nav) ─ */ .hero, section.hero, .page-hero, .page-header, .article-wrapper, [class*="page-hero"] { min-height: auto !important; padding-top: 80px !important; padding-bottom: 80px !important; } html { scroll-padding-top: 0 !important; } /* ─── HERO BACKGROUND ─────────────────────────────────── */ .hero { background: #FFFFFF !important; background-image: none !important; overflow: visible !important; } /* ─── HERO BADGE (pill → plain text) ─────────────────── */ .hero-badge, [class*="badge"] { background: none !important; border: 1px solid #CCCCCC !important; color: #666666 !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.1em !important; padding: 3px 8px !important; } /* ─── SECTION BACKGROUNDS ─────────────────────────────── */ /* Off-white sections → pure white */ .section-alt, .bg-alt { background: #FFFFFF !important; } /* Explicitly dark sections — keep them dark, remove gradients */ .section-dark, .shift, #shift, .shift-section, .close-section, [class*="dark-section"], [class*="section--dark"] { background: #111111 !important; background-image: none !important; } /* Remove gradient orbs from dark sections */ .shift-section::before, .shift-section::after, .close-section::before, .close-section::after { background: transparent !important; background-image: none !important; } /* Dark section text inherits white */ .section-dark *, .shift *, #shift *, .shift-section *, .close-section * { color: inherit !important; } /* ─── CARDS ───────────────────────────────────────────── */ .card, [class*="-card"], [class*="card-"], [class*="tier"], [class*="pricing-"], [class*="service-"], [class*="feature-"] { background: #FFFFFF !important; border: 1px solid #E0E0E0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ─── BUTTONS (global) ────────────────────────────────── */ button, .btn, [class*="btn-"], [class*="-btn"], input[type="submit"], input[type="button"], input[type="reset"] { font-family: 'JetBrains Mono', monospace !important; border-radius: 0 !important; box-shadow: none !important; transition: background 120ms ease, color 120ms ease, border-color 120ms ease !important; transform: none !important; letter-spacing: 0 !important; } button:hover, .btn:hover, [class*="btn-"]:hover, [class*="-btn"]:hover { transform: none !important; } /* Primary/submit buttons */ .btn-primary, button[type="submit"], input[type="submit"], [class*="submit"], [class*="check-btn"], [class*="cta-btn"] { background: #111111 !important; color: #FFFFFF !important; border: 1px solid #111111 !important; font-weight: 500 !important; } .btn-primary:hover, button[type="submit"]:hover, input[type="submit"]:hover { background: #FFFFFF !important; color: #111111 !important; } /* ─── FORMS ───────────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="search"], input[type="tel"], textarea, select { font-family: 'JetBrains Mono', monospace !important; border-radius: 0 !important; box-shadow: none !important; border: 1px solid #CCCCCC !important; background: #FFFFFF !important; color: #111111 !important; font-size: 13px !important; outline: none !important; } input:focus, input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus { outline: 2px solid #111111 !important; outline-offset: -1px !important; border-color: #111111 !important; box-shadow: none !important; } /* ─── LINKS ───────────────────────────────────────────── */ a:not(.logo):not(.nav-cta):not(.nav-links a):not(nav a):not(footer a):hover { text-decoration: underline !important; } /* ─── ACCORDIONS ──────────────────────────────────────── */ [class*="accordion"], [class*="faq-item"], details { border-radius: 0 !important; } /* Accordion toggle — minimum 44px tap target */ [class*="accordion-header"], [class*="faq-q"], summary { min-height: 44px !important; display: flex !important; align-items: center !important; cursor: pointer !important; } /* ─── FOOTER ──────────────────────────────────────────── */ footer { background: #FFFFFF !important; border-top: 1px solid #E0E0E0 !important; padding-top: 80px !important; padding-bottom: 40px !important; margin-top: 80px !important; } /* Multi-column footer → single line */ .footer-grid { display: flex !important; flex-direction: column !important; gap: 0 !important; } /* Hide multi-column sections */ .footer-brand, .footer-col { display: none !important; } /* Show only footer-bottom */ .footer-bottom { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; } .footer-bottom p { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; color: #666666 !important; margin: 0 !important; } /* Hide second paragraph in footer-bottom */ .footer-bottom p:last-child { display: none !important; } /* Simple footer used in most pages */ .footer-inner { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 16px !important; } .foot-logo, .footer-inner .foot-logo { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; font-weight: 700 !important; color: #666666 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .foot-logo span, .footer-inner .foot-logo span { color: #666666 !important; } .foot-links { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; align-items: center !important; } .foot-links a { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; color: #666666 !important; text-decoration: none !important; padding: 2px 6px !important; } .foot-links a:hover { color: #111111 !important; text-decoration: underline !important; } .foot-right { font-family: 'JetBrains Mono', monospace !important; font-size: 13px !important; color: #666666 !important; } /* ─── SCROLL ANIMATIONS: keep but faster ─────────────── */ .fade-up { opacity: 0; transform: translateY(8px); transition: opacity 120ms ease, transform 120ms ease !important; } .fade-up.visible { opacity: 1 !important; transform: none !important; } /* ─── SCORE / PLATFORM CARDS ─────────────────────────── */ .score-card, .platform-card, [class*="score-"], [class*="platform-"] { border: 1px solid #E0E0E0 !important; background: #FFFFFF !important; } /* ─── PROGRESS BARS ──────────────────────────────────── */ [class*="progress-bar"], [class*="progress-fill"] { border-radius: 0 !important; background: #111111 !important; } [class*="progress-track"], [class*="progress-bg"] { border-radius: 0 !important; background: #EEEEEE !important; } /* ─── TESTIMONIAL AVATARS ─────────────────────────────── */ .testimonial-avatar, [class*="avatar"] { border-radius: 0 !important; background: #F0F0F0 !important; border: 1px solid #CCCCCC !important; } /* ─── STATS / METRICS ────────────────────────────────── */ [class*="stat-"], [class*="-stat"], .metric { background: none !important; border: 1px solid #E0E0E0 !important; } /* ─── PLATFORM PILLS / STATUS BADGES ─────────────────── */ .pill, [class*="-pill"], [class*="pill-"], .status, [class*="-badge"], [class*="badge-"], [class*="-tag"], [class*="tag-"] { background: none !important; border: 1px solid #CCCCCC !important; color: #666666 !important; padding: 2px 8px !important; font-size: 11px !important; font-weight: 400 !important; } /* ─── MOBILE: 375px ──────────────────────────────────── */ @media (max-width: 768px) { /* Nav stacks */ nav, #mainNav { padding: 16px 20px !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } .nav-right { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; width: 100% !important; } .nav-links { gap: 0 !important; flex-wrap: wrap !important; } .nav-links a { padding: 8px 8px !important; min-height: 40px !important; display: inline-flex !important; align-items: center !important; font-size: 12px !important; } .nav-cta, a.nav-cta { width: auto !important; font-size: 12px !important; padding: 6px 12px !important; } /* Content padding */ .container { padding: 0 16px !important; } /* Body font */ body { font-size: 13px !important; } /* Headings */ h1 { font-size: 22px !important; } h2 { font-size: 18px !important; } h3 { font-size: 15px !important; } /* Hero */ .hero { padding-top: 40px !important; padding-bottom: 60px !important; } .hero-inner { grid-template-columns: 1fr !important; gap: 40px !important; } /* Tables: horizontal scroll */ table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; max-width: 100% !important; } /* Footer */ footer { padding-top: 40px !important; margin-top: 40px !important; } .footer-inner { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; } .foot-links { gap: 0 !important; flex-direction: column !important; align-items: flex-start !important; } .foot-links a { padding: 4px 0 !important; min-height: 32px !important; display: flex !important; align-items: center !important; } /* Form inputs full-width on mobile */ input[type="text"], input[type="email"], input[type="url"], select, textarea { width: 100% !important; font-size: 16px !important; /* prevents iOS zoom */ } button[type="submit"], input[type="submit"], .btn-primary, [class*="check-btn"] { width: 100% !important; } /* Grid → single column on mobile */ .hero-inner, [class*="-grid"], [class*="grid-"] { grid-template-columns: 1fr !important; gap: 24px !important; } /* ─── CALENDAR GRID: preserve 7-column layout ─────────────── */ /* [class*="grid-"] matches .calendar-grid (contains "grid-") */ /* Override the collapse-to-1-column rule for the booking calendar */ .calendar-grid { grid-template-columns: repeat(7, 1fr) !important; } } @media (max-width: 480px) { .container { padding: 0 16px !important; } .nav-links a { font-size: 11px !important; padding: 6px 6px !important; } }