/* ============================================================================= * SEVA GLOBAL — CLIENT CUSTOMISATION STYLESHEET * ============================================================================= * * WHAT THIS FILE IS * ----------------- * This is the ONE file to edit if you want to change how the website looks — * spacing, colours, fonts, button styles, and so on. * * It is loaded LAST, after every other stylesheet, so anything you write here * WINS over the theme's own styles. You cannot break the theme by editing this * file: if something goes wrong, delete what you added and it reverts. * * HOW TO USE IT * ------------- * 1. Find the section you want (they're numbered below). * 2. Most rules are "commented out" — they sit between a slash-star and a * star-slash, which makes the browser ignore them. To switch a rule ON, * delete the slash-star line above it and the star-slash line below it, * then change the value. * IMPORTANT: never put a comment inside a block you have switched on — * CSS does not allow comments inside comments and it will break the file. * 3. Save the file and upload it to: * wp-content/themes/seva-global/assets/css/seva-custom.css * 4. Refresh the website. If you don't see the change, do a "hard refresh" * (Ctrl+F5 on Windows, Cmd+Shift+R on Mac) — the browser caches CSS. * * IMPORTANT: You do NOT need to run any build step for this file. Edits here * take effect immediately. (The theme's other stylesheet, main.css, IS built * from source and should not be edited by hand.) * * A NOTE ON COLOURS * ----------------- * The theme stores brand colours as three numbers (red green blue) instead of * a #hex code, e.g. 60 96 168 is the same as #3C60A8. * Use an online "hex to rgb" converter, or just use a normal hex code in the * per-element rules further down — those accept #hex fine. * * Most colours can also be changed WITHOUT touching this file, from * WordPress admin → Seva Settings → Colours. Try there first. * * ============================================================================= * TABLE OF CONTENTS * ============================================================================= * 1. SPACING — the three rules that control the whole site ← START HERE * 2. PAGE WIDTH * 3. BRAND COLOURS * 4. FONTS & TEXT SIZES * 5. HEADER & NAVIGATION (top of every page) * 6. HERO BANNERS (big photo band at the top of a page) * 7. BREADCRUMB / TAB ROWS (under the hero on About & Knowledge Hub) * 8. BUTTONS * 9. CARDS & BOXES * 10. LOGO CAROUSELS (Home + Community Impact) * 11. KNOWLEDGE HUB (articles, Tips, Expert Voices) * 12. CONTACT FORM * 13. FOOTER (bottom of every page) * 14. POP-UPS (enlarged image / PDF viewer) * 15. BULLET CHECKMARKS (the ✓ before every bullet point, site-wide) * 16. EYEBROW LABELS (small uppercase label above headings) * ============================================================================= */ /* ============================================================================= * 1. SPACING — THE THREE RULES THAT CONTROL THE WHOLE SITE * ============================================================================= * Vertical spacing across the entire website is driven by just three numbers. * Change one here and it updates on EVERY page, everywhere, automatically. * * TEXT 30px — the gap between two pieces of text. * e.g. a heading and the paragraph under it; one paragraph * and the next; a paragraph and a bullet list. * * BLOCK 40px — the gap between text and a DIFFERENT KIND of thing. * e.g. a paragraph and a row of cards; text and a button; * text and a photo grid. * * SECTION 30px — the padding above AND below every band of content. * Because two stacked sections each contribute 30px, the gap * between any two sections is 30 + 30 = 60px (the maximum). * * To make the whole site more airy, raise these. To make it tighter, lower them. * Keep SECTION at half of whatever maximum section gap you want. * ------------------------------------------------------------------------- */ :root { --sg-space-text: 30px; /* text → text */ --sg-space-block: 40px; /* text → a card grid / image / button */ --sg-space-section: 30px; /* section padding — x2 = 60px between sections */ /* Spacing INSIDE a card or form. Deliberately tighter than the rules above: a 30px gap between a card's icon and its title would break the card. */ --card-gap: 16px; /* card icon → title, card title → description */ --field-gap: 6px; /* form label → input */ } /* (The bullet checkmark settings live in their own section — see 15 below.) */ /* --- Fine-tuning individual sections ------------------------------------- * Some sections deliberately have NO padding so they read as one continuous * block with the section above (e.g. "Countries" flows into "Communities" on * the Multicultural Readiness page). Those use a `!py-0` marker in the page * template and are intentionally left alone. * * To change the spacing of ONE section only, target its background colour or * its heading. Example — give the cream "Trusted by" band on the Home page * extra breathing room: */ /* .bg-surface-alt.sg-section { padding-top: 50px; padding-bottom: 50px; } */ /* ============================================================================= * 2. PAGE WIDTH * ============================================================================= * Controls how wide the content column is, and the left/right margin, on EVERY * page. The site currently centres content at a maximum of 1366px. * ------------------------------------------------------------------------- */ /* .sg-container { max-width: 1366px; } */ /* ============================================================================= * 3. BRAND COLOURS * ============================================================================= * Written as "red green blue" numbers, NOT hex. 60 96 168 = #3C60A8. * Easier alternative: WordPress admin → Seva Settings → Colours. * * --sg-brand Main blue. Buttons, links, the highlighted note box. * --sg-brand-dark The darker blue buttons turn when you hover them. * --sg-brand-light Very pale blue. Card backgrounds, About page tiles. * --sg-accent Light sky blue. Small uppercase labels, footer headings, * the carousel arrows. * --sg-nav Navy. Menu links, hero overlay band, dark cards. * --sg-ink Heading text colour. * --sg-body Body/paragraph text colour. * --sg-muted Faint text — captions, dates, meta. * --sg-surface Page background (white). * --sg-surface-alt The cream band behind the Home page logo strip. * --sg-line Every thin grey border — card outlines, form fields. * --sg-footer-bg Footer background. * --sg-footer-text Footer text and links. * ------------------------------------------------------------------------- */ /* :root { --sg-brand: 60 96 168; --sg-brand-dark: 60 84 168; --sg-brand-light: 232 241 249; --sg-accent: 144 192 240; --sg-nav: 33 48 84; --sg-ink: 26 32 44; --sg-body: 26 32 44; --sg-muted: 107 117 133; --sg-surface: 255 255 255; --sg-surface-alt: 250 243 214; --sg-line: 228 231 237; --sg-footer-bg: 60 96 168; --sg-footer-text: 232 241 249; } */ /* --- Colours that are "hard-coded" --------------------------------------- * These few colours are written directly into the page templates, so they do * NOT change when you edit the brand colours above or use the admin colour * pickers. Override them here if you need to. * * In order, the rules below control: * 1. the gold colour marking the CURRENT page in every breadcrumb/tab row * 2. the "Countries" heading — Multicultural Readiness page * 3. the "Communities" heading — Multicultural Readiness page * 4. the "Celebrations" heading — Multicultural Readiness page * 5. the big statistic numbers — Home page hero */ /* .text-\[\#854F0B\] { color: #854F0B; } #sg-ca-countries-heading { color: #90C0F0; } #sg-ca-communities-heading { color: #26BB95; } #sg-ca-celebrations-heading { color: #854F0B; } .sg-stat__value { color: #C46A4A; } */ /* ============================================================================= * 4. FONTS & TEXT SIZES * ============================================================================= * Fonts can also be set in WordPress admin → Seva Settings → Typography. * ------------------------------------------------------------------------- */ /* :root { --sg-font-heading: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; --sg-font-body: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; } */ /* The biggest headline on the site — Home page hero only ("Empowering Organizations to Lead, Connect, and Grow Across Cultures"). */ /* .sg-h1 { font-size: 2.667rem; line-height: 3.667rem; font-weight: 700; } */ /* The large intro paragraph directly under that headline — Home page only. */ /* .sg-lead { font-size: 1.833rem; line-height: 2.5rem; } */ /* Section headings — "How We Help", "Industries", "Testimonials" (Home), "Countries"/"Communities"/"Celebrations" (Multicultural Readiness), etc. */ /* .sg-h2 { font-size: 1.667rem; line-height: 2.333rem; font-weight: 700; } */ /* Small uppercase label above some headings, e.g. "START WITH A FREE SESSION" above the blue call-to-action band on the Home page. */ /* .sg-eyebrow { font-size: 1.167rem; letter-spacing: 0.083rem; } */ /* The white page title inside the dark band on About pages, Multicultural Readiness, Cultural Celebrations, Knowledge Hub, Solution pages. */ /* #sg-main h1:not(.sg-h1) { font-size: 3rem; line-height: 1.25; } */ /* All ordinary body text and bullet points, site-wide. */ /* #sg-main p, #sg-main li { font-size: 1.167rem; line-height: 1.667rem; } */ /* Long-form article text (Knowledge Hub articles, About page intros, Contact). `max-width` controls the line length — lower = narrower column. */ /* .sg-prose { max-width: 68ch; } */ /* ============================================================================= * 5. HEADER & NAVIGATION — top of every page * ============================================================================= */ /* The white bar across the top. */ /* .sg-header { background: #FFFFFF; border-bottom: 1px solid #E4E7ED; } */ /* The logo. Height only — the width adjusts automatically. */ /* .sg-header__brand img { height: 112px; } */ /* The main menu words: "Consulting & Advisory", "Solutions", "About"… */ /* .sg-nav__link { font-size: 1rem; font-weight: 700; } .sg-nav__link:hover { color: #3C60A8; } */ /* The large drop-down panel that appears under "Solutions" / "Knowledge Hub". */ /* .sg-mega { background: #FFFFFF; border-top: 1px solid #E4E7ED; } */ /* Individual links inside those drop-downs. */ /* .sg-nav__sublink:hover { background: #E8F1F9; color: #3C60A8; } */ /* The thin coloured strip ABOVE the header (only if switched on in settings). */ /* .sg-announcement { background: #3C60A8; color: #FFFFFF; } */ /* ============================================================================= * 6. HERO BANNERS — the big photo band at the top of a page * ============================================================================= * Used on: all 5 About pages, Multicultural Readiness, Cultural Celebrations, * the 3 Knowledge Hub landing pages, and every Solution / Readiness page. * * The dark translucent panel sits 32px up from the bottom of the photo. Its * colour is set PER PAGE in the page editor ("Hero overlay colour"), so change * it there rather than here. * ------------------------------------------------------------------------- */ /* Make the hero photo taller or shorter. */ /* .min-h-\[400px\] { min-height: 400px; } */ /* --- THE TEXT SITTING ON THE HERO PHOTO ---------------------------------- * Two classes cover every hero on the site: * * .sg-hero-title the big page name, e.g. "Indian Weddings" * .sg-hero-subtitle the smaller line under it * * Note the text is normally SMALLER on phones and grows on bigger screens. * A size you set below replaces that behaviour and applies at every screen * size, so pick one that still reads well on a phone — or use the phone-only * block at the very bottom of this section. * ------------------------------------------------------------------------ */ /* --- THE BIG HEADING ----------------------------------------------------- */ /* .sg-hero-title { font-size: 3rem; font-weight: 700; line-height: 1.15; color: #FFFFFF; letter-spacing: normal; } */ /* --- THE SMALLER LINE UNDERNEATH ----------------------------------------- */ /* .sg-hero-subtitle { font-size: 1.5rem; font-weight: 400; line-height: 1.4; color: #FFFFFF; } */ /* --- GAP BETWEEN THE HEADING AND THE LINE BELOW IT ----------------------- */ /* .sg-hero-subtitle { margin-top: 1rem; } */ /* --- MAKE THE TEXT EASIER TO READ OVER A BUSY PHOTO ---------------------- * Adds a soft shadow behind the words. Raise the last number for more. */ /* .sg-hero-title, .sg-hero-subtitle { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45); } */ /* --- PHONE-ONLY SIZES ---------------------------------------------------- * Only applies on screens narrower than 640px, so you can shrink the hero * text on phones without touching the desktop sizes. */ /* @media (max-width: 639px) { .sg-hero-title { font-size: 1.75rem; } .sg-hero-subtitle { font-size: 1rem; } } */ /* --- The dark band across the hero photo (EVERY page that has one) -------- * The band is narrower than the photo and fades away to the left: * * - it covers the RIGHT-HAND TWO THIRDS of the photo * - it is solid at the right edge and fades out towards the left * - the heading and subheading stay centred inside it * * Applies to every page with this style of hero: Consulting & Advisory, all * 5 About pages, Multicultural Readiness, Cultural Celebrations, the Tips and * Expert Voices landing pages and their articles, and every Solution and * Business Readiness page. * * These rules are LIVE (not commented out). Each page's band COLOUR still * comes from its own "Hero overlay colour" setting in the page editor. * * To tune it: * width -> how much of the photo the band covers (66.6667% = two thirds) * the 55% stop-> how far across the band stays solid before it starts fading. * A bigger number = more solid, a smaller number = a longer fade. * ------------------------------------------------------------------------- */ .sg-hero-band-fade { /* Pin it to the right edge instead of stretching full width. */ left: auto; right: 0; width: 66.6667%; /* Solid on the right, fading to fully transparent at the left edge. */ background-color: transparent; background-image: linear-gradient( to left, var(--sg-hero-band-color, rgba(33, 48, 84, 0.88)) 0%, var(--sg-hero-band-color, rgba(33, 48, 84, 0.88)) 55%, transparent 100% ); } /* On phones the band goes back to full width and solid, so the text stays readable on a small screen. */ @media (max-width: 767px) { .sg-hero-band-fade { left: 0; right: 0; width: 100%; background-image: none; background-color: var(--sg-hero-band-color, rgba(33, 48, 84, 0.88)); } } /* --- Put ONE page back to a full-width solid band ------------------------ * If a particular hero photo has its subject on the right, the fading band * can sit on top of it. Switch this on to give that page the old full-width * solid band back. Replace the page address in the first line with the one * you want (the "body" class WordPress adds for that page). * * Tip: for a Page use .page-id-123 , where 123 is the number you see in the * address bar when editing that page (…post=123&action=edit). */ /* .page-id-123 .sg-hero-band-fade { left: 0; right: 0; width: 100%; background-image: none; background-color: var(--sg-hero-band-color, rgba(33, 48, 84, 0.88)); } */ /* ============================================================================= * 7. BREADCRUMB / TAB ROWS * ============================================================================= * The pipe-separated row of links directly under the hero, e.g. * "Our Story | Meet the Team | Strategic Partners | …" (About pages) * "Seema's Perspective | Tips | Expert Voices" (Knowledge Hub) * "Indian Weddings | Jewish Social Events | …" (Celebrations) * "Home / Testimonials / " (testimonial pages) * * The page you are currently on shows in gold and is not a link. * * Every row uses the same three classes, so one change here updates them all: * * .sg-tabs the whole row * .sg-tabs__link each item (both the links and the current page) * .sg-tabs__link.is-active the page you are on (gold, not a link) * .sg-tabs__sep the "|" or "/" divider between items * ------------------------------------------------------------------------- */ /* --- TEXT SIZE AND WEIGHT of every item in the row ----------------------- */ .sg-tabs__link { font-size: 1.05rem; font-weight: 500; letter-spacing: normal; text-transform: none; line-height: 1.25; } /* --- COLOUR of the items you can click ----------------------------------- */ /* .sg-tabs__link { color: #213054; } */ /* --- COLOUR when the mouse is over a link -------------------------------- */ /* .sg-tabs__link:hover { color: #4562AD; } */ /* --- THE PAGE YOU ARE ON (gold, bold, not clickable) --------------------- */ .sg-tabs__link.is-active { color: #854F0B; font-weight: 700; } /* --- THE "|" DIVIDERS ---------------------------------------------------- * Switch this on to make the dividers fainter, or set `color: transparent` * to hide them while keeping the spacing. */ /* .sg-tabs__sep { color: #E4E7ED; } */ /* --- SPACE BETWEEN THE ITEMS --------------------------------------------- */ /* .sg-tabs { gap: 0.25rem 0.75rem; } */ /* ============================================================================= * 8. BUTTONS * ============================================================================= * Every button shares the class `.sg-btn`. There are several styles: * * Solid blue Header "Schedule a Free Consult"; Home hero left button. * Outline blue "LEARN MORE" buttons — Home "How We Help" cards and the * Knowledge Hub promo cards. Square corners, uppercase. * White outline Home hero right button. * Pale blue Footer "Book a session" button. * ------------------------------------------------------------------------- */ /* ALL buttons: corner roundness and text size. */ /* .sg-btn { border-radius: 8px; font-size: 1rem; } */ /* The solid blue buttons. */ /* .sg-btn.bg-cta { background: #3C60A8; color: #FFFFFF; } .sg-btn.bg-cta:hover { background: #3C54A8; } */ /* The outlined "LEARN MORE" buttons. Currently square-cornered — give them rounded corners by setting a border-radius here. */ /* .sg-btn.border-brand { border-radius: 8px; border-color: #3C60A8; color: #3C60A8; } */ /* The Contact page "Send" button and the About pages' bottom CTA button. (These two are hard-coded in the templates and ignore the colour settings.) */ /* .bg-\[\#3C60A8\] { background: #3C60A8; } */ /* ============================================================================= * 9. CARDS & BOXES * ============================================================================= */ /* The standard white card with a thin grey outline. Used very widely: Knowledge Hub article cards, Tips rows, the "Topics Covered" box on Solution / Readiness / Multicultural Readiness pages, team member cards, and the engagement box under each article. */ /* .border-line { border-color: #E4E7ED; } .rounded-md { border-radius: 8px; } */ /* Blog / Insights post cards (they lift slightly on hover). */ /* .sg-card { border-radius: 8px; } */ /* The pale-blue tiles at the bottom of every About page linking to the other About pages ("Meet the Team", "Media Highlights", …). */ /* .bg-\[\#E8F1F9\] { background: #E8F1F9; } */ /* The big statistic numbers under the Home page hero buttons. */ /* .sg-stat__value { font-size: 1.667rem; color: #C46A4A; } */ /* ============================================================================= * 10. LOGO CAROUSELS * ============================================================================= * Auto-scrolling rows of partner/charity logos with arrows either side. * Appears on: Home page ("Trusted by…") and About → Community Impact * ("Seva Giving Back" and "Seva It Forward"). * ------------------------------------------------------------------------- */ /* Size of each logo tile. */ /* [data-sg-marquee] .h-20 { height: 80px; } [data-sg-marquee] .w-40 { width: 160px; } */ /* Scroll speed. HIGHER number = SLOWER. Set to `paused` to stop it entirely. */ /* [data-sg-marquee-track] { animation-duration: 60s; } */ /* [data-sg-marquee-track] { animation-play-state: paused; } */ /* The left/right arrow buttons. */ /* [data-sg-logos-prev], [data-sg-logos-next] { color: #90C0F0; } */ /* ============================================================================= * 11. KNOWLEDGE HUB — articles, Tips, Expert Voices, Seema's Perspectives * ============================================================================= */ /* The bordered box at the bottom of each article containing the questions and the blue highlighted note ("I'd love to hear from you: …"). */ /* .sg-section .rounded-md.border.border-line { border-color: #E4E7ED; } */ /* The solid blue highlight panel inside that box. */ /* .bg-brand.px-8.py-5 { background: #3C60A8; color: #FFFFFF; } */ /* The two promo cards at the very bottom cross-linking the other Hub sections. */ /* .bg-brand-light { background: #E8F1F9; } */ /* ============================================================================= * 12. CONTACT FORM — Contact page only * ============================================================================= */ /* The input boxes (Name, Email, Message) and the drop-down. */ /* .sg-contact-field { border: 1px solid #E4E7ED; border-radius: 8px; padding: 12px 16px; } */ /* The pale blue panel the form sits on. */ /* .bg-\[\#E8F1F9\] { background: #E8F1F9; } */ /* ============================================================================= * 13. FOOTER — bottom of every page * ============================================================================= */ /* Background and text colour of the whole footer. */ /* footer[role="contentinfo"] { background: #3C60A8; color: #E8F1F9; } */ /* The three column headings ("Multicultural Readiness", "Company", …). */ /* footer h2 { font-size: 1.5rem; font-weight: 400; color: #90C0F0; } */ /* All footer links. */ /* footer a { font-size: 0.925rem; color: #E8F1F9; } footer a:hover { color: #FFFFFF; } */ /* The very bottom line: copyright, Privacy policy, Terms of use. NOTE: this text is currently black — change `color` to make it lighter. */ /* footer .mt-10 { color: #000000; } */ /* ============================================================================= * 14. POP-UPS — enlarged image and PDF viewer * ============================================================================= * Opens when you click the flyer image on the Cultural Celebrations page. * ------------------------------------------------------------------------- */ /* The dark screen behind the pop-up. */ /* .sg-lightbox { background: rgb(15 23 42 / 0.85); } */ /* The white PDF window. */ /* .sg-lightbox__doc { width: min(1000px, 94vw); height: min(88vh, 100%); } */ /* The toolbar across the top of the PDF window. */ /* .sg-lightbox__bar { background: #f8fafc; } .sg-lightbox__title { font-size: 0.95rem; color: #1f2937; } .sg-lightbox__link { color: #3c60a8; } */ /* ============================================================================= * 15. BULLET CHECKMARKS — the ✓ before every bullet point, site-wide * ============================================================================= * Every bulleted list on the website shows a checkmark instead of a plain dot: * the Home page "We help organizations" list, the "Topics Covered" boxes on the * Solution and Business Readiness pages, the industry cards on Consulting & * Advisory, "Areas of Expertise" on the Team page, and any bulleted list you * type into a page or article. * * (Menus, the footer, breadcrumbs and the logo carousels are lists too, but * they deliberately never get a checkmark.) * * The mark is the brand's hand-painted tick image used as a stencil, which is * why its colour can be changed here rather than being fixed in the image. * ------------------------------------------------------------------------- */ /* --- COLOUR (this rule is live — edit the value) ------------------------- */ :root { --sg-check-color: rgb(196 106 74); /* terracotta. Also accepts #C46A4A */ } /* --- SIZE ---------------------------------------------------------------- * "em" means "relative to the text size", so the checkmark scales with the * text it sits next to. 1.05em ≈ the same height as a capital letter. * Switch this on and raise/lower the number to make every checkmark bigger * or smaller. */ /* .sg-checklist > li::before, .sg-prose ul > li::before { width: 1.05em; height: 1.05em; } */ /* --- VERTICAL POSITION --------------------------------------------------- * Nudges the checkmark up or down so it lines up with the first line of text. * A bigger number moves it DOWN. */ /* .sg-checklist > li::before, .sg-prose ul > li::before { top: 0.28em; } */ /* --- GAP BETWEEN THE CHECKMARK AND THE TEXT ------------------------------ * How far the text is indented from the checkmark. */ /* .sg-checklist > li, .sg-prose ul > li { padding-left: 1.75rem; } */ /* --- USE A DIFFERENT ICON ------------------------------------------------ * Point this at any image in the theme's icon folder. A PNG with a * TRANSPARENT background works best, because only the shape is used — the * colour comes from --sg-check-color above. * Upload your image to: wp-content/themes/seva-global/assets/img/icons/ */ /* :root { --sg-check-icon: url("../img/icons/tick.png"); } */ /* --- TURN CHECKMARKS OFF (back to plain round bullets) ------------------- * Only if you ever want the standard dot bullets back. */ /* .sg-checklist, .sg-prose ul { list-style: disc; padding-left: 1.25rem; } .sg-checklist > li::before, .sg-prose ul > li::before { content: none; } .sg-checklist > li, .sg-prose ul > li { padding-left: 0; } */ /* ============================================================================= * 16. EYEBROW LABELS — the small uppercase label above a heading * ============================================================================= * Examples: "START WITH A FREE SESSION" above the blue call-to-action band on * the Home page, "TESTIMONIALS" on the Testimonials page, "INSIGHTS" above the * Knowledge Center block, and the label above each Solution page's CTA. * * There are TWO colours because the label appears on both pale and dark blue * sections, and no single colour is readable on both. * * READABILITY — please read before changing these. * The label is small, uppercase and not bold, so accessibility rules count it * as ordinary text: it must be at least 4.5 times more contrasted than the * colour behind it. The original pale blue (#90C0F0) reached only 1.9 on white * — roughly a quarter of what is required — which is why it looked washed out * and was flagged by Google Lighthouse. If you change a colour here, paste it * into webaim.org/resources/contrastchecker with the background colour and * check it still says "Pass" for normal text. * ------------------------------------------------------------------------- */ /* --- COLOURS -------------------------------------------------------------- * By default the label uses your brand blue on pale sections and a pale blue * tint on the dark bands, and it FOLLOWS the brand colour set in * Appearance > Seva Settings automatically — so normally you change it there, * not here. * * Switch the block below on only if you want the label pinned to a fixed * colour that ignores the brand setting. First value = on pale sections * (currently 5.8 on white), second = on the dark blue bands (5.1 on the band). */ /* :root { --sg-eyebrow-color: #4562AD; --sg-eyebrow-color-on-dark: #E8F0F9; } */ /* --- SIZE AND LETTER SPACING -------------------------------------------- * Switch this on to change how big the label is and how far apart its * letters sit. Note the label is deliberately smaller on phones. */ /* .sg-eyebrow { font-size: 1.167rem; letter-spacing: 0.083rem; } */ /* --- MAKE IT BOLD -------------------------------------------------------- * Switching this on also improves readability, because bold text at this * size only needs 3 times the contrast rather than 4.5. */ /* .sg-eyebrow { font-weight: 700; } */ /* ============================================================================= * YOUR OWN RULES * ============================================================================= * Add anything else below this line. Rules here override everything above. * ============================================================================= */