/* =========================================================================== Skyline Supplier Gateway — "the drawing sheet" --------------------------------------------------------------------------- The unauthenticated supplier surface: /supplier/start, login, forgot, activate, and the registration thanks page. Concept. A supplier's first act here is to hand over a commercial registration, a VAT certificate and a bank letter. So the surface is a controlled engineering document: a navy field ruled with a drafting grid, a drawn frame with registration ticks at the corners, and an ISO-7200-style title block along the bottom edge. Content sits on it as white panels — drawings pinned to a board. Type. One superfamily, four registers: IBM Plex Serif sets the display, Plex Sans the prose, Plex Mono every label and reference, and Plex Sans Arabic the whole thing again in RTL. Colour. Skyline blue carries structure. Skyline red is spent exactly once per screen, on the single action that matters. Loaded ONLY by the gate pages, never by the authenticated portal, whose dense light tables depend on the 14px root this file overrides. Depends on the tokens in sourcing-portal.css. =========================================================================== */ .gate { /* --sx flips every horizontal motion for RTL: one variable, rather than a mirrored copy of each keyframe. */ --sx: 1; /* --mx follows the lit corner, because mask-image and background-position take physical coordinates and will not mirror themselves. */ --mx: 22%; --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; --sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --ar: 'IBM Plex Sans Arabic'; --sheet: #04120c; --rule: rgba(152, 235, 196, .22); --rule-soft: rgba(152, 235, 196, .12); --grid: rgba(152, 235, 196, .075); --grid-major: rgba(152, 235, 196, .17); --on-sheet: #b9e6d1; --on-sheet-dim: #7db99c; position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: clamp(18px, 2.4vw, 34px); font-family: var(--sans); background: radial-gradient(1150px 680px at 14% -12%, #155c43 0%, transparent 58%), linear-gradient(180deg, #0d3b2e 0%, #092619 56%, #04120c 100%); } [dir="rtl"] .gate { --sx: -1; --mx: 78%; font-family: var(--ar), var(--sans); background: radial-gradient(1150px 680px at 86% -12%, #155c43 0%, transparent 58%), linear-gradient(180deg, #0d3b2e 0%, #092619 56%, #04120c 100%); } /* The portal layout pins html{font-size:14px} — correct for its dense tables, far too small for a landing page. Everything here is rem, so lifting the root rescales the sheet at once. The layout also paints a light body, which would flash behind the sheet on overscroll. Keyed off a class the layout stamps on , not :has(.gate) — :has() is unsupported below Safari 15.4, and the failure mode there is a light page flashing behind a navy sheet. */ html.is-gate { font-size: 16px; background: #04120c; } html.is-gate body { background: #04120c; } /* --------------------------------------------------------------- atmosphere */ .gate__grid, .gate__glow, .gate__grain, .gate__scan { pointer-events: none; } .gate__grid { position: absolute; inset: -110px; z-index: -2; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px); background-size: 16px 16px, 16px 16px, 96px 96px, 96px 96px; -webkit-mask-image: radial-gradient(1100px 680px at var(--mx) 22%, #000 0%, transparent 76%); mask-image: radial-gradient(1100px 680px at var(--mx) 22%, #000 0%, transparent 76%); } .gate__glow { position: absolute; top: -22%; inset-inline-start: -12%; z-index: -2; width: 62vw; height: 62vw; max-width: 840px; max-height: 840px; background: radial-gradient(circle, rgba(251, 191, 36, .14), transparent 62%); } .gate__grain { position: absolute; inset: 0; z-index: -1; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .gate__scan { position: absolute; inset: 0; z-index: -1; } /* ------------------------------------------------------- the drawn frame */ /* The frame is the page's spine. Its four corner ticks are registration marks: the detail that tells you this is a drawing, not a slide. */ .gate__frame { position: relative; flex: 1; display: flex; flex-direction: column; border: 1px solid var(--rule-soft); padding: clamp(18px, 2.4vw, 38px) clamp(20px, 3.6vw, 60px) 0; } /* Registration ticks. Four of them, so the frame reads as a drawn sheet rather than a stray border: two from the frame, two from .gate__corners. */ .gate__frame::before, .gate__frame::after, .gate__corners::before, .gate__corners::after { content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none; } .gate__frame::before { top: -1px; left: -1px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); } .gate__frame::after { top: -1px; right: -1px; border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); } .gate__corners { position: absolute; inset: 0; pointer-events: none; } .gate__corners::before { bottom: -1px; left: -1px; border-bottom: 1px solid var(--rule); border-left: 1px solid var(--rule); } .gate__corners::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); } .gate__inner { position: relative; width: 100%; max-width: clamp(1000px, 84vw, 1520px); margin-inline: auto; flex: 1; display: flex; flex-direction: column; } /* ------------------------------------------------------------------ header */ .gate-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; /* Tuned so the title block still lands above the fold on a 900px-tall laptop; it is the signature of the sheet and should not need scrolling to. */ margin-bottom: clamp(20px, 2.4vw, 34px); } /* It is an back to /supplier/start, so it must shed the link chrome or the buyer's name renders underlined and link-blue. */ .gate-plate { display: inline-flex; align-items: center; background: #fff; border-radius: 3px; padding: 11px 18px; text-decoration: none; box-shadow: 0 20px 44px -24px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; } .gate-plate:hover { transform: translateY(-1px); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .98), 0 0 0 1px rgba(255, 255, 255, .18); } .gate-plate:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } .gate-plate img { max-height: 40px; max-width: 168px; display: block; } .gate-plate__wm { font-family: var(--serif); font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; color: var(--b1); } /* The status is read from real state — whether an active registration link exists — so a page offering only a login never claims to be open. */ .gate-status { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--on-sheet); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); padding: 9px 16px; border-radius: 2px; } .gate-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } .gate-dot--open { background: #34d399; } .gate-dot--invite { background: #fbbf24; } /* Letter-spacing prises apart the joins in Arabic script, and a Latin-only monospace has no glyphs to render it with. Name the Arabic face, drop both. */ [dir="rtl"] .gate-status, [dir="rtl"] .gate-kicker, [dir="rtl"] .gate-card__lead, [dir="rtl"] .gate-field > label, [dir="rtl"] .gate-block dt { font-family: var(--ar), var(--sans); letter-spacing: 0; text-transform: none; } /* -------------------------------------------------------------------- body */ /* Copy on one side, the choice on the other — aligned to a shared top baseline. Centring them let the short column drift into the middle of the tall one, which is what made the hero look stranded. */ .gate-body { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(34px, 5vw, 76px); align-items: start; padding-bottom: clamp(22px, 2.2vw, 36px); } @media (max-width: 980px) { .gate-body { grid-template-columns: minmax(0, 1fr); gap: 38px; } } .gate-kicker { font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--on-sheet-dim); margin: 0 0 20px; display: flex; align-items: center; gap: 14px; } .gate-kicker::after { content: ''; height: 1px; flex: 1; max-width: 90px; background: linear-gradient(90deg, var(--accent), transparent); } [dir="rtl"] .gate-kicker::after { background: linear-gradient(270deg, var(--accent), transparent); } /* Serif, not sans. A procurement portal is a place of record. */ .gate-title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.7rem, 4.4vw, 5.1rem); line-height: .98; letter-spacing: -.028em; color: #fff; margin: 0; } [dir="rtl"] .gate-title { font-family: var(--ar), var(--serif); line-height: 1.16; letter-spacing: 0; } .gate-title__rule { height: 1px; width: 100%; max-width: 340px; margin: clamp(22px, 2.4vw, 34px) 0; background: linear-gradient(90deg, var(--rule), transparent); } [dir="rtl"] .gate-title__rule { background: linear-gradient(270deg, var(--rule), transparent); } .gate-sub { color: var(--on-sheet); font-size: clamp(1.02rem, .92vw, 1.2rem); line-height: 1.66; margin: 0; max-width: 48ch; } /* The four sections that exist behind the login, named with the nav's own translation keys, so this can never advertise something that is not there. */ .gate-caps { list-style: none; padding: 0; margin: clamp(30px, 3.4vw, 46px) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-soft); border: 1px solid var(--rule-soft); max-width: 460px; } .gate-caps li { display: flex; align-items: center; gap: 11px; padding: 15px 17px; background: rgba(6, 10, 23, .5); color: var(--on-sheet); font-size: .9rem; } .gate-caps i { color: var(--b3); font-size: .85rem; width: 16px; text-align: center; } .gate-note { margin: 26px 0 0; display: flex; align-items: flex-start; gap: 11px; max-width: 62ch; color: #aabbdc; font-size: .9rem; line-height: 1.6; background: rgba(251, 191, 36, .06); border: 1px solid rgba(251, 191, 36, .20); border-radius: 2px; padding: 13px 15px; } .gate-note i { color: #fbbf24; margin-top: 3px; flex: none; } /* ================================================== panels — the lit plate */ /* THE IDEA, in one line: blue constructs, red annotates — and here the annotation is LIGHT. Both cards are drawn identically as sheets of drawing paper lying ON the board and lit by the page's own lamp (the radial glow, top-inline-start). The primary is the only object anywhere on the sheet that EMITS: it hangs a red glow beneath itself onto the navy. Nothing else on the page emits. That is the whole hierarchy — you would still know which card is primary with the type deleted. Every card state is a change to eight inherited numbers. One box-shadow declaration serves every card in every state, so the layer count can never drift and the shadow always interpolates: --lift vertical offset --e shadow scale --rim specular rim --bloom blue light thrown onto the navy --spec surface highlight --spine the filament's colour --emit the red emission — transparent on every plate but the primary THE LIVE BUG THIS FIXES. `.gate-rise` (foot of this file) runs `animation: gateRise … forwards` ending on `transform: none`. A filling animation applies at the animation origin, which outranks every author normal declaration — so the old `.gate-card:hover { transform: translateY(-3px) }` has never fired in production. The cards do not lift today. The entrance is moved below onto the independent `translate` property, for cards only, so `transform` belongs to elevation and the two channels compose instead of fighting. Overriding `animation-name` alone preserves .gate-rise's duration, easing, `var(--d)` delay and fill. */ .gate-cards { display: grid; grid-template-columns: minmax(0, 1fr); /* Wide enough that the primary's emission lands on navy, not on the plate below it — the red has to be seen falling on the sheet. */ gap: 14px; } .gate-card { /* -------- the elevation channel. Every state below is a change to these. */ --lift: 0px; --e: 1; --rim: .5; --bloom: .16; --spec: .6; --spine: var(--b3); --spine-lit: rgba(37, 99, 235, 0); --emit: transparent; --pad: clamp(22px, 1.7vw, 30px); --spine-w: 4px; /* -------- the lamp. Gradients and masks take PHYSICAL coordinates and will not mirror themselves — the same reason `.gate` names --mx rather than inferring it. So the lit corner is declared, not deduced, and RTL redeclares it. The rim and the filament are box-shadow offsets, so they ride --sx instead and need no override at all. */ --gx: 4%; --shade: 148deg; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; /* A floor, so the lone invite-only card still reads as a plate rather than a stub when it renders without a document schedule. */ min-height: 236px; text-decoration: none; color: inherit; padding: var(--pad); border-radius: 3px; /* The surface is not flat #fff — it is drawing paper: a shade that gathers in the corner furthest from the lamp. It only ever DARKENS the ground under a glyph, and the specular below only ever whitens it, so no amount of copy or documents can move any text onto a worse background. */ background-color: #fff; background-image: linear-gradient(var(--shade), rgba(15, 23, 42, 0) 44%, rgba(15, 23, 42, .06) 100%); /* Vertical only. No transform on this card, at rest or on hover, has a horizontal component — nothing can reach an inline edge in either direction. */ transform: translateY(var(--lift)); will-change: transform; box-shadow: /* THE FILAMENT. The spine, as a shadow rather than a pseudo-element: it can never be pinned by a filling animation, it mirrors itself through --sx with no [dir="rtl"] rule, and it frees ::before for the paper. Drawn at rest on BOTH cards — blue constructs. */ inset calc(var(--spine-w) * var(--sx)) 0 0 0 var(--spine), /* the filament's glow, bleeding inward across the plate */ inset calc(30px * var(--sx)) 0 34px -20px var(--spine-lit), /* THE RIM. 1px of specular on the two edges facing the lamp: top + inline-start in LTR, top + inline-end in RTL, via --sx alone. */ calc(-1px * var(--sx)) -1px 0 0 rgba(255, 246, 224, var(--rim)), /* the hairline that closes the two edges lying in shadow */ 0 0 0 1px rgba(152, 235, 196, .13), /* the blue bloom the plate throws back onto the navy, from the lit corner */ calc(-18px * var(--sx) * var(--e)) calc(-10px * var(--e)) calc(40px * var(--e)) -20px rgba(251, 191, 36, var(--bloom)), /* THE EMISSION. The one place on this page red is spent as light rather than ink. `transparent` on every plate but the primary, so the layer count is identical on every card and the shadow always interpolates. */ 0 calc(14px * var(--e)) calc(54px * var(--e)) -10px var(--emit), /* contact, mid, deep. Three stages are what read as distance; one blur reads as a filter. */ 0 calc(2px * var(--e)) calc(6px * var(--e)) -2px rgba(2, 6, 23, .55), 0 calc(17px * var(--e)) calc(36px * var(--e)) -18px rgba(2, 6, 23, .82), 0 calc(46px * var(--e)) calc(84px * var(--e)) -36px rgba(2, 6, 23, .96); /* Light is not motion. The plate answers hover with shadow and specular even for a reduced-motion visitor; only the lift itself is gated, at the foot. */ transition: box-shadow .45s cubic-bezier(.2, .75, .2, 1); } [dir="rtl"] .gate-card { --gx: 96%; --shade: 212deg; } .gate-card > * { position: relative; z-index: 2; } .gate-card:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } /* THE PAPER. The sheet's own drafting grid — the same 16px minor and 96px major pitch as `.gate__grid`, drifting on the same 64s clock, in the same direction — printed onto the plate, so the card reads as KEYED to the drawing it lies on rather than pasted onto it. Masked to the lit corner: the lamp is what reveals the paper's tooth, and the mask is also why no small glyph ever sits on a hairline (see the contrast note in the docs rule). Inset by the filament so it never rules across it. */ .gate-card::before { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: var(--spine-w); inset-inline-end: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(29, 78, 216, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 78, 216, .05) 1px, transparent 1px), linear-gradient(rgba(29, 78, 216, .085) 1px, transparent 1px), linear-gradient(90deg, rgba(29, 78, 216, .085) 1px, transparent 1px); background-size: 16px 16px, 16px 16px, 96px 96px, 96px 96px; background-position: 0 0, 0 0, 0 0, 0 0; -webkit-mask-image: radial-gradient(118% 74% at var(--gx) -6%, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 78%); mask-image: radial-gradient(118% 74% at var(--gx) -6%, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 78%); } /* THE LIGHT. The specular bloom on the surface, brightest where the plate faces the lamp and gone by the far corner. Drawn as a bloom rather than a line, so it has a direction. It washes the grid out where it falls, which is what makes the paper read as lit rather than printed. It only ever whitens. */ .gate-card::after { content: ''; position: absolute; top: 0; bottom: 0; inset-inline-start: var(--spine-w); inset-inline-end: 0; z-index: 0; pointer-events: none; opacity: var(--spec); background: radial-gradient(108% 82% at var(--gx) -8%, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .58) 34%, rgba(255, 255, 255, 0) 76%); transition: opacity .42s ease; } /* The lamp sweeps BOTH plates, in the same blue: one light source, and the sheen is construction, not annotation. It must ride above the paper and the specular (z-index 0) and below the content (z-index 2). */ .gate-card__sheen { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(37, 99, 235, .10) 50%, transparent 60%); transform: translateX(calc(-100% * var(--sx))); } /* --------------------------------------------------------- the marked-up plate */ /* Bigger, higher, and the only object on the page that emits. Nothing here is a new rule — it is eight numbers. */ .gate-card--primary { --pad: clamp(26px, 2.1vw, 36px); --lift: -6px; --e: 1.3; --rim: .72; --bloom: .22; --spec: .78; --spine: var(--accent); --spine-lit: rgba(220, 38, 38, .34); --emit: rgba(220, 38, 38, .5); } /* Invite-only: the login card renders alone. It inherits the primary's size and plane — an empty column is not a hierarchy — but it deliberately sets no --spine and no --emit, so red can never leak onto it no matter what else changes. Plain :only-child, not :has(), which this file already declines to rely on below Safari 15.4. Declared BEFORE the interaction states on purpose: `:only-child` and `:hover` are both (0,2,0), so source order is the only thing making hover win. Move this rule below them and the lone card freezes at rest elevation. */ .gate-card:only-child { --pad: clamp(26px, 2.1vw, 36px); --lift: -4px; --e: 1.24; --rim: .70; --bloom: .24; --spec: .78; } /* Phones: an 84px blur stack under a full-width card is a lot of compositing for very little perceived depth. Keep the light, drop the theatre. Placed here, not at the end: `.gate-card:only-child` above is (0,2,0) and would otherwise outrank the (0,2,0) hover states that come after it. */ @media (max-width: 640px) { .gate-card { --e: .85; --lift: 0px; } .gate-card--primary { --e: 1.05; --lift: -4px; } .gate-card:only-child { --e: 1.05; --lift: -4px; } } /* --------------------------------------------------------------- the contents */ .gate-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } /* A chip set into the plate, with its own rim and its own cast shadow. The primary's is solid red and glows — a second lamp, not a second ink. */ .gate-card__ic { width: 52px; height: 52px; flex: none; border-radius: 3px; display: grid; place-items: center; font-size: 20px; color: var(--b1); background: linear-gradient(160deg, #fff, var(--b1l) 92%); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(29, 78, 216, .14), 0 10px 18px -10px rgba(29, 78, 216, .5); transition: box-shadow .35s; } .gate-card--primary .gate-card__ic { color: #fff; background: linear-gradient(160deg, var(--accent), var(--accent-d)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px rgba(185, 28, 28, .45), 0 12px 24px -10px rgba(220, 38, 38, .65); } /* The sheet number, struck INTO the plate rather than printed on it: a white shadow beneath the glyph is what reads as engraving. It was --slate4 at .55 opacity — about 2.6:1, and never actually legible. It is now --muted at full opacity and 28px, which is large-scale text: measured at 4.56:1 against the worst ground it can ever sit on, against the 3:1 AA needs. */ .gate-card__idx { flex: none; display: flex; flex-direction: column; align-items: flex-end; /* column flex — the cross axis follows `direction` */ gap: 8px; font-family: var(--mono); font-size: 1.75rem; font-weight: 400; letter-spacing: .04em; line-height: 1; color: var(--muted); text-shadow: 0 1px 0 rgba(255, 255, 255, .95); } .gate-card__idx::after { content: ''; width: 26px; height: 1px; background: var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, .9); } /* Bigger is nearer: the primary carries the plane difference in type as well as in space, so the hierarchy survives a greyscale print. */ .gate-card__t { font-family: var(--serif); font-weight: 600; font-size: clamp(1.38rem, 1.15vw, 1.7rem); line-height: 1.18; letter-spacing: -.014em; color: var(--ink); margin: 18px 0 8px; text-wrap: balance; } .gate-card--primary .gate-card__t, .gate-card:only-child .gate-card__t { font-size: clamp(1.52rem, 1.4vw, 1.98rem); } [dir="rtl"] .gate-card__t { font-family: var(--ar), var(--serif); line-height: 1.42; letter-spacing: 0; } .gate-card__d { color: var(--slate7); font-size: .97rem; line-height: 1.65; margin: 0 0 12px; max-width: 46ch; text-wrap: pretty; } /* --muted lands at 4.4:1 against the shaded end of the paper and fails AA at 11px. --slate7 clears it at 9.5:1 and still reads as a label. The dotted leader is a symmetric dash pattern — nothing to mirror in RTL. (The file's existing `[dir="rtl"] .gate-card__lead` rule at the head of this file is (0,2,0) and still wins: the Arabic face, no tracking, no uppercase.) */ .gate-card__lead { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--slate7); margin: 0 0 10px; } .gate-card__lead::after { content: ''; flex: 1 1 auto; min-width: 12px; height: 1px; background-image: repeating-linear-gradient(90deg, var(--slate4) 0 1px, transparent 1px 5px); } /* THE COUNTERPOINT. The documents are the one thing on the plate that goes DOWN into it: recessed slots, lit from above — dark at the top of the well, light at the lip. Everything else lifts; the counterpoint is what sells the relief, and it is the honest metaphor, because the documents are what you hand over and press into the record. Their index is a `decimal-leading-zero` CSS counter, so it stays out of the markup and can never drift from `config('sourcing.document_types')` — and it rhymes with the sheet number above it. Blue, on both cards: blue constructs. `min-width: 0; overflow-wrap: anywhere` because the real config strings are long ("Commercial Registration (CR)", "شهادة ضريبة القيمة المضافة"). */ .gate-card__docs { counter-reset: gdoc; list-style: none; display: flex; flex-wrap: wrap; gap: 7px; padding: 0; margin: 0 0 16px; } .gate-card__docs li { counter-increment: gdoc; display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; font-size: .8rem; font-weight: 500; line-height: 1.35; color: var(--slate7); /* measured 9.4:1 */ background: linear-gradient(180deg, #eef2f7, #fdfdfe); /* opaque: the shade beneath cannot reach these glyphs */ border: 1px solid var(--line); border-radius: 2px; padding: 6px 10px; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .08), 0 1px 0 rgba(255, 255, 255, .9); } .gate-card__docs li::before { content: counter(gdoc, decimal-leading-zero); flex: none; /* The card inherits var(--ar) in RTL; these are Latin digits and belong in mono in both directions. --b1 (measured 6.13:1), not --muted (4.2:1 — it would fail AA at this size). */ font-family: var(--mono); font-size: .64rem; font-weight: 500; letter-spacing: .06em; color: var(--b1); } /* THE LIP. The call to action is a raised ledge moulded into the plate's bottom edge, full-bleed out through the padding — it gives the card a bottom edge with real thickness, and it puts the red back onto a near-white OPAQUE ground, which is exactly what lets it clear AA. It stops short of the filament by --spine-w, so the spine runs the full height of the plate. It is a : the whole card is still one , and nothing interactive is nested inside it. */ .gate-card__go { margin-block-start: auto; margin-inline-start: calc(var(--spine-w) - var(--pad)); margin-inline-end: calc(var(--pad) * -1); margin-block-end: calc(var(--pad) * -1); padding-block: 15px; padding-inline-start: calc(var(--pad) - var(--spine-w)); padding-inline-end: var(--pad); display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: .97rem; color: var(--b1); /* measured 6.52:1 */ background: linear-gradient(180deg, #fafbfd, #fff); /* opaque, by design */ border-top: 1px solid var(--line); box-shadow: inset 0 1px 0 #fff; } /* --accent-d, not --accent: #dc2626 measures 4.4:1 against the paper and fails. #b91c1c clears it at a measured 6.30:1 and is still unmistakably Skyline red. Do not "restore" --accent here without also removing the ledge. */ .gate-card--primary .gate-card__go { color: var(--accent-d); } .gate-card__go i { margin-inline-start: auto; /* rides `direction`; no mirror rule needed */ flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; color: #fff; background: linear-gradient(160deg, var(--b2), var(--b1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 12px -6px rgba(29, 78, 216, .7); /* fa-arrow-right is a fixed glyph. ONE declaration mirrors it and flips the axis its hover travel runs along, and because the mirror is baked into every transform that touches the glyph it is structurally impossible for a future hover rule to drop it. This replaces the two duplicated [dir="rtl"] rules the file carried at lines 482-483. */ transform: scaleX(var(--sx)); transition: transform .28s cubic-bezier(.2, .75, .2, 1), box-shadow .28s; } .gate-card--primary .gate-card__go i { background: linear-gradient(160deg, var(--accent), var(--accent-d)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 16px -6px rgba(220, 38, 38, .75); } /* -------------------------------------------------------- interaction states */ /* Last in the block on purpose: `:only-child` and `:hover` are both (0,2,0), so source order is what makes hover win over the single-card plane. */ .gate-card:hover, .gate-card:focus-visible { --e: 1.7; --rim: .95; --bloom: .3; --spec: 1; --spine: var(--b1); --spine-lit: rgba(37, 99, 235, .34); } .gate-card--primary:hover, .gate-card--primary:focus-visible { --e: 1.95; --spine: var(--accent); --spine-lit: rgba(220, 38, 38, .52); --emit: rgba(220, 38, 38, .78); } .gate-card:hover .gate-card__ic { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(29, 78, 216, .2), 0 16px 26px -12px rgba(29, 78, 216, .7); } .gate-card--primary:hover .gate-card__ic { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 1px rgba(185, 28, 28, .6), 0 18px 30px -12px rgba(220, 38, 38, .85); } .gate-card:hover .gate-card__go i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 10px 20px -6px rgba(29, 78, 216, .85); } .gate-card--primary:hover .gate-card__go i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 24px -6px rgba(220, 38, 38, .9); } /* ------------------------------------------------------------------- motion */ /* Opt-in, exactly as the rest of the sheet. Everything above is the RESTING state and the resting state is the finished plate — lit, elevated, filament drawn, documents pressed in. A reduced-motion visitor, or a browser that never runs the animation, sees a complete card. It simply does not rise when you pick it up. (Verified: with prefers-reduced-motion: reduce, the cards compute to opacity 1, translate: none, and the primary sits at translateY(-6px).) */ @media (prefers-reduced-motion: no-preference) { /* THE CASCADE FIX. Give `transform` back to the card: move the entrance onto the independent `translate` property. `translate` and `transform` compose, so the entrance owns one channel and elevation owns the other and neither can outrank the other again. Overriding `animation-name` alone keeps .gate-rise's .72s duration, easing, var(--d) delay and forwards fill. `translate` is Chrome 104+/Safari 14.1+/FF 72+ — strictly wider than the Safari 15.4 :has() floor this file already declines to rely on. On an older engine the entrance simply does not animate and the plate renders finished, which is the correct failure. */ .gate-card.gate-rise { opacity: 0; translate: 0 18px; transform: translateY(var(--lift)); animation-name: gateCardRise; } @keyframes gateCardRise { to { opacity: 1; translate: none; } } .gate-card { transition: transform .45s cubic-bezier(.2, .75, .2, 1), box-shadow .45s cubic-bezier(.2, .75, .2, 1); } /* The paper drifts on the sheet's own 64s clock, in the sheet's own direction — the plate is keyed to the drawing, not pasted onto it. background-position, not transform: it can never contribute to overflow. It lives on ::before rather than the card so it cannot collide with .gate-rise's `animation` shorthand. */ .gate-card::before { animation: gateCardDrift 64s linear infinite; } @keyframes gateCardDrift { to { background-position: 96px 96px, 96px 96px, 96px 96px, 96px 96px; } } /* Picking it up. It rises toward the lamp — so the rim burns brighter, the specular spreads, the filament lights, and the shadow lengthens and softens because the plate is further from the board. Vertical only: there is no horizontal component anywhere in this design, at any state. */ .gate-card:hover, .gate-card:focus-visible { --lift: -14px; } .gate-card--primary:hover, .gate-card--primary:focus-visible { --lift: -20px; } /* Put back down. */ .gate-card:active { --lift: -2px; --e: .9; transition-duration: .14s; } .gate-card__ic { transition: transform .35s cubic-bezier(.2, .75, .2, 1), box-shadow .35s; } .gate-card:hover .gate-card__ic { transform: translateY(-4px); } .gate-card:hover .gate-card__go i, .gate-card:focus-visible .gate-card__go i { transform: scaleX(var(--sx)) translateX(4px); } } /* ------------------------------------------------ auth panel (a form drawn) */ .gate-body--single { grid-template-columns: minmax(0, 1fr); place-items: center; flex: 1; align-content: center; } .gate-panel { position: relative; width: 100%; max-width: 448px; background: #fff; border-radius: 3px; padding: clamp(30px, 2.6vw, 44px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 40px 90px -40px rgba(2, 6, 23, .95); } /* One red rule along the top edge: the sheet's single accent. */ .gate-panel::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-d)); } .gate-panel__head { text-align: center; margin-bottom: 30px; } /* The thanks and invalid-link sheets are a head and nothing else. */ .gate-panel__head:last-child { margin-bottom: 0; } .gate-panel__head .pl-brandmark__img { max-height: 42px; } /* The shared brand mark is a 14px-radius pill; on this sheet everything is drawn with a 2px corner. */ .gate-panel__head .pl-brandmark__fallback { border-radius: 2px; } .gate-panel__t { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; letter-spacing: -.015em; color: var(--ink); margin: 18px 0 6px; } [dir="rtl"] .gate-panel__t { font-family: var(--ar), var(--serif); } .gate-panel__sub { color: var(--muted); font-size: .88rem; margin: 0; line-height: 1.55; } /* Mono labels, sitting above hairline-ruled fields: a form on a spec sheet. */ .gate-field { margin-bottom: 18px; } .gate-field > label { display: block; font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; } .gate .form-control { border-radius: 2px; border: 1px solid var(--line); background: var(--bg); padding: .68rem .8rem; font-size: .95rem; color: var(--ink); transition: border-color .18s, box-shadow .18s, background .18s; } .gate .form-control:focus { background: #fff; border-color: var(--b1); box-shadow: 0 0 0 3px rgba(29, 78, 216, .14); } .gate .form-control:disabled { color: var(--muted); } .gate-btn { width: 100%; border: 0; border-radius: 2px; padding: .82rem 1rem; font-weight: 600; font-size: .96rem; color: #fff; background: linear-gradient(135deg, var(--b1), var(--b2)); box-shadow: 0 12px 26px -12px rgba(29, 78, 216, .85); transition: transform .18s, box-shadow .18s, filter .18s; } .gate-btn:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 16px 32px -12px rgba(29, 78, 216, .95); } .gate-btn:active { transform: none; } .gate-btn--accent { background: linear-gradient(135deg, var(--accent), var(--accent-d)); box-shadow: 0 12px 26px -12px rgba(220, 38, 38, .8); } .gate-panel__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; font-size: .84rem; } .gate-panel__row label { color: var(--slate7); display: inline-flex; align-items: center; gap: 7px; margin: 0; } .gate-panel a { color: var(--b1); text-decoration: none; font-weight: 500; } .gate-panel a:hover { text-decoration: underline; } .gate-panel__foot { text-align: center; margin-top: 18px; font-size: .84rem; } .gate-panel .alert { border-radius: 2px; font-size: .85rem; border-width: 1px; } /* A single glyph, sized like a stamp — used by the invalid-link and thanks pages. */ .gate-stamp { width: 58px; height: 58px; border-radius: 2px; display: inline-grid; place-items: center; font-size: 24px; margin-bottom: 4px; } .gate-stamp--warn { background: var(--dangerl); color: var(--danger); } .gate-stamp--ok { background: var(--okl); color: var(--ok); } /* ---------------------------------------------------------- the title block */ /* Engineering drawings carry a title block in the bottom corner: who drew it, what it is, which sheet. This one is real — brand, page, locale, reference. */ .gate-block { margin-top: auto; border-top: 1px solid var(--rule-soft); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .gate-block > div { padding: 15px 18px; border-inline-start: 1px solid var(--rule-soft); min-width: 0; } .gate-block > div:first-child { border-inline-start: 0; padding-inline-start: 0; } .gate-block dt { font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--on-sheet-dim); margin: 0 0 5px; } .gate-block dd { margin: 0; font-size: .84rem; color: var(--on-sheet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gate-block dd.is-mono { font-family: var(--mono); letter-spacing: .08em; font-size: .78rem; } [dir="rtl"] .gate-block dd.is-mono { letter-spacing: .04em; } @media (max-width: 720px) { .gate-block { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gate-block > div:nth-child(3) { border-inline-start: 0; padding-inline-start: 0; } .gate-block > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule-soft); } } /* ------------------------------------------------------- language switcher */ /* The layout renders the floating switcher with its on-light skin. On this dark field it needs a glass one. */ .gate ~ .pl-lang--onlight, .pl-lang--onlight { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); backdrop-filter: blur(8px); } .pl-lang--onlight .pl-lang__opt { color: #c7d5f2; } .pl-lang--onlight .pl-lang__opt:hover { background: rgba(255, 255, 255, .10); color: #fff; } .pl-lang--onlight .pl-lang__opt.is-active { background: #fff; color: var(--b1); } /* -------------------------------------------------------------------- motion */ /* Opt-in, not opt-out: the resting state is the visible one, so a reduced-motion visitor — or a browser that never runs the animation — sees a finished page rather than an invisible one. */ @media (prefers-reduced-motion: no-preference) { .gate-rise { opacity: 0; transform: translateY(16px); animation: gateRise .72s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards; } @keyframes gateRise { to { opacity: 1; transform: none; } } .gate__grid { animation: gateDrift 64s linear infinite; } @keyframes gateDrift { to { transform: translate3d(96px, 96px, 0); } } /* One light sweep across the sheet on load, then never again. */ .gate__scan { background: linear-gradient(100deg, transparent 42%, rgba(167, 243, 208, .10) 50%, transparent 58%); transform: translateX(calc(-125% * var(--sx))); animation: gateScan 1.9s cubic-bezier(.4, 0, .1, 1) .3s 1 forwards; } @keyframes gateScan { to { transform: translateX(calc(125% * var(--sx))); } } .gate-dot--open { animation: gatePulse 2.4s ease-out infinite; } @keyframes gatePulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } .gate-card:hover .gate-card__sheen { opacity: 1; transform: translateX(calc(100% * var(--sx))); transition: transform .85s ease, opacity .2s; } } /* ============================================================== 2026-07-14 Plain-background variant (owner request): the sheet loses its drawn frame, corner registration ticks and drafting grid — a clean gradient field only. Title block, cards and lighting unchanged. Delete this block to restore the boxed "drawing sheet" look. */ .gate__frame { border: 0; } .gate__frame::before, .gate__frame::after, .gate__corners::before, .gate__corners::after { display: none; } .gate__grid { display: none; } /* -------------------------------------------------- 2026-07-14, second pass Three balance tweaks for the plain background (owner request): 1. the lede centres against the cards column, so the left side no longer ends in a dark void on tall screens; 2. the capability list loses its boxed grid — four quiet icon rows; 3. the title block drops the DOCUMENT and SHEET columns (drafting-sheet jargon on what is now a plain page). Issuer and language remain. */ .gate-body { align-items: center; } .gate-caps { background: transparent; border: 0; gap: 14px 26px; } .gate-caps li { padding: 0; background: transparent; } .gate-block { grid-template-columns: 1fr auto; } .gate-block > div:nth-child(2), .gate-block > div:nth-child(4) { display: none; } /* The reassurance line under the capability list. Quiet by design: it should be read second, never compete with the red card. */ .gate-trust { margin: 24px 0 0; max-width: 58ch; color: var(--on-sheet-dim); font-size: .88rem; line-height: 1.6; }