/* C.A.R.M. Studio site styles - shared by index.html and features/*.html */ /* Base reset */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, p, ul, li, figure { margin: 0; padding: 0; color: inherit; font-family: inherit; } html { height: 100%; scroll-behavior: smooth; /* always reserve the vertical scrollbar so any short page keeps the same viewport width as the long ones (and as the community site, which does the same) - without this, centered content shifts ~8px between scrolling and non-scrolling pages */ overflow-y: scroll; } /* ============================== Fonts ============================== */ /* Cuprum - the logo / original-theme display face - self-hosted (variable weight 400-700, latin subset, OFL licensed). The old theme only NAMED Cuprum in its font stacks and never actually loaded it, so the menu and footer titles have been silently falling back to Tahoma; this restores the intended face site-wide. */ @font-face { font-family: 'Cuprum'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/cuprum-latin.woff2') format('woff2'); } /* ============================== Theme variables ============================== Light is the canonical palette - these values match the pre-theme site exactly. The dark palette re-skins the LIGHT surfaces only: the hero, platform banner, demo band, marketing-image panels and footer are brand-dark in both themes and keep their literal colors. html[data-theme="dark"] is set pre-paint by an inline snippet in each page's ; the choice is an explicit opt-in from the header toggle, stored in localStorage (no OS auto-switch). */ :root { color-scheme: light; --page-bg: #F3F4F6; --surface: #FFFFFF; --menu-bg: #FFFFFF; --panel-bg: #FBF7F0; --card-grad-top: #FFFFFF; --card-grad-bottom: #FBF7F0; --border: #EADDC7; --text: #561B41; --text-muted: #634926; --accent-plum: #862A63; --card-hover-shadow: rgba(86, 27, 65, 0.14); --hero-img-shadow: rgba(86, 27, 65, 0.28); } html[data-theme="dark"] { color-scheme: dark; --page-bg: #151020; --surface: #1E1729; --menu-bg: #1E1729; --panel-bg: #281E35; --card-grad-top: #281E35; --card-grad-bottom: #1E1729; --border: #403153; --text: #EFE6F3; --text-muted: #C9B48E; --accent-plum: #D983B6; --card-hover-shadow: rgba(0, 0, 0, 0.5); --hero-img-shadow: rgba(0, 0, 0, 0.55); } body { color: var(--text); background-color: var(--page-bg); font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; flex-direction: column; min-height: 100vh; margin: 0; } main { flex: 1; } .container { width: 100%; margin-left: auto; margin-right: auto; max-width: 1600px; text-align: center; padding-left: 1.5rem; padding-right: 1.5rem; } /* ============================== Menu ============================== */ .menu-cont { position: fixed; z-index: 30; top: 0; left: 0; right: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); background-color: var(--menu-bg); border-bottom: 5px solid #B98847; } .menu-cont .menu { visibility: visible; display: flex; position: static; width: 940px; margin: 0 auto; } .menu-cont .menu .menu-item { position: relative; width: auto; } .menu-cont .menu .menu-item a { display: block; text-decoration: none; white-space: nowrap; } .menu-cont .menu .menu-item.level-1 { flex: 1; } .menu-cont .menu .menu-item.level-1 > a { position: relative; border-left: 1px solid #B98847; border-bottom: none; height: 50px; padding: 0 20px; font: 20px/50px Cuprum, Tahoma, sans-serif; color: #B98847; text-align: center; } .menu-cont .menu .menu-item.level-1:first-child > a { border-left: none; } .menu-cont .menu .menu-item.level-1:hover > a { color: #FFF; background-color: #B98847; border-color: #B98847; } .menu-cont .menu .menu-item.level-1 a::after { content: ''; display: block; height: 5px; background: #F86000; transform: scale(0, 1); transition: transform ease-in-out 250ms; } .menu-cont .menu .menu-item.level-1 a:hover::after { transform: scale(1, 1); } /* ============================== Hero ============================== */ #home { border-bottom: 5px solid #B98847; background: radial-gradient(#B98847, #862A63); color: #FFFFFF; padding-top: 5rem; padding-bottom: 1.25rem; } #home h1 { font-family: Cuprum, Tahoma, sans-serif; font-size: clamp(2.5rem, 5.5vw + 1rem, 3.75rem); line-height: 1.05; font-weight: 700; letter-spacing: 0.015em; margin-bottom: 1rem; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18); } #home > div > p { font-size: 1.25rem; line-height: 1.5; margin-bottom: 2rem; } #home > div > div { display: inline-block; text-align: center; width: 615px; } #home > div > div > p { font-size: 1.25rem; line-height: 1.5; font-weight: 600; margin-bottom: 0.5rem; text-align: center; } #home > div > div > ul { font-size: 1.25rem; line-height: 1.35; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1rem; text-align: left; } #home > div > div > ul > li { padding-left: 0.5rem; text-align: center; } #home > div > p:last-child { font-size: 1.25rem; line-height: 1.5; font-weight: 600; margin-bottom: 0.5rem; text-align: center; } #home > div > p:last-child > a { background-color: #FFFFFF; color: #862A63; padding: 1rem 1.5rem; border-radius: 9999px; font-weight: 600; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); margin-top: 2rem; margin-left: 0.5rem; margin-right: 0.5rem; display: inline-block; text-decoration: none; border: none; text-align: center; line-height: 1; font-size: 1.25rem; letter-spacing: 0.01rem; min-width: 180px; } #home > div > p:last-child > a:hover { background-color: #E5E7EB; } /* ============================== Section shells ============================== */ .section-lead { text-align: center; color: var(--text-muted); max-width: 52rem; margin: 0 auto 3rem auto; } #features { padding-top: 4rem; padding-bottom: 4rem; background-color: var(--surface); } #features h2, #capabilities h2, #story h2, #docs h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; text-align: center; margin-bottom: 0.75rem; } /* ============================== Feature cards ============================== */ .feature-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 2rem; } @media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } a.feature-card { display: block; text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; background: linear-gradient(180deg, var(--card-grad-top) 0%, var(--card-grad-bottom) 100%); text-decoration: none; color: inherit; transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease; } a.feature-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px var(--card-hover-shadow); border-color: #B98847; } .feature-card .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background-color: #B98847; color: #FFFFFF; margin-bottom: 1rem; } .feature-card .feature-icon svg { width: 30px; height: 30px; } .feature-card h3 { font-size: 1.25rem; line-height: 1.5; font-weight: 600; margin-bottom: 0.5rem; } .feature-card p { color: var(--text-muted); } .feature-card .learn-more { display: inline-block; margin-top: 0.85rem; color: var(--accent-plum); font-weight: 600; font-size: 0.95rem; } a.feature-card:hover .learn-more { text-decoration: underline; } .platform-banner { margin-top: 2rem; border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem 2rem; background: linear-gradient(90deg, #561B41 0%, #862A63 100%); color: #FFFFFF; display: flex; align-items: center; gap: 1.5rem; text-align: left; } .platform-banner .feature-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; background-color: #B98847; color: #FFFFFF; } .platform-banner .feature-icon svg { width: 30px; height: 30px; } .platform-banner h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.35rem; } .platform-banner p { color: #F3E4D3; } @media (max-width: 767px) { .platform-banner { flex-direction: column; text-align: center; } } /* ============================== Marketing image slots ============================== Reference an image in images/marketing/. Until the file exists, the slot renders as a branded panel describing the intended shot (from data-note), so pages look finished while photography is being sourced. Drop the file in and the photo takes over. */ .marketing-image { position: relative; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #862A63 0%, #561B41 60%, #3E1330 100%); min-height: 220px; } .marketing-image img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .marketing-image img.missing { display: none; } .marketing-image::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(185, 136, 71, 0.35) 0, transparent 40%), radial-gradient(circle at 80% 70%, rgba(248, 96, 0, 0.18) 0, transparent 45%); } .marketing-image::after { content: attr(data-note); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; color: #F3E4D3; font-size: 0.95rem; line-height: 1.5; font-style: italic; } .marketing-image.has-image::before, .marketing-image.has-image::after { display: none; } .marketing-image.ratio-wide { aspect-ratio: 21 / 9; } .marketing-image.ratio-photo { aspect-ratio: 3 / 2; } /* ============================== Capabilities (index) ============================== */ #capabilities { padding-top: 4rem; padding-bottom: 2rem; background-color: var(--page-bg); } .capability { background-color: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 2rem; margin-bottom: 2rem; text-align: left; } .capability .capability-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; } .capability .capability-header .capability-intro { flex: 1 1 auto; } .capability .capability-header .marketing-image { flex: 0 0 340px; width: 340px; min-height: 190px; } .capability h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--accent-plum); } .capability .capability-pitch { color: var(--text-muted); margin-bottom: 0.5rem; max-width: 62rem; } .capability ul { list-style: none; columns: 2; column-gap: 3rem; margin-top: 1rem; } .capability ul li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; color: var(--text); break-inside: avoid; line-height: 1.45; } .capability ul li::before { content: ''; position: absolute; left: 0; top: 0.34em; width: 0.85rem; height: 0.85rem; border-radius: 3px; background-color: #B98847; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.2 11.4 2.8 8l-1.1 1.1 4.5 4.5 8-8L13.1 4.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.2 11.4 2.8 8l-1.1 1.1 4.5 4.5 8-8L13.1 4.5z'/%3E%3C/svg%3E") center / contain no-repeat; } .capability ul li strong { color: var(--accent-plum); } @media (max-width: 900px) { .capability .capability-header { flex-direction: column; } .capability .capability-header .marketing-image { flex: 1 1 auto; width: 100%; } .capability ul { columns: 1; } } /* ============================== Story / Docs ============================== */ #story { padding-top: 4rem; padding-bottom: 4rem; background-color: var(--surface); } #story > div { max-width: 56rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; text-align: center; } #story p { color: var(--text-muted); margin-bottom: 1rem; line-height: 1.6; } #docs { padding-top: 4rem; padding-bottom: 4rem; background-color: var(--page-bg); } #docs > div { max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; text-align: center; } #docs > div > p { color: var(--text-muted); margin-bottom: 2rem; max-width: 52rem; margin-left: auto; margin-right: auto; } #docs > div > a, .button-gold { background-color: #B98847; color: #FFFFFF; padding: 0.75rem 1.5rem; border-radius: 9999px; font-weight: 400; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; border: none; text-align: center; line-height: 1; font-size: 1rem; letter-spacing: 0.025em; min-width: 180px; display: inline-block; } #docs > div > a:hover, .button-gold:hover { background-color: #862A63; } /* ============================== Schedule demo ============================== */ #scheduledemo { position: relative; background-color: #B98847; padding-top: 1.75rem; padding-bottom: 1.25rem; } #scheduledemo::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid var(--surface); } #scheduledemo > div { max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; text-align: center; } #scheduledemo h2 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; margin-bottom: 1rem; color: #FFFFFF; } #scheduledemo > div > div { max-width: 28rem; margin-left: auto; margin-right: auto; } #scheduledemo > div > div > a { background-color: #FFF; color: #561B41; padding: 1rem 1.5rem; border-radius: 9999px; font-weight: 600; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); border: none; text-align: center; line-height: 1; font-size: 1rem; letter-spacing: 0.01em; min-width: 200px; display: inline-block; text-decoration: none; } #scheduledemo > div > div > a:hover { background-color: #E5E7EB; color: #862A63; } /* ============================== Feature detail pages ============================== */ .feature-hero { border-bottom: 5px solid #B98847; background: radial-gradient(#B98847, #862A63); color: #FFFFFF; padding-top: 6rem; padding-bottom: 3rem; } .feature-hero .breadcrumb { font-size: 0.95rem; margin-bottom: 1rem; } .feature-hero .breadcrumb a { color: #FFE3BD; text-decoration: none; } .feature-hero .breadcrumb a:hover { text-decoration: underline; } .feature-hero h1 { font-family: Cuprum, Tahoma, sans-serif; font-size: clamp(2.1rem, 3.5vw + 0.9rem, 2.9rem); line-height: 1.12; font-weight: 700; letter-spacing: 0.015em; margin-bottom: 1rem; } .feature-hero .tagline { font-size: 1.25rem; line-height: 1.5; max-width: 46rem; margin: 0 auto; color: #FFE9CE; } .feature-page { padding-top: 3rem; padding-bottom: 1rem; background-color: var(--surface); } .feature-page .container { text-align: left; max-width: 1100px; } .feature-page .page-hero-image { margin: -5.5rem auto 3rem auto; max-width: 100%; box-shadow: 0 16px 40px var(--hero-img-shadow); } .story-block { display: flex; align-items: center; gap: 3rem; margin-bottom: 3.5rem; } .story-block.reverse { flex-direction: row-reverse; } .story-block .story-text { flex: 1 1 55%; } .story-block .marketing-image { flex: 1 1 45%; align-self: stretch; min-height: 260px; } .story-block h2 { font-size: 1.6rem; font-weight: 700; color: var(--accent-plum); margin-bottom: 0.75rem; } .story-block p { color: var(--text-muted); line-height: 1.65; margin-bottom: 0.9rem; } .story-block p strong { color: var(--text); } @media (max-width: 900px) { .story-block, .story-block.reverse { flex-direction: column; } .story-block .marketing-image { width: 100%; } .feature-page .page-hero-image { margin-top: -4.5rem; } } .detail-checklist { background-color: var(--panel-bg); border: 1px solid var(--border); border-radius: 10px; padding: 2rem; margin-bottom: 3rem; } .detail-checklist h2 { font-size: 1.4rem; font-weight: 700; color: var(--accent-plum); margin-bottom: 1rem; } .detail-checklist ul { list-style: none; columns: 2; column-gap: 3rem; } .detail-checklist ul li { position: relative; padding-left: 1.6rem; margin-bottom: 0.6rem; color: var(--text); break-inside: avoid; line-height: 1.45; } .detail-checklist ul li::before { content: ''; position: absolute; left: 0; top: 0.34em; width: 0.85rem; height: 0.85rem; border-radius: 3px; background-color: #B98847; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.2 11.4 2.8 8l-1.1 1.1 4.5 4.5 8-8L13.1 4.5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M6.2 11.4 2.8 8l-1.1 1.1 4.5 4.5 8-8L13.1 4.5z'/%3E%3C/svg%3E") center / contain no-repeat; } @media (max-width: 900px) { .detail-checklist ul { columns: 1; } } .related-features { text-align: center; padding: 1rem 0 3rem 0; } .related-features h2 { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; color: var(--text); } .related-features a { display: inline-block; margin: 0.35rem 0.5rem; padding: 0.55rem 1.1rem; border: 1px solid #B98847; border-radius: 9999px; color: var(--accent-plum); text-decoration: none; font-size: 0.95rem; transition: background-color 150ms ease, color 150ms ease; } .related-features a:hover { background-color: #B98847; color: #FFFFFF; } /* ============================== Footer ============================== */ .canvas { position: relative; margin: 0 auto; width: 940px; min-width: 940px; } .canvas::after { content: ""; display: table; clear: both; } .footer { overflow: auto; } .footer .footer-top { background: linear-gradient(to bottom, #B98847 0%, #862A63 10%, #862A63 25%, #561B41 100%); border-bottom: 1px solid #B98847; padding: 45px 0 15px; } .footer .footer-top h1, .footer .footer-top h2, .footer .footer-top h3, .footer .footer-top h4 { color: #fff; } .footer .footer-top .canvas { display: flex; justify-content: space-evenly; flex-wrap: nowrap; } .footer .footer-top .widget { flex: 1; width: auto; } .footer .footer-top .widget .title { font: 20px/28px Cuprum, Tahoma, sans-serif; color: #fff; margin-bottom: 21px; } .footer .footer-top .widget ul { list-style: square outside; margin-left: 15px; } .footer .footer-top .widget ul li { padding-left: 2px; } .footer .footer-top .widget ul li, .footer .footer-top .widget ul li a { color: #FFBB63; font-size: 13px; line-height: 19px; } .footer .footer-top .widget ul li a { text-decoration: none; border-bottom: none; } .footer .footer-top .widget ul li a:hover { color: #fff; } .footer .footer-bottom { display: block; background-color: #561B41; padding: 10px 0; min-height: 80px; } .footer .footer-bottom .canvas { position: relative; display: block; } .footer .footer-bottom .footer-bottom-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .footer .footer-bottom .copy { color: #B98847; font-size: 13px; margin: 0; flex: 0 0 auto; } .footer .footer-bottom .socials-list { flex: 0 0 auto; } .footer .footer-bottom .duxwrx-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; margin-top: 10px; } .footer .footer-bottom .duxwrx-logo a { display: block; width: 200px; height: 60px; background-image: url('/images/DUXWRX_logo_brown.png'); background-size: contain; background-repeat: no-repeat; background-position: center; } .footer .footer-bottom .duxwrx-logo a:hover { background-image: url('/images/DUXWRX_logo_brown_hover.png'); } .socials-list .socials-item { float: left; margin-left: 5px; position: relative; transition: all 0.2s ease; } .socials-list .socials-item:first-child { margin-left: 0; } .socials-list .socials-item a { display: block; height: 32px; width: 32px; text-align: center; text-decoration: none; border: none; overflow: hidden; font-size: 20px; line-height: 32px; color: #B98847; } /* The hover label belongs to the brand footer, so it wears brand plum with a gold hairline instead of the template's neutral #444, which read as a grey system tooltip dropped onto a plum band. LIGHTER than the footer-bottom band (#561B41) on purpose: a tooltip should look like it is floating above the surface, and a deeper plum measured only 1.11:1 against the band, so the box read as a slightly-off patch of footer held together by its border. #A83C7D gives 2.21:1 against the band with white text at 5.82:1 (AA wants 4.5:1). Literal colors here, like the rest of the footer: that band is the plum gradient in BOTH themes and only takes a black wash in dark mode (see the override below). nowrap because "Contact Us" is two words and was wrapping into a cramped two-line box at line-height 13px. */ .socials-list .socials-item .socials-item-popup { position: absolute; bottom: 42px; left: -4px; padding: 8px 12px; background-color: #A83C7D; color: #fff; border: 1px solid rgba(185, 136, 71, 0.55); border-radius: 4px; white-space: nowrap; font-size: 13px; line-height: 13px; visibility: hidden; opacity: 0; transition: all 0.2s ease 0.2s; } .socials-list .socials-item .socials-item-popup:after { content: ""; display: block; position: absolute; width: 0; height: 0; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); border-top: 6px solid #A83C7D; bottom: -7px; left: 12px; } .socials-list .socials-item:hover a { color: #fff; } .socials-list .socials-item:hover .socials-item-popup { opacity: 1; visibility: visible; } /* Brand plum rather than the template's slate #697277 - same reason as the label above. Plum holds the white envelope at 8.32:1; brand gold (#B98847) would have dropped it to 3.15:1, under the 4.5:1 AA line. */ .socials-list .socials-item.email:hover { background-color: #862A63; border-radius: 4px; } /* Dark mode washes the footer band with 22% black; the label takes the same wash so it does not float brighter than the footer it sits on. The arrow is a border-color triangle, so a background overlay cannot tint it - it gets #A83C7D pre-multiplied by 0.78 instead. Washed, the pair is #832F62 on #431533: white text 8.24:1, box against band 1.83:1. */ html[data-theme="dark"] .socials-list .socials-item .socials-item-popup { background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)); } html[data-theme="dark"] .socials-list .socials-item .socials-item-popup:after { border-top-color: #832F62; } /* ============================== Responsive menu / footer ============================== */ @media (max-width: 940px) { .menu-cont { background-color: var(--menu-bg); } .menu-cont .menu-header { display: flex; justify-content: space-between; align-items: center; padding: 5px 15px; } .menu-cont .menu-header .menu-logo a:hover { text-decoration: none; border-bottom: none; } .menu-cont .menu-header .menu-logo .logo-image { display: inline-block; background: url("/images/logo-210x51.png") no-repeat; width: 210px; height: 50px; background-size: 210px 50px; } /* The hamburger matches the docs bar's: three bare gold lines, morphing into an X while the menu is open (no boxy button chrome). */ .menu-cont .menu-header .menu-button { display: flex; flex-direction: column; justify-content: space-between; /* explicit on purpose: keeps the X-morph geometry identical on every surface, including the docs pages where no global border-box reset exists */ box-sizing: border-box; width: 32px; height: 24px; background-color: transparent; border: none; padding: 2px 1px; cursor: pointer; } .menu-cont .menu-header .menu-button .menu-button-line { width: 100%; height: 2px; border-radius: 1px; background-color: #B98847; transition: transform 0.3s ease, opacity 0.3s ease; } .menu-cont:has(.menu.active) .menu-header .menu-button .menu-button-line:nth-child(1) { transform: translateY(9px) rotate(45deg); } .menu-cont:has(.menu.active) .menu-header .menu-button .menu-button-line:nth-child(2) { opacity: 0; } .menu-cont:has(.menu.active) .menu-header .menu-button .menu-button-line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* The dropdown panel slides open/closed (Bootstrap-collapse feel) instead of popping: always flex, animated via max-height. The cap sits just above the tallest real content (items + one expanded submenu) so the reveal speed stays even; visibility waits for the slide-up to finish so hidden items also leave the tab order. */ .menu-cont .menu { display: flex; width: 100%; flex-direction: column; align-items: stretch; background-color: var(--menu-bg); position: absolute; top: 69px; left: 0; padding: 0; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 300ms ease, visibility 0s linear 300ms; } .menu-cont .menu.active { /* Bounded by the real limit - the viewport below the fixed bar - and scrollable within it, so no menu growth can ever push items out of reach. */ max-height: calc(100vh - 69px); overflow-y: auto; visibility: visible; transition: max-height 300ms ease; } .menu-cont .menu .menu-item.level-1 { width: 100%; } .menu-cont .menu .menu-item.level-1 > a { margin: 0; border-left: none; width: 100%; color: #B98847; background-color: transparent; border-radius: 0; padding: 10px 20px; font: 20px/30px Cuprum, Tahoma, sans-serif; text-align: left; } .menu-cont .menu .menu-item.level-1:hover > a { background-color: #B98847; color: #FFFFFF; } .menu-cont .menu .menu-item.level-1:hover > a::after { display: none; } } @media (max-width: 660px) { #home > div > div { width: 80%; } #home > div > div > ul { grid-template-columns: repeat(2, 1fr); } #home > div > div > p { margin-left: 0px; text-align: center; } } @media (max-width: 960px) { .canvas { width: 100%; min-width: 0; padding: 0 } .footer .footer-top { padding: 0; } .footer .footer-top .canvas { display: block; } .footer .footer-top .widget { display: block; width: 100%; float: none; margin: 0; border-top: 1px solid #B98847; padding: 10px 20px; text-align: left; margin-bottom: 0; } .footer .footer-top .widget:first-child { border-top: none; } .footer .footer-top .widget .title { margin: 0 0 5px 0; text-align: left; } .footer .footer-top .widget ul { list-style-position: inside; } .footer .footer-top .widget ul li, .footer .footer-top .widget ul li a { font-size: 16px; line-height: 1.5; } .footer .footer-bottom { padding: 5px; text-align: center; } .footer .footer-bottom .canvas { display: block; } .footer .footer-bottom .footer-bottom-content { display: block; } .footer .footer-bottom .copy, .footer .footer-bottom .socials-list, .footer .footer-bottom .duxwrx-logo { float: none; text-align: center; display: block; } .footer .footer-bottom .socials-list { margin-top: 10px; } .footer .footer-bottom .socials-list .socials-item { display: inline-block; float: none; } .footer .footer-bottom .duxwrx-logo { position: static; transform: none; top: auto; margin-top: 10px; } .footer .footer-bottom .duxwrx-logo a { display: block; margin-left: auto; margin-right: auto; } } /* ============================== Features drop-down ============================== */ .menu-cont .menu .menu-item.level-1 .submenu { visibility: hidden; opacity: 0; position: absolute; top: 100%; left: 0; min-width: 100%; width: max-content; background-color: var(--menu-bg); border: 1px solid #B98847; border-top: none; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); transition: opacity ease-in-out 150ms; z-index: 40; } .menu-cont .menu .menu-item.level-1.has-children:hover .submenu, .menu-cont .menu .menu-item.level-1.has-children:focus-within .submenu { visibility: visible; opacity: 1; } .menu-cont .menu .menu-item.level-1 .submenu a { display: block; padding: 8px 20px; font: 17px/24px Cuprum, Tahoma, sans-serif; color: #B98847; text-align: left; } .menu-cont .menu .menu-item.level-1 .submenu a::after { display: none; } .menu-cont .menu .menu-item.level-1 .submenu a:hover { color: #FFFFFF; background-color: #B98847; } /* A menu link that has been clicked and is waiting on the next page (wired in site.js). The hover look is reused so it reads as "pressed", and it persists after the pointer moves away - :active alone would vanish the instant the button came up. The pulse is what says "working": a cold app pool can take a second or two to answer, and until this the only feedback was the browser's own spinner. */ .menu-cont .menu .menu-item.level-1 > a.navigating, .menu-cont .menu .menu-item.level-1 .submenu a.navigating { color: #FFFFFF; background-color: #B98847; animation: carm-menu-navigating 900ms ease-in-out infinite; } @keyframes carm-menu-navigating { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } @media (prefers-reduced-motion: reduce) { .menu-cont .menu .menu-item.level-1 > a.navigating, .menu-cont .menu .menu-item.level-1 .submenu a.navigating { animation: none; } } @media (max-width: 940px) { /* Parents with children are click-to-expand accordions on mobile (wired in site.js): collapsed by default so the panel stays short, one open at a time. Desktop keeps the hover dropdowns. The expanded submenu renders as a rounded "bubble" card (the forum's Bootstrap dropdown look, in our colors); while collapsed it is visibility-hidden so the border/shadow paint nothing. */ .menu-cont .menu .menu-item.level-1 .submenu { visibility: hidden; opacity: 1; position: static; width: auto; min-width: 0; margin: 0 14px; border: 1px solid #B98847; border-radius: 10px; background-color: var(--menu-bg); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); box-sizing: border-box; max-height: 0; overflow: hidden; transition: max-height 250ms ease, visibility 0s linear 250ms; } .menu-cont .menu .menu-item.level-1.open .submenu { /* The open height is set inline by site.js (measured scrollHeight), so bubbles of any size animate exactly - no cap for content to silently outgrow. */ visibility: visible; margin: 6px 14px 10px; transition: max-height 250ms ease; } .menu-cont .menu .menu-item.level-1 .submenu a { padding: 8px 18px; } /* Expand chevron on the parent items: points down closed, up open. */ .menu-cont .menu .menu-item.level-1.has-children > a::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 250ms ease; vertical-align: 2px; } .menu-cont .menu .menu-item.level-1.open > a::before { transform: rotate(225deg); vertical-align: -2px; } } /* ============================== Capability feature links ============================== */ .capability .capability-link { margin-top: 0.85rem; } .capability .capability-link a { color: var(--accent-plum); font-weight: 600; font-size: 0.95rem; text-decoration: none; } .capability .capability-link a:hover { text-decoration: underline; } /* ============================== Capability image alternation ============================== */ .capability .capability-header.reverse { flex-direction: row-reverse; } @media (max-width: 940px) { .capability .capability-header.reverse { flex-direction: column; } } /* ============================== Theme toggle ============================== */ /* Two buttons share .theme-toggle: a compact cell at the right end of the desktop menu bar (.theme-item), and a square button beside the hamburger in the mobile header bar. Each breakpoint shows exactly one. In light mode the button shows a moon (click for dark); in dark mode a sun. */ .menu-cont .menu .menu-item.level-1.theme-item { flex: 0 0 auto; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-left: 1px solid #B98847; color: #B98847; height: 50px; padding: 0 16px; cursor: pointer; } .theme-toggle:hover { background-color: #B98847; color: #FFFFFF; } .theme-toggle svg { width: 20px; height: 20px; display: block; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="dark"] .theme-toggle .icon-sun { display: block; } html[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* The mobile header button stays hidden on desktop (the header block's other children are invisible on desktop only because they happen to have no styles there). */ .menu-cont .menu-header .theme-toggle { display: none; } @media (max-width: 940px) { .menu-cont .menu .menu-item.level-1.theme-item { display: none; } .menu-cont .menu-header .menu-header-actions { display: flex; align-items: center; gap: 10px; } /* The mobile theme toggle matches the docs bar's: a slim outlined gold circle. */ .menu-cont .menu-header .theme-toggle { display: inline-flex; width: 32px; height: 32px; border: 1px solid #B98847; border-radius: 50%; background-color: transparent; color: #B98847; padding: 0; } .menu-cont .menu-header .theme-toggle svg { width: 16px; height: 16px; } } /* ============================== Ratio'd image slots ============================== */ /* A slot with a ratio class gets its height from its width. Leaving the base min-height floor active makes iOS Safari transfer that height back through the aspect-ratio into the box WIDTH (220px floor x 21/9 = ~513px), which pushed the feature-page hero wider than a phone screen. The ratio alone sizes these fine. */ .marketing-image.ratio-wide, .marketing-image.ratio-photo { min-height: 0; } /* ============================== Dark-mode band dimming ============================== */ /* In dark mode the brand bands (hero, demo band, footer) read too bright against the dark surfaces. Tone the BACKGROUNDS down by stacking a translucent black layer over the exact same gradients/colors - text and buttons are untouched, and the original blends carry through because these are CSS gradients, not images. Adjust the 0.22 in one place per band to taste. */ html[data-theme="dark"] #home, html[data-theme="dark"] .feature-hero { background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)), radial-gradient(#B98847, #862A63); } html[data-theme="dark"] #scheduledemo { background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)); } html[data-theme="dark"] .footer .footer-top { background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)), linear-gradient(to bottom, #B98847 0%, #862A63 10%, #862A63 25%, #561B41 100%); } html[data-theme="dark"] .footer .footer-bottom { background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)); } /* ============================== Hero retailer line ============================== */ /* The one thing a prospect should not have to assume: multi-retailer is first-class. Replaces the old "Manage" list (commented out in index.html) with a single line. */ #home .hero-retailers { font-size: 1.05rem; line-height: 1.55; color: #FFDFAF; max-width: 46rem; margin: 0 auto 0.75rem auto; } /* ============================== Hero logo ============================== */ /* The flat wordmark (images/Logo_flat.png, 1837x421 transparent PNG) replaces the text h1 on the home hero; the h1 wrapper + alt keep the full name for search engines and screen readers. Capped at 640px so the natural size stays ~3x for retina sharpness. Below 940px the menu header shows the small logo, so the big one hides rather than doubling up. */ #home h1.hero-logo img { display: block; margin: 0 auto; width: min(640px, 90%); height: auto; filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.22)); } @media (max-width: 940px) { #home h1.hero-logo { display: none; } /* With the logo hidden, #home would render as a short empty gradient strip. Collapse it to exactly the fixed bar's height so mobile pages open flush below the menu bar, matching the community site (which hides its hero band entirely on mobile). */ #home { padding-top: 65px; padding-bottom: 0; border-bottom: none; } } /* ============================== Demo band scoping ============================== */ /* The gold Schedule-a-Demo band is a HOME-PAGE feature: prominent there, pushy everywhere else (and circular on the demo page itself). The shared footer partial still carries it on every page so there is one place to edit; index.html opts in with . The footer-top gradient originally started gold to flow out of the band's gold - on band-less pages it starts at plum instead and opens with the same 5px gold rule the heroes close with, so pages begin and end on the same brand edge. */ #scheduledemo { display: none; } .footer .footer-top { background: linear-gradient(to bottom, #862A63 0%, #862A63 20%, #561B41 100%); border-top: 5px solid #B98847; } body.home-page #scheduledemo { display: block; } body.home-page .footer .footer-top { background: linear-gradient(to bottom, #B98847 0%, #862A63 10%, #862A63 25%, #561B41 100%); border-top: none; } /* Dark mode re-applies the band dimming layer over whichever gradient is active. */ html[data-theme="dark"] .footer .footer-top { background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)), linear-gradient(to bottom, #862A63 0%, #862A63 20%, #561B41 100%); } html[data-theme="dark"] body.home-page .footer .footer-top { background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)), linear-gradient(to bottom, #B98847 0%, #862A63 10%, #862A63 25%, #561B41 100%); } /* ============================== Legal pages ============================== */ /* privacy.html / terms.html: policy text brought over verbatim from duxwrx.com. The site reset zeroes every margin, so document flow gets its spacing back here. The Terms page is structured as nested numbered tables (td.number / td.content). */ .legal-content { max-width: 56rem; margin: 0 auto; text-align: left; } .legal-content h2 { font-size: 1.5rem; font-weight: 700; color: var(--accent-plum); margin: 2rem 0 0.75rem 0; } .legal-content h3 { font-size: 1.2rem; font-weight: 700; color: var(--text); margin: 1.5rem 0 0.6rem 0; } .legal-content h4 { font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 1.2rem 0 0.5rem 0; } .legal-content p { color: var(--text-muted); line-height: 1.65; margin-bottom: 0.9rem; } .legal-content strong { color: var(--text); } .legal-content a { color: var(--accent-plum); } .legal-content ul { list-style: disc; margin: 0 0 1rem 1.5rem; color: var(--text-muted); } .legal-content li { margin-bottom: 0.4rem; line-height: 1.55; } .legal-content li p { margin-bottom: 0.5rem; } .legal-content table { width: 100%; border-collapse: collapse; } .legal-content td { vertical-align: top; padding: 0; } .legal-content td.number { width: 3.2rem; font-weight: 700; color: var(--accent-plum); white-space: nowrap; padding-right: 0.75rem; } .legal-content td.number.main-section { font-size: 1.5rem; padding-top: 2rem; } .legal-content td.content > h2 { margin-top: 2rem; } .legal-content td.number.sub-section { font-weight: 600; color: var(--text-muted); padding-left: 0.25rem; }