:root{ --onyx:#141413; --graphite:#FFFFFF; --paper:#FAF6E8; --stone:#B9B4A9; --ash:#5F5C55; --lacquer:#5C1A16; --brass:#8C7449; --live-green:#2F6B3E; --sky-blue:#3B82C4; --font-display:'Newsreader',serif; --font-body:'Inter Tight',sans-serif; --radius-sm:8px; --radius-md:14px; --radius-pill:999px; /* Text-only greens for soft-tint badges and KPI figures. --live-green and the sage below are FILL colours, dark enough to carry cream text on top, so reusing them as text on a dark ground reads as almost invisible. These are the same two hues lifted to stay legible, and they exist separately so the fills keep their exact identity. */ --green-ink:#2F6B3E; --sage-ink:#4A5D42; /* Brighter secondary accent, the marketing site's lighter emphasis red, distinct from --lacquer (the true brand fill color, unchanged). Used only for hover/active liveliness, never as a fill. */ --rust:#B8321F; /* --lacquer is the brand's true deep-brick red and never changes with theme; it is a FILL colour (buttons, badges, blocks) with Paper or Stone text sitting on top, and stays confident in both themes. --accent-ink is what the rest of the UI reaches for when an accent colour is needed directly as text, an icon, or a thin rule/border. On light grounds that's still Lacquer (fine contrast on Paper/ Stone). On dark grounds Lacquer all but disappears against Onyx/ Graphite (~1.1–1.4:1), so --accent-ink swaps to --brass instead, see the dark override below. Hover tints are derived from the same two source colours so there's one place to retune either. */ --accent-ink:var(--lacquer); --accent-fill-hover:color-mix(in srgb, var(--lacquer) 82%, black); --accent-ink-hover:color-mix(in srgb, var(--lacquer) 78%, black); /* Foreground-on-fill tokens: paired to the specific background colour they sit on, never to the theme. --paper and --onyx are the swapping "ground/ink" pair (see the dark override below); they invert together, so a --paper-on-onyx pairing stays readable in both themes by design. --lacquer and --brass are NOT part of that swap; they keep (roughly) the same identity in both themes, so anything filled with them needs its OWN foreground that likewise never flips, otherwise, in dark mode, --paper resolves to the dark ground colour and the text disappears into the fill. Defined once here in :root and deliberately left untouched by the dark-theme override. */ --on-lacquer:#FAF6E8; --on-brass:#fff; --on-stone:#fff; --on-live-green:#FAF6E8; --on-sky-blue:#FAF6E8; } /* Dark theme, toggled via a data-theme="dark" attribute on . Only the custom properties change; every rule below already reads colors through var(--paper)/var(--onyx)/etc., so this is a pure override layer, not a restyle. --paper/--onyx swap the same two values Creme mode already uses (background <-> ink). --paper and --graphite hold the two dark surface tones, with Graphite as the main background and Onyx as the secondary/highlight surface (cards, inputs), softer than defaulting the whole page to the darkest tone. --stone/--ash/--brass are re-tuned for contrast against a dark background, same hues. --lacquer is NOT re-tuned; it stays the true brand red and is only ever used as a fill here. --accent-ink swaps to --brass, since Lacquer text/icons/borders on Onyx or Graphite read as nearly invisible. --on-lacquer/--on-brass/--on-stone are intentionally absent from this override; they're anchored in :root and must stay put for their fills to stay readable. */ body[data-theme="dark"]{ --paper:#2C2C2B; --onyx:#FAF6E8; --graphite:#141413; --stone:#55524A; --ash:#B0AB9F; --brass:#9C8358; --green-ink:#7CBE8B; --sage-ink:#A2C795; --accent-ink:var(--brass); --accent-fill-hover:color-mix(in srgb, var(--lacquer) 78%, white); --accent-ink-hover:color-mix(in srgb, var(--brass) 78%, white); } *{box-sizing:border-box;} /* Reserves the vertical scrollbar's width permanently, whether or not the current page is tall enough to actually need it, without this, switching between a short page (e.g. Archive with few items) and a tall one (e.g. Team Members) toggles the scrollbar on/off, which changes the viewport's available width and visibly shifts every centered/fixed-position element (.wrap, .organiser) sideways. This is the shared root cause behind the horizontal-shift and organiser/topbar overlap issues below; one fix here instead of patching each screen. */ html{scrollbar-gutter:stable;} html,body{margin:0;min-height:100vh;background:var(--paper);color:var(--onyx);font-family:var(--font-body);font-weight:300;color-scheme:light;} /* Ambient brand flare, soft, off-screen radial washes fixed behind all content. The one purely decorative element in the app: it's what stops a dense data UI from reading as a bare spreadsheet. Built only from --lacquer/--rust/--brass so it reads as O·ku rather than generic SaaS, and pitched much stronger on dark (where there's room for it to glow) than on light (where a heavy red wash over cream turns muddy). */ body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none; background: radial-gradient(55vw 55vw at 6% -14%, color-mix(in srgb, var(--lacquer) 24%, transparent), transparent 68%), radial-gradient(45vw 45vw at 103% 2%, color-mix(in srgb, var(--rust) 16%, transparent), transparent 68%), radial-gradient(42vw 42vw at 88% 98%, color-mix(in srgb, var(--brass) 14%, transparent), transparent 70%);} body[data-theme="dark"]::before{ background: radial-gradient(55vw 55vw at 6% -14%, color-mix(in srgb, var(--lacquer) 62%, transparent), transparent 66%), radial-gradient(45vw 45vw at 103% 2%, color-mix(in srgb, var(--rust) 30%, transparent), transparent 66%), radial-gradient(42vw 42vw at 88% 98%, color-mix(in srgb, var(--brass) 22%, transparent), transparent 70%);} .wrap,.login-shell{position:relative;z-index:1;} body[data-theme="dark"]{color-scheme:dark;} button,input,select{font-family:inherit;} :focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;} @media (prefers-reduced-motion: reduce){*{transition:none !important;}} .wrap{width:100%;margin:0 auto;padding:24px 28px 60px;} .topbar{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--stone);margin-bottom:28px;flex-wrap:wrap;gap:12px;} .brand img{height:30px;display:block;} .who{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ash);} .who b{color:var(--onyx);font-weight:400;} .btn{border:1px solid transparent;border-radius:var(--radius-pill);padding:10px 20px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font-body);} .btn-lacquer{background:var(--lacquer);color:var(--on-lacquer);border-color:var(--lacquer);} .btn-lacquer:hover{background:var(--accent-fill-hover);border-color:var(--accent-fill-hover);} .btn-ghost{background:transparent;border:1px solid color-mix(in srgb, var(--onyx) 35%, transparent);color:var(--onyx);} .btn-ghost:hover{border-color:var(--rust);color:var(--rust);} .btn-text{background:none;border:none;color:var(--ash);font-size:12px;cursor:pointer;text-decoration:underline;padding:0;} .icon-btn{padding:8px !important;display:inline-flex;align-items:center;justify-content:center;} .icon-btn svg{width:16px;height:16px;display:block;} .btn svg{width:14px;height:14px;flex-shrink:0;display:block;} .err{color:var(--accent-ink);font-size:12px;margin-top:8px;min-height:16px;} /* login */ .login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;} .login-card{width:380px;max-width:90vw;text-align:center;} .login-card img{height:52px;margin-bottom:6px;} .login-card .sub{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-bottom:40px;} .login-card .prompt{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:17px;margin-bottom:22px;color:var(--onyx);} .field{margin-bottom:12px;text-align:left;} .field label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ash);margin-bottom:5px;} .field input,.field select{width:100%;padding:8px 10px;border:1px solid var(--stone);border-radius:var(--radius-sm);background:var(--graphite);font-size:13px;color:var(--onyx);} .login-card .btn{width:100%;margin-top:10px;padding:11px;} .pw-wrap{position:relative;} .pw-wrap input{padding-right:38px;} .pw-toggle{position:absolute;top:50%;right:6px;transform:translateY(-50%);background:none;border:none;padding:4px;cursor:pointer;color:var(--ash);display:flex;align-items:center;} .pw-toggle:hover{color:var(--onyx);} .view-title{font-family:var(--font-display);font-weight:300;font-size:26px;margin:0 0 4px;} .view-sub{font-size:13px;color:var(--ash);margin:0 0 22px;} .card{position:relative;background:color-mix(in srgb, var(--graphite) 88%, transparent);border:1px solid color-mix(in srgb, var(--onyx) 12%, transparent);border-radius:var(--radius-md);padding:16px 18px;margin-bottom:12px;transition:box-shadow .15s ease,border-color .15s ease;} .card:hover{box-shadow:0 4px 20px color-mix(in srgb, var(--onyx) 12%, transparent);border-color:color-mix(in srgb, var(--accent-ink) 35%, transparent);} /* KPI tiles, the at-a-glance strip at the top of the task views. Kept translucent so the ambient flare tints them, which is what visually ties the "dashboard" band to the background rather than letting it sit on top as a detached row of boxes. */ .kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:20px 0 26px;} .kpi-tile{position:relative;overflow:hidden;background:color-mix(in srgb, var(--graphite) 78%, transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid color-mix(in srgb, var(--onyx) 12%, transparent);border-radius:var(--radius-md);padding:18px 20px;transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;} .kpi-tile:hover{box-shadow:0 6px 26px color-mix(in srgb, var(--onyx) 14%, transparent);border-color:color-mix(in srgb, var(--accent-ink) 32%, transparent);transform:translateY(-2px);} .kpi-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;} /* Tinted icon chip, the single most repeated device across every modern dashboard reference; here it carries the same color as its metric. */ .kpi-icon{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:color-mix(in srgb, var(--ash) 16%, transparent);color:var(--ash);} .kpi-icon svg{width:15px;height:15px;} .kpi-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ash);} .kpi-value{font-family:var(--font-body);font-weight:700;font-size:34px;letter-spacing:-.03em;color:var(--onyx);line-height:1;} .kpi-accent .kpi-value{color:var(--accent-ink);} .kpi-accent .kpi-icon{background:color-mix(in srgb, var(--accent-ink) 15%, transparent);color:var(--accent-ink);} .kpi-brass .kpi-value{color:var(--brass);} .kpi-brass .kpi-icon{background:color-mix(in srgb, var(--brass) 16%, transparent);color:var(--brass);} .kpi-green .kpi-value{color:var(--green-ink);} .kpi-green .kpi-icon{background:color-mix(in srgb, var(--green-ink) 16%, transparent);color:var(--green-ink);} /* ---- Digital asset tiles: a responsive grid of square-ish cards so many assets fit one screen, each colour-coded by status. Shared shape used by both the team Assets view and the client portal. ---- */ .asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:8px;} .asset-tile{position:relative;display:flex;flex-direction:column;gap:10px;background:color-mix(in srgb, var(--graphite) 88%, transparent);border:1px solid color-mix(in srgb, var(--onyx) 12%, transparent);border-left:4px solid var(--stone);border-radius:var(--radius-md);padding:15px 16px;transition:box-shadow .15s ease,border-color .15s ease,transform .15s ease;} .asset-tile:hover{box-shadow:0 6px 22px color-mix(in srgb, var(--onyx) 13%, transparent);transform:translateY(-2px);} /* Left accent bar carries the status colour so the whole grid is scannable. */ .asset-tile.acc-green{border-left-color:var(--green-ink);} .asset-tile.acc-brass{border-left-color:var(--brass);} .asset-tile.acc-red{border-left-color:var(--accent-ink);} .asset-tile.acc-grey{border-left-color:var(--stone);} .asset-tile-type{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ash);display:flex;align-items:center;gap:6px;} .asset-tile-type .at-ico{width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--ash) 15%, transparent);color:var(--ash);flex-shrink:0;} .asset-tile-type .at-ico svg{width:13px;height:13px;} .asset-tile-name{font-family:var(--font-display);font-weight:400;font-size:17px;line-height:1.2;color:var(--onyx);} .asset-tile-id{font-size:12px;color:var(--ash);word-break:break-all;margin-top:-4px;} .asset-tile-meta{display:flex;flex-direction:column;gap:5px;margin-top:auto;font-size:12px;} .asset-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:4px 10px;border-radius:var(--radius-pill);white-space:nowrap;} .asset-chip-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;} /* URL rendered as a pill button, not a bare link (per the design ask). */ a.asset-openbtn{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:4px 12px;border-radius:var(--radius-pill);border:1px solid color-mix(in srgb, var(--onyx) 22%, transparent);color:var(--onyx);text-decoration:none;background:color-mix(in srgb, var(--onyx) 4%, transparent);transition:background .15s,border-color .15s,color .15s;} a.asset-openbtn:hover{background:var(--rust);border-color:var(--rust);color:#fff;} .asset-tile-actions{display:flex;flex-wrap:wrap;gap:6px;padding-top:10px;border-top:1px solid color-mix(in srgb, var(--onyx) 8%, transparent);} /* Filter bar shared with the rest of the app's look. */ .asset-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0;} .asset-filters select{font-size:12px;padding:7px 10px;border-radius:var(--radius-sm);border:1px solid var(--stone);background:var(--graphite);color:var(--onyx);} .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;} .card .client{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-ink);margin-bottom:4px;} .card .task{font-family:var(--font-display);font-weight:400;font-size:18px;} .card .dates{font-size:13px;color:var(--ash);margin-top:8px;} .status-select{font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:5px 10px;border-radius:9px;white-space:nowrap;border:none;cursor:pointer;} .platform-badge{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:10px;color:#fff;white-space:nowrap;} /* Soft-tint badges: a translucent wash of the status color as background with the full-strength color as text, instead of a solid fill block, reads as "modern dashboard" (this is the same treatment nearly every current SaaS admin panel uses for status pills) without introducing any color outside the existing brand palette. */ /* ---- Files on briefs ---- */ .bf-grid{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;} .bf-thumb{position:relative;display:block;width:96px;height:96px;border-radius:10px;overflow:hidden;background:color-mix(in srgb, var(--onyx) 8%, transparent);} .bf-thumb img{width:100%;height:100%;object-fit:cover;display:block;} .bf-file{position:relative;display:flex;align-items:center;gap:8px;max-width:280px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb, var(--onyx) 7%, transparent);color:var(--onyx);text-decoration:none;font-size:12.5px;} .bf-file:hover{background:color-mix(in srgb, var(--onyx) 12%, transparent);} .bf-ext{flex:none;font-size:10px;font-weight:700;letter-spacing:.04em;padding:4px 6px;border-radius:6px;background:color-mix(in srgb, var(--lacquer) 22%, transparent);color:color-mix(in srgb, var(--lacquer) 55%, var(--onyx));} .bf-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .bf-sz{flex:none;color:var(--ash);font-size:11.5px;} .bf-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(20,20,19,.72);color:#FAF6E8;font-size:11px;cursor:pointer;display:none;align-items:center;justify-content:center;min-height:0;padding:0;} .bf-thumb:hover .bf-del,.bf-file:hover .bf-del{display:flex;} @media (hover:none){ .bf-del{display:flex;} } .bf-drop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px;border:1.5px dashed color-mix(in srgb, var(--onyx) 25%, transparent);border-radius:12px;text-align:center;font-size:13px;color:var(--onyx);} .bf-drop.over{border-color:var(--lacquer);background:color-mix(in srgb, var(--lacquer) 8%, transparent);} .bf-pick{background:none;border:none;padding:0;font:inherit;font-weight:600;color:color-mix(in srgb, var(--lacquer) 45%, var(--onyx));cursor:pointer;text-decoration:underline;min-height:0;} .bf-hint{font-size:11.5px;color:var(--ash);} .bf-chosen{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;} .bf-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:5px 8px 5px 10px;border-radius:999px;background:color-mix(in srgb, var(--onyx) 8%, transparent);} .bf-chip small{color:var(--ash);} .bf-chip button{background:none;border:none;color:var(--ash);cursor:pointer;font-size:11px;padding:0 2px;min-height:0;} .bf-add{background:none;border:none;padding:0;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:color-mix(in srgb, var(--lacquer) 45%, var(--onyx));cursor:pointer;min-height:0;} /* ---- Calendar: schedule view, and the phone layout ---- */ .cal-fab,.cal-scrim,.ct-fab,.ct-scrim{display:none;} .cal-chips{display:flex;flex-direction:column;gap:3px;width:100%;} .cal-sch{display:flex;flex-direction:column;} .cal-sch-day{display:flex;gap:14px;padding:12px 4px;} .cal-sch-day + .cal-sch-day{box-shadow:inset 0 1px 0 color-mix(in srgb, var(--onyx) 7%, transparent);} .cal-sch-date{flex:none;width:46px;display:flex;flex-direction:column;align-items:center;line-height:1.15;padding-top:2px;} .cal-sch-date .dow{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ash);} .cal-sch-date .num{font-family:var(--font-display);font-size:24px;margin:2px 0;} .cal-sch-date .mon{font-size:11px;color:var(--ash);} .cal-sch-day.today .cal-sch-date .num{color:#FAF6E8;background:var(--lacquer);border-radius:999px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:17px;font-family:var(--font-body);font-weight:600;} .cal-sch-list{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;} .cal-sch-ev{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;text-align:left;border:none;border-radius:10px;padding:9px 12px;background:color-mix(in srgb, var(--ev) 20%, transparent);box-shadow:inset 3px 0 0 var(--ev);color:var(--onyx);font-family:var(--font-body);cursor:pointer;} .cal-sch-ev .s{font-size:14px;font-weight:600;line-height:1.3;} .cal-sch-ev .t{font-size:12.5px;color:var(--ash);} .cal-sch-ev.cancelled{opacity:.55;text-decoration:line-through;} .cal-sch-none{font-size:13px;color:var(--ash);padding:8px 0;} .cal-sch-more{display:block;margin:14px auto 0;} .cal-daylist{margin-top:14px;} @media (max-width:767px){ .cal-bar{gap:6px;} #cal-new{display:none;} .cal-bar .cal-title{order:-1;flex:1 1 auto;width:auto;margin:0;font-size:21px;} .cal-views{margin-left:0;width:100%;order:9;} .cal-view{flex:1;padding:8px 4px;} .cal-fab,.ct-fab{display:inline-flex;align-items:center;justify-content:center;position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:700;width:56px;height:56px;border:none;border-radius:18px;background:var(--lacquer);color:#FAF6E8;font-size:30px;line-height:1;box-shadow:0 8px 24px rgba(20,20,19,.32);cursor:pointer;} .cal-month .cal-dow{padding:6px 0;text-align:center;font-size:10px;} .cal-month .cal-cell{min-height:54px;padding:5px 2px;align-items:center;gap:3px;} .cal-month .cal-cell .cal-num{text-align:center;padding:0;} .cal-month .cal-chips{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:3px;} .cal-month .cal-chip{width:6px;height:6px;padding:0;border-radius:50%;background:var(--ev) !important;border:none !important;font-size:0;pointer-events:none;} .cal-month .cal-chip .t,.cal-month .cal-chip .s,.cal-month .cal-more{display:none;} .cal-month .cal-cell.sel{box-shadow:inset 0 0 0 2px var(--lacquer);border-radius:10px;} .cal-scrim,.ct-scrim{display:block;position:fixed;inset:0;z-index:1150;background:rgba(0,0,0,.5);} .cal-sheet{position:fixed;left:0;right:0;bottom:0;max-width:none;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;z-index:1200;margin:0 !important;border-radius:18px 18px 0 0 !important;padding:18px 16px calc(20px + env(safe-area-inset-bottom)) !important;background:var(--graphite) !important;box-shadow:0 -10px 40px rgba(0,0,0,.35);animation:notifSheetIn .22s ease;} .cal-sheet.cal-editor{top:0;max-height:none;border-radius:0 !important;} #ct-add{display:none;} #ct-search{max-width:none !important;min-width:0 !important;flex:1 1 100% !important;} #ct-import{padding:7px 14px !important;font-size:12.5px;} .ct-editor{position:fixed;inset:0;z-index:1200;margin:0 !important;border-radius:0 !important;overflow-y:auto;overscroll-behavior:contain;padding:18px 16px calc(24px + env(safe-area-inset-bottom)) !important;background:var(--graphite) !important;} } /* Contacts on a phone: a list by letter, and a sheet per person. */ .ct-mgroup{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);padding:14px 8px 4px;} .ct-mrow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;padding:9px 8px;border-radius:12px;color:var(--onyx);font-family:var(--font-body);cursor:pointer;} .ct-mrow:active{background:color-mix(in srgb, var(--onyx) 7%, transparent);} .ct-mtext{flex:1;min-width:0;display:flex;flex-direction:column;} .ct-mtext .n{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ct-mtext .e{font-size:12.5px;color:var(--ash);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ct-mstar{color:var(--brass);font-size:15px;} .ct-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1200;max-height:85vh;overflow-y:auto;overscroll-behavior:contain;background:var(--graphite);border-radius:18px 18px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.35);animation:notifSheetIn .22s ease;} .ct-sheet-head{display:flex;align-items:center;gap:14px;} .ct-sheet-head .n{font-family:var(--font-display);font-size:22px;line-height:1.2;} .ct-sheet-head .e{font-size:13px;color:var(--ash);margin-top:2px;} .ct-sheet-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:8px;margin:18px 0 10px;} .ct-sheet-acts > *{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:none;border-radius:12px;background:color-mix(in srgb, var(--onyx) 7%, transparent);color:var(--onyx);font-family:var(--font-body);font-size:12px;text-decoration:none;cursor:pointer;line-height:1.2;} .ct-sheet-acts svg{width:20px;height:20px;} .ct-sheet-row{padding:10px 4px;box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--onyx) 7%, transparent);} .ct-sheet-row .l{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);} .ct-sheet-row .v{font-size:14px;margin-top:2px;word-break:break-word;white-space:pre-wrap;} /* ---- Repeating calendar events ---- */ .cal-r-day{border:none;border-radius:999px;width:34px;height:34px;font-size:12px;cursor:pointer;background:color-mix(in srgb, var(--onyx) 9%, transparent);color:var(--onyx);font-family:var(--font-body);min-height:0;padding:0;} .cal-r-day.on{background:var(--lacquer);color:#FAF6E8;} /* ---- Emails filed on tasks and deliverables ---- */ .ml-list{display:flex;flex-direction:column;gap:6px;margin-top:10px;} .ml-item{border-radius:10px;background:color-mix(in srgb, var(--onyx) 5%, transparent);padding:8px 10px;} .ml-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .ml-ico{display:inline-flex;color:var(--ash);} .ml-ico svg{width:15px;height:15px;} .ml-title{background:none;border:none;padding:0;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--onyx);cursor:pointer;text-align:left;min-height:0;} .ml-title:hover{text-decoration:underline;} .ml-meta{font-size:12px;color:var(--ash);} .ml-act{margin-left:auto;background:none;border:none;font-family:var(--font-body);font-size:12px;font-weight:600;color:color-mix(in srgb, var(--lacquer) 45%, var(--onyx));cursor:pointer;padding:2px 4px;min-height:0;} .ml-x{background:none;border:none;color:var(--ash);cursor:pointer;font-size:11px;padding:2px 4px;min-height:0;} .ml-body{margin-top:8px;font-size:12.5px;color:var(--onyx);} .oku-modal .oku-submit-fields select{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:13.5px;padding:10px 12px;border-radius:var(--radius-sm);} /* ---- Work submission and review ---- */ .rv-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap;} .rv-chip.under{background:color-mix(in srgb, var(--brass) 20%, transparent);color:var(--brass);} .rv-chip.feedback{background:color-mix(in srgb, var(--lacquer) 16%, transparent);color:color-mix(in srgb, var(--lacquer) 55%, var(--onyx));} .rv-chip.approved{background:color-mix(in srgb, var(--green-ink) 18%, transparent);color:var(--green-ink);} .rv-chip.sm{font-size:10px;padding:2px 7px;} .rv-status{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none;} .rv-feedback{margin-top:10px;padding:10px 12px;border-left:3px solid var(--lacquer);background:color-mix(in srgb, var(--lacquer) 8%, transparent);border-radius:0 10px 10px 0;font-size:13px;} .rv-feedback .h,.rv-waiting .h{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);margin-bottom:4px;} .rv-waiting{margin-top:10px;padding:10px 12px;border-left:3px solid var(--brass);background:color-mix(in srgb, var(--brass) 8%, transparent);border-radius:0 10px 10px 0;font-size:13px;} .rv-link{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:color-mix(in srgb, var(--lacquer) 45%, var(--onyx));text-decoration:none;} .rv-link:hover{text-decoration:underline;} .rv-thread{margin-top:10px;padding-left:12px;border-left:2px solid color-mix(in srgb, var(--onyx) 12%, transparent);display:flex;flex-direction:column;gap:10px;} .rv-round .who{font-size:12px;color:var(--ash);} .rv-round .body{font-size:13px;margin-top:3px;} .rv-toggle{background:none;border:none;padding:6px 0 0;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:color-mix(in srgb, var(--lacquer) 45%, var(--onyx));cursor:pointer;min-height:0;} .rv-toggle:hover{text-decoration:underline;} .rv-card .rv-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;} .rv-fb-box{margin-top:12px;} .rv-fb-box textarea{width:100%;min-height:96px;font-family:var(--font-body);font-size:13px;line-height:1.5;padding:10px 12px;border-radius:var(--radius-sm);box-sizing:border-box;resize:vertical;} .rv-section{margin:26px 0 10px;font-family:var(--font-display);font-weight:400;font-size:18px;color:var(--accent-ink);} .rv-section span{font-family:var(--font-body);font-size:12px;color:var(--ash);margin-left:8px;} .rv-recent{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:10px;cursor:pointer;} .rv-recent:hover{background:color-mix(in srgb, var(--onyx) 6%, transparent);} .rv-recent .t{font-size:13.5px;font-weight:500;} .rv-recent .m{font-size:12px;color:var(--ash);margin-top:2px;} .oku-modal .oku-submit-fields{display:flex;flex-direction:column;gap:10px;text-align:left;margin:4px 0 16px;} .oku-modal .oku-submit-fields label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);display:block;margin-bottom:4px;} .oku-modal .oku-submit-fields input,.oku-modal .oku-submit-fields textarea{width:100%;box-sizing:border-box;font-family:var(--font-body);font-size:13.5px;padding:10px 12px;border-radius:var(--radius-sm);} .oku-modal .oku-submit-fields textarea{min-height:90px;resize:vertical;line-height:1.5;} .oku-modal .oku-submit-prev{text-align:left;font-size:12.5px;padding:8px 10px;border-left:3px solid var(--lacquer);background:color-mix(in srgb, var(--lacquer) 8%, transparent);border-radius:0 8px 8px 0;margin-bottom:12px;} .st-not{background:color-mix(in srgb, var(--stone) 35%, transparent);color:var(--ash);} .st-progress{background:color-mix(in srgb, var(--brass) 18%, transparent);color:var(--brass);} .st-done{background:color-mix(in srgb, var(--green-ink) 18%, transparent);color:var(--green-ink);} /* green so a Done task visibly stands out as ready to archive, same fill as the calendar's "Live" status */ .assignee{font-size:10px;color:var(--ash);} /* Deliverable statuses (client portal), st-progress reuses the task palette above; the other four are new, client-facing-only states. */ .st-pending{background:color-mix(in srgb, var(--accent-ink) 15%, transparent);color:var(--accent-ink);} .st-completed{background:var(--onyx);color:var(--paper);} /* Approved is a deliberate one-off exception to the brand palette, a muted sage, since green doesn't exist anywhere else in it. Feedback Provided reuses Onyx (same fill as st-completed; both read as "a decision has landed", no new color invented for it). Cancelled reuses Lacquer, the exact same brick red already used for overdue tasks elsewhere in this app, not a new color either. */ .st-approved{background:color-mix(in srgb, var(--sage-ink) 18%, transparent);color:var(--sage-ink);} .st-feedback{background:var(--onyx);color:var(--paper);} .st-cancelled{background:color-mix(in srgb, var(--accent-ink) 15%, transparent);color:var(--accent-ink);} /* Content Calendar month-grid view */ .cal-grid-week-labels{display:grid;grid-template-columns:repeat(7,1fr);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ash);margin-bottom:4px;text-align:center;} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--stone);border:1px solid var(--stone);margin-bottom:20px;} .cal-cell{background:var(--graphite);min-height:92px;padding:6px;overflow:hidden;} .cal-cell-empty{background:var(--paper);} .cal-cell-day{font-size:11px;color:var(--ash);margin-bottom:4px;} .cal-chip{font-size:10px;padding:2px 5px;border-radius:3px;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;} .add-form{background:var(--graphite);border:1px dashed var(--stone);border-radius:var(--radius-md);padding:16px 18px;margin-bottom:22px;} .add-form .row{display:grid;grid-template-columns:1.3fr 1.6fr 1fr 1fr;gap:10px;margin-bottom:10px;} .add-form input,.add-form select{padding:8px 10px;border:1px solid var(--stone);border-radius:var(--radius-sm);font-size:13px;background:var(--paper);width:100%;} .add-form input[type="checkbox"]{width:auto;padding:0;border:none;background:none;} .add-form label{font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:var(--ash);display:block;margin-bottom:4px;} table{width:100%;border-collapse:collapse;font-size:13px;} thead th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-ink);padding:0 10px 10px;border-bottom:2px solid var(--stone);font-weight:400;} tbody td{padding:11px 10px;border-bottom:1px solid var(--stone);vertical-align:middle;} .filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;} .chip{font-size:11px;padding:6px 12px;border-radius:12px;border:1px solid var(--stone);background:var(--graphite);cursor:pointer;} .chip.active{background:var(--onyx);color:var(--paper);border-color:var(--onyx);} /* onyx/paper swap pair */ select.inline,input.inline{font-size:12px;padding:4px 6px;border-radius:var(--radius-sm);border:1px solid var(--stone);background:var(--paper);} .del{display:inline-block;background:color-mix(in srgb, var(--onyx) 5%, transparent);border:1px solid color-mix(in srgb, var(--onyx) 14%, transparent);color:var(--onyx);font-family:var(--font-body);font-size:11px;font-weight:500;line-height:1.4;white-space:nowrap;cursor:pointer;text-decoration:none;padding:5px 12px;border-radius:var(--radius-pill);margin:2px 4px 2px 0;transition:background .15s ease,border-color .15s ease,color .15s ease;} .del:hover{background:var(--rust);border-color:var(--rust);color:#fff;} .empty{font-size:12px;color:var(--ash);padding:20px 0;} .admin-users{background:var(--graphite);border:1px solid var(--stone);padding:18px;margin-top:36px;} /* The calendar table gained enough columns (13, including two wrapped text ones) that it can outgrow its container at the narrower end of desktop widths; this scrolls just the table horizontally instead of the whole page. At mobile/tablet widths .responsive-table's own rules already stack every cell into a block, so there's nothing wide to scroll and this never triggers there. */ .calendar-table-scroll{overflow-x:auto;} /* Post Creative and Caption can run to several paragraphs, clamped to 12 lines so one long post can't blow the whole table's row height out; a "Read more" button (added in JS only when content actually overflows this) opens the full text in the .readmore-overlay modal instead of expanding the cell in place. */ .cal-clamp-12{display:-webkit-box;-webkit-line-clamp:12;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;} /* Read-more popup, a small, always-centered card at every viewport width (unlike .sheet-overlay/.sheet-panel, which is built for editing forms and deliberately goes full-width/near-full-height as a bottom sheet on narrow screens). This is just text to read, so it stays the same modest size and shape everywhere. */ .readmore-overlay{display:none;position:fixed;inset:0;z-index:700;background:rgba(20,20,19,.45);align-items:center;justify-content:center;padding:20px;} .readmore-overlay.visible{display:flex;} .readmore-panel{background:var(--graphite);width:100%;max-width:560px;max-height:80vh;overflow-y:auto;border-radius:var(--radius-md);display:flex;flex-direction:column;} .readmore-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--stone);position:sticky;top:0;background:var(--graphite);z-index:1;} .readmore-header h3{font-family:var(--font-display);font-weight:400;font-size:18px;margin:0;color:var(--onyx);} .readmore-close{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--ash);font-size:22px;cursor:pointer;line-height:1;} .readmore-close:hover{color:var(--onyx);} .readmore-body{padding:16px 20px 20px;} /* Deliverables and Calendar tiles, desktop only (≥1024px). Below that, .responsive-table's own per- card treatment already gives each row its own bordered box (stacked fields, rounded corners) via the existing mobile/tablet rules, so this would double up with that, scoped out of this range entirely rather than fighting it. Below 1024px nothing here applies; the desktop table can't just get border-radius on / directly (notoriously unreliable across browsers), so this borders each item's actual cells instead: the item's first row gets .tile-top (border-top + top corners), its last rendered row gets .tile-bottom (border-bottom + bottom corners), and every row's first/last cell gets the left/right border via :first-child/:last-child, cheap because every row in these two tables is either the full-width main row or a single colspan'd cell, so "first/last cell" is unambiguous either way. A blank spacer row between items stands in for the margin a real can't take. */ @media (min-width:1024px){ table.tiled-table{border-collapse:separate;border-spacing:0;} table.tiled-table tbody tr:not(.tile-spacer) td:first-child{border-left:1px solid var(--stone);} table.tiled-table tbody tr:not(.tile-spacer) td:last-child{border-right:1px solid var(--stone);} table.tiled-table tbody tr.tile-top td{border-top:1px solid var(--stone);} table.tiled-table tbody tr.tile-top td:first-child{border-top-left-radius:4px;} table.tiled-table tbody tr.tile-top td:last-child{border-top-right-radius:4px;} table.tiled-table tbody tr.tile-bottom td{border-bottom:1px solid var(--stone);} table.tiled-table tbody tr.tile-bottom td:first-child{border-bottom-left-radius:4px;} table.tiled-table tbody tr.tile-bottom td:last-child{border-bottom-right-radius:4px;} table.tiled-table tbody tr.tile-spacer td{height:10px;padding:0;border:none;} /* The header's own border-bottom (thead th, 2px) and the first tile's border-top are two separate borders that render flush against each other (border-collapse:separate, border-spacing:0), reads as one cramped merged line. Padding on the first tile's own cells can't fix that: it only pushes the text down inside a border that's still touching the header, the tile itself still visibly touches the divider. A real gap needs an actual row: each table's own markup now prepends one plain .tile-spacer row ahead of every item list, populated or not, so an empty client gets the same 10px gap as a populated one. */ /* .empty's own padding:20px 0 (see base rule) has no horizontal component, fine on its many other page-level uses, but inside a bordered tile it leaves the message sitting flush against the left edge. Scoped to tiled-table specifically so this doesn't change .empty's appearance anywhere else in the app. */ table.tiled-table td.empty{padding:20px 10px;} } .admin-users h3{font-family:var(--font-display);font-weight:400;font-size:18px;margin:0 0 14px;} .invite-row{display:grid;grid-template-columns:1.3fr 1.6fr 1fr auto;gap:10px;align-items:end;} .invite-row .field{margin-bottom:0;} .checkbox-field{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ash);} .tag-pill{display:inline-flex;align-items:center;gap:2px;background:var(--paper);border:1px solid var(--stone);border-radius:10px;padding:2px 2px 2px 9px;font-size:11px;margin:2px 5px 2px 0;white-space:nowrap;} .tag-pill button{background:none;border:none;color:var(--accent-ink);cursor:pointer;font-size:14px;line-height:1;padding:2px 6px;} .tag-pill button:hover{color:var(--accent-ink-hover);} .loading{padding:80px 20px;text-align:center;font-size:12px;color:var(--ash);} /* Task Organiser, permanently PLACED in the page itself, just below the topbar's own bottom divider: position:absolute, not fixed and not sticky. Absolute's containing block (no positioned ancestor exists here) is anchored to the top of the DOCUMENT, not the viewport, so top:100px means "100px below the top of the page" and the panel scrolls away with the rest of the page exactly like ordinary content as the user scrolls, fixed would instead pin it to the viewport so it never moved, which is the opposite of what "permanent placement" means here; sticky would follow partway then lock, which isn't wanted either. top:100px itself is a single plain CSS pixel value, measured live against the running app (the topbar's border-bottom sits at ~79-81px from the top of the page and held there across every width the panel appears at, 768px landscape through 1920px+, since .topbar-actions is hidden entirely below 1024px, nav moving to the side-rail instead, and the full admin button cluster never actually wraps to a second line at ≥1024px either, so there's no wrapped-topbar case to guard against with a bigger number). No JavaScript ever sets or adjusts this panel's position, and it does not change with screen size: this is the one placement, full stop, not a sidebar/drawer pair that swaps by breakpoint. right is likewise a single formula, not a breakpoint set: it aligns the panel's right edge with the page content's own right edge (.wrap, max-width 1180px, centered) instead of sitting further out in the margin/gutter beyond it. .wrap's right edge sits at 24px in from the viewport edge on narrow screens (no centering margin needed, so its own right padding is the only gap) and progressively further in as the screen widens past 1180px and centering margin appears, the same "(100vw - 1180px)/2 + 24px" both cases collapse into via max() with 0, so one calc() expression tracks .wrap's edge at every width without any per-breakpoint override. If the panel is open and tall it may still run down over page content below the topbar (e.g. the add-task row); that's expected and fine; only the topbar itself is off-limits, and collapsed the panel is short enough that this never comes up. Accent colour is used exactly once, as a FILL on the position-1 badge; everything else stays on --stone/--ash/--onyx, per the "sparing accent" rule. mobile/tablet-portrait still get .organiser-sheet instead, exactly as before, see RESPONSIVE below. */ .organiser{position:absolute;top:100px;right:calc(max(0px, (100vw - 1180px) / 2) + 24px);width:272px;max-width:calc(100vw - 40px);background:var(--graphite);border:1px solid var(--stone);border-radius:var(--radius-md);font-size:13px;z-index:400;} .organiser-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;cursor:pointer;user-select:none;border-bottom:1px solid var(--stone);} .organiser-header h3{font-family:var(--font-display);font-weight:400;font-size:15px;margin:0;color:var(--onyx);} .organiser-toggle{background:none;border:1px solid var(--stone);color:var(--ash);width:20px;height:20px;border-radius:var(--radius-sm);font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;} /* Position 1 never collapses; this sits right under the header at all times (collapsed or expanded) and always ends the panel visually when collapsed, so it keeps its own border-bottom unconditionally rather than relying on :last-child (its item markup is shared with the collapsible list below, where :last-child does need to drop the border, see .organiser-item:last-child). */ .organiser-current{padding:0 16px;border-bottom:1px solid var(--stone);} .organiser-current .organiser-item{border-bottom:none;} .organiser-current .organiser-empty{padding:10px 0;} .organiser-body{padding:12px 16px 16px;} .organiser.collapsed .organiser-body{display:none;} .organiser-list{max-height:46vh;overflow-y:auto;margin:0 0 12px;} .organiser-empty{font-size:12px;color:var(--ash);margin:2px 0 0;} .organiser-empty.organiser-error{color:var(--accent-ink);line-height:1.5;} .organiser-item{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--stone);cursor:grab;} .organiser-item:last-child{border-bottom:none;} .organiser-item.dragging{opacity:.4;} .organiser-num{font-size:12px;color:var(--ash);width:16px;flex-shrink:0;text-align:center;line-height:20px;} .organiser-item.current .organiser-num{background:var(--lacquer);color:var(--on-lacquer);border-radius:50%;width:18px;height:18px;line-height:18px;display:inline-block;text-align:center;font-weight:500;} .organiser-label{flex:1;font-family:var(--font-body);font-weight:300;font-size:13px;color:var(--onyx);line-height:1.35;padding-top:1px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .organiser-label.jumpable{cursor:pointer;} .organiser-label.jumpable:hover{color:var(--accent-ink);} .organiser-label.missing{color:var(--ash);font-style:italic;} .organiser-item.done .organiser-label{text-decoration:line-through;color:var(--ash);} .organiser-actions{display:flex;gap:1px;flex-shrink:0;} .organiser-btn{background:none;border:none;color:var(--ash);font-size:11px;cursor:pointer;padding:3px 4px;line-height:1;} .organiser-btn:hover:not(:disabled){color:var(--accent-ink);} .organiser-btn:disabled{opacity:.3;cursor:default;} .organiser-add{border-top:1px solid var(--stone);padding-top:12px;} .organiser-add select{width:100%;padding:6px 8px;border:1px solid var(--stone);border-radius:var(--radius-sm);font-size:12px;background:var(--paper);color:var(--onyx);margin-bottom:8px;font-family:var(--font-body);} .organiser-note-row{display:flex;gap:6px;} .organiser-note-row input{flex:1;min-width:0;padding:6px 8px;border:1px solid var(--stone);border-radius:var(--radius-sm);font-size:12px;background:var(--paper);color:var(--onyx);font-family:var(--font-body);} .organiser-note-row .btn-text{flex-shrink:0;} .jump-highlight{outline:2px solid var(--brass);outline-offset:2px;} /* ============================================================ RESPONSIVE: mobile ≤767px, tablet 768–1023px, desktop ≥1024px. Everything below is additive/overriding: the rules above this point are the current, unchanged desktop build. Each component that needs a different mobile/tablet form gets a sibling element (hidden by default) that specific max-width media queries reveal in place of its desktop counterpart, so resizing/rotating never needs a JS re-render, CSS alone decides what's visible. ============================================================ */ html,body{overflow-x:hidden;} /* ---- Nav: topbar (desktop, unchanged) / bottom bar (mobile) / icon side rail (tablet) ---- */ .topbar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;} .bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:600;background:var(--graphite);border-top:1px solid var(--stone);padding:4px 4px calc(4px + env(safe-area-inset-bottom));} .bottom-nav-list{display:flex;justify-content:space-around;align-items:stretch;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;} .bottom-nav-list::-webkit-scrollbar{display:none;} .bottom-nav-item{flex:1;min-width:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;background:none;border:none;color:var(--ash);font-family:var(--font-body);font-size:10px;padding:4px 2px;cursor:pointer;} .bottom-nav-item svg{width:20px;height:20px;flex-shrink:0;} .bottom-nav-item.active{color:var(--accent-ink);} /* ---- Home ---- */ .home-banner{position:relative;border-radius:var(--radius-md);overflow:hidden;min-height:220px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent-ink) 70%,#000),color-mix(in srgb,var(--brass) 75%,#000));background-size:cover;background-position:center;margin-bottom:24px;display:flex;align-items:flex-end;} .home-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.08) 70%);} .home-banner-inner{position:relative;z-index:1;padding:26px 28px;color:#fff;width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;} .home-banner-date{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.85;} .home-banner-greeting{font-family:var(--font-display);font-weight:300;font-size:34px;line-height:1.1;margin:6px 0 6px;color:#fff;} .home-banner-msg{margin:0;max-width:620px;opacity:.92;font-size:14px;line-height:1.5;} .home-banner-clock{font-family:var(--font-display);font-size:40px;font-weight:300;line-height:1;text-align:right;} .home-banner-clock small{display:block;font-family:var(--font-body);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-top:4px;} .home-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start;} @media (max-width:1023px){ .home-grid{grid-template-columns:1fr;} .home-banner-greeting{font-size:27px;} .home-banner-clock{font-size:30px;text-align:left;} } .home-card{background:var(--graphite);border:1px solid var(--stone);border-radius:var(--radius-md);padding:16px 18px;margin-bottom:18px;} .home-card h3{font-family:var(--font-display);font-weight:400;font-size:19px;margin:0 0 12px;} .announcement{background:var(--graphite);border:1px solid var(--stone);border-radius:var(--radius-md);margin-bottom:18px;overflow:hidden;} .announcement-head{padding:14px 18px 0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;} .announcement-title{font-family:var(--font-display);font-size:22px;font-weight:400;margin:0;} .announcement-meta{font-size:12px;color:var(--ash);} .announcement-body{padding:12px 18px 18px;overflow:hidden;position:relative;contain:paint;line-height:1.55;overflow-wrap:anywhere;} .announcement-body img,.announcement-body video{max-width:100%;height:auto;border-radius:var(--radius-sm);} .announcement-body table{max-width:100%;} .person-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--stone) 60%,transparent);} .person-row:last-child{border-bottom:none;} .avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--stone);flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--ash);} .avatar-lg{width:112px;height:112px;font-size:32px;} .bday-today{background:color-mix(in srgb,var(--brass) 16%,transparent);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:22px;} .onboard-card{max-width:460px;} .home-next-holiday{background:linear-gradient(135deg,color-mix(in srgb,var(--brass) 20%,transparent),color-mix(in srgb,var(--accent-ink) 10%,transparent));border-radius:var(--radius-sm);padding:14px 14px 12px;margin-bottom:10px;} .home-next-holiday{--nh-ink:var(--lacquer);} body[data-theme="dark"] .home-next-holiday{--nh-ink:#E8A597;background:linear-gradient(135deg,color-mix(in srgb,var(--lacquer) 55%,var(--paper)),color-mix(in srgb,var(--lacquer) 30%,var(--paper)));} body[data-theme="dark"] .home-next-holiday .nh-date, body[data-theme="dark"] .home-next-holiday .nh-cap{color:#D9CFC0;} .home-next-holiday .nh-label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--nh-ink);font-weight:600;} .home-next-holiday .nh-name{font-family:var(--font-display);font-size:22px;line-height:1.15;margin:4px 0 2px;color:var(--nh-ink);} .home-next-holiday .nh-date{font-size:12px;color:var(--ash);} .home-next-holiday .nh-count{display:flex;gap:10px;margin-top:10px;} .home-next-holiday .nh-unit{text-align:center;min-width:48px;} .home-next-holiday .nh-num{font-family:var(--font-display);font-size:28px;line-height:1;color:var(--nh-ink);} .home-next-holiday .nh-cap{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash);margin-top:3px;} /* ---- O·ku pop-ups: every confirm/alert in the app. Centred, lacquer, loud. ---- */ .oku-modal-overlay{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(10,8,7,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:okuFade .14s ease-out;} .oku-modal{width:100%;max-width:460px;background:#5C1A16;color:#FAF6E8;border-radius:18px;padding:30px 28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px rgba(250,246,232,.08) inset;text-align:center;animation:okuPop .18s cubic-bezier(.2,.9,.3,1.2);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;box-sizing:border-box;} .oku-modal-icon{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(250,246,232,.12);font-size:28px;line-height:1;} .oku-modal-title{font-family:'Newsreader',Georgia,serif;font-weight:400;font-size:28px;line-height:1.15;margin:0 0 10px;color:#FAF6E8;} .oku-modal-msg{font-family:'Inter Tight',system-ui,sans-serif;font-size:15px;line-height:1.55;margin:0 0 24px;color:rgba(250,246,232,.9);white-space:pre-line;overflow-wrap:anywhere;} .oku-modal-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;} .oku-modal-btn{min-width:130px;padding:12px 20px;border-radius:999px;font-family:'Inter Tight',system-ui,sans-serif;font-size:14px;font-weight:600;cursor:pointer;border:1.5px solid rgba(250,246,232,.55);background:transparent;color:#FAF6E8;transition:background .12s ease,transform .08s ease;} .oku-modal-btn:hover{background:rgba(250,246,232,.1);} /* The id outranks the borderless layer's !important input fill. */ #okuModalInput{width:100%;box-sizing:border-box;margin:-8px 0 22px;padding:11px 14px;border-radius:12px;border:1.5px solid rgba(250,246,232,.35) !important;background:rgba(250,246,232,.1) !important;color:#FAF6E8 !important;font-family:'Inter Tight',system-ui,sans-serif;font-size:15px;outline:none;text-align:left;} #okuModalInput:focus{border-color:rgba(250,246,232,.8) !important;} .oku-modal-btn:active{transform:scale(.98);} .oku-modal-btn.primary{background:#FAF6E8;color:#5C1A16;border-color:#FAF6E8;} .oku-modal-btn.primary:hover{background:#fff;} .oku-modal-btn:focus-visible{outline:3px solid rgba(250,246,232,.6);outline-offset:2px;} @keyframes okuFade{from{opacity:0}to{opacity:1}} @keyframes okuPop{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: reduce){.oku-modal-overlay,.oku-modal{animation:none;}} /* ---- Scrollbars in the O·ku palette ---- */ html{scrollbar-width:thin;scrollbar-color:#B9B4A9 transparent;} html[data-theme="dark"]{scrollbar-color:#55524A transparent;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:#B9B4A9;border-radius:999px;border:2px solid transparent;background-clip:padding-box;} ::-webkit-scrollbar-thumb:hover{background:#5C1A16;background-clip:padding-box;} html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#55524A;background-clip:padding-box;} html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:#9C8358;background-clip:padding-box;} /* Task tables share fixed column widths so every client/person group lines up. */ table.task-table{table-layout:fixed;} table.task-table td, table.task-table th{overflow-wrap:anywhere;} table.task-table select.inline, table.task-table input.inline:not(.edit-task-input){max-width:100%;} table.task-table .status-select{max-width:100%;} table.task-table td:last-child{text-align:right;white-space:nowrap;} table.task-table td{white-space:nowrap;} table.task-table td:first-child{white-space:normal;} .task-deadline{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;} /* ---- Home: borderless premium cards + collapsible announcements ---- */ .home-card, .announcement{border:none !important;box-shadow:0 1px 2px rgba(20,20,19,.04),0 10px 30px rgba(20,20,19,.07);} body[data-theme="dark"] .home-card, body[data-theme="dark"] .announcement{box-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);} .announcement{border-radius:18px;} .announcement-head{padding:16px 20px 0;} .home-grid .announcement-body{padding:12px 20px 20px;transition:max-height .45s cubic-bezier(.2,.8,.2,1);} .announcement-body.ann-collapsed{overflow:hidden;} .ann-toggle-row{display:flex;justify-content:center;padding:0 20px 10px;margin-top:2px;} /* Plain text link, not a button: paper/cream on dark; lacquer in light mode (cream would vanish on a white card). */ .ann-toggle{border:none;background:none;box-shadow:none;padding:4px 6px;color:var(--lacquer);font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:.02em;cursor:pointer;display:inline-flex;align-items:center;gap:6px;} .ann-toggle:hover{text-decoration:underline;text-underline-offset:3px;} .ann-toggle svg{width:14px;height:14px;transition:transform .3s;} .ann-toggle.open svg{transform:rotate(180deg);} body[data-theme="dark"] .ann-toggle{color:#FAF6E8;} #railThemeToggleBtn, #themeToggleBtn, #settingsThemeToggleBtn{display:none !important;} /* ---- Module tabs (every module's top tab bar; Module Guide is always last) ---- */ .module-tabs{display:flex;gap:4px;border-bottom:1px solid var(--stone);margin:0 0 22px;overflow-x:auto;scrollbar-width:none;} .module-tabs::-webkit-scrollbar{display:none;} .module-tab{background:none;border:none;border-bottom:2px solid transparent;padding:10px 14px;font-family:var(--font-body);font-size:13px;color:var(--ash);cursor:pointer;white-space:nowrap;position:relative;top:1px;display:inline-flex;align-items:center;gap:6px;} .module-tab:hover{color:var(--onyx);} .module-tab.active{color:var(--onyx);border-bottom-color:var(--accent-ink);font-weight:500;} .module-tab svg{width:14px;height:14px;} .module-tab.guide-tab{margin-left:auto;} /* ---- Profile block in the side rail (replaces Settings) ---- */ .side-rail-profile{height:auto;min-height:44px;border-top:1px solid color-mix(in srgb, var(--onyx) 10%, transparent);border-radius:0;padding-top:10px;margin-top:4px;} .side-rail-profile .avatar{width:30px;height:30px;font-size:11px;} .side-rail-profile .rail-label{display:none;} .rp-name{display:block;color:var(--onyx);font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;} .rp-role{display:block;color:var(--ash);font-size:11px;font-weight:400;} @media (min-width:1024px){ .side-rail-profile .rail-label{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;min-width:0;text-align:left;} .side-rail-profile{border-radius:var(--radius-sm);} .topbar{display:none;} } .bottom-nav-item .avatar{width:22px;height:22px;font-size:9px;} .bday-person{display:flex;align-items:center;gap:10px;margin-top:8px;} .bday-person .avatar{width:44px;height:44px;font-size:15px;} .bday-thread{margin:10px 0 4px 54px;display:flex;flex-direction:column;gap:8px;} .bday-msg{display:flex;gap:9px;align-items:flex-start;background:var(--graphite);border-radius:var(--radius-sm);padding:8px 10px;} .bday-msg .avatar{width:26px;height:26px;font-size:10px;} .bday-msg-body{flex:1;min-width:0;font-size:13px;line-height:1.45;} .bday-msg-meta{font-size:11px;color:var(--ash);} .bday-msg-text{white-space:pre-wrap;overflow-wrap:anywhere;} .bday-compose{display:flex;gap:8px;align-items:flex-end;} .bday-compose textarea{flex:1;min-height:40px;resize:vertical;font-family:var(--font-body);font-size:13px;padding:8px 10px;border:1px solid var(--stone);border-radius:var(--radius-sm);background:var(--graphite);color:var(--onyx);} @media (max-width:767px){ .bday-thread{margin-left:0;} } .renewal-strip{border:1px solid color-mix(in srgb,var(--lacquer) 35%,var(--stone));background:color-mix(in srgb,var(--lacquer) 7%,var(--graphite));border-radius:var(--radius-md);padding:12px 14px;margin:0 0 16px;} .renewal-strip h4{margin:0 0 8px;font-family:var(--font-display);font-weight:400;font-size:17px;} .renewal-item{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:6px 0;border-top:1px solid color-mix(in srgb,var(--stone) 55%,transparent);font-size:13px;cursor:pointer;} .renewal-item:first-of-type{border-top:none;} .renewal-item:hover .ri-label{text-decoration:underline;} .ri-when{margin-left:auto;font-weight:600;white-space:nowrap;} body[data-theme="dark"] .ri-when.urgent{color:#E8A597;} .ri-when.urgent{color:var(--lacquer);} /* ---- Module guide ---- */ .guide-bar{display:flex;justify-content:flex-end;margin:0 0 6px;} .guide-toggle-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:12px;} .guide-toggle-btn svg{width:15px;height:15px;} .guide{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:1.5rem;align-items:start;} .guide-toc{position:sticky;top:16px;display:flex;flex-direction:column;gap:.75rem;max-height:calc(100vh - 32px);overflow-y:auto;} .guide-toc input{width:100%;font-size:13px;padding:8px 10px;border:1px solid var(--stone);border-radius:var(--radius-sm);background:var(--paper);color:var(--onyx);} .guide-toc nav{display:flex;flex-direction:column;border-left:1px solid var(--stone);} .guide-toc a{display:block;padding:6px 12px;margin-left:-1px;border-left:2px solid transparent;font-size:13px;color:var(--ash);text-decoration:none;line-height:1.35;} .guide-toc a:hover{color:var(--onyx);border-left-color:var(--accent-ink);} .guide-body{display:flex;flex-direction:column;gap:14px;max-width:62rem;min-width:0;} .guide-header p{margin:0 0 6px;font-size:14px;line-height:1.6;color:var(--ash);} .guide-meta{font-size:12px !important;} .guide-section{background:var(--graphite);border:1px solid var(--stone);border-radius:var(--radius-md);padding:16px 20px;scroll-margin-top:16px;} .guide-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--stone);flex-wrap:wrap;} .guide-section-head h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:19px;} .guide-who{flex-shrink:0;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);} .guide-content{font-size:14px;line-height:1.65;color:var(--onyx);} .guide-content p{margin:0 0 10px;} .guide-content ul,.guide-content ol{margin:0 0 10px;padding-left:20px;} .guide-content li{margin-bottom:5px;} .guide-content > :last-child{margin-bottom:0;} .guide-steps li::marker{color:var(--accent-ink);font-weight:600;} .guide-table{width:100%;border-collapse:collapse;margin:0 0 10px;font-size:13px;} .guide-table th{text-align:left;padding:7px 9px;background:var(--paper);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ash);border-bottom:1px solid var(--stone);} .guide-table td{padding:8px 9px;border-bottom:1px solid var(--stone);vertical-align:top;} .guide-table td:first-child{font-weight:600;} .guide-note{margin:4px 0 10px;padding:9px 13px;border-left:3px solid var(--brass);background:var(--paper);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:13px;color:var(--ash);} @media (max-width:900px){ .guide{grid-template-columns:minmax(0,1fr);} .guide-toc{position:static;max-height:none;} } .mc-html-editor{width:100%;min-height:260px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.5;padding:10px;border:1px solid var(--stone);border-radius:var(--radius-sm);background:var(--paper);color:var(--onyx);resize:vertical;} .side-rail{display:none;position:fixed;top:0;left:0;bottom:0;z-index:600;width:64px;background:color-mix(in srgb, var(--graphite) 85%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-right:1px solid color-mix(in srgb, var(--onyx) 12%, transparent);flex-direction:column;align-items:center;padding:calc(16px + env(safe-area-inset-top)) 0 16px;} .side-rail-list{display:flex;flex-direction:column;gap:6px;margin:0 0 auto;padding:0;list-style:none;width:100%;} .side-rail-item{width:44px;height:44px;margin:0 auto;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--radius-sm);color:var(--ash);cursor:pointer;font-family:var(--font-body);transition:background .15s ease,color .15s ease;} .side-rail-item svg{width:20px;height:20px;flex-shrink:0;} .side-rail-item:hover{color:var(--onyx);background:color-mix(in srgb, var(--onyx) 6%, transparent);} .side-rail-item.active{color:var(--accent-ink);background:var(--paper);} .side-rail-bottom{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:16px;} /* Label text only exists at the wide (expanded) sidebar breakpoint, below that the rail collapses back to the icon-only strip. */ .rail-label{display:none;} .side-rail-brand{display:none;} @media (max-width:1023px){ .topbar-actions{display:none;} } @media (min-width:768px) and (max-width:1023px){ .side-rail{display:flex;} .wrap{padding-left:88px;} } /* ---- Expanded, labelled sidebar (desktop), the nav moves out of the topbar entirely and becomes the persistent left column, which is what gives the app a "product" shell instead of a page with buttons on top. */ @media (min-width:1024px){ .side-rail{display:flex;width:224px;align-items:stretch;padding:22px 14px 18px;} .side-rail-brand{display:block;padding:0 10px 22px;} .side-rail-brand img{height:26px;display:block;} .side-rail-item{width:100%;height:auto;justify-content:flex-start;gap:12px;padding:10px 12px;font-size:13px;font-weight:500;letter-spacing:-.01em;} .rail-label{display:inline;} .side-rail-item.active{position:relative;background:color-mix(in srgb, var(--accent-ink) 12%, transparent);} .side-rail-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--accent-ink);} /* Full-bleed content: the shell fills the viewport beside the sidebar rather than sitting in a centred measure. A capped, centred column reads as a website; an app should use the screen it's given. */ .wrap{padding-left:252px;padding-right:28px;width:auto;max-width:none;margin:0;} /* Anchored to the viewport edge now that the content runs edge to edge (it used to be derived from a centred 1180px column). */ .organiser{right:28px;} /* The organiser floats over the content column (unchanged, long-standing behaviour), but the KPI band is the one thing that must never be covered; it's the summary you read first. So the strip alone stops short of the organiser's lane instead of running under it. */ .kpi-strip{margin-right:312px;} /* The topbar keeps identity + theme/logout only; every nav destination now lives in the sidebar, so the duplicate pills would just be noise. */ .nav-pill{display:none;} /* !important because these buttons carry an inline display style */ .topbar-util{display:none !important;} .topbar .brand{display:none;} /* On a desktop the topbar carries only the bell, pinned to the top right corner so it stays within reach however far the page scrolls. */ .topbar{display:block;position:static;height:0;padding:0;margin:0;border:0;overflow:visible;pointer-events:none;} /* Pinned to the corner. Not sticky: html and body clip overflow-x, which makes body a scroll container that never scrolls, so sticky cannot pin. */ .topbar .notif-bell-btn{position:fixed;top:24px;right:28px;z-index:500;pointer-events:auto;} .topbar .who{pointer-events:auto;} /* The bell owns the top right corner, so the module tabs stop short of it. */ #guideBar .module-tabs{margin-right:52px;} } @media (max-width:767px){ .bottom-nav{display:block;} .wrap{padding:16px 16px 148px;} } @media (min-width:768px) and (max-width:1023px) and (orientation:portrait){ .wrap{padding-bottom:76px;} } /* ---- Mobile/tablet compact task rows (replace the desktop client/person-grouped tables + .card list below 1024px) ---- */ .desktop-task-groups{} .mobile-task-rows{display:none;} @media (max-width:1023px){ .desktop-task-groups{display:none;} .mobile-task-rows{display:block;} } .row-group-header{position:sticky;top:0;z-index:50;background:var(--paper);padding:10px 2px 6px;font-family:var(--font-body);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ash);border-bottom:1px solid var(--stone);} .row-list{border-top:1px solid var(--stone);margin-bottom:16px;} .task-row-wrap{position:relative;overflow:hidden;} .task-row-complete-hint{position:absolute;inset:0;display:flex;align-items:center;gap:8px;padding-left:16px;background:var(--onyx);color:var(--paper);font-size:13px;font-weight:500;} .task-row-actions{position:absolute;top:0;right:0;bottom:0;display:flex;} .task-row-actions button{width:64px;border:none;font-size:11px;font-family:var(--font-body);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;} .task-row-actions button svg{width:18px;height:18px;} .task-row-actions .row-edit-btn{background:var(--brass);color:var(--on-brass);} .task-row-actions .row-delete-btn{background:var(--lacquer);color:var(--on-lacquer);} .task-row{position:relative;display:flex;align-items:center;gap:10px;min-height:76px;padding:10px 6px 10px 12px;background:var(--paper);border-bottom:1px solid var(--stone);touch-action:pan-y;transition:transform .18s ease;} .task-row-bar{width:4px;align-self:stretch;border-radius:var(--radius-sm);flex-shrink:0;} .task-row-bar.st-not{background:var(--stone);} .task-row-bar.st-progress{background:var(--brass);} .task-row-bar.st-pending{background:var(--accent-ink);} .task-row-bar.st-done{background:var(--live-green);} .task-row-main{flex:1;min-width:0;} .task-row-title{font-family:var(--font-body);font-weight:500;font-size:15px;color:var(--onyx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .task-row-meta{display:flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:13px;color:var(--ash);margin-top:3px;} .task-row-meta-text{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .task-row-meta-deadline{flex-shrink:0;margin-left:auto;padding-left:6px;} .task-row-chevron{flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--ash);cursor:pointer;} .task-row-chevron svg{width:18px;height:18px;} @media (min-width:768px) and (max-width:1023px) and (orientation:portrait){ .task-row{min-height:84px;padding:14px 8px 14px 16px;} } @media (min-width:768px) and (max-width:1023px) and (orientation:landscape){ .row-list{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;border-top:none;} .row-group-header{grid-column:1/-1;border-top:1px solid var(--stone);} .row-group-header:first-child{border-top:none;} } /* ---- Sheets: bottom sheet on mobile, centred dialogue on tablet+ ---- Shared by the Task Edit sheet and the small action-sheet menu. Never triggered on desktop (nothing there opens one), so it doesn't change the current desktop build even though the CSS is always present. */ .sheet-overlay{display:none;position:fixed;inset:0;z-index:700;background:rgba(20,20,19,.45);align-items:flex-end;justify-content:center;} .sheet-overlay.visible{display:flex;} .sheet-panel{background:var(--graphite);width:100%;max-height:92vh;overflow-y:auto;border-radius:12px 12px 0 0;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom);} .sheet-header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--stone);position:sticky;top:0;background:var(--graphite);z-index:1;} .sheet-header h3{font-family:var(--font-display);font-weight:400;font-size:18px;margin:0;color:var(--onyx);} .sheet-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--ash);font-size:24px;cursor:pointer;flex-shrink:0;line-height:1;} .sheet-body{padding:16px;flex:1;} .sheet-body .field{margin-bottom:14px;} .sheet-footer{position:sticky;bottom:0;background:var(--graphite);border-top:1px solid var(--stone);padding:12px 16px calc(12px + env(safe-area-inset-bottom));} .sheet-footer .btn{width:100%;min-height:48px;} .action-sheet-panel{background:var(--graphite);width:100%;border-radius:12px 12px 0 0;padding:8px 0 calc(8px + env(safe-area-inset-bottom));} .action-sheet-item{display:block;width:100%;text-align:left;padding:14px 20px;background:none;border:none;font-family:var(--font-body);font-size:15px;color:var(--onyx);cursor:pointer;min-height:48px;} .action-sheet-item.danger{color:var(--accent-ink);} .action-sheet-item:hover{background:var(--paper);} @media (min-width:768px){ .sheet-overlay{align-items:center;} .sheet-panel{width:480px;max-width:90vw;max-height:85vh;border-radius:var(--radius-md);} .action-sheet-panel{width:320px;border-radius:var(--radius-md);} } /* ---- Task Organiser bottom sheet (mobile + tablet portrait) ---- */ .organiser-sheet{display:none;position:fixed;left:0;right:0;bottom:0;z-index:650;background:var(--graphite);border-top:1px solid var(--stone);border-radius:8px 8px 0 0;flex-direction:column;max-height:78vh;padding-bottom:env(safe-area-inset-bottom);} .organiser-sheet-bar{position:relative;display:flex;align-items:center;gap:10px;padding:14px 16px 10px;cursor:pointer;min-height:52px;} .organiser-sheet-bar-handle{width:36px;height:4px;border-radius:var(--radius-sm);background:var(--stone);position:absolute;top:6px;left:50%;transform:translateX(-50%);} .organiser-sheet-bar-num{font-family:var(--font-display);font-size:13px;color:var(--ash);flex-shrink:0;} .organiser-sheet-bar-title{flex:1;min-width:0;font-family:var(--font-body);font-weight:500;font-size:14px;color:var(--onyx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .organiser-sheet-bar-chevron{flex-shrink:0;width:24px;height:24px;color:var(--ash);transition:transform .2s ease;} .organiser-sheet.expanded .organiser-sheet-bar-chevron{transform:rotate(180deg);} .organiser-sheet-body{display:none;overflow-y:auto;padding:0 16px 16px;border-top:1px solid var(--stone);} .organiser-sheet.expanded .organiser-sheet-body{display:block;} .organiser-sheet-body h3{font-family:var(--font-display);font-weight:400;font-size:15px;margin:14px 0 10px;color:var(--onyx);} .organiser-sheet-list{margin-bottom:12px;} .organiser-sheet-item{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--stone);} .organiser-sheet-item:last-child{border-bottom:none;} .organiser-sheet-item.dragging{opacity:.4;} .organiser-sheet-handle{flex-shrink:0;width:32px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ash);touch-action:none;cursor:grab;} .organiser-sheet-handle svg{width:16px;height:16px;} .organiser-sheet-num{font-size:12px;color:var(--ash);width:16px;flex-shrink:0;text-align:center;} .organiser-sheet-item.current .organiser-sheet-num{background:var(--lacquer);color:var(--on-lacquer);border-radius:50%;width:18px;height:18px;line-height:18px;display:inline-block;text-align:center;font-weight:500;font-size:11px;} .organiser-sheet-label{flex:1;min-width:0;font-family:var(--font-body);font-weight:300;font-size:14px;color:var(--onyx);} .organiser-sheet-label.jumpable{cursor:pointer;} .organiser-sheet-item.done .organiser-sheet-label{text-decoration:line-through;color:var(--ash);} .organiser-sheet-label.missing{color:var(--ash);font-style:italic;} .organiser-sheet-actions{display:flex;gap:2px;flex-shrink:0;} .organiser-sheet-actions button{width:36px;height:36px;background:none;border:none;color:var(--ash);font-size:14px;cursor:pointer;} .organiser-sheet-actions button:hover{color:var(--accent-ink);} .organiser-sheet-add select,.organiser-sheet-add input{width:100%;padding:10px 12px;border:1px solid var(--stone);border-radius:var(--radius-sm);font-size:16px;background:var(--paper);color:var(--onyx);margin-bottom:8px;font-family:var(--font-body);} .organiser-sheet-add .organiser-note-row{display:flex;gap:8px;} .organiser-sheet-add .organiser-note-row input{flex:1;min-width:0;margin-bottom:0;} .organiser-sheet-add .btn-text{flex-shrink:0;min-height:44px;padding:0 4px;} /* .sheet-backdrop only ever exists to let the mobile/tablet-portrait bottom SHEET be dismissed by tapping outside it, the desktop/tablet- landscape PANEL has no such behaviour (clicking elsewhere on the page must never change its state). The .visible→display:block rule is deliberately scoped inside the ≤1023px query below, not written at the top level, so there's no width at which this full-viewport click-catcher can exist while the panel (not the sheet) is what's on screen. */ .sheet-backdrop{display:none;position:fixed;inset:0;background:rgba(20,20,19,.4);z-index:640;} @media (max-width:1023px){ .organiser{display:none;} .organiser-sheet{display:flex;} .sheet-backdrop.visible{display:block;} } @media (max-width:767px){ .organiser-sheet{bottom:60px;} } @media (min-width:768px) and (max-width:1023px) and (orientation:landscape){ .organiser{display:block;} .organiser-sheet{display:none;} .sheet-backdrop.visible{display:none;} } /* ---- Tables → stacked cards on mobile (no horizontal scroll) ---- */ @media (max-width:767px){ table.responsive-table thead{display:none;} table.responsive-table,table.responsive-table tbody,table.responsive-table tr,table.responsive-table td{display:block;width:100%;} table.responsive-table tr{border:1px solid var(--stone);border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:10px;background:var(--graphite);} table.responsive-table td{border:none;padding:6px 0;text-align:left;} table.responsive-table td[data-label]::before{content:attr(data-label);display:block;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ash);margin-bottom:3px;} table.responsive-table td select,table.responsive-table td input{width:100%;} } /* ---- Forms: single column + sticky submit on mobile ---- Both rules carry !important: several of these rows (the admin add-task row, the Clients/Roles quick-add rows) set their column count via an inline style attribute for their desktop layout, which no ordinary stylesheet rule, regardless of specificity, can otherwise override. */ @media (max-width:767px){ .add-form .row{grid-template-columns:1fr !important;gap:12px;} .invite-row{grid-template-columns:1fr !important;gap:12px;} .invite-row .field{margin-bottom:0;} .admin-users .invite-row + .err{margin-bottom:4px;} } /* ---- Touch targets: ≥44x44px, ≥8px apart, mobile & tablet only, since these are touch-primary breakpoints; desktop stays mouse-sized and unchanged. ---- */ @media (max-width:1023px){ .btn{min-height:44px;} .btn-text{min-height:44px;display:inline-flex;align-items:center;padding:0 4px;} .del{min-height:44px;display:inline-flex;align-items:center;} .pw-toggle{width:44px;height:44px;justify-content:center;} .tag-pill{margin:3px 8px 3px 0;} .tag-pill button{min-width:32px;min-height:32px;} .chip{min-height:36px;display:inline-flex;align-items:center;} .status-select{min-height:40px;} select.inline,input.inline{min-height:40px;} .checkbox-field input[type="checkbox"],.add-form input[type="checkbox"]{width:20px;height:20px;flex-shrink:0;} /* iOS Safari auto-zooms the page on focusing any input/select whose computed font-size is under 16px, the desktop-sized 13px (see .field/.add-form rules above) would trigger that on every tap here, so touch breakpoints get 16px back despite looking bigger than the rest of the design at this size; desktop keeps the compact 13px. */ .field input,.field select,.add-form input,.add-form select{font-size:16px;} } /* ---- Settings controls that only exist because the bottom nav/side rail have no room for Theme/Log out, desktop keeps using the topbar buttons for these, so this stays hidden there. ---- */ .settings-mobile-only{display:none;} .settings-name-card{margin-top:0;} @media (max-width:1023px){ .settings-mobile-only{display:block;margin-top:0;} .settings-name-card{margin-top:36px;} } /* ---- Mail: Gmail's layout and density, in O·ku's palette ---- */ .mail-rail{display:flex;flex-direction:column;gap:1px;padding-right:8px;} .mail-rail button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:none;border:none;color:var(--onyx);font-family:var(--font-body);font-size:13.5px;line-height:1;padding:0 14px 0 12px;height:34px;border-radius:0 17px 17px 0;cursor:pointer;transition:background .12s ease;} .mail-rail button:hover{background:color-mix(in srgb, var(--onyx) 7%, transparent);} .mail-rail button.active{background:color-mix(in srgb, var(--lacquer) 60%, transparent);color:#FAF6E8;font-weight:600;} .mail-rail button svg{width:17px;height:17px;flex:none;opacity:.85;} #mail-compose-btn svg{width:18px;height:18px;} #mail-compose-btn{transition:background .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;} #mail-compose-btn:hover{background:color-mix(in srgb, var(--lacquer) 42%, transparent);border-color:color-mix(in srgb, var(--lacquer) 90%, transparent);box-shadow:0 6px 20px color-mix(in srgb, var(--lacquer) 45%, transparent);transform:translateY(-1px);} #mail-compose-btn:active{transform:translateY(0);box-shadow:0 2px 8px color-mix(in srgb, var(--lacquer) 40%, transparent);} #mail-compose-btn svg{transition:transform .18s ease;} #mail-compose-btn:hover svg{transform:rotate(-12deg) scale(1.06);} .mail-rail .mail-count{margin-left:auto;font-size:12px;color:var(--ash);font-variant-numeric:tabular-nums;} .mail-rail button.active .mail-count{color:inherit;} .mail-toolbar{display:flex;align-items:center;gap:10px;padding:2px 4px 8px;} .mail-icon-btn{background:none;border:none;color:var(--ash);cursor:pointer;padding:6px;border-radius:50%;line-height:0;} .mail-row .mail-who{display:flex;align-items:center;gap:9px;} .mail-row .mail-who .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} .mail-tool-sel{background:var(--graphite);color:var(--onyx);border:1px solid var(--stone);border-radius:6px;font-family:var(--font-body);font-size:12px;padding:4px 6px;max-width:120px;} .mail-tool-sep{width:1px;height:18px;background:color-mix(in srgb, var(--onyx) 14%, transparent);margin:0 4px;} .mail-tool-colour{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:var(--ash);cursor:pointer;font-weight:700;font-size:13px;} .mail-tool-colour:hover{background:color-mix(in srgb, var(--onyx) 10%, transparent);color:var(--onyx);} .mail-tool-colour input{position:absolute;inset:0;opacity:0;cursor:pointer;border:none;padding:0;} .mail-compose.dropping{outline:2px dashed color-mix(in srgb, var(--lacquer) 70%, transparent);outline-offset:-6px;} .mail-compose.dropping .mail-editor{background:color-mix(in srgb, var(--lacquer) 8%, transparent) !important;} .cal-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;} .cal-bar .cal-fwd svg{transform:rotate(180deg);} .cal-title{font-family:var(--font-display);font-size:19px;margin-left:4px;} .cal-views{margin-left:auto;display:inline-flex;gap:2px;background:color-mix(in srgb, var(--onyx) 7%, transparent);border-radius:999px;padding:3px;} .cal-view{background:none;border:none;color:var(--ash);font-family:var(--font-body);font-size:12.5px;padding:6px 14px;border-radius:999px;cursor:pointer;} .cal-view.on{background:var(--graphite);color:var(--onyx);font-weight:600;box-shadow:0 1px 3px rgba(20,20,19,.12);} .cal-sheet{max-width:640px;} .cal-dot{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;} .cal-dot.on{border-color:var(--onyx);} .cal-month{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:color-mix(in srgb, var(--onyx) 9%, transparent);border-radius:12px;overflow:hidden;} .cal-dow{background:var(--graphite);padding:8px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ash);} .cal-cell{background:var(--graphite);min-height:104px;padding:6px 6px 8px;display:flex;flex-direction:column;gap:3px;cursor:pointer;} .cal-cell:hover{background:color-mix(in srgb, var(--onyx) 4%, transparent);} .cal-cell.out{opacity:.45;} .cal-cell .cal-num{font-size:12px;color:var(--ash);padding:0 2px 2px;background:none;border:0;font-family:var(--font-body);cursor:pointer;text-align:left;line-height:1.4;} .cal-cell .cal-num:hover{text-decoration:underline;color:var(--onyx);} .cal-cell.today .cal-num{color:#FAF6E8;background:var(--lacquer);border-radius:999px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-weight:600;} .cal-chip{display:flex;align-items:baseline;gap:6px;width:100%;background:color-mix(in srgb, var(--onyx) 7%, transparent);border:none;border-radius:5px;color:var(--onyx);font-family:var(--font-body);font-size:12px;text-align:left;padding:3px 6px;cursor:pointer;min-width:0;} .cal-chip:hover{background:color-mix(in srgb, var(--onyx) 14%, transparent);} .cal-chip .t{flex:none;color:var(--ash);font-size:11px;font-variant-numeric:tabular-nums;} .cal-chip .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .cal-more{background:none;border:none;color:var(--ash);font-family:var(--font-body);font-size:11.5px;text-align:left;padding:1px 6px;cursor:pointer;} .cal-more:hover{color:var(--onyx);text-decoration:underline;} .cal-grid{display:grid;grid-template-columns:58px repeat(var(--cal-cols),minmax(0,1fr));gap:1px;background:color-mix(in srgb, var(--onyx) 9%, transparent);border-radius:12px;overflow:hidden;} .cal-gutter-head, .cal-gcol-head{background:var(--graphite);padding:8px 6px;text-align:center;} .cal-gcol-head .dow{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ash);} .cal-gcol-head .num{display:inline-block;font-size:16px;margin-top:2px;} .cal-gcol-head.today .num{background:var(--lacquer);color:#FAF6E8;border-radius:999px;width:26px;height:26px;line-height:26px;font-weight:600;} .cal-gutter-allday{background:var(--graphite);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ash);padding:8px 6px;text-align:right;} .cal-allday{background:var(--graphite);min-height:30px;padding:4px;display:flex;flex-direction:column;gap:3px;cursor:pointer;} .cal-gutter{background:var(--graphite);} .cal-hour{height:44px;font-size:11px;color:var(--ash);text-align:right;padding:0 8px;transform:translateY(-6px);font-variant-numeric:tabular-nums;} .cal-gcol{position:relative;background:var(--graphite);height:1056px;cursor:pointer;} .cal-hourline{height:44px;box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--onyx) 7%, transparent);} .cal-block{position:absolute;border:none;border-radius:6px;padding:3px 6px;text-align:left;cursor:pointer;overflow:hidden;color:var(--onyx);font-family:var(--font-body);font-size:11.5px;line-height:1.35;display:flex;flex-direction:column;min-height:16px;} .cal-block .t{color:var(--ash);font-size:10.5px;font-variant-numeric:tabular-nums;} .cal-block .s{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;} @media (max-width:760px){ .cal-cell{min-height:78px;} .cal-grid{grid-template-columns:44px repeat(var(--cal-cols),minmax(0,1fr));} .cal-title{width:100%;order:9;margin:4px 0 0;} } .mail-clip{flex:none;display:inline-flex;color:var(--ash);opacity:.8;} .mail-clip svg{width:14px;height:14px;} .mail-atts{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;} .mail-att-card{display:flex;align-items:stretch;gap:0;border-radius:10px;background:color-mix(in srgb, var(--onyx) 7%, transparent);overflow:hidden;max-width:290px;} .mail-att-card:hover{background:color-mix(in srgb, var(--onyx) 12%, transparent);} .mail-att-open{display:flex;align-items:center;gap:10px;min-width:0;background:none;border:none;color:var(--onyx);font-family:var(--font-body);font-size:13px;text-align:left;padding:9px 6px 9px 12px;cursor:pointer;} .mail-att-open .ico{flex:none;line-height:0;color:var(--ash);} .mail-att-open .ico svg{width:20px;height:20px;} .mail-att-open .meta{display:flex;flex-direction:column;min-width:0;line-height:1.35;} .mail-att-open .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mail-att-open .sz{color:var(--ash);font-size:11.5px;} .mail-att-dl{align-self:center;margin-right:6px;} .att-viewer{position:fixed;inset:0;z-index:1500;background:rgba(10,10,9,.72);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:28px;} .att-shell{display:flex;flex-direction:column;width:min(1040px,100%);height:min(88vh,100%);background:var(--graphite);border-radius:16px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.5);} .att-shell header{display:flex;align-items:center;gap:6px;padding:12px 12px 12px 18px;background:color-mix(in srgb, var(--onyx) 8%, transparent);} .att-shell header .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;font-weight:600;} .att-shell header .pos{color:var(--ash);font-size:12px;margin-right:6px;white-space:nowrap;} .att-shell .att-next svg{transform:rotate(180deg);} .att-body{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:auto;background:#fff;} .att-body img{max-width:100%;max-height:100%;object-fit:contain;display:block;} .att-body iframe{width:100%;height:100%;border:0;background:#fff;} .att-body pre{margin:0;padding:22px;width:100%;height:100%;overflow:auto;white-space:pre-wrap;word-break:break-word;color:#1a1a19;font-size:13px;line-height:1.6;background:#fff;} .att-body .att-note{color:var(--onyx);text-align:center;padding:30px;background:var(--graphite);width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;} @media (max-width:640px){ .att-viewer{padding:0;} .att-shell{height:100%;border-radius:0;} } .mail-thread-chip{background:color-mix(in srgb, var(--onyx) 12%, transparent);border:none;color:var(--onyx);font-family:var(--font-body);font-size:11.5px;font-weight:600;line-height:1;padding:3px 7px;border-radius:999px;margin-right:8px;cursor:pointer;vertical-align:1px;} .mail-thread-chip:hover{background:color-mix(in srgb, var(--lacquer) 40%, transparent);} .mail-thread{background:var(--graphite);border-radius:12px;padding:8px;margin:0 0 12px;box-shadow:0 6px 22px rgba(20,20,19,.12);} .mail-thread-hd{font-size:12px;color:var(--ash);padding:4px 10px 8px;} .mail-thread-row{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;color:var(--onyx);font-family:var(--font-body);font-size:13px;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;} .mail-thread-row:hover{background:color-mix(in srgb, var(--onyx) 7%, transparent);} .mail-thread-row.unread{font-weight:600;} .mail-thread-row .who{flex:none;width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mail-thread-row .sub{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ash);} .mail-thread-row .when{flex:none;color:var(--ash);font-size:12px;} .mail-searchpanel{background:var(--graphite);border-radius:14px;box-shadow:0 10px 34px rgba(20,20,19,.18);padding:16px 18px;margin:0 0 14px;max-width:760px;} .mail-row.cursor{box-shadow:inset 3px 0 0 var(--lacquer);background:color-mix(in srgb, var(--onyx) 6%, transparent);} .mail-searchbar{position:relative;display:flex;align-items:center;gap:6px;max-width:560px;} .mail-searchbar input{flex:1;min-width:0;} .mail-searchbar .mail-icon-btn{flex:none;} .oku-toast{position:fixed;left:24px;bottom:24px;z-index:1400;display:flex;align-items:center;gap:14px;max-width:min(460px,calc(100vw - 48px)); background:var(--graphite);color:var(--onyx);font-family:var(--font-body);font-size:13.5px;line-height:1.45; padding:12px 12px 12px 18px;border-radius:12px;box-shadow:0 14px 40px rgba(20,20,19,.34);animation:okuToastIn .2s ease;} .oku-toast.out{opacity:0;transform:translateY(6px);transition:opacity .2s ease, transform .2s ease;} .oku-toast .oku-toast-act{background:none;border:none;color:color-mix(in srgb, var(--lacquer) 45%, var(--onyx));font-family:var(--font-body);font-size:13.5px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:6px;white-space:nowrap;} .oku-toast .oku-toast-act:hover{background:color-mix(in srgb, var(--lacquer) 18%, transparent);} .oku-toast .oku-toast-x{background:none;border:none;color:var(--ash);cursor:pointer;font-size:12px;padding:4px 6px;line-height:1;} .oku-toast .oku-toast-x:hover{color:var(--onyx);} @keyframes okuToastIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} @media (max-width:640px){ .oku-toast{left:12px;right:12px;bottom:76px;max-width:none;} } /* ---- Structured text (descriptions, briefs), its editor, and filter bars ---- */ .rt{line-height:1.55;overflow-wrap:anywhere;} .rt p{margin:0 0 .6em;} .rt ul,.rt ol{margin:0 0 .6em;padding-left:1.35em;} .rt p:last-child,.rt ul:last-child,.rt ol:last-child{margin-bottom:0;} .rt li{margin:.15em 0;} .rt li::marker{color:var(--ash);} .rt .rt-h{font-weight:600;color:var(--onyx);letter-spacing:.01em;margin:.9em 0 .3em;} .rt .rt-h:first-child{margin-top:0;} .rt strong{font-weight:600;color:var(--onyx);} .rt a{color:inherit;text-decoration:underline;text-underline-offset:2px;} .rt-wrap .rt{max-height:calc(var(--rt-lines,6) * 1.55em);overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent);} .rt-wrap.fits .rt,.rt-wrap.open .rt{max-height:none;-webkit-mask-image:none;mask-image:none;} .rt-more{display:inline-block;background:none;border:none;padding:6px 0 0;font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer;color:color-mix(in srgb, var(--lacquer) 45%, var(--onyx));min-height:0;} .rt-more[hidden]{display:none;} .rt-more:hover{text-decoration:underline;} @media (min-width:1024px){ td.deliv-desc{min-width:340px;width:42%;} } .rt-editor{display:flex;flex-direction:column;gap:6px;width:100%;min-width:0;} .rt-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;} .rt-tools button{border:none;background:color-mix(in srgb, var(--onyx) 9%, transparent);color:var(--onyx);font-family:var(--font-body);font-size:12px;line-height:1.2;padding:5px 11px;border-radius:999px;cursor:pointer;min-height:0;} .rt-tools button:hover{background:color-mix(in srgb, var(--onyx) 16%, transparent);} .rt-hint{font-size:11.5px;color:var(--ash);margin-left:4px;} .rt-editor textarea{width:100%;min-height:110px;resize:vertical;font-family:var(--font-body);font-size:13px;line-height:1.5;padding:10px 12px;border-radius:var(--radius-sm);box-sizing:border-box;} .flt-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 4px;} .flt-bar .flt-ctl{font-family:var(--font-body);font-size:12.5px;line-height:1.3;padding:7px 12px;border-radius:999px;border:none;background:color-mix(in srgb, var(--onyx) 9%, transparent);color:var(--onyx);min-height:0;max-width:230px;box-sizing:border-box;} .flt-bar .flt-ctl.on{box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--lacquer) 75%, transparent);} .flt-search{position:relative;flex:1 1 220px;max-width:340px;} .flt-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--ash);pointer-events:none;} .flt-bar .flt-search .flt-ctl{width:100%;max-width:none;padding-left:31px;} .flt-clear{background:none;border:none;font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer;color:color-mix(in srgb, var(--lacquer) 45%, var(--onyx));padding:6px 8px;min-height:0;} .flt-count{font-size:12.5px;color:var(--ash);margin:6px 0 0;} .flt-group-h{font-family:var(--font-display);font-weight:400;font-size:16px;margin:24px 0 10px;color:var(--accent-ink);} .flt-group-h span{font-family:var(--font-body);font-size:12px;color:var(--ash);margin-left:6px;} @media (max-width:640px){ .flt-bar .flt-ctl{max-width:none;flex:1 1 42%;} .flt-search{max-width:none;flex-basis:100%;} } /* ---- Notifications: bell, badge, panel ---- */ /* The panel opens beside the bell, a popover on a desktop or tablet and a sheet from the bottom on a phone. */ .notif-scrim{position:fixed;inset:0;z-index:1290;background:transparent;} .notif-panel{position:fixed;top:64px;right:28px;width:min(420px,calc(100vw - 32px));max-height:min(720px,calc(100vh - 84px));z-index:1300;background:var(--graphite);border-radius:16px;box-shadow:0 18px 60px rgba(20,20,19,.32),0 0 0 1px color-mix(in srgb, var(--onyx) 8%, transparent);display:flex;flex-direction:column;overflow:hidden;animation:notifIn .18s ease;transform-origin:top right;} @keyframes notifIn{from{transform:translateY(-6px) scale(.98);opacity:0;}to{transform:none;opacity:1;}} @media (max-width:1023px){ .notif-panel{right:16px;} } @media (max-width:767px){ .notif-scrim{background:rgba(0,0,0,.45);} .notif-panel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:85vh;border-radius:18px 18px 0 0;animation:notifSheetIn .22s ease;} } @keyframes notifSheetIn{from{transform:translateY(40px);opacity:0;}to{transform:none;opacity:1;}} /* The bell: one round button at the top right of the page, above every module, whatever the screen size. */ .notif-bell-btn{position:relative;flex:none;width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ash);background:color-mix(in srgb, var(--graphite) 85%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 2px rgba(20,20,19,.06),0 8px 24px rgba(20,20,19,.10);transition:color .15s ease,background .15s ease;} .notif-bell-btn svg{width:20px;height:20px;} .notif-bell-btn:hover{color:var(--onyx);background:var(--graphite);} .notif-bell-btn.has-new{color:var(--onyx);} /* Over the Home banner: no circle, just the bell, light like the banner text. */ .notif-bell-btn.bare{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#FAF6E8;transform:translate(-8px,8px);} .notif-bell-btn{transition:color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease;} .notif-bell-btn.bare svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));} .notif-bell-btn.bare:hover{background:transparent;color:#FFFFFF;} .notif-bell-btn .notif-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--lacquer);color:#FAF6E8;font-size:10.5px;font-weight:600;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--graphite);} .notif-bell-btn.ring svg{animation:notifRing .9s ease;transform-origin:50% 4px;} @keyframes notifRing{0%,100%{transform:rotate(0);}15%{transform:rotate(14deg);}30%{transform:rotate(-12deg);}45%{transform:rotate(9deg);}60%{transform:rotate(-6deg);}75%{transform:rotate(3deg);}} /* The card that drops in under the bell when something new lands. */ .notif-pop-host{position:fixed;top:64px;right:28px;z-index:1400;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 24px));pointer-events:none;} .notif-pop{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;background:var(--graphite);color:var(--onyx);border-radius:14px;padding:12px 12px 12px 14px;box-shadow:0 18px 50px rgba(20,20,19,.30),0 0 0 1px color-mix(in srgb, var(--onyx) 8%, transparent);animation:notifPopIn .24s cubic-bezier(.2,.8,.2,1);font-family:var(--font-body);} .notif-pop.out{opacity:0;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease;} .notif-pop .notif-ico{width:34px;height:34px;background:color-mix(in srgb, var(--lacquer) 60%, transparent);color:#FAF6E8;margin-top:1px;} .notif-pop-body{flex:1;min-width:0;} .notif-pop-k{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);margin-bottom:2px;} .notif-pop-t{font-size:13.5px;font-weight:600;line-height:1.35;} .notif-pop-b{font-size:12.5px;color:var(--ash);line-height:1.4;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .notif-pop-acts{display:flex;gap:4px;margin-top:6px;margin-left:-8px;} .notif-pop-acts button{background:none;border:none;font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 8px;border-radius:6px;color:color-mix(in srgb, var(--lacquer) 45%, var(--onyx));} .notif-pop-acts button:hover{background:color-mix(in srgb, var(--lacquer) 18%, transparent);} .notif-pop-acts button.quiet{color:var(--ash);font-weight:500;} .notif-pop-x{flex:none;background:none;border:none;color:var(--ash);cursor:pointer;font-size:12px;padding:2px 6px;line-height:1;} .notif-pop-x:hover{color:var(--onyx);} @keyframes notifPopIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}} @media (max-width:767px){ .notif-pop-host{top:12px;left:12px;right:12px;width:auto;} } /* Master Control > Notifications: the Team / Client sub-tabs and switches. */ .oku-seg{display:inline-flex;gap:2px;background:var(--bl-fill, color-mix(in srgb, var(--onyx) 9%, transparent));border-radius:999px;padding:3px;} .oku-seg button{border:none;background:none;padding:7px 16px;border-radius:999px;font-family:var(--font-body);font-size:13px;color:var(--ash);cursor:pointer;transition:background .15s ease,color .15s ease;} .oku-seg button.active{background:var(--graphite);color:var(--onyx);box-shadow:0 1px 3px rgba(20,20,19,.12);} .oku-switch{position:relative;flex:none;width:42px;height:24px;border-radius:999px;border:none;padding:0;cursor:pointer;background:color-mix(in srgb, var(--onyx) 22%, transparent);transition:background .15s ease;} .oku-switch::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#FAF6E8;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .15s ease;} .oku-switch[aria-checked="true"]{background:var(--lacquer);} .oku-switch[aria-checked="true"]::after{transform:translateX(18px);} .oku-switch[disabled]{opacity:.45;cursor:default;} .mc-notif-master{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:12px;background:color-mix(in srgb, var(--lacquer) 10%, transparent);margin:14px 0 4px;} .mc-notif-group{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);padding:18px 14px 6px;} .mc-notif-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:10px;} .mc-notif-rows .mc-notif-row:nth-child(even){background:var(--bl-zebra, color-mix(in srgb, var(--onyx) 5%, transparent));} .mc-notif-row .t{font-size:14px;font-weight:500;} .mc-notif-row .d{font-size:12.5px;color:var(--ash);margin-top:2px;line-height:1.4;} .mc-notif-row.off .t,.mc-notif-row.off .d{opacity:.55;} .notif-head{display:flex;align-items:center;gap:6px;padding:18px 14px 10px 20px;} .notif-head h3{font-family:var(--font-display);font-weight:400;font-size:22px;margin:0;flex:1;} .notif-list{flex:1;overflow-y:auto;padding:0 10px 20px;} .notif-sect{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);padding:12px 10px 6px;} .notif-item{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;background:none;border:none;color:var(--onyx);font-family:var(--font-body);padding:12px 10px;border-radius:12px;cursor:pointer;} .notif-item:hover{background:color-mix(in srgb, var(--onyx) 7%, transparent);} .notif-item.unread{background:color-mix(in srgb, var(--lacquer) 12%, transparent);} .notif-item.unread:hover{background:color-mix(in srgb, var(--lacquer) 18%, transparent);} .notif-ico{flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--onyx) 8%, transparent);color:var(--ash);} .notif-ico svg{width:18px;height:18px;} .notif-item.unread .notif-ico{background:color-mix(in srgb, var(--lacquer) 60%, transparent);color:#FAF6E8;} .notif-t{display:block;font-size:14px;font-weight:500;line-height:1.35;} .notif-item.unread .notif-t{font-weight:600;} .notif-b{font-size:13px;color:var(--ash);line-height:1.4;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .notif-w{display:block;font-size:11.5px;color:var(--ash);margin-top:4px;} .notif-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid color-mix(in srgb, var(--onyx) 10%, transparent);} .notif-foot .btn{padding:7px 14px;font-size:12.5px;min-height:0;} .notif-empty{padding:48px 24px;text-align:center;color:var(--ash);font-size:14px;line-height:1.6;} .mail-sched{position:absolute;bottom:calc(100% + 8px);left:0;z-index:22;min-width:274px;background:var(--graphite);border-radius:12px;box-shadow:0 12px 38px rgba(20,20,19,.26);padding:6px;} .mail-sched .hd{font-size:12px;color:var(--ash);padding:8px 10px 6px;} .mail-sched .sched-preset{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;background:none;border:none;color:var(--onyx);font-family:var(--font-body);font-size:13px;text-align:left;padding:8px 10px;border-radius:8px;cursor:pointer;} .mail-sched .sched-preset:hover{background:color-mix(in srgb, var(--lacquer) 24%, transparent);} .mail-sched .sched-preset .when{color:var(--ash);font-size:12px;white-space:nowrap;} .sig-tools{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:0 0 6px;} .sig-tools button svg{width:16px;height:16px;} .sig-tools button:disabled{opacity:.35;cursor:default;} .sig-tools .sig-mode{margin-left:auto;display:inline-flex;background:color-mix(in srgb, var(--onyx) 6%, transparent);border-radius:999px;padding:2px;} .sig-tools .sig-mode button, .sig-prev-modes button{background:none;border:0;padding:4px 11px;border-radius:999px;font-size:12px;color:var(--ash);cursor:pointer;font-family:var(--font-body);min-width:0;height:auto;} .sig-tools .sig-mode button.on, .sig-prev-modes button.on{background:color-mix(in srgb, var(--lacquer) 26%, transparent);color:var(--onyx);} .sig-box{min-height:90px;max-height:260px;overflow:auto;border-radius:var(--radius-sm);background:color-mix(in srgb, var(--onyx) 6%, transparent);} .sig-box img{cursor:pointer;} .sig-box img:hover{outline:2px solid color-mix(in srgb, var(--lacquer) 60%, transparent);} .sig-html{display:block;width:100%;box-sizing:border-box;min-height:180px;font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.55;padding:10px 12px;border-radius:var(--radius-sm);border:0;background:color-mix(in srgb, var(--onyx) 6%, transparent);color:var(--onyx);resize:vertical;} .sig-html[hidden], .sig-box[hidden], .sig-prev[hidden], .sig-prev-text[hidden]{display:none;} .sig-prev-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:14px 0 6px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ash);} .sig-prev-modes{display:inline-flex;gap:2px;text-transform:none;letter-spacing:0;} .sig-prev{display:block;width:100%;height:160px;border:0;border-radius:var(--radius-sm);background:#fff;box-shadow:0 1px 4px rgba(20,20,19,.14);} .sig-prev-text{white-space:pre-wrap;font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.55;margin:0;padding:12px 14px;border-radius:var(--radius-sm);background:color-mix(in srgb, var(--onyx) 6%, transparent);color:var(--onyx);} .sig-prev-note{font-size:11.5px;color:var(--ash);margin:6px 0 0;line-height:1.5;} .sig-checks{list-style:none;margin:6px 0 0;padding:0;font-size:12px;line-height:1.5;} .sig-checks li{padding:2px 0;} .sig-checks li.warn{color:var(--accent-ink);} .sig-checks li.ok{color:var(--green-ink);} .oku-modal .sig-ed textarea.sig-html{min-height:150px;} .oku-modal .setup-step{text-align:left;padding:12px 14px;border-radius:12px;background:rgba(250,246,232,.07);} .oku-modal .setup-h{font-size:14px;font-weight:600;color:#FAF6E8;margin-bottom:4px;} .oku-modal .setup-p{font-size:12.5px;line-height:1.5;color:rgba(250,246,232,.78);margin:0 0 10px;} .oku-modal .setup-done{margin:0;font-size:13.5px;color:#BFE3C4;} .oku-modal .setup-step .btn-lacquer{background:#FAF6E8;color:#5C1A16;border:0;} .oku-modal .setup-step .btn-ghost{color:#FAF6E8;border-color:rgba(250,246,232,.4);background:transparent;} .oku-modal .setup-step .guide-steps{color:rgba(250,246,232,.85);font-size:12.5px;padding-left:18px;} .oku-modal .setup-step code{color:#FAF6E8;} .oku-modal .setup-step .field label{color:rgba(250,246,232,.7);} .oku-modal .sig-box, .oku-modal .sig-html{background:rgba(250,246,232,.09);color:#FAF6E8;} .oku-modal .sig-tools .sig-mode{background:rgba(250,246,232,.08);} .oku-modal .sig-tools .sig-mode button.on, .oku-modal .sig-prev-modes button.on{background:rgba(250,246,232,.2);color:#FAF6E8;} .oku-modal .sig-checks li.warn{color:#F4C9A8;} .oku-modal .sig-prev-text{background:rgba(250,246,232,.09);color:#FAF6E8;} .oku-modal .sig-prev-head{margin-top:12px;} .mail-acct-btn{display:inline-flex;align-items:center;gap:4px;max-width:100%;background:none;border:none;padding:2px 0;color:inherit;font:inherit;cursor:pointer;} .mail-acct-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mail-acct-btn svg{width:15px;height:15px;flex:none;opacity:.8;} .mail-acct-btn:hover{color:var(--onyx);} .mail-acct-menu{z-index:1300;min-width:300px;max-width:calc(100vw - 16px);} .mail-acct-menu .mail-acct-row{justify-content:flex-start;gap:12px;} .mail-acct-menu .mail-acct-row.on{background:color-mix(in srgb, var(--lacquer) 16%, transparent);} .mail-acct-menu .mail-acct-txt{display:flex;flex-direction:column;min-width:0;flex:1;gap:1px;} .mail-acct-menu .mail-acct-txt > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mail-acct-menu .mail-acct-tick{color:var(--lacquer);font-weight:600;} .mail-acct-menu .mail-acct-foot{margin-top:4px;padding-top:4px;border-top:1px solid color-mix(in srgb, var(--stone) 55%, transparent);} .mail-acct-line{display:flex;align-items:center;gap:12px;padding:10px 0;flex-wrap:wrap;} .mail-acct-line + .mail-acct-line{border-top:1px solid color-mix(in srgb, var(--stone) 45%, transparent);} .mail-acct-acts{display:flex;gap:6px;flex-wrap:wrap;} .mail-from-line{font-size:13.5px;color:var(--onyx);padding:2px 0;} .q-file{display:inline-flex;align-items:center;gap:5px;} .q-file svg{width:14px;height:14px;flex:none;opacity:.8;} .mail-sched .pick{display:flex;align-items:center;gap:6px;padding:8px 10px 6px;margin-top:4px;border-top:1px solid color-mix(in srgb, var(--stone) 55%, transparent);} .mail-sched .pick input{font-size:12.5px;padding:6px 8px;border-radius:var(--radius-sm);border:1px solid var(--stone);background:var(--graphite);color:var(--onyx);min-width:0;} .mail-sched .pick button{padding:6px 14px;border-radius:999px;font-size:12.5px;} .oku-av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#FAF6E8;font-family:var(--font-body);font-weight:600;line-height:1;flex:none;letter-spacing:.02em;} .ct-actions{display:inline-flex;align-items:center;gap:2px;opacity:.35;transition:opacity .12s ease;} tr:hover .ct-actions, .ct-actions:focus-within{opacity:1;} .ct-star.on{color:var(--lacquer);opacity:1;} .ct-actions .ct-star.on{opacity:1;} .mail-chips{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;padding:0;} #mailComposeHost .mail-chips input, .mail-chips input{flex:1 1 90px;min-width:90px;background:none !important;border:none !important;box-shadow:none !important;color:var(--onyx);font-family:var(--font-body);font-size:13.5px;padding:3px 0;outline:none;} #mailComposeHost .mail-chips{background:none !important;box-shadow:none !important;} .mail-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:26px;padding:0 3px 0 3px;border-radius:13px;background:color-mix(in srgb, var(--onyx) 10%, transparent);font-size:12.5px;line-height:1;} .mail-chip span.nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px;} .mail-chip.bad{background:color-mix(in srgb, var(--accent-ink) 20%, transparent);} .mail-chip button{background:none;border:none;color:inherit;cursor:pointer;padding:0 5px 0 2px;line-height:0;opacity:.6;font-size:13px;} .mail-chip button:hover{opacity:1;} .mail-suggest{position:absolute;z-index:20;top:100%;left:52px;margin-top:2px;min-width:290px;max-width:420px;max-height:252px;overflow:auto;background:var(--graphite);border-radius:12px;box-shadow:0 10px 34px rgba(20,20,19,.22);padding:5px;} .mail-suggest button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:var(--onyx);font-family:var(--font-body);font-size:13px;padding:7px 9px;border-radius:8px;cursor:pointer;} .mail-suggest button.on, .mail-suggest button:hover{background:color-mix(in srgb, var(--lacquer) 24%, transparent);} .mail-suggest .who{display:flex;flex-direction:column;min-width:0;} .mail-suggest .who b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mail-suggest .who span{color:var(--ash);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mail-icon-btn:hover{background:color-mix(in srgb, var(--onyx) 8%, transparent);color:var(--onyx);} .mail-icon-btn svg{width:17px;height:17px;} .mail-pager{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ash);font-variant-numeric:tabular-nums;} .mail-pages{display:flex;align-items:center;justify-content:center;gap:4px;padding:22px 0 6px;} .mail-page-num{background:none;border:none;color:var(--ash);font-family:var(--font-body);font-size:13px;cursor:pointer;min-width:30px;height:30px;border-radius:50%;font-variant-numeric:tabular-nums;} .mail-page-num:hover{background:color-mix(in srgb, var(--onyx) 8%, transparent);color:var(--onyx);} .mail-page-num.active{background:color-mix(in srgb, var(--lacquer) 60%, transparent);color:#FAF6E8;font-weight:600;} .mail-list{display:flex;flex-direction:column;} .mail-row{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;cursor:pointer;border-radius:8px;} .mail-check{width:16px;height:16px;flex:none;accent-color:var(--lacquer);cursor:pointer;margin:0;} .mail-row.picked{background:color-mix(in srgb, var(--lacquer) 22%, transparent);} .mail-row.picked:hover{background:color-mix(in srgb, var(--lacquer) 28%, transparent);} .mail-bulk{display:flex;align-items:center;gap:6px;} .mail-bulk .mail-bulk-count{font-size:12.5px;color:var(--ash);margin:0 6px 0 2px;} .mail-row:hover{background:color-mix(in srgb, var(--onyx) 8%, transparent);box-shadow:0 1px 2px rgba(0,0,0,.25);position:relative;z-index:1;} .mail-row.unread{background:color-mix(in srgb, var(--onyx) 6%, transparent);} .mail-row .mail-who{width:190px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;} .mail-row .mail-subject{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;} .mail-row .mail-snippet{color:var(--ash);font-weight:400;} .mail-row .mail-when{flex:none;font-size:12px;color:var(--ash);white-space:nowrap;font-variant-numeric:tabular-nums;} .mail-row.unread .mail-who, .mail-row.unread .mail-subject{font-weight:700;} .mail-row.unread .mail-when{color:var(--onyx);font-weight:600;} .mail-star{background:none;border:none;color:color-mix(in srgb, var(--ash) 70%, transparent);cursor:pointer;padding:0;line-height:0;flex:none;} .mail-star:hover{color:var(--brass);} .mail-star.on{color:var(--brass);} .mail-star svg{width:16px;height:16px;} .mail-compose{position:fixed;right:24px;bottom:0;width:min(560px,calc(100vw - 48px));z-index:700; background:color-mix(in srgb, var(--graphite) 55%, transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border:1px solid color-mix(in srgb, var(--lacquer) 60%, transparent);border-bottom:none; border-radius:14px 14px 0 0;box-shadow:0 -4px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;max-height:min(80vh,680px);} /* Full screen is its own thing: opaque enough to read on, filling the panel, with the page behind pushed back rather than showing through the glass. */ .mail-compose.is-max{right:0;left:0;top:0;bottom:0;width:auto;max-width:1080px;max-height:none;margin:28px auto; background:var(--graphite);backdrop-filter:none;-webkit-backdrop-filter:none; border:1px solid color-mix(in srgb, var(--lacquer) 55%, transparent);border-radius:16px;box-shadow:0 30px 90px rgba(0,0,0,.55);} .mail-compose.is-max header{border-radius:15px 15px 0 0;padding:14px 12px 14px 20px;font-size:14px;} .mail-compose.is-max .mail-compose-body{flex:1;min-height:0;} .mail-compose.is-max .mail-field{padding:9px 24px;} .mail-compose.is-max .mail-editor{max-height:none;flex:1;padding:22px 24px;font-size:14.5px;} .mail-compose.is-max .mail-tools{padding:6px 24px;} .mail-compose.is-max .mail-attach-list{padding:0 24px 12px;} .mail-compose.is-max footer{padding:16px 24px 20px;margin-top:auto; box-shadow:inset 0 1px 0 color-mix(in srgb, var(--onyx) 8%, transparent);} .mail-compose.is-max .mail-emoji{bottom:70px;left:24px;} #mailComposeScrim{position:fixed;inset:0;z-index:699;background:rgba(12,12,11,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);} .mail-compose.is-min{max-height:44px;width:min(320px,60vw);} .mail-compose.is-min .mail-compose-body{display:none;} .mail-compose-body{display:flex;flex-direction:column;min-height:0;flex:1;} .mail-compose header{display:flex;align-items:center;gap:4px;padding:12px 10px 12px 16px;background:color-mix(in srgb, var(--lacquer) 60%, transparent);color:#FAF6E8;border-radius:13px 13px 0 0;font-size:13px;font-weight:600;cursor:pointer;} .mail-compose header .mail-icon-btn{color:color-mix(in srgb, #FAF6E8 75%, transparent);} .mail-compose header .mail-icon-btn:hover{background:rgba(250,246,232,.14);color:#FAF6E8;} .mail-compose header .mail-compose-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mail-compose .mail-field{display:flex;align-items:center;gap:12px;padding:7px 16px;min-height:40px;box-sizing:border-box;box-shadow:inset 0 -1px 0 color-mix(in srgb, var(--onyx) 8%, transparent);} .mail-compose .mail-field label{font-size:13px;color:var(--ash);width:44px;flex:none;} /* #id beats the borderless layer's input rule, which carries !important too. */ #mailComposeHost .mail-compose .mail-field input{flex:1;background:none !important;border:none !important;box-shadow:none !important;color:var(--onyx);font-family:var(--font-body);font-size:13.5px;padding:3px 0;outline:none;min-width:0;} #mailComposeHost .mail-editor{background:none !important;} #mailComposeHost .mail-compose .mail-field input::placeholder{color:color-mix(in srgb, var(--ash) 75%, transparent);} #mailComposeHost .mail-compose .mail-field input:focus{background:none !important;box-shadow:none !important;} .mail-compose .mail-ccbcc{display:flex;gap:10px;font-size:12.5px;color:var(--ash);flex:none;} .mail-compose .mail-ccbcc button{background:none;border:none;color:var(--ash);cursor:pointer;font-size:12.5px;padding:2px;} .mail-compose .mail-ccbcc button:hover{color:var(--onyx);text-decoration:underline;} .mail-compose footer{display:flex;align-items:center;gap:4px;padding:14px 16px;flex-wrap:wrap;} .mail-compose .mail-attach-list{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px;} .mail-compose .mail-tools{padding:6px 16px;} .mail-emoji{position:absolute;bottom:56px;left:16px;background:var(--graphite);border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.45);padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;z-index:10;} .mail-emoji button{background:none;border:none;font-size:18px;cursor:pointer;width:30px;height:30px;border-radius:6px;} .mail-emoji button:hover{background:color-mix(in srgb, var(--onyx) 10%, transparent);} .mail-draft-note{font-size:12px;color:var(--ash);margin-left:auto;} @media (max-width:640px){ .mail-compose, .mail-compose.is-max{right:0;left:0;width:auto;border-radius:0;max-height:100vh;height:100vh;margin:0;} } /* Email content (a signature, a forwarded message) brings its own table styling; the CRM's table rules must not reach into the editors. */ .mail-editor table, .sig-box table{width:auto;border-collapse:separate;font-size:inherit;} .mail-editor td, .sig-box td, .mail-editor th, .sig-box th, .mail-editor tbody td, .sig-box tbody td{padding:0;border:0;background:none;vertical-align:top;font-size:inherit;} .mail-editor tbody td, .sig-box tbody td{border-bottom:0;} .mail-editor{flex:1;min-height:200px;max-height:42vh;overflow:auto;background:none;color:var(--onyx);font-family:var(--font-body);font-size:14px;line-height:1.6;padding:16px;outline:none;} .mail-editor:empty:before{content:attr(data-placeholder);color:var(--ash);} .mail-editor blockquote{border-left:2px solid color-mix(in srgb,var(--ash) 50%,transparent);margin:8px 0;padding:0 0 0 12px;color:var(--ash);} .mail-editor a{color:var(--brass);} .mail-tools{display:flex;align-items:center;gap:2px;padding:4px 10px;flex-wrap:wrap;} .mail-tools button{background:none;border:none;color:var(--ash);cursor:pointer;width:28px;height:28px;border-radius:6px;font-size:13px;line-height:1;} .mail-tools button:hover{background:color-mix(in srgb, var(--onyx) 10%, transparent);color:var(--onyx);} .mail-row-actions{display:none;align-items:center;gap:2px;margin-left:8px;} .mail-row:hover .mail-row-actions{display:flex;} .mail-row:hover .mail-when{display:none;} .nav-badge{margin-left:auto;background:var(--lacquer);color:#FAF6E8;font-size:11px;font-weight:600;border-radius:999px;padding:1px 7px;min-width:20px;text-align:center;} .mail-compose textarea{flex:1;min-height:200px;resize:none;background:none;border:none;color:var(--onyx);font-family:var(--font-body);font-size:14px;line-height:1.6;padding:12px 14px;outline:none;} .mail-compose footer{display:flex;align-items:center;gap:10px;padding:10px 14px;flex-wrap:wrap;} .mail-compose .mail-attach-list{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 8px;} @media (max-width:640px){ .mail-compose{right:0;left:0;width:auto;border-radius:0;max-height:100vh;height:100vh;} } .mail-skel{display:inline-block;height:10px;border-radius:6px;background:linear-gradient(90deg,color-mix(in srgb,var(--onyx) 8%,transparent),color-mix(in srgb,var(--onyx) 16%,transparent),color-mix(in srgb,var(--onyx) 8%,transparent));background-size:200% 100%;animation:mailShimmer 1.2s linear infinite;} @keyframes mailShimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}} .mail-avatar{width:36px;height:36px;border-radius:50%;background:var(--lacquer);color:#FAF6E8;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;flex:none;} @media (max-width:900px){ .mail-row .mail-who{width:120px;} .mail-row .mail-snippet{display:none;} } /* ---- Connect on a phone: Gmail's app layout, in O·ku's palette. The desktop markup is untouched; these pieces are hidden on desktop and the desktop-only pieces are hidden here. ---- */ .mail-menu-btn, .mail-me, .mail-scrim, .mail-drawer-head, .mail-drawer-extra, .mail-fab, .mail-mfolder, .mail-row .mail-mav, .mail-row .mail-m, .mail-mtop-acts, .mail-mchip, .mail-mreply, .mail-sheet-scrim, .mail-mspacer, .mail-swipe-bg{display:none;} @media (max-width:767px){ .mail-head{display:none;} .mail-search-wrap{max-width:none !important;margin:0 0 6px !important;} .mail-searchbar{max-width:none;gap:4px;} .mail-menu-btn{display:inline-flex;padding:10px;color:var(--onyx);} .mail-menu-btn svg{width:24px;height:24px;} #mail-search{height:48px;font-size:16px !important;padding:0 20px !important;border:none !important;background:color-mix(in srgb, var(--onyx) 9%, transparent) !important;} #mail-search-panel, #mail-keys, #mail-settings{display:none;} .mail-me{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:4px;cursor:pointer;flex:none;} .mail-me .avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;font-size:13px;display:flex;align-items:center;justify-content:center;margin:0;} .mail-layout{display:block !important;} .mail-drawer{position:fixed;top:0;bottom:0;left:0;width:min(304px,84vw);z-index:1200;background:var(--graphite);transform:translateX(-102%);transition:transform .22s ease;overflow-y:auto;padding:18px 12px calc(18px + env(safe-area-inset-bottom)) 0;box-shadow:6px 0 30px rgba(0,0,0,.4);} .mail-layout.drawer-open .mail-drawer{transform:none;} .mail-scrim{display:block;position:fixed;inset:0;z-index:1150;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .22s ease;} .mail-layout.drawer-open .mail-scrim{opacity:1;pointer-events:auto;} .mail-drawer-head{display:block;padding:6px 20px 16px;margin-bottom:8px;border-bottom:1px solid color-mix(in srgb, var(--onyx) 10%, transparent);} .mail-drawer-head .t{font-family:var(--font-display);font-size:24px;} .mail-drawer-head .s{font-size:12.5px;color:var(--ash);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} #mail-compose-btn{display:none !important;} .mail-rail{padding-right:0;} .mail-rail button{height:48px;font-size:15px;gap:20px;padding:0 18px 0 20px;border-radius:0 24px 24px 0;} .mail-rail button svg{width:20px;height:20px;} .mail-drawer-extra{display:block;margin-top:10px;padding-top:10px;border-top:1px solid color-mix(in srgb, var(--onyx) 10%, transparent);} .mail-drawer-extra button{display:flex;align-items:center;gap:20px;width:100%;height:48px;padding:0 18px 0 20px;background:none;border:none;color:var(--onyx);font-family:var(--font-body);font-size:15px;text-align:left;border-radius:0 24px 24px 0;cursor:pointer;} .mail-drawer-extra svg{width:20px;height:20px;opacity:.85;flex:none;} .mail-mfolder{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 6px 6px;font-size:13.5px;color:var(--ash);} .mail-main-toolbar{display:none;} .mail-main-toolbar.selecting{display:flex;flex-wrap:wrap;position:sticky;top:0;z-index:5;background:var(--graphite);border-radius:12px;padding:6px;} .mail-main-toolbar .mail-pager{display:none;} .mail-row{height:auto;align-items:flex-start;gap:14px;padding:12px 10px;border-radius:14px;} .mail-row:hover{box-shadow:none;} .mail-row > .mail-check, .mail-row > .mail-who, .mail-row > .mail-subject, .mail-row > .mail-clip, .mail-row > .mail-when, .mail-row > .mail-row-actions, .mail-row:hover > .mail-row-actions{display:none !important;} .mail-row .mail-mav{display:block;order:1;position:relative;flex:none;width:40px;height:40px;margin-top:2px;cursor:pointer;} .mail-row .mail-mav .oku-av{width:40px !important;height:40px !important;font-size:15px !important;} .mail-mcheck{display:none;position:absolute;inset:0;border-radius:50%;background:var(--lacquer);color:#FAF6E8;align-items:center;justify-content:center;} .mail-mcheck svg{width:20px;height:20px;} .mail-row.picked .mail-mcheck{display:flex;} .mail-row .mail-m{display:flex;flex-direction:column;gap:1px;order:2;flex:1;min-width:0;} .mail-m-l1{display:flex;align-items:baseline;gap:6px;} .mail-m-who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15.5px;color:var(--onyx);} .mail-m-count{font-size:12.5px;color:var(--ash);font-weight:400;} .mail-m-clip{display:inline-flex;color:var(--ash);} .mail-m-clip svg{width:14px;height:14px;} .mail-m-when{flex:none;font-size:12.5px;color:var(--ash);font-variant-numeric:tabular-nums;} .mail-m-sub, .mail-m-snip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.45;} .mail-m-sub{color:var(--onyx);} .mail-m-snip{color:var(--ash);} .mail-row.unread .mail-m-who, .mail-row.unread .mail-m-sub{font-weight:700;} .mail-row.unread .mail-m-when{color:var(--onyx);font-weight:600;} .mail-row > .mail-star{order:3;align-self:flex-end;padding:6px;margin:0 -4px -4px 0;} .mail-row > .mail-star svg{width:20px;height:20px;} .mail-pages{padding-bottom:96px;} .mail-fab{display:inline-flex;align-items:center;gap:12px;position:fixed;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:700;height:56px;padding:0 24px 0 20px;border:none;border-radius:18px;background:color-mix(in srgb, var(--lacquer) 88%, black);color:#FAF6E8;font-family:var(--font-body);font-size:15px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,.45);cursor:pointer;} .mail-fab svg{width:20px;height:20px;} /* Reading a message */ .mail-msg-top{margin-bottom:6px !important;} .mail-msg-top > .view-sub{display:none;} .mail-mtop-acts{display:flex;align-items:center;gap:2px;margin-left:auto;} .mail-msg-top .mail-icon-btn{padding:10px;color:var(--onyx);} .mail-msg-top .mail-icon-btn svg{width:22px;height:22px;} .mail-msg-card{border:none !important;background:none !important;padding:0 !important;box-shadow:none !important;} .mail-msg-card h3{line-height:1.3;} .mail-from-addr{display:none;} .mail-msg-card #mail-add-contact{padding:2px;} .mail-mchip{display:inline-block;vertical-align:3px;margin-left:6px;font-family:var(--font-body);font-size:11.5px;padding:2px 8px;border-radius:6px;background:color-mix(in srgb, var(--lacquer) 45%, transparent);color:#FAF6E8;} .mail-actions{display:none !important;} .mail-actions.open{display:flex !important;flex-direction:column;align-items:stretch;gap:4px !important;position:fixed;left:0;right:0;bottom:0;z-index:1200;margin:0 !important;background:var(--graphite);border-radius:18px 18px 0 0;padding:14px 14px calc(16px + env(safe-area-inset-bottom));max-height:72vh;overflow-y:auto;box-shadow:0 -10px 30px rgba(0,0,0,.45);} .mail-actions.open .btn{justify-content:flex-start;text-align:left;width:100%;} .mail-actions.open #mail-reply, .mail-actions.open #mail-forward{display:none;} .mail-actions.open select{width:100%;min-height:44px;} .mail-sheet-scrim{display:block;position:fixed;inset:0;z-index:1150;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s ease;} .mail-sheet-scrim.open{opacity:1;pointer-events:auto;} .mail-mreply{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:650;padding:10px 16px;background:var(--graphite);box-shadow:0 -6px 16px rgba(0,0,0,.25);} .mail-mreply button{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border:none;border-radius:999px;background:color-mix(in srgb, var(--onyx) 12%, transparent);color:var(--onyx);font-family:var(--font-body);font-size:15px;font-weight:500;cursor:pointer;} .mail-mreply svg{width:20px;height:20px;} .mail-mspacer{display:block;height:84px;} /* Swipe to archive */ .mail-list{position:relative;} .mail-row{touch-action:pan-y;} .mail-swipe-bg{display:flex;align-items:center;gap:10px;position:absolute;left:0;right:0;z-index:0;border-radius:14px;padding:0 26px;justify-content:flex-start;background:color-mix(in srgb, var(--live-green) 55%, transparent);color:#FAF6E8;font-size:14px;font-weight:600;transition:background .12s ease;pointer-events:none;} .mail-swipe-bg.left{justify-content:flex-end;} .mail-swipe-bg.armed{background:var(--live-green);} .mail-swipe-bg svg{width:22px;height:22px;} } /* =================================================================== Borderless design layer, the whole CRM (team + client portals). Surfaces float on a soft shadow instead of an outline, tables use alternating row tints instead of divider lines, and fields, chips and ghost buttons use a soft fill. Coloured left-edge accents (status, notes) are kept. Boxes styled inline in templates are caught by the [style*=…] selectors, so new screens follow the same look. =================================================================== */ /* Defined on body (not :root) so var(--onyx) resolves to the active theme. */ body{--bl-shadow:0 1px 2px rgba(20,20,19,.04),0 10px 30px rgba(20,20,19,.07);--bl-fill:color-mix(in srgb, var(--onyx) 9%, transparent);--bl-zebra:color-mix(in srgb, var(--onyx) 5%, transparent);--bl-inset:color-mix(in srgb, var(--onyx) 5%, transparent);--bl-row-radius:10px;} body[data-theme="dark"]{--bl-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);} /* Surfaces */ .card, .kpi-tile, .add-form, .admin-users, .home-card, .announcement{border-color:transparent !important;box-shadow:var(--bl-shadow);} .card:hover, .kpi-tile:hover{border-color:transparent !important;} .add-form, .admin-users{border-radius:var(--radius-md);} .asset-tile{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;box-shadow:var(--bl-shadow);} .asset-tile:hover{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;} /* Boxes drawn with inline borders in templates */ [style*="border:1px solid"]:not(input):not(select):not(textarea):not(button):not(.oku-modal *), [style*="border:1px dashed"]:not(input):not(select):not(textarea):not(button):not(.oku-modal *){border-color:transparent !important;box-shadow:var(--bl-shadow);border-radius:var(--radius-md);} /* …a box inside another surface gets a soft inset fill instead of a second shadow */ :is(.card, .kpi-tile, .asset-tile, .add-form, .admin-users, .home-card, .announcement, [style*="border:1px solid"], [style*="border:1px dashed"]) :is([style*="border:1px solid"], [style*="border:1px dashed"]):not(input):not(select):not(textarea):not(button){box-shadow:none;background-color:var(--bl-inset);} /* Inline divider lines (top / bottom / left / right) */ [style*="border-top:1px solid"], [style*="border-bottom:1px solid"], [style*="border-left:1px solid"], [style*="border-right:1px solid"]{border-top-color:transparent !important;border-bottom-color:transparent !important;border-left-color:transparent !important;border-right-color:transparent !important;} /* Tables: no lines, alternating row tints with rounded row ends */ table{border-collapse:separate;border-spacing:0;} table th, table td, table tr{border-top-color:transparent !important;border-bottom-color:transparent !important;border-left-color:transparent !important;border-right-color:transparent !important;} table:not(.tiled-table) > tbody > tr:nth-child(even) > td{background-color:var(--bl-zebra);} table:not(.tiled-table) > tbody > tr > td:first-child{border-top-left-radius:var(--bl-row-radius);border-bottom-left-radius:var(--bl-row-radius);} table:not(.tiled-table) > tbody > tr > td:last-child{border-top-right-radius:var(--bl-row-radius);border-bottom-right-radius:var(--bl-row-radius);} table:not(.tiled-table) > tbody > tr > td{transition:background-color .15s ease;} table:not(.tiled-table) > tbody > tr:hover > td{background-color:color-mix(in srgb, var(--onyx) 8%, transparent);} /* Tiled tables (one item = a few rows): each item is a soft filled block */ table.tiled-table > tbody > tr:not(.tile-spacer) > td{background-color:var(--bl-inset);} table.tiled-table > tbody > tr.tile-spacer > td{background:transparent !important;} table.tiled-table > tbody > tr.tile-top > td:first-child{border-top-left-radius:12px !important;} table.tiled-table > tbody > tr.tile-top > td:last-child{border-top-right-radius:12px !important;} table.tiled-table > tbody > tr.tile-bottom > td:first-child{border-bottom-left-radius:12px !important;} table.tiled-table > tbody > tr.tile-bottom > td:last-child{border-bottom-right-radius:12px !important;} table.responsive-table tr{border-color:transparent !important;box-shadow:var(--bl-shadow);} /* Lists inside onyx panels (Team Members, Roles, portal logins…): rows float as rounded strips */ .admin-users table:not(.tiled-table){border-spacing:0 6px;margin-top:-6px;} .admin-users table:not(.tiled-table) > tbody > tr > td, .admin-users table:not(.tiled-table) > tbody > tr:nth-child(even) > td{background-color:var(--bl-inset);} .admin-users table:not(.tiled-table) > tbody > tr:hover > td{background-color:color-mix(in srgb, var(--onyx) 8%, transparent);} /* Fields: soft fill, focus ring instead of an outline */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]), select:not(.status-select), textarea{border-color:transparent !important;background-color:var(--bl-fill) !important;} input:not([type="checkbox"]):not([type="radio"]):focus, select:not(.status-select):focus, textarea:focus{outline:none;box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-ink) 55%, transparent);} select option, select optgroup{background-color:var(--graphite);color:var(--onyx);} /* Buttons, chips, pills */ .btn-ghost, .btn-ghost:hover{border-color:transparent;} .btn-ghost{background:var(--bl-fill);} .btn-ghost:hover{background:color-mix(in srgb, var(--rust) 22%, transparent);} .del, .del:hover, a.asset-openbtn, a.asset-openbtn:hover{border-color:transparent;} a.asset-openbtn{background:var(--bl-fill);} .chip, .tag-pill, .cal-field-chip{border-color:transparent;background:var(--bl-fill);} .chip.active{border-color:transparent;background:var(--onyx);} /* Structural divider lines */ .topbar, .module-tabs, .tabs, .guide-section-head, .readmore-header, .sheet-header, .sheet-footer, .organiser-header, .organiser-current, .organiser-item, .organiser-add, .organiser-sheet-body, .organiser-sheet-item, .person-row, .renewal-item, .ch-need-item, .asset-tile-actions, .side-rail-bottom, .row-group-header, .row-list, .task-row{border-top-color:transparent !important;border-bottom-color:transparent !important;} .side-rail{border-right-color:transparent;} .guide-toc nav{border-left-color:transparent;} .bottom-nav, .organiser-sheet{border-top-color:transparent;box-shadow:0 -8px 24px rgba(0,0,0,.22);} .readmore-panel{box-shadow:var(--bl-shadow);} .organiser-item, .organiser-sheet-item{padding-left:8px;padding-right:8px;border-radius:8px;} .organiser-item:nth-child(even), .organiser-sheet-item:nth-child(even){background:var(--bl-zebra);} .task-row:nth-child(even){background:color-mix(in srgb, var(--onyx) 4.5%, var(--paper));} /* Calendar month grid: rounded day tiles with gaps instead of grid lines */ .cal-grid{background:transparent;border-color:transparent;gap:6px;} .cal-cell{border-radius:10px;background:color-mix(in srgb, var(--onyx) 6%, transparent);} .cal-cell-empty{background:transparent;} /* Phone: the banner image stands alone; greeting, message and clock sit right below it. */ @media (max-width:767px){ .home-banner:not(#mh-banner-preview){display:block;min-height:0;overflow:visible;background:none !important;border-radius:0;margin-bottom:20px;} .home-banner:not(#mh-banner-preview)::after{display:none;} .home-banner:not(#mh-banner-preview)::before{content:'';display:block;height:170px;border-radius:var(--radius-md);background:var(--banner-img, linear-gradient(135deg,color-mix(in srgb,var(--accent-ink) 70%,#000),color-mix(in srgb,var(--brass) 75%,#000)));background-size:cover;background-position:center var(--banner-pos, 50%);background-repeat:no-repeat;box-shadow:var(--bl-shadow);} .home-banner:not(#mh-banner-preview) .home-banner-inner{padding:16px 4px 0;color:var(--onyx);} .home-banner:not(#mh-banner-preview) .home-banner-greeting{color:var(--onyx);} } /* ========================================================================== World Gate Email theme. Loaded after O·ku's stylesheet and wins by coming second: O·ku's look runs on a handful of tokens, so most of the rebrand is re-pointing them at World Gate's own palette, the same one the CRM uses (navy #0d1c29, a lit blue #2f7fbc, cool neutrals). Type is Hanken Grotesk for text and Rajdhani for display, with IBM Plex Mono for the small tracked labels, so the two systems read as one company. The fonts are linked in the page head, exactly as the CRM loads them. ========================================================================== */ :root { --wg-navy: #0d1c29; --wg-navy-deep: #06101a; --wg-blue: #2f7fbc; /* the lit accent, for what is active */ --wg-blue-ink: #1b5f92; /* dark enough for text on white */ --wg-mist: #eef2f7; --onyx: var(--wg-navy); --graphite: #ffffff; --paper: var(--wg-mist); --stone: #dde5ec; --ash: #5b6b78; --lacquer: var(--wg-navy); --brass: var(--wg-blue-ink); --rust: var(--wg-blue-ink); --accent-ink: var(--wg-blue-ink); --accent-fill-hover: #1c2e3f; --accent-ink-hover: #14496f; --on-lacquer: #ffffff; --on-brass: #ffffff; --font-display: "Rajdhani", "Hanken Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", -apple-system, "Segoe UI", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; --radius-sm: 8px; --radius-md: 12px; --radius-pill: 999px; } body[data-theme="dark"] { --onyx: #eef2f5; --graphite: #0e1f2d; --paper: var(--wg-navy-deep); --stone: #1e3145; --ash: #7e8fa0; --lacquer: #4a90c2; --brass: #6fb2e0; --rust: #6fb2e0; --accent-ink: #6fb2e0; --accent-fill-hover: #5fa3d6; --accent-ink-hover: #8cc4ea; --on-lacquer: var(--wg-navy-deep); } /* A quiet page. O·ku's coloured glows become one faint blue wash. */ body { background: var(--paper); font-family: var(--font-body); } body::before, body[data-theme="dark"]::before { background: radial-gradient(60vw 40vw at 100% 0%, color-mix(in srgb, var(--wg-blue) 10%, transparent), transparent 70%); } /* Display type in Rajdhani, the CRM's headings. */ .view-title { font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; font-size: 28px; } .login-card .prompt { font-style: normal; font-weight: 500; font-size: 18px; } /* Buttons: tracked, uppercase, the CRM's shape. */ .btn { font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11.5px; border-radius: var(--radius-sm); } .btn-ghost:hover { border-color: var(--wg-blue); color: var(--onyx); } .btn-text { letter-spacing: .02em; text-transform: none; } /* ---------------------------------------------------------------- side rail Navy in both themes, like the CRM's rail: the white lockup, the lit blue for what is active, a blue hairline down the edge. */ .side-rail { background: var(--wg-navy); backdrop-filter: none; -webkit-backdrop-filter: none; border-right: 1px solid color-mix(in srgb, var(--wg-blue) 40%, transparent); } .side-rail-item { color: color-mix(in srgb, #ffffff 72%, transparent); } .side-rail-item:hover { color: #ffffff; background: rgba(255, 255, 255, .06); } .side-rail-item.active { color: #7fb8e4; background: rgba(47, 127, 188, .16); box-shadow: inset 2px 0 0 var(--wg-blue); } .side-rail-profile { border-top-color: rgba(47, 127, 188, .25); } .side-rail .rail-label { color: inherit; } .side-rail .nav-badge { background: var(--wg-blue); color: #ffffff; } @media (min-width: 1024px) { .side-rail-brand { display: block; padding: 4px 18px 22px; } .side-rail-brand img { width: 150px; max-width: 100%; height: auto; display: block; } } .bottom-nav-item.active { color: var(--onyx); } .bottom-nav-item.active svg { color: var(--wg-blue-ink); } body[data-theme="dark"] .bottom-nav-item.active svg { color: #6fb2e0; } /* ---------------------------------------------------------------- sign in */ .g-login { background: linear-gradient(180deg, color-mix(in srgb, var(--wg-navy) 5%, transparent), transparent 40%); } .login-card img { height: auto; width: 200px; max-width: 72%; margin: 0 auto 10px; display: block; } .login-card .sub { font-family: var(--font-mono); letter-spacing: .3em; text-transform: uppercase; font-size: 10px; color: var(--brass); margin-bottom: 34px; } .login-card .sub::before, .login-card .sub::after { content: ""; display: inline-block; width: 22px; height: 1px; background: currentColor; vertical-align: middle; margin: 0 10px; opacity: .6; } .g-boot { min-height: 100vh; display: grid; place-items: center; } .g-boot img { width: 180px; opacity: .85; animation: g-breathe 1.8s ease-in-out infinite; } @keyframes g-breathe { 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .g-boot img { animation: none; } } /* ---------------------------------------------------------------- settings cards */ .g-card { background: var(--graphite); border: 1px solid var(--stone); border-top: 2px solid var(--wg-blue); border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 14px; max-width: 760px; } .g-card-h { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: .02em; margin-bottom: 6px; color: var(--onyx); } .g-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; } .g-label { display: block; margin: 0 0 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); } .g-input { width: 100%; font: inherit; font-size: 13.5px; padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--stone); background: color-mix(in srgb, var(--onyx) 3%, var(--graphite)); color: var(--onyx); } .g-input:focus { outline: none; border-color: var(--wg-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wg-blue) 22%, transparent); } .g-sep { margin-top: 16px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--stone) 60%, transparent); } /* Links and focus rings in the lit blue, not O·ku lacquer. */ a { color: var(--accent-ink); } :focus-visible { outline-color: var(--wg-blue); } /* ---------------------------------------------------------------- sign in note Added with mailbox sign-in: the line under the password field explaining that this is the email password, not a separate one for this app. */ .login-note { margin: 12px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--ash); } /* Tick boxes on the settings cards, in World Gate's blue. */ .g-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 13.5px; color: var(--onyx); } .g-switch input { width: 16px; height: 16px; accent-color: var(--wg-blue-ink); cursor: pointer; } body[data-theme="dark"] .g-switch input { accent-color: #6fb2e0; } /* ---------------------------------------------------------------- mail rows The keyboard cursor washed the row in the same colour as an unread one, so a message you had just read still looked unread. The bar down the edge is enough to say where you are, and says nothing about whether it has been read. Hovering, ticking and genuinely unread rows keep their own colour, which is why they are excepted here rather than fought over later. */ .mail-row.cursor:not(:hover):not(.picked):not(.unread) { background: transparent; }