/**
* Teacher onboarding tour — Bootstrap-popover-styled Shepherd theme.
*
* Loaded AFTER vendors/css/extensions/shepherd-theme-default.css in
* themes/app/views/layouts/teacherlayout-new.blade.php. Scoped to
* `.shepherd-pandai` (set via defaultStepOptions.classes in
* teacher-onboarding-tour.js) so it never affects the pre-existing erph
* lesson-planner tour.
*
* IMPORTANT: this tour does NOT use Shepherd's `useModalOverlay` (the dimmed
* spotlight backdrop) — the vendored v2.5.0 theme's CSS forces
* `pointer-events:none` on every element except the current target while
* that's active, which makes Bootstrap modals completely unclickable (see
* docs/dev-plan/teacher-onboarding-tour/known-issues.md). Instead, the
* highlighted target gets `.pandai-tour-highlight` (a plain outline/glow —
* no overlay, no stacking/pointer-events implications at all).
*
* Also note: this vendored bundle is Shepherd v2.5.0, not v8 — class names
* like `.shepherd-cancel-icon` / `.shepherd-arrow` (which an AI or a dev
* copying docs for a newer Shepherd version would reach for) don't exist in
* this build and silently do nothing. The real v2.5 equivalents are
* `.shepherd-cancel-link` and `.tippy-arrow` (the arrow lives outside the
* `.shepherd-pandai` element's own subtree — see known-issues.md for why it
* can't be scoped per-tour with a simple descendant selector).
*/
/**
* Palette. `--primary` in the teacher theme (css/colors-teacher.css) is
* #ff60a1 — the same pink as the "Create paper" / "Search" buttons, so the
* coachmark's primary action reads as the same control the teacher already
* knows. #9CA3AF is the neutral used for the secondary border and the
* text-only tertiary action.
*/
/**
* ============================================================================
* CONTAINER — ported from the parent-onboarding popover on pm/firdaus
* (themes/app/views/parent/onboarding-popover-theme.blade.php), retinted from
* that flow's green to the TEACHER primary #ff60a1.
*
* Everything here is scoped to `.pandai-tour-popper`, the class
* teacher-onboarding-tour.js stamps on this tour's popper (tagActivePopper(),
* called from startActiveTour() on every step). Without that scope these rules
* would restyle the legacy erph lesson-planner tour too, which shares the same
* Shepherd build.
* ============================================================================
*/
/**
* 320px matches the onboarding checklist so the two floating surfaces in this
* flow read as one family.
*
* GLOW, NOT SHADOW. There is no dark elevation shadow anywhere on the card —
* the 1px hairline carries the edge and the pink bloom carries the presence.
*
* The bloom lives HERE, on the tooltip wrapper, and is a `filter: drop-shadow`
* rather than a `box-shadow` on the card. drop-shadow follows the rendered
* silhouette, so card + arrow glow as one shape; a box-shadow on
* `.shepherd-content` boxes off the card and leaves the tip sticking out
* unlit. `box-shadow: none` here kills the vendor skin's own and Tippy's
* injected one, which would otherwise show as a grey edge under the pink.
*
* Alpha is well under solid #ff60a1: that value is calibrated for a small
* badge, and spread around a 320px card it reads as a hard rim rather than a
* bloom. Same 10px/0.28 recipe as --ob-glow on the onboarding checklist, so the
* two floating surfaces in this flow glow identically.
*/
.tippy-popper.pandai-tour-popper .tippy-tooltip,
/* Keyed on the tooltip's OWN class as well as the popper's, so the pink glow
does not depend on the popper→tooltip descendant chain resolving. Both are
stamped by tagActivePopper() in teacher-onboarding-tour.js. */
.tippy-tooltip.pandai-tour-tooltip {
width: 320px;
max-width: calc(100vw - 32px);
padding: 0;
background: transparent;
/* Tippy's injected sheet centres tooltip text (it is built for one-line
hints). Reset to left so title and body read as a paragraph; the footer
rule below keeps the buttons right-aligned. */
text-align: left;
box-shadow: none;
filter: drop-shadow(0 0 10px rgba(255, 96, 161, 0.28));
}
/**
* These quiz-builder info steps sit above select/select2 fields inside a
* Bootstrap modal. select2 renders its menu at z-index 1051 there, so keep
* these specific poppers at 1050 and let the dropdown paint above them.
*/
.tippy-popper.pandai-tour-popper--qb_info_syllabus,
.tippy-popper.pandai-tour-popper--qb_info_year,
.tippy-popper.pandai-tour-popper--qb_info_subject,
.tippy-popper.pandai-tour-popper--qb_info_language {
z-index: 1050 !important;
}
/**
* Tippy's animateFill mode (on by default) injects
* `.tippy-tooltip[data-animatefill]{overflow:hidden}`. The arrow sits outside
* the tooltip box at -6px, so on any step in that mode the tip is clipped and
* the glow silhouette collapses to a bare rectangle — which is why the effect
* would appear on some popovers and not others. animateFill also inserts a
* decorative `.tippy-backdrop` that would show through the transparent card.
*/
.tippy-popper.pandai-tour-popper .tippy-tooltip[data-animatefill] {
overflow: visible;
background-color: transparent;
}
.tippy-popper.pandai-tour-popper .tippy-backdrop {
display: none;
}
.shepherd-pandai.shepherd-element {
background: transparent;
filter: none;
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 100%;
}
.shepherd-pandai .shepherd-header {
background: #ffffff;
border-radius: 10px 10px 0 0;
padding: 1rem 1rem 0.25rem;
}
.shepherd-pandai .shepherd-title {
color: #1e1e1e;
font-size: 1.05rem;
font-weight: 600;
}
/**
* Horizontal insets are dropped here and taken by `.shepherd-content`'s 16px
* padding, so all four sides match. The vertical values keep Shepherd's own
* rhythm — 12px title-to-text, 16px text-to-buttons. Deep chains because
* tour.css sets both through a five-level selector.
*/
/**
* 1em, deliberately — the card sets the absolute size (see `.shepherd-content`
* below) and every part of the contents is sized in em against it, exactly as
* firdaus's spec does. An absolute rem here is what inverted the hierarchy:
* the body was pinned at 0.9rem while the title's 1.05em resolved against
* Tippy's own reduced context, leaving the title SMALLER than the copy under it.
*/
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-content .shepherd-text {
font-size: 1em;
line-height: 1.5;
padding: 12px 0 0;
}
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-content .shepherd-footer {
justify-content: flex-end;
padding: 16px 0 0;
}
/**
* Title bar fix.
*
* The legacy vendor theme (css/plugins/tour/tour.css, loaded first and still
* needed by the erph lesson-planner tour) paints the popup body green with a
* five-level selector:
* .tippy-popper .tippy-tooltip .tippy-content .shepherd-content { background: #43b67b }
* That out-specifies `.shepherd-pandai .shepherd-header`'s white background —
* which is why the header rendered as a stray pale strip sitting on top of the
* green body, looking like an unstyled heading element. Match that selector's
* specificity so the header simply inherits the body colour, and put the title
* copy on the same white as the body text.
*/
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-header {
background: transparent;
padding: 0 0 0.35rem;
}
/**
* `display: block` overrides the vendor theme's
* `.shepherd-element .shepherd-content header .shepherd-title { display: flex }`
* — as a flex container it laid the step counter out as a sibling COLUMN next
* to the title text ("STEP 1 OF 4Start with a quiz" on one line) instead of
* stacking them.
*/
/**
* Title. PRIMARY-COLOURED, not near-black: this is firdaus's contents spec from
* the parent flow (`.shepherd-title { color: #28C76F }`), retinted to the
* teacher pink. On a 320px card with a 1px pink hairline, a coloured title ties
* the copy to the frame; a dark one reads as a generic dialog heading.
*
* 1.05em, matching that spec — em rather than rem so it tracks the card's own
* font-size if the theme ever rescales the tooltip.
*/
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-title {
color: #ff60a1;
display: block;
font-size: 1.05em;
font-weight: 600;
}
/** "Step 2 of 4" — sits above the title, quieter than it. */
.shepherd-pandai .shepherd-step-counter {
color: #9ca3af;
display: block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.06em;
margin-bottom: 0.15rem;
text-transform: uppercase;
}
/**
* Body copy. `tour.css` paints it white for the green surface through a
* five-level chain, so this needs six to put it back on a readable grey.
* #4b4b4b is firdaus's contents value — a touch darker than the theme's
* #4e5154 muted text, which matters at 0.9rem inside a bordered card.
*/
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-content .shepherd-text {
color: #4b4b4b;
}
/**
* Buttons — three tiers, following firdaus's contents spec (filled secondary,
* not an outline) with one teacher-only addition.
* primary NEXT filled Pandai pink, white text
* secondary BACK filled #F1F2F3, #6E6B7B text, no border
* tertiary SKIP TOUR text only, #6E6B7B (teacher-only — the parent flow has
* no third tier; it takes the same neutral as secondary
* so the two quiet actions read as one family)
*
* The tier is set per-button in teacher-onboarding-tour.js via Shepherd's
* `classes` option; anything without a tier class is primary.
*/
.shepherd-pandai .shepherd-button {
background: #ff60a1;
border: 1px solid #ff60a1;
border-radius: 5px;
color: #ffffff;
font-size: 0.85em;
/* Bold on every tier alike — at .85em the labels are small enough that
regular weight reads soft against the fill. Ported from pm/firdaus. */
font-weight: 700;
letter-spacing: normal;
padding: 0.6em 1.4em;
text-transform: none;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.shepherd-pandai .shepherd-button:not(:disabled):hover {
background: #f5478f;
border-color: #f5478f;
color: #ffffff;
}
.shepherd-pandai .shepherd-button.shepherd-button-secondary {
background: #f1f2f3;
border-color: #f1f2f3;
color: #6e6b7b;
}
.shepherd-pandai .shepherd-button.shepherd-button-secondary:not(:disabled):hover {
background: #e4e6e8;
border-color: #e4e6e8;
color: #4b4b4b;
}
.shepherd-pandai .shepherd-button.shepherd-button-tertiary {
background: transparent;
border-color: transparent;
color: #6e6b7b;
}
.shepherd-pandai .shepherd-button.shepherd-button-tertiary:not(:disabled):hover {
background: transparent;
border-color: transparent;
color: #4b4b4b;
}
/** Tertiary is the quiet opt-out — push it away from the two real actions. */
.shepherd-pandai .shepherd-buttons li:first-child .shepherd-button.shepherd-button-tertiary {
margin-right: auto;
}
/* Progress dots (if a future step adds them via .shepherd-pandai-progress) */
.shepherd-pandai-progress {
color: #b7b7b7;
font-size: 0.75rem;
margin-right: auto;
padding-left: 1rem;
}
/**
* Compact footer/box.
*
* SPECIFICITY NOTE: the pre-existing lesson-planner stylesheet
* `css/plugins/tour/tour.css` (loaded one line BEFORE this file in
* teacherlayout-new.blade.php) styles every Shepherd tooltip on the page
* through a 7-level chain
* (`.tippy-popper .tippy-tooltip .tippy-content .shepherd-content
* .shepherd-footer .shepherd-buttons .shepherd-button`), which is why this
* tour renders green rather than in the white style above. Anything that has
* to win against it needs an equally deep selector — hence the chain below.
*
* This matters for more than looks: `tour.css`'s 2rem button padding pushed
* the three buttons onto two rows, making the tooltip tall enough to bury the
* field underneath it. Keeping the box small is half of "don't block
* anything" (the other half is dodgeOverlap() in teacher-onboarding-tour.js).
*/
/**
* Card surface. Ported from the pm/firdaus popover: a full 1px primary hairline
* on all four sides, which the arrow's own two outer edges continue around the
* tip. This REPLACES the old 4px pink left bar — the bar and a bordered arrow
* cannot coexist, since the bar only reads as chrome on three sides and the
* hairline has to close the silhouette.
*
* Radius follows Shepherd (5px) on all four corners: the vendor already rounds
* the header's top two and the footer's bottom two to 5px, so anything else
* leaves the corners inconsistent. The arrow keeps its own 2px tip radius.
*
* The 16px inset lives here rather than on header/text/footer so every side
* matches — Shepherd's own insets are uneven (1em header and text, .75em
* footer), which left the buttons 4px closer to the edge than the copy above.
*/
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-content {
position: relative;
background-color: #ffffff;
border: 1px solid #ff60a1;
border-radius: 5px;
/* No shadow here on purpose — the glow is a drop-shadow on the tooltip
wrapper (top of this file) so it traces card AND arrow as one silhouette.
A box-shadow at this level would box off the card and double up. */
box-shadow: none;
/* The card is the type anchor for everything inside it. Tippy nests two
font-size reductions above this point, so em units resolved against ~12px
and the contents came out roughly 13% under spec. Fixing the size HERE lets
title (1.05em), body (1em) and buttons (.85em) keep firdaus's exact
proportions.
1rem, not 0.9 — the app's root and body are both 14px, so this is the same
14px base the parent flow's popover inherits from the page. Anything less
reproduces the proportions at the wrong absolute size. */
font-size: 1rem;
max-width: 320px;
padding: 16px;
}
/* Each tier's own colours are set above; only the box metrics need this depth
to beat tour.css's 2rem padding, which used to wrap three buttons onto two
rows and make the tooltip tall enough to bury the field underneath it. */
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-content .shepherd-footer .shepherd-buttons .shepherd-button {
background-color: #ff60a1;
border: 1px solid #ff60a1;
border-radius: 5px;
color: #ffffff;
/* .85em from firdaus's spec. It has to be restated at this depth: tour.css
sets the button's font-size through its own 7-level chain, so the shallow
`.shepherd-pandai .shepherd-button` rule above never reaches it. */
font-size: 0.85em;
font-weight: 700;
letter-spacing: normal;
margin: 0 0 0 6px;
padding: 0.6em 1.4em;
text-transform: none;
white-space: nowrap;
}
/**
* Disabled tier — ported from pm/firdaus, where `.pandai-next-btn` is a marker
* the tour JS toggles `.shepherd-button-disabled` on to gate Next behind field
* validity. No teacher step gates its Next today, so nothing sets this class
* yet; the styling is here so gating a step is a one-line JS change rather
* than a CSS round-trip. `pointer-events:none` is what actually blocks the
* click — Shepherd's button handler is bound to the element, not a form
* control, so `:disabled` never applies.
*/
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-content .shepherd-footer .shepherd-buttons .shepherd-button.shepherd-button-disabled {
cursor: not-allowed;
opacity: 0.5;
pointer-events: none;
}
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-content .shepherd-footer .shepherd-buttons .shepherd-button:hover {
background-color: #f5478f;
border-color: #f5478f;
}
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-content .shepherd-footer .shepherd-buttons .shepherd-button.shepherd-button-secondary {
background-color: #f1f2f3;
border-color: #f1f2f3;
color: #6e6b7b;
}
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-content .shepherd-footer .shepherd-buttons .shepherd-button.shepherd-button-secondary:hover {
background-color: #e4e6e8;
border-color: #e4e6e8;
color: #4b4b4b;
}
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-content .shepherd-footer .shepherd-buttons .shepherd-button.shepherd-button-tertiary {
background-color: transparent;
border-color: transparent;
color: #6e6b7b;
}
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai .shepherd-content .shepherd-footer .shepherd-buttons .shepherd-button.shepherd-button-tertiary:hover {
background-color: transparent;
border-color: transparent;
color: #4b4b4b;
}
/**
* Arrow.
*
* `.tippy-arrow` is a SIBLING of `.tippy-content`, so it sits outside the
* `.shepherd-pandai` element and no descendant selector can reach it — which is
* why `tour.css` was still painting it erph-green on a white card. The tour
* tags its own popper with `.pandai-tour-popper` from startActiveTour()
* (teacher-onboarding-tour.js) purely so these rules have something to hook,
* leaving the lesson-planner tour's arrow green.
*/
/**
* A 12px square rotated 45deg and tucked half-way into the card edge, so tip
* and card are one shape. The default skin draws a 16px CSS-border triangle
* coloured from the grey default skin; on a white card that reads as a
* detached tip.
*
* Tippy keeps setting the cross-axis offset inline (left for top/bottom, top
* for left/right) so the tip stays over the target; only the main-axis offset
* is set here. -6px on a 12px square leaves exactly half showing. z-index
* lifts the square above the card so its fill covers the card's border where
* the two overlap; the square's own two outer edges then carry that border
* around the tip. Without it the card border runs across the arrow's base.
*
* SPECIFICITY: three stylesheets style this element — Tippy injects its own at
* runtime (document.head.firstChild), then shepherd-theme-default.css, then
* this file. Order alone is not enough: both style the arrow through
* `.tippy-popper[x-placement^=...] .tippy-arrow`, which is (0,3,0). A (0,2,0)
* reset loses no matter how late it appears, leaving the injected
* `border-bottom:8px solid #333` alive as a stray wedge. So the reset below is
* (0,3,0) and the per-placement rules are (0,4,0), clearing both sheets.
*/
.tippy-popper.pandai-tour-popper .tippy-tooltip .tippy-arrow {
background: #ffffff;
border: 0;
border-radius: 0;
box-sizing: border-box;
height: 12px;
margin: 0; /* clears Tippy's injected `margin:0 3px` / `margin:3px 0` */
transform: rotate(45deg);
/* Tippy's injected sheet sets a per-placement transform-origin (50% 100%,
0 50%, ...). Rotating about an edge swings the square off its own box,
pushing the tip off-centre and lifting it clear of the card edge. Rotate
in place so exactly half the square overlaps the card — that overlap is
what snaps the tip to the edge. */
transform-origin: center center;
width: 12px;
z-index: 1;
}
/* 10px between target and arrow tip. */
.tippy-popper.pandai-tour-popper[x-placement^='top'] { margin-bottom: 10px; }
.tippy-popper.pandai-tour-popper[x-placement^='bottom'] { margin-top: 10px; }
.tippy-popper.pandai-tour-popper[x-placement^='left'] { margin-right: 10px; }
.tippy-popper.pandai-tour-popper[x-placement^='right'] { margin-left: 10px; }
/**
* Only the two edges facing away from the card carry the hairline, and the
* corner they share is the tip — so the line runs card edge → up one side of
* the tip → down the other → back to the card edge.
*
* No `!important` on the cross-axis offsets: Popper writes `left`/`top` inline
* on every reposition so the tip tracks the target's midpoint through resize,
* scroll and flip. The values here are only the first-paint fallback.
*/
.tippy-popper.pandai-tour-popper[x-placement^='top'] .tippy-tooltip .tippy-arrow {
border-bottom: 1px solid #ff60a1;
border-bottom-right-radius: 2px;
border-right: 1px solid #ff60a1;
bottom: -6px;
left: calc(50% - 6px);
top: auto;
}
.tippy-popper.pandai-tour-popper[x-placement^='bottom'] .tippy-tooltip .tippy-arrow {
border-left: 1px solid #ff60a1;
border-top: 1px solid #ff60a1;
border-top-left-radius: 2px;
bottom: auto;
left: calc(50% - 6px);
top: -6px;
}
.tippy-popper.pandai-tour-popper[x-placement^='left'] .tippy-tooltip .tippy-arrow {
border-right: 1px solid #ff60a1;
border-top: 1px solid #ff60a1;
border-top-right-radius: 2px;
left: auto;
right: -6px;
top: calc(50% - 6px);
}
.tippy-popper.pandai-tour-popper[x-placement^='right'] .tippy-tooltip .tippy-arrow {
border-bottom: 1px solid #ff60a1;
border-bottom-left-radius: 2px;
border-left: 1px solid #ff60a1;
left: -6px;
right: auto;
top: calc(50% - 6px);
}
@media (max-width: 575.98px) {
.tippy-popper.pandai-tour-popper .tippy-tooltip {
width: calc(100vw - 32px);
}
}
/**
* ============================================================================
* WELCOME — the opener is a centered DIALOG, not a coachmark
* ----------------------------------------------------------------------------
* Modelled on the parent flow's `#parent-welcome-modal` (pm/firdaus,
* parent/onboarding-tour.blade.php), retinted to the teacher pink: a tinted
* icon disc, a dark title, muted centered copy, one full-width primary action,
* and the opt-out demoted to a text link beneath it.
*
* The parent flow builds that as a real Bootstrap modal. The teacher flow can't
* — its welcome is a Shepherd bridge step with no `attachTo`, because the same
* step machinery also owns the "start the tour" side effects (pingDismiss,
* resumeUrl, the deep-linked redirect). So the modal is reproduced on the
* Shepherd surface instead of being rebuilt as markup.
*
* Scoped to `.shepherd-pandai-welcome` (set on the step in
* teacher-onboarding-tour.js) plus `.pandai-tour-popper--welcome` on the
* wrapper, so none of it reaches the other bridge steps — the section
* hand-offs and the all-set screen stay 320px coachmarks.
* ============================================================================
*/
/**
* Scrim. Element is created/removed by showTourBackdrop()/hideTourBackdrop() in
* teacher-onboarding-tour.js — deliberately NOT Shepherd's `useModalOverlay`,
* whose CSS disables pointer events on the whole page for the rest of the tour
* (see the file header and known-issues.md).
*
* z-index sits one below Tippy's popper (9999, set by
* shepherd-theme-default.css) so the dialog stays above its own scrim, and well
* above the page. #22303f at 50% is the theme's modal-backdrop weight.
*
* `pointer-events` stays at its default: the scrim swallows clicks on the page
* behind it, which is the whole point — but it has no dismiss handler, matching
* the parent flow's `data-backdrop="static"` welcome modal.
*/
.pandai-tour-backdrop {
background-color: rgba(34, 41, 47, 0.5);
bottom: 0;
left: 0;
opacity: 0;
position: fixed;
right: 0;
top: 0;
transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
z-index: 9998;
}
.pandai-tour-backdrop.is-visible {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.pandai-tour-backdrop {
transition: none;
}
}
/**
* Wider than a coachmark. 420px is the dialog's own measure: at the tooltip's
* 320px the title wraps to three lines and the icon disc dominates the card.
* This is why the step needed a wrapper hook at all — width lives on
* `.tippy-tooltip`, which no step class can reach from inside `.tippy-content`.
*/
.tippy-popper.pandai-tour-popper.pandai-tour-popper--welcome .tippy-tooltip {
width: 420px;
max-width: calc(100vw - 32px);
}
/** A centered dialog points at nothing. */
.tippy-popper.pandai-tour-popper--welcome .tippy-tooltip .tippy-arrow {
display: none;
}
/**
* No glow on the wrapper. The coachmarks bloom because they are unframed
* objects floating over a live page and need to separate themselves from it;
* a modal has a scrim doing that job, and the theme's own `.modal-content`
* carries no glow at all. Kept as `filter: none` rather than by narrowing the
* coachmark rule, so the two surfaces stay independently adjustable.
*/
.tippy-popper.pandai-tour-popper--welcome .tippy-tooltip {
filter: none;
}
/**
* 24px on all four sides — the parent flow's single modal inset
* (parent/onboarding-modal-theme.blade.php), which exists because Bootstrap's
* own header/body/footer insets disagree by 3.2px. Same reasoning here, applied
* to the one surface.
*/
/**
* Theme modal chrome, measured off a real `.modal-content` on a teacher page:
* no border at all, 8.4px radius, `0 5px 20px 0 rgba(0,0,0,.1)`. The coachmark's
* 1px pink hairline + 5px radius is coachmark language — a Pandai modal is a
* plain white sheet that relies on its backdrop for separation, and the border
* is what made this read as an oversized tooltip rather than a dialog.
*/
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai-welcome .shepherd-content {
border: 0;
border-radius: 8.4px;
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.1);
/* The coachmark card is capped at 320px; without lifting that cap here the
dialog stays 320 wide inside a 420 tooltip and just floats off-centre. */
max-width: none;
padding: 24px;
text-align: center;
}
/**
* Icon disc. Drawn as a pseudo-element rather than markup so the step keeps
* taking plain `title`/`text` phrases and stays translatable — putting an
* / in the copy would mean HTML in the language files.
*
* The glyph is an inline SVG data URI: no dependency on whichever icon font
* happens to be loaded on the page (the theme carries both Feather and Font
* Awesome, and neither is guaranteed on every teacher layout), and it inherits
* no font metrics that could shift it off-centre. Mortarboard, for a teacher —
* the parent flow uses a child.
*/
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai-welcome .shepherd-header::before {
content: '';
display: block;
width: 64px;
height: 64px;
margin: 0 auto 16px;
border-radius: 50%;
/* #FFEEF5 is #ff60a1 at ~8% over white — the pink counterpart of the parent
disc's #E6F9EF, which is its green at the same weight. */
background-color: #ffeef5;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
}
/**
* `display: block` is load-bearing: the vendor skin makes the header a flex
* container, which turns the icon disc above into a flex ITEM sitting beside
* the title rather than a centered block above it. `margin: 0 auto` cannot
* centre a flex item.
*/
.tippy-popper .tippy-tooltip .tippy-content .shepherd-pandai-welcome .shepherd-header {
display: block;
padding: 0;
text-align: center;
}
/**
* Dark, not pink. Coachmark titles take the primary colour (see the contents
* block above), but this one sits under a pink disc and above pink chrome —
* a third pink element turns the card into a wash. The parent modal makes the
* same call: its tooltips are green-titled, its welcome modal's