/* Resolved house design system palette */ :root { --bg: #0E0E0E; --surface: #15201C; --text: #FAFAFA; --text-muted: #A3A099; /*--accent: #A855F7;*/ --accent-hover: #8A46CB; --secondary: #E6B7C1; --line: #211F1B; } order-item{ width: 100%; } /* AItoFigma — shared baseline (hand-authored, not LLM-generated) */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--text, var(--color-text, #1a1a1a)); background: var(--bg, var(--color-bg, #ffffff)); line-height: 1.5; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; } a { color: inherit; } :focus-visible { outline: 2px solid var(--accent, var(--color-focus, #2684ff)); outline-offset: 2px; } .container { width: 100%; max-width: var(--container-max, 1200px); margin-inline: auto; padding-inline: var(--container-pad, 1.25rem); } /* Baseline micro-interaction easing so state changes are never instant/janky. Per-page CSS can still override transition on any element it wants. */ a, button, [role="button"], .btn, input, textarea, select, summary { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease; } /* Smooth page entrance — every page fades/lifts in once on load. Uses `both` fill + a short duration so it degrades cleanly; the reduced-motion block below neutralizes it entirely. */ @keyframes afx-page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /*body { animation: afx-page-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }*/ /* Lazy-loaded images fade in when they decode instead of popping in. Only hidden once global.js has confirmed it's running (.afx-js on ), so a JS failure never leaves images permanently invisible. */ .afx-js img[loading="lazy"] { opacity: 0; transition: opacity 0.4s ease; } .afx-js img[loading="lazy"].afx-loaded { opacity: 1; /*height: 100%;*/ /*width: 100%;*/ /*object-fit: cover;*/ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } body { animation: none; } .afx-js img[loading="lazy"] { opacity: 1; } } /* Scroll-reveal utility (paired with the IntersectionObserver in global.js) */ [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } [data-reveal].is-visible { opacity: 1; transform: none; } /* Preloader mechanics (hand-authored; the loader's own look/internal motion, under #afx-loader, is LLM-generated per project — see resolve_design_system in pipeline/services.py). Only present when a design system was resolved for this run and rendered a loader; on any other build #afx-loader simply doesn't exist and none of this applies. Exact numbers per the STRICT STYLING SPEC section 8 — dismissal fade 650ms ease-out (300ms under prefers-reduced-motion, a deliberate exception to the blanket 0.01ms reduced-motion override below, so the overlay still eases out gently instead of snapping away). */ html.is-loading, html.is-loading body { overflow: hidden; } #afx-loader { position: fixed; inset: 0; z-index: 9999; } #afx-loader.afx-loader-hide { opacity: 0; pointer-events: none; transition: opacity 650ms ease-out; } /* The header/nav's own entrance, triggered the instant `is-loading` is removed from — see the dismissal sequence in global.js. Harmless no-op selector when there's no .site-header (no shared chrome this run). */ @keyframes afx-header-in { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } } html.is-loading .site-header { opacity: 0; } html:not(.is-loading) .site-header { animation: afx-header-in 500ms cubic-bezier(0.22, 0.68, 0.18, 1) both; } @media (prefers-reduced-motion: reduce) { #afx-loader.afx-loader-hide { transition: opacity 300ms ease-out !important; } } /* Themed document scrollbar — replaces the browser default everywhere on the site, not just where an LLM call happened to remember to style it. Webkit (Chrome/Edge/Safari) + Firefox's own scrollbar-color/-width properties. */ html::-webkit-scrollbar { width: 10px; height: 10px; } html::-webkit-scrollbar-track { background: var(--bg, var(--color-bg, #ffffff)); } html::-webkit-scrollbar-thumb { background: var(--line, var(--color-line, #d0d0d0)); border-radius: 999px; border: 2px solid var(--bg, var(--color-bg, #ffffff)); } html::-webkit-scrollbar-thumb:hover { background: var(--accent, var(--color-focus, #2684ff)); } html { scrollbar-width: thin; scrollbar-color: var(--line, var(--color-line, #d0d0d0)) var(--bg, var(--color-bg, #ffffff)); } /* Top-of-page scroll progress bar (see global.js) — a slim fixed strip whose width tracks how far down the document the reader is. Sits above the sticky header (1030) but below the preloader overlay (9999) so it's already hidden behind the loader on first paint and only becomes visible once the loader dismisses. The width change is driven every scroll frame from JS, not a CSS transition, so reduced-motion needs no override here. */ #afx-scroll-progress { position: fixed; top: 0; left: 0; height: 0px; width: 0%; background: var(--accent, var(--color-focus, #2684ff)); z-index: 2000; pointer-events: none; } /* ---- per-page styles below ---- */ /* shared site header */ .site-header{ position:sticky; top:0; z-index:1030; background:#ffffff; border-bottom:1px solid #e5e2dd; font-family:'Instrument Sans', sans-serif; } /* ===== DESKTOP ===== */ .site-header__desktop{ width:100%; } .site-header__inner{ width:100%; max-width:1920px; margin:0 auto; min-height:116px; padding:0 clamp(24px,6vw,240px); display:flex; align-items:center; justify-content:space-between; gap:24px; } .site-header__menu{ display:flex; align-items:center; gap:8px; margin:0; padding:0; list-style:none; flex:1 1 0; } .site-header__link{ display:inline-flex; align-items:center; padding:10px 16px; font-size:14px; font-weight:400; line-height:19.6px; letter-spacing:0; color:#4a463e; text-decoration:none; border-radius:8px; transition:color .2s ease-out, background-color .2s ease-out; position:relative; } .site-header__link:hover, .site-header__link:focus-visible{ color:#211f1b; background:rgba(168,85,247,.06); } .site-header__link:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .site-header__logo{ font-family:'Playfair Display', serif; font-size:17px; font-weight:400; line-height:23.8px; letter-spacing:4.1px; color:#211f1b; text-decoration:none; white-space:nowrap; text-align:center; } .site-header__logo:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .site-header__actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; flex:1 1 0; } .site-header__currency{ position:relative; } .site-header__currency-btn{ display:flex; align-items:center; gap:8px; height:40px; padding:0 16px; background:#ffffff; border:1px solid #e5e2dd; border-radius:999px; font-family:inherit; font-size:13px; font-weight:400; line-height:18.2px; letter-spacing:.3px; color:#211f1b; cursor:pointer; transition:border-color .2s ease-out; } .site-header__currency-btn::after{ display:none; } .site-header__currency-btn:hover, .site-header__currency-btn:focus-visible{ border-color:var(--accent); } .site-header__currency-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .site-header__chevron{ flex:0 0 auto; } .site-header__signup-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 20px; background:#e6b7c1; border-radius:999px; font-size:13px; font-weight:500; line-height:18.2px; letter-spacing:0; color:#211f1b; text-decoration:none; overflow:visible; transition:background-color .2s ease-out, transform .2s ease-out; } .site-header__signup-btn:hover{ background:#dba2ae; } .site-header__signup-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .afx-trace-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; } .afx-trace-svg rect{ fill:none; stroke:var(--accent); stroke-width:2; opacity:0; } .afx-trace-svg.is-active rect{ opacity:1; animation:afx-chrome-trace-draw .65s ease-out forwards; } @keyframes afx-chrome-trace-draw{ from{ stroke-dashoffset: var(--afx-chrome-dash, 300); opacity:1; } to{ stroke-dashoffset:0; opacity:1; } } /* ===== MOBILE ===== */ .site-header__mobile{ width:100%; flex-direction:column; background:#ffffff; } .site-header__mobile-bar{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; min-height:72px; } .site-header__toggler{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:36px; height:36px; padding:0; border:1px solid #e5e2dd; border-radius:8px; background:#ffffff; } .site-header__toggler-bar{ display:block; width:18px; height:2px; margin:0 auto; background:#211f1b; } .site-header__toggler:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .site-header__logo--mobile{ font-size:15px; } .site-header__mobile-spacer{ width:36px; } .site-header__mobile-menu{ border-top:1px solid #e5e2dd; padding:16px 20px 24px; max-height:calc(100vh - 72px); overflow-y:auto; } .site-header__mobile-links{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; } .site-header__mobile-links a{ display:block; padding:12px 4px; font-size:16px; color:#4a463e; text-decoration:none; border-bottom:1px solid #f0eee9; } .site-header__mobile-links a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .site-header__mobile-actions{ display:flex; flex-direction:column; gap:12px; padding-top:8px; } .site-header__currency--mobile .site-header__currency-btn{ width:100%; justify-content:space-between; } .site-header__mobile-login{ display:inline-flex; align-items:center; padding:10px 4px; font-size:16px; color:#4a463e; text-decoration:none; } .site-header__mobile-login:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .site-header__signup-btn--mobile{ width:100%; } @media (min-width:768px){ .site-header__mobile-menu{ display:none !important; } } @media (max-width:768px){ .page-checkout-payment .billing-form{ border: none !important; } } /* shared site footer */ .site-footer{ background:#15201c; font-family:'Instrument Sans', sans-serif; color:#ffffff; } .site-footer__inner{ width:100%; max-width:1920px; margin:0 auto; padding:96px clamp(24px,6vw,240px) 48px; display:flex; flex-direction:column; gap:80px; } .site-footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:48px; } .site-footer__brand{ display:flex; flex-direction:column; gap:20px; max-width:420px; flex:1 1 320px; } .site-footer__logo{ font-family:'Playfair Display', serif; font-size:17px; font-weight:400; line-height:23.8px; letter-spacing:4.1px; color:#ffffff; text-decoration:none; width:fit-content; } .site-footer__logo:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .site-footer__desc{ margin:0; font-size:17px; font-weight:400; line-height:26.3px; color:rgba(255,255,255,.7); } .site-footer__address{ margin:0; font-size:14px; font-weight:400; line-height:21px; color:rgba(255,255,255,.55); } .site-footer__columns{ display:flex; flex-wrap:wrap; gap:48px 96px; flex:2 1 480px; justify-content:flex-end; } .site-footer__column{ display:flex; flex-direction:column; gap:20px; min-width:110px; } .site-footer__meta{ font-size:13px; font-weight:500; line-height:18.2px; letter-spacing:1px; color:rgba(255,255,255,.55); } .site-footer__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; } .site-footer__links a{ font-size:17px; font-weight:400; line-height:26.3px; color:rgba(255,255,255,.85); text-decoration:none; display:inline-block; transition:color .2s ease-out, transform .2s ease-out; } .site-footer__links a:hover, .site-footer__links a:focus-visible{ color:#ffffff; } .site-footer__links a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .site-footer__rule{ border:none; border-top:1px solid rgba(255,255,255,.12); margin:0; } .site-footer__bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; } .site-footer__legal{ display:flex; flex-wrap:wrap; align-items:center; gap:32px; } .site-footer__copy{ font-size:14px; line-height:21px; color:rgba(255,255,255,.55); } .site-footer__legal a{ font-size:14px; line-height:21px; color:rgba(255,255,255,.85); text-decoration:none; transition:color .2s ease-out, transform .2s ease-out; } .site-footer__legal a:hover, .site-footer__legal a:focus-visible{ color:#ffffff; } .site-footer__legal a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .site-footer__payments{ width:178px; height:26px; object-fit:contain; } @media (max-width:576px){ .site-footer__columns{ justify-content:flex-start; gap:32px; } .site-footer__column{ min-width:45%; } } /* preloader */ #afx-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--bg); top: 0px; left: 0px; right: 0px; height: 100vh; } .afx-loader__inner { display: flex; flex-direction: column; align-items: center; } /* ICON / MARK — aperture iris */ .afx-loader__mark { width: 84px; height: 84px; margin-bottom: 24px; } .afx-blades { transform-origin: 50px 50px; animation: afx-iris-settle 2000ms cubic-bezier(0.5, 0, 0.25, 1) infinite; } .afx-blade { fill: var(--accent); opacity: 0.88; } .afx-blade:nth-child(2n) { fill: var(--secondary); opacity: 0.7; } .afx-iris-center { fill: var(--accent-hover); } @keyframes afx-iris-settle { 0% { transform: rotate(0deg) scale(0.9); } 25% { transform: rotate(22deg) scale(1); } 50% { transform: rotate(38deg) scale(0.94); } 75% { transform: rotate(50deg) scale(1.03); } 100% { transform: rotate(60deg) scale(0.9); } } /* WORDMARK */ .afx-loader__wordmark { margin-bottom: 20px; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 25px; color: var(--text); display: flex; } .afx-loader__wordmark span { display: inline-block; opacity: 0; transform: translateY(60%); animation: afx-letter-reveal 500ms cubic-bezier(0.22, 0.68, 0.18, 1) forwards; } @keyframes afx-letter-reveal { to { opacity: 1; transform: translateY(0); } } /* PROGRESS BAR */ .afx-loader__track { width: 220px; height: 3px; border-radius: 3px; background-color: rgba(33, 31, 27, 0.2); overflow: hidden; margin-bottom: 12px; } .afx-loader__fill { height: 100%; width: 0%; background: var(--accent); animation: afx-fill-progress 2000ms forwards; } @keyframes afx-fill-progress { 0% { width: 0%; } 70% { width: 82%; } 100% { width: 100%; } } /* STATUS TEXT */ .afx-loader__status { font-family: 'Instrument Sans', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); transition: opacity 200ms ease; } @media (prefers-reduced-motion: reduce) { .afx-blades { animation: none; } .afx-loader__wordmark span { animation: none; opacity: 1; transform: translateY(0); } } /* page: legal template + 404 */ .page-legal-template-404 { --legal-template-404-bg: #ffffff; --legal-template-404-text: #211f1b; --legal-template-404-muted: #4a463e; --legal-template-404-accent: #e6b7c1; --legal-template-404-line: #e5e2dd; background: var(--legal-template-404-bg); color: var(--legal-template-404-text); font-family: 'Instrument Sans', sans-serif; overflow-x: hidden; } .page-legal-template-404 a { color: inherit; text-decoration: none; } .page-legal-template-404 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- Scroll reveal ---------- */ .page-legal-template-404 [data-reveal] { opacity: 0.35; transform: scale(0.85); filter: blur(6px); transition: opacity 450ms ease-out, transform 450ms ease-out, filter 450ms ease-out; } .page-legal-template-404 [data-reveal].is-visible { opacity: 1; transform: scale(1); filter: blur(0); } /* ---------- Legal hero ---------- */ .page-legal-template-404 .legal-hero { padding: 64px 24px 40px; position: relative; } @media (min-width: 992px) { .page-legal-template-404 .legal-hero { padding: 104px 240px 56px; } } .page-legal-template-404 .legal-hero__title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 34px; line-height: 42.5px; letter-spacing: -0.3px; margin: 0 0 16px; } @media (min-width: 992px) { .page-legal-template-404 .legal-hero__title { font-size: 68px; line-height: 81.6px; letter-spacing: -0.7px; } } .page-legal-template-404 .legal-hero__meta { font-size: 14px; line-height: 21px; color: var(--legal-template-404-muted); margin: 0; } /* ---------- Legal body ---------- */ .page-legal-template-404 .legal-body { padding: 0 24px 64px; } @media (min-width: 992px) { .page-legal-template-404 .legal-body { padding: 0 240px 120px; } } .page-legal-template-404 .legal-index { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 12px; } .page-legal-template-404 .legal-index__eyebrow { font-size: 13px; font-weight: 500; line-height: 18.2px; color: var(--legal-template-404-muted); margin: 0; } .page-legal-template-404 .legal-index__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .page-legal-template-404 .legal-index__list a { display: inline-block; font-size: 17px; line-height: 26.3px; color: var(--legal-template-404-muted); transition: color 200ms ease-out, transform 200ms ease-out; } .page-legal-template-404 .legal-index__list a:hover, .page-legal-template-404 .legal-index__list a:focus-visible { color: var(--legal-template-404-text); } .page-legal-template-404 .legal-clauses { display: flex; flex-direction: column; gap: 28px; } @media (min-width: 992px) { .page-legal-template-404 .legal-clauses { gap: 40px; } } .page-legal-template-404 .legal-clause h2 { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 21px; line-height: 27.3px; margin: 0 0 10px; } @media (min-width: 992px) { .page-legal-template-404 .legal-clause h2 { font-size: 30px; line-height: 37.5px; margin: 0 0 12px; } } .page-legal-template-404 .legal-clause p { font-size: 17px; line-height: 26.3px; color: var(--legal-template-404-muted); margin: 0; } /* ---------- 404 section ---------- */ .page-legal-template-404 .section-404 { position: relative; padding: 80px 24px; overflow: hidden; --sx: 50%; --sy: 50%; } /*.page-legal-template-404 .section-404::before {*/ /* content: "";*/ /* position: absolute;*/ /* inset: 0;*/ /* pointer-events: none;*/ /* background: radial-gradient(circle at var(--sx) var(--sy), rgba(230, 183, 193, 0.35), transparent 55%);*/ /* transition: background 200ms ease-out;*/ /* z-index: 0;*/ /*}*/ .page-legal-template-404 .section-404 .container { position: relative; z-index: 1; } @media (min-width: 992px) { .page-legal-template-404 .section-404 { padding: 180px 240px; } } .page-legal-template-404 .section-404__title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 34px; line-height: 42.5px; letter-spacing: -0.3px; margin: 0 0 20px; } @media (min-width: 992px) { .page-legal-template-404 .section-404__title { font-size: 68px; line-height: 81.6px; letter-spacing: -0.7px; margin: 0 0 24px; } } .page-legal-template-404 .section-404__text { font-size: 17px; line-height: 26.3px; color: var(--legal-template-404-muted); max-width: 327px; margin: 0 auto 20px; } @media (min-width: 992px) { .page-legal-template-404 .section-404__text { font-size: 19px; line-height: 29.4px; max-width: 700px; margin: 0 auto 24px; } } .page-legal-template-404 .section-404__actions { display: flex; flex-direction: column; align-items: center; gap: 20px; } @media (min-width: 992px) { .page-legal-template-404 .section-404__actions { flex-direction: row; justify-content: center; gap: 24px; } } .page-legal-template-404 .btn-404-primary { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 17px 30px; border-radius: 999px; background: var(--legal-template-404-accent); color: var(--legal-template-404-text); font-size: 16px; font-weight: 500; line-height: 22.4px; transition: transform 250ms ease-out, background 250ms ease-out, box-shadow 250ms ease-out; } @media (min-width: 992px) { .page-legal-template-404 .btn-404-primary { width: auto; } } .page-legal-template-404 .btn-404-primary:hover, .page-legal-template-404 .btn-404-primary:focus-visible { background: #d99fae; transform: translateY(-1px); } .page-legal-template-404 .btn-trace { position: absolute; inset: 0; pointer-events: none; } .page-legal-template-404 .btn-trace svg rect { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 566; stroke-dashoffset: 566; opacity: 0; } .page-legal-template-404 .btn-trace.is-active svg rect { animation: legal-template-404-legal-template-404-trace 650ms ease-out forwards; } @keyframes legal-template-404-legal-template-404-trace { 0% { stroke-dashoffset: 566; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } } .page-legal-template-404 .link-arrow-404 { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; line-height: 26.3px; color: var(--legal-template-404-text); padding-top: 8px; transition: gap 200ms ease-out, color 200ms ease-out; } .page-legal-template-404 .link-arrow-404:hover, .page-legal-template-404 .link-arrow-404:focus-visible { gap: 16px; } .page-legal-template-404 .link-arrow-404__icon { transition: transform 200ms ease-out; } .page-legal-template-404 .link-arrow-404:hover .link-arrow-404__icon { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .page-legal-template-404 .btn-trace.is-active svg rect { animation: none; opacity: 0; } } /* page: accounts pages */ .page-accounts-pages{ --ap-bg:#ffffff; --ap-surface:#f7edef; --ap-text:#211f1b; --ap-muted:#4a463e; --ap-line:#e5e2dd; --ap-pink:#e6b7c1; --ap-dark:#15201c; background:var(--ap-bg); } .page-accounts-pages .ap-section{ padding:80px 0 120px; } @media (max-width:991px){ .page-accounts-pages .ap-section{padding:32px 0;} } .page-accounts-pages .ap-sidebar-label{ font-family:'Instrument Sans', sans-serif; font-size:13px;line-height:18.2px;font-weight:500; color:var(--ap-muted);margin:0; } .page-accounts-pages .ap-hairline{ border:0;border-top:1px solid var(--ap-line);margin:8px 0 16px; } .page-accounts-pages .ap-sidebar-nav{ display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:4px; scrollbar-width:thin; } @media (hover:none){ .page-accounts-pages .ap-sidebar-nav::-webkit-scrollbar{height:0;width:0;} } @media (min-width:992px){ .page-accounts-pages .ap-sidebar-nav{flex-direction:column;overflow:visible;gap:4px;} } .page-accounts-pages .ap-nav-link{ font-family:'Instrument Sans', sans-serif; font-size:15px;line-height:23.2px;font-weight:400; color:var(--ap-muted);background:transparent;border:none; border-radius:999px;padding:10px 14px;white-space:nowrap;cursor:pointer; transition:background-color .2s ease-out, color .2s ease-out, transform .2s ease-out; } .page-accounts-pages .ap-nav-link.active, .page-accounts-pages .ap-nav-link:hover{ background:var(--ap-surface);color:var(--ap-text); } .page-accounts-pages .ap-nav-link:focus-visible{ outline:2px solid var(--ap-pink);outline-offset:2px; } @media (min-width:992px){ .page-accounts-pages .ap-nav-link{ border-radius:8px;width:100%;text-align:left;padding:14px 16px; font-size:17px;line-height:26.3px; } .page-accounts-pages .ap-nav-link.active{font-weight:500;} } .page-accounts-pages .ap-h1{ font-family:'Playfair Display', serif;font-weight:400; font-size:44px;line-height:55px;color:var(--ap-text);margin:0; } .page-accounts-pages .ap-h2{ font-family:'Playfair Display', serif;font-weight:400; font-size:30px;line-height:37.5px;color:var(--ap-text);margin:0; } .page-accounts-pages .ap-h3{ font-family:'Playfair Display', serif;font-weight:600; font-size:24px;line-height:30px;color:var(--ap-text);margin:0 0 20px; } .page-accounts-pages .ap-lead{ font-family:'Instrument Sans', sans-serif; font-size:19px;line-height:29.4px;color:var(--ap-muted);margin-top:16px; } .page-accounts-pages .ap-caption{ font-family:'Instrument Sans', sans-serif;font-size:14px;line-height:21px; color:var(--ap-muted);margin-top:16px; } @media (max-width:991px){ .page-accounts-pages .ap-h1{font-size:26px;line-height:32.5px;} .page-accounts-pages .ap-h2{font-size:21px;line-height:27.3px;} .page-accounts-pages .ap-lead{font-size:17px;line-height:26.3px;} } .page-accounts-pages .ap-balance{ background:var(--ap-surface);border-radius:12px;padding:32px; display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap; } @media (max-width:767px){ .page-accounts-pages .ap-balance{padding:24px;flex-direction:column;align-items:flex-start;} } .page-accounts-pages .ap-balance-label{ font-family:'Instrument Sans', sans-serif;font-size:13px;line-height:18.2px; font-weight:500;color:var(--ap-muted);margin:0 0 8px; } .page-accounts-pages .ap-balance-figure{ font-family:'Playfair Display', serif;font-weight:700; font-size:56px;line-height:67.2px;color:var(--ap-text);margin:0 0 8px; } @media (max-width:767px){ .page-accounts-pages .ap-balance-figure{font-size:34px;line-height:40.8px;} } .page-accounts-pages .ap-balance-desc{ font-family:'Instrument Sans', sans-serif;font-size:17px;line-height:26.3px; color:var(--ap-muted);margin:0; } .page-accounts-pages .ap-btn-primary{ position:relative;display:inline-flex;align-items:center;justify-content:center; background:var(--ap-pink);color:var(--ap-text);border:none;border-radius:999px; padding:17px 30px;font-family:'Instrument Sans', sans-serif;font-size:16px; line-height:22.4px;font-weight:500;cursor:pointer;overflow:visible; transition:background-color .25s ease-out, transform .25s ease-out, box-shadow .25s ease-out; } .page-accounts-pages .ap-btn-primary:hover{background:#dda6b3;transform:translateY(-2px);box-shadow:0 8px 20px rgba(33,31,27,.12);} .page-accounts-pages .ap-btn-primary:focus-visible{outline:2px solid var(--ap-dark);outline-offset:2px;} .page-accounts-pages .ap-btn-trace{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;} .page-accounts-pages .ap-btn-trace rect{fill:none;stroke:var(--ap-dark);stroke-width:2;stroke-dasharray:300;stroke-dashoffset:300;opacity:0;} .page-accounts-pages .ap-btn-primary.is-tracing .ap-btn-trace rect{animation:accounts-pages-ap-trace 650ms ease-out forwards;} @keyframes accounts-pages-ap-trace{0%{stroke-dashoffset:300;opacity:1;}100%{stroke-dashoffset:0;opacity:0;}} .page-accounts-pages .ap-table{width:100%;border-collapse:collapse;} .page-accounts-pages .ap-table td, .page-accounts-pages .ap-table th{ font-family:'Instrument Sans', sans-serif;padding:12px 8px; border-bottom:1px solid var(--ap-line);vertical-align:middle; } .page-accounts-pages .ap-table td:first-child, .page-accounts-pages .ap-table th:first-child{padding-left:0;} .page-accounts-pages .ap-table td:last-child, .page-accounts-pages .ap-table th:last-child{padding-right:0;} .page-accounts-pages .ap-table--head thead th{ font-size:13px;line-height:18.2px;font-weight:500;color:var(--ap-muted);text-align:left; } .page-accounts-pages .ap-table--activity td{font-size:17px;line-height:26.3px;color:var(--ap-text);} .page-accounts-pages .ap-table--activity .ap-cell-date, .page-accounts-pages .ap-table--activity .ap-cell-ref{color:var(--ap-muted);font-size:14px;line-height:21px;white-space:nowrap;} .page-accounts-pages .ap-table--activity .ap-cell-desc{font-weight:500;width:100%;} .page-accounts-pages .ap-table--head tbody td{font-size:17px;line-height:26.3px;color:var(--ap-text);} .page-accounts-pages .ap-link{color:var(--ap-text);font-weight:500;text-decoration:none;transition:color .2s ease-out;} .page-accounts-pages .ap-link:hover{color:var(--ap-pink);text-decoration:underline;} .page-accounts-pages .ap-card{transition:transform .2s ease-out;} .page-accounts-pages .ap-card-media{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:348/260;perspective:800px;transform-style:preserve-3d;} .page-accounts-pages .ap-card-media img{width:100%;height:100%;object-fit:cover;display:block;} .page-accounts-pages .ap-chip{ position:absolute;top:12px;right:12px;background:var(--ap-pink);color:var(--ap-text); font-family:'Instrument Sans', sans-serif;font-size:14px;line-height:21px; padding:6px 10px;border-radius:999px; } .page-accounts-pages .ap-card-title{ font-family:'Instrument Sans', sans-serif;font-size:17px;line-height:26.3px; font-weight:500;color:var(--ap-text);margin:16px 0 6px; } .page-accounts-pages .ap-card-meta{ font-family:'Instrument Sans', sans-serif;font-size:14px;line-height:21px;color:var(--ap-muted);margin:0; } .page-accounts-pages .ap-pagination{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px; padding-top:24px;border-top:1px solid var(--ap-line);margin-top:24px; } .page-accounts-pages .ap-pagination-info{ font-family:'Instrument Sans', sans-serif;font-size:14px;line-height:21px;color:var(--ap-muted);margin:0; } .page-accounts-pages .ap-pagination-controls{display:flex;align-items:center;gap:8px;} .page-accounts-pages .ap-page-btn{ width:48px;height:48px;border-radius:999px;border:1px solid var(--ap-line); background:var(--ap-dark);color:#fff;display:inline-flex;align-items:center;justify-content:center; opacity:.35;backdrop-filter:blur(8px);cursor:not-allowed; transition:opacity .2s ease-out; } .page-accounts-pages .ap-page-active{ width:48px;height:48px;border-radius:999px;background:var(--ap-text);color:#fff; display:inline-flex;align-items:center;justify-content:center; font-family:'Instrument Sans', sans-serif;font-size:13px;font-weight:500;letter-spacing:1px; } .page-accounts-pages .ap-rewards-status{ background:var(--ap-surface);border-radius:8px;padding:32px; display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:32px; } .page-accounts-pages .ap-tier-name{ font-family:'Playfair Display', serif;font-size:30px;line-height:37.5px;color:var(--ap-text);margin:0 0 8px; } .page-accounts-pages .ap-rewards-spend{text-align:right;} @media (max-width:575px){.page-accounts-pages .ap-rewards-spend{text-align:left;}} .page-accounts-pages .ap-ladder{ display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ap-line);margin-top:20px; } @media (max-width:767px){.page-accounts-pages .ap-ladder{grid-template-columns:1fr;}} .page-accounts-pages .ap-ladder-step{padding:24px;border-right:1px solid var(--ap-line);} .page-accounts-pages .ap-ladder-step:last-child{border-right:none;} @media (max-width:767px){ .page-accounts-pages .ap-ladder-step{border-right:none;border-bottom:1px solid var(--ap-line);} .page-accounts-pages .ap-ladder-step:last-child{border-bottom:none;} } .page-accounts-pages .ap-ladder-step.current{background:var(--ap-surface);} .page-accounts-pages .ap-ladder-eyebrow{ font-family:'Instrument Sans', sans-serif;font-size:12px;line-height:16.8px;font-weight:500; letter-spacing:.2px;color:rgba(74,70,62,.72);margin:0 0 10px; } .page-accounts-pages .ap-ladder-tier{ font-family:'Playfair Display', serif;font-weight:600;font-size:24px;line-height:30px; color:var(--ap-text);margin:0 0 10px; } .page-accounts-pages .ap-ladder-sub{ font-family:'Instrument Sans', sans-serif;font-size:14px;line-height:21px;color:var(--ap-muted);margin:0 0 10px; } .page-accounts-pages .ap-ladder-bonus{ font-family:'Instrument Sans', sans-serif;font-size:17px;line-height:26.3px;color:var(--ap-text);margin:0; } .page-accounts-pages .ap-badge-tier{ display:inline-flex;align-items:center;background:var(--ap-pink);color:var(--ap-text); border-radius:999px;padding:0 12px;height:26px;font-family:'Instrument Sans', sans-serif; font-size:12px;font-weight:500;margin-bottom:10px; } .page-accounts-pages .ap-settings-block .ap-h3{margin-bottom:0;} .page-accounts-pages .ap-form{margin-top:20px;} .page-accounts-pages .ap-field-label{ font-family:'Instrument Sans', sans-serif;font-size:13px;line-height:18.2px;font-weight:500; color:var(--ap-muted);margin-bottom:8px;display:block; } .page-accounts-pages .ap-field-box{ background:var(--ap-surface);border:1px solid transparent;border-radius:999px;padding:0 20px; height:56px;width:100%;font-family:'Instrument Sans', sans-serif;font-size:17px; color:var(--ap-text);display:flex;align-items:center;transition:border-color .2s ease-out, box-shadow .2s ease-out; } input.ap-field-box, select.ap-field-box{appearance:none;-webkit-appearance:none;} .page-accounts-pages .ap-field-box:focus, .page-accounts-pages .ap-field-box:focus-within{ outline:2px solid var(--ap-pink);outline-offset:2px; } .page-accounts-pages .ap-field-box--icon{gap:12px;justify-content:space-between;} .page-accounts-pages .ap-field-box--icon input{ border:none;background:transparent;flex:1;height:100%;font:inherit;color:inherit;padding:0; } .page-accounts-pages .ap-field-box--icon input:focus{outline:none;} .page-accounts-pages .ap-eye{ border:none;background:transparent;color:var(--ap-text);opacity:.65;cursor:pointer; display:flex;align-items:center;padding:4px;transition:opacity .2s ease-out; } .page-accounts-pages .ap-eye:hover, .page-accounts-pages .ap-eye:focus-visible{opacity:1;} .page-accounts-pages input:invalid.ap-field-box, .page-accounts-pages input.ap-field-box:invalid{ box-shadow:none; } .page-accounts-pages .invalid-feedback{ font-family:'Instrument Sans', sans-serif;font-size:13px;color:#b3455a;display:none;margin-top:6px; } .page-accounts-pages input.ap-field-box:invalid:not(:placeholder-shown) ~ .invalid-feedback, .page-accounts-pages .ap-field-box:has(input:invalid:not(:placeholder-shown)) + .invalid-feedback{ display:block; } /* data-reveal refinement inherited from global.js; scoped presence only */ .page-accounts-pages [data-reveal]{will-change:transform, opacity, filter;} @media (prefers-reduced-motion: reduce){ .page-accounts-pages .ap-btn-primary.is-tracing .ap-btn-trace rect{animation:none;} } /* page: login + sign up */ .page-login-sign-up { --lsu-accent: var(--accent); background: #ffffff; color: #211f1b; font-family: "Instrument Sans", sans-serif; } /* ---------- layout ---------- */ .page-login-sign-up .auth-row { display: flex; flex-direction: column; align-items: stretch; } @media (min-width: 992px) { .page-login-sign-up .auth-row { flex-direction: row; } } .page-login-sign-up .auth-media { position: relative; flex: 1 1 50%; height: 240px; overflow: hidden; } @media (min-width: 992px) { .page-login-sign-up .auth-media { height: auto; align-self: stretch; } } .page-login-sign-up .auth-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .page-login-sign-up .media-caption { position: absolute; left: 24px; bottom: 24px; background: #ffffff; color: #4a463e; font-size: 14px; line-height: 21px; padding: 8px 14px; border-radius: 999px; white-space: nowrap; } @media (min-width: 992px) { .page-login-sign-up .media-caption { left: 40px; bottom: 40px; padding: 10px 18px; } } .page-login-sign-up .auth-panel { flex: 1 1 50%; display: flex; align-items: center; justify-content: center; background: #ffffff; padding: 48px 24px 64px 24px; } @media (min-width: 992px) and (max-width: 1199.98px) { .page-login-sign-up .auth-panel { padding: 64px 48px; } } @media (min-width: 1200px) { .page-login-sign-up .auth-panel { padding: 120px; } } .page-login-sign-up .auth-column { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 24px; } @media (min-width: 992px) { .page-login-sign-up .auth-column { gap: 32px; } } .page-login-sign-up .auth-head { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 992px) { .page-login-sign-up .auth-head { gap: 12px; } } .page-login-sign-up .auth-head h1, .page-login-sign-up .auth-head h2 { font-family: "Playfair Display", serif; font-weight: 400; color: #211f1b; margin: 0; font-size: 26px; line-height: 32.5px; } @media (min-width: 992px) { .page-login-sign-up .auth-head h1, .page-login-sign-up .auth-head h2 { font-size: 44px; line-height: 55px; } } .page-login-sign-up .auth-sub { font-size: 17px; line-height: 26.3px; color: #4a463e; margin: 0; } .page-login-sign-up .auth-form { display: flex; flex-direction: column; gap: 20px; } .page-login-sign-up .auth-field { display: flex; flex-direction: column; gap: 8px; } .page-login-sign-up .auth-field-label { font-size: 13px; font-weight: 500; line-height: 18.2px; color: #4a463e; margin: 0; } .page-login-sign-up .auth-field-box { display: flex; align-items: center; gap: 12px; background: #f7edef; border-radius: 999px; padding: 0 20px; height: 56px; transition: box-shadow 200ms ease-out; } .page-login-sign-up .auth-field-box:focus-within { box-shadow: 0 0 0 2px var(--lsu-accent); } .page-login-sign-up .auth-input { border: none; background: transparent; outline: none; flex: 1 1 auto; font-family: "Instrument Sans", sans-serif; font-size: 17px; line-height: 26.3px; color: #211f1b; min-width: 0; } .page-login-sign-up .auth-input::placeholder { color: rgba(33, 31, 27, 0.55); } .page-login-sign-up .auth-input:invalid:not(:placeholder-shown) { color: #b23b3b; } .page-login-sign-up .eye-toggle { background: none; border: none; padding: 0; width: 16px; height: 16px; flex: 0 0 auto; color: rgba(33, 31, 27, 0.55); cursor: pointer; transition: color 200ms ease-out, transform 200ms ease-out; } .page-login-sign-up .eye-toggle:hover, .page-login-sign-up .eye-toggle:focus-visible { color: #211f1b; transform: scale(1.1); } .page-login-sign-up .eye-toggle svg { width: 100%; height: 100%; fill: currentColor; } .page-login-sign-up .invalid-feedback { display: none; font-size: 12px; color: #b23b3b; } .page-login-sign-up .was-validated .auth-input:invalid ~ .invalid-feedback, .page-login-sign-up .was-validated .auth-field-box:has(:invalid) + .invalid-feedback { display: block; } .page-login-sign-up .auth-options { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .page-login-sign-up .auth-checkbox { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; line-height: 21px; color: #4a463e; } .page-login-sign-up .auth-checkbox--wrap { align-items: flex-start; } .page-login-sign-up .auth-checkbox input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; } .page-login-sign-up .checkbox-box { width: 20px; height: 20px; flex: 0 0 auto; border: 1px solid #e5e2dd; border-radius: 4px; background: #ffffff; display: inline-block; position: relative; transition: border-color 200ms ease-out, background 200ms ease-out; } .page-login-sign-up .checkbox-box--lg { width: 24px; height: 24px; } .page-login-sign-up .auth-checkbox input:checked + .checkbox-box { background: var(--lsu-accent); border-color: var(--lsu-accent); } .page-login-sign-up .auth-checkbox input:checked + .checkbox-box::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .page-login-sign-up .auth-checkbox input:focus-visible + .checkbox-box { outline: 2px solid var(--lsu-accent); outline-offset: 2px; } .page-login-sign-up .link-plain { font-size: 14px; line-height: 21px; color: #211f1b; text-decoration: none; transition: color 200ms ease-out, transform 200ms ease-out; display: inline-block; } .page-login-sign-up .link-plain:hover, .page-login-sign-up .link-plain:focus-visible { color: var(--lsu-accent); } .page-login-sign-up .link-plain:focus-visible { outline: 2px solid var(--lsu-accent); outline-offset: 2px; } .page-login-sign-up .recaptcha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #faf8f5; border: 1px solid #e5e2dd; border-radius: 8px; padding: 16px; } .page-login-sign-up .recaptcha-mark { display: flex; flex-direction: column; gap: 2px; margin-left: auto; align-items: flex-start; } .page-login-sign-up .recaptcha-name { font-size: 14px; color: #4a463e; } .page-login-sign-up .recaptcha-legal { font-size: 12px; color: #4a463e; } .page-login-sign-up .auth-footnote { font-size: 17px; line-height: 26.3px; color: #4a463e; margin: 0; } .page-login-sign-up .auth-footnote--sm { font-size: 14px; line-height: 21px; } .page-login-sign-up .auth-footnote--muted { color: #4a463e; } @media (max-width: 991.98px) { .page-login-sign-up .auth-footnote { font-size: 14px; line-height: 21px; } } /* ---------- primary CTA buttons ---------- */ .page-login-sign-up .btn-cta-wrap { position: relative; display: inline-block; } .page-login-sign-up .btn-cta-wrap--block { display: block; width: 100%; } .page-login-sign-up .btn-cta { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; border: none; background: #e6b7c1; color: #211f1b; font-family: "Instrument Sans", sans-serif; font-size: 16px; font-weight: 500; line-height: 22.4px; padding: 17px 30px; border-radius: 999px; cursor: pointer; transition: background 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out; } .page-login-sign-up .btn-cta-wrap:not(.btn-cta-wrap--block) .btn-cta { width: auto; } .page-login-sign-up .btn-cta:hover { background: #dea3b0; transform: translateY(-1px); } .page-login-sign-up .btn-cta:focus-visible { outline: 2px solid var(--lsu-accent); outline-offset: 2px; } .page-login-sign-up .btn-cta-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .page-login-sign-up .btn-cta-trace rect { fill: none; stroke: var(--lsu-accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; } .page-login-sign-up .btn-cta-wrap.is-tracing .btn-cta-trace rect { transition: stroke-dashoffset 650ms ease-out; stroke-dashoffset: 0; } /* ---------- modals ---------- */ .page-login-sign-up .auth-modal .modal-dialog { max-width: 640px; } .page-login-sign-up .auth-modal .modal-content { background: #ffffff; border: none; border-radius: 16px; padding: 40px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; box-shadow: 0 24px 64px rgba(21, 32, 28, 0.25); } @media (min-width: 992px) { .page-login-sign-up .auth-modal .modal-content { padding: 56px 64px; gap: 20px; } } .page-login-sign-up .auth-modal .modal-mark { width: 48px; height: 48px; border-radius: 999px; background: #47b147; display: flex; align-items: center; justify-content: center; } @media (min-width: 992px) { .page-login-sign-up .auth-modal .modal-mark { width: 56px; height: 56px; } } .page-login-sign-up .auth-modal .modal-mark svg { width: 26px; height: 19px; } .page-login-sign-up .auth-modal .modal-title { font-family: "Playfair Display", serif; font-weight: 400; font-size: 21px; line-height: 27.3px; margin: 0; color: #211f1b; } @media (min-width: 992px) { .page-login-sign-up .auth-modal .modal-title { font-size: 30px; line-height: 37.5px; } } .page-login-sign-up .auth-modal .modal-body-text { font-size: 17px; line-height: 26.3px; color: #4a463e; margin: 0; } .page-login-sign-up .auth-modal .modal-close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; border-radius: 999px; background: #ffffff; border: 2px solid #e5e2dd; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 200ms ease-out, transform 200ms ease-out; } @media (min-width: 992px) { .page-login-sign-up .auth-modal .modal-close { width: 40px; height: 40px; top: 24px; right: 24px; } } .page-login-sign-up .auth-modal .modal-close:hover { border-color: var(--lsu-accent); transform: rotate(90deg); } .page-login-sign-up .auth-modal .modal-close:focus-visible { outline: 2px solid var(--lsu-accent); outline-offset: 2px; } .page-login-sign-up .auth-modal .modal-close svg { width: 14px; height: 14px; } .page-login-sign-up .modal-backdrop.show { opacity: 1; background-color: rgba(21, 32, 28, 0.8); backdrop-filter: blur(4px); } .page-login-sign-up .auth-modal.fade .modal-dialog { transform: scale(0.92) translateY(10px); opacity: 0; transition: transform 300ms cubic-bezier(.22,.68,.18,1), opacity 300ms cubic-bezier(.22,.68,.18,1); } .page-login-sign-up .auth-modal.show .modal-dialog { transform: scale(1) translateY(0); opacity: 1; } @media (prefers-reduced-motion: reduce) { .page-login-sign-up .auth-modal.fade .modal-dialog { transform: none; transition: opacity 150ms ease-out; } } /* ---------- misc ---------- */ .page-login-sign-up a, .page-login-sign-up button { transition: color 200ms ease-out, background 200ms ease-out, transform 200ms ease-out, border-color 200ms ease-out; } .page-login-sign-up [data-magnetic] { will-change: transform; }