TitlePage.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FundsXML — The European Standard for Fund Data Exchange</title>
<link rel="icon" type="image/png" href="FundsXML-Logo.png">
<style>
  :root {
    --ink: #1a1a1a;
    --ink-soft: #444;
    --accent: #0b5394;
    --accent-hover: #083d73;
    --rule: #d0d7de;
    --bg: #fbfbf8;
    --callout: #f3f6fb;
    --shadow-md: 0 2px 8px rgba(15,23,42,0.08);
  }
  html[data-theme="dark"] {
    --ink: #e6e8eb;
    --ink-soft: #b1b6bd;
    --accent: #79b8ff;
    --accent-hover: #a8d0ff;
    --rule: #2e333b;
    --bg: #101214;
    --callout: #1b2432;
    --paper: #191c1f;
  }
  html[data-theme="dark"] img { filter: brightness(0.92) contrast(1.05); }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  body {
    font-family: "Source Serif Pro", "Source Serif 4", Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    max-width: 46em;
    margin: 3em auto;
    padding: 0 1.5em;
    hyphens: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "kern", "liga";
  }
  h1, h2, h3, h4 {
    font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    line-height: 1.25;
    margin-top: 2em;
    font-feature-settings: "kern", "liga";
  }
  h1 {
    font-size: 2.1em;
    border-bottom: 3px solid var(--accent);
    padding-bottom: 0.3em;
    margin-top: 0;
  }
  h1 .subtitle {
    display: block;
    font-size: 0.55em;
    font-weight: 400;
    font-style: italic;
    color: var(--ink-soft);
    margin-top: 0.4em;
  }
  p { margin: 0.9em 0; text-align: justify; }
  hr { border: none; border-top: 1px solid var(--rule); margin: 2.4em 0; }

  /* --- title page --- */
  body.title-page {
    text-align: center;
    margin-top: 6em;
  }
  body.title-page p { text-align: center; }
  .title-logo {
    max-width: 420px;
    width: 80%;
    height: auto;
    margin: 0 auto 3em;
    display: block;
    filter: drop-shadow(0 4px 14px rgba(11,83,148,0.12));
  }
  .title-heading {
    font-size: 3.2em;
    border: none;
    padding: 0;
    margin: 0 0 0.2em;
    letter-spacing: -0.025em;
    font-feature-settings: "kern", "liga", "ss01";
  }
  .title-tagline {
    font-family: "Inter", sans-serif;
    font-size: 1.15em;
    color: var(--accent);
    margin: 0 0 2em;
    letter-spacing: 0.01em;
    font-weight: 500;
  }
  .title-subtitle {
    font-style: italic;
    font-size: 1.1em;
    color: var(--ink-soft);
    margin: 0 0 3em;
  }
  .title-rule {
    border: none;
    border-top: 2px solid var(--accent);
    width: 4em;
    margin: 2em auto;
  }
  .title-meta {
    font-family: "Inter", sans-serif;
    font-size: 0.95em;
    color: var(--ink-soft);
    margin: 0.3em 0;
  }
  .title-year {
    font-family: "Inter", sans-serif;
    font-size: 1.1em;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ink);
    margin: 0.3em 0;
  }

  @media print {
    body.title-page { margin-top: 0; page-break-after: always; }
  }

  /* --- back-to-top button --- */
  #top-btn {
    position: fixed;
    bottom: 1.5em;
    right: 1.5em;
    padding: 0.6em 1em;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: "Inter", -apple-system, sans-serif;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s;
    box-shadow: var(--shadow-md);
    z-index: 999;
  }
  #top-btn.visible { opacity: 0.95; pointer-events: auto; transform: translateY(0); }
  #top-btn:hover { opacity: 1; background: var(--accent-hover); }
  #top-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  @media print { #top-btn { display: none; } }

  /* --- theme toggle --- */
  #theme-btn {
    position: fixed;
    top: 0.5em;
    right: 0.5em;
    width: 2.1em;
    height: 2.1em;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--bg);
    color: var(--accent);
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: transform 0.15s ease, background 0.15s, border-color 0.15s;
    font-family: "Inter", -apple-system, sans-serif;
    z-index: 1001;
  }
  #theme-btn:hover { transform: scale(1.05); border-color: var(--accent); }
  #theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  #theme-btn .icon-sun { display: none; }
  #theme-btn .icon-moon { display: inline; }
  html[data-theme="dark"] #theme-btn .icon-sun { display: inline; }
  html[data-theme="dark"] #theme-btn .icon-moon { display: none; }
  @media print { #theme-btn { display: none !important; } }

  /* --- feedback (report an issue) --- */
  #feedback-btn {
    position: fixed;
    top: 3.1em;
    right: 0.5em;
    width: 2.1em;
    height: 2.1em;
    border-radius: 50%;
    border: 1px solid var(--rule);
    background: var(--bg);
    color: var(--accent);
    font-size: 1em;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: transform 0.15s ease, background 0.15s, border-color 0.15s;
    font-family: "Inter", -apple-system, sans-serif;
    z-index: 1001;
  }
  #feedback-btn:hover { transform: scale(1.05); border-color: var(--accent); }
  #feedback-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  #feedback-pop {
    position: absolute;
    display: none;
    z-index: 1002;
  }
  #feedback-pop button {
    padding: 0.45em 0.9em;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-family: "Inter", -apple-system, sans-serif;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: var(--shadow-md);
  }
  #feedback-pop button:hover { background: var(--accent-hover); }
  @media print { #feedback-btn, #feedback-pop { display: none !important; } }

  /* --- download link --- */
  .download-link {
    display: inline-block;
    margin-top: 2em;
    padding: 0.55em 1.1em;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-family: "Inter", -apple-system, sans-serif;
    font-weight: 600;
    font-size: 0.9em;
    letter-spacing: 0.02em;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(11,83,148,0.15);
    transition: background 0.15s, transform 0.15s;
  }
  .download-link:hover {
    background: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
  }
  .download-link::before {
    content: "↓";
    display: inline-block;
    margin-right: 0.4em;
    font-weight: 700;
  }
  @media print { .download-link { display: none !important; } }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
    }
  }
