/* Font Awesome — required by the icons we inject into the accordion headings. An @import must stay at the very top of the file. */ @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'); .article-overview-page .content { row-gap: 0; } /* The site name reads "Seeq Knowledge Base", but the logo beside it already says "Seeq" — relabel it to just "Knowledge Base". Zero out the original text node, then restore the theme's size via the injected pseudo-element (weight/color are inherited). */ .header .header-site-branding a.header-site-name { font-size: 0; } .header .header-site-branding a.header-site-name::after { content: 'Knowledge Base'; font-size: 16px; } .banner { background-image: linear-gradient( 90deg, hsl(207, 100%, 17%) 0%, hsl(207, 100%, 27%) 100% ) !important; hgroup h1 { display: none; } p { font-size: 36px; font-weight: 500; } } /* Layout the tiles into a 2x2 grid on desktop and a column on mobile. */ .article-overview-page { .items.tiles { /* `.pages` is a `subgrid`; span every column so the grid is full width (otherwise it would sit in a single narrow grid track). */ grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; @media (max-width: 700px) { grid-template-columns: 1fr; } > li { margin: 0; padding: 0; list-style: none; } } .tile { position: relative; height: 100%; padding: 26px 28px 28px; border: 1px solid #e3e6e8; border-radius: 12px; background: #fff; transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease; &:hover { border-color: #003057; box-shadow: 0 10px 28px rgba(0, 48, 87, 0.14); transform: translateY(-2px); } } .tile-title { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; .fas { flex: none; width: 1.4rem; color: #003057; font-size: 1.4rem; text-align: center; } a { color: #003057; text-decoration: none; &::after { content: ''; position: absolute; inset: 0; } } } .tile-text { color: #5a6470; line-height: 1.5; } } /* While the modal is open, lock scrolling on the page behind it so the modal's own content is the only scroll context (custom.js toggles this on ). Without it the background scrolls too — a confusing second scrollbar. */ html.sq-modal-open { overflow: hidden; } #sq-training-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 48, 87, 0.55); /* `sq-gone` hides the whole modal (on the root) or its toggled inner bits. */ &.sq-gone, .sq-gone { display: none !important; } .sq-training-modal-card { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 780px; max-height: 85vh; background: white; border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); overflow: hidden; } .sq-close { position: absolute; top: 10px; right: 12px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px; background: transparent; color: #5a6470; font-size: 26px; line-height: 1; cursor: pointer; &:hover { background: #f0f1f2; color: #000; } } .sq-scrollable-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 40px 44px 44px; color: #2b333b; line-height: 1.55; } /* Hero: title + the two value-prop benefits, each with a check. Left-aligned so the checks share the same left rail as the numbered steps below. */ .sq-modal-hero { h2 { margin: 0 0 16px; font-size: 1.5rem; font-weight: 700; color: #003057; } } .sq-benefits { margin: 0; padding: 0; list-style: none; li { display: flex; align-items: baseline; gap: 10px; color: #5a6470; } li + li { margin-top: 8px; } .fas { flex: none; color: #003057; font-size: 0.85rem; } } /* Each content section is separated by a hairline divider and even spacing. */ .sq-modal-section { margin-top: 28px; padding-top: 28px; border-top: 1px solid #e7eaec; > h3 { margin: 0 0 18px; font-size: 1.15rem; font-weight: 600; color: #003057; } > p { margin: 0 0 20px; } } /* Numbered steps with circular badges (via a CSS counter). */ .sq-steps { margin: 0 0 24px; padding: 0; list-style: none; counter-reset: sq-step; li { display: flex; align-items: flex-start; gap: 14px; counter-increment: sq-step; } li + li { margin-top: 18px; } li::before { content: counter(sq-step); flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #003057; color: #fff; font-size: 0.9rem; font-weight: 600; } } .sq-step-body { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; } .sq-step-title { font-weight: 600; color: #1c2530; } .sq-step-desc { color: #5a6470; font-size: 0.95rem; } /* Action row: a primary/secondary button plus an optional inline note. */ .sq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .sq-actions-note { color: #5a6470; font-size: 0.9rem; } .sq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 22px; border: 1.5px solid transparent; border-radius: 8px; font-size: 0.95rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .sq-btn-primary { background: #003057; color: #fff !important; &:hover { background: #004c8a; } } /* Calendar schedule: loads automatically when the modal opens. While it's fetching we show a spinner + label; on failure, a link to the live site. */ #sq-training-schedule { margin-top: 4px; } .sq-schedule-status { display: flex; align-items: center; gap: 10px; color: #5a6470; font-size: 0.95rem; &.sq-schedule-error a { color: #003057; } } .sq-training-course + .sq-training-course { margin-top: 32px; } .sq-training-course { h4 { margin: 0 0 6px; font-size: 1rem; font-weight: 600; color: #003057; } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; /* Reset the Confluence/Scroll theme's default table chrome (vertical grid borders, header background) so only our hairline rows remain. */ border: 0; } /* Quiet, letter-spaced column labels — the "designed" header treatment. Symmetric horizontal padding gives each column even breathing room. */ thead th { padding: 8px 18px; text-align: left; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #97a0ab; white-space: nowrap; background: none; border: 0; border-bottom: 1px solid #e4e8ec; } tbody td { padding: 13px 18px; text-align: left; vertical-align: top; color: #5a6470; background: none; border: 0; border-bottom: 1px solid #eef1f3; } tbody tr:last-child td { border-bottom: none; } /* The first column aligns flush with the content rail; the last sits flush with the right edge. Inner columns keep padding on both sides. */ th:first-child, td:first-child { width: 100%; padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } td:first-child { color: #1c2530; font-weight: 500; } th:not(:first-child), td:not(:first-child) { white-space: nowrap; } /* Right-aligned, tabular counts so the seat numbers line up. */ .sq-num { text-align: right; font-variant-numeric: tabular-nums; } } /* Spinner shown beside the "Loading upcoming sessions…" label. */ #sq-loader { width: 16px; height: 16px; border: 2px solid rgba(0, 48, 87, 0.25); border-top-color: #003057; border-radius: 50%; animation: sq-spin 0.8s linear infinite; } /* Mobile: full-viewport card and tighter padding. */ @media (max-width: 600px) { padding: 0; .sq-training-modal-card { max-width: none; max-height: 100%; height: 100%; border-radius: 0; } .sq-scrollable-content { padding: 32px 22px 36px; } /* A 4-column table doesn't fit a phone, so stack each session into a card: the session name as a heading, then label/value rows for the rest. The labels come from each cell's data-label (set in custom.js). */ .sq-training-course table, .sq-training-course tbody, .sq-training-course tr, .sq-training-course td { display: block; width: auto; } .sq-training-course thead { display: none; } .sq-training-course tr { padding: 16px 0; border-bottom: 1px solid #eef1f3; } .sq-training-course tr:last-child { border-bottom: none; } .sq-training-course td { padding: 0; border: none; white-space: normal; } /* Session name = the card heading. */ .sq-training-course td:first-child { margin-bottom: 10px; color: #1c2530; font-weight: 600; } /* Remaining fields: muted label on the left, value on the right. */ .sq-training-course td:not(:first-child) { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-size: 0.9rem; } .sq-training-course td:not(:first-child)::before { content: attr(data-label); color: #97a0ab; } /* In stacked mode the value sits at the row's right via flex, not text-align. */ .sq-num { text-align: left; } } } /* Spinner used by #sq-loader */ @keyframes sq-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }