/* ════════════════════════════════════════════ King Digital — client portal ════════════════════════════════════════════ Built on the site's design tokens (DESIGN_SYSTEM.md, branch redesign-multipage). The token block below is a DUPLICATE of the site's, kept deliberately small. Why not import the site's main.css: it is ~330 KB of marketing-page component CSS — cursor, curtain, marquee, carousels — none of which the portal loads (ADR-005). Pulling it in to reach a 40-line :root would ship all of it. The cost is that these values can drift from the design system. Worth fixing properly by extracting a shared tokens.css that both consume; until then, any change here MUST be made in DESIGN_SYSTEM.md in the same commit. ════════════════════════════════════════════ */ :root { --ink: #0a0a0a; --dark: #161616; --card-dark: #131317; --black: #000; --paper: #ffffff; --paper-dim: #f0f0f0; /* THE accent. Used literally, exactly as the site does — `--gold` in the site's CSS is parked to #0a0a0a and is NOT this. Never #eab308. */ --accent: #f5d347; --line: rgba(10, 10, 11, .12); --stroke-d: rgba(255, 255, 255, .5); /* Muted = the exact values .cta-pill.is-incomplete already uses on the site. Reused rather than re-picked, so "inactive" reads identically everywhere. */ --muted-ink: rgba(10, 10, 11, .32); --muted-line: rgba(10, 10, 11, .28); --stroke-hair: 1.5px; --stroke-icon: 2px; --shell: 1480px; --pad: clamp(20px, 4.4vw, 72px); --fs-sec: clamp(1.6rem, 3.2vw, 2.6rem); --fs-body: clamp(1rem, 1.05vw, 1.175rem); --ease: cubic-bezier(.22, 1, .36, 1); --ease-io: cubic-bezier(.76, 0, .24, 1); --font: "Albert Sans", system-ui, -apple-system, sans-serif; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; /* clip, never hidden — hidden makes Safari treat as the scroll container. The portal has no Lenis to break, but the rule is the same one the site learned and there is no reason to diverge. */ overflow-x: clip; } img { display: block; max-width: 100%; height: auto; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background-color: var(--accent); color: var(--ink); } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); } /* ── header ───────────────────────────────── */ .p-head { border-bottom: var(--stroke-hair) solid var(--line); padding-block: clamp(18px, 2.2vw, 28px); } .p-head__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .p-head__brand { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; } .p-head__brand span { font-weight: 500; opacity: .5; } .p-head__who { display: flex; align-items: center; gap: 18px; font-size: .9rem; } /* ── tabs ─────────────────────────────────── */ .p-tabs { display: flex; gap: clamp(18px, 2.4vw, 38px); border-bottom: var(--stroke-hair) solid var(--line); overflow-x: auto; scrollbar-width: none; } .p-tabs::-webkit-scrollbar { display: none; } .p-tabs a { position: relative; white-space: nowrap; padding-block: 18px; font-weight: 500; opacity: .5; transition: opacity .3s var(--ease); } .p-tabs a:hover { opacity: 1; } .p-tabs a[aria-current="page"] { opacity: 1; font-weight: 600; } .p-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--stroke-hair); background: var(--ink); } .p-tabs .p-tabs__count { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: .74rem; font-weight: 600; } /* ── page furniture ───────────────────────── */ .p-main { padding-block: clamp(32px, 5vw, 64px) clamp(64px, 9vw, 120px); } .p-title { font-size: var(--fs-sec); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; } .p-lead { margin-top: 10px; opacity: .7; max-width: 60ch; } .p-section { margin-top: clamp(32px, 4vw, 56px); } .p-section__title { font-size: 1.15rem; font-weight: 600; margin-bottom: 16px; } /* ── status badge — the four treatments ──── Meaning is carried by the LABEL; treatment reinforces whose turn it is. See docs/portal-ui.md. Never add a red or a green here. */ .p-badge { display: inline-flex; align-items: center; padding: .45em 1.05em; border-radius: 999px; font-weight: 500; font-size: .82rem; line-height: 1.15; /* macron headroom: "Apstiprināts" */ white-space: nowrap; } .p-badge--outline { box-shadow: inset 0 0 0 var(--stroke-hair) var(--ink); } .p-badge--filled { background: var(--ink); color: var(--paper); } .p-badge--accent { background: var(--accent); color: var(--ink); } .p-badge--muted { box-shadow: inset 0 0 0 var(--stroke-hair) var(--muted-line); color: var(--muted-ink); } /* ── table ────────────────────────────────── */ .p-table { width: 100%; border-collapse: collapse; } .p-table th { text-align: left; font-weight: 600; font-size: .84rem; padding: 0 16px 12px 0; border-bottom: var(--stroke-hair) solid var(--line); } .p-table td { padding: 16px 16px 16px 0; border-bottom: var(--stroke-hair) solid var(--line); } .p-table tbody tr { transition: background .3s var(--ease); } .p-table tbody tr:hover { background: var(--paper-dim); } .p-table .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; } .p-table a.row-link { font-weight: 500; } /* Below the system's primary breakpoint the table becomes stacked cards. Horizontal scroll would hide the status column — the one people came for. */ @media (max-width: 760px) { .p-table thead { display: none; } .p-table, .p-table tbody, .p-table tr, .p-table td { display: block; width: 100%; } .p-table tr { border: var(--stroke-hair) solid var(--line); border-radius: 18px; padding: 16px; margin-bottom: 14px; } .p-table td { border: 0; padding: 5px 0; display: flex; justify-content: space-between; gap: 16px; } .p-table td::before { content: attr(data-label); font-weight: 600; opacity: .55; } .p-table .num { text-align: right; } } /* ── cards ────────────────────────────────── */ .p-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .p-card { border: var(--stroke-hair) solid var(--line); border-radius: 22px; padding: clamp(20px, 2.2vw, 28px); } .p-card__title { font-weight: 600; font-size: 1.05rem; margin-bottom: 6px; } .p-card__meta { font-size: .86rem; opacity: .6; } .p-stats { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .p-stat { border: var(--stroke-hair) solid var(--line); border-radius: 22px; padding: 22px; } .p-stat__n { font-size: 2.2rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .p-stat__l { font-size: .86rem; opacity: .6; margin-top: 2px; } /* The one card that wants action gets the accent — same rule as the badges. */ .p-stat--act { background: var(--accent); border-color: transparent; } .p-stat--act .p-stat__l { opacity: .8; } /* ── flow / stepper ───────────────────────── */ .p-flow { display: flex; gap: 0; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; } .p-flow::-webkit-scrollbar { display: none; } .p-flow__step { flex: 1 0 150px; position: relative; padding-right: 18px; } .p-flow__dot { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 var(--stroke-hair) var(--ink); } .p-flow__step--done .p-flow__dot { background: var(--ink); } .p-flow__step--active .p-flow__dot { background: var(--accent); box-shadow: none; } .p-flow__step--blocked .p-flow__dot { box-shadow: inset 0 0 0 var(--stroke-hair) var(--muted-line); } .p-flow__bar { position: absolute; left: 15px; right: 0; top: 7px; height: var(--stroke-hair); background: var(--line); } .p-flow__step--done .p-flow__bar { background: var(--ink); } .p-flow__name { margin-top: 12px; font-weight: 500; font-size: .92rem; } .p-flow__when { font-size: .8rem; opacity: .55; } .p-flow__note { font-size: .8rem; opacity: .7; margin-top: 4px; padding-right: 12px; } .p-flow__step:last-child .p-flow__bar { display: none; } @media (max-width: 760px) { .p-flow { flex-direction: column; } .p-flow__step { flex: none; padding: 0 0 22px 26px; } .p-flow__dot { position: absolute; left: 0; top: 3px; } .p-flow__bar { left: 7px; right: auto; top: 18px; bottom: 0; width: var(--stroke-hair); height: auto; } .p-flow__name { margin-top: 0; } } /* ── buttons — the site's pill, without the GSAP layer ── */ .p-btn { display: inline-flex; align-items: center; justify-content: center; padding: .85em 1.9em; border-radius: 999px; font-weight: 500; line-height: 1.15; box-shadow: inset 0 0 0 var(--stroke-hair) var(--ink); transition: background .35s var(--ease), color .35s var(--ease); } .p-btn:hover { background: var(--ink); color: var(--paper); } .p-btn--primary { background: var(--ink); color: var(--paper); } .p-btn--primary:hover { background: var(--accent); color: var(--ink); box-shadow: none; } .p-btn--sm { padding: .55em 1.25em; font-size: .88rem; } /* ── forms — the site's underline field ───── */ .p-form { display: grid; gap: clamp(20px, 2.4vw, 32px); max-width: 720px; } .p-field { display: flex; flex-direction: column; gap: 8px; } .p-field label { font-size: .86rem; font-weight: 500; } .p-field input, .p-field select, .p-field textarea { font: inherit; color: inherit; background: none; width: 100%; border: 0; border-bottom: var(--stroke-hair) solid var(--line); padding: 10px 0; transition: border-color .3s var(--ease); } .p-field input:focus, .p-field select:focus, .p-field textarea:focus { outline: none; border-bottom-color: var(--ink); } .p-field textarea { min-height: 130px; resize: vertical; } .p-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .p-chips { display: flex; flex-wrap: wrap; gap: 10px; } .p-chip { position: relative; } .p-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; } .p-chip span { display: inline-flex; padding: .5em 1.2em; border-radius: 999px; box-shadow: inset 0 0 0 var(--stroke-hair) var(--ink); font-size: .88rem; transition: background .3s var(--ease), color .3s var(--ease); } .p-chip input:checked + span { background: var(--ink); color: var(--paper); } .p-chip input:focus-visible + span { box-shadow: inset 0 0 0 var(--stroke-icon) var(--ink); } /* ── notices ──────────────────────────────── */ .p-note { padding: 14px 18px; border-radius: 14px; background: var(--paper-dim); font-size: .92rem; } .p-note--act { background: var(--accent); } .p-errors { padding: 14px 18px; border-radius: 14px; box-shadow: inset 0 0 0 var(--stroke-hair) var(--ink); font-size: .92rem; } /* ── empty state ──────────────────────────── */ .p-empty { padding: clamp(36px, 5vw, 64px) 0; text-align: center; } .p-empty p { opacity: .6; margin-bottom: 20px; } /* ── thread ───────────────────────────────── */ .p-thread { display: grid; gap: 18px; margin-top: 24px; } .p-msg { border: var(--stroke-hair) solid var(--line); border-radius: 18px; padding: 18px; } .p-msg--staff { background: var(--paper-dim); border-color: transparent; } .p-msg__who { font-weight: 600; font-size: .88rem; margin-bottom: 4px; } .p-msg__when { font-size: .78rem; opacity: .5; } /* ── footer ───────────────────────────────── */ .p-foot { border-top: var(--stroke-hair) solid var(--line); padding-block: 28px; font-size: .84rem; opacity: .55; } @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ── admin management rows ───────────────── Dense inline forms for the staff side. Same tokens as everything else; the only new idea is the row, which exists because a full .p-form per field would make a client page metres long. */ .p-grid2 { display: grid; gap: clamp(16px, 2vw, 24px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .p-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: var(--stroke-hair) solid var(--line); } .p-row--sub { padding: 6px 0 6px 18px; border-bottom: 0; } .p-row--new { border-bottom: 0; padding-top: 14px; } .p-row__muted { font-size: .84rem; opacity: .55; } .p-row input[type=text], .p-row input[type=email], .p-row input[type=url], .p-row input[type=date], .p-row input[type=number], .p-row select { font: inherit; color: inherit; background: none; border: 0; border-bottom: var(--stroke-hair) solid var(--line); padding: 6px 0; min-width: 0; flex: 1 1 140px; } .p-row input:focus, .p-row select:focus { outline: none; border-bottom-color: var(--ink); } .p-w-xs { flex: 0 0 52px !important; } .p-block { border: var(--stroke-hair) solid var(--line); border-radius: 22px; padding: clamp(16px, 2vw, 24px); margin-bottom: 18px; } .p-sub { font-size: .92rem; font-weight: 600; margin: 18px 0 6px; opacity: .7; } .p-check { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; white-space: nowrap; } .p-check input { width: auto; flex: none; } @media (max-width: 760px) { .p-row { flex-direction: column; align-items: stretch; } .p-row--sub { padding-left: 0; } } /* ── dated axis ──────────────────────────── A slim time bar ABOVE the stepper, not instead of it. It answers "where are we in time"; the stepper below answers "what are the steps". One element doing both is what made the labels collide — a true-to-scale axis stacks clustered stages on top of each other. Gold marks today and the stage in progress, exactly as it marks "your move" everywhere else. Nothing new is introduced. */ .p-axis { /* Top room for the today pill so it never crowds the section heading; inline padding so a tick at 0% or 100% is not sliced by the container edge — they are centred on their position and half of one would hang out. */ margin: 4px 0 30px; padding: 10px 8px 0; } .p-axis__track { position: relative; height: 6px; border-radius: 999px; background: var(--line); } .p-axis__done { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--ink); } /* Ticks sit ON the bar, centred, so the bar reads as one object. */ .p-axis__tick { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 var(--stroke-hair) var(--ink); } .p-axis__tick--start { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--ink); box-shadow: none; } .p-axis__tick--done { background: var(--ink); box-shadow: none; } .p-axis__tick--active { background: var(--accent); box-shadow: none; width: 14px; height: 14px; margin: -7px 0 0 -7px; } .p-axis__tick--blocked { box-shadow: inset 0 0 0 var(--stroke-hair) var(--muted-line); } /* Today: a dot like the milestones, but RINGED in paper so it lifts off the bar and stays legible even when it lands on top of a stage dot. The ring is what separates "where we are" from "what is due". */ .p-axis__now { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--paper), inset 0 0 0 var(--stroke-hair) var(--ink); z-index: 2; } .p-axis__tick--end { background: var(--ink); box-shadow: none; } .p-axis__ends { display: flex; justify-content: space-between; margin-top: 12px; font-size: .78rem; opacity: .55; } @media (max-width: 760px) { .p-axis { margin-bottom: 22px; padding-top: 8px; } .p-axis__todaylab { font-size: .7rem; padding: 3px 8px; } }