/* Codexia Media — shared stylesheet Dark theme, Syne (headings) + Outfit (body), orange brand accent by default; product pages override --accent inline on . */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&display=swap'); :root{ --bg:#08090c; --bg-elev:#0f1116; --bg-elev-2:#14161d; --border:#1e212b; --text:#f0f1f5; --text-dim:#9aa0ac; --text-faint:#5c6270; --accent:#f07800; --accent-2:#c96800; --radius:10px; --radius-sm:6px; --maxw:1180px; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--text); font-family:'Outfit', sans-serif; font-weight:400; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Syne', sans-serif; font-weight:800; letter-spacing:-0.03em; line-height:1.05; margin:0 0 .5em; } p{margin:0 0 1em;color:var(--text-dim);} a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} ul{margin:0;padding:0;list-style:none;} .container{max-width:var(--maxw);margin:0 auto;padding:0 28px;} /* background glow */ body::before{ content:""; position:fixed; inset:0; background: radial-gradient(700px 420px at 78% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%), radial-gradient(600px 380px at 10% 8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%); pointer-events:none; z-index:0; } /* repeating pattern texture, site-wide — sits behind the glow + content, subtle enough not to compete with foreground text */ body::after{ content:""; position:fixed; inset:0; background-image:url('img/pattern-tile.png'); background-repeat:repeat; background-size:180px 180px; opacity:.14; pointer-events:none; z-index:0; } /* ---------- kicker / section labels ---------- */ .kicker{ display:inline-block; font-family:'Outfit',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:18px; } /* ---------- nav ---------- */ .nav{ position:sticky; top:0; z-index:50; background:rgba(8,9,12,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); } .nav__inner{ display:flex; align-items:center; justify-content:space-between; height:68px; } .nav__brand{display:flex;align-items:center;gap:10px;font-family:'Syne',sans-serif;font-weight:800;font-size:16px;letter-spacing:.02em;} .nav__brand img{height:28px;width:auto;} .nav__links{display:flex;align-items:center;gap:30px;} .nav__links a{ font-size:13.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); transition:color .15s; } .nav__links a:hover,.nav__links a.is-active{color:var(--text);} .nav__products{position:relative;} .nav__products-panel{ display:none; position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-50%); min-width:220px; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); padding:8px; box-shadow:0 20px 40px rgba(0,0,0,.5); } .nav__products:hover .nav__products-panel,.nav__products:focus-within .nav__products-panel{display:block;} .nav__products-panel a{ display:flex;align-items:center;gap:10px; padding:10px 12px;border-radius:var(--radius-sm); font-size:13px;text-transform:none;letter-spacing:0;font-weight:500;color:var(--text); } .nav__products-panel a:hover{background:var(--bg-elev-2);} .nav-dot{width:8px;height:8px;border-radius:50%;flex:none;} .nav__cta{ padding:10px 18px; border-radius:var(--radius-sm); background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#fff; font-size:13px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; } .nav__toggle{display:none;background:none;border:1px solid var(--border);border-radius:8px;color:var(--text);width:40px;height:40px;font-size:18px;} @media (max-width:860px){ .nav__links{ position:fixed; top:68px;left:0;right:0; height:calc(100vh - 68px); background:var(--bg); flex-direction:column; align-items:stretch; padding:20px 28px; gap:4px; display:none; overflow-y:auto; border-top:1px solid var(--border); z-index:60; } .nav__links.is-open{display:flex;} .nav__links a{padding:14px 0;border-bottom:1px solid var(--border);} .nav__products-panel{position:static;transform:none;display:block !important;border:none;padding:0 0 0 14px;background:none;box-shadow:none;margin-top:4px;} .nav__toggle{display:block;} } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 26px; border-radius:var(--radius-sm); font-size:14px;font-weight:600;letter-spacing:.02em; border:1px solid transparent; cursor:pointer; } .btn--primary{background:linear-gradient(180deg,var(--accent),var(--accent-2));color:#fff;} .btn--ghost{background:transparent;border-color:var(--border);color:var(--text);} .btn--ghost:hover{border-color:var(--accent);} .btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;} /* ---------- hero ---------- */ .hero{position:relative;z-index:1;padding:96px 0 64px;} .hero h1{font-size:clamp(40px,6vw,80px);} .hero .accent{color:var(--accent);} .hero__lead{max-width:620px;font-size:17px;margin-top:22px;} .hero__badge-row{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap;} /* ---------- stats ---------- */ .stats{ position:relative;z-index:1; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:26px 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:20px; } .stats strong{display:block;font-family:'Syne',sans-serif;font-weight:800;font-size:26px;color:var(--text);} .stats span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);} /* ---------- marquee ---------- */ .marquee{ position:relative;z-index:1; overflow:hidden; border-bottom:1px solid var(--border); padding:16px 0; white-space:nowrap; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee__track{display:inline-flex;align-items:center;gap:14px;animation:scroll 34s linear infinite;font-size:12.5px;letter-spacing:.1em;color:var(--text-faint);} .marquee__track .dot{color:var(--accent);} @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* ---------- sections ---------- */ .section{position:relative;z-index:1;padding:88px 0;} .section--tight{padding:64px 0;} .section-head{max-width:640px;margin-bottom:52px;} .section-head h2{font-size:clamp(28px,4vw,42px);} /* ---------- product grid (home) ---------- */ .product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;} .product-card{ display:block; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); padding:26px; transition:transform .15s, border-color .15s, background .15s; position:relative; overflow:hidden; } .product-card::before{ content:"";position:absolute;inset:0 0 auto 0;height:3px; background:var(--card-accent); } .product-card:hover{transform:translateY(-4px);border-color:var(--card-accent);background:var(--card-accent-soft);} .product-card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;} .product-card__icon{font-size:22px;} .product-card__name{font-size:20px;margin-bottom:8px;} .product-card__tagline{font-size:14px;margin-bottom:18px;} .product-card__link{font-size:13px;font-weight:600;color:var(--card-accent);} /* audience pills */ .pill{ display:inline-flex;align-items:center; font-size:10.5px;font-weight:700;letter-spacing:.08em; padding:5px 10px;border-radius:100px; border:1px solid var(--border); color:var(--text-dim); white-space:nowrap; } /* Colour comes from the --pill-color custom property set inline per tag (see AUDIENCE_COLOR in products.js) — add a new discipline there and it works here automatically, no new CSS needed. */ .pill{color:var(--pill-color,var(--text-dim));border-color:color-mix(in srgb, var(--pill-color,var(--border)) 35%, transparent);background:color-mix(in srgb, var(--pill-color,transparent) 8%, transparent);} /* ---------- feature list ---------- */ .feature-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;} .feature-list li{ display:flex;gap:12px;align-items:flex-start; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; font-size:14.5px; color:var(--text); } .feature-list li::before{content:"✓";color:var(--accent);font-weight:700;flex:none;} /* ---------- screenshot placeholder ---------- */ .shot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;} .shot-placeholder{ aspect-ratio:16/10; border:1px dashed var(--border); border-radius:var(--radius); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:8px; color:var(--text-faint); font-size:13px; background: repeating-linear-gradient(45deg, var(--bg-elev) 0 10px, var(--bg-elev-2) 10px 20px); } .shot-placeholder span{font-size:26px;} /* ---------- pricing / cta card ---------- */ .buy-card{ background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); padding:38px; display:flex;flex-wrap:wrap;gap:28px;align-items:center;justify-content:space-between; } .buy-card__price{font-family:'Syne',sans-serif;font-weight:800;font-size:44px;color:var(--accent);} .buy-card__price sub{font-family:'Outfit',sans-serif;font-weight:400;font-size:13px;color:var(--text-faint);} /* ---------- who it's for / steps ---------- */ .numbered{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;} .numbered li{padding:0;} .numbered em{ display:block;font-style:normal;font-family:'Syne',sans-serif;font-weight:800; color:var(--accent);font-size:14px;margin-bottom:10px; } .numbered h4{font-size:17px;margin-bottom:8px;} .numbered p{font-size:14px;margin:0;} /* ---------- FAQ ---------- */ .faq details{ border-bottom:1px solid var(--border); padding:18px 0; } .faq summary{ cursor:pointer;font-size:15.5px;font-weight:500;color:var(--text); list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px; } .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"+";color:var(--accent);font-size:20px;} .faq details[open] summary::after{content:"–";} .faq p{margin-top:12px;font-size:14.5px;} /* ---------- footer ---------- */ .footer{ position:relative;z-index:1; border-top:1px solid var(--border); padding:52px 0 34px; } .footer__top{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;margin-bottom:34px;} .footer__brand{max-width:280px;} .footer h5{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:14px;} .footer a{display:block;font-size:14px;color:var(--text-dim);padding:6px 0;} .footer a:hover{color:var(--text);} .footer__bottom{ border-top:1px solid var(--border); padding-top:22px; font-size:12.5px;color:var(--text-faint); display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px; } /* ---------- misc ---------- */ .divider{height:1px;background:var(--border);margin:64px 0;} .two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;} @media (max-width:820px){.two-col{grid-template-columns:1fr;}} .code-panel{ background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius); padding:22px 24px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:#9dd6ff; overflow:auto; } .code-panel .c1{color:var(--accent);} .code-panel .c2{color:#6b7280;} .back-link{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-dim);margin-bottom:26px;width:fit-content;} .back-link:hover{color:var(--accent);} .app-strip{ display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px; background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius); padding:20px 24px;margin-top:20px; } .app-strip span{font-size:13.5px;color:var(--text-dim);} /* ---------- coming soon ---------- */ .soon-tag{ font-size:12.5px;font-weight:700;letter-spacing:.04em; color:var(--text-dim); } .nav__cta--soon{ background:none; border:1px solid var(--border); color:var(--text-dim); } /* ---------- contact form ---------- */ .form-field{margin-bottom:20px;} .form-field label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px;} .form-field input,.form-field textarea{ width:100%; background:var(--bg-elev); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px 14px; color:var(--text); font-family:'Outfit',sans-serif; font-size:14.5px; } .form-field input:focus,.form-field textarea:focus{outline:none;border-color:var(--accent);} .form-field textarea{resize:vertical;min-height:140px;} .form-note{font-size:12.5px;color:var(--text-faint);margin-top:14px;} .form-success{ display:none; border:1px solid var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); border-radius:var(--radius); padding:22px 24px; margin-top:20px; } /* ---------- inline "register interest" form (buy-card, coming-soon state) ---------- */ .interest-form__row{display:flex;gap:10px;flex-wrap:wrap;} .interest-form input[type="email"]{ flex:1; min-width:180px; background:var(--bg-elev-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:13px 14px; color:var(--text); font-family:'Outfit',sans-serif; font-size:14.5px; } .interest-form input[type="email"]:focus{outline:none;border-color:var(--accent);} .interest-form .btn{padding:13px 20px;} .form-success--inline{margin-top:0;padding:16px 20px;font-size:13.5px;} .form-success--inline strong{color:var(--text);}