/* Faithful mobile · one look for the whole app. * * Home was restyled first (faithful-mobile-home.css). This carries the same * system to every other screen, so moving between tabs does not feel like * moving between products: * * light card white-to-lavender gradient, thin gold rule, two-layer shadow * dark card deep indigo gradient, sheen at the top, gold rule * gold the one primary action on a screen * navy pill every other filled action * light pill secondary actions * chip filters and small choices: gold rule, cream fill, navy when on * segmented a gold-ruled tray; the selected segment is a navy pill * icon well a lavender rounded square with a navy glyph * * Type is 28 22 17 15 13 12, fields 16 (iOS zooms below that), weights * 400 600 700, two families: the display serif for headings, figures and * scripture, the UI sans for everything else. A one-off script put the * phone-only files on that scale and palette directly; * faithful-mobile-theme.generated.css restates it for files the desktop portal * shares. This file is the part that needed decisions rather than arithmetic. * * SPECIFICITY. The older layers scope by screen ID ("#screen-give .gv-tab"), * which no number of classes outranks. Rules here that must win use * ".screen:not(#_)": :not() takes the specificity of its argument, no element * has the id "_", so it matches every screen and counts as an ID. * * Every selector starts with .app or .device, which exist only on the phone * page, so nothing here can reach the desktop portal or another tenant. */ .device,.app{ /* Sampled from assets/faithful-church-card.png, which is where Faithful's colour comes from: deep navy #0c223e, navy-blue #134e7a, mid blue #4091bc, sky #9ad3ee, pale sky #bfe5f8, and the chip's warm gold #c48738. The hue drifts toward cyan as it lightens, so the tints are sky, not grey-blue. */ --dv-navy:#12395e;--dv-navy-2:#1f6fa3;--dv-ink:#0c223e;--dv-muted:#4d6780; --dv-gold:#c8963e;--dv-gold-ink:#8a5f14;--dv-gold-line:#e6d8b0;--dv-sky-line:#cfe2ee; --dv-well:linear-gradient(180deg,#eef7fc 0%,#d9edf8 100%); --dv-light:linear-gradient(180deg,#ffffff 0%,#f3f9fd 100%); --dv-cream:linear-gradient(180deg,#fefbf3 0%,#f8f0dc 100%); --dv-dark:radial-gradient(130% 70% at 50% 0%,#2f6f9d 0%,#2f6f9d00 62%),linear-gradient(180deg,#0c223e 0%,#134e7a 52%,#0e2c4d 100%); --dv-gold-fill:linear-gradient(135deg,#e6c070 0%,#cf9f48 52%,#b5822f 100%); --dv-navy-fill:linear-gradient(135deg,#134e7a 0%,#1f6fa3 100%); --dv-page:radial-gradient(#0c223e12 .6px,transparent .9px) 0 0/6px 6px,radial-gradient(90% 40% at 50% 0%,#ffffff 0%,#ffffff00 70%),linear-gradient(180deg,#f2f8fc 0%,#e4f0f8 55%,#dcebf5 100%); --dv-lift:0 1px 0 #ffffff inset,0 2px 4px #0c223e12,0 14px 30px #0c223e1c; /* Was a two-layer shadow (a 6px card shadow plus an 18px/36px blur underneath it) on every dark card at once -- "Good morning, Maya", the leader card, the scripture quote, the pilot invite, care cards, GRACE. On a phone that read as haze rather than lift. One soft layer now. */ --dv-lift-dark:0 1px 0 #ffffff24 inset,0 4px 12px #06142640; /* The tenant theme's own tokens (theme.css) are NOT restated here. They are Faithful's blues already, and the desktop portal reads the same ones; an earlier version re-pointed them at an indigo, which is exactly how the phone and the desktop came to disagree. */ } .app{color:var(--dv-ink);font-family:var(--font-ui,'Inter'),system-ui,sans-serif} /* :where() has no specificity, so any rule that names a size still wins. This only catches controls nobody styled, which otherwise get the browser's 13.33px system font. */ .app :where(button,input,select,textarea){font-family:inherit} .app :where(button){font-size:13px} .app :where(input:not([type=checkbox],[type=radio],[type=range]),textarea,select){font-size:16px} /* ── the page, the top bar, the tab bar ─────────────────────────────────── */ .app .screen:not(#_) > :is(.scroll,.fd-page){background:var(--dv-page)} .app .screen:not(#_){background:#eef3f6} .app .screen:not(#_) > :is(.home-nav,.nav), .app .screen:not(#_) > .fd-top{background:linear-gradient(180deg,#ffffff 0%,#f5f9fb 100%);border-bottom:1px solid var(--dv-gold-line);box-shadow:0 6px 18px #1136570f} .app .screen:not(#_) > :is(.home-nav,.nav) :is(.home-nav-title,.nav-title), .app .screen:not(#_) > .fd-top > span{font:600 17px/1.3 var(--font-ui,'Inter'),system-ui,sans-serif;color:var(--dv-navy)} .app .screen:not(#_) :is(.menu-btn,.fd-back,.fd-menu){width:44px;height:44px;border-radius:13px;background:var(--dv-well);border:1px solid var(--dv-sky-line);color:var(--dv-navy);box-shadow:0 1px 0 #fff inset} .app .screen:not(#_) > :is(.home-nav,.nav) .nav-btn{color:var(--dv-navy)} .app .nav-badge,.app .tab-badge{background:var(--dv-gold-fill);color:#0f223b;border-color:#fff} .app > .tabbar-zone{background:linear-gradient(180deg,#ffffff 0%,#f3f8fa 100%);border-top:1px solid var(--dv-gold-line)} .app .tabbar-zone .tabbar{background:none} .app .tabbar .tab{color:#5a7788} .app .tabbar .tab .tab-icon{color:#476178} .app .tabbar .tab.active{color:var(--dv-navy);font-weight:700} .app .tabbar .tab.active .tab-icon{background:var(--dv-well);color:var(--dv-navy);box-shadow:0 0 0 1px var(--dv-sky-line),0 1px 0 #fff inset} /* ── headings ───────────────────────────────────────────────────────────── */ .app .screen:not(#_) :is(h1,h2,h3,legend,.cn-widget-head strong,.jy-card-head,.gv-card-head strong,.dash-mod-title){font-family:var(--font-display,'Playfair Display'),Georgia,serif;font-weight:700;letter-spacing:-.2px;color:var(--dv-navy)} .app .screen:not(#_) h1{font-size:28px;line-height:1.14} .app .screen:not(#_) h2{font-size:22px;line-height:1.2} .app .screen:not(#_) :is(h3,legend){font-size:17px;line-height:1.25} /* headings that sit on a photograph or a dark card stay white */ .app .screen:not(#_) :is(.home-hero,.cn-hero,.cr-hero,.fmc-hero,.cn-ge-hero,.fmj-hero,.cn-fm-hero,.fm-impact-story,.fm-giving-images,.ld-hero,.fm-survey-invite,.fw-tip,.fp-profile,.dv-dark) :is(h1,h2,h3){color:#fff} /* ── light cards ────────────────────────────────────────────────────────── */ .app .screen:not(#_) :is(.card,.faq-card,.ld-chat,.ld-gallery,.gv-cause-card,.gv-card-block,.fm-impact-bridge,.give-history-card,.fm-care,.cn-post,.cn-widget,.cn-composer,.cn-event-card,.cn-group-row,.cn-person-row,.wj-lesson,.wj-panel-journal,.jy-card,.fd-card,.fp-preferences,.fp-page-guide > section,.mobile-leadership-care,.gps-question,.member-sample-history){ background:var(--dv-light);border:1px solid var(--dv-gold-line);border-radius:20px;box-shadow:var(--dv-lift) } .app .screen:not(#_) .fp-page-guide > section{border-radius:16px;box-shadow:none} .app .screen:not(#_) .faq-card.open{border-color:var(--dv-gold)} /* icon wells */ .app .screen:not(#_) :is(.fg-icon,.co-ico,.cr-req-ico,.give-history-icon,.ic-tile,.gv-feed-ico,.impact-notify-icon,.mobile-shortcut-icon,.cn-post-av-icon){border-radius:13px;background:var(--dv-well)!important;border:1px solid var(--dv-sky-line);color:var(--dv-navy);box-shadow:0 1px 0 #fff inset} .app .screen:not(#_) .ic-tile.ic-tile--active{background:var(--dv-navy-fill)!important;color:#fff;border-color:transparent} /* ── dark cards: one or two a screen, for the people and the invitations ── */ .app .screen:not(#_) :is(.fmc-care,.fm-wallet-footer,.cr-blessing,.fm-prayer,.dv-dark){background:var(--dv-dark);border:1.5px solid var(--dv-gold);border-radius:20px;box-shadow:var(--dv-lift-dark);color:#fff} .app .screen:not(#_) :is(.fmc-care,.fm-wallet-footer,.cr-blessing,.fm-prayer) :is(h2,h3,strong){color:#fff} .app .screen:not(#_) :is(.fmc-care,.fm-wallet-footer,.cr-blessing,.fm-prayer) :is(p,small,span,div){color:#d3e4ec} .app .screen:not(#_) :is(.fmc-care,.fm-prayer) button{min-height:44px;padding:0 18px;border:0;border-radius:22px;background:var(--dv-gold-fill);color:#0f223b;font-weight:600;box-shadow:0 1px 0 #ffffff80 inset,0 8px 16px #051d3e59} /* ── actions ────────────────────────────────────────────────────────────── */ .app .screen:not(#_) :is(.btn.dark,.btn.primary,.ld-begin,.cr-ba-primary,.cn-req-accept,.fd-button,.gps-submit,.lg-switch.active,button[type=submit]){min-height:44px;border:0;border-radius:22px;background:var(--dv-navy-fill);color:#fff;font-weight:600;box-shadow:0 8px 18px #143e6340} .app .screen:not(#_) :is(.btn.soft,.fd-secondary,.ld-switch-ghost,.cr-ba-btn:not(.cr-ba-primary),.cn-req-decline,.lg-profile-btn,.lg-switch:not(.active)){min-height:44px;border:1px solid var(--dv-gold-line);border-radius:22px;background:var(--dv-light);color:var(--dv-navy);font-weight:600;box-shadow:none} .app .screen:not(#_) :is(.btn,.fd-button,.ld-begin,.cr-ba-btn):active{filter:brightness(.94)} /* links that were text-only stay text, in the gold ink, underlined like Divinity's */ .app .screen:not(#_) :is(.lg-learn-link,.cn-widget-head span[onclick]){color:var(--dv-gold-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-color:#c8963e99;font-size:13px} /* ── chips ──────────────────────────────────────────────────────────────── */ .app .screen:not(#_) :is(.gv-fund,.gv-cause-ftab,.cn-feed-filter,.cn-ev-filter,.cn-wall-filter,.cn-filter,.cn-filter-chip,.jy-mood-chip,.cn-comp-act,.cn-pact,.gv-amount,.gps-choice){min-height:44px;border:1px solid var(--dv-gold-line);border-radius:22px;background:var(--dv-cream);color:var(--dv-navy);box-shadow:none} .app .screen:not(#_) :is(.gv-fund,.gv-cause-ftab,.cn-feed-filter,.cn-ev-filter,.cn-wall-filter,.cn-filter,.cn-filter-chip,.jy-mood-chip,.gv-amount).active, .app .screen:not(#_) .gps-choice:has(input:checked){background:var(--dv-navy-fill);border-color:transparent;color:#fff;box-shadow:0 6px 14px #143e6333} .app .screen:not(#_) :is(.cn-post-badge,.cn-reel-badge,.gv-cause-badge,.cr-dispatch-badge,.fd-tag){font-size:12px;font-weight:600;border-radius:12px;padding:3px 9px;border:1px solid var(--dv-gold);background:none;color:var(--dv-gold-ink)} /* ── segmented tabs: a tray, and the selected segment is a pill in it ───── */ .app .screen:not(#_) :is(.gv-tabs,.cn-tabs,.cn-people-tabs,.gv-activity-tabs,.wj-tabs,.jy-jtabs,.settings-tabs){display:flex;gap:4px;padding:4px;border:1px solid var(--dv-gold-line);border-radius:18px;background:var(--dv-light);box-shadow:var(--dv-lift);overflow:visible} .app .screen:not(#_) :is(.gv-tab,.cn-tab,.cn-people-tab,.gv-activity-tab,.jy-jtab,.wj-tabs button,.settings-tabs button){flex:1;min-height:44px;border:0;border-radius:14px;background:none;color:var(--dv-muted);font-size:13px;font-weight:600;box-shadow:none} .app .screen:not(#_) :is(.gv-tab,.cn-tab,.cn-people-tab,.gv-activity-tab,.jy-jtab).active, .app .screen:not(#_) :is(.wj-tabs,.settings-tabs) button[aria-selected=true]{background:var(--dv-navy-fill);color:#fff;box-shadow:0 8px 16px #143e6340} /* ── fields ─────────────────────────────────────────────────────────────── */ .app .screen:not(#_) :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),textarea,select){border:1px solid var(--dv-sky-line);border-radius:12px;background:#fbfdfe;color:var(--dv-ink)} .app .screen:not(#_) :is(input,textarea,select):focus-visible{outline:3px solid #64a8d0;outline-offset:1px} .app :is(input[type=checkbox],input[type=radio]){accent-color:#154066} .app :is(button,a,[role=button],summary):focus-visible{outline:3px solid #64a8d0;outline-offset:2px} /* ── the landing screen, so the first thing seen matches what follows ───── */ .device .landing-title{font-family:var(--font-display,'Playfair Display'),Georgia,serif} .device #landing-screen .landing-cta,.device #landing-screen button{border-radius:24px} /* ── the long tail: things every screen has, and a few that were simply small ── */ /* Footer links are on every screen; "Safety" and "Terms" are 38px wide as set. */ .app .fd-footer button{min-width:44px;min-height:44px} /* Filled and outlined actions that stopped at 32-42px. */ .app .screen:not(#_) :is(.gv-give-btn,.gv-browse-causes,.gv-commit-banner-btn,.gv-merchant-manage,.cn-wall-create,.fund,.cn-req-decline,.cn-req-accept,.jy-nav-btn,.fm-wallet-actions button,.linkish,.lg-learn-link){min-height:44px;min-width:44px} .app .screen:not(#_) :is(.linkish,.lg-learn-link){display:inline-flex;align-items:center} .app .screen:not(#_) :is(.gv-give-btn,.gv-browse-causes,.gv-merchant-manage,.cn-wall-create){border-radius:22px} .app .screen:not(#_) .gv-give-btn{border:0;background:var(--dv-gold-fill);color:#0f223b;font-weight:600;box-shadow:0 1px 0 #ffffff80 inset,0 10px 22px #11365733} .app .screen:not(#_) :is(.gv-browse-causes,.gv-merchant-manage,.cn-wall-create,.gv-commit-banner-btn){border:1px solid var(--dv-gold-line);background:var(--dv-light);color:var(--dv-navy);font-weight:600} .app .screen:not(#_) summary{min-height:44px;display:flex;align-items:center;cursor:pointer} /* Micro-labels that are reading text, not counts: 7 and 8px is not a size. */ .app .screen:not(#_) :is(.lg-human-live,.cn-wall-filter-badge,.cn-group-meta span,.cn-ev-meta span){font-size:12px;font-weight:600} .app .screen:not(#_) :is(#gv-donut-val strong,#gv-tx-impact-total strong,strong){font-weight:700} /* Fields are 16px everywhere. Below that iOS zooms the page on focus. */ .app .screen:not(#_) :is(input:not([type=checkbox],[type=radio],[type=range],[type=file]),textarea,select){font-size:16px;line-height:1.5} /* A long unbroken value must wrap, not push the page sideways. */ .app .screen:not(#_) > :is(.scroll,.fd-page){overflow-x:hidden} .app .screen:not(#_) :is(.fd-card,.fd-grid,[data-member-profile],[role=tabpanel]){min-width:0;max-width:100%} /* The shared icon set draws every glyph in fixed hex (a sky blue, or a pale blue meant for dark wells). Letting them take the colour of their context is what makes one icon work in a lavender well, on a dark card and in the tab bar. The duotone fills keep their own opacity, so they stay a tint. */ .app svg.grace-ic [stroke]{stroke:currentColor} .app svg.grace-ic [fill]:not([fill="none"]){fill:currentColor} /* Black was the old "primary". Nothing in this system is black. */ .app .screen:not(#_) :is(.ld-send,.cn-comment-send,.gv-amount.active){background:var(--dv-navy-fill);color:#fff;border:0} /* The survey's questions are cards like everything else you answer. */ .app #screen-survey fieldset{margin:0 0 16px;padding:16px;border:1px solid var(--dv-gold-line);border-radius:20px;background:var(--dv-light);box-shadow:var(--dv-lift)} /* Settings has four tabs; at equal width with 13px labels they ran 26px past the screen. They share the row and may wrap their label instead. */ .app .screen:not(#_) .settings-tabs{flex-wrap:nowrap;max-width:100%;box-sizing:border-box} .app .screen:not(#_) .settings-tabs button{min-width:0;padding:0 6px;white-space:normal;line-height:1.2} .app .screen:not(#_) :is(.ld-msg-nav,.fm-impact-bridge button){min-height:44px} .app .screen:not(#_) .cn-event-date span{font-size:12px;font-weight:600} /* ── GRACE: docked above the tab bar, on every tab ─────────────────────── faithful-mobile-finish.js moves #home-grace-wrap out of Home's scroll to the app itself and tags it .fm-grace-dock. It is the same card with the same input and send button; this only shows the orb and the input row, as one pill. It began on Home alone, which made GRACE reachable from one tab once it had left the side menu. The ID in these selectors is on purpose: it has to outrank ".is-dismissed .home-grace-card{display:none}" for anyone who dismissed the old card. */ .app > .fm-grace-dock{position:absolute;left:16px;right:16px;bottom:calc(var(--ios-tab-chrome-h) + 10px);margin:0;z-index:40;display:block} .app > .fm-grace-dock #home-grace-card{display:flex;align-items:center;gap:10px;height:56px;margin:0;padding:0 6px;border:0;border-radius:28px;background:#10273ff0;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 10px 30px #10273f59} .app > .fm-grace-dock :is(.home-grace-dismiss,.home-grace-body,.home-grace-foot,.home-grace-reopen){display:none} .app > .fm-grace-dock .home-grace-row{flex:none;display:flex;align-items:center} /* 44px, not the mockup's 36: the companion binds the orb as a button too. */ .app > .fm-grace-dock .grace-orb{width:44px;height:44px;min-width:44px;margin:0} .app > .fm-grace-dock .home-grace-inputrow{flex:1;min-width:0;display:flex;align-items:center;gap:6px;margin:0;padding:0;min-height:0;border:0;border-radius:0;background:none} /* 16px, not 15: below 16 iOS zooms the page when the field takes focus. It is the one off-scale size on Home, and it is a platform rule, not a choice. */ .app > .fm-grace-dock .home-grace-input{flex:1;min-width:0;min-height:44px;font-size:16px;color:#fff} .app > .fm-grace-dock .home-grace-input::placeholder{color:#ffffffc7} .app > .fm-grace-dock .home-grace-send{flex:none;width:44px;height:44px;border-radius:50%;font-size:17px} /* The round-up toast used to rise from where the dock now sits. */ .app .impact-float{bottom:calc(var(--ios-tab-chrome-h) + 76px)} /* the same dark surface as the other dark cards, with the gold send */ .app > .fm-grace-dock #home-grace-card{background:var(--dv-dark);border:1.5px solid var(--dv-gold);box-shadow:0 1px 0 #ffffff24 inset,0 4px 12px #091e3940} .app > .fm-grace-dock .home-grace-send{background:var(--dv-gold-fill);color:#0f223b;box-shadow:0 1px 0 #ffffff80 inset} .app > .fm-grace-dock .home-grace-input{border:0;border-radius:0;background:none} /* Where the bar stays out of the way: the survey (it is feedback ABOUT GRACE, and a prompt to ask GRACE sits oddly under it), the form and information screens, and full-screen video. The side menu and sheets simply cover it. */ /* And never on the landing screen. The landing sits over the app at z-index 30 and the bar is 40, so once the bar moved from Home's screen up to the app it showed through the sign-in page. Nobody has entered yet; there is nothing to ask GRACE about. */ .device.landing-active .app > .fm-grace-dock, .app:has(> :is(#screen-survey,.fd-destination).active) > .fm-grace-dock, .app:is(.watch-open,.divinity-open) > .fm-grace-dock{display:none} /* Every list that scrolls under the bar ends 96px early (the bar is 56, its offset 10, the rest is air), so the last thing on a page can be reached. */ .app .screen:not(#_):not(#screen-survey) > .scroll:not(.fd-page){padding-bottom:96px} /* Folded, the bar is the orb alone, at the thumb side. Same element, so the orb does not jump: the pill shrinks round it. */ .app > .fm-grace-dock{transition:left .24s ease} .app > .fm-grace-dock.is-collapsed{left:calc(100% - 16px - 60px)} .app > .fm-grace-dock.is-collapsed #home-grace-card{width:60px;height:60px;padding:0;justify-content:center;border-radius:50%} .app > .fm-grace-dock.is-collapsed .home-grace-inputrow{display:none} .app > .fm-grace-dock .fm-grace-fold{flex:none;order:2;width:44px;height:44px;border:0;border-radius:50%;background:none;color:#c9dce6;display:grid;place-items:center;cursor:pointer} .app > .fm-grace-dock .fm-grace-fold:active{background:#ffffff1a} .app > .fm-grace-dock .home-grace-input{order:1} .app > .fm-grace-dock .home-grace-send{order:3} .app > .fm-grace-dock :is(.fm-grace-fold,.grace-orb):focus-visible{outline:3px solid #f0d596;outline-offset:2px} @media(prefers-reduced-motion:reduce){.app > .fm-grace-dock{transition:none}} /* Toasts rose from where the bar now sits on every tab. */ .app .toast{bottom:calc(var(--ios-tab-chrome-h) + 76px)} /* ── spacing: one gutter, one rhythm, and no cards inside cards ─────────── Every screen but Home sets its gutter with the scroll's own padding; they ran 14 or 16px at the sides and 12 to 32px at the top. Blocks were spaced by whatever margin their own module chose, so some touched (the emergency button against the hero under it, a heading against its tabs) and some stood 40px apart. Now: 16px at the sides and the top, 16px between blocks. Home keeps its own layer, which already does this. */ .app .screen:not(#_):not(#screen-home) > .scroll:not(.fd-page){padding-top:16px;padding-left:16px;padding-right:16px} .app .screen:not(#_) > .fd-page{padding:16px 16px 32px} /* ":not(#_)" on the child as well: a few modules space their blocks with a rule that carries their screen's ID, and the rhythm has to outrank those. */ .app .screen:not(#_):not(#screen-home) > .scroll > :not(#_), .app .screen:not(#_) > .scroll > :is(.gv-panel,.cn-panel,.wj,[role=tabpanel]) > :not(#_), /* !important, and only here: a number of these blocks carry their margin as an inline style attribute in the page markup, which no selector outranks. */ .app .screen:not(#_) > .fd-page > .fd-grid > :not(#_){margin-top:0!important;margin-bottom:16px!important} .app .screen:not(#_) > .scroll > :is(.gv-panel,.cn-panel,.wj,[role=tabpanel]):not(#_){margin-bottom:0!important;padding:0} .app .screen:not(#_) > .scroll > :last-child:not(#_){margin-bottom:0!important} .app .screen:not(#_) > .fd-page > .fd-grid{gap:0} /* A card holds ROWS. The care options, the dispatch grid, history and feed lists were each given a border of their own, so inside a padding-less card they read as cards spilling to its edge. Rows get the card's inset and a hairline between them; the card is the only thing with a border. */ .app .screen:not(#_) .card > .care-option{margin:0;padding:14px 18px;border:0;border-top:1px solid var(--dv-sky-line);border-radius:0;background:none;box-shadow:none} .app .screen:not(#_) .card > .care-option--crisis{background:#fff4f1} .app .screen:not(#_) .card > .care-option:last-child{border-radius:0 0 19px 19px} .app .screen:not(#_) .card > .cr-dispatch-grid{padding:0 18px 18px} .app .screen:not(#_) .card{overflow:hidden} .app .screen:not(#_) :is(.give-history-list,.impact-notify-list,.impact-notify-total,.gv-history-foot){border-left:0;border-right:0;border-radius:0} .app .screen:not(#_) .gv-card-block > .gv-activity-tabs{margin:12px 14px} .app .screen:not(#_) .mobile-leadership-care{padding:18px} .app .screen:not(#_) .mobile-leadership-care .mobile-care-topics button{border-radius:14px} .app .screen:not(#_) .wj-legacy{margin-left:0;margin-right:0} /* Inside a card the inset is 16px, once. Give's cards padded 10 to 14px and then their titles and notes padded another 12, so a heading sat further in than the content under it. */ .app .screen:not(#_) :is(.gv-card-block,.gv-goal-strip){padding:16px} .app .screen:not(#_) :is(.gv-card-block,.gv-goal-strip) > :is(.fm-section-title,.fm-allocation-note){padding:0} .app .screen:not(#_) :is(.gv-card-block,.gv-goal-strip) > .fm-section-title{margin:0 0 12px} .app .screen:not(#_) :is(.gv-card-block,.gv-goal-strip) > .fm-allocation-note{margin:12px 0 0} /* The last screenful of My story: the footer follows the form at the same distance as everything else. */ .app .screen:not(#_) > .fd-page > .fd-footer{margin-top:0} /* The same goes for the app's toasts: one fired on the way out ("Returned to app") was drawn over the landing screen it had just returned to. */ .device.landing-active .app :is(.toast,.watch-donate-toast){visibility:hidden} /* A chip inside a dark card brings its own pale fill, and the dark card's rule turned its text pale too: 1.2:1. On a dark card a chip is an outline. */ .app .screen:not(#_) :is(.fmc-care,.fm-wallet-footer,.cr-blessing,.fm-prayer) :is(.cr-blessing-live,.fd-tag,[class*="-tag"]){background:none;border:1px solid var(--dv-gold);color:#f0d596} /* Two pieces of small text on Leaders that sat at 2.4 and 2.6:1. */ .app .screen:not(#_) .ld-msg-time{color:var(--dv-muted)} .app .screen:not(#_) .ai-mode-tag{background:var(--dv-well);border:1px solid var(--dv-sky-line);color:var(--dv-navy)} /* The survey moved to a desktop page; this screen is the signpost left behind. */ .app #screen-survey .fm-survey-elsewhere{margin:16px;padding:20px;border:1px solid var(--fm-line);border-radius:16px;background:var(--fm-soft);color:var(--fm-ink)} .app #screen-survey .fm-survey-elsewhere h2{margin:0 0 10px;font-family:var(--font-display);font-size:22px;line-height:1.2} .app #screen-survey .fm-survey-elsewhere p{margin:0 0 10px;font-size:15px;line-height:1.55} .app #screen-survey .fm-survey-elsewhere-note{color:var(--fm-muted);font-size:13px;margin-bottom:0}