/* ========================= TYPE & THEME — Premium wellness vibe ========================= */ :root{ /* Display (headers): Josefin Sans — ALL CAPS via CSS */ --display-font: "Josefin Sans", sans-serif; /* Body: try Optima first (system font) then clean Google fallback */ --body-font: Optima, "Work Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Base darks (refined for gold↔lavender aura) */ --bg-ink:#0C0F14; /* deep ink */ --bg-deep:#121722; /* charcoal-navy */ --bg-mid:#1A2030; /* mid layer */ /* Text */ --text:#e5e7eb; --muted:#a8b0bd; --ink:#11141A; --white:#ffffff; /* Surfaces */ --glass: rgba(255,255,255,.04); --glass-border: rgba(255,255,255,.10); --glass-strong: rgba(255,255,255,.07); /* Accents */ --accent: #a7c2ff; /* moonlight blue (kept, but de-emphasised) */ --accent-2: #91eac9; /* mint accent */ /* New brand accents */ --lavender:#AFA6D4; /* soft purple */ --teal:#7ED3C8; /* nature breath */ --teal-dim: rgba(126,211,200,.07); /* Metallic gold triad */ --gold-1:#C8A96B; /* body */ --gold-2:#EAD9B1; /* highlight */ --gold-3:#8A6B3A; /* shadow */ } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family: var(--body-font); color: var(--text); /* Premium background: gold↔lavender auras + teal breath over deep charcoal */ background: radial-gradient(80% 60% at 15% 0%, rgba(175,166,212,0.10) 0%, rgba(175,166,212,0.00) 70%), radial-gradient(70% 50% at 85% 10%, rgba(200,169,107,0.10) 0%, rgba(200,169,107,0.00) 70%), radial-gradient(110% 80% at 50% 110%, rgba(126,211,200,0.06) 0%, rgba(126,211,200,0.00) 70%), linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-mid) 55%, var(--bg-ink) 100%); line-height:1.65; font-size: 16px; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } .container{max-width:1100px;margin:0 auto;padding:0 20px} /* ========================= HEADINGS — Display font, caps, gentle outline for contrast ========================= */ h1, h2, h3, .brand, .section h2 { font-family: var(--display-font); letter-spacing: 0.35px; text-transform: uppercase; /* per request: headers in caps */ text-shadow: -1px -1px 0 rgba(0,0,0,.6), 1px -1px 0 rgba(0,0,0,.6), -1px 1px 0 rgba(0,0,0,.6), 1px 1px 0 rgba(0,0,0,.6); } /* Subtle premium header accent: 2px gold→lavender underline */ .section h2, h2.section-title, .media-title{ position: relative; display: inline-block; padding-bottom: 6px; } .section h2::after, h2.section-title::after, .media-title::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 999px; opacity: .8; background: linear-gradient(90deg, var(--gold-1) 0%, var(--lavender) 65%, rgba(255,255,255,0) 100%); } .hero h1{ line-height: 1.05; font-size: clamp(36px, 6vw, 64px); } /* Optional: alternative header accent styles (toggle by adding class to ) .hdr-first-letter → first letter metallic .hdr-glow → soft gold/purple glow instead of underline */ .hdr-first-letter .section h2::first-letter, .hdr-first-letter h2.section-title::first-letter{ background: linear-gradient(135deg, var(--gold-2), var(--gold-1) 55%, var(--gold-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hdr-glow .section h2::after, .hdr-glow h2.section-title::after{ display: none; } .hdr-glow .section h2, .hdr-glow h2.section-title{ text-shadow: 0 0 4px rgba(202,174,115,.22), 0 0 10px rgba(175,166,212,.18), 0 1px 0 rgba(0,0,0,.7); } /* ========================= HEADER ========================= */ .site-header{ position:sticky;top:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:14px 20px; background:rgba(12,15,20,.65); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.06) } .brand{color:#fff;font-weight:800;letter-spacing:.5px;text-decoration:none;font-size:20px} .site-nav{display:flex;gap:16px;align-items:center} .site-nav a{color:var(--text);text-decoration:none;opacity:.92} .site-nav a:hover{color:#fff;opacity:1} .nav-toggle{display:none;background:none;border:none;color:var(--text);font-size:22px} /* ========================= BUTTONS ========================= */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 18px;border-radius:999px;text-decoration:none;color:var(--text); border:1px solid rgba(255,255,255,.25);font-weight:600; transition:background .2s,color .2s,border-color .2s, transform .15s ease; } .btn:hover{border-color:rgba(255,255,255,.4); transform: translateY(-1px);} .btn-lg{padding:14px 22px;font-size:16px} .btn-primary{background:var(--white);color:var(--ink);border:none;font-weight:700} .btn-primary:hover{filter:brightness(.98)} .btn-outline{background:transparent;color:var(--text)} .site-header .btn-primary, .site-nav .btn-primary{background:var(--white)!important;color:var(--ink)!important;border:none!important} /* ========================= HERO & EFFECTS ========================= */ .hero{position:relative;padding:88px 20px 56px;overflow:hidden} .vignette{position:absolute;inset:-10%;background:radial-gradient(100% 70% at 50% 10%, rgba(255,255,255,0) 0%, rgba(0,0,0,.24) 80%);z-index:0;pointer-events:none} .glitter{position:absolute;inset:0;pointer-events:none;z-index:0;background-image:url('data:image/svg+xml;utf8,');mix-blend-mode:screen} .shimmer{position:absolute;inset:-30% -60%;z-index:0;pointer-events:none;background:linear-gradient(120deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.05) 50%, rgba(255,255,255,0) 65%);transform:translateX(-30%);animation:shimmer 20s linear infinite} @keyframes shimmer{0%{transform:translateX(-30%)}100%{transform:translateX(30%)}} .hero-inner{position:relative;z-index:1;max-width:900px;margin:0 auto;text-align:center} .lead{font-size:clamp(16px,2.2vw,18px);color:var(--muted);margin:0 auto 18px} .hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:8px 0 8px} .watch-link a{color:#fff;text-decoration:underline;text-underline-offset:3px;opacity:.95} /* ========================= SECTIONS ========================= */ .section{padding:60px 0} .section.alt{ background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05) } .section h2{font-size:26px;margin:0 0 14px;letter-spacing:.2px} .section h4{margin:12px 0 6px;font-size:16px;letter-spacing:.2px} .section-subtitle{ font-family: var(--display-font); text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin: 10px 0 14px 0; } /* ========================= CARDS ========================= */ .cards{display:grid;gap:18px} .cards.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .cards.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .card{ background:var(--glass); border:1px solid var(--glass-border); border-radius:14px;padding:18px; transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease; } .card h3{margin-top:0;font-weight:700} .card:hover{ border-color: rgba(202,174,115, 0.45); /* gold tint */ box-shadow: 0 10px 26px rgba(0,0,0,.18); transform: translateY(-1px); } .price{font-size:20px;margin:6px 0 10px;color:#fff} /* ========================= VIDEO — metallic micro-frame ========================= */ .video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .video-card{margin:0} .video-wrap{ position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:14px; background:rgba(255,255,255,.02); border:1px solid rgba(202,174,115,.38); /* metallic gold frame */ box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.02); } .video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0} /* ========================= LISTS ========================= */ .list{list-style:none;padding:0;margin:0;display:grid;gap:6px;color:var(--muted)} /* ========================= MEDIA — ultra-compact logo cloud ========================= */ .media { padding-block: clamp(16px, 2.2vw, 28px); } .media-title { text-align: center; font-size: clamp(18px, 2.1vw, 24px); margin: 0 0 10px 0; } .logo-cloud { display: grid; grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); gap: clamp(6px, 1vw, 10px); max-width: 680px; margin: 0 auto; justify-items: center; align-items: start; } .logo { width: 42px; height: 42px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; border-radius: 9px; background: rgba(255,255,255,0.10); transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease; } .logo img { width: 20px; height: 20px; display: block; filter: grayscale(100%) contrast(1.05) opacity(0.9); transition: filter 140ms ease; } .logo-label { margin-top: 4px; font-size: 10px; line-height: 1; color: rgba(255,255,255,0.66); text-align: center; max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hidden-label { display: none; } .logo:hover, .logo:focus-visible { transform: translateY(-1px); background: rgba(255,255,255,0.18); box-shadow: 0 4px 10px rgba(0,0,0,0.12); } .logo:hover img, .logo:focus-visible img { filter: grayscale(0%) contrast(1) opacity(1); } /* ========================= CONTACT & FORM ========================= */ .contact{text-align:center} .contact-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:10px} .contact-actions .linkedin{border-color:rgba(10,102,194,.6)} .contact-actions .linkedin:hover{background:#0a66c2;color:#fff;border-color:#0a66c2} .small { font-size: 0.92rem; } .poa-wrap { margin-top: 24px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px; padding: 16px; } .poa-form .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .poa-form label { display: grid; gap: 6px; } .poa-form input, .poa-form textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; } .poa-form .contact-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; } .poa-form .status { margin-top: 6px; opacity: .9; font-size: .95rem; } /* ========================= ABOUT — two-column with small side photo ========================= */ .about-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; align-items: start; } .about-photo{ justify-self: end; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 14px; padding: 8px; } .about-photo img{ display:block; width: 220px; /* subtle small side image */ height: auto; border-radius: 12px; } /* ========================= SERVICES — diagram styles (with metallic frames) ========================= */ .service-flow{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 16px; } .flow-step{ position: relative; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)), radial-gradient(120% 140% at 80% 0%, var(--teal-dim) 0%, rgba(126,211,200,0) 50%); border-radius: 14px; padding: 16px 14px 14px 14px; border: 1px solid rgba(202,174,115,.38); /* metallic gold frame */ box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.02); } .flow-step h4{ margin: 6px 0 6px 0; font-weight: 700; } .flow-step p{ margin: 0; color: var(--muted); } .flow-badge{ position:absolute; top:-10px; left:-10px; width: 32px; height: 32px; border-radius: 50%; display:flex; align-items:center; justify-content:center; font-family: var(--display-font); font-weight:700; background: linear-gradient(135deg, var(--gold-2) 10%, var(--gold-1) 55%, var(--gold-3) 110%); color:#0a0f14; border: 1px solid rgba(0,0,0,0.35); box-shadow: 0 6px 14px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,.12); } /* Use cases */ .use-cases{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 24px; } .pill{ display:inline-flex; align-items:center; padding:8px 12px; background: rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); color:#fff; border-radius: 999px; font-weight:600; letter-spacing: .2px; transition: border-color .2s ease, background-color .2s ease; } .pill:hover{ border-color: rgba(202,174,115,.45); background-color: rgba(255,255,255,0.10); } /* Metallic hairline divider (optional) */ .hr-metal{ height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 15%, rgba(202,174,115,.45) 50%, rgba(255,255,255,.06) 85%, rgba(255,255,255,0) 100%); border: 0; margin: 18px 0; } /* Nature rationale spacing */ .rationale{ margin: 6px 0 18px; } /* ========================= FOOTER ========================= */ .site-footer{padding:22px 0;border-top:1px solid rgba(255,255,255,.06);background:rgba(12,15,20,.6)} .footer-inner{display:flex;align-items:center;justify-content:space-between;gap:10px} .footer-inner nav{display:flex;gap:14px} .footer-inner a{text-decoration:none;color:var(--muted)} .footer-inner a:hover{color:var(--text)} /* ========================= MOBILE NAV ========================= */ @media (max-width:860px){ .nav-toggle{display:inline-block} .site-nav{position:fixed;right:16px;top:64px;background:rgba(12,15,20,.96);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;display:none;flex-direction:column;min-width:240px} .site-nav.show{display:flex} .about-grid{ grid-template-columns: 1fr; } .about-photo{ justify-self: start; } } /* Even tighter on very small screens for logo cloud */ @media (max-width: 420px) { .logo-cloud { grid-template-columns: repeat(auto-fit, minmax(38px, 1fr)); gap: 6px; max-width: 360px; } .logo { width: 38px; height: 38px; } .logo img { width: 18px; height: 18px; } }