/* ===================================================================== Essential Oil — Product Description Block Reusable stylesheet for Floral Essential Oils product pages. Link this once in your site header: All selectors are scoped with .ajowan-desc / aj- prefixes so nothing leaks into the rest of the theme. ===================================================================== */ :root{ --maroon:#A31E23; --maroon-deep:#7A1418; --gold:#B7912B; --gold-light:#D8B85A; --amber:#C9862B; --leaf:#3E5C3F; --paper:#FFFFFF; --cream:#FBF7EF; --line:#E7E1D4; --ink:#2B241E; --ink-soft:#6B6055; } /* NOTE: these two rules were inline on / in the original page. If your theme already styles body, you can delete this block and keep only the .ajowan-desc styles below. */ .ajowan-desc, .ajowan-desc *{ box-sizing:border-box; } .ajowan-desc{ font-family:'Karla', sans-serif; line-height:1.7; color:var(--ink); -webkit-font-smoothing:antialiased; max-width:1040px; margin:0 auto; padding:0 24px 90px; position:relative; } .ajowan-desc h1, .ajowan-desc h2, .ajowan-desc h3{ font-family:'Cormorant Garamond', serif; font-weight:600; color:var(--maroon-deep); margin:0; } /* ============ AMBIENT FLOATING SEEDS ============ */ .aj-ambient{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; } .aj-seed{ position:absolute; width:7px; height:11px; background:radial-gradient(ellipse at 40% 35%, var(--gold-light), var(--gold) 60%, #8a6c1e); border-radius:50% 50% 50% 50%/60% 60% 40% 40%; opacity:0; animation:seedDrift linear infinite; } .aj-seed::after{ content:""; position:absolute; left:50%; top:8%; bottom:8%; width:1px; background:rgba(122,20,24,.35); transform:translateX(-50%); } @keyframes seedDrift{ 0%{ transform:translateY(-4vh) rotate(0deg) translateX(0); opacity:0; } 8%{ opacity:.5; } 50%{ transform:translateY(48vh) rotate(200deg) translateX(26px); opacity:.4; } 92%{ opacity:.25; } 100%{ transform:translateY(104vh) rotate(420deg) translateX(-14px); opacity:0; } } /* ============ SCROLL VIAL (signature element) ============ */ .aj-vial{ position:fixed; right:22px; top:50%; transform:translateY(-50%); width:30px; height:150px; z-index:40; transition:opacity .4s ease; } .aj-vial__label{ position:absolute; top:-24px; left:50%; transform:translateX(-50%); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; white-space:nowrap; } .aj-vial__glass{ position:absolute; inset:0 6px; border:1.5px solid var(--gold); border-radius:9px 9px 11px 11px; background:rgba(255,255,255,.65); backdrop-filter:blur(2px); overflow:hidden; box-shadow:0 4px 14px rgba(163,30,35,.14), inset 0 0 6px rgba(183,145,43,.15); } .aj-vial__cap{ position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:14px; height:9px; background:var(--maroon-deep); border-radius:3px 3px 0 0; } .aj-vial__oil{ position:absolute; left:0; right:0; bottom:0; height:0%; background:linear-gradient(to top, var(--amber), var(--gold-light)); transition:height .18s ease-out; } .aj-vial__oil::before{ content:""; position:absolute; top:-4px; left:0; right:0; height:8px; background:radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.7), transparent 70%); animation:oilShimmer 2.6s ease-in-out infinite; } @keyframes oilShimmer{ 0%,100%{ opacity:.4; } 50%{ opacity:.95; } } .aj-vial__pct{ position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); font-size:10px; font-weight:700; color:var(--maroon-deep); } @media (max-width:900px){ .aj-vial{ display:none; } } /* ============ HERO ============ */ .aj-hero{ position:relative; padding:64px 0 40px; z-index:1; } .aj-drop-stage{ position:relative; height:120px; margin-bottom:8px; } .aj-drop{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:22px; height:30px; } .aj-drop svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 4px 8px rgba(201,134,43,.45)); animation:dropFall 3.4s cubic-bezier(.5,.05,.7,.9) infinite; } @keyframes dropFall{ 0%{ transform:translateY(-16px) scale(.55); opacity:0; } 18%{ opacity:1; transform:translateY(0) scale(1); } 62%{ transform:translateY(74px) scale(1,1.15); opacity:1; } 68%{ transform:translateY(80px) scale(1.5,.4); opacity:0; } 100%{ transform:translateY(80px) scale(1.5,.4); opacity:0; } } .aj-ripple{ position:absolute; left:50%; top:96px; transform:translate(-50%,-50%); width:14px; height:6px; border-radius:50%; border:2px solid var(--gold); opacity:0; animation:rippleOut 3.4s ease-out infinite; } .aj-ripple--2{ animation-delay:.25s; border-color:var(--amber); } .aj-ripple--3{ animation-delay:.5s; border-color:var(--gold-light); } @keyframes rippleOut{ 0%,60%{ width:14px; height:6px; opacity:0; } 66%{ opacity:.9; } 100%{ width:190px; height:44px; opacity:0; } } .aj-pool{ position:absolute; left:50%; top:96px; transform:translate(-50%,-50%); width:230px; height:52px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(216,184,90,.28), rgba(216,184,90,.08) 55%, transparent 72%); animation:poolBreathe 3.4s ease-in-out infinite; } @keyframes poolBreathe{ 0%,55%{ transform:translate(-50%,-50%) scale(1); } 68%{ transform:translate(-50%,-50%) scale(1.07); } 100%{ transform:translate(-50%,-50%) scale(1); } } .aj-eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } .aj-eyebrow__line{ flex:1; height:1px; background:linear-gradient(to right, var(--gold), transparent); transform-origin:left; transform:scaleX(0); animation:lineGrow 1.1s .5s ease forwards; } @keyframes lineGrow{ to{ transform:scaleX(1); } } .aj-eyebrow__text{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:700; white-space:nowrap; opacity:0; animation:fadeUp .8s .3s ease forwards; } .aj-title h1{ font-size:46px; line-height:1.1; overflow:hidden; } .aj-title .word{ display:inline-block; transform:translateY(110%); animation:wordRise .85s cubic-bezier(.2,.7,.2,1) forwards; } @keyframes wordRise{ to{ transform:translateY(0); } } .aj-title .botanical{ font-style:italic; color:var(--leaf); font-size:19px; font-family:'Cormorant Garamond', serif; margin-top:8px; display:block; opacity:0; animation:fadeUp .8s 1s ease forwards; } @keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } } /* ============ QUICKSPEC CARDS ============ */ .aj-specs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:14px; margin:40px 0 64px; padding:0; list-style:none; position:relative; z-index:1; } .aj-spec{ position:relative; overflow:hidden; background:var(--cream); border:1px solid var(--line); border-radius:6px; padding:18px 18px 16px; transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease; cursor:default; } .aj-spec:hover{ transform:translateY(-6px); box-shadow:0 14px 28px rgba(122,20,24,.13); border-color:var(--gold); } .aj-spec::before{ content:""; position:absolute; top:0; left:-80%; width:55%; height:100%; background:linear-gradient(105deg, transparent, rgba(216,184,90,.35), transparent); transform:skewX(-20deg); transition:left .6s ease; } .aj-spec:hover::before{ left:130%; } .aj-spec dt{ font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-soft); font-weight:700; margin:0 0 5px; } .aj-spec dd{ margin:0; font-size:16.5px; font-weight:600; color:var(--maroon-deep); } .aj-spec dd em{ font-style:italic; color:var(--leaf); font-weight:500; } .aj-spec__icon{ position:absolute; right:12px; bottom:8px; width:30px; height:30px; opacity:.16; transition:opacity .3s ease, transform .4s ease; } .aj-spec:hover .aj-spec__icon{ opacity:.5; transform:rotate(-12deg) scale(1.15); } /* ============ SECTIONS ============ */ .aj-section{ margin-bottom:64px; position:relative; z-index:1; } .aj-kicker{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--gold); font-weight:700; margin-bottom:8px; } .aj-kicker::before{ content:""; width:8px; height:8px; border-radius:50%; background:radial-gradient(circle at 35% 35%, var(--gold-light), var(--gold)); animation:kickerPulse 2.4s ease-in-out infinite; } @keyframes kickerPulse{ 0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(183,145,43,.4);} 50%{ transform:scale(1.15); box-shadow:0 0 0 6px rgba(183,145,43,0);} } .aj-section h2{ font-size:31px; margin-bottom:6px; } .aj-rule{ width:56px; height:2px; margin:14px 0 24px; border-radius:2px; background:linear-gradient(90deg, var(--maroon), var(--gold)); background-size:200% 100%; animation:ruleFlow 3s linear infinite; } @keyframes ruleFlow{ to{ background-position:-200% 0; } } .aj-section p{ font-size:16px; margin:0 0 15px; max-width:820px; } .aj-section p:last-child{ margin-bottom:0; } .aj-hl{ background:linear-gradient(to top, rgba(216,184,90,.35) 38%, transparent 38%); padding:0 2px; font-weight:600; } /* Scroll reveal base */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); } .reveal.is-visible{ opacity:1; transform:translateY(0); } .reveal--left{ transform:translateX(-30px); } .reveal--left.is-visible{ transform:translateX(0); } /* ============ BENEFITS ============ */ .aj-benefits{ list-style:none; margin:10px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px; } .aj-benefit{ position:relative; background:#fff; border:1px solid var(--line); border-radius:6px; padding:20px 20px 18px 20px; overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; } .aj-benefit::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(to bottom, var(--maroon), var(--gold)); transform:scaleY(0); transform-origin:top; transition:transform .4s ease; } .aj-benefit:hover{ transform:translateY(-5px); box-shadow:0 12px 26px rgba(122,20,24,.12); } .aj-benefit:hover::after{ transform:scaleY(1); } .aj-benefit__leaf{ width:26px; height:26px; margin-bottom:10px; transition:transform .45s cubic-bezier(.3,1.4,.4,1); } .aj-benefit:hover .aj-benefit__leaf{ transform:rotate(-16deg) scale(1.2); } .aj-benefit span{ font-size:15.5px; display:block; } /* ============ COA + GC BARS ============ */ .aj-coa{ border:1px solid var(--line); border-radius:6px; overflow:hidden; box-shadow:0 6px 24px rgba(43,36,30,.05); } .aj-coa__head{ display:flex; justify-content:space-between; align-items:center; background:linear-gradient(120deg, var(--maroon-deep), var(--maroon), var(--maroon-deep)); background-size:220% 100%; animation:headFlow 7s ease-in-out infinite alternate; color:#fff; padding:14px 20px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; flex-wrap:wrap; gap:6px; } @keyframes headFlow{ to{ background-position:100% 0; } } table.aj-coa-table{ width:100%; border-collapse:collapse; font-size:15px; } table.aj-coa-table caption{ text-align:left; font-family:'Cormorant Garamond', serif; font-size:20px; font-weight:700; color:var(--maroon-deep); padding:18px 20px 8px; } table.aj-coa-table th, table.aj-coa-table td{ text-align:left; padding:12px 20px; border-top:1px solid var(--line); } table.aj-coa-table th{ width:44%; font-weight:600; color:var(--ink-soft); font-size:13.5px; } table.aj-coa-table tbody tr{ transition:background .25s ease; } table.aj-coa-table tbody tr:hover{ background:var(--cream); } table.aj-coa-table tbody tr:hover th, table.aj-coa-table tbody tr:hover td{ color:var(--maroon-deep); } /* GC bar chart */ .aj-gc{ padding:8px 20px 26px; } .aj-gc__title{ font-family:'Cormorant Garamond', serif; font-size:20px; font-weight:700; color:var(--maroon-deep); margin:16px 0 4px; } .aj-gc__sub{ font-size:12.5px; color:var(--ink-soft); margin:0 0 18px; } .aj-gc-row{ display:grid; grid-template-columns:130px 1fr 64px; align-items:center; gap:12px; padding:9px 0; } .aj-gc-row .name{ font-size:14px; font-weight:600; color:var(--ink); } .aj-gc-row .track{ height:14px; background:var(--cream); border-radius:8px; overflow:hidden; border:1px solid var(--line); } .aj-gc-row .bar{ display:block; /* FIX: without this the stays inline and width/height are ignored, so the bar never fills */ height:100%; width:0%; border-radius:8px; background:linear-gradient(90deg, var(--maroon), var(--amber), var(--gold-light)); background-size:200% 100%; transition:width 1.4s cubic-bezier(.2,.7,.2,1); animation:barShimmer 3s linear infinite; position:relative; } @keyframes barShimmer{ to{ background-position:-200% 0; } } .aj-gc-row .pct{ font-size:13.5px; font-weight:700; color:var(--maroon-deep); text-align:right; font-variant-numeric:tabular-nums; } @media (max-width:560px){ .aj-gc-row{ grid-template-columns:96px 1fr 54px; } } /* ============ FAQ ============ */ .aj-faq{ border-top:1px solid var(--line); } .aj-faq-item{ border-bottom:1px solid var(--line); } .aj-faq-q{ width:100%; background:none; border:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 4px; text-align:left; font-family:'Cormorant Garamond', serif; font-size:20px; font-weight:600; color:var(--ink); transition:color .25s ease, padding-left .3s ease; } .aj-faq-q:hover{ color:var(--maroon); padding-left:10px; } .aj-faq-q:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; } .aj-faq-q .drop-ic{ flex:none; width:24px; height:24px; transition:transform .45s cubic-bezier(.3,1.3,.4,1); } .aj-faq-item.open .drop-ic{ transform:rotate(180deg) scale(1.1); } .aj-faq-a{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.3,.7,.3,1), padding .4s ease; font-size:15.5px; color:var(--ink-soft); max-width:780px; padding:0 4px; } .aj-faq-item.open .aj-faq-a{ padding:0 4px 22px; } /* ============ HERITAGE CTA ============ */ .aj-heritage{ position:relative; overflow:hidden; background:linear-gradient(135deg, var(--maroon) 0%, var(--maroon-deep) 100%); color:#fff; border-radius:8px; padding:40px 36px; } .aj-heritage::before{ content:""; position:absolute; top:-60%; right:-15%; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(216,184,90,.28), transparent 65%); animation:glowDrift 9s ease-in-out infinite alternate; } @keyframes glowDrift{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-50px,36px) scale(1.18); } } .aj-heritage__bottle{ position:absolute; right:34px; bottom:-6px; width:74px; opacity:.2; animation:bottleFloat 5.5s ease-in-out infinite; } @keyframes bottleFloat{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-12px) rotate(2deg);} } .aj-heritage h2{ color:#fff; font-size:28px; margin-bottom:12px; position:relative; } .aj-heritage p{ color:#F3E4E1; font-size:15.5px; max-width:640px; margin:0 0 24px; position:relative; } .aj-heritage__cta{ position:relative; display:inline-block; overflow:hidden; background:#fff; color:var(--maroon-deep); font-weight:700; font-size:14.5px; letter-spacing:.03em; text-decoration:none; padding:14px 30px; border-radius:4px; transition:transform .2s ease, box-shadow .2s ease; } .aj-heritage__cta::after{ content:""; position:absolute; top:0; left:-90%; width:50%; height:100%; background:linear-gradient(105deg, transparent, rgba(183,145,43,.4), transparent); transform:skewX(-20deg); animation:ctaShine 3.2s ease infinite; } @keyframes ctaShine{ 0%,55%{ left:-90%; } 90%,100%{ left:140%; } } .aj-heritage__cta:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 12px 26px rgba(0,0,0,.32); } .aj-heritage__meta{ display:flex; flex-wrap:wrap; gap:30px; margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.22); position:relative; } .aj-heritage__meta div strong{ display:block; font-family:'Cormorant Garamond', serif; font-size:28px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; } .aj-heritage__meta div span{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#E9C9C8; } /* ============ RESPONSIVE + MOTION ============ */ @media (max-width:640px){ .aj-title h1{ font-size:31px; } .aj-heritage{ padding:28px 22px; } .ajowan-desc{ padding:0 16px 60px; } .aj-hero{ padding-top:44px; } } @media (prefers-reduced-motion: reduce){ .ajowan-desc *, .ajowan-desc *::before, .ajowan-desc *::after{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; } .reveal{ opacity:1; transform:none; } .aj-title .word{ transform:none; } .aj-seed, .aj-drop, .aj-ripple{ display:none; } }