/* =================================================================================== 0) Variables & Base — CENTRALIZED COLOR / TOKEN SYSTEM =================================================================================== */ :root { /* ===== Brand / Base ===== */ --clr-bg-main: #E1D0BF; /* site background (beige) */ --clr-text-main: #333333; /* default body text */ --clr-primary: #D6D6D6; /* light neutral sections / accents */ --clr-secondary: #c19a6b; /* warm brand accent */ --clr-accent: #e6b17e; /* secondary accent */ --clr-white: #ffffff; /* white */ --clr-black: #000000; /* black */ --paper-blue: #eaf6fb; /* gradient start used on */ /* ===== Navbar ===== */ --nav-h: 64px; /* visual navbar height (used on mobile menu offset) */ --nav-bg-solid: #E9DBCB; /* solid navbar bg when scrolled (you use an image overlay) */ --nav-link: #CFB56C; /* navbar link color */ --nav-hover-bg: #ffffff; /* navbar hover bg */ --nav-hover-text: #000000; /* navbar hover text */ --nav-scrolled-text: #1f1f1f; /* link text after scroll over solid bg */ /* ===== Grays / Neutrals ===== */ --gray-50: #F7F8F9; /* very light gray section */ --gray-100: #D6D6D6; /* alias of primary */ --gray-300: #c9c9c9; /* light gray (active dot) */ --gray-700: #4a4a4a; /* medium gray (carousel dots etc.) */ --gray-800: #222222; /* dark gray borders on dark bg */ --charcoal: #2a2a2a; /* deep gray outline you used */ --near-black: #111111; /* very dark background (buttons) */ --ink-900: #1a1a1a; /* another very dark shade (hover) */ /* ===== Reviews (Google pill) ===== */ --g-pill-bg: #202124; /* pill background */ --g-pill-bd: #2d2d2d; /* pill border */ --g-pill-text: #e8eaed; /* pill text */ /* ===== Specialty ===== */ --star: #f6a800; /* review star gold */ --purple-400: #a27ccc; /* gift card icon color */ /* ===== Transparencies / Shadows (keep exact alphas you used) ===== */ --white-08: rgba(255,255,255,.08); --white-18: rgba(255,255,255,.18); --white-35: rgba(255,255,255,.35); --white-70: rgba(255,255,255,.70); --white-85: rgba(255,255,255,.85); --white-90: rgba(255,255,255,.90); --black-10: rgba(0,0,0,.10); --black-12: rgba(0,0,0,.12); --black-18: rgba(0,0,0,.18); --black-22: rgba(0,0,0,.22); --black-24: rgba(0,0,0,.24); --black-28: rgba(0,0,0,.28); --black-35: rgba(0,0,0,.35); --black-45: rgba(0,0,0,.45); /* gift card special borders (exact tints you had) */ --gift-bd-outer: rgba(134,90,190,.18); --gift-bd-inner: rgba(200,170,230,.35); /* CTA gold shadow tints used in footer */ --gold-shadow-18: rgba(200,150,100,.18); --gold-shadow-24: rgba(200,150,100,.24); /* ===== Typography ===== */ --font-script: "Poppins"; --font-ui: "DM Sans", system-ui, -apple-system, sans-serif; --font-heading: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --ls-tight: .01em; --ls-wide: .06em; } html, body { margin: 0; padding: 0; width: 100%; background: linear-gradient(135deg, var(--paper-blue) 0%, var(--clr-bg-main) 100%) !important; font-family: var(--font-body); font-weight: 400; line-height: 1.6; color: var(--clr-text-main); } .navbar, .cl-nav, .cl-nav .container-fluid { margin: 0 !important; padding: 0 !important; border: 0 !important; } /* REMOVE any fixed-top offset */ main.page-wrap { padding-top: 0 !important; margin-top: 0 !important; } /* Make sure the hero isn’t adding a top gap */ .welcome-banner { margin-top: 0 !important; padding-top: 0 !important; } /* If you previously used a variable offset, neutralize it */ :root { --nav-h: 0px; } /* or keep your value, but don't use it on page-wrap */ /* =================================================================================== 1) Navbar (overlay on hero) =================================================================================== */ /* Base: transparent at top so page background shows through */ .cl-nav{ background: #ffffff !important; transition: background .35s ease, box-shadow .35s ease, color .25s ease; border: 0; z-index: 1000; padding-top: 0 !important; padding-bottom: 0 !important; } .cl-nav { margin: 0 !important; padding: 0 !important; } .cl-nav .container-fluid { margin: 0 !important; padding: 0 !important; } /* keep inner spacing tight */ .cl-nav .container-fluid{ padding-top:0 !important; padding-bottom:0 !important; } /* Link colors at top (over hero) */ .cl-nav .nav-link, .cl-nav .navbar-brand{ color:#fff !important; text-shadow:0 1px 2px rgba(0,0,0,.35); } /* ---- Clear “card” when scrolled (no blur) ---- */ .cl-nav.scrolled{ background: rgba(15,15,15,.72) !important; /* translucent, tweak alpha */ box-shadow: 0 10px 26px rgba(0,0,0,.22); border-bottom: 1px solid rgba(255,255,255,.06); /* faint edge = card feel */ } /* Link color on scrolled bar */ .cl-nav.scrolled .nav-link, .cl-nav.scrolled .navbar-brand{ color:#e6d690 !important; /* your gold */ text-shadow:none; } /* Ensure it never hides */ .nav-hide{ transform:none !important; } /* Optional: slightly round the inside so it reads more like a card */ @media (min-width: 992px){ .cl-nav.scrolled .container-fluid{ border-radius: 14px; } } /* Brand logo */ img.logobusiness { background: black; width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--clr-white); object-fit: cover; box-shadow: 0 4px 12px rgba(0,0,0,0.25); margin-left: 1rem; /* Run two animations: spin + bounce-in */ animation: spinCoin 3s ease-in-out 1, iphoneBounce 0.9s ease-out 1; } @keyframes spinCoin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(720deg); } /* 2 spins */ } @media (max-width: 991.98px) { img.logobusiness { height: 46px; width: 46px; padding: 3px; } } /* Navbar brand text (if used) */ .navbar-brand { font-family: var(--font-heading); font-weight: 700; font-size: 2rem; letter-spacing: var(--ls-tight); color: var(--clr-white) !important; } /* Menu link base + hover */ .navbar-nav.ms-auto.me-3 .nav-link, .navbar-nav.ms-auto.me-3 .u-hover-pill { font-family: var(--font-body); font-weight: 700; letter-spacing: var(--ls-wide); color: var(--nav-link) !important; /*Text color nav-bar*/ font-size: 1.25rem; margin-left: 1.25rem; display: inline-block; padding: 6px 12px; border-radius: 20px; transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; } .navbar-nav.ms-auto.me-3 .nav-link:hover, .navbar-nav.ms-auto.me-3 .u-hover-pill:hover, .navbar-nav.ms-auto.me-3 .nav-link:focus, .navbar-nav.ms-auto.me-3 .u-hover-pill:focus-visible { background: var(--nav-hover-bg); color: var(--nav-hover-text) !important; transform: translateY(-1px); box-shadow: 0 4px 14px var(--black-12); } /* Avatar */ .profile-badge { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--clr-white); object-fit: cover; box-shadow: 0 2px 6px var(--black-20); margin-left: 1rem; } .cl-nav.scrolled .profile-badge { border-color: var(--clr-white); } /* Mobile collapsed menu card (right-aligned) */ @media (max-width: 991.98px) { .cl-nav .container-fluid { position: relative; } .cl-mobile.collapse { position: absolute; top: var(--nav-h); right: 12px; width: min(280px, calc(100vw - 24px)); background: var(--clr-white); border-radius: 14px; box-shadow: 0 18px 40px var(--black-18); padding: 10px 12px; z-index: 1100; } .cl-mobile.collapse.show { display: block; } .cl-mobile .navbar-nav { margin: 0; align-items: flex-end; text-align: right; } .cl-mobile .nav-item + .nav-item { margin-top: 6px; } .cl-mobile .u-hover-pill, .cl-mobile .nav-link { display: block; padding: 10px 12px; border-radius: 10px; } .cl-mobile .profile-badge { margin: 8px 0 4px 0; } } /* Toggler visible over image */ .navbar-toggler { filter: drop-shadow(0 1px 2px var(--black-35)); border-color: var(--white-70); } .navbar-toggler .navbar-toggler-icon { background-image: none; width: 24px; height: 2px; background: var(--clr-white); position: relative; } .navbar-toggler .navbar-toggler-icon::before, .navbar-toggler .navbar-toggler-icon::after { content:""; position:absolute; left:0; width:24px; height:2px; background: var(--clr-white); } .navbar-toggler .navbar-toggler-icon::before { top:-7px; } .navbar-toggler .navbar-toggler-icon::after { top: 7px; } /* hide Bootstrap caret – we’ll use our own underline */ .cl-nav .dropdown-toggle::after{ display:none; } /* underline on hover/open (like pic) */ .cl-nav .nav-item.dropdown > .nav-link{ position:relative; } .cl-nav .nav-item.dropdown > .nav-link::before{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px; width:0; margin:auto; background: var(--purple-400); border-radius:3px; transition: width .22s ease; } .cl-nav .nav-item.dropdown.show > .nav-link::before, .cl-nav .nav-item.dropdown > .nav-link:hover::before{ width:100%; } /* Hover and keyboard focus only */ .navbar-nav.ms-auto.me-3 .u-hover-pill:hover, .navbar-nav.ms-auto.me-3 .u-hover-pill:focus-visible { background: var(--nav-hover-bg); color: var(--nav-hover-text) !important; transform: translateY(-1px); box-shadow: 0 4px 14px var(--black-12); } /* Make plain :focus do nothing (so click doesn't stick) */ .cl-nav .nav-link:focus { background: transparent; color: var(--nav-link) !important; box-shadow: none; transform: none; outline: none; } /* =================================================================================== Drop Down =================================================================================== */ .cl-dropdown{ --bg:#121218; /* dark panel */ background: var(--bg); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; box-shadow: 0 16px 38px rgba(0,0,0,.35); padding: 8px; min-width: 240px; overflow:hidden; z-index: 1200; } .cl-dropdown .dropdown-item{ color:#eaeaea; padding: 10px 14px; border-radius: 8px; } .cl-dropdown .dropdown-item:hover, .cl-dropdown .dropdown-item:focus, .cl-dropdown .dropdown-item.active{ background: var(--clr-bg-main); /* you already defined this token */ color:#fff; } .cl-dropdown .dropdown-divider{ border-top-color: rgba(255,255,255,.08); } :root{ --pink-500: #e79dc4; /* pink tone */ --pink-shadow: rgba(231,157,196,.55);/* shadow color */ } /* show pink shadow while pressing */ .cl-nav .nav-link.u-hover-pill:active{ box-shadow: 0 10px 22px var(--clr-bg-main); } /* keep it selected when it has .is-active */ .cl-nav .nav-link.u-hover-pill.is-active{ box-shadow: 0 10px 22px var(--clr-bg-main); background: #fff; /* optional: keep the white pill */ color: #000 !important; } /* =================================================================================== End Drop Down =================================================================================== */ /* =================================================================================== 2) Hero (Welcome) =================================================================================== */ .welcome-banner { display: flex; align-items: center; /* vertical centering */ justify-content: center; /* horizontal centering */ background-color: #fff; /* optional: clean white background */ min-height: 100vh; padding:0px; margin:0px; /* If using the image as content */ } .welcome-banner img { max-width: 600px; /* control size */ width: 80%; /* responsive */ height: auto; /* keep aspect ratio */ } /* Typography */ @media (min-width: 320px){ .fly-text { font-size: clamp(2rem, 4vw + 1rem, 4rem); font-weight: 700; letter-spacing: .02em; } .welcome-sub{ font-size: clamp(1rem, 1.2vw + .6rem, 1.35rem); opacity: .95; margin-top: .5rem; } } /* =================================================================================== 3) Sections (demo placeholders) =================================================================================== */ /* ========================= Section: Split Pricing ========================= */ .pricing-split { position: relative; max-width: 1200px; margin: 0 auto; padding: 56px 16px; display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 48px; align-items: start; overflow: hidden; } /* big stacked heading (left) */ .pricing-title{ font-family: var(--font-script); font-weight: 400; /* script looks best at 400 */ letter-spacing: 0; /* no tracking for script */ text-transform: none; /* keep natural case */ line-height: 0.95; font-size: clamp(42px, 6vw, 88px); } /* watermark behind (uses data-watermark) */ .pricing-split::after{ font-family: var(--font-script); letter-spacing: 0; opacity: .07; /* soft */ } /* right-side list */ .price-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; } .price-item { display: flex; align-items: baseline; gap: 12px; } .price-list, .price-item, .price-name, .price-amt, .price-meta, .price-subtitle{ font-family: var(--font-ui); } /* light section background like sample */ .section-soft { background-color: var(--clr-primary); } .section-soft2 { background-color: var(--gray-50); } /* --- leader line between name and price --- */ .price-item{ display: flex; align-items: center; /* center the line nicely */ gap: 12px; } .price-name{ flex: 0 1 auto; font-weight: 600; } .price-amt { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; } .price-rule{ flex: 1 1 auto; /* stretch between name and price */ border-bottom: 1px solid var(--black-18); /* the “----” */ transform: translateY(-.2em); /* align with text baseline */ } .pricing-split{ position: relative; isolation: isolate; /* keep pseudo below the content */ } .pricing-split::after{ content: attr(data-watermark); /* read text from data-watermark */ position: absolute; left: 16%; right: 0; bottom: -12px; font-family: var(--font-script, "Lavishly Yours", cursive); font-size: clamp(72px, 18vw, 260px); line-height: 1; color: var(--clr-black); opacity: .06; /* subtle */ white-space: nowrap; pointer-events: none; z-index: 0; /* behind */ } /* keep real content above the watermark */ .pricing-title, .price-list{ position: relative; z-index: 1; } /* responsive */ @media (max-width: 991.98px){ .pricing-split{ grid-template-columns: 1fr; gap: 28px; padding: 40px 16px; } .pricing-split::after{ left: 6%; } } /* ========================= Section: End Split Pricing ========================= */ .service1 { background-color: var(--gray-50); } .service2 { background-color: var(--clr-primary); padding: 20px; } .service3 { background-color: var(--gray-50); padding: 20px; } .service4 { background-color: var(--clr-primary); padding: 20px; } .service5 { background-color: var(--gray-50); padding: 20px; } .service-title { font-family: var(--font-heading); color: var(--clr-primary); margin-bottom: 0.75rem; } /* =================================================================================== 4) Universal Hover Pill =================================================================================== */ .u-hover-pill { display: inline-block; padding: 6px 10px; border-radius: 10px; color: inherit; text-decoration: none; transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; outline: none; } .u-hover-pill:hover, .u-hover-pill:focus-visible { background: var(--clr-bg-main); color: var(--clr-black); transform: translateY(-1px); box-shadow: 0 4px 14px var(--black-12); } .u-hover-pill.is-active { background: var(--clr-primary); color: var(--clr-white); } /* =================================================================================== 5) Products Carousel =================================================================================== */ .products-hero{ background: var(--clr-bg-main); color: var(--clr-white); padding: 48px 0 56px; } .products-title{ font-family: var(--font-heading); font-weight: 600; letter-spacing:.02em; text-align:center; font-size:clamp(1.8rem, 2.4vw + 1rem, 3rem); text-shadow: 0 2px 8px var(--black-35); margin:0 0 24px; } /* Shell */ .product-carousel{ position:relative; max-width:1300px; margin:0 auto; padding:0 56px; /* room for arrows */ } /* Arrows */ .pc-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; background: var(--near-black); color: var(--clr-white); border:1px solid var(--gray-800); z-index:2; transition:transform .15s ease, background .2s ease, opacity .2s ease; } .pc-arrow-left{ left:10px; } .pc-arrow-right{ right:10px; } .pc-arrow:hover{ background: var(--ink-900); transform:translateY(-50%) scale(1.04); } /* Track */ .pc-viewport{ overflow:hidden; } .pc-track{ display:flex; gap:28px; will-change:transform; transition:transform .35s ease; padding:6px 0; } /* Card */ .pc-card{ min-width:0; flex:0 0 calc((100% - 28px*3)/4); display:flex; flex-direction:column; align-items:center; } .pc-card img{ width:100%; aspect-ratio: 4 / 3; object-fit:cover; object-position:center; border-radius:14px; box-shadow: 0 8px 28px var(--black-35); transition:transform .25s ease, box-shadow .25s ease; } .pc-card:hover img{ transform:translateY(-3px); box-shadow:0 12px 36px var(--black-45); } .pc-card-title{ font-family:var(--font-heading); font-weight:600; font-size:clamp(1.1rem, .5vw + 1rem, 2.1rem); margin:.9rem 0 0; text-align:center; color: var(--clr-white); } /* Dots */ .pc-dots{ display:flex; gap:10px; justify-content:center; margin:18px 0 0; } .pc-dots button{ width:10px; height:10px; border-radius:50%; background: var(--gray-700); border:none; transition:transform .2s ease, background .2s ease; } .pc-dots button[aria-current="true"]{ background: var(--gray-300); transform:scale(1.1); } /* Responsive cards */ @media (max-width: 1199.98px){ .pc-card{ flex:0 0 calc((100% - 28px)/2); } } @media (max-width: 767.98px){ .product-carousel{ padding:0 42px; } .pc-card{ flex:0 0 100%; } } /* =================================================================================== 6) Gift =================================================================================== */ .gift-hero{ position: relative; background-image: url("/static/images/Signature/hero_gift.jpg"); background-size: cover; background-position: center; padding: 56px 0 72px; isolation: isolate; } .gift-hero::before{ content:""; position:absolute; inset:0; background: linear-gradient(var(--black-35), var(--black-35)); z-index:-1; } .gift-title{ color: var(--clr-white); font-family: var(--font-heading); font-weight: 600; letter-spacing:.02em; text-shadow: 0 2px 8px var(--black-35); } .gift-card{ background: rgba(255,255,255,.95); border-radius: 18px; border: 1px solid var(--gift-bd-outer); box-shadow: 0 18px 40px var(--black-10); transform: translateZ(0); transition: transform .28s ease, box-shadow .28s ease; } .gift-card-inner{ border: 2px solid var(--gift-bd-inner); border-radius: 14px; padding: 28px 26px; } .gift-card:hover{ transform: scale(1.025); box-shadow: 0 26px 60px var(--black-18); } .gift-card-icon{ color: var(--purple-400); display:flex; align-items:center; justify-content:center; margin-bottom: 10px; } .gift-card-title{ text-align:center; font-family: var(--font-heading); font-weight: 600; line-height: 1.35; margin-bottom: 12px; color: #2a2a2a; } .gift-card-lead{ color:#5a5a5a; margin-bottom: .5rem; } /* exact tones preserved */ .gift-bullets{ margin: 0 0 0 1rem; } .gift-bullets li{ margin: .4rem 0; color:#3a3a3a; } /* exact tone preserved */ .gift-bullets.child{ margin-top:.25rem; } @media (prefers-reduced-motion: reduce){ .gift-card{ transition: box-shadow .2s ease; } .gift-card:hover{ transform: none; } } /* =================================================================================== 7) Contact (map + form) =================================================================================== */ .card .form-label{ font-weight:600; } .card .form-control, .card .form-select{ border-radius: 12px; } .map-embed{ position: relative; width: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 24px var(--black-12); } .map-embed::before{ content:""; display:block; padding-top:56.25%; } .map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* =================================================================================== Google Reviews =================================================================================== */ .section-dark.reviews-section{ background: var(--clr-bg-main); color: var(--white-90); } .reviews-title{ font-family: var(--font-heading, "Poppins", system-ui, sans-serif); font-weight: 800; letter-spacing:.06em; text-transform: uppercase; color: var(--clr-white); text-shadow: 0 2px 8px var(--black-35); } .reviews-grid{ display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 32px; } @media (max-width: 991.98px){ .reviews-grid{ grid-template-columns: 1fr; } } .review-card{ display:grid; grid-template-columns: 72px 1fr; gap:14px; background: var(--clr-white); border:1px solid var(--charcoal); border-radius:14px; padding:16px; box-shadow: 0 10px 24px var(--black-18); } .review-avatar{ width:72px; height:72px; border-radius:12px; object-fit:cover; } .review-name{ font-weight:800; color: var(--clr-text-main); margin:0; } .review-powered{ font-size:.85rem; color: #9f9f9f; } /* keeps exact neutral as you had */ .review-stars{ color: var(--star); letter-spacing:1px; margin: 6px 0 8px; } .review-text{ color: var(--clr-text-main); line-height:1.6; } /* Small “Google” pill */ .google-pill{ display:inline-block; background: var(--g-pill-bg); color: var(--g-pill-text); border:1px solid var(--g-pill-bd); font-size:.75rem; padding:2px 8px; border-radius:999px; margin-left:6px; } /* =================================================================================== End Google Reviews =================================================================================== */ /* =================================================================================== Gallery =================================================================================== */ /* Card look */ .gallery-card{ border-radius: 18px; overflow: hidden; background: var(--clr-black); box-shadow: 0 10px 30px var(--black-12); transition: transform .2s ease, box-shadow .2s ease; } .gallery-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 36px var(--black-18); } /* Media box uses Bootstrap ratio; make it a bit shorter than 4:5 */ .gallery-media{ position:relative; cursor:pointer; } .gallery-media.is-short{ --bs-aspect-ratio:110%; } /* lower height; tweak 105–115% as you like */ /* Make content cover */ .gallery-media > img, .gallery-media > video{ display:block; width:100%; height:100%; object-fit:cover; } /* Play badge overlay */ .play-badge{ position:absolute; inset:0; display:grid; place-items:center; width:100%; height:100%; font-size:44px; color: var(--clr-white); background:transparent; border:0; pointer-events:none; /* click is handled by container */ text-shadow: 0 2px 8px var(--black-35); transition: opacity .2s ease, transform .2s ease; } .gallery-card.playing .play-badge{ opacity:.12; transform: scale(.95); } /* (Fallback) Hide any UA control surfaces if they show up on some browsers */ #gallery video::-webkit-media-controls { display:none !important; } /*Css Button-73*/ .button-73 { appearance: none; background-color: #FFFFFF; border-radius: 40em; border: none; box-shadow: #ADCFFF 0 -12px 6px inset; box-sizing: border-box; color: #000000 !important; cursor: pointer; display: inline-block; font-family: -apple-system,sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: -.24px; margin: 0; outline: none; padding: 1rem 1.3rem; text-align: center; text-decoration: none; transition: all .15s; user-select: none; -webkit-user-select: none; touch-action: manipulation; } .button-73:hover { background-color: #E1D0BF; box-shadow: #FF6314 0 -6px 8px inset; transform: scale(1.125); text-decoration: none; color: #fff !important; } .button-73:active { transform: scale(1.025); } @media (min-width: 768px) { .button-73 { font-size: 1.5rem; padding: .75rem 2rem; } } /* =================================================================================== End Gallery =================================================================================== */ /* =================================================================================== Contact information =================================================================================== */ /* Section background (fix the dot) */ .section-soft1{ background: var(--clr-bg-main); } /* Center the single card */ .contact-card{ max-width: 900px; margin: 0 auto; border-radius: 28px; box-shadow: 0 24px 60px var(--black-12); } /* Base card */ .c-card{ background: var(--clr-white); border-radius:22px; box-shadow:0 10px 30px var(--black-12); } /* BIG circular avatar — keep this as the ONLY .ci-avatar rule */ .contact-card .ci-avatar{ --size: 280px; /* make bigger (try 300px if you want) */ width: var(--size); height: var(--size); border-radius: 50%; object-fit: cover; border: 10px solid var(--clr-white); /* inner ring */ outline: 5px solid var(--black-10); /* soft outer ring */ box-shadow: 0 16px 40px var(--black-22); margin-right: 20px; } @media (max-width: 576px){ .contact-card .ci-avatar{ --size: 200px; } } /* Contact list (unchanged) */ .c-list .c-item{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--black-10); } .c-list .c-item:last-child{ border-bottom:0; } .c-list .bi{ font-size:1.25rem; line-height:1; color:#111; } /* keep icon tone as-is */ /* =================================================================================== End Contact information =================================================================================== */ /* =================================================================================== Footer (dark) =================================================================================== */ .footer_textlogo{ font-family : var(--font-script); font-weight: 700; font-size: 2.5rem } .site-footer.pro-footer.footer--dark { background: var(--clr-black); color: #f4f4f4; padding: 56px 0 40px; border-top: none; font-family: var(--font-heading); } .footer-brand .brand-text, .footer--dark .footer-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; letter-spacing: var(--ls-tight); margin: 0 0 1rem; } .footer--dark .footer-blurb { color: var(--white-85); line-height: 1.75; margin-top: 1rem; font-family: var(--font-body); } .footer--dark .footer-links, .footer--dark .footer-hours { list-style: none; margin: 0; padding: 0; } .footer--dark .footer-links li + li { margin-top: .65rem; } .footer--dark .footer-links a { font-family: var(--font-body); display: inline-block; padding: 6px 10px; border-radius: 10px; transition: all 0.25s ease; } .footer--dark .footer-links a:hover { background: var(--clr-bg-main); color: var(--clr-white); transform: translateY(-2px); } .footer--dark .footer-social { display: flex; gap: .75rem; } .footer--dark .footer-social a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--clr-white); background: var(--near-black); border: 1px solid var(--gray-800); transition: transform .2s ease, background .2s ease, color .2s ease; } .footer--dark .footer-social a:hover { transform: translateY(-2px); background: var(--clr-primary); color: var(--clr-white); } .footer--dark .footer-hours li { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--white-08); font-family: var(--font-body); } .footer--dark .footer-hours li:last-child { border-bottom: none; } .footer--dark .footer-hours li > span:last-child { text-align: right; } .footer--dark .contact-line { font-family: var(--font-body); color: var(--white-90); text-decoration: none; display: inline-block; padding: 6px 10px; border-radius: 10px; margin: 4px 0; transition: all 0.25s ease; } .footer--dark .contact-line i { color: var(--clr-accent); margin-right: 8px; } .footer--dark .contact-line:hover { background: var(--clr-bg-main); color: var(--clr-white); transform: translateY(-2px); } .footer--dark .footer-cta { font-family: var(--font-body); background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary)); border: none; color: var(--clr-white); border-radius: 12px; padding: .7rem 1.1rem; margin-top: .75rem; transition: transform .15s ease, box-shadow .2s ease; box-shadow: 0 10px 28px var(--gold-shadow-18); } .footer--dark .footer-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--gold-shadow-24); } .footer--dark .footer-card { background: transparent; border: none; box-shadow: none; padding: 0; } .footer--dark .footer-sep { border: 0; border-top: 1px solid var(--white-08); margin: 28px 0 18px; } .footer--dark .footer-bottom .muted { color: var(--white-70); } .footer--dark .footer-badges { display: flex; gap: .5rem; flex-wrap: wrap; } .footer--dark .badge-soft { background: var(--near-black); border: 1px solid var(--gray-800); color: var(--clr-white); border-radius: 999px; padding: .35rem .7rem; font-size: .8rem; } @media (max-width: 991.98px) { .footer--dark { padding: 44px 0 32px; } .footer--dark .footer-title { font-size: 1.25rem; } } /* =================================================================================== 9) Accessibility =================================================================================== */ @media (prefers-reduced-motion: reduce) { .cl-nav { transition: none; } .u-hover-pill { transition: background .2s ease, color .2s ease; } }