/* ========================================================================== Huntmelinks — theme stylesheet Dark UI, cyan-to-magenta accent gradient, large 40px radii, 1200px container. 1. Tokens 2. Reset & base 3. Utilities 4. Header & navigation 5. Homepage sections 6. Pages, posts, comments 7. Footer 8. Responsive ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Surfaces */ --bg: #080a10; --bg-alt: #0f110f; --surface: #282a36; --surface-2: #2a2b31; --line: #303030; --line-soft: rgba(255, 255, 255, .08); /* Chrome — header and footer are tokenised so the light pages can swap them */ --header-bg: rgba(8, 10, 16, .82); --header-bg-s: rgba(8, 10, 16, .95); /* once scrolled */ --footer-bg: #0f110f; /* Text colour that sits on top of the accent gradient */ --on-accent: #080a10; /* Text */ --ink: #ffffff; --ink-soft: #d1d1d1; --ink-faint: #a9a4ab; /* Accent */ --c1: #58e6ff; /* cyan */ --c2: #fc81fe; /* magenta */ --accent: #58e6ff; --accent-2: #fc81fe; --gold: #edb451; --grad: linear-gradient(135deg, var(--c1), var(--c2)); --grad-soft: linear-gradient(135deg, rgba(88, 230, 255, .14), rgba(252, 129, 254, .14)); /* Radii — the site leans on very round corners */ --r-card: 40px; --r-md: 24px; --r-sm: 14px; --r-pill: 100px; /* Shape */ --wrap: 1200px; --gap: clamp(1.5rem, 4vw, 3.25rem); --section-y: clamp(4rem, 9vw, 7.5rem); --shadow: 0 18px 50px rgba(0, 0, 0, .45); --glow: 0 0 0 1px rgba(88, 230, 255, .25), 0 12px 40px rgba(88, 230, 255, .12); /* Type — Roboto with a system fallback so nothing loads off-site */ --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-head: "Roboto Slab", "Roboto", Georgia, serif; /* Scale mirrors the source: 64 / 54 / 44 / 32 / 22 / 18 / 16 */ --t-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); /* → 64px */ --t-h2: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); /* → 44px */ --t-h3: clamp(1.5rem, 1.3rem + .9vw, 2rem); /* → 32px */ --t-lead: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);/* → 22px */ --t-body: 1rem; /* → 16px */ --t-sm: .875rem; /* → 14px */ } /* -------------------------------------------------------------------------- 1b. Light chrome for inner pages The homepage stays dark; shop, blog, cart, checkout, and account pages use the light palette with a purple accent. `is-landing` is added to on the front page only, so every other page picks these up. Custom properties inherit, so redefining them on re-skins everything below it. -------------------------------------------------------------------------- */ body:not(.is-landing) { --bg: #e5e6f6; --bg-alt: #f5f5f6; --surface: #ffffff; --surface-2: #f5f4fe; --line: #dcdcec; --line-soft: rgba(15, 17, 15, .08); --header-bg: rgba(245, 244, 254, .88); --header-bg-s: rgba(245, 244, 254, .97); --footer-bg: #f5f5f6; --ink: #0f110f; --ink-soft: #3c3e48; --ink-faint: #6b6d7a; /* Single purple accent rather than the homepage's two-stop neon */ --c1: #6664e4; --c2: #8280ee; --accent: #6664e4; --accent-2: #8280ee; --grad: linear-gradient(135deg, #6664e4, #8280ee); --grad-soft: linear-gradient(135deg, rgba(102, 100, 228, .12), rgba(130, 128, 238, .12)); --on-accent: #ffffff; --shadow: 0 18px 50px rgba(15, 17, 15, .08); --glow: 0 0 0 1px rgba(102, 100, 228, .25), 0 12px 40px rgba(102, 100, 228, .12); } /* Selection and focus follow the active accent. */ body:not(.is-landing) ::selection { background: rgba(102, 100, 228, .22); color: var(--ink); } /* The footer sits on a light ground here, so its text needs the dark ink. */ body:not(.is-landing) .site-footer { color: var(--ink-soft); border-top: 1px solid var(--line); } body:not(.is-landing) .site-footer a { color: var(--ink-soft); } body:not(.is-landing) .site-footer a:hover { color: var(--accent); } body:not(.is-landing) .site-footer .site-brand__text a { color: var(--ink); } body:not(.is-landing) .site-footer__heading, body:not(.is-landing) .site-footer__copy, body:not(.is-landing) .site-footer__blurb, body:not(.is-landing) .site-footer__address { color: var(--ink-faint); } body:not(.is-landing) .site-footer__base { border-top-color: var(--line); } body:not(.is-landing) .site-footer .social__link { background: var(--surface); border-color: var(--line); color: var(--ink-faint); } body:not(.is-landing) .site-footer .social__link:hover { background: var(--grad); border-color: transparent; color: var(--on-accent); } /* Code blocks keep a dark ground for legibility. */ body:not(.is-landing) .entry__content pre { background: #0f110f; color: #e8e8f2; border-color: #0f110f; } /* -------------------------------------------------------------------------- 2. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-body); line-height: 1.7; -webkit-font-smoothing: antialiased; } img, svg, video { max-width: 100%; height: auto; display: block; } h1, h2, h3, h4 { margin: 0 0 .5em; font-family: var(--font-head); line-height: 1.18; letter-spacing: -.01em; font-weight: 700; color: var(--ink); } p { margin: 0 0 1.15em; color: var(--ink-soft); } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--c2); text-decoration: underline; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } ul, ol { padding-left: 1.2em; } ::selection { background: rgba(88, 230, 255, .3); color: #fff; } /* -------------------------------------------------------------------------- 3. Utilities -------------------------------------------------------------------------- */ .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 1rem; left: 1rem; z-index: 999; width: auto; height: auto; clip: auto; clip-path: none; padding: .7rem 1.1rem; background: var(--surface); color: #fff; border-radius: var(--r-pill); } /* Gradient text, used for accent words in headings */ .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow { display: inline-block; margin: 0 0 1rem; padding: .45rem 1rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); font-size: var(--t-sm); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--c1); } .section-head { max-width: 46rem; margin: 0 auto clamp(2.5rem, 6vw, 4rem); text-align: center; } .section-head__title { font-size: var(--t-h2); margin-bottom: .4em; } .section-head__text { color: var(--ink-faint); font-size: var(--t-lead); margin: 0; } .icon { flex: none; } /* Buttons — fully rounded pills */ .btn { display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.9rem; border: 1px solid transparent; border-radius: var(--r-pill); font-size: var(--t-body); font-weight: 500; line-height: 1; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease; } .btn:hover { text-decoration: none; transform: translateY(-2px); } .btn--primary { background: var(--grad); color: var(--on-accent); font-weight: 600; } .btn--primary:hover { color: var(--on-accent); box-shadow: 0 12px 34px rgba(88, 230, 255, .28); opacity: .94; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--c1); } .btn--light { background: #fff; color: #080a10; font-weight: 600; } .btn--light:hover { color: #080a10; box-shadow: 0 12px 34px rgba(255, 255, 255, .18); } /* Stars */ .stars { display: inline-flex; gap: .2rem; margin-bottom: 1rem; } .stars__i { width: 18px; height: 18px; fill: var(--gold); } /* -------------------------------------------------------------------------- 4. Header & navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .25s ease, background-color .25s ease; } .site-header.is-stuck { border-bottom-color: var(--line); background: var(--header-bg-s); } .site-header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 84px; } .site-brand { margin-right: auto; } .site-brand__text { display: inline-flex; align-items: center; gap: .65rem; margin: 0; font-family: var(--font-head); font-size: 1.35rem; font-weight: 700; } .site-brand__text a { color: var(--ink); display: inline-flex; align-items: center; gap: .65rem; } .site-brand__text a:hover { text-decoration: none; color: var(--c1); } .custom-logo { max-height: 46px; width: auto; } /* Bundled wordmark. Both colourways sit in the markup and CSS picks the one that suits the surface behind it — white on the dark homepage chrome, violet on the light inner pages. */ .site-logo { display: block; height: auto; max-height: 40px; width: auto; } .site-logo--dark { display: none; } body:not(.is-landing) .site-logo--light { display: none; } body:not(.is-landing) .site-logo--dark { display: block; } .site-footer .site-logo { max-height: 34px; } @media (max-width: 562px) { .site-logo { max-height: 32px; } } .site-nav { display: flex; align-items: center; gap: 2rem; } .site-nav__list { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; } .site-nav__list a { color: var(--ink); font-weight: 400; font-size: var(--t-body); padding: .3rem 0; position: relative; } .site-nav__list a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--grad); transition: right .25s ease; } .site-nav__list a:hover, .site-nav__list .current-menu-item > a { color: var(--c1); text-decoration: none; } .site-nav__list a:hover::after, .site-nav__list .current-menu-item > a::after { right: 0; } .site-nav__aside { display: flex; align-items: center; gap: 1.1rem; } .basket { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); } .basket:hover { border-color: var(--c1); color: var(--c1); } .social { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; } .social__link { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-faint); font-size: .62rem; font-weight: 700; } .social__link:hover { background: var(--grad); border-color: transparent; color: var(--on-accent); text-decoration: none; } .nav-toggle { display: none; width: 46px; height: 46px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; } .nav-toggle__bars { display: grid; gap: 4px; place-items: center; } .nav-toggle__bars i { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* -------------------------------------------------------------------------- 5. Homepage sections -------------------------------------------------------------------------- */ /* Hero — glow behind the artwork, oversized serif headline */ .hero { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem) var(--section-y); overflow: hidden; } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .28; pointer-events: none; } .hero::before { width: 520px; height: 520px; top: -180px; right: -120px; background: var(--c1); } .hero::after { width: 420px; height: 420px; bottom: -200px; left: -140px; background: var(--c2); opacity: .2; } .hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--gap); } .hero__title { font-size: var(--t-h1); margin-bottom: .5em; } .hero__text { font-size: var(--t-lead); color: var(--ink-faint); max-width: 34rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.25rem; } .hero__img { width: 100%; border-radius: var(--r-card); } /* Stats — one rounded card, gradient numerals */ .stats { padding-block: 0; } .stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); } .stat { text-align: center; padding-inline: 1rem; } .stat + .stat { border-left: 1px solid var(--line); } .stat__value { display: block; font-family: var(--font-head); font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.375rem); /* → 54px */ font-weight: 700; line-height: 1.1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat__label { display: block; margin-top: .5rem; font-size: var(--t-sm); color: var(--ink-faint); } /* Services */ .services { padding-block: var(--section-y); } .services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .service { padding: 2.5rem 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .service:hover { transform: translateY(-6px); border-color: rgba(88, 230, 255, .4); box-shadow: var(--glow); } /* Image cards — services and benefits both lead with a picture. */ .service__media, .benefit__media { margin-bottom: 1.5rem; border-radius: var(--r-md); overflow: hidden; background: var(--bg-alt); } .service__media img, .benefit__media img { width: 100%; height: auto; display: block; transition: transform .5s ease; } .service:hover .service__media img, .benefit:hover .benefit__media img { transform: scale(1.04); } .service__title { font-size: var(--t-h3); } .service__text, .benefit__text { color: var(--ink-faint); margin: 0; } /* Feature block. The --alt variant flips the column order so the two feature bands mirror each other down the page. */ .feature { padding-block: var(--section-y); background: var(--bg-alt); } .feature--alt { background: var(--bg); } .feature__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--gap); } .feature__title { font-size: var(--t-h2); } .feature__text { color: var(--ink-faint); font-size: var(--t-lead); } .feature__img { width: 100%; border-radius: var(--r-card); } .checklist { list-style: none; margin: 1.75rem 0 2.25rem; padding: 0; display: grid; gap: .85rem; } .checklist li { display: flex; align-items: flex-start; gap: .75rem; color: var(--ink-soft); } .checklist .icon { color: var(--c1); margin-top: .3rem; } /* Benefits */ .benefits { padding-block: var(--section-y); } .benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .benefit { padding: 2.25rem 2rem; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); transition: transform .25s ease, border-color .25s ease; } .benefit:hover { transform: translateY(-5px); border-color: rgba(252, 129, 254, .4); } .benefit__title { font-size: 1.375rem; } /* Testimonials */ .quotes { padding-block: var(--section-y); background: var(--bg-alt); } .quotes__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } .quote { margin: 0; padding: 2.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); } .quote__text { margin: 0 0 1.75rem; padding: 0; border: 0; font-size: var(--t-lead); line-height: 1.65; color: var(--ink-soft); } .quote__by { display: flex; align-items: center; gap: 1rem; } .quote__avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--grad); flex: none; } .quote__name { display: block; font-size: var(--t-body); color: var(--ink); } .quote__org { display: block; font-size: var(--t-sm); color: var(--ink-faint); } /* CTA */ .cta { padding-block: var(--section-y); } .cta__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding: clamp(2.5rem, 6vw, 4.5rem); border-radius: var(--r-card); background: var(--grad); color: var(--on-accent); overflow: hidden; } .cta__copy { flex: 1 1 26rem; } .cta__title { font-size: var(--t-h2); color: var(--on-accent); margin-bottom: .35em; } .cta__text { color: var(--on-accent); opacity: .8; max-width: 44rem; margin: 0 0 2rem; } .cta__art { flex: 0 1 20rem; } .cta__img { width: 100%; } /* -------------------------------------------------------------------------- 6. Pages, posts, comments -------------------------------------------------------------------------- */ .page-hero { padding-block: clamp(3rem, 7vw, 5rem); background: var(--bg-alt); border-bottom: 1px solid var(--line); text-align: center; } .page-hero__title { font-size: var(--t-h2); margin: 0; } .page-hero__text { color: var(--ink-faint); margin: .7rem 0 0; } .content-area { padding-block: var(--section-y); } .content-area .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); } .no-sidebar .content-area .wrap { grid-template-columns: minmax(0, 1fr); max-width: 820px; } .entry { margin-bottom: 3.5rem; } .entry__title { font-size: var(--t-h3); } .entry__title a { color: var(--ink); } .entry__title a:hover { color: var(--c1); text-decoration: none; } .entry__meta { color: var(--ink-faint); font-size: var(--t-sm); margin-bottom: 1rem; } .entry__thumb { margin-bottom: 1.5rem; border-radius: var(--r-md); overflow: hidden; } .entry__content > * + * { margin-top: 1.15em; } .entry__content h2 { font-size: var(--t-h3); margin-top: 2.25rem; } .entry__content h3 { font-size: 1.375rem; margin-top: 1.75rem; } .entry__content blockquote { margin: 2rem 0; padding: .4rem 0 .4rem 1.5rem; border-left: 3px solid var(--c1); color: var(--ink-faint); font-size: var(--t-lead); } .entry__content img { border-radius: var(--r-md); } .entry__content code { background: var(--surface); padding: .15em .45em; border-radius: 6px; font-size: .92em; color: var(--c1); } .entry__content pre { background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); padding: 1.25rem; border-radius: var(--r-md); overflow-x: auto; } .entry__content table { width: 100%; border-collapse: collapse; } .entry__content th, .entry__content td { border: 1px solid var(--line); padding: .7rem .9rem; text-align: left; } .widget { margin-bottom: 2.25rem; padding: 1.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .widget__title { font-size: 1.125rem; } .widget ul { list-style: none; padding: 0; margin: 0; } .widget li { padding: .4rem 0; border-bottom: 1px solid var(--line); } .widget li:last-child { border-bottom: 0; } .pagination { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 2.5rem; } .pagination .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: .7rem; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); } .pagination .page-numbers:hover, .pagination .current { background: var(--grad); border-color: transparent; color: var(--on-accent); text-decoration: none; } .search-form { display: flex; gap: .6rem; } input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], textarea, select { width: 100%; padding: .9rem 1.15rem; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); } textarea { border-radius: var(--r-md); } input::placeholder, textarea::placeholder { color: var(--ink-faint); } input:focus, textarea:focus, select:focus { border-color: var(--c1); outline: none; box-shadow: 0 0 0 3px rgba(88, 230, 255, .18); } input[type="submit"], button[type="submit"] { padding: .9rem 1.75rem; background: var(--grad); color: var(--on-accent); border: 0; border-radius: var(--r-pill); font-weight: 600; cursor: pointer; white-space: nowrap; } input[type="submit"]:hover, button[type="submit"]:hover { opacity: .92; } /* Contact Form 7 — styled to match the theme's own inputs. */ .wpcf7 { margin-top: 1.5rem; } .wpcf7-form p { margin-bottom: 1.1rem; color: var(--ink); } .wpcf7-form label { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--ink); } .wpcf7-form-control-wrap { display: block; margin-top: .4rem; } .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"], .wpcf7 input[type="date"], .wpcf7 input[type="number"], .wpcf7 select, .wpcf7 textarea { width: 100%; background: var(--surface); border: 1px solid var(--line); color: var(--ink); } .wpcf7 input[type="submit"] { width: auto; padding: 1rem 1.9rem; background: var(--grad); color: var(--on-accent); border: 0; border-radius: var(--r-pill); font-weight: 600; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; } .wpcf7 input[type="submit"]:hover { opacity: .93; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(88, 230, 255, .25); } .wpcf7 .wpcf7-spinner { margin: 0 0 0 .75rem; } .wpcf7 .wpcf7-not-valid-tip { margin-top: .35rem; font-size: var(--t-sm); color: var(--c2); } .wpcf7 .wpcf7-response-output { margin: 1.5rem 0 0; padding: 1rem 1.35rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--c1); border-radius: var(--r-sm); color: var(--ink-soft); } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { border-left-color: var(--c2); } .wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--c1); } /* Contact page details block */ .contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--gap); align-items: start; } .contact-card { padding: 2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); } .contact-card__row { display: flex; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--line); } .contact-card__row:last-child { border-bottom: 0; padding-bottom: 0; } .contact-card__row .icon { color: var(--c1); margin-top: .2rem; flex: none; } .contact-card__label { display: block; font-size: var(--t-sm); color: var(--ink-faint); } .contact-card__value { display: block; color: var(--ink); } .contact-card__value a { color: var(--ink); } .contact-card__value a:hover { color: var(--c1); } .comments { margin-top: 3.5rem; padding-top: 2.25rem; border-top: 1px solid var(--line); } .comment-list { list-style: none; padding: 0; } .comment-list .comment { padding: 1.5rem 0; border-bottom: 1px solid var(--line); } .comment-list .children { list-style: none; padding-left: 1.75rem; } .not-found { text-align: center; padding-block: var(--section-y); } /* -------------------------------------------------------------------------- 7. Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--footer-bg); border-top: 1px solid var(--line); color: var(--ink-faint); padding-top: clamp(3.5rem, 7vw, 5.5rem); } .site-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gap); padding-bottom: 3rem; } .site-footer a { color: var(--ink-soft); } .site-footer a:hover { color: var(--c1); } .site-footer .site-brand__text a { color: var(--ink); } .site-footer__blurb { margin-top: 1.15rem; max-width: 32ch; font-size: var(--t-sm); color: var(--ink-faint); } .site-footer__heading { font-family: var(--font); font-size: var(--t-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 1.15rem; } .site-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; } .site-footer__contact a { font-size: var(--t-body); } .site-footer__address { margin-top: .9rem; font-style: normal; font-size: var(--t-sm); line-height: 1.7; color: var(--ink-faint); } .site-footer__base { padding-block: 1.6rem; border-top: 1px solid var(--line); } .site-footer__copy { margin: 0; font-size: var(--t-sm); color: var(--ink-faint); } /* -------------------------------------------------------------------------- 8. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1199px) { .services__grid, .benefits__grid { grid-template-columns: repeat(2, 1fr); } .site-footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 1024px) { :root { --r-card: 32px; } .hero__inner, .feature__inner { grid-template-columns: 1fr; } .hero__art, .feature__art { order: -1; } } @media (max-width: 860px) { .nav-toggle { display: grid; place-items: center; } .site-nav { position: absolute; inset: 100% 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 1.5rem; padding: 1.5rem; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); } .site-nav.is-open { display: flex; } .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .site-nav__list li { border-bottom: 1px solid var(--line); } .site-nav__list a { display: block; padding: .9rem 0; } .site-nav__list a::after { display: none; } .site-nav__aside { justify-content: space-between; } .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; } .stat:nth-child(odd) { border-left: 0; } .stat:nth-child(3) { border-left: 0; } .quotes__grid { grid-template-columns: 1fr; } .cta__inner { flex-direction: column; align-items: flex-start; } .contact-grid { grid-template-columns: 1fr; } .content-area .wrap { grid-template-columns: 1fr; } } @media (max-width: 767px) { :root { --r-card: 28px; } .services__grid, .benefits__grid { grid-template-columns: 1fr; } .site-footer__inner { grid-template-columns: 1fr; } } @media (max-width: 562px) { .hero__actions .btn { flex: 1 1 100%; justify-content: center; } .service, .benefit, .quote { padding: 1.75rem 1.5rem; } .stats__grid { grid-template-columns: 1fr; } .stat + .stat { border-left: 0; border-top: 1px solid var(--line); padding-top: 1.5rem; } } @media print { .site-header, .site-footer, .hero__art, .cta { display: none; } body { background: #fff; color: #000; } }