Sri Varam Cafe<\/title>\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n*{\r\nmargin:0;\r\npadding:0;\r\nbox-sizing:border-box;\r\nfont-family:'Poppins',sans-serif;\r\n}\r\n\r\nbody{\r\nbackground:#fff8f2;\r\noverflow-x:hidden;\r\n}\r\n\r\n\/* HERO *\/\r\n\r\n.hero{\r\n\r\nheight:100vh;\r\n\r\nbackground:\r\nlinear-gradient(rgba(122,12,12,.90),rgba(122,12,12,.85)),\r\nurl(\"hero-food.jpg\");\r\n\r\nbackground-size:cover;\r\nbackground-position:center;\r\n\r\ndisplay:flex;\r\nalign-items:center;\r\njustify-content:space-between;\r\n\r\npadding:0 8%;\r\n\r\nposition:relative;\r\n\r\noverflow:hidden;\r\n\r\n}\r\n\r\n\/* Animated Background Circles *\/\r\n\r\n.hero::before{\r\n\r\ncontent:'';\r\n\r\nposition:absolute;\r\n\r\nwidth:700px;\r\nheight:700px;\r\n\r\nbackground:rgba(255,255,255,.05);\r\n\r\nborder-radius:50%;\r\n\r\ntop:-250px;\r\nright:-150px;\r\n\r\nanimation:rotate 18s linear infinite;\r\n\r\n}\r\n\r\n.hero::after{\r\n\r\ncontent:'';\r\n\r\nposition:absolute;\r\n\r\nwidth:500px;\r\nheight:500px;\r\n\r\nbackground:rgba(255,255,255,.05);\r\n\r\nborder-radius:50%;\r\n\r\nbottom:-180px;\r\nleft:-120px;\r\n\r\nanimation:rotateReverse 15s linear infinite;\r\n\r\n}\r\n\r\n@keyframes rotate{\r\n\r\n100%{\r\ntransform:rotate(360deg);\r\n}\r\n\r\n}\r\n\r\n@keyframes rotateReverse{\r\n\r\n100%{\r\ntransform:rotate(-360deg);\r\n}\r\n\r\n}\r\n\r\n\/* LEFT *\/\r\n\r\n.left{\r\n\r\nwidth:55%;\r\n\r\nz-index:10;\r\n\r\nanimation:fadeUp 1.2s ease;\r\n\r\n}\r\n\r\n.logo{\r\n\r\nwidth:95px;\r\n\r\nmargin-bottom:25px;\r\n\r\nanimation:float 3s ease-in-out infinite;\r\n\r\n}\r\n\r\nh1{\r\n\r\nfont-size:68px;\r\n\r\nfont-weight:800;\r\n\r\nline-height:1.1;\r\n\r\ncolor:#FFF4D6;\r\n\r\n}\r\n\r\nspan{\r\n\r\ncolor:#D4A017;\r\n\r\n}\r\n\r\np{\r\n\r\nmargin-top:25px;\r\n\r\nfont-size:20px;\r\n\r\nline-height:1.7;\r\n\r\ncolor:white;\r\n\r\nmax-width:650px;\r\n\r\n}\r\n\r\n\/* Buttons *\/\r\n\r\n.buttons{\r\n\r\nmargin-top:40px;\r\n\r\ndisplay:flex;\r\n\r\ngap:20px;\r\n\r\n}\r\n\r\n.btn{\r\n\r\npadding:18px 35px;\r\n\r\nborder:none;\r\n\r\nborder-radius:60px;\r\n\r\nfont-size:18px;\r\n\r\nfont-weight:600;\r\n\r\ncursor:pointer;\r\n\r\ntransition:.4s;\r\n\r\n}\r\n\r\n.primary{\r\n\r\nbackground:#D4A017;\r\n\r\ncolor:#7A0C0C;\r\n\r\nbox-shadow:0 0 25px rgba(212,160,23,.45);\r\n\r\n}\r\n\r\n.primary:hover{\r\n\r\ntransform:translateY(-6px);\r\n\r\nbox-shadow:0 20px 40px rgba(212,160,23,.45);\r\n\r\n}\r\n\r\n.secondary{\r\n\r\nbackground:transparent;\r\n\r\nborder:2px solid white;\r\n\r\ncolor:white;\r\n\r\n}\r\n\r\n.secondary:hover{\r\n\r\nbackground:white;\r\n\r\ncolor:#7A0C0C;\r\n\r\n}\r\n\r\n\/* RIGHT *\/\r\n\r\n.right{\r\n\r\nwidth:40%;\r\n\r\ndisplay:flex;\r\n\r\njustify-content:center;\r\n\r\nalign-items:center;\r\n\r\nposition:relative;\r\n\r\nz-index:5;\r\n\r\n}\r\n\r\n.hero-image{\r\n\r\nwidth:470px;\r\n\r\nanimation:float 4s ease-in-out infinite;\r\n\r\nfilter:drop-shadow(0 25px 40px rgba(0,0,0,.35));\r\n\r\n}\r\n\r\n\/* Floating Cards *\/\r\n\r\n.card{\r\n\r\nposition:absolute;\r\n\r\nbackground:rgba(255,255,255,.18);\r\n\r\nbackdrop-filter:blur(18px);\r\n\r\npadding:18px 25px;\r\n\r\nborder-radius:18px;\r\n\r\ncolor:white;\r\n\r\nfont-weight:600;\r\n\r\nbox-shadow:0 15px 35px rgba(0,0,0,.15);\r\n\r\nanimation:float 4s ease-in-out infinite;\r\n\r\n}\r\n\r\n.card1{\r\n\r\ntop:50px;\r\n\r\nleft:20px;\r\n\r\n}\r\n\r\n.card2{\r\n\r\nbottom:70px;\r\n\r\nright:10px;\r\n\r\nanimation-delay:1s;\r\n\r\n}\r\n\r\n.card3{\r\n\r\nbottom:250px;\r\n\r\nleft:-40px;\r\n\r\nanimation-delay:2s;\r\n\r\n}\r\n\r\n@keyframes float{\r\n\r\n0%,100%{\r\n\r\ntransform:translateY(0px);\r\n\r\n}\r\n\r\n50%{\r\n\r\ntransform:translateY(-18px);\r\n\r\n}\r\n\r\n}\r\n\r\n@keyframes fadeUp{\r\n\r\nfrom{\r\n\r\nopacity:0;\r\n\r\ntransform:translateY(60px);\r\n\r\n}\r\n\r\nto{\r\n\r\nopacity:1;\r\n\r\ntransform:translateY(0);\r\n\r\n}\r\n\r\n}\r\n\r\n\/* Scroll Indicator *\/\r\n\r\n.scroll{\r\n\r\nposition:absolute;\r\n\r\nbottom:30px;\r\n\r\nleft:50%;\r\n\r\ntransform:translateX(-50%);\r\n\r\ncolor:white;\r\n\r\nfont-size:14px;\r\n\r\nletter-spacing:2px;\r\n\r\nanimation:bounce 2s infinite;\r\n\r\n}\r\n\r\n@keyframes bounce{\r\n\r\n0%,100%{\r\n\r\ntransform:translate(-50%,0);\r\n\r\n}\r\n\r\n50%{\r\n\r\ntransform:translate(-50%,-10px);\r\n\r\n}\r\n\r\n}\r\n\r\n\/* Responsive *\/\r\n\r\n@media(max-width:900px){\r\n\r\n.hero{\r\n\r\nflex-direction:column;\r\n\r\ntext-align:center;\r\n\r\npadding-top:60px;\r\n\r\n}\r\n\r\n.left{\r\n\r\nwidth:100%;\r\n\r\n}\r\n\r\n.right{\r\n\r\nwidth:100%;\r\n\r\nmargin-top:40px;\r\n\r\n}\r\n\r\n.hero-image{\r\n\r\nwidth:330px;\r\n\r\n}\r\n\r\nh1{\r\n\r\nfont-size:42px;\r\n\r\n}\r\n\r\n.buttons{\r\n\r\njustify-content:center;\r\n\r\nflex-wrap:wrap;\r\n\r\n}\r\n\r\n.card{\r\n\r\ndisplay:none;\r\n\r\n}\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<section class=\"hero\">\r\n\r\n<div class=\"left\">\r\n\r\n<img decoding=\"async\" src=\"logo.png\" class=\"logo\">\r\n\r\n<h1>\r\nTraditional Taste<br>\r\n<span>Modern Experience<\/span>\r\n<\/h1>\r\n\r\n<p>\r\n\r\nEnjoy authentic flavours, exclusive student offers, reward points on every purchase, and quick online ordering \u2014 only at Sri Varam Cafe.\r\n\r\n<\/p>\r\n\r\n<div class=\"buttons\">\r\n\r\n<button class=\"btn primary\">\r\n\ud83c\udf7d Order Now\r\n<\/button>\r\n\r\n<button class=\"btn secondary\">\r\n\ud83c\udf93 Student Offers\r\n<\/button>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"right\">\r\n\r\n<img decoding=\"async\" src=\"hero-food.png\" class=\"hero-image\">\r\n\r\n<div class=\"card card1\">\r\n\ud83c\udf81 Earn Rewards\r\n<\/div>\r\n\r\n<div class=\"card card2\">\r\n\ud83d\udd25 Today's Specials\r\n<\/div>\r\n\r\n<div class=\"card card3\">\r\n\u2b50 5000+ Happy Customers\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"scroll\">\r\nSCROLL DOWN \u2193\r\n<\/div>\r\n\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-5f9daf0 e-flex e-con-boxed e-con e-parent\" data-id=\"5f9daf0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e41208 elementor-widget elementor-widget-html\" data-id=\"6e41208\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n*{\r\nmargin:0;\r\npadding:0;\r\nbox-sizing:border-box;\r\nfont-family:Poppins,sans-serif;\r\n}\r\n\r\nbody{\r\nbackground:#fff7ef;\r\n}\r\n\r\n.specials{\r\n\r\npadding:90px 8%;\r\n\r\n}\r\n\r\n.title{\r\n\r\ntext-align:center;\r\n\r\nfont-size:48px;\r\n\r\nfont-weight:700;\r\n\r\ncolor:#7A0C0C;\r\n\r\nmargin-bottom:15px;\r\n\r\n}\r\n\r\n.subtitle{\r\n\r\ntext-align:center;\r\n\r\ncolor:#666;\r\n\r\nmargin-bottom:60px;\r\n\r\nfont-size:18px;\r\n\r\n}\r\n\r\n.cards{\r\n\r\ndisplay:grid;\r\n\r\ngrid-template-columns:repeat(auto-fit,minmax(270px,1fr));\r\n\r\ngap:35px;\r\n\r\n}\r\n\r\n.card{\r\n\r\nbackground:white;\r\n\r\nborder-radius:25px;\r\n\r\noverflow:hidden;\r\n\r\nbox-shadow:0 12px 30px rgba(0,0,0,.08);\r\n\r\ntransition:.45s;\r\n\r\nposition:relative;\r\n\r\nanimation:fadeUp 1s ease forwards;\r\n\r\nopacity:0;\r\n\r\n}\r\n\r\n.card:nth-child(1){animation-delay:.2s;}\r\n.card:nth-child(2){animation-delay:.4s;}\r\n.card:nth-child(3){animation-delay:.6s;}\r\n.card:nth-child(4){animation-delay:.8s;}\r\n\r\n.card:hover{\r\n\r\ntransform:translateY(-15px) rotateX(8deg);\r\n\r\nbox-shadow:0 30px 50px rgba(122,12,12,.25);\r\n\r\n}\r\n\r\n.image{\r\n\r\nheight:220px;\r\n\r\noverflow:hidden;\r\n\r\n}\r\n\r\n.image img{\r\n\r\nwidth:100%;\r\n\r\nheight:100%;\r\n\r\nobject-fit:cover;\r\n\r\ntransition:.5s;\r\n\r\n}\r\n\r\n.card:hover img{\r\n\r\ntransform:scale(1.12);\r\n\r\n}\r\n\r\n.badge{\r\n\r\nposition:absolute;\r\n\r\ntop:15px;\r\n\r\nleft:15px;\r\n\r\nbackground:#D4A017;\r\n\r\ncolor:white;\r\n\r\npadding:8px 16px;\r\n\r\nborder-radius:30px;\r\n\r\nfont-size:13px;\r\n\r\nfont-weight:600;\r\n\r\nanimation:pulse 2s infinite;\r\n\r\n}\r\n\r\n.content{\r\n\r\npadding:22px;\r\n\r\n}\r\n\r\n.content h3{\r\n\r\ncolor:#7A0C0C;\r\n\r\nfont-size:25px;\r\n\r\nmargin-bottom:10px;\r\n\r\n}\r\n\r\n.desc{\r\n\r\ncolor:#777;\r\n\r\nline-height:1.6;\r\n\r\nfont-size:15px;\r\n\r\nmargin-bottom:18px;\r\n\r\n}\r\n\r\n.bottom{\r\n\r\ndisplay:flex;\r\n\r\njustify-content:space-between;\r\n\r\nalign-items:center;\r\n\r\n}\r\n\r\n.price{\r\n\r\nfont-size:24px;\r\n\r\nfont-weight:700;\r\n\r\ncolor:#5A8F1F;\r\n\r\n}\r\n\r\nbutton{\r\n\r\npadding:12px 22px;\r\n\r\nborder:none;\r\n\r\nborder-radius:50px;\r\n\r\nbackground:#7A0C0C;\r\n\r\ncolor:white;\r\n\r\nfont-weight:600;\r\n\r\ncursor:pointer;\r\n\r\ntransition:.4s;\r\n\r\n}\r\n\r\nbutton:hover{\r\n\r\nbackground:#D4A017;\r\n\r\ncolor:#7A0C0C;\r\n\r\ntransform:scale(1.08);\r\n\r\n}\r\n\r\n@keyframes fadeUp{\r\n\r\nfrom{\r\n\r\ntransform:translateY(80px);\r\n\r\nopacity:0;\r\n\r\n}\r\n\r\nto{\r\n\r\ntransform:translateY(0);\r\n\r\nopacity:1;\r\n\r\n}\r\n\r\n}\r\n\r\n@keyframes pulse{\r\n\r\n0%{\r\n\r\ntransform:scale(1);\r\n\r\n}\r\n\r\n50%{\r\n\r\ntransform:scale(1.1);\r\n\r\n}\r\n\r\n100%{\r\n\r\ntransform:scale(1);\r\n\r\n}\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<section class=\"specials\">\r\n\r\n<h1 class=\"title\">Today's Specials<\/h1>\r\n\r\n<p class=\"subtitle\">\r\nFreshly prepared with authentic flavours just for you.\r\n<\/p>\r\n\r\n<div class=\"cards\">\r\n\r\n<div class=\"card\">\r\n\r\n<div class=\"badge\">\ud83d\udd25 Popular<\/div>\r\n\r\n<div class=\"image\">\r\n<img decoding=\"async\" src=\"biryani.jpg\">\r\n<\/div>\r\n\r\n<div class=\"content\">\r\n\r\n<h3>Chicken Biryani<\/h3>\r\n\r\n<p class=\"desc\">\r\nAuthentic dum biryani served with raita and salan.\r\n<\/p>\r\n\r\n<div class=\"bottom\">\r\n\r\n<div class=\"price\">\u20b9249<\/div>\r\n\r\n<button>Order Now<\/button>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"card\">\r\n\r\n<div class=\"badge\">\u2b50 Best Seller<\/div>\r\n\r\n<div class=\"image\">\r\n<img decoding=\"async\" src=\"burger.jpg\">\r\n<\/div>\r\n\r\n<div class=\"content\">\r\n\r\n<h3>Cheese Burger<\/h3>\r\n\r\n<p class=\"desc\">\r\nLoaded with juicy patty, cheese and fresh veggies.\r\n<\/p>\r\n\r\n<div class=\"bottom\">\r\n\r\n<div class=\"price\">\u20b9149<\/div>\r\n\r\n<button>Order Now<\/button>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"card\">\r\n\r\n<div class=\"badge\">\ud83e\udd64 Combo<\/div>\r\n\r\n<div class=\"image\">\r\n<img decoding=\"async\" src=\"pizza.jpg\">\r\n<\/div>\r\n\r\n<div class=\"content\">\r\n\r\n<h3>Veg Pizza<\/h3>\r\n\r\n<p class=\"desc\">\r\nStone baked pizza topped with fresh vegetables.\r\n<\/p>\r\n\r\n<div class=\"bottom\">\r\n\r\n<div class=\"price\">\u20b9299<\/div>\r\n\r\n<button>Order Now<\/button>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"card\">\r\n\r\n<div class=\"badge\">\ud83c\udf79 New<\/div>\r\n\r\n<div class=\"image\">\r\n<img decoding=\"async\" src=\"coffee.jpg\">\r\n<\/div>\r\n\r\n<div class=\"content\">\r\n\r\n<h3>Cold Coffee<\/h3>\r\n\r\n<p class=\"desc\">\r\nRich creamy coffee topped with chocolate drizzle.\r\n<\/p>\r\n\r\n<div class=\"bottom\">\r\n\r\n<div class=\"price\">\u20b999<\/div>\r\n\r\n<button>Order Now<\/button>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4446e33 e-con e-atomic-element e-flexbox-base e-331bfe9 \" data-id=\"4446e33\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4446e33\">\n \t\t<div class=\"elementor-element elementor-element-68d42af elementor-widget elementor-widget-html\" data-id=\"68d42af\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>Fernbrew \u2014 Small-batch coffee, brewed with intention<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root{\r\n --paper:#F3EFE4;\r\n --paper-dark:#E9E2D0;\r\n --pine:#1F2A1E;\r\n --pine-soft:#2B392A;\r\n --sage:#4B6B4E;\r\n --sage-light:#7C9B7E;\r\n --gold:#C98A3D;\r\n --roast:#6B3A28;\r\n --line:rgba(31,42,30,0.18);\r\n }\r\n *{box-sizing:border-box; margin:0; padding:0;}\r\n html{scroll-behavior:smooth;}\r\n body{\r\n background:var(--paper);\r\n color:var(--pine);\r\n font-family:'Work Sans', sans-serif;\r\n font-weight:400;\r\n line-height:1.6;\r\n -webkit-font-smoothing:antialiased;\r\n overflow-x:hidden;\r\n }\r\n h1,h2,h3{\r\n font-family:'Fraunces', serif;\r\n font-weight:500;\r\n letter-spacing:-0.01em;\r\n color:var(--pine);\r\n }\r\n .mono{ font-family:'IBM Plex Mono', monospace; }\r\n a{color:inherit;}\r\n img{max-width:100%; display:block;}\r\n :focus-visible{outline:2px solid var(--gold); outline-offset:3px;}\r\n\r\n .wrap{max-width:1140px; margin:0 auto; padding:0 28px; position:relative; z-index:2;}\r\n\r\n \/* ---------- NAV ---------- *\/\r\n nav{\r\n position:sticky; top:0; z-index:50;\r\n background:rgba(243,239,228,0.86);\r\n backdrop-filter:blur(10px);\r\n border-bottom:1px solid var(--line);\r\n }\r\n nav .wrap{\r\n display:flex; align-items:center; justify-content:space-between;\r\n padding-top:16px; padding-bottom:16px;\r\n }\r\n .brand{\r\n font-family:'Fraunces', serif; font-size:1.35rem; font-weight:600;\r\n display:flex; align-items:center; gap:8px;\r\n }\r\n .brand .dot{\r\n width:8px; height:8px; border-radius:50%; background:var(--gold); display:inline-block;\r\n box-shadow:0 0 0 0 rgba(201,138,61,0.5);\r\n animation:pulse 2.4s ease-in-out infinite;\r\n }\r\n @keyframes pulse{\r\n 0%{box-shadow:0 0 0 0 rgba(201,138,61,0.45);}\r\n 70%{box-shadow:0 0 0 8px rgba(201,138,61,0);}\r\n 100%{box-shadow:0 0 0 0 rgba(201,138,61,0);}\r\n }\r\n .navlinks{display:flex; gap:28px; list-style:none; font-size:0.92rem;}\r\n .navlinks a{text-decoration:none; position:relative; padding-bottom:2px;}\r\n .navlinks a::after{\r\n content:''; position:absolute; left:0; bottom:-2px; width:0; height:1px;\r\n background:var(--pine); transition:width 0.25s ease;\r\n }\r\n .navlinks a:hover::after{width:100%;}\r\n .navbtn{\r\n font-family:'IBM Plex Mono', monospace; font-size:0.78rem;\r\n border:1px solid var(--pine); padding:8px 16px; text-decoration:none;\r\n transition:background 0.2s ease, color 0.2s ease, transform 0.2s ease;\r\n }\r\n .navbtn:hover{background:var(--pine); color:var(--paper); transform:translateY(-2px);}\r\n\r\n \/* ---------- HERO ---------- *\/\r\n .hero{\r\n padding:96px 0 80px;\r\n position:relative;\r\n overflow:hidden;\r\n perspective:1400px;\r\n }\r\n #bean-canvas{\r\n position:absolute; inset:0; z-index:0;\r\n width:100%; height:100%;\r\n pointer-events:none;\r\n }\r\n .hero::after{\r\n content:'';\r\n position:absolute; inset:0; z-index:1; pointer-events:none;\r\n background:radial-gradient(ellipse at 30% 20%, rgba(243,239,228,0) 0%, var(--paper) 78%);\r\n }\r\n .hero .wrap{\r\n display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;\r\n }\r\n .eyebrow{\r\n font-family:'IBM Plex Mono', monospace; font-size:0.78rem;\r\n letter-spacing:0.08em; text-transform:uppercase; color:var(--sage);\r\n margin-bottom:18px; display:flex; align-items:center; gap:10px;\r\n }\r\n .eyebrow::before{content:''; width:24px; height:1px; background:var(--sage);}\r\n .hero h1{\r\n font-size:clamp(2.6rem, 5.4vw, 4.4rem);\r\n line-height:1.02; margin-bottom:22px;\r\n text-shadow:0 1px 0 rgba(255,255,255,0.4);\r\n }\r\n .hero h1 em{font-style:italic; color:var(--roast);}\r\n .hero p.lede{ font-size:1.08rem; max-width:44ch; color:var(--pine-soft); margin-bottom:34px; }\r\n .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}\r\n .btn{\r\n font-family:'IBM Plex Mono', monospace; font-size:0.85rem; padding:14px 26px;\r\n text-decoration:none; display:inline-block; border:1px solid var(--pine);\r\n transition:transform 0.25s cubic-bezier(.2,.8,.3,1.2), background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;\r\n }\r\n .btn-solid{background:var(--pine); color:var(--paper);}\r\n .btn-solid:hover{background:var(--roast); border-color:var(--roast); transform:translateY(-3px) translateZ(0); box-shadow:0 14px 26px -12px rgba(107,58,40,0.55);}\r\n .btn-outline:hover{background:var(--pine); color:var(--paper); transform:translateY(-3px); box-shadow:0 14px 26px -14px rgba(31,42,30,0.4);}\r\n\r\n \/* Brew ticket \u2014 signature element, now with real 3D tilt *\/\r\n .ticket-wrap{ position:relative; display:flex; justify-content:center; perspective:1200px; }\r\n .ticket{\r\n background:#FBF9F3;\r\n width:280px;\r\n padding:26px 24px 30px;\r\n box-shadow:0 30px 60px -18px rgba(31,42,30,0.4), 0 8px 20px -10px rgba(31,42,30,0.25);\r\n position:relative;\r\n border:1px solid var(--line);\r\n transform-style:preserve-3d;\r\n transform:rotateX(6deg) rotateY(-10deg) rotate(2deg);\r\n transition:transform 0.15s ease-out, box-shadow 0.4s ease;\r\n will-change:transform;\r\n }\r\n .ticket::before{\r\n content:'';\r\n position:absolute; top:-10px; left:0; right:0; height:10px;\r\n background:\r\n radial-gradient(circle at 8px 10px, transparent 6px, #FBF9F3 6.5px) top left,\r\n radial-gradient(circle at 8px 10px, transparent 6px, #FBF9F3 6.5px) top right;\r\n background-size:16px 20px; background-repeat:repeat-x;\r\n transform:translateZ(1px);\r\n }\r\n .ticket-head{\r\n font-family:'IBM Plex Mono', monospace; font-size:0.72rem; text-align:center;\r\n letter-spacing:0.1em; text-transform:uppercase; color:var(--sage);\r\n border-bottom:1px dashed var(--line); padding-bottom:14px; margin-bottom:14px;\r\n }\r\n .ticket-row{\r\n display:flex; justify-content:space-between; font-family:'IBM Plex Mono', monospace;\r\n font-size:0.78rem; padding:5px 0; color:var(--pine-soft);\r\n }\r\n .ticket-row span:last-child{color:var(--pine); font-weight:500;}\r\n .ticket-cup{ display:flex; justify-content:center; margin:16px 0 10px; position:relative; height:64px; }\r\n .cup{ width:34px; height:26px; background:var(--roast); border-radius:0 0 10px 10px; position:relative; transform:translateZ(6px); }\r\n .cup::before{\r\n content:''; position:absolute; right:-9px; top:2px; width:11px; height:14px;\r\n border:2.5px solid var(--roast); border-left:none; border-radius:0 8px 8px 0;\r\n }\r\n .steam{\r\n position:absolute; bottom:26px; left:50%; width:2px; height:22px;\r\n background:linear-gradient(to top, var(--sage-light), transparent);\r\n transform:translateX(-50%); opacity:0.7; animation:rise 3s ease-in-out infinite; border-radius:2px;\r\n }\r\n .steam:nth-child(2){left:calc(50% - 8px); animation-delay:0.6s;}\r\n .steam:nth-child(3){left:calc(50% + 8px); animation-delay:1.2s;}\r\n @keyframes rise{\r\n 0%{transform:translate(-50%,0) scaleY(0.6); opacity:0;}\r\n 30%{opacity:0.8;}\r\n 100%{transform:translate(-50%,-18px) scaleY(1.1); opacity:0;}\r\n }\r\n .ticket-foot{ text-align:center; font-family:'Fraunces', serif; font-style:italic; font-size:0.85rem; color:var(--sage); margin-top:6px; }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .steam{animation:none; opacity:0.3;}\r\n html{scroll-behavior:auto;}\r\n .ticket{transition:none;}\r\n }\r\n\r\n \/* ---------- SECTION SHARED ---------- *\/\r\n section{padding:96px 0; position:relative;}\r\n .section-head{margin-bottom:52px; max-width:56ch;}\r\n .section-head .eyebrow{margin-bottom:14px;}\r\n .section-head h2{font-size:clamp(1.9rem, 3.4vw, 2.6rem);}\r\n\r\n \/* ---------- ABOUT ---------- *\/\r\n .about{perspective:1200px;}\r\n .about .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }\r\n .about p{color:var(--pine-soft); margin-bottom:18px; max-width:48ch;}\r\n .origin-list{border-top:1px solid var(--line);}\r\n .origin-item{\r\n display:grid; grid-template-columns:70px 1fr auto; gap:16px;\r\n padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline;\r\n transition:transform 0.3s ease, background 0.3s ease;\r\n }\r\n .origin-item:hover{ transform:translateX(6px) translateZ(10px); background:rgba(75,107,78,0.06); }\r\n .origin-item .step{font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--gold);}\r\n .origin-item .label{font-weight:500;}\r\n .origin-item .detail{font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--sage);}\r\n\r\n \/* ---------- MENU ---------- *\/\r\n .menu{background:var(--pine); color:var(--paper); perspective:1400px;}\r\n .menu .section-head h2, .menu h3{color:var(--paper);}\r\n .menu .eyebrow{color:var(--gold);}\r\n .menu .eyebrow::before{background:var(--gold);}\r\n .menu-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px 64px; }\r\n .menu-cat{\r\n transform-style:preserve-3d; transition:transform 0.35s ease, box-shadow 0.35s ease;\r\n padding:8px; border-radius:2px;\r\n }\r\n .menu-cat:hover{ transform:translateY(-6px) rotateX(2deg); }\r\n .menu-cat h3{ font-size:1.15rem; margin-bottom:20px; display:flex; align-items:center; gap:10px; }\r\n .menu-cat h3::after{content:''; flex:1; height:1px; background:rgba(243,239,228,0.2);}\r\n .menu-item{margin-bottom:16px; transition:transform 0.25s ease;}\r\n .menu-item:hover{ transform:translateX(4px); }\r\n .menu-item-top{display:flex; align-items:baseline; gap:6px;}\r\n .menu-item-top .name{font-weight:500; white-space:nowrap;}\r\n .menu-item-top .leader{flex:1; border-bottom:1px dotted rgba(243,239,228,0.35); transform:translateY(-4px);}\r\n .menu-item-top .price{font-family:'IBM Plex Mono', monospace; font-size:0.88rem; color:var(--gold);}\r\n .menu-item .desc{font-size:0.85rem; color:rgba(243,239,228,0.6); margin-top:4px;}\r\n\r\n \/* ---------- GALLERY ---------- *\/\r\n .gallery{perspective:1400px;}\r\n .gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:140px; gap:14px; }\r\n .gcell{\r\n position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:14px;\r\n transform-style:preserve-3d; transition:transform 0.35s cubic-bezier(.2,.8,.3,1), box-shadow 0.35s ease;\r\n }\r\n .gcell:hover{ transform:translateZ(24px) scale(1.03); box-shadow:0 26px 40px -18px rgba(31,42,30,0.45); z-index:3; }\r\n .gcell span{\r\n font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:#FBF9F3;\r\n text-transform:uppercase; letter-spacing:0.05em; opacity:0; transform:translateY(6px) translateZ(2px);\r\n transition:opacity 0.25s ease, transform 0.25s ease;\r\n }\r\n .gcell:hover span{opacity:1; transform:translateY(0) translateZ(2px);}\r\n .gcell::after{\r\n content:''; position:absolute; inset:0;\r\n background:linear-gradient(to top, rgba(31,42,30,0.55), transparent 55%);\r\n opacity:0; transition:opacity 0.25s ease;\r\n }\r\n .gcell:hover::after{opacity:1;}\r\n .g1{grid-column:span 2; grid-row:span 2; background:linear-gradient(135deg,#6B3A28,#4B6B4E);}\r\n .g2{background:#C98A3D;}\r\n .g3{background:#7C9B7E;}\r\n .g4{background:#2B392A;}\r\n .g5{grid-column:span 2; background:linear-gradient(135deg,#E9E2D0,#C98A3D);}\r\n .g5 span{color:#1F2A1E;}\r\n .g6{background:#4B6B4E;}\r\n\r\n \/* ---------- HOURS \/ LOCATION ---------- *\/\r\n .hours-loc .wrap{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; }\r\n .board{\r\n background:var(--pine-soft); color:var(--paper); padding:32px 30px; position:relative;\r\n box-shadow:0 20px 40px -20px rgba(31,42,30,0.4);\r\n transition:transform 0.35s ease;\r\n }\r\n .board:hover{ transform:translateY(-4px); }\r\n .board h3{color:var(--gold); font-size:1rem; margin-bottom:18px; font-family:'IBM Plex Mono', monospace; text-transform:uppercase; letter-spacing:0.08em;}\r\n .board-row{ display:flex; justify-content:space-between; font-family:'IBM Plex Mono', monospace; font-size:0.85rem; padding:8px 0; border-bottom:1px dashed rgba(243,239,228,0.2); }\r\n .loc-detail p{margin-bottom:8px; color:var(--pine-soft);}\r\n .loc-detail .addr{font-family:'Fraunces', serif; font-size:1.3rem; margin-bottom:14px;}\r\n .map-plate{\r\n margin-top:24px; height:180px;\r\n background:\r\n repeating-linear-gradient(0deg, rgba(31,42,30,0.06) 0px, rgba(31,42,30,0.06) 1px, transparent 1px, transparent 24px),\r\n repeating-linear-gradient(90deg, rgba(31,42,30,0.06) 0px, rgba(31,42,30,0.06) 1px, transparent 1px, transparent 24px),\r\n var(--paper-dark);\r\n position:relative; border:1px solid var(--line);\r\n }\r\n .map-plate::before{\r\n content:'\ud83d\udccd'; position:absolute; top:50%; left:42%; transform:translate(-50%,-60%);\r\n font-size:1.6rem; animation:bob 2.4s ease-in-out infinite;\r\n }\r\n @keyframes bob{ 0%,100%{transform:translate(-50%,-60%);} 50%{transform:translate(-50%,-72%);} }\r\n .map-plate::after{\r\n content:'142 Maple Street'; font-family:'IBM Plex Mono', monospace; font-size:0.7rem;\r\n position:absolute; bottom:12px; left:12px; color:var(--pine-soft);\r\n }\r\n\r\n \/* ---------- CONTACT ---------- *\/\r\n .contact{background:var(--gold); color:var(--pine);}\r\n .contact .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }\r\n .contact h2{font-size:clamp(1.8rem, 3vw, 2.4rem); margin-bottom:14px;}\r\n .contact p{max-width:40ch; color:rgba(31,42,30,0.75);}\r\n form{display:flex; flex-direction:column; gap:14px;}\r\n .field{display:flex; flex-direction:column; gap:6px;}\r\n label{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em;}\r\n input, textarea{\r\n font-family:'Work Sans', sans-serif; font-size:0.95rem; padding:12px 14px;\r\n border:1px solid var(--pine); background:#FBF6E9; color:var(--pine);\r\n transition:box-shadow 0.2s ease, transform 0.2s ease;\r\n }\r\n input:focus, textarea:focus{ box-shadow:0 8px 16px -10px rgba(31,42,30,0.4); transform:translateY(-1px); }\r\n textarea{resize:vertical; min-height:90px;}\r\n .submitrow{display:flex; align-items:center; gap:16px; margin-top:4px;}\r\n .contact .btn-solid{border-color:var(--pine);}\r\n\r\n \/* ---------- FOOTER ---------- *\/\r\n footer{padding:44px 0 36px; border-top:1px solid var(--line);}\r\n footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }\r\n .footlinks{display:flex; gap:22px; list-style:none; font-family:'IBM Plex Mono', monospace; font-size:0.78rem;}\r\n .footlinks a{text-decoration:none;}\r\n .footlinks a:hover{color:var(--gold);}\r\n .foottext{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--sage);}\r\n\r\n \/* ---------- REVEAL ON SCROLL (3D) ---------- *\/\r\n .reveal{\r\n opacity:0; transform:translateY(28px) rotateX(8deg) translateZ(-30px);\r\n transform-origin:center bottom;\r\n transition:opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1);\r\n }\r\n .reveal.in{ opacity:1; transform:translateY(0) rotateX(0) translateZ(0); }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .reveal{ transition:opacity 0.3s ease; transform:none !important; }\r\n .gcell, .menu-cat, .origin-item, .board{ transition:none; }\r\n }\r\n\r\n \/* ---------- POUR-IN INTRO ---------- *\/\r\n .pour-overlay{\r\n position:fixed; inset:0; z-index:999; overflow:hidden;\r\n background:var(--paper);\r\n pointer-events:none;\r\n }\r\n .pour-stream{\r\n position:absolute; top:0; left:50%; width:5px; height:0;\r\n background:linear-gradient(to bottom, #4a2818, var(--roast));\r\n transform:translateX(-50%);\r\n border-radius:0 0 3px 3px;\r\n animation:streamFall 0.6s cubic-bezier(.5,0,.85,.4) forwards;\r\n filter:drop-shadow(0 0 6px rgba(107,58,40,0.45));\r\n }\r\n @keyframes streamFall{\r\n 0%{height:0; opacity:1;}\r\n 75%{height:56vh; opacity:1;}\r\n 100%{height:56vh; opacity:0;}\r\n }\r\n .pour-liquid{\r\n position:absolute; left:0; right:0; bottom:0; width:100%;\r\n height:0%;\r\n background:\r\n radial-gradient(ellipse at 30% 0%, rgba(255,255,255,0.08), transparent 60%),\r\n linear-gradient(180deg, #7a4128 0%, #5c2f1c 55%, #3c1e12 100%);\r\n animation:liquidFill 3.2s cubic-bezier(.65,0,.35,1) forwards;\r\n box-shadow:0 -2px 30px rgba(60,30,18,0.4);\r\n }\r\n .pour-liquid::before{\r\n content:'';\r\n position:absolute; top:-10px; left:-2%; width:104%; height:22px;\r\n background:linear-gradient(180deg, #E4C58F 0%, #C98A3D 55%, transparent 100%);\r\n border-radius:50% 50% 0 0 \/ 100% 100% 0 0;\r\n opacity:0.9;\r\n }\r\n .pour-liquid .wave{\r\n position:absolute; top:-14px; left:-25%; width:150%; height:30px;\r\n background-repeat:repeat-x; background-size:180px 30px;\r\n background-image:url(\"data:image\/svg+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='180' height='30' viewBox='0 0 180 30'><path d='M0 15 Q 45 0 90 15 T 180 15 V30 H0 Z' fill='%23C98A3D'\/><\/svg>\");\r\n animation:waveScroll 2.6s linear infinite;\r\n opacity:0.85;\r\n }\r\n @keyframes waveScroll{ from{background-position-x:0;} to{background-position-x:-180px;} }\r\n @keyframes liquidFill{\r\n 0%{ height:0%; transform:translateY(0); }\r\n 35%{ height:112%; transform:translateY(0); }\r\n 62%{ height:112%; transform:translateY(0); }\r\n 100%{ height:112%; transform:translateY(120%); }\r\n }\r\n .pour-bubble{\r\n position:absolute; bottom:0; border-radius:50%;\r\n background:rgba(233,205,158,0.55);\r\n animation:bubbleRise 2.1s ease-in infinite;\r\n }\r\n @keyframes bubbleRise{\r\n 0%{ transform:translateY(0) scale(0.4); opacity:0; }\r\n 18%{ opacity:0.85; }\r\n 100%{ transform:translateY(-58vh) scale(1); opacity:0; }\r\n }\r\n .pour-word{\r\n position:absolute; top:50%; left:50%; transform:translate(-50%,-40%);\r\n font-family:'Fraunces', serif; font-style:italic; font-weight:500;\r\n font-size:clamp(1.8rem,4vw,2.6rem);\r\n color:#F3EFE4; opacity:0; letter-spacing:0.02em;\r\n animation:wordFade 3.2s ease forwards;\r\n text-align:center; white-space:nowrap;\r\n }\r\n @keyframes wordFade{\r\n 0%,38%{opacity:0; transform:translate(-50%,-40%);}\r\n 52%,68%{opacity:1; transform:translate(-50%,-50%);}\r\n 85%,100%{opacity:0; transform:translate(-50%,-60%);}\r\n }\r\n .pour-overlay.done{ display:none; }\r\n @media (prefers-reduced-motion: reduce){\r\n .pour-overlay{ display:none; }\r\n }\r\n\r\n \/* ---------- RESPONSIVE ---------- *\/\r\n @media (max-width:860px){\r\n .navlinks{display:none;}\r\n .hero .wrap{grid-template-columns:1fr;}\r\n .ticket-wrap{margin-top:20px;}\r\n .about .wrap, .hours-loc .wrap, .contact .wrap{grid-template-columns:1fr;}\r\n .menu-grid{grid-template-columns:1fr;}\r\n .gallery-grid{grid-template-columns:repeat(2,1fr);}\r\n .g1{grid-column:span 2;}\r\n .g5{grid-column:span 2;}\r\n }\r\n @media (max-width:480px){\r\n .hero{padding:72px 0 56px;}\r\n section{padding:72px 0;}\r\n .ticket{width:100%; max-width:280px;}\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"pour-overlay\" id=\"pourOverlay\" aria-hidden=\"true\">\r\n <div class=\"pour-stream\"><\/div>\r\n <div class=\"pour-liquid\">\r\n <div class=\"wave\"><\/div>\r\n <\/div>\r\n <span class=\"pour-word\">Fernbrew<\/span>\r\n <div class=\"pour-bubble\" style=\"left:37%; width:6px; height:6px; animation-delay:1.05s;\"><\/div>\r\n <div class=\"pour-bubble\" style=\"left:51%; width:4px; height:4px; animation-delay:1.35s;\"><\/div>\r\n <div class=\"pour-bubble\" style=\"left:45%; width:8px; height:8px; animation-delay:1.6s;\"><\/div>\r\n <div class=\"pour-bubble\" style=\"left:59%; width:5px; height:5px; animation-delay:1.85s;\"><\/div>\r\n <div class=\"pour-bubble\" style=\"left:41%; width:5px; height:5px; animation-delay:2.05s;\"><\/div>\r\n<\/div>\r\n\r\n<nav>\r\n <div class=\"wrap\">\r\n <a href=\"#top\" class=\"brand\"><span class=\"dot\"><\/span>Fernbrew<\/a>\r\n <ul class=\"navlinks\">\r\n <li><a href=\"#about\">About<\/a><\/li>\r\n <li><a href=\"#menu\">Menu<\/a><\/li>\r\n <li><a href=\"#gallery\">Gallery<\/a><\/li>\r\n <li><a href=\"#visit\">Visit<\/a><\/li>\r\n <li><a href=\"#contact\">Contact<\/a><\/li>\r\n <\/ul>\r\n <a href=\"#visit\" class=\"navbtn\">Find us<\/a>\r\n <\/div>\r\n<\/nav>\r\n\r\n<header class=\"hero\" id=\"top\">\r\n <canvas id=\"bean-canvas\"><\/canvas>\r\n <div class=\"wrap\">\r\n <div>\r\n <p class=\"eyebrow\">Neighborhood roastery & cafe<\/p>\r\n <h1>Small-batch coffee,<br><em>brewed with intention.<\/em><\/h1>\r\n <p class=\"lede\">We roast in small batches every Tuesday, source direct from three family farms, and pour every cup like it's the only one we're making today.<\/p>\r\n <div class=\"hero-ctas\">\r\n <a href=\"#menu\" class=\"btn btn-solid\">View the menu<\/a>\r\n <a href=\"#visit\" class=\"btn btn-outline\">Visit today<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ticket-wrap\">\r\n <div class=\"ticket\" id=\"tiltTicket\">\r\n <div class=\"ticket-head\">Today's Brew Ticket<\/div>\r\n <div class=\"ticket-row\"><span>Origin<\/span><span>Huila, Colombia<\/span><\/div>\r\n <div class=\"ticket-row\"><span>Roast<\/span><span>Light\u2013Medium<\/span><\/div>\r\n <div class=\"ticket-row\"><span>Notes<\/span><span>Plum, Honey, Cocoa<\/span><\/div>\r\n <div class=\"ticket-row\"><span>Method<\/span><span>Pour-Over<\/span><\/div>\r\n <div class=\"ticket-cup\">\r\n <div class=\"cup\"><\/div>\r\n <div class=\"steam\"><\/div>\r\n <div class=\"steam\"><\/div>\r\n <div class=\"steam\"><\/div>\r\n <\/div>\r\n <p class=\"ticket-foot\">\u2014 brewed this morning<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/header>\r\n\r\n<section class=\"about\" id=\"about\">\r\n <div class=\"wrap\">\r\n <div class=\"reveal\">\r\n <p class=\"eyebrow\">Our story<\/p>\r\n <h2 style=\"margin-bottom:20px; font-size:clamp(1.8rem,3vw,2.4rem);\">From farm gate to your table.<\/h2>\r\n <p>Fernbrew started in a converted garage with a single drum roaster and a stubborn belief that coffee tastes better when you know exactly where it came from. Six years later, the roaster's bigger, but the belief hasn't changed.<\/p>\r\n <p>We visit our growing partners every season, pay above fair-trade rates, and roast in batches small enough that nothing sits on a shelf for long. What's in your cup left a farm within the last eight weeks.<\/p>\r\n <\/div>\r\n <div class=\"reveal origin-list\">\r\n <div class=\"origin-item\"><span class=\"step\">01<\/span><span class=\"label\">Sourced<\/span><span class=\"detail\">3 origin farms<\/span><\/div>\r\n <div class=\"origin-item\"><span class=\"step\">02<\/span><span class=\"label\">Roasted<\/span><span class=\"detail\">In-house, weekly<\/span><\/div>\r\n <div class=\"origin-item\"><span class=\"step\">03<\/span><span class=\"label\">Rested<\/span><span class=\"detail\">48 hours, minimum<\/span><\/div>\r\n <div class=\"origin-item\"><span class=\"step\">04<\/span><span class=\"label\">Poured<\/span><span class=\"detail\">Fresh, to order<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"menu\" id=\"menu\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <p class=\"eyebrow\">On the board<\/p>\r\n <h2>The menu<\/h2>\r\n <\/div>\r\n <div class=\"menu-grid\">\r\n <div class=\"menu-cat reveal\">\r\n <h3>Coffee<\/h3>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Espresso<\/span><span class=\"leader\"><\/span><span class=\"price\">$3.25<\/span><\/div><p class=\"desc\">Double shot, house blend<\/p><\/div>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Cortado<\/span><span class=\"leader\"><\/span><span class=\"price\">$4.00<\/span><\/div><\/div>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Pour-Over<\/span><span class=\"leader\"><\/span><span class=\"price\">$5.00<\/span><\/div><p class=\"desc\">Rotating single origin<\/p><\/div>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Cold Brew<\/span><span class=\"leader\"><\/span><span class=\"price\">$4.50<\/span><\/div><\/div>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Flat White<\/span><span class=\"leader\"><\/span><span class=\"price\">$4.75<\/span><\/div><\/div>\r\n <\/div>\r\n <div class=\"menu-cat reveal\">\r\n <h3>Tea & More<\/h3>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Loose Leaf Tea<\/span><span class=\"leader\"><\/span><span class=\"price\">$3.75<\/span><\/div><\/div>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Matcha Latte<\/span><span class=\"leader\"><\/span><span class=\"price\">$5.25<\/span><\/div><\/div>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Hot Chocolate<\/span><span class=\"leader\"><\/span><span class=\"price\">$4.25<\/span><\/div><\/div>\r\n <\/div>\r\n <div class=\"menu-cat reveal\">\r\n <h3>Pastries<\/h3>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Almond Croissant<\/span><span class=\"leader\"><\/span><span class=\"price\">$4.50<\/span><\/div><\/div>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Banana Bread<\/span><span class=\"leader\"><\/span><span class=\"price\">$3.75<\/span><\/div><\/div>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Morning Bun<\/span><span class=\"leader\"><\/span><span class=\"price\">$3.95<\/span><\/div><\/div>\r\n <\/div>\r\n <div class=\"menu-cat reveal\">\r\n <h3>Light Bites<\/h3>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Avocado Toast<\/span><span class=\"leader\"><\/span><span class=\"price\">$8.50<\/span><\/div><\/div>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Egg & Cheese Bagel<\/span><span class=\"leader\"><\/span><span class=\"price\">$7.25<\/span><\/div><\/div>\r\n <div class=\"menu-item\"><div class=\"menu-item-top\"><span class=\"name\">Seasonal Grain Bowl<\/span><span class=\"leader\"><\/span><span class=\"price\">$9.75<\/span><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"gallery\" id=\"gallery\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <p class=\"eyebrow\">A peek inside<\/p>\r\n <h2>The space<\/h2>\r\n <\/div>\r\n <div class=\"gallery-grid reveal\">\r\n <div class=\"gcell g1\"><span>Front counter<\/span><\/div>\r\n <div class=\"gcell g2\"><span>Fresh roast<\/span><\/div>\r\n <div class=\"gcell g3\"><span>Reading corner<\/span><\/div>\r\n <div class=\"gcell g4\"><span>Pour-over bar<\/span><\/div>\r\n <div class=\"gcell g5\"><span>Sunday market<\/span><\/div>\r\n <div class=\"gcell g6\"><span>Back patio<\/span><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"hours-loc\" id=\"visit\">\r\n <div class=\"wrap\">\r\n <div class=\"board reveal\">\r\n <h3>Hours<\/h3>\r\n <div class=\"board-row\"><span>Mon \u2013 Fri<\/span><span>7:00 \u2013 18:00<\/span><\/div>\r\n <div class=\"board-row\"><span>Saturday<\/span><span>8:00 \u2013 17:00<\/span><\/div>\r\n <div class=\"board-row\"><span>Sunday<\/span><span>8:00 \u2013 15:00<\/span><\/div>\r\n <\/div>\r\n <div class=\"loc-detail reveal\">\r\n <p class=\"eyebrow\">Come find us<\/p>\r\n <p class=\"addr\">142 Maple Street,<br>Riverton<\/p>\r\n <p>Street parking out front, and a bike rack by the side door. The 14 bus stops right across the road.<\/p>\r\n <div class=\"map-plate\"><\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<section class=\"contact\" id=\"contact\">\r\n <div class=\"wrap\">\r\n <div class=\"reveal\">\r\n <h2>Say hello, or join the list.<\/h2>\r\n <p>Questions about catering, private events, or wholesale beans \u2014 drop us a note. Or sign up to hear when new origins land.<\/p>\r\n <\/div>\r\n <form class=\"reveal\" onsubmit=\"event.preventDefault(); this.querySelector('.confirm').style.display='block';\">\r\n <div class=\"field\"><label for=\"name\">Name<\/label><input id=\"name\" type=\"text\" required><\/div>\r\n <div class=\"field\"><label for=\"email\">Email<\/label><input id=\"email\" type=\"email\" required><\/div>\r\n <div class=\"field\"><label for=\"message\">Message (optional)<\/label><textarea id=\"message\"><\/textarea><\/div>\r\n <div class=\"submitrow\">\r\n <button type=\"submit\" class=\"btn btn-solid\" style=\"cursor:pointer;\">Send message<\/button>\r\n <span class=\"confirm mono\" style=\"display:none; font-size:0.78rem;\">Sent \u2014 we'll reply soon.<\/span>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n<\/section>\r\n\r\n<footer>\r\n <div class=\"wrap\">\r\n <a href=\"#top\" class=\"brand\"><span class=\"dot\"><\/span>Fernbrew<\/a>\r\n <ul class=\"footlinks\">\r\n <li><a href=\"#\">Instagram<\/a><\/li>\r\n <li><a href=\"#\">Facebook<\/a><\/li>\r\n <li><a href=\"mailto:hello@fernbrew.example\">hello@fernbrew.example<\/a><\/li>\r\n <\/ul>\r\n <p class=\"foottext\">\u00a9 2026 Fernbrew Coffee Co.<\/p>\r\n <\/div>\r\n<\/footer>\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/three.js\/r128\/three.min.js\"><\/script>\r\n<script>\r\n \/\/ Scroll-reveal (3D rotate-in)\r\n const revealEls = document.querySelectorAll('.reveal');\r\n const io = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting){\r\n entry.target.classList.add('in');\r\n io.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n revealEls.forEach(el => io.observe(el));\r\n\r\n \/\/ Tilt interaction for the brew ticket card\r\n const ticket = document.getElementById('tiltTicket');\r\n const ticketWrap = document.querySelector('.ticket-wrap');\r\n const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n if (ticket && !prefersReduced){\r\n ticketWrap.addEventListener('mousemove', (e) => {\r\n const rect = ticketWrap.getBoundingClientRect();\r\n const x = (e.clientX - rect.left) \/ rect.width - 0.5;\r\n const y = (e.clientY - rect.top) \/ rect.height - 0.5;\r\n ticket.style.transform = `rotateX(${(-y * 18 + 6).toFixed(2)}deg) rotateY(${(x * 22 - 10).toFixed(2)}deg) rotate(2deg)`;\r\n });\r\n ticketWrap.addEventListener('mouseleave', () => {\r\n ticket.style.transform = 'rotateX(6deg) rotateY(-10deg) rotate(2deg)';\r\n });\r\n }\r\n\r\n \/\/ Three.js floating low-poly coffee beans in the hero\r\n (function(){\r\n const canvas = document.getElementById('bean-canvas');\r\n if (!canvas || typeof THREE === 'undefined') return;\r\n const hero = document.querySelector('.hero');\r\n\r\n let width = hero.clientWidth, height = hero.clientHeight;\r\n\r\n const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });\r\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\r\n renderer.setSize(width, height);\r\n\r\n const scene = new THREE.Scene();\r\n const camera = new THREE.PerspectiveCamera(45, width \/ height, 0.1, 100);\r\n camera.position.set(0, 0, 14);\r\n\r\n const ambient = new THREE.AmbientLight(0xffffff, 0.75);\r\n scene.add(ambient);\r\n const key = new THREE.DirectionalLight(0xffffff, 0.9);\r\n key.position.set(5, 6, 8);\r\n scene.add(key);\r\n const fill = new THREE.DirectionalLight(0xC98A3D, 0.4);\r\n fill.position.set(-6, -3, 4);\r\n scene.add(fill);\r\n\r\n const palette = [0x6B3A28, 0x4B6B4E, 0xC98A3D, 0x7C9B7E];\r\n const beans = [];\r\n const count = window.innerWidth < 700 ? 9 : 16;\r\n\r\n for (let i = 0; i < count; i++){\r\n const size = 0.5 + Math.random() * 0.9;\r\n const geo = new THREE.IcosahedronGeometry(size, 0);\r\n const mat = new THREE.MeshStandardMaterial({\r\n color: palette[i % palette.length],\r\n roughness: 0.55,\r\n metalness: 0.08,\r\n flatShading: true\r\n });\r\n const mesh = new THREE.Mesh(geo, mat);\r\n mesh.position.set(\r\n (Math.random() - 0.5) * 16,\r\n (Math.random() - 0.5) * 9,\r\n (Math.random() - 0.5) * 8 - 2\r\n );\r\n mesh.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, 0);\r\n mesh.userData = {\r\n spinX: (Math.random() - 0.5) * 0.005,\r\n spinY: (Math.random() - 0.5) * 0.007,\r\n floatSpeed: 0.4 + Math.random() * 0.5,\r\n floatOffset: Math.random() * Math.PI * 2,\r\n baseY: mesh.position.y\r\n };\r\n scene.add(mesh);\r\n beans.push(mesh);\r\n }\r\n\r\n let mouseX = 0, mouseY = 0;\r\n window.addEventListener('mousemove', (e) => {\r\n mouseX = (e.clientX \/ window.innerWidth) - 0.5;\r\n mouseY = (e.clientY \/ window.innerHeight) - 0.5;\r\n });\r\n\r\n function onResize(){\r\n width = hero.clientWidth;\r\n height = hero.clientHeight;\r\n camera.aspect = width \/ height;\r\n camera.updateProjectionMatrix();\r\n renderer.setSize(width, height);\r\n }\r\n window.addEventListener('resize', onResize);\r\n\r\n const clock = new THREE.Clock();\r\n function animate(){\r\n requestAnimationFrame(animate);\r\n const t = clock.getElapsedTime();\r\n beans.forEach(b => {\r\n b.rotation.x += b.userData.spinX;\r\n b.rotation.y += b.userData.spinY;\r\n b.position.y = b.userData.baseY + Math.sin(t * b.userData.floatSpeed + b.userData.floatOffset) * 0.35;\r\n });\r\n camera.position.x += (mouseX * 2.5 - camera.position.x) * 0.03;\r\n camera.position.y += (-mouseY * 1.5 - camera.position.y) * 0.03;\r\n camera.lookAt(0, 0, 0);\r\n renderer.render(scene, camera);\r\n }\r\n\r\n if (!prefersReduced){\r\n animate();\r\n } else {\r\n renderer.render(scene, camera);\r\n }\r\n })();\r\n\r\n \/\/ Coffee pour-in intro\r\n (function(){\r\n const overlay = document.getElementById('pourOverlay');\r\n if (!overlay) return;\r\n const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n function finish(){\r\n overlay.classList.add('done');\r\n document.body.style.overflow = '';\r\n }\r\n\r\n if (reduced){\r\n finish();\r\n return;\r\n }\r\n\r\n document.documentElement.style.scrollBehavior = 'auto';\r\n document.body.style.overflow = 'hidden';\r\n window.scrollTo(0, 0);\r\n\r\n const liquid = overlay.querySelector('.pour-liquid');\r\n let done = false;\r\n function safeFinish(){\r\n if (done) return;\r\n done = true;\r\n finish();\r\n document.documentElement.style.scrollBehavior = '';\r\n }\r\n\r\n liquid.addEventListener('animationend', safeFinish);\r\n \/\/ Safety fallback in case animationend doesn't fire\r\n setTimeout(safeFinish, 3400);\r\n\r\n \/\/ Let people skip the intro with a click, tap, or key press\r\n overlay.style.pointerEvents = 'auto';\r\n overlay.addEventListener('click', safeFinish);\r\n window.addEventListener('keydown', function handler(e){\r\n if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' '){\r\n safeFinish();\r\n window.removeEventListener('keydown', handler);\r\n }\r\n });\r\n })();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>welcome to srivaram cafe This is a title Sri Varam Cafe Traditional Taste Modern Experience Enjoy authentic flavours, exclusive student offers, reward points on every purchase, and quick online ordering \u2014 only at Sri Varam Cafe. \ud83c\udf7d Order Now \ud83c\udf93 Student Offers \ud83c\udf81 Earn Rewards \ud83d\udd25 Today’s Specials \u2b50 5000+ Happy Customers SCROLL DOWN \u2193 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_angie_page":false,"footnotes":""},"class_list":["post-25","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/bhargavweb.com\/index.php?rest_route=\/wp\/v2\/pages\/25","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bhargavweb.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bhargavweb.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bhargavweb.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bhargavweb.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=25"}],"version-history":[{"count":22,"href":"https:\/\/bhargavweb.com\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions"}],"predecessor-version":[{"id":97,"href":"https:\/\/bhargavweb.com\/index.php?rest_route=\/wp\/v2\/pages\/25\/revisions\/97"}],"wp:attachment":[{"href":"https:\/\/bhargavweb.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}