/* ═══════════════════════════════════════════════ GLOBAL — variables · reset · shared patterns Load this first in , before section CSS ═══════════════════════════════════════════════ */ /* ── CSS Custom Properties ── */ :root { --serif: 'Playfair Display', Georgia, serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --ink: #23242a; --gold: #c2a05f; --tan: #cdb78c; --muted: #6b6760; --page: #f8f7f3; --cream: #f4f2ea; --beige: #f4f2ea; --line: #e7e3da; --card: #f3f1e8; --green: #3f8f4a; /* footer dark-theme tokens */ --bg: #1e1f24; --bg-soft: #26272d; } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Body base ── */ body { font-family: var(--sans); color: var(--ink); background-color: var(--page); background-image: linear-gradient(rgba(120, 120, 110, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 120, 110, .045) 1px, transparent 1px); background-size: 34px 34px; } /* ── Scroll-reveal animation ── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ════════════════════════════════════════════ FLASH-SWEEP — white band expands + fades on image-container hover ════════════════════════════════════════════ */ .about-img::after, .ap-img::after, .wc-photo::after, .photo::after, .svc-img-wrap::after, .s2-img::after { content: ""; position: absolute; inset: 0; left: 50%; right: 51%; background: rgba(255, 255, 255, .3); opacity: 1; pointer-events: none; transition: all .4s linear; } /* fc-stat uses ::before because ::after is taken by the gradient overlay */ .fc-stat::before { content: ""; position: absolute; inset: 0; left: 50%; right: 51%; background: rgba(255, 255, 255, .3); opacity: 1; pointer-events: none; transition: all .4s linear; z-index: 1; } /* Trigger: each element's hover parent */ .about-media:hover .about-img::after { left: 0; right: 0; opacity: 0; } .commitment-photo:hover .ap-img::after { left: 0; right: 0; opacity: 0; } .wc-photo:hover::after { left: 0; right: 0; opacity: 0; } .visual:hover .photo::after { left: 0; right: 0; opacity: 0; } .svc-wrap:hover .svc-img-wrap::after { left: 0; right: 0; opacity: 0; } .s2-card:hover .s2-img::after { left: 0; right: 0; opacity: 0; } .features-card:hover .fc-stat::before { left: 0; right: 0; opacity: 0; } /* ════════════════════════════════════════════ GOLD DECORATIVE CIRCLE Semi-transparent white circle peeking from the bottom-right of every golden element. Control radius with --deco-r. ════════════════════════════════════════════ */ .svc-icon, .svc-plus, .s2-plus, .vbadge, .about-emblem, .about-badge .badge-icon, .about-cta .arrow { position: relative; overflow: hidden; } .svc-icon::after, .svc-plus::after, .s2-plus::after, .vbadge::after, .about-emblem::after, .about-badge .badge-icon::after, .about-cta .arrow::after { content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .15); pointer-events: none; width: var(--deco-r, 36px); height: var(--deco-r, 36px); bottom: calc(var(--deco-r, 36px) * -.4); right: calc(var(--deco-r, 36px) * -.28); } /* Per-element sizes */ .svc-icon, .about-emblem { --deco-r: 50px; } .svc-plus, .s2-plus { --deco-r: 36px; } .about-badge .badge-icon { --deco-r: 32px; } .about-cta .arrow { --deco-r: 26px; } .vbadge { --deco-r: 22px; } /* Keep SVG/icon above the ::after circle in stacking order */ .svc-icon svg, .svc-plus svg, .s2-plus svg, .vbadge svg, .about-emblem svg, .about-badge .badge-icon svg, .about-cta .arrow svg { position: relative; z-index: 1; }