/* ============================================================ Klinik Pergigian Luna, Miharja — Main Stylesheet "Nothing Hidden" identity: warm off-white ground, confident red, a certificate/registration motif for credentials, an oversized low-contrast tooth watermark drawn from the clinic's own mark. ============================================================ */ /* ---------- Design tokens ---------- */ :root { /* Palette */ --ground: #FAF7F4; --ground-raised: #F1E6D6; --brand: #C8392F; --brand-dark: #8E2B24; --brand-tint: #F4E2DF; --ink: #241F1D; --support: #6E635E; /* was #9C9089 (3.10:1 on white — AA fail). First fix (#786D62) only checked against white; --text-light is also used against var(--bg-light), which now resolves to --surface-warm and failed at 4.09:1. #635A50 clears white/ground/warm/blush (5.48-6.75:1) — verified against every surface it can land on. Fixed 2026-07-20. */ --support-light: #635A50; --line: #E4D9D0; --white: #FFFFFF; /* Surface system — background as an information device, not decoration. Intermediate tones between --ground (lightest) and --ink (heaviest), all derived from the brand red/maroon hue family except --surface-warm (a genuinely different, neutral-warm hue for real chromatic variety). --surface-ink is reserved specifically for credential/registration authority moments (homepage credentials strip, the About page's doctor section, the footer) so it reads as a consistent "verified" signal site-wide, not just a dark accent. Every pairing below is contrast- checked in scripts/_contrast.js before use — see COLOR_AUDIT notes. */ --surface-ground: #FAF7F4; /* lightest — plain, "honest document" */ --surface-warm: #F1E6D6; /* light-medium neutral-warm (sand) */ --surface-blush: #F6E4DC; /* light-medium, soft red-tinted */ --surface-rose: #9C4C43; /* medium color block, muted brand-red family — needs light text */ --surface-ink: #241F1D; /* heaviest — credential/registration authority only */ /* Semantic aliases used across the file */ --primary-color: var(--brand); --primary-dark: var(--brand-dark); --primary-light: #DE6157; --secondary-color: var(--brand-dark); --accent-color: #E8B84B; --success-color: #4C7A5E; --warning-color: #C68A2E; --danger-color: #B3261E; --text-dark: var(--ink); --text-medium: var(--support); --text-light: var(--support-light); --text-white: var(--white); --bg-white: var(--white); --bg-light: var(--ground-raised); --bg-gray: var(--line); --bg-dark: var(--ink); --border-color: var(--line); --border-radius: 10px; --border-radius-lg: 18px; --border-radius-xl: 26px; --shadow-sm: 0 1px 2px 0 rgba(36, 31, 29, 0.06); --shadow-md: 0 6px 16px -4px rgba(36, 31, 29, 0.14); --shadow-lg: 0 16px 36px -8px rgba(36, 31, 29, 0.18); --shadow-xl: 0 28px 56px -12px rgba(36, 31, 29, 0.22); --transition: all 0.25s ease; --transition-fast: all 0.15s ease; /* Typography — populated by next/font on ; fallbacks are close analogues so the page never renders in a system default while loading. Fraunces = display/headings, Work Sans = body/UI, IBM Plex Mono = data (prices, registration numbers). */ --font-display: var(--font-display, 'Fraunces', Georgia, 'Times New Roman', serif); --font-body: var(--font-body, 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); --font-data: var(--font-data, 'IBM Plex Mono', 'Courier New', monospace); --font-family: var(--font-body); } /* ---------- Reset & base ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--text-dark); background-color: var(--ground); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } /* --brand (#C8392F) as default link text only reaches 4.17-4.39:1 on the site's light-tinted surfaces — fails AA (needs 4.5:1). --brand-dark passes everywhere it's used (6.75-8.33:1), same hue family, no visual identity loss. Found via live audit on services.html sidebar links against --surface-warm; fixed 2026-07-20, see COLOR_AUDIT. --brand itself is unaffected and still used for buttons/accents where it already passes (verified: white-on-brand 5.14:1). */ a { color: var(--brand-dark); text-decoration: none; transition: var(--transition-fast); } a:hover { color: #6E211B; } ul { list-style: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-dark); } /* Visible keyboard focus everywhere — no invisible-focus regressions */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------- Layout ---------- */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .section { padding: 5.5rem 0; position: relative; background: var(--surface-ground); } /* No blind nth-child alternation — every section below sets its own surface deliberately (see COLOR_AUDIT). A position-based rule here would silently outrank a single-class background rule by specificity and flip colors based on sibling order rather than design intent — exactly the fragile pattern that produced a real, confirmed contrast bug (why-us inheriting a light background by even/odd position, leaving white headings unreadable). Fixed 2026-07-20; do not reintroduce. */ /* Tooth watermark — the clinic's own mark (see public/favicon.svg), rendered oversized and low-contrast behind section headings. Restrained and atmospheric, not decorative clutter. */ .section-header { text-align: center; max-width: 700px; margin: 0 auto 3rem; position: relative; isolation: isolate; } .section-header::before { content: ''; position: absolute; top: 50%; left: 50%; width: 340px; height: 340px; transform: translate(-50%, -55%); z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 15C35 15 25 28 25 40C25 48 27 58 30 70C33 82 40 85 50 85C60 85 67 82 70 70C73 58 75 48 75 40C75 28 65 15 50 15Z' fill='%23C8392F'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; opacity: 0.05; } /* ============================================================ Authored SVG artwork layer (added 2026-07-20) Extends the single tooth-watermark motif above into three restrained, non-photographic devices: (1) a larger asymmetric "tooth constellation" ambient composition — the same brand path, stroke-only, at two scales — for the site's full-bleed colour-block moments; (2) a near-invisible repeating dot texture for the warm sand surface; (3) an extension of the credentials-strip's own perforated-stub top edge to two more colour-band transitions, using the exact same recipe so it reads as one consistent seam treatment threaded through the page rather than a one-off graphic. All pure line-art/geometry — nothing photographic, nothing figurative, nothing in the stripped mascot/confetti/sparkle motion family. ============================================================ */ /* --- Tooth constellation: stroke-only pair (echoes, doesn't repeat, the filled centred watermark above) anchored to a far corner of the two full-bleed colour-block sections outside the credentials strip. White stroke reads correctly on both --surface-rose and --surface-ink since both sections carry white text already. isolation:isolate mirrors the .section-header technique above so the z-index:-1 layer sits behind the section's own text but above its flat background. */ .why-us, .doctor-section, .about-header { isolation: isolate; } .why-us::after, .doctor-section::after { content: ''; position: absolute; right: 0; bottom: 0; width: 300px; height: 260px; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(6,4) scale(1.32) rotate(-7 50 50)'%3E%3Cpath d='M50 15C35 15 25 28 25 40C25 48 27 58 30 70C33 82 40 85 50 85C60 85 67 82 70 70C73 58 75 48 75 40C75 28 65 15 50 15Z'/%3E%3Cpath d='M42 75L40 85M58 75L60 85'/%3E%3C/g%3E%3Cg transform='translate(150,100) scale(0.6) rotate(11 50 50)'%3E%3Cpath d='M50 15C35 15 25 28 25 40C25 48 27 58 30 70C33 82 40 85 50 85C60 85 67 82 70 70C73 58 75 48 75 40C75 28 65 15 50 15Z'/%3E%3Cpath d='M42 75L40 85M58 75L60 85'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: bottom right; opacity: 0.07; } /* Larger variant for the About page header, which lost a stock photo of an uncredited person (see about/page.tsx edit note) — this fills the same visual role (texture behind the page

) without ever implying a photograph of clinic staff. / .about-header::after { content: ''; position: absolute; top: -20px; right: -30px; width: 460px; height: 380px; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(6,4) scale(1.32) rotate(-7 50 50)'%3E%3Cpath d='M50 15C35 15 25 28 25 40C25 48 27 58 30 70C33 82 40 85 50 85C60 85 67 82 70 70C73 58 75 48 75 40C75 28 65 15 50 15Z'/%3E%3Cpath d='M42 75L40 85M58 75L60 85'/%3E%3C/g%3E%3Cg transform='translate(150,100) scale(0.6) rotate(11 50 50)'%3E%3Cpath d='M50 15C35 15 25 28 25 40C25 48 27 58 30 70C33 82 40 85 50 85C60 85 67 82 70 70C73 58 75 48 75 40C75 28 65 15 50 15Z'/%3E%3Cpath d='M42 75L40 85M58 75L60 85'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: top right; opacity: 0.06; } / --- Repeating geometric texture: a near-invisible dot grid on the warm sand surface, shared by two pages (homepage about-preview, services grid on both /services and the About page's own facilities reuse of .services). Texture, not decoration — fill-opacity is baked low in the SVG itself and the element opacity dims it further. / .about-preview, .services { isolation: isolate; } .about-preview::after, .services::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%238E2B24' fill-opacity='0.55'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 26px 26px; opacity: 0.16; } / --- Perforated-stub edge, extended: the exact recipe already used at the top of .credentials-strip, reused verbatim at two more colour-band seams so the certificate/ticket-stub language reads as one continuous system rather than a single isolated graphic. / .why-us::before, .doctor-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background-image: radial-gradient(circle, var(--ground) 2px, transparent 2.5px); background-size: 18px 3px; background-repeat: repeat-x; background-position: center; pointer-events: none; } .section-tag { display: inline-block; background: var(--brand-dark); color: var(--white); font-family: var(--font-data); font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; padding: 0.5rem 1.1rem; border-radius: 3px; margin-bottom: 1.1rem; } .section-header h2 { font-size: 2.5rem; margin-bottom: 0.85rem; } .section-header p { color: var(--text-medium); font-size: 1.1rem; } .highlight { color: var(--brand); font-style: italic; font-weight: 600; } / ---------- Buttons ---------- / .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.8rem 1.6rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; border-radius: 8px; border: 1.5px solid transparent; cursor: pointer; transition: var(--transition); text-decoration: none; } .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; } .btn-lg { padding: 1rem 2rem; font-size: 1.02rem; } .btn-block { width: 100%; } .btn-primary { background: var(--brand); color: var(--white); border-color: var(--brand); } .btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); } / --brand text on .btn-outline measured 1.59:1 on the hero photo and 4.17:1 on --surface-warm (gallery social links) via real pixel sampling — both fail AA. --brand-dark is the established sitewide fix for this exact bug class (see the `a` rule note above: same 4.17-4.39:1 failure, same fix). Border stays --brand (not text — WCAG text-contrast rules don't apply to decorative borders). Hero gets an explicit white override below, matching the hero h1 precedent, since --brand-dark is too dark to read against a dark photo. Found + fixed 2026-07-20. / .btn-outline { background: transparent; color: var(--brand-dark); border-color: var(--brand); } .btn-outline:hover { background: var(--brand); color: var(--white); } .hero .btn-outline { color: var(--white); border-color: var(--white); } .hero .btn-outline:hover { background: var(--white); color: var(--brand-dark); border-color: var(--white); } .btn-white { background: var(--white); color: var(--brand-dark); border-color: var(--white); } .btn-white:hover { background: var(--ground-raised); color: var(--brand-dark); } / WhatsApp-brand-green text buttons. The literal WhatsApp brand green (#25D366) is 1.98:1 with white text — fails AA badly. Even the old hover shade (#128C7E) only reaches 4.14:1. #0F7A6B is the same teal-green family (recognizably "WhatsApp"), 5.23:1 with white — confirmed via scripts/_contrast.js. Fixed 2026-07-20 (pre-existing since the prior redesign pass, caught by this audit — not part of the reorder/surface work but reported and fixed per instruction). The icon-only floating WhatsApp button and small brand-mark icons are unaffected (icons aren't text; left as the recognizable brand color). / .btn-outline-white { background: #0F7A6B; color: #ffffff; border: 1.5px solid #0F7A6B; font-weight: 600; } .btn-outline-white:hover { background: #0B6355; border-color: #0B6355; color: #fff; transform: translateY(-2px); } / ---------- Navigation ---------- / .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--ink); box-shadow: var(--shadow-sm); transition: var(--transition); } .navbar .container { display: flex; align-items: center; justify-content: center; gap: 2rem; height: 80px; } .logo { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: white; } .logo img { width: 38px; height: 38px; border-radius: 50%; object-fit: contain; background: rgba(255,255,255,0.9); flex-shrink: 0; } .logo .logo-text { display: flex; flex-direction: column; line-height: 1.2; } .logo .logo-text .logo-main { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; } .logo .logo-text .logo-branch { font-size: 0.68rem; color: rgba(255,255,255,0.75); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .logo strong { color: white; } .nav-menu { display: flex; align-items: center; gap: 0.35rem; } .nav-menu li a { display: block; padding: 0.6rem 0.95rem; color: rgba(255,255,255,0.85); font-weight: 500; font-size: 0.92rem; border-radius: 6px; transition: var(--transition-fast); } .nav-menu li a:hover, .nav-menu li a.active { color: white; background: rgba(255,255,255,0.12); } .nav-dropdown { position: relative; } .nav-dropdown .dropdown-toggle { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; padding: 0.6rem 0.95rem; color: rgba(255,255,255,0.85); font-weight: 500; font-size: 0.92rem; border-radius: 6px; transition: var(--transition-fast); background: transparent; border: none; } .nav-dropdown .dropdown-toggle:hover { color: white; background: rgba(255,255,255,0.12); } .nav-dropdown .dropdown-toggle svg { transition: transform 0.25s ease; opacity: 0.7; } .nav-dropdown .dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: white; border-radius: 12px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 1000; padding: 0.4rem; border: 1px solid var(--line); overflow: hidden; } .nav-dropdown.active .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown.active .dropdown-toggle svg { transform: rotate(180deg); } .nav-dropdown .dropdown-menu li a { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; color: var(--text-medium); font-weight: 500; font-size: 0.86rem; border-radius: 8px; background: transparent; margin: 1px 0; } .nav-dropdown .dropdown-menu li a:hover, .nav-dropdown .dropdown-menu li a.active { background: var(--brand-tint); color: var(--brand-dark); } .nav-dropdown .dropdown-menu li a svg { flex-shrink: 0; color: var(--brand); } .nav-booking-btn { display: inline-flex !important; align-items: center; gap: 0.5rem; padding: 0.6rem 1.15rem !important; background: #0F7A6B !important; color: #ffffff !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 0.85rem; transition: var(--transition-fast); white-space: nowrap; } .nav-booking-btn:hover { background: #0B6355 !important; color: #fff !important; transform: translateY(-1px); } .navbar .nav-booking-btn, .nav-menu .nav-booking-btn { background: #0F7A6B !important; color: #fff !important; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 0.5rem; } .nav-toggle span { display: block; width: 24px; height: 2px; background: white; border-radius: 2px; transition: var(--transition); } / ---------- Hero ---------- / / Rebuilt 2026-07-20: the old hero background photo (stock — European two-pin sockets, editorial styling, implied these were the clinic's own premises) was removed. .hero now runs on its own flat var(--ink) background with .hero-overlay's existing diagonal ink-to-brand-dark gradient layered on top (previously only used to tint a photo; here it IS the visual, exactly the "layered ink→dark-surface gradient" the sibling Shiny site used for its own stock-photo replacement). isolation:isolate + the two pseudo-elements below extend the clinic's own tooth-mark — already used as a low-contrast watermark behind every .section-header and as a stroke-pair "constellation" on .why-us/.doctor-section — scaled up here so it reads as real structure behind the hero rather than a corner accent, matching the sibling site's ring-motif treatment in principle without borrowing its unrelated ring device. / .hero { position: relative; min-height: 92vh; display: flex; align-items: center; background: var(--ink); padding-top: 80px; overflow: hidden; isolation: isolate; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(36,31,29,0.65) 0%, rgba(142,43,36,0.55) 100%); } / Large filled tooth silhouette, low-contrast, anchored off the right edge — the "real structure" layer. Same filled path as .section-header::before, scaled far beyond that watermark's 340px since the hero is the page's flagship moment. / .hero::before { content: ''; position: absolute; top: 50%; right: -8%; width: 780px; height: 780px; transform: translateY(-52%); z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 15C35 15 25 28 25 40C25 48 27 58 30 70C33 82 40 85 50 85C60 85 67 82 70 70C73 58 75 48 75 40C75 28 65 15 50 15Z' fill='%23FFFFFF'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; opacity: 0.05; } / Stroke-only constellation pair, same recipe (and same SVG) as .why-us::after / .doctor-section::after, anchored bottom-left where the hero text never reaches. / .hero::after { content: ''; position: absolute; bottom: -50px; left: -70px; width: 460px; height: 380px; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(6,4) scale(1.32) rotate(-7 50 50)'%3E%3Cpath d='M50 15C35 15 25 28 25 40C25 48 27 58 30 70C33 82 40 85 50 85C60 85 67 82 70 70C73 58 75 48 75 40C75 28 65 15 50 15Z'/%3E%3Cpath d='M42 75L40 85M58 75L60 85'/%3E%3C/g%3E%3Cg transform='translate(150,100) scale(0.6) rotate(11 50 50)'%3E%3Cpath d='M50 15C35 15 25 28 25 40C25 48 27 58 30 70C33 82 40 85 50 85C60 85 67 82 70 70C73 58 75 48 75 40C75 28 65 15 50 15Z'/%3E%3Cpath d='M42 75L40 85M58 75L60 85'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: bottom left; opacity: 0.09; } .hero .container { position: relative; z-index: 1; } .hero-content { max-width: 700px; color: var(--white); } .hero-content h1 { font-family: var(--font-display); font-size: 3.5rem; font-weight: 600; line-height: 1.1; margin-bottom: 1.1rem; / Explicit — the global h1 rule sets ink by default, which would sit ink-on-ink against the hero's dark overlay. Confirmed via getComputedStyle before this fix: rgb(36,31,29) on a near-black overlay. See COLOR_AUDIT. / color: var(--white); } .hero-content h1 .highlight { color: #F2C9AC; font-style: italic; } / .hero-subtitle/.hero-text/.hero-feature: explicit color (not just the inherited .hero-content white) — the same hardening principle as the h1 fix above, so none of these depend on an ancestor rule staying intact. / .hero-subtitle { font-family: var(--font-body); font-size: 1.35rem; font-weight: 500; margin-bottom: 1rem; opacity: 0.95; color: var(--white); } .hero-text { font-size: 1.08rem; opacity: 0.85; margin-bottom: 2rem; max-width: 560px; color: var(--white); } .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; } .hero-features { display: flex; gap: 2rem; flex-wrap: wrap; } .hero-feature { display: flex; align-items: center; gap: 0.55rem; font-weight: 500; font-size: 0.95rem; color: var(--white); } .hero-feature i { font-size: 1.1rem; color: #F2C9AC; } / ---------- Quick Info Bar ---------- / .quick-info { background: var(--brand-dark); padding: 1.5rem 0; } .info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .info-item { display: flex; align-items: center; gap: 1rem; color: var(--white); padding: 0.75rem 1rem; border-radius: 8px; } .info-item i { font-size: 1.35rem; color: #F2C9AC; } .info-label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; } .info-item strong { font-weight: 600; font-family: var(--font-data); font-size: 0.95rem; letter-spacing: -0.02em; } / ---------- Price-forward teaser (homepage, narrative step 3) ---------- Deliberately plain: --surface-ground, no tint, no card shadow tricks — it should read as an honest document, not a promotion. / .price-teaser { background: var(--surface-ground); } / .price-teaser-intro inherits the standard .section-header p treatment (color: var(--text-medium)) — deliberately plain, no extra styling. / .price-teaser-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 720px; margin: 0 auto 2rem; } .price-teaser-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--border-radius-lg); padding: 1.75rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } .price-teaser-card .price-teaser-label { font-weight: 500; color: var(--text-dark); } .price-teaser-card .price-teaser-value { font-family: var(--font-data); font-weight: 600; font-size: 1.2rem; color: var(--brand); white-space: nowrap; } .price-teaser-cta { text-align: center; } / ---------- Credentials strip (signature element, narrative step 3) ---------- A designed certificate-style band: dentist registrations and clinic/company registration presented as verified data, not fine print. Perforated top edge (radial-gradient dots) nods to a certificate/ticket stub. / .credentials-strip { background: var(--ink); color: var(--white); padding: 4rem 0 3.5rem; position: relative; } .credentials-strip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background-image: radial-gradient(circle, var(--ground) 2px, transparent 2.5px); background-size: 18px 3px; background-repeat: repeat-x; background-position: center; } .credentials-strip-header { text-align: center; max-width: 620px; margin: 0 auto 2.5rem; } .credentials-strip-eyebrow { display: inline-block; font-family: var(--font-data); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #F2C9AC; margin-bottom: 0.85rem; } .credentials-strip-header h2 { color: var(--white); font-size: 2.1rem; } .credentials-strip-header h2 .highlight { color: #F2C9AC; } .credentials-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 820px; margin: 0 auto 2.5rem; } .credential-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--border-radius-lg); padding: 1.75rem; } .credential-card .credential-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--white); margin-bottom: 0.2rem; } .credential-card .credential-degree { color: rgba(255,255,255,0.65); font-size: 0.85rem; margin-bottom: 1rem; } .credential-card .credential-mdc { display: inline-flex; align-items: baseline; gap: 0.5rem; font-family: var(--font-data); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: 6px; padding: 0.4rem 0.75rem; } .credential-card .credential-mdc .credential-mdc-label { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; / 0.5 measured 4.10:1 (fail) against the true composited background — this label sits inside TWO stacked semi-transparent white layers (.credential-card 0.05 + .credential-mdc 0.08 over --ink), which lighten the effective bg well past plain --ink. 0.65 (matching .credential-degree) verified ~5.75:1 via real pixel sampling. Found + fixed 2026-07-20. / color: rgba(255,255,255,0.65); } .credential-card .credential-mdc .credential-mdc-num { font-weight: 600; font-size: 1rem; letter-spacing: 0.04em; color: #F2C9AC; } .credentials-strip-reg { text-align: center; font-family: var(--font-data); font-size: 0.8rem; color: rgba(255,255,255,0.6); letter-spacing: 0.01em; max-width: 620px; margin: 0 auto; padding-top: 1.75rem; border-top: 1px dashed rgba(255,255,255,0.18); } .credentials-strip-reg strong { color: rgba(255,255,255,0.85); font-weight: 600; } / Reuse on the About page's own doctor cards so the "serial number chip" treatment is consistent site-wide, not just a one-off homepage graphic. / .doctor-credentials { width: 100%; display: flex; gap: 0.5rem; } .credential-item { flex: 1; background: var(--ground-raised); padding: 0.75rem 0.5rem; border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; } .credential-item i { color: var(--brand); font-size: 1rem; } .credential-item span { color: var(--text-dark); font-family: var(--font-data); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } / Typographic credential chip (added 2026-07-20) — replaces stock/ placeholder staff photography (a generic stock photo was doing duty under a real dentist's name; a second card reused the same file as a plain "female dentist" placeholder) with initials in the display face on --surface-ink, the same "verified credential" surface used for the homepage credentials strip and this page's own doctor-section background. Non-photographic by construction — cannot misrepresent anyone. .doctor-avatar/.dsa-avatar keep their existing box geometry (180x220, shadow, outline) from the base rules; this only overrides the fill. / / Compound selector (not just .doctor-avatar-mono) deliberately: the About page ships its own inline