/* ============================================================================ PrivacyGirl · site layer Tokens from brand-kit/palette/web-tokens.md, self-hosted faces, and this page's own classes. scrollcraft.css is the mechanism and is never edited. One light theme. Every colour on the page runs through a token. The receipt slip and the receipt bill stay white paper: they are objects, not grounds. ========================================================================== */ /* ---------------------------------------------------------------- faces -- */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/poppins-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/poppins-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/poppins-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/playfair-display-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/playfair-display-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/playfair-display-latin-700-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Handwriting, used twice and small: the "Kate V." signature and the collage note "Art taught me to look closer." One face for both: La Belle Aurore (Allura was tried for the signature on 2026-10-18; Kat kept this face). OFL, self-hosted, subset to Latin. Original and licence in brand-kit/fonts/handwriting/. */ @font-face { font-family: "PG Hand"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/la-belle-aurore-latin-400.woff2") format("woff2"); } /* ---------------------------------------------------------- light tokens -- */ :root { color-scheme: light; --sc-canvas: #FFF4FB; --sc-surface: #FCDEF0; --sc-ink: #2A1526; --sc-ink-soft: #6B4560; --sc-accent: #E97FD0; --sc-accent-ink: #2A1526; --sc-font-display: "Poppins", system-ui, sans-serif; --sc-font-text: "Poppins", system-ui, sans-serif; --sc-font-mono: "Poppins", system-ui, sans-serif; --sc-shadow-color: 318 42% 16%; --sc-hairline: var(--pg-line); --pg-serif: "Playfair Display", Georgia, "Times New Roman", serif; --pg-pink-deep: #E571CC; --pg-pink-text: #9E2F86; /* pink for small text: 6.1:1 on canvas, 5.3:1 on pinkTint (brand pink is 2.3:1) */ /* chapter grounds: each chapter lands on its own */ --pg-g-title: #FFF4FB; --pg-g-accept: #FCDEF0; --pg-g-art: #FFF4FB; --pg-g-work: #FFFFFF; --pg-g-stage: #FCDEF0; --pg-g-close: #FCDEF0; /* Get in touch sits on the pink tint, so it reads as its own chapter (2026-09-16) */ --pg-line: #E7B6DC; --pg-q-line: #D99BC9; --pg-topic-bar: #2A1526; --pg-frame: #F1AEE1; --pg-wordmark: #F8D1EE; /* quieter than the headline, portrait and CTA */ --pg-grain: 0.05; --pg-chrome: #2A1526; --pg-chrome-soft: #6B4560; --pg-focus: #2A1526; --pg-ground: #FFF4FB; /* paper objects (slip, bill) */ --pg-obj: #FFFFFF; --pg-obj-ink: #2A1526; --pg-obj-soft: #6B4560; --pg-obj-line: #F6D9EC; } /* Focus is ink on paper and pink on the ink chapter. Pink on paper is 2.3:1, under the 3:1 floor for focus indicators. */ :focus-visible { outline-color: var(--pg-focus); } body { font-weight: 400; } .sc-display { font-weight: 600; } /* ---------------------------------------------------------- shared type -- */ .pg-h2 { font-size: var(--sc-t-2xl); letter-spacing: -0.025em; line-height: 1.05; max-width: 16ch; } .pg-h2--wide { max-width: 22ch; } .pg-h3 { font-size: var(--sc-t-lg); font-weight: 600; margin-bottom: 0; } .pg-lede { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 38ch; margin: 0; text-wrap: pretty; } .pg-body { color: var(--sc-ink-soft); max-width: 60ch; margin: 0; text-wrap: pretty; } .pg-serif { font-family: var(--pg-serif); font-style: italic; font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.3; letter-spacing: 0; max-width: 30ch; margin: 0; text-wrap: balance; } .pg-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--pg-pink-deep); text-underline-offset: 0.26em; transition: text-decoration-color var(--sc-d-fast) var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { .pg-link:hover { text-decoration-color: currentColor; } } .pg-link:active { opacity: 0.8; } .pg-num { font-weight: 600; } /* ---------------------------------------------------------------- folio -- */ /* A slim bar: mark, the four destinations, then the action and the tools. Its ground follows the chapter underneath (set by page.js). */ .pg-folio { position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome); display: flex; align-items: center; gap: var(--sc-5); min-height: 4rem; padding: 0.5rem var(--sc-gutter); font-size: var(--sc-t-sm); line-height: 1.3; color: var(--pg-chrome); background: color-mix(in oklab, var(--pg-ground) 92%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--pg-chrome) 10%, transparent); } .pg-folio a, .pg-folio button { color: var(--pg-chrome); } .pg-folio__mark { font-size: var(--sc-t-base); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; padding-block: 0.5rem; white-space: nowrap; } .pg-nav { display: flex; gap: clamp(1rem, 2.4vw, 2.5rem); list-style: none; margin: 0 auto; padding: 0; } .pg-nav a { display: inline-block; padding-block: 0.5rem; font-weight: 500; text-decoration: none; text-decoration-color: var(--pg-pink-deep); text-decoration-thickness: 2px; text-underline-offset: 0.4em; } .pg-nav a[aria-current="location"] { text-decoration-line: underline; } @media (hover: hover) and (pointer: fine) { .pg-nav a:hover { text-decoration-line: underline; } } .pg-nav a:active { opacity: 0.8; } .pg-folio__end { display: flex; align-items: center; gap: var(--sc-4); } .pg-folio__cta { font-weight: 600; white-space: nowrap; padding-block: 0.5rem; text-decoration: underline; text-decoration-color: var(--pg-pink-deep); text-decoration-thickness: 2px; text-underline-offset: 0.26em; } /* Sections take focus after a header jump so keyboard and screen reader users land where they asked to go. The section itself needs no ring. */ section[tabindex="-1"]:focus, header[tabindex="-1"]:focus { outline: none; } /* --------------------------------------------------------- 0 title page -- */ .pg-title { position: relative; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: 6rem 10rem; overflow: clip; background: var(--pg-g-title); } .pg-title::before { /* paper grain, under everything on the title page */ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: var(--pg-grain); background-image: url("data:image/svg+xml;utf8,"); } .pg-wordmark { position: absolute; z-index: 0; right: calc(var(--sc-gutter) * 0.5); bottom: 7vh; pointer-events: none; } .pg-wordmark__word { display: block; white-space: nowrap; font-weight: 800; font-size: clamp(4rem, 12.5vw, 14rem); line-height: 0.8; letter-spacing: -0.055em; color: var(--pg-wordmark); } /* She leans on the G. The portrait is anchored to that letter; the line under her forearms sits on the letter tops, and the body below it (baked fade, 9.15% of the image width) drops softly over the letters. --pg-lean is in em, so the fit holds at every wordmark size. Arms and hands stay sharp. No CSS filter or mask on the image: either makes some browsers paint the image's box as a pale rectangle. */ .pg-wordmark__g { position: relative; display: inline-block; } /* Shifted left (fix3), her forearms lie over "c", "y" and the G, whose cap top sits about 0.11em below the old 0.075em lift (measured at 112, 137 and 180px), so she drops to +0.025em: forearms on the G, a pixel or two clear of it. Phones keep their own lift: there she still rests over "i" and "l". */ .pg-hero-portrait { --pg-lean: 0.025em; --pg-w: clamp(14rem, 25vw, 23rem); --pg-shift: -80%; /* fix3: shifted left of the G's centre */ position: absolute; left: 50%; bottom: calc(100% - var(--pg-lean) - var(--pg-w) * 0.0915); translate: var(--pg-shift) 0; width: var(--pg-w); max-width: none; height: auto; } .pg-title__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sc-8); align-items: center; } .pg-title__inner { position: relative; z-index: 2; } .pg-h1 { font-size: calc(var(--sc-t-3xl) * 0.9); letter-spacing: -0.04em; line-height: 0.98; max-width: 15ch; /* 10% smaller (2026-09-14) */ transform: translate3d(calc(var(--lx, 0) * 6px), calc(var(--ly, 0) * 4px), 0); } .pg-hero-lede { font-size: var(--sc-t-lg); line-height: 1.5; max-width: 40ch; margin: var(--sc-5) 0 0 !important; text-wrap: pretty; } .pg-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-6); margin: var(--sc-6) 0 0 !important; } .pg-btn { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.7rem 1.25rem; background: var(--pg-pink-deep); color: #2A1526; border-radius: 6px; font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: var(--sc-e1); transition: background-color var(--sc-d-fast) var(--sc-ease-out), box-shadow var(--sc-d-fast) var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { .pg-btn:hover { background: #E97FD0; box-shadow: var(--sc-e2); } } .pg-btn:active { translate: 0 1px; box-shadow: none; } /* ----------------------------------------------------------- 1 accept -- */ .pg-accept, .pg-accept__stage { background: var(--pg-g-accept); } .pg-accept__stage { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: var(--sc-8); row-gap: var(--sc-6); align-content: center; padding: 6rem var(--sc-gutter) 8rem; } .pg-aside-label { font-family: var(--pg-serif); font-style: italic; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); margin: 0 0 var(--sc-5); } .pg-quote { font-size: var(--sc-t-3xl); line-height: 1.02; letter-spacing: -0.035em; max-width: 12ch; } .pg-questions { list-style: none; margin: 0; padding: 0; align-self: end; } .pg-questions li { font-size: var(--sc-t-xl); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; padding-block: var(--sc-4); border-top: 1px solid var(--pg-q-line); max-width: 22ch; } .pg-resolve { grid-column: 1 / -1; margin: 0; font-family: var(--pg-serif); font-style: italic; font-size: var(--sc-t-xl); line-height: 1.3; max-width: 44ch; } /* -------------------------------------------------------------- 2 art -- */ .pg-art { background: var(--pg-g-art); } .pg-art__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sc-8); align-items: start; } .pg-art__text { position: sticky; top: 7rem; } .pg-plate { margin: 0; } .pg-plate__frame { overflow: clip; border-radius: 4px; background: var(--pg-frame); box-shadow: var(--sc-e2); } .pg-plate__frame img { width: 100%; height: 100%; object-fit: cover; } /* The drawing drifts with scroll inside its frame, so it overhangs the frame by 12% top and bottom: the frame's own background never shows at either edge, at any width. */ .pg-plate__frame--construction { position: relative; aspect-ratio: 1018 / 870; } .pg-plate__frame--construction img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; max-width: none; object-fit: cover; } .pg-plate__frame--casts { aspect-ratio: 1027 / 844; } .pg-plate__frame--watercolour { aspect-ratio: 1140 / 816; } .pg-plate figcaption { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-top: var(--sc-3); } .pg-plate__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-5); margin-top: var(--sc-7); } /* ------------------------------------------------------------- 3 work -- */ .pg-work { background: var(--pg-g-work); } .pg-work__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sc-8); align-items: start; } .pg-portrait { margin: 0; position: sticky; top: 7rem; } .pg-portrait__frame { aspect-ratio: 3 / 4; overflow: clip; border-radius: 4px; box-shadow: var(--sc-e2); background: var(--pg-frame); } .pg-portrait__frame img { width: 100%; height: 100%; object-fit: cover; } .pg-portrait figcaption { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); margin-top: var(--sc-3); font-weight: 500; } .pg-services { list-style: none; margin: var(--sc-4) 0 0; padding: 0; columns: 2; column-gap: var(--sc-6); } .pg-services li { break-inside: avoid; padding-block: var(--sc-3); border-top: 1px solid var(--pg-line); line-height: 1.4; } .pg-vuln { font-family: var(--pg-serif); font-style: italic; font-size: var(--sc-t-xl); line-height: 1.35; max-width: 34ch; margin-top: var(--sc-7) !important; } /* ---------------------------------------------------------- 4 on stage -- */ .pg-onstage, .pg-onstage__stage { background: var(--pg-g-stage); } .pg-onstage__stage { display: flex; align-items: center; } .pg-rail { gap: clamp(2rem, 4.5vw, 4.5rem); padding-inline: var(--sc-gutter); align-items: center; } .pg-rail > * { flex: 0 0 auto; } .pg-rail__lead { width: min(28rem, 82vw); } .pg-rail__lead .pg-h2 { font-size: var(--sc-t-3xl); } .pg-rail__lead > * + * { margin-top: var(--sc-4); } .pg-topic { width: clamp(17rem, 24vw, 22rem); border-top: 2px solid var(--pg-topic-bar); padding-top: var(--sc-5); } .pg-topic h3 { font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: -0.015em; margin: 0 0 var(--sc-3); } .pg-topic p { font-family: var(--pg-serif); font-style: italic; font-size: var(--sc-t-lg); line-height: 1.4; margin: 0; } .pg-rail__note { width: min(18rem, 76vw); } .pg-rail__note > * + * { margin-top: var(--sc-3); } /* ------------------------------------------------------ reduced motion -- */ @media (prefers-reduced-motion: reduce) { .pg-h1 { transform: none; } } /* --------------------------------------------------------------- tablet -- */ @media (max-width: 1100px) { /* Laptop widths: the text column narrows beside the portrait, so the headline scales with the viewport to stay on two lines. */ .pg-h1 { font-size: calc(clamp(2.6rem, 5.2vw, 4rem) * 0.9); } .pg-art__grid, .pg-work__grid { grid-template-columns: 1fr; gap: var(--sc-7); } .pg-art__text, .pg-portrait { position: static; } .pg-portrait { max-width: 22rem; } } /* --------------------------------------------------------------- phones -- */ @media (max-width: 860px) { /* No menu: the four destinations drop to a second row under the mark and the action, spread across the full width. */ .pg-folio { flex-wrap: wrap; row-gap: 0; min-height: 3.5rem; padding-block: 0.25rem 0; } .pg-folio__end { margin-left: auto; } .pg-nav { order: 3; flex: 1 0 100%; justify-content: space-between; gap: var(--sc-3); margin: 0; } .pg-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.2rem; } /* 44px tap targets */ .pg-title__grid { grid-template-columns: 1fr; gap: var(--sc-7); } .pg-title { padding-block: 8.5rem 3rem; } /* clears the two-row header */ /* Phones: the wordmark and portrait follow the text in normal flow, so she can never cover the headline. Room above the letters is her height. */ .pg-wordmark { position: relative; right: auto; bottom: auto; order: 2; justify-self: end; margin-right: var(--sc-gutter); --pg-portrait-w: 15rem; margin-top: calc(var(--pg-portrait-w) * 1.496 + var(--sc-5)); /* her height above the forearm line */ /* No scroll drift in the stacked phone layout: the drift lifted her head into the buttons above. Overrides the engine's inline transform. */ transform: none !important; } .pg-wordmark__word { font-size: 14.5vw; } /* the whole word fits the screen */ /* Centred on the G she overhangs a phone's right edge; shift her left so the whole figure stays on screen while her arms still cover the G. */ .pg-hero-portrait { --pg-w: var(--pg-portrait-w); translate: -75% 0; --pg-lean: -0.09em; } /* smaller letters: a little more lift so sub-pixel rounding never overlaps */ .pg-accept__stage { grid-template-columns: 1fr; padding: 4.5rem var(--sc-gutter) 6.5rem; row-gap: var(--sc-5); } .pg-quote { font-size: var(--sc-t-2xl); } .pg-questions li { font-size: var(--sc-t-lg); padding-block: var(--sc-3); } .pg-resolve { font-size: var(--sc-t-lg); } .pg-services { columns: 1; } } @media (max-width: 700px) { .pg-h1 { font-size: calc(var(--sc-t-2xl) * 0.9); } .pg-h2, .pg-rail__lead .pg-h2 { font-size: var(--sc-t-xl); } } /* ======================================================================== v2 Product-led portfolio sections: credibility strip, work, my view, ideas, speaking, about preview, the About page, and the article pages. Existing tokens only. ======================================================================== */ .pg-nav a[aria-current="page"] { text-decoration-line: underline; } /* ------------------------------------------------------- credibility strip -- */ .pg-strip { position: relative; display: flex; align-items: center; gap: var(--sc-4); background: var(--pg-g-title); border-block: 1px solid var(--pg-line); padding: var(--sc-4) 0; } .pg-strip__viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .pg-strip__tracks { display: flex; width: max-content; animation: pg-marquee 75s linear infinite; } .pg-strip__track { display: flex; flex: none; list-style: none; margin: 0; padding: 0; } .pg-strip__track li { display: flex; align-items: center; white-space: nowrap; font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.01em; color: var(--sc-ink); } .pg-strip__track li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--pg-pink-deep); margin-inline: 1.6rem; } @keyframes pg-marquee { to { transform: translateX(-50%); } } .pg-strip:hover .pg-strip__tracks { animation-play-state: paused; } /* ------------------------------------------------------------------ work -- */ .pg-cases { background: var(--pg-g-work); } /* Label + statement heading, like Blog and About (2026-10-18; was a bare "Work"). */ .pg-cases__title { margin-top: var(--sc-4) !important; max-width: 15ch; font-size: clamp(2rem, 0.95rem + 3vw, 3.8rem); line-height: 1; letter-spacing: -0.04em; } .pg-cases__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-7) var(--sc-6); margin-top: var(--sc-7); } /* Work cards, to Kat's portfolio mockup (2026-10-03): a tinted art panel on top of a white card, then the type label, the title with an arrow, one sentence, a hairline and the tags. */ .pg-cases__grid { list-style: none; padding: 0; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--sc-6); } .pg-case { display: block; } .pg-case__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; border: 1px solid var(--pg-line); border-radius: 10px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px color-mix(in oklab, var(--sc-ink) 5%, transparent); transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease; } .pg-case__link:hover { border-color: var(--pg-pink-deep); transform: translateY(-3px); box-shadow: 0 10px 26px color-mix(in oklab, var(--sc-ink) 10%, transparent); } .pg-case__frame { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; padding: var(--sc-5); background: linear-gradient(145deg, color-mix(in oklab, var(--pg-line) 26%, #fff) 0%, #fff 46%, color-mix(in oklab, var(--pg-line) 18%, #fff) 100%); border-bottom: 1px solid var(--pg-line); } .pg-case__frame img { width: 100%; height: 100%; object-fit: contain; } /* The circle is square. Taking it out of flow keeps it from stretching the panel, so both cards keep the same 16:10 art area. */ .pg-case__donut { position: absolute; inset: var(--sc-4); width: calc(100% - 2 * var(--sc-4)); height: calc(100% - 2 * var(--sc-4)); } .pg-case__donut-label { font-family: var(--sc-font-display); font-size: 7.4px; font-weight: 600; text-anchor: middle; } .pg-case__donut-hub { font-family: var(--sc-font-display); font-size: 11px; font-weight: 700; letter-spacing: -0.01em; text-anchor: middle; fill: var(--sc-ink); } .pg-case__body { display: flex; flex-direction: column; flex: 1; padding: var(--sc-5) var(--sc-5) var(--sc-4); } .pg-case__meta { display: block; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pg-pink-deep); } .pg-case__title { display: block; margin-top: var(--sc-2); font-size: var(--sc-t-lg); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; } .pg-case__go { display: inline-block; margin-left: 0.35em; color: var(--pg-pink-deep); transition: transform 0.2s ease; } .pg-case__link:hover .pg-case__go { transform: translateX(4px); } .pg-case__answer { display: block; margin-top: var(--sc-3); font-size: var(--pg-t-contact-base); line-height: 1.55; color: var(--sc-ink-soft); } .pg-case__tags { display: block; margin-top: auto; padding-top: var(--sc-4); border-top: 1px solid var(--pg-line); font-size: var(--sc-t-sm); color: var(--pg-pink-deep); } .pg-case__tags::before { content: ""; display: block; height: var(--sc-3); } @media (prefers-reduced-motion: reduce) { .pg-case__link, .pg-case__go { transition: none; } .pg-case__link:hover { transform: none; } } /* ------------------------------------------- my view (fix4, phone fix11) -- */ /* Point of view on the left; on the right the tagline and a phone showing a privacy settings screen. The phone is an illustration drawn in HTML and CSS. Its type is sized in container units, so the screen scales as one piece. */ .pg-pov { position: relative; overflow: clip; padding-block: var(--sc-section); background: radial-gradient(52% 78% at 84% 50%, #FFF4FB 0%, #FFF4FB 30%, transparent 72%), var(--pg-g-accept); } .pg-pov__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-7); align-items: center; } .pg-pov__label, .pg-label { margin: 0; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pg-pink-text); } .pg-pov__title { margin: var(--sc-4) 0 0 !important; max-width: 14ch; font-size: clamp(2.6rem, 1.4rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.04em; } .pg-pov__sub { margin: var(--sc-4) 0 0 !important; max-width: 32ch; text-wrap: balance; font-size: var(--sc-t-xl); font-weight: 500; line-height: 1.22; letter-spacing: -0.015em; color: var(--sc-ink-soft); } .pg-pov__pillars { list-style: none; margin: var(--sc-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-pov__pillars li { padding: 0 var(--sc-5); border-left: 1px solid var(--pg-q-line); } .pg-pov__pillars li:first-child { padding-left: 0; border-left: 0; } .pg-pov__pillars li:last-child { padding-right: 0; } .pg-pov__icon { display: block; width: 2.25rem; height: 2.25rem; color: var(--pg-pink-deep); } .pg-pov__name { margin: var(--sc-4) 0 var(--sc-2); font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.01em; } .pg-pov__pillars p { margin: 0; max-width: 26ch; line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; } .pg-btn--ink { background: var(--sc-ink); color: #FFF4FB; } @media (hover: hover) and (pointer: fine) { .pg-btn--ink:hover { background: #45253E; } } .pg-pov__aside { display: flex; justify-content: flex-end; align-items: flex-start; gap: clamp(1.25rem, 2.6vw, 2.75rem); } .pg-pov__tagwrap { margin-top: 3rem; } .pg-pov__tag { margin: 0; max-width: 8.5em; font-size: var(--sc-t-sm); font-weight: 500; line-height: 2; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sc-ink); } .pg-pov__tag::after { content: ""; display: block; width: 3.5rem; height: 2px; margin-top: var(--sc-6); background: var(--pg-pink-deep); } /* the phone: a working privacy settings demo (page.js §9) */ /* .pg-phone is the size container, so its own box cannot use cqw (that would measure an ancestor). Everything inside it can. --tx/--ty come from page.js under a fine pointer; the body tilts and the shadow slides the other way, transform only. */ .pg-phone { --pg-phone-w: clamp(15rem, 21vw, 19.5rem); --tx: 0; --ty: 0; position: relative; container-type: inline-size; flex: none; width: var(--pg-phone-w); aspect-ratio: 9 / 19.2; rotate: 6deg; } .pg-phone::before { /* the shadow */ content: ""; position: absolute; inset: 7% 5% -1%; z-index: -1; border-radius: 18% / 8.5%; background: hsl(318 40% 22% / 0.4); filter: blur(22px); transform: translate3d(calc(var(--tx) * -14px), calc(20px + var(--ty) * -10px), 0); } .pg-phone__body { height: 100%; padding: 2.4cqw; border-radius: 15cqw; background: linear-gradient(150deg, #EFD5E1 0%, #C89DB3 42%, #E9C8D8 100%); box-shadow: 0 10px 22px hsl(318 40% 22% / 0.14), inset 0 0 0 1px hsl(318 30% 38% / 0.3); transform: perspective(1100px) rotateY(calc(var(--tx) * 8deg)) rotateX(calc(var(--ty) * -6deg)); } .pg-phone__screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 12.8cqw; padding: 5cqw 7.5cqw 3cqw; background: #FCF6F9; color: #2A1526; box-shadow: inset 0 0 0 1.6cqw #1E141B; font-size: 4.3cqw; line-height: 1.3; } .pg-phone__screen svg { display: block; } .pg-phone__status { display: flex; align-items: center; justify-content: space-between; font-size: 4cqw; font-weight: 600; padding-inline: 2cqw; } .pg-phone__island { width: 27cqw; height: 7.5cqw; border-radius: 99px; background: #1E141B; } .pg-phone__sys { display: flex; align-items: center; gap: 1.4cqw; } .pg-phone__sys svg:first-child { width: 5cqw; } .pg-phone__sys svg:last-child { width: 7cqw; } .pg-phone__app { display: flex; flex-direction: column; min-height: 0; } .pg-phone__title { display: flex; align-items: center; justify-content: space-between; margin-top: 6cqw; } .pg-phone__title h3 { margin: 0; font-size: 7.4cqw; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .pg-phone__gear { width: 6cqw; height: 6cqw; } .pg-phone__sub { margin: 1.2cqw 0 0; font-size: 3.7cqw; color: #6B4560; } /* fix14: soft pink card; red ! while weak, filled pink shield with a tick when safe. When safe the big button gives way to a link inside the card, and the card grows by about the button's height, so the rows barely move. */ .pg-phone__card { display: flex; align-items: flex-start; gap: 3.2cqw; margin-top: 4cqw; padding: 3.4cqw 4.2cqw; border-radius: 4.5cqw; background: #F9E6F0; } .pg-phone__badge { position: relative; flex: none; width: 7cqw; height: 7cqw; margin-top: 0.4cqw; } .pg-phone__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; } .pg-phone__badge-alert, .pg-phone__badge-safe { transition: opacity 220ms var(--sc-ease-out), transform 220ms var(--sc-ease-out); } .pg-phone__badge-safe { opacity: 0; transform: scale(0.95); } .pg-phone__card.is-safe .pg-phone__badge-safe { opacity: 1; transform: none; } .pg-phone__card.is-safe .pg-phone__badge-alert { opacity: 0; transform: scale(0.95); } .pg-phone__cardtext { flex: 1; display: grid; justify-items: start; } .pg-phone__cardtext b { font-size: 3.9cqw; font-weight: 600; } .pg-phone__cardtext small { font-size: 3.2cqw; color: #6B4560; } .pg-phone__cardlink { display: inline-flex; align-items: center; gap: 1.2cqw; min-height: 8cqw; margin-top: 2.2cqw; padding: 0; border: 0; background: none; color: var(--pg-pink-text); font: inherit; font-size: 3.7cqw; font-weight: 600; cursor: pointer; animation: pg-phone-fade 240ms var(--sc-ease-out); } .pg-phone__cardlink svg { width: 3.6cqw; height: 3.6cqw; transition: transform 160ms var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { .pg-phone__cardlink:hover svg { transform: translate3d(0.8cqw, 0, 0); } .pg-phone__cardlink:hover span { text-decoration: underline; text-underline-offset: 0.2em; } } .pg-phone__cardlink:active { opacity: 0.8; } .pg-phone__cardlink[aria-disabled="true"] { opacity: 0.62; cursor: progress; } .pg-phone__cardlink:focus-visible { outline: 2px solid #2A1526; outline-offset: 2px; border-radius: 2px; } .pg-phone__cardlink[hidden], .pg-phone__cta[hidden] { display: none; } @keyframes pg-phone-fade { from { opacity: 0; } to { opacity: 1; } } .pg-phone__cta { margin-top: 3cqw; min-height: 9.5cqw; padding: 1.5cqw 4cqw; border: 0; border-radius: 99px; cursor: pointer; background: var(--pg-pink-deep); color: #2A1526; font: inherit; font-size: 3.9cqw; font-weight: 600; transition: background-color 140ms var(--sc-ease-out), opacity 140ms var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { .pg-phone__cta:hover { background: #EC8FD6; } } .pg-phone__cta:active { translate: 0 1px; } .pg-phone__cta[aria-disabled="true"] { opacity: 0.62; cursor: progress; translate: none; } .pg-phone__cta:focus-visible, .pg-phone__row:focus-visible { outline: 2px solid #2A1526; outline-offset: 1px; } .pg-phone__group { margin: 4.5cqw 0 0.6cqw; font-size: 3.1cqw; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #6B4560; } .pg-phone__rows { list-style: none; margin: 0; padding: 0; } .pg-phone__rows li { border-bottom: 1px solid #F0DCE7; } .pg-phone__rows li:last-child { border-bottom: 0; } .pg-phone__row { position: relative; display: grid; grid-template-columns: 6cqw minmax(0, 1fr) auto auto; align-items: center; gap: 2.4cqw; width: calc(100% + 3cqw); margin-inline: -1.5cqw; padding: 2.5cqw 1.5cqw; border: 0; border-radius: 2.6cqw; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .pg-phone__row > * { position: relative; } .pg-phone__row::before { /* the soft highlight while a row changes, and on hover */ content: ""; position: absolute; inset: 0.4cqw 0; border-radius: 2.6cqw; background: #F8DCEA; opacity: 0; transition: opacity 140ms var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { .pg-phone__row:hover::before { opacity: 0.6; } } .pg-phone__row:active::before { opacity: 0.9; } .pg-phone__row.is-changing::before { animation: pg-row-flash 900ms var(--sc-ease-out); } @keyframes pg-row-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } } .pg-phone__icon { width: 5.6cqw; height: 5.6cqw; color: #3A2434; } .pg-phone__name { font-size: 4.15cqw; font-weight: 400; } .pg-phone__chev { width: 4.2cqw; height: 4.2cqw; color: #8A6A7E; } .pg-phone__name small { display: block; font-size: 3cqw; font-weight: 400; color: #6B4560; } .pg-phone__state { font-size: 3.4cqw; font-weight: 500; color: #C7253E; white-space: nowrap; transition: color 220ms var(--sc-ease-out); } /* weak values in red (5.2:1) */ .pg-phone__row[aria-checked="true"] .pg-phone__state, .pg-phone__row[data-confirm] .pg-phone__state { color: #6B4560; font-weight: 400; } .pg-phone__row.is-changing .pg-phone__state { animation: pg-state-in 320ms var(--sc-ease-out); } @keyframes pg-state-in { from { opacity: 0; transform: translate3d(3px, 0, 0); } to { opacity: 1; transform: none; } } .pg-phone__toggle { width: 9.5cqw; height: 5.6cqw; border-radius: 99px; background: #DCCED6; transition: background-color 240ms var(--sc-ease-out); } .pg-phone__toggle::after { content: ""; position: absolute; top: 0.7cqw; left: 0.7cqw; width: 4.2cqw; height: 4.2cqw; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px hsl(318 30% 20% / 0.3); transition: transform 260ms var(--sc-ease-out); } .pg-phone__row[aria-checked="true"] .pg-phone__toggle { background: var(--pg-pink-deep); } .pg-phone__row[aria-checked="true"] .pg-phone__toggle::after { transform: translate3d(3.9cqw, 0, 0); } .pg-phone__toast { position: absolute; left: 7.5cqw; right: 7.5cqw; bottom: 19cqw; z-index: 2; margin: 0; padding: 2.4cqw 3.6cqw; border-radius: 99px; background: #2A1526; color: #FFF4FB; font-size: 3.4cqw; font-weight: 500; text-align: center; pointer-events: none; opacity: 0; transform: translate3d(0, 2cqw, 0) scale(0.97); transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out); } .pg-phone__toast.is-shown { opacity: 1; transform: none; } .pg-phone__tabs { display: flex; justify-content: space-around; margin-top: auto; padding-top: 3cqw; border-top: 1px solid #F0DCE7; font-size: 3cqw; color: #6B4560; } .pg-phone__tabs span { display: grid; justify-items: center; gap: 0.8cqw; } .pg-phone__tabs .is-active { color: var(--pg-pink-text); font-weight: 600; } .pg-phone__tab { width: 5.6cqw; height: 5.6cqw; } .pg-phone__bar { align-self: center; width: 34cqw; height: 1.3cqw; margin-top: 2.6cqw; border-radius: 99px; background: #1E141B; } @media (prefers-reduced-motion: reduce) { /* Fewer and gentler: no tilt, no slides; the colour and label changes still show what happened. */ .pg-phone__body { transform: none; } .pg-phone::before { transform: translate3d(0, 20px, 0); } .pg-phone__toggle::after, .pg-phone__badge-safe, .pg-phone__badge-alert { transition: none; } .pg-phone__cardlink { animation: none; } .pg-phone__row.is-changing .pg-phone__state { animation: none; } .pg-phone__toast { transform: none; } } /* ---------------------------------------------------- ideas, home (fix5) -- */ /* An invitation into /blog/: text on the left, a tilted notebook page on the right (HTML and CSS, so the line on it is real text), a topic line below. */ .pg-idx { background: var(--pg-g-work); overflow: clip; } /* white since 2026-10-18: Blog now sits next to About, which is --pg-g-title */ .pg-idx__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8); align-items: center; } .pg-idx__title { margin-top: var(--sc-4) !important; max-width: 15ch; /* room for "Human-centered" on one line */ font-size: clamp(2rem, 0.95rem + 3vw, 3.8rem); line-height: 1; letter-spacing: -0.04em; /* always two lines: "Human-centered / Privacy Design.", with room to spare on real phones */ } .pg-idx__lede { margin-top: var(--sc-5) !important; max-width: 40ch; font-size: var(--sc-t-lg); line-height: 1.45; text-wrap: pretty; } .pg-idx__body { max-width: 46ch; color: var(--sc-ink-soft); text-wrap: pretty; } .pg-idx__cta { margin-top: var(--sc-6) !important; } .pg-note { position: relative; justify-self: center; width: min(100%, 25rem); aspect-ratio: 4 / 5; } .pg-note::before { /* the sheet underneath */ content: ""; position: absolute; inset: 0; rotate: 9deg; translate: -5% -1%; background: #F2DDE8; box-shadow: var(--sc-e1); } .pg-note__sheet { position: absolute; inset: 0; rotate: 4deg; overflow: hidden; border-radius: 2px; padding: 17% 12% 10% 16%; background: linear-gradient(165deg, #F8EAF1 0%, #EDD3E1 100%); box-shadow: var(--sc-e3); } .pg-note__sheet::before { /* the fold of the notebook */ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 10%; background: linear-gradient(90deg, hsl(318 30% 18% / 0.34), transparent); } .pg-note__text { position: relative; margin: 0; max-width: 13em; rotate: -3deg; font-size: clamp(1rem, 0.75rem + 0.9vw, 1.45rem); line-height: 1.65; letter-spacing: 0.15em; text-transform: uppercase; color: #3A2434; } .pg-note__mark { position: absolute; left: 16%; bottom: 8%; margin: 0; font-size: var(--sc-t-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--sc-ink); } .pg-note__pen { position: absolute; right: 10%; bottom: -3%; width: 3.2%; height: auto; rotate: 30deg; } .pg-topics { list-style: none; margin: var(--sc-8) 0 0; padding: var(--sc-5) 0 0; border-top: 1px solid var(--pg-q-line); display: flex; justify-content: space-between; } .pg-topics li { flex: 1 1 auto; padding-inline: var(--sc-4); border-left: 1px solid var(--pg-q-line); text-align: center; font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-topics li:first-child { padding-left: 0; border-left: 0; text-align: left; } .pg-topics li:last-child { padding-right: 0; text-align: right; } .pg-topics a { display: inline-block; padding-block: 0.6rem; color: inherit; text-decoration: none; text-decoration-color: var(--pg-pink-deep); text-decoration-thickness: 2px; text-underline-offset: 0.35em; } @media (hover: hover) and (pointer: fine) { .pg-topics a:hover { color: var(--sc-ink); text-decoration-line: underline; } } .pg-topics a:active { opacity: 0.8; } /* ---------------------------------------------------- ideas page (fix7) -- */ .pg-think { background: var(--pg-g-title); } .pg-think__title { font-size: var(--sc-t-3xl); line-height: 1.02; letter-spacing: -0.035em; } .pg-think__sub { margin-top: var(--sc-3) !important; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); } .pg-chips { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin-top: var(--sc-6); } .pg-chip { min-height: 44px; padding: 0.5rem 1.1rem; border: 0; border-radius: 999px; cursor: pointer; background: none; color: var(--sc-ink-soft); font: inherit; font-size: var(--sc-t-base); transition: background-color var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out); } .pg-chip[aria-pressed="true"] { background: var(--sc-surface); color: var(--sc-ink); font-weight: 500; } @media (hover: hover) and (pointer: fine) { .pg-chip:hover { color: var(--sc-ink); } } .pg-chip:active { translate: 0 1px; } /* Blog page (fix16): a grid of cards. The title link stretches over the whole card; the caption sits on a dark scrim only where it is written. */ .pg-blog__title { margin-top: var(--sc-3) !important; font-size: clamp(2.4rem, 1.2rem + 4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; } .pg-blog .pg-think__sub { max-width: 46ch; text-wrap: pretty; } .pg-cards { list-style: none; margin: var(--sc-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); } .pg-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: clip; border-radius: 8px; background: #FFFFFF; box-shadow: var(--sc-e1); transition: box-shadow var(--sc-d-base) var(--sc-ease-out), translate var(--sc-d-base) var(--sc-ease-out); } /* fix16 style: one light image area; the caption sits on the left in dark ink, the drawn screen on the right. No dark panel. */ .pg-card__media { position: relative; display: grid; grid-template-columns: 37% 1fr; aspect-ratio: 2 / 1; overflow: clip; container-type: inline-size; background: radial-gradient(70% 90% at 100% 0%, #F6DDEA 0%, transparent 70%), linear-gradient(115deg, #FFF8FB 0%, #F7E8F0 55%, #EFD9E5 100%); } .pg-card__panel { display: flex; align-items: center; padding: 0 2cqw 0 6.5cqw; } .pg-card__caption { font-size: 2.55cqw; font-weight: 500; line-height: 1.8; letter-spacing: 0.18em; text-transform: uppercase; color: #3A2434; } .pg-card__art { position: relative; display: grid; place-content: center; justify-items: center; gap: 2.4cqw; padding: 4cqw 4.5cqw 4cqw 1cqw; overflow: clip; color: #2A1526; font-size: 2.35cqw; line-height: 1.3; } .pg-card__art > * { transition: translate 420ms var(--sc-ease-out); } /* the drawn interface pieces */ .pg-ui { width: 100%; min-width: 34cqw; padding: 2.4cqw 2.8cqw; border-radius: 1.6cqw; background: #FFFFFF; box-shadow: 0 0.6cqw 2cqw hsl(318 30% 20% / 0.12); } .pg-ui__title { margin: 0 0 1.2cqw; font-size: 2.7cqw; font-weight: 600; line-height: 1.2; } .pg-ui__row { display: flex; align-items: center; justify-content: space-between; gap: 1.6cqw; margin: 0; padding-block: 0.75cqw; } .pg-ui__row--start { justify-content: flex-start; } .pg-ui__row small { display: block; font-size: 1.9cqw; color: #6B4560; } .pg-ui__row i { flex: none; position: relative; font-style: normal; } .pg-ui__tg { width: 4.4cqw; height: 2.5cqw; border-radius: 99px; background: #DCCED6; } .pg-ui__tg::after { content: ""; position: absolute; top: 0.35cqw; left: 0.35cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #FFFFFF; } .pg-ui__tg.is-on { background: var(--pg-pink-deep); } .pg-ui__tg.is-on::after { left: auto; right: 0.35cqw; } .pg-ui__ck { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #1F9D6B; } .pg-ui__ck::after, .pg-ui__box::after { content: ""; position: absolute; left: 0.85cqw; top: 0.42cqw; width: 0.6cqw; height: 1.1cqw; border: solid #FFFFFF; border-width: 0 0.33cqw 0.33cqw 0; rotate: 45deg; } .pg-ui__box { width: 2.3cqw; height: 2.3cqw; border-radius: 0.4cqw; background: #9A8492; } .pg-ui__chev { width: 1.2cqw; height: 1.2cqw; border: solid #8A6A7E; border-width: 0.3cqw 0.3cqw 0 0; rotate: 45deg; margin-right: 0.5cqw; } .pg-ui__dot { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #F7DDEB; box-shadow: inset 0 0 0 0.95cqw #F7DDEB, inset 0 0 0 1.3cqw var(--pg-pink-deep); } .pg-ui__rd { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; border: 0.25cqw solid #B9A6B1; } .pg-ui__rd.is-on { border-color: var(--pg-pink-deep); background: var(--pg-pink-deep); box-shadow: inset 0 0 0 0.45cqw #FFFFFF; } .pg-ui__input { display: flex; justify-content: space-between; gap: 1.6cqw; margin: 0 0 1cqw; padding: 1.1cqw 1.5cqw; border: 1px solid #EAD9E2; border-radius: 0.8cqw; color: #6B4560; } .pg-ui__btn { margin: 1.2cqw 0 0; padding: 1.1cqw 1.6cqw; border-radius: 0.8cqw; text-align: center; font-weight: 600; color: #5E3D54; background: #E9DFE5; } /* muted button: 6:1 */ .pg-ui__btn.is-pink { color: #FFFFFF; background: #A8367F; } /* white on this pink: 6:1 */ .pg-ui__btn.is-dark { display: inline-block; color: #FFFFFF; background: #2A1526; } .pg-ui--hero .pg-ui__big { margin: 0; font-size: 3.4cqw; font-weight: 600; line-height: 1.15; } .pg-ui--hero .pg-ui__small { margin: 1cqw 0 0; font-size: 2.1cqw; color: #6B4560; } .pg-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw; width: 100%; } .pg-ba .pg-ui { min-width: 0; padding: 2cqw; font-size: 2cqw; } .pg-ba .pg-ui__title { font-size: 2.3cqw; } .pg-mini-phone { align-self: start; width: 36cqw; margin-top: 3cqw; padding: 3cqw 2.6cqw; border: 0.8cqw solid #1E141B; border-bottom: 0; border-radius: 5cqw 5cqw 0 0; background: #FFFFFF; rotate: 6deg; } .pg-steps { position: relative; display: flex; justify-content: space-between; width: 50cqw; } .pg-steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 1.7cqw; border-top: 0.25cqw dashed #D9A5C9; } .pg-steps__s { position: relative; display: grid; justify-items: center; gap: 1cqw; font-size: 2cqw; } .pg-steps__s i { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 0.5cqw #F7DDEB, inset 0 0 0 1.2cqw #FFFFFF, inset 0 0 0 1.7cqw var(--pg-pink-deep); } .pg-ui__pill { margin: 0; padding: 1.3cqw 2.4cqw; border-radius: 1cqw; background: #F7DDEB; text-align: center; font-weight: 500; } .pg-sketch { position: relative; align-self: stretch; justify-self: stretch; width: 50cqw; height: 36cqw; padding: 3cqw; border-radius: 1cqw; rotate: -4deg; background: repeating-linear-gradient(#FFFFFF 0 2.6cqw, #F1E3EB 2.6cqw calc(2.6cqw + 1px)); box-shadow: 0 0.8cqw 2cqw hsl(318 30% 20% / 0.14); } .pg-sketch__words { margin: 0; max-width: 32cqw; font-family: "PG Hand", var(--pg-serif); font-size: 3cqw; line-height: 1.7; color: #4A3343; } .pg-sticky { position: absolute; right: 3cqw; bottom: 3cqw; margin: 0; width: 15cqw; padding: 1.6cqw; background: #FFE07A; rotate: 7deg; font-family: "PG Hand", var(--pg-serif); font-size: 2.6cqw; line-height: 1.2; color: #3A2434; box-shadow: 0 0.6cqw 1.2cqw hsl(40 40% 20% / 0.25); } .pg-paper { width: 36cqw; padding: 2.6cqw 3.4cqw; background: #FFFFFF; rotate: -6deg; font-family: "PG Hand", var(--pg-serif); font-size: 3.2cqw; line-height: 1.35; box-shadow: 1.2cqw 1.2cqw 0 #EBDDE5, 0 1cqw 2cqw hsl(318 30% 20% / 0.15); } .pg-paper p { margin: 0; } .pg-paper p:last-child::after { content: ""; display: block; width: 50%; height: 0.35cqw; margin-top: 0.6cqw; background: var(--pg-pink-deep); } .pg-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sc-4) var(--sc-5) var(--sc-5); } .pg-card__date { font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-card__title { margin: var(--sc-2) 0 0; font-size: var(--sc-t-lg); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; } .pg-card__title a { color: inherit; text-decoration: none; } .pg-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 8px; } /* the whole card is the link */ .pg-card__title a:focus-visible { outline: none; } .pg-card:focus-within { outline: 2px solid var(--pg-focus); outline-offset: 3px; } .pg-card__summary { margin: var(--sc-2) 0 0; color: var(--sc-ink-soft); line-height: 1.5; text-wrap: pretty; } .pg-card__more { margin-top: auto; padding-top: var(--sc-4); font-size: var(--sc-t-sm); font-weight: 600; color: var(--pg-pink-text); } .pg-card__more span { display: inline-block; transition: translate var(--sc-d-fast) var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { .pg-card:hover { box-shadow: var(--sc-e2); translate: 0 -2px; } .pg-card:hover .pg-card__art > * { translate: 0 -3px; } .pg-card:hover .pg-card__title a { text-decoration: underline; text-decoration-color: var(--pg-pink-deep); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .pg-card:hover .pg-card__more span { translate: 4px 0; } } .pg-card:active { translate: 0 1px; } @media (prefers-reduced-motion: reduce) { .pg-card, .pg-card__art > * { transition: none; } .pg-card:hover { translate: none; } .pg-card:hover .pg-card__art > * { translate: none; } } @media (max-width: 1100px) { .pg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .pg-cards { grid-template-columns: minmax(0, 1fr); gap: var(--sc-4); } } .pg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* -------------------------------------------------------------- speaking -- */ .pg-speaking, .pg-speaking__stage { background: #FDE8F4; } /* 2026-10-18: between the pale --pg-g-title and the old --pg-g-stage pink, so it keeps its warmth but stays apart from Get in touch */ .pg-speaking__stage { display: flex; align-items: center; } .pg-rail--photos { align-items: center; } .pg-shot { flex: none; margin: 0; width: clamp(17rem, 30vw, 28rem); } .pg-shot--tall { width: clamp(13rem, 21vw, 20rem); } .pg-shot__frame { aspect-ratio: 3 / 2; overflow: clip; border-radius: 4px; background: var(--pg-frame); } .pg-shot--tall .pg-shot__frame { aspect-ratio: 4 / 5; } .pg-shot__frame img { width: 100%; height: 100%; object-fit: cover; } /* Speaking photos can't be dragged out, right-click-saved or long-press-saved (Kat, 2026-10-18). A deterrent only: screenshots still work. The click lands on the frame, so the browser offers no image menu. */ .pg-shot__frame { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .pg-shot__frame img { pointer-events: none; -webkit-user-drag: none; user-select: none; } .pg-shot__frame--empty { display: grid; place-items: center; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); border: 1px dashed var(--pg-q-line); background: repeating-linear-gradient(135deg, transparent 0 13px, color-mix(in oklab, var(--pg-line) 45%, transparent) 13px 14px); } /* Inline text, not flex (2026-10-18): country and year continue on the title's last line when they fit. "· country · year" is one unbreakable piece, so the year never drops to a line by itself. */ .pg-shot__frame img.pg-shot__img--y42 { object-position: 50% 42%; } /* was an inline style; CSP blocks those live (2026-10-18) */ .pg-shot__cap { display: block; margin-top: var(--sc-3); font-size: var(--sc-t-xs); line-height: 1.5; color: var(--sc-ink-soft); } .pg-shot__where { display: inline-block; white-space: nowrap; margin-left: 0.5rem; } /* country + year as one piece: a line can break before it, never inside it */ .pg-shot__where span::before { content: "·"; margin-right: 0.5rem; } .pg-shot__where span + span { margin-left: 0.5rem; } /* Desktop: a caption may run up to 2rem into the gap after its photo (about half the gap at 1440), so short overruns stay on one line, e.g. "AI Ethics for Healthcare · Saudi Arabia · 2026" under its tall photo (2026-10-18). */ @media (min-width: 1200px) { .pg-shot__cap { margin-right: -2rem; } } .pg-shot__cap > span:first-child { font-weight: 600; color: var(--sc-ink); } .pg-shot__cap--todo > span:first-child { font-weight: 500; color: var(--sc-ink-soft); } /* -------------------------------------------------- about preview (fix6) -- */ /* Her own artwork as a collage: a large study, two pinned cards, a note in the serif italic; the text beside it; three facts underneath. Cards turn with rotate, not transform, so the engine's reveal transform never fights them. */ .pg-aboutp { background: var(--pg-g-title); padding-bottom: calc(var(--sc-section) * 0.6); } /* 2026-10-18: less empty space after Industries */ .pg-aboutp__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--sc-8); align-items: center; } .pg-collage { position: relative; width: 100%; max-width: 36rem; aspect-ratio: 1 / 1.05; } .pg-collage::before { /* the pink block behind the study */ content: ""; position: absolute; left: 24%; top: 5%; width: 36%; height: 60%; background: var(--pg-frame); } .pg-collage__main { position: absolute; left: 0; top: 0; width: 62%; height: 74%; margin: 0; overflow: clip; box-shadow: var(--sc-e2); } .pg-collage__main img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 72%; scale: 1.28; } /* crops the table showing at the photo's top corners */ .pg-collage__card { position: absolute; margin: 0; padding: 0.45rem; background: #FFFFFF; box-shadow: var(--sc-e3); } .pg-collage__card img { display: block; width: 100%; height: 100%; object-fit: cover; } .pg-collage__card--portrait { left: 53%; top: 19%; width: 36%; aspect-ratio: 4 / 5; rotate: 3deg; } .pg-collage__card--forms { left: 39%; top: 60%; width: 33%; aspect-ratio: 4 / 5; rotate: -2deg; } .pg-collage__card--forms img { object-position: 50% 50%; } .pg-collage__note { position: absolute; left: 1%; bottom: 3%; margin: 0; max-width: 6.6em; rotate: -8deg; /* breaks as in fix6: Art taught me / to look closer. */ font-family: "PG Hand", var(--pg-serif); font-style: normal; font-weight: 400; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem); line-height: 1.5; color: #4A3343; } .pg-aboutp__title { margin-top: var(--sc-4) !important; max-width: 10ch; font-size: clamp(2.6rem, 1.4rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.04em; } .pg-aboutp__p { max-width: 38ch; font-size: var(--sc-t-base); line-height: 1.6; color: var(--sc-ink-soft); text-wrap: pretty; } .pg-aboutp__title + .pg-aboutp__p { margin-top: var(--sc-5) !important; } .pg-aboutp__cta { margin-top: var(--sc-6) !important; } .pg-aboutp__cta::before { content: ""; display: block; width: 3.5rem; height: 2px; margin-bottom: var(--sc-6); background: var(--pg-pink-deep); } .pg-stats { list-style: none; margin: var(--sc-8) 0 0; padding: var(--sc-6) 0 0; border-top: 1px solid var(--pg-line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-stats { column-gap: var(--sc-7); } /* no dividers since 2026-10-18; same gap as the certifications, so the columns line up */ .pg-stats li { display: grid; align-content: start; gap: 0.2rem; } .pg-stats strong { font-size: var(--sc-t-lg); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; } .pg-stats li > span { max-width: 24ch; color: var(--sc-ink-soft); } /* descriptions only, not the count-up spans inside */ /* -------------------------------------------------------------- about page -- */ .pg-sub main > section:first-child, .pg-sub main > article:first-child { padding-top: calc(var(--sc-section) + 3rem); } .pg-about-transition { margin-top: var(--sc-6) !important; max-width: 32ch; } .pg-path { background: var(--pg-g-work); } .pg-path__list { list-style: none; margin: var(--sc-7) 0 0; padding: 0; border-top: 1px solid var(--pg-line); } .pg-path__list li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sc-2) var(--sc-7); padding-block: var(--sc-5); border-bottom: 1px solid var(--pg-line); } .pg-path__step { font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: -0.015em; } .pg-path__list li:not(:last-child) .pg-path__step::after { content: " →"; color: var(--pg-pink-deep); font-weight: 500; } .pg-path__list p { margin: 0; max-width: 52ch; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink); } .pg-dims { background: var(--pg-g-accept); } .pg-dims__label { margin: 0; font-family: var(--pg-serif); font-style: italic; font-weight: 400; font-size: var(--sc-t-lg); color: var(--sc-ink-soft); } .pg-dims__line { margin: 0; max-width: 30ch; font-size: var(--sc-t-2xl); font-weight: 500; line-height: 1.12; letter-spacing: -0.025em; } .pg-dims__line strong { font-weight: 700; } .pg-dims .sc-stack > .pg-dims__line { margin-top: var(--sc-5); } .pg-exp { background: var(--pg-g-art); } .pg-exp__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sc-8); align-items: start; } .pg-creds__list { list-style: none; margin: var(--sc-4) 0 0; padding: 0; border-top: 1px solid var(--pg-line); } .pg-creds__list li { padding-block: var(--sc-3); border-bottom: 1px solid var(--pg-line); font-weight: 500; } /* ------------------------------------------------------- case study pages -- Same measure and rhythm as an article, so a case study reads as part of the site rather than as a second template. What differs is the opening: the answer is set large and arrives before any background, because a reader who leaves after ten seconds should still know what was built and what changed. ========================================================================== */ .pg-case-study { background: var(--pg-g-title); padding-bottom: var(--sc-8); } /* One width for everything, and it is the same measure the blog articles use, so a case study and an article sit on the same column. */ .pg-case-study__head, .pg-case-study__body, .pg-case-study__note, .pg-case-study .pg-article__nav { max-width: 42rem; margin-inline: auto; } .pg-case-study__head > *, .pg-case-study__body > * { max-width: none; } .pg-case-study__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3); margin: 0; font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink-soft); } .pg-case-study__meta a { color: inherit; text-decoration-color: var(--pg-pink-deep); text-decoration-thickness: 2px; } .pg-case-study__title { margin-top: var(--sc-5) !important; font-size: var(--sc-t-xl); line-height: 1.2; letter-spacing: -0.015em; } /* The answer line. The largest thing on the first screen after the title. */ .pg-case-study__answer { margin: var(--sc-5) 0 0 !important; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.5rem, 0.9rem + 1.9vw, 2.25rem); line-height: 1.2; letter-spacing: -0.025em; text-wrap: balance; } .pg-case-study__naming { margin: var(--sc-4) 0 0 !important; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); max-width: 34rem; } .pg-case-study__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-4) var(--sc-5); margin: var(--sc-6) 0 0 !important; padding-top: var(--sc-5); border-top: 1px solid var(--pg-line); } @media (max-width: 560px) { .pg-case-study__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pg-case-study__strip dt { font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-case-study__strip dd { margin: 0.35rem 0 0; font-size: var(--sc-t-sm); line-height: 1.45; } .pg-case-study__body { margin-top: var(--sc-7); font-size: var(--sc-t-base); line-height: 1.72; } .pg-case-study__body p { margin: 0 0 1.15em; } .pg-case-study__body h2 { margin: 2.4em 0 0.6em; font-size: var(--sc-t-lg); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; } /* A decision lead-in. Set to be read on its own by someone scanning the page. */ .pg-case-study__body h3.pg-case__lead { margin: 2em 0 0.5em; font-size: var(--pg-t-contact-lg); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; padding-left: var(--sc-4); border-left: 3px solid var(--pg-pink-deep); } .pg-case-study__body a { font-weight: 500; text-decoration-color: var(--pg-pink-deep); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .pg-case-study__note { margin: var(--sc-7) auto 0; padding-top: var(--sc-5); border-top: 1px solid var(--pg-line); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } /* ===================================== the Privacy in the AI Era framework == An interactive visual, not an article. Every panel is in the HTML and every control is a real button, so with JavaScript off the whole framework still reads top to bottom. page.js §12 only adds selection, the hash and focus. ========================================================================== */ .pg-fw { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-7); align-items: start; margin-top: var(--sc-7); } /* width is needed as well as max-width: auto margins alone make a grid item shrink to its content, which left the circle at its intrinsic 300px. */ .pg-fw:not(.is-selecting) .pg-fw__stage { width: 100%; max-width: 38rem; margin-inline: auto; } @media (min-width: 981px) { .pg-fw.is-selecting { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } } .pg-fw__stage { position: sticky; top: calc(var(--pg-folio-h, 4rem) + var(--sc-5)); } .pg-fw__svg { display: block; width: 100%; height: auto; overflow: visible; } .pg-fw__rim { fill: none; stroke: var(--pg-line); stroke-width: 1; } .pg-fw__hub { fill: #fff; stroke: var(--pg-line); stroke-width: 1; } .pg-fw__sector { stroke: #fff; stroke-width: 2; cursor: pointer; transition: opacity 0.25s ease, filter 0.25s ease; } .pg-fw__sector:hover { filter: brightness(0.95); } .pg-fw__labelgroup { pointer-events: none; } .pg-fw__label { font-family: var(--sc-font-display); font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-anchor: middle; } .pg-fw__hub-by { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-anchor: middle; fill: var(--sc-ink-soft); } /* Each sector is the control. The hit shape sits over the painted one so the whole wedge, label and icon included, is one target. */ .pg-fw__hit { cursor: pointer; } .pg-fw__hit:focus { outline: none; } .pg-fw__hit:focus-visible path { fill: color-mix(in oklab, var(--pg-focus) 12%, transparent); stroke: var(--pg-focus); stroke-width: 3; } /* The nudge: a few bounces toward the first domain, then it stops. It leaves for good as soon as anything is selected. */ .pg-fw__nudge-move { animation: pg-nudge 1.6s ease-in-out 3; } .pg-fw__nudge-text { font-size: 13px; font-weight: 600; fill: var(--pg-pink-deep); } .pg-fw.is-selecting .pg-fw__nudge, .pg-fw.has-picked .pg-fw__nudge { display: none; } @keyframes pg-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8px, 8px); } } @media (prefers-reduced-motion: reduce) { .pg-fw__nudge-move { animation: none; } } .pg-fw__hub-title { font-family: var(--sc-font-display); font-size: 29px; font-weight: 700; letter-spacing: -0.02em; text-anchor: middle; fill: var(--sc-ink); } /* A domain is selected: it keeps full strength, the rest step back but stay legible. The spec is explicit that unselected domains must not disappear. */ .pg-fw.is-selecting .pg-fw__sector { opacity: 0.45; } .pg-fw.is-selecting .pg-fw__sector.is-on { opacity: 1; } .pg-fw.is-selecting .pg-fw__labelgroup { opacity: 0.5; } .pg-fw.is-selecting .pg-fw__labelgroup.is-on { opacity: 1; } .pg-fw__hint { margin: var(--sc-4) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-align: center; } .pg-fw__panel { margin-top: var(--sc-5); padding: var(--sc-5); border: 1px solid var(--pg-line); border-top: 4px solid var(--fw); border-radius: 4px; background: #fff; } .pg-fw__panel:focus-visible { outline: 3px solid var(--pg-focus); outline-offset: 3px; } .pg-fw__panel-eyebrow { margin: var(--sc-4) 0 var(--sc-2); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-fw__panel-eyebrow:first-child { margin-top: 0; } .pg-fw__panel-title { margin: 0; font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.015em; } .pg-fw__panel-def { margin: var(--sc-3) 0 0; font-size: var(--pg-t-contact-base); line-height: 1.6; } .pg-fw__subs { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin: 0 0 var(--sc-5); padding: 0; list-style: none; } .pg-fw__subs li { padding: 0.3rem 0.7rem; border-radius: 999px; font-size: var(--sc-t-sm); background: color-mix(in oklab, var(--fw) 40%, #fff); color: var(--fw-ink); font-weight: 500; } .pg-fw__more { border-top: 1px solid var(--pg-line); } .pg-fw__more summary { padding: var(--sc-3) 0; cursor: pointer; font-weight: 600; font-size: var(--sc-t-sm); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sc-3); } .pg-fw__more summary::-webkit-details-marker { display: none; } .pg-fw__more summary::after { content: "+"; font-size: 1.1em; color: var(--fw-ink); } .pg-fw__more[open] summary::after { content: "–"; } .pg-fw__more ul { margin: 0 0 var(--sc-4); padding-left: 1.1em; font-size: var(--sc-t-sm); line-height: 1.6; } .pg-fw__more li { margin-bottom: 0.4em; } .pg-fw__more li::marker { color: var(--fw-ink); } /* Domain colours, written by tools/build_ideas.py from content/work/framework-domains.json. */ /* fw-domains:start */ .pg-fw__panel[data-domain="human-context"] { --fw: #BFD1F2; --fw-ink: #2F4D86; } .pg-fw__panel[data-domain="data"] { --fw: #BFE3C9; --fw-ink: #2F6B47; } .pg-fw__panel[data-domain="ai-processing"] { --fw: #F8DFA3; --fw-ink: #8A6208; } .pg-fw__panel[data-domain="privacy-risks"] { --fw: #F4B6AA; --fw-ink: #9B3F2C; } .pg-fw__panel[data-domain="privacy-engineering"] { --fw: #D6CAF0; --fw-ink: #5B45A0; } .pg-fw__panel[data-domain="privacy-governance"] { --fw: #BCE3DC; --fw-ink: #2C6F66; } /* fw-domains:end */ .pg-fw__more p { margin: 0 0 var(--sc-3); font-size: var(--sc-t-sm); line-height: 1.6; } .pg-fw__ask { max-width: 42rem; margin: var(--sc-8) auto 0; padding-top: var(--sc-6); border-top: 1px solid var(--pg-line); } .pg-fw__ask h2 { margin: 0 0 var(--sc-3); font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.015em; } .pg-fw__ask p { margin: 0 0 var(--sc-4); font-size: var(--pg-t-contact-base); line-height: 1.6; } .pg-fw__ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4); font-size: var(--sc-t-sm) !important; color: var(--sc-ink-soft); } @media (max-width: 980px) { /* Clarity over geometry: the circle goes full width and the domains become a list under it, which is what the spec asks for on a phone. */ .pg-fw { grid-template-columns: minmax(0, 1fr); gap: var(--sc-6); } .pg-fw__stage { position: static; max-width: 32rem; margin-inline: auto; } .pg-fw__label { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .pg-fw__sector, .pg-fw__btn { transition: none; } } /* The case study body: a jump nav, card grids, a figure and a pull quote. */ .pg-case-study__jump { display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); margin: var(--sc-6) 0 0 !important; padding-top: var(--sc-5); border-top: 1px solid var(--pg-line); font-size: var(--sc-t-sm); } .pg-case-study__jump a { color: var(--sc-ink-soft); text-decoration-color: var(--pg-line); text-underline-offset: 0.25em; } .pg-case-study__jump a:hover { color: var(--sc-ink); text-decoration-color: var(--pg-pink-deep); } .pg-case-study__body h2 { scroll-margin-top: 6rem; } /* The diagrams break out past the 42rem reading measure: three steps inside a text column wrap into towers. The prose keeps its measure. */ .pg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sc-5); margin: 2em 0; } /* Two across, so four cards read as two pairs rather than three and a straggler. */ .pg-cols--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 760px) { .pg-cols--two { grid-template-columns: minmax(0, 1fr); } } .pg-cols--three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-4); } @media (max-width: 760px) { .pg-cols--three { grid-template-columns: minmax(0, 1fr); } } /* Deliverable cards that turn over. The detail is on the back, so the section scans as four names rather than four paragraphs. Both faces are in the HTML: without JavaScript the card is simply a title with its text under it, and page.js §13 is what turns it into a control. */ .pg-flips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-4); margin: 2.4em 0; } @media (max-width: 760px) { .pg-flips { grid-template-columns: minmax(0, 1fr); } } .pg-flip__face { padding: var(--sc-5); border: 1px solid var(--pg-line); border-top: 3px solid var(--pg-pink-deep); border-radius: 4px; background: #fff; } .pg-flip__face h3 { margin: 0 0 var(--sc-2); font-size: var(--pg-t-contact-base); font-weight: 600; letter-spacing: -0.01em; } .pg-flip__face p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.6; } .pg-flips.is-live .pg-flip { position: relative; cursor: pointer; perspective: 1200px; min-height: 9rem; } .pg-flips.is-live .pg-flip__inner { display: grid; height: 100%; transition: transform 0.55s ease; transform-style: preserve-3d; } .pg-flips.is-live .pg-flip.is-flipped .pg-flip__inner { transform: rotateY(180deg); } .pg-flips.is-live .pg-flip__face { grid-area: 1 / 1; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .pg-flips.is-live .pg-flip__back { transform: rotateY(180deg); } .pg-flips.is-live .pg-flip__front { display: grid; align-content: space-between; } .pg-flip__hint { color: var(--sc-ink-soft); } .pg-flips.is-live .pg-flip__hint::after { content: " \2192"; color: var(--pg-pink-deep); } .pg-flips.is-live .pg-flip:hover .pg-flip__face { border-color: var(--pg-pink-deep); } .pg-flips.is-live .pg-flip:focus-visible { outline: 3px solid var(--pg-focus); outline-offset: 3px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { /* No rotation: the faces simply swap. */ .pg-flips.is-live .pg-flip__inner { transition: none; transform: none !important; } .pg-flips.is-live .pg-flip__back { transform: none; } .pg-flips.is-live .pg-flip:not(.is-flipped) .pg-flip__back, .pg-flips.is-live .pg-flip.is-flipped .pg-flip__front { visibility: hidden; } } /* The three steps, left to right. The arrows are decoration: the steps are numbered in the markup, so the order survives without them. */ .pg-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: var(--sc-3); margin: 2.4em 0; } .pg-flow__step { padding: var(--sc-5); border: 1px solid var(--pg-line); border-radius: 4px; background: #fff; } .pg-flow__step--core { border-color: var(--pg-pink-deep); background: color-mix(in oklab, var(--pg-line) 16%, #fff); } .pg-flow__num { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; margin: 0 0 var(--sc-3) !important; border-radius: 50%; background: var(--pg-pink-deep); color: #fff; font-size: var(--sc-t-sm); font-weight: 600; } .pg-flow__step h3 { margin: 0 0 var(--sc-2); font-size: var(--pg-t-contact-base); font-weight: 600; letter-spacing: -0.01em; } .pg-flow__step p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.6; } .pg-flow__arrow { align-self: center; color: var(--pg-pink-deep); font-size: 1.4rem; } @media (max-width: 760px) { .pg-flow { grid-template-columns: 1fr; } .pg-flow__arrow { justify-self: center; transform: rotate(90deg); } } .pg-col { padding: var(--sc-5); border: 1px solid var(--pg-line); border-top: 3px solid var(--pg-pink-deep); border-radius: 4px; background: #fff; } .pg-col h3 { margin: 0 0 var(--sc-2); font-size: var(--pg-t-contact-base); font-weight: 600; letter-spacing: -0.01em; } .pg-col p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.6; } .pg-case-study__body figure { margin: 2.4em 0; } .pg-case-study__body figure img { width: 100%; height: auto; border: 1px solid var(--pg-line); border-radius: 4px; background: #fff; } .pg-case-study__body figcaption { margin-top: var(--sc-3); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .pg-case-study__body blockquote { margin: 2.4em 0 0; padding-left: var(--sc-5); border-left: 3px solid var(--pg-pink-deep); } .pg-case-study__body blockquote p { margin: 0; font-family: var(--sc-font-display); font-weight: 600; font-size: clamp(1.2rem, 0.9rem + 0.9vw, 1.6rem); line-height: 1.3; letter-spacing: -0.02em; } /* ============================== the Compliance Accelerator simulation (§14) == A product window, not a marketing card: thin border, near-white surface, restrained shadow, compact bar. Every state lives inside the same shell. ========================================================================== */ /* An explicit display beats the hidden attribute, so say it once here: inside the simulation, hidden means hidden. */ .pg-sim [hidden] { display: none !important; } .pg-sim { margin: 2.6em 0; width: min(58rem, 92vw); margin-left: 50%; transform: translateX(-50%); } .pg-sim__label { margin: 0 0 var(--sc-3); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pg-pink-deep); } .pg-sim__shell { border: 1px solid var(--pg-line); border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px color-mix(in oklab, var(--sc-ink) 6%, transparent); } .pg-sim__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4); padding: var(--sc-4) var(--sc-5); border-bottom: 1px solid var(--pg-line); background: color-mix(in oklab, var(--pg-line) 10%, #fff); } .pg-sim__brand { margin: 0; font-weight: 600; font-size: var(--sc-t-sm); letter-spacing: -0.01em; line-height: 1.25; } .pg-sim__brand span { display: block; } .pg-sim__tabs { display: flex; flex-wrap: wrap; gap: var(--sc-2); } .pg-sim__tab { padding: 0.4rem 0.9rem; min-height: 2.2rem; border: 1px solid var(--pg-line); border-radius: 999px; background: #fff; color: var(--sc-ink-soft); font: inherit; font-size: var(--sc-t-sm); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .pg-sim__tab:hover { border-color: var(--pg-pink-deep); color: var(--sc-ink); } .pg-sim__tab[aria-pressed="true"] { border-color: var(--pg-pink-deep); background: color-mix(in oklab, var(--pg-pink-deep) 12%, #fff); color: var(--sc-ink); font-weight: 600; } .pg-sim__reset { flex: none; padding: 0.4rem 0.6rem; border: 0; background: none; color: var(--sc-ink-soft); font: inherit; font-size: var(--sc-t-sm); cursor: pointer; text-decoration: underline; text-decoration-color: var(--pg-line); text-underline-offset: 0.2em; } .pg-sim__reset:hover { color: var(--sc-ink); text-decoration-color: var(--pg-pink-deep); } /* Progress on the left of its own rail, Start over on the right. In the top bar the two together wrapped once the page narrowed to the article measure. */ .pg-sim__rail { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); padding: var(--sc-3) var(--sc-5); border-bottom: 1px solid var(--pg-line); } .pg-sim__rail:not(:has(> :not([hidden]))) { display: none; } .pg-sim__steps { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin: 0; padding: 0; list-style: none; font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-sim__step { display: flex; align-items: center; gap: 0.5em; } .pg-sim__step span { display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1px solid var(--pg-line); font-size: 0.68rem; letter-spacing: 0; } .pg-sim__step.is-on span { border-color: var(--pg-pink-deep); background: var(--pg-pink-deep); color: #fff; } .pg-sim__step.is-now { color: var(--sc-ink); font-weight: 600; } .pg-sim__body { padding: var(--sc-6) var(--sc-5); } .pg-sim__title { margin: 0; font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.015em; } .pg-sim__lead { margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .pg-sim__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--sc-4); margin-top: var(--sc-5); } .pg-sim__card { display: grid; gap: var(--sc-2); padding: var(--sc-4); text-align: left; cursor: pointer; border: 1px solid var(--pg-line); border-radius: 8px; background: #fff; color: inherit; font: inherit; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } .pg-sim__card:hover { border-color: var(--pg-pink-deep); background: color-mix(in oklab, var(--pg-line) 10%, #fff); transform: translateY(-1px); } .pg-sim__card-title { font-weight: 600; font-size: var(--pg-t-contact-base); } .pg-sim__card-text { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.5; } .pg-sim__card-go { color: var(--pg-pink-deep); } /* A pointer at the first control, like the framework's. It stops bouncing after a few passes and leaves as soon as anything is selected. */ .pg-sim__nudge { position: relative; align-self: center; padding-right: 1.5rem; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-pink-deep); white-space: nowrap; animation: pg-sim-nudge 1.5s ease-in-out 3; } .pg-sim__nudge::before { content: "\2192"; position: absolute; right: 0; top: 50%; translate: 0 -50%; font-size: 1rem; } .pg-sim.is-picked .pg-sim__nudge { display: none; } /* Above the deliverable row it points down at the first card. */ .pg-sim__nudge--row { display: block; margin: var(--sc-5) 0 calc(-1 * var(--sc-3)); padding: 0 0 1.1rem; } .pg-sim__nudge--row::before { content: "\2193"; left: 0; right: auto; top: auto; bottom: 0; translate: 0 0; } @keyframes pg-sim-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } } @media (prefers-reduced-motion: reduce) { .pg-sim__nudge { animation: none; } } /* Deliverables: one compact row. It scrolls sideways rather than wrapping into an awkward second line, and only drops to 2x2 on a very small screen. */ .pg-sim__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sc-3); margin-top: var(--sc-5); } .pg-sim__pick { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-3); padding: var(--sc-4); min-height: 3.4rem; text-align: left; cursor: pointer; border: 1px solid var(--pg-line); border-radius: 8px; background: #fff; color: inherit; font: inherit; transition: border-color 0.2s ease, background-color 0.2s ease; } .pg-sim__pick:hover { border-color: var(--pg-pink-deep); background: color-mix(in oklab, var(--pg-line) 10%, #fff); } .pg-sim__pick:focus-visible, .pg-sim__chip:focus-visible, .pg-sim__tab:focus-visible { outline: 2px solid var(--pg-pink-deep); outline-offset: 2px; background: color-mix(in oklab, var(--pg-pink-deep) 10%, #fff); } .pg-sim__pick-title { font-weight: 600; font-size: var(--sc-t-sm); line-height: 1.25; } .pg-sim__pick-go { color: var(--pg-pink-deep); } @media (max-width: 900px) { .pg-sim__row { grid-auto-columns: minmax(11rem, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sc-2); margin-inline: calc(-1 * var(--sc-4)); padding-inline: var(--sc-4); } .pg-sim__pick { scroll-snap-align: start; } } @media (max-width: 460px) { /* 2 x 2 reads better than a scroller at this size. */ .pg-sim__row { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; } } /* Workspace: one step on screen, with a breadcrumb saying where you are. */ .pg-sim__work { display: block; } .pg-sim__crumb { margin: 0 0 var(--sc-5); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-sim__step-block { max-width: 46rem; } .pg-sim__prompt { margin: 0 0 var(--sc-4); font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; } .pg-sim__chips { display: flex; flex-wrap: wrap; gap: var(--sc-2); } .pg-sim__chip { padding: 0.45rem 0.9rem; min-height: 2.4rem; border: 1px solid var(--pg-line); border-radius: 999px; background: #fff; color: inherit; font: inherit; font-size: var(--sc-t-sm); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .pg-sim__chip:hover { border-color: var(--pg-pink-deep); } .pg-sim__chip.is-on { border-color: var(--pg-pink-deep); background: color-mix(in oklab, var(--pg-pink-deep) 12%, #fff); font-weight: 600; } .pg-sim__continue { margin-top: var(--sc-4); } .pg-sim__continue[disabled] { opacity: 0.45; cursor: not-allowed; } .pg-sim__files { margin: var(--sc-3) 0 0; padding: 0; list-style: none; font-size: var(--sc-t-sm); } .pg-sim__files li { padding: 0.35rem 0; color: var(--sc-ink-soft); } .pg-sim__files li::before { content: "\2713"; margin-right: 0.5em; color: var(--pg-pink-deep); } .pg-sim__files-note { margin: var(--sc-2) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); } /* Processing: the ticks arrive one at a time. */ .pg-sim__ticks { margin: var(--sc-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sc-3); } .pg-sim__tick { display: flex; align-items: center; gap: 0.6em; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); opacity: 0.35; transition: opacity 0.3s ease, color 0.3s ease; } .pg-sim__tick::before { content: "\2713"; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1px solid var(--pg-line); font-size: 0.7rem; color: transparent; } .pg-sim__tick.is-on { opacity: 1; color: var(--sc-ink); } .pg-sim__tick.is-on::before { border-color: var(--pg-pink-deep); background: var(--pg-pink-deep); color: #fff; } /* Preview */ .pg-sim__demo-tag { display: inline-block; margin: 0 0 var(--sc-3); padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--pg-line); font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-sim__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sc-3); margin: var(--sc-5) 0 0; padding: 0; list-style: none; } .pg-sim__metrics:has(li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 680px) { .pg-sim__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pg-sim__metrics li { padding: var(--sc-4); border: 1px solid var(--pg-line); border-radius: 8px; } .pg-sim__metrics strong { display: block; font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: -0.02em; } .pg-sim__metrics span { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .pg-sim__bar-chart { display: flex; height: 0.7rem; margin: var(--sc-5) 0 var(--sc-3); border-radius: 999px; overflow: hidden; } .pg-sim__seg.is-ok { background: #5FA98D; } .pg-sim__seg.is-partial { background: #E8B45F; } .pg-sim__seg.is-gap { background: #D9705F; } .pg-sim__key { display: flex; flex-wrap: wrap; gap: var(--sc-4); margin: 0; padding: 0; list-style: none; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .pg-sim__key li { display: flex; align-items: center; gap: 0.45em; } .pg-sim__key li::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 3px; } .pg-sim__key li.is-ok::before { background: #5FA98D; } .pg-sim__key li.is-partial::before { background: #E8B45F; } .pg-sim__key li.is-gap::before { background: #D9705F; } .pg-sim__maturity { display: flex; flex-wrap: wrap; gap: var(--sc-3); margin: var(--sc-5) 0 0; padding: 0; list-style: none; font-size: var(--sc-t-sm); } .pg-sim__maturity li { padding: 0.4rem 0.9rem; border: 1px solid var(--pg-line); border-radius: 999px; } .pg-sim__maturity li:last-child { border-color: var(--pg-pink-deep); background: color-mix(in oklab, var(--pg-pink-deep) 10%, #fff); font-weight: 600; } .pg-sim__table-wrap { overflow-x: auto; margin: var(--sc-5) 0 0; } .pg-sim__table { width: 100%; border-collapse: collapse; font-size: var(--sc-t-sm); } .pg-sim__table th, .pg-sim__table td { padding: var(--sc-3); border-bottom: 1px solid var(--pg-line); text-align: left; } .pg-sim__table thead th { font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-sim__status.is-aligned { color: #2F6B47; font-weight: 600; } .pg-sim__status.is-partial { color: #8A6208; font-weight: 600; } .pg-sim__status.is-gap { color: #9B3F2C; font-weight: 600; } .pg-sim__sections-label { margin: var(--sc-8) 0 var(--sc-3); padding-top: var(--sc-5); border-top: 1px solid var(--pg-line); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-sim__sections { columns: 2; column-gap: var(--sc-6); margin: 0; padding-left: 1.1em; font-size: var(--sc-t-sm); line-height: 1.7; } .pg-sim__sections li { break-inside: avoid; } .pg-sim__sections li::marker { color: var(--pg-pink-deep); } @media (max-width: 600px) { .pg-sim__sections { columns: 1; } } .pg-sim__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4); margin-top: var(--sc-6); } .pg-sim__again { border: 0; background: none; color: var(--sc-ink-soft); font: inherit; font-size: var(--sc-t-sm); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; } .pg-sim__again:hover { color: var(--sc-ink); } .pg-sim__opened { width: 100%; margin: var(--sc-2) 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .pg-sim__note { margin: 0; padding: var(--sc-3) var(--sc-5) var(--sc-4); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); border-top: 1px solid var(--pg-line); } .pg-sim.is-live .pg-sim__plains { display: none; } .pg-sim__plain h3 { margin: var(--sc-5) 0 var(--sc-2); font-size: var(--pg-t-contact-base); } .pg-sim__plain ul { margin: 0; padding-left: 1.1em; font-size: var(--sc-t-sm); line-height: 1.6; } @media (max-width: 860px) { .pg-sim__work { grid-template-columns: minmax(0, 1fr); } /* 44px minimum tap target on a phone, per the spec. */ .pg-sim__chip, .pg-sim__tab, .pg-sim__reset, .pg-sim__again { min-height: 2.75rem; } .pg-sim__card { min-height: 2.75rem; padding: var(--sc-5); } .pg-sim__bar { gap: var(--sc-3); } .pg-sim__tabs { margin-left: 0; width: 100%; } .pg-sim__tab { flex: 1; min-width: 7rem; } .pg-sim__body { padding: var(--sc-5) var(--sc-4); } } @media (prefers-reduced-motion: reduce) { .pg-sim__card, .pg-sim__chip, .pg-sim__tab, .pg-sim__tick { transition: none; } .pg-sim__card:hover { transform: none; } } /* The product principles: claim on the left, the one line that explains it on the right. Three narrow columns made them unreadable. */ /* What the Compliance Accelerator produces, as a Venn (2026-10-18; was three columns repeating the same three deliverables). Circles and labels are placed in container units, so the whole diagram scales as one piece. Centres: Privacy (35, 34), Cybersecurity (65, 34), Resilience (50, 60), radius 32, in cqw. */ .pg-venn { position: relative; container-type: inline-size; width: 100%; max-width: 40rem; margin: 1.2em auto 2.4em; } .pg-venn__circles { position: relative; display: block; aspect-ratio: 100 / 94; } .pg-venn__c { position: absolute; width: 64cqw; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 1.5px solid var(--pg-q-line); mix-blend-mode: multiply; } .pg-venn__c--privacy { left: 35cqw; top: 34cqw; background: rgb(229 113 204 / 0.16); } .pg-venn__c--cyber { left: 65cqw; top: 34cqw; background: rgb(158 47 134 / 0.10); } .pg-venn__c--resilience { left: 50cqw; top: 60cqw; background: rgb(241 174 225 / 0.30); } .pg-venn__labels { list-style: none; margin: 0; padding: 0; } .pg-venn__t { position: absolute; transform: translate(-50%, -50%); display: grid; gap: 0.35em; text-align: center; font-size: clamp(0.66rem, 2.1cqw, 0.9rem); line-height: 1.3; color: var(--sc-ink-soft); } .pg-venn__t strong { font-size: 1.12em; font-weight: 600; color: var(--sc-ink); } .pg-venn__t--privacy { left: 21cqw; top: 22cqw; width: 22cqw; } .pg-venn__t--cyber { left: 79cqw; top: 22cqw; width: 22cqw; } .pg-venn__t--resilience { left: 50cqw; top: 79cqw; width: 34cqw; } .pg-venn__t--shared { left: 50cqw; top: 43cqw; width: 23cqw; gap: 0.55em; color: var(--sc-ink); font-weight: 500; } /* Narrow (phones): the text can't shrink with the circles, so the circles overlap more instead. Centres (36, 35), (64, 35), (50, 59), radius 35: the shared centre grows from about 28 x 32 to 41 x 43 cqw. */ @container (max-width: 30rem) { .pg-venn__c { width: 70cqw; } .pg-venn__c--privacy { left: 36cqw; top: 35cqw; } .pg-venn__c--cyber { left: 64cqw; top: 35cqw; } .pg-venn__c--resilience { left: 50cqw; top: 59cqw; } .pg-venn__t--privacy { left: 16cqw; top: 26cqw; width: 26cqw; } .pg-venn__t--cyber { left: 84cqw; top: 26cqw; width: 26cqw; } .pg-venn__t--resilience { left: 50cqw; top: 81cqw; width: 44cqw; } .pg-venn__t--shared { left: 50cqw; top: 44cqw; width: 34cqw; gap: 0.45em; } } .pg-principles { margin: 2.2em 0 0; display: grid; gap: var(--sc-6); } /* check marks, no side bar (Kat, fix04, 2026-10-18) */ .pg-principles > div { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--sc-4); row-gap: var(--sc-2); align-items: start; } .pg-principles > div::before { content: ""; grid-row: 1 / span 2; width: 2rem; height: 2rem; border-radius: 50%; background: #FCDEF0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239E2F86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-8.2'/%3E%3C/svg%3E") center / 1.25rem no-repeat; border: 1px solid var(--pg-line); } .pg-principles dt, .pg-principles dd { grid-column: 2; } .pg-principles dt { padding-top: 0.2rem; line-height: 1.3; } .pg-principles dt { font-size: var(--pg-t-contact-base); font-weight: 600; letter-spacing: -0.01em; } .pg-principles dd { margin: 0; font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft); } /* Outcome: what shipped, four facts, no invented numbers. */ .pg-outcome { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--sc-4); margin: 2em 0; padding: 0; list-style: none; } .pg-outcome li { padding: var(--sc-4); border: 1px solid var(--pg-line); border-radius: 8px; background: #fff; } .pg-outcome strong { display: block; font-size: var(--pg-t-contact-base); font-weight: 600; letter-spacing: -0.015em; } .pg-outcome span { display: block; margin-top: var(--sc-2); font-size: var(--sc-t-sm); line-height: 1.5; color: var(--sc-ink-soft); } /* A compact row of chips, instead of a long vertical list. */ .pg-chips-row { display: flex; flex-wrap: wrap; gap: var(--sc-2); margin: 1.4em 0 0 !important; max-width: none !important; } .pg-chips-row span { padding: 0.35rem 0.8rem; border-radius: 999px; font-size: var(--sc-t-sm); background: color-mix(in oklab, var(--pg-line) 24%, #fff); } /* The problem: numbered rows. Three columns squeezed the sentences; a row each gives them space and keeps the numbers Kat asked to keep. */ .pg-points { display: grid; gap: 0; margin: 2em 0; padding: 0; list-style: none; border-top: 1px solid var(--pg-line); } .pg-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sc-5); align-items: baseline; padding: var(--sc-5) 0; border-bottom: 1px solid var(--pg-line); } .pg-points__n { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.02em; color: color-mix(in oklab, var(--pg-pink-deep) 70%, transparent); } .pg-points h3 { margin: 0 0 var(--sc-2); font-size: var(--pg-t-contact-base); font-weight: 600; } .pg-points p { margin: 0; font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft); } /* Capability rows: accordion, one open by default. */ .pg-rows { margin: 2.2em 0; border-top: 1px solid var(--pg-line); } .pg-rows__row { border-bottom: 1px solid var(--pg-line); } .pg-rows__row summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sc-4); padding: var(--sc-4) 0; cursor: pointer; list-style: none; font-size: var(--pg-t-contact-base); font-weight: 600; } .pg-rows__row summary::-webkit-details-marker { display: none; } .pg-rows__row summary::after { content: "+"; color: var(--pg-pink-deep); font-size: 1.2em; } .pg-rows__row[open] summary::after { content: "\2013"; } .pg-rows__row p { margin: 0 0 var(--sc-4); font-size: var(--sc-t-sm); line-height: 1.65; color: var(--sc-ink-soft); max-width: 46rem; } /* ---------------------------------------------------------- article pages -- */ .pg-article { background: var(--pg-g-title); padding-bottom: var(--sc-8); } .pg-article__head, .pg-article__body, .pg-article__nav { max-width: 42rem; margin-inline: auto; } .pg-article__meta { margin: 0; font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink-soft); } .pg-article__meta a { color: inherit; text-decoration-color: var(--pg-pink-deep); text-decoration-thickness: 2px; } .pg-article__quote { margin: var(--sc-5) 0 0 !important; font-family: var(--sc-font-display); font-style: normal; font-weight: 600; letter-spacing: -0.03em; /* same face as the rest of the site */ font-size: clamp(1.8rem, 1rem + 2.6vw, 3rem); line-height: 1.12; text-wrap: balance; } .pg-article__title { margin-top: var(--sc-6) !important; font-size: var(--sc-t-xl); line-height: 1.2; letter-spacing: -0.015em; } .pg-article__byline { margin: var(--sc-2) 0 0 !important; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } .pg-article__cover { max-width: 58rem; margin: var(--sc-7) auto 0; } .pg-article__cover img { width: 100%; height: auto; max-height: 68vh; object-fit: cover; border-radius: 4px; box-shadow: var(--sc-e2); } .pg-article__body { margin-top: var(--sc-7); font-size: var(--sc-t-base); line-height: 1.72; } .pg-article__body p { margin: 0 0 1.15em; } .pg-article__body h2 { margin: 2.2em 0 0.55em; font-size: var(--sc-t-lg); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; } .pg-article__body ul { margin: 0 0 1.2em; padding-left: 1.2em; } .pg-article__body li { margin-bottom: 0.65em; } .pg-article__body li::marker { color: var(--pg-pink-deep); } .pg-article__body a { font-weight: 500; text-decoration-color: var(--pg-pink-deep); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .pg-article__body figure { margin: 2em 0; } /* No frame around article pictures (Kat, 2026-09-24): the image is the image. */ .pg-article__body figure img { width: 100%; height: auto; border-radius: 4px; } /* ============================================ live examples in an article == The invented UI examples are real HTML, not screenshots: keyboard reachable, readable by a screen reader, and honest about doing nothing (page.js §11). Nothing here submits: no form element, no name attributes, no storage. ========================================================================== */ .pg-demo { margin: 2.4em 0; } .pg-demo__screen { background: var(--pg-g-work); color: var(--sc-ink); } .pg-demo__screen--flat { padding: var(--sc-6); border-radius: 10px; } .pg-demo__h { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; max-width: 24ch; } .pg-demo__h--center, .pg-demo__sub--center { text-align: center; max-width: none; } .pg-demo__sub { margin: 0.45rem 0 0; display: flex; align-items: center; justify-content: flex-start; gap: 0.4rem; font-size: 0.85rem; color: var(--sc-ink-soft); } .pg-demo__sub--center { justify-content: center; } .pg-demo__sub svg { width: 0.9rem; height: 0.9rem; flex: none; } .pg-demo__row { display: flex; gap: 0.6rem; margin-top: 1.1rem; flex-wrap: wrap; } .pg-demo__row .pg-demo__input { flex: 1 1 14rem; } .pg-demo__label { display: block; margin-top: 0.85rem; font-size: 0.8rem; font-weight: 500; color: var(--sc-ink-soft); } .pg-demo__input { display: block; width: 100%; margin-top: 0.3rem; min-height: 2.9rem; padding: 0 0.9rem; font: inherit; font-size: 0.95rem; color: var(--sc-ink); background: var(--pg-g-work); border: 1px solid var(--pg-q-line); border-radius: 8px; } .pg-demo__input::placeholder { color: var(--sc-ink-soft); opacity: 1; } .pg-demo__input:focus-visible { outline: 2px solid var(--pg-focus); outline-offset: 2px; } .pg-demo__btn { min-height: 2.9rem; padding: 0 1.4rem; font: inherit; font-size: 0.95rem; font-weight: 600; border: 0; border-radius: 8px; cursor: pointer; transition: opacity var(--sc-d-fast) var(--sc-ease-out); } .pg-demo__btn--pink { background: var(--pg-pink-deep); color: var(--sc-ink); border-radius: 999px; } .pg-demo__btn--ink { background: var(--sc-ink); color: var(--pg-g-title); width: 100%; margin-top: 1.1rem; } .pg-demo__btn[disabled] { opacity: 0.4; cursor: not-allowed; } .pg-demo__btn:not([disabled]):active { translate: 0 1px; } .pg-demo__consent { display: flex; align-items: flex-start; gap: 0.55rem; margin-top: 1rem; font-size: 0.85rem; line-height: 1.45; color: var(--sc-ink-soft); cursor: pointer; } .pg-demo__consent input { position: absolute; width: 1px; height: 1px; opacity: 0; } .pg-demo__tick { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; display: grid; place-items: center; background: var(--pg-g-work); border: 1.5px solid var(--sc-ink); border-radius: 5px; } .pg-demo__tick-mark { width: 0.8rem; height: 0.8rem; stroke-width: 3.2; color: var(--sc-ink); opacity: 0; } .pg-demo__consent input:checked + .pg-demo__tick { background: var(--pg-pink-deep); border-color: var(--pg-pink-deep); } .pg-demo__consent input:checked + .pg-demo__tick .pg-demo__tick-mark { opacity: 1; } .pg-demo__consent input:focus-visible + .pg-demo__tick { outline: 2px solid var(--pg-focus); outline-offset: 2px; } .pg-demo__pn { color: var(--pg-pink-text); text-decoration: underline; text-underline-offset: 0.16em; font-weight: 500; } .pg-demo__status { margin: 0.9rem 0 0; min-height: 1.2em; font-size: 0.85rem; font-weight: 500; color: var(--pg-pink-text); } .pg-demo__note { margin: 0.6rem 0 0; font-size: var(--sc-t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-demo__set { margin: 1.2rem 0 0; padding: 0; border: 0; } .pg-demo__legend { padding: 0; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-demo__chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; } .pg-demo__chip input { position: absolute; width: 1px; height: 1px; opacity: 0; } .pg-demo__chip span { display: block; padding: 0.5rem 0.95rem; border-radius: 999px; background: var(--sc-surface); font-size: 0.85rem; cursor: pointer; } .pg-demo__chip input:checked + span { background: var(--pg-pink-deep); font-weight: 600; } .pg-demo__chip input:focus-visible + span { outline: 2px solid var(--pg-focus); outline-offset: 2px; } .pg-demo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 0.4rem; } .pg-demo__foot { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.2rem; } .pg-demo__foot .pg-demo__consent { margin-top: 0; flex: 1 1 18rem; } .pg-demo__foot .pg-demo__btn--ink { width: auto; margin-top: 0; } /* The phone is shown whole: height follows its own aspect ratio, never cropped. */ .pg-demo--phone { display: grid; justify-items: center; } .pg-demo--phone .pg-demo__phone { width: min(19rem, 100%); background: var(--sc-ink); border-radius: 2.4rem; padding: 0.55rem; box-shadow: 0 18px 40px rgba(42, 21, 38, 0.18); } .pg-demo--phone .pg-demo__screen { border-radius: 2rem; padding: 1rem 1.1rem 1.3rem; } .pg-demo__status-bar { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; font-weight: 600; } .pg-demo__sys svg { width: 1.05rem; height: 1.05rem; } .pg-demo__step { display: flex; justify-content: space-between; margin-top: 0.7rem; font-size: 0.75rem; color: var(--sc-ink-soft); } .pg-demo__avatar { width: 2.9rem; height: 2.9rem; margin: 0.8rem auto 0.6rem; border-radius: 50%; background: var(--sc-surface); display: grid; place-items: center; } .pg-demo__avatar svg { width: 1.4rem; height: 1.4rem; } .pg-demo--phone .pg-demo__note { text-align: center; } @media (max-width: 560px) { .pg-demo__grid { grid-template-columns: 1fr; } .pg-demo__foot .pg-demo__btn--ink { width: 100%; } .pg-demo__screen--flat { padding: var(--sc-5); } } .pg-article__body blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 2px solid var(--pg-pink-deep); font-weight: 500; } .pg-article__nav { display: flex; flex-wrap: wrap; gap: var(--sc-4) var(--sc-7); margin-top: var(--sc-8); padding-top: var(--sc-5); border-top: 1px solid var(--pg-line); } .pg-article__nav a { font-weight: 600; text-decoration-color: var(--pg-pink-deep); text-decoration-thickness: 2px; text-underline-offset: 0.26em; } .pg-article__nav a span { display: block; font-size: var(--sc-t-xs); font-weight: 500; color: var(--sc-ink-soft); text-decoration: none; } .pg-article__all { margin-left: auto; align-self: end; } /* ------------------------------------------------------ v2 reduced motion -- */ @media (prefers-reduced-motion: reduce) { /* Nothing moves, so every item has to be on screen: one static list that wraps to as many lines as the width needs. */ .pg-strip { padding-inline: var(--sc-gutter); } .pg-strip__viewport { overflow: visible; -webkit-mask-image: none; mask-image: none; } .pg-strip__tracks { display: block; width: auto; animation: none; } .pg-strip__track { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: var(--sc-2); } .pg-strip__track li { white-space: normal; text-align: center; } .pg-strip__track li:last-child::after { display: none; } .pg-strip__track[aria-hidden="true"] { display: none; } } /* --------------------------------------------------------- v2 small screens -- */ @media (max-width: 1100px) { .pg-exp__grid, .pg-aboutp__grid { grid-template-columns: 1fr; gap: var(--sc-7); } .pg-collage { justify-self: center; } .pg-pov__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sc-8); } .pg-pov__aside { justify-content: center; gap: var(--sc-9); } /* room for the tilted phone's corner */ } @media (max-width: 860px) { .pg-strip__track li { font-size: var(--sc-t-xs); } .pg-strip__track li::after { margin-inline: 1.1rem; } .pg-cases__grid { grid-template-columns: 1fr; } .pg-pov__aside { flex-direction: column; align-items: center; gap: var(--sc-6); } .pg-pov__tagwrap { align-self: flex-start; margin-top: 0; } .pg-pov__tag { max-width: none; } .pg-phone { --pg-phone-w: min(72vw, 17rem); rotate: 4deg; } .pg-pov__pillars { grid-template-columns: 1fr; margin-top: var(--sc-7); } .pg-pov__pillars li, .pg-pov__pillars li:first-child, .pg-pov__pillars li:last-child { padding: var(--sc-5) 0; border-left: 0; border-top: 1px solid var(--pg-q-line); } .pg-idx__grid { grid-template-columns: 1fr; gap: var(--sc-8); } .pg-note { width: min(78%, 20rem); margin-top: var(--sc-4); } .pg-topics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-3) var(--sc-5); } .pg-topics li, .pg-topics li:first-child, .pg-topics li:last-child { padding: 0; border-left: 0; text-align: left; } .pg-collage__note { font-size: 1.05rem; } .pg-stats { grid-template-columns: 1fr; padding-top: 0; } .pg-stats li, .pg-stats li:first-child { padding: var(--sc-3) 0; } .pg-chips { gap: 0.25rem 0.1rem; } .pg-chip { padding-inline: 0.8rem; font-size: var(--sc-t-sm); } .pg-shot { width: 78vw; } .pg-shot--tall { width: 60vw; } .pg-path__list li { grid-template-columns: 1fr; } .pg-path__step { font-size: var(--sc-t-lg); } .pg-path__list p { font-size: var(--sc-t-base); } .pg-dims__line { font-size: var(--sc-t-xl); } .pg-article__all { margin-left: 0; } } /* keep a domain name on one line */ .pg-nowrap { white-space: nowrap; } /* ====================================================== get in touch (fix8) Two clean columns (fix9: no panel): intro and actions, then four ways in. Below them the privacy note, whose three counters page.js fills from what this browser actually recorded. ========================================================================== */ .pg-contact { position: relative; overflow: clip; background: var(--pg-g-close); padding-block: clamp(2.5rem, 4.5vw, 4.5rem) var(--sc-5); /* fix21b: was --sc-section (130px at 1440) */ /* fix18: the section ran one step above the rest of the page (24px against an 18px body). Two local steps, so nothing here is larger than it needs to be. */ --pg-t-contact-lg: clamp(1.05rem, 0.99rem + 0.3vw, 1.25rem); --pg-t-contact-base: clamp(0.95rem, 0.92rem + 0.16vw, 1.05rem); } .pg-contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; } /* fix21: the ways column is gone, so one column */ .pg-contact__title { margin-top: var(--sc-4) !important; max-width: none; font-size: clamp(2.2rem, 1.1rem + 3vw, 4rem); line-height: 1.02; letter-spacing: -0.04em; } .pg-dot::before { content: "."; color: var(--pg-pink-deep); } .pg-contact__lede { margin-top: var(--sc-5) !important; max-width: 48ch; font-size: var(--pg-t-contact-lg); line-height: 1.5; color: var(--sc-ink-soft); text-wrap: pretty; } .pg-contact__actions { margin-top: var(--sc-6) !important; display: grid; gap: var(--sc-3); max-width: 27rem; } /* The email is plain text: not a button, not a link (Kat, 2026-10-18). Easy to read and select to copy. */ .pg-contact__email { margin: 0; justify-self: start; color: var(--sc-ink); font-size: var(--pg-t-contact-lg); font-weight: 500; overflow-wrap: anywhere; user-select: text; } .pg-contact__social svg { flex: none; width: 1.5rem; height: 1.5rem; } .pg-contact__socials { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-3); } .pg-contact__social { display: flex; align-items: center; gap: var(--sc-3); min-height: 3.25rem; padding: 0.6rem 1.1rem; border: 1px solid var(--pg-q-line); border-radius: 6px; color: var(--sc-ink); font-size: var(--pg-t-contact-base); font-weight: 500; text-decoration: none; transition: border-color var(--sc-d-fast) var(--sc-ease-out); } @media (hover: hover) and (pointer: fine) { .pg-contact__social:hover { border-color: var(--sc-ink); } } .pg-contact__social:active { translate: 0 1px; } .pg-contact__sign { margin-top: var(--sc-7) !important; display: grid; justify-items: start; gap: 0.15rem; } .pg-contact__signature { margin-bottom: var(--sc-2); rotate: -5deg; font-family: "PG Hand", var(--pg-serif); font-style: normal; font-weight: 400; font-size: 3rem; line-height: 1; color: var(--sc-ink); } .pg-contact__name, .pg-contact__role { font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-pnote { display: grid; grid-template-columns: auto minmax(600px, 1fr) auto; align-items: center; gap: var(--sc-5) var(--sc-5); margin-top: var(--sc-6); padding-block: var(--sc-5); border-top: 1px solid var(--pg-line); border-bottom: 1px solid var(--pg-line); } .pg-pnote__icon { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--pg-g-title); color: var(--sc-ink); } .pg-pnote__icon svg { width: 1.6rem; height: 1.6rem; } .pg-pnote__label { margin: 0; font-size: var(--sc-t-xs); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-soft); } .pg-pnote__head { margin: 0.25rem 0 0; font-size: var(--pg-t-contact-lg); font-weight: 500; line-height: 1.4; } .pg-pnote__sub { margin: 0.2rem 0 0; font-size: var(--pg-t-contact-base); color: var(--sc-ink-soft); } .pg-pnote__counts { display: grid; grid-template-columns: repeat(3, auto); margin: 0; } /* The counts and the note's sentence compete for the same row. The sentence ("What you choose to send me...") needs ~584px and must not wrap, so the counts get 20px of side padding rather than the 32px they started with, and they drop to their own row below 1320. That leaves 33 to 76px of headroom on the sentence; the 620px minimum on the text column is the backstop, so if a browser sets the line wider than Chrome does, the counts give way, not it. */ .pg-pnote__counts > div { padding-inline: 1.25rem; } /* no dividers between the counters (2026-10-18) */ .pg-pnote__counts dt { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); } .pg-pnote__counts dd { margin: 0.25rem 0 0; font-size: var(--pg-t-contact-lg); font-weight: 600; font-variant-numeric: tabular-nums; } .pg-contact__base { display: flex; flex-wrap: wrap; justify-content: flex-start; text-align: left; gap: var(--sc-2) var(--sc-5); margin: 0; padding-top: var(--sc-4); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); } @media (max-width: 1320px) { .pg-pnote { grid-template-columns: auto minmax(0, 1fr); } .pg-pnote__counts { grid-column: 1 / -1; } .pg-pnote__counts > div:first-child { padding-left: 0; } } @media (max-width: 860px) { .pg-contact__email { font-size: var(--pg-t-contact-base); } .pg-pnote { grid-template-columns: minmax(0, 1fr); } .pg-pnote__icon { width: 3.25rem; height: 3.25rem; } .pg-pnote__counts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pg-pnote__counts > div { padding-inline: var(--sc-3); } } /* Statistics count-up (page.js §10). Only motion: the numbers, and a soft fade on the Europe block. Nothing else about the section changes. */ .pg-stats [data-count] { display: inline-block; } .pg-stats .is-waiting { opacity: 0; transform: translate3d(0, 8px, 0); } .pg-stats .is-waiting.is-in { opacity: 1; transform: none; transition: opacity 700ms var(--sc-ease-out), transform 700ms var(--sc-ease-out); } /* fix17 break: "Let’s build a more human / digital future." on wider screens; phones wrap naturally. Above 700px the heading is sized to its own column, so the first line always fits. */ .pg-contact__intro { container-type: inline-size; } /* fix21b: the ways column left a tall stack in a half-empty row. The email and social buttons move up beside the lede, so the section is wider and shorter. */ @media (min-width: 861px) { .pg-contact__intro { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--sc-8); align-items: start; } .pg-contact__intro > .pg-label { grid-column: 1; grid-row: 1; } .pg-contact__lede { grid-column: 1; grid-row: 2; margin-top: var(--sc-4) !important; max-width: 40ch; } .pg-contact__actions { grid-column: 2; grid-row: 1 / span 3; margin-top: 0 !important; width: 100%; } .pg-contact__sign { grid-column: 1; grid-row: 3; margin-top: var(--sc-6) !important; } } @media (min-width: 701px) { .pg-contact__title { font-size: min(4rem, 7.5cqw); } } @media (max-width: 700px) { .pg-br-wide { display: none; } } /* Experience proof (2026-09-15, redesign). - 8+ years: the PwC and KPMG logos stack beside the number and its line. - Certifications: an open three-column list, no boxes. Badge on the left, name, title and issuer on the right, hairline rules between rows. - Industries: a slow moving line of icon + name, opposite in direction and calmer in tone than the credentials strip. Pauses on hover and focus; static and wrapped under reduced motion. */ .pg-proof { margin-top: var(--sc-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sc-8); } .pg-proof__block { min-width: 0; } /* the moving track must not widen the grid (it caused sideways scroll) */ .pg-proof__label { margin: 0 0 var(--sc-4) !important; } .pg-certlist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sc-7); border-top: 1px solid var(--pg-line); } .pg-certlist li { display: flex; align-items: center; gap: var(--sc-4); padding-block: var(--sc-5); } /* no line between certifications (2026-10-18); the rule under the label stays */ .pg-certlist__badge { flex: none; display: grid; place-items: center; width: 4rem; height: 4rem; } .pg-certlist__badge img { width: 100%; height: 100%; object-fit: contain; } .pg-certlist__badge--seal img { width: 90%; height: 90%; } .pg-certlist__badge--ribbon img { width: 112%; height: 112%; max-width: none; } .pg-certlist__text { display: grid; gap: 0.1rem; min-width: 0; } .pg-certlist__name { font-size: var(--sc-t-base); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; } .pg-certlist__full { font-size: var(--sc-t-xs); line-height: 1.4; color: var(--sc-ink-soft); } .pg-certlist__by { margin-top: 0.15rem; font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pg-pink-text); } /* Industries: a still icon grid, no boxes and no motion. Icon above a short label, so it scans at a glance and reads differently from the text-led certification list above. */ /* Industries as a text grid across the full width (2026-10-18): five columns, two rows on desktop; two columns on phones. Replaced the one-line sentence, which sat in the left half and left the right empty. */ .pg-industries-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sc-4) var(--sc-6); border-top: 1px solid var(--pg-line); padding-top: var(--sc-5); } .pg-industries-grid li { display: flex; align-items: flex-start; gap: var(--sc-2); font-size: var(--sc-t-sm); line-height: 1.4; color: var(--sc-ink-soft); } .pg-industries-grid__icon { flex: none; display: grid; place-items: center; width: 1.15rem; height: 1.4em; color: var(--pg-pink-text); } /* small line icons, no circle (2026-10-18) */ .pg-industries-grid__icon svg { width: 1.15rem; height: 1.15rem; } @media (max-width: 700px) { .pg-industries-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-3) var(--sc-5); } } .pg-industries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sc-6) var(--sc-5); } .pg-industries li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sc-3); } .pg-industries__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--sc-surface); color: var(--pg-pink-text); } .pg-industries__icon svg { width: 1.25rem; height: 1.25rem; } .pg-industries__name { font-size: var(--sc-t-sm); font-weight: 500; line-height: 1.35; color: var(--sc-ink); max-width: 16ch; } @media (max-width: 1100px) { .pg-certlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-industries { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 700px) { .pg-certlist { grid-template-columns: minmax(0, 1fr); } .pg-certlist__badge { width: 3.4rem; height: 3.4rem; } .pg-industries { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5) var(--sc-4); } .pg-proof { gap: var(--sc-7); } }