/* ============================================================================ Athenian Affiliate Manager — Frontend Shell • Token-bridge ready: reads brand tokens injected in . • Dark-friendly card UI that mirrors header style. ============================================================================ */ /* ===================== SCOPE + LOCAL ALIASES ===================== */ :where(.aam-shell){ /* Local aliases (read straight from global bridge) */ --brand-1: var(--ctl-c1); --brand-2: var(--ctl-c2); --brand-3: var(--ctl-c3); --fg: var(--text-high); --fg-mid: var(--text-mid); --fg-low: var(--text-low); --bg-1: var(--surface-1); --bg-2: var(--surface-2); --bg-3: var(--surface-3); --bd: var(--border, #ffffff22); --ring: var(--focus-ring, rgba(0,200,255,.35)); --ring-strong: var(--focus-ring-strong, rgba(0,200,255,.55)); --radius: var(--radius, 14px); --radius-lg: var(--radius-lg, 18px); --gap: 18px; --drop-sm: var(--drop-sm, 0 6px 14px rgba(0,0,0,.35)); --drop-md: var(--drop-md, 0 16px 40px rgba(0,0,0,.5)); } .aam-shell{ position:relative; margin-block: clamp(16px, 4vh, 32px); padding: clamp(12px, 2vw, 18px); border-radius: var(--radius-lg); background: radial-gradient(140% 180% at 0% 0%, color-mix(in oklch, var(--brand-1) 16%, transparent) 0%, transparent 60%), radial-gradient(140% 180% at 100% 100%, color-mix(in oklch, var(--brand-2) 18%, transparent) 0%, transparent 65%), color-mix(in oklch, var(--bg-1) 94%, transparent); border: 1px solid color-mix(in oklch, var(--bd) 100%, transparent); box-shadow: var(--drop-md); color: var(--fg); overflow: hidden; } /* ===================== TYPOGRAPHY ===================== */ .aam-shell, .aam-shell *{ font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans"; } .aam-title{ font-size: clamp(1.6rem, 2vw, 2rem); line-height: 1.1; margin: 0 0 6px; letter-spacing: .01em; } .aam-title-sm{ font-size: 1.1rem; line-height: 1.15; margin: 0 0 4px; } .aam-eyebrow{ text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: var(--fg-low); margin: 0 0 4px; } .aam-subtitle{ margin: 0; font-size: .95rem; color: var(--fg-mid); } /* ===================== GRID LAYOUT ===================== */ .aam-grid{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr); gap: var(--gap); } @media (max-width: 960px){ .aam-grid{ grid-template-columns: minmax(0, 1fr); } } /* ===================== CARDS ===================== */ .aam-card{ position: relative; border-radius: var(--radius); padding: clamp(14px, 2vw, 18px); background: linear-gradient(180deg, color-mix(in oklch, var(--bg-2) 96%, transparent), color-mix(in oklch, var(--bg-3) 96%, transparent) ); border: 1px solid color-mix(in oklch, var(--bd) 100%, transparent); box-shadow: 0 0 0 1px color-mix(in oklch, var(--bd) 60%, transparent), 0 12px 26px rgba(0,0,0,.42); } .aam-card-header{ margin-bottom: 12px; } /* Hero card light halo */ .aam-card--hero::before{ content:""; position:absolute; inset:-40px; background: radial-gradient(140% 160% at 10% 0%, color-mix(in oklch, var(--brand-1) 18%, transparent) 0%, transparent 60%), radial-gradient(140% 180% at 100% 100%, color-mix(in oklch, var(--brand-2) 20%, transparent) 0%, transparent 65%); opacity:.5; filter: blur(26px); z-index:-1; } /* ===================== STATUS PILL + BADGES ===================== */ .aam-status-pill{ display:inline-flex; align-items:center; gap:6px; margin-top: 10px; padding: 4px 8px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--bd) 90%, transparent); background: color-mix(in oklch, var(--bg-2) 94%, transparent); font-size: .78rem; color: var(--fg-mid); } .aam-status-pill span{ padding-inline: 8px; border-radius: 999px; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#05050a; font-weight: 700; } .aam-status-pill--pending span{ background: linear-gradient(135deg, #f2c94c, #f2994a); } .aam-status-pill--active span{ background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); } .aam-status-pill--paused span{ background: linear-gradient(135deg, #999, #666); } .aam-badge{ display:inline-flex; align-items:center; justify-content:center; min-width: 70px; padding:3px 8px; border-radius:999px; font-size:.75rem; font-weight:600; color:#05050a; background: color-mix(in oklch, var(--bg-2) 90%, transparent); } .aam-badge--unpaid{ background: linear-gradient(135deg, #f2994a, #eb5757); } .aam-badge--paid{ background: linear-gradient(135deg, #27ae60, #219653); } .aam-badge--pending{ background: linear-gradient(135deg, #f2c94c, #f2994a); } /* ===================== STATS ===================== */ .aam-stat-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 14px; } @media (max-width: 960px){ .aam-stat-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } } .aam-stat{ padding:10px 10px 12px; border-radius:12px; background: color-mix(in oklch, var(--bg-2) 94%, transparent); border:1px solid color-mix(in oklch, var(--bd) 90%, transparent); } .aam-stat-label{ margin:0 0 4px; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color: var(--fg-low); } .aam-stat-value{ margin:0; font-size: 1.3rem; font-weight: 700; color: var(--fg); } .aam-stat-value--accent{ background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color: transparent; } /* ===================== LISTS ===================== */ .aam-list-checks{ list-style:none; padding:8px 0 0; margin:0; display:grid; gap:6px; } .aam-list-checks li{ position:relative; padding-left:20px; font-size:.9rem; color: var(--fg-mid); } .aam-list-checks li::before{ content:"✓"; position:absolute; left:0; top:1px; font-size:.8rem; color: color-mix(in oklch, var(--brand-2) 70%, var(--brand-1) 30%); } /* ===================== FIELDS & BUTTONS ===================== */ .aam-field-row{ margin-top: 12px; } .aam-label{ display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.16em; color: var(--fg-low); margin-bottom:4px; } .aam-input-copy{ display:flex; align-items:stretch; gap:6px; } .aam-input-copy input[type="text"], .aam-form-shell input[type="text"], .aam-form-shell input[type="email"], .aam-form-shell textarea{ flex:1 1 auto; min-width: 0; border-radius:10px; border:1px solid color-mix(in oklch, var(--bd) 100%, transparent); background: color-mix(in oklch, var(--bg-2) 92%, transparent); color: var(--fg); padding:7px 10px; font-size:.9rem; } .aam-form-shell textarea{ resize: vertical; } .aam-help, .aam-note{ margin-top:4px; font-size:.8rem; color: var(--fg-low); } .aam-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 14px; border-radius:999px; border:1px solid transparent; font-size:.85rem; font-weight:600; cursor:pointer; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color:#05050a; box-shadow: 0 8px 18px color-mix(in oklch, var(--brand-2) 28%, transparent); } .aam-btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; } .aam-btn--ghost{ background: color-mix(in oklch, var(--bg-2) 96%, transparent); color: var(--fg); border-color: color-mix(in oklch, var(--bd) 90%, transparent); box-shadow:none; } /* Small copy behavior: [data-aam-copy-target="prev"] is wired via JS later */ .aam-btn[data-aam-copy-target]{ white-space:nowrap; } /* Form grid */ .aam-form-shell{ margin-top:8px; } .aam-form-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin-top:6px; } .aam-field{ display:flex; flex-direction:column; gap:4px; } .aam-field--full{ grid-column: 1 / -1; } @media (max-width: 640px){ .aam-form-grid{ grid-template-columns:minmax(0,1fr); } } /* ===================== TABLES ===================== */ .aam-table-wrap{ margin-top: 8px; border-radius:12px; overflow:auto; border:1px solid color-mix(in oklch, var(--bd) 90%, transparent); background: color-mix(in oklch, var(--bg-2) 96%, transparent); } .aam-table{ width:100%; border-collapse:collapse; font-size:.85rem; } .aam-table th, .aam-table td{ padding:8px 10px; text-align:left; white-space:nowrap; } .aam-table th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.13em; color: var(--fg-low); border-bottom:1px solid color-mix(in oklch, var(--bd) 90%, transparent); } .aam-table tr:nth-child(even){ background: color-mix(in oklch, var(--bg-2) 96%, transparent); } .aam-table a{ color: var(--fg); text-decoration:none; } .aam-table a:hover{ text-decoration:underline; } /* ===================== RESPONSIVE ===================== */ @media (max-width: 600px){ .aam-shell{ padding: 12px; border-radius: 12px; } } /* ===================== ACCESSIBILITY ===================== */ .aam-shell :is(input, textarea, button):focus-visible{ outline: 2px solid var(--ring); outline-offset:2px; }