:root{ --bg:#fff7e6; /* light saffron */ --card:#ffffff; --ink:#1f2937; --muted:#6b7280; --brand:#d97706; --brand2:#f59e0b; --border:#eadcc5; --shadow:0 18px 45px rgba(31,41,55,.14); --soft:#fff1d6; --radius:18px; } /* ========================= THEMES (4) Switch by setting: ========================= */ html[data-theme="saffron"]{ /* default variables from :root */ } html[data-theme="midnight"]{ --bg:#0b1220; --card:#0f172a; --ink:#e5e7eb; --muted:#9ca3af; --brand:#f59e0b; --brand2:#fb923c; --border:rgba(148,163,184,.22); --shadow:0 22px 60px rgba(0,0,0,.45); --soft:rgba(245,158,11,.10); } html[data-theme="mint"]{ --bg:#ecfdf5; --card:#ffffff; --ink:#064e3b; --muted:#0f766e; --brand:#0d9488; --brand2:#34d399; --border:#a7f3d0; --shadow:0 18px 45px rgba(6,95,70,.14); --soft:#d1fae5; } html[data-theme="rose"]{ --bg:#fff1f2; --card:#ffffff; --ink:#4c0519; --muted:#9f1239; --brand:#e11d48; --brand2:#fb7185; --border:#fecdd3; --shadow:0 18px 45px rgba(159,18,57,.14); --soft:#ffe4e6; } /* Theme selector UI */ .theme{ display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:14px; background:color-mix(in srgb, var(--card) 55%, transparent 45%); border:1px solid rgba(234,220,197,.7); } html[data-theme="midnight"] .theme{ background:rgba(15,23,42,.55); border-color:rgba(148,163,184,.22); } .theme__label{ font-size:12px; font-weight:950; color:var(--muted); } .theme__select{ font:inherit; font-size:13px; font-weight:900; padding:8px 10px; border-radius:12px; border:1px solid rgba(234,220,197,.95); background:rgba(255,255,255,.8); color:var(--ink); outline:none; } html[data-theme="midnight"] .theme__select{ background:rgba(15,23,42,.85); border-color:rgba(148,163,184,.22); color:var(--ink); } .theme__select:focus{ box-shadow:0 0 0 4px rgba(245,158,11,.15); } .drawer__theme{margin-top:6px} *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); } /* Layout */ .container{max-width:1100px;margin:0 auto;padding:0 16px} .section{padding:56px 0} .section--alt{background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0))} .section__head{margin-bottom:18px} .section__head h2{margin:0 0 8px;font-size:28px;letter-spacing:.2px} .section__head p{margin:0;color:var(--muted);max-width:820px;line-height:1.5} .grid{display:grid;gap:14px} .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width: 900px){ .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width: 720px){ .grid--2,.grid--3{grid-template-columns:1fr} } /* Topbar */ .topbar{ background:rgba(255,255,255,.55); border-bottom:1px solid rgba(234,220,197,.8); backdrop-filter: blur(8px); } .topbar__inner{ display:flex;align-items:center;justify-content:space-between; gap:10px; padding:8px 0; } .pill{ display:inline-flex;align-items:center;justify-content:center; padding:4px 10px;border-radius:999px; background:rgba(245,158,11,.14); border:1px solid color-mix(in srgb, var(--brand2) 25%, transparent 75%); color:#7c2d12; font-size:12px;font-weight:700; margin-right:6px; } .toplink{color:var(--ink);text-decoration:none;font-weight:650;font-size:13px} .toplink:hover{text-decoration:underline} .dot{opacity:.6} @media (max-width: 820px){ .topbar__right{display:none} } /* Header/Nav */ .header{ position:sticky;top:0;z-index:50; background:color-mix(in srgb, var(--bg) 75%, white 25%); backdrop-filter: blur(10px); border-bottom:1px solid rgba(234,220,197,.9); } .header__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit} .brand__mark{ width:44px;height:44px;border-radius:14px; display:grid;place-items:center; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:white;font-weight:900;letter-spacing:.5px; box-shadow:0 10px 22px rgba(217,119,6,.25); } .brand__name{font-weight:900;line-height:1} .brand__tag{font-size:12px;color:var(--muted);margin-top:2px} .nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end} .nav__link{ text-decoration:none;color:var(--ink); font-weight:750;font-size:14px; padding:10px 10px;border-radius:12px; } .nav__link:hover{background:rgba(255,255,255,.7)} .nav__link.is-active{background:rgba(245,158,11,.18);border:1px solid color-mix(in srgb, var(--brand2) 25%, transparent 75%)} .nav__cta{ text-decoration:none; padding:10px 14px;border-radius:14px; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:white;font-weight:900;font-size:14px; box-shadow:0 16px 26px rgba(217,119,6,.20); } .nav__cta:hover{filter:brightness(1.02)} @media (max-width: 980px){ .nav{display:none} } /* Mobile Nav Button */ .navbtn{ display:none; width:44px;height:44px;border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.7); box-shadow:0 12px 26px rgba(31,41,55,.08); } .navbtn__bar{display:block;height:2px;background:var(--ink);margin:6px 10px;border-radius:2px;opacity:.85} @media (max-width: 980px){ .navbtn{display:block} } /* Drawer */ .drawer{position:fixed;inset:0;display:none;z-index:80} .drawer.is-open{display:block} .drawer__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.40)} .drawer__panel{ position:absolute;right:12px;top:12px;bottom:12px;width:min(360px, calc(100% - 24px)); background:rgba(255,255,255,.92); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:14px; display:flex;flex-direction:column;gap:10px; } .drawer__head{display:flex;align-items:center;justify-content:space-between} .drawer__title{font-weight:900} .drawer__close{ width:40px;height:40px;border-radius:14px;border:1px solid var(--border); background:rgba(255,255,255,.8);font-size:18px } .drawer__links{display:flex;flex-direction:column;gap:6px;margin-top:6px} .drawer__link{ text-decoration:none;color:var(--ink); padding:12px;border-radius:14px;font-weight:850; background:rgba(255,247,230,.6);border:1px solid rgba(234,220,197,.8) } .drawer__link:hover{filter:brightness(1.02)} .drawer__actions{display:flex;gap:10px;margin-top:auto} /* Floating button */ .fab{ position:fixed;right:14px;bottom:14px;z-index:90; display:inline-flex;align-items:center;gap:10px; padding:12px 14px;border-radius:999px; text-decoration:none;font-weight:950; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:white;box-shadow:0 18px 35px rgba(217,119,6,.22); border:1px solid rgba(255,255,255,.22); } .fab:hover{filter:brightness(1.03)} .fab__text{font-size:14px} @media (max-width: 380px){ .fab__text{display:none} } /* Hero */ .hero{position:relative;padding:54px 0 28px;overflow:hidden} .hero__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:stretch} @media (max-width: 900px){ .hero__inner{grid-template-columns:1fr} } .hero h1{margin:0 0 10px;font-size:42px;letter-spacing:-.6px} @media (max-width: 600px){ .hero h1{font-size:34px} } .lead{margin:0 0 16px;color:var(--muted);line-height:1.6;font-size:16px} .lead .muted{display:inline-block;margin-left:6px;color:rgba(31,41,55,.7)} .hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 14px} .hero__stats{display:flex;gap:10px;flex-wrap:wrap} .stat{ background:rgba(255,255,255,.75); border:1px solid var(--border); border-radius:16px; padding:10px 12px; box-shadow:0 14px 30px rgba(31,41,55,.08); min-width:120px; } .stat__num{font-weight:1000} .stat__label{color:var(--muted);font-size:12px;margin-top:2px} .hero__card{display:flex;align-items:stretch} .hero__bg{ position:absolute;inset:-120px -120px auto -120px;height:320px; background:radial-gradient(closest-side, color-mix(in srgb, var(--brand2) 25%, transparent 75%), rgba(255,247,230,0) 70%); pointer-events:none; } /* Cards */ .card{ background:rgba(255,255,255,.86); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px; } .card h3{margin:0 0 8px} .card p{margin:0;color:var(--muted);line-height:1.55} .glow{position:relative} .glow::after{ content:""; position:absolute;inset:-1px; border-radius:var(--radius); background:linear-gradient(135deg, rgba(245,158,11,.35), rgba(217,119,6,.12)); z-index:-1; filter: blur(18px); opacity:.55; } .card__badge{ display:inline-flex; padding:6px 10px;border-radius:999px; background:rgba(217,119,6,.10); border:1px solid rgba(217,119,6,.18); font-weight:900;font-size:12px;color:#7c2d12; margin-bottom:10px; } .checklist{margin:0;padding-left:18px;color:var(--ink)} .checklist li{margin:8px 0} .card__row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap} .mini{ text-decoration:none;font-weight:900;font-size:13px; color:var(--brand); padding:8px 10px;border-radius:12px; background:rgba(255,247,230,.7); border:1px solid rgba(234,220,197,.9); } .mini:hover{filter:brightness(1.02)} .card__note{margin-top:12px;padding-top:10px;border-top:1px solid rgba(234,220,197,.85)} .tiny{font-size:12px;font-weight:950} .small{font-size:13px} .muted2{color:rgba(31,41,55,.68)} .bullets{margin:0;padding-left:18px} .bullets li{margin:7px 0} /* Callout */ .callout{ margin-top:14px; background:rgba(255,255,255,.7); border:1px dashed rgba(217,119,6,.35); border-radius:18px; padding:14px; display:flex;align-items:center;justify-content:space-between;gap:12px; } @media (max-width: 720px){ .callout{flex-direction:column;align-items:flex-start} } .callout__text{color:var(--ink)} .callout__actions{display:flex;gap:10px;flex-wrap:wrap} /* Chips */ .chips{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 14px} .chip{ display:inline-flex;align-items:center;justify-content:center; padding:10px 12px;border-radius:999px; background:rgba(245,158,11,.14); border:1px solid color-mix(in srgb, var(--brand2) 25%, transparent 75%); font-weight:900;font-size:13px;color:#7c2d12; } /* Buttons */ .btn{ display:inline-flex;align-items:center;justify-content:center; gap:8px; padding:11px 14px; border-radius:16px; border:1px solid var(--border); text-decoration:none; font-weight:950; cursor:pointer; } .btn--primary{ border:none; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:white; box-shadow:0 16px 26px rgba(217,119,6,.20); } .btn--primary:hover{filter:brightness(1.02)} .btn--ghost{ background:rgba(255,255,255,.75); color:var(--ink); } .btn--ghost:hover{background:rgba(255,255,255,.9)} /* Pricing */ .pricing{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; } @media (max-width: 980px){ .pricing{grid-template-columns:repeat(2, minmax(0,1fr))} } @media (max-width: 720px){ .pricing{grid-template-columns:1fr} } .price__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .price__name{font-weight:1000} .price__tag{font-size:12px;color:var(--muted)} .price__amt{font-size:26px;font-weight:1100;margin:8px 0 10px} /* Gallery */ .gallery{ display:grid;gap:14px; grid-template-columns:repeat(3, minmax(0,1fr)); } @media (max-width: 980px){ .gallery{grid-template-columns:repeat(2, minmax(0,1fr))} } @media (max-width: 640px){ .gallery{grid-template-columns:1fr} } .gitem{ text-align:left; background:rgba(255,255,255,.86); border:1px solid var(--border); border-radius:18px; padding:0; overflow:hidden; box-shadow:var(--shadow); cursor:pointer; } .gitem img{display:block;width:100%;height:180px;object-fit:cover;background:rgba(255,241,214,.7)} .gcap{padding:12px} .gtitle{font-weight:1000} .gsub{margin-top:2px;color:var(--muted);font-size:12px} .hintrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap} .hint{ background:rgba(255,255,255,.7); border:1px solid rgba(234,220,197,.9); border-radius:14px; padding:10px 12px; color:var(--muted); } code{background:rgba(255,241,214,.7);padding:2px 6px;border-radius:10px;border:1px solid rgba(234,220,197,.9);color:#7c2d12} /* FAQ */ .faq{display:grid;gap:10px} .faq__item{ background:rgba(255,255,255,.86); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:10px 12px; } .faq__item summary{ cursor:pointer; font-weight:950; list-style:none; } .faq__item summary::-webkit-details-marker{display:none} .faq__body{margin-top:8px;color:var(--muted);line-height:1.55} .testimonials{ margin-top:14px; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; } @media (max-width: 980px){ .testimonials{grid-template-columns:repeat(2, minmax(0,1fr))} } @media (max-width: 640px){ .testimonials{grid-template-columns:1fr} } .quote{font-weight:900;line-height:1.5} .who{margin-top:10px;color:var(--muted);font-size:12px} /* Contact */ .contactline{ display:grid;grid-template-columns:110px 1fr; gap:10px; padding:10px 0; border-bottom:1px solid rgba(234,220,197,.7); } .contactline:last-child{border-bottom:none} .k{color:var(--muted);font-weight:900} .v a{color:var(--brand);text-decoration:none;font-weight:900} .v a:hover{text-decoration:underline} .btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0} .map{margin-top:12px;border-radius:18px;overflow:hidden;border:1px solid rgba(234,220,197,.9)} .map iframe{width:100%;height:260px;border:0;display:block;background:rgba(255,255,255,.7)} /* Tabs */ .tabs{display:flex;gap:8px;margin:8px 0 10px} .tab{ border:1px solid rgba(234,220,197,.95); background:rgba(255,255,255,.75); border-radius:999px; padding:8px 12px; font-weight:950; cursor:pointer; } .tab.is-active{ background:rgba(245,158,11,.18); border-color:rgba(245,158,11,.35); } /* Form */ .form{display:flex;flex-direction:column;gap:10px} label{display:flex;flex-direction:column;gap:6px;font-weight:900} input,select,textarea{ font:inherit; padding:10px 12px;border-radius:14px; border:1px solid rgba(234,220,197,.95); background:rgba(255,255,255,.92); outline:none; } input:focus,select:focus,textarea:focus{ border-color:rgba(245,158,11,.65); box-shadow:0 0 0 4px rgba(245,158,11,.15); } .form__row{display:flex;gap:10px;flex-wrap:wrap} .form__hint{color:var(--muted);font-size:13px;min-height:18px} .msgpreview{ width:100%; border:1px solid rgba(234,220,197,.95); border-radius:14px; background:rgba(255,241,214,.45); color:var(--ink); padding:10px 12px; } /* Footer */ .footer{ padding:22px 0; border-top:1px solid rgba(234,220,197,.9); background:rgba(255,255,255,.5); } .footer__inner{display:flex;align-items:center;justify-content:space-between;gap:10px} .footer__brand{font-weight:1000} .footer__muted{color:var(--muted);font-size:13px} .backtop{color:var(--brand);text-decoration:none;font-weight:900} .backtop:hover{text-decoration:underline} /* Lightbox */ .lightbox{position:fixed;inset:0;display:none;z-index:120} .lightbox.is-open{display:block} .lightbox__backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55)} .lightbox__panel{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); width:min(920px, calc(100% - 24px)); background:rgba(255,255,255,.95); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:12px; } .lightbox__panel img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid rgba(234,220,197,.9)} .lightbox__close{ position:absolute;right:10px;top:10px; width:40px;height:40px;border-radius:14px;border:1px solid var(--border); background:rgba(255,255,255,.92);font-size:18px;cursor:pointer }