/* ============================================================ NOVATIC Skin Clinic — Design System Fresh clinical luxury · teal brand · ID/EN ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:wght@500;600;700&family=Jost:wght@400;500;600;700&display=swap'); :root { /* ---- Brand teal scale (from logo) ---- */ --teal-900: #0e3a40; --teal-800: #14525a; --teal-700: #1b6c76; --teal-600: #218692; --teal-500: #2ba0ac; /* primary */ --teal-400: #57b8c2; --teal-300: #8fd1d8; --teal-200: #c2e6ea; --teal-100: #e2f2f4; --teal-50: #f1f8f9; /* ---- Warm sand (natural) ---- */ --sand-700: #8a7a64; --sand-500: #c4b29a; --sand-300: #e3d8c8; --sand-100: #f3ece2; --sand-50: #faf6f0; /* ---- Neutrals (cool, slightly tealed) ---- */ --ink: #16262a; --ink-2: #2c4045; --muted: #5d7176; --faint: #93a6aa; --line: #e4ebec; --line-2: #d4dee0; --paper: #f7fafa; --white: #ffffff; /* ---- Semantic (tweakable) ---- */ --accent: var(--teal-500); --accent-deep: var(--teal-700); --accent-soft: var(--teal-100); --accent-tint: var(--teal-50); --warm-tint: var(--sand-50); --bg: var(--paper); /* ---- Type ---- */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-ui: 'Manrope', system-ui, sans-serif; --font-alt: 'Outfit', system-ui, sans-serif; --font-head: var(--font-display); /* ---- Geometry ---- */ --radius-s: 8px; --radius: 14px; --radius-l: 22px; --radius-xl: 32px; --maxw: 1280px; --gut: clamp(20px, 5vw, 64px); /* ---- Shadow ---- */ --shadow-s: 0 1px 2px rgba(20,40,45,.05), 0 2px 8px rgba(20,40,45,.04); --shadow: 0 6px 20px rgba(20,50,55,.07), 0 2px 6px rgba(20,50,55,.05); --shadow-l: 0 24px 60px rgba(15,58,64,.12), 0 8px 22px rgba(15,58,64,.07); --shadow-teal: 0 18px 44px rgba(33,134,146,.22); } /* ---- Style-direction hooks (set via Tweaks on ) ---- */ body[data-accent="sand"] { --accent: #b08d5b; --accent-deep:#7c5f33; --accent-soft:#f0e6d6; --accent-tint:#faf5ec; } body[data-accent="mono"] { --accent: #2c4045; --accent-deep:#16262a; --accent-soft:#e7eced; --accent-tint:#f3f6f6; } body[data-head="sans"] { --font-head: var(--font-alt); } body[data-head="playfair"]{ --font-head: 'Playfair Display', Georgia, serif; } body[data-head="jost"] { --font-head: 'Jost', system-ui, sans-serif; } body[data-body="jost"] { --font-ui: 'Jost', system-ui, sans-serif; } body[data-body="outfit"] { --font-ui: 'Outfit', system-ui, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { overflow-x: hidden; max-width: 100%; } body { font-family: var(--font-ui); background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } button { font-family: inherit; cursor: pointer; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent); color: #fff; } /* ============================ TYPE ============================ */ .display { font-family: var(--font-head); font-weight: 500; line-height: 1.02; letter-spacing: -.01em; font-size: clamp(44px, 7vw, 92px); } .h1 { font-family: var(--font-head); font-weight: 500; line-height: 1.06; letter-spacing: -.01em; font-size: clamp(34px, 5vw, 60px); } .h2 { font-family: var(--font-head); font-weight: 500; line-height: 1.1; letter-spacing: -.005em; font-size: clamp(28px, 3.6vw, 44px); } .h3 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; font-size: clamp(22px, 2.4vw, 30px); } .h4 { font-family: var(--font-ui); font-weight: 700; font-size: 19px; letter-spacing: -.01em; } .serif-i { font-family: var(--font-head); font-style: italic; font-weight: 400; } .lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-2); line-height: 1.65; } .body { color: var(--ink-2); } .muted { color: var(--muted); } .eyebrow { font-family: var(--font-ui); font-weight: 600; font-size: 12.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-deep); display: inline-flex; align-items: center; gap: .6em; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); display: inline-block; opacity: .8; } .eyebrow.center::before { display: none; } .price { font-family: var(--font-ui); font-weight: 700; letter-spacing: -.01em; } /* ============================ LAYOUT ============================ */ .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); } .container-wide { max-width: 1480px; } .container-narrow { max-width: 880px; } .section { padding-block: clamp(64px, 9vw, 130px); } .section-sm { padding-block: clamp(44px, 6vw, 80px); } .tint { background: var(--accent-tint); } .warm { background: var(--warm-tint); } .dark { background: var(--ink); color: #eaf3f3; } .dark .muted { color: #9fc0c2; } .dark .eyebrow { color: var(--teal-300); } .dark .eyebrow::before { background: var(--teal-400); } .grid { display: grid; gap: clamp(20px, 2.6vw, 36px); } .cols-2 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(3, 1fr); } .cols-4 { grid-template-columns: repeat(4, 1fr); } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .wrap { flex-wrap: wrap; } .between { justify-content: space-between; } .center { align-items: center; } .row.center { justify-content: center; } .gap-s { gap: 10px; } .gap { gap: 18px; } .gap-l { gap: 32px; } /* ============================ BUTTONS ============================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font-family: var(--font-ui); font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: 100px; border: 1px solid transparent; transition: all .25s cubic-bezier(.2,.7,.3,1); white-space: nowrap; line-height: 1; } .btn svg { width: 17px; height: 17px; } .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(33,134,146,.22); } .btn-primary:hover { background: var(--accent-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(33,134,146,.30); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: var(--ink-2); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-tint); } .btn-light { background: #fff; color: var(--ink); box-shadow: var(--shadow-s); } .btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .btn-lg { padding: 17px 34px; font-size: 16px; } .btn-sm { padding: 10px 18px; font-size: 13.5px; } .btn-block { width: 100%; } .link-underline { color: var(--accent-deep); font-weight: 600; font-size: 15px; display: inline-flex; gap: .4em; align-items: center; border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: gap .2s; } .link-underline:hover { gap: .7em; } /* ============================ CARDS ============================ */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: var(--line-2); } .chip { display: inline-flex; align-items: center; gap: .45em; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 100px; background: var(--accent-tint); color: var(--accent-deep); border: 1px solid var(--accent-soft); } .chip-sand { background: var(--sand-50); color: var(--sand-700); border-color: var(--sand-300); } .tag { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); } .divider { height: 1px; background: var(--line); border: 0; } /* ============================ PLACEHOLDER (image slots) ============================ */ .ph { position: relative; overflow: hidden; background: var(--teal-50); background-image: repeating-linear-gradient(135deg, rgba(33,134,146,.05) 0 2px, transparent 2px 11px); display: flex; align-items: center; justify-content: center; color: var(--teal-600); border-radius: inherit; } .ph.sand { background: var(--sand-50); background-image: repeating-linear-gradient(135deg, rgba(138,122,100,.06) 0 2px, transparent 2px 11px); color: var(--sand-700); } .ph.dark-ph { background: #11393f; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 11px); color: var(--teal-200); } .ph-label { font-family: 'Outfit', monospace; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border: 1px dashed currentColor; border-radius: 100px; opacity: .72; background: rgba(255,255,255,.45); backdrop-filter: blur(2px); } .dark-ph .ph-label { background: rgba(0,0,0,.18); } image-slot { display: block; width: 100%; max-width: 100%; } /* ============================ FORMS ============================ */ .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 13px; font-weight: 600; color: var(--ink-2); letter-spacing: .01em; } .input, .select, .textarea { font-family: var(--font-ui); font-size: 15px; color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 13px 15px; transition: border-color .2s, box-shadow .2s; width: 100%; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .textarea { resize: vertical; min-height: 96px; } /* ============================ HEADER ============================ */ .header { position: sticky; top: 0; z-index: 60; transition: background .3s, box-shadow .3s, border-color .3s; border-bottom: 1px solid transparent; } .header.solid { background: rgba(247,250,250,.86); backdrop-filter: blur(14px) saturate(1.2); border-color: var(--line); box-shadow: 0 1px 0 rgba(20,40,45,.02); } .header.on-dark:not(.solid) { color: #fff; } .header-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo-img { height: 34px; width: auto; } .nav { display: flex; align-items: center; gap: 30px; } .nav a { font-size: 14.5px; font-weight: 500; color: inherit; opacity: .82; transition: opacity .2s, color .2s; position: relative; padding: 4px 0; } .nav a:hover, .nav a.active { opacity: 1; color: var(--accent-deep); } .header.on-dark:not(.solid) .nav a:hover, .header.on-dark:not(.solid) .nav a.active { color: var(--teal-300); } .nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background: var(--accent); border-radius:2px; } .lang-switch { display: inline-flex; align-items: center; gap: 3px; height: 42px; padding: 4px; border: 1px solid var(--line); background: var(--white); border-radius: 100px; } .lang-switch button { height: 34px; min-width: 42px; padding: 0 12px; border-radius: 100px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; text-align: center; transition: background .2s, color .2s; } .lang-switch button.on { background: var(--accent); color: #fff; box-shadow: 0 1px 4px rgba(20,40,45,.22); } @keyframes nvspin { to { transform: rotate(360deg); } } .lang-switch button:not(.on):hover { color: var(--accent-deep); background: var(--accent-tint); } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 100px; border: 1px solid var(--line-2); background: transparent; color: inherit; transition: all .2s; } .icon-btn:hover { border-color: var(--accent); color: var(--accent-deep); } .header.on-dark:not(.solid) .icon-btn { border-color: rgba(255,255,255,.3); } .cart-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 100px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .burger { display: none; } /* ============================ FOOTER ============================ */ .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px !important; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 28px !important; } } .reviews-split { grid-template-columns: .8fr 1.2fr; } @media (max-width: 820px) { .reviews-split { grid-template-columns: 1fr; } } @media (max-width: 760px) { .grid.g2 { grid-template-columns: 1fr !important; } } .footer { background: var(--ink); color: #cfe2e3; padding-block: clamp(56px, 7vw, 88px) 32px; } .footer a { color: #cfe2e3; opacity: .8; transition: opacity .2s, color .2s; } .footer a:hover { opacity: 1; color: var(--teal-300); } .footer h5 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-300); margin-bottom: 16px; font-weight: 700; } /* ============================ MISC ============================ */ .badge-row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; } .stars { color: #e0a93f; letter-spacing: 2px; font-size: 15px; } .kicker-num { font-family: var(--font-head); font-size: clamp(40px,5vw,64px); font-weight: 500; color: var(--accent); line-height: 1; } .rule-top { border-top: 1px solid var(--line); } .float-cta { position: fixed; right: 22px; bottom: 22px; z-index: 50; box-shadow: var(--shadow-teal); } .fade-up { animation: fadeUp .7s cubic-bezier(.2,.7,.3,1) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } .reveal.in { opacity: 1; transform: none; } /* ============================ RESPONSIVE ============================ */ @media (max-width: 960px) { .cols-4 { grid-template-columns: repeat(2, 1fr); } .cols-3 { grid-template-columns: repeat(2, 1fr); } .nav, .nav-hide-tablet { display: none; } .burger { display: inline-flex; } } @media (max-width: 640px) { body { font-size: 16px; } .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } .hide-mobile { display: none !important; } .header-inner { height: 64px; } } /* mobile drawer */ .drawer { position: fixed; inset: 0; z-index: 200; display: none; } .drawer.open { display: block; } .drawer-bg { position: absolute; inset: 0; background: rgba(15,40,44,.55); backdrop-filter: blur(3px); } .drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); background: #f7fafa; padding: 28px 26px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-l); overflow-y: auto; transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.7,.3,1); } .drawer.open .drawer-panel { transform: none; } .drawer-panel a { padding: 14px 4px; font-size: 18px; font-family: var(--font-head); border-bottom: 1px solid var(--line); } @keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: none; } } /* cart drawer */ .cart-drawer { position: fixed; inset: 0; z-index: 80; display: none; } .cart-drawer.open { display: block; } .cart-panel { position: absolute; top:0; right:0; bottom:0; width: min(94vw, 440px); background: #f7fafa; display: flex; flex-direction: column; box-shadow: var(--shadow-l); transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.7,.3,1); } .cart-drawer.open .cart-panel { transform: none; } /* ============================ ADMIN PANEL ============================ */ .admin-layout { display: grid; grid-template-columns: 250px 1fr; align-items: start; } .admin-side { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; border-right: 1px solid var(--line); background: #fff; padding: 20px 14px; } .admin-nav-btn { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; width: 100%; text-align: left; background: none; border: 0; font-family: var(--font-ui); transition: background .15s, color .15s; } .admin-nav-btn:hover { background: var(--paper); } .admin-nav-btn.on { background: var(--accent-tint); color: var(--accent-deep); } .admin-nav-group { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; width: 100%; text-align: left; background: none; border: 0; } .admin-nav-group:hover { background: var(--paper); } .admin-nav-group .admin-nav-chev { margin-left: auto; color: var(--faint); transition: transform .22s ease; } .admin-nav-group.open .admin-nav-chev { transform: rotate(90deg); } .admin-nav-group.has-active { color: var(--ink); } .admin-nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; } .admin-nav-sub.open { grid-template-rows: 1fr; } .admin-nav-sub > .admin-nav-sub-inner { overflow: hidden; display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px; margin-left: 19px; padding-left: 9px; border-left: 1.5px solid var(--line); } .admin-nav-sub .admin-nav-btn { font-size: 13.5px; font-weight: 500; padding: 9px 12px; gap: 9px; } .admin-nav-sub .admin-nav-btn .nav-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line-2); flex: 0 0 auto; } .admin-nav-sub .admin-nav-btn.on .nav-dot { background: var(--accent); } .admin-nav-count { margin-left: auto; font-size: 11px; font-weight: 700; background: #b8860b; color: #fff; border-radius: 100px; padding: 1px 7px; } .admin-main { padding: clamp(20px, 3vw, 40px); max-width: 1120px; width: 100%; } .admin-topbar { display: none; } @media (max-width: 960px) { .admin-layout { grid-template-columns: 1fr; } .admin-side { display: block; position: fixed; inset: 0 auto 0 0; width: 82vw; max-width: 300px; height: 100vh; z-index: 80; box-shadow: var(--shadow-l); background: #ffffff; overflow-y: auto; transform: translateX(-100%); transition: transform .3s cubic-bezier(.2,.7,.3,1); } .admin-side.open { transform: none; } .admin-topbar { display: flex; align-items: center; } } /* cookie consent */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; background: rgba(255,255,255,.97); backdrop-filter: blur(10px); border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(20,50,55,.08); animation: fadeUp .4s ease both; } .cookie-inner { max-width: var(--maxw); margin: 0 auto; padding: 16px var(--gut); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } @media (max-width: 560px) { .cookie-inner { flex-direction: column; align-items: stretch; gap: 12px; } .cookie-inner .row { justify-content: stretch; } .cookie-inner .btn { flex: 1; } } /* navigation chooser sheet */ .navsheet { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; background: rgba(15,40,44,.5); backdrop-filter: blur(3px); animation: fadeUp .25s ease both; } .navsheet-card { width: 100%; max-width: 440px; background: #fff; border-radius: 22px 22px 0 0; padding: 22px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-l); } @media (min-width: 560px) { .navsheet { align-items: center; } .navsheet-card { border-radius: 20px; } } .navsheet-btn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; font-family: var(--font-ui); transition: background .15s, border-color .15s; } .navsheet-btn:hover { background: var(--paper); border-color: var(--accent); } /* leaflet sizing guard */ .leaflet-container { z-index: 1; } .wa-dock { position: fixed; z-index: 60; } .wa-dock.right { right: 0; } .wa-dock.left { left: 0; } .wa-tab { display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff; border: 0; cursor: pointer; width: 48px; height: 52px; box-shadow: 0 8px 22px rgba(37,211,102,.38); transition: transform .2s, width .2s; } .wa-dock.right .wa-tab { border-radius: 16px 0 0 16px; } .wa-dock.left .wa-tab { border-radius: 0 16px 16px 0; } .wa-dock.right .wa-tab:hover { transform: translateX(-3px); } .wa-dock.left .wa-tab:hover { transform: translateX(3px); } .wa-card { width: min(82vw, 290px); background: #fff; border-radius: 18px; box-shadow: var(--shadow-l); padding: 16px; margin: 0 14px; display: flex; flex-direction: column; gap: 8px; animation: fadeUp .25s ease both; } /* floating cart — above WhatsApp tab while scrolling */ .cart-fab { position: fixed; z-index: 61; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-deep); color: #fff; border: 0; cursor: pointer; box-shadow: 0 8px 22px rgba(14, 58, 64, .38); transition: transform .2s, box-shadow .2s; } .cart-fab.right { right: 0; border-radius: 16px 0 0 16px; } .cart-fab.left { left: 0; border-radius: 0 16px 16px 0; } .cart-fab.right:hover { transform: translateX(-3px); } .cart-fab.left:hover { transform: translateX(3px); } .cart-fab-count { position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 100px; background: #fff; color: var(--accent-deep); font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,.15); } .nv-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); z-index: 400; background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 100px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-l); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; max-width: 90vw; text-align: center; } .nv-toast.show { opacity: 1; transform: translate(-50%, 0); } /* ============================ AGENDA CALENDAR ============================ */ .cal-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; } .seg { display: inline-flex; background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px; padding: 3px; gap: 2px; } .seg button { border: 0; background: none; font: 600 13px var(--font-ui); color: var(--ink-2); padding: 7px 16px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; } .seg button.on { background: #fff; color: var(--ink); box-shadow: var(--shadow-s); } .cal-staffsel { display: flex; flex-wrap: wrap; gap: 7px; } .cal-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 5px; border-radius: 100px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; font: 600 12.5px var(--font-ui); color: var(--ink-2); transition: all .15s; } .cal-chip .ava-dot { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; } .cal-chip.on { color: #fff; border-color: transparent; } .cal-wrap { border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; background: #fff; } .cal-scroll { overflow: auto; max-height: 74vh; } .cal-grid { position: relative; min-width: 100%; } .cal-head { position: sticky; top: 0; z-index: 8; display: grid; background: #fff; border-bottom: 1px solid var(--line); } .cal-head-gutter { border-right: 1px solid var(--line); } .cal-head-cell { padding: 9px 6px; border-left: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; } .cal-head-cell.today { background: var(--accent-tint); } .cal-head-cell .ch-name { font: 700 12.5px var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .cal-body { position: relative; display: grid; } .cal-gutter { position: relative; border-right: 1px solid var(--line); } .cal-gutter .ghr { position: absolute; right: 7px; font: 600 10.5px var(--font-ui); color: var(--faint); transform: translateY(-50%); } .cal-col { position: relative; border-left: 1px solid var(--line); } .cal-col.off { background: repeating-linear-gradient(135deg, var(--paper) 0 7px, #fff 7px 14px); } .cal-col.skill-no { background: rgba(120,124,128,.13); } .cal-col.skill-no .cal-appt { opacity: .25; } .cal-col .off-label { position: absolute; top: 12px; left: 0; right: 0; text-align: center; font: 600 11px var(--font-ui); color: var(--faint); pointer-events: none; } .cal-appt { position: absolute; border-radius: 8px; padding: 3px 7px; overflow: hidden; cursor: pointer; box-shadow: var(--shadow-s); border-left: 3px solid; user-select: none; transition: box-shadow .15s; } .cal-appt:hover { box-shadow: var(--shadow-m); z-index: 3; } .cal-appt.draggable { cursor: grab; touch-action: none; } .cal-appt.dragging { opacity: .3; } .cal-appt .ca-time { font: 800 10.5px var(--font-ui); } .cal-appt .ca-treat { font: 600 11.5px/1.25 var(--font-ui); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-appt .ca-client { font: 500 10.5px var(--font-ui); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-drop { position: absolute; left: 2px; right: 2px; border-radius: 8px; z-index: 4; pointer-events: none; border: 2px dashed; } .cal-drop.ok { background: var(--accent-tint); border-color: var(--accent); } .cal-drop.bad { background: rgba(192,73,47,.12); border-color: #c0492f; } .cal-now { position: absolute; left: 0; right: 0; height: 2px; background: #c0492f; z-index: 5; pointer-events: none; } .cal-block { position: absolute; left: 2px; right: 2px; border-radius: 6px; z-index: 2; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line-2); background: repeating-linear-gradient(135deg, rgba(90,100,105,.16) 0 6px, rgba(90,100,105,.05) 6px 12px); } .cal-block .cb-label { font: 700 10px var(--font-ui); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .cal-now::before { content: ''; position: absolute; left: -1px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #c0492f; } .cal-ghost { position: fixed; z-index: 300; pointer-events: none; border-radius: 9px; padding: 5px 9px; box-shadow: var(--shadow-l); border-left: 3px solid; background: #fff; transform: translate(10px, -10px); max-width: 180px; } /* ============================ LETTERHEAD (invoice & report headers) ============================ */ .lh-bar { height: 0; border-top: 5px solid; border-radius: 3px; } .lh-rule { height: 0; border-top: 2px solid; opacity: .45; margin-top: 14px; } .lh .h3 { font-family: var(--font-head); } /* report document shell — light, print-safe */ .report-doc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l); padding: clamp(20px,3vw,34px); } .report-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); } .report-row:last-child { border-bottom: 0; } .report-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 0; border-top: 2px solid; margin-top: 4px; } /* print / PDF */ @media print { /* Force backgrounds, borders & accent colours to render in the PDF exactly like the on-screen preview (otherwise browsers strip fills to save ink, leaving only border corners visible). */ html, body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } body * { visibility: hidden !important; } .print-area, .print-area * { visibility: visible !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .print-area { position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; margin: 26px auto 0 !important; width: auto !important; max-width: 660px !important; padding: 28px !important; box-shadow: none !important; border-radius: 14px !important; } .no-print { display: none !important; } .header, .footer, .admin-side, .admin-topbar, .float-cta { display: none !important; } @page { margin: 14mm; } }