/* ========================================================================== iFeed Connect — unified platform UI Built to match ifeed.ie (iFeed Home theme.css) + ClinAssure app-shell. LIGHT by default. Dark via . --if-* tokens are aligned to iFeed Home so Connect reads as a sibling of ifeed.ie. ========================================================================== */ /* ── DESIGN TOKENS · LIGHT is the :root default (matches ifeed.ie) ───────── */ :root{ /* canvas + surfaces */ --if-bg: oklch(96.5% 0.008 230); --if-bg-2: oklch(94% 0.010 230); --if-surface: oklch(98.5% 0.006 230); --if-surface-2: oklch(95.5% 0.009 230); /* rules / borders */ --if-border: oklch(82% 0.012 230); --if-rule: oklch(85% 0.014 230); --if-rule-2: oklch(76% 0.018 230); /* ink */ --if-ink: oklch(20% 0.030 250); --if-ink-2: oklch(34% 0.024 245); --if-ink-3: oklch(50% 0.018 240); --if-ink-4: oklch(62% 0.016 235); /* accent · monsoon teal */ --if-accent: oklch(50% 0.10 200); --if-accent-2: oklch(43% 0.10 200); --if-accent-bg: oklch(93% 0.030 200); --if-on-accent: oklch(99% 0 0); /* text on accent fill (always light) */ /* signal · saffron */ --if-signal: oklch(62% 0.16 65); --if-signal-bg: oklch(94% 0.04 70); /* domain hues (BA/BE/CT/QMS) — mirror ifeed.ie */ --ba: oklch(52% 0.20 240); --be: oklch(46% 0.18 155); --ct: oklch(46% 0.17 290); --qms: oklch(48% 0.13 200); /* status */ --if-good: oklch(50% 0.18 155); --if-good-bg: oklch(93% 0.05 150); --if-bad: oklch(55% 0.18 25); --if-bad-bg: oklch(94% 0.05 25); /* shadow */ --if-shadow-1: 0 1px 2px oklch(20% .03 250 / .06); --if-shadow-2: 0 4px 24px oklch(20% .02 250 / .09); --if-shadow-3: 0 24px 64px oklch(20% .02 250 / .16); color-scheme: light; } :root[data-theme="dark"]{ /* Matched EXACTLY to ClinAssure ifeed-platform-shell.css — low-chroma slate, hue 230, teal only on the accent. Extra Connect-only tokens below are kept but their chroma is dropped to ~0.03 and hues aligned so nothing glows. */ --if-bg: oklch(20% 0.022 230); --if-bg-2: oklch(16% 0.020 230); --if-bg-3: oklch(28% 0.022 230); --if-surface: oklch(24% 0.020 230); --if-surface-2: oklch(28% 0.020 230); --if-border: oklch(36% 0.020 230); --if-rule: oklch(40% 0.025 230); --if-rule-2: oklch(52% 0.028 230); --if-ink: oklch(92% 0.012 220); --if-ink-2: oklch(78% 0.014 220); --if-ink-3: oklch(64% 0.014 220); --if-ink-4: oklch(52% 0.014 220); --if-accent: oklch(72% 0.10 195); --if-accent-2: oklch(64% 0.10 195); --if-accent-bg: oklch(30% 0.040 200); --if-on-accent: oklch(16% 0.02 230); --if-signal: oklch(78% 0.12 70); --if-signal-bg: oklch(31% 0.05 70); /* domain hues (BA/BE/CT/QMS) — kept for chips but chroma lowered so calm */ --ba: oklch(70% 0.05 240); --be: oklch(70% 0.05 155); --ct: oklch(70% 0.05 290); --qms: oklch(72% 0.05 200); --if-good: oklch(74% 0.05 150); --if-good-bg: oklch(30% 0.03 150); --if-bad: oklch(70% 0.06 28); --if-bad-bg: oklch(30% 0.03 25); --if-shadow-1: 0 1px 2px oklch(0% 0 0 / 0.24); --if-shadow-2: 0 12px 32px oklch(0% 0 0 / 0.30); --if-shadow-3: 0 24px 64px oklch(0% 0 0 / 0.42); color-scheme: dark; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html,body{margin:0;padding:0} body{ font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--if-ink);background:var(--if-bg);min-height:100vh; font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; transition:none; } a{color:var(--if-accent);text-decoration:none} img,svg,table{max-width:100%} /* wordmark — Newsreader italic, matches ifeed.ie */ .wm{font:italic 700 1em/1 Newsreader,Georgia,serif;color:var(--if-accent)} /* ── TYPE HELPERS ────────────────────────────────────────────────────────── */ h1,h2,h3,h4{font-family:Inter,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--if-ink);margin:0} .kicker,.cat{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--if-ink-3)} .cat{color:var(--if-accent);display:block;margin-bottom:7px;font-size:9.5px} h1.title{font-size:clamp(24px,3.4vw,34px);line-height:1.08;margin:0 0 12px;letter-spacing:-.035em;font-weight:800} .lead{font-size:15.5px;line-height:1.6;color:var(--if-ink-3);max-width:680px} .muted{color:var(--if-ink-3)} .mono{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere} .err{color:var(--if-bad);font-size:13px;margin-top:8px;min-height:18px} .ok{color:var(--if-good);font-size:13px;margin-top:8px;min-height:18px} .tag{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--if-ink-4)} /* ── LAYOUT WRAP (used by public / auth pages) ───────────────────────────── */ .wrap{max-width:1120px;margin:0 auto;padding:18px 26px 70px} .wide{max-width:1240px} /* ── BUTTONS — high-contrast, Inter, matches ifeed.ie .btn system ────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer; border:1px solid transparent;border-radius:100px;background:var(--if-accent);color:var(--if-on-accent); font-weight:700;font-size:14px;font-family:Inter,sans-serif;padding:11px 20px;letter-spacing:.01em; transition:transform .15s,box-shadow .2s,border-color .2s,background .2s,color .2s;text-decoration:none} .btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--if-accent) 18%,transparent)} .btn.block{width:100%} .btn.sm{padding:8px 14px;font-size:13px} .btn.xs{padding:6px 11px;font-size:12px} /* ghost — readable border + ink, clear hover (fixes near-invisible ghosts) */ .btn.ghost{background:color-mix(in srgb,var(--if-surface) 70%,transparent);border:1px solid var(--if-rule-2);color:var(--if-ink-2);font-weight:600} .btn.ghost:hover{border-color:var(--if-accent);color:var(--if-accent);box-shadow:none;transform:translateY(-1px)} .btn.danger{background:var(--if-bad);color:#fff} .btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none} /* ── CARDS — iFeed card system (radius, --if-rule border, surface, shadow) ─ */ .card{border:1px solid var(--if-rule);border-radius:18px;background:var(--if-surface);padding:18px;box-shadow:var(--if-shadow-1);transition:border-color .18s,box-shadow .18s,transform .18s} /* interactive cards get a gentle lift + accent border on hover */ a.card:hover,.card.interactive:hover{border-color:color-mix(in srgb,var(--if-accent) 40%,var(--if-rule));box-shadow:var(--if-shadow-2);transform:translateY(-2px)} .grid{display:grid;gap:14px} .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .spacer{flex:1} hr.sep{border:none;border-top:1px solid var(--if-rule);margin:14px 0} /* ── INPUTS / TEXTAREAS — Inter 15px, clear border + focus ring, readable ── */ input,textarea,select{font-family:Inter,sans-serif} .field{margin-bottom:12px} .field label{display:block;font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--if-ink-3);margin-bottom:6px} .field input,.field select,.field textarea, input.inp,textarea.inp,select.inp{ width:100%;padding:11px 13px;border:1px solid var(--if-rule-2);border-radius:12px; background:var(--if-surface);color:var(--if-ink);font-size:15px;font-family:Inter,sans-serif;line-height:1.5; transition:border-color .15s,box-shadow .15s} .field input::placeholder,.field textarea::placeholder, input.inp::placeholder,textarea.inp::placeholder{color:var(--if-ink-4);opacity:1;font-family:Inter,sans-serif} .field input:focus,.field select:focus,.field textarea:focus, input.inp:focus,textarea.inp:focus,select.inp:focus{ outline:none;border-color:var(--if-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--if-accent) 22%,transparent)} textarea.inp{min-height:80px;resize:vertical} /* ── STATUS / TIER PILLS ─────────────────────────────────────────────────── */ .status{display:inline-flex;align-items:center;min-height:22px;padding:0 10px;border:1px solid var(--if-rule-2);border-radius:999px; font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--if-ink-3);white-space:nowrap} .status.live,.status.full{border-color:color-mix(in srgb,var(--if-good) 45%,var(--if-rule));background:var(--if-good-bg);color:color-mix(in srgb,var(--if-good) 78%,var(--if-ink))} .status.read,.status.demo{border-color:color-mix(in srgb,var(--if-signal) 45%,var(--if-rule));background:var(--if-signal-bg);color:color-mix(in srgb,var(--if-signal) 72%,var(--if-ink))} .status.none{opacity:.6} .status.admin{border-color:var(--if-accent);background:var(--if-accent-bg);color:var(--if-accent)} /* chips */ .chip{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--if-accent); border:1px solid color-mix(in srgb,var(--if-accent) 30%,var(--if-rule));border-radius:999px;padding:2px 9px;background:color-mix(in srgb,var(--if-accent) 6%,var(--if-surface))} /* tables (admin) */ table{border-collapse:collapse;width:100%;font-size:13px} th,td{padding:9px 11px;text-align:left;border-bottom:1px solid color-mix(in srgb,var(--if-rule) 65%,transparent)} thead th{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--if-ink-4)} tbody tr:hover{background:color-mix(in srgb,var(--if-accent) 5%,transparent)} .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px} .table-scroll table{min-width:620px} /* avatars — teal linear-gradient (two shades of --if-accent), white initials */ .av{flex:none;border-radius:50%;color:var(--if-on-accent);display:flex;align-items:center;justify-content:center;font-weight:800; font-family:"JetBrains Mono",monospace;letter-spacing:.02em; background:linear-gradient(140deg,var(--if-accent),var(--if-accent-2)); box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent)} .av.lg{width:54px;height:54px;font-size:18px} .av.md{width:40px;height:40px;font-size:14px} .av.sm{width:30px;height:30px;font-size:11px} /* theme toggle button (top-bar / nav) — ClinAssure sun/moon pill. Pill button holds two icon spans; CSS shows one per theme. */ .theme-btn,.if-theme-btn{cursor:pointer;border:1px solid var(--if-rule-2);background:color-mix(in srgb,var(--if-surface) 80%,transparent);color:var(--if-ink-2); border-radius:999px;width:36px;height:36px;font-size:15px;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;padding:0;flex:none} .theme-btn:hover,.if-theme-btn:hover{border-color:var(--if-accent);color:var(--if-accent)} /* ClinAssure sun/moon icon spans (exact) */ .if-theme-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:0} .if-theme-sun::before{content:"\2600";font-size:16px} .if-theme-moon::before{content:"\263E";font-size:16px} :root[data-theme="dark"] .if-theme-sun{display:none} :root:not([data-theme="dark"]) .if-theme-moon{display:none} /* ========================================================================== THE COCKPIT · the ONE chrome, identical on every signed-in page. Mirrors ClinAssure's QMS cockpit (clin-qms.css .cq-* system) exactly: body.ifc-body (deep --if-bg, 100dvh, overflow hidden on desktop) .ifc-canvas padded outer canvas (12px) .ifc-top rounded pill top bar (radius 20px) .ifc-grid 3-column CSS grid, gap 12px, fills remaining height .ifc-col ×3 rounded (18px) surface panels, 1px --if-rule border .ifc-col-head CONSTANT mono-uppercase label + hairline under it .ifc-col-body flex:1; min-height:0; overflow-y:auto — scrolls LEFT = MENU (profile card + nav + foot). CENTER = page main. RIGHT = support. ========================================================================== */ :root{ --ifc-pad:12px; --ifc-gap:12px; --ifc-top-h:64px; --ifc-max:1360px; --ifc-left:248px; --ifc-right:320px; } body.ifc-body{height:100dvh;min-height:100dvh;overflow:hidden;background:var(--if-bg);color:var(--if-ink)} /* outer padded canvas — the single frame everything lives in */ .ifc-canvas{height:100dvh;min-height:0;display:flex;flex-direction:column;gap:var(--ifc-gap); padding:var(--ifc-pad);max-width:var(--ifc-max);margin:0 auto;width:100%} /* ── TOP BAR — rounded pill; inner row capped + aligned to the panel edges ── */ .ifc-top{flex:none;border-radius:20px;border:1px solid var(--if-border); background:color-mix(in srgb,var(--if-surface) 92%,var(--if-bg)); box-shadow:var(--if-shadow-1);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)} .ifc-top-in{min-height:var(--ifc-top-h);display:flex;align-items:center;gap:16px;padding:10px 18px} .ifc-brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none} .ifc-brand .if-mark{font:italic 700 23px/1 Newsreader,Georgia,serif;letter-spacing:-.02em;color:var(--if-ink)} .ifc-brand .if-mark span{color:var(--if-accent)} .ifc-code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--if-accent);border:1px solid color-mix(in srgb,var(--if-accent) 32%,var(--if-rule));border-radius:999px;padding:3px 8px; background:color-mix(in srgb,var(--if-accent) 8%,transparent)} .pill-code { /* alias for ifc-code on public pages */ font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--if-accent-bg, oklch(93% 0.04 200)); color: var(--if-accent, oklch(48% 0.15 200)); border-radius: 4px; padding: 2px 7px; } /* centered search pill (capped clamp(240,32vw,460)) -> /directory.html?q= */ .ifc-search{position:relative;flex:0 1 auto;width:100%;max-width:clamp(240px,32vw,460px);min-width:0;margin:0 auto 0 0;display:flex;align-items:center} .ifc-search-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);display:flex;color:var(--if-ink-4);pointer-events:none} .ifc-search input{width:100%;height:40px;border:1px solid var(--if-rule-2);border-radius:999px; background:color-mix(in srgb,var(--if-surface) 96%,transparent);color:var(--if-ink); font-family:Inter,sans-serif;font-size:14px;padding:0 16px 0 42px;transition:border-color .15s,box-shadow .15s,background .15s; -webkit-appearance:none;appearance:none} .ifc-search input::placeholder{color:var(--if-ink-4);opacity:1} .ifc-search input::-webkit-search-cancel-button{-webkit-appearance:none} .ifc-search input:focus{outline:none;border-color:var(--if-accent);background:var(--if-surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--if-accent) 20%,transparent)} .ifc-search:focus-within .ifc-search-ic{color:var(--if-accent)} /* right action cluster — even ~40px controls */ .ifc-top-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none} .ifc-icon-btn{cursor:pointer;width:40px;height:40px;flex:none;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--if-rule-2);background:color-mix(in srgb,var(--if-surface) 82%,transparent);color:var(--if-ink-2); font-family:inherit;transition:border-color .15s,color .15s,background .15s} .ifc-icon-btn:hover{border-color:var(--if-accent);color:var(--if-accent);background:color-mix(in srgb,var(--if-accent) 8%,var(--if-surface))} .ifc-post{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px 0 13px;border-radius:999px;flex:none; background:var(--if-accent);color:var(--if-on-accent);font-family:Inter,sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.01em; text-decoration:none;border:1px solid transparent;transition:transform .15s,box-shadow .2s,background .2s} .ifc-post .tp-ic{font-size:17px;line-height:1;font-weight:400} .ifc-post:hover{transform:translateY(-1px);box-shadow:0 8px 22px color-mix(in srgb,var(--if-accent) 38%,transparent)} .ifc-notif{position:relative} .ifc-notif-dot{position:absolute;top:8px;right:8px;width:9px;height:9px;border-radius:50%; background:var(--if-signal);border:2px solid var(--if-surface);box-shadow:0 0 0 1px color-mix(in srgb,var(--if-signal) 55%,transparent)} .ifc-notif-pop{position:absolute;top:calc(100% + 10px);right:0;width:min(320px,86vw);z-index:70; background:var(--if-surface);border:1px solid var(--if-rule);border-radius:16px;box-shadow:var(--if-shadow-3); overflow:hidden;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;transition:opacity .14s,transform .14s} .ifc-notif.open .ifc-notif-pop{opacity:1;transform:none;pointer-events:auto} .ifc-notif-head{font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--if-ink-4);padding:13px 15px 9px;border-bottom:1px solid color-mix(in srgb,var(--if-rule) 65%,transparent)} .ifc-notif-list{max-height:320px;overflow-y:auto;padding:5px} .ifc-notif-empty{color:var(--if-ink-3);font-size:13px;text-align:center;padding:22px 12px} .ifc-notif-item{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:11px;text-decoration:none;color:var(--if-ink)} .ifc-notif-item:hover{background:color-mix(in srgb,var(--if-accent) 8%,transparent)} .ifc-notif-item .ni-txt{min-width:0;font-size:13px;line-height:1.35;color:var(--if-ink-2)} .ifc-notif-item .ni-txt b{color:var(--if-ink);font-weight:700} .ifc-notif-item .ni-sub{display:block;font-size:11.5px;color:var(--if-ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ifc-notif-foot{display:block;text-align:center;font-family:"JetBrains Mono",monospace;font-size:9.5px;font-weight:700;letter-spacing:.06em; color:var(--if-ink-3);padding:11px;border-top:1px solid color-mix(in srgb,var(--if-rule) 65%,transparent);text-decoration:none} .ifc-notif-foot:hover{color:var(--if-accent)} .ifc-tier{flex:none} .ifc-avatar{width:40px;height:40px;flex:none;border-radius:50%;text-decoration:none;display:inline-flex;transition:transform .15s,box-shadow .2s} .ifc-avatar .av-init{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:"JetBrains Mono",monospace;font-weight:800;font-size:14px;color:var(--if-on-accent);letter-spacing:.02em; background:linear-gradient(140deg,var(--if-accent),var(--if-accent-2));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent)} .ifc-avatar:hover{transform:translateY(-1px)} .ifc-avatar:hover .av-init{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent),0 0 0 3px color-mix(in srgb,var(--if-accent) 22%,transparent)} .ifc-burger{display:none;cursor:pointer;width:40px;height:40px;align-items:center;justify-content:center; border:1px solid var(--if-rule-2);border-radius:11px;background:var(--if-surface);color:var(--if-accent);font-size:17px;flex:none} .ifc-burger:hover{border-color:var(--if-accent)} /* ── THE GRID — three panels, gap 12px, fills the remaining height ── */ .ifc-grid{flex:1 1 auto;min-height:0;display:grid;gap:var(--ifc-gap);overflow:hidden; grid-template-columns:var(--ifc-left) minmax(0,1fr) var(--ifc-right)} .ifc-grid[data-center="wide"]{grid-template-columns:var(--ifc-left) minmax(0,1.35fr) var(--ifc-right)} /* 2-column layout for full-width module embeds: left nav + one wide panel. No right column reserves width, so the module gets the maximum center width. */ .ifc-grid[data-cols="2"]{grid-template-columns:var(--ifc-left) minmax(0,1fr)} .ifc-grid[data-cols="2"] .ifc-col-right{display:none} /* ── EACH PANEL — rounded surface, constant head + hairline, internal scroll ── */ .ifc-col{min-width:0;display:flex;flex-direction:column;min-height:0;overflow:hidden; background:var(--if-surface);border:1px solid var(--if-rule);border-radius:18px;box-shadow:var(--if-shadow-1)} /* CONSTANT head — EXACTLY ClinAssure's SOP FAMILIES / BE QMS / INSPECTOR label */ .ifc-col-head{flex-shrink:0;display:flex;align-items:center;gap:10px; padding:14px 16px 11px;border-bottom:1px solid var(--if-rule)} .ifc-col-title{font:800 9.5px/1 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em;text-transform:uppercase;color:var(--if-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ifc-col-meta{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:800;letter-spacing:.1em; text-transform:uppercase;color:var(--if-ink-4);white-space:nowrap;flex:none} .ifc-col-actions{margin-left:auto;display:flex;align-items:center;gap:6px;flex:none} .ifc-col-actions:empty{display:none} .ifc-col-meta + .ifc-col-actions{margin-left:8px} /* "open in new window" action on embedded module panels */ .ifc-open-ext{display:inline-flex;align-items:center;justify-content:center;width:27px;height:22px;border-radius:6px; color:var(--if-ink-3);border:1px solid var(--if-rule);background:transparent;cursor:pointer;text-decoration:none; transition:color .12s,border-color .12s,background .12s} .ifc-open-ext:hover{color:var(--if-accent,#238636);border-color:var(--if-accent,#238636);background:var(--if-surface-2)} /* the internally-scrolling body */ .ifc-col-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:16px;scrollbar-width:thin} /* ── LEFT column contents — profile card + nav + foot ── */ .ifc-left-body{display:flex;flex-direction:column;padding:12px;overflow:hidden} /* Admin ⇄ Member view switch (below the profile card, admin-only) */ .ifc-roleswitch{flex-shrink:0;display:flex;gap:3px;margin:12px 0 2px;padding:3px;border:1px solid var(--if-rule);border-radius:999px;background:var(--if-surface-2)} .ifc-rs-btn{flex:1;padding:7px 10px;border:none;border-radius:999px;background:transparent;color:var(--if-ink-3);font:800 10px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s} .ifc-rs-btn.on{background:var(--if-accent);color:var(--if-on-accent,#fff)} .ifc-rs-btn:not(.on):hover{color:var(--if-ink)} .ifc-profile{flex-shrink:0;display:block;position:relative;border:1px solid var(--if-rule);border-radius:16px;background:var(--if-surface); padding:0 15px 15px;margin-bottom:12px;text-decoration:none;overflow:hidden;box-shadow:var(--if-shadow-1);transition:border-color .18s,box-shadow .18s,transform .18s} .ifc-profile:hover{border-color:color-mix(in srgb,var(--if-accent) 40%,var(--if-rule));box-shadow:var(--if-shadow-2);transform:translateY(-1px)} .ifc-profile-strip{position:absolute;top:0;left:0;right:0;height:46px;background:color-mix(in srgb,var(--if-accent) 12%,var(--if-surface))} .ifc-profile-av{position:relative;z-index:1;margin:24px 0 0;border:3px solid var(--if-surface)} .ifc-profile-name{margin-top:9px;font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--if-ink);line-height:1.2} .ifc-profile-head{margin-top:2px;font-size:12px;color:var(--if-ink-3);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ifc-profile-id{margin-top:5px;font-size:9.5px;color:var(--if-ink-4);letter-spacing:.02em} .ifc-profile-stats{display:flex;gap:4px;margin-top:12px;padding-top:11px;border-top:1px solid color-mix(in srgb,var(--if-rule) 65%,transparent)} .ifc-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center} .ifc-stat b{font-size:14px;font-weight:800;color:var(--if-ink);letter-spacing:-.01em} .ifc-stat i{font-family:"JetBrains Mono",monospace;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--if-ink-4)} .ifc-nav{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:3px;padding:12px 4px 6px 0;border-top:1px solid var(--if-rule);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin} .ifc-nav-sec{font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase; color:var(--if-ink-4);padding:15px 12px 7px;margin:8px 4px 2px;border-top:1px solid color-mix(in srgb,var(--if-rule) 60%,transparent)} /* nav uses 999px pill links; active = accent-bg pill + accent text (ClinAssure .if-side-link.active) */ .ifc-nav-link{position:relative;display:flex;align-items:center;gap:11px;min-height:38px;padding:8px 12px 8px 13px;border-radius:999px;color:var(--if-ink-2); font-size:13.5px;font-weight:600;text-decoration:none;transition:background .13s,color .13s,border-color .13s;border:1px solid transparent} .ifc-nav-link .ic{width:19px;text-align:center;font-size:15px;flex:none;opacity:.85} .ifc-nav-link .lbl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ifc-nav-link:hover{background:color-mix(in srgb,var(--if-accent) 8%,transparent);color:var(--if-ink)} .ifc-nav-link.active{background:var(--if-accent-bg);color:var(--if-accent); border-color:color-mix(in srgb,var(--if-accent) 26%,var(--if-rule));font-weight:700} .ifc-nav-link.active .ic{opacity:1} .ifc-nav-link.active::before{content:"";position:absolute;left:2px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--if-accent)} .ifc-lock{margin-left:auto;display:inline-flex;align-items:center;gap:6px} .ifc-prem-tag{font-family:"JetBrains Mono",monospace;font-size:7.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--if-ink-4);background:color-mix(in srgb,var(--if-ink-4) 12%,transparent);border-radius:999px;padding:2px 6px} .ifc-lk{font-size:11px;opacity:.55} .ifc-nav-link:hover .ifc-prem-tag{color:var(--if-accent);background:color-mix(in srgb,var(--if-accent) 12%,transparent)} .ifc-nav-foot{flex-shrink:0;margin-top:10px;padding-top:14px;border-top:1px solid var(--if-rule);display:flex;align-items:center;gap:8px} .ifc-nav-foot .btn.ghost.xs{flex:1;justify-content:center} .ifc-nav-foot .btn.block{flex:1 1 100%} /* ── NAV COLLAPSIBLE GROUPS ── */ .ifc-nav-group{display:flex;flex-direction:column} .ifc-nav-group-head{display:flex;align-items:center;gap:11px;min-height:38px;padding:8px 12px 8px 13px;border-radius:999px;color:var(--if-ink-2);font-size:13.5px;font-weight:600;cursor:pointer;background:none;border:1px solid transparent;width:100%;text-align:left;transition:background .13s,color .13s;font-family:inherit} .ifc-nav-group-head .ic{width:19px;text-align:center;font-size:15px;flex:none;opacity:.85} .ifc-nav-group-head .lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ifc-nav-chevron{font-size:11px;opacity:.4;transition:transform .22s ease,opacity .22s;flex:none;margin-left:auto;display:inline-block;line-height:1} .ifc-nav-group-head:hover{background:color-mix(in srgb,var(--if-accent) 8%,transparent);color:var(--if-ink)} .ifc-nav-group-head:hover .ic{opacity:1} .ifc-nav-group.open>.ifc-nav-group-head{color:var(--if-accent);font-weight:700;border-color:color-mix(in srgb,var(--if-accent) 24%,var(--if-rule))} .ifc-nav-group.open>.ifc-nav-group-head .ic{opacity:1} .ifc-nav-group.open>.ifc-nav-group-head .ifc-nav-chevron{transform:rotate(90deg);opacity:.75} .ifc-nav-group-body{overflow:hidden;max-height:0;transition:max-height .26s ease,opacity .22s ease;opacity:0;padding-left:10px;display:flex;flex-direction:column;gap:2px} .ifc-nav-group.open>.ifc-nav-group-body{max-height:420px;opacity:1;margin-top:2px;padding-bottom:4px} .ifc-nav-child{min-height:34px!important;padding:5px 10px 5px 11px!important;font-size:12.5px!important;border-radius:12px!important} .ifc-nav-child .ic{font-size:13px!important;width:17px!important} /* ── MODULE IFRAME EMBED ── */ .ifc-col-body.ifc-embed-body{padding:0;overflow:hidden} .ifc-col-body.ifc-embed-body iframe{width:100%;height:100%;border:none;display:block;min-height:0} /* ── MODULE LANDING PAGES (.ifm-*) ── */ .ifm-landing{display:flex;flex-direction:column;gap:22px;max-width:620px} .ifm-hero{display:flex;align-items:flex-start;gap:18px} .ifm-hero-ic{font-size:40px;line-height:1;flex:none;margin-top:4px} .ifm-hero-text{display:flex;flex-direction:column} .ifm-badge{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--if-accent);background:var(--if-accent-bg);border:1px solid color-mix(in srgb,var(--if-accent) 24%,var(--if-rule));border-radius:999px;padding:2px 9px;margin-bottom:8px} .ifm-name{font-size:22px;font-weight:800;letter-spacing:-.025em;color:var(--if-ink);margin:0;line-height:1.1} .ifm-tagline{font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--if-ink-3);margin:6px 0 0} .ifm-about{font-size:13.5px;line-height:1.74;color:var(--if-ink-2);border-left:3px solid var(--if-accent);padding-left:14px;margin:0} .ifm-feats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px} .ifm-feat{background:var(--if-surface);border:1px solid var(--if-rule);border-radius:14px;padding:14px 15px;display:flex;flex-direction:column;gap:4px} .ifm-feat-ic{font-size:18px;line-height:1;margin-bottom:2px} .ifm-feat-title{font-size:12px;font-weight:700;color:var(--if-ink);letter-spacing:-.01em} .ifm-feat-desc{font-size:11.5px;color:var(--if-ink-3);line-height:1.53} .ifm-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:4px} .ifm-open{display:inline-flex;align-items:center;gap:7px;padding:11px 24px;background:var(--if-accent);color:#fff!important;border-radius:999px;font-weight:700;font-size:13.5px;text-decoration:none!important;transition:opacity .13s;letter-spacing:-.01em} .ifm-open:hover{opacity:.86;text-decoration:none!important} .ifm-note{font-size:11.5px;color:var(--if-ink-4)} /* ── RIGHT empty-state — ClinAssure "Select a SOP / Choose a document…" ── */ .ifc-empty{height:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:24px} .ifc-empty-glyph{font-size:34px;line-height:1;color:var(--if-ink-4);opacity:.6} .ifc-empty-title{font-family:"Source Serif 4",Georgia,serif;font-weight:600;font-size:17px;color:var(--if-ink-2)} .ifc-empty-line{font-family:Newsreader,Georgia,serif;font-style:italic;font-size:13.5px;color:var(--if-ink-4);line-height:1.5;max-width:30ch} /* right-column section sub-headers reuse the mono+hairline (ClinAssure) */ .ifc-col-body .railcard h4,.ifc-col-body .subh{font-family:"JetBrains Mono",monospace} /* ── SCRIM + BOTTOM TAB BAR (mobile) ── */ .ifc-scrim{display:none;position:fixed;inset:0;background:oklch(0% 0 0 / .42);z-index:55;border:0} .ifc-tabbar{display:none} /* ── SECTION SUB-HEADER (mono + hairline) — reusable inside any column ── */ .ifc-subhead{font:800 9px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--if-ink-4); margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--if-rule);display:flex;align-items:center;gap:7px} /* underline tabs — ClinAssure .cq-eptab pattern */ .ifc-tabs{display:flex;gap:6px;border-bottom:1px solid var(--if-rule);overflow-x:auto;margin:0 0 14px} .ifc-tab{min-height:38px;display:inline-flex;align-items:center;padding:0 4px;border:0;border-bottom:2px solid transparent;background:transparent; color:var(--if-ink-4);font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;white-space:nowrap} .ifc-tab:hover{color:var(--if-ink)} .ifc-tab.on{color:var(--if-accent);border-bottom-color:var(--if-accent)} /* ── RIGHT-COLUMN CARD (.railcard) + section rows — carried from old build, re-homed for the cockpit right/center bodies (mono+hairline sub-headers). ── */ .railcard{border:1px solid var(--if-rule);border-radius:16px;background:var(--if-surface);padding:16px;box-shadow:var(--if-shadow-1);margin-bottom:16px;transition:border-color .18s,box-shadow .18s} .railcard:last-child{margin-bottom:0} .railcard h4{display:flex;align-items:center;gap:7px;font:800 9px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--if-ink-4);margin:0 0 12px} .railcard h4::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--if-accent);flex:none} /* ========================================================================== RESPONSIVE — the cockpit holds its shape, then gracefully unpacks. ≥1200px : full fixed 3-col cockpit, panels scroll internally. 1000–1199px : keep 3-col; shrink right ~280, left ~220. 700–999px : left nav -> slide-over drawer (hamburger) + bottom tab bar; body returns to normal flow; CENTER then RIGHT stack full width; each .ifc-col-head becomes a section divider. ≤699px : single column; compact top bar; bottom tab bar; stacked. ========================================================================== */ /* 1000–1199px — trim the side columns so the center keeps room */ @media(max-width:1199px){ :root{ --ifc-left:220px; --ifc-right:284px; } } /* ≤999px — TABLET: drawer nav + bottom tabs; document flow; stacked panels */ @media(max-width:999px){ body.ifc-body{height:auto;min-height:100dvh;overflow:visible} .ifc-canvas{height:auto;min-height:0;display:block;padding:10px 12px calc(72px + env(safe-area-inset-bottom))} .ifc-top{position:sticky;top:10px;z-index:60;margin-bottom:12px} .ifc-burger{display:inline-flex} /* grid -> single flowing column of stacked sections */ .ifc-grid,.ifc-grid[data-center="wide"]{display:block;overflow:visible;height:auto} .ifc-col{display:block;min-height:0;overflow:visible;margin-bottom:12px;border-radius:18px} .ifc-col-body{overflow:visible;min-height:0} /* each head stays as a section divider (mono label + hairline) */ .ifc-col-head{border-radius:18px 18px 0 0} /* LEFT column becomes a slide-over drawer */ .ifc-col-left{position:fixed;top:0;left:0;bottom:0;z-index:96;width:min(300px,86vw); margin:0;border-radius:0 18px 18px 0;overflow:hidden;display:flex;flex-direction:column; transform:translateX(-104%);transition:transform .2s ease;box-shadow:var(--if-shadow-3)} .ifc-col-left .ifc-col-body{overflow-y:auto} body.ifc-nav-open .ifc-col-left{transform:translateX(0)} body.ifc-nav-open .ifc-scrim{display:block} /* bottom tab bar — 5 primary destinations */ .ifc-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:59; height:calc(58px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--if-bg) 92%,transparent); backdrop-filter:saturate(1.4) blur(16px);-webkit-backdrop-filter:saturate(1.4) blur(16px); border-top:1px solid var(--if-border);padding:6px 4px env(safe-area-inset-bottom)} .ifc-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; color:var(--if-ink-3);text-decoration:none;font-size:9.5px;font-weight:700;border-radius:12px;padding:4px 0;transition:color .13s,background .13s;min-width:0} .ifc-tabbar a .ic{font-size:20px;line-height:1} .ifc-tabbar a span:not(.ic){letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .ifc-tabbar a:active{background:color-mix(in srgb,var(--if-accent) 10%,transparent)} .ifc-tabbar a.active{color:var(--if-accent)} .ifc-tabbar a.active .ic{transform:translateY(-1px)} .ifc-tabbar a.ifc-tab-post .ic{width:40px;height:40px;margin-top:-14px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;line-height:1; background:var(--if-accent);color:var(--if-on-accent);box-shadow:0 6px 18px color-mix(in srgb,var(--if-accent) 40%,transparent);border:3px solid var(--if-bg)} .ifc-tabbar a.ifc-tab-post{color:var(--if-ink-3)} .ifc-tabbar a.ifc-tab-post.active .ic{transform:none} } /* ≤699px — MOBILE: compact top bar (logo + search + avatar) + bottom tabs */ @media(max-width:699px){ :root{ --ifc-top-h:54px; } .ifc-canvas{padding:8px 10px calc(70px + env(safe-area-inset-bottom))} .ifc-top{border-radius:16px;top:8px} .ifc-top-in{gap:10px;padding:8px 12px;min-height:var(--ifc-top-h)} .ifc-post,.ifc-tier{display:none} /* +Post lives in the bottom tab */ .ifc-code{display:none} .ifc-brand .if-mark{font-size:21px} .ifc-top-right{gap:7px} .ifc-icon-btn,.ifc-avatar,.ifc-avatar .av-init{width:36px;height:36px} .ifc-search{flex:1 1 auto;max-width:none;margin:0} .ifc-search input{height:36px} .ifc-notif-pop{width:min(300px,92vw)} .ifc-col{border-radius:16px} /* touch targets ≥44px */ .ifc-nav-link{min-height:44px} .ifc-tabbar a{min-height:44px} } /* very small — inputs 16px (no iOS zoom) */ @media(max-width:420px){ .ifc-search input{font-size:16px} .ifc-col-body input,.ifc-col-body textarea,.ifc-col-body select, .ifc-col-body .composer textarea,.ifc-col-body .composer .linkinp{font-size:16px} } /* print — flatten the cockpit */ @media print{ body.ifc-body{height:auto;overflow:visible} .ifc-top,.ifc-col-left,.ifc-scrim,.ifc-tabbar{display:none!important} .ifc-canvas{display:block;padding:0;max-width:none} .ifc-grid{display:block} .ifc-col{border:0;box-shadow:none;overflow:visible;display:block} .ifc-col-body{overflow:visible} } /* composer — iFeed card, Inter, readable */ .composer{border:1px solid var(--if-rule);border-radius:18px;background:var(--if-surface);padding:16px 18px;box-shadow:var(--if-shadow-1)} /* the member avatar sits beside an inviting, comfortable input */ .composer .av{align-self:flex-start} .composer textarea{width:100%;min-height:56px;resize:vertical;border:1px solid var(--if-rule-2);border-radius:14px; background:color-mix(in srgb,var(--if-surface-2) 55%,var(--if-surface));color:var(--if-ink);font-family:Inter,sans-serif;font-size:15px;line-height:1.55;padding:12px 15px; transition:border-color .15s,box-shadow .15s,background .15s} .composer textarea:hover{border-color:var(--if-rule-2)} .composer textarea::placeholder{color:var(--if-ink-4);opacity:1} .composer textarea:focus{outline:none;border-color:var(--if-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--if-accent) 20%,transparent)} .composer .linkinp{flex:1;padding:10px 13px;border:1px solid var(--if-rule-2);border-radius:11px;background:var(--if-surface);color:var(--if-ink);font-family:Inter,sans-serif;font-size:14px} .composer .linkinp::placeholder{color:var(--if-ink-4);opacity:1} .composer .linkinp:focus{outline:none;border-color:var(--if-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--if-accent) 20%,transparent)} .tagrow{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0} .tg{cursor:pointer;border:1px solid var(--if-rule-2);background:var(--if-surface);color:var(--if-ink-2);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;font-family:Inter,sans-serif} .tg:hover{border-color:var(--if-accent)} .tg.on{background:var(--if-accent);border-color:var(--if-accent);color:var(--if-on-accent)} .scopebar,.seg{display:inline-flex;border:1px solid var(--if-rule-2);border-radius:999px;overflow:hidden;background:var(--if-surface)} .scopebar button,.seg button{border:none;background:transparent;color:var(--if-ink-2);padding:8px 18px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:Inter,sans-serif} .scopebar button.on,.seg button.on{background:var(--if-accent);color:var(--if-on-accent)} /* posts */ .post{border:1px solid var(--if-rule);border-radius:16px;background:var(--if-surface);padding:16px 18px;margin-bottom:14px;box-shadow:var(--if-shadow-1);transition:border-color .18s,box-shadow .18s} .post:hover{border-color:color-mix(in srgb,var(--if-rule-2) 80%,var(--if-accent));box-shadow:var(--if-shadow-2)} .post-head{display:flex;gap:11px;align-items:flex-start} .post-head .meta{flex:1;min-width:0} .post-head .who{font-weight:700;font-size:14.5px;cursor:pointer;color:var(--if-ink)} .post-head .who:hover{color:var(--if-accent)} .post-head .sub{font-size:12.5px;color:var(--if-ink-3);overflow:hidden;text-overflow:ellipsis} .post-kind{font-family:"JetBrains Mono",monospace;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--if-rule-2);color:var(--if-ink-4)} .post-kind.signal{border-color:color-mix(in srgb,var(--if-signal) 45%,var(--if-rule));background:var(--if-signal-bg);color:color-mix(in srgb,var(--if-signal) 74%,var(--if-ink))} .post-title{font-size:16.5px;font-weight:800;margin:11px 0 5px;letter-spacing:-.015em;color:var(--if-ink)} .post-body{font-size:14.5px;line-height:1.6;color:var(--if-ink-2);white-space:pre-wrap;word-wrap:break-word} .post-tags{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap} .post-actions{display:flex;gap:6px;margin-top:12px;border-top:1px solid color-mix(in srgb,var(--if-rule) 60%,transparent);padding-top:10px} .act{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;color:var(--if-ink-3);font-size:13px;font-weight:600;cursor:pointer;padding:6px 10px;border-radius:8px;font-family:Inter,sans-serif} .act:hover{background:color-mix(in srgb,var(--if-accent) 8%,transparent);color:var(--if-ink)} .act.on{color:var(--if-accent)} .comments{margin-top:11px;border-top:1px solid color-mix(in srgb,var(--if-rule) 60%,transparent);padding-top:11px} .comment{display:flex;gap:9px;margin-bottom:10px} .comment .bub{background:var(--if-surface-2);border:1px solid var(--if-rule);border-radius:12px;padding:8px 11px;flex:1} .comment .bub b{font-size:12.5px} .comment .bub p{margin:2px 0 0;font-size:13px;color:var(--if-ink-2);white-space:pre-wrap} .empty{color:var(--if-ink-3);text-align:center;padding:30px 0} /* people rows */ .person,.wtf{display:flex;gap:11px;align-items:center;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--if-rule) 60%,transparent)} .person:first-child,.wtf:first-of-type{border-top:none} .wtf{border-radius:10px;padding:9px 6px;margin:0 -6px;transition:background .13s} .wtf:hover{background:color-mix(in srgb,var(--if-accent) 6%,transparent)} .person .meta,.wtf .meta{flex:1;min-width:0} .person .meta b,.wtf .meta b{font-size:13.5px;cursor:pointer;color:var(--if-ink);display:block} .person .meta b:hover,.wtf .meta b:hover{color:var(--if-accent)} .person .meta span,.wtf .meta span{display:block;font-size:12px;color:var(--if-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .trend{display:flex;justify-content:space-between;padding:6px 0;font-size:13.5px} .trend .c{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--if-ink-4)} .premrow{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:13.5px} .sigcard{border:1px solid color-mix(in srgb,var(--if-signal) 40%,var(--if-rule));background:var(--if-signal-bg)} .premcard{border:1px dashed color-mix(in srgb,var(--if-accent) 45%,var(--if-rule))} /* Seeking / Offering badges + the compact 'Requests near your expertise' rows on the Home right rail (shared with the Connect board cards). */ .reqbadge{font-family:"JetBrains Mono",monospace;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; border-radius:999px;padding:2px 8px;border:1px solid var(--if-rule-2);color:var(--if-ink-4);flex:none} .reqbadge.seek{color:color-mix(in srgb,var(--if-accent) 78%,var(--if-ink));border-color:color-mix(in srgb,var(--if-accent) 40%,var(--if-rule));background:var(--if-accent-bg)} .reqbadge.offer{color:color-mix(in srgb,var(--if-good) 78%,var(--if-ink));border-color:color-mix(in srgb,var(--if-good) 40%,var(--if-rule));background:var(--if-good-bg)} .reqnear{display:block;text-decoration:none;color:inherit;padding:9px 0;border-top:1px solid color-mix(in srgb,var(--if-rule) 60%,transparent)} .reqnear:first-child{border-top:none} .reqnear .rn-top{display:flex;align-items:center;gap:7px} .reqnear .rn-by{font-size:11.5px;color:var(--if-ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .reqnear .rn-title{margin-top:4px;font-size:13px;font-weight:600;line-height:1.35;color:var(--if-ink)} .reqnear:hover .rn-title{color:var(--if-accent)} /* pill-tabs (upgrade etc) */ .pill-tabs{display:flex;gap:6px;flex-wrap:wrap} .ptab{cursor:pointer;border:1px solid var(--if-rule-2);background:var(--if-surface);color:var(--if-ink-2);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;font-family:Inter,sans-serif} .ptab.sel{background:var(--if-accent);border-color:var(--if-accent);color:var(--if-on-accent)} /* modal */ .modal-bg{position:fixed;inset:0;background:oklch(0% 0 0 / .5);display:none;align-items:center;justify-content:center;padding:20px;z-index:90} .modal-bg.show{display:flex} .modal{max-width:520px;width:100%;max-height:88vh;overflow:auto} /* ── ENTITLEMENT GATE / UPSELL PANEL (embed pages) ───────────────────────── */ .embed-frame{width:100%;height:100%;border:0;display:block;background:var(--if-bg)} .embed-host{height:100%;display:flex;flex-direction:column} .embed-bar{flex:none;display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid var(--if-border); background:color-mix(in srgb,var(--if-surface) 70%,transparent)} .embed-bar .t{font-weight:800;font-size:15px;letter-spacing:-.01em} .embed-bar .sub{font-size:12.5px;color:var(--if-ink-3)} .embed-bar .grow{flex:1} .embed-wrap{flex:1 1 auto;min-height:0;position:relative} .upsell{max-width:560px;margin:8vh auto 0;text-align:center;padding:34px 30px; border:1px solid var(--if-rule);border-radius:22px;background:var(--if-surface);box-shadow:var(--if-shadow-2)} .upsell .badge{display:inline-flex;align-items:center;gap:7px;font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:800; letter-spacing:.12em;text-transform:uppercase;color:var(--if-accent);padding:5px 13px;border-radius:100px;margin-bottom:16px; background:var(--if-accent-bg);border:1px solid color-mix(in srgb,var(--if-accent) 30%,var(--if-rule))} .upsell h2{font-size:clamp(22px,3vw,28px);letter-spacing:-.03em;margin-bottom:10px} .upsell p{font-size:15px;color:var(--if-ink-3);line-height:1.65;margin:0 auto 22px;max-width:46ch} .upsell .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ── FULL-WIDTH EMBED (2-col) — the module fills the CENTER panel edge-to-edge. The center head carries a compact collapsible "About / premium" affordance so the About copy never steals width from the module. ─────────────────────────── */ /* On desktop the center body is already flex:1 inside a 100dvh column, so the module fills naturally. This min-height guards non-flex / short-content cases and gives the dense Immune AI app (DOMAIN / WORKSPACE / DOCUMENT-CLASS panes) plenty of room. topbar(64)+canvas pad(24)+col head(~44)+gaps(24) ≈ 156. */ #ifcCenterBody:has(#embedHost){min-height:calc(100dvh - 104px)} #ifcCenterBody #embedHost,#ifcCenterBody .embed-host{min-height:inherit} /* the small "About" pill in the center header (data-cols=2 embed pages) */ .ifc-about-btn{cursor:pointer;display:inline-flex;align-items:center;gap:6px;flex:none; border:1px solid var(--if-rule-2);background:color-mix(in srgb,var(--if-surface) 82%,transparent);color:var(--if-ink-3); border-radius:999px;padding:4px 11px;font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; transition:border-color .15s,color .15s,background .15s} .ifc-about-btn:hover,.ifc-about-btn[aria-expanded="true"]{border-color:var(--if-accent);color:var(--if-accent);background:color-mix(in srgb,var(--if-accent) 8%,var(--if-surface))} .ifc-about-btn .ic{font-size:11px;line-height:1} /* the collapsible strip that drops below the head, above the iframe */ .ifc-about-panel{display:none;flex:none;border-bottom:1px solid var(--if-rule); background:color-mix(in srgb,var(--if-surface) 70%,transparent);padding:14px 18px} .ifc-about-panel.open{display:block} .ifc-about-panel p{font-size:12.5px;color:var(--if-ink-3);line-height:1.6;margin:0;max-width:76ch} .ifc-about-panel .ifc-about-prem{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px; padding-top:12px;border-top:1px solid color-mix(in srgb,var(--if-rule) 60%,transparent)} .ifc-about-panel .ifc-about-prem span{font-size:12px;color:var(--if-ink-3)} /* keep the module edge-to-edge whether or not the about panel is open */ #ifcCenterBody:has(#embedHost) .embed-host{height:100%} /* ── EMBED FALLBACK — polished launch panel when a module can't be framed (cross-origin X-Frame-Options / frame-ancestors block). ClinAssure card. ── */ .embed-fallback{max-width:560px;margin:7vh auto 0;text-align:center;padding:34px 30px; border:1px solid var(--if-rule);border-radius:22px;background:var(--if-surface);box-shadow:var(--if-shadow-2)} .embed-fallback .badge{display:inline-flex;align-items:center;gap:7px;font-family:"JetBrains Mono",monospace;font-size:9px;font-weight:800; letter-spacing:.12em;text-transform:uppercase;color:var(--if-ink-3);padding:5px 13px;border-radius:100px;margin-bottom:16px; background:color-mix(in srgb,var(--if-surface-2) 55%,var(--if-surface));border:1px solid var(--if-rule-2)} .embed-fallback h2{font-size:clamp(21px,2.6vw,27px);letter-spacing:-.03em;margin-bottom:10px} .embed-fallback p{font-size:14.5px;color:var(--if-ink-3);line-height:1.65;margin:0 auto 22px;max-width:48ch} .embed-fallback .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .embed-fallback .btn.lg{padding:13px 22px;font-size:15px} .embed-fallback .fb-note{font-size:12px;color:var(--if-ink-4);margin:18px auto 0;max-width:44ch} /* small "trouble loading?" link under a mounted iframe */ .embed-trouble{flex:none;text-align:center;padding:8px 12px;font-size:12px;color:var(--if-ink-4); border-top:1px solid color-mix(in srgb,var(--if-rule) 55%,transparent);background:color-mix(in srgb,var(--if-surface) 60%,transparent)} .embed-trouble a{color:var(--if-ink-3);text-decoration:underline;text-underline-offset:2px} .embed-trouble a:hover{color:var(--if-accent)} /* Responsive: on tablet/mobile the embed goes full-width and stacks; give it a tall min-height so it never collapses (the drawer/tab layout removes the 100dvh flex parent, so an explicit height is required here). */ @media(max-width:999px){ #ifcCenterBody:has(#embedHost){min-height:86dvh;padding:0} #ifcCenterBody #embedHost,#ifcCenterBody .embed-host{min-height:86dvh} .embed-fallback{margin:24px auto} } @media(max-width:699px){ #ifcCenterBody:has(#embedHost){min-height:86dvh} #ifcCenterBody #embedHost,#ifcCenterBody .embed-host{min-height:86dvh} } /* ── AUTH / LANDING (public index.html) helpers ──────────────────────────── */ .auth-split{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start} .feature-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px} @media(max-width:880px){.auth-split{grid-template-columns:1fr;gap:18px}.auth-split .auth-panel{order:-1}} @media(max-width:560px){.feature-cards{grid-template-columns:1fr 1fr;gap:10px}} @media(max-width:380px){.feature-cards{grid-template-columns:1fr}} /* nav on public pages (sticky top strip, ifeed.ie style) */ .nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--if-bg) 84%,transparent); backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--if-border)} .nav-in{max-width:1120px;margin:0 auto;padding:14px 26px;display:flex;align-items:center;gap:22px;position:relative} .nav .brand{font:italic 700 22px/1 Newsreader,Georgia,serif;color:var(--if-accent);text-decoration:none;letter-spacing:-.01em} .nav .brand span{color:var(--if-accent)} .nav-links{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:13.5px;font-weight:600} .nav-links a{color:var(--if-ink-2)} .nav-links a:hover{color:var(--if-accent)} @media(max-width:820px){ .nav-links{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:0; background:color-mix(in srgb,var(--if-bg) 97%,var(--if-surface));border-bottom:1px solid var(--if-border); padding:6px 0;display:none;box-shadow:var(--if-shadow-3)} .nav-links.open{display:flex} .nav-links a{padding:12px 26px;font-size:15px} } /* ========================================================================== BACK-COMPAT: legacy .pillbar top-bar (kept so any not-yet-migrated page still renders acceptably). New pages use the app-shell above. ========================================================================== */ .pillbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 18px;margin-bottom:22px; border:1px solid var(--if-border);border-radius:20px;background:color-mix(in srgb,var(--if-surface) 92%,var(--if-bg));box-shadow:var(--if-shadow-1); backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px)} .pillbar .brand{display:flex;align-items:center;gap:9px;text-decoration:none} .pillbar .if-mark{font:italic 700 24px/1 Newsreader,Georgia,serif;letter-spacing:-.02em;color:var(--if-ink)} .pillbar .if-mark span{color:var(--if-accent)} .pill-title{font-size:13px;color:var(--if-ink-2)}.pill-title em{font-style:italic;font-family:Newsreader,serif;color:var(--if-ink-3)} .pill-menu{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .nav-toggle{display:none} @media(max-width:820px){ .nav-toggle{display:inline-flex;cursor:pointer;width:38px;height:38px;align-items:center;justify-content:center; border:1px solid var(--if-rule-2);border-radius:11px;background:var(--if-surface);color:var(--if-accent);font-size:17px;flex:none} .pill-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;flex-direction:column;align-items:stretch;gap:9px; background:var(--if-surface);border:1px solid var(--if-rule);border-radius:16px;padding:12px;box-shadow:var(--if-shadow-2);display:none;z-index:60} .pillbar.nav-open .pill-menu{display:flex} .pill-menu>*{width:100%;justify-content:center;text-align:center} } /* ========================================================================== PREMIUM MEMBER PROFILE SYSTEM — LinkedIn-class profile in iFeed's design language. Banner (inline SVG or custom image) + overlapping circular photo, identity block, About / Expertise / Experience / Education cards, and a print-perfect export. Uses the existing --if-* tokens + .card / .av system. ========================================================================== */ /* PREMIUM chip in the top bar (subtle, teal-tinted) + inline name badge */ .ifc-tier.ifc-premium{color:var(--if-accent);border-color:color-mix(in srgb,var(--if-accent) 42%,var(--if-rule)); background:var(--if-accent-bg);letter-spacing:.14em} .if-premium-badge{display:inline-flex;align-items:center;vertical-align:middle; font-family:"JetBrains Mono",monospace;font-size:8.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--if-accent);border:1px solid color-mix(in srgb,var(--if-accent) 42%,var(--if-rule)); background:var(--if-accent-bg);border-radius:999px;padding:2px 8px;line-height:1;white-space:nowrap} .if-premium-badge.sm{font-size:7.5px;padding:2px 6px;letter-spacing:.1em} /* ── The profile card: banner across the top, body below ─────────────────── */ .pcard-profile{padding:0;overflow:hidden} .pbanner{position:relative;width:100%;line-height:0} .pbanner .pbanner-svg,.pbanner .pbanner-img{display:block;width:100%;height:auto} .pbanner .pbanner-img{width:100%;height:auto;object-fit:contain} /* Circular photo overlaps the banner's bottom-left, thick surface ring */ .pphoto{position:absolute;left:26px;bottom:-42px;width:120px;height:120px;border-radius:50%; border:5px solid var(--if-surface);background:var(--if-surface);box-shadow:var(--if-shadow-2);overflow:hidden;z-index:2} .pphoto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%} .pphoto .av{width:100%;height:100%;font-size:38px;border-radius:50%;box-shadow:none} .pbody{padding:54px 26px 24px} /* Identity block */ .pident .p-name{font-family:"Source Serif 4","Source Serif Pro",Newsreader,Georgia,serif; font-weight:700;font-size:27px;line-height:1.12;letter-spacing:-.01em;color:var(--if-ink);margin:0; display:flex;align-items:center;gap:9px;flex-wrap:wrap} .pident .p-verify{color:var(--if-accent);display:inline-flex;flex:none} .pident .p-pron{font-size:13px;font-weight:600;color:var(--if-ink-4);font-family:Inter,sans-serif;letter-spacing:0} .pident .p-head{font-size:15.5px;color:var(--if-ink-2);margin:7px 0 0;line-height:1.5;max-width:60ch} .pident .p-loc{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:13px;color:var(--if-ink-3);align-items:center} .pident .p-loc b{color:var(--if-ink-2);font-weight:700} .pident .p-loc .dot{width:3px;height:3px;border-radius:50%;background:var(--if-ink-4);display:inline-block} .p-chiprow{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px} /* Verified tick glyph (inline SVG sizing) */ .p-verify svg{width:19px;height:19px;display:block} /* Primary actions row */ .p-actionbar{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px} .p-actionbar .btn{text-decoration:none} /* Section cards below the profile header */ .psec{margin-top:16px} .psec .card{padding:20px 22px} .psec-h{font-family:"Source Serif 4","Source Serif Pro",Newsreader,Georgia,serif;font-weight:700; font-size:18px;letter-spacing:-.01em;color:var(--if-ink);margin:0 0 12px} .p-about{font-size:15px;line-height:1.7;color:var(--if-ink-2);white-space:pre-wrap;margin:0} .p-expertise{display:flex;flex-wrap:wrap;gap:8px} .p-exp-chip{font-size:13px;font-weight:600;border:1px solid var(--if-rule-2);border-radius:999px; padding:6px 13px;color:var(--if-ink-2);background:var(--if-surface)} /* Experience timeline */ .p-timeline{position:relative;margin:0;padding:0;list-style:none} .p-tl-item{position:relative;padding:0 0 20px 26px} .p-tl-item:last-child{padding-bottom:0} .p-tl-item::before{content:"";position:absolute;left:5px;top:6px;bottom:-2px;width:1px;background:var(--if-rule)} .p-tl-item:last-child::before{display:none} .p-tl-item::after{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%; background:var(--if-surface);border:2px solid var(--if-accent);z-index:1} .p-tl-title{font-weight:800;font-size:15px;color:var(--if-ink);line-height:1.3} .p-tl-org{font-size:14px;color:var(--if-ink-2);margin-top:1px} .p-tl-meta{font-family:"JetBrains Mono",monospace;font-size:10px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--if-ink-4);margin-top:4px;display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center} .p-tl-cur{color:var(--if-good);border:1px solid color-mix(in srgb,var(--if-good) 40%,var(--if-rule)); background:var(--if-good-bg);border-radius:999px;padding:1px 7px} .p-tl-sum{font-size:14px;line-height:1.6;color:var(--if-ink-2);margin-top:7px;white-space:pre-wrap} .p-edu-item{padding:10px 0;border-top:1px solid color-mix(in srgb,var(--if-rule) 55%,transparent)} .p-edu-item:first-child{border-top:none;padding-top:0} .p-edu-school{font-weight:800;font-size:14.5px;color:var(--if-ink)} .p-edu-cred{font-size:13.5px;color:var(--if-ink-2);margin-top:1px} .p-edu-year{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.08em;color:var(--if-ink-4);margin-top:3px} .p-empty{color:var(--if-ink-3);font-size:13.5px;margin:0} /* Right column tweaks reused for profile detail */ .p-link-row{display:flex;flex-direction:column;gap:8px} /* Print header (hidden on screen; shown only in print) */ .print-only{display:none} /* ── Responsive: mobile — banner scales, photo re-centers, cards stack ───── */ @media(max-width:640px){ .pphoto{left:16px;transform:none;bottom:-38px;width:84px;height:84px;border-width:4px} .pphoto .av{font-size:30px} .pbody{padding:52px 18px 20px;text-align:center} .pident .p-name{justify-content:center} .pident .p-loc{justify-content:center} .p-chiprow{justify-content:center} .p-actionbar{justify-content:center} .p-actionbar .btn{flex:1 1 auto;min-width:120px} .psec .card{padding:16px} /* timeline reads fine but the About/expertise centering is undone for text */ .p-about,.p-tl-sum{text-align:left} .p-expertise{justify-content:center} } /* ========================================================================== PRINT-PERFECT EXPORT — the key differentiator. Hide ALL cockpit chrome and render a clean, single-column, A4-friendly, fully-formatted profile with the colour banner + circular photo intact. Not a text dump. ========================================================================== */ @media print{ @page{size:A4;margin:14mm 14mm} html,body{background:#fff !important;height:auto !important;overflow:visible !important} *{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important} /* Hide the cockpit chrome entirely */ .ifc-top,.ifc-tabbar,.ifc-scrim,.ifc-col-left,.ifc-col-right, .ifc-col-head,#modal,.p-actionbar,.ifc-burger,.ifc-notif,.if-theme-btn{display:none !important} /* Collapse the cockpit shell to a single flowing column */ .ifc-body{display:block !important;overflow:visible !important} .ifc-canvas{display:block !important;padding:0 !important;height:auto !important} .ifc-grid{display:block !important;height:auto !important} .ifc-col,.ifc-col-center{display:block !important;border:none !important;background:#fff !important; box-shadow:none !important;border-radius:0 !important;height:auto !important;overflow:visible !important} .ifc-col-body,#ifcCenterBody{display:block !important;padding:0 !important;overflow:visible !important;height:auto !important} /* Show the print-only iFeed header */ .print-only{display:block !important} .print-header{display:flex;align-items:baseline;justify-content:space-between; padding-bottom:8px;margin-bottom:14px;border-bottom:1.5px solid var(--if-accent)} .print-header .pm{font-family:Newsreader,Georgia,serif;font-style:italic;font-weight:700;font-size:22px;color:var(--if-ink)} .print-header .pm .dot{color:var(--if-accent)} .print-header .pk{font-family:"JetBrains Mono",monospace;font-size:8.5px;font-weight:800; letter-spacing:.16em;text-transform:uppercase;color:var(--if-ink-3)} /* The profile card + all sections print in colour, avoid breaking inside */ .card,.pcard-profile,.psec,.psec .card,.railcard{border:1px solid var(--if-rule) !important; box-shadow:none !important;break-inside:avoid;page-break-inside:avoid;margin:0 0 12px !important;background:#fff !important} .pcard-profile{overflow:visible} .pbanner{break-inside:avoid} .pbanner .pbanner-svg,.pbanner .pbanner-img{width:100% !important} .p-tl-item,.p-edu-item{break-inside:avoid;page-break-inside:avoid} .psec-h,.p-name{break-after:avoid} /* Hide the back link + any screen-only helpers */ .no-print{display:none !important} a[href]::after{content:"" !important} /* don't append URLs after links */ } .ifc-rail-prem{display:inline-block;margin:7px 0 0;font:800 8.5px/1 "JetBrains Mono",monospace;letter-spacing:.14em;color:var(--if-accent);background:var(--if-accent-bg);border:1px solid color-mix(in srgb,var(--if-accent) 32%,var(--if-rule));border-radius:999px;padding:3px 9px} .card.pcard-profile{padding:0} .pcard-profile .pbanner,.pcard-profile .pbanner-svg,.pcard-profile .pbanner-img{border-radius:0} /* === V03 banner (exact, from artifact) === */ :root { --hero-base: #0d2a30; --hero-mid: #102f3a; --hero-end: #0d4a5a; --hero-deep: #082025; --hero-fg: rgba(248,252,254,0.98); --hero-fg-soft: rgba(220,235,240,0.92); --hero-em: rgba(160,220,235,1); } .page-h { max-width: 1400px; margin: 0 auto 24px; padding-bottom: 16px; border-bottom: 1px solid #cdd5d8; } .page-h .badge { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.20em; text-transform: uppercase; padding: 5px 12px; background: #0d4a5a; color: white; border-radius: 4px; font-weight: 600; display: inline-block; margin-bottom: 10px; } .page-h h1 { font-family: 'Source Serif 4', serif; font-size: 22px; font-weight: 500; letter-spacing: -0.018em; line-height: 1.3; color: #102f3a; } .page-h h1 em { font-family: 'Newsreader', serif; font-style: italic; color: #0d4a5a; } .page-h .meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #455a64; letter-spacing: 0.04em; line-height: 1.6; margin-top: 6px; } .page-h code { background: #d5dde0; padding: 1px 6px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; } .v-card { width: 100%; max-width: 1400px; margin: 0 auto 24px; } .v-card .v-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; padding: 0 4px; flex-wrap: wrap; gap: 10px; } .v-card .v-label { font-family: 'Source Serif 4', serif; font-size: 17px; font-weight: 600; color: #102f3a; letter-spacing: -0.01em; } .v-card .v-label .num { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #0d4a5a; margin-right: 8px; letter-spacing: 0.06em; } .v-card .v-note { font-family: 'Inter', sans-serif; font-size: 12px; color: #455a64; max-width: 65%; text-align: right; line-height: 1.5; } .banner-fit { width: 100%; position: relative; aspect-ratio: 1584 / 396; overflow: hidden; background: #082025; border-radius: 4px; box-shadow: 0 4px 24px -8px rgba(13,42,48,0.35); } .banner-fit .banner { position: absolute; top: 0; left: 0; width: 1584px; height: 396px; transform-origin: top left; transform: scale(var(--banner-scale, 1)); } .banner { color: var(--hero-fg); background: linear-gradient(135deg, var(--hero-deep) 0%, var(--hero-base) 60%, var(--hero-mid) 100%); } .banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 100% at 70% 50%, color-mix(in srgb, var(--hero-end) 60%, transparent) 0%, transparent 70%); z-index: 1; } /* Brain · default transform · variations override */ .banner .brain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; transform-origin: center right; } .banner .brain .brain-dots circle { fill: var(--hero-fg); } .banner .brain .brain-lines line { stroke: var(--hero-fg); stroke-width: 0.4; opacity: 0.32; } .banner .brain .brain-lines line.firing { stroke: var(--hero-em); stroke-width: 0.9; opacity: 0.85; filter: drop-shadow(0 0 4px var(--hero-em)); } .banner .brain .brain-focals circle.focal { fill: var(--hero-em); filter: drop-shadow(0 0 8px var(--hero-em)); transform-box: fill-box; transform-origin: center; animation: focal-pulse 2.8s ease-in-out infinite; } @keyframes focal-pulse { 0%,100% { opacity: 0.95; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } .banner .brain .cl { stroke: var(--hero-em); stroke-width: 0.4; opacity: 0.18; } .banner .brain .far-dot { fill: var(--hero-em); opacity: 0.55; } .banner .brain .mid-dot { fill: var(--hero-em); opacity: 0.78; filter: drop-shadow(0 0 4px var(--hero-em)); } .banner .brain .glow-dot { fill: var(--hero-em); filter: drop-shadow(0 0 12px var(--hero-em)) drop-shadow(0 0 4px var(--hero-em)); transform-box: fill-box; transform-origin: center; animation: glow-pulse 3.4s ease-in-out infinite; } @keyframes glow-pulse { 0%,100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.25); } } /* REAL profile-overlay marker · matches actual LinkedIn photo footprint */ /* LinkedIn renders the photo at ~256px circle, bottom:-72, left:88 */ .banner .profile-overlay-real { position: absolute; left: 88px; bottom: -72px; width: 256px; height: 256px; border-radius: 50%; border: 3px dashed rgba(255,255,255,0.35); background: repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 8px, rgba(255,255,255,0.06) 8px 16px); z-index: 40; } /* Footer strip · base styles · per-variation overrides left + font sizes */ .banner .footer-strip { position: absolute; right: 60px; bottom: 28px; display: flex; align-items: baseline; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(160,220,235,0.30); z-index: 5; } .banner .footer-strip .motto { font-family: 'Newsreader', serif; font-style: italic; color: var(--hero-fg-soft); letter-spacing: 0.005em; margin-right: 24px; } .banner .footer-strip .name { font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; color: var(--hero-em); letter-spacing: 0.01em; white-space: nowrap; } /* iFeed wordmark · 72px · top-left · UNCHANGED across all 5 */ .banner .v07-mark { position: absolute; top: 28px; left: 80px; z-index: 8; font-family: 'Newsreader', serif; font-style: italic; font-weight: 500; font-size: 72px; line-height: 1; letter-spacing: -0.025em; color: rgba(255,255,255,0.97); } .banner .v07-mark .ac { color: rgba(160,220,235,1); } .banner .v07-mark .dot { color: rgba(160,220,235,1); font-style: italic; } /* Middle text · base · per-variation overrides left */ .banner .v07-mid { position: absolute; top: 50%; transform: translateY(-50%); max-width: 360px; z-index: 6; } .banner .v07-eye { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(160,220,235,1); margin-bottom: 14px; font-weight: 600; } .banner .v07-block { border-left: 3px solid rgba(160,220,235,0.85); padding-left: 14px; margin-bottom: 12px; } .banner .v07-block-soft { border-left-color: rgba(160,220,235,0.35); border-left-width: 2px; padding-left: 15px; } .banner .v07-line { font-family: 'Source Serif 4', serif; font-size: 22px; font-weight: 500; color: rgba(255,255,255,0.97); line-height: 1.4; letter-spacing: -0.003em; } .banner .v07-aux { font-family: 'Source Serif 4', serif; font-size: 17px; font-weight: 400; color: rgba(220,235,240,0.85); } /* ─── PER-VARIATION OVERRIDES ─────────────────────────────────── */ .var-v01 .v07-mid { left: 480px; } .var-v01 .brain { transform: translate(60px, 0) scale(1.0); } .var-v01 .footer-strip { left: 500px; } .var-v01 .footer-strip .motto { font-size: 15px; } .var-v01 .footer-strip .name { font-size: 17px; } .var-v02 .v07-mid { left: 520px; } .var-v02 .brain { transform: translate(80px, 0) scale(0.98); } .var-v02 .footer-strip { left: 540px; } .var-v02 .footer-strip .motto { font-size: 16px; } .var-v02 .footer-strip .name { font-size: 18px; } .var-v03 .v07-mid { left: 560px; } .var-v03 .brain { transform: translate(100px, 0) scale(0.96); } .var-v03 .footer-strip { left: 580px; } .var-v03 .footer-strip .motto { font-size: 17px; } .var-v03 .footer-strip .name { font-size: 19px; } .var-v04 .v07-mid { left: 600px; } .var-v04 .brain { transform: translate(120px, 0) scale(0.94); } .var-v04 .footer-strip { left: 620px; } .var-v04 .footer-strip .motto { font-size: 18px; } .var-v04 .footer-strip .name { font-size: 20px; } .var-v05 .v07-mid { left: 640px; } .var-v05 .brain { transform: translate(140px, 0) scale(0.92); } .var-v05 .footer-strip { left: 660px; } .var-v05 .footer-strip .motto { font-size: 19px; } .var-v05 .footer-strip .name { font-size: 22px; } .page-foot { max-width: 1400px; margin: 50px auto 0; padding: 16px 4px; border-top: 1px solid #cdd5d8; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #455a64; letter-spacing: 0.04em; } .pbanner .banner-fit.v03fit{position:relative;width:100%;aspect-ratio:1584/396;overflow:hidden;border-radius:inherit;line-height:normal} .pbanner .banner-fit.v03fit .banner{position:absolute;top:0;left:0;transform-origin:top left} /* === mobile: lock scroll to the body container (app-like), fixed top bar === */ @media(max-width:999px){ body.ifc-body{height:100dvh;min-height:100dvh;overflow:hidden} .ifc-canvas{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:10px 12px 0} .ifc-top{flex:none;position:static;top:auto;margin-bottom:10px} .ifc-grid,.ifc-grid[data-center="wide"]{flex:1 1 auto;min-height:0;display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 0 calc(74px + env(safe-area-inset-bottom))} .ifc-col{overflow:visible} .ifc-col-body{overflow:visible} } /* === top-bar icon order: post · message · connect · notification · home · theme · photo === */ .ifc-top-right{gap:8px} .ifc-top-right > #ifcPost{order:1} .ifc-top-right > a[href="/messages.html"]{order:2} .ifc-top-right > a[href="/directory.html"]{order:3} .ifc-top-right > #ifcNotifWrap{order:4} .ifc-top-right > a[href="/home.html"]{order:5} .ifc-top-right > #ifcTheme{order:6} .ifc-top-right > #ifcTopAv{order:7} /* === boot cloak: kill theme-flash + build-flash on load and navigation === */ html.ifc-booting *,html.ifc-booting *::before,html.ifc-booting *::after{transition:none !important} html.ifc-booting body{visibility:hidden} /* smooth, coordinated theme fade — applied only during a toggle (load uses the boot cloak) */ /* theme toggle = INSTANT, no animation at all -> cannot flicker or repaint the photo */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after{ transition: none !important; } /* V03 banner stays hidden until JS scales it — prevents the unscaled 1584px flash on profile open */ .pbanner .banner-fit.v03fit .banner{visibility:hidden} /* === FORCE V03 banner visible — hardcoded colours, independent of theme + svg group structure === */ .pbanner .banner{ background:linear-gradient(135deg,#082025 0%,#0d2a30 55%,#123642 100%) !important; } .pbanner .banner circle{ fill:#eef7f8 !important; } .pbanner .banner line{ stroke:rgba(150,210,225,0.26) !important; stroke-width:0.5 !important; } .pbanner .banner div, .pbanner .banner span, .pbanner .banner a, .pbanner .banner p{ color:rgba(255,255,255,0.95) !important; } /* ── Skeleton loading ─────────────────────────────── */ @keyframes ifc-shimmer { 0% { background-position: -600px 0; } 100% { background-position: 600px 0; } } .skel { background: linear-gradient(90deg, var(--if-rule, oklch(88% 0.01 220)) 25%, var(--if-surface, oklch(92% 0.008 220)) 50%, var(--if-rule, oklch(88% 0.01 220)) 75%); background-size: 600px 100%; animation: ifc-shimmer 1.4s ease-in-out infinite; border-radius: 6px; } .skel-line { height: 14px; margin-bottom: 10px; } .skel-line.short { width: 55%; } .skel-line.xshort { width: 35%; } .skel-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; } .skel-card { padding: 18px; border-radius: 14px; background: var(--if-surface); border: 1px solid var(--if-rule); margin-bottom: 12px; } .skel-row { display: flex; gap: 12px; align-items: flex-start; } .skel-body { flex: 1; min-width: 0; }