/* FitoNova site -- hand-written, no build step, no external requests. The six floating chips around the hero phone. 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. */ /* ------------------------------------------------------- floating chips */ /* Each chip is a hairline panel in one of the two lanes .phone-stage lays out either side of the phone's own column. They are the grid's only in-flow children, so their separation is a track gap and not six hand-measured offsets -- which is the whole point: offsets in px and % went on colliding as the stage changed shape, a gap cannot. JS drifts them through --cx/--cy/--cs only, and the lanes are sized with the worst case that JS can write already spent: --cx = st.x * 22, st.x in [-0.5, 0.5] -> +/-11px sideways --cy = sin*7 - h*10 + st.y*14, h in [0, 1] -> -24px up, +14px down --cs = 1 + h * 0.035 -> +1.75% of each half For the tallest chip (~104px) and the widest (290px) that is 16.1px of sideways reach and 25.8px up / 15.8px down. So: --lanegap (30px) beats the sideways reach against the phone, --rowgap (48px) beats the 41.6px two neighbours can close on each other, and --stagegap (>=32px) beats the upward reach against the CTA row. Every one of those numbers lives in hero.css and none of them is a per-chip offset. */ .chip { position: relative; z-index: 3; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); translate: var(--cx, 0) var(--cy, 0); scale: var(--cs, 1); transition: box-shadow 0.3s ease; } /* Left lane top to bottom, then right lane top to bottom -- nothing else in this file positions a chip. The margins are the stagger: the handoff floats the chips rather than ruling them flush, so three of them keep the reference's own 9% / 2% / 1% inset, capped so they can never spend more of the lane than the gap to the phone can afford (the tightest measured gap is 111px, at 1101px wide; the cap takes 40 of it and the drift another 16.1). */ .chip-2 { grid-area: 1 / 1; margin-inline-start: min(9%, 40px); } .chip-1 { grid-area: 2 / 1; } .chip-3 { grid-area: 3 / 1; margin-inline-start: min(2%, 12px); } .chip-4 { grid-area: 1 / 3; justify-self: end; } .chip-5 { grid-area: 2 / 3; justify-self: end; } .chip-6 { grid-area: 3 / 3; justify-self: end; margin-inline-end: min(1%, 8px); } /* The lift the hovered chip gains. It is a fixed value in the handoff, not a theme token, and it is the shadow the design names for both themes. */ .chip:hover { box-shadow: 0 26px 54px -18px rgba(16, 34, 44, 0.42); } .chip-1 { max-width: min(100%, 260px); display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; font: 600 12px/1 "Barlow", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc2); } .chip-dot { width: 6px; height: 6px; flex: none; background: var(--grn); } @media (prefers-reduced-motion: no-preference) { .chip-dot { animation: fn-pulse 2.4s ease-in-out infinite; } } @keyframes fn-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.9; } } .chip-count { color: var(--ink); } .chip-2 { max-width: min(100%, 240px); display: flex; align-items: center; gap: 10px; padding: 12px 16px; } .chip-2 svg { fill: none; stroke: var(--acc); stroke-width: 1.5; flex: none; } .chip-title { font: 600 13px/1.2 "Barlow", sans-serif; color: var(--ink); } .chip-sub { font-weight: 400; color: var(--mut); } .chip-3 { width: 238px; max-width: 100%; padding: 14px 16px; } .chip-file { display: flex; align-items: center; gap: 9px; font: 600 13px/1 "Barlow", sans-serif; color: var(--ink); } .chip-file svg { fill: none; stroke: var(--acc2); stroke-width: 1.5; flex: none; } .chip-rules { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; } .chip-rules span { height: 1px; background: var(--line); } .chip-rules span:last-child { width: 62%; } .chip-meta { margin-top: 10px; font: 400 11px/1 "Barlow", sans-serif; color: var(--mut); } .chip-4 { width: 268px; max-width: 100%; padding: 14px 16px; border-left: 3px solid var(--warn); } .chip-alert-head { display: flex; align-items: center; gap: 8px; } .chip-alert-head svg { fill: none; stroke: var(--warn); stroke-width: 1.5; flex: none; } .chip-alert-tag { font: 600 11px/1 "Barlow", sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warn); } .chip-alert-when { margin-left: auto; font: 400 11px/1 "Barlow", sans-serif; color: var(--mut); } .chip-alert-title { margin-top: 8px; font: 600 14px/1.3 "Barlow", sans-serif; color: var(--ink); } .chip-alert-body { margin-top: 3px; font: 400 12px/1.4 "Barlow", sans-serif; color: var(--mut); } .chip-5 { max-width: min(100%, 290px); display: flex; align-items: center; gap: 11px; padding: 13px 17px; } .chip-tick { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; background: var(--grnsoft); } .chip-tick svg { fill: var(--grn); } .chip-ok { font: 600 14px/1.25 "Barlow", sans-serif; color: var(--ink); } .chip-ok-sub { font: 500 12px/1.2 "Barlow", sans-serif; color: var(--grn); } .chip-6 { width: 232px; max-width: 100%; padding: 16px; } .chip-kicker { font: 600 11px/1 "Barlow", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); } .chip-calc-in { margin-top: 8px; font: 400 12px/1 "Barlow", sans-serif; color: var(--mut); } .chip-calc-out { margin-top: 6px; font: 600 32px/1 "Barlow Condensed", sans-serif; color: var(--ink); } .chip-calc-out span { font-size: 18px; color: var(--mut); } /* ------------------------------------------------------------ responsive */ /* Below 1100 the lanes are narrower than a chip plus its drift, so the chips go rather than crowd the phone. Display:none empties the grid entirely and the stage falls back to its min-height, which is what the phone alone wants. */ @media (max-width: 1100px) { .chip { display: none; } } /* A short screen buys its lane back out of the two boxes with the most air in them: the alert loses its second line and the calculator its oversized numeral. Nothing is removed, only set at the size a 660px-tall window can actually spare. */ @media (min-width: 1101px) and (max-height: 700px) { .chip-3, .chip-4 { padding: 11px 13px; } .chip-6 { padding: 12px 13px; } .chip-alert-body { font-size: 11px; } .chip-calc-out { font-size: 26px; } .chip-calc-out span { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .chip { transition: none; } }