/* ============================================================ CORNER COTTAGE — Enhancement Library (CSS) · Webworth All effects are opt-in per page via . Performance-first: transform/opacity only, GPU-composited, honours prefers-reduced-motion. ============================================================ */ /* ---------- reduced motion: disable all heavy motion ---------- */ @media (prefers-reduced-motion: reduce){ .cc-reveal,[data-cc-count],.cc-tilt,.cc-float, .cc-parallax,.cc-magnet,.cc-draw path, body.cc-enhanced #hero img, .cc-gal-nav,.cc-marquee-track{ transition:none!important;animation:none!important; transform:none!important;opacity:1!important; } body.cc-enhanced.cc-kenburns #hero img{transform:none!important} } /* ---------- 1. scroll progress bar ---------- */ .cc-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999; background:var(--cc-accent,#4CC2A8);transition:width .08s linear;will-change:width} .cc-progress.thick{height:5px} /* ---------- 2. scroll reveal variants ---------- */ .cc-reveal{will-change:transform,opacity; transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)} html.cc-js .cc-reveal{opacity:0} .cc-reveal.up{transform:translateY(38px)} .cc-reveal.down{transform:translateY(-38px)} .cc-reveal.left{transform:translateX(-46px)} .cc-reveal.right{transform:translateX(46px)} .cc-reveal.zoom{transform:scale(.9)} .cc-reveal.drop{transform:translateY(-60px);opacity:0} .cc-reveal.in{opacity:1;transform:none} .cc-stagger > *{transform:translateY(30px); transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)} html.cc-js .cc-stagger > *{opacity:0} .cc-stagger.in > *{opacity:1;transform:none} /* ---------- 3. hover micro-interactions ---------- */ .cc-lift{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease} .cc-lift:hover{transform:translateY(-6px)} .cc-pop{transition:transform .25s cubic-bezier(.34,1.56,.64,1)} .cc-pop:hover{transform:scale(1.04)} .cc-zoomimg{overflow:hidden;border-radius:inherit} .cc-zoomimg img{transition:transform .6s cubic-bezier(.22,.61,.36,1)} .cc-zoomimg:hover img{transform:scale(1.08)} /* ---------- 4. animated button shine ---------- */ .cc-shine{position:relative;overflow:hidden} .cc-shine::after{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-18deg);transition:left .6s ease;pointer-events:none} .cc-shine:hover::after{left:130%} /* ---------- 5. tilt (3d) ---------- */ .cc-tilt{transform-style:preserve-3d;transition:transform .15s ease-out;will-change:transform} /* ---------- 6. floating elements ---------- */ @keyframes cc-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .cc-float{animation:cc-bob 6s ease-in-out infinite;will-change:transform} .cc-float.slow{animation-duration:9s} .cc-float.delay{animation-delay:-3s} /* ---------- 7. animated gradient surface ---------- */ @keyframes cc-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} .cc-animgrad{background-size:300% 300%!important;animation:cc-grad 14s ease infinite} /* ---------- 8. particle / canvas backdrop ---------- */ .cc-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} .cc-particles + *{position:relative;z-index:1} /* ---------- 9. SVG line draw ---------- */ .cc-draw path{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000); transition:stroke-dashoffset 2s ease} .cc-draw.in path{stroke-dashoffset:0} /* ---------- 10. before / after slider ---------- */ .cc-ba{position:relative;overflow:hidden;border-radius:inherit;cursor:ew-resize; user-select:none;touch-action:none} .cc-ba img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none} .cc-ba .cc-ba-after{position:absolute;inset:0;width:100%;height:100%;overflow:hidden} .cc-ba .cc-ba-after img{position:absolute;inset:0;height:100%} .cc-ba .cc-ba-handle{position:absolute;top:0;bottom:0;width:3px;background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.15);left:50%;z-index:3} .cc-ba .cc-ba-handle::after{content:'⟺';position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff; color:#333;display:flex;align-items:center;justify-content:center;font-size:14px; box-shadow:0 3px 12px rgba(0,0,0,.3)} .cc-ba .cc-ba-tag{position:absolute;bottom:10px;font-size:10px;letter-spacing:.12em; text-transform:uppercase;background:rgba(0,0,0,.55);color:#fff;padding:3px 9px;border-radius:20px;z-index:2} .cc-ba .cc-ba-tag.b{left:10px}.cc-ba .cc-ba-tag.a{right:10px} /* ---------- 11. accordion (FAQ) ---------- */ .cc-acc-item{border-bottom:1px solid rgba(128,128,128,.22)} .cc-acc-q{width:100%;text-align:left;background:none;border:none;cursor:pointer; font:inherit;color:inherit;padding:1.1rem 2.2rem 1.1rem 0;position:relative; display:flex;justify-content:space-between;align-items:center;gap:1rem} .cc-acc-q .cc-acc-ic{flex-shrink:0;transition:transform .3s ease;font-size:1.2rem;line-height:1} .cc-acc-item.open .cc-acc-ic{transform:rotate(45deg)} .cc-acc-a{max-height:0;overflow:hidden;transition:max-height .4s ease;opacity:.85} .cc-acc-a > div{padding:0 0 1.1rem} /* ---------- 12. tabs ---------- */ .cc-tabs-nav{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.4rem} .cc-tab-btn{font:inherit;cursor:pointer;border:1px solid rgba(128,128,128,.3); background:transparent;color:inherit;padding:.5rem 1.1rem;border-radius:24px; font-size:.78rem;font-weight:600;transition:background .2s,color .2s,border-color .2s} .cc-tab-btn.active{background:var(--cc-accent,#333);color:#fff;border-color:transparent} .cc-tab-panel{display:none;animation:cc-fadein .4s ease} .cc-tab-panel.active{display:block} @keyframes cc-fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---------- 13. flip cards ---------- */ .cc-flip{perspective:1100px} .cc-flip-inner{position:relative;width:100%;height:100%;transition:transform .7s cubic-bezier(.22,.61,.36,1); transform-style:preserve-3d} .cc-flip:hover .cc-flip-inner{transform:rotateY(180deg)} .cc-flip-front,.cc-flip-back{position:absolute;inset:0;backface-visibility:hidden; -webkit-backface-visibility:hidden;border-radius:inherit;overflow:hidden} .cc-flip-back{transform:rotateY(180deg)} /* ---------- 14. counter (no layout shift) ---------- */ [data-cc-count]{font-variant-numeric:tabular-nums} /* ---------- 15. magnetic / mouse-follow glow ---------- */ .cc-spotlight{position:relative;overflow:hidden} .cc-spotlight::before{content:'';position:absolute;width:380px;height:380px;border-radius:50%; left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%); background:radial-gradient(circle,var(--cc-glow,rgba(255,255,255,.14)),transparent 65%); opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:0} .cc-spotlight:hover::before{opacity:1} /* ---------- 16. back-to-top button ---------- */ .cc-top{position:fixed;right:18px;bottom:84px;width:44px;height:44px;border-radius:50%; border:none;cursor:pointer;background:var(--cc-accent,#333);color:#fff;font-size:1.1rem; opacity:0;transform:translateY(14px);pointer-events:none;z-index:9998; transition:opacity .3s,transform .3s;box-shadow:0 6px 18px rgba(0,0,0,.25)} .cc-top.show{opacity:1;transform:none;pointer-events:auto} /* ---------- 17. ken-burns slow pan for hero slides ---------- */ @keyframes cc-ken{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.14) translate(-1.2%,-1.2%)}} .cc-kenburns [data-slide].active{animation:cc-ken 12s ease-out forwards} body.cc-enhanced.cc-kenburns #hero .hero-bg img, body.cc-enhanced.cc-kenburns #hero .hero-media img, body.cc-enhanced.cc-kenburns #hero .hero-pic img, body.cc-enhanced.cc-kenburns #hero .hero-mag-img img, body.cc-enhanced.cc-kenburns #hero .hero-band img{ animation:cc-ken 20s ease-out forwards;transform-origin:center center} /* ---------- 18. marquee logo / text strip ---------- */ .cc-marquee{overflow:hidden;white-space:nowrap} .cc-marquee-track{display:inline-flex;gap:2.6rem;animation:cc-scroll 26s linear infinite;will-change:transform} .cc-marquee:hover .cc-marquee-track{animation-play-state:paused} @keyframes cc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- 19. ripple on click ---------- */ .cc-ripple{position:relative;overflow:hidden} .cc-ripple-dot{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none; background:rgba(255,255,255,.5);animation:cc-rip .6s ease-out} @keyframes cc-rip{to{transform:scale(2.6);opacity:0}} /* ============================================================ LAYOUT ENHANCEMENTS — applied when body.cc-enhanced ============================================================ */ body.cc-enhanced{--cc-accent:var(--accent);--cc-accent2:var(--accent2)} body.cc-enhanced section{isolation:isolate} body.cc-enhanced h2{letter-spacing:-.012em} body.cc-enhanced .eye{font-weight:500} /* depth: cards & panels */ body.cc-enhanced .feat-card{ backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); box-shadow:0 4px 24px rgba(0,0,0,.12); transition:transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s ease,border-color .3s} body.cc-enhanced .feat-card:hover{ transform:translateY(-8px);box-shadow:0 18px 44px rgba(0,0,0,.22)} body.cc-enhanced .rev-card{ backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); transition:transform .35s ease,box-shadow .35s ease} body.cc-enhanced .rev-card:hover{ transform:translateY(-6px);box-shadow:0 14px 36px rgba(0,0,0,.28)} body.cc-enhanced .amen-item{ box-shadow:0 2px 14px rgba(0,0,0,.07); transition:transform .3s ease,box-shadow .3s ease,border-color .3s} body.cc-enhanced .amen-item:hover{ box-shadow:0 14px 32px rgba(0,0,0,.13)} body.cc-enhanced .bookwrap{ backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); background:color-mix(in srgb,var(--bg) 86%,transparent); box-shadow:0 28px 64px rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.45)} body.cc-enhanced .hero-cap, body.cc-enhanced #hero.sh .hero-panel, body.cc-enhanced #hero.sg .glass{ box-shadow:0 28px 70px rgba(0,0,0,.22)} body.cc-enhanced .stat{ background:var(--paper);border-radius:var(--R,8px);padding:1.8rem 1rem; box-shadow:0 4px 22px rgba(0,0,0,.07); transition:transform .3s ease,box-shadow .3s ease} body.cc-enhanced .stat:hover{ transform:translateY(-5px);box-shadow:0 14px 32px rgba(0,0,0,.11)} /* image overlays & hover zoom */ body.cc-enhanced .gal-item{position:relative;box-shadow:0 4px 18px rgba(0,0,0,.1); transition:transform .35s ease,box-shadow .35s ease} body.cc-enhanced .gal-item:hover{ transform:translateY(-4px);box-shadow:0 16px 36px rgba(0,0,0,.18)} body.cc-enhanced .gal-item::after{ content:'';position:absolute;inset:0;border-radius:inherit; background:linear-gradient(to top,rgba(0,0,0,.32),transparent 55%); opacity:0;transition:opacity .4s ease;pointer-events:none} body.cc-enhanced .gal-item:hover::after{opacity:1} body.cc-enhanced .ov-media{box-shadow:0 16px 48px rgba(0,0,0,.14)} body.cc-enhanced .cta-bg::after{ backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)} /* featured gallery tile (first image larger) */ body.cc-enhanced.cc-gal-featured #gal .gal-item:first-child{ grid-column:span 2;grid-row:span 2} /* masonry variant (alternate templates) */ body.cc-enhanced.cc-gal-masonry #gal{ columns:3;column-gap:1rem;display:block} body.cc-enhanced.cc-gal-masonry #gal .gal-item{ break-inside:avoid;margin-bottom:1rem;display:block;width:100%;aspect-ratio:auto} body.cc-enhanced.cc-gal-masonry #gal .gal-item:first-child{grid-column:auto;grid-row:auto} /* slide-in reveal directions (works with existing .rv) */ body.cc-enhanced .rv[data-slide="left"]{transform:translateX(-42px)} body.cc-enhanced .rv[data-slide="right"]{transform:translateX(42px)} body.cc-enhanced .rv[data-slide="zoom"]{transform:scale(.94)} body.cc-enhanced .rv.in{opacity:1;transform:none} /* chips & badges */ body.cc-enhanced .chip,body.cc-enhanced .hero-pill{ backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:transform .25s ease,background .25s ease} body.cc-enhanced .chip:hover{transform:translateY(-2px);background:rgba(255,255,255,.22)} body.cc-enhanced .near-item{ transition:padding-left .25s ease,background .25s ease;border-radius:8px} body.cc-enhanced .near-item:hover{ padding-left:.55rem;background:color-mix(in srgb,var(--accent) 7%,transparent)} body.cc-enhanced .acc-item{ transition:background .25s ease;border-radius:8px;padding:0 .75rem} body.cc-enhanced .acc-item.open{ background:color-mix(in srgb,var(--paper,#fff) 82%,var(--accent) 6%)} body.cc-enhanced .nav-cta{ box-shadow:0 4px 18px color-mix(in srgb,var(--accent) 38%,transparent)} body.cc-enhanced .wa{ transition:transform .3s ease,box-shadow .3s ease} body.cc-enhanced .wa:hover{ transform:scale(1.08);box-shadow:0 12px 32px rgba(37,211,102,.42)} body.cc-enhanced .hero-bar{ backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)} /* lightbox polish */ body.cc-enhanced #lb{ transition:opacity .28s ease;opacity:0} body.cc-enhanced #lb.open{opacity:1} body.cc-enhanced #lb img{ animation:cc-fadein .35s ease;box-shadow:0 24px 80px rgba(0,0,0,.5)} body.cc-enhanced .lb-close,body.cc-enhanced .lb-prev,body.cc-enhanced .lb-next{ transition:background .2s ease,transform .2s ease} body.cc-enhanced .lb-close:hover{background:rgba(255,255,255,.28);transform:scale(1.06)} body.cc-enhanced .lb-prev:hover,body.cc-enhanced .lb-next:hover{ background:rgba(255,255,255,.28);transform:translateY(-50%) scale(1.06)} /* gallery carousel strip (mobile) */ .cc-gal-carousel-wrap{position:relative;margin-top:2.6rem} .cc-gal-carousel-wrap #gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory; gap:.85rem;padding-bottom:.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:none} .cc-gal-carousel-wrap #gal::-webkit-scrollbar{display:none} .cc-gal-carousel-wrap .gal-item{flex:0 0 min(82vw,340px);scroll-snap-align:center;aspect-ratio:4/3} @media(min-width:981px){ .cc-gal-carousel-wrap #gal{display:grid;overflow:visible;scroll-snap-type:none} .cc-gal-carousel-wrap .gal-item{flex:none} } @media(max-width:980px){ body.cc-enhanced.cc-gal-featured #gal .gal-item:first-child{grid-column:span 1;grid-row:span 1} body.cc-enhanced.cc-gal-masonry #gal{columns:2} } @media(max-width:560px){ body.cc-enhanced.cc-gal-masonry #gal{columns:1} } /* ============================================================ COLOR PALETTE SWITCHER — fixed top-right, changes :root vars ============================================================ */ html.cc-palette-anim body{ transition:background-color .4s ease,color .4s ease; } #cc-palette{ position:fixed;top:14px;right:14px;z-index:10050; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; } .cc-palette-btn{ display:inline-flex;align-items:center;gap:.55rem; height:42px;padding:0 .95rem 0 .85rem;border:none;border-radius:999px; cursor:pointer;color:#fff; background:var(--accent,#333); box-shadow:0 8px 28px rgba(0,0,0,.28); font-size:.78rem;font-weight:600;letter-spacing:.04em; transition:transform .2s ease,filter .2s ease,box-shadow .2s ease; } .cc-palette-btn:hover{filter:brightness(1.08);transform:translateY(-1px)} .cc-palette-btn:focus-visible{outline:2px solid #fff;outline-offset:3px} .cc-palette-btn svg{flex-shrink:0;display:block} #cc-palette-tip{max-width:7.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cc-palette-panel{ position:absolute;top:calc(100% + 10px);right:0;width:min(292px,calc(100vw - 28px)); background:var(--paper,#fff);color:var(--ink,#222); border:1px solid var(--line,rgba(0,0,0,.12)); border-radius:16px;padding:.85rem; box-shadow:0 18px 50px rgba(0,0,0,.22); opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98); transform-origin:top right; transition:opacity .2s ease,transform .2s ease,visibility .2s; pointer-events:none; } #cc-palette.open .cc-palette-panel{ opacity:1;visibility:visible;transform:none;pointer-events:auto; } .cc-palette-head{ font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--muted,#666);font-weight:600;margin:0 .15rem .65rem; } .cc-palette-grid{display:grid;gap:.4rem} .cc-palette-opt{ display:flex;align-items:center;gap:.75rem;width:100%; background:transparent;border:1px solid transparent;border-radius:12px; padding:.55rem .65rem;cursor:pointer;color:inherit;text-align:left; transition:background .15s ease,border-color .15s ease; } .cc-palette-opt:hover{ background:color-mix(in srgb,var(--accent) 8%,transparent); border-color:color-mix(in srgb,var(--accent) 22%,transparent); } .cc-palette-opt.active{ background:color-mix(in srgb,var(--accent) 12%,transparent); border-color:var(--accent); } .cc-palette-swatches{display:flex;gap:3px;flex-shrink:0} .cc-palette-swatches i{ width:14px;height:14px;border-radius:50%;display:block; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); } .cc-palette-name{font-size:.84rem;font-weight:500} @media(max-width:560px){ #cc-palette{top:10px;right:10px} .cc-palette-btn{height:40px;padding:0 .75rem} #cc-palette-tip{display:none} }