/** * PHARAON QUALITY & COMPLIANCE ARCHIVE * ------------------------------------------------------------------ * Phase: PHARAON-CERT-01 * * Every rule is scoped under `.ph-certificates-page` (spec §42) - the * shortcode's own root element, and nothing else. The only exceptions are * three `body.*` rules, which exist because the theme's page wrapper and * the viewer's scroll lock live outside that element. * * ART DIRECTION (spec §27, §28) * Industrial premium, architectural, editorial. Documents are treated as * physical paper on a technical field: real drop shadows, hairline rules, * oversized archive numerals, and no decoration that competes with a * scan. Colours come from the Pharaon mark (royal blue #273791, orange * #F0901A) and the theme's own primary, so this page cannot drift away * from the rest of the site. * * MOTION * Reveals belong to PHARAON-MOTION-03; this file only supplies the * per-item transition delays that turn a row of adopted `.ph-reveal-soft` * elements into a stagger, plus the hero's transform-only entrance. The * hero entrance never animates opacity, because the front certificate is * the LCP candidate and must paint on the first frame (spec §50). */ /* ================================================================== 1. TOKENS ================================================================== */ .ph-certificates-page { /* Surface */ --phc-navy: #0a1130; --phc-navy-lift: #131d47; --phc-paper: #ffffff; --phc-warm: #f7f4ed; --phc-mist: #eef1f7; /* Brand */ --phc-blue: #273791; --phc-blue-soft: #4a5bbd; --phc-orange: #f0901a; --phc-gold: var(--themeht-primary-color, #e3ad0b); /* Ink */ --phc-ink: #131a33; --phc-body: #454e68; --phc-gray: #737c93; --phc-line: #d8dde8; --phc-line-dark: rgba(255, 255, 255, 0.14); --phc-on-dark: rgba(233, 237, 248, 0.78); /* Rhythm */ --phc-shell: 1360px; --phc-gutter: clamp(1.25rem, 4vw, 3.5rem); --phc-band: clamp(4.5rem, 8vw, 8.5rem); /* Type */ --phc-display: var(--themeht-typography-secondary-font-family, "TASA Orbiter", sans-serif); --phc-text: var(--themeht-typography-body-font-family, "Google Sans Flex", sans-serif); --phc-h1: clamp(2.6rem, 5.4vw, 5.5rem); --phc-h2: clamp(1.9rem, 3.4vw, 3.4rem); --phc-h3: clamp(1.3rem, 1.7vw, 1.85rem); /* Paper */ --phc-paper-shadow: 0 1px 2px rgba(12, 18, 40, 0.10), 0 18px 40px -18px rgba(12, 18, 40, 0.38); --phc-paper-shadow-lift: 0 2px 4px rgba(12, 18, 40, 0.12), 0 30px 60px -22px rgba(12, 18, 40, 0.46); --phc-ease: cubic-bezier(0.16, 1, 0.30, 1); font-family: var(--phc-text); color: var(--phc-body); } /* The theme spaces `.page-content` for editorial routes. This page is full-bleed from the header down, so the wrapper margin is removed rather than fought with negative margins further in. `.phc-route` is the body marker, not `.ph-certificates-page`: sharing one class between and the component root made the token block above match as well, and the header and footer inherited this page's font and body colour from it. */ body.phc-route .page-content { margin-top: 0; margin-bottom: 0; } body.phc-route .entry-content > *:not(.ph-certificates-page) { margin: 0; } /* ================================================================== 2. SHELL AND SHARED ELEMENTS ================================================================== */ .ph-certificates-page .phc-shell { width: 100%; max-width: var(--phc-shell); margin-inline: auto; padding-inline: var(--phc-gutter); } .ph-certificates-page .phc-band { position: relative; padding-block: var(--phc-band); /* PHARAON-SCROLL-01 computes the offset for anchor clicks; this is the fallback for a scroll the core did not initiate (a restored hash, find-in-page). The script keeps --phc-chrome current. */ scroll-margin-top: calc(var(--phc-chrome, 0px) + 1.5rem); } .ph-certificates-page h1, .ph-certificates-page h2, .ph-certificates-page h3 { font-family: var(--phc-display); color: var(--phc-ink); margin: 0; text-wrap: balance; } .ph-certificates-page p { margin: 0; } .ph-certificates-page .phc-eyebrow, .ph-certificates-page .phc-tagline { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--phc-orange); margin: 0; } .ph-certificates-page .phc-tagline { color: var(--phc-blue); display: flex; align-items: center; gap: 0.7rem; } .ph-certificates-page .phc-tagline::after { content: ""; flex: 1; height: 1px; background: var(--phc-line); } /* --- chapter header ------------------------------------------------ */ .ph-certificates-page .phc-head { position: relative; max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } /* In normal flow by default. Hanging it in the left margin only works where there IS a left margin - at 1440 the shell's gutter is 56px and the numeral needs 104px, so it was being clipped by the viewport. It moves outside at 1200px, where the section gets padding to hold it. */ .ph-certificates-page .phc-head__n { display: block; margin: 0 0 0.75rem; font-family: var(--phc-display); font-size: clamp(2.25rem, 5vw, 5rem); font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--phc-line); pointer-events: none; user-select: none; } .ph-certificates-page .phc-head__title { font-size: var(--phc-h2); line-height: 1.04; letter-spacing: -0.02em; font-weight: 700; } .ph-certificates-page .phc-head__intro { margin-top: 1.25rem; font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.65; color: var(--phc-body); max-width: 58ch; } /* --- buttons -------------------------------------------------------- */ .ph-certificates-page .phc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 1.85rem; font-family: var(--phc-text); font-size: 0.9375rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2; border: 1px solid transparent; border-radius: 2px; text-decoration: none; transition: background-color 220ms var(--phc-ease), color 220ms var(--phc-ease), border-color 220ms var(--phc-ease), transform 220ms var(--phc-ease); } .ph-certificates-page .phc-btn--solid { background: var(--phc-orange); color: #16110a; } .ph-certificates-page .phc-btn--solid:hover, .ph-certificates-page .phc-btn--solid:focus-visible { background: #ffa63b; color: #16110a; transform: translateY(-2px); } .ph-certificates-page .phc-btn--line { border-color: var(--phc-line-dark); color: #ffffff; } .ph-certificates-page .phc-btn--line:hover, .ph-certificates-page .phc-btn--line:focus-visible { border-color: rgba(255, 255, 255, 0.55); color: #ffffff; transform: translateY(-2px); } /* --- the "view" link ------------------------------------------------ */ .ph-certificates-page .phc-link { display: inline-flex; align-items: baseline; gap: 0.7rem; margin-top: 1.6rem; padding: 0.35rem 0; background: none; border: 0; border-bottom: 1px solid var(--phc-line); font-family: var(--phc-text); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--phc-ink); cursor: pointer; transition: color 220ms var(--phc-ease), border-color 220ms var(--phc-ease); } .ph-certificates-page .phc-link:hover { color: var(--phc-blue); border-color: var(--phc-blue); } .ph-certificates-page .phc-link__pages { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; color: var(--phc-gray); text-transform: none; } .ph-certificates-page .phc-link__arrow { transition: transform 260ms var(--phc-ease); } .ph-certificates-page .phc-link:hover .phc-link__arrow { transform: translateX(5px); } /* --- focus --------------------------------------------------------- */ .ph-certificates-page a:focus-visible, .ph-certificates-page button:focus-visible { outline: 2px solid var(--phc-orange); outline-offset: 3px; border-radius: 2px; } .ph-certificates-page .phc-hero a:focus-visible, .ph-certificates-page .phc-hero button:focus-visible, .ph-certificates-page .phc-cta a:focus-visible, .ph-certificates-page .phc-cta button:focus-visible { outline-color: #ffbe6a; } /* ================================================================== 3. THE DOCUMENT OBJECT ================================================================== One component for every scan on the page: a sheet of paper with a real shadow, a hairline edge and a restrained lift on hover (spec §31 - -4 to -8px, no 3D tilt, no bounce). */ .ph-certificates-page .phc-scan { display: block; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; position: relative; } .ph-certificates-page .phc-scan__paper, .ph-certificates-page .phc-stack__paper { display: block; position: relative; background: var(--phc-paper); border: 1px solid rgba(19, 26, 51, 0.10); box-shadow: var(--phc-paper-shadow); transition: box-shadow 400ms var(--phc-ease), transform 400ms var(--phc-ease); } .ph-certificates-page .phc-scan__img, .ph-certificates-page .phc-stack__paper img { display: block; width: 100%; height: auto; } .ph-certificates-page .phc-scan:hover .phc-scan__paper, .ph-certificates-page .phc-scan:focus-visible .phc-scan__paper { transform: translateY(-6px); box-shadow: var(--phc-paper-shadow-lift); } /* Hover affordance: a hairline orange edge, not a glow. */ .ph-certificates-page .phc-scan__zoom { position: absolute; inset: auto 0 0 0; height: 2px; background: var(--phc-orange); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--phc-ease); } .ph-certificates-page .phc-scan:hover .phc-scan__zoom, .ph-certificates-page .phc-scan:focus-visible .phc-scan__zoom { transform: scaleX(1); } /* ================================================================== 4. CHAPTER 01 — HERO ================================================================== */ .ph-certificates-page .phc-hero { position: relative; overflow: hidden; background: var(--phc-navy); color: var(--phc-on-dark); padding-block: clamp(3rem, 6vw, 6rem) clamp(3rem, 5vw, 5rem); isolation: isolate; } /* Technical field: a blueprint grid and one soft blue wash. Subtle enough that the documents stay the subject (spec §28). */ .ph-certificates-page .phc-hero__grid { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 78%); mask-image: radial-gradient(120% 90% at 70% 10%, #000 0%, transparent 78%); } .ph-certificates-page .phc-hero::after { content: ""; position: absolute; z-index: -1; width: 60vw; aspect-ratio: 1; right: -14vw; top: -22vw; background: radial-gradient(circle, rgba(39, 55, 145, 0.55) 0%, transparent 62%); pointer-events: none; } .ph-certificates-page .phc-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin: 0 0 clamp(2rem, 4vw, 3.5rem); padding: 0; list-style: none; font-size: 0.8125rem; letter-spacing: 0.04em; color: rgba(233, 237, 248, 0.55); } .ph-certificates-page .phc-crumb li + li::before { content: "/"; margin-right: 0.55rem; color: rgba(233, 237, 248, 0.3); } .ph-certificates-page .phc-crumb a { color: rgba(233, 237, 248, 0.75); text-decoration: none; } .ph-certificates-page .phc-crumb a:hover { color: var(--phc-orange); } .ph-certificates-page .phc-hero__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); align-items: center; } .ph-certificates-page .phc-hero__title { margin: 1.4rem 0 0; font-size: var(--phc-h1); line-height: 0.98; letter-spacing: -0.035em; font-weight: 700; color: #ffffff; } .ph-certificates-page .phc-hero__lead { margin-top: 1.75rem; max-width: 46ch; font-size: clamp(1.0625rem, 1.35vw, 1.375rem); line-height: 1.55; color: rgba(233, 237, 248, 0.9); } .ph-certificates-page .phc-hero__sub { margin-top: 0.9rem; max-width: 46ch; font-size: 0.9375rem; line-height: 1.6; color: rgba(233, 237, 248, 0.58); } .ph-certificates-page .phc-hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; } /* --- the certificate stack (spec §14) ------------------------------ */ .ph-certificates-page .phc-stack { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; align-items: end; } .ph-certificates-page .phc-stack__card { position: relative; display: block; padding: 0; background: none; border: 0; cursor: pointer; transition: transform 420ms var(--phc-ease); } .ph-certificates-page .phc-stack__card:hover, .ph-certificates-page .phc-stack__card:focus-visible { transform: translateY(-8px); z-index: 4; } .ph-certificates-page .phc-stack__card:hover .phc-stack__paper, .ph-certificates-page .phc-stack__card:focus-visible .phc-stack__paper { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 36px 70px -20px rgba(0, 0, 0, 0.7); } .ph-certificates-page .phc-stack__paper { border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), 0 24px 50px -18px rgba(0, 0, 0, 0.62); } .ph-certificates-page .phc-stack__tag { display: block; margin-top: 0.7rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(233, 237, 248, 0.6); } .ph-certificates-page .phc-stack__card:hover .phc-stack__tag { color: var(--phc-orange); } /* --- the record strip ----------------------------------------------- */ .ph-certificates-page .phc-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: clamp(3rem, 5vw, 4.5rem) 0 0; padding: 0; list-style: none; background: var(--phc-line-dark); border: 1px solid var(--phc-line-dark); } .ph-certificates-page .phc-index__item { display: flex; align-items: baseline; gap: 0.85rem; padding: 1.15rem 1.35rem; background: var(--phc-navy); } .ph-certificates-page .phc-index__n { font-family: var(--phc-display); font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--phc-orange); } .ph-certificates-page .phc-index__l { font-size: 0.8125rem; letter-spacing: 0.04em; color: rgba(233, 237, 248, 0.62); } /* ================================================================== 5. CHAPTER NAVIGATION ================================================================== */ .ph-certificates-page .phc-chapternav { display: none; background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--phc-line); } /* Pinned by script, not by `position: sticky` - see the note in pharaon_cert_chapter_nav(). z-index stays under the theme header's 99 so the two can never trade places; the script keeps `top` equal to the header's live height, which changes when it shrinks on scroll. */ .ph-certificates-page .phc-chapternav.is-pinned { position: fixed; left: 0; right: 0; z-index: 96; } .ph-certificates-page .phc-navspacer { height: 0; } .ph-certificates-page .phc-chapternav__list { display: flex; gap: clamp(1.5rem, 3vw, 3rem); margin: 0; padding: 0; list-style: none; } .ph-certificates-page .phc-chapternav__link { display: block; padding: 1.05rem 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--phc-gray); text-decoration: none; border-bottom: 2px solid transparent; transition: color 220ms var(--phc-ease), border-color 220ms var(--phc-ease); } .ph-certificates-page .phc-chapternav__link:hover, .ph-certificates-page .phc-chapternav__link.is-current { color: var(--phc-ink); border-bottom-color: var(--phc-orange); } /* ================================================================== 6. CHAPTER 02 — ISO MANAGEMENT SYSTEMS ================================================================== */ .ph-certificates-page .phc-iso { background: var(--phc-paper); } .ph-certificates-page .phc-iso__rows { display: grid; gap: clamp(3.5rem, 7vw, 7rem); } .ph-certificates-page .phc-iso__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; } .ph-certificates-page .phc-rec__n { font-family: var(--phc-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.2em; color: var(--phc-orange); margin: 0 0 0.9rem; } .ph-certificates-page .phc-rec__std { font-size: var(--phc-h3); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin-top: 0.75rem; } .ph-certificates-page .phc-rec__sys { margin-top: 0.5rem; font-size: 1.0625rem; line-height: 1.45; color: var(--phc-body); } .ph-certificates-page .phc-rec__meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 1.5rem; margin: 1.6rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--phc-line); font-size: 0.875rem; line-height: 1.5; } .ph-certificates-page .phc-rec__meta dt { font-weight: 500; color: var(--phc-gray); letter-spacing: 0.02em; } .ph-certificates-page .phc-rec__meta dd { margin: 0; font-weight: 600; color: var(--phc-ink); } /* ================================================================== 7. CHAPTER 03 — PRODUCT CERTIFICATION AND TESTING ================================================================== */ .ph-certificates-page .phc-product { background: var(--phc-mist); } .ph-certificates-page .phc-product__feature, .ph-certificates-page .phc-test { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; } .ph-certificates-page .phc-test { margin-top: clamp(3.5rem, 7vw, 7rem); padding-top: clamp(3rem, 5vw, 5rem); border-top: 1px solid var(--phc-line); scroll-margin-top: calc(var(--phc-chrome, 0px) + 1.5rem); } /* --- supporting IOSIN papers ---------------------------------------- */ .ph-certificates-page .phc-support__set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; } .ph-certificates-page .phc-support { display: flex; gap: 0.9rem; align-items: center; padding: 0.7rem; background: var(--phc-paper); border: 1px solid var(--phc-line); border-radius: 2px; cursor: pointer; text-align: left; transition: border-color 240ms var(--phc-ease), transform 240ms var(--phc-ease), box-shadow 240ms var(--phc-ease); } .ph-certificates-page .phc-support:hover, .ph-certificates-page .phc-support:focus-visible { transform: translateY(-4px); border-color: var(--phc-blue-soft); box-shadow: 0 14px 30px -18px rgba(12, 18, 40, 0.5); } .ph-certificates-page .phc-support__shot { flex: 0 0 54px; display: block; overflow: hidden; background: var(--phc-mist); } .ph-certificates-page .phc-support__shot img { display: block; width: 100%; height: 74px; object-fit: contain; object-position: center; } .ph-certificates-page .phc-support__body { display: block; min-width: 0; } .ph-certificates-page .phc-support__name { display: block; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; color: var(--phc-ink); } .ph-certificates-page .phc-support__no { display: block; margin-top: 0.3rem; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--phc-gray); } /* --- the two-page laboratory report (spec §19) ---------------------- */ .ph-certificates-page .phc-test__pages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } .ph-certificates-page .phc-scan--page .phc-scan__page { position: absolute; top: 0.85rem; left: 0.85rem; padding: 0.3rem 0.55rem; background: var(--phc-navy); color: #ffffff; font-family: var(--phc-display); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; } /* --- measured results ----------------------------------------------- */ .ph-certificates-page .phc-data { width: 100%; margin: 1.75rem 0 0; border-collapse: collapse; font-size: 0.875rem; background: var(--phc-paper); } /* The theme paints every table header for editorial content: `table th { background: #200043 }` and `table tbody th { background: #E3AD0B }`, which turned the measured results into white-on-navy and white-on-gold - unreadable, and nothing like the rest of this page. The backgrounds are cleared here. Rules are drawn with an inset shadow rather than a border because the theme also ships `table th, table td { border-color: ... !important }`; using a border would mean answering an !important with another one, and `border: 0` removes the style the colour would have painted. */ .ph-certificates-page .phc-data th, .ph-certificates-page .phc-data td { padding: 0.7rem 0.9rem; background: transparent; border: 0; box-shadow: inset 0 -1px 0 var(--phc-line); text-align: left; vertical-align: top; } .ph-certificates-page .phc-data thead th { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--phc-gray); box-shadow: inset 0 -1px 0 var(--phc-ink); white-space: nowrap; } .ph-certificates-page .phc-data tbody th { font-weight: 500; color: var(--phc-body); } .ph-certificates-page .phc-data__v { font-weight: 700; color: var(--phc-ink); white-space: nowrap; } .ph-certificates-page .phc-verdict { margin-top: 1.1rem; padding-left: 0.95rem; border-left: 3px solid var(--phc-orange); font-size: 0.9375rem; font-weight: 600; color: var(--phc-ink); } .ph-certificates-page .phc-note { margin-top: 1.1rem; font-size: 0.8125rem; line-height: 1.65; color: var(--phc-gray); max-width: 58ch; } /* ================================================================== 8. CHAPTER 04 — AWARDS AND RECOGNITION ================================================================== Warmer surface and larger framing so recognition never reads as compliance evidence (spec §21). */ .ph-certificates-page .phc-awards { background: var(--phc-warm); } .ph-certificates-page .phc-awards .phc-head__n { -webkit-text-stroke-color: rgba(19, 26, 51, 0.18); } .ph-certificates-page .phc-awards__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem); } .ph-certificates-page .phc-award { position: relative; padding-top: 2.25rem; border-top: 1px solid rgba(19, 26, 51, 0.14); } .ph-certificates-page .phc-award__year { position: absolute; top: -0.85rem; left: 0; padding-right: 0.9rem; background: var(--phc-warm); font-family: var(--phc-display); font-size: 1rem; font-weight: 700; letter-spacing: 0.12em; color: var(--phc-orange); } .ph-certificates-page .phc-scan--award .phc-scan__paper { background: var(--phc-paper); padding: 0.75rem; } .ph-certificates-page .phc-award__title { margin-top: 1.6rem; font-size: clamp(1.1rem, 1.5vw, 1.5rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } .ph-certificates-page .phc-award__by { margin-top: 0.55rem; font-size: 0.875rem; line-height: 1.5; color: var(--phc-gray); } /* ================================================================== 9. CHAPTER 05 — THE EVIDENCE LIBRARY ================================================================== */ .ph-certificates-page .phc-library { background: var(--phc-paper); } .ph-certificates-page .phc-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.75rem, 3vw, 2.75rem); } .ph-certificates-page .phc-chip { padding: 0.6rem 1.05rem; background: transparent; border: 1px solid var(--phc-line); border-radius: 999px; font-family: var(--phc-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--phc-gray); cursor: pointer; transition: background-color 200ms var(--phc-ease), color 200ms var(--phc-ease), border-color 200ms var(--phc-ease); } .ph-certificates-page .phc-chip:hover { border-color: var(--phc-ink); color: var(--phc-ink); } .ph-certificates-page .phc-chip[aria-pressed="true"] { background: var(--phc-navy); border-color: var(--phc-navy); color: #ffffff; } /* --- the archive grid ------------------------------------------------ Compact tiles, never a second full-size render of a document already featured above (spec §24). */ .ph-certificates-page .phc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); /* Tiles are not all the same height: the shot follows the document's own orientation, so the row is an editorial rhythm rather than a uniform product grid (spec §23). `start` keeps the tops aligned so it still scans in one pass. */ align-items: start; } .ph-certificates-page .phc-tile[hidden] { display: none; } .ph-certificates-page .phc-tile__btn { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; background: none; border: 0; text-align: left; cursor: pointer; } .ph-certificates-page .phc-tile__shot { position: relative; display: block; overflow: hidden; background: var(--phc-mist); border: 1px solid var(--phc-line); aspect-ratio: 3 / 4; transition: border-color 260ms var(--phc-ease), box-shadow 260ms var(--phc-ease), transform 260ms var(--phc-ease); } /* `contain`, never `cover`: the library mixes portrait certificates with a landscape award plaque, and cropping either one to a common cell would cut a seal or a signature out of the frame (spec §14, §38). The cell keeps its ratio, the document keeps its own. */ .ph-certificates-page .phc-tile__shot img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 6px; } .ph-certificates-page .phc-tile__btn:hover .phc-tile__shot, .ph-certificates-page .phc-tile__btn:focus-visible .phc-tile__shot { transform: translateY(-5px); border-color: var(--phc-blue-soft); box-shadow: 0 18px 34px -20px rgba(12, 18, 40, 0.55); } /* A landscape award in a portrait cell would sit in a deep letterbox; the cell takes the document's shape instead. */ .ph-certificates-page .phc-tile[data-phc-orient="landscape"] .phc-tile__shot { aspect-ratio: 4 / 3; } .ph-certificates-page .phc-tile__pages { position: absolute; right: 0; bottom: 0; padding: 0.25rem 0.5rem; background: var(--phc-navy); color: #ffffff; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .ph-certificates-page .phc-tile__body { display: block; padding-top: 0.85rem; } .ph-certificates-page .phc-tile__cat { display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--phc-orange); } .ph-certificates-page .phc-tile__name { display: block; margin-top: 0.4rem; font-family: var(--phc-display); font-size: 0.9375rem; font-weight: 700; line-height: 1.25; color: var(--phc-ink); } .ph-certificates-page .phc-tile__sub { display: block; margin-top: 0.3rem; font-size: 0.75rem; line-height: 1.45; color: var(--phc-gray); } .ph-certificates-page .phc-tile__cta { display: block; margin-top: 0.6rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--phc-blue); } .ph-certificates-page .phc-grid__empty { margin-top: 2rem; font-size: 0.9375rem; color: var(--phc-gray); } /* ================================================================== 10. CHAPTER 06 — CTA ================================================================== */ .ph-certificates-page .phc-cta { position: relative; overflow: hidden; isolation: isolate; background: var(--phc-navy); color: var(--phc-on-dark); padding-block: clamp(4rem, 7vw, 7rem); scroll-margin-top: calc(var(--phc-chrome, 0px) + 1.5rem); } .ph-certificates-page .phc-cta__inner { max-width: 46rem; } .ph-certificates-page .phc-cta__title { font-size: clamp(1.75rem, 3vw, 3rem); line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; color: #ffffff; } .ph-certificates-page .phc-cta__copy { margin-top: 1.25rem; font-size: clamp(1rem, 1.2vw, 1.1875rem); line-height: 1.6; color: rgba(233, 237, 248, 0.78); } .ph-certificates-page .phc-cta__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; } .ph-certificates-page .phc-cta__lines { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--phc-line-dark); } .ph-certificates-page .phc-cta__line { font-size: 0.9375rem; letter-spacing: 0.02em; color: rgba(233, 237, 248, 0.72); text-decoration: none; } .ph-certificates-page .phc-cta__line:hover { color: var(--phc-orange); } /* ================================================================== 11. THE DOCUMENT VIEWER ================================================================== */ .ph-certificates-page .phc-viewer { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 2vw, 2rem); } .ph-certificates-page .phc-viewer[hidden] { display: none; } .ph-certificates-page .phc-viewer__scrim { position: absolute; inset: 0; background: rgba(6, 10, 26, 0.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 260ms var(--phc-ease); } .ph-certificates-page .phc-viewer.is-open .phc-viewer__scrim { opacity: 1; } .ph-certificates-page .phc-viewer__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: min(100%, 1180px); max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--phc-paper); border-radius: 3px; opacity: 0; transform: translateY(14px); transition: opacity 320ms var(--phc-ease), transform 320ms var(--phc-ease); } .ph-certificates-page .phc-viewer.is-open .phc-viewer__panel { opacity: 1; transform: none; } .ph-certificates-page .phc-viewer__close { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(10, 17, 48, 0.86); border: 0; border-radius: 50%; color: #ffffff; font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background-color 200ms var(--phc-ease); } .ph-certificates-page .phc-viewer__close:hover { background: var(--phc-orange); color: #16110a; } .ph-certificates-page .phc-viewer__stage { display: flex; flex-direction: column; min-width: 0; background: var(--phc-mist); padding: clamp(1rem, 2vw, 1.75rem); } .ph-certificates-page .phc-viewer__figure { margin: 0; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; } .ph-certificates-page .phc-viewer__img { display: block; max-width: 100%; max-height: min(74vh, 900px); width: auto; height: auto; object-fit: contain; background: var(--phc-paper); box-shadow: var(--phc-paper-shadow); } .ph-certificates-page .phc-viewer__pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; } .ph-certificates-page .phc-viewer__pager[hidden] { display: none; } .ph-certificates-page .phc-viewer__step { padding: 0.55rem 1.1rem; background: var(--phc-paper); border: 1px solid var(--phc-line); border-radius: 2px; font-family: var(--phc-text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--phc-ink); cursor: pointer; transition: border-color 200ms var(--phc-ease), color 200ms var(--phc-ease); } .ph-certificates-page .phc-viewer__step:hover:not(:disabled) { border-color: var(--phc-ink); } .ph-certificates-page .phc-viewer__step:disabled { opacity: 0.4; cursor: default; } .ph-certificates-page .phc-viewer__count { font-family: var(--phc-display); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; color: var(--phc-gray); } .ph-certificates-page .phc-viewer__aside { padding: clamp(1.5rem, 3vw, 2.25rem); min-width: 0; } .ph-certificates-page .phc-viewer__cat { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--phc-orange); } /* Styled like a heading, but it is a

- see the note in the viewer markup. The display font and ink have to be stated because it no longer inherits them from the h1/h2/h3 rule. */ .ph-certificates-page .phc-viewer__title { margin-top: 0.6rem; font-family: var(--phc-display); color: var(--phc-ink); font-size: clamp(1.15rem, 1.8vw, 1.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; } .ph-certificates-page .phc-viewer__record { margin-top: 1.5rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--phc-ink); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--phc-gray); } .ph-certificates-page .phc-viewer__meta { margin: 0; font-size: 0.8125rem; line-height: 1.55; } .ph-certificates-page .phc-viewer__meta dt { margin-top: 0.9rem; font-weight: 500; color: var(--phc-gray); letter-spacing: 0.02em; } .ph-certificates-page .phc-viewer__meta dd { margin: 0.15rem 0 0; font-weight: 600; color: var(--phc-ink); overflow-wrap: anywhere; } /* The viewer owns scrolling while it is open; the page behind it must not move. PHARAON-SCROLL-01 is stopped by script, and this keeps the native scrollbar from jumping the layout (spec §37). */ body.phc-viewer-open { overflow: hidden; } /* ================================================================== 12. SEQUENCED REVEALS ================================================================== The motion core adopts each `.ph-reveal-soft` individually and gives it its own observer entry. These delays turn a row of them into one stagger without a group host - deliberately capped at six steps so a long grid never makes its last tile wait (MOTION-03 X.3). */ .ph-certificates-page .phc-seq > *:nth-child(2) { transition-delay: 70ms; } .ph-certificates-page .phc-seq > *:nth-child(3) { transition-delay: 140ms; } .ph-certificates-page .phc-seq > *:nth-child(4) { transition-delay: 210ms; } .ph-certificates-page .phc-grid > *:nth-child(6n + 2) { transition-delay: 50ms; } .ph-certificates-page .phc-grid > *:nth-child(6n + 3) { transition-delay: 100ms; } .ph-certificates-page .phc-grid > *:nth-child(6n + 4) { transition-delay: 150ms; } .ph-certificates-page .phc-grid > *:nth-child(6n + 5) { transition-delay: 200ms; } .ph-certificates-page .phc-grid > *:nth-child(6n + 6) { transition-delay: 250ms; } /* Hero entrance. Transform only: the front certificate is the LCP candidate and must paint at full opacity on the first frame, so nothing here touches opacity (spec §50). Gated on html.ph-motion so a blocked script leaves the stack exactly where it belongs. */ html.ph-motion .ph-certificates-page .phc-stack__card { animation: phc-settle 800ms var(--phc-ease) both; } html.ph-motion .ph-certificates-page .phc-stack__card--back { animation-delay: 620ms; } html.ph-motion .ph-certificates-page .phc-stack__card--front { animation-delay: 700ms; } html.ph-motion .ph-certificates-page .phc-stack__card--side { animation-delay: 780ms; } @keyframes phc-settle { from { transform: translate3d(0, 26px, 0); } to { transform: none; } } /* ================================================================== 13. RESPONSIVE ================================================================== Mobile is not the desktop composition scaled down (spec §48): the hero stacks, the certificate fan flattens into a plain three-up row with no rotation, and every editorial two-column band becomes one column. */ @media (min-width: 600px) { .ph-certificates-page .phc-index { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 768px) { .ph-certificates-page .phc-support__set { gap: 1.25rem; } .ph-certificates-page .phc-test__pages { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } /* The second page sits lower and slightly behind the first, so the pair reads as one two-page document (spec §19). */ .ph-certificates-page .phc-scan--page2 { margin-top: clamp(2rem, 5vw, 4.5rem); } .ph-certificates-page .phc-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); } } @media (min-width: 1024px) { .ph-certificates-page .phc-chapternav { display: block; } .ph-certificates-page .phc-hero__layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(3rem, 5vw, 5.5rem); } /* The fan (spec §14): 14001 raised behind, 9001 forward and largest, 45001 stepped down to its right. Rotation is capped at 3deg. The box is taller than the tallest card on purpose: the first attempt left only 57px of the rear certificate showing, which is its red band and nothing that identifies it. The vertical gap is now ~180px, enough for the "ISO 14001:2015" line (at 38% down the scan) to clear the two forward cards. */ .ph-certificates-page .phc-stack { display: block; position: relative; aspect-ratio: 4 / 4.15; } .ph-certificates-page .phc-stack__card { position: absolute; } .ph-certificates-page .phc-stack__card--back { width: 44%; left: 28%; top: 1.9rem; z-index: 1; transform: rotate(-2.2deg); } /* The rear card's caption cannot sit under it - the forward cards cover that space - so it hangs above instead. */ .ph-certificates-page .phc-stack__card--back .phc-stack__tag { position: absolute; top: -1.7rem; left: 0; margin: 0; } .ph-certificates-page .phc-stack__card--front { width: 48%; left: 0; bottom: 0; z-index: 3; transform: rotate(1.4deg); } .ph-certificates-page .phc-stack__card--side { width: 44%; right: 0; bottom: 4%; z-index: 2; transform: rotate(2.6deg); } .ph-certificates-page .phc-stack__card:hover, .ph-certificates-page .phc-stack__card:focus-visible { transform: translateY(-8px) rotate(0deg); } html.ph-motion .ph-certificates-page .phc-stack__card--back { animation-name: phc-settle-back; } html.ph-motion .ph-certificates-page .phc-stack__card--front { animation-name: phc-settle-front; } html.ph-motion .ph-certificates-page .phc-stack__card--side { animation-name: phc-settle-side; } @keyframes phc-settle-back { from { transform: translate3d(0, 30px, 0) rotate(-4deg); } to { transform: rotate(-2.2deg); } } @keyframes phc-settle-front { from { transform: translate3d(0, 30px, 0) rotate(3deg); } to { transform: rotate(1.4deg); } } @keyframes phc-settle-side { from { transform: translate3d(0, 30px, 0) rotate(5deg); } to { transform: rotate(2.6deg); } } /* Editorial rhythm: document / text, text / document, document / text with unequal columns, never three identical cards (spec §17). */ .ph-certificates-page .phc-iso__row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .ph-certificates-page .phc-iso__row:nth-child(2) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .ph-certificates-page .phc-iso__row:nth-child(2) .phc-iso__doc { order: 2; } .ph-certificates-page .phc-iso__row:nth-child(2) .phc-iso__text { order: 1; } .ph-certificates-page .phc-iso__row:nth-child(3) { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .ph-certificates-page .phc-iso__row:nth-child(2) .phc-iso__doc, .ph-certificates-page .phc-iso__row:nth-child(3) .phc-iso__doc { padding-inline-start: clamp(0rem, 3vw, 3rem); } .ph-certificates-page .phc-product__feature { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } .ph-certificates-page .phc-test { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .ph-certificates-page .phc-awards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 4vw, 4.5rem); } .ph-certificates-page .phc-viewer__panel { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } .ph-certificates-page .phc-viewer__aside { overflow-y: auto; max-height: min(88vh, 900px); } } @media (min-width: 1200px) { /* Now there is room outside the text column: indent the chapter head and hang the archive numeral in the space that creates. */ .ph-certificates-page .phc-head { padding-left: 7.5rem; max-width: calc(62ch + 7.5rem); } .ph-certificates-page .phc-head__n { position: absolute; left: 0; top: -0.3em; margin: 0; } } @media (min-width: 1280px) { .ph-certificates-page .phc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Small phones: the four-up record strip and the two-up support cards would both clip at 360px. */ @media (max-width: 400px) { .ph-certificates-page .phc-support__set { grid-template-columns: minmax(0, 1fr); } .ph-certificates-page .phc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ================================================================== 14. REDUCED MOTION (spec §35) ================================================================== Content stays fully visible; only the movement stops. The reveal primitives are already neutralised by MOTION-03's own reduced-motion block - these are this page's own effects. */ @media (prefers-reduced-motion: reduce) { .ph-certificates-page *, .ph-certificates-page *::before, .ph-certificates-page *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } html.ph-motion .ph-certificates-page .phc-stack__card { animation: none; } .ph-certificates-page .phc-scan:hover .phc-scan__paper, .ph-certificates-page .phc-stack__card:hover, .ph-certificates-page .phc-support:hover, .ph-certificates-page .phc-tile__btn:hover .phc-tile__shot, .ph-certificates-page .phc-btn:hover { transform: none; } } /* ================================================================== 15. PRINT ================================================================== A compliance page is printed and emailed more than most. */ @media print { .ph-certificates-page .phc-chapternav, .ph-certificates-page .phc-viewer, .ph-certificates-page .phc-filters, .ph-certificates-page .phc-hero__cta, .ph-certificates-page .phc-cta__actions { display: none !important; } .ph-certificates-page .phc-hero, .ph-certificates-page .phc-cta { background: #ffffff; color: #000000; } .ph-certificates-page .phc-hero__title, .ph-certificates-page .phc-cta__title { color: #000000; } }