/* ========================================================================== Draisap — WBAMS client-area & storefront theme The same design language as the WBAMS admin: Manrope, soft canvas, rounded cards, pill controls, 44×24 switches, hero page headers, light + dark. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { --dr-font: "Manrope", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --dr-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --dr-canvas: #f7f5f0; --dr-panel: #fdfcfa; --dr-surface: #ffffff; --dr-surface-2: #f7f5f0; --dr-soft: #f4f2ec; --dr-line: #e6e3dc; --dr-line-soft: #f0eee9; --dr-line-card: #ebe8e1; --dr-ink: #2b2a33; --dr-ink-2: #6b6a75; --dr-ink-3: #9a99a3; --dr-control-line: #dad8d1; --dr-accent: #4f56d9; --dr-accent-rgb: 79, 86, 217; --dr-accent-hover: #3a40b3; --dr-accent-tint: #ecebff; --dr-on-accent: #ffffff; --dr-ok: #1f7a4f; --dr-ok-tint: #dff5e8; --dr-warn: #9a5a12; --dr-warn-tint: #ffefd6; --dr-bad: #b3323a; --dr-bad-tint: #ffe3e3; --dr-info: #4f56d9; --dr-info-tint: #ecebff; --dr-teal: #0f766e; --dr-teal-tint: #d9f4f0; --dr-violet: #6d28d9; --dr-violet-tint: #ede9fe; --dr-amber: #b45309; --dr-amber-tint: #fff1d6; --dr-shadow-card: 0 1px 2px rgba(43, 42, 51, .03), 0 8px 24px rgba(43, 42, 51, .04); --dr-shadow-pop: 0 12px 32px rgba(43, 42, 51, .14); --dr-shadow-knob: 0 1px 3px rgba(43, 42, 51, .25); --dr-radius-card: 16px; --dr-radius-control: 12px; --dr-radius-pill: 999px; --dr-header-h: 72px; --dr-container: 1440px; color-scheme: light; } html[data-theme="dark"] { --dr-canvas: #1c1b22; --dr-panel: #22212a; --dr-surface: #26252e; --dr-surface-2: #2e2d38; --dr-soft: #2a2933; --dr-line: #3a3944; --dr-line-soft: #34333d; --dr-line-card: #34333d; --dr-ink: #f0eef8; --dr-ink-2: #a09fac; --dr-ink-3: #8a8996; --dr-control-line: #4a4955; --dr-accent: #8b91ff; --dr-accent-rgb: 139, 145, 255; --dr-accent-hover: #b0b4ff; --dr-accent-tint: #33346a; --dr-on-accent: #1c1b22; --dr-ok: #7fe0ac; --dr-ok-tint: #1f3d2e; --dr-warn: #ffc27a; --dr-warn-tint: #3f2f17; --dr-bad: #ff9a9f; --dr-bad-tint: #3f2226; --dr-info: #8b91ff; --dr-info-tint: #33346a; --dr-teal: #6fd6c8; --dr-teal-tint: #173b37; --dr-violet: #c4b5fd; --dr-violet-tint: #2e2450; --dr-amber: #fbbf77; --dr-amber-tint: #3f2f17; --dr-shadow-card: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px rgba(0, 0, 0, .28); --dr-shadow-pop: 0 16px 40px rgba(0, 0, 0, .45); color-scheme: dark; } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--dr-font); font-size: 14px; line-height: 1.55; color: var(--dr-ink); background: var(--dr-canvas); -webkit-font-smoothing: antialiased; } body.dr-menu-open { overflow: hidden; } img, svg, video { max-width: 100%; height: auto; } a { color: var(--dr-accent); text-decoration: none; } a:hover { color: var(--dr-accent-hover); text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; font-weight: 800; line-height: 1.25; color: var(--dr-ink); letter-spacing: -.01em; } h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; } h4 { font-size: 16px; } h5 { font-size: 14px; } h6 { font-size: 13px; } p { margin: 0 0 1em; } hr { border: 0; border-top: 1px solid var(--dr-line); margin: 20px 0; } small, .small { font-size: 12.5px; } strong, b { font-weight: 800; } code, pre, kbd { font-family: var(--dr-mono); font-size: 12.5px; } pre { padding: 14px 16px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-control); background: var(--dr-soft); overflow: auto; } code { padding: 2px 6px; border-radius: 6px; background: var(--dr-soft); } pre code { padding: 0; background: transparent; } label { display: inline-block; margin-bottom: 6px; font-weight: 700; font-size: 13px; color: var(--dr-ink); } table { border-collapse: collapse; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 3px solid rgba(var(--dr-accent-rgb), .35); outline-offset: 2px; } ::selection { background: rgba(var(--dr-accent-rgb), .22); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hidden, [hidden] { display: none !important; } /* w-hidden must stay overridable by jQuery show()/slideDown() (inline style), so no !important; the tripled class keeps it above component rules */ .w-hidden.w-hidden.w-hidden { display: none; } .d-none { display: none !important; } .d-block { display: block !important; } .d-inline-block { display: inline-block !important; } .d-flex { display: flex !important; } .d-inline-flex { display: inline-flex !important; } .d-grid { display: grid !important; } @media print { .d-print-none { display: none !important; } } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--dr-container); margin: 0 auto; padding: 0 24px; } .container-fluid { width: 100%; padding: 0 24px; } .row { display: flex; flex-wrap: wrap; margin: 0 -10px; } .row > [class*="col"] { padding: 0 10px; min-width: 0; } .col, [class^="col-"], [class*=" col-"] { position: relative; width: 100%; flex: 0 0 100%; max-width: 100%; } .col { flex: 1 1 0; max-width: 100%; } .col-auto { flex: 0 0 auto; width: auto; max-width: none; } .col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-3 { flex: 0 0 25%; max-width: 25%; } .col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-6 { flex: 0 0 50%; max-width: 50%; } .col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-9 { flex: 0 0 75%; max-width: 75%; } .col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; } .col-12 { flex: 0 0 100%; max-width: 100%; } @media (min-width: 576px) { .col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-sm-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-sm-3 { flex: 0 0 25%; max-width: 25%; } .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-sm-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-sm-6 { flex: 0 0 50%; max-width: 50%; } .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-sm-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-sm-9 { flex: 0 0 75%; max-width: 75%; } .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-sm-12 { flex: 0 0 100%; max-width: 100%; } .d-sm-block { display: block !important; } .d-sm-none { display: none !important; } .d-sm-flex { display: flex !important; } .d-sm-inline { display: inline !important; } .d-sm-inline-block { display: inline-block !important; } .d-sm-inline-flex { display: inline-flex !important; } } @media (min-width: 768px) { .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-md-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-md-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-md-12 { flex: 0 0 100%; max-width: 100%; } .d-md-block { display: block !important; } .d-md-none { display: none !important; } .d-md-flex { display: flex !important; } .d-md-inline-block { display: inline-block !important; } .d-md-inline { display: inline !important; } .d-md-inline-flex { display: inline-flex !important; } } @media (min-width: 992px) { .col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; } .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; } .col-lg-3 { flex: 0 0 25%; max-width: 25%; } .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } .col-lg-6 { flex: 0 0 50%; max-width: 50%; } .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; } .col-lg-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-lg-9 { flex: 0 0 75%; max-width: 75%; } .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; } .col-lg-12 { flex: 0 0 100%; max-width: 100%; } .d-lg-block { display: block !important; } .d-lg-none { display: none !important; } .d-lg-flex { display: flex !important; } .d-lg-inline { display: inline !important; } .d-lg-inline-block { display: inline-block !important; } .d-lg-inline-flex { display: inline-flex !important; } } @media (min-width: 1200px) { .col-xl-3 { flex: 0 0 25%; max-width: 25%; } .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; } .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; } .d-xl-block { display: block !important; } .d-xl-none { display: none !important; } .d-xl-flex { display: flex !important; } .d-xl-inline { display: inline !important; } .d-xl-inline-block { display: inline-block !important; } .d-xl-inline-flex { display: inline-flex !important; } } .offset-md-3 { margin-left: 25%; } .offset-md-2 { margin-left: 16.6667%; } .offset-lg-3 { margin-left: 25%; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .ml-auto { margin-left: auto !important; } .mr-auto { margin-right: auto !important; } .m-0 { margin: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .mt-0 { margin-top: 0 !important; } .mb-1 { margin-bottom: 4px !important; } .mb-2 { margin-bottom: 8px !important; } .mb-3 { margin-bottom: 16px !important; } .mb-4 { margin-bottom: 24px !important; } .mb-5 { margin-bottom: 40px !important; } .mt-1 { margin-top: 4px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 16px !important; } .mt-4 { margin-top: 24px !important; } .mt-5 { margin-top: 40px !important; } .my-3 { margin-top: 16px !important; margin-bottom: 16px !important; } .my-4 { margin-top: 24px !important; margin-bottom: 24px !important; } .ml-1 { margin-left: 4px !important; } .ml-2 { margin-left: 8px !important; } .ml-3 { margin-left: 16px !important; } .mr-1 { margin-right: 4px !important; } .mr-2 { margin-right: 8px !important; } .mr-3 { margin-right: 16px !important; } .p-0 { padding: 0 !important; } .p-2 { padding: 8px !important; } .p-3 { padding: 16px !important; } .p-4 { padding: 24px !important; } .px-2 { padding-left: 8px !important; padding-right: 8px !important; } .px-3 { padding-left: 16px !important; padding-right: 16px !important; } .py-2 { padding-top: 8px !important; padding-bottom: 8px !important; } .py-3 { padding-top: 16px !important; padding-bottom: 16px !important; } .pt-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-left { text-align: left !important; } .text-muted { color: var(--dr-ink-2) !important; } .text-danger { color: var(--dr-bad) !important; } .text-success { color: var(--dr-ok) !important; } .text-warning { color: var(--dr-warn) !important; } .text-info, .text-primary { color: var(--dr-accent) !important; } .font-weight-bold, .fw-700, .fw-800 { font-weight: 800 !important; } .font-weight-normal { font-weight: 500 !important; } .align-items-center { align-items: center !important; } .justify-content-between { justify-content: space-between !important; } .justify-content-center { justify-content: center !important; } .justify-content-end { justify-content: flex-end !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-column { flex-direction: column !important; } .flex-grow-1 { flex-grow: 1 !important; } .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } .pull-left, .float-left { float: left !important; } .pull-right, .float-right { float: right !important; } .clearfix::after { content: ""; display: table; clear: both; } .position-relative { position: relative !important; } .list-unstyled { list-style: none; margin: 0; padding: 0; } .img-fluid, .img-responsive { max-width: 100%; height: auto; } .text-nowrap { white-space: nowrap !important; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .no-margin { margin: 0 !important; } .top-margin-5 { margin-top: 5px; } .top-margin-10 { margin-top: 10px; } .top-margin-20 { margin-top: 20px; } .bottom-margin-10 { margin-bottom: 10px; } .bottom-margin-20 { margin-bottom: 20px; } .margin-bottom { margin-bottom: 16px; } .collapse:not(.show) { display: none; } .collapsing { height: 0; overflow: hidden; transition: height .25s ease; } .fade { transition: opacity .15s linear; } .fade:not(.show) { opacity: 0; } .embed-responsive { position: relative; display: block; width: 100%; overflow: hidden; } .embed-responsive::before { display: block; content: ""; padding-top: 56.25%; } .embed-responsive iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* -------------------------------------------------------------------------- 4. Page shell -------------------------------------------------------------------------- */ .dr-shell { display: flex; flex-direction: column; min-height: 100vh; } .dr-main { flex: 1; padding: 28px 0 56px; } .dr-main--flush { padding: 0 0 56px; } /* Header */ .dr-header { position: sticky; top: 0; z-index: 900; background: rgba(253, 252, 250, .86); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--dr-line); } html[data-theme="dark"] .dr-header { background: rgba(34, 33, 42, .86); } .dr-header__inner { display: flex; align-items: center; gap: 18px; min-height: var(--dr-header-h); } .dr-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--dr-ink); font-weight: 800; font-size: 18px; letter-spacing: -.01em; } .dr-brand img { display: block; max-height: 40px; width: auto; } .dr-brand img.dr-brand__logo--dark, img.dr-brand__logo--dark { display: none; } html[data-theme="dark"] .dr-brand img.dr-brand__logo--dark, html[data-theme="dark"] img.dr-brand__logo--dark { display: block; } html[data-theme="dark"] .dr-brand img.dr-brand__logo--light, html[data-theme="dark"] img.dr-brand__logo--light { display: none; } .dr-brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--dr-accent); color: var(--dr-on-accent); font-size: 15px; font-weight: 900; } .dr-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; list-style: none; padding: 0; } .dr-nav > li { position: relative; } .dr-nav__link { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; padding: 9px 13px; border-radius: var(--dr-radius-pill); color: var(--dr-ink-2); font-weight: 700; font-size: 13.5px; transition: background .15s ease, color .15s ease; } .dr-nav__link:hover, .dr-nav > li.is-active > .dr-nav__link, .dr-nav > li.show > .dr-nav__link { color: var(--dr-accent); background: var(--dr-accent-tint); } /* Hover and "you are here" must not look the same, or the menu stops telling the visitor anything: the active section keeps a marker under it once the pointer moves away. */ .dr-nav > li.is-active > .dr-nav__link { position: relative; font-weight: 800; } .dr-nav > li.is-active > .dr-nav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--dr-accent); } .dr-header--flat .dr-nav > li.is-active > .dr-nav__link::after { bottom: 2px; } .dr-nav__link .badge { margin-left: 2px; } .dr-nav__caret { font-size: 10px; opacity: .7; } .dr-header__end { display: flex; align-items: center; gap: 8px; margin-left: auto; } .dr-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-pill); background: var(--dr-surface); color: var(--dr-ink-2); font-size: 15px; transition: border-color .15s ease, color .15s ease, background .15s ease; } .dr-iconbtn:hover { color: var(--dr-accent); border-color: rgba(var(--dr-accent-rgb), .45); background: var(--dr-accent-tint); } .dr-iconbtn .fa-sun { display: none; } html[data-theme="dark"] .dr-iconbtn .fa-sun { display: inline; } html[data-theme="dark"] .dr-iconbtn .fa-moon { display: none; } .dr-avatar { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent); font-weight: 800; font-size: 13px; letter-spacing: .02em; } .dr-account-btn { display: inline-flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-pill); background: var(--dr-surface); color: var(--dr-ink); font-weight: 700; } .dr-account-btn:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-ink); } .dr-account-btn__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .dr-menu-toggle { display: none; } @media (max-width: 991px) { .dr-nav, .dr-header__end .dr-account-btn__name, .dr-header__end .dr-lang-btn span { display: none; } .dr-menu-toggle { display: inline-flex; } } /* Dropdown menus (Bootstrap-compatible: .dropdown > .dropdown-menu with .show) */ .dropdown, .dropup, .btn-group { position: relative; } .dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 1000; display: none; min-width: 220px; margin: 0; padding: 8px; list-style: none; border: 1px solid var(--dr-line); border-radius: 14px; background: var(--dr-surface); box-shadow: var(--dr-shadow-pop); } .dropdown-menu.show, .dropdown.show > .dropdown-menu, .btn-group.show > .dropdown-menu, .dropdown.open > .dropdown-menu { display: block; } .dropdown-menu-right { left: auto; right: 0; } .dropdown-menu > li > a, .dropdown-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--dr-ink); font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; } .dropdown-menu > li > a:hover, .dropdown-item:hover, .dropdown-item.active, .dropdown-menu > li.active > a { color: var(--dr-accent); background: var(--dr-accent-tint); } .dropdown-item i, .dropdown-menu > li > a i { width: 16px; text-align: center; color: var(--dr-ink-3); } .dropdown-item:hover i { color: inherit; } .dropdown-divider { height: 1px; margin: 6px 4px; background: var(--dr-line); } .dropdown-header { padding: 8px 12px 4px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .dr-menu-profile { display: flex; align-items: center; gap: 12px; padding: 10px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--dr-line); } .dr-menu-profile strong { display: block; font-size: 13.5px; } .dr-menu-profile small { display: block; color: var(--dr-ink-2); font-size: 12px; } .caret { display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } /* Mobile drawer */ .dr-drawer { position: fixed; inset: 0; z-index: 1200; display: none; } .dr-drawer.is-open { display: block; } .dr-drawer__backdrop { position: absolute; inset: 0; background: rgba(20, 19, 26, .5); } .dr-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 92vw); padding: 18px; overflow: auto; background: var(--dr-surface); box-shadow: var(--dr-shadow-pop); animation: drSlideIn .22s ease; } @keyframes drSlideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } } .dr-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .dr-drawer__nav { list-style: none; margin: 0; padding: 0; } .dr-drawer__nav > li > a, .dr-drawer__nav > li > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--dr-ink); font-weight: 700; text-align: left; } .dr-drawer__nav > li > a:hover, .dr-drawer__nav > li > a.is-current, .dr-drawer__nav > li > button.is-current { background: var(--dr-accent-tint); color: var(--dr-accent); } /* The drawer is the same navigation on a phone, so it says where the visitor is in the same way the header does. */ .dr-drawer__nav > li > a.is-current, .dr-drawer__nav > li > button.is-current { box-shadow: inset 3px 0 0 var(--dr-accent); } .dr-drawer__nav .badge { margin-left: auto; } .dr-drawer__sub { list-style: none; margin: 0 0 6px 20px; padding: 0 0 0 10px; border-left: 2px solid var(--dr-line); } .dr-drawer__sub a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--dr-ink-2); font-weight: 600; font-size: 13px; } .dr-drawer__sub a:hover, .dr-drawer__sub a.is-current { color: var(--dr-accent); background: var(--dr-accent-tint); } .dr-drawer__sub a.is-current { font-weight: 800; } .dr-drawer__section { margin: 14px 0 6px; padding: 0 12px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } /* Banners (email verification / user validation / network notices) */ .dr-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 14px; background: var(--dr-warn-tint); color: var(--dr-warn); margin: 18px 0 0; } .dr-banner i { font-size: 16px; } .dr-banner .text { flex: 1; min-width: 200px; font-weight: 600; } .dr-banner .btn { margin-left: auto; } .dr-banner .close { background: transparent; border: 0; color: inherit; font-size: 20px; line-height: 1; opacity: .6; } /* Hero page header (matches admin .wbams-ui-hero) */ .dr-hero__stat { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--dr-line-card); border-radius: 999px; background: var(--dr-surface); color: var(--dr-ink-2); font-size: 12.5px; font-weight: 700; } .dr-hero__stat i { color: var(--dr-accent); } /* Breadcrumb */ .dr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; color: var(--dr-ink-3); font-size: 12.5px; font-weight: 600; } .dr-crumbs a { color: var(--dr-ink-2); } .dr-crumbs a:hover { color: var(--dr-accent); } .dr-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--dr-line); } .dr-crumbs li.is-current { color: var(--dr-ink); } /* Two-column layout with sidebar */ .dr-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; } .dr-layout--side { grid-template-columns: 280px minmax(0, 1fr); } .dr-layout--side-right { grid-template-columns: minmax(0, 1fr) 320px; } @media (max-width: 1023px) { .dr-layout--side, .dr-layout--side-right { grid-template-columns: minmax(0, 1fr); } } .dr-side { display: grid; gap: 16px; align-content: start; min-width: 0; } .dr-content { min-width: 0; } /* -------------------------------------------------------------------------- 5. Cards, sections, sidebar cards -------------------------------------------------------------------------- */ .card, .panel { position: relative; margin: 0 0 18px; padding: 20px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); } .card-body, .panel-body { padding: 0; } .card-header, .panel-heading { margin: -20px -20px 16px; padding: 14px 20px; border-bottom: 1px solid var(--dr-line); border-radius: var(--dr-radius-card) var(--dr-radius-card) 0 0; background: var(--dr-soft); font-weight: 800; } .card-footer, .panel-footer { margin: 16px -20px -20px; padding: 12px 20px; border-top: 1px solid var(--dr-line); border-radius: 0 0 var(--dr-radius-card) var(--dr-radius-card); background: var(--dr-soft); } .card-title, .panel-title { margin: 0 0 8px; font-size: 15px; font-weight: 800; } .well { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-control); background: var(--dr-soft); } /* Sidebar cards (menu sections) */ .dr-sidecard__link:hover i, .dr-sidecard__link.active i { color: inherit; } .dr-sidecard__link.active { color: var(--dr-accent); background: var(--dr-accent-tint); font-weight: 800; } .dr-sidecard__link.disabled { opacity: .5; pointer-events: none; } .dr-sidecard__body .list-group { margin: 0; } /* Stats row */ .dr-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 20px; } .dr-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); color: inherit; } a.dr-stat:hover { border-color: rgba(var(--dr-accent-rgb), .4); } .dr-stat__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 13px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 16px; } .dr-stat--green .dr-stat__icon { background: var(--dr-ok-tint); color: var(--dr-ok); } .dr-stat--amber .dr-stat__icon { background: var(--dr-amber-tint); color: var(--dr-amber); } .dr-stat--red .dr-stat__icon { background: var(--dr-bad-tint); color: var(--dr-bad); } .dr-stat--teal .dr-stat__icon { background: var(--dr-teal-tint); color: var(--dr-teal); } .dr-stat--violet .dr-stat__icon { background: var(--dr-violet-tint); color: var(--dr-violet); } .dr-stat__copy strong { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; } .dr-stat__copy span { display: block; color: var(--dr-ink-2); font-size: 12.5px; font-weight: 600; } /* Tiles / link grids */ .dr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .dr-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--dr-line-card); border-radius: 14px; background: var(--dr-surface); color: var(--dr-ink); box-shadow: var(--dr-shadow-card); transition: border-color .15s ease, transform .15s ease; } .dr-tile:hover { border-color: rgba(var(--dr-accent-rgb), .45); transform: translateY(-1px); color: var(--dr-ink); } .dr-tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 12px; background: var(--dr-accent-tint); color: var(--dr-accent); } .dr-tile strong { display: block; font-size: 13.5px; } .dr-tile small { display: block; color: var(--dr-ink-2); font-size: 12px; } .dr-tile__arrow { margin-left: auto; color: var(--dr-ink-3); font-size: 12px; } /* Empty state */ /* Definition / summary lists */ /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ .btn, .dr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 18px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-pill); background: var(--dr-surface); color: var(--dr-ink); font-size: 13px; font-weight: 800; line-height: 1.2; text-align: center; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; user-select: none; } .btn:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-accent); background: var(--dr-surface); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn:disabled, .btn.disabled { opacity: .55; pointer-events: none; } .btn-primary, .btn-success.dr-primary, .dr-btn--primary { border-color: var(--dr-accent); background: var(--dr-accent); color: var(--dr-on-accent); box-shadow: 0 6px 16px rgba(var(--dr-accent-rgb), .25); } .btn-primary:hover, .dr-btn--primary:hover { border-color: var(--dr-accent-hover); background: var(--dr-accent-hover); color: var(--dr-on-accent); } .btn-success { border-color: var(--dr-ok); background: var(--dr-ok); color: #fff; } .btn-success:hover { color: #fff; filter: brightness(1.08); background: var(--dr-ok); border-color: var(--dr-ok); } .btn-danger { border-color: rgba(179, 50, 58, .3); background: var(--dr-bad-tint); color: var(--dr-bad); } .btn-danger:hover { border-color: var(--dr-bad); background: var(--dr-bad); color: #fff; } .btn-warning { border-color: rgba(154, 90, 18, .3); background: var(--dr-warn-tint); color: var(--dr-warn); } .btn-warning:hover { background: var(--dr-warn); color: #fff; border-color: var(--dr-warn); } .btn-info { border-color: rgba(var(--dr-accent-rgb), .3); background: var(--dr-accent-tint); color: var(--dr-accent); } .btn-default, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary { border-color: var(--dr-line); background: var(--dr-surface); color: var(--dr-ink); } .btn-outline-primary { color: var(--dr-accent); border-color: rgba(var(--dr-accent-rgb), .45); } .btn-link { border-color: transparent; background: transparent; color: var(--dr-accent); box-shadow: none; padding-left: 8px; padding-right: 8px; } .btn-link:hover { background: var(--dr-accent-tint); } .btn-ghost { border-color: transparent; background: transparent; } .btn-sm, .btn-xs { min-height: 32px; padding: 5px 13px; font-size: 12px; } .btn-lg { min-height: 46px; padding: 10px 24px; font-size: 14px; } .btn-block { display: flex; width: 100%; } .btn-group { display: inline-flex; flex-wrap: wrap; gap: 6px; } .btn-group > .btn { flex: 0 0 auto; } .btn .fa-spin { font-size: 12px; } .btn i + span, .btn span + i { margin: 0; } .close { float: right; padding: 0; border: 0; background: transparent; color: var(--dr-ink-3); font-size: 22px; font-weight: 700; line-height: 1; opacity: .7; } .close:hover { color: var(--dr-ink); opacity: 1; } /* -------------------------------------------------------------------------- 7. Forms -------------------------------------------------------------------------- */ .form-control, .form-select, input[type="text"].dr-input, select.dr-input, textarea.dr-input { display: block; width: 100%; min-height: 42px; padding: 9px 14px; border: 1px solid var(--dr-control-line); border-radius: var(--dr-radius-control); background: var(--dr-surface); color: var(--dr-ink); font-size: 13.5px; line-height: 1.4; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; appearance: none; -webkit-appearance: none; } .form-control::placeholder { color: var(--dr-ink-3); } .form-control:focus { outline: 0; border-color: var(--dr-accent); box-shadow: 0 0 0 3px rgba(var(--dr-accent-rgb), .18); } .form-control:disabled, .form-control[readonly] { background: var(--dr-soft); color: var(--dr-ink-2); } select.form-control:not([multiple]) { padding-right: 38px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; } select.form-control[multiple], select[size] { min-height: 120px; padding: 8px; } textarea.form-control { min-height: 110px; resize: vertical; line-height: 1.5; } .form-control-sm, .input-sm { min-height: 34px; padding: 5px 12px; font-size: 12.5px; } .form-control-lg, .input-lg { min-height: 48px; font-size: 15px; } .form-group { margin-bottom: 16px; } .form-group label, .control-label, .col-form-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; } .form-text, .help-block, .form-help { display: block; margin-top: 6px; color: var(--dr-ink-2); font-size: 12px; } .form-row { display: flex; flex-wrap: wrap; margin: 0 -8px; } .form-row > .col, .form-row > [class*="col-"] { padding: 0 8px; } .form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .input-group { display: flex; align-items: stretch; width: 100%; } .input-group > .form-control { flex: 1 1 auto; min-width: 0; border-radius: var(--dr-radius-control) 0 0 var(--dr-radius-control); } .input-group-prepend, .input-group-append, .input-group-btn { display: flex; } .input-group-prepend .input-group-text, .input-group-append .input-group-text, .input-group-addon { display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--dr-control-line); background: var(--dr-soft); color: var(--dr-ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; } .input-group-prepend .input-group-text, .input-group-addon:first-child { border-right: 0; border-radius: var(--dr-radius-control) 0 0 var(--dr-radius-control); } .input-group-prepend + .form-control { border-radius: 0 var(--dr-radius-control) var(--dr-radius-control) 0; } .input-group-append .input-group-text, .input-group-addon:last-child { border-left: 0; border-radius: 0 var(--dr-radius-control) var(--dr-radius-control) 0; } .input-group-append .btn, .input-group-btn .btn { border-radius: 0 var(--dr-radius-control) var(--dr-radius-control) 0; min-height: 42px; } .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .has-error .form-control, .form-control.is-invalid, .form-control.error { border-color: var(--dr-bad); } .has-error .help-block, .invalid-feedback, .field-error-msg { color: var(--dr-bad); font-size: 12px; } .invalid-feedback { display: none; margin-top: 6px; } .is-invalid ~ .invalid-feedback, .has-error .invalid-feedback { display: block; } .has-success .form-control, .form-control.is-valid { border-color: var(--dr-ok); } .form-control-feedback { display: none; } /* Checkbox / radio: admin switch for standalone checkboxes, styled boxes otherwise */ input[type="checkbox"]:not(.dr-switch):not(.wbams-ui-slide), input[type="radio"] { width: 18px; height: 18px; margin: 0 8px 0 0; vertical-align: -3px; accent-color: var(--dr-accent); cursor: pointer; } .checkbox, .radio { position: relative; display: block; margin: 0 0 10px; } .checkbox label, .radio label, .form-check-label, .checkbox-inline, .radio-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 13.5px; cursor: pointer; } .checkbox-inline + .checkbox-inline, .radio-inline + .radio-inline { margin-left: 14px; } .form-check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .form-check-input { margin: 0; } /* the 44×24 switch */ .custom-control { display: flex; align-items: center; gap: 10px; } .custom-control-label { margin: 0; font-weight: 600; } .custom-control-label::before, .custom-control-label::after { display: none; } /* choice cards (radio tiles) */ /* field grids like the admin */ .dr-field--wide { grid-column: 1 / -1; } /* password strength meter */ .dr-pw { margin-top: 8px; } .dr-pw .progress { height: 8px; } .dr-pw__label { margin-top: 4px; font-size: 12px; color: var(--dr-ink-2); } .progress { display: flex; height: 10px; overflow: hidden; border-radius: 999px; background: var(--dr-soft); } .progress-bar { display: flex; align-items: center; justify-content: center; background: var(--dr-accent); color: #fff; font-size: 10px; transition: width .3s ease; } .progress-bar-danger, .progress-bar.bg-danger { background: var(--dr-bad); } .progress-bar-warning, .progress-bar.bg-warning { background: var(--dr-warn); } .progress-bar-success, .progress-bar.bg-success { background: var(--dr-ok); } /* intl-tel-input tweaks */ .iti { width: 100%; } .iti__flag-container, .iti .selected-flag { border-radius: var(--dr-radius-control) 0 0 var(--dr-radius-control); } /* selectize / select2 */ .selectize-input, .select2-container .select2-selection--single { min-height: 42px; padding: 8px 14px; border: 1px solid var(--dr-control-line) !important; border-radius: var(--dr-radius-control) !important; background: var(--dr-surface) !important; color: var(--dr-ink); box-shadow: none !important; } .selectize-dropdown, .select2-dropdown { border: 1px solid var(--dr-line) !important; border-radius: 12px !important; background: var(--dr-surface) !important; color: var(--dr-ink); box-shadow: var(--dr-shadow-pop); overflow: hidden; } .selectize-dropdown .option:hover, .selectize-dropdown .option.active, .select2-results__option--highlighted { background: var(--dr-accent-tint) !important; color: var(--dr-accent) !important; } .select2-container .select2-selection--single .select2-selection__rendered { color: var(--dr-ink); line-height: 24px; padding: 0; } .select2-container .select2-selection--single .select2-selection__arrow { top: 8px; right: 8px; } .select2-results__option { padding: 8px 12px; } /* generate password */ .dr-generate { display: flex; gap: 8px; align-items: flex-start; } .dr-generate .form-control { flex: 1; } /* -------------------------------------------------------------------------- 8. Tables -------------------------------------------------------------------------- */ .dr-table-shell, .table-container, .table-responsive { width: 100%; overflow-x: auto; border-radius: 12px; } .table, .dr-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } .table > thead > tr > th, .dr-table > thead > tr > th { padding: 10px 12px; border-bottom: 1px solid var(--dr-line); color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: left; white-space: nowrap; background: transparent; } .table > tbody > tr > td, .dr-table > tbody > tr > td { padding: 12px; border-bottom: 1px solid var(--dr-line-soft); vertical-align: middle; color: var(--dr-ink); } .table > tbody > tr:last-child > td { border-bottom: 0; } .table > tbody > tr:hover > td { background: var(--dr-soft); } .table > tbody > tr > td:first-child, .table > thead > tr > th:first-child { padding-left: 16px; } .table > tbody > tr > td:last-child, .table > thead > tr > th:last-child { padding-right: 16px; } .table td.text-right, .table th.text-right { text-align: right; } .table td.text-center, .table th.text-center { text-align: center; } .table .btn { min-height: 34px; padding: 5px 13px; font-size: 12px; } .table-striped > tbody > tr:nth-child(odd) > td { background: transparent; } .table-hover > tbody > tr:hover > td { background: var(--dr-soft); } .dr-table__num { text-align: right; font-variant-numeric: tabular-nums; } .dr-table-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--dr-line); background: var(--dr-soft); color: var(--dr-ink-2); font-size: 12.5px; } /* datatables */ .dataTables_wrapper { width: 100%; } .dataTables_wrapper .listtable { padding: 0 0 4px; } .dataTables_filter { margin: 0 0 12px; } .dataTables_filter label { display: flex; align-items: center; gap: 8px; font-weight: 600; } .dataTables_filter input { min-height: 40px; padding: 8px 14px; border: 1px solid var(--dr-control-line); border-radius: var(--dr-radius-control); background: var(--dr-surface); color: var(--dr-ink); } .dataTables_info { padding: 12px 0 0; color: var(--dr-ink-2); font-size: 12.5px; } .dataTables_length { float: right; padding-top: 12px; font-size: 12.5px; color: var(--dr-ink-2); } .dataTables_length select { margin: 0 6px; min-height: 32px; padding: 3px 26px 3px 10px; border: 1px solid var(--dr-control-line); border-radius: 9px; background: var(--dr-surface); color: var(--dr-ink); } .dataTables_paginate { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 12px; } /* DataTables (bootstrap4 build) renders li.paginate_button > a.page-link — only the anchor is the button; the li stays plain, otherwise it reads as a button inside a button */ .dataTables_paginate .paginate_button, .pagination > li { display: inline-flex; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; } .dataTables_paginate a.paginate_button, .dataTables_paginate span > a, .pagination .page-link, .pagination > li > a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--dr-line); border-radius: 10px; background: var(--dr-surface); color: var(--dr-ink-2) !important; font-size: 12.5px; font-weight: 700; cursor: pointer; } .dataTables_paginate a.paginate_button:hover, .pagination .page-link:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-accent) !important; background: var(--dr-surface); } .dataTables_paginate a.paginate_button.current, .pagination .active .page-link, .pagination > li.active > a, .pagination > li.paginate_button.active > a { border-color: var(--dr-accent); background: var(--dr-accent); color: var(--dr-on-accent) !important; } .dataTables_paginate a.paginate_button.disabled, .pagination .disabled .page-link, .pagination > li.disabled > a { opacity: .45; pointer-events: none; } .dataTables_paginate .ellipsis { padding: 0 6px; align-self: center; } .pagination { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; } table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { cursor: pointer; background-image: none !important; } /* The arrow characters are not in the Roboto subset the theme loads, so the browser substituted a glyph that reads as a stray pipe next to the sorted column. Draw the caret instead of asking for a character. */ table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after { display: inline-block; width: 0; height: 0; margin-left: 7px; vertical-align: middle; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } table.dataTable thead .sorting_asc::after { border-bottom: 5px solid currentColor; } table.dataTable thead .sorting_desc::after { border-top: 5px solid currentColor; } table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable > tbody > tr.child ul.dtr-details { margin: 0; } tr.child td.child { background: var(--dr-soft); } .dtr-details { list-style: none; padding: 0; } .dtr-details li { padding: 4px 0; } .dtr-title { font-weight: 700; margin-right: 6px; } .table-list.table-list tr td:first-child { padding-left: 16px; } /* -------------------------------------------------------------------------- 9. Badges, pills, alerts, labels -------------------------------------------------------------------------- */ .badge, .label { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1.4; vertical-align: middle; white-space: nowrap; } .badge-primary, .label-primary, .badge-info, .label-info, .badge-secondary { background: var(--dr-accent-tint); color: var(--dr-accent); } .badge-success, .label-success { background: var(--dr-ok-tint); color: var(--dr-ok); } .badge-warning, .label-warning { background: var(--dr-warn-tint); color: var(--dr-warn); } .badge-danger, .label-danger { background: var(--dr-bad-tint); color: var(--dr-bad); } .badge-default, .label-default, .badge-light { background: var(--dr-soft); color: var(--dr-ink-2); } /* Legacy status color classes emitted by the engine */ .status-active, .status-paid, .status-open, .status-completed { color: var(--dr-ok); } .status-pending, .status-unpaid, .status-customer-reply { color: var(--dr-warn); } .status-suspended, .status-canceled, .status-terminated, .status-overdue, .status-fraud, .status-expired { color: var(--dr-bad); } .alert { position: relative; display: block; margin: 0 0 18px; padding: 13px 16px 13px 42px; border: 1px solid transparent; border-radius: 14px; font-size: 13.5px; font-weight: 600; line-height: 1.5; background: var(--dr-info-tint); color: var(--dr-info); } .alert::before { position: absolute; left: 16px; top: 14px; font-family: "Font Awesome 6 Pro", "Font Awesome 5 Free", "Font Awesome 5 Pro"; font-weight: 900; content: "\f05a"; } .alert > .btn, .alert > a.btn { float: none; flex: none; margin: 0 0 0 auto; } /* an alert that carries an action becomes a flex row: text shrinks, the button stays on the line (stacks only on phones) */ .alert:has(> .btn) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .alert:has(> .btn) > div, .alert:has(> .btn) > span, .alert:has(> .btn) > p { flex: 1 1 280px; min-width: 0; } .alert p:last-child { margin-bottom: 0; } .alert-success { background: var(--dr-ok-tint); color: var(--dr-ok); } .alert-success::before { content: "\f058"; } .alert-warning { background: var(--dr-warn-tint); color: var(--dr-warn); } .alert-warning::before { content: "\f071"; } .alert-danger, .alert-error { background: var(--dr-bad-tint); color: var(--dr-bad); } .alert-danger::before, .alert-error::before { content: "\f057"; } .alert-info { background: var(--dr-info-tint); color: var(--dr-info); } .alert > div, .alert > span, .alert > p { flex: 1; } .alert h2, .alert h4, .alert strong { color: inherit; font-size: 14px; margin: 0 0 4px; } .alert ul { margin: 6px 0 0 18px; padding: 0; } .alert .close { margin-left: auto; color: inherit; } .alert a { color: inherit; text-decoration: underline; } .alert.alert-dismissible { padding-right: 40px; } .dr-note { display: flex; gap: 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 13.5px; line-height: 1.6; } .dr-note > :last-child { margin-bottom: 0; } .dr-note i { color: var(--dr-accent); margin-top: 2px; } .dr-note--ok { background: var(--dr-ok-tint); color: var(--dr-ok); } .dr-note--ok i { color: var(--dr-ok); } .dr-note--bad { background: var(--dr-bad-tint); color: var(--dr-bad); } .dr-note--bad i { color: var(--dr-bad); } .dr-note--info { background: var(--dr-accent-tint, var(--dr-soft)); color: var(--dr-ink-2); } .dr-note strong { color: inherit; } /* -------------------------------------------------------------------------- 10. Tabs, list groups, nav pills -------------------------------------------------------------------------- */ .nav-tabs, .dr-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; list-style: none; border-bottom: 0; } .nav-tabs > li > a, .nav-tabs .nav-link, .dr-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-pill); background: var(--dr-surface); color: var(--dr-ink-2); font-size: 13px; font-weight: 700; } .nav-tabs > li.active > a, .nav-tabs .nav-link.active, .nav-tabs > li > a:hover, .dr-tabs a.active, .dr-tabs a:hover { border-color: var(--dr-accent); color: var(--dr-accent); background: var(--dr-accent-tint); } .tab-content > .tab-pane { display: none; } .tab-content > .active { display: block; } .nav-pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; } .nav-pills .nav-link, .nav-pills > li > a { padding: 8px 14px; border-radius: var(--dr-radius-pill); color: var(--dr-ink-2); font-weight: 700; } .nav-pills .nav-link.active, .nav-pills > li.active > a { color: var(--dr-accent); background: var(--dr-accent-tint); } .list-group { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .list-group-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--dr-line); border-radius: 11px; background: var(--dr-surface); color: var(--dr-ink); font-size: 13px; font-weight: 600; } a.list-group-item:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-accent); } .list-group-item.active { border-color: var(--dr-accent); background: var(--dr-accent-tint); color: var(--dr-accent); } .list-group-item .badge { margin-left: auto; } .list-group-item-success { background: var(--dr-ok-tint); color: var(--dr-ok); border-color: transparent; } .list-group-item-danger { background: var(--dr-bad-tint); color: var(--dr-bad); border-color: transparent; } .list-group-item-warning { background: var(--dr-warn-tint); color: var(--dr-warn); border-color: transparent; } /* -------------------------------------------------------------------------- 11. Modals (Bootstrap JS compatible) -------------------------------------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 1400; display: none; overflow: auto; outline: 0; -webkit-overflow-scrolling: touch; } .modal.show, .modal.in { display: block; } .modal-open { overflow: hidden; } .modal-backdrop { position: fixed; inset: 0; z-index: 1390; background: rgba(20, 19, 26, .55); backdrop-filter: blur(2px); } .modal-backdrop.fade { opacity: 0; } .modal-backdrop.show, .modal-backdrop.in { opacity: 1; } .modal-dialog { position: relative; width: auto; max-width: 560px; margin: 6vh auto; padding: 0 16px; } .modal-lg { max-width: 860px; } .modal-sm { max-width: 400px; } .modal.fade .modal-dialog { transform: translateY(-12px); transition: transform .2s ease; } .modal.show .modal-dialog, .modal.in .modal-dialog { transform: none; } .modal-content { position: relative; display: flex; flex-direction: column; border: 1px solid var(--dr-line); border-radius: 18px; background: var(--dr-surface); box-shadow: var(--dr-shadow-pop); overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--dr-line); } .modal-title { margin: 0; font-size: 16px; font-weight: 800; } .modal-body { padding: 20px 22px; } .modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--dr-line); background: var(--dr-soft); } .modal-footer .loader { margin-right: auto; color: var(--dr-ink-2); font-size: 12.5px; } .modal-body .alert:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 12. Footer -------------------------------------------------------------------------- */ .dr-footer { border-top: 1px solid var(--dr-line); background: var(--dr-panel); padding: 34px 0 26px; color: var(--dr-ink-2); font-size: 13px; } .dr-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(160px, .7fr); gap: 28px 32px; align-items: start; margin-bottom: 26px; } .dr-footer__brand { flex: 1 1 260px; max-width: 380px; } .dr-footer__col { flex: 1 1 140px; min-width: 0; } .dr-footer__brand p { margin: 10px 0 0; max-width: 360px; } .dr-footer__col strong { display: block; margin-bottom: 10px; color: var(--dr-ink); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .dr-footer__col a, .dr-footer__col span { display: block; padding: 4px 0; color: var(--dr-ink-2); font-weight: 600; } .dr-footer__col a:hover { color: var(--dr-accent); } .dr-footer__social { display: flex; gap: 8px; margin-top: 14px; } .dr-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--dr-line); border-radius: 999px; color: var(--dr-ink-2); } .dr-footer__social a:hover { color: var(--dr-accent); border-color: rgba(var(--dr-accent-rgb), .45); } .dr-footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 18px; border-top: 1px solid var(--dr-line); font-size: 12.5px; } .dr-footer__bar a { color: var(--dr-ink-2); font-weight: 600; margin-left: 14px; } .dr-footer__bar a:hover { color: var(--dr-accent); } @media (max-width: 520px) { .dr-footer__brand { flex-basis: 100%; } } /* -------------------------------------------------------------------------- 13. Auth pages (sign in / register / reset) -------------------------------------------------------------------------- */ .dr-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--dr-canvas); } .dr-auth__frame { display: grid; grid-template-columns: minmax(0, 1fr); width: min(1080px, 100%); margin: auto; padding: 24px; } .dr-auth__card { display: grid; grid-template-columns: 5fr 7fr; overflow: hidden; border: 1px solid var(--dr-line-card); border-radius: 24px; background: var(--dr-surface); box-shadow: var(--dr-shadow-card); } .dr-auth__aside { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 30px; padding: 34px; background: linear-gradient(160deg, var(--dr-accent-tint), var(--dr-surface) 75%); border-right: 1px solid var(--dr-line-soft); } .dr-auth__brand { display: flex; align-items: center; gap: 10px; } .dr-auth__brand img { max-height: 40px; } .dr-auth__aside-copy .dr-hero__eyebrow { color: var(--dr-accent); } .dr-auth__aside-copy h2 { font-size: 24px; margin: 4px 0 8px; } .dr-auth__aside-copy p { color: var(--dr-ink-2); font-size: 13.5px; max-width: 320px; } .dr-auth__points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } .dr-auth__points li { display: flex; align-items: flex-start; gap: 10px; color: var(--dr-ink-2); font-size: 13px; font-weight: 600; } .dr-auth__points i { color: var(--dr-accent); margin-top: 3px; } .dr-auth__main { padding: 38px 40px; } .dr-auth__main h1 { font-size: 24px; margin: 4px 0 6px; } .dr-auth__main > p.dr-auth__lead { color: var(--dr-ink-2); margin-bottom: 22px; } .dr-auth__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; } .dr-auth__alt { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dr-line); color: var(--dr-ink-2); font-size: 13px; } .dr-auth__providers { display: grid; gap: 8px; margin-top: 14px; } .dr-auth__providers .btn { width: 100%; } /* A field that shares its row with another field fills the card between them; one left alone in a 1700px card just leaves a hole beside it. So the address and its password go side by side, and dr-fields does the responsive part -- two columns, one below 760px. dr-field--end holds whatever shares the row with a field -- a switch, a line of help -- and puts it on the input's own midline. Two pieces do that, and neither guesses: The ::before is a hidden non-breaking space carrying the label's exact typography and margin, so the browser measures the label's height for us and the column starts where the input does. A label that changes size later takes this with it; a hard-coded offset would not. The content then centres inside one control's height, which is the 42px min-height every .form-control in this theme has. Centring on the whole column instead would land halfway down the input AND its help line, which is what left the switch sitting under the box. */ .dr-field--end { display: flex; flex-direction: column; } .dr-field--end::before { content: "\00a0"; display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; visibility: hidden; } .dr-field--end > .dr-switch-row, .dr-field--end > small { display: flex; align-items: center; min-height: 42px; margin: 0; } .dr-field--end > small { color: var(--dr-ink-2); font-size: 12px; } /* Stacked, there is no input beside it to line up with, so the spacer only adds a gap. */ @media (max-width: 760px) { .dr-field--end::before { display: none; } .dr-field--end > .dr-switch-row, .dr-field--end > small { min-height: 0; } } /* Google renders its own button into .wbams-gsi, so nothing here paints a border or a background: a box drawn around a button that already has one is the control-in-control the rest of this stylesheet avoids, and it was what left Google's pill stranded in the middle of an empty frame. The colour, the logo and the wording stay Google's. Width and height are ours. Google's own width option stops at 400px, which is narrower than this card, so the button sat short of the Login button above it; these rules carry it the rest of the way and match the Login button's height and radius, so the two read as one stack rather than two sizes. !important is needed because Google writes the 400px as an inline style on the element it renders. */ .wbams-gsi { display: flex; justify-content: center; width: 100%; max-width: 100%; } .wbams-gsi > div, .wbams-gsi > div > div, .wbams-gsi [role="button"] { width: 100% !important; max-width: 100% !important; } .wbams-gsi [role="button"] { height: 46px !important; border-radius: 999px !important; } .dr-auth__or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--dr-ink-3); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .dr-auth__or::before, .dr-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--dr-line); } .dr-auth--narrow .dr-auth__card { grid-template-columns: minmax(0, 1fr); width: min(520px, 100%); margin: 0 auto; } .dr-auth--narrow .dr-auth__card--wide { width: min(760px, 100%); } @media (max-width: 860px) { .dr-auth__card { grid-template-columns: minmax(0, 1fr); } .dr-auth__aside { border-right: 0; border-bottom: 1px solid var(--dr-line-soft); padding: 26px; } .dr-auth__main { padding: 26px; } } /* -------------------------------------------------------------------------- 14. Client-area specifics -------------------------------------------------------------------------- */ .dr-list { display: grid; gap: 10px; } /* Invoice / quote document view */ .dr-doc__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: start; margin-bottom: 20px; } .dr-doc__title { font-size: 26px; margin: 0; } .dr-doc__status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .dr-doc__amount { font-size: 28px; font-weight: 800; letter-spacing: -.02em; } .dr-doc__parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--dr-line-soft); } .dr-doc__party strong { display: block; margin-bottom: 6px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .dr-doc__party address { font-style: normal; line-height: 1.6; color: var(--dr-ink-2); } .dr-doc__party address b { color: var(--dr-ink); } .dr-doc__totals { margin-left: auto; width: min(360px, 100%); } .dr-doc__totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 16px; /* same side padding as the table cells above so amounts line up */ border-bottom: 1px solid var(--dr-line-soft); font-size: 13.5px; } .dr-doc__totals > div.is-total { border-top: 2px solid var(--dr-ink); border-bottom: 0; margin-top: 4px; padding-top: 12px; font-size: 16px; font-weight: 800; } .dr-doc__totals > div:has(+ .is-total) { border-bottom: 0; } /* one rule above the total, not two */ .dr-doc__totals span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; } /* Ticket thread */ .dr-thread { display: grid; gap: 14px; } .dr-msg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px; border: 1px solid var(--dr-line-card); border-radius: 16px; background: var(--dr-surface); } .dr-msg--staff { background: var(--dr-accent-tint); border-color: rgba(var(--dr-accent-rgb), .25); } .dr-msg__avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; background: var(--dr-surface); color: var(--dr-accent); font-weight: 800; border: 1px solid var(--dr-line); } .dr-msg__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-bottom: 8px; } .dr-msg__head strong { font-size: 14px; } .dr-msg__head small { color: var(--dr-ink-2); font-size: 12px; } .dr-msg__body { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; } .dr-msg__body p:last-child { margin-bottom: 0; } .dr-msg__attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .dr-msg__attachments a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--dr-line); border-radius: 999px; font-size: 12px; font-weight: 700; } .dr-attach { display: grid; gap: 8px; } .dr-attach input[type="file"] { padding: 8px 10px; } /* Product / service cards */ .dr-service { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; } /* KB */ .dr-search { display: flex; gap: 8px; } .dr-search .form-control { flex: 1; } /* Homepage */ .dr-home-hero { padding: 64px 0 40px; text-align: center; } .dr-home-hero h1 { font-size: clamp(30px, 4.5vw, 46px); margin: 0 0 12px; letter-spacing: -.02em; } .dr-home-hero p { max-width: 640px; margin: 0 auto 22px; color: var(--dr-ink-2); font-size: 16px; } .dr-home-hero .dr-actions { justify-content: center; } .dr-section { padding: 26px 0; } .dr-section__head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .dr-section__head h2 { margin: 0; font-size: 22px; } .dr-section__head p { margin: 4px 0 0; color: var(--dr-ink-2); } .dr-feature { text-align: left; } .dr-feature .dr-card__icon { width: 44px; height: 44px; margin-bottom: 12px; } .dr-feature h3 { font-size: 16px; } .dr-feature p { color: var(--dr-ink-2); margin: 0; font-size: 13.5px; } /* Checkout wrappers */ .dr-cart { --dr-container: 1440px; } .dr-cart .sidebar, .dr-cart .cart-sidebar { position: sticky; top: calc(var(--dr-header-h) + 18px); } /* Steps */ .dr-steps { display: flex; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; } .dr-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 12.5px; font-weight: 700; } .dr-steps li.is-active { background: var(--dr-accent-tint); color: var(--dr-accent); } .dr-steps li.is-done { background: var(--dr-ok-tint); color: var(--dr-ok); } .dr-steps li span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; background: currentColor; color: var(--dr-surface); font-size: 11px; } .dr-steps li span b { color: var(--dr-surface); } /* -------------------------------------------------------------------------- 15. Misc legacy compat (engine-generated markup & fallback templates) -------------------------------------------------------------------------- */ .header-lined h1 { font-size: 24px; } .header-lined { margin-bottom: 18px; } .tiles .tile { padding: 14px; border: 1px solid var(--dr-line); border-radius: 12px; background: var(--dr-surface); } .item-selector .item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--dr-line); border-radius: 12px; color: var(--dr-ink); font-weight: 600; margin-bottom: 8px; } .item-selector .item.active { border-color: var(--dr-accent); background: var(--dr-accent-tint); color: var(--dr-accent); } .item-selector .item img { width: 22px; height: 16px; object-fit: cover; border-radius: 3px; } .loader.w-hidden { display: none; } .spanner { display: none; } .text-white { color: #fff !important; } .bg-primary { background: var(--dr-accent) !important; color: var(--dr-on-accent) !important; } .bg-light { background: var(--dr-soft) !important; } .border-top { border-top: 1px solid var(--dr-line) !important; } .rounded { border-radius: var(--dr-radius-control) !important; } .shadow-sm { box-shadow: var(--dr-shadow-card) !important; } .disable-on-click.disabled { opacity: .6; } .tooltip { position: absolute; z-index: 1500; padding: 6px 10px; border-radius: 8px; background: var(--dr-ink); color: var(--dr-canvas); font-size: 12px; font-weight: 600; opacity: 0; } .tooltip.show, .tooltip.in { opacity: 1; } .tooltip .arrow { display: none; } .popover { position: absolute; z-index: 1500; max-width: 300px; padding: 10px 12px; border: 1px solid var(--dr-line); border-radius: 12px; background: var(--dr-surface); box-shadow: var(--dr-shadow-pop); font-size: 12.5px; } .growl, .jGrowl { font-family: var(--dr-font); } #growls { z-index: 2000; } .growl { border-radius: 14px !important; box-shadow: var(--dr-shadow-pop) !important; } .swal2-popup { font-family: var(--dr-font) !important; border-radius: 18px !important; background: var(--dr-surface) !important; color: var(--dr-ink) !important; } .swal2-styled { border-radius: 999px !important; font-weight: 800 !important; } .markdown-editor .btn-toolbar .btn { min-height: 30px; padding: 3px 9px; } .md-editor { border: 1px solid var(--dr-control-line); border-radius: var(--dr-radius-control); overflow: hidden; } .md-editor > .md-header { background: var(--dr-soft); padding: 6px; } .md-editor > textarea { border: 0; border-top: 1px solid var(--dr-line); background: var(--dr-surface); color: var(--dr-ink); padding: 12px 14px; } .md-editor.active { border-color: var(--dr-accent); box-shadow: 0 0 0 3px rgba(var(--dr-accent-rgb), .18); } .md-editor .btn-group { gap: 2px; } .md-editor .btn-default { min-height: 30px; padding: 2px 8px; border-radius: 8px; font-size: 12px; } .attachments-container, .attachment-list { display: grid; gap: 8px; } img.captcha { border-radius: 8px; } .grecaptcha-badge { visibility: hidden; } /* print */ @media print { body { background: #fff; } .dr-header, .dr-footer, .dr-side, .dr-hero__tools, .dr-crumbs, .wbams-powered-by, .dr-partners, .cc-window, .dr-admin-bar, .dr-kb-section, .dr-article__foot, .dr-kb-toc, .dr-kb-helpful, .dr-kb-article__tools, .dr-newsroom__bar, #disqus_thread { display: none !important; } .dr-article, .dr-kb-article-card { break-inside: auto; } .dr-article__media img { max-height: 300px; } .dr-kb-article__layout { display: block; } .dr-card { box-shadow: none; border-color: #ddd; } .dr-layout { display: block; } .dr-layout--side-right > div:first-child, .dr-doc { width: 100%; } /* document pages (invoice, quote, billing note) carry their own title — the page hero is redundant on paper and its tinted icon prints badly */ body[data-templatefile="invoice"] .dr-hero, body[data-templatefile="quote"] .dr-hero, body[data-templatefile="billing-note"] .dr-hero { display: none !important; } .dr-hero .dr-hero__icon { display: none !important; } .dr-pill, .dr-doc__status .dr-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; border: 1.5px solid currentColor; } .dr-doc__status .dr-pill--lg { font-size: 15px; padding: 7px 16px; } } /* -------------------------------------------------------------------------- 14. Page-level additions (client area, documents, KB, news, donations) -------------------------------------------------------------------------- */ .dr-form-section { margin: 22px 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dr-ink-3); } .dr-form-section:first-child { margin-top: 0; } .dr-subheader { margin: 0 0 12px; font-size: 16px; } .dr-lead { margin: 0 0 18px; color: var(--dr-ink-2); font-size: 14.5px; } .dr-stat__copy small { display: block; color: var(--dr-ink-2); font-size: 12.5px; font-weight: 600; } .dr-auth__card--wide { grid-template-columns: 4fr 8fr; } .dr-auth__card--wide .dr-auth__main { padding: 34px 36px; } .dr-code { margin: 12px 0 16px; padding: 16px; border: 1px dashed rgba(var(--dr-accent-rgb), .5); border-radius: var(--dr-radius-control); background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 26px; font-weight: 800; letter-spacing: .12em; text-align: center; font-variant-numeric: tabular-nums; } .dr-twofa-challenge { margin-bottom: 10px; } .dr-twofa-challenge .form-control { min-height: 46px; font-size: 16px; } .dr-card__icon--lg { width: 48px; height: 48px; font-size: 20px; border-radius: 14px; } .dr-service__name { font-size: 20px; } .dr-service__side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } @media (max-width: 640px) { .dr-service { grid-template-columns: 44px minmax(0, 1fr); } .dr-service__side { grid-column: 1 / -1; flex-direction: row; align-items: center; } } .dr-facts--bordered { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--dr-line-soft); } .dr-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .dr-home-grid__wide { grid-column: 1 / -1; } .dr-home-grid__col { min-width: 0; } @media (max-width: 900px) { .dr-home-grid { grid-template-columns: minmax(0, 1fr); } } .dr-home-panel__body { font-size: 13.5px; color: var(--dr-ink-2); } .dr-home-panel__body p:last-child { margin-bottom: 0; } .dr-home-panel__body form .form-control { margin-bottom: 8px; } .dr-home-list { display: grid; gap: 4px; } .dr-home-list__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--dr-ink); font-size: 13.5px; } .dr-home-list__item > i:first-child { width: 18px; text-align: center; color: var(--dr-ink-3); } a.dr-home-list__item:hover { background: var(--dr-accent-tint); color: var(--dr-accent); } .dr-home-list__label { flex: 1; min-width: 0; } .dr-home-list__label .list-group-item-content, .dr-home-list__label .div-service-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .dr-home-list__label .list-group-item-name, .dr-home-list__label .div-service-name { flex: 1 1 200px; min-width: 0; } .dr-home-list__label .list-group-item-group, .dr-home-list__label .service-group-name { display: block; color: var(--dr-ink-3); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .dr-home-list__label .list-group-item-fullname, .dr-home-list__label .service-name { font-weight: 700; } .dr-home-list__label .list-group-item-status, .dr-home-list__label .div-service-status, .dr-home-list__label .div-service-expiry { color: var(--dr-ink-2); font-size: 12px; } .dr-home-list__label .list-group-item-actions .btn, .dr-home-list__label .div-service-buttons .btn { min-height: 30px; padding: 3px 10px; font-size: 11.5px; } .dr-home-list__label .label, .dr-home-list__label .status { display: inline-flex; padding: 2px 8px; border-radius: 999px; background: var(--dr-soft); color: inherit; font-size: 11px; font-weight: 800; } .dr-home-list__label .text-last-updated, .dr-home-list__label small { color: var(--dr-ink-2); font-size: 12px; } .dr-home-list__arrow { color: var(--dr-ink-3); font-size: 11px; } .dr-table__actions { width: 1%; white-space: nowrap; text-align: right; } .dr-table__actions .dr-iconbtn { width: 34px; height: 34px; } .dr-table tbody tr[onclick] { cursor: pointer; } .dr-table tfoot th { padding: 12px; border-top: 2px solid var(--dr-line); font-size: 13px; } .dr-table > tfoot > tr > th:first-child { padding-left: 16px; } .dr-table > tfoot > tr > th:last-child { padding-right: 16px; } .dr-pill--lg { padding: 8px 16px; font-size: 14px; } .dr-doc__brand { display: inline-flex; margin-bottom: 14px; } .dr-doc__brand img { max-height: 36px; } .dr-pay-card__amount { margin: 4px 0 14px; font-size: 30px; font-weight: 800; letter-spacing: -.02em; } .dr-pay-card__amount--sm { font-size: 22px; } .dr-pay-card__label { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 700; } .dr-pay-card .payment-form { margin-top: 10px; } .dr-pay-card .payment-form form { margin: 0; } .dr-pay-card .payment-form .btn, .dr-pay-card .payment-form input[type="submit"], .dr-pay-card .payment-form button { width: 100%; } .dr-requestor { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-control); background: var(--dr-soft); } .dr-tile__copy { flex: 1; min-width: 0; } .dr-tiles--depts .dr-tile { padding: 16px 18px; } .dr-tile--stack { flex-direction: column; align-items: flex-start; padding: 20px; } .dr-tile--stack .dr-tile__copy small { margin-top: 4px; } .dr-tiles--wide { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .dr-kb-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--dr-line-soft); color: var(--dr-ink-2); font-size: 12.5px; font-weight: 600; } .dr-kb-article__meta a { color: var(--dr-ink-2); } .dr-kb-article__meta .dr-iconbtn { width: 34px; height: 34px; } .dr-kb-article h1, .dr-kb-article h2, .dr-kb-article h3 { margin-top: 1.4em; } .dr-kb-article > :first-child { margin-top: 0; } /* Updates as a newsroom. The newest update is the lead story - picture beside a large title - and the rest are cover cards in a grid. An update without a picture gets a generated cover: a toned panel with a big faded icon and the month, so the room never shows a grey box. */ .dr-newsroom { display: grid; gap: 18px; margin-bottom: 18px; } .dr-newsroom__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; color: var(--dr-ink-3); font-size: 12.5px; font-weight: 700; } .dr-newsroom__count i { margin-right: 4px; color: var(--dr-accent); } .dr-newsroom__rss { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--dr-line-card); border-radius: 999px; background: var(--dr-surface); color: var(--dr-ink-2); font-size: 12px; } .dr-newsroom__rss:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-accent); text-decoration: none; } .dr-newsroom__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .dr-news__item { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .dr-news__item:hover { transform: translateY(-3px); border-color: rgba(var(--dr-accent-rgb), .45); box-shadow: var(--dr-shadow-pop); } .dr-news__media { position: relative; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 16 / 9; background: var(--dr-soft); } .dr-news__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .dr-news__item:hover .dr-news__media img { transform: scale(1.04); } .dr-news__flag { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 4px 10px; border-radius: 999px; background: var(--dr-accent); color: var(--dr-on-accent); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(var(--dr-accent-rgb), .3); } /* generated covers */ .dr-news__media--cover { --cover-a: var(--dr-accent-tint); --cover-b: var(--dr-violet-tint); --cover-ink: var(--dr-accent); background: linear-gradient(135deg, var(--cover-a), var(--cover-b)); } .dr-news__item--tone-1 .dr-news__media--cover { --cover-a: var(--dr-teal-tint); --cover-b: var(--dr-info-tint); --cover-ink: var(--dr-teal); } .dr-news__item--tone-2 .dr-news__media--cover { --cover-a: var(--dr-violet-tint); --cover-b: var(--dr-accent-tint); --cover-ink: var(--dr-violet); } .dr-news__item--tone-3 .dr-news__media--cover { --cover-a: var(--dr-ok-tint); --cover-b: var(--dr-teal-tint); --cover-ink: var(--dr-ok); } .dr-news__item--tone-4 .dr-news__media--cover { --cover-a: var(--dr-info-tint); --cover-b: var(--dr-accent-tint); --cover-ink: var(--dr-info); } .dr-news__item--notice .dr-news__media--cover, .dr-news__item--status .dr-news__media--cover, .dr-news__item--maintenance .dr-news__media--cover { --cover-a: var(--dr-amber-tint); --cover-b: var(--dr-warn-tint); --cover-ink: var(--dr-amber); } .dr-news__media--cover::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .55), transparent 45%), radial-gradient(circle at 15% 90%, rgba(255, 255, 255, .35), transparent 40%); } html[data-theme="dark"] .dr-news__media--cover::before { background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .08), transparent 45%); } .dr-news__cover-art { position: absolute; right: -6%; bottom: -14%; color: var(--cover-ink); font-size: clamp(120px, 26vw, 220px); line-height: 1; opacity: .16; transform: rotate(-10deg); pointer-events: none; } .dr-news__cover-date { position: absolute; left: 20px; bottom: 16px; display: flex; flex-direction: column; color: var(--cover-ink); line-height: 1; } .dr-news__cover-month { font-size: 34px; font-weight: 800; letter-spacing: -.03em; } .dr-news__cover-year { margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .12em; opacity: .75; } /* card body */ .dr-news__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 18px 20px 18px; } .dr-news__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; } /* A featured update that is not the lead keeps its place in the grid by date and says why it is worth a second look. Amber, like the notice templates: it is a state the newsroom has given the story, not another category to filter by. */ .dr-news__featured { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--dr-amber-tint); color: var(--dr-amber); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .dr-news__featured i { font-size: 10px; } .dr-news__kind { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .dr-news__category { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; } .dr-news__category:hover, .dr-news__category:focus { color: var(--dr-accent); text-decoration: none; filter: brightness(.95); } .dr-news__category i { font-size: 10px; } .dr-newsroom__categories { margin: 0 0 18px; } .dr-news__item--notice .dr-news__kind, .dr-news__item--status .dr-news__kind, .dr-news__item--maintenance .dr-news__kind { background: var(--dr-amber-tint); color: var(--dr-amber); } .dr-news__item--feature .dr-news__kind, .dr-news__item--event .dr-news__kind { background: var(--dr-violet-tint); color: var(--dr-violet); } .dr-news__date { color: var(--dr-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .dr-news__title { margin: 0 0 8px; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; } .dr-news__title a { color: var(--dr-ink); } .dr-news__title a:hover { color: var(--dr-accent); text-decoration: none; } .dr-news__summary { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 14px; color: var(--dr-ink-2); font-size: 14px; line-height: 1.6; } .dr-news__actions { margin-top: auto; } /* lead story */ .dr-news__item--lead { display: grid; grid-template-columns: minmax(0, 55%) minmax(0, 1fr); } .dr-news__item--lead .dr-news__media { aspect-ratio: auto; min-height: 320px; height: 100%; } .dr-news__item--lead .dr-news__body { padding: 28px 30px; justify-content: center; } .dr-news__item--lead .dr-news__title { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; } .dr-news__item--lead .dr-news__summary { -webkit-line-clamp: 5; font-size: 15px; } .dr-news__item--lead .dr-news__cover-month { font-size: 56px; } .dr-news__item--lead .dr-news__cover-year { font-size: 14px; } @media (max-width: 991.98px) { .dr-news__item--lead { grid-template-columns: minmax(0, 1fr); } .dr-news__item--lead .dr-news__media { aspect-ratio: 16 / 9; min-height: 0; height: auto; } .dr-news__item--lead .dr-news__body { padding: 20px 22px; } } @media (max-width: 575.98px) { .dr-newsroom__grid { grid-template-columns: minmax(0, 1fr); } .dr-news__body { padding: 16px 18px; } } /* Events. A date tile sits on every card so the calendar can be scanned without reading; a card without a picture keeps the tile on a toned cover. The event page is the story on the left and a sticky details card on the right. */ .dr-events { display: grid; gap: 18px; margin-bottom: 18px; } .dr-events__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .dr-events__tabs { margin: 0; } .dr-events__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 11px; font-weight: 800; } .dr-tabs a.active .dr-events__count { background: var(--dr-accent); color: var(--dr-on-accent); } .dr-events__filter { display: flex; align-items: center; gap: 8px; } .dr-events__filter select { min-width: 200px; border-radius: var(--dr-radius-pill); } .dr-events__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; } .dr-event-card { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .dr-event-card:hover { transform: translateY(-3px); border-color: rgba(var(--dr-accent-rgb), .45); box-shadow: var(--dr-shadow-pop); } .dr-event-card.is-past { opacity: .86; } .dr-event-card.is-past .dr-event-card__media img { filter: saturate(.6); } .dr-event-card__media { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; aspect-ratio: 16 / 9; background: var(--dr-soft); } .dr-event-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .dr-event-card:hover .dr-event-card__media img { transform: scale(1.04); } .dr-event-card__media--cover { background: linear-gradient(135deg, var(--dr-accent-tint), var(--dr-teal-tint)); } .dr-event-card__art { position: absolute; right: -4%; bottom: -16%; color: var(--dr-accent); font-size: 170px; line-height: 1; opacity: .14; transform: rotate(-10deg); } .dr-event-date { position: absolute; left: 14px; top: 14px; z-index: 2; display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 8px 10px 9px; border-radius: 14px; background: var(--dr-surface); color: var(--dr-ink); line-height: 1; box-shadow: 0 8px 20px rgba(0, 0, 0, .14); } .dr-event-date__month { color: var(--dr-accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .dr-event-date__day { margin-top: 3px; font-size: 26px; font-weight: 800; letter-spacing: -.03em; } .dr-event-date__year { margin-top: 3px; color: var(--dr-ink-3); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; } .dr-event-date--static { position: static; box-shadow: none; border: 1px solid var(--dr-line-card); } .dr-event-card__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; padding: 18px 20px; } .dr-event-card__facts { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; color: var(--dr-ink-2); font-size: 13px; } .dr-event-card__facts li { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .dr-event-card__facts i { flex: 0 0 14px; color: var(--dr-accent); text-align: center; } .dr-event-card__facts span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-event__notice { margin-bottom: 16px; border-radius: var(--dr-radius-card); } .dr-event__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 18px; align-items: start; } .dr-event__story { margin: 0; } .dr-event__side { position: sticky; top: calc(var(--dr-header-h) + 18px); } .dr-event-info { margin: 0; padding: 20px; } .dr-event-info__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .dr-event-info__title { margin: 0; font-size: 17px; } .dr-event-info__list { display: grid; gap: 0; margin: 0 0 16px; } .dr-event-info__list > div { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--dr-line-soft); } .dr-event-info__list dt { color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .dr-event-info__list dt i { width: 16px; margin-right: 4px; color: var(--dr-accent); text-align: center; } .dr-event-info__list dd { margin: 0; color: var(--dr-ink); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; } .dr-event-info__list dd span { color: var(--dr-ink-2); } .dr-event-info__list dd small { color: var(--dr-ink-3); } .dr-event-info__list address { display: inline; margin: 0; font-style: normal; color: var(--dr-ink-2); } .dr-event-info__actions { display: grid; gap: 8px; } .dr-event-info__actions .btn { margin: 0; } .dr-event-mini { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px; color: var(--dr-ink); transition: border-color .15s ease, transform .15s ease; } .dr-event-mini:hover { border-color: rgba(var(--dr-accent-rgb), .45); transform: translateY(-2px); color: var(--dr-ink); text-decoration: none; } .dr-event-mini .dr-event-date { position: static; min-width: 56px; box-shadow: none; border: 1px solid var(--dr-line-card); } .dr-event-mini__copy { display: grid; gap: 3px; min-width: 0; } .dr-event-mini__copy strong { font-size: 15px; line-height: 1.3; } .dr-event-mini__copy small { color: var(--dr-ink-2); font-size: 12.5px; } @media (max-width: 991.98px) { .dr-event__layout { grid-template-columns: minmax(0, 1fr); } .dr-event__side { position: static; } } @media (max-width: 575.98px) { .dr-events__grid { grid-template-columns: minmax(0, 1fr); } .dr-events__filter, .dr-events__filter select { width: 100%; } } .dr-contact-info { display: grid; gap: 10px; } .dr-contact-info address { margin: 0; font-style: normal; line-height: 1.6; } .dr-contact-info a { display: inline-flex; align-items: center; gap: 8px; color: var(--dr-ink); font-weight: 600; } .dr-contact-map iframe { display: block; width: 100%; height: 210px; border: 0; } /* The address always shows, so a blank embed still leaves a card worth reading. */ .dr-contact-map__caption { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; padding: 12px 16px; border-top: 1px solid var(--dr-line, #e6e6ee); } .dr-contact-map__caption i { grid-row: 1 / span 2; align-self: center; color: var(--dr-muted, #8a8a99); font-size: 15px; } .dr-contact-map__caption address { margin: 0; color: var(--dr-ink, #26252e); font-size: 12.5px; font-style: normal; line-height: 1.45; } .dr-contact-map__caption a { color: var(--dr-accent, #4f46e5); font-size: 12px; font-weight: 700; } .dr-side-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--dr-line-soft); } .dr-side-row:last-of-type { border-bottom: 0; } .dr-error { max-width: 720px; margin: 30px auto; } .dr-empty--lg { padding: 50px 24px; } .dr-empty--lg > i { width: 64px; height: 64px; font-size: 26px; border-radius: 20px; } .dr-error__code { font-size: clamp(56px, 12vw, 96px); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--dr-accent); } .dr-error__title { margin: 8px 0 6px; font-size: 22px; } .dr-switch-list { display: grid; } .dr-switch-list .dr-switch-row { border-bottom: 1px solid var(--dr-line-soft); } .dr-switch-list .dr-switch-row:last-child { border-bottom: 0; } .dr-switch-row--top { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--dr-line-soft); } .dr-tabs { margin: -6px 0 18px; } .dr-row--block { align-items: flex-start; } .dr-row--block .dr-row__copy { flex: 1; min-width: 0; } .dr-card--danger { border-color: rgba(220, 76, 76, .35); } .dr-card__foot--center { justify-content: center; } .ssl-inactive { color: var(--dr-ink-3); } .dr-body .dr-main > .container > .alert:first-child { margin-top: 18px; } .rating, .rating-done { display: inline-flex; gap: 2px; direction: rtl; } .rating .star, .rating-done .star { width: 16px; height: 16px; cursor: pointer; color: var(--dr-line); } .rating .star::before, .rating-done .star::before { content: "★"; font-size: 15px; line-height: 1; } .rating .star:hover, .rating .star:hover ~ .star, .rating-done .star.active { color: var(--dr-amber); } .rating-done { cursor: default; } /* Licensing "Powered by" line the engine appends after the page body */ .dr-content > p[style*="text-align:center"] { margin: 6px 0 0; color: var(--dr-ink-3); font-size: 11.5px; } .dr-content > p[style*="text-align:center"] a { color: var(--dr-ink-3); } /* Client-area dashboard stats: four across, two on small screens */ .dr-home-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { .dr-home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .dr-home-stats .dr-stat { padding: 14px 16px; } .dr-side .btn-success, .dr-side .btn-info, .dr-sidecard .btn-success, .dr-sidecard .btn-info { border-color: var(--dr-accent); background: var(--dr-accent); color: var(--dr-on-accent); box-shadow: 0 6px 16px rgba(var(--dr-accent-rgb), .25); } .dr-side .btn-success:hover, .dr-sidecard .btn-success:hover { background: var(--dr-accent); filter: brightness(1.08); } .dr-sidecard__body .col-button-left, .dr-sidecard__body .col-sm-12 { float: none; padding: 0; width: auto; } .dr-card__head .dr-card__tools .btn-sm { white-space: nowrap; } /* Pill colors by data-status (no JS needed) */ /* DataTables chrome inside flush cards */ .dr-dt-filter { display: none; } .dr-dt-foot { margin-top: 0; } .dr-dt-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-left: auto; } .dr-dt-foot .dataTables_info { padding: 0; } .dr-dt-foot .dataTables_length { float: none; padding: 0; } .dr-dt-foot .dataTables_length label { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; font-weight: 600; } .dr-dt-foot .dataTables_paginate { padding: 0; } .dr-dt-foot .pagination { margin: 0; } .dr-table-shell > .dataTables_wrapper > .dr-table-foot { border-radius: 0; } .dr-auth__aside-foot { margin-top: auto; color: var(--dr-ink-3); font-size: 12px; font-weight: 600; } /* phone field (intl-tel-input) inside draisap controls */ .intl-tel-input { width: 100%; } .intl-tel-input .country-list { border: 1px solid var(--dr-line); border-radius: 12px; background: var(--dr-surface); color: var(--dr-ink); box-shadow: var(--dr-shadow-card); } .intl-tel-input .country-list .country.highlight { background: var(--dr-accent-tint); } .intl-tel-input .country-list .dial-code { color: var(--dr-ink-3); } .intl-tel-input .selected-dial-code { color: var(--dr-ink-2); } .intl-tel-input.separate-dial-code .selected-flag { background: transparent; } .md-editor > .md-footer { padding: 6px 12px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 12px; } .md-editor > .md-preview { background: var(--dr-surface); color: var(--dr-ink); padding: 12px 14px; } .md-editor > textarea.form-control, .md-editor > textarea.md-input { background: var(--dr-surface) !important; color: var(--dr-ink) !important; } .md-editor .btn-toolbar .btn-primary, .md-editor .btn-toolbar .btn-primary:hover { background: var(--dr-accent); color: var(--dr-on-accent); } .dr-sidecard .label, .dr-sidecard .status { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; } .dr-sidecard .label[style*="background"] { color: #fff; } .dr-sidecard .label[class*="requestor-type"] { background: var(--dr-accent-tint); color: var(--dr-accent); margin-left: 4px; } .hidden { display: none !important; } .dr-switch-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } @media (max-width: 640px) { .dr-switch-list--2 { grid-template-columns: minmax(0, 1fr); } } .dr-card--flush > .dr-list--flush { display: block; margin: 0; border-top: 1px solid var(--dr-line-soft); } .dr-card--flush > .dr-list--flush .dr-row { border: 0; border-bottom: 1px solid var(--dr-line-soft); border-radius: 0; padding: 14px 20px; box-shadow: none; } .dr-card--flush > .dr-list--flush .dr-row:last-child { border-bottom: 0; } .dr-row__icon.dr-avatar { width: 38px; height: 38px; font-size: 12px; font-weight: 800; } /* Powered-by line injected by framework/portal-functions.php */ .wbams-powered-by { margin: 8px 0 24px; text-align: center; color: var(--dr-ink-3, #8a8f9c); font-size: 12px; } .wbams-powered-by a { color: inherit; text-decoration: none; font-weight: 600; } .wbams-powered-by a:hover { color: var(--dr-accent, #4f46e5); } /* DataTables empty row → empty-state look */ .dr-table td.dataTables_empty, table.dataTable td.dataTables_empty { padding: 34px 20px !important; text-align: center; color: var(--dr-ink-2); font-weight: 600; } .field-error-msg { display: none; } /* ---- Responsive pass ---- */ @media (max-width: 860px) { .dr-auth__card, .dr-auth__card--wide { grid-template-columns: minmax(0, 1fr); } .dr-auth__card--wide .dr-auth__main { padding: 26px; } } @media (max-width: 640px) { .dr-auth__points, .dr-auth__aside-copy p { display: none; } .dr-auth__aside { gap: 14px; padding: 22px 22px 18px; } .dr-auth__aside-copy h2 { font-size: 20px; margin-bottom: 0; } .dr-auth__frame { padding: 12px; } } /* phone header: keep the logo, tighten the icon row */ @media (max-width: 640px) { .dr-header__inner { gap: 10px; } .dr-brand { flex: 0 0 auto; } .dr-brand img { max-height: 30px; max-width: 128px; object-fit: contain; object-position: left center; } .dr-header__end { flex: 1 1 auto; justify-content: flex-end; gap: 6px; min-width: 0; } .dr-header__end .dr-iconbtn, .dr-header__end .dr-account-btn, .dr-header__end .dr-lang-btn { width: 36px; height: 36px; padding: 0; } .dr-header__end .dr-account-btn { width: auto; padding: 0 6px; } .dr-header__end [data-dr-theme-toggle], .dr-header__end .dr-lang-btn { display: none; } /* phone layout: main content first, sidebar cards after it */ .dr-layout--side .dr-side, .dr-layout--side-right .dr-side { order: 2; } .dr-layout--side .dr-content, .dr-layout--side-right .dr-content { order: 1; } .dr-crumbs { font-size: 12px; } } @media (max-width: 640px) { .alert > .btn, .alert > a.btn, .alert .pull-right, .alert .float-right { float: none !important; display: flex; margin: 10px 0 0; width: 100%; justify-content: center; } .dr-home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .dr-home-stats .dr-stat { padding: 12px; gap: 10px; } .dr-home-stats .dr-stat__icon { width: 36px; height: 36px; font-size: 14px; } .dr-home-stats .dr-stat__copy strong { font-size: 19px; } .dr-home-stats .dr-stat__copy span { font-size: 11.5px; } } @media (max-width: 640px) { .dr-doc__head { grid-template-columns: minmax(0, 1fr); gap: 12px; } .dr-doc__status { flex-direction: row; align-items: center; justify-content: space-between; } .dr-doc__amount { font-size: 24px; } .dr-doc__title { font-size: 22px; } .dr-doc__parties { gap: 16px; margin-top: 16px; } } /* mass payment */ .dr-masspay__invoice td { background: var(--dr-soft); font-weight: 800; } .dr-masspay__invoice a { color: var(--dr-ink); text-decoration: none; } .dr-masspay__invoice a i { margin-right: 6px; color: var(--dr-accent); } .dr-masspay__table td { padding: 12px 16px; } .dr-masspay__table .dr-masspay__invoice td { padding: 12px 16px; } .dr-masspay__totals td { padding: 10px 16px; color: var(--dr-ink-2); font-weight: 600; border-top: 1px solid var(--dr-line-soft); line-height: 1.4; } .dr-masspay__totals tr:first-child td { padding-top: 14px; border-top: 2px solid var(--dr-line); } .dr-masspay__due td { padding: 14px 16px 18px; color: var(--dr-ink); font-size: 15px; background: var(--dr-soft); } .dr-masspay__amount { font-size: 24px !important; letter-spacing: -.02em; } .dr-facts--1 { grid-template-columns: minmax(0, 1fr); } /* affiliates */ .dr-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 18px; } @media (max-width: 760px) { .dr-stats--3 { grid-template-columns: minmax(0, 1fr); } } .dr-copy-row { display: flex; gap: 10px; } .dr-copy-row .form-control { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; } .dr-copy-row .btn { flex: 0 0 auto; white-space: nowrap; } .dr-checklist { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; } .dr-checklist li { display: flex; gap: 10px; align-items: flex-start; color: var(--dr-ink-2); font-size: 13.5px; } .dr-checklist li i { margin-top: 2px; color: var(--dr-ok); } .dr-affiliate-code textarea, .dr-affiliate-code .form-control { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; } @media (max-width: 480px) { .dr-copy-row { flex-wrap: wrap; } .dr-copy-row .btn { width: 100%; } } /* two-factor setup modal (core markup) */ .twofa-module { display: grid; grid-template-columns: auto 56px minmax(0, 1fr); align-items: center; gap: 14px; margin: 10px 0; padding: 14px 16px; border: 1px solid var(--dr-line); border-radius: 14px; background: var(--dr-surface); cursor: pointer; } .twofa-module.active { border-color: var(--dr-accent); background: var(--dr-accent-tint); } .twofa-module .col-radio input { margin: 0; } .twofa-module .col-logo img { display: block; width: 56px; height: 56px; object-fit: contain; border-radius: 12px; background: #fff; } .twofa-module .col-description { color: var(--dr-ink-2); font-size: 13px; } .twofa-module .col-description strong { display: block; color: var(--dr-ink); font-size: 14px; } .twofa-setup p[align="center"] { margin: 16px 0 0; text-align: right; } /* payment method form */ .dr-billing-contacts .dr-choice { padding: 10px 14px; } .dr-paymethod__types { margin-bottom: 18px; } .dr-paymethod__card .dr-paymethod__number { grid-column: 1 / -1; } .dr-paymethod .cc-details { margin-top: 4px; } .dr-paymethod .fieldgroup-bankaccount .dr-field + .dr-fields { margin-top: 12px; } .dr-paymethod .dr-card__foot { margin-top: 20px; } .dr-field__optional { margin-left: 6px; color: var(--dr-ink-3); font-weight: 500; font-size: 12px; } .dr-field__hint-link { margin-left: 8px; padding: 0; border: 0; background: transparent; color: var(--dr-accent); font-size: 12px; font-weight: 700; cursor: pointer; } .dr-paymethod .field-error-msg { margin-top: 4px; } .dr-paymethod .cc-number-field { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; } #modalBillingAddress .dr-fields--2 { align-items: start; } /* ---- Utility pages (access, switch account, invites, forwarding) ---- */ .dr-card--narrow { max-width: 560px; margin-left: auto; margin-right: auto; } .dr-newsletter-result__email { margin-top: 6px; color: var(--dr-ink); font-weight: 700; } .dr-card--center { text-align: center; } .dr-card--center .dr-card__head { justify-content: center; text-align: left; } .dr-frame { display: block; width: 100%; min-height: 500px; margin: 0; border: 1px solid var(--dr-line-card); border-radius: 14px; background: var(--dr-surface); } .dr-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; } .dr-progress { position: relative; width: 220px; max-width: 100%; height: 6px; margin-top: 10px; border-radius: 999px; background: var(--dr-soft); overflow: hidden; } .dr-progress > span { position: absolute; inset: 0; width: 45%; border-radius: 999px; background: linear-gradient(90deg, var(--dr-teal, var(--dr-accent)), var(--dr-accent)); animation: dr-progress-slide 1.4s ease-in-out infinite; } @keyframes dr-progress-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(240%); } } .dr-records-limit { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; } .dr-records-limit label { margin: 0; color: var(--dr-ink-2); font-size: 13px; font-weight: 700; } .dr-records-limit .form-control { width: auto; min-width: 90px; } @media (max-width: 767px) { .dr-grid-2 { grid-template-columns: minmax(0, 1fr); } } /* ---- Invoice payment ---- */ .dr-pay__methods { margin-bottom: 0; } .dr-pay__newcard, .dr-pay__newbank, .dr-pay__cvv, .dr-pay__billing, .dr-pay__newaddress { margin-top: 18px; } .dr-pay__cvv .dr-field { max-width: 240px; } .dr-pay__cvv .dr-field__hint-link { float: right; margin-left: 0; } .dr-pay .cc-details + .cc-details, .dr-pay .cc-details .dr-switch-row { margin-top: 0; } .dr-pay .dr-switch-row { margin-top: 18px; } .dr-pay #inputDescriptionContainer { margin-top: 18px; } .dr-pay .field-error-msg { display: none; margin-top: 4px; color: var(--dr-bad); font-size: 12px; font-weight: 600; } .dr-pay .dr-field.has-error .form-control { border-color: var(--dr-bad); } .dr-pay__summary .dr-card__head { padding: 18px 20px 14px; } .dr-pay__lines { list-style: none; margin: 0; padding: 12px 20px; display: grid; gap: 8px; border-top: 1px solid var(--dr-line-soft); font-size: 13px; } .dr-pay__lines li { display: flex; justify-content: space-between; gap: 12px; } .dr-pay__lines li > span:first-child { color: var(--dr-ink-2); min-width: 0; } .dr-pay__lines li > span:last-child { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .dr-pay__lines--totals { background: var(--dr-soft); } .dr-pay__lines--totals li:last-child { padding-top: 8px; border-top: 1px solid var(--dr-line); } .dr-pay__due { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 20px 16px; border-top: 1px solid var(--dr-line); } .dr-pay__due small { color: var(--dr-ink-2); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .dr-pay__due strong { font-size: 22px; font-weight: 850; letter-spacing: -.02em; } .dr-pay .gateway-errors { margin-bottom: 20px; } #frmRemoteCardProcess { display: grid; gap: 12px; } /* ---- Captcha ---- */ .dr-captcha { margin: 18px 0 0; } .dr-captcha__recaptcha { display: flex; justify-content: center; min-height: 78px; } /* No frame: this sits inside a card already, and a bordered, filled box within one is a card inside a card. The group is set off by the rule above it and its own spacing. */ .dr-captcha__image-box { display: grid; justify-items: center; gap: 10px; padding: 18px 0 0; border-top: 1px solid var(--dr-line-soft); text-align: center; } .dr-captcha__label { margin: 0; color: var(--dr-ink-2); font-size: 12.5px; font-weight: 600; } .dr-captcha__image img { display: block; max-width: 100%; height: auto; border-radius: 10px; } .dr-captcha__input { width: 100%; max-width: 200px; } .dr-captcha__input .form-control { text-align: center; letter-spacing: .2em; font-weight: 700; } /* ---- Popup windows (email viewer) ---- */ body.dr-popup { min-height: 100vh; margin: 0; padding: 20px; background: var(--dr-bg); } .dr-popup__shell { max-width: 960px; margin: 0 auto; } .dr-popup__card .dr-card__title { font-size: 18px; } .dr-popup__attachments { display: flex; flex-wrap: wrap; gap: 6px 14px; } .dr-popup__attachments i { margin-right: 4px; color: var(--dr-accent); } .dr-popup__body { border-top: 1px solid var(--dr-line-soft); } .dr-popup__frame { display: block; width: 100%; height: 480px; min-height: 320px; border: 0; background: #fff; overflow: hidden; } /* ---- Markdown guide (editor help modal) ---- */ .dr-md-guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .dr-md-guide__item { min-width: 0; padding: 14px 16px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-soft); } .dr-md-guide__item--wide { grid-column: 1 / -1; } .dr-md-guide__item h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; } .dr-md-guide__item pre { margin: 0; padding: 10px 12px; overflow-x: auto; border-radius: 8px; background: var(--dr-surface); color: var(--dr-ink); font-size: 12px; line-height: 1.55; white-space: pre; } .dr-md-guide__item pre em { color: var(--dr-ink-2); font-style: italic; } @media (max-width: 600px) { .dr-md-guide { grid-template-columns: minmax(0, 1fr); } } /* ---- Knowledgebase suggestions (while writing a ticket) ---- */ .dr-kb-suggest { margin-bottom: 20px; padding: 16px 18px; border: 1px solid rgba(var(--dr-accent-rgb), .3); border-radius: 14px; background: var(--dr-accent-tint); } .dr-kb-suggest__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .dr-kb-suggest__head strong { display: block; font-size: 14px; } .dr-kb-suggest__head small { display: block; color: var(--dr-ink-2); font-size: 12.5px; } .dr-kb-suggest__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--dr-surface); color: var(--dr-accent); flex: none; } .dr-kb-suggest__list { display: grid; gap: 8px; } .dr-kb-suggest__item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); color: var(--dr-ink); } .dr-kb-suggest__item:hover { border-color: rgba(var(--dr-accent-rgb), .45); text-decoration: none; color: var(--dr-ink); } .dr-kb-suggest__item > i { margin-top: 2px; color: var(--dr-accent); } .dr-kb-suggest__item strong { display: block; font-size: 13.5px; } .dr-kb-suggest__item small { display: block; color: var(--dr-ink-2); font-size: 12.5px; line-height: 1.5; } /* ---- Usage billing ---- */ .dr-usage__pricing-btn { display: inline-flex; margin-top: 6px; } .dr-usage__included { display: block; color: var(--dr-ink-2); } .dr-social { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--dr-soft); color: var(--dr-ink-2); } .dr-social:hover { color: var(--dr-accent); text-decoration: none; } /* ---- Ticket feedback ---- */ .dr-feedback { display: grid; gap: 20px; } .dr-rating { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; } .dr-rating__item { position: relative; margin: 0; cursor: pointer; } .dr-rating__item input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .dr-rating__item span { display: flex; align-items: center; justify-content: center; height: 40px; border: 1px solid var(--dr-line); border-radius: 10px; background: var(--dr-surface); font-weight: 800; font-size: 13.5px; color: var(--dr-ink-2); transition: border-color .15s ease, background .15s ease, color .15s ease; } .dr-rating__item:hover span { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-ink); } .dr-rating__item input:checked + span { border-color: var(--dr-accent); background: var(--dr-accent); color: #fff; } .dr-rating__item input:focus-visible + span { box-shadow: 0 0 0 3px rgba(var(--dr-accent-rgb), .25); } @media (max-width: 600px) { .dr-rating { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ---- Plan change (upgrade / downgrade) ---- */ .dr-card__eyebrow { display: block; margin-bottom: 2px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .dr-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 20px; } .dr-plans__empty { grid-column: 1 / -1; } .dr-plan { display: flex; flex-direction: column; margin: 0; } .dr-plan.is-recommended { border-color: rgba(var(--dr-accent-rgb), .55); box-shadow: 0 10px 30px rgba(var(--dr-accent-rgb), .12); } .dr-plan.is-current { border-color: var(--dr-teal); } .dr-plan__body { flex: 1; padding: 20px; } .dr-plan__flag { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; background: var(--dr-teal-tint); color: var(--dr-teal); font-size: 11.5px; font-weight: 800; } .dr-plan__flag--rec { background: var(--dr-accent-tint); color: var(--dr-accent); } .dr-plan__group { display: block; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .dr-plan__name { margin: 4px 0 10px; font-size: 18px; font-weight: 850; letter-spacing: -.01em; } .dr-plan__desc { color: var(--dr-ink-2); font-size: 13px; line-height: 1.6; } .dr-plan__desc ul { padding-left: 18px; margin: 0; } .dr-plan__desc ul.custom-features, .dr-plan__desc .product-features { list-style: none; padding: 0; } .dr-plan__desc p:last-child { margin-bottom: 0; } .dr-plan__features { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--dr-line-soft); display: grid; gap: 8px; font-size: 13px; } .dr-plan__features li { display: flex; justify-content: space-between; gap: 12px; } .dr-plan__features li > span { color: var(--dr-ink-2); } .dr-plan__yes { color: var(--dr-ok); } .dr-plan__no { color: var(--dr-bad); } .dr-plan__foot { display: grid; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--dr-line); background: var(--dr-soft); border-radius: 0 0 var(--dr-radius-card, 16px) var(--dr-radius-card, 16px); } .dr-plan__foot form { display: grid; gap: 10px; } .dr-plan__price { font-size: 18px; font-weight: 850; } .dr-plan__price small { color: var(--dr-ink-2); font-size: 12.5px; font-weight: 600; } .dr-plan__qty { align-items: center; } .dr-plan__qty > span { color: var(--dr-ink-2); font-size: 13px; font-weight: 700; } .dr-plan__qty .form-control { max-width: 110px; } .dr-plan .btn-block { width: 100%; } .dr-configopts { display: grid; gap: 12px; } .dr-configopt { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px 18px; align-items: center; padding: 14px 16px; border: 1px solid var(--dr-line-card); border-radius: 14px; background: var(--dr-soft); } .dr-configopt__name { grid-column: 1 / -1; font-size: 14px; font-weight: 800; } .dr-configopt__current small, .dr-configopt__new small { display: block; margin-bottom: 6px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .dr-configopt__current > span { display: block; padding: 9px 12px; border: 1px dashed var(--dr-line); border-radius: 10px; color: var(--dr-ink-2); font-weight: 600; font-size: 13.5px; background: var(--dr-surface); } .dr-configopt__arrow { color: var(--dr-ink-3); } .dr-configopt__qty { align-items: center; } .dr-configopt__qty .form-control { max-width: 110px; } .dr-configopt__qty > span { color: var(--dr-ink-2); font-size: 13px; font-weight: 700; } .dr-configopt .dr-switch-row { margin: 0; } .dr-upgrade__arrow { margin: 0 6px; color: var(--dr-ink-3); font-size: 11px; } .dr-card--flush > .dr-upgrade__note { margin: 16px 20px 20px; } .dr-promo-applied { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--dr-ok-tint); color: var(--dr-ok); } .dr-promo-applied strong { display: block; color: var(--dr-ink); font-size: 13px; } .dr-promo-applied small { display: block; color: var(--dr-ink-2); font-size: 12px; } @media (max-width: 767px) { .dr-configopt { grid-template-columns: minmax(0, 1fr); } .dr-configopt__arrow { transform: rotate(90deg); justify-self: center; } } .dr-tweets { display: grid; gap: 10px; } .dr-tweet { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); } .dr-tweet__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--dr-accent-tint); color: var(--dr-accent); flex: none; } .dr-tweet__text { margin: 0 0 2px; font-size: 13.5px; } .dr-tweet__date { color: var(--dr-ink-3); font-size: 12px; } .dr-tweets__follow { margin: 4px 0 0; color: var(--dr-ink-2); font-size: 13px; } /* ---- OAuth / SSO ---- */ .dr-oauth__frame { width: min(560px, 100%); gap: 16px; align-content: center; } .dr-oauth__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .dr-oauth__bar .dr-brand img { max-height: 36px; } .dr-oauth__bar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .dr-oauth__who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--dr-ink-2); font-size: 12.5px; } .dr-oauth__link { padding: 0; border: 0; background: transparent; color: var(--dr-accent); font-size: 12.5px; font-weight: 700; cursor: pointer; } .dr-oauth__card { padding: 30px; } .dr-oauth__applogo { margin-bottom: 18px; text-align: center; } .dr-oauth__applogo img { max-height: 64px; max-width: 200px; } .dr-oauth__title { margin: 0 0 8px; font-size: 22px; font-weight: 850; letter-spacing: -.01em; } .dr-oauth__lead { margin: 0 0 14px; color: var(--dr-ink-2); font-size: 13.5px; } .dr-oauth__grants { margin-bottom: 22px; } .dr-oauth__actions { justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--dr-line-soft); } .dr-oauth__challenge { margin-top: 12px; } .dr-oauth__foot { color: var(--dr-ink-3); font-size: 12.5px; text-align: center; } .dr-providers { display: flex; flex-wrap: wrap; gap: 8px; } .dr-providers .btn { display: inline-flex; align-items: center; gap: 8px; } .dr-providers__hint { margin: -8px 0 12px; color: var(--dr-ink-2); font-size: 12.5px; text-align: center; } .providerLinkingFeedback:empty { display: none; } .providerLinkingFeedback { margin-bottom: 12px; } .dr-kb-article__tools { display: inline-flex; align-items: center; gap: 8px; } .dr-kb-article__tools .btn { min-height: 34px; } /* ---- Header dropdown panes point at their trigger (same caret as the admin) ---- */ .dr-header .dropdown-menu { overflow: visible; margin-top: 4px; } .dr-header .dropdown-menu::before { content: ""; position: absolute; top: -7px; left: 22px; width: 12px; height: 12px; border-left: 1px solid var(--dr-line); border-top: 1px solid var(--dr-line); border-radius: 3px 0 0 0; background: var(--dr-surface); transform: rotate(45deg); } .dr-header .dropdown-menu-right::before { left: auto; right: 22px; } /* Client service: store extras, delivery & tracking */ .dr-service__img { display: inline-flex; width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: var(--dr-surface-2, var(--dr-accent-tint)); flex: none; } .dr-service__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .dr-address { line-height: 1.45; font-weight: 600; } .dr-shipments { margin-top: 16px; } .dr-shipments .dr-row__copy strong { white-space: normal; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dr-shipments .dr-row__copy small + small { margin-top: 2px; } .dr-row__action { flex: none; align-self: center; } .dr-muted { color: var(--dr-ink-2); font-size: 13.5px; } @media (max-width: 640px) { .dr-shipments .dr-row { flex-wrap: wrap; } .dr-row__action { width: 100%; text-align: center; } } .dr-code--inline { display: inline-block; margin: 0; padding: 2px 8px; font-size: 13px; letter-spacing: .04em; border-radius: 8px; font-weight: 700; } /* ------------------------------------------------------------------ * * Client email (mailboxes.tpl) * ------------------------------------------------------------------ */ .dr-mailbox__actions { display: inline-flex; gap: 8px; flex-wrap: wrap; } .dr-mailbox__actions .btn { border-radius: var(--dr-radius-pill); } .dr-mailbox__panel { margin: 0 0 10px; padding: 16px 18px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-control); background: var(--dr-surface-2); } .dr-mailbox__panel[hidden] { display: none; } .dr-mailbox__panel--danger { border-color: var(--dr-bad); background: var(--dr-bad-tint); } .dr-mailbox__panel > label { display: block; margin-bottom: 6px; font-weight: 700; color: var(--dr-ink); } .dr-mailbox__panel > small { display: block; margin-top: 6px; color: var(--dr-ink-2); } .dr-mailbox__panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 14px; flex-wrap: wrap; } .dr-mailbox__panel-actions .dr-check { margin: 0; margin-right: auto; } /* The generated password is shown once and never again, so it is set apart from the page rather than being one more line of body text a client might scroll past. */ .dr-mailbox-secret__value { padding: 14px 16px; border: 1px dashed var(--dr-control-line); border-radius: var(--dr-radius-control); background: var(--dr-surface); text-align: center; } .dr-mailbox-secret__value code { font-family: var(--dr-mono); font-size: 18px; letter-spacing: .04em; color: var(--dr-ink); background: none; user-select: all; } .dr-input-group { display: flex; align-items: stretch; } .dr-input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1 1 auto; min-width: 0; } .dr-input-group__suffix { display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--dr-control-line); border-left: 0; border-radius: 0 var(--dr-radius-control) var(--dr-radius-control) 0; background: var(--dr-soft); color: var(--dr-ink-2); white-space: nowrap; } .dr-input--compact { max-width: 160px; } .dr-form__actions { display: flex; justify-content: flex-end; margin-top: 18px; } /* ===== Tables become cards on phones ===== Below 640px a row is stacked as "caption / value" pairs inside its own card, so nothing is clipped and nothing has to be scrolled sideways. draisap.js supplies the captions. */ @media (max-width: 640px) { .dr-table-shell { overflow-x: visible; } table.dr-table { display: block; } table.dr-table > thead { display: none; } table.dr-table > tbody { display: grid; gap: 10px; } table.dr-table > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--dr-line); border-radius: 12px; background: var(--dr-surface, #fff); } table.dr-table > tbody > tr > td { display: flex; flex-wrap: wrap; min-height: 42px; align-items: baseline; column-gap: 10px; row-gap: 3px; width: auto !important; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--dr-line-soft); overflow-wrap: break-word; text-align: left !important; white-space: normal !important; } table.dr-table > tbody > tr > td:last-child { border-bottom: 0; } table.dr-table > tbody > tr > td::before { content: attr(data-label); flex: 0 0 34%; max-width: 34%; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; } table.dr-table > tbody > tr > td:not([data-label])::before, table.dr-table > tbody > tr > td.dr-table__actions::before { content: none; } table.dr-table > tbody > tr > td.dr-table__actions { justify-content: flex-end; } table.dr-table > tbody > tr > td:not([data-label]):empty { display: none; } table.dr-table > tbody > tr > td.dataTables_empty { display: block; } table.dr-table > tfoot > tr > th { display: block; text-align: left; } } /* ---------------------------------------------------------------- knowledgebase A help centre: a search band, a catalog of category tiles, article cards with an excerpt and views, and an article page with a reading column, an automatic table of contents, tag chips and a "was this helpful" block. */ .dr-kb-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 46%); align-items: center; gap: 22px; margin-bottom: 22px; padding: 26px 28px; overflow: hidden; background: linear-gradient(120deg, var(--dr-accent-tint), var(--dr-surface) 70%); } .dr-kb-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--dr-accent-rgb), .16), transparent 70%); pointer-events: none; } .dr-kb-hero__copy { position: relative; z-index: 1; min-width: 0; } .dr-kb-hero__copy .dr-hero__eyebrow { color: var(--dr-accent); } .dr-kb-hero__title { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; } .dr-kb-hero__lead { margin: 0; color: var(--dr-ink-2); font-size: 13.5px; } .dr-kb-hero__lead a { color: var(--dr-ink-2); font-weight: 600; } .dr-kb-hero__form { position: relative; z-index: 1; } .dr-kb-hero__field { position: relative; display: block; flex: 1 1 auto; min-width: 0; } .dr-kb-hero__field .form-control { width: 100%; } .dr-kb-hero__search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--dr-ink-3); font-size: 14px; pointer-events: none; } .dr-kb-hero__search .form-control { padding-left: 42px; } .dr-kb-section { margin-bottom: 26px; } .dr-kb-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 14px; } .dr-kb-section__title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; } .dr-kb-section__flame { margin-right: 4px; color: var(--dr-amber); } .dr-kb-section__lead { margin: 2px 0 0; color: var(--dr-ink-3); font-size: 12.5px; } .dr-kb-cat-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: -8px 0 22px; padding: 0 4px; color: var(--dr-ink-2); font-size: 14px; } .dr-kb-cat-intro p { margin: 0; max-width: 720px; } /* category tiles */ .dr-kb-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } .dr-kb-cat { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); color: var(--dr-ink); box-shadow: var(--dr-shadow-card); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .dr-kb-cat:hover { transform: translateY(-3px); border-color: rgba(var(--dr-accent-rgb), .45); box-shadow: var(--dr-shadow-pop); color: var(--dr-ink); text-decoration: none; } .dr-kb-cat__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 18px; } .dr-kb-cat--1 .dr-kb-cat__icon { background: var(--dr-teal-tint); color: var(--dr-teal); } .dr-kb-cat--2 .dr-kb-cat__icon { background: var(--dr-violet-tint); color: var(--dr-violet); } .dr-kb-cat--3 .dr-kb-cat__icon { background: var(--dr-amber-tint); color: var(--dr-amber); } .dr-kb-cat--4 .dr-kb-cat__icon { background: var(--dr-ok-tint); color: var(--dr-ok); } .dr-kb-cat--5 .dr-kb-cat__icon { background: var(--dr-info-tint); color: var(--dr-info); } .dr-kb-cat__copy { display: block; flex: 1 1 auto; min-width: 0; } .dr-kb-cat__name { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; } .dr-kb-cat__desc { display: block; margin-top: 4px; color: var(--dr-ink-2); font-size: 13px; line-height: 1.5; } .dr-kb-cat__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--dr-line-soft); color: var(--dr-ink-3); font-size: 12.5px; font-weight: 700; } .dr-kb-cat__meta i { color: var(--dr-accent); transition: transform .18s ease; } .dr-kb-cat:hover .dr-kb-cat__meta i { transform: translateX(3px); } /* article cards */ .dr-kb-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .dr-kb-art { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); color: var(--dr-ink); box-shadow: var(--dr-shadow-card); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .dr-kb-art:hover { transform: translateY(-2px); border-color: rgba(var(--dr-accent-rgb), .45); box-shadow: var(--dr-shadow-pop); color: var(--dr-ink); text-decoration: none; } .dr-kb-art__icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--dr-soft); color: var(--dr-accent); font-size: 15px; } .dr-kb-art__copy { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; } .dr-kb-art__title { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.35; } .dr-kb-art__summary { display: block; margin-top: 5px; color: var(--dr-ink-2); font-size: 13px; line-height: 1.55; } .dr-kb-art__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; color: var(--dr-ink-3); font-size: 12px; font-weight: 600; } .dr-kb-art__read { color: var(--dr-accent); font-weight: 700; } .dr-kb-art__read i { transition: transform .18s ease; } .dr-kb-art:hover .dr-kb-art__read i { transform: translateX(3px); } /* article page */ .dr-kb-article-card { padding: 24px 28px; } .dr-kb-article__cat { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent) !important; font-size: 12px; font-weight: 700; } .dr-kb-article__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: stretch; } .dr-kb-article__layout:has(.dr-kb-toc:not([hidden])) { grid-template-columns: minmax(0, 1fr) 220px; } /* the reading column sits centred in its card; left-aligned it left a blank third of the card on wide screens */ .dr-kb-article { max-width: 800px; margin-inline: auto; font-size: 16px; line-height: 1.75; color: var(--dr-ink); } .dr-kb-article p { margin: 0 0 1em; } .dr-kb-article h1, .dr-kb-article h2, .dr-kb-article h3, .dr-kb-article h4 { margin: 1.6em 0 .5em; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; scroll-margin-top: 90px; } .dr-kb-article h1 { font-size: 26px; } .dr-kb-article h2 { font-size: 21px; } .dr-kb-article h3 { font-size: 17px; } .dr-kb-article h4 { font-size: 15px; } .dr-kb-article ul, .dr-kb-article ol { padding-left: 1.4em; margin: 0 0 1em; } .dr-kb-article li { margin-bottom: .35em; } .dr-kb-article blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 3px solid var(--dr-accent); border-radius: 0 12px 12px 0; background: var(--dr-soft); color: var(--dr-ink-2); } .dr-kb-article pre { margin: 1.2em 0; padding: 14px 16px; border-radius: 12px; background: var(--dr-surface-2); font-size: 13px; overflow: auto; } .dr-kb-article code { padding: 2px 6px; border-radius: 6px; background: var(--dr-surface-2); font-family: var(--dr-mono); font-size: .92em; } .dr-kb-article pre code { padding: 0; background: transparent; } .dr-kb-article table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 14px; } .dr-kb-article th, .dr-kb-article td { padding: 10px 12px; border-bottom: 1px solid var(--dr-line-soft); text-align: left; } .dr-kb-article th { background: var(--dr-soft); font-weight: 700; } .dr-kb-article img { max-width: 100%; height: auto; border-radius: 12px; } .dr-kb-article .callout { margin: 1.2em 0; padding: 14px 16px; border: 1px solid rgba(var(--dr-accent-rgb), .3); border-radius: 12px; background: var(--dr-accent-tint); } .dr-kb-toc { position: sticky; top: 90px; align-self: start; padding: 14px 16px; border: 1px solid var(--dr-line-card); border-radius: 14px; background: var(--dr-soft); } .dr-kb-toc__title { display: block; margin-bottom: 8px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .dr-kb-toc__list { margin: 0; padding: 0; list-style: none; } .dr-kb-toc__list li { margin: 0; } .dr-kb-toc__list a { display: block; padding: 5px 0 5px 10px; border-left: 2px solid transparent; color: var(--dr-ink-2); font-size: 13px; line-height: 1.4; } .dr-kb-toc__list a:hover, .dr-kb-toc__list a.is-active { border-left-color: var(--dr-accent); color: var(--dr-accent); text-decoration: none; } .dr-kb-toc__list li.is-sub a { padding-left: 22px; font-size: 12.5px; } .dr-kb-article__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--dr-line-soft); color: var(--dr-ink-3); font-size: 12.5px; } .dr-kb-tag { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--dr-line-card); border-radius: 999px; background: var(--dr-surface); color: var(--dr-ink-2); font-size: 12px; font-weight: 600; } .dr-kb-tag:hover { border-color: rgba(var(--dr-accent-rgb), .45); color: var(--dr-accent); text-decoration: none; } .dr-kb-helpful { margin: 22px -28px -24px; padding: 16px 28px; border-top: 1px solid var(--dr-line); border-radius: 0 0 var(--dr-radius-card) var(--dr-radius-card); background: var(--dr-soft); } .dr-kb-helpful__form { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .dr-kb-helpful__copy { display: flex; flex-direction: column; gap: 2px; } .dr-kb-helpful__copy strong { font-size: 14px; } .dr-kb-helpful__copy span { color: var(--dr-ink-2); font-size: 12.5px; } .dr-kb-helpful__buttons { display: flex; gap: 8px; } @media (max-width: 991.98px) { .dr-kb-hero { grid-template-columns: minmax(0, 1fr); padding: 22px; } .dr-kb-article__layout:has(.dr-kb-toc:not([hidden])) { grid-template-columns: minmax(0, 1fr); } .dr-kb-toc { position: static; order: -1; } } @media (max-width: 575.98px) { .dr-kb-hero__search { flex-wrap: wrap; } .dr-kb-hero__search .btn { width: 100%; } .dr-kb-article-card { padding: 20px 18px; } .dr-kb-helpful { margin: 18px -18px -20px; padding: 14px 18px; } .dr-kb-articles { grid-template-columns: minmax(0, 1fr); } .dr-kb-cat-intro { flex-direction: column; } } /* Contact page: on wide screens the aside stretches to the form's height and the map takes whatever is left under the address card, so the map's bottom edge sits flush with the form's. On narrow screens the map keeps its fixed height. */ @media (min-width: 1024px) { .dr-contact-layout { align-items: stretch; margin-bottom: 18px; } .dr-contact-layout > .dr-card, .dr-contact-layout .dr-side > .dr-card:last-child { margin-bottom: 0; } .dr-contact-layout .dr-side { display: flex; flex-direction: column; align-content: stretch; } .dr-contact-layout .dr-contact-map { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 260px; } .dr-contact-layout .dr-contact-map iframe { flex: 1 1 auto; height: auto; min-height: 210px; } .dr-contact-layout .dr-contact-map > div:not(.dr-contact-map__caption) { flex: 1 1 auto; min-height: 0; } } /* ---------------------------------------------------------------- article shell The card an update or a knowledgebase article is read in: media, kicker, body column, table of contents, share row. The two systems share only this shell; their content blocks and template treatments are separate (below). */ .dr-article { padding: 0; overflow: hidden; overflow: clip; } /* clip, not hidden: a hidden overflow would stop the table of contents sticking */ .dr-article__media { margin: 0; overflow: hidden; background: var(--dr-soft); } .dr-article__media img { display: block; width: 100%; aspect-ratio: 21 / 9; max-height: 460px; object-fit: cover; } .dr-article__inner { padding: 22px 28px 0; } .dr-article__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--dr-line-soft); } .dr-article__kicker .dr-news__kind i { margin-right: 5px; font-size: 10px; } .dr-article__readtime { color: var(--dr-ink-3); font-size: 12.5px; font-weight: 600; } .dr-article__layout { padding-bottom: 6px; } .dr-article__body { max-width: 800px; margin-inline: auto; } .dr-article__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 22px -28px 0; padding: 14px 28px; border-top: 1px solid var(--dr-line); background: var(--dr-soft); } .dr-article__share { display: inline-flex; align-items: center; gap: 8px; } .dr-article__share-label { margin-right: 4px; color: var(--dr-ink-3); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .dr-article__share .dr-iconbtn { width: 34px; height: 34px; } .dr-article__share .dr-iconbtn.is-done { border-color: var(--dr-ok); color: var(--dr-ok); } .dr-article__notice { display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: var(--dr-amber-tint); color: var(--dr-amber); font-size: 13.5px; font-weight: 700; } .dr-article__notice i { font-size: 18px; } @media (max-width: 767.98px) { .dr-article__inner { padding: 18px 18px 0; } .dr-article__foot { margin: 18px -18px 0; padding: 12px 18px; } .dr-article__notice { padding: 10px 18px; } .dr-article__media img { aspect-ratio: 16 / 9; } } /* Previous / next update: the newsroom read in order rather than one article at a time. Two equal tiles, the second pushed right so a missing neighbour leaves a gap on its own side instead of sliding the other one across the page. */ .dr-update-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 0; } .dr-update-nav__link { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-card); background: var(--dr-panel); color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease; } .dr-update-nav__link--next { text-align: right; } .dr-update-nav__link.is-empty { border: 1px dashed var(--dr-line-soft); background: none; } a.dr-update-nav__link:hover, a.dr-update-nav__link:focus-visible { border-color: var(--dr-accent); transform: translateY(-1px); text-decoration: none; } .dr-update-nav__label { color: var(--dr-ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .dr-update-nav__title { font-size: 15px; font-weight: 700; line-height: 1.35; } .dr-update-nav__date { color: var(--dr-ink-3); font-size: 12.5px; } @media (max-width: 575.98px) { .dr-update-nav { grid-template-columns: 1fr; } .dr-update-nav__link--next { text-align: left; } .dr-update-nav__link.is-empty { display: none; } } /* ================================================================ UPDATES · the newsroom Updates are news: announcements, releases, launches, service status. The body is set larger and looser than documentation, with bold accent blocks. The blocks the Updates editor inserts carry news-* classes and are styled only here. */ .dr-update__body { font-size: 16px; line-height: 1.75; } .dr-update__body h2 { margin: 1.5em 0 .5em; font-size: 22px; letter-spacing: -.015em; scroll-margin-top: 90px; } .dr-update__body h3 { margin: 1.3em 0 .4em; font-size: 17px; scroll-margin-top: 90px; } .dr-update__body p, .dr-update__body ul, .dr-update__body ol { margin: 0 0 1.05em; } .dr-update__body img { max-width: 100%; height: auto; border-radius: 12px; } .dr-update__body blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--dr-accent); color: var(--dr-ink); font-size: 19px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; } .dr-update__body blockquote p { margin: 0 0 6px; } .dr-update__body blockquote footer { margin-top: 6px; color: var(--dr-ink-3); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .dr-update__body table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 14.5px; } .dr-update__body th, .dr-update__body td { padding: 10px 12px; border-bottom: 1px solid var(--dr-line-soft); text-align: left; } .dr-update__body th { background: var(--dr-soft); font-weight: 700; } /* lead */ .dr-update__body .news-deck { margin: 0 0 24px; color: var(--dr-ink-2); font-size: 20px; font-weight: 500; line-height: 1.5; letter-spacing: -.01em; } /* dateline facts */ .dr-update__body .news-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; } .dr-update__body .news-facts p { display: inline-flex; flex-direction: column; gap: 2px; min-width: 140px; margin: 0; padding: 10px 14px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-soft); font-size: 14.5px; line-height: 1.4; } .dr-update__body .news-facts strong { color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } /* heads-up, action required, good news */ .dr-update__body .news-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 1.4em 0; padding: 16px 20px; border-radius: 14px; background: var(--dr-accent-tint); color: var(--dr-ink); } .dr-update__body .news-notice::before { content: "\f05a"; grid-row: 1 / span 9; align-self: start; margin-top: 2px; color: var(--dr-accent); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-size: 20px; font-weight: 900; } .dr-update__body .news-notice > p { grid-column: 2; margin: 0 0 4px; font-size: 15px; } .dr-update__body .news-notice > p:last-child { margin-bottom: 0; } .dr-update__body .news-notice > p:first-child strong { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dr-accent); } .dr-update__body .news-notice--urgent { background: var(--dr-amber-tint); box-shadow: inset 0 0 0 1px rgba(180, 83, 9, .3); } .dr-update__body .news-notice--urgent::before { content: "\f071"; color: var(--dr-amber); } .dr-update__body .news-notice--urgent > p:first-child strong { color: var(--dr-amber); } .dr-update__body .news-notice--good { background: var(--dr-ok-tint); } .dr-update__body .news-notice--good::before { content: "\f058"; color: var(--dr-ok); } .dr-update__body .news-notice--good > p:first-child strong { color: var(--dr-ok); } /* pull quote */ .dr-update__body .news-quote { position: relative; margin: 1.6em 0; padding: 22px 24px 18px 30px; border: 0; border-radius: 16px; background: linear-gradient(135deg, var(--dr-accent-tint), var(--dr-violet-tint)); font-size: 20px; } .dr-update__body .news-quote::before { content: "\f10d"; position: absolute; left: 18px; top: -12px; padding: 0 6px; background: var(--dr-surface); color: var(--dr-accent); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-size: 18px; font-weight: 900; } /* highlights */ .dr-update__body .news-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 1.2em 0; padding: 0; list-style: none; } .dr-update__body .news-highlights > li { margin: 0; padding: 16px 18px; border-radius: 14px; background: linear-gradient(160deg, var(--dr-accent-tint), var(--dr-surface)); border: 1px solid var(--dr-line-card); font-size: 14.5px; line-height: 1.55; } .dr-update__body .news-highlights > li strong { display: block; margin-bottom: 4px; color: var(--dr-ink); font-size: 15.5px; } /* change list & roadmap */ .dr-update__body .news-changes, .dr-update__body .news-roadmap { margin: 1em 0 1.6em; padding: 0; list-style: none; } .dr-update__body .news-changes li, .dr-update__body .news-roadmap li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--dr-line-soft); font-size: 15px; } .dr-update__body .news-tag { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 74px; margin-top: 2px; padding: 3px 9px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .dr-update__body .news-tag.is-added, .dr-update__body .news-tag.is-shipping { background: var(--dr-ok-tint); color: var(--dr-ok); } .dr-update__body .news-tag.is-changed, .dr-update__body .news-tag.is-planned { background: var(--dr-info-tint); color: var(--dr-info); } .dr-update__body .news-tag.is-fixed, .dr-update__body .news-tag.is-exploring { background: var(--dr-amber-tint); color: var(--dr-amber); } .dr-update__body .news-tag.is-removed { background: var(--dr-bad-tint); color: var(--dr-bad); } /* version */ .dr-update__body .news-version { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; } .dr-update__body .news-version__number { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; background: var(--dr-accent); color: var(--dr-on-accent); font-family: var(--dr-mono); font-size: 13px; font-weight: 700; letter-spacing: .02em; } .dr-update__body .news-version__date { color: var(--dr-ink-3); font-size: 13px; font-weight: 700; } /* image */ .dr-update__body .news-figure { margin: 1.6em 0; } .dr-update__body .news-figure img { display: block; width: 100%; border-radius: 16px; box-shadow: var(--dr-shadow-card); } .dr-update__body .news-figure figcaption { margin-top: 10px; color: var(--dr-ink-3); font-size: 13px; font-style: italic; text-align: center; } /* video: a poster and a play button; the player is loaded when the reader presses play */ .dr-update__body .news-video { margin: 1.6em 0; } .dr-update__body .news-video__poster, .dr-update__body .news-video__file, .dr-update__body .news-video__frame { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #14131a; box-shadow: var(--dr-shadow-card); } .dr-update__body .news-video--4x3 .news-video__poster, .dr-update__body .news-video--4x3 .news-video__file, .dr-update__body .news-video--4x3 .news-video__frame { aspect-ratio: 4 / 3; } .dr-update__body .news-video--1x1 .news-video__poster, .dr-update__body .news-video--1x1 .news-video__file, .dr-update__body .news-video--1x1 .news-video__frame { aspect-ratio: 1 / 1; } .dr-update__body .news-video--9x16 .news-video__poster, .dr-update__body .news-video--9x16 .news-video__file, .dr-update__body .news-video--9x16 .news-video__frame { aspect-ratio: 9 / 16; max-width: 380px; margin: 0 auto; } .dr-update__body .news-video__poster img, .dr-update__body .news-video__file, .dr-update__body .news-video__frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; } .dr-update__body .news-video__poster img { opacity: .94; transition: transform .5s ease, opacity .3s ease; } .dr-update__body .news-video__poster:hover img { transform: scale(1.03); opacity: 1; } .dr-update__body .news-video__poster--blank { background: linear-gradient(135deg, var(--dr-accent), var(--dr-violet)); } .dr-update__body .news-video__label { position: absolute; left: 18px; bottom: 14px; max-width: calc(100% - 36px); overflow: hidden; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; opacity: .85; } .dr-update__body .news-video__frame video { object-fit: contain; background: #14131a; } .dr-update__body .news-video__poster::after{content:"\f04b";padding-left:4px;font-family:"Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:900; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--dr-accent); font-size: 22px; box-shadow: 0 12px 34px rgba(0, 0, 0, .4); transition: transform .18s ease, background .18s ease; } .dr-update__body .dr-update__body .news-video__poster:hover::after { transform: translate(-50%, -50%) scale(1.08); background: #fff; } .dr-update__body .news-video figcaption { margin-top: 10px; color: var(--dr-ink-3); font-size: 13px; text-align: center; } /* timeline & agenda */ .dr-update__body .news-timeline { margin: 1.2em 0 1.6em; padding: 4px 0 4px 26px; list-style: none; border-left: 2px solid rgba(var(--dr-accent-rgb), .35); } .dr-update__body .news-timeline li { position: relative; margin: 0 0 18px; padding-left: 8px; } .dr-update__body .news-timeline li:last-child { margin-bottom: 0; } .dr-update__body .news-timeline li::before { content: ""; position: absolute; left: -34px; top: 5px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--dr-surface); background: var(--dr-accent); box-shadow: 0 0 0 2px rgba(var(--dr-accent-rgb), .3); } .dr-update__body .news-timeline li:last-child::before { background: var(--dr-ok); box-shadow: 0 0 0 2px rgba(30, 120, 70, .3); } .dr-update__body .news-timeline time { display: block; margin-bottom: 2px; color: var(--dr-ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .dr-update__body .news-timeline strong { display: block; color: var(--dr-ink); } .dr-update__body .news-timeline p { margin: 2px 0 0; font-size: 14.5px; } /* status line */ .dr-update__body .news-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--dr-ink); font-weight: 600; } .dr-update__body .news-status__pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .dr-update__body .news-status__pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .dr-update__body .news-status__pill.is-resolved { background: var(--dr-ok-tint); color: var(--dr-ok); } .dr-update__body .news-status__pill.is-investigating { background: var(--dr-bad-tint); color: var(--dr-bad); } .dr-update__body .news-status__pill.is-monitoring, .dr-update__body .news-status__pill.is-identified, .dr-update__body .news-status__pill.is-scheduled { background: var(--dr-amber-tint); color: var(--dr-amber); } /* call to action */ .dr-update__body .news-cta { margin: 1.6em 0; } .dr-update__body .news-cta a { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 999px; background: var(--dr-accent); color: var(--dr-on-accent) !important; font-weight: 800; text-decoration: none; box-shadow: 0 8px 20px rgba(var(--dr-accent-rgb), .28); transition: transform .15s ease, box-shadow .15s ease; } .dr-update__body .news-cta a::after { content: "\f061"; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; } .dr-update__body .news-cta a:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(var(--dr-accent-rgb), .36); } /* related links, Q&A carried over, revision line */ .dr-update__body .news-links { margin: 1.2em 0; padding: 0; list-style: none; } .dr-update__body .news-links li { margin: 0 0 8px; padding: 12px 16px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); font-size: 14.5px; } .dr-update__body .news-links a { font-weight: 700; } .dr-update__body .news-qa { margin: 12px 0; padding: 16px 20px; border-radius: 14px; background: var(--dr-soft); } .dr-update__body .news-qa h3 { margin: 0 0 6px; font-size: 16px; } .dr-update__body .news-qa p { margin: 0 0 6px; font-size: 15px; } .dr-update__body .news-revision { margin: 2em 0 0; padding-top: 12px; border-top: 1px solid var(--dr-line-soft); color: var(--dr-ink-3); font-size: 13px; } @media (max-width: 575.98px) { .dr-update__body { font-size: 15.5px; } .dr-update__body .news-highlights { grid-template-columns: minmax(0, 1fr); } .dr-update__body .news-facts p { flex: 1 1 100%; } .dr-update__body blockquote, .dr-update__body .news-quote { font-size: 17px; } } /* -- newsroom treatments, one per template -- */ /* feature: a story - wide picture, drop cap, big quotes */ .dr-update--feature .dr-article__media img { aspect-ratio: 2 / 1; max-height: 520px; } .dr-update--feature .dr-update__body { max-width: 720px; font-size: 17px; line-height: 1.8; } .dr-update--feature .dr-update__body .news-deck { font-size: 22px; } .dr-update--feature .dr-update__body .news-deck + p::first-letter { float: left; margin: 6px 10px 0 0; color: var(--dr-accent); font-size: 58px; font-weight: 800; line-height: .8; } .dr-update--feature .dr-update__body h2 { font-size: 24px; } .dr-update--feature .dr-news__kind { background: var(--dr-violet-tint); color: var(--dr-violet); } /* brief: compact, numbered sections */ .dr-update--brief .dr-update__body { font-size: 15px; line-height: 1.65; counter-reset: brief; } .dr-update--brief .dr-update__body h2 { display: flex; align-items: center; gap: 12px; margin-top: 1.5em; font-size: 18px; counter-increment: brief; } .dr-update--brief .dr-update__body h2::before { content: counter(brief, decimal-leading-zero); display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 34px; height: 28px; padding: 0 8px; border-radius: 8px; background: var(--dr-accent-tint); color: var(--dr-accent); font-family: var(--dr-mono); font-size: 12px; font-weight: 700; } .dr-update--brief .dr-update__body .news-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dr-update--brief .dr-update__body ul { padding-left: 0; list-style: none; } .dr-update--brief .dr-update__body ul > li { position: relative; margin: 0 0 6px; padding-left: 22px; } .dr-update--brief .dr-update__body ul > li::before { content: "\f054"; position: absolute; left: 2px; top: 6px; color: var(--dr-accent); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-size: 10px; font-weight: 900; } .dr-update--brief .dr-article__media img { aspect-ratio: 21 / 7; } /* community: warm */ .dr-update--community .dr-article__media { padding: 18px 18px 0; background: linear-gradient(180deg, var(--dr-amber-tint), transparent); } .dr-update--community .dr-article__media img { border-radius: 14px; aspect-ratio: 16 / 8; } .dr-update--community .dr-update__body { max-width: 720px; font-size: 16.5px; line-height: 1.8; } .dr-update--community .dr-update__body .news-deck { color: var(--dr-ink); } .dr-update--community .dr-update__body h2 { padding-bottom: 8px; border-bottom: 2px solid var(--dr-amber-tint); } .dr-update--community .dr-update__body h2::after { content: ""; display: block; width: 56px; height: 2px; margin-top: 8px; margin-bottom: -10px; background: var(--dr-amber); } .dr-update--community .dr-update__body .news-quote { background: var(--dr-amber-tint); } .dr-update--community .dr-update__body .news-quote::before { color: var(--dr-amber); } .dr-update--community .dr-news__kind { background: var(--dr-amber-tint); color: var(--dr-amber); } /* notice: amber, checklists */ .dr-update--notice .dr-article__media img { aspect-ratio: 21 / 8; } .dr-update--notice .dr-update__body h2 { color: var(--dr-amber); } .dr-update--notice .dr-update__body ol { padding-left: 0; list-style: none; counter-reset: todo; } .dr-update--notice .dr-update__body ol > li { position: relative; margin: 0 0 8px; padding: 10px 14px 10px 46px; border: 1px solid rgba(180, 83, 9, .25); border-radius: 12px; background: var(--dr-surface); counter-increment: todo; } .dr-update--notice .dr-update__body ol > li::before { content: counter(todo); position: absolute; left: 12px; top: 10px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; background: var(--dr-amber); color: #fff; font-size: 12px; font-weight: 800; } .dr-update--notice .dr-news__kind { background: var(--dr-amber-tint); color: var(--dr-amber); } /* release notes: quiet uppercase sections, version first */ .dr-update--release-notes .dr-update__body h2 { margin-top: 1.8em; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--dr-ink-3); } .dr-update--release-notes .dr-update__body .news-deck { font-size: 17px; } .dr-update--release-notes .dr-article__media img { aspect-ratio: 21 / 8; } .dr-update--release-notes .dr-news__kind { background: var(--dr-info-tint); color: var(--dr-info); } /* launch: big, gradient lead */ .dr-update--launch .dr-article__media img { aspect-ratio: 2 / 1; max-height: 520px; } .dr-update--launch .dr-update__body h2 { font-size: 24px; letter-spacing: -.02em; } .dr-update--launch .dr-update__body .news-deck { margin-bottom: 26px; padding: 20px 24px; border-radius: 16px; background: linear-gradient(135deg, var(--dr-accent-tint), var(--dr-violet-tint)); color: var(--dr-ink); font-size: 21px; } .dr-update--launch .dr-news__kind { background: var(--dr-accent); color: var(--dr-on-accent); } /* status & maintenance: amber headings, amber dateline */ .dr-update--status .dr-update__body h2, .dr-update--maintenance .dr-update__body h2 { color: var(--dr-amber); } .dr-update--status .dr-update__body .news-facts p, .dr-update--maintenance .dr-update__body .news-facts p { border-color: rgba(180, 83, 9, .3); background: var(--dr-amber-tint); } .dr-update--status .dr-news__kind, .dr-update--maintenance .dr-news__kind { background: var(--dr-amber-tint); color: var(--dr-amber); } .dr-update--status .dr-article__media img, .dr-update--maintenance .dr-article__media img { aspect-ratio: 21 / 8; } .dr-update--maintenance .dr-update__body ul { padding-left: 0; list-style: none; } .dr-update--maintenance .dr-update__body ul > li { position: relative; margin: 0 0 8px; padding-left: 30px; } .dr-update--maintenance .dr-update__body ul > li::before { content: "\f017"; position: absolute; left: 0; top: 3px; color: var(--dr-amber); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900; font-size: 14px; } /* event: warm, agenda as timeline */ .dr-update--event .dr-article__media { padding: 18px 18px 0; background: linear-gradient(180deg, var(--dr-violet-tint), transparent); } .dr-update--event .dr-article__media img { border-radius: 14px; aspect-ratio: 16 / 7; } .dr-update--event .dr-update__body .news-facts p { background: var(--dr-violet-tint); border-color: transparent; } .dr-update--event .dr-update__body .news-facts strong { color: var(--dr-violet); } .dr-update--event .dr-update__body .news-timeline li::before, .dr-update--event .dr-update__body .news-timeline li:last-child::before { background: var(--dr-violet); box-shadow: 0 0 0 2px rgba(124, 58, 237, .25); } .dr-update--event .dr-update__body .news-cta a { background: var(--dr-violet); box-shadow: 0 8px 20px rgba(124, 58, 237, .28); } .dr-update--event .dr-news__kind { background: var(--dr-violet-tint); color: var(--dr-violet); } /* roadmap: sections as lanes */ .dr-update--roadmap .dr-update__body h2 { display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--dr-ink-3); } .dr-update--roadmap .dr-update__body h2::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--dr-accent); } .dr-update__body .news-roadmap li { display: block; } .dr-update__body .news-roadmap li .news-tag { float: left; margin: 2px 10px 0 0; } .dr-update__body .news-roadmap li::after { content: ""; display: block; clear: both; } .dr-update--roadmap .dr-update__body .news-roadmap li { padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); } .dr-update--roadmap .dr-article__media img { aspect-ratio: 21 / 7; } @media (max-width: 767.98px) { .dr-update--feature .dr-update__body { font-size: 16px; } } /* ================================================================ KNOWLEDGEBASE · the resource centre Articles are documentation: tighter type, quiet surfaces, numbered steps, key facts, notes. The blocks the Knowledgebase editor inserts carry doc-* classes and are styled only here. */ .dr-doc__kind { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--dr-line-card); border-radius: 8px; background: var(--dr-surface); color: var(--dr-ink-2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .dr-doc__kind i { font-size: 10px; color: var(--dr-accent); } .dr-kb-art__kind { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: var(--dr-soft); color: var(--dr-ink-2); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .dr-doc__notice { display: flex; align-items: center; gap: 12px; margin: -24px -28px 18px; padding: 12px 28px; border-radius: var(--dr-radius-card) var(--dr-radius-card) 0 0; background: var(--dr-bad-tint); color: var(--dr-bad); font-size: 13.5px; font-weight: 700; } .dr-doc__notice i { font-size: 18px; } .dr-doc__body { max-width: 760px; font-size: 15px; line-height: 1.7; } .dr-doc__body h2 { margin: 1.6em 0 .5em; font-size: 20px; letter-spacing: -.01em; scroll-margin-top: 90px; } .dr-doc__body h3 { margin: 1.3em 0 .4em; font-size: 16px; scroll-margin-top: 90px; } .dr-doc__body p, .dr-doc__body ul, .dr-doc__body ol, .dr-doc__body dl { margin: 0 0 1em; } .dr-doc__body img { max-width: 100%; height: auto; border-radius: 10px; } .dr-doc__body code { padding: 2px 6px; border-radius: 6px; background: var(--dr-surface-2); font-family: var(--dr-mono); font-size: .92em; } .dr-doc__body pre { margin: 1.2em 0; padding: 14px 16px; border-radius: 12px; background: var(--dr-surface-2); font-size: 13px; overflow: auto; } .dr-doc__body pre code { padding: 0; background: transparent; } .dr-doc__body table { width: 100%; margin: 1.2em 0; border-collapse: collapse; font-size: 14px; } .dr-doc__body th, .dr-doc__body td { padding: 10px 12px; border-bottom: 1px solid var(--dr-line-soft); text-align: left; vertical-align: top; } .dr-doc__body th { background: var(--dr-soft); font-weight: 700; } .dr-doc__body blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 3px solid var(--dr-accent); border-radius: 0 12px 12px 0; background: var(--dr-soft); color: var(--dr-ink-2); } /* summary */ .dr-doc__body .doc-summary { margin: 0 0 22px; padding: 14px 18px; border-left: 3px solid var(--dr-accent); border-radius: 0 12px 12px 0; background: var(--dr-soft); color: var(--dr-ink); font-size: 16px; line-height: 1.6; } /* key facts */ .dr-doc__body .doc-meta { display: grid; gap: 0; margin: 0 0 22px; border: 1px solid var(--dr-line-card); border-radius: 12px; overflow: hidden; font-size: 14px; } .dr-doc__body .doc-meta p { display: grid; grid-template-columns: minmax(130px, max-content) minmax(0, 1fr); gap: 10px; margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--dr-line-soft); } .dr-doc__body .doc-meta p:last-child { border-bottom: 0; } .dr-doc__body .doc-meta p:nth-child(odd) { background: var(--dr-soft); } .dr-doc__body .doc-meta strong { color: var(--dr-ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; align-self: center; } /* notes */ .dr-doc__body .doc-note { margin: 1.3em 0; padding: 14px 18px 14px 20px; border: 1px solid var(--dr-line-card); border-left: 4px solid var(--dr-accent); border-radius: 0 12px 12px 0; background: var(--dr-surface); } .dr-doc__body .doc-note > p { margin: 0 0 6px; font-size: 14.5px; } .dr-doc__body .doc-note > p:last-child { margin-bottom: 0; } .dr-doc__body .doc-note > p:first-child strong { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dr-accent); } .dr-doc__body .doc-note > p:first-child strong::before { content: "\f05a"; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900; } .dr-doc__body .doc-note--warning { border-left-color: var(--dr-amber); background: var(--dr-amber-tint); border-color: rgba(180, 83, 9, .25); } .dr-doc__body .doc-note--warning > p:first-child strong { color: var(--dr-amber); } .dr-doc__body .doc-note--warning > p:first-child strong::before { content: "\f071"; } .dr-doc__body .doc-note--safety { border-left-color: var(--dr-bad); background: var(--dr-bad-tint); border-color: rgba(190, 40, 40, .25); } .dr-doc__body .doc-note--safety > p:first-child strong { color: var(--dr-bad); } .dr-doc__body .doc-note--safety > p:first-child strong::before { content: "\f3ed"; } .dr-doc__body .doc-note--result { border-left-color: var(--dr-ok); background: var(--dr-ok-tint); border-color: rgba(30, 120, 70, .25); } .dr-doc__body .doc-note--result > p:first-child strong { color: var(--dr-ok); } .dr-doc__body .doc-note--result > p:first-child strong::before { content: "\f058"; } /* before you start */ .dr-doc__body .doc-requirements { margin: 1.2em 0; padding: 14px 18px; border: 1px dashed rgba(var(--dr-accent-rgb), .45); border-radius: 12px; background: var(--dr-accent-tint); } .dr-doc__body .doc-requirements > p:first-child { margin: 0 0 8px; } .dr-doc__body .doc-requirements > p:first-child strong { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-accent); } .dr-doc__body .doc-requirements ul { margin: 0; padding-left: 20px; } .dr-doc__body .doc-requirements li { margin-bottom: 4px; } /* steps */ .dr-doc__body .doc-steps { margin: 1.2em 0 1.6em; padding: 0; list-style: none; counter-reset: docstep; } .dr-doc__body .doc-steps > li { position: relative; margin: 0 0 10px; padding: 14px 16px 14px 60px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); counter-increment: docstep; } .dr-doc__body .doc-steps > li::before { content: counter(docstep); position: absolute; left: 16px; top: 14px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: var(--dr-accent); color: var(--dr-on-accent); font-size: 13px; font-weight: 800; } .dr-doc__body .doc-steps > li strong { display: block; margin-bottom: 4px; color: var(--dr-ink); font-size: 15px; } .dr-doc__body .doc-steps > li p { margin: 0 0 6px; font-size: 14.5px; } .dr-doc__body .doc-steps > li p:last-child { margin-bottom: 0; } .dr-doc__body .doc-steps > li time { display: block; margin-bottom: 2px; color: var(--dr-ink-3); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } /* checklist */ .dr-doc__body .doc-checklist { margin: 1em 0 1.4em; padding: 0; list-style: none; } .dr-doc__body .doc-checklist > li { position: relative; margin: 0 0 8px; padding: 8px 12px 8px 40px; border-radius: 10px; background: var(--dr-soft); } .dr-doc__body .doc-checklist > li::before { content: "\f00c"; position: absolute; left: 12px; top: 9px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; background: var(--dr-ok-tint); color: var(--dr-ok); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-size: 10px; font-weight: 900; } /* definitions & fact tiles */ .dr-doc__body .doc-terms { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); gap: 0; margin: 1.2em 0; border: 1px solid var(--dr-line-card); border-radius: 12px; overflow: hidden; } .dr-doc__body .doc-terms dt { padding: 10px 14px; background: var(--dr-soft); border-bottom: 1px solid var(--dr-line-soft); font-weight: 800; font-size: 14px; } .dr-doc__body .doc-terms dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--dr-line-soft); font-size: 14.5px; } .dr-doc__body .doc-terms dt:last-of-type, .dr-doc__body .doc-terms dd:last-of-type { border-bottom: 0; } .dr-doc__body .doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 1.2em 0; padding: 0; list-style: none; } .dr-doc__body .doc-grid > li { margin: 0; padding: 12px 14px; border: 1px solid var(--dr-line-card); border-radius: 10px; background: var(--dr-surface); font-size: 14px; line-height: 1.55; } .dr-doc__body .doc-grid > li strong { display: block; margin-bottom: 2px; color: var(--dr-ink); } /* question & answer */ .dr-doc__body .doc-qa { margin: 10px 0; padding: 14px 16px; border: 1px solid var(--dr-line-card); border-radius: 12px; background: var(--dr-surface); } .dr-doc__body .doc-qa h3 { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; font-size: 15.5px; line-height: 1.4; } .dr-doc__body .doc-qa h3::before { content: "Q"; flex: 0 0 auto; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 7px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 12px; font-weight: 800; } .dr-doc__body .doc-qa p { margin: 0 0 8px; padding-left: 34px; font-size: 14.5px; } .dr-doc__body .doc-qa p:last-child { margin-bottom: 0; } /* comparison table */ .dr-doc__body .doc-compare { font-size: 14px; } .dr-doc__body .doc-compare thead th { background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .dr-doc__body .doc-compare tbody th { background: var(--dr-soft); width: 28%; } .dr-doc__body .doc-compare td.is-yes { color: var(--dr-ok); } .dr-doc__body .doc-compare td.is-no { color: var(--dr-ink-3); } /* change list */ .dr-doc__body .doc-changes { margin: 1em 0 1.4em; padding: 0; list-style: none; } .dr-doc__body .doc-changes li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 8px 0; border-bottom: 1px solid var(--dr-line-soft); font-size: 14.5px; } .dr-doc__body .doc-tag { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 66px; margin-top: 2px; padding: 2px 8px; border-radius: 6px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .dr-doc__body .doc-tag.is-added, .dr-doc__body .doc-tag.is-resolved { background: var(--dr-ok-tint); color: var(--dr-ok); } .dr-doc__body .doc-tag.is-changed { background: var(--dr-info-tint); color: var(--dr-info); } .dr-doc__body .doc-tag.is-fixed, .dr-doc__body .doc-tag.is-monitoring { background: var(--dr-amber-tint); color: var(--dr-amber); } .dr-doc__body .doc-tag.is-removed, .dr-doc__body .doc-tag.is-investigating { background: var(--dr-bad-tint); color: var(--dr-bad); } .dr-doc__body .doc-status { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-weight: 600; } /* version */ .dr-doc__body .doc-version { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 1.6em 0 .6em; padding-bottom: 6px; border-bottom: 2px solid var(--dr-line-soft); } .dr-doc__body .doc-version:first-child { margin-top: 0; } .dr-doc__body .doc-version__number { font-family: var(--dr-mono); font-size: 16px; font-weight: 700; color: var(--dr-ink); } .dr-doc__body .doc-version__date { color: var(--dr-ink-3); font-size: 12.5px; font-weight: 700; } /* screenshot */ .dr-doc__body .doc-figure { margin: 1.4em 0; } .dr-doc__body .doc-figure img { display: block; width: 100%; border: 1px solid var(--dr-line-card); border-radius: 12px; } .dr-doc__body .doc-figure figcaption { margin-top: 8px; color: var(--dr-ink-3); font-size: 13px; text-align: center; } /* video: a poster and a play button; the player is loaded when the reader presses play */ .dr-doc__body .doc-video { margin: 1.6em 0; } .dr-doc__body .doc-video__poster, .dr-doc__body .doc-video__file, .dr-doc__body .doc-video__frame { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #14131a; box-shadow: var(--dr-shadow-card); } .dr-doc__body .doc-video--4x3 .doc-video__poster, .dr-doc__body .doc-video--4x3 .doc-video__file, .dr-doc__body .doc-video--4x3 .doc-video__frame { aspect-ratio: 4 / 3; } .dr-doc__body .doc-video--1x1 .doc-video__poster, .dr-doc__body .doc-video--1x1 .doc-video__file, .dr-doc__body .doc-video--1x1 .doc-video__frame { aspect-ratio: 1 / 1; } .dr-doc__body .doc-video--9x16 .doc-video__poster, .dr-doc__body .doc-video--9x16 .doc-video__file, .dr-doc__body .doc-video--9x16 .doc-video__frame { aspect-ratio: 9 / 16; max-width: 380px; margin: 0 auto; } .dr-doc__body .doc-video__poster img, .dr-doc__body .doc-video__file, .dr-doc__body .doc-video__frame iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: 0; box-shadow: none; } .dr-doc__body .doc-video__poster img { opacity: .94; transition: transform .5s ease, opacity .3s ease; } .dr-doc__body .doc-video__poster:hover img { transform: scale(1.03); opacity: 1; } .dr-doc__body .doc-video__poster--blank { background: linear-gradient(135deg, var(--dr-accent), var(--dr-violet)); } .dr-doc__body .doc-video__label { position: absolute; left: 18px; bottom: 14px; max-width: calc(100% - 36px); overflow: hidden; color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; opacity: .85; } .dr-doc__body .doc-video__frame video { object-fit: contain; background: #14131a; } .dr-doc__body .doc-video__poster::after{content:"\f04b";padding-left:4px;font-family:"Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Pro","Font Awesome 5 Free";font-weight:900; position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 68px; height: 68px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--dr-accent); font-size: 22px; box-shadow: 0 12px 34px rgba(0, 0, 0, .4); transition: transform .18s ease, background .18s ease; } .dr-doc__body .dr-doc__body .doc-video__poster:hover::after { transform: translate(-50%, -50%) scale(1.08); background: #fff; } .dr-doc__body .doc-video figcaption { margin-top: 10px; color: var(--dr-ink-3); font-size: 13px; text-align: center; } /* related, revision, link */ .dr-doc__body .doc-sources { margin: 1.2em 0; padding: 0; list-style: none; border-top: 1px solid var(--dr-line-soft); } .dr-doc__body .doc-sources li { margin: 0; padding: 9px 2px; border-bottom: 1px solid var(--dr-line-soft); font-size: 14px; } .dr-doc__body .doc-sources a { font-weight: 700; } .dr-doc__body .doc-revision { margin: 2em 0 0; padding-top: 12px; border-top: 1px solid var(--dr-line-soft); color: var(--dr-ink-3); font-size: 12.5px; } .dr-doc__body .doc-cta { margin: 1.4em 0; } .dr-doc__body .doc-cta a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border: 1px solid var(--dr-line-card); border-radius: 10px; background: var(--dr-surface); color: var(--dr-accent); font-weight: 700; text-decoration: none; } @media (max-width: 575.98px) { .dr-doc__body table, .dr-update__body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* a wide table scrolls inside the card, never the page */ .dr-doc__notice { margin: -20px -18px 16px; padding: 10px 18px; } .dr-doc__body .doc-grid { grid-template-columns: minmax(0, 1fr); } .dr-doc__body .doc-meta p, .dr-doc__body .doc-terms { grid-template-columns: minmax(0, 1fr); gap: 2px; } .dr-doc__body .doc-terms dt { border-bottom: 0; padding-bottom: 4px; } .dr-doc__body .doc-steps > li { padding-left: 52px; } } /* -- resource treatments, one per template -- */ /* reference: default */ /* explainer: roomier, essay-like */ .dr-doc--explainer .dr-doc__body { font-size: 16px; line-height: 1.8; max-width: 720px; } .dr-doc--explainer .dr-doc__body .doc-summary { border: 0; padding: 0; background: transparent; color: var(--dr-ink-2); font-size: 18px; } .dr-doc--explainer .dr-doc__body h2 { font-size: 22px; } /* procedure: numbered sections lead into numbered steps */ .dr-doc--procedure .dr-doc__body h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; } .dr-doc--procedure .dr-doc__body h2::before { content: "\f0ae"; color: var(--dr-accent); font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-size: 14px; font-weight: 900; } /* tutorial: numbered lessons */ .dr-doc--tutorial .dr-doc__body { counter-reset: lesson; } .dr-doc--tutorial .dr-doc__body h2 { display: flex; align-items: center; gap: 14px; counter-increment: lesson; } .dr-doc--tutorial .dr-doc__body h2::before { content: counter(lesson); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--dr-accent); color: var(--dr-on-accent); font-size: 14px; font-weight: 800; } .dr-doc--tutorial .dr-doc__body h2 + p { padding-left: 48px; } .dr-doc--tutorial .dr-doc__body .doc-figure { margin-left: 48px; } /* faq: quiet section labels */ .dr-doc--faq .dr-doc__body h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-ink-3); } /* troubleshooting: amber headings, red symptoms */ .dr-doc--troubleshooting .dr-doc__body h2 { color: var(--dr-amber); } .dr-doc--troubleshooting .dr-doc__body .doc-checklist > li::before { content: "\f00d"; background: var(--dr-bad-tint); color: var(--dr-bad); } .dr-doc--troubleshooting .dr-doc__body .doc-steps > li::before { background: var(--dr-amber); color: #fff; } /* changelog: versions as sections */ .dr-doc--changelog .dr-doc__body .doc-summary { border-left-color: var(--dr-info); } .dr-doc--changelog .dr-doc__body .doc-version__number { color: var(--dr-info); } /* spotlight: accent frame on the figure, tips as tiles */ .dr-doc--spotlight .dr-doc__body .doc-summary { border: 0; padding: 18px 20px; border-radius: 14px; background: linear-gradient(135deg, var(--dr-accent-tint), var(--dr-violet-tint)); } .dr-doc--spotlight .dr-doc__body .doc-figure img { border-color: rgba(var(--dr-accent-rgb), .4); box-shadow: var(--dr-shadow-card); } .dr-doc--spotlight .dr-doc__body .doc-checklist > li::before { content: "\f0eb"; background: var(--dr-accent-tint); color: var(--dr-accent); } /* security: red band, headings */ .dr-doc--security .dr-doc__body h2 { color: var(--dr-bad); } .dr-doc--security .dr-doc__body .doc-checklist > li::before { content: "\f071"; background: var(--dr-amber-tint); color: var(--dr-amber); } /* policy: formal - numbered clauses, serif-ish spacing */ .dr-doc--policy .dr-doc__body { counter-reset: clause; } .dr-doc--policy .dr-doc__body h2 { display: flex; gap: 12px; font-size: 17px; counter-increment: clause; } .dr-doc--policy .dr-doc__body h2::before { content: counter(clause) "."; color: var(--dr-ink-3); font-family: var(--dr-mono); } .dr-doc--policy .dr-doc__body .doc-summary { border-left-color: var(--dr-ink-3); } /* glossary: letter headings */ .dr-doc--glossary .dr-doc__body h2 { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 18px; } .dr-doc--glossary .dr-doc__body .doc-terms { border: 0; border-radius: 0; } .dr-doc--glossary .dr-doc__body .doc-terms dt { background: transparent; padding-left: 0; } /* checklist: everything is a checkbox */ .dr-doc--checklist .dr-doc__body h2 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--dr-ink-3); } .dr-doc--checklist .dr-doc__body .doc-checklist > li { background: var(--dr-surface); border: 1px solid var(--dr-line-card); } .dr-doc--checklist .dr-doc__body .doc-checklist > li::before { content: ""; width: 18px; height: 18px; border: 2px solid rgba(var(--dr-accent-rgb), .5); border-radius: 5px; background: var(--dr-surface); } /* comparison: table leads */ .dr-doc--comparison .dr-doc__body .doc-compare thead th:not(:first-child) { text-align: center; } .dr-doc--comparison .dr-doc__body .doc-compare td { text-align: center; } @media (max-width: 575.98px) { .dr-doc--tutorial .dr-doc__body h2 + p, .dr-doc--tutorial .dr-doc__body .doc-figure { padding-left: 0; margin-left: 0; } } /* ------------------------------------------------------------------ * * Mega menu * * The CMS's Mega Menu builder could be switched on and Draisap had nothing to draw * with it: a top-level item marked "dropdown-megamenu" fell through to the ordinary * dropdown, and the column HTML the CMS generates for it was printed inside a badge. * This is the panel. It spans the header's own container rather than hanging off the * trigger, so a menu with four columns is not a tall narrow list, and it carries the * same caret, radius, border and shadow as every other pane in the theme. * ------------------------------------------------------------------ */ /* The panel hangs off the header itself, not off the header's inner container: the container is capped at --dr-container and padded, and a sheet positioned inside it would stop short of the window edges. The header is sticky, so it is already the positioned ancestor. */ .dr-nav > li.dr-has-mega { position: static; } /* Every mega menu is a full-bleed sheet: it spans the window under the header and lays its content out on the same container the header uses, so the panel lines up with the brand on the left and the account tools on the right however wide the window is. --dr-mega-top is the bottom edge of the header, which the script keeps current while a panel is open (the header is sticky and its height changes with the admin bar and pre-header). */ .dr-mega { position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--dr-mega-top, 72px) - 16px); overflow-y: auto; overscroll-behavior: contain; z-index: 1000; display: none; padding: 30px 0 34px; border: 0; border-bottom: 1px solid var(--dr-line); border-radius: 0; background: var(--dr-surface); box-shadow: var(--dr-shadow-pop); } .dr-nav > li.show > .dr-mega { display: block; } .dr-mega__inner { width: 100%; max-width: var(--dr-container, 1440px); margin: 0 auto; padding: 0 24px; } .dr-mega__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px 24px; } .dr-mega__cell { grid-column: span var(--dr-mega-span, 3); min-width: 0; } .dr-mega--cards .dr-mega__cell { grid-column: span var(--dr-mega-span, 4); } /* A column: the 2nd-level item is the heading, its own children are the links. */ .dr-mega__head { display: flex; align-items: center; gap: 10px; padding: 0 8px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--dr-line-soft); color: var(--dr-ink); } a.dr-mega__head:hover { color: var(--dr-accent); } .dr-mega__head-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 13px; } .dr-mega__head-copy { min-width: 0; } .dr-mega__head-copy strong { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .dr-mega__head-copy span { display: block; margin-top: 2px; color: var(--dr-ink-3); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; } .dr-mega__links { list-style: none; margin: 0; padding: 0; } .dr-mega__links > li > a { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 10px; color: var(--dr-ink); font-size: 13.5px; font-weight: 600; } .dr-mega__links > li > a:hover, .dr-mega__links > li > a.is-current { color: var(--dr-accent); background: var(--dr-accent-tint); } .dr-mega__links > li > a > i { flex: none; width: 16px; margin-top: 3px; text-align: center; color: var(--dr-ink-3); font-size: 12px; } .dr-mega__links > li > a:hover > i, .dr-mega__links > li > a.is-current > i { color: inherit; } .dr-mega__links small { display: block; margin-top: 2px; color: var(--dr-ink-3); font-size: 12px; font-weight: 500; } /* A card: a 2nd-level item with nothing under it is a destination in its own right. */ .dr-mega__card { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px; border-radius: 12px; color: var(--dr-ink); transition: background .15s ease, color .15s ease; } a.dr-mega__card:hover, .dr-mega__card.is-current { background: var(--dr-accent-tint); color: var(--dr-accent); } .dr-mega__card-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--dr-soft); color: var(--dr-accent); font-size: 15px; } a.dr-mega__card:hover .dr-mega__card-icon, .dr-mega__card.is-current .dr-mega__card-icon { background: var(--dr-surface); } .dr-mega__card-copy { min-width: 0; flex: 1; } .dr-mega__card-copy strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; } .dr-mega__card-copy span { display: block; margin-top: 2px; color: var(--dr-ink-2); font-size: 12.5px; font-weight: 500; line-height: 1.45; } a.dr-mega__card:hover .dr-mega__card-copy span { color: inherit; opacity: .8; } .dr-mega__card-arrow { flex: none; font-size: 11px; opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; } a.dr-mega__card:hover .dr-mega__card-arrow { opacity: .8; transform: translateX(0); } /* A banner: the operator's promo block. */ .dr-mega__banner { display: flex; align-items: center; gap: 12px; height: 100%; padding: 16px; border-radius: 14px; background: var(--dr-accent-tint); color: var(--dr-ink); } a.dr-mega__banner:hover { color: var(--dr-accent); } .dr-mega__banner-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--dr-accent); color: var(--dr-on-accent); font-size: 16px; } .dr-mega__banner-copy { min-width: 0; flex: 1; } .dr-mega__banner-copy strong { display: block; font-size: 14px; font-weight: 800; } .dr-mega__banner-copy span { display: block; margin-top: 2px; color: var(--dr-ink-2); font-size: 12.5px; font-weight: 500; } .dr-mega__banner > i { flex: none; font-size: 12px; color: var(--dr-accent); } .dr-mega__html { margin-top: 8px; color: var(--dr-ink-2); font-size: 13px; } .dr-mega__html img { max-width: 100%; height: auto; border-radius: 10px; } .dr-mega__html--banner { margin: 0; } .dr-mega__foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--dr-line-soft); } .dr-mega__foot a { display: inline-flex; align-items: center; gap: 8px; color: var(--dr-accent); font-size: 13px; font-weight: 700; } .dr-mega__foot a:hover { gap: 11px; } .dr-mega__foot i { font-size: 11px; } @media (max-width: 1199px) { .dr-mega__cell { grid-column: span 4; } .dr-mega--cards .dr-mega__cell { grid-column: span 6; } } /* The drawer's mega grouping on a phone. */ .dr-drawer__group { margin: 10px 0 2px; padding: 0 12px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .dr-drawer__group a { color: inherit; } .dr-drawer__group a:hover, .dr-drawer__group a.is-current { color: var(--dr-accent); } /* A flat menu - one with no second-level columns - is still a mega menu, not a dropdown. It hangs off its own trigger rather than the header, but it is a panel: the section introduces itself on the left and its destinations sit in a multi-column grid beside it. */ .dr-mega--panel .dr-mega__inner { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 40px; } .dr-mega__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-right: 24px; border-right: 1px solid var(--dr-line-soft); } .dr-mega__intro-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 2px; border-radius: 12px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 15px; } .dr-mega__intro > strong { font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; } .dr-mega__intro > p { margin: 0; color: var(--dr-ink-3); font-size: 12.5px; font-weight: 500; line-height: 1.5; } .dr-mega__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--dr-accent); font-size: 13px; font-weight: 700; } .dr-mega__cta:hover { gap: 11px; } .dr-mega__cta i { font-size: 11px; } /* With no description and no destination of its own, the section is just its name: centre it rather than leaving it stranded at the top of a tall, empty column. */ .dr-mega__intro:not(:has(.dr-mega__cta)):not(:has(p)) { justify-content: center; } .dr-mega--panel .dr-mega__grid { align-content: start; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px 14px; } .dr-mega--panel .dr-mega__cell { grid-column: auto; } .dr-mega--panel .dr-mega__card { padding: 12px 14px; height: 100%; align-items: center; } /* A card with no icon of its own is a clean row, not an empty circle in a big tile. */ .dr-mega__card:not(:has(.dr-mega__card-icon)) { padding-left: 14px; } .dr-mega__head:not(:has(.dr-mega__head-icon)) { padding-left: 10px; } @media (max-width: 991px) { .dr-mega { padding: 22px 0 26px; } .dr-mega__inner { padding: 0 16px; } .dr-mega--panel .dr-mega__inner { grid-template-columns: minmax(0, 1fr); gap: 16px; } .dr-mega__intro { padding-right: 0; padding-bottom: 14px; border-right: 0; border-bottom: 1px solid var(--dr-line-soft); } .dr-mega__intro:not(:has(.dr-mega__cta)):not(:has(p)) { justify-content: flex-start; } .dr-mega__cta { margin-top: 4px; } .dr-mega--panel .dr-mega__grid { grid-template-columns: minmax(0, 1fr); } } /* ── The management-level areas: the chooser page and the in-page switcher ──── Rows, not tiles. These sit inside a card already, and a boxed tile inside a card is the card-in-card the rest of this theme avoids. The chooser reads as a list you pick from; the switcher reads as a row of links you step across. */ .dr-people-areas { display: flex; flex-direction: column; } .dr-people-area { display: flex; align-items: baseline; gap: 10px; padding: 14px 4px; border-top: 1px solid var(--dr-line-soft); color: var(--dr-ink); text-decoration: none; transition: background-color .15s ease, padding-left .15s ease; } .dr-people-areas > .dr-people-area:first-child { border-top: 0; } .dr-people-area:hover, .dr-people-area:focus-visible { background: var(--dr-soft); padding-left: 10px; color: var(--dr-ink); text-decoration: none; } .dr-people-area:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; } .dr-people-area > strong { font-weight: 700; } .dr-people-area > span { color: var(--dr-ink-2); font-size: 14px; } /* The chevron marks these as somewhere to go, and keeps the right edge even. */ .dr-people-area::after { content: "\f054"; font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900; margin-left: auto; font-size: 11px; color: var(--dr-ink-3); } /* Inline: the switcher on a level's own page. Pills, wrapping on narrow screens. */ .dr-people-areas--inline { flex-direction: row; flex-wrap: wrap; gap: 8px; } .dr-people-areas--inline > .dr-people-area { border-top: 0; padding: 8px 14px; border-radius: var(--dr-radius-pill); background: var(--dr-soft); font-size: 14px; } .dr-people-areas--inline > .dr-people-area:hover, .dr-people-areas--inline > .dr-people-area:focus-visible { background: var(--dr-accent-tint); color: var(--dr-accent); padding-left: 14px; } .dr-people-areas--inline > .dr-people-area::after { margin-left: 4px; } .dr-people-switch .dr-people-areas--inline { margin-top: 4px; } @media (max-width: 575px) { .dr-people-area > span { display: block; } .dr-people-area { flex-wrap: wrap; } .dr-people-areas--inline > .dr-people-area { flex: 1 1 auto; justify-content: center; } } /* -------------------------------------------------------------------------- Ways to give — the giving index groups its causes, so each group needs a heading row of its own. -------------------------------------------------------------------------- */ .dr-give-group { margin-bottom: 34px; } .dr-give-group:last-child { margin-bottom: 0; } .dr-give-group__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .dr-give-group__head h2 { margin: 0; font-size: 21px; font-weight: 800; } .dr-give-group__head p { margin: 4px 0 0; color: var(--dr-ink-2); font-size: 14.5px; max-width: 70ch; } /* ── Giving: the amount control ─────────────────────────────────────────── An amount is a short value. It was a full-width Bootstrap input group, which left a field the width of the card for four characters and put the currency in two grey slabs the legacy sheet painted. It is one field now, carrying its own affixes, no wider than the value it holds. */ .dr-amounts { display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; margin-bottom: 12px; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-card, 12px); background: var(--dr-surface); overflow: hidden; } .dr-amounts__pick { min-width: 96px; padding: 10px 18px; border: 0; border-left: 1px solid var(--dr-line); background: none; color: var(--dr-ink); font-weight: 700; cursor: pointer; transition: background-color .16s ease, color .16s ease; } .dr-amounts__pick:first-child { border-left: 0; } .dr-amounts__pick:hover { background: var(--dr-soft); } .dr-amounts__pick:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: -2px; } .dr-amounts__pick.is-chosen { background: var(--dr-accent); color: var(--dr-on-accent); } .dr-amount { display: flex; align-items: stretch; width: 220px; max-width: 100%; border: 1px solid var(--dr-line); border-radius: var(--dr-radius-card, 12px); background: var(--dr-surface); transition: border-color .16s ease, box-shadow .16s ease; } .dr-amount:focus-within { border-color: var(--dr-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dr-accent) 16%, transparent); } .dr-amount__affix { display: flex; align-items: center; padding-left: 14px; color: var(--dr-ink-3); font-weight: 600; user-select: none; } .dr-amount__affix--end { padding: 0 14px 0 8px; } .dr-amount__field { flex: 1 1 auto; width: 100%; min-width: 0; height: 46px; min-height: 0; padding: 0 10px; border: 0; border-radius: inherit; background: none; box-shadow: none; color: var(--dr-ink); font-weight: 600; appearance: textfield; -moz-appearance: textfield; } .dr-amount__field:focus { outline: 0; box-shadow: none; } .dr-amount__field::placeholder { color: var(--dr-ink-3); font-weight: 400; } .dr-amount__field::-webkit-outer-spin-button, .dr-amount__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .dr-field__hint { display: block; margin-top: 6px; color: var(--dr-ink-3); font-size: 12.5px; } .dr-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .dr-side-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; } .dr-side-list li > i { flex: none; margin-top: 3px; color: var(--dr-ok); font-size: 11px; } .dr-side-note { margin: 12px 0 0; color: var(--dr-ink-3); font-size: 12.5px; line-height: 1.55; } .dr-side-note:first-child { margin-top: 0; } .dr-sidecard__body > p { margin: 0 0 10px; } .dr-sidecard__body > p:last-child { margin-bottom: 0; } @media (max-width: 575px) { .dr-amounts { width: 100%; } .dr-amounts__pick { flex: 1 1 0; min-width: 0; padding: 10px 12px; } } /* ── The lamp ───────────────────────────────────────────────────────────── A warm glow around the edges of the screen for anyone who finds a flat dark screen too stark. It is an overlay that catches no clicks, and it only exists in dark mode - the button is hidden in light mode and the glow is scoped to the dark scheme, so switching back to light never leaves a stray halo. */ html:not([data-theme="dark"]) .dr-lamp { display: none; } html[data-lamp="on"] .dr-lamp { color: #ffb84d; } html[data-lamp="on"] .dr-lamp > i { text-shadow: 0 0 10px rgba(255, 170, 60, .55); } html[data-theme="dark"][data-lamp="on"]::after { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: block; pointer-events: none; z-index: 2147483000; /* A lamp throws light at the edge and falls away quickly; a wide, slow gradient reads as a tint over the whole screen instead. Short blur, no spread. */ box-shadow: inset 0 0 34px 0 rgba(255, 150, 40, .34), inset 0 0 72px 4px rgba(255, 168, 60, .15), inset 0 0 0 1px rgba(255, 180, 90, .32); } /* Giving: cause cards with a picture and progress towards the goal. */ .dr-give-causes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; } .dr-give-cause { display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; color: var(--dr-ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .dr-give-cause:hover { transform: translateY(-3px); border-color: rgba(var(--dr-accent-rgb), .45); box-shadow: var(--dr-shadow-pop); color: var(--dr-ink); text-decoration: none; } .dr-give-cause__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 42px; } .dr-give-cause__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .dr-give-cause:hover .dr-give-cause__media img { transform: scale(1.04); } .dr-give-cause__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 10px; padding: 18px 20px 20px; } .dr-give-cause__title { font-size: 18px; font-weight: 800; line-height: 1.3; } .dr-give-cause__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--dr-ink-2); font-size: 14px; line-height: 1.6; } .dr-give-cause__button { align-self: flex-start; margin-top: auto; } .dr-give-progress { display: grid; gap: 8px; } .dr-give-progress__bar { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--dr-soft); } .dr-give-progress__bar > span { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: linear-gradient(90deg, var(--dr-accent), var(--dr-teal)); } .dr-give-progress__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 12.5px; color: var(--dr-ink-2); } .dr-give-progress__meta strong { color: var(--dr-ink); } .dr-give-fee { margin-top: 12px; padding: 12px 14px; border: 1px solid var(--dr-line-soft); border-radius: 14px; background: var(--dr-soft); } .dr-give-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 10px 2px 0; font-size: 14px; color: var(--dr-ink-2); } .dr-give-total[hidden] { display: none; } .dr-give-total strong { color: var(--dr-ink); font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; } .dr-give-dedication { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 10px; } .dr-give-dedication [hidden] { display: none; } @media (max-width: 575px) { .dr-give-dedication { grid-template-columns: minmax(0, 1fr); } } .dr-give-supporters { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .dr-give-supporters li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--dr-line-soft); } .dr-give-supporters li:last-child { border-bottom: 0; } .dr-give-supporters__avatar { display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 14px; font-weight: 800; text-transform: uppercase; } .dr-give-supporters__avatar.is-anonymous { background: var(--dr-soft); color: var(--dr-ink-2); font-size: 12px; } .dr-give-supporters__who { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.3; } .dr-give-supporters__who strong { overflow: hidden; color: var(--dr-ink); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .dr-give-supporters__who small { color: var(--dr-ink-2); font-size: 12px; } .dr-give-supporters__tag { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: var(--dr-accent-tint); color: var(--dr-accent); font-size: 11px; font-weight: 800; } .dr-give-story { margin-bottom: 18px; } .dr-give-story .dr-article__inner { padding-bottom: 24px; } .dr-give-story .dr-article__body { max-width: none; margin: 10px 0 0; } .dr-give-story .dr-article__media img { max-height: 420px; width: 100%; object-fit: cover; } /* ========================================================================== Legal pages (privacy policy, terms of use) A CMS rich-text block is a single slab of prose, which is the wrong shape for a document people scan for one clause. These components give a legal page a lede, a contents list, numbered sections and callouts, using the theme's own tokens so the page reads correctly in both colour schemes. Wrap the page body in .dr-legal to opt in. ========================================================================== */ .dr-legal { color: var(--dr-ink-2); font-size: 16px; line-height: 1.72; } .dr-legal > *:first-child { margin-top: 0; } .dr-legal > *:last-child { margin-bottom: 0; } .dr-legal p { margin: 0 0 1.05em; } .dr-legal a { color: var(--dr-accent); text-decoration: none; border-bottom: 1px solid rgba(var(--dr-accent-rgb), .35); } .dr-legal a:hover { border-bottom-color: var(--dr-accent); } .dr-legal strong, .dr-legal b { color: var(--dr-ink); font-weight: 700; } /* The opening statement: what this document is, before any clause. */ .dr-legal__lede { margin: 0 0 32px; padding: 22px 24px; border: 1px solid var(--dr-line-card); border-left: 3px solid var(--dr-accent); border-radius: 0 var(--dr-radius-card) var(--dr-radius-card) 0; background: var(--dr-soft); color: var(--dr-ink); font-size: 17px; line-height: 1.66; } .dr-legal .dr-legal__lede p:last-child { margin-bottom: 0; } /* Contents. A legal page is read by somebody looking for one clause. */ .dr-legal__toc { margin: 0 0 40px; padding: 20px 24px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-surface); box-shadow: var(--dr-shadow-card); } .dr-legal.dr-legal .dr-legal__toc h2 { margin: 0 0 12px; color: var(--dr-ink-3); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .dr-legal .dr-legal__toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; margin: 0; padding: 0; list-style: none; counter-reset: dr-legal-toc; } .dr-legal .dr-legal__toc li { counter-increment: dr-legal-toc; } .dr-legal .dr-legal__toc a { display: block; padding: 5px 0; border: 0; color: var(--dr-ink-2); font-size: 14px; line-height: 1.45; } .dr-legal .dr-legal__toc a::before { content: counter(dr-legal-toc) ". "; color: var(--dr-ink-3); font-variant-numeric: tabular-nums; } .dr-legal .dr-legal__toc a:hover { color: var(--dr-accent); } /* Sections, numbered so a clause can be cited. */ .dr-legal__section { margin: 0 0 40px; scroll-margin-top: 96px; } .dr-legal.dr-legal .dr-legal__section > h2 { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--dr-line); color: var(--dr-ink); font-size: 22px; font-weight: 800; line-height: 1.3; } .dr-legal.dr-legal .dr-legal__section > h2 .dr-legal__num { flex: none; min-width: 32px; color: var(--dr-accent); font-size: 13px; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; } .dr-legal.dr-legal .dr-legal__section h3 { margin: 26px 0 10px; color: var(--dr-ink); font-size: 16px; font-weight: 700; } .dr-legal .dr-legal__section ul, .dr-legal .dr-legal__section ol { margin: 0 0 1.05em; padding-left: 22px; } .dr-legal .dr-legal__section li { margin-bottom: 8px; } /* A commitment the reader should not miss. */ .dr-legal__callout { margin: 22px 0; padding: 18px 20px; border: 1px solid rgba(var(--dr-accent-rgb), .35); border-radius: var(--dr-radius-card); background: var(--dr-accent-tint); color: var(--dr-ink); } .dr-legal .dr-legal__callout p:last-child { margin-bottom: 0; } .dr-legal .dr-legal__callout--warn { border-color: rgba(154, 90, 18, .3); background: var(--dr-warn-tint); } :root[data-theme="dark"] .dr-legal__callout--warn { border-color: rgba(255, 194, 122, .28); } /* Short definitions and retention periods read better as rows than as prose. */ .dr-legal__rows { margin: 0 0 1.05em; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); overflow: hidden; } .dr-legal .dr-legal__row { display: grid; grid-template-columns: minmax(150px, 30%) 1fr; gap: 0 20px; padding: 14px 18px; border-bottom: 1px solid var(--dr-line-card); } .dr-legal .dr-legal__row:last-child { border-bottom: 0; } .dr-legal .dr-legal__row > span:first-child { color: var(--dr-ink); font-weight: 700; font-size: 14px; } .dr-legal .dr-legal__row > span:last-child { font-size: 15px; } /* Closing contact card. */ .dr-legal__contact { margin: 40px 0 0; padding: 24px; border: 1px solid var(--dr-line-card); border-radius: var(--dr-radius-card); background: var(--dr-soft); } .dr-legal.dr-legal .dr-legal__contact h2 { margin: 0 0 10px; color: var(--dr-ink); font-size: 18px; font-weight: 800; } .dr-legal .dr-legal__contact p:last-child { margin-bottom: 0; } .dr-legal .dr-legal__updated { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--dr-line); color: var(--dr-ink-3); font-size: 13px; } @media (max-width: 767.98px) { .dr-legal .dr-legal__toc ol { grid-template-columns: 1fr; } .dr-legal .dr-legal__row { grid-template-columns: 1fr; gap: 4px; } .dr-legal.dr-legal .dr-legal__section > h2 { font-size: 19px; gap: 8px; } }