/** * Averania export pages -- design system. * * Everything is namespaced under .av- so it can sit alongside Divi without * fighting it. Pages built as plain HTML get .av-plain on , which lets * sections break out of Divi's narrow content column. */ :root { --av-forest: #0f3d2e; --av-green: #146c52; --av-green-soft: #e6f0eb; --av-gold: #f4b942; --av-gold-soft: #fdf3dd; --av-ink: #1f2933; --av-ink-soft: #52606d; --av-line: #dfe5e2; --av-cream: #fdfbf6; --av-white: #ffffff; --av-radius: 18px; --av-radius-lg: 30px; --av-shadow: 0 18px 42px rgba(20, 55, 43, 0.10); --av-shadow-lg: 0 28px 64px rgba(20, 55, 43, 0.16); --av-max: 1180px; --av-font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --av-display: "Oswald", var(--av-font); } /* ------------------------------------------------------------------ */ /* Layout scaffolding */ /* ------------------------------------------------------------------ */ .av-plain #main-content .container, .av-plain #main-content .container .et_pb_row { width: 100%; max-width: none; padding: 0; margin: 0; } .av-plain #main-content article, .av-plain #main-content .entry-content { padding: 0; } .av-plain .entry-title, .av-plain #main-content .post-meta { display: none; } .av-wrap { max-width: var(--av-max); margin-inline: auto; padding-inline: 22px; } .av-section { padding: clamp(56px, 7vw, 96px) 0; } .av-section--tint { background: var(--av-cream); } .av-section--green { background: var(--av-forest); color: #eaf3ee; } .av-section--green h2, .av-section--green h3 { color: #fff; } .av-grid { display: grid; gap: 28px; } @media (min-width: 720px) { .av-grid--2 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 720px) { .av-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .av-grid--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 720px) { .av-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .av-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* ------------------------------------------------------------------ */ /* Typography */ /* ------------------------------------------------------------------ */ .av-plain #main-content, .av-rfq { font-family: var(--av-font); color: var(--av-ink); line-height: 1.65; } .av-eyebrow { display: inline-block; font-family: var(--av-display); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--av-green); margin-bottom: 14px; } /* On dark backgrounds the green eyebrow is unreadable -- switch to gold. */ .av-section--green .av-eyebrow, .av-hero .av-eyebrow { color: var(--av-gold); } .av-h1 { font-family: var(--av-display); font-size: clamp(34px, 5.4vw, 60px); line-height: 1.06; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 20px; color: var(--av-forest); } .av-h2 { font-family: var(--av-display); font-size: clamp(27px, 3.6vw, 42px); line-height: 1.15; font-weight: 700; margin: 0 0 18px; color: var(--av-forest); } .av-section--green .av-h1, .av-section--green .av-h2 { color: #fff; } .av-h3 { font-family: var(--av-display); font-size: 21px; font-weight: 600; margin: 0 0 10px; color: var(--av-forest); } .av-lead { font-size: clamp(17px, 2vw, 20px); color: var(--av-ink-soft); max-width: 62ch; margin: 0 0 26px; } .av-section--green .av-lead { color: #c9ddd3; } .av-measure { max-width: 68ch; } /* ------------------------------------------------------------------ */ /* Buttons */ /* ------------------------------------------------------------------ */ .av-btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border: 2px solid transparent; border-radius: 999px; font-family: var(--av-display); font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; } .av-btn:hover { transform: translateY(-2px); text-decoration: none; } .av-btn:focus-visible { outline: 3px solid var(--av-gold); outline-offset: 3px; } .av-btn--primary { background: var(--av-gold); color: #3a2a05 !important; box-shadow: 0 12px 26px rgba(244, 185, 66, .38); } .av-btn--primary:hover { background: #ffc95c; } .av-btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .55); color: #fff !important; } .av-btn--ghost:hover { background: rgba(255, 255, 255, .12); } .av-btn--dark { background: var(--av-forest); color: #fff !important; } .av-btn--dark:hover { background: var(--av-green); } .av-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ------------------------------------------------------------------ */ /* Hero */ /* ------------------------------------------------------------------ */ .av-hero { position: relative; background: radial-gradient(1200px 520px at 78% 12%, rgba(244, 185, 66, .22), transparent 62%), linear-gradient(135deg, #0f3d2e 0%, #146c52 62%, #1c8462 100%); color: #fff; padding: clamp(64px, 8vw, 108px) 0 clamp(56px, 7vw, 92px); overflow: hidden; } .av-hero__inner { display: grid; gap: 42px; align-items: center; } @media (min-width: 940px) { .av-hero__inner { grid-template-columns: 1.08fr .92fr; gap: 56px; } } .av-hero .av-h1 { color: #fff; } .av-hero .av-lead { color: #cfe3d9; } .av-hero__media { position: relative; border-radius: var(--av-radius-lg); overflow: hidden; box-shadow: var(--av-shadow-lg); background: rgba(255, 255, 255, .06); } .av-hero__media img { display: block; width: 100%; height: auto; } .av-hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; } .av-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; border-radius: 999px; background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .24); font-size: 13px; font-weight: 700; letter-spacing: .03em; } .av-badge--solid { background: var(--av-gold-soft); border-color: #f0dcae; color: #6b4d06; } /* ------------------------------------------------------------------ */ /* Fact strip */ /* ------------------------------------------------------------------ */ .av-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--av-line); border-radius: var(--av-radius); overflow: hidden; border: 1px solid var(--av-line); } @media (min-width: 860px) { .av-facts { grid-template-columns: repeat(4, 1fr); } } .av-fact { background: #fff; padding: 26px 22px; text-align: center; } .av-fact__num { font-family: var(--av-display); font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; color: var(--av-green); line-height: 1.1; display: block; } .av-fact__label { font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: var(--av-ink-soft); margin-top: 6px; display: block; } /* ------------------------------------------------------------------ */ /* Cards */ /* ------------------------------------------------------------------ */ .av-card { background: #fff; border: 1px solid var(--av-line); border-radius: var(--av-radius); padding: 28px 26px; box-shadow: var(--av-shadow); display: flex; flex-direction: column; gap: 8px; } .av-card__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--av-green-soft); color: var(--av-green); font-size: 21px; margin-bottom: 6px; } .av-card p { margin: 0; color: var(--av-ink-soft); } .av-card--product { padding: 0; overflow: hidden; } .av-card--product img { width: 100%; height: 220px; object-fit: cover; display: block; background: var(--av-cream); } .av-card--product .av-card__body { padding: 22px 24px 26px; } .av-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 0; padding: 0; list-style: none; } .av-tag { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: var(--av-green-soft); color: var(--av-green); } .av-tag--gold { background: var(--av-gold-soft); color: #7a5806; } /* ------------------------------------------------------------------ */ /* Spec tables */ /* ------------------------------------------------------------------ */ .av-tablewrap { overflow-x: auto; border: 1px solid var(--av-line); border-radius: var(--av-radius); background: #fff; -webkit-overflow-scrolling: touch; } .av-table { width: 100%; border-collapse: collapse; min-width: 620px; font-size: 15px; } .av-table th, .av-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--av-line); } .av-table thead th { background: var(--av-forest); color: #fff; font-family: var(--av-display); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; border-bottom: none; } .av-table tbody tr:last-child td { border-bottom: none; } .av-table tbody tr:nth-child(even) { background: #fafcfb; } .av-table td:first-child { font-weight: 700; color: var(--av-forest); } /* ------------------------------------------------------------------ */ /* FAQ (no JavaScript) */ /* ------------------------------------------------------------------ */ .av-faq { display: grid; gap: 12px; } .av-faq details { background: #fff; border: 1px solid var(--av-line); border-radius: 14px; padding: 0; overflow: hidden; } .av-faq summary { cursor: pointer; padding: 19px 54px 19px 22px; font-weight: 700; color: var(--av-forest); position: relative; list-style: none; font-size: 16px; } .av-faq summary::-webkit-details-marker { display: none; } .av-faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 24px; line-height: 1; color: var(--av-green); font-weight: 400; } .av-faq details[open] summary::after { content: "\2013"; } .av-faq details[open] summary { background: var(--av-green-soft); } .av-faq p { margin: 0; padding: 18px 22px 22px; color: var(--av-ink-soft); } /* ------------------------------------------------------------------ */ /* Notices, callouts */ /* ------------------------------------------------------------------ */ .av-callout { border-left: 5px solid var(--av-gold); background: var(--av-gold-soft); padding: 22px 26px; border-radius: 0 14px 14px 0; } .av-callout p:last-child { margin-bottom: 0; } .av-notice { padding: 17px 22px; border-radius: 12px; margin-bottom: 22px; font-size: 15px; } .av-notice--ok { background: #e4f4ec; border: 1px solid #a8d8c1; color: #12543c; } .av-notice--err { background: #fdeceb; border: 1px solid #f3bdb8; color: #8c2018; } /* ------------------------------------------------------------------ */ /* RFQ form */ /* ------------------------------------------------------------------ */ .av-rfq { background: #fff; border: 1px solid var(--av-line); border-radius: var(--av-radius-lg); padding: clamp(26px, 4vw, 46px); box-shadow: var(--av-shadow); max-width: 900px; margin-inline: auto; scroll-margin-top: 90px; } .av-rfq__intro h2 { font-family: var(--av-display); font-size: clamp(24px, 3vw, 33px); color: var(--av-forest); margin: 0 0 8px; } .av-rfq__intro p { color: var(--av-ink-soft); margin: 0 0 26px; } .av-form__grid { display: grid; gap: 18px; } @media (min-width: 700px) { .av-form__grid { grid-template-columns: repeat(2, 1fr); } } .av-field { margin: 0 0 18px; } .av-form__grid .av-field { margin: 0; } .av-field label, .av-field legend { display: block; font-weight: 700; font-size: 14px; color: var(--av-forest); margin-bottom: 7px; } .av-field input[type="text"], .av-field input[type="email"], .av-field select, .av-field textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--av-line); border-radius: 11px; font: inherit; font-size: 15px; color: var(--av-ink); background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .av-field input:focus, .av-field select:focus, .av-field textarea:focus { outline: none; border-color: var(--av-green); box-shadow: 0 0 0 4px rgba(20, 108, 82, .12); } .av-field textarea { resize: vertical; min-height: 120px; } .av-field--checks { border: 0; padding: 0; margin: 22px 0; } .av-checks { display: grid; gap: 9px; } @media (min-width: 620px) { .av-checks { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .av-checks { grid-template-columns: repeat(3, 1fr); } } .av-check { display: flex !important; align-items: center; gap: 9px; font-weight: 500 !important; font-size: 14px !important; color: var(--av-ink) !important; background: var(--av-cream); border: 1px solid var(--av-line); border-radius: 10px; padding: 10px 13px; cursor: pointer; margin: 0 !important; } .av-check:hover { border-color: var(--av-green); } .av-check input { margin: 0; accent-color: var(--av-green); width: 17px; height: 17px; } .av-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .av-form__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 6px 0 0; } .av-form__note { font-size: 13px; color: var(--av-ink-soft); } /* ------------------------------------------------------------------ */ /* WhatsApp float */ /* ------------------------------------------------------------------ */ .av-wa { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: inline-flex; align-items: center; gap: 9px; padding: 13px 19px; border-radius: 999px; background: #25d366; color: #06301a !important; font-family: var(--av-display); font-weight: 600; font-size: 14px; letter-spacing: .03em; text-decoration: none !important; box-shadow: 0 12px 30px rgba(37, 211, 102, .42); transition: transform .18s ease; } .av-wa:hover { transform: translateY(-2px); } .av-wa:focus-visible { outline: 3px solid var(--av-forest); outline-offset: 3px; } @media (max-width: 600px) { .av-wa span { display: none; } .av-wa { padding: 15px; } } /* ------------------------------------------------------------------ */ /* Misc */ /* ------------------------------------------------------------------ */ .av-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .av-checklist li { position: relative; padding-left: 34px; color: var(--av-ink-soft); } .av-checklist li::before { content: ""; position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--av-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; } .av-section--green .av-checklist li { color: #c9ddd3; } .av-section--green .av-checklist li::before { background-color: var(--av-gold); } .av-figure { margin: 0; border-radius: var(--av-radius); overflow: hidden; box-shadow: var(--av-shadow); } .av-figure img { display: block; width: 100%; height: auto; } .av-figure figcaption { padding: 13px 18px; font-size: 13px; color: var(--av-ink-soft); background: #fff; } .av-center { text-align: center; } .av-center .av-lead { margin-inline: auto; } .av-slot { border: 2px dashed var(--av-line); border-radius: var(--av-radius); padding: 34px 26px; text-align: center; color: var(--av-ink-soft); background: var(--av-cream); font-size: 14px; } /* ------------------------------------------------------------------ */ /* Header nav */ /* ------------------------------------------------------------------ */ /* Divi keeps the full horizontal menu down to 981px and only then switches to the hamburger. With eight items plus the logo it overflows the header in the band just above that breakpoint, so tighten spacing there rather than dropping menu items a buyer needs. */ @media (min-width: 981px) and (max-width: 1180px) { #top-menu li { padding-right: 13px; } #top-menu a { font-size: 14px; } #logo { max-height: 44px; } } @media (min-width: 1181px) and (max-width: 1340px) { #top-menu li { padding-right: 18px; } } /* ------------------------------------------------------------------ */ /* Privacy consent notice */ /* ------------------------------------------------------------------ */ .av-consent { position: fixed; left: 18px; bottom: 18px; z-index: 10000; width: min(380px, calc(100vw - 36px)); background: #fff; border: 1px solid var(--av-line); border-radius: var(--av-radius); box-shadow: 0 22px 50px rgba(20, 55, 43, .22); padding: 22px 24px; font-family: var(--av-font); color: var(--av-ink); opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease; pointer-events: none; } .av-consent.is-visible { opacity: 1; transform: none; pointer-events: auto; } .av-consent[hidden] { display: none; } .av-consent__title { font-family: var(--av-display); font-size: 17px; font-weight: 700; color: var(--av-forest); margin: 0 0 8px; } .av-consent__body { font-size: 13.5px; line-height: 1.55; color: var(--av-ink-soft); margin: 0 0 16px; } .av-consent__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .av-consent__btn { border: 0; border-radius: 999px; padding: 10px 20px; font-family: var(--av-display); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; } .av-consent__btn--accept { background: var(--av-green); color: #fff; } .av-consent__btn--accept:hover { background: var(--av-forest); } .av-consent__btn--decline { background: #eef2f0; color: var(--av-ink); } .av-consent__btn--decline:hover { background: #e2e8e5; } .av-consent__btn:focus-visible { outline: 3px solid var(--av-gold); outline-offset: 2px; } .av-consent__link { font-size: 12.5px; color: var(--av-green); text-decoration: underline; } .av-consent__note { font-size: 11.5px; color: var(--av-ink-soft); margin: 12px 0 0; } /* Keep clear of the WhatsApp button on small screens. */ @media (max-width: 600px) { .av-consent { left: 12px; right: 12px; bottom: 86px; width: auto; padding: 18px 20px; } } @media (prefers-reduced-motion: reduce) { .av-consent { transition: none; } }