/** * ForceDream — fd-nav.css * Generated: 2026-06-16T14:34:44Z * sha256: 281882160710 * * Complete navigation CSS — all 141 fd-* classes. * Include via in . * * DO NOT EDIT MANUALLY. Regenerate via: python3 scripts/build_canonical_nav.py */ /* ══════════════════════════════════════════════════════ ForceDream Navigation — v36.18 CANONICAL Design lock: solution-emerging.html source Tokens: --bg --bg1 --srf --ink --ink2 --ink3 --acc --bdr --r --sans --mono ══════════════════════════════════════════════════════ */ /* Header */ .fd-header { position: sticky; top: 0; z-index: 1000; background: rgba(248,247,244,.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--bdr); font-family: var(--sans); } [data-theme="night"] .fd-header { background: rgba(9,9,15,.94); } .fd-header-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 58px; display: flex; align-items: center; gap: 4px; } /* Logo */ .fd-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .9375rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em; flex-shrink: 0; margin-right: 8px; } .fd-logo-mark { width: 26px; height: 26px; background: var(--acc); border-radius: 7px; display: flex; align-items: center; justify-content: center; } /* Nav list */ .fd-nav { display: flex; align-items: center; flex: 1; } .fd-nav-list { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 0; } /* Nav link */ .fd-nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 7px; font-size: .875rem; font-weight: 500; color: var(--ink2); text-decoration: none; background: none; border: none; cursor: pointer; white-space: nowrap; transition: color .15s, background .15s; font-family: var(--sans); line-height: 1; } .fd-nav-link:hover { color: var(--ink); background: var(--bg1); } .fd-nav-link.active { background: var(--accg); color: var(--acc); font-weight: 600; } .fd-caret { transition: transform .2s; flex-shrink: 0; opacity: .55; margin-left: 1px; } .fd-nav-trigger[aria-expanded="true"] { color: var(--acc); background: var(--accg); } .fd-nav-trigger[aria-expanded="true"] .fd-caret { transform: rotate(180deg); opacity: 1; } /* ── DROPDOWN MENUS ── */ .fd-nav-item { position: relative; } /* The dropdown panel */ .fd-drop { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--srf); border: 1px solid var(--bdr); border-radius: 12px; box-shadow: 0 16px 48px rgba(9,9,15,.14), 0 4px 16px rgba(9,9,15,.06); padding: 8px; z-index: 9999; min-width: 220px; animation: fdDropIn .14s cubic-bezier(.16,.07,.13,1.05); } [data-theme="night"] .fd-drop { box-shadow: 0 16px 48px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35); border-color: rgba(255,255,255,.1); } @keyframes fdDropIn { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Show when JS sets data-open OR on hover (fallback) */ .fd-nav-item[data-open="true"] > .fd-drop { display: block; } @media (hover: hover) { .fd-nav-item:hover > .fd-drop { display: block; } .fd-nav-item:hover > .fd-nav-trigger { color: var(--acc); background: var(--accg); } .fd-nav-item:hover > .fd-nav-trigger .fd-caret { transform: rotate(180deg); opacity: 1; } } /* 3-column mega menu */ .fd-drop-3col { display: none; position: absolute; top: calc(100% + 6px); left: -200px; background: var(--srf); border: 1px solid var(--bdr); border-radius: 12px; box-shadow: 0 16px 48px rgba(9,9,15,.14), 0 4px 16px rgba(9,9,15,.06); z-index: 9999; min-width: 780px; overflow: hidden; animation: fdDropIn .14s cubic-bezier(.16,.07,.13,1.05); } .fd-nav-item[data-open="true"] > .fd-drop-3col { display: grid; grid-template-columns: repeat(3, 1fr); } @media (hover: hover) { .fd-nav-item:hover > .fd-drop-3col { display: grid; grid-template-columns: repeat(3, 1fr); } } /* Column inside 3-col */ .fd-dcol { display: flex; flex-direction: column; gap: 1px; padding: 12px; border-right: 1px solid var(--bdr); } .fd-dcol:last-child { border-right: none; } .fd-dcol-featured { background: linear-gradient(160deg, rgba(0,71,255,.04), transparent); } /* Menu heading */ .fd-dhead { font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--acc); margin: 0 0 6px 4px; padding: 0; } /* Menu item */ .fd-ditem { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; font-size: .8125rem; font-weight: 500; color: var(--ink2); text-decoration: none; transition: color .1s, background .1s; } .fd-ditem:hover { color: var(--ink); background: var(--bg1); } .fd-ditem-icon { font-size: 13px; width: 20px; text-align: center; flex-shrink: 0; line-height: 1; } /* Featured item (with sub-text) */ .fd-ditem-feat { display: flex; align-items: flex-start; gap: 10px; padding: 9px 8px; border-radius: 7px; font-size: .8125rem; font-weight: 500; color: var(--ink2); text-decoration: none; transition: color .1s, background .1s; } .fd-ditem-feat:hover { color: var(--ink); background: var(--bg1); } .fd-ditem-feat:hover .fd-ditem-name { color: var(--acc); } .fd-ditem-body { display: flex; flex-direction: column; } .fd-ditem-name { font-weight: 700; font-size: .8125rem; color: var(--ink); display: flex; align-items: center; gap: 5px; } .fd-ditem-sub { font-size: .7rem; color: var(--ink3); margin-top: 2px; line-height: 1.35; } [data-theme="night"] .fd-ditem-sub { color: rgba(240,239,233,.4); } /* Divider */ .fd-ddiv { height: 1px; background: var(--bdr); margin: 6px 2px; } /* Badge */ .fd-badge { display: inline-flex; align-items: center; background: var(--accg); border: 1px solid var(--accb); color: var(--acc); font-family: var(--mono); font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 3px; letter-spacing: .04em; white-space: nowrap; vertical-align: middle; } .fd-badge-grn { background: var(--grng); border-color: var(--grnb); color: var(--grn); } .fd-badge-amb { background: rgba(180,83,9,.08); border-color: rgba(180,83,9,.2); color: var(--amb); } /* Header actions */ .fd-header-r { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; } .fd-ai-link { font-size: .75rem; font-weight: 600; color: var(--ink3); text-decoration: none; font-family: var(--mono); padding: 0 6px; opacity: .7; } .fd-ai-link:hover { color: var(--acc); opacity: 1; } .fd-theme-btn { width: 32px; height: 32px; border-radius: 7px; border: 1px solid var(--bdr); background: var(--srf); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--ink2); transition: background .15s; } .fd-theme-btn:hover { background: var(--bg1); color: var(--ink); } .fd-btn-login { font-size: .8125rem; font-weight: 600; color: var(--ink2); text-decoration: none; padding: 7px 13px; border-radius: 7px; border: 1px solid var(--bdr); background: var(--srf); transition: all .15s; display: inline-flex; align-items: center; } .fd-btn-login:hover { color: var(--ink); background: var(--bg1); border-color: var(--acc); } .fd-btn-cta { font-size: .8125rem; font-weight: 700; color: #fff; text-decoration: none; padding: 8px 16px; border-radius: 7px; background: var(--acc); border: none; cursor: pointer; transition: opacity .15s; font-family: var(--sans); display: inline-flex; align-items: center; } .fd-btn-cta:hover { opacity: .88; } /* Hamburger */ .fd-hbg { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; flex-direction: column; gap: 0; border-radius: 7px; border: 1px solid var(--bdr); background: var(--srf); cursor: pointer; flex-shrink: 0; } .fd-hbl { display: block; width: 16px; height: 1.5px; background: currentColor; border-radius: 2px; transition: all .2s; margin: 2.5px auto; color: var(--ink); } @media (max-width: 1080px) { .fd-nav { display: none; } .fd-hbg { display: flex; } .fd-ai-link { display: none; } } @media (max-width: 640px) { .fd-header-inner { padding: 0 16px; } .fd-btn-login { display: none; } } /* Mobile nav */ .fd-mob { position: fixed; top: 58px; left: 0; right: 0; background: var(--srf); border-bottom: 1px solid var(--bdr); padding: 12px; max-height: calc(100vh - 58px); overflow-y: auto; z-index: 998; box-shadow: 0 16px 40px rgba(9,9,15,.12); } .fd-mob[hidden] { display: none; } .fd-mob-sec { padding: 2px 0 6px; } .fd-mob-ey { font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--ink3); padding: 6px 8px 3px; display: block; } .fd-mob-link { display: flex; align-items: center; gap: 8px; padding: 9px 8px; border-radius: 7px; font-size: .875rem; font-weight: 500; color: var(--ink2); text-decoration: none; transition: background .1s, color .1s; } .fd-mob-link:hover { background: var(--bg1); color: var(--ink); } .fd-mob-div { height: 1px; background: var(--bdr); margin: 6px 0; } .fd-mob-actions { display: flex; gap: 8px; padding: 8px 0 2px; } .fd-mob-actions a { flex: 1; text-align: center; } /* Accessibility */ :focus-visible { outline: 2px solid var(--acc) !important; outline-offset: 2px !important; } .fd-ditem:focus-visible, .fd-ditem-feat:focus-visible, .fd-nav-trigger:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .fd-drop, .fd-drop-3col, .fd-caret, .fd-nav-link, .fd-ditem, .fd-ditem-feat { transition: none !important; animation: none !important; } } /* Skip link */ .skip-link { position:absolute;transform:translateY(-100%);background:var(--acc);color:#fff;padding:8px 16px;z-index:9999;font-weight:600;transition:transform .15s;border-radius:0 0 8px 0;text-decoration:none } .skip-link:focus { transform:translateY(0) } /* ── Globe dropdown — MUST have display:none default ──────────────────── */ .fd-globe-wrap{position:relative;display:flex} .fd-globe-btn{display:flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:7px;border:1px solid var(--bdr);background:var(--srf);cursor:pointer;color:var(--ink2);font-family:var(--sans);font-size:.8125rem;font-weight:600;transition:all .15s;flex-shrink:0;white-space:nowrap} .fd-globe-btn:hover{background:var(--bg1);color:var(--ink);border-color:var(--accb)} .fd-globe-drop{ display:none; /* HIDDEN by default — explicit */ position:absolute; top:calc(100% + 8px); right:0; background:var(--srf); border:1px solid var(--bdr); border-radius:12px; box-shadow:0 16px 48px rgba(9,9,15,.14),0 4px 16px rgba(9,9,15,.06); z-index:9999; min-width:360px; overflow:hidden; } /* ONLY show on data-open — NO hover fallback (breaks nav in preview) */ .fd-globe-wrap[data-open="true"] > .fd-globe-drop{display:block} [data-theme="night"] .fd-globe-drop{box-shadow:0 16px 48px rgba(0,0,0,.55),0 4px 16px rgba(0,0,0,.35);border-color:rgba(255,255,255,.1)} .fd-globe-head{padding:10px 14px 8px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:8px} .fd-globe-head-text{flex:1} .fd-globe-title{font-family:var(--mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--acc)} .fd-globe-sub{font-size:.7rem;color:var(--ink3);margin-top:1px} .fd-globe-grid{padding:8px 10px;display:grid;grid-template-columns:1fr 1fr;gap:2px} .fd-globe-mkt{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:7px;border:none;background:none;font-family:var(--sans);font-size:.8125rem;font-weight:500;color:var(--ink2);text-align:left;cursor:pointer;width:100%;transition:all .1s} .fd-globe-mkt:hover{background:var(--bg1);color:var(--ink)} .fd-globe-mkt-flag{font-size:16px;flex-shrink:0;line-height:1} .fd-globe-mkt-info{display:flex;flex-direction:column;min-width:0} .fd-globe-mkt-name{font-weight:600;font-size:.8125rem;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fd-globe-mkt-meta{font-family:var(--mono);font-size:.6rem;color:var(--ink3)} .fd-globe-langs{padding:6px 10px;border-top:1px solid var(--bdr);display:flex;flex-wrap:wrap;gap:4px} .fd-glang{padding:3px 9px;border-radius:20px;font-size:.75rem;font-weight:600;cursor:pointer;border:1px solid var(--bdr);background:none;color:var(--ink2);font-family:var(--sans);transition:all .1s} .fd-glang:hover,.fd-glang.on{background:var(--accg);border-color:var(--accb);color:var(--acc)} .fd-globe-open-full{width:100%;padding:9px 14px;background:var(--acc);color:#fff;border:none;font-family:var(--sans);font-size:.8125rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:opacity .15s} .fd-globe-open-full:hover{opacity:.88} .fd-globe-foot{padding:8px 12px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;background:var(--bg1)} .fd-globe-cur{font-family:var(--mono);font-size:.68rem;color:var(--ink3);display:flex;align-items:center;gap:5px} .fd-globe-browse{font-size:.8rem;font-weight:700;color:var(--acc);text-decoration:none;background:none;border:none;cursor:pointer;font-family:var(--sans)} .fd-globe-browse:hover{text-decoration:underline} /* ══════════════════════════════════════════════════════════════════════════ FD Locale Modal v36.18 — canonical tokens, daylight design ══════════════════════════════════════════════════════════════════════════ */ /* Backdrop — hidden by default, flex when [data-locale-modal="open"] */ .fd-locale-modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(9,9,15,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); align-items: center; justify-content: center; z-index: 20000; padding: 20px; animation: fdLocaleBackdropIn .2s ease; } @keyframes fdLocaleBackdropIn { from{opacity:0} to{opacity:1} } /* Explicit open trigger — no hidden attribute, no classList */ .fd-locale-modal-backdrop[data-locale-modal="open"] { display: flex; } /* Modal panel */ .fd-locale-modal { background: var(--srf); color: var(--ink); border: 1px solid var(--bdr); border-radius: 16px; width: min(960px, 100%); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(9,9,15,.22), 0 8px 24px rgba(9,9,15,.12); animation: fdLocaleModalIn .2s cubic-bezier(.16,.07,.13,1.05); overflow: hidden; } @keyframes fdLocaleModalIn { from{opacity:0;transform:scale(.97) translateY(-8px)} to{opacity:1;transform:scale(1) translateY(0)} } [data-theme="night"] .fd-locale-modal { box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.4); } /* Header */ .fd-locale-header { padding: 18px 24px 16px; border-bottom: 1px solid var(--bdr); display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .fd-locale-header-icon { color: var(--acc); flex-shrink: 0; } .fd-locale-header-text { flex: 1; } .fd-locale-header-title { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; } .fd-locale-header-sub { font-family: var(--mono); font-size: .7rem; color: var(--ink3); margin-top: 2px; } .fd-locale-search-wrap { position: relative; flex-shrink: 0; } .fd-locale-search { width: 200px; padding: 7px 12px; border: 1px solid var(--bdr); border-radius: 8px; background: var(--bg1); color: var(--ink); font-family: var(--sans); font-size: .875rem; outline: none; transition: border-color .15s; } .fd-locale-search:focus { border-color: var(--accb); } .fd-locale-search::placeholder { color: var(--ink3); } .fd-locale-close-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--bdr); background: var(--bg1); cursor: pointer; font-size: 18px; color: var(--ink2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .12s, color .12s; } .fd-locale-close-btn:hover { background: var(--bg2); color: var(--ink); } /* Body: left regions + right panel */ .fd-locale-body { display: grid; grid-template-columns: 210px 1fr; flex: 1; min-height: 0; overflow: hidden; } @media (max-width: 640px) { .fd-locale-body { grid-template-columns: 1fr; } } /* Regions sidebar */ .fd-locale-regions { border-right: 1px solid var(--bdr); padding: 8px; overflow-y: auto; background: var(--bg1); } .fd-locale-region-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: none; border-radius: 7px; background: transparent; cursor: pointer; font-family: var(--sans); font-size: .8125rem; font-weight: 500; color: var(--ink2); text-align: left; transition: background .1s, color .1s; margin-bottom: 1px; } .fd-locale-region-btn:hover { background: var(--bg2); color: var(--ink); } .fd-locale-region-btn[data-active="true"] { background: var(--accg); color: var(--acc); font-weight: 700; } .fd-lrb-flag { font-size: 16px; flex-shrink: 0; } .fd-lrb-name { flex: 1; line-height: 1.3; } .fd-lrb-count { font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--ink4); } /* Main right panel */ .fd-locale-main { display: flex; flex-direction: column; overflow: hidden; min-height: 0; } /* Country list */ .fd-locale-country-scroll { flex: 1; overflow-y: auto; padding: 14px 16px 8px; min-height: 0; } .fd-locale-region-heading { font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--acc); margin-bottom: 10px; } .fd-locale-country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px; } .fd-locale-country-btn { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; font-family: var(--sans); font-size: .8125rem; color: var(--ink2); text-align: left; transition: all .1s; } .fd-locale-country-btn:hover { background: var(--bg1); border-color: var(--bdr); color: var(--ink); } .fd-locale-country-btn[data-active="true"] { background: var(--accg); border-color: var(--accb); color: var(--acc); } .fd-lcb-flag { font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 1px; } .fd-lcb-info { display: flex; flex-direction: column; min-width: 0; } .fd-lcb-name { font-weight: 600; font-size: .8125rem; color: var(--ink); line-height: 1.2; } .fd-locale-country-btn[data-active="true"] .fd-lcb-name { color: var(--acc); } .fd-lcb-meta { font-family: var(--mono); font-size: .62rem; color: var(--ink3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fd-lcb-cert { display: inline-flex; background: var(--grng); border: 1px solid var(--grnb); color: var(--grn); font-family: var(--mono); font-size: 8px; font-weight: 700; padding: 0 4px; border-radius: 2px; margin-top: 2px; width: fit-content; } .fd-lcb-pp { display: inline-flex; background: var(--accg); border: 1px solid var(--accb); color: var(--acc); font-family: var(--mono); font-size: 8px; font-weight: 700; padding: 0 4px; border-radius: 2px; margin-top: 1px; width: fit-content; } /* Bottom strip: language + age + apply */ .fd-locale-bottom { flex-shrink: 0; border-top: 1px solid var(--bdr); } .fd-locale-lang-row { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--bdr); flex-wrap: wrap; } .fd-locale-lang-label { font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink3); flex-shrink: 0; } .fd-locale-lang-pills { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; } .fd-locale-lang-pill { padding: 3px 10px; border-radius: 20px; border: 1px solid var(--bdr); background: none; color: var(--ink2); font-family: var(--sans); font-size: .75rem; font-weight: 600; cursor: pointer; transition: all .1s; } .fd-locale-lang-pill:hover { background: var(--bg1); color: var(--ink); } .fd-locale-lang-pill[data-active="true"] { background: var(--accg); border-color: var(--accb); color: var(--acc); } /* Age panel */ .fd-age-panel { padding: 10px 16px; border-bottom: 1px solid var(--bdr); display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; background: var(--bg1); } .fd-age-title { font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink3); margin-bottom: 6px; } .fd-age-options { display: flex; gap: 16px; flex-wrap: wrap; } .fd-age-option { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--ink2); cursor: pointer; } .fd-age-option input { cursor: pointer; accent-color: var(--acc); } .fd-compliance-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .fd-compliance-tag { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: var(--accg); border: 1px solid var(--accb); color: var(--acc); } .fd-compliance-fw { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: var(--grng); border: 1px solid var(--grnb); color: var(--grn); } /* Footer apply row */ .fd-locale-footer { padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg1); } .fd-locale-current-state { font-family: var(--mono); font-size: .72rem; color: var(--ink3); display: flex; align-items: center; gap: 6px; } .fd-locale-cur-flag { font-size: 14px; } .fd-locale-apply-btn { display: flex; align-items: center; gap: 8px; padding: 9px 24px; background: var(--acc); color: #fff; border: none; border-radius: 8px; font-family: var(--sans); font-size: .875rem; font-weight: 700; cursor: pointer; transition: opacity .15s; min-height: 40px; } .fd-locale-apply-btn:hover { opacity: .88; } .fd-locale-cancel-btn { padding: 9px 16px; background: none; color: var(--ink2); border: 1px solid var(--bdr); border-radius: 8px; font-family: var(--sans); font-size: .875rem; font-weight: 500; cursor: pointer; transition: all .15s; } .fd-locale-cancel-btn:hover { border-color: var(--acc); color: var(--acc); } /* Minor/age-restricted overlay (if minor selected) */ .fd-minor-note { font-size: .75rem; color: var(--amb); display: none; padding: 6px 10px; background: rgba(180,83,9,.06); border: 1px solid rgba(180,83,9,.18); border-radius: 6px; margin-top: 4px; } .fd-minor-note.show { display: block; } /* Accessibility */ .fd-locale-region-btn:focus-visible, .fd-locale-country-btn:focus-visible, .fd-locale-lang-pill:focus-visible, .fd-locale-apply-btn:focus-visible, .fd-locale-close-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .fd-locale-modal-backdrop, .fd-locale-modal { animation: none !important; } } /* ── Globe dropdown — MUST have display:none default ──────────────────── */ .fd-globe-wrap{position:relative;display:flex} .fd-globe-btn{display:flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:7px;border:1px solid var(--bdr);background:var(--srf);cursor:pointer;color:var(--ink2);font-family:var(--sans);font-size:.8125rem;font-weight:600;transition:all .15s;flex-shrink:0;white-space:nowrap} .fd-globe-btn:hover{background:var(--bg1);color:var(--ink);border-color:var(--accb)} .fd-globe-drop{ display:none; /* HIDDEN by default — explicit */ position:absolute; top:calc(100% + 8px); right:0; background:var(--srf); border:1px solid var(--bdr); border-radius:12px; box-shadow:0 16px 48px rgba(9,9,15,.14),0 4px 16px rgba(9,9,15,.06); z-index:9999; min-width:360px; overflow:hidden; } /* ONLY show on data-open — NO hover fallback (breaks nav in preview) */ .fd-globe-wrap[data-open="true"] > .fd-globe-drop{display:block} [data-theme="night"] .fd-globe-drop{box-shadow:0 16px 48px rgba(0,0,0,.55),0 4px 16px rgba(0,0,0,.35);border-color:rgba(255,255,255,.1)} .fd-globe-head{padding:10px 14px 8px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:8px} .fd-globe-head-text{flex:1} .fd-globe-title{font-family:var(--mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--acc)} .fd-globe-sub{font-size:.7rem;color:var(--ink3);margin-top:1px} .fd-globe-grid{padding:8px 10px;display:grid;grid-template-columns:1fr 1fr;gap:2px} .fd-globe-mkt{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:7px;border:none;background:none;font-family:var(--sans);font-size:.8125rem;font-weight:500;color:var(--ink2);text-align:left;cursor:pointer;width:100%;transition:all .1s} .fd-globe-mkt:hover{background:var(--bg1);color:var(--ink)} .fd-globe-mkt-flag{font-size:16px;flex-shrink:0;line-height:1} .fd-globe-mkt-info{display:flex;flex-direction:column;min-width:0} .fd-globe-mkt-name{font-weight:600;font-size:.8125rem;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fd-globe-mkt-meta{font-family:var(--mono);font-size:.6rem;color:var(--ink3)} .fd-globe-langs{padding:6px 10px;border-top:1px solid var(--bdr);display:flex;flex-wrap:wrap;gap:4px} .fd-glang{padding:3px 9px;border-radius:20px;font-size:.75rem;font-weight:600;cursor:pointer;border:1px solid var(--bdr);background:none;color:var(--ink2);font-family:var(--sans);transition:all .1s} .fd-glang:hover,.fd-glang.on{background:var(--accg);border-color:var(--accb);color:var(--acc)} .fd-globe-open-full{width:100%;padding:9px 14px;background:var(--acc);color:#fff;border:none;font-family:var(--sans);font-size:.8125rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:opacity .15s} .fd-globe-open-full:hover{opacity:.88} .fd-globe-foot{padding:8px 12px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;background:var(--bg1)} .fd-globe-cur{font-family:var(--mono);font-size:.68rem;color:var(--ink3);display:flex;align-items:center;gap:5px} .fd-globe-browse{font-size:.8rem;font-weight:700;color:var(--acc);text-decoration:none;background:none;border:none;cursor:pointer;font-family:var(--sans)} .fd-globe-browse:hover{text-decoration:underline} .s-wrap{max-width:1280px;margin:0 auto;padding:0 24px}.skip-link{position:absolute;transform:translateY(-100%);background:var(--acc);color:#fff;padding:8px 16px;z-index:9999;font-weight:600;transition:transform .15s;border-radius:0 0 8px 0;text-decoration:none}.skip-link:focus{transform:translateY(0)} /* ── TOKENS ── */ :root{--bg:#f8f7f4;--bg1:#f0efe9;--bg2:#e8e6df;--srf:#fff;--ink:#09090f;--ink2:rgba(9,9,15,.6);--ink3:rgba(9,9,15,.38);--ink4:rgba(9,9,15,.12);--bdr:rgba(9,9,15,.1);--bdrs:rgba(9,9,15,.06);--acc:#0047ff;--accg:rgba(0,71,255,.08);--accb:rgba(0,71,255,.22);--grn:#16a34a;--grng:rgba(22,163,74,.09);--grnb:rgba(22,163,74,.22);--amb:#b45309;--sans:"DM Sans",system-ui,sans-serif;--r:10px;} [data-theme="night"]{--bg:#09090f;--bg1:#0f0f1a;--bg2:#141422;--srf:#141422;--ink:#f0efe9;--ink2:rgba(240,239,233,.65);--ink3:rgba(240,239,233,.38);--ink4:rgba(240,239,233,.1);--bdr:rgba(240,239,233,.09);--bdrs:rgba(240,239,233,.05);--acc:#4d7cff;--accg:rgba(77,124,255,.1);--accb:rgba(77,124,255,.24);--grn:#16c962;} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;} body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;} .wrap{max-width:1280px;margin:0 auto;padding:0 24px;} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .skip-link{position:absolute;transform:translateY(-100%);background:var(--acc);color:#fff;padding:8px 16px;z-index:9999;font-weight:600;transition:transform .15s;border-radius:0 0 8px 0;} .skip-link:focus{transform:translateY(0);} /* ── NAV ─────────────────────────────────────────────────────────────── */ [data-theme="night"] .nav{background:rgba(9,9,15,.92);} .logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.0625rem;color:var(--ink);letter-spacing:-.015em;flex-shrink:0;} .lm{width:28px;height:28px;background:var(--acc);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .nl.on{background:var(--accg);color:var(--acc);font-weight:600;} .ai-lnk:hover{color:var(--acc);} .btn-log:hover{border-color:var(--acc);color:var(--acc);} .btn-cta{background:var(--acc);color:#fff;border:none;border-radius:8px;padding:8px 18px;font-family:var(--sans);font-size:.875rem;font-weight:600;cursor:pointer;min-height:36px;transition:all .15s;text-decoration:none;display:flex;align-items:center;} .btn-cta:hover{opacity:.9;} .hbl{width:20px;height:2px;background:var(--ink);border-radius:2px;transition:all .2s;} @media(max-width:900px){} /* ═══════════════════════════════════════════════════════ FORCEDREAM.COM — PAGE CSS v1.1 CANONICAL Single block. Zero duplicates. Zero accumulation. Visual reference: fd-integrations.html only. ═══════════════════════════════════════════════════════ */ /* ── BASE ─────────────────────────────────────────────── */ *,*::before,*::after { box-sizing:border-box; } h1,h2,h3,h4 { margin:0; line-height:1.2; } p { margin:0; } a { color:inherit; text-decoration:none; } /* ── SECTION WRAPPER ──────────────────────────────────── */ /* Uses spec: container 1280px, padding 0 24px, spacing 64px */ .s-wrap { max-width:1280px; margin:0 auto; padding:0 24px; } .section { padding:64px 0; } .section.alt { background:var(--bg1); } /* ── SECTION LABELS ───────────────────────────────────── */ .ey { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); margin-bottom:10px; } .sh { font-size:clamp(1.4rem,3vw,2rem); font-weight:800; color:var(--ink); margin-bottom:12px; } .ss { font-size:1rem; color:var(--ink2); line-height:1.7; max-width:560px; margin-bottom:36px; } /* ── HERO ─────────────────────────────────────────────── */ .hero { max-width:1280px; margin:0 auto; padding:72px 24px 56px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; } @media(max-width:960px) { .hero { grid-template-columns:1fr; padding:48px 24px 40px; gap:36px; } } @media(max-width:480px) { .hero { padding:32px 16px 32px; } } .hero-ey { font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--acc); display:flex; align-items:center; gap:6px; margin-bottom:16px; } .hero-ey::before { content:'→'; } .hero h1 { font-size:clamp(1.9rem,4vw,2.8rem); font-weight:800; color:var(--ink); margin-bottom:12px; line-height:1.12; } .hero-sub { font-size:1rem; color:var(--ink2); line-height:1.7; margin-bottom:24px; max-width:460px; } /* Metric grid — 2 rows × 3 columns (spec: 6 total) */ .metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-bottom:24px; } .metric-card { background:var(--bg1); border:1px solid var(--bdr); border-radius:var(--r); padding:14px 16px; transition:border-color .15s; } .metric-card:hover { border-color:var(--accb); } .m-icon { color:var(--acc); margin-bottom:6px; } .m-lbl { font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin-bottom:3px; } .m-val { font-family:var(--mono); font-weight:700; font-size:1.5rem; color:var(--acc); line-height:1.1; } .m-val.g { color:var(--grn); } .m-val.k { color:var(--ink); } .m-unit { font-family:var(--mono); font-size:9px; color:var(--ink3); } /* Trust strip */ .trust-row { display:flex; align-items:center; flex-wrap:wrap; gap:8px; row-gap:4px; margin-bottom:20px; font-size:13px; color:var(--ink2); } .trust-green { background:var(--grng); color:var(--grn); font-weight:600; padding:3px 12px; border-radius:20px; white-space:nowrap; } .trust-sep { color:var(--bdr); } .trust-badges { font-family:var(--mono); font-size:11px; font-weight:700; color:var(--ink3); white-space:nowrap; } /* CTAs */ .cta-row { display:flex; gap:10px; flex-wrap:wrap; } .btn-p { background:var(--acc); color:#fff; border:none; border-radius:var(--r); padding:11px 24px; font-family:var(--sans); font-size:14px; font-weight:600; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; text-decoration:none; transition:opacity .15s; } .btn-p:hover { opacity:.88; } .btn-s { background:none; color:var(--ink); border:1px solid var(--bdr); border-radius:var(--r); padding:11px 24px; font-family:var(--sans); font-size:14px; font-weight:500; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; text-decoration:none; transition:border-color .15s; } .btn-s:hover { border-color:var(--accb); } /* ── TRON — right hero column ─────────────────────────── */ .tron-col{display:flex;flex-direction:column;align-self:start;width:100%} .tron-label { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:12px; color:var(--ink2); } .tron-dot { width:7px; height:7px; border-radius:50%; background:var(--grn); box-shadow:0 0 6px var(--grn); animation:blink 2s ease-in-out infinite; } .tron-lbl-main { font-weight:600; color:var(--ink); } .tron-lbl-sep { color:var(--ink3); } .tron-lbl-sub { font-size:11px; color:var(--ink3); } .tron { background:#0d1117; border:1px solid rgba(0,255,180,.18); border-radius:10px; overflow:hidden; font-family:var(--mono); font-size:11px; } .tron-bar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; background:rgba(0,255,180,.04); border-bottom:1px solid rgba(0,255,180,.12); } .tron-dots { display:flex; gap:5px; } .tron-dot-red { width:10px;height:10px;border-radius:50%;background:#ff5f57; } .tron-dot-amb { width:10px;height:10px;border-radius:50%;background:#ffbd2e; } .tron-dot-grn { width:10px;height:10px;border-radius:50%;background:#28ca41; } .tron-title { font-size:10px; letter-spacing:.1em; color:rgba(0,255,180,.5); } .tron-live { font-size:10px; color:#00ffb4; animation:blink 1.8s ease-in-out infinite; } .tron-stats { display:grid; grid-template-columns:1fr 1fr; padding:10px 14px; gap:4px 0; border-bottom:1px solid rgba(0,255,180,.08); } .tron-k { font-size:9px; letter-spacing:.1em; color:rgba(0,255,180,.45); padding:3px 0; } .tron-v { font-size:10px; font-weight:700; color:#00ffb4; text-align:right; padding:3px 0; } .tron-v.amb { color:#f59e0b; } .tron-log { height:148px; overflow:hidden; padding:8px 14px; display:flex; flex-direction:column; gap:3px; border-bottom:1px solid rgba(0,255,180,.08); } .tron-row { display:flex; gap:8px; font-size:9.5px; white-space:nowrap; } .tron-ts { color:rgba(0,255,180,.35); flex-shrink:0; } .tron-tag { padding:1px 5px; border-radius:3px; font-size:9px; font-weight:700; flex-shrink:0; } .tron-msg { color:rgba(0,255,180,.6); overflow:hidden; text-overflow:ellipsis; } .tron-beacons { padding:8px 14px 6px; display:flex; flex-wrap:wrap; gap:3px; border-bottom:1px solid rgba(0,255,180,.08); } .bcn { width:8px; height:8px; border-radius:1px; background:rgba(0,255,180,.2); } .bcn.on { background:#00ffb4; box-shadow:0 0 4px #00ffb4; } .tron-foot { display:flex; align-items:center; justify-content:space-between; padding:6px 14px; font-size:9px; color:rgba(0,255,180,.4); } .tron-uptime { color:#00ffb4; font-weight:700; } @media(max-width:960px) { .tron-col{display:flex;flex-direction:column;align-self:start;width:100%} } @media(max-width:500px) { .tron-stats { grid-template-columns:1fr; } } /* ── WHY — 2 column ───────────────────────────────────── */ .why-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; } @media(max-width:768px) { .why-grid { grid-template-columns:1fr; gap:28px; } } .why-/* body defined in foundation */ .why-links { display:flex; flex-wrap:wrap; gap:8px 20px; } .why-link { font-size:13px; font-weight:600; color:var(--acc); display:flex; align-items:center; gap:4px; } .why-link:hover { text-decoration:underline; } .why-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .why-stat { background:var(--bg1); border:1px solid var(--bdr); border-radius:var(--r); padding:18px; } .why-val { font-size:1.6rem; font-weight:900; color:var(--acc); margin-bottom:4px; } .why-val.g { color:var(--grn); } .why-lbl { font-size:12px; font-weight:600; color:var(--ink); margin-bottom:2px; } .why-sub { font-size:11px; color:var(--ink3); } /* ── HOW IT WORKS — 3 boxes (spec locked) ─────────────── */ .how-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:24px; } @media(max-width:768px) { .how-grid { grid-template-columns:1fr; } } .how-card { display:flex; flex-direction:column; } .how-icon { color:var(--acc); margin-bottom:12px; } .how-num { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--acc); letter-spacing:.1em; margin-bottom:10px; } .how-title { font-size:16px; font-weight:700; color:var(--ink); margin-bottom:8px; } .how-desc { font-size:14px; color:var(--ink2); line-height:1.65; } /* ── CAPABILITY GRID — 20 boxes (spec locked) ─────────── */ .cap-outer { padding:64px 0; } .cap-head-wrap { max-width:1280px; margin:0 auto; padding:0 24px; } .cap-head-ey { font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); display:flex; align-items:center; gap:7px; margin-bottom:10px; } .cap-head-ey::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--grn); box-shadow:0 0 6px var(--grn); display:inline-block; animation:blink 2s infinite; } .cap-head-h2 { font-size:clamp(1.3rem,2.5vw,1.75rem); font-weight:800; color:var(--ink); margin-bottom:6px; } .cap-head-sub { font-size:1rem; color:var(--ink2); margin-bottom:24px; } .cap-grid { max-width:1280px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--bdr); border:1px solid var(--bdr); border-radius:14px; overflow:hidden; } @media(max-width:1100px) { .cap-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } } @media(max-width:720px) { .cap-grid { grid-template-columns:repeat(2,1fr); } } @media(max-width:440px) { .cap-grid { grid-template-columns:1fr; } } .cap-card { background:var(--bg); padding:20px; display:flex; flex-direction:column; text-decoration:none; cursor:pointer; transition:background .14s; } .cap-card:hover { background:var(--bg1); } .cap-card:focus-visible { outline:2px solid var(--acc); outline-offset:-2px; } [data-theme="night"] .cap-card { background:#09090f; } [data-theme="night"] .cap-card:hover { background:#0e0e1e; } .cap-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; } .cap-dot { width:8px; height:8px; border-radius:50%; background:var(--col,var(--acc)); flex-shrink:0; } .cap-name { font-size:14px; font-weight:700; color:var(--ink); margin:0; } .cap-desc { font-size:12px; color:var(--ink2); line-height:1.6; margin:0 0 8px; flex:1; } .cap-integ { font-size:10px; font-family:var(--mono); color:var(--ink3); margin-bottom:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cap-foot { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; padding-top:12px; border-top:1px solid var(--bdr); margin-top:auto; } .cap-count { font-size:10px; font-family:var(--mono); color:var(--ink3); font-weight:600; } .cap-cta { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; color:#fff; background:var(--col,var(--acc)); padding:5px 11px; border-radius:20px; white-space:nowrap; align-self:flex-start; transition:opacity .15s; } .cap-cta:hover { opacity:.82; gap:4px; } .cap-cta:hover { gap:7px; } .cap-footer-row { max-width:1280px; margin:28px auto 0; padding:0 24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; } .cap-footer-a, .cap-footer-b { font-size:14px; font-weight:600; text-decoration:none; padding:11px 24px; border-radius:var(--r); min-height:46px; display:flex; align-items:center; transition:all .15s; } .cap-footer-a { color:var(--ink); border:1px solid var(--bdr); } .cap-footer-a:hover { border-color:var(--acc); color:var(--acc); } .cap-footer-b { color:#fff; background:var(--acc); } .cap-footer-b:hover { opacity:.88; } /* ── GOVERNANCE — 6 boxes, small icons, 1 sentence ────── */ /* spec: icons 24–28px, 1 sentence max per box */ .gov-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; } @media(max-width:900px) { .gov-grid { grid-template-columns:repeat(2,1fr); } } @media(max-width:560px) { .gov-grid { grid-template-columns:1fr; } } .gov-card { background:var(--bg); border:1px solid var(--bdr); border-radius:var(--r); padding:20px; transition:border-color .15s; } [data-theme="night"] .gov-card { background:var(--bg1); } .gov-card:hover { border-color:var(--accb); } .gov-icon { color:var(--acc); margin-bottom:10px; } .gov-title { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:6px; } .gov-desc { font-size:13px; color:var(--ink2); line-height:1.5; } /* ── MOBILE DRAWER ─────────────────────────────────────── */ /* ── BACK TO TOP ───────────────────────────────────────── */ #btt { position:fixed; bottom:24px; right:24px; width:40px; height:40px; background:var(--acc); color:#fff; border:none; border-radius:50%; cursor:pointer; display:none; align-items:center; justify-content:center; font-size:18px; z-index:400; text-decoration:none; transition:opacity .2s; } #btt.show { display:flex; } #btt:hover { opacity:.85; } /* ── ANIMATIONS ──────────────────────────────────────────── */ @keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.4} } .fu { animation:fadeUp .5s ease both; } .fu-1 { animation-delay:.08s; } .fu-2 { animation-delay:.16s; } .fu-3 { animation-delay:.24s; } .fu-4 { animation-delay:.32s; } @media(prefers-reduced-motion:reduce) { .fu { animation:none; } } /* ── PRINT ───────────────────────────────────────────────── */ @media print { .nav,#btt,#cookie { display:none !important; } body { background:#fff !important; color:#000 !important; } } .cs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:4px; } @media(max-width:960px){.cs-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.cs-grid{grid-template-columns:1fr;}} /* ── CASE STUDIES ─────────────────────────────────────────── */ .cs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; } @media(max-width:900px) { .cs-grid { grid-template-columns:repeat(2,1fr); } } @media(max-width:560px) { .cs-grid { grid-template-columns:1fr; } } .cs-card { background:var(--bg1); border:1px solid var(--bdr); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; text-decoration:none; transition:border-color .15s, transform .15s; } .cs-card:hover { border-color:var(--acc); transform:translateY(-2px); } .cs-tier { font-family:var(--mono); font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:3px 8px; border-radius:4px; display:inline-block; margin-bottom:12px; width:fit-content; } .cs-tier.creator { background:var(--accg); color:var(--acc); } .cs-tier.business { background:var(--grng); color:var(--grn); } .cs-tier.enterprise { background:rgba(180,83,9,.08); color:var(--amb); } .cs-avatar { width:36px; height:36px; border-radius:50%; background:var(--bg2); border:1px solid var(--bdr); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:var(--ink); margin-bottom:10px; } .cs-name { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:2px; } .cs-location { font-size:11px; color:var(--ink3); margin-bottom:10px; } .cs-result { font-size:13px; color:var(--ink2); line-height:1.6; margin-bottom:14px; flex:1; } .cs-metric { font-family:var(--mono); font-size:18px; font-weight:700; color:var(--acc); margin-bottom:2px; } .cs-metric-lbl { font-size:11px; color:var(--ink3); margin-bottom:12px; } .cs-link { font-size:12px; font-weight:600; color:var(--acc); display:flex; align-items:center; gap:4px; } /* ── HOW IT WORKS — EXPANDED ──────────────────────────── */ .how-detail { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; } .how-chip { font-family:var(--mono); font-size:10px; font-weight:600; color:var(--acc); background:var(--accg); border:1px solid var(--accb); padding:3px 8px; border-radius:20px; white-space:nowrap; } /* ── TEMPLATE SHOWCASE ────────────────────────────────── */ .tmpl-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:28px; } @media(max-width:900px) { .tmpl-grid { grid-template-columns:repeat(2,1fr); } } @media(max-width:560px) { .tmpl-grid { grid-template-columns:1fr; } } .tmpl-card { background:var(--bg1); border:1px solid var(--bdr); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; text-decoration:none; transition:border-color .15s, transform .15s; cursor:pointer; } .tmpl-card:hover { border-color:var(--acc); transform:translateY(-2px); } .tmpl-browse { border-style:dashed; align-items:center; text-align:center; justify-content:center; gap:10px; } .tmpl-emoji { font-size:28px; margin-bottom:10px; } .tmpl-name { font-size:14px; font-weight:700; color:var(--ink); margin-bottom:6px; } .tmpl-desc { font-size:13px; color:var(--ink2); line-height:1.6; margin-bottom:10px; flex:1; } .tmpl-integ { font-size:10px; font-family:var(--mono); color:var(--ink3); margin-bottom:14px; } .tmpl-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--bdr); padding-top:12px; margin-top:auto; } .tmpl-price { font-size:11px; font-family:var(--mono); font-weight:700; color:var(--grn); } .tmpl-cta { font-size:11px; font-weight:700; color:var(--acc); display:flex; align-items:center; gap:3px; } .tmpl-cta-btn { display:inline-flex; align-items:center; gap:6px; background:var(--acc); color:#fff; border:none; border-radius:var(--r); padding:9px 18px; font-size:13px; font-weight:600; text-decoration:none; transition:opacity .15s; margin-top:4px; } .tmpl-cta-btn:hover { opacity:.88; } .tmpl-describe { background:var(--bg1); border:1px solid var(--bdr); border-radius:var(--r); padding:20px 24px; } .tmpl-describe-label { font-size:13px; font-weight:600; color:var(--ink2); margin-bottom:10px; } .tmpl-describe-row { display:flex; gap:10px; flex-wrap:wrap; } .tmpl-describe-input { flex:1; min-width:200px; padding:11px 16px; background:var(--bg); border:1px solid var(--bdr); border-radius:var(--r); color:var(--ink); font-family:var(--sans); font-size:14px; outline:none; transition:border-color .15s; } .tmpl-describe-input:focus { border-color:var(--acc); } .tmpl-describe-input::placeholder { color:var(--ink3); } /* ── CASE STUDIES — BEFORE/AFTER FORMAT ──────────────── */ .cs-card2 { background:var(--bg1); border:1px solid var(--bdr); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; transition:border-color .15s, transform .15s; } .cs-card2:hover { border-color:var(--acc); transform:translateY(-2px); } .cs-ba { display:flex; align-items:center; gap:8px; margin-bottom:14px; padding:10px 12px; background:var(--bg2); border-radius:7px; } .cs-before, .cs-after { display:flex; flex-direction:column; gap:2px; } .cs-ba-label { font-size:9px; font-family:var(--mono); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); } .cs-ba-val { font-size:13px; font-weight:700; color:var(--ink2); } .cs-ba-accent { color:var(--grn); } .cs-arrow { font-size:16px; color:var(--acc); font-weight:700; flex:1; text-align:center; } .cs-avatar2 { width:32px; height:32px; border-radius:50%; background:var(--accg); border:1px solid var(--accb); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:var(--acc); margin-bottom:8px; } .cs-quote { font-size:13px; color:var(--ink2); line-height:1.65; font-style:italic; margin-bottom:10px; flex:1; } .cs-quote::before { content:'"'; } .cs-quote::after { content:'"'; } .cs-what { font-size:11px; font-family:var(--mono); color:var(--ink3); margin-bottom:12px; } /* ── FAQ — 2-column ──────────────────────────────────── */ .faq-cols { display:grid; grid-template-columns:1fr 1fr; gap:0 32px; } @media(max-width:768px) { .faq-cols { grid-template-columns:1fr; } } .faq-col {} .faq-item { border-bottom:1px solid var(--bdr); } .faq-col:first-child .faq-item:first-child { border-top:1px solid var(--bdr); } .faq-col:last-child .faq-item:first-child { border-top:1px solid var(--bdr); } .faq-q { width:100%; background:none; border:none; text-align:left; padding:16px 0; font-family:var(--sans); font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; } .faq-q span:first-child { flex:1; } .faq-ic { font-size:18px; color:var(--acc); flex-shrink:0; line-height:1; } .faq-a { font-size:13px; color:var(--ink2); line-height:1.7; padding-bottom:16px; display:none; } .faq-a.open { display:block; } /* ── TRON TRY-IT ──────────────────────────────────────────*/ .tron-try { display:flex; gap:6px; padding:8px 14px; border-bottom:1px solid rgba(0,255,180,.08); border-top:1px solid rgba(0,255,180,.08); } .tron-try-input { flex:1; background:rgba(0,255,180,.06); border:1px solid rgba(0,255,180,.2); border-radius:4px; color:#00ffb4; font-family:var(--mono); font-size:10px; padding:5px 10px; outline:none; transition:border-color .15s; } .tron-try-input::placeholder { color:rgba(0,255,180,.35); } .tron-try-input:focus { border-color:rgba(0,255,180,.6); } .tron-try-btn { background:rgba(0,255,180,.12); color:#00ffb4; border:1px solid rgba(0,255,180,.3); border-radius:4px; font-family:var(--mono); font-size:10px; font-weight:700; padding:5px 12px; cursor:pointer; white-space:nowrap; transition:background .15s; } .tron-try-btn:hover { background:rgba(0,255,180,.22); } .tron-try-result { padding:0 14px; font-family:var(--mono); font-size:9.5px; color:rgba(0,255,180,.7); min-height:0; transition:all .2s; overflow:hidden; } .tron-try-result.show { padding:6px 14px 8px; min-height:40px; } .tron-try-chain { color:#00ffb4; font-weight:700; } .tron-try-time { color:rgba(0,255,180,.5); } /* ── Hover fallback (CSS-only, works without JS) ── */ @media(hover:hover){ .fd-nav-item-has-menu:hover > .fd-menu{display:block} .fd-nav-item-has-menu:hover > .fd-nav-trigger .fd-caret{transform:rotate(180deg);opacity:1} .fd-nav-item-has-menu:hover > .fd-nav-trigger{color:var(--acc);background:rgba(0,71,255,.07)} } /* ── FD Terminal Widget — Fixed size, never breaks layout ──────────── */ .fd-term-wrap{ display:block; width:100%;max-width:480px; flex-shrink:0; } .fd-term{ background:#0d1117; border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:16px 20px; font-family:var(--mono); font-size:.78rem; color:#f0efe9; box-shadow:0 10px 40px rgba(9,9,15,.25),inset 0 1px 0 rgba(255,255,255,.04); /* LOCKED height — output never grows the widget */ height:190px; display:flex; flex-direction:column; overflow:hidden; } .fd-term-bar{ display:flex;align-items:center;gap:6px; margin-bottom:12px;padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.06); flex-shrink:0; } .fd-term-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0} .fd-term-label{ font-size:.6rem;color:rgba(240,239,233,.28); margin-left:auto;letter-spacing:.08em;text-transform:uppercase; } .tl-cmd{ font-size:.78rem;line-height:1.5; min-height:1.3em;flex-shrink:0; opacity:0;transition:opacity .3s; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .tl-prompt{color:rgba(240,239,233,.32)} .tl-typ{color:#4d7cff} .tl-cur{ display:inline-block;width:6px;height:11px; background:var(--acc,#0047ff);border-radius:1px; margin-left:2px;vertical-align:middle; animation:termBlink .7s step-end infinite; } @keyframes termBlink{0%,100%{opacity:1}50%{opacity:0}} .tl-out{ display:flex;flex-direction:column;gap:1px; margin-top:8px;padding-top:8px; border-top:1px solid rgba(255,255,255,.05); /* KEY FIX: fixed height, clip overflow — never grows widget */ flex:1; overflow:hidden; min-height:0; } .tl-line{ display:block;line-height:1.5; font-size:.72rem; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; flex-shrink:0; } @media(prefers-reduced-motion:reduce){ .tl-cur,.fd-term,.tl-cmd,.tl-out,.tl-line{animation:none!important;transition:none!important} }} .hud-row{display:grid;grid-template-columns:54px 36px 1fr;gap:4px;align-items:center;font-family:var(--mono);font-size:.62rem;padding:2px 0} .hud-ts{color:rgba(240,239,233,.28)} .hud-code{font-weight:700;font-size:.6rem} .hud-msg{color:rgba(240,239,233,.75)} .hud-detail{color:rgba(240,239,233,.35);font-size:.58rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;grid-column:2/4;padding-left:40px;margin-top:-1px} /* Terminal min-height override — ensures fixed container never expands */ .fd-term .tl-out{min-height:0!important} .fd-term .tl-cmd{min-height:0!important} .fd-term{overflow:hidden!important} .faq-a{display:none} .faq-item.open .faq-a{display:block} .faq-item.open .faq-ico{transform:rotate(45deg)} /* Tron widget — explicit dark bg on ALL child elements */ .tron, .tron-log, .tron-try, .tron-try-result, .tron-beacons, .tron-foot, .tron-bar, .tron-stats, #os-hud-live { background:#0d1117; } /* Fix tron-log text to be readable on dark bg (not neon) */ .tron-msg { color:rgba(240,239,233,.68) !important; } .tron-ts { color:rgba(240,239,233,.28) !important; } /* Ensure tron-col doesn't leak content */ .tron-col { background:#0d1117; border-radius:10px; overflow:hidden; } .tron-label { background:transparent; color:var(--ink2); } /* ── Search & Globe overlay shared ─────────────────────────────────────────── */ .fd-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:flex-start;justify-content:center;padding-top:60px;background:rgba(9,9,15,.55);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .18s} .fd-overlay.fd-overlay--open{opacity:1;pointer-events:all} .fd-overlay-inner{background:var(--srf);border:1px solid var(--bdr);border-radius:14px;width:100%;max-height:calc(100vh - 80px);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(9,9,15,.22)} .fd-overlay-header{padding:14px 18px;border-bottom:1px solid var(--bdr);flex-shrink:0;display:flex;align-items:center;gap:10px} .fd-overlay-close{width:28px;height:28px;border-radius:6px;border:1px solid var(--bdr);background:var(--bg1);cursor:pointer;font-size:16px;color:var(--ink2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s;margin-left:auto} .fd-overlay-close:hover{background:var(--bg);color:var(--ink)} .fd-overlay-footer{padding:12px 18px;border-top:1px solid var(--bdr);flex-shrink:0} /* Search modal */ .fd-search-modal{max-width:680px} .fd-search-input{flex:1;border:none;outline:none;background:transparent;font-family:var(--sans);font-size:1.0625rem;color:var(--ink);padding:0} .fd-search-input::placeholder{color:var(--ink3)} .fd-search-body{display:flex;overflow:hidden;flex:1;min-height:0} .fd-search-filters{flex-shrink:0;width:128px;padding:10px 8px;border-right:1px solid var(--bdr);display:flex;flex-direction:column;gap:2px} .fd-search-filters button{background:none;border:none;cursor:pointer;padding:7px 10px;border-radius:7px;font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--ink2);text-align:left;transition:background .12s,color .12s;width:100%} .fd-search-filters button:hover,.fd-search-filters button.fd-f-active{background:var(--accg);color:var(--acc)} .fd-search-results{flex:1;overflow-y:auto;padding:8px} .fd-sr-empty{text-align:center;padding:32px 20px;color:var(--ink3);font-size:.875rem} .fd-sr-item{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;text-decoration:none;color:var(--ink);transition:background .12s} .fd-sr-item:hover{background:var(--bg1)} .fd-sr-type{font-family:var(--mono);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--acc);background:var(--accg);border:1px solid var(--accb);border-radius:4px;padding:2px 6px;flex-shrink:0;margin-top:2px;white-space:nowrap} .fd-sr-type.fd-t-corridor{background:var(--grng);color:var(--grn);border-color:var(--grnb)} .fd-sr-type.fd-t-docket{background:rgba(239,68,68,.08);color:#ef4444;border-color:rgba(239,68,68,.2)} .fd-sr-type.fd-t-status{background:var(--bg1);color:var(--ink3);border-color:var(--bdr)} .fd-sr-title{font-weight:700;font-size:.875rem;margin-bottom:2px;line-height:1.3} .fd-sr-snippet{font-size:.76rem;color:var(--ink2);line-height:1.5} /* Locale modal */ .fd-locale-modal{max-width:780px} .fd-locale-body{display:grid;grid-template-columns:155px 1fr 175px;overflow:hidden;flex:1;min-height:0;min-height:300px;max-height:400px} .fd-locale-regions,.fd-locale-countries,.fd-locale-languages{overflow-y:auto;padding:8px} .fd-locale-regions{border-right:1px solid var(--bdr)} .fd-locale-countries{border-right:1px solid var(--bdr)} .fd-locale-col-head{font-family:var(--mono);font-size:8px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ink3);padding:6px 10px 3px;display:block} .fd-lc-btn{display:flex;align-items:center;gap:7px;width:100%;padding:7px 10px;border:none;border-radius:7px;background:none;cursor:pointer;font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--ink2);text-align:left;transition:background .12s,color .12s} .fd-lc-btn:hover,.fd-lc-btn.active{background:var(--accg);color:var(--acc)} /* Nav icon buttons */ .fd-nav-icon{height:34px;border-radius:8px;border:1px solid var(--bdr);background:var(--srf);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:15px;color:var(--ink2);transition:background .12s,color .12s;flex-shrink:0;padding:0 8px;gap:5px} .fd-nav-icon:hover{background:var(--bg1);color:var(--ink)} .fd-nav-locale{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.04em;white-space:nowrap} @media(max-width:768px){.fd-locale-body{grid-template-columns:1fr;max-height:260px}.fd-locale-countries,.fd-locale-languages{display:none}.fd-locale-body.step2 .fd-locale-regions{display:none}.fd-locale-body.step2 .fd-locale-countries{display:block}.fd-locale-body.step3 .fd-locale-regions{display:none}.fd-locale-body.step3 .fd-locale-languages{display:block}} /* ── Wolters Kluwer descriptor pattern — Board Directive v36.18 ──────────── P0 implementation — canonical across all 4 pages WCAG 2.1 AA: 4.5:1 contrast on desc text, 44px min touch targets on mobile ─────────────────────────────────────────────────────────────────────────── */ .fd-menu-item-with-desc{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;border-radius:7px;text-decoration:none;color:inherit;transition:background .1s} .fd-menu-item-with-desc:hover{background:var(--bg1)} .fd-menu-item-with-desc:focus-visible{outline:2px solid var(--acc);outline-offset:2px} .fd-menu-item-with-desc .fd-mi-icon{flex-shrink:0;font-size:14px;margin-top:2px;width:20px;text-align:center;line-height:1} .fd-menu-item-with-desc .fd-mi-name{font-weight:700;font-size:.8125rem;color:var(--ink);display:block;line-height:1.3} .fd-menu-item-with-desc .fd-mi-desc{font-size:.7125rem;color:var(--ink3);display:block;line-height:1.4;margin-top:1px} .fd-menu-item-featured.fd-menu-item-with-desc{padding:10px 12px} .fd-menu-item-featured.fd-menu-item-with-desc .fd-mi-name{font-size:.875rem} .fd-menu-item-featured.fd-menu-item-with-desc .fd-mi-desc{font-size:.75rem} .fd-menu-item-with-desc:hover .fd-mi-name{color:var(--acc)} /* night mode — desc text contrast ≥4.5:1 */ [data-theme="night"] .fd-menu-item-with-desc .fd-mi-desc{color:rgba(238,238,240,.45)} /* Responsive: on mobile the descriptors collapse gracefully in the drawer */ @media(max-width:900px){ .fd-mobile-link-with-desc{display:flex;align-items:flex-start;gap:10px;padding:10px 8px;border-radius:7px;text-decoration:none;color:var(--ink2);transition:background .1s,color .1s;min-height:44px} .fd-mobile-link-with-desc:hover{background:var(--bg1);color:var(--ink)} .fd-mobile-link-with-desc:focus-visible{outline:2px solid var(--acc);outline-offset:2px} .fd-mobile-link-with-desc .fd-mi-icon{flex-shrink:0;font-size:16px;width:22px;text-align:center;margin-top:1px} .fd-mobile-link-with-desc .fd-mi-name{font-weight:700;font-size:.875rem;color:var(--ink);display:block;line-height:1.3} .fd-mobile-link-with-desc .fd-mi-desc{font-size:.75rem;color:var(--ink3);display:block;line-height:1.4;margin-top:2px} [data-theme="night"] .fd-mobile-link-with-desc .fd-mi-desc{color:rgba(238,238,240,.45)} } /* === FD SELECTOR V3 STYLING === */ /* All colors via theme vars so day/night works automatically. */ /* Live badge (v3) — accent-tinted, matches .fd-lcb-pp family */ .fd-lcb-live { display: inline-flex; background: var(--accg); border: 1px solid var(--accb); color: var(--acc); font-family: var(--mono); font-size: 8px; font-weight: 700; padding: 0 4px; border-radius: 2px; margin-top: 1px; margin-left: 3px; width: fit-content; } /* Back button in the region nav (v3 drill-down) */ .fd-locale-region-btn[data-back="true"] { color: var(--ink3); font-weight: 600; border-bottom: 1px solid var(--bdr); border-radius: 0; margin-bottom: 6px; padding-bottom: 11px; } .fd-locale-region-btn[data-back="true"]:hover { background: var(--bg1); color: var(--acc); } .fd-locale-region-btn[data-back="true"] .fd-lrb-flag { font-size: 14px; color: var(--acc); } /* Premium polish: bucket/region buttons a touch larger, clearer hierarchy */ .fd-locale-region-btn { padding: 11px 12px; border-radius: 9px; } .fd-locale-region-btn .fd-lrb-count { background: var(--bg1); padding: 1px 6px; border-radius: 10px; min-width: 18px; text-align: center; } .fd-locale-region-btn[data-active="true"] .fd-lrb-count { background: var(--accb); color: var(--acc); } /* Country cards: a little more breathing room + clearer live state */ .fd-locale-country-btn { padding: 10px 12px; border-radius: 10px; } .fd-locale-country-btn:hover { border-color: var(--acc); } .fd-lcb-name { font-size: .84rem; } .fd-lcb-meta { font-size: .64rem; } /* Mobile responsiveness — 1024 / 768 / 414 / 360 */ @media (max-width: 1024px) { .fd-locale-country-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } @media (max-width: 768px) { .fd-locale-country-grid { grid-template-columns: 1fr; } .fd-locale-regions { display: flex; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--bdr); gap: 6px; padding: 8px; -webkit-overflow-scrolling: touch; } .fd-locale-region-btn { flex: 0 0 auto; width: auto; white-space: nowrap; margin-bottom: 0; } .fd-locale-region-btn[data-back="true"] { border-bottom: none; border-right: 1px solid var(--bdr); border-radius: 9px; margin-bottom: 0; padding-bottom: 11px; } .fd-locale-bottom { position: sticky; bottom: 0; background: var(--srf); } } @media (max-width: 414px) { .fd-locale-modal { max-width: 100vw; } .fd-locale-lang-row { padding: 8px 12px; } .fd-locale-country-scroll { padding: 10px 12px 8px; } } @media (max-width: 360px) { .fd-lcb-meta { white-space: normal; } .fd-locale-region-btn { padding: 9px 10px; } } /* === END FD SELECTOR V3 STYLING === */ /* === FD SELECTOR PREMIUM POLISH === */ /* 7 upgrades: motion, depth, typography, cards, lang bar, modal presence, mobile. All theme-var based → day/night automatic. Additive (later cascade wins). */ /* 1 + 6 — Modal presence: backdrop blur, elevated depth, smooth fade */ .fd-locale-modal-backdrop { background: rgba(8, 10, 18, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .22s cubic-bezier(.4,0,.2,1); pointer-events: none; } .fd-locale-modal-backdrop[data-locale-modal="open"] { opacity: 1; pointer-events: auto; } .fd-locale-modal { border-radius: 18px; border: 1px solid var(--bdr); box-shadow: 0 24px 70px rgba(0,0,0,.32), 0 6px 22px rgba(0,0,0,.18); transform: translateY(8px) scale(.985); opacity: 0; transition: transform .26s cubic-bezier(.34,1.4,.5,1), opacity .2s ease; } .fd-locale-modal-backdrop[data-locale-modal="open"] .fd-locale-modal { transform: translateY(0) scale(1); opacity: 1; } [data-theme="night"] .fd-locale-modal { box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 6px 24px rgba(0,0,0,.4); } /* 3 — Typography hierarchy */ .fd-locale-header-title { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; } .fd-locale-header-sub { font-size: .72rem; letter-spacing: .02em; } .fd-locale-region-heading { font-size: 10px; letter-spacing: .16em; } /* 2 + region switching — region buttons: depth + motion */ .fd-locale-region-btn { transition: background .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease; } .fd-locale-region-btn:hover { transform: translateX(2px); } .fd-locale-region-btn[data-active="true"] { box-shadow: inset 2px 0 0 var(--acc); } /* 4 — Country card redesign: depth, hover glow, smooth */ .fd-locale-country-btn { border: 1px solid var(--bdr); background: var(--srf); transition: border-color .16s ease, background .16s ease, transform .12s ease, box-shadow .18s ease; } .fd-locale-country-btn:hover { border-color: var(--acc); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.1); } [data-theme="night"] .fd-locale-country-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,.4); } .fd-locale-country-btn[data-active="true"] { box-shadow: 0 0 0 1px var(--acc), 0 4px 14px rgba(0,0,0,.12); } /* country grid: smooth appearance when region switches */ .fd-locale-country-grid { animation: fdFadeUp .24s ease; } @keyframes fdFadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* 5 — Language bar redesign: spacing, contrast, active */ .fd-locale-lang-pill { padding: 4px 12px; transition: background .14s ease, color .14s ease, border-color .14s ease, transform .1s ease; } .fd-locale-lang-pill:hover { transform: translateY(-1px); } .fd-locale-lang-pill[data-active="true"] { box-shadow: 0 2px 8px rgba(0,0,0,.1); font-weight: 700; } /* 7 — Apply button: feels like a system action */ .fd-locale-apply-btn { background: var(--acc); color: #fff; border: none; border-radius: 11px; font-weight: 700; letter-spacing: .01em; transition: transform .12s ease, box-shadow .16s ease, opacity .16s ease; box-shadow: 0 4px 14px rgba(0,0,0,.16); } .fd-locale-apply-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.22); } .fd-locale-apply-btn:active { transform: translateY(0) scale(.98); } /* reduced-motion respect */ @media (prefers-reduced-motion: reduce) { .fd-locale-modal-backdrop, .fd-locale-modal, .fd-locale-region-btn, .fd-locale-country-btn, .fd-locale-lang-pill, .fd-locale-apply-btn, .fd-locale-country-grid { transition: none !important; animation: none !important; transform: none !important; } } /* === END FD SELECTOR PREMIUM POLISH === */ /* === FD GUIDANCE NOTE === */ .fd-locale-guidance { font-size: .8rem; line-height: 1.6; color: var(--ink3); max-width: 46ch; margin: 18px 4px; padding: 12px 14px; background: var(--bg1); border: 1px solid var(--bdr); border-radius: 10px; } /* === END FD GUIDANCE NOTE === */ /* === FD SELECTOR LAYOUT FIX === */ /* Guidance box: full width of the country area, not a cramped column */ .fd-locale-guidance { grid-column: 1 / -1; max-width: none; width: auto; margin: 8px 0 4px; } /* Ensure the modal body doesn't push the footer off-screen: cap body height, let the country scroll area scroll internally, keep footer pinned + visible. */ .fd-locale-modal { display: flex; flex-direction: column; max-height: 86vh; } .fd-locale-body { min-height: 0; } .fd-locale-country-scroll { min-height: 0; overflow-y: auto; } .fd-locale-bottom { flex-shrink: 0; } .fd-locale-footer { flex-shrink: 0; position: sticky; bottom: 0; background: var(--bg1); z-index: 2; } .fd-locale-apply-btn { white-space: nowrap; } /* On short screens, make the whole modal scroll rather than clipping Apply */ @media (max-height: 640px) { .fd-locale-modal { max-height: 94vh; } .fd-locale-body { max-height: 46vh; } } /* === END FD SELECTOR LAYOUT FIX === */ /* === NAV OVERFLOW FIX (locale pill cap) === */ .fd-nav-locale { max-width: 34px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; } .fd-globe-btn { max-width: 92px; } /* === END NAV OVERFLOW FIX === */