/* ========================================================= CharacterCounter.COM — Light Theme CSS (Full, Final-Fix v16) NOTE: Add this in for correct mobile breakpoints: ========================================================= */ /* Font */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); /* --------------------------------------------------------- Design tokens --------------------------------------------------------- */ :root{ --light-color: #3d3d3d; --light-color-alt: rgba(0,0,0,.6); --primary-background-color: #fff; --secondary-background-color: #f1f1f1; /* light gray */ --hover-light-color: #fff; --transparent-dark-color: var(--secondary-background-color); --transparent-light-color: rgba(0,0,0,.1); --textarea-primary-color: #ffffff; --black: #000; --white: #fff; --gradient-color: linear-gradient(115deg,#4fcf70,#fad648,#a767e5,#12bcfe,#44ce7b); --font-family: 'Poppins', sans-serif; --font-size-xsm: 1.2rem; --font-size-sm: 1.6rem; --font-size-md: 2.4rem; --font-size-lg: 3rem; --font-size-xl: 4rem; --gap: 2rem; --margin-sm: 2rem; --margin-md: 3rem; --item-min-height-sm: 20rem; --item-min-height-md: 30rem; /* Bottom row exact heights (grid rows) */ --bottom-title-h: 40px; /* room so labels never clip */ --bottom-value-h: 31px; /* numbers row height */ } /* --------------------------------------------------------- Base / resets --------------------------------------------------------- */ *{ margin:0; padding:0; box-sizing:border-box; } html{ font-size:62.5%; } body{ font-family: var(--font-family); font-size: var(--font-size-sm); color: var(--light-color-alt); background-color: var(--primary-background-color); letter-spacing: 1px; transition: background-color .25s, color .25s; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; } img{ max-width:100%; } input, button{ font:inherit; color:inherit; border:none; background:transparent; } i{ font-size: var(--font-size-md); } /* --------------------------------------------------------- Layout helpers --------------------------------------------------------- */ .container{ max-width:160rem; margin:0 auto; padding:0 1.5rem; } .d-grid{ display:grid; } .place-items-center{ display:inline-flex; align-items:center; justify-content:center; } .section{ padding-block:5rem; } .featured-websites{ text-align:center; } .screen-sm-hidden{ display:none; } /* --------------------------------------------------------- Header / Nav --------------------------------------------------------- */ .header{ background-color: var(--primary-background-color); position: fixed; top:0; left:0; width:100%; z-index:999; } .navbar{ display:flex; align-items:center; justify-content:space-between; padding-block:.8rem; } .logo{ font-size: var(--font-size-md); color: var(--light-color); } .menu{ position:absolute; top:8.5rem; right:1.5rem; width:23rem; padding:1.5rem; background:var(--secondary-background-color); opacity:0; transform:scale(0); transition:opacity .25s ease-in; } .list{ display:flex; align-items:center; gap:var(--gap); } .menu>.list{ flex-direction:column; } .list-link.current{ color:var(--light-color); } .close-menu-icon{ display:none; } .btn{ cursor:pointer; } .list-link:hover, .btn:hover, .btn:hover span{ color:var(--light-color); } .header.activated{ box-shadow:0 1px .5rem var(--transparent-light-color); } .menu.activated{ box-shadow:1px 1px 1rem var(--transparent-light-color); opacity:1; transform:scale(1); } .menu-toggle-icon.activated .open-menu-icon{ display:none; } .menu-toggle-icon.activated .close-menu-icon{ display:block; } /* hide theme toggle (no dark theme) */ #theme-toggle-btn .sun-icon, #theme-toggle-btn .moon-icon{ display:none; } /* Desktop nav */ @media screen and (min-width:1024px){ .menu{ position:static; width:initial; padding:initial; background:transparent; opacity:1; transform:scale(1); } .menu>.list{ flex-direction:row; } .screen-lg-hidden{ display:none; } .screen-sm-hidden{ display:block; } } /* --------------------------------------------------------- Search overlay --------------------------------------------------------- */ .search-form-container{ width:100%; max-width:100%; height:100vh; background:var(--primary-background-color); position:fixed; inset:0; z-index:9999; display:flex; opacity:0; transform:scale(0); transition:opacity .5s; } .search-form-container.activated{ opacity:1; transform:scale(1); } .form-container-inner{ margin:auto; display:flex; flex-direction:column; gap:var(--gap); text-align:center; } .form{ display:flex; justify-content:center; } .form-input,.form-btn{ display:inline-block; outline:none; border:2px solid var(--secondary-background-color); padding:1.5rem; color:var(--light-color-alt); } .form-input{ border-right:none; width:100%; background:var(--primary-background-color); } .form-btn{ margin-left:-.5rem; border-left:none; background:var(--secondary-background-color); text-transform:uppercase; width:8rem; } .form-note{ font-size:var(--font-size-xsm); align-self:flex-end; } .form-close-btn{ position:absolute; top:1.5rem; right:1.5rem; border:2px solid var(--secondary-background-color); width:4rem; height:4rem; display:flex; } /* --------------------------------------------------------- Logos (light only) --------------------------------------------------------- */ .dark-single, .dark-double{ display:none; } .light-single{ display:block; } .light-double{ display:none; } @media (max-width:768px){ .light-single{ display:none; } .light-double{ display:block; } } /* --------------------------------------------------------- "As Featured In" strip --------------------------------------------------------- */ .feature-parent{ display:grid; grid-template-columns:1fr 175px 150px 175px 175px 150px 1fr; grid-template-rows:1fr; grid-column-gap:10px; grid-row-gap:0; height:200px; } .feature-div1{ grid-area:1/2/2/3; margin:auto; } .feature-div2{ grid-area:1/3/2/4; margin:auto; } .feature-div3{ grid-area:1/4/2/5; margin:auto; } .feature-div4{ grid-area:1/5/2/6; margin:auto; } .feature-div5{ grid-area:1/6/2/7; margin:auto; } .feature-div6{ grid-area:1/1/2/2; } .feature-div7{ grid-area:1/7/2/8; } @media (max-width:905px){ .feature-parent{ grid-template-columns:1fr 175px 175px 175px 1fr; grid-template-rows:140px 110px; height:400px; padding:5px; } .feature-div1{ grid-area:1/2/2/3; } .feature-div2{ grid-area:1/3/2/4; } .feature-div3{ grid-area:1/4/2/5; } .feature-div4{ grid-area:2/2/3/3; } .feature-div5{ grid-area:2/3/3/5; } .feature-div6{ grid-area:1/1/3/2; } .feature-div7{ grid-area:1/5/3/6; } } @media (max-width:580px){ .feature-parent{ grid-template-columns:1fr 160px 160px 1fr; grid-template-rows:140px 110px 110px; height:400px; } .feature-div1{ grid-area:1/2/2/3; } .feature-div2{ grid-area:1/3/2/4; } .feature-div3{ grid-area:3/2/4/4; } .feature-div4{ grid-area:2/3/3/4; } .feature-div5{ grid-area:2/2/3/3; } .feature-div6{ grid-area:1/1/4/2; } .feature-div7{ grid-area:1/3/4/4; } } /* --------------------------------------------------------- Text box + textarea + action buttons --------------------------------------------------------- */ .text-box{ background:var(--secondary-background-color); } textarea{ box-sizing:border-box; border:5px solid var(--light-color-alt); padding:5px; border-radius:15px; height:370px; width:100%; outline:none; white-space:initial; resize:none; background: var(--white); color:#000; } textarea:focus{ border:5px solid #000; -webkit-box-shadow:0 8px 6px -6px #999; -moz-box-shadow:0 8px 6px -6px #999; box-shadow:0 8px 6px -6px #999; } textarea::placeholder{ color:var(--light-color-alt); } input[type="text"], input[type="number"], textarea{ font-size:16px; font-family: Arial, sans-serif; } .clearButton{ background:#d52d2b; } .copyButton{ background:#1e7b1e; } .clearButton, .copyButton{ color:#fff !important; text-transform:uppercase; text-decoration:none; padding:10px; margin:5px 0 0 5px; display:inline; border-radius:5px; border:none; transition:all .4s ease 0s; } .clearButton:hover, .copyButton:hover{ background:#434343; -webkit-box-shadow:0px 5px 40px -10px rgba(0,0,0,.57); -moz-box-shadow:0px 5px 40px -10px rgba(0,0,0,.57); box-shadow:0px 5px 40px -10px rgba(0,0,0,.57); } /* --------------------------------------------------------- COUNTERS GRID (.parent) --------------------------------------------------------- */ /* ≥0px */ @media screen and (min-width:0px){ /* Number spans — centered */ #characterOutput, #wordOutput, #spaceOutput, #letterOutput, #nonSpaceOutput, #sentenceOutput, #paragraphOutput, #pageOutput{ font-size:18px; color:#4285F4; line-height:1.1; display:inline-block; text-align:center; } .about-us{ width:100%; display:grid; grid-template-columns:1fr; grid-template-rows:1fr; } .about1, .about3{ display:none; } .about2{ grid-area:1/1/2/2; padding:5px; } .parent{ display:grid; grid-template-columns:1fr; grid-template-rows: minmax(34px,auto) 34px /* Characters (title/value) */ minmax(34px,auto) 34px /* Words */ 385px 60px /* textarea / buttons */ minmax(34px,auto) 34px /* Spaces */ minmax(34px,auto) 34px /* Letters */ var(--bottom-title-h) var(--bottom-value-h) /* Characters w/o space */ minmax(36px,auto) 34px /* Sentences (single-column flow) */ minmax(36px,auto) 34px; /* Paragraphs (single-column flow) */ grid-column-gap:0; grid-row-gap:0; } .div1{ grid-area:1/1/2/2; } #div5{ grid-area:2/1/3/2; } .div2{ grid-area:3/1/4/2; } #div6{ grid-area:4/1/5/2; } .div9{ grid-area:5/1/6/2; margin:10px 0; -webkit-box-shadow:0 8px 6px -6px #999; -moz-box-shadow:0 8px 6px -6px #999; box-shadow:0 8px 6px -6px #999; } .div10{ grid-area:6/1/7/2; } .div3{ grid-area:7/1/8/2; } #div7{ grid-area:8/1/9/2; } .div4{ grid-area:9/1/10/2; } #div8{ grid-area:10/1/11/2; } .div11{ grid-area:11/1/12/2; } #div15{ grid-area:12/1/13/2; } .div12{ grid-area:13/1/14/2; } #div16{ grid-area:14/1/15/2; } .div13{ grid-area:15/1/16/2; } #div17{ grid-area:16/1/17/2; } .div14{ grid-area:17/1/18/2; } #div18{ grid-area:18/1/19/2; } .div19{ display:none; } /* Span frames (no fill; used only as layout helpers at larger widths) */ .div22{ grid-area:1/1/5/2; border-radius:0; padding:0; } .div23{ grid-area:7/1/19/2; border-radius:0; padding:0; } } /* ≥550px (two columns of counters) */ @media screen and (min-width:550px){ #characterOutput, #wordOutput, #spaceOutput, #letterOutput, #nonSpaceOutput, #sentenceOutput, #paragraphOutput, #pageOutput{ font-size:28px; } .parent{ display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows: minmax(34px,auto) 34px minmax(34px,auto) 34px 385px 60px var(--bottom-title-h) var(--bottom-value-h) minmax(36px,auto) 34px; grid-column-gap:0; grid-row-gap:0; } .div1{ grid-area:1/1/2/2; } .div2{ grid-area:1/2/2/3; } #div5{ grid-area:2/1/3/2; } #div6{ grid-area:2/2/3/3; } .div3{ grid-area:3/1/4/2; } .div4{ grid-area:3/2/4/3; } #div7{ grid-area:4/1/5/2; } #div8{ grid-area:4/2/5/3; } .div9{ grid-area:5/1/6/3; margin:10px 0; } .div10{ grid-area:6/1/7/3; } .div11{ grid-area:7/1/8/2; } .div12{ grid-area:7/2/8/3; } #div15{ grid-area:8/1/9/2; } #div16{ grid-area:8/2/9/3; } .div13{ grid-area:9/1/10/2; } .div14{ grid-area:9/2/10/3; } #div17{ grid-area:10/1/11/2; } #div18{ grid-area:10/2/11/3; } .div22{ grid-area:1/1/5/3; } .div23{ grid-area:7/1/11/3; } } /* ≥700px */ @media screen and (min-width:700px){ #featured-banner-long{ display:block; max-width:850px; text-align:center; margin-inline:auto; width:100%; padding:20px 0; } #featured-banner-small{ display:none; } .trending-news-box{ flex-direction:row; align-items:center; } .trending-news-img-box{ width:50%; } .trending-news-data{ margin:auto; text-align:center; } .newsletter-description{ max-width:40rem; } .form-container-inner{ align-items:center; } .popular-tags-container, .footer-container{ grid-template-columns:repeat(2,1fr); } .company-data{ order:0; } .author{ grid-template-columns:25rem 1fr; } } /* ≥768px (four columns of counters) */ @media screen and (min-width:768px){ .parent{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows: minmax(34px,auto) 34px /* top titles/values */ 385px 60px var(--bottom-title-h) var(--bottom-value-h); grid-column-gap:0; grid-row-gap:0; } .div1{ grid-area:1/1/2/2; } .div2{ grid-area:1/2/2/3; } .div3{ grid-area:1/3/2/4; } .div4{ grid-area:1/4/2/5; } #div5{ grid-area:2/1/3/2; } #div6{ grid-area:2/2/3/3; } #div7{ grid-area:2/3/3/4; } #div8{ grid-area:2/4/3/5; } .div9{ grid-area:3/1/4/5; margin:10px 0; } .div10{ grid-area:4/1/5/5; } .div11{ grid-area:5/1/6/2; } .div12{ grid-area:5/2/6/3; } .div13{ grid-area:5/3/6/4; } .div14{ grid-area:5/4/6/5; } #div15{ grid-area:6/1/7/2; } #div16{ grid-area:6/2/7/3; } #div17{ grid-area:6/3/7/4; } #div18{ grid-area:6/4/7/5; } .div19{ border:none; } .div22{ grid-area:1/1/3/5; } .div23{ grid-area:5/1/7/5; } } /* ≥992px */ @media screen and (min-width:992px){ .parent{ display:grid; grid-template-columns:repeat(4,1fr) 305px; /* right sidebar */ grid-template-rows: minmax(34px,auto) 34px 385px 60px var(--bottom-title-h) var(--bottom-value-h); } .about-us{ display:grid; grid-template-columns:1fr 750px 1fr; grid-template-rows:1fr; } .about1{ grid-area:1/1/2/2; border:1px solid #000; } .about2{ grid-area:1/2/2/3; } .about3{ grid-area:1/3/2/4; border:1px solid #000; } .div1{ grid-area:1/1/2/2; } .div2{ grid-area:1/2/2/3; } .div3{ grid-area:1/3/2/4; } .div4{ grid-area:1/4/2/5; } #div5{ grid-area:2/1/3/2; } #div6{ grid-area:2/2/3/3; } #div7{ grid-area:2/3/3/4; } #div8{ grid-area:2/4/3/5; } .div9{ grid-area:3/1/4/5; margin:10px 0; } .div10{ grid-area:4/1/5/5; } .div11{ grid-area:5/1/6/2; } .div12{ grid-area:5/2/6/3; } .div13{ grid-area:5/3/6/4; } .div14{ grid-area:5/4/6/5; } #div15{ grid-area:6/1/7/2; } #div16{ grid-area:6/2/7/3; } #div17{ grid-area:6/3/7/4; } #div18{ grid-area:6/4/7/5; } .div19{ grid-area:1/5/7/6; display:block; margin:0 0 0 5px; } } /* ≥1024px */ @media screen and (min-width:1024px){ .trending-news-img-box{ width:10rem; height:10rem; } .popular-tags-container{ grid-template-columns:repeat(3,1fr); } .footer-container{ grid-template-columns:repeat(5,1fr); } .company-data{ grid-column:span 2; } .company-description{ max-width:85%; } .copyright-notice{ margin-top:auto; } .blog-post-data img{ height:40rem; } } /* ≥1150px */ @media screen and (min-width:1150px){ #characterOutput, #wordOutput, #spaceOutput, #letterOutput, #nonSpaceOutput, #sentenceOutput, #paragraphOutput, #pageOutput{ font-size:28px; color:#4285F4; } .parent{ display:grid; grid-template-columns:1fr 200px 200px 200px 200px 1fr 305px; grid-template-rows: minmax(34px,auto) 34px 385px 60px var(--bottom-title-h) var(--bottom-value-h); } .div1{ grid-area:1/2/2/3; } .div2{ grid-area:1/3/2/4; } .div3{ grid-area:1/4/2/5; } .div4{ grid-area:1/5/2/6; } #div5{ grid-area:2/2/3/3; } #div6{ grid-area:2/3/3/4; } #div7{ grid-area:2/4/3/5; } #div8{ grid-area:2/5/3/6; } .div9{ grid-area:3/2/4/6; margin:10px 0; } .div10{ grid-area:4/2/5/6; } .div11{ grid-area:5/2/6/3; } .div12{ grid-area:5/3/6/4; } .div13{ grid-area:5/4/6/5; } .div14{ grid-area:5/5/6/6; } #div15{ grid-area:6/2/7/3; } #div16{ grid-area:6/3/7/4; } #div17{ grid-area:6/4/7/5; } #div18{ grid-area:6/5/7/6; } .div20{ grid-area:1/1/7/2; } .div21{ grid-area:1/6/7/7; } .div19{ grid-area:1/7/7/8; } .div22{ grid-area:1/2/3/6; } .div23{ grid-area:5/2/7/6; } } /* ≥1200px */ @media screen and (min-width:1200px){ .older-posts-grid-wrapper{ grid-template-columns:repeat(2,1fr); } } /* ≥1500px */ @media screen and (min-width:1500px){ .featured-article{ grid-column:3/-1; } .featured-article-1{ grid-column:1/3; grid-row:2/-1; } } /* --------------------------------------------------------- Shared sections --------------------------------------------------------- */ .section-title{ position:relative; font-size:var(--font-size-md); margin-bottom:6rem; } .section-title::after{ content:attr(data-name); font-size:var(--font-size-lg); text-transform:uppercase; opacity:.1; position:absolute; top:1.5rem; left:2rem; } .popular-tags-container{ gap:var(--gap); } .popular-tags-container .article{ min-height: var(--item-min-height-sm); overflow:hidden; position:relative; } .tag-name{ padding:1rem 2rem; background:var(--transparent-dark-color); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; } .popular-tags-container .article:hover .tag-name{ color:var(--light-color); } .popular-tags-container .article:hover .article-image{ transform:scale(1.05); } .article-image{ width:100%; height:100%; object-fit:cover; transition:transform .25s; } .newsletter{ padding-bottom:6rem; } .newsletter-title{ font-size:var(--font-size-lg); } .newsletter-description{ margin-bottom:3rem; } /* ===== Newsletter (fake signup) helpers ===== */ .sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .hp-field-wrap{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; } .newsletter-status{ margin-top:.8rem; min-height:1.6em; /* reserve space to avoid layout shift */ font-size:1.4rem; } .newsletter-status.success{ color:#1e7b1e; } .newsletter-status.error{ color:#d52d2b; } .footer{ background:var(--secondary-background-color); } .footer-container{ gap:var(--gap); } .company-data{ display:flex; flex-direction:column; order:1; } .company-description{ margin-block:var(--margin-sm); max-width:75%; } .social-media{ margin-bottom:var(--margin-md); } .copyright-notice{ opacity:.8; } .footer-list{ flex-direction:column; align-items:flex-start; display:flex; } .footer-title{ font-size:var(--font-size-sm); text-transform:uppercase; margin-bottom:var(--margin-sm); } /* --------------------------------------------------------- Blog post bits --------------------------------------------------------- */ .blog-post{ padding-bottom:5rem; } .blog-post-data{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-block:2.5rem; } .blog-post-title{ font-size:clamp(3rem,5vw,6rem); } .blog-post-data .article-data{ margin-bottom:2.5rem; } .blog-post-data img{ width:100%; height:var(--item-min-height-sm); object-fit:cover; object-position:center 10%; } .blog-post-container .container{ max-width:90rem; padding:0; display:flex; flex-direction:column; gap:var(--gap); } .quote{ background:var(--secondary-background-color); padding:2.5rem; } .quote p{ font-style:italic; } .quote span{ font-size:5rem; } .author{ margin-top:5rem; gap:var(--gap); background:var(--secondary-background-color); } .author-image-box{ position:relative; height:var(--item-min-height-sm); } .author-about{ padding:1.5rem; display:flex; flex-direction:column; gap:1rem; } .author-name{ color:var(--light-color); font-weight:400; } .author-about p{ max-width:50rem; margin-bottom:1rem; } .author-about .social-media{ margin-top:auto; margin-bottom:0; } /* --------------------------------------------------------- Scrollbar --------------------------------------------------------- */ ::-webkit-scrollbar{ width:1rem; } ::-webkit-scrollbar-track{ background:#f1f1f1; } ::-webkit-scrollbar-thumb{ background:#3f4254; } ::-webkit-scrollbar-thumb:hover{ background:#2e303b; } /* --------------------------------------------------------- Snackbar (legacy; safe to keep even if unused) --------------------------------------------------------- */ #snackbar, #snackbarFail{ visibility:hidden; min-width:250px; margin-left:-125px; background:#5cb85c; color:#fff; text-align:center; border-radius:2px; padding:16px; position:fixed; z-index:1; left:50%; bottom:180px; font-size:17px; } #snackbarFail{ background:#d9534f; } #snackbar.show, #snackbarFail.show{ visibility:visible; -webkit-animation:fadein .5s, fadeout .5s 2.5s; animation:fadein .5s, fadeout .5s 2.5s; } @-webkit-keyframes fadein{ from{bottom:0;opacity:0} to{bottom:180px;opacity:1} } @keyframes fadein{ from{bottom:0;opacity:0} to{bottom:180px;opacity:1} } @-webkit-keyframes fadeout{ from{bottom:180px;opacity:1} to{bottom:0;opacity:0} } @keyframes fadeout{ from{bottom:180px;opacity:1} to{bottom:0;opacity:0} } /* ========================================================= Title/Value cell normalization (and bottom-row fixes) ========================================================= */ /* Make all 16 metric cells consistent */ .div1, .div2, .div3, .div4, .div11, .div12, .div13, .div14, #div5, #div6, #div7, #div8, #div15, #div16, #div17, #div18{ background:#fff !important; border:1px solid #d9d9d9 !important; box-shadow:none !important; } /* Reset inner margins to avoid “mystery” extra pixels */ .div1 > *, .div2 > *, .div3 > *, .div4 > *, .div11 > *, .div12 > *, .div13 > *, .div14 > *, #div5 > *, #div6 > *, #div7 > *, #div8 > *, #div15 > *, #div16 > *, #div17 > *, #div18 > *{ margin:0 !important; } /* Title cells (shared) */ .div1, .div2, .div3, .div4, .div11, .div12, .div13, .div14{ display:flex; align-items:center; justify-content:center; text-align:center; padding:0 12px; line-height:1.25; white-space:normal; word-break:break-word; overflow:hidden; } /* Top 4 titles — slightly larger */ .div1, .div2, .div3, .div4{ font-size:2.0rem; } /* Bottom 4 titles — fixed height with border-box padding */ .div11, .div12, .div13, .div14{ height: var(--bottom-title-h); box-sizing: border-box; padding: 2px 12px; /* symmetric; descenders safe inside 40px */ font-size:1.9rem; } /* Remove the seam between title/value within each pair */ .div1, .div2, .div3, .div4{ border-bottom:none !important; } .div11, .div12, .div13, .div14{ border-bottom:none !important; } /* Value cells (numbers) — shared */ #div5, #div6, #div7, #div8, #div15, #div16, #div17, #div18{ display:flex; align-items:center; justify-content:center; text-align:center; padding:0 10px; line-height:1; border-top:none !important; } /* Top row values — a hair more bottom space; keep inside the 34px row */ #div5, #div6, #div7, #div8{ box-sizing: border-box; padding-bottom: 4px !important; } /* Bottom values — keep within fixed height; tiny extra bottom space */ #div15, #div16, #div17, #div18{ height: var(--bottom-value-h) !important; box-sizing: border-box; padding-top: 5px !important; padding-bottom: 6px !important; } /* All 8 number outputs — nudge up to increase perceived space below */ #characterOutput, #wordOutput, #spaceOutput, #letterOutput, #nonSpaceOutput, #sentenceOutput, #paragraphOutput, #pageOutput{ transform: translateY(-1px) !important; } /* ========================================================= ISOLATED ARTICLE CONTENT (optional, for grammar article) Wrap with:
…
========================================================= */ .grammar-article, .grammar-article *{ all: revert; box-sizing: border-box; } .grammar-article{ width:100%; max-width:72ch; margin:2rem auto; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; line-height:1.6; color:#111; } .grammar-article h1{ font-size:2rem; line-height:1.25; margin:1em 0 .5em; } .grammar-article h2{ font-size:1.6rem; /* larger h2 for “Common Uses” */ line-height:1.3; margin:1.25em 0 .6em; } .grammar-article p{ margin:1em 0; } .grammar-article blockquote{ margin:1em 0; padding:.75em 1em; border-left:4px solid #ccc; background:#fafafa; } .grammar-article ul, .grammar-article ol{ margin:1em 0 1em 1.5em; padding:0; } .grammar-article li{ margin:0 0 .7em; /* more space after each bullet */ } .grammar-article li > ul, .grammar-article li > ol{ margin-top:.6em; } .grammar-article table{ width:100%; border-collapse:collapse; margin:1.5em 0; } .grammar-article th, .grammar-article td{ border:1px solid #ccc; padding:.6em; text-align:left; } .grammar-article th{ background:#f0f0f0; } .grammar-article details summary{ cursor:pointer; font-weight:700; } .grammar-article .muted{ color:#555; } /* ========================================================= MONO BOX (optional tighter two-line layout) Add class="mono-text chars-compact" to tighten two lines ========================================================= */ .mono-text.chars-compact{ line-height:1.1; } .mono-text.chars-compact p{ margin:0; } .mono-text.chars-compact p + p{ margin-top:2px; } /* ========================================================= HOTFIX — Light-gray backdrop without overlaying cells (Keep at VERY END so it wins specificity) ========================================================= */ .parent{ background: var(--secondary-background-color) !important; /* light gray behind everything */ } /* Ensure white metric cards sit above any span frames */ .div1, .div2, .div3, .div4, .div11, .div12, .div13, .div14, #div5, #div6, #div7, #div8, #div15, #div16, #div17, #div18, .div9, .div10, .div19{ position: relative; z-index: 1; } /* Span frames must NOT paint on top of content */ .div22, .div23{ background: transparent !important; /* no fill */ position: relative; z-index: 0; /* behind the white cards */ pointer-events: none; /* never intercept clicks */ } /* Optional faint outline for those frames */ .div22::before, .div23::before{ content: ""; position: absolute; inset: 0; border: 1px solid #e6e6e6; pointer-events: none; z-index: -1; } /* Right sidebar column inherits the gray backdrop from .parent */ .div19{ background: transparent; } /* ========================================================= FINAL OVERRIDES FOR "Characters without space" TITLE SIZE - Small screens: larger (1.9rem) - ≥550px screens: smaller (1.6rem) Place LAST so it wins the cascade, even with caching. ========================================================= */ @media (max-width: 549.98px){ .parent .div11{ font-size: 1.9rem !important; line-height: 1.2 !important; height: var(--bottom-title-h) !important; padding: 2px 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } } @media (min-width: 550px){ .parent .div11{ font-size: 1.6rem !important; line-height: 1.15 !important; height: var(--bottom-title-h) !important; padding: 2px 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } } /* ========================================================= NEWSLETTER WIDTH OVERRIDES (fix placeholder clipping) Put at the very end so these win the cascade ========================================================= */ .newsletter .form{ width: 100%; max-width: 720px; /* widen the whole form */ margin-inline: auto; /* center it */ display: flex; /* ensure flex context (already present, but safe) */ } .newsletter .form-input{ flex: 1 1 auto; /* grow to fill */ min-width: 0; /* allow shrinking without clipping text */ } .newsletter .form-btn{ flex: 0 0 auto; width: 7rem; /* fixed so input keeps most space */ margin-left: -0.5rem; /* keeps the “single border” look */ } /* Give a bit more room on medium+ screens */ @media (min-width: 900px){ .newsletter .form{ max-width: 820px; } } /* On very small screens, make the button a touch narrower */ @media (max-width: 420px){ .newsletter .form-btn{ width: 5.6rem; } } /* ========================================================= Popular Tools tag text: increase size responsively (Instagram Character Counter, SMS Character Counter, etc.) ========================================================= */ .popular-tags-container .tag-name{ font-size: 1.8rem; /* up slightly for mobile */ font-weight: 600; /* a touch bolder for readability */ line-height: 1.15; text-align: center; } @media (min-width: 700px){ .popular-tags-container .tag-name{ font-size: 2rem; } } @media (min-width: 1150px){ .popular-tags-container .tag-name{ font-size: 2.2rem; } }