/* ADI student survey form — redesigned wizard. Brand navy #00598E / orange #E8734A / Montserrat. */ @import url('adi-fonts.css'); .adi-sf{ --navy:#00598E; --navy-deep:#024a76; --orange:#E8734A; --line:#e3e8ee; --ink:#243240; --muted:#6b7682; font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); max-width:600px; margin:0 auto; } .adi-sf *{ box-sizing:border-box; } /* shell + header (built by JS; degrades gracefully without) */ .adi-sf-card{ background:#fff; border-radius:18px; box-shadow:0 10px 30px rgba(0,40,80,.08); overflow:hidden; } .adi-sf-head{ background:linear-gradient(135deg,var(--navy),var(--navy-deep)); color:#fff; padding:22px 24px 18px; } .adi-sf-head .kx{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; opacity:.8; margin:0 0 4px; } .adi-sf-head h2{ margin:0; font-size:19px; font-weight:700; } .adi-sf-head .pill{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.15); border-radius:999px; padding:5px 12px; font-size:12px; margin-top:12px; } .adi-sf-head .dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); display:inline-block; } .adi-sf-prog{ height:5px; background:rgba(255,255,255,.22); margin:16px -24px -18px; } .adi-sf-prog > div{ height:100%; background:var(--orange); width:0; transition:width .45s cubic-bezier(.4,0,.2,1); } .adi-sf-body{ padding:24px 24px 8px; } .adi-sf-intro{ background:#eef4f8; border:1px solid #d6e2ec; border-radius:10px; padding:13px 16px; margin:0 0 20px; color:#33495b; font-size:13.5px; line-height:1.5; } .adi-sf-step{ animation:adisf-slide .4s cubic-bezier(.2,.7,.2,1); } @keyframes adisf-slide{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} } .adi-sf-q{ margin-bottom:22px; } .adi-sf-q.adi-sf-err .adi-sf-errmsg{ display:block; } .adi-sf-label{ font-weight:700; color:var(--navy); font-size:15.5px; display:block; margin-bottom:3px; } .adi-sf-label .req{ color:var(--orange); margin-left:3px; } .adi-sf-help{ color:var(--muted); font-size:12.5px; margin:0 0 12px; } .adi-sf-errmsg{ display:none; color:var(--orange); font-size:12.5px; font-weight:600; margin-top:8px; } /* options */ .adi-sf-opts{ display:flex; flex-direction:column; gap:9px; margin-top:8px; } .adi-sf-opt{ display:flex; align-items:center; gap:11px; padding:12px 14px; border:1.5px solid var(--line); border-radius:11px; cursor:pointer; transition:.14s; font-size:14px; } .adi-sf-opt:hover{ border-color:#b9cfde; background:#f7fafc; } .adi-sf-opt.sel{ border-color:var(--navy); background:#eef4f8; box-shadow:0 0 0 3px rgba(0,89,142,.08); } .adi-sf-opt input{ position:absolute; opacity:0; width:0; height:0; } .adi-sf-box{ width:20px; height:20px; border:2px solid #c3cdd6; border-radius:6px; flex:0 0 auto; transition:.14s; position:relative; } .adi-sf-opt.sel .adi-sf-box{ border-color:var(--navy); background:var(--navy); } .adi-sf-opt.sel .adi-sf-box::after{ content:''; position:absolute; left:5px; top:1px; width:6px; height:11px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); } /* horizontal likert */ .adi-sf-likert{ display:flex; gap:8px; margin-top:10px; } .adi-sf-likert .adi-sf-pt{ flex:1; min-width:0; text-align:center; } .adi-sf-bubble{ display:block; margin:0 auto; width:100%; max-width:52px; aspect-ratio:1; border:1.5px solid var(--line); border-radius:11px; background:#fff; font-weight:700; color:#7d8a96; cursor:pointer; transition:.14s; font-family:inherit; font-size:15px; } .adi-sf-bubble:hover{ border-color:#b9cfde; } .adi-sf-bubble.sel{ background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,89,142,.25); } .adi-sf-likert .adi-sf-cap{ font-size:10.5px; color:var(--muted); margin-top:7px; line-height:1.25; } /* numeric scale — each number its own column, label beneath */ .adi-sf-scale{ margin-top:10px; } .adi-sf-scale-row{ display:flex; gap:8px; } .adi-sf-scale .adi-sf-pt{ flex:1; min-width:0; text-align:center; } .adi-sf-scale-btn{ display:block; margin:0 auto; width:100%; max-width:52px; aspect-ratio:1; border:1.5px solid var(--line); border-radius:50%; background:#fff; font-weight:800; font-size:16px; color:#7d8a96; cursor:pointer; transition:.14s; font-family:inherit; } .adi-sf-scale-btn:hover{ border-color:#b9cfde; } .adi-sf-scale-btn.sel{ background:var(--orange); color:#fff; border-color:var(--orange); transform:scale(1.06); box-shadow:0 6px 14px rgba(232,115,74,.3); } .adi-sf-scale .adi-sf-cap{ font-size:12px; color:var(--muted); font-weight:600; margin-top:8px; min-height:1.2em; line-height:1.25; } /* university autocomplete */ .adi-sf-uni{ position:relative; margin-top:8px; } .adi-sf-uni-input{ width:100%; border:1.5px solid var(--line); border-radius:11px; padding:13px 14px; font-size:14px; font-family:inherit; } .adi-sf-uni-input:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,89,142,.1); } .adi-sf-uni-drop{ position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 30px rgba(0,40,80,.14); max-height:230px; overflow:auto; z-index:5; display:none; } .adi-sf-uni-drop.show{ display:block; } .adi-sf-uni-item{ padding:11px 14px; cursor:pointer; font-size:14px; } .adi-sf-uni-item:hover,.adi-sf-uni-item.active{ background:#eef4f8; } .adi-sf-uni-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; } .adi-sf-chip{ display:inline-flex; align-items:center; gap:8px; background:#eef4f8; color:var(--navy); border:1px solid #d6e2ec; border-radius:999px; padding:7px 12px; font-size:13px; font-weight:600; animation:adisf-pop .18s ease; } @keyframes adisf-pop{ from{transform:scale(.85);opacity:0} to{transform:scale(1);opacity:1} } .adi-sf-chip b{ cursor:pointer; font-weight:800; opacity:.6; } .adi-sf-chip b:hover{ opacity:1; } /* text */ .adi-sf-input,.adi-sf-textarea{ width:100%; border:1.5px solid var(--line); border-radius:11px; padding:12px 14px; font-size:14px; font-family:inherit; margin-top:8px; } .adi-sf-input:focus,.adi-sf-textarea:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(0,89,142,.1); } .adi-sf-textarea{ min-height:96px; resize:vertical; } .adi-sf-count{ text-align:right; font-size:12px; color:var(--muted,#64748b); margin-top:5px; } .adi-sf-count-near{ color:var(--orange); font-weight:600; } /* nav / footer (JS builds; fallback submit below) */ .adi-sf-foot{ display:flex; justify-content:space-between; align-items:center; padding:8px 24px 26px; } .adi-sf-btn{ border:0; border-radius:11px; padding:13px 26px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit; transition:.14s; } .adi-sf-next{ background:var(--orange); color:#fff; } .adi-sf-next:hover{ background:#d35f37; transform:translateY(-1px); } .adi-sf-next:disabled{ opacity:.6; cursor:default; transform:none; } .adi-sf-back{ background:transparent; color:var(--muted); padding-left:4px; } .adi-sf-back:hover{ color:var(--navy); } .adi-sf-back.hide{ visibility:hidden; } /* P1-442, 11 Aug 2026 (Dan, from viewing it as a student): the note was JAMMED AGAINST THE EDGE OF THE CARD. v2.55.643 removed the left padding deliberately so it sat flush with the Submit button — that is still right INSIDE the body, and the complaint is the box edge, so this adds breathing room without re-introducing the jut he had removed. */ .adi-sf-note{ color:var(--muted); font-size:12px; padding:0 18px 22px; margin:14px 0 0; line-height:1.5; } /* fallback submit (shown only if JS doesn't build the wizard) */ /* v2.55.642 (Dan): the theme's global button rule was overriding this with a washed semi-transparent navy - pin every property the theme touches so the house orange always wins, on any page the survey lands on. */ button.adi-sf-submit, .adi-sf-submit{ background:#E8734A !important; color:#fff !important; border:0 !important; border-radius:11px !important; padding:14px 28px !important; font-size:15px !important; font-weight:700 !important; cursor:pointer; font-family:inherit; margin-top:8px; opacity:1 !important; text-transform:none !important; letter-spacing:normal !important; } button.adi-sf-submit:hover, .adi-sf-submit:hover{ background:#d35f37 !important; color:#fff !important; } .adi-sf-done{ text-align:center; padding:30px 24px 40px; } .adi-sf-ring{ width:70px; height:70px; border-radius:50%; background:#e9f7f0; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; animation:adisf-popbig .4s cubic-bezier(.2,.8,.2,1); } @keyframes adisf-popbig{ from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} } .adi-sf-done h3{ color:var(--navy); margin:0 0 6px; font-size:21px; } .adi-sf-done p{ color:var(--muted); margin:0; } .adi-sf-msg{ background:#fff7f3; border:1px solid #f0c9b6; border-radius:10px; padding:14px 16px; color:#9a4a28; } /* ═══════════════════════════════════════════════════════════════════════════════════════ P1-441, 11 Aug 2026 — ONE ROOT CAUSE, NOT FOUR PATCHES. Dan's own diagnosis was right: "im wondering if this is fighting other CSS code". It is, and the evidence was already in this file. THE MECHANISM, and it has two halves that look different and are the same thing: 1. THE THEME HAS A GLOBAL `button` RULE. We have known since v2.55.642 — the comment is eighty lines above — when it rendered the Submit button "washed out". That was fixed for `.adi-sf-submit` AND ONLY FOR `.adi-sf-submit`. The next/back buttons (.adi-sf-btn) and the 1-10 number buttons (.adi-sf-scale-btn) were never protected, which is EXACTLY the two button symptoms Dan reports. ⚠ SCOPE A FIX BY THE RISK, NEVER BY THE INSTANCE THAT PROMPTED IT. A theme rule that hits every button was answered for the one button somebody complained about. 2. THE HEADER TEXT IS INHERITED, AND INHERITANCE LOSES TO EVERYTHING. `.adi-sf-head` sets color:#fff and the `h2` and the pill simply inherit it. ANY theme rule that sets a colour DIRECTLY on h2 beats that — not by winning a specificity war, but because an inherited value is not a declaration at all. That is why "A few quick thoughts" and "Step 1 of 5" render dark on a navy header while the CSS looks correct. SO THE RULE, and it is the reusable half: INSIDE `.adi-sf`, DECLARE WHAT WE NEED ON THE ELEMENT ITSELF rather than relying on inheritance, and neutralise the theme on every button rather than on the one that was noticed. Scoped to `.adi-sf` throughout, so none of it can leak onto the rest of the site. ═══════════════════════════════════════════════════════════════════════════════════════ */ /* half 2 — the header, declared rather than inherited */ .adi-sf .adi-sf-head h2, .adi-sf .adi-sf-head .adi-sf-title{ color:#fff !important; } .adi-sf .adi-sf-head .kx, .adi-sf .adi-sf-head .pill, .adi-sf .adi-sf-head .adi-sf-count{ color:#fff !important; } /* half 1 — the theme's global button rule, neutralised on the OTHER two button families, using the same properties already proven necessary for .adi-sf-submit at v2.55.642 */ .adi-sf button.adi-sf-btn{ font-family:inherit !important; text-transform:none !important; letter-spacing:normal !important; border-radius:11px !important; opacity:1 !important; } .adi-sf button.adi-sf-btn.next, .adi-sf button.adi-sf-btn.adi-sf-next{ background:#E8734A !important; color:#fff !important; border:0 !important; } .adi-sf button.adi-sf-btn.back, .adi-sf button.adi-sf-btn.adi-sf-back{ background:#fff !important; color:var(--navy) !important; border:1.5px solid var(--line) !important; } /* ⚠ AND THE GEOMETRY HALF, ADDED 11 Aug 2026 AFTER DAN LOOKED: "the numbers are not central to the circle button they are in, they are off center which looks terrible." MY FIRST PASS DID NOT CAUSE THIS AND DID NOT FIX IT, WHICH IS THE HONEST ANSWER. I neutralised the theme's COLOUR and FONT properties on this button and left its GEOMETRY - the theme's global button `padding` and `line-height` still applied, and against a fixed `aspect-ratio:1` circle that pushes the glyph off centre. Same root cause, one step further on: scope a fix by the RISK, not by the symptom in front of you - which is the very lesson the first pass was written about. Centred by CONSTRUCTION rather than by arithmetic: flex centring cannot drift if the theme changes its padding again. */ .adi-sf button.adi-sf-scale-btn{ background:#fff !important; color:#7d8a96 !important; border:1.5px solid var(--line) !important; border-radius:50% !important; font-family:inherit !important; text-transform:none !important; letter-spacing:normal !important; opacity:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; line-height:1 !important; text-align:center !important; } .adi-sf button.adi-sf-scale-btn.sel{ background:var(--orange) !important; color:#fff !important; border-color:var(--orange) !important; } /* ═══════════════════════════════════════════════════════════════════════════════════════ P1-469, 11 Aug 2026 — THE SAME FIX APPLIED TO THE CLASS, AFTER APPLYING IT TO THE INSTANCE THREE TIMES IN ONE EVENING. August the theme fix went to the SUBMIT button only, leaving next/back and both number controls exposed 19:51 today it neutralised COLOUR and left SHAPE 20:23 today it reached ONE of the two number controls and left the other — which is why "Would you recommend Already Doing It" was wrong on BOTH centring and colour: that control was never touched, rather than touched and missed Each time the fix matched the thing complained about rather than the CLASS of thing. CLAUDE.md already says it — *scope a gate by the risk, never by the file that prompted it* — and three instances in one evening makes it a live hazard rather than history. ⛔ SO THIS TARGETS EVERY BUTTON INSIDE .adi-sf, not a list of class names. A control added next year inherits the protection instead of the problem, which a list can never do. THE ENUMERATION, from the render code rather than from the page — FOUR button-family controls and THREE other inputs: adi-sf-bubble the 1-5 likert bubbles (was NOT protected) adi-sf-scale-btn the 1-10 scale circles (protected 20:23) adi-sf-btn next / back (protected 19:51) adi-sf-submit submit (protected in August) adi-sf-input · adi-sf-uni-input · adi-sf-textarea — not buttons; the theme's button rule cannot reach them, and they are named here so the next reader does not have to re-derive the list to know they were considered. ═══════════════════════════════════════════════════════════════════════════════════════ */ /* the base: every button in the survey, whatever it is called */ .adi-sf button{ font-family:inherit !important; text-transform:none !important; letter-spacing:normal !important; opacity:1 !important; } /* both number controls are centred BY CONSTRUCTION, so theme padding cannot move the glyph */ .adi-sf button.adi-sf-bubble, .adi-sf button.adi-sf-scale-btn{ display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; line-height:1 !important; text-align:center !important; } /* ═══════════════════════════════════════════════════════════════════════════════════════ 12 Aug 2026 — DAN: "the word Back is not centred in the Back button." AND THE ANSWER TO "IS THIS A CONTROL THE FAMILY RULE DOES NOT REACH, OR HAS IT COME BACK?" IS THE FIRST: THE FAMILY RULE NEVER REACHED IT, AND THE RULE IS THE DEFECT RATHER THAN THE BUTTON. P1-469's block above says "THIS TARGETS EVERY BUTTON INSIDE .adi-sf, not a list of class names". That is true of the TYPOGRAPHY half (.adi-sf button, line ~197). It is NOT true of the GEOMETRY half directly above this comment, which lists .adi-sf-bubble and .adi-sf-scale-btn — the two NUMBER controls that prompted it. So the fix was scoped by the thing complained about, one more time, in the very block written to stop that. ⛔ A COMMENT CARRYING A GUARANTEE THE CODE DOES NOT ENFORCE — and it was believed, which is why this took a second look from Dan rather than being caught here. THE MECHANISM, and it is not the theme: .adi-sf-btn sets `padding:13px 26px` and .adi-sf-back then sets `padding-left:4px`. 4px on the left against 26px on the right puts the label 11px left of centre in its own button. Asymmetric padding, entirely ours. SO THE GEOMETRY RULE NOW COVERS THE BUTTON FAMILY TOO, by construction rather than by listing the control that was reported. */ .adi-sf button.adi-sf-btn{ display:inline-flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; padding-left:26px !important; padding-right:26px !important; } /* and the bubbles keep their own intended colours, which the theme was overriding */ .adi-sf button.adi-sf-bubble{ background:#fff !important; color:#7d8a96 !important; border:1.5px solid var(--line) !important; border-radius:11px !important; } .adi-sf button.adi-sf-bubble.sel{ background:var(--navy) !important; color:#fff !important; border-color:var(--navy) !important; } /* ═══════════════════════════════════════════════════════════════════════════════════════ SURV-6, 11 Sept 2026 — THE RATING SCALES, MEASURED BEFORE THIS WAS WRITTEN (tools/verify_surv6_scales.js on 2.56.526): desktop the 1-10 end label "Very confident" ran past the edge of its question and the row scrolled sideways phone the 1-10 buttons were 20px wide; both end labels overflowed their columns; the five-option captions ran into each other and "Definitely yes" went off the edge ONE SHAPE BEHIND ALL OF IT: a label for the END of a scale was squeezed into ONE number's column. So the end labels are anchored to the ends of the row and spill into the empty columns beside them, never out of the row; on a phone the number buttons get a narrow gap and a rounded-rectangle shape, and a five-option scale becomes a short list with each caption beside its own bubble. LAST in the file on purpose, so it wins on source order; !important only where the theme-neutralising blocks above already use it. ═══════════════════════════════════════════════════════════════════════════════════════ */ .adi-sf-scale .adi-sf-pt:first-child .adi-sf-cap{ display:flex; justify-content:flex-start; white-space:nowrap; } .adi-sf-scale .adi-sf-pt:last-child .adi-sf-cap{ display:flex; justify-content:flex-end; white-space:nowrap; } @media (max-width:480px){ .adi-sf-scale-row{ gap:3px; } .adi-sf .adi-sf-scale-btn{ aspect-ratio:auto; height:36px; max-width:none; font-size:14px; } .adi-sf button.adi-sf-scale-btn{ border-radius:9px !important; } .adi-sf-likert{ flex-direction:column; gap:8px; } .adi-sf-likert .adi-sf-pt{ display:flex; align-items:center; gap:12px; text-align:left; } .adi-sf .adi-sf-likert .adi-sf-bubble{ flex:0 0 40px; width:40px; height:40px; margin:0; } .adi-sf-likert .adi-sf-cap{ margin-top:0; font-size:13px; line-height:1.3; } }