/* Codyn Reach app theme: "Reach Liquid Glass". Loaded after the upstream Tailwind build (one line in templates/base.html). Pure CSS on top of upstream classes so brightbean-studio releases keep merging cleanly. One system, used everywhere, so every screen feels like the same product: surfaces .. three glass levels (sheet, card, control), one card radius tabs .. one capsule bar with a gradient pill for the active tab, for every tab, segment and view switch in the app buttons .. gradient capsule (primary), glass capsule (secondary) fields .. glass inputs, modern checkboxes and radios spacing .. a roomier scale for sidebar, pages and sections motion .. rise in, pop open, cross-fade, loading bar No orange anywhere: Tailwind's orange scale and the brand tokens are Reach pink, the upstream olive is violet. */ /* ── 1. Tokens ─────────────────────────────────────────────────────────── */ :root { --brand-50: #FFF0F7; --brand-100: #FFE1EF; --brand-200: #FFC3E0; --brand-300: #FF96C8; --brand-400: #FF66AF; --brand-500: #FF3D9A; --brand-600: #E62585; --brand-700: #BF166B; --brand-800: #991356; --brand-900: #7A1146; --primary-rgb: 255, 61, 154; --brand-green-100: #EDE9FE; --brand-green-200: #DDD6FE; --brand-green-500: #8B5CF6; --brand-green-600: #7C3AED; --color-orange-50: #FFF0F7; --color-orange-100: #FFE1EF; --color-orange-200: #FFC3E0; --color-orange-300: #FF96C8; --color-orange-400: #FF66AF; --color-orange-500: #FF3D9A; --color-orange-600: #E62585; --color-orange-700: #BF166B; --color-orange-800: #991356; --color-orange-900: #7A1146; --color-orange-950: #4D0A2B; /* Upstream's warm "stone" greys become cool lavender greys that sit with the glass */ --color-stone-50: #F7F6FA; --color-stone-100: #F0EEF5; --color-stone-200: #E4E1EC; --color-stone-300: #CFCBDA; --color-stone-400: #A39EB0; --color-stone-500: #7E7989; --color-stone-600: #5E596A; --color-stone-700: #48444F; --color-stone-800: #2E2B33; --color-stone-900: #1C1A21; --neutral-50: #F7F6FA; --neutral-100: #F0EEF5; --neutral-200: #E4E1EC; --neutral-300: #CFCBDA; --neutral-400: #A39EB0; --neutral-500: #7E7989; --neutral-600: #5E596A; --neutral-700: #48444F; --neutral-800: #2E2B33; --neutral-900: #1C1A21; --reach-pink: #FF3D9A; --reach-violet: #8B5CF6; --reach-cyan: #13C2E3; --reach-ink: #0B0F14; --reach-ink-2: #4A4658; --reach-ink-3: #8A8796; --reach-grad: linear-gradient(120deg, #FF3D9A 0%, #A855F7 52%, #13C2E3 100%); --reach-btn: linear-gradient(120deg, #FF3D9A 0%, #B44CF0 60%, #8B5CF6 100%); --reach-pill: linear-gradient(120deg, #FF4FA3 0%, #A855F7 100%); /* Liquid glass: three levels, all with a specular top edge */ --glass-sheet: linear-gradient(160deg, rgba(255,255,255,.58), rgba(255,255,255,.34)); --glass-card: linear-gradient(150deg, rgba(255,255,255,.80), rgba(255,255,255,.52)); --glass-control: rgba(255, 255, 255, .72); --glass-edge: rgba(255, 255, 255, .78); --glass-blur: blur(28px) saturate(190%); --glass-spec: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.25), inset 1px 0 0 rgba(255,255,255,.35); --glass-drop: 0 2px 6px rgba(60, 30, 110, .04), 0 24px 48px -28px rgba(60, 30, 110, .32); --glass-drop-hover: 0 2px 6px rgba(60, 30, 110, .05), 0 34px 60px -30px rgba(255, 61, 154, .42); --hairline: rgba(11, 15, 20, .07); /* Shape and space */ --r-card: 18px; --r-field: 14px; --r-control: 999px; --space-page: clamp(20px, 3vw, 40px); --control-h: 42px; --brand-font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --brand-font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --brand-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --surface-page: #F1EEF7; --radius-xl: 1.25rem; --radius-2xl: 1.5rem; --shadow-primary: 0 12px 26px -12px rgba(255, 61, 154, .7); --reach-ease: cubic-bezier(.2, .8, .2, 1); --reach-spring: cubic-bezier(.34, 1.56, .64, 1); } /* ── 2. Canvas: a calm, living backdrop ──────────────────────────────── */ /* Three soft colour blobs, each roaming the whole screen on its own slow path (55 to 80 s, alternating), so together they never visibly repeat. Only transform is animated, on fixed pseudo-elements with no children: cheap for the GPU, and nothing positioned can get trapped inside them (see section 5). */ html { background: #F1EEF7; } /* The app shell paints var(--surface-page) inline over everything; let the backdrop through */ div.flex.h-screen:has(> aside) { background: transparent !important; } body { background: transparent !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--reach-ink); } html::before, html::after, body::before { content: ""; position: fixed; z-index: -1; pointer-events: none; will-change: transform; } /* Pink, top left, with a small pink bubble trailing it */ html::before { width: 62vmax; height: 62vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle at 50% 50%, rgba(255, 61, 154, .42), rgba(255, 61, 154, .14) 42%, transparent 66%), radial-gradient(14vmax circle at 76% 74%, rgba(255, 120, 190, .36), transparent 100%); animation: reach-drift-a 55s ease-in-out infinite alternate; } /* Cyan, top right */ html::after { width: 56vmax; height: 56vmax; right: -16vmax; top: -12vmax; background: radial-gradient(circle at 50% 50%, rgba(19, 194, 227, .40), rgba(19, 194, 227, .12) 44%, transparent 66%); animation: reach-drift-b 68s ease-in-out infinite alternate; } /* Violet, bottom, with a small cyan bubble */ body::before { width: 70vmax; height: 70vmax; left: 18vw; bottom: -40vmax; background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, .34), rgba(168, 85, 247, .10) 46%, transparent 66%), radial-gradient(12vmax circle at 24% 26%, rgba(19, 194, 227, .3), transparent 100%); animation: reach-drift-c 80s ease-in-out infinite alternate; } @keyframes reach-drift-a { 0% { transform: translate3d(0, 0, 0) scale(1, 1) rotate(0deg); } 20% { transform: translate3d(38vw, 18vh, 0) scale(1.12, .94) rotate(24deg); } 40% { transform: translate3d(70vw, 52vh, 0) scale(.9, 1.08) rotate(-12deg); } 60% { transform: translate3d(30vw, 74vh, 0) scale(1.08, 1) rotate(16deg); } 80% { transform: translate3d(6vw, 40vh, 0) scale(.96, 1.1) rotate(-8deg); } 100% { transform: translate3d(48vw, 8vh, 0) scale(1.04, .98) rotate(10deg); } } @keyframes reach-drift-b { 0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } 25% { transform: translate3d(-40vw, 30vh, 0) scale(1.1, .92) rotate(-20deg); } 50% { transform: translate3d(-72vw, 62vh, 0) scale(.94, 1.06) rotate(10deg); } 75% { transform: translate3d(-28vw, 80vh, 0) scale(1.06) rotate(-14deg); } 100% { transform: translate3d(-56vw, 20vh, 0) scale(.98, 1.04) rotate(6deg); } } @keyframes reach-drift-c { 0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); } 25% { transform: translate3d(-34vw, -38vh, 0) scale(1.08, .95) rotate(14deg); } 50% { transform: translate3d(22vw, -70vh, 0) scale(.92, 1.06) rotate(-18deg); } 75% { transform: translate3d(48vw, -30vh, 0) scale(1.05) rotate(8deg); } 100% { transform: translate3d(-10vw, -56vh, 0) scale(1, .96) rotate(-4deg); } } ::selection { background: rgba(255, 61, 154, .22); } /* ── 3. Layout: roomy, Apple-like spacing ──────────────────────────────── */ .sidebar-initial { width: 264px; } .sidebar-nav { padding-left: 14px !important; padding-right: 14px !important; } .sidebar-nav-item { padding: 10px 14px !important; gap: 12px !important; font-size: .9rem !important; font-weight: 500; border-radius: 14px !important; margin-bottom: 4px !important; color: var(--reach-ink-2); transition: background .2s var(--reach-ease), color .2s, transform .2s var(--reach-ease); } .sidebar-nav-item svg { width: 19px; height: 19px; } .sidebar-nav-item:hover { background: rgba(255,255,255,.6) !important; color: var(--reach-ink); transform: translateX(2px); } .sidebar-nav-item.active { background: var(--glass-card) !important; color: var(--reach-ink) !important; font-weight: 650; box-shadow: var(--glass-spec), 0 12px 24px -16px rgba(60,30,110,.45), inset 3px 0 0 var(--reach-pink); } .sidebar-section-label { margin-top: 18px !important; margin-bottom: 8px !important; letter-spacing: .12em; font-family: var(--brand-font-mono); } .sidebar-logo-mark { background: var(--reach-grad) !important; color: #fff !important; } .sidebar-badge { background: var(--reach-grad) !important; color: #fff !important; } /* The sidebar is a glass card like the content sheet, with the same margins */ @media (min-width: 1024px) { div.flex.h-screen.overflow-hidden:has(> aside) > aside { margin: 14px 0 14px 14px; height: calc(100vh - 28px) !important; top: 14px !important; border-radius: 26px; overflow: hidden; padding: 6px 0; background: var(--glass-sheet) !important; border: 1px solid var(--glass-edge); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-spec), var(--glass-drop); } } main.bg-white { /* A soft colour wash inside the sheet gives the glass on top something to bend */ background: radial-gradient(60% 50% at 100% 0%, rgba(19, 194, 227, .14), transparent 70%), radial-gradient(55% 45% at 0% 100%, rgba(255, 61, 154, .13), transparent 70%), radial-gradient(50% 40% at 55% 55%, rgba(168, 85, 247, .08), transparent 70%), var(--glass-sheet) !important; background-attachment: local !important; border-color: var(--glass-edge) !important; box-shadow: var(--glass-spec), var(--glass-drop); } @media (min-width: 1024px) { main.bg-white { border-radius: 26px !important; padding: var(--space-page) !important; margin: 14px !important; } } /* ── 4. Type ───────────────────────────────────────────────────────────── */ main h1, main .text-2xl { letter-spacing: -.035em; } main h1.text-2xl, main h1.text-xl, main > div h1:first-of-type, .im-title { font-weight: 700 !important; font-size: clamp(1.9rem, 2.6vw, 2.7rem) !important; letter-spacing: -.045em !important; color: var(--reach-ink); } main h2, main h3 { letter-spacing: -.02em; } /* ── 5. Surfaces: one glass card ───────────────────────────────────────── */ /* backdrop-filter and transform make an element the containing block for position:fixed descendants. Upstream menus (components/ui_select.html, _post_actions_menu.html, member_row.html) are fixed and placed with viewport coordinates, so any container that can hold one (main sheet, cards, calendar, list rows, event chips) gets glass from colour and highlights only: no backdrop-filter, no hover transform. Blur is kept on things that never contain a menu: tab bars, kanban columns, popovers. */ main .bg-white.rounded-xl, main .bg-white.rounded-2xl, main .bg-white.rounded-lg.border, main .card-hover-lift, .im-card, .reach-card { background: var(--glass-card) !important; border: 1px solid var(--glass-edge) !important; border-radius: var(--r-card) !important; box-shadow: var(--glass-spec), var(--glass-drop) !important; } .card-hover-lift, .im-card.hover, main .group.bg-white.rounded-xl { transition: transform .3s var(--reach-ease), box-shadow .3s var(--reach-ease), border-color .3s; } .card-hover-lift:hover, .im-card.hover:hover, main .group.bg-white.rounded-xl:hover { border-color: rgba(255, 61, 154, .28) !important; box-shadow: var(--glass-spec), var(--glass-drop-hover) !important; } a.card-hover-lift:hover, a.im-card.hover:hover { transform: translateY(-3px); } /* Popovers, menus and dialogs: the strongest glass, opening with a pop */ main .absolute.bg-white.shadow-lg, main .absolute.bg-white.shadow-xl, .fixed .bg-white.shadow-xl, .fixed .bg-white.shadow-2xl, [role="dialog"] .bg-white, [role="menu"] { background: rgba(255, 255, 255, .86) !important; border-radius: 18px !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-spec), 0 30px 60px -24px rgba(60,30,110,.4) !important; } main .absolute.bg-white.shadow-lg, main .absolute.bg-white.shadow-xl, [role="menu"] { animation: reach-pop .18s var(--reach-ease) backwards; transform-origin: top; } .fixed .bg-white.shadow-xl, .fixed .bg-white.shadow-2xl, [role="dialog"] .bg-white { animation: reach-modal .32s var(--reach-spring) backwards; } @keyframes reach-pop { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } } @keyframes reach-modal { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } } /* Upstream's flat grey panels become light glass */ main .bg-stone-50, main .bg-stone-50\/50, main .bg-stone-100\/50 { background-color: rgba(255, 255, 255, .42) !important; } /* Tables: airy rows on glass */ main table thead th, .im-table th { font-family: var(--brand-font-mono) !important; font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--reach-ink-3) !important; border-color: var(--hairline) !important; padding-top: 14px !important; padding-bottom: 14px !important; } main table tbody tr, .im-table td { border-color: var(--hairline) !important; } main table tbody td, .im-table td { padding-top: 16px !important; padding-bottom: 16px !important; } main table tbody tr:hover { background: rgba(255, 255, 255, .55) !important; } /* ── 6. Tabs: ONE capsule style for every tab, segment and view switch ── */ /* The bar */ :is(div, nav):has(> :is(.publish-tab, .create-tab, .inbox-tab, .intel-tab, .view-btn)), .im-tabs, .im-plat-tabs, .reach-tabs, #tab-content > div > div.flex.flex-wrap:has(> button.rounded-full) { display: flex !important; align-items: center; gap: 4px !important; padding: 5px !important; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: rgba(255, 255, 255, .55) !important; border: 1px solid var(--glass-edge) !important; border-radius: var(--r-control) !important; margin-bottom: 0 !important; -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); box-shadow: var(--glass-spec), 0 10px 26px -18px rgba(60,30,110,.45); } /* Rows that held a tab bar over a border line lose the line */ .border-b:has(.publish-tab), .border-b:has(.create-tab), .border-b:has(.inbox-tab), .border-b:has(.intel-tab) { border-bottom-color: transparent !important; padding-top: 4px; padding-bottom: 14px !important; } .im-tabs { margin-bottom: 22px !important; } /* The items */ .publish-tab, .create-tab, .inbox-tab, .intel-tab, .view-btn, .im-tab, .im-plat-tab, .reach-tab, #tab-content button.rounded-full[hx-target="#tab-content"] { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px !important; margin: 0 !important; flex: none; font-size: .9rem !important; font-weight: 600 !important; letter-spacing: -.01em; white-space: nowrap; color: var(--reach-ink-2) !important; background: transparent !important; border: 0 !important; border-radius: var(--r-control) !important; box-shadow: none !important; text-decoration: none !important; cursor: pointer; transition: background .25s var(--reach-ease), color .2s, box-shadow .25s var(--reach-ease), transform .2s var(--reach-ease); } .publish-tab:hover, .create-tab:hover, .inbox-tab:hover, .intel-tab:hover, .view-btn:hover, .im-tab:hover, .im-plat-tab:hover, .reach-tab:hover, #tab-content button.rounded-full[hx-target="#tab-content"]:hover { background: rgba(255, 255, 255, .8) !important; color: var(--reach-ink) !important; } .publish-tab.active, .create-tab.active, .inbox-tab.active, .intel-tab.intel-tab-active, .view-btn.active, .im-tab.on, .im-plat-tab.on, .reach-tab.on, #tab-content button.rounded-full[hx-target="#tab-content"].text-white { background: var(--reach-pill) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 22px -10px rgba(255, 61, 154, .7) !important; } .publish-tab::after, .create-tab::after, .inbox-tab::after, .intel-tab::after { content: none !important; display: none !important; } /* Counters inside tabs */ :is(.publish-tab, .create-tab, .inbox-tab, .im-tab, .im-plat-tab, .view-btn) :is(.im-count, b, span[class*="rounded-full"], span[class*="badge"]) { font-size: .72rem !important; font-weight: 700; padding: 2px 8px !important; border-radius: 999px !important; background: rgba(11, 15, 20, .06) !important; color: var(--reach-ink-2) !important; } :is(.publish-tab.active, .create-tab.active, .inbox-tab.active, .im-tab.on, .im-plat-tab.on, .view-btn.active) :is(.im-count, b, span[class*="rounded-full"], span[class*="badge"]) { background: rgba(255, 255, 255, .25) !important; color: #fff !important; } .view-btn svg { width: 16px !important; height: 16px !important; margin: 0 !important; } /* ── 7. Buttons ────────────────────────────────────────────────────────── */ button.bg-orange-500, a.bg-orange-500, button.bg-orange-600, a.bg-orange-600, button.bg-primary, .btn-brand, .btn-primary-lift, .im-btn.primary { background-image: var(--reach-btn) !important; background-color: var(--reach-pink) !important; border-color: transparent !important; color: #fff !important; border-radius: var(--r-control) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.38), var(--shadow-primary) !important; transition: transform .2s var(--reach-ease), box-shadow .2s var(--reach-ease), filter .2s; } button.bg-orange-500:hover, a.bg-orange-500:hover, button.bg-orange-600:hover, a.bg-orange-600:hover, .btn-brand:hover, .btn-primary-lift:hover, .im-btn.primary:hover { filter: saturate(1.15) brightness(1.04); transform: translateY(-1px); } /* Secondary: a glass capsule */ /* Only small, inline buttons: card-like buttons (template tiles, pickers) keep card corners */ .im-btn:not(.primary):not(.danger):not(.grad), main button.border.bg-white:not([class*="p-3"]):not([class*="p-4"]):not([class*="p-5"]):not([class*="p-6"]):not(.text-left):not(.w-full), main a.border.bg-white[class*="px-"]:not(.text-left):not(.w-full) { background: var(--glass-control) !important; border: 1px solid rgba(11,15,20,.08) !important; border-radius: var(--r-control) !important; box-shadow: var(--glass-spec), 0 6px 16px -12px rgba(60,30,110,.4); } .im-btn { min-height: 40px; padding: 0 18px !important; border-radius: var(--r-control) !important; font-size: .875rem !important; } .im-btn.sm { min-height: 34px; padding: 0 14px !important; font-size: .8rem !important; } /* Upstream text buttons with padding become capsules too */ main button[class*="px-"][class*="py-"][class*="rounded-md"]:not(.text-left):not(.w-full), main button[class*="px-"][class*="py-"][class*="rounded-lg"]:not(.text-left):not(.w-full), main a[class*="px-"][class*="py-"][class*="rounded-md"][class*="border"], main a[class*="px-"][class*="py-"][class*="rounded-lg"][class*="border"] { border-radius: var(--r-control) !important; } main [role="menu"] :is(a, button), main .absolute.bg-white :is(a, button) { border-radius: 10px !important; } main button:active, main a.rounded-full:active, .im-btn:active { transform: scale(.97); } /* Toolbar filters and dropdown triggers: same height and capsule as the tabs */ #publish-body :is(button, a)[class*="text-xs"][class*="border"], main .cal-filters-scroll :is(button, a, select) { min-height: 40px; padding-right: 16px !important; font-size: .82rem !important; font-weight: 600 !important; border-radius: var(--r-control) !important; border-color: rgba(11,15,20,.08) !important; background: var(--glass-control) !important; box-shadow: var(--glass-spec), 0 6px 16px -12px rgba(60,30,110,.4); } /* ── 8. Fields ─────────────────────────────────────────────────────────── */ main input[type="text"], main input[type="search"], main input[type="email"], main input[type="url"], main input[type="number"], main input[type="date"], main input[type="time"], main input[type="password"], main select, main textarea, .form-input-styled, .form-input, .bb-select { border-radius: var(--r-field) !important; border-color: rgba(11, 15, 20, .09) !important; background-color: rgba(255, 255, 255, .72) !important; } main input:focus-visible, main select:focus-visible, main textarea:focus-visible, .form-input-styled:focus, .form-input:focus { border-color: var(--reach-pink) !important; box-shadow: 0 0 0 4px rgba(255, 61, 154, .14) !important; outline: none; } /* Checkboxes and radios: rounded, gradient when on */ input[type="checkbox"]:not(.sr-only):not([class*="opacity-0"]):not(.peer), input[type="radio"]:not(.sr-only):not([class*="opacity-0"]):not(.peer), .cal-select-box { -webkit-appearance: none; appearance: none; flex: none; width: 20px !important; height: 20px !important; margin: 0; cursor: pointer; display: inline-grid !important; place-items: center; border: 1.5px solid rgba(11, 15, 20, .22) !important; border-radius: 7px !important; background: rgba(255, 255, 255, .85) !important; box-shadow: inset 0 1px 2px rgba(11,15,20,.06); transition: background .2s var(--reach-ease), border-color .2s, box-shadow .2s, transform .15s var(--reach-spring); } input[type="radio"]:not(.sr-only):not([class*="opacity-0"]):not(.peer) { border-radius: 999px !important; } input[type="checkbox"]:not(.sr-only):not([class*="opacity-0"]):not(.peer):hover, .cal-select-box:hover { border-color: var(--reach-pink) !important; } input[type="checkbox"]:not(.sr-only):not([class*="opacity-0"]):not(.peer):checked, .cal-select-box.is-checked { border-color: transparent !important; background: var(--reach-pill) !important; color: #fff; box-shadow: 0 6px 14px -6px rgba(255, 61, 154, .7); } input[type="checkbox"]:not(.sr-only):not([class*="opacity-0"]):not(.peer):checked { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat, var(--reach-pill) !important; } input[type="radio"]:not(.sr-only):not([class*="opacity-0"]):not(.peer):checked { border: 6px solid var(--reach-pink) !important; background: #fff !important; } input[type="checkbox"]:active, input[type="radio"]:active, .cal-select-box:active { transform: scale(.9); } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 61, 154, .2) !important; } .cal-select-box svg { width: 12px !important; height: 12px !important; } .bb-toggle input:checked + .bb-toggle-track { background: var(--reach-grad) !important; } /* ── 9. Motion ─────────────────────────────────────────────────────────── */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: reach-fade-out .18s ease both; } ::view-transition-new(root) { animation: reach-fade-in .32s var(--reach-ease) both; } @keyframes reach-fade-out { to { opacity: 0; } } @keyframes reach-fade-in { from { opacity: 0; transform: translateY(6px); } } main > div > *:not(script):not(style) { animation: reach-rise .5s var(--reach-ease) backwards; } main > div > *:nth-child(2) { animation-delay: .04s; } main > div > *:nth-child(3) { animation-delay: .08s; } main > div > *:nth-child(4) { animation-delay: .12s; } main > div > *:nth-child(5) { animation-delay: .16s; } @keyframes reach-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .htmx-added { animation: reach-fade-in .3s var(--reach-ease) backwards; } body:has(.htmx-request)::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999; pointer-events: none; background: linear-gradient(90deg, transparent, #FF3D9A, #A855F7, #13C2E3, transparent); background-size: 200% 100%; animation: reach-loading 1s linear infinite; } @keyframes reach-loading { from { background-position: 100% 0; } to { background-position: -100% 0; } } /* ── 10. Kanban: see-through glass columns, floating cards ─────────────── */ /* The board sits on a soft colour "wallpaper" so the columns read as frosted panes */ div:has(> .kanban-column) { padding: 18px !important; gap: 18px !important; border-radius: 34px; background: radial-gradient(38% 70% at 8% 18%, rgba(255, 61, 154, .34), transparent 72%), radial-gradient(40% 70% at 55% 92%, rgba(168, 85, 247, .30), transparent 72%), radial-gradient(36% 64% at 96% 12%, rgba(19, 194, 227, .32), transparent 72%), linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.15)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.45); } .kanban-column { /* Same near-white glass as the calendar sheet; the colour lives on the board only */ background: rgba(255, 255, 255, .84) !important; border: 1px solid rgba(255,255,255,.7) !important; border-radius: 22px !important; -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%); box-shadow: var(--glass-spec), 0 24px 48px -32px rgba(60,30,110,.4) !important; padding: 14px !important; } .kanban-column > div:first-child { font-family: var(--brand-font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; padding: 4px 6px 12px !important; } .kanban-column > div:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--reach-pink); vertical-align: 1px; } .kanban-column:nth-child(4n+2) > div:first-child::before { background: #A855F7; } .kanban-column:nth-child(4n+3) > div:first-child::before { background: var(--reach-cyan); } .kanban-column:nth-child(4n+4) > div:first-child::before { background: var(--reach-ink); } .idea-card { background: var(--glass-card) !important; border: 1px solid var(--glass-edge) !important; border-radius: 18px !important; box-shadow: var(--glass-spec), 0 14px 28px -20px rgba(60,30,110,.5) !important; transition: transform .25s var(--reach-ease), box-shadow .25s var(--reach-ease); } .idea-card:hover { transform: translateY(-3px); box-shadow: var(--glass-spec), 0 22px 40px -22px rgba(255,61,154,.5) !important; } .idea-card img { border-radius: 12px; } /* ── 11. Calendar: one glass sheet, roomy cells, big readable events ──── */ /* The window scrolls (section 16), so this box needs no overflow of its own; with one it clipped the sheet's soft shadow into a straight edge. */ #calendar-content { overflow: visible !important; padding: 0 0 40px; } #calendar-content .bg-white.overflow-x-auto, #calendar-content > div:first-child.bg-white { background: rgba(255, 255, 255, .6) !important; border: 1px solid var(--glass-edge); border-radius: 28px; overflow: hidden; box-shadow: var(--glass-spec), var(--glass-drop); } #calendar-content .grid.grid-cols-7.border-b.bg-stone-50 { background: transparent !important; border-color: var(--hairline) !important; } #calendar-content .grid.grid-cols-7.border-b.bg-stone-50 > div { border-color: transparent !important; font-family: var(--brand-font-mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--reach-ink-3) !important; text-align: right; padding: 14px 16px 10px !important; } main .cal-day { background: transparent; border-right-color: var(--hairline); border-bottom-color: var(--hairline); position: relative; padding: 10px !important; transition: background .2s var(--reach-ease); } @media (min-width: 768px) { main .cal-day { min-height: 168px !important; } } main .cal-day:hover { background: rgba(255, 255, 255, .7); } main .cal-day.past, main .cal-day.past:hover { background: rgba(241, 238, 247, .35); } main .cal-day.other-month { opacity: .45; } main .grid.grid-cols-7 > .cal-day:nth-child(7n+6), main .grid.grid-cols-7 > .cal-day:nth-child(7n) { background-color: rgba(139, 92, 246, .03); } main .cal-day .day-num { font-family: var(--brand-font-body); font-size: 16px; font-weight: 650; letter-spacing: -.02em; width: 32px; height: 32px; margin-left: auto; color: var(--reach-ink); } main .cal-day.past .day-num { color: #A8A5B3; font-weight: 500; } main .cal-day.today { background: linear-gradient(180deg, rgba(255, 61, 154, .07), rgba(255,255,255,0)) !important; } main .cal-day.today .day-num { background: var(--reach-grad) !important; color: #fff !important; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(255, 61, 154, .8); font-weight: 700; } main .cal-add-btn { border-radius: 999px !important; background: var(--reach-grad) !important; color: #fff !important; box-shadow: 0 6px 14px -6px rgba(255,61,154,.7); } /* Events: bigger tinted pills with a colour bar and a real thumbnail */ main .post-chip { border: 0 !important; border-radius: 10px !important; padding: 7px 9px 7px 12px !important; margin-bottom: 5px !important; min-height: 34px; gap: 7px !important; font-size: 12.5px !important; font-weight: 600; letter-spacing: -.005em; position: relative; box-shadow: none; transition: transform .2s var(--reach-ease), box-shadow .2s var(--reach-ease); } main .post-chip::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3.5px; border-radius: 3px; background: currentColor; opacity: .85; } main .post-chip:hover { box-shadow: 0 12px 22px -14px rgba(60,30,110,.55); filter: brightness(1.03); } main .post-chip > span.w-4.h-4 { width: 20px !important; height: 20px !important; border-radius: 6px !important; } main .post-chip img, main .post-chip video { width: 26px !important; height: 26px !important; border-radius: 7px !important; } main .status-draft { background: rgba(120, 113, 108, .11) !important; color: #57534E !important; } main .status-pending_review, main .status-pending_client, main .status-changes_requested { background: rgba(255, 61, 154, .13) !important; color: #BF166B !important; } main .status-approved { background: rgba(20, 184, 166, .14) !important; color: #0F766E !important; } main .status-scheduled { background: rgba(139, 92, 246, .14) !important; color: #6D28D9 !important; } main .status-publishing { background: rgba(19, 194, 227, .15) !important; color: #0E7490 !important; } main .status-published { background: rgba(34, 197, 94, .14) !important; color: #15803D !important; } main .status-failed, main .status-rejected { background: rgba(239, 68, 68, .13) !important; color: #B91C1C !important; } main .status-on_hold { background: rgba(124, 58, 237, .11) !important; color: #6D28D9 !important; } /* Calendar toolbar: big title, round glass arrows */ #publish-body h2.text-base { font-size: clamp(1.5rem, 2.2vw, 2.1rem) !important; font-weight: 700 !important; letter-spacing: -.045em; } #publish-body .w-7.h-7.rounded-md { width: 38px; height: 38px; border-radius: 999px !important; background: var(--glass-control); box-shadow: var(--glass-spec), 0 6px 16px -10px rgba(60,30,110,.45); color: var(--reach-ink) !important; } #publish-body .border-b.border-stone-200.bg-white, #publish-body .bg-white.border-b.border-stone-200 { background: transparent !important; border-color: transparent !important; padding-bottom: 14px !important; } /* ── 12. Cards view of the Publish list: big media, one card per post ─── */ /* Days flow across as columns, each day's posts stack as cards beneath its date */ #publish-body.reach-cards div:has(> div > .space-y-4 > .flex.gap-4) { display: flex; flex-wrap: wrap; gap: 28px 22px; align-items: flex-start; } #publish-body.reach-cards div:has(> .space-y-4 > .flex.gap-4) { width: 280px; margin: 0 !important; } #publish-body.reach-cards div:has(> .space-y-4 > .flex.gap-4) > h3 { font-size: .8rem !important; text-transform: uppercase; letter-spacing: .1em; font-family: var(--brand-font-mono); color: var(--reach-ink-3) !important; margin-bottom: 12px !important; } #publish-body.reach-cards .space-y-4:has(> .flex.gap-4) { display: grid; grid-template-columns: 1fr; gap: 18px; } #publish-body.reach-cards .space-y-4 > .flex.gap-4 { margin: 0 !important; display: flex; flex-direction: column; position: relative; gap: 0 !important; } #publish-body.reach-cards .flex.gap-4 > .w-20 { position: absolute; z-index: 2; top: 12px; left: 12px; width: auto !important; padding: 5px 10px !important; text-align: left; border-radius: 999px; background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 16px -10px rgba(0,0,0,.4); } #publish-body.reach-cards .flex.gap-4 > .w-20 > div { display: inline; margin: 0 4px 0 0 !important; } #publish-body.reach-cards .flex.gap-4 > .shrink-0.pt-3:first-child { position: absolute; z-index: 2; top: 14px; right: 14px; padding: 0 !important; } #publish-body.reach-cards .flex.gap-4 > .flex-1 { display: flex; flex-direction: column; height: 100%; overflow: hidden; } #publish-body.reach-cards .flex.gap-4 > .flex-1 > div:first-child { display: flex; flex-direction: column; padding: 0 !important; } #publish-body.reach-cards .flex.gap-4 .flex.gap-1\.5.mt-2\.5 { order: -1; margin: 0 0 14px !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } #publish-body.reach-cards .flex.gap-4 .flex.gap-1\.5.mt-2\.5 > div { width: 100% !important; height: auto !important; aspect-ratio: 1; border-radius: 0 !important; } #publish-body.reach-cards .flex.gap-4 .flex.gap-1\.5.mt-2\.5 > div:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 5; } #publish-body.reach-cards .flex.gap-4 .flex.gap-1\.5.mt-2\.5 > div:only-child { aspect-ratio: 4 / 5; } #publish-body.reach-cards .flex.gap-4 > .flex-1 > div:first-child > :not(.flex.gap-1\.5) { padding-left: 18px; padding-right: 18px; } #publish-body.reach-cards .flex.gap-4 > .flex-1 > div:first-child > .flex.items-center.gap-2 { padding-top: 4px; } #publish-body.reach-cards .flex.gap-4 > .flex-1 > div:first-child > p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 6px; } #publish-body.reach-cards .flex.gap-4 > .flex-1 > .border-t { margin-top: auto; } /* Tables (Drafts, Sent) become cards too */ #publish-body.reach-cards table thead { display: none; } #publish-body.reach-cards table, #publish-body.reach-cards table tbody { display: block; } #publish-body.reach-cards table tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } #publish-body.reach-cards table tbody tr { display: flex; flex-direction: column; position: relative; overflow: hidden; border: 1px solid var(--glass-edge) !important; border-radius: var(--r-card); background: var(--glass-card); box-shadow: var(--glass-spec), var(--glass-drop); transition: transform .3s var(--reach-ease), box-shadow .3s var(--reach-ease); } #publish-body.reach-cards table tbody tr:hover { box-shadow: var(--glass-spec), var(--glass-drop-hover); background: var(--glass-card) !important; } #publish-body.reach-cards table tbody td { display: block; max-width: none !important; padding: 4px 16px !important; white-space: normal !important; } #publish-body.reach-cards table tbody td:first-child { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 0 !important; } #publish-body.reach-cards table tbody td:nth-child(2) { order: -1; padding: 0 !important; margin-bottom: 12px; } #publish-body.reach-cards table tbody td:nth-child(2) > div { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; border-radius: 0 !important; } #publish-body.reach-cards table tbody td:nth-child(2) > div svg { width: 40px; height: 40px; } #publish-body.reach-cards table tbody td:last-child { padding-bottom: 16px !important; } #publish-body.reach-cards .space-y-4 > .flex.gap-4 > .flex-1, #publish-body.reach-cards .space-y-4 > .flex.gap-4 { animation: reach-rise .45s var(--reach-ease) backwards; } /* ── 13. Auth pages ───────────────────────────────────────────────────── */ .auth-bg { background: transparent !important; } .auth-card { background: var(--glass-sheet) !important; border: 1px solid var(--glass-edge) !important; border-radius: 32px !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-spec), var(--glass-drop); animation: reach-modal .45s var(--reach-spring) backwards; } /* ── 18. Dark: pure black, like Instagram and X, with Liquid Glass ────── */ /* Chosen in Settings > Preferences (landing/_appearance.html); the early script in base.html sets html[data-theme]. Greys invert, pastel status backgrounds become translucent tints, dark text shades become light ones, and every glass token switches to its dark version. */ html[data-theme="dark"] { color-scheme: dark; --color-red-50: color-mix(in oklab, oklch(63.7% .237 25.331) 14%, transparent); --color-red-100: color-mix(in oklab, oklch(63.7% .237 25.331) 20%, transparent); --color-red-200: color-mix(in oklab, oklch(63.7% .237 25.331) 32%, transparent); --color-red-600: oklch(70.4% .191 22.216); --color-red-700: oklch(80.8% .114 19.571); --color-red-800: oklch(88.5% .062 18.334); --color-red-900: oklch(93.6% .032 17.717); --color-amber-50: color-mix(in oklab, oklch(76.9% .188 70.08) 14%, transparent); --color-amber-100: color-mix(in oklab, oklch(76.9% .188 70.08) 20%, transparent); --color-amber-200: color-mix(in oklab, oklch(76.9% .188 70.08) 32%, transparent); --color-amber-600: oklch(82.8% .189 84.429); --color-amber-800: oklch(92.4% .12 95.746); --color-amber-900: oklch(96.2% .059 95.617); --color-yellow-50: color-mix(in oklab, oklch(79.5% .184 86.047) 14%, transparent); --color-yellow-100: color-mix(in oklab, oklch(79.5% .184 86.047) 20%, transparent); --color-yellow-200: color-mix(in oklab, oklch(79.5% .184 86.047) 32%, transparent); --color-green-50: color-mix(in oklab, oklch(72.3% .219 149.579) 14%, transparent); --color-green-100: color-mix(in oklab, oklch(72.3% .219 149.579) 20%, transparent); --color-green-200: color-mix(in oklab, oklch(72.3% .219 149.579) 32%, transparent); --color-green-800: oklch(92.5% .084 155.995); --color-green-900: oklch(96.2% .044 156.743); --color-emerald-50: color-mix(in oklab, oklch(69.6% .17 162.48) 14%, transparent); --color-emerald-100: color-mix(in oklab, oklch(69.6% .17 162.48) 20%, transparent); --color-emerald-200: color-mix(in oklab, oklch(69.6% .17 162.48) 32%, transparent); --color-emerald-600: oklch(76.5% .177 163.223); --color-emerald-900: oklch(95% .052 163.051); --color-teal-50: color-mix(in oklab, oklch(60% .118 184.704) 14%, transparent); --color-teal-100: color-mix(in oklab, oklch(60% .118 184.704) 20%, transparent); --color-teal-200: color-mix(in oklab, oklch(60% .118 184.704) 32%, transparent); --color-teal-900: oklch(95.3% .051 180.801); --color-sky-50: color-mix(in oklab, oklch(68.5% .169 237.323) 14%, transparent); --color-sky-100: color-mix(in oklab, oklch(68.5% .169 237.323) 20%, transparent); --color-sky-200: color-mix(in oklab, oklch(68.5% .169 237.323) 32%, transparent); --color-sky-900: oklch(95.1% .026 236.824); --color-blue-50: color-mix(in oklab, oklch(62.3% .214 259.815) 14%, transparent); --color-blue-100: color-mix(in oklab, oklch(62.3% .214 259.815) 20%, transparent); --color-blue-200: color-mix(in oklab, oklch(62.3% .214 259.815) 32%, transparent); --color-blue-900: oklch(93.2% .032 255.585); --color-indigo-50: color-mix(in oklab, oklch(58.5% .233 277.117) 14%, transparent); --color-indigo-100: color-mix(in oklab, oklch(58.5% .233 277.117) 20%, transparent); --color-indigo-200: color-mix(in oklab, oklch(58.5% .233 277.117) 32%, transparent); --color-indigo-900: oklch(93% .034 272.788); --color-violet-50: color-mix(in oklab, oklch(60.6% .25 292.717) 14%, transparent); --color-violet-100: color-mix(in oklab, oklch(60.6% .25 292.717) 20%, transparent); --color-violet-200: color-mix(in oklab, oklch(60.6% .25 292.717) 32%, transparent); --color-pink-50: color-mix(in oklab, oklch(59.2% .249 .584) 14%, transparent); --color-pink-100: color-mix(in oklab, oklch(59.2% .249 .584) 20%, transparent); --color-pink-200: color-mix(in oklab, oklch(59.2% .249 .584) 32%, transparent); --color-rose-50: color-mix(in oklab, oklch(58.6% .253 17.585) 14%, transparent); --color-rose-100: color-mix(in oklab, oklch(58.6% .253 17.585) 20%, transparent); --color-rose-200: color-mix(in oklab, oklch(58.6% .253 17.585) 32%, transparent); --color-rose-900: oklch(94.1% .03 12.58); --color-stone-50: #0E0E10; --color-stone-100: #161618; --color-stone-200: #26262A; --color-stone-300: #38383D; --color-stone-400: #636369; --color-stone-500: #8E8E93; --color-stone-600: #AEAEB2; --color-stone-700: #C7C7CC; --color-stone-800: #E5E5EA; --color-stone-900: #F2F2F7; --color-stone-950: #FFFFFF; --color-gray-50: #0E0E10; --color-gray-100: #161618; --color-gray-200: #26262A; --color-gray-300: #38383D; --color-gray-400: #636369; --color-gray-500: #8E8E93; --color-gray-600: #AEAEB2; --color-gray-700: #C7C7CC; --color-gray-800: #E5E5EA; --color-gray-900: #F2F2F7; --color-gray-950: #FFFFFF; --color-neutral-50: #0E0E10; --color-neutral-100: #161618; --color-neutral-200: #26262A; --color-neutral-300: #38383D; --color-neutral-400: #636369; --color-neutral-500: #8E8E93; --color-neutral-600: #AEAEB2; --color-neutral-700: #C7C7CC; --color-neutral-800: #E5E5EA; --color-neutral-900: #F2F2F7; --color-neutral-950: #FFFFFF; --color-zinc-50: #0E0E10; --color-zinc-100: #161618; --color-zinc-200: #26262A; --color-zinc-300: #38383D; --color-zinc-400: #636369; --color-zinc-500: #8E8E93; --color-zinc-600: #AEAEB2; --color-zinc-700: #C7C7CC; --color-zinc-800: #E5E5EA; --color-zinc-900: #F2F2F7; --color-zinc-950: #FFFFFF; --color-slate-50: #0E0E10; --color-slate-100: #161618; --color-slate-200: #26262A; --color-slate-300: #38383D; --color-slate-400: #636369; --color-slate-500: #8E8E93; --color-slate-600: #AEAEB2; --color-slate-700: #C7C7CC; --color-slate-800: #E5E5EA; --color-slate-900: #F2F2F7; --color-slate-950: #FFFFFF; --neutral-50: #0E0E10; --neutral-100: #161618; --neutral-200: #26262A; --neutral-300: #38383D; --neutral-400: #636369; --neutral-500: #8E8E93; --neutral-600: #AEAEB2; --neutral-700: #C7C7CC; --neutral-800: #E5E5EA; --neutral-900: #F2F2F7; --brand-50: rgba(255, 61, 154, .14); --brand-100: rgba(255, 61, 154, .2); --brand-200: rgba(255, 61, 154, .32); --brand-300: #FF96C8; --brand-400: #FF66AF; --brand-500: #FF3D9A; --brand-600: #FF66AF; --brand-700: #FF96C8; --brand-800: #FFC3E0; --brand-900: #FFE1EF; --color-orange-50: rgba(255, 61, 154, .14); --color-orange-100: rgba(255, 61, 154, .2); --color-orange-200: rgba(255, 61, 154, .32); --color-orange-300: #FF96C8; --color-orange-400: #FF66AF; --color-orange-500: #FF3D9A; --color-orange-600: #FF66AF; --color-orange-700: #FF96C8; --color-orange-800: #FFC3E0; --color-orange-900: #FFE1EF; --surface-0: rgba(255, 255, 255, .06); --surface-page: #000; --surface-1: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.08); --surface-3: rgba(255,255,255,.12); --border: rgba(255, 255, 255, .12); --border-hover: rgba(255, 255, 255, .2); --text-primary: #F2F2F7; --text-secondary: #AEAEB2; --text-tertiary: #8E8E93; --text-ghost: #636369; --success-50: rgba(34,197,94,.14); --success-700: #86EFAC; --warning-50: rgba(234,179,8,.14); --warning-700: #FDE68A; --error-50: rgba(239,68,68,.14); --error-700: #FCA5A5; --info-50: rgba(59,130,246,.14); --info-700: #93C5FD; --primary-soft: rgba(255, 61, 154, .16); --primary-ring: rgba(255, 61, 154, .32); --reach-ink: #F5F5F7; --reach-ink-2: #C7C7CC; --reach-ink-3: #8E8E93; --glass-sheet: linear-gradient(160deg, rgba(255,255,255,.075), rgba(255,255,255,.03)); --glass-card: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.045)); --glass-control: rgba(255, 255, 255, .08); --glass-edge: rgba(255, 255, 255, .12); --glass-spec: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.04), inset 1px 0 0 rgba(255,255,255,.05); --glass-drop: 0 2px 6px rgba(0,0,0,.4), 0 26px 50px -26px rgba(0,0,0,.9); --glass-drop-hover: 0 2px 6px rgba(0,0,0,.4), 0 34px 60px -28px rgba(255, 61, 154, .38); --hairline: rgba(255, 255, 255, .08); /* Floating glass: every menu, popover, modal, drawer and toast. Frosted enough to read on pure black and over the colour blobs, never see-through */ --glass-float: rgba(22, 22, 27, .86); --glass-float-blur: blur(32px) saturate(180%); --glass-float-edge: rgba(255, 255, 255, .12); --glass-float-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 56px -18px rgba(0,0,0,.92); background: #000; } html[data-theme="dark"] body { color: var(--reach-ink); } /* The blobs glow a little softer on black */ html[data-theme="dark"]::before, html[data-theme="dark"]::after, html[data-theme="dark"] body::before { opacity: .62; } /* Surfaces that upstream paints white */ html[data-theme="dark"] .bg-white { background-color: rgba(255, 255, 255, .05) !important; } html[data-theme="dark"] main.bg-white { background: radial-gradient(60% 50% at 100% 0%, rgba(19, 194, 227, .07), transparent 70%), radial-gradient(55% 45% at 0% 100%, rgba(255, 61, 154, .07), transparent 70%), var(--glass-sheet) !important; } html[data-theme="dark"] main .bg-stone-50 { background-color: rgba(255, 255, 255, .04) !important; } html[data-theme="dark"] main table tbody tr:hover { background: rgba(255, 255, 255, .04) !important; } /* Controls */ html[data-theme="dark"] :is(div, nav):has(> :is(.publish-tab, .create-tab, .inbox-tab, .intel-tab, .view-btn)), html[data-theme="dark"] .im-tabs, html[data-theme="dark"] .im-plat-tabs, html[data-theme="dark"] .reach-tabs, html[data-theme="dark"] #tab-content > div > div.flex.flex-wrap:has(> button.rounded-full) { background: rgba(255, 255, 255, .06) !important; } html[data-theme="dark"] :is(.publish-tab, .create-tab, .inbox-tab, .intel-tab, .view-btn, .im-tab, .im-plat-tab, .reach-tab):not(.active):not(.on):not(.intel-tab-active):hover { background: rgba(255, 255, 255, .1) !important; } html[data-theme="dark"] :is(.publish-tab, .create-tab, .inbox-tab, .im-tab, .im-plat-tab, .view-btn):not(.active):not(.on) :is(.im-count, b, span[class*="rounded-full"], span[class*="badge"]) { background: rgba(255, 255, 255, .1) !important; } html[data-theme="dark"] .sidebar-nav-item:hover { background: rgba(255, 255, 255, .07) !important; } html[data-theme="dark"] .sidebar-nav-item.active { background: rgba(255, 255, 255, .1) !important; } html[data-theme="dark"] main input[type="text"], html[data-theme="dark"] main input[type="search"], html[data-theme="dark"] main input[type="email"], html[data-theme="dark"] main input[type="url"], html[data-theme="dark"] main input[type="number"], html[data-theme="dark"] main input[type="date"], html[data-theme="dark"] main input[type="time"], html[data-theme="dark"] main input[type="password"], html[data-theme="dark"] main select, html[data-theme="dark"] main textarea, html[data-theme="dark"] .form-input-styled, html[data-theme="dark"] .form-input, html[data-theme="dark"] .bb-select { background-color: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .12) !important; color: var(--reach-ink); } html[data-theme="dark"] input[type="checkbox"]:not(.sr-only):not([class*="opacity-0"]):not(.peer):not(:checked), html[data-theme="dark"] input[type="radio"]:not(.sr-only):not([class*="opacity-0"]):not(.peer):not(:checked), html[data-theme="dark"] .cal-select-box:not(.is-checked) { background-color: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .28) !important; } html[data-theme="dark"] .im-btn:not(.primary):not(.danger):not(.grad), html[data-theme="dark"] #publish-body :is(button, a)[class*="text-xs"][class*="border"] { border-color: rgba(255, 255, 255, .12) !important; color: var(--reach-ink) !important; } html[data-theme="dark"] .reach-media-toggle:not(.on) { background: rgba(255, 255, 255, .16); } /* Calendar, board, composer */ html[data-theme="dark"] #calendar-content .bg-white.overflow-x-auto, html[data-theme="dark"] #calendar-content > div:first-child.bg-white { background: rgba(255, 255, 255, .04) !important; } html[data-theme="dark"] main .cal-day:hover { background: rgba(255, 255, 255, .05); } html[data-theme="dark"] main .cal-day.past, html[data-theme="dark"] main .cal-day.past:hover { background: rgba(255, 255, 255, .015); } html[data-theme="dark"] main .cal-day.past .day-num { color: #48484D; } html[data-theme="dark"] main .status-draft { background: rgba(255, 255, 255, .08) !important; color: #C7C7CC !important; } html[data-theme="dark"] main .status-pending_review, html[data-theme="dark"] main .status-pending_client, html[data-theme="dark"] main .status-changes_requested { color: #FF96C8 !important; } html[data-theme="dark"] main .status-approved { color: #5EEAD4 !important; } html[data-theme="dark"] main .status-scheduled, html[data-theme="dark"] main .status-on_hold { color: #C4B5FD !important; } html[data-theme="dark"] main .status-publishing { color: #67E8F9 !important; } html[data-theme="dark"] main .status-published { color: #86EFAC !important; } html[data-theme="dark"] main .status-failed, html[data-theme="dark"] main .status-rejected { color: #FCA5A5 !important; } html[data-theme="dark"] .kanban-column { background: rgba(20, 20, 24, .78) !important; border-color: rgba(255, 255, 255, .1) !important; } html[data-theme="dark"] div:has(> .kanban-column) { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(255,255,255,.06); } html[data-theme="dark"] main .action-bar { background: rgba(14, 14, 18, .82) !important; border-top-color: rgba(255, 255, 255, .08) !important; } html[data-theme="dark"] #publish-body.reach-cards .flex.gap-4 > .w-20 { background: rgba(0, 0, 0, .6); } /* Influencer hub */ html[data-theme="dark"] .im-card { background: var(--glass-card) !important; border-color: var(--glass-edge) !important; } html[data-theme="dark"] .im-market { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); } html[data-theme="dark"] .im-search, html[data-theme="dark"] .im-drop, html[data-theme="dark"] .im-camp-stats > div, html[data-theme="dark"] .im-wallet-side > div { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .1) !important; } html[data-theme="dark"] .im-followers b, html[data-theme="dark"] .im-wallet-main .v { background-image: linear-gradient(135deg, #fff 40%, #D8B4FE); } html[data-theme="dark"] .im-chip.pink { background: rgba(255, 61, 154, .16); color: #FF96C8; } html[data-theme="dark"] .im-chip.cyan { background: rgba(19, 194, 227, .16); color: #67E8F9; } html[data-theme="dark"] .im-chip.grey { background: rgba(255, 255, 255, .08); color: #C7C7CC; } html[data-theme="dark"] .im-wallet { background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border-color: rgba(255,255,255,.12); } html[data-theme="dark"] .im-setup-step, html[data-theme="dark"] .im-deliv-row { background: rgba(255, 255, 255, .04); } html[data-theme="dark"] .im-ring-in { background: #0B0B0E; } html[data-theme="dark"] .im-msg { background: rgba(255, 255, 255, .06); } /* ── 19. Settings > Preferences > Appearance ──────────────────────────── */ .reach-appearance-sub { color: var(--text-secondary); margin: 0 0 22px; font-size: .92rem; } .reach-appearance-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 560px; } .reach-theme-opt { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-radius: 20px; cursor: pointer; background: var(--glass-card); border: 1.5px solid var(--glass-edge); box-shadow: var(--glass-spec), var(--glass-drop); transition: border-color .2s, box-shadow .2s, transform .2s var(--reach-ease); } .reach-theme-opt:hover { transform: translateY(-2px); } .reach-theme-opt.on { border-color: var(--reach-pink); box-shadow: var(--glass-spec), 0 0 0 4px rgba(255, 61, 154, .16), var(--glass-drop); } .reach-theme-name { font-weight: 650; font-size: .9rem; color: var(--text-primary); padding: 0 4px 2px; text-align: left; } .reach-theme-preview { position: relative; display: block; height: 96px; border-radius: 14px; overflow: hidden; } .reach-theme-preview.light { background: radial-gradient(70% 90% at 0% 0%, rgba(255,61,154,.35), transparent 70%), radial-gradient(70% 90% at 100% 100%, rgba(19,194,227,.35), transparent 70%), #F1EEF7; } .reach-theme-preview.dark { background: radial-gradient(70% 90% at 0% 0%, rgba(255,61,154,.4), transparent 70%), radial-gradient(70% 90% at 100% 100%, rgba(19,194,227,.35), transparent 70%), #000; } .reach-theme-preview.system { background: linear-gradient(110deg, #F1EEF7 0 50%, #000 50% 100%); } .reach-theme-preview i { position: absolute; left: 10px; top: 10px; bottom: 10px; width: 22%; border-radius: 9px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); } .reach-theme-preview b { position: absolute; left: 32%; right: 10px; height: 26%; border-radius: 9px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); } .reach-theme-preview b:first-of-type { top: 10px; } .reach-theme-preview b:last-of-type { bottom: 10px; height: 40%; } .reach-theme-preview.dark :is(i, b) { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); } .reach-theme-preview.system b:last-of-type { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); } @media (max-width: 560px) { .reach-appearance-grid { grid-template-columns: 1fr 1fr; } } /* ── 14. Accessibility: motion off when asked ─────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } @view-transition { navigation: none; } } #publish-body.reach-cards .flex.gap-4 > .w-20 > div:nth-child(2) { display: none !important; } #publish-body.reach-cards .flex.gap-4 > .w-20 > div:first-child { font-size: .8rem !important; } /* Month view: posts with media become mini cards, the image on top */ main .post-chip:has(> img, > video) { flex-wrap: wrap; padding: 5px 8px 7px 11px !important; row-gap: 6px !important; align-items: center; } main .post-chip:has(> img, > video) > img, main .post-chip:has(> img, > video) > video { order: -1; flex: 0 0 100%; width: 100% !important; height: 72px !important; object-fit: cover; border-radius: 8px !important; } main .post-chip:has(> img, > video) > span.w-4.h-4 { width: 18px !important; height: 18px !important; } main .post-chip:has(> img, > video) > .truncate { flex: 1; min-width: 0; } main .post-chip .cal-select-box { position: absolute; top: 9px; right: 9px; z-index: 2; width: 18px !important; height: 18px !important; background: rgba(255,255,255,.9) !important; } main .post-chip:not(:hover) .cal-select-box:not(.is-checked) { opacity: 0; } /* ── 15. Publish list content: aligned with the tabs, wider, calm ──────── */ #tab-content { justify-content: flex-start !important; padding-top: 6px; } #tab-content > * { max-width: 1120px !important; } #publish-body.reach-cards #tab-content > * { max-width: none !important; } /* Tab bars never wrap: they scroll sideways when they run out of room */ :is(div, nav):has(> :is(.publish-tab, .create-tab, .inbox-tab, .intel-tab, .view-btn)), .im-tabs, .im-plat-tabs, .reach-tabs, #tab-content > div > div.flex.flex-wrap:has(> button.rounded-full) { flex-wrap: nowrap !important; } #tab-content > div > div.flex.flex-wrap:has(> button.rounded-full) { margin-bottom: 20px !important; } /* Approval rows: roomy glass cards */ #tab-content .space-y-3:has(> .rounded-xl) { display: grid; gap: 14px; } #tab-content .space-y-3:has(> .rounded-xl) > * { margin: 0 !important; } #tab-content .space-y-3 > .rounded-xl > .flex.items-start.gap-3.p-4 { padding: 18px 20px !important; gap: 16px !important; align-items: center !important; } #tab-content .space-y-3 > .rounded-xl > .flex.items-start > img.w-12, #tab-content .space-y-3 > .rounded-xl > .flex.items-start > div.w-12 { width: 64px !important; height: 64px !important; border-radius: 16px !important; box-shadow: 0 8px 18px -12px rgba(60,30,110,.5); } #tab-content .space-y-3 > .rounded-xl p.line-clamp-1 { font-size: .95rem !important; font-weight: 600; color: var(--reach-ink) !important; margin: 2px 0 4px; } #tab-content .space-y-3 > .rounded-xl .flex.items-center.gap-2.mb-1 > span:first-child, #tab-content .space-y-3 > .rounded-xl [class*="rounded-full"][class*="text-[0.6"], #tab-content .space-y-3 > .rounded-xl [class*="rounded-full"][class*="text-[10px]"] { font-size: .72rem !important; padding: 3px 10px !important; } #tab-content .space-y-3 > .rounded-xl > .flex.items-start > input[type="checkbox"] { margin-top: 0 !important; } /* One button language in approvals: Approve / Resume primary, Review / Edit secondary */ #tab-content button[hx-post*="/approve/"], #tab-content button[hx-post*="/resume/"] { background: var(--reach-btn) !important; color: #fff !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.38), var(--shadow-primary) !important; } #tab-content button[hx-post*="/approve/"], #tab-content button[hx-post*="/resume/"], #tab-content .rounded-xl button[class*="border"][class*="rounded-full"], #tab-content .rounded-xl a[href*="/compose/"][class*="rounded-full"] { height: 38px; padding: 0 18px !important; font-size: .85rem !important; display: inline-flex !important; align-items: center; gap: 6px; } #tab-content .rounded-xl button[class*="border"][class*="rounded-full"], #tab-content .rounded-xl a[href*="/compose/"][class*="rounded-full"] { background: var(--glass-control) !important; color: var(--reach-ink) !important; border: 1px solid rgba(11,15,20,.09) !important; box-shadow: var(--glass-spec), 0 6px 16px -12px rgba(60,30,110,.4) !important; } #tab-content .rounded-xl a[href*="/compose/"][class*="rounded-full"] svg { color: var(--reach-pink); } /* Approvals in the Cards view: image on top, actions at the bottom */ #publish-body.reach-cards #tab-content .space-y-3:has(> .rounded-xl) { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; } #publish-body.reach-cards #tab-content .space-y-3 > .rounded-xl { position: relative; overflow: hidden; } #publish-body.reach-cards #tab-content .space-y-3 > .rounded-xl > .flex.items-start.gap-3.p-4 { flex-direction: column; align-items: stretch !important; padding: 0 0 16px !important; gap: 12px !important; } #publish-body.reach-cards #tab-content .space-y-3 > .rounded-xl > .flex.items-start > img.w-12, #publish-body.reach-cards #tab-content .space-y-3 > .rounded-xl > .flex.items-start > div.w-12 { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; border-radius: 0 !important; box-shadow: none; } #publish-body.reach-cards #tab-content .space-y-3 > .rounded-xl > .flex.items-start > input[type="checkbox"] { position: absolute; top: 14px; right: 14px; z-index: 2; } #publish-body.reach-cards #tab-content .space-y-3 > .rounded-xl > .flex.items-start > .flex-1, #publish-body.reach-cards #tab-content .space-y-3 > .rounded-xl > .flex.items-start > .flex-shrink-0:last-child { padding: 0 16px; } #publish-body.reach-cards #tab-content .space-y-3 > .rounded-xl > .flex.items-start > .flex-shrink-0:last-child > * { flex: 1; justify-content: center; } /* Filter chips (feeds, tags): the selected chip is soft Reach pink, not upstream green */ main :is(button, a).rounded-full.bg-green-50.border-green-200 { background: var(--brand-50) !important; border-color: var(--brand-200) !important; color: var(--brand-700) !important; } /* Create > Templates / Feeds: one scroll (the page), not a fixed-height box scrolling inside it. "Load more" uses hx-trigger="intersect", which watches the viewport, so it keeps working. */ main div[x-show="activeTab === 'templates'"], main div[x-show="activeTab === 'feeds'"] { height: auto !important; max-height: none !important; overflow: visible !important; } main div[x-show="activeTab === 'feeds'"] #feeds-tab-content, main div[x-show="activeTab === 'feeds'"] #feeds-tab-content > div, main div[x-show="activeTab === 'feeds'"] #feeds-tab-content .h-full { height: auto !important; } main #feed-events-list { overflow: visible !important; flex: none !important; padding-right: 0 !important; } /* ── 16. The window scrolls, not a box inside the sheet ───────────────── */ /* Upstream's shell is a 100vh flex box whose content div scrolls inside the main sheet, which puts the scrollbar inside the glass, inset by the page padding. Here the document scrolls instead (scrollbar at the window's right edge, momentum and overscroll like any web page), the sidebar stays pinned with position: sticky, and the sheet grows with its content. */ div.flex.h-screen.overflow-hidden:has(> aside) { height: auto !important; min-height: 100vh; overflow: visible !important; } div.flex.h-screen.overflow-hidden:has(> aside) > div.flex-1.flex.flex-col.overflow-hidden { overflow: visible !important; min-width: 0; } @media (min-width: 1024px) { div.flex.h-screen.overflow-hidden:has(> aside) > aside { position: sticky !important; top: 14px; height: calc(100vh - 28px); align-self: flex-start; } } main.bg-white { overflow: visible !important; } @media (min-width: 1024px) { main.bg-white { min-height: calc(100vh - 28px); } } main.bg-white > div.flex-1.min-h-0.overflow-y-auto { overflow: visible !important; min-height: auto !important; } /* With the window scrolling, the composer's Save / Queue bar pins to the bottom of the screen */ main .action-bar { position: sticky !important; bottom: 0; z-index: 20; background: rgba(255, 255, 255, .78) !important; -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%); border-top: 1px solid rgba(255, 255, 255, .9) !important; border-radius: 0 0 22px 22px; } /* Calendar legend: its inline dot colours follow the event palette above */ main span[style*="#3B82F6"] { background: #8B5CF6 !important; } main span[style*="#1D4ED8"] { color: #6D28D9 !important; } main span[style*="#6366F1"] { background: #13C2E3 !important; } main span[style*="#4338CA"] { color: #0E7490 !important; } /* Month view, days with posts: the "+" sits on the day-number row, at the left (the number is on the right), centred on that row instead of on top of the number. Empty days keep upstream's large centred "+". */ main .cal-day.cal-add-cell.has-posts .cal-add-btn { top: 12px !important; left: 12px !important; right: auto !important; width: 28px !important; height: 28px !important; z-index: 3; align-items: center; justify-content: center; } main .cal-day.cal-add-cell.has-posts .cal-add-btn svg { width: 13px; height: 13px; } /* ── 17. Publish: show / hide post images in the calendar ─────────────── */ .reach-media-toggle { position: relative; flex: none; width: 64px; height: 36px; padding: 0; border-radius: var(--r-control); cursor: pointer; background: rgba(11, 15, 20, .12); border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 3px rgba(11,15,20,.12), 0 10px 26px -18px rgba(60,30,110,.45); transition: background .3s var(--reach-ease); } .reach-media-toggle.on { background: var(--reach-pill); } .reach-media-knob { position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--reach-ink-3); box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .3s var(--reach-spring), color .3s; } .reach-media-toggle.on .reach-media-knob { transform: translateX(28px); color: var(--reach-pink); } .reach-media-toggle:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(255, 61, 154, .25); } /* Only meaningful in the calendar view */ body:not(:has(#calendar-content)) .reach-media-toggle { display: none; } /* Images off: posts go back to compact one-line pills */ .reach-cal-nomedia main .post-chip > img, .reach-cal-nomedia main .post-chip > video { display: none !important; } .reach-cal-nomedia main .post-chip:has(> img, > video) { flex-wrap: nowrap; padding: 7px 9px 7px 12px !important; } html[data-theme="dark"] main .cal-filters-scroll :is(button, a, select), html[data-theme="dark"] main .cal-filter-select { color: var(--reach-ink-2) !important; } html[data-theme="dark"] .im-plat { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: var(--reach-ink); } html[data-theme="dark"] .im-plat.verified { background: rgba(19, 194, 227, .14); border-color: rgba(19, 194, 227, .45); } html[data-theme="dark"] .im-plat.on { background: #fff; color: #000; } /* Composer pieces with their own white backgrounds (templates/composer/compose.html) */ html[data-theme="dark"] .caption-wrap, html[data-theme="dark"] .preview-card, html[data-theme="dark"] .acct-pill { background: rgba(255, 255, 255, .05) !important; border-color: rgba(255, 255, 255, .12) !important; color: var(--reach-ink); } html[data-theme="dark"] .acct-pill:hover { background: rgba(255, 255, 255, .09) !important; } html[data-theme="dark"] .acct-pill.selected { background: rgba(255, 61, 154, .16) !important; border-color: var(--reach-pink) !important; } html[data-theme="dark"] .caption-editor { background: transparent !important; color: var(--reach-ink); } /* ── 20. Social inbox: search, filters, rows, and the post a message is on ─ */ main .inbox-list-pane > div.border-b[style*="surface-1"] { background: transparent !important; border-bottom-color: var(--hairline) !important; padding: 14px 16px !important; gap: 10px !important; } main .inbox-list-pane input[name="q"] { height: 42px; padding-left: 40px !important; font-size: .88rem !important; border-radius: var(--r-control) !important; background-color: var(--glass-control) !important; border: 1px solid var(--glass-edge) !important; box-shadow: var(--glass-spec), 0 6px 16px -12px rgba(60,30,110,.4); } main .inbox-list-pane input[name="q"] + svg, main .inbox-list-pane .relative > svg.absolute { left: 15px !important; width: 15px !important; height: 15px !important; } main .filter-select { -webkit-appearance: none; appearance: none; height: 42px; padding: 0 36px 0 16px !important; font-size: .82rem !important; font-weight: 600 !important; color: var(--reach-ink-2) !important; border-radius: var(--r-control) !important; border: 1px solid var(--glass-edge) !important; background: var(--glass-control) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8796' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 13px center / 14px no-repeat !important; box-shadow: var(--glass-spec), 0 6px 16px -12px rgba(60,30,110,.4); cursor: pointer; } main .filter-select:hover { color: var(--reach-ink) !important; } main .inbox-row { padding: 14px 18px !important; gap: 12px !important; border-bottom: 1px solid var(--hairline) !important; transition: background .2s var(--reach-ease); } main .inbox-row:hover { background: rgba(255, 255, 255, .55) !important; } main .inbox-row.is-active { background: linear-gradient(90deg, rgba(255, 61, 154, .1), rgba(168, 85, 247, .05) 60%, transparent) !important; border-left: 3px solid var(--reach-pink) !important; } main .inbox-row img.w-8 { width: 36px !important; height: 36px !important; } main .badge-pill { padding: 3px 9px !important; font-size: 10.5px !important; border-radius: 999px !important; } main .inbox-detail-pane .bg-stone-50.rounded-xl { border-radius: 18px !important; background: var(--glass-card) !important; border-color: var(--glass-edge) !important; box-shadow: var(--glass-spec), 0 10px 24px -18px rgba(60,30,110,.4); } /* The post a comment or mention is on (landing/_inbox_post_context.html) */ .reach-inbox-post.compact { display: flex; align-items: center; gap: 7px; margin-top: 7px; min-width: 0; font-size: 11.5px; color: var(--reach-ink-3); } .reach-inbox-post.compact img, .reach-inbox-post.compact .ph { flex: none; width: 22px; height: 22px; border-radius: 6px; object-fit: cover; } .reach-inbox-post.compact .ph { display: grid; place-items: center; background: rgba(11, 15, 20, .06); } .reach-inbox-post.compact .on { flex: none; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; font-family: var(--brand-font-mono); } .reach-inbox-post.compact .cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--reach-ink-2); } .reach-inbox-post.card { margin-bottom: 16px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 61, 154, .07), rgba(19, 194, 227, .06)), var(--glass-card); border: 1px solid var(--glass-edge); box-shadow: var(--glass-spec), 0 12px 28px -20px rgba(60,30,110,.45); } .reach-inbox-post.card .label { font-family: var(--brand-font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--reach-ink-3); margin-bottom: 10px; } .reach-inbox-post.card .body { display: flex; gap: 14px; align-items: flex-start; } .reach-inbox-post.card .media { flex: none; display: block; } .reach-inbox-post.card .media img { width: 92px; height: 115px; object-fit: cover; border-radius: 12px; box-shadow: 0 10px 20px -12px rgba(0,0,0,.45); } .reach-inbox-post.card .media .ph:not([hidden]) { display: grid; place-items: center; width: 92px; height: 115px; border-radius: 12px; background: rgba(11, 15, 20, .06); color: var(--reach-ink-3); } .reach-inbox-post .ph[hidden], .reach-inbox-post img[hidden] { display: none; } .reach-inbox-post.card .text { min-width: 0; flex: 1; } .reach-inbox-post.card .cap { margin: 0 0 10px; font-size: .88rem; line-height: 1.5; color: var(--reach-ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; } .reach-inbox-post.card .cap.muted { color: var(--reach-ink-3); font-style: italic; } .reach-inbox-post.card .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--reach-ink-3); } .reach-inbox-post.card .plat { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--reach-ink-2); } .reach-inbox-post.card .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .reach-inbox-post.card .links a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--glass-control); border: 1px solid var(--glass-edge); color: var(--reach-ink); text-decoration: none; } .reach-inbox-post.card .links a:first-child { background: var(--reach-pill); color: #fff; border-color: transparent; } html[data-theme="dark"] main .inbox-row:hover { background: rgba(255, 255, 255, .04) !important; } html[data-theme="dark"] .reach-inbox-post .ph { background: rgba(255, 255, 255, .08); } /* Inbox rows: platform icon stacked above the checkbox in one narrow column */ main .inbox-row { display: grid !important; grid-template-columns: 22px 36px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px !important; row-gap: 10px; align-items: start; position: relative; } main .inbox-row > div:nth-child(1) { grid-column: 1; grid-row: 2; justify-self: center; padding-top: 0 !important; } main .inbox-row > div:nth-child(2) { grid-column: 1; grid-row: 1; justify-self: center; padding-top: 2px !important; } main .inbox-row > div:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; } main .inbox-row > div:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; min-width: 0; } main .inbox-row > div:nth-child(1) input[type="checkbox"] { width: 18px !important; height: 18px !important; border-radius: 6px !important; } /* ── 21. Analytics: same cards, tabs and menus as the rest of the app ──── */ main .a-card { background: var(--glass-card) !important; border: 1px solid var(--glass-edge) !important; border-radius: var(--r-card) !important; box-shadow: var(--glass-spec), var(--glass-drop) !important; } main .a-card-hover:hover { transform: none !important; border-color: rgba(255, 61, 154, .28) !important; box-shadow: var(--glass-spec), var(--glass-drop-hover) !important; } main .a-pill-group { padding: 5px !important; gap: 4px; background: rgba(255, 255, 255, .55) !important; border: 1px solid var(--glass-edge) !important; box-shadow: var(--glass-spec), 0 10px 26px -18px rgba(60,30,110,.45); } main .a-pill-group > a, main .a-pill-group > button { height: 36px; display: inline-flex; align-items: center; padding: 0 16px !important; font-size: .85rem !important; color: var(--reach-ink-2) !important; } main .a-pill-group > a:hover, main .a-pill-group > button:hover { background: rgba(255, 255, 255, .8) !important; color: var(--reach-ink) !important; } main .a-pill-group > a.active, main .a-pill-group > button.active { background: var(--reach-pill) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 22px -10px rgba(255, 61, 154, .7) !important; } main .a-table tbody tr { border-bottom-color: var(--hairline) !important; } .a-drawer { background: rgba(255, 255, 255, .94) !important; -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-left: 1px solid var(--glass-edge); } html[data-theme="dark"] .a-drawer { background: rgba(18, 18, 22, .96) !important; border-left-color: rgba(255, 255, 255, .1); } html[data-theme="dark"] main .a-pill-group { background: rgba(255, 255, 255, .06) !important; } html[data-theme="dark"] main .a-pill-group > a:not(.active):hover, html[data-theme="dark"] main .a-pill-group > button:not(.active):hover { background: rgba(255, 255, 255, .1) !important; } html[data-theme="dark"] main .a-delta.neutral { background: rgba(255, 255, 255, .08) !important; color: var(--reach-ink-2) !important; } /* Inline white controls in analytics (account picker, page arrows). Alpine rewrites the style attribute on x-show, so #fff can turn into rgb(255, 255, 255). */ html[data-theme="dark"] main :is([style*="background: #fff"], [style*="background: rgb(255, 255, 255)"]) { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .12) !important; color: var(--reach-ink) !important; } html[data-theme="dark"] main [style*="position: absolute"]:is([style*="background: #fff"], [style*="background: rgb(255, 255, 255)"]) { background: rgba(24, 24, 28, .97) !important; box-shadow: 0 24px 50px -16px rgba(0,0,0,.9) !important; } /* ── 22. Dark floating glass: one surface for every menu, modal and drawer ── */ /* Upstream paints these three ways (bg-white utilities, inline var(--surface-0), page