/* * THE CUSTOMER ACCOUNT CONTROL - the button and menu in the corner of the website. * * A NEW FILE ON PURPOSE. atlantic.css is the design drop and is frozen byte for byte; nothing * here touches it. These rules only style elements that did not exist in the drop, and they * borrow the drop's own variables so the result is Atlantic rather than a second design. * * LOADED LAST of the website's stylesheets (inc/assets.php: fonts, atlantic, wp-adapt, mobile, * customer) so the midnight corrections below can win without !important. The PORTAL's * stylesheets load after this at priority 20, so anything here that touches an .sp- class has * to out-specify app.css rather than rely on order. * * PHONE FIRST. Customers arrive from an email, on a phone, often on a bad connection. Every * measurement below starts at the phone and widens. */ /* ---------------------------------------------------------------- the account control It sits in .ag-tools, the fixed slot the language picker used to occupy. */ /* * ALIGNED TO THE BAR, NOT TO THE WINDOW (client, 22 Sep: "align that with TOPBAR panel in * center and the size of that must be like the Menu"). * * The drop pinned .ag-tools at a flat top:16px, which was right for a small language pill and * wrong for this: the bar sits at --ag-nav-top and is --ag-nav-h tall, so a fixed 16px left the * control riding about 20px high. Giving .ag-tools THE BAR'S OWN BAND - same top, same height - * and letting its existing align-items:center do the rest means the control is centred on the * bar by construction. Change the bar's height in the drop and this follows it. */ .ag-tools { top: var(--ag-nav-top, 14px); height: var(--ag-nav-h, 82px); } .ag-acct { position: relative; font-family: var(--att-font-ui, inherit); } /* * ONE WIDTH FOR THE BUTTON AND THE MENU (client: "when you click on that the menu appear so * same size"), and it is a MEASURED width rather than a nice round number. * * .ag-tools is fixed to the right edge of the window; the bar is centred with a fixed gutter. * The room between them is therefore constant at any given breakpoint, and arithmetic on the * drop's own numbers gives it: the bar's right edge sits at window - --ag-nav-x, and the * control starts at window - 16. That leaves 212px from 1380px up, and 182px between 821 and * 1379 where --ag-nav-x drops to 198. Anything wider and the pill starts overlapping the bar, * which is the one thing worse than it being too small. * * Both of these fit the longest item, "Ask for a quote" with its icon, without wrapping. The * email address in the menu head wraps instead, which is what word-break is there for. */ :root { --att-acct-w: 176px; } @media (min-width: 1380px) { :root { --att-acct-w: 208px; } } /* THE SAME HEIGHT AS THE BAR'S OWN CONTROLS. The telephone chip in the nav is 44px and the Request a quote pill 40px; at 37px this read as a smaller, lesser thing bolted to the side. 44px is also the smallest comfortable tap target on a phone. */ .ag-acct-b { display: inline-flex; align-items: center; gap: 9px; width: var(--att-acct-w); height: 44px; padding: 0 15px; border-radius: 999px; cursor: pointer; /* THE TOPBAR'S OWN GLASS (client, 26 Sep: "glassy like top bar and the inside icon to atlantic branding color"). These are .ag-nav-in's exact values from atlantic.css - the gradient, the blur, the border and both shadows - so the button reads as a piece of the bar that has come loose, not as a second design sitting beside it. It was a dark smoked-glass pill before. Text in the bar's own ink; the icons in Atlantic red. */ background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.55)); backdrop-filter: blur(24px) saturate(170%); -webkit-backdrop-filter: blur(24px) saturate(170%); border: 1px solid rgba(255,255,255,.78); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 16px 44px -20px rgba(16,27,36,.42); color: var(--ink, #101B24); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; } .ag-acct-b svg { color: var(--r, #DD302D); } /* Hover is the bar's own brighter "scrolled" glass (.ag-nav.up .ag-nav-in). */ .ag-acct-b:hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.76)); box-shadow: 0 1px 0 #fff inset, 0 18px 46px -20px rgba(16,27,36,.5); } /* On the customer's own pages the bar is midnight glass, so the button is too - the exact values of [data-mood=midnight] .ag-nav-in. The icons stay Atlantic red. */ [data-mood=midnight] .ag-acct-b { background: linear-gradient(180deg, rgba(20,31,39,.82), rgba(20,31,39,.64)); border-color: rgba(255,255,255,.14); box-shadow: 0 16px 44px -20px rgba(0,0,0,.6); color: #E6ECF1; } [data-mood=midnight] .ag-acct-b:hover { background: linear-gradient(180deg, rgba(20,31,39,.94), rgba(20,31,39,.82)); box-shadow: 0 18px 46px -20px rgba(0,0,0,.7); } .ag-acct-b:focus-visible { outline: 2px solid var(--att-red-300, #FF8A87); outline-offset: 2px; } .ag-acct-b svg { flex: 0 0 auto; } /* A long first name is cut with an ellipsis rather than being allowed to change the width of the button - the menu below has to match it. */ .ag-acct-b > b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .ag-acct-b > svg:last-child { margin-left: auto; opacity: .7; } /* The face: initials, or the customer's own photograph once they have uploaded one. */ .ag-acct-face { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg,#DD302D,#A3211F); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; overflow: hidden; flex: 0 0 auto; } .ag-acct-face img { width: 100%; height: 100%; object-fit: cover; display: block; } /* * THE MENU IS THE WIDTH OF THE BUTTON (client: "when you click on that the menu appear so same * size"), with a floor so the email address and the longest item still fit on a phone. It hangs * from the button's right edge, so on a narrow window it opens inwards rather than off-screen. */ .ag-acct-menu { position: absolute; right: 0; top: calc(100% + 8px); width: var(--att-acct-w); background: rgba(20,17,22,.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.5); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60; } .ag-acct.is-open .ag-acct-menu { opacity: 1; visibility: visible; transform: translateY(0); } .ag-acct-who { padding: 12px 13px 13px; border-bottom: 1px solid rgba(255,255,255,.09); margin-bottom: 6px; } .ag-acct-who b { display: block; color: #fff; font-size: 14px; } .ag-acct-who span { display: block; color: rgba(255,255,255,.55); font-size: 12px; margin-top: 2px; word-break: break-all; } .ag-acct-menu a, .ag-acct-menu button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 13px; border-radius: 11px; border: 0; background: none; cursor: pointer; color: rgba(255,255,255,.86); font-size: 13.5px; text-align: left; text-decoration: none; font-family: inherit; } .ag-acct-menu a svg, .ag-acct-menu button svg { flex: 0 0 auto; } .ag-acct-menu a:hover, .ag-acct-menu button:hover { background: rgba(255,255,255,.08); color: #fff; } .ag-acct-menu a:focus-visible, .ag-acct-menu button:focus-visible { outline: 2px solid var(--att-red-300, #FF8A87); outline-offset: -2px; background: rgba(255,255,255,.08); } /* The item you are already standing on, so the menu answers "where am I" too. */ .ag-acct-menu a[aria-current="page"] { background: rgba(255,255,255,.07); color: #fff; } .ag-acct-menu .ag-acct-out { color: #FF8A87; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.09); border-radius: 0 0 11px 11px; } /* ---------------------------------------------------------------- the phone .ag-tools is fixed at right:12px and the phone bar puts the telephone chip in that same corner, so the control was sitting ON it. Two halves to the fix: the control loses its label and becomes a single 44px disc, and the bar is told to keep that much room free on its right. Neither touches the parity-verified markup. */ @media (max-width: 820px) { .ag-tools { top: var(--ag-mtop, 0px); height: var(--ag-nav-h, 62px); } /* ON A PHONE IT IS ONE OF THE BAR'S BUTTONS - the same 44px rounded square and the same glass as the burger and the telephone beside it (mobile.css .ag-burger, .ag-tel), so the three read as a set. It was a dark circle before. */ .ag-acct-b { padding: 0; width: 44px; justify-content: center; border: 0; border-radius: 15px; background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.34)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 -1px 0 rgba(255,255,255,.28) inset, 0 10px 22px -12px rgba(16,27,36,.5); } .ag-acct-b:hover { transform: none; } .ag-acct-b > svg:first-child { width: 19px; height: 19px; } /* The burger and the telephone turn solid white when the bar does. This control is not inside the bar, so it asks the page whether the bar has turned (:has), and follows. */ body:has(.ag-nav.agm-solid) .ag-acct-b { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76)); } /* Midnight pages: the same glass the burger and telephone wear there (see the midnight phone block below). */ [data-mood=midnight] .ag-acct-b, [data-mood=midnight] body:has(.ag-nav.agm-solid) .ag-acct-b { background: rgba(255,255,255,.10); box-shadow: 0 10px 22px -12px rgba(0,0,0,.5); } .ag-acct-b > b, .ag-acct-b > svg:last-child { display: none; } .ag-acct-b .ag-acct-face { width: 30px; height: 30px; } .ag-nav-in { padding-right: 68px; } /* The button is a disc here, so the menu cannot borrow its width. It takes the room a phone actually has instead. */ .ag-acct-menu { width: min(272px, calc(100vw - 24px)); } } /* ---------------------------------------------------------------- midnight, once it moves * * THE BAR MUST STAY DARK ON THE CUSTOMER'S OWN PAGES (client, 23 Sep: "when I am navigating * down it's changing to white but losing all the information make sure in this section the * topbar remain dark"). * * Why it turned white: the drop brightens the bar as soon as you scroll - `.ag-nav.up * .ag-nav-in` is three classes deep, and the midnight rule that darkens it, * `[data-mood=midnight] .ag-nav-in`, is only two. Midnight lost the moment the page moved, and * the link colours - which midnight HAD set to near-white - were then near-white on white. The * information was never removed; it was painted out. Matching the drop's specificity fixes both * halves at once. */ [data-mood=midnight] .ag-nav.up .ag-nav-in { background: linear-gradient(180deg, rgba(20,31,39,.94), rgba(20,31,39,.82)); border-color: rgba(255,255,255,.16); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 18px 46px -20px rgba(0,0,0,.6); } /* The Request a quote pill and the telephone chip live in the same bar and were drawn for a light one. */ [data-mood=midnight] .ag-nav.up .ag-tel, [data-mood=midnight] .ag-nav.up .ag-mail { color: #E6ECF1; } /* * THE SAME THING ON A PHONE, where mobile.css owns the bar and paints it near-white whenever it * is "solid" - which, on every page but the home page, is immediately. These rules used to sit * inline in customer/auth-shell.php, where only the three sign-in screens got them; /account/ * and the profile screen were left with the white bar the client photographed. One copy, here, * covering every midnight screen. */ @media (max-width: 820px) { /* .ag-nav.agm-solid .ag-nav-in in mobile.css is three classes deep; matching it takes four, or the white bar wins and the white-ink lockup disappears into it. */ [data-mood=midnight] .ag-nav.agm-solid .ag-nav-in { background: linear-gradient(180deg, rgba(20,31,39,.92), rgba(20,31,39,.76)); border-color: rgba(255,255,255,.14); } [data-mood=midnight] .ag-nav.agm-solid .ag-brand-lockup.dark { opacity: 1; } [data-mood=midnight] .ag-nav.agm-solid .ag-brand-lockup:not(.dark) { opacity: 0; } /* mobile.css gives these a white plate when the bar is solid; on a dark bar that is a white blob with a white glyph in it. */ [data-mood=midnight] .ag-nav.agm-solid .ag-burger, [data-mood=midnight] .ag-nav.agm-solid .ag-tel { background: rgba(255,255,255,.10); color: #E6ECF1; } } /* ---------------------------------------------------------------- the profile screen customer/profile.php. The portal's panels and fields do the work; these rules are only for the things the portal has no equivalent of - the photograph, and the read-only facts list. */ .att-prof { max-width: 1060px; margin: 0 auto; padding: 124px 16px 72px; } @media (max-width: 820px) { .att-prof { padding-top: 96px; } } .att-prof-eb { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--sp-red); margin: 0 0 12px; } .att-prof-eb::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--att-red); box-shadow: 0 0 10px var(--att-red); } .att-prof h1 { margin: 0 0 6px; font-size: 30px; line-height: 1.1; letter-spacing: -.03em; color: var(--sp-head); } @media (min-width: 640px) { .att-prof h1 { font-size: 36px; } } .att-prof-lead { margin: 0 0 26px; font-size: 14px; color: var(--sp-dim); } /* THE TWO COLUMNS ARE THE SAME HEIGHT (client, 23 Sep: "extend the Profile background till the end of the other KPIs section... and it must automatically react"). Grid items stretch by default; the `align-items: start` that was here stopped them, so the left panel ended wherever its own content did. Nothing is measured or fixed - the panel simply takes the row's height, whatever the forms on the right add up to. */ .att-prof-grid { display: grid; gap: 14px; } @media (min-width: 900px) { .att-prof-grid { grid-template-columns: 300px 1fr; } } .att-prof-card { padding: 22px; } .att-prof-card h2 { margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--sp-dim); } .att-prof-card p.hint { margin: 6px 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--sp-dim); } .att-prof-form { display: grid; gap: 14px; } .att-prof-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 520px) { .att-prof-two { grid-template-columns: 1fr; } } .att-prof-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* .sp-btn opens with `all: unset` and then sets its own display, which beats the browser's own [hidden] rule - so a button marked hidden was drawn anyway. The Save picture button is hidden until a file has been chosen, and was sitting there inviting a pointless click. */ .sp-btn[hidden], .att-prof [hidden] { display: none; } /* The photograph. The whole disc is the control - click it, or press it with a keyboard - because a customer looking for "change my picture" clicks the picture. */ .att-prof-photo { display: flex; flex-direction: column; align-items: center; text-align: center; } .att-prof-photo > form { width: 100%; } /* The facts stay directly under the photograph, at the TOP of the panel, even though the panel is now as tall as the column beside it. Pinning them to the foot was tried and is worse: the panel runs to about 1300px on a full profile, so the photograph - the thing the customer came to this panel for - would be separated from everything else by a 900px hole. The extended background is what the client asked for; the content is not obliged to spread out to fill it. */ .att-prof-facts { padding-top: 22px; } /* `display: grid` makes this a BLOCK-level box, so the text-align: center above never touched it and the disc sat flush against the left of the form while the name under it was centred - about 24px out, which is exactly what the client photographed. margin-inline centres a block. */ .att-prof-face { width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; margin-inline: auto; background: linear-gradient(135deg,#DD302D,#A3211F); color: #fff; overflow: hidden; font-family: var(--att-font-display, inherit); font-size: 40px; font-weight: 700; border: 0; padding: 0; cursor: pointer; position: relative; box-shadow: 0 16px 40px -16px rgba(0,0,0,.7); transition: transform .18s var(--att-ease, ease), box-shadow .18s; } .att-prof-face img { width: 100%; height: 100%; object-fit: cover; display: block; } .att-prof-face:hover { transform: translateY(-2px); box-shadow: 0 22px 50px -18px rgba(0,0,0,.8); } .att-prof-face:focus-visible { outline: 3px solid var(--att-red-300, #FF8A87); outline-offset: 3px; } /* The instruction sits ON the disc, so nobody has to guess that it is a button. */ .att-prof-face .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 4px 8px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72)); font-family: var(--att-font-ui, inherit); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .18s; } .att-prof-face:hover .cap, .att-prof-face:focus-visible .cap { opacity: 1; } .att-prof-photo .name { margin: 14px 0 2px; font-size: 16px; font-weight: 700; color: var(--sp-head); } .att-prof-photo .mail { margin: 0 0 14px; font-size: 12.5px; color: var(--sp-dim); word-break: break-all; } .att-prof-photo .note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--sp-dim2); } /* The facts nobody can edit: status, when they joined, how they sign in. */ .att-prof-kv { display: grid; gap: 10px; margin: 0; } .att-prof-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .att-prof-kv dt { font-size: 12px; color: var(--sp-dim); } .att-prof-kv dd { margin: 0; font-size: 13px; font-weight: 600; color: var(--sp-head); text-align: right; } .att-prof-msg { margin: 0 0 16px; padding: 13px 18px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; } .att-prof-msg.ok { color: var(--sp-green, #2A8F63); background: rgba(31,157,99,.12); border: 1px solid rgba(31,157,99,.3); } .att-prof-msg.bad { color: var(--sp-red); background: rgba(225,18,38,.12); border: 1px solid rgba(225,18,38,.32); } .att-prof-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: color-mix(in oklab, var(--att-red) 8%, transparent); border: 1px solid color-mix(in oklab, var(--att-red) 22%, transparent); font-size: 12.5px; line-height: 1.6; color: var(--sp-ink); } .att-prof-note svg { flex: none; margin-top: 1px; color: var(--sp-red); } .att-prof-note b { color: var(--sp-head); } /* A field the customer cannot change, and the reason why, said in the same breath. */ .att-prof-lock input[disabled] { opacity: .62; cursor: not-allowed; } .att-prof-why { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--sp-dim2); } /* * NOTHING ELSE LIVES HERE ANY MORE. This file used to carry a light-themed set of auth and * account styles. On 22 Sep the client asked for those screens to wear the Central Management * design instead - dark panels, the portal's own variables - so they now style themselves from * the drop's stylesheets (see customer/auth-shell.php and customer/account.php) and the light * rules were deleted rather than left behind to rot. */ /* ---------------------------------------------------------------- choosing a picture Press the disc and two ways open: the camera, or the file browser. Both have to work on a desktop and on a phone, so the camera is drawn INTO the page with getUserMedia where that exists, and falls back to the handset's own camera app where it does not. */ .att-pick { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(6,10,13,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .att-pick[hidden] { display: none; } /* A SOLID card, not the portal's --sp-panel. That token is a 5.5% WHITE SHEET meant to sit on the portal's own dark ground; floated over a dimmed page it has nothing underneath it to tint and reads as washed-out grey. A dialogue has to be opaque anyway - you should not be able to read the form through the thing asking you a question. */ .att-pick-card { width: min(380px, 100%); border-radius: 20px; padding: 22px; background: linear-gradient(180deg, #1B242B, #141C22); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 40px 90px rgba(0,0,0,.6); text-align: center; } .att-pick-card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--sp-head); font-family: var(--att-font-display, inherit); } .att-pick-card p { margin: 0 0 18px; font-size: 12.5px; color: var(--sp-dim); } .att-pick-ways { display: grid; gap: 10px; } .att-pick-way { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 13px; width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--sp-line2, rgba(255,255,255,.16)); color: var(--sp-head); font-size: 14px; font-weight: 600; text-align: left; transition: background .16s, border-color .16s, transform .16s; } .att-pick-way:hover { background: rgba(255,255,255,.07); border-color: var(--att-red-300); transform: translateY(-1px); } .att-pick-way:focus-visible { outline: 2px solid var(--att-red-300); outline-offset: 2px; } .att-pick-way .ic { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--att-gradient); color: #fff; } .att-pick-way span.tx { display: block; } .att-pick-way span.tx em { display: block; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--sp-dim); margin-top: 2px; } .att-pick-x { margin-top: 14px; } .att-pick-err { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--sp-red); } /* The camera itself. The preview is mirrored, as every camera application mirrors a selfie; what is SAVED is not, which is also what they do. */ .att-cam-stage { position: relative; width: min(340px, 100%); aspect-ratio: 1; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; background: #0B1015; border: 2px solid var(--sp-line2, rgba(255,255,255,.18)); } .att-cam-stage video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); display: block; } .att-cam-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .att-cam-shoot { all: unset; cursor: pointer; width: 62px; height: 62px; border-radius: 50%; background: var(--att-gradient); box-shadow: 0 14px 30px -12px rgba(225,18,38,.9); display: grid; place-items: center; color: #fff; } .att-cam-shoot:hover { filter: brightness(1.08); } .att-cam-shoot:focus-visible { outline: 3px solid var(--att-red-300); outline-offset: 3px; } /* ---------------------------------------------------------------- closing the account Set apart and coloured like what it is. Nothing else on the screen is destructive. */ /* TWO CLASSES DEEP ON PURPOSE. .sp-panel in app.css is one class and app.css loads AFTER this file, so a plain `.att-prof-danger` tied on specificity and lost on order - the panel kept the ordinary grey border. This is the trap noted at the top of this file, caught in the act. */ .att-prof .sp-panel.att-prof-danger { border-color: color-mix(in oklab, var(--att-red) 34%, transparent); } .att-prof-danger h2 { color: var(--sp-red); } .sp-btn.danger { background: var(--att-red); border-color: transparent; color: #fff; box-shadow: 0 14px 32px -16px rgba(225,18,38,.9); } .sp-btn.danger:hover { background: var(--att-red); filter: brightness(1.08); color: #fff; } /* ---------------------------------------------------------------- the gate The sign-in panel that stands where the quote form and the call-back form would be, for anybody without an account (inc/customer-gate.php). The card, the heading, the text and the buttons are all the drop's own classes; these rules only lay them out. */ .att-gate { text-align: left; } .att-gate .ag-cb-h { margin: 0 0 8px; } .att-gate .ag-cb-p { margin: 0 0 20px; line-height: 1.6; max-width: 56ch; } .att-gate-acts { display: flex; flex-wrap: wrap; gap: 10px; } .att-gate-acts .ag-btn { min-width: 170px; justify-content: center; } .att-gate-call { margin: 18px 0 0; font-size: .86rem; color: rgba(255,255,255,.6); } .att-gate-call a { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; } .att-gate-call a:hover { text-decoration: underline; } @media (max-width: 520px) { .att-gate-acts .ag-btn { flex: 1 1 100%; } } /* On the quote page the panel is its own card, and a card that only holds two buttons does not need the form's full width. */ .ag-card.att-gate { max-width: 640px; margin-inline: auto; } /* The account's email on the quote form: read-only, and looking it, so nobody tries to type over it and wonders why nothing happens. */ .ag-inp[readonly] { opacity: .72; cursor: default; } /* ---------------------------------------------------------------- readable on a phone 26 Sep, with the rest of the phone text floor (mobile.css, handoff 82). The portal design's field labels and small caps are 10.5px; on a phone the floor is 11px. Two classes deep so app.css - which loads after this file - cannot undo it. */ @media (max-width: 820px) { .att-signin-wrap .sp-f > span, .att-prof .sp-f > span, .att-acct .sp-label, .att-prof .sp-label, /* The account screens' own small caps: the red eyebrows ("Your requests", "My account"), the "Change" caption on the photograph, and the status pills. .att-acct-eb is defined in account.php's inline block, which comes after this file - hence two classes here too. */ .att-acct .att-acct-eb, .att-prof .att-prof-eb, .att-prof .att-prof-face .cap, .att-acct .sp-st, .att-prof .sp-st { font-size: 11.5px; } } /* ---------------------------------------------------------------- show password, My account 3 Oct (client). The three password fields carry the sign-in screens' eye button (atlantic_password_eye() in inc/cm.php). .att-pw is the box it is positioned in. It is a span because it sits inside a