/* FitoNova site -- hand-written, no build step, no external requests. The two pricing columns and the company order form riding inside the firms card. One of the ordered sheets in public/css/; the load order in every page's IS the cascade, so a rule moved between files is a rule moved in the cascade. Owner's ruling 2026-08-10: no source file over 500 lines. */ /* -------------------------------------------------------------- pricing */ .price-grid { margin-top: 52px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 24px; align-items: start; } .price-card { position: relative; padding: 36px; background: var(--panel); border: 1px solid var(--line2); } .price-card h3 { margin-top: 12px; font-size: 34px; line-height: 1.05; color: var(--ink); } .price-lead { margin-top: 10px; font: 400 15px/1.6 "Barlow", sans-serif; color: var(--mut); max-width: 34em; } .price-kicker { font: 600 11px/1 "Barlow", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); } .price-block { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); } .price-list { list-style: none; margin: 12px 0 0; padding: 0; } .price-list li { display: flex; gap: 11px; padding: 9px 0; font: 400 15px/1.5 "Barlow", sans-serif; color: var(--ink); } .price-list svg { flex: none; margin-top: 3px; fill: none; stroke: var(--grn); stroke-width: 1.6; } .price-cta { margin-top: 26px; } /* The pricing card's badge sits a touch tighter than the hero's 13/22. */ .price-cta .play-badge { padding: 13px 20px; } .price-note { margin-top: 18px; font: 400 13px/1.5 "Barlow", sans-serif; color: var(--mut); } .firms-card { border-color: var(--line); } .price-alt { margin-top: 20px; font: 400 14px/1.6 "Barlow", sans-serif; color: var(--mut); } /* --------------------------------------------------------- company order */ /* Carried over from the pre-redesign page with its behaviour untouched: the field names are the contract with /api/comanda and must not drift. Only the surface changed -- hairline controls on the paper ground. No error red exists in the palette, so an invalid field is marked by a heavier border, a rule down the side of its message, and the message itself: never by hue alone. Control borders are --mut, not --line2: a control owes 3:1 against its own fill, and --line2 over --panel reads 1.98:1 in light. Registration marks and rules may stay on --line2 -- they are decoration; a field outline is the control. */ .firms-order { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); } .of-grid { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .of-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin: 0; padding: 0; border: 0; } .of-wide { grid-column: span 2; } .of-label { font: 500 13px/1 "Barlow", sans-serif; color: var(--ink); padding: 0; } .of-input { width: 100%; font: 400 15px/1 "Barlow", sans-serif; padding: 12px; background: transparent; border: 1px solid var(--mut); color: var(--ink); border-radius: 0; } .of-input:hover { border-color: var(--acc2); } .of-input:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; } .of-pills { display: flex; gap: 8px; } .of-pill { position: relative; display: inline-flex; } .of-pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .of-pill span { display: inline-flex; align-items: center; padding: 12px 16px; font: 500 14px/1 "Barlow", sans-serif; color: var(--ink); border: 1px solid var(--mut); } .of-pill input:checked + span { background: var(--fill); border-color: var(--fill); color: var(--onacc); } .of-pill input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; } .of-pill:hover span { border-color: var(--acc2); } .of-msg { display: none; padding-left: 10px; border-left: 2px solid var(--ink); font: 400 13px/1.4 "Barlow", sans-serif; color: var(--ink); } .of-field.is-bad .of-msg { display: block; } .of-field.is-bad .of-input, .of-field.is-bad .of-pill span { border-color: var(--ink); border-width: 2px; } .of-more { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; } .of-more summary { cursor: pointer; list-style: none; font: 500 14px/1 "Barlow", sans-serif; color: var(--acc); } .of-more summary::-webkit-details-marker { display: none; } .of-more summary::before { content: "+ "; color: var(--acc2); } .of-more[open] summary::before { content: "– "; } .of-more-body { margin-top: 16px; } .of-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .of-actions { margin-top: 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .of-actions .price-note { margin-top: 0; max-width: 30em; } .of-submit { cursor: pointer; font: 600 15px/1 "Barlow", sans-serif; padding: 14px 24px; background: var(--fill); color: var(--onacc); border: none; } .of-submit:hover { background: var(--fill2); color: var(--onacc); } .of-submit[disabled] { opacity: 0.6; cursor: default; } .of-status { margin-top: 12px; font: 400 14px/1.5 "Barlow", sans-serif; color: var(--mut); } .order-form.is-error .of-status { padding-left: 10px; border-left: 2px solid var(--ink); color: var(--ink); } .of-gdpr { margin-top: 12px; font: 400 13px/1.5 "Barlow", sans-serif; color: var(--mut); } .of-nojs { margin-top: 12px; font: 400 13px/1.5 "Barlow", sans-serif; color: var(--mut); } .js .of-nojs { display: none; } .of-done { display: none; padding: 24px; border: 1px solid var(--line2); background: var(--panel); } .firms-order.is-sent .of-done { display: block; } .firms-order.is-sent .order-form { display: none; } .of-done-title { font-size: 26px; color: var(--ink); } .of-done p { margin-top: 10px; font: 400 15px/1.6 "Barlow", sans-serif; color: var(--mut); } /* ------------------------------------------------------------ responsive */ @media (max-width: 1020px) { .price-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 768px) { .price-card { padding: 24px 20px; } .of-grid { grid-template-columns: 1fr; } .of-wide { grid-column: auto; } /* 16px is the threshold, not a preference: iOS Safari zooms the page on focus for anything under it and then leaves the reader panned sideways in the middle of a form. The radio inside a plan pill is a real focused control even at opacity 0, so it needs the same floor. */ .of-input, .of-pill input { font-size: 16px; } .of-input { padding: 13px 12px; } .of-pill span { min-height: 44px; padding: 12px 16px; } /* The disclosure was a 14px-tall line of text -- the label is the control here, so it has to be big enough to be one. */ .of-more summary { display: flex; align-items: center; min-height: 44px; } .of-submit { min-height: 46px; } } /* One thumb, one column: at this width the submit and the note beside it were sharing a row that could not hold them both. */ @media (max-width: 560px) { .of-actions { display: block; } .of-submit { width: 100%; } .of-actions .price-note { margin-top: 14px; max-width: none; } }