/* GENERATED by scripts/Build-PortalCss.ps1 from aia.css for the client and admin portals. Do not edit; edit aia.css. */ /* AI Assure public site design system. Tokens, layout, components, data visualisation, forms, and motion for aiassure.net. The portals keep using site.css; this file is only loaded by the public site. */ /* Inter, the brand typeface (SIL Open Font Licence, see /assets/fonts/Inter-LICENSE.txt). Self-hosted, so no visitor data goes to a font service. One variable file covers every weight, and its optical size axis tightens large headings. */ @font-face { font-family: "Inter"; src: url("/assets/fonts/InterLatin.woff2") format("woff2"); /* Latin subset (Google Fonts Inter v20, 48 KB). Characters outside it, such as the arrows, use the system font. */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-weight: 100 900; font-style: normal; font-display: swap; } :root { color-scheme: dark light; /* Colour: midnight and ink surfaces */ --ink-950: #020a17; --ink-900: #04112a; --ink-850: #071a38; --ink-800: #0a2347; --ink-700: #10305e; --ink-600: #1a427a; /* Colour: AI Assure blue and light */ --blue-700: #0061b0; --blue-600: #0773b7; --blue-500: #1e8ff0; --blue-400: #38b6ff; --cyan-300: #6fe3ff; --cyan-200: #b5f1ff; /* Colour: clean surfaces */ --white: #ffffff; --mist-50: #f5f9fe; --mist-100: #eaf2fb; --mist-200: #d6e4f3; --slate-700: #31465f; --slate-600: #4a5f7a; --slate-500: #63768f; /* Colour: controlled status */ --ok: #2fd08a; --ok-ink: #0d7a4c; --warn: #ffb547; --warn-ink: #8a5600; --stop: #ff5d6c; --stop-ink: #b3203a; --info: var(--blue-400); /* Text on dark */ --on-dark-1: #eef5ff; --on-dark-2: #b4c6de; --on-dark-3: #8197b4; --line-dark: rgba(140, 186, 255, .16); --line-dark-strong: rgba(140, 186, 255, .3); --glass: rgba(14, 38, 76, .55); --glass-strong: rgba(9, 27, 56, .82); /* Text on light */ --on-light-1: #071a38; --on-light-2: #3c516d; --line-light: #d9e5f2; /* Typography */ --font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-display: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace; --fs-hero: clamp(2.75rem, 6.6vw, 5.9rem); --fs-display: clamp(2.3rem, 5vw, 4.2rem); --fs-h2: clamp(1.9rem, 3.6vw, 3.1rem); --fs-h3: clamp(1.15rem, 1.6vw, 1.35rem); --fs-lead: clamp(1.06rem, 1.45vw, 1.28rem); --fs-body: 1rem; --fs-small: .875rem; --fs-micro: .75rem; /* Spacing */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem; --gutter: clamp(1rem, 4vw, 2.5rem); --max: 1220px; /* Shape and depth */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px; --shadow-glow: 0 0 0 1px rgba(56, 182, 255, .16), 0 18px 40px -24px rgba(0, 0, 0, .7); --shadow-deep: 0 30px 80px -30px rgba(0, 0, 0, .7); --shadow-soft: 0 18px 48px -18px rgba(7, 26, 56, .22); /* Motion */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --t-fast: .18s; --t-med: .42s; --t-slow: .9s; --header-h: 72px; } /* Base */ *, *::before, *::after { box-sizing: border-box; } html { min-width: 320px; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; min-height: 100vh; background: var(--ink-950); color: var(--on-dark-1); font: 400 var(--fs-body)/1.65 var(--font-sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; font-optical-sizing: auto; font-feature-settings: "calt", "cv11"; overflow-x: hidden; } img, svg, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: var(--blue-400); text-underline-offset: .18em; } a:hover { color: var(--cyan-300); } button { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--cyan-300); outline-offset: 3px; border-radius: 6px; } [hidden] { display: none !important; } ::selection { background: rgba(56, 182, 255, .35); color: #fff; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; color: inherit; text-wrap: balance; } h3 { font-size: var(--fs-h3); letter-spacing: -.02em; line-height: 1.25; } p { margin: 0 0 1em; text-wrap: pretty; } .skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .7rem 1rem; border-radius: var(--r-sm); background: #fff; color: var(--ink-900); font-weight: 700; } .skip-link:focus { top: 1rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Layout */ .wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; } .wrap-narrow { width: min(860px, 100% - 2 * var(--gutter)); margin-inline: auto; } .section { position: relative; padding-block: clamp(3.5rem, 7vw, 5.75rem); } .section-tight { padding-block: clamp(3rem, 6vw, 4.5rem); } .section--light { background: var(--mist-50); color: var(--on-light-1); } .section--white { background: #fff; color: var(--on-light-1); } .section--ink { background: var(--ink-900); } .section--light p, .section--white p { color: var(--on-light-2); } .section--light a:not(.btn), .section--white a:not(.btn) { color: var(--blue-700); } .grid { display: grid; gap: var(--s-5); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stack > * + * { margin-top: var(--s-4); } .grid > *, .form > *, .split > *, .hero-grid > *, .cycle > *, .pmap > *, .resolver > *, .wizard > *, .flow-grid > *, .legal > *, .journey-body > * { min-width: 0; } .center { text-align: center; } .center .lead { margin-inline: auto; } /* Type helpers */ .eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: var(--s-4); color: var(--cyan-300); font: 700 var(--fs-micro)/1.2 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; } .eyebrow::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue-400), var(--cyan-300)); } .section--light .eyebrow, .section--white .eyebrow { color: var(--blue-700); } .display { font-size: var(--fs-display); } .h-hero { font-size: var(--fs-hero); letter-spacing: -.045em; line-height: .98; } .h2 { font-size: var(--fs-h2); margin-bottom: var(--s-4); } .lead { max-width: 640px; color: var(--on-dark-2); font-size: var(--fs-lead); line-height: 1.6; } .section--light .lead, .section--white .lead { color: var(--on-light-2); } /* Gradient text is painted only inside its box; letters such as "e" and "2" overhang the box edge and were clipped square. Extra padding (cancelled by a negative margin) widens the paint area, and box-decoration-break repeats it on every wrapped line. */ /* The colour gradient is kept for the home page headline only. Elsewhere the second phrase of a heading is a quieter solid tone, which reads as more considered than colour effects on every page. */ .gradient-text { color: var(--on-dark-2); } .section--light .gradient-text, .section--white .gradient-text { color: var(--on-light-2); } .h-hero .gradient-text { background: linear-gradient(100deg, #fff 0%, var(--cyan-200) 35%, var(--blue-400) 70%, var(--cyan-300) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .12em .08em 0; margin-right: -.12em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .muted { color: var(--on-dark-3); } .small { font-size: var(--fs-small); } .micro { font-size: var(--fs-micro); } .mono { font-family: var(--font-mono); font-size: .85em; } .section-head { max-width: 760px; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .section-head.center { margin-inline: auto; } .section-head .h2 { margin-bottom: var(--s-4); } /* Buttons */ .btn { --btn-bg: transparent; --btn-fg: var(--on-dark-1); --btn-border: var(--line-dark-strong); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: 0 1.35rem; border: 1px solid var(--btn-border); border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); font: 650 .95rem/1 var(--font-sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap; isolation: isolate; transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out), background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .btn:hover { color: var(--btn-fg); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--primary { --btn-fg: #fff; --btn-border: transparent; background: linear-gradient(135deg, var(--blue-500), var(--blue-700) 60%, #0b4fa3); background-origin: border-box; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 1px 2px rgba(2, 10, 23, .3), 0 6px 16px -8px rgba(30, 143, 240, .5); } .btn--primary::after { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(135deg, var(--cyan-300), var(--blue-500)); opacity: 0; transition: opacity var(--t-med) var(--ease-out); } .btn--primary:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .2) inset, 0 2px 4px rgba(2, 10, 23, .3), 0 10px 22px -10px rgba(30, 143, 240, .6); } .btn--primary:hover::after { opacity: .15; } .btn--ghost { --btn-bg: rgba(255, 255, 255, .04); backdrop-filter: blur(10px); } .btn--ghost:hover { --btn-bg: rgba(255, 255, 255, .09); --btn-border: rgba(111, 227, 255, .5); } .section--light .btn--ghost, .section--white .btn--ghost { --btn-bg: #fff; --btn-fg: var(--on-light-1); --btn-border: var(--line-light); backdrop-filter: none; } .section--light .btn--ghost:hover, .section--white .btn--ghost:hover { --btn-border: var(--blue-500); } .btn--light { --btn-bg: #fff; --btn-fg: var(--ink-850); --btn-border: var(--line-light); } .btn--light:hover { --btn-border: var(--blue-500); } .btn--sm { min-height: 40px; padding: 0 1rem; font-size: .88rem; } .btn--block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; } .btn .arrow { transition: transform var(--t-fast) var(--ease-out); } .btn:hover .arrow { transform: translateX(3px); } .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .text-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; text-decoration: none; } .text-link:hover { text-decoration: underline; } /* Page structure */ main { display: block; } .page-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--header-h) + clamp(3.5rem, 9vw, 6.5rem)) 0 clamp(3.5rem, 8vw, 6rem); background: var(--ink-950); } .page-hero .lead { margin-top: var(--s-5); } .page-hero .actions { margin-top: var(--s-6); } .page-hero--compact { padding-bottom: clamp(2.5rem, 6vw, 4rem); } /* Atmosphere: soft layered light, a faint top highlight, fine grain, orbit paths */ .atmos { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .atmos::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 50% at 80% 12%, rgba(30, 143, 240, .30), transparent 70%), radial-gradient(35% 40% at 62% 30%, rgba(111, 227, 255, .07), transparent 70%), radial-gradient(45% 45% at 10% 88%, rgba(111, 227, 255, .10), transparent 70%), radial-gradient(80% 60% at 50% 120%, rgba(16, 48, 94, .9), transparent 70%), linear-gradient(180deg, rgba(140, 186, 255, .05), transparent 28%); } /* Fine grain instead of a grid: adds depth without a visible pattern. */ .atmos::after { content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } .orbit-lines { position: absolute; right: -12%; top: -20%; width: min(900px, 110vw); aspect-ratio: 1; opacity: .55; } .orbit-lines circle { fill: none; stroke: rgba(111, 227, 255, .14); stroke-width: 1; } .orbit-lines .dash { stroke-dasharray: 2 10; stroke: rgba(111, 227, 255, .3); } .field-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* Glass panels and cards */ .panel { position: relative; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--r-lg); background: linear-gradient(160deg, rgba(20, 52, 100, .55), rgba(6, 22, 48, .6)); border: 1px solid var(--line-dark); box-shadow: var(--shadow-deep); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(111, 227, 255, .24), transparent 35%, transparent 70%, rgba(56, 182, 255, .14)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .card { position: relative; padding: clamp(1.3rem, 2.6vw, 1.8rem); border-radius: var(--r-lg); background: rgba(12, 34, 70, .5); border: 1px solid var(--line-dark); transition: transform var(--t-med) var(--ease-out), border-color var(--t-med), background-color var(--t-med), box-shadow var(--t-med); } .card:hover { transform: translateY(-3px); border-color: rgba(111, 227, 255, .35); background: rgba(16, 44, 90, .6); box-shadow: var(--shadow-glow); } .card h3 { margin-bottom: .55rem; } .card p { color: var(--on-dark-2); font-size: .96rem; } .card p:last-child { margin-bottom: 0; } .section--light .card, .section--white .card { background: #fff; border-color: var(--line-light); box-shadow: 0 1px 0 rgba(7, 26, 56, .03); } .section--light .card:hover, .section--white .card:hover { border-color: rgba(30, 143, 240, .45); box-shadow: var(--shadow-soft); } .section--light .card p, .section--white .card p { color: var(--on-light-2); } .icon-tile { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 1.1rem; border-radius: 14px; background: linear-gradient(140deg, rgba(56, 182, 255, .22), rgba(56, 182, 255, .05)); border: 1px solid rgba(111, 227, 255, .25); color: var(--cyan-300); } .icon-tile svg { width: 22px; height: 22px; } .section--light .icon-tile, .section--white .icon-tile { background: var(--mist-100); border-color: var(--mist-200); color: var(--blue-700); } .card-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font-weight: 650; font-size: .93rem; text-decoration: none; } .card-link:hover { text-decoration: underline; } /* Lists */ .check-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; } .check-list li { position: relative; padding-left: 1.9rem; color: var(--on-dark-2); } .check-list li::before { content: ""; position: absolute; left: 0; top: .28em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: rgba(47, 208, 138, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%232fd08a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; box-shadow: inset 0 0 0 1px rgba(47, 208, 138, .35); } .section--light .check-list li, .section--white .check-list li { color: var(--on-light-2); } .section--light .check-list li::before, .section--white .check-list li::before { background-color: rgba(13, 122, 76, .1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%230d7a4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .cross-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; } .cross-list li { position: relative; padding-left: 1.9rem; color: var(--on-dark-2); } .cross-list li::before { content: ""; position: absolute; left: 0; top: .28em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: rgba(255, 93, 108, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 5l6 6M11 5l-6 6' fill='none' stroke='%23ff5d6c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/66% no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 93, 108, .35); } .section--light .cross-list li, .section--white .cross-list li { color: var(--on-light-2); } .trust-strip { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: var(--s-6) 0 0; padding: 0; list-style: none; color: var(--on-dark-2); font-size: .9rem; } .trust-strip li { display: inline-flex; align-items: center; gap: .5rem; } .trust-strip li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-300); box-shadow: 0 0 10px var(--cyan-300); } /* Status chips */ .chip { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .65rem; border-radius: var(--r-pill); font: 650 .76rem/1.2 var(--font-sans); letter-spacing: .01em; white-space: nowrap; border: 1px solid transparent; } .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .chip--allowed { color: var(--ok); background: rgba(47, 208, 138, .12); border-color: rgba(47, 208, 138, .3); } .chip--blocked { color: var(--stop); background: rgba(255, 93, 108, .12); border-color: rgba(255, 93, 108, .32); } .chip--discovered { color: var(--blue-400); background: rgba(56, 182, 255, .12); border-color: rgba(56, 182, 255, .32); } .chip--review { color: var(--warn); background: rgba(255, 181, 71, .12); border-color: rgba(255, 181, 71, .32); } .chip--neutral { color: var(--on-dark-2); background: rgba(255, 255, 255, .06); border-color: var(--line-dark); } .section--light .chip--allowed, .section--white .chip--allowed { color: var(--ok-ink); background: #e3f7ee; } .section--light .chip--blocked, .section--white .chip--blocked { color: var(--stop-ink); background: #fde8eb; } .section--light .chip--discovered, .section--white .chip--discovered { color: var(--blue-700); background: #e4f1fd; } .section--light .chip--review, .section--white .chip--review { color: var(--warn-ink); background: #fff3df; } .legend { display: flex; flex-wrap: wrap; gap: .5rem; } .sample-label { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: var(--r-pill); border: 1px dashed var(--line-dark-strong); color: var(--on-dark-3); font-size: .75rem; font-weight: 600; letter-spacing: .02em; } .section--light .sample-label, .section--white .sample-label { border-color: var(--mist-200); color: var(--slate-500); } /* Finishing touches (aia.js initPointerPolish): a soft light following the cursor on dark cards and panels. It sits behind the content (isolation keeps it inside each card) and fades out when the cursor leaves. */ .card, .try-panel, .ui-window, .help-card { position: relative; isolation: isolate; } .proof-band, .hero-feed { isolation: isolate; } .card::after, .try-panel::after, .ui-window::after, .help-card::after, .hero-feed::after, .proof-band::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 227, 255, .12), rgba(56, 182, 255, .05) 40%, transparent 70%); } .has-spot::after { opacity: 1; } .section--light .card::after, .section--white .card::after { display: none; } .btn--primary.is-magnetic { transition: transform .12s ease-out, box-shadow var(--t-med) var(--ease-out); } /* A softer step from the dark sections into light ones. */ .section--light { background: linear-gradient(180deg, #dbe6f3 0, var(--mist-50) 160px); } /* Readiness result: share row and the glow when the score lands */ .rd-share { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; } .rd-ring.is-revealed { animation: rd-reveal 1.4s var(--ease-out, ease-out); border-radius: 50%; } @keyframes rd-reveal { 0% { box-shadow: 0 0 0 0 rgba(111, 227, 255, .55); } 60% { box-shadow: 0 0 0 26px rgba(111, 227, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(111, 227, 255, 0); } } @media (prefers-reduced-motion: reduce) { .rd-ring.is-revealed { animation: none; } } /* Wider screens: the feed sits in the open space below the platform, between the device and service columns, so it never covers a node label. It shows the two newest events to fit that space. */ @media (min-width: 1151px) { .hero-feed { left: 54%; bottom: 2.6rem; width: min(240px, 39%); padding: .55rem .7rem; transform: translateX(-50%); } .hero-feed-title { margin-bottom: .35rem; } .hero-feed ol { min-height: 0; gap: .25rem; } .hero-feed li:nth-child(n + 3) { display: none; } } .parallax-layer { transition: transform 1.2s var(--ease-out); will-change: transform; } /* Tabs */ .tablist { display: flex; flex-wrap: wrap; gap: .4rem; padding: .35rem; border-radius: var(--r-pill); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03); width: fit-content; max-width: 100%; } .tab { min-height: 40px; padding: 0 1rem; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--on-dark-2); font-weight: 600; font-size: .9rem; cursor: pointer; transition: color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-med); } .tab:hover { color: #fff; } .tab[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, rgba(30, 143, 240, .55), rgba(0, 97, 176, .55)); box-shadow: 0 0 0 1px rgba(111, 227, 255, .35) inset, 0 6px 20px -8px rgba(56, 182, 255, .8); } .section--light .tablist, .section--white .tablist { border-color: var(--line-light); background: #fff; } .section--light .tab, .section--white .tab { color: var(--on-light-2); } .section--light .tab[aria-selected="true"], .section--white .tab[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); } .tabpanel { animation: panel-in var(--t-med) var(--ease-out); } @keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .tabs-scroll { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .home-page .tabs-scroll { display: none; } .js .home-page .tabs-scroll { display: block; } .tabs-scroll::-webkit-scrollbar { display: none; } /* The pill background must wrap every tab, so it sizes to its content and the wrapper scrolls. */ .tabs-scroll .tablist { flex-wrap: nowrap; width: max-content; max-width: none; } .tabs-scroll .tab { flex: 0 0 auto; white-space: nowrap; } .home-page .mobile-scroll-hint { display: none; } /* The product window stays dark inside a light section: keep its own heading and status colours. */ .section--light .ui-window h3, .section--white .ui-window h3 { color: #fff; } .section--light .ui-window .chip--allowed, .section--white .ui-window .chip--allowed { color: var(--ok); background: rgba(47, 208, 138, .12); } .section--light .ui-window .chip--blocked, .section--white .ui-window .chip--blocked { color: var(--stop); background: rgba(255, 93, 108, .12); } .section--light .ui-window .chip--discovered, .section--white .ui-window .chip--discovered { color: var(--blue-400); background: rgba(56, 182, 255, .12); } .section--light .ui-window .chip--review, .section--white .ui-window .chip--review { color: var(--warn); background: rgba(255, 181, 71, .12); } .ui-bar { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03); } .ui-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); } .ui-bar .url { margin-left: .8rem; padding: .25rem .8rem; border-radius: var(--r-pill); background: rgba(255, 255, 255, .05); color: var(--on-dark-3); font: .74rem var(--font-mono); } .ui-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 420px; } .ui-side { display: grid; align-content: start; gap: .15rem; padding: 1rem .7rem; border-right: 1px solid var(--line-dark); background: rgba(2, 10, 23, .4); } .ui-side .logo { width: 110px; margin: 0 .5rem 1rem; } .ui-side span { display: flex; align-items: center; gap: .55rem; padding: .5rem .65rem; border-radius: 9px; color: var(--on-dark-3); font-size: .8rem; font-weight: 600; } .ui-side span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .6; } .ui-side span.on { color: #fff; background: rgba(56, 182, 255, .14); } .ui-main { padding: 1.2rem 1.3rem; min-width: 0; } .ui-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; } .ui-title h3, .ui-title h4, .ui-title .ui-heading { color: #fff; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.06; } .ui-title .crumbs { color: var(--on-dark-3); font-size: .74rem; } .ui-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: .9rem; } .ui-kpi { padding: .75rem .8rem; border-radius: 12px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03); } .ui-kpi span { display: block; color: var(--on-dark-3); font-size: .75rem; font-weight: 600; } .ui-kpi strong { display: block; margin-top: .2rem; color: #fff; font: 700 1.35rem/1.1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ui-kpi em { color: var(--ok); font-size: .75rem; font-style: normal; font-weight: 650; } .ui-grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: .7rem; } .ui-card { padding: .85rem .95rem; border-radius: 12px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .025); min-width: 0; } .ui-card h4, .ui-card h5 { margin: 0 0 .7rem; color: var(--on-dark-2); font: 650 .76rem var(--font-sans); letter-spacing: .02em; } .ui-table { width: 100%; border-collapse: collapse; font-size: .78rem; } .ui-table th { padding: .5rem .55rem; color: var(--on-dark-3); font-weight: 650; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line-dark); } .ui-table td { padding: .55rem; color: var(--on-dark-2); border-bottom: 1px solid rgba(140, 186, 255, .08); white-space: nowrap; } .ui-table td:first-child { color: #fff; font-weight: 600; } .ui-table-wrap { overflow-x: auto; } .ui-steps { display: flex; gap: .4rem; margin-bottom: 1rem; } .ui-steps span { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); } .ui-steps span.on { background: linear-gradient(90deg, var(--blue-500), var(--cyan-300)); } .ui-option { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .65rem .8rem; margin-bottom: .45rem; border-radius: 10px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .025); font-size: .82rem; color: var(--on-dark-2); } .ui-option b { color: #fff; font-weight: 600; } .ui-check { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 5px; border: 1.5px solid var(--line-dark-strong); } .ui-check.on { border-color: var(--blue-400); background: var(--blue-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; } .ui-toggle { position: relative; width: 36px; height: 20px; flex: 0 0 auto; border-radius: 99px; background: rgba(255, 255, 255, .12); } .ui-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform var(--t-med) var(--ease-out); } .ui-toggle.on { background: var(--blue-500); } .ui-toggle.on::after { transform: translateX(16px); } .illustrative { margin-top: .8rem; color: var(--on-dark-3); font-size: .78rem; text-align: center; } .section--light .illustrative, .section--white .illustrative { color: var(--slate-600); } /* Charts */ .bars { display: flex; align-items: flex-end; gap: 5px; height: 130px; padding-top: .5rem; } .bars span { position: relative; flex: 1; height: calc(var(--v) * 1%); min-height: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--cyan-300), var(--blue-600)); transform-origin: bottom; transition: height var(--t-slow) var(--ease-out); } .bars span.alt { background: linear-gradient(180deg, rgba(255, 93, 108, .95), rgba(179, 32, 58, .8)); } .chart-ready .bars span { animation: grow var(--t-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); } @keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } .bars-axis { display: flex; justify-content: space-between; margin-top: .4rem; color: var(--on-dark-3); font-size: .68rem; } .hbars { display: grid; gap: .55rem; } .hbar { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 42px; align-items: center; gap: .6rem; font-size: .78rem; color: var(--on-dark-2); } .hbar .track { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .07); overflow: hidden; } .hbar .fill { display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--blue-600), var(--cyan-300)); transition: width var(--t-slow) var(--ease-out); } .hbar .fill.ok { background: linear-gradient(90deg, #12945e, var(--ok)); } .hbar .fill.stop { background: linear-gradient(90deg, #b3203a, var(--stop)); } .hbar .fill.warn { background: linear-gradient(90deg, #b87500, var(--warn)); } .hbar b { color: #fff; font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; } .donut { --a: 70; --b: 20; position: relative; width: 120px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--ok) 0 calc(var(--a) * 1%), var(--warn) 0 calc((var(--a) + var(--b)) * 1%), var(--stop) 0 100%); transition: --a var(--t-slow); } .donut::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #0a1a34; } .donut-wrap { display: flex; align-items: center; gap: 1.1rem; } .donut-label { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; text-align: center; color: #fff; font: 700 1.45rem/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .donut-label small { display: block; color: var(--on-dark-2); font: 600 .68rem/1 var(--font-sans); letter-spacing: .02em; } .key { display: grid; gap: .4rem; font-size: .76rem; color: var(--on-dark-2); } .key span { display: flex; align-items: center; gap: .45rem; } .key i { width: 9px; height: 9px; border-radius: 3px; } .spark { width: 100%; height: 60px; } .spark path.line { fill: none; stroke: var(--cyan-300); stroke-width: 2; } .spark path.area { fill: url(#sparkFill); } /* Catalogue explorer */ .catalogue-tools { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 1.2rem; } .search { position: relative; flex: 1 1 260px; } .search input { width: 100%; min-height: 48px; padding: 0 1rem 0 2.6rem; border-radius: var(--r-pill); border: 1px solid var(--line-dark-strong); background: rgba(255, 255, 255, .04); color: #fff; font: inherit; } .search input::placeholder { color: var(--on-dark-3); } .search svg { position: absolute; left: .95rem; top: 50%; width: 18px; height: 18px; color: var(--on-dark-3); transform: translateY(-50%); } .filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; } .filter-chip { min-height: 36px; padding: 0 .9rem; border-radius: var(--r-pill); border: 1px solid var(--line-dark); background: transparent; color: var(--on-dark-2); font-size: .84rem; font-weight: 600; cursor: pointer; transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .filter-chip:hover { color: #fff; border-color: rgba(111, 227, 255, .45); } .filter-chip[aria-pressed="true"] { color: #fff; border-color: var(--cyan-300); background: rgba(56, 182, 255, .16); } .catalogue-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; } .cat-card { display: grid; gap: .7rem; padding: 1.1rem; border-radius: var(--r-md); border: 1px solid var(--line-dark); background: rgba(12, 34, 70, .5); animation: panel-in var(--t-med) var(--ease-out); } .cat-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; } .cat-card h3 { font-size: 1.02rem; } .cat-card .type { color: var(--on-dark-3); font-size: .78rem; } .cat-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0; padding-top: .7rem; border-top: 1px solid var(--line-dark); } .cat-meta dt { color: var(--on-dark-3); font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .08em; } .cat-meta dd { margin: .1rem 0 0; color: #fff; font-size: .88rem; font-weight: 600; font-variant-numeric: tabular-nums; } .cat-empty { padding: 2rem; border-radius: var(--r-md); border: 1px dashed var(--line-dark-strong); color: var(--on-dark-2); text-align: center; } .cat-count { color: var(--on-dark-3); font-size: .85rem; } /* Policy resolver */ .resolver { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1.4rem; align-items: stretch; } .layer { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: .9rem; align-items: center; padding: 1rem 1.1rem; margin-bottom: .7rem; border-radius: var(--r-md); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .025); transition: border-color var(--t-med), background-color var(--t-med), box-shadow var(--t-med); } .layer:nth-child(2) { margin-left: 1.2rem; } .layer:nth-child(3) { margin-left: 2.4rem; } .layer:nth-child(4) { margin-left: 3.6rem; } .layer.is-winning { border-color: var(--cyan-300); background: rgba(56, 182, 255, .1); box-shadow: 0 0 30px -10px rgba(56, 182, 255, .7); } .layer-name { display: grid; gap: .1rem; } .layer-name b { color: #fff; font-size: .95rem; } .layer-name span { color: var(--on-dark-3); font-size: .75rem; } .seg { display: flex; flex-wrap: wrap; gap: .3rem; } .seg label { position: relative; } .seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .seg span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .75rem; border-radius: var(--r-pill); border: 1px solid var(--line-dark); color: var(--on-dark-2); font-size: .8rem; font-weight: 600; transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .seg input:checked + span { color: #fff; border-color: var(--cyan-300); background: rgba(56, 182, 255, .18); } .seg input:focus-visible + span { outline: 3px solid var(--cyan-300); outline-offset: 2px; } .resolver-out { display: grid; align-content: center; gap: .8rem; text-align: center; } .resolver-out .result { font: 700 clamp(1.3rem, 2.5vw, 1.8rem)/1.15 var(--font-display); letter-spacing: -.02em; } .resolver-out .why { color: var(--on-dark-2); font-size: .92rem; } /* Collected and not collected comparison */ .compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .compare-col { padding: clamp(1.3rem, 3vw, 2rem); border-radius: var(--r-lg); border: 1px solid var(--line-light); background: #fff; } .compare-col h3 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; } .compare-col.yes { border-top: 4px solid var(--ok); } .compare-col.no { border-top: 4px solid var(--stop); } /* Comfortable reading width on wide screens (about 70 to 80 characters a line). */ .faq .answer p, .faq .answer li { max-width: 64ch; } .wrap-narrow.center p { max-width: 64ch; margin-inline: auto; } .page-hero .wrap > p { max-width: 70ch; } .section--light .faq details, .section--white .faq details { border-color: var(--line-light); background: #fff; } .section--light .faq summary, .section--white .faq summary { color: var(--on-light-1); } .section--light .faq summary::after, .section--white .faq summary::after { border-color: var(--blue-600); } .section--light .faq .answer, .section--white .faq .answer { color: var(--on-light-2); } /* Forms */ .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1rem; } .field { display: grid; align-content: start; gap: .45rem; min-width: 0; } .field.full { grid-column: 1 / -1; } .field label, .field .label { color: var(--on-dark-1); font-size: .9rem; font-weight: 650; } .field .optional { color: var(--on-dark-3); font-weight: 500; } .input, .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .field select, .field textarea { width: 100%; min-height: 50px; padding: .7rem .95rem; border-radius: 12px; border: 1px solid var(--line-dark-strong); background: rgba(2, 10, 23, .55); color: #fff; font: inherit; font-size: 1rem; transition: border-color var(--t-fast), box-shadow var(--t-med), background-color var(--t-fast); } .field select { appearance: none; padding-right: 2.6rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2393b4d8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px; } .field select option { background: var(--ink-850); color: #fff; } .field textarea { min-height: 150px; resize: vertical; } .input:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(111, 227, 255, .45); } .input:focus, .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan-300); background-color: rgba(4, 20, 46, .8); box-shadow: 0 0 0 4px rgba(56, 182, 255, .2); } .field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--stop); } .field-help { color: var(--on-dark-3); font-size: .82rem; line-height: 1.45; } .field-error { color: #ff8b97; font-size: .82rem; font-weight: 600; } .field-status { display: flex; align-items: center; gap: .45rem; min-height: 1.4em; color: var(--on-dark-3); font-size: .84rem; line-height: 1.4; } .field-status::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--on-dark-3); opacity: .6; } .field-status[data-state="checking"] { color: var(--cyan-200); } .field-status[data-state="checking"]::before { background: var(--cyan-300); opacity: 1; animation: blink 1s infinite; } .field-status[data-state="available"] { color: var(--ok); } .field-status[data-state="available"]::before { background: var(--ok); opacity: 1; box-shadow: 0 0 8px var(--ok); } .field-status[data-state="similar"], .field-status[data-state="approval"] { color: var(--warn); } .field-status[data-state="similar"]::before, .field-status[data-state="approval"]::before { background: var(--warn); opacity: 1; } .field-status[data-state="taken"], .field-status[data-state="error"] { color: #ff8b97; } .field-status[data-state="taken"]::before, .field-status[data-state="error"]::before { background: var(--stop); opacity: 1; } @keyframes blink { 50% { opacity: .3; } } .check { display: flex; align-items: flex-start; gap: .75rem; color: var(--on-dark-2); font-size: .92rem; line-height: 1.5; cursor: pointer; } .check input { flex: 0 0 auto; width: 20px; height: 20px; margin: .12rem 0 0; accent-color: var(--blue-500); cursor: pointer; } .radio-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .radio-card { position: relative; } .radio-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .radio-card span { display: grid; gap: .15rem; padding: .85rem 1rem; border-radius: 14px; border: 1px solid var(--line-dark-strong); background: rgba(255, 255, 255, .02); color: var(--on-dark-2); font-size: .82rem; transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); } .radio-card span b { color: #fff; font-size: .95rem; } .radio-card input:checked + span { border-color: var(--cyan-300); background: rgba(56, 182, 255, .12); box-shadow: 0 0 0 3px rgba(56, 182, 255, .15); } .radio-card input:focus-visible + span { outline: 3px solid var(--cyan-300); outline-offset: 2px; } .form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } .form-status { grid-column: 1 / -1; min-height: 1.5em; margin: 0; color: var(--on-dark-2); font-size: .92rem; } .form-status[data-state="error"] { color: #ff8b97; } .form-status[data-state="success"] { color: var(--ok); } .honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .meter { height: 6px; margin-top: .2rem; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .08); } .meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--stop); transition: width var(--t-med) var(--ease-out), background-color var(--t-med); } .meter span[data-strength="medium"] { background: var(--warn); } .meter span[data-strength="strong"] { background: var(--ok); } .slug-field { display: flex; align-items: stretch; border-radius: 12px; border: 1px solid var(--line-dark-strong); background: rgba(2, 10, 23, .55); transition: border-color var(--t-fast), box-shadow var(--t-med); } .slug-field:focus-within { border-color: var(--cyan-300); box-shadow: 0 0 0 4px rgba(56, 182, 255, .2); } .slug-field .prefix { display: flex; align-items: center; padding: 0 .2rem 0 .95rem; color: var(--on-dark-3); font-size: .95rem; white-space: nowrap; } .field .slug-field input { min-width: 0; border: 0; background: transparent; box-shadow: none; padding-left: .1rem; } .field .slug-field input:focus { box-shadow: none; background: transparent; } .suggestions { display: flex; flex-wrap: wrap; gap: .4rem; } .combo { position: relative; } .combo-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 300px; overflow-y: auto; margin: 0; padding: .35rem; list-style: none; border-radius: 14px; border: 1px solid var(--line-dark-strong); background: rgba(5, 18, 40, .98); box-shadow: var(--shadow-deep); } .combo-list li { padding: .7rem .8rem; border-radius: 10px; color: var(--on-dark-1); font-size: .92rem; line-height: 1.35; cursor: pointer; } .combo-list li[aria-selected="true"], .combo-list li:hover { background: rgba(56, 182, 255, .16); } .combo-list li.combo-empty { color: var(--on-dark-3); cursor: default; background: none; } .success-panel { display: grid; justify-items: center; gap: .8rem; padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; } .success-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle, rgba(47, 208, 138, .3), rgba(47, 208, 138, .05)); border: 1px solid rgba(47, 208, 138, .5); color: var(--ok); } .success-icon svg { width: 34px; height: 34px; } .success-icon path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .7s .15s var(--ease-out) forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } /* AI readiness assessment */ .rd-preview { display: grid; gap: 1.2rem; } .rd-preview-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .rd-preview-scores { display: flex; align-items: center; gap: 1.4rem; } .rd-preview-risk { display: grid; gap: .35rem; justify-items: start; } .rd-preview-risk > span:first-child, .rd-card-label { color: var(--on-dark-3); font: 700 .75rem var(--font-sans); letter-spacing: .12em; text-transform: uppercase; } .rd-ring { --score: 0; --len: 326.73px; position: relative; width: 120px; aspect-ratio: 1; flex: 0 0 auto; } .rd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .rd-ring-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 10; } .rd-ring-fill { fill: none; stroke: var(--blue-400); stroke-width: 10; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: calc(var(--len) - var(--len) * var(--score) / 100); transition: stroke-dashoffset 1.6s var(--ease-out), stroke .4s; filter: drop-shadow(0 0 8px rgba(56, 182, 255, .45)); } .js .rd-ring[data-chart]:not(.chart-ready) .rd-ring-fill { stroke-dashoffset: var(--len); } .rd-ring-fill.tone-green { stroke: var(--ok); filter: drop-shadow(0 0 8px rgba(47, 208, 138, .45)); } .rd-ring-fill.tone-amber { stroke: var(--warn); filter: drop-shadow(0 0 8px rgba(255, 181, 71, .45)); } .rd-ring-fill.tone-red { stroke: var(--stop); filter: drop-shadow(0 0 8px rgba(255, 93, 108, .45)); } .rd-ring-label { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; padding-top: 38%; color: #fff; } .rd-ring-label strong { font: 700 2.1rem/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .rd-ring-label small { color: var(--on-dark-3); font-weight: 600; } .rd-ring--lg { width: 180px; } .rd-ring--lg .rd-ring-label strong { font-size: 3.2rem; } .rd-areas { display: grid; gap: .6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; counter-reset: area; } .rd-areas li { position: relative; display: grid; gap: .1rem; padding: .85rem 1rem .85rem 3.2rem; border-radius: var(--r-md); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .025); } .rd-areas li::before { counter-increment: area; content: counter(area); position: absolute; left: 1rem; top: 50%; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--line-dark-strong); color: var(--cyan-300); font: 700 .8rem var(--font-mono); transform: translateY(-50%); } .rd-areas b { color: #fff; font-size: .95rem; } .rd-areas span { color: var(--on-dark-3); font-size: .84rem; } .rd-quiz-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .rd-quiz-head .eyebrow { margin-bottom: .4rem; } .rd-saved { color: var(--ok); font-size: .82rem; font-weight: 600; min-height: 1.2em; transition: opacity var(--t-med); } .rd-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; } .rd-question [data-rd-category] { display: none; } .rd-section { margin: 0 0 .55rem; color: var(--on-dark-2); font-size: .9rem; font-weight: 600; } .rd-section b { color: #fff; } .rd-step { display: block; } .rd-step span { display: none; } .rd-step i { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; } .rd-step i b { display: block; height: 100%; width: calc(var(--fill, 0) * 1%); border-radius: inherit; background: linear-gradient(90deg, var(--blue-500), var(--cyan-300)); transition: width var(--t-med) var(--ease-out); } .rd-step.is-current i { box-shadow: 0 0 0 1px rgba(111, 227, 255, .5); } .flow-main .progress-bar span { width: calc(var(--p, 0) * 1%); } .rd-question { margin-top: 1.4rem; padding: clamp(1.5rem, 4vw, 2.4rem); } .rd-question.is-entering { animation: rd-in .45s var(--ease-out); } @keyframes rd-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } .rd-question.is-entering.from-left { animation-name: rd-in-left; } @keyframes rd-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } } .rd-prompt { margin: 0 0 1.4rem; font-size: clamp(1.3rem, 2.6vw, 1.75rem); line-height: 1.3; letter-spacing: -.02em; outline: none; } .rd-options { display: grid; gap: .6rem; } .rd-option { position: relative; display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 58px; padding: .8rem 1.1rem; border-radius: 14px; border: 1px solid var(--line-dark-strong); background: rgba(255, 255, 255, .03); color: var(--on-dark-1); font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer; transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-med); } .rd-option:hover { border-color: rgba(111, 227, 255, .5); background: rgba(56, 182, 255, .07); transform: translateX(2px); } .rd-option kbd { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; border: 1px solid var(--line-dark-strong); color: var(--on-dark-3); font: 700 .78rem var(--font-mono); } .rd-option[aria-checked="true"] { border-color: var(--cyan-300); background: rgba(56, 182, 255, .14); box-shadow: 0 0 0 3px rgba(56, 182, 255, .15), 0 10px 30px -14px rgba(56, 182, 255, .8); } .rd-option[aria-checked="true"] kbd { border-color: var(--cyan-300); background: var(--blue-500); color: #fff; } .rd-hint { margin: 1rem 0 0; } .rd-review { margin-top: 1.2rem; border-radius: var(--r-md); border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .02); } .rd-review summary { padding: .8rem 1rem; color: var(--on-dark-2); font-size: .9rem; font-weight: 600; cursor: pointer; } .rd-review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: .4rem; padding: 0 1rem 1rem; } .rd-review-grid button { min-height: 40px; border-radius: 10px; border: 1px solid var(--line-dark); background: transparent; color: var(--on-dark-3); font: 600 .85rem var(--font-mono); cursor: pointer; } .rd-review-grid button.is-answered { color: #fff; border-color: rgba(47, 208, 138, .45); background: rgba(47, 208, 138, .1); } .rd-review-grid button.is-current { border-color: var(--cyan-300); color: #fff; } .rd-review-grid button:disabled { opacity: .35; cursor: not-allowed; } .rd-result-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; } .rd-score-card, .rd-risk-card { display: grid; justify-items: center; align-content: center; gap: .9rem; min-height: 290px; text-align: center; } .rd-risk { display: inline-flex; align-items: center; justify-content: center; min-width: 200px; padding: 1rem 1.6rem; border-radius: var(--r-pill); font: 700 clamp(1.6rem, 3vw, 2.2rem)/1 var(--font-display); letter-spacing: -.02em; } .rd-risk-card.tone-red { background: linear-gradient(160deg, rgba(255, 93, 108, .22), rgba(6, 22, 48, .6)); } .rd-risk-card.tone-amber { background: linear-gradient(160deg, rgba(255, 181, 71, .2), rgba(6, 22, 48, .6)); } .rd-risk-card.tone-green { background: linear-gradient(160deg, rgba(47, 208, 138, .2), rgba(6, 22, 48, .6)); } .rd-risk.tone-red { color: #fff; background: rgba(255, 93, 108, .25); box-shadow: inset 0 0 0 1px rgba(255, 93, 108, .6); } .rd-risk.tone-amber { color: #fff; background: rgba(255, 181, 71, .22); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .6); } .rd-risk.tone-green { color: #fff; background: rgba(47, 208, 138, .22); box-shadow: inset 0 0 0 1px rgba(47, 208, 138, .6); } .rd-meaning { margin-top: 1.2rem; border-top: 3px solid var(--blue-400); } .rd-meaning.tone-red { border-top-color: var(--stop); } .rd-meaning.tone-amber { border-top-color: var(--warn); } .rd-meaning.tone-green { border-top-color: var(--ok); } .rd-meaning h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-bottom: .5rem; letter-spacing: -.02em; } .rd-meaning p { color: var(--on-dark-2); } .rd-cats { margin-top: 1.2rem; gap: .9rem; } .rd-cats .hbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 44px; } .rd-priorities { display: grid; margin-top: 1rem; } .rd-priority { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--line-dark); } .rd-priority:last-child { border-bottom: 0; } .rd-priority b { color: #fff; } .rd-priority p { grid-column: 1 / -1; margin: 0; color: var(--on-dark-2); font-size: .88rem; } .rd-reassure { margin-top: 1.2rem; } .rd-again { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; } @media (max-width: 700px) { .rd-result-cards { grid-template-columns: 1fr; } .rd-steps { gap: .25rem; } .rd-step span { display: none; } .rd-preview-scores { gap: 1rem; } .rd-ring--lg { width: 150px; } .rd-cats .hbar { grid-template-columns: minmax(0, 1fr) 70px 40px; } } @media (max-width: 720px) { .home-page .section { padding-block: clamp(2.65rem, 7vw, 3.25rem); } .home-page .section-head { margin-bottom: 1.35rem; } .home-page .section-head .lead { margin-bottom: 0; } .home-page .section .wrap.split { gap: 1.35rem; } .home-page .section .check-list { margin-top: 1rem !important; } .home-page .hero { padding-top: calc(var(--header-h) + 1.35rem); padding-bottom: 2.4rem; } .home-page .discovery-board { display: flex; gap: .65rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: .1rem; padding: .1rem .1rem .65rem; } .home-page .d-tile { flex: 0 0 min(78%, 17rem); min-width: 0; scroll-snap-align: start; } .home-page .discovery-board:focus-visible, .home-page .tabs-scroll:focus-visible { outline: 3px solid var(--cyan-300); outline-offset: 3px; border-radius: 10px; } .home-page .tabs-scroll { overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: .5rem; padding: .2rem .1rem .55rem; } .home-page .tabs-scroll .tablist { gap: .5rem; padding: .25rem; border: 0; background: transparent; } .home-page .tabs-scroll .tab { flex: 0 0 min(10rem, 72vw); min-height: 3.4rem; padding: .55rem .8rem; border: 1px solid var(--line-dark); border-radius: 14px; text-align: left; white-space: normal; scroll-snap-align: start; } .home-page .mobile-scroll-hint { display: block; margin: .1rem 0 .8rem; color: var(--on-dark-3); font-size: .78rem; } .home-page .ui-window { margin-top: .65rem !important; } } @media (max-width: 720px) { .home-page .tabs-scroll { display: none; } .js .home-page .tabs-scroll { display: block; } /* Sideways scrollers: no browser scrollbar, and a soft fade at the right edge shows there is more. */ .home-page .discovery-board, .home-page .tabs-scroll { scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } .home-page .discovery-board::-webkit-scrollbar, .home-page .tabs-scroll::-webkit-scrollbar { display: none; } .home-page .discovery-board.is-scrolled-end, .home-page .tabs-scroll.is-scrolled-end { -webkit-mask-image: none; mask-image: none; } .home-page .mobile-scroll-hint { display: flex; align-items: center; gap: .4rem; font-size: .75rem; letter-spacing: .02em; } .home-page .mobile-scroll-hint::after { content: "→"; } .home-page .section--light .mobile-scroll-hint { color: var(--slate-600); } .home-page .section--light .tabs-scroll .tab { border-color: var(--line-light); background: #fff; } .home-page .section--light .tabs-scroll .tab[aria-selected="true"] { border-color: transparent; background: linear-gradient(135deg, var(--blue-500), var(--blue-700)); } } /* Reveal and motion */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); } .js .reveal.is-visible { opacity: 1; transform: none; } .js .draw-in path, .js .draw-in line { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); transition: stroke-dashoffset 1.6s var(--ease-out); } .js .draw-in.is-visible path, .js .draw-in.is-visible line { stroke-dashoffset: 0; } @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out .28s var(--ease-in-out) both; } ::view-transition-new(root) { animation: vt-in .42s var(--ease-out) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(8px); } } /* Responsive */ @media (max-width: 1100px) { .main-nav .nav-link { padding: 0 .6rem; font-size: .88rem; } .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 960px) { :root { --header-h: 64px; } .main-nav, .header-actions .btn--ghost { display: none; } .header-actions { margin-left: auto; } .menu-toggle { display: inline-flex; } .mobile-panel { position: fixed; inset: var(--header-h) 0 0; z-index: 49; display: block; overflow-y: auto; padding: 1.2rem var(--gutter) 2rem; background: rgba(3, 13, 30, .98); backdrop-filter: blur(18px); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med); } .mobile-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .mobile-panel nav { display: grid; gap: .2rem; } .mobile-panel h2 { margin: 1.1rem 0 .3rem; padding: 0 .8rem; color: var(--on-dark-3); font: 700 .72rem var(--font-sans); letter-spacing: .14em; text-transform: uppercase; } .mobile-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 .8rem; border-radius: 12px; color: #fff; font-size: 1.05rem; font-weight: 600; text-decoration: none; } .mobile-panel a:hover, .mobile-panel a[aria-current="page"] { background: rgba(56, 182, 255, .1); } .mobile-panel .mobile-cta { display: grid; gap: .6rem; margin-top: 1.4rem; } .mobile-panel .mobile-cta .btn { min-height: 54px; font-size: 1.02rem; } .hero { min-height: auto; padding-top: calc(var(--header-h) + 2.5rem); } .hero-grid, .split, .split--even, .cycle, .pmap, .resolver, .wizard, .journey-body { grid-template-columns: 1fr; } .hero-visual { max-width: 620px; margin-inline: auto; } .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flow-grid { grid-template-columns: 1fr; } .summary-card { position: static; } .legal { grid-template-columns: 1fr; } .legal-toc { position: static; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); } .legal-toc strong { grid-column: 1 / -1; } .ui-body { grid-template-columns: 1fr; } .ui-side { display: none; } .scroll-cue { display: none; } } @media (max-width: 700px) { .grid-2, .grid-3, .grid-4, .compare, .form, .radio-cards { grid-template-columns: minmax(0, 1fr); } .ui-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ui-grid2 { grid-template-columns: 1fr; } .boundary { grid-template-columns: 1fr; gap: 1rem; } .boundary-wall { min-height: 60px; } .boundary-wall::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 2px; margin: -1px 0 0; background: repeating-linear-gradient(90deg, var(--cyan-300) 0 8px, transparent 8px 16px); } .boundary-wall span { transform: translate(-50%, -50%); } .event-chip { display: none; } .layer, .layer:nth-child(n) { grid-template-columns: 1fr; margin-left: 0; } .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .progress ol { grid-template-columns: repeat(6, minmax(0, 1fr)); } .progress li { font-size: 0; gap: 0; } .progress li[aria-current="step"] { font-size: .7rem; gap: .3rem; } .discovery-board { gap: .5rem; } .d-tile { min-height: 84px; padding: .7rem .75rem; } .d-tile .known strong { font-size: .85rem; line-height: 1.25; } .d-tile .unknown b { font-size: .8rem; } .fact-grid { grid-template-columns: 1fr; } .review-list div { grid-template-columns: 1fr; gap: .2rem; } .cycle-step { width: 104px; min-height: 58px; font-size: .78rem; padding: .5rem; } .hbar { grid-template-columns: 90px minmax(0, 1fr) 36px; } .flow-actions { flex-direction: column-reverse; } .flow-actions .btn { width: 100%; } } @media (max-width: 420px) { .brand img { width: 112px; } .header-actions .btn--primary { padding: 0 .6rem; } .cycle-step { width: 88px; min-height: 58px; padding: .45rem; font-size: .74rem; } .cycle-step[data-pos="1"] { left: 88%; } .cycle-step[data-pos="3"] { left: 12%; } } /* Reduced motion: keep every state, remove movement */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js .reveal { opacity: 1; transform: none; } .net-signal, .checkin-pulse, .event-chip, .scroll-cue::after, .net-pulse { animation: none !important; } .net-signal { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .35; } .event-chip { transform: translateX(var(--hop, 260px)); opacity: 1; } .js .draw-in path, .js .draw-in line { stroke-dashoffset: 0; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } html.reduce-motion .net-signal, html.reduce-motion .net-orbit, html.reduce-motion .net-pulse, html.reduce-motion .checkin-pulse, html.reduce-motion .event-chip { animation: none !important; } @media print { .site-header, .mobile-panel, .site-footer, .atmos, .hero-visual, .scroll-cue { display: none !important; } body { background: #fff; color: #000; } .prose { border: 0; padding: 0; } } /* AI policy builder and policy document */ .pb-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin-bottom: 1.4rem; } .pb-step { display: grid; gap: .4rem; padding: 0; border: 0; background: none; color: var(--on-dark-3); font: 600 .74rem var(--font-sans); text-align: left; cursor: pointer; } .pb-step i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); } .pb-step.is-done i, .pb-step.is-current i { background: linear-gradient(90deg, var(--blue-500), var(--cyan-300)); } .pb-step.is-current { color: #fff; } .pb-body { grid-template-columns: 1fr; } .pb-title { font-size: 1.3rem; margin: 0 0 .4rem; } .pb-fieldset { border: 0; margin: 0; padding: 0; } .pb-choices { display: grid; gap: .5rem; } .pb-choice { padding: .7rem .85rem; border-radius: 12px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .025); } .pb-choice b { display: block; color: #fff; font-weight: 650; } .pb-choice small { display: block; color: var(--on-dark-3); font-size: .82rem; } .pb-actions { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.2rem; } .policy-doc { padding: clamp(1.2rem, 3vw, 2.2rem); border-radius: 16px; background: #fff; color: #172b3a; line-height: 1.6; } .policy-doc h2 { color: #071a38; font-size: 1.6rem; margin: 0 0 1rem; } .policy-doc h3 { color: #071a38; font-size: 1.05rem; margin: 1.4rem 0 .4rem; } .policy-doc p, .policy-doc li { font-size: .95rem; color: #2b3f52; } .policy-doc ul { padding-left: 1.2rem; margin: .4rem 0; } .policy-doc-details { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 10px; background: #f3f7fa; font-size: .9rem; } .policy-doc-details dt { color: #52677c; } .policy-doc-details dd { margin: 0; color: #071a38; font-weight: 600; } .policy-doc .is-locked h3 { color: #8a9bab; } .policy-doc-locked { margin-top: 1.4rem; padding: .9rem 1rem; border-radius: 10px; background: #eaf4fb; color: #0b4f7a !important; font-weight: 600; } @media (max-width: 700px) { .pb-steps { grid-template-columns: repeat(4, 1fr); } .pb-step span { display: none; } } @media print { .pb-steps, .pb-actions, .pb-final-actions { display: none !important; } .policy-doc { padding: 0; } } /* Governance policy document: controlled front matter and readable client-specific policy. */ .pb-document-controls { padding: 1rem; border: 1px solid var(--line-dark); border-radius: 12px; min-width: 0; } .pb-document-controls summary { cursor: pointer; font-weight: 650; } .pb-optional-fields { display: grid; gap: 1rem; padding-top: 1rem; } .pb-logo-upload input[type=file] { max-width: 100%; padding: .55rem; } .pb-logo-upload input::file-selector-button { margin-right: .65rem; padding: .5rem .7rem; border: 1px solid var(--line-dark); border-radius: 8px; background: transparent; color: inherit; font: inherit; cursor: pointer; } .pb-logo-preview { max-width: 100%; padding: 1rem; border: 1px solid #d6e1e9; border-radius: 10px; background: #fff; } .pb-logo-preview img { display: block; width: auto; height: auto; max-width: min(100%, 300px); max-height: 110px; object-fit: contain; } .pb-logo-upload > button { justify-self: start; } .pb-control-person, .pb-amendment { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1.1rem 0; padding: .9rem; border: 1px solid var(--line-dark); border-radius: 10px; } .pb-control-person legend, .pb-amendment legend { padding-inline: .4rem; font-weight: 650; } .pb-amendment > button { justify-self: start; grid-column: 1 / -1; } .policy-doc { width: 100%; min-width: 0; overflow-wrap: anywhere; } .policy-doc-cover { padding: 1.2rem 0 1.5rem; border-bottom: 3px solid #20a6d2; margin-bottom: 2rem; } .policy-doc-org { display: block; color: #071a38; font-size: 1.3rem; font-weight: 750; } .policy-doc-logo { display: block; width: auto; height: auto; max-width: min(100%, 320px); max-height: 115px; object-fit: contain; margin-bottom: 1.6rem; } .policy-doc .policy-doc-kicker { margin: 1.7rem 0 .5rem; color: #416477; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; } .policy-doc-cover h2 { max-width: 38rem; font-size: clamp(1.65rem, 3vw, 2.3rem); line-height: 1.25; } .policy-doc p, .policy-doc li { font-size: 1.03rem; line-height: 1.7; } .policy-doc-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); } .policy-doc-control { margin-bottom: 2rem; } .policy-doc-table-wrap { width: 100%; min-width: 0; overflow-x: auto; margin: 1rem 0 1.6rem; border: 1px solid #cddbe5; border-radius: 7px; } .policy-doc-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .8rem; color: #172b3a; } .policy-doc .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .policy-doc-table th, .policy-doc-table td { min-width: 6.5rem; padding: .6rem .7rem; border: 1px solid #d6e1e9; vertical-align: top; color: #172b3a; background: #fff; } .policy-doc-table thead th { background: #edf4f8; font-weight: 700; } .policy-doc-table tbody th { font-weight: 600; } .policy-doc-toc { padding: 1rem 0 1.5rem; border-bottom: 1px solid #d6e1e9; margin-bottom: 1.5rem; } .policy-doc-toc ol { list-style: none; padding: 0; margin: .8rem 0; columns: 2; column-gap: 1.8rem; } .policy-doc-toc li { margin: .3rem 0; break-inside: avoid; } .policy-doc-toc a { display: block; padding: .45rem .2rem; border-bottom: 1px solid #d6e1e9; color: #155775; text-decoration: none; } .policy-doc-toc a:hover { background: #edf4f8; text-decoration: underline; } .policy-doc-toc a:focus-visible { outline: 2px solid #155775; outline-offset: 3px; } .policy-doc .policy-doc-toc-help { color: #52677c; font-size: .9rem; } .policy-doc-toc .policy-doc-subsection { padding-left: .8rem; } .policy-doc-section { scroll-margin-top: 6rem; margin-block: 1.8rem; } .policy-doc-section h3 { border-left: 3px solid #20a6d2; background: #f3f7fa; padding: .7rem .85rem; font-size: 1.22rem; line-height: 1.4; } .policy-doc-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #d6e1e9; font-size: .75rem; color: #52677c; } @media (max-width: 600px) { .pb-control-person, .pb-amendment { grid-template-columns: 1fr; } .policy-doc-toc ol { columns: 1; } } @media print { @page ai-policy { size: A4; margin: 17mm 16mm 19mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 9pt Arial, sans-serif; color: #52677c; } } body.policy-printing > :not(.policy-print-parent):not(.policy-doc), body.policy-printing .policy-print-parent > :not(.policy-print-parent):not(.policy-doc) { display: none !important; } body.policy-printing .policy-print-parent { display: block !important; position: static !important; width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; border: 0 !important; background: #fff !important; box-shadow: none !important; break-inside: auto !important; } body.policy-printing .policy-doc { page: ai-policy; width: auto; padding: 0; border: 0; border-radius: 0; font: 11.5pt/1.55 Arial, sans-serif; color: #172b3a; } .policy-doc-cover { min-height: 225mm; padding-top: 16mm; break-after: page; border: 0; } .policy-doc-logo { max-width: 68mm; max-height: 25mm; margin-bottom: 10mm; } .policy-doc-cover h2 { margin-top: 12mm; font-size: 30pt; } .policy-doc-cover .policy-doc-details { margin-top: 14mm; padding: 12pt; background: #f3f7fa; font-size: 10.5pt; } .policy-doc-control, .policy-doc-toc { break-after: page; } .policy-doc h3 { font-size: 15pt; break-after: avoid; margin-top: 16pt; line-height: 1.35; } .policy-doc p, .policy-doc li { font-size: 11.5pt; line-height: 1.55; orphans: 3; widows: 3; } .policy-doc-toc ol { columns: 1; } .policy-doc-toc li { margin: 1.5pt 0; font-size: 11pt; line-height: 1.3; } .policy-doc-toc a { padding: 2pt 0; } .policy-doc a { color: #172b3a; } .policy-doc-table-wrap { overflow: visible; border-radius: 0; } .policy-doc-table { table-layout: fixed; font-size: 9.5pt; } .policy-doc-table th, .policy-doc-table td { min-width: 0; padding: 5pt; overflow-wrap: anywhere; } .policy-doc-table tr { break-inside: avoid; } .policy-doc-table thead { display: table-header-group; } .policy-doc-section { break-inside: auto; margin-block: 0 18pt; } .policy-doc-chapter-start { break-before: page; } .policy-doc-chapter-start h3 { margin-top: 0; } .policy-doc-section:last-of-type { break-inside: avoid; } .policy-doc-footer { margin-top: 12pt; padding-top: 6pt; font-size: 8pt; line-height: 1.2; break-inside: avoid; } } /* Readiness recommendations */ .rd-recommend { margin-top: 1.6rem; } .rd-rec { display: flex; flex-direction: column; gap: .2rem; border-color: rgba(111, 227, 255, .28); } .rd-rec .btn { align-self: flex-start; margin-top: .4rem; } .rd-rec .form-actions .btn { align-self: auto; } .rd-rec-reasons { margin: 0 0 .8rem; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: .92rem; line-height: 1.5; } @media print { .rd-recommend { display: none !important; } } /* ===== Help centre (public site and client portal) ===== */ .help-home { display: grid; gap: 1rem; } .help-searchbar { display: grid; gap: .45rem; } .help-label { font-weight: 650; color: #fff; } .help-search { width: 100%; min-height: 52px; padding: 0 1.1rem; border-radius: 14px; border: 1px solid var(--line-dark-strong, rgba(140,186,255,.28)); background: rgba(4, 20, 46, .6); color: #fff; font: 500 1rem var(--font-sans); } .help-search:focus { outline: none; border-color: var(--cyan-300); box-shadow: 0 0 0 4px rgba(56, 182, 255, .2); } .help-filters { display: flex; flex-wrap: wrap; gap: .5rem; } .help-filter { min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03); color: var(--on-dark-2); font: 600 .9rem var(--font-sans); cursor: pointer; } .help-filter:hover { color: #fff; border-color: rgba(111, 227, 255, .45); } .help-filter[aria-pressed="true"] { color: #fff; border-color: var(--cyan-300); background: rgba(56, 182, 255, .16); } .help-filter[aria-pressed="true"]::before { content: "✓ "; } .help-count { margin: 0; color: var(--on-dark-2); font-size: .9rem; } .help-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; } .help-card { display: flex; flex-direction: column; gap: .55rem; padding: 1.3rem 1.35rem; border-radius: 18px; border: 1px solid var(--line-dark); background: rgba(14, 34, 66, .55); color: var(--on-dark-2); text-decoration: none; transition: border-color var(--t-fast, .15s), transform var(--t-fast, .15s); } .help-card:hover, .help-card:focus-visible { border-color: rgba(111, 227, 255, .5); color: var(--on-dark-2); transform: translateY(-2px); } .help-card h3 { margin: 0; color: #fff; font-size: 1.12rem; line-height: 1.3; } .help-card p { margin: 0; font-size: .94rem; line-height: 1.55; } .help-card-go { margin-top: auto; color: var(--cyan-300); font-weight: 650; font-size: .9rem; } .help-card-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .78rem; } .help-tag { padding: .2rem .6rem; border-radius: 999px; background: rgba(56, 182, 255, .14); color: var(--cyan-200); font-weight: 650; } .help-audience { color: var(--on-dark-2); font-weight: 600; } .help-empty { grid-column: 1 / -1; padding: 2rem 1.4rem; border-radius: 18px; border: 1px dashed var(--line-dark-strong, rgba(140,186,255,.28)); text-align: center; color: var(--on-dark-2); } .help-empty h3 { color: #fff; margin: 0 0 .4rem; } .help-callout { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; padding: 1.2rem 1.35rem; border-radius: 18px; border: 1px solid rgba(111, 227, 255, .28); background: rgba(56, 182, 255, .07); } .help-callout p { margin: .2rem 0 0; color: var(--on-dark-2); } .help-muted { color: var(--on-dark-2); font-size: .88rem; } .help-guide { display: grid; gap: 1.2rem; } .help-guide-head { display: grid; gap: .5rem; } .help-back { justify-self: start; color: var(--cyan-300); font-weight: 650; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } .help-guide-title { margin: 0; color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.15; } .help-guide-intro { margin: 0; color: var(--on-dark-2); max-width: 70ch; } .help-walkthrough { display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); align-items: start; } @media (min-width: 1000px) { .help-walkthrough { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); } } .help-explain { display: grid; gap: .8rem; padding: 1.4rem; border-radius: 20px; border: 1px solid var(--line-dark); background: rgba(14, 34, 66, .6); } @media (min-width: 1000px) { .help-explain { position: sticky; top: 1rem; } } .help-counter { margin: 0; color: var(--cyan-300); font: 700 .78rem var(--font-sans); letter-spacing: .12em; text-transform: uppercase; } .help-step-title { margin: 0; color: #fff; font-size: 1.3rem; line-height: 1.3; } .help-step-title:focus { outline: none; } .help-step-title:focus-visible { outline: 3px solid var(--cyan-300); outline-offset: 4px; } .help-step-text { margin: 0; color: var(--on-dark-1, #e6eefb); line-height: 1.6; } .help-cue { margin: 0; padding: .7rem .85rem; border-radius: 12px; background: rgba(56, 182, 255, .1); border-left: 3px solid var(--cyan-300); color: #fff; font-size: .92rem; } .help-cue::before { content: "What to do: "; font-weight: 700; } .help-nudge { margin: 0; min-height: 0; color: var(--warn); font-size: .9rem; } .help-nudge:empty { display: none; } .help-sample { justify-self: start; min-height: 44px; white-space: normal; text-align: left; } .help-controls { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; } .help-controls .btn { min-height: 46px; flex: 1 1 auto; } .help-controls .btn:disabled { opacity: .45; cursor: not-allowed; } .help-summary { display: grid; gap: .8rem; padding-top: .8rem; border-top: 1px solid var(--line-dark); } .help-summary p { margin: 0; color: var(--on-dark-1, #e6eefb); } .help-text-version { padding: 1rem 1.3rem; border-radius: 16px; border: 1px solid var(--line-dark); background: rgba(14, 34, 66, .35); } .help-text-version summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: #fff; font-weight: 650; } .help-text-version ol { margin: .6rem 0 0; padding-left: 1.3rem; display: grid; gap: .8rem; } .help-text-version li p { margin: .2rem 0 0; color: var(--on-dark-2); } /* Preview: a scaled-down, inert copy of the real page. */ .help-demo { container-type: inline-size; min-width: 0; } .demo-frame { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--line-dark-strong, rgba(140,186,255,.28)); background: #06142b; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); font-size: .9rem; } .demo-badge { position: absolute; top: .55rem; right: .7rem; z-index: 3; padding: .2rem .6rem; border-radius: 999px; background: rgba(255, 181, 71, .16); border: 1px solid rgba(255, 181, 71, .4); color: var(--warn); font: 700 .7rem var(--font-sans); letter-spacing: .04em; } .demo-portal { display: grid; grid-template-columns: 150px minmax(0, 1fr); min-height: 420px; } .demo-side { display: flex; flex-direction: column; gap: .15rem; padding: 1rem .7rem; border-right: 1px solid var(--line-dark); background: rgba(2, 10, 23, .6); } .demo-logo { margin: 0 0 .8rem .3rem; color: #fff; font: 700 .95rem var(--font-display); } .demo-nav { padding: .45rem .6rem; border-radius: 8px; color: var(--on-dark-2); font-size: .82rem; } .demo-nav.is-current { color: #fff; background: rgba(56, 182, 255, .14); } .demo-main { padding: 1rem 1.1rem 1.3rem; min-width: 0; display: grid; gap: .9rem; align-content: start; } .demo-topbar { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: space-between; padding-right: 7.5rem; } .demo-title { margin: 0; color: #fff; font-size: 1.15rem; } .demo-crumbs { display: block; color: var(--on-dark-3, #8da3c2); font-size: .78rem; } .demo-actions, .demo-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .demo-body { display: grid; gap: .9rem; min-width: 0; } .demo-site { min-height: 380px; } .demo-sitebar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 8rem .8rem 1.1rem; border-bottom: 1px solid var(--line-dark); background: rgba(2, 10, 23, .6); } .demo-sitelinks { color: var(--on-dark-3, #8da3c2); font-size: .78rem; } .demo-sitepage { padding: 1.2rem 1.3rem 1.5rem; display: grid; gap: .9rem; } .demo-heading { margin: 0; color: #fff; font-size: 1rem; } .demo-text { margin: 0; color: var(--on-dark-1, #e6eefb); line-height: 1.5; } .demo-muted { color: var(--on-dark-2); font-size: .86rem; } .demo-card { display: grid; gap: .7rem; padding: 1rem 1.05rem; border-radius: 14px; border: 1px solid var(--line-dark); background: rgba(14, 34, 66, .55); } .demo-field { margin: 0; } .demo-field input, .demo-field select { min-height: 44px; } .demo-check { display: flex; gap: .6rem; align-items: flex-start; color: var(--on-dark-2); font-size: .86rem; } .demo-check input { width: 20px; height: 20px; margin-top: .1rem; } .demo-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; } .demo-choice { min-height: 48px; border-radius: 12px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03); color: #fff; font: 600 .95rem var(--font-sans); cursor: pointer; } .demo-choice[aria-pressed="true"] { border-color: var(--cyan-300); background: rgba(56, 182, 255, .14); } .demo-tabs button { min-height: 36px; } .demo-table-wrap { overflow: hidden; border-radius: 12px; border: 1px solid var(--line-dark); } .demo-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .demo-table th { padding: .55rem .6rem; color: var(--on-dark-3, #8da3c2); font-weight: 650; text-align: left; border-bottom: 1px solid var(--line-dark); } .demo-table td { padding: .6rem; color: var(--on-dark-2); border-bottom: 1px solid rgba(140, 186, 255, .08); } .demo-table td:first-child { color: #fff; font-weight: 600; } .demo-table small { display: block; color: var(--on-dark-3, #8da3c2); font-weight: 500; } .demo-table tr.demo-new td { background: rgba(47, 208, 138, .08); } .demo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; } .demo-kpis .kpi { padding: .7rem .8rem; border-radius: 12px; border: 1px solid var(--line-dark); background: rgba(14, 34, 66, .55); } .demo-kpis .kpi span { display: block; color: var(--on-dark-2); font-size: .74rem; font-weight: 600; } .demo-kpis .kpi strong { display: block; color: #fff; font: 700 1.3rem var(--font-display); } .demo-frame .code-box { display: flex; align-items: center; gap: .6rem; padding: .7rem; border-radius: 12px; border: 1px dashed var(--line-dark-strong, rgba(140,186,255,.28)); background: rgba(2, 10, 23, .55); font: .8rem var(--font-mono); color: var(--cyan-200); word-break: break-all; } .demo-code { flex: 1; } .demo-frame .seg-select { display: flex; flex-wrap: wrap; gap: .3rem; } .demo-frame .seg-select button { min-height: 36px; padding: 0 .75rem; border-radius: 999px; border: 1px solid var(--line-dark); background: transparent; color: var(--on-dark-2); font: 600 .78rem var(--font-sans); cursor: pointer; } .demo-frame .seg-select button[aria-pressed="true"] { color: var(--ok); border-color: rgba(47, 208, 138, .6); background: rgba(47, 208, 138, .12); } .demo-notice { padding: .7rem .85rem; border-radius: 12px; font-size: .86rem; } .demo-notice--info { background: rgba(56, 182, 255, .1); color: var(--cyan-200); border: 1px solid rgba(56, 182, 255, .3); } .demo-notice--success { background: rgba(47, 208, 138, .1); color: var(--ok); border: 1px solid rgba(47, 208, 138, .35); } .demo-progress { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; counter-reset: demo-step; } .demo-progress li { counter-increment: demo-step; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--line-dark); color: var(--on-dark-3, #8da3c2); font-size: .74rem; font-weight: 650; } .demo-progress li::before { content: counter(demo-step) ". "; } .demo-progress li.done { color: var(--ok); border-color: rgba(47, 208, 138, .4); } .demo-progress li.current { color: #fff; border-color: var(--cyan-300); background: rgba(56, 182, 255, .14); } .demo-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; color: var(--on-dark-1, #e6eefb); } .demo-ring { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; border: 8px solid rgba(255, 181, 71, .55); text-align: center; } .demo-ring strong { color: #fff; font: 700 1.8rem var(--font-display); } .demo-ring span { color: var(--on-dark-2); font-size: .72rem; } .demo-scrim { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1rem; background: rgba(2, 10, 23, .72); } .demo-dialog { width: min(100%, 420px); max-height: calc(100% - 1rem); overflow: auto; display: grid; gap: .75rem; padding: 1.1rem 1.2rem; border-radius: 16px; border: 1px solid var(--line-dark-strong, rgba(140,186,255,.28)); background: #0b1d3a; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); } .demo-dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; } .demo-toast { position: absolute; left: 50%; bottom: .9rem; z-index: 3; transform: translateX(-50%); padding: .55rem .9rem; border-radius: 12px; background: rgba(47, 208, 138, .16); border: 1px solid rgba(47, 208, 138, .45); color: var(--ok); font-weight: 650; font-size: .84rem; white-space: nowrap; } .demo-frame .btn--sm { min-height: 44px; } /* The control to use: a thick outline, a ring, and a text label, so it does not depend on colour. */ .help-target { position: relative; z-index: 1; outline: 3px solid var(--cyan-300) !important; outline-offset: 4px; border-radius: 10px; box-shadow: 0 0 0 9px rgba(111, 227, 255, .18); animation: help-ring 1.8s ease-in-out infinite; } .help-marker { display: inline-flex; align-self: flex-start; justify-self: start; margin: .45rem 0 0; padding: .25rem .6rem; border-radius: 8px; background: var(--cyan-300); color: #031327; font: 800 .72rem var(--font-sans); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; } .help-marker::before { content: "▲"; margin-right: .4em; } @keyframes help-ring { 0%, 100% { box-shadow: 0 0 0 6px rgba(111, 227, 255, .14); } 50% { box-shadow: 0 0 0 11px rgba(111, 227, 255, .26); } } @media (prefers-reduced-motion: reduce) { .help-target { animation: none; } .help-card { transition: none; } .help-card:hover { transform: none; } } /* Narrow previews (phones, or a small panel): sidebar becomes a strip and tables become stacked rows. */ @container (max-width: 620px) { .demo-portal { grid-template-columns: 1fr; min-height: 0; } .demo-side { flex-direction: row; flex-wrap: wrap; gap: .25rem; padding: .6rem .7rem; border-right: 0; border-bottom: 1px solid var(--line-dark); } .demo-side .demo-logo { width: 100%; margin: 0 0 .3rem; } .demo-nav { padding: .3rem .5rem; font-size: .74rem; } .demo-nav:not(.is-current) { display: none; } .demo-topbar { padding-right: 0; padding-top: 1.4rem; } .demo-sitebar { padding-right: 1.1rem; padding-top: 2.2rem; } .demo-sitelinks { display: none; } .demo-table thead { display: none; } .demo-table, .demo-table tbody, .demo-table tr, .demo-table td { display: block; width: 100%; } .demo-table tr { padding: .5rem .6rem; border-bottom: 1px solid rgba(140, 186, 255, .1); } .demo-table td { padding: .15rem 0; border: 0; } .demo-table td::before { content: attr(data-label) ": "; color: var(--on-dark-3, #8da3c2); font-weight: 600; } .demo-table td:first-child::before { content: ""; } .demo-toast { white-space: normal; width: calc(100% - 2rem); text-align: center; } } .help-demo-wrap { display: grid; gap: .6rem; min-width: 0; } .help-demo-bar { position: sticky; top: calc(var(--help-sticky-top, var(--header-h)) + .5rem); z-index: 4; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; padding: .6rem .7rem; border-radius: 14px; border: 1px solid rgba(111, 227, 255, .35); background: rgba(6, 20, 43, .96); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .8); } .help-bar-text { flex: 1 1 12rem; color: #fff; font-size: .86rem; line-height: 1.4; } .help-bar-buttons { display: flex; gap: .4rem; } .help-bar-buttons .btn { min-height: 44px; } @media (min-width: 1000px) { .help-demo-bar { display: none; } } body.app { --help-sticky-top: 0px; } /* All screens: labels inside the product illustrations are at least 12px. */ .hero-feed span, .hero-feed b, .try-devices li small, .try-kpis span, .ui-bar .url, .ui-title .crumbs, .bars-axis, .donut-label small, .boundary-device h3, .boundary-record h3, .private-zone .tag, .boundary-wall span, .event-chip, .report-doc th, .report-doc td, .report-doc header .meta, .report-doc footer span, .checkin-times span { font-size: .75rem; } /* Phones: nothing below 12px, including labels inside the product illustrations. */ @media (max-width: 560px) { .chip, .status-history-axis, .proof-list small, .try-kpis span, .try-devices li small, .try-report-head small, .try-bar, .hero-feed, .hero-feed-title, .cycle-step, .cycle-step small, .ui-bar .url, .ui-title .crumbs, .ui-kpi span, .ui-kpi em, .bars-axis, .donut-label small, .checkin-times, .pmap-detail dt, .cat-meta dt, .boundary-device h3, .boundary-record h3, .boundary-device h4, .boundary-record h4, .private-zone .tag, .boundary-wall span, .event-chip, .progress li, .rd-preview-risk > span:first-child, .rd-card-label, .mobile-panel h2, .pb-step, .demo-badge, .demo-kpis .kpi span, .demo-progress li, .demo-ring span, .help-marker, .demo-nav, .progress li[aria-current="step"], .report-kpis span, .report-doc th, .report-doc td, .report-doc footer span { font-size: .75rem; } /* "Try it yourself" is the longest home page section on phones: tighter rows keep it to a comfortable scroll. */ .try-panel { padding: 1rem; } .try-tools { gap: .45rem; } .try-tools li { gap: .5rem; padding: .6rem .7rem; } .try-seg button { min-height: 36px; } .try-devices { gap: .4rem; } .try-devices li b { padding-right: .75rem; } /* The hero network is scaled down on phones: larger node labels, and the status sub-labels give way to the colours. */ .net-label { font-size: 17px; } .net-label--strong { font-size: 18px; } .net-sub { display: none; } } /* Product page heroes: the heading beside a small illustration of that page's part of the product. Every animation runs once on load and ends on the finished state, so reduced motion shows the same picture. */ .page-hero .hero-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .hero-art { position: relative; width: 100%; max-width: 520px; justify-self: end; } .hero-art .ui-window { box-shadow: var(--shadow-deep), 0 0 90px -40px rgba(56, 182, 255, .55); } .hero-art .ui-main { padding: 1rem 1.1rem 1.1rem; } .hero-art .ui-title { margin-bottom: .8rem; } .hero-art .ui-option { margin-bottom: .4rem; } .hero-art .ui-option:last-child { margin-bottom: 0; } .hero-art .illustrative { text-align: right; } .art-in { animation: art-in .6s var(--ease-out) both; animation-delay: calc(.3s + var(--i, 0) * .28s); } @keyframes art-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .art-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: .55rem; padding: .55rem .8rem; border-radius: 12px; border: 1px solid rgba(111, 227, 255, .45); background: rgba(10, 34, 70, .96); box-shadow: 0 14px 40px -12px rgba(0, 0, 0, .7), 0 0 30px -8px rgba(56, 182, 255, .45); color: #fff; font-size: .8rem; font-weight: 650; white-space: nowrap; } .art-float small { display: block; color: var(--on-dark-3); font-size: .75rem; font-weight: 500; } .art-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(47, 208, 138, .16); } .art-dot--stop { background: var(--stop); box-shadow: 0 0 0 4px rgba(255, 93, 108, .16); } .art-dot--blue { background: var(--blue-400); box-shadow: 0 0 0 4px rgba(56, 182, 255, .16); } /* Ticks that fill in turn: setup steps and the evidence checklist */ .art-list { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; } .art-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .025); color: var(--on-dark-2); font-size: .8rem; } .art-list li b { display: block; color: #fff; font-size: .84rem; font-weight: 600; } .art-tick { position: relative; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-dark-strong); } .art-tick::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%2304112a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/72% no-repeat; animation: tick-on .45s var(--ease-out) both; animation-delay: calc(.6s + var(--i, 0) * .45s); } @keyframes tick-on { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } } .art-progress { height: 5px; margin-bottom: .9rem; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; } .art-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-500), var(--cyan-300)); transform-origin: left; animation: grow-x 2.4s var(--ease-in-out) .5s both; } @keyframes grow-x { from { transform: scaleX(.04); } to { transform: none; } } .art-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .85rem; padding-top: .85rem; border-top: 1px solid var(--line-dark); color: var(--on-dark-3); font-size: .75rem; } .art-tags span:not(:first-child) { padding: .2rem .55rem; border-radius: var(--r-pill); border: 1px solid var(--line-dark-strong); color: var(--on-dark-2); font-weight: 600; } /* Platform: agent, policy, portal and reports as one connected flow */ .chain-stack { display: grid; } .chain-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--line-dark-strong); background: rgba(12, 34, 70, .85); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .8); color: var(--on-dark-2); font-size: .8rem; } .chain-card b { display: block; color: #fff; font-size: .9rem; font-weight: 650; } .chain-card .icon-tile { width: 38px; height: 38px; margin: 0; } .chain-card .icon-tile svg { width: 20px; height: 20px; } .chain-card.indent-1 { margin-left: 7%; } .chain-card.indent-2 { margin-left: 14%; } .chain-link { position: relative; width: 2px; height: 24px; margin-left: calc(1rem + 18px); background: repeating-linear-gradient(180deg, rgba(111, 227, 255, .6) 0 4px, transparent 4px 8px); } .chain-link.indent-1 { margin-left: calc(7% + 1rem + 18px); } .chain-link.indent-2 { margin-left: calc(14% + 1rem + 18px); } .chain-link::after { content: ""; position: absolute; left: -3px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan-300); box-shadow: 0 0 12px var(--cyan-300); opacity: 0; animation: flow-drop 2.4s var(--ease-in-out) infinite; animation-delay: calc(1.5s + var(--i, 0) * .8s); } @keyframes flow-drop { 0% { transform: translateY(-4px); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } } .mini-bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; } .mini-bars i { width: 6px; height: calc(var(--v) * 1%); border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--cyan-300), var(--blue-500)); transform-origin: bottom; animation: grow-y .8s var(--ease-out) both; animation-delay: calc(1.4s + var(--i, 0) * .06s); } @keyframes grow-y { from { transform: scaleY(0); } to { transform: none; } } /* AI discovery: tools appear as they are identified, with a slow scan down the list */ .art-scan-wrap { position: relative; overflow: hidden; } .art-scan { position: absolute; left: 0; right: 0; top: -60px; z-index: 1; height: 60px; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(111, 227, 255, .1) 60%, rgba(111, 227, 255, .4) 98%, transparent); opacity: 0; animation: art-scan 6s var(--ease-in-out) 2.4s infinite; } @keyframes art-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 60% { transform: translateY(340px); opacity: 1; } 70%, 100% { transform: translateY(340px); opacity: 0; } } /* Policy controls: a tool moves from review to blocked once other AI is blocked */ .art-swap { display: inline-grid; justify-items: end; } .art-swap > * { grid-area: 1 / 1; } .art-swap > :first-child { animation: swap-out .35s ease 2.3s both; } .art-swap > :last-child { animation: swap-in .4s var(--ease-out) 2.4s both; } @keyframes swap-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes swap-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .ui-toggle.art-switch { animation: switch-bg .3s ease 1.9s both; } .ui-toggle.art-switch::after { animation: switch-knob .3s var(--ease-out) 1.9s both; } @keyframes switch-bg { to { background: var(--blue-500); } } @keyframes switch-knob { to { transform: translateX(16px); } } /* Reports: a light report page whose bars draw in */ .mini-report { overflow: hidden; border-radius: var(--r-lg); border: 1px solid rgba(111, 227, 255, .28); background: #fff; color: var(--on-light-1); box-shadow: var(--shadow-deep), 0 0 90px -40px rgba(56, 182, 255, .55); } .mini-report header { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 1rem; border-bottom: 3px solid var(--cyan-300); background: linear-gradient(120deg, #071a38, #0b3a6e); } .mini-report header img { width: 112px; height: auto; } .mini-report header span { color: #c8d9ed; font-size: .75rem; line-height: 1.4; text-align: right; } .mini-report header strong { display: block; color: #fff; font-size: .8rem; } .mini-report .body { display: grid; gap: .8rem; padding: .9rem 1rem 1rem; } .mini-report .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .mini-report .kpis div { padding: .55rem .65rem; border-radius: 10px; border: 1px solid var(--line-light); background: var(--mist-50); } .mini-report .kpis span { display: block; color: var(--on-light-2); font-size: .75rem; font-weight: 600; } .mini-report .kpis strong { font: 700 1.15rem/1.15 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .mini-report .mr-label { display: block; margin: 0 0 .45rem; color: var(--on-light-2); font: 650 .75rem var(--font-sans); } .mini-report .bars-light { display: flex; align-items: flex-end; gap: 10px; height: 70px; border-bottom: 1px solid var(--line-light); } .mini-report .bars-light i { flex: 1; height: calc(var(--v) * 1%); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #38b6ff, #0773b7); transform-origin: bottom; animation: grow-y .8s var(--ease-out) both; animation-delay: calc(.5s + var(--i, 0) * .07s); } .mini-report .bars-light i.low { background: #c9d9ec; } .mini-report .rows div { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line-light); font-size: .78rem; } .mini-report .rows div:last-child { border-bottom: 0; padding-bottom: 0; } .mini-report .chip--allowed { color: var(--ok-ink); background: #e3f7ee; border-color: transparent; } .mini-report .chip--blocked { color: var(--stop-ink); background: #fde8eb; border-color: transparent; } /* What staff see: drawings of the agent's own windows and the in-tab blocked page, in the agent's colours */ .staff-view { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem); align-items: start; } .staff-view figure { margin: 0; } .staff-view figcaption { margin-top: .75rem; color: var(--on-dark-2); font-size: .9rem; line-height: 1.5; } .staff-view figcaption b { color: #fff; } .section--light .staff-view figcaption, .section--white .staff-view figcaption { color: var(--on-light-2); } .section--light .staff-view figcaption b, .section--white .staff-view figcaption b { color: var(--on-light-1); } .staff-stack { display: grid; gap: clamp(1.4rem, 3vw, 2rem); } .browser-frame { overflow: hidden; border-radius: 14px; border: 1px solid var(--line-dark-strong); background: #eef2f8; box-shadow: var(--shadow-deep); } .section--light .browser-frame, .section--white .browser-frame, .legal-figure .browser-frame { border-color: rgba(7, 26, 56, .2); box-shadow: 0 30px 60px -30px rgba(7, 26, 56, .45), 0 2px 6px rgba(7, 26, 56, .08); } .browser-frame .bar { display: flex; align-items: center; gap: .45rem; padding: .55rem .8rem; border-bottom: 1px solid #cfd8e4; background: #dfe6f0; } .browser-frame .bar i { width: 9px; height: 9px; border-radius: 50%; background: #b9c4d3; } .browser-frame .bar span { flex: 1; min-width: 0; margin-left: .6rem; padding: .25rem .75rem; border-radius: var(--r-pill); background: #fff; color: #4a5a70; font: .75rem var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .browser-frame .stage { padding: clamp(1.2rem, 4vw, 2.6rem) clamp(.8rem, 4vw, 2.4rem); } .block-card { max-width: 430px; margin: 0 auto; overflow: hidden; border-radius: 14px; border: 1px solid #d9e0ea; background: #fff; box-shadow: 0 18px 40px -20px rgba(16, 36, 66, .35); color: #26354d; text-align: left; } .block-card header { padding: .8rem 1.1rem; background: #071a38; } .block-card header img { display: block; width: 104px; height: auto; } .block-card .content { padding: 1.1rem 1.1rem 1rem; } .block-card .title, .agent-notice .title { display: flex; align-items: center; gap: .75rem; margin-bottom: .65rem; } .block-card .stop-icon, .agent-notice .stop-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; background: #fdecea; color: #b42318; } .block-card .stop-icon svg, .agent-notice .stop-icon svg { width: 20px; height: 20px; } .block-card .kicker { display: block; color: #b42318; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .block-card .name { display: block; color: #0b1b33; font-size: 1.1rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; } .block-card p { margin: 0 0 .8rem; color: #4a5a70; font-size: .85rem; line-height: 1.5; } .block-card .host { margin-bottom: .85rem; padding: .55rem .75rem; border-radius: 9px; border: 1px solid #d9e0ea; } .block-card .host span { display: block; color: #4a5a70; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .block-card .host b { color: #0b1b33; font-size: .88rem; } .block-card .ask { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .block-card .ask span:first-child { padding: .45rem .9rem; border-radius: var(--r-pill); background: #0b6fb8; color: #fff; font-size: .8rem; font-weight: 700; } .block-card .ask span:last-child { color: #4a5a70; font-size: .75rem; } .block-card footer { padding: .6rem 1.1rem; border-top: 1px solid #e8eef8; color: #4a5a70; font-size: .75rem; } .agent-notice, .agent-status { overflow: hidden; border-radius: 12px; border: 1px solid #284062; background: #07162d; box-shadow: var(--shadow-deep); color: #b0c0d6; line-height: 1.5; } .agent-notice { position: relative; padding: 1rem 1.1rem 1rem 1.35rem; font-size: .84rem; } .agent-notice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #ff6b78; } .agent-notice .logo, .agent-status .logo { display: block; width: 100px; height: auto; margin-bottom: .8rem; } .agent-notice .stop-icon { background: rgba(255, 107, 120, .16); color: #ff6b78; } .agent-notice .kicker { display: block; color: #ff6b78; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .agent-notice .name { display: block; color: #eef5ff; font-size: 1.02rem; font-weight: 700; } .agent-notice p { margin: 0 0 .7rem; } .agent-notice .links { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; color: #78c4ff; font-size: .8rem; } .agent-notice .links span:last-child { margin-left: auto; padding: .4rem 1.1rem; border-radius: 8px; background: #0b86c9; color: #fff; font-weight: 650; } .agent-status { padding: 1.1rem; font-size: .8rem; } .agent-status .state { display: flex; align-items: center; gap: .55rem; color: #eef5ff; font-size: 1.1rem; font-weight: 650; } .agent-status .state::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #2fd08a; } .agent-status .sub { margin: .2rem 0 .7rem; } .agent-status .box { margin-top: .6rem; padding: .8rem .9rem; border-radius: 10px; border: 1px solid #284062; background: #0d203d; } .agent-status .box > b { display: block; margin-bottom: .3rem; color: #eef5ff; font-size: .86rem; } .agent-status .label { display: block; margin: .5rem 0 .3rem; color: #8a9eba; font-size: .75rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; } .agent-status .pills { display: flex; flex-wrap: wrap; gap: .3rem; } .agent-status .pills span { padding: .12rem .6rem; border-radius: var(--r-pill); border: 1px solid rgba(47, 208, 138, .4); background: rgba(47, 208, 138, .13); color: #2fd08a; font-size: .75rem; font-weight: 600; } .agent-status .pills.stop span { border-color: rgba(255, 107, 120, .4); background: rgba(255, 107, 120, .13); color: #ff6b78; } .agent-status .promise { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem; margin-top: .35rem; } .agent-status .promise i { color: #2fd08a; font-style: normal; font-weight: 700; } .agent-status .promise i.no { color: #ff6b78; } .agent-status .promise b { color: #eef5ff; font-weight: 600; } .agent-status .link { color: #78c4ff; } .staff-note { margin-top: 1.4rem; color: var(--on-dark-3); font-size: .8rem; text-align: center; } .section--light .staff-note, .section--white .staff-note { color: var(--slate-600); } .legal-figure { margin: 1.4rem 0 1.8rem; } .legal-figure .browser-frame .stage { padding: 1.4rem 1rem; } .legal-figure figcaption { margin-top: .6rem; color: var(--on-light-2); font-size: .85rem; } @media (max-width: 960px) { .page-hero .hero-split, .staff-view { grid-template-columns: 1fr; } .hero-art { justify-self: start; max-width: 560px; } } @media (max-width: 560px) { .art-float { display: none; } .chain-card.indent-1, .chain-card.indent-2 { margin-left: 0; } .chain-link.indent-1, .chain-link.indent-2 { margin-left: calc(1rem + 18px); } .agent-notice .links span:last-child { margin-left: 0; } } @media (prefers-reduced-motion: reduce) { .art-scan, .chain-link::after { display: none; } } html.reduce-motion .art-scan, html.reduce-motion .chain-link::after { display: none; } /* AI compliance: which evidence each set of rules calls on */ .evidence-map { margin: clamp(2rem, 4vw, 3rem) 0 0; padding: clamp(1.2rem, 3vw, 1.8rem); border-radius: var(--r-lg); border: 1px solid var(--line-dark); background: rgba(12, 34, 70, .45); } .evidence-map figcaption h3 { margin-bottom: .3rem; } .evidence-map figcaption p { margin: 0 0 1.2rem; color: var(--on-dark-2); max-width: 64ch; } .evidence-map-scroll { overflow-x: auto; } .evidence-map-scroll:focus-visible { outline: 3px solid var(--cyan-300); outline-offset: 3px; border-radius: 10px; } .evidence-map table { width: 100%; min-width: 640px; border-collapse: collapse; } .evidence-map thead th { padding: 0 .5rem .8rem; color: var(--on-dark-2); font-size: .8rem; font-weight: 650; line-height: 1.3; text-align: center; vertical-align: bottom; } .evidence-map tbody th { padding: .85rem .8rem .85rem 0; color: #fff; font-size: .9rem; font-weight: 600; text-align: left; } .evidence-map tbody tr { border-top: 1px solid var(--line-dark); } .evidence-map td { padding: .85rem .5rem; text-align: center; } .em-yes, .em-no { display: inline-block; vertical-align: middle; } .em-yes { width: 22px; height: 22px; border-radius: 50%; background: rgba(47, 208, 138, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%232fd08a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat; box-shadow: inset 0 0 0 1px rgba(47, 208, 138, .4); } .em-no { width: 12px; height: 2px; border-radius: 2px; background: var(--on-dark-3); opacity: .45; } .js .evidence-map .em-yes { transform: scale(0); transition: transform .4s var(--ease-out); } .js .evidence-map.is-visible .em-yes { transform: none; } .js .evidence-map.is-visible tr:nth-child(2) .em-yes { transition-delay: .12s; } .js .evidence-map.is-visible tr:nth-child(3) .em-yes { transition-delay: .24s; } .js .evidence-map.is-visible tr:nth-child(4) .em-yes { transition-delay: .36s; } .evidence-map > p { margin: 1rem 0 0; } /* AI compliance: an example day, from assessment to evidence */ .day-line { position: relative; display: grid; gap: 1.4rem; margin: 0; padding: 0 0 0 2rem; list-style: none; } .day-line::before { content: ""; position: absolute; left: 6px; top: .5rem; bottom: .5rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--cyan-300), var(--blue-500)); transform-origin: top; } .js .reveal .day-line::before { transform: scaleY(0); transition: transform 1.4s var(--ease-in-out) .2s; } .js .reveal.is-visible .day-line::before { transform: none; } .day-line li { position: relative; display: grid; gap: .15rem; } .day-line li::before { content: ""; position: absolute; left: calc(-2rem + 1px); top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--ink-900); box-shadow: 0 0 0 2px var(--cyan-300), 0 0 14px rgba(111, 227, 255, .5); } .day-line time { color: var(--cyan-300); font: 650 .8rem var(--font-mono); letter-spacing: .04em; } .day-line b { color: #fff; font-size: 1.05rem; } .day-line span { color: var(--on-dark-2); } /* Phones: each set of rules becomes a short list of the evidence it calls on, instead of a wide table. */ @media (max-width: 700px) { .evidence-map table, .evidence-map tbody, .evidence-map tr, .evidence-map th, .evidence-map td { display: block; min-width: 0; } .evidence-map thead { display: none; } .evidence-map tbody tr { display: flex; flex-wrap: wrap; gap: .4rem; padding: .9rem 0; } .evidence-map tbody th { flex: 0 0 100%; padding: 0 0 .2rem; } .evidence-map td { padding: 0; } .evidence-map td:has(.em-no) { display: none; } .evidence-map td::after { content: attr(data-label); color: var(--on-dark-2); font-size: .8rem; font-weight: 600; } .evidence-map td { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem .25rem .3rem; border-radius: var(--r-pill); border: 1px solid rgba(47, 208, 138, .3); background: rgba(47, 208, 138, .08); } .evidence-map .em-yes { width: 18px; height: 18px; } }