/* ============================================================================ SinoSource — page polish Loaded ONLY by non-index pages, after styles.css, scoped under . The homepage (index.html + homepage.css) never loads this file, so its design is left exactly as-is. Purpose: the secondary pages were flat and low-contrast — cards barely separated from the background and body copy sat too close to it. This layer gives every surface real definition, lifts the muted text on dark sections to a readable level, and adds a consistent, professional typographic rhythm. Light-background sections (e.g. .niche-covers / .covers-item) keep their dark text and are deliberately excluded. ============================================================================ */ /* ---- 1. Surfaces: give cards and panels real definition ------------------ */ .pp .risk-card, .pp .reg-card, .pp .impact-card, .pp .tip-card, .pp .faq-card, .pp .result-card, .pp .incident-card, .pp .plan-block, .pp .sc-check-card, .pp .honest-card__option, .pp .spt__item, .pp .feature-card, .pp .step-card, .pp .info-card, .pp .panel { border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 16px; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 12px 34px -14px rgba(0, 0, 0, 0.7); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease; } /* Interactive lift on the cards that read as “tiles”. */ .pp .risk-card:hover, .pp .reg-card:hover, .pp .impact-card:hover, .pp .tip-card:hover, .pp .result-card:hover, .pp .feature-card:hover, .pp .step-card:hover, .pp .info-card:hover, .pp .panel:hover { transform: translateY(-3px); border-color: rgba(240, 165, 30, 0.42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 48px -16px rgba(0, 0, 0, 0.8); } /* ---- 2. Readability: lift muted copy on dark cards & sections ------------- */ .pp .risk-card__body, .pp .reg-card__desc, .pp .impact-card p, .pp .tip-card p, .pp .panel-sub, .pp .result-card p, .pp .info-card p, .pp .feature-card p, .pp .step-card p { color: #bcbccb; } /* Section intros / lead paragraphs that sat too dim on the dark background. Scoped to content wrappers so nav, footer and light sections are untouched. */ .pp main :is(section, .container) > p, .pp .site-page-v2 :is(section, .container) > p { color: #c4c4d2; } /* ---- 3. Typography: a calmer, more professional reading rhythm ----------- */ .pp main p, .pp .site-page-v2 p, .pp article p { line-height: 1.75; } .pp main :is(h1, h2, h3), .pp .site-page-v2 :is(h1, h2, h3) { letter-spacing: -0.015em; line-height: 1.15; } /* Body links that aren't buttons get a clear, on-brand treatment. */ .pp main a:not(.btn):not([class*="card"]):not([class*="nav"]), .pp .site-page-v2 a:not(.btn):not([class*="card"]):not([class*="nav"]), .pp article a:not(.btn) { color: #f5bc45; text-decoration-color: rgba(245, 188, 69, 0.4); text-underline-offset: 3px; transition: text-decoration-color 0.15s ease; } .pp main a:not(.btn):not([class*="card"]):not([class*="nav"]):hover, .pp .site-page-v2 a:not(.btn):not([class*="card"]):not([class*="nav"]):hover, .pp article a:not(.btn):hover { text-decoration-color: #f5bc45; } /* ---- 4. Eyebrows / section labels: a small accent for structure ---------- */ .pp .eyebrow, .pp .section-eyebrow, .pp [class$="__eyebrow"], .pp [class$="__kicker"] { letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; } /* ---- 5. Accessible focus for keyboard users ------------------------------ */ .pp a:focus-visible, .pp button:focus-visible, .pp [role="button"]:focus-visible, .pp summary:focus-visible { outline: 2px solid #f0a51e; outline-offset: 2px; border-radius: 4px; } /* ---- 6. Ambient page background (opt-in via .pp-ambient) ------------------ The tariff and Safety Gate pages read flat: near-black content over near-black body. This adds soft brand-tinted light and a faint fading grid behind the content (both fixed, low-opacity) so the page has depth without touching text contrast. Applied only to bodies that also carry .pp-ambient. */ body.pp-ambient { background-color: #0a0a10; background-image: radial-gradient(1300px 720px at 15% -6%, rgba(212, 43, 30, 0.20), transparent 60%), radial-gradient(1200px 700px at 92% 8%, rgba(240, 165, 30, 0.14), transparent 58%), radial-gradient(1100px 800px at 80% 48%, rgba(212, 43, 30, 0.10), transparent 55%), radial-gradient(1200px 820px at 8% 62%, rgba(91, 126, 153, 0.11), transparent 55%), radial-gradient(1300px 900px at 55% 100%, rgba(240, 165, 30, 0.09), transparent 60%), linear-gradient(180deg, #12101a 0%, #0a0a10 40%, #0a0a10 100%); background-attachment: fixed; background-repeat: no-repeat; } body.pp-ambient::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse 100% 78% at 50% 0%, #000 42%, transparent 88%); mask-image: radial-gradient(ellipse 100% 78% at 50% 0%, #000 42%, transparent 88%); } /* Tool-page heroes set their own solid dark background, which sits as a flat box in front of the ambient. Clear it on ambient pages so the page glow flows through the hero as one continuous surface. */ body.pp-ambient .tp-hero, body.pp-ambient .tt-hero, body.pp-ambient .tool-hero, body.pp-ambient .calc-hero, body.pp-ambient .sc-hero, body.pp-ambient .cal-hero, body.pp-ambient section.hero { background: transparent !important; } /* ---- 7. De-template the hero eyebrows ----------------------------------- The eyebrows led with a small coloured "live" dot (often pulsing) — a strong AI-SaaS-template tell. Drop that decorative dot. This targets only the dot, which is the first child of the eyebrow; category icons (an