src/StartPlatz/Bundle/StyleBundle/Resources/views/base.sp-public-spring-26.html.twig line 1

Open in your IDE?
  1. {# Level-2-Template: SP Public Spring 26 Design System #}
  2. {# Extends base.tailwind.public (Level 1) — adds fonts, colors, design-system CSS #}
  3. {# Styleguide: doc/standards/sp-public-spring-26-styleguide.md #}
  5. {% extends "@StartPlatzStyleBundle/base.tailwind.public.html.twig" %}
  7. {# === Topic Color (override in Level-3 templates) === #}
  8. {# "green" or "blue" — controls CTA, top-stripes, active filter #}
  9. {% set topicColor = block('topicColor') is defined ? block('topicColor') : 'green' %}
  11. {% block fonts %}
  12.     <link rel="preconnect" href="https://fonts.googleapis.com">
  13.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  14.     <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet">
  15. {% endblock %}
  17. {% block tailwindConfig %}
  18. <script>
  19.     tailwind.config = {
  20.         theme: {
  21.             extend: {
  22.                 colors: {
  23.                     sp: {
  24.                         green: '#7ab800',
  25.                         'green-dark': '#5a8a00',
  26.                         blue: '#0080bb',
  27.                         'blue-dark': '#006699',
  28.                         gray: '#525459',
  29.                         'gray-light': '#f5f6f7',
  30.                         'gray-mid': '#e2e3e5',
  31.                     },
  32.                     acc: { blue: '#0066CC', 'blue-dark': '#0052a3' },
  33.                     rp: { red: '#dc3545', 'red-dark': '#b02a37' },
  34.                     gs: { terracotta: '#c67b5c', 'terracotta-dark': '#b56a4c' },
  35.                 },
  36.                 fontFamily: {
  37.                     sans: ['"Source Sans Pro"', 'system-ui', 'sans-serif'],
  38.                     display: ['"DM Serif Display"', 'Georgia', 'serif'],
  39.                 }
  40.             }
  41.         }
  42.     }
  43. </script>
  44. {% endblock %}
  46. {% block styles %}
  47. <style>
  48.     /* Diagonale Section-Dividers — STARTPLATZ Key Visual */
  49.     .diagonal-top { clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); }
  50.     .diagonal-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); }
  51.     .diagonal-both { clip-path: polygon(0 4vw, 100% 0, 100% calc(100% - 4vw), 0 100%); }
  53.     /* Dekorative diagonale Streifen (auf Gradient-Sections) */
  54.     .stripe-decoration { position: relative; overflow: hidden; }
  55.     .stripe-decoration::before {
  56.         content: ''; position: absolute; top: -60px; right: -120px;
  57.         width: 400px; height: 400px; background: rgba(255,255,255,0.06);
  58.         transform: rotate(-15deg); border-radius: 24px;
  59.     }
  60.     .stripe-decoration::after {
  61.         content: ''; position: absolute; bottom: -80px; left: -80px;
  62.         width: 300px; height: 300px; background: rgba(255,255,255,0.04);
  63.         transform: rotate(-15deg); border-radius: 24px;
  64.     }
  66.     /* Card Hover — Soft (default, fuer Format-Cards) */
  67.     .card-hover { transition: box-shadow 0.25s ease, border-color 0.25s ease; }
  68.     .card-hover:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); border-color: #7ab800; }
  70.     /* Card — Brutalist (Offset-Shadow + Press-Down Hover) */
  71.     .card-brut {
  72.         border: 2.5px solid #525459;
  73.         box-shadow: 5px 5px 0 #525459;
  74.         transition: box-shadow 0.15s ease, transform 0.15s ease;
  75.     }
  76.     .card-brut:hover {
  77.         box-shadow: 2px 2px 0 #525459;
  78.         transform: translate(3px, 3px);
  79.     }
  81.     /* Smooth Scroll */
  82.     html { scroll-behavior: smooth; }
  83. </style>
  84. {% endblock %}
  86. {% block navigation %}
  87.     {% include '@StartPlatzStyleBundle/Navigation/_nav.public.tailwind.html.twig' %}
  88. {% endblock %}
  90. {% block bodyClass %}font-sans text-sp-gray bg-white antialiased{% endblock %}
  92. {# topicColor block — Level-3 templates override this #}
  93. {% block topicColor %}green{% endblock %}