src/ApplicationBundle/Resources/views/framework/_web_solutions_css.html.twig line 1

Open in your IDE?
  1. {#
  2.   framework/_web_solutions_css.html.twig
  3.   ======================================================================
  5.   Marketing solutions page: flow diagram, FAQ, explore grid
  7.   This block was byte-identical in 12 templates. Lifted VERBATIM — same rules,
  8.   same order — so the render is unchanged and this is a de-duplication, not a
  9.   restyle. Each call site keeps the include AT THE POSITION its <style> occupied,
  10.   so the cascade is untouched.
  12.   The block is STATIC (no Twig interpolation), which is why it was safe to move
  13.   in a batch. Converting these rules to --cp-* tokens is Phase 3.
  14.   ======================================================================
  15. #}
  16. <style>
  17. .sl-hero { background: var(--n-cream); padding: 130px 0 80px; position: relative; overflow: hidden; }
  18. .sl-hero::before { content:''; position:absolute; top:0; right:0; width:55%; height:100%; background: radial-gradient(ellipse 80% 70% at 80% 40%, rgba(192,125,42,.07) 0%, transparent 65%), radial-gradient(ellipse 50% 60% at 95% 80%, rgba(61,107,82,.06) 0%, transparent 60%); pointer-events:none; }
  19. .sl-hero-inner { max-width: 760px; position: relative; }
  20. .sl-flow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
  21. .sl-flow-step { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--n-white); border: 1px solid var(--n-border-md); border-radius: 100px; font-size: var(--cp-fs-base, 13px); font-weight: 600; color: var(--n-dark); }
  22. .sl-flow-step .sl-num { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; background: var(--n-amber-dim); border: 1px solid rgba(192,125,42,.3); color: var(--n-amber); font-size: var(--cp-fs-xs, 11.5px); font-weight: 800; font-family: monospace; display: flex; align-items: center; justify-content: center; }
  23. .sl-flow-arrow { color: var(--n-muted-2); align-self: center; font-size: 12px; }
  24. .sl-faq { display: grid; gap: 1px; background: var(--n-border-md); border: 1px solid var(--n-border-md); border-radius: var(--n-radius); overflow: hidden; margin-top: 32px; }
  25. .sl-faq-item { background: var(--n-white); padding: 26px 28px; }
  26. .sl-faq-item h3 { font-family:'Montserrat',sans-serif; font-size: var(--cp-fs-md, 15px); font-weight: 700; color: var(--n-dark); margin-bottom: 8px; }
  27. .sl-faq-item p { font-size: 14px; line-height: 1.65; color: var(--n-muted); }
  28. .sl-explore { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
  29. .sl-problem ul, .sl-solution ul { list-style: none; margin-top: 18px; display: grid; gap: 12px; }
  30. .sl-problem li, .sl-solution li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--cp-fs-md, 15px); line-height: 1.6; color: var(--n-muted); }
  31. .sl-problem li i { color: var(--n-amber); margin-top: 4px; }
  32. .sl-solution li i { color: var(--n-sage); margin-top: 4px; }
  33. @media (max-width: 720px) { .sl-flow-arrow { display: none; } }
  34. </style>