/* ============================================================================ chrome.css — podeley identity, shared shell. Consumes tokens.css (--pd-*). Light-only. No page-specific blocks: this is the layer every site takes, whether it is a plain-HTML demo, the portfolio, or a Vite/React app. Layers: tokens.css fonts + --pd-* variables (everyone) chrome.css base, wrap, masthead, hero, buttons, sections, footer (everyone) demo.css figure, findings, data note, CTA (one-page demos) portfolio.css / app styles (site-specific) ============================================================================ */ :root { /* the signature "measurement field" motif — masked, so it takes its colour from --pd-rule / --pd-rule-alpha */ --pd-field: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22132%22%20height%3D%2220%22%20viewBox%3D%220%200%20132%2020%22%3E%3Cg%20stroke%3D%22%23000%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%3E%3Cline%20x1%3D%221.1%22%20y1%3D%229.6%22%20x2%3D%2213.5%22%20y2%3D%2210.4%22%2F%3E%3Cline%20x1%3D%2216.0%22%20y1%3D%228.4%22%20x2%3D%2228.0%22%20y2%3D%2211.6%22%2F%3E%3Cline%20x1%3D%2230.6%22%20y1%3D%228.7%22%20x2%3D%2242.7%22%20y2%3D%2211.3%22%2F%3E%3Cline%20x1%3D%2245.1%22%20y1%3D%2210.3%22%20x2%3D%2257.5%22%20y2%3D%229.7%22%2F%3E%3Cline%20x1%3D%2260.1%22%20y1%3D%2212.0%22%20x2%3D%2271.9%22%20y2%3D%228.0%22%2F%3E%3Cline%20x1%3D%2275.0%22%20y1%3D%2212.5%22%20x2%3D%2286.3%22%20y2%3D%227.5%22%2F%3E%3Cline%20x1%3D%2289.3%22%20y1%3D%2211.4%22%20x2%3D%22101.4%22%20y2%3D%228.6%22%2F%3E%3Cline%20x1%3D%22103.8%22%20y1%3D%229.6%22%20x2%3D%22116.2%22%20y2%3D%2210.4%22%2F%3E%3Cline%20x1%3D%22118.7%22%20y1%3D%228.4%22%20x2%3D%22130.6%22%20y2%3D%2211.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); /* Denser than the token default (.18): the print brochure runs this motif at .55 opacity over ~176mm. Stretched across a viewport it reads far weaker, and it is the one piece of ornament the identity has. */ --pd-rule-alpha: .3; } /* tokens.css is dark-canonical; the marketing pages opt into light via . Follow whatever the document declares instead of hardcoding, so a dark data app can load this same file. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"], :root:not([data-theme]) { color-scheme: dark; } /* ---------- base ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: clip; } body { margin: 0; background: var(--pd-bg); color: var(--pd-text); font-family: var(--pd-font-body); font-size: 1rem; line-height: var(--pd-lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: color-mix(in srgb, var(--pd-orange) 28%, transparent); } a, button { color: inherit; } :where(a, button, [tabindex], summary):focus-visible { outline: 2px solid var(--pd-focus); outline-offset: 2px; border-radius: var(--pd-r-1); } [id] { scroll-margin-top: 4.75rem; } /* --pd-maxw-wide (78rem) is the portfolio measure — card grids and 16:10 shots are calibrated for it. A demo can narrow it by setting --wrap on .wrap. */ .wrap { width: 100%; max-width: var(--wrap, var(--pd-maxw-wide)); margin-inline: auto; padding-inline: var(--pd-gutter); } .skip { position: absolute; left: -9999px; } .skip:focus { left: var(--pd-gutter); top: .5rem; z-index: 100; background: var(--pd-bg); border: 1px solid var(--pd-border); border-radius: var(--pd-r-1); padding: .5rem .8rem; font-size: var(--pd-fs-sm); font-weight: 600; text-decoration: none; } /* ---------- the divider --------------------------------------------------- */ .rule { height: 20px; width: 100%; border: 0; flex: none; margin: calc(var(--pd-section) * .6) 0 0; background-color: rgba(var(--pd-rule), var(--pd-rule-alpha)); -webkit-mask: var(--pd-field) repeat-x center / 132px 20px; mask: var(--pd-field) repeat-x center / 132px 20px; } /* the hero already carries its own bottom padding */ .hero + .rule { margin-top: 0; } /* ---------- masthead ------------------------------------------------------ */ .masthead { position: sticky; top: 0; z-index: 50; background: var(--pd-bg); border-bottom: 1px solid var(--pd-border-soft); } .masthead-inner { display: flex; align-items: center; gap: var(--pd-sp-4); min-height: 3.5rem; } .brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--pd-text); margin-right: auto; } .brand svg { width: 1.35rem; height: 1.35rem; border-radius: .32rem; flex: none; } .brand .name { font-family: var(--pd-font-display); font-weight: 500; font-size: 1rem; letter-spacing: .01em; white-space: nowrap; } .nav { display: flex; gap: var(--pd-sp-5); align-items: center; } .nav a { font-size: var(--pd-fs-sm); color: var(--pd-text-muted); text-decoration: none; white-space: nowrap; transition: color var(--pd-dur-2); } .nav a:hover { color: var(--pd-text); } .nav a[aria-current] { color: var(--pd-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--pd-primary); } .lang-toggle { font-family: var(--pd-font-mono); font-size: var(--pd-fs-cap); font-weight: 500; letter-spacing: .08em; color: var(--pd-text-faint); text-decoration: none; border: 1px solid var(--pd-border-soft); border-radius: var(--pd-r-1); padding: .18rem .42rem; flex: none; transition: color var(--pd-dur-2), border-color var(--pd-dur-2); } .lang-toggle:hover { color: var(--pd-link); border-color: var(--pd-primary); } /* ---------- hero ---------------------------------------------------------- */ /* padding-block, not the shorthand: a horizontal 0 overrides the padding-inline .wrap contributes as the gutter, leaving text flush to the edges on phones. */ .hero { padding-block: calc(var(--pd-section) * .7) calc(var(--pd-section) * .55); } .kicker, .eyebrow { font-family: var(--pd-font-mono); font-size: var(--pd-fs-cap); letter-spacing: .13em; text-transform: uppercase; color: var(--pd-text-faint); margin: 0; } .hero h1 { font-family: var(--pd-font-display); font-weight: 500; font-size: var(--pd-fs-h1); line-height: var(--pd-lh-tight); letter-spacing: -.01em; margin: .9rem 0 .8rem; max-width: 24ch; } .hero-sub { max-width: 60ch; color: var(--pd-text-muted); font-size: var(--pd-fs-lead); line-height: var(--pd-lh-body); margin: 0 0 1.5rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } /* ---------- buttons and inline links -------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--pd-font-body); font-weight: 600; font-size: var(--pd-fs-sm); line-height: 1; padding: .72rem 1.1rem; border-radius: var(--pd-r-1); border: 1px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap; transition: filter var(--pd-dur-2), border-color var(--pd-dur-2), color var(--pd-dur-2); } .btn--primary { background: var(--pd-btn-primary-bg); color: var(--pd-btn-primary-fg); } .btn--primary:hover { filter: brightness(.94); } .btn--primary:disabled { opacity: .45; cursor: not-allowed; } .btn--outline { background: transparent; color: var(--pd-text); border-color: var(--pd-border); } .btn--outline:hover { border-color: var(--pd-primary); color: var(--pd-link); } .link-plain { font-weight: 600; font-size: var(--pd-fs-sm); color: var(--pd-text-muted); text-decoration: none; } .link-plain:hover { color: var(--pd-link); } .arw { font-family: var(--pd-font-mono); opacity: .85; } /* ---------- sections ------------------------------------------------------ */ /* Top padding only. Adjacent sections would otherwise stack two full section gaps; the rule and the footer bring their own. */ .pd-section { padding-block: calc(var(--pd-section) * .75) 0; } .section-head { max-width: 54rem; } .pd-section h2 { font-family: var(--pd-font-display); font-weight: 500; font-size: var(--pd-fs-h2); line-height: 1.16; letter-spacing: -.01em; margin: .75rem 0 .5rem; } .intro { color: var(--pd-text-muted); font-size: var(--pd-fs-lead); line-height: var(--pd-lh-body); max-width: 60ch; margin: 0; } /* ---------- mono chip ----------------------------------------------------- */ /* the print brochure's session-number treatment; used by cards and demos alike */ .tag { font-family: var(--pd-font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--pd-text-muted); border: 1px solid var(--pd-border); border-radius: var(--pd-r-1); padding: .16rem .42rem; line-height: 1.3; white-space: nowrap; } .tag.t-status { color: var(--pd-caveat); border-color: color-mix(in srgb, var(--pd-caveat) 45%, transparent); } /* ---------- footer -------------------------------------------------------- */ /* the print brochure's foot: hairline, mono captions, split left/right */ .site-footer { border-top: 1px solid var(--pd-border-soft); margin-top: var(--pd-section); padding: var(--pd-sp-5) 0 var(--pd-sp-7); } .foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem var(--pd-sp-6); } .foot-map, .foot-note, .foot-fine { font-family: var(--pd-font-mono); font-size: var(--pd-fs-cap); line-height: 1.7; color: var(--pd-text-faint); margin: 0; letter-spacing: .03em; } .foot-map a, .foot-note a { color: var(--pd-text-muted); text-decoration: none; } .foot-map a:hover, .foot-note a:hover { color: var(--pd-text); } .foot-fine { margin-top: var(--pd-sp-3); max-width: 60ch; } /* ---------- responsive ---------------------------------------------------- */ @media (max-width: 760px) { .masthead-inner { flex-wrap: wrap; padding-block: .55rem; row-gap: .5rem; min-height: 0; } .nav { order: 3; width: 100%; gap: var(--pd-sp-4); overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } } @media (max-width: 620px) { .hero h1 { max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .btn, .nav a, .lang-toggle { transition: none; } }