/* ========================================================================== PODELIVER — house design-system build (podrones-ui skill), comparison variants index1/index2/index3.php ONLY. Not linked from podeliver/index.php or from for-customers/for-partners — those keep podeliver.css untouched. Depends on the token block inlined per-page from podeliver/inc/house-tokens.php (references/stacks.md: "inline critical CSS, including the whole token block, in "). Every color/duration/size below is a var(--…) read — if you see a literal, it is a bug (house-system.md §1). Namespaced `po2-` throughout so nothing collides with the existing `po-*` classes in podeliver.css (which three OTHER pages still depend on). ========================================================================== */ /* -------------------------------------------------------------------------- SELF-HOSTED FONT — Anek (Latin), variable, wght 100-800 / wdth 75-125. Floor is the system stack (house-tokens.php --font-text); this upgrades it only once .fonts-ok is set by the inline gate script (typography.md §1). -------------------------------------------------------------------------- */ @font-face { font-family: "Anek"; font-style: normal; font-weight: 100 800; font-stretch: 75% 125%; font-display: swap; src: url("fonts/Anek-Latin-Variable.woff2") format("woff2"); } /* Metric-matched fallback (typography.md §1) — approximate pending a real metrics pass; Arial/Roboto are the closest-width stand-ins available. */ @font-face { font-family: "Anek Fallback"; src: local("Arial"), local("Roboto"), local("Helvetica Neue"); size-adjust: 100%; ascent-override: 105%; descent-override: 30%; } html.fonts-ok { --font-text: "Anek", "Anek Fallback", var(--sys); --font-display: "Anek", "Anek Fallback", var(--sys); } /* -------------------------------------------------------------------------- PAGE SURFACE — the one deliberate global exception (same rationale as podeliver.css's own note): these three files are the only pages that link this stylesheet, so tinting and the shared #header is safe. -------------------------------------------------------------------------- */ body { background: var(--field); } #header, #header .header-inner { background-color: var(--field) !important; } .po2-page { font-family: var(--font-text); line-height: var(--leading); color: var(--ink); background: var(--field); overflow-x: hidden; } .po2-page * { box-sizing: border-box; } /* -------------------------------------------------------------------------- LAYOUT PRIMITIVES -------------------------------------------------------------------------- */ .po2-wrap { max-width: 1100px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, var(--gap-3)); } .po2-wrap--narrow { max-width: 760px; } .po2-section { padding-block: var(--gap-4); } .po2-section--tight{ padding-block: var(--gap-3); } .po2-section--hero { padding-block: var(--gap-4) var(--gap-2); } .po2-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* -------------------------------------------------------------------------- TYPOGRAPHY — contrast from weight/width/size, never a second typeface or uppercase (typography.md §3, §5). -------------------------------------------------------------------------- */ .po2-display { font-family: var(--font-display); font-variation-settings: "wght" 800, "wdth" var(--width-display); font-weight: 800; font-size: var(--step-3); line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; margin: 0; color: var(--ink); } .po2-h2 { font-variation-settings: "wght" 700, "wdth" var(--width-text); font-weight: 700; font-size: var(--step-2); line-height: 1.08; text-wrap: balance; margin: 0 0 var(--gap-2); color: var(--ink); } .po2-doors-h { text-align: center; color: #07A354; margin-bottom: var(--gap-3); position: relative; padding-bottom: var(--gap-2); } .po2-doors-h::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 48px; block-size: 3px; border-radius: 2px; background: #07A354; } .po2-hero-highlight { /* Podrones brand green (podrones-tokens.css --color-green), not a house-system accent token — this page's own tokens are red/orange only. */ color: #07A354; } .po2-h3 { font-variation-settings: "wght" 600, "wdth" var(--width-text); font-weight: 600; font-size: var(--step-1); line-height: 1.2; margin: 0 0 var(--gap-1); color: var(--ink); } .po2-lead { font-size: var(--step-1); line-height: var(--leading); color: var(--ink-soft); max-width: 46ch; margin: 0; } .po2-body { font-size: var(--step-0); line-height: var(--leading); color: var(--ink-soft); margin: 0; } .po2-label { display: inline-block; font-variation-settings: "wght" 600, "wdth" 88; font-weight: 600; font-size: var(--step--1); color: var(--ink-soft); margin: 0; } .po2-label--ruled { border-block-start: var(--rule-weight) solid var(--rule-strong); padding-block-start: var(--gap-1); } /* -------------------------------------------------------------------------- RULES — real-weight dividers, never decorative gradients. -------------------------------------------------------------------------- */ .po2-rule { border: 0; border-block-start: 1px solid var(--rule); margin: 0; } /* -------------------------------------------------------------------------- LINKS & FOCUS -------------------------------------------------------------------------- */ .po2-page a { color: var(--accent-text); text-decoration: none; } .po2-page a:hover { text-decoration: underline; } .po2-page :focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; } .po2-cta { display: inline-block; font-weight: 600; font-size: var(--step-0); color: var(--accent-text); min-height: var(--target); display: inline-flex; align-items: center; } .po2-cta--extra { display: flex; align-items: center; min-height: var(--target); font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); margin-block-start: var(--gap-1); } /* -------------------------------------------------------------------------- THE ACCENT BLOCK — one per view (house-system.md §5). A narrow accent rule beside the hero text, standing in for a Mondrian rectangle. Never repeated elsewhere on the same page. -------------------------------------------------------------------------- */ .po2-hero-inner { display: flex; gap: var(--gap-3); align-items: stretch; } .po2-accent-block { flex-shrink: 0; inline-size: 8px; background: var(--accent); } .po2-hero-text { flex: 1 1 auto; min-width: 0; } /* -------------------------------------------------------------------------- THE CONVERGENCE GRAPHIC — redrawn in ink only (no per-arm hue). One accent block already spent in the hero, so this stays quiet per the "never more than one" rule. -------------------------------------------------------------------------- */ .po2-converge { display: flex; justify-content: center; padding-block: var(--gap-2) var(--gap-1); } .po2-converge svg { inline-size: 360px; max-inline-size: 100%; block-size: auto; } .po2-converge-arm { fill: none; stroke: var(--rule-strong); stroke-width: 2; stroke-linecap: round; } .po2-converge-dot { fill: var(--rule-strong); stroke: none; } .po2-converge-center { fill: var(--ink); } /* -------------------------------------------------------------------------- DOORS — equal size, equal weight, equal dignity (preserved from the original brief); differentiated by icon, copy and position, never by hue (house-system.md forbids mixing accent colors — the per-door blue/green/ gold scheme this replaces was the thing that broke the rule). -------------------------------------------------------------------------- */ .po2-doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-2); align-items: stretch; } .po2-door { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--gap-2); height: 100%; } .po2-door__icon { inline-size: 30px; block-size: 30px; stroke: var(--ink); fill: none; stroke-width: 1.6; margin-block-end: var(--gap-1); } .po2-door__title { font-variation-settings: "wght" 600, "wdth" var(--width-text); font-weight: 600; font-size: var(--step-1); margin: 0 0 var(--gap-1); color: var(--ink); } .po2-door__body { font-size: var(--step-0); color: var(--ink-soft); line-height: var(--leading); margin: 0 0 var(--gap-2); flex-grow: 1; } /* -------------------------------------------------------------------------- CLOSING LINE -------------------------------------------------------------------------- */ .po2-closing { text-align: center; padding-block: var(--gap-3) var(--gap-1); } .po2-closing p { font-size: var(--step-0); color: var(--ink-soft); margin: 0; } /* -------------------------------------------------------------------------- PHOTO BLOCK (index2 / index3) — square corners, no overlay gradient/glow (house forbids glassmorphism); contrast via a solid caption bar, which doubles as index2's accent block. -------------------------------------------------------------------------- */ .po2-hero-split { display: grid; grid-template-columns: 3fr 2fr; gap: var(--gap-3); align-items: center; } .po2-hero-split__text { min-width: 0; } @media (max-width: 860px) { .po2-hero-split { grid-template-columns: 1fr; } } .po2-photo { position: relative; border: 1px solid var(--rule); overflow: hidden; background: var(--surface); } .po2-photo img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: var(--po2-photo-ratio, 3 / 2); object-fit: cover; } .po2-photo__credit { display: block; padding: var(--gap-1) var(--gap-2); font-size: var(--step--1); color: var(--ink-soft); } .po2-photo__credit a { color: inherit; } .po2-photo--accent .po2-photo__credit { background: var(--accent); color: var(--accent-on); } .po2-photo--accent .po2-photo__credit a { color: var(--accent-on); } /* index3: a smaller supporting photo beside the stats strip, not the hero itself — the data carries the section, the photo grounds it. */ .po2-hero-support { display: grid; grid-template-columns: 2fr 3fr; gap: var(--gap-3); align-items: start; } @media (max-width: 860px) { .po2-hero-support { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- STATS STRIP (index3) — data uses --font-data + tabular-nums (house-system.md §6). One tile carries the accent block; the rest stay neutral surface. -------------------------------------------------------------------------- */ .po2-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--gap-2); } .po2-stat { border: 1px solid var(--rule); background: var(--surface); padding: var(--gap-2); } .po2-stat--accent { background: var(--accent); border-color: var(--accent); } .po2-stat__value { display: block; font-family: var(--font-data); font-variant-numeric: tabular-nums; font-size: var(--step-2); font-weight: 700; color: var(--ink); margin-block-end: .15em; } .po2-stat--accent .po2-stat__value { color: var(--accent-on); } .po2-stat__label { display: block; font-variation-settings: "wght" 600, "wdth" 88; font-weight: 600; font-size: var(--step--1); color: var(--ink-soft); } .po2-stat--accent .po2-stat__label { color: var(--accent-on); opacity: .85; } /* -------------------------------------------------------------------------- THE BLOCK SETTLE — the house signature (house-system.md §4). Default state is visible/final; only `.js` opts elements into the hidden→settle sequence, so a blocked script never produces a blank page (guardrails.md). -------------------------------------------------------------------------- */ .settle > * { opacity: 1; transform: none; } .js .settle > * { transform: translate3d(0, 12px, 0); opacity: 0; animation: po2-settle var(--dur-base) var(--ease) forwards; } .js .settle > *:nth-child(2) { animation-delay: 60ms; } .js .settle > *:nth-child(3) { animation-delay: 120ms; } .js .settle > *:nth-child(4) { animation-delay: 180ms; } @keyframes po2-settle { to { transform: translate3d(0, 0, 0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .js .settle > * { animation: none; transform: none; opacity: 1; } } /* -------------------------------------------------------------------------- SCROLL REVEAL — ambient-mobile Response effect (motion-mobile.md §1). Same no-JS-safe default-visible pattern as the settle above. -------------------------------------------------------------------------- */ .reveal { opacity: 1; transform: none; } .js .reveal { opacity: 0; transform: translate3d(0, 16px, 0); } @supports (animation-timeline: view()) { .js .reveal { animation: po2-rise linear both; animation-timeline: view(); animation-range: entry 10% entry 60%; } } @keyframes po2-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* IntersectionObserver fallback target (reveal.js) for browsers without animation-timeline: view(). */ .js .reveal.is-in { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); } @media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; animation: none; transition: none; } } /* -------------------------------------------------------------------------- POINTER RESPONSE LAYER — rule-grid warp canvas (motion-pointer.md §2). Background only; never intercepts input. -------------------------------------------------------------------------- */ .po2-grid-warp { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .po2-hero { position: relative; } .po2-hero > .po2-wrap { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- REDUCED CONTRAST / TRANSPARENCY (guardrails.md) -------------------------------------------------------------------------- */ @media (prefers-contrast: more) { .po2-door, .po2-photo, .po2-stat { border-width: 2px; } .po2-grid-warp { display: none; } } @media (prefers-reduced-transparency: reduce) { .po2-photo__credit { background: var(--surface); color: var(--ink); } } /* -------------------------------------------------------------------------- RESPONSIVE — collapse at 860px, further phone step at 560px, matching the breakpoints already established by podeliver.css. -------------------------------------------------------------------------- */ @media (max-width: 860px) { .po2-doors { grid-template-columns: 1fr; } .po2-converge svg { inline-size: 280px; } .po2-hero-inner { gap: var(--gap-2); } .po2-section, .po2-section--hero, .po2-section--tight { padding-block: var(--gap-3); } } @media (max-width: 560px) { .po2-stats { grid-template-columns: repeat(2, 1fr); } }