:root { --cc-bg: #0b0f14; --cc-bg-soft: #11161d; --cc-bg-soft-2: #151b23; --cc-surface: #131922; --cc-text: #f5f7fb; --cc-text-soft: #98a2ad; --cc-border: rgba(255,255,255,.10); --cc-accent: #feac03; } html[data-theme="dark"] { background: var(--cc-bg); } body.theme-dark, body.theme-dark #__nuxt, body.theme-dark .homePage, body.theme-dark .blackOnWhiteWrap, body.theme-dark .javexWrap, body.theme-dark .levelSoundWrap, body.theme-dark .sevenForceWrap, body.theme-dark .sovtonWrap, body.theme-dark .navigationHeader.pc, body.theme-dark .mobileHeader.mobile { background: var(--cc-bg) !important; color: var(--cc-text) !important; } body.theme-dark { color-scheme: dark; } body.theme-dark .navigationHeader, body.theme-dark .mobileHeader { background: rgba(9,12,17,.88) !important; box-shadow: 0 14px 35px rgba(0,0,0,.28); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } body.theme-dark .navigationHeader a, body.theme-dark .mobileHeader a, body.theme-dark .menuWrap a, body.theme-dark .languageChanger, body.theme-dark .menuLinks a, body.theme-dark .socialsWrapLinks a, body.theme-dark .smallTextDescription a { color: var(--cc-text) !important; } body.theme-dark .navigationHeader svg path, body.theme-dark .mobileHeader .mobileLogo path { fill: var(--cc-text) !important; } body.theme-dark .menuWrap { background: linear-gradient(180deg, #0c1016 0%, #0b0f14 100%) !important; } body.theme-dark .menuTitle, body.theme-dark .socialsWrapTitle, body.theme-dark .socialsWrapTitleSecond, body.theme-dark .latestWorksTitle, body.theme-dark .smallTextDescription, body.theme-dark .latestWorkItemType, body.theme-dark [class*="BlockName"], body.theme-dark [class*="smallTextDescription"], body.theme-dark [class*="Description"] p, body.theme-dark .languageChanger { color: var(--cc-text-soft) !important; } body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark p, body.theme-dark span, body.theme-dark li, body.theme-dark div, body.theme-dark [class*="Title"], body.theme-dark [class*="Description"], body.theme-dark [class*="Name"], body.theme-dark [class*="Type"], body.theme-dark [class*="Info"], body.theme-dark [class*="Par"], body.theme-dark [class*="Link"] { color: inherit; } body.theme-dark, body.theme-dark p, body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark [class*="Title"], body.theme-dark [class*="Description"], body.theme-dark [class*="Name"], body.theme-dark [class*="Type"], body.theme-dark [class*="Info"], body.theme-dark [class*="Par"] { color: var(--cc-text) !important; } body.theme-dark a::after { background-image: none !important; background-color: var(--cc-accent) !important; height: 2px !important; top: auto !important; bottom: -3px !important; } body.theme-dark .roundedBlock, body.theme-dark .roundedBlockTop, body.theme-dark .form, body.theme-dark .latestWorksMobileBlock, body.theme-dark .titleBlock, body.theme-dark .genius, body.theme-dark .symbolism, body.theme-dark .whatDone, body.theme-dark .ahead, body.theme-dark .bigLogoBlock, body.theme-dark .mainBlock, body.theme-dark .secondBlock, body.theme-dark .thirdBlock, body.theme-dark .forthBlock, body.theme-dark .newLevel, body.theme-dark .twist, body.theme-dark .sovtonWrap .sovton .secondBlock .secondBlockLeft, body.theme-dark .homePage .ourWorks .ourWorksBot .ourWorksBlockWrap, body.theme-dark .homePage .ourWorks .ourWorksTop .ourWorksBlockWrap, body.theme-dark .homePage .ourWorks .ourWorksBot .ourWorksBlockWrap .ourWorksBlock, body.theme-dark .homePage .ourWorks .ourWorksTop .ourWorksBlockWrap .ourWorksBlock, body.theme-dark .logosWrapLogo { background: var(--cc-bg-soft) !important; border: 1px solid var(--cc-border) !important; box-shadow: none !important; } body.theme-dark .form { background: radial-gradient(circle at bottom right, rgba(254,172,3,.12), transparent 30%), var(--cc-bg-soft) !important; background-image: none !important; } body.theme-dark .form .formContent .formWrap .formItem input, body.theme-dark .form .formContent .formWrap .formItem textarea { color: var(--cc-text) !important; border-bottom-color: rgba(255,255,255,.24) !important; } body.theme-dark .form .formContent .formWrap .formItem input::placeholder, body.theme-dark .form .formContent .formWrap .formItem textarea::placeholder { color: rgba(245,247,251,.56) !important; } body.theme-dark .form .formContent .formWrap .formItem p span { color: var(--cc-text-soft) !important; } body.theme-dark .divider, body.theme-dark .dividerMobile, body.theme-dark .whatDoneLeftLine, body.theme-dark .menuTitle { border-color: rgba(255,255,255,.14) !important; } body.theme-dark .latestWorkItemWrap, body.theme-dark .whatDoneLeftLineContent, body.theme-dark .titleDesc, body.theme-dark .soundInfo, body.theme-dark .twistArticle, body.theme-dark .twistDescription, body.theme-dark .thirdBlockDescription, body.theme-dark .forthBlockDescription, body.theme-dark .mainBlockDescription, body.theme-dark .secondBlockLeftDescription, body.theme-dark .secondBlockDescription, body.theme-dark .titleBlockDescriptionDescription, body.theme-dark .aheadRightDescription, body.theme-dark .whatDoneLeftDescription, body.theme-dark .whatDoneLeftContent, body.theme-dark .geniusDescription { color: var(--cc-text-soft) !important; } body.theme-dark .actionButton, body.theme-dark .homePage .form .actionButton, body.theme-dark .blackOnWhiteWrap .form .actionButton, body.theme-dark .javexWrap .form .actionButton, body.theme-dark .sevenForceWrap .form .actionButton, body.theme-dark .sovtonWrap .form .actionButton { background: var(--cc-accent) !important; color: #101317 !important; border: 1px solid transparent !important; } body.theme-dark .actionButton:hover { background: #fff !important; color: #101317 !important; } body.theme-dark .cursorButton { border-color: rgba(255,255,255,.28) !important; background: rgba(255,255,255,.08) !important; color: var(--cc-text) !important; } body.theme-dark .nuxt-progress { background-color: var(--cc-accent) !important; } body.theme-dark .homePage .roundedBlockContainerTop .roundedBlockWrapTop .roundedBlockTop, body.theme-dark .roundedBlockContainer .roundedBlockWrap .roundedBlock { background: var(--cc-bg-soft-2) !important; } body.theme-dark .sovtonWrap .sovton .secondBlock .secondBlockLeft, body.theme-dark .sovtonWrap .form { background: var(--cc-bg-soft) !important; } body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneRight, body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft { background: var(--cc-bg-soft) !important; } body.theme-dark img[src*="blackLogo"], body.theme-dark img[src*="greenLogo"], body.theme-dark img[src*="circleLogo"] { background: #fff; border-radius: 18px; padding: 12px; box-sizing: border-box; } body.theme-dark .whiteCircle { border-color: rgba(255,255,255,.45) !important; } body.theme-dark .whatDoneLeftLine .whatDoneLeftLineContent p span { background: var(--cc-accent) !important; } body.theme-dark .soundLink, body.theme-dark .geniusLink { color: var(--cc-accent) !important; } body.theme-dark .homePage .latestWorks .latestWorksBlock .latestWorkItemWrap:hover .latestWorkItem .latestWorkItemName, body.theme-dark .homePage .latestWorks .latestWorksBlock .latestWorkItemWrap:hover .latestWorkItem .latestWorkItemType { color: var(--cc-accent) !important; } body.theme-dark .ourWorksBlockTitleWrap, body.theme-dark .latestWorkItem, body.theme-dark .ourWorksBlock { color: var(--cc-text) !important; } body.theme-dark .ourWorksBlockImage img, body.theme-dark .latestWorksMobileBlock img, body.theme-dark .mainBlockRight img, body.theme-dark .secondBlockRight img, body.theme-dark .thirdBlockRight img, body.theme-dark .whatDoneRight img { filter: saturate(0.95) contrast(1.02); } @media (max-width: 900px) { body.theme-dark .form { padding-left: 24px !important; padding-right: 24px !important; } body.theme-dark .mobileHeader { background: rgba(9,12,17,.94) !important; } } /* Fix: Level Sound "What we've done" block keeps a light textured panel in dark mode, so its text must stay dark for readability. */ body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftContentWrap, body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftContentWrap .whatDoneLeftContent { background-color: transparent !important; } body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftContentWrap .title, body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftContentWrap .listedItems, body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftContentWrap .listedItems li, body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftContentWrap .listedItems p, body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftContentWrap p, body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftDescription, body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftContent, body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftContent span { color: #101317 !important; opacity: 1 !important; text-shadow: none !important; } /* Keep accent/red elements visible */ body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftLineContent, body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftLineContent p, body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftLineContent span, body.theme-dark .levelSound .whatDone .whatDoneLeft .smallTextDescription, body.theme-dark .levelSound .whatDone .whatDoneLeft .smallTextDescription span { color: #ff1b00 !important; } /* Preserve the textured light panel so the original art direction stays intact */ body.theme-dark .levelSound .whatDone .whatDoneLeft .whatDoneLeftContentWrap { filter: none !important; } /* V2 fix: force readable text on the Level Sound light textured panel in dark mode */ body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftContentWrap, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftContentWrap { background-image: url(/_nuxt/img/whatDoneBg.053b5d6.webp) !important; background-size: cover !important; background-repeat: no-repeat !important; background-color: #eeefea !important; } body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftContentWrap .whatDoneLeftContent, body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftContentWrap .whatDoneLeftContent *, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftContentWrap .whatDoneLeftContent, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftContentWrap .whatDoneLeftContent * { color: #121417 !important; opacity: 1 !important; mix-blend-mode: normal !important; text-shadow: none !important; -webkit-text-fill-color: #121417 !important; } body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftContentWrap .title, body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftContentWrap .listedItems, body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftContentWrap p, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftContentWrap .title, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftContentWrap .listedItems, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftContentWrap p { color: #121417 !important; opacity: 1 !important; -webkit-text-fill-color: #121417 !important; } body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine { background: #e90e0f !important; } body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent, body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent *, body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .smallTextDescription, body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .smallTextDescription *, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent *, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .smallTextDescription, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .smallTextDescription * { opacity: 1 !important; } body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent p, body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .smallTextDescription, body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .smallTextDescription span, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent p, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .smallTextDescription, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .smallTextDescription span { color: #ff1b00 !important; -webkit-text-fill-color: #ff1b00 !important; } body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent p span, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent p span { background: #121417 !important; } /* Visibility fix: sections that intentionally keep a light background/image in dark mode must keep dark foreground text for readability. */ /* Home hero intro text stays on the original light hero image */ body.theme-dark .homePage .gotIdea .gotIdeaActionsWrap .gotIdeaPar, html[data-theme="dark"] body .homePage .gotIdea .gotIdeaActionsWrap .gotIdeaPar { color: #101317 !important; -webkit-text-fill-color: #101317 !important; text-shadow: 0 1px 0 rgba(255,255,255,.28); } /* Home latestWorks intro row sits on a light section in the original design */ body.theme-dark .homePage .latestWorks .latestWorksInfo .smallTextTitle, body.theme-dark .homePage .latestWorks .latestWorksInfo .smallTextDescription, body.theme-dark .homePage .latestWorks .latestWorksInfo p, html[data-theme="dark"] body .homePage .latestWorks .latestWorksInfo .smallTextTitle, html[data-theme="dark"] body .homePage .latestWorks .latestWorksInfo .smallTextDescription, html[data-theme="dark"] body .homePage .latestWorks .latestWorksInfo p { color: #101317 !important; -webkit-text-fill-color: #101317 !important; opacity: 1 !important; } /* If any project/content panels preserve a light textured/image background, force readable dark text inside them instead of inheriting global white text. */ body.theme-dark [style*="background: rgb(242"] .smallTextTitle, body.theme-dark [style*="background:#f2"] .smallTextTitle, body.theme-dark [style*="background: #f2"] .smallTextTitle, body.theme-dark [style*="background: rgb(242"] .smallTextDescription, body.theme-dark [style*="background:#f2"] .smallTextDescription, body.theme-dark [style*="background: #f2"] .smallTextDescription, body.theme-dark [style*="background: rgb(242"] p, body.theme-dark [style*="background:#f2"] p, body.theme-dark [style*="background: #f2"] p { color: #101317 !important; -webkit-text-fill-color: #101317 !important; } /* V3 fix: the home latestWorks intro section turns dark in dark mode, so its text must stay light. Previous patch forced dark text there and made it disappear. */ body.theme-dark .homePage .latestWorks .latestWorksInfo .smallTextTitle, body.theme-dark .homePage .latestWorks .latestWorksInfo .smallTextDescription, body.theme-dark .homePage .latestWorks .latestWorksInfo p, html[data-theme="dark"] body .homePage .latestWorks .latestWorksInfo .smallTextTitle, html[data-theme="dark"] body .homePage .latestWorks .latestWorksInfo .smallTextDescription, html[data-theme="dark"] body .homePage .latestWorks .latestWorksInfo p { color: var(--cc-text) !important; -webkit-text-fill-color: var(--cc-text) !important; opacity: 1 !important; text-shadow: none !important; } /* Keep the section label readable too */ body.theme-dark .homePage .latestWorks .latestWorksBlock .latestWorksTitle, html[data-theme="dark"] body .homePage .latestWorks .latestWorksBlock .latestWorksTitle { color: var(--cc-text) !important; -webkit-text-fill-color: var(--cc-text) !important; opacity: 1 !important; } /* V4 fix: Level Sound vertical red stripe text must stay dark and readable in dark mode */ body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent p, body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent span, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent p, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent span { color: #0f1115 !important; -webkit-text-fill-color: #0f1115 !important; opacity: 1 !important; text-shadow: none !important; mix-blend-mode: normal !important; } /* Keep separators/dots dark on the red strip too */ body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent p span, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent p span { background: #0f1115 !important; } /* V5 fix: Black on White page top-right circle logo should stay transparent in dark mode. The generic logo rule added a white rounded background and turned it into a blank box. */ body.theme-dark .blackOnWhiteWrap .genius .geniusRight img[src*="circleLogo"], html[data-theme="dark"] body .blackOnWhiteWrap .genius .geniusRight img[src*="circleLogo"] { background: transparent !important; border-radius: 0 !important; padding: 0 !important; box-sizing: content-box !important; filter: none !important; } /* v8 theme stability fixes */ /* Home latest works intro really becomes a dark section in dark mode, so all of its text must stay light. */ body.theme-dark .homePage .latestWorks, body.theme-dark .homePage .latestWorks .latestWorksBlock, body.theme-dark .homePage .latestWorks .latestWorksInfo, html[data-theme="dark"] body .homePage .latestWorks, html[data-theme="dark"] body .homePage .latestWorks .latestWorksBlock, html[data-theme="dark"] body .homePage .latestWorks .latestWorksInfo { background: var(--cc-bg) !important; } body.theme-dark .homePage .latestWorks .latestWorksInfo, body.theme-dark .homePage .latestWorks .latestWorksInfo *, html[data-theme="dark"] body .homePage .latestWorks .latestWorksInfo, html[data-theme="dark"] body .homePage .latestWorks .latestWorksInfo * { color: var(--cc-text) !important; -webkit-text-fill-color: var(--cc-text) !important; opacity: 1 !important; text-shadow: none !important; } body.theme-dark .homePage .latestWorks .latestWorksBlock .latestWorksTitle, body.theme-dark .homePage .latestWorks .latestWorksBlock .latestWorksTitle *, html[data-theme="dark"] body .homePage .latestWorks .latestWorksBlock .latestWorksTitle, html[data-theme="dark"] body .homePage .latestWorks .latestWorksBlock .latestWorksTitle * { color: var(--cc-text) !important; -webkit-text-fill-color: var(--cc-text) !important; opacity: 1 !important; } /* Keep the Level Sound red stripe readable on all breakpoints. */ body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent, body.theme-dark .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent *, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent, html[data-theme="dark"] body .levelSound .levelSoundContent .whatDone .whatDoneLeft .whatDoneLeftLine .whatDoneLeftLineContent * { color: #0f1115 !important; -webkit-text-fill-color: #0f1115 !important; opacity: 1 !important; } /* v10: burger icon fix on mobile. Keep the original icon asset without invert() to avoid the blank white circle in dark theme. */ body.theme-dark .mobileHeader img[src*="burgerMenuBlack"], body.theme-dark img[src*="burgerMenuBlack"], html[data-theme="dark"] body .mobileHeader img[src*="burgerMenuBlack"], html[data-theme="dark"] body img[src*="burgerMenuBlack"] { filter: none !important; opacity: 1 !important; } /* Give the mobile burger a subtle outline on dark header so it stays visible */ body.theme-dark .mobileHeader .mobileHeaderIcons img[src*="burgerMenuBlack"], html[data-theme="dark"] body .mobileHeader .mobileHeaderIcons img[src*="burgerMenuBlack"] { border-radius: 999px; box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 8px 18px rgba(0,0,0,.22); }