src/ApplicationBundle/Modules/HoneybeeWeb/Resources/views/inc/_web_design_system.html.twig line 1

Open in your IDE?
  1. {# Shared HoneyBee marketing design system (n-* tokens + core classes).
  2.    Include once near the top of any public page that uses n-* classes so the
  3.    page styles correctly even when its own <style> doesn't redefine the tokens. #}
  4. <style>
  5. /* ── Design Tokens ─────────────────────────────────────────────────────────── */
  6. :root {
  7.     --n-cream:      #F7F5F0;
  8.     --n-cream-2:    #F0EDE5;
  9.     --n-cream-3:    #E8E3D9;
  10.     --n-white:      #FFFFFF;
  11.     --n-dark:       #1A1D2E;
  12.     --n-dark-2:     #252840;
  13.     --n-navy:       #1E3A6E;
  14.     --n-amber:      #C07D2A;
  15.     --n-amber-lt:   #D4954A;
  16.     --n-amber-dim:  rgba(192,125,42,.10);
  17.     --n-sage:       #3D6B52;
  18.     --n-sage-dim:   rgba(61,107,82,.09);
  19.     --n-slate:      #3D4F72;
  20.     --n-slate-dim:  rgba(61,79,114,.08);
  21.     --n-muted:      #6B6E7F;
  22.     --n-muted-2:    #9395A5;
  23.     --n-border:     rgba(26,29,46,.07);
  24.     --n-border-md:  rgba(26,29,46,.12);
  25.     --n-shadow-xs:  0 1px 4px rgba(26,29,46,.05);
  26.     --n-shadow-sm:  0 2px 12px rgba(26,29,46,.07);
  27.     --n-shadow-md:  0 8px 32px rgba(26,29,46,.09);
  28.     --n-shadow-lg:  0 20px 64px rgba(26,29,46,.10);
  29.     --n-radius-sm:  8px;
  30.     --n-radius:     12px;
  31.     --n-radius-lg:  20px;
  32.     --n-font:       'DM Sans', 'Poppins', system-ui, sans-serif;
  33. }
  35. /* ── Base ──────────────────────────────────────────────────────────────────── */
  36. body { background: var(--n-cream); font-family: var(--n-font); color: var(--n-dark); }
  37. /* The global stylesheet sets p{text-align:justify}, which reads as cluttered word-gaps in
  38.    marketing copy — left-align paragraphs on the pages that use this design system. */
  39. .n-sec p, .n-hero p, .n-wrap p, .pe-hero p { text-align: left; }
  41. /* ── Utilities ─────────────────────────────────────────────────────────────── */
  42. .n-wrap    { max-width: 1160px; margin: 0 auto; padding: 0 28px; }
  43. .n-wrap-sm { max-width: 820px;  margin: 0 auto; padding: 0 28px; }
  44. .n-sec     { padding: 100px 0; }
  45. .n-sec-sm  { padding: 64px 0; }
  46. .n-label   {
  47.     display: inline-flex; align-items: center; gap: 8px;
  48.     font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  49.     color: var(--n-amber); margin-bottom: 16px;
  50. }
  51. .n-label::before { content:''; width: 18px; height: 1.5px; background: currentColor; border-radius: 2px; }
  52. .n-h1      { font-family:'Montserrat',sans-serif; font-size: clamp(36px,5vw,62px); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; }
  53. .n-h2      { font-family:'Montserrat',sans-serif; font-size: clamp(26px,3.5vw,42px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
  54. .n-h3      { font-family:'Montserrat',sans-serif; font-size: 18px; font-weight: 700; line-height: 1.3; }
  55. .n-body    { font-size: 16px; line-height: 1.75; color: var(--n-muted); }
  56. .n-body-sm { font-size: 14px; line-height: 1.7;  color: var(--n-muted); }
  57. .n-center  { text-align: center; }
  58. .n-center .n-label { justify-content: center; }
  59. .n-center .n-body  { max-width: 560px; margin: 0 auto; }
  60. .n-mt-4    { margin-top: 16px; }
  61. .n-mt-6    { margin-top: 24px; }
  62. .n-mt-8    { margin-top: 32px; }
  63. .n-mt-12   { margin-top: 48px; }
  64. em.n-em    { font-style: normal; color: var(--n-amber); }
  66. /* ── Buttons ────────────────────────────────────────────────────────────────── */
  67. .n-btn {
  68.     display: inline-flex; align-items: center; gap: 8px;
  69.     padding: 13px 26px; border-radius: var(--n-radius-sm);
  70.     font-size: 14px; font-weight: 600; letter-spacing: .01em;
  71.     border: none; cursor: pointer; text-decoration: none; transition: all .18s;
  72.     white-space: nowrap; font-family: var(--n-font);
  73. }
  74. .n-btn-primary { background: var(--n-dark);  color: #fff; }
  75. .n-btn-primary:hover  { background: var(--n-dark-2); color: #fff; transform: translateY(-1px); box-shadow: var(--n-shadow-md); }
  76. .n-btn-amber   { background: var(--n-amber); color: #fff; }
  77. .n-btn-amber:hover    { background: var(--n-amber-lt); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(192,125,42,.3); }
  78. .n-btn-outline { background: transparent; border: 1.5px solid var(--n-border-md); color: var(--n-dark); }
  79. .n-btn-outline:hover  { border-color: var(--n-dark); color: var(--n-dark); transform: translateY(-1px); }
  80. .n-btn-ghost-light    { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); color: #fff; }
  81. .n-btn-ghost-light:hover { background: rgba(255,255,255,.2); color: #fff; }
  82. .n-btn-light   { background: #fff; color: var(--n-dark); }
  83. .n-btn-light:hover    { background: var(--n-cream-2); color: var(--n-dark); }
  84. .n-btn i, .n-btn .fa  { font-size: 15px; }
  85. </style>