/* --------------------------------------------------------------------------- micromagnets.com — site styles Values here were taken from the live BeTheme site two ways: getComputedStyle at 390/767/800/900/1100/1440px, and by injecting a synthetic

..

probe into #Content to read THEME DEFAULTS rather than elements that happen to carry inline overrides. That distinction mattered — the homepage's "Acquisition" h1 has an inline font-size:40px, which is not the h1 default. BeTheme container breakpoints: >=1240 wrapper 1220px 960-1239 wrapper 940px 768-959 wrapper 708px <=767 wrapper 550px + 33px side padding Type scale bands are different again (960 / 768 / 480), so both sets of media queries below are deliberate, not redundant. --------------------------------------------------------------------------- */ :root { --yellow: #ffc20e; /* theme colour: icons, rules, Instagram band */ --menu-current: #ffdd7a; /* nav hover + current */ --menu-idle: #d9d8d9; --heading: #111; /* h1-h3 */ --heading-alt: #444; /* h4-h6 */ --body: #626262; --muted: #a8a8a8; --link: #a37a00; /* dark gold */ --link-hover: #d64d00; /* burnt orange */ --html-bg: #fcfcfc; --content-bg: #f2f3f5; --alert-bg: #fef8ea; --alert-text: #8a5b20; --wrap: 1220px; --gutter: 12px; /* --mfn-column-gap-left/right */ } *, *::before, *::after { box-sizing: border-box; } html { background: var(--html-bg); } body { margin: 0; font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 14px; line-height: 25px; color: var(--body); } main { background: var(--content-bg); } img, video, iframe { max-width: 100%; height: auto; } /* The image build wraps each in a . display:contents keeps the wrapper out of layout, so every rule written for the still applies. */ picture { display: contents; } a { color: var(--link); } a:hover { color: var(--link-hover); } /* --- Headings. Lato for h1-h4, Roboto for h5. The 6px letter-spacing on h1-h3 is the theme's signature and applies at every breakpoint. --- */ h1, h2, h3, h4 { font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } h1, h2, h3 { letter-spacing: 6px; color: var(--heading); } h1 { font-size: 25px; line-height: 50px; font-weight: 400; margin: 0 0 15px; } h2 { font-size: 30px; line-height: 34px; font-weight: 300; margin: 0 0 15px; } h3 { font-size: 25px; line-height: 29px; font-weight: 300; margin: 0 0 15px; } h4 { font-size: 21px; line-height: 25px; font-weight: 500; color: var(--heading-alt); margin: 0 0 15px; } h5 { font-size: 15px; line-height: 25px; font-weight: 700; color: var(--heading-alt); margin: 0 0 15px; } p { margin: 0 0 15px; } /* --- Layout --------------------------------------------------------------- Columns are exact fractions; the gutter is an inset on an inner wrapper (12px each side -> 24px between columns, 40px below). Reproduced rather than replaced, because a different gutter model shifts every column edge. */ .wrap { max-width: var(--wrap); margin: 0 auto; width: 100%; } .columns { display: flex; flex-wrap: wrap; } .columns > * { padding: 0 var(--gutter); margin-bottom: 40px; } .columns--2 > * { width: 50%; } .columns--3 > * { width: 33.333%; } /* --- Header --------------------------------------------------------------- STICKY. The live header computes to position:relative at rest, but carries BeTheme's `show-on-scroll` class and reveals on scroll via JS. Sticky gives the same result the owner wanted — pinned to the top while scrolling — with no JavaScript and no scroll listener. `position: sticky` keeps the element in normal flow, so it reserves its own 100px and nothing below it shifts. The translucent rgba(0,0,0,.5) over menugradient.png is what makes content read through it as you scroll. --- */ .site-header { position: sticky; top: 0; z-index: 100; height: 100px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; background-color: rgba(0, 0, 0, .5); background-image: url("/assets/img/menugradient.png"); background-repeat: repeat-x; background-position: center top; } .site-header__logo img { display: block; width: 315px; height: auto; } .site-nav__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .site-nav__list li { margin: 0 .5px; } .site-nav__list a { display: block; padding: 8px 20px; font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--menu-idle); text-decoration: none; position: relative; } .site-nav__list a:hover, .site-nav__list a[aria-current="page"] { color: var(--menu-current); } /* The original intended a #FFD95C underline here, but pasted the rules into a style="" ATTRIBUTE — which holds declarations, not rulesets, so the browser discarded all of it and nothing ever rendered. Restored as a real rule using the live menu colour (#FFDD7A) rather than the dead attribute's #FFD95C. */ .site-nav__list a::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 4px; height: 2px; background: var(--menu-current); transform: scaleX(0); transition: transform .3s ease; } .site-nav__list a:hover::after, .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); } .site-nav__toggle, .site-nav__burger { display: none; } /* --- Hero ------------------------------------------------------------------ */ .hero { padding: 100px 0 20px; background-color: var(--content-bg); background-image: url("/assets/img/fullbackground2.jpg"); /* AVIF/WebP built by .eleventy.js. Browsers without image-set() type() support drop this declaration and keep the JPEG above. */ background-image: image-set( url("/assets/img/fullbackground2.avif") type("image/avif"), url("/assets/img/fullbackground2.webp") type("image/webp"), url("/assets/img/fullbackground2.jpg") type("image/jpeg")); background-repeat: no-repeat; background-position: center top; } .hero__inner { display: flex; flex-wrap: wrap; align-items: flex-start; } .hero__video { width: 66.666%; padding: 0 var(--gutter); } .hero__video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; } .hero__spacer { width: 33.333%; } .hero__products { display: flex; width: 100%; } .hero__product { width: 33.333%; padding: 20px; text-align: center; } .hero__product img { margin-top: 40px; } .hero__product p { margin: 10px 0; } .hero__logo { display: block; margin: 0 auto; } /* Tablet + mobile only, matching the original's per-viewport hero sections. */ .hero__banner { display: none; margin: 20px auto; } @media (max-width: 959px) { .hero__banner { display: block; } } /* --- Icon boxes ------------------------------------------------------------ Wrapper is 110x110 with border-radius:100%, but border-width computes to 0 and the background is transparent — so no visible circle, just the glyph. */ .features { display: flex; flex-wrap: wrap; padding-bottom: 20px; } .feature { width: 33.333%; padding: 10px var(--gutter); text-align: center; } .feature__icon { width: 110px; height: 110px; margin: 0 auto 25px; display: grid; place-items: center; font-size: 80px; line-height: 1; color: var(--yellow); } .feature__quotes { list-style: none; margin: 0 0 15px; padding: 0; } .feature__quotes li { margin-bottom: .35em; } /* --- Gallery --------------------------------------------------------------- 4-column grid. Unit tile is 25% wide with padding-bottom:78% of its own width -> 19.5% of the container. `.wide` is 50% wide at 39% -> same height; `.tall` is 156% -> exactly two rows. Gutter is ZERO. Isotope was positioning these absolutely at runtime. CSS Grid reproduces the same arrangement with no JavaScript. At <=767px every tile goes 100% wide and stacks in DOM order. On the live site that happens because `.section.full-width .portfolio-item` (0,4,0) outranks the masonry-flat 50% rule (0,3,0) — without `full-width` it would have been a 2-up grid. --- */ .gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 19.5vw; background-image: url("/assets/img/repeatbackground.jpg"); background-repeat: repeat; background-position: center top; } .gallery__item { display: block; overflow: hidden; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery__item--1 { grid-column: 1 / 3; grid-row: 1 / 3; } .gallery__item--2 { grid-column: 3 / 5; grid-row: 1; } .gallery__item--3 { grid-column: 3; grid-row: 2; } .gallery__item--4 { grid-column: 4; grid-row: 2; } .gallery__item--6 { grid-column: 1 / 3; grid-row: 3; } .gallery__item--5 { grid-column: 3; grid-row: 3; } .gallery__item--7 { grid-column: 4; grid-row: 3; } /* --- Acquisition ----------------------------------------------------------- */ .acquisition { padding: 30px 0 10px; background-color: gray; background-image: url("/assets/img/repeatbackground.jpg"); background-repeat: repeat; background-position: center; } /* This h1 carries an inline font-size:40px/40px on the live site — it is the exception, not the h1 default. */ .acquisition > .wrap > h1 { font-size: 40px; line-height: 40px; margin: 20px 0 30px; text-align: center; } .acquisition__lede { text-align: center; margin-bottom: 20px; } .alert { display: flex; align-items: center; background: var(--alert-bg); color: var(--alert-text); padding: 20px 35px 20px 55px; margin: 0 0 30px; border-radius: 0; } .alert::before { content: "?"; flex-shrink: 0; margin-right: 20px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-weight: 700; font-size: 15px; } .alert p { margin: 0; } /* --- Pricing boxes --------------------------------------------------------- The white panel and its 1px border live on the COLUMN INNER wrapper, not on .pricing-box itself — which is why reading .pricing-box alone reports transparent/no-border. Reproduced on .pricing-box here since this markup has no separate inner element. --- */ .pricing { display: flex; flex-wrap: wrap; } .pricing__col { width: 50%; padding: 0 var(--gutter); margin-bottom: 40px; } .pricing-box { height: 100%; text-align: center; background: #fff; border: 1px solid rgba(0, 0, 0, .08); } .pricing-box__art { display: block; margin: 0 auto; padding: 20px 15px 0; } .pricing-box__title { font-size: 30px; line-height: 30px; margin: 0 0 20px; } .price { font-family: Arial, sans-serif; font-size: 14px; margin: 0; } .price > span { font-family: Lato, sans-serif; font-size: 40px; line-height: 40px; font-weight: 400; color: var(--heading); margin: 0 5px; } .price__currency { font-family: Lato, sans-serif; font-size: 20px; line-height: 20px; position: relative; top: -10px; color: var(--heading); } .price__period { font-size: 15px; line-height: 15px; position: relative; top: -15px; color: var(--muted); } .pricing-box hr { border: 0; border-top: 1px solid var(--yellow); margin: 15px 24px; } .pricing-box__total { font-size: 25px; line-height: 29px; margin: 0 0 15px; } .pricing-box__includes { list-style: none; margin: 0; padding: 10px 24px; } .pricing-box__includes li { padding: 11px 10px; border-bottom: 1px solid rgba(0, 0, 0, .1); } .pricing-box__footer { padding: 20px 15px; } /* --- Video banner. Hidden at <=767px on the live site. --- */ .video-banner { position: relative; padding: 200px 0; background: #000; display: grid; place-items: center; } .video-banner video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .video-banner__overlay { position: relative; z-index: 1; } /* --- Instagram. Mobile only — see the <=767 block. --- */ .instagram { display: none; padding: 40px 0 20px; background-color: var(--yellow); text-align: center; } /* --- The State of Flux. No background of its own; inherits #Content. --- */ .flux > .wrap { padding: 40px; } .flux__title { font-size: 42px; line-height: 46px; font-weight: 300; text-align: center; } .flux__rule { display: block; margin: 0 auto 30px; } /* --- Newsletter ------------------------------------------------------------ */ .newsletter label { display: block; font-size: 13px; margin-top: 10px; } .newsletter input[type="email"], .newsletter input[type="text"] { width: 100%; padding: 8px 10px; font: inherit; border: 1px solid #ebebeb; background: #fff; } .newsletter__groups { border: 0; margin: 15px 0 0; padding: 0; } .newsletter__groups legend { padding: 0; margin-bottom: 8px; } .newsletter__check { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; } .newsletter__check input { margin-top: 4px; } .button { margin-top: 15px; padding: 16px 20px; border: 0; border-radius: 5px; background: var(--yellow); color: #525252; font: inherit; font-size: 13px; font-weight: 400; cursor: pointer; } /* --- Buy buttons ----------------------------------------------------------- min-height reserves the SDK iframe's space. The fallback link (see buy-button.njk) is styled like the SDK's own button, and takes no space while the SDK loads, so a successful load doesn't shift anything. --- */ .buy-button { min-height: 60px; margin: 0 auto; } .buy-button__fallback { display: block; width: 240px; max-width: 100%; margin: 0 auto; padding: 14.5px 10px; border-radius: 6px; background: #dcdcdc; color: #525252; font-size: 13px; line-height: 1.2; text-align: center; text-decoration: none; } .buy-button__fallback:hover { background: #c6c6c6; color: #525252; } .buy-button.is-loading .buy-button__fallback { display: none; } /* --- Reviews. No BeTheme equivalent — the original was a raw 182-row table. */ .reviews-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); padding: 25px; margin-bottom: 35px; } .reviews-summary__score { text-align: center; min-width: 140px; } .reviews-summary__score strong { font-family: Lato, sans-serif; font-size: 48px; line-height: 1; color: var(--heading); } .reviews-summary__score p { margin: 6px 0 0; font-size: 13px; } .reviews-summary__bars { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 240px; } .reviews-summary__bars li { display: grid; grid-template-columns: 4rem 1fr 2.5rem; gap: 10px; align-items: center; font-size: 13px; } .reviews-summary__bar { background: rgba(0, 0, 0, .08); height: 10px; overflow: hidden; } .reviews-summary__bar > span { display: block; height: 100%; background: var(--yellow); } .reviews-summary__count { text-align: right; } .review-list { list-style: none; margin: 0; padding: 0; } .review { background: #fff; border: 1px solid rgba(0, 0, 0, .08); padding: 15px 20px; margin-bottom: 10px; } .review__stars { margin: 0 0 8px; color: var(--yellow); letter-spacing: .1em; } .review__comment { margin: 0 0 8px; padding: 0; border: 0; } .review__comment p { margin: 0; } .review__preference { margin: 0; font-size: 13px; color: var(--muted); } .cta { margin-bottom: 25px; } /* --- Standalone content pages ---------------------------------------------- */ .section--compliance, .section--compatibility, .section--reviews, .section--notfound { padding: 60px 0; max-width: var(--wrap); margin: 0 auto; width: 100%; } .section--compliance { text-align: center; } .section__title { text-align: center; } .lede { padding: 0 15%; margin: 0 auto 20px; } .doc-heading { margin-top: 30px; } .doc-figures { display: flex; flex-wrap: wrap; justify-content: center; } .doc-figures figure { width: 50%; padding: 0 var(--gutter); margin: 0 0 20px; } .doc-figures figcaption { font-size: 13px; margin-top: 8px; } .spec-table { width: 100%; border-collapse: collapse; margin: 15px 0; } .spec-table th, .spec-table td { padding: 11px 10px; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, .1); } /* --- Footer ---------------------------------------------------------------- Centred at every width, copyright ABOVE the social row (the live order). Colours measured: panel #1f2227, text #ccc at 13px, icons #65666c at 15px. */ .site-footer { background: #1f2227; color: #ccc; font-size: 13px; line-height: 25px; text-align: center; padding: 30px 0 40px; border-top: 1px solid rgba(255, 255, 255, .1); } .site-footer__copyright { margin: 0 0 10px; } .site-footer__social { list-style: none; margin: 0; padding: 0; } .site-footer__social li { display: inline-block; margin: 0 6px 0 0; } .site-footer__social a { display: inline-block; color: #65666c; line-height: 0; } .site-footer__social a:hover { color: var(--yellow); } .site-footer__social svg { width: 15px; height: 15px; fill: currentColor; display: block; } /* =========================================================================== CONTAINER BREAKPOINTS =========================================================================== */ @media (max-width: 1239px) { :root { --wrap: 940px; } } @media (max-width: 959px) { :root { --wrap: 708px; } } @media (max-width: 767px) { :root { --wrap: 550px; } } /* =========================================================================== TYPE SCALE — bands are 960 / 768 / 480, verified with a synthetic probe =========================================================================== */ @media (max-width: 959px) { body { font-size: 13px; line-height: 21px; } h1 { font-size: 21px; line-height: 43px; } h2 { font-size: 26px; line-height: 29px; } h3 { font-size: 21px; line-height: 25px; } h4 { font-size: 18px; line-height: 21px; } h5 { font-size: 13px; line-height: 21px; } .flux__title { font-size: 34px; line-height: 38px; } .pricing-box__title { font-size: 26px; line-height: 29px; } .pricing-box__total { font-size: 21px; line-height: 25px; } } @media (max-width: 767px) { body { font-size: 13px; line-height: 19px; } h1 { font-size: 19px; line-height: 38px; } h2 { font-size: 23px; line-height: 26px; } h3 { font-size: 19px; line-height: 22px; } h4 { font-size: 16px; line-height: 19px; } h5 { font-size: 13px; line-height: 19px; } } @media (max-width: 479px) { h1 { font-size: 15px; line-height: 30px; } h2 { font-size: 18px; line-height: 20px; } h3 { font-size: 15px; line-height: 19px; } h4 { font-size: 13px; line-height: 19px; } .acquisition > .wrap > h1 { font-size: 30px; line-height: 32px; } .flux__title { font-size: 24px; line-height: 28px; } } /* =========================================================================== MOBILE LAYOUT <=767 =========================================================================== */ @media (max-width: 767px) { .wrap { padding-left: 33px; padding-right: 33px; } .columns > *, .pricing__col { margin-bottom: 20px; } /* Everything goes full width. */ .columns > *, .feature, .pricing__col, .doc-figures figure, .hero__video, .hero__products, .hero__product { width: 100%; } .hero__spacer { display: none; } .hero__products { flex-wrap: wrap; } /* MEASURED: on mobile the hero background is swapped to repeatbackground.jpg and tiled, via an !important override in the site's custom CSS. It is NOT fullbackground2.jpg scaled down — that image is desktop-only. */ .hero { padding: 60px 0 20px; background-image: url("/assets/img/repeatbackground.jpg"); background-repeat: repeat; } .site-header { padding: 0 15px; background-size: cover; } .site-header__logo img { width: 220px; } /* GALLERY: one sequential column at natural aspect ratio. */ .gallery { display: block; } .gallery__item { margin-bottom: 20px; } .gallery__item img { height: auto; object-fit: fill; } .instagram { display: block; } .video-banner { display: none; } .flux > .wrap { padding: 40px 33px; } .lede { padding: 0; } .pricing-box__includes { padding: 10px; } .section--compliance, .section--compatibility, .section--reviews, .section--notfound { padding: 40px 33px; } /* Burger. The original shipped two separate