/* ============================================ DataAcuity — Public Marketing Site App-specific overlay on tgn-design-system.css Activated by: Strategy: stay close to the base TGN Design System (which is the BigBruh visual language). Only override what marketing needs that the admin console doesn't (e.g. a wider container for hero copy, an editorial line-height stack). NO custom accent — DataAcuity uses the TGN-blue brand. ============================================ */ [data-app="dataacuity"] { /* Re-assert the TGN-blue brand explicitly so any future app-override on the base system doesn't bleed into DataAcuity. Identical to root. */ --tgn-primary: #2196F3; --tgn-primary-rgb: 33, 150, 243; --tgn-primary-light: #64B5F6; --tgn-primary-dark: #2196F3; --tgn-primary-darker: #0D47A1; /* Marketing copy is read at relaxed line-height — feels more editorial than the admin console's tight density. */ --tgn-leading-prose: 1.7; /* Container width tuned for marketing layouts. Admin can have narrower gutters; marketing benefits from breathing room. */ --tgn-container-max: 1200px; --tgn-container-padding-x: 1.5rem; } /* ===== CONTAINER ===== */ /* The base system probably has its own .tgn-container; this is a marketing variant if the system doesn't ship one. Keep selectors at low specificity so a future .tgn-container in the base wins. */ [data-app="dataacuity"] .tgn-container { width: 100%; max-width: var(--tgn-container-max); margin-inline: auto; padding-inline: var(--tgn-container-padding-x); box-sizing: border-box; } /* ===== SECTION ===== */ [data-app="dataacuity"] .tgn-section { padding-block: 5rem; } [data-app="dataacuity"] .tgn-text-center { text-align: center; } /* ===== BUTTON — minor marketing-flavoured tweaks ===== */ /* The base tgn-btn already exists. Marketing variants add slightly more padding for a larger touch target on landing pages. */ [data-app="dataacuity"] .tgn-btn--lg { padding: 0.9rem 1.75rem; font-size: var(--tgn-text-base); font-weight: var(--tgn-font-semibold); border-radius: 0.625rem; } [data-app="dataacuity"] .tgn-btn--primary { background: var(--tgn-primary); color: var(--tgn-text-inverse); border: 1px solid var(--tgn-primary); text-decoration: none; display: inline-block; transition: background 160ms ease, transform 160ms ease; } [data-app="dataacuity"] .tgn-btn--primary:hover, [data-app="dataacuity"] .tgn-btn--primary:focus-visible { background: var(--tgn-primary-darker); border-color: var(--tgn-primary-darker); transform: translateY(-1px); } [data-app="dataacuity"] .tgn-btn--ghost { background: transparent; color: var(--tgn-text-primary); border: 1px solid var(--tgn-glass-border); text-decoration: none; display: inline-block; transition: border-color 160ms ease, background 160ms ease; padding: 0.625rem 1.25rem; font-weight: var(--tgn-font-medium); border-radius: 0.625rem; } [data-app="dataacuity"] .tgn-btn--ghost:hover, [data-app="dataacuity"] .tgn-btn--ghost:focus-visible { border-color: var(--tgn-primary); color: var(--tgn-primary); background: rgba(33, 150, 243, 0.05); } /* ===== TYPOGRAPHY HELPERS used by Routes.razor NotFound ===== */ [data-app="dataacuity"] .tgn-text-3xl { font-size: var(--tgn-text-3xl); } [data-app="dataacuity"] .tgn-text-4xl { font-size: var(--tgn-text-4xl); } [data-app="dataacuity"] .tgn-text-lg { font-size: var(--tgn-text-lg); } [data-app="dataacuity"] .tgn-text-sm { font-size: var(--tgn-text-sm); } /* ===== LINKS — keep them visibly clickable inside marketing prose ===== */ [data-app="dataacuity"] .dataacuity-main a:not(.tgn-btn):not([class^="dataacuity-"]) { color: var(--tgn-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } [data-app="dataacuity"] .dataacuity-main a:not(.tgn-btn):not([class^="dataacuity-"]):hover, [data-app="dataacuity"] .dataacuity-main a:not(.tgn-btn):not([class^="dataacuity-"]):focus-visible { text-decoration-thickness: 2px; } /* ===== HEADINGS — editorial spacing ===== */ [data-app="dataacuity"] h1, [data-app="dataacuity"] h2, [data-app="dataacuity"] h3, [data-app="dataacuity"] h4 { font-family: var(--tgn-font-primary); color: var(--tgn-text-primary); } /* ===== NO SCROLLBARS rule (per TGN UX guidelines) ===== */ [data-app="dataacuity"] body, [data-app="dataacuity"] html { scrollbar-width: none; -ms-overflow-style: none; } [data-app="dataacuity"] body::-webkit-scrollbar, [data-app="dataacuity"] html::-webkit-scrollbar { display: none; } /* ============================================ LAYOUT CHROME — used by MainLayout.razor ============================================ */ /* Skip link — visible only when focused via keyboard. */ [data-app="dataacuity"] .tgn-skip-link { position: absolute; left: -9999px; top: 0; background: var(--tgn-primary); color: var(--tgn-text-inverse); padding: 0.6rem 1rem; z-index: 100; text-decoration: none; border-radius: 0 0 0.4rem 0; } [data-app="dataacuity"] .tgn-skip-link:focus { left: 0; } /* ===== HEADER ===== */ [data-app="dataacuity"] .dataacuity-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--tgn-glass-border); } [data-app="dataacuity"][data-theme="dark"] .dataacuity-header { background: rgba(20, 23, 28, 0.85); } [data-app="dataacuity"] .dataacuity-header__inner { display: flex; align-items: center; gap: 2rem; padding-block: 1rem; } [data-app="dataacuity"] .dataacuity-brand { display: inline-flex; align-items: baseline; gap: 0.5rem; text-decoration: none; color: var(--tgn-text-primary); flex-shrink: 0; } [data-app="dataacuity"] .dataacuity-brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; background: var(--tgn-primary); color: var(--tgn-text-inverse); font-weight: var(--tgn-font-bold); font-size: var(--tgn-text-sm); letter-spacing: 0.04em; } [data-app="dataacuity"] .dataacuity-brand__wordmark { font-size: var(--tgn-text-lg); font-weight: var(--tgn-font-bold); letter-spacing: var(--tgn-tracking-tight); } [data-app="dataacuity"] .dataacuity-brand__sub { font-size: var(--tgn-text-xs); color: var(--tgn-text-secondary); font-weight: var(--tgn-font-normal); } [data-app="dataacuity"] .dataacuity-nav { display: flex; align-items: center; gap: 1.5rem; flex: 1; } [data-app="dataacuity"] .dataacuity-nav a { color: var(--tgn-text-primary); text-decoration: none; font-size: var(--tgn-text-sm); font-weight: var(--tgn-font-medium); transition: color 150ms ease; } [data-app="dataacuity"] .dataacuity-nav a:hover, [data-app="dataacuity"] .dataacuity-nav a:focus-visible { color: var(--tgn-primary); } [data-app="dataacuity"] .dataacuity-header__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; flex-shrink: 0; } /* ===== MAIN ===== */ [data-app="dataacuity"] .dataacuity-main { min-height: 60vh; } /* ===== FOOTER ===== */ [data-app="dataacuity"] .dataacuity-footer { background: var(--tgn-bg-secondary); border-top: 1px solid var(--tgn-glass-border); padding: 4rem 0 2rem; margin-top: 4rem; } [data-app="dataacuity"] .dataacuity-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; } [data-app="dataacuity"] .dataacuity-footer__brand { max-width: 28ch; } [data-app="dataacuity"] .dataacuity-footer__tagline { font-size: var(--tgn-text-sm); color: var(--tgn-primary); font-weight: var(--tgn-font-semibold); letter-spacing: var(--tgn-tracking-wider); text-transform: uppercase; margin: 0 0 0.5rem; } [data-app="dataacuity"] .dataacuity-footer__signoff { font-size: var(--tgn-text-sm); color: var(--tgn-text-secondary); line-height: var(--tgn-leading-relaxed); margin: 0; } [data-app="dataacuity"] .dataacuity-footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } [data-app="dataacuity"] .dataacuity-footer__nav h4 { font-size: var(--tgn-text-xs); font-weight: var(--tgn-font-bold); color: var(--tgn-text-primary); text-transform: uppercase; letter-spacing: var(--tgn-tracking-wider); margin: 0 0 0.85rem; } [data-app="dataacuity"] .dataacuity-footer__nav a { display: block; font-size: var(--tgn-text-sm); color: var(--tgn-text-secondary); text-decoration: none; padding: 0.25rem 0; transition: color 150ms ease; } [data-app="dataacuity"] .dataacuity-footer__nav a:hover, [data-app="dataacuity"] .dataacuity-footer__nav a:focus-visible { color: var(--tgn-primary); } [data-app="dataacuity"] .dataacuity-footer__copyright { grid-column: 1 / -1; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--tgn-glass-border); font-size: var(--tgn-text-xs); color: var(--tgn-text-secondary); text-align: center; } /* ============================================ LANDING — used by Index.razor ============================================ */ [data-app="dataacuity"] .dataacuity-hero { padding: 6rem 0 4rem; background: radial-gradient(ellipse at top right, rgba(33, 150, 243, 0.08), transparent 55%), radial-gradient(ellipse at bottom left, rgba(33, 150, 243, 0.04), transparent 55%); } [data-app="dataacuity"] .dataacuity-hero__eyebrow { font-size: var(--tgn-text-sm); font-weight: var(--tgn-font-semibold); color: var(--tgn-primary); text-transform: uppercase; letter-spacing: var(--tgn-tracking-wider); margin: 0 0 1rem; } [data-app="dataacuity"] .dataacuity-hero__headline { font-size: var(--tgn-text-5xl, 3rem); font-weight: var(--tgn-font-bold); line-height: var(--tgn-leading-tight); letter-spacing: var(--tgn-tracking-tight); color: var(--tgn-text-primary); margin: 0 0 1.25rem; max-width: 18ch; } [data-app="dataacuity"] .dataacuity-hero__lede { font-size: var(--tgn-text-lg); line-height: var(--tgn-leading-snug); color: var(--tgn-text-secondary); margin: 0 0 2rem; max-width: 60ch; } [data-app="dataacuity"] .dataacuity-hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2.5rem; } [data-app="dataacuity"] .dataacuity-hero__trust { font-size: var(--tgn-text-sm); color: var(--tgn-text-secondary); margin: 0; max-width: 60ch; line-height: var(--tgn-leading-relaxed); } [data-app="dataacuity"] .dataacuity-hero__trust strong { color: var(--tgn-text-primary); font-weight: var(--tgn-font-semibold); } /* ===== PRODUCTS GRID ===== */ [data-app="dataacuity"] .dataacuity-products { padding: 4rem 0; } [data-app="dataacuity"] .dataacuity-products__title { font-size: var(--tgn-text-3xl); font-weight: var(--tgn-font-bold); margin: 0 0 0.5rem; } [data-app="dataacuity"] .dataacuity-products__lede { font-size: var(--tgn-text-lg); color: var(--tgn-text-secondary); margin: 0 0 2.5rem; } [data-app="dataacuity"] .dataacuity-products__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } [data-app="dataacuity"] .dataacuity-product-card { position: relative; background: var(--tgn-glass-bg); border: 1px solid var(--tgn-glass-border); border-radius: var(--tgn-radius-lg, 0.75rem); padding: 2rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 1rem; transition: border-color 200ms ease, transform 200ms ease; } [data-app="dataacuity"] .dataacuity-product-card:hover { border-color: var(--tgn-primary); transform: translateY(-2px); } [data-app="dataacuity"] .dataacuity-product-card--featured { border-color: var(--tgn-primary); box-shadow: 0 0 0 1px var(--tgn-primary) inset; } [data-app="dataacuity"] .dataacuity-product-card__badge { position: absolute; top: -0.6rem; left: 1.5rem; background: var(--tgn-bg-secondary); border: 1px solid var(--tgn-glass-border); color: var(--tgn-text-secondary); font-size: var(--tgn-text-xs); font-weight: var(--tgn-font-semibold); text-transform: uppercase; letter-spacing: var(--tgn-tracking-wider); padding: 0.2rem 0.6rem; border-radius: 1rem; } [data-app="dataacuity"] .dataacuity-product-card__badge--accent { background: var(--tgn-primary); color: var(--tgn-text-inverse); border-color: var(--tgn-primary); } [data-app="dataacuity"] .dataacuity-product-card h3 { font-size: var(--tgn-text-xl); font-weight: var(--tgn-font-bold); color: var(--tgn-text-primary); margin: 0; } [data-app="dataacuity"] .dataacuity-product-card__lede { font-size: var(--tgn-text-sm); line-height: var(--tgn-leading-relaxed); color: var(--tgn-text-secondary); margin: 0; } [data-app="dataacuity"] .dataacuity-product-card__feat { list-style: none; padding: 0; margin: 0; flex: 1; } [data-app="dataacuity"] .dataacuity-product-card__feat li { position: relative; padding: 0.4rem 0 0.4rem 1.4rem; border-bottom: 1px solid var(--tgn-glass-border); font-size: var(--tgn-text-sm); color: var(--tgn-text-primary); line-height: var(--tgn-leading-snug); } [data-app="dataacuity"] .dataacuity-product-card__feat li:last-child { border-bottom: 0; } [data-app="dataacuity"] .dataacuity-product-card__feat li::before { content: "→"; position: absolute; left: 0; top: 0.4rem; color: var(--tgn-primary); font-weight: var(--tgn-font-bold); } [data-app="dataacuity"] .dataacuity-product-card__feat li code { background: var(--tgn-bg-secondary); border: 1px solid var(--tgn-glass-border); padding: 0.05em 0.3em; border-radius: 0.2rem; font-family: var(--tgn-font-mono); font-size: 0.9em; } [data-app="dataacuity"] .dataacuity-product-card .tgn-btn { margin-top: auto; align-self: flex-start; } /* ===== WHY GRID ===== */ [data-app="dataacuity"] .dataacuity-why { padding: 4rem 0; background: var(--tgn-bg-secondary); border-block: 1px solid var(--tgn-glass-border); } [data-app="dataacuity"] .dataacuity-why__title { font-size: var(--tgn-text-3xl); font-weight: var(--tgn-font-bold); margin: 0 0 2.5rem; text-align: center; } [data-app="dataacuity"] .dataacuity-why__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; } [data-app="dataacuity"] .dataacuity-why__item { display: flex; flex-direction: column; gap: 0.75rem; } [data-app="dataacuity"] .dataacuity-why__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.625rem; background: rgba(33, 150, 243, 0.1); color: var(--tgn-primary); font-weight: var(--tgn-font-bold); font-size: var(--tgn-text-sm); letter-spacing: 0.05em; } [data-app="dataacuity"] .dataacuity-why__item h3 { font-size: var(--tgn-text-lg); font-weight: var(--tgn-font-bold); color: var(--tgn-text-primary); margin: 0; } [data-app="dataacuity"] .dataacuity-why__item p { font-size: var(--tgn-text-sm); line-height: var(--tgn-leading-relaxed); color: var(--tgn-text-secondary); margin: 0; } /* ===== CTA — global (so the landing page picks it up too) ===== */ [data-app="dataacuity"] .dataacuity-cta { padding: 5rem 0; text-align: center; } [data-app="dataacuity"] .dataacuity-cta h2 { font-size: var(--tgn-text-3xl); font-weight: var(--tgn-font-bold); margin: 0 0 0.75rem; } [data-app="dataacuity"] .dataacuity-cta p { font-size: var(--tgn-text-lg); color: var(--tgn-text-secondary); margin: 0 0 2rem; } [data-app="dataacuity"] .dataacuity-cta .tgn-btn { margin: 0 0.25rem; } /* ============================================ RESPONSIVE — collapse the header nav, stack the footer ============================================ */ @media (max-width: 819px) { [data-app="dataacuity"] .dataacuity-header__inner { flex-wrap: wrap; gap: 1rem; padding-block: 0.85rem; } [data-app="dataacuity"] .dataacuity-brand__sub { display: none; } [data-app="dataacuity"] .dataacuity-nav { order: 3; flex-basis: 100%; gap: 1rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.25rem; } [data-app="dataacuity"] .dataacuity-nav::-webkit-scrollbar { display: none; } [data-app="dataacuity"] .dataacuity-nav a { flex-shrink: 0; } [data-app="dataacuity"] .dataacuity-header__actions { margin-left: 0; gap: 0.4rem; } [data-app="dataacuity"] .dataacuity-hero { padding: 3.5rem 0 2.5rem; } [data-app="dataacuity"] .dataacuity-hero__headline { font-size: var(--tgn-text-3xl); max-width: none; } [data-app="dataacuity"] .dataacuity-products, [data-app="dataacuity"] .dataacuity-why, [data-app="dataacuity"] .dataacuity-cta { padding: 3rem 0; } [data-app="dataacuity"] .dataacuity-footer { padding: 3rem 0 1.5rem; margin-top: 2rem; } [data-app="dataacuity"] .dataacuity-footer__inner { grid-template-columns: 1fr; gap: 2rem; } [data-app="dataacuity"] .dataacuity-footer__nav { grid-template-columns: 1fr 1fr; } [data-app="dataacuity"] .dataacuity-cta .tgn-btn { display: block; margin: 0.5rem auto; max-width: 280px; } }