/* ========================================================= TILDA GLOBAL FLEX LAYOUT SYSTEM Zero Block class: uc-full-width-flex Outer Group: layout-50-50 layout-65-35 layout-35-65 Inner Groups: column-left column-right ========================================================= */ /* --------------------------------------------------------- 1. ZERO BLOCK Full viewport width --------------------------------------------------------- */ .uc-full-width-flex { width: 100% !important; max-width: none !important; } /* --------------------------------------------------------- 2. OUTER LAYOUT GROUP 70px left + 70px right --------------------------------------------------------- */ .uc-full-width-flex .layout-50-50, .uc-full-width-flex .layout-65-35, .uc-full-width-flex .layout-35-65 { box-sizing: border-box !important; width: calc(100% - 140px) !important; left: 70px !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; overflow: visible !important; } /* --------------------------------------------------------- 3. THE OUTER GROUP'S MOLECULE BECOMES THE FLEX ROW --------------------------------------------------------- */ .uc-full-width-flex .layout-50-50 > .tn-molecule, .uc-full-width-flex .layout-65-35 > .tn-molecule, .uc-full-width-flex .layout-35-65 > .tn-molecule { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: stretch !important; box-sizing: border-box !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; } /* --------------------------------------------------------- 4. BOTH COLUMNS --------------------------------------------------------- */ .uc-full-width-flex .layout-50-50 > .tn-molecule > .column-left, .uc-full-width-flex .layout-50-50 > .tn-molecule > .column-right, .uc-full-width-flex .layout-65-35 > .tn-molecule > .column-left, .uc-full-width-flex .layout-65-35 > .tn-molecule > .column-right, .uc-full-width-flex .layout-35-65 > .tn-molecule > .column-left, .uc-full-width-flex .layout-35-65 > .tn-molecule > .column-right { position: relative !important; top: auto !important; left: auto !important; box-sizing: border-box !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; flex-shrink: 1 !important; align-self: stretch !important; } /* ========================================================= 5. 50 / 50 ========================================================= */ .uc-full-width-flex .layout-50-50 > .tn-molecule > .column-left { width: 50% !important; flex: 0 1 50% !important; } .uc-full-width-flex .layout-50-50 > .tn-molecule > .column-right { width: 50% !important; flex: 0 1 50% !important; } /* ========================================================= 6. 65 / 35 LEFT = 65% RIGHT = 35% ========================================================= */ .uc-full-width-flex .layout-65-35 > .tn-molecule > .column-left { width: 65% !important; flex: 0 1 65% !important; } .uc-full-width-flex .layout-65-35 > .tn-molecule > .column-right { width: 35% !important; flex: 0 1 35% !important; } /* ========================================================= 7. 35 / 65 LEFT = 35% RIGHT = 65% ========================================================= */ .uc-full-width-flex .layout-35-65 > .tn-molecule > .column-left { width: 35% !important; flex: 0 1 35% !important; } .uc-full-width-flex .layout-35-65 > .tn-molecule > .column-right { width: 65% !important; flex: 0 1 65% !important; } /* --------------------------------------------------------- 8. IMPORTANT: Tilda's inner elements must be allowed to shrink. Prevents long text from breaking the 65/35 layout. --------------------------------------------------------- */ .uc-full-width-flex .column-left, .uc-full-width-flex .column-right { min-width: 0 !important; } .uc-full-width-flex .column-left .tn-elem, .uc-full-width-flex .column-right .tn-elem { box-sizing: border-box !important; max-width: 100% !important; } /* ========================================================= 9. MOBILE 20px left + 20px right Columns become vertical ========================================================= */ @media screen and (max-width: 767px) { .uc-full-width-flex .layout-50-50, .uc-full-width-flex .layout-65-35, .uc-full-width-flex .layout-35-65 { width: calc(100% - 40px) !important; left: 20px !important; right: auto !important; } .uc-full-width-flex .layout-50-50 > .tn-molecule, .uc-full-width-flex .layout-65-35 > .tn-molecule, .uc-full-width-flex .layout-35-65 > .tn-molecule { flex-direction: column !important; align-items: stretch !important; width: 100% !important; } .uc-full-width-flex .layout-50-50 > .tn-molecule > .column-left, .uc-full-width-flex .layout-50-50 > .tn-molecule > .column-right, .uc-full-width-flex .layout-65-35 > .tn-molecule > .column-left, .uc-full-width-flex .layout-65-35 > .tn-molecule > .column-right, .uc-full-width-flex .layout-35-65 > .tn-molecule > .column-left, .uc-full-width-flex .layout-35-65 > .tn-molecule > .column-right { width: 100% !important; flex: 0 0 auto !important; } } /* ========================================================= 10. TEXT STACK GAPS Groups with classes: text-section, header-text (alias header-paragraph), paragraphs. The group's molecule becomes a column; gap sets the spacing. Direction (normal / reverse) is set per block when the DOM order differs from the visual order. The left offset of the "accent" group is NOT global: each block sets its own value. ========================================================= */ .tn-group.text-section > .tn-molecule, .tn-group.header-text > .tn-molecule, .tn-group.header-paragraph > .tn-molecule, .tn-group.paragraphs > .tn-molecule { display: flex !important; flex-direction: column !important; } /* gap between blocks inside text-section */ .tn-group.text-section > .tn-molecule { row-gap: 60px !important; gap: 60px !important; } /* gap between heading and paragraphs inside header-text */ .tn-group.header-text > .tn-molecule, .tn-group.header-paragraph > .tn-molecule { row-gap: 20px !important; gap: 20px !important; } /* gap between paragraphs */ .tn-group.paragraphs > .tn-molecule { row-gap: 15px !important; gap: 15px !important; } /* under 960px: gap inside text-section is 30px */ @media screen and (max-width: 959px) { .tn-group.text-section > .tn-molecule { row-gap: 30px !important; gap: 30px !important; } } /* ========================================================= 11. TEXT-SECTION BOTTOM PADDING 40px under the content of every text-section group. The "#allrecords .t-rec" prefix beats per-block #rec... rules. ========================================================= */ #allrecords .t-rec .tn-group.text-section > .tn-molecule { padding-bottom: 40px !important; } /* ========================================================= 12. TEXT-SECTION MAX WIDTH Every text-section group is at most 590px wide. The "#allrecords .t-rec" prefix beats per-block #rec... rules. Exceptions (wider text-section): see section 15. ========================================================= */ #allrecords .t-rec .tn-group.text-section { max-width: 590px !important; } /* ========================================================= 13. PHOTOS ON PHONES (under 640px) Photos take 100% of the screen width, no side/top paddings. Blocks: rec4688773901, rec4746623801 (photo column on top), rec4730050501 (two photos side by side, set in its own CSS). rec4748007001 (slider) has the same rule in its own CSS. rec4729153901: the photo is already a full-bleed background. The "#allrecords #rec..." prefix beats per-block #rec... rules. ========================================================= */ @media screen and (max-width: 639px) { #allrecords #rec4688773901 .tn-group.right-side > .tn-molecule, #allrecords #rec4746623801 .tn-group.right-side > .tn-molecule { padding: 0 !important; } #allrecords #rec4730050501 .t396__artboard > .tn-group.right-side { margin: 0 0 56px 0 !important; } } /* ========================================================= 14. LEFT / RIGHT SIDES: THE PARENT (ARTBOARD) IS A FLEX ROW Every Zero Block artboard that has a "left-side" group AND a "right-side" group as direct children: - is a flex container, the sides are justified space-between (works with or without Tilda's "Flex" artboard setting, i.e. without the t396__artboard-flex class); - if that Tilda setting is off, it also gets the same base layout as the flex blocks: a row, no wrap, stretched sides, no gap, no padding, height by content, min 600px / 100vh; under 960px the sides go one under another. The base layout uses :where(), so it has zero specificity and any per-block #rec... rule overrides it. The first rule (display + space-between) is the strong one. ========================================================= */ #allrecords .t396__artboard:has(> .tn-group.left-side):has(> .tn-group.right-side) { display: flex !important; justify-content: space-between !important; } :where(#allrecords .t396__artboard:not(.t396__artboard-flex):has(> .tn-group.left-side):has(> .tn-group.right-side)) { flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important; box-sizing: border-box !important; padding: 0 !important; height: auto !important; min-height: max(600px, 100vh) !important; } @media screen and (max-width: 959px) { :where(#allrecords .t396__artboard:not(.t396__artboard-flex):has(> .tn-group.left-side):has(> .tn-group.right-side)) { flex-direction: column !important; min-height: 0 !important; } } /* ========================================================= 15. WIDE TEXT-SECTION: 656px Sections 2 (rec4688773901), 4 (rec4728091701) and 7 (rec4744411201) have a text-section up to 656px wide (the default is 590px, section 12). The group is 100% of the available width and only gets narrower when the available space is narrower than 656px, so it keeps its width as long as possible. Every child of the text-section stretches to the full width of the text-section (set per block). Blocks rec4746623801 and rec4748007001 set 656px in their own CSS. The "#allrecords #rec..." prefix beats section 12. ========================================================= */ #allrecords #rec4688773901 .tn-group.text-section, #allrecords #rec4728091701 .tn-group.text-section, #allrecords #rec4744411201 .tn-group.text-section { max-width: 656px !important; } #allrecords #rec4728091701 .tn-group.paragraphs, #allrecords #rec4744411201 .tn-group.paragraphs { max-width: 656px !important; } /* ========================================================= 16. BUTTON INSIDE THE TEXT-SECTION OF rec4739975301 The button is the last item of the text stack (order 3), as wide as its text (not 100% of the column), aligned to the left. The rule is by the element TYPE, not by the element id: when the button is replaced in the editor (the id changes), it stays in place. Without it the button falls under the block rule ".tn-group.left-side .tn-elem" (width 100%, no order) and jumps to the top of the text stack, stretched to the column width. The "#allrecords #rec..." prefix beats the block rules. ========================================================= */ #allrecords #rec4739975301 .tn-group.text-section > .tn-molecule > .tn-elem[data-elem-type=button] { order: 3 !important; width: max-content !important; max-width: 100% !important; height: auto !important; min-height: 43px !important; align-self: flex-start !important; } #allrecords #rec4739975301 .tn-elem[data-elem-type=button] .tn-atom { width: auto !important; height: auto !important; white-space: nowrap !important; } /* ========================================================= 17. ANCHOR OFFSET UNDER THE STICKY HEADER The header (#t-header) is sticky and covers the top of the screen, so a section opened from a menu link (#rec...) would start under it. The browser keeps 90px free above an anchor target (also works for smooth scrolling). ========================================================= */ html { scroll-padding-top: 90px; }