/* ========================================================================== mediaKit/css/digi-ui.css ยท Digi's shared UI, one file (S64, Sep 28, 2026) -------------------------------------------------------------------------- WHATEVER CAN CASCADE, DOES. Every public page and merchant tool links this file after its own styles. Change it here and every page follows. Pages are switched over as each one is touched; goLIVE keeps the list. Not for dCC: it has its own themes and rules. WHAT LIVES HERE .dgo THE button. The classic white with the green glow (from the door of digi-welcome and digiECOSYSTEM). Replaces the green fill buttons: the main action on a screen, not every link. .dgo.on-dark the same button on a dark ground (the red-carpet stage) .dgo.sm a smaller one, for a second action under the main one .dg-down the pointer: our own chevron, turned down, drifting gently span.dgi THE DIGI FORMULA: digi 600, MARK 900, TM / R 600, mark colour by product (ESSENTIALS), set by class: .dg green, .df red, .dp blue, .nw black. No default colour, so linking this file moves nothing. RULES KEPT HERE - Montserrat only; the page loads mediaKit/fonts/fonts.css first. - Hover lifts only where there is a real pointer (a phone keeps hover stuck). - Reduced motion: no lift, no drift. - A mark inside a button keeps its case: text-transform never flattens digiMESSAGE into DIGIMESSAGE. ========================================================================== */ /* ---- THE BUTTON ---- */ .dgo{ -webkit-appearance:none;appearance:none;box-sizing:border-box; display:flex;align-items:center;justify-content:center;gap:8px; width:100%;margin:12px 0 0;padding:17px 16px; font-family:'Montserrat',-apple-system,sans-serif;font-size:17px;font-weight:600;letter-spacing:-.3px; line-height:1.2;text-align:center;text-decoration:none;color:#111; background:#fff;border:1.5px solid #e8eeea;border-radius:14px;cursor:pointer; -webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none; box-shadow:0 1px 2px rgba(17,17,17,.06), 0 6px 18px rgba(5,103,42,.10), 0 14px 34px rgba(5,103,42,.08); transition:transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s ease, border-color .18s ease, opacity .18s ease; } .dgo span.dgi{text-transform:none;} @media (hover:hover) and (pointer:fine){ .dgo:hover{transform:translateY(-2px);border-color:#cfe2d6; box-shadow:0 2px 4px rgba(17,17,17,.06), 0 10px 26px rgba(5,103,42,.16), 0 22px 48px rgba(5,103,42,.12);} } .dgo:active{transform:translateY(1px);border-color:#cfe2d6; box-shadow:0 1px 2px rgba(17,17,17,.08), 0 3px 10px rgba(5,103,42,.14);} .dgo:focus-visible{outline:3px solid rgba(5,103,42,.35);outline-offset:3px;} .dgo:disabled,.dgo[aria-disabled="true"]{opacity:.5;cursor:default;transform:none; box-shadow:0 1px 2px rgba(17,17,17,.05), 0 4px 12px rgba(5,103,42,.06);} /* a second action sitting under the main one: same object, a step quieter */ .dgo.sm{padding:14px 14px;font-size:15px;} /* on a dark ground the glow has to carry further to read as light, not shadow */ .dgo.on-dark{border-color:rgba(255,255,255,.9); box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 0 18px rgba(64,214,124,.35), 0 0 44px rgba(64,214,124,.22);} @media (hover:hover) and (pointer:fine){ .dgo.on-dark:hover{box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 0 24px rgba(64,214,124,.5), 0 0 60px rgba(64,214,124,.3);} } @media (prefers-reduced-motion:reduce){ .dgo{transition:none;} .dgo:hover,.dgo:active{transform:none;} } /* ---- THE QUIET LINE (S64, Brian) ---- A second action that must never compete with the main one: a short question in grey, then the action as an underlined formula word. First used on the portal's email step: "Trouble signing in? digiMESSAGE US". Any page:

Trouble signing in?

*/ .dg-quiet{margin-top:18px;text-align:center;font-size:13px;font-weight:600;color:#6a6a72;} .dg-quiet button,.dg-quiet a{-webkit-appearance:none;appearance:none;border:0;background:none;padding:2px;margin-left:3px;cursor:pointer; font-family:inherit;font-size:13px;color:inherit;text-decoration:underline;text-decoration-color:rgba(5,103,42,.35);text-underline-offset:3px;} .dg-quiet button:focus-visible,.dg-quiet a:focus-visible{outline:2px solid rgba(5,103,42,.35);outline-offset:3px;border-radius:4px;} /* ---- TEXT BOXES ---- The placeholder is a hint, not a label: it clears the moment he taps in, on every page, so he never has to type around it (Brian, S64). */ input:focus::placeholder,textarea:focus::placeholder{color:transparent;} /* ---- digiMESSAGE US (the chat sheet; code in mediaKit/js/digi-message.js; words in digiUI.md 6.3) ---- */ /* A live chat with a person at Digi Discounts. A full sheet on a phone, a card on a desk. His words in Digi green on the right; ours in Digi grey on the left, our globe on the first of a run. */ /* the red dot on digiMESSAGE US when Digi answered while the chat was closed */ .dgo .dm-dot{width:8px;height:8px;border-radius:50%;background:#cf0202;display:none;} .dgo.new .dm-dot{display:block;} /* the chat carries its own sizing, so it is right on a page with no reset of its own */ .dm,.dm *,.dm *::before,.dm *::after{box-sizing:border-box;} .dm{position:fixed;inset:0;z-index:140;display:flex;align-items:stretch;justify-content:center;background:rgba(17,17,17,.42);} .dm[hidden]{display:none;} .dm-card{display:flex;flex-direction:column;width:100%;max-width:480px;background:#fff; padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);} @media (min-width:560px){ .dm{align-items:center;padding:24px;} .dm-card{height:min(720px,100%);border-radius:20px 20px 20px 6px;overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.28), 0 0 0 1px rgba(5,103,42,.06);} } /* THE HEADER: our globe and the name of the place (no US: it is the place, not the invitation) */ .dm-hd{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 18px;border-bottom:1px solid #eef0ee;} .dm-globe{width:38px;height:38px;display:block;flex-shrink:0;border-radius:50%;box-shadow:0 4px 8px rgba(0,0,0,.16),0 2px 3px rgba(0,0,0,.1);} .dm-hd-t{flex:1;min-width:0;} .dm-name{display:block;font-size:19px;letter-spacing:-.4px;line-height:1.05;color:#111;} .dm-hd-t .dm-sub{display:block;font-size:12.5px;font-weight:600;color:#8a8a93;margin-top:3px;} .dm-x{-webkit-appearance:none;appearance:none;border:0;background:#f4f4f7;width:34px;height:34px;border-radius:50%; font-size:18px;line-height:1;color:#55555e;cursor:pointer;flex-shrink:0;} .dm-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:18px 16px 10px;display:flex;flex-direction:column;gap:6px; background:linear-gradient(to bottom,#fff 0%,#fafbfa 100%);} /* THE WELCOME: a person opened the door, not a form */ .dm-hi{align-self:stretch;text-align:center;padding:18px 10px 10px;} .dm-face{display:flex;flex-direction:column;align-items:center;margin:0 auto 16px;} .dm-face img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;border:3px solid #fff; box-shadow:0 0 0 1px #e3ece6,0 6px 18px rgba(5,103,42,.18),0 0 26px rgba(64,214,124,.14);} .dm-face-n{display:block;margin-top:10px;font-size:14px;font-weight:800;color:#111;letter-spacing:-.2px;} .dm-face-t{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#8a8a93;} .dm-hi .dm-lock{white-space:nowrap;} .dm-hi > b{display:block;font-size:22px;font-weight:900;letter-spacing:-.6px;color:#111;margin-bottom:6px;} .dm-hi > p{font-size:14px;font-weight:500;color:#55555e;line-height:1.5;max-width:300px;margin:0 auto;} .dm-chips{display:flex;flex-direction:column;gap:8px;margin:18px auto 4px;max-width:320px;} .dm-chip{-webkit-appearance:none;appearance:none;font-family:inherit;font-size:14px;font-weight:700;color:#05672a;text-align:left; background:#fff;border:1.5px solid #dfeae3;border-radius:14px;padding:12px 14px;cursor:pointer; box-shadow:0 1px 2px rgba(5,103,42,.06),0 4px 12px rgba(5,103,42,.06);transition:border-color .16s ease,transform .16s ease;} @media (hover:hover) and (pointer:fine){ .dm-chip:hover{border-color:#b9d6c4;transform:translateY(-1px);} } .dm-chip:active{transform:translateY(1px);} /* THE BUBBLES: his in Digi green (the one brand hit), ours in Digi grey with our globe on the first of a run */ .dm-m{max-width:80%;padding:10px 14px;border-radius:18px;font-size:15px;font-weight:500;line-height:1.45; white-space:pre-wrap;overflow-wrap:anywhere;animation:dmIn .22s cubic-bezier(.2,.7,.2,1) both;} @keyframes dmIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .dm-m.him{align-self:flex-end;background:#05672a;color:#fff;border-bottom-right-radius:6px;} .dm-m.us{background:#f5f5f8;color:#212121;border-bottom-left-radius:6px;} .dm-us{align-self:flex-start;display:flex;align-items:flex-end;gap:8px;max-width:88%;} .dm-us .dm-m{max-width:none;} .dm-av{width:24px;height:24px;flex-shrink:0;display:block;margin-bottom:2px;border-radius:50%;} .dm-av.blank{visibility:hidden;} .dm-st{align-self:flex-end;font-size:11.5px;font-weight:700;color:#8a8a93;margin:2px 4px 6px 0;} .dm-st.seen{color:#05672a;} .dm-note{align-self:center;text-align:center;font-size:12.5px;font-weight:600;color:#8a8a93;line-height:1.5;max-width:320px;margin:6px 0;} /* THE COMPOSER: send is the house button in miniature */ .dm-ft{border-top:1px solid #eef0ee;padding:10px 12px 10px;background:#fff;} .dm-mail{width:100%;font-family:inherit;font-size:16px;font-weight:600;color:#111;border:1.5px solid #ececf0; border-radius:14px;padding:11px 13px;margin-bottom:8px;-webkit-appearance:none;appearance:none;} .dm-mailbox[hidden]{display:none;} /* door 2 (S64): first name beside email on a wide screen, stacked on a phone; the promise under them; then the code step, where her message waits until her email is confirmed */ .dm-two{display:grid;grid-template-columns:1fr;gap:8px;} @media (min-width:420px){ .dm-two{grid-template-columns:2fr 3fr;} } .dm-two .dm-mail{margin-bottom:0;} .dm-promise{font-size:11.5px;font-weight:600;color:#6a6a72;line-height:1.45;margin:7px 2px 10px;} .dm-code[hidden]{display:none;} .dm-code{margin-bottom:8px;} .dm-codep{font-size:13px;font-weight:600;color:#212121;line-height:1.45;margin:0 2px 8px;overflow-wrap:anywhere;} .dm-pin{flex:1;min-width:0;margin:0;font-size:20px;font-weight:800;letter-spacing:.3em;text-align:center;} .dm-confirm{flex:none;border:1.5px solid #e8eeea;background:#fff;color:#05672a;font-family:inherit;font-size:13.5px;font-weight:800; border-radius:12px;padding:12px 14px;cursor:pointer;box-shadow:0 1px 2px rgba(17,17,17,.06),0 6px 16px rgba(5,103,42,.14);} .dm-confirm:disabled{opacity:.45;cursor:default;box-shadow:0 1px 2px rgba(17,17,17,.05);} .dm-codel{display:flex;gap:16px;margin:8px 2px 0;} .dm-lk{border:0;background:none;padding:0;font-family:inherit;font-size:12.5px;font-weight:700;color:#55555e;text-decoration:underline;cursor:pointer;} .dm-lab{display:block;font-size:12.5px;font-weight:800;color:#111;margin:0 0 6px 2px;} .dm-mail{border-color:#05672a;} .dm-mail.ok{border-color:#ececf0;} .dm-nudge{font-size:12px;font-weight:700;color:#cf0202;margin:-2px 0 8px 2px;} .dm-nudge[hidden]{display:none;} .dm-row{display:flex;align-items:flex-end;gap:8px;} .dm-in{flex:1;min-width:0;font-family:inherit;font-size:16px;font-weight:500;color:#111;background:#f7f8f7;border:1.5px solid #ececf0; border-radius:20px;padding:11px 15px;resize:none;max-height:140px;line-height:1.4;-webkit-appearance:none;appearance:none;} .dm-in:focus,.dm-mail:focus{outline:none;border-color:#05672a;background:#fff;} .dm-send{-webkit-appearance:none;appearance:none;flex-shrink:0;width:46px;height:46px;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid #e8eeea; box-shadow:0 1px 2px rgba(17,17,17,.06),0 6px 16px rgba(5,103,42,.14);transition:transform .16s ease,opacity .16s ease;} .dm-send svg{width:20px;height:20px;fill:none;stroke:#05672a;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;} .dm-send:active{transform:translateY(1px);} .dm-send:disabled{opacity:.4;cursor:default;box-shadow:0 1px 2px rgba(17,17,17,.05);} .dm-small{font-size:11.5px;font-weight:600;color:#a0a0a8;line-height:1.45;text-align:center;margin-top:8px;} /* Oct 2: when we cannot be reached, the note offers the one email (digi-message.js) */ .dm-small.dm-down{color:#6a6a72;} .dm-small a{color:#05672a;font-weight:800;text-decoration:underline;text-decoration-color:rgba(5,103,42,.35);text-underline-offset:2px;} .dm-ts{margin-top:8px;} .dm-ts:empty{display:none;} .dm-err{font-size:12.5px;font-weight:700;color:#cf0202;margin-top:6px;} .dm-err:empty{display:none;} @media (prefers-reduced-motion:reduce){ .dm-m{animation:none;} .dm-chip,.dm-send{transition:none;} } /* ---- THE POINTER ---- Our chevron (the one on every drawer), turned down, in Digi green. It drifts, slow and soft, like breathing, not a bounce: a pointer, never a salesman. Markup: */ .dg-down{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:6px;} .dg-down svg{display:block;width:10px;height:auto;transform:rotate(90deg);} .dg-down svg path{fill:#05672a;} .dg-down{animation:dgDrift 2.4s ease-in-out infinite;} @keyframes dgDrift{0%,100%{transform:translateY(-2px);opacity:.7}50%{transform:translateY(3px);opacity:1}} @media (prefers-reduced-motion:reduce){ .dg-down{animation:none;} } /* ---- THE DIGI FORMULA ---- digi = 600, MARK = 900, TM / R = 600. Mark colour belongs to the product, chosen by class: .dg Digi green (digiECOSYSTEM, digiMERCHANT, digiMESSAGE...), .df digiFREE red, .dp digiPLUS blue, .nw digiNETWORK black. Written as span.dgi so a page's own descendant rules cannot outrank it; this file loads last. */ span.dgi{font-weight:600;} span.dgi b{font-weight:900;} /* colour only where a page asks for it, so linking this file recolours nothing */ span.dgi.dg b{color:#05672a;} span.dgi sup{font-size:.62em;font-weight:600;vertical-align:super;line-height:0;} span.dgi.df b{color:#cf0202;} span.dgi.dp b{color:#1893f8;} span.dgi.nw b{color:#111;} /* a second word after the mark in ink, as in digiMESSAGE US and Ask US */ span.dgi i{font-style:normal;font-weight:900;color:#111;} /* ---- digiLEARN (S65, Brian): learn anything by hovering or pressing and holding ---- mediaKit/js/digi-learn.js. No little i's anywhere. The tip is quiet, readable, and never covers the thing it explains when there is room below or above. */ [data-learn]{-webkit-touch-callout:none;} button[data-learn],a[data-learn],[role=button][data-learn]{-webkit-user-select:none;user-select:none;} .dl-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .dl-tip{position:fixed;z-index:10000;max-width:min(300px,calc(100vw - 20px));box-sizing:border-box;padding:12px 14px 13px;border-radius:14px; background:#fff;color:#16161a;border:1px solid #e6e9e7;font-family:'Montserrat',-apple-system,sans-serif; box-shadow:0 2px 6px rgba(0,0,0,.06),0 14px 36px rgba(0,0,0,.16),0 0 0 4px rgba(5,103,42,.05); opacity:0;transform:translateY(4px);transition:opacity .2s ease-out,transform .2s ease-out;pointer-events:auto;} .dl-tip.in{opacity:1;transform:none;} .dl-tip b{display:block;font-size:14px;font-weight:700;margin-bottom:4px;line-height:1.3;} .dl-tip b .dgi b,.dl-tip p .dgi b{display:inline;font-weight:900;margin:0;} .dl-tip p{margin:0;font-size:13.5px;font-weight:500;line-height:1.5;color:#3f3f46;} html[data-elight=dark] .dl-tip{background:#1d1e23;color:#eef0f5;border-color:#30323a;box-shadow:0 14px 36px rgba(0,0,0,.5)} html[data-elight=dark] .dl-tip p{color:#b9bac3} html[data-elight=dark] .dl-tip .dgi.dg b{color:#03fbb0}html[data-elight=dark] .dl-tip .dgi.nw b{color:#fff}html[data-elight=dark] .dl-tip .dgi.df b{color:#ff4d4d} .dl-ring{position:fixed;z-index:9999;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;pointer-events:none; border:2px solid rgba(5,103,42,.55);box-shadow:0 0 18px rgba(64,214,124,.35);opacity:0;transform:scale(.4);transition:transform .5s ease-out,opacity .15s ease-out;} .dl-ring.go{opacity:1;transform:scale(1);} .dl-hint{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:9998;display:flex;align-items:center;gap:12px; width:max-content;max-width:calc(100vw - 24px);box-sizing:border-box;padding:12px 12px 12px 16px;border-radius:14px;background:#16161a;color:#fff; font:500 13.5px/1.45 'Montserrat',-apple-system,sans-serif;box-shadow:0 12px 36px rgba(0,0,0,.28); opacity:0;transform:translateX(-50%) translateY(16px);transition:opacity .25s ease-out,transform .25s ease-out;} .dl-hint.in{opacity:1;transform:translateX(-50%) translateY(0);} .dl-hint .dgi b{font-weight:900;color:#03fbb0} .dl-hint button{flex:none;border:0;border-radius:9px;padding:8px 12px;background:#fff;color:#111;font:700 12.5px 'Montserrat',-apple-system,sans-serif;cursor:pointer} @media (prefers-reduced-motion:reduce){.dl-tip,.dl-hint,.dl-ring{transition:none}} /* ========================================================================== THE BUBBLE (Oct 3, Brian): digiMESSAGE's signature button. A Digi Green chat bubble (the tight bottom-left corner is the tail, the same corner the card keeps on a desk), our globe set into it at 88%: bare, no ring, no glow, so its own green rim melts into the fill and the face looks pressed in. Tapped, it grows into the chat and its globe flies into the chat's header; closed, it all goes home (digi-message.js, THE FLIGHT). ========================================================================== */ .dm-bubble{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:40px;height:40px;padding:0;margin:0;border:0;border-radius:12px 12px 12px 4px;background:#05672a;cursor:pointer; -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent; box-shadow:0 0 0 1px rgba(5,103,42,.10),0 6px 16px rgba(5,103,42,.28),0 14px 30px rgba(5,103,42,.12); transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s ease;} .dm-bubble-g{display:block;width:88%;height:88%;border-radius:50%;overflow:hidden;pointer-events:none;} .dm-bubble-g img{display:block;width:100%;height:100%;} /* The wide bubble (S67): the lockup, for a door with room for the words. Globe, then digiMESSAGE US in white (on a green ground the mark goes white), same tail, same flight. */ .dm-bubble{font-family:inherit;} /* sized in em: set the button's font-size and the whole bubble scales with it (16px = 52 tall) */ .dm-bubble.wide{width:auto;font-size:16px;height:3.25em;padding:0 1.125em 0 .375em;gap:.625em;border-radius:1em 1em 1em .3125em;} .dm-bubble.wide .dm-bubble-g{width:2.5em;height:2.5em;flex:none;} .dm-bubble-w{font-size:1em;line-height:1;font-weight:600;color:#fff;white-space:nowrap;} .dm-bubble-w b,.dm-bubble-w i{font-weight:900;font-style:normal;color:#fff;} .dm-bubble .dm-dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;background:#cf0202; box-shadow:0 0 0 2px #fff;display:none;} .dm-bubble.new .dm-dot{display:block;} @media (hover:hover) and (pointer:fine){ .dm-bubble:hover{transform:translateY(-1px); box-shadow:0 0 0 1px rgba(5,103,42,.14),0 8px 20px rgba(5,103,42,.34),0 18px 38px rgba(5,103,42,.16);} } .dm-bubble:active{transform:translateY(1px) scale(.985);box-shadow:0 0 0 1px rgba(5,103,42,.18),0 2px 6px rgba(5,103,42,.22);} .dm-bubble:focus{outline:none;} .dm-bubble:focus-visible{outline:3px solid rgba(5,103,42,.35);outline-offset:3px;} @media (prefers-reduced-motion:reduce){ .dm-bubble{transition:none;} } /* THE FLIGHT's two travellers: the plate (the bubble's shape, growing) under the card, and the globe over it. Both live inside .dm, so the card's words always sit above the plate. */ .dm-card{position:relative;z-index:2;} .dm-plate{position:fixed;z-index:1;pointer-events:none;} .dm-fly{position:fixed;z-index:3;pointer-events:none;transform-origin:0 0;border-radius:50%;overflow:hidden;} .dm-fly img{display:block;width:100%;height:100%;} /* THE STILL LANDING (Oct 3, Brian). On a phone the chat is full screen, so its globe sits exactly where the header bubble's globe sits (bar padding 8 + bubble margin 2 + 6% of 40 = 12.4 across; bar 9 + centred in 44 + 6% of 40 = 13.4 down; 88% of 40 = 35.2 wide). She taps, the globe does not move at all: the room grows around it. Change the homepage bar's padding or the bubble's size, change these with it. */ @media (max-width:559px){ .dm-hd{padding:13.41px 16px 13.41px 12.41px;} .dm-globe{width:35.2px;height:35.2px;align-self:flex-start;} }