/* =========================================================================== gate.css (v2) — "Night Garage / Signal" theme for the whole Gate site. A warm-industrial, automotive-signage aesthetic: warm charcoal, signal amber, Portuguese oxblood red, hazard-stripe motifs, instrument-cluster type. Two layout modes set on : .landing → wide marketing pages (index, smart-gate) .sheet → narrow centered pages (generate, instructions, contact, privacy) Class API kept identical to v1 so markup stays portable. =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;600;700;800&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap'); :root{ /* warm near-black, NOT cold slate */ --bg:#13110E; --bg-2:#0D0B09; --card:#1C1813; --card-2:#221D17; --field:#241F18; --border:#3A332A; --border-2:#4A4135; --text:#F2ECE1; --muted:#A89E8C; --faint:#776E60; /* signal amber = dominant accent (barriers, turn signals) */ --amber:#FFB400; --amber-deep:#E08900; --amber-ink:#1A1303; /* Portuguese oxblood = secondary brand accent */ --red:#C5342A; --red-deep:#7A1D1D; --red-2:#3A0D0D; --rose:#F3D9D9; --ok:#54C98A; --err:#FF6B5E; --warn:#FFB400; /* hazard stripe used as a signature rule */ --hazard:repeating-linear-gradient(135deg, var(--amber) 0 10px, #1A1409 10px 20px); --shadow-hard:6px 6px 0 rgba(0,0,0,.55); --radius:9px; --ff-display:"Big Shoulders Display",Impact,"Haettenschweiler",sans-serif; --ff-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif; --ff-mono:"Spline Sans Mono",ui-monospace,"SFMono-Regular",Menlo,monospace; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--ff-body); color:var(--text); margin:0; line-height:1.62; background:var(--bg); -webkit-font-smoothing:antialiased; letter-spacing:.01em; } /* film-grain + vignette atmosphere over everything */ body::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; background: radial-gradient(120% 80% at 50% -10%, transparent 55%, rgba(0,0,0,.55) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; } body > *{position:relative; z-index:2} a{color:var(--amber); text-decoration:none; transition:color .15s} a:hover{color:#FFC94D} .sheet p a, .sheet li a, .callout p a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border-2)} code{ background:var(--bg-2); border:1px solid var(--border); color:var(--amber); padding:.16rem .42rem; border-radius:5px; word-break:break-all; font-family:var(--ff-mono); font-size:.85em; } hr{border:none; border-top:1px solid var(--border); margin:20px 0} /* ---------- layout modes ---------- */ body.landing{background:var(--bg)} body.sheet{ background: radial-gradient(1100px 560px at 50% -12%, #221A12 0%, var(--bg) 58%); min-height:100dvh; display:flex; align-items:flex-start; justify-content:center; padding:34px 16px 48px; } .wrap{width:100%; margin:0 auto} .landing .wrap{max-width:1100px; padding:0 22px} .sheet .wrap{max-width:640px} /* reusable signature hazard rule */ .seclabel::before, .sec::before{ content:""; display:block; height:6px; width:54px; margin:0 0 12px; background:var(--hazard); border-radius:2px; } .seclabel::before{margin-left:auto; margin-right:auto} /* ===================== buttons ===================== */ .cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap} .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:.95rem 1.5rem; font-family:var(--ff-body); font-size:1rem; font-weight:700; line-height:1; border-radius:var(--radius); cursor:pointer; border:1.5px solid transparent; text-decoration:none; transition:transform .12s ease, box-shadow .12s ease, background .15s, border-color .15s, color .15s; } .btn svg{flex:0 0 auto} .btn-primary{ color:#fff; background:var(--red); border-color:var(--red); box-shadow:var(--shadow-hard); } .btn-primary:hover{background:#D8453A; color:#fff; transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(0,0,0,.55)} .btn-primary:active{transform:translate(0,0); box-shadow:3px 3px 0 rgba(0,0,0,.55)} .btn-secondary{color:var(--text); background:transparent; border-color:var(--border-2)} .btn-secondary:hover{border-color:var(--amber); color:#FFC94D; background:rgba(255,180,0,.06)} .btn-block{width:100%} .btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none} .cta-note{margin:16px 0 0; color:var(--muted); font-size:.92rem; text-align:center} .cta-note b{color:var(--amber); font-weight:700} /* small "back / help" pill */ .back{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin:0 0 16px; padding:.6rem .95rem; font-size:.82rem; font-weight:600; font-family:var(--ff-mono); letter-spacing:.02em; text-transform:uppercase; text-decoration:none; color:var(--text); background:transparent; border:1.5px solid var(--border-2); border-radius:var(--radius); transition:border-color .15s, background .15s, color .15s; } .back:hover{border-color:var(--amber); color:var(--amber); background:rgba(255,180,0,.05)} .back svg{flex:0 0 auto} .back.primary{color:#fff; background:var(--red); border-color:var(--red); box-shadow:var(--shadow-hard)} .back.primary:hover{background:#D8453A; color:#fff} .backrow,.toprow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 16px} .backrow .back,.toprow .back{margin:0} .backrow .back,.sell-cta .back{flex:1 1 160px} .toprow .helpbtn{flex:1 1 auto} /* gold help / coffee buttons */ .helpbtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:.6rem 1rem; font-size:.8rem; font-weight:700; font-family:var(--ff-mono); letter-spacing:.02em; text-transform:uppercase; text-decoration:none; color:#fff; background:var(--red); border:1.5px solid var(--red); border-radius:var(--radius); cursor:pointer; transition:transform .12s, box-shadow .12s, background .15s; } .helpbtn:hover{background:#D8453A; color:#fff; transform:translateY(-1px)} .helpbtn svg{flex:0 0 auto} .coffeebtn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:.85rem 1.45rem; font-size:1rem; font-weight:700; font-family:var(--ff-body); text-decoration:none; cursor:pointer; color:var(--amber-ink); background:var(--amber); border:1.5px solid var(--amber-deep); border-radius:var(--radius); box-shadow:var(--shadow-hard); transition:transform .12s, box-shadow .12s, background .15s; } .coffeebtn:hover{background:#FFC22E; transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(0,0,0,.55)} .coffeebtn:active{transform:translate(0,0); box-shadow:3px 3px 0 rgba(0,0,0,.55)} /* ===================== cards ===================== */ .card{ background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:24px; position:relative; } .sheet .card{box-shadow:var(--shadow-hard); margin-bottom:18px} .sec{ color:var(--amber); font-family:var(--ff-mono); font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.12em; margin:0 0 12px; } /* ===================== hero (landing) ===================== */ .hero{ position:relative; overflow:hidden; text-align:center; padding:84px 0 64px; background: radial-gradient(900px 460px at 50% -8%, #2A2014 0%, transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg)); border-bottom:1.5px solid var(--border); } /* hazard barrier bar across the top of the hero — the signature "gate" */ .hero::before{ content:""; position:absolute; top:0; left:0; right:0; height:10px; background:var(--hazard); transform-origin:left center; animation:gateRise 1s cubic-bezier(.2,.8,.2,1) both; } .hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg, rgba(255,180,0,.04), transparent 30%, transparent 70%, rgba(197,52,42,.05)); } @keyframes gateRise{from{transform:scaleX(0)} to{transform:scaleX(1)}} .hero .wrap > *{animation:heroIn .7s cubic-bezier(.2,.7,.2,1) both} .hero .mark{animation-delay:.05s} .hero h1{animation-delay:.14s} .hero .tagline{animation-delay:.22s} .hero .platforms{animation-delay:.30s} .hero .cta-note,.hero .cta{animation-delay:.36s} @keyframes heroIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}} .hero .mark{ width:88px; height:88px; border-radius:22px; margin:0 auto 24px; background:linear-gradient(150deg,var(--red),var(--red-2)); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--amber), 8px 8px 0 rgba(0,0,0,.5); } .hero .mark img,.hero .mark svg{width:60px; height:60px; border-radius:14px; display:block} .hero h1{ font-family:var(--ff-display); font-weight:700; font-size:clamp(3rem,9vw,6rem); line-height:.92; margin:0 auto 18px; letter-spacing:.005em; text-transform:uppercase; max-width:14ch; color:var(--text); } .hero h1 em{display:block; font-style:normal; color:var(--amber); font-size:.4em; font-weight:600; margin-top:.45em; letter-spacing:.02em} .tagline{ font-size:clamp(1.02rem,2.3vw,1.22rem); color:var(--muted); line-height:1.55; margin:0 auto 14px; max-width:600px; } .tagline:last-of-type{margin-bottom:30px} .platforms{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0 0 32px} .chip{ display:inline-flex; align-items:center; gap:7px; background:var(--card); border:1.5px solid var(--border-2); border-radius:6px; padding:.45rem .8rem; font-family:var(--ff-mono); font-size:.78rem; letter-spacing:.02em; color:var(--text); font-weight:500; } .chip svg{flex:0 0 auto} /* ===================== sections (landing) ===================== */ .landing section{padding:72px 0} .landing section:nth-of-type(even){background:var(--bg-2)} .seclabel{ color:var(--amber); font-family:var(--ff-mono); font-size:.74rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; margin:0 0 14px; text-align:center; } .landing h2{ font-family:var(--ff-display); font-weight:700; text-transform:uppercase; font-size:clamp(1.9rem,5vw,3rem); line-height:.96; text-align:center; margin:0 0 44px; letter-spacing:.01em; } /* feature / icon-card grids (landing) */ .features,.grid.landing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} @media(max-width:880px){ .features,.grid.landing-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .features,.grid.landing-grid{grid-template-columns:1fr} } .landing .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} @media(max-width:880px){ .landing .grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .landing .grid{grid-template-columns:1fr} } .duo{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} @media(max-width:600px){ .duo{grid-template-columns:1fr} } .feature{ background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:24px; transition:transform .15s, border-color .15s; position:relative; overflow:hidden; } .feature::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } .feature:hover{transform:translateY(-4px); border-color:var(--border-2)} .feature:hover::before{transform:scaleX(1)} .feature .ic,.landing .card .ic{ width:48px; height:48px; border-radius:10px; margin-bottom:16px; font-size:1.4rem; background:rgba(255,180,0,.12); color:var(--amber); border:1.5px solid rgba(255,180,0,.28); display:flex; align-items:center; justify-content:center; } .feature h3,.landing .card h3{ margin:0 0 7px; font-size:1.18rem; font-weight:700; letter-spacing:.005em; } .feature p,.landing .card p{margin:0; color:var(--muted); font-size:.96rem; line-height:1.55} .duo .card{ border-color:rgba(255,180,0,.30); background:linear-gradient(150deg, rgba(255,180,0,.06), var(--card) 55%); } /* free callout (landing) */ .callout{ max-width:720px; margin:0 auto; text-align:center; position:relative; overflow:hidden; background:linear-gradient(150deg, rgba(197,52,42,.10), var(--card) 60%); border:1.5px solid var(--border-2); border-radius:var(--radius); padding:40px 30px; box-shadow:var(--shadow-hard); } .callout::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--hazard)} .callout .emoji{font-size:2.8rem; line-height:1; margin:6px 0 12px} .callout h3{font-family:var(--ff-display); text-transform:uppercase; font-size:1.7rem; font-weight:700; margin:0 0 12px; letter-spacing:.01em} .callout p{margin:0 auto; color:var(--text); max-width:560px; font-size:1.06rem; line-height:1.6} .callout .small{color:var(--muted); font-size:.9rem; margin-top:12px} .callout .coffeebtn{margin-top:22px} /* full-width cost banner (smart-gate) — spans the 3-card row, horizontal */ .costband{max-width:none; margin:24px auto 0; display:flex; gap:24px; align-items:center; text-align:left} .costband .emoji{margin:0; flex:0 0 auto; line-height:1} .costband h3{margin:0 0 6px} .costband p{margin:0; max-width:none} @media(max-width:560px){ .costband{flex-direction:column; text-align:center; gap:14px} } /* why-free + Gate MAX, two-up */ .freepro{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:980px; margin:0 auto; align-items:stretch} .freepro .callout{max-width:none; margin:0; display:flex; flex-direction:column} .freepro .callout .coffeebtn{margin-top:auto; align-self:center} @media(max-width:760px){ .freepro{grid-template-columns:1fr; max-width:560px} } /* Gate MAX card reads as a spec list — left aligned */ .callout.pro{background:linear-gradient(150deg, rgba(255,180,0,.12), var(--card) 60%); border-color:rgba(255,180,0,.4); text-align:left} .callout.pro .emoji{margin:6px 0 12px} .freepro .callout.pro .btn-pro{margin-top:auto; align-self:stretch} .pro-list{list-style:none; margin:8px 0 10px; padding:0; text-align:left; display:block} .callout.pro .pro-note{position:relative; margin:6px 0 2px; padding-left:26px; font-style:italic} .callout.pro .pro-winwin{margin:0 0 32px; padding-left:26px; font-style:italic; font-weight:700; color:var(--amber)} .pro-note::before{ content:""; position:absolute; left:0; top:.2em; width:16px; height:16px; background:var(--amber); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") center/contain no-repeat; } .pro-list li{position:relative; padding-left:26px; margin:.55rem 0; color:var(--text); font-size:.98rem; line-height:1.45} .pro-list li::before{ content:""; position:absolute; left:0; top:.28em; width:15px; height:15px; background:var(--amber); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } .probadge{ position:absolute; top:14px; right:14px; font-family:var(--ff-mono); font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-ink); background:var(--amber); padding:.26rem .55rem; border-radius:5px; } /* Gate MAX (premium) button — distinct from red actions and amber coffee */ .btn-pro{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:.9rem 1.5rem; font-family:var(--ff-body); font-size:1rem; font-weight:700; line-height:1; color:var(--amber); background:transparent; border:1.5px solid var(--amber); border-radius:var(--radius); cursor:pointer; transition:transform .12s, box-shadow .12s, background .15s, color .15s; } .btn-pro:hover{background:var(--amber); color:var(--amber-ink); transform:translate(-2px,-2px); box-shadow:var(--shadow-hard)} .btn-pro:active{transform:translate(0,0); box-shadow:3px 3px 0 rgba(0,0,0,.55)} .btn-pro svg{flex:0 0 auto} /* Gate MAX "under review" modal */ .pro-overlay{position:fixed; inset:0; z-index:80; display:none; padding:20px; background:rgba(8,6,4,.78); align-items:center; justify-content:center} .pro-overlay.open{display:flex} .pro-modal{position:relative; width:100%; max-width:440px; background:var(--card); border:1.5px solid var(--border-2); border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.7); padding:34px 28px 26px; text-align:center} .pro-modal-ic{width:58px; height:58px; margin:0 auto 4px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(255,180,0,.12); border:1.5px solid rgba(255,180,0,.3); color:var(--amber)} .pro-modal h3{font-family:var(--ff-display); text-transform:uppercase; font-size:1.5rem; font-weight:700; margin:14px 0 10px} .pro-modal p{color:var(--muted); margin:0 auto 22px; max-width:340px} .pro-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap} /* screenshots (landing) */ .shots .car-shot img,.shots .phone img{filter:saturate(1.02)} .shotrow{display:flex; gap:28px; align-items:center; flex-wrap:wrap; justify-content:center; margin-bottom:40px} .shotrow:last-child{margin-bottom:0} .shotrow .text{flex:1 1 280px; min-width:260px} .shotrow .text h3{font-family:var(--ff-display); text-transform:uppercase; font-size:1.7rem; font-weight:700; margin:0 0 10px; letter-spacing:.01em} .shotrow .text p{color:var(--muted); margin:0; font-size:1rem} .car-shot{flex:1 1 420px; max-width:560px} .car-shot img{width:100%; border-radius:10px; border:1.5px solid var(--border-2); box-shadow:var(--shadow-hard); display:block} .phones{display:flex; gap:20px; justify-content:center; flex-wrap:wrap} .phone img{width:200px; border-radius:22px; border:1.5px solid var(--border-2); box-shadow:var(--shadow-hard); display:block} /* steps (landing) */ .steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; counter-reset:s} .step{background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:24px; position:relative} .step::before{ counter-increment:s; content:counter(s,decimal-leading-zero); display:flex; align-items:center; justify-content:center; width:auto; height:auto; margin-bottom:12px; font-family:var(--ff-display); font-weight:700; font-size:2.2rem; color:var(--amber); justify-content:flex-start; } .step h3{margin:0 0 6px; font-size:1.1rem; font-weight:700} .step p{margin:0; color:var(--muted); font-size:.95rem} /* setup flow — vertical (1 → A|B → final) */ .flow{display:flex; flex-direction:column; align-items:center; max-width:700px; margin:0 auto} .flow .node{background:var(--card); border:1.5px solid var(--border); border-radius:var(--radius); padding:16px 18px; display:flex; gap:14px; align-items:flex-start} .flow .node.done{border-color:rgba(84,201,138,.5)} .flow > .node{width:100%; max-width:460px} .flow .node .n{ flex:0 0 auto; width:34px; height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-family:var(--ff-mono); font-weight:600; font-size:.82rem; color:var(--amber-ink); background:var(--amber); } .flow .node.done .n{background:var(--ok); color:#06140C} .flow .node h3{margin:0 0 3px; font-size:1.04rem; font-weight:700} .flow .node p{margin:0; color:var(--muted); font-size:.9rem; line-height:1.5} .flow .branches{width:100%; display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch} .flow .branch{display:flex; flex-direction:column; padding:14px; border-radius:var(--radius); background:rgba(255,180,0,.04); border:1.5px dashed rgba(255,180,0,.4)} .flow .branch .blabel{text-align:center; font-family:var(--ff-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 12px} .flow .branch .blabel b{color:var(--amber)} .flow .lane{flex:1 1 auto; display:flex; flex-direction:column; justify-content:center} .flow .conn{width:2px; height:24px; background:var(--border-2); margin:0 auto; position:relative} .flow .lane .conn{height:16px} .flow .conn.arrow::after{content:""; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%) rotate(45deg); width:8px; height:8px; border-right:2px solid var(--border-2); border-bottom:2px solid var(--border-2)} @media(max-width:560px){ .flow .branches{grid-template-columns:1fr; gap:18px} } /* privacy banner (landing) + shelly band (smart-gate) */ .privacy{ background:var(--card); border:1.5px solid var(--border-2); border-radius:var(--radius); padding:30px; display:flex; gap:20px; align-items:center; flex-wrap:wrap; justify-content:center; text-align:center; box-shadow:var(--shadow-hard); } .privacy .lock{width:56px; height:56px; border-radius:12px; background:rgba(84,201,138,.12); color:var(--ok); border:1.5px solid rgba(84,201,138,.3); display:flex; align-items:center; justify-content:center; flex:0 0 auto} .privacy h3{margin:0 0 5px; font-family:var(--ff-display); text-transform:uppercase; font-size:1.5rem; font-weight:700} .privacy p{margin:0; color:var(--muted); max-width:560px} .shelly{background:var(--bg-2); border-top:1.5px solid var(--border); border-bottom:1.5px solid var(--border)} .endcta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:34px} /* footer (landing) */ .landing footer{border-top:1.5px solid var(--border); padding:36px 0; text-align:center; color:var(--muted); font-size:.9rem} .landing footer .cta{margin-top:18px} /* ===================== sheet pages ===================== */ .brand{display:flex; align-items:center; gap:14px; margin:4px 0 22px} .brand .mark{ width:46px; height:46px; border-radius:11px; flex:0 0 auto; background:linear-gradient(150deg,var(--red),var(--red-2)); display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 1.5px var(--amber); } .brand h1{font-family:var(--ff-display); text-transform:uppercase; font-size:1.7rem; font-weight:700; margin:0; letter-spacing:.01em; line-height:1} .brand p{margin:4px 0 0; color:var(--muted); font-size:.9rem} .sheet h2{font-family:var(--ff-display); text-transform:uppercase; font-size:1.5rem; font-weight:700; margin:0 0 10px; line-height:1.05; letter-spacing:.01em} .sheet p{margin:.55rem 0; line-height:1.6} .sheet ol{margin:.5rem 0 .2rem; padding-left:1.3rem} .sheet ol li::marker{color:var(--amber); font-family:var(--ff-mono); font-weight:600} .sheet li{margin:.42rem 0; line-height:1.55} .muted{color:var(--muted); font-size:.92rem} .lead{color:var(--muted); margin:0 0 20px; font-size:1.05rem} .hint{color:var(--faint); font-weight:400; font-size:.82rem} .seccom{color:var(--muted); font-size:.84rem; margin:-8px 0 12px; font-family:var(--ff-mono)} .notice{ margin:0 0 16px; color:#CDE9D8; font-size:.86rem; line-height:1.5; text-align:left; background:rgba(84,201,138,.08); border:1px solid rgba(84,201,138,.3); border-radius:var(--radius); padding:.75rem .9rem; } /* forms */ label{display:block; margin:16px 0 6px; font-weight:600; font-size:.82rem; font-family:var(--ff-mono); text-transform:uppercase; letter-spacing:.04em; color:var(--muted)} label:first-of-type{margin-top:0} input,textarea{ width:100%; padding:.78rem .9rem; font-size:1rem; color:var(--text); font-family:var(--ff-body); background:var(--bg-2); border:1.5px solid var(--border); border-radius:var(--radius); outline:none; transition:border-color .15s, box-shadow .15s; } input[name="api_url"],input[name="api_key"],input[name="device_id"], input[name="device_id_2"],.syncbox{font-family:var(--ff-mono); font-size:.92rem} textarea{resize:vertical; min-height:140px} input::placeholder,textarea::placeholder{color:var(--faint)} input:focus,textarea:focus{border-color:var(--amber); box-shadow:0 0 0 3px rgba(255,180,0,.2)} .sheet .grid{display:grid; grid-template-columns:1fr 1fr; gap:14px} .row{display:grid; grid-template-columns:1fr 1fr; gap:14px} .human{ display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none; background:var(--bg-2); border:1.5px solid var(--border); border-radius:var(--radius); padding:.85rem .95rem; margin-top:18px; font-weight:600; } .human input{width:22px; height:22px; accent-color:var(--amber); cursor:pointer; margin:0} .human .vsub{margin-left:auto; color:var(--muted); font-weight:400; font-size:.74rem; font-family:var(--ff-mono); text-transform:uppercase; letter-spacing:.04em} .sendrow{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:20px} .status{margin:12px 0 0; font-size:.9rem; color:var(--muted)} .status.ok{color:var(--ok)} .status.err{color:var(--err)} .hp{position:absolute; left:-9999px; opacity:0; pointer-events:none} .err{color:var(--err); margin:0 0 12px; font-size:.92rem; font-weight:600} .ok .badge{ display:inline-block; color:var(--amber-ink); background:var(--ok); font-weight:700; margin:0 0 12px; padding:.28rem .7rem; border-radius:6px; font-family:var(--ff-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; } .syncbox{display:block; background:var(--bg-2); border:1.5px solid var(--amber); border-radius:var(--radius); padding:.8rem .9rem; margin:.6rem 0; color:var(--amber); word-break:break-all} /* callouts inside docs */ .warn,.info{display:flex; gap:11px; align-items:flex-start; border-radius:var(--radius); padding:.9rem 1rem; margin:.9rem 0 0; font-size:.92rem; line-height:1.55} .warn{background:rgba(255,180,0,.07); border:1.5px solid rgba(255,180,0,.4); color:#F2E2C2} .warn b{color:var(--amber)} .info{background:rgba(197,52,42,.08); border:1.5px solid rgba(197,52,42,.4); color:#F4D7D4} .info b{color:#F08A82} /* cross-sell pointer */ .sell-card{background:linear-gradient(150deg, rgba(255,180,0,.07), var(--card) 60%); border:1.5px solid rgba(255,180,0,.3)} .sell{margin:.4rem 0 0; padding-left:1.2rem} .sell li{margin:.55rem 0; line-height:1.55} .reasons{list-style:none; margin:.4rem 0 0; padding:0} .reasons li{margin:.6rem 0; line-height:1.55} .reasons b{color:var(--text)} .sell-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px} .sell-cta .back{margin:0} /* sheet footer credit */ .sheet footer{border-top:1.5px solid var(--border); margin-top:26px; padding-top:20px; text-align:center; color:var(--muted); font-size:.9rem} .sitefoot{text-align:center; color:var(--muted); font-size:.82rem; margin:24px 0 4px} .sitefoot b{color:var(--text)} .sitefoot a{color:var(--text); text-decoration:underline; text-underline-offset:2px; text-decoration-color:var(--border-2)} /* ===================== hamburger nav (all pages) ===================== */ .navbtn{ position:fixed; top:16px; right:16px; z-index:60; width:48px; height:48px; margin:0; padding:0; box-sizing:border-box; font:inherit; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); background:var(--card); border:1.5px solid var(--border-2); border-radius:10px; box-shadow:var(--shadow-hard); transition:border-color .15s, color .15s; } .navbtn:hover{border-color:var(--amber); color:var(--amber)} .navmenu{ position:fixed; top:74px; right:16px; z-index:60; min-width:224px; background:var(--card); border:1.5px solid var(--border-2); border-radius:12px; box-shadow:10px 10px 0 rgba(0,0,0,.5); padding:8px; opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .15s, transform .15s; } .navmenu.open{opacity:1; transform:none; pointer-events:auto} .langtoggle{display:flex; gap:4px; padding:4px; margin:2px 2px 6px; background:var(--bg-2); border:1.5px solid var(--border); border-radius:8px} .langtoggle a{flex:1; justify-content:center; padding:.4rem; border-radius:6px; font-family:var(--ff-mono); font-size:.78rem; font-weight:600; letter-spacing:.08em; color:var(--muted)} .langtoggle a:hover{background:var(--field); color:var(--text)} .langtoggle a.on{background:var(--amber); color:var(--amber-ink)} .langtoggle a.on:hover{background:var(--amber); color:var(--amber-ink)} .navmenu a{display:flex; align-items:center; gap:12px; padding:.66rem .72rem; border-radius:7px; color:var(--text); font-size:.88rem; font-weight:600; text-decoration:none; transition:background .12s, color .12s} .navmenu a:hover{background:var(--field); color:var(--amber)} .navmenu a svg{flex:0 0 auto; color:var(--muted); transition:color .12s} .navmenu a:hover svg{color:var(--amber)} .navmenu hr{border:none; border-top:1.5px solid var(--border); margin:6px 4px} .navback{position:fixed; inset:0; z-index:55; display:none} .navback.open{display:block} /* ===================== ko-fi modal (all pages) ===================== */ .kofi-overlay{position:fixed; inset:0; z-index:80; display:none; padding:20px; background:rgba(8,6,4,.78); align-items:center; justify-content:center} .kofi-overlay.open{display:flex} .kofi-modal{position:relative; width:100%; max-width:420px; background:var(--card); border:1.5px solid var(--border-2); border-radius:14px; box-shadow:0 24px 70px rgba(0,0,0,.7); overflow:hidden} .kofi-modal iframe{width:100%; height:580px; max-height:80vh; border:0; display:block; background:#f9f9f9} .kofi-close{position:absolute; top:10px; right:10px; z-index:2; width:34px; height:34px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; background:rgba(0,0,0,.55); border:none; border-radius:8px; font-size:1rem} .kofi-close:hover{background:rgba(0,0,0,.75)} /* ===================== accessibility ===================== */ :focus-visible{outline:2px solid var(--amber); outline-offset:2px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important} .hero .wrap > *{opacity:1; transform:none} }