/* * The sign-in and registration pages. * * Everything here is scoped under .gtl, the class the two auth views put on * , so nothing in it can reach another route. The tokens are the ones * the approved concept specifies; the brand red is the install's own colour * where one is set, and the concept's #C23F38 otherwise. * * The pages' own markup - the forms, their fields, tabs and buttons - keeps * every id, name and handler it had. What changes is the frame around them * and the way those existing classes look. */ .gtl { --brand: var(--site-color, #C23F38); --brand-hover: #A93129; --brand-press: #8E251F; --on-brand: var(--gt-accent-ink, #FFFFFF); --brand-tint: var(--gt-accent-soft, #FBEDEC); --accent: var(--gt-accent-deep, #C23F38); --bg: #FFFFFF; --surface: #FAF8F8; --surface-2: #F2EEED; --line: #E5DEDD; --line-strong: #CFC5C3; --ink: #1A1413; --ink-2: #5B5150; --ink-3: #7B716F; /* 4.74:1 on the page ground; #8B807E read 3.83 */ --panel: #14100F; --panel-2: #1D1817; --panel-ink: #F6F1F0; --panel-ink-2: #A29694; --panel-line: #2E2624; --panel-accent: var(--gt-accent-on-dark, #E9736B); --danger: #B4231C; --ok: #1B7A4E; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow: 0 1px 2px rgba(26, 20, 19, .05), 0 8px 24px -12px rgba(26, 20, 19, .18); --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --f-body: "IBM Plex Sans", "Segoe UI", Arial, sans-serif; --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; } /* The viewer's own preference, and an explicit choice, both honoured. */ @media (prefers-color-scheme: dark) { .gtl:not([data-theme="light"]) { --bg: #100D0C; --surface: #191514; --surface-2: #221D1C; --line: #2E2726; --line-strong: #443A39; --ink: #F6F1F0; --ink-2: #B3A7A5; --ink-3: #877B79; --accent: var(--gt-accent-on-dark, #E9736B); --brand-tint: #2A1917; --panel: #0A0807; --panel-2: #141110; --panel-line: #292120; --danger: #F0776F; --ok: #4FBB86; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .7); } } .gtl[data-theme="dark"] { --bg: #100D0C; --surface: #191514; --surface-2: #221D1C; --line: #2E2726; --line-strong: #443A39; --ink: #F6F1F0; --ink-2: #B3A7A5; --ink-3: #877B79; --accent: var(--gt-accent-on-dark, #E9736B); --brand-tint: #2A1917; --panel: #0A0807; --panel-2: #141110; --panel-line: #292120; --danger: #F0776F; --ok: #4FBB86; --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px -12px rgba(0, 0, 0, .7); } /* ------------------------------------------------------------------ */ /* Frame */ /* ------------------------------------------------------------------ */ body.gtl { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; display: grid; grid-template-rows: auto 1fr auto; overflow-x: clip; } .gtl *, .gtl *::before, .gtl *::after { box-sizing: border-box; } .gtl :where(h1, h2, h3) { font-family: var(--f-display); margin: 0; letter-spacing: -.02em; text-wrap: balance; color: var(--ink); } .gtl :where(a) { color: var(--accent); text-decoration: none; } .gtl :where(img) { max-width: 100%; height: auto; } .gtl :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { .gtl *, .gtl *::before, .gtl *::after { animation: none !important; transition: none !important; } } /* Top bar */ .gtl-top { display: flex; align-items: center; gap: 22px; padding: 0 24px; height: 60px; background: var(--bg); border-bottom: 1px solid var(--line); } .gtl-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; color: inherit; } .gtl-brand img { height: 26px !important; width: auto; max-width: 130px; object-fit: contain; display: block; } .gtl-wordmark { font-family: var(--f-display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; color: var(--ink); } .gtl-nav { display: flex; gap: 2px; margin-left: 8px; list-style: none; margin-block: 0; padding: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; } .gtl-nav::-webkit-scrollbar { display: none; } .gtl-top > nav { min-width: 0; } .gtl-nav a { display: block; padding: 7px 11px; border-radius: var(--radius); color: var(--ink-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; transition: background .15s, color .15s; } .gtl-nav a:hover { background: var(--surface-2); color: var(--ink); } /* Standalone links in the form column are controls too. */ @media (max-width: 767px) { .gtl .gtl-formwrap p > a:only-child, .gtl .gtl-formwrap a.text-dark { display: inline-block; padding-block: 8px; min-height: 32px; } } /* The brand mark is a link, and on a phone it needs a target to aim at. */ @media (max-width: 767px) { .gtl-brand { display: inline-flex; align-items: center; min-height: 34px; padding-block: 4px; } } /* The language control on this page. It is the site header's control, and the site header is dark: its text colour is one picked to read on a dark bar, which on this light one came out at 1.65:1. These pages give it their own ink. */ .gtl .gt-lang, .gtl .gt-lang-value, .gtl .gt-lang-native { color: var(--ink-2) !important; border-color: var(--line-strong) !important; } .gtl .gt-lang:hover, .gtl .gt-lang[data-state="open"] { color: var(--ink) !important; background: var(--surface-2) !important; } .gtl .gt-lang-caret { opacity: 1; color: var(--ink-3); } .gtl-top-end { margin-left: auto; display: flex; align-items: center; gap: 10px; } .gtl-lang select { appearance: none; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); font: 500 12.5px var(--f-body); padding: 7px 26px 7px 10px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .gtl-call { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); color: inherit; } .gtl-call .ic { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); display: grid; place-items: center; color: var(--on-brand); font-size: 11px; flex-shrink: 0; } .gtl-call b { display: block; font: 500 12.5px/1.25 var(--f-mono); color: var(--ink); letter-spacing: -.01em; } .gtl-call i { display: block; font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); } /* Split */ .gtl-main { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); min-width: 0; } /* The registration forms are long. The panel stays put while the form scrolls, rather than its copy drifting off the top of the screen. */ @media (min-width: 881px) { .gtl-panel { position: sticky; top: 0; align-self: start; min-height: calc(100vh - 60px); } } .gtl-panel { position: relative; background: var(--panel); color: var(--panel-ink); overflow: hidden; padding: 44px 48px; display: flex; flex-direction: column; gap: 28px; justify-content: center; } .gtl-panel > * { position: relative; z-index: 1; } /* The panel's optional photograph. The admin panel lets someone upload a sign-in background (the `website_login` / `website_login_mobile` settings). The old page used it as the whole hero's background image with the copy straight on top, which was unreadable against a light photo. Here it sits behind the panel with a scrim over it, so the panel's own text keeps its contrast whatever is uploaded, and the setting still does something. No image, no layer. */ .gtl-panel-photo { position: absolute; inset: 0; z-index: 0; background-position: center; background-size: cover; opacity: .3; } .gtl-panel-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--panel) 0%, transparent 38%, var(--panel) 100%); } @media (max-width: 880px) { .gtl-panel-photo { background-image: var(--panel-photo-mobile, none); } } /* The moving routes. Decoration: it sits behind everything, it never takes a click, and the panel reads the same with it switched off. */ .gtl-panel-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .gtl-panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .8; z-index: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .gtl-panel canvas { opacity: .35; } } .gtl-eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--panel-ink-2); display: flex; align-items: center; gap: 9px; } .gtl-eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--brand); } .gtl-panel h2 { font-size: clamp(26px, 3.1cqi + 14px, 38px); font-weight: 700; line-height: 1.1; max-width: 14ch; color: var(--panel-ink); } /* No padding: a UA's default on reads as a stray space either side of the highlighted words. */ .gtl-panel h2 mark { background: none; color: var(--panel-accent); padding: 0; } .gtl-lede { margin: 0; color: var(--panel-ink-2); font-size: 14px; max-width: 40ch; } .gtl-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--panel-line); } .gtl-feats li { display: flex; gap: 13px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--panel-line); } .gtl-feats svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; stroke: var(--panel-accent); fill: none; stroke-width: 1.6; } .gtl-feats b { display: block; font-size: 13.5px; font-weight: 600; color: var(--panel-ink); } .gtl-feats span span { display: block; font-size: 12px; color: var(--panel-ink-2); line-height: 1.45; } .gtl-apps { display: flex; gap: 10px; flex-wrap: wrap; } .gtl-app { display: flex; align-items: center; gap: 9px; padding: 8px 15px 8px 12px; border-radius: var(--radius); border: 1px solid var(--panel-line); background: var(--panel-2); color: var(--panel-ink); transition: border-color .15s, background .15s; } .gtl-app:hover { border-color: #4A3D3B; background: #221C1B; color: var(--panel-ink); } .gtl-app i.brandmark { font-size: 16px; opacity: .9; } .gtl-app em { font-style: normal; font-size: 9px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--panel-ink-2); display: block; line-height: 1.3; } .gtl-app b { font: 600 12.5px/1.25 var(--f-body); display: block; } /* Form column */ .gtl-formcol { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 44px 48px; background: var(--bg); min-width: 0; } .gtl-formwrap { width: 100%; max-width: 376px; } .gtl-formwrap > header { margin-bottom: 22px; } .gtl-kicker { font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 9px; } .gtl-formwrap h1 { font-family: var(--f-display); font-size: 27px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin: 0; color: var(--ink); } .gtl-formwrap header p { margin: 6px 0 0; color: var(--ink-2); font-size: 13.5px; } /* The Login/Register switch. The page's own Bootstrap tabs are here, restyled; the island upgrades the same list to Reka Tabs for keyboard and ARIA. */ .gtl .tj-tabs { margin-bottom: 20px; } .gtl .nav-tabs, .gtl-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; margin: 0 0 20px; list-style: none; } .gtl .nav-tabs .nav-item { margin: 0; } .gtl .nav-tabs .nav-link, .gtl-tab { display: flex; align-items: center; justify-content: center; border: 0 !important; background: transparent; color: var(--ink-2); cursor: pointer; font: 600 12px/1 var(--f-body) !important; letter-spacing: .07em; text-transform: uppercase; padding: 11px 0; border-radius: 7px; width: 100%; transition: background .16s, color .16s, box-shadow .16s; } .gtl .nav-tabs .nav-link.active, .gtl .nav-tabs .nav-item.active .nav-link, .gtl-tab[data-state="active"], .gtl-tab[aria-selected="true"] { background: var(--brand); color: var(--on-brand); box-shadow: 0 1px 2px rgba(142, 37, 31, .35); } /* A ring for the keyboard only. Clicking a tab focuses it, and the ring that then sat around the filled tab read as a second border. */ .gtl-tab:focus, .gtl .nav-tabs .nav-link:focus { outline: none; } .gtl-tab:focus-visible, .gtl .nav-tabs .nav-link:focus-visible { outline: 2px solid var(--focus, var(--brand)); outline-offset: 2px; } .gtl-tabs:focus, .gtl-tabs:focus-visible { outline: none; } /* Fields. The forms keep .field-holder; this is what it looks like now. */ .gtl .login-frm, .gtl .reg-frm { max-width: none !important; padding: 0 !important; margin: 0 !important; } .gtl .field-holder { position: relative; margin: 0 0 15px; } .gtl-label, .gtl .field-holder > label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; } .gtl-labelrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .gtl-labelrow > label { margin: 0 !important; } /* The password field's own reset link, which now sits on its label row. The one the page prints under the field is the same link and is hidden, rather than removed, so nothing that counts links on this page changes. */ .gtl .field-holder ~ .forget-pass { display: none; } .gtl-labelrow .forget-pass { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--accent) !important; } .gtl-labelrow .forget-pass:hover { text-decoration: underline; } /* A quiet line under a field, for the one thing worth saying about it. */ .gtl-hint { display: flex; align-items: flex-start; gap: 7px; margin: -7px 0 15px; font-size: 12px; line-height: 1.45; color: var(--ink-3); } .gtl-hint svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; stroke: currentColor; fill: none; stroke-width: 1.7; } .gtl-labelrow a { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; } .gtl-labelrow a:hover { text-decoration: underline; } /* The icon inside a field. Measured from the bottom, not nudged down from the top, so it stays put whether or not the field carries a label. */ /* The icon inside a field. Measured from the bottom, not nudged down from the top, so it stays put whether or not the field carries a label: the input is always the last 46px of the holder, so 15px up from the bottom with a 16px box centres it in the input. */ .gtl .field-holder > span[class*="fa-"] { position: absolute; inset-inline-start: 13px; top: auto !important; bottom: 15px; display: grid; place-items: center; width: 16px; height: 16px; margin: 0 !important; color: var(--ink-3); font-size: 15px; line-height: 1; pointer-events: none; z-index: 2; transform: none; } .gtl .field-holder .form-control, .gtl .field-holder input[type="text"], .gtl .field-holder input[type="email"], .gtl .field-holder input[type="password"], .gtl .field-holder input[type="date"], .gtl .field-holder select { width: 100%; min-height: 46px; padding: 11px 13px 11px 38px; border: 1px solid var(--line-strong) !important; border-radius: var(--radius) !important; background: var(--bg) !important; color: var(--ink) !important; box-shadow: none !important; font: 400 14.5px var(--f-body) !important; margin: 0 !important; transition: border-color .15s, box-shadow .15s; } .gtl .field-holder:not(:has(> span[class*="fa-"])) .form-control { padding-inline-start: 13px; } .gtl .field-holder .form-control::placeholder { color: var(--ink-3); } .gtl .field-holder .form-control:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-tint) !important; outline: none; } .gtl .field-holder .form-control.is-invalid, .gtl .field-holder.invalid .form-control { border-color: var(--danger) !important; } /* The registration pages spell a field `.form-group`, the sign-in pages spell it `.field-holder`. Both are the same thing and get the same treatment - renaming one would mean editing markup the brief locks. `!important` throughout is not laziness: the site's own form stylesheet declares `.form-control` important, as grey 25px pills with 40px of side padding, which is what left the fields floating beside their labels at odd widths. */ .gtl .form-group { position: relative; display: block; width: 100%; margin: 0 0 15px; } .gtl .form-group > label, .gtl .form-group > label > strong { display: block; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2) !important; margin: 0 0 6px; } .gtl .form-group > label > br { display: none; } .gtl .form-group .form-control, .gtl .form-group input[type="text"], .gtl .form-group input[type="email"], .gtl .form-group input[type="tel"], .gtl .form-group input[type="number"], .gtl .form-group input[type="password"], .gtl .form-group input[type="date"], .gtl .form-group select, .gtl .form-group textarea { display: block; width: 100% !important; min-height: 46px; padding: 11px 13px !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius) !important; background: var(--bg) !important; color: var(--ink) !important; box-shadow: none !important; font: 400 14.5px var(--f-body) !important; margin: 0 !important; transition: border-color .15s, box-shadow .15s; } .gtl .form-group textarea { min-height: 96px; } .gtl .form-group .form-control::placeholder { color: var(--ink-3); } .gtl .form-group .form-control:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-tint) !important; outline: none; } .gtl .form-group > .col-xs-10, .gtl .form-group > [class*="col-"] { width: 100%; max-width: none; padding: 0; float: none; } /* The radio and checkbox rows. The input is the hidden half of a custom control and the label carries the mark, so the label is the click target and needs the room. */ /* The radios and checkboxes, drawn again from scratch. The site's shared form stylesheet hides the input and draws a 30px grey disc on the label at `left: -20px`, which puts the mark outside the label it belongs to - so a row of three read as "Male (o) Female (o) Other", each mark sitting against the wrong word. These rules replace that mark rather than nudge it: same hidden input, same label as the click target, but the mark is inside the label where it belongs. */ .gtl .form-check-inline { display: inline-block; margin: 0 20px 6px 0; padding: 0; } .gtl .form-group .form-check-label { position: relative; display: inline-block; padding: 0 0 0 26px; margin: 0; line-height: 22px; min-height: 22px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink); cursor: pointer; } .gtl .form-group .form-check-label::before { content: ""; position: absolute; left: 0 !important; right: auto !important; top: 2px !important; transform: none !important; width: 18px !important; height: 18px !important; border: 1.5px solid var(--line-strong); border-radius: 50% !important; background: var(--bg) !important; transition: border-color .15s, box-shadow .15s; } .gtl .form-group .form-check-input:checked + .form-check-label::before { border-color: var(--brand); box-shadow: inset 0 0 0 4px var(--brand); background: var(--bg) !important; } .gtl .form-group .form-check-input:focus-visible + .form-check-label::before { outline: 2px solid var(--focus); outline-offset: 2px; } /* The shared stylesheet's tick glyph has no place here. */ .gtl .form-group .form-check-input:checked + .form-check-label::after { content: none !important; } [dir="rtl"].gtl .form-group .form-check-label { padding: 0 26px 0 0; } [dir="rtl"].gtl .form-group .form-check-label::before { left: auto !important; right: 0 !important; } .gtl .form-group .alert-danger { display: inline-block; margin-top: 6px; font-size: 12.5px; } /* The submit and the link beside it, which the page draws as two stacked Bootstrap rows of fixed-width buttons. */ .gtl .form-group + .row, .gtl form > .row { display: block; margin: 0; } .gtl form > .row .btn { width: 100% !important; min-height: 48px; border-radius: var(--radius) !important; font: 600 14.5px var(--f-body) !important; margin-top: 10px !important; padding: 12px 18px !important; } .gtl form > .row .btn.btn-dark[href] { background: var(--surface-2) !important; color: var(--ink) !important; border: 1px solid var(--line-strong) !important; } .gtl #mobile, .gtl #dmobile { font-family: var(--f-mono) !important; font-size: 14px !important; font-variant-numeric: tabular-nums; } /* When the phone field grows a country picker, the picker owns the left of the field. The holder's own icon would sit on top of the flag, so it stands down. */ .gtl .field-holder:has(.intl-tel-input) > span[class*="fa-"] { display: none; } /* intl-tel-input keeps its own markup and value format; only its look changes. */ .gtl .intl-tel-input { width: 100%; display: block; } .gtl .intl-tel-input .form-control { padding-inline-start: 62px !important; } .gtl .intl-tel-input .flag-container { border: 0; } .gtl .intl-tel-input .selected-flag { width: 54px; padding-inline-start: 12px; background: var(--surface); border-radius: var(--radius) 0 0 var(--radius); border-inline-end: 1px solid var(--line); } .gtl .intl-tel-input .selected-flag:hover { background: var(--surface-2); } .gtl .intl-tel-input .country-list { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); background: var(--bg); color: var(--ink); margin-top: 6px; max-width: 320px; } .gtl .intl-tel-input .country-list .country { padding: 8px 12px; } .gtl .intl-tel-input .country-list .country.highlight { background: var(--surface-2); } .gtl .intl-tel-input .country-list .dial-code { color: var(--ink-3); font-family: var(--f-mono); } /* Password reveal, the page's own control */ .gtl #show_hide_password { position: relative; } /* The show/hide-password eye. Two pages spell the same control two ways - the sign-in page uses `.input-group-addon-password`, the registration page plain `.input-group-addon` - and both are styled here rather than renamed, because the ids and classes the pages' own scripts address are fixed. The height matters: without it the addon collapses to zero and the link inside it, which is what the reveal is bound to, cannot be clicked. */ .gtl .input-group { position: relative; } .gtl .input-group-addon-password, .gtl [class^="input-group-addon-password"], .gtl .input-group > .input-group-addon { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; padding: 0; } .gtl .input-group-addon-password a, .gtl [class^="input-group-addon-password"] a, .gtl .input-group > .input-group-addon a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink-3); } .gtl .input-group-addon-password a:hover, .gtl .input-group > .input-group-addon a:hover { color: var(--ink); } .gtl .input-group-addon-password i, .gtl .input-group > .input-group-addon i { color: inherit !important; margin: 0 !important; } /* Room for the eye, so it never sits over the typed characters. */ .gtl .input-group > .form-control { padding-inline-end: 46px; } .gtl-hint { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 0; font-size: 11.5px; color: var(--ink-3); } .gtl-hint svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 3px; stroke: currentColor; fill: none; stroke-width: 2; } .gtl .help-block { display: block; margin-top: 5px; font-size: 11.5px; font-weight: 500; color: var(--danger); } .gtl .help-block strong { font-weight: 500; } /* Buttons */ .gtl .reg-btn, .gtl .btn-new, .gtl button[type="submit"], .gtl .btn-success { width: 100%; border: 0 !important; cursor: pointer; background: var(--brand) !important; color: var(--on-brand) !important; font: 600 14.5px var(--f-body) !important; letter-spacing: .01em; padding: 13px 18px !important; border-radius: var(--radius) !important; display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 6px; box-shadow: none !important; transition: background .15s, transform .06s; min-height: 48px; } .gtl .reg-btn:hover, .gtl .btn-new:hover, .gtl button[type="submit"]:hover { background: var(--brand-hover) !important; } .gtl .reg-btn:active, .gtl button[type="submit"]:active { background: var(--brand-press) !important; transform: translateY(1px); } .gtl .btn-default, .gtl .btn.btn-secondary { background: var(--surface-2) !important; color: var(--ink) !important; } /* The "already have an account?" line the registration page ends with. It is the page's own markup and keeps its classes; this is only what it looks like. */ .gtl form + p.text-center, .gtl form + p.mt-3 { margin: 16px 0 0; text-align: center; font-size: 13px; } .gtl form + p.text-center a, .gtl form + p.mt-3 a { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--ink-2) !important; } /* The brand colour straight from the setting reads 1.48:1 on white here; the accent is the same colour darkened until it can be read. The rule has to shout because the span carries the raw colour inline. */ .gtl .gtl-formwrap a span[style], .gtl .gtl-formwrap p a span, .gtl .gtl-alt a span { font-weight: 600; color: var(--accent) !important; } /* Bootstrap's own muted text is 4.48:1 on white, just under the 4.5 a label needs. */ .gtl .form-group > label.text-secondary, .gtl .form-group .text-secondary { color: var(--ink-2) !important; } .gtl-alt { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--ink-2); } .gtl-alt a { font-weight: 600; } .gtl-alt a:hover { text-decoration: underline; } .gtl-legal { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.55; color: var(--ink-3); text-align: center; } /* An underline drawn as a border sits at the bottom of the box, and the rule below inflates that box to 32px on a phone - so the line detached from the words and floated under the sentence. text-decoration follows the text wherever the box goes. */ .gtl-legal a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; } /* Standalone links are controls, and a control on a phone needs a target worth aiming at. A link inside a sentence is exempt and keeps its size. */ @media (max-width: 767px) { .gtl-legal a, .gtl .forget-pass, .gtl .gtl-alt a { display: inline-block; padding-block: 7px; min-height: 32px; } } /* #777 reads 4.48:1 on white, just under the 4.5 it needs. */ .gtl .forget-pass, .gtl a.forget-pass { color: var(--ink-2) !important; } /* OTP steps in the registration flow */ .gtl .otp-block { width: 44px !important; height: 52px !important; margin: 0 3px !important; padding: 0 !important; text-align: center; font: 600 20px var(--f-mono) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius) !important; background: var(--bg) !important; color: var(--ink) !important; } .gtl .otp-block:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-tint) !important; outline: none; } .gtl .dropify-wrapper { border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); } .gtl .radio-inline { margin-inline-end: 14px; font-size: 13.5px; color: var(--ink-2); } .gtl .bootstrap-select > .dropdown-toggle { min-height: 46px; border: 1px solid var(--line-strong) !important; border-radius: var(--radius) !important; background: var(--bg) !important; color: var(--ink) !important; } /* The registration pane is a long multi-step form; it gets the width it needs. */ .gtl-formwrap--wide { max-width: 560px; } /* No card behind the fields. The pane's own markup wraps them in a row the old page painted as a grey panel; here the fields are the object and the ground stays the page's. */ .gtl .tab-pane .row[style*="F9F9F9"], .gtl .tab-pane > .col-md-12 > .row { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } /* Which pane shows. Bootstrap's own stylesheet does this, and the page loads it from a CDN. A stylesheet that does not arrive should cost the page its looks, not leave both forms stacked on top of each other with the hidden one's fields still clickable - so the rule is repeated here, where it ships with the page. Bootstrap adds `.active` before `.show` during its transition, and `.fade.active` is deliberately not matched, so this does not fight the animation. `!important` is needed, and is not laziness: the registration pane carries `display: block` in a style attribute, so every stylesheet loses to it. That is why the hidden form used to sit under the visible one at `opacity: 0` - taking up space, and with its fields still reachable by Tab and by a click. */ .gtl .tab-content > .tab-pane:not(.active) { display: none !important; } .gtl .tab-pane.fade:not(.active):not(.show) { display: none !important; } /* Grid leftovers inside the panes. These forms were built for a two-column page and still carry its width classes; in this single column they must all be full width, or the card lands at half the space it has. */ .gtl .tab-pane.col-md-6, .gtl .tab-pane[class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; float: none; } .gtl .w-lg-75, .gtl .w-xl-50 { width: 100% !important; } .gtl .login-frm, .gtl .reg-frm, .gtl form { max-width: 100%; } .gtl .tab-pane > .col-md-12, .gtl .tab-pane .row, .gtl .tab-pane center, .gtl .tab-pane .m-auto { width: 100%; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none; background: transparent !important; text-align: start; } .gtl .tab-pane .col-md-6, .gtl .tab-pane .col-sm-6, .gtl .tab-pane .col-md-4, .gtl .tab-pane .col-sm-4, .gtl .tab-pane .col-md-8 { width: 100%; max-width: 100%; flex: 0 0 100%; padding: 0; } .gtl .reg-cta, .gtl .cta-list, .gtl .tj-banner-form, .gtl .banner-caption { display: none !important; } /* Once the island has mounted, the original list is the island's source, not a second control. Until then it is the control, and it looks the same. */ /* The Bootstrap list is the fallback and stays in the document so the forwarded click reaches Bootstrap's delegated handler. The island adds this class once it has mounted; until then the list is what shows. It is hidden rather than removed, and kept out of the tab order. */ .gtl .nav-tabs.gtl-tabs-source--upgraded { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Footer */ .gtl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 13px 24px; border-top: 1px solid var(--line); background: var(--surface); font-size: 11.5px; color: var(--ink-3); } .gtl-foot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-left: auto; } .gtl-foot a { color: var(--ink-2); } .gtl-foot a:hover { color: var(--accent); } .gtl-foot .cr b { color: var(--accent); font-weight: 600; } /* One column below 880px, with the form first. */ /* The split collapses here. The column count is set in a media query, not the container query below: `.gtl-main` is itself the container, and a container query styles a container's descendants, never the container. Setting the columns in there was a no-op, and the two columns stayed side by side on a phone, each about 200px wide. */ @media (max-width: 880px) { .gtl-main { grid-template-columns: 1fr; } } @container (max-width: 880px) { .gtl-panel { padding: 32px 26px; gap: 20px; order: 2; } .gtl-panel h2 { font-size: 24px; max-width: 20ch; } .gtl-feats { display: none; } .gtl-formcol { padding: 32px 26px; order: 1; } } /* Between a phone and a wide desktop the bar has more links than room. The nav scrolls rather than pushing the page sideways, and the phone number - which the footer also carries - is the first thing to go. */ @media (max-width: 1100px) { .gtl-call { display: none; } } @media (max-width: 880px) { .gtl-nav, .gtl-call { display: none; } .gtl-top { padding: 0 18px; height: 56px; } .gtl-foot { padding: 14px 18px; } .gtl-foot nav { margin-left: 0; width: 100%; } .gtl-foot a { min-height: 44px; display: inline-flex; align-items: center; } } /* ------------------------------------------------------------------ */ /* Register: the phone -> OTP -> details flow */ /* */ /* Its markup predates this design. Each of the three steps carries its */ /* own inline grey panel, so the pane rendered as a grey card inside a */ /* grey card, and each opens with a centred

sized like a page / / title. The ids, names and classes are the contract the flow's own / / JavaScript reads, so none of them are touched here - an inline style / / loses to a stylesheet !important, which is all this needs. / / ------------------------------------------------------------------ / .gtl #register, .gtl #register #phone-tab, .gtl #register #otp-tab, .gtl #register #registerForm { background-color: transparent !important; border-radius: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } / The step's name, not a page title. / .gtl #register h3 { margin: 0 0 14px !important; text-align: start !important; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); } / The details step is a form laid out in floated Bootstrap columns inside a , with each field's icon as a sibling of the input rather than inside it. The floats and the icon's own absolute position are what put the little person glyph on top of the words. One grid, no floats, no column gutters, and the icon placed against the field it belongs to. / .gtl #register center { text-align: start; } .gtl #register #login > .tab-pane { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: start; } @media (min-width: 560px) { .gtl #register #login > .tab-pane { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gtl #register #login > .tab-pane > .col-md-12, .gtl #register #login > .tab-pane > .col-md-10 { grid-column: 1 / -1; } } .gtl #register [class="col-md-"] { position: relative; float: none !important; width: auto !important; max-width: none; padding-inline: 0 !important; margin: 0 !important; } /* Empty columns are spacers the float layout needed; a grid does not. / .gtl #register #login > .tab-pane > [class="col-md-"]:empty { display: none; } .gtl #register #login > .tab-pane > br { display: none; } /* The icon sits at the start of its field, and the field makes room for it. / .gtl #register [class="col-md-"] > span[class="fa-"], .gtl #register [class="col-md-"] > i[class="fa-"]:not(.arrow-left) { position: absolute; inset-inline-start: 15px; top: 0; height: 50px; width: 16px; display: grid; place-items: center; margin: 0 !important; color: var(--ink-3); font-size: 15px; line-height: 1; pointer-events: none; z-index: 2; } .gtl #register [class="col-md-"]:has(> span[class="fa-"]) .form-control { padding-inline-start: 42px !important; } / One field in the step carries no icon. Left flush it broke the straight edge every other value in the column reads down. / .gtl #register input[type="text"].form-control, .gtl #register input[type="email"].form-control, .gtl #register input[type="password"].form-control, .gtl #register input[type="date"].form-control { padding-inline-start: 42px !important; } / Room for the eye at the end of the two password fields. / .gtl #register #show_hide_password .form-control, .gtl #register #show_hide_password2 .form-control { padding-inline-end: 46px !important; } / The fields here never sat in a .field-holder, so they kept the pill shape the landing stylesheet gives every .form-control. Same field as the login side now. / .gtl #register .form-control { width: 100%; height: auto !important; min-height: 48px; padding: 13px 14px !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius) !important; background: var(--bg) !important; color: var(--ink) !important; font-size: 15px !important; box-shadow: none !important; } .gtl #register .form-control:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-tint) !important; outline: none; } / The phone step carries intl-tel-input, which puts its country button over the start of the field; the inline padding-left:48px on the input is what reserves the room for it. / .gtl #register .intl-tel-input { display: block; width: 100%; } .gtl #register .intl-tel-input .flag-container { z-index: 3; } .gtl #register .intl-tel-input .selected-flag { height: 100%; padding-inline-start: 12px; } / The two validation lines under the field. They are empty until the flow writes into them, and an empty
with a margin still pushed the button down by a line and a half. / .gtl #register .phone-error:empty, .gtl #register .phone-valid:empty, .gtl #register .otp-error:empty, .gtl #register .location-disabled-error:empty { display: none; } .gtl #register .phone-error, .gtl #register .phone-valid, .gtl #register .otp-error { margin: 8px 0 0; font-size: 12.5px; } / Verify, resend and confirm are the step's action. / .gtl #register .btn-new { width: 100%; margin-top: 16px; min-height: 48px; } .gtl #register .otp-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .gtl #register .otp-block { margin: 0 !important; } / The back arrow each later step opens with. / .gtl #register .arrow-left { display: inline-grid; place-content: center; width: 36px; height: 36px; margin-bottom: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink-2); cursor: pointer; } @media (max-width: 400px) { / Six 44px boxes plus their gaps do not fit across a 320px phone. / .gtl .otp-block { width: 40px !important; height: 48px !important; font-size: 18px !important; } .gtl #register .otp-container { gap: 6px; } } / The password fields wrap their input, and the shared rule above already places the eye against it - it only needs a containing block to be placed against. Setting `top` here as well would fight the translateY(-50%) that rule centres with, and lift the eye clear of its own field. / .gtl #register #show_hide_password, .gtl #register #show_hide_password2 { position: relative; } / The picture upload. Dropify replaces the input with its own block; before it loads, and if it never does, the bare file input still has to look like part of the form. / .gtl #register .dropify-wrapper, .gtl #register input[type="file"] { width: 100% !important; border: 1px dashed var(--line-strong) !important; border-radius: var(--radius) !important; background: var(--bg-2, #f7f7f8) !important; } .gtl #register .dropify-wrapper { height: 160px !important; } .gtl #register input[type="file"] { min-height: 48px; padding: 13px 14px !important; font-size: 13px; } / Gender and gender-preference are radio groups. A 13px dot with a label floated beside it is not something a thumb can aim at; each option is a row of its own that the whole width answers to. / .gtl #register .gender > label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); } .gtl #register .gender > label strong { font-weight: 700; } .gtl #register .form-check { display: flex; align-items: center; gap: 10px; float: none !important; width: auto !important; max-width: none; min-height: 44px; margin: 0 !important; padding: 0 12px !important; border: 1px solid var(--line) !important; border-radius: var(--radius); cursor: pointer; } .gtl #register .form-check:has(input:checked) { border-color: var(--brand) !important; background: var(--brand-tint); } .gtl #register .form-check-input { position: static !important; margin: 0 !important; width: 18px; height: 18px; accent-color: var(--brand); flex: 0 0 auto; } .gtl #register .form-check-label { margin: 0; font-size: 14px; color: var(--ink); cursor: pointer; } .gtl #register .gender { display: grid; gap: 8px; } @media (min-width: 420px) { .gtl #register .gender { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gtl #register .gender > label { grid-column: 1 / -1; } .gtl #register .gender > br, .gtl #register .gender > span[id$="-error"] { grid-column: 1 / -1; } } / The Reka Select's shape lives in gotaxi-site.css, which every page that can carry one already loads. What stays here is the two things only these pages need. The page's own field-icon rule is `.login-frm .col-md-6 span:not(.caret, .bs-caret, .text) { position: absolute }` - written to place the little glyph at the start of each field, with bootstrap-select's three spans exempted by name. It caught the Reka value span too, lifting it out of the button and leaving the caret standing alone above the field. Same exemption, made where this component lives rather than in their rule. And both auth pages zero a button's border and set their own padding, so the trigger has no shape at all unless it insists. */ .gtl .gt-nsel span, .gtl .gt-nsel-value, .gtl .gt-nsel-menu span { position: static !important; top: auto !important; inset-inline-start: auto !important; left: auto !important; color: inherit !important; } .gtl .gt-nsel { padding: 0 14px !important; border: 1px solid var(--line-strong) !important; border-radius: var(--radius) !important; background: var(--bg) !important; color: var(--ink) !important; box-shadow: none !important; } .gtl .gt-nsel:hover { border-color: var(--ink-3) !important; } .gtl .gt-nsel[data-state="open"], .gtl .gt-nsel:focus-visible { border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-tint) !important; outline: none; }