/* Present-day public and commercial services (rail, jobs, lottery, market, post). Shared furniture only: header, nav, footer, buttons, fields, badges, alerts, fact rows and the link-driven filters (:target). Each brand file sets --brand, --brand-ink, --accent-2, --surface, --radius and --font and adds its own identity. The design tokens on stay in place; the brands override paper and type because a 2026 service does not follow the archive's era drift. */ .svc-shell body, body { min-height: 100vh; } html[class*="shell-rail"], html[class*="shell-jobs"], html[class*="shell-lottery"], html[class*="shell-market"], html[class*="shell-post"] { --radius: 6px; --surface: #fff; --line: #d9dde3; --soft: #f3f5f7; --text: #1c1f24; --dim: #5d6570; --ok: #1e7b34; --warn: #b54708; --bad: #b42318; } html[class*="shell-rail"] body, html[class*="shell-jobs"] body, html[class*="shell-lottery"] body, html[class*="shell-market"] body, html[class*="shell-post"] body { font-family: var(--font); color: var(--text); background: var(--page); font-variant-numeric: normal; line-height: 1.5; } html[class*="shell-"] .svc h1, html[class*="shell-"] .svc h2, html[class*="shell-"] .svc h3, html[class*="shell-"] .svc h4 { font-family: var(--head, var(--font)); } /* ---------- header ---------- */ .svc-inner { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; } .svc-header { background: var(--brand); color: var(--brand-ink); } .svc-header .svc-inner { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; min-height: 64px; } .svc-header .svc-brand, .svc-header .svc-nav a { color: inherit; } .svc-brand { display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; } .svc-brand .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .svc-brand b { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; } .svc-brand small { font-size: .72rem; opacity: .82; margin-top: .15rem; } .svc-nav { display: flex; flex-wrap: wrap; gap: .15rem; margin-left: auto; } .svc-nav a { color: inherit; text-decoration: none; font-size: .9rem; font-weight: 600; padding: .55rem .7rem; border-radius: var(--radius); } .svc-nav a:hover { background: rgba(255,255,255,.14); text-decoration: none; } main { max-width: 1180px; } .svc a { color: var(--link, var(--brand)); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); } .svc a:hover { text-decoration-color: currentColor; } .svc h1 a, .svc h2 a { color: inherit; } .svc p, .svc li, .svc dd, .svc dt { max-width: none; } .svc .lede { color: var(--dim); font-size: 1.08rem; } .svc .kicker { font-family: var(--font); color: var(--dim); font-size: .8rem; letter-spacing: .02em; } .svc .muted, .svc .small.muted { color: var(--dim); } .svc h2 { margin-top: 2rem; font-size: 1.3rem; font-weight: 700; } .svc h1 { font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.015em; } /* ---------- footer ---------- */ .svc-footer { background: var(--foot, #15181c); color: rgba(255,255,255,.78); font-size: .82rem; line-height: 1.55; padding: 2rem 0 1.4rem; margin-top: 3rem; } .svc-footer a { color: #fff; text-decoration: none; } .svc-footer a:hover { text-decoration: underline; } .svc-footer .foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; margin-bottom: 1.4rem; } .svc-footer .foot-cols div { display: flex; flex-direction: column; gap: .3rem; } .svc-footer h4 { font-family: var(--font); color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .35rem; font-weight: 700; } .svc-footer .legal { border-top: 1px solid rgba(255,255,255,.16); padding-top: 1rem; margin: 0 0 .6rem; font-size: .76rem; color: rgba(255,255,255,.62); max-width: none; } .svc-footer .vmt { color: rgba(255,255,255,.55); margin: 0; } @media (max-width: 760px) { .svc-footer .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc-nav { margin-left: 0; } } /* ---------- controls ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font: 700 .95rem/1 var(--font); padding: .8rem 1.2rem; border-radius: var(--radius); background: var(--cta, var(--brand)); color: var(--cta-ink, #fff) !important; border: 2px solid var(--cta, var(--brand)); text-decoration: none !important; cursor: pointer; white-space: nowrap; } .btn:hover { filter: brightness(1.08); } .btn.ghost { background: transparent; color: var(--cta, var(--brand)) !important; } .btn.big { font-size: 1.05rem; padding: 1rem 1.5rem; } .field { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: .05em; } .field input, .field select, .svc select, .svc input[type="number"], .svc input[type="date"], .svc input[type="text"], .svc input:not([type]) { font: 500 1rem var(--font); color: var(--text); padding: .7rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; min-width: 0; text-transform: none; letter-spacing: 0; } .svc input:focus, .svc select:focus { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 1px; border-color: var(--brand); } .crumbs { margin: 0 0 1rem; color: var(--dim); } .crumbs a { color: var(--dim); } .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2em; padding: .12rem .45rem; border-radius: 4px; font: 700 .78rem/1.3 var(--mono-font, var(--font)); background: var(--soft); color: var(--text); margin-right: .25rem; } .alert { background: #fff8e6; border: 1px solid #f0d58a; border-left: 5px solid #e0a800; padding: .8rem 1rem; border-radius: var(--radius); margin: 0 0 1rem; } .alert.warn { background: #fff1ec; border-color: #f4b8a4; border-left-color: var(--bad); } .alert.muted { background: var(--soft); border-color: var(--line); border-left-color: var(--dim); color: var(--dim); } .facts-row, .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 1.25rem 0; } .facts-row > div, .stat-row > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; display: flex; flex-direction: column; gap: .1rem; } .facts-row b, .stat-row b { font-size: 1.35rem; font-weight: 800; line-height: 1.15; } .facts-row span, .stat-row span { font-size: .8rem; color: var(--dim); } .svc table { font-size: .93rem; } .svc th { font-family: var(--font); color: var(--dim); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--line); } .svc td { border-bottom: 1px solid var(--line); padding: .5rem .6rem .5rem 0; vertical-align: middle; } .twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .threecol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 760px) { .twocol, .threecol { grid-template-columns: 1fr; } } .actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; } /* ---------- filters as links: an empty target span before the list; its :target hides the rest ---------- */ .target { position: absolute; width: 0; height: 0; overflow: hidden; }