/* * S-CLINIC brand skin — shared by the public site and the staff panel. * * There is deliberately not a single hex value in the colour rules. Every * colour is a custom property emitted per request by * BrandHelper::cssVariables(), which reads common/config/brand.php. That file * says "do not hardcode these values anywhere else"; this is how a stylesheet * honours that. * * The site is light-only by decision. There is no colour-mode toggle and no * dark ramp: `data-bs-theme="light"` is pinned on in every layout, so a * visitor whose OS prefers dark still gets the brand's paper-and-ink palette * rather than a second design nobody reviewed. Do not add a * `[data-bs-theme="dark"]` block here — the toggle that would drive it is gone. */ /* ------------------------------------------------------------ tokens */ :root { --bs-primary: var(--brand-primary); --bs-primary-rgb: var(--brand-primary-rgb); --bs-danger: var(--brand-red); --bs-warning: var(--brand-yellow); --bs-success: var(--brand-green-alt); --bs-border-radius: .5rem; --bs-border-radius-lg: .75rem; --bs-body-font-family: var(--brand-font-body); --bs-body-color: var(--brand-ink); --bs-secondary-color: var(--brand-muted); --bs-border-color: var(--brand-hairline); --bs-link-color: var(--brand-primary-dark); --bs-link-color-rgb: var(--brand-primary-dark-rgb); --bs-link-hover-color: var(--brand-primary-deep); --bs-link-hover-color-rgb: var(--brand-primary-deep-rgb); --bs-primary-text-emphasis: var(--brand-primary-deep); --bs-primary-bg-subtle: var(--brand-tint); --bs-primary-border-subtle: var(--brand-hairline); /* Surface tokens the brand components below paint with. */ --brand-surface: #fff; --brand-ground: var(--brand-cream); --brand-on-surface: var(--brand-ink); --brand-on-surface-muted: var(--brand-muted); --brand-line: var(--brand-hairline); --brand-shadow: 0 4px 24px rgba(0, 0, 0, .08); --brand-shadow-lift: 0 12px 32px rgba(var(--brand-primary-rgb), .18); } body { background-color: var(--brand-ground); } /* ------------------------------------------------------- typography */ h1, h2, h3, h4, h5, h6, .navbar-brand, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: var(--brand-font-heading); /* "Shrift faqat Regular vaznda qo'llanadi" — the guideline allows the heading face in Regular only, so hierarchy comes from size and colour, never from weight. This also overrides Bootstrap's .fw-bold on headings deliberately. */ font-weight: 400; letter-spacing: -.01em; } .lead { font-weight: 400; } /* A short lime rule under a section heading — the guideline's one accent. */ .section-title { position: relative; padding-bottom: .6rem; margin-bottom: 1.5rem; } .section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 2.5rem; height: 3px; border-radius: 2px; background: var(--brand-lime); } .text-brand { color: var(--bs-primary-text-emphasis); } /* ---------------------------------------------------------- buttons */ .btn-primary { --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-bg: var(--brand-primary-dark); --bs-btn-hover-border-color: var(--brand-primary-dark); --bs-btn-active-bg: var(--brand-primary-deep); --bs-btn-active-border-color: var(--brand-primary-deep); --bs-btn-disabled-bg: var(--brand-primary); --bs-btn-disabled-border-color: var(--brand-primary); } .btn-outline-primary { --bs-btn-color: var(--bs-link-color); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-bg: var(--brand-primary); --bs-btn-hover-border-color: var(--brand-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--brand-primary-dark); --bs-btn-active-border-color: var(--brand-primary-dark); } /* The lime accent, for the one call to action a page is allowed. */ .btn-accent { --bs-btn-color: var(--brand-ink); --bs-btn-bg: var(--brand-lime); --bs-btn-border-color: var(--brand-lime); --bs-btn-hover-color: var(--brand-ink); --bs-btn-hover-bg: var(--brand-lime-alt); --bs-btn-hover-border-color: var(--brand-lime-alt); --bs-btn-active-bg: var(--brand-green); --bs-btn-active-border-color: var(--brand-green); } .btn { transition: background-color .15s ease, box-shadow .15s ease; } /* -------------------------------------------------------------- bars */ .brandbar { --bs-navbar-padding-y: .55rem; box-shadow: 0 1px 0 var(--brand-line); backdrop-filter: saturate(1.4) blur(6px); } .brandbar .navbar-brand { display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; } /* * The stock template aligns the navbar row on the text BASELINE, which hangs an * image brand off its bottom edge and leaves it sitting visibly high. Centre the * row instead, then nudge the mark down a little: optically it still reads high * against the nav labels, whose cap height sits above the image's centre line. */ .brandbar > .container, .brandbar > .container-fluid { align-items: center; } .brand-logo { height: 34px; width: auto; display: block; } .brandbar .brand-logo { margin-top: 4px; } /* Public site: the logo carries the colour, so the bar is a plain surface. */ .brandbar-light { --bs-navbar-color: var(--brand-on-surface-muted); --bs-navbar-hover-color: var(--bs-link-color); --bs-navbar-active-color: var(--bs-link-color); --bs-navbar-brand-color: var(--brand-on-surface); --bs-navbar-toggler-border-color: var(--brand-line); background-color: var(--brand-surface); } .brandbar-light .nav-link { font-weight: 500; position: relative; } /* Underline grows from the centre on hover and stays on the active item. */ .brandbar-light .nav-link::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: .2rem; height: 2px; border-radius: 2px; background: var(--brand-lime); transition: left .18s ease, right .18s ease; } .brandbar-light .nav-link:hover::after, .brandbar-light .nav-link.active::after { left: .5rem; right: .5rem; } /* The dropdown toggle is a nav-link too; an underline under it looks like a stray artefact next to the caret. */ .brandbar-light .dropdown-toggle::after, .brandbar-light .dropdown .nav-link::after { display: none; } .brandbar-light .dropdown-toggle::after { display: inline-block; } /* * Staff panel: a solid brand bar. Not decoration — someone with the panel and * the public site in adjacent tabs can tell at a glance which one takes money. */ .brandbar-deep { --bs-navbar-color: rgba(255, 255, 255, .82); --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff; --bs-navbar-brand-color: #fff; --bs-navbar-toggler-border-color: rgba(255, 255, 255, .35); --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); background: linear-gradient(90deg, var(--brand-primary-deep) 0%, var(--brand-primary-dark) 45%, var(--brand-primary) 100%); } .brandbar-deep .nav-link.logout, .brandbar-deep .btn-link { color: var(--bs-navbar-color); } .brandbar-deep .nav-link.logout:hover, .brandbar-deep .btn-link:hover { color: var(--bs-navbar-hover-color); } /* --------------------------------------------------------- surfaces */ .card { --bs-card-bg: var(--brand-surface); --bs-card-border-color: var(--brand-line); } .brand-card { border: 0; border-radius: var(--bs-border-radius-lg); background-color: var(--brand-surface); box-shadow: var(--brand-shadow); transition: box-shadow .18s ease; } /* * Shadow only, no movement. These cards wrap the data grids, and a card that * lifts under the pointer shifts every row with it — the row you were aiming * at is no longer where you clicked. Depth is the affordance; displacement is * a hazard when the content is a table of things you act on. */ .brand-card:hover { box-shadow: var(--brand-shadow-lift); } /* A thin lime rule that appears along the top edge on hover. */ .brand-card-accent { position: relative; overflow: hidden; } .brand-card-accent::before { content: ''; position: absolute; inset: 0 auto auto 0; width: 100%; height: 3px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--brand-primary), var(--brand-lime)); transition: transform .25s ease; } .brand-card-accent:hover::before { transform: scaleX(1); } .brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .85rem; font-size: 1.35rem; line-height: 1; background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } /* ------------------------------------------------------------- hero */ .brand-hero { position: relative; overflow: hidden; border-radius: 1.25rem; color: #fff; background: linear-gradient(135deg, var(--brand-primary-deep) 0%, var(--brand-primary-dark) 42%, var(--brand-primary) 100%); } .brand-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 88%, rgba(var(--brand-lime-rgb), .38) 0%, transparent 48%), radial-gradient(circle at 88% 12%, rgba(var(--brand-yellow-rgb), .20) 0%, transparent 42%); } .brand-hero > * { position: relative; } .brand-hero .lead { max-width: 34rem; } /* Watermark of the leaf mark, bled off the right edge. */ .brand-hero-mark { position: absolute; right: -2rem; top: 50%; transform: translateY(-50%); height: 15rem; opacity: .16; pointer-events: none; } /* ----------------------------------------------------------- footer */ .brand-footer { background-color: var(--brand-surface); border-top: 3px solid var(--brand-lime); } .brand-footer .brand-logo { height: 28px; } .brand-tagline { color: var(--bs-primary-text-emphasis); font-family: var(--brand-font-heading); } /* ------------------------------------------------------------ login */ /* * Replaces the template's blue/orange gradient. The guideline pairs the teal * with the lime accent, and nothing else. */ .login-brand-panel { background: linear-gradient(135deg, var(--brand-primary-deep) 0%, var(--brand-primary-dark) 45%, var(--brand-primary) 100%); position: relative; min-height: 480px; } .login-brand-panel::before { background: radial-gradient(circle at 20% 80%, rgba(var(--brand-lime-rgb), .30) 0%, transparent 55%), radial-gradient(circle at 80% 20%, rgba(var(--brand-yellow-rgb), .18) 0%, transparent 45%); } .login-btn { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%); border: none; } .login-btn:hover { background: linear-gradient(135deg, var(--brand-primary-dark) 0%, var(--brand-primary-deep) 100%); } .dashboard-banner { background: linear-gradient(135deg, var(--brand-lime) 0%, var(--brand-primary) 45%, var(--brand-primary-deep) 100%); } .dashboard-banner::before { background: radial-gradient(circle at 80% 80%, rgba(var(--brand-yellow-rgb), .22) 0%, transparent 50%), radial-gradient(circle at 20% 20%, rgba(var(--brand-lime-rgb), .25) 0%, transparent 40%); } /* ------------------------------------------------------------- misc */ /* Table headers get the guideline's pale wash rather than Bootstrap's grey. */ .table > thead th { background-color: var(--brand-tint); color: var(--brand-primary-deep); font-weight: 500; } /* * The white logo is still used — not for a dark theme, but on the two places * that paint a brand-teal ground of their own: the staff navbar and the login * panel. Pass `true` to BrandAsset::logoUrl() there. */