.elementor-kit-9{--e-global-color-primary:#868686;--e-global-color-secondary:#292929;--e-global-color-text:#FFFFFF;--e-global-color-accent:#FFFFFF2B;--e-global-color-d49ac81:#ABCA37;--e-global-color-332724a:#FBC72B;--e-global-color-4d462f5:#DCDCDE;--e-global-color-cfa1f76:#F5F4F5;--e-global-color-044b931:#183444;--e-global-color-58a3f5b:#ABCA37;--e-global-color-435bebe:#FBC72B;--e-global-typography-primary-font-family:"Jost";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:700;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:-1px;--e-global-typography-secondary-font-family:"Jost";--e-global-typography-secondary-font-size:39px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-secondary-letter-spacing:-1.5px;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:1px;--e-global-typography-b2ce6af-font-family:"Poppins";--e-global-typography-b2ce6af-font-size:16px;--e-global-typography-b2ce6af-font-weight:400;--e-global-typography-b2ce6af-text-transform:none;--e-global-typography-b2ce6af-font-style:normal;--e-global-typography-b2ce6af-line-height:1.5em;--e-global-typography-69c152f-font-family:"Poppins";--e-global-typography-69c152f-font-size:14px;--e-global-typography-69c152f-font-weight:400;--e-global-typography-69c152f-line-height:1.5em;--e-global-typography-520c191-font-family:"Jost";--e-global-typography-520c191-font-size:16px;--e-global-typography-520c191-font-weight:600;--e-global-typography-520c191-line-height:1.5em;--e-global-typography-583e54c-font-family:"Jost";--e-global-typography-583e54c-font-size:48px;--e-global-typography-583e54c-font-weight:700;--e-global-typography-583e54c-line-height:1.2em;--e-global-typography-583e54c-letter-spacing:-1px;--e-global-typography-5d167aa-font-family:"Jost";--e-global-typography-5d167aa-font-size:39px;--e-global-typography-5d167aa-font-weight:700;--e-global-typography-5d167aa-line-height:1.2em;--e-global-typography-5d167aa-letter-spacing:-1.5px;--e-global-typography-d3dae9a-font-family:"Jost";--e-global-typography-d3dae9a-font-size:31.25px;--e-global-typography-d3dae9a-font-weight:700;--e-global-typography-d3dae9a-text-transform:none;--e-global-typography-d3dae9a-font-style:normal;--e-global-typography-d3dae9a-line-height:1.3em;--e-global-typography-d3dae9a-letter-spacing:-1.2px;--e-global-typography-83682a1-font-family:"Jost";--e-global-typography-83682a1-font-size:25px;--e-global-typography-83682a1-font-weight:400;--e-global-typography-83682a1-text-transform:none;--e-global-typography-83682a1-font-style:normal;--e-global-typography-83682a1-line-height:1.3em;--e-global-typography-83682a1-letter-spacing:-0.5px;--e-global-typography-7044a64-font-family:"Jost";--e-global-typography-7044a64-font-size:20px;--e-global-typography-7044a64-font-weight:700;--e-global-typography-7044a64-line-height:1.4em;--e-global-typography-7044a64-letter-spacing:-0.5px;--e-global-typography-84ca66e-font-family:"Jost";--e-global-typography-84ca66e-font-size:14px;--e-global-typography-84ca66e-font-weight:600;--e-global-typography-84ca66e-text-transform:uppercase;--e-global-typography-84ca66e-letter-spacing:1px;--e-global-typography-112b6c4-font-family:"Poppins";--e-global-typography-112b6c4-font-size:13px;--e-global-typography-112b6c4-font-weight:400;--e-global-typography-a435f28-font-family:"Jost";--e-global-typography-a435f28-font-size:69px;--e-global-typography-a435f28-font-weight:700;--e-global-typography-a435f28-line-height:1em;--e-global-typography-a435f28-letter-spacing:-1px;color:var( --e-global-color-primary );font-family:var( --e-global-typography-b2ce6af-font-family ), Sans-serif;font-size:var( --e-global-typography-b2ce6af-font-size );font-weight:var( --e-global-typography-b2ce6af-font-weight );text-transform:var( --e-global-typography-b2ce6af-text-transform );font-style:var( --e-global-typography-b2ce6af-font-style );line-height:var( --e-global-typography-b2ce6af-line-height );}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{background-color:var( --e-global-color-d49ac81 );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );color:var( --e-global-color-text );border-style:solid;border-width:0px 0px 0px 0px;border-color:var( --e-global-color-d49ac81 );border-radius:5px 5px 5px 5px;}.elementor-kit-9 button:hover,.elementor-kit-9 button:focus,.elementor-kit-9 input[type="button"]:hover,.elementor-kit-9 input[type="button"]:focus,.elementor-kit-9 input[type="submit"]:hover,.elementor-kit-9 input[type="submit"]:focus,.elementor-kit-9 .elementor-button:hover,.elementor-kit-9 .elementor-button:focus{background-color:var( --e-global-color-332724a );color:var( --e-global-color-text );border-style:solid;border-width:0px 0px 0px 0px;border-color:var( --e-global-color-332724a );}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 a{color:var( --e-global-color-primary );}.elementor-kit-9 a:hover{color:var( --e-global-color-435bebe );}.elementor-kit-9 h1{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-583e54c-font-family ), Sans-serif;font-size:var( --e-global-typography-583e54c-font-size );font-weight:var( --e-global-typography-583e54c-font-weight );line-height:var( --e-global-typography-583e54c-line-height );letter-spacing:var( --e-global-typography-583e54c-letter-spacing );}.elementor-kit-9 h2{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-5d167aa-font-family ), Sans-serif;font-size:var( --e-global-typography-5d167aa-font-size );font-weight:var( --e-global-typography-5d167aa-font-weight );line-height:var( --e-global-typography-5d167aa-line-height );letter-spacing:var( --e-global-typography-5d167aa-letter-spacing );}.elementor-kit-9 h3{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-d3dae9a-font-family ), Sans-serif;font-size:var( --e-global-typography-d3dae9a-font-size );font-weight:var( --e-global-typography-d3dae9a-font-weight );text-transform:var( --e-global-typography-d3dae9a-text-transform );font-style:var( --e-global-typography-d3dae9a-font-style );line-height:var( --e-global-typography-d3dae9a-line-height );letter-spacing:var( --e-global-typography-d3dae9a-letter-spacing );}.elementor-kit-9 h4{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-83682a1-font-family ), Sans-serif;font-size:var( --e-global-typography-83682a1-font-size );font-weight:var( --e-global-typography-83682a1-font-weight );text-transform:var( --e-global-typography-83682a1-text-transform );font-style:var( --e-global-typography-83682a1-font-style );line-height:var( --e-global-typography-83682a1-line-height );letter-spacing:var( --e-global-typography-83682a1-letter-spacing );}.elementor-kit-9 h5{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-7044a64-font-family ), Sans-serif;font-size:var( --e-global-typography-7044a64-font-size );font-weight:var( --e-global-typography-7044a64-font-weight );line-height:var( --e-global-typography-7044a64-line-height );letter-spacing:var( --e-global-typography-7044a64-letter-spacing );}.elementor-kit-9 h6{color:var( --e-global-color-d49ac81 );font-family:var( --e-global-typography-84ca66e-font-family ), Sans-serif;font-size:var( --e-global-typography-84ca66e-font-size );font-weight:var( --e-global-typography-84ca66e-font-weight );text-transform:var( --e-global-typography-84ca66e-text-transform );line-height:var( --e-global-typography-84ca66e-line-height );letter-spacing:var( --e-global-typography-84ca66e-letter-spacing );}.elementor-kit-9 label{color:var( --e-global-color-primary );font-family:var( --e-global-typography-520c191-font-family ), Sans-serif;font-size:var( --e-global-typography-520c191-font-size );font-weight:var( --e-global-typography-520c191-font-weight );line-height:var( --e-global-typography-520c191-line-height );}.elementor-kit-9 input:not([type="button"]):not([type="submit"]),.elementor-kit-9 textarea,.elementor-kit-9 .elementor-field-textual{font-family:var( --e-global-typography-69c152f-font-family ), Sans-serif;font-size:var( --e-global-typography-69c152f-font-size );font-weight:var( --e-global-typography-69c152f-font-weight );line-height:var( --e-global-typography-69c152f-line-height );color:var( --e-global-color-primary );background-color:var( --e-global-color-cfa1f76 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-cfa1f76 );border-radius:5px 5px 5px 5px;}.elementor-kit-9 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-9 textarea:focus,.elementor-kit-9 .elementor-field-textual:focus{color:var( --e-global-color-primary );background-color:var( --e-global-color-text );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-332724a );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-9{--e-global-typography-primary-font-size:37px;--e-global-typography-secondary-font-size:31px;--e-global-typography-text-font-size:15px;--e-global-typography-accent-font-size:12px;--e-global-typography-b2ce6af-font-size:15px;--e-global-typography-69c152f-font-size:13px;--e-global-typography-520c191-font-size:15px;--e-global-typography-583e54c-font-size:37px;--e-global-typography-5d167aa-font-size:31px;--e-global-typography-d3dae9a-font-size:25px;--e-global-typography-83682a1-font-size:21px;--e-global-typography-7044a64-font-size:18px;--e-global-typography-84ca66e-font-size:13px;--e-global-typography-112b6c4-font-size:12px;--e-global-typography-a435f28-font-size:49px;font-size:var( --e-global-typography-b2ce6af-font-size );line-height:var( --e-global-typography-b2ce6af-line-height );}.elementor-kit-9 h1{font-size:var( --e-global-typography-583e54c-font-size );line-height:var( --e-global-typography-583e54c-line-height );letter-spacing:var( --e-global-typography-583e54c-letter-spacing );}.elementor-kit-9 h2{font-size:var( --e-global-typography-5d167aa-font-size );line-height:var( --e-global-typography-5d167aa-line-height );letter-spacing:var( --e-global-typography-5d167aa-letter-spacing );}.elementor-kit-9 h3{font-size:var( --e-global-typography-d3dae9a-font-size );line-height:var( --e-global-typography-d3dae9a-line-height );letter-spacing:var( --e-global-typography-d3dae9a-letter-spacing );}.elementor-kit-9 h4{font-size:var( --e-global-typography-83682a1-font-size );line-height:var( --e-global-typography-83682a1-line-height );letter-spacing:var( --e-global-typography-83682a1-letter-spacing );}.elementor-kit-9 h5{font-size:var( --e-global-typography-7044a64-font-size );line-height:var( --e-global-typography-7044a64-line-height );letter-spacing:var( --e-global-typography-7044a64-letter-spacing );}.elementor-kit-9 h6{font-size:var( --e-global-typography-84ca66e-font-size );line-height:var( --e-global-typography-84ca66e-line-height );letter-spacing:var( --e-global-typography-84ca66e-letter-spacing );}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-kit-9 label{font-size:var( --e-global-typography-520c191-font-size );line-height:var( --e-global-typography-520c191-line-height );}.elementor-kit-9 input:not([type="button"]):not([type="submit"]),.elementor-kit-9 textarea,.elementor-kit-9 .elementor-field-textual{font-size:var( --e-global-typography-69c152f-font-size );line-height:var( --e-global-typography-69c152f-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-9{--e-global-typography-primary-font-size:28px;--e-global-typography-secondary-font-size:25px;--e-global-typography-text-font-size:14px;--e-global-typography-accent-font-size:11px;--e-global-typography-b2ce6af-font-size:14px;--e-global-typography-69c152f-font-size:12px;--e-global-typography-520c191-font-size:14px;--e-global-typography-583e54c-font-size:28px;--e-global-typography-5d167aa-font-size:25px;--e-global-typography-d3dae9a-font-size:22px;--e-global-typography-83682a1-font-size:20px;--e-global-typography-7044a64-font-size:16px;--e-global-typography-84ca66e-font-size:12px;--e-global-typography-112b6c4-font-size:11px;--e-global-typography-a435f28-font-size:39px;font-size:var( --e-global-typography-b2ce6af-font-size );line-height:var( --e-global-typography-b2ce6af-line-height );}.elementor-kit-9 h1{font-size:var( --e-global-typography-583e54c-font-size );line-height:var( --e-global-typography-583e54c-line-height );letter-spacing:var( --e-global-typography-583e54c-letter-spacing );}.elementor-kit-9 h2{font-size:var( --e-global-typography-5d167aa-font-size );line-height:var( --e-global-typography-5d167aa-line-height );letter-spacing:var( --e-global-typography-5d167aa-letter-spacing );}.elementor-kit-9 h3{font-size:var( --e-global-typography-d3dae9a-font-size );line-height:var( --e-global-typography-d3dae9a-line-height );letter-spacing:var( --e-global-typography-d3dae9a-letter-spacing );}.elementor-kit-9 h4{font-size:var( --e-global-typography-83682a1-font-size );line-height:var( --e-global-typography-83682a1-line-height );letter-spacing:var( --e-global-typography-83682a1-letter-spacing );}.elementor-kit-9 h5{font-size:var( --e-global-typography-7044a64-font-size );line-height:var( --e-global-typography-7044a64-line-height );letter-spacing:var( --e-global-typography-7044a64-letter-spacing );}.elementor-kit-9 h6{font-size:var( --e-global-typography-84ca66e-font-size );line-height:var( --e-global-typography-84ca66e-line-height );letter-spacing:var( --e-global-typography-84ca66e-letter-spacing );}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{font-size:var( --e-global-typography-accent-font-size );line-height:var( --e-global-typography-accent-line-height );letter-spacing:var( --e-global-typography-accent-letter-spacing );}.elementor-kit-9 label{font-size:var( --e-global-typography-520c191-font-size );line-height:var( --e-global-typography-520c191-line-height );}.elementor-kit-9 input:not([type="button"]):not([type="submit"]),.elementor-kit-9 textarea,.elementor-kit-9 .elementor-field-textual{font-size:var( --e-global-typography-69c152f-font-size );line-height:var( --e-global-typography-69c152f-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ===== St. Tales: Featured drink standard blocks (used on every featured drink page) ===== */ #fd-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 860px; } #fd-details > * { background: #FFFDF8; border: 1px solid #E6DCC2; border-radius: 16px; padding: 24px 16px; transition: transform .35s ease, box-shadow .35s ease; } #fd-details > *:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(60,48,25,.10); } #fd-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; max-width: 1100px; } #fd-ingredients, #fd-nutrition { background: #FFFDF8; border: 1px solid #E6DCC2; border-radius: 20px; padding: 36px; } #fd-nutrition .fd-nutrition { width: 100%; border-collapse: collapse; font-family: Inter, sans-serif; color: #1F2A22; } #fd-nutrition .fd-nutrition caption { text-align: left; font-family: Lora, Georgia, serif; font-size: 30px; font-weight: 700; padding-bottom: 10px; border-bottom: 8px solid #1F2A22; margin-bottom: 4px; caption-side: top; } #fd-nutrition .fd-nutrition th, #fd-nutrition .fd-nutrition td { padding: 10px 0; border-bottom: 1px solid #D9CFB8; font-size: 15px; text-align: left; vertical-align: top; } #fd-nutrition .fd-nutrition thead th { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: #6B6461; border-bottom: 3px solid #1F2A22; } #fd-nutrition .fd-nutrition td { text-align: right; font-weight: 600; } #fd-nutrition .fd-nutrition tbody th { font-weight: 600; } #fd-nutrition .fd-nutrition tr.fd-sub th { padding-left: 18px; font-weight: 400; } #fd-nutrition .fd-nutrition tfoot td { text-align: left; font-weight: 400; font-size: 13px; color: #6B6461; border-bottom: 0; padding-top: 14px; } #fd-cta-actions { display: flex !important; flex-wrap: wrap; gap: 12px; grid-template-columns: none !important; min-width: 0 !important; max-width: none !important; justify-content: flex-end; } #fd-cta-actions > * { transition: transform .25s ease, background-color .25s ease; } #fd-cta-actions > *:hover { transform: translateY(-2px); } @media (max-width: 900px) { #fd-panel { grid-template-columns: 1fr; } #fd-cta-actions { justify-content: flex-start; } } @media (max-width: 600px) { #fd-details { grid-template-columns: 1fr; } #fd-ingredients, #fd-nutrition { padding: 24px 20px; } } #fd-panel:not(:has(#fd-nutrition)) { grid-template-columns: 1fr; max-width: 760px; } /* fd-nutrition reset */ #fd-nutrition .fd-nutrition, #fd-nutrition .fd-nutrition th, #fd-nutrition .fd-nutrition td { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; background: transparent !important; } #fd-nutrition .fd-nutrition th, #fd-nutrition .fd-nutrition td { padding-left: 0; padding-right: 0; } #fd-nutrition .fd-nutrition tr.fd-sub th { padding-left: 18px; } #fd-nutrition { overflow-x: auto; } /* ===== Featured drink template (St. Tales – Featured Drink in My Templates) ===== */ /* ===== Golden Heart hero motion ===== */ @property --gh-paint { syntax: ''; inherits: false; initial-value: 0deg; } #fd-hero { isolation: isolate; } #fd-hero::after { content: ""; position: absolute; inset: 0 0 -420px 0; pointer-events: none; z-index: 1; background-image: radial-gradient(2px 2px at 12% 78%, rgba(255,196,120,.95), transparent 60%), radial-gradient(1.6px 1.6px at 28% 92%, rgba(255,170,90,.8), transparent 60%), radial-gradient(2.4px 2.4px at 46% 70%, rgba(255,214,150,.85), transparent 60%), radial-gradient(1.4px 1.4px at 63% 88%, rgba(255,180,100,.75), transparent 60%), radial-gradient(2px 2px at 81% 74%, rgba(255,200,130,.9), transparent 60%), radial-gradient(1.2px 1.2px at 92% 95%, rgba(255,160,80,.7), transparent 60%); background-size: 420px 420px; mix-blend-mode: screen; opacity: .65; animation: gh-embers 16s linear infinite; } #fd-hero > * { position: relative; z-index: 2; } /* warm glow that breathes behind the can */ #fd-stage::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; z-index: 0; background: radial-gradient(circle, rgba(226,150,80,.45) 0%, rgba(226,150,80,0) 68%); animation: gh-glow 5s ease-in-out infinite; } /* brush circle: paints itself on, then drifts slowly */ #fd-brush { z-index: 1; -webkit-mask: conic-gradient(from -100deg, #000 var(--gh-paint), transparent 0); mask: conic-gradient(from -100deg, #000 var(--gh-paint), transparent 0); animation: gh-paint 2.4s cubic-bezier(.65,.05,.25,1) .35s both, gh-spin 70s linear 2.8s infinite; } /* can: rises in with a tilt, then floats */ #fd-can { filter: drop-shadow(0 30px 34px rgba(0,0,0,.45)); animation: gh-rise 1.3s cubic-bezier(.2,.85,.25,1) .5s both, gh-float 6.5s ease-in-out 1.8s infinite; transition: filter .4s ease; } #fd-stage:hover #fd-can { filter: drop-shadow(0 40px 40px rgba(0,0,0,.55)) brightness(1.05); } #fd-stage:hover #fd-brush { animation-duration: 2.4s, 18s; } /* story badge: pops in, text ring keeps turning */ #fd-badge { animation: gh-pop .8s cubic-bezier(.3,1.5,.5,1) 1.6s both; } #fd-badge-ring { animation: gh-spin-rev 22s linear infinite; } /* copy: staggered entrance */ #fd-hero-copy > * { animation: gh-up .9s cubic-bezier(.2,.8,.2,1) both; } #fd-hero-copy > *:nth-child(1) { animation-delay: .10s; } #fd-hero-copy > *:nth-child(2) { animation-delay: .22s; } #fd-hero-copy > *:nth-child(3) { animation-delay: .38s; } #fd-hero-copy > *:nth-child(4) { animation-delay: .52s; } #fd-hero-copy > *:nth-child(5) { animation-delay: .66s; } #fd-hero-btn { transition: transform .25s ease, background-color .25s ease; } #fd-hero-btn:hover { transform: translateY(-2px); } /* flavor ticker */ #fd-ticker-track { width: max-content; flex-wrap: nowrap; animation: gh-marquee 38s linear infinite; } #fd-ticker-track > * { flex: 0 0 auto; white-space: nowrap; padding-right: 0; } #fd-ticker:hover #fd-ticker-track { animation-play-state: paused; } /* small touches below the fold */ #fd-tip-img { transition: transform .8s cubic-bezier(.2,.8,.2,1); } #fd-tip-img:hover { transform: scale(1.02) rotate(-.4deg); } #fd-faq button, #fd-faq [role="button"] { cursor: pointer; } @keyframes gh-paint { from { --gh-paint: 0deg; } to { --gh-paint: 360deg; } } @keyframes gh-spin { to { transform: rotate(360deg); } } @keyframes gh-spin-rev { to { transform: rotate(-360deg); } } @keyframes gh-rise { from { opacity: 0; transform: translateY(70px) rotate(-7deg) scale(.94); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } } @keyframes gh-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(1.2deg); } } @keyframes gh-pop { from { opacity: 0; transform: scale(.4) rotate(-30deg); } to { opacity: 1; transform: scale(1) rotate(0); } } @keyframes gh-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes gh-glow { 0%,100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } } @keyframes gh-embers { from { transform: translateY(0); } to { transform: translateY(-420px); } } @keyframes gh-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { #fd-hero::after, #fd-stage::before, #fd-brush, #fd-can, #fd-badge, #fd-badge-ring, #fd-hero-copy > *, #fd-ticker-track { animation: none !important; } #fd-brush { --gh-paint: 360deg; } } /* FAQ: native details/summary */ #fd-faq summary { list-style: none; cursor: pointer; transition: background-color .25s ease; } #fd-faq summary::-webkit-details-marker { display: none; } #fd-faq details[open] > summary { background: #D9B23C; } #fd-faq [data-element_type="e-accordion-item-icon"] { width: 18px; height: 18px; position: relative; flex: 0 0 18px; } #fd-faq [data-element_type="e-accordion-item-icon"]::before, #fd-faq [data-element_type="e-accordion-item-icon"]::after { content: ""; position: absolute; left: 3px; right: 3px; top: 8px; height: 2px; background: #1F2A22; transition: transform .3s ease; } #fd-faq [data-element_type="e-accordion-item-icon"]::after { transform: rotate(90deg); } #fd-faq details[open] [data-element_type="e-accordion-item-icon"]::after { transform: rotate(0deg); } #fd-faq details[open] > summary + * { animation: gh-up .4s ease both; } #fd-stage { overflow: visible; } /* CTA background video */ #fd-cta { isolation: isolate; } #fd-cta > * { position: relative; z-index: 2; } #fd-cta > #fd-cta-video, #fd-cta > #fd-cta-shade { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; pointer-events: none; } #fd-cta > #fd-cta-video { z-index: 0; object-fit: cover; } #fd-cta > #fd-cta-shade { z-index: 1; } #fd-cta-video video { width: 100%; height: 100%; object-fit: cover; display: block; } /* ===== Golden Heart overrides ===== */ #fd-hero::after { background-image: radial-gradient(6px 6px at 12% 78%, rgba(255,236,170,.9), transparent 70%), radial-gradient(4px 4px at 28% 92%, rgba(255,226,140,.8), transparent 70%), radial-gradient(8px 8px at 46% 70%, rgba(255,245,200,.7), transparent 70%), radial-gradient(5px 5px at 63% 88%, rgba(255,230,150,.8), transparent 70%), radial-gradient(7px 7px at 81% 74%, rgba(255,240,190,.75), transparent 70%), radial-gradient(4px 4px at 92% 95%, rgba(255,220,130,.7), transparent 70%); mix-blend-mode: normal; opacity: .85; animation-duration: 22s; } #fd-stage::before { background: radial-gradient(circle, rgba(255,214,110,.55) 0%, rgba(255,214,110,0) 68%); } #fd-stage::after { content: ""; position: absolute; inset: -16%; z-index: 0; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255,226,140,0) 0deg 8deg, rgba(255,226,140,.32) 9deg 11deg, rgba(255,226,140,0) 12deg 20deg); -webkit-mask: radial-gradient(circle, #000 22%, transparent 70%); mask: radial-gradient(circle, #000 22%, transparent 70%); animation: fd-rays 40s linear infinite; } @keyframes fd-rays { to { transform: rotate(360deg); } } #fd-can { filter: drop-shadow(0 30px 30px rgba(90,65,10,.35)); } /* falling pear leaves */ #fd-hero > #fd-leaf-1, #fd-hero > #fd-leaf-2, #fd-hero > #fd-leaf-3, #fd-hero > #fd-leaf-4 { position: absolute; z-index: 1; pointer-events: none; opacity: 0; } #fd-leaf-1 { animation: fd-fall 13s linear .5s infinite; } #fd-leaf-2 { animation: fd-fall 16s linear 4s infinite; } #fd-leaf-3 { animation: fd-fall 12s linear 7s infinite; } #fd-leaf-4 { animation: fd-fall 18s linear 10s infinite; } @keyframes fd-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 8% { opacity: .95; } 25% { transform: translate(-60px, 220px) rotate(70deg); } 50% { transform: translate(30px, 440px) rotate(160deg); } 75% { transform: translate(-50px, 660px) rotate(250deg); } 90% { opacity: .9; } 100% { opacity: 0; transform: translate(10px, 880px) rotate(340deg); } } /* golden tree grows on the film player */ #fd-tree { pointer-events: none; transform-origin: 40% 100%; animation: fd-grow 2.4s cubic-bezier(.3,.1,.2,1) .3s both; } #fd-tree-img { filter: brightness(0) invert(1) sepia(1) saturate(2.6) hue-rotate(2deg) brightness(.93) drop-shadow(0 6px 10px rgba(0,0,0,.35)); transform-origin: 40% 100%; animation: fd-sway 6s ease-in-out 2.8s infinite; } @keyframes fd-grow { 0% { clip-path: inset(100% 0 0 0); } 100% { clip-path: inset(0 0 0 0); } } @keyframes fd-sway { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-2deg); } } @supports (animation-timeline: view()) { #fd-tree { animation: fd-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } } @media (prefers-reduced-motion: reduce) { #fd-tree, #fd-tree-img, #fd-stage::after, #fd-leaf-1, #fd-leaf-2, #fd-leaf-3, #fd-leaf-4 { animation: none !important; } #fd-leaf-1, #fd-leaf-2, #fd-leaf-3, #fd-leaf-4 { opacity: 0 !important; } } /* Golden Heart v2: hero photo + stagger */ #fd-hero-photo { transform: rotate(6deg); animation: gh-photo-in 1s cubic-bezier(.2,.8,.2,1) 1.2s both; } @keyframes gh-photo-in { from { opacity: 0; transform: translateY(30px) rotate(14deg); } to { opacity: 1; transform: rotate(6deg); } } #fd-hero-copy > *:nth-child(6) { animation-delay: .78s; } #fd-hero-copy > *:nth-child(7) { animation-delay: .9s; } @media (prefers-reduced-motion: reduce) { #fd-hero-photo { animation: none !important; } } /* ===== end featured drink ===== *//* End custom CSS */