/* =========================================================
Open Equine / Do-Platform — Global Stylesheet
Extracted from: Style Sample/index.html (Show Overview demo)
Shared design tokens + base elements for every page in the tool.
========================================================= */
/* Font: add this preconnect + link in each page's as well
*/
:root {
/* Brand palette */
--royal-deep: #0A1642;
--royal-mid: #16297A;
--gold: #B8974A;
--gold-light: #D9BE7C;
/* Surfaces & text */
--glass-border: rgba(255,255,255,0.18);
--text-white: #F7F8FA;
--text-muted: rgba(247,248,250,0.68);
/* Status colors */
--green: #4ADE80;
--amber: #FBBF24;
--red: #F87171;
--purple: #8B5CF6;
--purple-light: #C4B5FD;
/* Form-specific tokens (new, kept consistent with the palette above) */
--input-bg: rgba(255,255,255,0.06);
--input-border: rgba(255,255,255,0.18);
--input-border-focus: var(--gold-light);
--error: var(--red);
}
/* ---------------------------------------------------------
Reset
--------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
* { margin: 0; padding: 0; box-sizing: border-box; }
img, svg, video { max-width: 100%; display: block; }
body {
overflow-x: hidden;
font-family: 'IBM Plex Sans', sans-serif;
background:
radial-gradient(circle at 85% -10%, rgba(59,95,224,0.45) 0%, transparent 45%),
radial-gradient(circle at 10% 10%, var(--royal-mid) 0%, transparent 50%),
linear-gradient(160deg, var(--royal-deep) 0%, #060D2C 60%, #030714 100%);
background-attachment: fixed;
color: var(--text-white);
min-height: 100vh;
padding: 0 0 80px;
}
a { color: inherit; }
/* ---------------------------------------------------------
Layout
--------------------------------------------------------- */
.wrap { max-width: 1220px; margin: 0 auto; padding: 0 32px; }
header {
display: flex; justify-content: center; align-items: center;
padding: 22px 32px;
border-bottom: 1px solid rgba(255,255,255,0.08);
background: rgba(5,10,35,0.55);
backdrop-filter: blur(10px);
position: sticky; top: 0; z-index: 20;
margin-bottom: 32px;
}
.header-inner {
max-width: 1220px; margin: 0 auto; width: 100%;
display: flex; justify-content: space-between; align-items: center;
}
/* ---------------------------------------------------------
Logo (placeholder-ready — swap .logo-mark img src for the real logo URL later)
--------------------------------------------------------- */
.logo-group { display: flex; align-items: center; gap: 12px; }
.logo-mark {
width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
background: rgba(255,255,255,0.08);
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--glass-border);
}
.logo-mark img { width: 100%; height: 100%; object-fit: cover; }
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text .name { font-size: 17px; font-weight: 700; }
.logo-text .tagline { font-size: 11px; color: var(--text-muted); letter-spacing: 0.03em; }
/* ---------------------------------------------------------
Navigation
--------------------------------------------------------- */
nav { display: flex; gap: 18px; font-size: 13.5px; color: var(--text-muted); flex-wrap: wrap; }
nav a { color: inherit; text-decoration: none; }
nav a.active { color: var(--gold-light); font-weight: 600; }
.hamburger {
display: none; flex-direction: column; justify-content: center; gap: 5px;
background: none; border: none; cursor: pointer; padding: 6px; width: 36px; height: 36px;
}
.hamburger span { display: block; width: 100%; height: 2px; background: var(--text-white); border-radius: 2px; }
/* ---------------------------------------------------------
Typography
--------------------------------------------------------- */
.section-heading { font-size: 21px; font-weight: 700; margin: 44px 0 6px; }
.section-subtext { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.text-muted { color: var(--text-muted); }
/* ---------------------------------------------------------
Live / status indicators
--------------------------------------------------------- */
.live-dot {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
background: var(--red); margin-right: 6px; animation: pulseDot 1.4s infinite;
}
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
.sample-banner {
background: repeating-linear-gradient(135deg, rgba(248,113,113,0.18), rgba(248,113,113,0.18) 12px, rgba(248,113,113,0.10) 12px, rgba(248,113,113,0.10) 24px);
border: 1px solid rgba(248,113,113,0.55); color: #FCA5A5; font-size: 13px; font-weight: 700;
text-align: center; padding: 12px 20px; border-radius: 10px; margin-bottom: 22px; letter-spacing: 0.02em;
}
/* ---------------------------------------------------------
Cards / panels (glass style used across the tool)
--------------------------------------------------------- */
.card, .panel {
background: linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
border: 1px solid var(--glass-border);
border-radius: 20px;
padding: 22px;
}
/* ---------------------------------------------------------
Buttons
--------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center;
font-family: inherit; font-weight: 700; font-size: 14px;
border: none; border-radius: 10px; padding: 12px 22px;
cursor: pointer; transition: opacity 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary {
background: linear-gradient(135deg, var(--gold-light), var(--gold));
color: var(--royal-deep);
}
.btn-primary:hover:not(:disabled) { opacity: 0.92; }
.btn-secondary {
background: rgba(255,255,255,0.08);
border: 1px solid var(--glass-border);
color: var(--text-white);
}
.btn-secondary:hover:not(:disabled) { background: rgba(255,255,255,0.14); }
.btn-sm { font-size: 12px; padding: 8px 16px; border-radius: 8px; }
.btn-block { width: 100%; }
/* ---------------------------------------------------------
Forms (new — kept consistent with the theme above; the
sample page had no form elements to extract)
--------------------------------------------------------- */
.field { margin-bottom: 18px; text-align: left; }
.field label {
display: block; font-size: 12.5px; font-weight: 600;
color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.02em;
}
.field input {
width: 100%; font-family: inherit; font-size: 15px; color: var(--text-white);
background: var(--input-bg); border: 1px solid var(--input-border);
border-radius: 10px; padding: 13px 14px; outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.field input::placeholder { color: rgba(247,248,250,0.35); }
.field input:focus { border-color: var(--input-border-focus); background: rgba(255,255,255,0.09); }
.field input.error { border-color: var(--error); }
.field-error { color: var(--error); font-size: 12px; margin-top: 6px; }
.field-hint { color: var(--text-muted); font-size: 12px; margin-top: 6px; }
/* ---------------------------------------------------------
Tags / badges
--------------------------------------------------------- */
.tag { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.tag.high, .tag.online, .tag.success { background: rgba(74,222,128,0.15); color: var(--green); }
.tag.medium, .tag.delay, .tag.warning { background: rgba(251,191,36,0.15); color: var(--amber); }
.tag.low, .tag.offline, .tag.danger { background: rgba(248,113,113,0.15); color: var(--red); }
/* ---------------------------------------------------------
Footer
--------------------------------------------------------- */
footer { margin-top: 50px; text-align: center; color: var(--text-muted); font-size: 12px; }
/* ---------------------------------------------------------
Responsive
--------------------------------------------------------- */
@media (max-width: 900px) {
/* page-specific grids should override at the page level;
kept here only for the shared card border emphasis */
}
@media (max-width: 640px) {
.wrap { padding: 0 16px; }
header { padding: 16px 18px; }
.logo-text .tagline { display: none; }
.header-inner { flex-wrap: wrap; }
.hamburger { display: flex; }
nav {
display: none; flex-direction: column; width: 100%; gap: 0;
background: rgba(5,10,35,0.97); border-radius: 10px; margin-top: 14px; padding: 6px 0;
order: 3; border: 1px solid rgba(255,255,255,0.08);
}
nav.open { display: flex; }
nav a { padding: 13px 18px; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.08); }
nav a:last-child { border-bottom: none; }
.section-heading { font-size: 18px; margin-top: 34px; }
/* Shared components: tighten padding/sizing on small screens by default */
.card, .panel { padding: 16px; border-radius: 16px; }
.btn { padding: 11px 18px; font-size: 13.5px; }
.field input { padding: 12px 13px; font-size: 14px; }
}