/* ========== iBizLogic Technologies — Design System ========== Theming: tokens are declared per-theme on [data-theme]. `data-theme` is set on before first paint by the inline script in each page's (localStorage -> OS preference). ============================================================ */ /* ---- Shared (theme-independent) tokens ---- */ :root { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --nav-height: 72px; --control-height: 44px; --max-width: 1200px; --transition: 0.3s cubic-bezier(0.4,0,0.2,1); --theme-transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } /* ---- DARK (default) ---- */ :root, [data-theme="dark"] { color-scheme: dark; --bg-primary: #0a0a1a; --bg-secondary: #0f0f2a; --bg-card: rgba(255,255,255,0.04); --bg-glass: rgba(255,255,255,0.06); --bg-nav: rgba(10,10,26,0.92); --bg-nav-mobile: rgba(10,10,26,0.97); --border-glass: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.14); --text-primary: #f0f0f5; --text-secondary: #a0a0b8; --text-muted: #8f8fa8; --accent-blue: #00d4ff; --accent-violet: #7c3aed; --accent-magenta: #e040fb; --accent-green: #00e68a; --accent-soft: rgba(0,212,255,0.05); --accent-border: rgba(0,212,255,0.2); --gradient-primary: linear-gradient(135deg, #00d4ff, #7c3aed); --gradient-accent: linear-gradient(135deg, #7c3aed, #e040fb); --gradient-hero: linear-gradient(160deg, #0a0a1a 0%, #1a1040 40%, #0d1a3a 70%, #0a0a1a 100%); --gradient-cta: linear-gradient(135deg, rgba(0,212,255,0.05), rgba(124,58,237,0.08)); --shadow-glow: 0 0 30px rgba(0,212,255,0.15); --shadow-card: 0 8px 32px rgba(0,0,0,0.3); --shadow-nav: 0 4px 30px rgba(0,0,0,0.3); --shadow-btn: 0 4px 20px rgba(0,212,255,0.25); --shadow-btn-hover: 0 8px 30px rgba(0,212,255,0.35); --particle-hue: 200; --particle-line: 0,212,255; --particle-alpha: 1; } /* ---- LIGHT ---- */ [data-theme="light"] { color-scheme: light; --bg-primary: #f6f8fc; --bg-secondary: #ffffff; --bg-card: #ffffff; --bg-glass: rgba(255,255,255,0.75); --bg-nav: rgba(255,255,255,0.9); --bg-nav-mobile: rgba(255,255,255,0.97); --border-glass: rgba(15,23,42,0.1); --border-strong: rgba(15,23,42,0.18); --text-primary: #0f172a; --text-secondary: #4b5675; --text-muted: #626c85; --accent-blue: #0369a1; --accent-violet: #6d28d9; --accent-magenta: #b21fb8; --accent-green: #047857; --accent-soft: rgba(3,105,161,0.06); --accent-border: rgba(3,105,161,0.28); --gradient-primary: linear-gradient(135deg, #0284c7, #6d28d9); --gradient-accent: linear-gradient(135deg, #6d28d9, #b21fb8); --gradient-hero: linear-gradient(160deg, #eaf2ff 0%, #e5e5fb 40%, #e8f4ff 70%, #f6f8fc 100%); --gradient-cta: linear-gradient(135deg, rgba(2,132,199,0.07), rgba(109,40,217,0.09)); --shadow-glow: 0 6px 28px rgba(2,132,199,0.16); --shadow-card: 0 8px 28px rgba(15,23,42,0.07); --shadow-nav: 0 4px 24px rgba(15,23,42,0.08); --shadow-btn: 0 4px 18px rgba(2,132,199,0.28); --shadow-btn-hover: 0 8px 26px rgba(2,132,199,0.36); --particle-hue: 210; --particle-line: 2,132,199; --particle-alpha: 1.7; } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top: var(--nav-height); } body { font-family:'Inter',sans-serif; background: var(--bg-primary); color: var(--text-primary); line-height:1.7; overflow-x:hidden; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,h5,h6 { font-family:'Outfit',sans-serif; line-height:1.2; font-weight:700; } h1 { font-size: clamp(2.2rem,5vw,3.8rem); } h2 { font-size: clamp(1.8rem,4vw,2.8rem); } h3 { font-size: clamp(1.2rem,2.5vw,1.5rem); } a { text-decoration:none; color:inherit; transition: var(--transition); } img { max-width:100%; display:block; } ul { list-style:none; } .container { max-width: var(--max-width); margin:0 auto; padding:0 24px; } /* ========== NAVIGATION ========== */ .navbar { position:fixed; top:0; left:0; width:100%; z-index:1000; height: var(--nav-height); display:flex; align-items:center; background: transparent; transition: var(--transition); border-bottom:1px solid transparent; } .navbar.scrolled { background: var(--bg-nav); backdrop-filter:blur(20px); border-bottom-color: var(--border-glass); box-shadow: var(--shadow-nav); } .nav-inner { display:flex; align-items:center; justify-content:space-between; width:100%; max-width: var(--max-width); margin:0 auto; padding:0 24px; } .nav-logo { font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:800; background: var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .nav-logo span { font-weight:400; font-size:0.75em; color: var(--text-secondary); -webkit-text-fill-color: var(--text-secondary); } .nav-links { display:flex; gap:32px; align-items:center; } .nav-links a { font-size:0.9rem; font-weight:500; color: var(--text-secondary); position:relative; padding:4px 0; } .nav-links a::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background: var(--gradient-primary); transition: var(--transition); } .nav-links a:hover, .nav-links a.active { color: var(--text-primary); } .nav-links a:hover::after, .nav-links a.active::after { width:100%; } .nav-cta { padding:10px 24px; border-radius:50px; font-weight:600; font-size:0.85rem; background: var(--gradient-primary); color:#fff; border:none; cursor:pointer; transition: var(--transition); } /* `.nav-links a` outranks `.nav-cta` on specificity, so it was overriding both the colour and the padding — the pill collapsed to `4px 0`. Restate both here. */ .nav-links a.nav-cta, .nav-cta { color:#fff; -webkit-text-fill-color:#fff; display:inline-flex; align-items:center; justify-content:center; height: var(--control-height); padding:0 26px; line-height:1; white-space:nowrap; } .nav-links a.nav-cta::after { display:none; } .nav-cta:hover { transform:translateY(-2px); box-shadow: var(--shadow-glow); } .hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; width:44px; height:44px; align-items:center; justify-content:center; color: var(--text-primary); } .hamburger span { width:24px; height:2px; background: var(--text-primary); transition: var(--transition); border-radius:2px; } .hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); } .hamburger.active span:nth-child(2) { opacity:0; } .hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); } /* ========== HERO ========== */ .hero { min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; background: var(--gradient-hero); padding-top: var(--nav-height); } .hero-bg-canvas { position:absolute; inset:0; z-index:0; } .hero-content { position:relative; z-index:2; text-align:center; max-width:800px; padding:60px 24px; } .hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 20px; border-radius:50px; background: var(--bg-glass); border:1px solid var(--border-glass); font-size:0.8rem; color: var(--accent-blue); margin-bottom:28px; backdrop-filter:blur(10px); } .hero-badge .dot { width:6px; height:6px; border-radius:50%; background: var(--accent-green); animation:pulse 2s infinite; } .hero h1 { margin-bottom:24px; } .gradient-text { background: var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .hero p { font-size:1.15rem; color: var(--text-secondary); max-width:600px; margin:0 auto 36px; } .hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } /* ========== BUTTONS ========== */ .btn { display:inline-flex; align-items:center; gap:8px; padding:14px 32px; border-radius:50px; font-weight:600; font-size:0.9rem; cursor:pointer; border:none; transition: var(--transition); } .btn-primary { background: var(--gradient-primary); color:#fff; box-shadow: var(--shadow-btn); } .btn-primary:hover { transform:translateY(-3px); box-shadow: var(--shadow-btn-hover); } .btn-outline { background:transparent; color: var(--text-primary); border:1px solid var(--border-strong); } .btn-outline:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: var(--accent-soft); } /* ========== SECTIONS ========== */ .section { padding:100px 0; position:relative; } .section-header { text-align:center; max-width:650px; margin:0 auto 64px; } .section-label { display:inline-block; font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:2px; color: var(--accent-blue); margin-bottom:16px; } .section-header h2 { margin-bottom:16px; } .section-header p { color: var(--text-secondary); font-size:1rem; } /* ========== CARDS ========== */ .card { background: var(--bg-card); border:1px solid var(--border-glass); border-radius: var(--radius-lg); padding:36px; backdrop-filter:blur(10px); transition: var(--transition); position:relative; overflow:hidden; } .card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background: var(--gradient-primary); opacity:0; transition: var(--transition); } .card:hover { transform:translateY(-6px); border-color: var(--accent-border); box-shadow: var(--shadow-glow); } .card:hover::before { opacity:1; } .card-icon { width:56px; height:56px; border-radius: var(--radius-md); background: var(--gradient-primary); display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:20px; } .card h3 { margin-bottom:12px; } .card p { color: var(--text-secondary); font-size:0.92rem; } .cards-grid { display:grid; gap:24px; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); } .cards-grid-3 { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); } /* ========== PRODUCT CARDS ========== */ .product-card { background: var(--bg-card); border:1px solid var(--border-glass); border-radius: var(--radius-lg); padding:40px 32px; backdrop-filter:blur(10px); transition: var(--transition); position:relative; overflow:hidden; display:flex; flex-direction:column; } .product-card:hover { transform:translateY(-8px); border-color:var(--accent-border); box-shadow: var(--shadow-glow); } .product-icon { width:64px; height:64px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin-bottom:24px; } .product-card h3 { margin-bottom:12px; font-size:1.3rem; } .product-card p { color:var(--text-secondary); font-size:0.9rem; margin-bottom:20px; flex-grow:1; } .product-features { margin-bottom:24px; } .product-features li { color:var(--text-secondary); font-size:0.85rem; padding:6px 0; padding-left:20px; position:relative; } .product-features li::before { content:'→'; position:absolute; left:0; color:var(--accent-blue); } .product-link { display:inline-flex; align-items:center; gap:8px; color:var(--accent-blue); font-weight:600; font-size:0.9rem; } .product-link:hover { gap:12px; } /* ========== STATS ========== */ .stats-section { background: var(--bg-secondary); border-top:1px solid var(--border-glass); border-bottom:1px solid var(--border-glass); } .stats-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:32px; text-align:center; } .stat-item h3 { font-size: clamp(2rem,4vw,3.2rem); font-weight:800; background: var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .stat-item p { color:var(--text-secondary); font-size:0.9rem; margin-top:8px; } /* ========== ABOUT FEATURES ========== */ .features-alt { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; } .features-alt .feature-text h2 { margin-bottom:20px; } .features-alt .feature-text p { color:var(--text-secondary); margin-bottom:16px; } .feature-visual { background: var(--bg-card); border:1px solid var(--border-glass); border-radius: var(--radius-xl); padding:48px; display:flex; align-items:center; justify-content:center; min-height:360px; position:relative; overflow:hidden; } .feature-visual::after { content:''; position:absolute; width:200px; height:200px; background: var(--gradient-primary); opacity:0.08; border-radius:50%; filter:blur(60px); } /* ========== PROCESS / METHODOLOGY ========== */ .process-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:24px; counter-reset:step; } .process-step { text-align:center; padding:36px 24px; background: var(--bg-card); border:1px solid var(--border-glass); border-radius: var(--radius-lg); position:relative; transition: var(--transition); } .process-step:hover { border-color:var(--accent-border); transform:translateY(-4px); box-shadow: var(--shadow-card); } .step-number { font-family:'Outfit',sans-serif; font-size:2.5rem; font-weight:800; background: var(--gradient-primary); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:16px; display:block; } .process-step h3 { margin-bottom:10px; font-size:1.1rem; } .process-step p { color:var(--text-secondary); font-size:0.85rem; } /* ========== VALUES GRID ========== */ .values-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; } .value-card { padding:36px; background: var(--bg-card); border:1px solid var(--border-glass); border-radius: var(--radius-lg); text-align:center; transition: var(--transition); } .value-card:hover { transform:translateY(-4px); border-color:var(--accent-border); box-shadow: var(--shadow-card); } .value-icon { font-size:2.5rem; margin-bottom:20px; } .value-card h3 { margin-bottom:10px; } .value-card p { color:var(--text-secondary); font-size:0.9rem; } /* ========== CONTACT ========== */ .contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:start; } .contact-info-cards { display:flex; flex-direction:column; gap:20px; } .contact-card { display:flex; gap:20px; align-items:flex-start; padding:28px; background: var(--bg-card); border:1px solid var(--border-glass); border-radius: var(--radius-lg); transition: var(--transition); } .contact-card:hover { border-color:var(--accent-border); box-shadow: var(--shadow-card); } .contact-card-icon { width:48px; height:48px; min-width:48px; border-radius: var(--radius-md); background: var(--gradient-primary); display:flex; align-items:center; justify-content:center; font-size:1.2rem; } .contact-card h4 { margin-bottom:4px; font-size:1rem; } .contact-card p { color:var(--text-secondary); font-size:0.9rem; } .google-form-wrapper { background: var(--bg-card); border:1px solid var(--border-glass); border-radius: var(--radius-lg); overflow:hidden; min-height:600px; } .google-form-wrapper iframe { width:100%; height:700px; border:none; } /* ========== CTA SECTION ========== */ .cta-section { text-align:center; padding:80px 0; background: var(--gradient-cta); border-top:1px solid var(--border-glass); border-bottom:1px solid var(--border-glass); } .cta-section h2 { margin-bottom:16px; } .cta-section p { color:var(--text-secondary); margin-bottom:32px; max-width:500px; margin-left:auto; margin-right:auto; } /* ========== FOOTER ========== */ .footer { padding:64px 0 32px; border-top:1px solid var(--border-glass); background: var(--bg-secondary); } .footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; } .footer-brand p { color:var(--text-secondary); font-size:0.9rem; margin-top:12px; max-width:280px; } .footer-col h4 { font-size:0.85rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-muted); margin-bottom:20px; } .footer-col a { display:block; color:var(--text-secondary); font-size:0.9rem; padding:6px 0; } .footer-col a:hover { color:var(--accent-blue); padding-left:4px; } .footer-bottom { border-top:1px solid var(--border-glass); padding-top:24px; display:flex; justify-content:space-between; align-items:center; color:var(--text-muted); font-size:0.8rem; } .footer-socials { display:flex; gap:16px; } .footer-socials a { width:36px; height:36px; border-radius:50%; border:1px solid var(--border-glass); display:flex; align-items:center; justify-content:center; font-size:0.85rem; color:var(--text-secondary); transition: var(--transition); } .footer-socials a:hover { background:var(--gradient-primary); border-color:transparent; color:#fff; } /* ========== ANIMATIONS ========== */ @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} } @keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-12px);} } @keyframes fadeInUp { from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} } @keyframes gradientShift { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} } .animate-on-scroll { opacity:0; transform:translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .animate-on-scroll.visible { opacity:1; transform:translateY(0); } .animate-delay-1 { transition-delay:0.1s; } .animate-delay-2 { transition-delay:0.2s; } .animate-delay-3 { transition-delay:0.3s; } .animate-delay-4 { transition-delay:0.4s; } .hero-content { animation: fadeInUp 1s ease forwards; } /* ========== PAGE HERO (sub-pages) ========== */ .page-hero { padding: 160px 24px 80px; text-align:center; background: var(--gradient-hero); position:relative; overflow:hidden; } .page-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:120px; background: linear-gradient(to top, var(--bg-primary), transparent); } .page-hero h1 { position:relative; z-index:1; margin-bottom:16px; } .page-hero p { position:relative; z-index:1; color:var(--text-secondary); font-size:1.1rem; max-width:600px; margin:0 auto; } /* ========== RESPONSIVE ========== */ @media(max-width:1024px) { .footer-grid { grid-template-columns:1fr 1fr; } .features-alt { grid-template-columns:1fr; } .process-grid { grid-template-columns:1fr 1fr; } .stats-grid { grid-template-columns:1fr 1fr; } .values-grid { grid-template-columns:1fr 1fr; } .contact-grid { grid-template-columns:1fr; } } @media(max-width:768px) { .nav-links { display:none; position:fixed; top: var(--nav-height); left:0; right:0; background: var(--bg-nav-mobile); backdrop-filter:blur(20px); flex-direction:column; padding:32px 24px; gap:20px; border-bottom:1px solid var(--border-glass); } .nav-links.open { display:flex; } .hamburger { display:flex; } .hero-content { padding:40px 20px; } .cards-grid, .cards-grid-3 { grid-template-columns:1fr; } .process-grid { grid-template-columns:1fr; } .stats-grid { grid-template-columns:1fr 1fr; } .values-grid { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; gap:32px; } .footer-bottom { flex-direction:column; gap:16px; text-align:center; } .section { padding:64px 0; } } /* ========== THEME TOGGLE ========== */ .nav-actions { display:flex; align-items:center; gap:14px; } .theme-toggle { flex:0 0 auto; width: var(--control-height); height: var(--control-height); padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; background: transparent; border:1px solid var(--border-strong); color: var(--text-primary); transition: var(--transition); } .theme-toggle:hover { border-color: var(--accent-blue); color: var(--accent-blue); background: var(--accent-soft); } .theme-toggle:active { transform: scale(0.94); } .theme-toggle:focus-visible { outline:2px solid var(--accent-blue); outline-offset:3px; } .theme-toggle svg { width:19px; height:19px; display:block; } /* show the icon for the theme the click will switch *to* */ [data-theme="dark"] .theme-toggle .icon-moon, [data-theme="light"] .theme-toggle .icon-sun { display:none; } /* ========== SKIP LINK ========== */ .skip-link { position:absolute; left:16px; top:-100px; z-index:2000; padding:12px 20px; border-radius: var(--radius-md); background: var(--bg-secondary); color: var(--text-primary); border:1px solid var(--accent-blue); font-weight:600; font-size:0.9rem; transition: top 0.2s ease; } .skip-link:focus { top:16px; } /* ========== FOCUS VISIBILITY ========== */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline:2px solid var(--accent-blue); outline-offset:3px; border-radius:4px; } /* ========== CONTACT FORM ========== */ .contact-form { padding:36px; display:flex; flex-direction:column; gap:20px; } .contact-form h3 { margin-bottom:4px; } .contact-form .form-intro { color:var(--text-secondary); font-size:0.9rem; margin-top:-12px; } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; } .form-field { display:flex; flex-direction:column; gap:8px; } .form-field label { font-size:0.85rem; font-weight:600; color:var(--text-primary); } .form-field label .req { color:var(--accent-magenta); } .form-field input, .form-field textarea, .form-field select { font-family:'Inter',sans-serif; font-size:0.92rem; padding:13px 16px; border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary); border:1px solid var(--border-strong); transition: var(--transition); width:100%; } .form-field textarea { resize:vertical; min-height:130px; } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-muted); } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--accent-blue); background: var(--bg-secondary); } .form-field .error-msg { font-size:0.78rem; color:#ff5c7a; min-height:1em; } [data-theme="light"] .form-field .error-msg { color:#c0223f; } .form-field.invalid input, .form-field.invalid textarea, .form-field.invalid select { border-color:#ff5c7a; } .form-status { font-size:0.88rem; padding:14px 16px; border-radius: var(--radius-md); background: var(--accent-soft); border:1px solid var(--accent-border); color: var(--text-secondary); } .form-status[hidden] { display:none; } .form-note { font-size:0.78rem; color: var(--text-muted); } /* ========== LIGHT-THEME REFINEMENTS ========== */ [data-theme="light"] .card, [data-theme="light"] .product-card, [data-theme="light"] .value-card, [data-theme="light"] .process-step, [data-theme="light"] .contact-card, [data-theme="light"] .feature-visual, [data-theme="light"] .google-form-wrapper { box-shadow: var(--shadow-card); } [data-theme="light"] .hero-badge { background:#fff; box-shadow: var(--shadow-card); } [data-theme="light"] .footer-socials a:hover { color:#fff; } [data-theme="light"] .card-icon, [data-theme="light"] .contact-card-icon { color:#fff; } /* Smooth theme cross-fade (suppressed during the initial paint) */ body, .navbar, .card, .product-card, .value-card, .process-step, .contact-card, .feature-visual, .footer, .stats-section, .section, .form-field input, .form-field textarea { transition: var(--theme-transition), var(--transition); } .theme-transitions-off, .theme-transitions-off * { transition:none !important; } /* ========== REDUCED MOTION ========== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } .animate-on-scroll { opacity:1 !important; transform:none !important; } } /* Content must stay readable if JavaScript never runs */ .no-js .animate-on-scroll { opacity:1; transform:none; } /* ========== RESPONSIVE (theme toggle) ========== */ @media(max-width:768px) { .nav-actions { gap:12px; } .form-row { grid-template-columns:1fr; } .contact-form { padding:28px 24px; } .page-hero { padding:132px 20px 64px; } } /* Reversed feature row (visual first on desktop, text first when stacked) */ .features-alt-reverse .feature-text { order:2; } .features-alt-reverse .feature-visual { order:1; } @media(max-width:1024px) { .features-alt-reverse .feature-text { order:1; } .features-alt-reverse .feature-visual { order:2; } } /* ========== PRODUCT LOGO ICONS ========== Real brand marks replace the emoji on the iBidLogistics and iBLinq cards. */ .product-icon-logo { background: none; padding: 0; overflow: hidden; } .product-icon-logo img { width: 100%; height: 100%; object-fit: contain; } /* the iBidLogistics mark is cropped tight to its circle, so fill and clip round */ .product-icon-logo.is-round img { object-fit: cover; border-radius: 50%; } /* ========== FAQ ========== Native
/: works without JS and keeps the answer text in the DOM so search and answer engines can read it. */ .faq-section { background: var(--bg-secondary); border-top:1px solid var(--border-glass); border-bottom:1px solid var(--border-glass); } .faq-list { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; } .faq-item { background: var(--bg-card); border:1px solid var(--border-glass); border-radius: var(--radius-lg); overflow:hidden; transition: var(--transition); } .faq-item:hover { border-color: var(--accent-border); } .faq-item[open] { border-color: var(--accent-border); box-shadow: var(--shadow-card); } .faq-item summary { cursor:pointer; list-style:none; padding:22px 56px 22px 26px; position:relative; font-family:'Outfit',sans-serif; font-weight:600; font-size:1.02rem; color: var(--text-primary); } .faq-item summary::-webkit-details-marker { display:none; } .faq-item summary:focus-visible { outline:2px solid var(--accent-blue); outline-offset:-2px; } .faq-item summary::after { content:''; position:absolute; right:26px; top:50%; width:9px; height:9px; margin-top:-6px; border-right:2px solid var(--accent-blue); border-bottom:2px solid var(--accent-blue); transform:rotate(45deg); transition: transform var(--transition); } .faq-item[open] summary::after { transform:rotate(-135deg); margin-top:-2px; } .faq-answer { padding:0 26px 24px; } .faq-answer p { color: var(--text-secondary); font-size:0.94rem; margin:0; } @media(max-width:768px) { .faq-item summary { padding:18px 48px 18px 20px; font-size:0.96rem; } .faq-answer { padding:0 20px 20px; } }