/* ========================================================================== 1111 Studios Glazing — design tokens (plain CSS, no build step) Master 1111 Studios colours are unchanged. The only new colour family is the "float-glass" teal accent (--glass-*), used in UI only, never in the mark. Default (:root) = light UI. Dark UI = [data-theme="dark"] on or any wrapper. Fonts: Inter (Google Fonts, OFL). Optional link: ========================================================================== */ :root { /* ---- Master 1111 Studios palette (identical to CANVA-BRIEF.md / print README) ---- */ --brand-field: #0B0F14; /* near-black field, icon square */ --brand-bar-face: #C4DEF2; /* mark light facet */ --brand-bar-shadow: #74A0C4; /* mark shadow facet, tagline on dark */ --brand-blue: #2F5F86; /* role / signature blue */ --brand-ink: #101820; /* ink on light */ --brand-paper: #F2F4F7; /* soft paper */ --brand-secondary: #55708A; /* secondary text on light */ --brand-offwhite: #E8EEF4; /* type on dark */ --brand-hairline: #C3CCD6; /* hairline / mute */ /* ---- Glazing accent: float-glass teal (new, UI only) ---- */ --glass-100: #DDF1EB; /* tint: selected rows, badges, info fills */ --glass-300: #9FD6C5; /* accent on dark grounds; GLAZING word on dark */ --glass-500: #3F9A8A; /* accent lines / icons on light (non-text, >=3:1) */ --glass-700: #1D6B5F; /* accent text + filled accent buttons on light; GLAZING word on light */ --glass-800: #17564C; /* hover / pressed on light */ /* ---- Semantic tokens: light ---- */ --brand-primary: var(--brand-field); --brand-primary-contrast: var(--brand-offwhite); --brand-primary-hover: #1A2430; --brand-accent: var(--glass-500); --brand-accent-strong: var(--glass-700); --brand-accent-hover: var(--glass-800); --brand-accent-contrast: #FFFFFF; --brand-accent-tint: var(--glass-100); --surface: var(--brand-paper); --surface-raised: #FFFFFF; --surface-sunken: #E9EDF2; --surface-glass: rgba(255, 255, 255, 0.66); /* frosted panel fill */ --glass-blur: 14px; --glass-edge: rgba(255, 255, 255, 0.90); /* 1px top highlight (inset) */ --glass-border: rgba(16, 24, 32, 0.10); --glass-rule: linear-gradient(90deg, transparent, var(--glass-500) 20%, var(--glass-500) 80%, transparent); --text: var(--brand-ink); --text-muted: var(--brand-secondary); --text-on-dark: var(--brand-offwhite); --link: var(--brand-blue); --border: var(--brand-hairline); --border-strong: #7A8B9C; /* derived: input borders, >=3:1 on white */ --success: #2A7A36; --warn: #8A5300; --error: #B42318; --success-tint: #E3F2E5; --warn-tint: #FBEFD9; --error-tint: #FBE4E1; --focus-ring: var(--glass-700); --focus-ring-halo: rgba(63, 154, 138, 0.28); --font-sans: "Inter", "Liberation Sans", "Nimbus Sans", Arial, Helvetica, system-ui, sans-serif; --font-display: "Inter", "Montserrat", "Liberation Sans", Arial, Helvetica, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Liberation Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace; --wordmark-tracking: 0.18em; /* 1111 STUDIOS / GLAZING: 10px on 56px in the master lockup */ --label-tracking: 0.14em; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* matches the 16px corner on the master on-ink lockup */ --shadow-glass: inset 0 1px 0 var(--glass-edge), 0 1px 2px rgba(16, 24, 32, 0.06), 0 10px 28px rgba(16, 24, 32, 0.10); --shadow-raised: 0 1px 2px rgba(16, 24, 32, 0.06), 0 4px 12px rgba(16, 24, 32, 0.06); color-scheme: light; } [data-theme="dark"] { --brand-primary: var(--brand-bar-face); --brand-primary-contrast: var(--brand-field); --brand-primary-hover: #D8E9F7; --brand-accent: var(--glass-300); --brand-accent-strong: #B8E3D6; --brand-accent-hover: #CDEEE3; --brand-accent-contrast: var(--brand-field); --brand-accent-tint: rgba(159, 214, 197, 0.12); --surface: var(--brand-field); --surface-raised: #131B24; --surface-sunken: #080B0F; --surface-glass: rgba(196, 222, 242, 0.06); --glass-blur: 16px; --glass-edge: rgba(232, 238, 244, 0.16); --glass-border: rgba(196, 222, 242, 0.12); --glass-rule: linear-gradient(90deg, transparent, var(--glass-300) 20%, var(--glass-300) 80%, transparent); --text: var(--brand-offwhite); --text-muted: #9AABBC; /* derived between #C3CCD6 and #74A0C4 */ --link: var(--brand-bar-face); --border: #26323F; /* derived dark hairline */ --border-strong: #5A6B7D; /* derived: input borders, >=3:1 on #131B24 */ --success: #6FCB85; --warn: #E9B45A; --error: #F28B7D; --success-tint: rgba(111, 203, 133, 0.12); --warn-tint: rgba(233, 180, 90, 0.12); --error-tint: rgba(242, 139, 125, 0.12); --focus-ring: var(--glass-300); --focus-ring-halo: rgba(159, 214, 197, 0.25); --shadow-glass: inset 0 1px 0 var(--glass-edge), 0 1px 2px rgba(0, 0, 0, 0.40), 0 14px 36px rgba(0, 0, 0, 0.45); --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35); color-scheme: dark; } /* ---------------------------- Ready classes ---------------------------- */ /* Frosted glass panel with a thin light edge. Falls back to a solid raised surface. */ .glass-panel { position: relative; background: var(--surface-glass); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-glass); color: var(--text); } .glass-panel::before { /* hairline glass-edge highlight along the top */ content: ""; position: absolute; left: var(--radius-lg); right: var(--radius-lg); top: -1px; height: 1px; background: var(--glass-rule); opacity: 0.75; pointer-events: none; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-panel { background: var(--surface-raised); } } @media (prefers-reduced-transparency: reduce) { .glass-panel { background: var(--surface-raised); backdrop-filter: none; -webkit-backdrop-filter: none; } } .btn-primary, .btn-accent { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 40px; padding: 0 18px; font: 600 0.9375rem/1 var(--font-sans); letter-spacing: 0.01em; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: background-color .15s ease, box-shadow .15s ease; } .btn-primary { background: var(--brand-primary); color: var(--brand-primary-contrast); } .btn-primary:hover { background: var(--brand-primary-hover); } .btn-accent { background: var(--brand-accent-strong); color: var(--brand-accent-contrast); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); } .btn-accent:hover { background: var(--brand-accent-hover); } .btn-primary:disabled, .btn-accent:disabled { opacity: .5; cursor: not-allowed; } .btn-primary:focus-visible, .btn-accent:focus-visible, .focus-ring:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus-ring-halo); } /* HTML lockup for headers: 1111 Studios Glazing Prefer the SVG lockup files; use this only where live text is needed. */ .brand-lockup { display: inline-flex; align-items: center; gap: 0.75em; font-family: var(--font-display); font-size: 1rem; line-height: 1; text-transform: uppercase; letter-spacing: var(--wordmark-tracking); color: var(--text); text-decoration: none; white-space: nowrap; } .brand-lockup img, .brand-lockup svg { height: 1.9em; width: auto; flex: none; } .brand-lockup__name { font-weight: 600; } .brand-lockup__divider { width: 1px; height: 0.9em; background: var(--brand-accent); } .brand-lockup__product { font-weight: 500; color: var(--brand-accent-strong); } [data-theme="dark"] .brand-lockup__product { color: var(--glass-300); } /* Accent hairline rule (section dividers, PDF-style rules on screen) */ .glass-rule { height: 1px; border: 0; background: var(--glass-rule); }