/* ══════════════════════════════════════════════════════════════════════ FORTCALL — Connekt Property Desk Built from Connekt's own colours: the blue gradient behind their "FROM A SINGLE DESK TO A WHOLE OFFICE" artwork, and the single orange their wordmark uses for the doubled N. Their logo is never used — only the palette. The canvas is mixed toward that blue rather than being neutral black, so the console sits inside the brand rather than beside it. COLOUR IS RATIONED to three places and nowhere else: 1. the floor stack — blue as the call climbs, ember at the gate 2. the live pip — the call is on 3. focus rings — accessibility is not decoration Everything else is bone, mist and hairlines. When the gate turns red it is the only warm thing on the screen. ══════════════════════════════════════════════════════════════════════ */ :root { --deep: #051A2E; --night: #08243C; --slab: #0C2C48; --line: rgba(143, 199, 242, .13); --line-hi: rgba(143, 199, 242, .26); --connekt: #2E86DE; --sky: #5AA9E9; --haze: #8FC7F2; --ember: #F28C1E; --amber: #FFA733; --danger: #D2544A; --good: #3FA98B; --bone: #E8F1F9; --mist: #93AEC6; --slate: #5F7A93; --display: 'Barlow Condensed', 'Arial Narrow', sans-serif; --body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; --urdu: 'Noto Naskh Arabic', 'IBM Plex Sans', serif; --r: 3px; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; background: var(--deep); color: var(--bone); font-family: var(--body); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 1px; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 99px; } /* ───────────────────────────────────────────────────── wordmark ── */ .wordmark { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: .16em; line-height: 1; text-transform: uppercase; } .wordmark--lg { font-size: 34px; } .wordmark__fort { color: var(--bone); } .wordmark__call { color: var(--mist); } /* ──────────────────────────────────────────────────────── phase ── */ /* is set before first paint, so exactly one root is ever painted: login, the restoring splash, or the console shell. Hide-only rules — each root keeps the display value its own class defines. */ [data-phase="login"] #splash, [data-phase="login"] #shell, [data-phase="restoring"] #login, [data-phase="restoring"] #shell, [data-phase="console"] #login, [data-phase="console"] #splash { display: none !important; } /* ─────────────────────────────────────────────────────── splash ── */ .splash { min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; background: radial-gradient(90ch 60ch at 50% -20%, rgba(46,134,222,.16), transparent 70%), var(--deep); } .splash__note { margin: 0; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--slate); } /* ──────────────────────────────────────────────────────── login ── */ .login { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr); position: relative; overflow: hidden; background: var(--deep); } .login__ambient { position: absolute; width: min(64vw, 860px); aspect-ratio: 1; left: -14vw; bottom: -62%; pointer-events: none; border: 1px solid rgba(90,169,233,.12); border-radius: 50%; box-shadow: 0 0 0 90px rgba(46,134,222,.025), 0 0 0 180px rgba(46,134,222,.018), 0 0 140px rgba(46,134,222,.09); } .login__intro { min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; position: relative; z-index: 1; padding: clamp(34px, 5vw, 72px); background: linear-gradient(135deg, rgba(46,134,222,.09), transparent 48%), radial-gradient(80ch 60ch at 8% 90%, rgba(46,134,222,.12), transparent 68%); border-right: 1px solid var(--line); } .wordmark--login { font-size: 26px; } .login__message { max-width: 610px; margin: auto 0; padding: 70px 0; } .login__eyebrow, .login__kicker { margin: 0 0 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; color: var(--sky); } .login__title { margin: 0; font-family: var(--display); font-size: clamp(54px, 6vw, 88px); font-weight: 500; letter-spacing: -.025em; line-height: .93; text-transform: uppercase; } .login__copy { max-width: 480px; margin: 26px 0 0; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; color: var(--mist); } .login__foot { display: flex; align-items: center; gap: 9px; margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--slate); } .login__status { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 12px rgba(63,169,139,.5); } .login__panel { min-height: 100dvh; display: grid; place-items: center; position: relative; z-index: 1; padding: clamp(28px, 6vw, 84px); background: rgba(8,36,60,.72); } .login__card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 20px; } .login__cardhead { margin-bottom: 10px; } .login__heading { margin: 0; font-family: var(--display); font-size: 36px; font-weight: 500; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; } .login__subhead { margin: 10px 0 0; color: var(--mist); } .field--login { gap: 8px; } .field--login input { min-height: 50px; padding: 12px 14px; background: rgba(5,26,46,.8); border-color: var(--line-hi); } .field--login input::placeholder { color: var(--slate); opacity: .72; } .field--login input:focus { border-color: var(--sky); } .password-field { display: block; position: relative; } .password-field input { padding-right: 64px; } .password-field__toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); padding: 5px 3px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); background: transparent; border: 0; cursor: pointer; } .password-field__toggle:hover { color: var(--bone); } .login__submit { width: 100%; min-height: 50px; justify-content: space-between; margin-top: 4px; padding-inline: 16px; } .login__submit.is-loading { cursor: wait; opacity: .72; } .login__arrow { font-family: var(--body); font-size: 20px; line-height: 0; } .login__error { margin: -4px 0 0; padding: 10px 12px; font-size: 12px; color: #F0A79F; background: rgba(210,84,74,.1); border-left: 2px solid var(--danger); } /* ──────────────────────────────────────────────────────── field ── */ .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--slate); } .field__opt { color: var(--line-hi); letter-spacing: .06em; } input, select, textarea { width: 100%; padding: 9px 11px; background: var(--deep); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .15s; } input:hover, select:hover, textarea:hover { border-color: var(--line-hi); } textarea { resize: vertical; } select { cursor: pointer; } /* ───────────────────────────────────────────────────────── btn ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; background: transparent; color: var(--bone); border: 1px solid var(--line-hi); border-radius: var(--r); cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .btn:hover:not(:disabled) { background: rgba(143,199,242,.07); border-color: var(--haze); } .btn:disabled { opacity: .38; cursor: not-allowed; } .btn--sm { padding: 6px 12px; font-size: 13px; } .btn--primary { background: var(--bone); color: var(--deep); border-color: var(--bone); } .btn--primary:hover:not(:disabled) { background: #fff; border-color: #fff; } .btn--danger { border-color: rgba(210,84,74,.6); color: #F0A79F; } .btn--danger:hover:not(:disabled) { background: rgba(210,84,74,.14); border-color: var(--danger); } .btn--ghost { border-color: var(--line); color: var(--mist); } /* ───────────────────────────────────────────────────────── shell ── */ .shell { min-height: 100dvh; display: grid; grid-template-columns: 208px 1fr; } .rail { display: flex; flex-direction: column; gap: 26px; padding: 24px 18px; border-right: 1px solid var(--line); background: var(--night); position: sticky; top: 0; height: 100dvh; } .rail__desk { margin: -18px 0 0; font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; } .rail__desk span { color: var(--slate); } .rail__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .nav { display: flex; flex-direction: column; gap: 1px; } .nav__item { display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; font-family: var(--display); font-size: 16px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; text-align: left; background: transparent; color: var(--mist); border: 0; border-left: 2px solid transparent; cursor: pointer; transition: color .15s, background .15s, border-color .15s; } .nav__item:hover { color: var(--bone); background: rgba(143,199,242,.05); } .nav__item.is-active { color: var(--bone); border-left-color: var(--connekt); background: rgba(46,134,222,.09); } .nav__idx { font-family: var(--mono); font-size: 10px; color: var(--slate); } /* ────────────────────────────────────────────────────────── main ── */ .main { padding: 26px 30px 46px; min-width: 0; } .view { display: none; } .view.is-active { display: block; animation: rise .3s ease both; } @keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 22px; border-bottom: 1px solid var(--line); } .head__eyebrow { margin: 0 0 2px; font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--slate); } .head__title { margin: 0; font-family: var(--display); font-size: clamp(28px, 4vw, 40px); font-weight: 600; letter-spacing: .01em; line-height: 1; } .head__note { margin: 0; font-size: 13px; color: var(--mist); max-width: 44ch; } /* ───────────────────────────────────────────────────────── grid ── */ .grid { display: grid; grid-template-columns: 270px minmax(0, 1fr) 320px; gap: 18px; align-items: start; } .grid--inbound { grid-template-columns: minmax(0, 1fr) 340px; } .col { display: flex; flex-direction: column; gap: 18px; min-width: 0; } .panel { background: var(--night); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; } .panel--grow { display: flex; flex-direction: column; } .panel__title { margin: 0 0 12px; font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); } .hint { margin: 8px 0 0; font-size: 12px; color: var(--slate); line-height: 1.5; } /* A hint explains the control above it, so it must not crowd the control below it — without this the note collides with the next field's label. */ .hint + .field, .hint + .search { margin-top: 15px; } .setup { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .callstat { margin: 12px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); } .callstat.is-live { color: var(--sky); } .callstat.is-live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--connekt); animation: pip 1.4s ease-in-out infinite; } @keyframes pip { 0%,100% { opacity: 1; } 50% { opacity: .25; } } /* ───────────────────────────────────────────────────────── book ── */ .book { display: flex; flex-direction: column; gap: 1px; max-height: 60vh; overflow-y: auto; } .rec { width: 100%; display: block; padding: 10px 11px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--r); cursor: pointer; transition: background .15s, border-color .15s; } .rec:hover { background: rgba(143,199,242,.05); } .rec.is-picked { background: rgba(46,134,222,.12); border-color: rgba(46,134,222,.4); } .rec__name { font-weight: 600; font-size: 13px; } .rec__org { font-size: 12px; color: var(--mist); } .rec__meta { margin-top: 4px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); } .rec--blocked { opacity: .95; } .rec--blocked .rec__name { color: #F0A79F; } .rec__flag { display: inline-block; margin-top: 5px; padding: 2px 6px; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #F0A79F; border: 1px solid rgba(210,84,74,.5); border-radius: 2px; } /* ═══════════════════════════════════════════ THE PAIR ══ The signature element, and what replaced a nine-storey building. The old console drew RJ Shopping Mall because a property call climbed it, floor by floor, and stalled on the 2nd until the truth had been told. A mediation climbs nothing. It has two people, two languages and a direction of travel, and exactly one way to fail invisibly: replying to someone in the language they just spoke, which sounds like a working session and leaves the other person out of their own conversation. So the arrows are drawn, both of them, rather than leaving the operator to infer the direction from two names side by side. ══════════════════════════════════════════════════════════════════ */ /* ── the two jobs, picked before anything connects ── */ .modepick { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 16px; } .modebtn { display: flex; flex-direction: column; gap: 5px; padding: 11px 12px; text-align: left; background: rgba(143,199,242,.035); border: 1px solid var(--line); border-radius: 3px; cursor: pointer; transition: background .2s, border-color .2s; } .modebtn:hover { background: rgba(143,199,242,.07); border-color: var(--line-hi); } .modebtn:disabled { cursor: not-allowed; } .modebtn:disabled:not(.is-on) { opacity: .35; } .modebtn__name { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); transition: color .2s; } .modebtn__note { font-size: 11.5px; line-height: 1.5; color: var(--slate); } /* The picked job. Connekt's blue is rationed hard across this console — it marks the live session and the chosen mode, and nothing else. */ .modebtn.is-on { background: rgba(46,134,222,.12); border-color: rgba(46,134,222,.5); } .modebtn.is-on .modebtn__name { color: var(--bone); } /* A guide session has one person in it. The local select stays in the layout rather than vanishing — a control that disappears reads as a bug, and the operator needs to see that the field exists and does not apply. */ #nativeField.is-off { opacity: .35; } #nativeField.is-off .field__label::after { content: ' — not used in guide'; color: var(--line-hi); letter-spacing: .06em; } .hint--warn { color: var(--amber); } /* ── who is in the room ── */ .pair { display: flex; flex-direction: column; gap: 12px; } .pair__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .pair__mode { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bone); } .pair__flow { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; background: rgba(143,199,242,.04); border-left: 2px solid rgba(46,134,222,.5); border-radius: 2px; } .pair__flow--one { align-items: flex-start; } .pair__leg { display: flex; align-items: center; gap: 9px; min-width: 0; } .pair__lang { font-family: var(--display); font-size: 14px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--bone); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pair__arrow { font-size: 14px; color: var(--connekt); flex: none; } .pair__note { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); } /* ─────────────────────────────────────────────────── transcript ── */ .transcript { flex: 1; min-height: 300px; max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-right: 4px; } .line { display: flex; flex-direction: column; gap: 3px; } .line__who { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); } .line__text { font-size: 14px; line-height: 1.6; padding-left: 11px; border-left: 2px solid var(--line); } .line__text:lang(ur), .line__text[dir="rtl"] { font-family: var(--urdu); font-size: 16px; line-height: 1.9; } .line--agent .line__text { border-left-color: rgba(46,134,222,.5); } .line--caller .line__text { border-left-color: var(--line-hi); color: var(--mist); } .line--supervisor .line__text { border-left-color: rgba(242,140,30,.55); color: var(--amber); font-style: italic; } .transcript__empty { margin: auto; color: var(--slate); font-size: 13px; } .whisper { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .whisper input { flex: 1; } /* ──────────────────────────────────────────────────────── tools ── */ .tools { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow-y: auto; } .tool { display: flex; align-items: baseline; gap: 8px; padding: 6px 8px; font-family: var(--mono); font-size: 11px; border-radius: 2px; } .tool__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--slate); flex: none; } .tool--ok .tool__dot { background: var(--good); } .tool--blocked { background: rgba(242,140,30,.1); } .tool--blocked .tool__dot { background: var(--ember); } .tool--fail .tool__dot { background: var(--danger); } .tool__name { color: var(--bone); } .tool__tag { margin-left: auto; color: var(--slate); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; } .tools__empty { color: var(--slate); font-size: 12px; padding: 4px 2px; } /* ───────────────────────────────────────────────────── wrap-up ── */ .wrap { display: flex; flex-direction: column; gap: 12px; } .kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 12.5px; } .kv dt { color: var(--slate); } .kv dd { margin: 0; font-family: var(--mono); font-size: 11.5px; text-align: right; } .score { display: flex; align-items: baseline; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); } .score__n { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; } .score__of { font-family: var(--mono); font-size: 11px; color: var(--slate); } .score__label { margin-left: auto; font-size: 12px; color: var(--mist); text-align: right; } .breach { padding: 9px 11px; font-size: 12.5px; line-height: 1.5; color: #F0A79F; background: rgba(210,84,74,.12); border: 1px solid rgba(210,84,74,.45); border-radius: 2px; } .coach { margin: 0; padding-left: 16px; font-size: 12.5px; color: var(--mist); line-height: 1.6; } .coach li { margin-bottom: 4px; } /* ────────────────────────────────────────────────── knowledge ── */ .search { display: flex; gap: 10px; } .search input { flex: 1; } .chunks { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 18px; } .chunk { padding: 14px; background: var(--night); border: 1px solid var(--line); border-radius: var(--r); } .chunk__title { margin: 0 0 4px; font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: .02em; } .chunk__src { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--slate); word-break: break-word; } .chunk__text { margin: 9px 0 0; font-size: 13px; line-height: 1.6; color: var(--mist); } .chunk__tags { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 4px; } .tag { padding: 2px 6px; font-family: var(--mono); font-size: 9.5px; color: var(--slate); border: 1px solid var(--line); border-radius: 2px; } .chunk__score { float: right; font-family: var(--mono); font-size: 10px; color: var(--connekt); } /* ─────────────────────────────────────────────────── playbook ── */ .pb { margin-bottom: 18px; } .pb__body { margin: 0; padding: 14px; font-family: var(--mono); font-size: 11.5px; line-height: 1.65; color: var(--mist); background: var(--deep); border: 1px solid var(--line); border-radius: var(--r); white-space: pre-wrap; overflow-x: auto; max-height: 460px; } .arm { padding: 12px 14px; border: 1px solid var(--line); border-left: 2px solid var(--ember); border-radius: var(--r); margin-bottom: 10px; } .arm__name { font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); } .arm__rule { margin: 5px 0 0; font-size: 13.5px; } .arm__why { margin: 5px 0 0; font-size: 12.5px; color: var(--slate); } /* ─────────────────────────────────────────────────────── desk ── */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; } .stat { padding: 14px; background: var(--night); border: 1px solid var(--line); border-radius: var(--r); } .stat__n { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1; } .stat__label { margin-top: 5px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); } .calls { display: flex; flex-direction: column; gap: 1px; } .callrow { display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; padding: 9px 8px; font-size: 12.5px; border-bottom: 1px solid var(--line); } .callrow__d { font-family: var(--mono); font-size: 11px; color: var(--mist); } .pill { padding: 2px 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line-hi); border-radius: 99px; color: var(--mist); } /* Session outcomes. Only two of these are bad: a line that broke, and a session nobody ever spoke into. Someone walking away mid-conversation is how conversations end. */ .pill--completed { color: var(--good); border-color: rgba(63,169,139,.45); } .pill--ready { color: var(--good); border-color: rgba(63,169,139,.45); } .pill--live { color: var(--connekt); border-color: rgba(46,134,222,.55); } .pill--abandoned { color: var(--amber); border-color: rgba(242,140,30,.45); } .pill--empty { color: var(--slate); border-color: var(--line-hi); } .pill--incomplete{ color: var(--amber); border-color: rgba(242,140,30,.45); } .pill--unrecorded{ color: var(--slate); border-color: var(--line-hi); } .pill--failed { color: var(--danger); border-color: rgba(210,84,74,.55); } .empty { color: var(--slate); font-size: 13px; padding: 10px 2px; } /* ─────────────────────────────────────────────────── responsive ── */ @media (max-width: 880px) { .login { grid-template-columns: 1fr; overflow: auto; } .login__intro { min-height: auto; padding: 30px clamp(24px, 7vw, 54px) 34px; border-right: 0; border-bottom: 1px solid var(--line); } .login__message { padding: 56px 0 26px; } .login__title { font-size: clamp(46px, 12vw, 70px); } .login__copy { margin-top: 18px; } .login__foot { display: none; } .login__panel { min-height: auto; place-items: start center; padding: 42px clamp(24px, 7vw, 54px) 64px; } } @media (max-width: 1240px) { .grid { grid-template-columns: minmax(0, 1fr) 320px; } .col--left { grid-column: 1 / -1; } .book { max-height: 260px; } } @media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .rail { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 14px; border-right: 0; border-bottom: 1px solid var(--line); } .rail__desk { display: none; } .nav { flex-direction: row; flex-wrap: wrap; } .nav__item { border-left: 0; border-bottom: 2px solid transparent; padding: 6px 9px; } .nav__item.is-active { border-left-color: transparent; border-bottom-color: var(--connekt); } .rail__foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; } .main { padding: 20px 16px 40px; } .grid, .grid--inbound { grid-template-columns: 1fr; } .setup { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }