/* Research Compound Product Fields — front-end styles
Namespaced under .rcpf- for our own elements; the rest targets standard
WooCommerce classes so it themes the parts Astra leaves largely default
(gallery frame, price, add-to-cart button, product cards) without
touching Astra's header/footer/container/typography. Edit the variables
below, or set colors from Settings > Research Compound Fields. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
--rcpf-ink:#0E1420;
--rcpf-ink-soft:#586174;
--rcpf-ink-faint:#8B93A3;
--rcpf-accent:#5B5FEF;
--rcpf-accent-soft:#EEEEFD;
--rcpf-teal:#12A594;
--rcpf-teal-soft:#E4F7F4;
--rcpf-gold:#C68A2E;
--rcpf-gold-soft:#FBF1DF;
--rcpf-rose:#C4536B;
--rcpf-rose-soft:#FBEAEE;
--rcpf-red:#D0473E;
--rcpf-line:#E4E7EC;
--rcpf-line-soft:#F1F2F5;
--rcpf-radius:12px;
/* Shared soft elevation for the white "panel" cards (molecule,
metrics, mechanism…) — a tight contact shadow plus a wider, faint
ambient one, instead of a flat 1px border doing all the work. */
--rcpf-shadow-card: 0 1px 2px rgba(14,20,32,.05), 0 16px 36px -20px rgba(14,20,32,.16);
--rcpf-display: 'Space Grotesk', sans-serif;
--rcpf-mono: 'JetBrains Mono', monospace;
}
/* =========================================================
SINGLE PRODUCT PAGE
========================================================= */
body.single-product div.product{
align-items: flex-start !important;
}
/* Hard override: force the buy-box back to normal document flow no
matter what set it to sticky/fixed — whether that's a leftover
cached version of this plugin's CSS, or a theme/addon feature like
Astra Pro's built-in "Sticky Add to Cart" for single products. If
you actually want a sticky buy box, this is the block to remove —
but verify on the live site first, since it's what caused the
overlap bug in the previous version of this plugin.
*/
body.single-product div.product .summary.entry-summary,
body.single-product .ast-single-product-sticky-cart,
body.single-product .astra-sticky-add-to-cart{
position: static !important;
top: auto !important;
}
body.single-product div.product .woocommerce-product-gallery{
border-radius: var(--rcpf-radius);
overflow: hidden;
border: 1px solid var(--rcpf-line);
background:#fafafb;
box-shadow: var(--rcpf-shadow-card);
position: relative;
/* No fixed max-width here on purpose. WooCommerce's own default
single-product CSS floats .images and .summary side by side as a
matched pair (each roughly 48% of div.product, e.g. .images{
width:48%;float:left;margin-right:4%} .summary{width:48%;
float:right}). A hardcoded max-width here (600px was tried first)
can end up LARGER than that 48% actually computes to on this site's
container width — and when a floated box doesn't fit next to its
sibling float, the sibling gets pushed down to find room instead of
sitting beside it, which is exactly the huge gap that appeared
above the title/price. Letting this size itself the same way the
summary column already does (100% of whatever float width the
theme hands it) keeps the two columns matched, the way they were
before this was a single image instead of a multi-image gallery. */
}
body.single-product div.product .woocommerce-product-gallery img{
border-radius: 0;
width: 100%;
height: auto;
display: block;
cursor: zoom-in;
transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
body.single-product div.product .woocommerce-product-gallery:hover img{
transform: scale(1.06);
}
/* Product video (when uploaded) replaces the in the exact same
slot — sized/cropped the same way so the hero doesn't jump around
depending on whether a given product has a video or a photo. */
body.single-product div.product .woocommerce-product-gallery video.rcpf-product-video{
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
cursor: default;
}
@media (prefers-reduced-motion: reduce){
body.single-product div.product .woocommerce-product-gallery img{ transition: none !important; }
}
/* Same swap on shop-grid / related-product cards. */
body.woocommerce ul.products li.product video.rcpf-product-video,
body.woocommerce-page ul.products li.product video.rcpf-product-video{
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 8px;
display: block;
}
/* Breadcrumb tidy-up */
body.single-product .woocommerce-breadcrumb{
font-size: 12.5px;
color: var(--rcpf-ink-faint);
margin-bottom: 18px !important;
}
body.single-product .woocommerce-breadcrumb a{ color: var(--rcpf-ink-faint); }
body.single-product .woocommerce-breadcrumb a:hover{ color: var(--rcpf-accent); }
/* Title / price */
body.single-product div.product .product_title{
font-family: var(--rcpf-display);
font-weight:700;
font-size: 30px !important;
letter-spacing:-0.01em;
color: var(--rcpf-ink);
margin-bottom: 4px !important;
}
body.single-product div.product p.price,
body.single-product div.product p.price ins{
color: var(--rcpf-ink);
font-weight: 700;
font-size: 1.7em;
font-family: var(--rcpf-display);
}
body.single-product div.product p.price del{
opacity:.5;
font-weight:400;
font-size:.6em;
font-family: var(--rcpf-body, inherit);
}
/* Add to cart / buy buttons — the CTA color is intentionally one
strong, consistent accent (the brand blue/purple) rather than black,
so every "act now" control on the page reads as the same visual
language. */
body.single-product div.product form.cart .button,
body.single-product div.product .single_add_to_cart_button{
background: var(--rcpf-accent) !important;
background-image: none !important;
border-color: var(--rcpf-accent) !important;
color:#fff !important;
border-radius: 100px !important;
padding: 15px 34px !important;
font-weight: 600 !important;
font-size: 14.5px !important;
letter-spacing: 0;
transition: filter .15s ease, transform .15s ease;
}
body.single-product div.product form.cart .button:hover,
body.single-product div.product .single_add_to_cart_button:hover{
filter: brightness(0.9);
transform: translateY(-1px);
}
body.single-product div.product form.cart{
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
body.single-product div.product form.cart .quantity input.qty{
border-radius: 100px;
border-color: var(--rcpf-line);
height: 50px;
width: 64px;
text-align:center;
font-family: var(--rcpf-mono);
}
/* Stock / availability text */
body.single-product div.product p.stock{
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--rcpf-teal);
background: var(--rcpf-teal-soft);
padding: 5px 11px;
border-radius: 100px;
margin-bottom: 14px !important;
}
body.single-product div.product p.stock::before{
content:'';
width: 6px; height: 6px; border-radius: 50%;
background: var(--rcpf-teal);
}
body.single-product div.product p.stock.out-of-stock{
color:#C6403E;
background: #FBEAEA;
}
body.single-product div.product p.stock.out-of-stock::before{ background:#C6403E; }
/* Any WooCommerce tabs left standing (e.g. "Additional information" on
variable products) — Description and Reviews are unhooked in PHP, so
most products won't render this block at all. Tidied for consistency
on the products that do still have a tab. */
body.single-product .woocommerce-tabs ul.tabs{
border-bottom: 1px solid var(--rcpf-line);
margin-bottom: 20px;
}
body.single-product .woocommerce-tabs ul.tabs li{
background: none !important;
border: none !important;
}
body.single-product .woocommerce-tabs ul.tabs li a{
font-weight: 600;
color: #9098AC;
}
body.single-product .woocommerce-tabs ul.tabs li.active a{
color: var(--rcpf-ink);
}
/* Badges under the title — refined to sit with the rest of the type
system instead of reading like debug output. */
.rcpf-tagline{
color: var(--rcpf-ink-soft);
font-size: 15px;
margin: 2px 0 14px;
}
.rcpf-badges{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap;}
.rcpf-pill{display:inline-flex;align-items:center;font-size:12px;font-weight:600;padding:6px 13px;border-radius:100px;font-family: var(--rcpf-body, inherit);}
.rcpf-pill-accent{background:var(--rcpf-teal-soft);color:var(--rcpf-teal);}
.rcpf-pill-muted{background:var(--rcpf-line-soft);color:var(--rcpf-ink-soft);}
/* Quick specs list */
.rcpf-quick-specs{list-style:none;margin:18px 0;padding:16px 0;border-top:1px solid var(--rcpf-line);border-bottom:1px solid var(--rcpf-line);}
.rcpf-quick-specs li{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;color:var(--rcpf-ink-soft);}
.rcpf-quick-specs li span{font-weight:600;color:var(--rcpf-ink);}
/* Disclaimer banner */
.rcpf-disclaimer{background:#FFF7E6;border:1px solid #F5DA9E;color:#8A6100;font-size:12.5px;padding:12px 16px;border-radius:8px;margin:18px 0 0;line-height:1.5;}
.rcpf-archive-disclaimer{max-width:1200px;margin:0 auto 24px;}
/* Research Info section table (specifications) */
.rcpf-spec-table{width:100%;border-collapse:collapse;}
.rcpf-spec-table td{padding:12px 0 12px 14px;border-bottom:1px solid var(--rcpf-line-soft);font-size:14px;}
.rcpf-spec-table td:first-child{
width:220px;
font-family: var(--rcpf-mono);
font-size:11.5px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.03em;
border-left: 3px solid var(--rcpf-line);
}
/* Each spec row's label gets a color from the brand palette, cycling
through so the table reads as lively/categorized rather than one flat
block of gray — the accent bar + colored label do the same job an
icon-per-row would, without needing an icon for every possible field. */
.rcpf-spec-table tr:nth-child(4n+1) td:first-child{ border-left-color: var(--rcpf-accent); color: var(--rcpf-accent); }
.rcpf-spec-table tr:nth-child(4n+2) td:first-child{ border-left-color: var(--rcpf-teal); color: var(--rcpf-teal); }
.rcpf-spec-table tr:nth-child(4n+3) td:first-child{ border-left-color: var(--rcpf-gold); color: var(--rcpf-gold); }
.rcpf-spec-table tr:nth-child(4n+4) td:first-child{ border-left-color: var(--rcpf-rose); color: var(--rcpf-rose); }
.rcpf-spec-table tr:nth-child(even) td{ background: rgba(255,255,255,.55); }
.rcpf-btn{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px;padding:11px 20px;border-radius:100px;border:1px solid transparent;text-decoration:none;margin-right:8px;}
.rcpf-btn-secondary{background:transparent;color:var(--rcpf-ink);border-color:var(--rcpf-line);}
.rcpf-btn-ghost{background:var(--rcpf-accent-soft);color:var(--rcpf-accent);}
.rcpf-btn-sm{padding:8px 15px;font-size:12.5px;}
body.single-product .related.products > h2{
font-family: var(--rcpf-display);
font-size: 22px;
margin: 64px 0 22px;
}
/* =========================================================
PER-PRODUCT SECTIONS (trust stats, mechanism, applications,
metrics, FAQ) — all driven by repeatable custom fields, so
content is genuinely unique from one product to the next.
========================================================= */
.rcpf-section{
max-width: 1200px;
margin: 0 auto;
padding: 76px 24px;
/* These sections are appended via woocommerce_after_single_product_summary,
which fires inside div.product, as a sibling to .woocommerce-product-gallery
and .summary.entry-summary — not after div.product closes. WooCommerce's
own default single-product CSS lays those two out as classic floated
columns (float:left / float:right), not flexbox — confirmed from the
live page HTML, where the gallery and summary are plain floated
siblings with no flex/grid wrapper. Floated columns don't push
following content below them on their own: without an explicit
`clear`, whatever comes next in the DOM starts rendering as soon as
the SHORTER of the two floated columns ends, overlapping the bottom
of the taller one — which is exactly what was happening here, since
the gallery (~370px, sized by the image's own aspect ratio) is
shorter than the summary column once it has a title, badges, spec
list, short description and stock message stacked in it. `clear:both`
is what actually fixes that. flex/width below are kept too, in case
a different theme or Astra version does use flex/grid instead —
harmless no-ops when the parent is float-based like it is here. */
clear: both !important;
flex: 0 0 100% !important;
width: 100% !important;
box-sizing: border-box;
}
.rcpf-section-title{
font-family: var(--rcpf-display);
font-size: 26px;
font-weight: 700;
color: var(--rcpf-ink);
margin-bottom: 14px;
}
.rcpf-section-sub{
color: var(--rcpf-ink-soft);
font-size: 15px;
line-height: 1.6;
margin-bottom: 24px;
}
/* Section eyebrow + heading — the small-caps kicker label used above
every standalone section (Overview, Full Specification, Certificate
of Analysis, FAQ, etc.) so each container reads as its own distinct
module rather than a floating heading. */
.rcpf-section-head{ margin-bottom: 40px; max-width: 720px; }
.rcpf-eyebrow{
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--rcpf-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--rcpf-accent);
margin-bottom: 10px;
}
.rcpf-eyebrow::before{
content: "";
width: 14px;
height: 1.5px;
background: var(--rcpf-accent);
display: inline-block;
}
.rcpf-section-head .rcpf-section-title{ margin-bottom: 12px; }
.rcpf-section-head .rcpf-section-sub{ margin-bottom: 0; }
/* Section color bands — every research section runs full-bleed (see
.rcpf-full-bleed below) and gets its own soft, distinct background
wash, so each one reads as a clearly separate module as the page
scrolls instead of the whole thing blurring into one long white
surface. Kept as pale washes (not saturated blocks) so body text
inside each section stays comfortably readable — the color is there
to mark the section boundary, not to compete with the content. */
/* Simplified 4-tier color system: Primary (white) for most content,
Secondary (a single very light blue-gray) for rhythm between them,
Research for the scientific/data sections specifically (one subtle
tint, not a different color per section), and CTA reserved for
buttons and the sticky purchase bar rather than a section background.
Replaces an earlier version of this plugin that gave every section
its own distinct pastel — visually busier than it needed to be. */
.rcpf-band-primary{ background: #FFFFFF; }
.rcpf-band-secondary{ background: #F4F6FA; }
.rcpf-band-research{ background: #F1F1FB; }
/* Overview and Full Specification are separate full-width sections
(see render_overview_section / render_specification_section). */
.rcpf-overview-copy{
max-width: 720px;
font-size: 15px;
line-height: 1.8;
color: var(--rcpf-ink-soft);
}
.rcpf-overview-copy p{ margin: 0 0 1em; }
.rcpf-overview-copy p:last-child{ margin-bottom: 0; }
.rcpf-spec-card{
position: relative;
max-width: 760px;
background: linear-gradient(165deg, #ffffff 0%, var(--rcpf-line-soft) 100%);
border-radius: 18px;
padding: 36px 32px 32px;
box-shadow: var(--rcpf-shadow-card);
border-width: 4px 0 0 0;
border-style: solid;
border-image: linear-gradient(90deg, var(--rcpf-accent), var(--rcpf-teal), var(--rcpf-gold), var(--rcpf-rose)) 1;
}
/* Trust stats row */
.rcpf-stats-row{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px;
background: var(--rcpf-line);
border: 1px solid var(--rcpf-line);
border-radius: var(--rcpf-radius);
overflow: hidden;
padding: 0;
}
.rcpf-stat{
background: #fff;
padding: 22px 16px;
text-align: center;
box-shadow: var(--rcpf-shadow-card);
}
.rcpf-stat strong{
display: block;
font-family: var(--rcpf-display);
font-size: 26px;
font-weight: 700;
color: var(--rcpf-accent);
}
.rcpf-stat span{
display: block;
font-size: 12.5px;
color: var(--rcpf-ink-soft);
margin-top: 4px;
}
/* "How it works" — hub-and-spoke diagram (product at center, each
mechanism as a satellite node) beside the numbered cards. The lines
and satellites draw themselves in once .rcpf-mechanism-section picks
up .rcpf-in from the shared scroll-reveal observer (script.js). */
.rcpf-mechanism-layout{
display: grid;
grid-template-columns: minmax(320px, 440px) 1fr;
gap: 48px;
align-items: start;
}
.rcpf-mech-diagram{
position: relative;
background: #fff;
border: 1px solid var(--rcpf-line);
border-radius: 20px;
padding: 40px 32px 28px;
box-shadow: var(--rcpf-shadow-card);
}
.rcpf-mech-svg{ width: 100%; height: auto; overflow: visible; display: block; }
/* The svg's own box, and nothing else — the label layer (below) is
scoped to exactly this, not the outer .rcpf-mech-diagram, which also
contains the padding and caption text below the diagram. Percentage-
based positioning (the hub label) needs its 50%/50% to land on the
actual center of the circle, not the center of "svg + caption". */
.rcpf-mech-canvas{ position: relative; }
.rcpf-mech-caption{
margin: 18px 0 0;
text-align: center;
font-family: var(--rcpf-mono);
font-size: 11.5px;
color: var(--rcpf-ink-faint);
letter-spacing: .02em;
}
/* Static dotted guide circle the satellites orbit along — purely
decorative, gives the eye a ring to anchor the motion to. */
.rcpf-mech-guide-ring{
fill: none;
stroke: var(--rcpf-line);
stroke-width: 1;
stroke-dasharray: 2.5 4;
}
/* The whole spoke assembly (lines + satellite circles) slowly revolves
around the fixed hub, so the diagram keeps a gentle sense of motion
even long after the entrance animation finishes. Satellite LABELS are
not inside this rotating group at all — they're plain HTML, tracked
onto their circle's live position every frame by initMechDiagram in
script.js (see the long comment in render_mechanism_section() for
why: two independently-timed CSS animations trying to stay in phase
forever is fragile, reading the circle's actual current position each
frame cannot drift, by construction). */
.rcpf-mech-orbit-group{
transform-box: view-box;
transform-origin: 100px 100px;
animation: rcpf-mech-orbit 46s linear infinite;
}
@keyframes rcpf-mech-orbit{ to { transform: rotate(360deg); } }
.rcpf-mech-line{
stroke-width: 1.6;
stroke-dasharray: 1;
stroke-dashoffset: 1;
transition: stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1);
}
.rcpf-mechanism-section.rcpf-in .rcpf-mech-line{ stroke-dashoffset: 0; }
.rcpf-mech-line-accent{ stroke: var(--rcpf-accent); }
.rcpf-mech-line-teal{ stroke: var(--rcpf-teal); }
.rcpf-mech-line-gold{ stroke: var(--rcpf-gold); }
.rcpf-mech-line-rose{ stroke: var(--rcpf-rose); }
/* Continuous "signal" traveling from hub to satellite — a thin dashed
duplicate of each line, invisible until the section reveals, then
looping for as long as the diagram is on screen. Kept as a separate
element from .rcpf-mech-line above so the one-time draw-in transition
and this infinite loop never fight over the same stroke-dashoffset. */
.rcpf-mech-line-flow{
stroke-width: 2.2;
stroke-linecap: round;
stroke-dasharray: 3 9;
opacity: 0;
}
.rcpf-mechanism-section.rcpf-in .rcpf-mech-line-flow{
opacity: .85;
animation: rcpf-mech-flow 1.8s linear infinite;
}
.rcpf-mech-line-flow-accent{ stroke: var(--rcpf-accent); }
.rcpf-mech-line-flow-teal{ stroke: var(--rcpf-teal); }
.rcpf-mech-line-flow-gold{ stroke: var(--rcpf-gold); }
.rcpf-mech-line-flow-rose{ stroke: var(--rcpf-rose); }
@keyframes rcpf-mech-flow{ to { stroke-dashoffset: -24; } }
.rcpf-mech-sat{
opacity: 0;
transform: scale(.6);
transform-box: fill-box;
transform-origin: center;
transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.rcpf-mechanism-section.rcpf-in .rcpf-mech-sat{ opacity: 1; transform: scale(1); }
.rcpf-mech-sat-circle{ stroke: rgba(255,255,255,.5); stroke-width: 2; filter: drop-shadow(0 3px 8px rgba(14,20,32,.18)); }
.rcpf-mech-sat-accent .rcpf-mech-sat-circle{ fill: var(--rcpf-accent); }
.rcpf-mech-sat-teal .rcpf-mech-sat-circle{ fill: var(--rcpf-teal); }
.rcpf-mech-sat-gold .rcpf-mech-sat-circle{ fill: var(--rcpf-gold); }
.rcpf-mech-sat-rose .rcpf-mech-sat-circle{ fill: var(--rcpf-rose); }
/* Soft halo that blooms and fades behind each satellite in turn, like a
signal pulse visiting one target at a time — staggered per-node via
the inline --rcpf-glow-delay custom property set in PHP. */
.rcpf-mech-sat-glow{
opacity: 0;
transform-box: fill-box;
transform-origin: center;
filter: blur(7px);
animation: rcpf-mech-glow 3.6s ease-in-out infinite;
animation-delay: var(--rcpf-glow-delay, 0s);
}
.rcpf-mech-sat-accent .rcpf-mech-sat-glow{ fill: var(--rcpf-accent); }
.rcpf-mech-sat-teal .rcpf-mech-sat-glow{ fill: var(--rcpf-teal); }
.rcpf-mech-sat-gold .rcpf-mech-sat-glow{ fill: var(--rcpf-gold); }
.rcpf-mech-sat-rose .rcpf-mech-sat-glow{ fill: var(--rcpf-rose); }
@keyframes rcpf-mech-glow{
0%, 100% { opacity: 0; transform: scale(1); }
50% { opacity: .55; transform: scale(1.3); }
}
.rcpf-mech-hub-circle{
fill: #fff;
stroke: var(--rcpf-line);
stroke-width: 1.5;
filter: drop-shadow(0 4px 14px rgba(14,20,32,.14));
}
/* Slow expanding ring pulsing outward from the hub — a heartbeat that
keeps the diagram feeling alive even once the entrance animation has
long finished, without being distracting. */
.rcpf-mech-hub-pulse-ring{
fill: none;
stroke: var(--rcpf-accent);
stroke-width: 2;
opacity: 0;
transform-box: fill-box;
transform-origin: center;
}
.rcpf-mechanism-section.rcpf-in .rcpf-mech-hub-pulse-ring{
animation: rcpf-hub-pulse 2.6s ease-out infinite;
animation-delay: 1s;
}
@keyframes rcpf-hub-pulse{
0% { transform: scale(1); opacity: .45; }
100% { transform: scale(1.85); opacity: 0; }
}
/* The label layer — plain HTML, sitting on top of the SVG, not inside
it. Positions are percentages of the diagram box (matching the SVG's
own 0-200 viewBox 1:1) for the hub, which never moves, and pixel
values written every animation frame for satellites, which do. */
.rcpf-mech-labels{
position: absolute;
inset: 0;
pointer-events: none;
}
.rcpf-mech-hub-label-html{
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 40%;
text-align: center;
font-family: var(--rcpf-display);
font-weight: 800;
line-height: 1.2;
color: var(--rcpf-ink);
overflow-wrap: break-word;
word-break: break-word;
}
.rcpf-mech-sat-label-html{
position: absolute;
left: 0; top: 0; /* corrected every frame by initMechDiagram in script.js — these are just a safe starting value */
transform: translate(-50%, -50%);
text-align: center;
font-family: var(--rcpf-display);
font-weight: 700;
line-height: 1.22;
color: #fff;
overflow-wrap: break-word;
word-break: break-word;
}
@media (prefers-reduced-motion: reduce){
.rcpf-mech-line{ transition: none; stroke-dashoffset: 0; }
.rcpf-mech-sat{ transition: none; opacity: 1; transform: none; }
.rcpf-mech-line-flow{ animation: none !important; opacity: 0 !important; }
.rcpf-mech-hub-pulse-ring{ animation: none !important; opacity: 0 !important; }
.rcpf-mech-orbit-group{ animation: none; }
.rcpf-mech-sat-glow{ animation: none; opacity: 0; }
}
@media (max-width: 780px){
.rcpf-mechanism-layout{ grid-template-columns: 1fr; }
.rcpf-mech-diagram{ max-width: 380px; margin: 0 auto; }
}
/* Mechanism ("how it works") cards — icon + title/subtitle head, a left
accent border matching the diagram satellite it corresponds to, and
an optional stack of supporting-detail tags at the bottom. */
.rcpf-mechanism-grid{
display: flex;
flex-direction: column;
gap: 26px;
}
.rcpf-mechanism-card{
position: relative;
background: #fff;
border: 1px solid var(--rcpf-line);
border-left: 3px solid var(--rcpf-accent);
border-radius: var(--rcpf-radius);
padding: 24px 26px 22px;
box-shadow: var(--rcpf-shadow-card);
transition: transform .18s ease, box-shadow .18s ease;
}
.rcpf-mechanism-card:hover{
transform: translateY(-2px);
box-shadow: 0 1px 2px rgba(14,20,32,.06), 0 20px 40px -18px rgba(14,20,32,.22);
}
.rcpf-mechanism-card-accent{ border-left-color: var(--rcpf-accent); }
.rcpf-mechanism-card-teal{ border-left-color: var(--rcpf-teal); }
.rcpf-mechanism-card-gold{ border-left-color: var(--rcpf-gold); }
.rcpf-mechanism-card-rose{ border-left-color: var(--rcpf-rose); }
.rcpf-mech-card-head{
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 14px;
}
.rcpf-mech-card-icon{
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 11px;
display: flex;
align-items: center;
justify-content: center;
}
.rcpf-mech-card-icon svg{ width: 20px; height: 20px; }
.rcpf-mechanism-card-accent .rcpf-mech-card-icon{ background: color-mix(in srgb, var(--rcpf-accent) 14%, #fff); color: var(--rcpf-accent); }
.rcpf-mechanism-card-teal .rcpf-mech-card-icon{ background: color-mix(in srgb, var(--rcpf-teal) 14%, #fff); color: var(--rcpf-teal); }
.rcpf-mechanism-card-gold .rcpf-mech-card-icon{ background: color-mix(in srgb, var(--rcpf-gold) 14%, #fff); color: var(--rcpf-gold); }
.rcpf-mechanism-card-rose .rcpf-mech-card-icon{ background: color-mix(in srgb, var(--rcpf-rose) 14%, #fff); color: var(--rcpf-rose); }
.rcpf-mechanism-card h4{
font-family: var(--rcpf-display);
font-size: 16.5px;
font-weight: 700;
color: var(--rcpf-ink);
margin: 0 0 3px;
line-height: 1.3;
}
.rcpf-mech-card-subtitle{
display: block;
font-size: 12.5px;
color: var(--rcpf-ink-soft);
}
.rcpf-mechanism-card p{
font-size: 13.5px;
color: var(--rcpf-ink-soft);
line-height: 1.65;
margin: 0;
}
.rcpf-mech-card-tags{
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
.rcpf-mech-tag{
font-family: var(--rcpf-mono);
font-size: 12px;
line-height: 1.5;
padding: 9px 13px;
border-radius: 8px;
border: 1px solid var(--rcpf-line);
}
.rcpf-mechanism-card-accent .rcpf-mech-tag{ background: color-mix(in srgb, var(--rcpf-accent) 7%, #fff); border-color: color-mix(in srgb, var(--rcpf-accent) 22%, #fff); color: color-mix(in srgb, var(--rcpf-accent) 75%, var(--rcpf-ink)); }
.rcpf-mechanism-card-teal .rcpf-mech-tag{ background: color-mix(in srgb, var(--rcpf-teal) 7%, #fff); border-color: color-mix(in srgb, var(--rcpf-teal) 22%, #fff); color: color-mix(in srgb, var(--rcpf-teal) 75%, var(--rcpf-ink)); }
.rcpf-mechanism-card-gold .rcpf-mech-tag{ background: color-mix(in srgb, var(--rcpf-gold) 7%, #fff); border-color: color-mix(in srgb, var(--rcpf-gold) 22%, #fff); color: color-mix(in srgb, var(--rcpf-gold) 75%, var(--rcpf-ink)); }
.rcpf-mechanism-card-rose .rcpf-mech-tag{ background: color-mix(in srgb, var(--rcpf-rose) 7%, #fff); border-color: color-mix(in srgb, var(--rcpf-rose) 22%, #fff); color: color-mix(in srgb, var(--rcpf-rose) 75%, var(--rcpf-ink)); }
/* Applications cards — flat tinted background, category tag on top,
deliberately different treatment from the mechanism cards. */
.rcpf-applications-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px;
}
.rcpf-app-card{
background: var(--rcpf-line-soft);
border-radius: var(--rcpf-radius);
padding: 28px;
box-shadow: var(--rcpf-shadow-card);
}
.rcpf-app-cat{
display: inline-block;
font-size: 10.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--rcpf-accent);
background: #fff;
padding: 3px 9px;
border-radius: 100px;
}
.rcpf-app-card h4{
font-family: var(--rcpf-display);
font-size: 15px;
font-weight: 700;
color: var(--rcpf-ink);
margin: 10px 0 8px;
}
.rcpf-app-card p{
font-size: 13.5px;
color: var(--rcpf-ink-soft);
line-height: 1.6;
margin: 0;
}
/* Study-reported magnitude bars — boxed panel so it reads as a distinct
"data" module rather than another card grid. */
/* Scroll-reveal: applied to every major research section. Purely a
fade + slight rise, no layout shift, and disabled entirely for
reduced-motion users below. */
.rcpf-reveal{
opacity: 0;
transform: translateY(18px);
transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.rcpf-reveal.rcpf-in{
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
.rcpf-reveal{ opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* Full-bleed section wrapper — breaks a section out of the shared
1200px content column AND out of whatever container it's actually
nested in (div.product, the theme's page-width wrapper, etc.) to run
genuinely edge-to-edge, independent of any other section's layout.
Used by the molecule section so the cluster and its copy have real
room. The classic "negative viewport margin" technique is used
instead of a plain width:100%, because width:100% only fills
whatever container the element happens to be nested in — here that's
div.product's flex row (see the note on .rcpf-section above), which
is exactly what was capping it before. flex-basis/width/margin here
all carry !important specifically to out-rank that base .rcpf-section
rule (same trick, opposite goal). `.rcpf-full-bleed-inner` then
re-establishes a reading max-width inside it so text and the diagram
don't stretch edge-to-edge themselves on very wide screens. */
.rcpf-section.rcpf-full-bleed{
flex: 0 0 100vw !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
}
.rcpf-full-bleed-inner{
max-width: 1520px;
margin: 0 auto;
padding: 0 32px;
box-sizing: border-box;
}
/* Molecule section — a ball-and-stick cluster built per-product from the
compound's own molecular formula (see RCPF_Fields::parse_formula /
atom_color and RCPF_Templates::render_molecule_section). Light card,
colors set inline per element (so every atom in the formula gets its
own true color, not a shared bucket) — legend underneath. Schematic,
not a measured structure (said explicitly in the copy beside it). */
.rcpf-molecule-panel{
display: grid;
grid-template-columns: minmax(320px, 460px) 1fr;
gap: 64px;
align-items: center;
background: #fff;
border: 1px solid var(--rcpf-line);
border-radius: 20px;
padding: 48px;
box-shadow: var(--rcpf-shadow-card);
}
.rcpf-molecule-visual{
aspect-ratio: 1 / 1;
background: radial-gradient(circle at 50% 40%, #FDFDFF 0%, #EAEDF4 100%);
border-radius: 16px;
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--rcpf-line-soft);
position: relative;
}
/* The custom pasted 3D viewer (see the "3D Molecule Viewer" product
field) — a sandboxed iframe, not inline markup, so whatever it does
to its own document can't affect this page (see the long comment in
render_molecule_section() for why). Iframes default to a tiny fixed
size unless styled, so this needs the same square, responsive
sizing .rcpf-molecule-visual gets above. */
.rcpf-3d-viewer-frame{
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border: 0;
border-radius: 16px;
overflow: hidden;
background: transparent;
}
.rcpf-molecule-svg{ width: 100%; height: 100%; }
/* Once script.js mounts the 3D renderer it replaces this element's
entire content with a fresh