/* Common Sense Logic — shared sheet styles for index, hesi/ and rampplan/ Theme: the house Paper palette. Values restate Alexandria/theme/palettes.json ("paper" and "paper-dark") — change them there first, then copy here; this folder deploys standalone, so it cannot link tokens.css directly. Paper is the default. Paper (dark) applies when the browser prefers dark. or "paper-dark" pins one regardless of the browser. */ /* Paper */ :root{ color-scheme:light; /* raw */ --paper:#EDEEE8; --sheet:#F8F9F5; --sheet-2:#E3E6DC; --ink:#171C18; --ink-2:#4C554E; --rule:#CBD0C6; --rule-strong:#A6AE9F; --mag:#B4006B; /* roles */ --panel-2:#FFFFFF; --line-soft:#DDE1D7; --dim:#7B857D; --accent-strong:#8C0053; --on-accent:#FFFFFF; --good:#0E700E; --warn:#9D5D00; --focus:#B4006B; --shadow:rgba(23,28,24,.12); /* tints of the accent, for hover and soft fills */ --mag-soft:rgba(180,0,107,.10); --mag-bg:rgba(180,0,107,.06); } /* Paper (dark) — same tokens, restated */ @media (prefers-color-scheme: dark){ :root:not([data-theme="paper"]){ color-scheme:dark; --paper:#101410; --sheet:#171C18; --sheet-2:#1F251F; --ink:#E8EBE3; --ink-2:#99A296; --rule:#2C332D; --rule-strong:#454E45; --mag:#FF5FAE; --panel-2:#1F251F; --line-soft:#232A24; --dim:#6E7A6F; --accent-strong:#FF8AC4; --on-accent:#101410; --good:#6CCB5F; --warn:#FFB95C; --focus:#FF5FAE; --shadow:rgba(0,0,0,.6); --mag-soft:rgba(255,95,174,.16); --mag-bg:rgba(255,95,174,.09); } } :root[data-theme="paper-dark"]{ color-scheme:dark; --paper:#101410; --sheet:#171C18; --sheet-2:#1F251F; --ink:#E8EBE3; --ink-2:#99A296; --rule:#2C332D; --rule-strong:#454E45; --mag:#FF5FAE; --panel-2:#1F251F; --line-soft:#232A24; --dim:#6E7A6F; --accent-strong:#FF8AC4; --on-accent:#101410; --good:#6CCB5F; --warn:#FFB95C; --focus:#FF5FAE; --shadow:rgba(0,0,0,.6); --mag-soft:rgba(255,95,174,.16); --mag-bg:rgba(255,95,174,.09); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,"Liberation Sans",sans-serif; font-size:17px; line-height:1.6; } ::selection{background:var(--mag);color:var(--on-accent)} a{color:inherit} :focus-visible{outline:2px solid var(--focus);outline-offset:3px} img,svg{max-width:100%} .mono{ font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); font-weight:500; } .num{font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-variant-numeric:tabular-nums} h1,h2,h3{ font-family:Arial,Helvetica,"Liberation Sans",sans-serif; font-weight:700; margin:0; text-wrap:balance; line-height:1.04; letter-spacing:-.005em; } h1{font-size:clamp(2.4rem,6vw,4.3rem)} h2{font-size:clamp(1.6rem,3.4vw,2.3rem);} h3{font-size:1rem;letter-spacing:.01em;line-height:1.2} p{margin:0} em.hl{font-style:normal;color:var(--mag)} .sheet{ max-width:1180px;margin:0 auto;background:var(--paper); border-left:1px solid var(--rule);border-right:1px solid var(--rule); } @media (max-width:820px){ .sheet{border-left:0;border-right:0} } /* masthead */ html{scroll-padding-top:5rem} .masthead{ display:flex;flex-wrap:wrap;gap:.6rem 2rem; align-items:baseline;justify-content:space-between; padding:1rem clamp(1.1rem,4vw,2.6rem); border-bottom:1px solid var(--ink); position:sticky;top:0;z-index:20;background:var(--paper); } @media (max-width:640px){ html{scroll-padding-top:6rem} .masthead{flex-direction:column;flex-wrap:nowrap;gap:.35rem;padding:.6rem 1rem} .masthead nav{flex-wrap:nowrap;overflow-x:auto;gap:1.1rem;max-width:100%;scrollbar-width:none} } .wordmark .mark{width:26px;height:26px;display:block;flex:none} .app-icon{display:block;width:72px;height:72px;margin-bottom:1.2rem} .app-title{display:flex;align-items:center;gap:.7rem} .app-title img{width:40px;height:40px;flex:none} .note.wide{max-width:none} .plain{margin:0;padding-left:1.1rem;color:var(--ink-2)} .plain li{margin-bottom:.45rem} /* screenshots */ .shot{margin:0} .shot img{display:block;width:100%;height:auto;border:1px solid var(--rule-strong);box-shadow:0 12px 32px var(--shadow)} .shot figcaption{margin-top:.7rem} .hero-shot{margin-top:2.4rem} .rows{display:grid;gap:3.2rem;margin-top:2.4rem} .row{display:grid;gap:1.2rem 2.6rem;align-items:center} @media (min-width:900px){ .row{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)} .row.flip{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)} .row.flip > .shot, .row.flip > .pair{order:-1} } .row h3{font-size:1.35rem;margin-bottom:.5rem} .row p{color:var(--ink-2)} .pair{display:grid;gap:.8rem;grid-template-columns:1fr 1fr} .cards{display:grid;gap:2.4rem;margin-top:2.2rem} @media (min-width:820px){ .cards{grid-template-columns:1fr 1fr} } .card{display:flex;flex-direction:column;gap:.8rem} .card h3{font-size:1.3rem;margin-top:.6rem} .card p{color:var(--ink-2)} .wordmark{ font-family:Arial,Helvetica,"Liberation Sans",sans-serif;font-weight:700; font-size:1.02rem;letter-spacing:.03em;text-transform:uppercase; display:flex;align-items:center;gap:.6rem;text-decoration:none; } .wordmark .tick{width:11px;height:11px;background:var(--mag);flex:none} .wordmark small{font-weight:400;color:var(--ink-2);letter-spacing:.1em;font-size:.68rem} nav{display:flex;gap:1.4rem;flex-wrap:wrap} nav a{text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent} nav a:hover{color:var(--mag)} nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--mag)} /* sections with the drawing-sheet zone column */ section{border-bottom:1px solid var(--rule)} .body{padding:clamp(2rem,4.6vw,3.2rem) clamp(1.1rem,4vw,2.6rem)} .eyebrow{margin-bottom:1rem;display:block} .line{font-size:1.2rem;color:var(--ink-2);max-width:56ch;margin-top:1rem} .prose{color:var(--ink-2);max-width:66ch;margin-top:1rem} .prose + .prose{margin-top:.8rem} .prose strong{color:var(--ink);font-weight:600} /* hero */ .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.4rem} @media (min-width:1000px){ .hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem;align-items:center} } .status{display:inline-flex;align-items:center;gap:.55rem;border:1px solid var(--rule-strong);padding:.34rem .7rem;margin-bottom:1.4rem} .status .dot{width:7px;height:7px;background:var(--mag);border-radius:50%;flex:none} .actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem} .btn{ font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.74rem;letter-spacing:.13em; text-transform:uppercase;text-decoration:none;padding:.72rem 1.15rem; border:1px solid var(--mag);background:var(--mag);color:var(--on-accent);display:inline-block; } .btn:hover{background:var(--accent-strong);border-color:var(--accent-strong)} .btn.ghost{background:none;color:var(--ink);border-color:var(--rule-strong)} .btn.ghost:hover{border-color:var(--mag);color:var(--mag);background:var(--mag-bg)} /* fact strip */ .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} .facts>div{padding:1.3rem clamp(1.1rem,4vw,2.6rem);border-right:1px solid var(--rule)} .facts>div:last-child{border-right:0} .facts b{ display:block;font-family:Arial,Helvetica,"Liberation Sans",sans-serif; font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums; line-height:1.1;margin-bottom:.25rem; } @media (max-width:640px){ .facts>div{border-right:0;border-bottom:1px solid var(--rule)} } /* one-liner lists */ .lines{display:grid;gap:1.5rem;margin-top:2.2rem} @media (min-width:760px){ .lines-4{grid-template-columns:repeat(2,1fr)} } @media (min-width:1000px){ .lines-4{grid-template-columns:repeat(4,1fr)} } .lines-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .li{display:flex;flex-direction:column;gap:.5rem} .li .rule{height:2px;background:var(--mag);width:24px} .li p{color:var(--ink-2);font-size:.95rem;line-height:1.5} /* two-up module grid */ .mods{display:grid;margin-top:2.2rem;border-top:1px solid var(--rule-strong)} @media (min-width:700px){ .mods{grid-template-columns:1fr 1fr} } .mod{ padding:1.4rem 0 1.5rem;border-bottom:1px solid var(--rule); display:flex;flex-direction:column;gap:.7rem; } @media (min-width:700px){ .mod{padding:1.4rem 1.6rem 1.5rem 0} .mod:nth-child(even){padding:1.4rem 0 1.5rem 1.6rem;border-left:1px solid var(--rule)} } .mod-head{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap} .st{ font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase; padding:.18rem .45rem;border:1px solid var(--rule-strong);color:var(--ink-2);white-space:nowrap; } .st.on{border-color:var(--mag);color:var(--mag);background:var(--mag-soft)} .sub{font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)} .mod p{font-size:.94rem;color:var(--ink-2)} .kit{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.1rem} .kit span{ font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.66rem;letter-spacing:.06em; border:1px solid var(--rule);padding:.22rem .45rem;color:var(--ink-2); } .more{ font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:var(--mag);text-decoration:none;margin-top:auto;padding-top:.4rem; } .more:hover{color:var(--ink)} /* tables */ .scroller{overflow-x:auto} .spec{width:100%;border-collapse:collapse;margin-top:2rem;font-size:.88rem} .spec caption{text-align:left;margin-bottom:.7rem} .spec th,.spec td{text-align:left;padding:.55rem .8rem .55rem 0;border-bottom:1px solid var(--rule);vertical-align:top} .spec thead th{ font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.66rem;letter-spacing:.12em; text-transform:uppercase;color:var(--ink-2);font-weight:500;border-bottom:1px solid var(--rule-strong); } .spec td.v{font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} .spec td.v:last-child{padding-right:0} .spec tr.mine td{color:var(--ink);font-weight:600} .spec td .st{margin-left:.3rem} .note{font-size:.88rem;color:var(--ink-2);max-width:66ch;margin-top:1.1rem} /* tiers */ .tiers{display:grid;margin-top:2.2rem;border-top:1px solid var(--rule-strong)} @media (min-width:880px){ .tiers{grid-template-columns:repeat(3,1fr)} } .tier{padding:1.6rem 0 1.7rem;border-bottom:1px solid var(--rule);display:flex;flex-direction:column;gap:.7rem} @media (min-width:880px){ .tier{border-bottom:0;border-right:1px solid var(--rule);padding:1.6rem 1.6rem 0} .tier:first-child{padding-left:0} .tier:last-child{border-right:0;padding-right:0} } .avail{ font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase; align-self:flex-start;padding:.2rem .5rem;border:1px solid var(--rule-strong);color:var(--ink-2); } .avail.now{border-color:var(--mag);color:var(--mag);background:var(--mag-soft)} .price{font-family:Arial,Helvetica,"Liberation Sans",sans-serif;font-weight:700;font-size:1.5rem;line-height:1} .price small{font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.7rem;font-weight:500;color:var(--ink-2);letter-spacing:.06em} .tier p{font-size:.94rem;color:var(--ink-2)} .tier ul{margin:.1rem 0 0;padding-left:1rem;font-size:.9rem;color:var(--ink-2)} .tier li{margin-bottom:.3rem} /* offerings */ .offers{display:grid;margin-top:2.2rem;border-top:1px solid var(--rule-strong)} .offer{display:grid;gap:.6rem 2.4rem;padding:1.6rem 0;border-bottom:1px solid var(--rule)} @media (min-width:880px){ .offer{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)} } .offer .idx{color:var(--mag)} .offer h3{font-size:1.25rem;margin:.35rem 0 .5rem} .offer p{color:var(--ink-2);font-size:.95rem} .offer ul{margin:0;padding-left:1rem;color:var(--ink-2);font-size:.92rem} .offer li{margin-bottom:.35rem} .offer li strong{color:var(--ink);font-weight:600} .offer.feature{ background:var(--sheet);border:1px solid var(--rule-strong);border-left:4px solid var(--mag); padding:1.8rem clamp(1.1rem,3vw,2rem);margin:1.4rem 0 .4rem; } .steps{counter-reset:s;list-style:none;padding:0 !important;display:grid;gap:.55rem} .steps li{counter-increment:s;position:relative;padding-left:2rem} .steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.3em;font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.72rem;color:var(--mag)} .proof{display:grid;gap:1rem;margin-top:1.4rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .proof div{border-top:2px solid var(--mag);padding-top:.7rem} .proof b{display:block;font-family:Arial,Helvetica,"Liberation Sans",sans-serif;font-size:1.15rem;line-height:1.15;margin-bottom:.3rem} .proof p{font-size:.86rem;color:var(--ink-2);line-height:1.5} /* honest limits */ .limits{margin-top:2rem;border:1px dashed var(--rule-strong);padding:1.3rem 1.4rem;background:var(--sheet)} .limits ul{margin:.7rem 0 0;padding-left:1rem;color:var(--ink-2);font-size:.92rem} .limits li{margin-bottom:.4rem} .limits li strong{color:var(--ink);font-weight:600} /* horizontal bar chart */ .chart{margin-top:2rem;border:1px solid var(--rule-strong);background:var(--sheet);padding:1.3rem clamp(.9rem,3vw,1.6rem) 1rem} .chart-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1rem;margin-bottom:1rem} .chart-head h3{font-size:1.02rem} .legend{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .legend span{display:inline-flex;align-items:center;gap:.4rem} .legend i{width:12px;height:12px;display:inline-block;border-radius:2px} .bars{display:grid;gap:4px} .bar-row{ position:relative;display:grid;grid-template-columns:minmax(8.5rem,11rem) minmax(0,1fr); align-items:center;gap:.8rem;padding:.28rem 0;outline:none; } .bar-row .name{font-size:.86rem;line-height:1.2;color:var(--ink)} .bar-row .name small{display:block;font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.62rem;letter-spacing:.06em;color:var(--ink-2)} .track{display:flex;align-items:center;gap:.5rem;min-height:22px;border-left:1px solid var(--rule-strong)} .fill{height:16px;border-radius:0 4px 4px 0;background:var(--rule-strong);flex:none} .bar-row.hesi .fill{background:var(--mag)} .val{font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap} .bar-row:hover,.bar-row:focus-visible{background:var(--mag-bg)} .tip{ display:none;position:absolute;right:0;top:-2.1rem;z-index:2; background:var(--ink);color:var(--paper);padding:.35rem .6rem; font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.7rem;white-space:nowrap;pointer-events:none; } .bar-row:hover .tip,.bar-row:focus-visible .tip{display:block} .chart details{margin-top:1rem} .chart summary{cursor:pointer} @media (max-width:560px){ .bar-row{grid-template-columns:1fr} .track{border-left:0} .tip{top:-1.6rem} } /* contact + footer */ .contact .body{background:var(--sheet)} .mailto{ font-family:Arial,Helvetica,"Liberation Sans",sans-serif;font-weight:700; font-size:clamp(1.15rem,3.4vw,1.9rem);color:var(--mag);text-decoration:none; border-bottom:2px solid var(--mag);display:inline-block;margin-top:1.4rem;word-break:break-word; } .mailto:hover{color:var(--ink);border-color:var(--ink)} footer{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:1px solid var(--ink)} footer div{padding:1.1rem clamp(1.1rem,4vw,2.6rem);border-right:1px solid var(--rule)} footer div:last-child{border-right:0} footer dl{margin:0} footer dt{margin-bottom:.3rem} footer dd{margin:0;font-family:Consolas,"SF Mono",ui-monospace,"Courier New",monospace;font-size:.82rem;overflow-wrap:anywhere} footer dd a{text-decoration:none} footer dd a:hover{color:var(--mag)} .colophon{padding:1.1rem clamp(1.1rem,4vw,2.6rem) 3rem;max-width:1180px;margin:0 auto;line-height:1.7} /* ---- layout: use the full width ---- */ .line,.prose,.note{max-width:none} .body{padding-top:clamp(1.8rem,3.6vw,2.6rem);padding-bottom:clamp(1.8rem,3.6vw,2.6rem)} .hero-split{display:grid;gap:2rem 3rem;align-items:center} @media (min-width:960px){ .hero-split{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)} } @media (min-width:960px){ .hero-split.text-first{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)} } .hero-split h1{font-size:clamp(2.1rem,3.5vw,2.9rem)} .sec-head > :only-child{grid-column:1/-1} .hero-split .hero-shot{margin-top:0} .title-row{display:flex;align-items:center;gap:.9rem;margin-bottom:1.2rem} .title-row .app-icon{margin:0;width:56px;height:56px} .title-row .app-name{font-family:Arial,Helvetica,"Liberation Sans",sans-serif;font-weight:700;font-size:1.5rem;line-height:1.1;color:var(--ink)} .principles{display:grid;gap:1.1rem;border-left:2px solid var(--mag);padding-left:1.4rem} .principles .lead{font-family:Arial,Helvetica,"Liberation Sans",sans-serif;font-weight:700;font-size:1.25rem;line-height:1.2;color:var(--ink)} .principles h3{margin-bottom:.2rem} .principles p{color:var(--ink-2);font-size:.95rem;line-height:1.5} .sec-head{display:grid;gap:.6rem 3rem;align-items:end} @media (min-width:960px){ .sec-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .sec-head .line{margin-top:0} } .tiles{display:grid;gap:2.2rem 2rem;margin-top:1.8rem} @media (min-width:760px){ .tiles{grid-template-columns:1fr 1fr} } .tile{display:flex;flex-direction:column;gap:.75rem} .tile.span{grid-column:1/-1} .tile h3{font-size:1.2rem} .tile p{color:var(--ink-2)} @media (min-width:760px){ .tile.span .pair{gap:2rem} } .offer-grid{display:grid;margin-top:1.4rem;border-top:1px solid var(--rule-strong)} @media (min-width:760px){ .offer-grid{grid-template-columns:1fr 1fr} } .offer-grid .offer{display:block;padding:1.2rem 1.4rem 1.2rem 0} @media (min-width:760px){ .offer-grid .offer:nth-child(even){padding-left:1.4rem;border-left:1px solid var(--rule)} } .offer-grid .offer h3{margin:.3rem 0 .35rem} .contact-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2.4rem} .contact-row .mailto{margin-top:0} @media (prefers-reduced-motion:reduce){ *{animation:none !important;transition:none !important} html{scroll-behavior:auto} }