templates/vitrine/lexend/components/stylesheets.html.twig line 1

Open in your IDE?
  1. <link rel="preload" href="/assets/lexend/css/unicons.min.css" as="style">
  2. <link rel="preload" href="/assets/lexend/css/swiper-bundle.min.css" as="style">
  3. <link rel="preload" href="/assets/lexend/js/libs/jquery.min.js" as="script">
  4. <link rel="preload" href="/assets/lexend/js/libs/scrollmagic.min.js" as="script">
  5. <link rel="preload" href="/assets/lexend/js/libs/swiper-bundle.min.js" as="script">
  6. <link rel="preload" href="/assets/lexend/js/libs/anime.min.js" as="script">
  7. <link rel="preload" href="/assets/lexend/js/libs/typed.min.js" as="script">
  8. <link rel="preload" href="/assets/lexend/js/libs/tilt.min.js" as="script">
  9. <link rel="preload" href="/assets/lexend/js/libs/split-type.min.js" as="script">
  10. <link rel="preload" href="/assets/lexend/js/libs/prettify.min.js" as="script">
  11. <link rel="preload" href="/assets/lexend/js/libs/gsap.min.js" as="script">
  12. <link rel="preload" href="/assets/lexend/js/core/magic-cursor.js" as="script">
  13. <link rel="preload" href="/assets/lexend/js/helpers/data-attr-helper.js" as="script">
  14. <link rel="preload" href="/assets/lexend/js/helpers/swiper-helper.js" as="script">
  15. <link rel="preload" href="/assets/lexend/js/helpers/splitype-helper.js" as="script">
  16. <link rel="preload" href="/assets/lexend/js/helpers/anime-helper.js" as="script">
  17. <link rel="preload" href="/assets/lexend/js/helpers/typed-helper.js" as="script">
  18. <link rel="preload" href="/assets/lexend/js/helpers/tilt-helper.js" as="script">
  19. <link rel="preload" href="/assets/lexend/js/core/marquee.js" as="script">
  20. <link rel="preload" href="/assets/lexend/js/uikit-components-bs.js" as="script">
  21. <link rel="preload" href="/assets/lexend/js/form.js" as="script">
  22. <link rel="preload" href="/assets/lexend/js/app.js" as="script">
  23. <link rel="stylesheet" href="/assets/lexend/js/uni-core/css/uni-core.min.css">
  24. <link rel="stylesheet" href="/assets/lexend/css/unicons.min.css">
  25. <link rel="stylesheet" href="/assets/lexend/css/swiper-bundle.min.css">
  26. <link rel="stylesheet" href="/assets/lexend/css/prettify.min.css">
  28. <script src="/assets/lexend/js/app-head-bs.js"></script>
  30. <link rel="stylesheet" href="/assets/lexend/js/uni-core/js/uni-core/css/uni-core.min.css">
  31. <link rel="stylesheet" href="/assets/lexend/css/theme/main.purge.css">
  33. {% if getEnv("LEXEND_COLOR") is empty %}
  34.     <link rel="stylesheet" href="/assets/lexend/css/theme/theme-thirteen.purge.css" />
  35. {% else %}
  36.     <link rel="stylesheet" href="/assets/lexend/css/theme/{{ getEnv("LEXEND_COLOR") }}.css" />
  37. {% endif %}
  40. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
  41. <style>
  42.     .bg--fixed,
  43.     .hero-section {
  44.         background-image: none !important;
  45.         position: relative;
  46.         overflow: hidden;
  47.     }
  49.     #hero-17 picture {
  50.         position: absolute;
  51.         top: 0; left: 0;
  52.         width: 100%;
  53.         height: 100%;
  54.         z-index: 0;
  55.         margin: 0; padding: 0;
  56.     }
  58.     #hero-17 picture img {
  59.         object-fit: cover;
  60.         width: 100%;
  61.         height: 100%;
  62.         display: block;
  63.     }
  65.     #hero-17 .hero-17-txt {
  66.         position: relative;
  67.         z-index: 1;
  68.     }
  70.     .desktop-only {
  71.         display: none;
  72.     }
  74.     @media (min-width: 768px) {
  75.         .desktop-only {
  76.             display: block;
  77.         }
  78.     }
  80. </style>
  81. <style>
  82.     @media (max-width: 767.98px) {
  83.         .sidebar-content {
  84.             position: static !important;
  85.             top: auto !important;
  86.             left: auto !important;
  87.             right: auto !important;
  88.             z-index: auto !important;
  89.             padding-right: 0 !important;
  90.             margin-bottom: 30px;
  91.             order: -1; /* Place au-dessus */
  92.         }
  93.     }
  95.     .card {
  96.         border: 1px solid #e0e0e0;
  97.         border-radius: 8px;
  98.         margin: 20px 0;
  99.         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  100.         transition: transform 0.2s;
  101.     }
  102.     .card:hover {
  103.         transform: translateY(-2px);
  104.         box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  105.     }
  106.     .card-body {
  107.         padding: 20px;
  108.     }
  109.     .card-title {
  110.         color: #2c3e50;
  111.         margin-bottom: 10px;
  112.         font-weight: bold;
  113.     }
  114.     .cards-grid-2x2 {
  115.         display: grid;
  116.         grid-template-columns: repeat(2, 1fr);
  117.         gap: 20px;
  118.         margin: 30px 0;
  119.     }
  121.     .callout {
  122.         background-color: #e8f4f8;
  123.         border-left: 4px solid #3498db;
  124.         padding: 20px;
  125.         margin: 20px 0;
  126.         border-radius: 0 5px 5px 0;
  127.         font-style: italic;
  128.     }
  129.     .highlight-box {
  130.         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  131.         color: white;
  132.         padding: 25px;
  133.         border-radius: 10px;
  134.         margin: 25px 0;
  135.         box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  136.     }
  137.     .media-placeholder {
  138.         background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
  139.         border: 2px dashed #ccc;
  140.         padding: 30px;
  141.         text-align: center;
  142.         margin: 25px 0;
  143.         border-radius: 8px;
  144.         color: #666;
  145.         font-style: italic;
  146.     }
  147. </style>
  148. <style>
  149.     .author-card {
  150.         background-color: #DEF5DD;
  151.         padding: 20px;
  152.         border-radius: 20px;
  153.         display: flex;
  154.         align-items: flex-start;
  155.         gap: 15px;
  156.     }
  158.     .author-image {
  159.         width: 60px;
  160.         height: 60px;
  161.         border-radius: 50%;
  162.         object-fit: cover;
  163.         flex-shrink: 0;
  164.     }
  166.     .author-content {
  167.         flex: 1;
  168.     }
  170.     .author-header {
  171.         display: flex;
  172.         align-items: center;
  173.         gap: 10px;
  174.         margin-bottom: 8px;
  175.     }
  177.     .author-name {
  178.         font-weight: bold;
  179.         margin: 0;
  180.     }
  182.     .linkedin-icon {
  183.         color: #0077B5;
  184.         font-size: 18px;
  185.         text-decoration: none;
  186.         transition: color 0.3s ease;
  187.     }
  189.     .linkedin-icon:hover {
  190.         color: #005885;
  191.     }
  193.     .author-description {
  194.         margin: 0;
  195.         line-height: 1.5;
  196.     }
  198.     /* Version responsive */
  199.     @media (max-width: 480px) {
  200.         .author-card {
  201.             flex-direction: column;
  202.             text-align: center;
  203.         }
  205.         .author-image {
  206.             align-self: center;
  207.         }
  208.     }
  209. </style>
  210. <style>
  211.     .summary ul, dl, ol {
  212.         list-style-type: square;
  213.         list-style-position: inside;
  214.         padding-top:15px;
  215.         padding-left: 30px;
  216.         padding-right:30px;
  217.         background-color: #DEF5DD;
  218.         border-radius: 20px;
  219.         width: fit-content;
  220.         margin-top:20px;
  221.         margin-bottom:10px;
  222.         padding-bottom: 20px;
  223.     }
  225.     .summary ul > li {
  226.         margin-bottom: 8px;
  227.         line-height: 1.4;
  228.     }
  230.     .summary ul ul {
  231.         margin: 0;
  232.         padding-top:9px;
  233.         padding-bottom:9px;
  234.     }
  236.     #single-post img {
  237.         width: 100% !important;
  238.         margin-left:auto;
  239.         margin-right:auto;
  240.         margin-bottom:20px;
  241.         margin-top:20px;
  242.     }
  244.     #single-post div, p {
  245.         font-size:18px !important;
  246.     }
  248.     #single-post a {
  249.         color:#118465 !important;
  250.     }
  252.     #single-post h2 {
  253.         font-size:27px !important;
  254.         margin-bottom:15px !important;
  255.         margin-top:15px !important;
  256.         font-weight: 800 !important;
  257.     }
  259.     .summary__title {
  260.         font-size:28px !important;
  261.         margin-bottom:10px !important;
  262.         font-weight: 800 !important;
  263.     }
  265.     #single-post h3 {
  266.         font-size:19px !important;
  267.         margin-bottom:15px !important;
  268.         font-weight: 800 !important;
  269.         margin-top:15px !important;
  270.     }
  272.     #single-post h4 {
  273.         font-size:17px !important;
  274.         margin-bottom:10px !important;
  275.         font-weight: 800 !important;
  276.     }
  278.     #single-post ul, dl, ol {
  279.         list-style-type: square;
  280.         list-style-position: inside;
  281.         padding: 30px;
  282.         background-color: #DEF5DD;
  283.         border-radius: 20px;
  284.         width: fit-content;
  285.         margin-bottom:20px;
  286.     }
  288.     #single-post ul > li {
  289.         margin-bottom: 8px;
  290.         line-height: 1.4;
  291.     }
  293.     #single-post table {
  294.         background-color: #DEF5DD;
  295.         border-radius: 20px;
  296.         width: fit-content;
  297.         border-collapse: separate;
  298.         border-spacing: 0;
  299.         overflow: hidden;
  300.         margin-bottom: 16px;
  301.     }
  303.     #single-post table,
  304.     #single-post table th,
  305.     #single-post table td {
  306.         border: none;
  307.     }
  309.     #single-post table th,
  310.     #single-post table td {
  311.         padding: 12px 16px;
  312.         text-align: left;
  313.         line-height: 1.4;
  314.     }
  316.     #single-post table tr + tr {
  317.         border-top: 1px solid rgba(0,0,0,0.05);
  318.     }
  319.     #single-post table th + th,
  320.     #single-post table td + td {
  321.         border-left: 1px solid rgba(0,0,0,0.05);
  322.     }
  324.     #single-post table th {
  325.         background-color: #A8BFA7;
  326.         font-weight: 600;
  327.     }
  329.     #single-post .table-wrapper {
  330.         overflow-x: auto;
  331.     }
  333. </style>
  334. <style>
  335.     #database_review_form_stars {
  336.         display: flex;
  337.         flex-direction: row-reverse;
  338.         justify-content: flex-end;
  339.         gap: 2px;
  340.     }
  342.     /* Cache les inputs radio */
  343.     #database_review_form_stars input[type="radio"] {
  344.         display: none;
  345.     }
  347.     /* Style des labels comme des étoiles */
  348.     #database_review_form_stars label {
  349.         font-size: 20px;
  350.         color: #ddd;
  351.         cursor: pointer;
  352.         transition: color 0.2s ease;
  353.         user-select: none;
  354.         text-indent: -9999px; /* Cache le texte original */
  355.         width: 25px; /* Largeur fixe pour l'étoile */
  356.         height: 25px; /* Hauteur fixe */
  357.         position: relative;
  358.     %}
  360.     /* Contenu étoile */
  361.     #database_review_form_stars label:before {
  362.         content: "★";
  363.         position: absolute;
  364.         left: 0;
  365.         top: 0;
  366.         text-indent: 0; /* Remet l'étoile visible */
  367.     }
  369.     /* Hover effect */
  370.     #database_review_form_stars label:hover,
  371.     #database_review_form_stars label:hover ~ label {
  372.         color: #ffc107;
  373.     }
  375.     /* Selection effect */
  376.     #database_review_form_stars input[type="radio"]:checked ~ label {
  377.         color: #ffc107;
  378.     }
  379. </style>