/* ========================================================================== BUY-ANYTHING-INCHINA — consumer theme (light) HAND-AUTHORED. build.js never generates or prunes this file. Loaded only on the individual-buyer tree. The business pages stay dark because that reads as industrial and precise, which suits a procurement audience. An individual buyer deciding whether a parcel is worth it needs the opposite: light, airy, friendly, unthreatening — closer to a shop than to a spec sheet. Every rule is scoped under [data-mode="c"] on , so this file cannot leak into the business pages even if a selector here is wrong. ========================================================================== */ [data-mode="c"] { /* * Palette. The background is the single most-visible choice on this side, so it is * isolated here as --ce-bg / --ce-bg-soft: change those two values to re-tint the * whole consumer tree without touching anything else. * * Deliberately warm rather than cool. A blue-grey (#f7f9fb, the first attempt) reads * clinical and corporate — the opposite of the "friendly shop" this side is for. * A barely-there warm off-white with a hint of green keeps it soft and inviting. */ --ce-bg: #fbf9f4; /* page background — warm off-white */ --ce-bg-soft: #fffdf9; /* raised surfaces, slightly brighter */ --ce-tint: rgba(18, 163, 122, 0.05); --bg: var(--ce-bg); --bg-soft: var(--ce-bg-soft); --panel: #ffffff; --panel-2: #f5f1e9; --line: #eae3d6; --line-soft: #f2ece1; --fg: #1c2632; --fg-dim: #55616e; --fg-mute: #8a8f95; --accent: #12a37a; --accent-ink: #ffffff; --accent-soft: rgba(18, 163, 122, 0.10); --blue: #2f7de1; --amber: #b26a00; --danger: #c94141; --radius: 18px; --radius-sm: 14px; --radius-lg: 30px; --shadow: 0 2px 4px rgba(20, 32, 46, 0.04), 0 14px 40px -18px rgba(20, 32, 46, 0.22); --ring: 0 0 0 4px rgba(18, 163, 122, 0.18); } /* the dark theme paints a fixed glow behind the page; the light theme must not */ [data-mode="c"] body { background: var(--bg); color: var(--fg); font-size: 17px; line-height: 1.7; } [data-mode="c"] body::before { height: 46vh; background: radial-gradient(58% 58% at 50% 0%, rgba(18, 163, 122, 0.10), transparent 72%), radial-gradient(42% 42% at 88% 6%, rgba(47, 125, 225, 0.07), transparent 72%); } /* --------------------------------------------------------------- header */ [data-mode="c"] .site-header { background: rgba(255, 255, 255, 0.9); border-bottom-color: var(--line); backdrop-filter: blur(16px); } [data-mode="c"] .brand { color: var(--fg); } [data-mode="c"] .brand small { color: var(--fg-mute); } [data-mode="c"] .brand .mark { color: #ffffff; } [data-mode="c"] .nav a { color: var(--fg-dim); } [data-mode="c"] .nav a:hover { color: var(--fg); } [data-mode="c"] .mode-switch { background: #ffffff; border-color: var(--line); color: var(--fg-dim); box-shadow: 0 1px 2px rgba(20, 32, 46, 0.05); } [data-mode="c"] .mode-switch:hover { background: var(--panel-2); border-color: #d6ccbb; } [data-mode="c"] .mode-switch .mode-current { opacity: 1; } [data-mode="c"] .lang-switch > summary { background: #ffffff; border-color: var(--line); color: var(--fg-dim); box-shadow: 0 1px 2px rgba(20, 32, 46, 0.05); } [data-mode="c"] .lang-switch > summary:hover { color: var(--fg); border-color: #d6ccbb; } [data-mode="c"] .lang-switch[open] > summary { border-color: var(--accent); color: var(--fg); } [data-mode="c"] .lang-menu { background: #ffffff; border-color: var(--line); box-shadow: 0 24px 60px -20px rgba(20, 32, 46, 0.28); } [data-mode="c"] .lang-menu a { color: var(--fg-dim); } [data-mode="c"] .lang-menu a:hover { background: var(--panel-2); color: var(--fg); } [data-mode="c"] .lang-menu a.is-current { background: var(--accent-soft); color: var(--accent); } [data-mode="c"] .lang-group + .lang-group { border-top-color: var(--line); } [data-mode="c"] .lang-group-label { color: var(--fg-mute); } /* --------------------------------------------------------------- buttons */ [data-mode="c"] .btn { background: #ffffff; border-color: var(--line); color: var(--fg); box-shadow: 0 1px 2px rgba(20, 32, 46, 0.05); } [data-mode="c"] .btn:hover { border-color: #d6ccbb; background: #ffffff; } [data-mode="c"] .btn-primary { background: var(--accent); color: #ffffff; border-color: transparent; box-shadow: 0 10px 24px -10px rgba(18, 163, 122, 0.6); } [data-mode="c"] .btn-primary:hover { background: #0f9069; } [data-mode="c"] .btn-ghost { background: transparent; box-shadow: none; } /* ----------------------------------------------------------------- cards */ [data-mode="c"] .card, [data-mode="c"] .trust div, [data-mode="c"] .cap-card { background: #ffffff; border-color: var(--line); box-shadow: 0 1px 2px rgba(20, 32, 46, 0.04), 0 10px 30px -22px rgba(20, 32, 46, 0.18); } [data-mode="c"] .card .icon { background: var(--accent-soft); border-color: transparent; color: var(--accent); } [data-mode="c"] .ce-signpost { background: linear-gradient(180deg, #ffffff, #f7f3ea); border-color: var(--line); border-left-color: var(--accent); border-right-color: var(--line); } /* --------------------------------------------------------------- sections */ [data-mode="c"] .band { border-top-color: var(--line-soft); } [data-mode="c"] .kicker { color: var(--accent); letter-spacing: 0.16em; } [data-mode="c"] .hero .lede, [data-mode="c"] .band-head p, [data-mode="c"] .qa-lead { color: var(--fg-dim); } [data-mode="c"] .qa-head h1 { color: var(--fg); } [data-mode="c"] .step { border-top-color: var(--line); } [data-mode="c"] .step:last-child { border-bottom-color: var(--line); } [data-mode="c"] .step .num { color: var(--accent); } [data-mode="c"] .step .tag { color: var(--fg-mute); border-color: var(--line); background: #ffffff; } [data-mode="c"] .step p { color: var(--fg-dim); } /* --------------------------------------------------------------- tables */ [data-mode="c"] .compare { background: #ffffff; border-color: var(--line); } [data-mode="c"] .compare th { background: var(--panel-2); color: var(--fg-mute); border-bottom-color: var(--line); } [data-mode="c"] .compare td { border-bottom-color: var(--line-soft); color: var(--fg-dim); } [data-mode="c"] .compare td:first-child { color: var(--fg-mute); } [data-mode="c"] .compare .yes { color: var(--accent); } [data-mode="c"] .compare .no { color: var(--fg-dim); } /* ------------------------------------------------------------------ FAQ */ [data-mode="c"] details.faq { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0 22px; margin-bottom: 10px; } [data-mode="c"] details.faq:last-of-type { border-bottom: 1px solid var(--line); } [data-mode="c"] details.faq summary { padding: 20px 44px 20px 0; font-size: 17px; } [data-mode="c"] details.faq summary::after { color: var(--accent); } [data-mode="c"] details.faq .answer { padding: 0 0 22px; color: var(--fg-dim); } /* ----------------------------------------------------------------- form */ [data-mode="c"] .form-shell { background: #ffffff; border-color: var(--line); box-shadow: 0 2px 6px rgba(20, 32, 46, 0.04), 0 26px 60px -40px rgba(20, 32, 46, 0.35); } [data-mode="c"] legend { color: var(--fg-mute); } [data-mode="c"] .field > label { color: var(--fg); } [data-mode="c"] .field .hint, [data-mode="c"] .form-actions .note { color: var(--fg-mute); } [data-mode="c"] input[type="text"], [data-mode="c"] input[type="email"], [data-mode="c"] input[type="tel"], [data-mode="c"] input[type="url"], [data-mode="c"] input[type="date"], [data-mode="c"] input[type="number"], [data-mode="c"] select, [data-mode="c"] textarea { background: #ffffff; color: var(--fg); border-color: #ddd4c4; } [data-mode="c"] input::placeholder, [data-mode="c"] textarea::placeholder { color: #a09a90; } [data-mode="c"] input:focus, [data-mode="c"] select:focus, [data-mode="c"] textarea:focus { border-color: var(--accent); box-shadow: var(--ring); } [data-mode="c"] select { background-color: #ffffff; background-image: linear-gradient(45deg, transparent 50%, var(--fg-mute) 50%), linear-gradient(135deg, var(--fg-mute) 50%, transparent 50%); } [data-mode="c"] .choice span { background: #ffffff; border-color: #ddd4c4; color: var(--fg-dim); } [data-mode="c"] .choice span:hover { border-color: #c6bbaa; color: var(--fg); } [data-mode="c"] .choice input:checked + span { background: var(--accent-soft); border-color: var(--accent); color: #0b6d52; font-weight: 600; } [data-mode="c"] .dropzone { background: var(--ce-bg-soft); border-color: #d3c9b8; } [data-mode="c"] .dropzone:hover, [data-mode="c"] .dropzone.is-over { border-color: var(--accent); background: rgba(18, 163, 122, 0.05); } [data-mode="c"] .dropzone p { color: var(--fg-mute); } [data-mode="c"] #fileList li { background: var(--panel-2); border-color: var(--line); } [data-mode="c"] .bar { background: #efe8db; } [data-mode="c"] .mini-steps button { background: #ffffff; border-color: var(--line); color: var(--fg-mute); } [data-mode="c"] .mini-steps button[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); color: #0b6d52; } [data-mode="c"] .mini-steps button.done { color: var(--fg-dim); } [data-mode="c"] .form-status.ok { background: rgba(18, 163, 122, 0.08); border-color: rgba(18, 163, 122, 0.3); color: #0b6d52; } [data-mode="c"] .form-status.err { background: rgba(201, 65, 65, 0.07); border-color: rgba(201, 65, 65, 0.28); color: #9c2f2f; } [data-mode="c"] .field-error { color: var(--danger); } [data-mode="c"] .field.has-error input, [data-mode="c"] .field.has-error select, [data-mode="c"] .field.has-error textarea { border-color: rgba(201, 65, 65, 0.55); } /* --------------------------------------------------------------- CTA band */ [data-mode="c"] .cta-band { background: radial-gradient(90% 140% at 12% 0%, rgba(18, 163, 122, 0.10), transparent 62%), linear-gradient(180deg, #ffffff, #f8f4ec); border-color: var(--line); box-shadow: 0 1px 2px rgba(20, 32, 46, 0.04), 0 18px 50px -34px rgba(20, 32, 46, 0.3); } /* --------------------------------------------------------------- answers */ [data-mode="c"] .qa-crumbs a { color: var(--fg-mute); } [data-mode="c"] .qa-crumbs [aria-current] { color: var(--fg-dim); } [data-mode="c"] .qa-badge { background: var(--accent-soft); border-color: rgba(18, 163, 122, 0.3); color: #0b6d52; } [data-mode="c"] .qa-badge-3 { background: rgba(178, 106, 0, 0.08); border-color: rgba(178, 106, 0, 0.25); color: var(--amber); } [data-mode="c"] .qa-confidence { color: var(--fg-mute); } [data-mode="c"] .qa-answer p { color: var(--fg); } [data-mode="c"] .qa-related li { color: var(--fg-dim); } [data-mode="c"] .qa-meta { color: var(--fg-mute); } [data-mode="c"] .qa-pitfalls { color: var(--fg-dim); } [data-mode="c"] .qa-sources { border-top-color: var(--line); } [data-mode="c"] .qa-sources h3 { color: var(--fg-mute); } [data-mode="c"] .qa-sources li { color: var(--fg-mute); } [data-mode="c"] .qa-sources a { color: var(--fg-dim); } [data-mode="c"] .qa-question { margin: 0; padding: 18px 22px; border-radius: var(--radius-sm); background: var(--panel-2); border-left: 3px solid var(--accent); color: var(--fg); font-size: 1.02rem; } [data-mode="c"] .qa-redaction { color: var(--fg-mute); font-size: 13.5px; margin: 12px 0 0; } [data-mode="c"] .qa-steps { color: var(--fg-dim); padding-left: 22px; } [data-mode="c"] .qa-steps li { margin-bottom: 8px; } /* --------------------------------------------------------------- footer */ [data-mode="c"] .site-footer { border-top-color: var(--line); background: #ffffff; } [data-mode="c"] .site-footer h4 { color: var(--fg-mute); } [data-mode="c"] .site-footer ul a { color: var(--fg-dim); } [data-mode="c"] .site-footer ul a:hover { color: var(--accent); } [data-mode="c"] .site-footer .about p { color: var(--fg-mute); } [data-mode="c"] .foot-bottom { border-top-color: var(--line); color: var(--fg-mute); } /* ------------------------------------------------------------- tracking */ [data-mode="c"] .timeline li { border-left-color: var(--line); color: var(--fg-dim); } [data-mode="c"] .timeline li::before { background: var(--accent); } [data-mode="c"] .timeline li time { color: var(--fg-mute); } /* ------------------------------------------------- phones and small text */ @media (max-width: 620px) { [data-mode="c"] body { font-size: 16.5px; } [data-mode="c"] .hero { padding-top: 42px; } [data-mode="c"] details.faq summary { padding: 17px 40px 17px 0; font-size: 16px; } [data-mode="c"] details.faq { padding: 0 16px; } } @media print { [data-mode="c"] body { background: #fff; } }