/* --------------------------------------------------------------------------- Elevator 911 — shared stylesheet Structure is the through-line: every page uses the same nav, footer, type scale, spacing, card shape and layout. The only thing that changes per app is one palette, expressed as four tokens set by a `theme-*` class on : --app mid tone. Always carries WHITE text (buttons, icon tiles). --app-deep dark tone. Backgrounds with white text; accent text on light. --app-bright light tone. Accent text on dark backgrounds. --app-text auto-picks deep/bright for the visitor's colour scheme. Anything that needs a fixed dark background with hardcoded light text uses --ink, never --navy: --navy is an ADAPTIVE text colour that turns near-white in dark mode, which previously made white-on-white buttons and bands. --------------------------------------------------------------------------- */ :root{ --bg:#fbfaf7; --surface:#ffffff; --border:#e7e2d8; --text:#1a1a1a; --muted:#6b6459; --amber:#f5a623; --amber-deep:#d4830a; --teal:#0e9488; --coral:#ef5f5f; --navy:#1c2b4a; --grad: linear-gradient(135deg,#ffd166 0%,#ffb629 38%,#e8600c 100%); --radius:16px; --shadow: 0 2px 10px rgba(28,43,74,0.06), 0 12px 30px rgba(28,43,74,0.05); /* Brand anchor: graphite + ember. --ink is a FIXED graphite, never --navy (an adaptive text colour that turns near-white in dark mode, which is what produced white-on-white buttons and bands). */ --ink:#14171c; --signal:#ffb629; --signal-deep:#c96f0a; --steel:#3e6e8c; } @media (prefers-color-scheme: dark){ :root{ --bg:#12151b; --surface:#191d25; --border:#2a3140; --text:#f2f0ea; --muted:#9aa3b5; --amber:#ffb84d; --amber-deep:#ffcf7a; --teal:#2dd4c4; --coral:#ff8080; --navy:#e8edf7; --shadow: 0 2px 10px rgba(0,0,0,0.35), 0 14px 34px rgba(0,0,0,0.35); } } /* Palettes, each drawn from a Pantone Colour of the Year. Fixed values, so an app reads as the same colour in light or dark mode. Declared on so a theme class on the same element resolves --app-text correctly. */ body{ --app:var(--signal-deep); --app-deep:var(--ink); --app-bright:var(--signal); /* house / home */ --app-text:var(--app-deep); /* Glow sitting inside a dark panel. It must never be a different hue from the panel — amber over a dark panel is what produced the muddy brown wash before — so the graphite house panel lifts with steel, not ember. */ --app-glow:var(--steel); } body.theme-survey { --app:#0e9488; --app-deep:#0a6b62; --app-bright:#3fd9c8; } /* Emerald, 2013 */ body.theme-liftledger{ --app:#6667ab; --app-deep:#484a83; --app-bright:#a9aae2; } /* Very Peri, 2022 */ body.theme-sentraea { --app:#be3455; --app-deep:#8f2540; --app-bright:#ff85a2; } /* Viva Magenta, 2023 */ body[class*="theme-"]{ --app-glow:color-mix(in srgb, var(--app) 76%, #ffffff); } @media (prefers-color-scheme: dark){ body{ --app-text:var(--app-bright); } } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--text); font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } a{color:inherit;} .wrap{max-width:1080px; margin:0 auto; padding:0 24px;} nav.top{ position:sticky; top:0; z-index:50; backdrop-filter:blur(10px); background:color-mix(in srgb, var(--bg) 85%, transparent); border-bottom:1px solid var(--border); } nav.top .wrap{display:flex; align-items:center; justify-content:space-between; height:64px;} .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; text-decoration:none; white-space:nowrap;} .brand .mark{font-size:24px;} nav.top .links{display:flex; gap:18px; font-size:13px; font-weight:600; flex-wrap:nowrap;} nav.top .links a{text-decoration:none; color:var(--muted);} nav.top .links a:hover{color:var(--text);} /* Demo bar — sits under the nav on sales pages, always points at the real thing */ .demo-bar{background:var(--app-deep); color:#fff;} .demo-bar .wrap{display:flex; align-items:center; justify-content:center; gap:10px; padding:11px 24px; text-align:center; flex-wrap:wrap;} .demo-bar a{color:#fff; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:6px;} .demo-bar a:hover{text-decoration:underline;} .demo-bar span.tag{color:rgba(255,255,255,0.72); font-size:13px;} .demo-bar.muted{background:var(--surface); border-bottom:1px solid var(--border); color:var(--muted);} .demo-bar.muted a{color:var(--app-text);} header.hero{padding:88px 0 64px; text-align:center; position:relative; overflow:hidden;} header.hero::before{ content:""; position:absolute; inset:0 0 auto 0; height:460px; z-index:-1; background:radial-gradient(ellipse 70% 100% at 50% 0%, var(--app) 0%, transparent 72%); opacity:0.13; } header.hero.compact{padding:64px 0 52px;} .eyebrow{ display:inline-block; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; background:color-mix(in srgb, var(--app) 16%, transparent); color:var(--app-text); margin-bottom:20px; } h1{font-size:clamp(32px,5vw,54px); line-height:1.08; margin:0 0 18px; font-weight:800; letter-spacing:-0.02em;} h1 span{color:var(--app-text);} .sub{font-size:19px; color:var(--muted); max-width:640px; margin:0 auto 34px;} .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;} .btn{ display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:12px; font-weight:700; font-size:15px; text-decoration:none; border:1px solid transparent; transition:transform .15s, box-shadow .15s; cursor:pointer; font-family:inherit; } .btn:hover{transform:translateY(-2px);} .btn:disabled{opacity:.6; cursor:not-allowed; transform:none;} .btn.primary{background:var(--app); color:#fff; box-shadow:var(--shadow);} .btn.ghost{background:var(--surface); border-color:var(--border); color:var(--text);} section{padding:76px 0;} .section-head{text-align:center; max-width:620px; margin:0 auto 44px;} .section-head h2{font-size:clamp(26px,3.4vw,36px); margin:0 0 10px; font-weight:800; letter-spacing:-0.01em;} .section-head p{color:var(--muted); font-size:16px; margin:0;} /* Icon tiles — inline SVG, never emoji, so weight and colour stay consistent */ .icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:var(--app); color:#fff; flex:none; } .icon svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;} .apps{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px;} .app-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s; } .app-card:hover{transform:translateY(-3px); box-shadow:0 4px 16px rgba(28,43,74,0.10), 0 18px 40px rgba(28,43,74,0.08);} .app-card[data-tint="survey"] .icon{background:#0e9488;} .app-card[data-tint="liftledger"] .icon{background:#6667ab;} .app-card[data-tint="sentraea"] .icon{background:#be3455;} .app-card .name{font-size:19px; font-weight:750;} .app-card .desc{color:var(--muted); font-size:14.5px; flex:1;} .status{ align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:4px 10px; border-radius:999px; } .status.live{background:color-mix(in srgb, #0e9488 18%, transparent); color:#0a6b62;} .status.soon{background:color-mix(in srgb, var(--muted) 20%, transparent); color:var(--muted);} .status.beta{background:color-mix(in srgb, var(--amber) 22%, transparent); color:var(--amber-deep);} @media (prefers-color-scheme: dark){ .status.live{color:#3fd9c8;} } .status-row{display:flex; gap:8px; flex-wrap:wrap;} .eyebrow-row{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px; flex-wrap:wrap;} .eyebrow-row .eyebrow{margin-bottom:0;} .app-card .go{font-weight:700; font-size:14px; text-decoration:none; display:flex; align-items:center; gap:6px;} .app-card[data-tint="survey"] .go{color:#0a6b62;} .app-card[data-tint="liftledger"] .go{color:#484a83;} .app-card[data-tint="sentraea"] .go{color:#8f2540;} /* Sales CTA block — the glow is a lighter tint of the SAME hue, never the amber/coral wash that used to turn every dark panel muddy brown. */ .sales{ background:var(--app-deep); color:#fff; border-radius:24px; padding:60px 40px; text-align:center; position:relative; overflow:hidden; } .sales::before{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 80% 120% at 50% 118%, var(--app-glow) 0%, transparent 70%); opacity:.5; } .sales h2{font-size:clamp(24px,3vw,32px); margin:0 0 12px; font-weight:800; position:relative;} .sales p{color:rgba(255,255,255,0.82); max-width:560px; margin:0 auto 28px; font-size:16px; position:relative;} .sales .btn.primary{background:#fff; color:var(--app-deep); position:relative;} /* Benefits — 2x2 on desktop so each card has room to breathe */ .benefits{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:880px; margin:0 auto;} .benefit{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:14px; } .benefit .icon{width:44px; height:44px; border-radius:12px;} .benefit .icon svg{width:22px; height:22px;} .benefit h3{margin:0; font-size:17.5px; font-weight:750; letter-spacing:-0.01em;} .benefit p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.6;} @media (max-width:680px){ .benefits{grid-template-columns:1fr;} } .features{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px 36px; max-width:860px; margin:0 auto;} .feature{display:flex; align-items:flex-start; gap:12px;} .feature .check{ flex:none; width:24px; height:24px; border-radius:50%; background:color-mix(in srgb, var(--app) 16%, transparent); color:var(--app-text); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; margin-top:2px; } .feature .txt strong{display:block; font-size:15px; font-weight:700; margin-bottom:2px;} .feature .txt span{color:var(--muted); font-size:14px; line-height:1.55;} /* Contact form */ .contact-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:40px; box-shadow:var(--shadow); max-width:560px; margin:0 auto; } .contact-card .label{color:var(--muted); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:18px; text-align:center;} form.contact-form{display:flex; flex-direction:column; gap:16px;} .field{display:flex; flex-direction:column; gap:6px; text-align:left;} .field label{font-size:13px; font-weight:700; color:var(--text);} .field input, .field textarea, .field select{ font:inherit; padding:11px 13px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); resize:vertical; } .field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--app); outline-offset:1px;} .hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;} .form-status{font-size:14px; font-weight:600; text-align:center; min-height:20px;} .form-status.ok{color:var(--teal);} .form-status.err{color:var(--coral);} .contact-card .alt{margin-top:20px; text-align:center; font-size:13.5px; color:var(--muted);} .contact-card .alt a{color:var(--app-text); font-weight:700; text-decoration:none;} footer{border-top:1px solid var(--border); padding:32px 0; text-align:center; color:var(--muted); font-size:13px;} @media (max-width:480px){ nav.top .links{gap:12px; font-size:12px;} .brand{font-size:15px;} .brand .mark{font-size:20px;} section{padding:56px 0;} } /* --------------------------------------------------------------------------- Sunrise panel — home page only. Nav, hero, stat band and the apps grid share one continuous gradient. It PEAKS in the middle (behind the hero and stat band) and resolves back to near-cream at the bottom, so the section heading and cards always sit on calm, light ground and there is no hard seam where the panel meets the page. Colours are fixed literals: the panel reads as the same bright sunrise whatever colour scheme the visitor is in. --------------------------------------------------------------------------- */ .sunrise-panel{ /* Graphite + ember brand ramp: cream -> gold -> ember through the hero and stat band, then eased back to the page background so the section heading and cards land on calm ground and the panel has no hard bottom seam. */ background:linear-gradient(180deg, #fff3d6 0%, #ffd166 20%, #ffb629 40%, #f2790c 56%, #f59d55 74%, #fdf1e2 92%, var(--bg) 100%); color:#14171c; border-radius:0 0 28px 28px; } .sunrise-panel nav.top{position:static; background:transparent; border-bottom:none; backdrop-filter:none;} .sunrise-panel .brand{color:#14171c;} .sunrise-panel nav.top .links{background:rgba(255,255,255,0.4); padding:6px; border-radius:999px; backdrop-filter:blur(8px);} .sunrise-panel nav.top .links a{color:#14171c; padding:8px 16px; border-radius:999px;} .sunrise-panel nav.top .links a:hover{background:rgba(255,255,255,0.62);} .sunrise-panel header.hero::before{content:none;} .sunrise-panel .eyebrow{background:#14171c; color:#ffd166;} .sunrise-panel h1, .sunrise-panel h1 span{color:#14171c;} .sunrise-panel .sub{color:rgba(20,23,28,0.76);} .sunrise-panel .btn.primary{background:#14171c; color:#fff;} .sunrise-panel .btn.ghost{background:#fff; color:#14171c; border-color:transparent;} .sunrise-panel .section-head h2{color:#14171c;} .sunrise-panel .section-head p{color:rgba(20,23,28,0.74);} .stat-band{ margin:0 auto; max-width:1032px; position:relative; z-index:2; background:#14171c; border-radius:var(--radius); padding:30px 44px; display:flex; justify-content:space-around; align-items:center; flex-wrap:wrap; gap:24px; box-shadow:0 24px 48px rgba(0,0,0,0.35); transform:translateY(-8px); } .stat-band .item{text-align:center;} .stat-band .num{font-weight:800; font-size:24px; color:#ffd166;} .stat-band .lbl{font-size:12.5px; color:rgba(255,255,255,0.68); margin-top:2px;} .stat-band .div{width:1px; height:36px; background:rgba(255,255,255,0.15);} .sunrise-panel .apps{padding-top:14px;} .sunrise-panel .app-card{background:#fff; border:none; color:#14171c;} .sunrise-panel .app-card .desc{color:#5d5a54;} .sunrise-panel .app-card .status.soon{background:rgba(20,23,28,0.1); color:#5d5a54;} @media (max-width:640px){ .stat-band{transform:none; margin-top:24px; padding:26px 24px;} .stat-band .div{display:none;} }