/* ========================================================================== Customer theme — design tokens + component library Direction: "modern consumer product", not an admin panel. A near-white canvas, white cards with a hairline ring and a soft lift, generous radii, a violet-indigo brand, and a type scale that has a real display size at the top of it. Theme is switched by [theme] on (see theme-toggle.js). ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Brand ramp — violet-indigo */ --brand-50: #f1effe; --brand-100: #e4e0fd; --brand-200: #c9c1fb; --brand-300: #a99cf6; --brand-400: #8878f0; --brand-500: #6e5cec; --brand-600: #5b4be8; --brand-700: #4a3bcb; --brand-800: #3a2ea0; --brand-900: #2a2175; --brand-950: #1a1449; --primary: #5b4be8; --primary-rgb: 91, 75, 232; --primary-hover: #4f3fe0; --primary-active: #4a3bcb; --on-primary: #ffffff; /* One warm accent, for the things that are meant to feel like a prize: premium badges, rewards, tier marks. Never for navigation. */ --accent: #ff7a45; --accent-rgb: 255, 122, 69; --gold: #f5a524; /* Radii — roomy. Consumer software, not a data grid. */ --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px; /* Spacing rhythm */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* Typography */ --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Type scale. Display sizes are fluid so a phone never gets a headline sized for a 1200px column. */ --t-display: clamp(1.7rem, 5.2vw, 2.5rem); --t-h1: clamp(1.32rem, 3.6vw, 1.6rem); --t-h2: 1.12rem; --t-h3: 0.98rem; --t-body: 0.875rem; --t-sm: 0.8rem; --t-xs: 0.74rem; --t-2xs: 0.68rem; /* Layout One container across every customer page: --page-max. Pages differ by what they put inside it (rail, columns, grid, a narrow measure), never by how wide the page itself is. */ --header-h: 56px; --tabbar-h: 62px; --page-max: 1200px; --aside-w: 340px; --gutter: 16px; /* The widest a single column of prose or form fields is allowed to get. */ --measure: 560px; --measure-md: 720px; /* Motion — one ease for travel, one for a spring-ish press. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur: 0.2s; --dur-slow: 0.45s; color-scheme: light; } @media (min-width: 992px) { :root { --header-h: 68px; --gutter: 24px; } } /* Light palette (default) */ :root, body[theme='light'] { --bg: #f5f6fb; --bg-alt: #eef0f8; --surface: #ffffff; --surface-2: #f6f7fb; --surface-3: #edeff7; --surface-inverse: #12131a; --text: #12131a; --text-2: #474a5c; --text-muted: #7a7f93; --text-inverse: #ffffff; /* The hairline is back, and it is structural: every surface in this system is a fill plus a 1px ring plus a soft lift. That ring is what keeps white cards legible on a near-white canvas. */ --border: #e7e9f2; --border-strong: #d5d8e6; --ring: 0 0 0 1px var(--border); --success: #00b37e; --success-rgb: 0, 179, 126; --success-soft: #e2f7f0; --warning: #b8770b; --warning-soft: #fdf2df; --danger: #e23b3b; --danger-soft: #fdeceb; --info: #2e90fa; --info-soft: #e7f2fe; --shadow-xs: 0 1px 2px rgba(18, 19, 26, 0.04); --shadow-sm: 0 1px 2px rgba(18, 19, 26, 0.05), 0 2px 6px rgba(18, 19, 26, 0.04); --shadow-md: 0 4px 14px rgba(18, 19, 26, 0.07), 0 2px 5px rgba(18, 19, 26, 0.04); --shadow-lg: 0 16px 42px rgba(18, 19, 26, 0.1), 0 4px 12px rgba(18, 19, 26, 0.05); --shadow-xl: 0 28px 70px rgba(18, 19, 26, 0.14), 0 8px 20px rgba(18, 19, 26, 0.06); --shadow-brand: 0 10px 26px rgba(var(--primary-rgb), 0.3); /* What a card sits on: the ring does the defining, the shadow only lifts it a millimetre off the page. */ --shadow-panel: var(--ring), 0 1px 2px rgba(18, 19, 26, 0.04); --shadow-raised: var(--ring), 0 6px 18px rgba(18, 19, 26, 0.07); --skeleton: linear-gradient(90deg, #edeff7 25%, #e2e5f0 37%, #edeff7 63%); color-scheme: light; } /* Dark palette */ body[theme='dark'] { --bg: #0a0a10; --bg-alt: #101018; --surface: #15161f; --surface-2: #1c1d29; --surface-3: #262736; --surface-inverse: #ffffff; --text: #edeef5; --text-2: #b6b9c9; --text-muted: #868a9e; --text-inverse: #12131a; --border: #262736; --border-strong: #343648; --ring: 0 0 0 1px var(--border); --primary: #9d8cff; --primary-rgb: 157, 140, 255; --primary-hover: #b0a2ff; --primary-active: #8878f0; /* Dark ink on the pale brand fill: white sits at about 2.4:1 on it, this reads near 7:1. */ --on-primary: #14102e; --accent: #ff9468; --accent-rgb: 255, 148, 104; --gold: #fbbf24; --success: #2ee6a8; --success-rgb: 46, 230, 168; --success-soft: rgba(46, 230, 168, 0.13); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.13); --danger: #ff6b6b; --danger-soft: rgba(255, 107, 107, 0.13); --info: #5cb0fb; --info-soft: rgba(92, 176, 251, 0.13); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55); --shadow-xl: 0 30px 74px rgba(0, 0, 0, 0.62); --shadow-brand: 0 10px 28px rgba(var(--primary-rgb), 0.32); --shadow-panel: var(--ring), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-raised: var(--ring), 0 8px 22px rgba(0, 0, 0, 0.42); --skeleton: linear-gradient(90deg, #1c1d29 25%, #252636 37%, #1c1d29 63%); color-scheme: dark; } /* If JS never ran, respect the OS preference. */ @media (prefers-color-scheme: dark) { /* color-scheme only reaches the scrollbars and the page canvas from the root element, which no longer carries the theme — so the root follows the OS here, and theme-toggle.js overrides it inline once a choice is made. */ :root { color-scheme: dark; } body:not([theme]) { --bg: #0a0a10; --bg-alt: #101018; --surface: #15161f; --surface-2: #1c1d29; --surface-3: #262736; --surface-inverse: #ffffff; --text: #edeef5; --text-2: #b6b9c9; --text-muted: #868a9e; --text-inverse: #12131a; --border: #262736; --border-strong: #343648; --ring: 0 0 0 1px var(--border); --primary: #9d8cff; --primary-rgb: 157, 140, 255; --primary-hover: #b0a2ff; --primary-active: #8878f0; --on-primary: #14102e; --accent: #ff9468; --accent-rgb: 255, 148, 104; --gold: #fbbf24; --success: #2ee6a8; --success-rgb: 46, 230, 168; --success-soft: rgba(46, 230, 168, 0.13); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.13); --danger: #ff6b6b; --danger-soft: rgba(255, 107, 107, 0.13); --info: #5cb0fb; --info-soft: rgba(92, 176, 251, 0.13); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.55); --shadow-xl: 0 30px 74px rgba(0, 0, 0, 0.62); --shadow-brand: 0 10px 28px rgba(var(--primary-rgb), 0.32); --shadow-panel: var(--ring), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-raised: var(--ring), 0 8px 22px rgba(0, 0, 0, 0.42); --skeleton: linear-gradient(90deg, #1c1d29 25%, #252636 37%, #1c1d29 63%); color-scheme: dark; } } /* Bootstrap 5.3 alignment — keeps dropdowns/modals/accordions in the same skin. Declared on the body, not :root: each var() below resolves where it is declared, and the palette it reads from now lives on the body. At :root these would freeze on the light values and never follow the theme. `:root body` rather than a bare `body`: Bootstrap's own [data-bs-theme] block now matches the body element too, and a lone type selector loses to its attribute selector. The extra :root only buys the specificity. */ :root body { --bs-primary: var(--primary); --bs-primary-rgb: var(--primary-rgb); --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-border-color: transparent; --bs-border-radius: var(--r-sm); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-hover); --bs-font-sans-serif: var(--font-sans); --bs-emphasis-color: var(--text); --bs-secondary-color: var(--text-muted); --bs-tertiary-bg: var(--surface-2); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 15px; line-height: 1.55; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 700; line-height: 1.25; margin: 0 0 var(--sp-2); letter-spacing: -0.022em; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); } h4 { font-size: 0.9rem; } h5 { font-size: 0.84rem; } h6 { font-size: 0.78rem; } /* The one size above the page title: a hero line, used sparingly. */ .t-display { font-size: var(--t-display); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; } p { margin: 0 0 var(--sp-3); } a { color: var(--primary); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--primary-hover); } img { max-width: 100%; } /* A separator without a stroke: the space is the separation. */ hr { border: 0; height: 0; opacity: 1; margin: var(--sp-4) 0; } ::selection { background: rgba(var(--primary-rgb), 0.22); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--r-sm); } /* Scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-pill); } /* -------------------------------------------------------------------------- 3. Utilities -------------------------------------------------------------------------- */ .u-muted { color: var(--text-muted) !important; } .u-soft { color: var(--text-2) !important; } .u-brand { color: var(--primary) !important; } .u-success { color: var(--success) !important; } .u-danger { color: var(--danger) !important; } .u-warning { color: var(--warning) !important; } .u-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* Inline emphasis inside body copy — e.g. the required credit score. */ .highlight { color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; } .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .u-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .u-hide { display: none !important; } /* Lets a flex child actually shrink so `.u-truncate` inside it works. */ .min-w-0 { min-width: 0; } /* -------------------------------------------------------------------------- 4. The container and the layouts that go inside it Every customer page opens the same container. What changes from page to page is the layout *within* it — a rail, two columns, a card grid, or a single narrow measure — never the width of the page itself. -------------------------------------------------------------------------- */ .page { width: 100%; max-width: var(--page-max); margin-inline: auto; padding: var(--sp-5) var(--gutter) var(--sp-10); } @media (min-width: 992px) { .page { padding-top: var(--sp-8); } } /* --- Layout primitives -------------------------------------------------- All of these are a single column on a phone and only split once there is room, so nothing has to be re-thought for small screens. */ .layout { display: grid; gap: var(--sp-5); align-items: start; } /* Content with a supporting column: summary, totals, related actions. */ @media (min-width: 900px) { .layout--aside { grid-template-columns: minmax(0, 1fr) var(--aside-w); } } /* Even halves — two things of equal weight. */ @media (min-width: 760px) { .layout--split { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* A column that stops growing before it gets hard to read or to fill in. This is how a form stays compact inside the full-width container. */ .measure { max-width: var(--measure); } .measure-md { max-width: var(--measure-md); } .measure-lg { max-width: 940px; } .measure-center { margin-inline: auto; } /* Cards that flow into as many columns as the width allows. */ .grid { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; } @media (min-width: 560px) { .grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); } } /* Menus of rows pack tighter than cards with images in them. */ @media (min-width: 560px) { .grid--menu { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } .grid--wide { grid-template-columns: 1fr; } @media (min-width: 700px) { .grid--wide { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); } } .grid--tight { gap: var(--sp-2); } /* Fixed column counts, for sets that must not re-wrap. */ .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 559.98px) { .grid--2, .grid--3 { gap: var(--sp-2); } } /* An item that takes the whole row of whatever grid it sits in. */ .grid-span { grid-column: 1 / -1; } /* A row that scrolls sideways on a phone — the mobile-app way of showing a set that will not fit — and becomes a grid once it will. */ .scroller { display: flex; gap: var(--sp-2); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; /* Bleed to the page edges so the row reads as scrollable. */ margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); } .scroller::-webkit-scrollbar { display: none; } .scroller > * { flex: 0 0 auto; scroll-snap-align: start; } @media (min-width: 700px) { .scroller { display: grid; grid-auto-flow: row; gap: var(--sp-3); overflow: visible; margin-inline: 0; padding-inline: 0; } } /* Vertical rhythm */ .stack > * + * { margin-top: var(--sp-4); } .stack-sm > * + * { margin-top: var(--sp-2); } .stack-lg > * + * { margin-top: var(--sp-6); } /* --- Page heading ------------------------------------------------------- A title line, not a banner: one row, aligned with the content under it, with room on the right for whatever the page needs there. */ .page-head { display: flex; align-items: center; gap: var(--sp-3); min-height: 40px; margin-bottom: var(--sp-5); } .page-head__back { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-panel); color: var(--text-2); font-size: 1rem; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform 0.12s var(--ease); } .page-head__back:hover { background: var(--surface-2); color: var(--text); } .page-head__back:active { transform: scale(0.92); } .page-head__text { flex: 1 1 auto; min-width: 0; } .page-head__title { margin: 0; font-size: var(--t-h1); font-weight: 800; letter-spacing: -0.03em; } .page-head__sub { margin: 2px 0 0; color: var(--text-muted); font-size: var(--t-sm); } .page-head__actions { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; } /* --- Section heading ---------------------------------------------------- A small-caps label on a hairline. It separates without taking a line of its own the way a card header would. */ .section-head { display: flex; align-items: center; gap: var(--sp-3); /* A fixed height so two of them side by side line up whether or not one carries a link. */ min-height: 26px; margin: 0 0 var(--sp-3); } .section-head__title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--t-h3); font-weight: 700; letter-spacing: -0.02em; text-transform: none; color: var(--text); } /* The old small-caps label, where a section is a divider rather than a heading in its own right. */ .section-head--quiet .section-head__title { font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .section-head__link { flex: 0 0 auto; font-size: var(--t-sm); font-weight: 600; color: var(--primary); white-space: nowrap; } /* A section separates itself from whatever came before, rather than relying on the previous element also being one. */ .section { margin-top: var(--sp-6); } .section:first-child { margin-top: 0; } /* -------------------------------------------------------------------------- 5. Panels The one surface, and it has no outline. A panel is told apart from the page by its fill and by the faintest lift under it — never by a stroke around it. Everything else in this file follows the same rule: banding is done with a fill, grouping with space. -------------------------------------------------------------------------- */ .panel, .card { /* Bootstrap ships its own `.card` alongside this file and sets display:flex + a fixed colour; both are restated so a design-system panel is a plain block in the page's palette. */ display: block; flex-direction: row; background: var(--surface); color: var(--text); border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-panel); overflow: hidden; } /* Padding is opt-in: a panel full of list rows wants none. */ .panel--pad, .card--pad { padding: var(--sp-5); } .panel--pad-sm { padding: var(--sp-4); } .panel--pad-lg { padding: var(--sp-6); } /* Lifts on hover — only for a panel that is itself a link. */ .panel--interactive { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .panel--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); } /* No fill at all — structure without another box. */ .panel--bare { background: transparent; box-shadow: none; } .panel--muted { background: var(--surface-2); } /* The one panel that has to stand out from its neighbours does it with a tinted fill, not an outline. */ .panel--accent { background: rgba(var(--primary-rgb), 0.05); } .panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--surface-2); font-size: 0.82rem; font-weight: 700; } .panel__body, .card__body { padding: var(--sp-4); } .panel__foot, .card__foot { padding: var(--sp-3) var(--sp-4); background: var(--surface-2); } /* Sticks beside the content it summarises while that content scrolls. */ @media (min-width: 900px) { .is-sticky { position: sticky; top: calc(var(--header-h) + var(--sp-4)); } } /* --- Balance panel ------------------------------------------------------ The one place the brand colour fills a surface, so it stays the single loudest thing on any page that has it. */ .balance-card { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: var(--sp-5); background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand-600) 45%, #7a5cf0 100%); color: #fff; box-shadow: var(--shadow-brand); } body[theme='dark'] .balance-card { background: linear-gradient(135deg, #251d63 0%, #3a2ea0 50%, #5b4be8 100%); } /* A single soft light, top-right — enough to keep the fill from looking printed, without the bubbles the old card drew. */ .balance-card::before { content: ''; position: absolute; top: -40%; right: -20%; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 65%); pointer-events: none; } .balance-card > * { position: relative; z-index: 1; } .balance-card__label { margin: 0 0 var(--sp-1); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; } .balance-card__amount { margin: 0; font-size: clamp(1.45rem, 5.5vw, 1.8rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; overflow-wrap: break-word; } .balance-card__meta { margin: var(--sp-2) 0 0; font-size: 0.78rem; line-height: 1.5; opacity: 0.86; } .balance-card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); } .balance-card__action { flex: 1 1 auto; max-width: 200px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 9px var(--sp-3); border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.18); border: 0; color: #fff; font-size: var(--t-sm); font-weight: 600; transition: background var(--dur) var(--ease); } .balance-card__action:hover { background: rgba(255, 255, 255, 0.26); color: #fff; } /* -------------------------------------------------------------------------- 6. Figures A label over a number, separated by hairlines rather than boxed one by one. Three of them cost the height of two lines of text. -------------------------------------------------------------------------- */ .figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border-radius: var(--r-lg); /* A band of its own tint rather than a boxed row: that is what separates the figures from the panel around them, and the gap is what separates them from each other. */ background: var(--surface-2); overflow: hidden; } .figure { padding: var(--sp-3); min-width: 0; } .figure__label { display: flex; align-items: flex-start; gap: 5px; margin: 0 0 3px; color: var(--text-muted); font-size: 0.66rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.03em; text-transform: uppercase; overflow-wrap: break-word; } .figure__label i { font-size: 0.7rem; } .figure__value { margin: 0; font-size: clamp(0.88rem, 3.4vw, 1.05rem); font-weight: 700; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; overflow-wrap: break-word; } .figure--success .figure__value { color: var(--success); } .figure--warning .figure__value { color: var(--warning); } .figure--danger .figure__value { color: var(--danger); } .figure--success .figure__label i { color: var(--success); } .figure--warning .figure__label i { color: var(--warning); } .figure--danger .figure__label i { color: var(--danger); } /* Stacked on a narrow screen rather than squeezed to three columns. */ @media (max-width: 400px) { .figures--stack-xs { grid-template-columns: 1fr; } } /* One per row once the group is in a narrow side column, where three abreast would leave every label on two cramped lines. */ @media (min-width: 900px) { .figures--rows { grid-template-columns: 1fr; } .figures--rows .figure { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); } .figures--rows .figure__label { margin: 0; } } /* -------------------------------------------------------------------------- 7. Quick actions A compact icon-over-label target. Used where a set of destinations needs to be scannable rather than read. -------------------------------------------------------------------------- */ .tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); } /* auto-fit, not auto-fill: empty tracks collapse, so eight shortcuts spread across the row instead of packing left and leaving a gap. */ @media (min-width: 560px) { .tile-grid { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); } } .tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: var(--sp-3) var(--sp-1); background: var(--surface); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-panel); color: var(--text); text-align: center; cursor: pointer; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .tile:hover { color: var(--text); background: var(--surface-2); box-shadow: var(--shadow-md); } .tile__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-md); background: rgba(var(--primary-rgb), 0.1); color: var(--primary); font-size: 1rem; } .tile__icon img { width: 20px; height: 20px; object-fit: contain; } .tile__label { font-size: 0.7rem; font-weight: 600; line-height: 1.25; color: var(--text-2); } .tile--danger .tile__icon { background: var(--danger-soft); color: var(--danger); } .tile--success .tile__icon { background: var(--success-soft); color: var(--success); } .tile--warning .tile__icon { background: var(--warning-soft); color: var(--warning); } /* -------------------------------------------------------------------------- 8. Rows The workhorse. A bordered group of rows replaces a stack of cards everywhere a set of similar things is listed. -------------------------------------------------------------------------- */ .list { background: var(--surface); border: 0; border-radius: var(--r-xl); box-shadow: var(--shadow-panel); overflow: hidden; } .list--bare { border-radius: 0; background: transparent; box-shadow: none; } .list__row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 12px var(--sp-4); color: var(--text); background: transparent; border: 0; text-align: left; transition: background var(--dur) var(--ease); } /* No rules between rows. The icon chip on the left gives the list its rhythm, and the row padding does the separating — which is why it is a little more generous than it would need to be under a divider. */ a.list__row:hover, button.list__row:hover { background: var(--surface-2); color: var(--text); } /* A quieter marker than the filled tile — it labels the row without turning every line into a coloured square. */ .list__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-md); background: var(--surface-3); color: var(--text-2); font-size: 0.9rem; } .list__icon--brand { background: rgba(var(--primary-rgb), 0.1); color: var(--primary); } .list__icon--success { background: var(--success-soft); color: var(--success); } .list__icon--warning { background: var(--warning-soft); color: var(--warning); } .list__icon--danger { background: var(--danger-soft); color: var(--danger); } .list__body { flex: 1 1 auto; min-width: 0; } .list__title { margin: 0; font-size: 0.86rem; font-weight: 600; } .list__sub { margin: 1px 0 0; font-size: 0.76rem; color: var(--text-muted); } .list__meta { flex: 0 0 auto; text-align: right; font-size: 0.86rem; font-weight: 700; font-variant-numeric: tabular-nums; } .list__chevron { flex: 0 0 auto; color: var(--text-muted); font-size: 0.75rem; } /* --- Key / value -------------------------------------------------------- Label left, value right, no rule between them unless the group needs one. Denser than a row because it carries no icon and no second line. */ .kv { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: 7px 0; } .kv__k { flex: 0 0 auto; color: var(--text-muted); font-size: 0.79rem; } .kv__v { font-size: 0.84rem; font-weight: 600; text-align: right; word-break: break-word; font-variant-numeric: tabular-nums; } /* Rules only where a group of them needs separating. */ /* Grouped key/value pairs are separated by their own padding. */ .kv-list .kv { padding-block: 6px; } /* The closing figure of a summary. */ /* The closing figure earns its separation from the space above it and from being the only line on the panel set in bold at that size. */ .kv--total { margin-top: var(--sp-3); padding-top: var(--sp-3); } .kv--total .kv__k { color: var(--text); font-size: 0.86rem; font-weight: 600; } .kv--total .kv__v { font-size: 1.02rem; font-weight: 800; } /* -------------------------------------------------------------------------- 9. Buttons -------------------------------------------------------------------------- */ .btn-app { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px var(--sp-5); border: 0; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); font-family: inherit; font-size: var(--t-body); font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; cursor: pointer; text-align: center; white-space: nowrap; box-shadow: 0 2px 10px rgba(var(--primary-rgb), 0.25); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform 0.12s var(--ease); } .btn-app:hover { background: var(--primary-hover); color: var(--on-primary); box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.32); } .btn-app:active { transform: scale(0.97); } .btn-app:disabled, .btn-app.is-disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-app--block { width: 100%; } .btn-app--lg { padding: 14px var(--sp-6); font-size: 0.94rem; } .btn-app--sm { padding: 7px var(--sp-4); font-size: var(--t-sm); } .btn-app--xs { padding: 5px var(--sp-3); font-size: var(--t-xs); gap: 5px; } /* The quiet button is a filled one, a step down in contrast — not an outlined one. */ .btn-app--secondary { background: var(--surface-3); color: var(--text); box-shadow: none; } .btn-app--secondary:hover { box-shadow: none; } .btn-app--secondary:hover { background: var(--border); color: var(--text); } .btn-app--soft { background: rgba(var(--primary-rgb), 0.1); color: var(--primary); box-shadow: none; } .btn-app--soft:hover { background: rgba(var(--primary-rgb), 0.17); color: var(--primary); box-shadow: none; } .btn-app--ghost { background: transparent; color: var(--text-2); box-shadow: none; } .btn-app--ghost:hover { background: var(--surface-3); color: var(--text); box-shadow: none; } /* An outlined button, for a secondary action on a coloured or photographic surface where a grey fill would disappear. */ .btn-app--outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); } .btn-app--outline:hover { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); } .btn-app--success { background: var(--success); color: #fff; } .btn-app--success:hover { background: var(--success); filter: brightness(1.08); color: #fff; } .btn-app--danger { background: var(--danger); color: #fff; } .btn-app--danger:hover { background: var(--danger); filter: brightness(1.08); color: #fff; } /* Destructive, but not the main thing on the page. */ .btn-app--danger-quiet { background: var(--danger-soft); color: var(--danger); box-shadow: none; } .btn-app--danger-quiet:hover { background: var(--danger-soft); color: var(--danger); box-shadow: none; } /* A small round control: back arrows, copy, close, theme switch. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); font-size: 0.95rem; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform 0.12s var(--ease); } .icon-btn:hover { background: var(--border); color: var(--text); } .icon-btn:active { transform: scale(0.92); } .icon-btn--xs { width: 26px; height: 26px; font-size: 0.74rem; } .icon-btn--ghost { background: transparent; } .icon-btn--ghost:hover { background: var(--surface-3); } /* Bootstrap button bridge so legacy `.btn .btn-primary` markup stays on-brand */ .btn-primary { --bs-btn-bg: var(--primary); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--primary-active); --bs-btn-active-border-color: transparent; --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: transparent; --bs-btn-color: var(--on-primary); --bs-btn-hover-color: var(--on-primary); } /* -------------------------------------------------------------------------- 10. Forms -------------------------------------------------------------------------- */ .field { margin-bottom: var(--sp-4); } .field:last-child { margin-bottom: 0; } .field__label { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); margin-bottom: 7px; } .field__label .req { color: var(--danger); } .field__hint { font-size: 0.74rem; color: var(--text-muted); margin: 6px 0 0; } .field__error { display: block; font-size: 0.74rem; color: var(--danger); margin-top: 6px; min-height: 0; } .field__error:empty { margin-top: 0; } .input, .select, .textarea, .form-control, .form-select { width: 100%; padding: 12px var(--sp-4); /* A filled field, not an outlined one: the fill is what says "type here", and the focus ring is a shadow so nothing has to grow a border. */ background: var(--surface-2); border: 0; border-radius: var(--r-md); box-shadow: var(--ring); color: var(--text); font-family: inherit; font-size: 0.9rem; line-height: 1.5; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); appearance: none; } .input:focus, .select:focus, .textarea:focus, .form-control:focus, .form-select:focus { outline: none; box-shadow: 0 0 0 2px var(--primary), 0 0 0 5px rgba(var(--primary-rgb), 0.14); background-color: var(--surface); color: var(--text); } .input::placeholder, .textarea::placeholder, .form-control::placeholder { color: var(--text-muted); opacity: 1; } .input:disabled, .select:disabled, .textarea:disabled, .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-2); color: var(--text-muted); cursor: not-allowed; } .select, .form-select { padding-right: var(--sp-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23757a94'%3E%3Cpath d='M8 11.5 3.5 7l1-1L8 9.5 11.5 6l1 1z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--sp-3) center; background-size: 14px; } body[theme='dark'] .select, body[theme='dark'] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238b92b3'%3E%3Cpath d='M8 11.5 3.5 7l1-1L8 9.5 11.5 6l1 1z'/%3E%3C/svg%3E"); } .textarea { min-height: 92px; resize: vertical; } /* bootstrap.custom.css sets `textarea.form-control { font-size: .8rem }`, which outranks the .textarea rule above on specificity. Matched here so a textarea keeps the same type size as every other field. */ textarea.textarea, textarea.form-control { min-height: 92px; resize: vertical; font-size: 0.88rem; } /* Input with a leading unit / trailing button */ .input-shell { position: relative; display: flex; align-items: stretch; background: var(--surface-2); border: 0; border-radius: var(--r-md); box-shadow: var(--ring); transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .input-shell:focus-within { background: var(--surface); box-shadow: 0 0 0 2px var(--primary), 0 0 0 5px rgba(var(--primary-rgb), 0.14); } .input-shell .input, .input-shell .form-control { border: 0; background: transparent; box-shadow: none; flex: 1 1 auto; min-width: 0; } .input-shell .input:focus, .input-shell .form-control:focus { box-shadow: none; } .input-shell__prefix, .input-shell__suffix { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--sp-3); color: var(--text-muted); font-weight: 600; flex: 0 0 auto; } .input-shell__prefix { padding-right: 0; color: var(--text-2); } .input-shell__suffix { background: transparent; border: 0; cursor: pointer; font-size: 0.95rem; } .input-shell__suffix:hover { color: var(--text); } /* A value shown for reference rather than edited -- the sign-in number on the profile page. The whole shell is muted, not just the field, because the shell owns the background and would otherwise stay white around a greyed input. */ .input-shell--locked { background: var(--surface-2); } .input-shell--locked .input, .input-shell--locked .form-control { color: var(--text-muted); cursor: not-allowed; } /* Nothing in a locked shell is focusable, so it must not light up like a field that accepts input. */ .input-shell--locked:focus-within { background: var(--surface-2); box-shadow: none; } /* State marker rather than a control -- the suffix is normally a button. */ .input-shell__suffix--static { cursor: default; pointer-events: none; } /* Phone input — intl-tel-input (laravel-geo-genius) wraps the field in .iti at runtime. The plugin ships light-only chrome, so re-skin it with the tokens and let the flag / dial-code block read as an .input-shell prefix. */ .iti:not(.iti--container) { display: block; width: 100%; } /* The plugin stylesheet is injected after this file, so these rules are written one notch more specific than its own to win without !important. */ .iti input.input.iti__tel-input, .iti input.input.iti__tel-input[type=text], .iti input.input.iti__tel-input[type=tel] { padding-top: 9px; padding-bottom: 9px; padding-right: var(--sp-3); /* padding-left is set inline by the plugin to clear the selected flag. */ } [dir=rtl] .iti input.input.iti__tel-input, [dir=rtl] .iti input.input.iti__tel-input[type=text], [dir=rtl] .iti input.input.iti__tel-input[type=tel] { padding-left: var(--sp-4); } .iti .iti__flag-container { padding: 1px; } .iti .iti__selected-flag { gap: var(--sp-2); padding: 0 var(--sp-3); background: transparent; border: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); color: var(--text-2); transition: background var(--dur) var(--ease); } [dir=rtl] .iti .iti__selected-flag { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .iti.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag, .iti .iti__flag-container:focus-within .iti__selected-flag { background: var(--surface-3); } .iti .iti__selected-dial-code { font-size: 0.94rem; font-weight: 600; color: var(--text-2); } .iti .iti__arrow { margin-left: 0; border-top-color: var(--text-muted); } .iti .iti__arrow--up { border-bottom-color: var(--text-muted); } [dir=rtl] .iti .iti__arrow { margin-right: 0; } /* Dropdown — inline on desktop, full-screen sheet on mobile (both carry .iti). */ .iti .iti__dropdown-content { background: var(--surface); border-radius: var(--r-sm); color: var(--text); overflow: hidden; } .iti.iti--inline-dropdown .iti__dropdown-content { margin-top: var(--sp-2); box-shadow: var(--shadow-lg); } .iti .iti__dropdown-content--dropup { margin-bottom: var(--sp-2); } .iti .iti__search-input { padding: 10px var(--sp-4); background: var(--surface-2); border-radius: 0; color: var(--text); font-family: inherit; font-size: 0.9rem; } .iti .iti__search-input::placeholder { color: var(--text-muted); opacity: 1; } .iti .iti__search-input { background: var(--surface-2); } .iti.iti--inline-dropdown .iti__country-list { max-height: 220px; overflow-y: auto; } .iti .iti__country { padding: var(--sp-2) var(--sp-3); color: var(--text); font-size: 0.9rem; } .iti .iti__country.iti__highlight, .iti .iti__country:hover { background: var(--surface-3); } .iti .iti__dial-code { color: var(--text-muted); } .iti .iti__divider { border-color: transparent; } /* Checkbox / radio */ /* Filled, so an unchecked box is still visible without an outline. */ .form-check-input { background-color: var(--surface-3); border-color: transparent; } .form-check-input:checked { background-color: var(--primary); border-color: transparent; } .form-check-input:focus { border-color: transparent; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.24); } /* -------------------------------------------------------------------------- 11. Segmented tabs -------------------------------------------------------------------------- */ /* Underlined tabs sitting on the page, not a pill floating above it — the rule doubles as the divider between the tabs and what they filter. */ .segmented { display: inline-flex; gap: 3px; padding: 4px; max-width: 100%; background: var(--surface-2); border-radius: var(--r-pill); box-shadow: var(--ring); overflow-x: auto; scrollbar-width: none; } .segmented::-webkit-scrollbar { display: none; } .segmented__item { position: relative; flex: 1 1 auto; padding: 8px var(--sp-5); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-muted); font-family: inherit; font-size: var(--t-sm); font-weight: 600; text-align: center; white-space: nowrap; cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .segmented__item:hover { color: var(--text); } .segmented__item.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } body[theme='dark'] .segmented__item.is-active { background: var(--surface-3); } /* Full-bleed on a phone so the control spans the column like a real tab bar. From tablet up it goes back to being as wide as its own labels — a 1100px-wide three-tab control is a banner, not a control. */ .segmented--block { display: flex; width: 100%; } @media (min-width: 620px) { .segmented--block { display: inline-flex; width: auto; } .segmented--block .segmented__item { flex: 0 0 auto; } } /* The underlined form, for tabs that are the page's own navigation and should read as a heading rather than as a control. */ .segmented--underline { display: flex; gap: var(--sp-5); padding: 0; background: transparent; border-radius: 0; box-shadow: none; } .segmented--underline .segmented__item { flex: 0 0 auto; padding: 0 0 10px; border-radius: 0; font-size: var(--t-body); } .segmented--underline .segmented__item.is-active { background: transparent; color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); } .tabpanel { display: none; } .tabpanel.is-active { display: block; animation: fadeUp 0.28s var(--ease); } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 12. Badges, chips, alerts -------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); font-size: var(--t-2xs); font-weight: 700; letter-spacing: 0.01em; line-height: 1.6; white-space: nowrap; } .chip--pill { border-radius: var(--r-pill); padding-inline: 10px; } /* A dot rather than a fill, for a status that should not shout. */ .chip--dot { background: transparent; padding-inline: 0; color: var(--text-2); } .chip--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .chip--success { background: var(--success-soft); color: var(--success); } .chip--warning { background: var(--warning-soft); color: var(--warning); } .chip--danger { background: var(--danger-soft); color: var(--danger); } .chip--info { background: var(--info-soft); color: var(--info); } .chip--brand { background: rgba(var(--primary-rgb), 0.12); color: var(--primary); } .chip--gold { background: linear-gradient(135deg, #ffc978, var(--gold)); color: #40290a; } /* The warm accent — premium, rewards, anything meant to feel like a prize. */ .chip--accent { background: rgba(var(--accent-rgb), 0.14); color: var(--accent); } .chip--solid { background: var(--primary); color: var(--on-primary); } .chip--lg { padding: 5px 12px; font-size: var(--t-xs); } .note { display: flex; gap: var(--sp-2); margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); color: var(--text-2); font-size: var(--t-sm); line-height: 1.55; } .note__icon { flex: 0 0 auto; color: var(--primary); font-size: 0.88rem; line-height: 1.7; } .note > :last-child { margin-bottom: 0; } .note--info { background: var(--info-soft); color: var(--text); } .note--info .note__icon { color: var(--info); } .note--success { background: var(--success-soft); color: var(--text); } .note--success .note__icon { color: var(--success); } .note--warning { background: var(--warning-soft); color: var(--text); } .note--warning .note__icon { color: var(--warning); } .note--danger { background: var(--danger-soft); color: var(--text); } .note--danger .note__icon { color: var(--danger); } .alert { border-radius: var(--r-md); border: 0; background: var(--surface-2); color: var(--text); } .alert-success { background: var(--success-soft); color: var(--success); } .alert-danger { background: var(--danger-soft); color: var(--danger); } .alert-warning { background: var(--warning-soft); color: var(--warning); } .alert-info { background: var(--info-soft); color: var(--info); } /* -------------------------------------------------------------------------- 13. Progress -------------------------------------------------------------------------- */ .meter { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; } .meter__fill { height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--brand-400), var(--brand-600)); transition: width 0.7s var(--ease); } .meter__fill--success { background: linear-gradient(90deg, #34d399, var(--success)); } .meter__fill--warning { background: linear-gradient(90deg, #fbbf24, var(--warning)); } .meter__fill--danger { background: linear-gradient(90deg, #f87171, var(--danger)); } .meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); margin-bottom: 6px; font-size: 0.76rem; color: var(--text-muted); } .meter-head strong { color: var(--text); font-variant-numeric: tabular-nums; } /* Theme-aware logo pair — the white mark only shows on the dark palette. */ .logo-on-dark { display: none; } .logo-on-light { display: block; } body[theme='dark'] .logo-on-dark { display: block; } body[theme='dark'] .logo-on-light { display: none; } /* Theme switch */ .theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); cursor: pointer; overflow: hidden; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .theme-toggle:hover { background: var(--border); color: var(--text); } .theme-toggle i { position: absolute; font-size: 0.88rem; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); } .theme-toggle .icon-moon { opacity: 1; transform: none; } body[theme='dark'] .theme-toggle .icon-sun { opacity: 1; transform: none; } body[theme='dark'] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); } /* -------------------------------------------------------------------------- 14. Avatars -------------------------------------------------------------------------- */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-pill); background: linear-gradient(140deg, var(--brand-400), var(--brand-700)); color: #fff; font-weight: 700; text-transform: uppercase; overflow: hidden; flex: 0 0 auto; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar--xl { width: 76px; height: 76px; font-size: 1.7rem; } .avatar--lg { width: 56px; height: 56px; font-size: 1.3rem; } .avatar--sm { width: 32px; height: 32px; font-size: 0.8rem; } .avatar--round { border-radius: var(--r-pill); } .avatar--square { border-radius: var(--r-md); } /* -------------------------------------------------------------------------- 15. Empty state -------------------------------------------------------------------------- */ .empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-10) var(--sp-5); /* A recessed well rather than a dashed outline — it still reads as "this is where things will appear", without drawing a box. */ background: var(--surface-2); border-radius: var(--r-xl); box-shadow: var(--ring); color: var(--text-muted); } .empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--r-lg); background: var(--surface-3); color: var(--text-muted); font-size: 1.25rem; margin-bottom: var(--sp-4); } .empty__title { color: var(--text); font-size: 0.9rem; font-weight: 700; margin: 0 0 4px; } .empty__text { max-width: 300px; font-size: 0.79rem; margin: 0 0 var(--sp-4); } .empty__text:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 16. Prose (policy / help copy) -------------------------------------------------------------------------- */ .prose { color: var(--text-2); font-size: 0.86rem; line-height: 1.65; max-width: 72ch; } .prose h1, .prose h2, .prose h3, .prose h4 { color: var(--text); margin-top: var(--sp-6); } .prose h1:first-child, .prose h2:first-child, .prose h3:first-child { margin-top: 0; } .prose h2 { font-size: 1.05rem; } .prose h3 { font-size: 0.98rem; } .prose ul, .prose ol { padding-left: var(--sp-5); margin: 0 0 var(--sp-4); } .prose li { margin-bottom: var(--sp-2); } .prose strong, .prose b { color: var(--text); } .prose > :last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- 17. Bootstrap surface overrides (dropdown / modal / accordion / offcanvas) -------------------------------------------------------------------------- */ .dropdown-menu { --bs-dropdown-bg: var(--surface); --bs-dropdown-color: var(--text); --bs-dropdown-border-color: transparent; --bs-dropdown-link-color: var(--text-2); --bs-dropdown-link-hover-color: var(--text); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-active-bg: rgba(var(--primary-rgb), 0.12); --bs-dropdown-link-active-color: var(--primary); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: var(--sp-2); } .dropdown-item { border-radius: var(--r-xs); font-size: 0.88rem; } .modal-content { background: var(--surface); color: var(--text); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); } .modal-header, .modal-footer { border-color: transparent; } /* Bootstrap only dims behind a modal. Frosting the page as well pushes it further back, which matters most for the gift box — it sits on the bare backdrop with no card of its own. The dimming has to live in the background colour, not in --bs-backdrop-opacity: Bootstrap puts that on the element as `opacity`, which composites the blurred backdrop back over the sharp original and cancels most of the blur. Holding the element at opacity 1 keeps the .fade transition (0 → 1) working, so the frost still ramps in with the modal. */ .modal-backdrop { --bs-backdrop-bg: rgba(5, 6, 12, 0.62); --bs-backdrop-opacity: 1; -webkit-backdrop-filter: blur(24px) saturate(115%); backdrop-filter: blur(24px) saturate(115%); } .btn-close { filter: none; } body[theme='dark'] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } .accordion { --bs-accordion-bg: var(--surface); --bs-accordion-color: var(--text); --bs-accordion-border-color: transparent; --bs-accordion-btn-color: var(--text); --bs-accordion-btn-bg: var(--surface); --bs-accordion-active-color: var(--primary); --bs-accordion-active-bg: rgba(var(--primary-rgb), 0.08); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.16); --bs-accordion-border-radius: var(--r-md); --bs-accordion-inner-border-radius: var(--r-md); } .accordion-button { font-weight: 600; } .accordion-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23757a94'%3E%3Cpath d='M8 11.5 3.5 7l1-1L8 9.5 11.5 6l1 1z'/%3E%3C/svg%3E"); } .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233b2cd2'%3E%3Cpath d='M8 11.5 3.5 7l1-1L8 9.5 11.5 6l1 1z'/%3E%3C/svg%3E"); } body[theme='dark'] .accordion-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238b92b3'%3E%3Cpath d='M8 11.5 3.5 7l1-1L8 9.5 11.5 6l1 1z'/%3E%3C/svg%3E"); } body[theme='dark'] .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c5cf0'%3E%3Cpath d='M8 11.5 3.5 7l1-1L8 9.5 11.5 6l1 1z'/%3E%3C/svg%3E"); } .offcanvas { background: var(--surface); color: var(--text); } .table { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: transparent; --bs-table-striped-bg: var(--surface-2); --bs-table-striped-color: var(--text); --bs-table-hover-bg: var(--surface-2); --bs-table-hover-color: var(--text); } /* SweetAlert2 in-theme */ .swal2-popup { background: var(--surface) !important; color: var(--text) !important; border-radius: var(--r-lg) !important; } .swal2-title, .swal2-html-container { color: var(--text) !important; } .swal2-styled.swal2-confirm { background: var(--primary) !important; border-radius: var(--r-sm) !important; } .swal2-styled.swal2-cancel { background: var(--surface-3) !important; color: var(--text) !important; border-radius: var(--r-sm) !important; } /* -------------------------------------------------------------------------- 18. Skeleton / loading -------------------------------------------------------------------------- */ .skeleton { background: var(--skeleton); background-size: 400% 100%; animation: shimmer 1.3s ease-in-out infinite; border-radius: var(--r-sm); } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .spinner-dots { display: inline-flex; align-items: center; gap: 5px; } .spinner-dots span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: dotPulse 1.4s ease-in-out infinite both; } .spinner-dots span:nth-child(1) { animation-delay: -0.32s; } .spinner-dots span:nth-child(2) { animation-delay: -0.16s; } @keyframes dotPulse { 0%, 80%, 100% { transform: scale(0); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* -------------------------------------------------------------------------- 19. Accordion, without rules Bootstrap separates accordion items with borders. With those gone each item becomes its own filled block, and the gap between them does the work. -------------------------------------------------------------------------- */ .accordion { --bs-accordion-border-width: 0; } .accordion-item { background: var(--surface); border: 0; border-radius: var(--r-md) !important; overflow: hidden; } .accordion-item + .accordion-item { margin-top: var(--sp-2); } .accordion-button { font-size: 0.88rem; padding: var(--sp-3) var(--sp-4); } .accordion-button:not(.collapsed) { box-shadow: none; } .accordion-body { padding: 0 var(--sp-4) var(--sp-4); }