</style>
<script id="theme-preload">(function(){try{var t=localStorage.getItem('fundsxml-theme');if(t==='dark')document.documentElement.setAttribute('data-theme','dark');}catch(e){}})();</script>
</head>
<body class="title-page">

<img src="FundsXML-Logo.png" alt="FundsXML" class="title-logo">

<p class="title-tagline">The European Standard for Fund Data Exchange</p>

<p class="title-subtitle">A Practical Handbook for Fund Professionals</p>

<hr class="title-rule">

<p class="title-meta">Based on FundsXML Schema Version 4.2.x</p>

<p class="title-year">2026</p>

<p style="margin-top:3em;"><a class="download-link" href="FundsXML_Book.pdf">Download PDF</a></p>

<button id="top-btn" onclick="window.scrollTo({top:0,behavior:'smooth'})">↑ Top</button>
<script>
(function(){
  var btn=document.getElementById('top-btn');
  window.addEventListener('scroll',function(){
    btn.classList.toggle('visible', window.scrollY>400);
  });
})();
</script>
<button id="theme-btn" type="button" aria-label="Toggle light/dark theme" title="Toggle light/dark theme"><span class="icon-moon" aria-hidden="true">☽</span><span class="icon-sun" aria-hidden="true">☀</span></button>
<script id="theme-toggle">(function(){var b=document.getElementById('theme-btn');if(!b)return;b.addEventListener('click',function(){var isDark=document.documentElement.getAttribute('data-theme')==='dark';if(isDark){document.documentElement.removeAttribute('data-theme');try{localStorage.setItem('fundsxml-theme','light');}catch(e){}}else{document.documentElement.setAttribute('data-theme','dark');try{localStorage.setItem('fundsxml-theme','dark');}catch(e){}}});})();</script>
<script id="feedback-widget">(function(){var ISSUE='https://github.com/fundsxml/book/issues/new?template=report-error.yml';function pageName(){return location.pathname.split('/').pop()||'index.html';}function headingFor(node){var hs=document.querySelectorAll('h1,h2,h3,h4');var best=null;for(var i=0;i<hs.length;i++){var r=hs[i].compareDocumentPosition(node);if(r&(4|16))best=hs[i];}return best;}function buildUrl(quote,node){var link=location.origin+location.pathname;var section='';var h=node?headingFor(node):null;if(h){section=(h.textContent||'').replace(/\s+/g,' ').trim().replace(/\s*#$/,'');if(h.id)link+='#'+h.id;}else{section=document.title||'';}var title='['+pageName()+'] '+section.slice(0,80);var q=quote?quote.replace(/\s+/g,' ').trim():'';if(q.length>400)q=q.slice(0,400)+'\u2026';function make(qq){var u=ISSUE+'&title='+encodeURIComponent(title)+'&page='+encodeURIComponent(link);if(section)u+='&section='+encodeURIComponent(section);if(qq)u+='&quote='+encodeURIComponent(qq);return u;}var url=make(q);while(url.length>1900&&q.length>20){q=q.slice(0,q.length-100)+'\u2026';url=make(q);}return url;}var btn=document.createElement('button');btn.id='feedback-btn';btn.type='button';btn.setAttribute('aria-label','Report an issue');btn.title='Report an issue';btn.textContent='\u270e';btn.addEventListener('click',function(){window.open(buildUrl('',null),'_blank','noopener');});document.body.appendChild(btn);var pop=document.createElement('div');pop.id='feedback-pop';var pbtn=document.createElement('button');pbtn.type='button';pbtn.textContent='Report an issue';pop.appendChild(pbtn);document.body.appendChild(pop);var current=null;function hide(){pop.style.display='none';current=null;}pbtn.addEventListener('mousedown',function(e){e.preventDefault();});pbtn.addEventListener('click',function(){if(current)window.open(buildUrl(current.text,current.node),'_blank','noopener');hide();});function show(){var sel=window.getSelection();if(!sel||sel.isCollapsed||!sel.rangeCount){hide();return;}var text=sel.toString();if(!text.trim()){hide();return;}var range=sel.getRangeAt(0);if(pop.contains(range.commonAncestorContainer))return;var r=range.getBoundingClientRect();if(!r||(r.width===0&&r.height===0)){hide();return;}var node=range.startContainer;if(node.nodeType===3)node=node.parentNode;current={text:text,node:node};pop.style.display='block';var x=r.left+window.scrollX;var y=r.bottom+window.scrollY+6;var maxX=window.scrollX+document.documentElement.clientWidth-pop.offsetWidth-8;if(x>maxX)x=maxX;if(x<window.scrollX+8)x=window.scrollX+8;pop.style.left=x+'px';pop.style.top=y+'px';}var timer=null;function sched(){if(timer)clearTimeout(timer);timer=setTimeout(show,200);}document.addEventListener('mouseup',sched);document.addEventListener('keyup',sched);document.addEventListener('selectionchange',sched);document.addEventListener('keydown',function(e){if(e.key==='Escape')hide();});document.addEventListener('mousedown',function(e){if(!pop.contains(e.target))hide();});})();</script>
</body>
</html>