Joram

<!-- Primary mark -->
<img src="assets/joram-mark.svg" alt="Joram" width="120">

<!-- On dark backgrounds, switch to the inverted mark -->
<img src="assets/joram-mark-dark.svg" alt="Joram">

<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="assets/joram-favicon.svg">

.wordmark {
  font: 600 46px/1 "Cormorant Garamond", Garamond, Georgia, serif;
  letter-spacing: 0.01em;
  color: var(--fg-strong);
}
.wordmark .role {            /* IT-PROJEKTMANAGEMENT lockup line */
  font: 600 9px/1 "Nunito", sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.slogan {
  font: 500 30px/1.2 "Cormorant Garamond", serif;
  letter-spacing: -0.005em;
}
.slogan em { font-style: italic; font-weight: 500; }

.portrait img {
  width: 150px; height: 150px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  filter: grayscale(0.15) contrast(1.02);   /* warm, never stock-glossy */
}

:root {
  --color-oxford-blue: #0a1137;   /* Text · button (light) */
  --color-baby-powder: #f5f7f3;   /* Background (light)     */
  --color-madder:      #a6112f;   /* CTA (light)            */
  --color-madder-dark: #f0a4b0;   /* CTA (dark) warm rose */
  --color-rose-quartz: #aca6bb;   /* Button + muted (dark)  */
  --color-ink-black:   #0d0d1a;   /* Background (dark)      */
}

:root {                          /* Light mode (default) */
  --bg:        var(--color-baby-powder);
  --fg:        var(--color-oxford-blue);
  --fg-strong: var(--color-ink-black);
  --button-bg: var(--color-oxford-blue);
  --button-fg: var(--color-baby-powder);
  --accent:    var(--color-madder);
}
:root[data-theme="dark"] {       /* Dark mode */
  --bg:        var(--color-ink-black);
  --fg:        var(--color-baby-powder);
  --fg-muted:  var(--color-rose-quartz);
  --button-bg: var(--color-rose-quartz);
  --button-fg: var(--color-oxford-blue);
  --accent:    var(--color-madder-dark);
}

/* Every pairing is AAA per WCAG (contrast 7:1+) */
/* on Oxford Blue  #0A1137 → Baby Powder · Rose Quartz            */
/* on Baby Powder  #F5F7F3 → Oxford Blue · Ink Black · Madder     */
/* on Rose Quartz  #ACA6BB → Oxford Blue · Ink Black              */
/* on Ink Black    #0D0D1A → Baby Powder · Rose Quartz            */
/* on Madder       #A61127 → Baby Powder only  (light-mode CTA)   */
/* on Madder Rose  #F0A4B0 → Ink Black · Oxford Blue (dark CTA)   */

/* Cormorant Garamond Regular */
@font-face {
  font-family: 'CormorantGaramond';
  src: url('https://joram.eu/fonts/CormorantGaramond-VariableFont_wght.woff2') format('woff2-variations');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
/* Cormorant Garamond Italic */
@font-face {
  font-family: 'CormorantGaramond';
  src: url('https://joram.eu/fonts/CormorantGaramond-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-heading: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-features-heading: "case" 1, "zero" 1, "calt" 1;
  --display-1: 700 clamp(3.5rem, 6vw + 1rem, 6rem)/1.02 var(--font-heading);
  --h1: 800 clamp(2.25rem, 2.5vw + 1rem, 3.25rem)/1.1 var(--font-heading);
  --h2: 600 clamp(1.75rem, 1.5vw + 1rem, 2.5rem)/1.15 var(--font-heading);
  --h3: 600 clamp(1.375rem, .75vw + 1rem, 1.75rem)/1.25 var(--font-heading);
  --tracking-heading: -0.01em;
}
h1, h2, h3, h4 { font-feature-settings: var(--font-features-heading); }

/* Nunito Regular */
@font-face {
  font-family: 'Nunito';
  src: url('https://joram.eu/fonts/Nunito-VariableFont_wght.woff2') format('woff2-variations');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
/* Nunito Italic */
@font-face {
  font-family: 'Nunito';
  src: url('https://joram.eu/fonts/Nunito-Italic-VariableFont_wght.woff2') format('woff2-variations');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  --font-body: "Nunito", system-ui, sans-serif;
  --body-lg:   300 1.125rem/1.65 var(--font-body);
  --body:      300 1rem/1.6      var(--font-body);   /* default = 300 */
  --body-emph: 400 1rem/1.6      var(--font-body);   /* emphasis    */
  --caption:   400 0.75rem/1.4   var(--font-body);
  --overline:  600 0.75rem/1.2   var(--font-body);   /* uppercased  */
  --tracking-overline: 0.12em;
}

.overline {
  font: var(--overline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-overline);
  color: var(--fg-muted);
}
h1 { font: var(--h1); letter-spacing: var(--tracking-heading); }
p  { font: var(--body); max-width: 65ch; }   /* serif display + sans body */

/* Optional: Nunito Sans — no rounded terminals, for special purposes only */
.font-sans { font-family: var(--font-body-sans); }

/* Token: --font-body-sans */
/* Example usage */
.data-table  { font-family: var(--font-body-sans); }
.tech-label  { font-family: var(--font-body-sans); }

<!-- Remix Icon -->
<link rel="stylesheet" href="https://joram.eu/fonts/remixicon.css">

<i class="ri-route-line"></i>   <!-- line = default          -->
<i class="ri-route-fill"></i>   <!-- fill = active state only -->

/* Icons inherit currentColor never tinted independently. */
/* Sizing: 16 inline · 20 buttons · 24 nav · 32+ feature blocks. */

.btn {
  font: 600 14px/1 var(--font-body);
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-oxford-blue);   /* primary */
  color: var(--color-baby-powder);
  cursor: pointer;
}
.btn-secondary { background: transparent; color: var(--color-oxford-blue); border-color: var(--color-oxford-blue); }
.btn-accent    { background: var(--color-madder); color: var(--color-baby-powder); }   /* critical CTA only */
.btn-ghost     { background: transparent; color: var(--color-oxford-blue); }
.btn:hover        { filter: brightness(0.92); }
.btn:active       { filter: brightness(0.82); transform: translateY(1px); }
.btn:focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 3px; }

[data-theme="dark"] .btn {
  background: var(--color-rose-quartz);   /* primary in dark */
  color: var(--color-oxford-blue);
}
[data-theme="dark"] .btn-secondary {
  background: transparent;
  color: var(--color-baby-powder);
  border-color: var(--color-rose-quartz);
}
[data-theme="dark"] .btn-cta {
  background: var(--color-madder-dark);   /* warm rose, AAA on ink */
  color: var(--color-ink-black);
}
[data-theme="dark"] .btn:hover        { filter: brightness(1.10); }
[data-theme="dark"] .btn:active       { filter: brightness(1.20); transform: translateY(1px); }
[data-theme="dark"] .btn:focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* CTA = the ONE most important action on a screen */
.btn-cta { background: var(--cta-bg); color: var(--cta-fg); }

:root              { --cta-bg: #a6112f; --cta-fg: #f5f7f3; }   /* Madder      */
[data-theme="dark"]{ --cta-bg: #f0a4b0; --cta-fg: #0d0d1a; }   /* Madder Rose */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font: 600 11px/1.3 var(--font-body);
  background: color-mix(in oklch, var(--color-oxford-blue) 7%, transparent);
  color: var(--color-oxford-blue);
}
.pill.outline { background: transparent; border: 1px solid var(--border-strong); }
.pill.solid   { background: var(--color-oxford-blue); color: var(--color-baby-powder); }
.pill.warn    { background: var(--color-madder); color: var(--color-baby-powder); }
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

input, textarea, select {
  font: 400 14px/1.4 var(--font-body);
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--color-oxford-blue);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-madder) 18%, transparent);
}
.field.err input { border-color: var(--color-madder); }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);     /* 1px hairline no colored accent */
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}
.card:hover { box-shadow: var(--shadow-md); }   /* lift on hover, never scale */
.card h3 { font: var(--h3); }                    /* Cormorant Garamond */
.card p  { font: var(--body); color: var(--fg-muted); }

