/** * Proactive design tokens. * Every value here is lifted from the approved redesign. Nothing is invented. * Sections must reference these tokens, never raw hex or ad hoc spacing. */ :root { /* ---- Surfaces ------------------------------------------------------- */ --pa-surface: #FBFAF8; /* page ground */ --pa-surface-alt: #F2EFEA; /* alternating warm band */ --pa-surface-sunk: #E4E0D9; --pa-ink: #12141C; /* dark section ground */ --pa-ink-deep: #0A0C12; /* footer, scrolled header */ --pa-ink-black: #06070B; /* video sheet */ --pa-ink-raise: #191C26; /* card hover on dark */ --pa-ink-2: #2B2F38; /* ---- Purple: Proactive is acting here -------------------------------- */ --pa-purple: #5B4BD6; /* primary CTA, active product state */ --pa-purple-hover: #4536B4; --pa-purple-lift: #6D5DE8; /* button hover on dark */ --pa-purple-on-dark: #8E86E4; /* eyebrow, quiet link on dark */ --pa-purple-tint: #DDD7FA; /* selection */ --pa-purple-pale: #EDEAFE; /* body text inside purple cards */ /* ---- Teal: informational, never a second primary --------------------- */ --pa-teal: #238A8F; --pa-teal-on-dark: #66D1D2; --pa-teal-soft: #7FD8D8; --pa-teal-pale: #8BD9D9; /* ---- Text ------------------------------------------------------------ */ --pa-text: #12141C; --pa-text-muted: #3A3F46; --pa-text-soft: #565C64; --pa-text-warm: #6E6659; --pa-text-quiet: #7F7A70; --pa-text-on-dark: #FFFFFF; --pa-text-on-dark-muted: #9AA1B0; --pa-text-on-dark-soft: #8B93A2; --pa-text-on-dark-faint: #A0A7B4; --pa-text-on-dark-bright: #D3D7E0; /* ---- Borders --------------------------------------------------------- */ --pa-border: #E4E0D9; --pa-border-quiet: #E1DCD4; --pa-border-card: #DFDAD2; --pa-border-rule: #DDD8D0; --pa-border-rail: #DCD6CC; --pa-border-strong: #C9C3B8; --pa-border-hover: #B4ADA1; --pa-border-on-dark: rgba(255, 255, 255, 0.13); --pa-border-on-dark-soft: rgba(255, 255, 255, 0.10); /* ---- Status ---------------------------------------------------------- */ --pa-attention: #E8A87C; /* accumulating issues, on dark */ --pa-attention-soft: #C4A793; --pa-error: #96502F; --pa-error-alt: #95502C; /* ---- Typography ------------------------------------------------------ */ --pa-font: Archivo, Helvetica, Arial, sans-serif; --pa-font-alt: Inter, Helvetica, Arial, sans-serif; --pa-hero-size: clamp(42px, 5.4vw, 78px); /* Headings are not one size. The approved design runs three deliberate h2 tiers, and flattening them loses the narrative emphasis. Peak carries the two turning points; statement carries the opening problem and the closing ask; section is the workaday band heading. */ --pa-h2-peak: clamp(35px, 5vw, 74px); /* approach, worksets */ --pa-h2-statement: clamp(33px, 4.8vw, 68px); /* the problem */ --pa-h2-final: clamp(33px, 4.8vw, 70px); /* final CTA */ --pa-h2-section: clamp(29px, 3.7vw, 52px); /* missing, platform, why, direction */ --pa-h3-major: clamp(26px, 3.1vw, 44px); /* approach pivot */ --pa-h3-lead: clamp(26px, 3vw, 42px); /* worksets lead */ --pa-h4-feature: clamp(25px, 2.8vw, 40px); /* capability blocks */ --pa-h4-compare: clamp(23px, 2.6vw, 36px); /* comparison pair */ --pa-h3-size: clamp(24px, 2.6vw, 38px); --pa-h4-size: clamp(20px, 2vw, 28px); --pa-body-lg: 18px; --pa-body: 17px; --pa-body-sm: 15px; --pa-meta: 14px; --pa-micro: 13px; --pa-tracking-tight: -0.03em; --pa-tracking-snug: -0.015em; --pa-tracking-body: -0.005em; --pa-tracking-eyebrow: 0.14em; --pa-tracking-logo: 0.12em; --pa-leading-tight: 1.04; --pa-leading-head: 1.12; --pa-leading-body: 1.65; /* ---- Spacing --------------------------------------------------------- */ --pa-space-1: 6px; --pa-space-2: 10px; --pa-space-3: 14px; --pa-space-4: 18px; --pa-space-5: 22px; --pa-space-6: 26px; --pa-space-7: 34px; --pa-space-8: 44px; --pa-space-9: 64px; --pa-section-y: clamp(68px, 9vw, 132px); --pa-section-y-lg: clamp(72px, 10vw, 150px); --pa-section-y-sm: clamp(56px, 7vw, 104px); --pa-card-pad: clamp(24px, 2.4vw, 32px); --pa-card-pad-lg: clamp(30px, 3vw, 44px); /* ---- Content widths --------------------------------------------------- */ --pa-container: min(1320px, calc(100% - 64px)); --pa-container-gutter-md: 48px; --pa-container-gutter-sm: 36px; --pa-measure: 66ch; --pa-measure-narrow: 54ch; /* ---- Radii ------------------------------------------------------------ */ --pa-radius-xs: 3px; --pa-radius-sm: 4px; --pa-radius: 6px; --pa-radius-lg: 8px; --pa-radius-pill: 999px; /* ---- Shadows ---------------------------------------------------------- */ --pa-shadow-hairline: 0 0 0 1px var(--pa-border-rule); --pa-shadow-float: 0 18px 44px rgba(10, 12, 18, 0.22); --pa-shadow-panel: 0 30px 80px rgba(6, 7, 11, 0.55); /* ---- Motion ----------------------------------------------------------- */ --pa-ease: cubic-bezier(0.25, 1, 0.33, 1); --pa-dur-fast: 0.3s; --pa-dur: 0.4s; --pa-dur-reveal: 0.75s; /* ---- Commerce and licensing ------------------------------------------- Values introduced by the Pricing, Buy, Free Trial, Purchase Confirmation, Manage Licence, Renew, Licensing FAQ, Practice and Support designs. Lifted from those files, not invented, and named by the role they play there. Four values in the supplied designs sat within one or two steps of a token that already existed and carried the same role, so they were mapped rather than duplicated: #C9C3B9 -> --pa-border-strong, #F2EFE9 -> --pa-surface-alt, #DED8CF -> --pa-border-rail, #B3AEA4 -> --pa-border-hover. A grey that is one digit different is not a design decision, it is a copy. */ --pa-text-note: #6B6660; /* supporting note under a panel */ --pa-text-faint: #8A857C; /* meta beside a heading */ --pa-text-placeholder: #9A948A; /* input placeholder */ --pa-text-on-dark-cool: #C3CCD2; /* page hero supporting paragraph */ --pa-text-on-dark-dim: #B9C0CA; --pa-text-on-dark-pale: #E6E9ED; /* ---- Homepage hero ---------------------------------------------------- Values introduced by the redesigned hero, named by the role they play there. Two more in that design sit a step or two from a token with the same role and are mapped: #C3C8D2 (the Autodesk line) -> --pa-text-on-dark-cool, #07070D (the walkthrough frame) -> --pa-ink-black. */ --pa-text-on-dark-quiet: #EBEDF2; /* first line of a two tone statement */ --pa-purple-progress: #7C6FF0; /* walkthrough step progress bar */ /* ---- Hero illustration ------------------------------------------------- The hero's product illustration draws Proactive's own interface, in the interface's colours: cyan where Proactive acts in the model, amber for what it corrected, red for what needs attention. They belong to the drawing, not to the site, and nothing outside .pa-hero-comp may use them. #C3C8D2 in the design's cards is mapped to --pa-text-on-dark-cool. */ --pa-hero-cyan: #1ED6E0; --pa-hero-cyan-ink: #0A111B; /* mark drawn on the cyan */ --pa-hero-amber: #FFCB80; --pa-hero-red: #EE6464; --pa-hero-struck: #6B7382; /* the value that was replaced */ --pa-hero-ring-track: #3A4453; --pa-border-hair: #E7E2DA; /* rule inside a card */ --pa-border-panel: #D3CCC1; /* edge of a raised panel */ --pa-purple-wash: #EEEBFB; /* tick chip ground */ --pa-purple-mist: #F6F4FE; /* selected option ground */ --pa-purple-bright: #B6ADFF; /* link on a dark panel */ --pa-purple-light: #C9C2FF; --pa-purple-deep: #4A4560; --pa-ink-panel: #24272F; /* raised panel on dark */ /* Seat status. Green appears nowhere else on the site and is deliberately confined to this one signal: a computer that is currently checking in. */ --pa-seat-active: #2F7A5E; --pa-seat-idle: var(--pa-border-hover); --pa-seat-released: var(--pa-border-strong); /* ---- Coordination schematic ------------------------------------------- Section 07 only. This is the one place on the site with a red and a green, and they mean "this clearance is at risk" and "this clearance is restored" inside an illustration. They are not product status colours and nothing outside .pa-coord may use them. The loop duration is a token because eleven animations depend on it being the same number. Change it here or the schematic falls out of step. */ --pa-coord-ground: #08080F; --pa-coord-frame: #0B0A14; --pa-coord-step: #5C6472; --pa-coord-risk: #FF5A3C; --pa-coord-risk-wash: rgba(255, 90, 60, 0.16); --pa-coord-risk-ground: rgba(26, 11, 8, 0.95); --pa-coord-ok: #4FBE8F; --pa-coord-ok-ground: rgba(10, 20, 16, 0.94); --pa-coord-loop: 12s; --pa-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ---- Chrome ----------------------------------------------------------- */ --pa-header-h: 74px; --pa-header-h-sm: 64px; --pa-focus-ring: 0 0 0 3px rgba(142, 134, 228, 0.65); --pa-focus-ring-light: 0 0 0 3px rgba(91, 75, 214, 0.35); --pa-z-header: 60; --pa-z-modal: 200; } /* Breakpoints are fixed by the approved responsive design and are documented here for reference. CSS custom properties cannot be used in media queries, so these values are repeated literally in the component stylesheets: 1180 / 1100 / 1080 / 940 / 900 / 860 / 820 / 760 / 720 / 700 / 640 / 520 / 420 / 360 */