/* =========================================================== TG-Dance — Universal Section System (Skeleton) File: custom_section.css ----------------------------------------------------------- PURPOSE - Provide reusable, page-agnostic "card section" building blocks for user/admin dashboards and future pages. - Keep look consistent with dark theme + neon glow from global.css, while staying modular (no coupling to contact.css). HOW TO USE - Wrap each logical block in `.section-card`, then add optional modifiers (e.g., `.section-card--compact`) and a color theme (e.g., `.theme-teal`) on the same element. - Inside a card, compose with `.section-intro`, `.section-form`, `.section-note`, `.section-label`, `.section-highlight`, etc. - Links inside sections use `.section-link` or `.section-action`. NAMING CONVENTIONS - Block: `.section-card` - Element: `.section-*` (sub-elements inside a card) - Modifiers: `.section-card--*` or state `.is-*` - Themes: `.theme-*` (adds border/glow color family) PALETTE REFERENCES (from global.css) - Lime: #76ff03 (primary accent) - BrightGreen: #00e676 (hover) - Teal: #199193 (inline highlight) - Violet: #7b2cbf (labels / accents) - Yellow: #ffd166 (emphasis) - Base card bg typically dark translucent (see global.css) DEPENDENCIES - global.css sets overall dark body and base section feel. - These classes *layer on top* and should not conflict. =========================================================== */ /* =========================================================== 1) CORE CARD WRAPPERS ----------------------------------------------------------- Use these for the outer section container. Mimic the card look (padding, radius, centered, neon glow via theme). =========================================================== */ /* Base card container (dark, padded, rounded, glow via theme) */ .section-card { /* (apply bg, padding, radius, box-shadow placeholder) */ } /* Reduced inner spacing for dense content or stacked mobile */ .section-card--compact { /* (override padding/margins smaller) */ } /* Flush variant when nesting cards (remove outer spacing) */ .section-card--flush { /* (minimize margin, keep padding) */ } /* Emphasized variant (e.g., warnings, callouts) */ .section-card--highlight { /* (slightly stronger border/glow) */ } /* =========================================================== 2) INNER BLOCKS / ELEMENTS ----------------------------------------------------------- Reusable pieces inside a card: intro panel, forms, notes. =========================================================== */ /* Subtle inner info box with thin border + tinted background */ .section-intro { /* (light tint bg, 1px border, radius, padding) */ } /* Form wrapper: centered column, left-aligned fields, max-width */ .section-form { /* (max-width, margin auto, text-align left) */ } /* Helper/footnote text within the card */ .section-note { /* (smaller font, softened color, spacing) */ } /* Media wrapper: images/audio aligned with card spacing */ .section-media { /* (flex/grid wrapper, gap control) */ } /* =========================================================== 3) INLINE TEXT STYLES ----------------------------------------------------------- For labels, inline highlights, and emphasis within text. =========================================================== */ /* Short bold labels preceding values (e.g., "Logged in as:") */ .section-label { /* (font-weight bold, violet accent optional) */ } /* Inline value highlight (emails, IDs), may use monospace/teal */ .section-highlight { /* (teal tint, optional monospace) */ } /* Emphasized inline text (e.g., important notes in intro) */ .section-emphasis { /* (yellow accent, maybe italic) */ } /* =========================================================== 4) LINKS & ACTIONS ----------------------------------------------------------- Inside-card links and action buttons reusing brand colors. =========================================================== */ /* Regular in-card link (inherits lime color + hover to bright) */ .section-link { /* (color lime, underline on hover) */ } /* Action-style link (looks like a button; e.g., Logout) */ .section-action { /* (inline-block, padding, radius, bold) */ } /* Optional states for actions */ .section-action.is-danger { /* (use red family) */ } .section-action.is-primary { /* (use lime/green family) */ } /* =========================================================== 5) LAYOUT HELPERS ----------------------------------------------------------- Small utilities to organize content blocks inside cards. =========================================================== */ /* Vertical stack with consistent gap between children */ .section-stack { /* (display flex/column or stack, gap var) */ } /* Horizontal row for icon + text or small columns */ .section-row { /* (display flex/row, align-center, gap) */ } /* ========== Timestamp readability polish ========== */ /* Keeps Elevation date/time neat on small screens */ .section-label + time { margin-left: 4px; /* breathing space from label */ display: inline-block; /* avoid breaking mid-line */ white-space: nowrap; /* keep full timestamp together */ font-family: monospace; /* (optional) aligns digits evenly */ font-size: 0.95em; /* slightly smaller than labels */ } /* =========================================================== 6) STATUS BANNERS (OPTIONAL) ----------------------------------------------------------- Slim banners inside a card for success/warning/error/info. Colors adapt to dark theme; keep text readable. =========================================================== */ .section-banner { /* (padding, radius, subtle bg, left border) */ } .section-banner.is-success { /* (greenish tone) */ } .section-banner.is-warning { /* (amber/yellow tone) */ } .section-banner.is-error { /* (red tone) */ } .section-banner.is-info { /* (blue/cyan tone) */ } /* =========================================================== 7) THEME MODIFIERS (GLOW/BORDER COLOR) ----------------------------------------------------------- Apply on the same element as `.section-card`. Only color/glow/border should vary; layout stays identical. Map to palette from global.css (documented here as comments). =========================================================== */ /* Purple — #C44BFF */ .theme-purple { /* (border-color, box-shadow: purple glow) */ } /* Blue — #00C8FF */ .theme-blue { /* (border-color, box-shadow: cyan glow) */ } /* Teal — #00FFCC */ .theme-teal { /* (border-color, box-shadow: aqua glow) */ } /* Red — #FF4F4F */ .theme-red { /* (border-color, box-shadow: red glow) */ } /* Orange — #FF9E00 */ .theme-orange { /* (border-color, box-shadow: orange glow) */ } /* Indigo — #8C6EFF */ .theme-indigo { /* (border-color, box-shadow: indigo glow) */ } /* Gold — #FFF95B */ .theme-gold { /* (border-color, box-shadow: gold glow) */ } /* Black — dark variant (border #444, bg #0a0a0a, icy white/blue glow) */ .theme-black { /* (dark bg, light glow, reserved for special cards) */ } /* =========================================================== 8) RESPONSIVE HELPERS ----------------------------------------------------------- Utilities to adjust spacing/stacking on small screens. =========================================================== */ .on-mobile-stack { /* (@media ≤768px: stack children vertically) */ } .on-mobile-compact{ /* (@media ≤768px: reduce paddings/margins) */ } /* =========================================================== 9) EXAMPLE COMPOSITION (DOCUMENTATION ONLY) ----------------------------------------------------------- HTML EXAMPLE (not CSS):

👤 Account

Logged in as: tami.green@tg-dance.com

🚪 Logout

📩 Messages & Updates

📝 Send Feedback

We read every message. Keep it respectful and specific.

----------------------------------------------------------- When you implement the visual rules: - Keep `.section-card` close to global `section` visuals (dark translucent bg, radius 10px, centered, max-width). - Let `.theme-*` only control border/glow color. - Prefer variables/tokens if you introduce them later. =========================================================== */ /* Reduced inner spacing for dense content or stacked mobile */ .section-card--compact { padding: 20px 15px; margin: 10px auto; } /* Horizontal row for icon + text or small columns */ .section-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } @media (max-width: 768px) { .on-mobile-stack { flex-direction: column; align-items: flex-start; } } /* Action-style link (looks like a button; e.g., Logout) */ .section-action { display: inline-block; padding: 0.4em 1em; border-radius: 6px; font-weight: bold; text-decoration: none; } .section-action.is-danger { background: #cc0000; color: #fff; box-shadow: 0 0 8px #ff4f4f; } .section-action.is-danger:hover { background: #ff1a1a; box-shadow: 0 0 12px #ff4f4f; } /* Short bold labels preceding values (e.g., "Logged in as:") */ .section-label { font-weight: bold; color: #7b2cbf; } /* Inline value highlight (emails, IDs) */ .section-highlight { color: #199193; font-family: monospace; } /* Teal theme (glow/border color) */ .theme-teal { border-color: #00FFCC; box-shadow: 0 0 25px #00FFCC; } .section-action.is-primary { background: #1b7f56; /* green */ border: 1px solid #39d39f; color: #fff; } .section-action.is-primary:hover { filter: brightness(1.08); } /* Theme for the green card you’re using */ .theme-green { border-color: #39d39f; box-shadow: 0 0 25px #39d39f; } /* Title + icon styling (keeps emoji but makes it visible) */ .section-title { display:flex; align-items:center; gap:.5rem; } .section-title .icon { color: #39d39f; /* follows theme-green */ text-shadow: 0 0 6px #39d39f; } /* Optional: success banner color (for sw_status=ok) */ .section-banner.is-success { background: #0e2a1f; border-left:4px solid #39d39f; } /* ========================================= SONG-WISH TABLE (desktop -> mobile cards) ========================================= */ /* wrapper to limit width and center the table */ .section-table-wrap { max-width: 900px; margin: 0 auto; } /* compact, fixed table so long notes wrap nicely */ .section-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .section-table th, .section-table td { padding: 10px 12px; text-align: left; vertical-align: top; word-wrap: break-word; } .section-table th { font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.12); } .section-table tr + tr td { border-top: 1px dashed rgba(255,255,255,0.08); } /* highlight bits that already match your palette */ .section-table .is-code { color:#199193; font-family:monospace; } /* tracking code */ .section-table .is-status { font-weight:700; color:#7b2cbf; } /* status */ /* --- Mobile: stack each row as a card with labels --- */ @media (max-width: 768px) { .section-table, .section-table thead, .section-table tbody, .section-table tr, .section-table th, .section-table td { display:block; width:100%; } .section-table thead { display:none; } .section-table tr { margin: 12px 0; padding: 12px; border-radius: 10px; background: rgba(255,255,255,0.05); box-shadow: 0 0 10px rgba(123,44,191,0.35); /* violet glow to match theme */ } .section-table td { padding: 6px 0; border: 0 !important; } /* label shown above each value */ .section-table td::before { content: attr(data-label); display:block; margin-bottom: 2px; font-weight:700; color:#76ff03; /* lime label */ } }