/* * PHỞ in USA — Frontend Emerald Design System * User-facing theme only. Admin intentionally does not load this stylesheet. * Homepage keeps its approved hero/search/discover composition; shared chrome and * all other frontend screens inherit the black × emerald × champagne-gold system. */ :root { --pho-bg: #020806; --pho-bg-raised: #06110c; --pho-bg-soft: #081710; --pho-panel: #07140e; --pho-panel-2: #0a1b13; --pho-emerald: #006846; --pho-emerald-mid: #005137; --pho-emerald-deep: #003d29; --pho-emerald-black: #020d08; --pho-gold: #d7b875; --pho-gold-bright: #e2c68c; --pho-gold-soft: #b99a5e; --pho-pink: #ff1493; --pho-text: #f6f3ec; --pho-muted: #b9b7ae; --pho-dim: #817f78; --pho-line: rgba(215,184,117,.18); --pho-line-strong: rgba(215,184,117,.44); --pho-success: #73dfa9; --pho-danger: #ff91ad; --pho-warning: #f0ca7b; /* Keep old component variables working, but point them at the new system. */ --button-primary: #005b3d; --button-hover: #08734f; --button-active: #03432e; --button-feature: #d7b875; --button-feature-text: #06110c; --pho-button-bg-top: #086846; --pho-button-bg-bottom: #03442e; --pho-button-border: #b99759; --pho-button-shadow: #010704; } html { background: #000402; } body.pho-frontend { background: radial-gradient(circle at 50% -10%, rgba(0,93,60,.13), transparent 36rem), #000402; color: var(--pho-text); } body.pho-frontend .pho-app { background: radial-gradient(circle at 50% 0, rgba(0,86,56,.10), transparent 28rem), var(--pho-bg); border-inline-color: rgba(215,184,117,.06); box-shadow: 0 0 54px rgba(0,0,0,.62); } body.pho-frontend:not(.pho-home-page) .pho-main { background: linear-gradient(180deg,#030a07 0%,#020806 100%); } body.pho-frontend ::selection { background: rgba(255,20,147,.36); color: #fff; } body.pho-frontend a { color: var(--pho-pink); } /* -------------------------------------------------------------------------- Shared header — normal pages. Homepage overlay remains controlled by pho-home-shell.css. -------------------------------------------------------------------------- */ body.pho-frontend:not(.pho-home-page) .pho-header { background: linear-gradient(180deg,rgba(0,5,3,.99),rgba(1,11,7,.985)); border-bottom: 1px solid rgba(215,184,117,.15); box-shadow: 0 8px 24px rgba(0,0,0,.18); backdrop-filter: blur(18px); } body.pho-frontend:not(.pho-home-page) .pho-header__icon-btn { color: #ead09a; } body.pho-frontend:not(.pho-home-page) .pho-header__icon-btn:active { background: rgba(0,92,60,.22); } body.pho-frontend:not(.pho-home-page) .pho-header__icon-btn:focus-visible { outline-color: var(--pho-gold-bright); } body.pho-frontend:not(.pho-home-page) .pho-header__brand img { filter: drop-shadow(0 2px 8px rgba(0,0,0,.7)); } body.pho-frontend .pho-header__notification-badge { background: var(--pho-pink); border-color: #010704; } /* -------------------------------------------------------------------------- Footer — same visual language everywhere. -------------------------------------------------------------------------- */ body.pho-frontend .pho-footer { background: rgba(0,4,2,.985); border-top: 1px solid rgba(215,184,117,.18); box-shadow: 0 -10px 26px rgba(0,0,0,.22); } body.pho-frontend .pho-footer__item { color: #e4c98f !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; filter: none !important; } body.pho-frontend .pho-footer__item.is-active { color: var(--pho-pink) !important; } body.pho-frontend .pho-footer__item:active { background: rgba(0,92,60,.16) !important; } body.pho-frontend .pho-footer__item:focus-visible { outline: 2px solid var(--pho-gold-bright) !important; outline-offset: -2px !important; } /* -------------------------------------------------------------------------- Slide menu. -------------------------------------------------------------------------- */ body.pho-frontend .pho-menu__backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(5px); } body.pho-frontend .pho-menu__panel { background: radial-gradient(circle at 10% 0,rgba(0,92,60,.12),transparent 300px), #020806; border-right-color: rgba(215,184,117,.18); box-shadow: 24px 0 60px rgba(0,0,0,.64); } body.pho-frontend .pho-menu__top { border-bottom-color: rgba(215,184,117,.17); } body.pho-frontend .pho-menu__top img { filter: drop-shadow(0 2px 10px rgba(0,0,0,.7)); } body.pho-frontend .pho-menu__close { background: #07140e !important; color: #f4e2ba !important; border: 1px solid rgba(215,184,117,.28) !important; box-shadow: 0 4px 0 #010503,0 8px 18px rgba(0,0,0,.38) !important; } body.pho-frontend .pho-menu__link { color: var(--pho-gold-bright); border-bottom-color: rgba(215,184,117,.11); } body.pho-frontend .pho-menu__link .pho-icon { color: currentColor; } body.pho-frontend .pho-menu__link.is-active { color: var(--pho-pink); background: linear-gradient(90deg,rgba(255,20,147,.075),rgba(0,91,59,.08)); } body.pho-frontend .pho-menu__link:hover, body.pho-frontend .pho-menu__link:active { background: rgba(0,91,59,.15); } body.pho-frontend .pho-menu__meta { color: #8f897d; border-top-color: rgba(215,184,117,.13); } /* -------------------------------------------------------------------------- Shared page primitives. -------------------------------------------------------------------------- */ body.pho-frontend:not(.pho-home-page) .pho-page-shell, body.pho-frontend .pho-auth, body.pho-frontend .pho-account, body.pho-frontend .pho-area-suggestion, body.pho-frontend .pho-submit, body.pho-frontend .pho-application, body.pho-frontend .pho-results, body.pho-frontend .pho-public-profile, body.pho-frontend .pho-cms-page, body.pho-frontend .pho-seo, body.pho-frontend .pho-account-blocks, body.pho-frontend .pho-profile-safety { color: var(--pho-text); } body.pho-frontend .pho-empty-state, body.pho-frontend .pho-error-state, body.pho-frontend .pho-loading-state, body.pho-frontend .pho-success-state, body.pho-frontend .pho-account__empty { background: linear-gradient(180deg,rgba(8,28,19,.78),rgba(4,16,11,.9)); border-color: rgba(215,184,117,.18); } body.pho-frontend .pho-error-state { color: #ffb0c4; } body.pho-frontend .pho-success-state { color: var(--pho-success); } body.pho-frontend .pho-system-state { background: linear-gradient(180deg,#031009,#020806); } body.pho-frontend .pho-system-state h1 { color: #f7f2e7; } body.pho-frontend .pho-system-state p { color: var(--pho-muted); } body.pho-frontend .pho-system-state a { color: var(--pho-pink); } /* Typography: white page titles, gold section accents. */ body.pho-frontend:not(.pho-home-page) :is(.pho-auth__title,.pho-account__top h1,.pho-cms-page__head h1,.pho-seo__head h1) { color: #f7f4ed; text-shadow: 0 2px 18px rgba(0,0,0,.18); } body.pho-frontend:not(.pho-home-page) :is(.pho-account__section h2,.pho-area-suggestion__public-head h2,.pho-seo__list h2,.pho-seo__related h2) { color: var(--pho-gold-bright); } /* -------------------------------------------------------------------------- GLOBAL FRONTEND LUXURY BUTTON SYSTEM One visual language for every real user-facing action button, including Home. Header/footer/menu/picker/sheet/backdrop/image controls are intentionally excluded because they are navigation/field controls rather than CTA buttons. -------------------------------------------------------------------------- */ body.pho-frontend :where( button:not(.pho-header__icon-btn):not(.pho-footer__item):not(.pho-menu__close):not(.pho-menu__backdrop):not([class*="picker"]):not([class*="sheet"]):not(.pho-image-open):not(.pho-image-viewer__close), .pho-account__nav-button, a.pho-public-profile__apply ) { background: linear-gradient(180deg,#0a7f54 0%,#056444 48%,#034b32 72%,#033d29 100%) !important; color: #f1d08d !important; border: 1px solid #d2a75a !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.32), 0 5px 14px rgba(0,0,0,.28), 0 0 18px rgba(0,116,76,.10) !important; font-weight: 900 !important; text-shadow: 0 1px 0 rgba(0,0,0,.30); transition: filter .14s ease, transform .08s ease, box-shadow .14s ease !important; } body.pho-frontend :where( button:not(.pho-header__icon-btn):not(.pho-footer__item):not(.pho-menu__close):not(.pho-menu__backdrop):not([class*="picker"]):not([class*="sheet"]):not(.pho-image-open):not(.pho-image-viewer__close), .pho-account__nav-button, a.pho-public-profile__apply ):hover:not(:disabled) { background: linear-gradient(180deg,#0b8a5b 0%,#066e49 50%,#04543a 76%,#03462f 100%) !important; filter: brightness(1.04) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.28), 0 6px 16px rgba(0,0,0,.30), 0 0 22px rgba(0,132,86,.14) !important; } body.pho-frontend :where( button:not(.pho-header__icon-btn):not(.pho-footer__item):not(.pho-menu__close):not(.pho-menu__backdrop):not([class*="picker"]):not([class*="sheet"]):not(.pho-image-open):not(.pho-image-viewer__close), .pho-account__nav-button, a.pho-public-profile__apply ):active:not(:disabled) { background: linear-gradient(180deg,#056142,#034b33 60%,#023b28 100%) !important; transform: translateY(1px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(0,0,0,.34), 0 3px 9px rgba(0,0,0,.28) !important; } body.pho-frontend :where( button:not(.pho-header__icon-btn):not(.pho-footer__item):not(.pho-menu__close):not(.pho-menu__backdrop):not([class*="picker"]):not([class*="sheet"]):not(.pho-image-open):not(.pho-image-viewer__close), .pho-account__nav-button, a.pho-public-profile__apply ):focus-visible { outline: 2px solid var(--pho-gold-bright) !important; outline-offset: 3px !important; } /* Disabled changes behavior, not brand identity: keep the emerald/gold luxury appearance while visibly reducing intensity. */ body.pho-frontend button:disabled:not(.pho-header__icon-btn):not(.pho-footer__item):not(.pho-menu__close):not(.pho-menu__backdrop):not([class*="picker"]):not([class*="sheet"]):not(.pho-image-open):not(.pho-image-viewer__close) { background: linear-gradient(180deg,#086941 0%,#045236 58%,#033e29 100%) !important; color: #d9bb7d !important; border-color: #aa894b !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 1px rgba(0,0,0,.28), 0 4px 11px rgba(0,0,0,.22) !important; opacity: .80 !important; filter: saturate(.82) !important; cursor: not-allowed !important; text-shadow: none; } /* Account navigation is a large tap-action surface, so use the same gold text and CTA treatment; Notifications remains the one intentional pink accent. */ body.pho-frontend .pho-account__nav-button { color: #f1d08d !important; } body.pho-frontend .pho-account__nav-button--notifications .pho-account__nav-label { color: var(--pho-pink) !important; } body.pho-frontend .pho-account__nav-chevron { color: #d7b875 !important; } /* Destructive controls retain danger semantics instead of masquerading as a normal positive CTA. */ body.pho-frontend .pho-account__logout button, body.pho-frontend .pho-profile-safety__block { background: linear-gradient(180deg,#3b1520,#291119) !important; color: #ffadc0 !important; border-color: rgba(255,145,173,.42) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05),0 4px 12px rgba(0,0,0,.24) !important; } /* -------------------------------------------------------------------------- Forms and field controls. -------------------------------------------------------------------------- */ body.pho-frontend:not(.pho-home-page) :is( .pho-field__input, .pho-submit-form input,.pho-submit-form textarea,.pho-submit-form select, .pho-area-suggestion__form input,.pho-area-suggestion__form select, .pho-application__form input, .pho-profile-safety select,.pho-profile-safety textarea ) { background: linear-gradient(180deg,#07150e,#041009) !important; color: var(--pho-text) !important; border: 1px solid rgba(215,184,117,.35) !important; border-radius: 8px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important; } body.pho-frontend:not(.pho-home-page) :is( .pho-field__input, .pho-submit-form input,.pho-submit-form textarea,.pho-submit-form select, .pho-area-suggestion__form input,.pho-area-suggestion__form select, .pho-application__form input, .pho-profile-safety select,.pho-profile-safety textarea ):focus { outline: 0 !important; border-color: var(--pho-gold) !important; box-shadow: 0 0 0 2px rgba(215,184,117,.12),inset 0 1px 0 rgba(255,255,255,.03) !important; } body.pho-frontend:not(.pho-home-page) :is(input,textarea)::placeholder { color: #777a71; opacity: 1; } body.pho-frontend .pho-field__label, body.pho-frontend .pho-submit-form label, body.pho-frontend .pho-area-suggestion__form label, body.pho-frontend .pho-application__form label { color: #f3efe6; } body.pho-frontend .pho-field__help, body.pho-frontend .pho-submit-counter, body.pho-frontend .pho-area-suggestion__note, body.pho-frontend .pho-application__help, body.pho-frontend .pho-application__privacy { color: #918f87; } body.pho-frontend .pho-check { color: var(--pho-muted); } body.pho-frontend .pho-check input { accent-color: var(--pho-pink); } body.pho-frontend .pho-consent-box { border-color: rgba(215,184,117,.15); } /* Global custom select opener. */ body.pho-frontend .pho-sheet-select__opener { background: linear-gradient(180deg,#07170f,#041009) !important; color: #f7f2e8 !important; border: 1px solid rgba(215,184,117,.42) !important; border-radius: 8px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; } body.pho-frontend .pho-sheet-select__opener::after { color: var(--pho-gold); } body.pho-frontend .pho-sheet-select__opener[data-placeholder="1"] { color: #85847d !important; } body.pho-frontend .pho-sheet-select__opener:focus-visible { outline: 2px solid var(--pho-gold-bright) !important; outline-offset: 2px; } /* Shared custom selector bottom sheet. */ body.pho-frontend .pho-select-sheet__backdrop { background: rgba(0,0,0,.78); } body.pho-frontend .pho-select-sheet__panel { background: linear-gradient(180deg,#071a11,#030c08); border-color: rgba(215,184,117,.34); color: var(--pho-text); box-shadow: 0 -18px 54px rgba(0,0,0,.62); } body.pho-frontend .pho-select-sheet__head { border-bottom-color: rgba(215,184,117,.18); } body.pho-frontend .pho-select-sheet__title { color: var(--pho-gold-bright); } body.pho-frontend .pho-select-sheet__close { background: #0b2619 !important; color: #f0d79f !important; border: 1px solid rgba(215,184,117,.3) !important; border-radius: 9px !important; box-shadow: none !important; } body.pho-frontend .pho-select-sheet__option { border-bottom-color: rgba(215,184,117,.12) !important; color: #f6f2e9 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } body.pho-frontend .pho-select-sheet__option[aria-selected="true"] { background: #0a281a !important; color: var(--pho-gold-bright) !important; } body.pho-frontend .pho-select-sheet__option::after { border-color: #938b7a; } body.pho-frontend .pho-select-sheet__option[aria-selected="true"]::after { border-color: var(--pho-gold); } /* Legacy custom pickers used by Submit and Area Suggestion. */ body.pho-frontend :is(.pho-submit-picker,.pho-area-suggestion__picker) { background: linear-gradient(180deg,#07170f,#041009) !important; color: #f5f2ea !important; border: 1px solid rgba(215,184,117,.4) !important; border-radius: 8px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; } body.pho-frontend :is(.pho-submit-picker,.pho-area-suggestion__picker):focus-visible { outline: 2px solid var(--pho-gold-bright) !important; outline-offset: 2px; } body.pho-frontend :is(.pho-submit-sheet__backdrop,.pho-area-suggestion__sheet-backdrop) { background: rgba(0,0,0,.78) !important; } body.pho-frontend :is(.pho-submit-sheet__panel,.pho-area-suggestion__sheet-panel) { background: linear-gradient(180deg,#071a11,#030c08) !important; border-color: rgba(215,184,117,.34) !important; box-shadow: 0 -18px 54px rgba(0,0,0,.62) !important; } body.pho-frontend :is(.pho-submit-sheet__head,.pho-area-suggestion__sheet-head) { border-bottom-color: rgba(215,184,117,.18) !important; } body.pho-frontend :is(.pho-submit-sheet__head h2,.pho-area-suggestion__sheet-head h2) { color: var(--pho-gold-bright); } body.pho-frontend :is(.pho-submit-sheet__head button,.pho-area-suggestion__sheet-head button) { background: #0b2619 !important; color: #f0d79f !important; border: 1px solid rgba(215,184,117,.28) !important; box-shadow: none !important; } body.pho-frontend :is(.pho-submit-sheet__option,.pho-area-suggestion__sheet-option) { background: transparent !important; color: #f5f2e9 !important; border-bottom-color: rgba(215,184,117,.12) !important; border-radius: 0 !important; box-shadow: none !important; } body.pho-frontend :is(.pho-submit-sheet__option,.pho-area-suggestion__sheet-option):active { background: #0a281a !important; } body.pho-frontend :is(.pho-submit-sheet__radio,.pho-area-suggestion__radio) { border-color: #9f988a !important; } body.pho-frontend .pho-submit-sheet__option[aria-selected="true"] .pho-submit-sheet__radio, body.pho-frontend .pho-area-suggestion__sheet-option[aria-selected="true"] .pho-area-suggestion__radio { border-color: var(--pho-gold) !important; } /* -------------------------------------------------------------------------- Login / register / adult confirmation. -------------------------------------------------------------------------- */ body.pho-frontend .pho-auth { padding-top: 28px; } body.pho-frontend .pho-auth__badge { background: linear-gradient(180deg,#075f40,#03402b); color: #f1d79d; border: 1px solid rgba(215,184,117,.52); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } body.pho-frontend .pho-auth__intro { color: var(--pho-muted); } body.pho-frontend .pho-auth__submit { color: #f5dcaa !important; } body.pho-frontend .pho-auth__switch { color: #aaa79f; } body.pho-frontend .pho-auth__switch a { color: var(--pho-pink); } /* -------------------------------------------------------------------------- Submit Profile. -------------------------------------------------------------------------- */ body.pho-frontend .pho-submit-heading { background: linear-gradient(90deg,#052d1e,#073c29 58%,#06251a); border-top: 1px solid rgba(215,184,117,.12); border-bottom: 1px solid rgba(215,184,117,.22); color: #f4e0b5; } body.pho-frontend .pho-submit-heading small { color: var(--pho-gold-bright); } body.pho-frontend .pho-submit-heading h1 { color: #fff; } body.pho-frontend .pho-submit-intro { color: var(--pho-muted); } body.pho-frontend .pho-submit-image-rule { border-left-color: var(--pho-gold); background: linear-gradient(90deg,rgba(0,75,49,.28),rgba(6,20,14,.9)); } body.pho-frontend .pho-submit-image-rule span { color: #bdb9af; } body.pho-frontend .pho-submit-alert { background: #241119; border-left-color: var(--pho-pink); } body.pho-frontend .pho-submit-alert--success { background: #062117; border-left-color: var(--pho-success); } /* -------------------------------------------------------------------------- Area Suggestion. -------------------------------------------------------------------------- */ body.pho-frontend .pho-area-suggestion__head { border-bottom-color: rgba(215,184,117,.18); } body.pho-frontend .pho-area-suggestion__head > span { color: var(--pho-gold-bright); } body.pho-frontend .pho-area-suggestion__head p { color: var(--pho-muted); } body.pho-frontend .pho-area-suggestion__public { border-top-color: rgba(215,184,117,.17); } body.pho-frontend .pho-area-suggestion__item { background: linear-gradient(180deg,#07150e,#041009); border-color: rgba(215,184,117,.23); } body.pho-frontend .pho-area-suggestion__item div span { color: #99968e; } body.pho-frontend .pho-area-suggestion__status { border-color: rgba(215,184,117,.28); color: #c8b993; } body.pho-frontend .pho-area-suggestion__status--accepted { border-color: #22815a; background: #06251a; color: #7ee0ad; } body.pho-frontend .pho-area-suggestion__empty { border-color: rgba(215,184,117,.22); color: #98958d; } /* -------------------------------------------------------------------------- Account, notification center, activity, submissions. -------------------------------------------------------------------------- */ body.pho-frontend .pho-account__top { border-bottom-color: rgba(215,184,117,.18); } body.pho-frontend .pho-account__badge { background: linear-gradient(180deg,#075f40,#03402b); color: #f1d79d; border: 1px solid rgba(215,184,117,.46); border-radius: 4px; } body.pho-frontend .pho-account__top p { color: var(--pho-muted); } body.pho-frontend .pho-account__nav { gap: 10px; } body.pho-frontend .pho-account__nav-button { min-height: 58px; justify-content: flex-start; padding: 13px 16px !important; border-radius: 999px !important; color: var(--pho-gold-bright) !important; } body.pho-frontend .pho-account__nav-chevron { color: var(--pho-gold); } body.pho-frontend .pho-account__nav-button--notifications { border-color: rgba(255,20,147,.48) !important; } body.pho-frontend .pho-account__nav-button--notifications .pho-account__nav-label { color: var(--pho-pink); } body.pho-frontend .pho-account__count { background: var(--pho-pink); color: #fff; } body.pho-frontend .pho-account__section, body.pho-frontend .pho-account__logout { border-color: rgba(215,184,117,.16); } body.pho-frontend .pho-owner-application, body.pho-frontend .pho-account-item { background: linear-gradient(180deg,#07150e,#041009); border-color: rgba(215,184,117,.22); border-radius: 9px; } body.pho-frontend .pho-owner-application > span, body.pho-frontend .pho-owner-application small, body.pho-frontend .pho-account-item__meta, body.pho-frontend .pho-account-item__foot small { color: #99968e; } body.pho-frontend .pho-owner-application a, body.pho-frontend .pho-account__back, body.pho-frontend .pho-account-item__detail a, body.pho-frontend .pho-account-item__foot a { color: var(--pho-gold-bright); } body.pho-frontend .pho-account-item__text { color: #d8d4ca; } body.pho-frontend .pho-account-item__detail { border-top-color: rgba(215,184,117,.14); } body.pho-frontend .pho-account-item--notification.is-unread { border-color: rgba(255,20,147,.58); box-shadow: inset 3px 0 0 var(--pho-pink); } body.pho-frontend .pho-account-item__unread { background: var(--pho-pink); } body.pho-frontend .pho-account-item__kind { color: #bcae8c; } body.pho-frontend .pho-account-status { border-color: rgba(215,184,117,.28); color: #cfc1a0; } body.pho-frontend .pho-account-status--published, body.pho-frontend .pho-account-status--eligible, body.pho-frontend .pho-account-status--used { border-color:#2c8a61;color:#7ee0ad;background:#061e15; } body.pho-frontend .pho-account-status--pending, body.pho-frontend .pho-account-status--waiting { border-color:#a98a4e;color:#f0cf8c;background:#211a0a; } body.pho-frontend .pho-account-status--rejected, body.pho-frontend .pho-account-status--removed, body.pho-frontend .pho-account-status--expired, body.pho-frontend .pho-account-status--missed, body.pho-frontend .pho-account-status--revoked { border-color:#764150;color:#f0a2b8;background:#211015; } /* Block list. */ body.pho-frontend .pho-profile-safety__notice { background: #062117; border-left-color: var(--pho-gold); } body.pho-frontend .pho-account-blocks__kicker { color: var(--pho-gold-bright); } body.pho-frontend .pho-account-blocks__row { border-top-color: rgba(215,184,117,.15); } body.pho-frontend .pho-account-blocks__row span, body.pho-frontend .pho-account-blocks__row small, body.pho-frontend .pho-account-blocks__empty { color: #a39f96; } /* -------------------------------------------------------------------------- CMS / informational pages. -------------------------------------------------------------------------- */ body.pho-frontend .pho-cms-page { color: var(--pho-text); } body.pho-frontend .pho-cms-page__head { border-bottom-color: rgba(215,184,117,.20); } body.pho-frontend .pho-cms-page__head h1 { color: #f7f3ea; } body.pho-frontend .pho-cms-page__content { color: #d8d4cb; } body.pho-frontend .pho-cms-page__content :is(h2,h3,h4) { color: var(--pho-gold-bright); font-family: Georgia,"Times New Roman",serif; letter-spacing: .005em; } body.pho-frontend .pho-cms-page__content a { color: var(--pho-pink); } body.pho-frontend .pho-cms-page__content blockquote { border-left-color: var(--pho-gold); background: linear-gradient(90deg,rgba(0,74,48,.27),rgba(5,17,12,.85)); } body.pho-frontend .pho-cms-page__content hr { border-top-color: rgba(215,184,117,.18); } /* -------------------------------------------------------------------------- Search results / profile cards. -------------------------------------------------------------------------- */ body.pho-frontend .pho-results__heading { background: linear-gradient(90deg,#06402b,#07583b 58%,#063322); border-bottom: 1px solid rgba(215,184,117,.28); color: #f4e0b5; } body.pho-frontend .pho-results__heading p { color: var(--pho-gold-bright); } body.pho-frontend .pho-results__heading h1 { color: #fff; } body.pho-frontend .pho-results__toolbar { color: var(--pho-muted); } body.pho-frontend .pho-results__toolbar a, body.pho-frontend .pho-results__empty a { color: var(--pho-gold-bright); } body.pho-frontend .pho-card { background: linear-gradient(180deg,#07150e,#041009); border-color: rgba(215,184,117,.24); box-shadow: 0 7px 18px rgba(0,0,0,.18); } body.pho-frontend .pho-card img, body.pho-frontend .pho-card__placeholder { background: #08120d; } body.pho-frontend .pho-card__body span { color: #a4a097; } body.pho-frontend .pho-card__body p { color: #d3cfc5; } body.pho-frontend .pho-results__empty { background: #05120c; border: 1px solid rgba(215,184,117,.18); } body.pho-frontend .pho-results__empty p { color: var(--pho-muted); } /* -------------------------------------------------------------------------- Public/private profile detail. -------------------------------------------------------------------------- */ body.pho-frontend .pho-public-profile__back { color: var(--pho-gold-bright); } body.pho-frontend .pho-public-profile__media { background: #041009; border: 1px solid rgba(215,184,117,.22); } body.pho-frontend .pho-image-open { background: #041009 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.pho-frontend .pho-image-open span { background: rgba(2,13,8,.84); color: #f0d8a3; border: 1px solid rgba(215,184,117,.28); } body.pho-frontend .pho-public-profile__eyebrow { color: var(--pho-pink); } body.pho-frontend .pho-public-profile h1 { color: #f7f2e8; } body.pho-frontend .pho-public-profile h1 span { color: #a9a59b; } body.pho-frontend .pho-public-profile__intro { color: #ded9cf; } body.pho-frontend .pho-public-profile__apply { color: #f3dba8 !important; } body.pho-frontend .pho-public-profile__apply-note { color: #959289; } body.pho-frontend .pho-image-viewer__close { background: rgba(3,19,12,.94) !important; border-color: rgba(215,184,117,.5) !important; color: #f1dda9 !important; box-shadow: 0 5px 18px rgba(0,0,0,.4) !important; } /* Report/block safety. */ body.pho-frontend .pho-profile-safety { border-top-color: rgba(215,184,117,.18); } body.pho-frontend .pho-profile-safety__details { background: #05120c; border-color: rgba(215,184,117,.22); } body.pho-frontend .pho-profile-safety summary { color: var(--pho-gold-bright); } /* -------------------------------------------------------------------------- Application / security gate / private area. -------------------------------------------------------------------------- */ body.pho-frontend .pho-application__heading, body.pho-frontend .pho-application__heading--private { background: linear-gradient(90deg,#063c29,#075c3e 58%,#063522); border-top: 1px solid rgba(215,184,117,.12); border-bottom: 1px solid rgba(215,184,117,.28); color: #f4e0b5; } body.pho-frontend .pho-application__heading--private { box-shadow: inset 4px 0 0 var(--pho-pink); } body.pho-frontend .pho-application__heading small { color: var(--pho-gold-bright); } body.pho-frontend .pho-application__heading h1 { color: #fff; } body.pho-frontend .pho-application__target, body.pho-frontend .pho-application__countdown, body.pho-frontend .pho-application__private-content, body.pho-frontend .pho-application__ended { background: linear-gradient(180deg,#07150e,#041009); border-color: rgba(215,184,117,.22); } body.pho-frontend .pho-application__target span, body.pho-frontend .pho-application__countdown span { color: #9e9a90; } body.pho-frontend .pho-application__intro, body.pho-frontend .pho-application > p { color: #cfcac0; } body.pho-frontend .pho-application__timing { background: rgba(215,184,117,.23); } body.pho-frontend .pho-application__timing div { background: #05120c; } body.pho-frontend .pho-application__timing strong { color: var(--pho-gold-bright); } body.pho-frontend .pho-application__timing span { color: #9e9a90; } body.pho-frontend .pho-application__alert { background: #251018; border-left-color: var(--pho-pink); } body.pho-frontend .pho-application__alert--success { background:#062117;border-left-color:var(--pho-success); } body.pho-frontend .pho-application__status { background:#10251a;color:#e8d19e;border:1px solid rgba(215,184,117,.22); } body.pho-frontend .pho-application__status--waiting { background:#2b210b;color:#f0cf88; } body.pho-frontend .pho-application__status--eligible, body.pho-frontend .pho-application__status--used { background:#073821;color:#8ee2b3; } body.pho-frontend .pho-application__status--missed, body.pho-frontend .pho-application__status--expired, body.pho-frontend .pho-application__status--revoked { background:#32151d;color:#ffadc0; } body.pho-frontend .pho-application__code { background:#07170f; border-color:rgba(215,184,117,.56); } body.pho-frontend .pho-application__code span, body.pho-frontend .pho-application__code small { color:#9d998f; } body.pho-frontend .pho-application__code strong { color:var(--pho-gold-bright); } body.pho-frontend .pho-application__priority { border-left-color:var(--pho-gold); background:linear-gradient(90deg,rgba(0,76,49,.28),#05120c); } body.pho-frontend .pho-application__back, body.pho-frontend .pho-application__help-link { color:var(--pho-gold-bright); } body.pho-frontend .pho-application__private-warning { background:#251018; border-left-color:var(--pho-pink); } body.pho-frontend .pho-application__success-redirect { background:linear-gradient(180deg,#0b5a3c,#063b28); border-color:var(--pho-gold); color:#f4dcaa; } body.pho-frontend .pho-application__success-redirect strong, body.pho-frontend .pho-application__success-redirect span { color:#f4dcaa; } /* Global pending application strip. */ body.pho-frontend .pho-pending-app { background: linear-gradient(90deg,#07160f,#0a1d14); border-bottom-color: rgba(215,184,117,.22); } body.pho-frontend .pho-pending-app:hover, body.pho-frontend .pho-pending-app:active { background:#0b2519; } body.pho-frontend .pho-pending-app__dot { background:var(--pho-gold);box-shadow:0 0 0 4px rgba(215,184,117,.12); } body.pho-frontend .pho-pending-app.is-ready .pho-pending-app__dot { background:var(--pho-success);box-shadow:0 0 0 4px rgba(115,223,169,.12); } body.pho-frontend .pho-pending-app__body small { color:#9d998f; } body.pho-frontend .pho-pending-app.is-ready .pho-pending-app__time { color:var(--pho-success); } body.pho-frontend .pho-pending-app__arrow { color:var(--pho-gold); } /* -------------------------------------------------------------------------- SEO / Cẩm nang Phở. -------------------------------------------------------------------------- */ body.pho-frontend .pho-seo { color: var(--pho-text); } body.pho-frontend .pho-seo__head { border-bottom-color: rgba(215,184,117,.20); } body.pho-frontend .pho-seo__head > span { color: var(--pho-gold-bright); } body.pho-frontend .pho-seo__head p, body.pho-frontend .pho-seo__categories small, body.pho-frontend .pho-seo__list small, body.pho-frontend .pho-seo__empty { color:#9f9b91; } body.pho-frontend .pho-seo__categories a, body.pho-frontend .pho-seo__list article a { background:linear-gradient(180deg,#07150e,#041009); border-color:rgba(215,184,117,.22); color:inherit; } body.pho-frontend .pho-seo__categories strong, body.pho-frontend .pho-seo__list article h2, body.pho-frontend .pho-seo__list article h3 { color:var(--pho-gold-bright); } body.pho-frontend .pho-seo__list article p { color:#c9c5bb; } body.pho-frontend .pho-seo__crumb { color:#928f87; } body.pho-frontend .pho-seo__crumb a, body.pho-frontend .pho-seo__related a { color:var(--pho-gold-bright); } body.pho-frontend .pho-seo-article__body { color:#d8d3c9; } body.pho-frontend .pho-seo-article__body :is(h2,h3,h4) { color:var(--pho-gold-bright); } body.pho-frontend .pho-seo-article__body a { color:var(--pho-pink); } body.pho-frontend .pho-seo__related { border-top-color:rgba(215,184,117,.19); } /* -------------------------------------------------------------------------- Shared section-heading component. All tones become emerald, preserving tone classes for markup compatibility while removing the old rainbow UI. -------------------------------------------------------------------------- */ body.pho-frontend .pho-section-heading, body.pho-frontend .pho-section-heading--pink, body.pho-frontend .pho-section-heading--blue, body.pho-frontend .pho-section-heading--purple, body.pho-frontend .pho-section-heading--orange, body.pho-frontend .pho-section-heading--green { background: linear-gradient(90deg,#053b28,#07583b 60%,#053222); color: #f6f1e7; border-block-color: rgba(215,184,117,.20); } body.pho-frontend .pho-section-heading__icon { background:#0a2418; color:var(--pho-gold-bright); border:1px solid rgba(215,184,117,.24); } body.pho-frontend .pho-section-heading__text small { color:var(--pho-gold-bright); } /* Keep homepage itself untouched except shared menu/footer; its own stylesheet is the visual source of truth. */ body.pho-home-page .pho-header, body.pho-home-page .pho-header__inner, body.pho-home-page .pho-header__brand, body.pho-home-page .pho-header__actions, body.pho-home-page .pho-header__icon-btn { /* Keep the approved overlay layout, but lock icon color to the homepage gold. */ color: #ebcc88 !important; } body.pho-home-page .pho-header__icon-btn:focus-visible { outline-color: #e2c27e !important; } body.pho-home-page .pho-home-discover__heading a { color: #f4efe6 !important; } @media (max-width: 430px) { body.pho-frontend:not(.pho-home-page) .pho-header__brand img { width: 134px; } body.pho-frontend .pho-cms-page__content { line-height: 1.68; } body.pho-frontend .pho-account__nav-button { min-height: 56px; padding-inline: 14px !important; } } @media (max-width: 390px) { body.pho-frontend .pho-account__nav-button { min-height: 54px; } body.pho-frontend .pho-select-sheet__option, body.pho-frontend :is(.pho-submit-sheet__option,.pho-area-suggestion__sheet-option) { min-height: 54px; } } /* HOTFIX: actionable external profile URLs use conventional link blue. Keep tel: phone values in champagne gold for data hierarchy. */ body.pho-frontend .pho-account-item__detail a[href^="http://"], body.pho-frontend .pho-account-item__detail a[href^="https://"], body.pho-frontend .pho-owner-application a[href^="http://"], body.pho-frontend .pho-owner-application a[href^="https://"] { color: #69adff !important; text-decoration-color: rgba(105,173,255,.62); text-underline-offset: 2px; } body.pho-frontend .pho-account-item__detail a[href^="http://"]:hover, body.pho-frontend .pho-account-item__detail a[href^="https://"]:hover, body.pho-frontend .pho-owner-application a[href^="http://"]:hover, body.pho-frontend .pho-owner-application a[href^="https://"]:hover { color: #8fc3ff !important; } /* ========================================================================== GLOBAL FRONTEND FABRIC BUTTON HOTFIX Source of truth: reference CTA uses a dark emerald velvet/fabric surface, not a CSS gradient. The texture is a raster asset so every frontend action button shares the same material treatment while behavior remains unchanged. ========================================================================== */ body.pho-frontend :where( button:not(.pho-header__icon-btn):not(.pho-footer__item):not(.pho-menu__close):not(.pho-menu__backdrop):not([class*="picker"]):not([class*="sheet"]):not(.pho-image-open):not(.pho-image-viewer__close), .pho-account__nav-button, a.pho-public-profile__apply ) { background-color: #064b34 !important; background-image: url('/assets/images/ui/pho-button-fabric.webp') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 100% 100% !important; color: #efd18f !important; border: 1.25px solid #d9b76d !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(20,8,0,.35), 0 0 0 1px rgba(12,10,4,.72), 0 0 10px rgba(220,184,108,.10), 0 6px 15px rgba(0,0,0,.30) !important; text-shadow: 0 1px 1px rgba(0,0,0,.48); } body.pho-frontend :where( button:not(.pho-header__icon-btn):not(.pho-footer__item):not(.pho-menu__close):not(.pho-menu__backdrop):not([class*="picker"]):not([class*="sheet"]):not(.pho-image-open):not(.pho-image-viewer__close), .pho-account__nav-button, a.pho-public-profile__apply ):hover:not(:disabled) { background-color: #07583c !important; background-image: url('/assets/images/ui/pho-button-fabric.webp') !important; filter: brightness(1.08) saturate(1.03) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(20,8,0,.34), 0 0 0 1px rgba(12,10,4,.66), 0 0 14px rgba(220,184,108,.14), 0 7px 17px rgba(0,0,0,.32) !important; } body.pho-frontend :where( button:not(.pho-header__icon-btn):not(.pho-footer__item):not(.pho-menu__close):not(.pho-menu__backdrop):not([class*="picker"]):not([class*="sheet"]):not(.pho-image-open):not(.pho-image-viewer__close), .pho-account__nav-button, a.pho-public-profile__apply ):active:not(:disabled) { background-color: #043f2c !important; background-image: url('/assets/images/ui/pho-button-fabric.webp') !important; filter: brightness(.92) saturate(.96) !important; transform: translateY(1px) !important; box-shadow: inset 0 2px 5px rgba(0,0,0,.24), 0 0 0 1px rgba(12,10,4,.70), 0 3px 8px rgba(0,0,0,.28) !important; } body.pho-frontend button:disabled:not(.pho-header__icon-btn):not(.pho-footer__item):not(.pho-menu__close):not(.pho-menu__backdrop):not([class*="picker"]):not([class*="sheet"]):not(.pho-image-open):not(.pho-image-viewer__close) { background-color: #05422f !important; background-image: url('/assets/images/ui/pho-button-fabric.webp') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 100% 100% !important; color: #d7ba7d !important; border-color: #b99a5d !important; opacity: .86 !important; filter: brightness(.84) saturate(.78) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), inset 0 -1px 0 rgba(20,8,0,.30), 0 0 0 1px rgba(12,10,4,.62), 0 4px 11px rgba(0,0,0,.24) !important; } /* Keep the homepage search CTA visually identical to the global fabric system. Its serif typography and sizing still come from pho-search.css. */ body.pho-home-page .pho-search__submit, body.pho-home-page .pho-search__submit:disabled, body.pho-home-page .pho-search__submit:hover:not(:disabled), body.pho-home-page .pho-search__submit:active:not(:disabled) { background-color: #064b34 !important; background-image: url('/assets/images/ui/pho-button-fabric.webp') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 100% 100% !important; } /* ======================================================================== GLOBAL FRONTEND NOTCHED FOOTER Compact luxury bottom navigation inspired by the approved reference: - low bar (62px) - active icon rises into a circular cradle - no hot-pink active state; all footer icon/text stays champagne gold - the notch follows the active navigation item using CSS only - Menu uses the same raised state while its drawer is open ======================================================================== */ body.pho-frontend .pho-app { --pho-footer-h: 62px; } body.pho-frontend .pho-footer { --pho-footer-active-x: -120px; min-height: calc(var(--pho-footer-h) + var(--pho-safe-bottom)); padding-bottom: var(--pho-safe-bottom); background: transparent !important; border-top: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: visible; isolation: isolate; } /* The black-green bar itself. A radial mask cuts the U-shaped cradle out of its top edge without clipping the raised active icon. */ body.pho-frontend .pho-footer::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(0,7,5,.995), rgba(0,2,1,.995)); -webkit-mask-image: radial-gradient( circle 35px at var(--pho-footer-active-x) 0, transparent 0 34px, #000 35px ); mask-image: radial-gradient( circle 35px at var(--pho-footer-active-x) 0, transparent 0 34px, #000 35px ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; box-shadow: 0 -8px 20px rgba(0,0,0,.24); pointer-events: none; } body.pho-frontend .pho-footer__inner { min-height: var(--pho-footer-h); height: var(--pho-footer-h); position: relative; z-index: 1; align-items: stretch; } body.pho-frontend .pho-footer__item { position: relative; isolation: isolate; overflow: visible; gap: 2px !important; padding: 8px 2px 4px !important; color: #e6c982 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important; transform: none !important; filter: none !important; font-size: 9px !important; line-height: 1.02; font-weight: 740; } body.pho-frontend .pho-footer__item::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -20px; width: 50px; height: 50px; border-radius: 50%; transform: translateX(-50%) scale(.82); opacity: 0; background: radial-gradient(circle at 50% 34%, rgba(16,57,39,.96), rgba(1,13,9,.99) 68%); border: 1px solid rgba(226,198,140,.84); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 3px 12px rgba(0,0,0,.62), 0 0 10px rgba(215,184,117,.08); transition: opacity .16s ease, transform .16s ease; pointer-events: none; } body.pho-frontend .pho-footer__item .pho-icon { width: 21px !important; height: 21px !important; stroke-width: 1.9; color: #e6c982 !important; transform: translateY(0); transition: transform .16s ease; } body.pho-frontend .pho-footer__item > span { color: #e6c982 !important; transition: transform .16s ease; } /* Active state is communicated by geometry, not by hot pink. */ body.pho-frontend .pho-footer__item.is-active, body.pho-frontend .pho-footer__item[aria-expanded="true"] { color: #e6c982 !important; } body.pho-frontend .pho-footer__item.is-active::before, body.pho-frontend .pho-footer__item[aria-expanded="true"]::before { opacity: 1; transform: translateX(-50%) scale(1); } body.pho-frontend .pho-footer__item.is-active .pho-icon, body.pho-frontend .pho-footer__item[aria-expanded="true"] .pho-icon { color: #f0d797 !important; transform: translateY(-14px); } body.pho-frontend .pho-footer__item.is-active > span, body.pho-frontend .pho-footer__item[aria-expanded="true"] > span { color: #e6c982 !important; } body.pho-frontend .pho-footer__item:active { background: transparent !important; } body.pho-frontend .pho-footer__item:focus-visible { outline: 1px solid rgba(226,198,140,.72) !important; outline-offset: -3px; border-radius: 8px !important; } /* Position the notch under whichever of the five items is active. */ body.pho-frontend .pho-footer:has(.pho-footer__item:nth-child(1).is-active) { --pho-footer-active-x: 10%; } body.pho-frontend .pho-footer:has(.pho-footer__item:nth-child(2).is-active) { --pho-footer-active-x: 30%; } body.pho-frontend .pho-footer:has(.pho-footer__item:nth-child(3).is-active) { --pho-footer-active-x: 50%; } body.pho-frontend .pho-footer:has(.pho-footer__item:nth-child(4).is-active) { --pho-footer-active-x: 70%; } body.pho-frontend .pho-footer:has(.pho-footer__item:nth-child(5).is-active) { --pho-footer-active-x: 90%; } /* While the Menu drawer is open, Menu becomes the active cradle even if the underlying page is Home/About/Submit/+Area. */ body.pho-frontend .pho-footer:has(.pho-footer__item:nth-child(5)[aria-expanded="true"]) { --pho-footer-active-x: 90%; } /* Home previously had a separate 76/80px footer and pink active rule. The global footer is now the single visual source of truth on every frontend. */ body.pho-home-page .pho-footer__item, body.pho-home-page .pho-footer__item.is-active, body.pho-home-page .pho-footer__item[aria-expanded="true"] { color: #e6c982 !important; } @media (max-width: 430px) { body.pho-frontend .pho-app { --pho-footer-h: 62px; } body.pho-frontend .pho-footer__item { gap: 2px !important; padding: 8px 1px 4px !important; font-size: 8.8px !important; } body.pho-frontend .pho-footer__item .pho-icon { width: 21px !important; height: 21px !important; } } @media (max-width: 390px) { body.pho-frontend .pho-app { --pho-footer-h: 60px; } body.pho-frontend .pho-footer__inner { height: var(--pho-footer-h); } body.pho-frontend .pho-footer__item { padding-top: 7px !important; font-size: 8.4px !important; letter-spacing: -.01em; } body.pho-frontend .pho-footer__item::before { width: 48px; height: 48px; top: -19px; } body.pho-frontend .pho-footer__item.is-active .pho-icon, body.pho-frontend .pho-footer__item[aria-expanded="true"] .pho-icon { transform: translateY(-13px); } } /* ======================================================================== NOTCHED FOOTER — GEOMETRY + FABRIC CORRECTION 2026-09-07 - Active bubble center is aligned exactly with the notch center (y = 0). Bubble r=25px, notch r=35px => even 10px clearance on sides + bottom. - Footer bar and active bubble use the approved deep-emerald fabric texture instead of a flat black fill. ======================================================================== */ body.pho-frontend .pho-footer::before { background-color: #032d20 !important; background-image: url('/assets/images/ui/pho-button-fabric.webp') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: cover !important; filter: brightness(.66) saturate(.90); -webkit-mask-image: radial-gradient( circle 35px at var(--pho-footer-active-x) 0, transparent 0 34px, #000 35px ) !important; mask-image: radial-gradient( circle 35px at var(--pho-footer-active-x) 0, transparent 0 34px, #000 35px ) !important; box-shadow: inset 0 1px 0 rgba(226,198,140,.20), inset 0 -10px 20px rgba(0,0,0,.18), 0 -8px 20px rgba(0,0,0,.24) !important; } body.pho-frontend .pho-footer__item::before { /* 50px bubble => center at footer y=0 when top is -25px. */ top: -25px !important; background-color: #043725 !important; background-image: url('/assets/images/ui/pho-button-fabric.webp') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: auto 100% !important; border-color: rgba(226,198,140,.88) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -3px 7px rgba(0,0,0,.18), 0 3px 12px rgba(0,0,0,.60), 0 0 11px rgba(215,184,117,.09) !important; } @media (max-width: 390px) { body.pho-frontend .pho-footer__item::before { /* 48px bubble => center remains exactly at footer y=0. */ top: -24px !important; } } /* ======================================================================== FOOTER V3 — FIXED HOME + HORIZONTAL SCROLL RAIL 2026-09-08 - Home is permanently fixed at the left edge. - About / Submit / +Area / Menu live in a horizontally scrollable rail. - Any non-Home active item is automatically centered in the full footer. - Home is the exception: it never moves; on Home the rail resets so About sits directly beside it. - The fabric notch follows the real on-screen center of the effective active item, including while the rail is manually swiped. ======================================================================== */ body.pho-frontend .pho-footer.pho-footer--scroll-rail { --pho-footer-h: 60px; --pho-footer-cell-w: clamp(70px, 20vw, 144px); --pho-footer-notch-r: 35px; --pho-footer-bubble: 50px; --pho-footer-notch-x: -120px; overflow: visible !important; } body.pho-frontend .pho-footer.pho-footer--scroll-rail::before { -webkit-mask-image: radial-gradient( circle var(--pho-footer-notch-r) at var(--pho-footer-notch-x) 0, transparent 0 calc(var(--pho-footer-notch-r) - 1px), #000 var(--pho-footer-notch-r) ) !important; mask-image: radial-gradient( circle var(--pho-footer-notch-r) at var(--pho-footer-notch-x) 0, transparent 0 calc(var(--pho-footer-notch-r) - 1px), #000 var(--pho-footer-notch-r) ) !important; } body.pho-frontend .pho-footer.pho-footer--scroll-rail .pho-footer__inner { display: flex !important; grid-template-columns: none !important; align-items: stretch !important; min-height: var(--pho-footer-h) !important; height: var(--pho-footer-h) !important; overflow: visible !important; } body.pho-frontend .pho-footer__home-slot { position: relative; z-index: 5; flex: 0 0 var(--pho-footer-cell-w); width: var(--pho-footer-cell-w); min-width: var(--pho-footer-cell-w); height: var(--pho-footer-h); overflow: visible; } body.pho-frontend .pho-footer__home-slot .pho-footer__item { width: 100%; height: 100%; } body.pho-frontend .pho-footer__rail { position: relative; z-index: 3; flex: 1 1 auto; min-width: 0; height: calc(var(--pho-footer-h) + 25px); margin-top: -25px; padding-top: 25px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: none; touch-action: pan-x; } body.pho-frontend .pho-footer__rail::-webkit-scrollbar { display: none; width: 0; height: 0; } body.pho-frontend .pho-footer__track { --pho-footer-track-pad-left: 0px; --pho-footer-track-pad-right: 0px; display: flex; align-items: stretch; width: max-content; min-width: 100%; height: var(--pho-footer-h); padding-left: var(--pho-footer-track-pad-left); padding-right: var(--pho-footer-track-pad-right); box-sizing: content-box; } body.pho-frontend .pho-footer__scroll-item { flex: 0 0 var(--pho-footer-cell-w) !important; width: var(--pho-footer-cell-w) !important; min-width: var(--pho-footer-cell-w) !important; height: var(--pho-footer-h) !important; scroll-snap-align: none; scroll-snap-stop: normal; } /* Only one item owns the raised bubble at a time. The server-side .is-active class remains for semantics, while JS adds .is-footer-current to the visual effective active item (Menu temporarily wins while its drawer is open). */ body.pho-frontend .pho-footer.pho-footer--runtime-ready .pho-footer__item.is-active::before, body.pho-frontend .pho-footer.pho-footer--runtime-ready .pho-footer__item[aria-expanded="true"]::before, body.pho-frontend .pho-footer.pho-footer--runtime-ready .pho-footer__item.is-active .pho-icon, body.pho-frontend .pho-footer.pho-footer--runtime-ready .pho-footer__item[aria-expanded="true"] .pho-icon { opacity: revert; } body.pho-frontend .pho-footer.pho-footer--runtime-ready .pho-footer__item::before { opacity: 0 !important; transform: translateX(-50%) scale(.82) !important; } body.pho-frontend .pho-footer.pho-footer--runtime-ready .pho-footer__item .pho-icon { transform: translateY(0) !important; } body.pho-frontend .pho-footer.pho-footer--runtime-ready .pho-footer__item.is-footer-current::before { opacity: 1 !important; transform: translateX(-50%) scale(1) !important; } body.pho-frontend .pho-footer.pho-footer--runtime-ready .pho-footer__item.is-footer-current .pho-icon { color: #f0d797 !important; transform: translateY(-18px) !important; } body.pho-frontend .pho-footer.pho-footer--runtime-ready .pho-footer__item.is-footer-current > span { color: #e6c982 !important; } /* Keep the bubble center exactly on the footer top edge: 50px bubble => -25px. */ body.pho-frontend .pho-footer.pho-footer--scroll-rail .pho-footer__item::before { top: -25px !important; width: var(--pho-footer-bubble) !important; height: var(--pho-footer-bubble) !important; } /* The fixed Home cell must never slide with the rail. */ body.pho-frontend .pho-footer__home-item { position: relative; z-index: 6; } @media (max-width: 390px) { body.pho-frontend .pho-footer.pho-footer--scroll-rail { --pho-footer-h: 58px; --pho-footer-bubble: 48px; --pho-footer-notch-r: 34px; } body.pho-frontend .pho-footer.pho-footer--scroll-rail .pho-footer__item::before { top: -24px !important; } body.pho-frontend .pho-footer.pho-footer--runtime-ready .pho-footer__item.is-footer-current .pho-icon { transform: translateY(-17px) !important; } body.pho-frontend .pho-footer__rail { height: calc(var(--pho-footer-h) + 24px); margin-top: -24px; padding-top: 24px; } }