/* ================================================================ THE CLAUDE DESIGN BASE ---------------------------------------------------------------- Nine pages are being ported from the Claude Design project. This file holds what those pages PROVABLY share, so it is written once and cached once. IT IS NOT A GUESS AT WHAT LOOKS COMMON. Every rule below was verified identical across the design sources before it was moved here: the page ground byte identical in all three fetched designs the fonts Cinzel, DM Sans, IBM Plex Mono in all three the keyframes 8 shared names, every one byte identical 40 colours shared by all three palettes 18 style rules identical in both of the two large designs (* html,body a a:hover .cin .mono .lift .lift:hover .rowstack .hidesm .hidexs .sheet and the keyframes) WHAT DOES NOT BELONG HERE. Anything a single page decides: its layout grid, its components, its overlay widths, its close-button geometry. Internal Opportunities centres a 1180px reading column; the Recruitment Console is a three-column suite at 248px / 1fr / 320px. Those are page decisions and they live in the page's own stylesheet, which loads AFTER this one. WHY A SHARED FILE RATHER THAN A COPY PER PAGE. Two reasons, and the second matters more. It cannot drift: one definition of the gold, one of the lift. And a member on a slow connection downloads it once for all nine pages instead of once per page, which is the whole point for the users this was made faster for. LOAD ORDER: dc-base.css then dc-.css ================================================================ */ /* ── Tokens ───────────────────────────────────────────────────────────── The design repeats each literal because it is generated. Named once here. */ :root { --ij-gold: #f0c832; --ij-gold-b: rgba(240,200,50,.34); /* the gold border, everywhere */ --ij-gold-f: rgba(212,175,55,.10); /* the gold fill */ --ij-blue: #5588ff; --ij-amber: #f59e0b; --ij-green: #4cd657; --ij-red: #ff4848; --ij-ink: #f2f7ee; --ij-body: rgba(242,247,238,.88); --ij-muted: rgba(242,247,238,.62); --ij-line: rgba(255,255,255,.20); --ij-line2: rgba(255,255,255,.21); --ij-soft: rgba(255,255,255,.14); --ij-fill: rgba(255,255,255,.05); --ij-fill2: rgba(255,255,255,.04); --ij-fill3: rgba(255,255,255,.03); --ij-ease: cubic-bezier(.16,1,.3,1); --ij-card: linear-gradient(165deg,#172213,#111a0e); /* every overlay card */ } /* ── Reset and the page ground ─────────────────────────────────────────── */ * { box-sizing:border-box; } html, body { margin:0; padding:0; } body { min-height:100vh; font-family:'DM Sans', system-ui, sans-serif; color:var(--ij-ink); /* A green wash from the top right, a gold one from the bottom left, over near-black. Identical in every design in the project. */ background: radial-gradient(140% 90% at 85% -10%, rgba(4,80,30,.30), transparent 55%), radial-gradient(120% 80% at 0% 100%, rgba(240,200,50,.07), transparent 55%), #0c1109; } a { color:var(--ij-gold); text-decoration:none; } a:hover { color:var(--ij-ink); } .cin { font-family:'Cinzel', serif; } .mono { font-family:'IBM Plex Mono', ui-monospace, monospace; } /* ── Motion ─────────────────────────────────────────────────────────── Every keyframe in the project. Shared names are byte identical across the design files, which is why they can live here at all. */ @keyframes hdrDrop { from { transform:translateY(-100%); opacity:0 } to { transform:none; opacity:1 } } @keyframes sbIn { from { transform:translateX(-16px); opacity:0 } to { transform:none; opacity:1 } } @keyframes wgIn { from { transform:translateY(14px); opacity:0 } to { transform:none; opacity:1 } } @keyframes cvIn { from { transform:translateY(10px); opacity:0 } to { transform:none; opacity:1 } } @keyframes scIn { from { transform:translateY(12px) scale(.96); opacity:0 } to { transform:none; opacity:1 } } @keyframes mIn { from { transform:translateY(18px) scale(.985); opacity:0 } to { transform:none; opacity:1 } } @keyframes drIn { from { transform:translateX(28px); opacity:0 } to { transform:none; opacity:1 } } @keyframes fadeIn { from { opacity:0 } to { opacity:1 } } @keyframes shim { 0% { background-position:-380px 0 } 100% { background-position:380px 0 } } @keyframes blink { 0%,100% { opacity:1 } 50% { opacity:.3 } } @keyframes mdScan { 0% { background-position:200% 0 } 100% { background-position:-200% 0 } } /* The design's one hover treatment, on every card in the project. */ .lift { transition:transform .35s var(--ij-ease), border-color .25s var(--ij-ease), box-shadow .25s var(--ij-ease); } .lift:hover { transform:translateY(-2px); border-color:rgba(212,175,55,.3); box-shadow:0 16px 40px -12px rgba(0,0,0,.5), 0 0 30px -16px rgba(212,175,55,.3); } button { transition:background .25s var(--ij-ease), border-color .25s var(--ij-ease), color .25s var(--ij-ease), transform .18s var(--ij-ease); } button:not(:disabled):active { transform:translateY(1px); } button:disabled { opacity:.5; cursor:not-allowed; } :focus-visible { outline:2px solid var(--ij-gold); outline-offset:2px; border-radius:8px; } ::-webkit-scrollbar { width:10px; height:10px } ::-webkit-scrollbar-thumb { background:var(--ij-line2); border-radius:8px } input::placeholder, textarea::placeholder { color:var(--ij-muted); } @media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ── Buttons ─────────────────────────────────────────────────────────── The design uses ONE button language across the project and varies only the size by context: 44px in a card, 46px in a dialog, 48px on a committing action. So the language is here and the sizes are modifiers. THEY DO NOT USE .btn, AND MUST NOT. css/responsive.css carries body .btn:not(.btn-xs):not(.btn-sm){ padding:8px 16px!important; font-size:11px!important } inside its mobile query. Any design button wearing .btn loses its 44px touch target and drops to 11px text on every phone in the organisation. */ .ijb { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 15px; border-radius:12px; border:1px solid var(--ij-line2); background:var(--ij-fill); color:var(--ij-ink); font-family:'DM Sans', sans-serif; font-size:13.5px; cursor:pointer; text-decoration:none; } .ijb-gold { border-color:var(--ij-gold-b); background:linear-gradient(135deg,#f0c832,#f7d94e); color:#0c1109; padding:0 18px; font-size:14px; font-weight:700; } .ijb-gold:hover:not(:disabled) { background:linear-gradient(135deg,#f7d94e,#f0c832); } /* The quieter gold: a tint, not a fill. Where gold is a choice rather than the one thing to do. */ .ijb-tint { border-color:var(--ij-gold-b); background:rgba(212,175,55,.14); color:var(--ij-gold); padding:0 17px; font-weight:600; } .ijb-green { border-color:rgba(76,214,87,.45); background:transparent; color:var(--ij-green); padding:0 14px; font-size:13px; font-weight:600; } .ijb-red { border-color:rgba(255,72,72,.4); background:rgba(255,72,72,.10); color:var(--ij-red); min-height:46px; padding:0 17px; font-weight:600; } .ijb-danger { border-color:rgba(255,72,72,.5); background:rgba(255,72,72,.16); color:var(--ij-red); font-weight:700; } .ijb-md { min-height:46px; } .ijb-lg { min-height:48px; font-size:14.5px; } .ijb-grow { flex:1 1 auto; } .ijb-hold { flex:0 0 auto; } .ijb-full { width:100%; } .ijb-sq { width:44px; height:44px; padding:0; } .ijb-sm { min-height:40px; padding:0 14px; border-radius:10px; font-size:13px; } /* ── Overlay chrome ──────────────────────────────────────────────────── The scrim and the card are identical in both large designs. A page sets only its own max-width per overlay, and any heavier scrim: the Recruitment Console darkens to rgba(0,0,0,.76) with blur(5px) for the one dialog that changes the organisation's structure, which is a page decision. */ .modal-overlay { position:fixed; inset:0; z-index:700; background:rgba(0,0,0,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .25s var(--ij-ease) both; } .modal-card { width:100%; max-width:min(700px, calc(100vw - 24px)); max-height:calc(100vh - 40px); overflow-y:auto; padding:26px 24px; border-radius:16px; border:1px solid var(--ij-line); background:var(--ij-card); position:relative; animation:mIn .32s var(--ij-ease) both; } /* ── Shared responsive behaviour ─────────────────────────────────────── The three utilities and the mobile sheet, at the breakpoints the design puts them at. A page's OWN grid ladder lives in its own file. */ @media (max-width:820px) { .hidesm { display:none !important; } } @media (max-width:640px) { .hidexs { display:none !important; } .rowstack { flex-direction:column !important; align-items:stretch !important; } /* AND RESET THE BASIS (2026-07-29). The design's rows carry a flex-basis for the horizontal case, e.g. the Internal Opportunities hero states `flex:1 1 400px` on its main column. flex-basis applies to the MAIN AXIS, so the moment .rowstack flips the direction to column that 400px becomes a forced HEIGHT: measured on a 390px phone, a block 400px tall holding 180px of text, with a 220px void under it. The design has the same values and therefore the same fault. It is a 1080px preview and was never looked at on a phone, so this is a defect of the design rather than a decision in it, and reproducing it faithfully would ship a page that reads as broken. Basis reset to auto so a stacked child is as tall as its content; the horizontal case is untouched. */ .rowstack > * { flex-basis:auto !important; } /* A bottom sheet on a phone: it meets the thumb instead of floating in the middle of the screen. */ .sheet { align-items:flex-end !important; padding:0 !important; } .sheet > .modal-card { max-width:100% !important; border-radius:18px 18px 0 0 !important; max-height:92vh !important; padding-bottom:calc(22px + env(safe-area-inset-bottom)) !important; } }