/* ===================== Cerbi Aurora Theme (Deep Blue + Hot Orange) ===================== */ :root{ --bg:#0a1224; --panel:#0d1325; --panel-2:#0f1a33; --text:#e9edf6; --text-strong:#ffffff; --muted:#a7b4cf; --accent:#ff4d00; /* logo hot orange */ --accent-2:#ff8a00; --link:#ff6b2b; --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444; --ring:rgba(255,77,0,.35); --shadow:0 18px 44px rgba(2,10,35,.45); --radius:16px; --glass:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); --tile-opacity:.06; --tile-size:26px; --bg-start:#08122a; --bg-end:#0f1d3a; --lift:translateY(-4px); --fast:.18s; --easing:cubic-bezier(.2,.7,.2,1); --mx:50vw; --my:50vh; } /* ===================== Light Theme ===================== */ [data-theme="light"]{ --bg: #f7fafc; --panel:#ffffff; --panel-2:#f6f8fc; --text:#101828; --text-strong:#0b1530; --muted:#475467; --accent:#ff4d00; --accent-2:#ff9a2a; --link:#ff5a1a; --ring:rgba(255,90,26,.25); --glass:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.78)); --shadow:0 10px 30px rgba(10,20,60,.12); --surface:#ffffff; --line: rgba(16,24,40,0.10); --glass-bg: rgba(255,255,255,0.86); --glass-border: rgba(16,24,40,0.08); --chip-bg:#eef2f7; --chip-text:#182230; --kbd-bg:#eef2f7; --kbd-text:#101828; --pill-bg:#eef2f7; --pill-text:#182230; --shadow-sm:0 8px 30px rgba(2,10,24,0.06); /* page gradient tokens used by */ --bg-start:#ffffff; --bg-end:#f6f8fc; /* lighter tile density on light */ --tile-opacity:.04; } /* ===================== Base ===================== */ *{box-sizing:border-box} html,body{height:100%} html{ min-height:100%; background: radial-gradient(1200px 700px at 75% -10%, rgba(80,120,255,.12), transparent 45%), radial-gradient(900px 600px at -10% 20%, rgba(100,160,255,.10), transparent 50%), linear-gradient(to bottom, var(--bg-start) 0%, var(--bg-end) 100%); background-attachment: fixed, fixed, fixed; background-repeat:no-repeat,no-repeat,no-repeat; } @supports (-webkit-touch-callout: none) and (not (translate: none)) { html{ background-attachment: scroll, scroll, scroll; } } body{ margin:0; -webkit-font-smoothing:antialiased; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color:var(--text); line-height:1.65; background:inherit; scroll-behavior:smooth; letter-spacing:.1px; } a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline} .container{width:min(1180px,92vw);margin:0 auto} h1,h2,h3{color:var(--text-strong);margin:0 0 10px;line-height:1.22} h1{font-size:clamp(34px,5.4vw,56px)} h2{font-size:clamp(24px,3.6vw,34px)} h3{font-size:clamp(18px,2.2vw,22px)} .eyebrow{font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-size:12px;margin-bottom:6px} .lead{color:var(--text);opacity:.92;font-size:clamp(16px,2.2vw,19px);max-width:900px} .muted{color:var(--muted)} .k{color:var(--muted)} .codeblock{background:rgba(10,18,36,.65);border:1px solid rgba(127,148,179,.22);padding:14px;border-radius:12px;overflow:auto} [data-theme="light"] .codeblock{background:rgba(0,0,0,.04)} /* ===================== Layers ===================== */ .tiles{position:fixed;inset:0;pointer-events:none;z-index:-5;opacity:1} .tiles::before{content:"";position:absolute;inset:0;opacity:var(--tile-opacity); background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)); background-size: var(--tile-size) var(--tile-size), 100% 100%; mix-blend-mode: soft-light; } .tiles::after{content:"";position:absolute;inset:0;opacity:calc(var(--tile-opacity) * .8); background-image: linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: var(--tile-size) var(--tile-size); mask-image: radial-gradient(60% 50% at 50% 20%, black 30%, transparent 100%); } .sky{position:fixed;inset:0;z-index:-4;display:block} .veil{ position: fixed; inset: 0; z-index: -3; pointer-events: none; background: center / cover no-repeat; background-position: 70% 20%; mix-blend-mode: screen; filter: contrast(1.1) saturate(1.05) brightness(0.95); opacity:.8; } [data-theme="light"] .veil{ opacity:.06; mix-blend-mode: normal; filter:none } @supports (background-image: image-set(url("x") 1x)){ .veil{ background-image: image-set( url("assets/nebula-3840.jpg") 3x, url("assets/nebula-2560.jpg") 2x, url("assets/nebula-1920.jpg") 1x );} } /* Random bottom illustration */ .bg-illustration{ position:fixed; left:0; right:0; bottom:0; height:min(55vh, 720px); background: var(--bg-illustration, none) bottom center / cover no-repeat; pointer-events:none; z-index:-1; opacity:0; transition:opacity .6s var(--easing); } .bg-illustration.show{ opacity:.9 } [data-theme="light"] .bg-illustration{ opacity:.75 } /* Spotlight */ .spotlight{position:fixed;inset:0;pointer-events:none;z-index:-2; background: radial-gradient(450px 450px at var(--mx) var(--my), rgba(100,160,255,.12), transparent 60%); transition: background .12s linear; } /* ===================== Components ===================== */ .glass{background:var(--glass);border:1px solid rgba(127,148,179,.18);border-radius:var(--radius);box-shadow:var(--shadow)} .btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;padding:12px 16px;border-radius:12px;border:1px solid rgba(127,148,179,.25);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));color:var(--text)} .btn-primary{background:linear-gradient(180deg,rgba(255,77,0,.18),rgba(255,77,0,.08));border-color:rgba(255,77,0,.45); color:#fff} .btn-ghost{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0))} .chip{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid rgba(127,148,179,.25);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); font-size:13px} .pill{padding:4px 8px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em} .pill.ok{background:rgba(34,197,94,.14);color:#4ade80;border:1px solid rgba(34,197,94,.35)} .pill.beta{background:rgba(245,158,11,.14);color:#fbbf24;border:1px solid rgba(245,158,11,.35)} .pill.planned{background:rgba(100,160,255,.14);color:#b3ceff;border:1px solid rgba(100,160,255,.35)} .kbd{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:6px;border:1px solid rgba(127,148,179,.35)} .tag{display:inline-block;padding:6px 10px;border:1px solid rgba(127,148,179,.25);border-radius:999px;font-size:12px;color:var(--muted)} /* Ribbon */ .ribbon{background:linear-gradient(90deg, rgba(100,160,255,.25), rgba(50,120,255,.15)); border-bottom:1px solid rgba(127,148,179,.18)} .ribbon .container{display:flex;gap:10px;align-items:center;justify-content:center;padding:8px 0;font-size:14px;color:var(--muted)} /* Dark mode: make the top ribbon pop */ [data-theme="dark"] .ribbon{ position: relative; z-index: 70; background: linear-gradient(90deg, rgba(255,77,0,.16) 0%, rgba(255,138,0,.12) 22%, rgba(96,140,255,.18) 60%, rgba(62,110,220,.16) 100%), rgba(8,12,20,.72); border-bottom: 1px solid rgba(255,77,0,.32); box-shadow: 0 8px 28px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,77,0,.18); } [data-theme="dark"] .ribbon .container{ color: #eaf2ff; text-shadow: 0 0 10px rgba(100,160,255,.25); } [data-theme="dark"] .ribbon::before{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.7; filter: blur(.4px); } [data-theme="dark"] .ribbon::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(620px 140px at 60% 50%, rgba(255,77,0,.10), transparent 60%); opacity:.55; } /* Stronger, simpler beta ribbon */ .ribbon-beta{ background: linear-gradient(90deg, rgba(255,77,0,.18), rgba(255,77,0,.08)), radial-gradient(60% 140% at 85% 0%, rgba(100,160,255,.18), transparent 60%); border-bottom: 1px solid rgba(255,77,0,.28); } [data-theme="light"] .ribbon-beta{ background: linear-gradient(90deg, rgba(255,77,0,.08), rgba(255,77,0,.04)), radial-gradient(60% 140% at 85% 0%, rgba(100,160,255,.10), transparent 60%); border-bottom-color: rgba(16,24,40,.10); } .ribbon-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; font-size:14px; color:var(--text);} .rb-copy{ color:var(--text); opacity:.95 } .rb-ctas{ display:flex; gap:8px; flex-wrap:wrap } .btn-sm{ padding:8px 12px; border-radius:10px; font-size:13px } /* Nav */ .nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(180%) blur(8px);background:rgba(10,18,36,.82);border-bottom:1px solid rgba(127,148,179,.18)} [data-theme="light"] .nav{background:rgba(255,255,255,.94)} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0} .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px;color:var(--text-strong)} .nav-links{display:flex;gap:14px;flex-wrap:wrap} .nav-links a{color:var(--text);opacity:.9;padding:8px 10px;border-radius:10px} .nav-links a:hover{opacity:1;background:rgba(255,255,255,.05);text-decoration:none} .theme-toggle{ -webkit-appearance:none; appearance:none; display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; border:1px solid rgba(127,148,179,.25); background: rgba(255,255,255,.08); color: var(--text); font-weight:600; box-shadow: inset 0 0 0 9999px rgba(12,18,36,.12); cursor:pointer; } .theme-toggle:hover{ background: rgba(255,255,255,.12); text-decoration:none } [data-theme="light"] .theme-toggle{ background:#fff; color:#101828; border-color: var(--glass-border); box-shadow:none } .mobile-only{display:none} #progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0%;z-index:60} /* Hero */ .hero{padding:82px 0 30px;text-align:center;position:relative;overflow:hidden} .hero h1{ text-shadow:0 0 18px rgba(100,160,255,.25)} .sub{font-size:clamp(16px,2.4vw,20px);color:var(--text);opacity:.92;max-width:900px;margin:0 auto 22px} .chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px} .hero-bg{position:absolute;inset:-10% -10% auto -10%;height:120%;pointer-events:none;opacity:.55;filter:blur(1px) saturate(120%);transform:translateZ(0)} /* Grid / layout */ .grid{display:grid;gap:22px;grid-template-columns:repeat(12,1fr)} .col-12{grid-column:span 12} .col-6{grid-column:span 6} .col-4{grid-column:span 4} @media (max-width:900px){.col-6,.col-4{grid-column:span 12}} .section{padding:54px 0} .section h2{margin-bottom:6px} .space{height:16px} /* Cards */ .card{padding:18px;border-radius:18px;background:linear-gradient(180deg, rgba(16,28,48,.72), rgba(16,28,48,.5));border:1px solid rgba(127,148,179,.18);position:relative;overflow:hidden; transition:transform var(--fast) var(--easing), box-shadow .22s var(--easing)} .card:hover{transform:var(--lift); box-shadow:0 12px 30px rgba(100,160,255,.18)} .card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px} .badges img{margin-right:6px} .list{margin:10px 0 0 16px} .list li{margin:6px 0} /* Tilt glare */ .tilt{transform-style:preserve-3d} .tilt .glare{position:absolute;inset:-2px;border-radius:inherit;background:radial-gradient(400px 200px at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.25), transparent 50%);mix-blend-mode:soft-light;pointer-events:none;opacity:.0;transition:opacity .2s} .tilt:hover .glare{opacity:.35} /* Frames */ .img-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;border:1px solid rgba(127,148,179,.25);overflow:hidden;background: radial-gradient(120% 100% at 100% 0%, rgba(100,160,255,.12), transparent 60%), rgba(12,17,24,0.55)} .img-frame img{width:100%;height:100%;object-fit:cover;display:block} .img-cap{font-size:12px;color:var(--muted);margin-top:8px;text-align:center} [data-theme="light"] .img-frame{ border-color: var(--glass-border); background: radial-gradient(120% 100% at 100% 0%, rgba(16,24,40,.06), transparent 60%), #fff; } /* Why page gallery */ .dash-gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;width:100%;height:100%;padding:10px} .dash-shot{display:block;width:100%;height:100%;border-radius:14px;border:1px solid rgba(127,148,179,.22);background:rgba(255,255,255,.02);overflow:hidden;transition:transform .25s ease, box-shadow .25s ease} .dash-shot:hover{transform:translateY(-2px); box-shadow:0 14px 40px rgba(10,20,40,.25)} .dash-shot img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:900px){.dash-gallery{grid-template-columns:1fr}} /* Enterprise tiles (edge-to-edge) */ .enterprise-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-radius:18px; overflow:hidden; position:relative; min-height:260px; } .enterprise-item{ position:relative; display:block; height:100%; isolation:isolate; outline:none; } .enterprise-item img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.02) saturate(1.02) brightness(.95); transition:transform .35s var(--easing), filter .35s var(--easing), opacity .35s var(--easing); } .enterprise-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.38), rgba(0,0,0,0) 45%); pointer-events:none; z-index:1; opacity:.8; } .enterprise-item .label{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:2; background:rgba(10,18,36,.6); border:1px solid rgba(255,77,0,.45); color:var(--accent); padding:8px 14px; border-radius:999px; font-weight:700; text-shadow:0 0 12px rgba(255,77,0,.35); backdrop-filter:saturate(160%) blur(6px); } .enterprise-strip:hover .enterprise-item img{ opacity:.6; filter:brightness(.85) } .enterprise-item:hover img, .enterprise-item:focus-visible img{ transform:scale(1.08); opacity:1; filter:contrast(1.08) saturate(1.05) brightness(1.0); } @media (max-width:900px){ .enterprise-strip{ grid-template-columns:1fr 1fr } } /* Slider */ .dash-slider{ position:relative; width:100%; height:100%;} .dash-slider .slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s var(--easing); } .dash-slider .slide.active{ opacity:1 } .dash-slider img{ width:100%; height:100%; object-fit:cover; } .dash-slider .dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; gap:8px; justify-content:center; z-index:3 } .dash-slider .dots button{ width:8px; height:8px; border-radius:999px; border:0; background:rgba(255,255,255,.35); cursor:pointer; } .dash-slider .dots button.active{ background:var(--accent); box-shadow:0 0 12px rgba(255,77,0,.35) } [data-theme="light"] .dash-slider .dots button{ background: rgba(16,24,40,.25) } /* Tables */ .table{width:100%;border-collapse:separate;border-spacing:0 8px} .table thead th{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 10px} .table tbody tr{background:rgba(255,255,255,.04);border:1px solid rgba(127,148,179,.18)} .table tbody td{padding:10px 12px;border-bottom:1px solid rgba(127,148,179,.12)} [data-theme="light"] .table tbody tr{background:rgba(0,0,0,.03)} /* Governance demo */ .switch{width:38px;height:22px;border-radius:999px;background:#24334f;border:1px solid rgba(127,148,179,.35);position:relative;cursor:pointer} .switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s var(--easing)} .switch[aria-checked="true"]{background:linear-gradient(90deg,#3b82f6,#06b6d4)} .switch[aria-checked="true"]::after{transform:translateX(16px)} .demo{display:grid;grid-template-columns:1fr 1fr;gap:12px} .pane{border:1px solid rgba(127,148,179,.22);border-radius:12px;background:rgba(255,255,255,.03);padding:10px} .pane pre{margin:0;max-height:280px;overflow:auto} /* Footer */ .footer{padding:40px 0;color:var(--muted);font-size:14px;border-top:1px solid rgba(127,148,179,.18);margin-top:32px} /* Reveal */ .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s var(--easing), transform .6s var(--easing)} .reveal.in{opacity:1;transform:none} /* Mobile */ @media (max-width: 820px){ .container{width:min(1100px,94vw)} .nav-inner{gap:10px} .brand img{height:30px} .nav-links{ position: absolute; top: 64px; right: 12px; left: 12px; display: none; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid rgba(127,148,179,.25); box-shadow: var(--shadow); } .nav-links.open{display:flex} .mobile-only{display:inline-flex} .nav a{padding:10px 12px} .hero{padding:62px 0 16px} .grid{grid-template-columns: 1fr} } /* XS */ @media (max-width: 360px){ .hero h1{font-size:clamp(28px, 9vw, 40px)} .sub{font-size:clamp(14px, 3.6vw, 18px)} } /* === Accent keywords inside headings === */ .hot{ color: var(--accent); text-shadow: 0 0 10px rgba(255,77,0,.25) } [data-theme="light"] .hot{ color: var(--accent); text-shadow: none } /* === Full-bleed pop-art section === */ .full-bleed{ padding:0 } .full-bleed .container{ width:min(1200px,92vw) } .popart{ position: relative; width: 100vw; margin-left: calc(50% - 50vw); min-height: clamp(360px, 54vh, 720px); background: radial-gradient(120% 80% at 70% 0%, rgba(255,77,0,.12), transparent 60%), rgba(8,12,20,.6); overflow: hidden; border-top: 1px solid rgba(127,148,179,.18); border-bottom: 1px solid rgba(127,148,179,.18); } .popart-stage{ position:absolute; inset:0 } .popart-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity .8s ease; filter: contrast(1.05) saturate(1.05); } .popart-slide.active{ opacity:1 } .popart-overlay{ position: relative; z-index: 1; padding: clamp(18px, 4vw, 36px) 0 } .popart-title{ font-size: clamp(24px, 4.6vw, 40px); margin: 6px 0 10px } /* Light theme readability */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3{ color:#0b1220 } [data-theme="light"] .hero h1{ -webkit-text-fill-color: initial; color:#0b1220; text-shadow:none } [data-theme="light"] .hero .hero-bg{ opacity:.24; filter: blur(.5px) saturate(1.05) } [data-theme="light"] .tiles{ opacity: .08 } [data-theme="light"] .sky{ opacity: .06 } /* === Signature Art rotator === */ .sig-rotator{ position:relative; width:100%; aspect-ratio:16/9; border-radius:16px; overflow:hidden; border:1px solid rgba(127,148,179,.22); background:radial-gradient(100% 120% at 50% 0%, rgba(50,133,255,.06), rgba(12,22,38,.6)); box-shadow: var(--shadow); } .sig-rotator img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .85s var(--easing); filter: contrast(1.08) saturate(1.08); will-change: opacity, transform; } .sig-rotator img.show{ opacity:1; animation: sigZoom 6s ease-in-out both } .sig-rotator:hover img.show{ animation-play-state: paused } @keyframes sigZoom{ 0%{ transform: scale(1.06) translate3d(0,0,0) } 100%{ transform: scale(1.00) translate3d(0,-1.5%,0) } } @keyframes sigPanLeft{ 0%{ transform: scale(1.06) translateX(1.5%) } 100%{ transform: scale(1.00) translateX(-1.5%) } } @keyframes sigPanRight{0%{ transform: scale(1.06) translateX(-1.5%) } 100%{ transform: scale(1.00) translateX(1.5%) } } @keyframes sigTiltIn{ 0%{ transform: scale(1.05) rotate(-.35deg) translateY(0.6%) } 100%{ transform: scale(1.00) rotate(.35deg) translateY(-0.6%) } } @keyframes sigDriftUp{ 0%{ transform: scale(1.05) translateY(1.8%) } 100%{ transform: scale(1.00) translateY(-1.8%) } } @keyframes sigDriftDown{0%{ transform: scale(1.05) translateY(-1.2%) } 100%{ transform: scale(1.00) translateY(1.2%) } } /* ---------- Command palette ---------- */ /* Base (dark) */ .cmdk-overlay{position:fixed;inset:0;display:none;background:rgba(2,10,24,.6);backdrop-filter:saturate(150%) blur(2px);z-index:1200} .cmdk-overlay.open{display:block} .cmdk{width:min(720px,92vw);margin:10vh auto;background:var(--panel);color:var(--text);border:1px solid rgba(127,148,179,.22);border-radius:14px;box-shadow:var(--shadow)} .cmdk .header{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(127,148,179,.18)} .cmdk .header input{flex:1;border:0;background:transparent;color:var(--text);outline:none;font-size:14px} .cmdk .list{max-height:360px;overflow:auto} .cmdk .list .item{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid rgba(127,148,179,.08);cursor:pointer} .cmdk .list .item:hover{background:rgba(255,255,255,.06)} /* Light overrides */ [data-theme="light"] .cmdk{background:#fff;color:var(--text);border:1px solid var(--glass-border);box-shadow:0 18px 60px rgba(2,10,24,.12)} [data-theme="light"] .cmdk .header input{color:var(--text)} [data-theme="light"] .cmdk .list .item:hover{background:#f2f4f7} /* Buttons (light specifics) */ [data-theme="light"] .btn-primary{ background: var(--accent); border-color: transparent; color:#fff } [data-theme="light"] .btn-ghost{ color: var(--text); border-color: var(--glass-border) } /* === Floating Contact Button (FAB) === */ .contact-fab{ --fab-size: 56px; --fab-side: 18px; position: fixed; z-index: 9999; /* be above everything */ right: max(var(--fab-side), env(safe-area-inset-right)); top: 50%; transform: translateY(-50%) translateZ(0); /* iOS paint fix */ width: var(--fab-size); height: var(--fab-size); display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--glass); border: 1px solid rgba(127,148,179,.22); box-shadow: var(--shadow); backdrop-filter: saturate(160%) blur(6px); -webkit-backdrop-filter: saturate(160%) blur(6px); /* iOS */ text-decoration: none; transition: transform .18s var(--easing), box-shadow .2s var(--easing), opacity .2s ease; pointer-events: auto; /* ensure clickable even over canvases */ } .contact-fab img{ width: 70%; height: 70%; object-fit: contain; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.18)); } /* Hover/focus */ .contact-fab:hover, .contact-fab:focus-visible{ transform: translateY(-50%) translateZ(0) scale(1.04); box-shadow: 0 18px 48px rgba(10,20,40,.28); outline: none; } /* Label bubble */ .contact-fab .label{ position: absolute; right: calc(100% + 10px); white-space: nowrap; font-weight: 700; font-size: 12px; letter-spacing: .02em; color: var(--text); padding: 6px 10px; border-radius: 999px; background: var(--glass); border: 1px solid rgba(127,148,179,.22); box-shadow: var(--shadow); opacity: 0; transform: translateX(6px); transition: opacity .18s var(--easing), transform .18s var(--easing); pointer-events: none; } .contact-fab:hover .label, .contact-fab:focus-visible .label{ opacity:1; transform: translateX(0) } /* --- Hero overlay fix --- */ .hero .value-rotator, .hero .cta-bar, .hero .row[style*="justify-content:center"] { position: static !important; /* no absolute/sticky floating */ transform: none !important; left: auto !important; top: auto !important; z-index: 1; /* above background, below next cards */ margin-bottom: 14px; /* give it breathing room */ } /* make the following blocks establish their own stacking context */ .hero .glass, .hero .logo-row, #hero-art { position: relative; z-index: 0; } /* small screens: a bit more spacing so nothing kisses */ @media (max-width: 900px){ .hero .value-rotator, .hero .cta-bar, .hero .row[style*="justify-content:center"] { margin-bottom: 18px; } } /* Light tune */ [data-theme="light"] .contact-fab{ border-color: var(--glass-border) } [data-theme="light"] .contact-fab .label{ border-color: var(--glass-border) } /* Mobile: pin to bottom-right, avoid notch / Safari UI */ @media (max-width: 900px){ .contact-fab{ --fab-size: 48px; top: auto; transform: none; bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px)); right: max(16px, calc(env(safe-area-inset-right) + 12px)); } .contact-fab .label{ display: none } /* minimal on mobile */ } /* Hidden state (when contact section is visible on desktop only) */ .contact-fab.is-hidden{ opacity: 0; pointer-events:none; transform: translateY(-50%) translateZ(0) scale(.98) } @media (max-width: 900px){ .contact-fab.is-hidden{ opacity: 1; pointer-events:auto; transform: none; } /* never auto-hide on phones */ } /* --- HERO OVERLAY: force normal flow so it can't sit on top of later content --- */ .hero { overflow: visible; } /* just in case */ .hero .value-rotator, .hero .cta-bar, .hero .cta-rail, .hero .hero-cta, .hero .cta, .hero .cta-panel { position: static !important; inset: auto !important; left: auto !important; top: auto !important; transform: none !important; margin: 14px auto 10px !important; /* centers and adds space */ max-width: max-content; z-index: 2; } /* keep the items that follow clear and tidy */ .hero .logo-row, #hero-art, .hero .glass { position: relative; z-index: 1; margin-top: 16px; } /* Why slider should flow normally */ #whySlider .slide{ position:relative; opacity:0; transition:opacity .45s var(--easing); } #whySlider .slide.active{ opacity:1; } #whySlider .dots{ position:static; margin-top:10px; } /* take space for dots */ /* WHY: compact 2×2 grid with rotating highlight */ #whySlider{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; align-items:stretch; } /* override the generic dash-slider rules just for this block */ #whySlider .slide{ position:relative; /* participate in layout (not absolute) */ opacity:1; /* keep all visible */ padding:12px 14px; border:1px solid rgba(127,148,179,.18); border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)); transition:border-color .2s var(--easing), box-shadow .2s var(--easing), background .2s var(--easing); min-height:110px; } #whySlider .slide h3{ margin:0 0 6px; font-size:clamp(16px,2vw,18px) } #whySlider .slide p.k{ margin:0 0 6px; font-size:14px; opacity:.92 } #whySlider .slide ul{ margin:6px 0 0 18px } #whySlider .slide.active{ border-color:rgba(255,77,0,.55); background:linear-gradient(180deg,rgba(255,77,0,.10),rgba(255,77,0,.04)); box-shadow:0 0 0 1px rgba(255,77,0,.35), 0 18px 46px rgba(255,77,0,.10); } #whySlider .slide.active h3{ color:var(--accent); text-shadow:0 0 12px rgba(255,77,0,.25); } /* dots sit below the grid, not overlay */ #whySlider .dots{ grid-column:1 / -1; position:static; margin-top:6px; } @media (max-width:900px){ #whySlider{ grid-template-columns:1fr; } } /* LIGHT MODE: raise contrast on cards & body copy */ [data-theme="light"] .card{ /* white surface + gentle depth */ background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)); border-color: var(--glass-border); box-shadow: var(--shadow-sm); } [data-theme="light"] .card:hover{ box-shadow: 0 10px 30px rgba(2,10,24,.10); } /* headings & text inside cards */ [data-theme="light"] .card h3{ color:#0b1220 } /* strong heading */ [data-theme="light"] .card p, [data-theme="light"] .card li{ color:#101828; opacity:1 } /* body copy full contrast */ [data-theme="light"] .card .k{ color:#344054; opacity:.98 } /* “muted” paragraphs but readable */ /* numbered orange badge in use-cases */ [data-theme="light"] .usecase-num{ background: var(--accent); color:#fff; /* white on orange is clearer than black */ box-shadow: 0 0 14px rgba(255,77,0,.20); } /* tidy bullet spacing on mobile */ @media (max-width: 600px){ .card ul{ margin-left: 18px } }