/* ============================================================ YOURENERGYPHOTO LANDING PAGE Single file. No dependencies except Google Fonts. DEVELOPER NOTES — search for "SWAP" to find every place a real asset or link needs to go in. ============================================================ */ #energyphoto-prerender{ --ink:#0B1D35; /* deepest background */ --navy:#122845; /* section background */ --navy-lift:#1A3556; /* raised surfaces */ --paper:#F3EFE7; /* primary text */ --paper-dim:#BDC9D8; /* secondary text */ --gold:#E9B44C; /* single accent */ --line:rgba(233,180,76,.30); /* aura spectrum — used ONLY on the aura element, never as decoration */ --a-rose:#F2789F; --a-gold:#F4C430; --a-jade:#4FD18B; --a-sky:#58C4F0; --a-violet:#A98BF0; --measure:34rem; /* type — Latin default */ --display:'EnergyPhoto Landing Fraunces',Georgia,serif; --body:'EnergyPhoto Landing Inter',system-ui,sans-serif; } /* ===================== LANGUAGE ===================== The dropdown sets <html lang> and dir. Everything below then picks the right typeface and line-height automatically. ==================================================== */ :lang(ar),:lang(fa),:lang(prs){--display:'Noto Sans Arabic',sans-serif;--body:'Noto Sans Arabic',sans-serif;line-height:1.85} :lang(ur){--display:'Noto Nastaliq Urdu',serif;--body:'Noto Nastaliq Urdu',serif;line-height:2.2} :lang(he){--display:'Noto Sans Hebrew',sans-serif;--body:'Noto Sans Hebrew',sans-serif;line-height:1.7} :lang(hi),:lang(mr){--display:'Noto Sans Devanagari',sans-serif;--body:'Noto Sans Devanagari',sans-serif;line-height:1.8} :lang(bn){--display:'Noto Sans Bengali',sans-serif;--body:'Noto Sans Bengali',sans-serif;line-height:1.8} :lang(te){--display:'Noto Sans Telugu',sans-serif;--body:'Noto Sans Telugu',sans-serif;line-height:1.85} :lang(ta){--display:'Noto Sans Tamil',sans-serif;--body:'Noto Sans Tamil',sans-serif;line-height:1.85} :lang(pa){--display:'Noto Sans Gurmukhi',sans-serif;--body:'Noto Sans Gurmukhi',sans-serif;line-height:1.8} :lang(gu){--display:'Noto Sans Gujarati',sans-serif;--body:'Noto Sans Gujarati',sans-serif;line-height:1.8} :lang(th){--display:'Noto Sans Thai',sans-serif;--body:'Noto Sans Thai',sans-serif;line-height:1.9} :lang(ko){--display:'Noto Sans KR',sans-serif;--body:'Noto Sans KR',sans-serif} :lang(ja){--display:'Noto Sans JP',sans-serif;--body:'Noto Sans JP',sans-serif} :lang(zh){--display:'Noto Sans SC',sans-serif;--body:'Noto Sans SC',sans-serif} /* CJK and Urdu have no true italic — browsers fake it badly */ :lang(ko) em,:lang(ja) em,:lang(zh) em,:lang(ur) em, :lang(ko) blockquote,:lang(ja) blockquote,:lang(zh) blockquote,:lang(ur) blockquote{font-style:normal} *{box-sizing:border-box} #energyphoto-prerender{overflow-x:clip;-webkit-text-size-adjust:100%} #energyphoto-prerender{ margin:0;overflow-wrap:break-word; background:var(--ink); color:var(--paper); font-family:var(--body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} a{color:inherit} .wrap{width:100%;max-width:var(--measure);margin-inline:auto;padding-inline:22px} section{padding-block:56px} section.tight{padding-block:42px} h1,h2,h3{overflow-wrap:break-word; font-family:var(--display); font-weight:500; line-height:1.12; letter-spacing:-.015em; margin:0 0 .5em; text-wrap:balance; } h1{font-size:clamp(2.05rem,7.4vw,3.05rem);font-weight:400} h2{font-size:clamp(1.75rem,6.2vw,2.35rem)} h3{font-size:1.2rem;font-weight:500;font-family:var(--display);letter-spacing:-.005em} p{margin:0 0 1.1em;max-width:32rem} .dim{color:var(--paper-dim)} .small{font-size:.88rem;line-height:1.55} /* ---------- language switcher ---------- */ .langbar{display:flex;justify-content:flex-end;margin-bottom:18px} /* from tablet up, pin it to the top-right of the hero regardless of layout */ @media (min-width:640px){ .hero .wrap{position:relative} .langbar{position:absolute;inset-block-start:0;inset-inline-end:24px;margin:0;z-index:3} } @media (min-width:1024px){ .langbar{inset-inline-end:40px} } .langbar select{ appearance:none;-webkit-appearance:none; background:rgba(255,255,255,.05) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23A8B6C6' stroke-width='1.6' fill='none'/></svg>") no-repeat right 14px center; border:1px solid var(--line);border-radius:999px; color:var(--paper);font-family:var(--body);font-size:.88rem; padding:12px 40px 12px 18px;cursor:pointer; } .langbar select:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .langbar option{background:#0E243F;color:#F3EFE7} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} [dir="rtl"] .langbar{justify-content:flex-start} /* ---------- buttons ---------- */ .btn{ display:block;width:100%; padding:19px 24px; border:0;border-radius:999px; background:linear-gradient(96deg,var(--a-gold),var(--a-rose) 52%,var(--a-violet)); color:#160C22; font-family:var(--body);font-size:1.06rem;font-weight:600; text-align:center;text-decoration:none; cursor:pointer; box-shadow:0 10px 34px -14px rgba(244,196,48,.75);min-height:44px} .btn:hover{filter:brightness(1.06)} .btn-quiet{ background:transparent;color:var(--paper); border:1px solid var(--line);box-shadow:none;font-weight:500; } .btn-quiet:hover{background:rgba(233,180,76,.07);filter:none} .btn + .btn{margin-top:11px} .btn-note{margin-top:13px;font-size:.85rem;color:var(--paper-dim);text-align:center} a:focus-visible,button:focus-visible,summary:focus-visible,.slider:focus-visible{ outline:2px solid var(--gold);outline-offset:3px;border-radius:6px; } /* ---------- hero ---------- */ .hero{ position:relative;overflow:hidden; padding-top:34px;padding-bottom:56px; background: radial-gradient(120% 62% at 78% 4%, rgba(169,139,240,.22), transparent 62%), radial-gradient(105% 55% at 8% 22%, rgba(88,196,240,.15), transparent 60%), var(--ink); } .brand{ display:inline-flex;align-items:center;gap:11px;position:relative;z-index:2; padding:7px 15px;border-radius:999px; background:rgba(8,20,38,.34);backdrop-filter:blur(12px); border:1px solid rgba(233,180,76,.18); box-shadow:0 2px 16px -9px rgba(0,0,0,.55); white-space:nowrap; align-self:start;justify-self:start;width:fit-content;max-width:100%; font-family:var(--display);font-size:.98rem;letter-spacing:.05em; color:var(--paper);margin-bottom:34px; } .brand .mark{flex:none;display:block} .brand-name{white-space:nowrap} .brand sup{font-size:.55em;position:relative;top:-.5em;letter-spacing:0} #energyphoto-prerender > footer .mark{display:block;margin:0 auto 20px;opacity:.9} .hero h1{margin-bottom:.42em} .hero .lede{font-size:1.1rem;color:var(--paper-dim);max-width:29rem} /* privacy note */ .privacy{ display:flex;gap:11px;align-items:flex-start; border:1px solid var(--line);border-radius:15px; padding:14px 16px;margin:22px 0 26px; font-size:.9rem;line-height:1.5;color:var(--paper-dim); } .privacy strong{color:var(--paper);font-weight:600} /* ---------- hero carousel: signature element ---------- */ .carousel{position:relative;margin-bottom:14px} .track{ display:flex;overflow-x:auto;scroll-snap-type:x mandatory; gap:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch; } .track::-webkit-scrollbar{display:none} .slide{ flex:0 0 100%;scroll-snap-align:center; } .ba{display:grid;grid-template-columns:1fr 1fr;gap:8px} .ba figure{margin:0} .frame{ position:relative;aspect-ratio:2/3;border-radius:13px;overflow:hidden; background:#101B29;box-shadow:0 20px 54px -30px rgba(0,0,0,.95); } .ba figcaption{ margin-top:9px;font-size:.7rem;letter-spacing:.13em;color:var(--paper-dim); } .ba .aft figcaption{color:var(--a-rose)} .slide-label{ margin-top:13px;font-size:.92rem;color:var(--paper-dim);text-align:center; } .slide-label b{color:var(--paper);font-weight:600} /* Real images fill each .frame. NOTE FOR DEV: these are base64-embedded so the file previews standalone. In production, replace each data: URI with a hosted .webp or .jpg — it keeps the page light and cacheable. */ .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .dots{display:flex;justify-content:center;gap:0;margin-top:4px} .dots button{ /* 8px dot, 44px tap target — background-clip keeps the visual small */ width:44px;height:44px;padding:18px;border:0;border-radius:50%; background:rgba(255,255,255,.26);background-clip:content-box; cursor:pointer; } .dots button[aria-current="true"]{background:var(--gold);background-clip:content-box;padding-inline:11px;border-radius:99px} /* ---------- press ---------- */ .press{ border-block:1px solid rgba(233,180,76,.16); padding-block:26px;text-align:center; } .press p{margin:0 auto 12px;font-size:.78rem;letter-spacing:.11em;color:var(--paper-dim)} .press ul{ list-style:none;margin:0;padding:0; display:flex;justify-content:center;flex-wrap:wrap;gap:6px 18px; font-family:var(--display);font-size:1.06rem;color:var(--paper); } .press a{ display:inline-block;color:inherit;text-decoration:none; padding:10px 8px;border-bottom:1px solid transparent;transition:border-color .2s,color .2s; } .press a:hover,.press a:focus-visible{color:var(--gold);border-bottom-color:var(--line)} /* ---------- three kinds ---------- */ .kinds{display:grid;gap:16px;margin-top:34px} .kind{ border:1px solid rgba(255,255,255,.09); border-radius:17px;padding:22px 20px; background:linear-gradient(168deg,rgba(255,255,255,.045),transparent); } .kind h3{margin-bottom:.35em} .kind p{margin:0;font-size:.94rem;color:var(--paper-dim)} .kind .tag{ display:inline-block;margin-bottom:11px;font-size:.75rem; letter-spacing:.08em;color:var(--gold); } /* ---------- what you get ---------- */ .getback{background:var(--navy)} .fullcard{margin:28px 0 0} .fullcard img{width:100%;height:auto;border-radius:16px;box-shadow:0 26px 64px -34px #000;display:block} .fullcard figcaption{margin-top:12px;font-size:.86rem;color:var(--paper-dim);text-align:center} .gets{list-style:none;margin:30px 0 0;padding:0} .gets li{ padding:19px 0;border-top:1px solid rgba(255,255,255,.09); } .gets li:last-child{border-bottom:1px solid rgba(255,255,255,.09)} .gets b{display:block;font-weight:600;font-size:1.02rem;margin-bottom:2px} .gets span{color:var(--paper-dim);font-size:.93rem} .promise{ margin-top:30px;padding:24px 22px; border-radius:18px; border:1px solid rgba(79,209,139,.34); background:linear-gradient(150deg,rgba(79,209,139,.11),rgba(88,196,240,.05)); } .promise h3{font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.25;margin-bottom:.5em} .promise p{margin:0;font-size:.95rem;color:var(--paper-dim)} /* ---------- raise it ---------- */ .tries{display:grid;gap:10px;margin-top:28px} .try{ display:flex;align-items:center;gap:14px; border:1px solid rgba(255,255,255,.1);border-radius:14px; padding:15px 17px;font-size:.98rem; } .try em{font-style:normal;font-size:1.25rem;line-height:1;flex:none} /* ---------- memory ---------- */ .memory{background:var(--navy)} blockquote{ margin:26px 0 0;padding-block:2px;padding-inline-start:18px; border-inline-start:2px solid var(--gold); font-family:var(--display);font-style:italic;font-weight:300; font-size:1.02rem;line-height:1.48;color:var(--paper); max-width:33rem; } blockquote p{margin:0 0 10px;max-width:none} blockquote p:last-of-type{margin-bottom:0} blockquote footer{ display:block;margin:8px 0 0;padding:0;border:0;text-align:start; font-family:var(--body);font-style:normal;font-weight:500; font-size:.75rem;letter-spacing:.09em;text-transform:uppercase; color:var(--gold);opacity:.8; } /* ---------- price ---------- */ .pricebox{ border:1px solid var(--line);border-radius:22px; padding:30px 24px; background: radial-gradient(90% 60% at 50% 0%, rgba(233,180,76,.11), transparent 70%), var(--navy-lift); } .badge{ display:inline-block;border:1px solid var(--line);border-radius:999px; padding:5px 14px;font-size:.76rem;letter-spacing:.07em;color:var(--gold); margin-bottom:18px; } .amount{ font-family:var(--display);font-size:3.5rem;font-weight:400;line-height:1; margin:0 0 4px; } .amount small{font-family:var(--body);font-size:1rem;color:var(--paper-dim);font-weight:400} .anchor{ margin:20px 0 24px;padding:16px 18px; border-radius:14px;background:rgba(0,0,0,.26); font-size:.93rem;line-height:1.55;color:var(--paper-dim); } .anchor b{color:var(--paper);font-weight:600} .incl{list-style:none;margin:22px 0 0;padding:0;font-size:.93rem} .incl li{padding-inline-start:26px;position:relative;margin-bottom:10px;color:var(--paper-dim)} .incl li::before{ content:"";position:absolute;inset-inline-start:4px;top:.62em; width:7px;height:7px;border-radius:50%;background:var(--gold); } .incl li b{color:var(--paper);font-weight:600} /* ---------- walkthrough video ---------- */ .walkthrough{ /* Works for any aspect ratio. A vertical (9:16) clip is capped by height so it never dominates the page; a square or landscape clip fills the column width. */ display:block; width:auto;height:auto; max-width:100%; max-height:min(74vh, 620px); margin:24px auto 0; border-radius:18px; background:#0B1A2B; box-shadow:0 24px 60px -34px #000; } /* ---------- comparison ---------- */ .compare-sec{background:var(--navy)} .compare{ width:100%;border-collapse:separate;border-spacing:0; margin-top:28px;font-size:.92rem;table-layout:fixed; } /* the table is long — keep the column names in view while it scrolls */ .compare thead th{ position:sticky;top:0;z-index:2; background:var(--navy); text-align:start;padding:14px 10px 12px 0; font-weight:600;font-size:.78rem;line-height:1.3; letter-spacing:.05em;color:var(--paper-dim); border-bottom:1px solid rgba(255,255,255,.18); } .compare thead th:last-child{color:var(--gold);padding-inline-end:0} .compare col.c1{width:27%} .compare col.c2{width:29%} .compare col.c3{width:44%} .compare td{ padding:13px 10px 13px 0;vertical-align:top; border-bottom:1px solid rgba(255,255,255,.07);color:var(--paper-dim); } .compare td:first-child{color:var(--paper);font-weight:500} .compare td:last-child{padding-inline-end:0;color:var(--paper)} .compare td b{font-weight:600} /* ---------- origin ---------- */ .origin .portrait{ width:106px;height:106px;border-radius:50%;object-fit:cover; margin-bottom:26px; } .origin p{font-size:1.04rem;max-width:34rem} .origin em{font-style:italic;color:var(--paper)} .origin .sign{ font-family:var(--display);font-style:italic;font-size:1.1rem; color:var(--gold);margin-top:26px; } /* ---------- foundation ---------- */ .foundation{background:var(--navy)} .give{ border:1px solid var(--line);border-radius:18px;padding:24px 22px;margin-top:26px; } .give p:last-child{margin-bottom:0} /* ---------- faq ---------- */ details{border-top:1px solid rgba(255,255,255,.1)} details:last-of-type{border-bottom:1px solid rgba(255,255,255,.1)} summary{ list-style:none;cursor:pointer;padding:19px 34px 19px 0;position:relative; font-weight:600;font-size:1rem; } summary::-webkit-details-marker{display:none} summary::after{ content:"+";position:absolute;inset-inline-end:4px;top:17px; font-size:1.35rem;font-weight:300;color:var(--gold);line-height:1; } details[open] summary::after{content:"–"} details p{margin:0 0 19px;color:var(--paper-dim);font-size:.95rem} /* ---------- footer ---------- */ #energyphoto-prerender > footer{padding:52px 0 60px;text-align:center;border-top:1px solid rgba(255,255,255,.09)} #energyphoto-prerender > footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 20px;font-size:.87rem;margin-bottom:22px} #energyphoto-prerender > footer nav a{color:var(--paper-dim);text-decoration:none} #energyphoto-prerender > footer nav a:hover{color:var(--paper)} #energyphoto-prerender > footer .legal{font-size:.8rem;color:var(--paper-dim);max-width:27rem;margin-inline:auto} /* ============================================================ RESPONSIVE Mobile first. Tablet widens the column and pairs the grids. Desktop splits the hero and the "what comes back" section into two columns so the page never reads as a stretched phone. ============================================================ */ /* ---------- TABLET ---------- */ @media (min-width:640px){ #energyphoto-prerender{--measure:44rem} #energyphoto-prerender{font-size:17.5px} section{padding-block:72px} .wrap{padding-inline:32px} .kinds{grid-template-columns:1fr 1fr} .kind:first-child{grid-column:1/-1} .tries{grid-template-columns:1fr 1fr} .gets li{padding:22px 0} .fullcard img{max-width:420px;margin-inline:auto} .pricebox{padding:38px 34px} .amount{font-size:4rem} .btn{width:auto;min-width:19rem;margin-inline:auto} .btn-note{max-width:32rem;margin-inline:auto} .compare{font-size:.96rem} } /* ---------- DESKTOP ---------- */ @media (min-width:1024px){ #energyphoto-prerender{--measure:62rem} section{padding-block:88px} .wrap{padding-inline:40px} h1{font-size:3.5rem} h2{font-size:2.5rem;max-width:22ch} /* hero: copy left, carousel right */ .hero{padding-top:44px;padding-bottom:84px} .hero .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,26rem); column-gap:72px; align-items:start; } .brand{grid-column:1/-1;grid-row:1} .hero h1{grid-column:1;grid-row:2;font-size:3.05rem} .hero .lede{grid-column:1;grid-row:3;font-size:1.16rem} .privacy{grid-column:1;grid-row:4} .hero .btn{grid-column:1;grid-row:5;width:100%;margin-inline:0} .hero .btn-note{grid-column:1;grid-row:6;margin-inline:0;text-align:start} .carousel{grid-column:2;grid-row:2 / 7;align-self:start;margin-bottom:0} /* what comes back: card left, list right */ .getback .wrap{ display:grid; grid-template-columns:minmax(0,22rem) minmax(0,1fr); column-gap:64px; align-items:start; } .getback h2,.getback > .wrap > .dim{grid-column:1/-1} .fullcard{grid-column:1;grid-row:3;margin-top:34px} .fullcard img{max-width:none} .gets{grid-column:2;grid-row:3;margin-top:34px} .promise{grid-column:1/-1;grid-row:4} .kinds{grid-template-columns:repeat(3,1fr);gap:20px} .kind:first-child{grid-column:auto} .tries{grid-template-columns:repeat(4,1fr)} .try{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 18px;font-size:.95rem} blockquote{font-size:1.1rem;max-width:34rem} .compare col.c1{width:24%} .compare col.c2{width:26%} .compare col.c3{width:50%} .pricebox{max-width:34rem;margin-inline:auto} .give{max-width:36rem} details{max-width:40rem} } /* ---------- WIDE ---------- */ @media (min-width:1400px){ #energyphoto-prerender{--measure:68rem} .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,29rem);column-gap:88px} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } .brand-note{font-family:var(--body);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);opacity:.85;padding-inline-start:12px;border-inline-start:1px solid rgba(255,255,255,.18);white-space:nowrap} @media (max-width:479px){ .brand{flex-wrap:nowrap;padding:6px 12px;font-size:.85rem;gap:9px} .brand-note{flex-basis:auto;margin-top:0;font-size:.6rem;letter-spacing:.05em;padding-inline-start:9px} } .cnav{position:absolute;top:38%;transform:translateY(-50%);z-index:4; width:44px;height:44px;min-height:44px;display:none; align-items:center;justify-content:center; border:1px solid rgba(233,180,76,.45);border-radius:50%; background:rgba(11,29,53,.72);backdrop-filter:blur(8px); box-shadow:0 0 18px -6px rgba(233,180,76,.55); color:var(--gold);cursor:pointer;padding:0; transition:background .18s ease,border-color .18s ease} .cnav svg{width:22px;height:22px;display:block;pointer-events:none} .cnav{pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent; -webkit-appearance:none;appearance:none} .cnav:active{transform:translateY(-50%) scale(.92);background:rgba(233,180,76,.22)} .cnav:hover{background:rgba(10,22,38,.85);border-color:var(--gold)} .cnav:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .cnav.prev{inset-inline-start:-20px} .cnav.next{inset-inline-end:-20px} .cnav{display:flex} @media (prefers-reduced-motion:reduce){.cnav{transition:none}} /* Mobile: let the next slide peek so it's obvious there is more to swipe. */ @media (max-width:1023px){ .slide{flex:0 0 100%} .track{scroll-padding-inline:0} .dots{gap:9px} .dots button{width:9px;height:9px;opacity:.55} .dots button[aria-current="true"]{opacity:1} } @media (min-width:1024px){ .slide{flex:0 0 100%} } .books{display:grid;grid-template-columns:1fr;gap:26px;margin-top:26px;max-width:640px} .books figure{margin:0} .books img{width:100%;height:auto;border-radius:10px;box-shadow:0 22px 48px -26px #000} .books figcaption{margin-top:10px;font-size:.88rem;color:var(--paper-dim)} @media (min-width:560px){.books{grid-template-columns:1fr 1fr;gap:30px}} [dir="rtl"] .cnav svg{transform:scaleX(-1)} [dir="rtl"] .books figcaption,[dir="rtl"] .slide-label{text-align:start} .steps{margin-top:28px} .steps .track{gap:18px} .steps .slide{flex:0 0 78%} .steps .shot{border-radius:14px;overflow:hidden;background:#0b1626; box-shadow:0 26px 54px -28px #000;border:1px solid rgba(255,255,255,.08)} .steps .shot img{width:100%;height:auto;display:block} .steps figure{margin:0} .steps figcaption{margin-top:12px;font-size:.9rem;color:var(--paper-dim);text-align:center} .steps figcaption b{display:block;color:var(--paper);font-weight:600;margin-bottom:2px} @media (min-width:700px){.steps .slide{flex:0 0 32%}.steps .cnav{display:none}} /* ---------- light source: gold rays from the upper left ---------- */ #energyphoto-prerender{position:relative;isolation:isolate} #energyphoto-prerender::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(26% 20% at 9% -12%, rgba(255,241,214,.26), transparent 64%), radial-gradient(48% 38% at 9% -12%, rgba(244,196,48,.22), transparent 70%), radial-gradient(92% 76% at 4% -10%, rgba(233,180,76,.14), transparent 76%), /* rays fanning out and down from the heart */ conic-gradient(from 92deg at 9% -12%, transparent 0deg, rgba(255,240,200,.15) 4deg, transparent 9deg, transparent 14deg, rgba(233,180,76,.10) 19deg, transparent 25deg, transparent 31deg, rgba(255,240,200,.13) 36deg, transparent 42deg, transparent 49deg, rgba(233,180,76,.09) 55deg, transparent 62deg, transparent 69deg, rgba(233,180,76,.11) 75deg, transparent 83deg, transparent 92deg, rgba(233,180,76,.06) 98deg, transparent 107deg, transparent 118deg,rgba(233,180,76,.05) 124deg, transparent 134deg); } #energyphoto-prerender > *{position:relative;z-index:1} /* One fixed ray backdrop shows through every homepage section. */ .hero,.getback,.memory,.compare-sec,.foundation{background:transparent} #energyphoto-prerender::before{opacity:.8} .hero .carousel{margin-top:30px} .hero .slide-label{margin-top:14px;font-size:.8rem;max-width:84%;margin-inline:auto;line-height:1.45} .hero .dots{margin-top:12px} .hero .dots{position:relative;z-index:4} /* ---------- the aura ring around the hero carousel ---------- */ .hero .carousel{position:relative;isolation:isolate} /* photos held in light rather than a drawn ring */ .hero .carousel{max-width:360px;margin-inline:auto;margin-top:26px} .hero .carousel::before{ content:"";position:absolute;z-index:-1;pointer-events:none; /* a true circle: square box, centred on the photos */ left:50%;top:48%; width:152%;aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; background: radial-gradient(closest-side, rgba(255,241,214,.17), rgba(244,196,48,.11) 40%, transparent 72%), radial-gradient(56% 56% at 32% 26%, rgba(233,180,76,.20), transparent 70%), radial-gradient(58% 58% at 74% 78%, rgba(169,139,240,.16), transparent 72%); filter:blur(6px); opacity:.9; } @media (prefers-reduced-motion:reduce){ .hero .carousel::before{animation:none;opacity:.9} } .hero .carousel{margin-top:30px} .hero .slide-label{margin-top:14px;font-size:.8rem;max-width:84%;margin-inline:auto;line-height:1.45} .hero .dots{margin-top:12px} .hero .dots{position:relative;z-index:4} .hero .privacy{border:0;padding:0;margin:30px 0 26px;background:none;position:relative;z-index:3} .hero .privacy strong{color:var(--paper)} /* hero text sits on top of the light with a soft lift */ .hero h1{text-shadow:0 2px 22px rgba(4,16,31,.85), 0 1px 4px rgba(4,16,31,.7)} .hero .lede,.hero .privacy{text-shadow:0 1px 14px rgba(4,16,31,.8)} .hero .lede{color:#D6DFEA} /* ---------- light source ---------- */ .lightsource{ position:absolute;z-index:0;pointer-events:none; top:-186px;left:-168px;width:640px; opacity:.78; opacity:.92; } .lightsource img{width:100%;height:auto;display:block} @media (prefers-reduced-motion:reduce){ .lightsource{animation:none;opacity:.92} } @media (max-width:699px){ .lightsource{top:-180px;left:-150px;width:420px;opacity:.55} .hero .carousel{max-width:none;margin-top:18px} .cnav.prev{inset-inline-start:6px} .cnav.next{inset-inline-end:6px} .cnav{width:40px;height:40px;background:rgba(11,29,53,.8)} .hero .carousel::before{width:138%} .hero .privacy{margin-top:24px} } /* let the ring cross the privacy line, which is no longer a box */ .hero .privacy{ border:0;padding:0;margin:34px 0 26px; background:none;position:relative;z-index:3; } .hero .privacy strong{color:var(--paper)} /* phone: a true oval would crop the faces, so it eases into a soft round-rect */ @media (max-width:699px){ .hero .privacy{margin-top:26px} } /* ---------- phones: let the words breathe (typography only) ---------- */ @media (max-width:699px){ .hero h1{ line-height:1.24; /* was 1.12 — three stacked lines need air */ letter-spacing:-.005em; /* was -.015em — negative tracking crowds small type */ word-spacing:.02em; color:#FFFFFF; /* pure white on phones, not the warm paper tone */ text-shadow:0 2px 24px rgba(4,16,31,.9), 0 1px 4px rgba(4,16,31,.75); } .hero .lede{ line-height:1.74; /* was 1.62 */ color:#E6ECF4; /* brighter against the lit background */ letter-spacing:.004em; } .hero .privacy{line-height:1.62;color:#C9D4E1} .hero .btn-note{line-height:1.6} } /* ---------- desktop hero balance ---------- */ @media (min-width:1024px){ /* the carousel spans the text block and centres against it, instead of sitting high with dead space beneath */ .hero .carousel{ grid-column:2;grid-row:2/6; align-self:center; max-width:none;width:100%; margin-top:0; } .hero .carousel .slide-label{max-width:88%} /* photos fill the column properly */ .hero .frame{border-radius:15px} .hero .carousel::before{width:128%} } @media (min-width:1400px){ .hero .carousel::before{width:124%} } /* every slide reserves the same caption space, so nothing jumps between them */ .hero .ba figcaption{min-height:2.5em;display:flex;align-items:flex-start} .hero .slide-label{min-height:3.1em} /* phones: a brighter, cleaner white for the title */ @media (max-width:699px){ .hero h1{color:#FFFFFF;text-shadow:0 2px 24px rgba(4,16,31,.9), 0 1px 4px rgba(4,16,31,.75)} } /* Keep a compact, consistent gutter beside the heart instead of an empty row. */ .hero-masthead{padding-top:176px;margin-bottom:24px;display:flex;justify-content:flex-end;align-items:flex-start} .hero-masthead .brand{margin-bottom:0} .hero-wordmark{white-space:nowrap} .hero-wordmark sup{font-size:.38em;line-height:0;vertical-align:super;letter-spacing:0;margin-inline-start:.04em} @media (min-width:700px) and (max-width:1023px){ .lightsource{width:480px;top:-160px;left:-120px} .hero-masthead{padding-top:216px} } @media (min-width:1024px){ .hero .wrap{ width:calc(100% - 328px);max-width:68rem; margin-inline:328px 0;padding-inline:24px; grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px; } .hero-masthead{grid-column:1/-1;grid-row:1;min-height:0;padding-top:0;justify-content:flex-start;margin-bottom:32px} .hero h1{font-size:clamp(2rem,2.75vw,3.05rem)} } #energyphoto-prerender :is(h1,h2,h3,h4,h5,h6){color:var(--paper)}

