/* ============================================================= Koloab — frontend Black / white / grey by default; primary + accent colours, logo and font are workspace settings (see Koloab_Brand). ============================================================= */ /* ============================================================= THEME ISOLATION — Koloab installs into UNKNOWN themes and plugin stacks, so this reset must win every fight. Two layers of defence: 1. loaded at wp_enqueue_scripts priority 999, after the theme; 2. !important on every property a theme commonly leaks (margins, list bullets, button/input chrome, link decoration, fonts). Components re-set what they need at component level. ============================================================= */ .koloab, .koloab *, .koloab *::before, .koloab *::after, .koloab-pv, .koloab-pv *, .koloab-bulkbar, .koloab-bulkbar * { box-sizing: border-box !important; } /* Strip theme's headings + paragraph margins so component layouts work. :where() keeps this at single-class specificity (0,1,0) so component-level overrides (.koloab-dash__tag etc.) can win — the bare `.koloab p` form was (0,1,1) and silently beat every class-only margin/padding on p elements. */ .koloab :where(p, h1, h2, h3, h4, h5, h6) { margin: 0 !important; } .koloab ul, .koloab ol { margin: 0 !important; padding: 0 !important; list-style: none !important; } .koloab li { margin: 0 !important; padding: 0 !important; list-style: none !important; } .koloab a { color: inherit; text-decoration: none !important; box-shadow: none !important; border-bottom: none !important; } .koloab a:hover, .koloab a:focus { color: inherit; } .koloab img { max-width: none !important; width: auto; height: auto; border: 0 !important; box-shadow: none !important; } /* search forms (hero / compact) carry their own padding + border — the reset must not strip them or the input slides under the magnifying glass */ .koloab form, .koloab fieldset { margin: 0 !important; } .koloab form:not([data-koloab-search-form]), .koloab fieldset { padding: 0 !important; border: 0 !important; } /* Themes force their own buttons: borders / min-width / uppercase / colours. Kill those specifically. Each component then sets its own appearance. */ .koloab button { min-width: 0 !important; font-family: inherit !important; cursor: pointer; -webkit-appearance: none !important; appearance: none !important; text-transform: none !important; letter-spacing: normal !important; text-shadow: none !important; box-shadow: none; } .koloab button:focus { outline: 0; } /* Themes force inputs: padding, border-radius, borders, 100% width. Strip ONLY width:100% so layout flexbox sizing works; components set padding/border. */ .koloab input[type="text"], .koloab input[type="password"], .koloab input[type="email"], .koloab input[type="search"], .koloab input[type="url"] { width: auto; font-family: inherit !important; text-transform: none !important; box-shadow: none; } .koloab input:focus, .koloab textarea:focus, .koloab select:focus { outline: 0; } .koloab input[type="search"]::-webkit-search-decoration, .koloab input[type="search"]::-webkit-search-cancel-button, .koloab input[type="search"]::-webkit-search-results-button, .koloab input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; } .koloab table { border-collapse: collapse; border-spacing: 0; } /* ============================================================= END THEME ISOLATION ============================================================= */ .koloab, .koloab-pv, .koloab-polread, .koloab-bulkbar { /* the overlays are appended to , outside .koloab, so they need the tokens too */ /* Koloab defaults: black / white / grey. The "navy" and "red" token names * are kept for compatibility — they mean "primary" and "accent", and are * overridden at runtime by the brand settings (see Koloab_Brand). */ --klb-navy: #111111; --klb-navy-700: #0e0e0e; --klb-navy-900: #0b0b0b; --klb-red: #444444; --klb-red-700: #353535; --klb-grey: #d6d6d6; --klb-grey-50: #f5f6f8; --klb-grey-100: #ecedef; --klb-grey-200: #dfe2e6; --klb-grey-500: #8a8f97; --klb-grey-400: #5b6068; --klb-ink: #11151c; --klb-white: #ffffff; /* classic manila folder — deliberately NOT brand-tinted, so folders read * as folders the way users expect from a filesystem */ --klb-folder: #e8c87a; --klb-folder-deep: #d9b35f; --klb-folder-ink: #6b5418; --klb-radius: 14px; --klb-radius-sm: 8px; --klb-radius-lg: 22px; --klb-shadow-sm: 0 1px 0 rgba(22,28,37,.05), 0 1px 2px rgba(22,28,37,.04); --klb-shadow: 0 4px 14px -4px rgba(22,28,37,.10), 0 1px 2px rgba(22,28,37,.05); --klb-shadow-lg: 0 22px 50px -20px rgba(22,28,37,.22), 0 8px 20px -8px rgba(22,28,37,.10); --klb-font: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --klb-mono: 'Comfortaa', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* !important: theme body/typography rules must never bleed in */ font-family: var(--klb-font) !important; color: var(--klb-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5 !important; letter-spacing: 0 !important; font-size: 16px !important; } .koloab button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } .koloab input, .koloab textarea, .koloab select { font-family: inherit; color: inherit; } .koloab a { color: inherit; text-decoration: none; } /* Weight system (weights above 700 are avoided — Comfortaa and Lora top out at 700): - 700 ONLY the brand h1 — homepage hero + login title - 600 section subheads + card/news/notice/sheet titles (opt-in per component) - 400 everything else (body, meta, file names, counts, ...) Small uppercase labels/buttons keep their own 500 elsewhere. */ .koloab h1, .koloab h2, .koloab h3, .koloab h4 { font-family: var(--klb-font) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; color: var(--klb-navy) !important; margin: 0 !important; } .koloab h1 { font-size: clamp(2rem, 3.6vw, 3.4rem) !important; line-height: 1.05 !important; font-weight: 700 !important; } .koloab h2 { font-size: clamp(1.4rem, 2vw, 1.8rem) !important; line-height: 1.15 !important; } .koloab h3 { font-size: 1.05rem !important; line-height: 1.3 !important; } /* ----- shared atoms ----- */ .koloab-rule { display: inline-block; width: 28px; height: 2px; background: var(--klb-navy); vertical-align: middle; margin-right: 12px; transform: translateY(-2px); } .koloab-rule--red { background: var(--klb-red); } .koloab-eyebrow { display: inline-flex; align-items: center; font-weight: 500; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--klb-grey-400); } /* Buttons — !important on theme-leaked properties (background/border/colour/padding) */ .koloab-btn { display: inline-flex !important; align-items: center; gap: 8px; padding: 12px 20px !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: .04em !important; text-transform: uppercase !important; border-radius: var(--klb-radius-sm) !important; transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease !important; border: 1px solid transparent !important; line-height: 1 !important; min-width: 0 !important; } .koloab-btn--primary { background: var(--klb-navy) !important; color: var(--klb-white) !important; border-color: var(--klb-navy) !important; } .koloab-btn--primary:hover { background: var(--klb-red) !important; border-color: var(--klb-red) !important; transform: translateY(-1px); box-shadow: var(--klb-shadow); } .koloab-btn--ghost { background: var(--klb-white) !important; color: var(--klb-navy) !important; border-color: var(--klb-grey) !important; } .koloab-btn--ghost:hover { border-color: var(--klb-navy) !important; background: var(--klb-grey-50) !important; } .koloab-btn--full { width: 100% !important; justify-content: center; padding: 15px 20px !important; } .koloab-link { color: var(--klb-navy); font-weight: 500; font-size: 13px; letter-spacing: .03em; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .15s ease; } .koloab-link:hover { border-bottom-color: var(--klb-red); } /* universal close / icon button — visible against any background, theme-proof */ .koloab-iconbtn { width: 36px !important; height: 36px !important; min-width: 36px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: var(--klb-grey-50) !important; color: var(--klb-navy) !important; border: 1px solid var(--klb-grey-200) !important; padding: 0 !important; font-size: 0 !important; transition: background .15s, color .15s, border-color .15s, transform .15s !important; cursor: pointer; } .koloab-iconbtn svg { color: var(--klb-navy) !important; stroke: var(--klb-navy) !important; display: block; width: 18px; height: 18px; } .koloab-iconbtn:hover { background: var(--klb-red) !important; color: var(--klb-white) !important; border-color: var(--klb-red) !important; transform: scale(1.05); } .koloab-iconbtn:hover svg { color: var(--klb-white) !important; stroke: var(--klb-white) !important; } /* ============================================================= LOGIN ============================================================= */ .koloab--login { display: grid; grid-template-columns: 1fr 1fr; min-height: min(700px, 88vh); background: var(--klb-white); border-radius: var(--klb-radius-lg); overflow: hidden; box-shadow: var(--klb-shadow-lg); width: 80vw; max-width: 1240px; margin: clamp(24px, 4vh, 56px) auto; border: 1px solid var(--klb-grey-100); } @media (max-width: 860px) { .koloab--login { grid-template-columns: 1fr; width: 96vw; max-width: 480px; min-height: 0; margin: 16px auto; border-radius: 18px; } /* mobile: hide the navy aside entirely — form gets the full card */ .koloab-login__aside { display: none !important; } .koloab-login__panel { padding: 36px 24px 32px; gap: 22px; } .koloab-login__title { font-size: 1.7rem !important; } .koloab-login__tag { font-size: 14px !important; } } .koloab-login__panel { padding: clamp(36px, 4vw, 64px) clamp(28px, 4vw, 64px); display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; gap: 32px; } .koloab-login__main { display: flex; flex-direction: column; flex: 1; justify-content: center; max-width: 460px; width: 100%; } .koloab-login__brand { margin-bottom: 36px; } .koloab h1.koloab-login__title, .koloab-login__title { margin: 0 0 14px !important; font-size: clamp(2.4rem, 4.4vw, 3.6rem) !important; line-height: 1.05 !important; font-weight: 700 !important; color: var(--klb-navy) !important; letter-spacing: -.015em !important; } .koloab-login__tag { color: var(--klb-grey-400) !important; margin: 0 !important; font-size: clamp(14px, 1.05vw, 16px) !important; line-height: 1.55 !important; } .koloab-login__error { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(68,68,68,.06); border-left: 3px solid var(--klb-red); color: var(--klb-red-700); font-size: 14px; margin-bottom: 20px; border-radius: 4px; } .koloab-login__form { display: flex; flex-direction: column; gap: 16px; } .koloab-field { display: flex; flex-direction: column; gap: 6px; } .koloab-field__label { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--klb-grey-400); } .koloab-field__hint { margin: -4px 0 2px; font-size: 12px; color: var(--klb-grey-500); line-height: 1.4; } /* honeypot — kept out of view + off the accessibility tree, but not display:none (some bots skip display:none fields) */ .koloab-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .koloab-field input { height: 48px !important; min-height: 48px !important; padding: 0 14px !important; border-radius: var(--klb-radius-sm) !important; border: 1px solid var(--klb-grey) !important; background: var(--klb-white) !important; font-size: 15px !important; color: var(--klb-ink) !important; width: 100% !important; font-family: var(--klb-font); transition: border-color .15s, box-shadow .15s; } .koloab-field input:focus { outline: 0; border-color: var(--klb-navy) !important; box-shadow: 0 0 0 3px rgba(17,17,17,.10) !important; } .koloab-checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--klb-grey-400); } .koloab-checkbox input { accent-color: var(--klb-navy); } .koloab-login__foot { margin: 0 !important; padding-top: 24px; border-top: 1px solid var(--klb-grey-100); font-size: 12px; color: var(--klb-grey-500); line-height: 1.9; max-width: 460px; } .koloab-login__foot a { color: var(--klb-navy); border-bottom: 1px solid var(--klb-grey); } .koloab-login__foot a:hover { border-bottom-color: var(--klb-red); } .koloab-login__aside { background: var(--klb-navy); color: var(--klb-white); position: relative; overflow: hidden; display: flex; align-items: flex-start; padding: clamp(36px, 4vw, 64px); padding-top: clamp(120px, 14vw, 160px); /* room for absolute logo */ } .koloab-login__aside-logo { position: absolute; top: clamp(28px, 3vw, 44px); right: clamp(28px, 3vw, 44px); z-index: 2; height: clamp(56px, 5vw, 72px); width: auto; max-width: 260px; line-height: 0; } .koloab-login__aside-logo img { display: block; height: 100%; width: auto; max-width: 260px; object-fit: contain; } @media (max-width: 820px) { .koloab-login__aside { padding: 32px; padding-top: 84px; align-items: flex-start; } .koloab-login__aside-logo { top: 20px; right: 20px; height: 40px; max-width: 160px; } } .koloab-login__aside::before { content: ''; position: absolute; inset: 0; background: radial-gradient(800px 400px at 80% 20%, rgba(68,68,68,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.04), transparent 40%); } .koloab-login__aside::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--klb-red); } .koloab-login__aside-inner { position: relative; z-index: 1; max-width: 520px; } .koloab-login__kicker { display: inline-block; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--klb-red); margin-bottom: 32px; font-weight: 500; } .koloab-login__pull { font-size: clamp(20px, 1.9vw, 28px) !important; line-height: 1.32 !important; font-weight: 500 !important; color: var(--klb-white) !important; margin: 0 0 44px !important; letter-spacing: -.005em !important; } .koloab-login__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; } .koloab-login__list li { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.4; } .koloab-login__list li span { width: 8px; height: 8px; background: var(--klb-red); border-radius: 50%; flex-shrink: 0; } /* ============================================================= APP CHROME ============================================================= */ .koloab--app { background: var(--klb-grey-50); min-height: 100vh; margin: 0; } /* ============================================================= WP ADMIN-BAR OFFSET (admins only — never affects regular users) ------------------------------------------------------------- When a logged-in user can see the WordPress toolbar, WP adds the `admin-bar` class to and fixes the toolbar over the top of the viewport (32px desktop / 46px on mobile). Our sticky & fixed chrome is positioned against the viewport, so it slides UNDER that toolbar. We expose the toolbar height as --klb-wpbar, defined ONLY on body.admin-bar. Every top-anchored element below reads it via `var(--klb-wpbar, 0px)`, so logged-out / non-admin visitors (who never get the class) always resolve to 0px — i.e. byte-for-byte identical to before. Admins get the offset. */ body.admin-bar { --klb-wpbar: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --klb-wpbar: 46px; } } /* WP core demotes #wpadminbar to position:absolute under 600px, so it scrolls away while our chrome stays offset by 46px — leaving a dead gap on mobile. Pin it fixed so the offset above stays truthful while testing mobile view. Scoped to admins only (body.admin-bar) — regular users are untouched. */ @media screen and (max-width: 600px) { body.admin-bar #wpadminbar { position: fixed !important; } } /* ----- navy command bar ----- */ .koloab-bar { background: var(--klb-navy); color: var(--klb-white); position: sticky; top: var(--klb-wpbar, 0px); z-index: 30; border-bottom: 1px solid rgba(255,255,255,.04); } .koloab-bar::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--klb-red) 0 28%, transparent 28%); } .koloab-bar__inner { max-width: 1400px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; gap: 32px; height: 64px; } .koloab-bar__brand { display: flex !important; align-items: center; gap: 14px; background: transparent !important; border: 0 !important; padding: 0 !important; color: var(--klb-white) !important; min-width: 0 !important; cursor: pointer; } .koloab img.koloab-bar__logo, .koloab-bar__logo { display: block !important; height: 32px !important; width: auto !important; max-width: 130px !important; max-height: 32px !important; object-fit: contain; margin: 0 !important; padding: 0 !important; } .koloab-bar__divider { width: 1px; height: 22px; background: rgba(255,255,255,.18); } .koloab-bar__label { font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.78); font-weight: 400; } @media (max-width: 820px) { .koloab img.koloab-bar__logo, .koloab-bar__logo { height: 26px !important; max-width: 110px !important; max-height: 26px !important; } .koloab-bar__divider, .koloab-bar__label { display: none; } } .koloab-bar__nav { display: flex; gap: 4px; margin-left: auto; } .koloab-bar__nav-btn { padding: 8px 14px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.65); font-weight: 500; border-radius: 6px; position: relative; transition: color .15s; } .koloab-bar__nav-btn:hover { color: var(--klb-white); } .koloab-bar__nav-btn.is-active { color: var(--klb-white); } .koloab-bar__nav-btn.is-active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -8px; height: 2px; background: var(--klb-red); border-radius: 2px; } /* desktop: nav already pushes itself + user to the right via its own auto margin, so user just needs a small gap. mobile: nav is hidden, so we re-apply auto to the user to push it to the right edge. */ .koloab-bar__user { position: relative; margin-left: 12px; } .koloab-bar__avatar { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 50% !important; background: transparent !important; color: rgba(255,255,255,.78) !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; padding: 0 !important; transition: color .15s, background .15s !important; } .koloab-bar__avatar svg { color: inherit; display: block; } .koloab-bar__avatar svg circle { fill: currentColor; } .koloab-bar__avatar:hover { color: var(--klb-white) !important; background: rgba(255,255,255,.08) !important; } .koloab-bar__menu { position: absolute; right: 0; top: calc(100% + 14px); width: 240px; background: var(--klb-white); border: 1px solid var(--klb-grey-100); border-radius: var(--klb-radius); box-shadow: var(--klb-shadow-lg); color: var(--klb-ink); overflow: hidden; animation: koloab-pop .18s ease-out; } .koloab-bar__menu-head { padding: 14px 16px; border-bottom: 1px solid var(--klb-grey-100); } .koloab-bar__menu-head strong { display: block; font-size: 14px; font-weight: 500; } .koloab-bar__menu-head span { display: block; font-size: 12px; color: var(--klb-grey-400); } .koloab-bar__menu-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; font-size: 13px; font-weight: 400; text-align: left; color: var(--klb-ink); transition: background .12s; } .koloab-bar__menu-link:hover { background: var(--klb-grey-50); } @keyframes koloab-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ============================================================= DASHBOARD HERO ============================================================= */ .koloab-dash { background: var(--klb-navy); background-image: linear-gradient(135deg, rgba(17,17,17,.95) 0%, rgba(17,17,17,.7) 100%); background-size: cover; background-position: center calc(50% + var(--klb-parallax, 0px)); color: var(--klb-white); position: relative; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .koloab-dash { background-position: center !important; } } .koloab-dash::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% 10%, rgba(68,68,68,.16), transparent 65%), radial-gradient(800px 400px at 0% 100%, rgba(17,17,17,.45), transparent 60%); pointer-events: none; } .koloab-dash__inner { max-width: 1400px; margin: 0 auto; padding: clamp(36px, 5vw, 72px) 28px clamp(48px, 6vw, 80px); position: relative; } .koloab-dash__eyebrow { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: rgba(255,255,255,.7); margin-bottom: 20px; animation: koloab-fade-up .5s .05s both ease-out; } .koloab-dash__eyebrow .koloab-rule { background: var(--klb-red); } /* ============================================================= URGENT TICKERTAPE — banner notices under the command bar Standard/Premium feature. Collapsed (height 0) on load; .is-live animates it open so the content below shifts down smoothly. Colours are per-site: --klb-ticker-bg / --klb-ticker-fg are set inline from Command Centre → Settings. ============================================================= */ /* The strip's height comes from its CONTENT (viewport padding + min-height), never from a fixed `height` — theme rules squashing `height` on divs was collapsing it to a thin line. The reveal animates max-height instead, and the collapsed state is the :not(.is-live) case so a JS failure fails OPEN: the banner shows immediately rather than never. !important where host themes are known to fight (same defence as the rest of this stylesheet). */ .koloab-ticker { display: flex !important; align-items: stretch; min-height: 42px; max-height: 100px; opacity: 1; overflow: hidden; background: var(--klb-ticker-bg, #c8211f) !important; color: var(--klb-ticker-fg, #ffffff) !important; /* The sticky command bar pins var(--klb-wpbar) below its in-flow slot when the WP toolbar is present (admins), overlapping the top of this strip — only a squashed sliver showed. Margin the strip down by the same amount; resolves to 0px for regular users (no body.admin-bar → var unset). */ margin: var(--klb-wpbar, 0px) 0 0 !important; transition: max-height .5s cubic-bezier(.2,.8,.2,1), min-height .5s cubic-bezier(.2,.8,.2,1), opacity .4s ease .1s; } .koloab-ticker:not(.is-live) { max-height: 0; min-height: 0; opacity: 0; } .koloab-ticker__flag { display: flex !important; align-items: center; gap: 8px; flex: none; padding: 0 18px !important; margin: 0 !important; background: rgba(0,0,0,.18) !important; /* always a step darker than the chosen banner colour */ color: inherit !important; font-size: 11px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1 !important; } .koloab-ticker__viewport { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; padding: 13px 0; /* this is what gives the strip its 42px presence */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } .koloab-ticker__track { display: flex; width: max-content; animation: koloab-ticker-scroll var(--ticker-dur, 40s) linear infinite; } /* pause while pointing/tabbing at it — the items are clickable */ .koloab-ticker:hover .koloab-ticker__track, .koloab-ticker__track:focus-within { animation-play-state: paused; } .koloab-ticker__group { display: flex; align-items: center; flex: none; } .koloab-ticker__item { display: inline-flex !important; align-items: baseline; gap: 10px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 72px 0 0 !important; width: auto !important; height: auto !important; min-height: 0 !important; min-width: 0 !important; color: inherit !important; font-family: inherit !important; font-size: 13.5px !important; line-height: 1.25 !important; text-transform: none !important; letter-spacing: normal !important; white-space: nowrap; cursor: pointer; } .koloab-ticker__item strong { font-weight: 700; letter-spacing: .01em; color: inherit; } .koloab-ticker__text { opacity: .85; font-weight: 400; color: inherit; } .koloab-ticker__item:hover strong { text-decoration: underline; text-underline-offset: 3px; } .koloab-ticker__item:hover .koloab-ticker__text { opacity: 1; } @keyframes koloab-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .koloab-ticker__track { animation: none; } } /* birthday banner — frosted pill on the navy hero, dismissible */ .koloab-bday { display: flex; align-items: center; gap: 13px; width: max-content; max-width: 100%; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 999px; padding: 9px 11px 9px 14px; margin-bottom: 22px; color: var(--klb-white); box-shadow: var(--klb-shadow); animation: koloab-fade-up .5s both ease-out; } /* clear the fade-up animation (fill-mode: both) so the transition below can run */ .koloab-bday.is-dismissing { animation: none; opacity: 0; transform: translateY(-8px) scale(.97); transition: opacity .25s ease, transform .25s ease; } .koloab-bday__faces { display: inline-flex; flex: none; } .koloab-bday__face { width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--klb-red); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: #fff; border: 2px solid rgba(255,255,255,.55); margin-left: -9px; } .koloab-bday__face:first-child { margin-left: 0; } .koloab-bday__text { font-size: 14px; font-weight: 600; line-height: 1.3; } .koloab-bday .koloab-bday__close { -webkit-appearance: none; appearance: none; background: none !important; border: 0 !important; box-shadow: none !important; color: #fff; opacity: .85; width: 28px; height: 28px; min-width: 0; flex: none; margin: 0; padding: 0; line-height: 0; display: grid; place-items: center; cursor: pointer; transition: opacity .15s; } .koloab-bday .koloab-bday__close:hover { background: none !important; opacity: 1; } .koloab-bday .koloab-bday__close svg { display: block; width: 16px; height: 16px; } /* extra specificity (.koloab h1.koloab-dash__title) beats the .koloab h1 reset */ .koloab h1.koloab-dash__title, .koloab-dash__title { color: var(--klb-white) !important; font-size: clamp(2.2rem, 4vw, 3.6rem) !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -0.015em !important; max-width: 18ch; margin: 0 0 16px !important; animation: koloab-fade-up .55s .1s both ease-out; } /* doubled selector (.koloab p.koloab-dash__tag) keeps the tagline's spacing ahead of any element-level p rule, mirroring the h1 title trick above */ .koloab p.koloab-dash__tag, .koloab-dash__tag { color: rgba(255,255,255,.78) !important; font-size: clamp(15px, 1.2vw, 18px) !important; line-height: 1.5 !important; max-width: 60ch; margin: 0 0 40px !important; padding: 0 !important; animation: koloab-fade-up .55s .15s both ease-out; } /* non-premium workspaces show the Koloab wordmark as the homepage title */ .koloab .koloab-dash__title--logo img { display: block; height: clamp(44px, 6vw, 76px); width: auto; max-width: min(440px, 86vw); object-fit: contain; object-position: left center; } /* ----- HERO SEARCH (dashboard centerpiece) ----- */ /* z-index kept LOW so the navy command bar (z:30+) can cover it as you scroll */ .koloab-hero-search { display: flex !important; align-items: center; background: var(--klb-white) !important; border-radius: 12px !important; /* left padding clears the absolutely-positioned magnifying glass */ padding: 7px 16px 7px 58px !important; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45), 0 8px 20px -8px rgba(0,0,0,.20) !important; max-width: 760px; transition: transform .25s, box-shadow .25s; animation: koloab-fade-up .6s .2s both ease-out; position: relative; z-index: 1; } .koloab-hero-search::after { content: ''; position: absolute; left: 22px; right: 8px; bottom: 4px; height: 1px; background: linear-gradient(90deg, var(--klb-red), transparent 60%); opacity: 0; transition: opacity .2s; } .koloab-hero-search:focus-within { transform: translateY(-2px); box-shadow: 0 36px 70px -20px rgba(0,0,0,.55), 0 10px 24px -8px rgba(0,0,0,.25); } /* z-index: 30 lifts the search + its dropdown above quicklinks. Both have z-index: 1 in the DOM flow, but the buttons render later → they'd paint on top without this. */ .koloab-hero-search:focus-within, .koloab-dash.is-searching .koloab-hero-search { z-index: 30; } .koloab-hero-search:focus-within::after { opacity: 1; } /* the magnifying glass is pinned inside the bar — absolute positioning makes the layout immune to theme flex/gap/button resets */ .koloab-hero-search__icon { position: absolute !important; left: 22px; top: 50%; transform: translateY(-50%); color: var(--klb-grey-500); pointer-events: none; flex-shrink: 0; } .koloab-hero-search:focus-within .koloab-hero-search__icon { color: var(--klb-ink); } .koloab-hero-search input { flex: 1 !important; height: 44px !important; min-height: 44px !important; border: 0 !important; background: transparent !important; font-size: 17px !important; padding: 0 !important; outline: 0 !important; color: var(--klb-ink) !important; width: 100% !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; font-family: var(--klb-font); } .koloab-hero-search input::placeholder { color: var(--klb-grey-500) !important; opacity: 1; } /* Homepage shortcut buttons. Auto-fit grid adapts to viewport width. Transition is snappy (easing tweaked to feel snappy, not sluggish). */ .koloab-quicklinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 44px; max-width: 1000px; position: relative; z-index: 1; transition: margin-top .25s cubic-bezier(.2,.8,.2,1); } /* When searching: slide quicklinks down by --klb-search-h (measured from JS). Fallback of 300px if JS hasn't run yet or fails. +32px gap so nothing overlaps. */ .koloab-dash.is-searching .koloab-quicklinks { margin-top: calc(var(--klb-search-h, 300px) + 32px); } .koloab-quicklink { display: flex !important; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 20px 18px !important; background: rgba(22,28,37,.55) !important; border: 1px solid rgba(255,255,255,.28) !important; border-radius: var(--klb-radius) !important; color: var(--klb-white) !important; text-align: left !important; transition: background .2s, transform .2s, border-color .2s, box-shadow .2s !important; animation: koloab-fade-up .5s calc(.25s + var(--i) * .06s) both ease-out; min-width: 0 !important; cursor: pointer; } .koloab-quicklink:hover { background: var(--klb-white) !important; color: var(--klb-navy) !important; transform: translateY(-3px); border-color: var(--klb-white) !important; box-shadow: 0 16px 32px -16px rgba(0,0,0,.45); } .koloab-quicklink__icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--klb-red); color: var(--klb-white); transition: background .2s; flex-shrink: 0; } .koloab-quicklink:hover .koloab-quicklink__icon { background: var(--klb-navy); } .koloab-quicklink__name { font-weight: 500; font-size: 15px; line-height: 1.2; } .koloab-quicklink__desc { font-size: 12px; opacity: .8; line-height: 1.4; } @keyframes koloab-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================= NOTICES ============================================================= */ .koloab-notices { background: var(--klb-white); padding: clamp(48px, 6vw, 80px) 0; border-bottom: 1px solid var(--klb-grey-100); } .koloab-notices__inner { max-width: 1400px; margin: 0 auto; padding: 0 28px; } .koloab-notices__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-top: 32px; } /* ----- dashboard notice row: ONE row, 4 visible, rest scroll off right ----- */ .koloab-notices__scroller { position: relative; margin-top: 32px; } .koloab-notices__row { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; /* room for the hover shadow */ scrollbar-width: none; } .koloab-notices__row::-webkit-scrollbar { display: none; } .koloab-notices__row .koloab-notice { flex: 0 0 calc(25% - 15px); /* 4 cards + 3 gaps */ min-width: 280px; scroll-snap-align: start; } /* edge fades hint that more cards sit off-screen */ .koloab-notices__scroller::before, .koloab-notices__scroller::after { content: ''; position: absolute; top: 0; bottom: 6px; width: 60px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .25s; } .koloab-notices__scroller::before { left: 0; background: linear-gradient(90deg, var(--klb-white), rgba(255,255,255,0)); } .koloab-notices__scroller::after { right: 0; background: linear-gradient(270deg, var(--klb-white), rgba(255,255,255,0)); } .koloab-notices__scroller.has-more-left::before { opacity: 1; } .koloab-notices__scroller.has-more-right::after { opacity: 1; } .koloab-notices__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px; display: flex !important; align-items: center; justify-content: center; background: var(--klb-white) !important; border: 1px solid var(--klb-grey-200) !important; border-radius: 50% !important; padding: 0 !important; color: var(--klb-navy) !important; box-shadow: var(--klb-shadow); cursor: pointer; transition: color .15s, border-color .15s, transform .15s; } .koloab-notices__arrow:hover { color: var(--klb-red) !important; border-color: var(--klb-navy) !important; transform: translateY(-50%) scale(1.05); } .koloab-notices__arrow--prev { left: -14px; } .koloab-notices__arrow--next { right: -14px; } .koloab-notices__seemore { margin-top: 24px; text-align: center; } .koloab-notice { display: flex; flex-direction: column; background: var(--klb-white); border: 1px solid var(--klb-grey-100); border-radius: var(--klb-radius); overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; } .koloab-notice:hover { transform: translateY(-2px); box-shadow: var(--klb-shadow); border-color: var(--klb-grey-200); } .koloab-notice__img { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--klb-grey-50); } .koloab-notice__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .koloab-notice__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--klb-grey-400); } .koloab-notice__meta time { margin-left: auto; } .koloab-notice h3 { font-size: 1.05rem; font-weight: 600 !important; } .koloab-notice__excerpt { font-size: 13px; color: var(--klb-grey-400); line-height: 1.55; } .koloab-notice { cursor: pointer; } .koloab-notice__more { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--klb-navy); text-transform: uppercase; transition: color .15s, transform .15s; } .koloab-notice:hover .koloab-notice__more { color: var(--klb-red); transform: translateX(3px); } .koloab-newsitem { cursor: pointer; } /* notice/news reader sheet */ .koloab-noticesheet__img { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--klb-grey-50); } .koloab-noticesheet__head { padding: 28px 70px 16px 28px; } .koloab-noticesheet__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 11px; color: var(--klb-grey-400); flex-wrap: wrap; } .koloab-noticesheet__meta time { display: inline-block; font-size: 11px; color: var(--klb-grey-400); font-weight: 400; } .koloab-noticesheet__head h2 { margin: 0 0 8px !important; font-size: 26px !important; line-height: 1.15 !important; font-weight: 600 !important; color: var(--klb-navy) !important; } .koloab-noticesheet__byline { margin: 0 !important; font-size: 13px; color: var(--klb-grey-500); } .koloab-noticesheet__body { padding: 8px 28px 32px; font-size: 15px; line-height: 1.65; color: var(--klb-ink); } .koloab-noticesheet__body p { margin: 0 0 16px !important; } .koloab-noticesheet__body img { max-width: 100% !important; height: auto !important; border-radius: 8px; margin: 8px 0; } .koloab-noticesheet__body h1, .koloab-noticesheet__body h2, .koloab-noticesheet__body h3 { margin: 24px 0 12px !important; color: var(--klb-navy) !important; } .koloab-noticesheet__body ul, .koloab-noticesheet__body ol { margin: 0 0 16px 20px !important; padding-left: 8px; } .koloab-noticesheet__body ul li { list-style: disc; margin-bottom: 6px; } .koloab-noticesheet__body ol li { list-style: decimal; margin-bottom: 6px; } .koloab-noticesheet__body a { color: var(--klb-red); border-bottom: 1px solid currentColor; } .koloab-tagchip { display: inline-block; padding: 3px 8px; border-radius: 4px; background: var(--klb-grey-100); color: var(--klb-grey-400); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; } .koloab-tagchip--news { background: rgba(17,17,17,.08); color: var(--klb-navy); } .koloab-tagchip--banner { background: rgba(68,68,68,.10); color: var(--klb-red-700); } .koloab-noticesheet__ai { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 0; border-radius: 4px; background: rgba(17,17,17,.05); color: var(--klb-grey-400); font-family: inherit; font-size: 11.5px; font-weight: 400; line-height: 1.3; text-transform: none; letter-spacing: 0; cursor: pointer; transition: background .15s, color .15s; } .koloab-noticesheet__ai:hover { background: rgba(17,17,17,.10); color: var(--klb-navy); } .koloab-noticesheet__ai svg { width: 13px; height: 13px; flex-shrink: 0; opacity: .75; } .koloab-tagchip--pin { background: var(--klb-navy); color: var(--klb-white); } /* ============================================================= NEWS section — editorial feed with a lead story ============================================================= */ .koloab-news { background: var(--klb-white); padding: clamp(40px, 6vw, 80px) 0; border-bottom: 1px solid var(--klb-grey-100); } .koloab-news__inner { max-width: 1400px; margin: 0 auto; padding: 0 28px; } .koloab-news__feed { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 20px; margin-top: 32px; } @media (max-width: 1024px) { .koloab-news__feed { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .koloab-news__feed { grid-template-columns: 1fr; } } .koloab-newsitem { display: flex; flex-direction: column; background: var(--klb-white); border: 1px solid var(--klb-grey-100); border-radius: var(--klb-radius); overflow: hidden; transition: transform .2s, box-shadow .2s, border-color .2s; } .koloab-newsitem:hover { transform: translateY(-2px); box-shadow: var(--klb-shadow); border-color: var(--klb-grey-200); } .koloab-newsitem__img { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: var(--klb-grey-50); image-rendering: -webkit-optimize-contrast; } .koloab-newsitem__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; } .koloab-newsitem__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--klb-grey-400); flex-wrap: wrap; } .koloab-newsitem__meta time { margin-left: auto; } .koloab-newsitem__author { font-weight: 500; color: var(--klb-grey-500); } .koloab-newsitem__author::before { content: '·'; margin-right: 8px; color: var(--klb-grey-300); } .koloab-newsitem__title { font-size: 16px !important; line-height: 1.3 !important; font-weight: 600 !important; margin: 0 !important; color: var(--klb-navy) !important; } .koloab-newsitem__excerpt { font-size: 13px; color: var(--klb-grey-400); line-height: 1.55; } /* lead story takes the full first column, taller image */ .koloab-newsitem.is-lead { grid-row: span 2; } @media (min-width: 1025px) { .koloab-newsitem.is-lead { grid-row: span 2; } .koloab-newsitem.is-lead .koloab-newsitem__img { aspect-ratio: 4/3; } .koloab-newsitem.is-lead .koloab-newsitem__body { padding: 24px 28px 28px; } .koloab-newsitem.is-lead .koloab-newsitem__title { font-size: 22px !important; line-height: 1.2 !important; } .koloab-newsitem.is-lead .koloab-newsitem__excerpt { font-size: 14px; } } /* empty state used by notices + news */ .koloab-blank { display: flex; align-items: center; gap: 18px; padding: 28px 32px; background: var(--klb-grey-50); border: 1px dashed var(--klb-grey-200); border-radius: var(--klb-radius); color: var(--klb-grey-400); margin-top: 24px; } .koloab-blank__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--klb-white); color: var(--klb-grey-500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--klb-grey-100); } .koloab-blank p { margin: 0 !important; font-size: 14px; line-height: 1.55; } /* ============================================================= COMPANY DIRECTORY ============================================================= */ .koloab-directory { background: var(--klb-grey-50); padding: clamp(48px, 6vw, 88px) 0; border-bottom: 1px solid var(--klb-grey-100); } .koloab-directory__inner { max-width: 1400px; margin: 0 auto; padding: 0 28px; } .koloab-dirfilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--klb-grey-100); } .koloab-dirfilter__chip { display: inline-flex !important; align-items: center; gap: 6px; padding: 8px 14px !important; background: var(--klb-white) !important; color: var(--klb-grey-400) !important; border: 1px solid var(--klb-grey-100) !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .06em !important; text-transform: uppercase !important; min-width: 0 !important; transition: background .15s, color .15s, border-color .15s !important; cursor: pointer; } .koloab-dirfilter__chip em { font-style: normal; font-size: 11px; font-weight: 500; color: var(--klb-grey-500); padding: 1px 7px; background: var(--klb-grey-50); border-radius: 999px; } .koloab-dirfilter__chip:hover { border-color: var(--klb-navy) !important; color: var(--klb-navy) !important; } .koloab-dirfilter__chip.is-active { background: var(--klb-navy) !important; color: var(--klb-white) !important; border-color: var(--klb-navy) !important; } .koloab-dirfilter__chip.is-active em { background: rgba(255,255,255,.18); color: var(--klb-white); } /* grid */ .koloab-dirgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } @media (max-width: 640px) { .koloab-dirgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } } /* staff card */ .koloab-staffcard { position: relative; display: flex !important; flex-direction: column; background: var(--klb-white) !important; border: 1px solid var(--klb-grey-100) !important; border-radius: var(--klb-radius) !important; overflow: hidden; text-align: left; cursor: pointer; padding: 0 !important; min-width: 0 !important; transition: transform .2s, box-shadow .2s, border-color .2s !important; animation: koloab-fade-up .45s calc(.05s + var(--i) * .03s) both ease-out; } .koloab-staffcard:hover { transform: translateY(-3px); box-shadow: var(--klb-shadow); border-color: var(--klb-navy) !important; } .koloab-staffcard__badge { position: absolute; top: 10px; left: 10px; z-index: 2; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--klb-white); border: 1px solid var(--klb-grey-100); border-radius: 50%; box-shadow: var(--klb-shadow-sm); font-size: 16px; line-height: 1; } .koloab-staffcard__photo { position: relative; aspect-ratio: 1/1; background: var(--klb-grey-50); overflow: hidden; display: flex; align-items: center; justify-content: center; } .koloab-staffcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: none !important; image-rendering: -webkit-optimize-contrast; transition: transform .4s ease; } .koloab-staffcard:hover .koloab-staffcard__photo img { transform: scale(1.04); } .koloab-staffcard__initials { font-family: var(--klb-font); font-weight: 600; font-size: 38px; letter-spacing: .04em; color: var(--klb-navy); opacity: .35; } .koloab-staffcard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .koloab-staffcard__name { margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; color: var(--klb-navy) !important; line-height: 1.25 !important; } .koloab-staffcard__role { margin: 0 !important; font-size: 12px; color: var(--klb-grey-400); line-height: 1.35; } .koloab-staffcard__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .koloab-staffcard__chip { display: inline-block; padding: 2px 8px; background: var(--klb-navy); color: var(--klb-white); border-radius: 3px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; } .koloab-staffcard__chip--ghost { background: transparent; color: var(--klb-grey-400); border: 1px solid var(--klb-grey-200); } .koloab-staffcard__quick { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; z-index: 3; } .koloab-staffcard:hover .koloab-staffcard__quick { opacity: 1; transform: translateY(0); } .koloab-staffcard__qbtn { width: 32px; height: 32px; display: inline-flex !important; align-items: center; justify-content: center; background: var(--klb-navy) !important; color: var(--klb-white) !important; border-radius: 50% !important; box-shadow: var(--klb-shadow-sm); border: 0 !important; min-width: 32px !important; padding: 0 !important; transition: background .15s, transform .15s; } .koloab-staffcard__qbtn svg { color: var(--klb-white) !important; stroke: var(--klb-white) !important; display: block; } .koloab-staffcard__qbtn:hover { background: var(--klb-red) !important; transform: scale(1.08); } .koloab-staffcard__qbtn:hover svg { color: var(--klb-white) !important; stroke: var(--klb-white) !important; } @media (hover: none) { .koloab-staffcard__quick { opacity: 1; transform: none; } } /* ============================================================= STAFF INFO SHEET (drawer) ============================================================= */ /* One layout for every article: a centred modal, wide and vertically scrollable. */ .koloab-sheet { position: fixed; inset: 0; top: var(--klb-wpbar, 0px); z-index: 110; display: flex; align-items: center; justify-content: center; padding: clamp(20px, 4vw, 60px); } @keyframes koloab-modal-in { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .koloab-sheet .koloab-noticesheet__head { padding: 36px 48px 18px 48px; } .koloab-sheet .koloab-noticesheet__head h2 { font-size: 32px !important; line-height: 1.15 !important; } .koloab-sheet .koloab-noticesheet__body { padding: 8px 48px 48px; font-size: 16px; max-width: 720px; } @media (max-width: 700px) { .koloab-sheet .koloab-noticesheet__head { padding: 28px 24px 14px; } .koloab-sheet .koloab-noticesheet__head h2 { font-size: 24px !important; } .koloab-sheet .koloab-noticesheet__body { padding: 8px 24px 32px; font-size: 15px; } } /* rich-content elements added by WP's the_content filter */ .koloab-noticesheet__body iframe, .koloab-noticesheet__body video, .koloab-noticesheet__body embed, .koloab-noticesheet__body object { max-width: 100% !important; border-radius: 10px; margin: 14px 0; display: block; } .koloab-noticesheet__body .wp-video, .koloab-noticesheet__body .wp-block-embed, .koloab-noticesheet__body figure { margin: 18px 0 !important; max-width: 100% !important; } .koloab-noticesheet__body figure img { border-radius: 10px; } .koloab-noticesheet__body figcaption { font-size: 12px; color: var(--klb-grey-500); margin-top: 6px; text-align: center; } .koloab-noticesheet__body blockquote { margin: 18px 0 !important; padding: 14px 22px; border-left: 3px solid var(--klb-red); background: var(--klb-grey-50); font-style: italic; color: var(--klb-navy); border-radius: 0 8px 8px 0; } .koloab-noticesheet__body code { background: var(--klb-grey-50); padding: 2px 6px; border-radius: 4px; font-family: var(--klb-mono); font-size: .9em; color: var(--klb-navy); } .koloab-sheet__overlay { position: absolute; inset: 0; background: rgba(22,28,37,.55); backdrop-filter: blur(2px); animation: koloab-fade .2s ease-out; } .koloab-sheet__panel { position: relative; width: min(820px, 100%); max-height: calc(100vh - clamp(40px, 8vw, 120px)); background: var(--klb-white); display: flex; flex-direction: column; border-radius: 14px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5), 0 8px 24px -8px rgba(0,0,0,.25); animation: koloab-modal-in .25s cubic-bezier(.2,.8,.2,1); overflow-y: auto; } /* sticky, not absolute: absolute scrolls out of reach in a long article */ .koloab-sheet__close { position: sticky; top: 18px; align-self: flex-end; margin: 18px 18px -56px auto; flex: 0 0 auto; z-index: 3; width: 38px !important; height: 38px !important; min-width: 38px !important; background: var(--klb-white) !important; color: var(--klb-navy) !important; border: 1px solid var(--klb-grey-200) !important; border-radius: 50% !important; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; font-size: 0 !important; box-shadow: 0 4px 12px -4px rgba(22,28,37,.25) !important; transition: background .15s, color .15s, border-color .15s, transform .15s !important; cursor: pointer; } .koloab-sheet__close svg { color: var(--klb-navy) !important; stroke: var(--klb-navy) !important; display: block; width: 18px; height: 18px; } .koloab-sheet__close:hover { background: var(--klb-red) !important; color: var(--klb-white) !important; border-color: var(--klb-red) !important; transform: scale(1.05); } .koloab-sheet__close:hover svg { color: var(--klb-white) !important; stroke: var(--klb-white) !important; } .koloab-sheet__body { padding: 0 0 32px; } .koloab-staffsheet__photo { aspect-ratio: 4/3; background: var(--klb-grey-100); overflow: hidden; display: flex; align-items: center; justify-content: center; } .koloab-staffsheet__photo img { width: 100%; height: 100%; object-fit: cover; max-width: none !important; } .koloab-staffsheet__photo.is-empty { background: linear-gradient(135deg, var(--klb-navy), #1a212c); color: var(--klb-white); font-family: var(--klb-font); font-weight: 600; font-size: 68px; letter-spacing: .04em; } .koloab-staffsheet__photo.is-empty span { opacity: .9; } .koloab-staffsheet__head { padding: 26px 28px 8px; } .koloab-staffsheet__head h2 { font-size: 26px !important; font-weight: 600 !important; margin: 0 0 4px !important; color: var(--klb-navy) !important; } .koloab-staffsheet__role { margin: 0 !important; color: var(--klb-grey-400); font-size: 14px; font-weight: 400; } .koloab-staffsheet__quickrow { display: flex; gap: 8px; flex-wrap: wrap; /* narrow sheet: buttons drop to a new row instead of squeezing */ padding: 14px 28px 22px; } .koloab-staffsheet__quickrow .koloab-btn { flex: 1; justify-content: center; text-decoration: none; white-space: nowrap; /* !important: .koloab-btn pins min-width: 0 — restore breathing room so the label never presses against the button edges */ min-width: max-content !important; } .koloab-staffsheet__meta { padding: 0 28px; } .koloab-staffsheet__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--klb-grey-100); font-size: 13px; align-items: center; } .koloab-staffsheet__row span:first-child { color: var(--klb-grey-400); font-weight: 500; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; } .koloab-staffsheet__row span:last-child { color: var(--klb-ink); font-weight: 400; text-align: right; word-break: break-word; } .koloab-staffsheet__row a { color: var(--klb-navy); border-bottom: 1px solid var(--klb-grey-200); } .koloab-staffsheet__row a:hover { border-bottom-color: var(--klb-red); } /* team bios + company notes — keep small; the theme's type scale must not * inflate content coming out of the editor, hence the pinned descendants */ .koloab-staffsheet__bio { padding: 22px 28px 0; color: var(--klb-grey-400); font-size: 12.5px; line-height: 1.55; } .koloab-staffsheet__bio p, .koloab-staffsheet__bio li, .koloab-staffsheet__bio span, .koloab-staffsheet__bio a { font-size: 12.5px !important; line-height: 1.55 !important; } .koloab-staffsheet__bio p { margin: 0 0 10px !important; } /* ============================================================= CONTACTS — company "business cards" + company sheet Each card is a full business card: logo plate, name, categories and the company's main contact lines. --co-accent is sampled from the logo in JS (falls back to brand accent). Sheet reuses the staff shell. ============================================================= */ /* shared search field for both Team + Contacts directories */ .koloab-dirsearch { display: flex; align-items: center; gap: 10px; background: var(--klb-white); border: 1px solid var(--klb-grey-100); border-radius: 12px; padding: 0 16px; margin: 26px 0 4px; max-width: 520px; box-shadow: 0 1px 0 rgba(22,28,37,.02); transition: border-color .15s, box-shadow .15s; } .koloab-dirsearch:focus-within { border-color: var(--klb-navy); box-shadow: 0 6px 18px -10px rgba(22,28,37,.3); } .koloab-dirsearch svg { color: var(--klb-grey-500); flex-shrink: 0; } .koloab-dirsearch input { flex: 1; border: 0 !important; outline: 0 !important; background: transparent !important; height: 46px; font-size: 15px !important; color: var(--klb-ink) !important; padding: 0 !important; box-shadow: none !important; font-family: var(--klb-font); } .koloab-dirsearch input::placeholder { color: var(--klb-grey-500) !important; opacity: 1; } .koloab-dirempty { grid-column: 1 / -1; padding: 40px 0; text-align: center; color: var(--klb-grey-500); font-size: 14px; } .koloab-cogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; } .koloab-cocard { --co-accent: var(--klb-red); --co-accent-soft: rgba(235, 51, 50, .12); position: relative; display: flex !important; flex-direction: column; padding: 0 0 16px !important; background: var(--klb-white) !important; border: 1px solid var(--klb-grey-100) !important; border-radius: var(--klb-radius) !important; overflow: hidden; text-align: left !important; cursor: pointer; min-width: 0 !important; transition: transform .2s, box-shadow .2s, border-color .2s !important; animation: koloab-fade-up .5s calc(.05s + var(--i) * .04s) both ease-out; } .koloab-cocard:hover { transform: translateY(-3px); border-color: var(--co-accent) !important; box-shadow: 0 22px 44px -20px rgba(0, 0, 0, .45); } /* letterhead rule — brand colour bar across the top */ .koloab-cocard__rule { height: 5px; width: 100%; background: var(--co-accent); flex-shrink: 0; } /* header band: logo plate tinted with the brand colour + name/categories */ .koloab-cocard__top { display: flex; align-items: center; gap: 16px; padding: 18px 20px 14px; } .koloab-cocard__logo { flex-shrink: 0; width: 84px; height: 84px; border-radius: 14px; background: var(--co-accent-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; } .koloab-cocard__logo img { max-width: 78%; max-height: 78%; object-fit: contain; } .koloab-cocard__mark { color: var(--co-accent); font-weight: 400; font-size: 26px; font-family: var(--klb-font); } .koloab-cocard__head { min-width: 0; flex: 1; } .koloab-cocard__name { margin: 0 !important; font-size: 19px; font-weight: 600 !important; color: var(--klb-navy); line-height: 1.2; letter-spacing: -.01em; } .koloab-cocard__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .koloab-cocard__cat { font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--co-accent); background: var(--co-accent-soft); border-radius: 999px; padding: 3px 10px; } /* the contact block on the face of the card */ .koloab-cocard__lines { display: flex; flex-direction: column; gap: 9px; padding: 4px 20px 6px; border-top: 1px solid var(--klb-grey-100); margin-top: 2px; padding-top: 14px; flex: 1 1 auto; } .koloab-cocard__line { display: flex; align-items: center; gap: 10px; min-width: 0; } .koloab-cocard__line svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--co-accent); } .koloab-cocard__line span { font-size: 13px; color: var(--klb-grey-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .koloab-cocard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px 0; } .koloab-cocard__count { font-size: 10.5px; font-weight: 500; letter-spacing: .03em; color: var(--klb-navy); background: var(--klb-grey-50); border: 1px solid var(--klb-grey-100); border-radius: 999px; padding: 4px 12px; white-space: nowrap; } .koloab-cocard__view { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--co-accent); transition: transform .15s; } .koloab-cocard:hover .koloab-cocard__view { transform: translateX(3px); } /* company info sheet — give the logo plenty of room, centred (reuses staffsheet shell) */ .koloab-cosheet__logo { height: 150px; margin: 6px 0 22px; display: flex; align-items: center; justify-content: center; } .koloab-cosheet__logo img { max-height: 132px; max-width: 80%; object-fit: contain; } .koloab-cosheet__logo.is-empty span { width: 104px; height: 104px; border-radius: 18px; display: flex; align-items: center; justify-content: center; background: var(--klb-grey-50); color: var(--klb-navy); font-weight: 400; font-size: 30px; } .koloab-cosheet__subhead { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--klb-grey-500); font-weight: 500; margin: 34px 28px 14px; padding-top: 22px; border-top: 1px solid var(--klb-grey-100); } .koloab-cosheet__contacts { display: flex; flex-direction: column; gap: 12px; padding: 0 28px; } .koloab-cocontact { border: 1px solid var(--klb-grey-100); border-radius: 12px; padding: 16px 18px; } .koloab-cocontact__head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; } .koloab-cocontact__head strong { font-size: 15px; color: var(--klb-navy); } .koloab-cocontact__role { font-size: 13px; color: var(--klb-grey-400); } /* plain, readable, copyable detail lines — still clickable as mailto:/tel: */ .koloab-cocontact__lines { display: flex; flex-direction: column; gap: 9px; } .koloab-cocontact__line { display: flex; align-items: center; gap: 10px; color: var(--klb-navy) !important; font-size: 14px; line-height: 1.4; text-decoration: none !important; word-break: break-word; } .koloab-cocontact__line svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--klb-grey-500); } .koloab-cocontact__line:hover { color: var(--klb-red) !important; } .koloab-cocontact__line:hover svg { color: var(--klb-red); } .koloab-cocontact__line span { user-select: text; } .koloab-cocontact__ext { color: var(--klb-grey-500); font-weight: 400; font-size: 12.5px; white-space: nowrap; } @media (max-width: 760px) { /* full-width business cards on mobile */ .koloab-cogrid { grid-template-columns: 1fr; gap: 14px; } .koloab-cocard__logo { width: 68px; height: 68px; } .koloab-cocard__name { font-size: 17px; } } /* ============================================================= DASHBOARD CARDS — folder grid + recent strip ============================================================= */ .koloab-cards { background: var(--klb-grey-50); padding: clamp(48px, 6vw, 88px) 0; } .koloab-cards__inner { max-width: 1400px; margin: 0 auto; padding: 0 28px; } .koloab-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; } .koloab-section-head .koloab-eyebrow { margin-bottom: 10px; } .koloab-section-head--spaced { margin-top: 64px; } .koloab-section-head h2 { margin: 0 !important; font-weight: 600 !important; } .koloab-folder-grid { gap: 18px; } .koloab-folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .koloab-folder { display: flex; flex-direction: column; /* !important: the .koloab button reset (background: transparent / border: 0) outguns this selector — without it the cards melt into the page */ background: var(--klb-white) !important; border: 1px solid var(--klb-grey-200) !important; border-radius: var(--klb-radius); box-shadow: var(--klb-shadow-sm); padding: 22px 22px 18px; text-align: left; transition: box-shadow .2s, border-color .2s; position: relative; overflow: hidden; animation: koloab-fade-up .45s calc(.05s + var(--i) * .04s) both ease-out; } .koloab-folder:hover { box-shadow: var(--klb-shadow); border-color: var(--klb-navy) !important; } .koloab-folder__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; } .koloab-folder__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--klb-folder); /* manila — folders look like folders */ color: var(--klb-folder-ink); transition: background .2s; } .koloab-folder:hover .koloab-folder__icon { background: var(--klb-folder-deep); } .koloab-folder__count { font-size: 11px; color: var(--klb-grey-400); font-weight: 500; letter-spacing: .04em; } .koloab-folder__count small { font-weight: 400; text-transform: lowercase; } .koloab-folder__name { margin: 0 0 6px; font-weight: 600 !important; } .koloab-folder__desc { color: var(--klb-grey-400); font-size: 13px; line-height: 1.5; margin: 0; } .koloab-folder__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font-size: 12px; color: var(--klb-grey-500); } .koloab-folder__arrow { font-size: 18px; transition: transform .25s; color: var(--klb-navy); font-weight: 500; } .koloab-folder:hover .koloab-folder__arrow { transform: translateX(4px); color: var(--klb-red); } /* ----- recent strip ----- */ .koloab-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } /* ============================================================= FILE CARDS (used by recent strip + browser grid view) ============================================================= */ .koloab-card { display: flex; flex-direction: column; background: var(--klb-white); border: 1px solid var(--klb-grey-100); border-radius: var(--klb-radius); overflow: hidden; text-align: left; transition: transform .2s, box-shadow .2s, border-color .2s; } .koloab-card:hover { transform: translateY(-2px); box-shadow: var(--klb-shadow); border-color: var(--klb-grey-200); } .koloab-card__media { aspect-ratio: 4/3; background: var(--klb-grey-50); position: relative; overflow: hidden; } .koloab-card__thumb { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .35s ease; } .koloab-card:hover .koloab-card__thumb { transform: scale(1.04); } /* PDF first-page preview (rendered client-side into a canvas) */ .koloab-card__media.has-pdf-preview { background: var(--klb-white); } .koloab-card__pdfcanvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: var(--klb-white); transition: transform .35s ease; } .koloab-card:hover .koloab-card__pdfcanvas { transform: scale(1.04); } .koloab-card__filetype { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--klb-mono); font-weight: 500; font-size: 22px; letter-spacing: .04em; color: var(--klb-navy); background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(17,17,17,.025) 12px 13px), var(--klb-grey-50); } .koloab-card__filetype[data-ext="pdf"] { color: #c8211f; } .koloab-card__filetype[data-ext="doc"], .koloab-card__filetype[data-ext="docx"] { color: #1f5fc8; } .koloab-card__filetype[data-ext="xls"], .koloab-card__filetype[data-ext="xlsx"] { color: #1f8b3a; } .koloab-card__filetype[data-ext="zip"] { color: #6a4b9c; } .koloab-card__body { padding: 14px 16px 16px; } .koloab-card__title { font-size: 14px; margin: 0 0 6px; font-weight: 400; color: var(--klb-navy); } .koloab-card__meta { font-size: 11px; color: var(--klb-grey-400); display: flex; gap: 6px; flex-wrap: wrap; } .koloab-card__meta span:first-child { font-weight: 500; color: var(--klb-navy); } /* ============================================================= FILE BROWSER (Windows-explorer style) ============================================================= */ .koloab-browser { background: var(--klb-white); min-height: 70vh; } .koloab-browser__chrome { display: flex; align-items: center; gap: 16px; padding: 14px 28px; border-bottom: 1px solid var(--klb-grey-100); background: var(--klb-white); position: sticky; top: calc(64px + var(--klb-wpbar, 0px)); z-index: 10; flex-wrap: wrap; } /* search + view toggle wrapper — transparent on desktop (children act as direct chrome flex items); becomes the second row on mobile */ .koloab-explorer-tools { display: contents; } /* compact search lives top-LEFT when browsing */ .koloab-compact-search { display: flex; align-items: center; gap: 14px; background: var(--klb-grey-50); border: 1px solid var(--klb-grey-100); padding: 8px 18px 8px 28px; border-radius: 8px; min-width: 280px; transition: border-color .15s, background .15s; position: relative; z-index: 20; } .koloab-compact-search:focus-within { border-color: var(--klb-navy); background: var(--klb-white); } .koloab-compact-search > svg { color: var(--klb-grey-500); flex-shrink: 0; margin-right: 6px; margin-left: 6px; width: 16px; height: 16px; } .koloab-compact-search input { flex: 1 !important; height: 28px !important; min-height: 28px !important; width: auto !important; border: 0 !important; background: transparent !important; font-size: 13px !important; outline: 0 !important; padding: 0 !important; color: var(--klb-ink) !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--klb-font); } .koloab-compact-search input::placeholder { color: var(--klb-grey-500) !important; opacity: 1; } .koloab-crumbs { display: flex; align-items: center; gap: 4px; font-size: 13px; flex: 1; min-width: 0; flex-wrap: wrap; } .koloab-crumb { color: var(--klb-navy); padding: 5px 10px; border-radius: 6px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--klb-grey-300, rgba(17,17,17,.25)); text-underline-offset: 3px; transition: background .12s, color .12s, text-decoration-color .12s; } .koloab-crumb:not(.is-current):hover { background: var(--klb-grey-50); color: var(--klb-red-700); text-decoration-color: currentColor; } .koloab-crumb.is-current { color: var(--klb-ink); font-weight: 500; cursor: default; text-decoration: none; background: var(--klb-grey-50); } .koloab-crumb-sep { color: var(--klb-grey-500); font-size: 11px; flex-shrink: 0; } .koloab-viewtoggle { display: flex; gap: 2px; background: var(--klb-grey-50); padding: 3px; border-radius: 8px; border: 1px solid var(--klb-grey-100); } .koloab-viewtoggle button { width: 32px !important; height: 28px !important; min-width: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 5px !important; color: var(--klb-grey-400) !important; transition: background .12s, color .12s !important; } .koloab-viewtoggle button svg { display: block; color: inherit; stroke: currentColor; } .koloab-viewtoggle button:hover { color: var(--klb-navy) !important; background: rgba(17,17,17,.05) !important; } .koloab-viewtoggle button.is-active { background: var(--klb-white) !important; color: var(--klb-navy) !important; box-shadow: var(--klb-shadow-sm); } /* The chrome above is sticky at top: calc(64px + wpbar). On the admin-bar (no-header) template the WP toolbar overlays the page instead of pushing it, so the chrome pins `wpbar` px lower than its in-flow placeholder — which would hide the top of this non-sticky content underneath it. Push the body down by the same amount so the first folders/files clear the chrome. Resolves to 0px for non-admins (no admin-bar class → --klb-wpbar unset). */ .koloab-browser__body { display: grid; grid-template-columns: 260px 1fr; min-height: 60vh; padding-top: var(--klb-wpbar, 0px); } @media (max-width: 820px) { .koloab-browser__body { grid-template-columns: 1fr; } } /* ----- sidebar ----- */ .koloab-sidebar { border-right: 1px solid var(--klb-grey-100); padding: 20px 16px; background: var(--klb-grey-50); } .koloab-sidebar__head { padding: 0 10px 14px; } .koloab-sidebar__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .koloab-sidebar__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; font-size: 13px; font-weight: 400; color: var(--klb-grey-400); border-radius: 6px; text-align: left; transition: background .12s, color .12s; } .koloab-sidebar__item:hover { background: var(--klb-white); color: var(--klb-navy); } .koloab-sidebar__item.is-active { background: var(--klb-navy); color: var(--klb-white); } .koloab-sidebar__item.is-active em { color: rgba(255,255,255,.6); } .koloab-sidebar__item em { font-style: normal; margin-left: auto; font-size: 11px; color: var(--klb-grey-500); } .koloab-sidebar__item svg { flex-shrink: 0; } /* ----- canvas ----- */ .koloab-canvas { padding: 24px 28px; min-height: 60vh; position: relative; } /* grid view */ .koloab-results.is-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .koloab-results.is-grid .koloab-row { display: none; } /* list view */ .koloab-results.is-list { display: flex; flex-direction: column; } .koloab-results.is-list .koloab-card { display: none; } .koloab-row { display: grid; grid-template-columns: 32px 1fr 100px 100px 130px; align-items: center; gap: 16px; padding: 10px 14px; border-bottom: 1px solid var(--klb-grey-100); cursor: pointer; font-size: 13px; transition: background .12s; } .koloab-row:hover { background: var(--klb-grey-50); } .koloab-row__icon { width: 32px; height: 32px; border-radius: 6px; background: var(--klb-grey-50); display: flex; align-items: center; justify-content: center; color: var(--klb-navy); } .koloab-row__icon[data-ext="pdf"] { background: rgba(200,33,31,.08); color: #c8211f; } /* folder rows in list view get the manila treatment too */ .koloab-row[data-koloab-nav] .koloab-row__icon { background: var(--klb-folder); color: var(--klb-folder-ink); } .koloab-row__icon--thumb { background-size: cover; background-position: center; border: 1px solid var(--klb-grey-100); } .koloab-row__name { font-weight: 400; color: var(--klb-navy); } .koloab-row__meta { color: var(--klb-grey-400); font-size: 12px; } /* ============================================================= MULTI-SELECT (tick box) + BULK BAR ============================================================= */ .koloab-row { position: relative; } .koloab-selbox { position: absolute; top: 8px; left: 8px; z-index: 4; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--klb-grey-200); background: rgba(255,255,255,.96); box-shadow: 0 1px 3px rgba(22,28,37,.14); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s, background .15s, border-color .15s; } .koloab-selbox::after { content: ""; width: 10px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -2px); opacity: 0; } .koloab-row .koloab-selbox { top: 50%; left: 14px; transform: translateY(-50%); } .koloab-row__icon { transition: opacity .15s; } .is-picked .koloab-selbox { opacity: 1; background: var(--klb-navy); border-color: var(--klb-navy); } .is-picked .koloab-selbox::after { opacity: 1; } .koloab-card.is-picked { border-color: var(--klb-navy); box-shadow: 0 0 0 2px rgba(17,17,17,.28); } .koloab-row.is-picked { background: rgba(17,17,17,.07); } .koloab-row.is-picked .koloab-row__icon { opacity: 0; } @media (hover: hover) and (pointer: fine) { .koloab-card:hover .koloab-selbox, .koloab-card:focus-within .koloab-selbox, .koloab-row:hover .koloab-selbox { opacity: 1; } .koloab-row:hover .koloab-row__icon { opacity: 0; } } .koloab-picking .koloab-selbox { opacity: 1; } .koloab-picking .koloab-row .koloab-row__icon { opacity: 0; } .koloab-bulkbar { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(14px); z-index: 90; display: flex; align-items: center; gap: 7px; max-width: min(880px, 94vw); padding: 9px 11px 9px 16px; background: var(--klb-navy); color: var(--klb-white); border-radius: 14px; border-bottom: 2px solid var(--klb-red); box-shadow: var(--klb-shadow-lg); font-family: var(--klb-font); font-size: 13px; opacity: 0; overflow-x: auto; transition: transform .25s ease, opacity .25s ease; } .koloab-bulkbar.is-open { transform: translateX(-50%) translateY(0); opacity: 1; } .koloab-bulkbar.is-busy { pointer-events: none; } .koloab-bulkbar.is-busy .koloab-bulkbar__btn { opacity: .55; } .koloab-bulkbar strong { white-space: nowrap; font-weight: 600; padding-right: 13px; margin-right: 3px; border-right: 1px solid rgba(255,255,255,.18); } .koloab-bulkbar__div { flex: none; width: 1px; align-self: stretch; margin: 1px 3px; background: rgba(255,255,255,.18); } .koloab-bulkbar__btn, .koloab-bulkbar__ghost { flex: none !important; display: inline-flex !important; align-items: center; gap: 7px; white-space: nowrap; min-width: 0 !important; font-family: inherit !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: 0 !important; padding: 7px 13px !important; border-radius: 9px !important; cursor: pointer; color: var(--klb-white) !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: none !important; transition: background .14s, border-color .14s; } .koloab-bulkbar__ghost { background: transparent !important; color: rgba(255,255,255,.85) !important; font-weight: 500 !important; } .koloab-bulkbar__btn:hover { background: rgba(255,255,255,.2) !important; } .koloab-bulkbar__ghost:hover { background: rgba(255,255,255,.16) !important; color: var(--klb-white) !important; } .koloab-bulkbar__btn svg, .koloab-bulkbar__ghost svg { flex-shrink: 0; } @media (max-width: 820px) { .koloab-bulkbar { bottom: calc(74px + env(safe-area-inset-bottom)); left: 12px; right: 12px; max-width: none; transform: translateY(14px); justify-content: flex-start; } .koloab-bulkbar.is-open { transform: translateY(0); } } /* folder tile (used in canvas grid alongside files) */ .koloab-tile { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--klb-white); border: 1px solid var(--klb-grey-100); border-radius: var(--klb-radius); cursor: pointer; text-align: left; transition: transform .2s, box-shadow .2s, border-color .2s; } .koloab-tile:hover { transform: translateY(-2px); border-color: var(--klb-navy); box-shadow: var(--klb-shadow); } .koloab-tile__icon { width: 44px; height: 44px; border-radius: 10px; background: var(--klb-folder); /* manila folder tile */ color: var(--klb-folder-ink); display: flex; align-items: center; justify-content: center; } .koloab-tile h4 { margin: 0; font-size: 14px; font-weight: 400; color: var(--klb-navy); } .koloab-tile span { font-size: 11px; color: var(--klb-grey-400); } /* ----- empty state ----- */ .koloab-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--klb-grey-500); gap: 14px; padding: 40px; } .koloab-empty__icon { color: var(--klb-grey); } .koloab-empty p { margin: 0; font-size: 14px; } /* ============================================================= CONTEXT MENU (right-click) ============================================================= */ .koloab-ctx { position: fixed; z-index: 9999; min-width: 220px; background: #ffffff; border: 1px solid var(--klb-grey-200); border-radius: 8px; box-shadow: 0 16px 40px -10px rgba(22,28,37,.22), 0 4px 8px -2px rgba(22,28,37,.10); padding: 6px; font-family: var(--klb-font); color: var(--klb-ink); animation: koloab-ctx-in .14s cubic-bezier(.2,.7,.3,1); transform-origin: top left; opacity: 1; } @keyframes koloab-ctx-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .koloab-ctx__item { display: flex !important; align-items: center; gap: 12px; width: 100% !important; padding: 10px 14px 10px 18px !important; font-size: 13px !important; font-weight: 500 !important; color: var(--klb-ink) !important; border-radius: 5px !important; border: 0 !important; background: transparent !important; text-align: left !important; min-width: 0 !important; line-height: 1.2 !important; transition: background .12s ease, color .12s ease, padding-left .12s ease !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; position: relative; } .koloab-ctx__item::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; background: var(--klb-red); border-radius: 0 2px 2px 0; transform: translateY(-50%); transition: height .15s ease; } .koloab-ctx__item:hover, .koloab-ctx__item:focus-visible { background: var(--klb-navy) !important; color: var(--klb-white) !important; padding-left: 22px !important; outline: 0; } .koloab-ctx__item:hover::before, .koloab-ctx__item:focus-visible::before { height: 60%; } .koloab-ctx__item span { flex: 1; } .koloab-ctx__sep { height: 1px; margin: 6px 8px; background: var(--klb-grey-100); } .koloab-ctx__item svg { color: var(--klb-grey-500); flex-shrink: 0; width: 14px; height: 14px; transition: color .12s ease, transform .12s ease; } .koloab-ctx__item:hover svg, .koloab-ctx__item:focus-visible svg { color: var(--klb-red); transform: scale(1.1); } /* ============================================================= PREVIEW DRAWER ============================================================= */ .koloab-drawer { position: fixed; inset: 0; top: var(--klb-wpbar, 0px); z-index: 100; } .koloab-drawer__overlay { position: absolute; inset: 0; background: rgba(22,28,37,.55); backdrop-filter: blur(2px); animation: koloab-fade .2s ease-out; } .koloab-drawer__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(460px, 92vw); background: var(--klb-white); display: flex; flex-direction: column; box-shadow: -20px 0 40px -10px rgba(0,0,0,.2); animation: koloab-slide .25s cubic-bezier(.2,.8,.2,1); } .koloab-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--klb-grey-100); } .koloab-drawer__head h3 { margin: 0; font-size: 15px; } .koloab-drawer__body { flex: 1; overflow-y: auto; padding: 22px; } .koloab-drawer__foot { display: flex; gap: 10px; flex-wrap: wrap; padding: 18px 22px; border-top: 1px solid var(--klb-grey-100); } .koloab-drawer__foot .koloab-btn { flex: 1; justify-content: center; white-space: nowrap; min-width: max-content !important; } .koloab-d-preview { background: var(--klb-grey-50); border-radius: var(--klb-radius); min-height: 220px; display: flex; align-items: center; justify-content: center; padding: 20px; margin-bottom: 18px; overflow: hidden; } .koloab-d-preview img { max-width: 100%; max-height: 320px; border-radius: 6px; box-shadow: var(--klb-shadow); } .koloab-d-preview__canvas { max-width: 100%; max-height: 320px; width: auto; height: auto; border-radius: 6px; box-shadow: var(--klb-shadow); background: var(--klb-white); } .koloab-d-preview__fallback { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--klb-grey-500); } .koloab-d-preview__fallback strong { font-family: var(--klb-mono); font-size: 28px; color: var(--klb-navy); } .koloab-d-info { display: flex; flex-direction: column; gap: 10px; } .koloab-d-info__row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px dashed var(--klb-grey-100); font-size: 13px; } .koloab-d-info__row span:first-child { color: var(--klb-grey-400); font-weight: 400; } .koloab-d-info__row span:last-child { color: var(--klb-ink); font-weight: 400; text-align: right; } .koloab-d-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .koloab-d-tag { font-size: 11px; padding: 4px 9px; background: var(--klb-grey-50); border: 1px solid var(--klb-grey-100); border-radius: 4px; color: var(--klb-grey-400); } @keyframes koloab-slide { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes koloab-fade { from { opacity: 0; } to { opacity: 1; } } /* ============================================================= FULL-SCREEN FILE PREVIEW (••• / right-click menu → Preview) A "proper" preview that mirrors the Command Centre: images, PDFs, video, audio and text render inline; anything else falls back to a download card. Left-click still opens the side drawer. ============================================================= */ .koloab-pv, .koloab-pv * { box-sizing: border-box; } .koloab-pv { position: fixed; inset: 0; top: var(--klb-wpbar, 0px); z-index: 150; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; } .koloab-pv__scrim { position: absolute; inset: 0; background: rgba(22,28,37,.62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s ease; } .koloab-pv.is-open .koloab-pv__scrim { opacity: 1; } .koloab-pv__box { position: relative; display: flex; flex-direction: column; width: min(1100px, 100%); height: min(88vh, 100%); background: var(--klb-white); border-radius: var(--klb-radius-lg); box-shadow: var(--klb-shadow-lg); overflow: hidden; transform: translateY(12px) scale(.98); opacity: 0; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease; } .koloab-pv.is-open .koloab-pv__box { transform: none; opacity: 1; } .koloab-pv__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--klb-grey-100); } .koloab-pv__ext { font-family: var(--klb-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; padding: 4px 9px; border-radius: 6px; background: var(--klb-navy); color: var(--klb-white); } /* font-family !important: .koloab-pv lives outside .koloab, so theme h3 rules reach the title. translateY: Comfortaa's glyphs sit high in the em box — nudge down so the title optically centres against the ext chip. */ .koloab-pv__title { margin: 0 !important; flex: 1; font-family: var(--klb-font) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; color: var(--klb-navy) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform: translateY(2px); } /* Locked square — the active theme's global `button`/`.button` rules (full-width, min-width, padding, line-height) would otherwise stretch it, so every box property is pinned with !important and the size is fixed on all four bounds. */ .koloab-pv__close { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; box-sizing: border-box !important; width: 36px !important; height: 36px !important; min-width: 36px !important; max-width: 36px !important; min-height: 36px !important; max-height: 36px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 8px !important; background: var(--klb-grey-50) !important; color: var(--klb-navy) !important; line-height: 1 !important; font-size: 0 !important; text-indent: 0 !important; cursor: pointer !important; box-shadow: none !important; text-transform: none !important; transition: background .14s, color .14s; } .koloab-pv__close:hover { background: var(--klb-red) !important; color: var(--klb-white) !important; transform: none !important; } .koloab-pv__close svg { width: 18px !important; height: 18px !important; display: block !important; } .koloab-pv__stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--klb-grey-50); overflow: auto; } .koloab-pv__img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .koloab-pv__frame { width: 100%; height: 100%; border: 0; background: var(--klb-white); } .koloab-pv__media { max-width: 100%; max-height: 100%; background: #000; } .koloab-pv__audiowrap { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 40px; } .koloab-pv__empty { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--klb-grey-500); padding: 40px; text-align: center; } /* spreadsheet preview (SheetJS). named koloab-xls, not koloab-sheet, because koloab-sheet is already the notice/staff bottom sheet. */ .koloab-pv__loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--klb-grey-500); font-size: 14px; } .koloab-pv__sheet { align-self: stretch; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; background: var(--klb-white); box-sizing: border-box; } .koloab-xls__tabs { display: flex; gap: 4px; padding: 8px 10px 0; overflow-x: auto; border-bottom: 1px solid var(--klb-grey-100); background: var(--klb-grey-50); flex: 0 0 auto; } .koloab-xls__tab { border: 1px solid transparent; border-bottom: 0; background: transparent; color: var(--klb-grey-500); font-size: 12.5px; font-weight: 500; padding: 7px 13px; border-radius: 7px 7px 0 0; white-space: nowrap; cursor: pointer; } .koloab-xls__tab:hover { color: var(--klb-navy); } .koloab-xls__tab.is-on { background: var(--klb-white); border-color: var(--klb-grey-100); color: var(--klb-navy); } .koloab-xls__body { flex: 1; min-height: 0; display: flex; flex-direction: column; } .koloab-xls__scroll { flex: 1; min-height: 0; overflow: auto; } .koloab-xls__table { border-collapse: collapse; font-size: 13px; color: var(--klb-navy); } .koloab-xls__table th, .koloab-xls__table td { border: 1px solid var(--klb-grey-100); padding: 6px 10px; text-align: left; white-space: nowrap; max-width: 340px; overflow: hidden; text-overflow: ellipsis; } .koloab-xls__table thead th { position: sticky; top: 0; z-index: 1; background: var(--klb-grey-50); font-weight: 600; } .koloab-xls__table tbody tr:nth-child(even) { background: rgba(16, 20, 27, .022); } .koloab-xls__more, .koloab-xls__none { margin: 0; padding: 10px 14px; font-size: 12.5px; color: var(--klb-grey-500); border-top: 1px solid var(--klb-grey-100); } .koloab-pv__bigico { font-family: var(--klb-mono); font-size: 34px; font-weight: 700; color: var(--klb-navy); letter-spacing: .04em; } .koloab-pv__foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--klb-grey-100); } .koloab-pv__meta { font-size: 12.5px; color: var(--klb-grey-500); } .koloab-pv__spacer { flex: 1; } .koloab-pv__btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--klb-radius-sm); border: 1px solid var(--klb-grey); background: var(--klb-white); color: var(--klb-navy); font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; transition: border-color .14s, background .14s, transform .14s, box-shadow .14s; } .koloab-pv__btn:hover { border-color: var(--klb-navy); background: var(--klb-grey-50); } .koloab-pv__btn svg { width: 15px; height: 15px; } .koloab-pv__btn--primary { background: var(--klb-navy); color: var(--klb-white); border-color: var(--klb-navy); } .koloab-pv__btn--primary:hover { background: var(--klb-red); border-color: var(--klb-red); color: var(--klb-white); transform: translateY(-1px); box-shadow: var(--klb-shadow); } html.koloab-pv-open, html.koloab-pv-open body { overflow: hidden; } /* Mobile: a near-fullscreen sheet so PDFs/images get all the room they can. */ @media (max-width: 820px) { /* anchor the sheet to the top and size it with dvh — height:100% of a fixed inset:0 parent includes the area behind the mobile browser's collapsing URL bar, which pushed the footer (Download / Open in new tab) off-screen whenever the toolbar was visible. dvh tracks the *visible* viewport. */ .koloab-pv { padding: 0; align-items: flex-start; } .koloab-pv__box { width: 100%; height: 100%; /* fallback for browsers without dvh */ height: calc(100dvh - var(--klb-wpbar, 0px)); border-radius: 0; } .koloab-pv__head { padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); } .koloab-pv__title { font-size: 15px; } .koloab-pv__foot { flex-wrap: wrap; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); } .koloab-pv__meta { width: 100%; } .koloab-pv__spacer { display: none; } .koloab-pv__btn { flex: 1; justify-content: center; min-height: 44px; } } /* ============================================================= TOAST ============================================================= */ .koloab-toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--klb-navy); color: var(--klb-white); font-size: 13px; font-weight: 400; padding: 12px 20px; border-radius: 8px; box-shadow: var(--klb-shadow-lg); z-index: 999; transition: transform .3s ease, opacity .3s ease; opacity: 0; pointer-events: none; border-bottom: 2px solid var(--klb-red); } .koloab-toast.is-visible { transform: translateX(-50%) translateY(0); opacity: 1; } .koloab-picking .koloab-toast { bottom: 92px; } @media (max-width: 820px) { .koloab-picking .koloab-toast { bottom: calc(146px + env(safe-area-inset-bottom)); } } /* ============================================================= SEARCH RESULTS PANEL (overlay below hero / compact bar) ============================================================= */ .koloab-search-panel { position: absolute; left: 0; right: 0; top: calc(100% + 12px); background: var(--klb-white); border-radius: var(--klb-radius); border: 1px solid var(--klb-grey-100); box-shadow: 0 30px 60px -20px rgba(0,0,0,.45), 0 8px 20px -8px rgba(0,0,0,.20); /* Cap at ~5 rows, scroll inside. Row is ~52px + headings. Never infinite lists. */ max-height: 300px; overflow-y: auto; overscroll-behavior: contain; z-index: 100; animation: koloab-pop .15s ease-out; } .koloab-search-panel__section { padding: 8px 0; } .koloab-search-panel__head { padding: 10px 16px 6px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--klb-grey-500); font-weight: 500; } .koloab-search-result { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; text-align: left; transition: background .1s; } .koloab-search-result:hover { background: var(--klb-grey-50); } .koloab-search-result__icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 6px; background: var(--klb-grey-50); display: flex; align-items: center; justify-content: center; color: var(--klb-navy); font-family: var(--klb-mono); font-size: 10px; font-weight: 500; background-size: cover; background-position: center; } .koloab-search-result__name { font-weight: 400; font-size: 13px; color: var(--klb-navy); display: block; } .koloab-search-result__path { font-size: 11px; color: var(--klb-grey-400); } /* ============================================================= CARD "more" button (touch-friendly access to context menu) ============================================================= */ .koloab-card { position: relative; cursor: pointer; } .koloab-card__more { position: absolute; top: 8px !important; right: 8px !important; width: 28px !important; height: 28px !important; min-width: 28px !important; max-width: 28px !important; padding: 0 !important; border-radius: 50% !important; background: var(--klb-white) !important; color: var(--klb-navy) !important; border: 1px solid var(--klb-grey-200) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 6px -2px rgba(22,28,37,.18) !important; opacity: 1 !important; transition: background .15s, color .15s, border-color .15s, transform .15s !important; z-index: 3; cursor: pointer; flex-shrink: 0; } .koloab-card__more svg { display: block; color: var(--klb-navy) !important; fill: var(--klb-navy) !important; width: 14px; height: 14px; } .koloab-card__more:hover { background: var(--klb-navy) !important; color: var(--klb-white) !important; border-color: var(--klb-navy) !important; transform: scale(1.08); } .koloab-card__more:hover svg { color: var(--klb-white) !important; fill: var(--klb-white) !important; } /* sidebar toggle — hidden on desktop, visible <= 820px */ .koloab-sidebar-toggle { /* hidden on desktop (folder sidebar is always visible there); shown on mobile as a labelled "Folders" button that opens the slide-in drawer */ display: none; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 8px; background: var(--klb-grey-50); border: 1px solid var(--klb-grey-100); color: var(--klb-navy); font-size: 13px; font-weight: 500; transition: background .12s, border-color .12s; } .koloab-sidebar-toggle:hover { background: var(--klb-white); border-color: var(--klb-navy); } .koloab-sidebar-toggle svg { flex-shrink: 0; } /* Back button — sits to the left of the folders toggle, both views */ .koloab-back { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; margin-left: -6px; border-radius: 8px; background: var(--klb-grey-50); border: 1px solid var(--klb-grey-100); color: var(--klb-navy); font-size: 13px; font-weight: 500; transition: background .12s, border-color .12s, opacity .12s; } .koloab-back:hover { background: var(--klb-white); border-color: var(--klb-navy); } .koloab-back svg { flex-shrink: 0; transition: transform .2s ease; } .koloab-back:hover svg { transform: translateX(-2px); } /* animated underline grows left→right on hover for a touch of polish */ .koloab-back span { background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1.5px; padding-bottom: 2px; transition: background-size .25s ease; } .koloab-back:hover span { background-size: 100% 1.5px; } /* at the library root, Back returns to the dashboard — soften it slightly */ .koloab-back.is-root { opacity: .65; } /* ============================================================= CUSTOM MODAL — replaces native confirm/alert ============================================================= */ .koloab-modal { position: fixed; inset: 0; top: var(--klb-wpbar, 0px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; } /* `hidden` attribute fix — display:flex above otherwise wins over user-agent rules */ .koloab-modal[hidden], .koloab-drawer[hidden], .koloab-toast[hidden], [hidden] { display: none !important; } .koloab-modal__overlay { position: absolute; inset: 0; background: rgba(22,28,37,.55); backdrop-filter: blur(3px); animation: koloab-fade .18s ease-out; } .koloab-modal__panel { position: relative; width: min(400px, 100%); background: var(--klb-white); border-radius: var(--klb-radius); padding: 32px 28px 28px; box-shadow: var(--klb-shadow-lg); text-align: center; animation: koloab-pop .18s ease-out; } /* red accent reserved for genuinely destructive confirms only */ .koloab-modal[data-danger="1"] .koloab-modal__panel { border-top: 3px solid var(--klb-red); } .koloab-modal__icon { width: 46px; height: 46px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--klb-grey-50); color: var(--klb-navy); } .koloab-modal__icon.is-danger { background: rgba(235,51,50,.10); color: #c8211f; } /* semantic danger red, not brand accent */ /* !important — theme heading/paragraph rules otherwise add stray margins */ /* scoped past the .koloab h1-h4 margin reset, which outranks a bare class */ .koloab-modal .koloab-modal__title { margin: 0 0 14px !important; font-size: 19px; font-weight: 500; line-height: 1.3; color: var(--klb-navy); } .koloab-modal__body { margin: 0 auto 26px !important; max-width: 36ch; color: var(--klb-grey-400); font-size: 14px; line-height: 1.55; white-space: pre-line; } .koloab-modal__actions { display: flex; gap: 12px; justify-content: center; } .koloab-modal__actions .koloab-btn { flex: 1; justify-content: center; } .koloab-modal[data-mode="alert"] .koloab-modal__actions [data-koloab-modal-cancel] { display: none !important; } /* ============================================================= MOBILE / TABLET — sales-on-the-road first ============================================================= */ /* tablet */ @media (max-width: 1024px) { .koloab-bar__inner { gap: 16px; } .koloab-bar__label { display: none; } .koloab-browser__body { grid-template-columns: 220px 1fr; } .koloab-folder-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } } /* mobile breakpoint */ @media (max-width: 820px) { .koloab-bar__inner { padding: 0 14px; gap: 10px; height: 56px; } .koloab-bar__nav { display: none; } .koloab-bar__brand { gap: 8px; } .koloab-bar__avatar { width: 34px; height: 34px; font-size: 11px; margin-left: auto; } .koloab-dash__inner { padding: 40px 16px 32px; } .koloab-dash__title { font-size: clamp(1.6rem, 7vw, 2.2rem); } .koloab-dash__tag { margin-bottom: 22px !important; font-size: 14px !important; } /* hero search — slim down for mobile, keep prominence */ .koloab-hero-search { padding: 6px 12px 6px 46px !important; } .koloab-hero-search__icon { width: 18px; height: 18px; left: 16px; } .koloab-hero-search input { font-size: 15px !important; height: 46px !important; } .koloab-hero-search__hint { display: none; } /* no slash key on mobile */ .koloab-quicklinks { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 24px; } .koloab-quicklink { padding: 14px; } .koloab-quicklink__name { font-size: 13px; } .koloab-quicklink__desc { font-size: 11px; } .koloab-quicklink__icon { width: 34px; height: 34px; } .koloab-notices__inner, .koloab-cards__inner { padding: 0 16px; } .koloab-notices__grid, .koloab-folder-grid, .koloab-strip { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .koloab-folder { padding: 16px 16px 14px; } .koloab-folder__icon { width: 38px; height: 38px; } .koloab-folder__name { font-size: 14px; } .koloab-folder__desc { display: none; } /* tighter cards on mobile */ /* browser becomes single-column with slide-in sidebar. ALWAYS exactly two rows: row 1 = Menu · Back · Breadcrumbs (scroll), row 2 = Search ........ Views. Tighter column gap on row 1. */ .koloab-browser__chrome { padding: 10px 14px; column-gap: 7px; row-gap: 10px; top: calc(56px + var(--klb-wpbar, 0px)); } /* Folders menu: icon only on mobile (label stripped), kept prominent navy */ .koloab-sidebar-toggle { display: inline-flex; order: 1; padding: 0 11px; background: var(--klb-navy); border-color: var(--klb-navy); color: var(--klb-white); } .koloab-sidebar-toggle:hover { background: var(--klb-navy); color: var(--klb-white); } .koloab-sidebar-toggle span { display: none; } /* Back stays compact (icon-only) on mobile to leave room for the controls */ .koloab-back span { display: none; } .koloab-back { order: 2; padding: 0 11px; margin-left: 0; } /* flex-basis 0 keeps the breadcrumbs on row 1 (they scroll horizontally inside their box) instead of wrapping onto a third line when long */ .koloab-crumbs { order: 3; flex: 1 1 0; width: auto; min-width: 0; font-size: 12px; } /* tight on space — folder tiles show just the file count, not subfolders */ .koloab-tile__sub { display: none; } .koloab-explorer-tools { display: flex; order: 4; width: 100%; align-items: center; gap: 10px; } .koloab-compact-search { flex: 1 1 auto; min-width: 0; } .koloab-compact-search kbd { display: none; } .koloab-viewtoggle { flex-shrink: 0; } .koloab-browser__body { grid-template-columns: 1fr; position: relative; } .koloab-sidebar { position: fixed; left: 0; top: var(--klb-wpbar, 0px); bottom: 0; width: 280px; max-width: 84vw; z-index: 90; transform: translateX(-100%); transition: transform .25s cubic-bezier(.2,.8,.2,1); border-right: 1px solid var(--klb-grey-100); padding: 20px 16px; overflow-y: auto; background: var(--klb-white); box-shadow: 12px 0 30px -10px rgba(0,0,0,.2); } .koloab-sidebar.is-open { transform: translateX(0); } .koloab-sidebar-scrim { position: fixed; inset: 0; background: rgba(22,28,37,.5); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .2s; } .koloab-sidebar-scrim.is-open { opacity: 1; pointer-events: auto; } .koloab-canvas { padding: 14px; min-height: 50vh; } .koloab-results.is-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } /* list view on mobile: drop date column, condense */ .koloab-row { grid-template-columns: 32px 1fr 70px; gap: 10px; padding: 12px 10px; } .koloab-row > div:nth-child(4), .koloab-row > div:nth-child(5) { display: none; } /* preview drawer becomes a bottom sheet on mobile */ /* size the fixed container with dvh so the sheet's footer (Share/Download) sits above the browser's collapsing URL bar, not behind it */ @supports (height: 100dvh) { .koloab-drawer { bottom: auto; height: calc(100dvh - var(--klb-wpbar, 0px)); } } .koloab-drawer__panel { left: 0; right: 0; top: auto; width: 100%; max-height: 88vh; border-radius: 18px 18px 0 0; animation: koloab-sheet .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -20px 40px -10px rgba(0,0,0,.25); } .koloab-drawer__panel::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; background: var(--klb-grey-200); border-radius: 2px; } .koloab-drawer__head { padding: 22px 18px 14px; } .koloab-drawer__body { padding: 16px 18px; } .koloab-drawer__foot { padding: 14px 18px; } .koloab-d-preview img { max-height: 240px; } /* "more" button always visible on touch */ .koloab-card__more { opacity: 1; } /* context menu: still works via long-press, sized for touch */ .koloab-ctx { min-width: 240px; padding: 8px; border-radius: 14px; } .koloab-ctx__item { padding: 13px 14px; font-size: 14px; } .koloab-ctx__item kbd { display: none; } .koloab-section-head h2 { font-size: 1.2rem; } .koloab-section-head--spaced { margin-top: 36px; } /* login: single column, stack aside on top */ .koloab--login { margin: 20px 12px; border-radius: 14px; min-height: auto; } .koloab-login__aside { padding: 36px 28px; order: -1; } .koloab-login__panel { padding: 36px 28px; } /* modal — full-bleed on mobile */ .koloab-modal__panel { padding: 28px 22px 24px; } } @keyframes koloab-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } } /* prevent iOS body scroll when sidebar/drawer open */ .koloab--app.is-locked { overflow: hidden; height: 100vh; } /* hover/touch-friendly tap targets in general */ @media (hover: none) { .koloab-card__more { opacity: 1; } .koloab-hero-search__hint { display: none; } .koloab-compact-search kbd { display: none; } .koloab-staffcard__quick { opacity: 1; transform: none; } } /* ============================================================= MOBILE BOTTOM TAB NAV — replaces hidden top-bar section nav visible only ≤820px, follows iOS/Android tab-bar convention ============================================================= */ .koloab-mobnav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--klb-white); border-top: 1px solid var(--klb-grey-100); box-shadow: 0 -8px 24px -10px rgba(22,28,37,.12); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); } .koloab-mobnav__btn { flex: 1; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px !important; background: transparent !important; color: var(--klb-grey-500) !important; border: 0 !important; min-width: 0 !important; min-height: 52px !important; text-transform: none !important; letter-spacing: 0 !important; transition: color .15s !important; border-radius: 8px !important; position: relative; } .koloab-mobnav__btn svg { color: inherit; stroke: currentColor; } .koloab-mobnav__btn span { font-size: 10px; font-weight: 500; letter-spacing: .02em; } .koloab-mobnav__btn::before { content: ''; position: absolute; top: 3px; left: 50%; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: transparent; transform: translateX(-50%); transition: background .15s; } .koloab-mobnav__btn.is-active { color: var(--klb-navy) !important; } .koloab-mobnav__btn.is-active::before { background: var(--klb-red); } .koloab-mobnav__btn:active { background: var(--klb-grey-50) !important; } @media (max-width: 820px) { .koloab-mobnav { display: flex; } /* leave bottom space so content isn't covered by the fixed tab bar. the wrapper is the page scroll box, so its padding sits below the last visible section. (selector must be .koloab--app — double dash.) */ .koloab--app { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } /* sheet drawers must clear the tab bar */ .koloab-toast { bottom: calc(84px + env(safe-area-inset-bottom)); } } /* ============================================================= MOBILE: refined sizing, spacing, touch targets ============================================================= */ @media (max-width: 820px) { /* top bar gets safe-area for iPhone notch + a touch more height */ .koloab-bar { padding-top: env(safe-area-inset-top); } .koloab-bar__inner { height: 60px; } /* tickertape: tighter, icon-only flag */ .koloab-ticker { min-height: 38px; } .koloab-ticker:not(.is-live) { min-height: 0; } .koloab-ticker__viewport { padding: 11px 0; } .koloab-ticker__flag { padding: 0 12px !important; } .koloab-ticker__flag-label { display: none; } .koloab-ticker__item { font-size: 12.5px !important; margin-right: 48px !important; } /* notice board: stack the first 3 only — "See all notices" carries the rest */ .koloab-notices__row { flex-direction: column; overflow: visible; gap: 14px; padding-bottom: 0; } .koloab-notices__row .koloab-notice { flex: none; min-width: 0; } .koloab-notices__row .koloab-notice:nth-child(n+4) { display: none; } .koloab-notices__arrow { display: none !important; } .koloab-notices__scroller::before, .koloab-notices__scroller::after { display: none; } .koloab-notices__seemore .koloab-btn { width: 100%; justify-content: center; } /* avatar bigger touch target */ .koloab-bar__avatar { width: 44px !important; height: 44px !important; min-width: 44px !important; } /* with the top nav hidden on mobile, push the user button to the right edge */ .koloab-bar__user { margin-left: auto !important; } /* hero: tighter top padding now that there's no chrome above */ .koloab-dash__inner { padding: 32px 18px 56px; } .koloab-dash__title { max-width: none; } .koloab-dash__eyebrow { font-size: 10px; margin-bottom: 14px; } /* hero search — generous, easy to tap */ .koloab-hero-search { padding: 8px 14px 8px 48px !important; border-radius: 14px !important; } .koloab-hero-search__icon { left: 17px; } .koloab-hero-search input { font-size: 16px !important; height: 48px !important; min-height: 48px !important; } /* Mobile: slide quicklinks down by --klb-search-h (JS measured) or fallback to 46vh capped at 300px. Same behavior as desktop, just sized to viewport. */ .koloab-dash.is-searching .koloab-quicklinks { margin-top: calc(var(--klb-search-h, min(46vh, 300px)) + 28px); } .koloab-search-panel { max-height: min(46vh, 300px); border-radius: 12px; } /* quicklinks: 2 cols on phone, 1 col on really small */ .koloab-quicklinks { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; } .koloab-quicklink { padding: 16px 14px 14px !important; min-height: 88px; } .koloab-quicklink__icon { width: 36px; height: 36px; } .koloab-quicklink__name { font-size: 13px; } .koloab-quicklink__desc { font-size: 11px; line-height: 1.3; } @media (max-width: 380px) { .koloab-quicklinks { grid-template-columns: 1fr; } } /* folder grid: 1 col on small phones, 2 cols on bigger */ .koloab-folder-grid { grid-template-columns: 1fr; gap: 12px; } @media (min-width: 481px) { .koloab-folder-grid { grid-template-columns: repeat(2, 1fr); } } .koloab-folder { padding: 18px !important; } /* notices / news grid: 1 col on phone */ .koloab-notices__grid, .koloab-news__feed { grid-template-columns: 1fr !important; gap: 14px; } .koloab-newsitem.is-lead { grid-row: auto; } /* directory: 2 cols default, 1 col on tiny */ .koloab-dirgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 360px) { .koloab-dirgrid { grid-template-columns: 1fr; } } .koloab-dirfilter { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 12px; scrollbar-width: none; } .koloab-dirfilter::-webkit-scrollbar { display: none; } .koloab-dirfilter__chip { flex-shrink: 0; min-height: 36px; } /* file explorer chrome: stack on mobile so search has full width */ .koloab-browser__chrome { column-gap: 7px; row-gap: 10px; padding: 12px 14px; flex-wrap: wrap; } .koloab-sidebar-toggle { height: 44px !important; min-height: 44px; padding: 0 14px !important; flex-shrink: 0; } .koloab-sidebar-toggle svg { width: 22px !important; height: 22px !important; stroke-width: 2.2 !important; } .koloab-back { height: 44px !important; min-height: 44px; flex-shrink: 0; } .koloab-back svg { width: 22px !important; height: 22px !important; stroke-width: 2.2 !important; } /* "Library" eyebrow in the slide-in sidebar needs proper padding on mobile */ .koloab-sidebar__head { padding: 8px 14px 18px !important; } .koloab-compact-search { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 18px 10px 20px; } .koloab-compact-search input { height: 24px !important; font-size: 16px !important; } .koloab-crumbs { order: 3; width: auto; flex: 1 1 0; min-width: 0; font-size: 12px; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .koloab-crumbs::-webkit-scrollbar { display: none; } .koloab-crumb { flex-shrink: 0; min-height: 32px; display: inline-flex; align-items: center; } .koloab-viewtoggle { flex-shrink: 0; } .koloab-viewtoggle button { width: 36px !important; height: 32px !important; min-width: 36px !important; } /* sidebar slide-in: full-height + safe-area */ .koloab-sidebar { padding-top: calc(20px + env(safe-area-inset-top)); padding-bottom: calc(20px + env(safe-area-inset-bottom)); } .koloab-sidebar__item { padding: 12px !important; min-height: 44px; } /* card grid: comfortable phone sizing */ .koloab-results.is-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 380px) { .koloab-results.is-grid { grid-template-columns: 1fr; } } .koloab-canvas { padding: 14px; } /* list rows: bigger tap area */ .koloab-row { padding: 14px 12px; min-height: 56px; grid-template-columns: 36px 1fr auto; gap: 12px; } .koloab-row__icon { width: 36px; height: 36px; } /* "more" button on cards: keep small but more prominent */ .koloab-card__more { top: 8px !important; right: 8px !important; width: 32px !important; height: 32px !important; min-width: 32px !important; max-width: 32px !important; } /* sheets / drawers: bottom sheet style with grip handle + safe-area */ .koloab-drawer__panel { left: 0; right: 0; top: auto; width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: koloab-sheet .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -20px 50px -10px rgba(0,0,0,.30); } .koloab-drawer__panel::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 44px; height: 5px; background: var(--klb-grey-200); border-radius: 3px; z-index: 5; } /* sheet close button bigger on mobile */ .koloab-sheet__close { width: 44px !important; height: 44px !important; min-width: 44px !important; margin-bottom: -62px; } /* article modal: take more screen on mobile */ .koloab-sheet { padding: 16px; } .koloab-sheet .koloab-sheet__panel { max-height: calc(100vh - 32px); border-radius: 16px; } .koloab-sheet .koloab-noticesheet__head { padding: 24px 20px 12px; } .koloab-sheet .koloab-noticesheet__head h2 { font-size: 22px !important; padding-right: 50px; } .koloab-sheet .koloab-noticesheet__body { padding: 8px 20px 28px; font-size: 15px; } /* context menu: bottom-sheet style on touch, full-width minus padding */ .koloab-ctx.is-mobile { position: fixed !important; left: 12px !important; right: 12px !important; bottom: calc(80px + env(safe-area-inset-bottom)) !important; top: auto !important; min-width: 0 !important; max-width: none !important; padding: 8px !important; border-radius: 14px !important; box-shadow: 0 -16px 40px -8px rgba(22,28,37,.30) !important; animation: koloab-sheet .22s cubic-bezier(.2,.8,.2,1) !important; } .koloab-ctx.is-mobile .koloab-ctx__item { padding: 14px 16px !important; font-size: 15px !important; min-height: 48px; } .koloab-ctx.is-mobile .koloab-ctx__item svg { width: 18px; height: 18px; } /* tighter section padding on phone */ .koloab-notices, .koloab-news, .koloab-cards, .koloab-directory { padding: 36px 0; } .koloab-notices__inner, .koloab-news__inner, .koloab-cards__inner, .koloab-directory__inner { padding: 0 16px; } .koloab-section-head h2 { font-size: 1.15rem !important; } .koloab-section-head { margin-bottom: 20px; gap: 12px; } /* parallax off on mobile (battery + jank) */ .koloab-dash { background-position: center !important; } /* modal: tighter on mobile */ .koloab-modal__panel { padding: 26px 20px 22px; } .koloab-modal__title { font-size: 17px !important; } } /* very small phones — drop densities further */ @media (max-width: 380px) { .koloab-bar__brand .koloab-bar__logo { height: 22px !important; max-width: 90px !important; } .koloab-dash__inner { padding: 28px 14px 48px; } .koloab-quicklinks { gap: 8px; } .koloab-canvas { padding: 12px; } } /* iOS viewport unit fix — env(safe-area) used throughout for notch/home-indicator */ @supports (padding: max(0px)) { .koloab-bar__inner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } } /* Download-restricted files: dimmed, with a padlock. The lock is a badge on the card and an inline mark on rows and search hits. */ .koloab-card.is-locked, .koloab-row.is-locked, .koloab-search-result.is-locked { opacity: .55; } .koloab-card.is-locked:hover { opacity: .72; } .koloab-card__lock { position: absolute; top: 8px; left: 8px; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--klb-navy, #111); color: #fff; box-shadow: 0 2px 6px -2px rgba(22, 28, 37, .28); z-index: 3; pointer-events: none; } .koloab-card__lock svg { width: 13px; height: 13px; display: block; } .koloab-card__lock { transition: left .15s; } .koloab-picking .koloab-card__lock { left: 38px; } .koloab-row__lock, .koloab-search-result__lock { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--klb-navy, #111); opacity: .85; } .koloab-row__lock svg, .koloab-search-result__lock svg { width: 12px; height: 12px; display: block; } .koloab-ctx__item.is-disabled, .koloab-btn.is-disabled, .koloab-pv__btn.is-disabled { opacity: .45; cursor: not-allowed; } .koloab-btn.is-disabled:hover, .koloab-pv__btn.is-disabled:hover { transform: none; box-shadow: none; } @keyframes koloab-badge-in { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } } .koloab-bar__nav-btn { position: relative; } .koloab-mobnav__btn { position: relative; } /* the bell sits alongside the avatar, so the two buttons need a row to sit in */ .koloab-bar__user { display: flex; align-items: center; gap: 2px; } .koloab-bar__bell { position: relative; width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 50% !important; background: transparent !important; color: rgba(255,255,255,.78) !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 0 !important; padding: 0 !important; transition: color .15s, background .15s !important; } .koloab-bar__bell svg { color: inherit; display: block; } .koloab-bar__bell:hover { color: var(--klb-white) !important; background: rgba(255,255,255,.08) !important; } .koloab-bar__bell[aria-expanded="true"] { color: var(--klb-white) !important; background: rgba(255,255,255,.12) !important; } .koloab-bar__belldot { position: absolute; top: -1px; right: -1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--klb-red, #c8211f); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; letter-spacing: 0; pointer-events: none; animation: koloab-badge-in .28s cubic-bezier(.34, 1.56, .64, 1); } .koloab-bar__panel { position: absolute; right: 0; top: calc(100% + 14px); width: 340px; max-width: calc(100vw - 24px); background: var(--klb-white); border: 1px solid var(--klb-grey-100); border-radius: var(--klb-radius); box-shadow: var(--klb-shadow-lg); color: var(--klb-ink); overflow: hidden; z-index: 60; animation: koloab-pop .18s ease-out; } .koloab-bar__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--klb-grey-100); } .koloab-bar__panel-head strong { font-size: 14px; font-weight: 500; } .koloab-bar__panel-clear { background: transparent; border: 0; padding: 0; font-size: 12px; color: var(--klb-grey-500); cursor: pointer; transition: color .12s; } .koloab-bar__panel-clear:hover { color: var(--klb-red, #c8211f); } .koloab-bar__panel-list { max-height: min(58vh, 400px); overflow-y: auto; } .koloab-bar__panel-empty { margin: 0; padding: 22px 16px; font-size: 13px; color: var(--klb-grey-500); text-align: center; } .koloab-bar__panel-row { display: flex; align-items: flex-start; gap: 11px; width: 100%; padding: 11px 16px; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--klb-grey-50); color: var(--klb-ink); cursor: pointer; transition: background .12s; } .koloab-bar__panel-row:hover { background: var(--klb-grey-50); } .koloab-bar__panel-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--klb-grey-50); color: var(--klb-navy); } .koloab-bar__panel-text { display: block; min-width: 0; } .koloab-bar__panel-title { display: block; font-size: 13px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .koloab-bar__panel-time { display: block; margin-top: 2px; font-size: 11px; color: var(--klb-grey-400); } .koloab-bar__panel-foot { display: block; width: 100%; padding: 11px 16px; background: var(--klb-grey-50); border: 0; border-top: 1px solid var(--klb-grey-100); font-size: 12.5px; font-weight: 500; color: var(--klb-navy); text-align: center; cursor: pointer; transition: background .12s, color .12s; } .koloab-bar__panel-foot:hover { background: var(--klb-white); color: var(--klb-red, #c8211f); } .koloab-recent-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 8px; background: var(--klb-grey-50); border: 1px solid var(--klb-grey-100); color: var(--klb-navy); font-size: 13px; font-weight: 500; transition: background .12s, border-color .12s; } .koloab-recent-btn:hover { background: var(--klb-white); border-color: var(--klb-navy); } .koloab-recent-btn svg { flex-shrink: 0; } .koloab-loadmore { grid-column: 1 / -1; margin: 18px auto 4px; padding: 0 22px; height: 38px; border-radius: 8px; background: var(--klb-grey-50); border: 1px solid var(--klb-grey-100); color: var(--klb-navy); font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s; } .koloab-loadmore:hover { background: var(--klb-white); border-color: var(--klb-navy); } .koloab-loadmore[disabled] { opacity: .55; cursor: default; } /* the avatar goes up to 44 on mobile for the touch target, so the bell matches rather than shrinking */ @media (max-width: 820px) { .koloab-bar__bell { width: 44px !important; height: 44px !important; min-width: 44px !important; } .koloab-bar__user { gap: 0; margin-left: auto !important; } .koloab-recent-btn span { display: none; } .koloab-recent-btn { padding: 0 11px; } } @media (prefers-reduced-motion: reduce) { .koloab-bar__belldot { animation: none; } .koloab-bar__panel { animation: none; } } .koloab-modal__input { width: 100%; margin-top: 14px; padding: 11px 13px; border: 1.5px solid var(--klb-grey-200, #dfe2e6); border-radius: var(--klb-radius-sm, 8px); font: inherit; font-size: 15px; background: #fff; color: var(--klb-ink, #11151c); } .koloab-modal__input:focus { outline: none; border-color: var(--klb-red, #c8211f); } /* ---- POLICIES: read-only document tab + reader ---- */ .koloab-pol { --pol-paper: #f4f6f8; --pol-panel: #ffffff; --pol-rule: #e3e7ec; --pol-quiet: #6d737c; background: var(--pol-paper); min-height: 78vh; padding-bottom: 72px; } .koloab-pol__masthead { background: linear-gradient(180deg, var(--klb-navy, #2c3440) 0%, var(--klb-navy-700, #232a35) 100%); color: var(--klb-white, #fff); padding: clamp(30px, 4.2vw, 52px) clamp(18px, 4vw, 44px) clamp(26px, 3vw, 36px); display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; position: relative; } .koloab-pol__masthead::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--klb-red); } .koloab-pol__ident { min-width: 0; flex: 1 1 380px; } .koloab-pol__seal { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border: 1px solid rgba(235, 51, 50, .55); border-radius: 999px; background: rgba(235, 51, 50, .12); color: #ffb3b2; font-size: 10.5px !important; font-weight: 600 !important; letter-spacing: .16em !important; text-transform: uppercase; line-height: 1; } .koloab-pol__seal svg { flex: none; } .koloab .koloab-pol__masthead h2.koloab-pol__title { margin: 16px 0 10px !important; color: #ffffff !important; font-size: clamp(1.9rem, 3.6vw, 2.7rem) !important; font-weight: 600 !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .22); } .koloab .koloab-pol__masthead .koloab-pol__sub { margin: 0 !important; color: rgba(255, 255, 255, .74) !important; font-size: 14px; line-height: 1.55; max-width: 52ch; } .koloab-pol__search { position: relative; display: flex; align-items: center; gap: 13px; flex: 0 1 480px; min-width: 300px; padding: 5px 10px 5px 15px !important; border-radius: 42px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; } .koloab-pol__search:focus-within { background: rgba(255, 255, 255, .15); border-color: rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 3px rgba(255, 255, 255, .08); } .koloab-pol__search > svg { color: rgba(255, 255, 255, .6); flex: none; } .koloab-pol__search input { flex: 1 !important; min-width: 0 !important; width: auto !important; height: 32px !important; min-height: 32px !important; border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; color: var(--klb-white) !important; font-size: 15px !important; font-family: var(--klb-font); } .koloab-pol__search input::placeholder { color: rgba(255, 255, 255, .45) !important; opacity: 1; } .koloab-pol__searchclear { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 24px !important; height: 24px !important; min-width: 24px !important; max-width: 24px !important; min-height: 24px !important; max-height: 24px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .14) !important; color: var(--klb-white) !important; line-height: 1 !important; font-size: 0 !important; transition: background .14s ease; } .koloab-pol__searchclear::before, .koloab-pol__searchclear::after { content: none !important; display: none !important; } .koloab-pol__searchclear:hover { background: var(--klb-red) !important; } .koloab-pol__searchclear svg { display: block !important; width: 15px !important; height: 15px !important; margin: 0 !important; flex: none !important; } .koloab-pol__crumbbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 11px clamp(18px, 4vw, 44px); background: var(--pol-panel); border-bottom: 1px solid var(--pol-rule); position: sticky; top: calc(64px + var(--klb-wpbar, 0px)); z-index: 10; } .koloab-pol__back { display: inline-flex !important; align-items: center; gap: 8px; padding: 6px 13px 6px 10px !important; border: 1px solid var(--klb-grey-200) !important; border-radius: 7px !important; background: var(--pol-paper) !important; color: var(--klb-navy) !important; font-size: 12.5px !important; font-weight: 500 !important; transition: border-color .14s, background .14s; } .koloab-pol__back:hover { border-color: var(--klb-navy) !important; background: var(--pol-panel) !important; } .koloab-pol__back svg { flex: none; transition: transform .18s ease; } .koloab-pol__back:hover svg { transform: translateX(-2px); } .koloab-pol__crumbs { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; min-width: 0; } .koloab-pol__crumb { padding: 5px 9px !important; border-radius: 6px !important; font-size: 12.5px !important; font-weight: 400 !important; color: var(--pol-quiet) !important; transition: color .14s, background .14s; } .koloab-pol__crumb:not(.is-current):hover { color: var(--klb-red-700) !important; background: var(--pol-paper) !important; } .koloab-pol__crumb.is-current { color: var(--klb-navy) !important; font-weight: 600 !important; cursor: default; } .koloab-pol__crumbsep { color: var(--klb-grey); font-size: 11px; flex: none; } .koloab-pol__canvas { max-width: 1000px; margin: 0 auto; padding: clamp(22px, 3vw, 34px) clamp(16px, 4vw, 28px) 0; position: relative; min-height: 46vh; } .koloab-pol__group { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pol-quiet); padding: 0 4px 10px; margin-top: 26px; } .koloab-pol__group:first-child { margin-top: 0; } .koloab-pol__results { display: flex; flex-direction: column; gap: 8px; } .koloab-polrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; width: 100%; padding: 14px 18px !important; text-align: left; background: var(--pol-panel) !important; border: 1px solid var(--pol-rule) !important; border-radius: 10px !important; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; animation: koloab-pol-in .34s cubic-bezier(.22, .8, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 22ms); } .koloab-polrow:hover { border-color: var(--klb-navy) !important; box-shadow: 0 6px 18px -12px rgba(22, 28, 37, .38); transform: translateY(-1px); } .koloab-polrow:focus-visible { outline: 2px solid var(--klb-red); outline-offset: 2px; } .koloab-polrow__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .koloab-polrow__name { font-size: 15px; font-weight: 500; color: var(--klb-navy); line-height: 1.3; } .koloab-polrow__meta { font-size: 10.5px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; color: var(--pol-quiet); } .koloab-polrow__summary { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--klb-grey-400); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .koloab-polrow__go { flex: none; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--klb-grey); transition: color .16s ease, transform .16s ease; } .koloab-polrow:hover .koloab-polrow__go { color: var(--klb-red); transform: translateX(2px); } .koloab-polrow__mark { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 8px; background: var(--pol-paper); color: var(--klb-navy); transition: background .16s ease; } .koloab-polrow--folder:hover .koloab-polrow__mark { background: var(--klb-grey-100); } .koloab-polstamp { flex: none; width: 46px; padding: 6px 0 5px; border-radius: 7px; background: var(--klb-navy); color: var(--klb-white); display: flex; flex-direction: column; align-items: center; line-height: 1; transition: background .16s ease; } .koloab-polrow--doc:hover .koloab-polstamp { background: var(--klb-red); } .koloab-polstamp em { font-style: normal; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; } .koloab-polstamp i { font-style: normal; font-size: 8.5px; font-weight: 600; letter-spacing: .14em; margin-top: 3px; opacity: .85; } .koloab-polstamp b { font-size: 8px; font-weight: 500; letter-spacing: .1em; margin-top: 2px; opacity: .55; } .koloab-pol__blank { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 68px 24px; text-align: center; color: var(--pol-quiet); } .koloab-pol__blank-icon { color: var(--klb-grey); } .koloab-pol__blank p { margin: 0 !important; font-size: 14px; max-width: 42ch; } @keyframes koloab-pol-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } .koloab-polread { position: fixed; inset: 0; top: var(--klb-wpbar, 0px); z-index: 160; display: flex; align-items: center; justify-content: center; padding: 3vh 3vw; -webkit-user-select: none; user-select: none; } .koloab-polread__scrim { position: absolute; inset: 0; background: rgba(16, 20, 27, .68); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s ease; } .koloab-polread.is-open .koloab-polread__scrim { opacity: 1; } .koloab-polread__box { position: relative; display: flex; flex-direction: column; width: min(1040px, 100%); height: 100%; background: var(--klb-white); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(10px); transition: opacity .22s ease, transform .22s cubic-bezier(.22, .8, .3, 1); } .koloab-polread.is-open .koloab-polread__box { opacity: 1; transform: none; } .koloab-polread__head { display: flex; align-items: center; gap: 14px; padding: 13px 16px; background: var(--klb-navy); color: var(--klb-white); border-bottom: 2px solid var(--klb-red); } .koloab-polread__stamp { flex: none; width: 38px; padding: 5px 0; border-radius: 6px; background: rgba(255, 255, 255, .12); display: flex; flex-direction: column; align-items: center; line-height: 1; } .koloab-polread__stamp em { font-style: normal; font-size: 14px; font-weight: 700; } .koloab-polread__stamp i { font-style: normal; font-size: 7.5px; font-weight: 600; letter-spacing: .13em; margin-top: 3px; opacity: .8; } .koloab-polread__ident { flex: 1; min-width: 0; } .koloab-polread__title { margin: 0 !important; color: var(--klb-white) !important; font-size: 15px !important; font-weight: 600 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .koloab-polread__meta { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .koloab-polread__close { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important; min-height: 34px !important; max-height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255, 255, 255, .1) !important; color: var(--klb-white) !important; line-height: 1 !important; font-size: 0 !important; transition: background .14s ease; } .koloab-polread__close::before, .koloab-polread__close::after { content: none !important; display: none !important; } .koloab-polread__close:hover { background: var(--klb-red) !important; } .koloab-polread__close svg { display: block !important; width: 17px !important; height: 17px !important; margin: 0 !important; flex: none !important; } .koloab-polread__stage { flex: 1; min-height: 0; overflow: auto; background: #eceef1; -webkit-overflow-scrolling: touch; } .koloab-polread__doc { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 16px 28px; } .koloab-polread__page { width: min(100%, 900px); aspect-ratio: 1 / var(--ratio, 1.414); background: var(--klb-white); box-shadow: 0 2px 10px -4px rgba(16, 20, 27, .3); display: grid; place-items: center; } .koloab-polread__page.is-painted { aspect-ratio: auto; } .koloab-polread__page canvas { display: block; width: 100%; height: auto; } .koloab-polread__img { display: block; max-width: 100%; margin: 0 auto; } .koloab-polread__text { margin: 0; padding: 26px 28px; background: var(--klb-white); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; color: var(--klb-ink); } .koloab-polread__loading, .koloab-polread__note { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; min-height: 220px; padding: 40px; text-align: center; color: #6d737c; font-size: 13.5px; } .koloab-polread__note strong { font-size: 26px; font-weight: 800; letter-spacing: .05em; color: var(--klb-navy); } .koloab-polread__note p { margin: 0 !important; max-width: 38ch; } .koloab-polread__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 18px; background: var(--klb-white); border-top: 1px solid var(--klb-grey-100); } .koloab-polread__seal { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--klb-grey-400); } .koloab-polread__seal svg { color: var(--klb-red); flex: none; } .koloab-polread__pages { font-size: 10.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--klb-grey-500); white-space: nowrap; } .koloab-polread img, .koloab-polread canvas { -webkit-user-drag: none; user-select: none; pointer-events: none; } @media (max-width: 820px) { .koloab-pol__masthead { align-items: stretch; gap: 18px; padding: clamp(24px, 6vw, 34px) 18px 22px; } .koloab-pol__ident { display: flex; flex-direction: column; } .koloab-pol__seal { display: none; } .koloab .koloab-pol__masthead h2.koloab-pol__title { font-size: clamp(1.55rem, 6.5vw, 2.1rem) !important; margin: 14px 0 9px !important; } .koloab .koloab-pol__masthead .koloab-pol__sub { font-size: 13.5px; line-height: 1.5; } .koloab-pol__search { flex: 1 1 100%; min-width: 0; padding: 13px 16px; } .koloab-pol__search input { font-size: 16px !important; height: 32px !important; min-height: 32px !important; } .koloab-pol__crumbbar { top: calc(60px + var(--klb-wpbar, 0px)); } .koloab-polrow { gap: 13px; padding: 12px 13px !important; } .koloab-polrow--doc .koloab-polrow__go { display: none; } .koloab-polstamp { width: 40px; } .koloab-polrow__mark { width: 38px; height: 38px; } .koloab-polrow__name { font-size: 14px; } .koloab-polread { padding: 0; } .koloab-polread__box { border-radius: 0; width: 100%; } .koloab-polread__doc { padding: 12px 8px 20px; gap: 10px; } .koloab-polread__foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { .koloab-polrow { animation: none; } .koloab-polrow:hover { transform: none; } .koloab-polread__box { transition: opacity .01s linear; transform: none; } /* A rendered Word document should look like a document, not loose HTML. */ .koloab-docxview { background: var(--klb-grey-100, #ecedef); padding: 18px 0 28px; overflow: auto; } .koloab-docxview .docx-wrapper { background: transparent; padding: 0; } .koloab-docxview .docx { margin: 0 auto 18px; background: #fff; box-shadow: 0 6px 20px -10px rgba(20,26,33,.4); } .koloab-docxview .docx table { border-collapse: collapse; } .koloab-docxview .docx table td, .koloab-docxview .docx table th { border: 1px solid #cfd3d8; } .koloab-docxview .docx img { max-width: 100%; height: auto; }