/* Cookie consent banner. Plan: tasks/tiktok-pixel-plan.md * * Its own file, linked by _cookie_consent.php itself, deliberately. * * The banner renders on every page, but the site does not share one stylesheet: * the authenticated app loads propera_style_new.css while the eleven public * marketing pages load propera_landing.css. Styles placed in either one leave the * banner unstyled on the other half of the site, which is exactly what happened on * the first attempt. Shipping the CSS with the component removes the question. * * COLOURS COME FROM VARIABLES, NEVER LITERALS. Those same two stylesheets also name * the palette differently: the app sets --tenant-primary / --tenant-secondary / * --tenant-gradient from tenant BRANDING config, while the landing pages declare * --primary / --secondary / --gradient in their own :root. Hence the fallback * chain on every colour: tenant value, then landing value, then the Propera * default. Hard-coding hex here would look right on Propera and wrong on every * white-label tenant, which is the whole point of the tenant variables. * * Loaded from the end of . Safe there because the banner carries the [hidden] * attribute until its script decides to show it, so there is no unstyled flash. */ .cookie-consent { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; background: var(--tenant-secondary, var(--secondary, #0F2C46)); color: #ffffff; padding: 16px; box-shadow: 0 -4px 16px rgba(15, 44, 70, 0.25); font-family: 'Source Sans 3', sans-serif; } .cookie-consent[hidden] { display: none; } .cookie-consent-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .cookie-consent-text { margin: 0; /* min-width:0 alongside flex-wrap, or this paragraph refuses to shrink and pushes the buttons off the side of a narrow phone. */ min-width: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; color: #ffffff; } .cookie-consent-text a { color: var(--tenant-primary, var(--primary, #1FC4B0)); text-decoration: underline; } .cookie-consent-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* Matches .btn in propera_landing.css: 8px radius, 600 weight, 14px. * * Several properties below are reset rather than chosen. propera_style_new.css, * which every authenticated page loads, styles the bare `button` element with * `width: 100%`, `letter-spacing: 1px` and a box-shadow. This selector outranks it * on anything it declares, but an undeclared property just inherits, so leaving * `width` out made both buttons span the banner and stack on the create-account * page while looking correct on the marketing pages. Declare anything the global * rule touches, even where the value is the browser default. */ .cookie-consent-actions button { /* 44px minimum tap target. A consent button that is hard to hit reads as a dark pattern whether or not it was meant as one. */ min-height: 44px; width: auto; display: inline-block; padding: 12px 28px; border-radius: 8px; border: 2px solid transparent; font-size: 14px; font-weight: 600; font-family: inherit; letter-spacing: normal; text-align: center; box-shadow: none; cursor: pointer; transition: all 0.3s ease; } /* These two are scoped under .cookie-consent-actions on purpose. The base rule above is `.cookie-consent-actions button`, which is one class plus one element, and that outranks a bare `.cookie-consent-reject`. Without the extra class here the shared `border: 2px solid transparent` wins and the Reject button renders with an invisible border. */ /* Mirrors .btn-primary. */ .cookie-consent-actions .cookie-consent-accept { background: linear-gradient(135deg, var(--tenant-primary, var(--primary, #1FC4B0)), var(--tenant-gradient, var(--gradient, #1D65D1))); color: #ffffff; } .cookie-consent-actions .cookie-consent-accept:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(31, 196, 176, 0.5); } /* Mirrors .btn-secondary, inverted for the dark banner. Same visual weight as Accept rather than demoted to a faint text link. */ .cookie-consent-actions .cookie-consent-reject { background: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.6); } .cookie-consent-actions .cookie-consent-reject:hover { background: #ffffff; color: var(--tenant-secondary, var(--secondary, #0F2C46)); } @media (max-width: 600px) { .cookie-consent-inner { flex-direction: column; align-items: stretch; } /* MUST be reset here. The base rule is `flex: 1 1 320px`, which is correct in a row where flex-basis means width. The moment the container turns into a column, flex-basis means HEIGHT, so that same rule gives the paragraph a 320px-tall box and lets it grow further, which swallowed half the phone screen with empty space between the text and the buttons. */ .cookie-consent-text { flex: 0 0 auto; } .cookie-consent-actions button { flex: 1 1 auto; } }