/* Overrides for Lilium Digital LLC, loaded after the theme so the theme's own files stay untouched and can be replaced wholesale if needed. The theme draws its tiles fully transparent over a photographic background. That works where the photo is dark but the lower half of this image is bright, so the bottom tiles and the footer became unreadable. The fixes below add a consistent dark layer rather than changing the photo. */ /* The theme hardcodes Open Sans in several places, so the override has to reach descendants too -- the footer was still rendering in the old face. Icon elements are excluded: they use the Font Awesome family to pick a glyph, and changing it would turn every icon into a stray letter. */ body, body *, button, input, select, textarea { font-family: 'Satoshi', ui-sans-serif, system-ui, sans-serif; } /* darken the background so text is legible over every part of the photo */ #tm-bg:after { background: linear-gradient(160deg, rgba(18,17,24,.62), rgba(18,17,24,.86)); } /* give every tile the same translucent fill instead of relying on the photo */ .tm-nav-link { background: rgba(26, 25, 34, .72); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; backdrop-filter: blur(3px); transition: background .25s ease, border-color .25s ease, transform .25s ease; } .product:hover .tm-nav-link { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .34); transform: translateY(-2px); } .tm-nav-icon { opacity: .92; } .tm-nav-text { font-size: 15px; letter-spacing: .01em; } /* wordmark and strapline */ .tm-site-header img { max-width: 340px; width: 100%; } @media (max-width: 991px) { .tm-site-header img { max-width: 260px; } } .tm-site-header p { color: rgba(255,255,255,.86); font-size: 16.5px; line-height: 1.65; } /* footer sat on top of the brightest part of the photo */ footer { color: rgba(255,255,255,.82); text-shadow: 0 1px 3px rgba(0,0,0,.6); } footer a { color: #9cc4ff; } footer a:hover { color: #fff; } /* the overlay panel: readable body copy */ .details__bg { background: #1b1a22; } .details__description { color: #cdccd6; } .details__description h2.tm-page-title { color: #fff; } .details__description strong { color: #fff; } .details__description a { color: #8ab4ff; } .tm-muted { color: #9a99a6; font-size: 14px; } /* --- video background ------------------------------------------------------ The poster image stays as the layer's background, so something is on screen before the video decodes and if it never plays at all (data saver, codec trouble, an old browser). autoplay only works while muted and, on iOS, only with playsinline, so both are set on the element. */ #tm-bg { background-image: url(../img/bg-poster.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; overflow: hidden; } #tm-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* respect a stated preference for less motion: hold the still frame instead */ @media (prefers-reduced-motion: reduce) { #tm-bg-video { display: none; } } /* --- the opened panel ------------------------------------------------------- The theme renders this as a flat grey rectangle. These rules give it an edge, depth and a typographic hierarchy, so an opened tile reads as a considered surface rather than a box of text. */ .details__bg { background: linear-gradient(168deg, #1b1a24 0%, #15141d 100%); border: 1px solid rgba(255, 255, 255, .09); border-radius: 16px; box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .85), 0 2px 10px rgba(0, 0, 0, .4); padding: 48px 52px 52px; } @media (max-width: 575px) { .details__bg { padding: 32px 22px 34px; border-radius: 13px; } /* .details is a plain in-flow block sized to #tm-wrap's 100% height. Once the wrap is allowed to size to its content on a phone (see the mobile block at the end of this file) that height collapses and the opened panel would land under the tiles instead of over them, so it becomes a real overlay here. */ .details { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100%; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 26px 14px 34px; } /* a scrim so the tiles behind do not read through the panel on a small screen */ .details--open { background: rgba(9, 8, 13, .62); backdrop-filter: blur(3px); } } .details__description h2.tm-page-title { font-size: 27px; font-weight: 700; letter-spacing: -.022em; margin: 0 0 6px; color: #fff; } /* a hairline under the title separates it from the body without a heavy rule */ .details__description .row.mb-3 { border-bottom: 1px solid rgba(255, 255, 255, .09); padding-bottom: 20px; margin-bottom: 28px !important; } .details__description p { margin: 0 0 15px; line-height: 1.72; font-size: 15.5px; } .details__description p:last-child { margin-bottom: 0; } /* the second column reads as a separate note rather than more running text */ .details__description .row > div + div { border-left: 1px solid rgba(255, 255, 255, .08); padding-left: 30px; } @media (max-width: 767px) { .details__description .row > div + div { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); padding-left: 15px; margin-top: 24px; padding-top: 24px; } } /* small capitalised labels instead of bold inline runs */ .details__description strong { display: block; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: #8f8ea0; margin-bottom: 7px; } .details__description a { color: #9dbcff; text-decoration: none; border-bottom: 1px solid rgba(157,188,255,.3); } .details__description a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.6); } .details__close { opacity: .55; transition: opacity .2s; } .details__close:hover { opacity: 1; } /* --- footer ----------------------------------------------------------------- Swapping the typeface here changed nothing visible: Open Sans and Satoshi are near-identical at 15px, so the plainness came from the setting, not the face. The links now lead as small letterspaced caps and the legal line recedes under them, with the default-blue link colour gone. */ footer { line-height: 1.4; } .foot-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 15px; } .foot-links a { font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.62); text-decoration: none; padding: 2px 18px; transition: color .2s; } .foot-links a:hover { color: #fff; text-decoration: none; } /* hairline separators instead of middots */ .foot-links a + a { box-shadow: -1px 0 0 rgba(255,255,255,.16); } footer p { margin: 0; font-size: 12.5px; letter-spacing: .02em; color: rgba(255,255,255,.4); text-shadow: none; } /* --- tiles ------------------------------------------------------------------ The theme's tiles were flat squares holding heavy solid glyphs. Replaced with a thin-stroke icon set on one grid, and the surface given a little depth: a soft vertical gradient, a hairline highlight along the top edge where light would catch, and a lift on hover rather than a colour flash. */ .tm-nav-link { align-items: center; /* the theme centres vertically but not across */ background: linear-gradient(168deg, rgba(38,37,50,.82), rgba(22,21,30,.88)); border: 1px solid rgba(255,255,255,.085); border-radius: 14px; position: relative; overflow: hidden; gap: 0; transition: transform .28s cubic-bezier(.2,.7,.3,1), border-color .28s ease, box-shadow .28s ease; box-shadow: 0 1px 2px rgba(0,0,0,.4); } /* the light catch along the upper edge */ .tm-nav-link::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22) 50%, transparent); } .product:hover .tm-nav-link { transform: translateY(-4px); border-color: rgba(255,255,255,.22); box-shadow: 0 16px 30px -14px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.5); } .tm-icon { width: 30px; height: 30px; color: rgba(255,255,255,.88); margin-bottom: 15px; transition: color .28s ease, transform .28s cubic-bezier(.2,.7,.3,1); } .product:hover .tm-icon { color: #fff; transform: scale(1.06); } .tm-nav-text { font-size: 12.5px; font-weight: 550; letter-spacing: .06em; color: rgba(255,255,255,.74); transition: color .28s ease; } .product:hover .tm-nav-text { color: #fff; } /* --- opened panel, refinements --------------------------------------------- The close control was a heavy FontAwesome glyph floating at the corner. It is now a thin stroke inside a quiet round button, which reads as a control rather than a stray character. */ .details__close { width: 42px; height: 42px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: rgba(22,21,30,.75); color: rgba(255,255,255,.7); backdrop-filter: blur(6px); opacity: 1; transition: background .22s ease, color .22s ease, border-color .22s ease; } .details__close svg { width: 17px; height: 17px; } .details__close:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; } /* a touch more air and a top light-catch, matching the tiles */ .details__bg::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 50%, transparent); } .details__bg { position: relative; } .details__description .row > div { padding-top: 2px; padding-bottom: 2px; } .details__description p { color: #c4c3d1; } /* --- mobile ----------------------------------------------------------------- The theme pushes everything to the right edge below 767px (`margin-left:auto` on .content, `justify-content:flex-end` on .grid). That suits its own demo but leaves this layout lopsided with a dead strip down the left, so it is centred instead. The wrap also forced 100vh, which pushed the footer a full screen below the fold; on a short screen it should simply follow the content. */ @media (max-width: 767px) { .content { margin-left: auto; margin-right: auto; } .grid { justify-content: center; } .tm-site-header { text-align: center; } .tm-site-header img { margin-left: auto; margin-right: auto; } .tm-site-header p { margin-left: auto; margin-right: auto; max-width: 34ch; } .container.tm-site-header-container { max-width: 100%; } } @media (max-width: 575px) { /* On desktop the theme centres everything by giving #tm-wrap a full-screen height and taking .tm-main-content out of flow (position:absolute, inset 0). The footer lives AFTER the wrap, so on a phone that forced a blank screen between the tiles and the footer. Put the content back into normal flow and let the wrap size itself. */ #tm-wrap { display: block; height: auto; min-height: 0; } .tm-main-content { position: static; display: block; padding: 34px 15px 0; } /* main.js relocates