/* * Trietment — elegant, mysterious, security-consultancy. * A deep graphite canvas, oxidised-gold accents, monospace whispers. */ :root { --c-bg: #07090d; --c-bg-2: #0b0f15; --c-bg-3: #11161f; --c-border: #1f2733; --c-border-strong: #2c3748; --c-text: #d7d9df; --c-text-dim: #8a909d; --c-text-faint: #5a606c; --c-accent: #c9a45c; /* oxidised gold */ --c-accent-2: #e9d8a6; --c-accent-cool: #7aa2a8; /* faint teal glint */ --c-danger: #b6574e; --c-success: #6f9b7a; --f-serif: "Cormorant Garamond", "Times New Roman", serif; --f-sans: "Inter", system-ui, -apple-system, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --r-sm: 2px; --r-md: 4px; --w-container: 1180px; --shadow-soft: 0 1px 0 rgba(201, 164, 92, 0.04), 0 20px 60px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--f-sans); font-weight: 300; line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100%; } body { background: var(--c-bg); overflow-x: hidden; } /* Fixed gradient backdrop on its own compositor layer. Replaces `background-attachment: fixed` on , which forced the browser to re-rasterise the whole background on every scroll frame — the classic cause of the page visibly shaking/tearing while scrolling, worst on mobile. A position:fixed pseudo-element gives the identical "background stays put" look but is composited once and just stays parked, so scrolling no longer repaints it. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 600px at 85% -10%, rgba(201, 164, 92, 0.06), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(122, 162, 168, 0.05), transparent 55%), linear-gradient(180deg, #07090d 0%, #05070a 100%); } /* ambient textures */ .noise { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.35; mix-blend-mode: overlay; background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 3px 3px, 7px 7px; background-position: 0 0, 1px 1px; } .grid-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(201, 164, 92, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 164, 92, 0.035) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at 50% 20%, black 40%, transparent 80%); } main, .site-header, .site-footer { position: relative; z-index: 1; } /* typography */ h1, h2, h3, h4 { font-family: var(--f-serif); font-weight: 500; letter-spacing: 0.01em; color: var(--c-text); margin: 0 0 0.6em; line-height: 1.15; } h1 { font-size: clamp(2.4rem, 4.8vw, 4rem); letter-spacing: -0.01em; } h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); } h3 { font-size: 1.5rem; } h4 { font-size: 1rem; font-family: var(--f-sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--c-accent); } p { margin: 0 0 1em; color: var(--c-text); } .muted { color: var(--c-text-dim); } .small { font-size: 0.85rem; } .mono { font-family: var(--f-mono); letter-spacing: 0.02em; } em { color: var(--c-accent-2); font-style: italic; } strong { color: var(--c-text); font-weight: 500; } a { color: var(--c-accent); text-decoration: none; transition: color 150ms ease, border-color 150ms ease; border-bottom: 1px solid transparent; } a:hover { color: var(--c-accent-2); border-bottom-color: rgba(201, 164, 92, 0.6); } hr { border: 0; border-top: 1px solid var(--c-border); margin: 3rem 0; } /* layout */ .container { width: 100%; max-width: var(--w-container); margin: 0 auto; padding: 0 1.5rem; } .section { padding: 4rem 0; } .section-tight { padding: 2rem 0; } /* Section variant for stacked panels (e.g. /account) — they sit just below the previous one with minimal vertical breathing room. */ .section-stacked { padding: 1rem 0; } .section-stacked:first-of-type { padding-top: 0; } /* header */ .site-header { border-bottom: 1px solid var(--c-border); background: rgba(7, 9, 13, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; } .header-inner { display: flex; align-items: center; gap: 2rem; padding-top: 1.1rem; padding-bottom: 1.1rem; } .brand { display: inline-flex; align-items: baseline; gap: 0.6rem; border: none !important; color: var(--c-text) !important; } .brand:hover { color: var(--c-accent-2) !important; } .brand-mark { font-family: var(--f-serif); font-size: 1.6rem; font-weight: 600; color: var(--c-accent); line-height: 1; } .brand-dot { color: var(--c-accent-cool); } .brand-word { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.38em; color: var(--c-text-dim); } .site-nav { margin-left: auto; display: flex; gap: 1.75rem; } .site-nav a { color: var(--c-text-dim); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; border: none; padding: 0.25rem 0; position: relative; } .site-nav a:hover { color: var(--c-text); } .site-nav a.active { color: var(--c-accent); } .site-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--c-accent); opacity: 0.6; } .site-utility { display: flex; align-items: center; gap: 0.75rem; } .util-label { color: var(--c-text-dim); font-size: 0.8rem; font-family: var(--f-mono); } .util-label strong { color: var(--c-accent); font-weight: 500; } .util-link { color: var(--c-accent); font-weight: 500; border: none; white-space: nowrap; } .util-link:hover { color: var(--c-accent-2); } /* buttons */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1.5rem; background: var(--c-accent); color: #0a0d12; border: 1px solid var(--c-accent); border-radius: var(--r-sm); font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: all 180ms ease; text-decoration: none !important; } .btn:hover { background: var(--c-accent-2); border-color: var(--c-accent-2); color: #0a0d12; transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--c-accent); border-color: var(--c-border-strong); } .btn-ghost:hover { background: transparent; color: var(--c-accent-2); border-color: var(--c-accent); } .btn-small { padding: 0.55rem 1rem; font-size: 0.72rem; } .btn-xs { padding: 0.3rem 0.6rem; font-size: 0.64rem; letter-spacing: 0.14em; } .btn-danger { background: transparent; color: var(--c-danger); border-color: rgba(182, 87, 78, 0.5); } .btn-danger:hover { background: rgba(182, 87, 78, 0.1); color: var(--c-danger); border-color: var(--c-danger); } /* hero */ .hero { padding: 7rem 0 5rem; position: relative; } .hero-kicker { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 1.5rem; display: inline-flex; align-items: center; gap: 0.75rem; } .hero-kicker::before { content: ""; display: inline-block; width: 36px; height: 1px; background: var(--c-accent); } .hero h1 { max-width: 22ch; margin-bottom: 1.5rem; } .hero h1 .accent { color: var(--c-accent); font-style: italic; } .hero-lead { max-width: 58ch; font-size: 1.15rem; color: var(--c-text-dim); margin-bottom: 2.5rem; } .hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; } /* cards / features */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } } .card { background: linear-gradient(180deg, rgba(17, 22, 31, 0.9), rgba(11, 15, 21, 0.9)); border: 1px solid var(--c-border); padding: 2rem; border-radius: var(--r-md); transition: border-color 220ms ease, transform 220ms ease; position: relative; overflow: hidden; } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); opacity: 0.3; } .card:hover { border-color: var(--c-border-strong); transform: translateY(-2px); } .card-index { font-family: var(--f-mono); font-size: 0.72rem; color: var(--c-accent); letter-spacing: 0.22em; margin-bottom: 1rem; } .card h3 { margin-bottom: 0.75rem; } /* section label */ .eyebrow { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 1rem; display: inline-flex; align-items: center; gap: 0.6rem; } .eyebrow::before { content: "//"; color: var(--c-text-faint); } .section-heading { max-width: 58ch; margin-bottom: 3rem; } .section-heading p { color: var(--c-text-dim); font-size: 1.05rem; } /* stats ribbon */ .ribbon { border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); padding: 2.5rem 0; background: rgba(11, 15, 21, 0.4); } .ribbon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; } @media (max-width: 900px) { .ribbon-grid { grid-template-columns: repeat(2, 1fr); } } .ribbon-item .num { font-family: var(--f-serif); font-size: 2.4rem; color: var(--c-accent); line-height: 1; display: block; } .ribbon-item .lbl { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text-dim); margin-top: 0.6rem; display: block; } /* approach steps */ .steps { counter-reset: step; display: grid; gap: 1rem; } .step { display: grid; grid-template-columns: 80px 1fr; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--c-border); counter-increment: step; align-items: start; } .step:last-child { border-bottom: 1px solid var(--c-border); } .step-num { font-family: var(--f-mono); color: var(--c-accent); font-size: 1rem; letter-spacing: 0.14em; padding-top: 0.4rem; } .step-num::before { content: "0" counter(step); } @media (max-width: 700px) { .step { grid-template-columns: 1fr; gap: 0.5rem; } } /* blog list */ .posts-list { display: grid; gap: 0; } .post-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--c-border); align-items: baseline; transition: background 200ms ease; } .post-row:last-child { border-bottom: 1px solid var(--c-border); } .post-row:hover { background: linear-gradient(90deg, rgba(201, 164, 92, 0.03), transparent); } .post-meta { font-family: var(--f-mono); font-size: 0.78rem; color: var(--c-text-dim); letter-spacing: 0.06em; } .post-row h3 { margin: 0 0 0.4rem; font-size: 1.6rem; } .post-row h3 a { color: var(--c-text); border: none; } .post-row h3 a:hover { color: var(--c-accent); } .post-excerpt { color: var(--c-text-dim); margin: 0; } .post-status-tag { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.2em; padding: 0.25rem 0.6rem; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); color: var(--c-text-dim); text-transform: uppercase; } .post-status-tag.draft { color: var(--c-danger); border-color: rgba(182, 87, 78, 0.4); } @media (max-width: 800px) { .post-row { grid-template-columns: 1fr; gap: 0.5rem; } } /* article */ .article { max-width: 900px; margin: 0 auto; padding: 4rem 0; } .article-header { margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--c-border); } .article-meta { font-family: var(--f-mono); font-size: 0.8rem; color: var(--c-text-dim); margin-bottom: 1rem; letter-spacing: 0.06em; } .article-body { font-size: 1.08rem; line-height: 1.85; } .article-body p { margin-bottom: 1.4em; color: #c3c6cd; } .article-body h2 { margin-top: 2.5em; font-size: 1.7rem; } .article-body h3 { margin-top: 2em; } .article-body blockquote { border-left: 2px solid var(--c-accent); padding: 0.2em 1.2em; margin: 1.5em 0; color: var(--c-text-dim); font-style: italic; font-family: var(--f-serif); font-size: 1.2rem; } .article-body code { font-family: var(--f-mono); background: var(--c-bg-3); padding: 0.12em 0.4em; border-radius: var(--r-sm); font-size: 0.92em; color: var(--c-accent-2); } .article-body pre { background: var(--c-bg-3); border: 1px solid var(--c-border); padding: 1.2rem; overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--r-md); } .article-body pre code { background: transparent; padding: 0; color: var(--c-text); } /* forms */ .form-wrap { max-width: 520px; margin: 4rem auto; background: rgba(11, 15, 21, 0.6); border: 1px solid var(--c-border); padding: 3rem; border-radius: var(--r-md); position: relative; } .form-wrap::before { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); padding: 1px; background: linear-gradient(180deg, rgba(201,164,92,0.3), transparent 40%); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .form-wrap h1, .form-wrap h2 { margin-bottom: 0.4em; } .form-wrap .lead { color: var(--c-text-dim); margin-bottom: 2rem; } .field { margin-bottom: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; } .field label { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text-dim); } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="datetime-local"], .field textarea, input[type="text"], input[type="email"], input[type="password"], input[type="datetime-local"], textarea { background: var(--c-bg); border: 1px solid var(--c-border-strong); color: var(--c-text); padding: 0.85rem 1rem; border-radius: var(--r-sm); font-family: var(--f-sans); font-size: 1rem; transition: border-color 160ms ease, box-shadow 160ms ease; width: 100%; } textarea { min-height: 220px; font-family: var(--f-mono); font-size: 0.95rem; line-height: 1.7; } input:focus, textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(201, 164, 92, 0.1); } .form-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1.5rem; } .form-footer { margin-top: 2rem; text-align: center; color: var(--c-text-dim); font-size: 0.9rem; } .error-summary { border: 1px solid rgba(182, 87, 78, 0.5); background: rgba(182, 87, 78, 0.08); padding: 1rem 1.2rem; border-radius: var(--r-sm); margin-bottom: 1.5rem; color: var(--c-danger); font-family: var(--f-mono); font-size: 0.85rem; } .error-summary h4 { color: var(--c-danger); margin: 0 0 0.4rem; } /* flash */ .flash-wrap { padding-top: 1.5rem; } .flash { padding: 0.8rem 1.2rem; border-radius: var(--r-sm); border: 1px solid var(--c-border-strong); font-family: var(--f-mono); font-size: 0.85rem; letter-spacing: 0.04em; margin: 0 0 0.6rem; } .flash-notice { color: var(--c-success); border-color: rgba(111, 155, 122, 0.4); background: rgba(111,155,122,0.06); } .flash-alert { color: var(--c-danger); border-color: rgba(182, 87, 78, 0.4); background: rgba(182,87,78,0.06); } /* confirm dialog — styled replacement for the native turbo_confirm prompt */ .confirm-dialog { padding: 0; width: calc(100% - 3rem); max-width: 30rem; border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-bg-2); color: var(--c-text); box-shadow: var(--shadow-soft); } .confirm-dialog::backdrop { background: rgba(3, 5, 8, 0.72); backdrop-filter: blur(2px); } .confirm-dialog-card { margin: 0; padding: 1.6rem 1.6rem 1.35rem; display: flex; flex-direction: column; gap: 0.55rem; } .confirm-dialog-eyebrow { margin: 0; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text-faint); } .confirm-dialog-message { margin: 0; font-family: var(--f-serif); font-size: 1.3rem; line-height: 1.4; color: var(--c-text); } .confirm-dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.1rem; } /* Subtle fade-in; degrades to an instant appearance where @starting-style or transition-behavior is unsupported. */ .confirm-dialog, .confirm-dialog::backdrop { opacity: 0; transition: opacity 160ms ease, overlay 160ms ease allow-discrete, display 160ms ease allow-discrete; } .confirm-dialog[open], .confirm-dialog[open]::backdrop { opacity: 1; } @starting-style { .confirm-dialog[open], .confirm-dialog[open]::backdrop { opacity: 0; } } /* footer */ .site-footer { border-top: 1px solid var(--c-border); background: #05070a; padding: 4rem 0 1.5rem; margin-top: 6rem; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--c-border); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer-brand p { max-width: 40ch; margin-top: 1rem; } .footer-list { list-style: none; padding: 0; margin: 0; } .footer-list li { margin-bottom: 0.6rem; } .footer-list a { color: var(--c-text-dim); border: none; font-size: 0.92rem; } .footer-list a:hover { color: var(--c-accent); } .site-footer h4 { color: var(--c-text-dim); font-size: 0.72rem; letter-spacing: 0.26em; margin-bottom: 1.2rem; } .footer-bottom { padding-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* contact split */ .split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: start; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 2rem; } } .detail-list { list-style: none; padding: 0; margin: 0; } .detail-list li { padding: 1.2rem 0; border-top: 1px solid var(--c-border); display: grid; grid-template-columns: 140px 1fr; gap: 1.5rem; align-items: baseline; } .detail-list li:last-child { border-bottom: 1px solid var(--c-border); } .detail-list .key { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text-dim); } .detail-list .val { color: var(--c-text); } /* quote block */ .quote-block { border-left: 1px solid var(--c-accent); padding: 1rem 0 1rem 2rem; font-family: var(--f-serif); font-size: 1.6rem; line-height: 1.4; font-style: italic; color: var(--c-text); max-width: 40ch; } .quote-attr { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-text-dim); margin-top: 1rem; font-style: normal; } /* divider ornament */ .ornament { display: flex; align-items: center; gap: 1rem; margin: 3rem 0; color: var(--c-accent); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; justify-content: center; } .ornament::before, .ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--c-border-strong), transparent); } /* selection */ ::selection { background: rgba(201, 164, 92, 0.3); color: var(--c-text); } /* sign-in scene */ .auth-scene { min-height: 72vh; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; } /* "or" divider between the passphrase form and the passkey button */ .auth-divider { display: flex; align-items: center; gap: 0.8rem; margin: 1.5rem 0 1rem; } .auth-divider-line { flex: 1; height: 1px; background: var(--c-border); } .auth-divider-text { color: var(--c-text-muted); letter-spacing: 0.18em; text-transform: uppercase; } .auth-passkey-row { gap: 0.8rem; flex-wrap: wrap; } /* Passkey management on /account */ .passkey-list { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .passkey-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: rgba(11, 15, 21, 0.35); } .passkey-nick { font-family: var(--f-sans); font-size: 1rem; color: var(--c-text); } .passkey-add { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border); } .passkey-add h3 { letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.7rem; margin: 0 0 0.6rem; color: var(--c-text-muted); } /* show/edit actions */ .action-row { display: flex; gap: 1rem; flex-wrap: wrap; margin: 2rem 0; } /* terminal-ish list */ .terminal-list { list-style: none; padding: 0; margin: 0; } .terminal-list li { font-family: var(--f-mono); font-size: 0.9rem; color: var(--c-text-dim); padding: 0.4rem 0; padding-left: 1.4rem; position: relative; } .terminal-list li::before { content: "→"; position: absolute; left: 0; color: var(--c-accent); } /* ── Markdown article body ── */ .article-body img { max-width: 100%; height: auto; display: block; margin: 2rem auto; border: 1px solid var(--c-border); border-radius: var(--r-md); } .article-body ul, .article-body ol { padding-left: 1.5rem; margin: 0 0 1.4em; color: #c3c6cd; } .article-body li { margin-bottom: 0.4em; } .article-body hr { border: 0; height: 1px; background: var(--c-border); margin: 2.5rem 0; } .article-body table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.95rem; } .article-body th, .article-body td { border-bottom: 1px solid var(--c-border); padding: 0.6rem 0.8rem; text-align: left; } .article-body th { color: var(--c-text-dim); font-weight: 500; } .article-body a { color: var(--c-accent); border-bottom: 1px solid rgba(201, 164, 92, 0.3); } .article-body a:hover { color: var(--c-accent-2); border-bottom-color: var(--c-accent-2); } /* Rouge syntax highlighting — graphite/gold palette to match site */ .article-body pre.highlight { background: rgba(11, 15, 21, 0.95); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 1.1rem 1.3rem; overflow-x: auto; overscroll-behavior-x: contain; font-size: 0.88rem; line-height: 1.55; margin: 1.6em 0; } .article-body pre.highlight code { background: transparent; padding: 0; color: var(--c-text); font-family: var(--f-mono); } .highlight .c, .highlight .c1, .highlight .cm, .highlight .cs { color: var(--c-text-faint); font-style: italic; } .highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: var(--c-accent); } .highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx { color: var(--c-success); } .highlight .nf, .highlight .nc, .highlight .nn { color: var(--c-accent-2); } .highlight .nb, .highlight .bp { color: var(--c-info); } .highlight .o, .highlight .ow { color: var(--c-text-dim); } .highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo { color: var(--c-warning); } .highlight .err { color: var(--c-danger); } .highlight .p { color: var(--c-text); } .highlight .gh, .highlight .gu { color: var(--c-accent); font-weight: 500; } .highlight .gd { color: var(--c-danger); background: rgba(182, 87, 78, 0.06); } .highlight .gi { color: var(--c-success); background: rgba(111, 155, 122, 0.06); } /* Image attachments list in the post editor */ .image-attachments { list-style: none; padding: 0; margin: 0.8rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; } .image-attachments li { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.8rem; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: rgba(11, 15, 21, 0.4); } .image-attachments-index { font-family: var(--f-mono); font-size: 0.78rem; color: var(--c-accent); min-width: 1.5rem; } .image-attachments-name { flex: 1; color: var(--c-text-dim); word-break: break-all; } .image-attachments code { font-size: 0.78rem; color: var(--c-accent); background: transparent; padding: 0; } /* ── Two-factor setup ── */ .otp-qr { background: #fff; padding: 1rem; border-radius: var(--r-md); margin: 0 auto 1.5rem; max-width: 256px; } .otp-qr svg { display: block; width: 100%; height: auto; } .otp-secret { background: rgba(11, 15, 21, 0.6); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 0.7rem 0.9rem; word-break: break-all; color: var(--c-accent); margin-bottom: 1.5rem; } .recovery-codes { list-style: none; padding: 1rem 1.4rem; margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.45rem 1.5rem; background: rgba(11, 15, 21, 0.6); border: 1px solid var(--c-border); border-radius: var(--r-md); } .recovery-codes li { font-size: 0.95rem; letter-spacing: 0.04em; color: var(--c-accent-2); } @media (max-width: 500px) { .recovery-codes { grid-template-columns: 1fr; } } /* ── Form & content layout helpers ── */ /* form pages: section padding + narrow content well */ .section-form { padding: 4rem 0; } .section-narrow { max-width: 48rem; } .form-wrap-narrow { max-width: 780px; } /* centered prose / CTA block within a section */ .text-block-center { text-align: center; max-width: 60ch; margin: 0 auto; } .action-row.center { justify-content: center; margin-top: 2.5rem; } /* empty-state card (e.g. blog index when no posts) */ .empty-state { text-align: center; padding: 4rem 2rem; } /* checkbox-with-label inline row (form labels containing a checkbox) */ .checkbox-row { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; } /* tighter two-column grid for form fields side by side */ .grid-2.grid-2-tight { gap: 1rem; } /* user listing row variants */ .user-row-name { margin: 0; } .user-row-meta { margin-top: 0.25rem; } .user-actions { display: flex; align-items: center; gap: 0.5rem; } /* small contextual spacing */ .post-byline { margin-top: 0.6rem; } .contact-fallback { margin-top: 0.75rem; } /* ── Responsive ── */ /* nav: wraps below brand; sign-in stays on brand row (right) */ @media (max-width: 700px) { .header-inner { flex-wrap: wrap; gap: 0; padding-top: 0.85rem; padding-bottom: 0; } /* sign-in sits at top-right on the brand row */ .site-utility { order: 1; margin-left: auto; } /* nav drops to its own full-width row */ .site-nav { order: 10; width: 100%; margin-left: 0; gap: 1rem; padding: 0.7rem 0 0.85rem; border-top: 1px solid var(--c-border); margin-top: 0.7rem; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .site-nav::-webkit-scrollbar { display: none; } /* tighter type so all 4 labels fit ~360px without scrolling */ .site-nav a { font-size: 0.72rem; letter-spacing: 0.10em; } } /* hero and section vertical rhythm on phones */ @media (max-width: 600px) { .hero { padding: 3.5rem 0 2.5rem; } .section { padding: 2.5rem 0; } .site-footer { padding-top: 3rem; margin-top: 4rem; } .form-wrap { padding: 2rem 1.5rem; margin-top: 2rem; margin-bottom: 2rem; } } /* footer: single column below 500 px (already 2-col at 900px) */ /* detail-list: collapse key/val to stacked rows on very narrow screens */ @media (max-width: 500px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .detail-list li { grid-template-columns: 1fr; gap: 0.25rem; } } /* ── Chinezen scoreboard ───────────────────────────────────────────────── */ .chinezen-header { padding-top: 4rem; padding-bottom: 1.5rem; } .chinezen-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .chinezen-title-row h1 { margin-bottom: 0.5rem; font-size: clamp(2rem, 4vw, 2.8rem); } .chinezen-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; } .chinezen-live { color: var(--c-accent); } /* The audio toggle uses an emoji + label; let the letterspacing relax a touch so the headphone glyph doesn't crowd "Audio aan/uit". */ .chinezen-voice-toggle { letter-spacing: 0.12em; } .chinezen-voice-toggle[aria-pressed="true"] { color: var(--c-accent-2); border-color: var(--c-accent); } .chinezen-board { padding: 1rem 0 3rem; } .chinezen-table-wrap { border: 1px solid var(--c-border); border-radius: var(--r-md); /* Vertical AND horizontal scroll inside the wrap. Going through the wrap (instead of letting the page scroll) is what makes the sticky thead and totals row actually stick — sticky binds to the nearest scrolling ancestor. */ overflow: auto; /* Fixed cap so the score table doesn't keep growing as more rounds pile up. ~5 round rows visible (header ~30px + 5 × 38px + totals ~40px = ~260px) + a bit of breathing room. */ max-height: 280px; background: rgba(11, 15, 21, 0.5); /* iOS Safari: keep the table touch-scroll friendly. */ -webkit-overflow-scrolling: touch; /* Stop scroll-chaining: when the inner table reaches its top/bottom, don't hand the momentum off to the page (which reads as a jump / shudder on touch devices). */ overscroll-behavior: contain; } .chinezen-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-family: var(--f-mono); font-size: 0.92rem; } .chinezen-table th, .chinezen-table td { padding: 0.6rem 0.9rem; text-align: right; border-bottom: 1px solid var(--c-border); } .chinezen-table th { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-dim); font-weight: 500; /* Opaque background is required so scrolling rows don't bleed through the sticky header. */ background: rgba(11, 15, 21, 0.96); position: sticky; top: 0; z-index: 3; } .chinezen-table .num-col, .chinezen-table .ruilen-col { text-align: center; color: var(--c-text-dim); width: 1%; white-space: nowrap; } .chinezen-table tbody tr:hover { background: rgba(201, 164, 92, 0.04); } .chinezen-table .neg { color: var(--c-danger); } .chinezen-table .pos { color: var(--c-success); } /* Pin the running point totals to the bottom of the scrolling wrap so the user can see each player's tally while paging through old rounds. */ .chinezen-totals-row td { background: rgba(11, 15, 21, 0.96); border-top: 1px solid var(--c-border-strong); font-size: 1rem; letter-spacing: 0.04em; position: sticky; bottom: 0; z-index: 2; } .chinezen-empty-row td { text-align: center !important; padding: 2rem 1rem; color: var(--c-text-faint); } .chinezen-add-round { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: rgba(11, 15, 21, 0.5); } .chinezen-add-round h3 { font-family: var(--f-sans); font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 1rem; } .chinezen-add-row { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: flex-end; } .chinezen-swap-field { width: 100px; } .chinezen-score-input { text-align: right; font-family: var(--f-mono); } /* Draft-round panel: per-player rows where each player saves their own score independently. Owner-only inputs glow gold; locked seats show the saved value as plain text or "waiting" until that player submits. */ .chinezen-draft .chinezen-draft-tag { display: inline-block; margin-left: 0.6rem; padding: 0.05rem 0.45rem; font-size: 0.65rem; font-family: var(--f-mono); letter-spacing: 0.12em; color: var(--c-accent); border: 1px solid rgba(201, 164, 92, 0.4); border-radius: 999px; background: rgba(201, 164, 92, 0.08); text-transform: uppercase; } .chinezen-draft-rows { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .chinezen-draft-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.8rem; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: rgba(11, 15, 21, 0.35); } .chinezen-draft-row.is-mine { border-color: rgba(201, 164, 92, 0.45); background: rgba(201, 164, 92, 0.06); } .chinezen-draft-row.is-sat-out { opacity: 0.55; border-style: dashed; } .chinezen-draft-name { flex: 1; font-family: var(--f-sans); font-size: 0.95rem; color: var(--c-text); } .chinezen-sitout-toggle { white-space: nowrap; } /* Sat-out player's cell in the score table: a faint dot, not a 0, so it reads as "didn't play" rather than "scored zero". */ .chinezen-table td.sat-out-cell { color: var(--c-text-faint); } .chinezen-draft-form { display: flex; align-items: center; gap: 0.4rem; margin: 0; } .chinezen-draft-form .chinezen-score-input { width: 90px; } .chinezen-draft-saved { min-width: 90px; text-align: right; font-family: var(--f-mono); } /* Stand panel — final settlement */ .chinezen-stand { padding-bottom: 4rem; } .chinezen-stand .ornament { margin-bottom: 1.5rem; } .chinezen-stand-table { width: 100%; max-width: 520px; margin: 0 auto; border-collapse: collapse; border: 1px solid var(--c-border); background: rgba(11, 15, 21, 0.5); border-radius: var(--r-md); } .chinezen-stand-table th, .chinezen-stand-table td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--c-border); text-align: left; } .chinezen-stand-table th { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-text-dim); font-weight: 500; } .chinezen-stand-table .num { text-align: right; } .chinezen-stand-table .neg { color: var(--c-danger); } .chinezen-stand-table .pos { color: var(--c-success); } .chinezen-stand-table .chinezen-stand-totals td { background: rgba(11, 15, 21, 0.85); border-top: 1px solid var(--c-border-strong); font-family: var(--f-mono); } .chinezen-stand p { margin-top: 1rem; text-align: center; } /* Player picker on /chinezen/new */ .player-slots { display: grid; gap: 0.6rem; margin-top: 0.6rem; } .player-slot { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 0.6rem; align-items: center; } .player-slot-num { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--c-accent); width: 2rem; } @media (max-width: 600px) { .player-slot { grid-template-columns: auto 1fr; } .player-slot .player-slot-name, .player-slot > span:nth-child(3) { grid-column: 2 / 3; } } /* Settle-up payments list (after game ends) */ .chinezen-settle { padding-bottom: 4rem; } .chinezen-settle .ornament { margin-bottom: 1.5rem; } .chinezen-settlement-list { list-style: none; padding: 0; margin: 0 auto; max-width: 540px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: rgba(11, 15, 21, 0.5); } .chinezen-settlement-list li { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 1rem; align-items: center; padding: 0.75rem 1.2rem; border-bottom: 1px solid var(--c-border); } .chinezen-settlement-list li:last-child { border-bottom: 0; } .settle-from { text-align: right; color: var(--c-danger); font-family: var(--f-serif); font-size: 1.05rem; } .settle-to { color: var(--c-success); font-family: var(--f-serif); font-size: 1.05rem; } .settle-arrow { color: var(--c-text-faint); font-size: 1rem; } .settle-amt { color: var(--c-accent); font-weight: 500; text-align: right; font-size: 0.95rem; min-width: 5rem; } .chinezen-settle p { text-align: center; margin-top: 1rem; } @media (max-width: 500px) { .chinezen-settlement-list li { grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; gap: 0.3rem 0.6rem; } .settle-amt { grid-column: 1 / -1; text-align: center; } } /* Chinezen dealer rotation: column + per-row dealer cell highlight */ .chinezen-table .dealer-col { text-align: left; font-family: var(--f-sans); font-size: 0.85rem; color: var(--c-text); white-space: nowrap; } .chinezen-table thead .dealer-col, .chinezen-table thead th.dealer-col { text-align: left; } .chinezen-table td.is-dealer { position: relative; background: rgba(201, 164, 92, 0.06); } .chinezen-table td.is-dealer::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 2px; background: var(--c-accent); } .chinezen-dealer-tag { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); margin-left: 0.6rem; padding: 0.2rem 0.55rem; border: 1px solid var(--c-border-strong); border-radius: var(--r-sm); vertical-align: middle; } .chinezen-dealer-tag.is-flush { margin-left: 0; } /* Chinezen voided round row — dimmed and struck through */ .chinezen-table tr.voided-row td { opacity: 0.45; text-decoration: line-through; font-style: italic; } .chinezen-table tr.voided-row td.dealer-col { text-decoration: none; font-style: normal; opacity: 0.85; } .voided-tag { font-family: var(--f-mono); font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-danger); margin-left: 0.5rem; padding: 0.1rem 0.4rem; border: 1px solid rgba(182, 87, 78, 0.4); border-radius: var(--r-sm); vertical-align: middle; } .voided-toggle { margin-left: 0.5rem; vertical-align: middle; padding: 0.25rem 0.55rem !important; font-size: 0.62rem !important; letter-spacing: 0.14em !important; } /* Chinezen settle-up — payment row with EPC-QR or mailto fallback */ .chinezen-settlement-list li { display: block; /* we now host an inner grid + collapsible QR */ padding: 0; } .settle-summary { display: grid; grid-template-columns: 1fr auto 1fr auto; grid-template-rows: auto auto; gap: 0.5rem 1rem; align-items: center; padding: 0.75rem 1.2rem; } .settle-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; } .settle-pay { display: inline-block; } .settle-pay > summary { cursor: pointer; list-style: none; display: inline-block; } .settle-pay > summary::-webkit-details-marker { display: none; } .settle-pay[open] > summary { background: rgba(201, 164, 92, 0.08); } .settle-qr { margin-top: 0.8rem; padding: 1rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: rgba(11, 15, 21, 0.8); text-align: center; width: 100%; } /* Phone-to-phone scanning sweet spot is ~220-260px. Above that, the scanning camera has to back away so far it can't focus on the modules and Bunq/ING/ABN refuse the read. width:100% + max-width keeps the QR scannable on any viewport. */ .settle-qr svg { background: #fff; padding: 0.6rem; border-radius: var(--r-sm); display: inline-block; width: 100%; max-width: 240px; height: auto; } .settle-qr p { margin: 0.7rem 0 0; } @media (max-width: 600px) { .settle-summary { grid-template-columns: 1fr auto 1fr; } .settle-summary .settle-amt { grid-column: 1 / -1; text-align: center; } } /* Chinezen — preset chips on the New-game form */ .preset-chips-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1rem 0 0.5rem; } .preset-chip { padding: 0.4rem 0.9rem !important; font-size: 0.7rem !important; } .preset-chip.active { border-color: var(--c-accent) !important; background: rgba(201, 164, 92, 0.1) !important; color: var(--c-accent-2) !important; } .preset-manage { margin-left: auto; border: none !important; font-size: 0.72rem !important; } /* Chinezen — cumulative trend chart */ .chinezen-trend { padding-bottom: 2.5rem; } .chinezen-trend .ornament { margin-bottom: 1.5rem; } .chinezen-chart { border: 1px solid var(--c-border); background: rgba(11, 15, 21, 0.5); border-radius: var(--r-md); padding: 1rem 1.2rem 1.2rem; max-width: 800px; margin: 0 auto; } .chinezen-chart-svg { display: block; width: 100%; height: auto; } .chinezen-chart-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; justify-content: center; margin-top: 0.6rem; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--c-text-dim); } .chinezen-chart-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; } .chinezen-chart-legend-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; } .center-text { text-align: center; } .mt-1 { margin-top: 1rem; } /* Chinezen lifetime-stats cards + player-name link in score table */ .chinezen-stats-grid .card { padding: 1.5rem; } .chinezen-stat-num { font-family: var(--f-serif); font-size: 2.4rem; margin: 0.4rem 0; line-height: 1; } .chinezen-stat-num.neg { color: var(--c-danger); } .chinezen-stat-num.pos { color: var(--c-success); } .chinezen-player-link { color: inherit; border: none; border-bottom: 1px dotted var(--c-border-strong); } .chinezen-player-link:hover { color: var(--c-accent); border-color: var(--c-accent); } .btn[disabled], input[type="submit"][disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* ────────────────────────────────────────────────────────────────────── Chinezen scoreboard SVG chart — structural colours. Carried on classes (not inline attrs) so the light theme can flip them. Dark values below match the originals, so dark mode is unchanged. ────────────────────────────────────────────────────────────────────── */ .chinezen-chart-svg .chz-grid { stroke: #1f2733; } .chinezen-chart-svg .chz-baseline { stroke: #2c3748; } .chinezen-chart-svg .chz-axis { fill: #5a606c; } /* ────────────────────────────────────────────────────────────────────── Chinezen LIGHT THEME. Entirely additive: every rule is scoped to body.chinezen-light, so the dark default is byte-for-byte untouched. Most components re-theme for free by redefining the shared colour variables; the handful of hardcoded dark surfaces are overridden explicitly below. ────────────────────────────────────────────────────────────────────── */ body.chinezen-light { --c-bg: #f4f1ea; --c-bg-2: #ece7db; --c-bg-3: #e3ddcd; --c-border: #d9d1bf; --c-border-strong: #c3b89f; --c-text: #211e17; --c-text-dim: #5c5647; --c-text-faint: #8b8472; --c-accent: #9a7b2e; --c-accent-2: #7c6320; --c-danger: #9e4339; --c-success: #4f7a5b; } /* Light page backdrop in place of the dark fixed gradient. */ body.chinezen-light::before { background: radial-gradient(1200px 600px at 85% -10%, rgba(154, 123, 46, 0.07), transparent 60%), radial-gradient(900px 500px at -10% 20%, rgba(122, 162, 168, 0.06), transparent 55%), linear-gradient(180deg, #f6f3ec 0%, #efe9dc 100%); } /* The white-dot noise reads as grime on a light bg; the gold grid is fine. */ body.chinezen-light .noise { opacity: 0.06; } /* Frosted header: its background colour is hardcoded dark, so flip it. */ body.chinezen-light .site-header { background: rgba(244, 241, 234, 0.82); } /* Chinezen surfaces whose backgrounds are hardcoded dark rgba. */ body.chinezen-light .chinezen-table-wrap, body.chinezen-light .chinezen-add-round, body.chinezen-light .chinezen-chart, body.chinezen-light .settle-qr { background: var(--c-bg-2); } body.chinezen-light .chinezen-table th, body.chinezen-light .chinezen-totals-row td, body.chinezen-light .chinezen-stand-table th, body.chinezen-light .chinezen-stand-table .chinezen-stand-totals td { background: var(--c-bg-3); } body.chinezen-light .chinezen-draft-row { background: var(--c-bg); } body.chinezen-light .chinezen-draft-row.is-mine { background: rgba(154, 123, 46, 0.10); } body.chinezen-light .chinezen-table tbody tr:hover { background: rgba(154, 123, 46, 0.07); } body.chinezen-light .chinezen-table td.is-dealer { background: rgba(154, 123, 46, 0.10); } /* QR stays a white tile — already light, just tighten its border. */ body.chinezen-light .settle-qr svg { border: 1px solid var(--c-border); } /* Chart structural lines/text for light. */ body.chinezen-light .chinezen-chart-svg .chz-grid { stroke: #d9d1bf; } body.chinezen-light .chinezen-chart-svg .chz-baseline { stroke: #c3b89f; } body.chinezen-light .chinezen-chart-svg .chz-axis { fill: #8b8472; } /* Active-player count badge on the draft panel — prominent so it's clear at a glance whether the hand has a dealable number of players (2–4). */ .chinezen-active-count { font-family: var(--f-mono); font-size: 0.85rem; letter-spacing: 0.04em; margin: 0.4rem 0 0.2rem; padding: 0.45rem 0.8rem; border: 1px solid var(--c-border); border-radius: var(--r-sm); display: inline-block; } .chinezen-active-num { font-weight: 600; color: var(--c-text); } .chinezen-active-ok { border-color: rgba(111, 155, 122, 0.5); background: rgba(111, 155, 122, 0.08); } .chinezen-active-too-few, .chinezen-active-too-many { border-color: rgba(182, 87, 78, 0.55); background: rgba(182, 87, 78, 0.10); } .chinezen-active-warn { color: var(--c-danger); } /* Add-player disclosure under the round panel. */ .chinezen-add-player { margin-top: 1.5rem; } .chinezen-add-player > details > summary { cursor: pointer; list-style: none; display: inline-block; } .chinezen-add-player > details > summary::-webkit-details-marker { display: none; } .chinezen-add-player-form { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: flex-end; margin: 1rem 0 0.6rem; } .chinezen-add-player-form .field { margin: 0; } /* Table roster — who's present vs away during a long session. */ .chinezen-roster { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 1.5rem 0 0.5rem; padding: 1rem 1.2rem; border: 1px solid var(--c-border); border-radius: var(--r-md); background: rgba(11, 15, 21, 0.35); } .chinezen-roster-group { flex: 1 1 240px; } .chinezen-roster-group h4 { font-size: 0.72rem; letter-spacing: 0.16em; margin: 0 0 0.6rem; } .chinezen-roster-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .chinezen-roster-list li { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .chinezen-roster-name { font-family: var(--f-sans); color: var(--c-text); } .chinezen-roster-away .chinezen-roster-name { color: var(--c-text-dim); } .chinezen-roster-away p { margin: 0.6rem 0 0; } /* Away players in the score table + stand: dimmed and tagged, so the people currently at the table stand out. History stays visible. */ .chinezen-table th.is-away-col, .chinezen-stand-table tr.is-away-row td { opacity: 0.5; } .chinezen-away-tag { display: inline-block; margin-left: 0.35rem; padding: 0.02rem 0.35rem; font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-dim); border: 1px solid var(--c-border-strong); border-radius: 999px; vertical-align: middle; } /* ── Header: stop the utility bar running off a phone screen ─────────────── * * .header-inner and .site-utility were both non-wrapping flex rows, so on a * narrow viewport the "Signed in as …" label and the Sign out button pushed * past the right edge — cut off, and dragging the whole document sideways * with them. Wrapping costs a little height and buys back the 230-odd pixels * that were off-screen. Applies to every page, not just the scoreboard. */ @media (max-width: 700px) { .header-inner { flex-wrap: wrap; gap: 0.75rem 1rem; } .site-utility { flex-wrap: wrap; gap: 0.5rem; min-width: 0; } .site-nav { flex-wrap: wrap; gap: 0.75rem 1.25rem; min-width: 0; } .util-label { flex: 1 1 100%; order: -1; } } /* ── Chinezen: the game meta line ───────────────────────────────────────── * * One line on a phone: the stake and the state stay, the start time and the * beheerder drop out below 700px. Full line everywhere there is room for it. */ .chinezen-meta { margin-top: 0.25rem; } /* ── Chinezen: mobile tab bar ────────────────────────────────────────────── * * The scoreboard is five stacked sections, which on a phone means scrolling * past the board to reach the round you are trying to score. Below 700px the * sections become tabs; above it, nothing here applies and the page keeps its * full-height layout. * * Visibility is CSS's job, not the controller's. The controller only marks * which panel is active and sets data-tabs-ready once it has, so a browser * without JavaScript never hides anything. */ .chinezen-tabs { display: none; } @media (max-width: 700px) { .chinezen-tabs { display: block; position: sticky; top: 0; z-index: 20; padding-top: 0.5rem; padding-bottom: 0.5rem; /* Opaque: rows scroll underneath this. */ background: var(--c-bg); border-bottom: 1px solid var(--c-border); } .chinezen-tabs-inner { display: flex; gap: 0.4rem; overflow-x: auto; /* A fifth tab can appear (Afrekenen); let it scroll rather than wrap into a second row that pushes the board further down. */ scrollbar-width: none; -webkit-overflow-scrolling: touch; } .chinezen-tabs-inner::-webkit-scrollbar { display: none; } .chinezen-tab { flex: 1 0 auto; min-height: 2.75rem; /* comfortable thumb target */ padding: 0.55rem 1rem; background: transparent; border: 1px solid var(--c-border); border-radius: var(--r-md); color: var(--c-text-dim); font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; } .chinezen-tab[aria-selected="true"] { color: var(--c-accent-2); border-color: var(--c-accent); background: rgba(201, 164, 92, 0.1); } .chinezen-tab:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } [data-tabs-ready] .chinezen-panel:not(.is-active) { display: none; } /* A panel now owns the screen, so the board can use the height it was capped out of when five sections shared one scroll. */ .chinezen-panel.is-active .chinezen-table-wrap { max-height: 65vh; } /* The round panel is the one you hold in your hand all evening, so it gets the tightest treatment on the page. Each player was 131px tall — name on one line, the score field on a second, the sit-out button on a third — which put five players at 678px on a 664px screen. One line each instead: name truncates, the number field is only as wide as the numbers it holds, and the two controls shrink to compact chips. */ .chinezen-draft-rows { gap: 0.35rem; } .chinezen-draft-row { flex-wrap: nowrap; gap: 0.45rem; padding: 0.3rem 0.45rem; } .chinezen-draft-name { font-size: 0.88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chinezen-draft-form, .chinezen-draft-saved { width: auto; } .chinezen-draft-form { gap: 0.3rem; } .chinezen-draft-form .chinezen-score-input { width: 3.5rem; padding: 0.35rem 0.4rem; text-align: right; } .chinezen-draft-saved { min-width: 2.25rem; text-align: right; } /* Compact, but not smaller than a thumb. The controls came out 23px tall on the first pass — comfortably mis-tappable at a card table. A 2.4rem floor puts them near the 44px guidance while the row still lands around 48px, against the 131px it started at. */ .chinezen-draft-form .btn, .chinezen-sitout-toggle { min-height: 2.4rem; padding: 0.3rem 0.6rem !important; font-size: 0.62rem !important; letter-spacing: 0.06em !important; } .chinezen-draft-form .chinezen-score-input { min-height: 2.4rem; } /* Half the panel was still frame rather than content: 275px of heading, help text and buttons around 272px of actual player rows. The static explainer above the rows goes — which row is yours is already said by the gold border on it, and the sentence never changes. The line *below* the rows stays: "row sum must be 0" is why Submit is disabled, and that is live information you need every round. */ .chinezen-draft > p.muted:first-of-type { display: none; } .chinezen-draft h3 { margin-bottom: 0.5rem; } .chinezen-draft-rows { margin-bottom: 0.6rem; } .chinezen-add-round .form-actions { margin-top: 0.6rem; gap: 0.4rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .chinezen-add-round .form-actions::-webkit-scrollbar { display: none; } .chinezen-add-round .form-actions > * { flex: 0 0 auto; } /* The round heading wrapped its four tags onto two lines. */ .chinezen-add-round h3 { font-size: 1rem; gap: 0.35rem; } .chinezen-draft-tag, .chinezen-dealer-tag { font-size: 0.58rem; padding: 0.12rem 0.4rem; } .chinezen-add-round { padding: 0.9rem 0.8rem; } .chinezen-add-round > p.mono { font-size: 0.68rem; line-height: 1.45; } /* The score table is about players and numbers; # / Ruilen / Dealer were taking well over half a 390px screen and pushing the columns that matter off the right edge. Ruilen goes (the swap for the open round is stated in the Ronde panel, where it is actually acted on), the cells tighten, and the per-row misdeal toggle shrinks to a compact control. */ .chinezen-table th.ruilen-col, .chinezen-table td.ruilen-col { display: none; } .chinezen-table th, .chinezen-table td { padding: 0.5rem 0.55rem; } .chinezen-table .voided-toggle { display: block; margin-top: 0.2rem; padding: 0.15rem 0.4rem !important; font-size: 0.6rem !important; letter-spacing: 0.08em !important; } .chinezen-table .dealer-col { max-width: 8.5rem; } /* Keep the round number in view while scrolling sideways through players — without it the columns lose their anchor on a narrow screen. */ .chinezen-table th.num-col, .chinezen-table td.num-col { position: sticky; left: 0; z-index: 2; background: rgba(11, 15, 21, 0.96); } .chinezen-table thead th.num-col { z-index: 4; } body.chinezen-light .chinezen-table th.num-col, body.chinezen-light .chinezen-table td.num-col { background: #fdfcfa; } /* Five management buttons wrapped onto two rows above the fold. One scrollable row keeps them reachable without eating the screen. */ /* Five buttons wanted 598px of a 342px row, so two of them were off-screen behind a swipe nobody would guess was there. The two toggles already carry a glyph, so on a phone they become icon-only and the rest tightens. The words are hidden visually rather than removed: they stay the buttons' accessible names, which an icon-only control would otherwise lose. */ .chinezen-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; gap: 0.35rem; } .chinezen-actions .btn { padding: 0.5rem 0.6rem !important; font-size: 0.62rem !important; letter-spacing: 0.08em !important; } .chinezen-actions .btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .chinezen-actions .btn-icon { font-size: 0.95rem; line-height: 1; } .chinezen-actions::-webkit-scrollbar { display: none; } .chinezen-actions > * { flex: 0 0 auto; } /* The marketing nav is dead weight while scoring a game. The utility bar (Users / Chinezen / Sign out) stays — that is how you leave the page. */ body.chinezen-focus .site-nav { display: none; } /* "Signed in as " costs a whole row of a 664px screen to tell you something you know. The name is still reachable — the Users button and the account page are one tap away — and it comes back the moment you leave the scoreboard. */ body.chinezen-focus .util-label { display: none; } /* Before this, the header block alone ate 340px of a 664px screen and the first row of content started below the fold — measured, not guessed. The title, the meta line and the management buttons are all reference material; the tab bar and the panel under it are what you came for. */ .chinezen-header { padding-top: 1rem; padding-bottom: 0.5rem; } .chinezen-title-row { gap: 0.75rem; } .chinezen-title-row h1 { font-size: 1.75rem; margin-bottom: 0.3rem; } .chinezen-header .hero-kicker { margin-bottom: 0.35rem; } .chinezen-header .mono.small, .chinezen-meta { font-size: 0.72rem; line-height: 1.5; } .chinezen-meta-detail { display: none; } .chinezen-title-row h1 { font-size: 1.5rem; } .chinezen-header .hero-kicker { font-size: 0.62rem; margin-bottom: 0.25rem; } .chinezen-board { padding-top: 0.75rem; } .chinezen-trend, .chinezen-stand, .chinezen-settle { padding-bottom: 2rem; } /* A section whose panels are all hidden still contributed its own padding — 60px of nothing above the Stand and Afrekenen tabs. :has() lets the section collapse when it holds no active panel; where it is unsupported the page simply keeps the old spacing. */ [data-tabs-ready] .chinezen-board:not(:has(.chinezen-panel.is-active)) { padding-top: 0; padding-bottom: 0; } .chinezen-panel .ornament { margin-top: 1.25rem; } } @media (prefers-reduced-motion: reduce) { .chinezen-tab { transition: none; } }