/* Simply Linked — one stylesheet, mobile first. Identity comes from the logo: a winged flame in deep navy and burnished gold. The portal is built to the proportions of a professional network — a 52px bar, 14px interface text, 8px cards on a tinted page, hairlines instead of shadows, 600-weight headings — so it reads as a place for working adults. The one flourish is the banner (.sl-banner): the logo's wing feathers fanned across a field of the theme's deepest colour. THEMES. Every colour below is a semantic token. The admin picks one of four themes (Appearance in the admin console → setting "Appearance.Theme"); the server sends the name and js/config.js puts it on . Add a theme by adding one block here and one entry to SlSettingsService's options — no rule further down names a colour. */ :root, :root[data-theme="light"] { --sl-page: #f1f3f7; --sl-surface: #ffffff; --sl-sunk: #eaeef4; --sl-ink: #101b2d; --sl-ink-2: #4b5870; --sl-ink-3: #6b778c; --sl-line: #d5dbe5; --sl-line-soft: #e6eaf0; --sl-primary: #0b2e5b; --sl-primary-hover: #082245; --sl-on-primary: #ffffff; --sl-primary-tint: #e3ebf6; --sl-primary-tint-ink: #0b2e5b; --sl-link: #0b4a94; --sl-accent: #be9650; --sl-accent-ink: #7a5a1e; --sl-accent-tint: #faf3e3; --sl-accent-tint-ink: #4e390f; --sl-accent-line: #ead9b0; --sl-on-accent: #1d1503; --sl-danger: #b3261e; --sl-danger-hover: #8f1d17; --sl-danger-tint: #fbe6e4; --sl-danger-tint-ink: #6e1a15; --sl-ok: #1a7f4e; --sl-nav-bg: #ffffff; --sl-nav-ink: #101b2d; --sl-nav-ink-2: #5a6679; --sl-nav-active: #0b2e5b; --sl-nav-line: #d5dbe5; --sl-nav-chip: #eaeef4; --sl-banner: #0b2e5b; --sl-banner-feather: rgba(190, 150, 80, 0.55); --sl-banner-ink: #ffffff; --sl-hero-ink: #0b2e5b; --sl-toast-bg: #101b2d; --sl-toast-ink: #ffffff; --sl-scrim: rgba(10, 22, 40, 0.55); --sl-focus: #be9650; --sl-float: 0 12px 32px -8px rgba(10, 22, 40, 0.28), 0 0 0 1px rgba(10, 22, 40, 0.06); --sl-logo-mark: url("/assets/img/logo-mark.png"); --sl-logo-mark-nav: url("/assets/img/logo-mark.png"); --sl-logo-full: url("/assets/img/logo-full.png"); --sl-word-a: #0b2e5b; --sl-word-b: #be9650; --sl-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234b5870'%3E%3Cpath d='M12 16l-6-6h12z'/%3E%3C/svg%3E"); --sl-font: "Source Sans 3", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --sl-font-word: "Montserrat", "Source Sans 3", sans-serif; --sl-r-field: 4px; --sl-r-panel: 8px; --sl-r-btn: 999px; --sl-r-pill: 999px; --sl-r-photo: 50%; --sl-top-h: 52px; --sl-tabs-h: 56px; color-scheme: light; } /* Dark: the logo's navy taken down to night. Gold becomes the action colour because navy cannot carry a button on a navy page; the logo swaps its navy for near-white. */ :root[data-theme="dark"] { --sl-page: #0a1322; --sl-surface: #121e33; --sl-sunk: #1a2944; --sl-ink: #e9eef7; --sl-ink-2: #a9b6cb; --sl-ink-3: #8593ab; --sl-line: #2a3b5c; --sl-line-soft: #1f2e4b; --sl-primary: #d6b06c; --sl-primary-hover: #e4c285; --sl-on-primary: #14100a; --sl-primary-tint: #2a2f3a; --sl-primary-tint-ink: #e9cf9a; --sl-link: #8fb8f0; --sl-accent: #d6b06c; --sl-accent-ink: #e2c488; --sl-accent-tint: #2b2617; --sl-accent-tint-ink: #f0dcae; --sl-accent-line: #4d4223; --sl-on-accent: #14100a; --sl-danger: #e0574e; --sl-danger-hover: #ea736b; --sl-danger-tint: #3a1c1c; --sl-danger-tint-ink: #ffc9c4; --sl-ok: #5fcf97; --sl-nav-bg: #0e182b; --sl-nav-ink: #e9eef7; --sl-nav-ink-2: #97a5bd; --sl-nav-active: #d6b06c; --sl-nav-line: #22314f; --sl-nav-chip: #1a2944; --sl-banner: #06101f; --sl-banner-feather: rgba(214, 176, 108, 0.5); --sl-banner-ink: #ffffff; --sl-hero-ink: #e9eef7; --sl-toast-bg: #e9eef7; --sl-toast-ink: #0a1322; --sl-scrim: rgba(0, 0, 0, 0.66); --sl-focus: #d6b06c; --sl-float: 0 16px 40px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px #2a3b5c; --sl-logo-mark: url("/assets/img/logo-mark-ondark.png"); --sl-logo-mark-nav: url("/assets/img/logo-mark-ondark.png"); --sl-logo-full: url("/assets/img/logo-full-ondark.png"); --sl-word-a: #eef3fb; --sl-word-b: #d6b06c; --sl-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23a9b6cb'%3E%3Cpath d='M12 16l-6-6h12z'/%3E%3C/svg%3E"); color-scheme: dark; } /* Studio: Visual Studio's blue and white. A solid blue title bar carrying the all-white logo, white tool-window panels on light grey, and squared corners everywhere — the IDE's habit of never rounding anything is most of its character. */ :root[data-theme="studio"] { --sl-page: #eef1f5; --sl-surface: #ffffff; --sl-sunk: #e7ebf1; --sl-ink: #1e1e1e; --sl-ink-2: #484f5a; --sl-ink-3: #6a737f; --sl-line: #ccd3dd; --sl-line-soft: #e2e6ec; --sl-primary: #007acc; --sl-primary-hover: #0062a3; --sl-on-primary: #ffffff; --sl-primary-tint: #dcefff; --sl-primary-tint-ink: #004f86; --sl-link: #0066b8; --sl-accent: #007acc; --sl-accent-ink: #00568f; --sl-accent-tint: #fff8d9; --sl-accent-tint-ink: #4a3d00; --sl-accent-line: #ecdc8d; --sl-on-accent: #ffffff; --sl-danger: #c72e2e; --sl-danger-hover: #a12323; --sl-danger-tint: #fde7e7; --sl-danger-tint-ink: #7a1818; --sl-ok: #16825d; --sl-nav-bg: #007acc; --sl-nav-ink: #ffffff; --sl-nav-ink-2: #d3eaff; --sl-nav-active: #ffffff; --sl-nav-line: #0062a3; --sl-nav-chip: rgba(255, 255, 255, 0.18); --sl-banner: #005a9e; --sl-banner-feather: rgba(255, 255, 255, 0.34); --sl-banner-ink: #ffffff; --sl-hero-ink: #005a9e; --sl-toast-bg: #1e1e1e; --sl-toast-ink: #ffffff; --sl-scrim: rgba(30, 30, 30, 0.5); --sl-focus: #0090f1; --sl-float: 0 8px 24px -6px rgba(0, 0, 0, 0.3), 0 0 0 1px #ccd3dd; --sl-logo-mark: url("/assets/img/logo-mark.png"); --sl-logo-mark-nav: url("/assets/img/logo-mark-white.png"); --sl-logo-full: url("/assets/img/logo-full.png"); --sl-word-a: #ffffff; --sl-word-b: #ffffff; --sl-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23484f5a'%3E%3Cpath d='M12 16l-6-6h12z'/%3E%3C/svg%3E"); --sl-font: "Segoe UI", "Source Sans 3", -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --sl-r-field: 2px; --sl-r-panel: 2px; --sl-r-btn: 2px; --sl-r-pill: 2px; --sl-r-photo: 2px; color-scheme: light; } /* LinkedIn: its warm paper page, white cards and the one blue. */ :root[data-theme="linkedin"] { --sl-page: #f4f2ee; --sl-surface: #ffffff; --sl-sunk: #edf3f8; --sl-ink: #191919; --sl-ink-2: #5e5e5e; --sl-ink-3: #767676; --sl-line: #dfdeda; --sl-line-soft: #ebebe8; --sl-primary: #0a66c2; --sl-primary-hover: #004182; --sl-on-primary: #ffffff; --sl-primary-tint: #e8f2fc; --sl-primary-tint-ink: #004182; --sl-link: #0a66c2; --sl-accent: #c37d16; --sl-accent-ink: #915907; --sl-accent-tint: #fcf3e1; --sl-accent-tint-ink: #5c3a05; --sl-accent-line: #efdcb4; --sl-on-accent: #ffffff; --sl-danger: #cb112d; --sl-danger-hover: #a00d24; --sl-danger-tint: #fdeaec; --sl-danger-tint-ink: #7d0a1c; --sl-ok: #057642; --sl-nav-bg: #ffffff; --sl-nav-ink: #191919; --sl-nav-ink-2: #666666; --sl-nav-active: #191919; --sl-nav-line: #dfdeda; --sl-nav-chip: #edf3f8; --sl-banner: #a0b4b7; --sl-banner-feather: rgba(255, 255, 255, 0.5); --sl-banner-ink: #ffffff; --sl-hero-ink: #8f5849; --sl-toast-bg: #191919; --sl-toast-ink: #ffffff; --sl-scrim: rgba(0, 0, 0, 0.6); --sl-focus: #0a66c2; --sl-float: 0 8px 28px -6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.08); --sl-word-a: #0b2e5b; --sl-word-b: #be9650; --sl-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235e5e5e'%3E%3Cpath d='M12 16l-6-6h12z'/%3E%3C/svg%3E"); --sl-font: -apple-system, system-ui, "Segoe UI", Roboto, "Source Sans 3", "Helvetica Neue", Arial, sans-serif; } /* ---- Base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; background: var(--sl-page); } body { margin: 0; background: var(--sl-page); color: var(--sl-ink); font-family: var(--sl-font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } body.sl-noscroll { overflow: hidden; } body.sl-has-tabs { padding-bottom: calc(var(--sl-tabs-h) + env(safe-area-inset-bottom, 0px)); } main { flex: 1 0 auto; } h1, h2, h3 { font-family: var(--sl-font); line-height: 1.25; margin: 0; font-weight: 600; letter-spacing: 0; } h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 16px; } p { margin: 0 0 0.75em; } p:last-child { margin-bottom: 0; } a { color: var(--sl-link); text-decoration: none; font-weight: 600; } a:hover { text-decoration: underline; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--sl-focus); outline-offset: 2px; border-radius: var(--sl-r-field); } .sl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sl-muted { color: var(--sl-ink-2); } .sl-small { font-size: 13px; } .sl-prewrap { white-space: pre-wrap; overflow-wrap: anywhere; } .sl-stack > * + * { margin-top: 12px; } .sl-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sl-grow { flex: 1 1 auto; } .sl-wrap { width: 100%; max-width: 1128px; margin: 0 auto; padding: 0 12px; } .sl-narrow { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 12px; } .sl-page { padding-top: 16px; padding-bottom: 40px; } .sl-pagehead { margin-bottom: 14px; } .sl-pagehead p { color: var(--sl-ink-2); margin-top: 4px; max-width: 70ch; } /* ---- Logo -------------------------------------------------------------------------- */ /* The mark is a background image so each theme can name its own variant (colour, reversed for dark, all white for the blue bar) without any page knowing which theme is active. */ .sl-mark { display: inline-block; flex: none; width: 54px; height: 32px; background: var(--sl-logo-mark) center / contain no-repeat; } .sl-top .sl-mark { background-image: var(--sl-logo-mark-nav); } .sl-word { font-family: var(--sl-font-word); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; color: var(--sl-ink); } .sl-word b { font-weight: 700; color: var(--sl-ink); } .sl-word i { font-style: normal; color: var(--sl-accent-ink); } .sl-top .sl-word b { color: var(--sl-word-a); } .sl-top .sl-word i { color: var(--sl-word-b); } .sl-logo-full { display: block; width: 210px; aspect-ratio: 640 / 472; background: var(--sl-logo-full) center / contain no-repeat; } /* ---- Top bar ---------------------------------------------------------------------- */ /* The host sticks, not the bar inside it: a sticky element cannot leave its parent, and the host is only as tall as the bar. */ #sl-nav { position: sticky; top: 0; z-index: 40; } .sl-top { background: var(--sl-nav-bg); border-bottom: 1px solid var(--sl-nav-line); color: var(--sl-nav-ink); } .sl-top-in { max-width: 1128px; margin: 0 auto; padding: 0 12px; height: var(--sl-top-h); display: flex; align-items: center; gap: 8px; } .sl-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; min-height: 44px; min-width: 0; } .sl-brand:hover { text-decoration: none; } .sl-brand-name { font-size: 13px; font-weight: 400; color: var(--sl-nav-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--sl-nav-line); display: none; } .sl-top-gap { flex: 1 1 auto; } .sl-toplinks { display: none; flex: 1 1 auto; justify-content: flex-end; gap: 0; } .sl-toplink { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 84px; height: var(--sl-top-h); padding: 0 10px; text-decoration: none; color: var(--sl-nav-ink-2); font-weight: 400; font-size: 12px; line-height: 1.2; } .sl-toplink i { font-size: 22px; line-height: 1; } .sl-toplink:hover { color: var(--sl-nav-ink); text-decoration: none; } .sl-toplink.is-active { color: var(--sl-nav-active); } .sl-toplink.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sl-nav-active); } .sl-toplink .sl-badge { position: absolute; top: 5px; left: calc(50% + 4px); } .sl-acct { position: relative; margin-left: auto; } .sl-toplinks + .sl-acct { margin-left: 0; padding-left: 4px; border-left: 1px solid var(--sl-nav-line); } .sl-acct-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 4px 6px; border: 0; border-radius: var(--sl-r-field); background: none; cursor: pointer; color: var(--sl-nav-ink-2); } .sl-acct-btn:hover { color: var(--sl-nav-ink); } .sl-acct-init { width: 28px; height: 28px; border-radius: var(--sl-r-photo); display: grid; place-items: center; background: var(--sl-nav-chip); color: var(--sl-nav-ink); font-weight: 600; font-size: 12px; } .sl-acct-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; } .sl-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 220px; background: var(--sl-surface); color: var(--sl-ink); border-radius: var(--sl-r-panel); box-shadow: var(--sl-float); padding: 4px 0; z-index: 50; } .sl-menu a, .sl-menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 16px; border: 0; background: none; text-decoration: none; color: var(--sl-ink); cursor: pointer; text-align: left; font-weight: 400; font-size: 14px; } .sl-menu a:hover, .sl-menu button:hover { background: var(--sl-sunk); text-decoration: none; } .sl-menu i { font-size: 18px; color: var(--sl-ink-2); } .sl-tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; background: var(--sl-nav-bg); border-top: 1px solid var(--sl-nav-line); padding-bottom: env(safe-area-inset-bottom, 0px); } .sl-tab { flex: 1 1 0; min-height: var(--sl-tabs-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-decoration: none; color: var(--sl-nav-ink-2); font-size: 11px; font-weight: 400; position: relative; } .sl-tab:hover { text-decoration: none; } .sl-tab i { font-size: 23px; line-height: 1; } .sl-tab.is-active { color: var(--sl-nav-active); } .sl-tab.is-active::before { content: ""; position: absolute; top: -1px; left: 18%; right: 18%; height: 2px; background: var(--sl-nav-active); } .sl-tab-ico { position: relative; display: inline-flex; } .sl-tab-ico .sl-badge { position: absolute; top: -5px; left: 60%; } .sl-badge { display: inline-grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--sl-danger); color: #fff; font-size: 11px; font-weight: 600; line-height: 1; } @media (min-width: 860px) { body { font-size: 14px; } .sl-toplinks { display: flex; } .sl-tabs { display: none; } body.sl-has-tabs { padding-bottom: 0; } .sl-wrap, .sl-narrow, .sl-top-in { padding-left: 24px; padding-right: 24px; } .sl-page { padding-top: 24px; } .sl-brand-name:not(:empty) { display: block; } .sl-acct-btn { flex-direction: column; gap: 1px; min-width: 64px; height: var(--sl-top-h); padding: 0 8px; justify-content: center; } .sl-acct-init { width: 24px; height: 24px; font-size: 10.5px; } .sl-acct-btn .ri-arrow-down-s-line { display: none; } .sl-acct-name::after { content: " \25BE"; } } @media (max-width: 859px) { .sl-acct-name, .sl-acct-btn .ri-arrow-down-s-line { display: none; } .sl-word { font-size: 17px; } } /* ---- Buttons ---------------------------------------------------------------------- */ .sl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 20px; border-radius: var(--sl-r-btn); border: 1px solid transparent; font-weight: 600; font-size: 16px; line-height: 1.25; text-decoration: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; position: relative; } .sl-btn:hover { text-decoration: none; } .sl-btn i { font-size: 18px; } .sl-btn-primary { background: var(--sl-primary); color: var(--sl-on-primary); } .sl-btn-primary:hover { background: var(--sl-primary-hover); color: var(--sl-on-primary); } .sl-btn-gold { background: var(--sl-accent); color: var(--sl-on-accent); } .sl-btn-gold:hover { filter: brightness(0.94); color: var(--sl-on-accent); } /* The outlined secondary: a 1px ring that thickens on hover instead of filling. */ .sl-btn-ghost { background: transparent; color: var(--sl-primary); border-color: var(--sl-primary); } .sl-btn-ghost:hover { background: var(--sl-primary-tint); color: var(--sl-primary-tint-ink); box-shadow: inset 0 0 0 1px var(--sl-primary); } .sl-btn-danger { background: var(--sl-danger); color: #fff; } .sl-btn-danger:hover { background: var(--sl-danger-hover); color: #fff; } .sl-btn-sm { min-height: 40px; padding: 4px 16px; font-size: 15px; } .sl-btn-block { width: 100%; } .sl-btn:disabled { opacity: 0.5; cursor: not-allowed; } .sl-btn.is-busy { color: transparent !important; } .sl-btn.is-busy > * { visibility: hidden; } .sl-btn.is-busy::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--sl-on-primary); border-right-color: transparent; animation: sl-spin 0.7s linear infinite; } .sl-btn-ghost.is-busy::after, .sl-btn-provider.is-busy::after { border-color: var(--sl-ink-2); border-right-color: transparent; } .sl-btn-gold.is-busy::after { border-color: var(--sl-on-accent); border-right-color: transparent; } @keyframes sl-spin { to { transform: rotate(360deg); } } @media (min-width: 860px) { .sl-btn { min-height: 36px; padding: 5px 18px; font-size: 15px; } .sl-btn-sm { min-height: 32px; padding: 3px 14px; font-size: 14px; } } .sl-linkbtn { background: none; border: 0; padding: 0; min-height: 40px; color: var(--sl-link); font-weight: 600; cursor: pointer; } .sl-linkbtn:hover { text-decoration: underline; } .sl-linkbtn:disabled { color: var(--sl-ink-3); text-decoration: none; cursor: default; } .sl-linkbtn-red { color: var(--sl-danger); } .sl-iconbtn { width: 40px; height: 40px; display: inline-grid; place-items: center; border: 0; background: none; border-radius: 50%; cursor: pointer; color: var(--sl-ink-2); font-size: 20px; } .sl-iconbtn:hover { background: var(--sl-sunk); color: var(--sl-ink); } .sl-btn-provider { width: 100%; background: var(--sl-surface); border-color: var(--sl-ink-3); color: var(--sl-ink); gap: 10px; font-weight: 600; } .sl-btn-provider:hover { background: var(--sl-sunk); box-shadow: inset 0 0 0 1px var(--sl-ink-3); } .sl-btn-provider svg, .sl-btn-provider i { flex: none; width: 20px; font-size: 20px; } .sl-btn-provider .ri-linkedin-box-fill { color: #0a66c2; } /* ---- Fields ----------------------------------------------------------------------- */ .sl-field { display: block; margin-bottom: 16px; } .sl-field.is-idle { opacity: 0.55; } .sl-label { display: block; font-weight: 400; font-size: 14px; color: var(--sl-ink-2); margin-bottom: 4px; } .sl-label .sl-opt { color: var(--sl-ink-3); } /* 16px on phones or iOS zooms the page on focus; the desktop size comes in below. */ .sl-input, .sl-select, .sl-textarea { width: 100%; min-height: 44px; padding: 8px 12px; font-size: 16px; background: var(--sl-surface); border: 1px solid var(--sl-ink-3); border-radius: var(--sl-r-field); color: var(--sl-ink); appearance: none; -webkit-appearance: none; } .sl-textarea { min-height: 120px; resize: vertical; line-height: 1.5; } .sl-select { padding-right: 36px; background-image: var(--sl-arrow); background-repeat: no-repeat; background-position: right 8px center; background-size: 20px; text-overflow: ellipsis; } .sl-input:hover, .sl-select:hover, .sl-textarea:hover { border-color: var(--sl-ink); box-shadow: inset 0 0 0 1px var(--sl-ink); } .sl-input:focus, .sl-select:focus, .sl-textarea:focus { outline: none; border-color: var(--sl-primary); box-shadow: inset 0 0 0 1px var(--sl-primary); } .sl-select:disabled, .sl-input:disabled { background-color: var(--sl-sunk); color: var(--sl-ink-3); border-color: var(--sl-line); box-shadow: none; cursor: not-allowed; } .sl-input::placeholder, .sl-textarea::placeholder { color: var(--sl-ink-3); opacity: 1; } .sl-hint { font-size: 12.5px; color: var(--sl-ink-2); margin: 4px 0 0; } .sl-error { font-size: 13.5px; color: var(--sl-danger); margin: 6px 0 0; font-weight: 600; } .sl-counter { font-size: 12px; color: var(--sl-ink-3); text-align: right; margin-top: 4px; font-variant-numeric: tabular-nums; } .sl-counter.is-short { color: var(--sl-accent-ink); } .sl-counter.is-over { color: var(--sl-danger); font-weight: 600; } .sl-row2 { display: grid; gap: 0 16px; } @media (min-width: 620px) { .sl-row2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 860px) { .sl-input, .sl-select, .sl-textarea { font-size: 14px; min-height: 36px; padding: 6px 12px; } .sl-select { padding-right: 34px; } } .sl-filterbox { position: relative; margin-bottom: 6px; } .sl-filterbox i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--sl-ink-3); pointer-events: none; } .sl-filterbox .sl-input { padding-left: 34px; background: var(--sl-sunk); border-color: transparent; } .sl-check { display: flex; gap: 10px; align-items: flex-start; min-height: 40px; cursor: pointer; } .sl-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--sl-primary); } .sl-check span { font-size: 14px; } .sl-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; cursor: pointer; } .sl-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .sl-switch-track { flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--sl-ink-3); position: relative; transition: background-color 0.15s; } .sl-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; } .sl-switch input:checked + .sl-switch-track { background: var(--sl-ok); } .sl-switch input:checked + .sl-switch-track::after { transform: translateX(18px); } .sl-switch input:focus-visible + .sl-switch-track { outline: 2px solid var(--sl-focus); outline-offset: 2px; } /* ---- Chips ------------------------------------------------------------------------ */ .sl-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--sl-r-pill); background: transparent; color: var(--sl-ink-2); font-size: 12.5px; line-height: 1.5; border: 1px solid var(--sl-line); } .sl-chip-more { border-style: dashed; color: var(--sl-ink-3); } .sl-chip-toggle { min-height: 36px; padding: 4px 14px; font-size: 14px; font-weight: 600; background: transparent; color: var(--sl-ink-2); border: 1px solid var(--sl-ink-3); cursor: pointer; } .sl-chip-toggle:hover { background: var(--sl-sunk); color: var(--sl-ink); box-shadow: inset 0 0 0 1px var(--sl-ink-3); } .sl-chip-toggle.is-on { background: var(--sl-ok); border-color: var(--sl-ok); color: #fff; } :root[data-theme="dark"] .sl-chip-toggle.is-on { color: #06140d; } .sl-chip-toggle.is-on::before { content: "\2713"; font-weight: 700; } .sl-chip-x { min-height: 30px; padding: 2px 4px 2px 12px; background: var(--sl-ok); border-color: var(--sl-ok); color: #fff; font-weight: 600; font-size: 13.5px; } :root[data-theme="dark"] .sl-chip-x { color: #06140d; } .sl-chip-x button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; display: grid; place-items: center; font-size: 16px; } .sl-chip-x button:hover { background: rgba(0, 0, 0, 0.18); } .sl-tag { display: inline-block; padding: 1px 8px; border-radius: var(--sl-r-field); background: var(--sl-primary-tint); color: var(--sl-primary-tint-ink); font-size: 12.5px; font-weight: 600; line-height: 1.5; } .sl-you { display: inline-block; padding: 0 7px; border-radius: var(--sl-r-field); border: 1px solid var(--sl-ink-3); color: var(--sl-ink-2); font-size: 11.5px; font-weight: 600; vertical-align: middle; line-height: 1.5; } /* ---- Panels and notes ------------------------------------------------------------- */ .sl-card { background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); padding: 16px; } @media (min-width: 620px) { .sl-card { padding: 24px; } } .sl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .sl-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--sl-r-field); background: var(--sl-primary-tint); color: var(--sl-primary-tint-ink); font-size: 13.5px; } .sl-note i { font-size: 18px; line-height: 1.2; flex: none; } .sl-note-gold { background: var(--sl-accent-tint); color: var(--sl-accent-tint-ink); } .sl-note-red { background: var(--sl-danger-tint); color: var(--sl-danger-tint-ink); } .sl-note-plain { background: var(--sl-sunk); color: var(--sl-ink); } .sl-rule { border: 0; border-top: 1px solid var(--sl-line-soft); margin: 20px 0; } .sl-or { display: flex; align-items: center; gap: 12px; color: var(--sl-ink-2); font-size: 13.5px; margin: 16px 0; } .sl-or::before, .sl-or::after { content: ""; flex: 1; height: 1px; background: var(--sl-line); } /* ---- The banner -------------------------------------------------------------------- */ /* The logo's wings, abstracted: two fans of feather lines rising from the bottom centre over the theme's deepest colour. Used behind a member's top card and on the landing. */ .sl-banner { position: relative; overflow: hidden; background-color: var(--sl-banner); } /* Feathers are drawn all the way round, then masked down to two fans — one per wing — leaving the centre clear the way the flame stands between the wings in the mark. */ .sl-banner::before { content: ""; position: absolute; inset: 0; background-image: repeating-conic-gradient(from 270deg at 50% 125%, transparent 0deg 4.6deg, var(--sl-banner-feather) 4.6deg 5.6deg); -webkit-mask-image: conic-gradient(from 270deg at 50% 125%, #000 0deg 58deg, transparent 70deg 110deg, #000 122deg 180deg, transparent 180deg); mask-image: conic-gradient(from 270deg at 50% 125%, #000 0deg 58deg, transparent 70deg 110deg, #000 122deg 180deg, transparent 180deg); } .sl-banner > * { position: relative; z-index: 1; } /* ---- Photos ----------------------------------------------------------------------- */ .sl-photo { width: 56px; height: 56px; border-radius: var(--sl-r-photo); object-fit: cover; background: var(--sl-sunk); flex: none; } .sl-photo-none { display: grid; place-items: center; font-weight: 600; color: var(--sl-primary-tint-ink); background: var(--sl-primary-tint); font-size: 18px; } .sl-photo-sm { width: 48px; height: 48px; font-size: 16px; } .sl-photo-xs { width: 40px; height: 40px; font-size: 14px; } .sl-photo-lg { width: 104px; height: 104px; font-size: 34px; } @media (min-width: 860px) { .sl-photo { width: 72px; height: 72px; font-size: 22px; } .sl-photo-sm { width: 48px; height: 48px; font-size: 16px; } .sl-photo-xs { width: 40px; height: 40px; font-size: 14px; } .sl-photo-lg { width: 152px; height: 152px; font-size: 48px; } } /* ---- Member rows (directory) ------------------------------------------------------ */ /* Results are rows in one card, the way a professional network lists people — not a wall of separate tiles. */ .sl-grid { display: block; background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); overflow: hidden; } .sl-grid:empty { display: none; } .sl-mcard { display: block; text-decoration: none; color: var(--sl-ink); min-width: 0; font-weight: 400; border-bottom: 1px solid var(--sl-line-soft); } .sl-mcard:last-child { border-bottom: 0; } a.sl-mcard:hover { background: var(--sl-sunk); color: var(--sl-ink); text-decoration: none; } a.sl-mcard:hover .sl-mcard-name { text-decoration: underline; } .sl-mcard-main { display: flex; gap: 12px; padding: 14px 16px; min-width: 0; align-items: flex-start; } .sl-mcard-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; align-items: flex-start; } .sl-mcard-name { font-weight: 600; font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; color: var(--sl-ink); } .sl-mcard-role { color: var(--sl-ink); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; } .sl-mcard-text > .sl-tag { margin: 3px 0 1px; } .sl-mcard-place { display: flex; flex-wrap: wrap; gap: 0 12px; font-size: 13.5px; color: var(--sl-ink-2); } .sl-mcard-place span { display: inline-flex; align-items: center; gap: 4px; } .sl-mcard-place .sl-near { color: var(--sl-ok); font-weight: 600; } .sl-mcard .sl-chips { margin-top: 6px; gap: 4px 6px; align-items: center; } .sl-chips-label { font-size: 12px; color: var(--sl-ink-3); min-width: 46px; } .sl-age { font-weight: 400; color: var(--sl-ink-2); } .sl-mcard-offer { display: flex; gap: 8px; align-items: flex-start; margin: -4px 16px 14px 84px; padding: 8px 12px; background: var(--sl-accent-tint); color: var(--sl-accent-tint-ink); font-size: 13.5px; line-height: 1.4; border: 1px solid var(--sl-accent-line); border-radius: var(--sl-r-field); } .sl-mcard-offer i { color: var(--sl-accent-ink); font-size: 16px; line-height: 1.3; flex: none; } .sl-mcard-offer span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } @media (min-width: 860px) { .sl-mcard-main { padding: 16px 24px; gap: 16px; } .sl-mcard-offer { margin-left: 112px; margin-right: 24px; } a.sl-mcard .sl-mcard-main::after { content: "View profile"; flex: none; align-self: center; padding: 4px 16px; border: 1px solid var(--sl-primary); border-radius: var(--sl-r-btn); color: var(--sl-primary); font-weight: 600; font-size: 14px; white-space: nowrap; } a.sl-mcard:hover .sl-mcard-main::after { background: var(--sl-primary-tint); box-shadow: inset 0 0 0 1px var(--sl-primary); } } /* ---- A–Z bar ------------------------------------------------------------------------ */ /* One row of letters; on a phone it scrolls sideways rather than wrapping into a block. */ .sl-az { display: flex; gap: 2px; margin-top: 10px; padding: 4px; overflow-x: auto; scrollbar-width: none; background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); } .sl-az::-webkit-scrollbar { display: none; } .sl-az-btn { flex: 1 0 auto; min-width: 32px; min-height: 36px; padding: 0 6px; border: 0; border-radius: var(--sl-r-field); background: none; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--sl-ink-2); } .sl-az-btn:first-child { padding: 0 12px; } .sl-az-btn:hover:not(:disabled) { background: var(--sl-sunk); color: var(--sl-ink); } /* :hover is listed too, or the hover rule above would outrank the selected state. */ .sl-az-btn.is-on, .sl-az-btn.is-on:hover { background: var(--sl-primary); color: var(--sl-on-primary); } .sl-az-btn:disabled { color: var(--sl-line); cursor: default; } /* The letter a run of names files under — only drawn when the list is alphabetical. */ .sl-az-head { grid-column: 1 / -1; padding: 6px 16px; font-weight: 700; font-size: 13px; color: var(--sl-accent-ink); background: var(--sl-sunk); border-bottom: 1px solid var(--sl-line-soft); } @media (min-width: 860px) { .sl-az-head { padding-left: 24px; } } /* ---- View switch ------------------------------------------------------------------- */ .sl-views { display: inline-flex; border: 1px solid var(--sl-ink-3); border-radius: var(--sl-r-field); overflow: hidden; background: var(--sl-surface); } .sl-viewbtn { width: 40px; min-height: 40px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; color: var(--sl-ink-2); font-size: 18px; } .sl-viewbtn + .sl-viewbtn { border-left: 1px solid var(--sl-line); } .sl-viewbtn:hover { background: var(--sl-sunk); color: var(--sl-ink); } .sl-viewbtn[aria-pressed="true"], .sl-viewbtn[aria-pressed="true"]:hover { background: var(--sl-primary); color: var(--sl-on-primary); } @media (min-width: 860px) { .sl-viewbtn { width: 36px; min-height: 34px; } } /* ---- Tiles -------------------------------------------------------------------------- */ /* Many faces at a glance. Here each member IS a card again, so the list drops its own frame. */ .sl-grid.is-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; background: none; border: 0; border-radius: 0; overflow: visible; } .sl-grid.is-tiles .sl-az-head { border: 1px solid var(--sl-line); border-radius: var(--sl-r-field); } .sl-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 16px 10px 14px; background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); color: var(--sl-ink); font-weight: 400; min-width: 0; } .sl-tile:hover { text-decoration: none; border-color: var(--sl-ink-3); box-shadow: inset 0 0 0 1px var(--sl-ink-3); } .sl-tile:hover .sl-tile-name { text-decoration: underline; } .sl-tile .sl-photo { width: 72px; height: 72px; font-size: 22px; margin-bottom: 8px; } .sl-tile-name { font-weight: 600; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; } .sl-tile-role { font-size: 13px; line-height: 1.35; color: var(--sl-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .sl-tile .sl-tag { margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-tile-place { font-size: 12.5px; color: var(--sl-ink-2); margin-top: 2px; } .sl-tile-open { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 6px; } .sl-tile-open .sl-chip { font-size: 12px; padding: 1px 8px; } /* The offer in words, pinned to the foot of the tile so tiles with and without one line up. */ .sl-tile-offertext { display: flex; gap: 6px; align-items: flex-start; text-align: left; margin: auto -10px -14px; padding: 8px 10px; align-self: stretch; background: var(--sl-accent-tint); color: var(--sl-accent-tint-ink); border-top: 1px solid var(--sl-accent-line); font-size: 12.5px; line-height: 1.35; border-radius: 0 0 var(--sl-r-panel) var(--sl-r-panel); } .sl-tile-offertext i { color: var(--sl-accent-ink); flex: none; font-size: 14px; line-height: 1.3; } .sl-tile-offertext > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* Pinned to the foot (margin-top:auto above); the row before it keeps the breathing room. */ .sl-tile:has(.sl-tile-offertext) > .sl-tile-open, .sl-tile:has(.sl-tile-offertext) > .sl-tile-place:nth-last-child(2) { margin-bottom: 10px; } @media (min-width: 620px) { .sl-grid.is-tiles { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); } } /* ---- Compact list ------------------------------------------------------------------ */ /* One line each, the way a printed directory reads: name, what they do, where. Columns drop from the right as the screen narrows; the name and the role are what is left on a phone. */ .sl-line { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 6px 16px; min-height: 52px; border-bottom: 1px solid var(--sl-line-soft); color: var(--sl-ink); font-weight: 400; font-size: 14px; } .sl-line:last-child { border-bottom: 0; } .sl-line:hover { background: var(--sl-sunk); text-decoration: none; } .sl-line:hover .sl-line-name { text-decoration: underline; } .sl-line .sl-photo { grid-row: span 2; } .sl-line-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-line-role { grid-column: 2; color: var(--sl-ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-line-prof, .sl-line-place, .sl-line-exp { display: none; color: var(--sl-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-line-exp { color: var(--sl-ink); font-weight: 600; text-align: right; } .sl-line-offertext { grid-column: 2 / -1; display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--sl-accent-tint-ink); min-width: 0; padding-bottom: 4px; } .sl-line-offertext i { color: var(--sl-accent-ink); flex: none; } .sl-line-offertext > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-line.has-offer .sl-photo { align-self: start; margin-top: 4px; } @media (min-width: 700px) { .sl-line { grid-template-columns: 40px minmax(150px, 1.1fr) minmax(0, 1.5fr) minmax(0, 0.9fr) 72px; padding: 4px 24px; min-height: 48px; } .sl-line .sl-photo { grid-row: auto; } .sl-line.has-offer .sl-photo { grid-row: span 2; } .sl-line-role { grid-column: auto; font-size: 14px; color: var(--sl-ink); } .sl-line-place, .sl-line-exp { display: block; } } @media (min-width: 1100px) { .sl-line { grid-template-columns: 40px minmax(170px, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, 0.8fr) 72px; } .sl-line-prof { display: block; } } /* ---- Pager --------------------------------------------------------------------------- */ .sl-pagerbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-top: 14px; } .sl-pagerbar p { margin: 0; font-size: 13.5px; } .sl-pager { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .sl-pagebtn { min-width: 36px; min-height: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; border: 1px solid transparent; border-radius: var(--sl-r-btn); background: none; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--sl-ink-2); } .sl-pagebtn:hover:not(:disabled) { background: var(--sl-sunk); color: var(--sl-ink); } .sl-pagebtn.is-on, .sl-pagebtn.is-on:hover { background: var(--sl-primary); color: var(--sl-on-primary); } .sl-pagebtn:disabled { color: var(--sl-line); cursor: default; } .sl-pagebtn i { font-size: 18px; } .sl-pagegap { min-width: 20px; text-align: center; color: var(--sl-ink-3); } @media (max-width: 619px) { .sl-pagebtn span { display: none; } .sl-pagerbar { justify-content: center; } } /* ---- Skeletons -------------------------------------------------------------------- */ .sl-skel { display: block; background: linear-gradient(90deg, var(--sl-sunk) 25%, var(--sl-line-soft) 50%, var(--sl-sunk) 75%); background-size: 200% 100%; border-radius: 4px; animation: sl-shimmer 1.4s linear infinite; } .sl-skel-photo { width: 72px; height: 72px; border-radius: var(--sl-r-photo); flex: none; } .sl-skel-dot { width: 48px; height: 48px; border-radius: var(--sl-r-photo); flex: none; } .sl-skel-line { height: 12px; margin: 6px 0; } .sl-skel-card .sl-mcard-text { display: block; } .sl-skel-row { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--sl-line-soft); } .sl-skel-row > div { flex: 1; } @keyframes sl-shimmer { to { background-position: -200% 0; } } /* ---- Directory layout ------------------------------------------------------------- */ .sl-search { position: relative; } .sl-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--sl-ink-2); pointer-events: none; } .sl-search .sl-input { min-height: 44px; padding-left: 38px; padding-right: 44px; background: var(--sl-surface); border-color: var(--sl-line); font-size: 16px; } .sl-search .sl-iconbtn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); } /* Type-ahead under the search box. It floats, so it is one of the few things with a shadow. */ .sl-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 4px 0; list-style: none; background: var(--sl-surface); border-radius: var(--sl-r-panel); box-shadow: var(--sl-float); max-height: 320px; overflow-y: auto; } .sl-suggest li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 14px; cursor: pointer; font-size: 15px; color: var(--sl-ink); } .sl-suggest li i { position: static; transform: none; font-size: 16px; color: var(--sl-ink-3); } .sl-suggest li:hover, .sl-suggest li.is-on { background: var(--sl-sunk); } .sl-dir-bar { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; } .sl-dir-count { color: var(--sl-ink-2); font-size: 13.5px; } .sl-dir { display: block; margin-top: 14px; } .sl-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; } .sl-filters h2 { font-size: 16px; } .sl-filters .sl-field { margin-bottom: 12px; } .sl-filters-group { padding: 14px 0; border-top: 1px solid var(--sl-line-soft); } .sl-filters-group:first-of-type { border-top: 0; padding-top: 4px; } .sl-filters-group > h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; } .sl-more { text-align: center; margin-top: 16px; } .sl-more p { color: var(--sl-ink-2); font-size: 13.5px; margin-bottom: 8px; } .sl-empty { text-align: center; padding: 40px 20px; background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); } .sl-empty i { font-size: 40px; color: var(--sl-ink-3); } .sl-empty h2 { margin: 8px 0 4px; } .sl-empty p { color: var(--sl-ink-2); max-width: 46ch; margin-left: auto; margin-right: auto; } .sl-empty .sl-btn { margin-top: 14px; } /* Filters: a slide-over drawer on phones, a left rail from 1000px. */ .sl-drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; } .sl-drawer-scrim { position: absolute; inset: 0; background: var(--sl-scrim); opacity: 0; transition: opacity 0.2s; } .sl-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 92vw); background: var(--sl-surface); box-shadow: var(--sl-float); transform: translateX(100%); transition: transform 0.22s ease-out; display: flex; flex-direction: column; } .sl-drawer.is-open { visibility: visible; } .sl-drawer.is-open .sl-drawer-scrim { opacity: 1; } .sl-drawer.is-open .sl-drawer-panel { transform: none; } .sl-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--sl-line-soft); } .sl-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 16px; -webkit-overflow-scrolling: touch; } .sl-drawer-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sl-line-soft); display: flex; gap: 8px; } .sl-drawer-foot .sl-btn { flex: 1; } @media (min-width: 1000px) { .sl-dir { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; } .sl-drawer { position: sticky; top: calc(var(--sl-top-h) + 24px); inset: auto; visibility: visible; z-index: 1; max-height: calc(100vh - var(--sl-top-h) - 48px); overflow-y: auto; border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); background: var(--sl-surface); } .sl-drawer-scrim, .sl-drawer-foot, .sl-drawer-head .sl-iconbtn { display: none; } .sl-drawer-panel { position: static; width: auto; transform: none; box-shadow: none; background: none; transition: none; } .sl-drawer-head { padding: 16px 16px 4px; border-bottom: 0; } .sl-filter-open { display: none; } } /* ---- Toasts ----------------------------------------------------------------------- */ .sl-toasts { position: fixed; z-index: 90; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; pointer-events: none; } body.sl-has-tabs .sl-toasts { bottom: calc(var(--sl-tabs-h) + 12px + env(safe-area-inset-bottom, 0px)); } .sl-toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; max-width: 480px; width: fit-content; padding: 12px 16px; border-radius: var(--sl-r-panel); background: var(--sl-toast-bg); color: var(--sl-toast-ink); box-shadow: var(--sl-float); font-size: 14px; line-height: 1.4; animation: sl-rise 0.2s ease-out; } .sl-toast i { font-size: 18px; line-height: 1.15; flex: none; } .sl-toast-success i { color: var(--sl-ok); } .sl-toast-error { background: var(--sl-danger); color: #fff; } .sl-toast-info i { color: var(--sl-accent); } .sl-toast.is-leaving { opacity: 0; transition: opacity 0.25s; } @keyframes sl-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (min-width: 860px) { .sl-toasts, body.sl-has-tabs .sl-toasts { bottom: 24px; left: 24px; } } /* ---- Modal ------------------------------------------------------------------------ */ .sl-modal-wrap { position: fixed; inset: 0; z-index: 80; background: var(--sl-scrim); display: flex; align-items: flex-end; justify-content: center; animation: sl-fade 0.15s ease-out; } .sl-modal { width: 100%; max-width: 520px; max-height: 92dvh; display: flex; flex-direction: column; background: var(--sl-surface); border-radius: var(--sl-r-panel) var(--sl-r-panel) 0 0; box-shadow: var(--sl-float); animation: sl-rise 0.2s ease-out; } .sl-modal-wide { max-width: 640px; } .sl-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 12px 24px; border-bottom: 1px solid var(--sl-line-soft); } .sl-modal-head h2 { font-size: 18px; font-weight: 400; } .sl-modal-body { padding: 16px 24px; overflow-y: auto; } .sl-modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sl-line-soft); } .sl-modal-foot .sl-btn { flex: 1 1 0; padding-left: 12px; padding-right: 12px; } @keyframes sl-fade { from { opacity: 0; } to { opacity: 1; } } @media (min-width: 620px) { .sl-modal-wrap { align-items: center; padding: 24px; } .sl-modal { border-radius: var(--sl-r-panel); } .sl-modal-foot .sl-btn { flex: 0 0 auto; padding-left: 18px; padding-right: 18px; } } .sl-reveal { list-style: none; padding: 0; margin: 12px 0; } .sl-reveal li { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--sl-line-soft); overflow-wrap: anywhere; } .sl-reveal i { color: var(--sl-ink-2); font-size: 18px; } /* ---- Cropper ---------------------------------------------------------------------- */ .sl-crop { display: flex; flex-direction: column; align-items: center; gap: 12px; } .sl-crop-stage { position: relative; border-radius: var(--sl-r-field); overflow: hidden; background: var(--sl-sunk); } .sl-crop-canvas { display: block; touch-action: none; cursor: grab; } .sl-crop-canvas:active { cursor: grabbing; } /* The ring shows the circle the photo is displayed in. */ .sl-crop-ring { position: absolute; inset: 0; border-radius: var(--sl-r-photo); box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.5); border: 2px solid #fff; pointer-events: none; } .sl-crop-zoom { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 340px; color: var(--sl-ink-2); font-size: 20px; } .sl-crop-zoom input { flex: 1; height: 40px; accent-color: var(--sl-primary); } .sl-crop .sl-hint { text-align: center; margin: 0; } .sl-recaptcha-host { position: fixed; bottom: 0; left: 0; } /* ---- Profile editor --------------------------------------------------------------- */ .sl-steps { list-style: none; display: flex; gap: 0; padding: 0; margin: 0 0 16px; overflow-x: auto; scrollbar-width: none; background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); } .sl-steps::-webkit-scrollbar { display: none; } .sl-step { flex: 1 0 auto; } .sl-step button { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 6px 14px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--sl-ink-2); white-space: nowrap; } .sl-step button:disabled { cursor: default; opacity: 0.55; } .sl-step-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--sl-ink-3); font-size: 12px; flex: none; } .sl-step.is-done .sl-step-n { background: var(--sl-ok); border-color: var(--sl-ok); color: #fff; } /* "Something is missing here" — a small dot on the tab of a section that can be visited but is not finished. */ .sl-step-todo[hidden] { display: none; } .sl-step-todo { width: 8px; height: 8px; border-radius: 50%; background: var(--sl-danger); flex: none; } .sl-step.is-todo .sl-step-n { background: none; border-color: var(--sl-danger); color: var(--sl-danger); } .sl-step.is-current button { color: var(--sl-ok); border-bottom-color: var(--sl-ok); } .sl-step.is-current .sl-step-n { border-color: var(--sl-ok); color: var(--sl-ok); } @media (max-width: 619px) { .sl-step:not(.is-current) .sl-step-label { display: none; } .sl-step:not(.is-current) { flex: 0 0 auto; } } .sl-stepnav { display: flex; gap: 8px; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sl-line-soft); } .sl-stepnav .sl-btn-primary { margin-left: auto; } .sl-uploader { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .sl-uploader .sl-photo-lg { width: 104px; height: 104px; } .sl-dropzone { width: 104px; height: 104px; border-radius: var(--sl-r-photo); border: 1px dashed var(--sl-ink-3); display: grid; place-items: center; color: var(--sl-ink-3); font-size: 30px; background: var(--sl-sunk); flex: none; } .sl-gtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; } .sl-gtile { position: relative; border-radius: var(--sl-r-field); overflow: hidden; background: var(--sl-sunk); border: 1px solid var(--sl-line); } .sl-gtile img { width: 100%; aspect-ratio: 1; object-fit: cover; } .sl-gtile-acts { display: flex; border-top: 1px solid var(--sl-line); background: var(--sl-surface); } .sl-gtile-acts button { flex: 1; min-height: 40px; border: 0; background: none; cursor: pointer; color: var(--sl-ink-2); font-size: 17px; } .sl-gtile-acts button + button { border-left: 1px solid var(--sl-line); } .sl-gtile-acts button:hover { background: var(--sl-sunk); color: var(--sl-ink); } .sl-gtile-add { aspect-ratio: auto; min-height: 164px; border: 1px dashed var(--sl-ink-3); background: var(--sl-sunk); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: var(--sl-ink-2); font-weight: 600; font-size: 13.5px; } .sl-gtile-add:hover { border-color: var(--sl-primary); color: var(--sl-primary); } .sl-gtile-add i { font-size: 26px; } .sl-gtile.is-busy::after { content: ""; position: absolute; inset: 0; background: var(--sl-surface); opacity: 0.6; } .sl-review { margin: 0; } .sl-review > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--sl-line-soft); } .sl-review dt { color: var(--sl-ink-2); font-size: 13.5px; } .sl-review dd { margin: 0; overflow-wrap: anywhere; } .sl-review .is-missing { color: var(--sl-danger); font-weight: 600; } @media (min-width: 620px) { .sl-review > div { grid-template-columns: 180px 1fr; gap: 16px; } } /* ---- Member page ------------------------------------------------------------------ */ .sl-back { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--sl-ink-2); } .sl-member { display: grid; gap: 8px; } .sl-member > .sl-stack > * + * { margin-top: 8px; } /* The top card: banner, photo overlapping its lower edge, then who they are. */ .sl-topcard { background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); overflow: hidden; } .sl-topcard .sl-banner { height: 96px; } .sl-topcard-body { padding: 0 16px 20px; } .sl-member-head { display: block; } .sl-member-head #photoSlot { margin-top: -60px; position: relative; z-index: 1; width: fit-content; } .sl-member-head .sl-photo-lg { border: 4px solid var(--sl-surface); box-sizing: content-box; } .sl-member-head h1 { font-size: 24px; overflow-wrap: anywhere; margin-top: 10px; } .sl-member-id { min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; } .sl-member-role { font-size: 16px; color: var(--sl-ink); overflow-wrap: anywhere; } .sl-facts { display: flex; flex-wrap: wrap; gap: 2px 16px; color: var(--sl-ink-2); font-size: 14px; margin-top: 10px; } .sl-facts span { display: inline-flex; gap: 5px; align-items: center; } .sl-facts i { color: var(--sl-ink-3); } .sl-offer { border-radius: var(--sl-r-panel); background: var(--sl-accent-tint); border: 1px solid var(--sl-accent-line); padding: 16px; color: var(--sl-accent-tint-ink); } .sl-offer h2 { font-size: 16px; display: flex; gap: 8px; align-items: center; margin-bottom: 4px; } .sl-offer h2 i { color: var(--sl-accent-ink); font-size: 20px; } .sl-member .sl-section { background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); padding: 16px; } .sl-section h2 { margin-bottom: 8px; font-size: 20px; } .sl-about { max-width: 78ch; } .sl-member .sl-section .sl-chip { font-size: 14px; padding: 4px 14px; color: var(--sl-ink); border-color: var(--sl-ink-3); } .sl-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px 10px; } .sl-gallery figure button { width: 100%; display: block; } .sl-gallery button { padding: 0; border: 0; border-radius: var(--sl-r-field); overflow: hidden; cursor: zoom-in; background: var(--sl-sunk); } .sl-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; } .sl-cta { background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); padding: 16px; } .sl-cta .sl-btn { width: 100%; } .sl-promise { display: flex; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--sl-ink-2); } .sl-promise i { color: var(--sl-ok); font-size: 18px; line-height: 1.2; flex: none; } @media (min-width: 860px) { .sl-topcard .sl-banner { height: 152px; } .sl-topcard-body { padding: 0 24px 24px; } .sl-member-head #photoSlot { margin-top: -92px; } .sl-member .sl-section, .sl-offer { padding: 24px; } } @media (min-width: 900px) { .sl-member { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; } .sl-member-side { position: sticky; top: calc(var(--sl-top-h) + 24px); } } .sl-lightbox { position: fixed; inset: 0; z-index: 85; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; } .sl-lightbox img { max-width: 94vw; max-height: 86dvh; border-radius: 4px; } .sl-lightbox .sl-iconbtn { position: absolute; color: #fff; background: rgba(255, 255, 255, 0.12); } .sl-lightbox .sl-iconbtn:hover { background: rgba(255, 255, 255, 0.25); color: #fff; } .sl-lb-x { top: 14px; right: 14px; } .sl-lb-prev { left: 10px; top: 50%; transform: translateY(-50%); } .sl-lb-next { right: 10px; top: 50%; transform: translateY(-50%); } .sl-lb-n { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #fff; font-size: 13px; } /* ---- Enquiries -------------------------------------------------------------------- */ /* Underlined tabs, not a pill switch. */ .sl-seg { display: flex; gap: 0; padding: 0; border-bottom: 1px solid var(--sl-line); } .sl-seg button { flex: 1; min-height: 44px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--sl-ink-2); } .sl-seg button:hover { color: var(--sl-ink); background: var(--sl-sunk); } .sl-seg button[aria-selected="true"] { color: var(--sl-ok); border-bottom-color: var(--sl-ok); } .sl-inbox { display: grid; gap: 0; } .sl-inbox-list, .sl-inbox-thread { background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); overflow: hidden; min-width: 0; } .sl-inbox-list-head { padding: 0; } .sl-trow { display: flex; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--sl-line-soft); border-left: 4px solid transparent; background: none; text-align: left; cursor: pointer; min-height: 72px; } .sl-trow:hover { background: var(--sl-sunk); } .sl-trow.is-open { background: var(--sl-primary-tint); border-left-color: var(--sl-ok); } .sl-trow-text { min-width: 0; flex: 1; } .sl-trow-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .sl-trow-name { font-weight: 400; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-trow-when { flex: none; font-size: 12px; color: var(--sl-ink-2); } .sl-trow-reason, .sl-trow-prev { display: block; } .sl-trow-reason { font-size: 12.5px; color: var(--sl-ink-2); font-weight: 600; } .sl-trow-prev { font-size: 14px; color: var(--sl-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-trow.is-unread .sl-trow-name { font-weight: 600; } .sl-trow.is-unread .sl-trow-name::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sl-primary); margin-right: 6px; } .sl-trow.is-unread .sl-trow-prev { color: var(--sl-ink); font-weight: 600; } .sl-list-empty { padding: 32px 20px; text-align: center; color: var(--sl-ink-2); } .sl-list-empty i { font-size: 34px; color: var(--sl-ink-3); display: block; margin-bottom: 6px; } .sl-thread-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--sl-line-soft); } .sl-thread-who { min-width: 0; flex: 1; text-decoration: none; color: inherit; display: flex; gap: 10px; align-items: center; font-weight: 400; } .sl-thread-who:hover { text-decoration: none; } .sl-thread-who strong { display: block; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-thread-who span { display: block; font-size: 13px; color: var(--sl-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-thread-who > div { min-width: 0; } .sl-thread-sub { padding: 8px 16px; font-size: 13px; color: var(--sl-ink-2); border-bottom: 1px solid var(--sl-line-soft); background: var(--sl-sunk); } .sl-msgs { padding: 16px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 240px; max-height: 58dvh; } .sl-day { align-self: center; font-size: 12px; color: var(--sl-ink-2); margin: 8px 0 2px; font-weight: 600; } .sl-msg { max-width: min(84%, 560px); padding: 8px 12px; border-radius: 0 8px 8px 8px; background: var(--sl-sunk); align-self: flex-start; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; font-size: 14.5px; } .sl-msg-mine { align-self: flex-end; background: var(--sl-primary); color: var(--sl-on-primary); border-radius: 8px 0 8px 8px; } .sl-msg time { display: block; font-size: 11px; opacity: 0.75; margin-top: 2px; text-align: right; white-space: nowrap; } .sl-msg-note { align-self: center; text-align: center; font-size: 13px; color: var(--sl-accent-tint-ink); background: var(--sl-accent-tint); border: 1px solid var(--sl-accent-line); padding: 4px 12px; border-radius: var(--sl-r-pill); display: inline-flex; gap: 6px; align-items: center; } .sl-contact { margin: 0 16px 12px; padding: 12px 16px; border-radius: var(--sl-r-field); border: 1px solid var(--sl-accent-line); background: var(--sl-accent-tint); color: var(--sl-accent-tint-ink); } .sl-contact h3 { font-size: 14.5px; } .sl-contact p { font-size: 14px; margin: 4px 0 10px; overflow-wrap: anywhere; } .sl-contact .sl-btn { background: var(--sl-surface); } .sl-thread-foot { border-top: 1px solid var(--sl-line-soft); padding: 12px 16px; } .sl-reply { display: flex; gap: 8px; align-items: flex-end; } .sl-reply .sl-textarea { min-height: 44px; max-height: 180px; resize: none; background: var(--sl-sunk); border-color: transparent; } .sl-reply .sl-btn { flex: none; width: 44px; min-height: 44px; padding: 0; border-radius: 50%; } :root[data-theme="studio"] .sl-reply .sl-btn { border-radius: 2px; } .sl-thread-acts { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 6px; align-items: center; font-size: 14px; } .sl-thread-blank { display: none; } /* One pane at a time on a phone; the list hides while a thread is open. */ .sl-inbox.has-thread .sl-inbox-list { display: none; } .sl-inbox:not(.has-thread) .sl-inbox-thread { display: none; } @media (min-width: 900px) { .sl-inbox { grid-template-columns: 340px minmax(0, 1fr); gap: 0; align-items: stretch; } .sl-inbox-list { border-radius: var(--sl-r-panel) 0 0 var(--sl-r-panel); border-right: 0; } .sl-inbox-thread { border-radius: 0 var(--sl-r-panel) var(--sl-r-panel) 0; } .sl-inbox.has-thread .sl-inbox-list { display: block; } .sl-inbox:not(.has-thread) .sl-inbox-thread { display: block; } .sl-inbox:not(.has-thread) .sl-thread-blank { display: block; } .sl-thread-back { display: none; } .sl-inbox-list { max-height: calc(100dvh - var(--sl-top-h) - 130px); overflow-y: auto; } } /* ---- Landing ---------------------------------------------------------------------- */ .sl-land { position: relative; background: var(--sl-surface); } .sl-land-rings { display: none; } .sl-land-bar { border-bottom: 1px solid var(--sl-line-soft); } .sl-land-in { position: relative; z-index: 1; max-width: 1128px; margin: 0 auto; padding: 12px 16px 40px; display: grid; gap: 24px; grid-template-areas: "brand" "intro" "auth" "how"; } .sl-land-brand { grid-area: brand; display: flex; align-items: center; min-height: 52px; } .sl-land-brand .sl-mark { width: 64px; height: 38px; } .sl-land-brand .sl-word { font-size: 23px; } .sl-land-brand .sl-word b { color: var(--sl-word-a); } .sl-land-brand .sl-word i { color: var(--sl-word-b); } :root[data-theme="studio"] .sl-land-brand .sl-word b { color: #0b2e5b; } :root[data-theme="studio"] .sl-land-brand .sl-word i { color: #be9650; } .sl-land-intro { grid-area: intro; } .sl-land-auth { grid-area: auth; } .sl-land-how { grid-area: how; } /* A light, large headline in the theme's hero colour — the confident quiet of a professional network's front door, rather than a shout. */ .sl-land h1 { font-size: clamp(30px, 6.4vw, 52px); font-weight: 300; line-height: 1.16; letter-spacing: -0.01em; color: var(--sl-hero-ink); max-width: 17ch; } .sl-land-lede { font-size: 17px; color: var(--sl-ink-2); max-width: 52ch; margin-top: 16px; } .sl-ask { margin-top: 24px; display: flex; align-items: center; gap: 10px; max-width: 480px; min-height: 52px; padding: 0 16px; border-radius: var(--sl-r-field); background: var(--sl-sunk); border: 1px solid var(--sl-line); font-size: 16px; color: var(--sl-ink); } .sl-ask i { color: var(--sl-ink-2); font-size: 20px; } .sl-ask-text { white-space: nowrap; overflow: hidden; } .sl-ask-caret { display: inline-block; width: 1.5px; height: 1.2em; background: var(--sl-ink); vertical-align: text-bottom; margin-left: 1px; animation: sl-blink 1s steps(1) infinite; } @keyframes sl-blink { 50% { opacity: 0; } } .sl-how h2 { font-size: 20px; margin-bottom: 8px; } .sl-how ol { list-style: none; counter-reset: how; padding: 0; margin: 0; display: grid; gap: 0; } .sl-how li { counter-increment: how; display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--sl-line-soft); } .sl-how li::before { content: counter(how); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--sl-accent-ink); display: grid; place-items: center; font-weight: 600; font-size: 14px; color: var(--sl-accent-ink); margin-top: 1px; } :root[data-theme="studio"] .sl-how li::before { border-radius: 2px; } .sl-how strong { display: block; font-size: 16px; font-weight: 600; } .sl-how span { color: var(--sl-ink-2); font-size: 14.5px; } .sl-not { margin-top: 16px; color: var(--sl-ink-2); font-size: 14.5px; max-width: 60ch; } .sl-authcard { background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); padding: 20px; box-shadow: var(--sl-float); } .sl-authcard h2 { margin: 16px 0 2px; font-size: 24px; font-weight: 600; } .sl-authcard .sl-seg { margin-bottom: 4px; } .sl-authcard form { margin-top: 4px; } .sl-authcard .sl-input { min-height: 48px; } .sl-authcard .sl-btn { min-height: 48px; font-size: 16px; } /* The feather banner closes the page, the full lockup sitting in it. */ .sl-land-foot { margin-top: 8px; } .sl-land-foot .sl-banner { height: 132px; display: grid; place-items: center; } .sl-mark-onbanner { position: relative; z-index: 1; width: 120px; height: 72px; background-image: url("/assets/img/logo-mark-white.png"); opacity: 0.95; } @media (min-width: 940px) { .sl-land-in { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "brand brand" "intro auth" "how auth"; gap: 24px 72px; padding: 12px 24px 56px; align-items: start; } .sl-land-auth { position: sticky; top: 20px; } .sl-land-intro { padding-top: 36px; } .sl-authcard { padding: 24px; } } /* ---- Status pages (verify, pending, rejected, deactivated, callback, 404) ---------- */ .sl-status { max-width: 520px; margin: 0 auto; padding: 24px 12px 48px; } .sl-status-ico { width: 48px; height: 48px; border-radius: var(--sl-r-photo); display: grid; place-items: center; font-size: 24px; background: var(--sl-primary-tint); color: var(--sl-primary-tint-ink); margin-bottom: 12px; } .sl-status-ico.is-gold { background: var(--sl-accent-tint); color: var(--sl-accent-ink); } .sl-status-ico.is-red { background: var(--sl-danger-tint); color: var(--sl-danger); } .sl-status h1 { font-size: 26px; margin-bottom: 8px; } .sl-status > p { font-size: 15px; color: var(--sl-ink-2); } .sl-status .sl-card { margin-top: 16px; } .sl-status-foot { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; color: var(--sl-ink-2); font-size: 13.5px; } .sl-kv { margin: 0; } .sl-kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--sl-line-soft); align-items: center; min-height: 44px; } .sl-kv > div:last-child { border-bottom: 0; } .sl-kv dt { color: var(--sl-ink-2); font-size: 13.5px; flex: none; } .sl-kv dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; min-width: 0; } .sl-phone-row { display: grid; grid-template-columns: 1fr; gap: 0 12px; } @media (min-width: 520px) { .sl-phone-row { grid-template-columns: 210px 1fr; } } .sl-otp { letter-spacing: 0.5em; text-align: center; font-size: 22px !important; font-weight: 600; font-variant-numeric: tabular-nums; padding-left: 0.5em; min-height: 52px !important; } .sl-progress { display: flex; gap: 4px; margin-bottom: 20px; } .sl-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--sl-line); } .sl-progress span.is-on { background: var(--sl-ok); } .sl-loading { display: grid; place-items: center; padding: 80px 16px; color: var(--sl-ink-2); gap: 12px; text-align: center; } .sl-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--sl-line); border-top-color: var(--sl-primary); animation: sl-spin 0.8s linear infinite; } /* "Open to" and experience are the point of a professional's page, so they are drawn in the theme's primary tint rather than as quiet outline chips. */ .sl-chips-strong .sl-chip, .sl-mcard .sl-chip-open, .sl-tile .sl-chip-open { background: var(--sl-primary-tint); color: var(--sl-primary-tint-ink); border-color: transparent; font-weight: 600; } .sl-member .sl-section .sl-chips-strong .sl-chip { color: var(--sl-primary-tint-ink); border-color: transparent; } .sl-fact-strong { color: var(--sl-ink); font-weight: 600; } .sl-fact-strong i { color: var(--sl-accent-ink) !important; } /* Day / month / year as three dropdowns (date of birth), and month / year (started). */ .sl-dob { display: grid; grid-template-columns: 0.8fr 1.4fr 1fr; gap: 8px; } .sl-since { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; max-width: 360px; } /* The lead-in to the professional details: a statement, not a hint. */ .sl-lead { border-left: 3px solid var(--sl-accent); padding: 2px 0 2px 14px; margin: 0 0 20px; color: var(--sl-ink); font-size: 15.5px; } .sl-lead strong { font-weight: 600; } .sl-subhead { font-size: 16px; font-weight: 600; margin: 24px 0 4px; } .sl-subhead + .sl-hint { margin: 0 0 12px; } /* ---- The choice after approval ------------------------------------------------------ */ .sl-choices { display: grid; gap: 12px; } .sl-choice { display: flex; gap: 16px; align-items: flex-start; width: 100%; text-align: left; padding: 20px; background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); cursor: pointer; } .sl-choice:hover { border-color: var(--sl-ink-3); box-shadow: inset 0 0 0 1px var(--sl-ink-3); } .sl-choice.is-on { border-color: var(--sl-primary); box-shadow: inset 0 0 0 1px var(--sl-primary); background: var(--sl-primary-tint); } .sl-choice-ico { flex: none; width: 48px; height: 48px; border-radius: var(--sl-r-photo); display: grid; place-items: center; font-size: 24px; background: var(--sl-sunk); color: var(--sl-ink-2); } .sl-choice.is-on .sl-choice-ico { background: var(--sl-primary); color: var(--sl-on-primary); } .sl-choice-text { flex: 1; min-width: 0; } .sl-choice-text strong { display: block; font-size: 17px; font-weight: 600; color: var(--sl-ink); margin-bottom: 2px; } .sl-choice-text span { color: var(--sl-ink-2); font-size: 14.5px; } .sl-choice-tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--sl-ink-3); display: grid; place-items: center; color: transparent; font-size: 16px; } .sl-choice.is-on .sl-choice-tick { background: var(--sl-primary); border-color: var(--sl-primary); color: var(--sl-on-primary); } /* ---- Long-form pages -------------------------------------------------------------- */ .sl-prose { max-width: 72ch; font-size: 15.5px; background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); padding: 24px 16px; } @media (min-width: 620px) { .sl-prose { padding: 32px; } } .sl-prose h1 { margin-bottom: 12px; font-size: 28px; } .sl-prose h2 { margin: 28px 0 8px; } .sl-prose ul { padding-left: 1.2em; margin: 0 0 1em; } .sl-prose li { margin-bottom: 4px; } .sl-draft { display: flex; gap: 10px; padding: 10px 14px; border-radius: var(--sl-r-field); background: var(--sl-accent-tint); border: 1px solid var(--sl-accent-line); color: var(--sl-accent-tint-ink); font-weight: 600; margin-bottom: 20px; font-size: 14px; } /* ---- Footer ----------------------------------------------------------------------- */ .sl-foot { margin-top: auto; } .sl-foot-in { max-width: 1128px; margin: 0 auto; padding: 16px 12px 20px; display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: center; align-items: center; color: var(--sl-ink-2); font-size: 12px; } .sl-foot-in > span { display: inline-flex; align-items: center; gap: 6px; } .sl-foot .sl-word { font-size: 13px; } .sl-foot .sl-word b { color: var(--sl-ink); } .sl-foot nav { display: flex; gap: 16px; } .sl-foot a { color: var(--sl-ink-2); font-weight: 400; min-height: 40px; display: inline-flex; align-items: center; } .sl-foot a:hover { color: var(--sl-link); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .sl-ask-caret { display: none; } } /* The directory search box has its own clear button; hide WebKit's built-in one so there are not two of them side by side. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; } /* ---- The app: install banner, notification states (js/pwa.js) ------------------------ */ /* Sits between the header and the page. Deliberately not dismissable-by-accident and not a pop-up: it is information with steps in it, and people need to be able to read a step, look at their browser, and look back. */ .sl-appbar { background: var(--sl-accent-tint); color: var(--sl-accent-tint-ink); border-bottom: 1px solid var(--sl-line-soft); } .sl-appbar-in { width: 100%; max-width: 1128px; margin: 0 auto; padding: 14px 12px; display: flex; gap: 14px; align-items: flex-start; } .sl-appbar-icon { width: 44px; height: 44px; border-radius: 10px; flex: none; background: #fff; border: 1px solid var(--sl-line-soft); } .sl-appbar-bell { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 22px; background: var(--sl-surface); color: var(--sl-ink); border: 1px solid var(--sl-line-soft); } .sl-appbar-text { min-width: 0; flex: 1; } .sl-appbar h2 { font-size: 16px; line-height: 1.3; font-weight: 600; margin: 0 0 2px; color: inherit; } .sl-appbar p { margin: 0; font-size: 14px; line-height: 1.45; max-width: 68ch; } .sl-appbar-note { margin-top: 8px !important; font-size: 13px !important; opacity: 0.9; } .sl-appbar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; } .sl-appbar .sl-linkbtn { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 400; } /* Install steps — a real sequence, so they are numbered. */ .sl-steps-list { list-style: none; counter-reset: slstep; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; max-width: 68ch; } .sl-steps-list li { counter-increment: slstep; position: relative; padding-left: 32px; font-size: 14px; line-height: 1.45; } .sl-steps-list li::before { content: counter(slstep); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--sl-surface); color: var(--sl-ink); border: 1px solid var(--sl-line); } /* The button's own glyph, shown the way it looks on the device. */ .sl-glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 1px; vertical-align: -5px; border-radius: 5px; font-size: 15px; background: var(--sl-surface); color: var(--sl-link); border: 1px solid var(--sl-line); } #appPanel .sl-steps-list, #appPanel .sl-appbar-note { color: var(--sl-ink-2); } #appPanel .sl-appbar-note { font-size: 13px; margin: 8px 0 0; } .sl-card-title { font-size: 1.1rem; margin: 0 0 8px; } .sl-appstate { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 600; } .sl-appstate i { font-size: 20px; flex: none; } .sl-appstate-ok i { color: var(--sl-ok); } .sl-appstate-warn i { color: var(--sl-danger); } .sl-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; } @media (max-width: 619px) { .sl-appbar-in { padding: 12px; gap: 12px; } .sl-appbar-icon, .sl-appbar-bell { width: 36px; height: 36px; font-size: 18px; } } /* Inside the installed app the phone's status bar overlaps the page unless we leave room. */ @media (display-mode: standalone) { .sl-top { padding-top: env(safe-area-inset-top, 0px); } } /* ---- Member page: the message box, more members, sharing ------------------------------ */ /* The side column now holds a whole form, so it scrolls with the page rather than sticking (a sticky column taller than the window hides its own Send button). */ @media (min-width: 900px) { .sl-member { grid-template-columns: minmax(0, 1fr) 348px; } .sl-member-side { position: static; } } .sl-cta h2 { font-size: 20px; margin: 0 0 8px; } .sl-compose .sl-field { margin-top: 12px; } .sl-compose .sl-btn { margin-top: 4px; } .sl-compose-sub { font-size: 15px; font-weight: 600; margin: 16px 0 6px; } .sl-starters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .sl-starters .sl-chip { font-size: 13.5px; } /* What happens after Send — three facts, not a sequence, so no numbers. */ .sl-aftersend { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--sl-line-soft); display: grid; gap: 8px; } .sl-aftersend li { display: flex; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--sl-ink-2); } .sl-aftersend i { font-size: 17px; line-height: 1.15; flex: none; color: var(--sl-ok); } .sl-todo { list-style: none; margin: 0; padding: 0; } .sl-todo a { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; font-size: 14px; border-top: 1px solid var(--sl-line-soft); } .sl-todo li:first-child a { border-top: 0; } .sl-todo i { font-size: 18px; line-height: 1.15; flex: none; } .sl-peers-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--sl-line-soft); color: inherit; text-decoration: none; } .sl-peers-row:first-child { border-top: 0; padding-top: 2px; } .sl-peers-row .sl-photo { width: 44px; height: 44px; flex: none; } .sl-peers-text { min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.35; color: var(--sl-ink-2); } .sl-peers-text strong { font-size: 15px; color: var(--sl-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-peers-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sl-peers-row:hover strong { color: var(--sl-link); text-decoration: underline; } .sl-peers-all { display: block; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--sl-line-soft); font-weight: 600; font-size: 14px; } /* Phones only: leads to the message box, sits above the bottom tabs. */ .sl-msgbar { position: fixed; left: 0; right: 0; z-index: 39; bottom: calc(var(--sl-tabs-h) + env(safe-area-inset-bottom, 0px)); padding: 8px 12px; background: var(--sl-nav-bg); border-top: 1px solid var(--sl-nav-line); } .sl-msgbar[hidden] { display: none; } @media (min-width: 860px) { .sl-msgbar { bottom: 0; } } /* no tabs under it from here up */ @media (min-width: 900px) { .sl-msgbar { display: none; } } /* ---- Save / report / block ------------------------------------------------------------ */ .sl-topcard-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .sl-topcard-acts[hidden] { display: none; } .sl-more-menu { position: relative; } .sl-more-menu .sl-menu { left: 0; right: auto; z-index: 30; } .sl-menu button:disabled { opacity: 0.55; cursor: default; } .sl-menu button:disabled:hover { background: none; } #saveBtn.is-on, #saveBtn.is-on:hover { background: var(--sl-primary-tint); color: var(--sl-primary-tint-ink); border-color: transparent; } /* A small bookmark beside the name of someone you have saved, in every results view. */ .sl-saved-mark { color: var(--sl-accent); font-size: 0.95em; margin-left: 6px; vertical-align: -1px; } /* Saved list: rows in one card, like the directory, each with its own actions. */ .sl-saved-list { background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); overflow: hidden; } .sl-saved-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-top: 1px solid var(--sl-line-soft); } .sl-saved-row:first-child { border-top: 0; } .sl-saved-main { min-width: 0; flex: 1; display: flex; gap: 12px; color: inherit; text-decoration: none; } .sl-saved-main:hover { text-decoration: none; } .sl-saved-main:hover strong { color: var(--sl-link); text-decoration: underline; } .sl-saved-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 14px; color: var(--sl-ink-2); } .sl-saved-text strong { font-size: 16px; font-weight: 600; color: var(--sl-ink); overflow-wrap: anywhere; } .sl-saved-text .sl-saved-offer { color: var(--sl-accent-tint-ink); margin-top: 4px; } .sl-saved-acts { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: none; } @media (max-width: 619px) { .sl-saved-row { flex-wrap: wrap; } .sl-saved-acts { flex-direction: row; width: 100%; padding-left: 68px; } } /* Account: blocked members. */ .sl-blocked { list-style: none; margin: 8px 0 0; padding: 0; } .sl-blocked li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--sl-line-soft); } .sl-blocked li:first-child { border-top: 0; } .sl-blocked span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .sl-blocked small { display: block; color: var(--sl-ink-2); font-size: 12.5px; } /* The top card used to clip its contents to round the banner's corners — which also clipped the More menu. Round the banner itself and let the menu out. */ .sl-topcard { overflow: visible; } .sl-topcard .sl-banner { border-radius: calc(var(--sl-r-panel) - 1px) calc(var(--sl-r-panel) - 1px) 0 0; } /* ---- Area map (js/maps.js) ------------------------------------------------------------ */ .sl-areamap { border-radius: var(--sl-r-field); overflow: hidden; border: 1px solid var(--sl-line); background: var(--sl-sunk); } .sl-areamap-canvas { height: 220px; } @media (min-width: 860px) { .sl-areamap-canvas { height: 280px; } } .sl-areamap-plain { display: flex; gap: 10px; align-items: flex-start; padding: 14px; font-size: 14px; color: var(--sl-ink-2); } .sl-areamap-plain i { font-size: 22px; color: var(--sl-ink-3); flex: none; } .sl-areamap-plain small { display: block; margin-top: 4px; color: var(--sl-ink-3); } .sl-area-note { margin-top: 8px; } .sl-areacard { margin-top: 16px; padding: 14px; border: 1px solid var(--sl-line); border-radius: var(--sl-r-panel); background: var(--sl-surface); } .sl-areacard h3 { font-size: 16px; margin: 0 0 4px; } .sl-areacard #areaPreview { margin: 12px 0; } .sl-areacard-choice { display: flex; flex-wrap: wrap; gap: 8px; } .sl-areacard .sl-btn.is-on, .sl-areacard .sl-btn.is-on:hover { box-shadow: 0 0 0 2px var(--sl-ok); } /* ---- Formatting editor and formatted text (js/richtext.js) ---------------------------- */ .sl-rich { border: 1px solid var(--sl-line); border-radius: var(--sl-r-field); background: var(--sl-surface); } .sl-rich:focus-within { border-color: var(--sl-primary); box-shadow: 0 0 0 1px var(--sl-primary); } .sl-rich-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--sl-line-soft); background: var(--sl-sunk); border-radius: var(--sl-r-field) var(--sl-r-field) 0 0; } .sl-rich-bar button { width: 34px; height: 34px; border: 0; border-radius: 6px; background: none; color: var(--sl-ink-2); font-size: 17px; cursor: pointer; display: grid; place-items: center; } .sl-rich-bar button:hover { background: var(--sl-surface); color: var(--sl-ink); } .sl-rich-bar button.is-on { background: var(--sl-primary-tint); color: var(--sl-primary-tint-ink); } .sl-rich-sep { width: 1px; height: 22px; align-self: center; margin: 0 4px; background: var(--sl-line); } .sl-rich-box { min-height: 180px; max-height: 60vh; overflow: auto; padding: 12px 14px; outline: 0; font-size: 16px; line-height: 1.5; } @media (min-width: 620px) { .sl-rich-box { font-size: 15px; } } .sl-rich-box:empty::before, .sl-rich-box[data-placeholder]:not(:focus):has(> p:only-child > br:only-child)::before { content: attr(data-placeholder); color: var(--sl-ink-3); pointer-events: none; } /* The same rules for text in the editor and text on a profile. */ .sl-rich-box p, .sl-rich-view p, .sl-rich-box ul, .sl-rich-view ul, .sl-rich-box ol, .sl-rich-view ol, .sl-rich-box blockquote, .sl-rich-view blockquote { margin: 0 0 10px; } .sl-rich-box h3, .sl-rich-view h3 { font-size: 1.15em; margin: 14px 0 6px; } .sl-rich-box h4, .sl-rich-view h4 { font-size: 1em; margin: 12px 0 4px; } .sl-rich-box h3:first-child, .sl-rich-view h3:first-child { margin-top: 0; } .sl-rich-box ul, .sl-rich-view ul, .sl-rich-box ol, .sl-rich-view ol { padding-left: 22px; } .sl-rich-box li, .sl-rich-view li { margin: 2px 0; } .sl-rich-box blockquote, .sl-rich-view blockquote { padding: 2px 0 2px 12px; border-left: 3px solid var(--sl-accent); color: var(--sl-ink-2); } .sl-rich-box a, .sl-rich-view a { text-decoration: underline; text-underline-offset: 2px; } .sl-rich-view > :last-child { margin-bottom: 0; } .sl-rich-view.sl-about { font-size: 15.5px; line-height: 1.55; } /* Profile links: LinkedIn / YouTube / website, opening in a new tab. */ .sl-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--sl-line-soft); } .sl-links[hidden] { display: none; } .sl-linkbtn-out { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px; border: 1px solid var(--sl-line); border-radius: var(--sl-r-btn, 20px); color: var(--sl-ink); text-decoration: none; font-weight: 600; font-size: 14px; } .sl-linkbtn-out:hover { border-color: var(--sl-ink-3); text-decoration: none; background: var(--sl-sunk); } .sl-linkbtn-out > i:first-child { font-size: 20px; } .sl-linkbtn-out .ri-linkedin-box-fill { color: #0a66c2; } .sl-linkbtn-out .ri-youtube-fill { color: #ff0000; } .sl-linkbtn-out small { font-weight: 400; color: var(--sl-ink-2); } .sl-linkbtn-out .sl-ext { font-size: 14px; color: var(--sl-ink-3); } .sl-links-grid { display: grid; gap: 0 16px; } @media (min-width: 620px) { .sl-links-grid { grid-template-columns: 1fr 1fr 1fr; } } .sl-links-grid .sl-label i { font-size: 16px; vertical-align: -2px; } /* Gallery: what each image shows. */ .sl-specs { margin: 0 0 12px; padding-left: 18px; } .sl-specs li { margin: 2px 0; } .sl-gtile { display: flex; flex-direction: column; } .sl-gtile-cap { width: 100%; border: 0; border-top: 1px solid var(--sl-line-soft); background: var(--sl-surface); padding: 6px 8px; font: inherit; font-size: 12.5px; line-height: 1.3; text-align: left; color: var(--sl-ink); cursor: pointer; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .sl-gtile-cap.is-empty { color: var(--sl-link); } .sl-gtile-cap:hover { background: var(--sl-sunk); } .sl-gallery figure { margin: 0; min-width: 0; } .sl-gallery figcaption { font-size: 13px; line-height: 1.35; color: var(--sl-ink-2); margin-top: 6px; } .sl-lb-cap { position: absolute; left: 12px; right: 12px; bottom: 44px; text-align: center; color: #fff; font-size: 15px; text-shadow: 0 1px 4px rgba(0,0,0,.8); } .sl-lb-cap[hidden] { display: none; }