/* ui.css — shared primitives for ngbot.ai (marketing) and the consoles (/dash, /admin). SOURCE: design/ui.css. The copies in landing/ and api/static/ are outputs of design/build.sh and are diffed in CI; never edit them in place. Consumes theme.css only. Zero literal values: design/scripts/lint_hardcodes.py. Page-specific layout lives in landing/site.css and api/static/dash.css. */ /* ── Fonts ────────────────────────────────────────────────────────────── */ /* Self-hosted (OFL 1.1, licences beside the files in fonts/): the same files Google Fonts served, cut to the latin, latin-ext and arabic subsets the site uses. No third-party request before first paint, and nothing about a visitor reaches Google. Paths are relative to this file, so the landing/ and api/static/ copies each find their own fonts/ folder (design/build.sh). */ /* ds-allow-hardcode:start - the descriptors below NAME the faces the --font-* tokens point at; a definition cannot reference the token it defines. */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/space-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500 700;font-display:swap;src:url(fonts/space-grotesk-latin.woff2) format('woff2');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-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');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-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-400.woff2) format('woff2');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-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-500.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-ext-500.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-500.woff2) format('woff2');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-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-ext-600.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-600.woff2) format('woff2');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-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-ext-700.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-700.woff2) format('woff2');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-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/jetbrains-mono-latin.woff2) format('woff2');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} /* ds-allow-hardcode:end */ /* ── Reset & base ─────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth; scroll-padding-top:calc(var(--size-nav-h) + var(--space-5))} body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-relaxed); color:var(--color-text-secondary);background:var(--color-surface-page);min-height:100vh; -webkit-font-smoothing:antialiased;font-feature-settings:"cv02","cv03","cv04","cv11"} img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;border:0;background:none} [hidden]{display:none!important} h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-bold);color:var(--color-text-primary); line-height:var(--leading-snug);letter-spacing:var(--tracking-snug);text-wrap:balance} h1{font-size:var(--text-5xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight)} h2{font-size:var(--text-4xl)} h3{font-size:var(--text-2xl)} h4{font-size:var(--text-xl)} small{font-size:var(--text-sm)} strong,b{color:var(--color-text-primary);font-weight:var(--weight-semibold)} code,kbd,.mono{font-family:var(--font-mono)} code,kbd{font-size:var(--text-sm);background:var(--color-code-bg);color:var(--color-code-text); padding:0 var(--space-1);border-radius:var(--radius-sm)} ::selection{background:var(--color-interactive-selected-bg);color:var(--color-text-primary)} :focus-visible{outline:var(--width-focus) solid var(--color-border-focus);outline-offset:var(--space-1)} /* ── Arabic-first / bidi ──────────────────────────────────────────────── */ [dir=rtl] body,[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] .btn,[dir=rtl] .chip{font-family:var(--font-arabic)} [dir=rtl] .num,[dir=rtl] .display{font-family:var(--font-display)} /* Arabic has no case and joins its letters: no tracking, no uppercase */ [dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] .field label,[dir=rtl] .label{letter-spacing:normal;text-transform:none} [dir=rtl] code,[dir=rtl] kbd,[dir=rtl] .mono,.ltr{direction:ltr;unicode-bidi:isolate} .num,.tabular{font-variant-numeric:tabular-nums} /* ── Utilities ────────────────────────────────────────────────────────── */ .icon{width:var(--size-icon-md);height:var(--size-icon-md);stroke:currentColor;fill:none;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;flex:none} .icon-xs{width:var(--size-icon-xs);height:var(--size-icon-xs)} .icon-sm{width:var(--size-icon-sm);height:var(--size-icon-sm)} .icon-lg{width:var(--size-icon-lg);height:var(--size-icon-lg)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:fixed;top:var(--space-4);inset-inline-start:var(--space-4);z-index:var(--z-skip); padding:var(--space-2) var(--space-4);border-radius:var(--radius-button); background:var(--color-action-primary);color:var(--color-text-on-action);font-weight:var(--weight-semibold); transform:translateY(-200%);transition:transform var(--duration-fast) var(--ease-out)} .skip:focus-visible{transform:none} .grad-text,.ng-grad-text{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent} .prose{max-width:var(--size-prose-max)} .container{width:100%;max-width:var(--size-content-max);margin-inline:auto;padding-inline:var(--space-page-x)} @media (min-width:768px){.container{padding-inline:var(--space-page-x-lg)}} .hr{border:0;border-top:1px solid var(--color-border-default);margin:var(--space-gap-xl) 0} /* ── Buttons — one hierarchy, every state ─────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-gap-sm); min-height:var(--size-control-md);padding:0 var(--space-4);border-radius:var(--radius-button); border:1px solid transparent;font-family:var(--font-sans);font-size:var(--text-sm); font-weight:var(--weight-semibold);line-height:var(--leading-none);white-space:nowrap; transition:background-color var(--duration-fast) var(--ease-out),border-color var(--duration-fast), color var(--duration-fast),box-shadow var(--duration-fast),transform var(--duration-fast) var(--ease-out)} .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn:disabled,.btn[aria-disabled=true]{opacity:var(--opacity-disabled);cursor:not-allowed;transform:none;box-shadow:none} .btn[aria-busy=true]{opacity:var(--opacity-loading);cursor:progress;pointer-events:none} .btn .icon{width:var(--size-icon-sm);height:var(--size-icon-sm)} /* Solid, not the three-stop brand gradient. The gradient runs gold to ember-red, so a label sits on a different colour at each end of the same button and its contrast is a range rather than a value; on the new hero it also competed with the artwork's own orange. The gradient stays available for deliberate brand moments; it is no longer the default for every action. */ .btn-primary{background:var(--color-button-primary-bg);color:var(--color-button-primary-text)} .btn-primary:hover{box-shadow:var(--shadow-glow)} .btn-primary:active{background:var(--color-button-primary-bg-active)} /* .btn-ghost is the bordered neutral in this codebase (existing markup); .btn-text is the transparent one */ .btn-secondary,.btn-ghost{background:var(--color-button-secondary-bg);border-color:var(--color-button-secondary-border);color:var(--color-button-secondary-text)} .btn-secondary:hover,.btn-ghost:hover{background:var(--color-button-secondary-bg-hover);border-color:var(--color-border-strong)} .btn-text{background:transparent;color:var(--color-text-secondary)} .btn-text:hover{background:var(--color-button-ghost-bg-hover);color:var(--color-button-ghost-text)} .btn-danger{background:var(--color-feedback-error-bg);border-color:var(--color-feedback-error-border);color:var(--color-feedback-error-text)} .btn-danger:hover{background:var(--color-button-destructive-bg);border-color:transparent;color:var(--color-button-destructive-text)} .btn-discord{background:var(--color-button-discord-bg);color:var(--color-button-discord-text)} .btn-discord:hover{filter:brightness(1.08)} .btn-sm{min-height:var(--size-control-sm);padding:0 var(--space-3);font-size:var(--text-xs);border-radius:var(--radius-md)} .btn-lg{min-height:var(--size-control-lg);padding:0 var(--space-6);font-size:var(--text-base)} .btn-xl{min-height:var(--size-control-xl);padding:0 var(--space-8);font-size:var(--text-lg)} .btn-pill{border-radius:var(--radius-pill)} .btn-block{width:100%} .btn-icon{padding:0;width:var(--size-control-md)} .btn-icon.btn-sm{width:var(--size-control-sm)} /* ── Chips / status ───────────────────────────────────────────────────── */ .chip{display:inline-flex;align-items:center;gap:var(--space-gap-xs);min-height:var(--size-control-xs); padding:0 var(--space-2);border-radius:var(--radius-chip);line-height:var(--leading-none);white-space:nowrap; font-size:var(--text-xs);font-weight:var(--weight-semibold); border:1px solid var(--color-chip-neutral-border);background:var(--color-chip-neutral-bg);color:var(--color-chip-neutral-text)} .chip .icon{width:var(--size-icon-xs);height:var(--size-icon-xs)} .chip.ok,.chip.success{background:var(--color-chip-success-bg);color:var(--color-chip-success-text);border-color:var(--color-chip-success-border)} .chip.warn,.chip.warning{background:var(--color-chip-warning-bg);color:var(--color-chip-warning-text);border-color:var(--color-chip-warning-border)} .chip.bad,.chip.error{background:var(--color-chip-error-bg);color:var(--color-chip-error-text);border-color:var(--color-chip-error-border)} .chip.info{background:var(--color-chip-info-bg);color:var(--color-chip-info-text);border-color:var(--color-chip-info-border)} .chip.pro{background:var(--color-chip-brand-bg);color:var(--color-chip-brand-text);border-color:var(--color-chip-brand-border)} .chip.brand{background:var(--gradient-brand);color:var(--color-text-on-action);border-color:transparent} /* ── Forms ────────────────────────────────────────────────────────────── */ .field{margin-bottom:var(--space-gap-lg)} .field:last-child{margin-bottom:0} .field label,.label{display:block;font-size:var(--text-xs);font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--color-text-tertiary);margin-bottom:var(--space-gap-sm)} .field input,.field select,.field textarea,.input{width:100%;min-height:var(--size-control-md); background:var(--color-input-bg);border:1px solid var(--color-input-border);color:var(--color-input-text); border-radius:var(--radius-input);padding:0 var(--space-3);font-size:var(--text-sm);outline:none; transition:border-color var(--duration-fast)} .field textarea,textarea.input{min-height:var(--size-textarea-min);padding:var(--space-2) var(--space-3); line-height:var(--leading-normal);resize:vertical} .field textarea{display:block} .field input::placeholder,.field textarea::placeholder,.input::placeholder{color:var(--color-input-placeholder)} .field input:hover,.field select:hover,.field textarea:hover,.input:hover{border-color:var(--color-input-border-hover)} .field input:focus,.field select:focus,.field textarea:focus,.input:focus{border-color:var(--color-input-border-focus)} /* the same ring every other control gets; the outline:none above only drops the UA default */ .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.input:focus-visible{ outline:var(--width-focus) solid var(--color-border-focus);outline-offset:var(--width-hairline)} .field input:disabled,.field select:disabled,.field textarea:disabled,.input:disabled{background:var(--color-input-bg-disabled);opacity:var(--opacity-disabled);cursor:not-allowed} .field[data-invalid] input,.field[data-invalid] textarea,.input[aria-invalid=true]{border-color:var(--color-input-border-error)} .field .hint{font-size:var(--text-xs);color:var(--color-text-tertiary);margin-top:var(--space-gap-xs);max-inline-size:var(--size-prose-max)} .field .error-msg{display:flex;gap:var(--space-gap-xs);align-items:center;font-size:var(--text-xs);color:var(--color-feedback-error-text);margin-top:var(--space-gap-xs)} /* Switch — a real