/* ========================================================= Blue Label Business Services — Digital Business Card Single source of truth for all design tokens in :root. Change a variable here = changes cohesively everywhere. ========================================================= */ :root { /* Colors — off-white paper theme */ --color-bg: #F2ECE4; --color-bg-elevated: #EAE2D3; --color-bg-elevated-2: #DFD5C3; --color-accent-primary: #d0845a; --color-accent-primary-dim: #a66741; --color-accent-secondary: #A85C3A; /* warm brick — close to orange, more saturated */ --color-accent-secondary-dim: #8B4A2D; --color-text: #2D2926; --color-text-muted: rgba(45, 41, 38, 0.65); --color-text-faint: rgba(45, 41, 38, 0.4); --color-border-subtle: rgba(45, 41, 38, 0.12); --color-border-accent: rgba(208, 132, 90, 0.5); /* Fixed (theme-independent) for buttons that sit ON the orange accent */ --color-on-accent: #2D2926; /* Typography — active defaults are D (Space Grotesk + Azeret Mono + Share Tech Mono) */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Space Grotesk', sans-serif; --font-mono: 'Azeret Mono', monospace; --font-mono-accent: 'Share Tech Mono', monospace; /* Type scale (fluid) */ --fs-display-lg: clamp(2.25rem, 6vw, 3.5rem); --fs-display: clamp(1.75rem, 4.5vw, 2.5rem); --fs-heading: clamp(1.25rem, 2.5vw, 1.5rem); --fs-subheading: 1.125rem; --fs-body: 1rem; --fs-small: 0.875rem; --fs-micro: 0.75rem; --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.55; /* Spacing (8pt grid) */ --space-xxs: 0.25rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-xxl: 6rem; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 9999px; /* Shadows — subtle, paper-appropriate */ --shadow-card: 0 2px 6px rgba(45, 41, 38, 0.08), 0 8px 24px rgba(45, 41, 38, 0.06); --shadow-lift: 0 6px 16px rgba(45, 41, 38, 0.12), 0 16px 40px rgba(45, 41, 38, 0.08); /* Motion */ --dur-fast: 120ms; --dur-base: 220ms; --dur-slow: 420ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Layout — narrow "card" width with large margins on wide screens */ --content-max-width: 560px; --page-padding-x: clamp(1rem, 5vw, 2rem); } /* Typography variants — admin/demo toggle via */ :root[data-type="A"] { --font-display: 'Cormorant Garamond', serif; --font-body: 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --font-mono-accent: 'IBM Plex Mono', monospace; } :root[data-type="B"] { --font-display: 'Fraunces', serif; --font-body: 'Manrope', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --font-mono-accent: 'IBM Plex Mono', monospace; } :root[data-type="C"] { --font-display: 'EB Garamond', serif; --font-body: 'Inter', sans-serif; --font-mono: 'IBM Plex Mono', monospace; --font-mono-accent: 'IBM Plex Mono', monospace; } :root[data-type="D"] { --font-display: 'Space Grotesk', sans-serif; --font-body: 'Space Grotesk', sans-serif; --font-mono: 'Azeret Mono', monospace; --font-mono-accent: 'Share Tech Mono', monospace; } /* ========================================================= Reset & base ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 16px; line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; overflow-x: hidden; position: relative; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img { display: block; max-width: 100%; height: auto; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-tight); margin: 0; } /* D — Space Grotesk looks best with tighter tracking on display sizes */ :root[data-type="D"] h1, :root[data-type="D"] h2 { letter-spacing: -0.02em; font-weight: 600; } /* ========================================================= Paper texture background — dark subtle fibers on off-white ========================================================= */ .paper-texture { position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: /* Subtle paper fibers via SVG — darker noise on paper */ url("data:image/svg+xml;utf8,"), radial-gradient(ellipse 120% 80% at 50% 0%, rgba(208, 132, 90, 0.08), transparent 70%), radial-gradient(ellipse 120% 80% at 50% 100%, rgba(168, 92, 58, 0.06), transparent 70%); opacity: 0.85; mix-blend-mode: multiply; } /* ========================================================= Site header (sticky) — constrained to card width ========================================================= */ .site-header { position: sticky; top: 0; z-index: 10; background: rgba(242, 236, 228, 0.82); backdrop-filter: blur(14px) saturate(1.05); -webkit-backdrop-filter: blur(14px) saturate(1.05); border-bottom: var(--color-border-subtle) 1px solid; padding: var(--space-xs) 0; display: flex; flex-direction: column; gap: var(--space-xs); } .site-header > .brand, .site-header > .tab-bar { width: 100%; max-width: var(--content-max-width); margin: 0 auto; padding: 0 var(--page-padding-x); } .brand { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-sm); padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); } .brand-left { display: flex; align-items: center; gap: var(--space-xs); justify-self: start; min-width: 0; } .brand-phone { justify-self: end; font-family: var(--font-mono-accent); font-size: var(--fs-small); color: var(--color-text-muted); letter-spacing: 0.05em; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); } .brand-phone:hover { color: var(--color-accent-primary); } @media (max-width: 480px) { .brand { grid-template-columns: 1fr auto; row-gap: 4px; } .brand-left { grid-column: 1; grid-row: 1; } .brand-phone { grid-column: 2; grid-row: 1; font-size: 0.75rem; } .brand-name { grid-column: 1 / -1; grid-row: 2; justify-self: center; } } .brand-logo { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--color-bg-elevated); display: grid; place-items: center; overflow: hidden; border: var(--color-border-subtle) 1px solid; } .brand-logo-img { width: 100%; height: 100%; object-fit: contain; } .brand-wordmark { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: 0.02em; font-weight: 600; } .brand-name { justify-self: center; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--color-text); letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; } /* Tab bar — centered within card width, wraps to 2 rows if tabs overflow */ .tab-bar { display: flex; gap: var(--space-xxs); justify-content: center; flex-wrap: wrap; row-gap: 4px; } .tab { background: transparent; border: none; color: var(--color-text-muted); font-size: var(--fs-small); padding: var(--space-xxs) 0.75rem; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); font-family: var(--font-body); font-weight: 500; letter-spacing: 0.01em; min-height: 32px; } .tab:hover { color: var(--color-text); } .tab[aria-selected="true"] { color: var(--color-text); background: var(--color-bg); box-shadow: inset 2px 2px 4px rgba(45, 41, 38, 0.08), inset -2px -2px 4px rgba(255, 251, 245, 0.55); } /* ========================================================= Pages (swipeable container) ========================================================= */ .pages { position: relative; z-index: 1; display: flex; /* Width scales with --page-count (set by scripts/nav.js). Fallback = 5. */ width: calc(100% * var(--page-count, 5)); transition: transform var(--dur-slow) var(--ease-out); touch-action: pan-y; will-change: transform; } .pages.dragging { transition: none; } .page { flex: 0 0 calc(100% / var(--page-count, 5)); width: calc(100% / var(--page-count, 5)); min-height: calc(100vh - 120px); } .page-inner { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-lg) var(--page-padding-x) var(--space-xxl); display: flex; flex-direction: column; gap: var(--space-lg); } /* Subtle hairline between page segments (every section after the first) */ .page-inner > section + section { position: relative; } .page-inner > section + section::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-0.5 * var(--space-lg)); height: 1px; background: var(--color-border-subtle); } /* ========================================================= Sections (shared) ========================================================= */ section { margin: 0; } .section-title { font-size: var(--fs-heading); margin-bottom: var(--space-sm); letter-spacing: 0.01em; } .section-sub { color: var(--color-text-muted); margin: 0 0 var(--space-sm); font-size: var(--fs-body); } /* ========================================================= Hero ========================================================= */ .hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); padding-top: var(--space-sm); } .hero-top { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; width: 100%; } .hero-photo { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; background: var(--color-bg-elevated); border: var(--color-accent-primary) 2px solid; box-shadow: var(--shadow-card); } .hero-photo img { width: 100%; height: 100%; object-fit: cover; } .hero-name { font-size: var(--fs-display-lg); font-weight: 500; } .hero-tagline { font-family: var(--font-display); font-size: clamp(2.5rem, 9vw, 4rem); font-weight: 700; line-height: 1.0; color: var(--color-text); margin: 0; max-width: 14ch; letter-spacing: -0.035em; /* Offset shadow behind each letter — subtle secondary-accent layer */ text-shadow: 2px 2px 0 rgba(168, 92, 58, 0.22), 4px 4px 0 rgba(168, 92, 58, 0.08); } .hero-tagline .accent-word { color: var(--color-accent-primary); } .hero-brand .hero-tagline { font-size: var(--fs-subheading); color: var(--color-text-muted); font-weight: 400; max-width: 52ch; letter-spacing: 0; text-shadow: none; line-height: var(--lh-snug); } .hero-ctas { display: flex; flex-direction: column; gap: var(--space-xs); } .hero-ctas .btn { min-width: 180px; justify-content: center; } .hero-brand { align-items: center; text-align: center; padding: var(--space-lg) 0; } .hero-brand .hero-name { font-size: var(--fs-display); } /* ========================================================= Buttons ========================================================= */ /* Neumorphic buttons — soft raised "pressed into paper" feel */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xxs); padding: var(--space-xs) var(--space-md); border-radius: 14px; font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.02em; cursor: pointer; border: none; text-align: center; min-height: 44px; background: var(--color-bg); color: var(--color-text); box-shadow: -3px -3px 7px rgba(255, 251, 245, 0.80), 4px 4px 10px rgba(45, 41, 38, 0.10); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn:hover { box-shadow: -4px -4px 10px rgba(255, 251, 245, 0.95), 5px 5px 14px rgba(45, 41, 38, 0.14); } .btn:active { transform: translateY(1px); box-shadow: inset 2px 2px 5px rgba(45, 41, 38, 0.10), inset -2px -2px 5px rgba(255, 251, 245, 0.6); } .btn-primary { background: var(--color-accent-primary); color: #F7EFE4; box-shadow: -2px -2px 5px rgba(255, 251, 245, 0.50), 4px 4px 10px rgba(139, 74, 45, 0.28); } .btn-primary:hover { background: var(--color-accent-primary); color: #F7EFE4; box-shadow: -3px -3px 7px rgba(255, 251, 245, 0.60), 5px 5px 14px rgba(139, 74, 45, 0.34); } .btn-primary:active { box-shadow: inset 2px 2px 5px rgba(139, 74, 45, 0.30), inset -2px -2px 5px rgba(245, 180, 130, 0.35); } .btn-outline { background: var(--color-bg); color: var(--color-text); } .btn-ghost { background: var(--color-bg); color: var(--color-text-muted); } .btn-ghost:hover { color: var(--color-text); } .btn-accent-secondary { background: var(--color-accent-secondary); color: #F2ECE4; box-shadow: -2px -2px 5px rgba(255, 251, 245, 0.40), 4px 4px 10px rgba(100, 50, 30, 0.28); } /* ========================================================= Bio / family ========================================================= */ .about-body { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text); max-width: 60ch; } .family { display: flex; flex-direction: column; gap: var(--space-xs); } .family-photo { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-elevated); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; } .family-photo img { width: 100%; height: 100%; object-fit: cover; } .family-caption { font-size: var(--fs-small); color: var(--color-text-muted); font-style: italic; margin: 0; } /* ========================================================= AI agent inline ========================================================= */ .ai-agent { background: linear-gradient(135deg, rgba(168, 92, 58, 0.10), rgba(208, 132, 90, 0.08)); border: var(--color-border-accent) 1px solid; border-radius: var(--radius-lg); padding: var(--space-md); } .convocore-inline { margin-top: var(--space-sm); background: var(--color-bg-elevated); border-radius: var(--radius-md); min-height: 160px; padding: var(--space-sm); color: var(--color-text-muted); font-size: var(--fs-small); display: grid; place-items: center; text-align: center; } /* ========================================================= Service cards ========================================================= */ .service-cards { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; } .service-card { background: var(--color-bg-elevated); border: var(--color-border-subtle) 1px solid; border-radius: var(--radius-lg); padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); cursor: pointer; } .service-card:hover { transform: translateY(-2px); border-color: var(--color-border-accent); box-shadow: var(--shadow-lift); } .service-card-title { font-family: var(--font-display); font-size: var(--fs-subheading); font-weight: 600; color: var(--color-accent-secondary); margin: 0; } .service-card-desc { color: var(--color-text-muted); font-size: var(--fs-small); margin: 0; } .service-card-ask { font-size: var(--fs-micro); color: var(--color-text-muted); text-decoration: underline dotted; cursor: pointer; align-self: flex-start; background: none; border: none; padding: 0; margin-top: var(--space-xxs); font-family: inherit; } .service-card-ask:hover { color: var(--color-accent-primary); } /* Services overview cards (Justin page) — icon on left, text body on right */ .service-cards .service-card { flex-direction: row; align-items: flex-start; gap: var(--space-sm); text-align: left; } .service-cards .service-card-body { display: flex; flex-direction: column; gap: var(--space-xxs); flex: 1; min-width: 0; } .service-cards .service-card-title { display: block; } .service-cards .service-card-desc { display: block; } .service-card-icon { flex-shrink: 0; width: 36px; height: 36px; color: var(--color-accent-primary); display: grid; place-items: center; margin-top: 2px; } .service-card-icon svg { width: 100%; height: 100%; } /* Other Services full grid */ .service-grid { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; } @media (min-width: 640px) { .service-grid { grid-template-columns: repeat(2, 1fr); } .service-cards { grid-template-columns: repeat(2, 1fr); } } .service-grid .service-card { position: relative; } .service-price { color: var(--color-accent-primary); font-family: var(--font-mono-accent); font-size: var(--fs-body); font-weight: 500; letter-spacing: 0.02em; } .service-actions { display: flex; flex-wrap: wrap; gap: var(--space-xxs); margin-top: var(--space-xs); } .service-addons { margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: var(--color-border-subtle) 1px dashed; } .service-addons-title { font-family: var(--font-mono-accent); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: 0.15em; color: var(--color-text-faint); margin: 0 0 var(--space-xs); } .addon-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xs); padding: var(--space-xxs) 0; font-size: var(--fs-small); } .addon-row-text { color: var(--color-text-muted); } .addon-row-price { color: var(--color-accent-primary); font-family: var(--font-mono-accent); } .addon-add-btn { background: var(--color-bg); border: none; color: var(--color-text); border-radius: 10px; font-size: var(--fs-micro); padding: 6px 12px; cursor: pointer; box-shadow: -2px -2px 4px rgba(255, 251, 245, 0.75), 2px 2px 5px rgba(45, 41, 38, 0.08); transition: box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .addon-add-btn:hover { color: var(--color-accent-primary); box-shadow: -3px -3px 6px rgba(255, 251, 245, 0.90), 3px 3px 8px rgba(45, 41, 38, 0.12); } .addon-add-btn:active { box-shadow: inset 1px 1px 3px rgba(45, 41, 38, 0.12), inset -1px -1px 3px rgba(255, 251, 245, 0.60); } /* ========================================================= Newsletter ========================================================= */ .newsletter { background: var(--color-bg-elevated); border: var(--color-border-subtle) 1px solid; border-radius: var(--radius-lg); padding: var(--space-md); } .newsletter .section-title { font-size: var(--fs-subheading); } #newsletter-embed { margin-top: var(--space-sm); } #newsletter-embed form { display: flex; gap: var(--space-xs); flex-wrap: wrap; } #newsletter-embed input[type="email"] { flex: 1; min-width: 200px; padding: var(--space-xs) var(--space-sm); background: var(--color-bg); border: none; border-radius: 14px; color: var(--color-text); font-size: var(--fs-body); min-height: 44px; box-shadow: inset 2px 2px 5px rgba(45, 41, 38, 0.08), inset -2px -2px 5px rgba(255, 251, 245, 0.60); transition: box-shadow var(--dur-fast) var(--ease-out); } #newsletter-embed input[type="email"]:focus { outline: none; box-shadow: inset 2px 2px 5px rgba(45, 41, 38, 0.12), inset -2px -2px 5px rgba(255, 251, 245, 0.70), 0 0 0 2px rgba(208, 132, 90, 0.30); } #newsletter-embed input[type="email"]::placeholder { color: var(--color-text-faint); } #newsletter-embed button { padding: var(--space-xs) var(--space-md); background: var(--color-accent-primary); color: #F7EFE4; border: none; border-radius: 14px; font-weight: 600; cursor: pointer; min-height: 44px; box-shadow: -2px -2px 5px rgba(255, 251, 245, 0.50), 4px 4px 10px rgba(139, 74, 45, 0.28); transition: box-shadow var(--dur-fast) var(--ease-out); } #newsletter-embed button:hover { box-shadow: -3px -3px 7px rgba(255, 251, 245, 0.60), 5px 5px 14px rgba(139, 74, 45, 0.34); } #newsletter-embed button:active { box-shadow: inset 2px 2px 5px rgba(139, 74, 45, 0.30), inset -2px -2px 5px rgba(245, 180, 130, 0.35); } /* ========================================================= Contact ========================================================= */ .contact-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xxs) var(--space-sm); margin: 0 0 var(--space-sm); } .contact-list dt { color: var(--color-text-muted); font-family: var(--font-mono-accent); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.15em; font-weight: 500; } .contact-list dd { margin: 0; color: var(--color-text); } /* ========================================================= Support ========================================================= */ .support { text-align: center; padding: var(--space-sm) 0; } /* ========================================================= Footer + share block ========================================================= */ .page-footer { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--color-border-subtle) 1px solid; display: flex; flex-direction: column; gap: var(--space-md); align-items: center; text-align: center; } .footer-row { display: flex; gap: var(--space-md); width: 100%; justify-content: center; align-items: stretch; flex-wrap: wrap; } .footer-row > .share-block, .footer-row > .newsletter { flex: 1 1 220px; max-width: 320px; } .share-block { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); } .footer-row > .newsletter { text-align: left; } .qr-wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); background: var(--color-bg-elevated); padding: var(--space-sm); border-radius: var(--radius-md); border: 1px solid var(--color-border-subtle); } .qr-code { width: 120px; height: 120px; } .qr-hint { font-size: var(--fs-micro); color: var(--color-text-muted); margin: 0; font-family: var(--font-mono-accent); letter-spacing: 0.08em; text-transform: uppercase; } .brand-footer { font-size: var(--fs-micro); color: var(--color-text-faint); margin: 0; letter-spacing: 0.15em; text-transform: uppercase; font-family: var(--font-mono-accent); } /* ========================================================= Branded service pages — Print Something, BLV ========================================================= */ .branded-page { /* inherits tokens for now; per-brand overrides later */ } .highlight-list, .use-case-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-xs); } .highlight-list li, .use-case-list li { padding: var(--space-sm) var(--space-md); background: var(--color-bg-elevated); border: var(--color-border-subtle) 1px solid; border-radius: var(--radius-md); font-size: var(--fs-body); } .use-case-list li strong { color: var(--color-accent-secondary); font-family: var(--font-display); font-weight: 600; } .cta-block { display: flex; gap: var(--space-xs); flex-wrap: wrap; justify-content: center; padding: var(--space-md) 0; } .summary p { font-size: var(--fs-subheading); color: var(--color-text-muted); margin: 0; max-width: 60ch; } .blv-demo-widget { background: var(--color-bg-elevated); border-radius: var(--radius-md); min-height: 200px; display: grid; place-items: center; color: var(--color-text-muted); font-size: var(--fs-small); border: var(--color-border-subtle) 1px dashed; padding: var(--space-md); text-align: center; } /* ========================================================= All Services page CTA block ========================================================= */ .misc-cta { text-align: center; padding: var(--space-md); background: var(--color-bg-elevated); border-radius: var(--radius-lg); border: var(--color-border-subtle) 1px solid; } .misc-cta p { margin: 0 0 var(--space-sm); color: var(--color-text-muted); font-size: var(--fs-subheading); } /* ========================================================= Floating AI agent button (FAB) ========================================================= */ .ai-fab { position: fixed; bottom: var(--space-md); right: var(--space-md); z-index: 20; display: flex; align-items: center; gap: var(--space-xs); background: var(--color-accent-primary); color: #F7EFE4; border: none; padding: var(--space-xs) var(--space-md); border-radius: 14px; font-weight: 600; font-size: var(--fs-small); cursor: pointer; box-shadow: -3px -3px 7px rgba(255, 251, 245, 0.60), 4px 4px 12px rgba(139, 74, 45, 0.32); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .ai-fab:hover { transform: translateY(-2px); box-shadow: -4px -4px 10px rgba(255, 251, 245, 0.75), 5px 5px 16px rgba(139, 74, 45, 0.40); } .ai-fab-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--color-on-accent); } .ai-fab-pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: var(--color-on-accent); opacity: 0.4; animation: pulse 1.6s ease-out infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.4; } 100% { transform: scale(2.5); opacity: 0; } } .ai-fab-icon { font-size: 1.1rem; } /* ========================================================= Modals (ConvoCore, Form) ========================================================= */ .convocore-modal, .form-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: var(--space-md); } .convocore-modal[hidden], .form-modal[hidden] { display: none; } .convocore-modal-backdrop, .form-modal-backdrop { position: absolute; inset: 0; background: rgba(45, 41, 38, 0.55); backdrop-filter: blur(6px); } .convocore-modal-panel, .form-modal-panel { position: relative; background: var(--color-bg); border: var(--color-border-subtle) 1px solid; border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); max-width: 560px; width: 100%; max-height: 85vh; overflow: auto; padding: var(--space-lg); } .convocore-modal-close, .form-modal-close { position: absolute; top: var(--space-xs); right: var(--space-xs); background: transparent; color: var(--color-text-muted); border: none; font-size: 1.5rem; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; } .convocore-modal-close:hover, .form-modal-close:hover { color: var(--color-text); background: var(--color-bg-elevated); } /* ========================================================= Form renderer ========================================================= */ .form-rendered { display: flex; flex-direction: column; gap: var(--space-sm); } .form-rendered-title { font-family: var(--font-display); font-size: var(--fs-heading); margin: 0; } .form-rendered-sub { color: var(--color-text-muted); margin: 0; font-size: var(--fs-small); } .field { display: flex; flex-direction: column; gap: var(--space-xxs); } .field label { font-family: var(--font-mono-accent); font-size: var(--fs-small); color: var(--color-text-muted); font-weight: 500; letter-spacing: 0.03em; } .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="number"], .field input[type="url"], .field input[type="date"], .field select, .field textarea { font-family: inherit; font-size: var(--fs-body); color: var(--color-text); background: var(--color-bg); border: none; border-radius: 12px; padding: var(--space-xs) var(--space-sm); min-height: 44px; /* Neumorphic inset — soft pressed-in look to match buttons */ box-shadow: inset 2px 2px 5px rgba(45, 41, 38, 0.08), inset -2px -2px 5px rgba(255, 251, 245, 0.60); transition: box-shadow var(--dur-fast) var(--ease-out); } .field textarea { min-height: 100px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 2px 2px 5px rgba(45, 41, 38, 0.12), inset -2px -2px 5px rgba(255, 251, 245, 0.70), 0 0 0 2px rgba(208, 132, 90, 0.30); } .field-checkbox { flex-direction: row; align-items: center; gap: var(--space-xs); } .field-checkbox label { margin: 0; } .calculator-block { background: var(--color-bg-elevated-2); border: var(--color-border-subtle) 1px dashed; border-radius: var(--radius-md); padding: var(--space-sm); font-family: var(--font-mono-accent); display: flex; justify-content: space-between; align-items: center; } .calculator-label { color: var(--color-text-muted); font-size: var(--fs-small); } .calculator-value { color: var(--color-accent-primary); font-size: var(--fs-subheading); font-weight: 600; } .form-success { background: rgba(168, 92, 58, 0.15); border: var(--color-accent-secondary) 1px solid; border-radius: var(--radius-md); padding: var(--space-md); text-align: center; } /* ========================================================= Responsive ========================================================= */ @media (max-width: 640px) { .hero-name { font-size: var(--fs-display); } .hero-photo { width: 110px; height: 110px; } .ai-fab-label { display: none; } .ai-fab { padding: var(--space-xs); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .pages, .service-card, .btn { transition: none; } .ai-fab-pulse::after { animation: none; } }