/** * @file theme.css * shadcn/ui-compatible theme variables for Mercury. * * You can customize these values without rebuilding the compiled CSS. * Tools like https://tweakcn.com can help generate these values. Copy this * file to your web root, so it sits next to index.php, and clear Drupal's * cache. Then, any changes you make in this file should be reflected right away. */ :root { --one: var(--color-1); --two: var(--color-2); --three: var(--color-3); --four: var(--color-4); --light: #fff; --light-foreground: #222; --default-font-family: "Plus Jakarta Sans", sans-serif; --font-title: 'Cormorant Garamond', serif; --font-title2: 'Bodoni Moda', serif; --font-title3: 'Urbanist', sans-serif; --font-sans: "Plus Jakarta Sans", sans-serif; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace; --radius: 0.5rem; --shadow-x: 0; --shadow-y: 1px; --shadow-blur: 3px; --shadow-spread: 0px; --shadow-opacity: 0.1; --shadow-color: oklch(0 0 0); --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05); --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1); --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1); --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1); --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1); --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1); --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1); --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1); --tracking-normal: 0em; --spacing: 0.25rem; --tw-text-shadow-color: #0000; /* Set navbar height for hero billboard overlay */ --navbar-height: calc(var(--spacing) * 15); @media (min-width: 768px) { --navbar-height: calc(var(--spacing) * 20); } } /* --- PALETA NEUTRAL --- */ /* Wariant jasny Neutral */ .palette--neutral.scheme--light { /* Tła i główne powierzchnie */ --background: #fbf9f5; --foreground: oklch(0.15 0.002 264); --paragraph: oklch(0.40 0.002 264); /* Karty i kontenery */ --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.002 264); /* Kolor Główny (Primary) - wyrazisty, ciemny grafit */ --primary: #292526; --primary-foreground: oklch(1 0 0); /* Biały tekst na ciemnym tle */ /* Kolor Drugorzędny (Secondary) - jasnoszare tło dla przycisków/elementów */ --secondary: #212721; --secondary-foreground: oklch(80.707% 0.01122 286.032); /* Elementy wyciszone (Muted) */ --muted: #dfdede; /* Zastępuje #94a3b8 chłodnym neutralnym */ --muted-foreground: oklch(0.55 0.002 264); /* Akcenty i interakcje (np. podświetlenia) */ --accent: oklch(0.92 0.002 264); --accent-foreground: var(--foreground); /* Linki - delikatnie ciemniejszy grafit z lekkim chłodnym tonem dla czytelności */ --link: oklch(0.30 0.01 264); /* Stan błędu (Destructive) - stonowana czerwień */ --destructive: oklch(0.60 0.18 25); --destructive-foreground: oklch(1 0 0); /* Ramki i wejścia formularzy */ --border: oklch(0.89 0.002 264); /* Delikatna, widoczna linia podziału */ --input: oklch(0.89 0.002 264); --dark: oklch(0.12 0.005 264); /* Zastępuje #020617 głęboką czernią węglową */ --dark-foreground: oklch(0.96 0.002 264); } /* Wariant ciemny Neutral */ .palette--neutral.scheme--dark { /* Główne tło strony (bardzo ciemny węgiel, przyjazny dla oczu) */ --background: oklch(0.12 0.002 264); --foreground: oklch(0.96 0.002 264); /* Bardzo jasny szary (główny tekst) */ --paragraph: oklch(0.72 0.002 264); /* Mniej kontrastowy, łagodny szary do czytania */ /* Karty i kontenery (delikatnie jaśniejsze niż tło główne - efekt elewacji) */ --card: oklch(0.17 0.002 264); --card-foreground: oklch(0.96 0.002 264); /* Kolor Główny (Primary) - jasny, wyrazisty przycisk z ciemnym tekstem */ --primary: oklch(0.96 0.002 264); --primary-foreground: oklch(0.12 0.002 264); /* Kolor Drugorzędny (Secondary) - ciemnoszary przycisk z jasnym tekstem */ --secondary: oklch(0.22 0.002 264); --secondary-foreground: oklch(0.96 0.002 264); /* Elementy wyciszone (Muted) */ --muted: oklch(0.19 0.002 264); --muted-foreground: oklch(0.60 0.002 264); /* Akcenty i interakcje */ --accent: oklch(0.22 0.002 264); --accent-foreground: var(--foreground); /* Linki - czytelny, jasny błękit wpadający w szarość (dobry kontrast na ciemnym tle) */ --link: oklch(0.74 0.04 250); /* Stan błędu (Destructive) - nieco jaśniejsza i bardziej nasycona czerwień dla widoczności */ --destructive: oklch(0.62 0.17 25); --destructive-foreground: oklch(0.98 0.002 264); /* Ramki i wejścia formularzy (bardzo subtelne linie, by nie dominowały ciemnego ekranu) */ --border: oklch(0.24 0.002 264); --input: oklch(0.24 0.002 264); /* Najgłębsza czerń (np. na stopkę lub pod-tła) */ --dark: oklch(0.08 0.002 264); --dark-foreground: oklch(0.96 0.002 264); } .palette--slate.scheme--light { /* Główne tło strony (bardzo jasny, chłodny błękitno-szary) */ --background: oklch(0.985 0.008 264); --foreground: oklch(0.15 0.032 264); /* Bardzo ciemny slate (główny tekst) */ --paragraph: oklch(0.40 0.020 264); /* Przygaszony szaroniebieski tekst */ /* Karty i kontenery (czysta biel dla kontrastu z tłem) */ --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.032 264); /* Kolor Główny (Primary) - mocny, ciemny grafit z wyraźnym odcieniem navy */ --primary: oklch(0.20 0.032 264); --primary-foreground: oklch(0.99 0.005 264); /* Kolor Drugorzędny (Secondary) - jasny, chłodny szaroniebieski przycisk */ --secondary: oklch(0.93 0.015 264); --secondary-foreground: oklch(0.20 0.032 264); /* Elementy wyciszone (Muted) */ --muted: oklch(0.94 0.012 264); --muted-foreground: oklch(0.55 0.020 264); /* Akcenty i interakcje */ --accent: oklch(0.93 0.015 264); --accent-foreground: var(--foreground); /* Linki - nasycony, elegancki błękit (doskonała widoczność w tekście) */ --link: oklch(0.40 0.12 255); /* Stan błędu (Destructive) - stonowana czerwień */ --destructive: oklch(0.60 0.18 25); --destructive-foreground: oklch(1 0 0); /* Ramki i wejścia formularzy (subtelny, chłodny szaroniebieski obrys) */ --border: oklch(0.89 0.015 264); --input: oklch(0.89 0.015 264); /* Ciemne sekcje */ --dark: oklch(0.12 0.035 264); --dark-foreground: oklch(0.96 0.008 264); } .palette--slate.scheme--dark { /* Główne tło strony (głęboki, ciemny szaroniebieski) */ --background: oklch(0.12 0.035 264); --foreground: oklch(0.96 0.010 264); /* Bardzo jasny cool-gray */ --paragraph: oklch(0.72 0.015 264); /* Przyjazny dla oczu, przygaszony szaroniebieski */ /* Karty i kontenery (delikatnie jaśniejsze niż tło główne) */ --card: oklch(0.17 0.028 264); --card-foreground: oklch(0.96 0.010 264); /* Kolor Główny (Primary) - jasny, chłodny przycisk z ciemnym tekstem */ --primary: oklch(0.96 0.010 264); --primary-foreground: oklch(0.12 0.035 264); /* Kolor Drugorzędny (Secondary) - ciemny przycisk z poświatą slate */ --secondary: oklch(0.22 0.022 264); --secondary-foreground: oklch(0.96 0.010 264); /* Elementy wyciszone (Muted) */ --muted: oklch(0.19 0.025 264); --muted-foreground: oklch(0.60 0.015 264); /* Akcenty i interakcje */ --accent: oklch(0.22 0.022 264); --accent-foreground: var(--foreground); /* Linki - jasny, czysty niebieski o wysokim kontraście na ciemnym tle */ --link: oklch(0.74 0.06 250); /* Stan błędu (Destructive) */ --destructive: oklch(0.62 0.17 25); --destructive-foreground: oklch(0.98 0.008 264); /* Ramki i wejścia formularzy */ --border: oklch(0.24 0.022 264); --input: oklch(0.24 0.022 264); /* Najgłębszy odcień (bardzo ciemny granat) */ --dark: oklch(0.08 0.035 264); --dark-foreground: oklch(0.96 0.008 264); } .palette--rose.scheme--light { /* Główne tło strony (bardzo jasny, ciepły, alabastrowy róż) */ --background: oklch(0.985 0.008 345); --foreground: oklch(0.15 0.025 345); /* Głęboki, czekoladowo-różowy grafit (główny tekst) */ --paragraph: oklch(0.40 0.015 345); /* Przygaszony, matowy ciemny róż */ /* Karty i kontenery (biel, by świeżo odcinały się od różowego tła) */ --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.025 345); /* Kolor Główny (Primary) - wyrazisty, elegancki brudny róż (szlachetna fuksja/jagoda) */ --primary: oklch(0.55 0.15 345); --primary-foreground: oklch(0.99 0.005 345); /* Kolor Drugorzędny (Secondary) - bardzo delikatny, pastelowy róż na tła przycisków */ --secondary: oklch(0.94 0.018 345); --secondary-foreground: oklch(0.35 0.05 345); /* Elementy wyciszone (Muted) */ --muted: oklch(0.95 0.012 345); --muted-foreground: oklch(0.55 0.015 345); /* Akcenty i interakcje */ --accent: oklch(0.94 0.018 345); --accent-foreground: var(--foreground); /* Linki - czytelny, ciemniejszy jagodowy róż */ --link: oklch(0.50 0.14 345); /* Stan błędu (Destructive) - czerwień ocieplona w stronę różu */ --destructive: oklch(0.60 0.18 25); --destructive-foreground: oklch(1 0 0); /* Ramki i wejścia formularzy (ciepły, pudrowy obrys) */ --border: oklch(0.89 0.015 345); --input: oklch(0.89 0.015 345); /* Bardzo głęboki ciemny brąz/purpura (np. stopka) */ --dark: oklch(0.12 0.025 345); --dark-foreground: oklch(0.96 0.008 345); } .palette--rose.scheme--dark { /* Główne tło strony (głęboki, bardzo ciemny śliwkowo-brązowy grafit) */ --background: oklch(0.12 0.025 345); --foreground: oklch(0.96 0.010 345); /* Bardzo jasny, ciepły pudrowy szary */ --paragraph: oklch(0.72 0.015 345); /* Przygaszony, ciepły różowy szary */ /* Karty i kontenery (delikatnie jaśniejsze tło śliwkowe) */ --card: oklch(0.17 0.022 345); --card-foreground: oklch(0.96 0.010 345); /* Kolor Główny (Primary) - świetlisty, pastelowy brudny róż (Rose Gold) */ --primary: oklch(0.75 0.13 345); --primary-foreground: oklch(0.12 0.025 345); /* Kolor Drugorzędny (Secondary) - ciemny przycisk z poświatą śliwki */ --secondary: oklch(0.22 0.020 345); --secondary-foreground: oklch(0.96 0.010 345); /* Elementy wyciszone (Muted) */ --muted: oklch(0.19 0.022 345); --muted-foreground: oklch(0.60 0.015 345); /* Akcenty i interakcje */ --accent: oklch(0.22 0.020 345); --accent-foreground: var(--foreground); /* Linki - jasny, wyrazisty i czytelny pastelowy róż */ --link: oklch(0.78 0.09 345); /* Stan błędu (Destructive) */ --destructive: oklch(0.62 0.17 25); --destructive-foreground: oklch(0.98 0.008 345); /* Ramki i wejścia formularzy */ --border: oklch(0.24 0.020 345); --input: oklch(0.24 0.020 345); /* Najciemniejszy odcień (głęboka śliwka/czerń) */ --dark: oklch(0.08 0.025 345); --dark-foreground: oklch(0.96 0.008 345); } .palette--violet.scheme--light { /* Główne tło strony (bardzo jasna, chłodna lawendowa biel) */ --background: oklch(0.985 0.008 295); --foreground: oklch(0.15 0.025 295); /* Głęboki, bakłażanowy grafit (główny tekst) */ --paragraph: oklch(0.40 0.015 295); /* Przygaszony, ciemny lawendowy szary */ /* Karty i kontenery (czysta biel dla kontrastu z tłem) */ --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.025 295); /* Kolor Główny (Primary) - głęboki, szlachetny fiolet ametystowy (kolor królewski) */ --primary: oklch(0.48 0.16 295); --primary-foreground: oklch(0.99 0.005 295); /* Kolor Drugorzędny (Secondary) - bardzo jasny, pastelowy fiolet lawendowy */ --secondary: oklch(0.94 0.018 295); --secondary-foreground: oklch(0.35 0.05 295); /* Elementy wyciszone (Muted) */ --muted: oklch(0.95 0.012 295); --muted-foreground: oklch(0.55 0.015 295); /* NOWOŚĆ: Akcenty i interakcje - żywy, słoneczny żółty (komplementarny dla fioletu) */ --accent: oklch(0.82 0.17 85); --accent-foreground: oklch(0.15 0.025 295); /* Bardzo ciemny tekst dla zachowania kontrastu */ /* Linki - wyrazisty, nieco ciemniejszy fiolet ametystowy o świetnej czytelności */ --link: oklch(0.45 0.14 295); /* Stan błędu (Destructive) - standardowa czerwień */ --destructive: oklch(0.60 0.18 25); --destructive-foreground: oklch(1 0 0); /* Ramki i wejścia formularzy (chłodny, lawendowy obrys) */ --border: oklch(0.89 0.015 295); --input: oklch(0.89 0.015 295); /* Bardzo głęboka czerń bakłażanowa (np. stopka) */ --dark: oklch(0.12 0.025 295); --dark-foreground: oklch(0.96 0.008 295); } .palette--violet.scheme--dark { /* Główne tło strony (bardzo ciemny bakłażanowy grafit) */ --background: oklch(0.12 0.025 295); --foreground: oklch(0.96 0.010 295); /* Bardzo jasny, lawendowy szary */ --paragraph: oklch(0.72 0.015 295); /* Przygaszony, łagodny lawendowy szary */ /* Karty i kontenery (delikatnie jaśniejsze tło bakłażanowe) */ --card: oklch(0.17 0.022 295); --card-foreground: oklch(0.96 0.010 295); /* Kolor Główny (Primary) - jasna, pastelowa lawenda o doskonałym kontraście */ --primary: oklch(0.70 0.13 295); --primary-foreground: oklch(0.12 0.025 295); /* Kolor Drugorzędny (Secondary) - ciemny przycisk z poświatą fioletu */ --secondary: oklch(0.22 0.020 295); --secondary-foreground: oklch(0.96 0.010 295); /* Elementy wyciszone (Muted) */ --muted: oklch(0.19 0.022 295); --muted-foreground: oklch(0.60 0.015 295); /* Akcenty i interakcje */ --accent: oklch(0.22 0.020 295); --accent-foreground: var(--foreground); /* Linki - dobrze widoczny, jasny fiolet lawendowy */ --link: oklch(0.76 0.09 295); /* Stan błędu (Destructive) */ --destructive: oklch(0.62 0.17 25); --destructive-foreground: oklch(0.98 0.008 295); /* Ramki i wejścia formularzy */ --border: oklch(0.24 0.020 295); --input: oklch(0.24 0.020 295); /* Najciemniejszy odcień (głęboki, niemal czarny bakłażan) */ --dark: oklch(0.08 0.025 295); --dark-foreground: oklch(0.96 0.008 295); }