/* ===================================================================== hello2morrow — site stylesheet Light body, dark header/hero, red accent. Built on Bootstrap 5.3. ===================================================================== */ /* ------- Fonts (Inter, self-hosted from the fontsource webjar) ------- */ @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url(/webjars/fontsource__inter/5.2.5/files/inter-latin-400-normal-f837d382a885a07c34a3d4bf4f49373d.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url(/webjars/fontsource__inter/5.2.5/files/inter-latin-500-normal-42b95430773b4a1dedfcfda8c03a1d4b.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url(/webjars/fontsource__inter/5.2.5/files/inter-latin-600-normal-75fb76ec35595f04717e8b3f1dc3ae2a.woff2) format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url(/webjars/fontsource__inter/5.2.5/files/inter-latin-700-normal-3714175d15f37e385c0d80f1c8f4fb42.woff2) format('woff2'); } /* ------- Design tokens ------- */ :root { --h2m-red: #e51636; --h2m-red-dark: #b8112b; --h2m-red-soft: #fdeaee; --h2m-ink: #1b1b1f; /* header, hero, footer */ --h2m-ink-2: #26262b; /* raised surfaces on ink */ --h2m-ink-border: #3a3a41; --h2m-text: #1f2328; --h2m-muted: #5f6672; --h2m-surface: #f5f6f8; /* light section background */ --h2m-border: #e3e6ea; --h2m-radius: 0.75rem; --h2m-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px -12px rgba(16, 24, 40, 0.18); /* Bootstrap overrides */ --bs-font-sans-serif: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bs-body-font-family: var(--bs-font-sans-serif); --bs-body-color: var(--h2m-text); --bs-body-bg: #ffffff; --bs-body-line-height: 1.6; --bs-primary: var(--h2m-red); --bs-primary-rgb: 229, 22, 54; --bs-link-color: var(--h2m-red); --bs-link-color-rgb: 229, 22, 54; --bs-link-hover-color: var(--h2m-red-dark); --bs-link-hover-color-rgb: 184, 17, 43; --bs-border-color: var(--h2m-border); --bs-secondary-color: var(--h2m-muted); --bs-heading-color: var(--h2m-text); } /* ------- Dark theme (the site theme; data-bs-theme="dark" is set on ) ------- Three grays from dark to middle: header/hero/footer, page body, cards and alternate sections. Bootstrap's data-bs-theme="dark" flips its own components; these tokens flip ours. */ [data-bs-theme="dark"] { --h2m-ink: #202024; /* header, hero, footer */ --h2m-ink-2: #2c2c31; --h2m-ink-border: #3a3a41; --h2m-page: #2e2e33; /* page body */ --h2m-surface: #38383e; /* alternate sections, table heads */ --h2m-raised: #43434a; /* cards, boxes */ --h2m-input-bg: #43434a; /* bare inputs (search fields) */ --h2m-border: #55555d; --h2m-text: #ececef; --h2m-muted: #b3b7bf; --h2m-red-soft: rgba(229, 22, 54, 0.22); --h2m-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -12px rgba(0, 0, 0, 0.6); --bs-body-bg: var(--h2m-page); --bs-body-color: var(--h2m-text); --bs-heading-color: #ffffff; --bs-border-color: var(--h2m-border); --bs-secondary-color: var(--h2m-muted); --bs-link-color: #ff4d6b; --bs-link-color-rgb: 255, 77, 107; --bs-link-hover-color: #ff7a91; --bs-link-hover-color-rgb: 255, 122, 145; --bs-tertiary-bg: var(--h2m-surface); } [data-bs-theme="dark"] .card { --bs-card-bg: var(--h2m-raised); --bs-card-color: var(--h2m-text); --bs-card-border-color: var(--h2m-border); } [data-bs-theme="dark"] .card h3, [data-bs-theme="dark"] .card h3 a { color: #fff; } [data-bs-theme="dark"] .eyebrow, [data-bs-theme="dark"] .stat .stat-value { color: #ff4d6b; } [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #ff4d6b; --bs-btn-border-color: #ff4d6b; --bs-btn-hover-bg: var(--h2m-red); --bs-btn-hover-border-color: var(--h2m-red); --bs-btn-hover-color: #fff; } [data-bs-theme="dark"] .logo-strip li { color: #9aa0aa; } [data-bs-theme="dark"] .border-bottom { border-color: var(--h2m-border) !important; } [data-bs-theme="dark"] .cta-band { background: var(--h2m-raised); border: 1px solid var(--h2m-border); } [data-bs-theme="dark"] .site-footer { border-top: 1px solid var(--h2m-ink-border); } [data-bs-theme="dark"] .bg-light { background-color: var(--h2m-raised) !important; } [data-bs-theme="dark"] .page-band { background: var(--h2m-surface); } [data-bs-theme="dark"] .subnav a { color: var(--h2m-muted); } [data-bs-theme="dark"] .subnav a:hover { color: #fff; } [data-bs-theme="dark"] .subnav a.active { color: #ff4d6b; border-bottom-color: #ff4d6b; } [data-bs-theme="dark"] .screenshot, [data-bs-theme="dark"] main img.bottom12 { border-color: var(--h2m-border); } [data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-striped-bg: var(--h2m-surface); --bs-table-color: var(--h2m-text); } [data-bs-theme="dark"] .table thead th { background: var(--h2m-surface); } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] main input:not(.form-control), [data-bs-theme="dark"] main select:not(.form-select) { background-color: var(--h2m-raised); color: var(--h2m-text); border-color: var(--h2m-border); } [data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: var(--h2m-raised); --bs-dropdown-link-color: var(--h2m-text); --bs-dropdown-link-hover-bg: var(--h2m-surface); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-border-color: var(--h2m-border); } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } main { flex: 1 0 auto; } /* ------- Typography ------- */ h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } h1, .h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); margin-bottom: 0.75rem; } h2, .h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); margin-top: 2rem; margin-bottom: 0.75rem; } h3, .h3 { font-size: 1.2rem; margin-top: 1.75rem; margin-bottom: 0.5rem; } h4, .h4 { font-size: 1.05rem; margin-top: 1.5rem; margin-bottom: 0.5rem; } h1 + h2, h1 + h3, h2 + h3, h3 + h4 { margin-top: 0.5rem; } p { margin-bottom: 1rem; } a { text-decoration: none; } a:hover { text-decoration: underline; } .lead { font-size: 1.15rem; font-weight: 400; color: var(--h2m-muted); } .eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--h2m-red); margin-bottom: 0.5rem; } .text-muted { color: var(--h2m-muted) !important; } /* Long-form text: cap the measure so lines stay readable on wide screens. */ .prose { max-width: 52rem; } .prose img { max-width: 100%; height: auto; } /* ------- Buttons ------- */ .btn { white-space: nowrap; /* a button label never wraps onto a second line */ --bs-btn-border-radius: 0.5rem; --bs-btn-font-weight: 500; --bs-btn-padding-x: 1.1rem; --bs-btn-padding-y: 0.55rem; } .btn-sm { --bs-btn-padding-x: 0.85rem; --bs-btn-padding-y: 0.35rem; } .btn-lg { --bs-btn-padding-x: 1.4rem; --bs-btn-padding-y: 0.75rem; --bs-btn-font-size: 1.05rem; } .btn-primary, .btn-h2m { --bs-btn-color: #fff; --bs-btn-bg: var(--h2m-red); --bs-btn-border-color: var(--h2m-red); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--h2m-red-dark); --bs-btn-hover-border-color: var(--h2m-red-dark); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--h2m-red-dark); --bs-btn-active-border-color: var(--h2m-red-dark); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--h2m-red); --bs-btn-disabled-border-color: var(--h2m-red); --bs-btn-focus-shadow-rgb: 229, 22, 54; } .btn-h2m { color: #fff; } .btn-h2m:hover, .btn-h2m:focus { color: #fff; text-decoration: none; } .btn-outline-primary { --bs-btn-color: var(--h2m-red); --bs-btn-border-color: var(--h2m-red); --bs-btn-hover-bg: var(--h2m-red); --bs-btn-hover-border-color: var(--h2m-red); --bs-btn-active-bg: var(--h2m-red-dark); --bs-btn-active-border-color: var(--h2m-red-dark); --bs-btn-focus-shadow-rgb: 229, 22, 54; } .btn-outline-light { --bs-btn-border-color: rgba(255, 255, 255, 0.55); } .btn:hover { text-decoration: none; } /* Legacy inline button groups in admin lists */ .btn-group-h2m { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; vertical-align: middle; } .btn-group-h2m form { display: inline; margin: 0; } .tableButton { margin-left: 5px; } /* Toolbars at the top of list pages: buttons and the search field on one baseline */ .page-body > .btn-group-h2m { display: flex; margin-bottom: 1rem; } .page-body > .btn-group-h2m .space-below { margin-bottom: 0; } .page-body > .btn-group-h2m input[type="text"] { padding: 0.35rem 0.7rem; font-size: 0.875rem; line-height: 1.5; } /* ------- Header ------- */ .site-header { background: var(--h2m-ink); color: #fff; border-bottom: 1px solid var(--h2m-ink-border); } .site-header .navbar { padding-top: 0.75rem; padding-bottom: 0.75rem; --bs-navbar-color: rgba(255, 255, 255, 0.85); --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff; --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.25); --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .site-header .navbar-brand { padding: 0; margin-right: 2rem; } .site-header .brand-logo { display: block; width: 210px; max-width: 100%; aspect-ratio: 197 / 20; background: url(/images/logo/hello2morrow-light-7830c63f5090023629167e497cf1ffd0.svg) left center / contain no-repeat; } .site-header .nav-link { font-weight: 500; font-size: 0.95rem; padding: 0.5rem 0.9rem; } .site-header .nav-link:hover { text-decoration: none; } .site-header .dropdown-menu { --bs-dropdown-border-color: var(--h2m-border); --bs-dropdown-border-radius: 0.6rem; --bs-dropdown-padding-y: 0.4rem; --bs-dropdown-item-padding-y: 0.4rem; --bs-dropdown-item-padding-x: 1rem; --bs-dropdown-link-hover-bg: var(--h2m-surface); --bs-dropdown-link-active-bg: var(--h2m-red-soft); --bs-dropdown-link-active-color: var(--h2m-red); box-shadow: var(--h2m-shadow); min-width: 13rem; } .site-header .dropdown-item:hover { text-decoration: none; } .site-header .header-actions { gap: 0.5rem; } .site-header .header-actions .btn { white-space: nowrap; } .site-header .header-actions form { margin: 0; } @media (max-width: 991.98px) { .site-header .navbar-collapse { padding-top: 0.75rem; } .site-header .dropdown-menu { box-shadow: none; } .site-header .header-actions { padding-top: 0.75rem; border-top: 1px solid var(--h2m-ink-border); margin-top: 0.5rem; } } /* ------- Flash messages (directly under the menu) ------- */ .flash-bar { padding: 0.75rem 0 0; } .flash-bar .alert { border-radius: 0.6rem; } .flash-bar .alert + .alert { margin-top: 0.5rem; } /* ------- Event banner ------- */ .event-banner { background: var(--h2m-red); color: #fff; font-size: 0.92rem; padding: 0.5rem 0; } .event-banner a { color: #fff; font-weight: 600; } /* ------- Page title band (pages that belong to a tab group) ------- */ .page-band { background: var(--h2m-surface); border-bottom: 1px solid var(--h2m-border); padding: 1.75rem 0 0; } .page-band h1 { margin-bottom: 1rem; } .subnav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; } .subnav a { display: block; padding: 0.5rem 0 0.7rem; color: var(--h2m-muted); font-weight: 500; font-size: 0.95rem; border-bottom: 2px solid transparent; margin-bottom: -1px; } .subnav a:hover { color: var(--h2m-text); text-decoration: none; } .subnav a.active { color: var(--h2m-red); border-bottom-color: var(--h2m-red); } .context-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.9rem; padding-bottom: 0.7rem; } .context-links a { color: var(--h2m-muted); } .context-links a:hover { color: var(--h2m-text); text-decoration: none; } [data-bs-theme="dark"] .context-links a:hover { color: #fff; } /* ------- Page body ------- */ .page-body { padding-top: 2.25rem; padding-bottom: 3.5rem; } .page-body > .alert { max-width: 52rem; } /* ------- Sections (marketing pages) ------- */ .section { padding: 3.5rem 0; } .section-tight { padding: 2.5rem 0; } .section-surface { background: var(--h2m-surface); } .section-ink { background: var(--h2m-ink); color: rgba(255, 255, 255, 0.88); } .section-ink h1, .section-ink h2, .section-ink h3 { color: #fff; } .section-ink a:not(.btn) { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.4); } .section-title { text-align: center; max-width: 44rem; margin: 0 0 2.5rem; } .section-title h2 { margin-top: 0; } .section-title p { color: var(--h2m-muted); margin-bottom: 0; } .section-title.text-start { margin-left: 0; } .section-title:not(.text-start) { margin-left: auto; margin-right: auto; } /* ------- Hero ------- */ .hero { background: var(--h2m-ink); color: #fff; padding: 3.5rem 0 4rem; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 85% 20%, rgba(229, 22, 54, 0.22), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent); pointer-events: none; } .hero > .container { position: relative; } .hero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); font-weight: 700; letter-spacing: -0.025em; color: #fff; margin-bottom: 1rem; } .hero .lead { color: rgba(255, 255, 255, 0.78); font-size: 1.15rem; max-width: 36rem; } .hero .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } .hero .hero-note { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; margin-top: 1rem; margin-bottom: 0; } .hero .hero-media img { width: 100%; height: auto; filter: drop-shadow(0 34px 18px rgba(0, 0, 0, 0.45)); } .hero .hero-caption { color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; text-align: center; margin-top: 0.75rem; } .hero-compact { padding: 2.5rem 0; } /* Transparent-background screenshots outside the hero: shadow follows the shape */ .hero-style-shot { height: auto; border-radius: var(--h2m-radius); filter: drop-shadow(0 30px 16px rgba(0, 0, 0, 0.45)); } /* ------- Cards ------- */ .card { --bs-card-border-color: var(--h2m-border); --bs-card-border-radius: var(--h2m-radius); --bs-card-spacer-y: 1.5rem; --bs-card-spacer-x: 1.5rem; --bs-card-cap-bg: transparent; height: 100%; } .card-hover { transition: transform 0.15s ease, box-shadow 0.15s ease; } .card-hover:hover { transform: translateY(-2px); box-shadow: var(--h2m-shadow); } .card h3, .card .h3 { margin-top: 0; font-size: 1.15rem; } .card h3 a { color: inherit; } .card .card-text { color: var(--h2m-muted); } .card .card-link { font-weight: 500; } .card .card-link:hover { text-decoration: none; } .card .card-link::after { content: " \2192"; } .card-icon { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.6rem; background: var(--h2m-red-soft); color: var(--h2m-red); margin-bottom: 1rem; } .card-icon svg { width: 1.4rem; height: 1.4rem; } .card-product .card-body { display: flex; flex-direction: column; } .card-product .card-link { margin-top: auto; padding-top: 1rem; } .card-logo { height: 3rem; width: auto; margin-bottom: 1rem; } /* Feature list with check marks */ .check-list { list-style: none; padding-left: 0; margin-bottom: 1rem; } .check-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; } .check-list li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--h2m-red-soft) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e51636' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M3.5 8.5l3 3 6-7'/%3e%3c/svg%3e") center / 0.7rem no-repeat; } /* Same rhythm as .check-list, with a red dot for neutral or negative items */ .dot-list { list-style: none; padding-left: 0; margin-bottom: 1rem; } .dot-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.5rem; } .dot-list li::before { content: ""; position: absolute; left: 0.3rem; top: 0.55em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--h2m-red); } /* Customer strip */ .logo-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2.25rem; padding: 0; margin: 0; list-style: none; } .logo-strip li { font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; color: #8a929e; white-space: nowrap; } /* Stat tiles */ .stat { text-align: center; } .stat .stat-value { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; color: var(--h2m-red); line-height: 1.1; } .stat .stat-label { color: var(--h2m-muted); margin-top: 0.25rem; } /* CTA band */ .cta-band { background: var(--h2m-ink); color: #fff; border-radius: var(--h2m-radius); padding: 2.5rem; } .cta-band h2 { color: #fff; margin-top: 0; } @media (min-width: 992px) { .cta-band > .row { --bs-gutter-x: 3.5rem; } /* text takes what is left; the button column is as wide as its widest button */ .cta-band > .row > .col-lg-7 { flex: 1 1 0; width: auto; } .cta-band > .row > .col-lg-5 { flex: 0 0 auto; width: auto; max-width: 50%; } } .cta-band p { color: rgba(255, 255, 255, 0.75); } /* Pricing */ .price-card { position: relative; } .price-card .price { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; } .price-card .price small { font-size: 0.95rem; font-weight: 400; color: var(--h2m-muted); } .price-card.featured { border-color: var(--h2m-red); box-shadow: 0 0 0 1px var(--h2m-red); } .price-card .badge-featured { position: absolute; top: -0.75rem; left: 1.5rem; background: var(--h2m-red); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 999px; } /* ------- Media ------- */ main img { max-width: 100%; height: auto; } .center, .image-center, .centered-image { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1rem; } .image-right { float: right; margin: 0 0 1rem 1.5rem; max-width: 45%; } .bottom12 { margin-bottom: 1rem; } .screenshot, main img.bottom12 { border-radius: 0.6rem; border: 1px solid var(--h2m-border); box-shadow: var(--h2m-shadow); } .intro-video, .other-video, video.video-wide { display: block; /* a bare