/* * Tribun Editorial AI — Surfaces * Developer: Abdullah * License: Proprietary — PT Tribun Digital Online * * The platform's material layer, linked last on every page. Two materials, * lit by one light from the top-left: * * Glass — what frames or floats: the top bar, the sidebar, side panels, * menus, dropdowns, popovers, modals, the drawer, toasts. * Translucent white over a softly lit canvas with a bright rim; * the layers that open over content also blur what is behind them. * Relief — what you press (neumorphism). Every button, tab, switch and * field is shaped by the same light: raised means "press me", * pressed-in means "selected" or "held", and fields are sunk into * the surface. Primary actions are the brand gradient cut like a * gem, with a glassy sheen. * * Cards sit between the two: frosted like glass, lit like relief, but never * blurred — a dashboard holds dozens of them and backdrop blur is not free. * * Only paint lives here — backgrounds, border colours, shadows — never sizes * or positions, so every page keeps its layout. Rules match the specificity * of the ones they restyle and win by coming last; the two blocks of page * styles that sit inside (the user drawer, My Articles' confirm modal) * are matched with a `body` prefix. * * The Monitor and Insights headers are a dark brand band with their own dark * glass controls; the light families below skip the band's title row * (:where keeps that exclusion from adding specificity), and the band gets its * own section at the end. */ :root { /* The light: a white highlight up-left, a cool indigo shade down-right. */ --sf-hi: rgba(255, 255, 255, .95); --sf-shade: rgba(84, 94, 150, .22); --sf-shade-deep: rgba(84, 94, 150, .34); /* Relief */ --sf-face: linear-gradient(180deg, #ffffff 0%, #f1f3fa 100%); --sf-face-hover: linear-gradient(180deg, #ffffff 0%, #f7f8fd 100%); --sf-well: linear-gradient(180deg, #eaedf7 0%, #f3f5fb 100%); --sf-edge: rgba(206, 211, 234, .9); --sf-raised: -3px -3px 7px var(--sf-hi), 3px 4px 10px -2px var(--sf-shade), inset 0 1px 0 #fff; --sf-raised-hover: -4px -4px 9px var(--sf-hi), 4px 6px 14px -3px var(--sf-shade-deep), inset 0 1px 0 #fff; --sf-pressed: inset 2px 2px 5px rgba(84, 94, 150, .22), inset -2px -2px 5px rgba(255, 255, 255, .9); --sf-sunken: inset 2px 2px 5px rgba(84, 94, 150, .13), inset -2px -2px 4px rgba(255, 255, 255, .85); /* The selected thumb of a sunken track: tight, so it never spills out. */ --sf-thumb: 0 1px 2px rgba(84, 94, 150, .20), 0 3px 8px -3px rgba(84, 94, 150, .40), inset 0 1px 0 #fff; /* Selected by pressing in, tinted with the brand. */ --sf-chosen: linear-gradient(180deg, #e1e5ff 0%, #edf0ff 100%); --sf-chosen-shadow: inset 2px 2px 5px rgba(58, 47, 208, .16), inset -2px -2px 5px rgba(255, 255, 255, .8); --sf-ring: 0 0 0 3px rgba(67, 56, 232, .16); /* Gems: a gradient under a soft sheen. */ --sf-sheen: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 62%); --sf-sheen-hover: linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .04) 70%); --sf-gem-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 4px rgba(20, 12, 110, .22), 0 8px 18px -8px rgba(58, 47, 208, .62), 0 2px 4px -1px rgba(58, 47, 208, .22); --sf-gem-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -2px 4px rgba(20, 12, 110, .22), 0 12px 24px -10px rgba(58, 47, 208, .72), 0 3px 6px -2px rgba(58, 47, 208, .28); --sf-gem-pressed: inset 0 2px 6px rgba(20, 12, 110, .45), inset 0 -1px 0 rgba(255, 255, 255, .16); --sf-danger-grad: linear-gradient(160deg, #d9503f 0%, #b4291d 100%); /* The page you are on, in either navigation bar: a pane of brand-blue glass. The deep end of the brand only, #3a2fd0 to #2f55e0, because the brand gradient's light end (#2196ff) holds white text at 3.1:1 and the label is 11.5px; across this range white stays above 6:1, still above 5:1 once the pane lets 8% of a white bar through. */ --sf-nav-on: linear-gradient(160deg, rgba(58, 47, 208, .92) 0%, rgba(47, 85, 224, .92) 100%); --sf-nav-on-sheen: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%); --sf-nav-on-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), inset 0 0 0 1px rgba(255, 255, 255, .10), inset 0 -2px 4px rgba(20, 12, 110, .22), 0 6px 16px -6px rgba(58, 47, 208, .55), 0 1px 3px rgba(58, 47, 208, .22); --sf-success-grad: linear-gradient(135deg, #1a8a55 0%, #25c278 100%); /* Glass */ --sf-glass: rgba(255, 255, 255, .80); --sf-glass-bright: rgba(255, 255, 255, .93); /* over a dimmed backdrop */ --sf-glass-rim: rgba(255, 255, 255, .80); --sf-blur: blur(20px) saturate(170%); --sf-float: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(84, 94, 150, .10), 0 20px 48px -14px rgba(28, 32, 88, .30), 0 4px 12px -4px rgba(28, 32, 88, .10); --sf-dark-glass: rgba(18, 20, 44, .86); --sf-dark-float: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px rgba(255, 255, 255, .06), 0 12px 30px -10px rgba(8, 10, 30, .55); /* Cards */ --sf-card: linear-gradient(160deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .84) 100%); --sf-card-shadow: -6px -6px 16px rgba(255, 255, 255, .75), 8px 10px 26px -12px rgba(70, 80, 140, .22), inset 0 1px 0 #fff, 0 0 0 1px rgba(206, 211, 234, .45); --sf-chip-shadow: -2px -2px 5px var(--sf-hi), 2px 3px 7px -2px var(--sf-shade), inset 0 1px 0 #fff, 0 0 0 1px rgba(206, 211, 234, .5); /* The page: the old flat --bg, lit by three faint brand glows so the glass has something to be glass over. */ --sf-canvas: radial-gradient(1100px 560px at -5% -10%, rgba(91, 141, 255, .13), transparent 62%), radial-gradient(900px 540px at 105% -5%, rgba(110, 87, 255, .10), transparent 60%), radial-gradient(1000px 620px at 50% 115%, rgba(33, 150, 255, .07), transparent 62%), var(--bg); } /* Hover effects are wrapped in @media (hover: hover): a phone treats a tap as a hover and keeps it until the next tap, which would leave a just-tapped button lifted, or a just-cleared bar raised, after the finger is gone. */ /* ── Canvas ──────────────────────────────────────────────────────────────── */ body, .editor-root { background: var(--sf-canvas); } /* ── Glass bars and panels ───────────────────────────────────────────────── */ /* Nothing scrolls under the top bar or the desktop sidebar, so they are glass by translucency and rim alone — and, having no backdrop-filter, they leave the menus that drop out of them free to blur the page. */ .topbar { background: linear-gradient(180deg, rgba(255, 255, 255, .88) 0%, rgba(255, 255, 255, .66) 100%); border-bottom-color: rgba(255, 255, 255, .85); box-shadow: inset 0 -1px 0 rgba(206, 211, 234, .7), 0 14px 30px -26px rgba(42, 30, 168, .45); } .sa-sidebar { background: linear-gradient(180deg, rgba(255, 255, 255, .74) 0%, rgba(255, 255, 255, .52) 100%); border-right-color: rgba(255, 255, 255, .85); box-shadow: inset -1px 0 0 rgba(206, 211, 234, .6); } @media (max-width: 768px) { /* Here the sidebar slides over the page: real glass. */ .sa-sidebar { background: rgba(248, 249, 255, .80); -webkit-backdrop-filter: var(--sf-blur); backdrop-filter: var(--sf-blur); box-shadow: 14px 0 40px -14px rgba(28, 32, 88, .40), inset -1px 0 0 rgba(255, 255, 255, .9); } } .right-section, .sa-detail, .users-detail, .left-panel { background: linear-gradient(180deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .66) 100%); } .right-section { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .9); } .left-panel { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .9); } .mobile-panel-tabs { background: rgba(255, 255, 255, .78); } .panel-divider { background: linear-gradient(90deg, rgba(206, 211, 234, .45), rgba(255, 255, 255, .7)); } /* The filter chip strip is sticky: the dashboard scrolls under it. */ .pm-chips:not(:empty) { background: rgba(238, 240, 255, .70); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); } /* Dimmed, frosted backdrops behind modals and the mobile sidebar. */ .sa-overlay, .modal-backdrop, .cr-backdrop, .sa-sidebar-backdrop, body .hist-overlay { background: rgba(14, 18, 48, .28); -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); } /* ── Navigation ──────────────────────────────────────────────────────────── */ /* Top bar: a pill per destination; the page you are on is a pane of brand-blue glass with a white icon and label. It used to be a raised white pill on the white bar, which all but disappeared. */ .topbar-nav-item .pm-ico { flex-shrink: 0; color: var(--muted-2); transition: color .12s; } @media (hover: hover) { .topbar-nav-item:hover .pm-ico { color: var(--ink-2); } .topbar-nav-item:hover { background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 2px 6px -4px rgba(84, 94, 150, .35); } } .topbar-nav-item.active, .topbar-nav-item.active:hover { color: #fff; background: var(--sf-nav-on-sheen), var(--sf-nav-on); box-shadow: var(--sf-nav-on-shadow); } .topbar-nav-item.active .pm-ico, .topbar-nav-item.active:hover .pm-ico { color: #fff; } /* Bottom bar (phones and tablets): no edge of its own — frosted glass that the page scrolls beneath and shows through, lifted only by a soft shadow; the page you are on is the same pane of brand-blue glass as in the top bar, white icon over white label. */ .bottom-nav { background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: 0 14px 34px -16px rgba(28, 32, 88, .32); } .bottom-nav-item .pm-ico { color: var(--muted-2); transition: color .12s; } @media (hover: hover) { .bottom-nav-item:hover { color: var(--ink); } .bottom-nav-item:hover .pm-ico { color: var(--ink-2); } } .bottom-nav-item.active, .bottom-nav-item.active:hover { color: #fff; background: var(--sf-nav-on-sheen), var(--sf-nav-on); box-shadow: var(--sf-nav-on-shadow); } .bottom-nav-item.active .pm-ico, .bottom-nav-item.active:hover .pm-ico { color: #fff; } .bottom-nav-item:not(.active):active { background: rgba(255, 255, 255, .45); } /* Admin sidebar */ @media (hover: hover) { .sa-nav-item:hover { background: rgba(255, 255, 255, .6); box-shadow: 0 0 0 1px rgba(255, 255, 255, .9), 0 2px 6px -4px rgba(84, 94, 150, .35); } } .sa-nav-item.active { background: var(--sf-face); box-shadow: -2px -2px 6px var(--sf-hi), 3px 4px 10px -3px var(--sf-shade-deep), inset 0 1px 0 #fff, 0 0 0 1px rgba(206, 211, 234, .5); } /* The avatar: a raised disc, pressed in while its menu is open. */ .topbar .avatar { background: linear-gradient(145deg, #ffffff 0%, #e8ebfa 100%); box-shadow: -3px -3px 7px var(--sf-hi), 3px 4px 9px -2px var(--sf-shade-deep), inset 0 1px 0 #fff, 0 0 0 1px rgba(206, 211, 234, .6); transition: box-shadow .15s, background .15s; } @media (hover: hover) { .topbar .avatar:hover { box-shadow: -4px -4px 9px var(--sf-hi), 4px 6px 13px -3px var(--sf-shade-deep), inset 0 1px 0 #fff, 0 0 0 1px rgba(206, 211, 234, .6); } } .topbar .avatar:has(> .avatar-menu.open) { background: var(--sf-well); box-shadow: var(--sf-pressed); } .avatar-menu-item { transition: background .12s, box-shadow .12s, color .12s; } @media (hover: hover) { .avatar-menu-item:hover { background: rgba(255, 255, 255, .92); box-shadow: 0 0 0 1px rgba(255, 255, 255, .95), 0 3px 8px -4px rgba(84, 94, 150, .45); } .avatar-menu-item.danger:hover { background: rgba(251, 229, 225, .85); } } .avatar-menu-item.active { background: rgba(67, 56, 232, .07); box-shadow: inset 1px 1px 3px rgba(58, 47, 208, .14), inset -1px -1px 2px rgba(255, 255, 255, .8); } .avatar-menu-divider { background: linear-gradient(90deg, transparent, var(--rule-2) 20%, var(--rule-2) 80%, transparent); } /* ── Buttons: primary gems ───────────────────────────────────────────────── */ :is(.btn-primary, .btn-signin, .btn-submit, .btn-act-analyze, .btn-save-profile, .btn-edit-profile, .btn-set-pw, .btn-approve, .btn-approve-lg, .btn-home, .btn-issue, .btn-copy-pw, .sa-modal-ok.primary), .pm-filterbar .pm-filter-actions [data-act="close"] { background: var(--sf-sheen), var(--brand-grad); box-shadow: var(--sf-gem-shadow); transition: box-shadow .18s, background .18s, opacity .15s, transform .15s; } @media (hover: hover) { :is(.btn-primary, .btn-signin, .btn-submit, .btn-act-analyze, .btn-save-profile, .btn-edit-profile, .btn-set-pw, .btn-approve, .btn-approve-lg, .btn-home, .btn-issue, .btn-copy-pw, .sa-modal-ok.primary):not(:disabled):hover, .pm-filterbar .pm-filter-actions [data-act="close"]:hover { background: var(--sf-sheen-hover), var(--brand-grad); box-shadow: var(--sf-gem-shadow-hover); opacity: 1; } } :is(.btn-primary, .btn-signin, .btn-submit, .btn-act-analyze, .btn-save-profile, .btn-edit-profile, .btn-set-pw, .btn-approve, .btn-approve-lg, .btn-home, .btn-issue, .btn-copy-pw, .sa-modal-ok.primary):not(:disabled):active, .pm-filterbar .pm-filter-actions [data-act="close"]:active { background: var(--brand-grad); box-shadow: var(--sf-gem-pressed); } /* Success gems: apply the AI's fixes. */ :is(.btn-act-fixall, .btn-corr-fix) { background: var(--sf-sheen), var(--sf-success-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 4px rgba(6, 70, 38, .22), 0 8px 18px -8px rgba(26, 138, 85, .6); transition: box-shadow .18s, background .18s, opacity .15s, transform .15s; } @media (hover: hover) { :is(.btn-act-fixall, .btn-corr-fix):hover { background: var(--sf-sheen-hover), var(--sf-success-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 -2px 4px rgba(6, 70, 38, .22), 0 12px 24px -10px rgba(26, 138, 85, .7); opacity: 1; } } :is(.btn-act-fixall, .btn-corr-fix):active { background: var(--sf-success-grad); box-shadow: inset 0 2px 6px rgba(6, 60, 32, .45); } /* Danger gems: the confirmations that delete or reject. */ :is(.btn-danger, .btn-reject-confirm, .sa-modal-ok.danger), body .hist-modal-ok { background: var(--sf-sheen), var(--sf-danger-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 -2px 4px rgba(90, 10, 4, .22), 0 8px 18px -8px rgba(192, 57, 43, .6); transition: box-shadow .18s, background .18s, opacity .15s; } @media (hover: hover) { :is(.btn-danger, .btn-reject-confirm, .sa-modal-ok.danger):not(:disabled):hover, body .hist-modal-ok:hover { background: var(--sf-sheen-hover), var(--sf-danger-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 4px rgba(90, 10, 4, .22), 0 12px 24px -10px rgba(192, 57, 43, .7); opacity: 1; } } :is(.btn-danger, .btn-reject-confirm, .sa-modal-ok.danger):not(:disabled):active, body .hist-modal-ok:active { background: var(--sf-danger-grad); box-shadow: inset 0 2px 6px rgba(90, 10, 4, .45); } /* A disabled gem goes flat: nothing to press. */ :is(.btn-primary, .btn-signin, .btn-submit, .btn-act-analyze, .btn-save-profile, .btn-edit-profile, .btn-set-pw, .btn-approve, .btn-approve-lg, .btn-issue, .btn-copy-pw, .btn-danger, .btn-reject-confirm):disabled { box-shadow: none; } /* ── Buttons: raised ─────────────────────────────────────────────────────── */ /* Secondary actions, icon buttons, pagers and the field-like dropdown triggers: all the same raised face. Hover lifts, press sinks. States that mean "chosen" (.active, .has-value, .copied) keep their own face. */ :is(.btn-outline, .btn-bell, .btn-export, .btn-request, .btn-cancel, .btn-cancel-edit, .btn-change-pw, .btn-sec-action, .btn-act-clear, .btn-act-dismissall, .btn-copy-article, .btn-copy-sm, .btn-copy, .btn-show, .btn-info, .btn-reject-cancel, .btn-reject-sm, .dash-pager-btn, .page-btn, .dash-domain-btn, .sa-modal-cancel, .copy-all-pill, .btn-corr-dismiss, .hamburger, .pm-filter-btn, .dash-preset, .dash-metric, .dash-ai-metric, .btn-add-domain):where(:not(.pm-header .sa-title-row *)), body .hist-modal-cancel { background: var(--sf-face); border-color: var(--sf-edge); box-shadow: var(--sf-raised); transition: box-shadow .16s, background .16s, color .12s, border-color .12s; } @media (hover: hover) { :is(.btn-outline, .btn-bell, .btn-export, .btn-request, .btn-cancel, .btn-cancel-edit, .btn-change-pw, .btn-sec-action, .btn-act-clear, .btn-act-dismissall, .btn-copy-article, .btn-copy-sm, .btn-copy, .btn-show, .btn-info, .btn-reject-cancel, .btn-reject-sm, .dash-pager-btn, .page-btn, .dash-domain-btn, .sa-modal-cancel, .copy-all-pill, .btn-corr-dismiss, .hamburger, .pm-filter-btn, .dash-preset, .dash-metric, .dash-ai-metric, .btn-add-domain):where(:not(.pm-header .sa-title-row *)):not(.active, .has-value, .copied, :disabled):hover, body .hist-modal-cancel:hover { background: var(--sf-face-hover); box-shadow: var(--sf-raised-hover); opacity: 1; } } :is(.btn-outline, .btn-bell, .btn-export, .btn-request, .btn-cancel, .btn-cancel-edit, .btn-change-pw, .btn-sec-action, .btn-act-clear, .btn-act-dismissall, .btn-copy-article, .btn-copy-sm, .btn-copy, .btn-show, .btn-info, .btn-reject-cancel, .btn-reject-sm, .dash-pager-btn, .page-btn, .dash-domain-btn, .sa-modal-cancel, .copy-all-pill, .btn-corr-dismiss, .hamburger, .pm-filter-btn, .dash-preset, .dash-metric, .dash-ai-metric, .btn-add-domain):where(:not(.pm-header .sa-title-row *)):not(:disabled):active, body .hist-modal-cancel:active { background: var(--sf-well); box-shadow: var(--sf-pressed); } :is(.btn-outline, .btn-bell, .btn-export, .btn-request, .btn-cancel, .btn-cancel-edit, .btn-change-pw, .btn-sec-action, .btn-act-clear, .btn-act-dismissall, .btn-copy-article, .btn-copy-sm, .btn-copy, .btn-show, .btn-info, .btn-reject-cancel, .btn-reject-sm, .dash-pager-btn, .page-btn, .dash-domain-btn, .sa-modal-cancel, .copy-all-pill, .btn-corr-dismiss, .hamburger, .dash-preset, .dash-metric, .dash-ai-metric, .btn-add-domain):disabled { box-shadow: none; } /* The filter panel's fields: raised faces too (the band's white panel gives them a flat one of its own). */ .pm-filterbar .pm-filter-btn { background: var(--sf-face); border-color: var(--sf-edge); } .pm-header .pm-filterbar .pm-filter-btn { background: var(--sf-face); } /* Chosen: pressed in, brand-tinted. */ :is(.dash-preset, .dash-metric, .dash-ai-metric, .page-btn).active, .pm-filter-btn.has-value { background: var(--sf-chosen); border-color: rgba(138, 169, 255, .6); box-shadow: var(--sf-chosen-shadow); } .pm-header .pm-filterbar .pm-filter-btn.has-value { background: var(--sf-chosen); } .pm-filterbar .pm-filter.open .pm-filter-btn { box-shadow: var(--sf-pressed), var(--sf-ring); } /* Brand-soft and danger-soft buttons: raised, keeping their tint. */ :is(.btn-act-save, .btn-show-more) { background: linear-gradient(180deg, #f4f5ff 0%, #e4e8ff 100%); box-shadow: -3px -3px 7px var(--sf-hi), 3px 4px 10px -2px rgba(58, 47, 208, .22), inset 0 1px 0 #fff; transition: box-shadow .16s, background .16s; } @media (hover: hover) { :is(.btn-act-save, .btn-show-more):hover { background: linear-gradient(180deg, #f7f8ff 0%, #eaedff 100%); box-shadow: -4px -4px 9px var(--sf-hi), 4px 6px 14px -3px rgba(58, 47, 208, .30), inset 0 1px 0 #fff; } } :is(.btn-act-save, .btn-show-more):active { background: var(--sf-chosen); box-shadow: var(--sf-chosen-shadow); } :is(.btn-reject, .btn-reject-lg, .err-banner button) { background: linear-gradient(180deg, #fff8f7 0%, #fbe5e1 100%); box-shadow: -3px -3px 7px var(--sf-hi), 3px 4px 10px -2px rgba(192, 57, 43, .20), inset 0 1px 0 #fff; transition: box-shadow .16s, background .16s; } @media (hover: hover) { :is(.btn-reject, .btn-reject-lg, .err-banner button):not(:disabled):hover { background: linear-gradient(180deg, #fffafa 0%, #fdebe7 100%); box-shadow: -4px -4px 9px var(--sf-hi), 4px 6px 14px -3px rgba(192, 57, 43, .28), inset 0 1px 0 #fff; opacity: 1; } } :is(.btn-reject, .btn-reject-lg, .err-banner button):not(:disabled):active { background: #f8dcd6; box-shadow: inset 2px 2px 5px rgba(192, 57, 43, .2), inset -2px -2px 5px rgba(255, 255, 255, .7); } :is(.btn-reject, .btn-reject-lg):disabled { box-shadow: none; } /* Dismiss-all turns to danger on hover; keep its warning face, raised. */ @media (hover: hover) { .btn-act-dismissall:not(:disabled):hover { background: linear-gradient(180deg, #fff8f7 0%, #fbe5e1 100%); } } /* Quiet buttons that are only an icon: a small raised well appears on hover. */ @media (hover: hover) { .btn-delete:hover { background: linear-gradient(180deg, #fff8f7 0%, #fbe5e1 100%); box-shadow: -2px -2px 5px var(--sf-hi), 2px 3px 7px -2px rgba(192, 57, 43, .28), inset 0 1px 0 #fff; } } /* One focus ring for every button family. */ :is(.btn-primary, .btn-signin, .btn-submit, .btn-act-analyze, .btn-save-profile, .btn-edit-profile, .btn-set-pw, .btn-approve, .btn-approve-lg, .btn-home, .btn-issue, .btn-copy-pw, .sa-modal-ok, .btn-act-fixall, .btn-corr-fix, .btn-danger, .btn-reject-confirm, .btn-outline, .btn-bell, .btn-export, .btn-request, .btn-cancel, .btn-cancel-edit, .btn-change-pw, .btn-sec-action, .btn-act-clear, .btn-act-dismissall, .btn-copy-article, .btn-copy-sm, .btn-copy, .btn-show, .btn-info, .btn-reject-cancel, .btn-reject-sm, .dash-pager-btn, .page-btn, .dash-domain-btn, .sa-modal-cancel, .copy-all-pill, .btn-corr-dismiss, .hamburger, .dash-preset, .dash-metric, .dash-ai-metric, .btn-add-domain, .btn-act-save, .btn-show-more, .btn-reject, .btn-reject-lg, .btn-delete, .topbar-nav-item, .bottom-nav-item, .sa-nav-item, .avatar-menu-item):focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; } /* ── Tracks and toggles ──────────────────────────────────────────────────── */ /* Segmented controls and tab bars: a sunken track, the chosen option raised out of it. */ :is(.pm-seg, .dash-view-toggle, .tab-group, .tab-bar, .filter-tabs, .view-toggle):where(:not(.pm-header .sa-title-row *)) { background: var(--sf-well); border-color: rgba(206, 211, 234, .75); box-shadow: var(--sf-sunken); } :is(.pm-seg button, .dash-view, .tab-btn, .filter-tab, .view-btn) { transition: color .12s, background .15s, box-shadow .15s; } @media (hover: hover) { :is(.pm-seg button, .dash-view, .tab-btn, .filter-tab, .view-btn):where(:not(.pm-header .sa-title-row *)):not(.active):hover { color: var(--ink); background: rgba(255, 255, 255, .55); } } :is(.pm-seg button, .dash-view, .tab-btn, .filter-tab, .view-btn).active { background: var(--sf-face); box-shadow: var(--sf-thumb); } /* Switches: a sunken track when off, a lit gem when on; the knob is raised. */ .toggle-switch { transition: background .2s, box-shadow .2s; } .toggle-switch:not(.off) { background: var(--sf-sheen), var(--brand-grad); box-shadow: inset 0 1px 3px rgba(20, 12, 110, .35), inset 0 -1px 0 rgba(255, 255, 255, .2), 0 3px 8px -3px rgba(58, 47, 208, .55); } .toggle-switch.off { background: var(--sf-well); box-shadow: inset 2px 2px 4px rgba(84, 94, 150, .26), inset -1px -1px 3px rgba(255, 255, 255, .9); } .toggle-knob { background: linear-gradient(180deg, #ffffff 0%, #eef0f8 100%); box-shadow: 0 1px 2px rgba(20, 24, 60, .22), 0 3px 6px -2px rgba(20, 24, 60, .30), inset 0 1px 0 #fff; } /* ── Fields ──────────────────────────────────────────────────────────────── */ /* Sunk into the surface. Only the background colour is set: the dashboard search draws its magnifier as a background image. Search boxes that wrap a bare input are sunk as a whole. */ :is(.dash-date, .dash-search, .title-input, .article-area, .search-box, .sa-search, .pm-panel-search, .detail-role-select, .pp-select, .m-input, .cr-input, .form-input, .int-input, .filter-select, .combo-trigger, .inv-combo-trigger), :is(.field, .edit-field, .pw-field) :is(input:not([type="checkbox"], [type="radio"]), textarea, select), .reject-reason-wrap textarea { background-color: #f3f5fb; border-color: rgba(206, 211, 234, .85); box-shadow: var(--sf-sunken); transition: border-color .15s, box-shadow .15s, background-color .15s; } :is(.dash-date, .dash-search, .title-input, .article-area, .search-box, .sa-search, .pm-panel-search, .detail-role-select, .pp-select, .m-input, .cr-input, .form-input, .int-input, .filter-select, .combo-trigger, .inv-combo-trigger):is(:focus, :focus-within), :is(.field, .edit-field, .pw-field) :is(input:not([type="checkbox"], [type="radio"]), textarea, select):focus { background-color: #f9faff; border-color: var(--brand-400); box-shadow: var(--sf-sunken), var(--sf-ring); } .edit-field input:disabled { background-color: transparent; box-shadow: none; } /* ── Cards ───────────────────────────────────────────────────────────────── */ :is(.content-section, .stat-card, .mini-stat, .pr-card, .role-card, .content-card, .profile-card, .history-card, .card, .sg, .idle-cap, .next-card) { background: var(--sf-card); border-color: rgba(255, 255, 255, .9); box-shadow: var(--sf-card-shadow); } .history-card { transition: box-shadow .18s; } @media (hover: hover) { .history-card:hover { box-shadow: -7px -7px 18px rgba(255, 255, 255, .8), 10px 14px 32px -12px rgba(70, 80, 140, .30), inset 0 1px 0 #fff, 0 0 0 1px rgba(206, 211, 234, .5); } } /* Brand-tinted glass: the highlighted scorecard, the workspace preview. */ :is(.stat-card.accent, .preview-card, .account-card) { background: linear-gradient(160deg, rgba(240, 242, 255, .98) 0%, rgba(224, 230, 255, .82) 100%); border-color: rgba(255, 255, 255, .9); box-shadow: -6px -6px 16px rgba(255, 255, 255, .75), 8px 10px 26px -12px rgba(58, 47, 208, .28), inset 0 1px 0 #fff, 0 0 0 1px rgba(138, 169, 255, .5); } /* Wells: read-only detail sunk into its panel. (Profile has an unboxed .detail-grid of its own; only the request panel's is a well.) */ .sa-detail :is(.detail-grid, .detail-reason), .pw-form-wrap { background: var(--sf-well); border-color: rgba(206, 211, 234, .7); box-shadow: var(--sf-sunken); } /* Icon tiles on dashboards and in the AI Assistant, raised off their card. */ :is(.pm-group-ico, .pm-panel-ico, .group-icon) { box-shadow: -2px -2px 5px var(--sf-hi), 2px 3px 7px -2px var(--sf-shade-deep), inset 0 1px 0 rgba(255, 255, 255, .7); } /* Chips */ .domain-chip { background: var(--sf-face); border-color: rgba(255, 255, 255, .9); box-shadow: var(--sf-chip-shadow); } .role-chip { background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-color: rgba(255, 255, 255, .85); box-shadow: var(--sf-chip-shadow); } .pm-chip { background: rgba(255, 255, 255, .78); border-color: rgba(138, 169, 255, .6); box-shadow: inset 0 1px 0 #fff, 0 3px 8px -3px rgba(67, 56, 232, .35); } /* Selectable option cards (the domain form): raised, pressed in when chosen. */ .opt-card { background: var(--sf-face); border-color: var(--sf-edge); box-shadow: var(--sf-raised); transition: box-shadow .15s, background .15s, border-color .12s; } .opt-card:has(input:checked) { background: var(--sf-chosen); border-color: rgba(99, 102, 241, .55); box-shadow: var(--sf-chosen-shadow); } /* Bar-chart rows are cross-filters: they lift on hover and press in when on. */ .pm-bar-row { transition: box-shadow .15s, background .15s, border-color .12s; } @media (hover: hover) { .pm-bar-row:not(.selected):hover { background: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px rgba(206, 211, 234, .6), 0 4px 10px -5px rgba(84, 94, 150, .45); } } .pm-bar-row.selected { box-shadow: inset 1px 1px 4px rgba(58, 47, 208, .16), inset -1px -1px 3px rgba(255, 255, 255, .8); } .dash-bar-track { box-shadow: var(--sf-sunken); } .dash-bar-fill { background: var(--sf-sheen), var(--brand-grad); } /* ── Floating layers ─────────────────────────────────────────────────────── */ /* Menus, dropdowns, popovers and modals: real glass over whatever they open on. */ :is(.avatar-menu, .alerts-panel, .dash-domain-panel, .pm-filter-panel, .combo-dropdown, .inv-combo-dropdown, .corr-popover, .sa-modal, .modal, .cr-modal), .pm-filterbar .pm-filter-panel, body .hist-modal { background: var(--sf-glass); -webkit-backdrop-filter: var(--sf-blur); backdrop-filter: var(--sf-blur); border-color: var(--sf-glass-rim); box-shadow: var(--sf-float); } :is(.sa-modal, .modal, .cr-modal), body .hist-modal { background: var(--sf-glass-bright); } body .ud-overlay { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: var(--sf-blur); backdrop-filter: var(--sf-blur); border-left-color: var(--sf-glass-rim); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .9), -18px 0 44px -16px rgba(28, 32, 88, .34); } .dash-domain-search, .combo-search, .inv-combo-search { background: transparent; } @media (hover: hover) { :is(.pm-opt, .dash-domain-opt, .combo-opt, .inv-combo-opt, .alerts-item):hover, .pm-filterbar .pm-opt:hover { background: rgba(67, 56, 232, .06); } } /* Toasts: tinted glass. */ .sa-toast { -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: var(--sf-float); } .sa-toast.t-error { background: rgba(251, 229, 225, .86); border-color: rgba(192, 57, 43, .35); } .sa-toast.t-success { background: rgba(225, 243, 232, .86); border-color: rgba(31, 138, 79, .35); } .sa-toast.t-info { background: rgba(238, 240, 255, .86); border-color: rgba(138, 169, 255, .6); } /* Dark glass: tooltips, hints and the AI Assistant's toast. */ :is(.pm-tooltip, .dash-tooltip, .pm-badge-pop, .pm-hint-pop, .info-tip-pop, .toast) { background: var(--sf-dark-glass); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: var(--sf-dark-float); } /* ── The band (Monitor and Insights headers) ─────────────────────────────── */ /* Its controls are dark glass already; they get the same light as the rest — a sheen and a bright rim on top — and press in when held or open. */ .pm-header :is(.pm-refresh-btn, .pm-filters-toggle:not(.has-value)) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .02) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 18px -10px rgba(8, 6, 48, .7); transition: background-color .15s, border-color .15s, box-shadow .15s; } @media (hover: hover) { .pm-header :is(.pm-refresh-btn, .pm-filters-toggle:not(.has-value)):hover { background-image: linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .04) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -10px rgba(8, 6, 48, .8); } } .pm-header :is(.pm-refresh-btn, .pm-filters-toggle:not(.has-value)):active, .pm-header .pm-filters-toggle[aria-expanded="true"]:not(.has-value) { background-image: none; box-shadow: inset 0 2px 6px rgba(8, 6, 48, .5), inset 0 -1px 0 rgba(255, 255, 255, .10); } .pm-header .pm-filters-toggle.has-value { background-image: linear-gradient(180deg, #ffffff 0%, #eef0ff 100%); } /* The window/range switch: a dark sunken track, the chosen option a lit key. */ .pm-header .pm-seg { box-shadow: inset 0 2px 5px rgba(8, 6, 48, .40), inset 0 -1px 0 rgba(255, 255, 255, .08); } .pm-header .pm-seg button.active { background: linear-gradient(180deg, #ffffff 0%, #eef0ff 100%); box-shadow: 0 3px 10px -2px rgba(8, 6, 48, .55), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(42, 30, 168, .14); } .pm-header .pm-filterbar .pm-filterbar-inner { background: linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(240, 243, 255, .90) 100%); border-color: rgba(255, 255, 255, .7); } /* The hide arrow: a raised key on the panel's edge. */ .pm-filterbar-hide { background: var(--sf-face); box-shadow: var(--sf-raised), 0 6px 16px -6px rgba(8, 6, 48, .45); } @media (hover: hover) { .pm-filterbar-hide:hover { background: var(--sf-face-hover); box-shadow: var(--sf-raised-hover), 0 8px 18px -6px rgba(8, 6, 48, .5); } } .pm-filterbar-hide:active { background: var(--sf-well); box-shadow: var(--sf-pressed); } /* Dates are fields: sunk into the band. */ .pm-header .in-date { box-shadow: inset 0 2px 4px rgba(8, 6, 48, .35), inset 0 -1px 0 rgba(255, 255, 255, .10); } /* ── Fallbacks ───────────────────────────────────────────────────────────── */ /* Without backdrop blur, glass that floats over content would let it show through: make it near-opaque instead. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :is(.avatar-menu, .alerts-panel, .dash-domain-panel, .pm-filter-panel, .combo-dropdown, .inv-combo-dropdown, .corr-popover, .sa-modal, .modal, .cr-modal), .pm-filterbar .pm-filter-panel, body :is(.hist-modal, .ud-overlay) { background: rgba(255, 255, 255, .97); } .pm-chips:not(:empty) { background: rgba(238, 240, 255, .96); } .bottom-nav { background: rgba(255, 255, 255, .97); } } @media (max-width: 768px) { @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .sa-sidebar { background: rgba(250, 251, 255, .98); } } } /* ── Motion is unconditional ────────────────────────────────────────────── No stylesheet or script here reads prefers-reduced-motion, on purpose. It used to turn every transition and animation off, and iPhones with Settings > Accessibility > Motion > Reduce Motion switched on (plenty of people leave it on) got a platform where nothing folded, shrank, pulsed or faded — every state change a hard cut. The RIAS platform met the same report from a real iPhone and settled it the same way (its tokens.css): no preference path at all, with the restraint built into the motion itself. Here that means short interaction timings (0.12-0.35s), a soft 0.4s ease for the bottom bar that changes size while you read, and quiet, low-contrast loading loops. If a specific effect ever needs stopping for people with vestibular sensitivity, name that effect and stop it alone, and confirm it on a device — never a blanket switch. */