:root{ --blueprint: #14314F; --blueprint-line: #4C7DA8; --paper: #F5F3EC; --paper-line: #DCD6C6; --ink: #16202B; --ink-muted: #5B6B78; --amber: #D98E2B; --amber-dark: #B8721A; --amber-soft: rgba(217,142,43,.12); --green: #2E7D5B; --green-soft: rgba(46,125,91,.1); --white: #FFFFFF; --radius: 10px; --radius-lg: 18px; --shadow-card: 0 1px 2px rgba(20,49,79,.06), 0 8px 24px -12px rgba(20,49,79,.18); --shadow-card-hover: 0 2px 4px rgba(20,49,79,.08), 0 16px 32px -12px rgba(20,49,79,.24); --shadow-modal: 0 25px 60px -15px rgba(0,0,0,.4); } *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; } html{ scroll-behavior:smooth; } body{ background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans', sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:'Space Grotesk', sans-serif; color:var(--ink); letter-spacing:-0.01em; } .mono{ font-family:'IBM Plex Mono', monospace; } a{ color:inherit; } img{ max-width:100%; display:block; } button{ font-family:inherit; cursor:pointer; } :focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:4px; } .wrap{ max-width:1200px; margin:0 auto; padding:0 1.5rem; } .nav{ position:sticky; top:0; z-index:500; background:var(--blueprint); border-bottom:1px solid rgba(255,255,255,.08); } .nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:0.65rem 1.5rem; max-width:1200px; margin:0 auto; } .nav-brand{ display:flex; align-items:center; gap:.85rem; color:#fff; text-decoration:none; } .nav-logo-chip{ background:#fff; border-radius:10px; padding:6px 10px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(0,0,0,.18); } .nav-brand img{ height:44px; width:auto; display:block; } .nav-brand-text{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.2rem; letter-spacing:.01em; } .nav-brand-text span{ color:var(--amber); } .nav-links{ display:none; gap:1.4rem; list-style:none; font-size:.87rem; font-weight:500; color:#CBD8E4; } .nav-links a{ text-decoration:none; transition:color .2s; } .nav-links a:hover{ color:#fff; } .nav-cta{ background:var(--amber); color:var(--blueprint); border:none; font-weight:600; font-size:.85rem; padding:.65rem 1.2rem; border-radius:999px; cursor:pointer; transition:transform .15s ease, background .2s; font-family:'Space Grotesk',sans-serif; white-space:nowrap; } .nav-cta:hover{ background:#E7A03F; transform:translateY(-1px); } .nav-cta-white{ background:#fff; color:var(--blueprint); border:1.5px solid rgba(255,255,255,.25); font-weight:600; font-size:.85rem; padding:.65rem 1.2rem; border-radius:999px; cursor:pointer; transition:transform .15s ease, background .2s, color .2s; font-family:'Space Grotesk',sans-serif; white-space:nowrap; display:inline-flex; align-items:center; gap:.4rem; } .nav-cta-white:hover{ background:var(--paper); color:var(--blueprint); transform:translateY(-1px); } .nav-user-chip{ display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); padding:.4rem .9rem; border-radius:999px; color:#fff; font-size:.85rem; font-weight:500; cursor:pointer; transition:background .2s; } .nav-user-chip:hover{ background:rgba(255,255,255,.18); } .nav-user-chip i{ color:var(--amber); } @media(min-width:1040px){ .nav-links{ display:flex; flex-wrap:wrap; } } .hero{ background: linear-gradient(180deg, rgba(20,49,79,.97) 0%, rgba(20,49,79,.94) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px), var(--blueprint); color:#fff; padding:4.5rem 0 5rem; position:relative; overflow:hidden; } .hero::before{ content:''; position:absolute; top:-120px; left:-80px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(217,142,43,.28) 0%, transparent 70%); pointer-events:none; z-index:0; } .hero::after{ content:''; position:absolute; bottom:-160px; right:-100px; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(76,125,168,.35) 0%, transparent 70%); pointer-events:none; z-index:0; } .hero-grid{ display:grid; grid-template-columns:1fr; gap:3rem; align-items:center; max-width:1200px; margin:0 auto; padding:0 1.5rem; position:relative; z-index:2; } .hero-brand-badge{ display:inline-flex; align-items:center; gap:1rem; background:rgba(255,255,255,.06); border:1px solid rgba(159,193,222,.3); padding:.7rem 1.2rem .7rem .7rem; border-radius:999px; margin-bottom:2rem; } .hero-logo-chip{ background:#fff; border-radius:999px; width:64px; height:64px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 18px rgba(0,0,0,.25); } .hero-logo-chip img{ height:48px; width:auto; } .hero-brand-badge-text{ display:flex; flex-direction:column; } .hero-brand-name{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff; font-size:1.15rem; line-height:1.2; } .hero-brand-name span{ color:var(--amber); } .hero-brand-tagline{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.06em; color:#9FC1DE; text-transform:uppercase; margin-top:.15rem; } .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#9FC1DE; border:1px solid rgba(159,193,222,.35); padding:.4rem .85rem; border-radius:999px; margin-bottom:1.5rem; } .eyebrow i{ color:var(--amber); font-size:.7rem; } .hero-copy h1{ font-size:clamp(2rem, 4.6vw, 3.1rem); font-weight:700; line-height:1.12; margin-bottom:1.1rem; } .hero-copy h1 em{ color:var(--amber); font-style:normal; } .hero-copy p{ font-size:1.05rem; color:#C4D3E0; max-width:46ch; margin-bottom:2rem; } .hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; } .btn-primary{ background:var(--amber); color:var(--blueprint); border:none; font-weight:600; font-family:'Space Grotesk',sans-serif; font-size:.95rem; padding:.95rem 1.7rem; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:.6rem; transition:transform .15s ease, box-shadow .2s ease, background .2s; box-shadow:0 10px 25px -10px rgba(217,142,43,.7); } .btn-primary:hover{ transform:translateY(-2px); background:#E7A03F; } .btn-primary:disabled{ opacity:.6; cursor:not-allowed; transform:none; } .btn-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); font-weight:500; font-size:.9rem; padding:.9rem 1.4rem; border-radius:999px; cursor:pointer; text-decoration:none; transition:border-color .2s, background .2s; } .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); } .btn-secondary{ background:var(--blueprint); color:#fff; border:none; font-weight:600; font-family:'Space Grotesk',sans-serif; font-size:.9rem; padding:.85rem 1.4rem; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; transition:background .2s, transform .15s; } .btn-secondary:hover{ background:#1D4269; transform:translateY(-1px); } .btn-outline{ background:transparent; color:var(--blueprint); border:1.5px solid var(--paper-line); font-weight:600; font-family:'Space Grotesk',sans-serif; font-size:.85rem; padding:.7rem 1.2rem; border-radius:999px; cursor:pointer; transition:border-color .2s, background .2s; } .btn-outline:hover{ border-color:var(--amber); background:var(--amber-soft); } .btn-danger{ background:transparent; color:#B3432E; border:1.5px solid rgba(179,67,46,.3); font-weight:600; font-family:'Space Grotesk',sans-serif; font-size:.85rem; padding:.7rem 1.2rem; border-radius:999px; cursor:pointer; transition:all .2s; } .btn-danger:hover{ background:rgba(179,67,46,.08); border-color:#B3432E; } .hero-diagram{ background:rgba(255,255,255,.03); border:1px solid rgba(159,193,222,.25); border-radius:var(--radius-lg); padding:1.25rem; position:relative; box-shadow:0 30px 60px -20px rgba(0,0,0,.4); } .hero-diagram::before, .hero-diagram::after{ content:''; position:absolute; width:16px; height:16px; border:2px solid var(--amber); } .hero-diagram::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; } .hero-diagram::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; } .hero-diagram svg{ width:100%; height:auto; display:block; } .diagram-caption{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:#8EA9C1; display:flex; justify-content:space-between; margin-top:.85rem; letter-spacing:.03em; } @media(min-width:960px){ .hero-grid{ grid-template-columns:1.05fr .95fr; } } .spec-strip{ background:var(--white); border-bottom:1px solid var(--paper-line); } .spec-strip .wrap{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; } .spec-item{ padding:1.5rem 1.25rem; border-right:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); } .spec-item:nth-child(2n){ border-right:none; } .spec-value{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1.5rem; color:var(--blueprint); } .spec-label{ font-size:.78rem; color:var(--ink-muted); margin-top:.25rem; text-transform:uppercase; letter-spacing:.05em; } @media(min-width:800px){ .spec-strip .wrap{ grid-template-columns:repeat(4,1fr); } .spec-item{ border-bottom:none; } .spec-item:nth-child(2n){ border-right:1px solid var(--paper-line); } .spec-item:last-child{ border-right:none; } } section{ padding:4rem 0; } .section-head{ max-width:640px; margin-bottom:2.5rem; } .section-tag{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber-dark); margin-bottom:.75rem; display:block; } .section-head h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.85rem; } .section-head p{ color:var(--ink-muted); font-size:1rem; } .reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; } .reveal.in-view{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } } .calc-app{ background:var(--white); border:1px solid var(--paper-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; } .calc-app-header{ background:var(--blueprint); color:#fff; padding:1.25rem 1.75rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .calc-app-header h3{ color:#fff; font-size:1.1rem; display:flex; align-items:center; gap:.6rem; } .calc-app-header .system-badge{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; background:rgba(217,142,43,.2); color:var(--amber); border:1px solid rgba(217,142,43,.4); padding:.35rem .85rem; border-radius:999px; } .calc-app-body{ display:grid; grid-template-columns:1fr; } @media(min-width:900px){ .calc-app-body{ grid-template-columns:1.1fr .9fr; } } .calc-form{ padding:1.75rem; display:flex; flex-direction:column; gap:1.5rem; } .form-group{ display:flex; flex-direction:column; gap:.4rem; } .form-group label{ font-size:.82rem; font-weight:600; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; } .form-group input, .form-group select, .form-group textarea{ width:100%; padding:.75rem 1rem; border:1.5px solid var(--paper-line); border-radius:8px; font-family:'IBM Plex Mono',monospace; font-size:.9rem; background:var(--paper); color:var(--ink); transition:border-color .2s, background .2s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus{ outline:none; border-color:var(--amber); background:#fff; } .form-group textarea{ font-family:'IBM Plex Sans',sans-serif; resize:vertical; min-height:80px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } @media(max-width:500px){ .form-row{ grid-template-columns:1fr; } } .appliance-table{ width:100%; border-collapse:collapse; font-size:.88rem; } .appliance-table th{ text-align:left; padding:.6rem .5rem; color:var(--ink-muted); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid var(--paper-line); } .appliance-table td{ padding:.5rem; border-bottom:1px solid var(--paper-line); } .appliance-table input{ width:100%; padding:.4rem .5rem; border:1px solid var(--paper-line); border-radius:6px; font-family:'IBM Plex Mono',monospace; font-size:.85rem; background:var(--paper); } .appliance-table input:focus{ outline:none; border-color:var(--amber); background:#fff; } .appliance-table .qty-input{ max-width:70px; } .appliance-table .watt-input{ max-width:90px; } .appliance-table .hours-input{ max-width:80px; } .btn-icon{ background:transparent; border:none; color:var(--ink-muted); cursor:pointer; padding:.3rem; border-radius:4px; transition:color .2s, background .2s; } .btn-icon:hover{ color:#B3432E; background:rgba(179,67,46,.08); } .btn-add{ display:inline-flex; align-items:center; gap:.4rem; background:var(--green-soft); color:var(--green); border:none; font-weight:600; font-size:.8rem; padding:.5rem 1rem; border-radius:999px; cursor:pointer; transition:background .2s; font-family:'IBM Plex Sans',sans-serif; } .btn-add:hover{ background:rgba(46,125,91,.2); } .btn-add i{ font-size:.75rem; } .calc-results{ background:var(--paper); border-left:1px solid var(--paper-line); padding:1.75rem; display:flex; flex-direction:column; gap:1.25rem; } .result-card{ background:var(--white); border:1px solid var(--paper-line); border-radius:var(--radius); padding:1.1rem; position:relative; overflow:hidden; } .result-card::before{ content:''; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--amber); } .result-card.green::before{ background:var(--green); } .result-card.blue::before{ background:var(--blueprint-line); } .result-card .val{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1.25rem; color:var(--blueprint); } .result-card .lbl{ font-size:.75rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; margin-top:.15rem; } .result-card .sub{ font-size:.78rem; color:var(--ink-muted); margin-top:.35rem; line-height:1.4; } .results-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; } @media(max-width:500px){ .results-grid{ grid-template-columns:1fr; } } .calc-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:auto; padding-top:1rem; border-top:1px dashed var(--paper-line); } .system-types{ background:var(--blueprint); color:#fff; } .system-types .section-tag{ color:#9FC1DE; } .system-types .section-head p{ color:#B9CADA; } .type-grid{ display:grid; gap:1.5rem; } .type-card{ background:rgba(255,255,255,.04); border:1px solid rgba(159,193,222,.25); border-radius:var(--radius-lg); padding:2rem 1.75rem; cursor:pointer; transition:transform .25s ease, border-color .25s ease, background .25s, box-shadow .25s; position:relative; overflow:hidden; } .type-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--amber), var(--blueprint-line)); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; } .type-card:hover{ transform:translateY(-4px); border-color:var(--amber); background:rgba(255,255,255,.07); box-shadow:0 20px 40px -20px rgba(0,0,0,.5); } .type-card:hover::before{ transform:scaleX(1); } .type-card i{ font-size:1.6rem; color:var(--amber); margin-bottom:1rem; display:block; } .type-card h3{ color:#fff; font-size:1.15rem; margin-bottom:.5rem; } .type-card p{ color:#B9CADA; font-size:.9rem; margin-bottom:1.1rem; } .type-card .type-link{ font-family:'IBM Plex Mono',monospace; font-size:.75rem; color:var(--amber); display:inline-flex; align-items:center; gap:.4rem; letter-spacing:.03em; } @media(min-width:820px){ .type-grid{ grid-template-columns:repeat(3,1fr); } } .steps{ display:grid; gap:1.5rem; } .step{ display:grid; grid-template-columns:auto 1fr; gap:1.25rem; background:var(--white); border:1px solid var(--paper-line); border-radius:var(--radius-lg); padding:1.75rem; box-shadow:var(--shadow-card); } .step-num{ font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1.1rem; color:var(--blueprint); background:var(--paper); border:1px solid var(--paper-line); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .step h3{ font-size:1.1rem; margin-bottom:.4rem; } .step p{ color:var(--ink-muted); font-size:.92rem; } @media(min-width:820px){ .steps{ grid-template-columns:repeat(3,1fr); } } @media(min-width:600px) and (max-width:819px){ #how-it-works .steps{ grid-template-columns:repeat(2,1fr); } } @media(min-width:820px){ #how-it-works .steps{ grid-template-columns:repeat(4,1fr); } } .slabs-section{ background:var(--blueprint); color:#fff; } .slabs-section .section-tag{ color:#9FC1DE; } .slabs-section .section-head p{ color:#B9CADA; } .slabs-panel{ display:grid; gap:1.75rem; background:rgba(255,255,255,.04); border:1px solid rgba(159,193,222,.25); border-radius:var(--radius-lg); padding:2rem; } .slabs-table-wrap{ overflow-x:auto; } .slabs-table{ width:100%; border-collapse:collapse; font-family:'IBM Plex Mono',monospace; font-size:.82rem; min-width:420px; } .slabs-table th{ text-align:left; padding:.7rem .9rem; color:#9FC1DE; font-weight:500; text-transform:uppercase; font-size:.68rem; letter-spacing:.05em; border-bottom:1px solid rgba(159,193,222,.25); } .slabs-table td{ padding:.65rem .9rem; border-bottom:1px solid rgba(159,193,222,.12); color:#E4ECF3; } .slabs-meta{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:space-between; } .slabs-badge{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:var(--amber); border:1px solid rgba(217,142,43,.4); padding:.35rem .75rem; border-radius:999px; } .feature-grid{ display:grid; gap:1.25rem; } .feature{ display:flex; gap:1rem; align-items:flex-start; padding:1.35rem; background:var(--white); border:1px solid var(--paper-line); border-radius:var(--radius); } .feature i{ width:34px; height:34px; border-radius:8px; flex-shrink:0; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:.95rem; } .feature h4{ font-size:.98rem; margin-bottom:.25rem; } .feature p{ font-size:.85rem; color:var(--ink-muted); } @media(min-width:820px){ .feature-grid{ grid-template-columns:repeat(2,1fr); } } .gallery-grid{ display:grid; gap:1.5rem; grid-template-columns:1fr; } .field-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; height:220px; border:1px solid var(--paper-line); } .field-card::before, .field-card::after{ content:''; position:absolute; width:20px; height:20px; border:2px solid var(--amber); z-index:2; } .field-card::before{ top:10px; left:10px; border-right:none; border-bottom:none; } .field-card::after{ bottom:10px; right:10px; border-left:none; border-top:none; } .field-img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .field-card:hover .field-img{ transform:scale(1.06); } .field-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(20,49,79,.85), transparent 55%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.1rem; } .field-title{ color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1rem; } .field-sub{ color:#C4D3E0; font-family:'IBM Plex Mono',monospace; font-size:.72rem; margin-top:.2rem; letter-spacing:.03em; } @media(min-width:820px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } } .final-cta{ background:var(--paper); border-top:1px solid var(--paper-line); border-bottom:1px solid var(--paper-line); } .final-cta-inner{ display:flex; flex-direction:column; gap:1.5rem; align-items:flex-start; background:var(--white); border:1px solid var(--paper-line); border-radius:var(--radius-lg); padding:2.5rem; box-shadow:var(--shadow-card); } .final-cta h2{ font-size:clamp(1.5rem,3vw,2rem); } .final-cta p{ color:var(--ink-muted); max-width:52ch; } @media(min-width:820px){ .final-cta-inner{ flex-direction:row; align-items:center; justify-content:space-between; } .final-cta-inner > div:first-child{ max-width:60%; } } footer{ background:var(--blueprint); color:#C4D3E0; padding:3.5rem 0 0; } .footer-grid{ display:grid; gap:2.5rem; padding-bottom:2.5rem; } .footer-brand{ display:flex; align-items:center; gap:.85rem; margin-bottom:1.1rem; } .footer-logo-chip{ background:#fff; border-radius:10px; padding:5px 8px; display:flex; align-items:center; justify-content:center; } .footer-brand img{ height:38px; } .footer-brand-text{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff; font-size:1.15rem; } .footer-col h5{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:#9FC1DE; margin-bottom:1rem; } .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:.65rem; } .footer-col a{ color:#C4D3E0; text-decoration:none; font-size:.88rem; transition:color .2s; } .footer-col a:hover{ color:#fff; } .footer-desc{ font-size:.88rem; color:#96AEC2; max-width:32ch; } .footer-social{ display:flex; align-items:center; gap:.65rem; margin-top:1rem; } .footer-social a{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); color:#C4D3E0; font-size:1.05rem; transition:background .2s, color .2s; } .footer-social a:hover{ color:#fff; } .footer-social a[aria-label*="Facebook"]:hover{ background:#1877F2; } .footer-social a[aria-label*="Instagram"]:hover{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .footer-social a[aria-label*="LinkedIn"]:hover{ background:#0A66C2; } .footer-social a[aria-label*="YouTube"]:hover{ background:#FF0000; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:1.5rem 0; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.8rem; color:#8098AC; } .footer-bottom .mono{ letter-spacing:.02em; } @media(min-width:820px){ .footer-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; } } /* ===== MODAL SYSTEM ===== */ .system-modal-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.92); backdrop-filter:blur(6px); z-index:2000; display:none; align-items:center; justify-content:center; padding:1rem; } .system-modal-content{ background:var(--white); width:100%; max-width:900px; border-radius:var(--radius-lg); padding:2.25rem; position:relative; box-shadow:var(--shadow-modal); max-height:90vh; overflow-y:auto; } .modal-header{ text-align:center; margin-bottom:2rem; } .modal-header h2{ font-size:1.6rem; margin-bottom:.4rem; display:flex; align-items:center; justify-content:center; gap:10px; } .modal-header h2 i{ color:var(--amber); font-size:1.4rem; } .modal-header p{ color:var(--ink-muted); font-size:.92rem; } .system-options-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.25rem; } .system-option-card{ border:1.5px solid var(--paper-line); border-radius:var(--radius); padding:1.75rem 1.4rem; text-align:center; cursor:pointer; transition:all .25s ease; background:var(--paper); } .system-option-card:hover{ border-color:var(--amber); transform:translateY(-3px); box-shadow:var(--shadow-card-hover); background:var(--white); } .system-option-card i{ font-size:1.8rem; color:var(--blueprint); margin-bottom:.85rem; display:block; } .system-option-card h3{ font-size:1.05rem; margin-bottom:.4rem; } .system-option-card p{ font-size:.85rem; color:var(--ink-muted); line-height:1.5; } .back-btn{ position:absolute; top:1.75rem; left:1.75rem; background:transparent; border:none; color:var(--ink-muted); font-size:.9rem; cursor:pointer; display:flex; align-items:center; gap:.4rem; font-weight:500; } .back-btn:hover{ color:var(--ink); } .close-modal-btn{ position:absolute; top:1.5rem; right:1.75rem; background:transparent; border:none; font-size:1.3rem; color:var(--ink-muted); cursor:pointer; line-height:1; } .close-modal-btn:hover{ color:var(--ink); } .step-content{ display:none; } .step-content.active{ display:block; } /* ===== AUTH MODAL ===== */ .auth-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } .auth-choice-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem; padding: 2rem 1.25rem; background: var(--paper); border: 1.5px solid var(--paper-line); border-radius: var(--radius-lg); cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s; font-family: inherit; color: var(--ink); } .auth-choice-card:hover { transform: translateY(-3px); border-color: var(--amber); background: #fff; box-shadow: var(--shadow-card-hover); } .auth-choice-card .auth-icon-wrap { width: 56px; height: 56px; border-radius: 14px; background: var(--amber-soft); color: var(--amber-dark); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: .4rem; } .auth-choice-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--blueprint); } .auth-choice-card p { font-size: .82rem; color: var(--ink-muted); line-height: 1.45; margin: 0; } @media (max-width: 480px) { .auth-choice-grid { grid-template-columns: 1fr; } } /* ===== REGISTRATION FLOW ===== */ .reg-progress { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; } .reg-step-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: .8rem; font-weight: 600; background: var(--paper); border: 1.5px solid var(--paper-line); color: var(--ink-muted); transition: all .3s ease; } .reg-step-dot.active { background: var(--blueprint); border-color: var(--blueprint); color: #fff; } .reg-step-dot.completed { background: var(--green); border-color: var(--green); color: #fff; } .reg-step-line { width: 40px; height: 2px; background: var(--paper-line); border-radius: 1px; } .reg-step-line.completed { background: var(--green); } .reg-step-label { font-family: 'IBM Plex Mono', monospace; font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); text-align: center; margin-top: .25rem; } .reg-step-wrap { display: flex; flex-direction: column; align-items: center; } .otp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; max-width: 320px; margin: 0 auto 1rem; } .otp-grid input { width: 100%; aspect-ratio: 1; text-align: center; font-size: 1.4rem; font-weight: 600; border: 1.5px solid var(--paper-line); border-radius: 10px; background: var(--paper); color: var(--ink); font-family: 'IBM Plex Mono', monospace; transition: border-color .2s, background .2s; } .otp-grid input:focus { outline: none; border-color: var(--amber); background: #fff; } .timer-text { font-family: 'IBM Plex Mono', monospace; font-size: .85rem; color: var(--ink-muted); text-align: center; margin-bottom: 1rem; } .timer-text span { color: var(--amber-dark); font-weight: 600; } .resend-link { background: none; border: none; color: var(--blueprint); font-weight: 600; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: 'IBM Plex Sans', sans-serif; } .resend-link:disabled { color: var(--ink-muted); cursor: not-allowed; text-decoration: none; } .password-strength { height: 4px; border-radius: 2px; background: var(--paper-line); margin-top: .4rem; overflow: hidden; } .password-strength-bar { height: 100%; width: 0%; border-radius: 2px; transition: width .3s ease, background .3s ease; } .password-hint { font-size: .75rem; color: var(--ink-muted); margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .6rem; } .password-hint span { display: flex; align-items: center; gap: .3rem; } .password-hint span i { font-size: .65rem; } .hint-met { color: var(--green); } .hint-unmet { color: var(--ink-muted); } .success-check { width: 72px; height: 72px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1.25rem; } .code-box { background: var(--blueprint); color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: 1.4rem; font-weight: 600; letter-spacing: .15em; padding: 1rem 1.5rem; border-radius: var(--radius); text-align: center; margin: 1rem 0; position: relative; border: 2px dashed var(--amber); } .code-box .code-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: #9FC1DE; margin-bottom: .4rem; display: block; } .code-actions { display: flex; gap: .5rem; justify-content: center; margin-top: .75rem; } .code-action-btn { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: .78rem; padding: .4rem .8rem; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; transition: background .2s; } .code-action-btn:hover { background: rgba(255,255,255,.2); } .corp-verify-box { background: var(--green-soft); border: 1.5px solid var(--green); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.25rem; display: none; } .corp-verify-box.visible { display: block; } .corp-verify-box h4 { color: var(--green); font-size: .95rem; margin-bottom: .3rem; } .corp-verify-box p { color: var(--ink-muted); font-size: .85rem; margin: 0; } .user-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; } .user-table th { text-align: left; padding: .6rem .5rem; color: var(--ink-muted); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--paper-line); } .user-table td { padding: .5rem; border-bottom: 1px solid var(--paper-line); } .user-table .status-badge { font-size: .7rem; padding: .2rem .5rem; border-radius: 999px; font-weight: 600; } .status-badge.active { background: var(--green-soft); color: var(--green); } .status-badge.pending { background: rgba(217,142,43,.12); color: var(--amber-dark); } #toast{ visibility:hidden; min-width:260px; background:var(--blueprint); color:#fff; text-align:center; border-radius:8px; padding:14px 18px; position:fixed; z-index:3000; left:50%; bottom:30px; transform:translateX(-50%); font-size:.88rem; font-family:'IBM Plex Sans',sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.25); opacity:0; transition:opacity .3s, bottom .3s; } #toast.show{ visibility:visible; opacity:1; bottom:50px; } #toast.success{ background:var(--green); } #toast.error{ background:#B3432E; } @media print{ .nav, .hero, .spec-strip, .system-types, .final-cta, footer, .btn-primary, .btn-secondary, .btn-outline, .calc-actions, .system-modal-backdrop{ display:none !important; } .calc-app{ box-shadow:none; border:1px solid #ccc; } body{ background:#fff; } } ::-webkit-scrollbar{ width:8px; } ::-webkit-scrollbar-track{ background:var(--paper); } ::-webkit-scrollbar-thumb{ background:var(--paper-line); border-radius:4px; } ::-webkit-scrollbar-thumb:hover{ background:var(--ink-muted); } /* ===== FEEDBACK MODAL ===== */ .feedback-modal-backdrop{ position:fixed; inset:0; background:rgba(15,23,42,.92); backdrop-filter:blur(6px); z-index:2000; display:none; align-items:center; justify-content:center; padding:1rem; } .feedback-modal-content{ background:var(--white); width:100%; max-width:680px; border-radius:var(--radius-lg); padding:2.25rem; position:relative; box-shadow:var(--shadow-modal); max-height:92vh; overflow-y:auto; } .feedback-modal-content .close-modal-btn{ position:absolute; top:1.5rem; right:1.75rem; background:transparent; border:none; font-size:1.3rem; color:var(--ink-muted); cursor:pointer; line-height:1; } .feedback-modal-content .close-modal-btn:hover{ color:var(--ink); } .feedback-form{ display:flex; flex-direction:column; gap:1.1rem; } .feedback-form .form-group{ display:flex; flex-direction:column; gap:.35rem; } .feedback-form .form-group label{ font-size:.82rem; font-weight:600; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; } .feedback-form .form-group input, .feedback-form .form-group textarea, .feedback-form .form-group select{ width:100%; padding:.75rem 1rem; border:1.5px solid var(--paper-line); border-radius:8px; font-family:'IBM Plex Sans',sans-serif; font-size:.9rem; background:var(--paper); color:var(--ink); transition:border-color .2s, background .2s; resize:vertical; } .feedback-form .form-group input:focus, .feedback-form .form-group textarea:focus{ outline:none; border-color:var(--amber); background:#fff; } .feedback-form .form-group textarea{ min-height:90px; } .feedback-form .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .star-rating{ display:flex; gap:.35rem; align-items:center; } .star-rating .star{ font-size:1.6rem; color:var(--paper-line); cursor:pointer; transition:color .15s, transform .1s; line-height:1; } .star-rating .star.active{ color:var(--amber); } .star-rating .star:hover{ transform:scale(1.15); } .star-rating .star-rating-label{ margin-left:.6rem; font-size:.85rem; color:var(--ink-muted); font-weight:500; } .feedback-submit-btn{ background:var(--amber); color:var(--blueprint); border:none; font-weight:600; font-family:'Space Grotesk',sans-serif; font-size:.95rem; padding:.95rem 1.7rem; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; transition:transform .15s ease, box-shadow .2s ease, background .2s; box-shadow:0 10px 25px -10px rgba(217,142,43,.7); margin-top:.5rem; } .feedback-submit-btn:hover{ transform:translateY(-2px); background:#E7A03F; } .feedback-submit-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; } .feedback-thankyou{ display:none; text-align:center; padding:2rem 1rem; } .feedback-thankyou i{ font-size:3.5rem; color:var(--green); margin-bottom:1rem; } .feedback-thankyou h3{ font-size:1.4rem; margin-bottom:.5rem; } .feedback-thankyou p{ color:var(--ink-muted); font-size:.95rem; } @media(max-width:500px){ .feedback-form .form-row{ grid-template-columns:1fr; } } /* Slab visibility control - hidden by default, shown only for admin/corporate */ .slabs-section { display: none !important; } #navSlabsLink { display: none !important; } .calc-btn-slab { display: none !important; } body.slab-access-granted .slabs-section { display: block !important; } body.slab-access-granted #navSlabsLink { display: flex !important; } body.slab-access-granted .calc-btn-slab { display: inline-flex !important; } /* Slab Editor conditional buttons */ #ongridBtnSave, #ongridBtnSet { display: none !important; } body.slab-editor-save #ongridBtnSave { display: inline-flex !important; } body.slab-editor-set #ongridBtnSet { display: inline-flex !important; } #ongrid3pBtnSave, #ongrid3pBtnSet { display: none !important; } body.slab-editor-save #ongrid3pBtnSave { display: inline-flex !important; } body.slab-editor-set #ongrid3pBtnSet { display: inline-flex !important; } #owgBtnSave, #owgBtnSet { display: none !important; } body.slab-editor-save #owgBtnSave { display: inline-flex !important; } body.slab-editor-set #owgBtnSet { display: inline-flex !important; } #wgBtnSave, #wgBtnSet { display: none !important; } body.slab-editor-save #wgBtnSave { display: inline-flex !important; } body.slab-editor-set #wgBtnSet { display: inline-flex !important; } #hspBtnSave, #hspBtnSet { display: none !important; } body.slab-editor-save #hspBtnSave { display: inline-flex !important; } body.slab-editor-set #hspBtnSet { display: inline-flex !important; } #h3pBtnSave, #h3pBtnSet { display: none !important; } body.slab-editor-save #h3pBtnSave { display: inline-flex !important; } body.slab-editor-set #h3pBtnSet { display: inline-flex !important; } .nav-user-menu { position:relative; display:inline-flex; } .nav-dropdown { position:absolute; top:calc(100% + 8px); right:0; background:var(--white); border:1px solid var(--paper-line); border-radius:var(--radius); box-shadow:var(--shadow-card-hover); min-width:200px; padding:.5rem 0; display:none; z-index:600; animation:dropdownIn .18s ease; } /* Dropdown shown via JS with delay */ @keyframes dropdownIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } } .dropdown-header { padding:.75rem 1rem .5rem; border-bottom:1px solid var(--paper-line); margin-bottom:.25rem; } .dropdown-header span { display:block; } .dropdown-header #dropdownUserName { font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.95rem; color:var(--blueprint); } .dropdown-header .dropdown-role { font-size:.72rem; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; margin-top:.15rem; } .dropdown-divider { height:1px; background:var(--paper-line); margin:.4rem .75rem; } .nav-dropdown a { display:flex; align-items:center; gap:.6rem; padding:.55rem 1rem; font-size:.85rem; color:var(--ink); text-decoration:none; transition:background .15s; cursor:pointer; } .nav-dropdown a:hover { background:var(--paper); color:var(--blueprint); } .nav-dropdown a i { width:18px; text-align:center; color:var(--ink-muted); font-size:.8rem; } .nav-dropdown a:hover i { color:var(--amber); } .nav-dropdown a.logout-link { color:#B3432E; } .nav-dropdown a.logout-link:hover { background:rgba(179,67,46,.08); } .nav-dropdown a.logout-link i { color:#B3432E; } .nav-dropdown::before { content:''; position:absolute; top:-5px; right:18px; width:10px; height:10px; background:var(--white); border-left:1px solid var(--paper-line); border-top:1px solid var(--paper-line); transform:rotate(45deg); } /* ===== ON-GRID CALCULATOR SECTION ===== */ #ongridCalculator { display: none; } #ongridCalculator.active { display: block; } #ongridThreePhaseCalculator { display: none; } #ongridThreePhaseCalculator.active { display: block; } #offgridWoGridCalculator { display: none; } #offgridWoGridCalculator.active { display: block; } #offgridWithGridCalculator { display: none; } #offgridWithGridCalculator.active { display: block; } #hybridSinglePhaseCalculator { display: none; } #hybridSinglePhaseCalculator.active { display: block; } #hybridThreePhaseCalculator { display: none; } #hybridThreePhaseCalculator.active { display: block; } #basicPvCalculator { display: none; } #basicPvCalculator.active { display: block; } #tenPctPvCalculator { display: none; } #tenPctPvCalculator.active { display: block; } #thirtyPctPvCalculator { display: none; } #thirtyPctPvCalculator.active { display: block; } #leadAcidCalculator { display: none; } #leadAcidCalculator.active { display: block; } #lithiumCalculator { display: none; } #lithiumCalculator.active { display: block; } .calc-input.lib-error { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.1); } .lib-battery-visual { width: 100px; height: 170px; margin: 0 auto 1rem; position: relative; } .lib-battery-body { width: 80px; height: 150px; border: 3px solid var(--paper-line); border-radius: 12px; position: absolute; bottom: 0; left: 10px; overflow: hidden; background: #fff; transition: border-color 0.5s; } .lib-battery-body.active { border-color: var(--green); } .lib-battery-tip { width: 36px; height: 10px; background: var(--paper-line); border-radius: 4px 4px 0 0; position: absolute; top: 0; left: 32px; transition: background 0.5s; } .lib-battery-tip.active { background: var(--green); } .lib-battery-fill { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, var(--green), #245f47); transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); border-radius: 0 0 8px 8px; } .lib-battery-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: linear-gradient(to bottom, rgba(255,255,255,.25), transparent); border-radius: 8px 8px 0 0; } .lib-battery-segments { position: absolute; inset: 0; display: flex; flex-direction: column-reverse; gap: 4px; padding: 6px; z-index: 2; } .lib-battery-seg { flex: 1; background: rgba(0,0,0,.05); border-radius: 3px; transition: background .4s, box-shadow .4s; } .lib-battery-seg.filled { background: rgba(46,125,91,.25); box-shadow: 0 0 8px rgba(46,125,91,.15); } .lib-result-highlight { grid-column: 1 / -1; background: linear-gradient(135deg, var(--green-soft) 0%, #fff 100%); border: 2px solid var(--green); border-radius: 16px; padding: 2rem; text-align: center; position: relative; overflow: hidden; } .lib-dod-badge { display: inline-block; background: linear-gradient(135deg, rgba(76,125,168,.15) 0%, rgba(76,125,168,.05) 100%); color: var(--blueprint-line); padding: 6px 14px; border-radius: 20px; font-size: .8rem; font-weight: 600; margin-top: 12px; border: 1px solid rgba(76,125,168,.35); } @media(max-width:768px){ .lib-battery-visual { width: 80px; height: 140px; } .lib-battery-body { width: 66px; height: 124px; left: 7px; } .lib-battery-tip { width: 28px; height: 10px; left: 26px; } } .lab-battery-visual { width: 100px; height: 170px; margin: 0 auto 1rem; position: relative; } .lab-battery-body { width: 80px; height: 150px; border: 3px solid var(--paper-line); border-radius: 12px; position: absolute; bottom: 0; left: 10px; overflow: hidden; background: #fff; transition: border-color 0.5s; } .lab-battery-body.active { border-color: var(--green); } .lab-battery-tip { width: 36px; height: 10px; background: var(--paper-line); border-radius: 4px 4px 0 0; position: absolute; top: 0; left: 32px; transition: background 0.5s; } .lab-battery-tip.active { background: var(--green); } .lab-battery-fill { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, var(--green), #245f47); transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); border-radius: 0 0 8px 8px; } .lab-battery-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30px; background: linear-gradient(to bottom, rgba(255,255,255,.25), transparent); border-radius: 8px 8px 0 0; } .lab-battery-segments { position: absolute; inset: 0; display: flex; flex-direction: column-reverse; gap: 4px; padding: 6px; z-index: 2; } .lab-battery-seg { flex: 1; background: rgba(0,0,0,.05); border-radius: 3px; transition: background .4s, box-shadow .4s; } .lab-battery-seg.filled { background: rgba(46,125,91,.25); box-shadow: 0 0 8px rgba(46,125,91,.15); } .lab-result-highlight { grid-column: 1 / -1; background: linear-gradient(135deg, var(--green-soft) 0%, #fff 100%); border: 2px solid var(--green); border-radius: 16px; padding: 2rem; text-align: center; position: relative; overflow: hidden; } @media(max-width:768px){ .lab-battery-visual { width: 80px; height: 140px; } .lab-battery-body { width: 66px; height: 124px; left: 7px; } .lab-battery-tip { width: 28px; height: 10px; left: 26px; } } .calc-hero { background: linear-gradient(180deg, rgba(20,49,79,.97) 0%, rgba(20,49,79,.94) 100%), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 48px), var(--blueprint); color:#fff; padding:2.5rem 0 3rem; position:relative; overflow:hidden; } .calc-hero::before{ content:''; position:absolute; top:-80px; right:-60px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle, rgba(217,142,43,.25) 0%, transparent 70%); pointer-events:none; } .calc-hero .wrap { text-align:center; position:relative; } .calc-hero h1, .calc-hero h2 { font-size:clamp(1.6rem, 3.5vw, 2.4rem); font-weight:700; line-height:1.15; margin-bottom:.5rem; } .calc-hero h1 em, .calc-hero h2 em { color:var(--amber); font-style:normal; } .calc-hero p { color:#C4D3E0; font-size:1.05rem; max-width:56ch; margin-left:auto; margin-right:auto; } .calc-hero-badge { display:inline-flex; align-items:center; gap:.5rem; font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#9FC1DE; border:1px solid rgba(159,193,222,.35); padding:.4rem .85rem; border-radius:999px; margin-bottom:1rem; } .calc-hero-badge i { color:var(--amber); } .calc-card { background:var(--white); border:1px solid var(--paper-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:1.75rem; margin-bottom:1.5rem; position:relative; } .calc-section-header { display:flex; align-items:center; gap:10px; margin-bottom:1.25rem; border-bottom:1px solid var(--paper-line); padding-bottom:.75rem; } .calc-section-header h2 { font-size:1.15rem; color:var(--blueprint); font-family:'Space Grotesk',sans-serif; } .calc-section-header i { color:var(--amber); font-size:1.2rem; } .calc-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.25rem; } .calc-grid .full-width { grid-column:1 / -1; } .calc-input-wrap label { display:block; font-size:.78rem; font-weight:600; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:.4rem; } .calc-input { width:100%; padding:.7rem 1rem; font-size:.95rem; border:1.5px solid var(--paper-line); border-radius:8px; transition:border-color .2s, background .2s; background:var(--paper); color:var(--ink); font-family:'IBM Plex Mono', monospace; } .calc-input:focus { outline:none; border-color:var(--amber); background:#fff; } textarea.calc-input { resize:vertical; min-height:80px; font-family:'IBM Plex Sans', sans-serif; } .calc-btn-primary { background:var(--amber); color:var(--blueprint); border:none; font-weight:600; font-family:'Space Grotesk',sans-serif; font-size:.9rem; padding:.85rem 1.6rem; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; transition:transform .15s ease, box-shadow .2s ease, background .2s; box-shadow:0 8px 20px -8px rgba(217,142,43,.6); } .calc-btn-primary:hover { transform:translateY(-2px); background:#E7A03F; } .calc-btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; } .calc-btn-pdf { background:var(--blueprint); color:#fff; border:none; font-weight:600; font-family:'Space Grotesk',sans-serif; font-size:.9rem; padding:.85rem 1.6rem; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; transition:transform .15s ease, background .2s; margin-left:.6rem; } .calc-btn-pdf:hover { background:#1D4269; transform:translateY(-2px); } .calc-btn-pdf:disabled { opacity:.5; cursor:not-allowed; transform:none; } .calc-btn-save { background:var(--green); color:#fff; border:none; font-weight:600; font-family:'Space Grotesk',sans-serif; font-size:.9rem; padding:.85rem 1.6rem; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; transition:transform .15s ease, background .2s; margin-top:1rem; } .calc-btn-save:hover { background:#3A9E74; transform:translateY(-2px); } .calc-btn-save:disabled { opacity:.5; cursor:not-allowed; transform:none; } .calc-btn-slab { background:var(--green); color:#fff; border:none; font-weight:600; font-family:'Space Grotesk',sans-serif; font-size:.85rem; padding:.65rem 1.2rem; border-radius:999px; cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; transition:transform .15s ease, background .2s; position:absolute; top:1.5rem; right:1.5rem; box-shadow:0 6px 16px -6px rgba(46,125,91,.5); } .calc-btn-slab:hover { background:#3A9E74; transform:translateY(-2px); } .skg-projects-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; } .skg-filter-tab { background:var(--paper); color:var(--ink-muted); border:1.5px solid var(--paper-line); font-weight:600; font-family:'Space Grotesk',sans-serif; font-size:.8rem; padding:.4rem .9rem; border-radius:999px; cursor:pointer; transition:background .2s, color .2s, border-color .2s; } .skg-filter-tab:hover { border-color:var(--amber); color:var(--ink); } .skg-filter-tab-active { background:var(--blueprint); color:#fff; border-color:var(--blueprint); } .skg-filter-count { opacity:.75; font-size:.75rem; } .calc-results-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; } @media(max-width:900px){ .calc-results-grid { grid-template-columns:repeat(2, 1fr); } } @media(max-width:600px){ .calc-results-grid { grid-template-columns:1fr; } } .calc-metric { background:var(--white); border:1px solid var(--paper-line); border-radius:var(--radius); padding:1rem; display:flex; align-items:flex-start; gap:.75rem; transition:transform .25s ease, box-shadow .25s ease, border-color .25s; } .calc-metric:hover { transform:translateY(-3px); box-shadow:var(--shadow-card-hover); border-color:var(--amber); } .calc-metric-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; } .icon-green { background:var(--green-soft); color:var(--green); } .icon-blue { background:rgba(76,125,168,.12); color:var(--blueprint-line); } .icon-orange { background:rgba(217,142,43,.12); color:var(--amber-dark); } .icon-purple { background:rgba(126,34,206,.08); color:#7e22ce; } .icon-gold { background:rgba(217,142,43,.12); color:var(--amber-dark); } .calc-metric h3 { font-size:.72rem; text-transform:uppercase; color:var(--ink-muted); font-weight:600; letter-spacing:.04em; margin-bottom:.35rem; } .calc-metric p { font-size:1.15rem; font-weight:700; color:var(--blueprint); line-height:1.2; font-family:'IBM Plex Mono', monospace; } .calc-metric-sub { font-size:.78rem; color:var(--ink-muted); margin-top:4px; } .calc-metric.highlight { border-color:var(--amber); background:linear-gradient(135deg, var(--amber-soft) 0%, #fff 100%); } .calc-metric.highlight p { color:var(--amber-dark); } .calc-results-title { grid-column:1 / -1; font-size:1rem; font-weight:700; color:var(--blueprint); margin-top:1.25rem; margin-bottom:-.25rem; padding-bottom:.5rem; border-bottom:1px solid var(--paper-line); display:flex; align-items:center; gap:.5rem; font-family:'Space Grotesk', sans-serif; } .calc-results-title:first-child { margin-top:0; } .calc-results-title i { color:var(--amber); font-size:.9rem; } .calc-empty { grid-column:1 / -1; text-align:center; padding:3rem 1rem; color:var(--ink-muted); } .calc-empty i { font-size:2.5rem; color:var(--paper-line); margin-bottom:1rem; display:block; } /* --- On-Grid Single Phase: Step 3 System Sizing Plant diagram --- */ .plant-image-wrap { background:#fff; border:1px solid var(--paper-line); border-radius:12px; padding:1rem; text-align:center; overflow-x:auto; } .plant-image-wrap img { display:block; width:100%; max-width:100%; height:auto; margin:0 auto; border-radius:8px; } .plant-stage { position:relative; container-type:inline-size; } .plant-value { position:absolute; top:20.9%; height:13.1%; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:700; color:#1a5fa6; white-space:nowrap; font-size:clamp(11px, 2.4vw, 28px); font-size:2.8cqw; line-height:1.1; } .plant-value.is-empty { color:#94a3b8; font-weight:500; } #ongridPlantConfig { left:3.82%; width:27.3%; } #ongridPlantDcdb { left:34.12%; width:24.38%; } #ongridPlantInverter { left:61.47%; width:31.73%; } /* --- On-Grid Three Phase: Step 3 overlay boxes (different artwork, so its own coordinates) --- */ #ongrid3pPlantConfig, #ongrid3pPlantDcdb, #ongrid3pPlantInverter { top:20.6%; height:10.6%; } #ongrid3pPlantConfig { left:1.6%; width:32.4%; } #ongrid3pPlantDcdb { left:35.8%; width:29.7%; } #ongrid3pPlantInverter { left:67.2%; width:31.2%; } /* --- Off-Grid (Without Grid): Step 4 overlay boxes. Text may wrap to two lines (e.g. long inverter ratings). --- */ #owgPlantStage { max-width:1000px; margin:0 auto; } #owgPlantPv, #owgPlantDcdb, #owgPlantInv { top:20.5%; height:15%; padding:0 1%; white-space:normal; font-size:3.2cqw; line-height:1.2; color:#0b4a8f; } #owgPlantPv { left:1.5%; width:32.8%; } #owgPlantDcdb { left:35.8%; width:30.4%; } #owgPlantInv { left:67.5%; width:30.8%; } /* --- Off-Grid (With Grid): Step 4 overlay boxes (own artwork with a Grid Meter, so its own coordinates). --- */ #wgPlantStage { max-width:1000px; margin:0 auto; } #wgPlantPv, #wgPlantDcdb, #wgPlantInv { top:20.5%; height:15.5%; padding:0 1%; white-space:normal; font-size:3.2cqw; line-height:1.2; color:#0b4a8f; } #wgPlantPv { left:1.3%; width:32.8%; } #wgPlantDcdb { left:35.7%; width:30.4%; } #wgPlantInv { left:67.6%; width:30.8%; } /* --- Hybrid (Three Phase): Step 4 overlay boxes (own artwork, own coordinates). One
per line (multi-MPPT shows one line per MPPT); font size is set from JS. --- */ #h3pPlantStage { max-width:1000px; margin:0 auto; } #h3pPlantPv, #h3pPlantDcdb, #h3pPlantInv { top:19.8%; height:13.2%; padding:0 1%; flex-direction:column; font-size:3.2cqw; line-height:1.2; color:#0b4a8f; } #h3pPlantPv { left:1.5%; width:32.4%; } #h3pPlantDcdb { left:36%; width:30%; } #h3pPlantInv { left:68%; width:31%; } /* --- Hybrid (Single Phase): Step 4 overlay boxes (own artwork, own coordinates). One
per line (multi-MPPT shows one line per MPPT); font size is set from JS. --- */ #hspPlantStage { max-width:1000px; margin:0 auto; } #hspPlantPv, #hspPlantDcdb, #hspPlantInv { top:21.2%; height:12.9%; padding:0 1%; flex-direction:column; font-size:3.2cqw; line-height:1.2; color:#0b4a8f; } #hspPlantPv { left:1.5%; width:32.4%; } #hspPlantDcdb { left:36%; width:30%; } #hspPlantInv { left:68%; width:31%; } @media(max-width:768px){ .plant-image-wrap { padding:.5rem; } } .calc-back-btn { position:absolute; top:0; right:0; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:#fff; font-weight:500; font-size:.85rem; padding:.6rem 1.2rem; border-radius:999px; cursor:pointer; transition:background .2s; display:inline-flex; align-items:center; gap:.5rem; font-family:'Space Grotesk',sans-serif; margin-top:0; z-index:10; } @media(max-width:768px){ .calc-back-btn { position:relative; top:auto; right:auto; margin:1.5rem auto 0; display:inline-flex; } } .calc-back-btn:hover { background:rgba(255,255,255,.2); } /* Slab modal inside calculator */ #ongridSlabModal { position:fixed; inset:0; background:rgba(15,23,42,.92); backdrop-filter:blur(6px); z-index:2000; display:none; align-items:flex-start; justify-content:center; padding:2rem 1rem; overflow-y:auto; } #ongridSlabModal.active { display:flex; } #ongrid3pSlabModal { position:fixed; inset:0; background:rgba(15,23,42,.92); backdrop-filter:blur(6px); z-index:2000; display:none; align-items:flex-start; justify-content:center; padding:2rem 1rem; overflow-y:auto; } #ongrid3pSlabModal.active { display:flex; } #owgSlabModal { position:fixed; inset:0; background:rgba(15,23,42,.92); backdrop-filter:blur(6px); z-index:2000; display:none; align-items:flex-start; justify-content:center; padding:2rem 1rem; overflow-y:auto; } #owgSlabModal.active { display:flex; } #wgSlabModal { position:fixed; inset:0; background:rgba(15,23,42,.92); backdrop-filter:blur(6px); z-index:2000; display:none; align-items:flex-start; justify-content:center; padding:2rem 1rem; overflow-y:auto; } #wgSlabModal.active { display:flex; } #hspSlabModal { position:fixed; inset:0; background:rgba(15,23,42,.92); backdrop-filter:blur(6px); z-index:2000; display:none; align-items:flex-start; justify-content:center; padding:2rem 1rem; overflow-y:auto; } #hspSlabModal.active { display:flex; } #h3pSlabModal { position:fixed; inset:0; background:rgba(15,23,42,.92); backdrop-filter:blur(6px); z-index:2000; display:none; align-items:flex-start; justify-content:center; padding:2rem 1rem; overflow-y:auto; } #h3pSlabModal.active { display:flex; } .ongrid-slab-content { max-width:1100px; width:100%; background:var(--paper); border-radius:var(--radius-lg); padding:2rem; box-shadow:var(--shadow-modal); position:relative; margin:0 auto; } .ongrid-slab-close { position:absolute; top:1rem; right:1rem; background:var(--paper-line); border:none; width:36px; height:36px; border-radius:50%; font-size:1.5rem; cursor:pointer; color:var(--ink-muted); display:flex; align-items:center; justify-content:center; font-family:'Space Grotesk', sans-serif; transition:all .2s; } .ongrid-slab-close:hover { background:var(--ink-muted); color:#fff; } .ongrid-slab-header { text-align:center; margin-bottom:1.5rem; } .ongrid-slab-header h1, .ongrid-slab-header h2 { font-size:1.5rem; font-weight:700; color:var(--blueprint); margin-bottom:.25rem; } .ongrid-slab-header p { color:var(--ink-muted); font-size:.9rem; } .ongrid-slab-table-wrap { overflow-x:auto; } .ongrid-slab-table { width:100%; border-collapse:collapse; font-size:.85rem; } .ongrid-slab-table thead tr { background:var(--paper); border-bottom:2px solid var(--paper-line); } .ongrid-slab-table th { padding:.6rem .75rem; text-align:left; font-weight:600; color:var(--ink-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; } .ongrid-slab-table td { padding:.5rem .75rem; border-bottom:1px solid var(--paper-line); } .ongrid-slab-table input { width:100%; padding:.5rem .6rem; font-size:.85rem; border:1.5px solid var(--paper-line); border-radius:6px; background:var(--paper); color:var(--ink); font-family:'IBM Plex Mono', monospace; transition:border-color .2s; } .ongrid-slab-table input:focus { outline:none; border-color:var(--amber); background:#fff; } .ongrid-slab-actions { display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin:1.5rem 0; } .ongrid-slab-secondary { display:inline-flex; align-items:center; gap:6px; padding:.6rem 1rem; border:1.5px solid var(--paper-line); border-radius:999px; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s; font-family:'Space Grotesk', sans-serif; background:var(--white); color:var(--ink); } .ongrid-slab-secondary:hover { border-color:var(--amber); background:var(--amber-soft); } .ongrid-slab-danger { background:none; border:none; color:var(--danger); cursor:pointer; font-size:1.1rem; padding:4px; } .ongrid-slab-warning { display:inline-flex; align-items:center; gap:6px; padding:.6rem 1rem; border:none; border-radius:999px; font-size:.8rem; font-weight:600; cursor:pointer; transition:all .2s; font-family:'Space Grotesk', sans-serif; background:var(--danger); color:#fff; } .ongrid-slab-warning:hover { background:#9A3520; } .ongrid-code-block { background:var(--blueprint); color:#e2e8f0; padding:1rem; border-radius:var(--radius); font-size:.78rem; overflow-x:auto; line-height:1.6; font-family:'IBM Plex Mono', monospace; white-space:pre; border:1px solid rgba(255,255,255,.1); margin-bottom:1rem; } .ongrid-code-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; } .ongrid-code-header h3 { font-size:.85rem; font-weight:600; color:#9FC1DE; } .ongrid-code-copy { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border:1px solid rgba(255,255,255,.2); border-radius:6px; font-size:.75rem; font-weight:500; cursor:pointer; transition:all .2s; font-family:'IBM Plex Sans', sans-serif; background:rgba(255,255,255,.08); color:#fff; } .ongrid-code-copy:hover { background:rgba(255,255,255,.18); } #ongridCodeOutput, #ongridJsonPreview, #ongrid3pCodeOutput, #owgSlabCodeOutput, #wgSlabCodeOutput, #hspSlabCodeOutput, #h3pSlabCodeOutput { display:none; } #ongridCodeOutput.active, #ongridJsonPreview.active, #ongrid3pCodeOutput.active, #owgSlabCodeOutput.active, #wgSlabCodeOutput.active, #hspSlabCodeOutput.active, #h3pSlabCodeOutput.active { display:block; } @media(max-width:768px){ .calc-hero h1, .calc-hero h2 { font-size:1.6rem; } .calc-card { padding:1.25rem; } .calc-results-grid { grid-template-columns:1fr; } .calc-btn-pdf { margin-left:0; margin-top:.5rem; } .calc-btn-slab { top:.75rem; right:.75rem; padding:.5rem 1rem; font-size:.78rem; } .ongrid-slab-content { padding:1.25rem; } .ongrid-slab-actions { flex-direction:column; align-items:stretch; } .ongrid-slab-actions button { justify-content:center; } } /* ===== HYBRID (THREE PHASE) CALCULATOR ===== */ .h3p-phase-r { color:#ef4444; } .h3p-phase-y { color:#d97706; } .h3p-phase-b { color:#3b82f6; } .h3p-calc-val { font-weight:700; display:inline-block; min-width:50px; background:var(--green-soft); color:var(--green); border-radius:6px; padding:4px 6px; } .h3p-total-row td { background:var(--amber-soft); font-weight:700; } .h3p-total-val { font-weight:800; color:var(--amber-dark); } .h3p-string-config { font-size:1.3rem; font-weight:800; display:block; } .h3p-phase-bar-wrap { margin-top:.5rem; } .h3p-phase-bar { height:10px; border-radius:6px; background:var(--paper-line); overflow:hidden; margin-bottom:10px; } .h3p-phase-bar-fill { height:100%; border-radius:6px; transition:width .5s ease; } .h3p-phase-label { display:flex; justify-content:space-between; font-size:.82rem; color:var(--ink-muted); margin-bottom:4px; font-weight:600; } .h3p-badge-pill { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:50px; font-weight:700; font-size:.9rem; } .h3p-badge-success { background:var(--green-soft); color:var(--green); } .h3p-badge-warning { background:var(--amber-soft); color:var(--amber-dark); } .h3p-badge-danger { background:rgba(220,38,38,.12); color:#dc2626; } /* ==== next