#sp-login-gate-modal *{box-sizing:border-box} #sp-login-gate-modal, #sp-login-gate-modal{margin:0;height:100%} #sp-login-gate-modal .sp-login-gate-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:22px} @media (min-width:900px){#sp-login-gate-modal .sp-login-gate-modal{padding:14px}} #sp-login-gate-modal .sp-login-gate-overlay{position:absolute;inset:0;background:var(--g-overlay)} #sp-login-gate-modal .sp-login-gate-container{position:relative;z-index:1;width:100%;max-width:470px;max-height:100%;overflow-y:auto;background:var(--g-sheet)} #sp-login-gate-modal .sp-login-gate-scrollable{display:flex;flex-direction:column} /* Skins decorate this panel with absolutely positioned glows and arcs. Without a positioning context of its own they resolve against the card, so Petrol's radial glow covered the entire modal and swallowed every click — the tabs included. Contain them here, and make sure decoration can never take a click. */ #sp-login-gate-modal .sp-gate-brandpanel{display:none;position:relative} #sp-login-gate-modal .sp-gate-brandpanel::before, #sp-login-gate-modal .sp-gate-brandpanel::after{pointer-events:none} #sp-login-gate-modal .sp-gate-formside{position:relative;z-index:2} #sp-login-gate-modal .sp-login-gate-header{display:flex;flex-direction:column} #sp-login-gate-modal .sp-login-gate-tabs{display:flex} #sp-login-gate-modal .sp-login-gate-tab{flex:1;appearance:none;border:0;background:transparent;cursor:pointer;text-align:center;font-family:inherit} #sp-login-gate-modal .sp-login-gate-tab:focus-visible, #sp-login-gate-modal .sp-social-btn:focus-visible, #sp-login-gate-modal .sp-login-gate-button:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px} #sp-login-gate-modal .sp-login-gate-content{display:none} #sp-login-gate-modal .sp-login-gate-content.active{display:block} #sp-login-gate-modal .sp-social-buttons{display:flex;flex-direction:column;gap:9px} /* Two providers side by side once there is room. Our own Google button fits half a column; Google's rendered one never did. */ @media (min-width:560px){#sp-login-gate-modal .sp-social-buttons{flex-direction:row}} #sp-login-gate-modal .sp-social-btn-wrap{flex:1 1 0;min-width:0} #sp-login-gate-modal .sp-social-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;cursor:pointer;font-family:inherit} #sp-login-gate-modal .sp-social-separator{position:relative;text-align:center} /* Only Aurora labels the rule. */ #sp-login-gate-modal .sp-social-separator span{display:none} #sp-login-gate-modal .sp-field-row{display:flex;gap:11px} #sp-login-gate-modal .sp-field-row .sp-field{flex:1 1 0;min-width:0} #sp-login-gate-modal .sp-field{position:relative;display:flex;flex-direction:column} #sp-login-gate-modal .sp-login-gate-form input, #sp-login-gate-modal .sp-login-gate-form select{width:100%;font-family:inherit} #sp-login-gate-modal .sp-login-gate-form select{appearance:none;-webkit-appearance:none} /* The wrapper held the input on a text line, so its line-height added 14px below it: the field measured 64px around a 50px input and the centred floating label sat low. In a field row that also stretched the field beside it — which is why Email Address dropped along with Password. */ #sp-login-gate-modal .sp-password-wrapper{position:relative;display:flex;margin:0} #sp-login-gate-modal .sp-password-toggle{position:absolute;top:50%;transform:translateY(-50%);display:flex;cursor:pointer} #sp-login-gate-modal .sp-login-gate-checkbox-wrapper{display:flex;align-items:flex-start} #sp-login-gate-modal .sp-login-gate-checkbox-wrapper input{align-self:flex-start} #sp-login-gate-modal .sp-login-gate-remember{display:flex;align-items:center;gap:9px;margin:2px 0 4px} #sp-login-gate-modal .sp-login-gate-remember input{flex:none;width:17px;height:17px;margin:0;accent-color:var(--g-accent)} #sp-login-gate-modal .sp-login-gate-remember label{font-size:13.5px;line-height:1.4;color:var(--g-ink)} #sp-login-gate-modal .sp-gate-forgot{text-align:center;margin:14px 0 0}/* Attribution is tamper-guarded in the plugin: rendered server-side and re-injected by a MutationObserver. A skin may colour it; it may not hide it. */ #sp-login-gate-modal .sp-gate-attribution{display:block!important;visibility:visible!important;opacity:1!important; text-align:center;margin:10px 0 0;font-size:11px} #sp-login-gate-modal .sp-gate-attribution a{text-decoration:underline;color:inherit} /* No skin set this, so the link fell back to the browser's blue — fine on a white form, all but invisible on Petrol's near-black one. --g-navy where a skin has one (Heritage), its accent otherwise. */ #sp-login-gate-modal .sp-gate-forgot a, #sp-login-gate-modal .sp-login-gate-links a{font-size:13.5px;text-decoration:none; color:var(--g-link,var(--g-navy,var(--g-accent,currentColor))) !important} #sp-login-gate-modal .sp-gate-forgot a:hover, #sp-login-gate-modal .sp-login-gate-links a:hover{text-decoration:underline} #sp-login-gate-modal .sp-login-gate-checkbox-wrapper input{flex:none} #sp-login-gate-modal .sp-login-gate-button{display:block;width:100%;border:0;cursor:pointer;font-family:inherit} #sp-login-gate-modal .sp-gate-panelstack{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%} #sp-login-gate-modal .sp-gate-mark{display:flex;align-items:center;justify-content:center;gap:16px} #sp-login-gate-modal .sp-gate-mark.is-pair .sp-gate-logo{width:auto;max-width:48%;max-height:96px;object-fit:contain}/* a customer ships one logo file; on a dark panel it needs a light plate to read */ html[data-theme="dark"] #sp-login-gate-modal .sp-gate-mark{background:#F7F7F9;padding:16px 18px;border-radius:14px} html[data-theme="dark"] #sp-login-gate-modal .sp-gate-logo-inline{height:52px;padding:8px 12px;background:#F7F7F9;border-radius:10px} #sp-login-gate-modal .sp-gate-logo{display:block;width:100%;height:auto} #sp-login-gate-modal .sp-gate-trust{display:none;list-style:none;margin:0;padding:0} @media (min-width:900px){ #sp-login-gate-modal .sp-gate-trust{display:flex;flex-direction:column;gap:8px;margin:22px 0 0;align-self:center;text-align:left; font-size:14px;font-weight:600;color:var(--g-trust,var(--g-ink))} #sp-login-gate-modal .sp-gate-trust li{display:flex;align-items:center;gap:9px} #sp-login-gate-modal .sp-gate-trust li::before{content:"\2713";font-weight:700;color:var(--g-trust-mark,var(--g-trust,currentColor))} }/* Logging in is a task, not a pitch: drop the blurb and tighten the rhythm so every option is reachable without scrolling. */ html[data-tab="login"] #sp-login-gate-modal .sp-login-gate-message{display:none} html[data-tab="login"] #sp-login-gate-modal .sp-social-separator{margin-top:16px;margin-bottom:16px} html[data-tab="login"] #sp-login-gate-modal .sp-field{margin-bottom:10px} /* :not([type="checkbox"]) matters — without it the age attestation checkbox is stretched to 46px, which drags its box to about 95px and leaves the checkbox floating below its own label. The desktop block guards this; the login block did not, which is why only the Log In tab showed it. */ html[data-tab="login"] #sp-login-gate-modal .sp-login-gate-form input:not([type="checkbox"]), html[data-tab="login"] #sp-login-gate-modal .sp-login-gate-form select{height:46px} html[data-tab="login"] #sp-login-gate-modal .sp-login-gate-button{height:48px} html[data-tab="login"] #sp-login-gate-modal .sp-social-btn{min-height:44px} html[data-tab="login"] #sp-login-gate-modal .sp-login-gate-title{margin-bottom:0} html[data-tab="login"] #sp-login-gate-modal .sp-login-gate-header{padding-bottom:0} html[data-tab="login"] #sp-login-gate-modal .sp-login-gate-tabs{margin-bottom:16px} html[data-tab="login"] #sp-login-gate-modal .sp-login-gate-remember{margin:0 0 2px} html[data-tab="login"] #sp-login-gate-modal .sp-login-gate-custom-message-bottom{margin-top:10px} html[data-tab="login"] #sp-login-gate-modal .sp-gate-forgot{margin-top:8px} @media (min-width:900px){html[data-tab="login"] #sp-login-gate-modal .sp-login-gate-header{padding-top:26px} html[data-tab="login"] #sp-login-gate-modal .sp-gate-formside{padding-bottom:24px}} #sp-login-gate-modal .sp-gate-trust li{margin:0} #sp-login-gate-modal .sp-gate-kicker{display:inline-flex;align-items:center;gap:8px} #sp-login-gate-modal .sp-gate-logo-inline{display:block;flex:none;align-self:center;height:41px;width:auto;object-fit:contain;margin-bottom:14px} @media (max-width:600px){ #sp-login-gate-modal .sp-login-gate-modal{padding:0;align-items:stretch} #sp-login-gate-modal .sp-login-gate-container{max-width:none;height:100%;border-radius:0!important;box-shadow:none!important} } @media (min-width:900px){ #sp-login-gate-modal .sp-gate-logo-inline{display:none}/* brand panel holds still; only the form column scrolls */ #sp-login-gate-modal .sp-login-gate-container{display:flex;flex-direction:column;max-width:920px;max-height:100%;overflow:hidden}/* Two columns, two rows. A skin decides which column the header sits in: the default puts it above the form (Heritage, Meridian, Saline, Petrol); Aurora puts it under the logo in the brand column, as DA's own gate does. */ #sp-login-gate-modal .sp-login-gate-scrollable{flex:1 1 auto;min-height:0;display:grid; grid-template-columns:352px 1fr;grid-template-rows:auto minmax(0,1fr)}/* The panel is painted once, by a layer spanning both rows: two separately painted rows cannot share a gradient without a visible seam. */ #sp-login-gate-modal .sp-login-gate-scrollable::before{content:"";grid-column:1;grid-row:1 / span 2;background:var(--g-panelbg);z-index:0} #sp-login-gate-modal .sp-login-gate-header{grid-column:1;grid-row:1;z-index:1;align-items:flex-start;justify-content:flex-start; padding:32px 30px 0} #sp-login-gate-modal .sp-gate-brandpanel{display:flex;grid-column:1;grid-row:2;align-items:center;justify-content:center; background:none;z-index:1;padding:18px 30px 30px} #sp-login-gate-modal .sp-gate-formside{grid-column:2;grid-row:1 / span 2;min-width:0;overflow-y:auto; padding:18px var(--g-pad-x,34px) 16px} #sp-login-gate-modal .sp-login-gate-title, #sp-login-gate-modal .sp-login-gate-message{text-align:left}/* Desktop rhythm: every control keeps its skin's shape, only the air between them is reduced, so the whole form is reachable without scrolling. */ #sp-login-gate-modal .sp-login-gate-tabs{margin-bottom:11px!important} #sp-login-gate-modal .sp-social-btn{min-height:var(--g-provider-h,42px)!important} #sp-login-gate-modal .sp-apple-relay-warn{margin-top:6px!important} #sp-login-gate-modal .sp-social-separator{margin:11px 0!important} #sp-login-gate-modal .sp-field{margin-bottom:8px!important} #sp-login-gate-modal .sp-field > label{margin-bottom:2px;font-size:12px;line-height:1.25} #sp-login-gate-modal .sp-login-gate-form input:not([type="checkbox"]), #sp-login-gate-modal .sp-login-gate-form select{height:44px!important} #sp-login-gate-modal .sp-login-gate-checkbox-wrapper{margin-bottom:7px!important;padding:8px 11px!important} #sp-login-gate-modal .sp-login-gate-checkbox-wrapper label{line-height:1.35!important;font-size:13px!important} #sp-login-gate-modal .sp-login-gate-button{height:46px!important;padding:0!important;margin-top:5px!important} #sp-login-gate-modal .sp-login-gate-custom-message-bottom{margin-top:10px!important;font-size:12px!important} #sp-login-gate-modal .sp-gate-attribution{margin-top:6px} } /* A theme's own input margin lands INSIDE .sp-field (a flex column), so the field measures taller than its input and a 50%-centred label sits low. */ #sp-login-gate-modal .sp-login-gate-form input, #sp-login-gate-modal .sp-login-gate-form select{margin:0} /* Chrome repaints an autofilled field in its own yellow with black text. Hold the skin. */ #sp-login-gate-modal .sp-login-gate-form input:-webkit-autofill, #sp-login-gate-modal .sp-login-gate-form input:-webkit-autofill:hover, #sp-login-gate-modal .sp-login-gate-form input:-webkit-autofill:focus{ -webkit-box-shadow:inset 0 0 0 100px var(--g-field-bg) !important; -webkit-text-fill-color:var(--g-title) !important;caret-color:var(--g-title)} /* Google renders its own button at whatever width it was handed; this is the only thing stopping an oversized one from running over Apple. */ #sp-login-gate-modal .sp-social-btn-wrap{max-width:100%;min-width:0} #sp-login-gate-modal .sp-social-btn-wrap > div{max-width:100%} #sp-login-gate-modal .sp-social-btn-wrap iframe{max-width:100% !important} /* Google's own button is laid invisibly over ours at full size, so the click still lands on Google's control while every pixel on screen is ours. Its iframe is stretched to cover the whole button: it is never seen, so how it looks inside does not matter — only that the hit area matches. */ #sp-login-gate-modal .sp-social-btn-wrap-google{position:relative} #sp-login-gate-modal .sp-google-overlay{position:absolute;left:0;right:0;top:0;height:var(--g-provider-h,46px);z-index:3;opacity:0;overflow:hidden} #sp-login-gate-modal .sp-google-overlay > div, #sp-login-gate-modal .sp-google-overlay iframe{width:100% !important;height:100% !important; min-width:100% !important;max-width:none !important;margin:0 !important;position:static !important} /* Until Google answers there is nothing to click, so our button stays hidden. */ #sp-login-gate-modal .sp-social-btn-wrap-google .sp-google-btn{visibility:hidden} #sp-login-gate-modal .sp-social-btn-wrap-google.is-ready .sp-google-btn{visibility:visible} #sp-login-gate-modal .sp-google-btn svg{flex:none} /* A full RUO attestation runs to a long paragraph. It scrolls inside its box rather than pushing the submit button off the screen. */ /* Only the RUO attestation runs long enough to need capping. Applying it to every attestation label made the short 21+ box reserve the full height in Safari, which left the checkbox floating below its own text. Scoped to the one that needs it, by the checkbox it belongs to. */ #sp-login-gate-modal .sp-login-gate-checkbox-wrapper label{max-height:none;overflow:visible} #sp-login-gate-modal .sp-login-gate-checkbox-wrapper:has(#ruo_agreed) label, #sp-login-gate-modal .sp-login-gate-checkbox-wrapper:has(#sp-ruo-terms-accept) label{ max-height:5.6em;overflow-y:auto; overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-right:8px;scrollbar-width:thin} /* and the box lines its checkbox up with the first line of its text */ #sp-login-gate-modal .sp-login-gate-checkbox-wrapper{align-items:flex-start} #sp-login-gate-modal .sp-login-gate-checkbox-wrapper:has(#ruo_agreed) label::-webkit-scrollbar{width:4px} #sp-login-gate-modal .sp-login-gate-checkbox-wrapper:has(#ruo_agreed) label::-webkit-scrollbar-thumb{ background:var(--g-field-bd2);border-radius:4px} /* On the Log In tab the separator sits above the providers, leaving the row flush against the first field. */ html[data-tab="login"] #sp-login-gate-modal .sp-social-buttons{margin-bottom:14px} /* The providers are inert until this tab's attestations are ticked. The lock sits above Google's own overlay, so the chooser cannot open first and leave the attestation to be collected afterwards. */ #sp-login-gate-modal .sp-social-buttons{position:relative} #sp-login-gate-modal .sp-social-lock{display:none;position:absolute;left:0;right:0;top:0;height:var(--g-provider-h,46px);z-index:5; width:100%;padding:0;border:0;background:transparent;cursor:not-allowed} #sp-login-gate-modal .sp-social-gated .sp-social-lock{display:block} /* The disabled look goes on the buttons, not their wrappers: login-gate-modal.css pins #sp-apple-*-wrap to opacity:1 !important so a theme cannot hide the Apple button, which left Apple the one bright control in a greyed-out row. */ #sp-login-gate-modal .sp-social-btn, #sp-login-gate-modal .sp-apple-signin-btn{transition:opacity .18s ease,filter .18s ease, background-color .18s ease,color .18s ease,box-shadow .18s ease} #sp-login-gate-modal .sp-social-gated .sp-social-btn, #sp-login-gate-modal .sp-social-gated .sp-apple-signin-btn{opacity:.55 !important;filter:grayscale(1) !important; background:color-mix(in srgb, var(--g-sheet,#FFFFFF) 93%, var(--g-ink,#3E455C)) !important; color:var(--g-dim,#6C7389) !important; box-shadow:inset 0 2px 3px rgba(13,17,38,.13) !important;cursor:not-allowed} /* The plugin pins the Apple glyph to pure black, which disappears on a dark skin. Follow the button's own text colour instead: black on a white button, light on Petrol's near-black one. */ #sp-login-gate-modal .sp-apple-signin-btn svg{color:currentColor !important} /* ...and in the disabled state it follows the dimmed text with everything else. */ #sp-login-gate-modal .sp-social-gated .sp-apple-signin-btn svg{color:var(--g-dim,#6C7389) !important} #sp-login-gate-modal .sp-attest-flash{animation:sp-attest-flash 1.1s ease} @keyframes sp-attest-flash{0%,100%{box-shadow:none} 18%,62%{box-shadow:0 0 0 3px color-mix(in srgb, var(--g-accent,#D32F2D) 42%, transparent)}} @media (prefers-reduced-motion:reduce){#sp-login-gate-modal .sp-attest-flash{animation:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--g-accent,#D32F2D) 42%, transparent)}} /* Tab change: the card travels between the two panel heights while the incoming panel fades up, instead of the whole thing jumping. */ #sp-login-gate-modal .sp-login-gate-container.sp-card-resizing{transition:height .26s cubic-bezier(.4,0,.2,1);overflow:hidden} #sp-login-gate-modal .sp-login-gate-content.sp-tab-enter{animation:sp-tab-in .26s cubic-bezier(.4,0,.2,1) both} @keyframes sp-tab-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ #sp-login-gate-modal .sp-login-gate-content.sp-tab-enter{animation:none} #sp-login-gate-modal .sp-login-gate-container.sp-card-resizing{transition:none} } /* One line, never two. At 12px the sentence measures 245px against a 235px column; 11px measures 224px and clears it. */ #sp-login-gate-modal .sp-apple-relay-warn{font-size:11px !important;white-space:nowrap; overflow:visible;line-height:1.4 !important} /* A panel surface sits behind everything in the brand column. Cover-cropping is safe here because it is a texture with no focal point — unlike a logo, which is why the logo stays a separate asset placed on top at its own size. */ @media (min-width:900px){ #sp-login-gate-modal.sp-gate-textured .sp-login-gate-scrollable::before{ background-image:var(--g-panel-tex);background-size:cover;background-position:center center; background-repeat:no-repeat} /* The panel's right edge casting onto the form side, so the panel reads as a physical surface lying on the card rather than a painted-on colour. Drawn inside the form column: the panel layer sits below it and would be covered. Width and strength come from the settings page. */ #sp-login-gate-modal.sp-gate-panelshadow .sp-gate-formside::before{content:""; position:absolute;left:0;top:0;bottom:0;z-index:3;pointer-events:none; width:var(--g-panel-shadow-w,20px); background:linear-gradient(to right, rgba(13,17,38,var(--g-panel-shadow-a,.16)) 0%, rgba(13,17,38,calc(var(--g-panel-shadow-a,.16) * .44)) 35%, rgba(13,17,38,calc(var(--g-panel-shadow-a,.16) * .12)) 65%, transparent 100%)} } /* The template prints this one with an inline font-size:14px, which is heavy for a block of legal copy sitting above the tabs. A skin may size it down; legacy never loads this file, so its look is unchanged. */ #sp-login-gate-modal .sp-login-gate-custom-message{font-size:12.5px !important;line-height:1.5 !important; margin:-4px 0 14px !important} /* The login tab's rhythm is deliberately tight, but the age attestation ends up touching the remember-me row — two different controls reading as one block. */ #sp-login-gate-modal .sp-login-gate-remember + .sp-login-gate-checkbox-wrapper{margin-top:12px} /* --------------------------------------------------------------------------- Stage 1 — the RUO age gate. It is a separate modal from the login wall, and its markup carries its colours as inline styles: navy #002868 headings and button, red #BF0A30 accents, slate greys. Inline styles outrank a stylesheet, so every rule here has to answer in kind. The alternative — stripping the inline styles out of the markup — would change the stock look for every unskinned install, and this file only loads when a skin is active, so legacy Stage 1 stays exactly as it is. Only sites running both stages ever see this. --------------------------- */ #sp-ruo-stage1-overlay{background:var(--g-overlay) !important} #sp-ruo-stage1-overlay #sp-ruo-stage1-modal{background:var(--g-sheet) !important; border-radius:18px !important;overflow:hidden} /* the navy-to-red rule across the top */ #sp-ruo-stage1-overlay #sp-ruo-stage1-modal > div:first-child{ background:linear-gradient(135deg, var(--g-accent), var(--g-accent-dk)) !important} #sp-ruo-stage1-overlay .sp-ruo-gate-content{color:var(--g-ink) !important} #sp-ruo-stage1-overlay #sp-ruo-gate-heading{color:var(--g-title,var(--g-ink)) !important} #sp-ruo-stage1-overlay .sp-ruo-gate-content > p{color:var(--g-muted) !important} #sp-ruo-stage1-overlay .sp-ruo-gate-section h3{color:var(--g-title,var(--g-ink)) !important} #sp-ruo-stage1-overlay .sp-ruo-gate-section label, #sp-ruo-stage1-overlay .sp-ruo-gate-section span{color:var(--g-ink) !important} #sp-ruo-stage1-overlay .sp-ruo-gate-section input[type="checkbox"]{accent-color:var(--g-accent)} #sp-ruo-stage1-overlay .sp-ruo-agreement-box{background:var(--g-field-bg) !important; border-color:var(--g-line) !important;border-left-color:var(--g-accent) !important; color:var(--g-ink) !important} #sp-ruo-stage1-overlay .sp-ruo-agreement-box p{color:var(--g-ink) !important} #sp-ruo-stage1-overlay input[type="text"], #sp-ruo-stage1-overlay input[type="email"]{background:var(--g-field-bg) !important; border-color:var(--g-field-bd) !important;color:var(--g-ink) !important} #sp-ruo-stage1-overlay #sp-ruo-gate-submit{background:var(--g-accent) !important; color:var(--g-btn-fg,#fff) !important;border-radius:999px !important;font-weight:600 !important} #sp-ruo-stage1-overlay #sp-ruo-gate-submit:hover{background:var(--g-accent-dk) !important} #sp-ruo-stage1-overlay #sp-ruo-gate-error, #sp-ruo-stage1-overlay #sp-ruo-birthday-error{color:var(--g-accent) !important} #sp-ruo-stage1-overlay .sp-gate-attribution{color:var(--g-dim) !important} #sp-ruo-stage1-overlay .sp-gate-attribution a{color:var(--g-dim) !important}