/**
* DadJogger Tools — Shared Plugin Styles
*
* This file defines the shared structural and branding layer for all
* DadJogger Tools. It is loaded on every page where a tool shortcode
* is present.
*
* SCOPE OF THIS FILE:
* - CSS custom properties (brand tokens)
* - Base container normalization (.dadjogger-tool)
* - Shared header block (.dadjogger-tool__header)
* - Shared section label (.dadjogger-tool__section-label)
* - Shared notice/message blocks (.dadjogger-tool__notice)
* - Shared disclaimer block (.dadjogger-tool__disclaimer)
*
* WHAT DOES NOT BELONG HERE:
* - Tool-specific layout or component styles
* - Tool-specific color overrides
* - Tool-specific responsive rules
* These belong in each tool's own CSS file, scoped under its container ID.
*
* TOOL CSS OVERRIDE PATTERN:
* Tool stylesheets may override shared rules by adding the tool container
* ID as a prefix. Example:
* #dadjogger-pace-calculator .dadjogger-tool__disclaimer { ... }
*
* @package DadJogger_Tools
* @author Will Elnick
* @since 1.0.0
*/
/* ==========================================================================
CSS Custom Properties — Brand Tokens
========================================================================== */
/**
* All DadJogger Tools share this token set. Tools should reference these
* variables rather than hardcoding color values wherever possible. This
* makes future brand updates a single-file change.
*
* To update the brand accent color sitewide, change --djt-color-accent here.
*/
.dadjogger-tool {
/* Brand colors */
--djt-color-accent: #24d0ff; /* DadJogger primary accent — cyan/teal */
--djt-color-header-bg: #052b3e; /* Dark teal — used for tool headers */
--djt-color-text-primary: #052b3e; /* Primary text — dark teal */
--djt-color-text-secondary: #555555; /* Secondary / supporting text */
--djt-color-text-muted: #888888; /* Muted text — disclaimers, notes */
--djt-color-text-on-dark: #ffffff; /* Text on dark backgrounds */
/* Surface colors */
--djt-color-bg: #ffffff; /* Tool background */
--djt-color-border: #e0e0e0; /* Standard border */
--djt-color-border-light: #eeeeee; /* Subtle divider */
--djt-color-surface-muted: #f4f4f4; /* Table headers, muted backgrounds */
/* Notice variant colors — structural defaults, easy to adjust */
--djt-color-notice-info-bg: #eaf7fd;
--djt-color-notice-info-border: #24d0ff;
--djt-color-notice-info-text: #052b3e;
--djt-color-notice-warning-bg: #fff8e1;
--djt-color-notice-warning-border: #f0ad00;
--djt-color-notice-warning-text: #5a3e00;
--djt-color-notice-success-bg: #eafaf1;
--djt-color-notice-success-border: #27ae60;
--djt-color-notice-success-text: #1a4a2e;
/* Typography */
--djt-font-family: Arial, sans-serif;
--djt-font-size-base: 15px;
--djt-font-size-sm: 13px;
--djt-font-size-xs: 12px;
--djt-line-height: 1.5;
/* Spacing */
--djt-spacing-xs: 4px;
--djt-spacing-sm: 8px;
--djt-spacing-md: 16px;
--djt-spacing-lg: 24px;
--djt-spacing-xl: 32px;
/* Shape */
--djt-border-radius: 4px;
--djt-border-radius-lg: 6px;
}
/* ==========================================================================
Base Container — .dadjogger-tool
========================================================================== */
/**
* Applied to the outermost wrapper div output by the shortcode handler.
* Provides font normalization and box-sizing inheritance so all child
* elements behave consistently regardless of theme CSS.
*
* Width is intentionally fluid. Max-width constraints belong in tool CSS
* if needed (e.g., #dadjogger-pace-calculator { max-width: 900px; }).
*/
.dadjogger-tool {
box-sizing: border-box;
font-family: var(--djt-font-family);
font-size: var(--djt-font-size-base);
line-height: var(--djt-line-height);
color: var(--djt-color-text-primary);
background: var(--djt-color-bg);
width: 100%;
}
/* Ensure box-sizing inherits into all tool children */
.dadjogger-tool *,
.dadjogger-tool *::before,
.dadjogger-tool *::after {
box-sizing: inherit;
}
/* ==========================================================================
Tool Header — .dadjogger-tool__header
========================================================================== */
/**
* The branded header block displayed at the top of each tool.
* Features a dark teal background with the DadJogger eyebrow label,
* a bold tool title, and an optional subtitle/description line.
*
* Expected HTML structure (output by render.php per tool):
*
*
*
* The subtitle element is optional — omit the if no subtitle is needed.
*/
.dadjogger-tool__header {
background: var(--djt-color-header-bg);
color: var(--djt-color-text-on-dark);
padding: var(--djt-spacing-lg) var(--djt-spacing-xl);
border-radius: var(--djt-border-radius-lg) var(--djt-border-radius-lg) 0 0;
margin-bottom: var(--djt-spacing-lg);
}
/* "DADJOGGER TOOL" eyebrow — small uppercase accent label */
.dadjogger-tool__header-eyebrow {
margin: 0 0 var(--djt-spacing-xs);
font-size: var(--djt-font-size-xs);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--djt-color-accent);
}
/* Tool title — bold, prominent, white */
.dadjogger-tool__header-title {
margin: 0 0 var(--djt-spacing-xs);
font-size: 26px;
font-weight: bold;
color: var(--djt-color-text-on-dark);
line-height: 1.2;
}
/* Optional subtitle — italic, slightly muted on dark background */
.dadjogger-tool__header-subtitle {
margin: 0;
font-size: var(--djt-font-size-base);
font-style: italic;
color: rgba(255, 255, 255, 0.75);
line-height: var(--djt-line-height);
}
/* ==========================================================================
Section Label — .dadjogger-tool__section-label
========================================================================== */
/**
* Uppercase section divider label used to group related inputs or content
* blocks within a tool. Matches the pattern visible in existing tool designs.
*
* Expected HTML structure:
*
*
Your Race
*
* Or with a wrapping element if a bottom border extending to the panel edge
* is needed — tool CSS can adjust padding/margin to taste.
*/
.dadjogger-tool__section-label {
margin: var(--djt-spacing-lg) 0 var(--djt-spacing-md);
padding-bottom: var(--djt-spacing-xs);
font-size: var(--djt-font-size-xs);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--djt-color-text-secondary);
border-bottom: 1px solid var(--djt-color-border);
}
/* When a section label appears as the first element in a block, collapse top margin */
.dadjogger-tool__section-label:first-child {
margin-top: 0;
}
/* ==========================================================================
Notice Blocks — .dadjogger-tool__notice
========================================================================== */
/**
* Reusable message/notice blocks controlled by per-tool messaging flags
* (show_data_collection_notice, show_privacy_notice, show_email_notice, etc.).
* The shortcode handler or render.php outputs these conditionally.
*
* Base class provides structure and spacing. Modifier classes apply
* semantic color treatments.
*
* Available modifiers:
* .dadjogger-tool__notice--info (default — uses brand accent)
* .dadjogger-tool__notice--warning (amber — use for caveats)
* .dadjogger-tool__notice--success (green — use for confirmations)
*
* Expected HTML structure:
*
*
*
* Placement (before/after tool, inside tool) is controlled per tool.
* Icon area support can be added later via a .dadjogger-tool__notice-icon
* child element — the left border provides a visual anchor in the meantime.
*/
.dadjogger-tool__notice {
padding: var(--djt-spacing-sm) var(--djt-spacing-md);
border-left: 3px solid var(--djt-color-border);
border-radius: 0 var(--djt-border-radius) var(--djt-border-radius) 0;
font-size: var(--djt-font-size-sm);
line-height: var(--djt-line-height);
margin: var(--djt-spacing-md) 0;
}
.dadjogger-tool__notice p {
margin: 0;
}
.dadjogger-tool__notice p + p {
margin-top: var(--djt-spacing-xs);
}
/* Info — default, uses brand accent */
.dadjogger-tool__notice--info {
background: var(--djt-color-notice-info-bg);
border-left-color: var(--djt-color-notice-info-border);
color: var(--djt-color-notice-info-text);
}
/* Warning — amber, use for training or safety caveats */
.dadjogger-tool__notice--warning {
background: var(--djt-color-notice-warning-bg);
border-left-color: var(--djt-color-notice-warning-border);
color: var(--djt-color-notice-warning-text);
}
/* Success — green, use for confirmation messages */
.dadjogger-tool__notice--success {
background: var(--djt-color-notice-success-bg);
border-left-color: var(--djt-color-notice-success-border);
color: var(--djt-color-notice-success-text);
}
/* ==========================================================================
Disclaimer Block — .dadjogger-tool__disclaimer
========================================================================== */
/**
* Training disclaimer and general fine-print block. Controlled by the
* show_training_disclaimer messaging flag per tool.
*
* Base styles here are intentionally subtle — muted text, light top divider.
* This keeps the disclaimer unobtrusive while still clearly present.
*
* TO MAKE MORE PROMINENT: Override in tool CSS or adjust variables here.
* Example — bordered box style:
* .dadjogger-tool__disclaimer {
* padding: 10px 14px;
* border: 1px solid var(--djt-color-border);
* border-radius: var(--djt-border-radius);
* background: var(--djt-color-surface-muted);
* }
*
* Expected HTML structure (output by shortcode handler when enabled):
*
*
*
* Tool CSS can override placement-specific spacing, e.g.:
* #dadjogger-pace-calculator .dadjogger-tool__disclaimer { margin-top: 20px; }
*/
.dadjogger-tool__disclaimer {
margin-top: var(--djt-spacing-lg);
padding-top: var(--djt-spacing-md);
border-top: 1px solid var(--djt-color-border-light);
font-size: var(--djt-font-size-xs);
color: var(--djt-color-text-muted);
line-height: var(--djt-line-height);
}
.dadjogger-tool__disclaimer p {
margin: 0;
}
.dadjogger-tool__disclaimer p + p {
margin-top: var(--djt-spacing-xs);
}
/* ==========================================================================
Loading State — .dadjogger-tool--loading
========================================================================== */
/**
* Applied to the tool container during async operations (future use).
* Prevents interaction while a result is being fetched or processed.
* Tools can toggle this class via JS when needed.
*
* Usage: containerEl.classList.add('dadjogger-tool--loading');
*/
.dadjogger-tool--loading {
pointer-events: none;
opacity: 0.6;
cursor: wait;
}