/* ========================================================================== Feature Desk - mobile app shell -------------------------------------------------------------------------- Turns a page into a native-feeling app UI on phones (and inside the NativePHP webview) while leaving the desktop site completely alone. Contract: - A page opts in with and by including market.website.includes.app_chrome. - Desktop markup goes inside .fd-desktop-only, app markup inside .fdapp-only. - Every rule below either lives in the <768px media query or hides the app chrome, so >=768px renders exactly what it rendered before. Palette is taken from the existing site: slate chrome (#1f2937/#111827), gold accent (#fc0), price red (#e63939), orange highlight (#fb7701). ========================================================================== */ /* App chrome never exists on desktop, or on a page that did not opt in. Hiding is done here rather than with a blanket `.fdapp-chrome{display:none}` plus a `display:block` override, because that override would have beaten the `display:flex` on the bar elements and collapsed them into blocks. */ @media (min-width: 768px) { .fdapp-chrome, .fdapp-only { display: none !important; } } body:not(.fdapp-shell) .fdapp-chrome, body:not(.fdapp-shell) .fdapp-only { display: none !important; } @media (max-width: 767.98px) { /* ---------------------------------------------------------------- tokens */ body.fdapp-shell { --fd-bg: #f2f3f5; --fd-surface: #ffffff; --fd-chrome-a: #1f2937; --fd-chrome-b: #111827; --fd-ink: #14181f; --fd-ink-2: #6b7280; --fd-ink-3: #9aa1ac; --fd-line: #e9ebef; --fd-accent: #ffcc00; --fd-price: #e63939; --fd-orange: #fb7701; --fd-radius: 14px; --fd-gutter: 12px; --fd-bar-h: 56px; --fd-tab-h: 58px; --fd-safe-top: env(safe-area-inset-top, 0px); --fd-safe-bottom: env(safe-area-inset-bottom, 0px); } /* ------------------------------------------------------- visibility swap */ body.fdapp-shell .fd-desktop-only { display: none !important; } /* The app shell carries its own reset instead of leaning on the one that navbar.blade.php happens to emit, so it renders correctly on any page whether or not that partial is included. */ body.fdapp-shell .fdapp-chrome, body.fdapp-shell .fdapp-chrome *, body.fdapp-shell .fdapp-only, body.fdapp-shell .fdapp-only * { box-sizing: border-box; } body.fdapp-shell .fdapp-chrome h1, body.fdapp-shell .fdapp-chrome h2, body.fdapp-shell .fdapp-chrome h3, body.fdapp-shell .fdapp-chrome p, body.fdapp-shell .fdapp-chrome ul, body.fdapp-shell .fdapp-only h1, body.fdapp-shell .fdapp-only h2, body.fdapp-shell .fdapp-only h3, body.fdapp-shell .fdapp-only p, body.fdapp-shell .fdapp-only ul { margin: 0; } /* ------------------------------------------------------------- page frame */ body.fdapp-shell { margin: 0; background: var(--fd-bg); color: var(--fd-ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; line-height: 1.4; /* Chrome is fixed; the document scrolls underneath it. */ padding-top: calc(var(--fd-bar-h) + var(--fd-safe-top)); padding-bottom: calc(var(--fd-tab-h) + var(--fd-safe-bottom)); -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; /* Stops the pull-to-refresh / rubber-band chaining that gives a webview away as a browser. */ overscroll-behavior-y: contain; } /* index.blade.php ships a global `* { transition: all .3s ease }`. It is left in place for desktop and neutralised here so app taps feel instant. */ body.fdapp-shell .fdapp-chrome *, body.fdapp-shell .fdapp-only * { transition: none; } /* Chrome is furniture, not content - no selection, no long-press callout. */ body.fdapp-shell .fdapp-chrome, body.fdapp-shell .fdapp-tabbar, body.fdapp-shell .fdapp-sheet { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Wrapped in :where() so this link reset carries zero specificity. Written plainly as `body.fdapp-shell a` it scored 0,2,0 and beat the component rules below - the tab labels and the app-bar icon are anchors, and they silently inherited body colour instead of their own. */ :where(body.fdapp-shell) :where(a) { text-decoration: none; color: inherit; } body.fdapp-shell img { max-width: 100%; } /* ============================================================== app bar */ .fdapp-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1200; height: calc(var(--fd-bar-h) + var(--fd-safe-top)); padding: var(--fd-safe-top) 10px 0; display: flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--fd-chrome-a), var(--fd-chrome-b)); box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 2px 12px rgba(0, 0, 0, .18); } .fdapp-topbar__logo { flex-shrink: 0; display: flex; align-items: center; height: 34px; padding-left: 2px; } .fdapp-topbar__logo img { height: 26px; width: auto; display: block; } /* Search pill ---------------------------------------------------------- */ .fdapp-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .10); } .fdapp-search:focus-within { background: rgba(255, 255, 255, .20); border-color: rgba(255, 204, 0, .55); } .fdapp-search i { font-size: 18px; color: rgba(255, 255, 255, .75); flex-shrink: 0; } .fdapp-search input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-size: 13.5px; font-family: inherit; } .fdapp-search input::placeholder { color: rgba(255, 255, 255, .6); } /* Icon buttons --------------------------------------------------------- */ .fdapp-iconbtn { flex-shrink: 0; position: relative; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; color: #fff; border-radius: 50%; } .fdapp-iconbtn i { font-size: 22px; } .fdapp-iconbtn:active { background: rgba(255, 255, 255, .14); } .fdapp-iconbtn__dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--fd-accent); border: 2px solid var(--fd-chrome-b); } /* ========================================================== bottom tabs */ .fdapp-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; height: calc(var(--fd-tab-h) + var(--fd-safe-bottom)); padding-bottom: var(--fd-safe-bottom); background: var(--fd-surface); border-top: 1px solid var(--fd-line); box-shadow: 0 -2px 14px rgba(16, 24, 40, .06); } .fdapp-tab { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; padding: 0; background: transparent; color: var(--fd-ink-3); font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: .1px; } .fdapp-tab i { font-size: 22px; line-height: 1; } .fdapp-tab:active i { transform: scale(.88); } .fdapp-tab.is-active, .fdapp-tab.is-active i { color: var(--fd-chrome-b); } /* The bar above the active tab, the way native tab bars mark state. */ .fdapp-tab.is-active::before { content: ""; position: absolute; top: 0; /* Centred explicitly - the static position of an abspos child inside a flex container is not reliable enough to lean on across engines. */ left: 50%; margin-left: -13px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--fd-accent); } /* ============================================================== sections */ .fdapp-main { padding: 10px 0 24px; } .fdapp-section { margin: 0 var(--fd-gutter) 12px; background: var(--fd-surface); border-radius: var(--fd-radius); padding: 14px var(--fd-gutter); } .fdapp-section--flush { padding-left: 0; padding-right: 0; } .fdapp-section--bare { background: transparent; border-radius: 0; margin-left: 0; margin-right: 0; padding: 0; } .fdapp-sectionhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .fdapp-section--flush .fdapp-sectionhead, .fdapp-section--bare .fdapp-sectionhead { padding: 0 var(--fd-gutter); } .fdapp-sectionhead h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.2px; color: var(--fd-ink); } .fdapp-sectionhead__more { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; font-weight: 600; color: var(--fd-ink-2); flex-shrink: 0; } .fdapp-sectionhead__more i { font-size: 16px; } .fdapp-sectionhead__more:active { opacity: .55; } /* ========================================================= category grid */ .fdapp-catgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 4px; } .fdapp-cat { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .fdapp-cat__img { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: #f4f5f7; display: flex; align-items: center; justify-content: center; } .fdapp-cat__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .fdapp-cat:active .fdapp-cat__img { transform: scale(.93); } .fdapp-cat span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 10.5px; line-height: 1.25; font-weight: 500; color: var(--fd-ink-2); } /* The "All" tile closes the 4x2 grid instead of leaving a hole. */ .fdapp-cat--all .fdapp-cat__img { background: linear-gradient(135deg, var(--fd-chrome-a), var(--fd-chrome-b)); color: #fff; } .fdapp-cat--all .fdapp-cat__img i { font-size: 24px; } /* =============================================================== rails */ .fdapp-rail { display: flex; gap: 10px; overflow-x: auto; padding: 2px var(--fd-gutter) 4px; scroll-snap-type: x mandatory; /* Without this the mandatory snap fires on load and pulls the first card flush against the screen edge, eating the left gutter. */ scroll-padding-left: var(--fd-gutter); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .fdapp-rail::-webkit-scrollbar { display: none; } .fdapp-rail > * { scroll-snap-align: start; flex: 0 0 auto; } /* ========================================================= product cards */ .fdapp-pcard { display: block; background: var(--fd-surface); border-radius: 12px; overflow: hidden; } .fdapp-pcard:active { transform: scale(.975); } .fdapp-pcard__media { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #f4f5f7; overflow: hidden; } .fdapp-pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .fdapp-pcard__off { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--fd-price); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .2px; } .fdapp-pcard__body { padding: 8px 9px 10px; } .fdapp-pcard__title { margin: 0 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 500; line-height: 1.32; color: var(--fd-ink); min-height: 33px; } .fdapp-pcard__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .fdapp-pcard__now { font-size: 15px; font-weight: 800; color: var(--fd-price); letter-spacing: -.3px; } .fdapp-pcard__now small { font-size: 10.5px; font-weight: 600; } .fdapp-pcard__was { font-size: 11px; color: var(--fd-ink-3); text-decoration: line-through; } .fdapp-pcard__meta { margin-top: 5px; display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--fd-ink-3); } .fdapp-pcard__rating { display: inline-flex; align-items: center; gap: 2px; color: var(--fd-orange); font-weight: 600; } .fdapp-pcard__rating i { font-size: 12px; } /* Rail variant: narrower, single-line title. */ .fdapp-rail .fdapp-pcard { width: 138px; box-shadow: 0 1px 3px rgba(16, 24, 40, .07); } .fdapp-rail .fdapp-pcard__title { -webkit-line-clamp: 1; min-height: 0; } /* Grid variant */ .fdapp-pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 var(--fd-gutter); } .fdapp-pgrid .fdapp-pcard { box-shadow: 0 1px 3px rgba(16, 24, 40, .07); } /* ============================================================ trust chips */ .fdapp-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 var(--fd-gutter); margin-bottom: 12px; scrollbar-width: none; } .fdapp-chips::-webkit-scrollbar { display: none; } .fdapp-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border-radius: 999px; background: var(--fd-surface); border: 1px solid var(--fd-line); font-size: 11.5px; font-weight: 600; color: var(--fd-ink-2); } .fdapp-chip i { font-size: 15px; color: var(--fd-orange); } /* ============================================================== app sheet */ .fdapp-scrim { position: fixed; inset: 0; z-index: 1300; background: rgba(10, 14, 20, .45); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s ease; } .fdapp-scrim.is-open { opacity: 1; visibility: visible; } .fdapp-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1400; max-height: 82vh; display: flex; flex-direction: column; background: var(--fd-surface); border-radius: 18px 18px 0 0; padding-bottom: var(--fd-safe-bottom); transform: translateY(101%); transition: transform .28s cubic-bezier(.32, .72, 0, 1); box-shadow: 0 -8px 40px rgba(10, 14, 20, .25); } .fdapp-sheet.is-open { transform: translateY(0); } .fdapp-sheet__grip { flex-shrink: 0; width: 38px; height: 4px; border-radius: 999px; background: #d9dde3; margin: 9px auto 4px; } .fdapp-sheet__head { flex-shrink: 0; display: flex; align-items: center; gap: 11px; padding: 8px 16px 14px; border-bottom: 1px solid var(--fd-line); } .fdapp-sheet__avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--fd-chrome-a), var(--fd-chrome-b)); color: var(--fd-accent); font-size: 22px; flex-shrink: 0; } .fdapp-sheet__who strong { display: block; font-size: 14.5px; font-weight: 700; } .fdapp-sheet__who span { display: block; font-size: 11.5px; color: var(--fd-ink-3); margin-top: 1px; } .fdapp-sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .fdapp-sheet__cta { display: flex; gap: 9px; padding: 14px 16px 4px; } .fdapp-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 11px; font-size: 13.5px; font-weight: 700; border: 1px solid transparent; } .fdapp-btn--primary { background: linear-gradient(135deg, var(--fd-chrome-a), var(--fd-chrome-b)); color: #fff; } .fdapp-btn--ghost { background: #fff; border-color: var(--fd-line); color: var(--fd-ink); } .fdapp-btn:active { transform: scale(.98); opacity: .9; } .fdapp-sheet__label { padding: 16px 16px 6px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--fd-ink-3); } .fdapp-list { list-style: none; margin: 0; padding: 0; } .fdapp-list a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; font-size: 14px; color: var(--fd-ink); border-bottom: 1px solid var(--fd-line); } .fdapp-list li:last-child a { border-bottom: 0; } .fdapp-list a:active { background: #f5f6f8; } .fdapp-list a > i:first-child { font-size: 20px; color: var(--fd-ink-2); width: 22px; text-align: center; flex-shrink: 0; } .fdapp-list a .fdapp-list__chev { margin-left: auto; font-size: 20px; color: #c8ccd3; } .fdapp-list a.is-danger, .fdapp-list a.is-danger > i:first-child { color: #dc2626; } /* =============================================================== footer */ .fdapp-footer { margin: 4px var(--fd-gutter) 0; background: var(--fd-surface); border-radius: var(--fd-radius); overflow: hidden; } .fdapp-acc summary { display: flex; align-items: center; min-height: 48px; padding: 0 14px; font-size: 13.5px; font-weight: 600; color: var(--fd-ink); border-bottom: 1px solid var(--fd-line); cursor: pointer; list-style: none; } .fdapp-acc summary::-webkit-details-marker { display: none; } /* Chevron is a real rather than a ::after codepoint so it survives any future boxicons upgrade that reshuffles the private-use range. */ .fdapp-acc summary .bx { margin-left: auto; font-size: 20px; color: #c8ccd3; } .fdapp-acc[open] summary .bx { transform: rotate(180deg); } .fdapp-acc__body { padding: 6px 14px 12px; border-bottom: 1px solid var(--fd-line); } .fdapp-acc__body a { display: block; padding: 8px 0; font-size: 13px; color: var(--fd-ink-2); } .fdapp-acc__body a:active { color: var(--fd-ink); } .fdapp-social { display: flex; justify-content: center; gap: 10px; padding: 16px 14px 6px; } .fdapp-social a { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f4f5f7; color: var(--fd-ink-2); font-size: 20px; } .fdapp-social a:active { background: #e9ebef; } .fdapp-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; padding: 10px 14px 4px; } .fdapp-legal a { font-size: 11.5px; color: var(--fd-ink-3); } .fdapp-copy { padding: 10px 14px 18px; text-align: center; font-size: 11px; color: var(--fd-ink-3); } /* ============================================================ empty state */ .fdapp-empty { padding: 40px 20px; text-align: center; color: var(--fd-ink-3); } .fdapp-empty i { font-size: 40px; display: block; margin-bottom: 8px; color: #d3d7de; } /* While a sheet is open the page behind it must not scroll. */ body.fdapp-shell.is-locked { overflow: hidden; } } /* ========================================================================== Inner pages -------------------------------------------------------------------------- Everything below serves the non-home public pages: the [back] Title bar, product grids, the category index, product detail, auth screens, and the generic treatment that makes the existing long-form content pages read as app screens without duplicating their copy. ========================================================================== */ @media (max-width: 767.98px) { /* ============================================================ title bar */ .fdapp-topbar--title { padding-left: 4px; padding-right: 4px; gap: 2px; } .fdapp-topbar__title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; letter-spacing: -.2px; color: #fff; } /* ------------------------------------------------------- focused screens */ .fdapp-tabbar--hidden { display: none; } /* Reclaim the tab-bar gutter when there is no tab bar. If :has() is unavailable the page simply keeps a little dead space at the bottom - a cosmetic degradation, never a broken layout. */ body.fdapp-shell:has(.fdapp-tabbar--hidden) { padding-bottom: var(--fd-safe-bottom); } /* ========================================================== page heading */ .fdapp-pagehead { padding: 16px var(--fd-gutter) 4px; } .fdapp-pagehead h2 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.3px; } .fdapp-pagehead p { margin: 4px 0 0; font-size: 12.5px; color: var(--fd-ink-3); } /* ========================================================== load more */ .fdapp-loadmore { padding: 18px var(--fd-gutter) 6px; text-align: center; } .fdapp-loadmore button { width: 100%; height: 44px; border: 1px solid var(--fd-line); border-radius: 12px; background: var(--fd-surface); color: var(--fd-ink); font-family: inherit; font-size: 13.5px; font-weight: 700; } .fdapp-loadmore button:active { background: #f1f2f5; } /* ===================================================== category index */ .fdapp-catlist { margin: 0 var(--fd-gutter) 12px; background: var(--fd-surface); border-radius: var(--fd-radius); overflow: hidden; } .fdapp-catrow { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 12px; border-bottom: 1px solid var(--fd-line); } .fdapp-catlist > .fdapp-catrow:last-child { border-bottom: 0; } .fdapp-catrow:active { background: #f5f6f8; } .fdapp-catrow__img { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; background: #f4f5f7; } .fdapp-catrow__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .fdapp-catrow__name { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--fd-ink); } .fdapp-catrow > .bx { flex-shrink: 0; font-size: 20px; color: #c8ccd3; } /* ===================================================== product detail */ .fdapp-gallery { position: relative; background: var(--fd-surface); } .fdapp-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .fdapp-gallery__track::-webkit-scrollbar { display: none; } .fdapp-gallery__track img { flex: 0 0 100%; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; scroll-snap-align: start; display: block; } .fdapp-gallery__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 5px; } .fdapp-gallery__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(17, 24, 39, .25); } .fdapp-gallery__dots span.is-active { background: var(--fd-chrome-b); width: 16px; border-radius: 999px; } .fdapp-pdp { background: var(--fd-surface); padding: 14px var(--fd-gutter) 16px; margin-bottom: 10px; } .fdapp-pdp__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .fdapp-pdp__now { font-size: 26px; font-weight: 800; color: var(--fd-price); letter-spacing: -.6px; } .fdapp-pdp__now small { font-size: 14px; font-weight: 700; } .fdapp-pdp__was { font-size: 13px; color: var(--fd-ink-3); text-decoration: line-through; } .fdapp-pdp__off { padding: 2px 8px; border-radius: 999px; background: rgba(230, 57, 57, .1); color: var(--fd-price); font-size: 11.5px; font-weight: 700; } .fdapp-pdp__title { margin: 8px 0 0; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--fd-ink); } .fdapp-pdp__meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fd-line); font-size: 12px; color: var(--fd-ink-3); } .fdapp-pdp__stars { display: inline-flex; align-items: center; gap: 3px; color: var(--fd-orange); font-weight: 700; } .fdapp-pdp__stars i { font-size: 14px; } .fdapp-facts { background: var(--fd-surface); margin-bottom: 10px; } .fdapp-fact { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px var(--fd-gutter); border-bottom: 1px solid var(--fd-line); font-size: 13px; color: var(--fd-ink); } .fdapp-facts > .fdapp-fact:last-child { border-bottom: 0; } .fdapp-fact > i { font-size: 19px; color: var(--fd-orange); flex-shrink: 0; } .fdapp-fact strong { margin-left: auto; font-weight: 600; } /* Sticky purchase bar. Replaces the tab bar on product detail, which is the native pattern - the tab bar is navigation, this is the action. */ .fdapp-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; gap: 9px; padding: 9px var(--fd-gutter); padding-bottom: calc(9px + var(--fd-safe-bottom)); background: var(--fd-surface); border-top: 1px solid var(--fd-line); box-shadow: 0 -2px 14px rgba(16, 24, 40, .08); } .fdapp-buybar__ghost { flex-shrink: 0; width: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border-radius: 11px; border: 1px solid var(--fd-line); background: #fff; font-size: 9.5px; font-weight: 600; color: var(--fd-ink-2); } .fdapp-buybar__ghost i { font-size: 19px; } .fdapp-buybar__cta { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, #ff5722, #e63939); color: #fff; font-size: 15px; font-weight: 700; } .fdapp-buybar__cta:active { transform: scale(.99); opacity: .92; } /* A page with a buy bar needs its own bottom gutter. */ body.fdapp-shell.fdapp-shell--buybar { padding-bottom: calc(64px + var(--fd-safe-bottom)); } /* ============================================================== auth */ .fdapp-auth { padding: 22px var(--fd-gutter) 28px; } .fdapp-auth__brand { text-align: center; margin-bottom: 22px; } .fdapp-auth__brand img { height: 38px; width: auto; } .fdapp-auth__brand h2 { margin: 14px 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.4px; } .fdapp-auth__brand p { margin: 0; font-size: 13px; color: var(--fd-ink-3); } .fdapp-card { background: var(--fd-surface); border-radius: var(--fd-radius); padding: 16px 14px; } .fdapp-field { margin-bottom: 14px; } .fdapp-field > label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--fd-ink-2); } .fdapp-input { display: flex; align-items: center; gap: 9px; height: 48px; padding: 0 13px; border: 1px solid var(--fd-line); border-radius: 12px; background: #fafbfc; } .fdapp-input:focus-within { border-color: var(--fd-chrome-b); background: #fff; } .fdapp-input > i { font-size: 19px; color: var(--fd-ink-3); flex-shrink: 0; } .fdapp-input input, .fdapp-input select { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 14.5px; color: var(--fd-ink); } .fdapp-input button { border: 0; background: transparent; color: var(--fd-ink-3); font-size: 19px; padding: 0 2px; } .fdapp-submit { width: 100%; height: 48px; margin-top: 4px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--fd-chrome-a), var(--fd-chrome-b)); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; } .fdapp-submit:active { transform: scale(.99); opacity: .93; } .fdapp-authalt { margin-top: 18px; text-align: center; font-size: 13px; color: var(--fd-ink-2); } .fdapp-authalt a { font-weight: 700; color: var(--fd-chrome-b); } .fdapp-alert { margin-bottom: 14px; padding: 11px 13px; border-radius: 11px; font-size: 13px; line-height: 1.45; } .fdapp-alert--error { background: #fdecec; color: #b42318; } .fdapp-alert--ok { background: #e9f7ef; color: #10693a; } .fdapp-alert ul { margin: 0; padding-left: 16px; } /* ================================================== long-form content These pages keep their existing desktop copy - it is not duplicated for mobile - so the job here is to strip the desktop chrome assumptions (fixed-navbar offsets, wide gutters, display type sizes) and let the content reflow at app scale. */ body.fdapp-shell.fdapp-content section { padding: 8px 0 !important; margin: 0 !important; background: transparent !important; } body.fdapp-shell.fdapp-content .container, body.fdapp-shell.fdapp-content .container-fluid, body.fdapp-shell.fdapp-content .container-sm, body.fdapp-shell.fdapp-content .container-md, body.fdapp-shell.fdapp-content .container-lg { width: 100% !important; max-width: 100% !important; padding-left: var(--fd-gutter) !important; padding-right: var(--fd-gutter) !important; margin: 0 !important; } body.fdapp-shell.fdapp-content h1 { font-size: 20px; line-height: 1.3; font-weight: 800; letter-spacing: -.3px; margin: 12px 0 8px; } body.fdapp-shell.fdapp-content h2, body.fdapp-shell.fdapp-content .section-title { font-size: 17px !important; line-height: 1.32; font-weight: 700; letter-spacing: -.2px; margin: 16px 0 8px !important; text-align: left !important; } body.fdapp-shell.fdapp-content h3 { font-size: 14.5px; font-weight: 700; margin: 12px 0 6px; } body.fdapp-shell.fdapp-content h4, body.fdapp-shell.fdapp-content h5, body.fdapp-shell.fdapp-content h6 { font-size: 13.5px; font-weight: 700; margin: 10px 0 5px; } body.fdapp-shell.fdapp-content p, body.fdapp-shell.fdapp-content li, body.fdapp-shell.fdapp-content td, body.fdapp-shell.fdapp-content dd { font-size: 13.5px; line-height: 1.62; color: #4b5563; } body.fdapp-shell.fdapp-content img { max-width: 100%; height: auto; } /* Cards, panels and tiles across these pages share the same handful of utility names; normalise them all to one app card. */ body.fdapp-shell.fdapp-content .card, body.fdapp-shell.fdapp-content .faq-item, body.fdapp-shell.fdapp-content .info-card, body.fdapp-shell.fdapp-content .contact-card, body.fdapp-shell.fdapp-content .category-card, body.fdapp-shell.fdapp-content .value-card, body.fdapp-shell.fdapp-content .team-card, body.fdapp-shell.fdapp-content .step-card { border-radius: 12px !important; border: 1px solid var(--fd-line) !important; box-shadow: none !important; margin-bottom: 10px !important; background: var(--fd-surface) !important; } /* Long-form pages nearly always have a wide multi-column band that is unreadable at 360px. */ body.fdapp-shell.fdapp-content .row { margin-left: 0 !important; margin-right: 0 !important; } body.fdapp-shell.fdapp-content .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; } /* Tables scroll rather than squash the page. */ body.fdapp-shell.fdapp-content table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; } /* Twelve of the content pages open with the same breadcrumb banner, which exists only to clear the fixed desktop navbar and repeat the page title. The app bar already shows that title, so the banner goes. */ body.fdapp-shell.fdapp-content > section.bg-light.border-bottom { display: none !important; } /* Rich text coming from the backend (product descriptions, blog bodies). */ .fdapp-prose { font-size: 13.5px; line-height: 1.65; color: #4b5563; overflow-wrap: anywhere; } .fdapp-prose p { margin: 0 0 10px; } .fdapp-prose p:last-child { margin-bottom: 0; } .fdapp-prose h1, .fdapp-prose h2, .fdapp-prose h3, .fdapp-prose h4 { margin: 14px 0 6px; font-size: 14.5px; font-weight: 700; color: var(--fd-ink); } .fdapp-prose ul, .fdapp-prose ol { margin: 0 0 10px; padding-left: 18px; } .fdapp-prose li { margin-bottom: 4px; } .fdapp-prose img { max-width: 100%; height: auto; border-radius: 10px; } .fdapp-prose a { color: var(--fd-chrome-b); font-weight: 600; } .fdapp-prose table { display: block; width: 100%; overflow-x: auto; } /* Anything the desktop pushed down to clear its fixed navbar. */ body.fdapp-shell.fdapp-content [style*="margin-top:70px"], body.fdapp-shell.fdapp-content [style*="margin-top: 70px"], body.fdapp-shell.fdapp-content [style*="margin-top:80px"], body.fdapp-shell.fdapp-content [style*="margin-top: 80px"] { margin-top: 0 !important; } } @media (max-width: 767.98px) { /* =========================================================== error screen */ .fdapp-errscreen { padding: 48px 24px; text-align: center; } .fdapp-errscreen__icon { width: 86px; height: 86px; margin: 0 auto 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--fd-surface); border: 1px solid var(--fd-line); } .fdapp-errscreen__icon i { font-size: 42px; color: var(--fd-ink-3); } .fdapp-errscreen h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--fd-ink); } .fdapp-errscreen p { margin: 0 auto 24px; max-width: 280px; font-size: 13.5px; line-height: 1.6; color: var(--fd-ink-3); } /* ============================================== legacy dark policy page /privacy and /terms still render the old dark marketing template. Rather than fork its copy, its utility colours are neutralised here so it reads correctly on the light app background. */ body.fdapp-shell.fdapp-legacy-dark { background: var(--fd-bg) !important; color: var(--fd-ink) !important; } body.fdapp-shell.fdapp-legacy-dark [class*="text-white"], body.fdapp-shell.fdapp-legacy-dark [class*="text-gray-"] { color: var(--fd-ink-2) !important; } body.fdapp-shell.fdapp-legacy-dark h1, body.fdapp-shell.fdapp-legacy-dark h2, body.fdapp-shell.fdapp-legacy-dark h3, body.fdapp-shell.fdapp-legacy-dark h4 { color: var(--fd-ink) !important; } body.fdapp-shell.fdapp-legacy-dark [class*="bg-gray-"], body.fdapp-shell.fdapp-legacy-dark [class*="bg-[#0A0A0F]"], body.fdapp-shell.fdapp-legacy-dark [class*="bg-black"] { background: var(--fd-surface) !important; } body.fdapp-shell.fdapp-legacy-dark [class*="border-gray-"] { border-color: var(--fd-line) !important; } } @media (max-width: 767.98px) { /* ================================================ content page density The desktop cards on these pages are built around 40px padding and a large decorative icon. At 360px that turns into a screen of empty box, especially where the icon is a Font Awesome glyph served from a CDN the app cannot reach offline. Collapse both to app scale. */ body.fdapp-shell.fdapp-content .card, body.fdapp-shell.fdapp-content .faq-item, body.fdapp-shell.fdapp-content .info-card, body.fdapp-shell.fdapp-content .contact-card, body.fdapp-shell.fdapp-content .category-card, body.fdapp-shell.fdapp-content .value-card, body.fdapp-shell.fdapp-content .team-card, body.fdapp-shell.fdapp-content .step-card, body.fdapp-shell.fdapp-content .service-card, body.fdapp-shell.fdapp-content .feature-card { padding: 16px 14px !important; height: auto !important; min-height: 0 !important; } /* Decorative icon wells: let them size to their content. */ body.fdapp-shell.fdapp-content [class$="-icon"], body.fdapp-shell.fdapp-content [class*="-icon "], body.fdapp-shell.fdapp-content [class*="icon-wrapper"], body.fdapp-shell.fdapp-content [class*="icon-circle"] { width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 0 8px !important; line-height: 1 !important; } /* Display-sized glyphs come back to app scale. */ body.fdapp-shell.fdapp-content .fa, body.fdapp-shell.fdapp-content .fas, body.fdapp-shell.fdapp-content .far, body.fdapp-shell.fdapp-content .fab, body.fdapp-shell.fdapp-content [class^="fa-"], body.fdapp-shell.fdapp-content [class*=" fa-"], body.fdapp-shell.fdapp-content .bx { font-size: 20px !important; line-height: 1 !important; } } @media (max-width: 767.98px) { /* ======================================================== sub-category rail Sits above the product grid on a category screen, the way the desktop category page leads with its sub-category carousel. */ .fdapp-subcat { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 76px; text-align: center; } .fdapp-subcat__img { width: 68px; height: 68px; border-radius: 50%; overflow: hidden; background: var(--fd-surface); border: 1px solid var(--fd-line); display: flex; align-items: center; justify-content: center; } .fdapp-subcat__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .fdapp-subcat:active .fdapp-subcat__img { transform: scale(.93); } .fdapp-subcat__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 10.5px; line-height: 1.25; font-weight: 500; color: var(--fd-ink-2); } } @media (max-width: 767.98px) { /* Current sub-category, when the rail is shown on a sub-category screen. */ .fdapp-subcat.is-active .fdapp-subcat__img { border-color: var(--fd-chrome-b); box-shadow: 0 0 0 2px var(--fd-chrome-b); } .fdapp-subcat.is-active .fdapp-subcat__name { color: var(--fd-ink); font-weight: 700; } } @media (max-width: 767.98px) { /* ============================================================== search A full screen rather than an input wedged into the fixed bar: the keyboard covers a third of the display, so search needs the room. */ .fdapp-searchscreen { position: fixed; inset: 0; z-index: 1500; display: flex; flex-direction: column; background: var(--fd-bg); } .fdapp-searchscreen[hidden] { display: none; } .fdapp-searchbar { flex-shrink: 0; display: flex; align-items: center; gap: 4px; padding: var(--fd-safe-top) 6px 0; height: calc(var(--fd-bar-h) + var(--fd-safe-top)); background: linear-gradient(135deg, var(--fd-chrome-a), var(--fd-chrome-b)); } .fdapp-searchbar__field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border-radius: 10px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .12); } .fdapp-searchbar__field:focus-within { background: rgba(255, 255, 255, .2); border-color: rgba(255, 204, 0, .55); } .fdapp-searchbar__field > i { font-size: 18px; color: rgba(255, 255, 255, .75); flex-shrink: 0; } .fdapp-searchbar input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-family: inherit; font-size: 14.5px; } .fdapp-searchbar input::placeholder { color: rgba(255, 255, 255, .55); } /* The browser's own clear affordance would sit on top of ours. */ .fdapp-searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .fdapp-searchbar__clear { flex-shrink: 0; border: 0; padding: 0 2px; background: transparent; color: rgba(255, 255, 255, .7); font-size: 20px; line-height: 1; } .fdapp-searchbar__go { flex-shrink: 0; border: 0; padding: 0 10px; height: 38px; background: transparent; color: var(--fd-accent); font-family: inherit; font-size: 13.5px; font-weight: 700; } .fdapp-searchbar__go:active { opacity: .6; } .fdapp-searchbody { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(20px + var(--fd-safe-bottom)); } .fdapp-searchhead { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--fd-gutter) 8px; font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--fd-ink-3); } .fdapp-searchhead button { border: 0; background: transparent; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--fd-price); } .fdapp-chiplist { list-style: none; margin: 0; padding: 0 var(--fd-gutter); display: flex; flex-wrap: wrap; gap: 8px; } .fdapp-chiplist a { display: inline-block; padding: 8px 13px; border-radius: 999px; background: var(--fd-surface); border: 1px solid var(--fd-line); font-size: 12.5px; font-weight: 500; color: var(--fd-ink); } .fdapp-chiplist a:active { background: #eef0f3; } /* ============================================================== loader */ .fdapp-progress { position: fixed; top: calc(var(--fd-bar-h) + var(--fd-safe-top)); left: 0; right: 0; height: 3px; z-index: 1600; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .15s ease; } .fdapp-progress.is-on { opacity: 1; } .fdapp-progress > span { display: block; width: 40%; height: 100%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--fd-accent), #ff9800); } .fdapp-progress.is-on > span { animation: fdappProgress 1.1s ease-in-out infinite; } @keyframes fdappProgress { 0% { transform: translateX(-100%); } 60% { transform: translateX(160%); } 100% { transform: translateX(260%); } } .fdapp-loading { position: fixed; inset: 0; z-index: 1590; display: flex; align-items: center; justify-content: center; background: rgba(242, 243, 245, .62); backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s ease; } .fdapp-loading.is-on { opacity: 1; visibility: visible; } .fdapp-loading__box { display: flex; flex-direction: column; align-items: center; gap: 11px; padding: 20px 26px; border-radius: 16px; background: var(--fd-surface); box-shadow: 0 8px 30px rgba(16, 24, 40, .16); } .fdapp-loading__text { font-size: 12.5px; font-weight: 600; color: var(--fd-ink-2); } .fdapp-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--fd-line); border-top-color: var(--fd-chrome-b); animation: fdappSpin .7s linear infinite; } @keyframes fdappSpin { to { transform: rotate(360deg); } } /* Respect the system setting; the overlay still appears, just still. */ @media (prefers-reduced-motion: reduce) { .fdapp-spinner, .fdapp-progress.is-on > span { animation-duration: 0s; } } } @media (max-width: 767.98px) { /* The home search pill is now a button that opens the search screen. */ button.fdapp-search { font-family: inherit; text-align: left; cursor: pointer; } .fdapp-search > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: rgba(255, 255, 255, .6); } /* Carrying a live query - read as entered text, not a placeholder. */ .fdapp-search.is-filled > span { color: #fff; font-weight: 500; } .fdapp-search:active { background: rgba(255, 255, 255, .22); } } @media (max-width: 767.98px) { /* Slim footer for the focused auth screens - legal only, no browsing menu. */ .fdapp-authfoot { padding: 6px var(--fd-gutter) 8px; } .fdapp-authfoot .fdapp-legal { padding: 0 0 2px; } .fdapp-authfoot .fdapp-copy { padding: 6px 0 0; } }