/* ============================================================ Fonts.Free — design system v2 (FontSpace-caliber polish) Built on Bootstrap 5.3 (color modes via [data-bs-theme]). Brand: near-black indigo #111322 + warm gold #f5c55b + white. Light mode default (#f7f7f9 page, white cards); dark mode via [data-theme="dark"] on (persisted in localStorage 'ff_theme'). 8px spacing scale, radii 12/20/24, transitions <= 200ms. ============================================================ */ :root { /* -------- brand -------- */ --ff-panel: #111322; /* the dark indigo panel (hero, specimen) */ --ff-panel-border: #23263c; --ff-panel-body: #b9bdd6; --ff-gold: #f5c55b; --ff-gold-deep: #e3a53a; --ff-gold-tint: #fdf3dc; --ff-indigo: #3f46b5; /* interactive shade of the brand indigo */ --ff-indigo-deep: #333a9c; --ff-indigo-tint: #eef0fb; /* -------- surfaces (light) -------- */ --ff-bg: #f7f7f9; --ff-surface: #ffffff; --ff-surface-2: #f1f2f6; --ff-ink: #111322; --ff-body: #43465a; --ff-muted: #6f7387; --ff-faint: #9a9db1; --ff-border: #e7e8ef; --ff-border-2: #d9dbe7; --ff-link: #3f46b5; --ff-link-hover:#333a9c; --ff-ring: rgba(63,70,181,.22); --ff-shimmer: rgba(17,19,34,.07); /* -------- effects -------- */ --ff-grad-cta: linear-gradient(135deg, #f8d27d 0%, #eeb043 100%); --ff-grad-bar: linear-gradient(90deg, #f5c55b 0%, #c8913f 30%, #3f46b5 72%, #111322 100%); --ff-shadow-sm: 0 1px 2px rgba(17,19,34,.05), 0 1px 3px rgba(17,19,34,.04); --ff-shadow: 0 6px 20px rgba(17,19,34,.08); --ff-shadow-lg: 0 18px 48px rgba(17,19,34,.14); --ff-shadow-gold: 0 3px 12px rgba(227,165,58,.35); --ff-r-lg: 24px; --ff-r: 20px; --ff-r-sm: 12px; --ff-r-pill: 999px; --ff-font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; /* -------- legacy aliases (pre-v2 rules/templates reference these) ---- */ --bf-blue: var(--ff-link); --bf-blue-dark: var(--ff-link-hover); --bf-blue-700: var(--ff-indigo-deep); --bf-blue-50: var(--ff-indigo-tint); --bf-blue-100: var(--ff-border-2); --bf-ink: var(--ff-ink); --bf-body: var(--ff-body); --bf-muted: var(--ff-muted); --bf-border: var(--ff-border); --bf-border-2: var(--ff-border-2); --bf-bg: var(--ff-surface-2); --bf-white: var(--ff-surface); --bf-radius: var(--ff-r); --bf-radius-sm: var(--ff-r-sm); --bf-radius-pill: var(--ff-r-pill); --bf-shadow-sm: var(--ff-shadow-sm); --bf-shadow: var(--ff-shadow); --bf-shadow-lg: var(--ff-shadow-lg); --bf-shadow-blue: 0 8px 24px rgba(63,70,181,.24); --bf-font: var(--ff-font); } [data-theme="dark"] { --ff-panel: #181b30; --ff-panel-border: #2b2f4d; --ff-panel-body: #b9bdd6; --ff-gold-deep: #edbb54; --ff-gold-tint: rgba(245,197,91,.14); --ff-indigo-tint: rgba(154,160,255,.12); --ff-bg: #0d0e1a; --ff-surface: #16182a; --ff-surface-2: #1b1e33; --ff-ink: #f2f3fa; --ff-body: #c3c6d8; --ff-muted: #8f93ab; --ff-faint: #6e7288; --ff-border: #262a44; --ff-border-2: #313552; --ff-link: #f0c66c; --ff-link-hover:#f5d488; --ff-ring: rgba(245,197,91,.28); --ff-shimmer: rgba(255,255,255,.08); --ff-shadow-sm: 0 1px 2px rgba(0,0,0,.3); --ff-shadow: 0 6px 20px rgba(0,0,0,.4); --ff-shadow-lg: 0 18px 48px rgba(0,0,0,.5); --bf-shadow-blue: 0 8px 24px rgba(0,0,0,.45); } /* ---------- Base ---------- */ html { -webkit-text-size-adjust: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--ff-font); color: var(--ff-body); background: var(--ff-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; letter-spacing: -0.005em; } main { flex: 1; } h1, h2, h3, h4, h5, h6 { color: var(--ff-ink); font-weight: 800; letter-spacing: -0.02em; } h1 { line-height: 1.1; } a { color: var(--ff-link); text-decoration: none; transition: color .15s; } a:hover { color: var(--ff-link-hover); } .text-muted { color: var(--ff-muted) !important; } .text-secondary { color: var(--ff-muted) !important; } .lead { color: var(--ff-body); } a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--ff-gold); outline-offset: 2px; border-radius: 6px; } ::selection { background: var(--ff-gold); color: #111322; } /* ============================================================ Header — sticky, compact: glyph logo, pill search, theme toggle, gradient CTA. Gradient accent bar + secondary nav. ============================================================ */ .ff-header { position: sticky; top: 0; z-index: 1030; } .ff-header-main { background: var(--ff-surface); } .ff-header-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .ff-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; } .ff-logo-glyph { width: 36px; height: 36px; border-radius: 10px; background: #111322; color: var(--ff-gold); display: grid; place-items: center; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.3rem; line-height: 1; box-shadow: inset 0 0 0 1px rgba(245,197,91,.28); } .ff-logo-word { font-weight: 800; font-size: 1.22rem; color: var(--ff-ink); letter-spacing: -0.03em; white-space: nowrap; } .ff-logo:hover .ff-logo-word { color: var(--ff-ink); } /* Rounded-pill search living in the header */ .ff-hsearch { flex: 1 1 auto; min-width: 0; max-width: 520px; display: flex; align-items: center; gap: 8px; background: var(--ff-surface-2); border: 1px solid var(--ff-border); border-radius: var(--ff-r-pill); padding: .45rem 1rem; transition: border-color .15s, box-shadow .15s; } .ff-hsearch:focus-within { border-color: var(--ff-gold); box-shadow: 0 0 0 3px var(--ff-ring); } .ff-hsearch svg { flex: 0 0 auto; color: var(--ff-muted); } .ff-hsearch input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--ff-ink); font-size: .95rem; outline: none; } .ff-hsearch input::placeholder { color: var(--ff-faint); } /* Circular icon button (theme toggle) */ .ff-iconbtn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--ff-r-pill); border: 1px solid var(--ff-border); background: var(--ff-surface); color: var(--ff-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; } .ff-iconbtn:hover { border-color: var(--ff-border-2); background: var(--ff-surface-2); transform: translateY(-1px); } .ff-iconbtn .ff-moon { display: none; } [data-theme="dark"] .ff-iconbtn .ff-moon { display: block; } [data-theme="dark"] .ff-iconbtn .ff-sun { display: none; } /* Gradient gold pill CTA */ .ff-cta { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; background: var(--ff-grad-cta); color: #111322; font-weight: 700; font-size: .95rem; border: 0; border-radius: var(--ff-r-pill); padding: .55rem 1.3rem; white-space: nowrap; text-decoration: none; box-shadow: var(--ff-shadow-gold); transition: transform .15s ease, box-shadow .2s ease, filter .15s; cursor: pointer; } .ff-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(227,165,58,.5); color: #111322; filter: saturate(1.05); } .ff-cta:active { transform: translateY(0); } .ff-cta-lg { padding: .8rem 1.8rem; font-size: 1.05rem; } /* Outline secondary pill */ .ff-btn-outline { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--ff-border-2); border-radius: var(--ff-r-pill); padding: .5rem 1.15rem; color: var(--ff-ink); font-weight: 600; font-size: .95rem; white-space: nowrap; text-decoration: none; background: var(--ff-surface); transition: border-color .15s, background .15s, color .15s; } .ff-btn-outline:hover { border-color: var(--ff-ink); color: var(--ff-ink); background: var(--ff-surface-2); } /* Thin gradient accent bar */ .ff-accentbar { height: 3px; background: var(--ff-grad-bar); } /* Secondary nav row: plain text links, horizontally scrollable on mobile */ .ff-subnav { background: var(--ff-surface); border-bottom: 1px solid var(--ff-border); } .ff-subnav-row { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ff-subnav-row::-webkit-scrollbar { display: none; } .ff-subnav-row a { flex: 0 0 auto; white-space: nowrap; color: var(--ff-muted); font-weight: 600; font-size: .88rem; padding: .6rem .7rem; text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; } .ff-subnav-row a:hover { color: var(--ff-ink); } .ff-subnav-row a.active { color: var(--ff-ink); border-bottom-color: var(--ff-gold); } .ff-subnav-spacer { margin-left: auto; } .ff-subnav-row .ff-credits { color: var(--ff-gold-deep); font-weight: 700; } @media (max-width: 640px) { .ff-logo-word { display: none; } .ff-header-row { gap: 8px; } } /* ============================================================ Hero — large dark rounded panel with the live count + search ============================================================ */ .ff-hero-wrap { padding-top: 1.25rem; } .ff-hero { position: relative; overflow: hidden; background: var(--ff-panel); border: 1px solid var(--ff-panel-border); border-radius: var(--ff-r-lg); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem); text-align: center; color: var(--ff-panel-body); } .ff-hero::before { content: ""; position: absolute; left: 50%; top: -55%; width: 130%; height: 110%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(245,197,91,.16), transparent 72%); pointer-events: none; } .ff-hero > * { position: relative; } .ff-hero h1 { color: #ffffff; font-size: clamp(2.4rem, 6.5vw, 4.4rem); font-weight: 800; letter-spacing: -0.04em; margin-bottom: .75rem; } .ff-hero h1 .ff-hero-count { color: var(--ff-gold); } .ff-hero .ff-hero-sub { max-width: 580px; margin: 0 auto 1.75rem; font-size: clamp(1rem, 2vw, 1.15rem); color: var(--ff-panel-body); } .ff-hero-search { max-width: 560px; margin: 0 auto; display: flex; align-items: center; flex-wrap: nowrap; gap: .5rem; background: #ffffff; border-radius: var(--ff-r-pill); padding: .4rem .4rem .4rem 1.25rem; box-shadow: 0 12px 40px rgba(0,0,0,.35); } .ff-hero-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: #111322; font-size: 1.05rem; outline: none; } .ff-hero-search input::placeholder { color: #9a9db1; } @media (max-width: 480px) { .ff-hero-search { padding-left: .9rem; } .ff-hero-search .ff-cta { padding: .5rem 1rem; font-size: .9rem; } } /* Friendly line between hero and preview bar */ .ff-pickline { color: var(--ff-muted); font-weight: 600; font-size: 1.02rem; margin: 0 0 .75rem; } /* ---------- Section rhythm ---------- */ .bf-section { padding: 3.5rem 0; } .bf-section-tight { padding: 2rem 0; } .section-head { margin-bottom: 1.5rem; } .section-head h2 { font-size: 1.6rem; margin-bottom: .3rem; } .section-head .sub { color: var(--ff-muted); margin: 0; } .eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; color: var(--ff-gold-deep); margin-bottom: .5rem; } /* ============================================================ Global live-preview bar — soft-gray rounded panel ============================================================ */ .ff-previewbar { display: flex; gap: 16px; align-items: center; background: var(--ff-surface-2); border: 1px solid var(--ff-border); border-radius: var(--ff-r); padding: .8rem 1rem; } .ff-previewbar .form-control { border: 1px solid var(--ff-border); border-radius: var(--ff-r-sm); background: var(--ff-surface); color: var(--ff-ink); box-shadow: none !important; } .ff-previewbar .form-control:focus { border-color: var(--ff-gold); box-shadow: 0 0 0 3px var(--ff-ring) !important; } .ff-previewbar .ff-size { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; color: var(--ff-muted); font-size: .85rem; font-weight: 500; white-space: nowrap; margin: 0; } .ff-previewbar .form-range { width: 160px; } @media (max-width: 560px) { .ff-previewbar { flex-direction: column; align-items: stretch; } .ff-previewbar .ff-size { justify-content: space-between; } .ff-previewbar .form-range { width: 100%; margin-left: .5rem; } } /* ============================================================ Font cards — big airy white cards, huge specimen, circular action buttons. 1–2 columns; whitespace is the quality. ============================================================ */ .ff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr)); gap: 20px; } .font-card { display: flex; flex-direction: column; background: var(--ff-surface); border: 1px solid var(--ff-border); border-radius: var(--ff-r); padding: 1.25rem 1.5rem 1rem; box-shadow: var(--ff-shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .font-card:hover { transform: translateY(-3px); border-color: var(--ff-border-2); box-shadow: var(--ff-shadow); } .font-card .fc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: .75rem; } .font-card .fc-name { font-size: .85rem; font-weight: 500; color: var(--ff-muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .font-card .fc-name .fc-fam { font-weight: 700; color: var(--ff-ink); } .font-card .fc-name:hover .fc-fam { color: var(--ff-link); } .font-card .preview { display: block; font-size: 56px; line-height: 1.18; color: var(--ff-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 66px; margin-bottom: 1rem; text-decoration: none; } /* skeleton shimmer while the card's webfont loads (class managed by fonts.js) */ .font-card .preview.is-loading { background: linear-gradient(100deg, transparent 30%, var(--ff-shimmer) 50%, transparent 70%); background-size: 200% 100%; animation: ff-shimmer 1.1s linear infinite; border-radius: 10px; color: var(--ff-faint); } @keyframes ff-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .font-card .fc-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--ff-border); padding-top: .75rem; } .font-card .fc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: .78rem; color: var(--ff-faint); min-width: 0; } .font-card .fc-actions { display: flex; gap: 8px; flex: 0 0 auto; } .fc-act { width: 40px; height: 40px; border-radius: var(--ff-r-pill); border: 1px solid var(--ff-border-2); background: var(--ff-surface); color: var(--ff-ink); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform .15s ease, border-color .15s, box-shadow .18s; } .fc-act:hover { transform: translateY(-1px); border-color: var(--ff-ink); color: var(--ff-ink); } .fc-act-dl { background: var(--ff-grad-cta); border: 0; color: #111322; box-shadow: var(--ff-shadow-gold); } .fc-act-dl:hover { color: #111322; box-shadow: 0 6px 16px rgba(227,165,58,.5); border: 0; } .fc-styles { background: var(--ff-surface-2); border: 1px solid var(--ff-border); border-radius: var(--ff-r-pill); padding: 1px 8px; font-weight: 600; color: var(--ff-muted); } .ff-var { color: var(--ff-gold-deep); font-weight: 700; } @media (prefers-reduced-motion: reduce) { .font-card, .fc-act, .ff-cta, .ff-iconbtn { transition: none; } .font-card .preview.is-loading { animation: none; } } /* ---------- License badges (color-coded, dark-mode aware) ---------- */ .lic-badge { display: inline-block; padding: 3px 10px; border-radius: var(--ff-r-pill); font-size: .68rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; background: var(--ff-surface-2); /* fallback for unknown licenses */ color: var(--ff-body); } .lic-badge.lic-ofl { background: #dcfce7; color: #15803d; } .lic-badge.lic-apache { background: #dbeafe; color: #1d4ed8; } .lic-badge.lic-mit { background: #ede9fe; color: #6d28d9; } .lic-badge.lic-cc0 { background: #ccfbf1; color: #0f766e; } .lic-badge.lic-ufl { background: #ffedd5; color: #c2410c; } .lic-badge.lic-personal-use { background: #fef3c7; color: #b45309; } [data-theme="dark"] .lic-badge.lic-ofl { background: rgba(34,197,94,.16); color: #4ade80; } [data-theme="dark"] .lic-badge.lic-apache { background: rgba(96,165,250,.16); color: #93c5fd; } [data-theme="dark"] .lic-badge.lic-mit { background: rgba(167,139,250,.16);color: #c4b5fd; } [data-theme="dark"] .lic-badge.lic-cc0 { background: rgba(45,212,191,.16); color: #5eead4; } [data-theme="dark"] .lic-badge.lic-ufl { background: rgba(251,146,60,.16); color: #fdba74; } [data-theme="dark"] .lic-badge.lic-personal-use { background: rgba(251,191,36,.16); color: #fcd34d; } /* ---------- Category / filter pills + A-Z row ---------- */ .ff-pill { display: inline-block; padding: 5px 14px; border: 1px solid var(--ff-border-2); border-radius: var(--ff-r-pill); font-size: .9rem; color: var(--ff-body); background: var(--ff-surface); text-decoration: none; transition: background .15s, color .15s, border-color .15s; } .ff-pill:hover { background: var(--ff-surface-2); color: var(--ff-ink); border-color: var(--ff-border-2); } .ff-pill.active { background: var(--ff-ink); border-color: var(--ff-ink); color: var(--ff-bg); } .ff-pill .ff-pill-count { color: var(--ff-faint); font-size: .8rem; margin-left: 3px; } .ff-pill.active .ff-pill-count { color: inherit; opacity: .65; } .ff-az { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; font-size: .85rem; } .ff-az-label { color: var(--ff-muted); margin-right: 4px; } .ff-az a { color: var(--ff-body); text-decoration: none; padding: 2px 7px; border-radius: 6px; font-weight: 600; transition: background .15s, color .15s; } .ff-az a:hover, .ff-az a.active { background: var(--ff-ink); color: var(--ff-bg); } /* ---------- A-Z letter page list ---------- */ .ff-azlist { list-style: none; padding: 0; columns: 3; column-gap: 32px; } .ff-azlist li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--ff-border); } .ff-azlist a { text-decoration: none; color: var(--ff-ink); font-weight: 600; } .ff-azlist a:hover { color: var(--ff-link); } @media (max-width: 768px) { .ff-azlist { columns: 2; } } @media (max-width: 480px) { .ff-azlist { columns: 1; } } /* ---------- Library filter toolbar ---------- */ .ff-filter { display: flex; gap: 8px; max-width: 560px; margin-left: auto; margin-right: auto; } .ff-filter .form-control { border-radius: var(--ff-r-pill); padding-left: 1.1rem; } .ff-filter .btn { border-radius: var(--ff-r-pill); } .ff-cats { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ff-sort { margin-left: auto; display: flex; gap: 10px; font-size: .85rem; } .ff-sort a { color: var(--ff-muted); text-decoration: none; } .ff-sort a.active { color: var(--ff-link); font-weight: 700; } .ff-pager { display: flex; align-items: center; justify-content: center; } /* ============================================================ Font detail page — dark specimen panel + system surfaces ============================================================ */ .fd-card { background: var(--ff-panel); border: 1px solid var(--ff-panel-border); border-radius: var(--ff-r-lg); padding: 1.5rem 1.75rem 1.75rem; color: var(--ff-panel-body); } .fd-card .text-secondary { color: var(--ff-panel-body) !important; } .fd-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 14px; } .fd-controls .form-range { width: 160px; vertical-align: middle; } .fd-specimen { font-size: 64px; line-height: 1.2; color: #ffffff; word-break: break-word; min-height: 80px; outline: none; caret-color: var(--ff-gold); } .fd-specimen:focus { box-shadow: 0 0 0 3px rgba(245,197,91,.28); border-radius: 10px; } .fd-licbox { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; background: var(--ff-surface-2); border: 1px solid var(--ff-border); border-radius: var(--ff-r-sm); padding: .8rem 1rem; font-size: .92rem; color: var(--ff-body); } .fd-waterfall .fd-wf-row { display: flex; gap: 16px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--ff-border); } .fd-waterfall .fd-wf-label { flex: 0 0 52px; font-size: .8rem; color: var(--ff-faint); } .fd-waterfall .fd-wf-sample { color: var(--ff-ink); word-break: break-word; line-height: 1.15; } .fd-weight-row { display: flex; gap: 16px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--ff-border); } .fd-weight-label { flex: 0 0 52px; font-size: .8rem; color: var(--ff-faint); } .fd-weight-sample { font-size: 26px; color: var(--ff-ink); word-break: break-word; } .fd-info { width: 100%; font-size: .92rem; } .fd-info th { font-weight: 600; color: var(--ff-muted); padding: .5rem .75rem .5rem 0; white-space: nowrap; vertical-align: top; width: 1%; } .fd-info td { padding: .5rem 0; color: var(--ff-ink); border-bottom: 1px solid var(--ff-border); } .fd-info tr:last-child td { border-bottom: 0; } .fd-designer { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border: 1px solid var(--ff-border); border-radius: var(--ff-r-sm); padding: 1rem 1.15rem; background: var(--ff-surface); } .fd-designer .fd-designer-name { font-weight: 700; color: var(--ff-ink); } .fd-embed-block { margin-bottom: 12px; } .fd-embed-h { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--ff-body); margin-bottom: 4px; } .fd-embed pre { background: #111322; color: #e2e8f0; padding: 12px 14px; border-radius: 10px; overflow: auto; margin: 0; font-size: .82rem; border: 1px solid var(--ff-panel-border); } .fd-copy { border: 1px solid var(--ff-border-2); background: var(--ff-surface); color: var(--ff-ink); border-radius: 6px; font-size: .75rem; padding: 2px 10px; cursor: pointer; transition: background .15s; } .fd-copy:hover { background: var(--ff-surface-2); } .fd-zip { background: rgba(17,19,34,.12); border-radius: 6px; padding: .1rem .45rem; font-size: .78rem; font-weight: 700; vertical-align: middle; } /* ---------- Licenses explainer page ---------- */ .lic-section { border: 1px solid var(--ff-border); border-radius: var(--ff-r); background: var(--ff-surface); padding: 1.5rem 1.6rem; margin-bottom: 1.25rem; } .lic-section h2 { font-size: 1.25rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .lic-facts { list-style: none; padding: 0; margin: .75rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .35rem .75rem; } .lic-facts li { font-size: .92rem; color: var(--ff-body); } .lic-facts li::before { font-weight: 800; margin-right: .45rem; } .lic-facts li.yes::before { content: "\2713"; color: #16a34a; } .lic-facts li.no::before { content: "\2715"; color: #dc2626; } [data-theme="dark"] .lic-facts li.yes::before { color: #4ade80; } [data-theme="dark"] .lic-facts li.no::before { color: #f87171; } /* ============================================================ Bootstrap component re-theme ============================================================ */ /* ---------- Buttons ---------- */ .btn { font-weight: 600; border-radius: var(--ff-r-sm); padding: .6rem 1.25rem; transition: transform .12s ease, box-shadow .2s ease, background .15s; } .btn:active { transform: translateY(1px); } .btn-lg { padding: .85rem 1.8rem; font-size: 1.05rem; border-radius: 14px; } .btn-primary { background: var(--ff-ink); border-color: var(--ff-ink); color: var(--ff-bg); box-shadow: var(--ff-shadow-sm); } .btn-primary:hover, .btn-primary:focus { background: var(--ff-indigo-deep); border-color: var(--ff-indigo-deep); color: #ffffff; box-shadow: var(--ff-shadow); } [data-theme="dark"] .btn-primary { color: #111322; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn-primary:focus { background: var(--ff-gold); border-color: var(--ff-gold); color: #111322; } .btn-outline-primary { color: var(--ff-ink); border-color: var(--ff-border-2); background: var(--ff-surface); } .btn-outline-primary:hover { background: var(--ff-ink); border-color: var(--ff-ink); color: var(--ff-bg); } .btn-outline-secondary { color: var(--ff-body); border-color: var(--ff-border-2); } .btn-outline-secondary:hover { background: var(--ff-surface-2); color: var(--ff-ink); border-color: var(--ff-border-2); } .btn-success { border-radius: var(--ff-r-sm); } /* ---------- Forms ---------- */ .form-control, .form-select { border-radius: var(--ff-r-sm); border-color: var(--ff-border-2); background-color: var(--ff-surface); padding: .65rem .9rem; color: var(--ff-ink); } .form-control-lg { padding: .9rem 1.1rem; border-radius: 14px; } .form-control:focus, .form-select:focus { background-color: var(--ff-surface); color: var(--ff-ink); border-color: var(--ff-gold); box-shadow: 0 0 0 3px var(--ff-ring); } .form-control::placeholder { color: var(--ff-faint); } .form-label { font-weight: 600; color: var(--ff-ink); } .form-text { color: var(--ff-muted); } .form-range::-webkit-slider-thumb { background: var(--ff-gold); } .form-range::-moz-range-thumb { background: var(--ff-gold); } .form-range::-webkit-slider-runnable-track { background: var(--ff-border-2); } .form-range::-moz-range-track { background: var(--ff-border-2); } /* ---------- Cards ---------- */ .card { border: 1px solid var(--ff-border); border-radius: var(--ff-r); background: var(--ff-surface); box-shadow: none; } .card.shadow-sm { box-shadow: var(--ff-shadow-sm) !important; } /* ---------- FAQ accordion ---------- */ .accordion { --bs-accordion-border-color: var(--ff-border); border-radius: var(--ff-r); overflow: hidden; } .accordion-item { border-color: var(--ff-border); background: var(--ff-surface); } .accordion-button { font-weight: 600; color: var(--ff-ink); background: var(--ff-surface); padding: 1.05rem 1.25rem; } .accordion-button:not(.collapsed) { color: var(--ff-ink); background: var(--ff-surface-2); box-shadow: none; } .accordion-button:focus { box-shadow: 0 0 0 3px var(--ff-ring); border-color: var(--ff-gold); } .accordion-body { color: var(--ff-body); } /* ---------- Breadcrumb ---------- */ .breadcrumb { font-size: .9rem; } .breadcrumb-item a { color: var(--ff-muted); } .breadcrumb-item.active { color: var(--ff-ink); } .breadcrumb-item + .breadcrumb-item::before { color: var(--ff-faint); } /* ---------- Dropdowns / misc bootstrap ---------- */ .dropdown-menu { border-color: var(--ff-border); border-radius: var(--ff-r-sm); background: var(--ff-surface); box-shadow: var(--ff-shadow); } .dropdown-item { color: var(--ff-body); } .dropdown-item:hover { background: var(--ff-surface-2); color: var(--ff-ink); } pre { border-radius: var(--ff-r-sm); } /* ---------- Footer ---------- */ footer.site-footer { background: var(--ff-surface); border-top: 1px solid var(--ff-border); } footer.site-footer a { color: var(--ff-muted); font-weight: 500; } footer.site-footer a:hover { color: var(--ff-ink); } footer.site-footer .brand { font-weight: 800; color: var(--ff-ink); } .site-footer .ff-fhead { font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ff-muted); font-weight: 700; margin-bottom: .6rem; } .site-footer .ff-fcol a { display: block; padding: .18rem 0; font-size: .92rem; } .site-footer .ff-az a { padding: 1px 5px; font-size: .8rem; } /* ---------- Pricing (kept) ---------- */ .pricing-card { border-radius: var(--ff-r); transition: transform 0.2s; } .pricing-card:hover { transform: translateY(-5px); } .pricing-card.featured { border: 2px solid var(--ff-gold); } .popular-badge { background: var(--ff-gold); color: #111322; } #card-element { border: 1px solid var(--ff-border-2); padding: 0.75rem; border-radius: var(--ff-r-sm); background: var(--ff-surface); } .spinner-border-sm { width: 1rem; height: 1rem; } /* ---------- Utility ---------- */ .hidden { display: none !important; } .alert ul { margin: 0; padding-left: 1rem; } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .display-4 { font-size: 2rem; } .bf-section { padding: 2.5rem 0; } .font-card .preview { font-size: 44px; min-height: 54px; } .fd-specimen { font-size: 44px; min-height: 60px; } }