/* FitoNova site -- hand-written, no build step, no external requests. The section vocabulary, the dark why-it-matters band and the feature bento. 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. */ /* ------------------------------------------------------------ sections */ /* The reference's vertical rhythm, band by band: a paper section runs 104px top and bottom, a dark band 96px, and the FAQ -- the last band before the footer -- drops its top padding because the pricing band above it already closed with 104px. */ .section { position: relative; overflow: hidden; padding: 104px 0; background: var(--paper); } .section-band { padding: 96px 0; background: var(--band); color: #eef6fa; } .section-faq { padding: 0 0 104px; } .section-band h2, .section-band h3 { color: #fff; } .section-band .eyebrow { color: rgba(238, 246, 250, 0.78); } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; } .section-head h2 { margin-top: 14px; font-size: clamp(38px, 4.6vw, 62px); line-height: 1; letter-spacing: -0.015em; } .section-head-copy { max-width: 620px; } .section-head .lead { max-width: 420px; } /* ------------------------------------------------- why-it-matters band */ /* The dark plate between the hero and the features: one oversized numeral carrying its own headline, and the reading of it in the right column. The two figures are the design reference's illustrative registry split, not registry data. */ .why-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: end; } .why-big { margin-top: 18px; font: 600 clamp(70px, 10vw, 150px)/0.86 "Barlow Condensed", sans-serif; letter-spacing: -0.03em; color: #fff; } .why-h { margin-top: 14px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.05; max-width: 14em; } .why-side { padding-bottom: 12px; } .why-copy { font: 400 18px/1.6 "Barlow", sans-serif; color: rgba(238, 246, 250, 0.82); } /* The two footing stats, split by the same hairline that carries them. */ .why-stats { margin-top: 28px; display: flex; border-top: 1px solid rgba(238, 246, 250, 0.22); } .why-stat { flex: 1; padding: 18px 20px 0 0; } .why-stat + .why-stat { padding: 18px 0 0 20px; border-left: 1px solid rgba(238, 246, 250, 0.22); } .why-num { font: 600 30px/1 "Barlow Condensed", sans-serif; color: #fff; } .why-lab { margin-top: 4px; font: 400 13px/1.3 "Barlow", sans-serif; color: rgba(238, 246, 250, 0.78); } /* ------------------------------------------------------- feature bento */ /* Asymmetric on purpose: a wide plate spanning two of the three columns with the alert cell standing beside it, then the solid accent object under the plate's left edge and the journal cell spanning the two columns to its right. Nothing here is a row of equal cards, and no cell stands over a hole. */ .bento { margin-top: 56px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-auto-rows: minmax(0, auto); gap: 20px; } .cell { position: relative; padding: 30px; background: var(--panel); border: 1px solid var(--line); } .cell h3 { color: var(--ink); } .cell p { font: 400 15px/1.55 "Barlow", sans-serif; color: var(--mut); } .bt-main { grid-column: span 2; display: flex; gap: 32px; align-items: flex-start; padding: 36px; } .bt-main-copy { flex: 1; } .bt-glyph { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line2); } .bt-glyph svg { fill: none; stroke: var(--acc); stroke-width: 1.5; } .bt-main h3 { margin-top: 22px; font-size: 30px; line-height: 1.08; max-width: 16em; } .bt-main-copy p { margin-top: 12px; font-size: 16px; line-height: 1.6; max-width: 38em; } /* The source column rides the right edge of the wide plate, split off by a hairline: where the catalogue comes from, and what it deliberately does not add to it. The three rules are element-qualified so they outrank .cell p. */ .bt-source { width: 210px; flex: none; border-left: 1px solid var(--line); padding-left: 24px; } p.bt-source-k { font: 600 11px/1 "Barlow", sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); } p.bt-source-n { margin-top: 8px; font: 600 17px/1.2 "Barlow Condensed", sans-serif; color: var(--ink); } p.bt-source-f { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font: 400 13px/1.5 "Barlow", sans-serif; color: var(--mut); } .bt-alert { display: flex; flex-direction: column; } .bt-alert svg.bt-bell { fill: none; stroke: var(--warn); stroke-width: 1.5; } .bt-alert h3 { margin-top: 20px; } .bt-alert p { margin-top: 10px; } .bt-offline { background: var(--fill); border-color: var(--fill); color: var(--onacc); display: flex; flex-direction: column; justify-content: space-between; min-height: 260px; } .bt-offline .eyebrow { color: var(--onaccmut); letter-spacing: 0.16em; } .bt-offline h3 { margin-top: 16px; font-size: 30px; line-height: 1.05; color: var(--onacc); } .bt-offline p { margin-top: 18px; color: var(--onaccmut); } /* The journal cell closes the grid: copy on the left, the two export formats standing as bordered tags on the right. */ .bt-journal { grid-column: span 2; display: flex; align-items: center; gap: 28px; padding: 30px 36px; } .bt-journal-copy { flex: 1; } .bt-journal-copy p { margin-top: 10px; line-height: 1.6; max-width: 44em; } .bt-tags { flex: none; display: flex; gap: 10px; } .bt-tag { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1px solid var(--line2); font: 600 13px/1 "Barlow", sans-serif; color: var(--ink); } /* ------------------------------------------------------------ responsive */ @media (max-width: 1100px) { /* One column, and the accent cell runs full width with the rest. The two spans above are explicit, so both have to be undone here or their cells keep reaching for columns a single-column grid does not have. */ .bento { grid-template-columns: 1fr; } .bt-main, .bt-journal { grid-column: auto; } .bt-main { flex-direction: column; } /* The source column becomes the plate's foot: the hairline that split it off turns with it. */ .bt-source { width: auto; border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 24px; } .why-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 768px) { .section { padding: 72px 0 80px; } /* The journal cell turns: the export tags drop under the copy rather than squeezing it against the edge. */ .bt-journal { flex-direction: column; align-items: flex-start; } .why-stats { flex-direction: column; } .why-stat + .why-stat { padding: 18px 20px 0 0; border-left: 0; border-top: 1px solid rgba(238, 246, 250, 0.22); } .section-head { gap: 20px; } .bento { margin-top: 36px; } /* 30px and 36px of padding inside a 335px viewport leaves the copy 263px to live in. The hairline is the cell here, not the whitespace. */ .cell { padding: 22px 20px; } .bt-main { padding: 24px 20px; gap: 22px; } .bt-journal { padding: 24px 20px; gap: 20px; } .bt-main h3, .bt-offline h3 { font-size: 26px; } .bt-tags { flex-wrap: wrap; } }