/* =============================================================================
* ap-layout.css — AffilioPedia unified site chrome (header + footer styles)
* Built 2026-07-19 from components/header/ap-header.css + components/footer/ap-footer.css.
* ONE stylesheet per page:
* The single @import below MUST stay the first rule in this file (CSS spec:
* any rule before an @import silently disables it).
* ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
/* ═══════════════ HEADER (from ap-header.css, verbatim) ═══════════════ */
/* assets/header.css — styles for the shared header.
Linked once per page, so it's cached across the whole site. */
/* The header loads its OWN font so it looks identical on every page — even
pages whose uses a different font (index=Inter, account=DM Sans, etc.).
Without this the header would borrow each page's body font and drift. */
:root{
--apx-font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
--apx-primary:#2563ff; --apx-primary-bright:#3b82f6;
--apx-primary-glow:rgba(37,99,255,.35);
--apx-accent:#fbbf24; --apx-accent-warm:#f59e0b;
--apx-border-soft:rgba(255,255,255,.06);
}
/* ---- announcement / free-mode bar ---- */
.apx-announce{font-family:var(--apx-font);position:fixed;top:0;left:0;right:0;height:40px;z-index:1100;
display:flex;align-items:center;justify-content:center;padding:0 50px 0 18px;
background:linear-gradient(90deg,rgba(124,58,237,.18),rgba(168,85,247,.22) 50%,rgba(245,197,66,.18)),rgba(8,12,28,.94);
border-bottom:1px solid rgba(168,85,247,.35);color:#fff;font-size:13.5px;line-height:1.2;
overflow:hidden;backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);}
.apx-an-inner{display:inline-flex;align-items:center;gap:10px;max-width:100%;}
.apx-an-spark{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:inline-flex;
align-items:center;justify-content:center;background:linear-gradient(135deg,#7c3aed,#a855f7);
color:#fff;box-shadow:0 0 14px rgba(168,85,247,.6);}
.apx-an-spark svg{width:12px;height:12px;}
.apx-an-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.apx-an-text strong{font-weight:800;color:#fff;}
.apx-an-dates{color:rgba(255,255,255,.65);font-size:12.5px;}
.apx-an-cta{flex-shrink:0;padding:5px 14px;border-radius:8px;text-decoration:none;
background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1a1108;font-weight:800;font-size:12.5px;
display:inline-flex;align-items:center;gap:4px;box-shadow:0 0 16px rgba(251,191,36,.4);transition:transform .2s;}
.apx-an-cta:hover{transform:translateY(-1px);}
/* ---- navbar ---- */
.apx-nav{font-family:var(--apx-font);width:100%;height:90px;position:fixed;top:40px;left:0;z-index:1000;box-sizing:border-box;
backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
background:rgba(3,8,22,.78);border-bottom:1px solid var(--apx-border-soft);}
.apx-noannounce.apx-nav{top:0;}
.apx-cont{max-width:1400px;margin:0 auto;height:100%;display:flex;align-items:center;
justify-content:space-between;padding:0 40px;gap:24px;box-sizing:border-box;}
.apx-logo{display:flex;align-items:center;gap:14px;flex-shrink:0;text-decoration:none;}
.apx-logo-icon{width:42px;height:42px;flex-shrink:0;}
.apx-logo-icon svg{width:100%;height:100%;}
.apx-logo-txt{display:flex;flex-direction:column;line-height:1.05;}
.apx-logo-txt h2{font-size:22px;font-weight:800;letter-spacing:-.02em;color:#fff;margin:0;}
.apx-logo-txt h2 .apx-ac{color:var(--apx-accent);}
.apx-logo-txt p{font-size:11px;color:var(--apx-accent);margin:2px 0 0;letter-spacing:.12em;
text-transform:uppercase;font-weight:600;}
.apx-links{display:flex;gap:36px;}
.apx-links a{font-size:15px;font-weight:500;color:rgba(255,255,255,.78);text-decoration:none;
transition:color .2s;position:relative;}
.apx-links a:hover{color:#fff;}
.apx-links a.apx-active{color:#fff;}
.apx-links a.apx-active::after{content:"";position:absolute;left:0;right:0;bottom:-28px;height:2px;
background:var(--apx-primary-bright);border-radius:2px;}
.apx-btns{display:flex;gap:12px;align-items:center;}
.apx-login{padding:12px 22px;border-radius:12px;background:transparent;text-decoration:none;
border:1px solid rgba(255,255,255,.15);color:#fff;font-weight:600;font-size:14.5px;
transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
.apx-login svg{width:16px;height:16px;}
.apx-login:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.25);}
.apx-signup{padding:12px 22px;border-radius:12px;text-decoration:none;
background:linear-gradient(135deg,var(--apx-primary),var(--apx-primary-bright));color:#fff;
font-weight:700;font-size:14.5px;box-shadow:0 0 30px var(--apx-primary-glow);
transition:all .2s;display:inline-flex;align-items:center;gap:6px;}
.apx-signup svg{width:16px;height:16px;}
.apx-signup:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--apx-primary-glow);}
/* ---- user menu ---- */
.apx-user{position:relative;}
.apx-user-trigger{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid rgba(255,255,255,.12);
border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font-size:14px;font-weight:500;cursor:pointer;}
.apx-user-trigger:hover{background:rgba(255,255,255,.1);}
.apx-user-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--apx-accent),var(--apx-accent-warm));color:#fff;font-size:12px;font-weight:700;flex-shrink:0;
overflow:hidden;}
/* AP-FIX 2026-07-19c: without this rule an avatar/logo ![]()
rendered at its
NATURAL size (the giant-logo bug on index when logged in as a network with
a large logo). Constrain it to the 30px circle. */
.apx-user-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.apx-user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.apx-user-chev{color:rgba(255,255,255,.6);transition:transform .2s;}
.apx-user.apx-open .apx-user-chev{transform:rotate(180deg);}
.apx-user-dd{position:absolute;top:calc(100% + 12px);right:0;background:#fff;color:#0f172a;border-radius:14px;
box-shadow:0 14px 40px rgba(0,0,0,.4);min-width:250px;padding:8px;z-index:300;display:none;}
.apx-user.apx-open .apx-user-dd{display:block;}
.apx-user-info{padding:14px 14px 12px;border-bottom:1px solid #e5e7eb;margin-bottom:4px;}
.apx-user-info-name{font-weight:700;font-size:15px;}
.apx-user-info-email{font-size:12.5px;color:#64748b;margin-top:4px;word-break:break-all;}
.apx-user-link{display:block;padding:9px 14px;border-radius:9px;color:#0f172a;text-decoration:none;font-size:14px;}
.apx-user-link:hover{background:#f1f5f9;}
.apx-user-sep{height:1px;background:#e5e7eb;margin:4px 0;}
.apx-user-out{color:#dc2626;}
.apx-user-out:hover{background:#fef2f2;}
/* ---- hamburger + mobile drawer ---- */
.apx-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
border:1px solid rgba(255,255,255,.15);border-radius:10px;background:transparent;cursor:pointer;padding:0 11px;}
.apx-burger span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:.25s;}
.apx-burger.apx-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.apx-burger.apx-open span:nth-child(2){opacity:0;}
.apx-burger.apx-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.apx-mobile{font-family:var(--apx-font);position:fixed;top:0;right:0;bottom:0;width:min(82vw,340px);z-index:1300;
background:#050b1c;border-left:1px solid rgba(255,255,255,.08);padding:88px 24px 32px;
transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;display:flex;flex-direction:column;gap:4px;}
.apx-mobile.apx-open{transform:translateX(0);}
.apx-mobile a{color:rgba(255,255,255,.85);text-decoration:none;font-size:16px;font-weight:500;padding:12px 4px;
border-bottom:1px solid rgba(255,255,255,.06);}
.apx-mobile a.apx-active{color:#fff;}
.apx-mobile-cta{display:flex;flex-direction:column;gap:10px;margin-top:20px;}
.apx-mobile-cta a{text-align:center;border-radius:12px;border-bottom:0;padding:13px;font-weight:700;text-decoration:none;}
.apx-mobile-cta .apx-m-login{border:1px solid rgba(255,255,255,.18);color:#fff;}
.apx-mobile-cta .apx-m-signup{background:linear-gradient(135deg,var(--apx-primary),var(--apx-primary-bright));color:#fff;}
.apx-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1200;opacity:0;pointer-events:none;transition:opacity .3s;}
.apx-overlay.apx-open{opacity:1;pointer-events:auto;}
/* Spacer so page content clears the fixed header. In Free Mode the promo bar
adds 40px, so we offset by header height (90) + bar (40) = 130px, else 90px. */
body{--apx-header-h:130px;}
body.apx-no-free{--apx-header-h:90px;}
.apx-page{padding-top:var(--apx-header-h);}
@media(max-width:960px){
.apx-links{display:none;}
.apx-btns .apx-login,.apx-btns .apx-signup,.apx-user{display:none;}
.apx-burger{display:flex;}
}
@media(max-width:720px){.apx-announce{padding:0 40px 0 12px;font-size:12px;height:44px;}.apx-an-dates{display:none;}}
@media(prefers-reduced-motion:reduce){*{transition:none !important;}}
/* ═══════════════ FOOTER (from ap-footer.css, verbatim) ═══════════════ */
/* components/footer/ap-footer.css — styles for the shared footer.
Single source of truth: linked once per page (cached site-wide), loads its
own font so it never borrows a page's body font, and is scoped under
.apx-ft-* so it can't clash with page CSS.
Re-theme in one line: change --apx-ft-hover below. It drives every hover
colour (links + social icons). It's currently the footer's existing link-
hover blue; swap it for the brand accent if that's what you want site-wide. */
.apx-ft{--apx-ft-hover:#3b82f6;
font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
background:#020610;border-top:1px solid rgba(255,255,255,.08);padding:60px 40px 28px;
color:rgba(255,255,255,.72);box-sizing:border-box;}
.apx-ft *{box-sizing:border-box;}
.apx-ft-container{max-width:1400px;margin:0 auto;}
.apx-ft-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:48px;margin-bottom:48px;}
.apx-ft--no-cols .apx-ft-grid{grid-template-columns:1fr;margin-bottom:36px;} /* brand-only */
.apx-ft--no-brand .apx-ft-grid{grid-template-columns:repeat(4,1fr);} /* columns-only */
.apx-ft-brand{max-width:340px;}
.apx-ft-logo{display:flex;align-items:center;gap:12px;text-decoration:none;margin-bottom:16px;}
.apx-ft-logo-icon{width:38px;height:38px;flex-shrink:0;}
.apx-ft-logo-icon svg{width:100%;height:100%;}
.apx-ft-logo-text{display:flex;flex-direction:column;line-height:1.05;}
.apx-ft-logo-text h2{font-size:20px;font-weight:800;letter-spacing:-.02em;color:#fff;margin:0;}
.apx-ft-logo-text h2 .apx-ft-accent{color:#fbbf24;}
.apx-ft-logo-text p{font-size:10.5px;color:#fbbf24;margin:2px 0 0;letter-spacing:.12em;
text-transform:uppercase;font-weight:600;}
.apx-ft-tag{font-size:14px;color:rgba(255,255,255,.72);line-height:1.6;margin:0;}
.apx-ft-col h5{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
color:#fff;margin:0 0 18px;}
.apx-ft-col ul{list-style:none;margin:0;padding:0;}
.apx-ft-col li{margin-bottom:10px;}
.apx-ft-col a{font-size:14px;color:rgba(255,255,255,.72);text-decoration:none;transition:color .16s;}
.apx-ft-col a:hover{color:var(--apx-ft-hover);}
/* bottom bar: copyright + legal links (left cluster) ---- social icons (right) */
.apx-ft-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.05);display:flex;
align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;
font-size:13px;color:rgba(255,255,255,.55);}
.apx-ft-bottom-info{display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;}
.apx-ft-copy{color:rgba(255,255,255,.55);}
.apx-ft-links a{color:rgba(255,255,255,.72);text-decoration:none;margin:0 4px;transition:color .16s;}
.apx-ft-links a:hover{color:var(--apx-ft-hover);}
/* social icons — inline SVG glyphs, right-aligned on desktop, centred on mobile */
.apx-ft-social{display:flex;align-items:center;gap:12px;}
.apx-ft-social-link{display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:9px;color:rgba(255,255,255,.6);
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;}
.apx-ft-social-link svg{width:16px;height:16px;display:block;}
.apx-ft-social-link:hover{color:#fff;background:var(--apx-ft-hover);
border-color:var(--apx-ft-hover);transform:translateY(-2px);}
.apx-ft-social-link:focus-visible{outline:2px solid var(--apx-ft-hover);outline-offset:2px;}
@media(max-width:1200px){.apx-ft-grid{grid-template-columns:1.5fr 1fr 1fr;gap:36px;}
.apx-ft--no-cols .apx-ft-grid{grid-template-columns:1fr;}
.apx-ft--no-brand .apx-ft-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:768px){.apx-ft-grid{grid-template-columns:1fr 1fr;gap:28px;}
.apx-ft-brand{grid-column:1/-1;max-width:none;}.apx-ft{padding:44px 22px 24px;}
.apx-ft-bottom{flex-direction:column;text-align:center;gap:16px;}
.apx-ft-bottom-info{justify-content:center;}.apx-ft-social{justify-content:center;}}
@media(max-width:480px){.apx-ft-grid{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){
.apx-ft-social-link{transition:none;}.apx-ft-social-link:hover{transform:none;}}