/* ========================== FONTS Display: Fraunces (serif, characterful) — headings, logo Body: Manrope (clean geometric sans) — paragraphs, nav Mono: IBM Plex Mono — eyebrows, labels, ledger numbers (Better for performance to move this into a tag in , but @import works as a drop-in if you keep it CSS-only.) ========================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600&display=swap'); /* ========================== RESET + TOKENS ========================== */ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } :root{ /* base */ --ink:#14110D; --ink-soft:#1A1610; --ink-card:#211B13; /* text */ --text:#EDE6D6; --text-muted:#9C9182; /* accents */ --gold:#E3A857; --gold-hover:#F0BE79; --gold-deep:#C98A34; --teal:#4C8A79; --rust:#B5482C; /* lines */ --border:rgba(227,168,87,.16); --border-soft:rgba(237,230,214,.09); } body{ font-family:'Manrope',sans-serif; background:var(--ink); color:var(--text); line-height:1.7; } /* ========================== GLOBAL ========================== */ .container{ width:90%; max-width:1200px; margin:auto; } section{ padding:110px 0; position:relative; } h1,h2,h3,h4{ font-family:'Fraunces',serif; font-weight:600; letter-spacing:-.01em; } h2{ font-size:44px; text-align:center; margin-bottom:60px; color:var(--text); } p{ color:var(--text-muted); } img{ max-width:100%; display:block; } a{ text-decoration:none; color:var(--text); } ul{ list-style:none; } /* ========================== BUTTONS ========================== */ .btn{ display:inline-block; background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:#1A1305; padding:15px 34px; border-radius:8px; font-weight:700; font-family:'Manrope',sans-serif; letter-spacing:.01em; box-shadow:0 10px 30px rgba(227,168,87,.18); transition:.3s ease; } .btn:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(227,168,87,.3); background:linear-gradient(135deg,var(--gold-hover),var(--gold)); } .btn-outline{ display:inline-block; border:1.5px solid var(--border); color:var(--text); padding:13px 32px; border-radius:8px; font-weight:600; transition:.3s ease; } .btn-outline:hover{ border-color:var(--gold); color:var(--gold); background:rgba(227,168,87,.06); } /* ========================== HEADER ========================== */ header{ width:100%; position:fixed; top:0; left:0; z-index:999; background:rgba(20,17,13,.85); backdrop-filter:blur(14px); border-bottom:1px solid var(--border-soft); } header .container{ display:flex; justify-content:space-between; align-items:center; height:82px; } .logo{ font-family:'Fraunces',serif; font-size:26px; font-weight:700; color:var(--gold); letter-spacing:-.01em; } nav ul{ display:flex; align-items:center; gap:34px; } nav a{ color:var(--text-muted); font-size:15px; font-weight:500; transition:.3s; } nav a:hover{ color:var(--gold); } /* ========================== HERO SECTION ========================== */ .hero{ padding-top:190px; padding-bottom:130px; background-color:var(--ink); background-image: radial-gradient(circle at 85% 15%,rgba(227,168,87,.10),transparent 40%), radial-gradient(circle at 5% 90%,rgba(76,138,121,.10),transparent 40%), /* faint blueprint grid — nods to "building" the site */ repeating-linear-gradient(0deg, rgba(237,230,214,.035) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(237,230,214,.035) 0 1px, transparent 1px 64px); } .hero-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:80px; } /* stamp-style eyebrow badge — the site's signature mark */ .badge{ display:inline-flex; align-items:center; gap:8px; padding:9px 18px; background:transparent; border:1.5px dashed var(--gold); color:var(--gold); border-radius:50px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:28px; transform:rotate(-2deg); } .hero h1{ font-size:68px; line-height:1.08; margin-bottom:26px; color:var(--text); } .hero p{ font-size:19px; max-width:540px; margin-bottom:42px; color:var(--text-muted); } .hero-buttons{ display:flex; gap:18px; margin-top:20px; } .hero-right{ display:flex; justify-content:center; align-items:center; position:relative; } .hero-right::before{ content:""; position:absolute; width:80%; height:80%; background:radial-gradient(circle,rgba(227,168,87,.16),transparent 70%); filter:blur(40px); z-index:0; } .hero-right img{ width:100%; max-width:520px; border-radius:16px; border:1px solid var(--border); box-shadow:0 30px 60px rgba(0,0,0,.5); position:relative; z-index:1; animation:floatImage 5s ease-in-out infinite; } /* Floating Animation */ @keyframes floatImage{ 0%{ transform:translateY(0px); } 50%{ transform:translateY(-15px); } 100%{ transform:translateY(0px); } } /* ========================== SERVICES ========================== */ .services{ background:var(--ink-soft); } .cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; } .card{ background:var(--ink-card); padding:36px; border-radius:14px; border:1px solid var(--border-soft); transition:.35s ease; } .card:hover{ transform:translateY(-8px); border-color:var(--gold); box-shadow:0 20px 40px rgba(0,0,0,.35); } .card h3{ font-size:23px; margin-bottom:14px; color:var(--gold); } .card p{ color:var(--text-muted); } /* ========================== WHY CHOOSE US ========================== */ .why{ background:var(--ink); } .why-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:28px; } .why-grid div{ background:var(--ink-card); padding:36px; border-radius:14px; transition:.3s ease; border:1px solid var(--border-soft); } .why-grid div:hover{ transform:translateY(-6px); border-color:var(--teal); } .why-grid h3{ margin-bottom:14px; color:var(--gold); font-size:21px; } .why-grid p{ color:var(--text-muted); } /* ========================== PROCESS ========================== */ .process{ background:var(--ink-soft); } .steps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:28px; text-align:center; } .steps div{ background:var(--ink-card); padding:42px 24px; border-radius:14px; transition:.3s ease; border:1px solid var(--border-soft); } .steps div:hover{ transform:translateY(-8px); border-color:var(--gold); } /* ledger-style step numbers instead of a flat filled circle */ .steps span{ width:60px; height:60px; margin:auto; margin-bottom:24px; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--gold); font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:600; border:1.5px solid var(--gold); border-radius:50%; } .steps h3{ font-size:21px; } /* ========================== CTA ========================== */ .cta{ text-align:center; background: radial-gradient(circle at 20% 20%,rgba(255,255,255,.06),transparent 40%), linear-gradient(135deg,#C98A34,#B5482C); padding:120px 20px; } .cta h2{ color:#1A1305; margin-bottom:20px; } .cta p{ color:rgba(26,19,5,.75); max-width:700px; margin:auto; margin-bottom:40px; font-size:18px; } .cta .btn{ background:#1A1305; color:var(--gold); box-shadow:0 10px 30px rgba(0,0,0,.35); } .cta .btn:hover{ background:#241C09; color:var(--gold-hover); } /* ========================== FOOTER ========================== */ footer{ background:#0C0A07; padding-top:70px; border-top:1px solid var(--border-soft); } .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:60px; padding-bottom:60px; } .footer-grid h3{ font-family:'Fraunces',serif; color:var(--gold); margin-bottom:20px; font-size:27px; } .footer-grid h4{ margin-bottom:20px; font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); } .footer-grid ul{ display:flex; flex-direction:column; gap:12px; } .footer-grid a{ color:var(--text-muted); transition:.3s; } .footer-grid a:hover{ color:var(--gold); } .footer-grid p{ margin-bottom:10px; color:var(--text-muted); } .copyright{ border-top:1px solid var(--border-soft); text-align:center; padding:25px; color:#6B6255; font-family:'IBM Plex Mono',monospace; font-size:13px; } /* ========================== ABOUT PAGE ========================== */ .about-content{ max-width:900px; margin:auto; } .about-content p{ font-size:18px; margin-bottom:25px; color:var(--text-muted); } .about-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; margin-top:60px; } .about-box{ background:var(--ink-card); padding:36px; border-radius:14px; border:1px solid var(--border-soft); transition:.3s ease; } .about-box:hover{ transform:translateY(-6px); border-color:var(--gold); } .about-box h3{ color:var(--gold); margin-bottom:15px; } /* ========================== PORTFOLIO ========================== */ .portfolio-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:30px; } .portfolio-card{ background:var(--ink-card); border-radius:16px; overflow:hidden; border:1px solid var(--border-soft); transition:.35s ease; } .portfolio-card:hover{ transform:translateY(-8px); border-color:var(--gold); box-shadow:0 20px 40px rgba(0,0,0,.35); } .portfolio-card img{ width:100%; height:230px; object-fit:cover; filter:grayscale(.15); } .portfolio-content{ padding:30px; } .portfolio-content h3{ margin-bottom:15px; color:var(--gold); } .portfolio-content p{ margin-bottom:25px; color:var(--text-muted); } /* ========================== PRICING ========================== */ .pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:30px; } .price-card{ background:var(--ink-card); padding:42px; border-radius:16px; text-align:center; border:1px solid var(--border-soft); transition:.35s ease; position:relative; } .price-card:hover{ transform:translateY(-10px); border-color:var(--gold); box-shadow:0 20px 45px rgba(0,0,0,.4); } .price-card h1{ font-family:'IBM Plex Mono',monospace; font-size:42px; margin:20px 0; color:var(--gold); } .price-card h2{ font-family:'Manrope',sans-serif; font-size:18px; font-weight:500; color:var(--text-muted); } .price-card ul{ margin:35px 0; text-align:left; } .price-card li{ margin-bottom:15px; color:var(--text-muted); } .featured{ border:1.5px solid var(--gold); transform:scale(1.05); box-shadow:0 20px 50px rgba(227,168,87,.14); } /* wax-seal style stamp badge, echoes .badge in the hero */ .popular{ position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(-3deg); background:var(--gold); color:#1A1305; padding:7px 20px; border-radius:30px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; box-shadow:0 8px 20px rgba(227,168,87,.35); } /* ========================== CONTACT ========================== */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; } .contact-info h2{ margin-bottom:20px; text-align:left; } .info-box{ background:var(--ink-card); padding:25px; margin-top:25px; border-radius:12px; border:1px solid var(--border-soft); } .info-box h3{ margin-bottom:10px; color:var(--gold); } .contact-form{ background:var(--ink-card); padding:36px; border-radius:16px; border:1px solid var(--border-soft); } .contact-form form{ display:flex; flex-direction:column; gap:20px; } .contact-form input, .contact-form textarea{ width:100%; padding:15px; background:var(--ink); color:var(--text); border:1px solid var(--border-soft); border-radius:8px; font-size:16px; font-family:'Manrope',sans-serif; outline:none; transition:.3s; } .contact-form input:focus, .contact-form textarea:focus{ border-color:var(--gold); } /* =========================================== FLOATING CONTACT =========================================== */ .floating-contact{ position:fixed; bottom:30px; right:25px; z-index:9999; } .floating-toggle{ width:62px; height:62px; border:none; border-radius:50%; background:linear-gradient(135deg,#ffffff,#f3f3f3); display:flex; justify-content:center; align-items:center; cursor:pointer; padding:0; box-shadow: 0 0 18px rgba(255,255,255,.25), 0 12px 35px rgba(0,0,0,.35); transition:.35s ease; animation:floatingButton 3.5s ease-in-out infinite; } .floating-toggle:hover{ transform:translateY(-4px) scale(1.08); box-shadow: 0 0 30px rgba(255,255,255,.55), 0 20px 45px rgba(0,0,0,.45); } .floating-menu{ position:absolute; bottom:75px; right:0; width:220px; background:var(--ink-card); border:1px solid var(--border-soft); border-radius:14px; overflow:hidden; opacity:0; visibility:hidden; transform:translateY(20px); transition:.35s; box-shadow:0 20px 45px rgba(0,0,0,.35); } .floating-menu.open{ opacity:1; visibility:visible; transform:translateY(0); } .floating-menu a{ display:flex; align-items:center; gap:15px; padding:18px 20px; color:var(--text); transition:.3s; } .floating-menu a:hover{ background:rgba(250, 249, 248, 0.671); color:var(--gold); } .floating-menu img{ width:22px; height:22px; } @keyframes floatingButton{ 0%{ transform:translateY(0px); } 50%{ transform:translateY(-6px); } 100%{ transform:translateY(0px); } } @keyframes glowPulse{ 0%{ box-shadow: 0 0 18px rgba(255,255,255,.25), 0 12px 35px rgba(0,0,0,.35); } 50%{ box-shadow: 0 0 28px rgba(255,255,255,.45), 0 12px 35px rgba(0,0,0,.35); } 100%{ box-shadow: 0 0 18px rgba(255,255,255,.25), 0 12px 35px rgba(0,0,0,.35); } } /* Mobile Hero Image */ .hero-mobile-image{ display:none; } .hero-mobile-image img{ width:100%; max-width:520px; border-radius:16px; border:1px solid var(--border); box-shadow:0 30px 60px rgba(0,0,0,.5); } /* Footer Contact */ .footer-contact-item{ display:flex; align-items:center; gap:12px; margin-bottom:14px; } .footer-contact-item img{ width:20px; height:20px; object-fit:contain; flex-shrink:0; } .footer-contact-item p{ margin:0; color:var(--text-muted); }