/* ============================= File: /assets/styles.css Description: Sitewide UI polish for LIGHT base only + Accent Theme Notes: - Accent color is controlled by data-accent on (set in header.php) - Components: .btn .btn-accent, .pill, .cc-tile, .cc-accent-border, .link-accent ============================= */ /* -------- Base tokens (light) -------- */ :root { --bg: #f7fafc; --fg: #1f2937; --card: #ffffff; --cardBorder: #e5e7eb; --link: #2563eb; /* Tiles and pills */ --tile-bg: #f9fafb; --tile-hover: #f3f4f6; --tile-bd: #e5e7eb; /* Muted + focus vars */ --muted: #6b7280; --focusRing: rgba(37, 99, 235, .25); --focusBorder: #60a5fa; /* Accent defaults are overridden by data-accent on */ --accent-50: #eef2ff; --accent-600: #4f46e5; --accent-700: #4338ca; --accent-fg: #ffffff; } /* -------- Accent palettes (html[data-accent="..."]) -------- */ html[data-accent="indigo"] { --accent-50:#eef2ff; --accent-600:#4f46e5; --accent-700:#4338ca; } html[data-accent="emerald"] { --accent-50:#ecfdf5; --accent-600:#059669; --accent-700:#047857; } html[data-accent="rose"] { --accent-50:#fff1f2; --accent-600:#e11d48; --accent-700:#be123c; } html[data-accent="amber"] { --accent-50:#fffbeb; --accent-600:#d97706; --accent-700:#b45309; } html[data-accent="violet"] { --accent-50:#f5f3ff; --accent-600:#7c3aed; --accent-700:#6d28d9; } /* -------- Page base -------- */ body { background: var(--bg); color: var(--fg); } .card { background: var(--card); border: 1px solid var(--cardBorder); border-radius: 16px; } /* =========================== Accent aware components =========================== */ /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .625rem 1rem; border-radius: .75rem; font-weight: 600; border: 1px solid transparent; transition: background-color .2s, border-color .2s, color .2s, transform .05s; } .btn:active { transform: translateY(1px); } .btn-accent { background: var(--accent-600); color: var(--accent-fg); border-color: color-mix(in oklab, var(--accent-600), transparent 40%); } .btn-accent:hover { background: var(--accent-700); } /* Links that should follow accent */ a.link { color: var(--link); } .link-accent { color: var(--accent-600); } .link-accent:hover { color: var(--accent-700); } /* Pills / chips */ .pill { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .625rem; border-radius: 9999px; font-size: .75rem; line-height: 1; background: var(--tile-bg); color: var(--fg); border: 1px solid var(--tile-bd); } .pill:hover { background: color-mix(in oklab, var(--tile-bg), var(--accent-50) 18%); } /* Generic tiles and lists */ .cc-tile { display: block; border-radius: 16px; background: var(--tile-bg); border: 1px solid var(--tile-bd); transition: background-color .2s, border-color .2s, transform .05s; } .cc-tile:hover { background: var(--tile-hover); } .cc-tile:active { transform: translateY(1px); } /* Accent influenced border helper */ .cc-accent-border { border-color: color-mix(in oklab, var(--tile-bd), var(--accent-600) 28%) !important; } /* =========================== Base controls =========================== */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="color"], select, textarea { background: var(--card); color: var(--fg); border: 1px solid var(--cardBorder); border-radius: .75rem; padding: .625rem .75rem; line-height: 1.5; } /* Placeholder color */ input::placeholder, textarea::placeholder { color: var(--muted); } /* Focus ring */ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focusBorder); box-shadow: 0 0 0 .2rem var(--focusRing); } /* Disabled */ input:disabled, select:disabled, textarea:disabled { opacity: .6; cursor: not-allowed; } /* =========================== Select fixes =========================== */ select, select.form-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--card) !important; color: var(--fg) !important; border-color: var(--cardBorder) !important; padding-right: 2.5rem !important; /* room for chevron */ background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 1rem) calc(50% - 2px), calc(100% - .5rem) calc(50% - 2px); background-size: .75rem .75rem, .75rem .75rem; background-repeat: no-repeat; } /* Dropdown list itself */ select option { background-color: var(--card); color: var(--fg); } /* =========================== File input button =========================== */ input[type="file"]::file-selector-button { margin-right: .75rem; border: 1px solid var(--cardBorder); background: var(--accent-600); color: var(--accent-fg); border-radius: .5rem; padding: .5rem .75rem; cursor: pointer; } input[type="file"]::file-selector-button:hover { background: var(--accent-700); } /* =========================== Helpers =========================== */ .form-help, .form-hint { color: var(--muted); font-size: .875rem; } label { color: var(--fg); } /* =========================== Toggle and checkbox spacing =========================== */ /* Case A: input then label */ input[type="checkbox"] + label { margin-left: .5rem; line-height: 1.25; display: inline-flex; align-items: center; gap: .4rem; } /* Case B: input nested in label */ label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: .5rem; line-height: 1.25; } /* Case C: input followed by any text element */ input[type="checkbox"] + * { margin-left: .5rem; line-height: 1.25; } /* Size and alignment */ input[type="checkbox"] { width: 1.125rem; height: 1.125rem; vertical-align: middle; } /* Optional wrappers */ .form-switch:has(input[type="checkbox"]), .toggle:has(input[type="checkbox"]) { display: inline-flex; align-items: center; gap: .5rem; line-height: 1.25; } /* Background map canvas (behind the site) */ #cc-bgmap { position: fixed; inset: 0; z-index: -1; /* behind your whole site */ opacity: 0.12; /* faint overall */ filter: grayscale(100%); /* tone down color saturation */ pointer-events: none; /* never intercept clicks/scrolls */ } /* Soft edge fade (mask) — wide vignette that ‘falls off’ */ #cc-bgmap::after { content: ""; position: absolute; inset: 0; /* Dark overlay to increase legibility (adjust alpha) */ background: rgba(0,0,0,0.25); pointer-events: none; /* Fade edges using CSS mask (supported on modern browsers) */ -webkit-mask-image: radial-gradient(120% 120% at 60% 30%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(120% 120% at 60% 30%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%); } /* Optional: if any section uses a solid card/background, keep readability high */ .cc-tile { backdrop-filter: none; /* keep text crisp over faint map */ }