/* ============================================================================ Ella 101 — marketing site stylesheet ("Cinematic Ink", LOCKED theme) Navy #070D1A shell · electric amber #FF8A3D · Archivo (Google Fonts, loaded per-page in ). Self-contained: no external CSS. Mirrors the app's design system (engine theme.css idioms) without importing it. ========================================================================== */ :root{ /* navy environment */ --navy-950:#050A14; --navy-900:#070D1A; --navy-800:#0B1424; --navy-700:#101B30; --navy-600:#16243E; --navy-500:#1E3258; --surface:var(--navy-700); --surface-2:var(--navy-600); --glass:rgba(11,20,36,.78); /* ink / text */ --on-dark:#F3F7FE; --on-dark-muted:#C7D4EA; --on-dark-dim:#8AA2C2; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16); /* firelight amber */ --accent:#FF8A3D; --accent-bright:#FFB066; --accent-deep:#E2702A; --accent-soft:rgba(255,138,61,.13); --accent2:#FFC457; --grad-primary:linear-gradient(180deg,#FFB066 0%,#FF8A3D 100%); --mesh:radial-gradient(1200px 620px at 82% -12%,rgba(255,138,61,.11),transparent 60%), radial-gradient(1000px 760px at -8% 8%,rgba(45,91,208,.12),transparent 55%); --shadow:0 2px 6px rgba(0,0,0,.40),0 18px 50px rgba(0,0,0,.50); --shadow-lg:0 4px 12px rgba(0,0,0,.45),0 30px 80px rgba(0,0,0,.55); --glow-amber:0 8px 28px rgba(255,138,61,.38); --ring:0 0 0 3px rgba(255,138,61,.32); --font:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --maxw:1140px; --radius:16px; --radius-sm:12px; --radius-lg:22px; --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--navy-900);background-image:var(--mesh);background-attachment:fixed; color:var(--on-dark);font-family:var(--font);font-size:17px;line-height:1.7; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden; } img{max-width:100%;height:auto;display:block} h1,h2,h3,h4{font-family:var(--font);color:#fff;font-weight:800;line-height:1.1;letter-spacing:-.018em;margin:0 0 .45em} h1{font-size:clamp(2.1rem,5.2vw,3.6rem)} h2{font-size:clamp(1.55rem,3.2vw,2.3rem)} h3{font-size:1.2rem;font-weight:700} p{margin:0 0 1rem;overflow-wrap:break-word} a{color:var(--accent-bright);text-decoration:none;transition:color .15s} a:hover{color:var(--accent)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,28px)} .muted{color:var(--on-dark-muted)} .dim{color:var(--on-dark-dim)} .amber{color:var(--accent)} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px} ::selection{background:var(--accent);color:var(--navy-900)} .eyebrow{ text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;font-weight:700; color:var(--accent);display:inline-block;margin-bottom:.7rem; } .eyebrow::after{content:"";display:block;width:32px;height:2px;background:var(--accent);margin-top:.5rem;border-radius:2px} /* ---------- beta banner (site-wide, loud on purpose) ---------- */ .betabar{ background:linear-gradient(90deg,#E2702A 0%,#FF8A3D 45%,#FFC457 100%); color:var(--navy-900);text-align:center;font-weight:700;font-size:.95rem; padding:.65rem clamp(14px,3vw,24px);line-height:1.45; } .betabar b{font-weight:900;letter-spacing:.04em} .betabar a{color:var(--navy-900);text-decoration:underline;font-weight:800} .betabar a:hover{color:var(--navy-700)} /* ---------- nav ---------- */ .nav{ position:sticky;top:0;z-index:50;background:var(--glass); backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line); } .nav .wrap{display:flex;align-items:center;gap:1.1rem;min-height:68px;flex-wrap:wrap;padding-top:.4rem;padding-bottom:.4rem} .brand{display:inline-flex;align-items:baseline;gap:.4rem;font-weight:800;font-size:1.35rem;color:#fff;letter-spacing:-.02em} .brand .num{color:var(--accent);font-weight:900} .brand:hover{color:#fff} .nav .links{display:flex;align-items:center;gap:1.15rem;margin-left:auto;flex-wrap:wrap} .nav .links a.lnk{font-size:.92rem;color:var(--on-dark);font-weight:500;padding:.25rem 0} .nav .links a.lnk:hover{color:var(--accent-bright)} .navtoggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--line-strong); color:var(--on-dark);border-radius:10px;padding:.45rem .7rem;font:inherit;font-size:1rem;cursor:pointer} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--font);font-weight:700;font-size:.98rem;border-radius:var(--radius-sm); padding:.8rem 1.5rem;cursor:pointer;border:1.5px solid transparent;text-decoration:none; transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s,color .15s,border-color .15s; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.99)} .btn-primary{background:var(--grad-primary);color:var(--navy-900);box-shadow:var(--glow-amber)} .btn-primary:hover{box-shadow:0 12px 36px rgba(255,138,61,.52);color:var(--navy-900)} .btn-ghost{background:transparent;border-color:var(--line-strong);color:#fff} .btn-ghost:hover{border-color:var(--accent);background:var(--accent-soft);color:#fff} .btn.sm{padding:.55rem 1rem;font-size:.88rem} .btn-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center} /* ---------- sections ---------- */ .sec{padding:clamp(64px,9vw,112px) 0;position:relative} .sec.tint{background:linear-gradient(165deg,var(--navy-800) 0%,var(--navy-900) 70%)} .sec-head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3.2rem)} .sec-head p{color:var(--on-dark-muted);font-size:1.06rem} /* ---------- hero ---------- */ .hero{padding:clamp(64px,9vw,120px) 0 clamp(48px,6vw,84px);position:relative;overflow:hidden} .hero::before{content:"";position:absolute;inset:0; background:radial-gradient(1000px 420px at 80% -10%,rgba(255,138,61,.16),transparent 60%);pointer-events:none} .hero .wrap{position:relative} .hero .lede{font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:44rem;color:var(--on-dark-muted)} .hero h1 .amber{white-space:nowrap} .hero .subnote{margin-top:1.1rem;font-size:.9rem;color:var(--on-dark-dim)} .hero .subnote b{color:var(--accent-bright)} .name-note{ display:inline-flex;align-items:center;gap:.55rem;margin:.4rem 0 1.3rem;padding:.45rem .95rem; background:var(--accent-soft);border:1px solid rgba(255,138,61,.3);border-radius:999px; color:var(--accent-bright);font-weight:600;font-size:.9rem;flex-wrap:wrap; } /* ---------- honest capability strip ---------- */ .caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.9rem;margin-top:clamp(2rem,4vw,3rem)} .cap{display:flex;gap:.7rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius-sm);padding:.85rem 1rem;font-size:.93rem;color:var(--on-dark-muted);line-height:1.55} .cap .tick{color:var(--accent);font-weight:900;flex:0 0 auto;line-height:1.55} .cap b{color:var(--on-dark)} /* ---------- screenshots ---------- */ .shot{margin:clamp(2rem,4vw,3rem) 0 0;border-radius:var(--radius-lg);overflow:hidden; border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);background:var(--navy-800)} .shot img{width:100%} .shot figcaption{font-size:.8rem;color:var(--on-dark-dim);padding:.6rem 1rem;border-top:1px solid var(--line);background:var(--navy-800)} .shot.inline{margin-top:1.4rem} /* ---------- how it works ---------- */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.1rem;counter-reset:step} .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:1.5rem 1.4rem;transition:transform .18s var(--ease),border-color .18s,box-shadow .18s} .step:hover{transform:translateY(-3px);border-color:rgba(255,138,61,.45);box-shadow:var(--shadow)} .step .n{display:inline-grid;place-items:center;width:2.3rem;height:2.3rem;border-radius:11px; background:var(--accent-soft);border:1px solid rgba(255,138,61,.35);color:var(--accent-bright); font-weight:800;font-size:1.05rem;margin-bottom:.9rem} .step h3{font-size:1.05rem;margin-bottom:.35rem} .step p{font-size:.92rem;color:var(--on-dark-muted);margin:0;line-height:1.6} /* ---------- modes ---------- */ .modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1.1rem} .mode{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.55rem; transition:transform .18s var(--ease),border-color .18s,box-shadow .18s} .mode:hover{transform:translateY(-3px);border-color:rgba(255,138,61,.5);box-shadow:var(--shadow)} .mode .ico{width:52px;height:52px;border-radius:14px;background:var(--accent-soft); border:1px solid rgba(255,138,61,.35);display:grid;place-items:center;font-size:1.5rem} .mode h3{display:flex;align-items:center;gap:.5rem;font-size:1.08rem;margin:0} .mode p{font-size:.92rem;color:var(--on-dark-muted);margin:0;line-height:1.6} .pill{font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;font-weight:800; border-radius:999px;padding:.18rem .55rem;background:var(--accent);color:var(--navy-900)} .pill.ghost{background:transparent;border:1px solid var(--line-strong);color:var(--on-dark-dim)} .owners-note{margin-top:1.6rem;font-size:.88rem;color:var(--on-dark-dim);max-width:56ch} /* ---------- voice ---------- */ .voicegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.1rem} .vcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.4rem} .vcard h3{font-size:1.05rem} .vcard p{font-size:.93rem;color:var(--on-dark-muted);margin:0;line-height:1.62} .vstat{display:inline-flex;gap:.5rem;align-items:baseline;margin:0 .6rem .6rem 0;padding:.5rem 1rem; background:var(--surface);border:1px solid var(--line);border-radius:12px} .vstat b{color:var(--accent-bright);font-size:1.35rem;line-height:1;font-weight:800} .vstat span{font-size:.8rem;color:var(--on-dark-dim)} /* ---------- parents ---------- */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start} .split .shot{margin-top:0} .plist{list-style:none;margin:0 0 1.2rem;padding:0} .plist li{position:relative;padding:.45rem 0 .45rem 1.75rem;color:var(--on-dark-muted);font-size:.97rem;line-height:1.6} .plist li::before{content:"";position:absolute;left:0;top:.95em;width:.95rem;height:.95rem;border-radius:5px; background:var(--accent-soft);border:1px solid rgba(255,138,61,.45);transform:translateY(-50%)} .plist li::after{content:"";position:absolute;left:.30rem;top:.95em;width:.36rem;height:.2rem; border-left:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:translateY(-80%) rotate(-45deg)} .plist b{color:var(--on-dark)} .quiet-quote{border-left:3px solid var(--accent);padding:.4rem 0 .4rem 1.1rem;margin:1.3rem 0; color:var(--on-dark-muted);font-size:.95rem;font-style:italic} /* ---------- pricing ---------- */ .prices{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.3rem;align-items:stretch} .price{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:2rem 1.7rem;display:flex;flex-direction:column;gap:.4rem;position:relative} .price.now{border-color:rgba(255,138,61,.65);box-shadow:0 0 0 1px rgba(255,138,61,.25),var(--shadow)} .price .tag{position:absolute;top:-13px;left:1.4rem} .price .amount{font-size:clamp(2.3rem,4vw,3rem);font-weight:900;color:#fff;line-height:1;margin:.55rem 0 .1rem;letter-spacing:-.02em} .price .amount small{font-size:1rem;font-weight:600;color:var(--on-dark-dim);letter-spacing:0} .price .per{font-size:.88rem;color:var(--on-dark-dim);margin-bottom:.9rem} .price ul{list-style:none;margin:0 0 1.3rem;padding:0} .price li{padding:.34rem 0 .34rem 1.5rem;position:relative;font-size:.93rem;color:var(--on-dark-muted);line-height:1.55} .price li::before{content:"—";position:absolute;left:0;color:var(--accent)} .price .btn{margin-top:auto} .anchor-note{margin-top:1.6rem;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:var(--radius-sm);padding:1.1rem 1.3rem;font-size:.93rem;color:var(--on-dark-muted);max-width:62ch;line-height:1.65} .anchor-note b{color:var(--on-dark)} .honesty-note{margin-top:1.1rem;font-size:.85rem;color:var(--on-dark-dim);max-width:62ch} /* ---------- CTA strip ---------- */ .ctastrip{background:linear-gradient(165deg,var(--navy-700) 0%,var(--navy-900) 80%); border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center} .ctastrip .wrap{max-width:46rem} .ctastrip h2{margin-bottom:.5rem} .ctastrip p{color:var(--on-dark-muted)} .ctastrip .btn-row{justify-content:center;margin-top:1.4rem} /* ---------- legal / prose pages ---------- */ .prose{max-width:72ch;margin:0 auto;padding:clamp(48px,7vw,84px) clamp(18px,4vw,28px)} .prose h1{font-size:clamp(1.9rem,4vw,2.7rem)} .prose h2{font-size:1.3rem;margin-top:2.4rem} .prose h3{font-size:1.05rem;margin-top:1.6rem} .prose p,.prose li{color:var(--on-dark-muted);font-size:.99rem} .prose ul{padding-left:1.2rem;margin:0 0 1rem} .prose li{margin:.35rem 0} .prose .updated{font-size:.82rem;color:var(--on-dark-dim);margin-bottom:2rem} .prose .box{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:var(--radius-sm);padding:1.1rem 1.3rem;margin:1.4rem 0;font-size:.95rem} .prose .box b{color:var(--on-dark)} .prose .contactline{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);font-size:.95rem} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);background:var(--navy-950);padding:2.6rem 0 3rem;margin-top:0} footer .wrap{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center} footer .fbrand{font-weight:800;font-size:1.05rem;color:#fff} footer .fbrand .num{color:var(--accent)} footer .fbeta{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800; background:var(--accent-soft);border:1px solid rgba(255,138,61,.3);color:var(--accent-bright); border-radius:999px;padding:.2rem .6rem} footer nav{display:flex;gap:1.2rem;flex-wrap:wrap;margin-left:auto} footer a{font-size:.9rem;color:var(--on-dark-muted)} footer a:hover{color:var(--accent-bright)} footer .fnote{width:100%;font-size:.8rem;color:var(--on-dark-dim);margin-top:.6rem} /* ---------- responsive ---------- */ @media (max-width:860px){ .split{grid-template-columns:1fr} } @media (max-width:760px){ .navtoggle{display:inline-flex} .nav .links{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:.35rem;padding:.6rem 0 1rem} .nav .links.open{display:flex} .nav .links a.lnk{padding:.45rem 0;font-size:1rem} .nav .links .btn{width:100%;justify-content:center;margin-top:.3rem} } @media (max-width:420px){ body{font-size:16px} .btn{width:100%;justify-content:center} .btn-row{flex-direction:column;align-items:stretch} .betabar{font-size:.86rem} .hero{padding-top:52px} .name-note{font-size:.82rem;padding:.4rem .8rem} .price{padding:1.6rem 1.2rem} footer nav{margin-left:0} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto!important} }