/* ============================================================ Assessoris Marketing Site — Stylesheet Reuses the design tokens from the app for brand consistency, adds tech-startup polish: dark hero, gradient glow, animated scroll-reveal, hover lift on cards, purple accent on AI. Breakpoints: 600 / 900 / 1200 px (mobile-first) ============================================================ */ :root { /* Palette matches the app */ --black:#111; --white:#fff; --gray-50:#f9fafb; --gray-100:#f3f4f6; --gray-200:#e5e7eb; --gray-300:#d1d5db; --gray-400:#9ca3af; --gray-500:#6b7280; --gray-600:#4b5563; --gray-700:#374151; --gray-800:#1f2937; --gray-900:#111827; --purple:#7C3AED; --purple-dark:#6D28D9; --purple-light:#C4B5FD; --purple-tint:#F5F3FF; --radius:14px; --radius-sm:10px; --radius-xs:6px; --shadow-sm:0 1px 2px rgba(0,0,0,.04); --shadow:0 4px 24px rgba(0,0,0,.06); --shadow-lg:0 20px 60px rgba(0,0,0,.08); --shadow-purple:0 10px 40px rgba(124,58,237,.25); --transition:all .25s ease; --mono:'Space Mono', monospace; --container:1200px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; padding:0; font-family:'DM Sans', system-ui, sans-serif; font-size:16px; line-height:1.6; color:var(--gray-800); background:var(--white); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } a{color:var(--black); text-decoration:none; transition:var(--transition)} img,svg{max-width:100%; height:auto; display:block} h1,h2,h3,h4{margin:0; font-weight:700; line-height:1.15; letter-spacing:-.02em; color:var(--gray-900)} p{margin:0 0 1em} /* ── Containers ─── */ .container{max-width:var(--container); margin:0 auto; padding:0 24px} @media (min-width:900px){ .container{padding:0 40px} } /* ── Utility ─── */ .mono-label{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gray-400); } .kicker{ color:var(--purple); } /* ============================================================ Top nav — translucent, goes solid on scroll ============================================================ */ .site-nav{ position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 0; background:rgba(255,255,255,0); backdrop-filter:none; transition:background-color .3s ease, box-shadow .3s ease; } .site-nav.scrolled{ background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px); box-shadow:0 1px 0 rgba(0,0,0,.06); } /* Default nav tone: dark text on light background (for subpages). The landing page gives its the `has-dark-hero` class so the nav shows white text before the user scrolls past the hero — on every other page the dark nav text is always visible on white. */ .site-nav .nav-link{color:var(--gray-700); position:relative} .site-nav .nav-brand{color:var(--gray-900)} /* Active-page highlight: purple text + an underline bar under the label, matching the app's tab-active visual so the site + app feel related. */ .site-nav .nav-link.is-active{color:var(--purple); font-weight:600} .site-nav .nav-link.is-active:not(.btn-signin)::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--purple); border-radius:2px; } /* Over the dark hero (home page), active uses light purple so it reads on black */ body.has-dark-hero .site-nav:not(.scrolled) .nav-link.is-active{color:var(--purple-light)} body.has-dark-hero .site-nav:not(.scrolled) .nav-link.is-active:not(.btn-signin)::after{background:var(--purple-light)} body.has-dark-hero .site-nav:not(.scrolled) .nav-link, body.has-dark-hero .site-nav:not(.scrolled) .nav-brand, body.has-dark-hero .site-nav:not(.scrolled) .nav-toggle{ color:#fff } .site-nav .nav-inner{ max-width:var(--container); margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:24px; } @media (min-width:900px){ .site-nav .nav-inner{padding:0 40px} } .nav-brand{ font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-900); } .nav-brand:hover{color:var(--purple)} /* Floating "back to home" FAB (bottom-right) — same pattern as a back-to-top button. Only appears on subpages; the home page hides it via body.has-dark-hero. Fades in after a short scroll so it doesn't clutter the hero. */ .nav-home{ position:fixed; bottom:20px; right:20px; z-index:90; width:48px; height:48px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--purple); color:#fff; box-shadow:0 6px 20px rgba(124,58,237,.35); transition:transform .25s ease, opacity .25s ease, background-color .2s ease; opacity:0; pointer-events:none; transform:translateY(12px); } .nav-home.visible{opacity:1; pointer-events:auto; transform:translateY(0)} .nav-home:hover{background:var(--purple-dark); transform:translateY(-2px)} .nav-home svg{width:22px; height:22px} body.has-dark-hero .nav-home{display:none} .nav-links{ display:none; margin-left:auto; align-items:center; gap:28px; } @media (min-width:700px){ .nav-links{display:flex} } .nav-link{ font-size:14px; font-weight:500; color:var(--gray-700); } .nav-link:hover{color:var(--purple)} .nav-link.btn-signin{ background:var(--black); color:var(--white); padding:8px 18px; border-radius:var(--radius-xs); font-weight:600; } .nav-link.btn-signin:hover{background:var(--purple); color:#fff} /* Ghosted sign-in button over the dark hero (landing page only) */ body.has-dark-hero .site-nav:not(.scrolled) .nav-link.btn-signin{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); } body.has-dark-hero .site-nav:not(.scrolled) .nav-link.btn-signin:hover{ background:var(--purple); border-color:var(--purple); } /* Mobile hamburger */ .nav-toggle{ display:flex; margin-left:auto; padding:8px; background:none; border:none; cursor:pointer; color:inherit; } @media (min-width:700px){ .nav-toggle{display:none} } .nav-toggle svg{width:24px; height:24px} .nav-mobile{ display:none; position:absolute; top:100%; left:0; right:0; background:#fff; padding:16px 24px; border-top:1px solid var(--gray-200); flex-direction:column; gap:14px; box-shadow:var(--shadow); } .nav-mobile.open{display:flex} /* Mobile dropdown colour overrides. The dropdown panel has a WHITE background regardless of whether the main nav is over the purple hero or on a white subpage, so we must pick colours that read on white — not inherit whatever the main nav is painting. Three cases: 1. plain nav link → dark grey 2. active page → purple (so users see which page they're on) 3. sign-in pill → white-on-black, not stretched !important is used because the broader `body.has-dark-hero .nav-link {color:#fff}` rule is intentionally general and this is the single exception for the dropdown. */ .nav-mobile .nav-link:not(.btn-signin):not(.is-active){color:var(--gray-700) !important} .nav-mobile .nav-link.is-active{color:var(--purple) !important; font-weight:600} .nav-mobile .nav-link.btn-signin{ /* The dark-hero rule paints the desktop sign-in pill translucent white (so it reads over purple), but that same rule matches this button inside the white dropdown panel and makes it invisible. Re-assert the solid black pill inside the dropdown. */ background:var(--black) !important; border:none !important; color:#fff !important; align-self:flex-start; padding:8px 22px; } /* ============================================================ Buttons ============================================================ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:var(--radius-xs); font-family:'DM Sans', sans-serif; font-size:15px; font-weight:600; border:none; cursor:pointer; transition:var(--transition); text-decoration:none; text-align:center; } .btn-primary{background:var(--black); color:#fff} .btn-primary:hover{background:var(--gray-800); transform:translateY(-1px); box-shadow:var(--shadow)} .btn-secondary{background:var(--gray-100); color:var(--gray-800); border:1px solid var(--gray-200)} .btn-secondary:hover{background:var(--gray-200)} .btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35)} .btn-ghost:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.7)} .btn-purple{background:var(--purple); color:#fff; box-shadow:var(--shadow-purple)} .btn-purple:hover{background:var(--purple-dark); transform:translateY(-1px)} .btn-lg{padding:14px 28px; font-size:16px} /* ============================================================ Hero ============================================================ */ .hero{ position:relative; overflow:hidden; padding:160px 0 120px; background: radial-gradient(ellipse at 20% 30%, rgba(124,58,237,.35), transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(99,102,241,.25), transparent 50%), linear-gradient(180deg, #0b0b12 0%, #1a1230 100%); color:#fff; } .hero::before, .hero::after{ /* Animated gradient orbs */ content:''; position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; z-index:0; pointer-events:none; animation:float 18s ease-in-out infinite; } .hero::before{ width:400px; height:400px; background:var(--purple); top:-80px; left:-80px; } .hero::after{ width:500px; height:500px; background:#3b82f6; bottom:-100px; right:-120px; animation-delay:-9s; } @keyframes float{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(30px,-20px) scale(1.05)} } .hero-inner{ position:relative; z-index:1; text-align:center; max-width:820px; margin:0 auto; } .hero-kicker{ display:inline-block; padding:4px 12px; margin-bottom:24px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); border-radius:20px; font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.85); } .hero h1{ font-size:clamp(36px, 6vw, 72px); line-height:1.05; letter-spacing:-.03em; font-weight:800; background:linear-gradient(180deg, #fff 0%, #e0d7ff 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; margin-bottom:20px; } .hero p{ font-size:clamp(16px, 1.4vw, 20px); line-height:1.55; color:rgba(255,255,255,.75); max-width:640px; margin:0 auto 36px; } .hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap} /* ============================================================ Sections ============================================================ */ section{padding:96px 0} @media (max-width:700px){ section{padding:64px 0} } .section-heading{text-align:center; margin-bottom:56px} .section-heading h2{font-size:clamp(28px, 3.5vw, 44px); margin-bottom:16px} .section-heading p{color:var(--gray-500); max-width:640px; margin:0 auto; font-size:17px} /* ── Value strip ─── */ .value-strip{ padding:48px 0; background:var(--gray-50); border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); } .value-grid{ display:grid; grid-template-columns:1fr; gap:32px; text-align:center; } @media (min-width:700px){ .value-grid{grid-template-columns:repeat(3,1fr)} } .value-number{ font-family:var(--mono); font-size:clamp(32px,4vw,48px); font-weight:700; color:var(--purple); line-height:1; } .value-label{color:var(--gray-600); margin-top:8px; font-size:14px} /* ── Features grid ─── */ .features-grid{ display:grid; grid-template-columns:1fr; gap:20px; } @media (min-width:700px){ .features-grid{grid-template-columns:repeat(3,1fr); gap:24px} } .feature{ padding:32px 28px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); transition:var(--transition); position:relative; overflow:hidden; } .feature:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--gray-300)} .feature-icon{ width:48px; height:48px; margin-bottom:20px; display:flex; align-items:center; justify-content:center; background:var(--gray-100); color:var(--gray-700); border-radius:var(--radius-xs); } .feature h3{font-size:20px; margin-bottom:10px} .feature p{color:var(--gray-600); font-size:15px; margin:0} .feature-flagship{ border:1px solid rgba(124,58,237,.3); background:linear-gradient(180deg, rgba(124,58,237,.04) 0%, rgba(255,255,255,0) 60%); } .feature-flagship .feature-icon{ background:var(--purple-tint); color:var(--purple); } .feature-flagship::before{ content:'FLAGSHIP'; position:absolute; top:16px; right:16px; font-family:var(--mono); font-size:9px; letter-spacing:.12em; padding:3px 8px; background:var(--purple); color:#fff; border-radius:3px; font-weight:700; } /* ── AI Showcase ─── */ .showcase{ background:linear-gradient(180deg, var(--purple-tint) 0%, var(--white) 100%); position:relative; } /* Multi-Standard section — richer radial wash that harmonises with the floating bubbles on the right column. No rectangular edges: the section background itself already carries the glow so the bubble container is just a position frame. overflow:clip keeps the wash from bleeding into adjacent sections. */ .showcase-multi{ /* Bottom-to-top blend layers. 1. A dedicated bottom overlay that forces the last ~30% of the section to the exact gray-50 of the next section. Without this the radial glows below keep bleeding colour into the seam and you see a visible horizontal edge. 2. Three radial glows, explicitly sized (ellipse WIDTH HEIGHT) and positioned in the upper-middle so they stop well short of the section's bottom edge. 3. A base linear gradient that starts white at the top (matches the previous section's end), briefly touches purple-tint mid-section where the bubble glow lives, then smoothly resolves to gray-50 at the bottom. */ background: linear-gradient(180deg, transparent 0%, transparent 62%, var(--gray-50) 92%, var(--gray-50) 100%), radial-gradient(ellipse 55% 40% at 72% 38%, rgba(124,58,237,.16) 0%, rgba(124,58,237,0) 100%), radial-gradient(ellipse 45% 32% at 24% 48%, rgba(59,130,246,.10) 0%, rgba(59,130,246,0) 100%), radial-gradient(ellipse 40% 28% at 85% 58%, rgba(236,72,153,.08) 0%, rgba(236,72,153,0) 100%), linear-gradient(180deg, var(--white) 0%, #F7F5FC 35%, #F7F5FC 55%, var(--gray-50) 100%); overflow:hidden; } .showcase-grid{ display:grid; grid-template-columns:1fr; gap:48px; align-items:center; } @media (min-width:900px){ .showcase-grid{grid-template-columns:1fr 1fr; gap:80px} } /* ── Multi-Standard floating bubbles ───────────────────────────── Six standards orbit in a 1:1 square canvas. Each bubble has its own @keyframes cycle so the motion looks organic (no two bubbles tick together). Shipped standards use the solid purple accent; roadmap standards (is-roadmap) use a dashed border + lower opacity to read as "coming soon". ──────────────────────────────────────────────────────────────── */ .standards-bubbles{ position:relative; width:100%; max-width:520px; margin:0 auto; aspect-ratio:1 / 1; /* No solid background. The soft glow is a pseudo-element that extends well beyond the container and is blurred, so there is no rectangular edge — the colour blends smoothly into whatever section background sits behind it. */ background:transparent; overflow:visible; } .standards-bubbles::before{ content:""; position:absolute; /* Expand 22% in every direction and apply a heavy blur so the edge is effectively invisible against the section's own background. */ inset:-22%; pointer-events:none; background: radial-gradient(ellipse at 50% 45%, rgba(124,58,237,.30) 0%, rgba(124,58,237,0) 62%), radial-gradient(ellipse at 28% 78%, rgba(59,130,246,.22) 0%, rgba(59,130,246,0) 60%), radial-gradient(ellipse at 80% 75%, rgba(236,72,153,.16) 0%, rgba(236,72,153,0) 60%); filter:blur(24px); z-index:0; } .std-bubble{ z-index:1; } /* keep bubbles above the blurred glow */ .std-bubble{ position:absolute; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; padding:16px 20px; border-radius:999px; background:rgba(255,255,255,.92); border:1px solid var(--gray-200); box-shadow:0 10px 30px rgba(124,58,237,.12), 0 2px 6px rgba(0,0,0,.04); font-family:var(--mono); font-size:12px; font-weight:600; color:var(--gray-800); backdrop-filter:blur(6px); will-change:transform; } .std-bubble .std-ver{ font-size:10px; letter-spacing:.08em; color:var(--purple); text-transform:uppercase; font-weight:700; margin-bottom:3px; } .std-bubble .std-name{ font-size:13px; color:var(--gray-900); white-space:nowrap; } .std-bubble.is-roadmap{ border-style:dashed; opacity:.78; background:rgba(255,255,255,.7); } .std-bubble.is-roadmap .std-ver{ color:var(--gray-500); } /* Six positions across the canvas — absolute percents so the layout scales with the container. */ .std-bubble-1{ top:6%; left:14%; animation:std-float-a 7s ease-in-out infinite; } .std-bubble-2{ top:16%; right:8%; animation:std-float-b 8.5s ease-in-out infinite; } .std-bubble-3{ top:44%; left:4%; animation:std-float-c 9s ease-in-out infinite; } .std-bubble-4{ top:52%; right:14%;animation:std-float-d 7.8s ease-in-out infinite; } .std-bubble-5{ bottom:12%;left:22%; animation:std-float-e 8.2s ease-in-out infinite; } .std-bubble-6{ bottom:4%; right:6%; animation:std-float-f 7.4s ease-in-out infinite; } @keyframes std-float-a{ 0%,100%{ transform:translate(0,0) } 50% { transform:translate(8px, -14px) } } @keyframes std-float-b{ 0%,100%{ transform:translate(0,0) } 50% { transform:translate(-10px, 12px) } } @keyframes std-float-c{ 0%,100%{ transform:translate(0,0) } 50% { transform:translate(14px, 8px) } } @keyframes std-float-d{ 0%,100%{ transform:translate(0,0) } 50% { transform:translate(-8px, -12px) } } @keyframes std-float-e{ 0%,100%{ transform:translate(0,0) } 50% { transform:translate(12px, -10px) } } @keyframes std-float-f{ 0%,100%{ transform:translate(0,0) } 50% { transform:translate(-12px, -8px) } } @media (prefers-reduced-motion: reduce){ .std-bubble{ animation:none !important; } } @media (max-width:600px){ .std-bubble{ padding:10px 14px; font-size:11px; } .std-bubble .std-name{ font-size:11px; } .std-bubble .std-ver{ font-size:9px; } } .showcase h2{font-size:clamp(28px, 3.2vw, 40px); margin-bottom:20px} .showcase p{color:var(--gray-600); font-size:17px; line-height:1.7} .showcase ul{list-style:none; padding:0; margin:24px 0 0} .showcase li{ padding:10px 0 10px 32px; position:relative; font-size:15px; color:var(--gray-700); } .showcase li::before{ content:''; position:absolute; left:0; top:14px; width:18px; height:18px; border-radius:50%; background:var(--purple-tint); background-image: linear-gradient(var(--purple), var(--purple)), linear-gradient(var(--purple), var(--purple)); background-size:10px 2px, 2px 10px; background-position:center; background-repeat:no-repeat; border:2px solid var(--purple); } .showcase-mock{ background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:24px; border:1px solid var(--gray-200); } .mock-finding{ padding:12px 14px; border-left:3px solid var(--purple); background:linear-gradient(90deg, var(--purple-tint) 0%, var(--white) 40%); border-radius:0 var(--radius-xs) var(--radius-xs) 0; margin-bottom:10px; font-size:13px; color:var(--gray-700); } .mock-finding:last-child{margin-bottom:0} .mock-finding-head{ display:flex; gap:8px; align-items:center; margin-bottom:6px; font-family:var(--mono); font-size:10px; color:var(--gray-500); } .mock-ai-badge{ background:var(--purple); color:#fff; padding:2px 6px; border-radius:3px; font-size:9px; font-weight:700; letter-spacing:.08em; } /* ── Credibility strip ─── */ .credibility{ background:var(--gray-900); color:#fff; text-align:center; } .credibility h2{color:#fff} .credibility-badges{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:40px; } @media (min-width:700px){ .credibility-badges{grid-template-columns:repeat(3,1fr)} } .credibility-badge{ padding:24px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--radius); transition:var(--transition); } .credibility-badge:hover{background:rgba(255,255,255,.08); border-color:var(--purple)} .credibility-badge svg{color:var(--purple); margin-bottom:14px} .credibility-badge strong{display:block; font-size:17px; margin-bottom:6px} .credibility-badge span{color:rgba(255,255,255,.6); font-size:14px} /* ── Plan teaser cards ─── */ .plans-grid{ display:grid; grid-template-columns:1fr; gap:20px; } @media (min-width:900px){ .plans-grid{grid-template-columns:repeat(3,1fr); gap:24px} } .plan-card{ padding:32px 28px; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); display:flex; flex-direction:column; transition:var(--transition); } .plan-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)} .plan-card h3{font-size:22px; margin-bottom:6px} .plan-tagline{color:var(--gray-500); font-size:14px; margin-bottom:24px} .plan-features{list-style:none; padding:0; margin:0 0 28px; flex:1} .plan-features li{ padding:8px 0 8px 28px; position:relative; font-size:14px; color:var(--gray-700); } .plan-features li::before{ content:'✓'; position:absolute; left:0; top:8px; color:var(--purple); font-weight:700; } .plan-features li.muted{color:var(--gray-300)} .plan-features li.muted::before{content:'–'; color:var(--gray-300)} .plan-flagship{ border:2px solid var(--purple); box-shadow:0 10px 30px rgba(124,58,237,.15); position:relative; } .plan-flagship::before{ content:'Most complete'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:10px; letter-spacing:.12em; padding:5px 14px; background:var(--purple); color:#fff; border-radius:20px; font-weight:700; text-transform:uppercase; white-space:nowrap; } /* ── Final CTA ─── */ .final-cta{ text-align:center; background: radial-gradient(ellipse at center, rgba(124,58,237,.12), transparent 70%), var(--white); padding:120px 0; } .final-cta h2{font-size:clamp(32px, 4vw, 52px); margin-bottom:16px} .final-cta p{color:var(--gray-600); font-size:18px; max-width:560px; margin:0 auto 32px} /* ============================================================ Footer ============================================================ */ .footer{ background:var(--gray-900); color:rgba(255,255,255,.7); padding:48px 0 32px; font-size:14px; } .footer-grid{ display:grid; grid-template-columns:1fr; gap:32px; } @media (min-width:700px){ .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr} } .footer-brand{font-family:var(--mono); color:#fff; font-weight:700; letter-spacing:.12em; font-size:15px; margin-bottom:12px} /* When footer-brand contains the compact SVG logo (black on white) we invert the fill so it reads on the dark footer background, and constrain the size so the mark never dominates the footer layout. */ .footer-brand img, .footer-brand svg{ display:block; height:26px; width:auto; max-width:100%; /* SVG is authored black-on-white → invert for dark background */ filter:invert(1) brightness(1.1); } .footer-tagline{color:rgba(255,255,255,.5); font-size:13px; max-width:300px} .footer h4{color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; font-weight:600} .footer ul{list-style:none; padding:0; margin:0} .footer li{margin-bottom:10px} .footer a{color:rgba(255,255,255,.65)} .footer a:hover{color:var(--purple-light)} .footer-bottom{ margin-top:40px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; color:rgba(255,255,255,.4); font-size:12px; } /* ============================================================ App-mockup blocks — pure HTML/CSS "screenshots" of the real app. Shows visitors what the product looks like without maintaining real screenshots that go stale on every UI tweak. ============================================================ */ .app-mock{ width:100%; background:var(--white); border:1px solid var(--gray-200); border-radius:var(--radius); box-shadow:var(--shadow-lg); overflow:hidden; font-size:12px; } .app-mock-topbar{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--gray-900); color:#fff; font-family:var(--mono); letter-spacing:.1em; font-size:10px; } .app-mock-dots{display:flex; gap:4px; margin-right:8px} .app-mock-dots span{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25)} .app-mock-body{padding:16px 18px; background:var(--gray-50)} .app-mock-label{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gray-500); margin-bottom:10px; } .app-mock-bpcard{ background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-xs); padding:12px 14px; margin-bottom:10px; } .app-mock-bpcard:last-child{margin-bottom:0} .app-mock-bpcard-head{display:flex; align-items:center; gap:8px; margin-bottom:8px} .app-mock-bpcard-head .num{ width:22px; height:22px; border-radius:50%; background:var(--gray-100); display:inline-flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; color:var(--gray-600); } .app-mock-bpcard-head .bp-id{font-family:var(--mono); font-size:10px; color:var(--gray-500)} .app-mock-bpcard-head .bp-title{flex:1; font-weight:600; font-size:13px; color:var(--gray-900)} .app-mock-ratings{display:flex; gap:4px} .app-mock-ratings span{ min-width:22px; text-align:center; padding:2px 0; border-radius:3px; font-family:var(--mono); font-size:10px; font-weight:700; } /* ASPICE rating palette — matches the live app's rating-pill colours so marketing mockups don't mislead visitors. N red, P orange, L yellow, F green. Previously L was green and F was blue, which contradicted the in-app legend. */ .rating-N{background:#fee2e2; color:#b91c1c} .rating-P{background:#fed7aa; color:#9a3412} .rating-L{background:#fef3c7; color:#a16207} .rating-F{background:#bbf7d0; color:#15803d} /* Selected pill — bold brand-coloured ring instead of the generic dark grey shadow. Each rating gets its own accent. */ .rating-selected{box-shadow:0 0 0 2px var(--gray-900)} .rating-N.rating-selected{box-shadow:0 0 0 2px #dc2626} .rating-P.rating-selected{box-shadow:0 0 0 2px #ea580c} .rating-L.rating-selected{box-shadow:0 0 0 2px #ca8a04} .rating-F.rating-selected{box-shadow:0 0 0 2px #16a34a} .app-mock-finding{ padding:6px 10px; border-left:3px solid var(--gray-300); background:var(--gray-50); border-radius:0 4px 4px 0; font-size:11px; color:var(--gray-700); line-height:1.5; } .app-mock-finding + .app-mock-finding{margin-top:5px} .app-mock-finding.weak{background:#FEF2F2; border-left-color:#EF4444} .app-mock-finding.comment{background:#f9fafb; border-left-color:#9ca3af} .app-mock-finding.ai{ background:linear-gradient(90deg, var(--purple-tint), #fff 50%); border-left-color:var(--purple); } .app-mock-finding-id{font-family:var(--mono); color:var(--gray-500); font-size:10px} /* Chat mockup */ .app-mock-chat{ background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius-xs); padding:12px; } .chat-msg{display:flex; gap:8px; margin-bottom:10px} .chat-msg-me{flex-direction:row-reverse; text-align:right} .chat-avatar{ width:28px; height:28px; border-radius:50%; background:var(--purple); color:#fff; font-family:var(--mono); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; } .chat-avatar.dk{background:#0ea5e9} .chat-avatar.rs{background:#10b981} .chat-bubble{ background:var(--gray-100); padding:7px 11px; border-radius:10px; font-size:12px; color:var(--gray-800); max-width:75%; line-height:1.5; display:inline-block; text-align:left; } .chat-msg-me .chat-bubble{background:var(--gray-900); color:#fff} .chat-meta{font-family:var(--mono); font-size:9px; color:var(--gray-400); margin-top:2px} /* ============================================================ Scroll reveal — starts hidden, fades up when visible ============================================================ */ .reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease} .reveal.in-view{opacity:1; transform:none} /* ============================================================ Subpage layouts (features, pricing, contact, legal) ============================================================ */ .subpage-hero{ padding:140px 0 60px; background:linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%); border-bottom:1px solid var(--gray-200); text-align:center; } .subpage-hero h1{font-size:clamp(32px, 4vw, 52px); margin-bottom:16px} .subpage-hero p{color:var(--gray-600); font-size:18px; max-width:640px; margin:0 auto} /* ── Feature walkthrough (features.html) ─── */ .feature-row{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; padding:64px 0; border-bottom:1px solid var(--gray-100); } @media (min-width:900px){ .feature-row{grid-template-columns:1fr 1fr; gap:80px} } .feature-row.reverse .feature-row-text{order:2} .feature-row h2{font-size:clamp(26px,3vw,36px); margin-bottom:16px} .feature-row p{color:var(--gray-600); font-size:17px; line-height:1.7} .feature-row-visual{ background:var(--gray-50); border-radius:var(--radius); padding:32px; min-height:280px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gray-200); } .feature-row-visual.purple{ background:linear-gradient(180deg, var(--purple-tint), var(--white)); border-color:rgba(124,58,237,.2); } /* Multi-standard row — no panel at all. The bubbles float on the section background with only a soft radial glow. Border and border-radius are removed (not just made transparent) so no rectangular silhouette is visible on either the top-right "shadow" or anywhere else. overflow stays visible so the glow can blend beyond the visual column. */ .feature-row-visual.multi-standard{ background: radial-gradient(ellipse at 50% 45%, rgba(124,58,237,.14) 0%, rgba(124,58,237,0) 60%), radial-gradient(ellipse at 25% 75%, rgba(59,130,246,.10) 0%, rgba(59,130,246,0) 55%), radial-gradient(ellipse at 78% 72%, rgba(236,72,153,.08) 0%, rgba(236,72,153,0) 55%), transparent; border:none; border-radius:0; box-shadow:none; overflow:visible; } /* ── Contact page ─── */ .contact-grid{ display:grid; grid-template-columns:1fr; gap:40px; } @media (min-width:900px){ .contact-grid{grid-template-columns:1.2fr 1fr; gap:60px} } .contact-form{ background:var(--white); padding:32px; border-radius:var(--radius); border:1px solid var(--gray-200); box-shadow:var(--shadow-sm); } .form-group{margin-bottom:20px} .form-label{ display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:var(--gray-700); } .form-input, .form-textarea{ width:100%; padding:12px 14px; background:#fff; border:1px solid var(--gray-300); border-radius:var(--radius-xs); font-family:inherit; font-size:15px; color:var(--gray-900); transition:var(--transition); } .form-input:focus, .form-textarea:focus{ outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,58,237,.12); } .form-textarea{resize:vertical; min-height:140px; line-height:1.6} .form-hint{font-size:12px; color:var(--gray-500); margin-top:4px} .form-submit-row{display:flex; justify-content:flex-start; margin-top:8px} .form-captcha .form-input{max-width:140px} .form-status{margin-top:16px; padding:12px 14px; border-radius:var(--radius-xs); font-size:14px; display:none} .form-status.show{display:block} .form-status.success{background:#ecfdf5; color:#047857; border:1px solid #a7f3d0} .form-status.error{background:#fef2f2; color:#b91c1c; border:1px solid #fecaca} /* Honeypot — visually hidden, form-filling bots can't tell */ .form-honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden} .bio-card{ background:var(--white); padding:32px; border-radius:var(--radius); border:1px solid var(--gray-200); text-align:center; } .bio-photo{ width:160px; height:160px; margin:0 auto 24px; border-radius:50%; overflow:hidden; border:4px solid var(--white); box-shadow:var(--shadow); background:var(--gray-100); } .bio-photo img{width:100%; height:100%; object-fit:cover} .bio-name{font-size:22px; font-weight:700; margin-bottom:4px} .bio-title{color:var(--purple); font-size:14px; font-weight:600; margin-bottom:16px} .bio-text{color:var(--gray-600); font-size:14px; line-height:1.7; margin-bottom:20px} /* reCAPTCHA v3 ToS-required disclosure under the contact form */ .recaptcha-tos{ margin-top:16px; font-size:11px; color:var(--gray-400); line-height:1.5; } .recaptcha-tos a{color:var(--gray-500); text-decoration:underline} .recaptcha-tos a:hover{color:var(--purple)} /* Hide the floating reCAPTCHA badge — would otherwise clash with the home FAB in the bottom-right. We replace it with the required disclosure line above (per Google's reCAPTCHA ToS FAQ). */ .grecaptcha-badge{visibility:hidden !important} .bio-contact{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:14px; } .bio-contact a, .bio-contact .bio-address{ color:var(--gray-700); display:inline-flex; align-items:center; justify-content:center; gap:6px; } .bio-contact a:hover{color:var(--purple)} .bio-contact .bio-address{color:var(--gray-600)} /* ── FAQ accordion ─── */ .faq{max-width:800px; margin:64px auto 0} .faq h2{text-align:center; margin-bottom:32px} .faq-item{ border-top:1px solid var(--gray-200); padding:20px 0; } .faq-item:last-child{border-bottom:1px solid var(--gray-200)} .faq-question{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; color:var(--gray-900); font-size:16px; } .faq-question::after{ content:'+'; font-size:24px; color:var(--purple); transition:transform .2s ease; line-height:1; } .faq-item.open .faq-question::after{content:'−'} .faq-answer{ max-height:0; overflow:hidden; transition:max-height .3s ease; color:var(--gray-600); font-size:15px; } .faq-item.open .faq-answer{max-height:500px; padding-top:12px} /* ── Legal pages ─── */ .legal{max-width:800px; margin:0 auto; padding:96px 24px} .legal h1{font-size:32px; margin-bottom:16px} .legal h2{font-size:20px; margin-top:40px; margin-bottom:10px; color:var(--gray-800)} .legal p, .legal li{color:var(--gray-700); font-size:15px; line-height:1.7} .legal ul{padding-left:20px; margin-bottom:16px} .legal strong{color:var(--gray-900)} .legal .placeholder{ background:#fef3c7; padding:1px 6px; border-radius:3px; font-family:var(--mono); font-size:12px; color:#92400e; } /* ── Cookie banner ─── */ .cookie-banner{ position:fixed; bottom:20px; right:20px; z-index:200; max-width:380px; padding:16px 20px; background:var(--gray-900); color:#fff; border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); display:none; font-size:13px; line-height:1.5; } .cookie-banner.show{display:block} @media (max-width:500px){ .cookie-banner{bottom:12px; right:12px; left:12px; max-width:none} /* Trim the hero on phones so the CTAs are visible above the fold */ .hero{padding:120px 0 80px} .hero p{font-size:15px} /* Shrink the mockups so they don't overflow narrow screens */ .app-mock{font-size:11px} .app-mock-body{padding:12px} .app-mock-bpcard{padding:10px 12px} .app-mock-bpcard-head .bp-title{font-size:12px} .app-mock-finding{font-size:10px; padding:5px 8px} /* Floating home FAB shouldn't clash with the cookie banner on first visit */ .nav-home{bottom:80px} /* Feature-row visuals shouldn't force horizontal scroll */ .feature-row-visual{padding:16px; overflow-x:auto} } .cookie-banner a{color:var(--purple-light); text-decoration:underline} .cookie-actions{display:flex; gap:10px; margin-top:12px; justify-content:flex-end} .cookie-actions .btn{padding:6px 14px; font-size:13px} /* ── Screen-reader only ─── */ .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ============================================================ AI SHEEN — iridescent shimmer used for the word "AI" in the hero headline and on the hero-kicker badge. Inspired by the Apple Intelligence mark: a slow-panning rainbow gradient clipped to the text itself, plus a subtle purple glow. ============================================================ */ @keyframes ai-sheen-shift { 0% { background-position: 0% 50% } 100% { background-position: 300% 50% } } .ai-sheen{ background:linear-gradient(110deg, #7C3AED 0%, #3b82f6 20%, #06b6d4 35%, #ec4899 55%, #f59e0b 70%, #a855f7 85%, #7C3AED 100%); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:ai-sheen-shift 9s linear infinite; /* A soft purple aura outside the letterforms. drop-shadow on a clipped-to-text element adds glow without blowing up the stack. */ filter:drop-shadow(0 0 14px rgba(168,85,247,.35)) drop-shadow(0 0 24px rgba(59,130,246,.18)); /* Kill italic-style letter nudging so the gradient stays crisp */ font-style:normal; } /* AI badge / kicker — rounded pill with a living gradient border and the same sheen animation running inside. Sits above the headline. */ .hero-kicker-ai{ display:inline-flex; align-items:center; gap:8px; padding:6px 16px; margin-bottom:24px; border-radius:999px; background:rgba(16,10,32,.75); font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase; color:#fff; position:relative; isolation:isolate; } .hero-kicker-ai::before{ /* Animated gradient border via padding-box/border-box mask trick */ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:-1; background:linear-gradient(110deg, #7C3AED, #3b82f6, #06b6d4, #ec4899, #f59e0b, #a855f7, #7C3AED); background-size:300% 100%; animation:ai-sheen-shift 9s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .hero-kicker-ai .ai-dot{ width:6px; height:6px; border-radius:50%; background:linear-gradient(110deg,#ec4899,#7C3AED,#3b82f6); background-size:200% 100%; animation:ai-sheen-shift 6s linear infinite; box-shadow:0 0 8px rgba(168,85,247,.8); } /* ============================================================ HERO SAFARI MOCKUP — fake browser window showing the actual Assessoris assessment view. Mirrors the real app: tabbed header (Assessment / Overview / Evidences / Rules), process-group filter chips, grouped sidebar, PA/GP breakdowns with action buttons, floating team-chat overlay. Pure HTML/CSS, no screenshots. ============================================================ */ .hero-safari{ max-width:1180px; margin:64px auto 0; position:relative; z-index:1; background:#fff; border-radius:14px; overflow:hidden; box-shadow: 0 40px 80px -20px rgba(0,0,0,.55), 0 10px 30px -10px rgba(124,58,237,.4), 0 0 0 1px rgba(255,255,255,.05); } /* Soft rainbow glow around the frame to echo the AI vibe */ .hero-safari::before{ content:''; position:absolute; inset:-2px; z-index:-1; border-radius:16px; background:linear-gradient(110deg, rgba(124,58,237,.6), rgba(59,130,246,.4), rgba(236,72,153,.4), rgba(245,158,11,.3), rgba(168,85,247,.6)); background-size:300% 100%; animation:ai-sheen-shift 9s linear infinite; filter:blur(18px); opacity:.6; } /* ── Safari chrome (traffic lights + URL bar) ── */ .hs-chrome{ display:flex; align-items:center; gap:12px; padding:12px 16px; background:#e8e8ed; border-bottom:1px solid rgba(0,0,0,.08); /* Keep the Safari window header above the sign-in overlay so the browser-like chrome is visible at page load and during the login sequence — only the app content area is covered. */ position:relative; z-index:50; flex-shrink:0; } .hs-dots{display:flex; gap:6px} .hs-dots span{width:11px; height:11px; border-radius:50%} .hs-dots span:nth-child(1){background:#ff5f57} .hs-dots span:nth-child(2){background:#febc2e} .hs-dots span:nth-child(3){background:#28c840} .hs-url{ flex:1; max-width:460px; margin:0 auto; padding:4px 14px; border-radius:6px; background:#fff; color:#4b5563; font-family:var(--mono); font-size:11px; letter-spacing:.02em; text-align:center; border:1px solid rgba(0,0,0,.06); display:flex; align-items:center; justify-content:center; gap:6px; } .hs-url svg{width:10px; height:10px; opacity:.6} /* ── Page-header row: kicker + title (description trimmed for height) ── */ .hs-pagehead{ padding:12px 24px 10px; background:#fff; border-bottom:1px solid #f1f5f9; text-align:left; color:#111; } .hs-pagehead .hs-kicker{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:#6b7280; text-transform:uppercase; } .hs-pagehead h4{ font-size:18px; font-weight:800; line-height:1.1; margin:4px 0 0; color:#0b1120; letter-spacing:-.01em; } /* ── Tab row + right-side actions ── */ .hs-tabs{ display:flex; align-items:center; gap:8px; padding:12px 24px; background:#fff; border-bottom:1px solid #e5e7eb; position:relative; } .hs-tab{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:22px; font-size:11px; font-weight:600; color:#6b7280; background:#fff; border:1px solid #e5e7eb; } .hs-tab svg{width:11px; height:11px} .hs-tab.is-active{background:#0b1120; color:#fff; border-color:#0b1120} .hs-tab .hs-tab-check{ width:12px; height:12px; border-radius:50%; background:#10b981; color:#fff; font-size:8px; display:inline-flex; align-items:center; justify-content:center; margin-left:4px; } .hs-tab-spacer{flex:1} .hs-action{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:8px; font-size:11px; font-weight:600; color:#374151; background:#fff; border:1px solid #e5e7eb; } .hs-action.primary{background:#0b1120; color:#fff; border-color:#0b1120} .hs-action svg{width:11px; height:11px} /* ── Process-group filter chips row ── */ .hs-chips{ display:flex; flex-wrap:wrap; gap:5px; padding:12px 24px 12px 16px; background:#fff; border-bottom:1px solid #f1f5f9; } .hs-chip{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; padding:4px 12px; border-radius:999px; background:#fff; color:#6b7280; border:1px solid #e5e7eb; text-transform:uppercase; font-weight:600; } .hs-chip.is-active{background:#0b1120; color:#fff; border-color:#0b1120} /* ── Body grid: sidebar + main, with floating chat overlay ── */ .hs-body{ display:grid; grid-template-columns:230px 1fr; min-height:340px; background:#fafafa; font-size:12px; color:#1f2937; position:relative; } /* ── Left pane: grouped process list ── */ .hs-pane-nav{ background:#fff; border-right:1px solid #eef0f4; padding:10px 0; overflow:hidden; } .hs-nav-group{ padding:14px 16px 4px; font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#9ca3af; } .hs-nav-item{ display:flex; flex-direction:column; gap:2px; padding:8px 16px; cursor:default; border-left:3px solid transparent; position:relative; } .hs-nav-item .hs-nav-code{ font-family:var(--mono); font-size:9px; color:#9ca3af; letter-spacing:.04em; } .hs-nav-item .hs-nav-title{ font-size:12px; color:#1f2937; line-height:1.3; font-weight:500; } .hs-nav-item.is-active{ background:#f3f4f6; border-left-color:var(--purple); } .hs-nav-item.is-active .hs-nav-code{color:var(--purple); font-weight:600} .hs-nav-item.is-active .hs-nav-title{color:#111; font-weight:600} .hs-nav-item .hs-nav-caret{ position:absolute; right:10px; top:10px; font-size:12px; color:#9ca3af; } /* ── Middle pane: opened process ── */ .hs-pane-main{padding:14px 20px 30px; position:relative} .hs-crumb{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:#9ca3af; text-transform:uppercase; margin-bottom:4px; } .hs-process-id{font-family:var(--mono); font-size:10px; color:#9ca3af} .hs-process-title{ font-size:16px; font-weight:700; color:#0b1120; letter-spacing:-.01em; margin:2px 0 10px; } /* Level banner */ .hs-level{ background:#f3f4f6; border:1px solid #e5e7eb; border-radius:8px; padding:8px 12px; margin-bottom:6px; font-size:11px; font-weight:600; color:#111; } .hs-pa{ background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:8px 12px; margin-bottom:8px; font-size:11px; font-weight:600; color:#111; } /* GP card */ .hs-gp{ background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:10px 12px; margin-bottom:8px; } .hs-gp-id{font-family:var(--mono); font-size:9px; color:#6b7280} .hs-gp-title{font-size:12px; font-weight:700; color:#0b1120; margin:2px 0 4px} .hs-gp-desc{font-size:10px; color:#4b5563; line-height:1.35; margin-bottom:8px} .hs-gp-actions{display:flex; gap:6px; flex-wrap:wrap} .hs-gp-act{ font-family:var(--mono); font-size:9px; letter-spacing:.08em; padding:5px 10px; border-radius:6px; background:#fff; color:#6b7280; border:1px solid #e5e7eb; text-transform:uppercase; font-weight:600; } .hs-gp-act.comment:hover, .hs-gp-act.comment{color:var(--purple); border-color:#e9d5ff} .hs-gp-act.weakness{color:#b91c1c; border-color:#fecaca} .hs-gp-act.strength{color:#15803d; border-color:#bbf7d0} .hs-gp-act.question{color:#1d4ed8; border-color:#bfdbfe} .hs-gp-act .plus{font-size:11px; margin-right:3px} /* BP group header */ .hs-bp-group-label{ font-family:var(--mono); font-size:9px; letter-spacing:.14em; color:#9ca3af; text-transform:uppercase; margin:10px 0 4px; } .hs-bp{ background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:12px 14px; margin-bottom:8px; } .hs-bp-head{ display:flex; align-items:flex-start; gap:10px; } .hs-bp-num{ width:24px; height:24px; border-radius:50%; background:var(--purple-tint); color:var(--purple); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .hs-bp-id{font-family:var(--mono); font-size:10px; color:#9ca3af} .hs-bp-title{font-size:13px; color:#0b1120; font-weight:700; line-height:1.3; margin:2px 0 3px} .hs-bp-desc{font-size:11px; color:#4b5563; line-height:1.4} .hs-bp-ratings{display:flex; gap:3px; flex-shrink:0; align-self:flex-start; margin-top:2px} /* Base pill — positional selectors below assign the proper ASPICE rating colour to each of the four pills (N=red, P=orange, L=yellow, F=green) so the palette is recognisable at a glance even in the marketing mockup. Unselected pills use a muted tint; selected pills (.sel-*) get the full saturated version + a bold border. */ .hs-bp-ratings span{ width:20px; height:20px; border-radius:5px; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; border:1px solid transparent; } /* ── Muted (unselected) palette ── matches the in-app rating pills */ .hs-bp-ratings span:nth-child(1){background:#fef2f2; color:#dc2626; border-color:#fecaca} .hs-bp-ratings span:nth-child(2){background:#fff7ed; color:#ea580c; border-color:#fed7aa} .hs-bp-ratings span:nth-child(3){background:#fefce8; color:#ca8a04; border-color:#fde68a} .hs-bp-ratings span:nth-child(4){background:#f0fdf4; color:#16a34a; border-color:#bbf7d0} /* ── Bold (selected) palette — .sel-* wins over the nth-child rules above thanks to specificity (class > pseudo-class) */ .hs-bp-ratings span.sel-N{background:#fca5a5; color:#7f1d1d; border-color:#dc2626; box-shadow:0 0 0 2px rgba(220,38,38,.2)} .hs-bp-ratings span.sel-P{background:#fdba74; color:#7c2d12; border-color:#ea580c; box-shadow:0 0 0 2px rgba(234,88,12,.2)} .hs-bp-ratings span.sel-L{background:#fde68a; color:#78350f; border-color:#ca8a04; box-shadow:0 0 0 2px rgba(202,138,4,.2)} .hs-bp-ratings span.sel-F{background:#86efac; color:#14532d; border-color:#16a34a; box-shadow:0 0 0 2px rgba(22,163,74,.2)} /* Findings attached under BP/GP */ .hs-finding{ margin-top:8px; padding:7px 10px; border-left:3px solid var(--purple); background:linear-gradient(90deg, var(--purple-tint), #fff 60%); font-size:10px; line-height:1.4; color:#374151; border-radius:3px; } .hs-finding.weak{border-left-color:#EF4444; background:linear-gradient(90deg, #fef2f2, #fff 60%)} .hs-finding.question{border-left-color:#3b82f6; background:linear-gradient(90deg, #eff6ff, #fff 60%)} .hs-finding-tag{ display:inline-block; margin-right:5px; font-family:var(--mono); font-size:9px; font-weight:700; color:#6b7280; } .hs-finding-ai{ display:inline-block; padding:0 4px; border-radius:3px; background:#7C3AED; color:#fff; font-size:8px; font-weight:700; letter-spacing:.05em; vertical-align:middle; margin-right:4px; } /* ── Floating team-chat widget (bottom-right overlay) ── */ .hs-chat{ position:absolute; bottom:30px; right:16px; width:260px; background:#0b1120; color:#e2e8f0; border-radius:12px; overflow:hidden; box-shadow:0 20px 40px -10px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05); display:flex; flex-direction:column; } .hs-chat-head{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); } .hs-chat-head-title{font-size:12px; font-weight:700; color:#fff} .hs-chat-head-sub{font-size:9px; color:#64748b} .hs-chat-head-actions{margin-left:auto; display:flex; gap:6px} .hs-chat-head-actions span{ width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:10px; } .hs-chat-body{padding:16px 12px; font-size:11px; color:#64748b; text-align:center; min-height:70px} .hs-chat-msg{display:flex; gap:6px; align-items:flex-start; margin-bottom:8px} .hs-chat-msg .av{ width:22px; height:22px; border-radius:50%; flex-shrink:0; background:#3b82f6; color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; } .hs-chat-msg.mine{flex-direction:row-reverse} .hs-chat-msg.mine .av{background:var(--purple)} .hs-chat-bubble{ background:#1e293b; padding:6px 9px; border-radius:8px; font-size:10px; line-height:1.35; max-width:78%; color:#e2e8f0; } .hs-chat-msg.mine .hs-chat-bubble{background:var(--purple); color:#fff} .hs-chat-input{ display:flex; align-items:center; gap:6px; padding:10px 12px; border-top:1px solid rgba(255,255,255,.06); } .hs-chat-input-field{ flex:1; padding:6px 10px; border-radius:16px; background:rgba(255,255,255,.06); color:#94a3b8; font-size:10px; } .hs-chat-send{ width:26px; height:26px; border-radius:50%; background:#fff; color:#0b1120; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; } /* Mobile: progressively hide non-essential parts so the mockup still reads on narrow screens without horizontal scroll. */ @media (max-width:1000px){ .hero-safari{max-width:95%} .hs-chat{width:220px} } @media (max-width:820px){ .hs-pagehead h4{font-size:18px} .hs-body{grid-template-columns:160px 1fr} .hs-nav-item .hs-nav-title{font-size:11px} .hs-chat{display:none} .hs-tabs .hs-action{display:none} .hs-tab:nth-child(n+3){display:none} .hs-tab-spacer{display:none} .hs-chip:nth-child(n+7){display:none} } @media (max-width:560px){ .hero-safari{margin-top:36px; border-radius:10px} .hs-body{grid-template-columns:70px 1fr; min-height:380px} .hs-pane-nav{padding:6px 0} .hs-nav-item{padding:6px 8px} .hs-nav-item .hs-nav-title{display:none} .hs-nav-group{padding:8px 8px 2px; font-size:8px} .hs-pane-main{padding:12px 12px 30px} .hs-bp-ratings{display:none} .hs-process-title{font-size:15px} .hs-chips{padding:8px 12px} .hs-tabs{padding:8px 12px} .hs-pagehead{padding:12px 14px} .hs-url{display:none} } /* ============================================================ PLAN CARDS — new layout: Pro sits in the middle with a living gradient halo; all cards centre their heading + CTA. ============================================================ */ .plan-card{ text-align:center; /* was inherit (left) */ align-items:stretch; } .plan-card h3{text-align:center} .plan-tagline{text-align:center} /* keep the feature bullets left-aligned — they read better that way with the checkmark + sentence than centred */ .plan-features{text-align:left; display:block} .plan-card .btn{ align-self:center; /* centre the Contact-us CTA */ min-width:180px; } /* Pro plan highlight — sits in the middle column. The card interior stays pure white like the other plans; only the border animates. The padding+mask trick draws the gradient in a 3px ring around the card and hides the inside so nothing bleeds through. */ .plan-pro-highlight{ position:relative; border:none; background:#fff; box-shadow:0 24px 48px -12px rgba(124,58,237,.35); transform:scale(1.03); } .plan-pro-highlight::before{ /* 3px animated gradient ring around the card. content-box mask hides the middle so the inside stays flat white. */ content:''; position:absolute; inset:-3px; border-radius:calc(var(--radius) + 3px); padding:3px; background:linear-gradient(110deg, #7C3AED, #3b82f6, #06b6d4, #ec4899, #f59e0b, #a855f7, #7C3AED); background-size:300% 100%; animation:ai-sheen-shift 9s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .plan-pro-highlight::after{ /* Badge on top reading "MOST POWERFUL" with its own sheen */ content:'✨ MOST POWERFUL'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:10px; letter-spacing:.12em; padding:5px 14px; color:#fff; background:linear-gradient(110deg, #7C3AED, #3b82f6, #ec4899, #f59e0b, #7C3AED); background-size:300% 100%; animation:ai-sheen-shift 6s linear infinite; border-radius:20px; font-weight:700; text-transform:uppercase; white-space:nowrap; box-shadow:0 4px 12px rgba(124,58,237,.4); } .plan-pro-highlight:hover{transform:scale(1.03) translateY(-4px)} @media (max-width:760px){ /* Don't scale on stacked mobile layout — cards are full-width */ .plan-pro-highlight{transform:none} .plan-pro-highlight:hover{transform:translateY(-4px)} } /* ============================================================ REQUEST-A-DEMO button — replaces the black btn-primary in the hero with a branded purple pill that shines. Used with class combo `btn btn-demo`. ============================================================ */ .btn-demo{ background:linear-gradient(110deg,#7C3AED 0%, #a855f7 50%, #7C3AED 100%); background-size:200% 100%; color:#fff; box-shadow: 0 10px 28px -6px rgba(124,58,237,.55), 0 0 0 1px rgba(255,255,255,.15) inset; animation:ai-sheen-shift 8s linear infinite; } .btn-demo:hover{ transform:translateY(-1px); box-shadow: 0 14px 36px -6px rgba(124,58,237,.7), 0 0 0 1px rgba(255,255,255,.25) inset; } /* ============================================================ HERO SAFARI FRAME — the Explorer mock lives inside a Safari-style browser window with traffic-light dots and a fake URL bar. A slight 3D tilt is driven by scroll position (via --tilt) for a bit of parallax. No laptop. ============================================================ */ .safari-scene{ perspective:3200px; perspective-origin:50% 35%; padding:24px 0 24px; } .safari-scene .hero-safari{ /* Clean Safari window — white card, no colourful glow. */ max-width:1180px; margin:64px auto 0; position:relative; z-index:1; background:#fff; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow: 0 30px 70px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); transform:rotateX(var(--tilt, 0deg)); transition:transform .25s ease-out; will-change:transform; /* Fixed viewport so inner content can scroll without pushing the page height around. */ height:clamp(520px, 68vh, 720px); } /* No ambient glow — the ::before from the old styling is neutralised. */ .safari-scene .hero-safari::before{ content:none; } /* Inner scrollable content area (holds the Explorer page). Flex:1 so it fills the space between the fixed chrome/tabs and the bottom — the AI chat panel floats on top. */ .ex-scroll{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; background:#fff; -webkit-overflow-scrolling:touch; } .ex-scroll::-webkit-scrollbar{ width:6px } .ex-scroll::-webkit-scrollbar-track{ background:transparent } .ex-scroll::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.18); border-radius:3px; } /* ============================================================ LOGIN BOOT OVERLAY — lives on top of the dashboard inside the screen. Visible while the lid opens, then fades out to reveal the dashboard underneath. ============================================================ */ .laptop-boot{ position:absolute; inset:0; z-index:30; display:flex; align-items:center; justify-content:center; background: radial-gradient(ellipse at 50% 40%, #1a0f2e 0%, #0a0618 55%, #05030f 100%); transition:opacity .7s ease, transform .7s ease, visibility .7s; padding:20px; } .laptop-boot.is-hidden{ opacity:0; transform:scale(1.04); visibility:hidden; pointer-events:none; } .boot-card{ width:min(340px, 72%); padding:22px 26px 24px; background:rgba(22,18,40,.82); border:1px solid rgba(124,58,237,.22); border-radius:10px; box-shadow: 0 30px 60px -12px rgba(124,58,237,.45), 0 0 0 1px rgba(255,255,255,.04) inset; text-align:center; backdrop-filter:blur(8px); } .boot-brand{ font-family:var(--mono, 'JetBrains Mono', monospace); font-size:20px; font-weight:800; letter-spacing:.18em; background:linear-gradient(110deg, #7C3AED 0%, #3b82f6 25%, #06b6d4 40%, #ec4899 60%, #f59e0b 75%, #a855f7 90%, #7C3AED 100%); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:ai-sheen-shift 4s linear infinite; margin-bottom:4px; } .boot-sub{ font-size:10px; color:rgba(255,255,255,.55); margin-bottom:16px; letter-spacing:.02em; } .boot-field{ text-align:left; font-size:9px; font-weight:700; color:rgba(255,255,255,.72); margin-bottom:4px; letter-spacing:.06em; text-transform:uppercase; } .boot-input{ width:100%; box-sizing:border-box; padding:7px 10px; margin-bottom:10px; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.09); border-radius:5px; font-size:11px; color:#fff; display:flex; align-items:center; min-height:26px; text-align:left; } .boot-input .cursor{ display:inline-block; width:1px; height:11px; margin-left:1px; background:#a78bfa; animation:boot-caret 1s steps(1) infinite; } @keyframes boot-caret{ 50%{ opacity:0 } } .boot-btn{ width:100%; margin-top:4px; padding:9px 14px; background:linear-gradient(110deg,#7C3AED,#a855f7,#7C3AED); background-size:200% 100%; animation:ai-sheen-shift 3s linear infinite; color:#fff; font-weight:700; font-size:12px; border:0; border-radius:5px; letter-spacing:.02em; } /* Once the boot sequence nears the end, the button pulses briefly to suggest "the sign-in button is being pressed". */ .laptop-boot.is-signing .boot-btn{ animation: ai-sheen-shift 3s linear infinite, boot-press .4s ease-out 1; } @keyframes boot-press{ 50%{ transform:scale(.97); box-shadow:0 0 0 4px rgba(168,85,247,.25); } } /* Reduced motion: drop all animated flourishes + boot sequence. */ @media (prefers-reduced-motion: reduce){ .ai-sheen{ animation:ai-sheen-shift 9s linear infinite; } .laptop-lid{ transition:none; transform:rotateX(10deg); } .laptop.is-booting .laptop-lid{ transition:none; } .laptop-boot{ display:none; } } /* ============================================================ EXPLORER VIEW MOCK — lives inside the laptop screen, matches the real Assessoris Explorer page (top bar, tabs, chips, sidebar, process detail, floating AI chat panel). All metrics are tuned for a 16:10 screen ~1100px wide. ============================================================ */ /* Top bar (black) — fixed at the top of the screen (first flex child) */ .ex-topbar{ display:flex; align-items:center; justify-content:space-between; background:#0a0d18; color:#fff; padding:10px 20px; height:44px; flex-shrink:0; z-index:5; } .ex-topbar-brand{ font-family:var(--mono, 'JetBrains Mono', monospace); font-weight:800; letter-spacing:.18em; font-size:13px; } .ex-topbar-right{ display:flex; align-items:center; gap:16px; } .ex-topbar-label{ font-family:var(--mono, monospace); font-size:9px; letter-spacing:.18em; color:rgba(255,255,255,.4); } .ex-topbar-user{ display:flex; align-items:center; gap:8px; padding:4px 10px 4px 4px; border-radius:999px; background:rgba(255,255,255,.03); } .ex-topbar-avatar{ width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg, #7C3AED, #ec4899); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; } .ex-topbar-name{ font-size:12px; color:#fff; } .ex-topbar-role{ font-family:var(--mono, monospace); font-size:9px; font-weight:700; letter-spacing:.1em; padding:2px 8px; border-radius:999px; background:rgba(124,58,237,.2); color:#a78bfa; border:1px solid rgba(167,139,250,.3); } .ex-topbar-caret{ font-size:10px; color:rgba(255,255,255,.5); } /* Primary tabs (white bar) — sits below the topbar, doesn't scroll */ .ex-maintabs{ display:flex; gap:4px; background:#fff; padding:0 20px; border-bottom:1px solid #e5e7eb; flex-shrink:0; z-index:4; } .ex-maintab{ display:flex; align-items:center; gap:7px; padding:12px 14px; font-size:12px; font-weight:600; color:#6b7280; border-bottom:2px solid transparent; cursor:default; } .ex-maintab svg{ width:14px; height:14px; } .ex-maintab.is-active{ color:#111; border-bottom-color:#111; } .ex-maintab-ai{ background:linear-gradient(110deg, #7C3AED 0%, #3b82f6 20%, #06b6d4 35%, #ec4899 55%, #f59e0b 70%, #a855f7 85%, #7C3AED 100%); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation:ai-sheen-shift 9s linear infinite; } .ex-maintab-ai svg{ stroke:#a855f7; -webkit-text-fill-color:initial; color:#a855f7; } /* Page wrapper — tighter top padding to kill the big gap above the "Ask Assessoris AI" pill. */ .ex-page{ padding:18px 28px 40px; } /* Reset the .hero's dark-mode text defaults (white p/h1/h2) for any content inside the Safari mock — otherwise descriptions render white-on-white and are invisible until selected. */ .hero-safari p, .hero-safari h1, .hero-safari h2, .hero-safari h3, .hero-safari h4{ color:#111827; margin:0; background:none; -webkit-text-fill-color:currentColor; letter-spacing:normal; } .hero-safari .ex-kicker{ font-family:var(--mono, monospace); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:#6b7280; margin-bottom:6px; } .hero-safari .ex-title{ font-size:22px; font-weight:800; letter-spacing:-.02em; color:#0b1120; margin:0 0 6px; } .hero-safari .ex-desc{ font-size:10.5px; line-height:1.5; color:#111827; max-width:640px; margin:0 0 10px; } /* Ask-AI pill */ .ex-askai{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; position:relative; isolation:isolate; background:#fff; font-size:11px; color:#4b5563; margin-bottom:18px; } .ex-askai::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:-1; background:linear-gradient(110deg, #7C3AED, #3b82f6, #06b6d4, #ec4899, #f59e0b, #a855f7, #7C3AED); background-size:300% 100%; animation:ai-sheen-shift 9s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .ex-askai-star{ color:#ec4899; } .ex-askai-sub{ color:#9ca3af; } /* Version toggle */ .ex-version{ display:inline-flex; gap:0; margin-bottom:18px; padding:3px; background:#f3f4f6; border-radius:999px; border:1px solid #e5e7eb; } .ex-version-btn{ padding:4px 14px; border-radius:999px; font-family:var(--mono, monospace); font-size:10px; font-weight:700; letter-spacing:.05em; color:#6b7280; } .ex-version-btn.is-active{ background:#111; color:#fff; } /* Sub-tabs */ .ex-subtabs{ display:flex; gap:24px; border-bottom:1px solid #e5e7eb; margin-bottom:14px; } .ex-subtab{ padding:10px 0; font-size:12px; font-weight:600; color:#6b7280; border-bottom:2px solid transparent; margin-bottom:-1px; } .ex-subtab.is-active{ color:#111; border-bottom-color:#111; } /* Body grid: sidebar + main */ .ex-body{ display:grid; grid-template-columns:220px 1fr; gap:18px; } /* Sidebar */ .ex-nav{ min-width:0; } .ex-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:14px; } .ex-chip{ font-family:var(--mono, monospace); font-size:9px; font-weight:700; letter-spacing:.06em; padding:4px 8px; border-radius:999px; background:#fff; color:#6b7280; border:1px solid #e5e7eb; } .ex-chip.is-active{ background:#111; color:#fff; border-color:#111; } .ex-nav-group{ font-family:var(--mono, monospace); font-size:9px; letter-spacing:.15em; color:#9ca3af; padding:10px 0 6px; border-bottom:1px solid #f0f0f0; margin-bottom:4px; } .ex-nav-item{ padding:10px 12px; border-radius:6px; margin-bottom:2px; cursor:default; } .ex-nav-item.is-active{ background:#f3f4f6; box-shadow:inset 3px 0 0 #111; } .ex-nav-code{ font-family:var(--mono, monospace); font-size:9px; letter-spacing:.08em; color:#6b7280; margin-bottom:2px; } .ex-nav-title{ font-size:12px; font-weight:600; color:#111; margin-bottom:2px; line-height:1.35; } .ex-nav-bp{ font-family:var(--mono, monospace); font-size:8px; letter-spacing:.1em; color:#9ca3af; } /* Main pane */ .ex-main{ min-width:0; padding:0 4px; } .ex-crumb{ font-family:var(--mono, monospace); font-size:9px; letter-spacing:.15em; color:#9ca3af; margin-bottom:4px; } .ex-process-code{ font-family:var(--mono, monospace); font-size:12px; color:#6b7280; margin-bottom:4px; } .ex-process-title{ font-size:24px; font-weight:800; color:#0b1120; margin-bottom:20px; display:flex; align-items:center; gap:10px; } .ex-star{ color:#d1d5db; font-size:20px; } .ex-section-label{ font-family:var(--mono, monospace); font-size:9px; letter-spacing:.18em; color:#9ca3af; margin:22px 0 10px; } .ex-purpose{ padding:14px 16px; background:#fff; border:1px solid #e5e7eb; border-radius:6px; font-size:12px; color:#374151; line-height:1.5; } .ex-outcomes{ display:flex; flex-direction:column; gap:8px; } .ex-outcome{ display:flex; align-items:flex-start; gap:10px; padding:10px 14px; background:#fff; border:1px solid #e5e7eb; border-radius:6px; font-size:12px; color:#374151; line-height:1.45; } .ex-outcome-num{ font-family:var(--mono, monospace); color:#9ca3af; font-size:11px; flex-shrink:0; } .ex-bp{ display:flex; gap:14px; padding:14px 16px; margin-bottom:10px; background:#fff; border:1px solid #e5e7eb; border-radius:8px; } .ex-bp-num{ width:24px; height:24px; border-radius:50%; background:#f3f4f6; color:#6b7280; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .ex-bp-body{ flex:1; min-width:0; } .ex-bp-code{ font-family:var(--mono, monospace); font-size:9px; letter-spacing:.1em; color:#9ca3af; margin-bottom:2px; } .ex-bp-title{ font-size:13px; font-weight:700; color:#0b1120; margin-bottom:4px; } .ex-bp-desc{ font-size:11px; color:#4b5563; line-height:1.5; margin-bottom:10px; } .ex-bp-actions{ display:flex; flex-wrap:wrap; gap:6px; } .ex-bp-action{ font-family:var(--mono, monospace); font-size:8px; font-weight:700; letter-spacing:.08em; padding:4px 10px; border-radius:4px; border:1px dashed; background:transparent; } .ex-bp-action.note{ color:#3b82f6; border-color:#93c5fd; } .ex-bp-action.important{ color:#ef4444; border-color:#fca5a5; } .ex-bp-action.question{ color:#f59e0b; border-color:#fcd34d; } /* Floating AI chat panel — pinned to bottom-right of the SCREEN (not the scrollable content). Stays in place while the page scrolls behind it. */ .ex-aichat{ position:absolute; right:18px; bottom:18px; width:340px; max-height:62%; background:#0f1020; color:#fff; border-radius:10px; box-shadow:0 18px 40px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); overflow:hidden; display:flex; flex-direction:column; z-index:20; } .ex-aichat-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:#0a0b16; border-bottom:1px solid rgba(255,255,255,.06); } .ex-aichat-title{ font-size:12px; font-weight:600; color:#fff; display:inline-flex; align-items:center; gap:8px; } .ex-aichat-badge{ font-family:var(--mono, monospace); font-size:8px; letter-spacing:.1em; font-weight:700; padding:2px 6px; border-radius:3px; background:rgba(124,58,237,.2); color:#a78bfa; border:1px solid rgba(167,139,250,.3); } .ex-aichat-actions{ display:flex; gap:10px; color:rgba(255,255,255,.5); font-size:12px; } .ex-aichat-body{ padding:14px; font-size:11px; line-height:1.5; overflow-y:auto; color:rgba(255,255,255,.75); } .ex-aichat-heading{ font-size:13px; font-weight:700; margin-bottom:6px; color:#fff; } .ex-aichat-desc{ margin-bottom:10px; color:rgba(255,255,255,.7); } .ex-aichat-sugs{ display:flex; flex-wrap:wrap; gap:5px; } .ex-aichat-sug{ padding:4px 8px; border-radius:4px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); font-size:9px; color:rgba(255,255,255,.8); } .ex-aichat-input{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:rgba(255,255,255,.03); border-top:1px solid rgba(255,255,255,.05); } .ex-aichat-field{ flex:1; padding:7px 10px; border-radius:6px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); color:rgba(255,255,255,.4); font-size:10px; } .ex-aichat-send{ width:26px; height:26px; border-radius:6px; background:linear-gradient(135deg, #7C3AED, #3b82f6); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; } /* ============================================================ RESPONSIVE — Explorer mock inside Safari frame. Below 900px the sidebar narrows and chat shrinks; below 700px the frame becomes a clean card with a stacked Explorer layout so it reads cleanly on phones. ============================================================ */ @media (max-width:1000px){ .safari-scene .hero-safari{ max-width:94%; } } @media (max-width:900px){ .ex-aichat{ width:260px; font-size:10px; } .ex-body{ grid-template-columns:180px 1fr; gap:12px; } .ex-page{ padding:16px 20px 32px; } .ex-title{ font-size:22px; } .ex-topbar-name{ display:none; } } @media (max-width:700px){ .safari-scene{ perspective:none; padding:0; } .safari-scene .hero-safari{ margin-top:36px; height:560px; max-width:100%; border-radius:10px; transform:none !important; transition:none; } .safari-scene .hero-safari::before{ display:none; } .hs-chrome{ padding:8px 10px; } .hs-url{ font-size:10px; padding:3px 8px; } .ex-topbar{ padding:8px 12px; height:38px; } .ex-topbar-brand{ font-size:11px; } .ex-topbar-caret{ display:none; } .ex-maintabs{ padding:0 12px; } .ex-maintab{ padding:10px 8px; font-size:11px; } .ex-maintab svg{ width:12px; height:12px; } .ex-page{ padding:14px 14px 28px; } .hero-safari .ex-title{ font-size:18px; } .hero-safari .ex-desc{ font-size:10px; } .ex-body{ grid-template-columns:1fr; } .ex-nav{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:6px; } .ex-chips{ grid-column:1/-1; } .ex-nav-group{ grid-column:1/-1; } .ex-nav-item{ padding:8px 10px; } .ex-nav-item.is-active{ box-shadow:none; background:#eef2ff; border:1px solid #c7d2fe; } .ex-process-title{ font-size:18px; } .ex-bp{ padding:12px; } /* Sign-in overlay on mobile — shrink the card so it fits. */ .laptop-boot{ padding:14px; } .boot-card{ width:min(260px, 85%); padding:16px 18px; } .boot-brand{ font-size:16px; letter-spacing:.12em; margin-bottom:2px; } .boot-sub{ font-size:9px; margin-bottom:10px; } .boot-field{ font-size:8px; } .boot-input{ padding:5px 8px; min-height:22px; font-size:10px; margin-bottom:8px; } .boot-btn{ padding:7px 10px; font-size:11px; } /* Floating AI chat on mobile — compact card in the corner. */ .ex-aichat{ width:200px; right:10px; bottom:10px; max-height:220px; font-size:10px; } .ex-aichat-head{ padding:8px 10px; } .ex-aichat-title{ font-size:10px; gap:4px; } .ex-aichat-badge{ font-size:7px; padding:1px 4px; } .ex-aichat-body{ padding:10px; font-size:9px; } .ex-aichat-heading{ font-size:10px; } .ex-aichat-sug{ font-size:8px; padding:3px 6px; } .ex-aichat-input{ padding:7px 9px; } .ex-aichat-field{ font-size:9px; padding:5px 7px; } .ex-aichat-send{ width:22px; height:22px; font-size:10px; } } @media (max-width:480px){ /* Even tighter — but the chat + sign-in stay visible. */ .ex-chips .ex-chip:nth-child(n+9){ display:none; } .ex-topbar-label{ display:none; } /* Slightly taller so the heading + description + 2 kept suggestion bubbles + input all fit cleanly. */ .ex-aichat{ width:170px; max-height:300px; } /* Drop the "ASPICE 4.0" badge on mobile — the header gets crowded at this width. */ .ex-aichat-badge{ display:none; } /* Keep only the 1st ("SYS.2 4.0 vs 4.1") and 3rd ("What is a verification criteria?") suggestion bubbles — hide the other two so the compact chat still reads cleanly. */ .ex-aichat-sug:nth-child(2), .ex-aichat-sug:nth-child(4){ display:none; } .boot-card{ width:min(220px, 88%); padding:14px 16px; } } /* ============================================================ SHOWCASE SECTION ANIMATIONS — all scroll-triggered. Each animation element starts hidden (invisible + slightly shifted) and gets an `.is-shown` class from the JS observer once the section enters the viewport. ============================================================ */ /* Explorer AI chat + Team chat — message reveal */ [data-anim="explorer-chat"] .chat-msg, [data-anim="team-chat"] .chat-msg{ opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; } [data-anim="explorer-chat"] .chat-msg.is-shown, [data-anim="team-chat"] .chat-msg.is-shown{ opacity:1; transform:none; } /* Typing-dots bubble — inserted by JS. Three bouncing dots in a chat bubble styled like an AI reply-in-progress. */ .chat-typing{ opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; } .chat-typing.is-shown{ opacity:1; transform:none; } .chat-typing.is-fading{ opacity:0; transform:translateY(-4px); } .chat-typing .chat-bubble{ display:inline-flex; gap:4px; padding:10px 14px; } .chat-typing .chat-bubble span{ width:6px; height:6px; border-radius:50%; background:#9ca3af; animation:chat-dot 1s ease-in-out infinite; } .chat-typing .chat-bubble span:nth-child(2){ animation-delay:.15s; } .chat-typing .chat-bubble span:nth-child(3){ animation-delay:.30s; } @keyframes chat-dot{ 0%, 80%, 100% { transform:translateY(0); opacity:.4; } 40% { transform:translateY(-3px); opacity:1; } } /* Assessment rating selection animation. When .is-shown is on the mock, the unselected pills dim smoothly, and the chosen pill gets a quick "press" bump. */ [data-anim="assessment-ratings"] .app-mock-ratings span{ transition:opacity .4s ease, filter .4s ease, transform .2s ease, box-shadow .2s ease; } [data-anim="assessment-ratings"] .app-mock-ratings span.is-dimmed{ opacity:.35; filter:grayscale(.8); } [data-anim="assessment-ratings"] .app-mock-ratings span.rating-selected{ animation:rating-press .45s ease-out; } @keyframes rating-press{ 0% { transform:scale(1); } 40% { transform:scale(.88); box-shadow:0 0 0 4px rgba(124,58,237,.25); } 100% { transform:scale(1); box-shadow:none; } } /* AI Gap Analysis — findings appear one after another as if the AI is producing them live. Cards start with a subtle scanning shimmer; findings slide/fade in on scroll-in. */ [data-anim="ai-gap-findings"] .app-mock-finding{ opacity:0; transform:translateY(6px); transition:opacity .55s ease, transform .55s ease; } [data-anim="ai-gap-findings"] .app-mock-finding.is-shown{ opacity:1; transform:none; } /* A thin "AI is reading" shimmer across the BP card while the finding is still pending — a gradient swept left → right. */ [data-anim="ai-gap-findings"] .app-mock-bpcard{ position:relative; overflow:hidden; } [data-anim="ai-gap-findings"] .app-mock-bpcard.is-scanning::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, transparent 30%, rgba(124,58,237,.2) 50%, transparent 70%); animation:ai-scan 1.2s linear infinite; pointer-events:none; } @keyframes ai-scan{ 0% { transform:translateX(-100%); } 100% { transform:translateX(100%); } } /* Rating-rule TRIGGERED badge — constant subtle glow pulse so the red warning always feels alive. */ .mock-trigger-badge{ position:relative; animation:trigger-pulse 1.8s ease-in-out infinite; } @keyframes trigger-pulse{ 0%, 100%{ box-shadow:0 0 0 0 rgba(239,68,68,.55), 0 0 8px rgba(239,68,68,.2); } 50%{ box-shadow:0 0 0 6px rgba(239,68,68,0), 0 0 16px rgba(239,68,68,.55); } }