/* ============================================================================ components.css - layer 3 of the design system. Consumes semantic tokens from tokens.css ONLY. There is not a single colour value in this file, which is what makes five themes cost ~10 lines each. Logical properties throughout (margin-inline, inset-inline, text-align:start), so flipping dir on is the entire RTL implementation. A pre-commit hook rejects margin-left / padding-right / left: / right: in .css and .html. ============================================================================ */ /* ============================================================ LAYER 3 - components. No colour literals below this line. Logical properties only (margin-inline, inset-inline, ...). ============================================================ */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--surface-base); color:var(--text-primary); font-family:var(--font-en); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); } [lang="ar"] body, body[lang="ar"], html[lang="ar"] body{ font-family:var(--font-ar); line-height:1.85; font-size:15.5px; } h1,h2,h3,h4{ margin:0; line-height:1.2; letter-spacing:-.02em; font-weight:700; } html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3{ font-family:var(--font-display-ar); letter-spacing:0; line-height:1.4; } p{ margin:0; } a{ color:var(--accent); text-decoration:none; } code,.mono,.num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; } .num{ font-family:var(--font-en); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } /* Numeric runs are isolated + forced LTR so signs, separators and units keep their order inside RTL prose. This is the single most common bilingual money bug. */ .num,.mono,code,.money,.mb .r .v,.stat .v,.stat .d,.countdown{ unicode-bidi:isolate; } .mb .r .v,.stat .v{ direction:ltr; } :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-sm); } .wrap{ max-inline-size:1180px; margin-inline:auto; padding-inline:20px; } .stack{ display:flex; flex-direction:column; } .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .between{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .grid{ display:grid; gap:16px; } .muted{ color:var(--text-secondary); } .dim{ color:var(--text-tertiary); } .tiny{ font-size:11.5px; } .sm{ font-size:13px; } .b{ font-weight:600; } .center{ text-align:center; } .icon-dir{ display:inline-block; transform:scaleX(var(--dir)); } /* ---------- top bar / theme switcher ---------- */ .topbar{ position:sticky; inset-block-start:0; z-index:50; background:color-mix(in oklab, var(--surface-raised) 82%, transparent); backdrop-filter:blur(14px) saturate(150%); border-block-end:1px solid var(--border-subtle); } .topbar-inner{ display:flex; align-items:center; gap:14px; padding-block:11px; flex-wrap:wrap; } .logo{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:17px; letter-spacing:-.03em; } .logo-mark{ inline-size:30px; block-size:30px; border-radius:9px; display:grid; place-items:center; background:linear-gradient(140deg, var(--accent), var(--accent-2)); color:var(--accent-contrast); font-size:15px; font-weight:800; box-shadow:var(--sh-accent); } .swatches{ display:flex; gap:6px; } .sw{ inline-size:26px; block-size:26px; border-radius:8px; cursor:pointer; padding:0; border:2px solid var(--border-default); position:relative; transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast); } .sw:hover{ transform:translateY(-2px); } .sw[aria-pressed="true"]{ border-color:var(--text-primary); transform:translateY(-2px); } .sw i{ position:absolute; inset:2px; border-radius:5px; display:block; } .seg{ display:inline-flex; background:var(--surface-sunken); border:1px solid var(--border-subtle); border-radius:var(--r-full); padding:3px; } .seg button{ border:0; background:transparent; color:var(--text-secondary); cursor:pointer; padding:5px 13px; border-radius:var(--r-full); font:inherit; font-size:12.5px; font-weight:600; transition:all var(--dur-fast) var(--ease); } .seg button[aria-pressed="true"]{ background:var(--surface-raised); color:var(--text-primary); box-shadow:var(--sh-1); } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-weight:600; font-size:14px; cursor:pointer; padding:10px 18px; border-radius:var(--r-md); border:1px solid transparent; min-block-size:42px; transition:all var(--dur-fast) var(--ease); white-space:nowrap; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--accent); color:var(--text-on-accent); box-shadow:var(--sh-accent); } .btn-primary:hover{ background:var(--accent-hover); } .btn-secondary{ background:var(--surface-raised); color:var(--text-primary); border-color:var(--border-default); box-shadow:var(--sh-1); } .btn-secondary:hover{ border-color:var(--border-strong); } .btn-ghost{ background:transparent; color:var(--accent); } .btn-ghost:hover{ background:var(--accent-subtle); } .btn-danger{ background:var(--danger); color:var(--text-on-accent); } .btn-grad{ background:linear-gradient(120deg,var(--accent),var(--accent-2)); color:var(--accent-contrast); box-shadow:var(--sh-accent); } .btn-sm{ padding:6px 12px; font-size:12.5px; min-block-size:32px; border-radius:var(--r-sm); } .btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; } /* ---------- cards / sections ---------- */ .card{ background:var(--surface-raised); border:1px solid var(--border-subtle); border-radius:var(--r-lg); box-shadow:var(--sh-1); transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur); } .card-pad{ padding:18px; } .card-hover:hover{ box-shadow:var(--sh-3); transform:translateY(-3px); border-color:var(--accent-border); } section.demo{ padding-block:38px; border-block-start:1px solid var(--border-subtle); } .eyebrow{ font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-block-end:6px; } html[lang="ar"] .eyebrow{ letter-spacing:0; text-transform:none; } .sec-title{ font-size:24px; margin-block-end:4px; } .sec-sub{ color:var(--text-secondary); font-size:14px; margin-block-end:22px; max-inline-size:70ch; } /* ---------- pills / badges ---------- */ .pill{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:var(--r-full); white-space:nowrap; border:1px solid transparent; } .pill .dot{ inline-size:6px; block-size:6px; border-radius:50%; background:currentColor; } .p-open{ color:var(--state-open); background:color-mix(in oklab,var(--state-open) 13%,transparent); border-color:color-mix(in oklab,var(--state-open) 28%,transparent); } .p-closing{ color:var(--state-closing); background:color-mix(in oklab,var(--state-closing) 15%,transparent); border-color:color-mix(in oklab,var(--state-closing) 32%,transparent); } .p-awarded{ color:var(--state-awarded); background:color-mix(in oklab,var(--state-awarded) 13%,transparent); border-color:color-mix(in oklab,var(--state-awarded) 28%,transparent); } .p-progress{ color:var(--state-progress); background:color-mix(in oklab,var(--state-progress) 13%,transparent); border-color:color-mix(in oklab,var(--state-progress) 28%,transparent); } .p-delivered{ color:var(--state-delivered); background:color-mix(in oklab,var(--state-delivered) 13%,transparent); border-color:color-mix(in oklab,var(--state-delivered) 28%,transparent); } .p-completed{ color:var(--state-completed); background:color-mix(in oklab,var(--state-completed) 13%,transparent); border-color:color-mix(in oklab,var(--state-completed) 30%,transparent); } .p-disputed{ color:var(--state-disputed); background:color-mix(in oklab,var(--state-disputed) 13%,transparent); border-color:color-mix(in oklab,var(--state-disputed) 28%,transparent); } .p-cancelled{ color:var(--state-cancelled); background:color-mix(in oklab,var(--state-cancelled) 12%,transparent); border-color:color-mix(in oklab,var(--state-cancelled) 26%,transparent); } .badge-v{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 8px 3px 5px; border-radius:var(--r-full); } .badge-v svg{ inline-size:13px; block-size:13px; flex:none; } .v1{ color:var(--tier-identity); background:color-mix(in oklab,var(--tier-identity) 14%,transparent); } .v2{ color:var(--tier-student); background:color-mix(in oklab,var(--tier-student) 14%,transparent); } .v3{ color:var(--tier-institution); background:color-mix(in oklab,var(--tier-institution) 18%,transparent); } .chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; padding:4px 10px; border-radius:var(--r-full); background:var(--surface-sunken); color:var(--text-secondary); border:1px solid var(--border-subtle); } .chip-accent{ background:var(--accent-subtle); color:var(--accent); border-color:var(--accent-border); font-weight:600; } .lvl{ display:inline-flex; gap:2px; margin-inline-start:2px; } .lvl i{ inline-size:4px; block-size:4px; border-radius:50%; background:currentColor; opacity:.28; } .lvl i.on{ opacity:1; } /* ---------- inputs ---------- */ .field{ display:flex; flex-direction:column; gap:6px; } .label{ font-size:12.5px; font-weight:600; color:var(--text-secondary); } .input,.select,.textarea{ font:inherit; font-size:14px; color:var(--text-primary); background:var(--surface-raised); border:1px solid var(--border-default); border-radius:var(--r-md); padding:10px 13px; min-block-size:42px; inline-size:100%; transition:border-color var(--dur-fast), box-shadow var(--dur-fast); } .input::placeholder{ color:var(--text-tertiary); } .input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 20%,transparent); } .input-ltr{ direction:ltr; text-align:start; } .switch{ inline-size:42px; block-size:24px; border-radius:var(--r-full); background:var(--border-default); position:relative; cursor:pointer; border:0; transition:background var(--dur-fast); flex:none; } .switch::after{ content:""; position:absolute; inset-block-start:3px; inset-inline-start:3px; inline-size:18px; block-size:18px; border-radius:50%; background:var(--surface-raised); box-shadow:var(--sh-1); transition:inset-inline-start var(--dur-fast) var(--ease); } .switch[aria-checked="true"]{ background:var(--accent); } .switch[aria-checked="true"]::after{ inset-inline-start:21px; } .stars{ display:inline-flex; gap:2px; color:var(--accent-2); } .stars svg{ inline-size:15px; block-size:15px; } .stars .off{ color:var(--border-default); } /* ---------- token/palette display ---------- */ .tok-grid{ grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); } .tok{ border:1px solid var(--border-subtle); border-radius:var(--r-md); overflow:hidden; background:var(--surface-raised); } .tok .bar{ block-size:46px; } .tok .meta{ padding:7px 9px; font-size:10.5px; font-family:var(--font-mono); color:var(--text-secondary); } .ramp{ display:flex; border-radius:var(--r-md); overflow:hidden; border:1px solid var(--border-subtle); } .ramp i{ flex:1; block-size:40px; } /* ---------- project cards ---------- */ .board{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); } .pcard{ display:flex; flex-direction:column; gap:12px; padding:16px; position:relative; overflow:hidden; } .pcard::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:3px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); opacity:0; transition:opacity var(--dur) var(--ease); } .pcard:hover::before{ opacity:1; } .pcard .co{ display:flex; align-items:center; gap:9px; } .avatar{ inline-size:34px; block-size:34px; border-radius:9px; flex:none; display:grid; place-items:center; font-weight:800; font-size:13px; color:var(--accent-contrast); background:linear-gradient(140deg,var(--accent),var(--accent-2)); } .avatar.rnd{ border-radius:50%; } .avatar.sm{ inline-size:28px; block-size:28px; font-size:11px; } .pcard h3{ font-size:15.5px; line-height:1.35; } .pcard .desc{ font-size:13px; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .pfoot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-block-start:12px; border-block-start:1px solid var(--border-subtle); } .money{ font-weight:800; font-size:17px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .money small{ font-size:11px; font-weight:600; color:var(--text-tertiary); margin-inline:4px; unicode-bidi:isolate; } .match{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:var(--r-full); background:var(--accent-subtle); color:var(--accent); border:1px solid var(--accent-border); } .meter{ inline-size:34px; block-size:4px; border-radius:var(--r-full); background:color-mix(in oklab,var(--accent) 22%,transparent); overflow:hidden; } .meter i{ display:block; block-size:100%; background:var(--accent); border-radius:var(--r-full); } .countdown{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; } .countdown.warn{ color:var(--state-closing); } .countdown.crit{ color:var(--state-disputed); animation:pulse 1.8s ease-in-out infinite; } @keyframes pulse{ 50%{ opacity:.55; } } /* ---------- money breakdown ---------- */ .mb{ border:1px solid var(--border-subtle); border-radius:var(--r-lg); overflow:hidden; background:var(--surface-raised); } .mb .r{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 16px; font-size:13.5px; border-block-end:1px solid var(--border-subtle); } .mb .r:last-child{ border-block-end:0; } .mb .r .v{ font-variant-numeric:tabular-nums; font-weight:600; } .mb .r.head{ background:var(--surface-sunken); font-weight:700; font-size:12px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.08em; } html[lang="ar"] .mb .r.head{ text-transform:none; letter-spacing:0; } .mb .r.net{ background:var(--accent-subtle); font-weight:800; font-size:15px; color:var(--accent); border-block-start:1px solid var(--accent-border); } .neg{ color:var(--money-out); } .pos{ color:var(--money-in); } .fee{ color:var(--money-fee); } /* ---------- timeline ---------- */ .tl{ position:relative; padding-inline-start:26px; } .tl::before{ content:""; position:absolute; inset-inline-start:8px; inset-block:6px 6px; inline-size:2px; background:var(--border-default); border-radius:2px; } .tl-item{ position:relative; padding-block-end:20px; } .tl-item::before{ content:""; position:absolute; inset-inline-start:-22px; inset-block-start:4px; inline-size:12px; block-size:12px; border-radius:50%; background:var(--surface-raised); border:2px solid var(--border-strong); } .tl-item.done::before{ background:var(--state-completed); border-color:var(--state-completed); } .tl-item.now::before{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 22%,transparent); } .tl-item h4{ font-size:14px; } /* ---------- table ---------- */ table.t{ inline-size:100%; border-collapse:collapse; font-size:13.5px; } table.t th{ text-align:start; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-tertiary); font-weight:700; padding:9px 12px; border-block-end:1px solid var(--border-default); } html[lang="ar"] table.t th{ text-transform:none; letter-spacing:0; } table.t td{ padding:11px 12px; border-block-end:1px solid var(--border-subtle); } table.t tr:hover td{ background:var(--surface-sunken); } /* ---------- stat tiles ---------- */ .stats{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); } .stat{ padding:15px 16px; } .stat .k{ font-size:11.5px; font-weight:600; color:var(--text-tertiary); } .stat .v{ font-size:25px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; margin-block-start:3px; } .stat .d{ font-size:11.5px; font-weight:700; margin-block-start:2px; } /* ---------- certificate ---------- */ .cert{ position:relative; border-radius:var(--r-lg); overflow:hidden; background: radial-gradient(120% 90% at 50% -20%, var(--accent-subtle), transparent 60%), var(--surface-raised); border:1px solid var(--accent-border); box-shadow:var(--sh-2); padding:26px 26px 20px; } .cert::before{ content:""; position:absolute; inset:9px; border-radius:calc(var(--r-lg) - 4px); border:1px solid color-mix(in oklab,var(--accent) 32%,transparent); pointer-events:none; } .cert::after{ content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:5px; background:repeating-linear-gradient(90deg,var(--accent) 0 14px,var(--accent-2) 14px 28px); opacity:.85; } .cert-body{ display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:start; position:relative; } .cert-col h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); } .cert-col .nm{ font-size:19px; font-weight:800; letter-spacing:-.02em; margin-block:6px 2px; } /* A bilingual certificate pins each column's direction explicitly - it is not affected by the page locale. This is the one place you DO set direction. */ .cert-col.ar{ direction:rtl; text-align:right; font-family:var(--font-ar); } .cert-col.en{ direction:ltr; text-align:left; font-family:var(--font-en); } .cert-col.en .row{ justify-content:flex-start; } .cert-col.ar h4{ font-family:var(--font-display-ar); letter-spacing:0; text-transform:none; } .cert-div{ inline-size:1px; align-self:stretch; background:linear-gradient(var(--transparent,transparent),var(--accent-border),transparent); } .seal{ inline-size:64px; block-size:64px; border-radius:50%; display:grid; place-items:center; margin-inline:auto; background:conic-gradient(from 0deg,var(--accent),var(--accent-2),var(--accent)); color:var(--accent-contrast); font-weight:800; font-size:11px; text-align:center; line-height:1.1; box-shadow:var(--sh-accent); } .qr{ inline-size:58px; block-size:58px; border-radius:6px; flex:none; background-color:var(--surface-raised); background-image: repeating-conic-gradient(var(--text-primary) 0% 25%, transparent 0% 50%), repeating-conic-gradient(from 45deg, var(--text-primary) 0% 25%, transparent 0% 50%); background-size:11px 11px, 19px 19px; border:3px solid var(--surface-raised); outline:1px solid var(--border-default); } .cert-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-block-start:20px; padding-block-start:14px; border-block-start:1px solid var(--border-subtle); position:relative; } /* ---------- misc ---------- */ .note{ border-inline-start:3px solid var(--accent); background:var(--accent-subtle); padding:11px 14px; border-radius:0 var(--r-md) var(--r-md) 0; font-size:13px; } [dir="rtl"] .note{ border-radius:var(--r-md) 0 0 var(--r-md); } .toast{ display:flex; align-items:center; gap:11px; padding:12px 15px; border-radius:var(--r-md); box-shadow:var(--sh-2); background:var(--surface-raised); border:1px solid var(--border-subtle); border-inline-start:3px solid var(--success); font-size:13.5px; } .toast.warn{ border-inline-start-color:var(--warning); } .toast.err{ border-inline-start-color:var(--danger); } .gauge{ block-size:7px; border-radius:var(--r-full); background:var(--surface-sunken); overflow:hidden; } .gauge i{ display:block; block-size:100%; border-radius:var(--r-full); background:linear-gradient(90deg,var(--accent),var(--accent-2)); } .hero{ padding-block:44px 34px; background: radial-gradient(85% 120% at 15% 0%, var(--accent-subtle), transparent 62%), radial-gradient(70% 100% at 92% 8%, var(--accent-2-subtle), transparent 58%); } .hero h1{ font-size:clamp(28px,4.5vw,44px); letter-spacing:-.035em; } .hero .lede{ font-size:16px; color:var(--text-secondary); max-inline-size:62ch; margin-block-start:12px; } .kbd{ font-family:var(--font-mono); font-size:11px; background:var(--surface-sunken); border:1px solid var(--border-default); border-radius:5px; padding:1px 5px; } .two{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); } .three{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } .gap8{ gap:8px; } .gap12{ gap:12px; } .gap16{ gap:16px; } .gap20{ gap:20px; } .mt8{ margin-block-start:8px; } .mt12{ margin-block-start:12px; } .mt16{ margin-block-start:16px; } .mt24{ margin-block-start:24px; } .hide{ display:none !important; } @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition-duration:1ms !important; } } @media print{ .topbar,.no-print{ display:none; } } /* ---------- auth: gates, forms, confirmation ---------- */ /* Logical properties only. No physical left/right anywhere in this block, so RTL needs no second stylesheet -- see docs/roadmap.md 8.2. */ .auth-wrap{ padding-block:36px 56px; } .auth-narrow{ max-inline-size:520px; } .auth-head{ margin-block-end:22px; } .auth-head h1{ font-size:clamp(24px,3.4vw,34px); letter-spacing:-.03em; } .auth-head .lede{ font-size:15px; color:var(--text-secondary); max-inline-size:64ch; margin-block-start:10px; } .auth-card{ padding:22px; max-inline-size:820px; } .auth-head, .crumbs{ max-inline-size:820px; } .auth-actions{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; margin-block-start:22px; padding-block-start:18px; border-block-start:1px solid var(--border-subtle); } /* Two actions that are peers, not a sequence. Stacked, a primary button above a secondary one reads as "do this, then that" -- which is right for "Continue" above "Back", and wrong for "Download PDF" beside "Add to LinkedIn", where either is a fine next move. */ .auth-actions.pair{ flex-direction:row; flex-wrap:wrap; align-items:center; } .eyebrow{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; } .crumbs{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-tertiary); margin-block-end:14px; } .crumbs a{ color:var(--text-secondary); text-decoration:none; } .crumbs a:hover{ color:var(--accent); } /* The chooser. Two cards, equal weight: neither side is the default. */ .gate-head{ text-align:center; max-inline-size:70ch; margin-inline:auto; margin-block-end:30px; } .gate-head h1{ font-size:clamp(26px,4vw,40px); letter-spacing:-.035em; margin-block-start:8px; } .gate-head .lede{ margin-inline:auto; } .gate-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:stretch; } .gate-card{ display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; background:var(--surface-raised); border:1px solid var(--border-default); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-1); transition:box-shadow var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast); } .gate-card:hover{ box-shadow:var(--sh-3); transform:translateY(-3px); border-color:var(--accent-border); } .gate-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; } .gate-icon{ inline-size:44px; block-size:44px; border-radius:var(--r-md); display:grid; place-items:center; font-size:20px; background:var(--accent-subtle); color:var(--accent); } .gate-card-alt .gate-icon{ background:var(--accent-2-subtle); color:var(--accent-2); } .gate-card h2{ font-size:19px; letter-spacing:-.02em; } .gate-sub{ font-size:13px; color:var(--text-tertiary); } .gate-list{ list-style:none; display:flex; flex-direction:column; gap:8px; margin-block:8px; font-size:13.5px; color:var(--text-secondary); } .gate-list li{ position:relative; padding-inline-start:20px; } .gate-list li::before{ content:"\2713"; position:absolute; inset-inline-start:0; inset-block-start:0; color:var(--success); font-size:12px; font-weight:700; } .gate-foot{ margin-block-start:auto; padding-block-start:16px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; } /* Form layout. Two columns on a wide screen, one on a narrow one; a field marked .field-wide always takes the whole row. */ .form-block{ border:0; padding:0; margin-block-end:24px; } .form-block > legend{ font-size:13px; font-weight:700; color:var(--text-primary); padding:0; margin-block-end:4px; } .block-note{ font-size:12.5px; color:var(--text-tertiary); margin-block-end:12px; max-inline-size:66ch; } /* Two columns at most, never four: auto-fit on a 1280px screen produced a row of four cramped selects where "Choose your university" did not fit its own box. */ .form-grid{ display:grid; gap:14px 18px; grid-template-columns:1fr; } @media (min-width:660px){ .form-grid{ grid-template-columns:1fr 1fr; } } .form-grid-1{ grid-template-columns:1fr; } .field-wide{ grid-column:1 / -1; } .label .req{ color:var(--danger); margin-inline-start:3px; } .label .opt{ color:var(--text-tertiary); font-weight:400; margin-inline-start:5px; font-size:11.5px; } .hint{ font-size:11.5px; color:var(--text-tertiary); line-height:1.45; } .err-text{ font-size:12px; color:var(--danger-text); font-weight:600; } .field-err .input,.field-err .select,.field-err .textarea{ border-color:var(--danger); } .field-err .input:focus,.field-err .select:focus,.field-err .textarea:focus{ box-shadow:0 0 0 3px color-mix(in oklab,var(--danger) 22%,transparent); } .consent-row{ gap:4px; } .consent-label{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-secondary); cursor:pointer; line-height:1.5; } .checkbox{ inline-size:18px; block-size:18px; accent-color:var(--accent); flex:none; margin-block-start:1px; } /* Alerts. Not the toast component: a toast is transient and a form error is not. */ .alert{ border-radius:var(--r-md); padding:12px 15px; font-size:13.5px; margin-block-end:18px; border:1px solid transparent; } .alert ul{ margin-block-start:6px; padding-inline-start:18px; } .alert-err{ background:var(--danger-subtle); color:var(--danger-text); border-color:color-mix(in oklab,var(--danger) 35%,transparent); } .alert-warn{ background:var(--warning-subtle); color:var(--warning-text); border-color:color-mix(in oklab,var(--warning) 35%,transparent); } .alert-ok{ background:var(--success-subtle); color:var(--success-text); border-color:color-mix(in oklab,var(--success) 35%,transparent); } .big-glyph{ font-size:44px; line-height:1; color:var(--accent); } .big-glyph.ok{ color:var(--success); } .big-glyph.err{ color:var(--danger); } .kv{ display:grid; grid-template-columns:auto 1fr; gap:10px 16px; align-items:center; font-size:13.5px; } .kv dt{ color:var(--text-tertiary); font-size:12.5px; } .kv dd{ margin:0; } .card-title{ font-size:15px; letter-spacing:-.01em; margin-block-end:14px; padding-block-end:10px; border-block-end:1px solid var(--border-subtle); } .cols2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); } .toasts{ display:flex; flex-direction:column; gap:8px; margin-block-end:20px; } .link{ color:var(--accent); font-weight:600; } .mono{ font-family:var(--font-mono); font-size:.92em; } .yes{ color:var(--success-text); font-weight:600; } .no{ color:var(--text-tertiary); } /* Notice: a persistent condition of the page, not a result of the last action. A toast says "saved"; a notice says "this contract is not funded, do not start work". Different lifetimes, so different components -- a dismissible toast is the wrong shape for something that stays true until somebody transfers money. Logical properties throughout, so the accent edge follows the writing direction. */ .notice{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; border-radius:var(--r-md); background:var(--surface-raised); border:1px solid var(--border-subtle); border-inline-start:3px solid var(--accent); font-size:13.5px; margin-block-end:20px; } .notice-warn{ border-inline-start-color:var(--warning); background:color-mix(in oklab,var(--warning) 7%,var(--surface-raised)); } .notice-danger{ border-inline-start-color:var(--danger); background:color-mix(in oklab,var(--danger) 7%,var(--surface-raised)); } .notice strong{ font-weight:700; } /* Direct children carry the text. is used rather than
where the sentence mixes a number with prose -- see the note in dispute_detail.html: is not a bidi boundary, so an English sentence starting with "900.00 SAR" reorders under RTL and the amount lands at the end. */ .notice > bdi{ display:block; flex:1; } .notice .btn{ margin-inline-start:auto; } .warn{ color:var(--state-closing); font-weight:600; } /* ---------- project list and posting ---------- */ .section-head{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-tertiary); font-weight:700; margin-block-end:12px; } .sub-head{ font-size:13px; font-weight:700; margin-block:16px 6px; color:var(--text-secondary); } .plist{ gap:12px; } .prow{ display:flex; flex-direction:column; gap:12px; } .prow-title{ font-size:17px; letter-spacing:-.015em; margin-block-start:6px; } .prow-summary{ max-inline-size:70ch; margin-block-start:4px; } .prow-meta{ text-align:end; flex:none; } .prow-actions{ display:flex; gap:8px; flex-wrap:wrap; padding-block-start:12px; border-block-start:1px solid var(--border-subtle); } .between{ display:flex; justify-content:space-between; align-items:flex-start; } /* A repeating group of inline fields: the skill rows and the question rows. Each row is its own grid so a wide screen puts the whole row on one line and a phone stacks it. */ .rowset{ display:flex; flex-direction:column; gap:12px; } .rowset-row{ display:grid; gap:10px 14px; align-items:end; grid-template-columns:1fr; padding:12px; border:1px solid var(--border-subtle); border-radius:var(--r-md); background:var(--surface-sunken); } @media (min-width:780px){ .rowset-row{ grid-template-columns:2fr 1fr 1fr auto auto; } } .rowset-row .field-wide{ grid-column:auto; } .rowset-row .hint{ display:none; } /* too noisy repeated on every row */ ul.plain{ list-style:none; display:flex; flex-direction:column; gap:8px; } .mb .r .dim{ color:var(--text-tertiary); } /* A CheckboxSelectMultiple: several boxes under one label, wrapping as chips. Without this the group renders as a tall block that escapes its grid cell and covers the field next to it -- which is exactly how it was found. */ .cbgroup{ border:0; padding:0; margin:0; } .cbgroup > legend{ padding:0; margin-block-end:8px; } .cbgroup-items{ display:flex; flex-wrap:wrap; gap:8px 14px; } .cbchip{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:13.5px; color:var(--text-secondary); padding:6px 11px; border:1px solid var(--border-default); border-radius:var(--r-full); background:var(--surface-raised); transition:border-color var(--dur-fast); } .cbchip:hover{ border-color:var(--accent-border); } .cbchip:has(input:checked){ border-color:var(--accent); background:var(--accent-subtle); color:var(--accent); font-weight:600; } .cbchip input{ inline-size:15px; block-size:15px; accent-color:var(--accent); } /* ---------- board and applications ---------- */ .filterbar .form-grid{ gap:12px 16px; } .boardgrid{ grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); align-items:start; } .boardcell{ display:flex; flex-direction:column; gap:10px; } .boardcell-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .tbl{ inline-size:100%; border-collapse:collapse; font-size:13.5px; } .tbl th{ text-align:start; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); font-weight:700; padding:12px 14px; border-block-end:1px solid var(--border-default); white-space:nowrap; } .tbl td{ padding:12px 14px; border-block-end:1px solid var(--border-subtle); vertical-align:middle; } .tbl tbody tr:last-child td{ border-block-end:0; } .tbl tbody tr:hover{ background:var(--surface-sunken); } .avatar.rnd{ border-radius:50%; } .avatar.sm{ inline-size:30px; block-size:30px; font-size:11.5px; } .qa dt{ font-size:12.5px; color:var(--text-tertiary); margin-block-start:12px; } .qa dt:first-child{ margin-block-start:0; } .qa dd{ margin:4px 0 0; } /* Not a project state -- the viewer cannot apply. Deliberately neutral rather than borrowing the cancelled colour, which reads as "this project is dead". */ .pill.p-ineligible{ color:var(--text-tertiary); background:var(--surface-sunken); border-color:var(--border-default); } /* ---------- reviews, ratings, certificates ---------- */ /* Screen-reader-only. The star inputs are graphics; the scale has to reach a screen reader some other way, and `aria-label` on a