/* * Chrome the app layout renders outside the page wrapper. * * The cookie card is emitted by layouts/app.blade.php after .main-wrapper, so * it appears on the public site and inside the customer panel alike, and it is * outside the .tf-site scope that site.css uses. Both layouts load this file; * neither can style it on its own without duplicating the rules. */ /* --------------------------------------------------------- cookie card -- */ /* * Not scoped under .tf-site: the app layout renders this after the page * wrapper, so it sits outside it in the DOM. * * The base template supplies only the icon circle and the .hide offset. The * positioning lives in a stylesheet this template does not load, so the card * had no `position: fixed` to offset against and rendered inline at the foot * of the page as a full-width unstyled block that could not be dismissed out * of view. */ .cookies-card { position: fixed; left: 1rem; bottom: 1rem; z-index: 1050; width: min(21rem, calc(100% - 2rem)); background: var(--tf-surface); color: var(--tf-text); border: 1px solid var(--tf-border); border-radius: var(--tf-radius-lg); box-shadow: var(--tf-shadow-lg); padding: var(--tf-4); font-family: var(--tf-sans); text-align: left; transition: transform .35s var(--tf-ease), opacity .35s var(--tf-ease); } /* The base sets `bottom: -500px` here, which fights a fixed card on a short screen. Translating it out of view is the same effect without the guesswork. */ .cookies-card.hide { bottom: 1rem !important; transform: translateY(calc(100% + 2rem)); opacity: 0; pointer-events: none; } .cookies-card__icon { width: 2.5rem; height: 2.5rem; background: var(--tf-gradient); color: var(--tf-on-accent); font-size: 1.25rem; box-shadow: var(--tf-glow); } .cookies-card__content { margin: var(--tf-3) 0 0 !important; font-size: .85rem; line-height: 1.55; color: var(--tf-prose); } .cookies-card__content a { color: var(--tf-accent); font-weight: 600; } .cookies-card__btn { margin-top: var(--tf-3) !important; } /* .btn--base and .btn--xl come from a component sheet this template does not load, so the Allow button would otherwise be bare text. */ .cookies-card .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; background: var(--tf-gradient); color: var(--tf-on-accent); border: 0; border-radius: var(--tf-radius-sm); padding: .6rem 1.1rem; font-size: .9rem; font-weight: 600; cursor: pointer; } .cookies-card .btn:hover { color: var(--tf-on-accent); filter: brightness(1.06); } /* * The installed-app tab bar owns the bottom edge, but only in standalone mode, * which is what .pwa-standalone marks. Reserving that space by screen * width instead left the card floating in the middle of the form on an * ordinary phone browser, on top of the fields it was covering. */ .pwa-standalone .cookies-card { bottom: 5.5rem; } .pwa-standalone .cookies-card.hide { bottom: 5.5rem !important; } @media (prefers-reduced-motion: reduce) { .cookies-card { transition: none; } }