:root{ /* Ceram's brand system, from two boards: the Ceram board itself gives the primary purple and the gold (2d1142 / ffffff / ead4aa→6c491d) — that's Ceram's own labeled hex, and their emblem is literally gold, so it's kept exact and untouched. The Vivienne Paris board supplies the two supporting moves layered on top: a near-black aubergine (sampled off its swatch chips) for the darkest/hover purple instead of a generic tint, and a warm pearl neutral (its "Pearl Silk" chip) as the page's background warmth instead of a cool off-white — so the base feels like the boutique-editorial board while the identity color stays Ceram's. Gold is reserved for editorial accents and "this is finished" moments (page eyebrows, hover glows, the vision panel, paid/ready status), not wallpaper. Critical/overdue stays a true red — a usability signal, not a brand color, and has to stay legible against both purple and gold. */ --porcelain:#F5F0E6; /* warm pearl base (Vivienne "Pearl Silk"), not cool white */ --surface:#FFFFFF; /* card/panel white — exact Ceram board hex */ --surface-sunken:#EFE8D8; --ink:#221A2B; --ink-soft:#6E6577; --line:#E6DECF; --violet:#2D1142; /* brand primary — exact Ceram board hex, untouched */ --violet-deep:#1E1330; /* near-black aubergine, off the Vivienne swatch chip */ --violet-soft:#EFEAF3; --rose:#2D1142; --lavender:#C9BAD3; --plum-surface:#2D1142; --gold:#6C491D; /* text/icon-safe bronze (Ceram board's dark gold stop) */ --gold-light:#EAD4AA; /* pale champagne (Ceram board's light gold stop) — for use on dark purple */ --gold-soft:#FAF4EA; /* champagne tint for badges/fills on white */ --gold-gradient:linear-gradient(135deg, #EAD4AA 0%, #6C491D 100%); --champagne:#EAD4AA; --ready:#6C491D; /* "done/paid/ready" reads as gold, not an off-brand green */ --ready-soft:#FAF4EA; --amber:#6E5570; /* "in progress" — the Vivienne board's mid dusty mauve */ --amber-soft:#EFEAF3; --critical:#A8433E; --critical-soft:#F5E2DF; --shadow: 0 1px 2px rgba(30,19,48,.07), 0 10px 30px -14px rgba(30,19,48,.18); /* Semantic aliases for workspace UI (metric cards, status dots, empty states) — point at the existing palette above rather than introducing new hues, so dashboards stay in the same restrained system. */ --success:#2F6B45; --success-soft:#E8F1EA; --warning:#6C491D; --warning-soft:#FAF4EA; --info:#3E5C8A; --info-soft:#EAEFF6; --shadow-soft: 0 1px 2px rgba(30,19,48,.05), 0 6px 18px -12px rgba(30,19,48,.16); --ease: cubic-bezier(.4,0,.2,1); --font-display:'Outfit', ui-sans-serif, system-ui, sans-serif; --font-body:'Montserrat', ui-sans-serif, system-ui, sans-serif; --font-accent:'Cormorant Garamond', ui-serif, Georgia, serif; --font-mono:'IBM Plex Mono', ui-monospace, monospace; } *{box-sizing:border-box;} html{color-scheme:light; scroll-behavior:smooth; scroll-padding-top:78px;} body{ margin:0; background: linear-gradient(180deg, #fff 0%, var(--porcelain) 560px, #F8F4EC 100%); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } h1,h2,h3{font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0; color:var(--ink);} p{margin:0;} button{font-family:inherit; font-size:inherit; cursor:pointer;} a{color:inherit; text-decoration:none;} ::selection{background:var(--violet-soft);} :focus-visible{outline:2px solid var(--violet); outline-offset:2px;} img{max-width:100%; display:block;} .mono{font-family:var(--font-mono);} /* Elegant serif for true brand moments (marketing H1s) — applied selectively per page, never on dashboard/operational headings, which stay on the sans display face for density and legibility (a table-dense QC screen set in a display serif reads as decoration, not information). */ .serif{font-family:var(--font-accent); font-weight:500; letter-spacing:0;} /* A hairline gold rule — the one recurring "premium moment" motif, used sparingly to mark a section transition or divide a card, never as a background fill. */ .gold-rule{border:none; height:2px; background:var(--gold-gradient); border-radius:2px; opacity:.85;} .eyebrow{font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); display:block;} .eyebrow-accent{font-family:var(--font-accent); font-size:16px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); font-weight:400; display:block;} .u{max-width:1160px; margin:0 auto; padding:0 28px;} [hidden]{display:none !important;} @media (prefers-reduced-motion: reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} } /* ---- reveal-on-scroll ---- Cheap by design: only opacity + translate (composited), no blur, no per-letter splitting. A block fades up, then its own text settles in a beat later via transition-delay — no JS timers, just CSS. */ .reveal{ opacity:0; transform:translate3d(0,20px,0); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--i,0) * 60ms); } .reveal.visible{opacity:1; transform:none;} .reveal-group.visible > *{transition-delay:calc(var(--i,0) * 60ms);} /* text inside a revealed block: a soft upward settle, gently staggered */ .reveal :is(h1,h2,h3,.eyebrow,.eyebrow-accent,p,.btn){ opacity:0; transform:translate3d(0,9px,0); transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); } .reveal.visible :is(h1,h2,h3,.eyebrow,.eyebrow-accent,p,.btn){opacity:1; transform:none;} .reveal.visible :is(.eyebrow,.eyebrow-accent){transition-delay:.06s;} .reveal.visible :is(h1,h2,h3){transition-delay:.13s;} .reveal.visible p{transition-delay:.2s;} .reveal.visible .btn{transition-delay:.28s;} /* on screen at render: a quick fade, no stagger (see reveal.js) */ .reveal.reveal-now, .reveal.reveal-now :is(h1,h2,h3,.eyebrow,.eyebrow-accent,p,.btn){transition-duration:.25s; transition-delay:0s;} @media (prefers-reduced-motion: reduce){ .reveal, .reveal :is(h1,h2,h3,.eyebrow,.eyebrow-accent,p,.btn){opacity:1 !important; transform:none !important;} } /* ---- top chrome ---- */ /* solid bar, no backdrop-filter — a live blur over the hero image is the main scroll-jank source */ .topbar{position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--surface) 91%, var(--porcelain)); border-bottom:1px solid color-mix(in srgb, var(--gold-light) 35%, var(--line));} .topbar-inner{padding:13px 28px; display:flex; align-items:center; gap:8px;} .brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:18px;} .brand{flex-shrink:0;} .ceram-emblem{display:block; aspect-ratio:1; object-fit:contain; flex-shrink:0; background:transparent;} .brand-logo{height:54px; width:54px;} .footer-brand .brand-logo{height:76px; width:76px;} .brand-mark{width:34px; height:34px; border-radius:10px; background:var(--violet-soft); display:flex; align-items:center; justify-content:center; padding:5px; flex-shrink:0;} .brand-mark img{width:100%; height:100%; object-fit:contain;} .main-nav{display:flex; gap:10px; margin:0 auto; font-weight:700; font-size:14px; color:var(--ink-soft);} .main-nav a{padding:7px 14px; border-radius:9px; transition:background .15s ease, color .15s ease;} .main-nav a:hover, .main-nav a.active{color:#fff; background:var(--violet);} .topbar-actions{display:flex; align-items:center; gap:10px;} .lang-switch{height:38px; padding:0 14px; border-radius:100px; background:var(--surface-sunken); border:1px solid var(--line); color:var(--violet); font:600 12.5px/1 var(--font-body); cursor:pointer; transition:background .15s ease, border-color .15s ease;} .lang-switch:hover{background:var(--violet-soft); border-color:var(--lavender);} body.workplace .lang-switch{display:none;} @media (max-width:900px){.lang-switch{padding:0 11px; font-size:11.5px;}} .icon-btn{position:relative; background:var(--surface-sunken); border:1px solid var(--line); width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--ink);} /* .icon-btn/.dash-switch set their own `display`, which — per the CSS cascade — beats the browser's default `[hidden]{display:none}` rule on some engines (seen on iPadOS Safari: both icons stayed visible on the public site even with the `hidden` attribute set). !important pins it. */ #cartBtn[hidden], #notifWrap[hidden]{display:none !important;} .icon-btn:hover{border-color:var(--violet); color:var(--violet);} .cart-count{position:absolute; top:-6px; right:-6px; background:var(--violet); color:#fff; font-size:10px; font-weight:700; border-radius:100px; min-width:17px; height:17px; display:flex; align-items:center; justify-content:center; padding:0 4px; font-family:var(--font-mono);} .dash-switch{position:relative;} .dash-menu{position:absolute; right:0; top:calc(100% + 8px); background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; min-width:190px; display:none; flex-direction:column; z-index:50;} .dash-menu.open{display:flex;} .dash-menu a{padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--ink);} .dash-menu a.dash-subitem{padding-left:24px; font-size:12.5px; color:var(--ink-soft); font-weight:600;} .dash-menu a:hover{background:var(--violet-soft); color:var(--violet);} .nav-toggle{display:none; background:none; border:none; font-size:20px; color:var(--ink); margin-left:auto;} .notif-menu{padding:0; min-width:320px; max-width:90vw; max-height:420px; overflow-y:auto;} .notif-head{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:700; font-size:13.5px; position:sticky; top:0; background:var(--surface);} .notif-item{padding:11px 14px; border-bottom:1px solid var(--line); cursor:pointer;} .notif-item:last-child{border-bottom:none;} .notif-item:hover{background:var(--surface-sunken);} .notif-item.unread{background:var(--violet-soft);} .notif-item.unread:hover{background:color-mix(in srgb, var(--violet-soft) 80%, var(--surface-sunken));} .notif-title{font-weight:600; font-size:13px;} .notif-body{font-size:12.5px; color:var(--ink-soft); margin-top:2px;} .notif-time{font-size:11px; color:var(--ink-soft); font-family:var(--font-mono); margin-top:4px;} @media (max-width: 900px){ .main-nav{display:none;} .main-nav.open{display:flex; position:absolute; top:64px; left:0; right:0; background:var(--surface); flex-direction:column; padding:14px 24px; border-bottom:1px solid var(--line); gap:16px; z-index:40;} .nav-toggle{display:block;} /* main-nav was the flex spacer; without it, group the actions with the hamburger on the right instead of leaving them stranded by the logo. */ .topbar-actions{margin-left:auto;} .nav-toggle{margin-left:0;} } /* ---- buttons ---- */ .btn{display:inline-flex; align-items:center; gap:8px; border-radius:10px; padding:11px 20px; font-weight:600; font-size:14.5px; border:1px solid transparent; transition:transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;} .btn:active{transform:translateY(1px);} .btn-primary{background:var(--violet); color:#fff;} .btn-primary:hover{background:var(--violet-deep); box-shadow:0 6px 16px -6px color-mix(in srgb, var(--violet) 55%, transparent);} .btn-ghost{background:transparent; border-color:var(--line); color:var(--ink);} .btn-ghost:hover{border-color:var(--violet); color:var(--violet);} /* Reserved for the one primary action per premium screen (Create Job Order, Approve, Submit) — a gold-gradient button reads as "the important one" precisely because it's rare; using it for every button would just make it the new default and lose that signal. */ .btn-gold{background:var(--gold-gradient); color:var(--violet-deep); font-weight:700; border-color:transparent;} .btn-gold:hover{filter:brightness(1.04); box-shadow:0 8px 20px -8px color-mix(in srgb, var(--gold) 55%, transparent);} .btn-sm{padding:7px 13px; font-size:13px; border-radius:7px;} .btn-danger-ghost{background:transparent; border:1px solid color-mix(in srgb, var(--critical) 45%, transparent); color:var(--critical);} .btn-danger-ghost:hover{background:var(--critical-soft);} .btn-block{width:100%; justify-content:center;} .btn[disabled]{opacity:.45; cursor:not-allowed;} /* ---- page scaffolding ---- */ .page{padding:52px 0 0;} .page-head{margin-bottom:40px; max-width:70ch;} .page-head h1{font-size:clamp(1.9rem,3vw,2.5rem); margin-top:10px;} .page-head .lede{margin-top:14px; color:var(--ink-soft); font-size:15.5px;} .section{margin-bottom:64px;} .section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap;} /* ---- card grids reused across pages ---- */ .grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;} .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:18px;} .card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:var(--shadow);} .card h3{font-size:17px; margin-bottom:6px;} .card p{color:var(--ink-soft); font-size:13.5px;} .card .ic{width:38px; height:38px; border-radius:10px; background:var(--violet-soft); color:var(--violet); display:flex; align-items:center; justify-content:center; margin-bottom:14px;} /* ================= HOME ================= */ .page-flush{padding-top:0;} .btn-lg{padding:14px 26px; font-size:15px; border-radius:11px;} /* ---- full-bleed welcome hero ---- */ .home-hero{position:relative; isolation:isolate; display:flex; align-items:center; min-height:560px; height:calc(100svh - 170px); max-height:760px; overflow:hidden; background:#2D1142;} .hero-copy{position:relative; z-index:2; width:100%; max-width:1160px; margin:auto; padding:44px 28px; color:#fff;} .hero-loc{display:block; font-size:11px; color:var(--gold-light); margin-bottom:18px;} .hero-copy h1{font-size:80px; line-height:1; color:#fff; font-weight:500;} .hero-tagline{font-size:34px; line-height:1.15; margin-top:12px; color:var(--gold-light);} .hero-copy .welcome{max-width:42ch; margin-top:22px; font-size:15px; line-height:1.8; color:#fff;} .hero-copy .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;} .hero-photo{position:absolute; inset:0; z-index:0;} .hero-photo img{width:100%; height:100%; object-fit:cover; object-position:center;} .hero-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(33,16,49,.88),rgba(33,16,49,.60) 40%,rgba(33,16,49,.08) 80%);} @media(max-width:640px){ .home-hero{min-height:570px; height:calc(100svh - 130px);} .hero-copy{padding:32px 22px;} .hero-copy h1{font-size:52px;} .hero-tagline{font-size:28px;} .hero-photo img{object-position:65% center;} .hero-photo::after{background:rgba(33,16,49,.65);} } /* ---- stat band: one clean bar, lifted over the hero seam ---- */ .stat-strip{ display:flex; flex-wrap:wrap; margin:-42px 0 86px; position:relative; z-index:3; background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(250,244,234,.96)); border:1px solid color-mix(in srgb, var(--gold-light) 48%, var(--line)); border-radius:2px; box-shadow:0 1px 2px rgba(58,38,64,.05), 0 28px 60px -32px rgba(58,38,64,.36); overflow:hidden; } .chipstat{flex:1; min-width:150px; padding:20px 18px; text-align:center; border-right:1px solid var(--line);} .chipstat:last-child{border-right:none;} .chipstat b{display:block; font-family:var(--font-display); font-weight:600; font-size:22px; font-variant-numeric:tabular-nums;} .chipstat span{display:block; margin-top:3px; font-size:11px; color:var(--ink-soft); font-family:var(--font-body); font-weight:600; text-transform:uppercase; letter-spacing:.08em;} @media (max-width: 640px){ .stat-strip{margin-top:-24px;} .chipstat{flex:1 1 50%; min-width:0;} .chipstat:nth-child(2){border-right:none;} .chipstat:nth-child(1), .chipstat:nth-child(2){border-bottom:1px solid var(--line);} } .space-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:18px; margin-top:18px;} .visit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:18px;} .space-card{border-radius:2px; overflow:hidden; position:relative; box-shadow:var(--shadow); border:1px solid var(--line); min-height:260px; background-size:cover; background-position:center;} .space-card .tag{position:absolute; left:14px; bottom:14px; background:rgba(20,10,26,.55); color:#fff; backdrop-filter:blur(6px); padding:7px 13px; border-radius:100px; font-size:12.5px; font-weight:600;} .visit-editorial{ display:grid; grid-template-columns:.78fr 1.22fr; gap:28px; align-items:stretch; background:var(--violet); padding:34px; color:#fff; overflow:hidden; } .visit-copy{display:flex; flex-direction:column; justify-content:center; min-height:360px; padding:12px;} .visit-copy .eyebrow-accent{color:var(--gold-light);} .visit-copy h2{font-size:clamp(2rem,4vw,3.9rem); color:#fff; line-height:.98; margin-top:12px;} .visit-copy p{margin-top:18px; color:rgba(255,255,255,.72); font-weight:500;} .visit-copy .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;} .visit-mosaic{display:grid; grid-template-columns:1.1fr .9fr; grid-template-rows:1fr 1fr; gap:14px; min-height:420px;} .visit-mosaic .space-card:first-child{grid-row:1 / 3; min-height:420px;} .visit-mosaic .space-card::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 42%, rgba(18,9,30,.56));} .visit-mosaic .space-card .tag{z-index:1;} .review-strip{ display:grid; grid-template-columns:.42fr .58fr; gap:28px; align-items:start; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 0; } .review-intro h2{font-size:clamp(2.1rem,4vw,3.6rem); color:var(--violet); line-height:1;} .review-grid{display:grid; grid-template-columns:1fr; gap:12px;} .review-card{margin:0; background:#fff; border:1px solid color-mix(in srgb, var(--gold-light) 46%, var(--line)); padding:24px 26px;} .review-card blockquote{margin:0; font-family:var(--font-accent); font-size:clamp(1.35rem,2vw,1.75rem); line-height:1.22; color:var(--violet);} .review-card figcaption{margin-top:14px; color:var(--gold); font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;} .faq-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;} .faq-card{background:#fff; border:1px solid var(--line); padding:20px 22px; box-shadow:var(--shadow);} .faq-card summary{cursor:pointer; font-weight:700; color:var(--violet); list-style:none;} .faq-card summary::-webkit-details-marker{display:none;} .faq-card summary::after{content:"+"; float:right; color:var(--gold); font-size:18px; line-height:1;} .faq-card[open] summary::after{content:"-";} .faq-card p{margin-top:12px; color:var(--ink-soft); font-size:13.5px; line-height:1.65;} .services-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px;} .service-category-list{margin:20px 0; padding-left:18px; font-size:13px; line-height:1.9; color:var(--ink-soft);} .luxe-services .svc-card{display:flex; flex-direction:column; min-width:0;} .luxe-services .svc-more{margin-top:auto;} .service-category .section-head h2{font-size:36px; line-height:1.15; letter-spacing:0; overflow-wrap:break-word;} .service-category .lede{margin-top:10px;} .service-category .svc-detail{border-radius:8px;} @media(max-width:640px){.service-category .section-head h2{font-size:28px;}} .svc-card{display:flex; flex-direction:column; background:linear-gradient(180deg, #fff 0%, #FBF7EF 100%); border:1px solid var(--line); border-radius:2px; padding:26px; cursor:pointer; transition:border-color .15s, transform .12s, box-shadow .15s; box-shadow:var(--shadow);} .svc-card:hover{border-color:var(--gold-light); transform:translateY(-3px); box-shadow:0 18px 44px -26px rgba(45,17,66,.38);} .svc-card .ic{background:var(--violet); color:var(--gold-light);} .svc-card h3{font-family:var(--font-accent); font-size:25px; font-weight:500; color:var(--violet);} .svc-card p{flex:1;} .svc-more{margin-top:16px; font-size:13px; font-weight:700; color:var(--violet); opacity:.55; transition:opacity .15s;} .svc-card:hover .svc-more{opacity:1;} /* A calm cream moment, not a full plum block — plum is the anchor color (nav, sidebar, key buttons), not something the whole page gets draped in every time a section wants attention. This band leans on the soft champagne end of the palette instead, with a thin gold rule as the one accent and plum reserved for the heading text and the primary button. */ .cta-banner{ position:relative; overflow:hidden; border-radius:20px; padding:56px 44px; text-align:center; border:1px solid var(--line); background: radial-gradient(680px circle at 50% -40%, var(--gold-soft), transparent 65%), var(--surface); } .cta-banner::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold-gradient);} .cta-banner h2{color:var(--violet); font-size:clamp(1.5rem,2.8vw,2rem); position:relative;} .cta-banner p{color:var(--ink-soft); margin-top:12px; max-width:52ch; margin-left:auto; margin-right:auto; position:relative;} .cta-banner .cta-row{margin-top:24px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative;} .btn-white{background:var(--violet); color:#fff; border-color:var(--violet);} .btn-white:hover{background:var(--violet-deep);} /* light accent card — pairs a violet accent with a white surface for contrast */ .card.accent{border-top:3px solid var(--violet);} .card.accent .eyebrow{color:var(--violet);} /* ---- home: shared section heading ---- */ .section-head h2{font-size:1.4rem; line-height:1.2; margin-top:4px;} .luxe-head h2{font-size:clamp(2.3rem,5vw,4.2rem); font-weight:500; color:var(--violet); line-height:.98;} .signature-section{display:grid; grid-template-columns:.9fr 1.1fr; gap:34px; align-items:stretch;} .signature-panel{ position:relative; min-height:430px; padding:24px 0; color:var(--ink); background:transparent; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; } .signature-panel .eyebrow-accent{color:var(--gold); position:relative;} .signature-panel h2{font-size:46px; line-height:1.08; margin-top:18px; color:var(--violet); position:relative;} .signature-panel p{font-size:15px; line-height:1.8; color:var(--ink-soft); max-width:48ch; margin-top:22px; position:relative;} .signature-cta{position:relative; margin-top:28px; align-self:flex-start; transition:transform .2s ease, border-color .18s ease, color .18s ease, box-shadow .2s ease;} .signature-cta:hover{transform:translateY(-2px); box-shadow:0 10px 24px -14px color-mix(in srgb, var(--violet) 55%, transparent);} .signature-cta .btn-arw{display:inline-block; transition:transform .2s ease;} .signature-cta:hover .btn-arw{transform:translateX(4px);} .signature-media{display:grid; grid-template-columns:1fr 1fr; gap:14px; min-height:430px;} .signature-media img{width:100%; height:100%; object-fit:cover; border:1px solid var(--line); box-shadow:var(--shadow);} .signature-media img:first-child{margin-top:42px; height:calc(100% - 42px);} .signature-media img:last-child{height:calc(100% - 42px);} /* ---- home: why-us / learn-more split ---- */ .page-flush *{letter-spacing:0;} .page-flush .stat-strip{margin:0 0 64px; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none;} .page-flush .btn{border-radius:4px;} .page-flush .visit-copy h2{font-size:40px; line-height:1.12;} .page-flush .cta-banner{border-radius:0; background:var(--violet); box-shadow:none;} .page-flush .cta-banner::before{display:none;} .page-flush .cta-banner h2{color:#fff;} .page-flush .cta-banner .eyebrow-accent{color:var(--gold-light);} .page-flush .cta-banner p{color:rgba(255,255,255,.78);} .page-flush .cta-banner .btn-ghost{border-color:rgba(255,255,255,.72);color:#fff;background:transparent;} .page-flush .cta-banner .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff;} .page-flush .doctor-tile{border-radius:4px;} .page-flush .faq-grid{grid-template-columns:1fr; gap:0;} .page-flush .faq-card{background:transparent; border-width:0 0 1px; box-shadow:none; padding:22px 0;} .page-flush .faq-card summary{display:flex; justify-content:space-between; gap:18px;} @media(max-width:860px){ .visit-editorial{grid-template-columns:minmax(0,1fr);} .visit-copy{min-height:0;} .page-flush .signature-panel h2{font-size:38px;} } @media(max-width:640px){ .page-flush .visit-editorial{padding:24px 18px;} .page-flush .visit-copy h2{font-size:32px;} .visit-mosaic{min-height:300px;} .visit-mosaic .space-card:first-child{min-height:300px;} .signature-media{height:320px;} } /* ---- home: why-us / learn-more split ---- */ .home-split{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;} .split-text h2{font-size:clamp(1.5rem,2.5vw,2.05rem); line-height:1.16; margin-top:8px;} .split-text > p{margin-top:14px; color:var(--ink-soft); font-size:15px; line-height:1.75;} .lead-bullets{list-style:none; padding:0; margin:20px 0 26px; display:flex; flex-direction:column; gap:11px;} .lead-bullets li{position:relative; padding-left:30px; font-size:14px; color:var(--ink); line-height:1.5;} .lead-bullets li::before{content:"✓"; position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:50%; background:var(--violet-soft); color:var(--violet); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;} .split-media{position:relative;} .split-media img{width:100%; border-radius:20px; border:1px solid var(--line); box-shadow:var(--shadow); aspect-ratio:4/3; object-fit:cover;} .split-badge{position:absolute; left:20px; bottom:20px; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 30px -10px rgba(58,38,64,.35); padding:13px 17px;} .split-badge b{display:block; font-family:var(--font-display); font-weight:600; font-size:18px; color:var(--violet);} .split-badge span{font-size:11.5px; color:var(--ink-soft);} @media (max-width: 860px){ .signature-section{grid-template-columns:1fr;} .signature-media{min-height:320px;} .home-split{grid-template-columns:1fr; gap:30px;} .split-badge{left:16px; bottom:16px;} } @media (max-width: 560px){ } /* ================= ABOUT ================= */ .vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;} .vm-card{border-radius:16px; padding:28px; box-shadow:var(--shadow);} .vm-card.vision{ color:#fff; background: radial-gradient(340px circle at 90% -10%, rgba(255,255,255,.14), transparent 60%), var(--plum-surface); } .vm-card.vision .eyebrow{color:var(--gold-light);} .vm-card.vision p{color:rgba(255,255,255,.82);} .vm-card.mission{background:var(--surface); border:1px solid var(--line);} .vm-card p{margin-top:12px; font-size:14.5px; line-height:1.7;} .value-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;} .value-tile{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; text-align:center;} .value-tile .n{font-family:var(--font-display); font-size:26px; color:var(--violet);} .value-tile span{font-size:12px; color:var(--ink-soft); display:block; margin-top:6px;} .dept-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;} .dept-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; text-align:center; box-shadow:var(--shadow);} .dept-avatar{width:52px; height:52px; border-radius:50%; background:var(--violet-soft); color:var(--violet); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-family:var(--font-display); font-weight:600;} .dept-card h3{font-size:14.5px;} .dept-card p{margin-top:4px; font-size:12px;} /* ---- Doctors ---- */ .doctor-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:20px;} .doctor-card{display:flex; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow); text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;} .doctor-card:hover{transform:translateY(-3px); box-shadow:0 16px 36px -18px rgba(43,19,56,.34); border-color:var(--gold-light);} .doc-more{display:inline-block; margin-top:12px; font-size:12px; font-weight:600; color:var(--violet);} .doc-photo{width:104px; flex:0 0 104px; align-self:flex-start; border-radius:12px; overflow:hidden; background:var(--violet-soft); aspect-ratio:5/6;} .doc-photo img{width:100%; height:100%; object-fit:cover; object-position:top center;} .doc-photo-fallback{display:flex; align-items:center; justify-content:center; color:var(--violet); font-family:var(--font-display); font-weight:600; font-size:24px;} .doc-body{min-width:0;} .doc-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;} .doc-head h3{font-size:16px; line-height:1.25;} .doc-ar{font-size:13px; color:var(--ink-soft);} .doc-role{display:inline-block; margin-top:7px; font-size:11.5px; font-weight:600; color:var(--violet); background:var(--violet-soft); border-radius:100px; padding:3px 10px;} .doc-years{display:block; margin-top:8px; font-size:12px; color:var(--ink-soft);} .doc-creds{margin:10px 0 0; padding-left:16px; display:flex; flex-direction:column; gap:4px;} .doc-creds li{font-size:12.2px; color:var(--ink-soft); line-height:1.45;} /* home doctor tiles (bigger, clickable -> modal) */ .doctor-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:20px;} .doctor-tile{display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 16px 20px; box-shadow:var(--shadow); font:inherit; color:inherit; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;} .doctor-tile:hover{transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(43,19,56,.36); border-color:var(--gold-light);} .dt-photo{width:100%; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:var(--violet-soft); margin-bottom:13px;} .dt-photo img{width:100%; height:100%; object-fit:cover; object-position:top center;} .dt-photo-fallback{display:flex; align-items:center; justify-content:center; color:var(--violet); font-family:var(--font-display); font-weight:600; font-size:30px;} .dt-name{font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); line-height:1.25;} .dt-ar{font-size:12.5px; color:var(--ink-soft); margin-top:2px;} .dt-role{font-size:12px; color:var(--ink-soft); margin-top:6px; line-height:1.35;} .dt-years{margin-top:8px; font-size:11px; font-weight:600; color:var(--violet); background:var(--violet-soft); border-radius:100px; padding:2px 9px;} /* doctor modal */ .doctor-modal{position:relative; max-width:520px;} .doctor-modal-close{position:absolute; top:16px; right:16px;} .dm-top{display:flex; gap:18px; align-items:flex-start; padding-right:34px;} .dm-photo{width:118px; flex:0 0 118px; aspect-ratio:5/6; border-radius:14px; overflow:hidden; background:var(--violet-soft);} .dm-photo img{width:100%; height:100%; object-fit:cover; object-position:top center;} .dm-top h3{font-size:19px; line-height:1.2;} .dm-ar{font-size:14px; color:var(--ink-soft); margin-top:3px;} .dm-top .doc-role{margin-top:10px;} .dm-years{margin-top:8px; font-size:12.5px; color:var(--ink-soft);} .dm-creds{margin-top:20px; border-top:1px solid var(--line); padding-top:16px;} .dm-creds h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-family:var(--font-mono); font-weight:500; margin-bottom:10px;} .dm-creds ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px;} .dm-creds li{font-size:13px; color:var(--ink); line-height:1.5;} .doctor-modal .btn-primary{margin-top:20px; width:100%;} /* ---- Admin enquiries board ---- */ .enq-card{width:262px; flex:0 0 262px; border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:13px 14px;} .enq-top{display:flex; align-items:center; justify-content:space-between; gap:8px;} .enq-name{font-weight:600; font-size:13.5px;} .enq-chan{font-size:10px; font-weight:600; letter-spacing:.02em; padding:2px 7px; border-radius:100px; background:var(--surface-sunken); color:var(--ink-soft); white-space:nowrap;} .enq-chan.chan-instagramdm{background:#F4E9F5; color:#8A2E8F;} .enq-chan.chan-whatsapp{background:#E4F6EA; color:#1B8A46;} .enq-handle{font-size:11.5px; color:var(--ink-soft); margin-top:3px;} .enq-msg{font-size:12.3px; line-height:1.5; margin-top:8px; color:var(--ink);} .enq-actions{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;} /* ================= SERVICES DETAIL ================= */ .svc-detail{border:1px solid var(--line); border-radius:16px; background:var(--surface); box-shadow:var(--shadow); padding:28px 30px; margin-bottom:16px;} .svc-detail-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;} .svc-detail h3{font-size:20px; letter-spacing:-.01em;} .svc-detail .fee{font-family:var(--font-body); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--violet-deep); background:var(--violet-soft); padding:7px 14px; border-radius:999px; white-space:nowrap;} .tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;} .tag-row span{font-size:12px; font-weight:500; background:var(--violet-soft); border:1px solid transparent; padding:6px 12px; border-radius:100px; color:var(--violet-deep);} .protocol-strip{display:flex; flex-wrap:wrap; align-items:center; gap:9px 8px; margin-top:24px; padding-top:20px; border-top:1px solid var(--line);} .protocol-strip::before{content:"What your dentist provides"; flex-basis:100%; font-family:var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);} .protocol-strip span{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:12.5px; font-weight:500; color:var(--ink); background:var(--surface); border:1px solid var(--line); padding:6px 13px; border-radius:100px;} .protocol-strip span::before{content:"✓"; color:var(--ready); font-weight:700; font-size:11px;} /* ================= SHOP ================= */ .product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:40px;} .product-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow); overflow:hidden;} .product-media{margin:-20px -20px 4px; aspect-ratio:16/10; background:var(--surface-sunken); display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line);} .product-media img{width:100%; height:100%; object-fit:cover; display:block;} .product-media.is-placeholder{color:var(--violet); background: radial-gradient(120px circle at 30% 25%, color-mix(in srgb, var(--violet) 10%, transparent), transparent 70%), var(--surface-sunken);} .product-media.is-placeholder.ph-retail{background: radial-gradient(120px circle at 30% 25%, rgba(255,255,255,.5), transparent 70%), var(--violet-soft);} .product-media.is-placeholder svg{width:46px; height:46px;} .product-card .cat{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);} .product-card h3{font-size:16px;} .product-card p{color:var(--ink-soft); font-size:13px; flex:1;} .product-card .row{display:flex; justify-content:space-between; align-items:center; margin-top:6px;} .product-card .price{font-family:var(--font-display); font-size:18px; color:var(--violet);} .spec-list{list-style:none; padding:0; margin:2px 0 4px; display:flex; flex-direction:column; gap:5px;} .spec-list li{font-size:12px; color:var(--ink-soft); padding-left:14px; position:relative; line-height:1.45;} .spec-list li::before{content:""; position:absolute; left:2px; top:7px; width:4px; height:4px; border-radius:50%; background:var(--violet);} .spec-list li b{color:var(--ink); font-weight:600;} /* ---- admin: product management ---- */ /* Each product collapses to one compact row (thumb, name, badges, price, stock) and only opens its full edit form on click — instead of every product rendering its whole form at once, which made the page very long. */ .prod-admin-list{display:flex; flex-direction:column; gap:12px;} .prod-card{padding:0; overflow:hidden;} .prod-card.is-hidden{opacity:.72;} .prod-summary-row{display:flex; align-items:center; gap:10px; padding:14px 18px;} .prod-summary-toggle{flex:1; min-width:0; display:flex; align-items:center; gap:14px; text-align:left; background:none; border:0; padding:0; font:inherit; color:inherit; cursor:pointer;} .prod-summary-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; min-width:0;} .prod-summary-main b{font-size:14.5px; overflow-wrap:anywhere;} .prod-summary-badges{display:flex; gap:6px; flex-wrap:wrap;} .prod-summary-meta{font-size:12px; color:var(--ink-soft);} .prod-summary-chevron{flex-shrink:0; color:var(--ink-soft); transition:transform .18s var(--ease,ease); font-size:14px;} .prod-summary-toggle[aria-expanded=true] .prod-summary-chevron{transform:rotate(180deg);} .prod-details{padding:0 18px 20px; border-top:1px solid var(--line); margin-top:2px;} .prod-details .form-grid{padding-top:18px;} .prod-thumb{width:54px; height:54px; flex-shrink:0; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--surface-sunken); display:flex; align-items:center; justify-content:center; color:var(--violet);} .prod-thumb img{width:100%; height:100%; object-fit:cover; display:block;} .prod-thumb.is-placeholder.ph-retail{background:var(--violet-soft);} .prod-thumb svg{width:24px; height:24px;} .prod-card-actions.field{flex-direction:row; align-items:center; gap:10px; margin-top:4px;} .prod-card-actions .btn{flex:0 0 auto;} @media(max-width:640px){.prod-summary-row{flex-wrap:wrap;}.prod-summary-row>[data-quick-product-visibility]{margin-left:68px;}} .cart-backdrop{position:fixed; inset:0; background:rgba(34,26,43,.55); z-index:60; opacity:0; pointer-events:none; transition:opacity .18s;} .cart-backdrop.open{opacity:1; pointer-events:auto;} .cart-drawer{position:fixed; top:0; right:0; height:100%; width:400px; max-width:92vw; background:var(--surface); z-index:61; box-shadow:-16px 0 40px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column;} .cart-drawer.open{transform:translateX(0);} .cart-head{padding:20px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center;} .cart-body{flex:1; overflow-y:auto; padding:16px 22px; display:flex; flex-direction:column; gap:12px;} .cart-line{display:flex; justify-content:space-between; gap:10px; align-items:center; font-size:13.5px; border-bottom:1px solid var(--line); padding-bottom:12px;} .cart-line .qty{display:flex; align-items:center; gap:8px; margin-top:4px;} .cart-line .qty button{width:22px; height:22px; border-radius:6px; border:1px solid var(--line); background:var(--surface-sunken);} .cart-foot{padding:18px 22px; border-top:1px solid var(--line); background:var(--surface-sunken); display:flex; flex-direction:column; gap:12px;} .cart-foot .total{display:flex; justify-content:space-between; font-weight:700; font-size:16px;} .checkout-form{display:flex; flex-direction:column; gap:10px; padding:4px 22px 22px;} /* ================= CONTACT / CAREERS forms ================= */ .form-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; min-width:0;} .field{display:flex; flex-direction:column; gap:6px; min-width:0;} .field input,.field select,.field textarea{min-width:0; max-width:100%;} .field.full{grid-column:1/-1;} .field label{font-size:12.5px; font-weight:600; color:var(--ink-soft);} .field input, .field select, .field textarea{font-family:inherit; font-size:14px; padding:10px 12px; border-radius:9px; border:1px solid var(--line); background:var(--porcelain); color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease;} .field textarea{resize:vertical; min-height:90px;} .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); outline:none;} .field .hint{font-size:11.5px; color:var(--ink-soft); margin-top:1px;} /* A form broken into named sections instead of one long list — used by the job order intake wizard's "Doctor/Clinic, Job type, Case details…" grouping. */ .form-section{margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--line);} .form-section:last-child{border-bottom:none; margin-bottom:0; padding-bottom:0;} .form-section-head{display:flex; align-items:center; gap:10px; margin-bottom:16px;} .form-section-head .n{width:24px; height:24px; border-radius:50%; background:var(--violet-soft); color:var(--violet); font-family:var(--font-display); font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;} .form-section-head h4{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink);} .info-card{display:flex; flex-direction:column; gap:16px;} .info-row{display:flex; gap:12px; align-items:flex-start; font-size:13.5px;} .info-row .ic{width:34px; height:34px; border-radius:9px; background:var(--violet-soft); color:var(--violet); display:flex; align-items:center; justify-content:center; flex-shrink:0;} .social-row{display:flex; gap:10px; margin-top:6px; flex-wrap:wrap;} .social-row a{width:38px; height:38px; border-radius:10px; background:var(--surface-sunken); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink); transition:border-color .15s, color .15s, background .15s, transform .12s;} .social-row a:hover{border-color:var(--violet); color:var(--violet); transform:translateY(-2px);} .social-row a svg{display:block;} .contact-quick-msg{margin-top:6px; padding-top:16px; border-top:1px solid var(--line);} .contact-quick-msg summary{cursor:pointer; color:var(--violet); font-weight:700; font-size:13.5px; list-style:none;} .contact-quick-msg summary::-webkit-details-marker{display:none;} .job-card{border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); padding:20px; display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; flex-wrap:wrap;} .job-card h3{font-size:16px;} .job-card .type{font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;} .job-card p{color:var(--ink-soft); font-size:13px; margin-top:4px; max-width:56ch;} .modal-backdrop{position:fixed; inset:0; background:rgba(34,26,43,.55); z-index:70; display:flex; align-items:center; justify-content:center; padding:20px;} .modal{background:var(--surface); border-radius:16px; box-shadow:var(--shadow); max-width:480px; width:100%; padding:26px; max-height:88vh; overflow-y:auto;} .modal-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px;} /* ================= AUTH GATE (private portal login) ================= */ .login-gate{max-width:400px; margin:56px auto; background:var(--surface); border:1px solid var(--line); border-radius:4px; box-shadow:0 24px 60px -32px rgba(45,17,66,.28); padding:40px;} .login-gate .eyebrow-accent{color:var(--gold);} .login-gate h1{margin-top:10px; font-family:var(--font-accent); font-weight:500;} .login-gate .lede{margin-top:10px; margin-bottom:26px;} .login-gate .field label{font-size:12px;} .login-gate .btn-block{margin-top:6px;} @media(max-width:600px){ .login-gate{padding:24px; margin:24px auto;} .login-gate .form-grid{grid-template-columns:minmax(0,1fr);} } .link-btn{display:block; width:100%; margin:4px auto 0; background:none; border:0; padding:10px 0; color:var(--ink-soft); font-size:12.5px; text-align:center; cursor:pointer; border-top:1px solid var(--line); transition:color .15s ease;} .link-btn:hover{color:var(--violet);} /* ================= WIZARD (start a case) ================= */ .wizard{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden;} .wiz-head{padding:26px 30px 0;} .wiz-steps{display:flex; gap:0; margin:22px 0 0; padding:0 30px; border-bottom:1px solid var(--line);} .wiz-step{flex:1; text-align:center; padding-bottom:14px; border-bottom:2px solid transparent; font-size:12.5px; font-family:var(--font-mono); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;} .wiz-step.active{color:var(--violet); border-color:var(--violet); font-weight:500;} .wiz-step.done{color:var(--ready);} .wiz-body{padding:32px 30px;} .field-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;} .field-grid .full{grid-column:1/-1;} .wiz-group-label{grid-column:1/-1; margin-top:8px; padding-top:16px; border-top:1px solid var(--line); font-family:var(--font-mono); font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--violet);} .field-grid .wiz-group-label:first-child{margin-top:0; padding-top:0; border-top:none;} .wiz-foot{display:flex; justify-content:space-between; padding:20px 30px; border-top:1px solid var(--line); background:var(--surface-sunken);} /* ---- new case: live tooth diagram ---- */ .tooth-viz{grid-column:1/-1; display:flex; gap:22px; align-items:center; padding:18px 20px; border:1px solid var(--line); border-radius:14px; background:var(--surface-sunken);} .tooth-viz svg{flex-shrink:0; filter:drop-shadow(0 5px 12px rgba(58,38,64,.14));} .tooth-legend{font-size:12.5px; color:var(--ink-soft); display:flex; flex-direction:column; gap:7px; min-width:0;} .tooth-legend b{color:var(--ink); font-weight:600;} .tooth-legend .sw{display:inline-block; width:12px; height:12px; border-radius:3px; border:1px solid var(--line); margin-right:8px; vertical-align:-2px;} .tooth-cover{margin-top:5px; padding-top:9px; border-top:1px solid var(--line); color:var(--violet-deep); font-weight:600; line-height:1.45;} @media (max-width:620px){ .tooth-viz{flex-direction:column; align-items:flex-start;} } .svc-pick-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;} .svc-pick{border:1.5px solid var(--line); border-radius:12px; padding:16px; text-align:left; background:var(--porcelain);} .svc-pick.selected{border-color:var(--violet); background:var(--violet-soft);} .svc-pick .t{font-weight:600; font-size:14.5px;} .svc-pick .d{font-size:12px; color:var(--ink-soft); margin-top:4px;} .protocol-list{display:flex; flex-direction:column; gap:10px;} .protocol-item{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--porcelain);} .protocol-item.checked{border-color:var(--ready); background:var(--ready-soft);} .protocol-item .chk{width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; background:var(--surface);} .protocol-item.checked .chk{background:var(--ready); border-color:var(--ready); color:#fff;} .protocol-item .lbl{font-weight:600; font-size:14px; flex:1;} .protocol-item .up{font-size:12px; color:var(--violet); font-family:var(--font-mono);} .review-block{border:1px solid var(--line); border-radius:12px; padding:20px; background:var(--porcelain); margin-bottom:14px;} .review-row{display:flex; justify-content:space-between; padding:7px 0; font-size:13.5px; border-bottom:1px solid var(--line);} .review-row:last-child{border-bottom:none;} .review-row .k{color:var(--ink-soft);} .review-row .v{font-weight:600; text-align:right;} .confirm{text-align:center; padding:24px 20px 8px;} .confirm .check-mark{width:56px; height:56px; border-radius:50%; background:var(--ready-soft); color:var(--ready); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:26px;} .confirm .cid{font-family:var(--font-mono); font-size:20px; margin:6px 0 18px; color:var(--violet);} /* ================= TABLES (portal / studio / admin) ================= */ .cases-table{width:100%; border-collapse:collapse;} .cases-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-family:var(--font-mono); font-weight:500; padding:0 14px 10px; border-bottom:1px solid var(--line);} .cases-table td{padding:14px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle;} .cases-table tr:last-child td{border-bottom:none;} .cases-table tr.clickable:hover{background:var(--surface-sunken); cursor:pointer;} .table-wrap{overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);} .cid-cell{font-family:var(--font-mono); font-weight:600;} .progress-mini{display:flex; gap:3px; margin-top:6px;} .progress-mini i{width:14px; height:4px; border-radius:2px; background:var(--line); display:block;} .progress-mini i.done{background:var(--ready);} .progress-mini i.now{background:var(--violet);} .pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:100px; font-family:var(--font-mono);} .pill.st-reception, .pill.st-qc{background:var(--violet-soft); color:var(--violet);} .pill.st-designer, .pill.st-doctor_approval, .pill.st-cadcam, .pill.st-layering, .pill.st-qc_photo{background:var(--amber-soft); color:var(--amber);} .pill.st-ready, .pill.st-paid{background:var(--ready-soft); color:var(--ready);} .pill.st-unpaid{background:var(--amber-soft); color:var(--amber);} .pill.st-overdue{background:var(--critical-soft); color:var(--critical);} .pill.st-new{background:var(--amber-soft); color:var(--amber);} .pill.st-confirmed{background:var(--ready-soft); color:var(--ready);} .pill.st-contacted{background:var(--violet-soft); color:var(--violet);} .pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor;} .action-flag{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--amber); background:var(--amber-soft); padding:5px 10px; border-radius:100px; margin-left:8px;} .empty-note{color:var(--ink-soft); font-size:13.5px; padding:30px; text-align:center;} .dash-tabs{display:flex; gap:8px; margin-bottom:34px; border-bottom:1px solid var(--line);} .dash-tab{background:none; border:none; padding:12px 4px; margin-right:22px; font-weight:600; color:var(--ink-soft); border-bottom:2px solid transparent; font-size:14.5px;} .dash-tab.active{color:var(--ink); border-color:var(--violet);} /* ---- shared dashboard toolbar ---- */ .dash-toolbar, .lab-toolbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:18px;} .dash-toolbar input, .lab-toolbar input{font-family:inherit; font-size:13px; padding:9px 13px; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); min-width:220px; flex:0 1 300px;} .dash-toolbar input:focus, .lab-toolbar input:focus{border-color:var(--violet); box-shadow:0 0 0 3px var(--violet-soft); outline:none;} .lab-chips{display:flex; gap:7px; flex-wrap:wrap;} .lab-chip{font-size:12px; font-weight:600; padding:6px 12px; border-radius:100px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); transition:border-color .15s, color .15s, background .15s;} .lab-chip:hover{border-color:var(--violet); color:var(--violet);} .lab-chip.active{background:var(--violet); border-color:var(--violet); color:#fff;} /* ---- dentist portal: action panel ---- */ .review-panel{border:1px solid color-mix(in srgb, var(--amber) 40%, var(--line)); border-radius:14px; background:var(--amber-soft); padding:18px 20px; margin-bottom:22px;} .review-panel-head{margin-bottom:12px;} .review-item{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; padding:12px 0; border-top:1px solid color-mix(in srgb, var(--amber) 25%, transparent);} .review-item-actions{display:flex; gap:8px; flex-wrap:wrap;} /* ---- Lab Studio: vertical pipeline ---- */ .lab-legend{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--ink-soft); margin:0 0 26px;} .lab-legend span{display:flex; align-items:center; gap:6px;} .lab-legend i{width:9px; height:9px; border-radius:50%; display:inline-block;} .lab-pipeline{display:flex; flex-direction:column; gap:14px;} .lane{border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--shadow); overflow:hidden;} .lane.is-empty{opacity:.72;} .lane-head{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); background:var(--surface-sunken);} .lane-head .dot{width:9px; height:9px; border-radius:50%; flex-shrink:0;} .lane-head h3{font-size:12.5px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; font-weight:600;} .lane-head .cnt{margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:1px 9px;} .lane-cards{display:flex; flex-wrap:wrap; gap:10px; padding:14px 16px;} .lane-cards.lane-empty{color:var(--ink-soft); font-size:12.5px; padding:12px 16px;} .lane-cards .kcard{width:232px; flex:0 0 232px;} .board{display:grid; grid-auto-flow:column; grid-auto-columns:238px; gap:14px; overflow-x:auto; padding-bottom:18px;} .col{background:var(--surface-sunken); border-radius:14px; padding:12px; display:flex; flex-direction:column; min-height:200px;} .col-head{display:flex; justify-content:space-between; align-items:baseline; padding:4px 6px 12px;} .col-head h3{font-size:13px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.03em; font-weight:600;} .col-head .cnt{font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); background:var(--surface); border-radius:100px; padding:1px 8px;} .col-cards{display:flex; flex-direction:column; gap:10px;} .kcard{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:13px; text-align:left; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow); width:100%;} .kcard:hover{border-color:var(--violet);} .kcard .top{display:flex; justify-content:space-between; align-items:center;} .kcard .cid{font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--violet);} .kcard .svc{font-size:10.5px; font-family:var(--font-mono); text-transform:uppercase; color:var(--ink-soft);} .kcard .clinic{font-size:13px; font-weight:600; line-height:1.3;} .kcard .patient{font-size:11.5px; color:var(--ink-soft);} .kcard .kdesign{font-size:10.5px; font-family:var(--font-mono); color:var(--violet); background:var(--violet-soft); border-radius:6px; padding:3px 7px; align-self:flex-start;} .kcard .meta{display:flex; justify-content:space-between; align-items:center; margin-top:2px;} .kcard .tech{font-size:11px; color:var(--ink-soft); display:flex; align-items:center; gap:5px;} .kcard .shade{font-family:var(--font-mono); font-size:10.5px; background:var(--surface-sunken); padding:2px 7px; border-radius:100px;} .kcard .waiting{font-size:10.5px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.03em; color:var(--amber); background:var(--amber-soft); border-radius:6px; padding:3px 7px; align-self:flex-start;} .kcard .rev{font-size:10px; font-family:var(--font-mono); color:var(--critical); background:var(--critical-soft); border-radius:6px; padding:2px 6px;} /* ---- drawer (case detail) ---- */ .backdrop{position:fixed; inset:0; background:rgba(34,26,43,.55); z-index:50; opacity:0; pointer-events:none; transition:opacity .18s;} .backdrop.open{opacity:1; pointer-events:auto;} .drawer{position:fixed; top:0; right:0; height:100%; width:420px; max-width:92vw; background:var(--surface); z-index:51; box-shadow:-16px 0 40px rgba(0,0,0,.2); transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column;} .drawer.open{transform:translateX(0);} .drawer-head{padding:22px 24px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start;} .drawer-head .cid{font-family:var(--font-mono); color:var(--violet); font-size:13px;} .drawer-head h3{font-size:19px; margin-top:4px;} .drawer-close{background:var(--surface-sunken); border:none; width:30px; height:30px; border-radius:8px; font-size:15px; color:var(--ink-soft);} .drawer-body{padding:22px 24px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:24px;} .drawer-sec h4{font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-family:var(--font-mono); margin-bottom:10px; font-weight:500;} .kv{display:flex; justify-content:space-between; font-size:13.5px; padding:6px 0; border-bottom:1px solid var(--line);} .kv:last-child{border-bottom:none;} .kv .k{color:var(--ink-soft);} .kv .v{font-weight:600;} .proto-mini{display:flex; flex-wrap:wrap; gap:6px;} .proto-mini span{font-size:11.5px; padding:5px 9px; border-radius:100px; border:1px solid var(--line); color:var(--ink-soft);} .proto-mini span.yes{background:var(--ready-soft); border-color:transparent; color:var(--ready);} .timeline{display:flex; flex-direction:column; gap:0;} .tl-item{display:flex; gap:12px; position:relative; padding-bottom:18px;} .tl-item:last-child{padding-bottom:0;} .tl-item .dot{width:9px; height:9px; border-radius:50%; background:var(--violet); margin-top:5px; flex-shrink:0; position:relative; z-index:1;} .tl-item:not(:last-child)::before{content:''; position:absolute; left:4px; top:14px; bottom:0; width:1px; background:var(--line);} .tl-item .tt{font-weight:600; font-size:13.5px;} .tl-item .ts{font-size:11.5px; color:var(--ink-soft); font-family:var(--font-mono);} .tl-item .note{font-size:12.5px; color:var(--amber); margin-top:3px;} .drawer-actions{padding:18px 24px; border-top:1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap; background:var(--surface-sunken);} /* ================= DASHBOARD SHELL (Admin, and every lab role) ================= One shared sidebar+content layout for every operational dashboard. Plum lives here deliberately — sidebar/nav is exactly the "anchor," not a full-page wash — with the gold gradient reserved for the one active destination, so it reads as a premium selection rather than a loud one. */ .dash-shell{display:grid; grid-template-columns:230px 1fr; gap:28px; align-items:start;} .dash-sidebar{ display:flex; flex-direction:column; gap:2px; position:sticky; top:84px; background:var(--violet); border-radius:16px; padding:14px 10px; box-shadow:0 14px 34px -18px color-mix(in srgb, var(--violet) 60%, transparent); } .dash-nav-item{display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:10px; font-weight:600; font-size:13.5px; color:rgba(255,255,255,.66); text-align:left; background:none; border:none; width:100%; transition:background .15s ease, color .15s ease;} .dash-nav-item:hover{background:rgba(255,255,255,.08); color:#fff;} .dash-nav-item.active{background:var(--gold-gradient); color:var(--violet-deep); font-weight:700;} .dash-nav-item .badge{margin-left:auto; background:var(--critical); color:#fff; font-size:10px; font-family:var(--font-mono); border-radius:100px; padding:1px 7px; min-width:16px; text-align:center;} .dash-nav-item.active .badge{background:var(--violet); } .dash-main{min-width:0;} @media (max-width: 820px){ .dash-shell{grid-template-columns:1fr;} .dash-sidebar{flex-direction:row; overflow-x:auto; position:static; margin-bottom:22px; border-radius:14px;} .dash-nav-item{flex-shrink:0; width:auto; white-space:nowrap;} } .stat-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:36px;} .stat-tile{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow);} .stat-tile .lbl{font-size:11px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);} .stat-tile .val{font-family:var(--font-display); font-size:24px; margin-top:6px; font-variant-numeric:tabular-nums;} .stat-tile.pos .val{color:var(--ready);} .stat-tile.neg .val{color:var(--critical);} .bars{display:flex; align-items:flex-end; gap:22px; height:140px; padding:10px 6px 0;} .bar-col{display:flex; flex-direction:column; align-items:center; gap:8px; flex:1;} .bar-col .bar{width:100%; max-width:52px; border-radius:8px 8px 3px 3px; background:var(--violet);} .bar-col .bar.exp{background:var(--critical);} .bar-col .lbl{font-size:11px; color:var(--ink-soft); font-family:var(--font-mono);} .trend-card{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;} .trend-chart{flex:1; min-width:220px;} .team-mini{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);} .team-mini:last-child{border-bottom:none;} .team-mini .av{width:38px; height:38px; border-radius:50%; background:var(--violet-soft); color:var(--violet); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:13px; flex-shrink:0; overflow:hidden;} .team-mini .av img{width:100%; height:100%; object-fit:cover; object-position:top center;} .team-form{display:grid; grid-template-columns:1fr 1fr auto; gap:10px; margin-bottom:18px;} .expense-form{display:grid; grid-template-columns:1fr 2fr 1fr auto; gap:10px; margin-bottom:18px;} .list-plain{display:flex; flex-direction:column; gap:0;} .list-row{display:flex; justify-content:space-between; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); font-size:13.5px;} .list-row:last-child{border-bottom:none;} .list-row .t{font-weight:600;} .list-row .s{color:var(--ink-soft); font-size:12px;} /* ---- admin: website messages (inquiries via the contact form) ---- */ .msg-list{display:flex; flex-direction:column; gap:10px;} .msg-card{padding:0; overflow:hidden;} .msg-summary{display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; list-style:none;} .msg-summary::-webkit-details-marker{display:none;} .msg-dot{flex-shrink:0; width:8px; height:8px; border-radius:50%; background:transparent;} .msg-card.is-unread .msg-dot{background:var(--critical);} .msg-card.is-unread .msg-summary-main b{font-weight:800;} .msg-summary-main{flex:1; min-width:0; display:flex; align-items:baseline; gap:10px;} .msg-summary-main b{font-size:13.5px; flex-shrink:0;} .msg-summary-preview{color:var(--ink-soft); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;} .msg-summary time{flex-shrink:0; font-size:11px; color:var(--ink-soft);} .msg-body{padding:0 18px 18px; border-top:1px solid var(--line);} .msg-full{margin:16px 0 10px; line-height:1.6; white-space:pre-wrap;} .msg-meta{font-size:12px; color:var(--ink-soft); margin-bottom:14px;} .msg-actions{display:flex; gap:10px; flex-wrap:wrap;} @media(max-width:640px){.msg-summary-preview{display:none;}} /* ---- admin: dentist directory ---- */ .dentist-list{display:flex; flex-direction:column; gap:10px;} .dentist-card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap;} .dentist-card-top b{font-size:14.5px;} .dentist-company{margin-top:3px; font-size:12.5px; color:var(--ink-soft);} .dentist-cases{text-align:right; flex-shrink:0;} .dentist-cases b{display:block; font-family:var(--font-display); font-size:18px; line-height:1.2;} .dentist-cases span{font-size:11px; color:var(--ink-soft); white-space:nowrap;} .dentist-card-contact{display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:12.5px; color:var(--ink-soft);} .dentist-card-contact span{display:inline-flex; align-items:center; gap:6px;} .dentist-card-contact .ws-icon{color:var(--ink-soft); flex-shrink:0;} .dentist-card-foot{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px; padding-top:12px; border-top:1px solid var(--line);} .dentist-card-foot time{font-size:11.5px; color:var(--ink-soft);} @media(max-width:640px){.dentist-cases{text-align:left;}} /* ================= FOOTER ================= */ .site-footer{position:relative; background:var(--plum-surface); color:rgba(255,255,255,.86); margin-top:80px; content-visibility:auto; contain-intrinsic-size:auto 420px;} .site-footer::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold-gradient);} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px; padding:52px 0 30px;} .site-footer h4{color:#fff; font-size:13px; text-transform:uppercase; letter-spacing:.05em; font-family:var(--font-mono); font-weight:500; margin-bottom:14px;} .site-footer a{color:rgba(255,255,255,.75); font-size:13.5px; display:block; margin-bottom:9px;} .site-footer a:hover{color:#fff;} .footer-brand{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:600; font-size:18px; color:#fff; margin-bottom:12px;} .footer-brand .brand-mark{background:rgba(255,255,255,.12);} .site-footer .about-copy{font-size:13px; color:rgba(255,255,255,.65); max-width:34ch; line-height:1.7;} .site-footer .social-row{gap:8px; margin-top:18px;} .site-footer .social-row a{width:34px; height:34px; border-radius:9px; margin-bottom:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.92);} .site-footer .social-row a svg{width:15px; height:15px;} .site-footer .social-row a:hover{background:#fff; border-color:#fff; color:var(--plum-surface); transform:translateY(-2px);} .footer-bottom{border-top:1px solid rgba(255,255,255,.14); padding:18px 0; font-size:12px; color:rgba(255,255,255,.55); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;} /* ================= TOAST ================= */ .toast-host{position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center;} .toast{background:var(--ink); color:var(--porcelain); padding:11px 18px; border-radius:100px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow); animation:toast-in .2s ease;} @keyframes toast-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}} /* ================= WHATSAPP FAB ================= */ .whatsapp-fab{position:fixed; right:22px; bottom:22px; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; z-index:45; transition:transform .18s ease, box-shadow .18s ease; box-shadow:0 8px 22px -6px rgba(0,0,0,.35);} .whatsapp-fab svg{display:block; margin-left:1px;} .whatsapp-fab:hover{transform:scale(1.08); box-shadow:0 10px 26px -6px rgba(0,0,0,.4), 0 0 26px 6px rgba(37,211,102,.7);} /* The halo is a separate layer animated with transform and opacity only, so it runs on the compositor. Animating box-shadow repainted every public page on every frame, indefinitely (360 paints per 3 s while idle). */ .whatsapp-fab::before{content:''; position:absolute; inset:0; border-radius:50%; background:rgba(37,211,102,.55); filter:blur(6px); z-index:-1; pointer-events:none; animation:wa-glow 2.4s ease-in-out infinite; will-change:transform,opacity;} @keyframes wa-glow{ 0% {transform:scale(1); opacity:.9;} 70% {transform:scale(1.6); opacity:0;} 100% {transform:scale(1.6); opacity:0;} } @media (prefers-reduced-motion: reduce){ .whatsapp-fab::before{animation:none; opacity:.35; transform:scale(1.15);} } @media (max-width: 980px){ .grid-3, .services-grid, .product-grid, .value-row, .dept-grid, .stat-grid{grid-template-columns:repeat(2,1fr);} .doctor-grid{grid-template-columns:1fr;} .doctor-tiles, .visit-grid{grid-template-columns:repeat(2,1fr);} .footer-grid{grid-template-columns:1fr 1fr;} } @media (max-width: 720px){ .u{padding:0 18px;} .grid-2, .vm-grid, .space-grid, .form-grid{grid-template-columns:1fr;} .grid-3, .services-grid, .product-grid, .value-row, .dept-grid, .stat-grid{grid-template-columns:1fr;} .doctor-tiles, .visit-grid{grid-template-columns:repeat(2,1fr);} /* Job-type / option pickers carry an inline 3-col style — override it so the choices don't get clipped off the right edge of a phone. */ .svc-pick-grid{grid-template-columns:repeat(2,1fr) !important;} .wiz-steps{overflow-x:auto; -webkit-overflow-scrolling:touch;} .field-grid,.field-grid.two{grid-template-columns:1fr;} .doctor-card{flex-direction:column;} .doc-photo{width:120px; flex-basis:120px;} .dm-top{flex-direction:column;} .hero-site .content{padding:34px 24px;} .hero-mark{display:none;} .footer-grid{grid-template-columns:1fr; padding-bottom:10px;} .expense-form, .team-form{grid-template-columns:1fr;} .cta-banner{padding:32px 22px;} .topbar-inner{padding:11px 14px; gap:6px;} .brand{font-size:14.5px; gap:7px; white-space:nowrap;} .brand-mark{width:26px; height:26px;} .brand-logo{height:46px; width:46px;} .topbar-actions{gap:6px;} .icon-btn{width:32px; height:32px;} .nav-toggle{font-size:17px;} } /* ================= SEMANTIC STATUS TONES ================= Four muted, brand-compatible tones instead of a status-by-status color list — the lab workflow's ~19 statuses all reduce to "not started yet / in progress / done / needs attention," and every new pill just picks one of these four rather than inventing a new hue per status. */ .pill-neutral{background:var(--violet-soft); color:var(--violet);} .pill-progress{background:var(--amber-soft); color:var(--amber);} .pill-success{background:var(--ready-soft); color:var(--ready);} .pill-danger{background:var(--critical-soft); color:var(--critical);} /* ================= STAGE TRACKER ================= The one shared "beautiful progress tracker" component — used on every case detail view. Plain job: pass one array of steps. Veneer: pass two labelled groups (Demo, Final) via .stage-tracker.two-part, so the two linked stages read as one continuous case, not two unrelated boards. */ .stage-tracker{display:flex; flex-direction:column; gap:18px;} .st-group-label{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--gold);} .st-group-label::after{content:""; flex:1; height:1px; background:var(--gold-gradient); opacity:.5;} .st-row{display:flex; align-items:flex-start;} .st-step{display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; min-width:0; position:relative;} .st-step .st-dot{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--surface); border:2px solid var(--line); color:var(--ink-soft); font-family:var(--font-display); font-weight:700; font-size:12px; flex-shrink:0; z-index:1; transition:background .2s ease, border-color .2s ease, color .2s ease; } .st-step .st-label{font-size:11.5px; font-weight:600; color:var(--ink-soft); text-align:center; line-height:1.3; padding:0 4px;} .st-step::before{ content:""; position:absolute; top:14px; left:calc(-50% + 15px); width:calc(100% - 30px); height:2px; background:var(--line); z-index:0; } .st-step:first-child::before{display:none;} .st-step.done .st-dot{background:var(--gold-gradient); border-color:transparent; color:var(--violet-deep);} .st-step.done::before{background:var(--gold-gradient);} .st-step.now .st-dot{background:var(--violet); border-color:var(--violet); color:#fff; box-shadow:0 0 0 5px var(--violet-soft);} .st-step.now .st-label{color:var(--violet); font-weight:700;} .st-step.rejected .st-dot{background:var(--critical-soft); border-color:var(--critical); color:var(--critical);} .st-step.rejected .st-label{color:var(--critical);} @media (max-width:640px){ .st-step .st-label{display:none;} .st-step .st-dot{width:24px; height:24px; font-size:10px;} .st-step::before{top:11px;} } /* ================= CASE CHAT ================= Case-scoped messaging (doctor <-> designer today, open to other roles at the UI level) — kept deliberately plain: bubbles, timestamps, one input. Nothing chat apps don't already teach people to read at a glance. */ .chat-thread{display:flex; flex-direction:column; gap:14px; padding:18px; max-height:420px; overflow-y:auto; background:var(--porcelain); border:1px solid var(--line); border-radius:14px;} .chat-msg{display:flex; flex-direction:column; max-width:78%; gap:4px;} .chat-msg.mine{align-self:flex-end; align-items:flex-end;} .chat-bubble{padding:10px 14px; border-radius:14px; font-size:13.5px; line-height:1.5; background:var(--surface); border:1px solid var(--line); color:var(--ink);} .chat-msg.mine .chat-bubble{background:var(--violet); border-color:var(--violet); color:#fff; border-bottom-right-radius:4px;} .chat-msg:not(.mine) .chat-bubble{border-bottom-left-radius:4px;} .chat-meta{font-size:10.5px; color:var(--ink-soft); font-family:var(--font-mono); padding:0 4px;} .chat-empty{color:var(--ink-soft); font-size:13px; text-align:center; padding:30px 10px;} .chat-input-row{display:flex; gap:10px; margin-top:12px;} .chat-input-row input{flex:1;} /* ================= FILE UPLOAD ZONE ================= */ .upload-zone{ border:1.5px dashed var(--line); border-radius:14px; padding:26px 20px; text-align:center; background:var(--porcelain); transition:border-color .15s ease, background .15s ease; cursor:pointer; } .upload-zone:hover, .upload-zone.drag-over{border-color:var(--gold); background:var(--gold-soft);} .upload-zone .ic{width:40px; height:40px; border-radius:12px; background:var(--violet-soft); color:var(--violet); display:flex; align-items:center; justify-content:center; margin:0 auto 12px;} .upload-zone .t{font-weight:600; font-size:13.5px;} .upload-zone .d{font-size:12px; color:var(--ink-soft); margin-top:4px;} .upload-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin-top:14px;} .upload-thumb{position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden; border:1px solid var(--line); background:var(--surface-sunken);} .upload-thumb img{width:100%; height:100%; object-fit:cover;} .upload-thumb .cat{position:absolute; left:5px; bottom:5px; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; background:rgba(34,26,43,.72); color:#fff; padding:2px 6px; border-radius:100px;} /* ================= QC CHECKLIST ================= */ .qc-checklist{display:flex; flex-direction:column; gap:8px;} .qc-item{display:flex; align-items:center; gap:12px; padding:13px 15px; border:1px solid var(--line); border-radius:11px; background:var(--surface); cursor:pointer; transition:border-color .15s ease;} .qc-item:hover{border-color:var(--gold-light);} .qc-item .qc-chk{width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:12px; background:var(--porcelain);} .qc-item.checked{border-color:color-mix(in srgb, var(--ready) 40%, var(--line));} .qc-item.checked .qc-chk{background:var(--gold-gradient); border-color:transparent; color:var(--violet-deep);} .qc-item .lbl{font-weight:600; font-size:13.5px; flex:1;} /* ================= DASHBOARD PAGE-HEAD / WELCOME ================= */ /* A softer, warmer variant of .page-head for the doctor dashboard's landing moment — a small cream card instead of bare text, so "welcoming and easy" has an actual visual shape instead of just a friendlier sentence. */ .welcome-card{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:linear-gradient(135deg, var(--gold-soft) 0%, var(--surface) 60%); border:1px solid var(--line); border-radius:18px; padding:26px 28px; margin-bottom:32px; } .welcome-card h1{margin-top:6px;} .stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:28px;} .stat-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow);} .stat-card .n{font-family:var(--font-display); font-size:26px; font-weight:600; font-variant-numeric:tabular-nums;} .stat-card .l{font-size:12px; color:var(--ink-soft); margin-top:4px; font-weight:600;} .stat-card.tone-gold{border-color:color-mix(in srgb, var(--gold) 35%, var(--line));} .stat-card.tone-gold .n{color:var(--gold);} .stat-card.tone-danger .n{color:var(--critical);} @media (max-width:820px){ .stat-row{grid-template-columns:1fr 1fr;} } /* ================= PREMIUM CASE CARD ================= */ /* Shared by every role dashboard's queue — one consistent, readable case card instead of each dashboard inventing its own. */ .case-card{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px 18px; box-shadow:var(--shadow); transition:border-color .15s ease, transform .12s ease;} .case-card:hover{border-color:var(--gold-light); transform:translateY(-2px);} /* The dentist portal's case card is a real