/* * Visual effects for the promo-code pages only. * * Kept in a local CSS module rather than the shared theme so the rest of the * console keeps its current flat styling. Everything here sits on top of * Mantine tokens, so it follows the theme and the light/dark scheme. */ /* * Accent fallbacks. `--promo-accent*` are set on by usePromoAppearance; * every rule below falls back to indigo so the styling is correct even before * the appearance effect has run (or if the hook isn't mounted at all). */ /* ------------------------------------------------- Page surface (Appearance) */ .pageSurface { position: relative; min-height: 100%; transition: background 260ms ease; } .pageSurface[data-bg="plain"] { background: transparent; } /* Soft accent wash fading out down the page. */ .pageSurface[data-bg="gradient"]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 460px; z-index: 0; pointer-events: none; background: linear-gradient( 180deg, color-mix(in srgb, var(--promo-accent, var(--mantine-color-indigo-6)) 12%, transparent), transparent ); } /* Frosted colour blooms, echoing the glass panel in the Country breakdown. */ .pageSurface[data-bg="glass"]::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 620px; z-index: 0; pointer-events: none; filter: blur(60px); opacity: 0.55; background: radial-gradient( 42% 38% at 12% 8%, color-mix(in srgb, var(--promo-accent, var(--mantine-color-indigo-6)) 42%, transparent), transparent 70% ), radial-gradient( 38% 34% at 88% 22%, color-mix(in srgb, var(--promo-accent-alt, var(--mantine-color-grape-5)) 34%, transparent), transparent 70% ); } /* Content sits above whichever wash is active. */ .pageSurface > * { position: relative; z-index: 1; } /* ------------------------------------------------- Appearance popover pieces */ .swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid light-dark(var(--mantine-color-white), var(--mantine-color-dark-6)); box-shadow: 0 0 0 1px light-dark(rgba(15, 23, 42, 0.15), rgba(255, 255, 255, 0.18)); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; color: #fff; } .bgOption { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 9px; border-radius: var(--mantine-radius-sm); border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left; transition: background-color 150ms ease, border-color 150ms ease; } .bgOption:hover { background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)); } .bgOptionActive { border-color: var(--promo-accent-border, var(--mantine-color-indigo-3)); background: var(--promo-accent-soft, var(--mantine-color-indigo-0)); } .bgOptionText { flex: 1; min-width: 0; } /* Derived-series preview swatches in the Appearance popover. */ .paletteChip { flex: 1; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px light-dark(rgba(15, 23, 42, 0.12), rgba(255, 255, 255, 0.16)); } .bgPreview { width: 34px; height: 24px; flex-shrink: 0; border-radius: 5px; border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)); } .bgPreview[data-preview="plain"] { background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5)); } .bgPreview[data-preview="gradient"] { background: linear-gradient( 180deg, var(--promo-accent, var(--mantine-color-indigo-6)), transparent ); } .bgPreview[data-preview="glass"] { background: radial-gradient(60% 60% at 20% 20%, var(--promo-accent, var(--mantine-color-indigo-6)), transparent 70%), radial-gradient(60% 60% at 80% 80%, var(--promo-accent-alt, var(--mantine-color-grape-5)), transparent 70%); } /* Icon chip beside each drawer section heading. */ .sectionIcon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: var(--mantine-radius-sm); color: var(--promo-accent, var(--mantine-color-indigo-6)); background: var(--promo-accent-soft, var(--mantine-color-indigo-0)); } /* ---------------------------------------------------------------- KPI tiles */ .tile { position: relative; overflow: hidden; /* Fills the grid row so the body below can push its hint to the bottom. */ height: 100%; border-radius: var(--mantine-radius-lg); border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4)); background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6)); padding: var(--mantine-spacing-md); box-shadow: var(--promo-shadow, none); transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1), border-color 220ms ease; } /* * Accent wash plus a specular sheen, layered in one pseudo-element. * * Sheen strength is `--promo-gloss`, set by the Gloss & shadow setting, so * "None" removes it entirely instead of leaving a faint highlight behind. */ .tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(255, 255, 255, calc(0.6 * var(--promo-gloss, 0.28))) 0%, transparent 38% ), linear-gradient(135deg, var(--tile-accent-soft) 0%, transparent 55%); opacity: 0.85; pointer-events: none; } /* Accent rail down the left edge. */ .tile::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient( 180deg, var(--tile-accent), var(--tile-accent-to, var(--tile-accent)) ); transform: scaleY(0.35); transform-origin: center; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .tile:hover { transform: translateY(var(--promo-lift, -3px)); box-shadow: var( --promo-shadow-hover, 0 12px 28px -14px light-dark(rgba(15, 23, 42, 0.28), rgba(0, 0, 0, 0.6)) ); border-color: var(--tile-accent); } .tile:hover::after { transform: scaleY(1); } /* * Column layout so the hint can be pinned to the bottom. * * Tiles don't all carry the same parts — only some have a progress bar — so with * normal flow each hint landed at a different height and the row read as ragged. * Bottom-aligning the hint gives every tile the same two anchors: figure at the * top, hint at the base. */ .tileBody { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; } /* * One line, always. * * A longer hint ("53 internal · 0 curated") wrapped to two lines and made that * tile taller than its neighbours. The full text stays available via the title * attribute rather than being lost. */ /* The single bottom anchor for every tile, bar and hint included. */ .tileFooter { margin-top: auto; padding-top: 10px; } /* * One line, always. A longer hint ("53 internal · 0 curated") wrapped to two * lines and made that tile taller than its neighbours; the full text stays * available via the title attribute rather than being lost. */ .tileHint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Big figure — tabular digits stop the count-up from jittering the width. */ .tileValue { font-size: 1.75rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .tileIcon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--mantine-radius-md); background: var(--tile-accent-soft); color: var(--tile-accent); } /* -------------------------------------------------------- Applied filter chips */ /* Removable "Country: Italy" style chip. */ .pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 10px; border-radius: 999px; font-size: var(--mantine-font-size-xs); font-weight: 600; white-space: nowrap; color: var(--promo-accent-text, var(--mantine-color-indigo-8)); background: light-dark( var(--promo-accent-soft, var(--mantine-color-indigo-0)), rgba(76, 110, 245, 0.18) ); border: 1px solid light-dark( var(--promo-accent-border, var(--mantine-color-indigo-2)), rgba(76, 110, 245, 0.35) ); } .pillClose { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 0; padding: 0; border-radius: 999px; cursor: pointer; color: inherit; background: transparent; transition: background-color 140ms ease; } .pillClose:hover { background: light-dark( var(--promo-accent-border, var(--mantine-color-indigo-2)), rgba(76, 110, 245, 0.4) ); } /* ------------------------------------------------------------------- Table */ .tableCard { border-radius: var(--mantine-radius-lg); border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4)); background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6)); overflow: hidden; } .tableHead { position: sticky; top: 0; z-index: 2; background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-7)); } .th { padding: 10px 14px; text-align: left; white-space: nowrap; font-size: var(--mantine-font-size-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-1)); border-bottom: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)); } .thSortable { cursor: pointer; transition: color 160ms ease, background-color 160ms ease; } .thSortable:hover { color: var(--promo-accent-hover, var(--mantine-color-indigo-7)); background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5)); } .thInner { display: inline-flex; align-items: center; gap: 4px; } /* Sort caret: hidden until the column is hovered or active. */ .sortIcon { display: inline-flex; opacity: 0; transition: opacity 160ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1); } .thSortable:hover .sortIcon { opacity: 0.45; } .sortIconActive { opacity: 1; color: var(--promo-accent, var(--mantine-color-indigo-6)); } .sortIconDesc { transform: rotate(180deg); } .row { cursor: pointer; transition: background-color 160ms ease, box-shadow 160ms ease; } .row td { padding: 11px 14px; font-size: var(--mantine-font-size-sm); border-bottom: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-5)); } .row:hover { background: light-dark( var(--promo-accent-soft, var(--mantine-color-indigo-0)), var(--mantine-color-dark-5) ); box-shadow: inset 3px 0 0 0 var(--promo-accent, var(--mantine-color-indigo-5)); } /* Numeric cells stay column-aligned. */ .num { font-variant-numeric: tabular-nums; } /* * Badge for a value that belongs to a chart series. Colours come from * --role-internal / --role-curated, published by the page so the badge, the * donut slice and the KPI hint always agree. */ .dataBadge { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 2px 8px; border-radius: 999px; font-size: var(--mantine-font-size-xs); font-weight: 700; line-height: 1.5; color: var(--data-badge-color); background: color-mix(in srgb, var(--data-badge-color) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--data-badge-color) 30%, transparent); } /* * The same pill as .dataBadge, but interactive. * * Composed rather than adding button styles to .dataBadge: most of those pills * are plain figures in table cells and must not look clickable. */ .dataBadgeButton { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 2px 8px; border: 0; border-radius: 999px; font-size: var(--mantine-font-size-xs); font-weight: 700; cursor: pointer; color: var(--data-badge-color); background: color-mix(in srgb, var(--data-badge-color) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--data-badge-color) 30%, transparent); transition: background-color 160ms ease, transform 160ms ease; } .dataBadgeButton:hover { background: color-mix(in srgb, var(--data-badge-color) 22%, transparent); transform: translateY(-1px); } .dataBadgeButton:focus-visible { outline: 2px solid var(--data-badge-color); outline-offset: 2px; } .dataBadgeButton[data-role="internal"] { --data-badge-color: var(--role-internal, var(--mantine-color-blue-6)); } .dataBadgeButton[data-role="curated"] { --data-badge-color: var(--role-curated, var(--mantine-color-violet-6)); } /* * Manual bookings — keyed into Viewpoint rather than taken through Karma Subito. * * Takes the accent rather than a third fixed hue, so it moves with the theme like the * chart slice it labels. Internal and curated keep their own role colours because those * are a stable pair the whole console recognises. */ .dataBadgeButton[data-role="manual"] { --data-badge-color: var(--promo-accent, var(--mantine-color-teal-6)); } @media (prefers-reduced-motion: reduce) { .dataBadgeButton, .dataBadgeButton:hover { transition: none; transform: none; } } .dataBadge[data-role="internal"] { --data-badge-color: var(--role-internal, var(--mantine-color-blue-6)); } .dataBadge[data-role="curated"] { --data-badge-color: var(--role-curated, var(--mantine-color-violet-6)); } /* Reveals the row's action buttons only on hover, so the grid stays calm. */ .rowActions { opacity: 0; transition: opacity 160ms ease; } .row:hover .rowActions, .row:focus-within .rowActions { opacity: 1; } /* Shimmer used by the loading rows. */ .shimmer { height: 14px; border-radius: var(--mantine-radius-sm); background: linear-gradient( 90deg, light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5)) 25%, light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)) 50%, light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5)) 75% ); background-size: 200% 100%; animation: sweep 1.3s linear infinite; } @keyframes sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } } .emptyCell { padding: 48px 16px; text-align: center; } /* --------------------------------------------------------- Analytics header */ .sectionCard { border-radius: var(--mantine-radius-lg); border: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4)); background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6)); } /* Thin gradient hairline that reads as a section divider. */ .gradientRule { height: 1px; border: 0; margin: 0; background: linear-gradient( 90deg, transparent, light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)) 20%, light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)) 80%, transparent ); } /* Legend row: subtle nudge on hover to tie it to the pie slice. */ .legendRow { border-radius: var(--mantine-radius-sm); padding: 3px 6px; transition: background-color 160ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1); } .legendRow:hover { background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5)); transform: translateX(2px); } /* Only drillable rows are focusable, so this never appears on a plain legend. */ .legendRow[role="button"]:focus-visible { outline: 2px solid var(--promo-accent, var(--mantine-color-indigo-6)); outline-offset: 1px; } /* * Drill-in arrow on a legend row. * * Always laid out (never display:none) so hovering doesn't reflow the row; it * just goes from muted to accent and nudges right. */ .legendChevron { flex-shrink: 0; color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2)); transition: color 160ms ease, transform 160ms ease; } .legendRow:hover .legendChevron, .legendRow:focus-visible .legendChevron { color: var(--promo-accent, var(--mantine-color-indigo-6)); transform: translateX(2px); } @media (prefers-reduced-motion: reduce) { .legendChevron, .legendRow:hover .legendChevron { transition: none; transform: none; } } .legendSwatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 2px light-dark(rgba(255, 255, 255, 0.9), rgba(0, 0, 0, 0.4)); } @media (prefers-reduced-motion: reduce) { .tile, .tile::after, .row, .legendRow, .selectorChip, .sortIcon { transition: none; } .tile:hover, .legendRow:hover, .selectorChip:hover { transform: none; } .shimmer { animation: none; } } /* Divider above the legend's total row. */ .legendTotal { border-top: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)); } /* ------------------------------------------------ Breakdown selector chips */ /* * The selector doubles as a summary: each chip carries its breakdown's total, so * all five figures are readable at once and clicking only changes which one is * expanded below. A SegmentedControl couldn't do that — five long labels in one * strip left no room for values and read as cramped. */ .selectorRow { display: flex; flex-wrap: wrap; gap: 8px; } .selectorChip { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 108px; padding: 7px 12px; border-radius: var(--mantine-radius-md); cursor: pointer; text-align: left; background: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6)); border: 1px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)); transition: border-color 160ms ease, background-color 160ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease; } .selectorChip:hover { transform: translateY(calc(var(--promo-lift, -3px) / 3)); border-color: var(--promo-accent-border, var(--mantine-color-indigo-3)); box-shadow: var( --promo-shadow, 0 4px 12px -8px light-dark(rgba(15, 23, 42, 0.3), rgba(0, 0, 0, 0.6)) ); } .selectorChipActive { border-color: var(--promo-accent, var(--mantine-color-indigo-6)); background: var(--promo-accent-soft, var(--mantine-color-indigo-0)); box-shadow: inset 0 0 0 1px var(--promo-accent, var(--mantine-color-indigo-6)); } .selectorChipLabel { font-size: var(--mantine-font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.3; color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-1)); white-space: nowrap; } .selectorChipActive .selectorChipLabel { color: var(--promo-accent-text, var(--mantine-color-indigo-8)); } .selectorChipValue { font-size: 1rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-0)); }