/* ========================================================= DedSafe — inner pages stylesheet Loaded site-wide; the homepage opts out via :not(.ds-home-page) ========================================================= */ /* ---------- Reset Cassiopeia chrome on every page except home ---------- The homepage has its own marker class .ds-home-page on , so we exclude it from these rules. */ html:not(.ds-home-page) .container-header, html:not(.ds-home-page) .container-sidebar-right, html:not(.ds-home-page) .mod-breadcrumbs__wrapper { display: none !important; } html:not(.ds-home-page) .site-grid { display: block !important; grid-template-columns: none !important; } html:not(.ds-home-page) .container-component, html:not(.ds-home-page) .grid-child.container-component { grid-column: 1 / -1 !important; width: 100% !important; max-width: 960px !important; margin: 0 auto !important; padding: 48px 32px 80px !important; box-sizing: border-box !important; } html:not(.ds-home-page) body { background: #FBF6EE !important; color: #2A2520 !important; font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif !important; margin: 0 !important; -webkit-font-smoothing: antialiased !important; } /* Cassiopeia adds class "has-sidebar-right" to ; counter it */ html:not(.ds-home-page) body.has-sidebar-right .site-grid { grid-template-columns: 1fr !important; } /* ---------- Typography ---------- */ html:not(.ds-home-page) main h1, html:not(.ds-home-page) main h2, html:not(.ds-home-page) main h3, html:not(.ds-home-page) main .page-header h1, html:not(.ds-home-page) main h1.h2, html:not(.ds-home-page) main h1.h1 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 500 !important; letter-spacing: -0.01em !important; color: #2A2520 !important; } html:not(.ds-home-page) main h1 { font-size: clamp(34px, 4vw, 48px) !important; line-height: 1.1 !important; } html:not(.ds-home-page) main h2 { font-size: clamp(26px, 3vw, 34px) !important; line-height: 1.15 !important; } html:not(.ds-home-page) main h3 { font-size: clamp(20px, 2.4vw, 24px) !important; line-height: 1.25 !important; } html:not(.ds-home-page) main p { color: #4A4239; line-height: 1.65; } html:not(.ds-home-page) main a { color: #5E7560; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 180ms ease, color 180ms ease; } html:not(.ds-home-page) main a:hover { color: #2A2520; border-bottom-color: #5E7560; } /* ---------- Card-style containers for forms ---------- */ html:not(.ds-home-page) .com-users-login, html:not(.ds-home-page) .com-users-registration, html:not(.ds-home-page) .com-users-profile, html:not(.ds-home-page) .com-users-remind, html:not(.ds-home-page) .com-users-reset, html:not(.ds-home-page) .login, html:not(.ds-home-page) .registration, html:not(.ds-home-page) .profile, html:not(.ds-home-page) .remind, html:not(.ds-home-page) .reset { background: #FFFFFF !important; border: 1px solid rgba(143, 166, 142, 0.18) !important; border-radius: 24px !important; padding: 48px 48px !important; max-width: 540px !important; width: 100% !important; margin: 24px auto !important; box-shadow: 0 20px 50px -28px rgba(42, 37, 32, 0.15), 0 8px 24px -12px rgba(42, 37, 32, 0.08) !important; box-sizing: border-box !important; } /* Cassiopeia's user.css adds .well / .form-horizontal styling to the form itself, which can force a different width. Reset those here. */ html:not(.ds-home-page) .com-users-login__form, html:not(.ds-home-page) .com-users-registration form, html:not(.ds-home-page) .com-users-profile form, html:not(.ds-home-page) .com-users-remind form, html:not(.ds-home-page) .com-users-reset form { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; } /* The list-group of "Forgot password / username / register" links below the form sits OUTSIDE the .com-users-login card on some Joomla layouts. Keep it constrained to the same width so it lines up underneath. */ html:not(.ds-home-page) .com-users-login__options { max-width: 540px !important; margin: 16px auto 0 !important; width: 100% !important; box-sizing: border-box !important; } html:not(.ds-home-page) .com-users-login h1, html:not(.ds-home-page) .com-users-registration h1, html:not(.ds-home-page) .com-users-profile h1, html:not(.ds-home-page) .com-users-remind h1, html:not(.ds-home-page) .com-users-reset h1 { margin-top: 0 !important; margin-bottom: 24px !important; text-align: center; } /* ---------- Form fields ---------- */ html:not(.ds-home-page) main .form-control, html:not(.ds-home-page) main .form-select, html:not(.ds-home-page) main input[type="text"], html:not(.ds-home-page) main input[type="email"], html:not(.ds-home-page) main input[type="password"], html:not(.ds-home-page) main input[type="tel"], html:not(.ds-home-page) main input[type="url"], html:not(.ds-home-page) main input[type="search"], html:not(.ds-home-page) main input[type="number"], html:not(.ds-home-page) main input[type="date"], html:not(.ds-home-page) main textarea, html:not(.ds-home-page) main select { border: 1.5px solid rgba(122, 111, 98, 0.28) !important; border-radius: 10px !important; padding: 11px 14px !important; background: #FBF6EE !important; color: #2A2520 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 15px !important; transition: border-color 180ms ease, background 180ms ease; } html:not(.ds-home-page) main .form-control:focus, html:not(.ds-home-page) main .form-select:focus, html:not(.ds-home-page) main input:focus, html:not(.ds-home-page) main textarea:focus, html:not(.ds-home-page) main select:focus { outline: none !important; border-color: #8FA68E !important; background: #FFFFFF !important; box-shadow: 0 0 0 4px rgba(143, 166, 142, 0.15) !important; } html:not(.ds-home-page) main label, html:not(.ds-home-page) main .form-label { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; color: #2A2520 !important; margin-bottom: 6px !important; } html:not(.ds-home-page) main .form-text, html:not(.ds-home-page) main small { color: #7A6F62 !important; font-size: 13px !important; } /* Input groups (e.g. password reveal toggle) */ html:not(.ds-home-page) main .input-group { border-radius: 10px !important; overflow: hidden; } html:not(.ds-home-page) main .input-group-text { background: #F5EFE3 !important; border: 1.5px solid rgba(122, 111, 98, 0.28) !important; color: #4A4239 !important; } html:not(.ds-home-page) main .input-group .form-control { border-radius: 10px 0 0 10px !important; } /* Checkboxes & radios We deliberately render the box's visual using box-shadow rather than border, because Chrome on macOS has a long-standing rendering bug where appearance:none controls don't immediately repaint background changes on :checked unless something forces a compositor flush. Using box-shadow for the outline and inset shadow for the fill works around the bug. */ /* Checkbox & radio styling * * Long history with this one. Chrome's Blink engine has a repaint bug * where state changes on appearance:none checkboxes don't trigger a * repaint until something else on the page forces one. We tried: * 1. transform: translateZ(0) + scale(1) - Chrome's matrix optimiser * sees they compute to the same value and skips the repaint. * 2. ::before pseudo-element with opacity transition - background * colour repaints but the pseudo-element doesn't (separate * compositor layer that gets the same lazy treatment). * * The fix that finally works: stop overriding the native renderer. * Use accent-color (Chrome 93+, all modern browsers) to colour native * checkboxes/radios. Native rendering means native repaint, which works. * We lose the hand-drawn checkmark shape but native checkboxes in * modern browsers look clean enough and the colour is still our sage. */ html:not(.ds-home-page) main .form-check-input { /* Override any framework appearance:none */ appearance: auto; -webkit-appearance: auto; -moz-appearance: auto; accent-color: #5E7560; width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; margin-top: 0.25em; /* Strip any inherited backgrounds, borders, box-shadows, transforms from earlier iterations of this CSS - we want pure native render */ background-color: transparent; background-image: none; border: none; box-shadow: none; transform: none; will-change: auto; transition: none; } html:not(.ds-home-page) main .form-check-input::before, html:not(.ds-home-page) main .form-check-input::after { /* Belt-and-braces: kill any pseudo-elements from earlier attempts */ content: none; display: none; } html:not(.ds-home-page) main .form-check-input:focus { outline: 2px solid rgba(94, 117, 96, 0.30); outline-offset: 2px; } html:not(.ds-home-page) main .form-check-label { color: #2A2520; font-weight: 500; font-size: 14.5px; cursor: pointer; margin-left: 8px; } /* Ensure the .form-check container keeps Bootstrap's left indent so the checkbox doesn't collide with the page edge. */ html:not(.ds-home-page) main .form-check { padding-left: 1.75em; margin-bottom: 6px; } html:not(.ds-home-page) main .form-check .form-check-input { margin-left: -1.75em; } /* ---------- Buttons ---------- */ html:not(.ds-home-page) main .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 12px 24px !important; border-radius: 100px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; text-decoration: none !important; border: 1.5px solid transparent !important; transition: all 180ms ease !important; white-space: nowrap !important; box-shadow: none !important; } html:not(.ds-home-page) main .btn-primary, html:not(.ds-home-page) main .btn-success { background: #2A2520 !important; color: #FBF6EE !important; border-color: #2A2520 !important; } html:not(.ds-home-page) main .btn-primary:hover, html:not(.ds-home-page) main .btn-success:hover { background: #5E7560 !important; border-color: #5E7560 !important; color: #FBF6EE !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(42, 37, 32, 0.18) !important; } html:not(.ds-home-page) main .btn-secondary, html:not(.ds-home-page) main .btn-outline-secondary { background: transparent !important; color: #2A2520 !important; border-color: rgba(122, 111, 98, 0.35) !important; } html:not(.ds-home-page) main .btn-secondary:hover, html:not(.ds-home-page) main .btn-outline-secondary:hover { background: #2A2520 !important; color: #FBF6EE !important; border-color: #2A2520 !important; } html:not(.ds-home-page) main .btn-danger, html:not(.ds-home-page) main .btn-outline-danger { background: transparent !important; color: #B33B3B !important; border-color: rgba(179, 59, 59, 0.35) !important; } html:not(.ds-home-page) main .btn-danger:hover, html:not(.ds-home-page) main .btn-outline-danger:hover { background: #B33B3B !important; color: #FBF6EE !important; border-color: #B33B3B !important; } html:not(.ds-home-page) main .btn-sm { padding: 8px 16px !important; font-size: 13.5px !important; } /* Full-width primary buttons in login/registration */ html:not(.ds-home-page) main .com-users-login button, html:not(.ds-home-page) main .com-users-registration button[type="submit"] { width: 100%; margin-top: 6px; } /* ---------- Alerts / messages ---------- */ html:not(.ds-home-page) #system-message-container .alert, html:not(.ds-home-page) main .alert { border-radius: 12px !important; border: none !important; padding: 14px 18px !important; margin: 16px auto !important; max-width: 960px !important; font-size: 14.5px !important; } html:not(.ds-home-page) main .alert-success { background: rgba(143, 166, 142, 0.18) !important; color: #3D5C42 !important; } html:not(.ds-home-page) main .alert-info { background: rgba(232, 182, 159, 0.22) !important; color: #7A4A2E !important; } html:not(.ds-home-page) main .alert-warning { background: rgba(212, 160, 23, 0.18) !important; color: #7A5C0A !important; } html:not(.ds-home-page) main .alert-danger, html:not(.ds-home-page) main .alert-error { background: rgba(179, 59, 59, 0.12) !important; color: #8C2828 !important; } /* ---------- Breadcrumbs (when not Cassiopeia's) ---------- */ html:not(.ds-home-page) main .breadcrumb { background: transparent !important; padding: 0 !important; margin-bottom: 24px !important; font-size: 14px !important; } html:not(.ds-home-page) main .breadcrumb-item { color: #7A6F62 !important; } html:not(.ds-home-page) main .breadcrumb-item.active { color: #2A2520 !important; } html:not(.ds-home-page) main .breadcrumb-item a { color: #5E7560 !important; } /* ---------- Cards (used in dashboard, space, trusted) ---------- */ html:not(.ds-home-page) main .card { background: #FFFFFF !important; border: 1px solid rgba(143, 166, 142, 0.16) !important; border-radius: 18px !important; box-shadow: 0 6px 16px -10px rgba(42, 37, 32, 0.08) !important; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } html:not(.ds-home-page) main .card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -16px rgba(42, 37, 32, 0.14) !important; border-color: rgba(143, 166, 142, 0.32) !important; } html:not(.ds-home-page) main .card-body { padding: 24px !important; } html:not(.ds-home-page) main .card-header { background: transparent !important; border-bottom: 1px solid rgba(143, 166, 142, 0.16) !important; padding: 18px 24px !important; font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 20px !important; font-weight: 600 !important; } /* Badges */ html:not(.ds-home-page) main .badge { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 600 !important; font-size: 11.5px !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; padding: 5px 10px !important; border-radius: 6px !important; } html:not(.ds-home-page) main .badge.bg-secondary { background: rgba(143, 166, 142, 0.2) !important; color: #3D5C42 !important; } html:not(.ds-home-page) main .badge.bg-warning { background: rgba(232, 182, 159, 0.3) !important; color: #7A4A2E !important; } /* ---------- Login page password reveal button ---------- */ html:not(.ds-home-page) main .input-password-toggle { background: #F5EFE3 !important; color: #4A4239 !important; border: 1.5px solid rgba(122, 111, 98, 0.28) !important; border-left: none !important; border-radius: 0 10px 10px 0 !important; } /* Password meter on registration */ html:not(.ds-home-page) main joomla-password-strength { display: block; margin-top: 6px; } /* ---------- "Other actions" links on login page ---------- */ html:not(.ds-home-page) main .com-users-login__options, html:not(.ds-home-page) main ul.unstyled, html:not(.ds-home-page) main ul.list-unstyled { list-style: none !important; padding: 0 !important; margin: 16px 0 0 !important; text-align: center; } html:not(.ds-home-page) main .com-users-login__options li, html:not(.ds-home-page) main ul.unstyled li, html:not(.ds-home-page) main ul.list-unstyled li { padding: 4px 0; font-size: 14px; } /* ---------- Dashboard space cards specifically ---------- */ html:not(.ds-home-page) .com-dedsafe-dashboard .space-card { border-left: 4px solid #8FA68E; } /* ---------- Page sections with extra padding ---------- */ html:not(.ds-home-page) main { padding: 0 !important; } html:not(.ds-home-page) main > div, html:not(.ds-home-page) main > section { margin-bottom: 24px; } /* ---------- System message wrapper ---------- */ html:not(.ds-home-page) #system-message-container { max-width: 960px; margin: 0 auto; padding: 0 32px; } /* ---------- Responsive ---------- */ @media (max-width: 720px) { html:not(.ds-home-page) .container-component { padding: 32px 20px 60px !important; } html:not(.ds-home-page) .com-users-login, html:not(.ds-home-page) .com-users-registration, html:not(.ds-home-page) .com-users-profile, html:not(.ds-home-page) .com-users-remind, html:not(.ds-home-page) .com-users-reset { padding: 32px 24px; } } /* ========================================================= Polish for Space, Upload, and Trusted views (added in component polish pass) ========================================================= */ /* ---------- Space view header ---------- */ html:not(.ds-home-page) .dedsafe-fe-space header { margin-bottom: 40px !important; } /* Replace the loud category badge with a calm coloured rule + label */ html:not(.ds-home-page) .dedsafe-fe-space .badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: transparent !important; color: #5E7560 !important; padding: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; margin-bottom: 14px !important; } html:not(.ds-home-page) .dedsafe-fe-space .badge::before { content: ''; display: inline-block; width: 24px; height: 2px; background: currentColor; border-radius: 1px; } html:not(.ds-home-page) .dedsafe-fe-space h1 { font-size: clamp(36px, 4.5vw, 50px) !important; margin-bottom: 12px !important; } html:not(.ds-home-page) .dedsafe-fe-space header p.text-muted { font-size: 17px !important; line-height: 1.55 !important; max-width: 640px; color: #4A4239 !important; } /* ---------- Space items list ---------- */ html:not(.ds-home-page) .dedsafe-fe-item-table { border-collapse: separate; border-spacing: 0; background: #FFFFFF; border-radius: 18px; overflow: hidden; border: 1px solid rgba(143, 166, 142, 0.16); box-shadow: 0 6px 16px -10px rgba(42, 37, 32, 0.08); } html:not(.ds-home-page) .dedsafe-fe-item-table thead { background: rgba(143, 166, 142, 0.08); } html:not(.ds-home-page) .dedsafe-fe-item-table th { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: #5E7560 !important; padding: 14px 18px !important; border: none !important; } html:not(.ds-home-page) .dedsafe-fe-item-table td { padding: 16px 18px !important; border-top: 1px solid rgba(143, 166, 142, 0.10) !important; color: #2A2520 !important; font-size: 14.5px !important; vertical-align: middle !important; } html:not(.ds-home-page) .dedsafe-fe-item-table tbody tr { transition: background 150ms ease; } html:not(.ds-home-page) .dedsafe-fe-item-table tbody tr:hover { background: rgba(251, 246, 238, 0.6) !important; } html:not(.ds-home-page) .dedsafe-fe-item-table a:not(.btn) { color: #2A2520 !important; font-weight: 500; } html:not(.ds-home-page) .dedsafe-fe-item-table a:not(.btn):hover { color: #5E7560 !important; } /* ---------- Empty-state card (reused across views) ---------- */ html:not(.ds-home-page) .dedsafe-fe-empty, html:not(.ds-home-page) .ds-empty-card { background: #FFFFFF !important; border: 1px solid rgba(143, 166, 142, 0.16) !important; border-radius: 24px !important; text-align: center; padding: 56px 32px !important; box-shadow: 0 6px 16px -10px rgba(42, 37, 32, 0.08) !important; } html:not(.ds-home-page) .dedsafe-fe-empty h2, html:not(.ds-home-page) .ds-empty-card h2 { margin-top: 0 !important; margin-bottom: 12px !important; } html:not(.ds-home-page) .dedsafe-fe-empty p, html:not(.ds-home-page) .ds-empty-card p { color: #4A4239 !important; max-width: 480px; margin-inline: auto; margin-bottom: 28px; } /* ---------- Upload form ---------- */ html:not(.ds-home-page) .dedsafe-fe-upload header, html:not(.ds-home-page) .dedsafe-fe-upload h1 + .text-muted { margin-bottom: 24px; } /* File-picker dressed up as a soft drop zone hint */ html:not(.ds-home-page) .dedsafe-fe-upload input[type="file"] { padding: 18px !important; background: rgba(251, 246, 238, 0.6) !important; border-style: dashed !important; border-color: rgba(143, 166, 142, 0.5) !important; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 14px !important; color: #4A4239 !important; } html:not(.ds-home-page) .dedsafe-fe-upload input[type="file"]:hover { background: #FBF6EE !important; border-color: #8FA68E !important; } html:not(.ds-home-page) .dedsafe-fe-upload input[type="file"]::file-selector-button { background: #2A2520; color: #FBF6EE; border: none; border-radius: 100px; padding: 8px 18px; margin-right: 14px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 180ms ease; } html:not(.ds-home-page) .dedsafe-fe-upload input[type="file"]::file-selector-button:hover { background: #5E7560; } /* ---------- Trusted People views ---------- */ html:not(.ds-home-page) .dedsafe-trusted header, html:not(.ds-home-page) .dedsafe-trusted-edit h1 { margin-bottom: 28px !important; } html:not(.ds-home-page) .dedsafe-trusted h2.h4 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 600 !important; font-size: 22px !important; color: #5E7560 !important; margin-top: 32px !important; margin-bottom: 18px !important; letter-spacing: -0.005em !important; } /* Pending-invite card: soften the peach border into a calmer left rule */ html:not(.ds-home-page) .dedsafe-trusted .card[style*="border-left"] { border-left: 3px solid #D4906F !important; } /* The role/state badge inside the trusted cards */ html:not(.ds-home-page) .dedsafe-trusted .badge.bg-warning { background: rgba(232, 182, 159, 0.32) !important; color: #7A4A2E !important; } /* Trusted edit page - tidy spacing between radio + date */ html:not(.ds-home-page) .dedsafe-trusted-edit .form-check { padding-top: 6px; padding-bottom: 6px; } html:not(.ds-home-page) .dedsafe-trusted-edit .form-check + input[type="date"] { margin-top: 10px; max-width: 260px; } /* History details disclosure widget */ html:not(.ds-home-page) .dedsafe-trusted details summary { list-style: none; padding: 8px 0; border-top: 1px solid rgba(122, 111, 98, 0.12); color: #7A6F62 !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 14px !important; font-weight: 600; } html:not(.ds-home-page) .dedsafe-trusted details summary::-webkit-details-marker { display: none; } html:not(.ds-home-page) .dedsafe-trusted details summary::before { content: '+'; display: inline-block; width: 16px; color: #8FA68E; transition: transform 180ms ease; } html:not(.ds-home-page) .dedsafe-trusted details[open] summary::before { content: '−'; } /* ---------- Subtle "you are an owner viewing your own space" hint ---------- */ html:not(.ds-home-page) .dedsafe-fe-space header .ds-owner-pill, html:not(.ds-home-page) .dedsafe-fe-space header .ds-shared-pill { display: inline-block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; margin-left: 8px; vertical-align: middle; } html:not(.ds-home-page) .dedsafe-fe-space header .ds-shared-pill { background: rgba(232, 182, 159, 0.28); color: #7A4A2E; } /* ---------- Hide Cassiopeia default modules from DedSafe app pages ---------- * * The "proper" fix is per-module menu assignment in Joomla admin (System -> * Site Modules -> edit each, set "Menu Assignment" to "On all pages except * selected" and uncheck the DedSafe menu items). Until that's done, these * rules hide the default Cassiopeia menu/login/breadcrumbs modules from * any com_dedsafe page so the app interface isn't cluttered. * * The home page (which uses html.ds-home-page) keeps everything visible * because the rule targets body.com_dedsafe specifically, not the home. */ body.com_dedsafe .mod-menu, body.com_dedsafe nav.mod-menu, body.com_dedsafe .mod-loginform, body.com_dedsafe .mod-breadcrumbs, body.com_dedsafe nav.mod-breadcrumbs { display: none !important; } /* Some Cassiopeia variants wrap modules in `moduletable` containers with item-id or name suffixes. Belt-and-braces hide those when they ONLY contain one of the modules above. */ body.com_dedsafe .moduletable.mod-menu, body.com_dedsafe .moduletable.mod-breadcrumbs, body.com_dedsafe .moduletable.mod-loginform { display: none !important; } /* ---------- Pagination footer (Space items list, etc) ---------- */ html:not(.ds-home-page) main .ds-pagination { display: flex; justify-content: center; padding: 24px 0; margin-top: 12px; border-top: 1px solid rgba(143, 166, 142, 0.18); } html:not(.ds-home-page) main .ds-pagination .pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; align-items: center; flex-wrap: wrap; } html:not(.ds-home-page) main .ds-pagination .pagination li { list-style: none; } html:not(.ds-home-page) main .ds-pagination .page-link, html:not(.ds-home-page) main .ds-pagination .page-item span, html:not(.ds-home-page) main .ds-pagination .pagination a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 6px 12px; color: #5E7560; background: #FFFFFF; border: 1px solid rgba(143, 166, 142, 0.25); border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; transition: background 120ms ease, color 120ms ease; } html:not(.ds-home-page) main .ds-pagination .page-link:hover, html:not(.ds-home-page) main .ds-pagination .pagination a:hover { background: rgba(143, 166, 142, 0.10); color: #2A2520; border-color: rgba(143, 166, 142, 0.40); } html:not(.ds-home-page) main .ds-pagination .page-item.active .page-link, html:not(.ds-home-page) main .ds-pagination .pagination .active a, html:not(.ds-home-page) main .ds-pagination .pagination li.active span { background: #5E7560; color: #FBF6EE; border-color: #5E7560; } html:not(.ds-home-page) main .ds-pagination .page-item.disabled .page-link, html:not(.ds-home-page) main .ds-pagination .pagination .disabled span { color: rgba(122, 111, 98, 0.50); background: rgba(122, 111, 98, 0.05); cursor: not-allowed; } /* Hide Joomla's "Display Num" select dropdown by default - 50 per page is fine */ html:not(.ds-home-page) main .ds-pagination .limit { display: none; } /* ========================================================= Mobile responsive sweep ========================================================= */ /* ---------- Tablet and below (768px) ---------- */ @media (max-width: 768px) { /* Container padding tightens on small screens */ html:not(.ds-home-page) .container-component { padding: 20px 14px 48px !important; } /* Greeting/header rows wrap their action buttons under the heading */ html:not(.ds-home-page) main .dedsafe-fe-header-actions { margin-top: 12px; width: 100%; flex-direction: row; flex-wrap: wrap; } /* Top bar (DedSafe nav) - keep logo and right-side menu but tighten */ html:not(.ds-home-page) .ds-topbar { padding-left: 14px !important; padding-right: 14px !important; } html:not(.ds-home-page) .ds-topbar .ds-topbar-product { font-size: 18px !important; } /* Filter rows stack vertically on small screens. The .d-flex from Bootstrap with multiple inputs side-by-side breaks down at < 600px. */ html:not(.ds-home-page) main form.dedsafe-fe-filter, html:not(.ds-home-page) main .ds-filter-row { flex-direction: column !important; align-items: stretch !important; } html:not(.ds-home-page) main form.dedsafe-fe-filter > * { width: 100% !important; max-width: 100% !important; } /* Tables - allow horizontal scroll rather than overflow */ html:not(.ds-home-page) main .table-responsive, html:not(.ds-home-page) main .dedsafe-fe-items table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; width: 100%; } html:not(.ds-home-page) main .dedsafe-fe-items table thead, html:not(.ds-home-page) main .dedsafe-fe-items table tbody, html:not(.ds-home-page) main .dedsafe-fe-items table tr { display: table; width: 100%; table-layout: fixed; } /* Headings tighten */ html:not(.ds-home-page) main h1, html:not(.ds-home-page) main .h1 { font-size: clamp(28px, 7vw, 36px) !important; line-height: 1.15 !important; } html:not(.ds-home-page) main h2, html:not(.ds-home-page) main .h2 { font-size: clamp(22px, 5.5vw, 28px) !important; line-height: 1.2 !important; } /* Cards & sections - reduce padding from desktop's 32-40 to 20-24 */ html:not(.ds-home-page) main .card, html:not(.ds-home-page) main .card-body { padding: 20px !important; } /* Modals (item-restrict, etc) - allow full viewport width with margin */ html:not(.ds-home-page) main .ds-modal-dialog { max-width: calc(100vw - 24px) !important; max-height: calc(100vh - 24px) !important; margin: 12px !important; overflow-y: auto; } /* Trustee panel (dashboard "You've been trusted by") */ html:not(.ds-home-page) main .dedsafe-fe-trusted-by { padding: 20px !important; } /* Account-holder pill - separate line on mobile so it doesn't crowd */ html:not(.ds-home-page) main .ds-account-holder-pill { margin-left: 0 !important; margin-top: 6px; display: inline-flex; } /* Buttons in dashboard action rows wrap nicely */ html:not(.ds-home-page) main .dedsafe-fe-header-actions .btn, html:not(.ds-home-page) main .dedsafe-fe-header-actions a { flex: 1 1 calc(50% - 4px); min-width: 0; } } /* ---------- Phones (480px) ---------- */ @media (max-width: 480px) { html:not(.ds-home-page) .container-component { padding: 16px 12px 40px !important; } /* Hide the topbar's secondary right-side links (My DedSafe, Profile) on very small screens to free up space. The hamburger or logo tap can be the primary navigation. (We don't have a hamburger yet so just keep the most important links.) */ html:not(.ds-home-page) .ds-topbar .ds-topbar-link.ds-topbar-secondary { display: none; } /* Trustee-guide hero text */ html:not(.ds-home-page) main .ds-tg-h1 { font-size: 28px !important; } /* Stack header action buttons in single column on phones */ html:not(.ds-home-page) main .dedsafe-fe-header-actions { flex-direction: column !important; align-items: stretch !important; } html:not(.ds-home-page) main .dedsafe-fe-header-actions .btn, html:not(.ds-home-page) main .dedsafe-fe-header-actions a { flex: 1 1 100%; width: 100%; } /* Request access form (centered card) - full-width on phones */ html:not(.ds-home-page) main .ds-ra-card { padding: 22px 18px !important; } } /* ============================================================ * Confirm modal — reusable for delete / grant / role change * Used by dedsafe-app.js via window.dedsafeConfirm() * or declaratively via data-ds-confirm on forms/links. * ============================================================ */ .ds-confirm-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity 160ms ease; pointer-events: none; } .ds-confirm-modal[hidden] { display: none !important; } .ds-confirm-modal.ds-confirm-open { opacity: 1; pointer-events: auto; } .ds-confirm-backdrop { position: absolute; inset: 0; background: rgba(42, 37, 32, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .ds-confirm-dialog { position: relative; background: #FBF6EE; border-radius: 14px; border: 1px solid rgba(122, 111, 98, 0.18); box-shadow: 0 24px 60px rgba(42, 37, 32, 0.28); width: 100%; max-width: 460px; padding: 32px 32px 24px; font-family: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif; color: #2A2520; transform: translateY(6px) scale(0.985); transition: transform 200ms cubic-bezier(.2,.8,.2,1); } .ds-confirm-open .ds-confirm-dialog { transform: translateY(0) scale(1); } .ds-confirm-icon { width: 44px; height: 44px; border-radius: 100px; display: grid; place-items: center; background: rgba(212, 160, 23, 0.12); color: #B68506; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 700; margin-bottom: 16px; } .ds-confirm-modal[data-danger="low"] .ds-confirm-icon { background: rgba(94, 117, 96, 0.12); color: #5E7560; } .ds-confirm-modal[data-danger="high"] .ds-confirm-icon { background: rgba(180, 60, 50, 0.12); color: #B43C32; } .ds-confirm-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 600; line-height: 1.2; margin: 0 0 10px; color: #2A2520; letter-spacing: -0.01em; } .ds-confirm-body { font-size: 15px; line-height: 1.55; color: #4A4239; margin-bottom: 24px; } .ds-confirm-body strong { color: #2A2520; } .ds-confirm-body ul { margin: 12px 0 0; padding: 0 0 0 18px; } .ds-confirm-body ul li { margin-bottom: 4px; } .ds-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; } .ds-confirm-actions .ds-btn { font-family: inherit; font-size: 14.5px; font-weight: 600; padding: 10px 18px; border-radius: 100px; border: 1.5px solid transparent; cursor: pointer; transition: background 150ms ease, color 150ms ease, border-color 150ms ease; } .ds-confirm-actions .ds-btn-ghost { background: transparent; color: #4A4239; border-color: rgba(122, 111, 98, 0.35); } .ds-confirm-actions .ds-btn-ghost:hover { background: rgba(122, 111, 98, 0.08); color: #2A2520; } .ds-confirm-actions .ds-btn-primary { background: #2A2520; color: #FBF6EE; } .ds-confirm-actions .ds-btn-primary:hover { background: #5E7560; } .ds-confirm-modal[data-danger="high"] .ds-btn-primary { background: #B43C32; } .ds-confirm-modal[data-danger="high"] .ds-btn-primary:hover { background: #8E2D26; } /* ============================================================ * Inline help tooltips — for upload form, etc * ============================================================ */ .ds-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 100px; background: rgba(94, 117, 96, 0.14); color: #5E7560; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 13px; font-weight: 600; font-style: italic; cursor: help; margin-left: 6px; vertical-align: middle; position: relative; user-select: none; } .ds-help-icon:hover, .ds-help-icon:focus { background: #5E7560; color: #FBF6EE; outline: none; } .ds-help-icon::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: #2A2520; color: #FBF6EE; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-style: normal; font-weight: 500; font-size: 13px; line-height: 1.45; padding: 10px 14px; border-radius: 8px; width: 260px; text-align: left; opacity: 0; pointer-events: none; transition: opacity 140ms ease, transform 140ms ease; z-index: 100; box-shadow: 0 12px 24px rgba(42, 37, 32, 0.25); } .ds-help-icon:hover::after, .ds-help-icon:focus::after { opacity: 1; transform: translateX(-50%) translateY(0); } .ds-help-icon::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #2A2520; opacity: 0; transition: opacity 140ms ease; z-index: 100; } .ds-help-icon:hover::before, .ds-help-icon:focus::before { opacity: 1; } /* ============================================================ * Storage usage strip — dashboard at-a-glance widget * ============================================================ */ html:not(.ds-home-page) main .ds-usage-strip { background: linear-gradient(135deg, #FBF6EE 0%, #F5EDDF 100%); border: 1px solid rgba(122, 111, 98, 0.18); border-radius: 14px; padding: 20px 24px; margin: 0 0 24px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: center; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; } html:not(.ds-home-page) main .ds-usage-stat { display: flex; flex-direction: column; gap: 4px; } html:not(.ds-home-page) main .ds-usage-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #7A6F62; font-weight: 600; } html:not(.ds-home-page) main .ds-usage-value { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 600; color: #2A2520; line-height: 1.1; } html:not(.ds-home-page) main .ds-usage-bar { grid-column: 1 / -1; height: 8px; background: rgba(122, 111, 98, 0.12); border-radius: 100px; overflow: hidden; position: relative; } html:not(.ds-home-page) main .ds-usage-bar-fill { height: 100%; background: #5E7560; border-radius: 100px; transition: width 400ms ease; } html:not(.ds-home-page) main .ds-usage-bar-fill.ds-usage-warn { background: #D4A017; } html:not(.ds-home-page) main .ds-usage-bar-fill.ds-usage-danger { background: #B43C32; } @media (max-width: 600px) { html:not(.ds-home-page) main .ds-usage-strip { grid-template-columns: 1fr 1fr; gap: 14px; } html:not(.ds-home-page) main .ds-usage-value { font-size: 24px; } } /* ============================================================ * Upload form: friendly "file too large" / extension hints * ============================================================ */ html:not(.ds-home-page) main .ds-upload-hint { margin-top: 6px; font-size: 13px; color: #7A6F62; line-height: 1.45; } html:not(.ds-home-page) main .ds-upload-error { background: rgba(180, 60, 50, 0.08); border: 1px solid rgba(180, 60, 50, 0.30); border-radius: 10px; padding: 14px 16px; margin: 12px 0; color: #8E2D26; font-size: 14px; line-height: 1.5; } html:not(.ds-home-page) main .ds-upload-error strong { display: block; margin-bottom: 4px; color: #6B221C; } /* ============================================================ * Trusted People — top-level roster page * ============================================================ */ html:not(.ds-home-page) main .dedsafe-fe-trustees { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; } /* Explainer block - what trusted people can / can't do */ html:not(.ds-home-page) main .ds-trustees-explainer { background: linear-gradient(135deg, rgba(94,117,96,0.06), rgba(232,182,159,0.10)); border: 1px solid rgba(94, 117, 96, 0.20); border-radius: 14px; padding: 22px 26px; margin: 0 0 32px; } html:not(.ds-home-page) main .ds-trustees-explainer-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; color: #2A2520; margin: 0 0 12px; } html:not(.ds-home-page) main .ds-trustees-explainer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } html:not(.ds-home-page) main .ds-trustees-explainer-list li { font-size: 14.5px; line-height: 1.5; color: #4A4239; padding-left: 22px; position: relative; } html:not(.ds-home-page) main .ds-trustees-explainer-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #5E7560; font-weight: 700; } html:not(.ds-home-page) main .ds-trustees-explainer-list li.ds-trustees-cannot::before { content: '×'; color: #B43C32; font-size: 19px; line-height: 1.2; } html:not(.ds-home-page) main .ds-trustees-explainer-list li strong { color: #2A2520; font-weight: 600; margin-right: 4px; } /* Empty state */ html:not(.ds-home-page) main .ds-trustees-empty { background: #FFFFFF; border: 1px dashed rgba(122, 111, 98, 0.30); border-radius: 14px; padding: 48px 32px; text-align: center; } html:not(.ds-home-page) main .ds-trustees-empty-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; font-weight: 600; color: #2A2520; margin: 0 0 12px; } html:not(.ds-home-page) main .ds-trustees-empty-text { color: #4A4239; font-size: 15px; line-height: 1.6; max-width: 520px; margin: 0 auto 20px; } html:not(.ds-home-page) main .ds-trustees-empty-cta { display: inline-flex; align-items: center; padding: 10px 22px; border-radius: 100px; background: #2A2520; color: #FBF6EE !important; text-decoration: none; font-size: 14.5px; font-weight: 600; transition: background 150ms ease; } html:not(.ds-home-page) main .ds-trustees-empty-cta:hover { background: #5E7560; } /* Roster list */ html:not(.ds-home-page) main .ds-trustees-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; } /* Per-person card */ html:not(.ds-home-page) main .ds-trustee-card { background: #FFFFFF; border: 1px solid rgba(122, 111, 98, 0.20); border-radius: 14px; padding: 24px 26px; transition: border-color 180ms ease, box-shadow 180ms ease; } html:not(.ds-home-page) main .ds-trustee-card:hover { border-color: rgba(94, 117, 96, 0.40); box-shadow: 0 4px 20px rgba(42, 37, 32, 0.06); } html:not(.ds-home-page) main .ds-trustee-card-pending { background: #FDFAF3; border-style: dashed; border-color: rgba(212, 160, 23, 0.40); } html:not(.ds-home-page) main .ds-trustee-card-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid rgba(122, 111, 98, 0.12); } html:not(.ds-home-page) main .ds-trustee-avatar { width: 48px; height: 48px; border-radius: 100px; background: linear-gradient(135deg, #5E7560, #4A6151); color: #FBF6EE; display: grid; place-items: center; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; flex-shrink: 0; } html:not(.ds-home-page) main .ds-trustee-card-pending .ds-trustee-avatar { background: linear-gradient(135deg, #D4A017, #B68506); } html:not(.ds-home-page) main .ds-trustee-ident { flex: 1; min-width: 0; } html:not(.ds-home-page) main .ds-trustee-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; color: #2A2520; line-height: 1.2; margin-bottom: 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } html:not(.ds-home-page) main .ds-trustee-pending-pill { background: rgba(212, 160, 23, 0.18); color: #8B6914; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 10px; border-radius: 100px; } html:not(.ds-home-page) main .ds-trustee-email { font-size: 13.5px; color: #7A6F62; margin-bottom: 6px; word-break: break-all; } html:not(.ds-home-page) main .ds-trustee-summary { font-size: 13.5px; color: #5E7560; font-weight: 500; } /* Per-space row inside a card */ html:not(.ds-home-page) main .ds-trustee-spaces { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } html:not(.ds-home-page) main .ds-trustee-space-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; background: #FBF6EE; border-radius: 10px; border: 1px solid rgba(122, 111, 98, 0.10); flex-wrap: wrap; } html:not(.ds-home-page) main .ds-trustee-space-pending { background: rgba(212, 160, 23, 0.05); } html:not(.ds-home-page) main .ds-trustee-space-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; } html:not(.ds-home-page) main .ds-trustee-space-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } html:not(.ds-home-page) main .ds-trustee-space-title { font-weight: 600; color: #2A2520; text-decoration: none; font-size: 14.5px; border-bottom: 1px solid transparent; transition: border-color 150ms ease; } html:not(.ds-home-page) main .ds-trustee-space-title:hover { border-bottom-color: #5E7560; color: #5E7560; } html:not(.ds-home-page) main .ds-trustee-grant-pill { background: #FFFFFF; color: #5E7560; border: 1px solid rgba(94, 117, 96, 0.30); font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 100px; cursor: help; letter-spacing: 0.02em; } html:not(.ds-home-page) main .ds-trustee-cap-pill { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; } html:not(.ds-home-page) main .ds-trustee-cap-upload { background: rgba(94, 117, 96, 0.14); color: #4A6151; } html:not(.ds-home-page) main .ds-trustee-cap-pending { background: rgba(212, 160, 23, 0.18); color: #8B6914; } /* Actions on each row */ html:not(.ds-home-page) main .ds-trustee-space-actions { display: flex; gap: 6px; flex-shrink: 0; } html:not(.ds-home-page) main .ds-trustee-action { background: transparent; color: #4A4239; border: 1px solid rgba(122, 111, 98, 0.30); padding: 6px 14px; border-radius: 100px; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 150ms ease; font-family: inherit; white-space: nowrap; } html:not(.ds-home-page) main .ds-trustee-action:hover { background: #2A2520; color: #FBF6EE; border-color: #2A2520; } html:not(.ds-home-page) main .ds-trustee-action-danger { color: #B43C32; border-color: rgba(180, 60, 50, 0.35); } html:not(.ds-home-page) main .ds-trustee-action-danger:hover { background: #B43C32; color: #FBF6EE; border-color: #B43C32; } /* Mobile: stack the per-space row vertically */ @media (max-width: 640px) { html:not(.ds-home-page) main .ds-trustee-space-row { flex-direction: column; align-items: stretch; } html:not(.ds-home-page) main .ds-trustee-space-actions { justify-content: flex-end; } html:not(.ds-home-page) main .ds-trustee-card { padding: 18px 16px; } html:not(.ds-home-page) main .ds-trustees-explainer { padding: 18px 18px; } } /* ============================================================ * Sticky Notes * ============================================================ */ /* Tile glyph for notes in the items list - peach background, distinct * from file kinds */ html:not(.ds-home-page) main .ds-tile-note { background: linear-gradient(135deg, #E8B69F, #D89F80); color: #5C3120; font-size: 20px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; } /* Note view card - the read-only display */ html:not(.ds-home-page) main .ds-note-card-view { background: linear-gradient(135deg, #FBF6EE 0%, #FAEFE2 100%); border: 1px solid rgba(232, 182, 159, 0.50); border-radius: 14px; padding: 32px 36px; margin-bottom: 24px; box-shadow: 0 8px 24px rgba(232, 182, 159, 0.18); position: relative; } /* Subtle tape-corner effect — physical sticky feel */ html:not(.ds-home-page) main .ds-note-card-view::before { content: ''; position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-1.5deg); width: 80px; height: 18px; background: rgba(94, 117, 96, 0.16); border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06); } html:not(.ds-home-page) main .ds-note-card-header { border-bottom: 1px solid rgba(122, 111, 98, 0.18); padding-bottom: 16px; margin-bottom: 20px; } html:not(.ds-home-page) main .ds-note-card-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; font-weight: 600; color: #2A2520; line-height: 1.2; margin: 0 0 6px; letter-spacing: -0.01em; } html:not(.ds-home-page) main .ds-note-card-meta { font-size: 13px; color: #7A6F62; } html:not(.ds-home-page) main .ds-note-card-body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.7; color: #2A2520; white-space: pre-wrap; word-wrap: break-word; min-height: 80px; } html:not(.ds-home-page) main .ds-note-reminder-strip { margin-top: 24px; padding: 12px 16px; background: rgba(212, 160, 23, 0.10); border: 1px solid rgba(212, 160, 23, 0.30); border-radius: 10px; color: #6B521A; font-size: 14px; display: flex; align-items: center; gap: 10px; } html:not(.ds-home-page) main .ds-note-reminder-icon { font-size: 18px; } html:not(.ds-home-page) main .ds-note-view-actions { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 24px; } /* Note form - textarea styling */ html:not(.ds-home-page) main .ds-note-form { background: #FFFFFF; border: 1px solid rgba(122, 111, 98, 0.20); border-radius: 14px; padding: 28px 32px; box-shadow: 0 2px 8px rgba(42, 37, 32, 0.04); } html:not(.ds-home-page) main .ds-note-body-input { background: linear-gradient(135deg, #FBF6EE 0%, #FAEFE2 100%); border: 1px solid rgba(232, 182, 159, 0.50); border-radius: 10px; padding: 16px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.6; color: #2A2520; min-height: 200px; resize: vertical; } html:not(.ds-home-page) main .ds-note-body-input:focus { border-color: #5E7560; box-shadow: 0 0 0 3px rgba(94, 117, 96, 0.10); outline: none; } @media (max-width: 640px) { html:not(.ds-home-page) main .ds-note-card-view { padding: 24px 22px; } html:not(.ds-home-page) main .ds-note-card-title { font-size: 26px; } html:not(.ds-home-page) main .ds-note-form { padding: 22px 18px; } } /* ============================================================ * Pinned notes panel (1.0.60) * ============================================================ */ html:not(.ds-home-page) main .ds-pinned-panel { background: linear-gradient(135deg, rgba(232, 182, 159, 0.18), rgba(212, 160, 23, 0.10)); border: 1px solid rgba(212, 160, 23, 0.32); border-radius: 14px; padding: 22px 26px; margin-bottom: 28px; position: relative; } html:not(.ds-home-page) main .ds-pinned-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed rgba(122, 111, 98, 0.22); } html:not(.ds-home-page) main .ds-pinned-panel-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 600; color: #5C3120; margin: 0; display: flex; align-items: center; gap: 10px; } html:not(.ds-home-page) main .ds-pinned-panel-count { font-size: 13px; color: #7A6F62; font-weight: 500; } html:not(.ds-home-page) main .ds-pinned-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } html:not(.ds-home-page) main .ds-pinned-item { background: #FFFFFF; border: 1px solid rgba(232, 182, 159, 0.45); border-radius: 10px; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } html:not(.ds-home-page) main .ds-pinned-item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(232, 182, 159, 0.30); border-color: rgba(94, 117, 96, 0.40); } html:not(.ds-home-page) main .ds-pinned-item-link { display: block; padding: 16px 18px; text-decoration: none; color: #2A2520; } html:not(.ds-home-page) main .ds-pinned-item-link:hover { text-decoration: none; color: #2A2520; } html:not(.ds-home-page) main .ds-pinned-item-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 18px; font-weight: 600; line-height: 1.25; margin-bottom: 6px; } html:not(.ds-home-page) main .ds-pinned-item-snippet { font-size: 13.5px; line-height: 1.5; color: #5A5249; white-space: pre-wrap; } /* Pinned-flag strip on the note view itself */ html:not(.ds-home-page) main .ds-note-pinned-flag { position: absolute; top: 14px; right: 16px; background: rgba(212, 160, 23, 0.18); color: #6B521A; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; display: flex; align-items: center; gap: 6px; } html:not(.ds-home-page) main .ds-note-card-pinned { border-color: rgba(212, 160, 23, 0.50); box-shadow: 0 8px 28px rgba(212, 160, 23, 0.16); } html:not(.ds-home-page) main .ds-note-pin-icon { margin-right: 4px; } /* Business category visual hint - subtle accent on cards/pills. * The CreateModel preset gives business spaces a slate-blue * (#3D5A6C) swatch, which then renders via the existing space-color * machinery on space cards and trustee rows. No extra rule needed * for swatches here. */ @media (max-width: 640px) { html:not(.ds-home-page) main .ds-pinned-panel { padding: 18px 16px; } html:not(.ds-home-page) main .ds-note-pinned-flag { position: static; margin-bottom: 14px; display: inline-flex; } } /* ============================================================ * Folders inside drawers (1.0.62) * ============================================================ */ /* Folder tiles at the drawer root */ html:not(.ds-home-page) main .ds-folder-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0 0 24px; } html:not(.ds-home-page) main .ds-folder-tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #FFFFFF; border: 1px solid rgba(122, 111, 98, 0.20); border-radius: 12px; text-decoration: none; color: #2A2520; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } html:not(.ds-home-page) main .ds-folder-tile:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(94, 117, 96, 0.14); border-color: rgba(94, 117, 96, 0.45); color: #2A2520; text-decoration: none; } html:not(.ds-home-page) main .ds-folder-tile-icon { font-size: 28px; line-height: 1; flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(212, 160, 23, 0.18), rgba(232, 182, 159, 0.20)); border-radius: 8px; } html:not(.ds-home-page) main .ds-folder-tile-body { min-width: 0; flex: 1; } html:not(.ds-home-page) main .ds-folder-tile-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 600; line-height: 1.2; color: #2A2520; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html:not(.ds-home-page) main .ds-folder-tile-count { font-size: 12.5px; color: #7A6F62; } /* In-folder breadcrumb header */ html:not(.ds-home-page) main .ds-folder-breadcrumb { margin-bottom: 22px; } html:not(.ds-home-page) main .ds-folder-crumb-back { display: inline-flex; align-items: center; color: #5E7560; font-size: 14px; font-weight: 500; text-decoration: none; padding: 4px 0; margin-bottom: 8px; border-bottom: 1px solid transparent; transition: border-color 140ms ease; } html:not(.ds-home-page) main .ds-folder-crumb-back:hover { border-bottom-color: #5E7560; color: #5E7560; } html:not(.ds-home-page) main .ds-folder-crumb-current { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; background: linear-gradient(135deg, rgba(212, 160, 23, 0.10), rgba(232, 182, 159, 0.12)); border: 1px solid rgba(212, 160, 23, 0.28); border-radius: 12px; } html:not(.ds-home-page) main .ds-folder-crumb-current > span[aria-hidden] { font-size: 22px; line-height: 1; } html:not(.ds-home-page) main .ds-folder-crumb-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 24px; font-weight: 600; color: #2A2520; margin: 0; flex: 1; min-width: 0; } html:not(.ds-home-page) main .ds-folder-crumb-actions { display: flex; gap: 6px; } html:not(.ds-home-page) main .ds-folder-crumb-action { background: transparent; color: #4A4239; border: 1px solid rgba(122, 111, 98, 0.30); padding: 5px 12px; border-radius: 100px; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; transition: all 140ms ease; } html:not(.ds-home-page) main .ds-folder-crumb-action:hover { background: #2A2520; color: #FBF6EE; border-color: #2A2520; } html:not(.ds-home-page) main .ds-folder-crumb-action-danger { color: #B43C32; border-color: rgba(180, 60, 50, 0.35); } html:not(.ds-home-page) main .ds-folder-crumb-action-danger:hover { background: #B43C32; color: #FBF6EE; border-color: #B43C32; } /* Native