/* posada.io shared component layer. Values transcribed from the design handoff's _tools/pagegen.js and the README token list. Per-page accent is switched with data-accent on . */ :root { --bg: #06080e; --card: #0a0e18; --card-alt: #0b101c; --card-deep: #080b13; --text: #eef2f9; --text-strong: #ffffff; --body: #a9b4c9; --secondary: #98a4bb; --muted: #8b97ad; --divider: #2b3444; --rule: rgba(255, 255, 255, .1); --hairline: rgba(255, 255, 255, .07); --border: rgba(255, 255, 255, .12); --sans: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --gutter: clamp(20px, 4vw, 56px); --wide: 1180px; --doc: 860px; --doc-wide: 980px; /* default accent: teal */ --accent: #5eead4; --accent-hover: #99f6e4; --on-accent: #04211c; --glow: rgba(94, 234, 212, .22); } [data-accent="pink"] { --accent:#f472b6; --accent-hover:#f9a8d4; --on-accent:#26060f; --glow:rgba(244,114,182,.22); } [data-accent="violet"] { --accent:#c4b5fd; --accent-hover:#ddd6fe; --on-accent:#1a1033; --glow:rgba(196,181,253,.22); } [data-accent="amber"] { --accent:#f0a030; --accent-hover:#fbbf5c; --on-accent:#2a1a02; --glow:rgba(240,160,48,.22); } [data-accent="sky"] { --accent:#7dd3fc; --accent-hover:#bae6fd; --on-accent:#04202e; --glow:rgba(125,211,252,.22); } [data-accent="grey"] { --accent:#98a4bb; --accent-hover:#cfd7e6; --on-accent:#0a0e18; --glow:rgba(152,164,187,.16); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; overflow-x: hidden; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } img { max-width: 100%; height: auto; } /* ---------- header ---------- */ .site-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 16px var(--gutter); background: rgba(6, 8, 14, .72); backdrop-filter: blur(18px); border-bottom: 1px solid var(--hairline); } .crumbs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; } .crumbs a { display: flex; align-items: center; gap: 8px; color: var(--secondary); } .crumbs a:hover { color: var(--text); } .crumbs .sep { color: var(--divider); } .crumbs .here { color: var(--accent); letter-spacing: .22em; } /* ---------- buttons ---------- */ .pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; transition: transform .2s ease, background .2s ease; } .pill:hover { background: var(--accent-hover); color: var(--on-accent); transform: translateY(-2px); } .pill-lg { padding: 15px 26px; font-size: 15px; font-family: var(--sans); letter-spacing: 0; } .pill-ghost { background: transparent; color: var(--text); border: 1px solid rgba(255, 255, 255, .2); } .pill-ghost:hover { background: transparent; color: var(--text); border-color: var(--accent); } .pill-white { background: #fff; color: #06080e; } .pill-white:hover { background: #e8edf6; color: #06080e; } /* ---------- hero ---------- */ .hero { position: relative; padding: clamp(70px,11vw,120px) var(--gutter) clamp(40px,6vw,60px); } .hero-glow { position: absolute; top: -130px; left: 50%; width: min(940px, 120vw); height: 520px; background: radial-gradient(ellipse at center, var(--glow), transparent 70%); animation: posadaDrift 12s ease-in-out infinite; pointer-events: none; } @keyframes posadaDrift { 0%, 100% { transform: translate(-50%, 0) scale(1); opacity: .45; } 50% { transform: translate(-50%, -24px) scale(1.06); opacity: .75; } } .hero-inner { position: relative; max-width: var(--wide); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(20px, 3vw, 30px); } .hero.narrow .hero-inner { max-width: var(--doc); } .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .24em; color: var(--accent); } h1.display { margin: 0; font-size: clamp(44px, 9vw, 116px); line-height: .92; letter-spacing: -.045em; font-weight: 800; color: var(--text-strong); max-width: 14ch; text-wrap: balance; } h1.display.full { max-width: none; } .lede { margin: 0; font-size: clamp(16px, 1.8vw, 21px); line-height: 1.6; color: var(--body); max-width: 62ch; border-top: 1px solid var(--rule); padding-top: 24px; text-wrap: pretty; } /* ---------- layout ---------- */ .container { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) clamp(52px,7vw,84px); } .doc { max-width: var(--doc); margin: 0 auto; padding: 0 var(--gutter) clamp(60px,8vw,100px); display: flex; flex-direction: column; gap: 18px; } .doc.wide { max-width: var(--doc-wide); } .section { display: flex; flex-direction: column; gap: 18px; } /* ---------- doc typography ---------- */ .kicker { margin-top: 34px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--muted); } .kicker.accent { color: var(--accent); } .doc h2 { margin: 26px 0 0; padding-top: 26px; border-top: 1px solid var(--rule); font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -.025em; font-weight: 600; color: var(--text-strong); text-wrap: balance; } .h2k { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--rule); } .h2k .kicker { margin-top: 0; } .h2k h2 { margin: 0; padding: 0; border: 0; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.08; letter-spacing: -.03em; } .doc h3 { margin: 8px 0 0; font-size: 19px; letter-spacing: -.015em; font-weight: 600; color: var(--text); } .doc p, .prose { margin: 0; font-size: 16px; line-height: 1.7; color: var(--body); text-wrap: pretty; } .doc ul, .doc ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; font-size: 16px; line-height: 1.65; color: var(--body); } .doc strong { color: var(--text); } code { font-family: var(--mono); font-size: .88em; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.07); color: #cfd7e6; } .doc a { text-decoration: underline; } /* ---------- section heading (non-doc) ---------- */ h2.section-title { margin: 0; font-size: clamp(24px,3.4vw,38px); font-weight: 600; letter-spacing: -.03em; color: var(--text-strong); text-wrap: balance; } .section-note { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--muted); } /* ---------- cards ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(14px, 2vw, 20px); } .grid.tight { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; } .grid.wide-cells { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } .card { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 22px; border: 1px solid var(--border); background: var(--card); transition: transform .2s ease, border-color .2s ease, background .2s ease; } a.card:hover { transform: translateY(-5px); border-color: var(--accent); background: #0c121e; } .card.accent { border-color: color-mix(in srgb, var(--accent) 30%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%), var(--card); } a.card.accent:hover { border-color: var(--accent); } .card.disabled { border: 1px dashed rgba(255,255,255,.16); background: var(--card-alt); color: var(--muted); } .card.disabled:hover { transform: none; } .card .eyebrow-sm { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--muted); } .card.accent .eyebrow-sm { color: var(--accent); } .card h3 { margin: 0; font-size: clamp(22px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.03em; color: var(--text-strong); } .card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); } .card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .arrow { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); color: var(--text); font-size: 15px; transition: transform .2s ease, border-color .2s ease; } a.card:hover .arrow { border-color: var(--accent); color: var(--accent); } .arrow.lg { width: 46px; height: 46px; } .row-link:hover .arrow.lg { transform: rotate(-45deg); border-color: var(--accent); color: var(--accent); } /* ---------- tiles / stats ---------- */ .tile { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 16px; border: 1px solid var(--border); background: var(--card); } .tile h4 { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); } .tile p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--body); } .stat { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 18px; border: 1px solid var(--border); background: var(--card); } .stat .label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--muted); } .stat .value { font-size: clamp(26px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.03em; color: var(--text-strong); } .supply-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 0; border-top: 1px solid var(--rule); } .supply-row .label { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--muted); } .supply-row .value { font-size: clamp(18px, 2.2vw, 26px); font-weight: 600; color: var(--text-strong); } /* ---------- badge ---------- */ .badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .18em; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .badge.grey { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--muted); } /* ---------- row links ---------- */ .rows { display: flex; flex-direction: column; } .row-link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; padding: 22px 18px; border-top: 1px solid var(--rule); transition: background .2s ease, padding .2s ease; } .row-link:last-child { border-bottom: 1px solid var(--rule); } .row-link:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); padding-left: 28px; } .row-link h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--text); } .row-link p { margin: 4px 0 0; font-size: 14.5px; color: var(--body); } /* ---------- tables ---------- */ .table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--rule); background: var(--card); } .table-wrap table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; } .table-wrap th { text-align: left; vertical-align: bottom; padding: 14px 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--rule); } .table-wrap td { vertical-align: top; padding: 14px 16px; line-height: 1.55; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--body); } .table-wrap td:first-child { color: var(--text); font-weight: 600; } /* ---------- notes / callouts ---------- */ .note { padding: 18px 20px; border-radius: 14px; border: 1px solid var(--rule); background: var(--card); font-size: 15px; line-height: 1.65; color: #cfd7e6; } .note.accent { border-color: color-mix(in srgb, var(--accent) 40%, transparent); } .note.warn { border-color: rgba(240,160,48,.45); background: rgba(240,160,48,.07); color: #f6dcb4; } .callout { padding: clamp(24px,3vw,34px); border-radius: 26px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%), var(--card); display: flex; flex-direction: column; gap: 14px; } .callout h2 { margin: 0; font-size: clamp(22px,2.8vw,32px); font-weight: 600; letter-spacing: -.03em; color: var(--text-strong); } /* ---------- chips ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 10px; } .chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--secondary); } .chip.planned { border-style: dashed; color: var(--muted); } /* ---------- pre / diagrams ---------- */ .diagram { overflow-x: auto; margin: 0; padding: 20px; border-radius: 16px; border: 1px solid var(--rule); background: var(--card-deep); font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: #cfd7e6; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid rgba(255,255,255,.08); } .footer-row { max-width: var(--wide); margin: 0 auto; padding: 30px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; } .footer-row p { margin: 0; color: var(--muted); } .footer-row nav { display: flex; flex-wrap: wrap; gap: 22px; } .footer-row nav a { color: var(--secondary); } .footer-row nav a:hover { color: var(--accent); } .disclaimer-wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter) 32px; } .disclaimer { margin: 0; font-size: 12px; line-height: 1.65; color: var(--muted); max-width: 100ch; text-wrap: pretty; } /* ---------- accessibility / motion ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .hero-glow { animation: none; } *, *::before, *::after { transition: none !important; } a.card:hover, .pill:hover { transform: none; } .row-link:hover { padding-left: 18px; } } @media (max-width: 560px) { .row-link { grid-template-columns: 1fr; } .row-link .arrow { justify-self: start; } }