/* ========================================================================= ZEN Z app and console — cookie notice. Same markup and behaviour as the zenzindia.com bar. Two differences, both forced by this surface rather than chosen: - It has a dark mode. The app stamps `.dark` on before hydration, so the bar has to answer to that class or it flashes a white slab across a dark screen. - It has a fixed bottom tab bar below the lg breakpoint. The notice sits above it, because covering the navigation with something the visitor cannot dismiss without answering is not an acceptable way to ask. Written as plain CSS in public/ rather than a component: it must be able to run before React has hydrated, and it is the same file the other three surfaces ship. ========================================================================= */ .ck-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #FFFFFF; border-top: 1px solid rgba(23, 18, 14, .12); box-shadow: 0 -18px 44px -24px rgba(23, 18, 14, .45); padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; animation: ck-rise .28s cubic-bezier(.22, .61, .36, 1) both; } .dark .ck-bar { background: #17151c; border-top-color: rgba(255, 255, 255, .12); box-shadow: 0 -18px 44px -24px rgba(0, 0, 0, .8); } @keyframes ck-rise { from { transform: translateY(100%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ck-bar { animation: none; } } .ck-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 20px; } .ck-text { flex: 1 1 auto; min-width: 0; } .ck-head { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #17120E; letter-spacing: -.01em; } .dark .ck-head { color: #F5F2EC; } .ck-body { margin: 0; font-size: 13.5px; line-height: 1.55; color: #4B4038; max-width: 78ch; } .dark .ck-body { color: #B4ABA1; } /* Scoped to .ck-bar deliberately. zenzindia.com ships `.zenz a{color:inherit; text-decoration:none}`, which outranks a bare .ck-link and rendered the one link in the notice as plain body text — a cookie policy nobody can see they can click. Any site stylesheet with an element-plus-class `a` rule does the same, so every copy of this file carries the stronger selector. */ .ck-bar .ck-link { color: #E8500F; text-decoration: underline; text-underline-offset: 2px; } .ck-bar .ck-link:hover { color: #FF6B2C; } .dark .ck-bar .ck-link { color: #FFA070; } .ck-actions { flex: 0 0 auto; display: flex; gap: 10px; } .ck-btn { font: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 12px 20px; border-radius: 12px; cursor: pointer; white-space: nowrap; transition: background .15s ease, border-color .15s ease, color .15s ease; } .ck-btn:focus-visible { outline: 2px solid #FF6B2C; outline-offset: 2px; } /* Refuse and accept are the same size and the same weight. The only difference is fill, and that is as far as the nudge is allowed to go. */ .ck-btn-solid { background: #FF6B2C; border: 1px solid #FF6B2C; color: #fff; } .ck-btn-solid:hover { background: #E8500F; border-color: #E8500F; } .ck-btn-ghost { background: #fff; border: 1px solid rgba(23, 18, 14, .18); color: #2A211A; } .ck-btn-ghost:hover { border-color: rgba(23, 18, 14, .42); } .dark .ck-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .22); color: #F5F2EC; } .dark .ck-btn-ghost:hover { border-color: rgba(255, 255, 255, .5); } /* Clear of the fixed customer tab bar, which is h-14 plus the safe area and is hidden from lg upwards. */ @media (max-width: 1023.98px) { .ck-bar { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 720px) { .ck-inner { flex-direction: column; align-items: stretch; gap: 14px; } .ck-actions { display: grid; grid-template-columns: 1fr 1fr; } .ck-btn { width: 100%; padding: 13px 12px; } .ck-body { font-size: 13px; } }