/* ============================================================ Sterling Admissions: sterling-ui.css The one design system. Every page loads it after its own stylesheet, so the tokens and components here win. Page sheets (home.css, site.css, brand.css, app.css, admin.css, call.css) keep only layout for their own screens; injected module styles (intake.js, insights.js, app-tips.js, app-delight.js) no longer define buttons, links or cards. Voice: engraved, calm, alive. Ink and paper rather than light: fills soak in from the left, lines are drawn, plates press 2px into a solid ledge. No glows, no gradients as decoration, no blur bigger than a hairline, no pills. The tern is never rotated or tilted: the loader beats its wings, the bird stays level. Owner-approved change to the old "no shadows, no press" rule: buttons sit on a solid 2px ledge and sink into it; clickable cards may carry one hairline shadow when lifted. Nothing else casts a shadow except floating layers (modal, toast). Contents 1 tokens: colour, type, space, widths, radii, elevation, motion 2 base and focus 3 buttons (roles, sizes, slots, states) and legacy aliases 4 links 5 cards and surfaces 6 chips, tags, selection, badges, seals, tokens 7 forms, toggles, segmented control 8 tabs 9 progress, stars, streak marks 10 loader, toasts, modals and sheets, empty states, action bar 11 marketing chrome (header, menu, footer) 12 touch, reduced motion, print ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ /* tokens: brand.css (loaded first on every page) */ /* drawn assets (generated from logo.js geometry; never redrawn) */ --sui-ternLight:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 318 95 104'%3E%3Cstyle%3E.l,.r,.b%7Btransform-box:view-box;transform-origin:151.5px 364px%7D.l%7Banimation:l .44s ease-in-out infinite alternate%7D.r%7Banimation:r .44s ease-in-out infinite alternate%7D.b%7Banimation:b .44s ease-in-out infinite alternate%7D@keyframes l%7Bfrom%7Btransform:skewY(11deg)%7Dto%7Btransform:skewY(-9deg)%7D%7D@keyframes r%7Bfrom%7Btransform:skewY(-11deg)%7Dto%7Btransform:skewY(9deg)%7D%7D@keyframes b%7Bfrom%7Btransform:translateY(-1.2px)%7Dto%7Btransform:translateY(1.2px)%7D%7D@media (prefers-reduced-motion:reduce)%7B.l,.r,.b%7Banimation:none%7D%7D%3C/style%3E%3Cg class='l'%3E%3Cpath fill='%232E8FD6' d='M151.5 389.88 L108.8 330.77 C129.61 335.14 142.74 347.19 151.5 362.52 Z'/%3E%3C/g%3E%3Cg class='r'%3E%3Cpath fill='%234FA9E8' d='M151.5 389.88 L194.2 330.77 C173.39 335.14 160.26 347.19 151.5 362.52 Z'/%3E%3C/g%3E%3Cg class='b'%3E%3Cpath fill='%234FA9E8' d='M147.4 384.6 C146.6 395 144.2 405 139.6 416.4 C145.3 408.6 149.2 400.6 151.5 393.2 C153.8 400.6 157.7 408.6 163.4 416.4 C158.8 405 156.4 395 155.6 384.6 L151.5 389.9 Z'/%3E%3Cellipse fill='%2314324F' cx='151.5' cy='357.6' rx='4.4' ry='4.9'/%3E%3C/g%3E%3C/svg%3E"); --sui-ternLightStill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 318 95 104'%3E%3Cg class='l'%3E%3Cpath fill='%232E8FD6' d='M151.5 389.88 L108.8 330.77 C129.61 335.14 142.74 347.19 151.5 362.52 Z'/%3E%3C/g%3E%3Cg class='r'%3E%3Cpath fill='%234FA9E8' d='M151.5 389.88 L194.2 330.77 C173.39 335.14 160.26 347.19 151.5 362.52 Z'/%3E%3C/g%3E%3Cg class='b'%3E%3Cpath fill='%234FA9E8' d='M147.4 384.6 C146.6 395 144.2 405 139.6 416.4 C145.3 408.6 149.2 400.6 151.5 393.2 C153.8 400.6 157.7 408.6 163.4 416.4 C158.8 405 156.4 395 155.6 384.6 L151.5 389.9 Z'/%3E%3Cellipse fill='%2314324F' cx='151.5' cy='357.6' rx='4.4' ry='4.9'/%3E%3C/g%3E%3C/svg%3E"); --sui-ternNavy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 318 95 104'%3E%3Cstyle%3E.l,.r,.b%7Btransform-box:view-box;transform-origin:151.5px 364px%7D.l%7Banimation:l .44s ease-in-out infinite alternate%7D.r%7Banimation:r .44s ease-in-out infinite alternate%7D.b%7Banimation:b .44s ease-in-out infinite alternate%7D@keyframes l%7Bfrom%7Btransform:skewY(11deg)%7Dto%7Btransform:skewY(-9deg)%7D%7D@keyframes r%7Bfrom%7Btransform:skewY(-11deg)%7Dto%7Btransform:skewY(9deg)%7D%7D@keyframes b%7Bfrom%7Btransform:translateY(-1.2px)%7Dto%7Btransform:translateY(1.2px)%7D%7D@media (prefers-reduced-motion:reduce)%7B.l,.r,.b%7Banimation:none%7D%7D%3C/style%3E%3Cg class='l'%3E%3Cpath fill='%23F7F2E8' d='M151.5 389.88 L108.8 330.77 C129.61 335.14 142.74 347.19 151.5 362.52 Z'/%3E%3C/g%3E%3Cg class='r'%3E%3Cpath fill='%234FA9E8' d='M151.5 389.88 L194.2 330.77 C173.39 335.14 160.26 347.19 151.5 362.52 Z'/%3E%3C/g%3E%3Cg class='b'%3E%3Cpath fill='%234FA9E8' d='M147.4 384.6 C146.6 395 144.2 405 139.6 416.4 C145.3 408.6 149.2 400.6 151.5 393.2 C153.8 400.6 157.7 408.6 163.4 416.4 C158.8 405 156.4 395 155.6 384.6 L151.5 389.9 Z'/%3E%3Cellipse fill='%23F7F2E8' cx='151.5' cy='357.6' rx='4.4' ry='4.9'/%3E%3C/g%3E%3C/svg%3E"); --sui-ternNavyStill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 318 95 104'%3E%3Cg class='l'%3E%3Cpath fill='%23F7F2E8' d='M151.5 389.88 L108.8 330.77 C129.61 335.14 142.74 347.19 151.5 362.52 Z'/%3E%3C/g%3E%3Cg class='r'%3E%3Cpath fill='%234FA9E8' d='M151.5 389.88 L194.2 330.77 C173.39 335.14 160.26 347.19 151.5 362.52 Z'/%3E%3C/g%3E%3Cg class='b'%3E%3Cpath fill='%234FA9E8' d='M147.4 384.6 C146.6 395 144.2 405 139.6 416.4 C145.3 408.6 149.2 400.6 151.5 393.2 C153.8 400.6 157.7 408.6 163.4 416.4 C158.8 405 156.4 395 155.6 384.6 L151.5 389.9 Z'/%3E%3Cellipse fill='%23F7F2E8' cx='151.5' cy='357.6' rx='4.4' ry='4.9'/%3E%3C/g%3E%3C/svg%3E"); --sui-tickPaper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cstyle%3Epath%7Bstroke-dasharray:20;stroke-dashoffset:20;animation:d .24s cubic-bezier(.22,1,.36,1) .05s forwards%7D@keyframes d%7Bto%7Bstroke-dashoffset:0%7D%7D@media (prefers-reduced-motion:reduce)%7Bpath%7Banimation:none;stroke-dashoffset:0%7D%7D%3C/style%3E%3Cpath d='M4.5 10.5 8.3 14 15.5 6' fill='none' stroke='%23F7F2E8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --sui-tickNavy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5 8.3 14 15.5 6' fill='none' stroke='%2314324F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --sui-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 3.5 10 8l-4.5 4.5' fill='none' stroke='%2314324F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --sui-ternMask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='104 324 95 96'%3E%3Cpath d='M151.5 389.88 L108.8 330.77 C129.61 335.14 142.74 347.19 151.5 362.52 C160.26 347.19 173.39 335.14 194.2 330.77 Z'/%3E%3Cpath d='M147.4 384.6 C146.6 395 144.2 405 139.6 416.4 C145.3 408.6 149.2 400.6 151.5 393.2 C153.8 400.6 157.7 408.6 163.4 416.4 C158.8 405 156.4 395 155.6 384.6 L151.5 389.9 Z'/%3E%3C/svg%3E"); --sui-selTick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5 8.3 14 15.5 6' fill='none' stroke='%2314324F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion:reduce){ :root{--sui-ternLight:var(--sui-ternLightStill);--sui-ternNavy:var(--sui-ternNavyStill);} } /* ---------- 2. BASE ---------- */ *,*::before,*::after{box-sizing:border-box} /* iOS inflates text in landscape unless told not to; long emails and links wrap instead of pushing the page sideways */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{overflow-wrap:break-word} img,svg,video{max-width:100%} img{height:auto} :focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-off)} .on-navy :focus-visible,.card-navy :focus-visible,.mentor-hero :focus-visible,.level-hero :focus-visible, footer:not(.legal) :focus-visible,.cx-stage :focus-visible,.course-shell :focus-visible{outline-color:var(--focus-on-navy)} /* paper grain over whatever ground the page sheet sets (on navy it is invisible); white reading surfaces stay clean */ body{background-image:var(--grain);background-size:240px 240px} /* emphasis uses the real Alegreya 500, never synthetic bold Castoro */ b,strong{font-weight:500} :is(.ed,.legal-doc,.post-body,.lede,.fc-body,.bio) :is(b,strong){font-family:var(--text);font-weight:500} h1,h2,.opening h1,.sc-open h1,.story-open h1{text-wrap:balance} p,li,.lede{text-wrap:pretty} /* utilities: the only replacements allowed for inline style="" */ .mt-0{margin-top:0}.mt-1{margin-top:var(--s-1)}.mt-2{margin-top:var(--s-2)}.mt-3{margin-top:var(--s-3)}.mt-4{margin-top:var(--s-4)}.mt-5{margin-top:var(--s-5)}.mt-6{margin-top:var(--s-6)}.mt-7{margin-top:var(--s-7)} .mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--s-2)}.mb-3{margin-bottom:var(--s-3)}.mb-4{margin-bottom:var(--s-4)}.mb-5{margin-bottom:var(--s-5)} .fs-sm{font-size:.8125rem}.fs-md{font-size:.9375rem}.fs-lg{font-size:1.1875rem} .mw-read{max-width:var(--w-read)}.mw-narrow{max-width:var(--w-narrow)}.measure{max-width:var(--measure)} .c-slate{color:var(--slate)}.c-ok{color:var(--ok)}.c-warn{color:var(--warn)}.c-alert{color:var(--alert)} .vh,.sr-only{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .t-hero{font:var(--t-hero);letter-spacing:-.018em} .t-page{font:var(--t-page)} .t-display{font:var(--t-display)} .t-section{font:var(--t-section);letter-spacing:.05em;color:var(--navy)} .t-heading{font:var(--t-heading);color:var(--navy)} .t-lede{font:var(--t-lede)} .t-ui{font:var(--t-ui)} .t-small{font:var(--t-small);color:var(--slate)} /* A label sits clearly below the value it names. */ .label-sm{display:block;font:500 .8125rem/1.35 var(--text);color:var(--slate);letter-spacing:.01em} @media (max-width:560px){.label-sm,.fs-sm{font-size:.875rem}} /* ---------- 3. BUTTONS ---------- One mechanic for every role: a plate on a 2px ledge, with an ink layer (::before) that fades in over the plate on hover, the way the Sign in button turns navy, and a 2px sink on press. Roles only set the variables. Legacy class names map onto the roles here so older markup reads the same; new markup uses the role names: btn-primary, btn-secondary, btn-tertiary, btn-quiet, btn-danger. */ .btn,.adm-btn,.cx-btn,.ik-btn,.si-btn,.tp-btn,button.c-btn-quiet,.ri button.go{ --b-bg:var(--navy); --b-fg:var(--paper); --b-bd:var(--navy); --b-ledge:var(--ledge-navy); --b-ink:linear-gradient(90deg,transparent calc(100% - 2px),var(--daylight) 0), repeating-linear-gradient(45deg,rgba(247,242,232,.075) 0 1px,transparent 1px 5px),var(--navy-hover); --b-ink-fg:var(--paper); --b-h:44px; --b-px:20px; --b-fs:1rem; position:relative;isolation:isolate;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:var(--b-h);padding:9px var(--b-px);margin:0; font:500 var(--b-fs)/1.2 var(--text);letter-spacing:.005em;text-align:center;text-decoration:none;white-space:normal; color:var(--b-fg);background:var(--b-bg);border:1px solid var(--b-bd);border-radius:var(--r-control); box-shadow:0 2px 0 var(--b-ledge);cursor:pointer;vertical-align:middle; transition:transform var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out), color var(--dur-quick) linear,border-color var(--dur-quick) linear,background-color var(--dur-quick) linear; touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none; } .btn::before,.adm-btn::before,.cx-btn::before,.ik-btn::before,.si-btn::before,.tp-btn::before,button.c-btn-quiet::before,.ri button.go::before{ content:"";position:absolute;inset:-1px -3px -1px -1px;z-index:-1;pointer-events:none; background:var(--b-ink);opacity:0; transition:opacity var(--dur-quick) linear; } @media (hover:hover) and (pointer:fine){ .btn:hover,.adm-btn:hover,.cx-btn:hover,.ik-btn:hover,.si-btn:hover,.tp-btn:hover,button.c-btn-quiet:hover,.ri button.go:hover{ color:var(--b-ink-fg);transition:transform var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),color var(--dur-base) var(--ease-ink),border-color var(--dur-base) var(--ease-ink);} .btn:hover::before,.adm-btn:hover::before,.cx-btn:hover::before,.ik-btn:hover::before,.si-btn:hover::before,.tp-btn:hover::before,button.c-btn-quiet:hover::before,.ri button.go:hover::before{ opacity:1;transition:opacity var(--dur-base) var(--ease-ink);} } /* the press: into the ledge, fast; out again, quicker than it arrived */ .btn:active,.btn.is-pressed,.adm-btn:active,.adm-btn.is-pressed,.cx-btn:active,.cx-btn.is-pressed,.ik-btn:active,.ik-btn.is-pressed, .si-btn:active,.si-btn.is-pressed,.tp-btn:active,.tp-btn.is-pressed,button.c-btn-quiet:active,.ri button.go:active{ transform:translateY(2px);box-shadow:0 0 0 var(--b-ledge); transition-duration:var(--dur-instant);transition-timing-function:var(--ease-press);} .btn:active::before,.btn.is-pressed::before,.adm-btn:active::before,.cx-btn:active::before,.ik-btn:active::before,.si-btn:active::before,.tp-btn:active::before{opacity:1;transition-duration:var(--dur-instant)} /* roles */ .btn-secondary,.btn-line,.btn-ghost,.adm-btn.line,.cx-btn.quiet,.ik-btn-ghost,.ik-btn-quiet,.si-btn-quiet,.tp-btn-line,button.c-btn-quiet{ --b-bg:var(--white); --b-fg:var(--navy); --b-bd:var(--navy); --b-ledge:var(--ledge-paper); --b-ink:var(--navy); --b-ink-fg:var(--paper);} .btn-tertiary{ --b-bg:transparent; --b-fg:var(--navy); --b-bd:transparent; --b-ledge:transparent; --b-ink:transparent; --b-ink-fg:var(--navy); --b-px:4px;box-shadow:none;overflow:visible; background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:4px calc(100% - 9px);background-size:calc(100% - 8px) 1px;} .btn-quiet,.adm-btn.quiet,.ik-link-btn{ --b-bg:transparent; --b-fg:var(--slate); --b-bd:transparent; --b-ledge:transparent; --b-ink:var(--stone); --b-ink-fg:var(--navy); --b-px:12px;box-shadow:none;} .btn-danger,.adm-btn.danger{ --b-bg:var(--white); --b-fg:var(--alert); --b-bd:var(--alert); --b-ledge:var(--ledge-danger); --b-ink:var(--alert); --b-ink-fg:var(--white);} /* solid danger: ending a call, or confirming a permanent delete */ .btn-danger-solid,.cx-btn.end{ --b-bg:var(--alert); --b-fg:var(--white); --b-bd:var(--alert); --b-ledge:var(--ledge-alert); --b-ink:var(--alert-hover); --b-ink-fg:var(--white);} /* on navy grounds */ .on-navy.btn-primary,.btn-primary.on-navy,.btn-blue.on-navy,.btn-cream,.cx-btn.on-navy:not(.quiet){ --b-bg:var(--paper); --b-fg:var(--navy); --b-bd:var(--paper); --b-ledge:rgba(0,0,0,.38); --b-ink:linear-gradient(90deg,transparent calc(100% - 2px),var(--passage) 0),var(--white); --b-ink-fg:var(--navy);} .on-navy.btn-secondary,.on-navy.btn-line,.on-navy.btn-ghost,.cx-btn.on-navy.quiet{ --b-bg:transparent; --b-fg:var(--paper); --b-bd:rgba(247,242,232,.72); --b-ledge:rgba(0,0,0,.3); --b-ink:var(--paper); --b-ink-fg:var(--navy);} .on-navy.btn-tertiary,.on-navy.btn-quiet{--b-fg:var(--paper);--b-ink:rgba(247,242,232,.1);--b-ink-fg:var(--paper);} .on-navy.btn-danger{--b-bg:transparent;--b-fg:var(--alert-on-navy);--b-bd:var(--alert-on-navy);--b-ledge:rgba(0,0,0,.3);--b-ink:var(--alert-on-navy);--b-ink-fg:var(--navy)} /* sizes */ .btn-sm,.adm-btn.sm,.cx-btn.sm,.ik-btn-sm,.si-btn-small{--b-h:36px;--b-px:14px;--b-fs:.9375rem;padding-top:6px;padding-bottom:6px} .btn-lg{--b-h:52px;--b-px:26px;--b-fs:1.0625rem} .btn-icon{--b-px:0;width:var(--b-h);padding:0} .btn-block,.btn.full,.full.btn{display:flex;width:100%} .btn-row,.adm-btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px} /* icon-only buttons: close (×), remove, week arrows. Always an aria-label. */ .btn-icon{--b-fs:1.25rem} @media (pointer:coarse){.btn-icon{--b-h:44px}} /* slots: icon before, arrow after (navigational buttons nudge forward) */ .btn > svg,.btn .btn-icon-svg{flex:none;width:18px;height:18px} .btn-arrow{display:inline-block;transition:transform var(--dur-base) var(--ease-out)} @media (hover:hover){.btn:hover .btn-arrow{transform:translateX(3px)}} .btn:active .btn-arrow{transform:translateX(5px);transition-duration:var(--dur-instant)} /* tertiary: a drawn rule that redraws like a pen stroke */ @media (hover:hover) and (pointer:fine){ .btn-tertiary:hover{animation:sui-redraw var(--dur-base) var(--ease-ink);color:var(--navy-hover)} } .btn-tertiary:active{transform:translateY(1px)} /* disabled: unavailable, not faded */ .btn:disabled,.btn[aria-disabled="true"]:not([data-state]),.adm-btn:disabled,.cx-btn:disabled,.ik-btn:disabled,.si-btn:disabled,.tp-btn:disabled,.ri button.go:disabled{ --b-bg:var(--disabled-bg); --b-fg:var(--disabled-fg); --b-bd:var(--disabled-bd); --b-ledge:transparent; --b-ink:transparent; --b-ink-fg:var(--disabled-fg); cursor:not-allowed;box-shadow:none;transform:none;opacity:1;} .btn-tertiary:disabled,.btn-quiet:disabled,.btn-tertiary[aria-disabled="true"]{--b-bg:transparent;--b-bd:transparent} /* async states, driven by data-state (sterling-ui.js busyAttrs/runBusy) */ .btn[data-state],.adm-btn[data-state],.cx-btn[data-state],.ik-btn[data-state],.si-btn[data-state]{cursor:progress} .btn[data-state="pending"],.btn[data-state="done"],.adm-btn[data-state="pending"],.cx-btn[data-state="pending"],.ik-btn[data-state="pending"],.si-btn[data-state="pending"]{color:transparent !important} .btn[data-state="pending"] > *,.btn[data-state="done"] > *{visibility:hidden} .btn[data-state="pending"]::before,.adm-btn[data-state="pending"]::before{opacity:1} .btn[data-state="pending"]::after,.adm-btn[data-state="pending"]::after,.cx-btn[data-state="pending"]::after,.ik-btn[data-state="pending"]::after,.si-btn[data-state="pending"]::after{ content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px; background:var(--sui-ternNavy) center / contain no-repeat;animation:sui-fade-in var(--dur-quick) var(--ease-out) both;} .btn-secondary[data-state="pending"]::after,.btn-line[data-state="pending"]::after,.btn-quiet[data-state="pending"]::after,.btn-tertiary[data-state="pending"]::after,.btn-danger[data-state="pending"]::after,.adm-btn.line[data-state="pending"]::after,.cx-btn.quiet[data-state="pending"]::after,.ik-btn-ghost[data-state="pending"]::after{background-image:var(--sui-ternLight)} .btn-secondary[data-state="pending"]::before,.btn-line[data-state="pending"]::before{opacity:0} .btn[data-state="done"]{--b-bg:var(--verdigris);--b-bd:var(--verdigris);--b-ledge:var(--ledge-verdigris);--b-ink:var(--verdigris); animation:sui-done-flash var(--dur-moment) var(--ease-out) both} .btn[data-state="done"]::before{opacity:1} .btn[data-state="done"]::after{ content:attr(data-done);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px; padding-left:22px;color:var(--paper);font:500 var(--b-fs)/1.2 var(--text); background:var(--sui-tickPaper) calc(50% - (var(--done-w,4.2em) / 2)) 50% / 18px no-repeat;} .btn[data-state="done"]:not([data-done])::after{content:"Done";--done-w:3em} .btn[data-state="error"],.adm-btn[data-state="error"]{animation:sui-no var(--dur-base) var(--ease-out)} @keyframes sui-done-flash{0%{filter:brightness(1.12)}100%{filter:none}} @keyframes sui-no{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}45%{transform:translateX(3px)}70%{transform:translateX(-2px)}} @keyframes sui-fade-in{from{opacity:0}} @keyframes sui-redraw{0%{background-position:calc(100% - 4px) calc(100% - 9px);background-size:calc(100% - 8px) 1px} 45%{background-position:calc(100% - 4px) calc(100% - 9px);background-size:0 1px} 46%{background-position:4px calc(100% - 9px);background-size:0 1px} 100%{background-position:4px calc(100% - 9px);background-size:calc(100% - 8px) 1px}} /* ---------- 4. LINKS ---------- inline: inside sentences. link-arrow: goes somewhere. link-back: returns. link-out: mail or another site. disclosure: opens in place. linkbtn: a text action inside a sentence only ("Resend the email"). */ a{color:var(--passage-ink);text-underline-offset:.18em;text-decoration-thickness:1px} a:hover{color:var(--navy)} .link-arrow,.link-back,.link-out,.linkbtn{ position:relative;display:inline-flex;align-items:center;gap:.32em; background:linear-gradient(currentColor,currentColor) no-repeat 0 100% / 100% 1px; padding:0 0 2px;border:0;margin:0;font:inherit;font-weight:500;color:var(--navy);text-decoration:none;cursor:pointer; -webkit-tap-highlight-color:transparent;touch-action:manipulation;} .link-arrow{background-size:0 1px;background-position:0 100%} .linkbtn{display:inline;font-weight:inherit;color:var(--passage-ink)} /* a 44px hit area that does not move the layout */ .link-arrow::before,.link-back::before,.link-out::before,.linkbtn::before{content:"";position:absolute;inset:-12px -6px} .link-arrow::after{content:"\2192";display:inline-block;transition:transform var(--dur-base) var(--ease-out)} .link-back{flex-direction:row-reverse;background-size:0 1px} .link-back::after{content:"\2190";display:inline-block;transition:transform var(--dur-base) var(--ease-out)} .link-out::after{content:"\2197";display:inline-block;font-size:.85em;transition:transform var(--dur-base) var(--ease-out)} @media (hover:hover){ .link-arrow:hover,.link-back:hover{background-size:100% 1px;transition:background-size var(--dur-base) var(--ease-ink)} .link-arrow:hover::after{transform:translateX(3px)} .link-back:hover::after{transform:translateX(-3px)} .link-out:hover,.linkbtn:hover{animation:sui-pen var(--dur-base) var(--ease-ink);color:var(--navy-hover)} .link-out:hover::after{transform:translate(2px,-2px)} } .link-arrow:active::after{transform:translateX(5px);transition-duration:var(--dur-instant)} .link-back:active::after{transform:translateX(-5px);transition-duration:var(--dur-instant)} @keyframes sui-pen{0%{background-position:100% 100%;background-size:100% 1px}45%{background-position:100% 100%;background-size:0 1px} 46%{background-position:0 100%;background-size:0 1px}100%{background-position:0 100%;background-size:100% 1px}} .on-navy .link-arrow,.card-navy .link-arrow,.mentor-hero .link-arrow,.level-hero .link-arrow{color:var(--paper)} .link-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px} /* disclosure: a chevron that turns, a full-row target */ details.disclosure > summary,.disclosure > summary,.ctx-brief > summary,.rt-details > summary{ list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer; font:500 1rem/1.3 var(--text);color:var(--navy);-webkit-tap-highlight-color:transparent;} details.disclosure > summary::-webkit-details-marker,.ctx-brief > summary::-webkit-details-marker,.rt-details > summary::-webkit-details-marker{display:none} details.disclosure > summary::before,.ctx-brief > summary::before,.rt-details > summary::before{ content:"";flex:none;width:16px;height:16px;background:var(--sui-chevron) center / contain no-repeat; transition:transform var(--dur-base) var(--ease-out)} details[open].disclosure > summary::before,.ctx-brief[open] > summary::before,.rt-details[open] > summary::before{transform:rotate(90deg)} @media (hover:hover){details.disclosure > summary:hover,.ctx-brief > summary:hover,.rt-details > summary:hover{color:var(--passage-ink)}} .disclosure-meta{margin-left:auto;font:400 .9375rem/1.3 var(--text);color:var(--slate)} details.disclosure[open] > .disclosure-body{animation:sui-rise var(--dur-base) var(--ease-out)} @keyframes sui-rise{from{opacity:0;transform:translateY(-4px)}} /* ---------- 5. CARDS AND SURFACES ---------- Five roles. card: a sheet laid on the desk. card-feature: the one thing to do next. card-navy: one dark anchor per screen. panel: a quiet explanation. notice: status only. */ .card{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-surface);padding:var(--s-5);box-shadow:var(--e-1)} .card + .card{margin-top:var(--s-3)} @media (max-width:520px){.card{padding:18px var(--s-4)}} .card-feature,.next-step,.next-hero{background:var(--white);border:1px solid var(--rule);border-top:3px solid var(--navy);border-radius:var(--r-surface);box-shadow:var(--e-2)} .card-navy{background:var(--navy);color:var(--paper);border:0;border-radius:var(--r-surface);padding:var(--s-5)} .card-navy h2,.card-navy h3{color:var(--paper)} .card-navy p{color:var(--mist)} .panel{background:var(--stone);border-radius:var(--r-surface);padding:var(--s-4) 18px} .notice{background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--navy);border-radius:0 var(--r-surface) var(--r-surface) 0;padding:14px var(--s-4)} .notice-ok{border-left-color:var(--ok)} .notice-warn{border-left-color:var(--warn)} .notice-alert{border-left-color:var(--alert)} .notice b{font-weight:500} /* clickable cards: the whole card is one link (stretched), it lifts 2px */ .card-link,.tile,.mcard.is-clickable{position:relative; border-bottom:2px solid var(--field) !important; transition:transform var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),border-color var(--dur-quick) linear; -webkit-tap-highlight-color:transparent;touch-action:manipulation;} .card-link .stretch::after{content:"";position:absolute;inset:0;z-index:1} .card-link :is(button,a,input,select):not(.stretch){position:relative;z-index:2} @media (hover:hover) and (pointer:fine){ .card-link:hover,.tile:hover,.mcard.is-clickable:hover{transform:translateY(-2px);border-color:var(--navy) !important;box-shadow:var(--e-lift);transition-duration:var(--dur-base)} .card-link:hover .link-arrow,.tile:hover .link-arrow{background-size:100% 1px} .card-link:hover .link-arrow::after,.tile:hover .tile-go{transform:translateX(3px)} } .card-link:active,.tile:active,.card-link.is-pressed,.tile.is-pressed{transform:translateY(1px);box-shadow:0 0 0 var(--rule);border-bottom-width:1px !important;transition-duration:var(--dur-instant)} .card-link:focus-within{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-off)} /* one look for every card family; local rules keep only layout (padding, grid, gap) */ .adm-card,.adm-q,.adm-clear,.cx-card,.ik-card,.ik-dash,.ik-brief,.si-summary,.si-rrow,.si-quiz,.si-card,.si-rub,.si-cmt,.si-fbl-item, .mt-card,.sc-card,.sc-author,.scx-row,.scx-mi,.fm-card,.mentor,.founder-card,.mcard,.pkg,.ppick,.postcard, .note-pane,.note-doc,.passport-page,.doc-row,.mail-row,.plan-index,.call-list,.rank-progress,.auth-card,.tp-card,.dl-card{ background:var(--white);border:var(--hair);border-radius:var(--r-surface);box-shadow:var(--e-1)} /* The sign-in and create-account sheet stays a white sheet on phones (the rule above wins over app.css's frameless phone variant), so it needs its own inner margin: without it the fields and buttons ran flush into the sheet's left and right edges. */ @media (max-width:480px){.auth-card{padding:28px clamp(16px,5.5vw,24px) 24px}} .card-feature,.next-step,.next-hero,.pkg.best,.rankup,.approve-hero,.profile-hero,.first-steps{border-top:var(--accent-w) solid var(--navy)} .value{border-top:var(--accent-w) solid var(--verdigris)} .panel,.honesty-box,.soon-inline,.aid-block,.cert-box,.demo-hint,.bio-tips,.hindsight,.nd-hw,.hw-card,.adm-will,.note,.ik-tip{ background:var(--stone);border:0;border-radius:var(--r-surface);box-shadow:none} .notice,.info-box,.ok-box,.warn-box,.err,.ok-inline,.hw-sent,.missing,.scope-note,.adm-note,.adm-flash,.adm-err,.cx-note,.si-note,.si-care,.ik-fb,.scx-problems,.sc-research,.c-flag{ background:var(--white);border:var(--hair);border-left:var(--accent-w) solid var(--navy);border-radius:0 var(--r-surface) var(--r-surface) 0} :is(.ok-box,.ok-inline,.hw-sent,.adm-note.ok,.cx-note.ok,.notice-ok){border-left-color:var(--ok)} :is(.warn-box,.missing,.adm-note.warn,.cx-note.warn,.notice-warn,.scx-problems){border-left-color:var(--warn)} :is(.err,.scope-note,.adm-err,.adm-flash.err,.adm-note.bad,.cx-note.alert,.notice-alert,.c-flag){border-left-color:var(--alert)} /* private to the mentor, or planned: dashed */ .mentor-only,.cx-mentor-only,.coming{background:var(--white);border:1px dashed var(--field);border-radius:var(--r-surface);box-shadow:none} /* ---------- 6. CHIPS, TAGS, SELECTION, BADGES, SEALS, TOKENS ---------- */ .tag,.tags li,.mtag{display:inline-flex;align-items:center;min-height:26px;padding:3px 9px;border:1px solid var(--rule);border-radius:var(--r-control); background:var(--paper);font:400 .875rem/1.2 var(--text);color:var(--navy)} .tag-row{display:flex;flex-wrap:wrap;gap:6px} /* selectable chips and cells: chosen is a pale wash with a navy edge and a tick, never the primary navy plate. The wash spreads from where the finger landed (sterling-ui.js adds .ink-in once, on that element). */ .chip-select,.filters button,.role-toggle button,.len,.picker,.book-cell,.avail-cell,.star,.cx-chip,.si-chip,.ik-opt{ -webkit-tap-highlight-color:transparent;touch-action:manipulation} .chip-select,.filters button,.ik-chip,.ik-pip,.si-chip,.sc-chip,.scx-cat,.mt-chip,.tp-amt{ position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px; background:var(--white);border:1px solid var(--field);border-radius:var(--r-control); font:400 .9375rem/1.2 var(--text);color:var(--ink);cursor:pointer; transition:border-color var(--dur-quick) linear,background-color var(--dur-quick) linear,transform var(--dur-quick) var(--ease-out)} @media (hover:hover) and (pointer:fine){ .chip-select:hover,.filters button:hover,.ik-chip:hover,.ik-pip:hover,.si-chip:hover,.sc-chip:hover,.scx-cat:hover,.mt-chip:hover,.tp-amt:hover{border-color:var(--navy);background:var(--white)}} .chip-select:active,.filters button:active,.len:active,.picker:active,.book-cell:active:not(:disabled),.avail-cell:active:not(:disabled){transform:translateY(1px);transition-duration:var(--dur-instant)} /* chosen: pale wash, navy edge, inset ring, weight 500, a tick. Never a navy plate, never on hover. .mt-chip is an action, never chosen. */ .chip-select[aria-pressed="true"],.chip-select.on,.filters button.on,.filters button[aria-pressed="true"], .ik-chip[aria-checked="true"],.ik-pip[aria-checked="true"],.si-chip[aria-pressed="true"],.sc-chip[aria-pressed="true"], .scx-cat:has(input:checked),.tp-amt[aria-pressed="true"], .role-toggle button.on,.role-toggle button[aria-pressed="true"], .len.on,.len[aria-pressed="true"],.picker.on,.picker[aria-pressed="true"], .ik-tile.is-on,.ik-tile[aria-checked="true"],.scx-kind:has(input:checked), .book-cell.on,.avail-cell.on{ background-color:var(--select) !important;color:var(--navy) !important;border-color:var(--navy) !important; box-shadow:inset 0 0 0 1px var(--navy) !important;font-weight:500} .chip-select[aria-pressed="true"]::before,.chip-select.on::before,.filters button.on::before,.filters button[aria-pressed="true"]::before, .ik-chip[aria-checked="true"]::before,.ik-pip[aria-checked="true"]::before,.si-chip[aria-pressed="true"]::before,.sc-chip[aria-pressed="true"]::before, .scx-cat:has(input:checked)::before,.tp-amt[aria-pressed="true"]::before, .role-toggle button.on::before,.role-toggle button[aria-pressed="true"]::before, .book-cell.on::before,.len.on .len-name::before{ content:"";display:inline-block;width:14px;height:14px;flex:none;background:var(--sui-selTick) center / contain no-repeat;vertical-align:-2px;margin-right:2px} /* the current item in a list (templates, call log, lessons) */ .tpl-item.on,.cl-item.on,.lesson-item[aria-current]{background:var(--select);box-shadow:inset 3px 0 0 var(--navy)} .role-toggle button{display:inline-flex;align-items:center;justify-content:center;gap:6px} .avail-cell.booked{background:var(--stone) !important;border:1px dashed var(--navy) !important;color:var(--navy) !important;box-shadow:none !important} .avail-cell.on.booked{background:var(--select) !important;border:1px dashed var(--navy) !important;outline:0} @property --ink-r{syntax:'';inherits:false;initial-value:0%} .ink-in{background-image:radial-gradient(circle at var(--ink-x,50%) var(--ink-y,50%),var(--select) var(--ink-r),var(--white) calc(var(--ink-r) + 1px)) !important; animation:sui-ink-in var(--dur-base) var(--ease-ink) both} @keyframes sui-ink-in{from{--ink-r:0%}to{--ink-r:160%}} .ink-out{animation:sui-settle var(--dur-quick) var(--ease-out)} @keyframes sui-settle{from{transform:scale(.96)}} /* status word plus a small square, so lists scan without colour alone */ .pill,.badge{display:inline-flex;align-items:center;gap:6px;font:500 .9375rem/1.2 var(--text);color:var(--slate);background:none;border:0;padding:0;white-space:nowrap} .pill::before,.badge::before{content:"";width:7px;height:7px;flex:none;background:currentColor} .pill.ok,.badge-ok{color:var(--ok)} .pill.warn,.badge-warn{color:var(--warn)} .pill.bad,.badge-alert{color:var(--alert)} .count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;margin-left:6px; background:var(--navy);color:var(--paper);border-radius:var(--r-control);font:500 .75rem/1 var(--text);font-variant-numeric:tabular-nums} .tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;margin-left:6px; background:var(--navy);color:var(--paper);border-radius:var(--r-control);font:500 .75rem/1 var(--text)} .tab-badge::before,.tab-badge::after{content:none !important} .pill,.badge,.adm-st{font:var(--t-ui)} .pill.ok,.badge-ok{color:var(--ok)} .pill.warn,.badge-warn{color:var(--warn)} .pill.bad,.badge-alert{color:var(--alert)} .pill.rec::before{animation:sui-rec 1.6s var(--ease-settle) infinite} @keyframes sui-rec{50%{opacity:.35}} @media (prefers-reduced-motion:reduce){.pill.rec::before{animation:none}} /* a saving is information: a verdigris tag, never a filled plate */ .tag.is-saving{color:var(--verdigris);border-color:var(--verdigris);background:var(--white)} .tag.is-planned{border-style:dashed;color:var(--slate)} /* a seal is struck once: one overshoot, then still */ .seal-struck,.stamp-in{animation:sui-strike var(--dur-moment) var(--ease-spring) both} @keyframes sui-strike{from{opacity:0;transform:scale(1.6) rotate(-4deg)}to{opacity:1;transform:none}} /* session credit: a paper-and-bronze token, the same one that drops in Delight.creditsAdded. Half a credit is half a token. */ .credit-tokens{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:10px 0 2px;padding:0;list-style:none} .credit-token{position:relative;display:inline-block;width:30px;height:30px;flex:none;border-radius:50%; background: radial-gradient(circle,var(--paper) 0 58%,var(--verdigris-dark) 59% 62%,transparent 63%), radial-gradient(circle at 34% 28%,#A9D2BC,var(--verdigris-mid) 42%,var(--verdigris-dark)); box-shadow:0 1px 0 rgba(15,31,46,.18)} .credit-token::after{content:"";position:absolute;inset:27%;background:var(--navy); -webkit-mask:var(--sui-ternMask) center / contain no-repeat;mask:var(--sui-ternMask) center / contain no-repeat} .credit-token.half{clip-path:inset(0 50% 0 0)} .credit-token.half + .credit-token-gap{margin-left:-21px} .credit-token.spent{background:radial-gradient(circle,transparent 0 58%,var(--rule) 59% 62%,transparent 63%),var(--stone);box-shadow:none} .credit-token.spent::after{background:var(--field);opacity:.5} .credit-token.is-new{animation:sui-coin var(--dur-slow) var(--ease-spring) both;animation-delay:calc(var(--i,0) * 70ms)} @keyframes sui-coin{from{opacity:0;transform:translateY(-10px) scale(.8)}} .credit-more{font:500 .9375rem var(--text);color:var(--slate);margin-left:4px} /* ---------- 7. FORMS, TOGGLES, SEGMENTED CONTROL ---------- */ .field{margin-bottom:var(--s-4)} .field label,.field .label{display:block;font:500 .9375rem/1.3 var(--text);color:var(--ink);margin-bottom:6px;text-transform:none;letter-spacing:0} .field input,.field select,.field textarea,.input, .adm-field input:not([type="checkbox"],[type="radio"]),.adm-field select,.adm-field textarea,.ik-input,.ik-field input:not([type="checkbox"],[type="radio"]),.ik-field select,.ik-field textarea, .si-input,.si-textarea,.si-select,.cx-field input:not([type="checkbox"],[type="radio"]),.cx-field textarea,.cx-add input:not([type="checkbox"],[type="radio"]), .ri input:not([type="checkbox"],[type="radio"]),.uf input:not([type="checkbox"],[type="radio"]),.tip-input,.tp-note,.sc-search input{ width:100%;min-width:0;max-width:100%;background:var(--white);border:var(--edge);border-radius:var(--r-control); padding:10px 12px;min-height:44px;font:400 1rem/1.4 var(--text);color:var(--ink); transition:border-color var(--dur-quick) linear,box-shadow var(--dur-quick) linear} .field input:focus,.field select:focus,.field textarea:focus,.input:focus, .adm-field :is(input,select,textarea):focus,.ik-input:focus,.ik-field :is(input,select,textarea):focus, .si-input:focus,.si-textarea:focus,.si-select:focus,.cx-field :is(input,textarea):focus,.cx-add input:focus,.ri input:focus,.uf input:focus,.tip-input:focus,.tp-note:focus,.sc-search input:focus{ border-color:var(--navy);outline:var(--focus-w) solid var(--focus);outline-offset:1px} textarea.input,.field textarea,.si-textarea,.cx-field textarea,.tp-note{min-height:96px;resize:vertical} .field input:disabled{background:var(--stone);color:var(--slate)} :is(input,select,textarea)[aria-invalid="true"]{border-color:var(--alert) !important;box-shadow:inset 0 0 0 1px var(--alert)} .field-err{font:var(--t-small);color:var(--alert);margin-top:5px} @media (hover:hover) and (pointer:fine){html[data-entry="admin"] .adm-field :is(input,select){min-height:38px}} .field.is-nudged input,.is-nudged{animation:sui-no var(--dur-base) var(--ease-out)} .help{font:400 .9rem/1.45 var(--text);color:var(--slate);margin-top:5px} input[type="checkbox"],input[type="radio"]{accent-color:var(--navy)} /* a switch: a checkbox inside a label.switch */ .switch{display:inline-flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;font:var(--t-ui);color:var(--ink)} .switch input{appearance:none;-webkit-appearance:none;position:relative;width:42px;height:24px;flex:none;margin:0; background:var(--stone);border:1px solid var(--field);border-radius:12px;cursor:pointer;transition:background-color var(--dur-quick) linear} .switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--white); box-shadow:0 1px 0 rgba(15,31,46,.25);transition:transform var(--dur-base) var(--ease-out)} .switch input:checked{background:var(--verdigris);border-color:var(--verdigris)} .switch input:checked::after{transform:translateX(18px)} .switch input:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:2px} .role-toggle,.segmented{display:flex;border:1px solid var(--navy);border-radius:var(--r-control);overflow:hidden;background:var(--white)} .role-toggle button,.segmented button{flex:1;background:var(--white);border:0;min-height:44px;padding:8px 10px;font:400 1rem/1.2 var(--text);color:var(--navy);cursor:pointer} .role-toggle button + button,.segmented button + button{border-left:1px solid var(--navy)} .role-toggle button.on,.role-toggle button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--navy) !important} /* tables: .adm-table is the same component (admin.css keeps its rules); ledger table.prices and privacy/terms table.doc */ .table-wrap{background:var(--white);border:var(--hair);border-radius:var(--r-surface);overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch} @media (max-width:560px){.table th,.table td,table.prices th,table.prices td,table.doc th,table.doc td{padding:9px 10px}} /* On a phone a long three-column table reads better as stacked records than as a sideways scroll. Opt in with class "stack" and a data-label on each cell (the same convention as .adm-table.stack in admin.css). The first cell becomes the record's heading. */ @media (max-width:560px){ :is(.table,table.doc,table.prices).stack{min-width:0 !important} :is(.table,table.doc,table.prices).stack :is(thead,tr:not(:has(td))){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} :is(.table,table.doc,table.prices).stack :is(tbody,tr,td,th){display:block;width:100%} :is(.table,table.doc,table.prices).stack tr{padding:12px 14px;border-top:var(--hair)} :is(.table,table.doc,table.prices).stack tbody tr:first-child,:is(.table,table.doc,table.prices).stack tr:not(:has(td)) + tr{border-top:0} :is(.table,table.doc,table.prices).stack td{padding:2px 0 8px;border:0} :is(.table,table.doc,table.prices).stack td:first-child{font-weight:500;color:var(--navy)} :is(.table,table.doc,table.prices).stack td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;font:var(--t-label);color:var(--slate);margin-bottom:2px} :is(.table,table.doc,table.prices).stack td.r{text-align:left} } .table,table.prices,table.doc{width:100%;border-collapse:collapse;font:400 .9375rem/1.45 var(--text);font-variant-numeric:tabular-nums} .table th,table.prices th,table.doc th{text-align:left;font:var(--t-label);color:var(--slate);padding:10px 12px;border-bottom:var(--hair);background:var(--white);vertical-align:bottom} .table td,table.prices td,table.doc td{padding:10px 12px;border-top:var(--hair);vertical-align:top} .table tbody tr:first-child td,table.prices tbody tr:first-child td,table.doc tbody tr:first-child td{border-top:0} .table .r{text-align:right} .table tfoot td{font-weight:500;border-top:var(--edge)} .table tr[data-row]{cursor:pointer} @media (hover:hover){.table tr[data-row]:hover td{background:var(--paper)}} .table tr[data-row]:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:-2px} /* ---------- 8. TABS ---------- One underline that slides to the chosen tab (sterling-ui.js animates it from the previous tab's position; without script it simply moves). */ .navmenu button,.ptab,.tabs .tab,.cx-tabs button,.sui-tab{position:relative;-webkit-tap-highlight-color:transparent;touch-action:manipulation} .navmenu button,.ptab,.tabs .tab{border-bottom-color:transparent !important} .navmenu button.on::after,.navmenu button[aria-current="page"]::after,.ptab.active::after,.ptab[aria-selected="true"]::after, .tabs .tab[aria-selected="true"]::after,.sui-tab[aria-selected="true"]::after{ content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--navy);transform-origin:left center} .tabs .tab[aria-selected="true"]::after{left:0;right:0;bottom:-1px} .ptab.active::after,.ptab[aria-selected="true"]::after{left:12px;right:12px;bottom:-1px} @media (hover:hover){.navmenu button:hover,.ptab:hover,.tabs .tab:hover{color:var(--navy)} .navmenu button:not(.on):not([aria-current]):hover::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:1px;background:var(--rule)}} .navmenu button:active,.ptab:active,.tabs .tab:active{transform:translateY(1px)} /* stepper: onboarding steps (student three steps, mentor application, mentor onboarding) */ .stepper{display:flex;gap:4px;list-style:none;margin:0 0 var(--s-5);padding:0;border-bottom:var(--hair)} .stepper li{position:relative;flex:1;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;font:var(--t-ui);color:var(--slate)} .stepper li .n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid var(--field);border-radius:var(--r-round);font:500 .875rem/1 var(--text);font-variant-numeric:tabular-nums} .stepper li[aria-current="step"]{color:var(--navy)} .stepper li[aria-current="step"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--navy)} .stepper li[aria-current="step"] .n{border-color:var(--navy);color:var(--navy)} .stepper li.is-done .n{border-color:var(--verdigris);background:var(--sui-tickPaper) center / 12px no-repeat,var(--verdigris);color:transparent} @media (max-width:560px){.stepper li:not([aria-current="step"]) .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}} /* ---------- 9. PROGRESS, STARS, STREAK ---------- */ .progress,.pf-bar,.rp-track,.prog-bar,.thresh-bar,.mini-bar,.fbb-bar,.mh-bar,.cx-progress,.si-meter,.adm-bar,.ik-dash-bar,.ik-goal-bar{position:relative;height:6px;background:var(--stone);border-radius:3px;overflow:hidden} .mh-bar{background:rgba(198,219,238,.18)} .progress > span,.pf-bar > span,.rp-fill,.prog-fill,.thresh-fill,.mini-bar > div,.fbb-bar > div,.mh-bar > span,.cx-progress i,.si-meter span,.adm-bar > i,.ik-dash-bar span,.ik-goal-bar > span{ display:block;height:100%;background:var(--verdigris) !important;border-radius:3px;transform-origin:left center; animation:sui-fill var(--dur-moment) var(--ease-out) both} .mh-bar > span{background:var(--patina) !important} .sui-seen,.sui-seen *{animation:none !important} @keyframes sui-fill{from{transform:scaleX(0)}} .stars{display:flex;gap:2px} .star{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:none !important;border:0 !important; font-size:1.9rem;line-height:1;color:var(--field);cursor:pointer;transition:color var(--dur-quick) linear,transform var(--dur-quick) var(--ease-out)} @media (hover:hover){.star:hover{color:var(--passage-ink)}} .star.on,.star[aria-pressed="true"]{color:var(--navy)} .star:active{transform:scale(.9)} .star.is-struck{animation:sui-star var(--dur-slow) var(--ease-spring) both;animation-delay:calc(var(--i,0) * 35ms)} @keyframes sui-star{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}} /* teaching streak: a calm row of engraved week-marks, not a flame */ .streak-marks{display:flex;align-items:flex-end;gap:5px;margin:14px 0 6px;padding:0;list-style:none} .streak-marks li{position:relative;width:14px;height:22px;flex:0 1 14px;min-width:7px;border:1px solid var(--field);border-radius:1px;background:var(--white)} .streak-marks li.taught{background:var(--navy);border-color:var(--navy); background-image:repeating-linear-gradient(45deg,rgba(247,242,232,.14) 0 1px,transparent 1px 4px)} .streak-marks li.bonus{background-color:var(--verdigris);border-color:var(--verdigris)} .streak-marks li.goal{border-style:dashed} .streak-marks li.now{outline:2px solid var(--ink);outline-offset:2px} .streak-marks li.now:not(.taught)::after{content:"";position:absolute;left:3px;right:3px;bottom:3px;height:2px;background:var(--passage)} .streak-marks .gap{width:8px;border:0;background:none} .streak-legend{display:flex;flex-wrap:wrap;gap:4px 16px;font:var(--t-small);color:var(--slate)} .streak-legend i{display:inline-block;width:9px;height:12px;margin-right:6px;vertical-align:-1px;border:1px solid var(--field);background:var(--white)} .streak-legend i.taught{background:var(--navy);border-color:var(--navy)} .streak-legend i.bonus{background:var(--verdigris);border-color:var(--verdigris)} /* checklist: First steps, Getting started, Ready for your session. Each li carries Done. or To do. */ .checklist{list-style:none;margin:0;padding:0;border-top:var(--hair)} .checklist > li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-bottom:var(--hair)} .checklist .ck{width:22px;height:22px;border:1px solid var(--field);border-radius:var(--r-round);background:var(--white)} .checklist li.is-done .ck{border-color:var(--verdigris);background:var(--sui-tickPaper) center / 14px no-repeat,var(--verdigris)} .checklist li.is-done.is-new .ck{animation:sui-strike var(--dur-moment) var(--ease-spring) both} .checklist .ck-label{font:var(--t-control);color:var(--ink)} .checklist li.is-done .ck-label{color:var(--slate)} .checklist .ck-meta{display:block;font:var(--t-small);color:var(--slate);margin-top:2px} .checklist-count{font:var(--t-label);color:var(--slate);font-variant-numeric:tabular-nums} @media (max-width:560px){.checklist > li{grid-template-columns:28px minmax(0,1fr)}.checklist > li > .btn{grid-column:2;justify-self:start}} @media (prefers-reduced-motion:reduce){.checklist li.is-done.is-new .ck{animation:none}} /* ---------- 10. LOADER, TOASTS, MODALS, EMPTY, ACTION BAR ---------- */ /* the tern loader: wings beat about the body line, the bird stays level */ .sui-loader{display:inline-block;width:28px;height:28px;flex:none;background:var(--sui-ternLight) center / contain no-repeat} .sui-loader.on-navy,.on-navy .sui-loader,.cx-stage .sui-loader{background-image:var(--sui-ternNavy)} .sui-loader.lg{width:44px;height:44px} .sui-loader.sm{width:18px;height:18px} .sui-wait{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--slate);font:var(--t-ui);text-align:center} /* a long wait: the tern crosses an engraved horizon, left to right, wings beating, body level. Markup:
Loading
*/ .sui-horizon{position:relative;display:block;width:160px;height:26px;margin:0 auto;opacity:0;animation:sui-show var(--dur-quick) linear .4s forwards} .sui-horizon::before{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;color:var(--navy);opacity:.5; background:linear-gradient(currentColor,currentColor) 0 0 / 100% 1px no-repeat,repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 4px) 0 3px / 100% 6px no-repeat; -webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)} .sui-horizon::after{content:"";position:absolute;left:0;bottom:8px;width:18px;height:18px;background:var(--sui-ternLight) center / contain no-repeat; animation:sui-glide 2s var(--ease-settle) .4s infinite} .on-navy .sui-horizon::before,.cx-stage .sui-horizon::before{color:var(--mist)} .on-navy .sui-horizon::after,.cx-stage .sui-horizon::after{background-image:var(--sui-ternNavy)} @keyframes sui-show{to{opacity:1}} @keyframes sui-glide{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(142px);opacity:0}} @media (prefers-reduced-motion:reduce){.sui-horizon::after{animation:none;transform:translateX(71px);opacity:1}} .call-spinner,.cx-spinner,.si-quill{display:inline-block;width:18px;height:18px;flex:none;background:var(--sui-ternLight) center / contain no-repeat;animation:none} /* toasts live outside #root (sterling-ui.js), so they animate in and out */ .sui-toasts{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:var(--z-toast); display:flex;flex-direction:column;align-items:center;gap:8px;width:min(520px,calc(100vw - 32px));pointer-events:none} .sui-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;width:100%;padding:13px 16px;border-radius:var(--r-surface); background:var(--navy);color:var(--paper);font:400 1rem/1.4 var(--text);box-shadow:var(--e-3); animation:sui-toast-in var(--dur-base) var(--ease-out) both} .sui-toast p{margin:0;flex:1} .sui-toast.is-leaving{animation:sui-toast-out var(--dur-quick) var(--ease-in) forwards} .sui-toast-ok::before{content:"";flex:none;width:22px;height:22px;margin-top:-1px;border-radius:50%; background:var(--sui-tickPaper) center / 15px no-repeat,radial-gradient(circle at 34% 28%,#A9D2BC,var(--verdigris-mid) 42%,var(--verdigris-dark))} .sui-toast-error{background:var(--white);color:var(--alert);border:1px solid var(--rule);border-left:3px solid var(--alert)} .sui-toast-x{flex:none;margin:-8px -8px -8px 0;min-width:44px;min-height:44px;padding:0 6px;background:none;border:0;color:inherit;font:500 .9375rem var(--text);text-decoration:underline;text-underline-offset:.2em;cursor:pointer} @keyframes sui-toast-in{from{opacity:0;transform:translateY(12px)}} @keyframes sui-toast-out{to{opacity:0;transform:translateY(6px)}} .toast{display:none !important} /* the old in-#root toast; superseded by .sui-toasts */ /* modal and sheet: rises in, drops away; the primary action never scrolls out of reach */ .modal-bg{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:24px;background:var(--scrim); padding-left:max(24px,var(--safe-l));padding-right:max(24px,var(--safe-r))} .modal{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-surface);max-width:540px;width:100%;max-height:88vh;max-height:88dvh; overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--e-3)} .modal-foot{position:sticky;bottom:0;background:var(--white);padding-top:14px;z-index:2} .modal-bg.is-entering{animation:sui-fade-in var(--dur-quick) linear both} .modal-bg.is-entering .modal{animation:sui-modal-in var(--dur-slow) var(--ease-out) both} .modal-bg.is-leaving{animation:sui-fade-out var(--dur-quick) linear forwards} .modal-bg.is-leaving .modal{animation:sui-modal-out var(--dur-quick) var(--ease-in) forwards} @keyframes sui-modal-in{from{opacity:0;transform:translateY(8px) scale(.985)}} @keyframes sui-modal-out{to{opacity:0;transform:translateY(6px)}} @keyframes sui-fade-out{to{opacity:0}} @media (max-width:620px),(max-height:500px){ .modal-bg{align-items:flex-end;padding:0} .modal{max-width:none;max-height:92vh;max-height:92dvh;border-radius:var(--r-surface) var(--r-surface) 0 0;border-width:1px 0 0; padding-bottom:env(safe-area-inset-bottom,0px)} .modal-foot{border-top:1px solid var(--rule);padding-bottom:max(16px,env(safe-area-inset-bottom,0px)) !important} .modal-foot .btn{flex:1 1 auto} .modal-bg.is-entering .modal{animation:sui-sheet-in var(--dur-slow) var(--ease-out) both} .modal-bg.is-leaving .modal{animation:sui-sheet-out var(--dur-quick) var(--ease-in) forwards} } @media (max-height:500px){.modal{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px)}} /* a phone on its side: the sheet keeps a reading width, centred, clear of the notch */ @media (max-height:500px) and (min-width:621px){ .modal-bg{justify-content:center;padding:0 max(16px,var(--safe-r)) 0 max(16px,var(--safe-l))} .modal{max-width:620px;border-width:1px 1px 0} .modal-wide{max-width:720px} } @keyframes sui-sheet-in{from{transform:translateY(100%)}} @keyframes sui-sheet-out{to{transform:translateY(40%);opacity:0}} /* native dialogs (register interest) get the same motion */ dialog[open]{animation:sui-modal-in var(--dur-slow) var(--ease-out) both} dialog[open]::backdrop{animation:sui-fade-in var(--dur-quick) linear both} /* padding stays in app.css:284-293; here only the title and the close button's place */ /* the title and its close button share a line; anything else in the head (a subtitle line, a note) takes its own full line below them */ .modal-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:0 12px} .modal-head > h2{flex:1 1 0;min-width:0} .modal-head > :not(h2,button,.btn){flex:1 0 100%} .modal-head h2,.adm-dialog h2,.tp-card h2,dialog.ri h2{font:var(--t-title);color:var(--navy);margin:0} .modal-head .btn-icon{margin:-8px -10px 0 0} /* a long sheet (an agreement, a note) keeps its close button in reach while it scrolls */ .modal > .modal-head:has(> .btn-icon),dialog .modal-head:has(> .btn-icon){position:sticky;top:0;z-index:2;background:var(--white);padding-bottom:12px} dialog .modal-head:has(> .btn-icon){padding-top:12px;margin-top:-12px} /* every other overlay gets the same surface and scrim */ .adm-scrim,.tp-layer,.preview-overlay{z-index:var(--z-modal);background:var(--scrim)} .adm-dialog,.tp-card,dialog.ri{background:var(--white);border:var(--hair);border-radius:var(--r-surface);box-shadow:var(--e-3)} dialog::backdrop{background:var(--scrim)} .modal-bg.is-media,.sc-lb{background:var(--scrim-media)} .dl-layer{z-index:var(--z-moment)} .dl-card{border-radius:var(--r-surface);box-shadow:var(--e-3)} /* empty states: centred, a small painted vignette (art/empty-KIND.webp), one way forward */ .empty{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-surface);padding:var(--s-6) var(--s-5);text-align:center;box-shadow:var(--e-1)} .empty p{color:var(--slate);margin:0 auto 14px;max-width:52ch} .empty-art{display:block;width:120px;height:75px;margin:0 auto 14px} .empty .act,.empty .btn-row{justify-content:center;margin-top:14px} .empty .m-stroke-rule{display:block;width:72px;margin:0 auto 14px !important} /* legacy markup until every empty state uses .empty-art */ .empty p:last-child{margin-bottom:0} .empty.is-error{text-align:left;border-left:3px solid var(--alert)} .empty.is-error p{color:var(--alert);margin-left:0} /* sticky phone action bar for long forms: the primary action stays in reach */ .action-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:var(--s-5)} @media (max-width:620px){ .action-bar{position:sticky;bottom:0;z-index:30;margin:var(--s-5) -16px 0;padding:12px max(16px,var(--safe-r)) max(12px,var(--safe-b)) max(16px,var(--safe-l)); background:rgba(247,242,232,.96);border-top:1px solid var(--rule); -webkit-backdrop-filter:saturate(1.2) blur(6px);backdrop-filter:saturate(1.2) blur(6px)} .action-bar .btn-primary,.action-bar .btn-blue{flex:1 1 auto} /* a toast rises above the sticky bar instead of covering its button */ body:has(.action-bar) .sui-toasts{bottom:calc(88px + var(--safe-b))} } /* ---------- 11. MARKETING CHROME ---------- */ .links .signin{display:inline-flex;align-items:center;min-height:40px;padding:6px 16px;border:1px solid var(--navy);border-radius:var(--r-control); color:var(--navy) !important;text-decoration:none !important;background:var(--white);box-shadow:0 2px 0 var(--ledge-paper); transition:transform var(--dur-quick) var(--ease-out),box-shadow var(--dur-quick) var(--ease-out),background-color var(--dur-base) var(--ease-ink),color var(--dur-quick) linear; -webkit-tap-highlight-color:transparent;touch-action:manipulation} @media (hover:hover) and (pointer:fine){.links .signin:hover{background:var(--navy);color:var(--paper) !important}} .links .signin:active{transform:translateY(2px);box-shadow:none;transition-duration:var(--dur-instant)} .links a:not(.signin){position:relative;text-decoration:none;background:linear-gradient(var(--passage-ink),var(--passage-ink)) no-repeat 0 100% / 0 1px;transition:background-size var(--dur-base) var(--ease-ink),color var(--dur-quick) linear} @media (hover:hover){.links a:not(.signin):hover{text-decoration:none;color:var(--passage-ink);background-size:100% 1px}} .links a[aria-current="page"]{background-image:linear-gradient(var(--navy),var(--navy)) !important;background-size:100% 2px !important;background-repeat:no-repeat !important;background-position:0 100% !important;color:var(--navy);text-decoration:none !important} .menu-btn{display:none;align-items:center;gap:10px;min-height:44px;padding:8px 14px;background:var(--white);border:1px solid var(--navy);border-radius:var(--r-control); color:var(--navy);font:500 .9375rem/1 var(--text);cursor:pointer;box-shadow:0 2px 0 var(--ledge-paper);-webkit-tap-highlight-color:transparent;touch-action:manipulation} .menu-btn:active{transform:translateY(2px);box-shadow:none} .menu-btn .bars{position:relative;width:16px;height:10px;flex:none} .menu-btn .bars::before,.menu-btn .bars::after,.menu-btn .bars i{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-quick) linear} .menu-btn .bars::before{top:0}.menu-btn .bars i{top:4.25px}.menu-btn .bars::after{bottom:0} .menu-btn[aria-expanded="true"] .bars::before{transform:translateY(4.25px) rotate(45deg)} .menu-btn[aria-expanded="true"] .bars::after{transform:translateY(-4.25px) rotate(-45deg)} .menu-btn[aria-expanded="true"] .bars i{opacity:0} @media (max-width:900px){ .menu-btn{display:inline-flex} .links.open{animation:sui-menu var(--dur-base) var(--ease-ink) both;box-shadow:0 18px 30px -24px rgba(15,31,46,.5)} .links.open > *{animation:sui-rise var(--dur-base) var(--ease-out) both} .links.open > *:nth-child(2){animation-delay:30ms}.links.open > *:nth-child(3){animation-delay:60ms} .links.open > *:nth-child(4){animation-delay:90ms}.links.open > *:nth-child(5){animation-delay:120ms}.links.open > *:nth-child(6){animation-delay:150ms} .links a:not(.signin){min-height:48px;display:flex;align-items:center;background:none} .links .signin{min-height:44px;margin-top:14px} .menu-scrim{position:fixed;inset:0;z-index:4;background:rgba(15,31,46,.28);animation:sui-fade-in var(--dur-base) linear both} /* the bar holding the open menu and its Close button sits above the scrim, not greyed out under it */ header:has(.links.open){position:relative;z-index:5} } /* phones: Sign in closes the open menu as a full-width plate within thumb reach */ @media (max-width:560px){ .links.open .signin{width:100%;justify-content:center;min-height:48px;margin-top:18px} } @keyframes sui-menu{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}} footer .list a{display:flex;align-items:center;min-height:32px;text-decoration:none} @media (pointer:coarse){footer .list a{min-height:44px}} @media (hover:hover){footer .list a:hover{text-decoration:underline;text-decoration-color:var(--daylight)}} footer .legal{max-width:none;padding-right:max(0px,calc(100% - 110ch))} /* the public site footer: