@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&family=Source+Sans+3:ital,wght@0,300;0,400;0,600;1,400&display=swap'); /* ========================================================== DILLON PRECISION â€” GLOBO PRODUCT OPTIONS Consolidated stylesheet. Replaces the whole sheet. Rev. 2026-10-01 PART 1 Base card system (your original, plus real class names) + Links in help text ("View Product") + "Why buy this?" tooltip PART 2 Choicelist + pill selected states (your original) PART 3 Dropdown â€” mobile PART 4 Add-on block structure â€” headings, steps, thumbnails TWO TRAPS DOCUMENTED IN HERE. Read them before editing: Â· PART 3 note â€” Globo opens/closes the list with max-height. Â· PART 4 note â€” headings are NOT h3/h4 in this Globo version. ========================================================== */ /* ========================================================== PART 1 â€” BASE CARD SYSTEM ========================================================== */ .gpo-app { --dp-blue: #085BB0; --dp-blue-hover: #0a6fd4; --dp-dark: #111111; --dp-muted: rgba(0,0,0,.62); --dp-faint: #6b7280; --dp-line: #e3e8ef; --dp-bg: #f7f8fb; --dp-ease: cubic-bezier(.22, 1, .36, 1); font-family: 'Source Sans 3', sans-serif; color: var(--dp-dark); background: #ffffff; border: 1px solid var(--dp-line); border-radius: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.06); padding: 24px; margin: 18px 0 26px; } .gpo-app, .gpo-app * { box-sizing: border-box; } /* ---------- Fields ---------- */ /* `.gpo-option` and `.gpo-element-wrapper` do not exist in this Globo build. `.gpo-element` is the real one â€” kept the old names in case a future version reintroduces them. */ .gpo-app .gpo-element, .gpo-app .gpo-form__group, .gpo-app .gpo-option, .gpo-app .gpo-element-wrapper { margin-bottom: 18px; } .gpo-app .gpo-element:last-child, .gpo-app .gpo-form__group:last-child { margin-bottom: 0; } /* Field labels. NOTE: Globo also renders every option ROW as a , so this rule is deliberately scoped to `.gpo-label` and to labels that are direct children of a form group â€” never all descendants. Styling all labels is what used to push option rows uppercase and blow out the dropdown. See PART 3. */ .gpo-app .gpo-label, .gpo-app .gpo-form__group > label { font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--dp-dark); margin-bottom: 7px; /* block, not inline-block: beside a floated thumbnail an inline-block that doesn't fit drops below it whole, while a block's line boxes simply shorten and wrap alongside. */ display: block; } .gpo-app .gpo-helptext, .gpo-app small { font-size: 13px; line-height: 1.5; color: var(--dp-muted); } /* ---------- Links in help text (e.g. "View Product") ---------- */ /* Use plain View Product in each value's help text. No inline style needed â€” this controls the color and underline for every link in the widget. */ .gpo-app a, .gpo-app .gpo-helptext a { color: var(--dp-blue) !important; text-decoration: underline !important; text-decoration-color: var(--dp-blue) !important; text-underline-offset: 2px; font-weight: 600; transition: color .2s var(--dp-ease); } .gpo-app a:hover, .gpo-app .gpo-helptext a:hover { color: var(--dp-blue-hover) !important; text-decoration-color: var(--dp-blue-hover) !important; } .gpo-app a:focus-visible { outline: 2px solid var(--dp-blue); outline-offset: 2px; border-radius: 2px; } /* ---------- "Why buy this?" tooltip ---------- */ /* Help text HTML: Why buy this? The ? is a

Shell Sorter

You may also like