inside the column, so .pmi #N
is the (N+1)-th div (pstit is the first). Column 2 starts a
little later so the row-then-column reveal feels woven. */
.pmi.reveal {
opacity: 0;
transform: translateY(8px);
transition:
opacity 380ms var(--ease-out-expo),
transform 380ms var(--ease-out-expo);
}
.pmi.reveal.is-in {
opacity: 1;
transform: translateY(0);
}
.pgrid > div:nth-of-type(1) .pmi:nth-of-type(2).reveal {
transition-delay: 50ms;
}
.pgrid > div:nth-of-type(1) .pmi:nth-of-type(3).reveal {
transition-delay: 100ms;
}
.pgrid > div:nth-of-type(1) .pmi:nth-of-type(4).reveal {
transition-delay: 150ms;
}
.pgrid > div:nth-of-type(1) .pmi:nth-of-type(5).reveal {
transition-delay: 200ms;
}
.pgrid > div:nth-of-type(1) .pmi:nth-of-type(6).reveal {
transition-delay: 250ms;
}
.pgrid > div:nth-of-type(2) .pmi:nth-of-type(2).reveal {
transition-delay: 100ms;
}
.pgrid > div:nth-of-type(2) .pmi:nth-of-type(3).reveal {
transition-delay: 150ms;
}
.pgrid > div:nth-of-type(2) .pmi:nth-of-type(4).reveal {
transition-delay: 200ms;
}
.pgrid > div:nth-of-type(2) .pmi:nth-of-type(5).reveal {
transition-delay: 250ms;
}
.pgrid > div:nth-of-type(2) .pmi:nth-of-type(6).reveal {
transition-delay: 300ms;
}
/* — Log Out — */
.lout {
border-width: 1px;
border-color: rgba(220, 38, 38, 0.35);
transition:
background var(--t-med) var(--ease-out-expo),
border-color var(--t-med) var(--ease-out-expo),
color var(--t-med) var(--ease-out-expo);
}
.lout:hover {
background: #fef2f2;
border-color: #dc2626;
color: #b91c1c;
}
/* — Log Out confirm modal (§11 dialog language) — */
.kw-confirm[hidden] {
display: none;
}
.kw-confirm {
position: fixed;
inset: 0;
z-index: 12000;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20, 25, 18, 0.45);
backdrop-filter: blur(10px) saturate(140%);
-webkit-backdrop-filter: blur(10px) saturate(140%);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-med) var(--ease-out-expo);
padding: 16px;
}
.kw-confirm.show {
opacity: 1;
pointer-events: auto;
}
.kw-confirm-card {
background: #fff;
border-radius: var(--rl);
padding: 28px;
max-width: 380px;
width: 100%;
box-shadow: var(--sh-modal);
transform: translateY(14px) scale(0.97);
opacity: 0;
transition:
transform var(--t-med) var(--ease-out-back),
opacity var(--t-med) var(--ease-out-expo);
}
.kw-confirm.show .kw-confirm-card {
transform: translateY(0) scale(1);
opacity: 1;
}
.kw-confirm-card h3 {
font-family: var(--serif);
font-size: 22px;
margin-bottom: 8px;
color: var(--text-d);
}
.kw-confirm-card p {
color: var(--text-m);
font-size: 14px;
line-height: 1.55;
margin-bottom: 22px;
}
.kw-confirm-acts {
display: flex;
gap: 10px;
}
.kw-confirm-acts button {
flex: 1;
padding: 12px 16px;
border-radius: var(--rs);
font-size: 14px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition:
background var(--t-med) var(--ease-out-expo),
border-color var(--t-med) var(--ease-out-expo),
color var(--t-med) var(--ease-out-expo),
transform 120ms var(--ease-out-back);
}
.kw-confirm-cancel {
background: var(--olive-3);
border-color: var(--olive-10);
color: var(--text-s);
}
.kw-confirm-cancel:hover {
background: var(--olive-10);
border-color: var(--olive-20);
}
.kw-confirm-go {
background: #dc2626;
color: #fff;
}
.kw-confirm-go:hover {
background: #b91c1c;
}
.kw-confirm-acts button:active {
transform: scale(0.97);
}
/* — Sub-page back button: arrow slide — */
.sb .sb-arrow {
display: inline-block;
transition: transform var(--t-med) var(--ease-out-back);
}
.sb:hover .sb-arrow {
transform: translateX(-2px);
will-change: transform;
}
/* — Sub-page title split-reveal (mask slides up) — */
.stl {
position: relative;
overflow: hidden;
display: inline-block;
}
.stl .stl-inner {
display: inline-block;
transform: translateY(100%);
opacity: 0;
animation: kwSubTitleUp 500ms var(--ease-out-expo) 60ms forwards;
}
@keyframes kwSubTitleUp {
to {
transform: translateY(0);
opacity: 1;
}
}
/* — Empty state breath — */
.empty-ic {
display: inline-flex;
animation: kwEmptyBreath 3000ms ease-in-out infinite;
transform-origin: center;
/* continuous breath animation — exception per §21 */
will-change: transform, opacity;
}
@keyframes kwEmptyBreath {
0%,
100% {
transform: scale(1);
opacity: 0.35;
}
50% {
transform: scale(1.05);
opacity: 0.55;
}
}
.empty-ic .ei-svg {
width: 56px;
height: 56px;
stroke: var(--olive);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
/* — House Manual: card icon rotate + line reveal — */
.ic .ic-hd .ici {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--olive-3);
border-radius: 10px;
font-size: 22px;
line-height: 1;
transition:
transform var(--t-med) var(--ease-out-back),
background var(--t-med) var(--ease-out-expo);
}
.ic:hover .ic-hd .ici {
transform: rotate(2deg);
background: var(--olive-10);
}
.ic-bd .ic-line {
display: block;
opacity: 0;
transform: translateY(4px);
transition:
opacity 320ms var(--ease-out-expo),
transform 320ms var(--ease-out-expo);
}
.ic.is-in .ic-bd .ic-line,
.ic.fu .ic-bd .ic-line {
opacity: 1;
transform: translateY(0);
}
.ic.fu .ic-bd .ic-line:nth-child(1) {
transition-delay: 120ms;
}
.ic.fu .ic-bd .ic-line:nth-child(2) {
transition-delay: 200ms;
}
.ic.fu .ic-bd .ic-line:nth-child(3) {
transition-delay: 280ms;
}
.ic.fu .ic-bd .ic-line:nth-child(4) {
transition-delay: 360ms;
}
.ic.fu .ic-bd .ic-line:nth-child(5) {
transition-delay: 440ms;
}
.ic.fu .ic-bd .ic-line:nth-child(6) {
transition-delay: 520ms;
}
/* — Siquijor Guide: map-pin stroke draw + distance slide — */
.attr-pin {
width: 12px;
height: 12px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
vertical-align: -1px;
margin-right: 4px;
}
.attr-pin path,
.attr-pin circle {
stroke-dasharray: 70;
stroke-dashoffset: 70;
transition: stroke-dashoffset 700ms var(--ease-out-expo);
}
.attr-card.is-in .attr-pin path,
.attr-card.is-in .attr-pin circle,
.attr-card.fu .attr-pin path,
.attr-card.fu .attr-pin circle {
stroke-dashoffset: 0;
}
.attr-dist {
display: inline-flex;
align-items: center;
opacity: 0;
transform: translateX(8px);
transition:
opacity 380ms var(--ease-out-expo) 200ms,
transform 380ms var(--ease-out-expo) 200ms;
}
.attr-card.fu .attr-dist,
.attr-card.is-in .attr-dist {
opacity: 1;
transform: translateX(0);
}
/* — Help & Support: warm olive contact card + phone pulse — */
.help-contact {
background: linear-gradient(
135deg,
var(--olive-5) 0%,
var(--gold-light) 100%
);
border: 1px solid var(--olive-10);
position: relative;
overflow: hidden;
}
.help-contact::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at 80% 0%,
rgba(200, 169, 81, 0.18),
transparent 60%
);
pointer-events: none;
}
/* Contact Support — warm welcome photo beside the contact details.
Mobile-first: the photo banners across the TOP and the details stack below
(≤599px); from 600px up the photo becomes a left column. The panel carries a
golden-hour wash that ALSO acts as a graceful fallback, so the card looks
intentional even before images/contact-support.webp exists — no broken-image
icon. min-height reserves the space so there is no layout shift (CLS). */
.help-contact--media {
padding: 0;
display: grid;
grid-template-columns: 1fr; /* mobile: single column, stacked */
overflow: hidden; /* clip the photo to the card's rounded corners */
}
.help-contact-photo {
background-color: var(--olive-5); /* shows if the photo is absent */
background-image: linear-gradient(
150deg,
rgba(91, 107, 71, 0.32),
rgba(200, 169, 81, 0.22)
),
url("images/contact-support.webp?v=20260615c");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 168px; /* mobile banner height; grid-stretch fills taller on desktop */
}
.help-contact-body {
padding: 24px; /* matches the base .ic padding */
position: relative;
z-index: 1; /* keep text above the card's ::after gold wash */
}
@media (min-width: 600px) {
.help-contact--media {
grid-template-columns: 190px 1fr; /* tablet/desktop: photo left, details right */
}
}
.help-phone {
/* a11y: these tel: links sit on the Help/Contact critical path, so each must
be a >=44x44px touch target (Mobile-First Mandate + WCAG 2.5.8). Was
inline-flex at ~27px tall. display:flex makes each link a block-level tap
ROW so vertical margins reliably separate adjacent rows; width:fit-content
keeps the box content-width so the :hover translateX(3px) below can never
push a full-width row past the viewport edge (zero h-overflow rule). */
display: flex;
width: fit-content;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 8px 0;
margin: 4px 0;
color: var(--olive);
font-weight: 600;
text-decoration: none;
font-size: 15px;
transition: transform var(--t-med) var(--ease-out-back);
}
.help-phone .phone-icon {
width: 16px;
height: 16px;
stroke: var(--olive);
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
transition: transform var(--t-med) var(--ease-out-back);
}
.help-phone:hover {
transform: translateX(3px);
}
.help-phone:hover .phone-icon {
animation: kwPhonePulse 1.2s ease-in-out infinite;
}
@keyframes kwPhonePulse {
0%,
100% {
transform: scale(1) rotate(0);
}
35% {
transform: scale(1.08) rotate(-8deg);
}
70% {
transform: scale(1.08) rotate(8deg);
}
}
/* — Payment Methods: gold shimmer sweep on bank card — */
.pay-bank {
position: relative;
overflow: hidden;
isolation: isolate;
}
.pay-bank::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -40%;
width: 40%;
background: linear-gradient(
105deg,
transparent 0%,
rgba(200, 169, 81, 0) 25%,
rgba(200, 169, 81, 0.45) 50%,
rgba(200, 169, 81, 0) 75%,
transparent 100%
);
transform: translateX(0);
animation: kwPayShimmer 6s var(--ease-in-out-quart) infinite;
pointer-events: none;
}
@keyframes kwPayShimmer {
0% {
transform: translateX(0);
}
100% {
transform: translateX(350%);
}
}
/* — Billing rows: download button micro-interaction — */
.rc-btn.bill-dl {
transition: transform 120ms var(--ease-out-back);
}
.rc-btn.bill-dl:active {
transform: scale(0.94);
}
.rc-btn.bill-dl.is-checked {
background: var(--olive-10);
color: var(--olive);
}
.rc-btn.bill-dl .bill-icon {
display: inline-block;
margin-right: 6px;
transition:
transform 220ms var(--ease-out-back),
opacity 200ms ease;
}
.rc-btn.bill-dl.is-checked .bill-icon {
transform: scale(1.15);
}
/* — My Bookings: status badge motion accents — */
.bk-status {
display: inline-block;
position: relative;
}
.bk-status.is-checked-in {
animation: kwStatusBreath 2.6s ease-in-out infinite;
}
@keyframes kwStatusBreath {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.78;
transform: scale(0.98);
}
}
.bk-status.is-checked-out {
opacity: 0.7;
}
/* ════════════════════════════════════════════════════════════════
MY BOOKINGS — editorial card system (mobile-first, designed @360).
Reuses the .bk-status motion accents above. Filter chips trigger an
in-memory re-render (setBookingFilter → _renderMyBookings); whole
cards are role=button → the existing ticket overlay (openBookingTicket).
════════════════════════════════════════════════════════════════ */
.bk-filter {
display: flex;
gap: 8px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding: 2px 2px 16px;
margin: 0 -2px;
}
.bk-filter::-webkit-scrollbar {
display: none;
}
.bk-chip {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 7px;
min-height: 44px;
padding: 8px 15px;
border: 1px solid var(--olive-20);
border-radius: 999px;
background: transparent;
color: var(--olive);
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
line-height: 1;
cursor: pointer;
white-space: nowrap;
transition:
background var(--t-med) var(--ease-out-expo),
border-color var(--t-med) var(--ease-out-expo),
color var(--t-med) var(--ease-out-expo);
}
.bk-chip-n {
font-size: 11px;
font-weight: 700;
padding: 1px 7px;
border-radius: 999px;
background: var(--olive-10);
}
.bk-chip.is-active {
background: var(--olive);
border-color: var(--olive);
color: #fff;
}
.bk-chip.is-active .bk-chip-n {
background: rgba(255, 255, 255, 0.22);
}
@media (hover: hover) {
.bk-chip:hover {
border-color: var(--olive);
background: var(--olive-5);
}
.bk-chip.is-active:hover {
background: var(--olive);
}
}
.bk-chip:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
.bk-list {
display: flex;
flex-direction: column;
gap: 14px;
}
.bk-card {
display: flex;
align-items: stretch;
width: 100%;
text-align: left;
background: #fff;
border: 1px solid var(--olive-10);
border-radius: 18px;
overflow: hidden;
box-shadow:
0 1px 2px rgba(31, 42, 26, 0.04),
0 10px 24px -18px rgba(31, 42, 26, 0.5);
cursor: pointer;
transition:
transform var(--t-med) var(--ease-out-expo),
box-shadow var(--t-med) var(--ease-out-expo);
}
.bk-card-ph {
position: relative;
flex: 0 0 104px;
align-self: stretch;
background: var(--olive-3);
overflow: hidden;
}
.bk-card-ph img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-slow) var(--ease-out-expo);
}
.bk-card-bd {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 14px 16px;
}
.bk-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.bk-card-nm {
flex: 1 1 auto;
min-width: 0;
font-family: var(--serif);
font-size: 17px;
font-weight: 600;
line-height: 1.2;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bk-card .bk-status {
flex: 0 0 auto;
padding: 4px 11px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: capitalize;
white-space: nowrap;
/* currentColor = the inline status colour; color-mix tints a soft pill.
Unsupported browsers simply omit the bg (colored text stays legible). */
background: color-mix(in srgb, currentColor 13%, transparent);
}
.bk-card-meta {
font-size: 13px;
color: var(--text-m);
}
.bk-card-bot {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
margin-top: 2px;
}
.bk-card-pr {
font-size: 16px;
font-weight: 700;
color: var(--olive);
}
.bk-card-go {
font-size: 13px;
font-weight: 600;
color: var(--text-m);
opacity: 0.85;
transition: transform var(--t-med) var(--ease-out-expo);
}
.bk-empty {
text-align: center;
color: var(--text-m);
font-size: 14px;
padding: 44px 16px;
}
@media (hover: hover) {
.bk-card:hover {
transform: translateY(-2px);
box-shadow:
0 2px 4px rgba(31, 42, 26, 0.06),
0 18px 32px -18px rgba(31, 42, 26, 0.55);
}
.bk-card:hover .bk-card-ph img {
transform: scale(1.05);
}
.bk-card:hover .bk-card-go {
transform: translateX(3px);
}
}
.bk-card:active {
transform: scale(0.992);
}
.bk-card:focus-visible {
outline: 2px solid var(--olive);
outline-offset: 2px;
}
@media (min-width: 600px) {
.bk-card-ph {
flex-basis: 132px;
}
.bk-card-bd {
padding: 16px 20px;
}
.bk-card-nm {
font-size: 19px;
}
}
@media (prefers-reduced-motion: reduce) {
.bk-card,
.bk-card-ph img,
.bk-card-go,
.bk-chip {
transition: none;
}
.bk-card:hover,
.bk-card:active {
transform: none;
}
.bk-card:hover .bk-card-ph img {
transform: none;
}
.bk-card:hover .bk-card-go {
transform: none;
}
}
/* — Travel Preferences: olive ripple on toggle activate — */
.pref-toggle {
transition: background var(--t-med) var(--ease-out-expo);
}
.pref-knob {
/* Switch from animating `left` (layout) to `transform` (composite). */
left: 3px !important;
transition: transform var(--t-med) var(--ease-out-back);
}
.pref-toggle:hover .pref-knob,
.pref-toggle:active .pref-knob,
.pref-toggle.just-on .pref-knob {
will-change: transform;
}
.pref-toggle.on .pref-knob {
left: 3px !important;
transform: translateX(20px);
}
.pref-toggle::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--olive);
opacity: 0;
transform: scale(0.6);
pointer-events: none;
}
.pref-toggle.just-on::after {
animation: kwPrefRipple 600ms var(--ease-out-expo) 1;
}
@keyframes kwPrefRipple {
0% {
opacity: 0.5;
transform: scale(0.6);
}
100% {
opacity: 0;
transform: scale(1.4);
}
}
/* — Saved Documents: 3° Y-axis perspective tilt — */
.doc-card {
perspective: 800px;
transform-style: preserve-3d;
transition:
transform 400ms var(--ease-out-expo),
box-shadow 400ms var(--ease-out-expo),
border-color var(--t-med) var(--ease-out-expo);
}
.doc-card:hover {
transform: perspective(800px) rotateY(-3deg) translateY(-2px);
box-shadow: var(--sh-card);
will-change: transform;
}
/* — Edit Profile avatar overlay + photo pop / ring flash — */
.ep-avatar {
width: 112px;
height: 112px;
font-size: 44px;
position: relative;
cursor: pointer;
transition:
transform 400ms var(--ease-out-back),
box-shadow var(--t-med) var(--ease-out-expo);
box-shadow: 0 0 0 0 var(--gold);
}
.ep-avatar:hover,
.ep-avatar:focus-within,
.ep-avatar.is-popped,
.ep-avatar.is-flashed {
will-change: transform;
}
.ep-avatar::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(74, 93, 35, 0.85);
opacity: 0;
transition: opacity var(--t-med) var(--ease-out-expo);
pointer-events: none;
display: grid;
place-items: center;
}
.ep-avatar .ep-cam-overlay {
position: absolute;
inset: 0;
border-radius: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
gap: 4px;
opacity: 0;
transition: opacity var(--t-med) var(--ease-out-expo);
pointer-events: none;
z-index: 2;
}
.ep-avatar:hover,
.ep-avatar:focus-within {
opacity: 1;
}
.ep-avatar:hover::after,
.ep-avatar:focus-within::after {
opacity: 0.85;
}
.ep-avatar:hover .ep-cam-overlay,
.ep-avatar:focus-within .ep-cam-overlay {
opacity: 1;
}
.ep-cam-overlay .ep-cam-icon {
width: 26px;
height: 26px;
stroke: #fff;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.ep-avatar.is-popped {
animation: kwEpPhotoPop 400ms var(--ease-out-back) 1;
}
.ep-avatar.is-flashed {
animation:
kwEpPhotoPop 400ms var(--ease-out-back) 1,
kwEpRingFlash 600ms var(--ease-out-expo) 1;
}
@keyframes kwEpPhotoPop {
0% {
transform: scale(1);
}
50% {
transform: scale(1.04);
}
100% {
transform: scale(1);
}
}
@keyframes kwEpRingFlash {
0% {
box-shadow: 0 0 0 0 rgba(200, 169, 81, 0);
}
40% {
box-shadow: 0 0 0 6px rgba(200, 169, 81, 0.55);
}
100% {
box-shadow: 0 0 0 0 rgba(200, 169, 81, 0);
}
}
/* — Edit Profile field focus accent (scaleX from left) — */
.auth-field {
position: relative;
}
.auth-field .field-accent {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--olive);
transform: scaleX(0);
transform-origin: left center;
opacity: 0;
transition:
transform 280ms var(--ease-out-expo),
opacity 200ms ease;
pointer-events: none;
border-radius: 1px;
}
.auth-field.is-focus .field-accent {
transform: scaleX(1);
opacity: 1;
}
.auth-field[data-max] {
margin-bottom: 22px;
}
.auth-field .field-counter {
position: absolute;
right: 12px;
bottom: -16px;
font-size: 11px;
color: var(--text-m);
opacity: 0;
transition: opacity 200ms ease;
pointer-events: none;
}
.auth-field.is-focus .field-counter {
opacity: 1;
}
/* — Disabled email lock icon — */
.field-lock {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
stroke: var(--text-m);
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
opacity: 0.7;
}
.field-lock-wrap {
position: relative;
}
.field-lock-tip {
position: absolute;
right: 0;
bottom: calc(100% + 6px);
background: var(--text-d);
color: #fff;
padding: 6px 10px;
border-radius: 8px;
font-size: 11px;
white-space: nowrap;
opacity: 0;
transform: translateY(4px);
pointer-events: none;
transition:
opacity var(--t-med) var(--ease-out-expo),
transform var(--t-med) var(--ease-out-expo);
z-index: 5;
}
.field-lock-wrap:hover .field-lock-tip {
opacity: 1;
transform: translateY(0);
}
/* — Validation shake — */
.auth-field.is-error input {
animation: kwFieldShake 320ms var(--ease-out-expo) 1;
border-color: #dc2626;
}
@keyframes kwFieldShake {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-4px);
}
40% {
transform: translateX(4px);
}
60% {
transform: translateX(-3px);
}
80% {
transform: translateX(2px);
}
}
/* — Save button success state — */
.auth-submit.is-saving {
opacity: 0.85;
cursor: progress;
}
.auth-submit.is-saved {
background: var(--olive) !important;
animation: kwSaveGoldPulse 700ms var(--ease-out-expo) 1;
}
.auth-submit .save-check {
display: inline-block;
transform: scale(0);
opacity: 0;
transition:
transform 220ms var(--ease-out-back),
opacity 200ms ease;
}
.auth-submit.is-saved .save-check {
transform: scale(1);
opacity: 1;
}
@keyframes kwSaveGoldPulse {
0% {
box-shadow: 0 0 0 0 rgba(200, 169, 81, 0.6);
}
100% {
box-shadow: 0 0 0 14px rgba(200, 169, 81, 0);
}
}
/* — Change Password divider — */
.ep-pw-div {
position: relative;
height: 1px;
margin: 28px 0 20px;
background: linear-gradient(
90deg,
transparent 0%,
var(--olive-20) 50%,
transparent 100%
);
}
/* — Mobile adjustments — */
@media (max-width: 640px) {
.p-av {
width: 72px;
height: 72px;
font-size: 28px;
}
.p-nm {
font-size: 22px;
}
.pgrid {
grid-template-columns: 1fr;
gap: 16px;
}
}
/* — Reduced-motion overrides for §8 — */
@media (prefers-reduced-motion: reduce) {
.p-av::before {
animation: none;
opacity: 0;
}
.ph:hover .p-av::before {
opacity: 0;
}
.p-nm {
animation: none;
background: var(--text-d);
-webkit-text-fill-color: currentColor;
color: var(--text-d);
}
.p-em {
animation: none;
opacity: 1;
transform: none;
}
.edit-prof-btn:hover .ep-pen {
animation: none;
transform: none;
}
.pstit::before {
transition: none;
transform: translateY(-50%) scaleX(1);
}
.pmi:hover {
transform: none;
}
.pmi::after,
.pmi::before {
display: none;
}
.pmi:hover .pmi-ic,
.pmi:hover .pmi-ic > * {
transform: none;
}
.pmi:hover .pmi-ar {
transform: none;
}
.pmi.reveal {
opacity: 1;
transform: none;
transition: opacity 150ms ease;
}
.kw-confirm,
.kw-confirm-card {
transition: opacity 150ms ease;
}
.kw-confirm.show .kw-confirm-card {
transform: none;
}
.sb:hover .sb-arrow {
transform: none;
}
.stl .stl-inner {
animation: none;
transform: none;
opacity: 1;
}
.empty-ic {
animation: none;
opacity: 0.35;
}
.ic:hover .ici {
transform: none;
}
.ic-bd .ic-line {
opacity: 1;
transform: none;
transition: none;
}
.attr-pin path,
.attr-pin circle {
transition: none;
stroke-dashoffset: 0;
}
.attr-dist {
opacity: 1;
transform: none;
transition: none;
}
.help-phone:hover {
transform: none;
}
.help-phone:hover .phone-icon {
animation: none;
}
.pay-bank::after {
animation: none;
opacity: 0;
}
.bk-status.is-checked-in {
animation: none;
}
.pref-toggle.just-on::after {
animation: none;
opacity: 0;
}
.doc-card:hover {
transform: none;
}
.ep-avatar.is-popped,
.ep-avatar.is-flashed {
animation: none;
}
.auth-submit.is-saved {
animation: none;
}
.auth-field.is-error input {
animation: none;
}
}
/* === END PROFILE (§8) — Phase 7 === */
/* ═══════════════════════════════════════════════════════════════════
ADMIN (§9) — Phase 8
Calm, high-signal control panel. Restrained motion. Every animation
conveys real info (status, change, arrival). No decorative twinkles
in data tables. Animates ONLY transform/opacity/filter.
═══════════════════════════════════════════════════════════════════ */
/* ── 9.1 — Tab bar shell + FLIP indicator ───────────────────────── */
.adm-tab-bar {
position: relative;
padding: 6px;
background: var(--olive-3);
border-radius: 14px;
width: fit-content;
max-width: 100%;
display: flex;
gap: 2px;
flex-wrap: wrap;
isolation: isolate;
}
.adm-tab-bar button {
position: relative;
z-index: 2;
padding: 9px 18px;
border-radius: 10px;
border: none;
font-size: 13px;
font-weight: 600;
background: transparent;
color: var(--olive);
display: inline-flex;
align-items: center;
gap: 8px;
transition:
color 220ms var(--ease-out-expo),
background-color 220ms var(--ease-out-expo);
cursor: pointer;
}
.adm-tab-bar button:hover:not(.active) {
background: rgba(74, 93, 35, 0.06);
}
.adm-tab-bar button.active {
color: #fff;
background: transparent; /* indicator paints below */
}
.adm-tab-ic {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
line-height: 1;
transition: transform 250ms var(--ease-out-back);
will-change: auto;
}
.adm-tab-bar button.active .adm-tab-ic {
animation: admTabIcPop 250ms var(--ease-out-back) both;
}
@keyframes admTabIcPop {
0% {
transform: scale(0.94);
}
100% {
transform: scale(1);
}
}
.adm-tab-indicator {
/* Fixed-size base (100×100) — JS animates only transform: translate + scale,
never width/height (composite-safe per §-1 rule 4). The 100×100 base makes
scale factors simple (W/100, H/100). Border-radius scales with the box. */
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
transform-origin: top left;
background:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.04) 0%,
transparent 30%,
rgba(0, 0, 0, 0.04) 100%
),
var(--olive);
/* Use 1000% radius so it remains a pill regardless of scale (CSS clamps to half min(w,h)). */
border-radius: 10000px;
z-index: 1;
opacity: 0;
box-shadow: 0 2px 8px rgba(74, 93, 35, 0.22);
pointer-events: none;
}
@media (max-width: 720px) {
.adm-tab-bar button {
padding: 9px 12px;
font-size: 12px;
}
.adm-tab-lbl {
display: inline;
}
}
/* ── 9.1 — Content area fade-up swap ───────────────────────────── */
.adm-content-anim {
opacity: 0;
transform: translateY(8px);
transition:
opacity 350ms var(--ease-out-expo),
transform 350ms var(--ease-out-expo);
}
.adm-content-anim.is-in {
opacity: 1;
transform: translateY(0);
}
/* ── 9.1 — Branded spinner: olive arc + 3 counter-rotating gold dots ── */
.adm-spinner {
position: relative;
display: inline-block;
width: 44px;
height: 44px;
}
.adm-spinner-arc {
width: 100%;
height: 100%;
animation: admSpinArc 1s linear infinite;
}
@keyframes admSpinArc {
to {
transform: rotate(360deg);
}
}
.adm-spinner-orbit {
position: absolute;
inset: 0;
animation: admSpinOrbit 2.4s linear infinite reverse;
}
@keyframes admSpinOrbit {
to {
transform: rotate(360deg);
}
}
.adm-spinner-dot {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--gold);
}
.adm-spinner-dot.d1 {
transform: translate(-50%, -50%) rotate(0deg) translateX(20px);
}
.adm-spinner-dot.d2 {
transform: translate(-50%, -50%) rotate(120deg) translateX(20px);
}
.adm-spinner-dot.d3 {
transform: translate(-50%, -50%) rotate(240deg) translateX(20px);
}
/* ── 9.2 — Stat cards grid + count-up + status accent + ring ─────── */
.adm-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
margin-bottom: 36px;
}
.adm-stat {
position: relative;
background: var(--wh);
padding: 28px 24px;
border-radius: var(--r);
border: 1px solid var(--brd-l);
text-align: center;
overflow: hidden;
transition:
transform 300ms var(--ease-out-expo),
box-shadow 300ms var(--ease-out-expo),
border-color 200ms var(--ease-out-expo);
}
.adm-stat:hover {
transform: translateY(-4px);
box-shadow: var(--sh-card);
border-color: var(--olive-20);
}
.adm-stat-accent {
position: absolute;
top: 0;
left: 0;
height: 3px;
width: 100%;
background: var(--olive);
transform: scaleX(0);
transform-origin: left center;
transition: transform 300ms var(--ease-out-expo);
}
.adm-stat[data-accent="green"] .adm-stat-accent {
background: #22c55e;
}
.adm-stat[data-accent="red"] .adm-stat-accent {
background: #dc2626;
}
.adm-stat[data-accent="gold"] .adm-stat-accent {
background: var(--gold);
}
.adm-stat:hover .adm-stat-accent {
transform: scaleX(1);
}
.adm-stat-num {
font-family: var(--serif);
font-size: 36px;
color: var(--olive);
margin-bottom: 4px;
display: flex;
align-items: baseline;
justify-content: center;
gap: 2px;
}
.adm-stat-val {
display: inline-block;
}
.adm-stat-suffix {
color: var(--text-m);
font-size: 22px;
font-weight: 400;
margin-left: 2px;
}
.adm-stat-label {
font-size: 13px;
color: var(--text-m);
font-weight: 500;
position: relative;
z-index: 2;
}
/* Phase AC — Outstanding Balances stat card.
Peso-prefixed value (no count-up animation — the source data is a
centavo sum that's already display-ready), sub-line beneath the
label showing the booking count, gold accent stripe when the
total is > 0 to draw the admin's eye. */
.adm-stat-peso {
/* Slightly tighter than the integer-only stat numbers so the
full ₱X,XXX fits cleanly in the card width. */
font-size: 28px;
letter-spacing: -0.5px;
line-height: 1.05;
}
.adm-stat-sub {
font-size: 11.5px;
color: var(--text-m);
font-weight: 500;
margin-top: 4px;
letter-spacing: 0.2px;
position: relative;
z-index: 2;
}
.adm-stat-outstanding.has-balances {
/* Subtle gold ring + tinted background so the card reads as
actionable (money still owed). Identical visual weight to the
existing is-unread/is-empty accent treatments. */
border-left: 4px solid var(--gold, #c8a951);
background: linear-gradient(180deg, rgba(200, 169, 81, 0.05), transparent);
}
.adm-stat-outstanding .adm-stat-peso {
color: var(--olive);
}
.adm-stat-outstanding.has-balances .adm-stat-peso {
color: #9a7d2e;
}
@media (max-width: 600px) {
.adm-stat-peso {
font-size: 24px;
}
}
/* "Available Today" is 0 — left-border red strobe-pulse (opacity 0.7↔1) */
.adm-stat.is-empty {
border-left: 4px solid #dc2626;
}
.adm-stat.is-empty::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 4px;
background: #dc2626;
animation: admEmptyBreath 2s ease-in-out infinite;
}
@keyframes admEmptyBreath {
0%,
100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
/* Conversations: unread dot pulses gently */
.adm-stat-dot {
position: absolute;
top: 12px;
right: 12px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 0 rgba(200, 169, 81, 0.5);
animation: admDotPulse 2.2s ease-in-out infinite;
z-index: 3;
}
@keyframes admDotPulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.18);
opacity: 0.85;
}
}
/* Occupancy Rate — circular SVG progress ring behind the number */
.adm-stat-ring-card {
position: relative;
padding-top: 36px;
}
.adm-stat-ring {
position: absolute;
top: 50%;
left: 50%;
width: 92px;
height: 92px;
transform: translate(-50%, -56%);
z-index: 0;
opacity: 0.85;
}
.adm-stat-ring-card .adm-stat-num,
.adm-stat-ring-card .adm-stat-label {
position: relative;
z-index: 2;
}
/* ── 9.2 — FULLY BOOKED alert ──────────────────────────────────── */
.adm-alert-booked {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 18px 22px 18px 30px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border-radius: var(--r);
border: 1px solid #fcd34d;
margin-bottom: 24px;
overflow: hidden;
}
.adm-alert-stripe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 6px;
background-image: repeating-linear-gradient(
45deg,
#b45309 0,
#b45309 6px,
#fde68a 6px,
#fde68a 12px
);
background-size: 200% 200%;
animation: admStripeShift 2s linear infinite;
}
@keyframes admStripeShift {
from {
background-position: 0% 0%;
}
to {
background-position: 0% 100%;
}
}
.adm-alert-title {
font-family: var(--serif);
font-size: 17px;
font-weight: 700;
color: #92400e;
margin-bottom: 2px;
}
.adm-alert-text {
font-size: 13px;
color: #78350f;
}
/* ── 9.2 — Section titles + Quick Actions ──────────────────────── */
.adm-section-title {
font-family: var(--serif);
font-size: 20px;
margin-bottom: 16px;
}
.adm-quick-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.adm-qa-btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 8px;
transition:
transform 220ms var(--ease-out-expo),
box-shadow 220ms var(--ease-out-expo);
}
.adm-qa-btn::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.35),
transparent
);
transform: skewX(-20deg);
transition: transform 600ms var(--ease-out-expo);
pointer-events: none;
}
.adm-qa-gold::before {
background: linear-gradient(
120deg,
transparent,
rgba(255, 230, 150, 0.55),
transparent
);
}
.adm-qa-btn:hover::before {
transform: translateX(360%) skewX(-20deg);
}
.adm-qa-btn:hover {
transform: translateY(-2px);
}
.adm-qa-ic {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 15px;
line-height: 1;
transition: transform 280ms var(--ease-out-back);
}
.adm-qa-btn[data-qa="manage"]:hover .adm-qa-ic {
transform: rotate(2deg);
}
.adm-qa-btn[data-qa="walkin"]:hover .adm-qa-ic {
transform: scale(1.1);
}
.adm-qa-btn[data-qa="avail"]:hover .adm-qa-ic {
transform: perspective(40px) rotateY(-12deg);
}
.adm-qa-btn[data-qa="chats"]:hover .adm-qa-ic {
transform: translateY(-1px) rotate(-4deg);
}
/* Per-item 40ms stagger via --um-d for Recent Users (overrides data-stagger). */
.adm-user-mini.reveal {
transition-delay: var(--um-d, 0ms);
}
/* ── 9.2 — Recent users mini list w/ hover sweep + chevron ─────── */
.adm-users-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.adm-user-mini {
position: relative;
display: flex;
align-items: center;
gap: 14px;
background: var(--wh);
padding: 14px 18px;
border-radius: var(--r);
border: 1px solid var(--brd-l);
overflow: hidden;
cursor: pointer;
transition:
border-color 220ms var(--ease-out-expo),
transform 220ms var(--ease-out-expo),
box-shadow 220ms var(--ease-out-expo);
}
.adm-user-mini::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--olive-3), transparent);
opacity: 0;
transform: translateX(-30%);
transition:
opacity 240ms var(--ease-out-expo),
transform 320ms var(--ease-out-expo);
pointer-events: none;
}
.adm-user-mini:hover {
border-color: var(--olive-20);
box-shadow: var(--sh-s);
transform: translateY(-1px);
}
.adm-user-mini:hover::before {
opacity: 1;
transform: translateX(0);
}
.adm-user-mini > * {
position: relative;
z-index: 1;
}
.adm-user-mini-av {
transition: transform 260ms var(--ease-out-back);
}
.adm-user-mini:hover .adm-user-mini-av {
transform: scale(1.06);
}
.adm-um-joined {
color: var(--text-m);
transition:
color 220ms var(--ease-out-expo),
font-weight 220ms var(--ease-out-expo);
}
.adm-user-mini:hover .adm-um-joined {
color: var(--olive);
font-weight: 600;
}
.adm-um-chev {
margin-left: auto;
font-size: 22px;
color: var(--olive-20);
opacity: 0;
transform: translateX(-6px);
transition:
opacity 220ms var(--ease-out-expo),
transform 220ms var(--ease-out-expo);
}
.adm-user-mini:hover .adm-um-chev {
opacity: 1;
transform: translateX(0);
color: var(--olive);
}
/* ── 9.3 — Manage Rooms: add button + card + Ken Burns ─────────── */
.adm-rm-add {
display: inline-flex;
align-items: center;
gap: 8px;
}
.adm-rm-plus {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 20px;
line-height: 1;
font-weight: 300;
transition: transform 320ms var(--ease-out-back);
}
.adm-rm-add:hover .adm-rm-plus {
transform: rotate(90deg);
}
.adm-rm-card {
transition:
transform 320ms var(--ease-out-expo),
box-shadow 320ms var(--ease-out-expo),
border-color 220ms var(--ease-out-expo);
}
.adm-rm-card:hover {
transform: translateY(-6px);
box-shadow: var(--sh-card);
}
.adm-rm-card .rm-card-img {
overflow: hidden;
}
.adm-rm-card .rm-card-img-inner {
width: 100%;
height: 100%;
transition: transform 600ms var(--ease-out-expo);
transform-origin: center;
}
.adm-rm-card:hover .rm-card-img-inner {
transform: scale(1.04) translate(2px, -2px);
}
.adm-rm-card .rm-card-price {
transition: color 220ms var(--ease-out-expo);
}
.adm-rm-card:hover .rm-card-price {
color: #a48637;
}
.adm-rm-amenity-more {
cursor: help;
border: 1px dashed var(--olive-20);
}
.adm-amenity-pop {
position: absolute;
z-index: 200;
transform: translate(-50%, -100%);
padding: 8px 12px;
background: var(--text-d);
color: var(--cream);
border-radius: 8px;
font-size: 12px;
font-weight: 500;
max-width: 240px;
box-shadow: var(--sh-card);
opacity: 0;
pointer-events: none;
transition:
opacity 200ms var(--ease-out-expo),
transform 200ms var(--ease-out-expo);
}
.adm-amenity-pop.show {
opacity: 1;
transform: translate(-50%, calc(-100% - 6px));
}
.adm-rm-edit,
.adm-rm-del {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--olive-10);
background: var(--olive-3);
color: var(--olive);
transition:
background-color 200ms var(--ease-out-expo),
color 200ms var(--ease-out-expo),
border-color 200ms var(--ease-out-expo);
}
.adm-rm-edit:hover {
background: var(--olive);
color: #fff;
border-color: var(--olive);
}
.adm-rm-edit:hover .adm-ic-pencil {
animation: admPencilWiggle 500ms var(--ease-out-back);
}
@keyframes admPencilWiggle {
0%,
100% {
transform: rotate(0deg);
}
25% {
transform: rotate(-8deg);
}
50% {
transform: rotate(6deg);
}
75% {
transform: rotate(-4deg);
}
}
.adm-rm-del {
background: transparent;
border-color: #fca5a5;
color: #dc2626;
}
.adm-rm-del:hover {
background: #fee2e2;
border-color: #dc2626;
}
.adm-rm-del:hover .adm-ic-trash {
animation: admTrashShake 380ms var(--ease-out-expo);
}
@keyframes admTrashShake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-2px) rotate(-4deg);
}
50% {
transform: translateX(2px) rotate(4deg);
}
75% {
transform: translateX(-1px);
}
}
.adm-ic {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* ── 9.4 — Room Editor: photo grid, marching-ants, drag-over ───── */
.adm-photos-grid .adm-rm-photo-add {
position: relative;
border-style: dashed;
overflow: hidden;
transition:
border-color 220ms var(--ease-out-expo),
background-color 220ms var(--ease-out-expo);
}
.adm-photos-grid .adm-rm-photo-add::before {
/* Marching-ants animated stroke (rotates the dash offset).
Uses background-image (gradient) + animate background-position. */
content: "";
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
background:
linear-gradient(90deg, var(--olive-20) 50%, transparent 50%) repeat-x top,
linear-gradient(90deg, var(--olive-20) 50%, transparent 50%) repeat-x bottom,
linear-gradient(0deg, var(--olive-20) 50%, transparent 50%) repeat-y left,
linear-gradient(0deg, var(--olive-20) 50%, transparent 50%) repeat-y right;
background-size:
12px 1.5px,
12px 1.5px,
1.5px 12px,
1.5px 12px;
animation: admAnts 10s linear infinite;
opacity: 0;
transition: opacity 240ms var(--ease-out-expo);
}
.adm-photos-grid .adm-rm-photo-add:hover::before,
.adm-photos-grid .adm-rm-photo-add.is-drag::before {
opacity: 1;
}
@keyframes admAnts {
to {
background-position:
120px 0,
-120px 100%,
0 -120px,
100% 120px;
}
}
.adm-photos-grid .adm-rm-photo-add.is-drag {
background: var(--olive-3);
border-color: var(--olive);
}
.adm-photos-grid .adm-rm-photo-add.is-drag .adm-photo-add-ic {
animation: admDropBounce 600ms var(--ease-out-back) infinite alternate;
}
@keyframes admDropBounce {
from {
transform: translateY(0);
}
to {
transform: translateY(-4px);
}
}
.adm-photo-add-ic {
width: 28px;
height: 28px;
}
.adm-rm-photo-add .rm-photo-add-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.adm-rm-photo {
transition:
transform 240ms var(--ease-out-expo),
box-shadow 240ms var(--ease-out-expo);
}
.adm-rm-photo-pop {
animation: admPhotoPop 480ms var(--ease-out-back) both;
}
@keyframes admPhotoPop {
0% {
opacity: 0;
transform: scale(0.92);
filter: brightness(1);
}
40% {
opacity: 1;
filter: brightness(1.25);
}
100% {
opacity: 1;
transform: scale(1);
filter: brightness(1);
}
}
.adm-rm-photo .rm-photo-remove {
transition:
background-color 200ms var(--ease-out-expo),
transform 200ms var(--ease-out-expo);
}
.adm-rm-photo .rm-photo-remove:hover {
background: rgba(220, 38, 38, 0.92);
transform: scale(1.08);
}
.adm-rm-cover {
animation: admCoverPulse 2.4s ease-in-out infinite;
transform-origin: center;
}
@keyframes admCoverPulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.85;
transform: scale(1.04);
}
}
/* ── 9.4 — Amenities ripple + custom-add scale-in ──────────────── */
.rm-amenity-btn {
position: relative;
overflow: hidden;
}
.adm-ripple {
position: absolute;
width: 12px;
height: 12px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.55) 0%,
transparent 70%
);
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%) scale(0);
animation: admRippleAnim 600ms var(--ease-out-expo) forwards;
}
@keyframes admRippleAnim {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(14);
opacity: 0;
}
}
.adm-rm-amenity-pop {
animation: admAmenityPopIn 320ms var(--ease-out-back) both;
}
@keyframes admAmenityPopIn {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* Save button: spinner → checkmark morph */
.adm-rm-save {
position: relative;
transition: background-color 200ms var(--ease-out-expo);
}
.adm-rm-save.is-saved {
background: #22c55e !important;
}
.adm-rm-check {
width: 22px;
height: 22px;
animation: admCheckDraw 200ms var(--ease-out-expo) both;
}
@keyframes admCheckDraw {
0% {
opacity: 0;
transform: scale(0.6);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* ── 9.5 — Availability tab ─────────────────────────────────────── */
.adm-avail-head {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.adm-avail-prev .adm-arrow,
.adm-avail-next .adm-arrow {
display: inline-block;
transition: transform 220ms var(--ease-out-expo);
}
.adm-avail-prev:hover .adm-arrow-left {
transform: translateX(-2px);
}
.adm-avail-next:hover .adm-arrow-right {
transform: translateX(2px);
}
.adm-avail-legend {
display: flex;
align-items: center;
gap: 16px;
font-size: 13px;
color: var(--text-m);
flex-wrap: wrap;
}
.adm-leg-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.adm-leg-dot {
transition: transform 220ms var(--ease-out-expo);
}
.adm-leg-dot.leg-booked {
animation: admLegBreath 2.6s ease-in-out infinite;
}
.adm-leg-dot.leg-in {
animation: admLegPulse 1.8s ease-in-out infinite;
}
@keyframes admLegBreath {
0%,
100% {
opacity: 0.85;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.12);
}
}
@keyframes admLegPulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(0.92);
}
}
.adm-avail-table th {
position: relative;
}
.adm-today-bar {
position: absolute;
top: 0;
left: 50%;
width: 3px;
height: 100%;
background: var(--gold);
transform: translateX(-50%) scaleY(0);
transform-origin: top center;
animation: admTodayBar 540ms var(--ease-out-expo) 120ms forwards;
border-radius: 0 0 2px 2px;
}
@keyframes admTodayBar {
from {
transform: translateX(-50%) scaleY(0);
}
to {
transform: translateX(-50%) scaleY(1);
}
}
.adm-avail-cell {
transition:
background-color 180ms var(--ease-out-expo),
border-color 180ms var(--ease-out-expo);
}
.adm-avail-cell .avail-tag {
display: inline-block;
transition:
transform 180ms var(--ease-out-expo),
filter 180ms var(--ease-out-expo);
}
.adm-avail-cell:hover .avail-tag {
transform: scale(1.05);
filter: brightness(1.06);
}
.adm-avail-cell.is-inhouse .avail-tag.gold {
animation: admInHousePulse 2.4s ease-in-out infinite;
}
@keyframes admInHousePulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.78;
transform: scale(0.96);
}
}
.adm-avail-tip {
position: absolute;
z-index: 200;
transform: translate(-50%, -100%);
padding: 10px 14px;
background: var(--text-d);
color: var(--cream);
border-radius: 10px;
font-size: 12px;
font-weight: 500;
box-shadow: var(--sh-card);
opacity: 0;
pointer-events: none;
transition:
opacity 200ms var(--ease-out-expo),
transform 200ms var(--ease-out-expo);
min-width: 110px;
}
.adm-avail-tip.show {
opacity: 1;
transform: translate(-50%, calc(-100% - 10px));
}
.adm-avail-tip-name {
font-weight: 700;
font-size: 13px;
color: #fff;
}
.adm-avail-tip-src {
font-size: 11px;
color: var(--olive-20);
margin-top: 2px;
text-transform: capitalize;
}
.adm-avail-tip-arrow {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 10px;
height: 10px;
background: var(--text-d);
}
/* Tip box */
.adm-tip {
display: flex;
align-items: flex-start;
gap: 12px;
margin-top: 20px;
padding: 16px 18px;
background: var(--olive-3);
border-radius: var(--rs);
font-size: 13px;
color: var(--text-s);
}
.adm-tip-bulb {
width: 22px;
height: 22px;
flex-shrink: 0;
margin-top: 1px;
}
.adm-tip .adm-tip-bulb {
animation: admBulbFlicker 200ms ease-out 200ms 1;
}
@keyframes admBulbFlicker {
0%,
100% {
opacity: 1;
}
30% {
opacity: 0.5;
}
60% {
opacity: 1;
}
80% {
opacity: 0.75;
}
}
/* ── 9.6 — Add Booking ─────────────────────────────────────────── */
.adm-ab-info {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 24px;
padding: 16px 18px;
background: var(--olive-3);
border-radius: var(--rs);
border: 1px solid var(--olive-10);
}
.adm-ab-pencil {
width: 28px;
height: 28px;
flex-shrink: 0;
margin-top: 1px;
}
.adm-ab-pen-stroke {
stroke-dasharray: 110;
stroke-dashoffset: 110;
animation: admPenWrite 800ms var(--ease-out-expo) 100ms forwards;
}
@keyframes admPenWrite {
to {
stroke-dashoffset: 0;
}
}
.adm-ab-info-text {
flex: 1;
}
.adm-ab-select {
transition: border-color 220ms var(--ease-out-expo);
}
.adm-ab-select:focus {
border-color: var(--olive);
outline: none;
}
.adm-ab-select option {
animation: admOptFade 260ms var(--ease-out-expo) both;
}
.adm-ab-select option:nth-child(1) {
animation-delay: 0ms;
}
.adm-ab-select option:nth-child(2) {
animation-delay: 20ms;
}
.adm-ab-select option:nth-child(3) {
animation-delay: 40ms;
}
.adm-ab-select option:nth-child(4) {
animation-delay: 60ms;
}
.adm-ab-select option:nth-child(5) {
animation-delay: 80ms;
}
@keyframes admOptFade {
from {
opacity: 0;
transform: translateY(-2px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.adm-ab-dates {
position: relative;
}
.adm-ab-nights {
position: absolute;
top: -22px;
left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--olive);
color: #fff;
padding: 3px 12px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.4px;
opacity: 0;
pointer-events: none;
transition:
opacity 260ms var(--ease-out-expo),
transform 260ms var(--ease-out-expo);
white-space: nowrap;
}
.adm-ab-nights::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid var(--olive);
}
.adm-ab-nights.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.adm-ab-helper {
font-size: 11px;
color: var(--text-m);
margin-top: 4px;
transition: color 220ms var(--ease-out-expo);
}
.adm-ab-helper.is-warn {
color: var(--olive);
font-weight: 600;
}
.adm-ab-price-field {
position: relative;
}
.adm-ab-auto {
position: absolute;
top: 0;
right: 0;
font-size: 9px;
font-weight: 700;
padding: 2px 8px;
border-radius: 10px;
background: var(--gold);
color: #463300;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.adm-ab-auto.is-pulse {
animation: admAutoPulse 800ms var(--ease-out-expo);
}
@keyframes admAutoPulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.12);
}
100% {
transform: scale(1);
}
}
.adm-ab-price-wrap {
position: relative;
}
.adm-ab-price-ghost {
position: absolute;
inset: 0;
pointer-events: none;
display: flex;
align-items: center;
padding-left: 16px;
color: var(--olive);
font-weight: 600;
opacity: 0;
}
.adm-ab-price-ghost.is-out {
animation: admPriceGhost 320ms var(--ease-out-expo);
}
@keyframes admPriceGhost {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-6px) scale(0.9);
}
}
.adm-ab-result-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 18px;
border-radius: var(--rs);
font-size: 14px;
opacity: 0;
transform: translateY(-8px);
transition:
opacity 350ms var(--ease-out-expo),
transform 350ms var(--ease-out-expo);
}
.adm-ab-result-card.is-in {
opacity: 1;
transform: translateY(0);
}
.adm-ab-result-ok {
background: #f0fdf4;
border: 1px solid #bbf7d0;
color: #166534;
}
.adm-ab-result-bad {
background: #fef2f2;
border: 1px solid #fecaca;
color: #b91c1c;
}
.adm-ab-result-ic {
display: inline-flex;
flex-shrink: 0;
}
.adm-ab-result-ic svg {
width: 22px;
height: 22px;
}
.adm-ab-check.is-loading,
.adm-ab-confirm.is-loading {
pointer-events: none;
}
.adm-ab-confirm.is-success {
background: #22c55e !important;
}
/* Confetti canvas */
.adm-confetti {
position: absolute;
z-index: 240;
pointer-events: none;
}
/* ── 9.7 — All Bookings ─────────────────────────────────────────── */
.adm-bookings-table .adm-bk-row {
transition:
background-color 200ms var(--ease-out-expo),
transform 200ms var(--ease-out-expo);
}
.adm-bookings-table .adm-bk-row:hover:not(.adm-header) {
transform: translateX(2px);
background: var(--olive-3);
}
.adm-bk-status {
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
text-transform: capitalize;
position: relative;
}
.adm-bk-status::before {
content: "";
position: absolute;
left: 6px;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: 0.45;
}
.adm-bk-status-checked_in {
padding-left: 18px;
}
.adm-bk-status-checked_in::before {
animation: admStatusPulse 2s ease-in-out infinite;
}
@keyframes admStatusPulse {
0%,
100% {
opacity: 0.45;
transform: translateY(-50%) scale(1);
}
50% {
opacity: 1;
transform: translateY(-50%) scale(1.3);
}
}
.adm-bk-status-confirmed::before {
background: var(--olive);
}
.adm-bk-status-checked_out::before {
background: var(--text-m);
opacity: 0.6;
}
/* ── 9.8 — Users tab ─────────────────────────────────────────── */
.adm-uc {
transition:
transform 280ms var(--ease-out-expo),
box-shadow 280ms var(--ease-out-expo),
border-color 220ms var(--ease-out-expo);
}
.adm-uc:hover {
transform: translateY(-3px);
box-shadow: var(--sh-card);
border-color: var(--olive-20);
}
.adm-uc-av {
transition: transform 260ms var(--ease-out-back);
}
.adm-uc:hover .adm-uc-av {
transform: scale(1.06);
}
.adm-uc-badge {
display: inline-block;
margin-left: 6px;
padding: 2px 8px;
border-radius: 10px;
background: var(--gold-light);
color: #92710a;
font-size: 10px;
font-weight: 700;
}
/* ── 9.9 — Admin reveals (data-stagger) wired to .vis OR .is-in ── */
.adm-stat.reveal,
.adm-rm-card.reveal,
.adm-user-mini.reveal,
.adm-uc.reveal,
.adm-bk-row.reveal,
.adm-alert-booked.reveal,
.adm-section-title.reveal,
.adm-quick-actions.reveal,
.adm-tip.reveal,
.rm-manage-header.reveal,
.adm-avail-head.reveal,
.adm-ab-info.reveal,
.adm-addbooking .auth-field.reveal,
.adm-addbooking .form-grid-2.reveal,
.adm-addbooking .form-row-flex.reveal,
.adm-room-editor .reveal,
.adm-room-editor .rm-editor-section.reveal {
opacity: 0;
transform: translateY(12px);
transition:
opacity 460ms var(--ease-out-expo),
transform 460ms var(--ease-out-expo);
}
/* Availability rows:
— opacity-only stagger (transform on
is quirky). */
.adm-avail-row.reveal {
opacity: 0;
transition: opacity 360ms var(--ease-out-expo);
}
.adm-avail-row.reveal.vis,
.adm-avail-row.reveal.is-in {
opacity: 1;
}
.adm-stat.reveal.vis,
.adm-stat.reveal.is-in,
.adm-rm-card.reveal.vis,
.adm-rm-card.reveal.is-in,
.adm-user-mini.reveal.vis,
.adm-user-mini.reveal.is-in,
.adm-uc.reveal.vis,
.adm-uc.reveal.is-in,
.adm-bk-row.reveal.vis,
.adm-bk-row.reveal.is-in,
.adm-alert-booked.reveal.vis,
.adm-alert-booked.reveal.is-in,
.adm-section-title.reveal.vis,
.adm-section-title.reveal.is-in,
.adm-quick-actions.reveal.vis,
.adm-quick-actions.reveal.is-in,
.adm-tip.reveal.vis,
.adm-tip.reveal.is-in,
.rm-manage-header.reveal.vis,
.rm-manage-header.reveal.is-in,
.adm-avail-head.reveal.vis,
.adm-avail-head.reveal.is-in,
.adm-ab-info.reveal.vis,
.adm-ab-info.reveal.is-in,
.adm-addbooking .auth-field.reveal.vis,
.adm-addbooking .auth-field.reveal.is-in,
.adm-addbooking .form-grid-2.reveal.vis,
.adm-addbooking .form-grid-2.reveal.is-in,
.adm-addbooking .form-row-flex.reveal.vis,
.adm-addbooking .form-row-flex.reveal.is-in,
.adm-room-editor .reveal.vis,
.adm-room-editor .reveal.is-in,
.adm-room-editor .rm-editor-section.reveal.vis,
.adm-room-editor .rm-editor-section.reveal.is-in {
opacity: 1;
transform: translateY(0);
}
/* Reduced-motion overrides for §9 */
@media (prefers-reduced-motion: reduce) {
.adm-spinner-arc,
.adm-spinner-orbit {
animation: none;
}
.adm-stat-accent {
transform: scaleX(1);
transition: none;
}
.adm-stat.is-empty::before,
.adm-stat-dot,
.adm-alert-stripe,
.adm-cover-pulse,
.adm-rm-cover,
.adm-leg-dot.leg-booked,
.adm-leg-dot.leg-in,
.adm-avail-cell.is-inhouse .avail-tag.gold,
.adm-bk-status-checked_in::before {
animation: none;
}
.adm-stat:hover,
.adm-rm-card:hover,
.adm-user-mini:hover,
.adm-uc:hover,
.adm-bookings-table .adm-bk-row:hover,
.adm-qa-btn:hover {
transform: none;
}
.adm-rm-card:hover .rm-card-img-inner {
transform: none;
}
.adm-user-mini:hover .adm-user-mini-av {
transform: none;
}
.adm-uc:hover .adm-uc-av {
transform: none;
}
.adm-rm-add:hover .adm-rm-plus {
transform: none;
}
.adm-rm-edit:hover .adm-ic-pencil,
.adm-rm-del:hover .adm-ic-trash {
animation: none;
}
.adm-qa-btn::before {
display: none;
}
.adm-user-mini::before {
display: none;
}
.adm-um-chev {
opacity: 1;
transform: none;
}
.adm-tab-bar button.active .adm-tab-ic {
animation: none;
}
.adm-tab-indicator {
transition: none !important;
}
.adm-photos-grid .adm-rm-photo-add::before {
animation: none;
}
.adm-today-bar {
animation: none;
transform: translateX(-50%) scaleY(1);
}
.adm-ab-pen-stroke {
animation: none;
stroke-dashoffset: 0;
}
.adm-ab-nights.show {
transform: translateX(-50%);
}
.adm-tip .adm-tip-bulb {
animation: none;
}
.adm-confetti {
display: none !important;
}
.adm-content-anim,
.adm-content-anim.is-in {
transform: none;
transition: opacity 200ms ease;
}
.adm-stat.reveal,
.adm-rm-card.reveal,
.adm-user-mini.reveal,
.adm-uc.reveal,
.adm-bk-row.reveal,
.adm-alert-booked.reveal,
.adm-section-title.reveal,
.adm-quick-actions.reveal,
.adm-tip.reveal,
.rm-manage-header.reveal,
.adm-avail-head.reveal,
.adm-ab-info.reveal,
.adm-addbooking .auth-field.reveal,
.adm-addbooking .form-grid-2.reveal,
.adm-addbooking .form-row-flex.reveal,
.adm-room-editor .reveal,
.adm-room-editor .rm-editor-section.reveal {
transform: none;
transition: opacity 180ms ease;
}
}
/* === END ADMIN (§9) — Phase 8 === */
/* ════════════════════════════════════════════════════════════════════
CHECKOUT (§10) — Phase 9
Cinematic polish on top of the existing 4-step modal. Only animates
transform / opacity / filter (§-1 rule 4). All motion respects
prefers-reduced-motion via the global safety net + per-rule overrides.
════════════════════════════════════════════════════════════════════ */
/* --- Backdrop: deep blurred olive overlay (§10) --- */
.co-modal {
background: rgba(31, 42, 26, 0.55);
backdrop-filter: blur(16px) saturate(0.9);
-webkit-backdrop-filter: blur(16px) saturate(0.9);
transition: opacity 200ms var(--ease-out-expo);
}
/* --- Modal entrance: backdrop fade 200ms, sheet slide+scale 400ms --- */
.co-modal .co-sheet {
transform: translateY(40px) scale(0.98);
opacity: 0;
transition:
transform 400ms var(--ease-out-expo),
opacity 280ms var(--ease-out-expo);
}
.co-modal.show .co-sheet {
transform: translateY(0) scale(1);
opacity: 1;
}
/* --- Step transitions: content slides left out / in from right --- */
.co-sheet-body {
position: relative;
}
.co-step-anim {
opacity: 0;
transform: translateX(24px);
animation: coStepEnter 320ms var(--ease-out-expo) forwards;
}
.co-step-anim.co-step-back {
transform: translateX(-24px);
animation-name: coStepEnterBack;
}
@keyframes coStepEnter {
0% {
opacity: 0;
transform: translateX(24px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes coStepEnterBack {
0% {
opacity: 0;
transform: translateX(-24px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* --- Step indicator polish: olive-fill bar between dots (§10) --- */
.co-progress {
gap: 0;
position: relative;
}
.co-prog-step {
transition: opacity 320ms var(--ease-out-expo);
}
.co-prog-step.active .co-prog-dot,
.co-prog-step.done .co-prog-dot {
transform: scale(1);
transition:
transform 280ms var(--ease-out-back),
background-color 280ms var(--ease-out-expo);
}
.co-prog-step .co-prog-dot {
transform: scale(0.94);
}
.co-prog-line {
position: relative;
overflow: hidden;
margin: 0 8px;
background: var(--brd);
}
.co-prog-line::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, var(--olive), #6b8a3e);
transform: scaleX(0);
transform-origin: left center;
transition: transform 400ms var(--ease-out-expo);
}
.co-prog-line.co-prog-line-fill::after {
transform: scaleX(1);
}
/* --- Hold timer ring (§10) --- */
.co-hold {
position: relative;
gap: 10px;
}
.co-hold-ring-wrap {
position: relative;
width: 22px;
height: 22px;
flex-shrink: 0;
display: inline-grid;
place-items: center;
}
.co-hold-ring {
position: absolute;
inset: 0;
width: 22px;
height: 22px;
transform: rotate(-90deg);
pointer-events: none;
}
.co-hold-ring-bg {
fill: none;
stroke: rgba(146, 64, 14, 0.18);
stroke-width: 2.5;
}
.co-hold-ring-fill {
fill: none;
stroke: #92400e;
stroke-width: 2.5;
stroke-linecap: round;
stroke-dasharray: 56.5;
stroke-dashoffset: 0;
transition: stroke 200ms ease;
}
.co-hold.co-hold-expired .co-hold-ring-fill {
stroke: #991b1b;
}
.co-hold.co-hold-expired .co-hold-ring-bg {
stroke: rgba(153, 27, 27, 0.18);
}
.co-hold-ic-svg {
width: 12px;
height: 12px;
color: #92400e;
position: relative;
z-index: 1;
}
.co-hold.co-hold-expired .co-hold-ic-svg {
color: #991b1b;
}
/* --- Price breakdown rows (Step 1) reveal stagger --- */
.co-price-row.reveal {
opacity: 0;
transform: translateY(8px);
transition:
opacity 320ms var(--ease-out-expo),
transform 320ms var(--ease-out-expo);
}
.co-price-row.reveal.is-in {
opacity: 1;
transform: none;
}
/* --- Payment method card (Step 2) selected state polish (§10) --- */
.co-method {
transition:
transform 220ms var(--ease-out-expo),
border-color 220ms ease,
background-color 220ms ease,
opacity 220ms ease,
box-shadow 280ms var(--ease-out-expo);
}
.co-methods.has-selected .co-method:not(.selected) {
opacity: 0.7;
}
.co-method.selected {
transform: translateY(-2px);
}
.co-method-check {
position: absolute;
top: 10px;
right: 12px;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--olive);
color: #fff;
display: grid;
place-items: center;
opacity: 0;
transform: scale(0.6);
transition:
opacity 220ms var(--ease-out-expo),
transform 280ms var(--ease-out-back);
pointer-events: none;
}
.co-method {
position: relative;
}
.co-method.selected .co-method-check {
opacity: 1;
transform: scale(1);
}
.co-method-check svg {
width: 12px;
height: 12px;
}
/* --- Trust strip icons swap from emoji to line-art SVG --- */
.co-trust-item .co-trust-ic {
width: 14px;
height: 14px;
color: var(--olive);
flex-shrink: 0;
}
/* --- Step 4 SUCCESS — animated checkmark + radial burst + typewriter --- */
.co-success {
position: relative;
overflow: hidden;
}
.co-success-burst {
position: absolute;
top: 40px;
left: 50%;
width: 320px;
height: 320px;
transform: translate(-50%, -50%) scale(0.6);
pointer-events: none;
background: radial-gradient(
circle,
rgba(200, 169, 81, 0.32) 0%,
rgba(200, 169, 81, 0) 60%
);
opacity: 0;
z-index: 0;
animation: coBurstIn 600ms var(--ease-out-expo) forwards;
}
@keyframes coBurstIn {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.6);
}
60% {
opacity: 1;
}
100% {
opacity: 0.65;
transform: translate(-50%, -50%) scale(1);
}
}
.co-success-ic {
position: relative;
z-index: 1;
background: linear-gradient(135deg, var(--olive), #6b8a3e);
font-size: 0;
/* override the old emoji animation */
animation: coSuccessScale 540ms var(--ease-out-back) both;
box-shadow:
0 12px 32px rgba(74, 93, 35, 0.32),
0 0 0 8px rgba(200, 169, 81, 0.16);
}
@keyframes coSuccessScale {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
.co-success-ic svg {
width: 38px;
height: 38px;
color: #fff;
}
.co-success-ic-path {
stroke: currentColor;
stroke-width: 3.4;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
stroke-dasharray: 32;
stroke-dashoffset: 32;
animation: coSuccessDraw 420ms var(--ease-out-expo) 320ms forwards;
}
@keyframes coSuccessDraw {
to {
stroke-dashoffset: 0;
}
}
/* Booking reference typewriter (character-by-character, 60ms / char).
The JS injects spans with .co-ref-char; CSS handles fade-in. */
.co-success-ref {
position: relative;
z-index: 1;
}
.co-ref-char {
display: inline-block;
opacity: 0;
transform: translateY(2px);
transition:
opacity 180ms var(--ease-out-expo),
transform 180ms var(--ease-out-expo);
}
.co-ref-char.is-in {
opacity: 1;
transform: none;
}
/* Keep the rest of success layers above the burst */
.co-success-title,
.co-success-sub,
.co-success-card,
.co-success-next,
.co-success > .co-next {
position: relative;
z-index: 1;
}
/* --- Method icon polish: subtle scale on selection --- */
.co-method-icon {
transition: transform 280ms var(--ease-out-back);
}
.co-method.selected .co-method-icon {
transform: scale(1.04);
}
/* --- Reduced-motion overrides for checkout (§10) --- */
@media (prefers-reduced-motion: reduce) {
.co-modal,
.co-modal .co-sheet,
.co-modal.show .co-sheet {
transition: opacity 150ms ease !important;
}
.co-modal .co-sheet {
transform: none !important;
}
.co-step-anim {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.co-prog-line::after {
transition: none !important;
}
.co-success-burst {
animation: none !important;
opacity: 0 !important;
}
.co-success-ic {
animation: none !important;
transform: none !important;
}
.co-success-ic-path {
animation: none !important;
stroke-dashoffset: 0 !important;
}
.co-ref-char {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.co-price-row.reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.co-method,
.co-method.selected,
.co-method-icon,
.co-method.selected .co-method-icon {
transform: none !important;
transition: opacity 150ms ease !important;
}
.co-method-check {
transition: opacity 150ms ease !important;
transform: none !important;
}
.co-hold-ring-fill {
transition: none !important;
}
}
/* === END CHECKOUT (§10) — Phase 9 === */
/* ═══════════════════════════════════════════════════════════════════
§11 — MICRO-INTERACTIONS SWEEP (Phase 10)
───────────────────────────────────────────────────────────────────
Site-wide sweep filling gaps in interactive state coverage. Earlier
phases (4-9) polished specific pages; Phase 10 ensures every button,
input, toggle, toast, tooltip and modal close has its complete
base micro-interaction per Brief §11.
§-1 rules: animate only transform/opacity/filter, palette sacred,
no setInterval, no permanent will-change, no innerHTML += loops.
Sections:
§11.1 Buttons (default / primary / secondary / danger / loading)
§11.2 Inputs (focus / .is-invalid / .is-valid)
§11.3 Toggles (.toggle.on + ripple)
§11.4 Toasts (.toast.is-success/warn/error, dismissible)
§11.5 Tooltips (.kw-tooltip)
§11.6 Modals (.kw-modal-close × rotates 90° on hover)
Reduced-motion overrides
═══════════════════════════════════════════════════════════════════ */
/* ─── §11.1 BUTTONS — default press feedback ─────────────────────────
Common interactive button families get a subtle scale + translateY
on :active, with a 200ms spring release. Applied via :active so the
release is automatic — only the press costs a transition. We keep
each button's existing hover behaviour untouched and merely add
the press state — no specificity wars. */
.ncta:active:not(:disabled),
.cta-btn:active:not(:disabled),
.bk-go:active:not(:disabled),
.island-cta-btn:active:not(:disabled),
.auth-submit:active:not(:disabled),
.lout:active:not(:disabled),
.rc-btn:active:not(:disabled),
.chat-send-btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled) {
transform: translateY(1px) scale(0.98);
transition: transform 80ms var(--ease-out-expo);
}
.ncta,
.cta-btn,
.bk-go,
.island-cta-btn,
.auth-submit,
.lout,
.rc-btn,
.chat-send-btn,
.btn-primary,
.btn-secondary,
.btn-danger {
/* Spring release after :active is released. Existing per-button
transitions remain authoritative for background/color; this only
governs the transform release. */
transition:
transform 200ms var(--spring),
background-color var(--t-med) var(--ease-out-expo),
border-color var(--t-med) var(--ease-out-expo),
box-shadow var(--t-med) var(--ease-out-expo);
}
/* ─── §11.1 PRIMARY (olive) — gold edge-glow on hover ────────────────
A pseudo-element draws a soft gold ring just outside the button.
We only fade its opacity — composite-cheap. Phase 4 already set
.hero-acts .ncta::after; this generalizes to all primary CTAs that
don't already define ::after. The :not() selectors keep us from
clobbering existing ::after usage. */
.ncta:not(.hero-acts .ncta):not(.is-loading),
.cta-btn:not(.is-loading),
.bk-go:not(.is-loading):not(:disabled),
.island-cta-btn:not(.is-loading),
.auth-submit:not(.is-loading):not(:disabled) {
position: relative;
}
.ncta:not(.hero-acts .ncta):not(.is-loading)::before,
.cta-btn:not(.is-loading)::before,
.bk-go:not(.is-loading):not(:disabled)::before,
.island-cta-btn:not(.is-loading)::before {
content: "";
position: absolute;
inset: -3px;
border-radius: inherit;
background: transparent;
box-shadow:
0 0 0 2px rgba(200, 169, 81, 0.45),
0 0 18px 2px rgba(200, 169, 81, 0.28);
opacity: 0;
pointer-events: none;
transition: opacity var(--t-med) var(--ease-out-expo);
}
.ncta:not(.hero-acts .ncta):not(.is-loading):hover::before,
.cta-btn:not(.is-loading):hover::before,
.bk-go:not(.is-loading):not(:disabled):hover::before,
.island-cta-btn:not(.is-loading):hover::before {
opacity: 1;
}
.ncta:not(.hero-acts .ncta):not(.is-loading):active::before,
.cta-btn:not(.is-loading):active::before,
.bk-go:not(.is-loading):not(:disabled):active::before,
.island-cta-btn:not(.is-loading):active::before {
opacity: 1;
box-shadow:
0 0 0 3px rgba(200, 169, 81, 0.6),
0 0 24px 4px rgba(200, 169, 81, 0.4);
}
/* ─── §11.1 SECONDARY (outlined) — olive-3 hover fill ────────────────
For outlined buttons. The fade is into the brand pale-olive token
per §1. Border-color deepens to olive-20 for definition. */
.btn-secondary,
.bk-cancel,
.sb-outline,
button.outline-olive {
background: transparent;
border: 1.5px solid var(--olive-20);
color: var(--olive);
transition:
background-color var(--t-med) var(--ease-out-expo),
border-color var(--t-med) var(--ease-out-expo),
transform 200ms var(--spring);
}
.btn-secondary:hover:not(:disabled),
.bk-cancel:hover:not(:disabled),
.sb-outline:hover:not(:disabled),
button.outline-olive:hover:not(:disabled) {
background: var(--olive-3);
border-color: var(--olive);
}
/* ─── §11.1 DANGER (red) — soft red tint + icon shake ────────────────
.lout already exists. Generalizes to .btn-danger / .danger-btn.
On hover, the icon (if present via .danger-icon) trembles briefly. */
.btn-danger,
.danger-btn {
background: transparent;
border: 1.5px solid #fca5a5;
color: #dc2626;
transition:
background-color var(--t-med) var(--ease-out-expo),
border-color var(--t-med) var(--ease-out-expo),
transform 200ms var(--spring);
}
.btn-danger:hover:not(:disabled),
.danger-btn:hover:not(:disabled),
.lout:hover:not(:disabled) {
background: #fef2f2;
border-color: #f87171;
}
.lout .danger-icon,
.btn-danger .danger-icon,
.danger-btn .danger-icon {
display: inline-block;
transition: transform 200ms var(--ease-out-back);
}
.lout:hover .danger-icon,
.btn-danger:hover .danger-icon,
.danger-btn:hover .danger-icon {
animation: kwDangerShake 360ms var(--ease-out-expo) 1;
}
@keyframes kwDangerShake {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-2px) rotate(-3deg);
}
40% {
transform: translateX(2px) rotate(3deg);
}
60% {
transform: translateX(-2px) rotate(-2deg);
}
80% {
transform: translateX(2px) rotate(2deg);
}
}
/* ─── §11.1 SHARED LOADING / SUCCESS UTILITY ─────────────────────────
Reusable .is-loading and .is-success states for any olive CTA.
.auth-submit (Phase 5) and .bk-go/.ncta (Phase 6) already implement
their own loaders; this provides a fallback for ALL other buttons
so callers can simply add `.is-loading` for instant 3-dot pulse,
then swap to `.is-success` for the check flash. */
button.is-loading.kw-loadable,
.cta-btn.is-loading,
.island-cta-btn.is-loading,
.btn-primary.is-loading,
.btn-secondary.is-loading,
.btn-danger.is-loading {
color: transparent !important;
pointer-events: none;
position: relative;
}
button.is-loading.kw-loadable::after,
.cta-btn.is-loading::after,
.island-cta-btn.is-loading::after,
.btn-primary.is-loading::after,
.btn-secondary.is-loading::after,
.btn-danger.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 56px;
height: 12px;
transform: translate(-50%, -50%);
background-image:
radial-gradient(circle 4px at center, currentColor 60%, transparent 65%),
radial-gradient(circle 4px at center, currentColor 60%, transparent 65%),
radial-gradient(circle 4px at center, currentColor 60%, transparent 65%);
background-repeat: no-repeat, no-repeat, no-repeat;
background-size:
12px 12px,
12px 12px,
12px 12px;
background-position:
0 0,
22px 0,
44px 0;
color: #fff;
animation: bkDotsWave 1.2s var(--ease-in-out-quart) infinite;
}
button.is-success.kw-loadable,
.cta-btn.is-success,
.island-cta-btn.is-success,
.btn-primary.is-success,
.btn-secondary.is-success,
.btn-danger.is-success {
position: relative;
color: transparent !important;
}
button.is-success.kw-loadable::after,
.cta-btn.is-success::after,
.island-cta-btn.is-success::after,
.btn-primary.is-success::after,
.btn-secondary.is-success::after,
.btn-danger.is-success::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 12px;
transform: translate(-50%, -50%) rotate(-45deg);
border-left: 2.5px solid currentColor;
border-bottom: 2.5px solid currentColor;
color: #fff;
opacity: 0;
animation: kwCheckFlash 600ms var(--ease-out-back) forwards;
}
@keyframes kwCheckFlash {
0% {
opacity: 0;
transform: translate(-50%, -50%) rotate(-45deg) scale(0.4);
}
60% {
opacity: 1;
transform: translate(-50%, -50%) rotate(-45deg) scale(1.08);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) rotate(-45deg) scale(1);
}
}
/* ─── §11.2 INPUTS — site-wide focus ring (olive + soft halo) ────────
Generalizes the Phase 5 auth field focus to ALL inputs on the site.
Per-page overrides (auth, checkout, chat) remain authoritative
because their selectors are more specific. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
[type="color"]
):focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--olive);
box-shadow: 0 0 0 4px rgba(74, 93, 35, 0.08);
transition:
border-color var(--t-med) var(--ease-out-expo),
box-shadow var(--t-med) var(--ease-out-expo);
}
/* ─── §11.2 INPUTS — .is-invalid (red border + shake + msg slide) ────
The wrapping form-row exposes a sibling `.kw-input-msg` slot that
slides down when the field becomes invalid. The shake is 280ms.
Use kwAddInputValidation(el, false, msg) from JS to apply. */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
border-color: #dc2626 !important;
box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1) !important;
animation: kwInputShake 280ms var(--ease-out-expo) 1;
}
@keyframes kwInputShake {
0%,
100% {
transform: translateX(0);
}
15% {
transform: translateX(-5px);
}
30% {
transform: translateX(4px);
}
45% {
transform: translateX(-3px);
}
60% {
transform: translateX(2px);
}
75% {
transform: translateX(-1px);
}
}
.kw-input-msg {
display: block;
max-height: 0;
opacity: 0;
overflow: hidden;
color: #dc2626;
font-size: 12px;
margin-top: 0;
transform: translateY(-4px);
transition:
opacity var(--t-med) var(--ease-out-expo),
transform var(--t-med) var(--ease-out-expo);
}
.kw-input-msg.is-visible {
max-height: 60px;
opacity: 1;
margin-top: 6px;
transform: translateY(0);
}
/* ─── §11.2 INPUTS — .is-valid (green check at right edge) ───────────
Wrap field in `.kw-input-wrap` so the check can be absolutely
positioned. Falls back gracefully if no wrap is provided. */
.kw-input-wrap {
position: relative;
display: block;
}
.kw-input-wrap::after {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 14px;
height: 9px;
transform: translateY(-50%) rotate(-45deg) scale(0.5);
border-left: 2.5px solid #16a34a;
border-bottom: 2.5px solid #16a34a;
opacity: 0;
pointer-events: none;
transition:
opacity var(--t-med) var(--ease-out-back),
transform var(--t-med) var(--ease-out-back);
}
.kw-input-wrap.is-valid::after {
opacity: 1;
transform: translateY(-50%) rotate(-45deg) scale(1);
}
/* ─── §11.3 TOGGLE / SWITCH — generic .toggle.on + olive ripple ──────
Phase 7 added .pref-toggle ripple. Phase 10 adds a generic
.toggle / .toggle-knob pair so any future toggle works site-wide
without bespoke CSS. */
.toggle {
position: relative;
display: inline-block;
width: 44px;
height: 24px;
border-radius: 999px;
background: var(--brd);
border: none;
cursor: pointer;
padding: 0;
transition: background-color 200ms var(--ease-out-expo);
overflow: visible;
}
.toggle-knob {
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
transform: translateX(0);
transition: transform 200ms var(--ease-out-back);
pointer-events: none;
}
.toggle.on {
background: var(--olive);
}
.toggle.on .toggle-knob {
transform: translateX(20px);
}
.toggle::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--olive);
opacity: 0;
transform: scale(0.6);
pointer-events: none;
}
.toggle.just-on::after {
animation: kwToggleRipple 600ms var(--ease-out-expo) 1;
}
@keyframes kwToggleRipple {
0% {
opacity: 0.5;
transform: scale(0.6);
}
100% {
opacity: 0;
transform: scale(1.4);
}
}
/* ─── §11.4 TOASTS — type variants + slide-up + dismiss ──────────────
The existing `.toast` element is used by `flash()`. Phase 10 adds
.is-success / .is-warn / .is-error variants with type icons and
a slide-up entry / fade-down exit. Multiple toasts stack via the
.kw-toast-stack container if present. */
.toast.is-success,
.toast.is-warn,
.toast.is-error {
display: inline-flex;
align-items: center;
gap: 10px;
padding-left: 44px;
position: fixed;
}
.toast.is-success::after,
.toast.is-warn::after,
.toast.is-error::after {
content: "";
position: absolute;
left: 14px;
top: 50%;
width: 22px;
height: 22px;
border-radius: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #fff;
font-size: 13px;
line-height: 22px;
text-align: center;
background-position: center;
background-repeat: no-repeat;
}
.toast.is-success::after {
background-color: #16a34a;
/* white check via inline SVG */
background-image: url("data:image/svg+xml;utf8,");
}
.toast.is-warn::after {
background-color: var(--gold);
background-image: url("data:image/svg+xml;utf8,");
}
.toast.is-error::after {
background-color: #dc2626;
background-image: url("data:image/svg+xml;utf8,");
}
.toast.is-dismissing {
animation: kwToastDismiss 260ms var(--ease-out-expo) forwards;
}
@keyframes kwToastDismiss {
0% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(12px);
}
}
/* Toast stack — bottom-anchored, gap between siblings. Each toast
uses position:fixed already; the stack offsets translateY in JS
if needed (or via :nth-last-of-type below for static stacks). */
.kw-toast-stack {
position: fixed;
left: 50%;
bottom: 28px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
gap: 8px;
z-index: 400;
pointer-events: none;
}
.kw-toast-stack > .toast {
position: relative;
left: auto;
bottom: auto;
transform: none;
pointer-events: auto;
}
/* ─── §11.5 TOOLTIPS — .kw-tooltip with arrow ────────────────────────
Pure CSS pattern. A `[data-tooltip]` element shows a tooltip on
hover/focus with text from its data attribute. Triangle arrow via
::after. We use translate + opacity for the transition. */
[data-tooltip] {
position: relative;
}
[data-tooltip]::before,
[data-tooltip]::after {
position: absolute;
pointer-events: none;
opacity: 0;
transition:
opacity 200ms var(--ease-out-expo),
transform 200ms var(--ease-out-expo);
z-index: 500;
}
[data-tooltip]::before {
content: attr(data-tooltip);
left: 50%;
bottom: calc(100% + 10px);
transform: translateX(-50%) translateY(4px);
background: var(--text-d);
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
box-shadow: var(--sh-card);
max-width: 240px;
}
[data-tooltip]::after {
content: "";
left: 50%;
bottom: calc(100% + 4px);
transform: translateX(-50%) translateY(4px);
border: 6px solid transparent;
border-top-color: var(--text-d);
width: 0;
height: 0;
}
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
opacity: 1;
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
transform: translateX(-50%) translateY(0);
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
transform: translateX(-50%) translateY(0);
}
/* JS-mounted floating tooltip for kwShowTooltip() */
.kw-tooltip {
position: absolute;
background: var(--text-d);
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
box-shadow: var(--sh-card);
z-index: 500;
opacity: 0;
transform: translateY(4px);
transition:
opacity 200ms var(--ease-out-expo),
transform 200ms var(--ease-out-expo);
pointer-events: none;
}
.kw-tooltip.is-in {
opacity: 1;
transform: translateY(0);
}
.kw-tooltip::after {
content: "";
position: absolute;
left: 50%;
bottom: -6px;
transform: translateX(-50%);
border: 6px solid transparent;
border-top-color: var(--text-d);
width: 0;
height: 0;
}
/* ─── §11.6 MODAL CLOSE — × rotates 90° on hover ─────────────────────
Common modal close button family. We piggyback on existing class
names (.cin-close, .lb-close are already styled with hover bg).
The new .kw-modal-close class gives a clean shared pattern. */
.kw-modal-close,
.cin-close,
.lb-close {
transition:
transform 240ms var(--ease-out-back),
background-color 200ms var(--ease-out-expo);
}
.kw-modal-close:hover,
.cin-close:hover,
.lb-close:hover {
transform: rotate(90deg);
}
.lb-close:hover {
/* Preserve existing scale(1.1) from the lightbox close. */
transform: rotate(90deg) scale(1.1);
}
/* ─── §11 — Reduced-motion overrides ─────────────────────────────────
All sweep additions revert to no-motion / opacity-only transitions
under prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
.ncta:active:not(:disabled),
.cta-btn:active:not(:disabled),
.bk-go:active:not(:disabled),
.island-cta-btn:active:not(:disabled),
.auth-submit:active:not(:disabled),
.lout:active:not(:disabled),
.rc-btn:active:not(:disabled),
.chat-send-btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled) {
transform: none !important;
transition: none !important;
}
.ncta::before,
.cta-btn::before,
.bk-go::before,
.island-cta-btn::before {
transition: opacity 150ms ease !important;
}
.lout:hover .danger-icon,
.btn-danger:hover .danger-icon,
.danger-btn:hover .danger-icon {
animation: none !important;
}
button.is-loading.kw-loadable::after,
.cta-btn.is-loading::after,
.island-cta-btn.is-loading::after,
.btn-primary.is-loading::after,
.btn-secondary.is-loading::after,
.btn-danger.is-loading::after {
animation: none !important;
opacity: 0.8 !important;
}
button.is-success.kw-loadable::after,
.cta-btn.is-success::after,
.island-cta-btn.is-success::after,
.btn-primary.is-success::after,
.btn-secondary.is-success::after,
.btn-danger.is-success::after {
animation: none !important;
opacity: 1 !important;
transform: translate(-50%, -50%) rotate(-45deg) !important;
}
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
animation: none !important;
}
.kw-input-msg {
transition: opacity 150ms ease !important;
transform: none !important;
}
.kw-input-wrap::after {
transition: opacity 150ms ease !important;
transform: translateY(-50%) rotate(-45deg) !important;
}
.toggle-knob {
transition: none !important;
}
.toggle.just-on::after {
animation: none !important;
opacity: 0 !important;
}
.toast.is-dismissing {
animation: none !important;
opacity: 0 !important;
}
[data-tooltip]::before,
[data-tooltip]::after {
transition: opacity 150ms ease !important;
transform: translateX(-50%) !important;
}
.kw-tooltip {
transition: opacity 150ms ease !important;
transform: none !important;
}
.kw-modal-close,
.cin-close,
.lb-close {
transition: background-color 150ms ease !important;
}
.kw-modal-close:hover,
.cin-close:hover,
.lb-close:hover {
transform: none !important;
}
}
/* === END §11 MICRO-INTERACTIONS SWEEP (Phase 10) === */
/* ═══════════════════════════════════════════════════════════════════
=== GUEST REVIEWS — submit lifecycle (write/update/delete) ===
Polish layer on top of the existing .write-rev-* + .rev-card-guest
markup. Adds: optimistic card entrance, "You" pill, edit/delete
affordances, 3-dot loading pulse, success check draw-in, error shake.
═══════════════════════════════════════════════════════════════════ */
@keyframes revCardIn {
from {
opacity: 0;
transform: translateY(12px) scale(0.96);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes revCardOut {
from {
opacity: 1;
transform: none;
}
to {
opacity: 0;
transform: translateY(-6px) scale(0.98);
}
}
.rev-card-in {
animation: revCardIn 360ms var(--ease-out-back) both;
}
.rev-card-out {
animation: revCardOut 240ms var(--ease-in-quart) both;
}
.rev-card-mine {
box-shadow:
0 0 0 1px rgba(74, 93, 35, 0.18) inset,
var(--sh-card);
border-color: rgba(74, 93, 35, 0.18);
position: relative;
}
.rev-card-mine::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 56px;
height: 56px;
background: radial-gradient(
circle at top right,
rgba(200, 169, 81, 0.18),
transparent 70%
);
pointer-events: none;
border-top-right-radius: inherit;
}
.rev-mine-pill {
display: inline-block;
margin-left: 6px;
padding: 1px 8px;
border-radius: 100px;
background: var(--olive-3);
color: var(--olive);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
vertical-align: middle;
border: 1px solid rgba(74, 93, 35, 0.15);
}
.write-rev-login-icon {
color: var(--gold);
flex-shrink: 0;
}
.write-rev-card.is-editing::before {
background: linear-gradient(90deg, var(--gold), var(--olive), var(--gold));
background-size: 200% 100%;
}
.write-rev-actions {
display: flex;
align-items: center;
gap: 10px;
}
.write-rev-delete {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: 1.5px solid rgba(220, 38, 38, 0.22);
color: #b91c1c;
padding: 10px 16px;
border-radius: var(--rs);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition:
background 180ms var(--ease-out-expo),
color 180ms var(--ease-out-expo),
border-color 180ms var(--ease-out-expo);
}
.write-rev-delete:hover {
background: #fef2f2;
color: #991b1b;
border-color: rgba(220, 38, 38, 0.45);
}
.write-rev-delete:focus-visible {
outline: 2px solid #dc2626;
outline-offset: 2px;
}
.write-rev-delete svg {
display: block;
}
.write-rev-btn {
position: relative;
min-width: 140px;
overflow: hidden;
}
.write-rev-btn-label {
display: inline-block;
transition:
opacity 160ms var(--ease-out-expo),
transform 160ms var(--ease-out-expo);
}
.write-rev-btn.is-loading .write-rev-btn-label {
opacity: 0;
transform: translateY(4px);
}
.write-rev-btn.is-success .write-rev-btn-label {
opacity: 0;
}
.write-rev-btn.is-loading::after {
content: "";
position: absolute;
inset: 0;
display: block;
background:
radial-gradient(circle, #fff 0 3px, transparent 3.5px) 50% 50% / 6px 6px
no-repeat,
radial-gradient(circle, #fff 0 3px, transparent 3.5px) calc(50% - 14px)
50% / 6px 6px no-repeat,
radial-gradient(circle, #fff 0 3px, transparent 3.5px) calc(50% + 14px)
50% / 6px 6px no-repeat;
opacity: 0.95;
animation: writeRevDots 1.2s ease-in-out infinite;
}
@keyframes writeRevDots {
0%,
100% {
background-position-y: 50%, 50%, 50%;
}
20% {
background-position:
calc(50% - 14px) 40%,
50% 60%,
calc(50% + 14px) 60%;
}
40% {
background-position:
calc(50% - 14px) 60%,
50% 40%,
calc(50% + 14px) 60%;
}
60% {
background-position:
calc(50% - 14px) 60%,
50% 60%,
calc(50% + 14px) 40%;
}
}
.write-rev-btn.is-success {
background: var(--olive);
animation: writeRevGoldPulse 700ms var(--ease-out-expo) both;
}
.write-rev-btn.is-success::after {
content: "";
position: absolute;
inset: 0;
background: no-repeat center / 18px 18px;
background-image: url("data:image/svg+xml;utf8,");
animation: writeRevCheckIn 360ms var(--ease-out-back) both;
}
@keyframes writeRevCheckIn {
from {
opacity: 0;
transform: scale(0.6);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes writeRevGoldPulse {
0% {
box-shadow:
0 0 0 0 rgba(200, 169, 81, 0),
0 8px 24px -6px rgba(74, 93, 35, 0.35);
}
40% {
box-shadow:
0 0 0 14px rgba(200, 169, 81, 0.35),
0 8px 24px -6px rgba(74, 93, 35, 0.45);
}
100% {
box-shadow:
0 0 0 22px rgba(200, 169, 81, 0),
0 8px 24px -6px rgba(74, 93, 35, 0.45);
}
}
.write-rev-btn.is-error {
animation: writeRevErrorFlash 600ms var(--ease-out-expo) both;
}
@keyframes writeRevErrorFlash {
0%,
100% {
background: var(--olive);
}
20%,
60% {
background: #b91c1c;
}
}
@keyframes writeRevShake {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-4px);
}
40% {
transform: translateX(4px);
}
60% {
transform: translateX(-3px);
}
80% {
transform: translateX(3px);
}
}
.write-rev-shake {
animation: writeRevShake 320ms var(--ease-out-expo) both;
}
.write-rev-success-check {
display: flex;
justify-content: center;
margin-bottom: 10px;
}
.write-rev-success-ring {
stroke-dasharray: 151;
stroke-dashoffset: 151;
animation: writeRevRingDraw 520ms var(--ease-out-expo) 120ms forwards;
}
.write-rev-success-tick {
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: writeRevTickDraw 320ms var(--ease-out-expo) 480ms forwards;
}
@keyframes writeRevRingDraw {
to {
stroke-dashoffset: 0;
}
}
@keyframes writeRevTickDraw {
to {
stroke-dashoffset: 0;
}
}
.write-rev-success-actions {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 18px;
flex-wrap: wrap;
}
.write-rev-success-edit,
.write-rev-success-delete {
padding: 9px 18px;
border-radius: var(--rs);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition:
background 180ms var(--ease-out-expo),
color 180ms var(--ease-out-expo),
border-color 180ms var(--ease-out-expo),
transform 180ms var(--ease-out-expo);
}
.write-rev-success-edit {
background: var(--olive-3);
color: var(--olive);
border: 1.5px solid rgba(74, 93, 35, 0.18);
}
.write-rev-success-edit:hover {
background: rgba(74, 93, 35, 0.12);
transform: translateY(-1px);
}
.write-rev-success-delete {
background: none;
color: #b91c1c;
border: 1.5px solid rgba(220, 38, 38, 0.22);
}
.write-rev-success-delete:hover {
background: #fef2f2;
border-color: rgba(220, 38, 38, 0.4);
}
.write-rev-success-edit:focus-visible {
outline: 2px solid var(--olive);
outline-offset: 2px;
}
.write-rev-success-delete:focus-visible {
outline: 2px solid #dc2626;
outline-offset: 2px;
}
.wr-star:focus-visible {
outline: 2px solid var(--olive);
outline-offset: 4px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
.rev-card-in,
.rev-card-out,
.write-rev-shake,
.write-rev-btn.is-success,
.write-rev-btn.is-error,
.write-rev-btn.is-loading::after,
.write-rev-btn.is-success::after {
animation: none !important;
}
.write-rev-btn.is-loading::after {
display: none;
}
.write-rev-success-ring,
.write-rev-success-tick {
animation: none !important;
stroke-dashoffset: 0;
}
}
/* === END GUEST REVIEWS — submit lifecycle === */
/* ═══════════════════════════════════════════════════════════════════
=== SVG PALMS — Replaces canvas palms (§4 rev2) ===
See _kwPalmSvg() in script.js. The legacy .magic__palms canvas rules
above this block are harmless dead code (the canvases are no longer
rendered). Removing them is a future cleanup; not done here to keep
the diff focused on the visible change.
═══════════════════════════════════════════════════════════════════ */
.kw-palm-wrap {
position: absolute;
top: 0;
bottom: 0;
width: 300px;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.kw-palm-wrap--left {
left: -30px;
}
.kw-palm-wrap--right {
right: -30px;
}
.kw-palm-wrap--right > .kw-palm {
transform: scaleX(-1);
transform-origin: 50% 100%;
}
.kw-palm {
position: absolute;
bottom: -12px;
width: auto;
/* Anchored by individual nth-child rules below */
}
.kw-palm-wrap > .kw-palm:nth-child(1) {
left: -6%;
height: 95%;
filter: drop-shadow(0 6px 12px rgba(15, 26, 10, 0.1));
}
.kw-palm-wrap > .kw-palm:nth-child(2) {
left: 38%;
height: 72%;
opacity: 0.55;
filter: drop-shadow(0 4px 8px rgba(15, 26, 10, 0.06));
}
/* The SVG's own internal fills/strokes (set in the markup) provide the
tree's color. Below we just style classes that need to apply uniformly
across all palms. */
.kw-palm-rings line {
stroke: #0a120a;
stroke-width: 1;
opacity: 0.32;
stroke-linecap: round;
}
.kw-palm-frond-spine {
stroke: #1f2a1a;
stroke-width: 2.4;
fill: none;
stroke-linecap: round;
}
.kw-palm-frond-leaflets line {
stroke: #1f2a1a;
stroke-width: 1.4;
stroke-linecap: round;
}
.kw-palm-coconuts circle {
fill: #0a120a;
}
/* Ambient sway. Crown rocks gently; each frond layers a smaller per-frond
oscillation on top with desynced duration + negative animation-delay
(set inline per-frond by _kwPalmSvg) so no two fronds match phase. */
.kw-palm-crown {
animation: kwPalmCrownSway 5.5s ease-in-out infinite;
}
.kw-palm-frond {
animation: kwPalmFrondSway 4s ease-in-out infinite;
}
@keyframes kwPalmCrownSway {
0%,
100% {
transform: rotate(-1.4deg);
}
50% {
transform: rotate(1.4deg);
}
}
@keyframes kwPalmFrondSway {
0%,
100% {
transform: rotate(-1.6deg);
}
50% {
transform: rotate(1.6deg);
}
}
/* Mobile: smaller wrap, single palm per side, sway slightly toned down. */
@media (max-width: 768px) {
.kw-palm-wrap {
width: 190px;
}
.kw-palm-wrap--left {
left: -20px;
}
.kw-palm-wrap--right {
right: -20px;
}
.kw-palm-wrap > .kw-palm:nth-child(1) {
left: -8%;
height: 80%;
}
.kw-palm-wrap > .kw-palm:nth-child(2) {
display: none;
}
}
/* Reduced motion: hold the resting pose, no sway. */
@media (prefers-reduced-motion: reduce) {
.kw-palm-crown,
.kw-palm-frond {
animation: none;
}
}
/* === END SVG PALMS === */
/* ═══════════════════════════════════════════════════════════════════
INSTALL PROMPT — bottom sheet + persistent bubble
See: docs/superpowers/specs/2026-05-18-install-prompt-and-whatsapp-slide-design.md
═══════════════════════════════════════════════════════════════════ */
.kw-install-backdrop {
position: fixed;
inset: 0;
background: rgba(42, 47, 36, 0.32);
z-index: 9998;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.kw-install-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
.kw-install-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #faf9f6;
border-radius: 24px 24px 0 0;
border-top: 1px solid rgba(74, 93, 35, 0.08);
padding: 22px 18px calc(18px + env(safe-area-inset-bottom));
box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.18);
z-index: 9999;
transform: translateY(110%);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
max-width: 480px;
margin: 0 auto;
}
.kw-install-sheet.is-open {
transform: translateY(0);
}
.kw-install-drag {
width: 38px;
height: 4px;
background: #d4cfc3;
border-radius: 2px;
margin: 0 auto 14px;
}
.kw-install-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: #e8eddc;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
color: #4a5d23;
}
.kw-install-title {
font-family: "Playfair Display", Georgia, serif;
font-size: 19px;
font-weight: 600;
color: #2a2f24;
margin: 0 0 4px;
line-height: 1.2;
}
.kw-install-body {
font-size: 13px;
color: #6a7160;
margin: 0 0 14px;
line-height: 1.5;
font-family: "Outfit", sans-serif;
}
.kw-install-steps {
font-size: 12px;
color: #2a2f24;
margin: 0 0 14px;
padding-left: 18px;
line-height: 1.6;
font-family: "Outfit", sans-serif;
}
.kw-install-steps li {
margin-bottom: 3px;
}
.kw-install-share-svg {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: rgba(0, 122, 255, 0.12);
border-radius: 4px;
color: #007aff;
vertical-align: -4px;
margin: 0 2px;
}
.kw-install-actions {
display: flex;
flex-direction: column;
gap: 6px;
}
.kw-install-btn-primary {
background: #4a5d23;
color: white;
border: none;
padding: 12px 16px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
font-family: "Outfit", sans-serif;
}
.kw-install-btn-secondary {
background: transparent;
color: #6a7160;
border: none;
padding: 10px 16px;
font-size: 13px;
cursor: pointer;
font-family: "Outfit", sans-serif;
}
.kw-install-bubble {
position: fixed;
bottom: calc(16px + env(safe-area-inset-bottom));
left: 16px;
width: 52px;
height: 52px;
border-radius: 50%;
background: #4a5d23;
color: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 6px 20px rgba(74, 93, 35, 0.32),
0 2px 6px rgba(0, 0, 0, 0.18);
z-index: 9997;
cursor: pointer;
opacity: 0;
transform: scale(0.6);
transition:
opacity 0.3s ease,
transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kw-install-bubble.is-open {
opacity: 1;
transform: scale(1);
}
.kw-install-bubble::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid #4a5d23;
opacity: 0.4;
animation: kwBubblePulse 2.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes kwBubblePulse {
0%,
100% {
transform: scale(1);
opacity: 0.4;
}
50% {
transform: scale(1.18);
opacity: 0;
}
}
.kw-install-bubble-x {
position: absolute;
top: -4px;
right: -4px;
width: 18px;
height: 18px;
background: #6a7160;
color: white;
font-size: 11px;
line-height: 1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #faf9f6;
cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
.kw-install-sheet,
.kw-install-backdrop,
.kw-install-bubble {
transition: none;
}
.kw-install-bubble::after {
animation: none;
}
}
/* ─── INSTALL PROMPT — Guide mode (iOS "Got it, show me") ─────────── */
.kw-install-sheet.kw-install-guide {
bottom: auto;
top: 0;
border-radius: 0 0 24px 24px;
border-top: none;
border-bottom: 1px solid rgba(74, 93, 35, 0.08);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
padding: calc(env(safe-area-inset-top) + 14px) 16px 14px;
transform: translateY(-110%);
}
.kw-install-sheet.kw-install-guide.is-open {
transform: translateY(0);
}
.kw-install-guide-row {
display: flex;
align-items: center;
gap: 12px;
max-width: 460px;
margin: 0 auto;
}
.kw-install-icon-sm {
width: 36px;
height: 36px;
flex-shrink: 0;
margin-bottom: 0;
background: #e8eddc;
}
.kw-install-icon-sm svg {
width: 18px;
height: 18px;
}
.kw-install-guide-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.kw-install-guide-text strong {
font-family: "Outfit", sans-serif;
font-size: 13px;
font-weight: 600;
color: #2a2f24;
line-height: 1.2;
}
.kw-install-guide-text span {
font-family: "Outfit", sans-serif;
font-size: 11px;
color: #6a7160;
line-height: 1.3;
}
.kw-install-guide-done {
flex-shrink: 0;
padding: 8px 14px !important;
font-size: 12px !important;
background: rgba(74, 93, 35, 0.08) !important;
color: #4a5d23 !important;
border-radius: 10px !important;
}
.kw-install-guide-arrow {
position: fixed;
left: 50%;
bottom: calc(56px + env(safe-area-inset-bottom));
transform: translate(-50%, 8px);
z-index: 9998;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0;
transition:
opacity 0.35s ease,
transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kw-install-guide-arrow.is-open {
opacity: 1;
transform: translate(-50%, 0);
}
.kw-install-guide-arrow-pill {
background: rgba(74, 93, 35, 0.96);
color: white;
padding: 8px 16px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
font-family: "Outfit", sans-serif;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
white-space: nowrap;
letter-spacing: 0.2px;
}
.kw-install-guide-arrow svg {
width: 44px;
height: 44px;
color: #4a5d23;
filter: drop-shadow(0 6px 14px rgba(74, 93, 35, 0.45));
animation: kwGuideArrowBounce 1.4s ease-in-out infinite;
}
@keyframes kwGuideArrowBounce {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
}
@media (prefers-reduced-motion: reduce) {
.kw-install-guide-arrow svg {
animation: none;
}
.kw-install-sheet.kw-install-guide {
transition: none;
}
}
/* ═══════════════════════════════════════════════════════════════
Plan 1 — Foundation: ticks, presence, typing label, RR toggle
═══════════════════════════════════════════════════════════════ */
/* ── 3-state ticks ─────────────────────────────────────────── */
.msg-tick-sending {
display: inline-block;
font-size: 11px;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.7);
opacity: 0.9;
animation: kwTickSendingPulse 1.2s ease-in-out infinite;
}
@keyframes kwTickSendingPulse {
0%,
100% {
opacity: 0.45;
}
50% {
opacity: 0.9;
}
}
.msg-tick-sent {
width: 12px;
height: 8px;
color: rgba(255, 255, 255, 0.7);
}
.msg-tick-sent svg {
width: 100%;
height: 100%;
}
.msg-tick-delivered {
width: 16px;
height: 8px;
color: rgba(255, 255, 255, 0.85);
}
.msg-tick-delivered svg {
width: 100%;
height: 100%;
}
.msg-tick-read {
width: 16px;
height: 8px;
color: #4fc3f7;
}
.msg-tick-read svg {
width: 100%;
height: 100%;
}
.chat-msg-pro.me .msg-time .msg-tick {
margin-left: 4px;
vertical-align: middle;
}
/* ── Header presence pill (Spec B2) ─────────────────────────── */
.chat-header-presence {
font-size: 12px;
color: var(--text-m);
display: flex;
align-items: center;
gap: 6px;
line-height: 1.2;
margin: 2px 0 0;
}
.chat-header-presence.is-online::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #34c759;
box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.18);
}
.chat-header-presence:not(.is-online)::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cream-2, #d8d3c5);
}
/* ── Typing label visibility (B3) ───────────────────────────── */
.typing-row-pro .typing-label,
.typing-row .typing-label {
font-size: 12px;
color: var(--text-m);
font-style: italic;
margin-left: 4px;
display: inline-block;
}
/* ── Admin chat-list per-row "X is typing…" line (B3) ───────── */
.chat-typing-line {
font-size: 11px;
color: var(--olive, #4a5d23);
font-style: italic;
margin-top: 2px;
display: none;
animation: kwTypingLineIn 0.2s ease-out both;
}
.chat-typing-line.show {
display: block;
}
@keyframes kwTypingLineIn {
from {
opacity: 0;
transform: translateX(-3px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* ── Per-chat read-receipt privacy toggle button ────────────── */
.chat-rr-toggle {
margin-left: 6px;
}
.chat-rr-toggle .cmm-glyph {
font-size: 16px;
}
/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.msg-tick-sending {
animation: none;
opacity: 0.7;
}
.chat-typing-line {
animation: none;
}
}
/* ═══════════════════════════════════════════════════════════════════
§C2.A — MESSAGE INTERACTIONS (Plan 2)
Action menu overlay, reaction strip, reply quote, pin banner, etc.
═══════════════════════════════════════════════════════════════════ */
/* Bubble — long-press lift effect (mobile) */
.chat-msg.is-lifted {
transform: scale(1.04);
box-shadow: 0 18px 50px rgba(27, 33, 18, 0.18);
transition:
transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 180ms ease;
z-index: 5;
position: relative;
}
@media (prefers-reduced-motion: reduce) {
.chat-msg.is-lifted {
transform: none;
transition: none;
}
}
/* Bubble — reply-by-swipe transform (mobile only) */
.chat-msg.is-swiping {
transition: none;
will-change: transform;
}
.chat-msg.is-swipe-bounce {
transform: translateX(0) !important;
transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chat-msg .msg-swipe-hint {
position: absolute;
top: 50%;
left: -32px;
transform: translateY(-50%) scale(0.6);
width: 26px;
height: 26px;
border-radius: 50%;
background: rgba(74, 93, 35, 0.18);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition:
opacity 120ms ease,
transform 120ms ease;
}
.chat-msg.is-swiping .msg-swipe-hint {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.chat-msg.is-swiping .msg-swipe-hint svg {
width: 14px;
height: 14px;
color: var(--olive);
}
/* Floating action toolbar (desktop, hover) */
.chat-msg .msg-hover-toolbar {
position: absolute;
top: -36px;
right: 8px;
/* Phase I — switched from display:none/inline-flex to opacity +
pointer-events. Pure :hover triggers were sticky on touch-capable
devices (laptops with touchscreen, iPad+mouse, etc.) — once a
touch synthesised a hover the toolbar stayed visible AND
interactive, which is what produced the "ghost touch" symptom
when the bubbles re-rendered under a stuck hover state. */
display: inline-flex;
opacity: 0;
pointer-events: none;
visibility: hidden;
transition:
opacity 0.12s ease,
visibility 0s linear 0.12s;
background: #fff;
border: 1px solid var(--brd);
border-radius: 999px;
box-shadow: 0 6px 18px rgba(27, 33, 18, 0.12);
padding: 4px 6px;
gap: 2px;
z-index: 4;
}
.chat-msg.me .msg-hover-toolbar {
right: auto;
left: 8px;
}
/* Show only when a real mouse hovers (not synthesised by a touch).
bindMsgInteractions adds .is-mouse-hover on pointerenter where
pointerType==='mouse', removes on pointerleave; pure :hover is
kept as a fallback for older browsers that don't fire pointer
events but is wrapped in @media (hover: hover) and (pointer: fine)
so it only matches real-hover devices. */
.chat-msg.is-mouse-hover .msg-hover-toolbar {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition:
opacity 0.12s ease,
visibility 0s linear 0s;
}
@media (hover: hover) and (pointer: fine) {
.chat-msg:hover .msg-hover-toolbar {
opacity: 1;
pointer-events: auto;
visibility: visible;
transition:
opacity 0.12s ease,
visibility 0s linear 0s;
}
}
/* Phase C/5 — flip the hover toolbar BELOW the first visible message in
the chat so it isn't clipped by .chat-messages overflow at the top. */
.chat-msg:first-child .msg-hover-toolbar {
top: auto;
bottom: -36px;
}
.msg-hover-toolbar button {
background: transparent;
border: 0;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 14px;
cursor: pointer;
color: var(--text-s);
display: flex;
align-items: center;
justify-content: center;
}
.msg-hover-toolbar button:hover {
background: var(--olive-10);
color: var(--olive);
}
@media (max-width: 768px) {
.chat-msg .msg-hover-toolbar {
display: none !important;
}
}
/* Full-screen action overlay (mobile long-press) */
.msg-action-overlay {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(15, 20, 12, 0.55);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
flex-direction: column;
justify-content: flex-end;
opacity: 0;
transition: opacity 220ms ease;
}
.msg-action-overlay.is-open {
opacity: 1;
}
.msg-action-overlay-inner {
background: #fff;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
padding: 16px 14px calc(20px + env(safe-area-inset-bottom));
transform: translateY(40px);
transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
max-height: 80vh;
overflow-y: auto;
}
.msg-action-overlay.is-open .msg-action-overlay-inner {
transform: translateY(0);
}
/* Phase L — Explicit close X for the action menu. Without it,
users had no visible way to dismiss the sheet other than
tapping the dark backdrop (mobile) or pressing Esc (desktop).
Both work post-fix, but the X is the clearest affordance. */
.msg-action-close {
position: absolute;
top: 8px;
right: 12px;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(15, 20, 12, 0.06);
color: var(--text);
font-size: 22px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: background 0.15s ease;
}
.msg-action-close:hover {
background: rgba(15, 20, 12, 0.12);
}
.msg-action-close:active {
background: rgba(15, 20, 12, 0.18);
}
.msg-action-overlay-inner {
position: relative;
}
@media (min-width: 1024px) {
/* On desktop the popover is small; tuck the close button a hair
further into the corner so it doesn't crowd the reaction strip. */
.msg-action-close {
top: 6px;
right: 8px;
width: 28px;
height: 28px;
font-size: 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.msg-action-overlay,
.msg-action-overlay-inner {
transition: none;
}
.msg-action-overlay-inner {
transform: none;
}
}
/* Phase B/5 — Desktop: the full-screen mobile sheet looks oversized
when triggered from a right-click on a roomy laptop. Switch to a
contextual popover anchored next to the clicked bubble. JS sets
inline top/left coords based on the bubble's bounding rect. */
@media (min-width: 1024px) {
.msg-action-overlay {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
pointer-events: none;
align-items: flex-start;
justify-content: flex-start;
}
.msg-action-overlay-inner {
pointer-events: auto;
position: absolute;
max-width: 320px;
max-height: 70vh;
border-radius: 14px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
transform: none;
padding: 12px 10px;
}
.msg-action-overlay.is-open .msg-action-overlay-inner {
transform: none;
}
}
.msg-action-reactions {
display: flex;
justify-content: space-around;
align-items: center;
background: #fff;
border-radius: 999px;
box-shadow: 0 4px 18px rgba(27, 33, 18, 0.12);
padding: 8px 10px;
margin: 0 8px 14px;
gap: 4px;
}
.msg-action-reactions button {
background: transparent;
border: 0;
font-size: 26px;
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
transition:
transform 120ms ease,
background 120ms ease;
}
.msg-action-reactions button:hover,
.msg-action-reactions button:active {
transform: scale(1.18);
background: var(--olive-10);
}
.msg-action-reactions .react-plus {
font-size: 20px;
color: var(--olive);
}
.msg-action-list {
list-style: none;
margin: 0;
padding: 0;
}
.msg-action-list li {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 10px;
font-size: 15px;
font-family: "Outfit", sans-serif;
color: var(--text-s);
cursor: pointer;
border-radius: 12px;
transition: background 120ms ease;
}
.msg-action-list li:hover,
.msg-action-list li:active {
background: var(--olive-10);
}
.msg-action-list li[data-action="delete"] {
color: #b33a2d;
}
.msg-action-list li[data-action="delete"]:hover {
background: rgba(179, 58, 45, 0.08);
}
.msg-action-list li .mal-ic {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.msg-action-list li.is-hidden {
display: none;
}
/* Reaction chips below bubble */
.msg-reaction-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.msg-reaction-chip {
background: #fff;
border: 1px solid var(--brd);
border-radius: 999px;
padding: 2px 8px;
font-size: 12px;
line-height: 1.4;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 3px;
transition:
transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
background 120ms ease;
}
.msg-reaction-chip.is-mine {
background: var(--olive-10);
border-color: var(--olive-20);
}
.msg-reaction-chip:hover {
transform: scale(1.06);
}
.msg-reaction-chip.is-bump {
animation: msgChipBump 360ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes msgChipBump {
0% {
transform: scale(0.6);
}
60% {
transform: scale(1.18);
}
100% {
transform: scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.msg-reaction-chip.is-bump {
animation: none;
}
}
/* Who-reacted bottom sheet */
.msg-who-sheet {
position: fixed;
inset: 0;
z-index: 9100;
background: rgba(15, 20, 12, 0.5);
display: flex;
justify-content: center;
align-items: flex-end;
opacity: 0;
transition: opacity 200ms ease;
}
.msg-who-sheet.is-open {
opacity: 1;
}
.msg-who-sheet-inner {
background: #fff;
width: 100%;
max-width: 480px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
transform: translateY(40px);
transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
max-height: 70vh;
overflow-y: auto;
}
.msg-who-sheet.is-open .msg-who-sheet-inner {
transform: translateY(0);
}
.msg-who-sheet h4 {
font-family: "Playfair Display", serif;
margin: 0 0 12px;
font-size: 18px;
color: var(--text-d);
}
.msg-who-sheet-row {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 4px;
border-bottom: 1px solid var(--brd-l);
font-size: 14px;
}
.msg-who-sheet-row .mwr-emoji {
font-size: 22px;
}
.msg-who-sheet-row:last-child {
border-bottom: 0;
}
/* Reply quote — composer preview chip */
.chat-reply-preview {
display: none;
align-items: stretch;
background: var(--olive-3);
border-left: 3px solid var(--olive);
padding: 8px 10px;
margin: 0 12px 6px;
border-radius: 8px;
font-size: 12px;
color: var(--text-s);
gap: 8px;
}
.chat-reply-preview.is-active {
display: flex;
}
.chat-reply-preview .crp-body {
flex: 1;
min-width: 0;
}
.chat-reply-preview .crp-label {
font-weight: 700;
color: var(--olive);
display: block;
margin-bottom: 2px;
font-size: 11px;
}
.chat-reply-preview .crp-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.chat-reply-preview .crp-cancel {
background: transparent;
border: 0;
font-size: 18px;
line-height: 1;
color: var(--text-m);
cursor: pointer;
align-self: flex-start;
padding: 0 4px;
}
/* Mini-bubble (quoted message rendered above the reply) */
.msg-mini-quote {
background: rgba(74, 93, 35, 0.06);
border-left: 3px solid var(--olive);
padding: 6px 8px;
margin: 0 0 6px;
border-radius: 8px;
font-size: 12px;
color: var(--text-s);
cursor: pointer;
max-width: 100%;
overflow: hidden;
display: block;
}
.msg-mini-quote .mmq-name {
font-weight: 700;
color: var(--olive);
font-size: 11px;
display: block;
margin-bottom: 2px;
}
.msg-mini-quote .mmq-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.msg-mini-quote.is-deleted {
font-style: italic;
color: var(--text-m);
}
/* Scroll-target highlight pulse */
.chat-msg.is-scroll-target {
animation: msgScrollPulse 1400ms ease-out;
}
@keyframes msgScrollPulse {
0% {
background-color: rgba(200, 169, 81, 0.4);
}
100% {
background-color: transparent;
}
}
@media (prefers-reduced-motion: reduce) {
.chat-msg.is-scroll-target {
animation: none;
}
}
/* "(edited)" label */
.msg-edited-label {
font-size: 10px;
color: var(--text-m);
margin-left: 6px;
font-style: italic;
}
/* Tombstone (deleted) */
.chat-msg.is-deleted {
font-style: italic;
color: var(--text-m);
background: rgba(0, 0, 0, 0.04) !important;
border: 1px dashed var(--brd) !important;
}
.chat-msg.is-deleted .msg-tombstone {
display: inline-flex;
align-items: center;
gap: 4px;
}
.chat-msg.is-deleted .msg-reaction-chips,
.chat-msg.is-deleted .msg-hover-toolbar {
display: none !important;
}
/* Pinned banner */
.chat-pin-banner {
display: none;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--gold-light), #fff);
border-bottom: 1px solid var(--brd);
padding: 8px 12px;
font-size: 12px;
color: var(--text-s);
cursor: pointer;
position: relative;
}
.chat-pin-banner.is-active {
display: flex;
}
.chat-pin-banner .cpb-icon {
font-size: 14px;
}
.chat-pin-banner .cpb-label {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-pin-banner .cpb-label strong {
color: var(--olive);
margin-right: 6px;
}
.chat-pin-banner .cpb-unpin {
background: transparent;
border: 0;
color: var(--text-m);
font-size: 16px;
cursor: pointer;
padding: 2px 6px;
line-height: 1;
}
/* Forwarded label */
.msg-forwarded-label {
font-size: 10px;
color: var(--text-m);
display: flex;
align-items: center;
gap: 3px;
margin-bottom: 2px;
}
.msg-forwarded-label::before {
content: "↪";
font-size: 11px;
}
/* Forward picker */
.fwd-picker {
position: fixed;
inset: 0;
z-index: 9200;
background: rgba(15, 20, 12, 0.55);
display: flex;
justify-content: center;
align-items: flex-end;
opacity: 0;
transition: opacity 200ms ease;
}
.fwd-picker.is-open {
opacity: 1;
}
.fwd-picker-inner {
background: #fff;
width: 100%;
max-width: 540px;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
max-height: 80vh;
display: flex;
flex-direction: column;
transform: translateY(40px);
transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fwd-picker.is-open .fwd-picker-inner {
transform: translateY(0);
}
.fwd-picker h4 {
font-family: "Playfair Display", serif;
margin: 0 0 8px;
font-size: 18px;
color: var(--text-d);
}
.fwd-picker .fwd-list {
flex: 1;
overflow-y: auto;
margin: 6px 0 12px;
border-top: 1px solid var(--brd-l);
}
.fwd-picker .fwd-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 4px;
border-bottom: 1px solid var(--brd-l);
cursor: pointer;
font-size: 14px;
}
.fwd-picker .fwd-row input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--olive);
}
.fwd-picker .fwd-name {
font-weight: 600;
color: var(--text-d);
}
.fwd-picker .fwd-preview {
font-size: 12px;
color: var(--text-m);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 60vw;
}
.fwd-picker-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.fwd-picker-actions button {
font-family: "Outfit", sans-serif;
border: 0;
border-radius: 12px;
padding: 10px 18px;
font-size: 14px;
cursor: pointer;
}
.fwd-picker-actions .fwd-cancel {
background: var(--brd-l);
color: var(--text-s);
}
.fwd-picker-actions .fwd-send {
background: var(--olive);
color: #fff;
}
.fwd-picker-actions .fwd-send[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
/* ─── Plan 3 / C4 — Booking-context header card (admin) ───────── */
.chat-bk-card {
display: flex;
flex-direction: column;
border-bottom: 1px solid var(--brd-l);
background: linear-gradient(
180deg,
rgba(74, 93, 35, 0.04),
rgba(74, 93, 35, 0)
);
font-family: var(--sans);
}
.chat-bk-toggle {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 10px 18px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-size: 13px;
color: var(--text);
}
.chat-bk-icon {
font-size: 16px;
line-height: 1;
}
.chat-bk-summary {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-bk-chev {
color: var(--text-m);
font-size: 12px;
}
.chat-bk-detail {
display: grid;
grid-template-columns: 96px 1fr;
gap: 4px 12px;
padding: 4px 18px 12px;
font-size: 12.5px;
color: var(--text);
max-height: 240px;
overflow: hidden;
transition:
max-height 0.25s ease,
padding 0.25s ease,
opacity 0.25s ease;
}
.chat-bk-card.is-collapsed .chat-bk-detail {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
pointer-events: none;
}
.chat-bk-k {
color: var(--text-m);
font-weight: 500;
}
.chat-bk-v {
color: var(--text);
}
.chat-bk-row {
display: contents;
}
.chat-bk-link {
grid-column: 1 / -1;
margin-top: 8px;
color: var(--olive);
font-weight: 600;
text-decoration: none;
font-size: 12.5px;
}
.chat-bk-link:hover {
text-decoration: underline;
}
.chat-bk-empty {
padding: 10px 18px;
display: flex;
align-items: center;
gap: 10px;
font-size: 12.5px;
color: var(--text-m);
}
.chat-bk-empty .chat-bk-title {
font-weight: 600;
color: var(--text);
}
/* ─── Plan 3 / C2 — Composer slash-picker + note/snippet buttons ── */
.chat-snip-picker {
position: relative;
display: none;
max-height: 260px;
overflow-y: auto;
border-top: 1px solid var(--brd-l);
background: var(--wh);
}
.chat-snip-picker.show {
display: block;
}
.chat-snip-row {
padding: 10px 18px;
border-bottom: 1px solid var(--brd-l);
cursor: pointer;
font-family: var(--sans);
font-size: 13px;
transition: background 0.15s ease;
}
.chat-snip-row:last-child {
border-bottom: none;
}
.chat-snip-row:hover,
.chat-snip-row.is-active {
background: rgba(74, 93, 35, 0.08);
}
.chat-snip-empty {
color: var(--text-m);
font-style: italic;
}
.chat-snip-top {
display: flex;
align-items: baseline;
gap: 10px;
}
.chat-snip-shortcut {
font-family: monospace;
font-weight: 700;
color: var(--olive);
font-size: 12.5px;
}
.chat-snip-title {
font-weight: 600;
color: var(--text);
}
.chat-snip-preview {
color: var(--text-m);
font-size: 12px;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-snip-btn,
.chat-note-btn {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1.5px solid var(--brd);
background: var(--wh);
color: var(--text);
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition:
background 0.15s ease,
transform 0.1s ease;
}
.chat-snip-btn:hover,
.chat-note-btn:hover {
background: var(--cream);
transform: scale(1.05);
}
.chat-note-btn.is-active {
background: #fff7c2;
border-color: #d4b800;
}
.chat-input-bar.is-note-mode {
background: #fffbe0;
}
.chat-input-bar.is-note-mode input {
background: #fffceb;
border-color: #d4b800;
}
/* ─── Plan 3 / C3 — Internal-note bubble (admin view only) ─────── */
.chat-msg.is-note {
background: #fff7c2 !important;
border-left: 3px solid #d4b800;
color: #5b4f00;
}
.chat-msg.is-note .msg-sender {
color: #7a6a00;
}
.chat-msg.is-note .msg-note-badge {
margin-left: 6px;
padding: 1px 6px;
background: #d4b800;
color: #3a2f00;
font-size: 11px;
border-radius: 4px;
font-weight: 700;
letter-spacing: 0.3px;
}
/* ─── Plan 3 / C2 — Snippets management UI ───────────────────── */
.adm-quicklink {
padding: 8px 14px;
border: 1px solid var(--brd);
border-radius: 999px;
background: var(--wh);
font-family: var(--sans);
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.15s ease;
}
.adm-quicklink:hover {
background: var(--cream);
}
.snip-toolbar {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.snip-new-btn {
padding: 10px 18px;
border-radius: 100px;
background: var(--olive);
color: #fff;
border: none;
font-family: var(--sans);
font-weight: 600;
font-size: 13px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.snip-new-btn:hover {
background: var(--olive-60);
}
.snip-count {
color: var(--text-m);
font-size: 12px;
}
.snip-list {
display: grid;
gap: 14px;
}
.snip-row {
background: var(--wh);
border: 1px solid var(--brd-l);
border-radius: 14px;
padding: 14px 18px;
font-family: var(--sans);
}
.snip-row-top {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.snip-row-shortcut {
font-family: monospace;
font-weight: 700;
color: var(--olive);
background: rgba(74, 93, 35, 0.08);
padding: 2px 8px;
border-radius: 6px;
font-size: 13px;
}
.snip-row-title {
font-weight: 600;
color: var(--text);
}
.snip-row-uses {
margin-left: auto;
color: var(--text-m);
font-size: 12px;
}
.snip-row-body {
font-size: 13px;
color: var(--text);
line-height: 1.5;
}
.snip-row-ph {
font-size: 11.5px;
color: var(--text-m);
margin-top: 6px;
}
.snip-row-ph code {
font-family: monospace;
background: var(--cream);
padding: 1px 4px;
border-radius: 3px;
}
.snip-row-acts {
display: flex;
gap: 8px;
margin-top: 10px;
}
.snip-btn {
padding: 6px 14px;
border-radius: 8px;
border: 1px solid var(--brd);
background: var(--wh);
font-family: var(--sans);
font-size: 12px;
cursor: pointer;
transition: background 0.15s ease;
}
.snip-btn:hover {
background: var(--cream);
}
.snip-btn-edit {
color: var(--olive);
}
.snip-btn-del {
color: #c92a2a;
border-color: #f4b9b9;
}
.snip-empty {
color: var(--text-m);
text-align: center;
padding: 36px;
border: 1px dashed var(--brd);
border-radius: 14px;
}
.snip-modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.snip-modal[hidden] {
display: none;
}
.snip-modal-card {
background: var(--wh);
border-radius: 16px;
padding: 24px;
width: 100%;
max-width: 480px;
font-family: var(--sans);
}
.snip-modal-card h3 {
margin: 0 0 16px 0;
font-size: 18px;
color: var(--text);
}
.snip-field {
display: block;
margin-bottom: 14px;
}
.snip-field > span {
display: block;
font-size: 12px;
color: var(--text-m);
margin-bottom: 4px;
font-weight: 600;
}
.snip-field input,
.snip-field textarea,
.snip-field select {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--brd);
border-radius: 10px;
font-family: var(--sans);
font-size: 13px;
background: var(--wh);
color: var(--text);
outline: none;
resize: vertical;
}
.snip-field input:focus,
.snip-field textarea:focus,
.snip-field select:focus {
border-color: var(--olive);
box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.1);
}
.snip-modal-acts {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 12px;
}
.snip-btn-cancel {
background: var(--wh);
}
.snip-btn-save {
background: var(--olive);
color: #fff;
border-color: var(--olive);
padding: 8px 18px;
font-weight: 600;
}
.snip-btn-save:hover {
background: var(--olive-60);
}
/* ─── Chat Auto-Replies admin (Tier 1 deterministic auto-responder) ─── */
.cauto-warn,
.cauto-live {
font-size: 13px;
line-height: 1.5;
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 18px;
}
.cauto-warn {
background: rgba(202, 168, 74, 0.12);
border: 1px solid rgba(202, 168, 74, 0.4);
color: var(--text);
}
.cauto-live {
background: rgba(74, 93, 35, 0.1);
border: 1px solid rgba(74, 93, 35, 0.35);
color: var(--text);
}
.cauto-card {
background: var(--wh);
border: 1px solid var(--brd-l);
border-radius: 16px;
padding: 18px;
margin-bottom: 26px;
display: grid;
gap: 16px;
font-family: var(--sans);
}
.cauto-switch {
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
color: var(--text);
cursor: pointer;
min-height: 44px; /* comfortable touch target */
}
.cauto-switch .cauto-cb {
/* Visually hidden but still accessible — the styled track below is the
visible control. We don't rely on the native checkbox because a
global reset strips its appearance (that's why the toggle rendered
blank). The whole label is clickable, so the hidden input still
toggles. */
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.cauto-track {
flex: 0 0 auto;
width: 46px;
height: 28px;
border-radius: 999px;
background: var(--brd);
position: relative;
transition: background 0.18s ease;
}
.cauto-thumb {
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
transition: transform 0.18s ease;
}
.cauto-switch .cauto-cb:checked + .cauto-track {
background: var(--olive);
}
.cauto-switch .cauto-cb:checked + .cauto-track .cauto-thumb {
transform: translateX(18px);
}
.cauto-switch .cauto-cb:focus-visible + .cauto-track {
outline: 2px solid var(--olive);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.cauto-track,
.cauto-thumb {
transition: none;
}
}
.cauto-lbl {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text-m);
margin-bottom: 6px;
}
.cauto-hours-row {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.cauto-h {
display: inline-flex;
flex-direction: column;
gap: 4px;
font-size: 13px;
color: var(--text-m);
}
.cauto-h input {
width: 90px;
padding: 10px 12px;
border: 1.5px solid var(--brd);
border-radius: 10px;
font-family: var(--sans);
font-size: 16px; /* ≥16px: no iOS focus-zoom */
background: var(--wh);
color: var(--text);
outline: none;
}
.cauto-h input:focus {
border-color: var(--olive);
box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.1);
}
.cauto-hint {
display: block;
font-size: 11.5px;
color: var(--text-m);
margin-top: 6px;
}
.cauto-field {
display: block;
}
.cauto-field textarea {
width: 100%;
padding: 12px 14px;
border: 1.5px solid var(--brd);
border-radius: 10px;
font-family: var(--sans);
font-size: 16px; /* ≥16px */
line-height: 1.5;
background: var(--wh);
color: var(--text);
outline: none;
resize: vertical;
}
.cauto-field textarea:focus {
border-color: var(--olive);
box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.1);
}
.cauto-save {
justify-self: start;
min-height: 44px;
}
.cauto-rules-hd {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 6px;
flex-wrap: wrap;
}
.cauto-rules-title {
margin: 0;
font-size: 16px;
color: var(--text);
display: inline-flex;
align-items: center;
gap: 8px;
}
.cauto-rules {
display: grid;
gap: 12px;
}
.cauto-rule {
background: var(--wh);
border: 1px solid var(--brd-l);
border-radius: 14px;
padding: 14px 16px;
}
.cauto-rule-kw {
font-family: monospace;
font-size: 12.5px;
color: var(--olive);
background: rgba(74, 93, 35, 0.08);
padding: 4px 8px;
border-radius: 6px;
display: inline-block;
margin-bottom: 8px;
word-break: break-word;
}
.cauto-rule-ans {
font-size: 13.5px;
color: var(--text);
line-height: 1.5;
}
.cauto-rule-acts {
display: flex;
gap: 8px;
margin-top: 12px;
}
.cauto-rule-acts .snip-btn {
min-height: 40px;
padding: 8px 16px;
}
/* FAQ rule modal reuses .snip-field; bump its inputs to ≥16px so iOS
Safari doesn't auto-zoom on focus (the shared .snip-field rule is
13px). Scoped to this modal only — the snippets modal is untouched. */
#faqRuleModal .snip-field input,
#faqRuleModal .snip-field textarea {
font-size: 16px;
}
/* ─── Plan 3 / C5 — Saved Messages notepad ───────────────────── */
.chat-item-notepad {
background: linear-gradient(
180deg,
rgba(202, 168, 74, 0.06),
rgba(202, 168, 74, 0)
);
}
.chat-pin-tag {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
background: #caa84a;
color: #fff;
font-size: 9.5px;
border-radius: 4px;
font-weight: 700;
letter-spacing: 0.3px;
vertical-align: middle;
}
.notepad-actions {
display: none;
align-items: center;
gap: 12px;
padding: 10px 18px;
background: rgba(202, 168, 74, 0.12);
border-top: 1px solid var(--brd-l);
font-family: var(--sans);
font-size: 13px;
color: var(--text);
}
.notepad-actions.show {
display: flex;
}
.notepad-fwd-btn {
margin-left: auto;
padding: 8px 16px;
border-radius: 100px;
background: var(--olive);
color: #fff;
border: none;
font-family: var(--sans);
font-weight: 600;
font-size: 12.5px;
cursor: pointer;
}
.notepad-cancel-btn {
padding: 8px 14px;
background: transparent;
border: 1px solid var(--brd);
border-radius: 100px;
font-family: var(--sans);
font-size: 12.5px;
cursor: pointer;
}
.notepad-msg.is-selected {
outline: 3px solid #caa84a;
outline-offset: 2px;
}
.notepad-check {
margin-right: 8px;
vertical-align: middle;
}
.notepad-del {
background: none;
border: none;
color: var(--text-m);
font-size: 16px;
cursor: pointer;
margin-left: 6px;
line-height: 1;
}
.notepad-del:hover {
color: #c92a2a;
}
.notepad-forward {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.notepad-forward[hidden] {
display: none;
}
.notepad-fwd-card {
background: var(--wh);
border-radius: 16px;
width: 100%;
max-width: 420px;
max-height: 80vh;
overflow: hidden;
display: flex;
flex-direction: column;
font-family: var(--sans);
}
.notepad-fwd-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--brd-l);
}
.notepad-fwd-header h3 {
margin: 0;
font-size: 15px;
}
.notepad-fwd-close {
background: none;
border: none;
font-size: 22px;
cursor: pointer;
color: var(--text-m);
line-height: 1;
}
.notepad-fwd-list {
overflow-y: auto;
padding: 8px 0;
}
.notepad-fwd-row {
display: block;
width: 100%;
padding: 12px 20px;
border: none;
background: transparent;
text-align: left;
cursor: pointer;
font-family: inherit;
font-size: 13px;
border-bottom: 1px solid var(--brd-l);
}
.notepad-fwd-row:last-child {
border-bottom: none;
}
.notepad-fwd-row:hover {
background: var(--cream);
}
/* ─── Plan 3 / C1 — In-chat search + global admin search ───────── */
.chat-search-btn {
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: transparent;
cursor: pointer;
font-size: 15px;
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.chat-search-btn:hover {
background: var(--cream);
}
.chat-search-bar {
display: none;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-bottom: 1px solid var(--brd-l);
background: var(--cream);
font-family: var(--sans);
}
.chat-search-bar.show {
display: flex;
}
.chat-search-bar input {
flex: 1;
/* Phase E — match the composer input fix; allow shrinking below
content min-width so the prev/next/close buttons stay visible
on narrow viewports. */
min-width: 0;
padding: 8px 12px;
border: 1px solid var(--brd);
border-radius: 8px;
font-size: 13px;
background: var(--wh);
outline: none;
}
.chat-search-bar input:focus {
border-color: var(--olive);
box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.1);
}
.chat-search-counter {
font-size: 11.5px;
color: var(--text-m);
min-width: 50px;
text-align: center;
}
.chat-search-bar button {
width: 28px;
height: 28px;
border-radius: 6px;
border: 1px solid var(--brd);
background: var(--wh);
font-size: 11px;
cursor: pointer;
color: var(--text);
}
.chat-search-bar button:hover {
background: var(--cream);
}
.chat-hl {
background: #ffe66d;
color: var(--text);
padding: 0 1px;
border-radius: 2px;
}
.chat-msg.is-search-active {
outline: 2px solid #ffb800;
outline-offset: 2px;
background-color: rgba(255, 230, 109, 0.18) !important;
transition: background-color 0.3s ease;
}
.chat-global-search {
margin-bottom: 14px;
}
.chat-global-search input {
width: 100%;
padding: 10px 14px;
border: 1.5px solid var(--brd);
border-radius: 100px;
font-size: 13px;
font-family: var(--sans);
background: var(--wh);
outline: none;
}
.chat-global-search input:focus {
border-color: var(--olive);
box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.1);
}
.chat-gres-wrap {
margin-bottom: 20px;
}
.chat-gres-load,
.chat-gres-empty {
padding: 14px;
color: var(--text-m);
text-align: center;
font-size: 12.5px;
}
.chat-gres-chat {
background: var(--wh);
border: 1px solid var(--brd-l);
border-radius: 12px;
padding: 12px 16px;
margin-bottom: 10px;
font-family: var(--sans);
}
.chat-gres-head {
font-size: 13px;
margin-bottom: 8px;
color: var(--text);
}
.chat-gres-hit {
font-size: 12px;
padding: 8px 10px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s ease;
}
.chat-gres-hit:hover {
background: var(--cream);
}
.chat-gres-hit-snippet {
color: var(--text);
line-height: 1.4;
}
.chat-gres-hit-meta {
color: var(--text-m);
font-size: 10.5px;
margin-top: 2px;
}
/* ──────────────────────────────────────────────────────────────────
Phase B/4 — Sticky-hover suppression on touch devices.
On touch screens, `:hover` styles latch after a tap and stay "on"
until another element is tapped. For COLOR/SHADOW changes that's
harmless and provides a useful tap-feedback. But for `transform`
changes (translateY/scale/translateX) the visual SHIFT survives
after the user releases — a room card stays lifted, the heart
button stays scaled, the chat-item stays slid 3px to the right.
Wrapping every existing rule in (hover: hover) would be ~50 edits
spread across 12k lines and risks regressions. Instead, this single
override fires only on (hover: none) — fine-pointer desktops are
untouched — and neutralizes the transform on the known sticky-
hover surfaces. Color/box-shadow hover effects on these same
elements are intentionally left alone (they self-clear on tap-out).
────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
.ncta:hover,
.btt:hover,
.rc:hover,
.rc-fav:hover,
.attr-card:hover,
.svc-card:hover,
.rev-card:hover,
.cta-btn:hover,
.island-feat:hover,
.island-cta-btn:hover,
.ft-social:hover,
.chat-item:hover,
.chat-input-bar button:hover,
.chat-notif-btn:hover,
.chat-item-featured:hover,
.pmi:hover,
.sticky-book-btn:hover,
.lb-close:hover,
.lb-nav:hover,
.lb-nav.prev:hover,
.lb-nav.next:hover,
.map-btn:hover {
transform: none;
}
}
/* ──────────────────────────────────────────────────────────────────
Phase B/4 — Mobile minimum touch targets (WCAG 2.5.5 — 44x44 CSS
pixels). The audit flagged several interactive surfaces below the
threshold which makes them frustrating to tap on small screens.
Scoped to (max-width: 768px) so the desktop pixel layout is
unchanged.
────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
.bk-ctr button,
.chat-input-bar button,
.chat-snip-btn,
.chat-note-btn,
.rc-fav,
.mtog,
.xb,
.chat-header .ch-back {
min-width: 44px;
min-height: 44px;
}
}
/* ──────────────────────────────────────────────────────────────────
Phase B/6 — Global :focus-visible ring for keyboard a11y. Pre-fix,
users tabbing through the UI had no visible indicator of which
element had focus, failing WCAG 2.4.7. Using :focus-visible (not
:focus) so mouse clicks don't draw a ring on every button.
────────────────────────────────────────────────────────────────── */
*:focus-visible {
outline: 2px solid var(--olive);
outline-offset: 2px;
border-radius: 6px;
}
/* Don't double-ring elements that already define a custom indicator. */
.nl:focus-visible {
outline: none;
}
/* Phase C/2 - Skip to main content link (a11y) */
.kw-skip-link {
position: fixed;
top: -100px;
left: 8px;
background: var(--olive);
color: #fff;
padding: 10px 14px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
z-index: 99999;
transition: top 0.15s;
}
.kw-skip-link:focus-visible {
top: 8px;
}
/* ════════════════════════════════════════════════════════════════════
MOTION SYSTEM v3 — Progressive enhancement + auth-state-safe.
(CLAUDE_CODE_ANIMATION_FIX_AND_UPLIFT.md fix.)
THE BUG (pre-fix):
- .reveal { opacity: 0 } at styles.css:1715 made content invisible by
default. The .reveal.vis rule revealed it, but the JS observers ran
only once at module load. On auth-state-driven re-renders (sign in /
sign out), new .reveal nodes were created with opacity:0 and only the
async MutationObserver+IntersectionObserver chain could un-hide them.
Race conditions left content stuck invisible.
THE FIX (this block):
- .reveal is VISIBLE by default. Pure-CSS load = content visible.
- The body.kw-motion-ready class (set by initMotion in script.js)
gates the "hide first then animate in" behavior. If JS never runs,
content stays visible.
- body.kw-reduce-motion class (set by initMotion when the OS prefers
reduced motion) overrides everything to instant visibility.
- Selectors use :not(.is-in):not(.vis) so they automatically yield to
the existing reveal-state rules (.reveal.is-in at line 80 and
.reveal.vis at line 1722) — fully backward compatible.
Source-order placement at EOF ensures this block has cascade priority
over the legacy .reveal rules without removing them (live-site safety).
════════════════════════════════════════════════════════════════════ */
/* PE default: .reveal is VISIBLE — no JS required. */
.reveal {
opacity: 1;
transform: none;
transition:
opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* JS has marked the page motion-ready. Hide un-revealed reveals. */
body.kw-motion-ready .reveal:not(.is-in):not(.vis) {
opacity: 0;
transform: translateY(24px);
}
body.kw-motion-ready .reveal.reveal-left:not(.is-in):not(.vis) {
transform: translateX(-24px);
}
body.kw-motion-ready .reveal.reveal-right:not(.is-in):not(.vis) {
transform: translateX(24px);
}
body.kw-motion-ready .reveal.reveal-scale:not(.is-in):not(.vis) {
transform: scale(0.96);
}
/* Reduced motion: hard-override every motion path to instant. */
body.kw-reduce-motion .reveal,
body.kw-reduce-motion .reveal.is-in,
body.kw-reduce-motion .reveal.vis,
body.kw-reduce-motion .hero-fx,
body.kw-reduce-motion .hero-fx.is-visible,
body.kw-reduce-motion .hero-fx-h1 .hero-line,
body.kw-reduce-motion .hero-fx-h1 .hero-line.is-visible,
body.kw-reduce-motion [data-hero-art],
body.kw-reduce-motion [data-hero-art].is-visible {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
transition: none !important;
animation: none !important;
}
/* ── Hero "island escape" accent ────────────────────────────────────
ONE tasteful, one-time gold underline draw-in. Not a loop. Fires
after the headline line settles, then stays settled. Reduced-motion
gets the final state instantly. */
.kw-hero-accent {
position: relative;
white-space: nowrap;
/* Inherit italic + olive from the existing styles — don't fight them. */
}
.kw-hero-accent::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -0.06em;
height: 0.1em;
background: linear-gradient(
90deg,
var(--gold, #c8a951) 0%,
rgba(200, 169, 81, 0.45) 100%
);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.4s;
pointer-events: none;
}
/* The headline line carries .hero-line.is-visible once the hero anim
fires. Trigger the underline off that signal so it always lands
AFTER the line settles. */
body.kw-motion-ready .hero-fx-h1 .hero-line.is-visible .kw-hero-accent::after {
transform: scaleX(1);
}
body.kw-reduce-motion .kw-hero-accent::after {
transform: scaleX(1);
transition: none;
}
/* ── View Transitions API — auth-state crossfade ───────────────────
Feature-detected in JS (kwSwapView). When supported, gives a
tasteful 420ms crossfade for sign-in / sign-out instead of a hard
DOM swap. When unsupported, JS falls back to instant. */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.42s;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(root) {
animation-name: kwViewFadeOut;
}
::view-transition-new(root) {
animation-name: kwViewFadeIn;
}
@keyframes kwViewFadeOut {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-6px);
}
}
@keyframes kwViewFadeIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none !important;
}
}
/* ── Premium CTA micro-interaction — subtle lift, never bouncy. ────
Targets the brand CTAs (Browse Rooms, Sign In, Confirm Booking).
Reduced-motion-safe via media query. */
@media (prefers-reduced-motion: no-preference) {
.ncta,
.auth-submit {
transition:
transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
background 180ms ease;
}
.ncta:hover,
.auth-submit:hover:not([disabled]) {
transform: translateY(-2px);
box-shadow: 0 10px 24px -10px rgba(74, 93, 35, 0.4);
}
.ncta:active,
.auth-submit:active:not([disabled]) {
transform: translateY(0);
transition-duration: 100ms;
}
/* Outline CTA — same lift, no shadow. */
.det-back:not(.adm-back):not([disabled]):hover {
transform: translateY(-1px);
transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}
}
/* ════════════════════════════════════════════════════════════════════
HERO REVEAL v3 — visible-by-default, motion is pure enhancement.
(HERO_REDESIGN_PROMPT.md §7c — the reliability-safe reveal pattern.)
The old v2 system hid `.hero [data-reveal]` at parse time under
`html.js` and bet that JS would reveal it (with a 1500ms failsafe
keyframe bolted on because that bet kept losing). v3 inverts this:
- `[data-reveal]` elements are ALWAYS visible in CSS (opacity:1).
There is no hidden-by-default state and therefore no way to strand
content invisible — no JS, no failsafe keyframe, nothing to fail into.
- The staggered entrance is driven entirely by the Web Animations API
in initHeroMotion() (script.js). element.animate() with
`fill: "backwards"` paints the hidden start-state ONLY while its own
animation is pending/running, then releases the element back to this
visible CSS base. If JS throws mid-run, every element still resolves
to visible. If JS never runs, the CSS base is already visible.
- Reduced-motion: initHeroMotion() skips animating; the static visible
base below is the result. (The hero block above also hard-disables
ambient motion under the reduced-motion media query.)
════════════════════════════════════════════════════════════════════ */
.hero [data-reveal] {
opacity: 1;
transform: none;
}
/* Belt-and-suspenders: even under reduced motion, force the visible base
(initHeroMotion already no-ops, but this guarantees it in CSS too). */
@media (prefers-reduced-motion: reduce) {
.hero [data-reveal] {
opacity: 1 !important;
transform: none !important;
}
}
/* ════════════════════════════════════════════════════════════════════
MOBILE MENU v2 — Premium, on-brand, with CTA + items + divider.
(P1 fix companion CSS.)
════════════════════════════════════════════════════════════════════ */
.mnav {
display: flex;
flex-direction: column;
}
.mnav-inner {
display: flex;
flex-direction: column;
gap: 14px;
padding: 64px 24px 32px;
width: 100%;
max-width: 420px;
margin: 0 auto;
}
.mnav-cta {
width: 100%;
padding: 14px 24px;
background: var(--olive, #4a5d23);
color: #fff;
border: 0;
border-radius: 12px;
font-family: var(--sans, "Outfit", sans-serif);
font-size: 16px;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.2px;
box-shadow: 0 10px 24px -8px rgba(74, 93, 35, 0.35);
transition:
transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
.mnav-cta:active {
transform: scale(0.98);
}
.mnav-div {
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(74, 93, 35, 0.18) 50%,
transparent 100%
);
margin: 4px 0;
}
.mnav-items {
display: flex;
flex-direction: column;
gap: 4px;
}
.mnav-item {
width: 100%;
padding: 14px 18px;
background: transparent;
color: var(--text-d, #1f2a1a);
border: 0;
border-radius: 10px;
font-family: var(--sans, "Outfit", sans-serif);
font-size: 16px;
font-weight: 500;
text-align: left;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
transition: background 160ms ease;
}
.mnav-item:hover {
background: rgba(74, 93, 35, 0.06);
}
.mnav-item:focus-visible {
background: rgba(74, 93, 35, 0.06);
outline: 2px solid var(--olive, #4a5d23);
outline-offset: -2px;
}
.mnav-item.act {
background: rgba(74, 93, 35, 0.1);
color: var(--olive, #4a5d23);
font-weight: 600;
}
.mnav-item .nbadge {
background: var(--olive, #4a5d23);
color: #fff;
font-size: 11px;
padding: 2px 8px;
border-radius: 100px;
font-weight: 700;
line-height: 1.4;
}
.mnav-item .nbadge-unread {
background: var(--gold, #c8a951);
color: #3a2f00;
}
/* Staggered entry — mnav-items children fade up in sequence. */
@media (prefers-reduced-motion: no-preference) {
.mnav .mnav-cta {
animation: mnavSlideUp 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.mnav .mnav-item {
opacity: 0;
transform: translateY(8px);
animation: mnavSlideUp 360ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mnav .mnav-item:nth-child(1) {
animation-delay: 80ms;
}
.mnav .mnav-item:nth-child(2) {
animation-delay: 130ms;
}
.mnav .mnav-item:nth-child(3) {
animation-delay: 180ms;
}
.mnav .mnav-item:nth-child(4) {
animation-delay: 230ms;
}
.mnav .mnav-item:nth-child(5) {
animation-delay: 280ms;
}
.mnav .mnav-item:nth-child(6) {
animation-delay: 330ms;
}
}
@keyframes mnavSlideUp {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* === fix-pass 2026-05-27 — cancel-trip + forgot-password === */
:root {
--danger: #b91c1c;
--danger-soft: #fee2e2;
--danger-border: #fca5a5;
}
.tkt-cancel-btn {
background: none;
border: 1px solid var(--danger-border);
color: var(--danger);
padding: 8px 16px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
line-height: 1.2;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.tkt-cancel-btn:hover,
.tkt-cancel-btn:focus-visible {
background: var(--danger-soft);
border-color: var(--danger);
outline: none;
}
.tkt-cancel-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.22);
}
.auth-forgot {
margin-top: 10px;
text-align: right;
}
.kw-auth-link {
background: none;
border: 0;
padding: 4px 2px;
font: inherit;
color: var(--olive, #4a5d23);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
border-radius: 4px;
}
.kw-auth-link:hover,
.kw-auth-link:focus-visible {
color: #2e3c14;
outline: none;
}
.kw-auth-link:focus-visible {
box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.25);
}
/* === avatar fallback 2026-05-28 === */
.p-av,
.ep-avatar,
.adm-user-avatar {
position: relative;
}
.kw-av-img-wrap {
position: absolute;
inset: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.kw-av-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.p-av-letter {
position: relative;
z-index: 0;
}
.p-av-badge,
.ep-avatar .ep-badge,
.adm-user-avatar .adm-badge {
z-index: 2;
}
/* === chat-av fallback 2026-05-28 === */
.chat-av-initial { position: relative; }
/* ════════════════════════════════════════════════════════════════════
GOLDEN HOUR — WAVE 1B · Aurora wash (spec §4 Wave 1B, 2026-06-01)
WHAT: a slow, low-opacity "aurora" of golden-hour light behind TWO
sections only — Guest Reviews (#reviews) and the Island CTA card
(.island-cta). Sand / seafoam / dusk-gold radial blobs that breathe and
drift over ~22-26s. Decorative atmosphere, not a feature.
WHY pure CSS (no JS): Wave 1A's sun is scroll-DRIVEN (a value per frame)
so it lives in the rAF loop. This wash is AMBIENT — it loops on its own
clock — so a CSS @keyframes runs 100% on the compositor with zero
main-thread cost. Cheapest possible always-on motion.
GPU-only (spec: "transform/opacity, compositor-only"): the radial
gradients are painted ONCE into the layer; the animation moves only
`transform` + `opacity` (both compositor properties). No layout, no
per-frame repaint.
AA BY CONSTRUCTION (spec: "never drops text below AA on the booking
band"): each wash is a separate layer pinned BELOW content (aurora
z-index 0 vs content z-index 1/2). Text never composites through the
glow — the section's own background decides contrast. Verified
empirically at the BRIGHTEST animation frame, not at rest.
CTA = GATED WHISPER (4-voice council, 2026-06-01): the Island CTA is
already a 5-layer motion stack (glow + shimmer + 2 waves + 2 trees), so
its wash is deliberately faint, CORNER-BIASED away from the bottom-centre
.island-cta-note line, and runs slower + reversed (26s) so it never syncs
with the existing 4s glow — depth, not a second strobe. (The note's own
rgba(255,255,255,.45) contrast is a PRE-EXISTING condition, out of Wave-1B
scope; this layer is positioned not to lift luminance under it.)
REDUCED MOTION: animation off, pinned to a gentle static rest frame
(mirrors the hero-block convention), will-change released.
════════════════════════════════════════════════════════════════════ */
:root {
/* Aurora palette as RGB triplets so each gradient sets its own alpha.
Derived from locked brand + Palette-B tokens — NOT new accents:
sand ≈ Palette-B CTA stop #f0dcb6
dusk-gold = --gold #c8a951 (the page's existing gold accent)
seafoam = a desaturated tropical green kept at low alpha so it
reads as coastal atmosphere, never a competing accent
(Color-Consistency-Lock safe). */
--gh-sand: 240, 220, 182;
--gh-dusk-gold: 200, 169, 81;
--gh-seafoam: 150, 188, 166;
}
/* Two keyframes (one per surface) with HARD-CODED opacity. This was one shared
@keyframes reading per-element var(--gh-o1/--gh-o2) — but custom properties
inside @keyframes silently fall back on Safari < 15.4 (still a slice of PH
iOS), which would animate the CTA whisper at the brighter fallback. Two
keyframes remove that dependency. Transform animates translate + a tiny scale
only — NO rotate (rotate forces a CPU re-raster of the gradient on layer
promotion → first-scroll jank on cheap Android). Seamless loop (0%/100%
identical); gentle opacity breath. The CTA drifts the OPPOSITE direction +
slower so it never syncs with the card's existing 4s glow. */
@keyframes ghAuroraReviews {
0%, 100% { transform: translate3d(-1.5%, -1%, 0) scale(1); opacity: 0.55; }
50% { transform: translate3d(2%, 1.5%, 0) scale(1.05); opacity: 0.78; }
}
@keyframes ghAuroraCta {
0%, 100% { transform: translate3d(1.5%, 1%, 0) scale(1); opacity: 0.22; }
50% { transform: translate3d(-2%, -1.5%, 0) scale(1.05); opacity: 0.36; }
}
/* ── Reviews: light pale-olive section (#eef3e5) → warm sand rising from
below, with a dusk-gold + seafoam whisper up top. The showcase surface. */
#reviews {
position: relative; /* containing block for the aurora layer */
overflow: hidden; /* crops the drifting layer. The carousel arrows
(.rev-nav) are display:none on mobile and sit inside
the section on desktop (ctn 48px pad), so this never
clips them. isolation:isolate removed — position +
the child z-index below already order the layer, and
isolate would trap any future fixed descendant. */
}
#reviews > .ctn {
position: relative;
z-index: 1; /* all heading + carousel content above the wash */
}
#reviews::before {
content: "";
position: absolute;
inset: -12%; /* oversized so drift never reveals an edge; trimmed
from -20% to shrink the promoted GPU layer. Margin
(12%) > translate (2%) + scale growth (2.5%). */
z-index: 0; /* below content; above the section background */
pointer-events: none;
background:
radial-gradient(38% 48% at 20% 28%, rgba(var(--gh-dusk-gold), 0.22), transparent 70%),
radial-gradient(42% 52% at 82% 22%, rgba(var(--gh-seafoam), 0.16), transparent 72%),
radial-gradient(52% 50% at 50% 92%, rgba(var(--gh-sand), 0.5), transparent 72%);
/* symmetric bezier (not ease-in-out) avoids a loop-boundary frame drop on
some budget Android Chromium builds. No will-change: the browser already
promotes an actively-animating transform/opacity layer, so an eager
always-on hint just wastes GPU memory before the section scrolls in. */
animation: ghAuroraReviews 22s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* ── Island CTA: dark olive card, ALREADY richly decorated. The wash here is a
faint whisper, CORNER-BIASED (top-left, top-right, bottom-left) so the
bottom-centre note line is never lit from behind. z-index 0 keeps it below
the shimmer (::after z1) and content (z2) → white text stays crisp (the
::before may paint above or below the existing .island-cta-bg glow depending
on tree order — that's fine, both are faint and below all text). Seafoam is
dialled to a near-zero whisper here: the page accent is olive+gold, and on
this busy dark card the warm gold alone carries the golden-hour read
(Color-Consistency-Lock). */
.island-cta::before {
content: "";
position: absolute;
inset: -10%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(32% 40% at 16% 20%, rgba(var(--gh-dusk-gold), 0.34), transparent 68%),
radial-gradient(34% 42% at 86% 16%, rgba(var(--gh-seafoam), 0.1), transparent 70%),
radial-gradient(26% 30% at 12% 80%, rgba(var(--gh-sand), 0.26), transparent 70%);
animation: ghAuroraCta 26s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* Reduced motion: no drift. Pin each wash to its own 0%-keyframe position (so a
mid-session toggle doesn't snap) at the CALMEST opacity — at or below each
animation's rest value, because reduced-motion should read quieter, not
brighter. (The global catch-all at the top of this file also kills the
animation; this is the explicit, intentional rest state.) */
@media (prefers-reduced-motion: reduce) {
#reviews::before,
.island-cta::before { animation: none !important; }
#reviews::before { transform: translate3d(-1.5%, -1%, 0); opacity: 0.5; }
.island-cta::before { transform: translate3d(1.5%, 1%, 0); opacity: 0.2; }
}
/* ═══════════════════════════════════════════════════════════════════════
Booking Confirmation generator (OWNER-ONLY) — editorial form + live
canvas preview. Mobile-first: the form stacks ABOVE the preview on phones
and sits side-by-side from 1024px. Inputs are >=16px (no iOS zoom on focus)
and >=44px tall (touch targets); the Download bar is sticky + safe-area
padded; all motion respects prefers-reduced-motion.
═══════════════════════════════════════════════════════════════════════ */
.cg-wrap { max-width: 1120px; margin: 0 auto; padding-bottom: 132px; }
.cg-lead {
color: var(--text-m);
font-family: var(--sans);
font-size: 15px;
line-height: 1.55;
max-width: 60ch;
margin: 4px 0 22px;
}
.cg-stage { display: flex; flex-direction: column; gap: 26px; }
/* ── Form ── */
.cg-form { display: grid; grid-template-columns: 1fr; gap: 16px; align-content: start; }
.cg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cg-field {
display: flex;
flex-direction: column;
gap: 7px;
min-width: 0;
border: 0;
margin: 0;
padding: 0;
}
.cg-field-pax { max-width: 130px; }
.cg-label {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-m);
padding: 0;
}
.cg-input {
font-family: var(--sans);
font-size: 16px; /* >=16px: never trips iOS focus-zoom */
line-height: 1.4;
color: var(--text-d);
background: #fff;
border: 1px solid rgba(74, 93, 35, 0.22);
border-radius: 12px;
padding: 12px 14px;
min-height: 48px; /* >=44px touch target */
width: 100%;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.cg-input::placeholder { color: rgba(93, 99, 88, 0.6); }
.cg-input:focus-visible {
outline: none;
border-color: var(--olive);
box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.16);
}
.cg-textarea { resize: vertical; min-height: 66px; line-height: 1.5; }
select.cg-input {
padding-right: 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a5d23' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
}
.cg-paystate { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.cg-paystate .cg-label { width: 100%; }
.cg-radio {
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--sans);
font-size: 15px;
color: var(--text-d);
min-height: 44px;
padding: 9px 18px;
border: 1px solid rgba(74, 93, 35, 0.28);
border-radius: 999px;
background: transparent;
cursor: pointer;
transition: background-color 180ms cubic-bezier(0.23, 1, 0.32, 1),
color 180ms cubic-bezier(0.23, 1, 0.32, 1),
border-color 180ms cubic-bezier(0.23, 1, 0.32, 1),
box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1),
transform 140ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
.cg-radio:hover { border-color: var(--olive); background: rgba(74, 93, 35, 0.06); }
}
.cg-radio:active { transform: scale(0.97); }
.cg-radio:has(input:checked) {
background: var(--olive);
border-color: var(--olive);
color: var(--cream);
font-weight: 600;
box-shadow: 0 2px 10px -3px rgba(74, 93, 35, 0.5);
}
.cg-radio:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(74, 93, 35, 0.22); }
.cg-radio input { width: 20px; height: 20px; accent-color: var(--olive); }
@media (prefers-reduced-motion: reduce) {
.cg-radio {
transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.cg-radio:active { transform: none; }
}
/* ── Live preview ── */
.cg-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cg-canvas-frame {
width: 100%;
max-width: 520px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 18px 50px -22px rgba(31, 42, 26, 0.45), 0 2px 8px rgba(31, 42, 26, 0.08);
}
.cg-canvas { display: block; width: 100%; height: auto; background: var(--cream); }
.cg-preview-note {
font-family: var(--sans);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-m);
margin: 0;
}
/* ── Sticky download bar (safe-area aware; no full-bleed → no h-overflow) ── */
.cg-actionbar {
position: sticky;
bottom: 0;
z-index: 20;
display: flex;
justify-content: center;
margin-top: 22px;
padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
background: linear-gradient(to top, var(--cream) 64%, rgba(250, 249, 246, 0));
}
.cg-download {
font-family: var(--sans);
font-size: 16px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--cream);
background: var(--olive);
border: 0;
border-radius: 999px;
padding: 15px 40px;
min-height: 52px;
width: 100%;
max-width: 420px;
cursor: pointer;
box-shadow: 0 10px 26px -10px rgba(74, 93, 35, 0.6);
transition: transform 160ms cubic-bezier(0.23, 1, 0.32, 1), background-color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
.cg-download:hover { background: #3c4d1c; }
}
.cg-download:active { transform: scale(0.97); }
.cg-download:focus-visible { outline: 3px solid var(--olive); outline-offset: 3px; }
/* ── Load-existing-booking: select + explicit Load button (a bare onchange
select changes context on arrow-key traversal — WCAG 3.2.2). ── */
.cg-loadrow { display: flex; gap: 10px; align-items: stretch; }
.cg-loadrow .cg-input { flex: 1 1 auto; min-width: 0; }
.cg-load-btn {
flex: 0 0 auto;
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
color: var(--olive);
background: rgba(74, 93, 35, 0.08);
border: 1px solid rgba(74, 93, 35, 0.3);
border-radius: 12px;
padding: 0 20px;
min-height: 48px;
cursor: pointer;
transition: background-color 160ms ease, transform 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
.cg-load-btn:hover { background: rgba(74, 93, 35, 0.14); }
}
.cg-load-btn:active { transform: scale(0.97); }
.cg-load-btn:focus-visible { outline: 3px solid var(--olive); outline-offset: 2px; }
/* ── Visually-hidden live region for the payment-state announcement ── */
.cg-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ── Desktop: form + sticky preview side-by-side ── */
@media (min-width: 1024px) {
.cg-stage { flex-direction: row; align-items: flex-start; gap: 40px; }
.cg-form { flex: 1 1 0; max-width: 460px; }
.cg-preview { flex: 1 1 0; position: sticky; top: 92px; }
.cg-actionbar {
position: static;
justify-content: flex-start;
margin-top: 24px;
padding: 0;
background: none;
}
.cg-download { width: auto; }
.cg-wrap { padding-bottom: 60px; }
}
/* ── Small phones: collapse paired rows so date/number fields breathe ── */
@media (max-width: 380px) {
.cg-row { grid-template-columns: 1fr; }
.cg-field-pax { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
.cg-input, .cg-download, .cg-load-btn { transition: none; }
.cg-download:active, .cg-load-btn:active { transform: none; }
}