/* IAGD theme foundation. Ports the SuperApp design system (Frontend/src/app/globals.css in the iagd_superapp repo) to the v2 website as hand-authored CSS. No Tailwind, no build step. Pages opt in by putting .iagd-app on ; pages without that class (admin console, un-migrated legacy pages) are untouched, so Bootstrap and this file can coexist during the rollout. Contents: 1. Inter @font-face (global by nature; font-family only applies inside .iagd-app) 2. Design tokens on .iagd-app 3. Base surface: solid base color, static radial tint, noise grain 4. Type helpers, split-color brand title 5. Layout helpers (container, stack, cluster, grids) 6. Primitives: card, button, icon button, pill, field + inputs, peso input, select, textarea, spinner, skeleton, empty state, status badge, option card, document upload, sheet, modal 7. Motion: fluent easings, entrance keyframes, press feedback 8. Reduced-motion overrides Mica-honesty rules carried over from the SuperApp: solid base color, one static wallpaper-like tint, film-grain overlay, no constant motion, no pointer-following effects. Motion fires on state change only. */ /* ---- 1. Inter ------------------------------------------------------ */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.ttf") format("truetype"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.ttf") format("truetype"); } /* ---- 2. Tokens ----------------------------------------------------- */ .iagd-app { /* Base: the Mica fallback color. */ --color-base: #1a1340; --color-base-alt: #14102f; /* Content layers. */ --color-layer: rgba(255, 255, 255, 0.04); --color-layer-soft: rgba(255, 255, 255, 0.06); --color-layer-alt: rgba(255, 255, 255, 0.08); --color-layer-stroke: rgba(255, 255, 255, 0.08); --color-layer-stroke-strong: rgba(255, 255, 255, 0.12); --color-layer-stroke-accent: rgba(124, 58, 237, 0.32); /* Opaque panel surface for drawers, sheets, modals. */ --color-surface: #100c26; /* Inset top highlight that makes panels read as elevated. */ --shadow-layer-edge: inset 0 1px 0 rgba(255, 255, 255, 0.05); /* Text. */ --color-text-on-dark: #ffffff; --color-dim-1: rgba(220, 210, 255, 0.75); --color-dim-2: rgba(220, 210, 255, 0.5); /* Accent violet + gold. */ --color-accent: #7c3aed; --color-accent-soft: rgba(124, 58, 237, 0.18); --color-accent-deep: #5b21b6; --color-accent-text: #c4a8ff; --color-gold: #e6c97a; --color-gold-deep: #b8995a; /* Semantic status hues (SuperApp StatusBadge palette). */ --color-ok: #34d399; --color-warn: #fbbf24; --color-danger: #f87171; --color-info: #38bdf8; --radius-card: 8px; --font-sans: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; --font-mono: "Cascadia Code", Consolas, "Courier New", monospace; /* Fluent motion easings. */ --ease-fluent: cubic-bezier(0.1, 0.9, 0.2, 1); --ease-fluent-out: cubic-bezier(0.33, 0, 0.1, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); } /* ---- 3. Base surface ----------------------------------------------- */ body.iagd-app { margin: 0; padding: 0; background: var(--color-base); font-family: var(--font-sans); color: var(--color-text-on-dark); min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; } .iagd-app *, .iagd-app *::before, .iagd-app *::after { box-sizing: border-box; } .iagd-app ::-webkit-scrollbar { width: 8px; height: 8px; } .iagd-app ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; } /* Static wallpaper-like tint, sampled once, no animation. z-index 0 under a grain overlay at z-index 1; page content wraps in .iagd-page (position relative, z-index 2) so it composites above both. */ body.iagd-app::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(80% 60% at 15% 0%, rgba(124, 58, 237, 0.18), transparent 70%), radial-gradient(60% 50% at 100% 100%, rgba(34, 211, 238, 0.06), transparent 70%); } /* Film-grain overlay. Plain opacity, no blend mode (cheap composite). */ body.iagd-app::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background-image: url("../assets/textures/noise.png"); background-repeat: repeat; background-size: 128px 128px; opacity: 0.04; } .iagd-page { position: relative; z-index: 2; } /* Opaque panel surface with its own grain (backdrops hide the body grain). */ .iagd-mica-panel { background-color: var(--color-surface); background-image: linear-gradient(rgba(16, 12, 38, 0.92), rgba(16, 12, 38, 0.92)), url("../assets/textures/noise.png"); background-repeat: no-repeat, repeat; background-size: auto, 128px 128px; } /* ---- 4. Type ------------------------------------------------------- */ .iagd-app h1, .iagd-app h2, .iagd-app h3, .iagd-app h4, .iagd-app h5, .iagd-app h6 { margin: 0; font-weight: 700; line-height: 1.2; } .iagd-app p { margin: 0; } .iagd-app a { color: var(--color-accent-text); text-decoration: none; } .iagd-dim-1 { color: var(--color-dim-1); } .iagd-dim-2 { color: var(--color-dim-2); } /* Section eyebrow: tiny bold caps, accent text (SuperApp group headers). */ .iagd-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: var(--color-accent-text); } /* Split-color brand title: violet "International Animal", gold "Genetics Database". Static, no motion. Wrap the gold half in . */ .iagd-split-title { color: var(--color-accent-text); } .iagd-split-title > .gold { color: var(--color-gold); } /* Brand gradient wordmark, reserved for the hero headline only. */ .iagd-gradient-text { background: linear-gradient( 100deg, var(--color-accent-text) 0%, var(--color-text-on-dark) 30%, var(--color-gold) 60%, var(--color-accent-text) 100% ); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: iagdBrandGradientShift 12s ease-in-out infinite; } @keyframes iagdBrandGradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ---- 5. Layout helpers --------------------------------------------- */ .iagd-container { width: 100%; max-width: 1100px; margin-inline: auto; padding-inline: 24px; } @media (max-width: 640px) { .iagd-container { padding-inline: 16px; } } /* Vertical rhythm between sibling blocks. */ .iagd-stack > * + * { margin-top: 16px; } .iagd-stack-sm > * + * { margin-top: 8px; } .iagd-stack-lg > * + * { margin-top: 24px; } /* Horizontal row that wraps. */ .iagd-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Service-tile style grid: 3-up on phones, scales up on wide screens. */ .iagd-tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } @media (min-width: 768px) { .iagd-tile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } /* Card grid: 1-up phones, 2-up tablets, 3-up desktop. */ .iagd-card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } @media (min-width: 640px) { .iagd-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .iagd-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---- 6. Primitives ------------------------------------------------- */ /* Card. */ .iagd-card { background: var(--color-layer); border: 1px solid var(--color-layer-stroke); border-radius: var(--radius-card); box-shadow: var(--shadow-layer-edge); padding: 16px; } .iagd-card--soft { background: var(--color-layer-soft); } .iagd-card--accent { border-color: var(--color-layer-stroke-accent); background: linear-gradient(180deg, rgba(124, 58, 237, 0.10), rgba(124, 58, 237, 0.04)), var(--color-layer); } /* Interactive card: border + background respond, never box-shadow (animating shadows across a grid of cards is the main jank source). */ .iagd-card--tap { transition: border-color 140ms var(--ease-fluent), background-color 140ms var(--ease-fluent); cursor: pointer; } .iagd-card--tap:hover { border-color: rgba(124, 58, 237, 0.45); } /* Anchor rendered as a card. */ a.iagd-card { display: block; color: inherit; } /* Buttons. Base + variants; anchor and button both work. */ .iagd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-card); border: 1px solid transparent; font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--color-text-on-dark); background: var(--color-layer-alt); cursor: pointer; user-select: none; text-decoration: none; white-space: nowrap; transition: transform 180ms var(--ease-fluent), background-color 180ms var(--ease-fluent), border-color 180ms var(--ease-fluent), filter 180ms var(--ease-fluent); } .iagd-btn:hover { filter: brightness(1.1); } .iagd-btn:active { transform: scale(0.97); } .iagd-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .iagd-btn:disabled, .iagd-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } .iagd-btn--primary { background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-deep) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); } .iagd-btn--ghost { background: transparent; border-color: var(--color-layer-stroke-strong); } .iagd-btn--danger { background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.4); color: #fca5a5; } .iagd-btn--gold { background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-deep) 100%); color: #241a05; } .iagd-btn--sm { padding: 6px 10px; font-size: 12px; } .iagd-btn--block { display: flex; width: 100%; } /* Icon button: square hit target, bare glyph. */ .iagd-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-card); border: 1px solid transparent; background: transparent; color: var(--color-dim-1); cursor: pointer; transition: background-color 180ms var(--ease-fluent), color 180ms var(--ease-fluent), transform 180ms var(--ease-fluent); } .iagd-icon-btn:hover { background: var(--color-layer-soft); color: var(--color-text-on-dark); } .iagd-icon-btn:active { transform: scale(0.94); } .iagd-icon-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* Pill: small rounded chip, optionally interactive. */ .iagd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; border: 1px solid var(--color-layer-stroke); background: var(--color-layer); font-size: 12px; font-weight: 600; color: var(--color-dim-1); transition: background-color 180ms var(--ease-fluent), border-color 180ms var(--ease-fluent), color 180ms var(--ease-fluent); } .iagd-pill--active { background: var(--color-accent-soft); border-color: var(--color-layer-stroke-accent); color: var(--color-accent-text); } button.iagd-pill, a.iagd-pill { cursor: pointer; } button.iagd-pill:hover, a.iagd-pill:hover { border-color: var(--color-layer-stroke-strong); color: var(--color-text-on-dark); } /* Field wrapper: label + control + helper/error line. */ .iagd-field { display: block; } .iagd-field__label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--color-dim-1); } .iagd-field__required { color: var(--color-danger); } .iagd-field__helper { display: block; margin-top: 6px; font-size: 12px; color: var(--color-dim-2); } .iagd-field__error { display: block; margin-top: 6px; font-size: 12px; color: var(--color-danger); } /* Text controls. */ .iagd-input, .iagd-textarea, .iagd-select { display: block; width: 100%; padding: 10px 12px; border-radius: var(--radius-card); border: 1px solid var(--color-layer-stroke-strong); background: var(--color-layer); color: var(--color-text-on-dark); font-family: var(--font-sans); font-size: 14px; line-height: 1.4; transition: border-color 180ms var(--ease-fluent), background-color 180ms var(--ease-fluent); } .iagd-input::placeholder, .iagd-textarea::placeholder { color: var(--color-dim-2); } .iagd-input:focus, .iagd-textarea:focus, .iagd-select:focus { outline: none; border-color: var(--color-accent); background: var(--color-layer-soft); } .iagd-input[aria-invalid="true"], .iagd-textarea[aria-invalid="true"], .iagd-select[aria-invalid="true"] { border-color: var(--color-danger); } .iagd-textarea { min-height: 96px; resize: vertical; } /* Native select keeps its dropdown; restyle the closed control and add a chevron. color-scheme asks the browser to draw the option list dark, but that alone leaves it to the browser: --color-layer is white at 4%, and a translucent control over the popup's own white canvas reads as white text on white. The options carry opaque colours of their own for that reason. The literal is --color-layer flattened onto --color-surface; the token cannot be used because of its alpha. */ .iagd-select option, .iagd-select optgroup { background-color: #1a162f; color: var(--color-text-on-dark); } .iagd-select option:checked { background-color: #34275c; } .iagd-select { appearance: none; -webkit-appearance: none; color-scheme: dark; padding-right: 36px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4a8ff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px; } /* Peso amount input: static currency glyph inside the control. */ .iagd-peso { position: relative; } .iagd-peso__symbol { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 600; color: var(--color-dim-1); pointer-events: none; } .iagd-peso .iagd-input { padding-left: 30px; } /* Spinner. */ .iagd-spinner { display: inline-block; width: 20px; height: 20px; border-radius: 9999px; border: 3px solid rgba(124, 58, 237, 0.22); border-top-color: var(--color-accent); animation: iagdSpin 900ms linear infinite; } .iagd-spinner--lg { width: 28px; height: 28px; } @keyframes iagdSpin { to { transform: rotate(360deg); } } /* Skeleton shimmer. */ .iagd-skeleton { display: block; position: relative; overflow: hidden; background-color: rgba(255, 255, 255, 0.04); border-radius: var(--radius-card); } .iagd-skeleton::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0) 100% ); transform: translateX(-100%); animation: iagdShimmer 1.6s linear infinite; will-change: transform; } @keyframes iagdShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Empty state. */ .iagd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; border: 1px dashed var(--color-layer-stroke-strong); border-radius: var(--radius-card); text-align: center; } .iagd-empty__icon { color: var(--color-dim-2); } .iagd-empty__title { font-size: 14px; font-weight: 600; color: var(--color-dim-1); } .iagd-empty__body { font-size: 13px; color: var(--color-dim-2); max-width: 360px; } /* Status badge. */ .iagd-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; border: 1px solid transparent; } .iagd-status--ok { color: var(--color-ok); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); } .iagd-status--warn { color: var(--color-warn); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.35); } .iagd-status--danger { color: var(--color-danger); background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.35); } .iagd-status--info { color: var(--color-info); background: rgba(56, 189, 248, 0.12); border-color: rgba(56, 189, 248, 0.35); } .iagd-status--neutral { color: var(--color-dim-1); background: var(--color-layer); border-color: var(--color-layer-stroke); } /* Option card: selectable card used in pickers and forms. Works as a label wrapping a hidden radio/checkbox. */ .iagd-option-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--radius-card); border: 1px solid var(--color-layer-stroke); background: var(--color-layer); cursor: pointer; transition: border-color 140ms var(--ease-fluent), background-color 140ms var(--ease-fluent); } .iagd-option-card:hover { border-color: var(--color-layer-stroke-strong); } .iagd-option-card input[type="radio"], .iagd-option-card input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } .iagd-option-card:has(input:checked) { border-color: var(--color-layer-stroke-accent); background: linear-gradient(180deg, rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.05)), var(--color-layer); } .iagd-option-card:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; } .iagd-option-card__content { display: flex; flex-direction: column; min-width: 0; } .iagd-option-card__title { font-size: 14px; font-weight: 600; } .iagd-option-card__body { margin-top: 2px; font-size: 12px; color: var(--color-dim-2); } /* Document upload dropzone. */ .iagd-upload { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 16px; border: 1px dashed var(--color-layer-stroke-strong); border-radius: var(--radius-card); background: var(--color-layer); color: var(--color-dim-1); text-align: center; cursor: pointer; transition: border-color 140ms var(--ease-fluent), background-color 140ms var(--ease-fluent); } .iagd-upload:hover, .iagd-upload--drag { border-color: var(--color-layer-stroke-accent); background: var(--color-layer-soft); } .iagd-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .iagd-upload__hint { font-size: 12px; color: var(--color-dim-2); } /* Backdrop shared by sheet + modal. */ .iagd-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); animation: iagdFadeIn 220ms var(--ease-fluent) both; } /* Bottom sheet: mobile-first panel that slides up. On wide screens it centers like a dialog. */ .iagd-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 85dvh; overflow-y: auto; border-top-left-radius: 16px; border-top-right-radius: 16px; border: 1px solid var(--color-layer-stroke); border-bottom: none; padding: 16px; animation: iagdSheetUp 280ms var(--ease-fluent-out) both; } @media (min-width: 768px) { .iagd-sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 48px)); border-radius: 16px; border-bottom: 1px solid var(--color-layer-stroke); animation: iagdModalIn 220ms var(--ease-fluent-out) both; } } .iagd-sheet__grab { width: 40px; height: 4px; border-radius: 9999px; background: var(--color-layer-stroke-strong); margin: 0 auto 12px; } @media (min-width: 768px) { .iagd-sheet__grab { display: none; } } /* Centered modal at every size. */ .iagd-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 51; width: min(480px, calc(100vw - 32px)); max-height: 85dvh; overflow-y: auto; border-radius: 16px; border: 1px solid var(--color-layer-stroke); padding: 20px; animation: iagdModalIn 220ms var(--ease-fluent-out) both; } .iagd-sheet, .iagd-modal { background-color: var(--color-surface); background-image: linear-gradient(rgba(16, 12, 38, 0.92), rgba(16, 12, 38, 0.92)), url("../assets/textures/noise.png"); background-repeat: no-repeat, repeat; background-size: auto, 128px 128px; } /* Header row inside a sheet or modal: title left, close button right. */ .iagd-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .iagd-sheet__title { font-size: 16px; } [hidden].iagd-backdrop, [hidden].iagd-sheet, [hidden].iagd-modal { display: none; } /* ---- 6b. App shell -------------------------------------------------- */ /* Sticky top bar. Opaque panel so content scrolling under it never bleeds through (backdrop-filter is unreliable on low-end WebViews). */ .iagd-topbar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--color-layer-stroke); } .iagd-topbar__inner { display: flex; align-items: center; gap: 12px; max-width: 1100px; margin-inline: auto; padding: 10px 24px; } @media (max-width: 640px) { .iagd-topbar__inner { padding: 10px 16px; } } .iagd-topbar__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--color-text-on-dark); white-space: nowrap; } .iagd-topbar__brand img { display: block; } /* Search opener: reads as an input, acts as a button. */ .iagd-topbar__search { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 14px; border-radius: 9999px; border: 1px solid var(--color-layer-stroke-strong); background: var(--color-layer); color: var(--color-dim-2); font-size: 13px; cursor: pointer; text-align: left; transition: border-color 180ms var(--ease-fluent), background-color 180ms var(--ease-fluent); } .iagd-topbar__search:hover { border-color: var(--color-layer-stroke-accent); background: var(--color-layer-soft); } .iagd-topbar__search svg { flex: 0 0 auto; } .iagd-topbar__search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Desktop-only quick links between search and the auth cluster. */ .iagd-topbar__links { display: none; align-items: center; gap: 2px; } @media (min-width: 900px) { .iagd-topbar__links { display: flex; } } .iagd-topbar__link { padding: 8px 10px; border-radius: var(--radius-card); font-size: 13px; font-weight: 600; color: var(--color-dim-1); transition: background-color 180ms var(--ease-fluent), color 180ms var(--ease-fluent); } .iagd-topbar__link:hover { background: var(--color-layer-soft); color: var(--color-text-on-dark); } /* Signed-in avatar chip in the top bar. */ .iagd-topbar__profile { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 9999px; border: 1px solid var(--color-layer-stroke); background: var(--color-layer); color: var(--color-text-on-dark); font-size: 13px; font-weight: 600; max-width: 180px; transition: border-color 180ms var(--ease-fluent), background-color 180ms var(--ease-fluent); } .iagd-topbar__profile:hover { border-color: var(--color-layer-stroke-accent); background: var(--color-layer-soft); } .iagd-topbar__profile img { width: 28px; height: 28px; border-radius: 9999px; object-fit: cover; flex: 0 0 auto; } .iagd-topbar__profile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 640px) { .iagd-topbar__profile span { display: none; } .iagd-topbar__profile { padding: 4px; border-radius: 9999px; } } /* Right-side navigation drawer. Same open/close contract as sheets: [hidden] + #id-backdrop, driven by iagd-ui.js. */ .iagd-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; width: min(360px, 92vw); overflow-y: auto; padding: 16px; border-left: 1px solid var(--color-layer-stroke); background-color: var(--color-surface); background-image: linear-gradient(rgba(16, 12, 38, 0.92), rgba(16, 12, 38, 0.92)), url("../assets/textures/noise.png"); background-repeat: no-repeat, repeat; background-size: auto, 128px 128px; animation: iagdDrawerIn 260ms var(--ease-fluent-out) both; } [hidden].iagd-drawer { display: none; } @keyframes iagdDrawerIn { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } /* Drawer navigation row: icon + title + subtitle. */ .iagd-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-card); color: var(--color-text-on-dark); transition: background-color 160ms var(--ease-fluent); } .iagd-nav-item:hover { background: var(--color-layer-soft); } .iagd-nav-item__icon { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-card); color: var(--color-accent-text); } .iagd-nav-item__title { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; } .iagd-nav-item__sub { display: block; font-size: 11.5px; color: var(--color-dim-2); line-height: 1.3; } .iagd-nav-item img { width: 36px; height: 36px; border-radius: var(--radius-card); object-fit: cover; flex: 0 0 auto; } /* Search result row inside the search sheet. */ /* `a.iagd-card` above sets display:block and outranks a bare class, so a linked row stacked its thumbnail above the text while an unlinked one sat on a line. The anchor selector here restores the intended layout for both: a 48px thumbnail beside the name. */ a.iagd-search-row, .iagd-search-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; } .iagd-search-row img { width: 48px; height: 48px; border-radius: var(--radius-card); object-fit: cover; flex: 0 0 auto; } .iagd-search-row b { display: block; font-size: 14px; line-height: 1.3; } .iagd-search-row i { display: block; font-style: normal; font-size: 12px; color: var(--color-dim-2); } .iagd-search-row span { min-width: 0; } /* Browse-directory card: image on top, text block under it. Used by the species and facilities directories via iagd-directory.js. */ .iagd-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .iagd-dir-card { display: flex; flex-direction: column; padding: 6px; color: inherit; } .iagd-dir-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 6px; background: var(--color-base-alt); } .iagd-dir-card span { display: block; padding: 10px 8px 6px; min-width: 0; } .iagd-dir-card b { display: block; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .iagd-dir-card i { display: block; font-style: normal; font-size: 12px; color: var(--color-dim-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .iagd-dir-card__meta { color: var(--color-dim-2); } /* Horizontal A-Z pill rail. */ .iagd-az-rail { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; } .iagd-az-rail .iagd-pill { flex: 0 0 auto; cursor: pointer; } /* Footer. */ .iagd-footer { margin-top: 48px; padding: 24px 0 32px; border-top: 1px solid var(--color-layer-stroke); font-size: 12px; color: var(--color-dim-2); text-align: center; } .iagd-footer a { color: var(--color-dim-1); } .iagd-footer a:hover { color: var(--color-text-on-dark); } /* App download banner under the top bar. */ .iagd-app-banner { border-bottom: 1px solid rgba(230, 201, 122, 0.25); background: linear-gradient(90deg, rgba(124, 58, 237, 0.14), rgba(230, 201, 122, 0.08)), var(--color-base-alt); } .iagd-app-banner.is-dismissed { display: none; } .iagd-app-banner__inner { display: flex; align-items: center; gap: 12px; max-width: 1100px; margin-inline: auto; padding: 8px 24px; font-size: 13px; } @media (max-width: 640px) { .iagd-app-banner__inner { padding: 8px 16px; } .iagd-app-banner__sub { display: none; } } .iagd-app-banner__icon { width: 30px; height: 30px; border-radius: 8px; flex: 0 0 auto; } .iagd-app-banner__text { flex: 1 1 auto; min-width: 0; } .iagd-app-banner__title { color: var(--color-gold); font-weight: 600; margin-right: 6px; } .iagd-app-banner__sub { color: var(--color-dim-1); } /* Legacy Bootstrap surfaces rendered inside a themed page (the member login offcanvas and other not-yet-migrated includes). Skin the panel and its controls to the theme so they do not paint white-on-white. */ .iagd-app .offcanvas { background-color: var(--color-surface); color: var(--color-text-on-dark); } .iagd-app .offcanvas .form-control { background-color: var(--color-layer); border-color: var(--color-layer-stroke-strong); color: var(--color-text-on-dark); } .iagd-app .offcanvas .form-control:focus { background-color: var(--color-layer-soft); border-color: var(--color-accent); box-shadow: none; color: var(--color-text-on-dark); } .iagd-app .offcanvas .form-floating > label { color: var(--color-dim-2); } .iagd-app .offcanvas .btn-primary { background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-deep) 100%); border-color: transparent; } /* ---- 7. Motion ----------------------------------------------------- */ @keyframes iagdFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes iagdFadeUp { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes iagdCardIn { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes iagdTileIn { from { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.96); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes iagdSheetUp { from { transform: translate3d(0, 100%, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes iagdModalIn { from { transform: translate(-50%, -50%) scale(0.94); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } .iagd-anim-fade-in { animation: iagdFadeIn 240ms var(--ease-fluent) both; } .iagd-anim-fade-up { animation: iagdFadeUp 320ms var(--ease-fluent-out) both; } .iagd-anim-card-in { animation: iagdCardIn 420ms var(--ease-spring) both; } .iagd-anim-tile-in { animation: iagdTileIn 360ms var(--ease-fluent-out) both; } /* Stagger helpers: pin per-item delays without inline styles. */ .iagd-delay-1 { animation-delay: 60ms; } .iagd-delay-2 { animation-delay: 120ms; } .iagd-delay-3 { animation-delay: 180ms; } .iagd-delay-4 { animation-delay: 240ms; } .iagd-delay-5 { animation-delay: 300ms; } .iagd-delay-6 { animation-delay: 360ms; } /* Press feedback for any tappable surface. */ .iagd-press { transition: transform 180ms var(--ease-fluent), background-color 180ms var(--ease-fluent), border-color 180ms var(--ease-fluent); } .iagd-press:active { transform: scale(0.98); } /* ---- 8. Reduced motion --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.iagd-app::after { opacity: 0.02; } .iagd-anim-fade-in, .iagd-anim-fade-up, .iagd-anim-card-in, .iagd-anim-tile-in, .iagd-backdrop, .iagd-sheet, .iagd-modal, .iagd-drawer, .iagd-gradient-text { animation: none !important; } .iagd-skeleton::after { animation: none !important; } .iagd-press, .iagd-btn, .iagd-icon-btn, .iagd-card--tap, .iagd-option-card, .iagd-upload { transition: none !important; } .iagd-gradient-text { background-position: 0% 50%; } }