/* ========================================================================= ForeverAfter.life — public site theme (layered on Bootstrap 5) Tone: serene & minimal · elegant serif display + clean sans · light-blue accent This file ONLY loads on the public marketing layout (templates/layout.html.twig), so the Bootstrap variable overrides below never reach the admin/portal pages, which keep their own styling. Bootstrap does layout/grid/utilities/components; the `ff-*` classes here are the custom elements Bootstrap doesn't provide. ========================================================================= */ /* ---- Design tokens ---------------------------------------------------- */ :root { --ff-accent: #5ba3d0; --ff-accent-deep: oklch(0.55 0.10 240); --ff-accent-soft: oklch(0.962 0.024 234); --ff-accent-tint: oklch(0.985 0.010 234); --ff-ink: oklch(0.285 0.014 252); --ff-ink-2: oklch(0.452 0.012 252); --ff-ink-3: oklch(0.605 0.010 252); --ff-line: oklch(0.918 0.006 240); --ff-line-soft: oklch(0.948 0.005 240); --ff-surface: #ffffff; --ff-surface-2: oklch(0.975 0.005 232); --ff-font-serif: "Cormorant Garamond", Georgia, serif; --ff-font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif; --ff-shadow-sm: 0 1px 2px oklch(0.4 0.02 250 / 0.04), 0 1px 1px oklch(0.4 0.02 250 / 0.04); --ff-shadow-lg: 0 18px 60px oklch(0.35 0.04 250 / 0.10), 0 6px 18px oklch(0.35 0.04 250 / 0.06); --ff-radius-sm: 8px; --ff-radius: 14px; --ff-radius-lg: 22px; /* Spacing scale (4px base), mirroring the design system's `--space-*`. New rules should reach for these rather than adding fresh literals; existing literal padding/margin values are being migrated incrementally. */ --ff-space-1: 4px; --ff-space-2: 8px; --ff-space-3: 12px; --ff-space-4: 16px; --ff-space-5: 20px; --ff-space-6: 24px; --ff-space-8: 32px; --ff-space-10: 40px; --ff-space-12: 48px; --ff-space-14: 56px; --ff-space-16: 64px; --ff-space-20: 80px; --ff-space-24: 96px; --ff-space-28: 112px; /* Semantic status. The base three carry the design system's values verbatim (`--color-success` / `--color-error` / `--color-warning`); they are the indicator shades — chips, borders, strokes, flash edges. The `-deep` shades are ours: the DS has no opinion on semantic colors under white text, and its base values are too light for it (white on the DS green is 2.35:1). Any surface that fills with a status color and writes white on top uses `-deep`, not the base. `-soft` / `-line` likewise stay ours, for tinted backgrounds and their borders. */ --ff-danger: oklch(0.62 0.16 25); --ff-danger-deep: oklch(0.45 0.16 25); --ff-danger-soft: oklch(0.97 0.02 25); --ff-danger-line: oklch(0.85 0.07 25); --ff-success: oklch(0.72 0.13 150); --ff-success-deep: oklch(0.56 0.13 150); --ff-warning: oklch(0.70 0.12 70); /* One site container width, shared by the navbar and every page's main section so they stay edge-aligned. Change here to resize site-wide. */ --ff-shell-max: 1400px; } /* The sticky-footer floor for , replacing Bootstrap's .min-vh-100. Bootstrap's utility is `min-height: 100vh !important`, and on a phone `100vh` is the *large* viewport — the height with the address bar hidden. While the bar is showing, that floor is taller than the screen, so a page whose content is shorter than the viewport scrolls past its own footer by the height of the browser chrome. `dvh` tracks the visible viewport instead and settles it. `vh` stays first as the fallback for browsers without `dvh`. */ .ff-minh { min-height: 100vh; min-height: 100dvh; } /* The shared page container — used by the navbar, footer and each page's main content. Replaces Bootstrap's .container on front-end pages. */ .ff-shell { width: 100%; max-width: var(--ff-shell-max); margin-inline: auto; padding-inline: 32px; } @media (max-width: 600px) { .ff-shell { padding-inline: 18px; } } /* Inside the navbar the shell is a flex row — restores the alignment Bootstrap gives `.navbar > .container`, which we lose by not using `.container`. */ .ff-header .ff-shell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } /* ---- Bootstrap variable overrides (scoped to this stylesheet's pages) -- */ :root { --bs-body-bg: var(--ff-surface); --bs-body-color: var(--ff-ink); --bs-body-font-family: var(--ff-font-sans); --bs-body-font-size: 1.0625rem; /* 17px */ --bs-body-line-height: 1.65; --bs-link-color: var(--ff-accent-deep); --bs-link-color-rgb: 50, 110, 168; --bs-link-hover-color: var(--ff-accent-deep); --bs-border-color: var(--ff-line); --bs-emphasis-color: var(--ff-ink); --bs-secondary-color: var(--ff-ink-2); --bs-tertiary-color: var(--ff-ink-3); --bs-primary: var(--ff-accent); --bs-primary-rgb: 91, 163, 208; } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; } /* The design uses no link underlines (Bootstrap underlines by default). Intentional underlines are reintroduced per-element on :hover. */ a { text-decoration: none; } ::selection { background: var(--ff-accent-soft); color: var(--ff-accent-deep); } * { scrollbar-width: thin; scrollbar-color: var(--ff-line) transparent; } /* ---- Type helpers ----------------------------------------------------- */ .ff-display { font-family: var(--ff-font-serif); font-weight: 500; font-size: clamp(3rem, 7vw, 5.6rem); line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; margin: 0; } .ff-display em { font-style: italic; color: var(--ff-accent-deep); } .ff-title { font-family: var(--ff-font-serif); font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; margin: 0; } .ff-lede { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--ff-ink-2); line-height: 1.6; text-wrap: pretty; } .ff-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ff-accent-deep); } .ff-muted { color: var(--ff-ink-3); } .ff-surface-2 { background: var(--ff-surface-2); } /* Generous vertical rhythm for full-width bands (Bootstrap's scale stops at 3rem). */ .ff-section { padding-block: clamp(64px, 9vw, 100px); } /* Cap measure for centred copy blocks. */ .ff-measure { max-width: 38rem; } /* ---- Brand ------------------------------------------------------------ */ .ff-brand { gap: 11px; } .ff-brand img { height: 22px; width: auto; } .ff-brand-name { font-family: var(--ff-font-serif); font-size: 1.36rem; letter-spacing: -0.01em; color: var(--ff-ink); } .ff-brand-name b { font-weight: 600; } .ff-brand-name span { color: var(--ff-accent-deep); font-weight: 600; } /* ---- Buttons (Bootstrap .btn, re-themed) ------------------------------ */ .btn { --bs-btn-border-radius: 999px; --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.8rem; --bs-btn-font-weight: 600; --bs-btn-font-size: 0.95rem; transition: all .2s ease; } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--ff-accent); --bs-btn-border-color: var(--ff-accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--ff-accent); --bs-btn-hover-border-color: var(--ff-accent); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--ff-accent); --bs-btn-active-border-color: var(--ff-accent); box-shadow: 0 6px 18px oklch(0.6 0.1 234 / 0.28); } .btn-primary:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 10px 26px oklch(0.6 0.1 234 / 0.34); } /* Ghost button — custom element (white, hairline border, accent on hover) */ .btn-ghost { --bs-btn-color: var(--ff-ink); --bs-btn-bg: var(--ff-surface); --bs-btn-border-color: var(--ff-line); --bs-btn-hover-color: var(--ff-accent-deep); --bs-btn-hover-bg: var(--ff-surface); --bs-btn-hover-border-color: var(--ff-accent); --bs-btn-active-color: var(--ff-accent-deep); --bs-btn-active-bg: var(--ff-surface); --bs-btn-active-border-color: var(--ff-accent); } /* ---- Header ----------------------------------------------------------- */ .ff-header { background: oklch(1 0 0 / 0.82); backdrop-filter: saturate(1.1) blur(14px); border-bottom: 1px solid var(--ff-line-soft); z-index: 1030; } .ff-header .nav-link { color: var(--ff-ink-2); font-weight: 500; border-radius: 8px; transition: color .2s; } .ff-header .nav-link:hover { color: var(--ff-accent-deep); } /* ---- Hero ------------------------------------------------------------- */ .ff-hero-in { max-width: 1000px; padding-top: clamp(80px, 13vh, 150px); padding-bottom: clamp(70px, 11vh, 120px); } .ff-mark img { height: 54px; width: auto; } .ff-note { font-size: 0.9rem; color: var(--ff-ink-3); } /* particle field backdrop — populated by the dustfield Stimulus controller */ .ff-dustfield { position: absolute; inset: 0; pointer-events: none; opacity: 0.9; } .ff-dustfield span { position: absolute; border-radius: 50%; background: var(--ff-accent); } /* ---- Feature cards (Bootstrap .card + accents) ------------------------ */ .ff-feature { border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-sm); padding: 32px 30px; } .ff-feature h3 { font-family: var(--ff-font-serif); font-size: 1.55rem; font-weight: 500; margin-bottom: 8px; } .ff-feature p { color: var(--ff-ink-2); margin: 0; line-height: 1.6; } .ff-feature-mark { width: 38px; height: 38px; border-radius: 10px; background: var(--ff-accent-soft); display: grid; place-items: center; margin-bottom: 20px; } .ff-feature-mark .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--ff-accent); } .ff-feature-mark.flame { background: linear-gradient(180deg, oklch(0.3 0.028 255), oklch(0.255 0.03 258)); } .ff-feature-mark .fl { width: 11px; height: 15px; border-radius: 50% 50% 50% 50% / 64% 64% 38% 38%; background: linear-gradient(180deg, #fff, var(--ff-accent)); box-shadow: 0 0 10px 2px oklch(0.7 0.12 234 / 0.7); } /* ---- Sample band ------------------------------------------------------ */ .ff-sample { border-top: 1px solid var(--ff-line-soft); border-bottom: 1px solid var(--ff-line-soft); } .ff-preview { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--ff-line); box-shadow: var(--ff-shadow-lg); background: var(--ff-surface); aspect-ratio: 4/3; } .ff-ph { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, oklch(0.95 0.012 234) 0 10px, oklch(0.965 0.010 234) 10px 20px); display: flex; align-items: center; justify-content: center; } .ff-ph-label { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--ff-ink-3); background: oklch(1 0 0 / 0.9); box-shadow: 0 1px 3px oklch(0.5 0.02 250 / 0.08); padding: 4px 9px; border-radius: 6px; } /* The featured "example" card — a calm, scaled echo of a real memorial hero, shown inside the 4:3 .ff-preview frame when an admin has featured a page. */ .ff-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: clamp(20px, 5%, 40px); text-align: center; background: linear-gradient(180deg, var(--ff-accent-tint) 0%, var(--ff-surface) 62%); } .ff-card-eyebrow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ff-accent-deep); font-weight: 600; } .ff-card-portrait { width: clamp(84px, 26%, 132px); aspect-ratio: 1; border-radius: 50%; background: var(--ff-accent-soft) center/cover no-repeat; border: 4px solid var(--ff-surface); box-shadow: var(--ff-shadow-lg); transition: transform .3s ease; } .ff-card-name { font-family: var(--ff-font-serif); font-weight: 600; font-size: clamp(1.5rem, 4.2vw, 2.1rem); line-height: 1.1; color: var(--ff-ink); } .ff-card-years { font-family: var(--ff-font-serif); font-size: clamp(1rem, 2.4vw, 1.25rem); color: var(--ff-ink-2); } .ff-card-epitaph { margin: 4px 0 0; max-width: 34ch; color: var(--ff-ink-2); font-style: italic; font-size: clamp(0.9rem, 2vw, 1.05rem); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ff-preview:hover .ff-card-portrait { transform: translateY(-2px); } /* ---- Pricing ---------------------------------------------------------- */ .ff-pricing { border-top: 1px solid var(--ff-line-soft); border-bottom: 1px solid var(--ff-line-soft); } .ff-price { position: relative; border: 1px solid var(--ff-line); border-radius: var(--ff-radius-lg); box-shadow: var(--ff-shadow-sm); padding: 34px 30px; } .ff-price.featured { border-color: var(--ff-accent); box-shadow: 0 18px 50px oklch(0.6 0.1 234 / 0.16); } @media (min-width: 992px) { .ff-price.featured { transform: translateY(-14px); padding-top: 44px; padding-bottom: 44px; } } .ff-price-badge { position: absolute; top: 18px; right: 18px; white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ff-accent-deep); background: var(--ff-accent-soft); padding: 5px 11px; border-radius: 999px; } .ff-price-name { font-family: var(--ff-font-serif); font-size: 1.7rem; font-weight: 500; } .ff-price-tag { color: var(--ff-ink-3); font-size: 0.94rem; } .ff-price-amount .num { font-family: var(--ff-font-serif); font-size: 3rem; font-weight: 500; line-height: 1; letter-spacing: -0.01em; margin-right: 7px; } .ff-price-amount .per { color: var(--ff-ink-3); font-size: 0.95rem; } .ff-price-sub { color: var(--ff-ink-3); font-size: 0.85rem; min-height: 1.1em; } .ff-price-feats { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--ff-line-soft); display: flex; flex-direction: column; gap: 13px; } .ff-price-feats li { display: flex; align-items: flex-start; gap: 11px; color: var(--ff-ink); font-size: 0.95rem; line-height: 1.45; } .ff-price-feats li.muted { color: var(--ff-ink-3); } .ff-tick { flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%; background: var(--ff-accent-soft); color: var(--ff-accent-deep); display: grid; place-items: center; font-size: 11px; font-weight: 700; } .ff-price-feats li.muted .ff-tick { background: var(--ff-surface-2); color: var(--ff-ink-3); } /* ---- CTA band --------------------------------------------------------- */ .ff-cta p { color: var(--ff-ink-2); } .ff-particles { display: inline-flex; align-items: center; gap: 6px; height: 10px; } .ff-particles i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--ff-accent); } .ff-particles i:nth-child(2) { opacity: 0.85; } .ff-particles i:nth-child(3) { opacity: 0.65; width: 3px; height: 3px; } .ff-particles i:nth-child(4) { opacity: 0.45; width: 3px; height: 3px; } .ff-particles i:nth-child(5) { opacity: 0.30; width: 2px; height: 2px; } .ff-particles i:nth-child(6) { opacity: 0.18; width: 2px; height: 2px; } .ff-particles i:nth-child(7) { opacity: 0.10; width: 2px; height: 2px; } /* ---- Footer ----------------------------------------------------------- */ .ff-footer { background: var(--ff-surface); border-top: 1px solid var(--ff-line-soft); } .ff-footer a { color: var(--ff-ink-3); font-size: 0.92rem; } .ff-footer a:hover { color: var(--ff-accent-deep); } /* ---- Auth (combined sign in / create account) ------------------------- */ .ff-auth { display: grid; grid-template-columns: 1.05fr 1fr; width: 100%; min-height: 100vh; min-height: 100dvh; } @media (max-width: 880px) { .ff-auth { grid-template-columns: 1fr; } } /* Left brand panel */ .ff-auth-aside { position: relative; overflow: hidden; background: linear-gradient(165deg, var(--ff-accent-soft), oklch(0.99 0.006 234)); border-right: 1px solid var(--ff-line-soft); display: flex; flex-direction: column; justify-content: space-between; padding: 40px 48px; } @media (max-width: 880px) { .ff-auth-aside { display: none; } } .ff-auth-aside-top, .ff-auth-aside-mid, .ff-auth-aside-foot { position: relative; z-index: 1; } .ff-auth-aside-top .ff-brand img { height: 40px; } .ff-auth-aside-mid { max-width: 420px; } .ff-auth-aside-mid .ff-display { font-size: clamp(2.4rem, 3.6vw, 3.4rem); line-height: 1.08; } .ff-auth-aside-mid p { color: var(--ff-ink-2); font-size: 1.12rem; line-height: 1.6; margin: 20px 0 0; max-width: 380px; } .ff-auth-aside-foot { color: var(--ff-ink-3); font-size: 0.9rem; display: flex; align-items: center; gap: 10px; } /* Right form side */ .ff-auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 32px; position: relative; } .ff-auth-back { position: absolute; top: 28px; left: 32px; font-size: 0.9rem; color: var(--ff-ink-3); display: inline-flex; align-items: center; gap: 7px; transition: color .2s; } .ff-auth-back:hover { color: var(--ff-accent-deep); } .ff-auth-mobile-brand { display: none; } @media (max-width: 880px) { .ff-auth-mobile-brand { display: inline-flex; margin-bottom: 36px; } } .ff-auth-card { width: 100%; max-width: 408px; } .ff-auth-head { text-align: center; margin-bottom: 28px; } .ff-auth-head .ff-title { font-size: 2.3rem; line-height: 1.1; } .ff-auth-head p { color: var(--ff-ink-2); margin: 8px 0 0; } /* Segmented tabs with sliding thumb (positioned by the auth controller) */ .ff-auth-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--ff-surface-2); border: 1px solid var(--ff-line); border-radius: 999px; padding: 4px; margin-bottom: 28px; } .ff-auth-tab { position: relative; z-index: 1; background: none; border: 0; padding: 11px 0; font-size: 0.95rem; font-weight: 600; color: var(--ff-ink-2); border-radius: 999px; transition: color .25s; cursor: pointer; } .ff-auth-tab.active { color: #fff; } .ff-auth-tab-thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: 0; background: var(--ff-accent); border-radius: 999px; box-shadow: 0 4px 12px oklch(0.6 0.1 234 / 0.35); transition: left .3s cubic-bezier(.2,.8,.2,1), width .3s cubic-bezier(.2,.8,.2,1); } /* Server-side error banner (bad credentials, expired session, …) */ .ff-auth-alert { margin: -8px 0 20px; padding: 11px 14px; font-size: 0.86rem; font-weight: 500; color: var(--ff-danger-deep); background: var(--ff-danger-soft); border: 1px solid var(--ff-danger-line); border-radius: var(--ff-radius-sm); } /* Fields */ .ff-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; } .ff-field-row { display: flex; align-items: baseline; justify-content: space-between; } .ff-field label { font-size: 0.84rem; font-weight: 600; color: var(--ff-ink-2); } .ff-hint { font-size: 0.82rem; color: var(--ff-accent-deep); font-weight: 500; } .ff-hint:hover { text-decoration: underline; } .ff-input-wrap { position: relative; } .ff-field input { width: 100%; font: inherit; font-size: 0.98rem; color: var(--ff-ink); background: var(--ff-surface-2); border: 1px solid var(--ff-line); border-radius: var(--ff-radius-sm); padding: 13px 14px; transition: border-color .2s, box-shadow .2s, background .2s; } .ff-field input::placeholder { color: var(--ff-ink-3); } .ff-field input:focus { outline: none; border-color: var(--ff-accent); background: var(--ff-surface); box-shadow: 0 0 0 4px var(--ff-accent-tint); } .ff-field.is-invalid input { border-color: oklch(0.62 0.16 25); background: oklch(0.985 0.012 25); } .ff-error { font-size: 0.8rem; color: oklch(0.55 0.17 25); opacity: 0; transform: translateY(-2px); transition: opacity .2s, transform .2s; } .ff-field.is-invalid .ff-error { opacity: 1; transform: none; } .ff-pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--ff-ink-3); font-size: 0.82rem; font-weight: 600; padding: 6px 9px; border-radius: 7px; cursor: pointer; } .ff-pw-toggle:hover { color: var(--ff-accent-deep); background: var(--ff-accent-tint); } /* Mode visibility (toggled by the `register` class on .ff-auth-card) */ .ff-auth-card .reg-only { display: none; } .ff-auth-card.register .login-only { display: none; } .ff-auth-card.register .ff-field.reg-only { display: flex; } .ff-auth-card.register p.reg-only { display: block; } .ff-auth-submit { margin-top: 8px; } /* Divider + social */ .ff-auth-or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--ff-ink-3); font-size: 0.85rem; } .ff-auth-or::before, .ff-auth-or::after { content: ""; height: 1px; flex: 1; background: var(--ff-line); } .ff-social { gap: 11px; } .ff-social:disabled { opacity: 0.55; cursor: not-allowed; } .ff-gmark { flex: 0 0 auto; } .ff-auth-terms { font-size: 0.8rem; color: var(--ff-ink-3); text-align: center; line-height: 1.5; margin: 18px 0 0; } .ff-auth-terms a { color: var(--ff-accent-deep); } .ff-auth-terms a:hover { text-decoration: underline; } /* Standalone surface used by the signed-in account home and the public password-reset pages (which render inside the normal site chrome). */ .ff-account-card { background: var(--ff-surface); border: 1px solid var(--ff-line); border-radius: 18px; box-shadow: 0 10px 30px oklch(0.6 0.03 234 / 0.08); } /* Signed-in account control in the site header: an avatar chip that opens a dropdown. Shared by every front-end page (the dashboard uses the same nav). */ .ff-acct-toggle { display: inline-flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent; padding: 6px 8px 6px 6px; border-radius: 999px; transition: background .2s, border-color .2s; } .ff-acct-toggle:hover, .ff-acct-toggle[aria-expanded="true"] { background: var(--ff-surface-2); border-color: var(--ff-line); } .ff-acct-toggle:focus { outline: none; } .ff-acct-toggle:focus-visible { outline: 2px solid var(--ff-accent); outline-offset: 2px; } .ff-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; background: linear-gradient(150deg, var(--ff-accent), var(--ff-accent-deep)); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 0.86rem; letter-spacing: 0.02em; box-shadow: 0 2px 8px oklch(0.6 0.1 234 / 0.3); } .ff-avatar.has-image { background-size: cover; background-position: center; background-repeat: no-repeat; color: transparent; } /* Impersonation (admin switch_user) banner — sits above the site header. */ .ff-impersonation-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 9px 16px; background: var(--ff-warning); color: #3a2c00; font-size: 0.9rem; font-weight: 600; text-align: center; } .ff-impersonation-bar a { color: #3a2c00; font-weight: 700; text-decoration: underline; } .ff-acct-name { font-size: 0.92rem; font-weight: 600; color: var(--ff-ink); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ff-acct-caret { width: 9px; height: 9px; flex: none; border-right: 1.6px solid var(--ff-ink-3); border-bottom: 1.6px solid var(--ff-ink-3); transform: rotate(45deg) translate(-1px,-1px); transition: transform .2s; margin-right: 4px; } .ff-acct-toggle[aria-expanded="true"] .ff-acct-caret { transform: rotate(-135deg) translate(-1px,-1px); } @media (max-width: 600px) { .ff-acct-name { display: none; } } .ff-account-menu { min-width: 232px; padding: 8px; margin-top: 8px; border: 1px solid var(--ff-line); border-radius: 16px; box-shadow: var(--ff-shadow-lg); } .ff-account-menu-head { padding: 4px 12px 12px; border-bottom: 1px solid var(--ff-line-soft); margin-bottom: 6px; } .ff-account-menu-head .nm { font-weight: 600; font-size: 0.95rem; color: var(--ff-ink); } .ff-account-menu-head .em { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ff-ink-3); font-size: 0.84rem; margin-top: 2px; } .ff-account-menu .dropdown-item { display: flex; align-items: center; gap: 11px; border-radius: 10px; padding: 10px 12px; font-size: 0.92rem; font-weight: 500; color: var(--ff-ink); } .ff-account-menu .dropdown-item:hover, .ff-account-menu .dropdown-item:focus { background: var(--ff-surface-2); color: var(--ff-accent-deep); } .ff-account-menu .dropdown-item .gi { width: 16px; height: 16px; flex: none; color: var(--ff-ink-3); } .ff-account-menu .dropdown-item:hover .gi, .ff-account-menu .dropdown-item:focus .gi { color: var(--ff-accent-deep); } .ff-account-menu .dropdown-divider { margin: 6px 0; border-top-color: var(--ff-line-soft); }