/* ============================================================ 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%); } .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} } .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; } .rating-N{background:#fee2e2; color:#b91c1c} .rating-P{background:#fed7aa; color:#9a3412} .rating-L{background:#bbf7d0; color:#15803d} .rating-F{background:#dbeafe; color:#1e40af} .rating-selected{box-shadow:0 0 0 2px var(--gray-900)} .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); } /* ── 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); } .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} .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; color:#9ca3af; background:#f3f4f6; border:1px solid #e5e7eb; } .hs-bp-ratings span.sel-N{background:#fca5a5; color:#7f1d1d; border-color:#f87171} .hs-bp-ratings span.sel-P{background:#fdba74; color:#7c2d12; border-color:#fb923c} .hs-bp-ratings span.sel-L{background:#fde68a; color:#78350f; border-color:#fbbf24} .hs-bp-ratings span.sel-F{background:#86efac; color:#14532d; border-color:#4ade80} /* 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; }