:root { --orange:#f7941d; --orange-deep:#e76f12; --green:#193d28; --green-deep:#102e20; --green-black:#081d14; --cream:#fffdf7; --ink:#173524; --sans:"DM Sans",Arial,sans-serif; --serif:"Fraunces",Georgia,serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; overflow-x:hidden; background:var(--cream); color:var(--ink); font-family:var(--sans); } img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } .container { width:min(1160px,calc(100% - 48px)); margin:0 auto; } .skip-link { position:fixed; z-index:99; top:-100px; left:15px; padding:10px 14px; border-radius:6px; background:white; color:var(--green); } .skip-link:focus { top:15px; } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); }
.site-header { position:absolute; z-index:10; inset:0 0 auto; padding:18px 0; color:white; background:var(--green-black); transition:background .25s,box-shadow .25s,padding .25s; } .site-header.scrolled { position:fixed; padding:12px 0; background:rgba(8,29,20,.97); box-shadow:0 5px 18px rgba(0,0,0,.2); backdrop-filter:blur(10px); } .nav-wrap { display:flex; align-items:center; justify-content:space-between; } .brand { display:block; width:150px; } .brand img { width:100%; height:auto; } .main-nav { display:flex; align-items:center; gap:31px; font-size:13px; font-weight:600; letter-spacing:.02em; } .main-nav > a:not(.nav-cta) { opacity:.9; transition:opacity .2s; } .main-nav > a:not(.nav-cta):hover { opacity:.55; } .nav-cta { padding:11px 17px; border:1px solid rgba(255,255,255,.6); border-radius:99px; transition:background .2s,color .2s; } .nav-cta:hover { color:var(--green); background:white; } .menu-toggle { display:none; padding:8px; border:0; background:transparent; cursor:pointer; } .menu-toggle span:not(.sr-only) { display:block; height:2px; width:23px; margin:4px; background:white; }
.hero { position:relative; min-height:730px; padding:144px 0 76px; isolation:isolate; overflow:hidden; color:white; background:var(--green); } .hero::after { position:absolute; z-index:-1; inset:0; content:""; background-image:radial-gradient(rgba(255,255,255,.035) 1px,transparent 1px); background-size:6px 6px; opacity:.75; } .hero-grid { display:grid; grid-template-columns:1fr 1.02fr; align-items:center; min-height:500px; } .hero-copy { position:relative; z-index:2; padding:25px 0 15px; } .eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 19px; color:var(--orange-deep); font-size:11px; font-weight:700; letter-spacing:.15em; } .eyebrow span { display:block; width:25px; height:2px; background:currentColor; } .eyebrow.light { color:#ffd28c; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); letter-spacing:-.055em; line-height:.96; } h1 { max-width:620px; margin-bottom:26px; font-size:clamp(4rem,7vw,6.8rem); font-weight:700; } h1 em,h2 em { color:var(--orange); font-style:italic; } .hero-text { max-width:430px; margin-bottom:30px; color:rgba(255,255,255,.82); font-size:16px; line-height:1.65; } .hero-actions { display:flex; align-items:center; gap:25px; } .button { display:inline-flex; align-items:center; gap:15px; padding:15px 20px; border-radius:99px; font-size:13px; font-weight:700; transition:transform .2s,background .2s,color .2s; } .button:hover { transform:translateY(-2px); } .button span { font-size:19px; line-height:0; } .button-primary { color:var(--green); background:var(--orange); } .button-primary:hover { background:#ffa733; } .button-dark { color:white; background:var(--green); } .button-dark:hover { background:#285a3e; } .button-light { color:var(--green); background:#fffdf7; } .button-light:hover { background:#ffd28c; } .text-link { padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.43); color:white; font-size:13px; font-weight:700; } .text-link span { padding-left:5px; color:var(--orange); } .hero-note { display:flex; align-items:center; gap:12px; margin-top:50px; color:rgba(255,255,255,.68); font-size:11px; line-height:1.4; } .hero-note p { margin:0; } .hero-note strong { color:white; font-size:13px; } .tiny-oranges { display:flex; } .tiny-oranges i { display:block; width:17px; height:17px; margin-right:-5px; border:2px solid var(--green); border-radius:50%; background:var(--orange); } .tiny-oranges i:nth-child(2) { background:#ffb244; } .tiny-oranges i:nth-child(3) { background:#e97615; } .hero-visual { position:relative; align-self:stretch; min-height:510px; } .sun-disc { position:absolute; top:6%; right:3%; width:min(38vw,450px); aspect-ratio:1; border-radius:50%; background:#f89c22; box-shadow:0 0 0 27px rgba(248,156,34,.13),0 0 0 55px rgba(248,156,34,.06); } .bottle { user-select:none; } .bottle-main { position:absolute; z-index:3; top:-5px; left:19%; width:250px; max-width:52%; filter:drop-shadow(1px 0 0 rgba(255,255,255,.95)) drop-shadow(-1px 0 0 rgba(255,255,255,.95)) drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 -1px 0 rgba(255,255,255,.95)) drop-shadow(20px 35px 20px rgba(0,0,0,.24)); transform:rotate(8deg); } .stamp { position:absolute; z-index:4; top:4%; right:0; display:flex; width:85px; height:85px; align-items:center; justify-content:center; flex-direction:column; border:1px solid rgba(255,255,255,.8); border-radius:50%; color:white; transform:rotate(14deg); } .stamp span { font-family:var(--serif); font-size:27px; font-weight:700; line-height:.9; } .stamp small { font-size:9px; font-weight:700; letter-spacing:.06em; } .orange { position:absolute; z-index:2; border-radius:50%; background:radial-gradient(circle at 35% 29%,#ffc053 0 3%,transparent 4%),radial-gradient(circle at 38% 35%,#ffb840,#f17a0e 69%); box-shadow:inset -13px -13px 14px rgba(181,70,0,.18),7px 13px 15px rgba(0,0,0,.22); } .orange::after { position:absolute; top:-7%; left:45%; width:30%; height:17%; border-radius:100% 0 100% 0; content:""; background:#5e8533; transform:rotate(-23deg); } .orange span { position:absolute; inset:20%; border:1px dashed rgba(255,210,120,.5); border-radius:50%; } .orange-large { right:8%; bottom:4%; width:144px; height:144px; } .orange-small { bottom:16%; left:5%; width:69px; height:69px; } .hero-curve { position:absolute; right:-180px; bottom:-120px; width:580px; height:260px; border:1px solid rgba(255,255,255,.16); border-radius:50%; transform:rotate(-27deg); } .hero-orb { position:absolute; z-index:-1; border:1px solid rgba(255,255,255,.12); border-radius:50%; } .orb-one { bottom:-200px; left:-270px; width:420px; height:420px; } .orb-two { top:-130px; left:43%; width:200px; height:200px; } .hero-leaves { position:absolute; bottom:44px; left:42%; color:#ffa229; font-size:85px; opacity:.8; transform:rotate(25deg); } .hero-bottom-line { position:absolute; right:0; bottom:31px; left:0; height:1px; background:rgba(255,255,255,.16); }
.intro-band { padding:27px 0; color:var(--green); background:#f7a027; } .qualities { display:flex; align-items:center; justify-content:space-between; gap:30px; } .qualities > p { margin:0; font-family:var(--serif); font-size:20px; letter-spacing:-.025em; line-height:1.12; } .qualities ul { display:flex; gap:clamp(15px,4vw,60px); margin:0; padding:0; list-style:none; font-size:12px; font-weight:600; } .qualities li { display:flex; align-items:center; gap:9px; white-space:nowrap; } .qualities li span { color:rgba(25,61,40,.7); font-family:var(--serif); font-size:19px; font-weight:700; }
.section { padding:122px 0; } .product-section { background:var(--cream); } .product-grid { display:grid; grid-template-columns:.96fr 1.04fr; align-items:center; gap:clamp(45px,8vw,115px); } .product-image-wrap { position:relative; min-height:515px; } .product-image-wrap img { position:relative; z-index:2; width:min(100%,470px); margin:20px auto 0; border-radius:220px 220px 9px 9px; box-shadow:17px 20px 0 var(--orange); } .product-pattern { position:absolute; top:25px; left:-15px; color:#f7d7a0; font-family:var(--serif); font-size:clamp(4rem,9vw,8rem); font-weight:700; line-height:.73; letter-spacing:-.1em; } .image-caption { position:absolute; z-index:3; bottom:-17px; left:-20px; padding:14px 18px; color:white; background:var(--green); font-family:var(--serif); font-size:18px; line-height:.95; transform:rotate(-6deg); } .image-caption strong { color:var(--orange); font-size:26px; } .product-copy h2,.section-heading h2,.origin-content h2,.contact-inner h2 { margin-bottom:24px; color:var(--green); font-size:clamp(2.8rem,5vw,4.7rem); } .product-copy > p:not(.eyebrow) { max-width:485px; margin-bottom:30px; color:#4c6757; font-size:15px; line-height:1.75; } .feature-list { display:grid; gap:14px; margin:0 0 33px; } .feature-list div { display:grid; grid-template-columns:37px 1fr; align-items:center; gap:4px; } .feature-list b { color:var(--orange-deep); font-family:var(--serif); font-size:20px; } .feature-list span { color:#62806d; font-size:12px; line-height:1.25; } .feature-list strong { display:block; color:var(--green); font-size:13px; }
.origin-section { position:relative; display:flex; min-height:590px; align-items:center; padding:94px 0; overflow:hidden; color:white; background:var(--green); } .origin-bg { position:absolute; inset:0; background:linear-gradient(90deg,rgba(13,43,28,.95) 0%,rgba(13,43,28,.76) 42%,rgba(13,43,28,.22) 100%),url('arvore.jpg') center 48% / cover no-repeat; } .origin-content { position:relative; max-width:650px; } .origin-content h2 { color:white; } .origin-content h2 em { color:#ffad36; } .origin-content > p:not(.eyebrow) { max-width:510px; margin-bottom:30px; color:rgba(255,255,255,.8); line-height:1.7; }
.moments-section { overflow:hidden; background:#fffaf0; } .section-heading { text-align:center; } .section-heading .eyebrow { justify-content:center; } .section-heading h2 { margin-bottom:17px; } .section-heading h2 em { color:var(--orange-deep); } .section-heading > p:not(.eyebrow) { color:#63806d; } .moment-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; margin-top:53px; } .moment-card { overflow:hidden; border-radius:4px; background:white; box-shadow:0 12px 32px rgba(22,53,36,.08); transition:transform .25s,box-shadow .25s; } .moment-card:hover { box-shadow:0 19px 36px rgba(22,53,36,.14); transform:translateY(-7px); } .moment-card img { width:100%; aspect-ratio:1.08; object-fit:cover; } .moment-card > div { padding:19px 21px 23px; } .moment-card span { color:var(--orange-deep); font-family:var(--serif); font-size:16px; font-weight:700; } .moment-card h3 { margin:3px 0 5px; font-family:var(--serif); font-size:25px; letter-spacing:-.04em; } .moment-card p { margin:0; color:#67816f; font-size:12px; line-height:1.4; } .card-offset { margin-top:38px; }
.contact-section { position:relative; display:flex; min-height:500px; align-items:center; overflow:hidden; color:white; background:var(--orange-deep); text-align:center; } .contact-inner { position:relative; z-index:2; } .contact-inner .eyebrow { justify-content:center; color:#ffe0aa; } .contact-inner h2 { color:white; font-size:clamp(2.8rem,5vw,4.8rem); } .contact-inner > p:not(.eyebrow) { margin:-7px 0 27px; color:rgba(255,255,255,.85); } .contact-fruit { position:absolute; width:310px; height:310px; border-radius:50%; background:radial-gradient(circle at 36% 36%,#ffc04d,#e9720c 74%); opacity:.9; } .contact-fruit::before { position:absolute; inset:24px; border:1px dashed rgba(255,255,255,.45); border-radius:50%; content:""; } .fruit-left { bottom:-174px; left:-145px; } .fruit-right { top:-212px; right:-88px; }
.site-footer { padding:48px 0 24px; color:white; background:var(--green-black); } .footer-top { display:grid; grid-template-columns:1.1fr 1fr auto; align-items:center; padding-bottom:40px; } .footer-logo { display:block; width:140px; } .footer-logo img { width:100%; height:auto; } .footer-top > p { margin:0; color:rgba(255,255,255,.62); font-size:12px; line-height:1.55; } .footer-social { display:flex; gap:8px; } .footer-social a { display:grid; width:30px; height:30px; place-items:center; border:1px solid rgba(255,255,255,.45); border-radius:50%; font-family:var(--serif); font-size:12px; transition:background .2s; } .footer-social a:hover { border-color:var(--orange); color:var(--green); background:var(--orange); } .footer-bottom { display:flex; justify-content:space-between; padding-top:19px; border-top:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.43); font-size:10px; } .footer-bottom a { transition:color .2s; } .footer-bottom a:hover { color:var(--orange); } .reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; } .reveal.visible { opacity:1; transform:translateY(0); }
.whatsapp-float { position:fixed; z-index:20; right:24px; bottom:24px; display:inline-flex; align-items:center; gap:9px; padding:12px 17px 12px 13px; border:0; border-radius:99px; color:white; background:#25d366; box-shadow:0 9px 22px rgba(20,91,48,.3); font-size:12px; font-weight:700; transition:transform .2s,background .2s,box-shadow .2s; } .whatsapp-float:hover { background:#1ebe5d; box-shadow:0 12px 26px rgba(20,91,48,.4); transform:translateY(-3px); } .whatsapp-float svg { width:24px; height:24px; }
@media (max-width:800px) { .container { width:min(100% - 36px,570px); } .site-header { padding:14px 0; } .brand { width:127px; } .brand img { height:auto; } .menu-toggle { display:block; z-index:20; } .main-nav { position:absolute; top:0; right:0; left:0; display:flex; visibility:hidden; align-items:stretch; flex-direction:column; gap:0; padding:88px 30px 28px; background:var(--green-black); opacity:0; transform:translateY(-15px); transition:opacity .2s,transform .2s,visibility .2s; } .main-nav.open { visibility:visible; opacity:1; transform:translateY(0); } .main-nav a:not(.nav-cta) { padding:15px 0; border-bottom:1px solid rgba(255,255,255,.11); } .main-nav .nav-cta { align-self:flex-start; margin-top:17px; } .hero { min-height:auto; padding:115px 0 34px; } .hero-grid,.product-grid { grid-template-columns:1fr; } .hero-copy { padding-top:0; } .hero-text { max-width:480px; } .hero-note { margin-top:32px; } .hero-visual { min-height:460px; margin-top:22px; } .sun-disc { right:11%; width:min(78vw,405px); } .bottle-main { top:3px; left:21%; width:210px; } .stamp { right:5%; } .orange-large { right:4%; } .orange-small { left:4%; } .hero-leaves { display:none; } .qualities { display:block; } .qualities > p { margin-bottom:19px; } .qualities ul { display:grid; grid-template-columns:1fr 1fr; gap:10px 18px; } .qualities li:last-child { grid-column:span 2; } .section { padding:82px 0; } .product-grid { gap:62px; } .product-image-wrap { width:100%; max-width:480px; min-height:410px; margin:0 auto; } .product-image-wrap img { width:82%; } .product-pattern { left:2%; } .origin-section { min-height:520px; } .origin-bg { background:linear-gradient(90deg,rgba(13,43,28,.94) 0%,rgba(13,43,28,.77) 100%),url('arvore.jpg') 66% center / cover no-repeat; } .moment-cards { grid-template-columns:1fr; max-width:420px; margin-right:auto; margin-left:auto; } .card-offset { margin-top:0; } .footer-top { grid-template-columns:1fr auto; gap:25px; } .footer-top > p { grid-row:2; grid-column:span 2; } .footer-bottom { display:block; line-height:2; } }
@media (max-width:430px) { h1 { font-size:3.6rem; } .hero-actions { align-items:flex-start; flex-direction:column; gap:18px; } .hero-visual { min-height:403px; } .bottle-main { left:16%; width:195px; } .orange-large { width:120px; height:120px; } .stamp { width:74px; height:74px; } .product-image-wrap { min-height:345px; } .product-pattern { font-size:4rem; } .image-caption { left:0; } .section-heading h2,.product-copy h2,.origin-content h2,.contact-inner h2 { font-size:2.85rem; } .qualities ul { font-size:11px; } .contact-section { min-height:480px; } .whatsapp-float { right:16px; bottom:16px; padding:13px; } .whatsapp-float span { display:none; } .whatsapp-float svg { width:27px; height:27px; } }