YourEnergyPhoto^™ is the aura camera web app in your pocket.

Your energy can change moment to moment — with a crystal in your hand, a pet beside you, the people you're near, a few minutes of breathwork. Turn any photo into an aura reading in seconds and watch what moved.

A woman smiling at the camera, photographed indoors. — MORNING PHOTO

The same photo as an YourEnergyPhoto, with green, gold and yellow light around her. — AURA JOURNAL PHOTO

Take one right now. Then take another tonight and see what moved.

A black and white photograph from decades ago: a woman holding a baby. — MY MOM BEFORE I WAS BORN

The same photograph as an YourEnergyPhoto, glowing with pink and blue light. — MISS HER PHYSICAL PRESENCE, LOVE SEEING HER ENERGY!

See your Mom’s or Grandma’s beautiful energy again. Any year. Colour or black and white.

A small terrier sitting in front of a backdrop of red roses. — MY DOG OLIVER WINSTON

The same dog as an YourEnergyPhoto, surrounded by pink, gold and violet light. — WOW! SEE HIM GLOW

Pets too. Your pet’s energy colours will surprise and delight you.

Just a photo. No face mapping. Your photos stay private to you, and you can delete any of them at any time.

Subscribe — $37 for 3 months

A single aura session costs $30–50. This is 300 photos for $37.
Already subscribed? Log in with your subscription email

Rita Lorraine Carey and her work, featured in

Your aura in any photo. Any moment. Any day.

You don't have to be camera-ready. Most people start with a photo they already love.

Memory Photos — the one people get lost in

Memory Photos

A wedding in 1998. Your grandmother. The dog as a puppy. Colour or black and white — it reads them all, and shows you the light in that moment.

everyone's first

Your pet

Scan the dog. Scan the cat. Seeing your pet's energy will fill your heart with joy. Animals vibrate at a very high level — let them raise your vibe naturally, just by being with them.

right now

Today, live

Open the camera and take one. This is the one you'll come back to — because you can take another holding a crystal, out in the sun, with a friend or your pet, or after singing your favourite song, and watch what moved. Take one with someone and surprise them with your energy together.

What comes back in your aura reading

A few seconds after you take or upload a photo.

A full YourEnergyPhoto: a woman and her dog washed in yellow and blue, with each colour named and described, three crystal recommendations, and her own caption. — This is the shareable photo — add your own quote across it, then post it, send it to your love, or send it straight to the person in it. The full reading sits with it in your log.

A photo you can shareYour colours washed across it, with your own caption on it.
The reading behind itEvery colour named, described, and measured for intensity.
Three crystalsMatched to the energy showing up in that photo, not a generic list.
A frequency-state breakdownAll five states, with the dominant one called out.
Somewhere to write it downPrompts to finish your own I AM, saved and dated in your log.

There is no such thing as a negative frequency.

Your colours describe an energy you are carrying in this moment — not a verdict on who you are. No colour is better than another. Violet, for example, is mystical, magical and wise. Green is balanced, ambitious and generous. Yellow is intelligent, curious and joyful.

So lean into it. Read the power in your colours, pick the one you want more of, and put it to work — with a crystal, an I AM statement, or simply by noticing. The more you see your own energy, the more your mind accepts it as real, and the easier it becomes to manifest from that place. What you do with your energy is yours.

Memory Photos

Run the full reading on a photograph you already have. A grandparent who's gone, a house you loved, a Tuesday you'd forgotten. It shows you the energy held in that moment.

What YourEnergyPhoto users are sharing

Sometimes a reading suggests a spiritual presence. We are always loved and supported.

I’ve gone down a rabbit hole of old pictures trying to see how much my energy changed over time and around certain people or in certain situations.

And I’m completely blown away by the detection of spiritual presences. The selfie I took at my gramma’s funeral… and there are more. Too many moments that were genuinely spiritually connected, and it picked them up.

YourEnergyPhoto™ user

I was a bit scared to use this lol. Turns out it’s just really fun and super empowering.

YourEnergyPhoto™ user

I love seeing how my energy or frequency colours shift with crystals, and seeing crystal recommendations — I love crystals! The journal is really thought provoking. I am feeling a shift, and more loved.

YourEnergyPhoto™ user

So raise your vibe. Here’s how.

Take one now. Then hold a crystal, step into the sun, sit with someone you love, listen to the I AM guided meditation, or sing your favourite song — and take another.

Both ebooks are included with your subscription — read them right in the app.

Cover of Shine Your Inner Light: Aura, Energy and Manifestation Guide by Rita Lorraine Carey. — Aura Science & the 90-Day I AM Journal — go deeper, and journal daily.

Cover of the Shine Your Inner Light children's empowerment book, showing a mother and baby surrounded by colour. — Children’s Empowerment — raise the energy and empower a child you adore.

Shift happens in the daily journal — where you raise your vibe on purpose, and watch your energy answer.

Whatever you put after the words I am, your body takes as a description of you. Watching your colours answer you is what makes that land.

Take it. Watch it read. Smile.

Take a photo or pick one from your camera roll. A few seconds later, your colours.

YourEnergyPhoto on a phone: Position your face and tap. Works on the front or back camera. — **Take it** Position your face and tap. Works on the front or back camera.

YourEnergyPhoto on a phone: Seconds later your colours arrive, ready to share. — **Watch it read** Seconds later your colours arrive, ready to share.

YourEnergyPhoto on a phone: Every colour named and described, with your crystals. — **Smile** Every colour named and described, with your crystals.

Why this isn't an aura filter

There are cheaper aura apps. Here's what you're actually comparing.

	A typical aura app	YourEnergyPhoto
Photos	One scan a day	300 over three months
Old photos	—	Yes, any year
Pets	—	Yes
Colour meanings	Basic	Named, described, measured
Crystals	—	Three, matched to each reading
Frequency states	—	Full five-state breakdown
Journal	—	Private, dated, downloadable
Library	—	Chakra guide, I AM library, meditation, two ebooks
Languages	English	38 — Spanish, Korean, Portuguese, Japanese and more
Gives back	—	A contribution to a registered 501(c)(3)

Introductory price

$37 for three months

A single aura photo session costs $30–50, and you walk out with one Polaroid. This is 300 photos over three months, with the full reading on every one.

Start my three months — $37

Cancel any time, from your account. No reason needed.

Already subscribed? Log in with your subscription email

300 photos over three months — taken live or uploaded
Everything above, on every single one
Your private journal — write an entry on any reading in your photo log, and download it as a PDF with the photo
The full library — chakra guide, I AM statements, guided meditation, and two ebooks: Children's Empowerment, and Aura Science: The Making of YourEnergyPhoto & 90-Day I AM Journal, where you watch your energy shift.
38 languages
A contribution to the Ida Lee Covington Foundation

Why I made this

While we were filming Revelation Of You, we photographed people’s auric fields before and after — and watched them change in front of us.

Afterwards I explored creating a scanning energy web-based app. What followed was a year of coding, a book, and this.

Nothing in an energy photo scan comes back as negative, and that isn’t me being nice about it. I don’t think frequencies are positive or negative. We carry certain energies in a moment — that is all they are — and what we do with them is ours.

I think we are all doing the best we can, from a place of love. Nobody says that to us often enough. This is a small way of saying it.

My wish is that you use it to have fun, send love, and manifest your dreams.

— Rita

You're part of something bigger

A contribution from every membership goes to the Ida Lee Covington Foundation — a registered 501(c)(3) named for my mother, who remembered her love of crystals in her eighties and never put them down.

The Foundation is new. Its intent is to connect schools and share energy techniques, to collaborate on crystal research, and to help bring jobs to the communities beside the gem mines through collaborations.

Follow the Foundation's work

Before you start

38+ languages built in — have fun exploring them

Tap the language selector at the top and watch your colours appear in another language. Our translations keep evolving — there is something powerful in seeing your own energy described in Korean, Swahili, Hindi or Greek, and in the oneness that shows up when we all read the same colours. If a translation reads oddly in your language, please tell us. We would love your feedback as we grow.

Do I need to download an app?

No. It runs in your browser — nothing to install, nothing to update. Just refresh to get the latest version. Easy.

Is this a real aura camera app?

Kirlian photography is real, and it has been studied for the better part of a century — Semyon Kirlian's corona-discharge images from 1939, Konstantin Korotkov's later work, and Valerie Hunt's research at UCLA. That history is genuine, and it is described in Aura Science: The Making of YourEnergyPhoto & 90-Day I AM Journal, included in your subscription, so you can read it and make up your own mind.

YourEnergyPhoto is not a biofeedback reading. It does not measure anything from your body — it interprets a photograph. What comes back is an interpretive experience built for fun, for reflection, and, we hope, for feeling a little more powerful. It is not a diagnostic instrument, and we will never claim it is.

Can it read old photos?

Yes. Any photo on your device — colour or black and white, recent or decades old. Most people find this is the part they use most.

Will it ever tell me something bad?

No — and not because it’s being polite. I don’t believe frequencies are positive or negative. You carry a particular energy in a moment, and what you do with it is yours. There’s nothing in a reading to be wrong about.

Who can see my photos?

Only you. They're saved to your account, and you can delete any of them whenever you like. Nothing is shared unless you choose to share it, and your private notes never appear on a shared image.

What happens after three months?

It renews at $37 and your 300 photos start again. You can cancel any time from your account — no reason needed, and we'll never make it difficult.