/** * Copyright (c) 2026 DNA Genics, S.L. All rights reserved. * * Shared "premium report card" structural mechanics for regional ancestry * product pages (torn-paper clip-path, layered artwork + corner glow + * bottom scrim, numbered badge, hover lift). Extracted from the bespoke * card recipe first built for ProductAncientEastAsiaV2.cshtml / .css * (there: .aea2-card) so later regional pages can reuse the same mechanics * without copy-pasting the recipe. * * Each region supplies its own palette by setting these custom properties * per element (inline `style` for --prc-card-art, page CSS for tint * variants): * --prc-card-art url(...) painted/photographic plate for the card * --prc-card-art-pos background-position for the art layer (optional) * --prc-card-art-opacity opacity of the art layer (optional, default 0.98) * --prc-card-tint-soft corner glow colour (rgba), set per tint variant * --prc-card-accent icon/number accent colour, set per tint variant * --prc-radius card corner radius (optional, default 14px) * --prc-border-color resting border colour (optional) * --prc-hover-border hover/focus border colour (optional) * --prc-scrim-rgb "r,g,b" triplet used for the bottom scrim gradient * --prc-heading-color card heading colour (optional) * --prc-body-color card paragraph colour (optional) * * A region defines its own `.{prefix}-t-1` .. `.{prefix}-t-6` tint classes * (setting --prc-card-tint-soft / --prc-card-accent) in its own page CSS, * exactly like `.aea2-t-red` / `.aea2-t-jade` etc. are defined locally in * ProductAncientEastAsiaV2.css today, not in this shared file. */ .prc-card { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--prc-radius, 14px); border: 1px solid var(--prc-border-color, rgba(255, 255, 255, 0.09)); background-color: var(--prc-bg, rgba(0, 0, 0, 0.2)); /* Torn-paper silhouette: subtle asymmetric corners, matching the recipe proven on ProductAncientEastAsiaV2.css (.aea2-card). */ clip-path: polygon( 0 10px, 9px 0, calc(100% - 14px) 3px, 100% 13px, calc(100% - 4px) calc(100% - 9px), calc(100% - 16px) 100%, 12px calc(100% - 3px), 2px calc(100% - 14px) ); transition: transform 0.28s ease, border-color 0.28s ease; } /* Layer 1: the artwork plate, swappable per card via --prc-card-art. Kept at near-full strength so commissioned/reused art reads clearly; Layer 2 below only darkens toward the bottom, where title/copy sit. */ .prc-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: var(--prc-card-art, none); background-size: cover; background-position: var(--prc-card-art-pos, center); opacity: var(--prc-card-art-opacity, 0.98); filter: saturate(0.98) contrast(1.03) brightness(1.0); } /* Layer 2: bottom-anchored scrim for text legibility, plus a soft corner glow in the card's accent hue (not a full-card wash) so the artwork itself still carries the visual weight. A shallow top-edge veil is also included so the number/icon/period row (which sits directly on the raw artwork, before the bottom scrim has any strength) stays readable even against bright, high-key photographic plates - it fades out again by ~22% so the mid-card artwork keeps reading clearly. */ .prc-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(130% 90% at 100% 0%, var(--prc-card-tint-soft, transparent) 0%, transparent 58%), linear-gradient(180deg, rgba(var(--prc-scrim-rgb, 10, 10, 10), 0.55) 0%, rgba(var(--prc-scrim-rgb, 10, 10, 10), 0.32) 16%, rgba(var(--prc-scrim-rgb, 10, 10, 10), 0.34) 30%, rgba(var(--prc-scrim-rgb, 10, 10, 10), 0.68) 55%, rgba(var(--prc-scrim-rgb, 10, 10, 10), 0.97) 100%); } .prc-card:hover, .prc-card:focus-within { transform: translateY(-4px); border-color: var(--prc-hover-border, rgba(217, 178, 106, 0.4)); } .prc-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; position: relative; z-index: 1; } .prc-card-num { position: relative; z-index: 1; font-size: 0.82rem; letter-spacing: 0.12em; color: var(--prc-num-color, rgba(217, 178, 106, 0.6)); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.4); } .prc-card-icon { position: relative; z-index: 1; font-size: 1.32rem; color: var(--prc-card-accent, currentColor); /* dna-icon renders via CSS mask + background-color, so text-shadow has no effect here; drop-shadow is the mask-safe equivalent that keeps the glyph legible over bright/high-key artwork. */ filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75)); } .prc-card h3, .prc-card h4 { position: relative; z-index: 1; font-weight: 700; font-size: 1.16rem; line-height: 1.28; margin: 0 0 10px; color: var(--prc-heading-color, #FBF6EC); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 10px rgba(0, 0, 0, 0.55); } .prc-card p { position: relative; z-index: 1; margin: 0; font-size: 0.895rem; line-height: 1.62; color: var(--prc-body-color, rgba(255, 255, 255, 0.72)); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 1px 8px rgba(0, 0, 0, 0.5); } .prc-card-period { position: relative; z-index: 1; display: block; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--prc-card-accent, currentColor); margin-bottom: 8px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.4); } /* Featured-card ribbon badge. Opt-in via an additional badge span inside a .prc-card; uses the card's own tint accent colour (--prc-card-accent) so it automatically matches whichever tint variant the card carries, no new colour tokens required. Static, no entrance animation. The pill stays inside the card. overflow:hidden plus the torn-paper clip-path crop a negative top. */ .prc-card:has(.prc-card-badge) { padding-top: 58px; } .prc-card-badge { position: absolute; top: 18px; right: 16px; max-width: calc(100% - 32px); z-index: 2; display: inline-block; padding: 5px 12px; background-color: var(--prc-card-accent, #D9B26A); color: #14110A; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: none; border-radius: 999px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .prc-card { transition: none; } }