/* DealersipNew marketing site styles - dark theme. Brand hues (teal / orange / Poppins) still come from theme.css; this file redefines the surface palette on top of it and styles the marketing components. Converting here rather than per-view means every page flips together and nothing drifts. Reading comfort on dark is deliberate: body text is off-white (#d1e2dc, ~13:1), never pure #fff and never the near-white this shipped with, because high-contrast light type on near-black haloes for anyone with astigmatism. Line length and line-height are kept generous for the same reason, and the body face is Inter rather than the display Poppins - see the --font-display / --font-text pair in theme.css. Normal document flow everywhere: no vh-sized sections, so crawlers see what visitors see. */ /* ---------- theme tokens ---------- Dark is the default and every value below is exactly what the site shipped with, so a visitor who never touches the switch sees no change at all. Light is a designed palette rather than an inversion, because a straight flip does not work here: the mint (#25ffc4) that carries the dark page is invisible on white, translucent-white card fills disappear, and the heavy black drop shadows read as grey smudges. Four ramps are carried as bare "R, G, B" triples (--fg-rgb, --tint-rgb, --tint-soft-rgb, --ink-rgb) rather than as one token per opacity. Every rgba() in this file keeps its own alpha that way, so the dark theme renders identically while a single line per ramp re-points the whole file for light. Three surfaces stay dark in BOTH themes on purpose - the footer, the .cta-band and the Why Dealersip .h-stage. They are brand slabs: the CTA has to lift out of the page, and the h-stage is the ad creative, letter-drop and all, which only reads on near-black. Anything inside them therefore uses fixed light-on-dark values, never --fg. The switch is data-theme on , written by site.js and pre-applied by the small inline script in _Layout so the page never flashes the wrong theme before its CSS arrives. */ :root { color-scheme: dark; /* surfaces, darkest to lightest */ --bg: #01100b; --bg-lift: #04201a; --surface: rgba(255, 255, 255, 0.042); --surface-hi: rgba(255, 255, 255, 0.07); --hairline: rgba(116, 255, 218, 0.13); --hairline-soft: rgba(255, 255, 255, 0.08); /* type Was #eaf7f2, which measures about 16:1 against this page. That is not "safe", it is too much: light type on near-black blooms outward, and past roughly 13:1 the bloom closes the counters and the paragraph reads as a grey slab. Backing the base ramp off to #d1e2dc puts body copy at 14.5:1 on the bare page and ~13:1 on a card, with the --fg-dim step at ~11:1 - all still far above the 4.5:1 floor, and all measurably easier to read for anyone with astigmatism. Dimming the ramp rather than each rule keeps the whole ladder in proportion. Headings are exempt and stay at --fg-strong (#fff): they are short, large and bold, which is the one place the extra punch costs nothing. */ --fg-rgb: 209, 226, 220; --fg: rgb(var(--fg-rgb)); /* Kept high on purpose: these sit on a dark page, and anything dimmer loses readability. */ --fg-dim: rgba(var(--fg-rgb), 0.9); --fg-faint: rgba(var(--fg-rgb), 0.7); /* headings, and the words inside a sentence that have to win. Pure white is right on near-black, and this token is the one place the file allows it. */ --fg-strong: #ffffff; --card: var(--surface); /* the teal ramps, brightest first. Light inverts their order: the loudest ramp on dark has to become the deepest on light to stay the most visible of the three. */ --tint-rgb: 37, 255, 196; /* mint #25ffc4 */ --tint-soft-rgb: 116, 255, 218; /* ex-light #74ffda */ --ink-rgb: 255, 255, 255; /* the neutral washes and hairlines drawn over the page */ /* accent: whichever teal stays readable against the current page */ --accent: #25ffc4; --accent-soft: #74ffda; --accent-bright: #b6ffe9; --accent-warn: var(--theme-orange-light); --on-accent: #01100b; /* text sitting on a solid teal fill */ --chat-user-fg: #d9fff2; /* chrome */ /* height of the sticky header, for anything that has to sit below it - sticky sidebars and the scroll-margin on anchor targets. theme.css still carries this as 0px from the old site, where nothing used it; that value is wrong here and would tuck sticky columns under the navbar. */ --nav-height: 68px; --header-bg: rgba(1, 16, 11, 0.82); --panel-bg: #041d15; /* mega menu */ --drawer-bg: #02160f; /* mobile offcanvas */ --panel-lift-bg: #04201a; /* cookie panel */ --overlay: rgba(0, 0, 0, 0.45); --overlay-strong: rgba(0, 0, 0, 0.6); /* 1 repaints Bootstrap's dark svg icons (accordion chevron, navbar toggler, close button) white; light sets 0, which leaves them dark - one token instead of a second icon set */ --icon-invert: 1; /* depth */ --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.4); --shadow-hover: 0 20px 44px rgba(0, 0, 0, 0.45); --shadow-menu: 0 24px 60px rgba(0, 0, 0, 0.6); --shadow-orb: 0 18px 44px rgba(0, 0, 0, 0.45); /* Bella's orb is a light source, so its own gradient and specular stay put in both themes - only the spill around it moves, since a half-opacity mint bloom over a white page is just haze */ --orb-aura-core: rgba(37, 255, 196, 0.5); --orb-aura-edge: rgba(18, 184, 139, 0.16); /* the bloom behind the one lit word in the home hero headline. It has to stay mint in BOTH themes: following --tint-rgb down to deep teal paints a dark halo round dark text on a white page, which reads as a green box rather than as light. */ --lit-glow: rgba(37, 255, 196, 0.45); /* the swab under "sip" in the wordmark: the deep end of the logo's ramp, because the wordmark is set in white here. Light flips to the bright end, for the same reason. */ --swab: linear-gradient(0deg, #0a7a5e 0%, #0fa37d 55%, #12b88b 100%); /* page-level washes kept whole, so a theme swaps the gradient in one place */ --hero-page-bg: radial-gradient(1100px 520px at 82% -12%, rgba(18, 184, 139, 0.22) 0%, transparent 62%), radial-gradient(900px 460px at -8% 108%, rgba(255, 86, 102, 0.10) 0%, transparent 58%), var(--bg); /* the home hero and its Bella console (hero-console.css). They live here rather than in that file so the light half of every token sits next to the dark half. */ --hero-home-bg: radial-gradient(1100px 620px at 78% -12%, rgba(18, 184, 139, 0.30) 0%, transparent 62%), radial-gradient(900px 520px at 6% 108%, rgba(255, 86, 102, 0.13) 0%, transparent 58%), linear-gradient(168deg, #052a20 0%, #031a13 46%, #01100b 100%); --hero-spot: radial-gradient(560px circle at var(--mx, 70%) var(--my, 30%), rgba(37, 255, 196, 0.16) 0%, rgba(37, 255, 196, 0.06) 34%, transparent 64%); --console-bg: linear-gradient(158deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.028) 52%, rgba(255, 255, 255, 0.05) 100%); --console-aura: radial-gradient(closest-side, rgba(37, 255, 196, 0.55), rgba(18, 184, 139, 0.18) 60%, transparent 78%); --shadow-console: 0 44px 90px -32px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.035) inset, 0 1px 0 rgba(255, 255, 255, 0.12) inset; } /* ---------- light ---------- Attribute selector on :root, so it beats the plain :root above on specificity rather than on source order - which would break the moment these two blocks were reordered. */ :root[data-theme="light"] { color-scheme: light; /* not pure white: a faint mint cast keeps the page in the brand, and takes the glare off a full-width #fff at reading size */ --bg: #f5faf8; --bg-lift: #ffffff; /* solid, not translucent - white at 4% over a near-white page is nothing */ --surface: #ffffff; --surface-hi: #f0faf6; --hairline: rgba(4, 61, 46, 0.16); --hairline-soft: rgba(4, 61, 46, 0.10); /* deep green-black rather than #000: pure black on a minted white reads harsh, and the green cast ties the type back to the brand */ --fg-rgb: 13, 43, 35; --fg-dim: rgba(var(--fg-rgb), 0.82); /* 0.70, not the dark theme's 0.62: the ratio that is comfortable light-on-dark falls under 4.5:1 dark-on-light, and this token carries the small print */ --fg-faint: rgba(var(--fg-rgb), 0.70); --fg-strong: #04201a; --tint-rgb: 10, 122, 94; /* was the loudest ramp, so it becomes the deepest */ --tint-soft-rgb: 13, 143, 109; --ink-rgb: 4, 61, 46; /* washes now darken the page instead of lightening it */ --accent: #0a7a5e; /* 4.7:1 on the light page; the brand #12b88b does not clear 4.5 */ --accent-soft: #0d8f6d; --accent-bright: #043d2e; /* hover goes darker on light, not brighter */ --accent-warn: var(--theme-orange-dark); --on-accent: #ffffff; --chat-user-fg: #04201a; --header-bg: rgba(245, 250, 248, 0.86); --panel-bg: #ffffff; --drawer-bg: #ffffff; --panel-lift-bg: #ffffff; --overlay: rgba(4, 32, 26, 0.34); --overlay-strong: rgba(4, 32, 26, 0.45); --icon-invert: 0; /* green-tinted and much lighter: a neutral black shadow over a minted page reads grey, and the dark theme's opacities are far too heavy once the page underneath is white */ --shadow-card: 0 16px 40px rgba(4, 32, 26, 0.10); --shadow-hover: 0 18px 38px rgba(4, 32, 26, 0.15); --shadow-menu: 0 24px 60px rgba(4, 32, 26, 0.16); --shadow-orb: 0 14px 34px rgba(4, 32, 26, 0.16); --orb-aura-core: rgba(18, 184, 139, 0.30); --orb-aura-edge: rgba(18, 184, 139, 0.10); --lit-glow: rgba(37, 255, 196, 0.6); --swab: linear-gradient(0deg, #25ffc4 0%, #74ffda 55%, #a9ffe6 100%); --hero-page-bg: radial-gradient(1100px 520px at 82% -12%, rgba(18, 184, 139, 0.13) 0%, transparent 62%), radial-gradient(900px 460px at -8% 108%, rgba(255, 86, 102, 0.07) 0%, transparent 58%), var(--bg); /* the hero keeps its two coloured corners, at roughly half strength - the same wash that glows on near-black turns muddy at full strength over white. Its foot lands on #eaf7f2 - a fixed value here, not a reference to the dark theme's body colour, which has since been dimmed to #d1e2dc. */ --hero-home-bg: radial-gradient(1100px 620px at 78% -12%, rgba(18, 184, 139, 0.16) 0%, transparent 62%), radial-gradient(900px 520px at 6% 108%, rgba(255, 86, 102, 0.08) 0%, transparent 58%), linear-gradient(168deg, #ffffff 0%, #f2fbf7 46%, #eaf7f2 100%); /* the cursor light has to brighten on light, not darken - so it keeps the mint rather than following --tint-rgb down into deep teal */ --hero-spot: radial-gradient(560px circle at var(--mx, 70%) var(--my, 30%), rgba(37, 255, 196, 0.30) 0%, rgba(37, 255, 196, 0.10) 34%, transparent 64%); /* frosted white rather than the dark theme's 4%-white-over-black glass, which is invisible once the page behind it is already white */ --console-bg: linear-gradient(158deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.78) 52%, rgba(255, 255, 255, 0.88) 100%); --console-aura: radial-gradient(closest-side, rgba(18, 184, 139, 0.32), rgba(18, 184, 139, 0.10) 60%, transparent 78%); --shadow-console: 0 34px 70px -28px rgba(4, 32, 26, 0.26), 0 0 0 1px rgba(4, 61, 46, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.9) inset; } html, body { min-height: 100%; margin: 0; color: var(--fg); background: var(--bg); /* without this the switch is instant, which reads as a page reload rather than a setting */ transition: background-color 0.35s ease, color 0.35s ease; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { /* Inter for running text. 1.7 rather than the 1.6 this shipped with: both faces carry a tall x-height, which eats into the leading a raw number promises, so lines that measure "normal" sit visibly tight. */ font-family: var(--font-text); line-height: 1.7; } /* Poppins is the brand voice and earns its keep here - big, bold, short lines, where its geometry reads as confidence rather than as mush. The .h1-.h6 utilities are included because Bootstrap puts them on non-heading elements. */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: var(--font-display); } /* colour stays on the elements only - a .display-* utility can sit on something deliberately tinted, and widening this selector would repaint it white. The element rule alone is not enough: Bootstrap groups ".h1, .h2, ... h1, h2, ..." into one declaration, so on

the class half of that selector (0,1,0) out-specifies the bare h3 here (0,0,1) and Bootstrap's --bs-heading-color wins - which defaults to inherit, so every card heading on the site was quietly taking the BODY colour rather than --fg-strong. Pointing Bootstrap's own token at --fg-strong fixes it at the source and covers the .h* utilities on non-heading elements too. --bs-heading-color is re-declared on the three dark slabs at the foot of this file, because a custom property resolves against the element it is declared on, not the one it is used on. */ h1, h2, h3, h4, h5, h6 { color: var(--fg-strong); } :root { --bs-heading-color: var(--fg-strong); } /* the tracked uppercase kicker above a headline belongs with the headline, not with the body */ .eyebrow { font-family: var(--font-display); } /* theme.css sets these for a light page - flip them or every muted paragraph goes invisible */ .text-secondary { color: var(--fg-dim) !important; } .text-muted { color: var(--fg-faint) !important; } .text-dark { color: var(--fg) !important; } a { color: var(--accent); } a:hover { color: var(--accent-bright); } /* ---------- shared section rhythm ---------- */ /* Dark does not mean one flat slab: sections alternate between the page base and a lifted panel so the eye still reads chapters. */ .section { padding: 4.5rem 0; } .section-tinted { background: var(--bg-lift); border-top: 1px solid var(--hairline-soft); border-bottom: 1px solid var(--hairline-soft); } .section-dark { background: linear-gradient(180deg, #00231b 0%, #043d2e 100%); } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; font-size: 0.8rem; color: var(--theme-orange); margin-bottom: 0.75rem; } .section-lead { max-width: 780px; margin-left: auto; margin-right: auto; } /* ---------- hero used by the feature and pricing pages ---------- */ .hero { padding: 4.5rem 0 4rem; background: var(--hero-page-bg); } .hero h1 { font-weight: 800; letter-spacing: -0.02em; } .hero-kicker { color: var(--accent); font-weight: 600; } /* ---------- Bella as a presence ---------- A portrait, drawn or photographed, always reads as either a stock human or an odd blob. She is an intelligence, so she is rendered as one: a luminous core inside slowly turning rings. Same identity as the small orb in the hero console, scaled up. Pure CSS, so it is sharp at any size and needs no asset. */ .bella-presence { position: relative; width: min(340px, 76vw); aspect-ratio: 1 / 1; margin-inline: auto; display: grid; place-items: center; isolation: isolate; } /* the light she sits in */ .bp-aura { position: absolute; inset: -12%; border-radius: 50%; filter: blur(46px); background: radial-gradient(closest-side, var(--orb-aura-core), var(--orb-aura-edge) 62%, transparent 80%); animation: bpBreathe 7s ease-in-out infinite; } .bp-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--tint-rgb), 0.22); } .bp-ring-1 { inset: 0; border-style: dashed; animation: bpSpin 34s linear infinite; } .bp-ring-2 { inset: 11%; border-color: rgba(var(--tint-rgb), 0.3); border-top-color: transparent; border-left-color: transparent; animation: bpSpin 14s linear infinite reverse; } .bp-ring-3 { inset: 21%; border-color: rgba(var(--tint-soft-rgb), 0.22); border-bottom-color: transparent; animation: bpSpin 20s linear infinite; } /* the orange marker that orbits with the outer ring, so she never reads as purely mechanical */ .bp-ring-1::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--theme-orange); box-shadow: 0 0 16px rgba(255, 86, 102, 0.85); } .bp-core { position: relative; width: 46%; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ffffff 0%, #ceffee 20%, #25ffc4 56%, #0d8f6d 100%); box-shadow: 0 0 60px rgba(37, 255, 196, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.32) inset, var(--shadow-orb); animation: bpGlow 4.5s ease-in-out infinite; } /* a soft specular highlight keeps the core reading as a sphere rather than a flat dot */ .bp-core::after { content: ""; position: absolute; inset: 8% 8% 40% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), transparent 70%); } @keyframes bpBreathe { 0%, 100% { transform: scale(1); opacity: 0.72; } 50% { transform: scale(1.06); opacity: 0.95; } } @keyframes bpSpin { to { transform: rotate(360deg); } } @keyframes bpGlow { 0%, 100% { box-shadow: 0 0 46px rgba(37, 255, 196, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.32) inset, var(--shadow-orb); } 50% { box-shadow: 0 0 78px rgba(37, 255, 196, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.45) inset, var(--shadow-orb); } } .bella-presence-tag { text-align: center; margin-top: 1.6rem; } .bella-presence-tag strong { display: block; color: var(--fg-strong); font-size: 1.15rem; line-height: 1.2; } .bella-presence-tag span { font-size: 0.85rem; color: var(--fg-faint); } /* ---------- cursor tilt ---------- The effect the Bella console has in the hero, made reusable: the card leans away from the pointer so the corner nearest it drops. JS adds .tilt-card to whatever it is pointed at and writes the two angles; with JS off, or on touch, the card simply sits flat. To give another card family the same behaviour, add it to TILT_SELECTOR in site.js - nothing here changes. Use this only on panels that are mostly picture. A 3D transform puts the card on its own compositor layer, which is then sampled at an angle - fine for gradients and borders, but it softens body copy. Text-heavy panels get .glow-card below instead. */ .tilt-card { transform: perspective(1000px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* ---------- cursor glow ---------- The sharp-text alternative to the tilt: nothing moves, so nothing is resampled. A radial gradient rides the card's 1px edge and brightens wherever the pointer is nearest. JS adds .glow-card and writes --mx / --my as pixel offsets inside the card; without JS the variables fall back to the centre and the ring never fades in, so the card just sits there. Add another card family to GLOW_SELECTOR in site.js. */ .glow-card { position: relative; } /* The ring is a full-bleed gradient with its own middle masked out, leaving 1px of gradient tracing the border - masked rather than drawn as a real border so the lit patch can follow the pointer instead of being one flat colour all the way round. The whole thing is behind @supports because without the cut-out the gradient would wash the entire card in mint; browsers that lack mask-composite get the card exactly as it is today, which is fine. */ @supports (mask-composite: exclude) or (-webkit-mask-composite: xor) { .glow-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--tint-rgb), 0.55), rgba(var(--tint-rgb), 0) 72%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.35s ease; /* the overlay sits above the rows, so it must not eat their hover */ pointer-events: none; } .glow-card:hover::after { opacity: 1; } } /* ---------- chat mockup ---------- */ .chat-demo { background: var(--surface); border: 1px solid var(--hairline); border-radius: 18px; padding: 1.5rem; box-shadow: var(--shadow-card); text-align: left; } .chat-demo-header { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.9rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--hairline-soft); } .chat-demo-header img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; /* the avatar mark is drawn centred in a square viewBox */ object-position: center; } .chat-demo-header strong { color: var(--fg-strong); } .chat-bubble { border-radius: 16px; padding: 0.8rem 1.1rem; margin-bottom: 0.9rem; max-width: 92%; } .chat-user { background: rgba(var(--tint-rgb), 0.13); color: var(--chat-user-fg); margin-left: auto; border-bottom-right-radius: 4px; } .chat-bella { background: rgba(var(--ink-rgb), 0.055); color: var(--fg-dim); margin-right: auto; border-bottom-left-radius: 4px; } .chat-bella ul { margin: 0.4rem 0 0; padding-left: 1.1rem; } .chat-bella ul li { margin-bottom: 0.25rem; } /* ---------- numbered step rail ---------- */ .step-rail { position: relative; margin: 0; padding: 0; list-style: none; } .step-rail > li { position: relative; padding: 0 0 1.75rem 3.4rem; counter-increment: step; } .step-rail > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--theme-teal); color: var(--on-accent); font-weight: 700; display: flex; align-items: center; justify-content: center; } .step-rail > li::after { content: ""; position: absolute; left: 1.1rem; top: 2.5rem; bottom: 0.2rem; width: 2px; background: rgba(var(--tint-rgb), 0.22); } .step-rail > li:last-child::after { display: none; } .step-rail > li h3, .step-rail > li h4 { font-weight: 700; margin-bottom: 0.25rem; } /* ---------- feature cards ---------- */ .feature-tile { display: block; height: 100%; background: var(--surface); border: 1px solid var(--hairline-soft); border-radius: 16px; padding: 1.5rem; color: var(--fg); text-decoration: none; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease; } .feature-tile:hover { color: var(--fg); background: var(--surface-hi); transform: translateY(-4px); border-color: rgba(var(--tint-rgb), 0.55); box-shadow: var(--shadow-hover); } .feature-tile i.tile-icon { font-size: 1.9rem; color: var(--accent); } .feature-tile h3 { font-weight: 700; margin: 0.6rem 0 0.4rem; } .feature-tile p { color: var(--fg-dim); } .feature-tile .tile-more { color: var(--accent); font-weight: 600; } /* ---------- capability rows ---------- */ .capability { padding: 1.4rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--hairline-soft); height: 100%; } .capability i { font-size: 1.5rem; color: var(--accent); } .capability h3 { font-weight: 700; margin: 0.5rem 0 0.4rem; } .capability p:last-child { margin-bottom: 0; } /* ---------- report panel ---------- */ .report-panel { background: var(--surface); border-radius: 18px; border: 1px solid var(--hairline); box-shadow: var(--shadow-card); overflow: hidden; /* .glow-card, added by site.js, sets position: relative for the pointer-tracked edge */ } .report-panel-header { background: rgba(var(--tint-rgb), 0.10); color: var(--fg-strong); padding: 0.9rem 1.4rem; font-weight: 600; border-bottom: 1px solid var(--hairline); } .report-row { display: flex; align-items: flex-start; gap: 0.9rem; padding: 0.95rem 1.4rem; border-top: 1px solid var(--hairline-soft); /* anchors the pointer-tracked rule below */ position: relative; } .report-row:first-of-type { border-top: 0; } /* A glowing rule under the row, drawn from its left edge out to wherever the pointer is: sweep right and it runs ahead of you, sweep back and it retreats. The width reads --mx straight off the .glow-card ancestor - rows are the full width of the panel, so the pointer's offset inside the card is also its offset inside the row, and this needs no JS of its own. Deliberately untransitioned: it has to sit under the cursor on the frame the cursor is there, not chase it. Only the fade in and out is timed. */ .report-row::after { content: ""; position: absolute; left: 0; /* -1px centres it on the divider, so the rule replaces the hairline rather than stacking a second line above it */ bottom: -1px; height: 2px; width: var(--mx, 0px); max-width: 100%; /* fades in from nothing and burns brightest at the leading tip, which is what sells it as a light being dragged rather than a bar being resized */ background: linear-gradient(90deg, rgba(var(--tint-rgb), 0) 0%, rgba(var(--tint-rgb), 0.85) 88%, var(--accent-bright) 100%); box-shadow: 0 0 12px rgba(var(--tint-rgb), 0.45); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .report-row:hover::after { opacity: 1; } .report-row i { color: var(--theme-orange); margin-top: 0.15rem; } .report-row strong { color: var(--fg-strong); } .report-row .report-note { color: var(--fg-faint); font-size: 0.9rem; } /* ---------- faq (bootstrap accordion, re-skinned) ---------- */ .faq-block { --bs-accordion-bg: transparent; --bs-accordion-color: var(--fg-dim); --bs-accordion-border-color: var(--hairline-soft); --bs-accordion-btn-color: var(--fg-strong); --bs-accordion-btn-bg: transparent; --bs-accordion-active-bg: rgba(var(--tint-rgb), 0.08); --bs-accordion-active-color: var(--fg-strong); --bs-accordion-btn-focus-box-shadow: none; } .faq-block .accordion-button { font-weight: 600; } /* the default chevron is a dark svg - repaint it rather than shipping a second asset. --icon-invert is 1 on dark and 0 on light, so one rule serves both themes. */ .faq-block .accordion-button::after { filter: brightness(0) invert(var(--icon-invert)); opacity: 0.65; } .faq-block .accordion-button:not(.collapsed) { box-shadow: none; } .faq-block .accordion-body { color: var(--fg-dim); } /* ---------- comparison table ---------- Used by the /alternatives/ pages. Bootstrap's .table supplies the structure; only the things it cannot express are here - the hairline palette, top-aligned cells so a long sourced sentence does not centre itself, and the tinted "us" column that carries the reader's eye down our side without shouting. Kept generic (.compare-table, .is-us) so every competitor page reuses it rather than restyling a table each time. */ .compare-table table { --bs-table-color: var(--fg-dim); --bs-table-bg: transparent; --bs-table-border-color: var(--hairline); margin-bottom: 0; } .compare-table table > :not(caption) > * > * { padding: 0.85rem 1rem; vertical-align: top; background: transparent; } .compare-table thead th { color: var(--fg); font-weight: 700; white-space: nowrap; } /* the capability name: kept narrow so the two answer columns get the width */ .compare-table tbody th[scope="row"] { color: var(--fg); font-weight: 600; width: 20%; min-width: 11rem; } /* our column, in both the head and the body */ .compare-table .is-us { background: rgba(var(--tint-rgb), 0.055) !important; } .compare-table thead .is-us { color: var(--accent); } /* sourcing note under the table - genuinely fine print, hence the only size override here */ .compare-note { font-size: 0.85rem; } /* ---------- cta band ---------- */ .cta-band { background: radial-gradient(600px 220px at 50% 0%, rgba(37, 255, 196, 0.16), transparent 70%), linear-gradient(120deg, #043d2e 0%, #065c45 58%, #0a7a5b 100%); color: #fff; /* --hairline is safe here even though the band stays dark in light mode: .cta-band is one of the three dark slabs, and the slab block at the foot of this file hands it the dark theme's hairline back */ border: 1px solid var(--hairline); border-radius: 22px; padding: 3rem 2rem; } .cta-band h2 { font-weight: 800; } /* CTA sub-line: near-white instead of the old 75% opacity wash, which fell below readable contrast against the dark green band. */ .cta-band .cta-band-sub { color: rgba(255, 255, 255, 0.92); } .cta-band .btn { min-width: 220px; } /* ---------- breadcrumbs ---------- */ .page-breadcrumb { padding: 1rem 0 0; } .page-breadcrumb ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.875rem; } .page-breadcrumb ol li + li::before { content: "/"; margin-right: 0.4rem; color: var(--fg-faint); } .page-breadcrumb ol span { color: var(--fg-faint); } .page-breadcrumb ol a { color: var(--accent); text-decoration: none; } .page-breadcrumb ol a:hover { text-decoration: underline; } /* ---------- misc ---------- */ .check-list { list-style: none; padding: 0; margin: 0; } .check-list li { position: relative; padding-left: 1.9rem; margin-bottom: 0.65rem; color: var(--fg-dim); } .check-list li strong { color: var(--fg-strong); } .check-list li::before { content: "\f26a"; /* bootstrap-icons check-circle-fill */ font-family: "bootstrap-icons"; position: absolute; left: 0; top: 0.1rem; color: var(--theme-teal); } /* outline buttons in theme.css assume a white page - make them transparent on dark */ .btn-outline-primary { --bs-btn-bg: transparent; --bs-btn-color: var(--accent); --bs-btn-border-color: rgba(var(--tint-soft-rgb), 0.45); } .btn-outline-warning { --bs-btn-bg: transparent; --bs-btn-color: var(--accent-warn); } /* ---------- navbar ---------- */ .dealersip-header { background: var(--header-bg); border-bottom: 1px solid var(--hairline-soft); } /* The blur sits on a pseudo-element rather than on the header itself, and that is not a style choice. backdrop-filter makes an element the containing block for its position: fixed descendants, and the mobile drawer - the .offcanvas, which has to stay inside the navbar because at lg it becomes the navbar's own content - is one of them. Measured against the header instead of the viewport, the drawer inherited the header's 67px height, so the menu showed only its first item; and parked at translateX(100%) while closed it counted as page content 90vw past the right edge. A mobile browser answers content wider than the screen by zooming the whole layout out to fit, which is why the site opened at about half size on phones and on unfolded foldables. A pseudo-element has no descendants to trap, so the glass survives and the drawer is measured against the viewport again. */ .dealersip-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); } /* the wordmark is set in type rather than shipped as a second, reversed png */ .navbar-wordmark { /* --font-display, never --font-sans: the swab geometry is cut for Poppins */ font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--fg-strong); line-height: 1; } /* the wordmark tracks at -0.02em, which pulls every glyph left of where the default swab expects it - narrow the swab by the three gaps it spans and pull it in by one */ .navbar-wordmark.dealersip::after { width: 1.376em; right: 0.035em; } .navbar-brand:hover .navbar-wordmark { color: var(--fg-strong); } .navbar-nav .nav-link { color: rgba(var(--fg-rgb), 0.76); } .navbar-nav .nav-link:hover, .navbar-nav .nav-item.show .nav-link { color: var(--accent) !important; } .navbar-toggler { border-color: var(--hairline); } .navbar-toggler .navbar-toggler-icon { filter: brightness(0) invert(var(--icon-invert)); opacity: 0.85; } .navbar-toggler:focus { box-shadow: none; } /* mobile drawer */ .offcanvas { background: var(--drawer-bg); color: var(--fg); border-left: 1px solid var(--hairline-soft); } .offcanvas .btn-close { filter: brightness(0) invert(var(--icon-invert)); opacity: 0.7; } /* mega menu */ .dealersip-mega-menu-content { background: var(--panel-bg); border-top: 3px solid var(--theme-teal); box-shadow: var(--shadow-menu) !important; } .dealersip-mega-collapse { background: var(--overlay); } .mega-menu-item { color: rgba(var(--fg-rgb), 0.82); } .mega-menu-item:hover { color: var(--accent); } .mega-cta-block { background: var(--surface); border: 1px solid var(--hairline-soft); color: var(--fg); padding: 0.75rem; } .mega-cta-block:hover { color: var(--accent); background: var(--surface-hi); } .mega-cta-block strong { color: var(--fg-strong); } .mega-cta-block .text-muted { color: var(--fg-faint) !important; } .border-end { border-color: var(--hairline-soft) !important; } /* ---------- cookie notice ---------- */ .cookie-overlay { background: var(--overlay-strong); } .cookie-panel { background: var(--panel-lift-bg); border: 1px solid var(--hairline); color: var(--fg); } .cookie-panel h2 { color: var(--fg-strong); } @media (max-width: 767.98px) { /* A row applies its side gutter as a negative margin, so a .g-5 row pulls 24px out on each side while .container only pads 12px back in - 12px of page wider than the screen, which is on its own enough to make a phone browser zoom the layout out to fit. Stacked columns show no side gutter anyway, so below sm it drops back to the container's own 12px. Only the horizontal half is touched; the vertical gutter spacing the stacked columns stays. */ .row.g-5 { --bs-gutter-x: 1.5rem; } .section { padding: 3rem 0; } .hero { padding: 3rem 0 2.5rem; } .bella-presence { margin-top: 2.5rem; } } /* ---------- the three dark slabs ---------- The footer, the CTA band and the Why Dealersip stage stay dark in both themes: the CTA has to lift out of the page, the footer anchors it, and the h-stage is the ad creative, which only reads on near-black. Rather than pin a fixed colour onto every rule inside them, each slab hands its own subtree the dark theme's tokens back. Anything nested in them therefore keeps working untouched - including markup added later, which is the part a per-rule fix would quietly miss. */ :root[data-theme="light"] .site-footer, :root[data-theme="light"] .cta-band, :root[data-theme="light"] .h-stage { /* tracks the dark theme's base ramp, dimmed from the old #eaf7f2 for the same reason */ --fg-rgb: 209, 226, 220; --fg-dim: rgba(var(--fg-rgb), 0.86); --fg-faint: rgba(var(--fg-rgb), 0.62); --fg-strong: #ffffff; /* re-resolved here, not inherited: a custom property is substituted against the element it is DECLARED on, so the :root copy carries light mode's dark --fg-strong into these slabs and would print near-black headings on near-black brand panels */ --bs-heading-color: var(--fg-strong); --tint-rgb: 37, 255, 196; --tint-soft-rgb: 116, 255, 218; --ink-rgb: 255, 255, 255; --accent: #25ffc4; --accent-soft: #74ffda; --accent-bright: #b6ffe9; --accent-warn: var(--theme-orange-light); --on-accent: #01100b; --surface: rgba(255, 255, 255, 0.042); --surface-hi: rgba(255, 255, 255, 0.07); --hairline: rgba(116, 255, 218, 0.13); --hairline-soft: rgba(255, 255, 255, 0.08); --icon-invert: 1; } /* ---------- light-only contrast fixes ---------- Two brand colours that clear 4.5:1 on near-black but not on a near-white page. The header rule is scoped to the header on purpose: .text-teal is also the footer's heading colour, and the footer is a dark slab where the brand teal is already right. */ :root[data-theme="light"] .eyebrow { color: var(--theme-orange-dark); } :root[data-theme="light"] .dealersip-header .text-teal { color: var(--accent) !important; } /* ---------- theme toggle ---------- Sits in the navbar next to Book Demo. Three modes: light, dark, and following the operating system. The icon shows the mode the site is IN - a sun, a moon, or a half circle for system - because with three states no single icon can sensibly say what a click will do next. All three icons are in the markup and the rules below reveal the one matching data-theme-mode, which the inline script in _Layout sets before the first paint. Doing it in css rather than js is what stops the wrong icon showing for the moment before scripts run. */ .theme-toggle .tt-icon { display: none; } :root[data-theme-mode="light"] .theme-toggle .tt-light, :root[data-theme-mode="dark"] .theme-toggle .tt-dark, :root[data-theme-mode="system"] .theme-toggle .tt-system { display: inline-block; } /* no mode attribute at all means scripts never ran; show one icon rather than an empty circle */ :root:not([data-theme-mode]) .theme-toggle .tt-system { display: inline-block; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface); color: var(--accent); line-height: 1; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .theme-toggle:hover { background: var(--surface-hi); border-color: rgba(var(--tint-rgb), 0.45); color: var(--accent); transform: translateY(-2px); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }