/* ===== The Whisker Still — Unified Gothic Botanical Theme ===== */ /* Fonts (safe to keep here; you can also move to ) */ @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=IM+Fell+English+SC&display=swap'); :root{ --bg:#0e0e11; --card:#131319; --ink:#e7e7ec; --muted:#a1a1ad; --accent:#b48e57; /* gold/copper */ --accent2:#5dbb78; /* botanical green */ --shadow:0 10px 30px rgba(0,0,0,.35); --radius:18px; } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)} a{color:var(--accent2);text-decoration:none} a:hover{opacity:.9} /* ===== Typography (site-wide) ===== */ body{ font-family:'IM Fell English SC', serif; color:#e9e4da; } h1,h2,h3{ font-family:'Cinzel Decorative', serif; color:#d7c6a0; text-shadow:0 0 10px rgba(93,187,120,.25); margin:0 0 12px; } p{ line-height:1.6; } .muted{ color:var(--muted); } nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; padding: 16px 20px; background-color: #0b110d; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: relative; z-index: 10; } nav a { color: #e3e3e3; text-decoration: none; font-size: 1rem; padding: 8px 14px; border-radius: 6px; transition: background 0.3s ease, color 0.3s ease; } nav a:hover { background-color: #1e1e1e; color: #fff; } nav .cta { background-color: #bfa258; color: #0b110d; font-weight: bold; } nav .cta:hover { background-color: #d7bb73; } /* Mobile stacking and wrap */ @media screen and (max-width: 600px) { nav { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 10px; } nav a { font-size: 1rem; padding: 10px; text-align: center; } } .logo { width: 28px; height: 28px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); } /* Nav links (desktop default) */ .nav nav { display: flex; gap: 16px; align-items: center; } .nav nav a { padding: 8px 10px; border-radius: 10px; color: #eee; text-decoration: none; font-family: 'IM Fell English SC', serif; } .nav nav a.active { background: rgba(255, 255, 255, 0.06); } .nav .cta { background: var(--accent, #bfa258); color: #111; padding: 10px 14px; border-radius: 12px; font-weight: 700; } /* ===== Mobile Styles ===== */ @media (max-width: 768px) { .nav { flex-direction: column; align-items: flex-start; padding: 12px; } .nav nav { width: 100%; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 10px; } .nav nav a, .nav .cta { width: 100%; padding: 10px 14px; border-radius: 8px; } } /* ===== Containers & grids ===== */ .container{ max-width:1100px; margin:0 auto; padding:32px 22px } .grid{ display:grid; gap:20px } .features{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); padding:32px 22px } /* ===== Buttons ===== */ .btn{ display:inline-block; margin-top:12px; background:linear-gradient(90deg,#5dbb78 0%,#b48e57 100%); color:#0c120e; padding:12px 16px; border-radius:12px; font-weight:700; box-shadow:var(--shadow); transition:transform .15s ease, filter .2s ease, box-shadow .3s ease; } .btn:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 0 18px rgba(93,187,120,.35), 0 0 35px rgba(180,142,87,.25); } /* === HERO SECTION RESPONSIVE FIX === */ .hero { background: radial-gradient(ellipse at center, #111 0%, #0b0b0b 100%); color: #f2f2f2; padding: 48px 24px; text-align: center; position: relative; overflow: hidden; } .hero-inner { max-width: 1000px; margin: 0 auto; padding: 0 12px; } .hero-logo { width: 160px; max-width: 60%; height: auto; margin: 0 auto 24px; display: block; } .hero h1 { font-size: 2rem; line-height: 1.2; margin-bottom: 24px; } .hero-collapsible { background: #161616; border-radius: 12px; padding: 16px; margin-top: 20px; text-align: left; box-shadow: 0 0 10px rgba(0,0,0,0.3); } .hero-collapsible summary { font-size: 1.2rem; cursor: pointer; font-weight: bold; color: #d7bb73; display: flex; justify-content: space-between; align-items: center; } .hero-caret { font-size: 1.5rem; transform: rotate(0deg); transition: transform 0.3s ease; } .hero-collapsible[open] .hero-caret { transform: rotate(180deg); } .hero-body { margin-top: 16px; } .callout.shelf { background-color: #111; padding: 0; border-radius: 8px; border-top: 1px solid rgba(255,255,255,.1); } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } .grid > div { background: #1a1a1a; padding: 20px; border-radius: 12px; } .grid h3 { margin-top: 0; } @media screen and (max-width: 768px) { .hero { padding: 32px 16px; } .hero h1 { font-size: 1.5rem; } .hero-collapsible summary { font-size: 1rem; } .grid { grid-template-columns: 1fr; gap: 12px; } .hero-logo { width: 120px; max-width: 80%; margin-bottom: 16px; } } /* ===== Feature Cards (home) ===== */ .card{ background:var(--card); padding:18px; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.06) } .arcane-card{ position:relative; overflow:hidden; display:flex; align-items:flex-start; gap:18px; background:rgba(10,10,12,.8); border:1px solid rgba(180,142,87,.2); border-radius:14px; padding:20px; box-shadow:inset 0 0 18px rgba(93,187,120,.08); transition:transform .2s ease, box-shadow .3s ease, border-color .2s ease; } .arcane-card:hover{ transform:translateY(-3px); border-color:rgba(93,187,120,.35); box-shadow:0 8px 28px rgba(93,187,120,.22), 0 0 0 1px rgba(180,142,87,.18) inset; } .arcane-card::before{ content:"ᚠᚨᛟᚾᛉᛞᚲ"; letter-spacing:.25em; position:absolute; right:10px; bottom:-6px; font-size:12px; color:rgba(93,187,120,.45); } .sigil-icon{ width:80px; height:80px; flex-shrink:0; filter:drop-shadow(0 0 10px rgba(93,187,120,.4)); border-radius:50%; background:radial-gradient(circle at center, rgba(93,187,120,.05), transparent 60%) } .card-text{ flex:1 } .card-text p{ color:#c9c5b7; line-height:1.55 } /* ===== Shelf/Callout ===== */ .callout{ max-width:980px; margin:30px auto; text-align:center; background:linear-gradient(120deg, rgba(92,187,120,.08), rgba(180,142,87,.08)); padding:24px; border-radius:var(--radius); border:1px solid rgba(255,255,255,.06) } .shelf{ position:relative; overflow:hidden; border:1px solid rgba(93,187,120,.22); box-shadow:0 8px 28px rgba(0,0,0,.35), inset 0 0 18px rgba(180,142,87,.08) } .shelf::after{ content:""; position:absolute; left:4%; right:4%; bottom:12px; height:2px; background:linear-gradient(90deg, rgba(180,142,87,.25), rgba(93,187,120,.25), rgba(180,142,87,.25)); opacity:.6; } /* ===== Footer ===== */ .footer{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:20px 22px; border-top:1px solid rgba(255,255,255,.06); color:var(--muted) } .footer .links a{ color:var(--muted); margin-left:14px } /* ===== LAB ===== */ .lab h1{ margin-bottom:6px } .lab .lab-controls{ display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 18px } .lab .lab-controls input,.lab .lab-controls select{ background:#121319; color:#e9e4da; border:1px solid rgba(180,142,87,.25); padding:10px 12px; border-radius:12px; min-width:220px; } .lab-stats{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px } .stat{ background:#121319; border:1px solid rgba(93,187,120,.25); border-radius:14px; padding:12px 16px } .stat-val{ font-size:1.4rem; color:#d7c6a0 } .stat-label{ color:#a9a6a0 } .batch-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) } .lab-card{ position:relative; border:1px solid rgba(255,255,255,.06); border-radius:16px; background:linear-gradient(180deg, rgba(19,19,25,.92), rgba(16,16,22,.88)); box-shadow:inset 0 0 18px rgba(93,187,120,.08); transition:transform .2s ease, box-shadow .3s ease, border-color .2s ease; } .lab-card:hover{ transform:translateY(-3px); border-color:rgba(93,187,120,.35); box-shadow:0 0 18px rgba(93,187,120,.22), inset 0 0 22px rgba(180,142,87,.10); } .lab-card__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 16px 8px } .lab-card h3{ margin:0 } .lab-meta{ display:flex; gap:16px; flex-wrap:wrap; padding:0 16px 8px; color:#bfb8aa; align-items:center } .lab-list{ margin:0; padding:0 18px 14px 36px; color:#c9c5b7 } .lab-attach{ padding:0 16px 16px } .lab-attach a{ color:#5dbb78; text-decoration:underline; text-underline-offset:3px } .lab-attach a:hover{ text-shadow:0 0 12px rgba(93,187,120,.35) } .qc{ padding:4px 8px; border-radius:10px; font-weight:700; font-size:.85rem; position:relative; overflow:hidden } .qc::after{ content:""; position:absolute; inset:-2px; border-radius:10px; opacity:0; transition:opacity .3s ease } .qc-pass{ background:rgba(93,187,120,.18); color:#74d091; border:1px solid rgba(93,187,120,.35) } .qc-pass::after{ box-shadow:0 0 14px rgba(93,187,120,.45) } .qc-hold{ background:rgba(180,142,87,.14); color:#d6b482; border:1px solid rgba(180,142,87,.35) } .qc-hold::after{ box-shadow:0 0 14px rgba(180,142,87,.35) } .qc-fail{ background:rgba(180,82,82,.14); color:#f3a6a6; border:1px solid rgba(180,82,82,.35) } .qc-fail::after{ box-shadow:0 0 14px rgba(200,80,80,.35) } .lab-card:hover .qc::after{ opacity:1 } .age-chip{ margin-left:auto; padding:4px 8px; border-radius:999px; background:rgba(93,187,120,.12); border:1px solid rgba(93,187,120,.35); color:#90d6a8; font-weight:700; font-size:.85rem; } .copy-code{ margin-left:8px; background:rgba(180,142,87,.14); border:1px solid rgba(180,142,87,.35); color:#d6b482; border-radius:8px; padding:4px 8px; font-size:.85rem; cursor:pointer; } .copy-code:hover{ filter:brightness(1.1) } /* Lab section headings with rune divider */ .lab h2{ position:relative; padding-bottom:6px; margin-top:22px } .lab h2::after{ content:"ᚠᚨᛟᚾᛉᛞᚲ"; position:absolute; right:0; bottom:-6px; font-size:12px; letter-spacing:.3em; color:rgba(93,187,120,.45); } /* Optional top aura */ .lab{ position:relative; overflow:hidden } .lab-aura{ position:relative; height:140px; margin:-12px -22px 8px; border-radius:16px; filter:saturate(1.05); background: radial-gradient(700px 240px at 40% 40%, rgba(93,187,120,.10), transparent 70%), radial-gradient(520px 200px at 75% 60%, rgba(180,142,87,.09), transparent 75%); } .rune-sparks--lab{ position:absolute; inset:0; pointer-events:none } .rune-sparks--lab span{ position:absolute; bottom:-10px; font-family:Georgia,serif; font-size:18px; color:rgba(93,187,120,.68); text-shadow:0 0 8px rgba(93,187,120,.55), 0 0 16px rgba(180,142,87,.35); animation:floatUpLab linear infinite; opacity:0; } .rune-sparks--lab span:nth-child(odd){ color:rgba(180,142,87,.75) } .rune-sparks--lab span:nth-child(1){ left:8%; animation-duration:18s } .rune-sparks--lab span:nth-child(2){ left:26%; animation-duration:22s; animation-delay:1.6s } .rune-sparks--lab span:nth-child(3){ left:44%; animation-duration:20s; animation-delay:3.2s } .rune-sparks--lab span:nth-child(4){ left:58%; animation-duration:24s; animation-delay:4.4s } .rune-sparks--lab span:nth-child(5){ left:70%; animation-duration:19s; animation-delay:.8s } .rune-sparks--lab span:nth-child(6){ left:84%; animation-duration:26s; animation-delay:2.8s } .rune-sparks--lab span:nth-child(7){ left:92%; animation-duration:21s; animation-delay:4.8s } @keyframes floatUpLab{ 0%{ transform:translateY(10px) scale(.95); opacity:0 } 10%{ opacity:.95 } 90%{ opacity:.95 } 100%{ transform:translateY(-150px) scale(1.05); opacity:0 } } /* ===== ABOUT ===== */ .about{ padding-top:18px } .about-hero{ display:grid; gap:22px; grid-template-columns:380px 1fr; align-items:start } @media (max-width:900px){ .about-hero{ grid-template-columns:1fr } } .portrait{ position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden; transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .15s ease; box-shadow:0 10px 35px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) inset; } .portrait img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(.2) contrast(1.05) saturate(1.05) } .portrait-ring{ position:absolute; inset:0; pointer-events:none; border-radius:18px; background: radial-gradient(120% 120% at 80% 10%, rgba(93,187,120,.16), transparent 60%), radial-gradient(110% 110% at 20% 90%, rgba(180,142,87,.12), transparent 60%); border:1px solid rgba(180,142,87,.35); box-shadow:inset 0 0 22px rgba(180,142,87,.18), inset 0 0 38px rgba(93,187,120,.16); } .portrait-sparks{ position:absolute; inset:0; pointer-events:none } .portrait-sparks i{ position:absolute; font-family:Georgia,serif; font-style:normal; font-size:18px; color:rgba(93,187,120,.7); text-shadow:0 0 10px rgba(93,187,120,.55), 0 0 18px rgba(180,142,87,.35); animation:aboutFloat 20s linear infinite; opacity:0; } .portrait-sparks i:nth-child(odd){ color:rgba(180,142,87,.75) } .portrait-sparks i:nth-child(1){ left:6%; bottom:-10px; animation-duration:18s } .portrait-sparks i:nth-child(2){ left:22%; bottom:-10px; animation-duration:24s; animation-delay:2s } .portrait-sarks i:nth-child(3){ left:38%; bottom:-10px; animation-duration:20s; animation-delay:4s } .portrait-sparks i:nth-child(4){ left:52%; bottom:-10px; animation-duration:28s; animation-delay:6s } .portrait-sparks i:nth-child(5){ left:70%; bottom:-10px; animation-duration:19s; animation-delay:1s } .portrait-sparks i:nth-child(6){ left:84%; bottom:-10px; animation-duration:26s; animation-delay:3s } .portrait-sparks i:nth-child(7){ left:92%; bottom:-10px; animation-duration:22s; animation-delay:5s } @keyframes aboutFloat{ 0%{ transform:translateY(10px) scale(.95); opacity:0 } 10%{ opacity:.95 } 90%{ opacity:.95 } 100%{ transform:translateY(-140px) scale(1.05); opacity:0 } } .about-copy blockquote{ margin:14px 0; padding:12px 16px; border-left:3px solid rgba(93,187,120,.35); background:rgba(19,19,25,.6); border-radius:10px; color:#cfc9bb; font-style:italic; } .about-badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px } .about-facts{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-top:18px } .fact{ background:#121319; border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:12px 14px; box-shadow:inset 0 0 14px rgba(93,187,120,.08) } .fact strong{ display:block; color:#d7c6a0 } .fact span{ color:#bfb8aa } /* ===== SHOP (consolidated + conflict-free) ===== */ /* Section header spacing */ .container > h1 + .muted{ margin-top:2px; margin-bottom:14px } /* Product list grid */ .grid.products{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(320px,1fr)); } /* Single-column product card (no layout squeeze) */ .product-card{ display:block; position:relative; padding:16px 16px 18px; border-radius:16px; background:linear-gradient(180deg, rgba(19,19,25,.92), rgba(16,16,22,.88)); border:1px solid rgba(255,255,255,.06); box-shadow:inset 0 0 18px rgba(93,187,120,.08); overflow:hidden; isolation:isolate; transition:transform .2s ease, box-shadow .3s ease, border-color .2s ease; } .product-card:hover{ transform:translateY(-3px); border-color:rgba(93,187,120,.35); box-shadow:0 0 20px rgba(93,187,120,.22), inset 0 0 22px rgba(180,142,87,.10); } .product-card h3{ margin:0 0 6px } .product-card p{ color:#c9c5b7; margin:6px 0 8px } .product-card .bullets{ margin:0 0 10px 18px; color:#bfb8aa } .product-card .bullets li{ margin:2px 0 } .product-card .price{ font-size:1.25rem; color:#d7c6a0; margin:6px 0 8px } /* Stripe Buy Button wrapper spacing */ stripe-buy-button{ display:block; margin:6px 0 2px; width:100% } /* Decorative background */ .product-card::after{ content:"ᚠᚨᛟᚾᛉᛞᚲ"; position:absolute; right:10px; bottom:8px; font-size:11px; letter-spacing:.35em; color:rgba(93,187,120,.36); pointer-events:none; opacity:.85; } .product-card::before{ content:""; position:absolute; left:-18px; bottom:18px; width:160px; height:200px; transform:rotate(-6deg); border-radius:18px 18px 10px 10px / 26px 26px 12px 12px; background: radial-gradient(120% 120% at 72% 8%, rgba(93,187,120,.16), transparent 60%), linear-gradient(180deg, #2a2e37 0%, #0b0c11 65%, #0c0e12 100%); box-shadow:inset 0 0 16px rgba(0,0,0,.6), 0 10px 35px rgba(0,0,0,.45); opacity:.18; z-index:-1; pointer-events:none; filter:blur(.2px); } /* Optional per-product tweaks */ #spray.product-card::before{ height:190px } #oil.product-card::before{ height:205px; box-shadow: inset 0 0 16px rgba(0,0,0,.6), 0 10px 35px rgba(0,0,0,.45), 0 -28px 0 0 #16181e inset } #toy.product-card::before{ width:150px; height:150px; border-radius:12px; transform:translateY(0) rotate(-4deg); background:radial-gradient(120% 120% at 70% 10%, rgba(180,142,87,.20), transparent 60%), linear-gradient(180deg, #1d2027, #0b0c11 70%); opacity:.20; } /* Trust row (if used) */ .shop-trust{ display:flex; gap:12px; flex-wrap:wrap; margin:18px 0; color:#bfb8aa } /* ===== Shop: full-page floating runes background ===== */ .shop-page { position: relative; overflow-x: hidden; background-color: #0e0e11; color: #e7e7ec; } .runes-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; opacity: 0.12; pointer-events: none; font-family: 'IM Fell English SC', serif; color: rgba(93,187,120,0.4); } .runes-bg span { position: absolute; font-size: 2rem; animation: runeFloat 30s linear infinite; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; } } /* Random placement of runes */ .runes-bg span:nth-child(1){ left:10%; animation-duration:38s; animation-delay:0s;} .runes-bg span:nth-child(2){ left:25%; animation-duration:42s; animation-delay:5s;} .runes-bg span:nth-child(3){ left:40%; animation-duration:36s; animation-delay:2s;} .runes-bg span:nth-child(4){ left:55%; animation-duration:48s; animation-delay:8s;} .runes-bg span:nth-child(5){ left:70%; animation-duration:34s; animation-delay:3s;} .runes-bg span:nth-child(6){ left:85%; animation-duration:50s; animation-delay:10s;} .runes-bg span:nth-child(7){ left:95%; animation-duration:39s; animation-delay:7s;} /* Make sure all content floats above the background */ .container, footer { position: relative; } header.nav { position: sticky; top: 0; background: #0b110d; z-index: 10; /* only if needed to stay above other elements */ } .runes-bg span:hover { text-shadow: 0 0 12px rgba(93,187,120,0.6); opacity: 0.9; } /* Product image sizing (card) */ .product-card .product-media img { max-width: 220px; height: auto; margin: 0 auto; display: block; } /* Green + gold CTA */ .stripe-buy.cta { display:inline-block; padding:.85rem 1.1rem; border-radius:10px; font-weight:700; text-decoration:none; background:#0e3b1a; /* deep forest green */ color:#d0b46c !important; /* antique gold text */ border:1px solid #1b5229; /* darker green edge */ box-shadow:0 6px 16px rgba(0,0,0,.25); transition:.15s ease; letter-spacing:.3px; } .stripe-buy.cta:hover { background:#145425; /* slightly brighter green */ color:#f0d89a !important; /* brighter gold on hover */ box-shadow:0 8px 22px rgba(0,0,0,.35); transform:translateY(-1px); } /* === Callout Row & Thumbnail (patched) === */ .callout-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; /* patch: wrap on small screens */ text-align: left; /* ensures text alignment stays sane */ } .callout-main { flex: 1 1 60%; } .callout-thumb { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; } .callout-thumb img { width: 150px; height: auto; display: block; border-radius: 8px; box-shadow: 0 0 18px rgba(93,187,120,.25), 0 0 30px rgba(180,142,87,.2); transition: transform .2s ease, box-shadow .3s ease; } .callout-thumb img:hover { transform: translateY(-3px); box-shadow: 0 0 25px rgba(93,187,120,.45), 0 0 45px rgba(180,142,87,.25); } @media (max-width: 900px) { .callout-row { flex-direction: column; text-align: center; } .callout-main { flex: 1 1 100%; } .callout-thumb { margin-top: 1.2rem; } } /* === Features Grid (patched to 3-across) === */ .grid.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; align-items: start; justify-items: stretch; } @media (max-width: 1100px) { .grid.features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .grid.features { grid-template-columns: 1fr; } } .grid.features .card { width: 100%; min-height: 100%; } /* ===== Nav logo: alignment + optional right-side placement ===== */ .nav .brand .logo{ width: 28px; height: 28px; object-fit: contain; display: block; } .logo-right .nav{ display: grid; grid-template-columns: 1fr auto; align-items: center; } .logo-right .nav nav{ order: 1; justify-self: start } .logo-right .nav .brand{ order: 2; justify-self: end } /* === Product media block === */ .product-media{ margin: -4px -4px 10px; border-radius: 12px; overflow: hidden; background: #0f1115; box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 14px rgba(93,187,120,.08); } .product-media img{ width: 100%; height: auto; display: block; transform: translateZ(0); } .product-card:hover .product-media img{ filter: saturate(1.05); } /* Bundle pill */ .pill{ position:absolute; top:10px; left:10px; padding:4px 10px; border-radius:999px; font-weight:700; font-size:.8rem; background:rgba(180,142,87,.9); color:#0b0b0d; box-shadow:0 4px 12px rgba(0,0,0,.25); } .pill-sub{ background:linear-gradient(90deg,#5dbb78,#b48e57); color:#0b0b0d; } .product-card.bundle .product-media{ margin-bottom:12px; } .runes-bg span { position: absolute; font-size: 2rem; animation: runeFloat 30s linear infinite; } @keyframes runeFloat { 0% { transform: translateY(110vh) rotate(0deg); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; } } .container, header, footer { position: relative; z-index: 5; } .runes-bg span:hover { text-shadow: 0 0 12px rgba(93,187,120,0.6); opacity: 0.9; } /* === FEATURES: one row, equal height, full width === */ /* (A) Full-bleed band so the row spans the page width. If your features section is INSIDE a .container, give the section an extra class:
*/ .features-band { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100vw; padding-inline: clamp(20px, 5vw, 60px); /* page edge padding */ } /* (B) Three columns on desktop, stretch items to same height */ /* Make each card fill its grid cell and equalize heights */ section.grid.features > .card { width: auto; max-width: none; min-width: 0; height: 100%; display: flex; /* equal-height trick */ flex-direction: column; } /* Let the text area flex to fill; keeps footer bits aligned */ section.grid.features > .card .card-text { flex: 1 1 auto; } /* Keep the icon from forcing weird widths */ section.grid.features .sigil-icon { flex: 0 0 auto; } /* (C) Responsive: 2 across on medium, 1 across on phones */ @media (max-width: 1200px) { } @media (max-width: 760px) { } /* ===== Better Footer (occult-gothic) ===== */ .footer.fx { border-top: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, rgba(14, 14, 17, 0.35), rgba(10, 10, 12, 0.55)); padding: 44px 22px 24px; color: #bfb8aa; position: relative; box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.28); box-sizing: border-box; width: 100%; overflow-x: hidden; } .footer-grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 1200px; margin: 0 auto 18px; box-sizing: border-box; padding: 0 10px; } .footer-col h4 { font-family: 'Cinzel Decorative', serif; color: #d7c6a0; margin: 0 0 10px; font-size: 1.05rem; letter-spacing: 0.02em; text-shadow: 0 0 10px rgba(93, 187, 120, 0.18); } .footer-brand { font-family: 'Cinzel Decorative', serif; color: #d7c6a0; font-size: 1.25rem; letter-spacing: 0.02em; } .footer-sub { color: #9a968c; margin: 4px 0 10px; } .footer-links a, .footer-col a { display: block; color: #bfb8aa; text-decoration: none; margin: 4px 0; } .footer-links a:hover, .footer-col a:hover { color: #e7e4d8; text-shadow: 0 0 10px rgba(180, 142, 87, 0.25); } .footer-mail { color: #e7e4d8; font-weight: 700; text-decoration: none; } .footer-mail:hover { color: #f1e9cf; } .footer-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .footer-badges span { background: rgba(19, 19, 25, 0.7); border: 1px solid rgba(255, 255, 255, 0.06); padding: 6px 10px; border-radius: 999px; font-size: 0.9rem; } .footer-cta { display: inline-block; margin-top: 8px; padding: 0.55rem 0.9rem; border-radius: 10px; background: #0e3b1a; color: #d0b46c; border: 1px solid #1b5229; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } .footer-cta:hover { background: #145425; color: #f0d89a; } .rune-divider { max-width: 1200px; margin: 8px auto 10px; text-align: center; font-size: 0.8rem; letter-spacing: 0.5em; color: rgba(93, 187, 120, 0.55); text-shadow: 0 0 12px rgba(93, 187, 120, 0.25); } .footer-bottom { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.9rem; color: #8c877b; padding: 0 10px; flex-wrap: wrap; box-sizing: border-box; } .footer-bottom .to-top { color: #bfb8aa; text-decoration: none; } .footer-bottom .to-top:hover { color: #e7e4d8; } .footer-bottom .copy { opacity: 0.9; } /* ===== Mobile tweaks ===== */ @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-bottom { flex-direction: column; text-align: center; gap: 8px; padding: 10px; } .footer-cta { width: 100%; text-align: center; } } /* Layout */ .ws-section { padding: clamp(2rem, 4vw, 4rem) 0; } .ws-wrap { width: min(1100px, 92vw); margin: 0 auto; } /* Parchment panel with subtle grunge */ .ws-parchment { background: radial-gradient(140% 100% at 50% 0%, rgba(22,30,25,.20), transparent 60%), linear-gradient(#e6dec9,#d9cfb1); color: #0c1a13; } /* Headings in your witchy vibe */ .ws-head h2 { font-family: "Cinzel Decorative", "IM Fell English SC", serif; letter-spacing: .02em; font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 0 0 .25rem; color: #0f2b1c; text-shadow: 0 1px 0 #fff, 0 0 10px rgba(16, 57, 36, .15); } .ws-sub { font-family: "IM Fell English SC", serif; opacity: .8; margin: 0 0 1.25rem; } /* Rune frame using an inline SVG border-image */ .rune-frame { --ink: #0b110d; /* black-green ink */ --gild: #bfa258; /* muted gold for accents */ margin: 0; border: 20px solid transparent; border-image: url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ \ \ ᚠᚱᚨᚾᚳ\ ᚹᛁᛋᚲ\ \ ") 30 round; background: radial-gradient(120% 100% at 50% 10%, rgba(191,162,88,.18), transparent 50%), rgba(255,255,255,.35); box-shadow: inset 0 0 0 1px rgba(11,17,13,.25), 0 12px 30px rgba(0,0,0,.22); border-radius: 14px; overflow: hidden; } /* Image & caption */ .rune-frame picture, .rune-frame img { display:block; width:100%; height:auto; } .ws-cap { font-family: "IM Fell English SC", serif; padding: .75rem 1rem 1rem; color: #1a2a21; font-size: .95rem; background: linear-gradient(transparent, rgba(0,0,0,.04)); border-top: 1px solid rgba(11,17,13,.15); } /* Dark-mode support if your site flips themes */ @media (prefers-color-scheme: dark) { .ws-parchment { background: radial-gradient(140% 100% at 50% 0%, rgba(191,162,88,.12), transparent 60%), linear-gradient(#0e1411,#0b120e); color: #e9e4d3; } .ws-head h2 { color: #d7c89a; text-shadow: none; } .ws-cap { color:#e9e4d3; border-top-color: rgba(223,214,179,.2); } } /* === Mobile Responsiveness Fixes === */ @media screen and (max-width: 768px) { body { overflow-x: hidden; } header, footer, .hero, .callout, .features, .rune-frame { max-width: 100vw !important; overflow-x: hidden !important; padding-left: 1rem !important; padding-right: 1rem !important; box-sizing: border-box; } .hero h1, .hero h2 { font-size: 1.6rem !important; line-height: 1.3; } .hero p { font-size: 1rem !important; line-height: 1.4; } .footer-content, footer, header { display: flex; flex-direction: column; align-items: center; text-align: center; } nav ul { flex-direction: column; gap: 1rem; } } .nav .brand{ font-size: 14px; } .nav .brand .logo, .logo{ width:22px !important; height:22px !important; } /* keep nav links in ONE ROW, scroll if needed */ .nav nav{ order: 3; display: flex !important; width: 100%; overflow-x: auto !important; white-space: nowrap !important; gap: 8px !important; margin-top: 6px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav nav::-webkit-scrollbar{ display:none; } .nav nav a, .nav .cta{ flex: 0 0 auto; padding: 8px 10px !important; border-radius: 8px !important; font-size: .92rem !important; } .nav .cta{ padding: 8px 12px !important; } /* HERO: trim height & padding, remove floating effects */ .hero{ min-height: 44vh !important; padding: 0 !important; overflow: visible !important; } .hero-inner{ max-width: 100% !important; padding: 18px 14px !important; text-align: center !important; } .hero h1{ font-size: clamp(20px, 5.5vw, 28px) !important; line-height: 1.2 !important; } .hero p{ font-size: 1rem !important; line-height: 1.4 !important; } .hero-logo{ width: clamp(120px, 38vw, 180px) !important; margin: 0 auto 10px !important; } .rune-sparks{ display: none !important; } .hero-arcane::before, .hero-arcane::after{ display: none !important; } /* general section padding guardrails so nothing overflows */ header, footer, .callout, .features, .rune-frame{ max-width: 100vw !important; overflow-x: hidden !important; padding-left: 1rem !important; padding-right: 1rem !important; box-sizing: border-box !important; } } /* === Final Features Grid === */ section.grid.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: stretch; justify-items: stretch; } @media (max-width: 1200px) { section.grid.features { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { section.grid.features { grid-template-columns: 1fr; } }