/* Loader Styles, if Loader is needed */
.loader-small, .loader-big {
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: relative;
  margin: auto;
}
.loader-small {
  border: 3px solid var(--white);
  border-top: 3px solid var(--darkblue);
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.loader-big {
  border: 8px solid var(--white);
  border-top: 8px solid var(--darkblue);
  width: 60px;
  height: 60px;
  margin-top: 40px;
}
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

a, a:visited, a:focus, a:hover, a:active { color: inherit; }
a:visited.link { text-decoration: underline dashed; text-decoration-thickness: 50%; }
a:focus.link, a:hover.link, a:active.link {
  text-decoration: underline wavy;
  text-underline-offset: 2px;
}
.link {
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  text-decoration-thickness: 2.75px;
}

<a href="https://example.com"
   target="_blank"
   rel="noreferrer noopener"
   class="link">Linktext</a>

:root {                 /* 4px base, modular */
  --space-1:  0.25rem;  /*   4 */
  --space-2:  0.5rem;   /*   8 */
  --space-3:  0.75rem;  /*  12 */
  --space-4:  1rem;     /*  16 */
  --space-5:  1.5rem;   /*  24 */
  --space-6:  2rem;     /*  32 */
  --space-7:  3rem;     /*  48 */
  --space-8:  4rem;     /*  64 */
  --space-9:  6rem;     /*  96 */
  --space-10: 8rem;     /* 128 */
}

:root {
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;            /* chips + avatars only */
  /* Oxford-tinted, low-saturation never the default grey drop */
  --shadow-xs: 0 1px 2px 0 rgba(10,17,55,.06);
  --shadow-sm: 0 2px 6px -1px rgba(10,17,55,.08), 0 1px 2px 0 rgba(10,17,55,.04);
  --shadow-md: 0 8px 20px -6px rgba(10,17,55,.14), 0 2px 4px 0 rgba(10,17,55,.06);
  --shadow-lg: 0 20px 40px -12px rgba(10,17,55,.22), 0 4px 8px 0 rgba(10,17,55,.06);
}

<header class="topbar">
  <a class="brandblock" href="#top">…</a>
  <nav class="nav">…</nav>
  <div class="topbar-actions">
    <!-- Home link -->
    <a class="home-btn" href="https://joram.eu/" aria-label="Home">
      <i class="ri-home-3-fill"></i>
    </a>
    <!-- Language switcher -->
    <div class="lang-switcher">
      <button class="lang-toggle" aria-haspopup="true"
              aria-expanded="false">
        <i class="ri-translate-2"></i>
      </button>
      <div class="lang-dropdown">
        <button data-lang="de">Deutsch</button>
        <button data-lang="en">English</button>
      </div>
    </div>
    <!-- Theme toggle: icon only, no label -->
    <button class="theme-toggle" id="themeToggle">
      <i class="ri-moon-line"></i>
    </button>
  </div>
</header>

<footer class="site-footer">
  <a href="https://joram.eu/imp" target="_blank"
     rel="noreferrer noopener">Impressum</a>
  <a href="https://joram.eu/imp" target="_blank"
     rel="noreferrer noopener">Datenschutzerklärung</a>
</footer>