/* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ /* input, textarea { -webkit-user-select: auto; } */ /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; /* -webkit-line-break: after-white-space; -webkit-user-select: auto; */ } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* BEGIN SITE CSS */ html { box-sizing: border-box; font-family: Verdana, 'Open-sans', sans-serif; font-size: .9rem; } body { max-width: 900px; margin: auto; background-color: #dbdffd; } .link-header { padding: 5px; margin 15px 0; background: #dbdffd; color: rgb(53, 52, 52); text-decoration: underline; display: flex; justify-content: space-between; font-size: 14px; } #head-container { position: relative; flex-direction: row; background-color: #242F9B; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-bottom: 1px solid #8fa0af; } .logo { max-width: 225px; padding-top: 20px; padding-bottom: 5px; } .smartlogo { max-width: 180px; padding-top: 20px; padding-bottom: 5px; padding-right: 10px; } .title { padding: 10px; } h1 { font-family: "Trebuchet MS", sans-serif; font-size: 2.4em; letter-spacing: -2px; padding: 5px; color: #dbdffd; font-weight: 300; } .credits { font-size: .7em; position: absolute; bottom: 2px; right: 15px; color: #dbdffd; align-items: flex-end; align-content: flex-end; } #initial-entry { display: flex; justify-content: space-around; align-items: center; background-color: #646FD4; padding: 20px 0; border-radius: 10px; } input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=number] { width: 52px; background-color: #dbdffd; padding: 6px 6px; margin: 12px 12px 2px 0; border-radius: 5px; box-sizing: border-box; font-size: 14px; } .input-label { font-size: 12px; padding-right: 5px; color: lightgrey; } .input-area { display: flex; } .data-confirmation { display: flex; justify-content: center; padding: 15px 5px; font-size: .9rem; } .suggested-param { padding-bottom: 6px; font-size: .8rem; } .suggest-value { font-size: 1.2rem; text-decoration: underline; } .customize-section { background-color: #646FD4; display: flex; flex-direction: row; justify-content: space-around; align-items: center; padding: 20px 0; border-radius: 10px; } .toggle-box { display: flex; flex-direction: row; padding-left: 15px; } .toggle { padding-top: 15px; } .lens-design-section { display: flex; flex-direction: row; background-color: #646FD4; border-top: 1px solid #8fa0af; padding-top: 15px; padding-bottom: 15px; border-radius: 10px; } .zone-display { font-size: 1.1rem; font-weight: 600; } .stack { padding-bottom: 0px; } .instruct-custom { padding-bottom: 10px; padding-left: 5px; max-width: 250px; font-size: .9rem; color: #323131; } .elevation-input { display: flex; flex-direction: column; } .elevation-zones { display: flex; flex-direction: row; align-items: center; } .zone-size { display: inline-block; margin: 10px; } .zone-headers { padding: 8px 8px; } .lens-specs { display: flex; flex-direction: column; flex-grow: 2; padding-right: 20px; } .lens-specs-display { border-radius: 30px; -moz-box-shadow: 10px 10px 5px #111a68; -webkit-box-shadow: 10px 10px 5px #111a68; box-shadow: 10px 10px 5px #111a68; } .zone-labels:first-of-type { border-top-left-radius: 10px; border-top-right-radius: 10px; } .zone-labels { display: flex; flex-direction: row; justify-content: space-around; background-color: #242F9B; color: whitesmoke; } .zone-curves { background-color: #9BA3EB; color: rgb(53, 49, 49); font-weight: 600; display: flex; flex-direction: row; justify-content: space-around; border-bottom: .5px solid #8fa0af; font-size: 1.2rem; padding: 0; } .lens-overall { background-color: #9BA3EB; color: rgb(53, 49, 49); font-weight: 600; display: flex; flex-direction: row; justify-content: space-around; align-items: center; font-size: 1.3rem; padding: 20px; } .last-curves { border-bottom-left-radius: 10PX; border-bottom-right-radius: 10px; } .curves { padding: 20px; width: 100px; } .fetch { display: flex; flex-direction: column; padding: 20px 75px 1px 75px; align-items: flex-end; } .angles-font { font-size: .9rem; min-width: 110px; } .diop-output { font-size: .8rem; color: #444343; } .curve-offset-font { font-size: 1.3rem; } .lens-buttons { display: flex; } .min { justify-items: baseline; } .spacer { height: 2px; } .flat-steep { font-size: 1.2rem; } /* BUTTONS */ .button-class { font-size: 12px; font-family: Verdana, Geneva, Tahoma, sans-serif; text-align: center; width: 100px; height: 30px; border-width: 1px; color: #242F9B; border-color: #dcdcdc; font-weight: bold; border-top-left-radius: 6px; border-top-right-radius: 6px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; box-shadow: inset 0px 1px 0px 0px #ffffff; text-shadow: inset 0px 1px 0px #ffffff; background: linear-gradient(#ededed, #dfdfdf); } .button-class:hover { background: linear-gradient(#dfdfdf, #ededed); cursor: pointer; outline: none; border-color: #9ecaed; box-shadow: 0 0 10px #242F9B; } .button-class:active { transform: translateY(2px); } .button-class:focus-visible { background: linear-gradient(#dfdfdf, #ededed); outline: none; border-color: #9ecaed; box-shadow: 0 0 10px #242F9B; } .clear-form { color: #9b3a24; } /* CHECKBOX TOGGLE */ .b-contain *, .b-contain *::before, .b-contain *::after { box-sizing: content-box !important; } .b-contain input { position: absolute; z-index: -1; opacity: 0; } .b-contain span { line-height: 1.5; font-size: 1rem; font-family: inherit; } .b-contain { display: table; position: relative; padding-left: 2rem; cursor: pointer; margin-bottom: 0.4rem; } .b-contain input[type="checkbox"]~.b-input { position: absolute; top: 0; left: 0; height: 1.25rem; width: 1.25rem; background: #f1f5f9; transition: background 250ms; border: 1px solid #94a3b8; border-radius: 0.2rem; } .b-contain input[type="radio"]~.b-input { position: absolute; top: 0; left: 0; height: 1.25rem; width: 1.25rem; background: #f1f5f9; transition: background 250ms; border: 1px solid #94a3b8; border-radius: 3rem; } .b-contain input[type="checkbox"]~.b-input::after { content: ""; position: absolute; display: none; left: 7px; top: 3px; width: 0.3rem; height: 0.6rem; border: solid #ffffff; border-width: 0 2px 2px 0; transition: background 250ms; transform: rotate(45deg); } .b-contain input[type="radio"]~.b-input::after { content: ""; position: absolute; display: none; left: 4px; top: 4px; width: 0.75rem; height: 0.75rem; border-radius: 3rem; background: #ffffff; transition: background 250ms; } .b-contain input[type="checkbox"]:disabled~.b-input::after { border-color: #ffffff; } .b-contain input:checked~.b-input::after { display: block; } .b-contain:hover input[type="checkbox"]:not([disabled])~.b-input, .b-contain input[type="checkbox"]:focus~.b-input { background: #e2e8f0; border-color: #64748b; } .b-contain:hover input[type="radio"]:not([disabled])~.b-input, .b-contain input[type="radio"]:focus~.b-input { background: #e2e8f0; border-color: #64748b; } .b-contain input:focus~.b-input { box-shadow: 0 0 0 2px #60a5fa; } .b-contain input[type="checkbox"]:checked~.b-input { background: #3b82f6; border-color: #1d4ed8; } .b-contain input[type="radio"]:checked~.b-input { background: #3b82f6; border-color: #1d4ed8; } .b-contain input[type="checkbox"]:disabled~.b-input, .b-contain input[type="radio"]:disabled~.b-input { opacity: 0.5; cursor: not-allowed; } .b-contain input[type="radio"]:disabled~.b-input::after { background: #ffffff; } .b-contain:hover input[type="checkbox"]:not([disabled]):checked~.b-input, .b-contain input[type="checkbox"]:checked:focus~.b-input { background: #2563eb; border-color: #1e40af; } .b-contain:hover input[type="radio"]:not([disabled]):checked~.b-input, .b-contain input[type="radio"]:checked:focus~.b-input { background: #2563eb; border-color: #1e40af; } .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; } .up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } /* === Maxim3D modern studio refresh, June 2026 === */ :root { --studio-ink: #172033; --studio-muted: #64708a; --studio-line: rgba(37, 47, 155, 0.14); --studio-bg: #f6f8ff; --studio-panel: rgba(255,255,255,0.78); --studio-panel-solid: #ffffff; --studio-primary: #252f9b; --studio-primary-2: #1668f2; --studio-blue-soft: #eaf0ff; --studio-radius: 22px; --studio-shadow: 0 18px 45px rgba(19, 31, 82, 0.12); --studio-shadow-sm: 0 10px 24px rgba(19, 31, 82, 0.10); } html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; color: var(--studio-ink); background: radial-gradient(circle at top left, #dfe8ff 0, var(--studio-bg) 34%, #eef3ff 100%); } body { max-width: 1180px; margin: 0 auto; padding: 0 18px 36px; background: transparent; } #head-container, #initial-entry, .customize-section, .lens-design-section, .data-confirmation { border: 1px solid rgba(255,255,255,0.72); } #head-container { margin-top: 8px; padding: 20px 28px; min-height: 108px; border-radius: 0 0 28px 28px; background: linear-gradient(135deg, rgba(20,31,112,0.98), rgba(37,47,155,0.94) 52%, rgba(23,104,242,0.86)), radial-gradient(circle at 28% 15%, rgba(255,255,255,0.26), transparent 28%); box-shadow: var(--studio-shadow); overflow: hidden; } #head-container::after { content: ""; position: absolute; inset: auto -80px -130px auto; width: 320px; height: 220px; border-radius: 999px; background: rgba(255,255,255,0.14); filter: blur(1px); } .logo { max-width: 275px; padding: 0; z-index: 1; } .title { z-index: 1; text-align: right; padding: 0 0 4px 24px; } h1 { font-family: inherit; font-size: clamp(2rem, 4.8vw, 3.05rem); letter-spacing: -0.07em; font-weight: 750; padding: 0; color: #fff; } .credits { position: static; margin-top: 6px; font-size: 0.78rem; color: rgba(255,255,255,0.82); } #initial-entry, .customize-section, .lens-design-section { margin-top: 14px; background: var(--studio-panel); backdrop-filter: blur(16px); border-radius: var(--studio-radius); box-shadow: var(--studio-shadow-sm); } #initial-entry { display: grid; grid-template-columns: minmax(120px, 0.8fr) minmax(220px, 1.3fr) minmax(300px, 1.8fr) minmax(220px, 1.25fr); gap: 18px; align-items: start; padding: 22px; } #initial-entry > div, .customize-section > div, .elevation-input, .lens-specs { min-width: 0; } #initial-entry p, .customize-section p, .elevation-input p { color: var(--studio-ink); } .hvid > p, .trial > p, .over-ref > p, .suggested-param p { font-weight: 760; letter-spacing: -0.02em; margin-bottom: 6px; } .input-area { gap: 10px; flex-wrap: wrap; } .input-field { position: relative; } input[type=number] { width: 72px; min-height: 42px; margin: 6px 0 4px; padding: 9px 10px; border: 1px solid #c8d2ef; border-radius: 12px; background: #ffffff; color: #101827; font-size: 1rem; box-shadow: inset 0 1px 2px rgba(20,31,112,0.06); } input[type=number]:focus { outline: 3px solid rgba(22,104,242,0.18); border-color: #4d83ef; background: #fff; } .input-label { font-size: 0.77rem; line-height: 1.15; color: var(--studio-muted) !important; } .instruct-custom { max-width: 280px; padding: 0; font-size: 0.92rem; line-height: 1.28; color: var(--studio-muted); } .data-confirmation { margin: 14px 0; padding: 14px 18px; border-radius: 18px; background: rgba(255,255,255,0.64); box-shadow: 0 8px 22px rgba(19,31,82,0.06); } .data-confirmation p { line-height: 1.45; } .zone-display { font-size: 1.25rem; font-weight: 820; color: #101827; } .customize-section { display: grid; grid-template-columns: 1fr 1.1fr 1.35fr 1.45fr; gap: 18px; align-items: center; padding: 22px; } .suggested-param { padding: 0; } .toggle-box { align-items: center; gap: 10px; padding-left: 0; margin-top: 6px; } .toggle { padding-top: 4px; } .b-contain { margin: 0; padding-left: 1.75rem; } .b-contain input[type="checkbox"]~.b-input { height: 1.15rem; width: 1.15rem; border-radius: 0.42rem; border-color: #b5c1dc; background: #fff; } .b-contain input[type="checkbox"]:checked~.b-input { background: linear-gradient(135deg, var(--studio-primary-2), var(--studio-primary)); border-color: var(--studio-primary-2); } .button-class { width: auto; min-width: 116px; height: 42px; padding: 0 18px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--studio-primary-2), var(--studio-primary)); box-shadow: 0 12px 22px rgba(37,47,155,0.22); font-family: inherit; font-size: 0.9rem; font-weight: 760; text-shadow: none; transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease; } .button-class:hover, .button-class:focus-visible { background: linear-gradient(135deg, #2b76ff, #202a92); box-shadow: 0 14px 28px rgba(37,47,155,0.28); outline: 3px solid rgba(22,104,242,0.18); filter: saturate(1.03); } .button-class:active { transform: translateY(1px) scale(0.99); } .clear-form { color: #fff; background: linear-gradient(135deg, #9b3a24, #6f2718); } .lens-design-section { display: flex; gap: 22px; padding: 20px; border-top: 0; } .elevation-input { flex: 0 0 300px; padding: 14px; border-radius: 18px; background: rgba(234,240,255,0.68); border: 1px solid var(--studio-line); } .elevation-zones { gap: 10px; align-items: center; padding: 6px 0; } .zone-size { width: 124px; margin: 0; color: var(--studio-muted); } .fetch { padding: 16px 0 0; align-items: flex-start; } .lens-specs { padding-right: 4px; flex-grow: 1; } .lens-specs-display { overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid rgba(37,47,155,0.12); box-shadow: 0 24px 50px rgba(19,31,82,0.16); } .zone-labels:first-of-type { border-radius: 0; padding: 16px 20px; background: linear-gradient(135deg, var(--studio-primary), #173fbd); } .zone-labels:first-of-type h1 { font-size: 2rem; letter-spacing: -0.06em; width: 100%; text-align: center; } .zone-labels { background: #f0f4ff; color: var(--studio-primary); border-bottom: 1px solid var(--studio-line); } .zone-headers { padding: 12px 14px; font-weight: 760; } .lens-overall { background: linear-gradient(180deg, #ffffff, #f6f8ff); color: var(--studio-ink); padding: 22px 20px; border-bottom: 1px solid var(--studio-line); } .curve-values, .curves { text-align: center; } .curves { width: 118px; padding: 18px 12px; } .zone-curves { background: #ffffff; color: var(--studio-ink); border-bottom: 1px solid var(--studio-line); font-size: 1.2rem; } .zone-curves:nth-of-type(even) { background: #f8faff; } .diop-output { color: var(--studio-muted); font-size: 0.78rem; font-weight: 650; } .angles-font { min-width: 120px; color: var(--studio-muted); font-weight: 700; } .last-curves { border-radius: 0; background: linear-gradient(135deg, #f0f4ff, #e5ecff); } .lens-buttons { gap: 14px; align-items: center; } .arrow { border-color: var(--studio-primary); } @media (max-width: 920px) { #head-container, #initial-entry, .customize-section, .lens-design-section { border-radius: 20px; } #head-container { flex-direction: column; align-items: flex-start; gap: 12px; } .title { text-align: left; padding-left: 0; } #initial-entry, .customize-section { grid-template-columns: 1fr; } .lens-design-section { flex-direction: column; } .elevation-input { flex-basis: auto; } } @media (max-width: 640px) { body { padding-inline: 10px; } #head-container, #initial-entry, .customize-section, .lens-design-section { padding: 16px; } .logo { max-width: 220px; } .zone-labels, .zone-curves, .lens-overall { min-width: 650px; } .lens-specs-display { overflow-x: auto; } } /* === Compact cockpit pass: entry-first output, June 2026 === */ body { max-width: 1320px; padding: 0 14px 24px; } #head-container { min-height: 64px; margin-top: 6px; padding: 10px 16px; border-radius: 0 0 18px 18px; gap: 16px; } .logo { max-width: 190px; flex: 0 0 auto; } .title { text-align: left; flex: 1 1 auto; padding: 0; } h1 { font-size: clamp(1.35rem, 2.3vw, 2rem); letter-spacing: -0.055em; } .credits { margin-top: 2px; font-size: 0.68rem; } .profile-rail { position: relative; z-index: 2; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 520px; } .profile-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.86); background: rgba(255,255,255,0.12); font-size: 0.78rem; font-weight: 750; white-space: nowrap; } .profile-chip input { appearance: auto; width: 14px; height: 14px; } .profile-chip.ghost { opacity: 0.45; cursor: not-allowed; } #initial-entry { grid-template-columns: 0.7fr 1fr 1.45fr 1.1fr; gap: 12px; padding: 14px; margin-top: 10px; } #initial-entry p, .customize-section p, .elevation-input p { font-size: 0.88rem; } .hvid > p, .trial > p, .over-ref > p, .suggested-param p { margin-bottom: 2px; } input[type=number] { width: 66px; min-height: 34px; padding: 6px 8px; margin: 3px 0 2px; border-radius: 9px; font-size: 0.93rem; } .input-area { gap: 8px; } .input-label { font-size: 0.68rem; } .instruct-custom { max-width: 260px; font-size: 0.78rem; line-height: 1.2; } .button-class { min-width: 96px; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 0.78rem; } .data-confirmation { margin: 10px 0; padding: 8px 12px; border-radius: 14px; font-size: 0.78rem; } .zone-display { font-size: 1rem; } .customize-section { grid-template-columns: 1fr 1fr 1.3fr; gap: 14px; padding: 14px; margin-top: 10px; } .toggle-box { gap: 8px; margin-top: 2px; } .lens-design-section { margin-top: 10px; padding: 14px; gap: 14px; align-items: flex-start; } .elevation-input { flex: 0 0 315px; padding: 10px; border-radius: 14px; } .elevation-zones { gap: 8px; padding: 3px 0; } .zone-size { width: 130px; font-size: 0.78rem; } .fetch { padding: 10px 0 0; } .lens-specs { padding-right: 0; } .entry-card { border-radius: 16px; box-shadow: 0 12px 26px rgba(19,31,82,0.12); } .entry-card-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; background: linear-gradient(135deg, var(--studio-primary), #173fbd); color: #fff; } .entry-card-header h2 { font-size: 1.15rem; font-weight: 820; letter-spacing: -0.035em; } .eyebrow { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.72; margin-bottom: 1px; } .micro-adjust { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; white-space: nowrap; } .icon-button { display: inline-grid; place-items: center; width: 28px; height: 26px; border-radius: 8px; color: #fff; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.22); } .icon-button:hover { background: rgba(255,255,255,0.25); } .core-output-grid { display: grid; grid-template-columns: repeat(5, minmax(88px, 1fr)); gap: 1px; background: var(--studio-line); border-bottom: 1px solid var(--studio-line); } .output-tile { background: #fff; padding: 10px 12px; min-height: 58px; } .output-tile span { display: block; color: var(--studio-muted); font-size: 0.7rem; font-weight: 780; text-transform: uppercase; letter-spacing: 0.08em; } .output-tile strong { display: block; margin-top: 3px; color: var(--studio-ink); font-size: 1.25rem; font-weight: 840; letter-spacing: -0.035em; } .entry-table-wrap { overflow-x: auto; } .entry-table { width: 100%; min-width: 560px; background: #fff; } .entry-table th, .entry-table td { padding: 10px 12px; border-bottom: 1px solid var(--studio-line); text-align: center; } .entry-table th { color: var(--studio-muted); background: #f6f8ff; font-size: 0.72rem; font-weight: 820; text-transform: uppercase; letter-spacing: 0.08em; } .entry-table td { font-size: 1.18rem; font-weight: 820; color: var(--studio-ink); } .entry-table td:first-child, .entry-table th:first-child { text-align: left; color: var(--studio-primary); } .entry-table td:last-child, .entry-table th:last-child { color: var(--studio-muted); font-size: 0.88rem; } .hidden-calculation-values { display: none !important; } .lens-buttons { gap: 10px; } .lens-buttons .fetch { padding-top: 10px; } #sag-adj-button .elevation-input { flex-basis: 315px; } #sag-adjusted-values { flex: 1 1 auto; } @media (max-width: 1060px) { #head-container { flex-wrap: wrap; } .profile-rail { flex: 1 1 100%; justify-content: flex-start; } #initial-entry, .customize-section { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lens-design-section { flex-direction: column; } .elevation-input { flex-basis: auto; width: 100%; } } @media (max-width: 720px) { #initial-entry, .customize-section { grid-template-columns: 1fr; } .core-output-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); } } /* Phase 1 cockpit refinements: zone columns match FocalPoints entry flow */ .profile-rail { max-width: 320px; } .profile-chip:not(.ghost) { opacity: 1; cursor: pointer; } .output-tile { padding: 12px 14px; min-height: 70px; } .output-tile strong { font-size: clamp(1.55rem, 2.2vw, 2.05rem); line-height: 1.05; } .output-tile strong span { display: inline; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: none; } .zone-column-grid { display: grid; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 1px; background: var(--studio-line); border-top: 1px solid var(--studio-line); border-radius: 0 0 14px 14px; overflow: hidden; } .zone-output-column { background: #fff; min-width: 0; } .zone-output-column h3 { padding: 10px 14px; color: var(--studio-primary); background: #f6f8ff; font-size: 0.82rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--studio-line); } .angle-row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 10px; min-height: 42px; padding: 7px 14px; border-bottom: 1px solid var(--studio-line); } .angle-row span { color: var(--studio-muted); font-size: 0.78rem; font-weight: 820; } .angle-row strong { color: var(--studio-ink); font-size: 1.42rem; line-height: 1; font-weight: 860; letter-spacing: -0.035em; text-align: right; } .angle-row.width-row { background: #fbfcff; border-bottom: 0; } .angle-row.width-row strong { color: var(--studio-muted); font-size: 1.05rem; } @media (max-width: 880px) { .zone-column-grid { grid-template-columns: 1fr; } } /* === Dense cockpit pass: reduce screen footprint while keeping readability === */ body { max-width: 1240px; padding: 0 10px 16px; } #head-container { min-height: 48px; margin-top: 4px; padding: 6px 14px; border-radius: 0 0 14px 14px; } .logo { max-width: 150px; padding: 0; } .logo img { max-height: 34px; width: auto; object-fit: contain; } .title h1, h1 { font-size: clamp(1.15rem, 1.7vw, 1.55rem); } .credits { font-size: 0.58rem; } .profile-rail { gap: 6px; max-width: 260px; } .profile-chip { min-height: 26px; padding: 0 9px; font-size: 0.72rem; } .profile-chip input { width: 12px; height: 12px; } #initial-entry { grid-template-columns: 0.65fr 0.95fr 1.35fr 1fr; gap: 10px; padding: 10px 12px; margin-top: 8px; border-radius: 16px; } #initial-entry p, .customize-section p, .elevation-input p { font-size: 0.78rem; line-height: 1.15; } .input-area { gap: 6px; } input[type=number] { width: 58px; min-height: 30px; padding: 4px 7px; margin: 2px 0 1px; border-radius: 8px; font-size: 0.86rem; } .input-label { font-size: 0.62rem; line-height: 1.1; } .instruct-custom { max-width: 230px; font-size: 0.72rem; line-height: 1.13; padding: 0; } .button-class { min-width: 86px; height: 30px; padding: 0 10px; border-radius: 9px; font-size: 0.72rem; } .data-confirmation { margin: 8px 0; padding: 6px 10px; min-height: 34px; border-radius: 12px; font-size: 0.72rem; } .zone-display { font-size: 0.93rem; } .customize-section { grid-template-columns: 1fr 1fr 1.2fr; gap: 10px; padding: 10px 12px; margin-top: 8px; border-radius: 16px; } .suggested-param { padding-bottom: 2px; } .toggle-box { gap: 6px; padding-left: 0; align-items: center; } .toggle { padding-top: 3px; } .b-contain { padding-left: 1.45rem; margin-bottom: 0; } .b-contain input[type="checkbox"]~.b-input { width: 1rem; height: 1rem; } .b-contain input[type="checkbox"]~.b-input::after { left: 5px; top: 2px; } .lens-design-section { margin-top: 8px; padding: 10px 12px; gap: 12px; border-radius: 18px; } .elevation-input { flex: 0 0 290px; padding: 9px; border-radius: 13px; } .elevation-zones { gap: 6px; padding: 2px 0; } .zone-size { width: 122px; margin: 4px 6px 4px 0; font-size: 0.72rem; } .fetch { padding: 8px 0 0; } .entry-card { border-radius: 14px; box-shadow: 0 9px 20px rgba(19,31,82,0.11); } .entry-card-header { padding: 8px 12px; } .entry-card-header h2 { font-size: 1rem; } .eyebrow { font-size: 0.58rem; margin-bottom: 0; } .micro-adjust { font-size: 0.66rem; gap: 6px; } .icon-button { width: 25px; height: 24px; border-radius: 7px; } .core-output-grid { grid-template-columns: 0.9fr 1fr 1fr 0.9fr 0.9fr; } .output-tile { padding: 8px 12px; min-height: 52px; } .output-tile span { font-size: 0.62rem; letter-spacing: 0.075em; } .output-tile strong { margin-top: 1px; font-size: clamp(1.42rem, 1.85vw, 1.78rem); } .zone-column-grid { grid-template-columns: repeat(3, minmax(150px, 1fr)); } .zone-output-column h3 { padding: 7px 11px; font-size: 0.72rem; letter-spacing: 0.045em; } .angle-row { grid-template-columns: 46px 1fr; min-height: 33px; padding: 5px 11px; gap: 8px; } .angle-row span { font-size: 0.68rem; } .angle-row strong { font-size: 1.18rem; } .angle-row.width-row strong { font-size: 0.9rem; } .lens-buttons { gap: 8px; } .lens-buttons .fetch { padding-top: 8px; } .lens-buttons .instruct-custom { font-size: 0.64rem; } #sag-adj-button .elevation-input { flex-basis: 290px; } /* Let wide monitors breathe, but stop the page from becoming a billboard. */ @media (min-width: 1320px) { body { max-width: 1180px; } } /* Phase 1d: combined confirmation/options row and vertex distance field */ .vertex-field input { width: 56px; } .customize-section { grid-template-columns: 1.05fr 1fr 1fr 1.2fr; align-items: stretch; } .confirmation-card { display: flex; align-items: center; justify-content: flex-start; margin: 0; padding: 8px 12px; min-height: auto; border-radius: 12px; background: rgba(255,255,255,0.42); border-right: 1px solid rgba(103,122,173,0.28); box-shadow: none; } .confirmation-card p { text-align: left; font-size: 0.75rem; line-height: 1.35; } .confirmation-card .zone-display { font-size: 0.9rem; } @media (max-width: 1050px) { .customize-section { grid-template-columns: 1fr 1fr; } .confirmation-card { grid-column: 1 / -1; } } /* Phase 1e: compact status card and tighter sag controls */ .design-summary-card { background: rgba(255,255,255,0.56); border: 1px solid rgba(103,122,173,0.22); border-radius: 12px; padding: 8px 10px; min-width: 0; } .summary-card-header { color: var(--studio-muted); font-size: 0.62rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; } .summary-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: baseline; } .summary-grid span { color: var(--studio-muted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .summary-grid strong, .summary-grid strong span { color: var(--studio-ink); font-size: 0.88rem; font-weight: 850; letter-spacing: -0.02em; text-transform: none; } .customize-section { grid-template-columns: 1fr 0.9fr 0.9fr 1fr; } .customize-section > div:not(.design-summary-card) { min-width: 0; } .elevation-input .instruct-custom p { color: var(--studio-muted); } .elevation-input .zone-size p { font-weight: 780; } @media (max-width: 1050px) { .design-summary-card { grid-column: 1 / -1; } } /* Phase 1f: keep sph/cyl/axis power on one line */ .core-output-grid { grid-template-columns: 0.85fr 1.55fr 0.9fr 0.75fr 0.75fr; } .power-tile strong { white-space: nowrap; font-size: clamp(1.18rem, 1.45vw, 1.52rem); line-height: 1.05; letter-spacing: -0.045em; } .power-tile strong span { display: inline; } /* Mode and algorithm breadcrumbs */ .algorithm-label { margin-top: 2px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.78; } .mode-row-label { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(15, 23, 42, 0.12); } .mode-row-value { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(15, 23, 42, 0.12); } /* === Phase 2A inline quadrant sag adjustment === */ .angle-row:not(.width-row) { grid-template-columns: 42px minmax(58px, 1fr) 52px; } .inline-sag-input { width: 50px !important; min-height: 26px !important; margin: 0 !important; padding: 3px 5px !important; border-radius: 7px !important; font-size: 0.78rem !important; text-align: center; background: #f8faff !important; border: 1px solid rgba(100,112,138,0.28) !important; color: var(--studio-ink) !important; } .inline-sag-input:focus { background: #ffffff !important; border-color: var(--studio-primary-2) !important; outline: 2px solid rgba(22,104,242,0.16) !important; } .angle-row.is-adjusted { background: #fff8e8; } .angle-row.is-adjusted strong { color: #8a4b00; } .angle-row.is-adjusted .inline-sag-input { border-color: rgba(138,75,0,0.35) !important; background: #fffdf7 !important; } /* === Phase 2B inline editing refinements === */ .bc-adjust-control { gap: 6px; } .bc-adjust-label { display: grid; gap: 2px; justify-items: center; color: rgba(255,255,255,0.86); font-size: 0.66rem; font-weight: 760; text-transform: none; letter-spacing: 0.06em; } .bc-adjust-input { width: 58px !important; min-height: 28px !important; margin: 0 !important; padding: 3px 5px !important; border-radius: 8px !important; text-align: center; background: rgba(255,255,255,0.96) !important; border: 1px solid rgba(255,255,255,0.35) !important; color: var(--studio-ink) !important; font-size: 0.82rem !important; font-weight: 820; } .bc-adjust-title { font-size: 0.78rem; font-weight: 700; color: #fff; text-transform: none; } .bc-adjust-input-wrap { position: relative; } .bc-adjust-input{ text-align:center; padding-right:40px; } .bc-unit-inside{ right:8px; color:#d4d7de; font-size:0.72rem; font-weight:600; } .inline-sag-input::-webkit-inner-spin-button, .inline-sag-input::-webkit-outer-spin-button, .bc-adjust-input::-webkit-inner-spin-button, .bc-adjust-input::-webkit-outer-spin-button { -webkit-appearance: auto; opacity: 1; } .inline-sag-input, .bc-adjust-input { appearance: auto; -moz-appearance: auto; } .angle-row.is-adjusted-positive { background: #edf9f2; } .angle-row.is-adjusted-positive strong { color: #16633a; } .angle-row.is-adjusted-positive .inline-sag-input, .angle-row.is-adjusted-positive .z4-step-control { border-color: rgba(22,99,58,0.30) !important; background: #f8fffb !important; } .angle-row.is-adjusted-negative { background: #fff2ed; } .angle-row.is-adjusted-negative strong { color: #93401f; } .angle-row.is-adjusted-negative .inline-sag-input, .angle-row.is-adjusted-negative .z4-step-control { border-color: rgba(147,64,31,0.30) !important; background: #fffaf7 !important; } .z4-angle-row:not(.width-row) { grid-template-columns: 42px minmax(58px, 1fr) 104px; } .z4-step-control { display: grid; grid-template-columns: 22px minmax(54px, 1fr) 22px; align-items: center; gap: 3px; min-height: 26px; padding: 2px 3px; border-radius: 8px; background: #f8faff; border: 1px solid rgba(100,112,138,0.28); } .mini-step-button { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #eaf0ff; color: var(--studio-primary); font-size: 0.72rem; font-weight: 900; line-height: 1; cursor: pointer; } .mini-step-button:hover, .mini-step-button:focus-visible { background: #dce7ff; outline: 2px solid rgba(22,104,242,0.16); } .z4-step-label { color: var(--studio-muted); font-size: 0.63rem; font-weight: 850; text-align: center; line-height: 1.05; letter-spacing: -0.02em; } /* === Phase 2D angle offset visualizer === */ .lens-action-panel { display: grid !important; grid-template-columns: minmax(185px, 0.75fr) minmax(170px, 0.55fr) minmax(440px, 1.7fr); gap: 12px; align-items: stretch; margin-top: 12px; } .lens-action-panel[style*="display:none"], .lens-action-panel[style*="display: none"] { display: none !important; } .action-cell { min-width: 0; padding: 14px 16px; border: 1px solid rgba(37,47,155,0.12); border-radius: 16px; background: rgba(255,255,255,0.78); box-shadow: 0 10px 24px rgba(19,31,82,0.07); } .action-cell-title { margin-bottom: 8px; color: #0b3aa4; font-size: 0.72rem; font-weight: 860; letter-spacing: 0.08em; text-transform: uppercase; } .adjustment-note-cell p, .angle-reference-copy p, .quiet-note { color: var(--studio-muted); font-size: 0.78rem; line-height: 1.25; } .legend-chip { display: inline-block; width: 9px; height: 18px; margin-right: 8px; border-radius: 999px; vertical-align: middle; } .positive-chip { background: #ecfdf4; border: 1px solid rgba(22,99,58,0.45); } .negative-chip { background: #fff2ed; border: 1px solid rgba(147,64,31,0.45); } .action-button-cell { display: grid; grid-template-columns: 1fr; align-content: center; justify-items: center; gap: 12px; } .angle-offset-card { display: grid; grid-template-columns: minmax(112px, 0.55fr) minmax(180px, 1fr) minmax(135px, 0.7fr); gap: 12px; align-items: center; } .angle-reference-value { color: var(--studio-ink); font-size: clamp(1.7rem, 2.2vw, 2.35rem); font-weight: 900; line-height: 1; letter-spacing: -0.06em; } .angle-visual-wrap { display: flex; justify-content: center; align-items: center; } .angle-visualizer { width: 210px; height: 170px; } .angle-visualizer svg { width: 100%; height: 100%; overflow: visible; } .eye-axis { stroke: rgba(100,112,138,0.56); stroke-width: 1.25; stroke-dasharray: 4 4; } .eye-axis-label { fill: #7b859b; font-size: 11px; font-weight: 760; } .eye-circle { fill: #ffffff; stroke: #101827; stroke-width: 1.5; } .input-meridian-line { stroke-width: 2.7; stroke-linecap: round; } .input-meridian-dot { stroke: #fff; stroke-width: 1.6; } .input-meridian-label { font-size: 11px; font-weight: 860; } .rotation-arc { fill: none; stroke: #2747c7; stroke-width: 1.7; stroke-linecap: round; } .rotation-arrow-text { fill: #2747c7; font-size: 10px; font-weight: 850; } .angle-key { padding-left: 12px; border-left: 1px solid rgba(37,47,155,0.12); } .angle-key-row { display: grid; grid-template-columns: 14px 44px 1fr; align-items: center; gap: 6px; margin: 4px 0; color: var(--studio-muted); font-size: 0.78rem; } .angle-key-row strong::before { content: "→ "; color: var(--studio-muted); font-weight: 700; } .angle-key-row strong { color: var(--studio-ink); font-weight: 850; } .angle-dot { width: 9px; height: 9px; border-radius: 50%; } .dot-blue { background: #1e50ff; } .dot-green { background: #0b7d27; } .dot-red { background: #e00000; } .dot-orange { background: #ff710c; } @media (max-width: 1050px) { .lens-action-panel { grid-template-columns: 1fr; } .angle-offset-card { grid-template-columns: 1fr; } .angle-key { padding-left: 0; border-left: 0; border-top: 1px solid rgba(37,47,155,0.12); padding-top: 10px; } } /* === Phase 2G: control continuity and Z4 flat/steep pills === */ .angle-row:not(.width-row) { grid-template-columns: 42px minmax(58px, 1fr) 136px; } .inline-adjust-control { display: grid; grid-template-columns: 28px 58px 28px; align-items: center; gap: 3px; justify-content: end; min-height: 30px; padding: 2px 3px; border-radius: 10px; background: #f8faff; border: 1px solid rgba(100,112,138,0.22); } .inline-adjust-control .inline-sag-input { width: 58px !important; min-height: 26px !important; } .angle-row.is-adjusted-positive .inline-adjust-control { border-color: rgba(22,99,58,0.30); background: #f8fffb; } .angle-row.is-adjusted-negative .inline-adjust-control { border-color: rgba(147,64,31,0.30); background: #fffaf7; } .z4-angle-row:not(.width-row) { grid-template-columns: 42px minmax(58px, 1fr) 158px; } .z4-step-control.z4-pill-control { grid-template-columns: 44px minmax(44px, 1fr) 52px; gap: 4px; min-height: 30px; padding: 2px 4px; } .z4-pill-button { min-width: 0; height: 24px; padding: 0 7px; border-radius: 7px; font-size: 0.66rem; font-weight: 850; text-align: center; cursor: pointer; border: 1px solid rgba(37,47,155,0.12); background: #eef3ff; color: var(--studio-primary); } .z4-pill-button:hover, .z4-pill-button:focus-visible { outline: 2px solid rgba(22,104,242,0.16); background: #e2ebff; } .z4-flat-button { color: #16633a; background: #eefbf4; border-color: rgba(22,99,58,0.22); } .z4-steep-button { color: #93401f; background: #fff2ed; border-color: rgba(147,64,31,0.22); } .z4-step-label { font-size: 0.61rem; } .action-button-cell .button-class { min-width: 98px; width: 98px; height: 38px; padding: 0 10px; } .output-tile.is-adjusted-positive { background: #edf9f2; } .output-tile.is-adjusted-positive strong { color: #16633a; } .output-tile.is-adjusted-negative { background: #fff2ed; } .output-tile.is-adjusted-negative strong { color: #93401f; } .bc-adjust-input.is-adjusted-positive { border-color: rgba(22,99,58,0.40) !important; background: #f8fffb !important; } .bc-adjust-input.is-adjusted-negative { border-color: rgba(147,64,31,0.40) !important; background: #fffaf7 !important; } @media (max-width: 1150px) { .angle-row:not(.width-row) { grid-template-columns: 42px minmax(54px, 1fr) 128px; } .z4-angle-row:not(.width-row) { grid-template-columns: 42px minmax(54px, 1fr) 148px; } } /* === Phase 2K final Z4 polish === */ /* Z4 uses clinical language: Flat / Steep. Positive internal steps flatten, negative internal steps steepen. */ .z4-angle-row:not(.width-row) { grid-template-columns: 42px minmax(54px, 1fr) 138px !important; min-height: 42px !important; padding-top: 6px !important; padding-bottom: 6px !important; } .z4-step-control.z4-pill-control { grid-template-columns: 36px 50px 40px !important; gap: 3px !important; min-height: 30px !important; height: 30px !important; padding: 2px 3px !important; overflow: hidden; } .z4-pill-button { height: 24px !important; padding: 0 4px !important; border-radius: 7px !important; font-size: 0.59rem !important; font-weight: 850 !important; line-height: 1 !important; white-space: nowrap; } /* Match the rest of the tool: flatten = red, steepen = green. */ .z4-flat-button { color: #93401f !important; background: #fff2ed !important; border-color: rgba(147,64,31,0.28) !important; } .z4-steep-button { color: #16633a !important; background: #eefbf4 !important; border-color: rgba(22,99,58,0.28) !important; } .z4-step-label { display: grid !important; place-items: center !important; align-content: center !important; min-width: 0 !important; color: var(--studio-muted) !important; font-size: 0.56rem !important; font-weight: 850 !important; line-height: 0.98 !important; text-align: center !important; white-space: normal !important; overflow: visible !important; } .z4-step-main, .z4-step-dir { display: block; line-height: 0.98; } /* Z4 color semantics are opposite the numeric sign: + = Flat/red, - = Steep/green. */ .z4-angle-row.is-adjusted-positive { background: #fff2ed !important; } .z4-angle-row.is-adjusted-positive strong { color: #93401f !important; } .z4-angle-row.is-adjusted-positive .z4-step-control { border-color: rgba(147,64,31,0.30) !important; background: #fffaf7 !important; } .z4-angle-row.is-adjusted-negative { background: #edf9f2 !important; } .z4-angle-row.is-adjusted-negative strong { color: #16633a !important; } .z4-angle-row.is-adjusted-negative .z4-step-control { border-color: rgba(22,99,58,0.30) !important; background: #f8fffb !important; } .rotation-arc, .rotation-arrow-text { display: none !important; } /* === Phase 2L final visual edits === */ /* Ensure BC control label uses microns without extra width pressure. */ .bc-adjust-label span { white-space: nowrap !important; } /* Reset/Clear panel should stay compact so the angle reference has room. */ .lens-action-panel { grid-template-columns: minmax(175px, 0.72fr) minmax(120px, 0.42fr) minmax(520px, 1.85fr) !important; gap: 10px !important; } .action-button-cell { padding-left: 10px !important; padding-right: 10px !important; } .action-button-cell .button-class { min-width: 92px !important; width: 92px !important; height: 36px !important; padding: 0 8px !important; font-size: 0.78rem !important; } /* Keep the Input → Eye key inside the angle card on typical consultant screens. */ .angle-offset-card { grid-template-columns: minmax(106px, 0.56fr) minmax(205px, 1.1fr) minmax(112px, 0.54fr) !important; gap: 8px !important; overflow: hidden !important; } .angle-reference-copy { min-width: 0 !important; } .angle-visual-wrap { min-width: 0 !important; overflow: visible !important; } .angle-visualizer { width: 196px !important; height: 166px !important; } .angle-key { min-width: 0 !important; padding-left: 9px !important; overflow: hidden !important; } .angle-key .action-cell-title { font-size: 0.68rem !important; letter-spacing: 0.06em !important; white-space: nowrap !important; } .angle-key-row { grid-template-columns: 10px 34px 1fr !important; gap: 4px !important; margin: 3px 0 !important; font-size: 0.70rem !important; } .angle-key-row strong::before { content: "→" !important; margin-right: 3px !important; } .angle-key-row strong { font-size: 0.72rem !important; white-space: nowrap !important; } .angle-dot { width: 8px !important; height: 8px !important; } /* Remove the rotation arrow permanently; the text and map already explain rotation. */ .rotation-arc, .rotation-arrow-text { display: none !important; } @media (max-width: 1180px) { .lens-action-panel { grid-template-columns: minmax(165px, 0.68fr) minmax(110px, 0.38fr) minmax(500px, 1.95fr) !important; gap: 8px !important; } .angle-offset-card { grid-template-columns: minmax(96px, 0.50fr) minmax(196px, 1.05fr) minmax(106px, 0.48fr) !important; gap: 7px !important; } .angle-visualizer { width: 188px !important; height: 160px !important; } .angle-key-row { grid-template-columns: 9px 31px 1fr !important; font-size: 0.67rem !important; } }