API tools faq
paste
Advertisement
bebo231312312321

Untitled

bebo231312312321
Sep 11th, 2024
151
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.27 KB | None | 0 0
raw download clone embed print report
  1. .header {
  2.     display: flex;
  3.     justify-content: space-between;
  4.     align-items: center;
  5.     padding: 1rem 2rem;
  6.     background: var(--linear-gradient);
  7.     position: fixed;
  8.     top: 0;
  9.     left: 0;
  10.     right: 0;
  11.     z-index: 10;
  12.     transition: all 0.5s ease;
  13.     font-size: 1.8rem;
  14. }
  15.  
  16. .sticky-container {
  17.     position: sticky;
  18.     top: 0;
  19.     display: flex;
  20.     justify-content: space-between;
  21.     align-items: center;
  22.     z-index: 100;
  23.  
  24. }
  25.  
  26. .header.hide-on {
  27.     display: none;
  28. }
  29.  
  30. .logo-container {
  31.     display: flex;
  32.     align-items: center;
  33. }
  34.  
  35. .logo {
  36.     font-size: 1.5rem;
  37.     width: var(--l-font-size);
  38.     height: var(--l-font-size);
  39.     border-radius: 50%;
  40. }
  41.  
  42. .menu-icon {
  43.     display: flex;
  44.     flex-direction: column;
  45.     justify-content: space-around;
  46.     width: 40px;
  47.     height: 40px;
  48.     cursor: pointer;
  49.     transition: all 0.3s ease;
  50.     background-color: transparent;
  51.     padding: 2px;
  52.     border-radius: 5px;
  53. }
  54.  
  55. .menu-icon .bar {
  56.     width: 100%;
  57.     height: 4px;
  58.     background-color: var(--bg-blue);
  59.     transition: all 0.8s ease;
  60.     border-radius: 5px;
  61. }
  62.  
  63. .menu-icon:hover .bar {
  64.     background-color: var(--bg-white);
  65. }
  66.  
  67. .header .right {
  68.     display: none;
  69. }
  70.  
  71. .nav-links {
  72.     display: none;
  73.     flex-direction: column;
  74.     position: absolute;
  75.     top: 100%;
  76.     right: 0;
  77.     background-color: var(--bg-black);
  78.     width: 100%;
  79.     z-index: 1;
  80. }
  81.  
  82. .nav-links.open {
  83.     display: flex;
  84. }
  85.  
  86. .nav-links a {
  87.     color: var(--bg-white);
  88.     padding: 1rem;
  89.     text-decoration: none;
  90.     transition: background-color 0.3s ease;
  91.     cursor: pointer;
  92.     text-transform: uppercase;
  93.     font-size: x-large;
  94. }
  95.  
  96. .nav-links a.active {
  97.     color: var(--bg-blue);
  98.     text-decoration: underline var(--bg-blue);
  99.     text-underline-offset: 5px;
  100.     transition: all 0.3s ease;
  101. }
  102.  
  103. .header .btn {
  104.     padding: 0.5rem 1rem;
  105.     color: var(--bg-white);
  106.     border: none;
  107.     border-radius: var(--radius);
  108.     text-decoration: none;
  109.     cursor: pointer;
  110.     transition: background-color 0.3s ease;
  111.     margin-bottom: 1rem;
  112.     z-index: 100;
  113.     align-content: center;
  114. }
  115.  
  116. .header .btn-dark-gray {
  117.     background-color: var(--bg-dark-gray);
  118. }
  119.  
  120. .header .btn-blue {
  121.     background-color: var(--bg-blue);
  122. }
  123.  
  124. .header .btn:hover {
  125.     opacity: 0.8;
  126. }
  127.  
  128. .mobile-buttons {
  129.     display: flex;
  130.     flex-direction: row;
  131.     justify-content: center;
  132.     flex-wrap: wrap;
  133.     gap: 0.5rem;
  134.     margin-top: 1rem;
  135. }
  136.  
  137. .mobile-buttons a {
  138.     font-size: var(--xxs-font-size);
  139. }
  140.  
  141. .menu-icon.open .bar:nth-child(1) {
  142.     transform: rotate(45deg) translate(8px, 8px);
  143. }
  144.  
  145. .menu-icon.open .bar:nth-child(2) {
  146.     opacity: 0;
  147. }
  148.  
  149. .menu-icon.open .bar:nth-child(3) {
  150.     transform: rotate(-45deg) translate(8px, -8.9px);
  151. }
  152.  
  153. .nav-links .dropdown {
  154.     padding-top: 1rem;
  155. }
  156.  
  157. .nav-links .dropdown-content {
  158.     display: flex;
  159.     flex-direction: column;
  160.     padding: 0.5rem 1rem;
  161.  
  162. }
  163.  
  164. .nav-links .dropdown-content a {
  165.     font-size: initial;
  166.     justify-content: flex-start;
  167. }
  168. .body-no-scroll {
  169.     overflow: hidden;
  170. }
  171. /* Sticky header за мобилни устройства */
  172. @media (max-width: 767px) {
  173.     .header {
  174.         position: sticky;
  175.         top: 0;
  176.         z-index: 100;
  177.         background: rgba(0, 0, 0, 0.8); /* Фон за sticky header */
  178.         padding: 1rem 2rem;
  179.         transition: background-color 0.3s ease, padding 0.3s ease;
  180.         display: flex;
  181.         justify-content: space-between;
  182.         align-items: center;
  183.     }
  184.     .sticky-container{
  185.         width: 100%;
  186.     }
  187.  
  188.     .nav-links {
  189.         display: none;
  190.         flex-direction: column;
  191.         position: fixed;
  192.         top: 80px;
  193.         right: 0;
  194.         left: 0;
  195.         background-color: var(--bg-black);
  196.         width: 100%;
  197.         height: calc(100vh - 80px);
  198.         overflow-y: auto;
  199.         z-index: 10;
  200.     }
  201.  
  202.  
  203.     .nav-links.open {
  204.         display: flex;
  205.     }
  206.  
  207.    
  208.     .menu-icon {
  209.         display: flex;
  210.         flex-direction: column;
  211.         justify-content: space-around;
  212.         width: 40px;
  213.         height: 40px;
  214.         cursor: pointer;
  215.         background-color: transparent;
  216.         padding: 2px;
  217.         border-radius: 5px;
  218.     }
  219.  
  220.     .menu-icon .bar {
  221.         width: 100%;
  222.         height: 4px;
  223.         background-color: var(--bg-blue);
  224.         transition: all 0.8s ease;
  225.         border-radius: 5px;
  226.     }
  227. }
  228.  
  229.  
  230. @media(min-width: 768px) {
  231.  
  232.     .header {
  233.         padding: 2rem 2rem;
  234.         background: transparent;
  235.         font-size: var(--xs-font-size);
  236.         transition: background-color 0.3s ease, padding 0.3s ease, font-size 0.3s ease;
  237.     }
  238.  
  239.     .header .logo {
  240.         width: calc(var(--l-font-size) + 12px);
  241.         height: calc(var(--l-font-size) + 12px);
  242.     }
  243.  
  244.     .header.sticky {
  245.         position: sticky;
  246.         top: 0;
  247.         background: rgba(0, 0, 0, 0.8);
  248.         padding: 1rem 2rem;
  249.         font-size: var(--xs-font-size);
  250.         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  251.         transition: background-color 0.3s ease, padding 0.3s ease, font-size 0.3s ease;
  252.     }
  253.  
  254.     .header.sticky .logo {
  255.         width: var(--l-font-size);
  256.         height: var(--l-font-size);
  257.         transition: width 0.3s ease, height 0.3s ease;
  258.     }
  259.  
  260.     .menu-icon {
  261.         display: none;
  262.     }
  263.  
  264.     .nav-links {
  265.         display: flex;
  266.         flex-direction: row;
  267.         align-items: center;
  268.         position: static;
  269.         background-color: transparent;
  270.         width: auto;
  271.         margin-left: 1rem;
  272.         flex-grow: 1;
  273.     }
  274.  
  275.     .nav-links a {
  276.         padding: 2rem 1rem;
  277.         position: relative;
  278.         font-size: inherit;
  279.     }
  280.  
  281.     .nav-links a.active {
  282.         text-decoration: underline var(--bg-blue);
  283.         text-underline-offset: 10px;
  284.     }
  285.  
  286.     .nav-links a:hover,
  287.     .nav-links a.active {
  288.         color: var(--bg-blue);
  289.         transition: all 0.3s ease;
  290.         z-index: 10;
  291.     }
  292.  
  293.     .nav-links .dropdown:hover .dropdown-content {
  294.         padding-top: 1rem;
  295.         display: block;
  296.     }
  297.  
  298.     .nav-links .dropdown-content a:hover {
  299.         text-decoration: underline var(--bg-blue);
  300.         opacity: 0.6;
  301.         transition: all 0.3s ease;
  302.     }
  303.  
  304.     .header .right {
  305.         display: flex;
  306.         gap: 1rem;
  307.         text-transform: uppercase;
  308.         z-index: 100;
  309.     }
  310.  
  311.     .mobile-buttons {
  312.         display: none;
  313.     }
  314.  
  315.     .header .btn {
  316.         max-width: 100%;
  317.         white-space: nowrap;
  318.         margin-left: 0 0.5rem 0 0.5rem;
  319.         margin-bottom: 0;
  320.     }
  321.  
  322.     .nav-links a:active {
  323.         color: var(--bg-blue);
  324.     }
  325.  
  326.     .nav-links .dropdown {
  327.         position: relative;
  328.     }
  329.  
  330.     .nav-links .dropdown:hover>a {
  331.         background-color: var(--bg-black);
  332.         box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.5);
  333.         transition: background 0.3s ease, box-shadow 0.3s ease;
  334.     }
  335.  
  336.  
  337.     .nav-links .dropdown:hover>a {
  338.         border-radius: 10px 10px 0 0;
  339.     }
  340.  
  341.     .nav-links .dropdown-content {
  342.         display: none;
  343.         position: absolute;
  344.         top: 120%;
  345.         left: 5px;
  346.         background: var(--linear-gradient);
  347.         width: 100%;
  348.         border-radius: 0 10px 10px 10px;
  349.         z-index: 10;
  350.         padding: 0;
  351.         min-width: 30rem;
  352.         background-size: cover;
  353.         background-position: top left;
  354.         transition: background 0.3s ease;
  355.     }
  356.  
  357.     .nav-links .dropdown:hover .dropdown-content {
  358.         display: block;
  359.         transition: background 0.3s ease;
  360.     }
  361.  
  362.     .nav-links .dropdown-content a {
  363.         padding: 1rem;
  364.         display: block;
  365.         color: var(--bg-white);
  366.         text-decoration: none;
  367.         text-align: start;
  368.         margin: 0;
  369.         font-size: 0.875rem;
  370.         transition: background 0.3s ease;
  371.         background: transparent;
  372.     }
  373.  
  374. }
  375.  
  376. @media (min-width: 768px) and (max-width: 900px) {
  377.     .header {
  378.  
  379.         font-size: var(--xxs-font-size);
  380.     }
  381.  
  382.     .header .right {
  383.         gap: 0.5rem;
  384.     }
  385.  
  386.     .header .btn {
  387.         padding: 0.3rem 0.8rem;
  388.         font-size: 0.875rem;
  389.     }
  390.  
  391.     .nav-links a {
  392.         padding: 1rem 0.5rem;
  393.     }
  394.  
  395.     .mobile-buttons {
  396.         display: none;
  397.     }
  398. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!