/* ALOHA brand layer — loaded AFTER Dark Factory's styles.css. DF blocks are inline-styled (so we don't fight them); this file powers the `raw` blocks (promo banner, DaySmart holding spots, contact form) and adds a few global flourishes. Palette: mochi teal #7DD3C0, sunset gradient, soft pink. */ :root{ --aloha-pink:#FFB6D9; --aloha-cream:#FFF8E7; --aloha-teal:#7DD3C0; --aloha-teal-deep:#1f7d75; --aloha-teal-ink:#154f4b; --aloha-sunset:linear-gradient(95deg,#c8362a,#e85d3d,#f08654,#f3a946,#f5cd58); } /* SAFETY NET: Dark Factory ships .df-animate at opacity:0 and reveals it via its own scroll observer (which we don't run). We must force that content visible ourselves. - When our reveal is NOT active (script failed / no IntersectionObserver): force ALL .df-animate visible, so nothing is ever blank. - When our reveal IS active (html.js-reveal): our IntersectionObserver only reveals
elements. DF puts .df-animate on INNER content too (hero heading/image/CTAs), which our observer never touches — so force inner (non-section) .df-animate visible or it stays opacity:0 forever (blank heroes). It rides its parent section's reveal. Section-level .df-animate is left to the section scroll-reveal so it still pops. */ html:not(.js-reveal) .df-animate{ opacity:1 !important; transform:none !important; } html.js-reveal .df-animate:not(section){ opacity:1 !important; transform:none !important; } /* Sunset stripe across the top of the fixed nav (only inline-style override we force). */ header[data-df-component="nav-scroll"]{ border-top:4px solid transparent !important; border-image:var(--aloha-sunset) 1 !important; } /* Teal focus ring + selection for accessibility + brand. */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:3px solid var(--aloha-teal); outline-offset:2px; } ::selection{ background:var(--aloha-teal); color:#08312c; } html{ scroll-behavior:smooth; } img{ max-width:100%; height:auto; } /* Emoji rendered as Twemoji SVG so they look identical on every device (no tofu). */ .aloha-emoji{ width:1em; height:1em; display:inline-block; vertical-align:-0.15em; margin:0; } /* Shared wrapper for raw sections. */ .aloha-sec{ padding:4rem 1.5rem; } .aloha-wrap{ max-width:1200px; margin:0 auto; } /* Sunset promo banner (e.g. Sky Harbor "$15 off"). */ .aloha-promo{ background:var(--aloha-sunset); color:#fff; text-align:center; padding:1.1rem 1.5rem; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.25); } .aloha-promo strong{ font-weight:800; } .aloha-promo .aloha-promo-sub{ display:block; font-weight:500; font-size:.9rem; opacity:.95; margin-top:.15rem; } /* DaySmart holding spot — a real reserved card, clearly "coming soon", never a dead end. */ .aloha-hold{ background:var(--color-surface,#fff); border:2px dashed var(--aloha-teal); border-radius:1.25rem; padding:2rem 1.5rem; text-align:center; max-width:640px; margin:0 auto; } .aloha-hold .aloha-badge{ display:inline-block; background:var(--aloha-teal); color:#08312c; font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px; margin-bottom:.9rem; } .aloha-hold h2{ font-family:var(--font-heading,Quicksand),sans-serif; font-size:1.4rem; font-weight:700; line-height:1.2; color:var(--color-text,#15403b); margin:0 0 .5rem; } .aloha-hold p{ color:var(--color-text-muted,#4a615c); max-width:34rem; margin:0 auto 1.25rem; line-height:1.6; } .aloha-hold .aloha-call{ display:inline-flex; align-items:center; gap:.5rem; background:var(--aloha-teal-deep); color:#fff; font-weight:700; padding:.7rem 1.4rem; border-radius:999px; text-decoration:none; } .aloha-hold .aloha-call:hover{ filter:brightness(1.06); text-decoration:none; } /* Pink playful chip. */ .aloha-chip-pink{ display:inline-block; background:var(--aloha-pink); color:#7a2350; font-weight:700; font-size:.8rem; padding:.25rem .7rem; border-radius:999px; } /* Interim PHP contact form (raw block). */ .aloha-contact{ max-width:560px; margin:0 auto; } .aloha-contact .aloha-field{ margin-bottom:1rem; text-align:left; } .aloha-contact label{ display:block; font-size:.85rem; font-weight:600; color:var(--color-text,#15403b); margin-bottom:.35rem; } .aloha-contact input,.aloha-contact textarea{ width:100%; padding:.75rem; border:1px solid var(--color-border,#bfe6dd); border-radius:.875rem; font-size:16px; font-family:inherit; background:#fff; color:var(--color-text,#15403b); } .aloha-contact textarea{ resize:vertical; min-height:130px; } .aloha-contact button{ width:100%; padding:.9rem; background:var(--aloha-teal-deep); color:#fff; border:none; border-radius:.875rem; font-weight:700; font-size:1rem; cursor:pointer; } .aloha-contact button:hover{ filter:brightness(1.06); } .aloha-hp{ position:absolute; left:-9999px; } /* honeypot */ .aloha-sent{ background:#eafaf4; border:1px solid var(--aloha-teal); color:#15403b; padding:1rem; border-radius:.875rem; text-align:center; font-weight:600; margin-bottom:1rem; } /* Pricing — grooming package cards (package × size matrix, mirrors the in-store board). */ .aloha-pricegrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.25rem; } .aloha-pcard{ background:var(--color-surface,#fff); border:1px solid var(--color-border,#bfe6dd); border-radius:1.25rem; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 6px 24px rgba(21,79,75,.07); } .aloha-pcard h3{ font-family:var(--font-heading,Quicksand),sans-serif; color:#fff; margin:0; padding:1rem 1.25rem; font-size:1.25rem; } .aloha-pcard .aloha-psub{ display:block; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; font-weight:600; opacity:.92; } .aloha-pcard .aloha-pbody{ padding:1.1rem 1.25rem 1.3rem; display:flex; flex-direction:column; gap:.9rem; flex:1; } .aloha-pdesc{ color:var(--color-text-muted,#4a615c); font-size:.9rem; line-height:1.5; margin:0; } .aloha-pincl{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.3rem .6rem; } .aloha-pincl li{ font-size:.8rem; color:var(--color-text,#15403b); display:flex; align-items:center; gap:.3rem; } .aloha-pincl li::before{ content:""; display:inline-block; width:.9em; height:.9em; margin-right:.35em; vertical-align:-0.1em; background:url(assets/emoji/1f43e.svg) no-repeat center/contain; } .aloha-psizes{ margin-top:auto; border-top:1px dashed var(--color-border,#bfe6dd); padding-top:.8rem; display:grid; grid-template-columns:1fr 1fr; gap:.3rem .9rem; } .aloha-psizes div{ display:flex; justify-content:space-between; font-size:.92rem; color:var(--color-text,#15403b); } .aloha-psizes b{ color:var(--aloha-teal-deep); } /* Header tints per package (sunset family + teal). */ .aloha-pcard.luau h3{ background:#e85d3d; } .aloha-pcard.keiki h3{ background:#b3357a; } .aloha-pcard.surf h3{ background:#f08654; } .aloha-pcard.ohana h3{ background:var(--aloha-teal-deep); } /* À la carte + simple tier rows. */ .aloha-alacarte{ max-width:640px; margin:1.5rem auto 0; background:var(--color-surface,#fff); border:1px solid var(--color-border,#bfe6dd); border-radius:1.25rem; padding:1.25rem 1.5rem; } .aloha-alacarte h3{ font-family:var(--font-heading,Quicksand),sans-serif; margin:0 0 .6rem; color:var(--color-text,#15403b); } .aloha-alacarte div{ display:flex; justify-content:space-between; padding:.35rem 0; border-bottom:1px dotted var(--color-border,#bfe6dd); color:var(--color-text-muted,#4a615c); } .aloha-alacarte div b{ color:var(--aloha-teal-deep); } .aloha-tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; max-width:760px; margin:1.5rem auto 0; } .aloha-tier{ background:var(--color-surface,#fff); border:1px solid var(--color-border,#bfe6dd); border-radius:1.1rem; padding:1.2rem; text-align:center; } .aloha-tier .aloha-tprice{ font-family:var(--font-heading,Quicksand),sans-serif; font-size:1.8rem; font-weight:800; color:var(--aloha-teal-deep); } .aloha-tier .aloha-tlabel{ color:var(--color-text-muted,#4a615c); font-size:.85rem; margin-top:.2rem; } .aloha-pnote{ text-align:center; color:var(--color-text-muted,#4a615c); font-size:.82rem; margin-top:1rem; margin-left:auto; margin-right:auto; } /* Home service tiles — surfaces the Aloha caricatures + links to each service page. */ .aloha-services{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; } .aloha-stile{ display:block; text-decoration:none; border-radius:1.25rem; overflow:hidden; background:var(--color-surface,#fff); border:1px solid var(--color-border,#bfe6dd); box-shadow:0 6px 24px rgba(21,79,75,.08); transition:transform .15s, box-shadow .15s; } .aloha-stile:hover{ transform:translateY(-5px); box-shadow:0 14px 36px rgba(21,79,75,.16); text-decoration:none; } .aloha-stile img{ width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center; display:block; background:var(--aloha-cream); } .aloha-stile .aloha-stile-b{ padding:1rem 1.15rem 1.2rem; } .aloha-stile h3{ font-family:var(--font-heading,Quicksand),sans-serif; color:var(--color-text,#15403b); margin:0 0 .25rem; font-size:1.25rem; } .aloha-stile p{ color:var(--color-text-muted,#4a615c); font-size:.88rem; margin:0; line-height:1.45; } .aloha-stile .aloha-go{ color:var(--aloha-teal-deep); font-weight:700; font-size:.85rem; display:inline-block; margin-top:.55rem; } /* ---- Custom nav with logo (upper-left) ---- */ .aloha-nav{ position:fixed; top:0; left:0; right:0; z-index:50; background:var(--color-surface,#fff); box-shadow:0 2px 12px rgba(21,79,75,.07); } .aloha-nav-in{ max-width:1200px; margin:0 auto; padding:0 1.25rem; height:64px; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .aloha-logo{ display:flex; align-items:center; } .aloha-logo img{ height:46px; width:auto; display:block; } .aloha-nav-links{ display:flex; align-items:center; gap:1.1rem; } .aloha-nav-links a{ color:var(--color-text,#15403b); text-decoration:none; font-weight:600; font-size:.95rem; } .aloha-nav-links a:hover{ color:var(--aloha-teal-deep); } .aloha-nav-cta{ background:var(--aloha-teal-deep); color:#fff !important; padding:.5rem 1.1rem; border-radius:999px; transition:transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, filter .2s ease; } .aloha-nav-cta:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 26px rgba(21,79,75,.28); filter:brightness(1.05); } .aloha-burger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.5rem; } .aloha-burger span{ display:block; width:24px; height:2px; background:var(--color-text,#15403b); } .aloha-mobile{ position:fixed; top:68px; left:0; right:0; background:var(--color-surface,#fff); box-shadow:0 8px 20px rgba(21,79,75,.12); padding:.5rem 1.25rem 1rem; z-index:49; max-height:calc(100vh - 68px); max-height:calc(100dvh - 68px); overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } .aloha-mobile a{ display:block; padding:.7rem 0; color:var(--color-text,#15403b); text-decoration:none; font-weight:600; border-bottom:1px solid var(--color-border,#bfe6dd); } .aloha-mobile a.aloha-nav-cta{ border:none; text-align:center; margin-top:.6rem; } .aloha-mobile strong{ display:block; color:var(--color-text-muted,#4a615c); font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; padding:.7rem 0 .2rem; } /* Services dropdown */ .aloha-dd{ position:relative; } .aloha-dd-btn{ background:none; border:none; font:inherit; font-weight:600; color:var(--color-text,#15403b); cursor:pointer; padding:0; display:inline-flex; align-items:center; } .aloha-dd-btn:hover{ color:var(--aloha-teal-deep); } .aloha-dd-menu{ position:absolute; top:calc(100% + .6rem); left:0; background:var(--color-surface,#fff); border:1px solid var(--color-border,#bfe6dd); border-radius:.875rem; box-shadow:0 14px 32px rgba(21,79,75,.16); padding:.5rem; min-width:205px; display:none; flex-direction:column; z-index:60; } .aloha-dd:hover .aloha-dd-menu, .aloha-dd:focus-within .aloha-dd-menu, .aloha-dd.open .aloha-dd-menu{ display:flex; } /* Invisible hover bridge across the .6rem gap so the menu stays open when the mouse travels from the button down to the items (no click needed on desktop). */ .aloha-dd-menu::before{ content:''; position:absolute; top:-.7rem; left:0; right:0; height:.7rem; } .aloha-dd-menu a{ padding:.5rem .75rem; border-radius:.5rem; font-weight:600; font-size:.92rem; white-space:nowrap; color:var(--color-text,#15403b); text-decoration:none; } .aloha-dd-menu a:hover{ background:var(--aloha-cream); color:var(--aloha-teal-deep); } /* Nav action buttons (Call Now + Book Now) */ .aloha-nav-actions{ display:flex; align-items:center; gap:.6rem; } .aloha-nav-call{ color:var(--aloha-teal-deep); font-weight:700; text-decoration:none; padding:.5rem .95rem; border:2px solid var(--aloha-teal); border-radius:999px; white-space:nowrap; } .aloha-nav-call:hover{ background:var(--aloha-teal); color:#08312c; } @media(max-width:960px){ .aloha-nav-links{ display:none; } .aloha-burger{ display:flex; } .aloha-nav-actions .aloha-nav-cta{ display:none; } .aloha-nav-call{ padding:.4rem .7rem; } } /* ---- Trust strip ---- */ .aloha-trust{ background:var(--aloha-teal-deep); color:#fff; } .aloha-trust .aloha-wrap{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1rem 2.5rem; padding:1.1rem 1.5rem; text-align:center; } .aloha-trust b{ font-size:1.15rem; } .aloha-trust .sep{ opacity:.5; } /* ---- Aloha tells (3 proof cards) ---- */ .aloha-tells{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; } .aloha-tell{ background:var(--color-surface,#fff); border:1px solid var(--color-border,#bfe6dd); border-radius:1.25rem; padding:1.6rem 1.4rem; text-align:center; } .aloha-tell .em{ font-size:2.2rem; line-height:1; } .aloha-tell h3{ font-family:var(--font-heading,Quicksand),sans-serif; color:var(--color-text,#15403b); margin:.7rem 0 .4rem; font-size:1.2rem; } .aloha-tell p{ color:var(--color-text-muted,#4a615c); margin:0; font-size:.92rem; line-height:1.5; } /* ---- 5-bullet trust block ---- */ .aloha-bullets{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem 1rem; } .aloha-bullets span{ background:var(--color-surface,#fff); border:1px solid var(--color-border,#bfe6dd); border-radius:999px; padding:.55rem 1.1rem; font-weight:600; color:var(--color-text,#15403b); font-size:.95rem; } /* ---- Aloha Club banner ---- */ .aloha-club{ background:var(--aloha-sunset); color:#fff; border-radius:1.5rem; padding:2rem 1.75rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; text-shadow:0 1px 2px rgba(0,0,0,.2); } .aloha-club h2{ font-family:var(--font-heading,Quicksand),sans-serif; margin:0 0 .25rem; font-size:clamp(1.4rem,3vw,2rem); } .aloha-club p{ margin:0; opacity:.95; } .aloha-club a{ background:#fff; color:var(--aloha-teal-deep); font-weight:700; padding:.75rem 1.5rem; border-radius:999px; text-decoration:none; white-space:nowrap; } /* ---- Locations ---- */ .aloha-locs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; } .aloha-loc{ background:var(--color-surface,#fff); border:1px solid var(--color-border,#bfe6dd); border-radius:1.25rem; padding:1.5rem; text-align:center; } .aloha-loc h2{ font-family:var(--font-heading,Quicksand),sans-serif; color:var(--color-text,#15403b); margin:0 0 .5rem; font-size:1.3rem; font-weight:700; line-height:1.2; } .aloha-loc p{ color:var(--color-text-muted,#4a615c); margin:.2rem 0; line-height:1.5; } .aloha-loc a{ color:var(--aloha-teal-deep); font-weight:700; text-decoration:none; } /* ---- FIX: DF emits no 2-col rule for .df-split-grid, so hero-split / content-two-col render stacked with orphaned left-aligned text. Restore proper 2-column on desktop. ---- */ @media (min-width:768px){ .df-split-grid{ grid-template-columns:1fr 1fr !important; gap:3rem !important; } } @media (max-width:767px){ .df-split-grid{ text-align:center; } .df-split-grid img{ margin:0 auto; } } /* ---- Home alternating spotlight rows (off-center breakup + cross-links) ---- */ .aloha-split{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; max-width:1080px; margin:0 auto; } .aloha-split .aloha-split-img img{ width:100%; border-radius:1.5rem; display:block; box-shadow:0 12px 34px rgba(21,79,75,.14); } /* Square Aloha caricatures show whole (contain on cream); real photos crop to a tidy 4:3. */ .aloha-split .aloha-split-img.art img{ aspect-ratio:1/1; object-fit:contain; background:var(--aloha-cream); box-shadow:none; } .aloha-split .aloha-split-img.photo img{ aspect-ratio:4/3; object-fit:cover; object-position:center; } .aloha-split .aloha-split-txt h2{ font-family:var(--font-heading,Quicksand),sans-serif; color:var(--color-text,#15403b); font-size:clamp(1.5rem,4vw,2.3rem); margin:0 0 .6rem; } .aloha-split .aloha-split-txt p{ color:var(--color-text-muted,#4a615c); line-height:1.65; margin:0 0 1.2rem; font-size:1.02rem; } @media (min-width:768px){ .aloha-split{ grid-template-columns:1fr 1fr; gap:3.5rem; } .aloha-split.rev .aloha-split-img{ order:2; } } @media (max-width:767px){ .aloha-split{ text-align:center; } } /* ---- Compact service cards (the 'more services' row) ---- */ .aloha-svccards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; } .aloha-svc{ background:var(--aloha-teal); border-radius:1.1rem; padding:1.4rem 1rem; text-align:center; text-decoration:none; display:block; } /* .aloha-svc hover handled by the unified Hover-pop block below */ .aloha-svc .em{ font-size:1.9rem; } .aloha-svc h3{ font-family:var(--font-heading,Quicksand),sans-serif; margin:.4rem 0 .15rem; font-size:1.12rem; color:#08312c; } .aloha-svc p{ margin:0; font-size:.82rem; color:#0d4a42; } /* ---- 2023 award badge ---- */ .aloha-award{ text-align:center; } .aloha-award .badge{ display:inline-flex; align-items:center; gap:.6rem; background:var(--aloha-sunset); color:#fff; font-weight:800; padding:.75rem 1.5rem; border-radius:999px; font-size:1.05rem; text-shadow:0 1px 2px rgba(0,0,0,.25); } /* ---- Reviews source cards ---- */ .aloha-revsrc{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:1.25rem; } .aloha-revsrc span{ background:var(--color-surface,#fff); border:1px solid var(--color-border,#bfe6dd); border-radius:999px; padding:.5rem 1.1rem; font-weight:600; color:var(--color-text,#15403b); } /* ---- Photo carousel (auto-rotates every 3s; JS in scripts.js) ---- */ .aloha-carousel{ position:relative; max-width:640px; margin:0 auto; border-radius:1.5rem; overflow:hidden; box-shadow:0 14px 36px rgba(21,79,75,.16); background:var(--color-surface,#fff); } .aloha-carousel-track{ position:relative; width:100%; aspect-ratio:1/1; } .aloha-carousel-track img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; opacity:0; transition:opacity .8s ease; } .aloha-carousel-track img.active{ opacity:1; } .aloha-carousel-prev,.aloha-carousel-next{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.85); border:none; width:44px; height:44px; border-radius:50%; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--aloha-teal-deep); z-index:2; } .aloha-carousel-prev{ left:.8rem; } .aloha-carousel-next{ right:.8rem; } .aloha-carousel-prev:hover,.aloha-carousel-next:hover{ background:#fff; } .aloha-carousel-dots{ position:absolute; bottom:.8rem; left:0; right:0; display:flex; justify-content:center; gap:.4rem; z-index:2; } .aloha-cdot{ width:9px; height:9px; border-radius:50%; border:none; background:rgba(255,255,255,.55); cursor:pointer; padding:0; } .aloha-cdot.active{ background:#fff; } /* ---- Redesigned footer: big logo + centered side-by-side columns + hyperlinked address ---- */ .aloha-footer{ background:var(--color-surface,#fff); border-top:4px solid transparent; border-image:var(--aloha-sunset) 1; padding:3rem 1.5rem 2rem; text-align:center; } .aloha-footer-in{ max-width:1000px; margin:0 auto; } .aloha-footer-logo img{ height:140px; width:auto; display:inline-block; margin-bottom:1.4rem; } .aloha-footer-cols{ display:flex; flex-wrap:wrap; justify-content:center; gap:2rem 4rem; margin-bottom:2rem; } .aloha-footer-cols > div{ text-align:left; } .aloha-footer-cols h2{ font-family:var(--font-heading,Quicksand),sans-serif; color:var(--color-text,#15403b); font-size:.8rem; font-weight:700; line-height:1.2; text-transform:uppercase; letter-spacing:.06em; margin:0 0 .7rem; } .aloha-footer-cols ul{ list-style:none; margin:0; padding:0; } .aloha-footer-cols li{ margin-bottom:.4rem; } .aloha-footer-cols a{ color:var(--color-text-muted,#4a615c); text-decoration:none; font-size:.9rem; } .aloha-footer-cols a:hover{ color:var(--aloha-teal-deep); } .aloha-footer-nap{ color:var(--color-text-muted,#4a615c); font-size:.9rem; line-height:1.5; margin:0 auto 1.5rem; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start; gap:1.5rem 4rem; } .aloha-footer-nap a{ color:var(--aloha-teal-deep); text-decoration:none; font-weight:600; } .aloha-footer-nap a:hover{ text-decoration:underline; } .aloha-footer-copy{ color:var(--color-text-muted,#4a615c); font-size:.78rem; border-top:1px solid var(--color-border,#bfe6dd); padding-top:1.2rem; margin:0; max-width:none; } /* Footer locations — clean, bold, card-style stacks on every browser/width (no middots). Each location is a vertical block; flex-wrap drops them to a single column on mobile. */ .aloha-nap-loc{ display:flex; flex-direction:column; align-items:center; gap:.2rem; min-width:min(15rem,90vw); } .aloha-nap-loc .nap-city{ font-family:var(--font-heading,Quicksand),sans-serif; color:var(--color-text,#15403b); font-size:1.3rem; font-weight:800; letter-spacing:.01em; line-height:1.15; margin-bottom:.2rem; } .aloha-nap-loc .nap-addr{ font-weight:700; font-size:1.02rem; line-height:1.35; } .aloha-nap-loc .nap-phone{ font-weight:700; font-size:1.05rem; } .aloha-nap-loc .nap-hours{ color:var(--color-text-muted,#4a615c); font-size:.95rem; } .aloha-nap-loc .nap-sub{ color:var(--color-text-muted,#4a615c); font-size:.82rem; } .aloha-nap-contact{ flex-basis:100%; margin-top:.6rem; font-size:.95rem; } /* "Get directions" map CTAs — doubled font, big & bold pill button, consistent across all pages/browsers. */ .aloha-call[href*="maps/dir"]{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-size:clamp(1.85rem,6vw,2rem); font-weight:800; line-height:1.1; padding:.85rem 2rem; background:var(--aloha-teal-deep,#1f7d75); color:#fff !important; border-radius:999px; text-decoration:none; box-shadow:0 8px 22px rgba(21,79,75,.22); } .aloha-call[href*="maps/dir"]:hover{ filter:brightness(1.07); text-decoration:none; } .aloha-call[href*="maps/dir"] .aloha-emoji{ width:1.3em; height:1.3em; filter:brightness(0) invert(1); } /* ================================================================= 2026-05-27 — video-feedback fixes + Area Guide SEO cluster ================================================================= */ /* ---- H1: consistent framing for loose content photos (no head-cropping, no giant full-bleed) ---- */ .aloha-figure{ border-radius:1.25rem; overflow:hidden; box-shadow:0 12px 34px rgba(21,79,75,.14); margin:0; background:var(--aloha-cream); } .aloha-figure img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 35%; display:block; } .aloha-figure.tall img{ aspect-ratio:3/4; } .aloha-figure.wide img{ aspect-ratio:16/9; } .aloha-figure figcaption{ font-size:.8rem; color:var(--color-text-muted,#4a615c); padding:.5rem .8rem; text-align:center; } .aloha-figrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.1rem; max-width:1080px; margin:0 auto; } /* ---- M2: Call-Now pulse. Nav button slow (~3s); bottom CTA buttons faster (the contrast Sam liked). ---- */ @keyframes aloha-pulse-slow{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(31,125,117,.45); } 50%{ transform:scale(1.04); box-shadow:0 0 0 9px rgba(31,125,117,0); } } @keyframes aloha-pulse-cta{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,255,255,.5); } 50%{ transform:scale(1.05); box-shadow:0 0 0 10px rgba(255,255,255,0); } } .aloha-nav-call{ animation:aloha-pulse-slow 3s ease-in-out infinite; } .aloha-pulse-cta{ animation:aloha-pulse-cta 1.5s ease-in-out infinite; } @media (prefers-reduced-motion:reduce){ .aloha-nav-call, .aloha-pulse-cta{ animation:none !important; } } /* ---- Hover pop (video feedback 2): every content card lifts + grows; photos zoom/lift; primary buttons lift harder. CSS-only, so it applies on all 25 pages. Bold preset, WCD-style. Was only on .aloha-svc before — this extends the same micro-interaction to every card type. ---- */ .aloha-svc, .aloha-pcard, .aloha-tier, .aloha-tell, .aloha-gcard, .aloha-testimonial, .aloha-loc, .aloha-club, .aloha-alacarte, .aloha-hold{ transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease; } .aloha-svc:hover, .aloha-pcard:hover, .aloha-tier:hover, .aloha-tell:hover, .aloha-gcard:hover, .aloha-testimonial:hover, .aloha-loc:hover, .aloha-club:hover, .aloha-alacarte:hover, .aloha-hold:hover{ transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 38px rgba(21,79,75,.22); } /* Figures already clip their image (overflow:hidden) -> zoom inside the frame. */ .aloha-figure img{ transition: transform .4s cubic-bezier(.2,.7,.2,1); will-change:transform; } .aloha-figure:hover img{ transform: scale(1.06); } /* Split content photos carry their own shadow -> lift the photo as a unit (no clip needed). */ .aloha-split-img.photo img{ transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease; will-change:transform; } .aloha-split-img.photo:hover img{ transform: translateY(-6px) scale(1.02); box-shadow:0 22px 46px rgba(21,79,75,.2); } /* Primary / DF buttons incl. the red hero "Book Now" lift harder than cards (was translateY(-2px)). */ .df-btn-hover{ transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease; } .df-btn-hover:hover{ transform: translateY(-4px) scale(1.06); box-shadow: 0 14px 30px rgba(21,79,75,.28); } /* Reduced motion: kill every hover transform. */ @media (prefers-reduced-motion:reduce){ .aloha-svc,.aloha-pcard,.aloha-tier,.aloha-tell,.aloha-gcard,.aloha-testimonial,.aloha-loc,.aloha-club,.aloha-alacarte,.aloha-hold,.aloha-nav-cta,.df-btn-hover,.aloha-figure img,.aloha-split-img.photo img{ transition:none !important; } .aloha-svc:hover,.aloha-pcard:hover,.aloha-tier:hover,.aloha-tell:hover,.aloha-gcard:hover,.aloha-testimonial:hover,.aloha-loc:hover,.aloha-club:hover,.aloha-alacarte:hover,.aloha-hold:hover,.aloha-nav-cta:hover,.df-btn-hover:hover,.aloha-figure:hover img,.aloha-split-img.photo:hover img{ transform:none !important; } } /* ---- M1: teal stats band — slight wave edge + horizontal "strata" lines (echoes the sunset logo stripes) ---- */ .aloha-statband{ position:relative; background:var(--aloha-teal); overflow:hidden; } .aloha-statband::before{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 13px); pointer-events:none; } .aloha-statband-in{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:3rem 1.5rem 3.4rem; display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; text-align:center; } @media(max-width:640px){ .aloha-statband-in{ grid-template-columns:1fr 1fr; gap:2rem 1rem; } } .aloha-statband .num{ font-family:var(--font-heading,Quicksand),sans-serif; font-size:clamp(1.9rem,5vw,3rem); font-weight:800; color:#fff; line-height:1; } .aloha-statband .lbl{ color:#eafaf4; font-size:.88rem; margin-top:.35rem; } .aloha-statband .aloha-wave{ position:absolute; left:0; bottom:-1px; width:100%; height:32px; display:block; z-index:1; } .aloha-statband .aloha-wave path{ fill:var(--color-surface,#fff); } /* ---- Area Guide cluster (hub + parks/hotels/restaurants) ---- */ .aloha-breadcrumb{ max-width:1080px; margin:0 auto; padding:1rem 1.5rem 0; font-size:.85rem; color:var(--color-text-muted,#4a615c); } .aloha-breadcrumb a{ color:var(--aloha-teal-deep); text-decoration:none; } .aloha-breadcrumb a:hover{ text-decoration:underline; } /* cited heat/paw-safety authority block */ .aloha-heat{ background:linear-gradient(180deg,#fff4e8,#ffe6d0); border:1px solid #f3c79a; border-left:6px solid #e85d3d; border-radius:1.25rem; padding:1.6rem 1.6rem; max-width:780px; margin:0 auto; } .aloha-heat h2{ font-family:var(--font-heading,Quicksand),sans-serif; color:#9a3412; margin:0 0 .6rem; display:flex; align-items:center; gap:.5rem; font-size:1.25rem; font-weight:700; line-height:1.2; } .aloha-heat p{ color:#5b3a26; line-height:1.65; margin:0 0 .8rem; } .aloha-heat ul{ color:#5b3a26; line-height:1.6; margin:.2rem 0 .8rem; padding-left:1.2rem; } .aloha-heat .aloha-sources{ font-size:.78rem; color:#7a5a44; margin:.6rem 0 0; } .aloha-heat .aloha-sources a{ color:#9a3412; } /* seasonal two-up (summer heat / winter visitor) */ .aloha-season{ display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:1000px; margin:0 auto; } @media(min-width:768px){ .aloha-season{ grid-template-columns:1fr 1fr; } } .aloha-season-card{ border-radius:1.25rem; padding:1.6rem 1.6rem; } .aloha-season-card.summer{ background:linear-gradient(180deg,#fff4e8,#ffe3cd); } .aloha-season-card.winter{ background:linear-gradient(180deg,#eafaf4,#d6f0e8); } .aloha-season-card h2{ font-family:var(--font-heading,Quicksand),sans-serif; margin:0 0 .5rem; color:var(--color-text,#15403b); font-size:1.3rem; font-weight:700; line-height:1.2; } .aloha-season-card p{ color:var(--color-text-muted,#4a615c); line-height:1.6; margin:0 0 .6rem; } .aloha-season-card a{ color:var(--aloha-teal-deep); font-weight:700; text-decoration:none; } /* resource cards (parks / hotels / restaurants) */ .aloha-guide-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; max-width:1080px; margin:1.5rem auto 0; } .aloha-gcard{ background:var(--color-surface,#fff); border:1px solid var(--color-border,#bfe6dd); border-radius:1.1rem; padding:1.2rem 1.3rem; display:flex; flex-direction:column; } .aloha-gcard h3{ font-family:var(--font-heading,Quicksand),sans-serif; margin:0 0 .25rem; color:var(--color-text,#15403b); font-size:1.08rem; font-weight:700; line-height:1.2; } .aloha-gcard .aloha-gmeta{ color:var(--aloha-teal-deep); font-weight:700; font-size:.8rem; margin-bottom:.45rem; } .aloha-gcard p{ color:var(--color-text-muted,#4a615c); font-size:.9rem; line-height:1.5; margin:0 0 .6rem; } .aloha-gcard .aloha-glink{ margin-top:auto; color:var(--aloha-teal-deep); font-weight:700; text-decoration:none; font-size:.86rem; } .aloha-gcard .aloha-glink:hover{ text-decoration:underline; } .aloha-gcard.partner{ border-color:var(--aloha-pink); border-width:2px; } .aloha-gcard.partner .aloha-gmeta{ color:#b3357a; } /* embedded map */ .aloha-map{ border:0; width:100%; height:340px; border-radius:1.25rem; display:block; margin:1.25rem auto 0; max-width:1080px; } /* ---- H1: DF content-gallery ships inline columns:1 (full-bleed stack). Reframe to a tidy grid. ---- */ .df-gallery-grid{ columns:auto !important; display:grid !important; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important; gap:1rem !important; } .df-gallery-item{ margin:0 !important; } .df-gallery-item img{ width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 35%; display:block; } /* H7: review-source badges become working links */ .aloha-revsrc a{ background:var(--color-surface,#fff); border:1px solid var(--color-border,#bfe6dd); border-radius:999px; padding:.5rem 1.1rem; font-weight:600; color:var(--color-text,#15403b); text-decoration:none; } .aloha-revsrc a:hover{ border-color:var(--aloha-teal); color:var(--aloha-teal-deep); } /* ---- Reviews page: curated testimonial cards (typography-only, no user photos) ---- */ .aloha-testimonials{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.25rem; max-width:1080px; margin:0 auto; text-align:left; } .aloha-testimonial{ position:relative; background:var(--color-surface,#fff); border:1px solid var(--color-border,#bfe6dd); border-radius:1.25rem; padding:2.4rem 1.5rem 1.3rem; margin:0; box-shadow:0 6px 24px rgba(21,79,75,.07); display:flex; flex-direction:column; } .aloha-testimonial::before{ content:"\201C"; position:absolute; top:.25rem; left:1rem; font-family:Georgia,serif; font-size:3.4rem; line-height:1; color:var(--aloha-teal); opacity:.55; } .aloha-testimonial blockquote{ margin:0 0 1rem; font-style:italic; color:var(--color-text,#15403b); line-height:1.6; font-size:.97rem; } .aloha-testimonial figcaption{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .8rem; } .aloha-tauthor{ font-weight:700; color:var(--color-text,#15403b); font-size:.92rem; } .aloha-tstars{ color:#e8a23d; letter-spacing:.06em; font-size:.92rem; } .aloha-tlink{ color:var(--aloha-teal-deep); font-weight:600; text-decoration:none; font-size:.82rem; margin-left:auto; } .aloha-tlink:hover{ text-decoration:underline; } /* ---- Dancing hula-corgi mascot: transparent webm loop + tap-to-play theme song ---- */ .aloha-corgi{ display:flex; flex-direction:column; align-items:center; gap:.85rem; max-width:460px; margin:0 auto; } .aloha-corgi-vid{ width:min(440px,82vw); height:auto; display:block; filter:drop-shadow(0 14px 22px rgba(21,79,75,.28)); } .aloha-corgi-btn{ appearance:none; border:0; cursor:pointer; padding:.62rem 1.3rem; border-radius:999px; font-size:.9rem; font-weight:700; color:#fff; background:var(--aloha-sunset); box-shadow:0 4px 12px rgba(0,0,0,.18); display:inline-flex; align-items:center; justify-content:center; gap:.5rem; line-height:1.15; text-shadow:0 1px 2px rgba(0,0,0,.2); } .aloha-corgi-btn:hover{ filter:brightness(1.06); } .aloha-corgi-btn:active{ transform:translateY(1px) scale(.99); } .aloha-corgi-eq{ display:none; align-items:flex-end; gap:2px; height:13px; } .aloha-corgi.is-playing .aloha-corgi-eq{ display:inline-flex; } .aloha-corgi.is-playing .aloha-corgi-play{ display:none; } .aloha-corgi:not(.is-playing) .aloha-corgi-stop{ display:none; } .aloha-corgi-eq i{ width:3px; background:#fff; border-radius:2px; animation:aloha-eq .9s ease-in-out infinite; } .aloha-corgi-eq i:nth-child(2){ animation-delay:.15s; } .aloha-corgi-eq i:nth-child(3){ animation-delay:.3s; } @keyframes aloha-eq{ 0%,100%{ height:4px; } 50%{ height:13px; } } /* ---- Scroll reveal: every
rises + fades in as it enters the viewport. Gated on html.js-reveal, which the inline head script sets BEFORE first paint (so sections hide with no flash) and only when IntersectionObserver exists. If that script never runs, html.js-reveal is never set and everything stays visible (no blank-section risk). ---- */ html.js-reveal section{ opacity:0; transform:translateY(28px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); will-change:opacity,transform; } html.js-reveal section.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ html.js-reveal section{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ================================================================= "ALOHA GOLDEN HOUR" — theme-scoped atmosphere + depth (third variant). ALL rules gated under body[data-theme="golden"] so cream/teal are untouched. Token palette comes from theme-golden.json (warm sand ground, teal "water" field, #143F3A dark anchor, coral CTA). This block adds the three moves the palette JSON can't express: the sunset HORIZON GLOW, a single sunset SECTION DIVIDER, and the dark teal-ink FOOTER ANCHOR. Council Six guardrails enforced: gradient is seasoning not sauce; dark anchor is structural only; sea-mist bridges sand->dark; brightest yellow stays off text. WCAG-AA verified. ---- */ body[data-theme="golden"]{ position:relative; --aloha-seamist:#DCEFE9; } /* Move 1 — HERO HORIZON GLOW: soft sunset wash at the top of the page, sitting behind content (z-index:-1, above the sand body bg, below text). Atmosphere only — never a full-page fill. Reads in the hero where sections are unfilled. */ body[data-theme="golden"]::before{ content:""; position:absolute; top:0; left:0; right:0; height:680px; z-index:-1; pointer-events:none; background:radial-gradient(125% 100% at 50% -12%, rgba(245,205,88,.30), rgba(240,134,84,.20) 36%, rgba(232,93,61,.10) 58%, rgba(232,93,61,0) 76%); } /* Move 2 — sea-mist "water" rhythm: the raw content bands carry an INLINE background (style='background:var(--color-background|surface)'), which beats a plain class rule — so we target the SAND bands (--color-background) by their inline attribute and override with !important. This tints only every-other band to sea-mist, preserving the warm-sand <-> cool-mist alternation (not a flood) and bridging the warm top toward the dark footer. Dark text on sea-mist = 14.44:1 (AA). */ body[data-theme="golden"] .aloha-sec[style*="--color-background"]{ background:var(--aloha-seamist) !important; } /* Move 2b — the single sunset SECTION DIVIDER: a sunset hairline atop the teal stats band (echoes the logo's sunset stripes). The one structural gradient seam. */ body[data-theme="golden"] .aloha-statband{ border-top:5px solid transparent; border-image:var(--aloha-sunset) 1; } /* Seaglass: match the stats-band teal to the seaglass content teal (#63DBD8 via --color-background) instead of the legacy --aloha-teal (#7DD3C0), so the page reads as one teal. Seaglass-scoped only; cream/teal/golden keep #7DD3C0. White text + white wave unchanged. */ body[data-theme="seaglass"] .aloha-statband{ background:var(--color-background); } /* Move 3 — DARK ANCHOR FOOTER: the depth both other themes lack. Footer becomes the deep teal-ink (#143F3A via --color-secondary) with its sunset border now glowing against the dark. Footer text recolored light. White-family on #143F3A ranges 8:1-11.6:1 (AA pass). */ body[data-theme="golden"] .aloha-footer{ background:var(--color-secondary,#143F3A); } body[data-theme="golden"] .aloha-footer-cols h2{ color:#FBE9CE; } body[data-theme="golden"] .aloha-footer-cols a, body[data-theme="golden"] .aloha-footer-nap, body[data-theme="golden"] .aloha-footer-copy{ color:#D8E8E3; } body[data-theme="golden"] .aloha-footer-nap a, body[data-theme="golden"] .aloha-footer-cols a:hover, body[data-theme="golden"] .aloha-footer-nap a:hover{ color:#9BE0D2; } body[data-theme="golden"] .aloha-footer-copy{ border-top-color:rgba(255,255,255,.16); } /* Seaglass / Wall-Teal: deep-teal footer panel so the footer doesn't hit the vivid #63DBD8 page as a hard white seam. Mirrors the golden dark-anchor footer; all footer text re-lit for contrast on the dark panel. */ body[data-theme="seaglass"] .aloha-footer{ background:var(--color-secondary,#006B68); } body[data-theme="seaglass"] .aloha-footer-cols h2{ color:#EAFBF8; } body[data-theme="seaglass"] .aloha-footer-cols a, body[data-theme="seaglass"] .aloha-footer-nap, body[data-theme="seaglass"] .aloha-footer-copy{ color:#D6F2EE; } body[data-theme="seaglass"] .aloha-nap-loc .nap-city{ color:#FFFFFF; } body[data-theme="seaglass"] .aloha-nap-loc .nap-hours, body[data-theme="seaglass"] .aloha-nap-loc .nap-sub{ color:#B8DDD9; } body[data-theme="seaglass"] .aloha-footer-nap a, body[data-theme="seaglass"] .aloha-footer-cols a:hover, body[data-theme="seaglass"] .aloha-footer-nap a:hover{ color:#9FE9E4; } body[data-theme="seaglass"] .aloha-footer-copy{ border-top-color:rgba(255,255,255,.16); } /* ---- Hero mobile crop fix (uniform across Tempe + Cottonwood) ----------------------- The home hero is a full-bleed