/* shared/chrome.css — header + footer chrome lifted from the landing page (designgallery/pages/petra-run4-v3). Loaded AFTER site.css; every selector is prefixed with `body` so it out-ranks site.css's own chrome rules, and each rule also resets the site.css properties the landing page does not use (sticky, blur, hairlines, pills, footer thread). Single theme: light paper body, dark header + footer. No toggle. */ /* ---------- tokens ---------- */ :root{ --ink:#141014; --ink-2:#221A1E; --ink-3:#2E2429; --paper:#F4E9ED; --white:#fff; --rose:#E11D48; --rose-bright:#F43F5E; --rose-deep:#BE123C; --rose-deeper:#9F1239; --rose-tint:#FB7185; --rose-tint-2:#FDA4AF; --text:#141014; --text-mid:#584A50; --text-soft:#6E5F65; --line:#E0D0D6; --line-soft:#EADCE1; --on-dark:#F4E9ED; --on-dark-mid:rgba(244,233,237,.70); --on-dark-soft:rgba(244,233,237,.60); --hairline-dark:rgba(244,233,237,.14); --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,"Cascadia Code","SF Mono",Menlo,Consolas,monospace; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --r-sm:6px; --r-md:10px; --r-lg:16px; --wrap:1320px; } /* Light theme, permanently. is set statically in the markup (site.js is no longer loaded, so a stored "dark" preference is never read); this block pins the page colours to the landing page's paper even if the attribute were missing. site.css's light --bg is stark white, so the body token is moved to paper and cards (--surface) go white, as on the landing page. */ :root, :root[data-theme="light"], :root[data-theme="dark"]{ color-scheme:light; --bg:#F4E9ED; --surface:#FFFFFF; } html,body{overflow-x:hidden} body{background:var(--paper)} /* ---------- layout ---------- */ body .wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 40px} body .skip-link{ position:absolute; left:-9999px; top:0; width:auto; height:auto; margin:0; overflow:visible; clip:auto; clip-path:none; white-space:nowrap; background:var(--paper); color:var(--ink); padding:10px 16px; z-index:99; border-radius:0 0 var(--r-sm) 0; border:0; font-weight:400; } body .skip-link:focus{position:absolute; left:0; top:0} /* ---------- header ---------- */ body .site-header{ position:relative; top:auto; z-index:3; background:var(--ink); color:var(--on-dark); -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:0; font-family:var(--sans); line-height:1.6; } body .site-header .wrap{display:flex; flex-wrap:nowrap; align-items:center; gap:var(--s4); height:76px; padding-top:0; padding-bottom:0} body .brand{display:flex; align-items:center; gap:0; flex:0 0 auto; border-radius:var(--r-sm); color:inherit; text-decoration:none} body .brand svg{display:block; height:30px; width:auto} body .site-nav{flex:0 1 auto; margin-left:auto} body .site-nav ul{display:flex; flex-wrap:nowrap; gap:4px; margin:0; padding:0; list-style:none} body .site-nav a{ display:block; padding:8px 12px; border-radius:var(--r-sm); background:transparent; color:var(--on-dark-mid); font-size:14.5px; font-weight:450; letter-spacing:-0.005em; text-decoration:none; } body .site-nav a:hover{color:var(--on-dark); background:rgba(244,233,237,.07); text-decoration:none} body .site-nav a[aria-current="page"]{color:var(--on-dark); background:transparent; font-weight:450; box-shadow:inset 0 -1px 0 var(--rose)} body .site-header .tagline{ margin:0; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-soft); padding-left:var(--s3); margin-left:4px; border-left:1px solid var(--hairline-dark); white-space:nowrap; } body :focus-visible{outline:2px solid var(--rose-bright); outline-offset:3px; border-radius:3px} /* ---------- footer ---------- */ body .site-footer{ margin-top:0; background:var(--ink); color:var(--on-dark-soft); padding:var(--s5) 0; border-top:0; font-family:var(--sans); line-height:1.6; } body .site-footer::before{display:none} body .site-footer .wrap{display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:center} body .site-footer a{color:var(--on-dark-mid); font-size:14px; text-decoration:none} body .site-footer a:hover{color:var(--on-dark); text-decoration:underline} body .footer-nav{display:flex; gap:var(--s3); flex-wrap:wrap} body .site-footer .legal{margin-left:auto; font-size:12.5px; font-family:var(--mono)} body .site-footer p{font-size:14px; margin:0} /* ---------- responsive ---------- */ @media (max-width:1180px){ body .wrap{padding:0 var(--s4)} body .site-header .tagline{display:none} } @media (max-width:720px){ body .wrap{padding:0 20px} body .site-header .wrap{height:58px; gap:10px; align-items:center} body .brand svg{height:21px} /* small screens: the bar wraps — logo on the first row, all five links on the second */ body .site-header .wrap{flex-wrap:wrap; height:auto; padding-top:12px; padding-bottom:6px; gap:4px 10px} body .site-nav{flex:1 1 100%; margin-left:-8px; margin-right:-20px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 44px),transparent)} body .site-nav::-webkit-scrollbar{display:none} body .site-nav ul{flex-wrap:nowrap; gap:0 2px; padding-right:44px; width:max-content} body .site-nav a{padding:6px 8px; font-size:14px; white-space:nowrap} body .site-nav li.opt{display:list-item} body .site-footer .legal{margin-left:0; width:100%} } @media (max-width:390px){ } /* round 3: the 640-wide SVG diagrams render their labels at ~7px on phones; the cards and captions carry the content */ @media (max-width:720px){ body .diagram svg{display:none} body .diagram figcaption{margin-top:0} } /* round 3: one type system across landing and subpages */ :root{--font-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --fg-muted:#584A50} /* round 3: security questionnaire */ body .q-head{font-size:19px; font-weight:650; letter-spacing:-.018em; margin:40px 0 14px} body .q-list{display:grid; grid-template-columns:180px minmax(0,1fr); gap:12px 28px; margin:0 0 32px; max-width:78ch; border-top:1px solid var(--line,#E0D0D6)} body .q-list dt{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#BE123C; padding-top:14px} body .q-list dd{margin:0; padding-top:12px; font-size:15px; line-height:1.55; color:var(--fg-muted,#584A50); border-top:1px solid #EADCE1} body .q-list dt{border-top:1px solid #EADCE1} @media (max-width:720px){ body .q-list{grid-template-columns:1fr; gap:4px 0} body .q-list dt{border-top:1px solid #EADCE1; padding-top:12px} body .q-list dd{border-top:0; padding-top:2px; padding-bottom:8px} }