/* * MediRoyal Delivery & Refund — Extra (Plum/Sage) * Scoped: .log-delivery-refund-page * File 2/3 — Policy nav, main layout, step cards, ship cards, location, alert, pack */ /* ── 6. POLICY NAVIGATION TABS ── */ .log-delivery-refund-page .policy-zone { position: relative } /* top uses WP core's own --wp-admin--admin-bar--height var (empty when logged out, 32px desktop / 46px mobile when the admin bar shows) instead of a hardcoded .admin-bar override, so it self-adjusts at any breakpoint without a duplicate rule. Previous .admin-bar .log-delivery-refund-page .policy-nav-wrap{top:152px} override never matched anything — both classes live on the same element, so the descendant combinator between them could never select it. */ .log-delivery-refund-page .policy-nav-wrap { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: sticky; /* --site-header-h (set by log-header.js, tracks the header's real on-screen height via ResizeObserver) already accounts for the admin bar, since it's measured from getBoundingClientRect() against the viewport. The old "calc(6rem + admin-bar-height)" was a fixed guess that didn't match the header's actual height at most widths/scroll states, so this nav ended up sticking partway BEHIND the header — covering its own tabs and making every section unreachable through them. Falls back to the old guess if JS hasn't run yet. */ top: var(--site-header-h, calc(6rem + var(--wp-admin--admin-bar--height, 0px))); z-index: 50 } /* Right-edge fade so an overflowing tab strip visibly hints "more tabs, swipe right" instead of looking like a complete, non-scrollable set. On first load only "Delivery Policy" and almost all of "Packaging & Tracking" fit in view on mobile/narrow widths — Returns/Refund/Support sit fully off-screen with zero visual cue, so users never discover them. Sits on the sticky wrap (already an absolute-positioning context), not the scrolling .policy-nav-inner, so it stays fixed at the edge instead of scrolling away with the content. */ .log-delivery-refund-page .policy-nav-wrap::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; background: linear-gradient(to right, transparent, var(--paper)); pointer-events: none; } /* justify-content:safe center keeps the desktop centered look when tabs fit, but falls back to reachable (start-aligned) scrolling the instant they overflow — at any width, not just the ≤760px case below. Browsers without "safe" support (older Safari) drop the invalid declaration and keep plain "center" from the line before, so the ≤760px flex-start rule stays as their fallback safety net. */ .log-delivery-refund-page .policy-nav-inner { max-width: 1220px; margin: 0 auto; padding: 12px 24px; display: flex; gap: 8px; overflow-x: auto; align-items: center; justify-content: center; justify-content: safe center } .log-delivery-refund-page .policy-nav-inner::-webkit-scrollbar { display: none } .log-delivery-refund-page .pnav-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-600); white-space: nowrap; border-radius: var(--r-pill); border: 1.5px solid transparent; background: transparent; transition: all .25s var(--ease); cursor: pointer; font-family: inherit } .log-delivery-refund-page .pnav-btn:hover { color: var(--plum-700); background: var(--blush-100) } .log-delivery-refund-page .pnav-btn.active { color: var(--plum-700); background: var(--white); border-color: var(--line); box-shadow: var(--shadow-sm) } .log-delivery-refund-page .pnav-btn .icon { width: 13px; height: 13px } /* flex + justify-content:center + overflow-x:auto centers the (wider) content, pushing scrollLeft:0 past the first tab — it becomes unreachable by scrolling. Left-align on mobile so all tabs scroll into view. */ @media (max-width:760px) { .log-delivery-refund-page .policy-nav-inner { justify-content: flex-start } } .log-delivery-refund-page .content-section { display: none } .log-delivery-refund-page .content-section.active { display: block; animation: fadeIn .4s var(--ease) } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(10px) } 100% { opacity: 1; transform: translateY(0) } } /* ── 7. MAIN LAYOUT ── */ .log-delivery-refund-page .main-shell { max-width: 1220px; margin: 0 auto; padding: 60px 24px 80px; display: grid; grid-template-columns: 1fr 320px; gap: 52px; align-items: start } .log-delivery-refund-page .section-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--plum-700); margin-bottom: 14px } .log-delivery-refund-page .section-eyebrow::before { content: ''; width: 20px; height: 2px; background: var(--sage-600); display: inline-block } .log-delivery-refund-page .sec-heading { font-family: var(--display); font-size: clamp(28px, 3.8vw, 44px); font-weight: 700; line-height: 1.1; color: var(--ink-900); margin-bottom: 12px } .log-delivery-refund-page .sec-heading em { font-style: italic; color: var(--plum-700) } .log-delivery-refund-page .sec-intro { font-size: 14.5px; color: var(--gray-600); line-height: 1.75; max-width: 680px; margin-bottom: 36px } /* ── 8. STEP CARDS ── */ .log-delivery-refund-page .steps-stack { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px } .log-delivery-refund-page .step-card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; display: flex; align-items: flex-start; gap: 20px; box-shadow: var(--shadow-sm); transition: box-shadow .3s var(--ease), border-color .3s var(--ease); position: relative; overflow: hidden } .log-delivery-refund-page .step-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(29, 219, 149, .06) 50%, transparent 60%); transform: translateX(-100%); transition: transform .5s var(--ease); pointer-events: none } .log-delivery-refund-page .step-card:hover::after { transform: translateX(100%) } .log-delivery-refund-page .step-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); transition: background .28s var(--ease), box-shadow .28s var(--ease) } .log-delivery-refund-page .step-card:hover { box-shadow: 0 20px 48px rgba(122, 31, 110, .14); border-color: rgba(29, 219, 149, .3) } .log-delivery-refund-page .step-card:hover::before { background: var(--sage-500); box-shadow: 0 0 12px var(--sage-500) } .log-delivery-refund-page .step-icon-wrap { width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0; background: var(--blush-100); display: flex; align-items: center; justify-content: center; color: var(--plum-700); transition: all .35s var(--ease) } .log-delivery-refund-page .step-icon-wrap .icon { width: 22px; height: 22px; transition: transform .35s var(--ease) } .log-delivery-refund-page .step-card:hover .step-icon-wrap { background: rgba(29, 219, 149, .12); color: var(--sage-600); transform: rotate(-8deg) scale(1.12) } .log-delivery-refund-page .step-card:hover .step-icon-wrap .icon { transform: scale(1.1) } .log-delivery-refund-page .step-body h4 { font-size: 15px; font-weight: 700; color: var(--ink-900); margin-bottom: 5px } .log-delivery-refund-page .step-body p { font-size: 13.5px; color: var(--gray-600); line-height: 1.68 } .log-delivery-refund-page .step-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 9px; font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: var(--r-pill); letter-spacing: .04em } .log-delivery-refund-page .step-tag.green { background: rgba(29, 219, 149, .1); color: var(--sage-600) } .log-delivery-refund-page .step-tag.plum { background: var(--blush-100); color: var(--plum-700) } /* ── 9. SHIPPING CARDS ── */ .log-delivery-refund-page .ship-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px } .log-delivery-refund-page .ship-card { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 28px 22px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .4s var(--ease), border-color .4s var(--ease) } .log-delivery-refund-page .ship-card::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 120%, rgba(122, 31, 110, .08), transparent 65%); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none } .log-delivery-refund-page .ship-card:hover::after { opacity: 1 } .log-delivery-refund-page .ship-card:hover { border-color: rgba(122, 31, 110, .3); box-shadow: 0 24px 56px rgba(122, 31, 110, .18) } .log-delivery-refund-page .ship-card.featured { border-color: rgba(29, 219, 149, .4); background: var(--paper-50) } .log-delivery-refund-page .ship-card.featured::after { background: radial-gradient(circle at 50% 120%, rgba(29, 219, 149, .08), transparent 65%) } .log-delivery-refund-page .ship-card.featured:hover { border-color: rgba(29, 219, 149, .6); box-shadow: 0 24px 56px rgba(29, 219, 149, .15) } .log-delivery-refund-page .ship-top-badge { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, var(--sage-600), var(--sage-500)); color: var(--plum-950); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--r-pill) } .log-delivery-refund-page .ship-icon-wrap { width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--blush-100); color: var(--plum-700); transition: all .4s var(--ease) } .log-delivery-refund-page .ship-card.featured .ship-icon-wrap { background: rgba(29, 219, 149, .1); color: var(--sage-600) } .log-delivery-refund-page .ship-icon-wrap .icon { width: 26px; height: 26px; transition: transform .4s var(--ease) } .log-delivery-refund-page .ship-card:hover .ship-icon-wrap { transform: translateY(-4px) scale(1.08); box-shadow: 0 10px 24px rgba(122, 31, 110, .2) } .log-delivery-refund-page .ship-card:hover .ship-icon-wrap .icon { transform: rotate(10deg) } .log-delivery-refund-page .ship-name { font-size: 13.5px; font-weight: 700; color: var(--ink-900); margin-bottom: 6px } .log-delivery-refund-page .ship-time { font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--plum-700); line-height: 1; margin-bottom: 8px; transition: color .3s } .log-delivery-refund-page .ship-card.featured .ship-time { color: var(--sage-600) } .log-delivery-refund-page .ship-card:hover .ship-time { color: var(--plum-600) } .log-delivery-refund-page .ship-desc { font-size: 12.5px; color: var(--gray-600); line-height: 1.6 } /* ── 10. LOCATION PILLS ── */ .log-delivery-refund-page .location-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 32px } .log-delivery-refund-page .loc-pill { display: inline-flex; align-items: center; gap: 9px; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--ink-700); box-shadow: var(--shadow-sm); transition: all .3s var(--ease) } .log-delivery-refund-page .loc-pill:hover { border-color: var(--plum-700); color: var(--plum-700); background: var(--blush-100); transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 20px rgba(122, 31, 110, .15) } .log-delivery-refund-page .loc-pill.more { background: linear-gradient(135deg, var(--plum-950), var(--plum-800)); color: #fff; border-color: transparent } /* ── 11. ALERT BOX ── */ .log-delivery-refund-page .alert-box { display: flex; align-items: flex-start; gap: 14px; background: rgba(29, 219, 149, .07); border: 1.5px solid rgba(29, 219, 149, .22); border-radius: var(--r-md); padding: 18px 20px; margin-bottom: 28px; transition: all .3s var(--ease) } .log-delivery-refund-page .alert-box:hover { background: rgba(29, 219, 149, .1); border-color: rgba(29, 219, 149, .4); transform: translateX(4px) } .log-delivery-refund-page .alert-icon-wrap { width: 36px; height: 36px; border-radius: 10px; background: rgba(29, 219, 149, .12); display: flex; align-items: center; justify-content: center; color: var(--sage-600); flex-shrink: 0; transition: transform .3s var(--ease) } .log-delivery-refund-page .alert-box:hover .alert-icon-wrap { transform: rotate(15deg) scale(1.1) } .log-delivery-refund-page .alert-icon-wrap .icon { width: 16px; height: 16px } .log-delivery-refund-page .alert-box p { font-size: 13.5px; color: var(--ink-700); line-height: 1.7 } .log-delivery-refund-page .alert-box strong { color: var(--plum-700) } .log-delivery-refund-page .alert-box.warn { background: rgba(255, 210, 100, .07); border-color: rgba(255, 210, 100, .3) } .log-delivery-refund-page .alert-box.warn:hover { background: rgba(255, 210, 100, .12); border-color: rgba(255, 210, 100, .5) } .log-delivery-refund-page .alert-box.warn .alert-icon-wrap { background: rgba(255, 210, 100, .15); color: #a07a00 } /* ── 12. PACKAGING GRID ── */ .log-delivery-refund-page .pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 32px } .log-delivery-refund-page .pack-item { background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 28px 18px; text-align: center; box-shadow: var(--shadow-sm); transition: box-shadow .35s var(--ease), border-color .35s var(--ease); position: relative; overflow: hidden } .log-delivery-refund-page .pack-item::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, rgba(29, 219, 149, .07), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none } .log-delivery-refund-page .pack-item:hover::after { opacity: 1 } .log-delivery-refund-page .pack-item:hover { border-color: rgba(29, 219, 149, .35); box-shadow: 0 16px 40px rgba(29, 219, 149, .12) } .log-delivery-refund-page .pack-icon { width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 14px; background: rgba(29, 219, 149, .1); display: flex; align-items: center; justify-content: center; color: var(--sage-600); transition: all .4s var(--ease) } .log-delivery-refund-page .pack-icon .icon { width: 22px; height: 22px; transition: transform .4s var(--ease) } .log-delivery-refund-page .pack-item:hover .pack-icon { background: rgba(29, 219, 149, .2); box-shadow: 0 0 20px rgba(29, 219, 149, .3); transform: translateY(-4px) } .log-delivery-refund-page .pack-item:hover .pack-icon .icon { transform: rotate(-12deg) scale(1.15) } .log-delivery-refund-page .pack-item h5 { font-size: 13px; font-weight: 700; color: var(--ink-900); margin-bottom: 6px } .log-delivery-refund-page .pack-item p { font-size: 12px; color: var(--gray-600); line-height: 1.6 }