/* ===================================================================== Tinix Academy — hand-written CSS additions (NO Tailwind rebuild needed). Loaded after public/css/app.css in the base layout. Contains styling for new components (image lightbox) and the site-wide dark theme. Everything is plain CSS so it works without regenerating the compiled Tailwind stylesheet. ===================================================================== */ /* ---- Image preview / lightbox (clickable profile pictures) ---- */ .tlb-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.8); } .tlb-img { max-height: 85vh; max-width: 90vw; object-fit: contain; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); } .tlb-close { position: absolute; top: 1rem; right: 1rem; display: flex; height: 2.5rem; width: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px; background: rgba(255, 255, 255, 0.12); color: #fff; transition: background 0.15s ease; } .tlb-close:hover { background: rgba(255, 255, 255, 0.24); } .tlb-trigger { cursor: pointer; } /* ===================================================================== DARK THEME Activated by the `dark` class on (see the theme toggle). Because the compiled Tailwind stylesheet has no `dark:` utilities, we override the app's real component classes and the common colour utilities here by hand. All selectors are `.dark …` so light mode is completely unaffected. ===================================================================== */ .dark body { background-color: #080d18; color: #e2e8f0; } /* ---- Surfaces / cards ---- */ .dark .card, .dark .stat-tile { background-color: #121a2b; border-color: rgba(148, 163, 184, 0.14); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); } .dark .card-hover:hover { border-color: rgba(148, 163, 184, 0.28); } .dark .bg-white { background-color: #121a2b !important; } .dark .bg-white\/95, .dark .bg-white\/90, .dark .bg-white\/80, .dark .bg-white\/70, .dark .bg-white\/60 { background-color: rgba(18, 26, 43, 0.88) !important; } .dark .bg-slate-50 { background-color: #0f1728 !important; } .dark .bg-slate-100 { background-color: #1a2540 !important; } .dark .bg-brand-50 { background-color: rgba(37, 99, 235, 0.16) !important; } .dark .bg-brand-100 { background-color: rgba(37, 99, 235, 0.22) !important; } /* Subtle gradient bands (headers / cards) flatten to a dark surface. */ .dark .bg-gradient-to-br.from-slate-50, .dark .bg-gradient-to-b.from-slate-50, .dark .bg-grid-brand, .dark .bg-mesh-brand { background-image: none !important; background-color: #0d1424 !important; } /* ---- Text ---- */ .dark .text-ink, .dark .text-ink-deep, .dark .text-slate-900, .dark .text-slate-800 { color: #e5e9f0 !important; } .dark .text-slate-700, .dark .text-slate-600 { color: #cbd5e1 !important; } .dark .text-slate-500, .dark .text-slate-400 { color: #94a3b8 !important; } /* ---- Borders ---- */ .dark .border-slate-100, .dark .border-slate-200, .dark .border-slate-200\/80, .dark .border-slate-300 { border-color: rgba(148, 163, 184, 0.16) !important; } .dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]), .dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(148, 163, 184, 0.14) !important; } /* ---- Form controls ---- */ .dark .input { background-color: #0f1728; border-color: rgba(148, 163, 184, 0.22); color: #e5e9f0; } .dark .input::placeholder { color: #64748b; } .dark .label { color: #cbd5e1; } .dark select.input option { background-color: #121a2b; color: #e5e9f0; } /* ---- Buttons that use light surfaces ---- */ .dark .btn-outline { background-color: rgba(255, 255, 255, 0.04); border-color: rgba(148, 163, 184, 0.28); color: #e5e9f0; } .dark .btn-outline:hover { background-color: rgba(255, 255, 255, 0.08); color: #fff; } .dark .btn-ghost { color: #cbd5e1; } .dark .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.08); color: #fff; } /* ---- Hover utilities used on rows / menu items ---- */ .dark .hover\:bg-slate-50:hover { background-color: rgba(255, 255, 255, 0.04) !important; } .dark .hover\:bg-slate-100:hover { background-color: rgba(255, 255, 255, 0.07) !important; } .dark .hover\:bg-white:hover { background-color: #1a2540 !important; } .dark .hover\:text-ink:hover { color: #e5e9f0 !important; } /* ---- Badges keep coloured tints but need readable dark backgrounds ---- */ .dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.16) !important; } .dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.16) !important; } .dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.16) !important; } .dark .text-emerald-700 { color: #6ee7b7 !important; } .dark .text-red-700, .dark .text-red-600 { color: #fca5a5 !important; } .dark .text-amber-700, .dark .text-amber-900 { color: #fcd34d !important; } /* ---- Theme toggle button (sun in dark, moon in light) ---- */ .tinix-theme-toggle { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; width: 2.25rem; border-radius: 9999px; border: 1px solid rgba(148, 163, 184, 0.35); color: #475569; background: transparent; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .tinix-theme-toggle:hover { color: #0066ff; border-color: #0066ff; } .dark .tinix-theme-toggle { color: #cbd5e1; border-color: rgba(148, 163, 184, 0.28); } .dark .tinix-theme-toggle:hover { color: #fbbf24; border-color: #fbbf24; } .tinix-theme-toggle .tnx-icon-moon { display: inline-flex; } .tinix-theme-toggle .tnx-icon-sun { display: none; } .dark .tinix-theme-toggle .tnx-icon-moon { display: none; } .dark .tinix-theme-toggle .tnx-icon-sun { display: inline-flex; } /* ===================================================================== PROFILE AVATAR (single-picture system: click to enlarge + Edit modal) Used by resources/views/components/profile-avatar.blade.php. Plain CSS so no Tailwind rebuild is needed. ===================================================================== */ .tnx-avatar { height: 8rem; /* 128px desktop — professional avatar size */ width: 8rem; flex: none; /* never stretch inside a flex column */ aspect-ratio: 1 / 1; /* guarantee a square box → perfect circle */ border-radius: 50%; /* perfect circle */ object-fit: cover; /* fill the circle, crop rectangles cleanly */ -webkit-user-select: none; user-select: none; } .tnx-avatar--photo { cursor: zoom-in; background: #f1f5f9; box-shadow: 0 0 0 4px #fff, 0 10px 24px -8px rgba(2, 32, 71, 0.28); transition: transform 0.15s ease, box-shadow 0.15s ease; } .tnx-avatar--photo:hover { transform: translateY(-1px); } .tnx-avatar--placeholder { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.85rem; letter-spacing: 0.02em; color: #fff; background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); box-shadow: 0 0 0 4px #fff, 0 10px 24px -8px rgba(2, 32, 71, 0.28); } .tnx-avatar-badge { position: absolute; bottom: 0.1rem; right: 0.1rem; display: flex; height: 2rem; width: 2rem; align-items: center; justify-content: center; border-radius: 9999px; background: #0066ff; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(2, 32, 71, 0.25); transition: background 0.15s ease, transform 0.15s ease; } .tnx-avatar-badge:hover { background: #0052cc; transform: scale(1.06); } .dark .tnx-avatar--photo, .dark .tnx-avatar--placeholder { box-shadow: 0 0 0 4px #121a2b, 0 10px 24px -8px rgba(0, 0, 0, 0.5); } .dark .tnx-avatar-badge { border-color: #121a2b; } /* ===================================================================== MOBILE UI/UX LAYER Progressive polish for phones and small tablets. All rules are additive and scoped so desktop is unchanged. Goal: a clean, premium learning-platform feel on phones — no horizontal scroll, images that fit, comfortable spacing and typography, and reliably tappable controls. ===================================================================== */ /* ---- Global safety: never allow sideways scrolling on small screens ---- */ body { position: relative; width: 100%; overflow-x: hidden; /* fallback for older browsers */ overflow-x: clip; /* preferred: clips sideways bleed WITHOUT creating a scroll container, so the sticky navbar keeps working */ } /* Media never overflows its column; long words/URLs wrap instead of pushing width. */ img, video, canvas, svg { max-width: 100%; } h1, h2, h3, h4, p, a, span, li { overflow-wrap: break-word; } /* Smoother, app-like tap feedback (removes the grey flash on iOS/Android). */ a, button, [role="button"], .btn-primary, .btn-outline, .btn-ghost, .btn-accent { -webkit-tap-highlight-color: transparent; } @media (max-width: 640px) { /* Prevent iOS Safari from auto-zooming when a form field is focused (any control under 16px triggers it). Keeps forms feeling native. */ .input, input, select, textarea { font-size: 16px !important; } /* Comfortable, thumb-friendly controls. Buttons already ship at 2.75rem; this guarantees icon-only ghost buttons stay tappable too. */ .btn-primary, .btn-outline, .btn-ghost, .btn-accent { min-height: 2.75rem; } /* Fluid display type: large hero/section headings that carry no responsive prefix scale down so they read well and never overflow on phones. */ .text-6xl { font-size: 2.6rem !important; line-height: 1.1 !important; } .text-5xl { font-size: 2.25rem !important; line-height: 1.14 !important; } .text-4xl { font-size: 1.95rem !important; line-height: 1.18 !important; } .text-3xl { font-size: 1.6rem !important; line-height: 1.22 !important; } /* Slightly tighter card padding on the smallest screens so content gets more room without feeling cramped. Only affects the heaviest paddings. */ .card.p-8 { padding: 1.5rem !important; } /* The profile avatar sits centered and a touch smaller on phones. */ .tnx-avatar { height: 6rem; width: 6rem; } /* 96px mobile */ } /* ---- Small phones: keep two-up stat/number rows from crowding ---- */ @media (max-width: 380px) { .text-6xl { font-size: 2.25rem !important; } .text-5xl { font-size: 2rem !important; } } /* ---- Crop/edit & preview modals: comfortable on phones ---- */ @media (max-width: 640px) { .cropper-container { max-height: 46vh !important; } } /* ===================================================================== INVOICE — mobile-friendly digital invoice Desktop markup/classes are untouched; these rules only restyle the sheet on phones/small tablets so it reads like a clean digital invoice: sections stack, nothing overflows, and spacing stays comfortable. Print layout is unaffected. ===================================================================== */ @media (max-width: 640px) { #invoice-sheet { padding: 1.25rem !important; } /* Header: logo on top, invoice number/date beneath — all left-aligned. */ .inv-header { flex-direction: column; gap: 1rem; } .inv-header-right { text-align: left !important; } /* Billed-to / Payment become a single readable column. */ .inv-parties { grid-template-columns: 1fr !important; gap: 1.5rem !important; } /* Payment details left-align and their status rows move to the left too. */ .inv-pay { text-align: left !important; } .inv-pay .justify-end { justify-content: flex-start !important; } /* Totals block spans the width so the grand total is easy to read. */ #invoice-sheet .w-64 { width: 100% !important; } } /* ===================================================================== ADMIN — text wrapping + "Open" details modal Used by Live Classes → Requests (admin/vip) and Work With Us → submissions (admin/project-requests). Plain CSS, no Tailwind rebuild. Goal: long names / emails / messages wrap cleanly and never create horizontal overflow, and a clean modal shows the full submission. ===================================================================== */ /* Guaranteed wrapping for any element (does not rely on a compiled Tailwind utility). Breaks long unbroken strings (emails, URLs) so they can never push a table cell or card wider than its column. */ .tnx-wrap { overflow-wrap: anywhere; word-break: break-word; min-width: 0; } /* Clamp a preview to two lines in list views; the full text lives in the modal. */ .tnx-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ---- Details modal ---- */ .tnx-modal { position: fixed; inset: 0; z-index: 110; display: flex; /* toggled via inline display:none */ align-items: center; justify-content: center; padding: 1rem; } .tnx-modal-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.55); } .tnx-modal-panel { position: relative; z-index: 1; width: 100%; max-width: 34rem; max-height: 85vh; overflow-y: auto; background: #fff; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(2, 32, 71, 0.35); } .tnx-modal-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.25rem; background: #fff; border-bottom: 1px solid #eef2f7; } .tnx-modal-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #0b1220; overflow-wrap: anywhere; /* long names never stretch the header */ } .tnx-modal-close { display: inline-flex; align-items: center; justify-content: center; height: 2rem; width: 2rem; flex: none; border-radius: 9999px; color: #64748b; transition: background 0.15s ease, color 0.15s ease; } .tnx-modal-close:hover { background: #f1f5f9; color: #0b1220; } .tnx-modal-body { margin: 0; padding: 1rem 1.25rem 1.25rem; } .tnx-modal-row { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.15rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid #f1f5f9; } .tnx-modal-row:last-child { border-bottom: 0; } .tnx-modal-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #94a3b8; padding-top: 0.1rem; } .tnx-modal-value { margin: 0; font-size: 0.9rem; line-height: 1.55; color: #0b1220; white-space: pre-wrap; /* preserve line breaks in messages */ overflow-wrap: anywhere; /* long unbroken strings wrap, never overflow */ min-width: 0; } @media (max-width: 640px) { .tnx-modal-row { grid-template-columns: 1fr; gap: 0.1rem; } } /* Dark theme */ .dark .tnx-modal-panel { background: #121a2b; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); } .dark .tnx-modal-head { background: #121a2b; border-bottom-color: rgba(148, 163, 184, 0.14); } .dark .tnx-modal-title { color: #e5e9f0; } .dark .tnx-modal-close { color: #94a3b8; } .dark .tnx-modal-close:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .dark .tnx-modal-row { border-bottom-color: rgba(148, 163, 184, 0.12); } .dark .tnx-modal-label { color: #94a3b8; } .dark .tnx-modal-value { color: #e5e9f0; }