/* ============================================================ OCARD.CSS — Digital contact card module. Per-card color overrides are injected on via inline style in card-layout.pug (cardColorStyle()): --color-card-bg ← card.primary_color (card background) --color-accent ← card.secondary_color (hover tints) --color-cta ← card.action_color (button fills) --color-card-text ← card.text_color (all card text) The whole card, header included, renders in the card's own palette — the portrait is a small circle, not a backdrop. ============================================================ */ /* ── Page ────────────────────────────────────────────────── */ html { width: 100vw; overflow: hidden; } body { background: var(--color-bg); margin: 0; padding: 0; min-height: 100vh; height: 100vh; width: 100vw; overflow: hidden; flex-direction: row; justify-content: center; align-items: flex-start; } main { position: absolute; top: 0; left: 0; height: 100%; width: 100%; padding-top: 0; display: flex; align-items: flex-start; justify-content: center; } @media (min-width: 768px) { main { align-items: center; } } /* ── Dot background canvas ───────────────────────────────── */ #card-bg-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* ── Card shell ──────────────────────────────────────────── */ /* Full-bleed on mobile (dvh rides the browser chrome); the framed card with radius + shadow is the tablet-and-up presentation */ #contactCard { position: relative; height: 100vh; height: 100dvh; width: 100vw; max-width: 40rem; background: var(--color-card-bg, var(--color-bg)); border-radius: 0; box-shadow: var(--shadow-md); display: flex; flex-direction: column; overflow: hidden; } @media (min-width: 768px) { #contactCard { height: 750px; width: 460px; max-height: 100vh; border-radius: var(--radius-md); } } /* ── Card header (avatar + identity) ─────────────────────── */ /* Compact head after 6018's ocard: a small circular portrait over the card color, identity beneath it in the card's own ink — the photo no longer takes half the card, so contacts get the room */ .ocard-header { --ocard-avatar: clamp(6.5rem, 30vw, 8.75rem); --ocard-band: 6rem; position: relative; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--space-8) var(--space-2); color: var(--color-card-text, var(--color-text)); } /* Banner band behind the portrait — the profile-card staple. Accent color, so the owner tunes it from the existing pickers. */ .ocard-header::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--ocard-band); background: var(--color-accent); } /* The circle straddles the band's bottom edge */ .ocard-avatar-wrap { position: relative; margin-top: calc(var(--ocard-band) - var(--ocard-avatar) / 2); margin-bottom: var(--space-4); } .ocard-avatar { width: var(--ocard-avatar); aspect-ratio: 1 / 1; margin: 0; border-radius: 50%; /* Ring matches the banner band behind it */ border: 3px solid var(--color-accent); overflow: hidden; display: flex; align-items: center; justify-content: center; /* Opaque fill so the band doesn't show through the empty circle */ background: color-mix(in srgb, var(--color-card-text, #808080) 10%, var(--color-card-bg, var(--color-bg))); } .ocard-avatar img { height: 100%; width: 100%; object-fit: cover; object-position: center; } /* No-photo silhouette — sinks toward the circle's base like a bust */ .ocard-avatar-placeholder { width: 55%; height: auto; color: currentColor; opacity: 0.3; margin-top: 14%; } /* Logo — top-right corner, riding the banner band */ .ocard-logo { position: absolute; top: var(--space-4); right: var(--space-4); height: 34px; margin: 0; z-index: 2; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.25)); } .ocard-logo img, .ocard-logo a { height: 100%; width: auto; display: block; } .ocard-header h1, .ocard-header h2, .ocard-header p { margin: 0; z-index: 1; } .ocard-header h1 { font-size: clamp(1.7rem, 7.5vw, 2.5rem); font-weight: 400; letter-spacing: -0.03em; margin-bottom: 6px; } .ocard-header h2 { text-transform: uppercase; font-size: var(--text-sm); font-weight: 300; letter-spacing: 0.06em; margin-bottom: 4px; opacity: 0.85; } .ocard-header p { font-size: var(--text-sm); font-weight: 300; opacity: 0.7; } .ocard-header p a { color: inherit; text-decoration: none; } /* ── Card body ───────────────────────────────────────────── */ .ocard-body { flex-grow: 1; padding: var(--space-6) var(--space-8) var(--space-3) var(--space-8); overflow-y: auto; color: var(--color-card-text, var(--color-text)); } @media (min-width: 768px) { .ocard-body { padding: var(--space-6) var(--space-10) var(--space-6) var(--space-10); } } /* ── Contact detail links ────────────────────────────────── */ .ocard-contact-link { display: inline-flex; align-items: center; color: var(--color-card-text, var(--color-text)); text-decoration: none; font-size: var(--text-sm); transition: color var(--transition); } .ocard-contact-link:hover { color: var(--color-accent); } /* Small screens with an address (the two col-6 columns): stack instead — every contact detail and address line gets its own centered row */ @media (max-width: 767px) { .ocard-contacts > .col-6 { width: 100%; text-align: center !important; } .ocard-contacts > .col-6 + .col-6 { margin-top: var(--space-3); } .ocard-contacts > .col-6 .ocard-contact-link { justify-content: center; } .ocard-edit .ocard-contacts .ec-in, .ocard-edit .ocard-contacts .ec-address { text-align: center; } /* Identity block (photo + name/title/business) — the phone screen is tight, so this shrinks noticeably rather than eating the fold */ .ocard-header { --ocard-avatar: clamp(5rem, 22vw, 6.25rem); --ocard-band: 4.5rem; padding: 0 var(--space-6) var(--space-1); } .ocard-avatar-wrap { margin-bottom: var(--space-2); } .ocard-header h1 { font-size: clamp(1.3rem, 6.5vw, 1.85rem); margin-bottom: 3px; } .ocard-header h2 { font-size: var(--text-xs, 0.75rem); margin-bottom: 2px; } .ocard-header p { font-size: var(--text-xs, 0.75rem); } /* Buttons — shorter and stacked tighter so Save/Share/Website fit without crowding the fold */ #contactCard .btn { --btn-padding-v: 0.4rem; font-size: var(--text-sm); } .ocard-body .col-12.mb-2 { margin-bottom: var(--space-1) !important; } } .ocard-contact-link .icon { width: 12px; height: 12px; flex-shrink: 0; fill: currentColor; } /* ── Buttons ─────────────────────────────────────────────── */ /* Shared by the card itself and both offcanvas sheets (Share This Card, Share Your Info) — the sheets wear the card's palette too, so their buttons follow the exact same recipe */ #contactCard .btn, #contactShare .btn, #shareCard .btn, #followupConsent .btn { text-transform: uppercase; letter-spacing: 0.05em; font-weight: 400; color: var(--color-bg); } /* Primary (Save Contact) borders in the card's own background color so the button sits flush against any palette */ #contactCard .btn-primary, #contactShare .btn-primary, #shareCard .btn-primary, #followupConsent .btn-primary { border-color: var(--color-card-bg, var(--color-bg)); --bs-btn-hover-border-color: var(--color-card-bg, var(--color-bg)); --bs-btn-active-border-color: var(--color-card-bg, var(--color-bg)); } /* Hover reads the same on every palette: the fill deepens slightly — works with any per-card action color, matching the site's darken-on-hover */ #contactCard .btn-primary:hover, #contactCard .btn-primary:focus-visible, #contactCard .btn-primary:active, #contactShare .btn-primary:hover, #contactShare .btn-primary:focus-visible, #contactShare .btn-primary:active, #shareCard .btn-primary:hover, #shareCard .btn-primary:focus-visible, #shareCard .btn-primary:active, #followupConsent .btn-primary:hover, #followupConsent .btn-primary:focus-visible, #followupConsent .btn-primary:active { filter: brightness(.9); } /* Outline (View Website / post-send Save Contact) is transparent over the card background, so its resting ink follows the card's text color; hover fills with the CTA */ #contactCard .btn-outline-primary, #contactShare .btn-outline-primary, #shareCard .btn-outline-primary, #followupConsent .btn-outline-primary { color: var(--color-card-text, var(--color-text)); } #contactCard .btn-outline-primary:hover, #contactCard .btn-outline-primary:focus-visible, #contactCard .btn-outline-primary:active, #contactShare .btn-outline-primary:hover, #contactShare .btn-outline-primary:focus-visible, #contactShare .btn-outline-primary:active, #shareCard .btn-outline-primary:hover, #shareCard .btn-outline-primary:focus-visible, #shareCard .btn-outline-primary:active, #followupConsent .btn-outline-primary:hover, #followupConsent .btn-outline-primary:focus-visible, #followupConsent .btn-outline-primary:active { color: var(--color-bg); } /* ── Save contact animation ──────────────────────────────── */ .success-checkmark { display: none; align-items: center; margin-right: var(--space-2); } .checkmark-svg { width: 20px; height: 20px; } .checkmark-path { stroke: currentColor; stroke-dasharray: 48; stroke-dashoffset: 48; } #saveBtn span:not(.success-checkmark)::after { content: "Save Contact"; } #saveBtn.saved span:not(.success-checkmark)::after { content: "Contact Saved"; } #saveBtn.saved .success-checkmark { display: inline-flex; } #saveBtn.saved .checkmark-svg { animation: scaleIn 0.3s ease forwards; } #saveBtn.saved .checkmark-path { animation: drawCheck 0.6s 0.2s ease forwards; } @keyframes scaleIn { from { transform: scale(0); } to { transform: scale(1); } } @keyframes drawCheck { to { stroke-dashoffset: 0; } } /* ── Social links ────────────────────────────────────────── */ .ocard-social { display: flex; align-items: center; justify-content: center; width: fit-content; aspect-ratio: 1/1; margin: 0 var(--space-2); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; transition: opacity 0.75s; } /* Inside the card the icons follow the card's text color; the share sheet copies (outside #contactCard) stay on the theme ink */ #contactCard .ocard-social { color: var(--color-card-text, var(--color-text)); } .ocard-social:hover { opacity: 0.5; } .ocard-social .icon { width: 24px; height: 24px; fill: currentColor; } /* ── Share sheet ─────────────────────────────────────────── */ .ocard-share-trigger { display: inline-flex; /* A direct child of a flex row gets "blockified" (inline-flex → flex), and a block-level box's width:auto fills the row — which silently defeats the parent's justify-content:center. Pin it to its own content width so centering actually has room to work. */ width: fit-content; align-items: center; background: none; border: 0; padding: var(--space-1) var(--space-2); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-card-text, var(--color-text-muted)); opacity: 0.75; transition: color var(--transition), opacity var(--transition); } .ocard-share-trigger:hover { color: var(--color-accent); opacity: 1; } .ocard-share-trigger .icon { width: 14px; height: 14px; fill: currentColor; } /* Share offcanvas, after 6018's ocard: centered title, the QR framed by corner brackets, and a "Share on:" block of tiles at the bottom. Both sheets wear the CARD's own palette (background/text/accent/cta), same as #contactCard itself — not the site theme — so they read as part of the card, not a site-chrome overlay. */ #shareCard.offcanvas, #contactShare.offcanvas { background: var(--color-card-bg, var(--color-bg)); color: var(--color-card-text, var(--color-text)); } #shareCard .offcanvas-header, #contactShare .offcanvas-header { position: relative; justify-content: center; } #shareCard .offcanvas-title, #contactShare .offcanvas-title { width: 100%; text-align: center; } #shareCard .btn-close, #contactShare .btn-close { filter: none; position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); } /* Derived tones for the sheets, same recipe as .ocard-header's opacity text but as a reusable custom property: a muted version of the card's own text color, and the card's accent standing in for "site primary" (links, QR brackets, focus rings, the checked switch) */ #shareCard.offcanvas, #contactShare.offcanvas, #followupConsent { --ocard-sheet-muted: color-mix(in srgb, var(--color-card-text, var(--color-text)) 70%, transparent); } /* Follow-up consent modal — wears the card's palette like the sheets */ #followupConsent .modal-content { background: var(--color-card-bg, var(--color-bg)); color: var(--color-card-text, var(--color-text)); } #followupConsent .modal-header, #followupConsent .modal-footer { border-color: color-mix(in srgb, var(--color-card-text, var(--color-text)) 15%, transparent); } .ocard-consent-q { font-size: 1.05rem; margin-bottom: 12px; } .ocard-consent-sms { font-size: var(--text-sm); color: var(--ocard-sheet-muted, var(--color-text-muted)); margin-bottom: 12px; } .ocard-consent-actions { display: flex; gap: 10px; } .ocard-consent-actions .btn { flex: 1; } #shareCard .ocard-grow { flex-grow: 1; } /* Corner brackets frame the QR, in the card's own accent color. The code is transparent-backed — dark modules straight on the card's own background, whatever that is */ .ocard-qr { width: min(280px, 78%); padding: var(--space-4); margin: 0 0 var(--space-5); background: linear-gradient(to right, var(--color-accent) 3px, transparent 3px) 0 0, linear-gradient(to right, var(--color-accent) 3px, transparent 3px) 0 100%, linear-gradient(to left, var(--color-accent) 3px, transparent 3px) 100% 0, linear-gradient(to left, var(--color-accent) 3px, transparent 3px) 100% 100%, linear-gradient(to bottom, var(--color-accent) 3px, transparent 3px) 0 0, linear-gradient(to bottom, var(--color-accent) 3px, transparent 3px) 100% 0, linear-gradient(to top, var(--color-accent) 3px, transparent 3px) 0 100%, linear-gradient(to top, var(--color-accent) 3px, transparent 3px) 100% 100%; background-repeat: no-repeat; background-size: 22px 22px; } .ocard-qr img { display: block; width: 100%; height: auto; } .ocard-share-url { font-size: var(--text-sm); color: var(--ocard-sheet-muted, var(--color-text-muted)); } .ocard-share-url a { color: var(--color-accent); text-decoration: underline; } /* Bottom block: label over a row of tile buttons, 6018-style */ .ocard-share-block { width: 100%; margin-top: auto; padding-bottom: var(--space-4); font-size: var(--text-sm); color: var(--ocard-sheet-muted, var(--color-text-muted)); } .ocard-share-block > p { margin-bottom: var(--space-2); } .ocard-share-tile { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-right: var(--space-3); border-radius: 8px; background: color-mix(in srgb, var(--color-card-text, var(--color-text)) 6%, var(--color-card-bg, var(--color-bg))); box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); color: var(--color-accent); text-decoration: none; transition: opacity var(--transition); } .ocard-share-tile:hover { opacity: 0.7; } .ocard-share-tile .icon { width: 22px; height: 22px; fill: currentColor; } /* ── Share-your-info sheet ───────────────────────────────── */ .ocard-lead-intro { font-size: var(--text-sm); color: var(--ocard-sheet-muted, var(--color-text-muted)); margin-bottom: var(--space-4); } .ocard-lead-optional { font-size: var(--text-sm); color: var(--ocard-sheet-muted, var(--color-text-muted)); } .ocard-lead-consent .form-check-label { font-size: var(--text-sm); color: var(--ocard-sheet-muted, var(--color-text-muted)); } /* Switch in the card's own accent, not Bootstrap blue */ .ocard-lead-consent .form-check-input { border-color: var(--ocard-sheet-muted, var(--color-border)); } .ocard-lead-consent .form-check-input:checked { background-color: var(--color-accent); border-color: var(--color-accent); } .ocard-lead-consent .form-check-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--color-accent) 25%, transparent); /* Bootstrap swaps the unchecked knob to focus-blue — keep it neutral */ --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c9c1ae'/%3e%3c/svg%3e"); } /* Carrier-required SMS opt-in small print — quiet, but present */ .ocard-lead-smallprint { font-size: var(--text-xs, 0.75rem); color: var(--ocard-sheet-muted, var(--color-text-muted)); line-height: 1.5; } .ocard-lead-smallprint a { color: var(--ocard-sheet-muted, var(--color-text-muted)); text-decoration: underline; } .ocard-lead-error { font-size: var(--text-sm); } /* Submit and the post-send outline button wear the CARD's own button look now — see the shared "Buttons" rules near the top of this file (#contactCard, #contactShare, #shareCard all styled together) */ /* Post-send thank-you — swapped in for the form by card.js */ .ocard-lead-done-mark { font-size: 2.5rem; line-height: 1; color: var(--color-accent); margin-bottom: var(--space-2); } .ocard-lead-done-msg { font-size: var(--text-sm); color: var(--ocard-sheet-muted, var(--color-text-muted)); } /* ── Suppress base.css link underline animations ─────────── */ #contactCard a::after, #contactCard a:hover::after { display: none !important; } /* ── Edit-in-place mode (dashboard preview ?edit=1) ──────── The card's text is real inputs styled as the card text (card-partial.pug editable branches, card-edit.js wiring). Everything here is scoped to .ocard-edit so the public card never carries it. */ .ocard-edit .ec-in { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; border-bottom: 1px dashed transparent; border-radius: 0; padding: 0 2px; width: 100%; min-width: 0; transition: border-color var(--transition); } .ocard-edit .ec-in:hover { border-bottom-color: color-mix(in srgb, currentColor 35%, transparent); } .ocard-edit .ec-in:focus { outline: none; border-bottom-color: currentColor; } .ocard-edit .ec-in::placeholder { color: inherit; opacity: 0.4; } /* Header text sits centered on the photo gradient, same as the real card */ .ocard-edit .ocard-header h1 .ec-in, .ocard-edit .ocard-header h2 .ec-in, .ocard-edit .ocard-header p .ec-in { text-align: center; display: block; } .ocard-edit .ocard-header h1, .ocard-edit .ocard-header h2, .ocard-edit .ocard-header p { width: 82%; z-index: 1; } /* Contact rows: icon + input reads like the live link rows */ .ocard-edit .ec-row { display: flex; align-items: center; width: 100%; cursor: text; } .ocard-edit .ec-row .ec-in { font-size: var(--text-sm); } /* Postal address block keeps its right alignment */ .ocard-edit .ec-address { text-align: right; font-size: var(--text-sm); line-height: 1.7; resize: none; } /* Website reads like the outline button it becomes when set */ .ocard-edit .ec-website { border: 1px solid var(--color-cta); padding: var(--btn-padding-v, 12px) var(--btn-padding-h, 16px); text-align: center; font-size: var(--text-sm); color: var(--color-card-text, var(--color-text)); } .ocard-edit .ec-website:hover, .ocard-edit .ec-website:focus { border-color: var(--color-cta); border-bottom-color: var(--color-cta); } /* The save-contact button is scenery while editing */ .ocard-edit .ec-static { pointer-events: none; } /* Photo + logo are upload targets; chips invite the click */ .ocard-edit .ec-photo { cursor: pointer; } .ocard-edit .ec-chip { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 1; font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #f7f4ed; pointer-events: none; opacity: 0.85; } .ocard-edit .ec-logo { cursor: pointer; min-width: 36px; min-height: 34px; } .ocard-edit .ec-logo .ec-chip { position: static; transform: none; } .ocard-edit .ec-x { position: absolute; z-index: 2; width: 22px; height: 22px; line-height: 1; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #f7f4ed; cursor: pointer; } /* Avatar's ✕ sits at the top-right of its wrap, clear of the circle */ .ocard-edit .ec-photo-x { top: 0; right: 0; } /* Logo's ✕ hangs just below the top-right logo */ .ocard-edit .ec-logo-x { top: calc(var(--space-4) + 38px); right: var(--space-4); } /* Social icons: every network shows; unset ones sit dim until linked */ .ocard-edit .ec-social { background: none; border: 0; padding: 0; } .ocard-edit .ec-social-off { opacity: 0.3; } .ocard-edit .ec-social-active { opacity: 1; color: var(--color-accent); } .ocard-edit .ec-social-editor { display: flex; align-items: baseline; gap: var(--space-2); width: 90%; margin-top: var(--space-3); font-size: var(--text-sm); } .ocard-edit .ec-social-editor[hidden] { display: none; } .ocard-edit .ec-social-label { white-space: nowrap; opacity: 0.7; } /* Publish blockers: a blocked save rings the field it still needs and says so right above it; typing clears both (card-edit.js) */ .ocard-edit .ec-in.ec-required { outline: 1px solid #d64545; outline-offset: 3px; border-radius: 2px; } .ocard-edit .ec-req-hint { display: block; z-index: 1; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; text-align: center; color: #d64545; margin-bottom: 4px; } /* ── Thumbprint colophon ─────────────────────────────────── */ /* The quiet brand link at the card's foot (public pages only — white-label plans drop it server-side). Wears the card's own ink at low opacity so it belongs to any palette. */ .ocard-brandmark-row { text-align: center; padding: 4px 0 0; } .ocard-brandmark { display: inline-flex; align-items: center; gap: 7px; color: var(--color-card-text); opacity: .4; text-decoration: none; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; transition: opacity .25s; } .ocard-brandmark:hover, .ocard-brandmark:focus-visible { opacity: .75; color: var(--color-card-text); } .ocard-brandmark-svg { flex: none; }