/* Home page (templates/front-page.html). Everything is scoped to .home-page
so the shared landing patterns keep their look on other pages. */
.home-page > .geelark-section {
padding-block: 12px;
}
.home-page .home-sub {
margin-top: 0.75rem !important;
color: #212429;
font-family: var(--wp--preset--font-family--golos);
font-size: 1.125rem;
line-height: 1.4;
}
/* Shared card shells ------------------------------------------------------ */
.home-page .home-card {
padding: 32px 40px;
border-radius: 20px;
background: #f7f9ff;
}
.home-page .home-card.is-grey {
background: #fafafa;
}
.home-page .home-card.is-cyan {
background: rgba(220, 241, 252, 0.3);
}
.home-page .home-card > * {
margin-block: 0;
}
.home-page .home-card > .geelark-eyebrow + .wp-block-heading {
margin-top: 0.5rem !important;
}
.home-page .home-card > .wp-block-heading {
font-size: 2rem;
line-height: 1.1;
}
.home-page .home-grid-3,
.home-page .home-grid-4,
.home-page .home-env-grid {
gap: 16px;
margin-top: 24px !important;
}
/* Fixed column counts: the block grid's auto-fill maths uses the default
gap, so wider custom gaps would otherwise drop a column. */
.home-page .home-grid-3,
.home-page .home-stories-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.home-page .home-grid-4,
.home-page .home-usecases {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.home-page .home-env-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.home-page .home-icard {
height: 100%;
padding: 16px 20px 20px;
border-radius: 20px;
}
.home-page .home-icard.is-blue {
background: #ebf0ff;
}
.home-page .home-icard.is-white {
background: var(--wp--preset--color--base);
}
.home-page .home-icard > * {
margin: 0;
}
.home-page .home-icard > * + * {
margin-top: 0.75rem;
}
.home-page .home-card .home-icard-title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.25rem;
font-weight: 500;
line-height: 1.4;
}
.home-page .home-icard-title::before {
content: "";
flex: none;
width: 1.25rem;
height: 1.25rem;
background: currentColor;
-webkit-mask: var(--geelark-icon) center / contain no-repeat;
mask: var(--geelark-icon) center / contain no-repeat;
}
.home-page .home-icard p {
color: var(--wp--preset--color--contrast);
line-height: 1.4;
}
/* Hero -------------------------------------------------------------------- */
.home-page .home-hero {
padding-block: 112px 0 !important;
}
.home-page .home-hero-cols {
gap: 48px;
margin-bottom: 0;
}
.home-page .home-hero h1 {
margin: 0 0 1rem;
font-size: 3.375rem;
line-height: 1.2;
}
.home-page .home-hero .has-lead-font-size {
max-width: 36rem;
margin: 0;
line-height: 1.3;
}
.home-page .home-hero .wp-block-buttons {
margin-top: 1.25rem;
}
/* 40px tall like the reference hero button (7px + 24px line + 1px border each side) */
.home-page .home-hero .wp-block-button__link {
padding: 7px 32px;
font-family: var(--wp--preset--font-family--golos);
font-weight: 500;
}
.home-page .home-checks {
gap: 8px 20px;
margin-top: 1.25rem !important;
}
.home-page .home-check {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0 !important;
color: #888;
font-size: 0.875rem;
}
.home-page .home-check::before {
content: "";
flex: none;
width: 16px;
height: 16px;
border-radius: 3px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 8.2 2.6 2.6L12 5.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat,
#3cba5c;
}
/* Hero video (core Video block, rendered by scripts/hero-video/). The window shadow is
part of the video, so no CSS shadow here; it would outline the video rectangle. */
.home-page .home-hero-visual {
position: relative;
max-width: 600px;
margin: 0 auto !important;
}
.home-page .home-hero-visual :is(img, video) {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
background: #fff;
}
/* Card videos replace same-size illustrations; keep their frame. */
.home-page .gl-loop-video {
position: relative;
margin: 0;
}
.home-page .gl-loop-video video {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
background: #fff;
}
/* Caption describes the animation for screen readers only. */
.home-page :is(.home-hero-visual, .gl-loop-video) figcaption {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.home-video-toggle {
position: absolute;
right: 8%;
bottom: 8%;
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(31, 41, 55, 0.55);
color: #fff;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease;
}
.home-hero-visual:hover .home-video-toggle,
.gl-loop-video:hover .home-video-toggle,
.home-video-toggle:focus-visible,
.home-video-toggle[aria-pressed="true"] {
opacity: 1;
}
.home-video-toggle:focus-visible {
outline: 2px solid var(--wp--preset--color--primary);
outline-offset: 2px;
}
.home-video-toggle svg {
width: 14px;
height: 14px;
fill: currentColor;
}
@media (hover: none) {
.home-video-toggle {
opacity: 1;
}
}
.home-page .home-platforms {
gap: 12px 24px;
margin-top: 40px !important;
padding-block: 16px 120px;
}
.home-page .home-platforms > * {
margin: 0 !important;
}
.home-page .home-platforms-label {
color: var(--wp--preset--color--secondary);
}
.home-page .home-platform {
display: flex;
align-items: center;
gap: 8px;
color: var(--wp--preset--color--contrast);
font-family: var(--wp--preset--font-family--golos);
font-size: 1.125rem;
font-weight: 600;
}
.home-page .home-platform img {
width: 28px;
height: 28px;
}
/* Environment cards --------------------------------------------------------- */
.home-page .home-env-card {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
gap: 16px;
height: 100%;
padding: 20px 0 0 20px;
overflow: hidden;
border-radius: 20px;
background: var(--wp--preset--color--base);
}
.home-page .home-env-text {
padding-bottom: 20px;
}
.home-page .home-env-text > * {
margin: 0;
}
.home-page .home-card .home-env-title {
font-size: 1.375rem;
font-weight: 500;
line-height: 1.3;
}
.home-page .home-env-lead {
margin-top: 0.75rem !important;
color: var(--wp--preset--color--contrast);
line-height: 1.4;
}
.home-page .home-checklist {
margin-top: 0.75rem !important;
padding: 0;
list-style: none;
color: var(--wp--preset--color--contrast);
font-size: 0.875rem;
}
.home-page .home-checklist li {
display: flex;
align-items: center;
gap: 0.5rem;
line-height: 1.5;
}
.home-page .home-checklist li + li {
margin-top: 0.5rem;
}
.home-page .home-checklist li::before {
content: "";
flex: none;
width: 0.7rem;
height: 0.4rem;
margin-top: -0.2rem;
border-left: 1.6px solid currentColor;
border-bottom: 1.6px solid currentColor;
transform: rotate(-45deg);
}
.home-page .home-env-text .wp-block-buttons {
margin-top: 1rem;
}
.home-page .home-env-media {
display: flex;
align-items: flex-end;
min-height: 220px;
margin: 0 !important;
border-radius: 16px 0 0 0;
background:
radial-gradient(60% 60% at 70% 40%, rgba(51, 135, 255, 0.22), transparent 70%),
var(--wp--preset--color--tint);
}
.home-page .home-env-img {
width: 100%;
margin: 0 !important;
}
.home-page .home-env-media {
overflow: hidden;
}
/* The illustration bleeds off the card's right edge like a cropped window. */
.home-page .home-env-img img {
display: block;
width: 165%;
max-width: none;
height: auto;
margin-top: 24px;
}
/* Dashboard ----------------------------------------------------------------- */
.home-page .home-dash-visual {
margin-top: 24px !important;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(11, 61, 145, 0.08);
}
.home-page .home-dash-img {
margin: 0 !important;
}
.home-page .home-dash-img img {
display: block;
width: 100%;
height: auto;
}
/* Automation and insights pairs ---------------------------------------------- */
.home-page #automation .geelark-pair,
.home-page #insights .geelark-pair {
gap: 24px;
}
.home-page #automation .geelark-card,
.home-page #insights .geelark-card {
display: flex;
flex-direction: column;
padding: 32px 40px;
border-radius: 20px;
}
.home-page #automation .geelark-card {
background: #f7f9ff;
}
.home-page #insights .geelark-card {
background: #fafafa;
}
.home-page #automation .geelark-card > .wp-block-heading,
.home-page #insights .geelark-card > .wp-block-heading {
font-size: 1.875rem;
line-height: 1.15;
}
.home-page #automation .geelark-media {
min-height: 330px !important;
margin-top: 1.5rem;
}
.home-page #automation .geelark-card > p:not(.geelark-eyebrow) {
margin-top: 2rem;
line-height: 1.5;
}
.home-page #automation .geelark-card > .wp-block-buttons,
.home-page #insights .geelark-tab-panel > .wp-block-buttons {
margin-top: auto;
padding-top: 1.5rem;
}
.home-page #insights .geelark-tabs {
display: flex;
flex: 1;
flex-direction: column;
}
.home-page #insights .geelark-tab-panel.is-active {
display: flex;
flex: 1;
flex-direction: column;
}
.home-page #insights .geelark-tab-list {
margin-block: 1rem 1.5rem !important;
}
.home-page #insights .geelark-media {
min-height: 290px !important;
}
.home-page #insights .geelark-tab-panel h3 {
margin-top: 1.5rem;
font-size: 1.25rem;
line-height: 1.5;
}
.home-page #insights .geelark-tab-panel h3 + p {
margin-top: 0.5rem;
line-height: 1.5;
}
/* Use cases ----------------------------------------------------------------- */
.home-page .home-usecases-section {
padding-block: 108px 54px !important;
}
.home-page .home-usecases {
gap: 24px;
margin-top: 2rem !important;
}
.home-page .home-usecase {
position: relative;
min-height: 102px;
padding: 20px 28px;
border-radius: 16px;
background: #f7f9ff;
transition: background-color 0.2s, box-shadow 0.2s;
}
.home-page .home-usecase:hover {
background: var(--wp--preset--color--tint);
box-shadow: 0 8px 24px rgba(11, 61, 145, 0.08);
}
.home-page .home-usecase .geelark-usecase-label {
font-size: 1.125rem;
line-height: 1.5;
}
.home-page .home-usecase .geelark-usecase-label::before {
color: var(--wp--preset--color--primary);
}
.home-page .home-usecase a {
color: var(--wp--preset--color--contrast);
text-decoration: none;
}
/* Whole tile is the link target. */
.home-page .home-usecase a::after {
content: "";
position: absolute;
inset: 0;
border-radius: 16px;
}
.home-page .home-usecase a:focus-visible {
outline: none;
}
.home-page .home-usecase a:focus-visible::after {
outline: 2px solid var(--wp--preset--color--primary);
outline-offset: 2px;
}
/* Example setups ------------------------------------------------------------ */
.home-page .home-stories {
padding-block: 48px 72px !important;
}
.home-page .home-stories-grid {
gap: 28px;
margin-top: 2.5rem !important;
}
.home-page .home-story {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 20px;
background: var(--wp--preset--color--base);
box-shadow: 0 0 0 1px #edf2f7, 0 6px 20px rgba(11, 61, 145, 0.06);
}
.home-page .home-story > * {
margin: 0;
}
.home-page .home-story-top {
align-items: center;
padding: 20px 32px;
background: #f4fafb;
}
.home-page .home-story-top > * {
margin: 0;
}
.home-page .home-story-icon {
position: relative;
width: 72px;
height: 72px;
border-radius: 16px;
background: var(--wp--preset--color--base);
}
.home-page .home-story-icon::after {
content: "";
position: absolute;
inset: 24px;
background: var(--wp--preset--color--primary);
-webkit-mask: var(--geelark-icon) center / contain no-repeat;
mask: var(--geelark-icon) center / contain no-repeat;
}
.home-page .home-story-figure {
text-align: right;
}
.home-page .home-story-figure > * {
margin: 0;
}
.home-page .home-story-big {
color: var(--wp--preset--color--contrast);
font-family: var(--wp--preset--font-family--golos);
font-size: 2.5rem;
line-height: 1.15;
}
.home-page .home-story-small {
color: #718096;
}
.home-page .home-story-body {
display: flex;
flex: 1;
flex-direction: column;
padding: 32px 32px 0;
}
.home-page .home-story-body > * {
margin: 0;
}
.home-page .home-story-tag {
color: var(--wp--preset--color--body);
font-family: var(--wp--preset--font-family--golos);
font-size: 0.875rem;
font-weight: 500;
letter-spacing: 0.02em;
text-align: center;
text-transform: uppercase;
}
.home-page .home-story-text {
margin-top: 2rem !important;
color: var(--wp--preset--color--body);
font-family: var(--wp--preset--font-family--golos);
font-size: 1.5rem;
font-weight: 500;
line-height: 1.375;
}
.home-page .home-story-meta {
margin-top: auto !important;
padding-block: 2rem 1.5rem;
border-bottom: 1px solid #e2e8f0;
}
.home-page .home-story-meta > * {
margin: 0;
}
.home-page .home-story-who {
color: var(--wp--preset--color--body);
font-family: var(--wp--preset--font-family--golos);
font-weight: 500;
}
.home-page .home-story-setup {
margin-top: 0.25rem !important;
color: #718096;
font-size: 0.875rem;
line-height: 1.5;
}
.home-page .home-story-link {
padding: 1.25rem 32px 1.5rem;
}
.home-page .home-story-link a {
color: var(--wp--preset--color--primary);
font-family: var(--wp--preset--font-family--golos);
font-weight: 500;
text-decoration: none;
}
.home-page .home-story-link a:hover {
text-decoration: underline;
}
.home-page .home-stories > .wp-block-buttons {
margin-top: 2.25rem;
}
/* Blog ---------------------------------------------------------------------- */
.home-page #resources {
padding-block: 64px !important;
}
.home-page #resources > .wp-block-heading {
font-size: 1.875rem;
}
.home-page #resources .geelark-posts .wp-block-post-template {
gap: 30px;
}
.home-page #resources .wp-block-post-featured-image {
margin: 0;
}
.home-page #resources .wp-block-post-featured-image img {
border-radius: 16px;
}
.home-page #resources .wp-block-post-title,
.home-page #resources .wp-block-post-excerpt {
padding-inline: 25px;
}
.home-page #resources .wp-block-post-title {
margin-top: 1.5rem;
font-size: 1.375rem !important;
line-height: 1.36;
}
.home-page #resources .wp-block-post-title a:hover {
color: var(--wp--preset--color--primary);
}
.home-page #resources .wp-block-post-excerpt {
margin-top: 0.75rem;
color: var(--wp--preset--color--body);
}
/* FAQ and CTA --------------------------------------------------------------- */
.home-page #faq {
padding-block: 64px !important;
}
.home-page #faq > .wp-block-heading {
font-size: 1.875rem;
}
.home-page .geelark-cta-section {
padding-block: 48px 96px !important;
}
/* Tablet -------------------------------------------------------------------- */
@media (max-width: 1099px) {
.home-page .home-platforms {
justify-content: center !important;
gap: 12px 28px;
}
.home-page .home-platforms-label {
flex-basis: 100%;
text-align: center;
}
.home-page .home-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.home-page .home-usecases {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 900px) {
.home-page .home-grid-3,
.home-page .home-env-grid,
.home-page .home-stories-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
}
@media (max-width: 700px) {
.home-page #automation .geelark-pair,
.home-page #insights .geelark-pair {
grid-template-columns: minmax(0, 1fr) !important;
}
}
/* Phone --------------------------------------------------------------------- */
@media (max-width: 781px) {
.home-page .home-hero {
padding-block: 40px 0 !important;
}
.home-page .home-hero-cols {
gap: 32px;
}
.home-page .home-hero h1 {
font-size: 2.25rem;
}
.home-page .home-hero-cols > .wp-block-column:first-child {
text-align: center;
}
.home-page .home-hero .has-lead-font-size {
margin-inline: auto;
}
.home-page .home-hero .wp-block-buttons,
.home-page .home-checks {
justify-content: center !important;
}
.home-page .home-hero .has-lead-font-size {
font-size: 1.125rem !important;
}
.home-page .home-platforms {
margin-top: 24px !important;
padding-bottom: 40px;
gap: 12px 20px;
}
.home-page .home-platform {
font-size: 1rem;
}
.home-page .home-card,
.home-page #automation .geelark-card,
.home-page #insights .geelark-card {
padding: 24px 20px;
}
.home-page .home-card > .wp-block-heading,
.home-page #automation .geelark-card > .wp-block-heading,
.home-page #insights .geelark-card > .wp-block-heading {
font-size: 1.625rem;
}
.home-page .home-sub {
font-size: 1rem;
}
.home-page #automation .geelark-media,
.home-page #insights .geelark-media {
min-height: 0 !important;
}
.home-page .home-grid-4 {
grid-template-columns: minmax(0, 1fr) !important;
}
.home-page .home-usecases-section {
padding-block: 56px 32px !important;
}
.home-page .home-usecases {
gap: 12px;
}
.home-page .home-usecase {
min-height: 80px;
padding: 16px;
}
.home-page .home-usecase .geelark-usecase-label {
font-size: 1rem;
}
.home-page .home-story-text {
font-size: 1.25rem;
}
.home-page #resources .wp-block-post-title,
.home-page #resources .wp-block-post-excerpt {
padding-inline: 8px;
}
}
@media (max-width: 480px) {
.home-page .home-env-card {
grid-template-columns: minmax(0, 1fr);
padding: 20px 20px 0;
}
.home-page .home-env-media {
min-height: 0;
margin-right: -20px !important;
}
.home-page .home-usecases {
grid-template-columns: minmax(0, 1fr) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.home-page .home-usecase {
transition: none;
}
}
/* Tablet: the reference keeps the hero in two columns down to 600px; the stacked,
centred hero above only applies to phones. */
@media (min-width: 600px) and (max-width: 781px) {
.home-page .home-hero-cols {
flex-wrap: nowrap !important;
}
.home-page .home-hero-cols > .wp-block-column {
flex-basis: 50% !important;
}
.home-page .home-hero-cols > .wp-block-column:first-child {
text-align: left;
}
.home-page .home-hero-cols > .wp-block-column:first-child .wp-block-buttons,
.home-page .home-hero .home-checks {
justify-content: flex-start !important;
}
}