/* * Futureita design system. * * Written with CSS logical properties (margin-inline-start, text-align: * start, etc.) throughout instead of left/right, so a future English/LTR * version only needs `dir="ltr"` on — the layout flips itself. * Mobile-first: base rules target small screens, min-width queries layer * on larger layouts. */ :root { --fp-primary: #0b3b67; --fp-primary-dark: #082c4e; --fp-primary-light: #e8f0f8; --fp-accent: #0d9488; --fp-accent-light: #e6f7f5; --fp-warm: #f59e0b; --fp-warm-light: #fef3e2; --fp-bg: #f6f8fb; --fp-surface: #ffffff; --fp-border: #e2e8f0; --fp-text: #0f172a; --fp-text-muted: #64748b; --fp-text-faint: #94a3b8; --fp-success-bg: #dcfce7; --fp-success-text: #166534; --fp-warning-bg: #fef9c3; --fp-warning-text: #854d0e; --fp-danger-bg: #fee2e2; --fp-danger-text: #991b1b; --fp-info-bg: #dbeafe; --fp-info-text: #1e40af; --fp-radius-sm: 8px; --fp-radius: 14px; --fp-radius-lg: 22px; --fp-shadow: 0 4px 20px rgba(15, 23, 42, 0.06); --fp-shadow-md: 0 12px 32px rgba(15, 23, 42, 0.10); --fp-container: 1180px; --fp-gap: 20px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fp-bg: #0b1220; --fp-surface: #121a2b; --fp-border: #223049; --fp-text: #e8edf6; --fp-text-muted: #9fb0c9; --fp-text-faint: #6d7fa0; --fp-primary-light: #16283f; --fp-accent-light: #10302c; --fp-warm-light: #2c2110; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fp-bg); color: var(--fp-text); font-family: 'Cairo', 'Tahoma', Arial, sans-serif; font-size: 16px; line-height: 1.7; text-align: start; } img { max-width: 100%; display: block; height: auto; } a { color: var(--fp-primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 .5em; font-weight: 700; } p { margin: 0 0 1em; } ul { padding-inline-start: 1.2em; } :focus-visible { outline: 3px solid var(--fp-accent); outline-offset: 2px; } .fp-container { max-width: var(--fp-container); margin-inline: auto; padding-inline: 16px; } .fp-section { padding-block: 48px; } @media (min-width: 768px) { .fp-section { padding-block: 72px; } } /* ---------------- Buttons ---------------- */ .fp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: var(--fp-radius-sm); font-weight: 600; border: 1px solid transparent; cursor: pointer; font-size: 15px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; text-decoration: none; } .fp-btn:hover { text-decoration: none; } .fp-btn--primary { background: var(--fp-primary); color: #fff; } .fp-btn--primary:hover { background: var(--fp-primary-dark); } .fp-btn--accent { background: var(--fp-accent); color: #fff; } .fp-btn--warm { background: var(--fp-warm); color: #1a1200; } .fp-btn--outline { background: transparent; color: var(--fp-primary); border-color: var(--fp-primary); } .fp-btn--ghost { background: var(--fp-surface); color: var(--fp-text); border-color: var(--fp-border); } .fp-btn--sm { padding: 8px 14px; font-size: 13px; } .fp-btn--block { width: 100%; } .fp-btn[disabled] { opacity: .5; cursor: not-allowed; } /* ---------------- Header / nav ---------------- */ .fp-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--fp-border); } .fp-header__row { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; gap: 12px; } .fp-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; color: var(--fp-primary); } .fp-logo__mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--fp-primary), var(--fp-accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; } .fp-nav { display: none; gap: 22px; align-items: center; } .fp-nav a { color: var(--fp-text); font-weight: 600; font-size: 15px; } .fp-header__actions { display: flex; align-items: center; gap: 10px; } .fp-nav-toggle { background: none; border: 1px solid var(--fp-border); border-radius: var(--fp-radius-sm); padding: 8px 10px; } @media (min-width: 900px) { .fp-nav { display: flex; } .fp-nav-toggle { display: none; } } .fp-mobile-menu { display: none; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--fp-border); } .fp-mobile-menu.is-open { display: flex; } .fp-mobile-menu a { padding: 10px 4px; color: var(--fp-text); font-weight: 600; } .fp-logout-form { display: inline-flex; margin: 0; } .fp-mobile-menu .fp-logout-form { display: flex; } .fp-mobile-menu .fp-logout-form button { width: 100%; text-align: start; padding: 10px 4px; background: none; border: none; color: var(--fp-text); font-weight: 600; font-family: inherit; font-size: 15px; cursor: pointer; } /* ---------------- Hero ---------------- */ .fp-hero { background: linear-gradient(135deg, var(--fp-primary) 0%, #114c82 55%, var(--fp-accent) 130%); color: #fff; padding-block: 56px; position: relative; overflow: hidden; } .fp-hero__grid { display: grid; gap: 32px; align-items: center; } @media (min-width: 900px) { .fp-hero__grid { grid-template-columns: 1.1fr .9fr; } } .fp-hero h1 { font-size: 32px; } @media (min-width: 768px) { .fp-hero h1 { font-size: 44px; } } .fp-hero p { color: rgba(255,255,255,.85); font-size: 17px; max-width: 46ch; } .fp-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; } .fp-hero__image { border-radius: var(--fp-radius-lg); overflow: hidden; box-shadow: var(--fp-shadow-md); } .fp-hero__stats { display: flex; gap: 24px; margin-top: 32px; flex-wrap: wrap; } .fp-hero__stat b { display: block; font-size: 24px; } .fp-hero__stat span { color: rgba(255,255,255,.7); font-size: 13px; } /* ---------------- Cards & grids ---------------- */ .fp-grid { display: grid; gap: var(--fp-gap); grid-template-columns: 1fr; } @media (min-width: 640px) { .fp-grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .fp-grid--3 { grid-template-columns: repeat(3, 1fr); } .fp-grid--4 { grid-template-columns: repeat(4, 1fr); } } .fp-card { background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius); padding: 22px; box-shadow: var(--fp-shadow); } .fp-card h3 { margin-bottom: 6px; font-size: 18px; } .fp-card p { color: var(--fp-text-muted); font-size: 14.5px; } .fp-community-card, .fp-company-card, .fp-ad-card { display: block; background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius); padding: 20px; box-shadow: var(--fp-shadow); text-decoration: none; color: var(--fp-text); transition: transform .15s ease, box-shadow .15s ease; } .fp-community-card:hover, .fp-company-card:hover, .fp-ad-card:hover { transform: translateY(-3px); box-shadow: var(--fp-shadow-md); text-decoration: none; } .fp-community-card h3, .fp-company-card h3, .fp-ad-card h3 { color: var(--fp-primary); } .fp-company-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .fp-company-card__logo { width: 52px; height: 52px; border-radius: 12px; background: var(--fp-primary-light); display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--fp-primary); overflow: hidden; flex-shrink: 0; } .fp-company-card__logo img { display: block; } .fp-verified-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--fp-accent); background: var(--fp-accent-light); border-radius: 999px; padding: 3px 10px; } /* ---------------- Pills / statuses ---------------- */ .fp-pill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #e2e8f0; color: #334155; } .fp-pill--approved, .fp-pill--active, .fp-pill--confirmed, .fp-pill--published, .fp-pill--added, .fp-pill--paid { background: var(--fp-success-bg); color: var(--fp-success-text); } .fp-pill--pending, .fp-pill--submitted, .fp-pill--awaiting_payment, .fp-pill--receipt_submitted, .fp-pill--ready_to_add { background: var(--fp-warning-bg); color: var(--fp-warning-text); } .fp-pill--rejected, .fp-pill--blocked, .fp-pill--removed, .fp-pill--unpaid { background: var(--fp-danger-bg); color: var(--fp-danger-text); } .fp-pill--changes_requested { background: var(--fp-info-bg); color: var(--fp-info-text); } .fp-pill--expired, .fp-pill--inactive, .fp-pill--draft { background: #f1f5f9; color: #64748b; } /* ---------------- Forms ---------------- */ .fp-form { max-width: 640px; } .fp-form--wide { max-width: 100%; } .fp-field { margin-bottom: 18px; } .fp-field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14.5px; } .fp-field .fp-hint { color: var(--fp-text-muted); font-size: 12.5px; margin-top: 4px; } .fp-input, .fp-select, .fp-textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--fp-border); border-radius: var(--fp-radius-sm); font-family: inherit; font-size: 15px; background: var(--fp-surface); color: var(--fp-text); } .fp-input:focus, .fp-select:focus, .fp-textarea:focus { border-color: var(--fp-accent); } .fp-textarea { resize: vertical; min-height: 110px; } .fp-checkbox { display: flex; align-items: center; gap: 8px; font-weight: 500; } .fp-row { display: grid; gap: 14px; } @media (min-width: 640px) { .fp-row--2 { grid-template-columns: 1fr 1fr; } } .fp-auth-card { max-width: 440px; margin: 0 auto; } .fp-otp-input { letter-spacing: 8px; font-size: 24px; text-align: center; } .fp-flash { border-radius: var(--fp-radius-sm); padding: 12px 16px; margin-bottom: 18px; font-size: 14.5px; } .fp-flash--ok { background: var(--fp-success-bg); color: var(--fp-success-text); } .fp-flash--err { background: var(--fp-danger-bg); color: var(--fp-danger-text); } /* ---------------- Directory / search ---------------- */ .fp-search-bar { display: grid; gap: 10px; background: var(--fp-surface); border: 1px solid var(--fp-border); padding: 16px; border-radius: var(--fp-radius); box-shadow: var(--fp-shadow); } @media (min-width: 768px) { .fp-search-bar { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; } } /* ---------------- Footer ---------------- */ .fp-footer { background: var(--fp-primary-dark); color: rgba(255,255,255,.85); padding-block: 40px; margin-top: 60px; } .fp-footer a { color: #fff; } .fp-footer__grid { display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 768px) { .fp-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } } .fp-footer h4 { color: #fff; font-size: 14px; } .fp-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .fp-footer__bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 28px; padding-top: 18px; font-size: 13px; color: rgba(255,255,255,.6); text-align: center; } /* ---------------- WhatsApp floating button ---------------- */ .fp-whatsapp-btn { position: fixed; inset-inline-end: 18px; inset-block-end: 18px; z-index: 50; background: #25D366; color: #fff; padding: 12px 18px; border-radius: 999px; box-shadow: var(--fp-shadow-md); font-weight: 700; font-size: 14px; } /* ---------------- Utility ---------------- */ .fp-muted { color: var(--fp-text-muted); } .fp-text-center { text-align: center; } .fp-mt-0 { margin-top: 0; } .fp-stack { display: flex; flex-direction: column; gap: 14px; } .fp-inline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .fp-divider { border: none; border-top: 1px solid var(--fp-border); margin: 24px 0; } .skip-link { position: absolute; inset-inline-start: -999px; } .skip-link:focus { inset-inline-start: 10px; top: 10px; background: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }