@charset "UTF-8";
/*!
* EarnOrbit design system - eo.css (R4)
* Direction A: violet mark, ink on paper, lime only as a reward fill.
*
* ONE UNLAYERED FILE. Do not wrap any of this in @layer: Bootstrap arrives
* unlayered from the CDN and unlayered rules always beat layered ones.
*
* Load order: head_inline.php → bootstrap.min.css → eo.css
* → eo-desktop.css media="(min-width:64em)"
* → eo-print.css media="print"
*
* Sections: 1 tokens · 2 base · 3 components · 4 pages · 5 utilities
*
* !important budget: 4 in this file, each justified inline. Anything else is
* solved with source order at equal specificity. Specificity stays ≤ (0,3,0).
*/
/* =====================================================================
1. TOKENS - derived values + the Bootstrap bridge.
The primitives (colour, type, space, radius, elevation, z, motion)
live in includes/head_inline.php so admin can share them.
===================================================================== */
:root{
/* Layout constants */
--eo-nav-h:56px; /* ≥992 raises it to 72 (see §3) */
--eo-tabbar-h:64px;
--eo-w-app:clamp(1200px,88vw,1440px); /* dashboard, wallet, detail */
--eo-w-wide:clamp(1320px,92vw,1600px); /* home, offers - hard cap 1600 */
--eo-w-prose:70ch;
--eo-w-form:30rem;
--eo-gutter-x:max(var(--eo-gutter),env(safe-area-inset-left),env(safe-area-inset-right));
--eo-tabbar-space:0px; /* body.eo-has-tabbar overrides */
/* Glass - tints derived from the canvas. ≥.78 with ink-only text,
≥.88 anywhere muted text appears. */
--eo-glass-tint:rgba(255,255,255,.82);
--eo-glass-tint-strong:rgba(255,255,255,.90);
--eo-glass-blur:16px;
--eo-glass-blur-mobile:12px;
--eo-glass-saturate:160%;
--eo-glass-hairline:inset 0 -1px 0 rgba(15,26,18,.10);
/* Bootstrap 5.3 globals. --bs-primary is deliberately NOT trusted; every
component that hardcodes #0d6efd / #86b7fe is overridden below. */
--bs-body-font-family:var(--eo-font-sans);
--bs-body-font-size:var(--eo-fs-base);
--bs-body-color:var(--eo-ink);
--bs-body-color-rgb:15,26,18;
--bs-body-bg:var(--eo-canvas);
--bs-body-bg-rgb:246,248,241;
--bs-secondary-color:var(--eo-muted);
--bs-tertiary-bg:var(--eo-surface-sunken);
--bs-border-color:var(--eo-border);
--bs-border-radius:var(--eo-r-md);
--bs-border-radius-sm:var(--eo-r-xs);
--bs-border-radius-lg:var(--eo-r-lg);
--bs-link-color:var(--eo-violet-600);
--bs-link-color-rgb:109,40,217;
--bs-link-hover-color:var(--eo-violet-700);
--bs-link-hover-color-rgb:91,33,182;
--bs-primary:var(--eo-violet-600);
--bs-primary-rgb:109,40,217;
--bs-primary-text-emphasis:var(--eo-violet-700);
--bs-primary-bg-subtle:var(--eo-violet-100);
--bs-primary-border-subtle:var(--eo-violet-200);
--bs-focus-ring-width:2px;
--bs-focus-ring-opacity:1;
--bs-focus-ring-color:var(--eo-ink);
--bs-heading-color:var(--eo-ink);
--bs-emphasis-color:var(--eo-ink);
}
/* =====================================================================
2. BASE
===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{
-webkit-text-size-adjust:100%;
background:var(--eo-canvas);
scroll-behavior:smooth;
/* 2.4.11 - anchors never land under the sticky chrome */
scroll-padding-top:calc(var(--eo-nav-h) + var(--eo-s-4));
scroll-padding-bottom:calc(var(--eo-tabbar-space) + var(--eo-s-4));
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;
background-color:var(--eo-canvas);
color:var(--eo-ink);
font-family:var(--eo-font-sans);
font-size:var(--eo-fs-base);
line-height:var(--eo-lh-base);
font-weight:var(--eo-fw-regular);
font-feature-settings:var(--eo-font-features);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-wrap:break-word;
padding-bottom:var(--eo-tabbar-space);
}
body.eo-has-tabbar{--eo-tabbar-space:calc(var(--eo-tabbar-h) + env(safe-area-inset-bottom))}
/* 12px floor. Bootstrap's .small and our meta text both land on 12–14px. */
small,.small,figcaption,.eo-meta{font-size:var(--eo-fs-sm)}
sub,sup{font-size:var(--eo-fs-xs)}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3{
margin:0 0 var(--eo-s-3);
color:var(--eo-ink);
font-weight:var(--eo-fw-bold);
line-height:var(--eo-lh-tight);
letter-spacing:var(--eo-tracking-tight);
text-wrap:balance;
}
h1,.h1{font-size:var(--eo-fs-2xl)}
h2,.h2{font-size:var(--eo-fs-xl);line-height:var(--eo-lh-snug)}
h3,.h3{font-size:var(--eo-fs-lg);font-weight:var(--eo-fw-semibold);line-height:var(--eo-lh-snug)}
h4,h5,h6{font-size:var(--eo-fs-base);font-weight:var(--eo-fw-semibold)}
p,ul,ol,dl{margin:0 0 var(--eo-s-4)}
p:last-child,ul:last-child,ol:last-child{margin-bottom:0}
a{color:var(--eo-violet-600);text-underline-offset:.18em;text-decoration-thickness:max(1px,.06em)}
a:hover{color:var(--eo-violet-700)}
b,strong{font-weight:var(--eo-fw-semibold)}
hr{border:0;border-top:1px solid var(--eo-border);opacity:1;margin:var(--eo-s-6) 0}
img,svg,video{max-width:100%;height:auto}
img{vertical-align:middle}
::selection{background:var(--eo-violet-100);color:var(--eo-ink)}
::placeholder{color:var(--eo-placeholder);opacity:1}
/* ── Focus: two-tone ring. Ink outline sits outside the element, so it is
readable even on a violet or lime fill; the 4px white halo separates it
from dark surroundings. .eo-on-dark flips both tones. ──────────────── */
:where(a,button,input,select,textarea,summary,[tabindex],dialog,details):focus-visible,
.eo-focusable:focus-visible{
outline:var(--eo-focus-width) solid var(--eo-focus);
outline-offset:var(--eo-focus-offset);
box-shadow:0 0 0 4px var(--eo-focus-halo);
border-radius:inherit;
}
.eo-on-dark{--eo-focus:#fff;--eo-focus-halo:rgba(15,26,18,.9)}
/* Kill the Safari/Chrome default ring that would double up. */
:focus:not(:focus-visible){outline:0}
.eo-skip{
position:fixed;top:var(--eo-s-2);left:var(--eo-s-2);
z-index:var(--eo-z-toast);
transform:translateY(calc(-100% - var(--eo-s-4)));
padding:var(--eo-s-3) var(--eo-s-4);
background:var(--eo-surface);color:var(--eo-ink);
border:1px solid var(--eo-border-strong);border-radius:var(--eo-r-md);
box-shadow:var(--eo-elev-3);
font-weight:var(--eo-fw-semibold);text-decoration:none;
transition:transform var(--eo-dur-fast) var(--eo-ease-enter);
}
.eo-skip:focus{transform:translateY(0)}
main:focus{outline:0}
[hidden]{display:none}
/* ── Bootstrap component overrides. Goal: zero computed rgb(13,110,253)
and zero #86b7fe. Do not rely on --bs-primary alone - 5.3.3 hardcodes
these literals inside the compiled component rules. ────────────────── */
.btn{--bs-btn-border-radius:var(--eo-r-md);--bs-btn-font-weight:var(--eo-fw-semibold);
--bs-btn-focus-box-shadow:none}
.btn:focus-visible{outline:var(--eo-focus-width) solid var(--eo-focus);outline-offset:var(--eo-focus-offset);box-shadow:0 0 0 4px var(--eo-focus-halo)}
.btn-primary{
--bs-btn-bg:var(--eo-violet-600);--bs-btn-border-color:var(--eo-violet-600);--bs-btn-color:#fff;
--bs-btn-hover-bg:var(--eo-violet-700);--bs-btn-hover-border-color:var(--eo-violet-700);--bs-btn-hover-color:#fff;
--bs-btn-active-bg:var(--eo-violet-900);--bs-btn-active-border-color:var(--eo-violet-900);--bs-btn-active-color:#fff;
--bs-btn-disabled-bg:var(--eo-surface-sunken);--bs-btn-disabled-border-color:var(--eo-border-strong);--bs-btn-disabled-color:var(--eo-muted);
--bs-btn-focus-shadow-rgb:15,26,18;
}
.btn-outline-primary{
--bs-btn-color:var(--eo-violet-600);--bs-btn-border-color:var(--eo-violet-600);
--bs-btn-hover-bg:var(--eo-violet-600);--bs-btn-hover-border-color:var(--eo-violet-600);--bs-btn-hover-color:#fff;
--bs-btn-active-bg:var(--eo-violet-700);--bs-btn-active-border-color:var(--eo-violet-700);--bs-btn-active-color:#fff;
--bs-btn-disabled-color:var(--eo-muted);--bs-btn-disabled-border-color:var(--eo-border-strong);
--bs-btn-focus-shadow-rgb:15,26,18;
}
.btn-link{--bs-btn-color:var(--eo-violet-600);--bs-btn-hover-color:var(--eo-violet-700);--bs-btn-focus-shadow-rgb:15,26,18}
.btn-secondary{--bs-btn-bg:var(--eo-surface);--bs-btn-color:var(--eo-ink);--bs-btn-border-color:var(--eo-border-strong);
--bs-btn-hover-bg:var(--eo-surface-sunken);--bs-btn-hover-color:var(--eo-ink);--bs-btn-hover-border-color:var(--eo-border-strong);
--bs-btn-active-bg:var(--eo-surface-sunken);--bs-btn-active-color:var(--eo-ink);--bs-btn-active-border-color:var(--eo-ink);
--bs-btn-focus-shadow-rgb:15,26,18}
.btn-danger{--bs-btn-bg:var(--eo-danger-solid);--bs-btn-border-color:var(--eo-danger-solid);
--bs-btn-hover-bg:#8f1616;--bs-btn-hover-border-color:#8f1616;--bs-btn-focus-shadow-rgb:15,26,18}
.btn-check:focus-visible+.btn{outline:var(--eo-focus-width) solid var(--eo-focus);outline-offset:var(--eo-focus-offset);box-shadow:0 0 0 4px var(--eo-focus-halo)}
.form-control,.form-select{
--bs-border-color:var(--eo-border-strong);
min-height:48px;font-size:var(--eo-fs-base);
border-radius:var(--eo-r-md);color:var(--eo-ink);background-color:var(--eo-surface);
}
.form-control:focus,.form-select:focus{
border-color:var(--eo-ink);
outline:var(--eo-focus-width) solid var(--eo-focus);outline-offset:var(--eo-focus-offset);
box-shadow:0 0 0 4px var(--eo-focus-halo);
}
.form-control:disabled,.form-select:disabled{background-color:var(--eo-surface-sunken);color:var(--eo-muted)}
.form-control.is-invalid,.was-validated .form-control:invalid{border-color:var(--eo-danger-solid)}
.form-label{font-weight:var(--eo-fw-medium);color:var(--eo-ink);margin-bottom:var(--eo-s-2)}
.form-text{color:var(--eo-muted);font-size:var(--eo-fs-sm)}
.form-check-input{--bs-border-color:var(--eo-border-strong);width:1.25em;height:1.25em;margin-top:.15em}
.form-check-input:checked{background-color:var(--eo-violet-600);border-color:var(--eo-violet-600)}
.form-check-input:focus{border-color:var(--eo-ink);box-shadow:none;
outline:var(--eo-focus-width) solid var(--eo-focus);outline-offset:var(--eo-focus-offset)}
.form-check-input:focus-visible{box-shadow:0 0 0 4px var(--eo-focus-halo)}
/* Bootstrap paints the switch knob #86b7fe on focus - repaint it ink. */
.form-switch .form-check-input:focus{--bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230f1a12'/%3e%3c/svg%3e")}
.form-range::-webkit-slider-thumb{background-color:var(--eo-violet-600)}
.form-range::-moz-range-thumb{background-color:var(--eo-violet-600)}
.form-range:focus::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--eo-focus-halo),0 0 0 6px var(--eo-focus)}
.dropdown-menu{--bs-dropdown-link-active-bg:var(--eo-violet-100);--bs-dropdown-link-active-color:var(--eo-ink);
--bs-dropdown-border-color:var(--eo-border);--bs-dropdown-border-radius:var(--eo-r-md);
--bs-dropdown-box-shadow:var(--eo-elev-3);--bs-dropdown-link-hover-bg:var(--eo-surface-sunken);
z-index:var(--eo-z-dropdown)}
.dropdown-item.active,.dropdown-item:active{background-color:var(--eo-violet-100);color:var(--eo-ink)}
.pagination{--bs-pagination-color:var(--eo-violet-600);--bs-pagination-hover-color:var(--eo-violet-700);
--bs-pagination-hover-bg:var(--eo-surface-sunken);--bs-pagination-border-color:var(--eo-border);
--bs-pagination-active-bg:var(--eo-ink);--bs-pagination-active-border-color:var(--eo-ink);--bs-pagination-active-color:#fff;
--bs-pagination-focus-color:var(--eo-violet-700);--bs-pagination-focus-bg:var(--eo-surface-sunken);
--bs-pagination-focus-box-shadow:none;--bs-pagination-disabled-color:var(--eo-muted)}
.page-link{color:var(--eo-violet-600);min-height:44px;display:inline-flex;align-items:center}
.page-link:focus{box-shadow:none}
.page-link:focus-visible{outline:var(--eo-focus-width) solid var(--eo-focus);outline-offset:var(--eo-focus-offset);box-shadow:0 0 0 4px var(--eo-focus-halo)}
.page-item.active .page-link{background-color:var(--eo-ink);border-color:var(--eo-ink);color:#fff}
.nav-link{color:var(--eo-text-2)}
.nav-link:hover,.nav-link:focus{color:var(--eo-ink)}
.nav-link.active,.nav-link[aria-current="page"]{color:var(--eo-ink);font-weight:var(--eo-fw-semibold)}
.nav-link:focus-visible{outline:var(--eo-focus-width) solid var(--eo-focus);outline-offset:var(--eo-focus-offset);box-shadow:0 0 0 4px var(--eo-focus-halo)}
.nav-pills{--bs-nav-pills-link-active-bg:var(--eo-ink);--bs-nav-pills-link-active-color:#fff;--bs-nav-pills-border-radius:var(--eo-r-pill)}
.nav-tabs{--bs-nav-tabs-link-active-color:var(--eo-ink);--bs-nav-tabs-link-active-border-color:var(--eo-border) var(--eo-border) var(--eo-surface)}
.list-group{--bs-list-group-active-bg:var(--eo-violet-100);--bs-list-group-active-color:var(--eo-ink);
--bs-list-group-active-border-color:var(--eo-violet-200);--bs-list-group-border-color:var(--eo-border)}
.progress{--bs-progress-bg:var(--eo-surface-sunken)}
.progress-bar{background-color:var(--eo-violet-600)}
.accordion{--bs-accordion-btn-focus-box-shadow:none;--bs-accordion-active-color:var(--eo-ink);
--bs-accordion-active-bg:var(--eo-violet-100);--bs-accordion-border-color:var(--eo-border)}
.accordion-button:not(.collapsed){color:var(--eo-ink);background-color:var(--eo-violet-100);box-shadow:none}
.accordion-button:not(.collapsed)::after{--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f1a12'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}
.btn-close:focus{box-shadow:none;outline:var(--eo-focus-width) solid var(--eo-focus);outline-offset:var(--eo-focus-offset)}
.navbar-toggler:focus{box-shadow:none}
.navbar-toggler:focus-visible{outline:var(--eo-focus-width) solid var(--eo-focus);outline-offset:var(--eo-focus-offset);box-shadow:0 0 0 4px var(--eo-focus-halo)}
.text-bg-primary{background-color:var(--eo-violet-600);color:#fff}
.link-primary{color:var(--eo-violet-600)}
.table{--bs-table-color:var(--eo-ink);--bs-table-border-color:var(--eo-border);--bs-table-bg:transparent;
--bs-table-striped-bg:var(--eo-canvas);--bs-table-hover-bg:var(--eo-surface-sunken)}
.modal{z-index:var(--eo-z-modal)}
.modal-backdrop{z-index:var(--eo-z-backdrop)}
.toast-container{z-index:var(--eo-z-toast)}
.tooltip{z-index:var(--eo-z-tooltip)}
.popover{z-index:var(--eo-z-popover)}
/* =====================================================================
3. COMPONENTS
===================================================================== */
/* ── 3.1 Containers ────────────────────────────────────────────────── */
.eo-container{width:min(100% - 2*var(--eo-gutter-x),var(--eo-w-app));margin-inline:auto}
.eo-container--wide{--eo-w-app:var(--eo-w-wide)}
.eo-container--prose{--eo-w-app:var(--eo-w-prose)}
.eo-container--form{--eo-w-app:var(--eo-w-form)}
.eo-section{padding-block:var(--eo-section-y)}
.eo-section--tight{padding-block:clamp(2rem,1.5rem + 2vw,3rem)}
/* ── 3.2 Buttons (standalone; Bootstrap .btn is themed above) ──────── */
.eo-btn{
display:inline-flex;align-items:center;justify-content:center;gap:var(--eo-s-2);
min-height:44px;padding:var(--eo-s-3) var(--eo-s-5);
border:1px solid transparent;border-radius:var(--eo-r-md);
background:var(--eo-violet-600);color:#fff;
font:inherit;font-weight:var(--eo-fw-semibold);line-height:1.2;
text-decoration:none;cursor:pointer;
transition:background-color var(--eo-dur-fast) var(--eo-ease-standard),
transform var(--eo-dur-instant) var(--eo-ease-standard);
}
.eo-btn:hover{background:var(--eo-violet-700);color:#fff}
.eo-btn:active{transform:scale(.98);background:var(--eo-violet-900)}
.eo-btn[disabled],.eo-btn[aria-disabled="true"]{background:var(--eo-surface-sunken);color:var(--eo-muted);border-color:var(--eo-border-strong);cursor:not-allowed;transform:none}
.eo-btn--secondary{background:var(--eo-surface);color:var(--eo-ink);border-color:var(--eo-border-strong)}
.eo-btn--secondary:hover{background:var(--eo-surface-sunken);color:var(--eo-ink)}
.eo-btn--ghost{background:transparent;color:var(--eo-ink)}
.eo-btn--ghost:hover{background:var(--eo-surface-sunken);color:var(--eo-ink)}
.eo-btn--danger{background:var(--eo-danger-solid)}
.eo-btn--danger:hover{background:#8f1616}
.eo-btn--lg{min-height:52px;padding-inline:var(--eo-s-6);font-size:var(--eo-fs-md)}
.eo-btn--sm{min-height:36px;padding:var(--eo-s-2) var(--eo-s-4);font-size:var(--eo-fs-sm)}
.eo-btn--block{width:100%}
@media (pointer:coarse){.eo-btn--sm{min-height:44px}}
.eo-btn[aria-busy="true"]{pointer-events:none;opacity:.8}
/* ── 3.3 Navbar ───────────────────────────────────────────────────── */
.eo-nav{
position:sticky;top:0;z-index:var(--eo-z-nav);
background:var(--eo-canvas);
box-shadow:var(--eo-glass-hairline);
padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);
transition:transform var(--eo-dur-base) var(--eo-ease-standard);
}
.eo-nav__inner{
display:flex;align-items:center;gap:var(--eo-s-3);
min-height:var(--eo-nav-h);
width:min(100% - 2*var(--eo-gutter-x),var(--eo-w-wide));margin-inline:auto;
}
.eo-nav.is-scrolled{box-shadow:var(--eo-elev-2),var(--eo-glass-hairline)}
/* <768 the nav hides on scroll-down; nav.js toggles .is-hidden. */
.eo-nav.is-hidden{transform:translateY(-100%)}
.eo-nav__brand{display:inline-flex;align-items:center;gap:var(--eo-s-2);color:var(--eo-ink);text-decoration:none;font-weight:var(--eo-fw-bold);font-size:var(--eo-fs-lg)}
.eo-nav__brand svg,.eo-nav__brand img{width:auto;height:32px;display:block}
.eo-nav__wordmark{display:none}
.eo-nav__links{display:none;align-items:center;gap:var(--eo-s-1);list-style:none;margin:0;padding:0}
.eo-nav__actions{display:flex;align-items:center;gap:var(--eo-s-2);margin-left:auto}
.eo-nav__link{
display:inline-flex;align-items:center;gap:var(--eo-s-2);
min-height:44px;padding:var(--eo-s-2) var(--eo-s-3);
border-radius:var(--eo-r-sm);color:var(--eo-text-2);text-decoration:none;font-weight:var(--eo-fw-medium);
}
.eo-nav__link:hover{background:var(--eo-surface-sunken);color:var(--eo-ink)}
.eo-nav__link[aria-current="page"]{color:var(--eo-ink);font-weight:var(--eo-fw-semibold);background:var(--eo-violet-100)}
.eo-nav__icon-btn{
display:inline-flex;align-items:center;justify-content:center;position:relative;
width:44px;height:44px;border:0;border-radius:var(--eo-r-pill);
background:transparent;color:var(--eo-ink);cursor:pointer;
}
.eo-nav__icon-btn:hover{background:var(--eo-surface-sunken)}
.eo-balance-chip{
display:inline-flex;align-items:center;gap:var(--eo-s-2);
min-height:36px;padding:var(--eo-s-1) var(--eo-s-3);
border:1px solid var(--eo-border-strong);border-radius:var(--eo-r-pill);
background:var(--eo-surface);color:var(--eo-ink);text-decoration:none;
font-weight:var(--eo-fw-semibold);font-size:var(--eo-fs-sm);
font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;
}
.eo-badge-dot{
position:absolute;top:6px;right:6px;
min-width:18px;height:18px;padding-inline:4px;
display:grid;place-items:center;
border-radius:var(--eo-r-pill);background:var(--eo-danger-solid);color:#fff;
font-size:var(--eo-fs-xs);font-weight:var(--eo-fw-semibold);line-height:1;
}
/* Guest <992: "Join free" is a real button in the bar, never in the menu. */
.eo-nav--guest .eo-nav__cta{flex:0 0 auto}
@media (max-width:359.98px){.eo-nav__brand svg,.eo-nav__brand img{height:28px}}
/* ≥992: the desktop navbar. This sits below the 64em breakpoint of
eo-desktop.css, so it has to live here. */
@media (min-width:992px){
:root{--eo-nav-h:72px}
.eo-nav__links{display:flex}
.eo-nav__wordmark{display:inline}
.eo-nav__menu-btn{display:none}
.eo-tabbar{display:none}
body.eo-has-tabbar{--eo-tabbar-space:0px}
.eo-nav--guest .eo-nav__links{margin-left:var(--eo-s-5)}
}
/* ── 3.4 Mobile bottom tab bar ─────────────────────────────────────── */
.eo-tabbar{
position:fixed;inset:auto 0 0 0;z-index:var(--eo-z-tabbar);
display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
background:var(--eo-surface);
box-shadow:0 -1px 0 rgba(15,26,18,.10);
padding-bottom:env(safe-area-inset-bottom);
transition:transform var(--eo-dur-base) var(--eo-ease-standard);
}
.eo-tabbar__item{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
position:relative;
min-height:var(--eo-tabbar-h);padding:var(--eo-s-1);
color:var(--eo-text-2);text-decoration:none;
font-size:var(--eo-fs-xs);font-weight:var(--eo-fw-medium);
}
.eo-tabbar__icon{
display:grid;place-items:center;width:44px;height:28px;border-radius:var(--eo-r-pill);
transition:background-color var(--eo-dur-fast) var(--eo-ease-standard),
transform var(--eo-dur-base) var(--eo-ease-settle);
}
.eo-tabbar__item[aria-current="page"]{color:var(--eo-ink);font-weight:var(--eo-fw-semibold)}
.eo-tabbar__item[aria-current="page"] .eo-tabbar__icon{background:var(--eo-violet-100)}
/* Hide the tab bar while typing (coarse pointers only). */
@media (pointer:coarse){
body:has(:is(input,textarea,select):focus) .eo-tabbar{transform:translateY(110%)}
}
/* Landscape phones: chrome must stay ≤25% of the viewport. */
@media (max-height:500px){
.eo-nav{position:static}
.eo-tabbar{--eo-tabbar-h:48px}
.eo-tabbar__item{min-height:48px}
.eo-tabbar__icon{height:22px}
body.eo-has-tabbar{--eo-tabbar-space:calc(48px + env(safe-area-inset-bottom))}
}
/* ── 3.5 Glass. Real backdrop-filter is opt-in (body.eo-fx-glass, set by
JS after the capability check) and limited to two layers: the scrolled
nav and the tab bar. Everything else is a solid surface. ──────────── */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
body.eo-fx-glass:not(.eo-admin-area) .eo-navbar{
background:var(--eo-glass-tint)!important;
-webkit-backdrop-filter:blur(var(--eo-glass-blur)) saturate(var(--eo-glass-saturate))!important;
backdrop-filter:blur(var(--eo-glass-blur)) saturate(var(--eo-glass-saturate))!important;
}
body.eo-fx-glass:not(.eo-admin-area) .eo-tabbar{
background:var(--eo-glass-tint-strong); /* muted labels live here */
-webkit-backdrop-filter:blur(var(--eo-glass-blur)) saturate(var(--eo-glass-saturate));
backdrop-filter:blur(var(--eo-glass-blur)) saturate(var(--eo-glass-saturate));
}
}
@media (max-width:767.98px){:root{--eo-glass-blur:var(--eo-glass-blur-mobile)}}
/* Fallbacks. Same selectors, later in the file, so no !important is needed. */
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
body.eo-fx-glass:not(.eo-admin-area) .eo-navbar,
body.eo-fx-glass:not(.eo-admin-area) .eo-tabbar{
background:var(--eo-surface)!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
box-shadow:0 0 0 1px var(--eo-border-strong);
}
}
/* No blur behind an open dialog - keeps the live layer count at 0 there. */
html:has(dialog[open]) .eo-navbar,
html:has(dialog[open]) .eo-tabbar{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--eo-surface)}
/* Simulated glass: a gradient + highlight, never a backdrop-filter. */
.eo-simglass{
background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(246,248,241,.92));
box-shadow:var(--eo-elev-2),var(--eo-highlight),var(--eo-hairline);
}
/* ── 3.6 Cards & offer card ────────────────────────────────────────── */
.eo-card{
position:relative;isolation:isolate;
background:var(--eo-surface);
border:1px solid var(--eo-border);border-radius:var(--eo-r-lg);
box-shadow:var(--eo-elev-1);
padding:var(--eo-s-5);
}
.eo-card--flush{padding:0;overflow:hidden}
.eo-grid--offers{
display:grid;gap:var(--eo-s-4);
grid-template-columns:repeat(auto-fill,minmax(min(20rem,100%),1fr));
}
/* PHP adds .eo-grid--cap3 while there are fewer than 8 offers. */
.eo-list--featured{display:grid;gap:var(--eo-s-4);grid-template-columns:1fr}
.eo-offer{
position:relative;isolation:isolate;
display:grid;grid-template-columns:48px minmax(0,1fr) auto;
align-items:center;gap:var(--eo-s-3);
padding:var(--eo-s-4);
background:var(--eo-surface);
border:1px solid var(--eo-border);border-radius:var(--eo-r-lg);
box-shadow:var(--eo-elev-1);
transition:transform var(--eo-dur-fast) var(--eo-ease-standard);
}
/* The whole card is the link: one stretched anchor, no nested interactives. */
.eo-offer__link{position:static;color:inherit;text-decoration:none}
.eo-offer__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.eo-offer:has(.eo-offer__link:focus-visible){
outline:var(--eo-focus-width) solid var(--eo-focus);outline-offset:var(--eo-focus-offset);
box-shadow:0 0 0 4px var(--eo-focus-halo),var(--eo-elev-1);
}
.eo-offer:active{transform:scale(.995)}
.eo-offer__title{
margin:0;font-size:var(--eo-fs-base);font-weight:var(--eo-fw-semibold);line-height:var(--eo-lh-snug);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.eo-offer__meta{
display:flex;align-items:center;gap:var(--eo-s-2);
margin:2px 0 0;color:var(--eo-muted);font-size:var(--eo-fs-xs);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.eo-offer__meta svg{flex:0 0 auto;width:16px;height:16px}
/* Logo: 48px image on a white tile, 1px border, 8px padding. */
.eo-logo-tile{
display:grid;place-items:center;
width:48px;height:48px;padding:8px;
background:#fff;border:1px solid var(--eo-border);border-radius:var(--eo-r-md);
overflow:hidden;
}
.eo-logo-tile img{width:100%;height:100%;object-fit:contain;display:block}
.eo-logo-tile--initials{
background:var(--eo-violet-100);color:var(--eo-violet-700);
font-weight:var(--eo-fw-bold);font-size:var(--eo-fs-sm);letter-spacing:.02em;
}
/* ── 3.7 Status pills ──────────────────────────────────────────────── */
.eo-pill{
display:inline-flex;align-items:center;gap:var(--eo-s-1);
min-height:24px;padding:2px var(--eo-s-2);
border-radius:var(--eo-r-pill);
background:var(--eo-neutral-bg);color:var(--eo-neutral-fg);
font-size:var(--eo-fs-xs);font-weight:var(--eo-fw-semibold);line-height:1.4;
white-space:nowrap;
}
.eo-pill svg{width:12px;height:12px;flex:0 0 auto}
.eo-pill--success{background:var(--eo-success-bg);color:var(--eo-success-fg)}
.eo-pill--warning{background:var(--eo-warning-bg);color:var(--eo-warning-fg)}
.eo-pill--danger{background:var(--eo-danger-bg);color:var(--eo-danger-fg)}
.eo-pill--info{background:var(--eo-info-bg);color:var(--eo-info-fg)}
.eo-pill--outline{background:transparent;color:var(--eo-text-2);box-shadow:inset 0 0 0 1px var(--eo-border-strong)}
/* Reward = ink on lime-400, no icon, so it can never read as "Approved". */
.eo-pill--reward{
background:var(--eo-lime-400);color:var(--eo-on-lime);
font-weight:var(--eo-fw-bold);font-size:var(--eo-fs-sm);
min-height:28px;padding-inline:var(--eo-s-3);
font-variant-numeric:tabular-nums lining-nums;
}
.eo-pill--reward svg{display:none}
/* ── 3.8 Tracking timeline ─────────────────────────────────────────── */
.eo-timeline{list-style:none;margin:0;padding:0;display:grid;gap:var(--eo-s-4)}
.eo-timeline__item{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--eo-s-3);padding-bottom:var(--eo-s-1)}
.eo-timeline__item::before{
content:"";position:absolute;left:13px;top:28px;bottom:calc(-1*var(--eo-s-4));
width:2px;background:var(--eo-border);
}
.eo-timeline__item:last-child::before{display:none}
.eo-timeline__marker{
display:grid;place-items:center;width:28px;height:28px;border-radius:var(--eo-r-pill);
background:var(--eo-surface-sunken);color:var(--eo-text-2);
box-shadow:inset 0 0 0 1px var(--eo-border-strong);
}
.eo-timeline__item.is-done .eo-timeline__marker{background:var(--eo-success-bg);color:var(--eo-success-fg);box-shadow:none}
.eo-timeline__item.is-current .eo-timeline__marker{background:var(--eo-violet-100);color:var(--eo-violet-700);box-shadow:inset 0 0 0 2px var(--eo-violet-600)}
.eo-timeline__item.is-failed .eo-timeline__marker{background:var(--eo-danger-bg);color:var(--eo-danger-fg);box-shadow:none}
.eo-timeline__label{margin:0;font-weight:var(--eo-fw-semibold);line-height:var(--eo-lh-snug)}
.eo-timeline__time{display:block;color:var(--eo-muted);font-size:var(--eo-fs-sm);font-variant-numeric:tabular-nums}
/* ── 3.9 Transactions: table ≥768, cards below, ARIA roles kept ─────
Safari/VoiceOver drops table semantics when display changes, so the
markup carries role="table|rowgroup|row|columnheader|cell" explicitly. */
.eo-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.eo-table{width:100%;border-collapse:collapse;background:var(--eo-surface);font-feature-settings:var(--eo-font-features-num)}
.eo-table th,.eo-table td{padding:var(--eo-s-3) var(--eo-s-4);text-align:left;border-bottom:1px solid var(--eo-border)}
.eo-table th{
position:sticky;top:0;z-index:var(--eo-z-sticky-local);
background:var(--eo-surface-sunken);color:var(--eo-text-2);
font-size:var(--eo-fs-sm);font-weight:var(--eo-fw-semibold);
}
.eo-table .eo-num{text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.eo-cell__label{display:none;color:var(--eo-muted);font-size:var(--eo-fs-xs);font-weight:var(--eo-fw-medium)}
@media (max-width:767.98px){
.eo-table,.eo-table tbody,.eo-table tr,.eo-table td{display:block;width:100%}
.eo-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.eo-table tr{
margin-bottom:var(--eo-s-3);padding:var(--eo-s-4);
background:var(--eo-surface);border:1px solid var(--eo-border);border-radius:var(--eo-r-md);
box-shadow:var(--eo-elev-1);
}
.eo-table td{
display:flex;align-items:baseline;justify-content:space-between;gap:var(--eo-s-3);
padding:var(--eo-s-1) 0;border:0;
}
.eo-table .eo-num{text-align:right}
.eo-cell__label{display:block}
}
.eo-amount--in{color:var(--eo-success-fg);font-weight:var(--eo-fw-semibold)}
.eo-amount--out{color:var(--eo-ink);font-weight:var(--eo-fw-semibold)}
/* ── 3.10 Forms ────────────────────────────────────────────────────── */
.eo-form{display:grid;gap:var(--eo-s-5)}
.eo-field{display:grid;gap:var(--eo-s-2)}
.eo-label{font-weight:var(--eo-fw-medium);color:var(--eo-ink);font-size:var(--eo-fs-base)}
.eo-label__optional{color:var(--eo-muted);font-weight:var(--eo-fw-regular);font-size:var(--eo-fs-sm)}
.eo-input,.eo-select,.eo-textarea{
width:100%;min-height:48px;padding:var(--eo-s-3) var(--eo-s-4);
font:inherit;font-size:var(--eo-fs-base);color:var(--eo-ink);
background:var(--eo-surface);
border:1px solid var(--eo-border-strong);border-radius:var(--eo-r-md);
}
.eo-textarea{min-height:120px;line-height:var(--eo-lh-base);resize:vertical}
.eo-input:focus-visible,.eo-select:focus-visible,.eo-textarea:focus-visible{border-color:var(--eo-ink)}
.eo-input[aria-invalid="true"],.eo-textarea[aria-invalid="true"]{border-color:var(--eo-danger-solid);border-width:2px}
.eo-input:disabled,.eo-select:disabled,.eo-textarea:disabled{background:var(--eo-surface-sunken);color:var(--eo-muted)}
.eo-hint{color:var(--eo-muted);font-size:var(--eo-fs-sm)}
.eo-field__error{
display:flex;align-items:center;gap:var(--eo-s-1);
margin:0;color:var(--eo-danger-fg);font-size:var(--eo-fs-sm);font-weight:var(--eo-fw-medium);
}
.eo-field__error svg{width:16px;height:16px;flex:0 0 auto}
/* +91 adornment and the show/hide toggle share one shell. */
.eo-input-group{display:flex;align-items:stretch;
border:1px solid var(--eo-border-strong);border-radius:var(--eo-r-md);background:var(--eo-surface);overflow:hidden}
.eo-input-group:focus-within{border-color:var(--eo-ink);outline:var(--eo-focus-width) solid var(--eo-focus);outline-offset:var(--eo-focus-offset);box-shadow:0 0 0 4px var(--eo-focus-halo)}
.eo-input-group .eo-input{border:0;border-radius:0;min-height:46px}
.eo-input-group .eo-input:focus-visible{outline:0;box-shadow:none}
.eo-input-group__prefix{
display:grid;place-items:center;padding-inline:var(--eo-s-3);
background:var(--eo-surface-sunken);color:var(--eo-text-2);
font-variant-numeric:tabular-nums;font-weight:var(--eo-fw-medium);
border-right:1px solid var(--eo-border);
}
.eo-input-group__action{
display:grid;place-items:center;min-width:48px;
border:0;background:transparent;color:var(--eo-violet-600);cursor:pointer;font:inherit;font-weight:var(--eo-fw-medium);
}
.eo-error-summary{
padding:var(--eo-s-4);margin-bottom:var(--eo-s-5);
background:var(--eo-danger-bg);color:var(--eo-danger-fg);
border:1px solid var(--eo-danger-solid);border-left-width:4px;border-radius:var(--eo-r-md);
}
.eo-error-summary h2{font-size:var(--eo-fs-lg);color:var(--eo-danger-fg);margin-bottom:var(--eo-s-2)}
.eo-error-summary ul{margin:0;padding-left:var(--eo-s-5)}
.eo-error-summary a{color:var(--eo-danger-fg);font-weight:var(--eo-fw-semibold)}
/* ── 3.11 Alerts, states, safety note ──────────────────────────────── */
.eo-alert{
display:flex;gap:var(--eo-s-3);align-items:flex-start;
padding:var(--eo-s-4);border-radius:var(--eo-r-md);
background:var(--eo-neutral-bg);color:var(--eo-neutral-fg);
border:1px solid rgba(15,26,18,.10);
}
.eo-alert svg{flex:0 0 auto;width:20px;height:20px;margin-top:2px}
.eo-alert--success{background:var(--eo-success-bg);color:var(--eo-success-fg)}
.eo-alert--warning{background:var(--eo-warning-bg);color:var(--eo-warning-fg)}
.eo-alert--danger{background:var(--eo-danger-bg);color:var(--eo-danger-fg)}
.eo-alert--info{background:var(--eo-info-bg);color:var(--eo-info-fg)}
.eo-alert__title{margin:0 0 var(--eo-s-1);font-size:var(--eo-fs-base);font-weight:var(--eo-fw-semibold);color:inherit}
.eo-state{
display:grid;justify-items:center;gap:var(--eo-s-3);
padding:var(--eo-s-10) var(--eo-s-5);
text-align:center;
}
.eo-state__icon{
display:grid;place-items:center;width:64px;height:64px;
border-radius:var(--eo-r-pill);background:var(--eo-violet-100);color:var(--eo-violet-700);
}
.eo-state__title{margin:0;font-size:var(--eo-fs-lg)}
.eo-state__body{margin:0;max-width:44ch;color:var(--eo-muted)}
.eo-state--error .eo-state__icon{background:var(--eo-danger-bg);color:var(--eo-danger-fg)}
.eo-state--offline .eo-state__icon,.eo-state--throttled .eo-state__icon{background:var(--eo-warning-bg);color:var(--eo-warning-fg)}
.eo-safety{
display:flex;gap:var(--eo-s-3);align-items:flex-start;
padding:var(--eo-s-3) var(--eo-s-4);
background:var(--eo-warning-bg);color:var(--eo-warning-fg);
border-radius:var(--eo-r-md);
font-size:var(--eo-fs-sm);line-height:var(--eo-lh-base);
}
.eo-safety svg{flex:0 0 auto;width:18px;height:18px;margin-top:2px}
.eo-safety a{color:var(--eo-warning-fg);font-weight:var(--eo-fw-semibold)}
/* ── 3.12 Breadcrumbs ──────────────────────────────────────────────── */
.eo-breadcrumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--eo-s-2);list-style:none;margin:0;padding:0;font-size:var(--eo-fs-sm)}
.eo-breadcrumb li+li::before{content:"›";margin-right:var(--eo-s-2);color:var(--eo-muted)}
.eo-breadcrumb a{color:var(--eo-text-2)}
.eo-breadcrumb [aria-current="page"]{color:var(--eo-muted)}
@media (max-width:767.98px){
.eo-breadcrumb li{display:none}
.eo-breadcrumb li:nth-last-child(2){display:flex;align-items:center;min-height:44px}
.eo-breadcrumb li:nth-last-child(2)::before{content:"‹";margin-right:var(--eo-s-1)}
}
/* ── 3.13 Dialog / bottom sheet / toasts ───────────────────────────── */
.eo-dialog{
width:min(100% - 2rem,34rem);padding:0;
border:0;border-radius:var(--eo-r-xl);
background:var(--eo-surface);color:var(--eo-ink);
box-shadow:var(--eo-elev-4);
}
.eo-dialog::backdrop{background:var(--eo-scrim)}
.eo-dialog__head{display:flex;align-items:flex-start;gap:var(--eo-s-3);padding:var(--eo-s-5) var(--eo-s-5) var(--eo-s-3)}
.eo-dialog__body{padding:0 var(--eo-s-5)}
.eo-dialog__foot{display:flex;flex-wrap:wrap;gap:var(--eo-s-3);justify-content:flex-end;padding:var(--eo-s-5)}
.eo-dialog__close{width:44px;height:44px;margin-left:auto;border:0;border-radius:var(--eo-r-pill);background:transparent;color:var(--eo-ink);cursor:pointer}
@media (max-width:767.98px){
.eo-dialog{
width:100%;max-width:none;margin:0 0 auto;
position:fixed;inset:auto 0 0 0;
max-height:90svh;overflow:auto;
border-radius:var(--eo-r-lg) var(--eo-r-lg) 0 0;
padding-bottom:max(var(--eo-s-4),env(safe-area-inset-bottom));
}
.eo-dialog[open]{animation:eo-sheet-in var(--eo-dur-slow) var(--eo-ease-enter)}
}
.eo-toast-region{
position:fixed;left:0;right:0;bottom:calc(var(--eo-tabbar-space) + var(--eo-s-3));
z-index:var(--eo-z-toast);
display:grid;gap:var(--eo-s-2);justify-items:center;
padding-inline:var(--eo-gutter-x);
pointer-events:none;
}
.eo-toast{
--eo-focus:#fff;--eo-focus-halo:rgba(15,26,18,.9);
pointer-events:auto;
display:flex;align-items:center;gap:var(--eo-s-3);
max-width:34rem;padding:var(--eo-s-3) var(--eo-s-4);
background:var(--eo-ink);color:var(--eo-on-dark);
border-radius:var(--eo-r-md);box-shadow:var(--eo-elev-3);
font-size:var(--eo-fs-sm);
}
.eo-toast.is-out{visibility:hidden;opacity:0;transition:opacity var(--eo-dur-fast) var(--eo-ease-exit),visibility 0s var(--eo-dur-fast)}
/* ── 3.14 Referral share card + copy field + receipt panel ─────────── */
.eo-share{display:grid;gap:var(--eo-s-4);padding:var(--eo-s-5);border-radius:var(--eo-r-lg);
background:var(--eo-violet-50);border:1px solid var(--eo-violet-200)}
.eo-copy{display:flex;gap:var(--eo-s-2);align-items:stretch}
.eo-copy .eo-input{font-variant-numeric:tabular-nums;text-overflow:ellipsis}
.eo-copy__btn{flex:0 0 auto;min-width:48px}
.eo-share__note{margin:0;color:var(--eo-muted);font-size:var(--eo-fs-sm)}
.eo-receipt{
display:grid;gap:var(--eo-s-4);
padding:var(--eo-s-5);
background:var(--eo-surface);border:1px solid var(--eo-border);
border-top:4px solid var(--eo-success-solid);border-radius:var(--eo-r-lg);
box-shadow:var(--eo-elev-1);
}
.eo-receipt__amount{font-size:var(--eo-fs-money-xl);font-weight:var(--eo-fw-bold);line-height:1.05;
font-variant-numeric:tabular-nums lining-nums;font-feature-settings:var(--eo-font-features-num)}
.eo-receipt dl{display:grid;grid-template-columns:auto 1fr;gap:var(--eo-s-2) var(--eo-s-4);margin:0;font-size:var(--eo-fs-sm)}
.eo-receipt dt{color:var(--eo-muted)}
.eo-receipt dd{margin:0;font-weight:var(--eo-fw-medium);font-variant-numeric:tabular-nums}
/* ── 3.15 Balance card (simulated glass - never a real blur) ───────── */
.eo-balance{
display:grid;gap:var(--eo-s-3);
padding:var(--eo-s-6);border-radius:var(--eo-r-xl);
border:1px solid var(--eo-border);
}
.eo-balance__label{margin:0;color:var(--eo-text-2);font-size:var(--eo-fs-sm);font-weight:var(--eo-fw-medium)}
.eo-balance__amount{
margin:0;font-size:var(--eo-fs-money-xl);font-weight:var(--eo-fw-bold);line-height:1.05;
letter-spacing:var(--eo-tracking-tight);
font-variant-numeric:tabular-nums lining-nums;font-feature-settings:var(--eo-font-features-num);
}
.eo-balance__sub{display:flex;flex-wrap:wrap;gap:var(--eo-s-5);margin:0;color:var(--eo-text-2);font-size:var(--eo-fs-sm)}
.eo-balance__actions{display:flex;flex-wrap:wrap;gap:var(--eo-s-3)}
/* ── 3.16 Footer ───────────────────────────────────────────────────── */
.eo-footer{
margin-top:var(--eo-section-y);
padding-bottom:calc(var(--eo-s-6) + env(safe-area-inset-bottom));
background:var(--eo-surface-sunken);color:var(--eo-text-2);
border-top:1px solid var(--eo-border);
}
.eo-footer__grid{display:grid;gap:var(--eo-s-6);grid-template-columns:repeat(2,minmax(0,1fr));padding-block:var(--eo-s-8)}
.eo-footer h2,.eo-footer__title{font-size:var(--eo-fs-sm);font-weight:var(--eo-fw-semibold);color:var(--eo-ink);
text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--eo-s-2)}
.eo-footer ul{list-style:none;margin:0;padding:0}
.eo-footer a{display:flex;align-items:center;min-height:44px;color:var(--eo-text-2);text-decoration:none;font-size:var(--eo-fs-sm)}
.eo-footer a:hover{color:var(--eo-ink);text-decoration:underline}
.eo-footer__legal{
padding-top:var(--eo-s-5);border-top:1px solid var(--eo-border);
color:var(--eo-muted);font-size:var(--eo-fs-xs);line-height:var(--eo-lh-base);
}
@media (min-width:768px){
.eo-footer__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* =====================================================================
4. PAGES
===================================================================== */
/* ── 4.1 Home hero. The H1 is the LCP element and never animates. ──── */
.eo-hero{
padding-block:clamp(2rem,6vw,5rem);
background:
radial-gradient(60rem 30rem at 15% -10%,var(--eo-violet-100),transparent 60%),
radial-gradient(40rem 24rem at 95% 0%,var(--eo-lime-100),transparent 55%),
var(--eo-canvas);
}
.eo-hero__kicker{
display:inline-flex;align-items:center;gap:var(--eo-s-2);
padding:var(--eo-s-1) var(--eo-s-3);margin-bottom:var(--eo-s-4);
background:var(--eo-surface);border:1px solid var(--eo-border-strong);border-radius:var(--eo-r-pill);
font-size:var(--eo-fs-xs);font-weight:var(--eo-fw-semibold);
}
.eo-hero__title{font-size:var(--eo-fs-display);margin-bottom:var(--eo-s-4);max-width:18ch}
.eo-hero__lead{max-width:60ch;font-size:var(--eo-fs-md);color:var(--eo-text-2)}
.eo-hero__cta{display:flex;flex-wrap:wrap;gap:var(--eo-s-3);margin-block:var(--eo-s-5)}
.eo-hero__microcopy{margin:0;color:var(--eo-muted);font-size:var(--eo-fs-sm)}
.eo-orbit{display:block;max-width:100%;height:auto;color:var(--eo-violet-500)}
/* ── 4.2 How it works ──────────────────────────────────────────────── */
.eo-steps{list-style:none;counter-reset:eo-step;margin:0;padding:0;display:grid;gap:var(--eo-s-5)}
.eo-steps>li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--eo-s-4);align-items:start}
.eo-steps>li::before{
counter-increment:eo-step;content:counter(eo-step);
display:grid;place-items:center;width:40px;height:40px;
border-radius:var(--eo-r-pill);background:var(--eo-ink);color:var(--eo-on-dark);
font-weight:var(--eo-fw-bold);font-variant-numeric:lining-nums;
}
/* ── 4.3 Stats band, trust band, CTA band, FAQ ─────────────────────── */
.eo-stats{display:grid;gap:var(--eo-s-4);grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin:0}
.eo-stats div{padding:var(--eo-s-4);background:var(--eo-surface);border:1px solid var(--eo-border);border-radius:var(--eo-r-md)}
.eo-stats dt{color:var(--eo-muted);font-size:var(--eo-fs-sm)}
.eo-stats dd{margin:var(--eo-s-1) 0 0;font-size:var(--eo-fs-lg);font-weight:var(--eo-fw-bold);
font-variant-numeric:tabular-nums lining-nums;font-feature-settings:var(--eo-font-features-num)}
/* Dark surfaces carry the on-dark focus tokens themselves, so any link or
button inside them keeps a visible two-tone ring. */
.eo-band{background:var(--eo-ink);color:var(--eo-on-dark);padding-block:var(--eo-section-y);
--eo-focus:#fff;--eo-focus-halo:rgba(15,26,18,.9)}
.eo-band h2,.eo-band .h2{color:#fff}
.eo-band p{color:#dfe6dc}
.eo-band a:not(.eo-btn):not(.btn){color:#fff}
.eo-faq>details{
background:var(--eo-surface);border:1px solid var(--eo-border);border-radius:var(--eo-r-md);
margin-bottom:var(--eo-s-3);
}
.eo-faq summary{
display:flex;align-items:center;justify-content:space-between;gap:var(--eo-s-3);
min-height:52px;padding:var(--eo-s-3) var(--eo-s-4);
cursor:pointer;font-weight:var(--eo-fw-semibold);list-style:none;
}
.eo-faq summary::-webkit-details-marker{display:none}
.eo-faq summary::after{content:"";width:10px;height:10px;flex:0 0 auto;
border-right:2px solid var(--eo-text-2);border-bottom:2px solid var(--eo-text-2);
transform:rotate(45deg) translateY(-25%);
transition:transform var(--eo-dur-fast) var(--eo-ease-standard)}
.eo-faq details[open] summary::after{transform:rotate(-135deg) translateY(-25%)}
.eo-faq__a{padding:0 var(--eo-s-4) var(--eo-s-4);color:var(--eo-text-2)}
/* ── 4.4 Offer detail ──────────────────────────────────────────────── */
.eo-detail__layout{display:grid;gap:var(--eo-s-6)}
.eo-start-panel{display:grid;gap:var(--eo-s-4);padding:var(--eo-s-5);
background:var(--eo-surface);border:1px solid var(--eo-border);border-radius:var(--eo-r-lg);box-shadow:var(--eo-elev-1)}
/* Mobile: the start bar replaces the tab bar, so only one fixed layer. */
.eo-start-bar{
position:sticky;bottom:0;z-index:var(--eo-z-sticky-local);
display:flex;align-items:center;gap:var(--eo-s-3);
padding:var(--eo-s-3) var(--eo-gutter-x) calc(var(--eo-s-3) + env(safe-area-inset-bottom));
margin-inline:calc(-1*var(--eo-gutter-x));
background:var(--eo-surface);box-shadow:0 -1px 0 rgba(15,26,18,.10),var(--eo-elev-2);
}
.eo-requirements{list-style:none;margin:0;padding:0;display:grid;gap:var(--eo-s-2)}
.eo-requirements li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--eo-s-2);align-items:start}
/* ── 4.5 Auth ──────────────────────────────────────────────────────── */
.eo-auth{display:grid;place-items:center;padding-block:var(--eo-s-8)}
.eo-auth__card{width:min(100%,var(--eo-w-form));padding:var(--eo-s-6);
background:var(--eo-surface);border:1px solid var(--eo-border);border-radius:var(--eo-r-xl);box-shadow:var(--eo-elev-1)}
.eo-stepper{display:flex;gap:var(--eo-s-2);list-style:none;margin:0 0 var(--eo-s-5);padding:0;font-size:var(--eo-fs-sm)}
.eo-stepper li{flex:1;padding-top:var(--eo-s-2);border-top:3px solid var(--eo-border);color:var(--eo-muted)}
.eo-stepper [aria-current="step"]{border-top-color:var(--eo-violet-600);color:var(--eo-ink);font-weight:var(--eo-fw-semibold)}
/* ── 4.6 Legal layout ──────────────────────────────────────────────── */
.eo-legal{display:grid;gap:var(--eo-s-6);padding-block:var(--eo-s-8)}
.eo-legal__meta{color:var(--eo-muted);font-size:var(--eo-fs-sm);font-variant-numeric:tabular-nums}
.eo-legal__summary{padding:var(--eo-s-4);background:var(--eo-violet-50);
border:1px solid var(--eo-violet-200);border-radius:var(--eo-r-md)}
.eo-legal__toc ol{list-style:none;margin:0;padding:0;font-size:var(--eo-fs-sm)}
.eo-legal__toc a{display:flex;align-items:center;min-height:44px;color:var(--eo-text-2);text-decoration:none}
.eo-legal__toc a:hover,.eo-legal__toc [aria-current="true"]{color:var(--eo-ink);font-weight:var(--eo-fw-semibold)}
.eo-prose{max-width:var(--eo-w-prose);font-size:var(--eo-fs-md);line-height:var(--eo-lh-prose)}
.eo-prose h2{margin-top:var(--eo-s-8);scroll-margin-top:calc(var(--eo-nav-h) + var(--eo-s-6))}
.eo-prose h3{margin-top:var(--eo-s-6)}
.eo-prose section{content-visibility:auto;contain-intrinsic-size:auto 600px}
.eo-changelog{font-size:var(--eo-fs-sm);color:var(--eo-text-2)}
/* =====================================================================
5. UTILITIES
===================================================================== */
.eo-money{
font-variant-numeric:tabular-nums lining-nums;
font-feature-settings:var(--eo-font-features-num);
white-space:nowrap;
}
.eo-num-tabular{font-variant-numeric:tabular-nums lining-nums}
.eo-muted{color:var(--eo-muted)}
.eo-text-2{color:var(--eo-text-2)}
.eo-xs{font-size:var(--eo-fs-xs)}
.eo-sm{font-size:var(--eo-fs-sm)}
.eo-lead{font-size:var(--eo-fs-md);color:var(--eo-text-2)}
.eo-display{font-size:var(--eo-fs-display);font-weight:var(--eo-fw-bold);line-height:var(--eo-lh-tight)}
.eo-clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.eo-stack{display:grid;gap:var(--eo-s-4)}
.eo-stack--sm{gap:var(--eo-s-2)}
.eo-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--eo-s-3)}
.eo-elev-1{box-shadow:var(--eo-elev-1)}
.eo-elev-2{box-shadow:var(--eo-elev-2)}
.eo-surface{background:var(--eo-surface)}
.eo-sunken{background:var(--eo-surface-sunken)}
.eo-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.eo-icon{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.eo-icon--sm{width:16px;height:16px}
.eo-icon--lg{width:24px;height:24px}
/* [1/4 !important] Single hard-hiding utility; it must beat Bootstrap's
own display utilities (.d-flex etc. are themselves !important). */
.eo-u-hidden{display:none !important}
/* ── Motion. Transform and opacity only. Reveals are VISIBLE by default:
.is-pending is added by motion.js, so content is never hidden when JS
does not run. ──────────────────────────────────────────────────────── */
[data-eo-reveal]{opacity:1;transform:none}
[data-eo-reveal].is-pending{opacity:0;transform:translateY(12px)}
[data-eo-reveal].is-in{
opacity:1;transform:none;
transition:opacity var(--eo-dur-slow) var(--eo-ease-enter),
transform var(--eo-dur-slow) var(--eo-ease-enter);
transition-delay:min(calc(var(--eo-i,0)*50ms),250ms);
}
@keyframes eo-sheet-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes eo-pulse{0%,100%{transform:scale(1)}40%{transform:scale(1.06)}}
@keyframes eo-fade-in{from{opacity:0}to{opacity:1}}
/* Only on values that actually changed - page load never pulses. */
.is-credited{animation:eo-pulse var(--eo-dur-slower) var(--eo-ease-settle)}
.eo-reveal-receipt{animation:eo-fade-in var(--eo-dur-slow) var(--eo-ease-enter)}
.eo-press:active{transform:scale(.98)}
/* The LCP element never animates, whatever a page author adds. */
[data-eo-lcp],.eo-hero__title{animation:none;transition:none;opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
/* [2,3,4/4 !important] Blanket motion kill - it has to beat every
component and Bootstrap transition, including inline ones. */
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
[data-eo-reveal],[data-eo-reveal].is-pending{opacity:1;transform:none}
.eo-press:active,.eo-btn:active,.eo-offer:active{transform:none}
}
/* ── Forced colours / high contrast ────────────────────────────────── */
@media (forced-colors:active){
.eo-card,.eo-offer,.eo-nav,.eo-tabbar,.eo-dialog,.eo-balance,.eo-receipt,.eo-logo-tile,.eo-simglass{
background:Canvas;color:CanvasText;border:1px solid CanvasText;
box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
}
.eo-pill,.eo-alert,.eo-safety{border:1px solid CanvasText;background:Canvas;color:CanvasText;forced-color-adjust:none}
.eo-pill--reward{background:Canvas;color:CanvasText}
:focus-visible{outline:2px solid Highlight;box-shadow:none}
.eo-tabbar__item[aria-current="page"] .eo-tabbar__icon{background:Highlight;color:HighlightText}
}
/* ── Forced dark (Samsung Internet / Chrome auto-dark) safety net.
color-scheme:only light already opts out; these keep the two surfaces
that engines most often invert readable if it is ignored. ─────────── */
@media (inverted-colors:inverted){
.eo-logo-tile,.eo-offer,.eo-card{filter:none}
}
/* ── Print hand-off lives in eo-print.css (media="print"). ─────────── */
/* ==========================================================================
Notifications (page section)
Replaces the 150-line inline dark-theme block that notifications.php used
to carry, which fought the site's own light theme with !important on
nearly every declaration.
========================================================================== */
.eo-notification {
background: var(--eo-surface, #fff);
color: var(--eo-ink, #0f1a12);
}
.eo-notification:last-child {
border-bottom: 0 !important; /* 7: beats Bootstrap's .border-bottom utility on the final row */
}
.eo-notification__icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
border-radius: var(--eo-r-pill, 999px);
background: var(--eo-canvas, #f6f8f1);
font-size: 1.125rem;
}
.eo-notification p {
margin-bottom: 0;
}
/* ==========================================================================
Support thread (page section, plan R5)
The old page rendered user and support messages in identical bubbles, so a
conversation was unreadable at a glance. Side and colour now carry the
speaker, and the .eo-thread__who label carries it for a screen reader.
========================================================================== */
.eo-thread {
display: flex;
flex-direction: column;
gap: var(--eo-s-3, 0.75rem);
margin: 0;
padding: 0;
}
.eo-thread__item {
display: flex;
}
.eo-thread__item.is-user {
justify-content: flex-end;
}
.eo-thread__bubble {
max-width: min(90%, 40rem);
padding: var(--eo-s-3, 0.75rem) var(--eo-s-4, 1rem);
border-radius: var(--eo-r-md, 14px);
background: var(--eo-canvas, #f6f8f1);
color: var(--eo-ink, #0f1a12);
}
.eo-thread__item.is-user .eo-thread__bubble {
background: var(--eo-violet-50, #f5f2ff);
border-bottom-right-radius: var(--eo-r-xs, 6px);
}
.eo-thread__item.is-support .eo-thread__bubble {
border-bottom-left-radius: var(--eo-r-xs, 6px);
border: 1px solid var(--eo-border, #e3e8e0);
background: var(--eo-surface, #fff);
}
.eo-thread__who {
color: var(--eo-muted, #56625a);
}
.eo-thread__time {
display: block;
color: var(--eo-muted, #56625a);
}
/* Composer stays reachable on a phone without scrolling the whole thread. */
@media (max-width: 767.98px) {
.eo-composer {
position: sticky;
bottom: 0;
padding-top: var(--eo-s-3, 0.75rem);
padding-bottom: max(var(--eo-s-3, 0.75rem), env(safe-area-inset-bottom));
background: var(--eo-surface, #fff);
box-shadow: 0 -8px 16px -12px rgb(15 26 18 / 0.25);
}
}
/* ==========================================================================
Admin shell (plan R5b)
The admin area is the one dark surface in the product (app.css paints it).
Nothing here repaints it - these rules only make the shared system behave
correctly on top of a dark background.
========================================================================== */
/* ── Focus ring on the dark admin surface.
The default two-tone ring is ink + white halo, which is the right way
round on paper and the wrong way round here: the ink outline disappears
into #0a1427. This is the same flip .eo-on-dark already performs, applied
to the admin body so every focusable descendant inherits it. Nothing in
app.css or eo.css suppresses :focus-visible inside /admin - app.css only
restyles it under body:not(.eo-admin-area) - so this is the whole fix. ── */
body.eo-admin-area{--eo-focus:#fff;--eo-focus-halo:rgba(15,26,18,.9)}
/* ── The skip link is the first thing in , so on the admin pages it
renders over the dark nav. Keep it a light chip with ink text, which is
readable on either shell, and keep it above the sticky sidebar. ─────── */
body.eo-admin-area .eo-skip{--eo-focus:var(--eo-ink);--eo-focus-halo:#fff}
/* ── The one place the ring *was* partly suppressed inside /admin:
app.css repaints the settings-page switches with a 3px violet glow at
`body.eo-admin-area .eo-admin-main .form-switch .form-check-input:focus`,
which outspecifies the system's `.form-check-input:focus-visible` halo.
Same selector, later file - the 4px halo comes back with no !important,
and the ink/white outline underneath was never touched. ─────────────── */
body.eo-admin-area .eo-admin-main .form-switch .form-check-input:focus{box-shadow:none}
body.eo-admin-area .eo-admin-main .form-switch .form-check-input:focus-visible{
box-shadow:0 0 0 4px var(--eo-focus-halo);
}
/* ── Admin table density standard ──────────────────────────────────────
One class, one density, used by every table under /admin. It sits on top
of Bootstrap's .table (which app.css already re-colours for the dark
shell), so it inherits colour and borders instead of inventing a second
palette. eo.css loads after Bootstrap and these selectors match its own
specificity, so no !important is needed. */
.eo-admin-table{
--bs-table-bg:transparent;
font-size:var(--eo-fs-sm);
line-height:var(--eo-lh-snug);
margin-bottom:0;
}
/* Same padding on every cell of every admin table: 8px block, 12px inline.
Previously these ranged from .25rem (.table-sm) to .5rem plus ad-hoc
utility classes. */
.eo-admin-table > :not(caption) > * > *{
padding:var(--eo-s-2) var(--eo-s-3);
vertical-align:middle;
}
.eo-admin-table > thead > tr > th{
vertical-align:bottom;
font-size:var(--eo-fs-xs);
font-weight:var(--eo-fw-semibold);
letter-spacing:.06em;
text-transform:uppercase;
white-space:nowrap;
}
.eo-admin-table > tbody > tr > td > small,
.eo-admin-table > tbody > tr > td .small{
font-size:var(--eo-fs-xs);
}
/* Numeric columns: right-aligned, fixed-width digits, never wrapped, so a
column of money reads as a column. Put .eo-num on the | and on every
| in that column. */
.eo-admin-table .eo-num{
text-align:right;
white-space:nowrap;
font-variant-numeric:tabular-nums lining-nums;
font-feature-settings:var(--eo-font-features-num);
}
/* Action cells hold buttons, not data - left-aligned and allowed to wrap. */
.eo-admin-table .eo-admin-table__actions{
white-space:normal;
}
@media (max-width:767.98px){
.eo-admin-table{font-size:var(--eo-fs-xs)}
.eo-admin-table > :not(caption) > * > *{padding:var(--eo-s-2)}
}
/* ==========================================================================
Profile - legal & help block and the sign-out row (plan R5)
========================================================================== */
.eo-profile-legal{margin-top:var(--eo-s-3)}
.eo-profile-legal-list{
list-style:none;
margin:var(--eo-s-3) 0 0;
padding:0;
display:grid;
gap:var(--eo-s-1);
grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.eo-profile-legal-list a{
display:flex;align-items:center;gap:var(--eo-s-3);
padding:var(--eo-s-3);
border-radius:var(--eo-r-sm);
color:var(--eo-ink);
text-decoration:none;
font-weight:var(--eo-fw-medium);
}
.eo-profile-legal-list a:hover{background:var(--eo-surface-sunken);color:var(--eo-ink)}
.eo-profile-legal-list a > .bi{color:var(--eo-muted);flex:0 0 auto}
/* Sign out: its own row under a rule, and the quietest button in the system.
It is not a call to action and must not read as one. */
.eo-profile-signout{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:var(--eo-s-3);
margin-top:var(--eo-s-4);
padding-top:var(--eo-s-4);
border-top:1px solid var(--eo-border);
}
.eo-profile-signout-note{
margin:0;
color:var(--eo-muted);
font-size:var(--eo-fs-sm);
}
.eo-profile-signout .eo-btn--ghost{border-color:var(--eo-border-strong)}
/* ── 3.5b Glass surfaces (R5). Applied on public pages only, via
body.eo-fx-glass. These use the simulated-glass recipe - a gradient plus a
highlight - rather than backdrop-filter, so the live blurred-layer count
stays at one (the sticky nav). Admin is excluded: blur behind dense data
tables hurts legibility. ──────────────────────────────────────────── */
body.eo-fx-glass:not(.eo-admin-area) .eo-offer-card,
body.eo-fx-glass:not(.eo-admin-area) .eo-how-card,
body.eo-fx-glass:not(.eo-admin-area) .eo-legal__toc{
background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(246,248,241,.92));
box-shadow:var(--eo-elev-2),var(--eo-highlight),var(--eo-hairline);
border-color:rgba(255,255,255,.65);
}
body.eo-fx-glass:not(.eo-admin-area) .eo-legal__toc{
border-radius:var(--eo-r-md);
padding:var(--eo-s-4);
}
/* The nav already blurs; give it the same hairline so the two read as one system. */
body.eo-fx-glass:not(.eo-admin-area) .eo-navbar{
box-shadow:var(--eo-glass-hairline),0 4px 16px rgba(47,65,34,.055)!important;
}
|