/* Heeling Pawsabilities — the whole stylesheet. * * A like-for-like rebuild of the Squarespace 7.1 site. Every number here was * measured from the live Squarespace pages (reference/layout/, and Squarespace's * own site.css in reference/css/), not chosen. If something looks arbitrary — * 1.3vw between nav links, 0.0215 in the grid rows — it is Squarespace's value. * Change it and the page stops matching the original. * * 0. Tokens 6. Header and mobile menu * 1. Base 7. Footer * 2. Type 8. About: testimonial carousel * 3. Themes 9. Blog index * 4. Sections 10. Blog post * 5. Grid and blocks 11. 404 * 12. Page layouts (grid placement, from Squarespace) */ /* ---------------------------------------------------------------- 0. Tokens */ :root { --white: hsl(0 0% 100%); --black: hsl(0 0% 0%); --accent: hsl(284.21052632 13.86861314% 73.1372549%); /* #BFB1C4 lilac */ --dark-accent: hsl(30 5.15463918% 38.03921569%); /* #66615C warm grey */ --light-accent: hsl(300 2.43902439% 91.96078431%); /* #EBEAEB */ --max-page-width: 1400px; --gutter: 4vw; /* page side padding, desktop */ --gutter-mobile: 6vw; /* page side padding, phone */ --gap: 11px; /* grid gap */ /* Header height, needed as the first section's top padding because the header floats over it. Desktop: 3vw above and below the "Get Started" button, which is the tallest thing in it (1.2em padding top and bottom plus a 1.5em line). */ --cta-fs: min(calc(1rem - .12vw), .9rem); --header-h: calc(6vw + var(--cta-fs) * 3.9); } /* Mobile header — same breakpoint as Squarespace: phones, and touch screens up to 1024px (so tablets get the burger menu). 6vw padding round a 37px row (the burger), or the title's line if that is taller. */ @media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) { :root { --header-h: calc(12vw + max(37px, var(--mobile-title-fs) * 1.4)); } } /* ------------------------------------------------------------------ 1. Base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--white); color: var(--black); font-family: "Poppins", sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.8em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display: block; max-width: 100%; } button { font: inherit; } a { color: inherit; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; z-index: 20; top: 1.5em; left: -10000px; padding: 1.2em 2.004em; background: var(--btn-bg); color: var(--btn-fg); font-size: var(--cta-fs); font-weight: 500; letter-spacing: .02em; line-height: normal; } .skip-link:focus { left: 1.5em; } /* ------------------------------------------------------------------ 2. Type */ /* Squarespace's fluid type, both halves verbatim. `--v` is the size in rem as set in Squarespace (h1 = 4 and so on). Phones in portrait scale with the window's HEIGHT; everything else with its width, capped at the 1400px page. */ h1, h2, h3, h4, .t-large, .t-small, .fs, .btn, .site-title, .blog-card-excerpt, .blog-card-more, .carousel-quote, .author-name { font-size: calc((var(--v) - 1) * calc(.012 * min(100vh, 900px)) + 1rem); } @media screen and (min-width: 768px), screen and (orientation: landscape) { h1, h2, h3, h4, .t-large, .t-small, .fs, .btn, .site-title, .blog-card-excerpt, .blog-card-more, .carousel-quote, .author-name { font-size: min(calc((var(--v) - 1) * 1.2vw + 1rem), max(calc((var(--v) - 1) * .012 * var(--max-page-width) + 1rem), calc(var(--v) * 1rem))); } } h1 { --v: 4; } h2 { --v: 2.8; } h3 { --v: 2.2; } h4 { --v: 1.2; } .t-large { --v: 1.4; } .t-small { --v: .9; } h1, h2, h3, h4 { font-weight: 500; margin: 2rem 0; /* Headings get tighter as they get bigger: 1.4 × (1 + (1 − size) / 25). */ line-height: calc(1.4em * (1 + (1 - var(--v)) / 25)); } p { margin: 1rem 0; } .t-large { line-height: 1.8em; } .t-small { line-height: 1.8em; } strong { font-weight: 700; } /* Squarespace text blocks keep every space and line break as typed. */ .text p, .text h1, .text h2, .text h3, .text h4, .text li { white-space: pre-wrap; } .text > :first-child { margin-top: 0; } .text > :last-child { margin-bottom: 0; } .text ul { margin: 1rem 0; padding-left: 2.5em; } .text li > p { margin: .5rem 0; } .text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .ta-center { text-align: center; } .u { text-decoration: underline; } /* An empty paragraph Squarespace was told to keep: a blank line. */ p[data-rte-preserve-empty]:empty::before { content: ""; display: inline-block; } .c-black { color: var(--black); } /* The hand-drawn underlines ("highlights"). site.js draws one stroke per line of each .hl, behind the text — the same shape Squarespace draws, scaled to the word. Without JS the words are simply not underlined, as on Squarespace. */ .hl-host { position: relative; } .hl-shape { position: absolute; z-index: -1; pointer-events: none; user-select: none; } .hl-shape.hl--white { --hl: var(--white); } .hl-shape svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--hl); stroke-width: .1em; stroke-linecap: square; stroke-linejoin: bevel; } /* ---------------------------------------------------------------- 3. Themes */ /* Squarespace's four section themes, as used on this site. */ .theme-white { --bg: var(--white); --fg: var(--black); --hl: var(--black); --btn-bg: var(--black); --btn-fg: var(--white); } .theme-light { --bg: var(--light-accent); --fg: var(--black); --hl: var(--black); --btn-bg: var(--black); --btn-fg: var(--white); } .theme-bright { --bg: var(--accent); --fg: var(--black); --hl: var(--black); --btn-bg: var(--black); --btn-fg: var(--accent); } .theme-dark { --bg: var(--dark-accent); --fg: var(--white); --hl: var(--accent); --btn-bg: var(--accent); --btn-fg: var(--black); } /* ----------------------------------------------------------------- 4. Sections */ .section { position: relative; display: flex; align-items: center; /* vertical alignment: middle */ color: var(--fg); } .section.v-top { align-items: flex-start; } /* The background layer. After a section with a curved bottom edge, the next section's background reaches up underneath it by the curve's height, so the curve cuts into it rather than into white page. Earlier sections sit on top of later ones for the same reason (z-index, section 4 below). */ .section-bg { position: absolute; inset: 0; overflow: hidden; background: var(--bg); } .section-bg img { position: relative; width: 100%; height: 100%; object-fit: cover; } .section-overlay { position: absolute; inset: 0; background: var(--dark-accent); opacity: .15; } .section-content { position: relative; display: flex; justify-content: center; width: 100%; } /* Section heights. min-height in vh, top and bottom padding a tenth of the same number in vmax — Squarespace's "small / medium / custom" heights. */ .h-small { min-height: 33vh; } .h-small > .section-content { padding: 3.3vmax 0; } .h-medium { min-height: 66vh; } .h-medium > .section-content { padding: 6.6vmax 0; } /* Top-aligned: Squarespace moves the top padding underneath, leaving 4vw. */ .h-medium.v-top > .section-content { padding: 4vw 0 13.2vmax; } .h-80 { min-height: 80vh; } .h-80 > .section-content { padding: 8vmax 0; } .h-40 { min-height: 40vh; } .h-40 > .section-content { padding: 4vmax 0; } .h-10 { min-height: 10vh; } .h-10 > .section-content { padding: 1vmax 0; } /* The first section sits under the floating header. */ main > .section:first-child { padding-top: var(--header-h); } /* "Inset" sections keep their content in from the edges by the page gutter, and add the gutter under a curved edge too. */ .section--inset { --inset-pad: var(--gutter); padding-left: var(--inset-pad); padding-right: var(--inset-pad); } .section--inset.divider { padding-bottom: calc(var(--inset-pad) + var(--div-h)); } @media screen and (max-width: 767px) { .section--inset { --inset-pad: 4vw; } } /* Curved and wavy bottom edges. The section's background is masked to the curve across the bottom --div-h of the section, and the section is padded by the same amount so no content sits in it. The next section's background reaches up behind by --div-h (the `+` rule), showing through the cut. The curve shapes are Squarespace's own, from its clip paths. */ .divider { --div-h: 6vw; padding-bottom: var(--div-h); } .divider > .section-bg { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--div-h) + 1px) no-repeat, var(--div-shape) bottom / 100% var(--div-h) no-repeat; mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--div-h) + 1px) no-repeat, var(--div-shape) bottom / 100% var(--div-h) no-repeat; } .divider + .section > .section-bg { top: calc(-1 * var(--prev-div-h, 6vw)); } .divider.div-wave + .section > .section-bg { --prev-div-h: 2vw; } .div-sweep-down { --div-shape: url("/assets/img/divider-sweep-down.svg"); } /* high left, low right */ .div-sweep-up { --div-shape: url("/assets/img/divider-sweep-up.svg"); } /* low left, high right */ .div-sweep-rise { --div-shape: url("/assets/img/divider-sweep-rise.svg"); } /* rises to the right from the bottom */ .div-wave { --div-h: 2vw; --div-shape: url("/assets/img/divider-wave.svg"); } .div-wave-2 { --div-shape: url("/assets/img/divider-wave-2.svg"); } main > .section:nth-child(1) { z-index: 9; } main > .section:nth-child(2) { z-index: 8; } main > .section:nth-child(3) { z-index: 7; } main > .section:nth-child(4) { z-index: 6; } main > .section:nth-child(5) { z-index: 5; } main > .section:nth-child(6) { z-index: 4; } /* ------------------------------------------------------------ 5. Grid and blocks */ /* Squarespace's "Fluid Engine" grid: 8 columns on phones, 24 above, plus a gutter column each side. Rows are at least 2.15% of the content width tall (24px on phones) and grow to fit. Each page's grids set --rows-m / --rows-d and place their blocks — section 12. */ .fe { --grid-gutter: calc(var(--gutter-mobile) - var(--gap)); --cell-max: calc((var(--max-page-width) - var(--gap) * 7) / 8); display: grid; position: relative; width: 100%; grid-template-rows: repeat(var(--rows-m), minmax(24px, auto)); grid-template-columns: minmax(var(--grid-gutter), 1fr) repeat(8, minmax(0, var(--cell-max))) minmax(var(--grid-gutter), 1fr); gap: var(--gap); overflow-x: hidden; overflow-x: clip; } @media (min-width: 768px) { .fe { --grid-gutter: calc(var(--gutter) - var(--gap)); --cell-max: calc((var(--max-page-width) - var(--gap) * 23) / 24); --container: min(var(--max-page-width), calc(100vw - var(--gutter) * 2 - var(--inset, 0vw))); grid-template-rows: repeat(var(--rows-d), minmax(calc(var(--container) * .0215), auto)); grid-template-columns: minmax(var(--grid-gutter), 1fr) repeat(24, minmax(0, var(--cell-max))) minmax(var(--grid-gutter), 1fr); } .section--inset .fe { --inset: calc(var(--gutter) * 2); } } /* A block fills its grid area; its content sits at the top, middle or bottom. */ .blk { position: relative; z-index: 0; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; } .blk.v-center { justify-content: center; } .blk.v-end { justify-content: flex-end; } /* Image blocks crop to their area; the focal point is set per image. */ .blk-image { overflow: hidden; } .blk-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* Button blocks: centred across the block, top/middle/bottom within it. */ .blk-button { flex-direction: row; justify-content: center; align-items: flex-start; } .blk-button.v-center { justify-content: center; align-items: center; } .blk-button.v-end { justify-content: center; align-items: flex-end; } .blk-button.stretch { align-items: stretch; } .blk-button.stretch > .btn { flex: 1; display: flex; align-items: center; justify-content: center; padding-top: 0; padding-bottom: 0; } .btn { --v: 1; display: inline-block; padding: 1.2em 2.004em; background: var(--btn-bg); color: var(--btn-fg); font-weight: 500; letter-spacing: .02em; line-height: normal; text-align: center; text-decoration: none; cursor: pointer; transition: opacity .1s linear; } .btn:hover { opacity: .8; } .btn--secondary { --v: 1.1; } /* ----------------------------------------------------- 6. Header and mobile menu */ .header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; /* above every section (they go up to 9) */ color: var(--fg); line-height: 1; } .header-inner { position: relative; z-index: 1; display: flex; align-items: center; padding: 3vw var(--gutter); } .site-title { --v: 2; flex: 0 1 auto; font-weight: 500; line-height: 1.4em; text-decoration: none; white-space: nowrap; } .header-nav { display: flex; margin-left: auto; margin-right: 5.5vw; gap: 1.3vw; text-align: right; } .header-nav a { display: flex; align-items: center; padding: .1em 0; font-size: 1rem; line-height: 1.8em; text-decoration: none; white-space: nowrap; } .header-nav a[aria-current="page"], .header-nav a:hover { background-image: linear-gradient(currentColor, currentColor); background-size: 1px 1px; background-position: 0 calc(100% - .1em); background-repeat: repeat-x; } .header .btn--header { --v: .9; font-size: var(--cta-fs); } .header-burger-btn { display: none; position: relative; width: 47px; height: 37px; margin-left: auto; padding: 1px 6px; border: 0; background: none; color: inherit; cursor: pointer; } .burger { position: relative; display: block; width: 35px; height: 35px; } .burger span { position: absolute; left: 0; top: 17px; width: 35px; height: 1px; background: currentColor; transition: transform .25s cubic-bezier(.2, .6, .3, 1), width .25s cubic-bezier(.2, .6, .3, 1); } .burger span:first-child { transform: translateY(-5.5px); } .burger span:last-child { transform: translateY(5.5px); } .menu-open .burger span:first-child { transform: rotate(45deg); } .menu-open .burger span:last-child { transform: rotate(-45deg); } /* The mobile menu: a full-screen white overlay under the header bar. */ .header-menu { position: fixed; inset: 0; z-index: 19; /* under the header bar, over the page */ display: flex; flex-direction: column; padding-top: var(--header-h); background: var(--white); color: var(--black); text-align: center; visibility: hidden; opacity: 0; transition: visibility .6s cubic-bezier(.4, 0, .2, 1), opacity .4s cubic-bezier(.4, 0, .2, 1); } .menu-open .header-menu { visibility: visible; opacity: 1; } .menu-open .header { --fg: var(--black); --btn-bg: var(--black); --btn-fg: var(--white); } .menu-open { overflow: hidden; } .header-menu-nav { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .header-menu-nav a { margin: 3vw 5vw; font-size: 8.5vw; line-height: 1; text-decoration: none; } .header-menu .btn { align-self: center; margin: 4vw 6vw 6vw; padding: 1.2em 2.004em; font-size: 1.2rem; background: var(--black); color: var(--white); } @media only screen and (pointer: coarse) and (max-width: 1024px), screen and (max-width: 799px) { :root { --mobile-title-fs: calc(.012 * min(100vh, 900px) + 1rem); } .header-inner { padding: 6vw; } .header-nav, .header .btn--header { display: none; } .header-burger-btn { display: block; } } @media only screen and (pointer: coarse) and (max-width: 1024px) and (min-width: 768px) and (orientation: landscape), screen and (max-width: 799px) and (min-width: 768px) { :root { --mobile-title-fs: min(calc(1.2vw + 1rem), 32.8px); } } /* ---------------------------------------------------------------- 7. Footer */ /* The footer is an ordinary section with a grid (section 12); only its links differ from body text, by sitting on their own line box. */ .footer .footer-links a { display: inline-block; } /* Every page is at least a screen tall, footer at the bottom — Squarespace's 404 page shows it. */ body { display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1 0 auto; } /* ------------------------------------------------ 8. About: testimonial carousel */ .carousel-section > .section-content { padding: 6.6vmax 0; } .carousel { width: 100%; padding: 0 var(--gutter); } .carousel-viewport { overflow: hidden; } .carousel-slides { display: grid; grid-template-columns: 100%; margin: 0; padding: 0; list-style: none; } .carousel-slide { grid-area: 1 / 1; align-self: center; /* shorter quotes sit mid-height */ transform: translateX(calc(100% + 20px)); /* until site.js places them */ display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform .6s cubic-bezier(.4, 0, .2, 1); } .carousel-slide:first-child { transform: none; } /* The name: body-size text, but an h2's line height (Squarespace's). */ .carousel-slide h2 { width: 100%; max-width: 75%; margin: 0; font-size: 1rem; font-weight: 500; } .carousel-quote { --v: 1.5; max-width: 75%; margin-top: 10px; line-height: 1.8em; } .carousel-quote p { margin: 1rem 0; white-space: pre-wrap; } .carousel-quote p:first-child { margin-top: 0; } .carousel-quote p:last-child { margin-bottom: 0; } .carousel-arrows { display: flex; justify-content: center; gap: 20px; margin-top: 30px; } .carousel-arrow { position: relative; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; } .carousel-arrow::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--black); opacity: .7; } .carousel-arrow svg { position: relative; display: block; width: 36px; height: 36px; margin: 12px; fill: none; stroke: var(--white); stroke-width: 2; } @media screen and (max-width: 767px) { .carousel { padding: 0 4vw; } .carousel-arrows { gap: 18px; margin-top: 24px; padding-bottom: 4px; } .carousel-arrow { width: 40px; height: 40px; } .carousel-arrow::before { opacity: 1; } .carousel-arrow svg { width: 24px; height: 14px; margin: 13px 8px; } } /* --------------------------------------------------------------- 9. Blog index */ .blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px 45px; width: 100%; max-width: var(--max-page-width); margin: 0 auto; padding: var(--gutter); } .blog-card { display: flex; flex-direction: column; text-align: left; } .blog-card-image { display: block; position: relative; height: 0; padding-bottom: calc(66.6667% + 1px); /* 3:2, plus the 1px Squarespace has */ overflow: hidden; } .blog-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); /* Squarespace's, cropped by the wrapper */ } .blog-card-spacer { height: 44px; } .blog-card-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 2rem; } .blog-card-meta time, .post-meta time { font-weight: 400; line-height: 1.2em; } .blog-card h1 { --v: 2.2; margin: 0 0 30px; line-height: 1.4em; } .blog-card h1 a { text-decoration: none; } .blog-card-excerpt { --v: .9; line-height: 1.8em; } .blog-card-excerpt p { margin: 0; white-space: pre-wrap; } .blog-card-more { --v: .9; display: inline-block; align-self: flex-start; padding-top: 40px; line-height: 1.8em; text-decoration: none; } .blog-card-more::after { content: ""; display: block; height: 1px; background: currentColor; transform: translateY(-3px); } .blog-pagination { grid-column: 1 / -1; display: flex; margin: 6vw 0 3vw; } .blog-pagination > * { flex: 0 0 50%; } .blog-pagination a { display: flex; align-items: center; gap: 9px; text-decoration: none; } .blog-pagination .older { justify-content: flex-end; text-align: right; } .blog-pagination svg { width: 9px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; } @media screen and (max-width: 767px) { .blog-grid { display: block; padding: 4vw 6vw; } .blog-card { margin-bottom: 30px; } .blog-card-spacer { height: 5vw; } .blog-card-meta { margin-bottom: 2vw; } .blog-card-more { padding-top: 2vw; } } /* The empty lilac bar Squarespace leaves between a blog list and the footer. */ .blog-end-band { height: 6vw; background: var(--accent); } /* ---------------------------------------------------------------- 10. Blog post */ .post-section > .section-content { padding: var(--gutter) 0; } .post { width: calc((100vw - var(--gutter) * 2) * .75); max-width: var(--max-page-width); } .post-top { display: flex; flex-direction: column; margin-bottom: 50px; } .post-meta { display: flex; align-items: center; margin-bottom: 2rem; } .post-meta time::after { content: "•"; padding: 0 8px; } .post-meta .post-author { font-weight: 400; line-height: 1.2em; } .post-meta a { text-decoration: none; } .post-top h1 { margin: 0; line-height: 1.4em; } .post-body p { margin: 1rem 0; white-space: pre-wrap; } .post-body > :first-child { margin-top: 0; } .post-author-profile { display: flex; flex-direction: column; align-items: flex-start; margin: 3vw 0; } .post-author-profile a { text-decoration: none; } .post-author-profile img { margin-top: 1rem; width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .post-author-profile .author-name { --v: .9; display: block; margin-top: 1rem; line-height: 1.8em; } .post-pagination { display: flex; justify-content: space-between; padding: 0 var(--gutter); margin: 3vw 0; } .post-pagination a { display: flex; align-items: center; max-width: 50%; text-decoration: none; } .post-pagination .next { margin-left: auto; text-align: right; } .post-pagination h2 { --v: 2.2; margin: 0; line-height: 1; } .post-pagination svg { flex: none; box-sizing: content-box; width: 18px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1; } .post-pagination .prev svg { padding-right: 25px; } .post-pagination .next svg { padding-left: 25px; } @media screen and (max-width: 767px) { .post-section > .section-content { padding: var(--gutter-mobile) 0; } .post { width: calc(100vw - var(--gutter-mobile) * 2); } .post-meta { margin-bottom: 1.2rem; } .post-body { padding: 17px 0; } .post-pagination { padding: 0 var(--gutter-mobile); } } /* Image focal points — where Squarespace was told to keep in view when a photo is cropped. Everything else is centred (object-position default). */ .focal-home-reward { object-position: 0% 55.2069%; } .focal-about-band { object-position: 45.4576% 81.6102%; } /* -------------------------------------------------------------------- 11. 404 */ /* Squarespace's plain "system page": 4vw in from the sides at every width, and 4vw above the first paragraph. */ .not-found > .section-content { padding: 0 4vw; } .system-page { width: 100%; } .system-page > :first-child { margin-top: 1rem; padding-top: 4vw; } .system-page ul { padding-left: 2.5em; } /* ---------------------------------------------------------- 12. Page layouts */ /* Grid placement for every block, generated once from the Squarespace pages by scripts/import-layout.mjs — see the comment there. */ /* home, grid 1 */ .fe-home-1 { --rows-m: 7; --rows-d: 11; } .b-home-1-1 { grid-area: 1/2/8/10; z-index: 0; justify-content: flex-start; } /* text: [ { "shape": "underlineCurve", "isFront" */ @media (min-width: 768px) { .b-home-1-1 { grid-area: 1/2/12/19; z-index: 0; justify-content: flex-start; } } /* home, grid 2 */ .fe-home-2 { --rows-m: 78; --rows-d: 34; } .b-home-2-1 { grid-area: 2/2/13/10; z-index: 0; justify-content: center; } /* image: */ .b-home-2-2 { grid-area: 16/2/39/10; z-index: 2; justify-content: center; } /* text: [ { "shape": "underlineCurve", "isFront" */ .b-home-2-3 { grid-area: 40/2/58/10; z-index: 4; justify-content: center; } /* image: */ .b-home-2-4 { grid-area: 59/2/65/10; z-index: 5; justify-content: center; } /* text: [ { "shape": "underlineCurve", "isFront" */ .b-home-2-5 { grid-area: 65/2/76/10; z-index: 6; justify-content: flex-start; } /* text: [ { "shape": "underlineCurve", "isFront" */ .b-home-2-6 { grid-area: 76/2/79/6; z-index: 7; align-items: center; } /* button: Get In Touch */ @media (min-width: 768px) { .b-home-2-1 { grid-area: 1/2/16/13; z-index: 0; justify-content: center; } .b-home-2-2 { grid-area: 1/14/15/25; z-index: 2; justify-content: center; } .b-home-2-3 { grid-area: 19/15/35/26; z-index: 4; justify-content: center; } .b-home-2-4 { grid-area: 20/2/23/13; z-index: 5; justify-content: flex-start; } .b-home-2-5 { grid-area: 23/2/30/13; z-index: 6; justify-content: flex-start; } .b-home-2-6 { grid-area: 30/2/32/6; z-index: 7; align-items: center; } } /* home, grid 3 */ .fe-home-3 { --rows-m: 6; --rows-d: 12; } .b-home-3-1 { grid-area: 1/2/7/10; z-index: 0; justify-content: center; } /* text: [ { "shape": "underlineCurve", "isFront" */ @media (min-width: 768px) { .b-home-3-1 { grid-area: 1/5/13/23; z-index: 0; justify-content: center; } } /* home, grid 4 */ .fe-home-4 { --rows-m: 13; --rows-d: 13; } .b-home-4-1 { grid-area: 1/2/10/10; z-index: 0; justify-content: flex-start; } /* text: Free consultation ($50 value) No commitm */ .b-home-4-2 { grid-area: 12/2/14/10; z-index: 1; align-items: center; } /* button: Get in Touch for Free Consultation