/* Cosmetics and Pharmaceutical, v9 cosmetics.html / pharmaceutical.html. Scoped to .site[data-page="cosmetics"] and .site[data-page="pharmaceutical"]. */
/*
Ported from tax-cosmetics.css and tax-pharmaceutical.css — one file in v9 but for Dermocosmetic
Expertise, so every rule here names both pages — with the lux-v5, v8 and v9 rules that reach
these bands, flattened: each value below is the one that wins v9's cascade, and the reason is
given where the winner is not the obvious rule. The banner, the prev/next pair and the footer
are the shared sub-page layer's (site.css) and are not repeated here.
The markup is IndustrySplit.razor (Overview, Technology Transfer & Commercialization,
Dermocosmetic Expertise) and IndustryCards.razor (Product Category, Packaging Formats,
Certifications & Compliance). Classes keep v9's names where the element is v9's own — tk-cat,
tk-cert, tk-pack-chips, tk-ov, tk-tt, tk-derm — so a rule can be checked against the mockup.
Colours are written out rather than read from site.css's tokens, which keep the home page's
values: v8 F01 remapped the sub-pages' navy and ink to Proof Grey #545454 and their small teal
text to Proof Blue #0066B2, and the home page never took that change.
*/
/* ---- Every band ------------------------------------------------------------------------------ */
/* Body copy is Montserrat Light on a sub-page (v8 F07). The band's padding is .pad's, which is
already v9's 100px (64px on a tablet), and the first band under the banner opens on 84px by the
shared layer's rule. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-sec { font-weight: 300; color: #545454; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-sec .section-head { max-width: 660px; margin-bottom: 40px; }
/* The heading as every v9 sub-page sets an H2 (v8 F05): Montserrat Light, Proof Grey, lux-v5's
size. Its GenArrow sits on the first line, lifted 5px to the cap height (v8 §5). */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-sec .section-head h2 {
margin: 0;
font-family: var(--font-body); font-style: normal; font-weight: 300;
font-size: clamp(1.75rem, 2.8vw, 2.35rem); line-height: 1.22; letter-spacing: -.02em;
color: #545454;
}
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-sec .section-head h2 .ga-sig.lead { margin-bottom: 5px; }
/* Copy at lux-v5's size and measure. v9's 16px floor (F34) is written for "section p" and loses
to lux-v5's ".section-head p" here on specificity, so the paragraph stays at .98rem. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-sec .section-head p {
margin: 16px 0 0; max-width: 65ch;
font-size: max(15px, .98rem); font-weight: 300; line-height: 1.72; color: #545454;
}
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-sec .section-head p + p { margin-top: 12px; }
/* ---- Photo and copy: Overview, Technology Transfer, Dermocosmetic Expertise ------------------ */
/* Two equal columns, centred on each other (tk-ov, tk-derm, and the .detail-hero v9 afternoon #2
gave Technology Transfer). The photo is first in the source; "reversed" puts it on the right. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center;
}
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split.is-reversed > .ph { order: 2; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split > .section-head { margin-bottom: 0; max-width: 600px; min-width: 0; }
/* Technology Transfer's copy is .detail-copy in v9, which has no measure of its own. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split.tk-tt > .section-head { max-width: none; }
/* The brand's angled crop, square-cornered and flat (v8 F18, F20), every photo 4:3. Each band
frames its subject a little differently, as v9 does. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split .ph { overflow: hidden; border-radius: 0; box-shadow: none; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split .ph.shape-photo { border-radius: 0; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split .ph img {
display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
object-fit: cover; object-position: center 45%;
transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split.tk-tt .ph img { object-position: 50% 55%; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split.tk-derm .ph img { object-position: center 55%; }
/* The slow zoom on hover (lux-v5 §7). */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split .ph:hover img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split .ph img { transition: none; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split .ph:hover img { transform: none; }
}
/* "Backed by Skinproof": small spaced capitals in Proof Blue (v8 F26), Regular — lux-v5 took the
tax file's 700 down to 400 — and kept out of v8's Inria H3 rule by name. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split .tk-sub {
margin: 2px 0 14px;
font-family: var(--font-body); font-style: normal; font-weight: 400;
font-size: .78rem; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase;
color: #0066B2;
}
/* Dermocosmetic Expertise's first paragraph is the lead: larger and Regular (v8 §2), Proof Grey —
lux-v5's colour for section-head copy outranks the tax file's Proof Blue. Picked by position,
since the copy is rich text and a class typed into it would not survive the sanitiser. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-derm .tk-body p:first-child {
font-size: clamp(1.06rem, 1.5vw, 1.2rem); font-weight: 400;
}
/* The text link with the GenArrow after it, Proof Blue (v8 F26); the arrow points 60 degrees,
Opportunity & Acceleration, as every forward arrow in a sub-page's content does (v8 F11). */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split .tk-more { margin: 24px 0 0; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split .tlink {
display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px;
font-size: .8rem; font-weight: 600; line-height: 1.4; color: #0066B2;
border-bottom: 1px solid currentColor;
}
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split .tlink .ga-icon.right { transform: rotate(60deg); }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split .tlink:hover .ga-icon.right { transform: rotate(60deg) translateY(-3px); }
/* One column on a tablet, the photo first whichever side it sat on: Overview and Dermocosmetic
Expertise at 940px (.split-visual), Technology Transfer at 900px (.detail-hero). */
@media (max-width: 940px) {
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split:not(.tk-tt) { grid-template-columns: minmax(0, 1fr); gap: 34px; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split:not(.tk-tt).is-reversed > .ph { order: 0; }
}
@media (max-width: 900px) {
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split.tk-tt { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-split.tk-tt.is-reversed > .ph { order: 0; }
}
/* ---- Product Category ------------------------------------------------------------------------ */
/* Four across (v9 afternoon #1: Cosmetics' seven cards run 4 + 3, as Pharmaceutical's four do),
with lux-v5's editorial column gaps. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cat {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; row-gap: 44px; margin-top: 8px;
}
/* An editorial column, not a box (lux-v5 §4): no fill, no frame, a teal rule along the top — 3px,
the tax file's, which outranks lux-v5's 1px hairline. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cat .cat-card {
padding: 26px 0 0; background: transparent; border: 0; border-top: 3px solid #0A89AA; border-radius: 0; box-shadow: none;
}
/* The category in Inria Serif Italic (v8 F06) at v8's card-title size, which is !important there
and so beats the tax file's 1rem and 700. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cat .cat-card h3 {
margin: 0 0 8px;
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 1.25rem; line-height: 1.3; letter-spacing: 0; color: #545454;
}
/* Card text at lux-v5's 15px floor, Regular so the small size keeps its strokes (v9 F34). */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cat .cat-card p {
margin: 0; font-size: max(15px, .94rem); font-weight: 400; line-height: 1.7; color: #545454;
}
@media (max-width: 1000px) {
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* One column on a phone. The tax file's 12px gap loses to lux-v5's row gap, which loads after it,
while its 18px padding outranks lux-v5's — so the cards keep 44px between them and an inset. */
@media (max-width: 560px) {
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cat { grid-template-columns: minmax(0, 1fr); }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cat .cat-card { padding: 18px; }
}
/* ---- Packaging Formats ----------------------------------------------------------------------- */
/* v8 F23: a typographic list rather than a row of small tokens — each format in Inria Serif
Italic over a hairline, four across, two on a phone. v8 gives the band 84px at every width. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-sec:has(.tk-pack-chips) { padding-top: 84px; padding-bottom: 84px; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-pack-chips {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 40px; margin-top: 8px;
}
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-pack-chips .chip {
display: block; padding: 14px 0 0;
background: none; border: 0; border-top: 1px solid rgba(159, 162, 166, .5); border-radius: 0;
font-family: var(--font-display); font-style: italic; font-weight: 400;
font-size: 1.3rem; line-height: 1.3; letter-spacing: 0; color: #545454;
}
@media (max-width: 760px) {
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-pack-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
}
/* ---- Certifications & Compliance -------------------------------------------------------------- */
/* The mark, its code and one line: four across on Cosmetics, three on Pharmaceutical. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none;
}
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert.tk-cert-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The editorial column again, this time with lux-v5's grey hairline — the tax file gives the
certificates no rule of its own — and the tax file's padding, which outranks lux-v5's. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert li {
display: flex; flex-direction: column; gap: 14px; padding: 28px 24px;
background: transparent; border: 0; border-top: 1px solid rgba(159, 162, 166, .5); border-radius: 0; box-shadow: none;
}
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert-logo { display: flex; align-items: center; height: 84px; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert-logo img {
height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: left center;
}
/* The code is a highlight, so Montserrat SemiBold (v8 F06), at v8's card-title size. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert h3 {
margin: 0;
font-family: var(--font-body); font-style: normal; font-weight: 600;
font-size: 1.25rem; line-height: 1.3; letter-spacing: 0; color: #545454;
}
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert p {
margin: 0; font-size: max(15px, .94rem); font-weight: 400; line-height: 1.7; color: #545454;
}
@media (max-width: 1000px) {
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert.tk-cert-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A phone: one certificate a row, the mark on the left and the words beside it, so a card does
not run tall. */
@media (max-width: 760px) {
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert,
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert.tk-cert-3 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert li {
display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 18px; row-gap: 4px; align-items: center; padding: 18px;
}
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert-logo { grid-row: 1 / span 2; height: 60px; justify-content: center; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]) .tk-cert-logo img { object-position: center; }
}
/* ---- In the editor ----
EditableItem's wrapper takes each card's place in the grid, and EditableImage's slot sits
between a mark and its box; both are given back the size the public page has. */
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]).cms-canvas .tk-cert > .cms-item { display: flex; flex-direction: column; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]).cms-canvas .tk-cert > .cms-item > li { flex: 1; }
.site:is([data-page="cosmetics"], [data-page="pharmaceutical"]).cms-canvas .tk-cert-logo > .cms-image { height: 100%; }