/* ------------------------------ Contact/Return scoped styles Prefix: .cr- (to avoid collisions) ------------------------------ */ .fade-bg { margin: 0 auto 10px; max-width: 1100px; padding: 18px 14px; font-size: clamp(26px, 3vw, 34px); font-weight: 900; letter-spacing: .02em; background: linear-gradient(135deg,#111827 0%,#1f2937 50%,#0ea5e9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .cr-container { max-width: 1100px; margin: 0 auto 60px; padding: 0 14px; color: #0f172a; } .cr-intro, .cr-outro { font-size: 1rem; line-height: 1.6; color: #334155; margin-bottom: 16px; } .cr-grid { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; } /* Cards */ .cr-card { grid-column: span 12; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; box-shadow: 0 8px 20px rgba(15,23,42,.04); } @media (min-width: 720px) { .cr-card { grid-column: span 6; } } @media (min-width: 1024px) { .cr-card { grid-column: span 4; } } .cr-card-title { margin: 0 0 8px; font-size: 1.05rem; font-weight: 800; color: #0b1220; } .cr-note { margin: 8px 0 12px; font-size: .95rem; color: #64748b; } /* Primary link pill */ .cr-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid #0ea5e9; background: #e0f2fe; color: #075985; text-decoration: none; font-weight: 700; } .cr-link:hover { background: #bae6fd; } /* Secondary (ghost) button */ .cr-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff; color: #0b1220; text-decoration: none; font-weight: 600; } .cr-ghost:hover { background: #f8fafc; } /* Opening hours list */ .cr-hours { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .cr-hours li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px; font-size: .95rem; } /* Social links row */ .cr-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .cr-social-link { display: inline-flex; align-items: center; padding: 8px 12px; border-radius: 10px; background: #0b1220; color: #fff; text-decoration: none; font-weight: 600; border: 1px solid #111827; } .cr-social-link:hover { filter: brightness(1.05); } /* Divider */ .cr-sep { border: 0; height: 1px; background: linear-gradient(90deg,transparent, #e5e7eb, transparent); margin: 24px 0; } /* Dark mode (if has .dark) */ html.dark .cr-container { color: #e5e7eb; } html.dark .cr-card { background: #0b0b0c; border-color: #1f2937; box-shadow: none; } html.dark .cr-card-title { color: #e5e7eb; } html.dark .cr-intro, html.dark .cr-outro { color: #cbd5e1; } html.dark .cr-hours li { background: #0f172a; border-color: #1f2937; color: #e5e7eb; } html.dark .cr-link { background: #072a3a; color: #e0f2fe; border-color: #0ea5e9; } html.dark .cr-ghost { background: #0b0b0c; color: #e5e7eb; border-color: #1f2937; } html.dark .cr-sep { background: linear-gradient(90deg,transparent, #1f2937, transparent); } /* Small utilities */ .not-italic { font-style: normal; } /* ========================================= Legal / Terms styles Prefix: .lg- Works with light & dark; minimal overrides ========================================= */ /* Matches your existing gradient title pattern */ .fade-bg { margin: 0 auto 10px; max-width: 1100px; padding: 18px 14px; font-size: clamp(26px, 3vw, 34px); font-weight: 900; letter-spacing: .02em; background: linear-gradient(135deg,#111827 0%,#1f2937 50%,#0ea5e9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Layout */ .lg-container { max-width: 1100px; margin: 0 auto 60px; padding: 0 14px; color: #0f172a; } .lg-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 960px) { .lg-grid { grid-template-columns: 260px 1fr; } } .lg-hero { background: #eef6ff; border: 1px solid #cfe8ff; border-radius: 14px; padding: 16px; margin-bottom: 14px; } .lg-hero-title { font-weight: 800; margin: 0 0 6px; } /* TOC */ .lg-toc { position: sticky; top: 14px; align-self: start; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; box-shadow: 0 8px 20px rgba(15,23,42,.04); } /* Hide TOC on mobile */ @media (max-width: 767px) { .lg-toc { display: none; } } .lg-toc h3 { margin: 0 0 10px; font-size: 14px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #0b1220; } .lg-toc nav { display: grid; gap: 6px; max-height: 70vh; overflow: auto; } .lg-toc a { text-decoration: none; color: #0b1220; font-size: .95rem; padding: 6px 8px; border-radius: 8px; } .lg-toc a:hover { background: #f3f4f6; } /* Cards */ .lg-content { display: grid; gap: 14px; } .lg-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; box-shadow: 0 8px 20px rgba(15,23,42,.04); } .lg-card h2 { margin: 0 0 8px; font-size: 1.25rem; } .lg-card h3 { margin: 12px 0 6px; font-size: 1.05rem; } /* Bullets & notes */ .lg-bullets { margin: 8px 0; padding-left: 18px; } .lg-bullets li { margin: 4px 0; } .lg-note { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #e5e7eb; } .lg-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 2px; } .lg-links a { display: inline-block; padding: 6px 10px; border-radius: 10px; border: 1px solid #cfe8ff; background: #eef6ff; color: #075985; text-decoration: none; font-weight: 600; } .lg-links a:hover { background: #dbeafe; } /* Contact box */ .lg-contact p { margin: 4px 0; } /* Table */ .lg-table-wrap { overflow-x: auto; } .lg-table { width: 100%; border-collapse: collapse; } .lg-table th, .lg-table td { text-align: left; border-bottom: 1px solid #e5e7eb; padding: 10px 8px; } .lg-table thead th { background: #f3f4f6; font-weight: 800; } /* Dark mode support if app uses html.dark */ html.dark .lg-container { color: #e5e7eb; } html.dark .lg-hero { background: #0b1a2a; border-color: #15314d; } html.dark .lg-toc { background: #0b0b0c; border-color: #1f2937; box-shadow: none; } html.dark .lg-toc h3 { color: #e5e7eb; } html.dark .lg-toc a { color: #e5e7eb; } html.dark .lg-toc a:hover { background: #111827; } html.dark .lg-card { background: #0b0b0c; border-color: #1f2937; box-shadow: none; } html.dark .lg-links a { background: #072a3a; border-color: #0ea5e9; color: #e0f2fe; } html.dark .lg-note { background: #0f172a; border-color: #1f2937; } html.dark .lg-table thead th { background: #0f172a; } html.dark .lg-table th, html.dark .lg-table td { border-color: #1f2937; } /* ========================================= Return / Refund styles Prefix: .rp- Matches your legal pages + dark mode ========================================= */ /* Title gradient (shared) */ .fade-bg { margin: 0 auto 10px; max-width: 1100px; padding: 18px 14px; font-size: clamp(26px, 3vw, 34px); font-weight: 900; letter-spacing: .02em; background: linear-gradient(135deg,#111827 0%,#1f2937 50%,#10b981 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Layout */ .rp-container { max-width: 1100px; margin: 0 auto 60px; padding: 0 14px; color: #0f172a; } .rp-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } @media (min-width: 960px) { .rp-grid { grid-template-columns: 260px 1fr; } } /* Hero */ .rp-hero { background: #ecfdf5; border: 1px solid #bbf7d0; border-radius: 14px; padding: 16px; margin-bottom: 14px; } .rp-hero-title { font-weight: 800; margin: 0 0 8px; font-size: 1.05rem; } .rp-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .rp-badge { display: inline-block; border: 1px solid #bbf7d0; background: #d1fae5; color: #065f46; padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; } /* TOC */ .rp-toc { position: sticky; top: 14px; align-self: start; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 14px; box-shadow: 0 8px 20px rgba(15,23,42,.04); } .rp-toc h3 { margin: 0 0 10px; font-size: 14px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: #0b1220; } .rp-toc nav { display: grid; gap: 6px; max-height: 70vh; overflow: auto; } .rp-toc a { text-decoration: none; color: #0b1220; font-size: .95rem; padding: 6px 8px; border-radius: 8px; } .rp-toc a:hover { background: #f3f4f6; } /* Cards */ .rp-content { display: grid; gap: 14px; } .rp-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px; box-shadow: 0 8px 20px rgba(15,23,42,.04); } .rp-card h2 { margin: 0 0 8px; font-size: 1.25rem; } /* Lists */ .rp-list { margin: 8px 0; padding-left: 18px; } .rp-list li { margin: 5px 0; } .rp-steps { margin: 10px 0; padding-left: 18px; } .rp-steps li { margin: 6px 0; } /* Notes */ .rp-note { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #e5e7eb; } /* Table */ .rp-table-wrap { overflow-x: auto; } .rp-table { width: 100%; border-collapse: collapse; } .rp-table th, .rp-table td { text-align: left; border-bottom: 1px solid #e5e7eb; padding: 10px 8px; } .rp-table thead th { background: #f3f4f6; font-weight: 800; } /* Contact */ .rp-contact p { margin: 4px 0; } /* Dark mode (if html.dark is used globally) */ html.dark .rp-container { color: #e5e7eb; } html.dark .rp-hero { background: #072b22; border-color: #064e3b; } html.dark .rp-badge { background: #064e3b; border-color: #10b981; color: #d1fae5; } html.dark .rp-toc { background: #0b0b0c; border-color: #1f2937; box-shadow: none; } html.dark .rp-toc h3 { color: #e5e7eb; } html.dark .rp-toc a { color: #e5e7eb; } html.dark .rp-toc a:hover { background: #111827; } html.dark .rp-card { background: #0b0b0c; border-color: #1f2937; box-shadow: none; } html.dark .rp-note { background: #0f172a; border-color: #1f2937; } html.dark .rp-table thead th { background: #0f172a; } html.dark .rp-table th, html.dark .rp-table td { border-color: #1f2937; }