/* FitoNova site -- hand-written, no build step, no external requests. FAQ, footer, and the secondary pages: legal prose, the 404 numeral and the order-confirmation states. 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. */ /* ------------------------------------------------------------------ FAQ */ .faq-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 56px; align-items: start; position: relative; z-index: 1; } .faq-side { position: sticky; top: 110px; } .faq-side h2 { margin-top: 14px; } .faq-list { border-top: 1px solid var(--line2); } .faq-list details { border-bottom: 1px solid var(--line); } .faq-list summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 18px; padding: 22px 4px; font: 600 21px/1.2 "Barlow Condensed", sans-serif; color: var(--ink); } .faq-list summary::-webkit-details-marker { display: none; } .faq-q { flex: 1; } .faq-plus { font: 400 20px/1 "Barlow", sans-serif; color: var(--acc2); } .faq-list details[open] .faq-plus { color: var(--acc); } .faq-list .answer { padding: 0 4px 24px; max-width: 46em; font: 400 16px/1.65 "Barlow", sans-serif; color: var(--mut); } .faq-list .answer p + p { margin-top: 10px; } /* --------------------------------------------------------------- footer */ /* Only a page that HAS the floating dock (the landings -- the pill left the secondary pages on the owner's word, 2026-08-10) reserves the last 78px of scroll for it; everywhere else the footer ends where it ends. The sibling selector works because the dock sits between
and
, before the footer. */ .site-footer { background: var(--band); color: #eef6fa; padding: 64px 0 40px; } .dock ~ .site-footer { padding-bottom: 118px; } .footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .footer-brand { display: flex; align-items: center; gap: 10px; } .footer-brand img { display: block; } .footer-brand .wordmark, .footer-brand .w-fito, .footer-brand .w-nova { color: #fff; } .ppp-warning { margin-top: 22px; max-width: 34em; font: 500 14px/1.6 "Barlow", sans-serif; color: rgba(238, 246, 250, 0.8); } .footer-disclaimer { margin-top: 12px; max-width: 34em; font: 400 13px/1.6 "Barlow", sans-serif; color: rgba(238, 246, 250, 0.58); } .footer-cols { display: flex; gap: 56px; flex-wrap: wrap; justify-content: flex-end; } .footer-col { display: flex; flex-direction: column; gap: 10px; } .footer-col-title { font: 600 11px/1 "Barlow", sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(238, 246, 250, 0.5); } .footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col a, .footer-links a { font: 400 15px/1 "Barlow", sans-serif; color: rgba(238, 246, 250, 0.86); } .footer-col a:hover, .footer-links a:hover { color: #fff; } .footer-bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(238, 246, 250, 0.2); font: 400 13px/1 "Barlow", sans-serif; color: rgba(238, 246, 250, 0.55); } /* ------------------------------------------------------- legal / article */ /* The secondary pages (termeni, confidentialitate, stergere, 404, the order confirmation) inherit the header, footer and tokens above; this is the only type they need of their own. */ .article { padding: 72px 0 96px; background: var(--paper); /* The vines below sit behind the copy; the article clips their overhang (nothing sticky lives inside an article) and the .wrap rides above. */ position: relative; overflow: hidden; } .article .wrap { max-width: 820px; position: relative; z-index: 1; } /* The vine motif on every secondary page (owner, 2026-08-10, refined the same day: small, hugging the two SIDES, never under the text). Each vine hangs mostly off-canvas -- at most ~120px reaches in, and the narrowest width that shows them (1100px) still leaves a 140px gutter beside the 820px column, so no vine can slide under the copy at any width. Below 1100px the gutter is gone and so are they. vp-art-2..5 sit at percentage heights, so the motif climbs the whole page. */ .article .vine { display: none; } @media (min-width: 1100px) { .article .vine { display: block; } } /* How a vine attaches to a wall (learned from gen_vines.py, the hard way): the TRUNK ENTERS THROUGH THE IMAGE'S LEFT EDGE -- the generator pins the box's left edge exactly on the stem's cut. So a left-wall vine sits with its left edge at the wall, unflipped; a right-wall vine is the same file scaleX-flipped (.vine-flip in the markup) so the entry edge faces right. Hiding most of the box off-canvas hides the entry and leaves loose foliage floating -- exactly the mistake this replaces. The fluid width keeps every vine inside the gutter beside the 820px column at any viewport, so none can reach the text. */ .vp-art-r { right: -24px; top: -60px; width: min(280px, calc((100vw - 880px) / 2)); } .vp-art-l { left: -24px; bottom: -70px; width: min(260px, calc((100vw - 880px) / 2)); } .vp-art-2 { left: -24px; top: 18%; width: min(220px, calc((100vw - 880px) / 2)); } .vp-art-3 { right: -24px; top: 38%; width: min(210px, calc((100vw - 880px) / 2)); } .vp-art-4 { left: -24px; top: 58%; width: min(210px, calc((100vw - 880px) / 2)); } .vp-art-5 { right: -24px; top: 88%; width: min(230px, calc((100vw - 880px) / 2)); } .vp-art-6 { left: -24px; top: 30%; width: min(200px, calc((100vw - 880px) / 2)); } .vp-art-7 { right: -24px; top: 12%; width: min(190px, calc((100vw - 880px) / 2)); } .vp-art-8 { left: -24px; top: 74%; width: min(220px, calc((100vw - 880px) / 2)); } .vp-art-9 { right: -24px; top: 52%; width: min(200px, calc((100vw - 880px) / 2)); } /* "Sometimes one can be bigger": the large climb out of the right wall, mid-page. From 1700px the gutter is 440px and holds its full reach. Two classes on purpose: the min-1100 ".article .vine" reveal above outranks a lone class and would pour it out at natural size. */ .article .vp-art-big, .article .vp-art-big2 { display: none; } @media (min-width: 1700px) { .article .vp-art-big { display: block; right: -40px; top: 44%; width: min(520px, calc((100vw - 920px) / 2)); } .article .vp-art-big2 { display: block; left: -40px; top: 64%; width: min(480px, calc((100vw - 920px) / 2)); } } .article h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1; } .article h2 { margin-top: 44px; font-size: 30px; } .article h3 { margin-top: 28px; font-size: 22px; } .article p, .article li { margin-top: 14px; font: 400 16px/1.7 "Barlow", sans-serif; color: var(--mut); } .article ul, .article ol { padding-left: 22px; } .article .meta { margin-top: 10px; font: 400 14px/1.5 "Barlow", sans-serif; color: var(--acc2); } .article a { border-bottom: 1px solid var(--line2); } /* Phase 2 addendum: the four elements the legal pages carry that the landing has no equivalent of. The redesign rewrote the stylesheet around the landing's vocabulary and these lost their rules with the old sheet -- .page-head (the title plate above the prose), .callout (the boxed warning inside it), .table-scroll around the one data table on /confidentialitate, and the 404's own numeral. They follow the blueprint grammar the rest of the site uses: hairline borders, square corners, no fill of their own. */ .page-head { padding-bottom: 26px; border-bottom: 1px solid var(--line); } .page-head .updated { margin-top: 10px; font: 600 12px/1 "Barlow", sans-serif; letter-spacing: 0.2em; color: var(--acc2); text-transform: uppercase; } .article .callout { margin-top: 22px; padding: 18px 22px; border: 1px solid var(--line); border-left: 3px solid var(--acc); background: var(--panel); } .article .callout p { margin-top: 0; color: var(--ink); } .article .table-scroll { margin-top: 22px; overflow-x: auto; } .article table { width: 100%; border-collapse: collapse; font: 400 15px/1.5 "Barlow", sans-serif; color: var(--mut); } .article th, .article td { padding: 10px 14px; border: 1px solid var(--line); text-align: left; vertical-align: top; } .article th { font-weight: 600; color: var(--ink); } .notfound { padding-top: 24px; } .notfound .code { margin: 0; font: 600 clamp(72px, 14vw, 148px)/0.9 "Barlow Condensed", "Barlow", sans-serif; letter-spacing: -0.03em; color: var(--acc); } .cc-block { display: block; } .cc-expired { display: none; } .cc.is-expired .cc-block { display: none; } .cc.is-expired .cc-expired { display: block; } /* ------------------------------------------------------------ responsive */ @media (max-width: 1020px) { .faq-grid { grid-template-columns: 1fr; gap: 40px; } .faq-side { position: static; } } @media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; } .footer-cols { justify-content: flex-start; gap: 32px; } /* A 15px/1 link is a 15px-tall target. The gap between them comes out and the padding that replaces it is the target, so the column reads the same and every row is thumb-sized. */ .footer-links, .footer-col { gap: 0; } .footer-col a, .footer-links a { display: inline-flex; align-items: center; min-height: 44px; } .footer-col-title { padding-bottom: 8px; } .article { padding: 48px 0 64px; } .article h2 { margin-top: 34px; } /* The one data table on /confidentialitate is wider than a phone by its own content. It already scrolls inside .table-scroll; this only stops the columns collapsing to one word per line inside that scroller. */ .article table { min-width: 480px; } }