/* ============================================================ Clean Cut Car Care — shared staff design system "Hybrid" brand: dark/gold chrome + light, high-contrast work areas. Loaded LAST in so it harmonises every staff page. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap'); :root{ --black:#0E0E0E; --black-soft:#161514; --gold-light:#f0c060; --gold-mid:#c9943a; --gold-dark:#9a6f28; --gold-grad:linear-gradient(135deg,#9a6f28 0%,#d4a843 35%,#f0c060 55%,#c9943a 80%,#9a6f28 100%); --gold-text:linear-gradient(135deg,#c9943a 0%,#f0c060 50%,#c9943a 100%); --bg:#F4F1EB; --card:#fff; --ink:#1A1815; --line:#EAE5DC; --line-soft:#F0EDE6; --muted:#8C857A; --muted2:#B3ADA2; --green:#1D9E75; --green-bg:#E8F8F2; --amber:#BA7517; --red:#C0392B; --radius:16px; --shadow:0 1px 2px rgba(26,24,21,.05),0 8px 24px rgba(26,24,21,.05); } /* ---- base ---- */ body{ font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important; background:var(--bg) !important; color:var(--ink); -webkit-font-smoothing:antialiased; } /* ---- dark / gold header (chrome) ---- */ .header{ background:var(--black) !important; position:relative; overflow:hidden; } .header::before{ /* gold accent hairline along the top */ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:var(--gold-grad); z-index:2; } .header::after{ /* soft gold glow, top-right */ content:'';position:absolute;top:-50%;right:-8%; width:280px;height:280px;border-radius:50%; background:radial-gradient(circle,rgba(240,192,96,.12),transparent 70%); pointer-events:none;z-index:0; } .header > *{position:relative;z-index:1;} /* page title (the little subtitle becomes a serif heading) */ .header-sub{ font-family:'Cormorant Garamond',Georgia,serif !important; font-size:25px !important; font-weight:600 !important; line-height:1.1 !important; letter-spacing:.2px !important; text-transform:none !important; color:#F4EFE6 !important; margin-top:6px; } .header h1{ font-family:'Cormorant Garamond',Georgia,serif !important; font-weight:600 !important; color:#F4EFE6 !important; letter-spacing:.2px; } .header .back-link{ color:var(--gold-light) !important; opacity:.95; } /* ---- light work area: cards ---- */ .card{ background:var(--card) !important; border:1px solid var(--line) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow) !important; } /* ---- gold section labels ---- */ .section-label{ color:var(--gold-dark) !important; letter-spacing:1.4px !important; font-weight:600 !important; } /* ---- primary action → gold ---- */ .btn-primary{ background:var(--gold-grad) !important; color:#241803 !important; border:none !important; font-weight:600 !important; box-shadow:0 6px 18px rgba(154,111,40,.28) !important; } .btn-primary:active{ transform:translateY(1px); } /* ── elevated-light: subtle motion + depth (shared) ── */ @keyframes ccFadeUp{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} } @keyframes ccFadeIn{ from{opacity:0} to{opacity:1} } .header{ animation:ccFadeIn .5s ease both; } .card{ transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .25s,border-color .25s; } /* hover-lift only on pointer devices — phones (the staff's real device) are untouched */ @media(hover:hover){ .card:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(26,24,21,.04),0 14px 32px rgba(26,24,21,.10) !important; border-color:rgba(201,148,58,.4) !important; } } @media(prefers-reduced-motion:reduce){ *{ animation:none !important; } }