/* ============================================================ OFC — OPML Forms & Cards File: public/css/ofc.css Prefix: ofc- PURPOSE: Modern, professional forms and dashboard cards that match the OPML design language. Completely independent — does not touch, override or conflict with any existing CSS files: custom_landing.css, card.css, opml.css, opml_sections.css. USAGE: Add ONE line to your layout AFTER all existing stylesheets: Then swap old class combos for ofc- classes in new blade files. Old blades remain untouched and fully functional. ============================================================ */ /* ── Scoped variables (won't leak to other CSS) ───────────── */ .ofc-wrap, .ofc-wrap * { box-sizing: border-box; } /* ════════════════════════════════════════════════════════════ 1. PAGE WRAPPERS Full-page centred layout (login/register/forgot/reset/verify) ════════════════════════════════════════════════════════════ */ /* Auth pages — full viewport centred */ .ofc-auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f4f4f6; padding: 24px 16px; } /* Dashboard pages — full viewport with top padding (after nav) */ .ofc-dash-page { min-height: 100vh; background: #f4f4f6; padding: 48px 0 80px; } .ofc-dash-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* ════════════════════════════════════════════════════════════ 2. AUTH CARD (login / register / forgot / reset / verify) ════════════════════════════════════════════════════════════ */ .ofc-card { width: 100%; max-width: 440px; background: #ffffff; border: 1px solid rgba(0,0,0,0.06); border-radius: 20px; padding: 40px 36px 44px; box-shadow: 0 4px 32px rgba(0,0,0,0.08); } /* Wider variant for registration which has more fields */ .ofc-card--wide { max-width: 520px; } /* Back / nav link at top of card */ .ofc-card__back { display: inline-flex; align-items: center; gap: 6px; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 600; color: #888898; text-decoration: none; margin-bottom: 24px; transition: color 0.2s, gap 0.2s; } .ofc-card__back:hover { color: #111114; gap: 9px; } .ofc-card__back::before { content: '←'; font-size: 0.9rem; } /* Gold accent bar above the card title */ .ofc-card__accent { width: 32px; height: 3px; background: #e8c547; border-radius: 999px; margin-bottom: 14px; } /* Card heading */ .ofc-card__title { font-family: 'Syne', sans-serif; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; color: #111114; margin: 0 0 28px; line-height: 1.1; } /* Subtitle / description text under heading */ .ofc-card__sub { font-size: 0.9rem; color: #666672; line-height: 1.65; margin-top: -18px; margin-bottom: 22px; } /* Alert — success */ .ofc-alert--success { background: #ecfdf5; border: 1px solid rgba(16,185,129,0.25); border-radius: 10px; padding: 12px 16px; font-size: 0.875rem; color: #065f46; margin-bottom: 20px; } /* Alert — error */ .ofc-alert--error { background: #fff5f5; border: 1px solid rgba(239,68,68,0.22); border-radius: 10px; padding: 12px 16px; font-size: 0.875rem; color: #9b1c1c; margin-bottom: 20px; } /* ════════════════════════════════════════════════════════════ 3. FORM ELEMENTS All scoped under .ofc-form — zero leakage to other forms ════════════════════════════════════════════════════════════ */ .ofc-form { width: 100%; } .ofc-field { margin-bottom: 18px; } .ofc-label { display: block; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 600; color: #444450; margin-bottom: 7px; letter-spacing: 0.01em; } /* Text / email / password inputs */ .ofc-input { display: block; width: 100%; padding: 11px 14px; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #111114; background: #fafafa; border: 1.5px solid #e0e0e8; border-radius: 10px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; -webkit-appearance: none; } .ofc-input:focus { border-color: #e8c547; background: #ffffff; box-shadow: 0 0 0 3px rgba(232,197,71,0.16); } .ofc-input::placeholder { color: #aaaabc; } /* Invalid state */ .ofc-input--invalid { border-color: #ef4444; background: #fff8f8; } .ofc-input--invalid:focus { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.14); } /* Inline error message */ .ofc-field-error { display: block; font-size: 0.78rem; color: #dc2626; margin-top: 6px; } /* Checkbox row */ .ofc-check-row { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .ofc-check-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: #e8c547; cursor: pointer; flex-shrink: 0; } .ofc-check-row label { font-family: 'DM Sans', sans-serif; font-size: 0.875rem; color: #555560; cursor: pointer; } /* Form footer row — forgot password + submit */ .ofc-form-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 24px; } /* Forgot password / misc small link */ .ofc-link { font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 500; color: #888898; text-decoration: none; transition: color 0.2s; } .ofc-link:hover { color: #111114; } /* ════════════════════════════════════════════════════════════ 4. BUTTONS Primary (gold), secondary (ghost), danger (soft red) All scoped — won't override .btn-primary or .custom-btn ════════════════════════════════════════════════════════════ */ .ofc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 24px; border-radius: 999px; font-family: 'DM Sans', sans-serif; font-size: 0.875rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; line-height: 1; white-space: nowrap; transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } /* Primary — gold */ .ofc-btn--primary { background: #e8c547; color: #111114; box-shadow: 0 4px 18px rgba(232,197,71,0.30); } .ofc-btn--primary:hover { background: #d4b030; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(232,197,71,0.38); color: #111114; } /* Full-width primary (used on auth forms) */ .ofc-btn--full { width: 100%; padding: 13px 24px; font-size: 0.92rem; } /* Ghost / outline */ .ofc-btn--ghost { background: transparent; color: #555560; border: 1.5px solid #d8d8e0; box-shadow: none; } .ofc-btn--ghost:hover { background: #f4f4f6; border-color: #a0a0b0; color: #111114; transform: translateY(-2px); } /* Danger (soft red — for logout etc) */ .ofc-btn--danger { background: #fff5f5; color: #c0392b; border: 1.5px solid rgba(192,57,43,0.2); box-shadow: none; } .ofc-btn--danger:hover { background: #fde8e8; border-color: rgba(192,57,43,0.4); transform: translateY(-2px); } /* ════════════════════════════════════════════════════════════ 5. DASHBOARD PAGE HEADER ════════════════════════════════════════════════════════════ */ .ofc-dash-hero { background: #ffffff; border-bottom: 1px solid #e8e8ed; padding: 44px 0 36px; margin-bottom: 40px; } .ofc-dash-hero__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .ofc-dash-hero__label { font-family: 'Syne', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #b8860b; display: block; margin-bottom: 8px; } .ofc-dash-hero__title { font-family: 'Syne', sans-serif; font-size: clamp(1.5rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -0.03em; color: #111114; margin: 0 0 6px; } .ofc-dash-hero__sub { font-size: 0.96rem; color: #666672; } /* ════════════════════════════════════════════════════════════ 6. DASHBOARD ACTION CARDS Used in schedule-component and usection2 equivalents. Prefix: ofc-action- to avoid .card conflicts ════════════════════════════════════════════════════════════ */ /* Row of action cards — wraps at mobile */ .ofc-action-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 32px; } /* Individual action card */ .ofc-action-card { background: #ffffff; border: 1px solid rgba(0,0,0,0.06); border-radius: 18px; padding: 28px 26px 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); display: flex; flex-direction: column; gap: 8px; transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease, border-color 0.28s ease; } .ofc-action-card:hover { transform: translateY(-5px); box-shadow: 0 14px 40px rgba(0,0,0,0.10); border-color: rgba(232,197,71,0.32); } /* Coloured icon badge at top of card */ .ofc-action-card__icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 4px; flex-shrink: 0; } .ofc-action-card__icon--blue { background: #eff6ff; } .ofc-action-card__icon--green { background: #ecfdf5; } .ofc-action-card__icon--gold { background: #fefce8; } .ofc-action-card__icon--purple { background: #f5f3ff; } .ofc-action-card__icon--red { background: #fff5f5; } .ofc-action-card__title { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 800; color: #111114; margin: 0; line-height: 1.25; } .ofc-action-card__sub { font-size: 0.82rem; color: #888898; line-height: 1.55; margin: 0; flex: 1; } /* CTA button area */ .ofc-action-card__cta { margin-top: 14px; } /* Section title between card rows */ .ofc-section-heading { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 800; color: #111114; letter-spacing: -0.01em; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid #e8e8ed; display: flex; align-items: center; gap: 10px; } .ofc-section-heading::before { content: ''; width: 3px; height: 18px; background: #e8c547; border-radius: 999px; display: block; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════ 7. VERIFY EMAIL PAGE (special layout — not a standard form) ════════════════════════════════════════════════════════════ */ .ofc-verify-icon { width: 64px; height: 64px; background: #fefce8; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 20px; border: 2px solid rgba(232,197,71,0.3); } .ofc-verify-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; } .ofc-verify-divider { display: flex; align-items: center; gap: 12px; font-size: 0.78rem; color: #aaaabc; } .ofc-verify-divider::before, .ofc-verify-divider::after { content: ''; flex: 1; height: 1px; background: #e8e8ed; } /* ════════════════════════════════════════════════════════════ 8. RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (max-width: 600px) { .ofc-card { padding: 28px 20px 32px; border-radius: 16px; } .ofc-action-row { grid-template-columns: 1fr; } .ofc-dash-hero { padding: 32px 0 26px; margin-bottom: 28px; } .ofc-dash-inner { padding: 0 16px; } .ofc-form-footer { flex-direction: column; align-items: stretch; } .ofc-form-footer .ofc-link { text-align: center; } } @media (min-width: 601px) and (max-width: 900px) { .ofc-action-row { grid-template-columns: repeat(2, 1fr); } }