/* ================================================================= ReefDudes — Brand Tokens Shared palette across all ReefDudes surfaces. Hex values are the contract; CSS variables are the convenient handle. ================================================================= */ :root { color-scheme: light; /* Surfaces — lightened to feel sunnier and friendlier. The previous --bg / --bg-2 were a bit cool/dim and made the page read as overcast. New values are closer to white-with-a-hint. */ --bg: #f5f9fd; --bg-2: #e8f0f9; --panel: #ffffff; --panel-2: #f7fafd; /* Header */ --header: #3a8ee0; --header-text: #ffffff; /* Ink */ --text: #1c3344; --text-2: #46586a; --muted: #7a8a96; --border: #cdd8e2; --border-strong: #a8b6c4; /* Brand accent */ --accent: #3a8ee0; --accent-hover: #4ea0ea; --accent-soft: #e8f1fb; --actinic: #5aa6e8; --coral: #ff7e62; /* Logo-cyan: introduced after the illustrated logo upload added a more cyan-shifted "Reef" wordmark. Used where surfaces want to rhyme with the logo (e.g., footer wordmark, decorative waves) without replacing the primary --accent token. */ --logo-cyan: #3fb8c8; --logo-cyan-soft: rgba(63, 184, 200, 0.18); /* Semantic — universal, do not rebrand */ --good: #2d8e6f; --warn: #c47a1c; --error: #c44a4a; --info: #3a8ee0; --focus-ring: rgba(58, 142, 224, 0.30); /* Gradients */ --grad-header: linear-gradient(180deg, #4ea0ea 0%, #2c7bc7 100%); --grad-button: linear-gradient(180deg, #4ea0ea 0%, #3a8ee0 100%); --grad-page: linear-gradient(180deg, #f8fbfe 0%, #ecf3fa 100%); /* Shadows */ --shadow-button: 0 1px 2px rgba(28, 75, 130, 0.18); --shadow-card: 0 1px 3px rgba(28, 75, 130, 0.06), 0 4px 12px rgba(28, 75, 130, 0.04); } /* ================================================================= Page wash — applied to behind Uncode's box-wrapper. Subtle atmospheric gradient, never aggressive. ================================================================= */ body.theme-uncode { background: var(--grad-page); color: var(--text); } body.theme-uncode .style-light-bg, body.theme-uncode .style-light { color: var(--text); } /* Body text never lives on pure white in headings, but does in cards. Override Uncode's default near-black to brand ink. */ body.theme-uncode .h1, body.theme-uncode .h2, body.theme-uncode .h3, body.theme-uncode .h4, body.theme-uncode .h5, body.theme-uncode .h6, body.theme-uncode h1, body.theme-uncode h2, body.theme-uncode h3, body.theme-uncode h4, body.theme-uncode h5, body.theme-uncode h6 { color: var(--text); } /* Override the legacy wp-custom-css `.h1{color:white!important}` rule that was forcing every .h1 to white. Restrict to elements that are explicitly inside a dark-skin container (where white is correct). */ body.theme-uncode .style-dark .h1, body.theme-uncode .style-dark-bg .h1, body.theme-uncode [class*="overlay-bg"] .h1 { color: #ffffff; } /* Links pick up the brand */ body.theme-uncode a { color: var(--accent); transition: color 120ms ease; } body.theme-uncode a:hover, body.theme-uncode a:focus { color: var(--accent-hover); } /* Selection uses the soft brand tint */ body.theme-uncode ::selection { background: var(--accent-soft); color: var(--text); } /* Focus ring — globally consistent */ body.theme-uncode a:focus-visible, body.theme-uncode button:focus-visible, body.theme-uncode input:focus-visible, body.theme-uncode select:focus-visible, body.theme-uncode textarea:focus-visible, body.theme-uncode [role="button"]:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: 3px; } /* ================================================================= Native form widgets — light-mode hints ================================================================= */ body.theme-uncode select { background-color: var(--panel); color: var(--text); border: 1px solid var(--border); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } body.theme-uncode option { background: #ffffff; color: var(--text); } body.theme-uncode option:checked { background: var(--accent-soft); color: var(--accent); } body.theme-uncode optgroup { background: #f0f6f8; color: var(--accent); font-weight: 600; } /* Checkboxes / radios pick up brand on checked */ body.theme-uncode input[type="checkbox"]:checked, body.theme-uncode input[type="radio"]:checked { accent-color: var(--accent); } /* ================================================================= Pills (semantic) — universal hue, ~0.18 alpha bg, ~0.45 alpha border Use these classes inside any tool/widget that needs status pills. ================================================================= */ .rd-pill { display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: 600; line-height: 1.6; border-radius: 999px; border: 1px solid transparent; letter-spacing: 0.01em; } .rd-pill--good { background: rgba(45,142,111,0.18); color: #1f6b53; border-color: rgba(45,142,111,0.45); } .rd-pill--warn { background: rgba(196,122,28,0.18); color: #8a5413; border-color: rgba(196,122,28,0.45); } .rd-pill--error { background: rgba(196,74,74,0.18); color: #8a2d2d; border-color: rgba(196,74,74,0.45); } .rd-pill--info { background: rgba(58,142,224,0.18); color: #1f5da0; border-color: rgba(58,142,224,0.45); } .rd-pill--coral { background: rgba(255,126,98,0.18); color: #a3422d; border-color: rgba(255,126,98,0.45); }