minor improvements

.gitignore

@@ -160,3 +160,5 @@ docker-compose.override.yml
 #  gitignore only blocks new untracked files. Move docs you want
 #  shared into README/AGENTS/CLAUDE.md or a dedicated published path.)
 /docs/
+
+.codegraph/

src/components/Box/Box.module.scss

@@ -5,56 +5,150 @@
      unchanged. Pairs with `viewport-fit=cover` in SeoGenerator. */
   bottom: max(15px, env(safe-area-inset-bottom));
   right: 15px;
-  position: -webkit-fixed;
-  height: auto;
   width: 100%;
-  max-width: 450px;
-  background-color: #fff;
+  max-width: 480px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  background-color: #ffffff;
+  background-image: url('/keepsimple_/assets/landingPage/landing-bg.webp');
+  background-repeat: repeat;
   z-index: 2147483647;
-  border-radius: 8px;
   box-shadow:
     0px 8px 17px 0px rgba(0, 0, 0, 0.05),
     0px 30px 30px 0px rgba(0, 0, 0, 0.04),
     0px 68px 41px 0px rgba(0, 0, 0, 0.03),
     0px 122px 49px 0px rgba(0, 0, 0, 0.01),
     0px 190px 53px 0px rgba(0, 0, 0, 0);
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.headerRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+
+.title {
+  font-family: 'Aboreto-Regular', serif;
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 1.16;
+  letter-spacing: 0;
+  text-transform: uppercase;
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.closeBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 0.7;
+  }
+}
+
+.closeIcon {
+  width: 26px;
+  height: 26px;
+}
+
+.divider {
+  display: block;
+  width: 100%;
+  height: 0;
+  border-top: 2px solid #9d9d9d;
+}
+
+.txt {
+  margin: 0;
+  font-family: 'Source-Serif-Regular', serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #000000;
+}
+
+.btnWrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.acceptBtn {
+  padding: 9px 24px;
+  font-family: 'Source-Serif-Regular', serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.4;
+  text-align: center;
+  background-color: #242424;
+  color: #ffffff;
+  border: none;
+  border-radius: 0;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    opacity 0.2s ease;
+
+  &:hover {
+    opacity: 0.88;
+  }
+}
+
+.ruLang .title {
+  font-family: 'Source-Serif-Regular', serif;
+}
+
+.hyLang {
+  .title,
+  .txt,
+  .acceptBtn {
+    font-family: 'NotoSansArmenian-Regular', sans-serif;
+  }
+}
+
+// Dark theme — body.darkTheme class is toggled by useGlobals.
+:global(.darkTheme) {
+  .content {
+    background-color: #1b1e26;
+    background-image: url('/keepsimple_/assets/landingPage/landing-dark-bg.webp');
+  }
+
+  .title {
+    color: rgba(255, 255, 255, 0.85);
+  }
 
-  .header {
-    border-bottom: 1px solid #d9d9d9;
-    width: 100%;
-    justify-content: space-between;
-    padding-top: 13px;
-    padding-bottom: 8px;
-    display: flex;
-    align-items: center;
-
-    .title {
-      padding: 10px;
-      font-size: 16px;
-      color: #28587b;
-      font-family: 'Lato', sans-serif;
-    }
+  .closeIcon {
+    filter: brightness(0) invert(1);
   }
 
-  .closeBtn {
-    padding-right: 15px;
-    cursor: pointer;
+  .divider {
+    border-top-color: #5b5b5b;
   }
 
   .txt {
-    padding: 5px 15px;
-    font-size: 16px;
-    line-height: 150%;
-    font-family: 'Lato', sans-serif;
-    color: #252626;
+    color: #ffffff;
   }
 
-  .btnWrapper {
-    display: flex;
-    justify-content: flex-end;
-    gap: 15px;
-    padding-right: 15px;
-    padding-bottom: 15px;
+  .acceptBtn {
+    background-color: #ffffff;
+    color: rgba(0, 0, 0, 0.85);
   }
 }
 

src/components/Box/Box.tsx

@@ -1,13 +1,12 @@
 import cn from 'classnames';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { FC } from 'react';
 
 import { TRouter } from '@local-types/global';
 
 import cookieData from '@data/cookies';
 
-import Button from '@components/Button';
-
 import styles from './Box.module.scss';
 
 interface CookiesBoxProps {
@@ -20,25 +19,44 @@ const Box: FC<CookiesBoxProps> = ({ setIsSeen }) => {
   const { title, description, ok } = cookieData[locale];
 
   return (
-    <div>
-      <div
-        data-cy="cookie-box"
-        className={cn(styles.content, {
-          [styles.hyLang]: locale === 'hy',
-        })}
-      >
-        <div className={styles.header}>
+    <div
+      data-cy="cookie-box"
+      className={cn(styles.content, {
+        [styles.hyLang]: locale === 'hy',
+        [styles.ruLang]: locale === 'ru',
+      })}
+    >
+      <div className={styles.header}>
+        <div className={styles.headerRow}>
           <span className={styles.title}>{title}</span>
-        </div>
-        <p className={styles.txt}>{description}</p>
-        <div className={styles.btnWrapper}>
-          <Button
-            label={ok}
+          <button
+            type="button"
+            aria-label="Close"
             onClick={setIsSeen}
-            variant={'primary'}
-            dataCy="cookie-box-accept"
-          />
+            className={styles.closeBtn}
+            data-cy="cookie-box-close"
+          >
+            <Image
+              src="/keepsimple_/assets/cookies/close.svg"
+              alt=""
+              width={26}
+              height={26}
+              className={styles.closeIcon}
+            />
+          </button>
         </div>
+        <span className={styles.divider} aria-hidden />
+      </div>
+      <p className={styles.txt}>{description}</p>
+      <div className={styles.btnWrapper}>
+        <button
+          type="button"
+          data-cy="cookie-box-accept"
+          onClick={setIsSeen}
+          className={styles.acceptBtn}
+        >
+          {ok}
+        </button>
       </div>
     </div>
   );

src/components/Headline/Headline.module.scss

@@ -39,14 +39,19 @@
     max-height: 100%;
 
     .videoContainer {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      overflow: hidden;
+      z-index: -1;
+
       .poster {
         width: 100%;
         height: 100%;
         object-fit: cover;
         position: absolute;
         top: 0;
         left: 0;
-        z-index: -1;
       }
 
       .video {
@@ -56,7 +61,6 @@
         position: absolute;
         top: 0;
         left: 0;
-        z-index: -1;
         background-color: unset;
         opacity: 0;
         transition: opacity 300ms ease;
@@ -181,6 +185,22 @@
     padding-top: 5px;
     align-items: center;
 
+    a {
+      display: inline-flex;
+      transition:
+        opacity 0.2s ease,
+        transform 0.2s ease;
+
+      img {
+        transition: filter 0.2s ease;
+      }
+
+      &:hover {
+        opacity: 0.75;
+        transform: translateY(-2px);
+      }
+    }
+
     .btn {
       border-radius: 2px;
       width: 100px;
@@ -208,6 +228,7 @@
   .serenityBtn {
     color: #fafafa;
   }
+  background-image: url('/keepsimple_/assets/landingPage/dark-theme-bg.png');
 
   .leaf {
     filter: brightness(0) invert(1);
@@ -328,6 +349,7 @@
         max-width: 100%;
         height: 55vh;
         position: relative;
+        overflow: hidden;
 
         &::after {
           content: '';

src/components/UsedBy/UsedBy.module.scss

@@ -28,8 +28,12 @@
   }
 
   &::before {
-    background-image: url('/keepsimple_/assets/landingPage/usedByDark.png');
-    background-size: cover;
+    background-image: url('/keepsimple_/assets/landingPage/dark.png');
+    // url('/keepsimple_/assets/landingPage/used-by-dark.png');
+    background-repeat: repeat, no-repeat;
+    background-size:
+      560px 420px,
+      cover;
     opacity: 1;
   }
 }

src/styles/globals.scss

@@ -110,7 +110,7 @@ body {
   background: unset;
 }
 .keepsimplePagesDark {
-  background-image: url('/keepsimple_/assets/landingPage/landing-dark-bg.webp') !important;
+  background-image: url('/keepsimple_/assets/landingPage/dark-theme-bg.png') !important;
   background-repeat: repeat;
   background-size: 560px 420px;
 }

src/uxcore/components/OurProjectsModal/OurProjectsModal.module.scss

@@ -99,6 +99,11 @@
     .name {
       color: #dadada !important;
     }
+
+    .projectIcon,
+    .openLinkIcon {
+      filter: invert(1);
+    }
   }
 
   .description,
@@ -111,9 +116,25 @@
     color: #dadada;
     background-color: transparent;
 
+    .darkIcon {
+      display: none;
+    }
+
+    .lightIcon {
+      display: inline-block;
+    }
+
     &:hover {
       background-color: #dadada;
       color: #1b1e26;
+
+      .darkIcon {
+        display: inline-block;
+      }
+
+      .lightIcon {
+        display: none;
+      }
     }
   }
 }