/* ═══════════════════════════════════════════════════════════════════════════ SakaMboka — Theme tokens (dark default + light) + shared chrome RESPONSIBILITY: Centralizes the visual identity system using CSS variables (tokens). Manages the dual-theme state (Light/Dark) and provides shared UI components used across the entire application (footer, toggle). LOAD ORDER: Must be loaded FIRST on every page to prevent Unstyled Content (FOUC). ═══════════════════════════════════════════════════════════════════════════ */ /* Iconify web component — baseline correction for inline use next to text */ iconify-icon { vertical-align: -0.125em; } /** * LIGHT THEME TOKENS * Default state: Applied when no [data-theme] attribute is present on . * Palette: Warm-paper background with high-contrast forest green accents. */ :root { color-scheme: light; /* Surface colors — from background to elevated cards */ --bg: #f4f1ea; --bg-deep: #eae6dc; --surface: #fdfbf6; --surface-2: #efebe0; --surface-3: #e6e1d4; --surface-4: #d7d1c2; --dotgrid: #e3ded1; --line-faint: #e8e3d8; --border: #dbd5c8; --track: #ded8ca; /* Typography scale — based on varying levels of emphasis */ --txt-faint: #bdb6a6; --txt-dim: #a39a87; --txt-mid: #8a8170; --txt-soft: #756c5c; --txt: #5a5345; --txt-2: #4a4337; --txt-input: #2f2a20; --hi: #1c180f; /* Brand Accents — Green scale for primary actions */ --accent: #15803d; --accent-hi: #166534; --accent-ink: #ffffff; --accent-border: #86efac; --accent-bg-dim: #dcfce7; /* Status Colors — Semantic colors for alerts, links, and variety */ --red: #dc2626; --red-border: #fca5a5; --red-bg-dim: #fee2e2; --amb: #d97706; --amb2: #ea580c; --amb-border: #fcd34d; --amb-bg-dim: #fef3c7; --blu: #2563eb; --blu-border: #93c5fd; --blu-bg-dim: #dbeafe; --pur: #9333ea; --teal: #0d9488; --orange: #ea580c; --pink: #db2777; --bar-bg: rgba(247, 244, 237, 0.9); } /** * DARK THEME TOKENS * State: Applied via [data-theme="dark"] attribute on . * Palette: Pure blacks and deep grays to maintain the "Legacy" high-tech look. */ :root[data-theme="dark"] { color-scheme: dark; /* Surfaces — deepest black (#0b0b0b) to soft charcoal */ --bg: #0b0b0b; --bg-deep: #070707; --surface: #111111; --surface-2: #181818; --surface-3: #202020; --surface-4: #2a2a2a; --dotgrid: #161616; --line-faint: #1a1a1a; --border: #252525; --track: #334155; /* Text — low contrast (#333) to high intensity (#dedede) */ --txt-faint: #333333; --txt-dim: #aaaaaa; /* #444444 */ --txt-mid: #666666; --txt-soft: #888888; --txt: #ffffff; /* cfcfcf */ --txt-2: #aaaaaa; --txt-input: #cfcfcf; --hi: #dedede; /* Accent (Neon Green) */ --accent: #4ade80; --accent-hi: #86efac; --accent-ink: #0b0b0b; --accent-border: #166534; --accent-bg-dim: #14532d; /* Status — Vibrant neon variants for readability on black */ --red: #f87171; --red-border: #7f1d1d; --red-bg-dim: #2e1a1a; --amb: #fbbf24; --amb2: #f59e0b; --amb-border: #78350f; --amb-bg-dim: #1c1708; --blu: #60a5fa; --blu-border: #1e3a5f; --blu-bg-dim: #0c1f35; --pur: #c084fc; --teal: #2dd4bf; --orange: #fb923c; --pink: #f472b6; /* Semi-transparent overlays for glassmorphism effects */ --bar-bg: rgba(11, 11, 11, 0.92); } /* ───────────────────────────────────────────────────────────── THEME TOGGLE Button used globally to flip between Light and Dark modes. Uses Monospace fonts to match the brand's "Developer-first" aesthetic. ───────────────────────────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; background: transparent; border: 1px solid var(--border); border-radius: 2px; color: var(--txt); cursor: pointer; font-size: 15px; line-height: 1; font-family: "JetBrains Mono", "Cascadia Code", monospace; transition: color 0.15s, border-color 0.15s, background 0.15s; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } /* ───────────────────────────────────────────────────────────── CANONICAL SITE FOOTER Used on both public landing pages and private dashboard views. Uses backdrop-filter for a subtle "frosted glass" look over content. ───────────────────────────────────────────────────────────── */ .site-footer { display: flex; align-items: center; gap: 12px; padding: 0 18px; min-height: 42px; border-top: 1px solid var(--line-faint); background: var(--bar-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: inherit; } /* Logic: Pins footer to viewport for dashboard layouts where scroll is internal */ .site-footer.is-fixed { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; } /* SOCIAL MEDIA GROUP CONTAINER ------------------------------------------------------------------------- - display: flex; => Aligns children (icons) horizontally in a row. - align-items: center; => Centers the row vertically within the bar. - gap: 8px; => SPACING: Adjust this to move icons closer or further apart. */ .sf-social-row { display: flex; align-items: center; gap: 4px; } /* Individual social link icon styling */ .site-footer .sf-social { display: flex; /* Using flex for rock-solid centering */ align-items: center; /* VERTICAL CENTER: Keeps icons in the middle of the bar */ justify-content: center; /* HORIZONTAL CENTER: Centers icons within their own clickable box */ height: 52px; /* MATCH FOOTER HEIGHT: Ensures the icons don't "go up" as they grow */ min-width: 44px; /* Ensure enough room for larger icons */ color: var(--txt-dim); /* Default color */ line-height: 0; /* REMOVE LINE-HEIGHT: Prevents text-spacing from pushing icons UP */ transition: color 0.15s; } /* Lights up green on hover (matches Back-to-top style) */ .site-footer .sf-social:hover { color: var(--accent); } .site-footer .sf-social svg, .site-footer .sf-social iconify-icon { width: 18px !important; /* SIZE: Increase/Decrease this value to change icon width */ height: 18px !important; /* SIZE: Increase/Decrease this value to change icon height */ font-size: 18px !important; /* Force iconify-icon glyph sizing */ display: block; fill: currentColor; /* VERTICAL NUDGE: If icons look slightly too high or low relative to other text: - Use transform: translateY(2px) to move them DOWN. - Use transform: translateY(-2px) to move them UP. */ transform: translateY(2px); } .site-footer .sf-links { display: flex; align-items: center; gap: 18px; margin-left: auto; } /* Terms, Privacy, FAQ */ .site-footer a:not(.sf-social) { font-size: 12px; color: var(--txt-mid); text-decoration: none; letter-spacing: 0.08em; transition: color 0.12s; } .site-footer a:not(.sf-social):hover { color: var(--accent); } .site-footer a.active { color: var(--accent); } .site-footer .sf-copy { font-size: 12px; color: var(--txt-dim); letter-spacing: 0.03em; } /* MOBILE ADAPTATION: Stacks footer links vertically on small screens */ @media (max-width: 640px) { .site-footer { flex-direction: column; gap: 12px; padding: 16px 20px; text-align: center; min-height: 0; } .site-footer .sf-social-row { justify-content: center; } .site-footer .sf-links { margin-left: 0; flex-wrap: wrap; justify-content: center; } } /* Visual hygiene: Footer is hidden during heavy editing to maximize vertical space */ body.jobs-edit-mode .site-footer { display: none; }