/* ========================================================================== SAGGA Pages - sagga.css All rules are scoped under .sagga-page so nothing can leak into Divi, WooCommerce, the header/footer or any existing page. ========================================================================== */ .sagga-page, .sagga-modal { /* Brand tokens - sampled directly from the approved artboards */ --sag-cream: #FEFDEF; --sag-green: #70922A; --sag-green-dk: #5E7B22; --sag-lime: #C5E45C; --sag-lime-dk: #B4D845; --sag-white: #FFFFFF; --sag-ink: #100F0D; --sag-olive: #6B8A2E; --sag-max: 1220px; --sag-gutter: 24px; --sag-serif: 'Bitter', Georgia, 'Times New Roman', serif; --sag-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --sag-radius: 24px; --sag-radius-sm: 10px; } .sagga-page { background: var(--sag-cream); color: var(--sag-ink); font-family: var(--sag-sans); font-weight: 300; font-size: 19px; line-height: 30px; overflow-x: hidden; /* fallback */ overflow-x: clip; /* same clipping, but no scroll container -> no jank */ /* Contain every z-index used inside these pages in one stacking context at level 0. Without this, positioned sections here paint OVER the theme header, so the nav drop-down ends up behind the page content. The lightbox is appended to , outside this, so it is unaffected. */ position: relative; z-index: 0; isolation: isolate; } /* -------------------------------------------------------------------------- Embedded in a Divi page via [sagga_page] Divi wraps shortcode output in .et_pb_module / .et_pb_text_inner, which adds its own width, padding and typography. Neutralise just enough for the design to sit correctly, without touching anything outside .sagga-page. -------------------------------------------------------------------------- */ .sagga-page--embedded { width: 100%; margin: 0; padding: 0; } .et_pb_module .sagga-page--embedded, .et_pb_text_inner .sagga-page--embedded { max-width: none; } /* Divi text modules set line-height and colour on p/li - ours must win inside our own scope only. */ .sagga-page--embedded p, .sagga-page--embedded li { color: inherit; } /* -------------------------------------------------------------------------- Resets scoped to our pages only -------------------------------------------------------------------------- */ .sagga-page *, .sagga-page *::before, .sagga-page *::after, .sagga-modal *, .sagga-modal *::before, .sagga-modal *::after { box-sizing: border-box; } .sagga-page img, .sagga-modal img { max-width: 100%; height: auto; display: block; } .sagga-page p { margin: 0 0 30px; } .sagga-page p:last-child { margin-bottom: 0; } .sagga-page h1, .sagga-page h2, .sagga-page h3, .sagga-page h4, .sagga-page h5, .sagga-page h6 { font-family: var(--sag-serif); font-weight: 600; color: var(--sag-ink); margin: 0 0 24px; padding: 0; letter-spacing: 0; } .sagga-page h1 { font-size: 52px; line-height: 60px; } .sagga-page h2 { font-size: 40px; line-height: 48px; } .sagga-page h3 { font-size: 28px; line-height: 36px; } .sagga-page h4 { font-size: 22px; line-height: 30px; } .sagga-page a, .sagga-modal a { color: inherit; text-decoration: none; } .sagga-page a:hover, .sagga-modal a:hover { text-decoration: underline; } .sagga-page ul, .sagga-page ol, .sagga-modal ul, .sagga-modal ol { margin: 0 0 30px; padding-left: 22px; } .sagga-page li, .sagga-modal li { margin-bottom: 10px; } /* -------------------------------------------------------------------------- Layout primitives -------------------------------------------------------------------------- */ .sagga-container { width: 100%; max-width: var(--sag-max); margin: 0 auto; padding: 0 var(--sag-gutter); } .sagga-section { padding: 80px 0; position: relative; } .sagga-section--tight { padding: 56px 0; } .sagga-section--flush-top { padding-top: 0; } .sagga-section--flush-bottom { padding-bottom: 0; } /* The artboard leaves ~264px between this intro and the numbered section that follows. The circle overhangs its bar by ~52px, so the padding here plus the next section's 80px top padding has to add up to roughly that. */ .sagga-section--pad-lg { padding-bottom: 150px; } .sagga-bg-cream { background: var(--sag-cream); } .sagga-bg-green { background: var(--sag-green); color: var(--sag-white); } .sagga-bg-green h2, .sagga-bg-green h3, .sagga-bg-green h4 { color: var(--sag-white); } .sagga-bg-dark { background: var(--sag-ink); color: var(--sag-white); } .sagga-bg-dark h2, .sagga-bg-dark h3 { color: var(--sag-white); } /* Two column text/media grid */ .sagga-grid { display: grid; gap: 40px 46px; } .sagga-grid > * { min-width: 0; } .sagga-grid--2 { grid-template-columns: 1fr 1fr; } .sagga-grid--3 { grid-template-columns: repeat(3, 1fr); } .sagga-grid--media { grid-template-columns: 1fr 1fr; align-items: start; } .sagga-grid--top { align-items: start; } .sagga-grid--center { align-items: center; } /* Horizontal rule used between major blocks */ .sagga-rule { height: 8px; background: var(--sag-green); border: 0; margin: 0; border-radius: 4px; } .sagga-rule--lime { background: var(--sag-lime); } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .sagga-hero { position: relative; min-height: 608px; display: flex; align-items: center; background-color: var(--sag-ink); background-size: cover; background-repeat: no-repeat; color: var(--sag-white); overflow: hidden; } .sagga-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,15,13,.92) 0%, rgba(16,15,13,.78) 38%, rgba(16,15,13,.15) 72%, rgba(16,15,13,0) 100%); } .sagga-hero > .sagga-container { position: relative; z-index: 2; padding-top: 64px; padding-bottom: 64px; } .sagga-hero h1 { color: var(--sag-white); margin-bottom: 34px; } .sagga-hero h2 { color: var(--sag-white); font-size: 34px; line-height: 42px; margin-bottom: 20px; } .sagga-hero p { color: var(--sag-white); } .sagga-hero__copy { max-width: 720px; } /* Cultivation hero: image is centre-weighted and copy sits in two columns */ .sagga-hero--split { min-height: 578px; } .sagga-hero--split::before { background: linear-gradient(90deg, rgba(16,15,13,.90) 0%, rgba(16,15,13,.62) 45%, rgba(16,15,13,.42) 100%); } .sagga-hero--split .sagga-hero__copy { max-width: none; } .sagga-hero--split .sagga-grid { gap: 40px 46px; } /* Practical-guide style hero: shorter, image right */ .sagga-hero--band { min-height: 392px; } .sagga-hero--band h2 { font-size: 44px; line-height: 54px; } .sagga-hero--band .sagga-hero__meta { font-size: 15px; line-height: 24px; opacity: .85; margin: 0; } /* -------------------------------------------------------------------------- Cut-out garlic decorations (About page) -------------------------------------------------------------------------- */ .sagga-cutout { position: relative; } .sagga-cutout img { width: 100%; max-width: 640px; margin: 0 auto; } /* Media that runs off the right edge of the viewport, as in the artboards. */ .sagga-bleed-right { margin-right: 0; /* fallback for engines without min() */ margin-right: calc(-1 * ((100vw - min(var(--sag-max), 100vw)) / 2 + var(--sag-gutter))); } .sagga-bleed-right img { width: 100%; } /* -------------------------------------------------------------------------- Numbered aims list (About page) -------------------------------------------------------------------------- */ .sagga-numlist { list-style: none; margin: 0; padding: 0; } .sagga-numlist li { display: grid; grid-template-columns: 76px 1fr; gap: 0 8px; margin-bottom: 30px; align-items: start; } .sagga-numlist li:last-child { margin-bottom: 0; } .sagga-numlist__n { font-family: var(--sag-sans); font-weight: 700; font-size: 44px; line-height: 38px; color: var(--sag-green); } /* -------------------------------------------------------------------------- Lime rounded panel (Industry: market snapshot, sources) -------------------------------------------------------------------------- */ .sagga-panel { background: var(--sag-lime); border-radius: var(--sag-radius); padding: 48px 48px 52px; position: relative; } .sagga-panel h2 { margin-bottom: 26px; } .sagga-panel--sources { font-size: 17px; line-height: 30px; word-break: break-word; } .sagga-panel--sources a { text-decoration: underline; } .sagga-panel__figure { background: var(--sag-white); border-radius: 4px; padding: 0; overflow: hidden; } .sagga-page .sagga-chartlabel { font-size: 17px; line-height: 26px; font-weight: 500; color: var(--sag-ink); margin: 0 0 10px; } .sagga-figcaption { font-size: 15px; line-height: 30px; opacity: .72; margin-top: 14px; } /* Garlic cut-out that overhangs the bottom right of the snapshot panel */ .sagga-panel__garlic { position: absolute; right: -14px; bottom: -96px; width: 300px; pointer-events: none; z-index: 3; } /* -------------------------------------------------------------------------- Striped comparison table (Industry Matters) - full bleed -------------------------------------------------------------------------- */ .sagga-compare { background: var(--sag-green); color: var(--sag-white); padding: 56px 0 0; } .sagga-compare h2 { color: var(--sag-white); margin-bottom: 40px; } .sagga-compare__head, .sagga-compare__row { display: grid; grid-template-columns: 27% 41% 32%; gap: 0 24px; } .sagga-compare__head { font-family: var(--sag-serif); font-weight: 600; font-size: 22px; line-height: 30px; color: var(--sag-lime); padding-bottom: 22px; } .sagga-compare__row { padding: 22px 0 26px; font-size: 18px; line-height: 30px; } .sagga-compare__divider { height: 13px; background: var(--sag-lime); } /* -------------------------------------------------------------------------- Expandable content cards (Cultivation - Planting grid) -------------------------------------------------------------------------- */ .sagga-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 24px; } .sagga-card { background: var(--sag-lime); border-radius: var(--sag-radius); padding: 30px 32px 26px; display: flex; flex-direction: column; overflow: hidden; position: relative; } .sagga-card__title { font-family: var(--sag-serif); font-weight: 600; font-size: 28px; line-height: 36px; color: var(--sag-olive); margin: 0 0 20px; } .sagga-card__media { margin: 0 0 18px; } .sagga-card__media img { width: 100%; border-radius: 4px; } .sagga-card__body { contain: paint; font-size: 17px; line-height: 30px; /* The mockup shows the teaser clipped mid-sentence, full copy in the modal */ max-height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); } .sagga-card--textonly .sagga-card__body { max-height: 330px; } .sagga-card__body p { margin-bottom: 18px; } .sagga-card__more { margin-top: auto; min-height: 44px; padding-top: 22px; align-self: flex-end; display: inline-flex; align-items: center; gap: 12px; font-family: var(--sag-serif); font-weight: 600; font-size: 22px; line-height: 1; color: var(--sag-ink); background: none; border: 0; cursor: pointer; padding-right: 0; } .sagga-card__more:hover { text-decoration: none; opacity: .72; } .sagga-card__more svg { width: 15px; height: 24px; flex: 0 0 15px; } /* Card with the image floated beside the copy (Soil Prep / Plant development) */ .sagga-card--float .sagga-card__media { float: left; width: 46%; margin: 0 18px 12px 0; } .sagga-card--float .sagga-card__body::after { content: ""; display: block; clear: both; } /* -------------------------------------------------------------------------- Pest / disease pills (Cultivation) -------------------------------------------------------------------------- */ .sagga-pests { position: relative; background: var(--sag-ink); overflow: hidden; } .sagga-pests__bg { contain: paint; transform: translateZ(0); backface-visibility: hidden; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .55; } .sagga-pests > .sagga-container { position: relative; z-index: 2; } .sagga-pests h2 { color: var(--sag-white); font-size: 54px; line-height: 64px; text-align: center; margin-bottom: 40px; } .sagga-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 52px; } .sagga-pill { position: relative; display: flex; align-items: center; gap: 18px; width: 100%; min-height: 92px; padding: 14px 62px 14px 34px; background: var(--sag-lime); border: 0; border-radius: 999px; cursor: pointer; text-align: center; font-family: var(--sag-serif); font-weight: 600; font-size: 27px; line-height: 34px; color: var(--sag-olive); transition: background .18s ease, transform .18s ease; } .sagga-pill:hover { background: #cfec6f; transform: translateY(-1px); } .sagga-pill__label { flex: 1; } .sagga-pill__thumb { position: absolute; left: -4px; top: 50%; transform: translateY(-50%); width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sag-lime); } .sagga-pill--thumb { padding-left: 104px; } .sagga-pill__chev { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 16px; height: 26px; } /* -------------------------------------------------------------------------- Numbered section headers (Nutrition article: 1..4) -------------------------------------------------------------------------- */ .sagga-numhead { position: relative; margin: 0 0 30px; padding-left: 96px; } .sagga-numhead__bar { background: var(--sag-lime); border-radius: 999px; min-height: 62px; display: flex; align-items: center; padding: 10px 40px 10px 106px; font-family: var(--sag-serif); font-weight: 600; font-size: 28px; line-height: 36px; color: var(--sag-ink); } .sagga-numhead__bar { position: relative; z-index: 1; } .sagga-numhead__circle { position: absolute; z-index: 3; left: 0; top: 50%; transform: translateY(-50%); width: 166px; height: 166px; border-radius: 50%; background: var(--sag-green); color: var(--sag-white); display: flex; align-items: center; justify-content: center; font-family: var(--sag-serif); font-weight: 600; font-size: 74px; line-height: 1; } .sagga-numhead--summary .sagga-numhead__bar { background: var(--sag-green); color: var(--sag-white); padding-left: 40px; } .sagga-numhead--summary { padding-left: 0; } /* Lettered sub-points A..F */ .sagga-lettered { list-style: none; margin: 0; padding: 0; } .sagga-lettered > li { display: grid; grid-template-columns: 46px 1fr; gap: 0 18px; margin-bottom: 28px; align-items: start; } .sagga-lettered__l { width: 34px; height: 34px; border-radius: 50%; background: var(--sag-green); color: var(--sag-white); display: flex; align-items: center; justify-content: center; font-family: var(--sag-serif); font-weight: 600; font-size: 17px; line-height: 1; margin-top: 3px; } .sagga-numhead + .sagga-article { padding-left: 204px; } .sagga-article { font-size: 17px; line-height: 28px; } .sagga-article p { margin-bottom: 20px; } .sagga-article ul { padding-left: 20px; } .sagga-article li { margin-bottom: 12px; } /* Section with a soft photographic wash behind it */ .sagga-washed { position: relative; overflow: hidden; } .sagga-washed__bg { contain: paint; transform: translateZ(0); backface-visibility: hidden; position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .30; } .sagga-washed > .sagga-container { position: relative; z-index: 2; } /* -------------------------------------------------------------------------- Practical Guide timeline (steps 1-8) Rebuilt to the artboard: 27px central spine, 169px numbered discs vertically centred on a 64px lime title bar, alternating half-width bars. -------------------------------------------------------------------------- */ .sagga-tl { position: relative; } .sagga-tl__band { position: relative; padding: 0; } .sagga-tl__band--cream { background: var(--sag-cream); } .sagga-tl__band--green { background: var(--sag-green); color: var(--sag-white); } /* The central spine. Green on cream, lime on green. */ .sagga-tl__band::before { content: ""; position: absolute; left: 50%; margin-left: -13.5px; top: 0; bottom: 0; width: 27px; background: var(--sag-green); z-index: 1; } .sagga-tl__band--green::before { background: var(--sag-lime); } .sagga-tl__band--first::before { top: 84px; } .sagga-tl__band--last::before { bottom: calc(100% - 84px); } /* Photo panel occupying the right half of a band, bleeding to the edge. */ .sagga-tl__panel { contain: paint; transform: translateZ(0); backface-visibility: hidden; position: absolute; left: 50%; right: 0; top: 0; bottom: 0; background-size: cover; background-position: center; } /* Scrim so the white copy in step 4 stays legible over the bulbs, matching the tonal weight of the panel on the artboard. */ .sagga-tl__panel::after { content: ""; position: absolute; inset: 0; background: rgba(16, 15, 13, .46); } .sagga-tl__inner { position: relative; z-index: 2; } .sagga-tl__step { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 46px; } /* The artboard centres the first bar of a new colour band ON the boundary (-32px). That reads as slightly high in the browser, so this sits at the halfway point. Change this ONE value to taste: 0px bar sits fully below the boundary -16px current: bar overlaps the boundary by a quarter -32px artboard-exact: bar centred on the boundary */ .sagga-tl__step--straddle { margin-top: -16px; } /* Numbered disc, centred on the spine and on the title bar. */ .sagga-tl__num { position: absolute; left: 50%; top: 32px; transform: translate(-50%, -50%); width: 169px; height: 169px; border-radius: 50%; background: var(--sag-green); color: var(--sag-white); display: flex; align-items: center; justify-content: center; font-family: var(--sag-serif); font-weight: 600; font-size: 86px; line-height: 1; z-index: 3; } .sagga-tl__band--green .sagga-tl__num { background: var(--sag-lime); color: var(--sag-green); } /* Lime title bar. */ .sagga-tl__bar { grid-column: 1 / 2; min-height: 64px; display: flex; align-items: center; background: var(--sag-lime); border-radius: 999px; padding: 10px 110px 10px 32px; font-family: var(--sag-serif); font-weight: 600; font-size: 26px; line-height: 34px; color: var(--sag-olive); position: relative; z-index: 2; } .sagga-tl__step--right .sagga-tl__bar { grid-column: 2 / 3; justify-content: flex-end; text-align: right; padding: 10px 32px 10px 110px; } .sagga-tl__step--full .sagga-tl__bar { grid-column: 1 / -1; } /* Body copy sits in the same half as the bar. */ .sagga-tl__body { grid-column: 1 / 2; padding: 34px 56px 0 32px; font-size: 19px; line-height: 30px; } .sagga-tl__step--right .sagga-tl__body { grid-column: 2 / 3; padding: 34px 32px 0 68px; } .sagga-tl__body ul, .sagga-tl__body ol { padding-left: 22px; margin-bottom: 0; } .sagga-tl__body li { margin-bottom: 6px; } .sagga-tl__body > :last-child { margin-bottom: 0; } /* Step 4: full-width bar, two columns of copy, right column over the photo. */ .sagga-tl__split { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; } .sagga-tl__split > div { padding: 34px 56px 0 32px; font-size: 19px; line-height: 30px; } .sagga-tl__split > div + div { padding: 34px 32px 0 68px; color: var(--sag-white); } .sagga-tl__split ul { padding-left: 22px; margin-bottom: 0; } .sagga-tl__split li { margin-bottom: 6px; } .sagga-tl__tip { color: var(--sag-white); font-weight: 500; margin-top: 22px; } .sagga-tl__media { margin-top: 26px; } .sagga-tl__media img { width: 100%; border-radius: 2px; } /* Cut-out garlic decorations, as placed on the artboard. */ .sagga-tl__cutout { position: absolute; pointer-events: none; z-index: 2; } .sagga-tl__cutout--cluster { left: 2%; bottom: 0; width: 42%; max-width: 560px; } .sagga-tl__cutout--pair { right: 0; top: -70px; width: 30%; max-width: 390px; } /* -------------------------------------------------------------------------- Voluntary levy band -------------------------------------------------------------------------- */ .sagga-levy { text-align: center; padding: 96px 0 80px; } .sagga-levy h2 { font-size: 66px; line-height: 78px; color: var(--sag-white); margin-bottom: 34px; } .sagga-levy p { max-width: 1120px; margin-left: auto; margin-right: auto; } /* -------------------------------------------------------------------------- Modal / lightbox (matches "Cultivation Expand Examples") -------------------------------------------------------------------------- */ .sagga-modal { position: fixed; inset: 0; z-index: 999999; display: none; align-items: flex-start; justify-content: center; padding: 60px 24px; background: rgba(16, 15, 13, .78); overflow-y: auto; -webkit-overflow-scrolling: touch; } .sagga-modal.is-open { display: flex; } .sagga-modal__dialog { font-family: var(--sag-sans); font-weight: 300; position: relative; width: 100%; max-width: 1220px; background: var(--sag-lime); border-radius: var(--sag-radius); padding: 34px 46px 60px; margin: auto; } .sagga-modal__head { display: flex; align-items: center; gap: 22px; margin-bottom: 30px; } .sagga-modal__close { flex: 0 0 62px; width: 62px; height: 62px; border-radius: 50%; background: var(--sag-white); border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .18s ease; } .sagga-modal__close:hover { transform: rotate(90deg); } .sagga-modal__close svg { width: 24px; height: 24px; } .sagga-modal__title { font-family: var(--sag-serif); font-weight: 600; font-size: 32px; line-height: 40px; color: var(--sag-olive); margin: 0; } .sagga-modal__media { text-align: center; margin: 0 0 34px; } /* Client request: the artboard shows this at ~650px, which reads as oversized in the lightbox. Reduced and height-capped so tall images behave too. */ .sagga-modal__media img { display: inline-block; max-width: 420px; max-height: 300px; width: auto; height: auto; object-fit: contain; border-radius: 4px; } .sagga-modal--media-left .sagga-modal__media { float: left; width: 210px; margin: 0 28px 18px 0; text-align: left; } .sagga-modal--media-left .sagga-modal__media img { max-width: 100%; max-height: 260px; width: 100%; object-fit: cover; } .sagga-modal__body { font-size: 18px; line-height: 30px; color: var(--sag-ink); } .sagga-modal__body .sagga-card__media { float: left; width: 42%; margin: 0 26px 16px 0; } .sagga-modal__body .sagga-card__media img { border-radius: 4px; } .sagga-modal__body::after { content: ""; display: block; clear: both; } .sagga-modal__body p { margin-bottom: 18px; } .sagga-modal__body ul { padding-left: 22px; } /* iOS Safari ignores overflow:hidden on body, so the page scrolls behind the lightbox. Locking position is the reliable cross-browser approach. */ body.sagga-modal-open { overflow: hidden; position: fixed; width: 100%; } .sagga-modal { -webkit-overflow-scrolling: touch; } /* -------------------------------------------------------------------------- Small helpers -------------------------------------------------------------------------- */ .sagga-lead { font-size: 20px; line-height: 32px; } .sagga-small { font-size: 15px; line-height: 26px; } .sagga-source { font-size: 17px; line-height: 28px; color: var(--sag-green); } .sagga-source a { text-decoration: underline; } .sagga-center { text-align: center; } .sagga-mb0 { margin-bottom: 0 !important; } .sagga-strong { font-weight: 600; } .sagga-white { color: var(--sag-white); } .sagga-diagrams { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; } .sagga-diagrams img { width: 100%; } .sagga-figure { margin: 0 0 20px; } .sagga-figure img { width: 100%; } .sagga-figure figcaption { font-size: 15px; line-height: 26px; opacity: .75; margin-top: 10px; } /* -------------------------------------------------------------------------- Optional footer (only rendered when the Divi Theme Builder footer is not available on these pages - see readme.txt) -------------------------------------------------------------------------- */ .sagga-footer { background: var(--sag-green); color: var(--sag-white); font-family: var(--sag-sans); font-weight: 300; padding: 62px 0 42px; } .sagga-footer a { color: inherit; text-decoration: none; } .sagga-footer a:hover { text-decoration: underline; } .sagga-footer__badge { text-align: center; margin-bottom: 48px; } .sagga-footer__badge img { width: 224px; height: auto; display: inline-block; } .sagga-footer__bar { background: var(--sag-lime); color: var(--sag-ink); border: 2px solid var(--sag-white); border-radius: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px; padding: 32px 30px; font-family: var(--sag-serif); font-weight: 600; font-size: 16px; line-height: 23px; } .sagga-footer__bar > span { display: flex; align-items: flex-start; gap: 10px; } .sagga-footer__icon { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px; } .sagga-footer__cols { display: grid; grid-template-columns: 1.1fr 1fr 1.35fr; gap: 40px; padding: 48px 0 32px; } .sagga-footer__brand { font-family: var(--sag-serif); font-weight: 600; font-size: 38px; line-height: 41px; } .sagga-footer__nav { display: flex; flex-wrap: wrap; gap: 10px 22px; align-content: flex-start; padding-top: 8px; } .sagga-footer__nav a { font-family: var(--sag-serif); font-weight: 600; font-size: 18px; line-height: 26px; } .sagga-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; } .sagga-footer__menu li { margin: 0; } .sagga-footer__formnote { font-size: 14px; line-height: 22px; opacity: .85; } /* Style whatever form plugin is dropped into the slot so it matches. */ .sagga-footer__form input[type="text"], .sagga-footer__form input[type="email"], .sagga-footer__form input[type="tel"], .sagga-footer__form input[type="number"], .sagga-footer__form textarea { width: 100%; border: 0; border-radius: 0; padding: 12px 14px; font: 300 15px/1.4 var(--sag-sans); background: var(--sag-white); color: var(--sag-ink); } .sagga-footer__form textarea { min-height: 130px; resize: vertical; } .sagga-footer__form input[type="submit"], .sagga-footer__form button[type="submit"] { background: transparent; border: 1px solid var(--sag-white); color: var(--sag-white); padding: 12px 26px; font: 300 15px/1 var(--sag-sans); cursor: pointer; } .sagga-footer__form input[type="submit"]:hover, .sagga-footer__form button[type="submit"]:hover { background: var(--sag-white); color: var(--sag-green); } .sagga-footer__rule { height: 1px; background: rgba(255,255,255,.5); } @media (max-width: 1024px) { .sagga-footer__bar { grid-template-columns: 1fr 1fr; } .sagga-footer__cols { grid-template-columns: 1fr; gap: 32px; } } @media (max-width: 767px) { .sagga-footer { padding: 44px 0 32px; } .sagga-footer__badge img { width: 160px; } .sagga-footer__bar { grid-template-columns: 1fr; padding: 24px 22px; } .sagga-footer__brand { font-size: 28px; line-height: 32px; } } /* Screen-reader only */ .sagga-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ========================================================================== RESPONSIVE The mockups are desktop only, so tablet/mobile behaviour below is designed to keep the same rhythm rather than simply shrink the desktop layout. ========================================================================== */ /* Laptop / small desktop */ @media (max-width: 1280px) { .sagga-page { font-size: 18px; line-height: 29px; } .sagga-page h1 { font-size: 46px; line-height: 54px; } .sagga-page h2 { font-size: 36px; line-height: 44px; } .sagga-pests h2 { font-size: 46px; line-height: 56px; } .sagga-levy h2 { font-size: 54px; line-height: 64px; } .sagga-pill { font-size: 24px; line-height: 32px; } .sagga-pills { gap: 20px 34px; } .sagga-numhead__circle { width: 140px; height: 140px; font-size: 62px; } .sagga-numhead { padding-left: 80px; } .sagga-numhead__bar { padding-left: 92px; } .sagga-numhead + .sagga-article { padding-left: 172px; } } /* Tablet */ @media (max-width: 1024px) { .sagga-section { padding: 64px 0; } .sagga-section--pad-lg { padding-bottom: 96px; } .sagga-page h1 { font-size: 40px; line-height: 48px; } .sagga-page h2 { font-size: 32px; line-height: 40px; } .sagga-hero { min-height: 480px; } .sagga-hero::before { background: linear-gradient(180deg, rgba(16,15,13,.86) 0%, rgba(16,15,13,.72) 60%, rgba(16,15,13,.62) 100%); } .sagga-hero--split { min-height: 0; } .sagga-grid--2, .sagga-grid--3, .sagga-grid--media { grid-template-columns: 1fr; } .sagga-cards { grid-template-columns: 1fr 1fr; } .sagga-pills { grid-template-columns: 1fr; } .sagga-compare__head { display: none; } .sagga-compare__row { grid-template-columns: 1fr; gap: 6px; } .sagga-compare__row > div:first-child { font-family: var(--sag-serif); font-weight: 600; color: var(--sag-lime); font-size: 20px; } .sagga-compare__row > div:nth-child(2)::before { content: "Local: "; font-weight: 600; } .sagga-compare__row > div:nth-child(3)::before { content: "Imported: "; font-weight: 600; } .sagga-panel { padding: 36px 30px 40px; } .sagga-panel__garlic { width: 200px; right: -8px; bottom: -60px; } /* Timeline: spine moves to the left, everything stacks in one column. */ .sagga-tl__band::before { left: 34px; margin-left: 0; width: 16px; } .sagga-tl__band--first::before { top: 40px; } .sagga-tl__band--last::before { bottom: calc(100% - 40px); } .sagga-tl__panel { left: 0; opacity: .22; } .sagga-tl__step { grid-template-columns: 1fr; padding-left: 92px; padding-bottom: 34px; } .sagga-tl__step--straddle { margin-top: 0; } .sagga-tl__num { left: 42px; top: 26px; width: 84px; height: 84px; font-size: 40px; } .sagga-tl__bar, .sagga-tl__step--right .sagga-tl__bar, .sagga-tl__step--full .sagga-tl__bar { grid-column: 1 / -1; min-height: 52px; font-size: 21px; line-height: 28px; padding: 10px 26px; justify-content: flex-start; text-align: left; } .sagga-tl__body, .sagga-tl__step--right .sagga-tl__body { grid-column: 1 / -1; padding: 22px 0 0; font-size: 17px; line-height: 28px; } .sagga-tl__split { grid-template-columns: 1fr; } .sagga-tl__split > div, .sagga-tl__split > div + div { padding: 22px 0 0; font-size: 17px; line-height: 28px; color: inherit; } /* Once the photo panel drops to a faint wash, the copy must go back to ink. */ .sagga-tl__split > div + div { color: var(--sag-ink); } .sagga-tl__tip { color: var(--sag-ink); } .sagga-tl__cutout { display: none; } .sagga-tl__media img { max-height: 260px; object-fit: cover; } .sagga-numhead { padding-left: 0; } .sagga-numhead__circle { position: relative; transform: none; width: 84px; height: 84px; font-size: 40px; margin-bottom: -30px; left: 0; top: 0; z-index: 3; /* was rendering behind the lime bar on mobile */ } .sagga-numhead__bar { position: relative; z-index: 1; } .sagga-numhead__bar { padding-left: 34px; padding-top: 34px; } .sagga-numhead + .sagga-article { padding-left: 0; } .sagga-bleed-right { margin-right: 0; } /* Botanical diagrams: stack and centre rather than hug the left edge. */ .sagga-diagrams { grid-template-columns: 1fr; gap: 22px; justify-items: center; } .sagga-diagrams img { max-width: 420px; } .sagga-card--float .sagga-card__media { float: none; width: 100%; margin: 0 0 16px; } /* Card art was eating the whole card once columns collapsed. */ .sagga-card__media img { max-height: 210px; object-fit: cover; } .sagga-card__body, .sagga-card--textonly .sagga-card__body { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; } /* Timeline photos were rendering full-bleed and metres tall. */ .sagga-levy { padding: 64px 0 56px; } .sagga-levy h2 { font-size: 40px; line-height: 50px; } } /* Mobile */ @media (max-width: 767px) { .sagga-page { --sag-gutter: 20px; font-size: 17px; line-height: 28px; } .sagga-section { padding: 48px 0; } .sagga-section--pad-lg { padding-bottom: 64px; } .sagga-page h1 { font-size: 32px; line-height: 40px; } .sagga-page h2 { font-size: 27px; line-height: 35px; } .sagga-page h3 { font-size: 23px; line-height: 31px; } .sagga-hero { min-height: 420px; } .sagga-hero > .sagga-container { padding-top: 48px; padding-bottom: 48px; } .sagga-hero h2 { font-size: 25px; line-height: 33px; } .sagga-cards { grid-template-columns: 1fr; } .sagga-card { padding: 24px 22px 20px; } .sagga-card__title { font-size: 24px; line-height: 32px; } /* Cards stack on mobile, so nothing is gained by clipping. Show the whole teaser and drop the fade mask - "Read More" still opens the full copy. */ .sagga-card__media img { max-height: 150px; object-fit: cover; } .sagga-card__media { margin-bottom: 14px; } .sagga-card__body, .sagga-card--textonly .sagga-card__body { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; } /* Apple's minimum comfortable touch target is 44x44. "Read More" was rendering ~30px tall, so it was fiddly to tap. */ .sagga-card__more { font-size: 20px; padding: 14px 0 6px; min-height: 44px; align-items: center; } .sagga-pill { min-height: 78px; font-size: 20px; line-height: 27px; padding: 12px 46px 12px 22px; } .sagga-pill--thumb { padding-left: 86px; } .sagga-pill__thumb { width: 74px; height: 74px; } .sagga-pill__chev { right: 20px; width: 13px; height: 21px; } .sagga-pests h2 { font-size: 32px; line-height: 40px; } .sagga-numlist li { grid-template-columns: 54px 1fr; } .sagga-numlist__n { font-size: 34px; line-height: 30px; } .sagga-panel { padding: 28px 22px 32px; } .sagga-panel--sources { font-size: 15px; line-height: 26px; } .sagga-panel__garlic { display: none; } .sagga-step { padding-left: 78px; } .sagga-tl__step { padding-left: 74px; } .sagga-tl__band::before { left: 24px; width: 12px; } .sagga-tl__num { left: 30px; width: 62px; height: 62px; font-size: 30px; top: 24px; } .sagga-tl__bar, .sagga-tl__step--right .sagga-tl__bar, .sagga-tl__step--full .sagga-tl__bar { font-size: 18px; line-height: 25px; padding: 10px 20px; min-height: 46px; } .sagga-tl__media img { max-height: 200px; } .sagga-modal { padding: 24px 14px; } .sagga-modal__dialog { padding: 22px 20px 34px; border-radius: 18px; } .sagga-modal__close { flex-basis: 48px; width: 48px; height: 48px; } .sagga-modal__title { font-size: 24px; line-height: 32px; } .sagga-modal__body { font-size: 17px; line-height: 28px; } .sagga-modal--media-left .sagga-modal__media { float: none; width: 100%; margin: 0 0 20px; } .sagga-modal__media img, .sagga-modal--media-left .sagga-modal__media img { max-width: 100%; max-height: 220px; } .sagga-levy h2 { font-size: 30px; line-height: 39px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .sagga-page *, .sagga-page *::before, .sagga-page *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ========================================================================== Conference enquiry page Uses the same tokens, type scale and spacing as every other SAGGA page. ========================================================================== */ /* Save-the-date pillars */ .sagga-page .sagga-pillars { list-style: none; margin: 38px 0 40px; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; } .sagga-page .sagga-pillars li { margin: 0; } .sagga-pillars span { display: inline-block; background: var(--sag-lime); color: var(--sag-olive); border-radius: 999px; padding: 10px 26px; font-family: var(--sag-serif); font-weight: 600; font-size: 19px; line-height: 26px; } .sagga-page .sagga-note { font-size: 17px; line-height: 28px; opacity: .8; } /* Buttons - same shape and weight as the header CTA on every other page */ .sagga-btn { display: inline-block; background: var(--sag-green); color: var(--sag-white); border: 2px solid var(--sag-green); border-radius: 8px; padding: 16px 40px; font-family: var(--sag-serif); font-weight: 600; font-size: 19px; line-height: 1; letter-spacing: .02em; cursor: pointer; transition: background .18s ease, color .18s ease; } .sagga-btn:hover { background: var(--sag-green-dk); border-color: var(--sag-green-dk); text-decoration: none; } .sagga-btn--ghost { background: transparent; color: var(--sag-green); } .sagga-btn--ghost:hover { background: var(--sag-green); color: var(--sag-white); } /* Form shell */ .sagga-formintro { max-width: 760px; } .sagga-form { margin-top: 40px; } .sagga-req { color: var(--sag-green); font-weight: 700; } .sagga-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .sagga-alert { background: #FBE9E7; border-left: 6px solid #B3261E; color: #5F1512; padding: 16px 20px; border-radius: 6px; font-size: 17px; line-height: 26px; margin-bottom: 30px; } /* Fieldsets styled as the numbered sections used on Cultivation */ .sagga-fs { border: 0; margin: 0 0 44px; padding: 0; } .sagga-fs__legend { display: flex; align-items: center; gap: 18px; width: 100%; padding: 0; margin: 0 0 26px; font-family: var(--sag-serif); font-weight: 600; font-size: 28px; line-height: 36px; color: var(--sag-ink); } .sagga-fs__n { flex: 0 0 54px; width: 54px; height: 54px; border-radius: 50%; background: var(--sag-green); color: var(--sag-white); display: flex; align-items: center; justify-content: center; font-size: 26px; line-height: 1; } /* Attendance choice cards */ .sagga-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .sagga-choice { display: block; cursor: pointer; } .sagga-choice input { position: absolute; opacity: 0; width: 0; height: 0; } .sagga-choice__box { display: block; border: 2px solid #D8DCC8; background: var(--sag-white); border-radius: var(--sag-radius-sm); padding: 22px 24px 22px 62px; position: relative; transition: border-color .18s ease, background .18s ease; } .sagga-choice__box::before { content: ""; position: absolute; left: 22px; top: 26px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #B9C2A0; background: var(--sag-white); } .sagga-choice input:checked + .sagga-choice__box { border-color: var(--sag-green); background: #F7FBEA; } .sagga-choice input:checked + .sagga-choice__box::before { border-color: var(--sag-green); box-shadow: inset 0 0 0 5px var(--sag-green); } .sagga-choice input:focus-visible + .sagga-choice__box { outline: 3px solid var(--sag-lime); outline-offset: 2px; } .sagga-choice__title { display: block; font-family: var(--sag-serif); font-weight: 600; font-size: 21px; line-height: 28px; color: var(--sag-ink); } .sagga-choice__sub { display: block; font-size: 16px; line-height: 24px; opacity: .72; margin-top: 2px; } .sagga-choices.has-error .sagga-choice__box { border-color: #B3261E; } /* Fields */ .sagga-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 24px; } .sagga-fields--3 { grid-template-columns: repeat(3, 1fr); } .sagga-fields--4 { grid-template-columns: repeat(4, 1fr); } /* Booking row: a narrow number field beside the agenda box, tops aligned. */ .sagga-fields--booking { grid-template-columns: 260px 1fr; align-items: start; } .sagga-field { margin: 0; display: flex; flex-direction: column; } .sagga-field--wide { grid-column: 1 / -1; } .sagga-field--2col { grid-column: span 2; } .sagga-field label { font-family: var(--sag-serif); font-weight: 600; font-size: 17px; line-height: 24px; margin-bottom: 8px; color: var(--sag-ink); } .sagga-help { font-size: 15px; line-height: 22px; opacity: .72; margin: 0 0 8px; } .sagga-field .sagga-help { min-height: 22px; } .sagga-help--block { margin-bottom: 22px; } .sagga-page .sagga-form p { margin: 0; } .sagga-form input[type="text"], .sagga-form input[type="email"], .sagga-form input[type="tel"], .sagga-form input[type="number"], .sagga-form textarea { width: 100%; font-family: var(--sag-sans); font-weight: 300; font-size: 17px; line-height: 26px; color: var(--sag-ink); background: var(--sag-white); border: 2px solid #D8DCC8; border-radius: var(--sag-radius-sm); padding: 14px 16px; min-height: 54px; /* comfortable touch target */ transition: border-color .18s ease, box-shadow .18s ease; -webkit-appearance: none; appearance: none; } .sagga-form textarea { resize: vertical; min-height: 96px; } .sagga-form input:focus, .sagga-form textarea:focus { outline: none; border-color: var(--sag-green); box-shadow: 0 0 0 3px rgba(112, 146, 42, .18); } .sagga-form input.has-error, .sagga-form textarea.has-error { border-color: #B3261E; } .sagga-err { color: #B3261E; font-size: 15px; line-height: 22px; margin-top: 6px; display: block; } .sagga-page .sagga-form__submit p { margin: 0; } .sagga-form__submit { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 8px; } /* Conditional section, revealed by sagga.js */ .sagga-fs[data-sagga-when][hidden] { display: none; } /* Success state */ .sagga-success { background: var(--sag-lime); border-radius: var(--sag-radius); padding: 56px 56px 60px; text-align: center; margin-top: 44px; } .sagga-success__mark { width: 92px; height: 92px; margin: 0 auto 26px; border-radius: 50%; background: var(--sag-white); display: flex; align-items: center; justify-content: center; } .sagga-success__mark svg { width: 52px; height: 52px; } .sagga-success h2 { margin-bottom: 18px; } .sagga-success p { max-width: 720px; margin-left: auto; margin-right: auto; } .sagga-success a:not(.sagga-btn) { text-decoration: underline; } .sagga-page .sagga-contactlist { font-size: 21px; line-height: 36px; } .sagga-page .sagga-contactlist p { margin: 0; } .sagga-contactlist a { text-decoration: underline; } @media (max-width: 1024px) { .sagga-fields--booking { grid-template-columns: 220px 1fr; } .sagga-fields--3, .sagga-fields--4 { grid-template-columns: repeat(2, 1fr); } .sagga-field--2col { grid-column: 1 / -1; } .sagga-choices { grid-template-columns: 1fr; } .sagga-success { padding: 40px 30px 44px; } } @media (max-width: 767px) { .sagga-fields, .sagga-fields--3, .sagga-fields--4, .sagga-fields--booking { grid-template-columns: 1fr; gap: 18px; } .sagga-field .sagga-help { min-height: 0; } .sagga-field--2col { grid-column: 1 / -1; } .sagga-fs { margin-bottom: 34px; } .sagga-fs__legend { font-size: 23px; line-height: 30px; gap: 14px; } .sagga-fs__n { flex-basis: 44px; width: 44px; height: 44px; font-size: 21px; } .sagga-page .sagga-pillars { margin: 28px 0 30px; } .sagga-pillars span { font-size: 17px; padding: 8px 20px; } /* 16px minimum stops iOS Safari zooming the page on focus */ .sagga-page .sagga-form p { margin: 0; } .sagga-form input[type="text"], .sagga-form input[type="email"], .sagga-form input[type="tel"], .sagga-form input[type="number"], .sagga-form textarea { font-size: 16px; min-height: 52px; } .sagga-btn { width: 100%; text-align: center; padding: 18px 24px; } .sagga-form__submit { gap: 16px; } .sagga-success { padding: 32px 22px 36px; } .sagga-success__mark { width: 72px; height: 72px; } .sagga-success__mark svg { width: 40px; height: 40px; } } /* ========================================================================== 2026 Conference additions ========================================================================== */ .sagga-page .sagga-eyebrow { font-family: var(--sag-serif); font-weight: 600; font-size: 15px; line-height: 22px; letter-spacing: .16em; text-transform: uppercase; color: var(--sag-lime); margin: 0 0 14px; } .sagga-factbar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28); border-radius: var(--sag-radius-sm); padding: 22px 26px; margin: 0 0 28px; max-width: 720px; } .sagga-factbar__k { display: block; font-family: var(--sag-serif); font-weight: 600; font-size: 21px; line-height: 28px; } .sagga-factbar__v { display: block; font-size: 16px; line-height: 24px; opacity: .85; } .sagga-focus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .sagga-focus article { background: var(--sag-lime); border-radius: var(--sag-radius); padding: 32px 30px 34px; } .sagga-focus h3 { color: var(--sag-olive); font-size: 24px; line-height: 32px; margin-bottom: 14px; } .sagga-focus p { font-size: 17px; line-height: 28px; } /* Programme */ .sagga-prog { margin-top: 34px; border-top: 1px solid rgba(255,255,255,.28); } .sagga-prog__row { display: grid; grid-template-columns: 110px 1fr; gap: 0 26px; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.22); } .sagga-prog__row--plain { background: rgba(255,255,255,.07); } .sagga-prog__t { font-family: var(--sag-serif); font-weight: 600; font-size: 19px; line-height: 28px; color: var(--sag-lime); } .sagga-prog__d strong { display: block; font-weight: 500; font-size: 18px; line-height: 27px; } .sagga-prog__d span { display: block; font-size: 16px; line-height: 25px; opacity: .82; margin-top: 3px; } /* Three-up attendance choice */ .sagga-choices--3 { grid-template-columns: repeat(3, 1fr); } /* Fee display block, styled like a field but read-only */ .sagga-feebox { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 14px 16px; border: 2px dashed #C2CBA6; border-radius: var(--sag-radius-sm); font-family: var(--sag-serif); font-weight: 600; font-size: 21px; color: var(--sag-olive); } .sagga-feebox small { font-family: var(--sag-sans); font-weight: 300; font-size: 14px; opacity: .75; } /* Checkbox */ .sagga-check { display: flex; align-items: flex-start; gap: 16px; cursor: pointer; } .sagga-check input { position: absolute; opacity: 0; width: 0; height: 0; } .sagga-check__box { flex: 0 0 28px; width: 28px; height: 28px; margin-top: 2px; border: 2px solid #B9C2A0; border-radius: 6px; background: var(--sag-white); position: relative; transition: background .18s ease, border-color .18s ease; } .sagga-check input:checked + .sagga-check__box { background: var(--sag-green); border-color: var(--sag-green); } .sagga-check input:checked + .sagga-check__box::after { content: ""; position: absolute; left: 8px; top: 3px; width: 8px; height: 14px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); } .sagga-check input:focus-visible + .sagga-check__box { outline: 3px solid var(--sag-lime); outline-offset: 2px; } .sagga-check__label { font-size: 18px; line-height: 27px; } .sagga-btn--light { background: var(--sag-lime); color: var(--sag-ink); border-color: var(--sag-lime); } .sagga-btn--light:hover { background: var(--sag-white); border-color: var(--sag-white); color: var(--sag-green); } .sagga-bg-green .sagga-panel h3, .sagga-panel h3 { color: var(--sag-ink); } @media (max-width: 1024px) { .sagga-focus { grid-template-columns: 1fr; } .sagga-choices--3 { grid-template-columns: 1fr; } .sagga-factbar { grid-template-columns: 1fr; } } @media (max-width: 767px) { .sagga-prog__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; } .sagga-prog__t { font-size: 17px; } .sagga-prog__d strong { font-size: 17px; line-height: 25px; } .sagga-factbar { padding: 18px 20px; } .sagga-factbar__k { font-size: 19px; } .sagga-focus article { padding: 24px 22px 26px; } .sagga-check__label { font-size: 16px; line-height: 25px; } } /* ========================================================================== RSVP refinements ========================================================================== */ /* Anchor offset for /conference-entries/#conference-rsvp. sagga.js measures the site's real sticky header and overwrites --sagga-anchor-offset at runtime; the values here are the fallback used before that runs, and if no pinned header is found. */ :root { --sagga-anchor-offset: 120px; } .sagga-page #conference-rsvp, .sagga-page .sagga-anchor { scroll-margin-top: var(--sagga-anchor-offset, 120px); } .sagga-page .sagga-anchor { display: block; height: 0; overflow: hidden; } @media (max-width: 980px) { :root { --sagga-anchor-offset: 90px; } } /* NOTE: no `html { scroll-behavior: smooth }` here on purpose. It is a global rule that slows scrolling across the whole site, and it is not needed - the anchor jump below uses an instant scroll instead. */ /* Busy submit button */ .sagga-btn.is-busy, .sagga-btn:disabled { opacity: .72; cursor: progress; pointer-events: none; } /* ---- form rhythm: consistent label/input/spacing ---- */ .sagga-page .sagga-field label { margin-bottom: 7px; } .sagga-page .sagga-field .sagga-help { margin-bottom: 7px; } .sagga-form input[type="text"], .sagga-form input[type="email"], .sagga-form input[type="tel"], .sagga-form input[type="number"] { height: 54px; min-height: 54px; } .sagga-form textarea { min-height: 96px; padding-top: 13px; } .sagga-page .sagga-fs { margin-bottom: 40px; } .sagga-page .sagga-fs__legend { margin-bottom: 24px; } .sagga-page .sagga-fields { row-gap: 22px; } /* The submit row needs real air above it */ .sagga-page .sagga-form__submit { margin-top: 10px; padding-top: 26px; border-top: 1px solid #E4E6D6; } /* Errors: reserve space so the layout does not jump when one appears */ .sagga-page .sagga-err { margin-top: 7px; } .sagga-page .sagga-alert { margin-bottom: 34px; } @media (max-width: 767px) { .sagga-form input[type="text"], .sagga-form input[type="email"], .sagga-form input[type="tel"], .sagga-form input[type="number"] { height: 52px; min-height: 52px; } .sagga-page .sagga-fs { margin-bottom: 30px; } .sagga-page .sagga-fs__legend { margin-bottom: 18px; } .sagga-page .sagga-form__submit { padding-top: 22px; } }