/* ========================================================================== sr22carinsurancenashvilletn.com — theme override + SR-22-specific blocks Layered on top of main.css / responsive.css. The base template ships a lime-green landscaping palette; everything below the "palette" block just redefines the same CSS variables, so the whole site recolors without touching the 98KB base stylesheet. ========================================================================== */ :root { /* palette — deep navy + signal amber, reading as regulated/financial rather than lawn-care */ --primary: #101828; --secondary: #FFFFFF; --text-color: #475467; --accent-color: #F2B441; /* CTA / highlight */ --accent-color-2: #0B2545; /* deep navy — headers, footer */ --accent-color-3: #F4F7FB; /* page tint */ --accent-color-4: #D6E0EE; /* borders */ --accent-color-5: #14508C; /* link / secondary action */ --accent-color-6: #0B254500; --accent-color-7: #667085; --accent-color-8: #D99A22; /* accent hover */ --accent-color-9: #000000; } /* hero: base rule hard-codes the turf photo and a green gradient */ .tig-hero__bg { /* Neutral default. Per-location photos come from places_manifest.json and are set inline; never hardcode one city's photo here, or a cloned site shows the wrong skyline everywhere a photo is missing. */ background-image: linear-gradient(160deg, #16324F 0%, #0B2545 55%, #1E4166 100%); } .tig-hero__overlay { background: linear-gradient(180deg, rgba(11, 37, 69, .35) 0%, rgba(11, 37, 69, .62) 55%, rgba(8, 27, 51, .92) 100%); } .tig-hero__eyebrow { color: #FFD98A; } .tig-hero__content h1 em { color: #F2B441; } .tig-hero--inner .tig-hero__content { padding-top: 190px; padding-bottom: 40px; } .tig-hero__phone:hover { background: #fff; color: #0B2545; } .tig-nav-phone { color: #0B2545; } /* base rule paints this lime green with a matching pulse shadow */ .tig-phone-flash { background: #FFFFFF; color: #0B2545; box-shadow: 0 0 0 0 rgba(242, 180, 65, .75); animation-name: sr22Flash; } @keyframes sr22Flash { 0% { box-shadow: 0 0 0 0 rgba(242, 180, 65, .75); } 70% { box-shadow: 0 0 0 18px rgba(242, 180, 65, 0); } 100% { box-shadow: 0 0 0 0 rgba(242, 180, 65, 0); } } @media (prefers-reduced-motion: reduce) { .tig-phone-flash { animation: none; } } .sr22-hero__license { color: rgba(255, 255, 255, .82); font-size: .85rem; max-width: 640px; margin: 6px 0 0; } .sr22-photo-credit { color: rgba(255, 255, 255, .6); font-size: .72rem; margin: 10px 0 0; } /* Vertical rhythm: the base template uses 120px section padding, which suits a photo-led landscaping page. This site stacks many short text sections, so that much air reads as broken layout. Tighten it, and let alternating background tints do the separating instead. */ main > .section { padding-top: 72px; padding-bottom: 72px; } main > .section + .section { padding-top: 64px; } main > .section:first-of-type { padding-top: 56px; padding-bottom: 40px; } .tig-tldr { background: #fff; border: 1px solid var(--accent-color-4); border-left: 5px solid var(--accent-color); border-radius: 12px; padding: 22px 26px; max-width: 90ch; } .tig-tldr__label { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-color-5); margin-bottom: 8px; } .tig-tldr p { margin: 0; font-size: 1.05rem; } /* ---------------------------------------------------- entrance animations */ /* script.js swaps in a fade-* keyframe via IntersectionObserver. Elements have to start hidden for that to read as motion — but only when JS is actually running, or a failed script would leave the page blank to readers and crawlers. The `.js` class is set by an inline script in . */ .js [data-animation] { opacity: 0; } .js [data-animation].animated { opacity: 1; } @media (prefers-reduced-motion: reduce) { .js [data-animation] { opacity: 1 !important; animation: none !important; } .tig-marquee__track { animation: none; } .tig-hero__bg { animation: none; } } /* ------------------------------------------------------------ hero layout */ /* The base grid is align-items:center. This H1 runs three lines, so the text column is ~1000px tall and centring pushed the quote card to the vertical middle of the hero — below the fold on a laptop. Top-align it instead so it sits level with the eyebrow, inside the top third. */ .tig-hero__grid { align-items: start; padding-top: 118px; } .tig-hero__grid--single { grid-template-columns: 1fr; align-items: center; } /* Keep the headline commanding but stop it driving the hero past a screen. */ .tig-hero__content h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: .98; } .tig-hero__content h1 em { display: block; margin-top: 4px; } .tig-hero__content p { font-size: 1.05rem; margin-bottom: 22px; } /* Sized so the whole card, submit button included, clears an 800px-tall laptop viewport without scrolling. */ .tig-hero__form-card { margin-top: 4px; padding: 22px 24px; } .tig-hero__form-card h3 { margin-bottom: 12px; font-size: 1.25rem; } .tig-hero__form-card .tig-cta__form { gap: 9px; } .tig-hero__form-card .tig-cta__row { gap: 9px; } .tig-hero__form-card .tig-cta__form input, .tig-hero__form-card .tig-select { padding: 10px 13px; } @media (max-width: 991px) { /* single column: card first is wrong, keep copy first then the form */ .tig-hero__grid { padding-top: 130px; } .tig-hero__form-card { margin-top: 8px; } } .tig-hero__form-card .tig-cta__form input, .tig-hero__form-card .tig-cta__form textarea, .tig-hero__form-card .tig-select { font-size: 1rem; border-color: var(--accent-color-4); background: #F7F9FC; } .tig-hero__form-note { margin: 2px 0 0; font-size: .78rem; color: var(--accent-color-7); text-align: center; } .tig-cta__submit { width: 100%; justify-content: center; } /* service strip under the hero */ .tig-marquee__track a:hover { color: var(--accent-color); } /* ------------------------------------------------------------- typography */ .sr22-prose h2, .sr22-answer h2, .sr22-cost h2, .sr22-steps h2, .sr22-faq h2, .sr22-violations h2, .sr22-dsc h2, .sr22-glance h2 { margin: 0 0 18px; font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--accent-color-2); } .sr22-prose h3 { margin: 28px 0 10px; color: var(--accent-color-2); } .sr22-prose p, .sr22-answer p, .sr22-cost p, .sr22-steps p { max-width: 78ch; margin: 0 0 16px; } .sr22-lede { font-size: 1.12rem; font-weight: 600; color: var(--primary); } .sr22-source { font-size: .85rem; color: var(--accent-color-7); border-left: 3px solid var(--accent-color-4); padding-left: 14px; } .sr22-source a { color: var(--accent-color-5); } .sr22-disclaimer { font-size: .85rem; color: var(--accent-color-7); background: var(--accent-color-3); border: 1px solid var(--accent-color-4); border-radius: 10px; padding: 14px 18px; max-width: 78ch; } /* --------------------------------------------------------- answer / facts */ .sr22-answer { background: var(--accent-color-3); } .sr22-facts { list-style: none; padding: 0; margin: 0 0 20px; } .sr22-facts li { background: #fff; border: 1px solid var(--accent-color-4); border-left: 4px solid var(--accent-color); border-radius: 10px; padding: 16px 20px; margin-bottom: 12px; max-width: 90ch; } .sr22-facts li strong { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-color-5); margin-bottom: 6px; } /* --- violation groups ------------------------------------------------- */ .sr22-vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; margin: 26px 0 24px; } .sr22-vgroup { display: flex; flex-direction: column; background: #fff; border: 1px solid #E4EAF2; border-top: 3px solid var(--accent-color-5); border-radius: 14px; padding: 22px 22px 18px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); transition: box-shadow .22s ease, transform .22s ease; } .sr22-vgroup:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11, 37, 69, .09); } /* one accent per category so the four are distinguishable at a glance */ .sr22-vgroup--impairment { border-top-color: #C0553F; } .sr22-vgroup--record { border-top-color: var(--accent-color-5); } .sr22-vgroup--financial { border-top-color: #2E7D6F; } .sr22-vgroup--serious { border-top-color: #8E3B58; } .sr22-vgroup__head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 14px; } .sr22-vgroup__icon { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--accent-color-3); color: var(--accent-color-2); font-size: 1.05rem; } .sr22-vgroup--impairment .sr22-vgroup__icon { background: #FBEDEA; color: #C0553F; } .sr22-vgroup--financial .sr22-vgroup__icon { background: #E8F3F1; color: #2E7D6F; } .sr22-vgroup--serious .sr22-vgroup__icon { background: #F7EBEF; color: #8E3B58; } .sr22-vgroup__head h3 { margin: 0 0 2px; font-size: 1.04rem; line-height: 1.3; color: var(--accent-color-2); } .sr22-vgroup__count { margin: 0; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-color-7); } .sr22-vgroup__list { list-style: none; padding: 0; margin: 0 0 14px; flex: 1; } .sr22-vgroup__list li { position: relative; padding: 7px 0 7px 20px; font-size: .91rem; line-height: 1.5; color: var(--primary); border-bottom: 1px solid #F2F5F9; } .sr22-vgroup__list li:last-child { border-bottom: 0; } .sr22-vgroup__list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); } .sr22-vgroup__note { margin: 0; padding-top: 12px; border-top: 1px solid #EEF2F7; font-size: .82rem; line-height: 1.55; color: var(--accent-color-7); } /* --------------------------------------------------------------- at-a-glance */ .sr22-glance__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; margin: 0 0 18px; } .sr22-glance__grid > div { background: #fff; border: 1px solid var(--accent-color-4); border-radius: 12px; padding: 18px 20px; } .sr22-glance__grid dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-color-7); margin-bottom: 6px; } .sr22-glance__grid dd { margin: 0; font-weight: 600; color: var(--primary); } /* ------------------------------------------------- state offices */ .sr22-dsc__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px; margin: 0 0 20px; } .sr22-dsc__item { background: #fff; border: 1px solid var(--accent-color-4); border-radius: 12px; padding: 20px 22px; } .sr22-dsc__item h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--accent-color-2); } .sr22-dsc__item p { margin: 0 0 8px; font-size: .95rem; } .sr22-dsc__badge { display: inline-block; font-size: .78rem; font-weight: 700; border-radius: 999px; padding: 5px 12px; margin: 0; } .sr22-dsc--full .sr22-dsc__badge { background: #E7F4EC; color: #17663C; } .sr22-dsc--express .sr22-dsc__badge{ background: #FEF3E2; color: #8A5A05; } .sr22-dsc--kiosk .sr22-dsc__badge { background: #F1F3F7; color: #475467; } /* ------------------------------------------------------------- steps / grid */ .sr22-steps { background: var(--accent-color-3); } .sr22-steps__grid, .sr22-service-grid, .sr22-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; margin-bottom: 24px; } /* Steps. Own classes: the base template's why-choose-us item is a horizontal flex row with a 72%-wide title column, which laid the heading and body text side by side and overlapping. */ .sr22-steps__grid { list-style: none; padding: 0; counter-reset: none; } .sr22-step { position: relative; background: #fff; border: 1px solid var(--accent-color-4); border-radius: 12px; padding: 30px 24px 24px; } .sr22-step__num { position: absolute; top: -14px; left: 24px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-color-2); color: #fff; font-weight: 800; font-size: .95rem; } .sr22-step__title { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.35; color: var(--accent-color-2); } .sr22-step__text { margin: 0; font-size: .95rem; line-height: 1.65; } /* Service cards. Also own classes — the base card-service--slide__body is absolutely positioned to the bottom of a full-bleed slide, so every card's text stacked on top of its neighbour's. */ .sr22-svc { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--accent-color-4); border-radius: 12px; padding: 26px 24px; text-decoration: none; transition: transform .2s, border-color .2s, box-shadow .2s; } .sr22-svc:hover { transform: translateY(-3px); border-color: var(--accent-color-5); box-shadow: 0 12px 30px rgba(11, 37, 69, .09); } .sr22-svc__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--accent-color-3); color: var(--accent-color-5); font-size: 1.25rem; margin-bottom: 16px; } .sr22-svc__title { margin: 0 0 8px; font-size: 1.1rem; line-height: 1.35; color: var(--accent-color-2); } .sr22-svc__text { margin: 0 0 16px; font-size: .93rem; line-height: 1.6; color: var(--text-color); flex: 1; } .sr22-svc__cta { font-weight: 700; font-size: .9rem; color: var(--accent-color-5); display: inline-flex; align-items: center; gap: 8px; } .sr22-svc:hover .sr22-svc__cta i { transform: translateX(3px); } .sr22-svc__cta i { transition: transform .2s; } .sr22-link-card { display: block; background: #fff; border: 1px solid var(--accent-color-4); border-radius: 12px; padding: 20px 22px; text-decoration: none; transition: .2s; } .sr22-link-card:hover { border-color: var(--accent-color-5); transform: translateY(-2px); } .sr22-link-card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--accent-color-2); } .sr22-link-card p { margin: 0 0 10px; font-size: .9rem; color: var(--text-color); } /* ---------------------------------------------------------------- FAQ ---- */ .sr22-faq__list { max-width: 90ch; } .sr22-faq__item { background: #fff; border: 1px solid var(--accent-color-4); border-radius: 12px; padding: 4px 20px; margin-bottom: 12px; } .sr22-faq__item summary { cursor: pointer; list-style: none; padding: 16px 0; } .sr22-faq__item summary::-webkit-details-marker { display: none; } .sr22-faq__item summary::after { content: "\002B"; float: right; font-weight: 700; color: var(--accent-color-5); } .sr22-faq__item[open] summary::after { content: "\2212"; } .sr22-faq__item summary h3 { display: inline; font-size: 1.03rem; color: var(--accent-color-2); } .sr22-faq__item p { margin: 0 0 18px; max-width: 80ch; } /* --------------------------------------------------------------- blog ---- */ .sr22-post__meta { font-size: .8rem; color: var(--accent-color-7); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .sr22-post__tag { display: inline-block; background: var(--accent-color-3); border: 1px solid var(--accent-color-4); color: var(--accent-color-5); border-radius: 999px; padding: 3px 11px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .sr22-post__body { max-width: 72ch; margin-top: 34px; } .sr22-post__body h2 { margin: 42px 0 14px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); color: var(--accent-color-2); } .sr22-post__body h3 { margin: 30px 0 10px; color: var(--accent-color-2); } .sr22-post__body p { margin: 0 0 18px; font-size: 1.05rem; line-height: 1.75; } .sr22-post__body a { color: var(--accent-color-5); } .sr22-post__list { margin: 0 0 20px; padding-left: 22px; } .sr22-post__list li { margin-bottom: 10px; line-height: 1.7; } .sr22-post__note { background: var(--accent-color-3); border: 1px solid var(--accent-color-4); border-left: 4px solid var(--accent-color); border-radius: 12px; padding: 18px 22px; margin: 26px 0; } .sr22-post__note strong { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-color-8); margin-bottom: 6px; } .sr22-post__note p { margin: 0; font-size: 1rem; } .sr22-post__quote { border-left: 4px solid var(--accent-color-5); margin: 28px 0; padding: 4px 0 4px 22px; } .sr22-post__quote p { margin: 0; font-size: 1.16rem; font-weight: 600; line-height: 1.6; color: var(--accent-color-2); } .sr22-post__sources { max-width: 72ch; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--accent-color-4); } .sr22-post__sources h3 { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-color-7); margin: 0 0 10px; } .sr22-post__sources ul { margin: 0 0 16px; padding-left: 20px; } .sr22-post__sources li { margin-bottom: 6px; font-size: .92rem; } .sr22-post__sources a { color: var(--accent-color-5); } .sr22-post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; } .sr22-post-card { background: #fff; border: 1px solid var(--accent-color-4); border-radius: 12px; padding: 24px 26px; display: flex; flex-direction: column; } .sr22-post-card h3 { font-size: 1.15rem; margin: 0 0 10px; line-height: 1.35; } .sr22-post-card h3 a { color: var(--accent-color-2); text-decoration: none; } .sr22-post-card h3 a:hover { color: var(--accent-color-5); } .sr22-post-card > p { font-size: .95rem; margin: 0 0 16px; flex: 1; } /* --------------------------------------------------------------- form ---- */ .sr22-form { background: var(--accent-color-3); } .sr22-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; max-width: 900px; margin: 0 0 18px; } .sr22-form__grid label { display: flex; min-width: 0; flex-direction: column; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--accent-color-2); } .sr22-form__grid input, .sr22-form__grid select, .sr22-form__grid textarea { min-width: 0; max-width: 100%; border: 1px solid var(--accent-color-4); border-radius: 10px; padding: 12px 14px; font: inherit; font-weight: 400; color: var(--primary); background: #fff; } .sr22-form__grid input:focus, .sr22-form__grid select:focus, .sr22-form__grid textarea:focus { outline: 2px solid var(--accent-color-5); outline-offset: 1px; } .sr22-form__wide { grid-column: 1 / -1; } .sr22-form__grid button { justify-self: start; } /* ------------------------------------------------------------- misc ------ */ .sr22-cta-band { background: var(--accent-color-2); } .sr22-cta-band h2, .sr22-cta-band p { color: #fff; } .sr22-author__card { background: #fff; border: 1px solid var(--accent-color-4); border-left: 4px solid var(--accent-color-5); border-radius: 12px; padding: 24px 26px; max-width: 80ch; } .sr22-author__card h2 { font-size: 1.25rem; margin-bottom: 10px; } @media (max-width: 640px) { .sr22-hero__license { font-size: .78rem; } .sr22-glance__grid, .sr22-dsc__list { grid-template-columns: 1fr; } } /* ========================================================================== Refinement pass — restraint over decoration The base template signals value with size and colour: 70px amber circles, heavy borders, rotation on hover. On an insurance site that reads as a promo sticker. Everything below trades those for hairlines, whitespace and a single accent used only where we actually want a click. ========================================================================== */ /* Understated CTA replacing the amber circle. Chevron slides on hover. */ .sr22-more { display: inline-flex; align-self: flex-start; /* hug the text, not the card width */ align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--accent-color-5); text-decoration: none; margin-top: auto; padding-top: 4px; } .sr22-more i { font-size: .7rem; transition: transform .22s ease; } .sr22-link-card:hover .sr22-more i, .sr22-svc:hover .sr22-more i, .sr22-post-card:hover .sr22-more i, .sr22-more:hover i { transform: translateX(4px); } /* Cards: hairline border, no jump, a quiet lift and a warmer edge on hover. */ .sr22-link-card, .sr22-svc, .sr22-post-card, .sr22-dsc__item, .sr22-step, .sr22-glance__grid > div, .sr22-facts li, .sr22-author__card { border-color: #E4EAF2; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } .sr22-link-card, .sr22-svc, .sr22-post-card { display: flex; flex-direction: column; border-radius: 14px; padding: 26px 24px; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; } .sr22-link-card:hover, .sr22-svc:hover, .sr22-post-card:hover { transform: translateY(-2px); border-color: #C4D3E6; box-shadow: 0 10px 26px rgba(11, 37, 69, .09); } /* Card typography: title carries the weight, blurb steps back. */ .sr22-link-card h3, .sr22-svc__title, .sr22-post-card h3 { font-size: 1.06rem; font-weight: 700; line-height: 1.35; letter-spacing: -.005em; color: var(--accent-color-2); margin: 0 0 7px; } .sr22-link-card p, .sr22-svc__text, .sr22-post-card > p { font-size: .9rem; line-height: 1.6; color: var(--accent-color-7); margin: 0 0 16px; flex: 1; } /* Service icon: quiet navy tile, not an amber badge. */ .sr22-svc__icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-color-3); color: var(--accent-color-5); font-size: 1.05rem; margin-bottom: 14px; } /* Step numbers: outlined, not filled — less shouty in a row of five. */ .sr22-step__num { background: #fff; color: var(--accent-color-2); border: 1.5px solid var(--accent-color-4); font-size: .88rem; } /* Amber stays for the primary action and nothing else. */ .sr22-facts li { border-left-color: var(--accent-color-5); } .tig-tldr { border-left-color: var(--accent-color-5); } /* Blog tag chips: lighter, less badge-like. */ .sr22-post__tag { background: transparent; border-color: #E4EAF2; color: var(--accent-color-7); font-weight: 600; letter-spacing: .06em; } /* ========================================================================== Phone layout The base template keeps desktop type sizes down to 320px: an inner-page eyebrow rendered at 16px uppercase with 0.25em tracking (wrapping to two lines, 81px tall) and a city hero ran 1061px on an 812px screen. This is about fitting a phone, not restyling. ========================================================================== */ @media (max-width: 699px) { /* ---- inner-page hero ---- */ /* the extra bottom padding clears the breadcrumb pill, which anchors to the bottom of the hero and sat on top of the photo credit */ .tig-hero--inner .tig-hero__content { padding-top: 132px; padding-bottom: 96px; } .tig-hero__content h1 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); line-height: 1.06; } .tig-hero__eyebrow { font-size: .66rem; letter-spacing: .12em; padding: 6px 13px; line-height: 1.5; } .tig-hero__content p { font-size: .98rem; line-height: 1.6; } .sr22-hero__license { font-size: .7rem; line-height: 1.5; } .sr22-photo-credit { font-size: .64rem; } .tig-hero__cta { gap: 10px; } .tig-hero__cta .btn, .tig-hero__phone { width: 100%; justify-content: center; } .tig-phone-flash { font-size: 1.05rem; padding: 12px 20px; } .breadcrumb { font-size: .78rem; flex-wrap: wrap; } .tig-hero__form-card { padding: 20px 18px; } /* ---- section rhythm ---- */ main > .section { padding-top: 44px; padding-bottom: 44px; } main > .section + .section { padding-top: 40px; } main > .section:first-of-type { padding-top: 34px; padding-bottom: 26px; } /* ---- headings + prose ---- */ .sr22-prose h2, .sr22-answer h2, .sr22-cost h2, .sr22-steps h2, .sr22-faq h2, .sr22-violations h2, .sr22-dsc h2, .sr22-glance h2 { font-size: 1.45rem; line-height: 1.25; } .sr22-prose h3 { font-size: 1.1rem; } .sr22-lede { font-size: 1.02rem; } .tig-tldr { padding: 18px; } .tig-tldr p { font-size: .98rem; } /* ---- one column, tighter padding ---- */ .sr22-service-grid, .sr22-link-grid, .sr22-steps__grid, .sr22-post-grid, .sr22-violation-list { grid-template-columns: minmax(0, 1fr); gap: 14px; } .sr22-link-card, .sr22-svc, .sr22-post-card { padding: 20px 18px; } .sr22-step, .sr22-dsc__item { padding: 20px 18px; } .sr22-facts li { padding: 14px 16px; } .sr22-author__card { padding: 20px 18px; } .sr22-glance__grid { grid-template-columns: minmax(0, 1fr); } /* ---- forms ---- */ .sr22-form__grid { grid-template-columns: minmax(0, 1fr); } .sr22-form__grid label { min-width: 0; } .sr22-form__grid button { width: 100%; justify-content: center; } /* ---- blog ---- */ .sr22-post__body p { font-size: 1rem; } .sr22-post__body h2 { font-size: 1.35rem; } .sr22-post__quote p { font-size: 1.05rem; } .sr22-post__meta { font-size: .72rem; } /* ---- footer ---- */ .footer-copyright__container { flex-direction: column; gap: 10px; text-align: center; } } /* iOS zooms the page when a focused input renders under 16px. Every width. */ input, select, textarea { font-size: max(16px, 1rem); } /* --- card refinement: hierarchy and a divider so the CTA reads as an action rather than a third paragraph ------------------------------------- */ .sr22-link-card, .sr22-svc, .sr22-post-card { padding: 24px 24px 18px; } .sr22-link-card h3, .sr22-svc__title, .sr22-post-card h3 { font-size: 1.14rem; letter-spacing: -.012em; margin-bottom: 9px; } .sr22-link-card p, .sr22-svc__text, .sr22-post-card > p { font-size: .875rem; line-height: 1.65; margin-bottom: 14px; } .sr22-more { width: 100%; justify-content: space-between; border-top: 1px solid #EEF2F7; padding-top: 13px; margin-top: 2px; text-transform: uppercase; font-size: .7rem; letter-spacing: .09em; font-weight: 700; color: var(--accent-color-2); } .sr22-link-card:hover .sr22-more, .sr22-svc:hover .sr22-more, .sr22-post-card:hover .sr22-more { color: var(--accent-color-5); } .sr22-more i { color: var(--accent-color-5); } /* the accent earns its place on the card edge instead of in a circle */ .sr22-link-card::after, .sr22-svc::after, .sr22-post-card::after { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-color); opacity: 0; transition: opacity .22s ease; } .sr22-link-card, .sr22-svc, .sr22-post-card { position: relative; } .sr22-link-card:hover::after, .sr22-svc:hover::after, .sr22-post-card:hover::after { opacity: 1; } /* ========================================================================== Blog artwork ========================================================================== */ /* Card: illustration bleeds to the card edge, body padding sits below it. */ .sr22-post-card { padding: 0; overflow: hidden; } .sr22-post-card__art { display: block; background: var(--accent-color-2); line-height: 0; } .sr22-post-card__art img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .3, 1); } .sr22-post-card:hover .sr22-post-card__art img { transform: scale(1.035); } .sr22-post-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 16px; } /* the accent edge would sit over the artwork; move it to the body */ .sr22-post-card::after { top: auto; bottom: 0; height: 3px; width: 100%; left: 0; border-radius: 0; } /* Meta row: tags and read-time on one line, wrapping as a unit rather than stranding "· 4 min read" on a line of its own. */ .sr22-post__meta { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } /* Two tags fit on one line for some titles and wrap for others, which left the card titles on different baselines across the grid. Reserving the two-line height lines every title up. */ .sr22-post-card .sr22-post__meta { min-height: 48px; } .sr22-post__read { color: var(--accent-color-7); font-size: .72rem; white-space: nowrap; } .sr22-post__read::before { content: "· "; } .sr22-post-card h3 { margin-bottom: 8px; } /* Post page: same artwork, full width above the body copy. */ .sr22-post__art { margin: 26px 0 4px; max-width: 72ch; border-radius: 14px; overflow: hidden; border: 1px solid #E4EAF2; line-height: 0; } .sr22-post__art img { width: 100%; height: auto; display: block; } @media (max-width: 699px) { .sr22-post-card__body { padding: 18px 18px 14px; } .sr22-post__art { margin: 20px 0 2px; border-radius: 12px; } } /* ========================================================================== Card artwork — services and locations Same band treatment as the blog cards so the three grids read as one set. ========================================================================== */ .sr22-svc, .sr22-link-card.has-art { padding: 0; overflow: hidden; } .sr22-svc__art, .sr22-link-card__art { display: block; background: var(--accent-color-2); line-height: 0; overflow: hidden; } .sr22-svc__art img, .sr22-link-card__art img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .3, 1); } .sr22-svc:hover .sr22-svc__art img, .sr22-link-card:hover .sr22-link-card__art img { transform: scale(1.035); } .sr22-svc__body, .sr22-link-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 16px; } /* icon overlaps the art edge so the card has a focal point */ .sr22-svc__body { position: relative; } .sr22-svc__icon { position: absolute; top: -22px; left: 22px; background: #fff; border: 1px solid #E4EAF2; box-shadow: 0 4px 12px rgba(11, 37, 69, .10); } .sr22-svc .sr22-svc__title { margin-top: 24px; } .sr22-svc::after, .sr22-link-card.has-art::after { top: auto; bottom: 0; left: 0; height: 3px; width: 100%; border-radius: 0; } /* Full-width figure used on service and blog pages. */ .sr22-artband { padding-top: 0 !important; padding-bottom: 0 !important; } .sr22-figure { margin: 0 0 6px; max-width: 860px; border-radius: 16px; overflow: hidden; border: 1px solid #E4EAF2; line-height: 0; } .sr22-figure img { width: 100%; height: auto; display: block; } @media (max-width: 699px) { .sr22-svc__body, .sr22-link-card__body { padding: 18px 18px 14px; } .sr22-figure { border-radius: 12px; } } /* --- in-article figures on blog posts ---------------------------------- */ .sr22-post__fig, .sr22-post__photo { margin: 30px 0; max-width: 72ch; border-radius: 14px; overflow: hidden; border: 1px solid #E4EAF2; background: #fff; } .sr22-post__fig img, .sr22-post__photo img { width: 100%; height: auto; display: block; } .sr22-post__photo img { aspect-ratio: 16 / 9; object-fit: cover; } .sr22-post__photo figcaption { padding: 12px 16px 14px; font-size: .84rem; line-height: 1.5; color: var(--accent-color-7); border-top: 1px solid #EEF2F7; } .sr22-post__photo figcaption span { display: block; margin-top: 4px; font-size: .7rem; color: #9AA8BC; } /* internal links in body copy read as links without shouting */ .sr22-post__body a { color: var(--accent-color-5); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .sr22-post__body a:hover { color: var(--accent-color-8); } @media (max-width: 699px) { .sr22-post__fig, .sr22-post__photo { margin: 22px 0; border-radius: 12px; } } /* Language switch. Lives in the utility cluster beside the phone number, not in the primary nav -- as a nav item it pushed the CTA button off a 1280px viewport and wrapped onto two lines. */ .sr22-lang{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap; color:#fff;opacity:.85;font-size:.9rem;font-weight:600;text-decoration:none; padding:.35rem .6rem;border:1px solid rgba(255,255,255,.28);border-radius:999px; transition:opacity .2s,border-color .2s} .sr22-lang:hover,.sr22-lang:focus-visible{opacity:1;border-color:rgba(255,255,255,.6);color:#fff} .sr22-lang__short{display:none} /* The English header carries seven nav items plus phone plus CTA; below 1400px there is not room for the full word without the pill colliding with the last nav item, so it falls back to a two-letter code rather than a bare icon -- an unlabelled globe is worst for exactly the readers who need this control. */ @media (max-width:1399px){ .sr22-lang__full{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} .sr22-lang__short{display:inline} } /* The template pins .navbar-cta-container to width:200px with flex-shrink:0, so any extra child overflows leftward and lands on top of the last nav item. Let it size to its content instead. */ .navbar-cta-container{width:auto;max-width:250px} /* the fixed width was also what made the CTA label wrap to two lines; keep it wrapping rather than letting it run off the right edge */ .navbar-cta-container .btn-accent{max-width:180px;white-space:normal} /* Even sized correctly, the English header carries seven nav items plus phone plus CTA plus the language pill, which does not fit at 1280px. The phone link is the one redundant control -- the number is also in the persistent corner-call widget and in every hero -- so it yields below 1400px. */ @media (max-width:1399px){.navbar-cta-container .tig-nav-phone{display:none}} /* The header row still overflowed the viewport by ~30px at 1280: .navbar-nav will not compress below its seven items' content width and the CTA cluster is flex-shrink:0, so the overflow has to come out of the pill and the gap. */ @media (max-width:1399px){ .sr22-lang i{display:none} .sr22-lang{padding:.3rem .55rem;gap:0} .navbar-cta-container{gap:8px;max-width:210px} .navbar-cta-container .btn-accent{max-width:150px} } /* The language pill sits beside the hamburger, NOT inside .navbar-cta-container -- the template sets that container to display:none on mobile, which hid the switch entirely on phones. A Spanish speaker on a phone could only find Spanish by opening the hamburger menu first, which is the same as not having it. */ .navbar-action-container > .sr22-lang{order:99;margin-left:auto} @media (max-width:1199px){ /* full word where there is room -- discoverability matters most for the readers who need this control */ .navbar-action-container > .sr22-lang{margin-left:0;margin-right:.75rem;flex:0 0 auto} .sr22-lang i{display:inline} .sr22-lang{padding:.4rem .7rem;font-size:.95rem} .sr22-lang__full{position:static;width:auto;height:auto;clip:auto} .sr22-lang__short{display:none} } @media (max-width:520px){ /* on a phone the full word crowds the edge; fall back to the code, which still reads as a language control next to the globe icon */ .sr22-lang{padding:.35rem .55rem;font-size:.9rem} .sr22-lang__full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .sr22-lang__short{display:inline} }