/*===========================================================================# # @essence Styles for the Monitor product landing page (/monitor). # @authors Market Machines # @created 20260626 # @updated 20260626 # @version 1 #===========================================================================*/ :root { /* Shared brand palette — identical to page.css / strategist / librarian */ --BLACK: #000000; --WHITE: #FFFFFF; --GREY: #808080; --MINT_GREEN: #06CCB3; --DARK_MINT_GREEN: #049E8E; --LIGHT_MINT_GREEN: rgba(59, 197, 170, 0.2); --MM-INK: #1c2d2d; /* heading/body ink (matches librarian) */ /* Hero-composition colours taken from the design SVG */ --MM-OVAL: #EAF8F7; /* outer oval */ --MM-MINT: #BEEFE9; /* inner ellipse */ --MM-OVAL-BORDER: #BCD6F0; /* subtle outline on the outer oval */ } * { margin: 0; padding: 0; box-sizing: border-box; } body { line-height: 1.5; color: #333; background-color: var(--WHITE); } /* ----- Navbar (shared with common_nav.css) ----- */ .navbar { background-color: var(--BLACK); padding: 5px 16px; } .nav-link.active { font-weight: bold; } .navbar .nav-link { line-height: 1; padding: 5px !important; } .logo { display: inline-block; height: 45px; width: 45px; } .logo img { height: 100%; width: 100%; } /* ----- Fonts ----- */ @font-face { font-family: Albertus; src: url("../fonts/albr55w.ttf"); } @font-face { font-family: VAGRoundedRegular; src: url("../fonts/VAGRoundedRegular.ttf"); } .albertus-font { font-family: Albertus; } .vag-font { font-family: VAGRoundedRegular; } /* ----- Layout helpers ----- */ .container { max-width: 100%; margin: 0 auto; padding: 0 12px; } .pt-60px { padding-top: 60px; } .pb-60px { padding-bottom: 60px; } .text-center { text-align: center; } .text-green { color: var(--MINT_GREEN); } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } /* ----- Buttons ----- */ /* CTA — same colour scheme as librarian's .lib-cta */ .btn.monitor-cta { display: inline-block; padding: 7px 28px; background-color: var(--LIGHT_MINT_GREEN); border: 2px solid var(--MINT_GREEN); color: var(--BLACK); text-decoration: none; border-radius: 8px; font-size: 16px; font-weight: 500; transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out; } .btn.monitor-cta:hover { background-color: transparent; color: var(--MINT_GREEN); } /*===========================================================================# # Hero #===========================================================================*/ /* NB: is a fixed-height flex column (see common_nav.css). Flex items must not shrink, or the tall hero composition gets squished/clipped. */ .monitor-hero, .monitor-features { flex-shrink: 0; } .monitor-headline { color: var(--MM-INK); font-size: 2rem; letter-spacing: 0.2px; } .monitor-subhead { color: #444; font-size: 1.15rem; margin-top: 0.5rem; } .monitor-cta-wrap { margin-top: 1.25rem; } /* One wide light oval, with a centered darker mint ellipse holding the figure. Ratios mirror the source SVG: outer 949x476, inner 483x476 (centred). */ .monitor-venn { position: relative; max-width: 1000px; width:98%; height: 400px; margin: 1.5rem auto 0; } /* Outer light oval */ .venn-oval { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 96%; border-radius: 50%; background: var(--MM-OVAL); border: 1.5px solid var(--MM-OVAL-BORDER); z-index: 1; } /* Inner mint ellipse — clearly smaller than the oval so there is a gap all round (narrower than it, and shorter than it top-to-bottom). */ .venn-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 39%; height: 96%; border-radius: 50%; background: var(--MM-MINT); z-index: 2; } /* Figure sits inside the inner ellipse, biased towards the top. Widths are %-based (capped at the desktop px) so the whole composition scales fluidly between 768px and 1000px without any overlap. */ .monitor-figure { position: absolute; top: 9%; left: 50%; transform: translateX(-50%); width: 23%; max-width: 230px; height: auto; z-index: 4; } .orbit { position: absolute; z-index: 3; width: 22.5%; max-width: 220px; } .orbit h3 { font-size: 1.15rem; color: var(--MM-INK); margin-bottom: 0.4rem; } .orbit p { font-size: 0.92rem; color: #555; margin: 0; } /* Flanking labels over the light part of the oval, vertically centred */ .orbit-left { top: 50%; left: 4%; transform: translateY(-50%); text-align: center; } .orbit-right { top: 50%; right: 4%; transform: translateY(-50%); text-align: center; } /* "Monitor works in the background" — inside the inner ellipse, below the figure */ .orbit-bottom { top: 69%; left: 50%; transform: translateX(-50%); width: 31%; max-width: 300px; text-align: center; } /*===========================================================================# # Features #===========================================================================*/ .monitor-section-title { color: var(--MINT_GREEN); font-size: 1.6rem; margin-bottom: 2.5rem; } .monitor-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); justify-content:space-between; } .monitor-feature { text-align: center; padding: 0 0.5rem; } .monitor-feature-icon { height: 84px; width: auto; margin-bottom: 1rem; } .monitor-feature h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .monitor-feature p { color: #555; font-size: 0.92rem; max-width: 320px; margin: 0 auto 1rem; min-height:69px;} .monitor-pills { display: flex; flex-wrap: wrap; justify-content: center; background: var(--LIGHT_MINT_GREEN); width:fit-content; margin:0 auto; padding: 4px 18px; gap:4px; } .monitor-pills span { color: var(--MM-INK); font-size: 0.9rem; } .monitor-bottom-cta { margin-top: 3rem; } /*===========================================================================# # Footer #===========================================================================*/ footer { background-color: var(--BLACK); padding: 16px 0; } .small-font { font-size: 0.85rem; } /*===========================================================================# # Responsive #===========================================================================*/ /* Tablets / small laptops: stack the 3 feature cards into a single column, but keep the wide oval (it scales fluidly via the %-based widths above). */ @media (max-width: 991px) { .venn-inner { top: 50%; left: 50%; width: 36%; height: 86%; } .venn-oval { height: 86%; } .monitor-figure { top: 13%; width: 20%; max-width: 200px; } .orbit-bottom { top:66%; } } @media (max-width: 940px) { .venn-inner { width:39%; } } @media (max-width: 870px) { .venn-inner { width:40%; } .orbit-bottom { top:60%; } } /* Phones: switch the hero to a portrait oval with a centred round. The oval width tracks the viewport so it never touches the screen edges. */ @media (max-width: 769px) { .monitor-feature-grid { grid-template-columns: 1fr; gap: 2.5rem; } .monitor-feature-icon { height: 75px;} .monitor-pills span { font-size: 0.86rem; } .monitor-venn { width: 92%; max-width: 360px; height: 730px; margin: 1.5rem auto 0; } .venn-oval { width: 100%; height: 100%; } /* Inner mint becomes a centred round, clearly narrower than the oval so the sides never touch (fixed px keeps it perfectly circular). */ .venn-inner { width: 100%; height: 50%; max-width: none; top: 50%; } .monitor-figure { top: 28%; width: 215px; max-width: 50%; } /* Labels are kept narrow and positioned in the wider part of the oval so the text always stays inside the shape. */ .orbit { width: 58%; max-width: 260px; } /* Define what matters — top, inside the oval above the round */ .orbit-left { top: 9%; left: 50%; right: auto; transform: translateX(-50%); } /* Monitor works in the background — just below the round */ .orbit-bottom { top: 55%; width: 70%; max-width: 280px; } /* Get only what you need — bottom, inside the oval below the round */ .orbit-right { top: 80%; left: 50%; right: auto; transform: translateX(-50%); } } /* Small phones: scale type down (oval already tracks the viewport width) */ @media (max-width: 575px) { .monitor-headline { font-size: 1.5rem; } .monitor-subhead { font-size: 1rem; } .monitor-section-title { font-size: 1.3rem; } .orbit h3 { font-size: 1.05rem; } .orbit p { font-size: 0.85rem; } .monitor-feature-icon { height: 64px;} } @media (max-width: 360px) { .monitor-venn { width: 92%; max-width: 360px; height: 680px; margin: 1.5rem auto 0; } .venn-oval { width: 100%; height: 100%; } /* Inner mint becomes a centred round, clearly narrower than the oval so the sides never touch (fixed px keeps it perfectly circular). */ .venn-inner { width: 100%; height: 48%; max-width: none; top: 50%; } .monitor-figure { top: 32%; width: 215px; max-width: 50%; } /* Labels are kept narrow and positioned in the wider part of the oval so the text always stays inside the shape. */ .orbit { width: 58%; max-width: 260px; } /* Define what matters — top, inside the oval above the round */ .orbit-left { top: 10%; left: 50%; right: auto; transform: translateX(-50%); } /* Monitor works in the background — just below the round */ .orbit-bottom { top: 55%; width: 70%; max-width: 280px; } /* Get only what you need — bottom, inside the oval below the round */ .orbit-right { top: 77%; left: 50%; right: auto; transform: translateX(-50%); } }