/* * IceMelt — public (customer-facing) site styles * e107_themes/midwest_mole/css/icemelt-public.css * * Everything is scoped under .im-pub so these rules cannot leak into the * portal. Brand colours match the midwest_mole theme tokens. */ /* ── Break out of the theme's .container so sections can run full width ──── */ body:has(.im-pub) .container:has(.im-pub), body:has(.im-pub) .container-fluid:has(.im-pub) { max-width: none; width: 100%; padding-left: 0; padding-right: 0; } /* The layout prints an empty

for the page caption; we set our own. / body:has(.im-pub) h1:empty { display: none; } / ── Undo the portal chrome offsets ────────────────────────────────────────── style.css reserves 60px at the top and 40px at the bottom of for the portal's fixed navbar and footer, and paints the page off-white. The public pages render neither, so that reserved space shows as a grey band above the nav and below the footer. This stylesheet is only loaded on public pages (see theme.php::css), so a bare body rule cannot reach the portal. / body { padding-top: 0 !important; padding-bottom: 0 !important; background-color: #ffffff !important; } / Full-width pages do not want the theme container padding either. / body:has(.im-pub) .content-area { padding: 0; } / SAFETY NET, not a cure. Something in the install emits a UTF-8 byte-order mark while e107 is building . That stray character closes the head early (which is why the meta and link tags end up in ) and renders as a text node one line tall above the page. The real fix is to save the offending file as UTF-8 without BOM — see icemelt-bom.php. Until then, zeroing the line-height on collapses that stray text to nothing. Everything visible sets its own line-height inside .im-pub, so this is invisible otherwise. / body { line-height: 0 !important; } body > meta { display: none !important; } body > :empty { display: none !important; } body > { margin-top: 0 !important; } .im-pub > :first-child { margin-top: 0 !important; } /* Restore normal text rhythm for everything that is actually on the page. / .im-pub { line-height: 1.6 !important; } .im-pub { --im-teal: #4a90a4; --im-teal-dark: #35737f; --im-teal-deep: #1f4d58; --im-ink: #12181b; --im-ink-soft: #1f272b; --im-text: #222222; --im-muted: #5f6b71; --im-line: #e2e7ea; --im-bg: #ffffff; --im-bg-alt: #f2f4f5; --im-white: #ffffff; --im-accent: #ff8c00; --im-radius: 14px; --im-radius-sm: 8px; --im-shadow: 0 1px 2px rgba(18, 24, 27, .05), 0 12px 28px -14px rgba(18, 24, 27, .22); --im-shadow-lg: 0 24px 60px -28px rgba(18, 24, 27, .45); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--im-text); background: var(--im-bg); font-size: 16px; line-height: 1.6; text-align: left; } .im-pub , .im-pub ::before, .im-pub ::after { box-sizing: border-box; } .im-pub h1, .im-pub h2, .im-pub h3, .im-pub h4 { margin: 0 0 .5em; color: var(--im-ink); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; } .im-pub h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); } .im-pub h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); } .im-pub h3 { font-size: 1.15rem; } .im-pub h4 { font-size: .95rem; } .im-pub p { margin: 0 0 1rem; } .im-pub a { color: var(--im-teal-dark); text-decoration: none; } .im-pub a:hover { color: var(--im-teal); text-decoration: underline; } .im-pub img { max-width: 100%; height: auto; } .im-icon { vertical-align: middle; flex: none; } .im-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } .im-eyebrow { display: inline-block; margin-bottom: .75rem; color: var(--im-teal-dark); font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .im-eyebrow-light { color: #8fd0e2; } .im-section-title { max-width: 22ch; } .im-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 2.5rem; flex-wrap: wrap; } .im-section-head .im-section-title { margin-bottom: 0; } /* ── Buttons ─────────────────────────────────────────────────────────────── / .im-pub .im-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.35rem; border: 1px solid transparent; border-radius: 999px; font-size: .95rem; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } .im-pub .im-btn:hover { text-decoration: none; transform: translateY(-1px); } .im-pub .im-btn:focus-visible { outline: 3px solid rgba(74, 144, 164, .5); outline-offset: 2px; } .im-pub .im-btn-primary { background: var(--im-teal); border-color: var(--im-teal); color: #fff; } .im-pub .im-btn-primary:hover { background: var(--im-teal-dark); border-color: var(--im-teal-dark); color: #fff; } .im-pub .im-btn-light { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; } .im-pub .im-btn-light:hover { background: #fff; border-color: #fff; color: var(--im-ink); } .im-pub .im-btn-outline { background: transparent; border-color: var(--im-line); color: var(--im-ink); } .im-pub .im-btn-outline:hover { border-color: var(--im-teal); color: var(--im-teal-dark); background: #fff; } .im-pub .im-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .28); color: #fff; } .im-pub .im-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; } .im-pub .im-btn-lg { padding: .95rem 1.9rem; font-size: 1.02rem; } .im-pub .im-btn-block { width: 100%; } / ── Navigation ──────────────────────────────────────────────────────────── / .im-nav { position: sticky; top: 0; z-index: 40; background: var(--im-ink); border-bottom: 1px solid rgba(255, 255, 255, .08); } .im-nav-inner { display: flex; align-items: center; gap: 20px; min-height: 72px; } .im-brand { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; color: #fff; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; } .im-pub .im-brand:hover { color: #fff; text-decoration: none; } .im-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(140deg, var(--im-teal), var(--im-teal-deep)); color: #fff; } / Brand logo. The base rule .im-pub img forces height:auto, so these need the extra .im-pub specificity to set a height of their own. / .im-pub .im-brand-logo { display: block; width: auto; height: 38px; max-width: 240px; object-fit: contain; } .im-pub .im-brand-logo-footer { height: 32px; } .im-nav-links { display: flex; align-items: center; gap: 8px; } .im-pub .im-nav-link { padding: .55rem .9rem; border-radius: 999px; color: rgba(255, 255, 255, .76); font-size: .95rem; font-weight: 600; } .im-pub .im-nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; } .im-pub .im-nav-link.is-active { color: #fff; background: rgba(74, 144, 164, .3); } .im-nav-links .im-btn { margin-left: 6px; } .im-nav-toggle, .im-nav-burger { display: none; } / ── Call bar ────────────────────────────────────────────────────────────── / .im-callbar { background: var(--im-ink-soft); border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: .88rem; } .im-callbar-inner { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; } .im-pub .im-callbar-item { display: inline-flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .74); } .im-pub a.im-callbar-item:hover { color: #fff; text-decoration: none; } .im-callbar-item .im-icon { color: var(--im-teal); } .im-callbar-item strong { color: #fff; letter-spacing: .02em; } .im-callbar-hours { margin-left: auto; } / ── Hero ────────────────────────────────────────────────────────────────── / .im-hero { position: relative; overflow: hidden; background: radial-gradient(900px 420px at 78% 12%, rgba(74, 144, 164, .38), transparent 62%), linear-gradient(165deg, #161e22 0%, var(--im-ink) 48%, #0d1215 100%); background-color: var(--im-ink); color: #fff; padding: clamp(56px, 8vw, 104px) 0 clamp(80px, 10vw, 132px); } .im-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; background: var(--im-bg); clip-path: polygon(0 100%, 100% 0, 100% 100%); } .im-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 48px; } .im-hero h1 { color: #fff; max-width: 16ch; } .im-hero-text { max-width: 52ch; color: rgba(255, 255, 255, .78); font-size: 1.12rem; } .im-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.75rem 0 1rem; } .im-hero-call { color: rgba(255, 255, 255, .6); font-size: .95rem; margin: 0; } .im-pub .im-hero-call a { color: #fff; font-weight: 700; letter-spacing: .02em; } .im-hero-art { position: relative; min-height: 380px; } .im-hero-bag { position: absolute; width: 58%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); } .im-hero-bag-1 { left: 18%; top: 0; z-index: 3; transform: rotate(-4deg); } .im-hero-bag-2 { left: 0; top: 12%; z-index: 2; width: 50%; transform: rotate(-11deg); opacity: .92; } .im-hero-bag-3 { right: 0; top: 9%; z-index: 1; width: 50%; transform: rotate(8deg); opacity: .92; } / ── Highlights ──────────────────────────────────────────────────────────── / .im-highlights { position: relative; z-index: 2; margin-top: -56px; padding-bottom: 24px; } .im-highlights-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .im-highlight { padding: 26px 24px; background: var(--im-white); border: 1px solid var(--im-line); border-radius: var(--im-radius); box-shadow: var(--im-shadow); } .im-highlight h3 { margin-bottom: .35rem; } .im-highlight p { margin: 0; color: var(--im-muted); font-size: .95rem; } .im-highlight-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px; background: rgba(74, 144, 164, .12); color: var(--im-teal-dark); } / ── Page head (interior pages) ──────────────────────────────────────────── / .im-pagehead { background: radial-gradient(700px 300px at 85% 0%, rgba(74, 144, 164, .32), transparent 60%), var(--im-ink); color: #fff; padding: clamp(48px, 6vw, 80px) 0; } .im-pagehead h1 { color: #fff; } .im-pagehead p { max-width: 62ch; color: rgba(255, 255, 255, .78); font-size: 1.05rem; } .im-pagehead .im-btn { margin-top: .5rem; } / ── Blend cards ─────────────────────────────────────────────────────────── / .im-featured { padding: clamp(56px, 7vw, 88px) 0; } .im-catalog { padding: clamp(48px, 6vw, 80px) 0; background: var(--im-bg-alt); } .im-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; } .im-card { display: flex; flex-direction: column; background: var(--im-white); border: 1px solid var(--im-line); border-radius: var(--im-radius); overflow: hidden; scroll-margin-top: 140px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .im-card:hover { transform: translateY(-3px); border-color: #cfd8dc; box-shadow: var(--im-shadow); } .im-card-media { position: relative; display: flex; align-items: center; justify-content: center; padding: 26px 20px 10px; background: linear-gradient(180deg, #eef2f4, #ffffff); } .im-card-media img { width: auto; max-height: 230px; } .im-card-temp { position: absolute; top: 16px; right: 16px; padding: .3rem .7rem; border-radius: 999px; background: var(--im-ink); color: #fff; font-size: .78rem; font-weight: 700; } .im-card-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } .im-card-title { margin-bottom: .15rem; font-size: 1.25rem; } .im-card-tagline { margin: 0 0 1rem; color: var(--im-muted); font-size: .92rem; } .im-card-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; padding: 12px 0; border-top: 1px solid var(--im-line); border-bottom: 1px solid var(--im-line); margin-bottom: 1rem; } .im-price-label { width: 100%; color: var(--im-muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .im-price-value { color: var(--im-ink); font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; } .im-price-call { font-size: 1.15rem; } .im-price-unit { color: var(--im-muted); font-size: .9rem; } .im-card-desc { color: var(--im-muted); font-size: .95rem; } .im-specs { margin: 0 0 1rem; } .im-specs > div { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--im-line); font-size: .9rem; } .im-specs > div:last-child { border-bottom: 0; } .im-specs dt { flex: none; width: 88px; margin: 0; color: var(--im-muted); font-weight: 600; } .im-specs dd { margin: 0; color: var(--im-text); } .im-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 1.25rem; } .im-tag { padding: .25rem .6rem; border-radius: 6px; background: rgba(74, 144, 164, .1); color: var(--im-teal-dark); font-size: .76rem; font-weight: 600; } .im-card-cta { margin-top: auto; align-self: flex-start; } .im-catalog-note { margin-top: 32px; padding: 28px 32px; background: var(--im-white); border: 1px solid var(--im-line); border-left: 4px solid var(--im-teal); border-radius: var(--im-radius); } .im-catalog-note h3 { margin-bottom: .35rem; } .im-catalog-note p { margin: 0; color: var(--im-muted); } / ── Quote box ───────────────────────────────────────────────────────────── / .im-quote { padding: clamp(56px, 7vw, 88px) 0; background: radial-gradient(800px 400px at 15% 20%, rgba(74, 144, 164, .3), transparent 60%), var(--im-ink); color: #fff; scroll-margin-top: 90px; } .im-quote-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; } .im-quote-pitch h2 { color: #fff; max-width: 18ch; } .im-quote-pitch > p { color: rgba(255, 255, 255, .76); max-width: 46ch; } .im-quote-list { list-style: none; margin: 1.5rem 0; padding: 0; } .im-quote-list li { display: flex; align-items: flex-start; gap: .65rem; padding: .4rem 0; color: rgba(255, 255, 255, .84); font-size: .97rem; } .im-quote-list .im-icon { color: #7fd1e6; margin-top: 3px; } .im-pub .im-quote-list a { color: #9fdcee; text-decoration: underline; } .im-quote-call { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .6); font-size: .95rem; } .im-pub .im-quote-call a { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-size: 1.15rem; font-weight: 700; } .im-quote-box { padding: 30px; background: var(--im-white); border-radius: var(--im-radius); box-shadow: var(--im-shadow-lg); color: var(--im-text); } .im-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .im-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .im-field { margin-bottom: 16px; } .im-field label { display: block; margin-bottom: .35rem; color: var(--im-ink); font-size: .85rem; font-weight: 600; } .im-pub .im-form input, .im-pub .im-form select, .im-pub .im-form textarea { width: 100%; padding: .65rem .8rem; border: 1px solid #cfd8dc; border-radius: var(--im-radius-sm); background: #fff; color: var(--im-text); font-family: inherit; font-size: .95rem; line-height: 1.4; transition: border-color .15s ease, box-shadow .15s ease; } .im-pub .im-form input:focus, .im-pub .im-form select:focus, .im-pub .im-form textarea:focus { outline: none; border-color: var(--im-teal); box-shadow: 0 0 0 3px rgba(74, 144, 164, .18); } .im-pub .im-form textarea { resize: vertical; min-height: 84px; } .im-form-note { margin: .85rem 0 0; color: var(--im-muted); font-size: .82rem; text-align: center; } .im-notice { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 20px; padding: 14px 16px; border-radius: var(--im-radius-sm); font-size: .93rem; } .im-notice-ok { background: #e7f6ec; border: 1px solid #bfe3cb; color: #1a5c2a; } .im-notice-bad { background: #fdecea; border: 1px solid #f5c6cb; color: #a93226; } .im-notice .im-icon { margin-top: 2px; } / ── Contact ─────────────────────────────────────────────────────────────── / .im-contact { padding: clamp(56px, 7vw, 88px) 0; background: var(--im-bg); scroll-margin-top: 90px; } .im-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 2rem; } .im-contact-card { padding: 28px 26px; background: var(--im-bg-alt); border: 1px solid var(--im-line); border-radius: var(--im-radius); } .im-contact-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 14px; border-radius: 12px; background: var(--im-ink); color: #7fd1e6; } .im-contact-card h3 { margin-bottom: .5rem; } .im-contact-card p { margin: 0 0 .25rem; } .im-pub .im-contact-strong { color: var(--im-ink); font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; word-break: break-word; } .im-pub .im-contact-strong:hover { color: var(--im-teal-dark); } .im-contact-sub { color: var(--im-muted); font-size: .9rem; } / ── History ─────────────────────────────────────────────────────────────── / .im-history { padding: clamp(56px, 7vw, 88px) 0; background: var(--im-bg-alt); border-top: 1px solid var(--im-line); scroll-margin-top: 90px; } .im-history-intro { max-width: 68ch; color: var(--im-muted); font-size: 1.05rem; } .im-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; margin: 2.5rem 0 0; padding: 0; list-style: none; } .im-milestone { position: relative; padding-top: 26px; border-top: 3px solid var(--im-teal); } .im-milestone::before { content: ""; position: absolute; top: -9px; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--im-teal); border: 3px solid var(--im-bg-alt); } .im-milestone-year { display: block; margin-bottom: .4rem; color: var(--im-teal-dark); font-size: .85rem; font-weight: 700; letter-spacing: .12em; } .im-milestone-title { margin-bottom: .3rem; font-size: 1.1rem; } .im-milestone p { margin: 0; color: var(--im-muted); font-size: .95rem; } / ── Footer ──────────────────────────────────────────────────────────────── / .im-footer { padding: clamp(48px, 6vw, 72px) 0 0; background: var(--im-ink); color: rgba(255, 255, 255, .68); font-size: .93rem; } .im-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 36px; padding-bottom: 40px; } .im-footer h4 { margin-bottom: 1rem; color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .im-pub .im-footer a { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; color: rgba(255, 255, 255, .68); } .im-pub .im-footer a:hover { color: #fff; text-decoration: none; } .im-footer .im-icon { color: var(--im-teal); } .im-brand-footer { margin-bottom: 1rem; font-size: 1.2rem; } .im-footer-blurb { max-width: 34ch; color: rgba(255, 255, 255, .55); } .im-footer-hours { display: block; margin-top: .35rem; color: rgba(255, 255, 255, .45); font-size: .85rem; } .im-footer-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 20px; padding-bottom: 24px; border-top: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .45); font-size: .85rem; } .im-pub .im-footer-legal a { margin: 0; } / ── Responsive ──────────────────────────────────────────────────────────── / @media (max-width: 1024px) { .im-hero-inner { grid-template-columns: 1fr; } .im-hero-art { min-height: 320px; max-width: 460px; } .im-quote-grid { grid-template-columns: 1fr; gap: 32px; } .im-footer-grid { grid-template-columns: 1fr 1fr; } .im-highlights-grid { grid-template-columns: 1fr; } .im-highlights { margin-top: -40px; } } @media (max-width: 860px) { .im-nav-inner { flex-wrap: wrap; position: relative; } .im-nav-burger { display: block; position: relative; width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; cursor: pointer; } .im-nav-burger span, .im-nav-burger::before, .im-nav-burger::after { content: ""; position: absolute; left: 11px; width: 18px; height: 2px; background: #fff; border-radius: 2px; } .im-nav-burger span { top: 20px; } .im-nav-burger::before { top: 14px; } .im-nav-burger::after { top: 26px; } .im-nav-links { display: none; flex-direction: column; align-items: stretch; width: 100%; gap: 4px; padding: 8px 0 18px; } .im-nav-toggle:checked ~ .im-nav-links { display: flex; } .im-nav-links .im-btn { margin: 6px 0 0; } .im-pub .im-nav-link { padding: .7rem .9rem; } .im-callbar-hours { display: none; } .im-callbar-inner { gap: 18px; } } @media (max-width: 640px) { .im-wrap { padding: 0 18px; } .im-pub .im-brand-logo { height: 32px; max-width: 175px; } .im-field-row { grid-template-columns: 1fr; gap: 0; } .im-quote-box { padding: 22px 18px; } .im-footer-grid { grid-template-columns: 1fr; gap: 28px; } .im-hero-art { display: none; } .im-section-head { align-items: flex-start; } .im-card-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .im-pub , .im-pub ::before, .im-pub ::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ── e107 slots: alerts, and the {---} content area ──────────────────────── / / Both are usually empty on a marketing page; collapse them when they are. / .im-alerts { padding-top: 18px; } .im-mainarea { padding-top: 32px; padding-bottom: 8px; } .im-alerts:empty, .im-mainarea:empty { display: none; padding: 0; } / Whitespace-only is still "not empty" to :empty, so check for real children. / .im-alerts:not(:has()), .im-mainarea:not(:has(*)) { display: none; padding: 0; }