:root { --w: #fff;
--b: #000;
--greyblue: #37424e;
--grey: #4d4d4d;
--grey-mid: #838383;
--grey-light: #f5f5f5;
--grey-dark: #353535;
--main-bg: #f6f9fc;
--test-bg: #fcfcfc;
--c-testenglish: #50af31;
--b-shadow: rgba(60, 64, 67, .3) 0 1px 2px 0, rgba(60, 64, 67, .15) 0 2px 6px 2px;
--b-shadow-hover: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
--c-questionable: #7446a8;
--c-questionable-bg: #f7f1fb;
--c-questionable-bg-end: #f2eaf8; --c-Dictionary: #b1466a;
--c-Dictionary-light: #d9b9c4;
--c-Dictionary-tint: #f5eef0;
--c-Dictionary-ink: #34141f; --c-wrong: #e5252d;
--c-wrong-bg: #fdf1f3;
--c-wrong-bg-end: #fbeff2;
--c-right: #0a8f4a;
--c-right-bg: #eef7f3;
--c-right-bg-end: #ecf4f0;
--radius: 4px;
--radius-card: 15px;
--navbar-h: 58px;
} *, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--main-bg);
color: var(--b);
font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--c-Dictionary); }
:where(a, button, input, [tabindex]):focus-visible {
outline: 3px solid var(--c-Dictionary);
outline-offset: 2px;
border-radius: 2px;
}
h1, h2, h3, h4 { text-wrap: balance; }
:is(h1, h2, h3, h4, p):empty { display: none; }
.screen-reader-text {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden; clip-path: inset(50%);
white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100000;
background: var(--w); color: var(--c-Dictionary);
padding: 12px 18px; font-weight: 600; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; } #navbar {
position: sticky; top: 0; z-index: 9999999;
height: 58px;
background: #313b49f7;
box-shadow: 0 1px 13px 0 #0000004d;
transition: all .5s ease-in-out;
} body.home #navbar {
position: fixed; top: 0; left: 0; width: 100%;
background: transparent;
box-shadow: none;
opacity: 1; visibility: visible;
transition: all .3s ease-in-out;
}
body.home.scrollDown #navbar {
background: #293039ed;
box-shadow: 0 1px 13px 0 #0000004d;
}
body.home.scrollDown.toDOWN #navbar { z-index: -1; opacity: 0; visibility: hidden; }
body.home.scrollDown.toUP #navbar   { opacity: 1; visibility: visible; }
#logo-top {
max-width: 8em; position: absolute; left: 10px; top: 20px;
padding: 0; z-index: 999999999; line-height: 0;
}
#logo-top img { display: block; max-width: 100%; height: auto; }  #o-hmenu {
box-sizing: content-box;
cursor: pointer; height: 2em; width: 2em;
background: #fff0; border-radius: 20px;
padding: 4px 0 4px 10px; transition: 1s all;
}
.hmenu-btn { background: none; border: 0; padding: 0; cursor: pointer; display: block; width: 100%; }
.hamburger-lines {
display: flex; flex-direction: column; justify-content: space-between;
height: 23px; width: 35px; max-width: 100%;
}
.hamburger-lines .line {
display: block; height: 4px; width: 100%;
border-radius: 10px; background: var(--c-testenglish);
}
.hamburger-lines .line1 { transform-origin: 4% 0%;   transition: transform .4s ease-in-out; }
.hamburger-lines .line2 { transition: transform .2s ease-in-out; }
.hamburger-lines .line3 { transform-origin: 0% 100%; transition: transform .4s ease-in-out; } #navbar-ul {
position: absolute; left: 0; top: 10vh;
width: 100vw; height: 100vh;
display: flex; flex-direction: column;
align-items: center; justify-content: flex-start;
background: #000000d1;
list-style: none; margin: 0; padding: 10vh 0 0;
opacity: 0; visibility: hidden;
}
#navbar-ul li { padding: 10px 0; width: 100%; } #navbar-ul li.is-active { width: auto; }
#navbar-ul li > a {
display: block; position: relative; z-index: 9999;
color: var(--w); text-decoration: none; cursor: pointer;
font-size: 1.5em; font-weight: 700; line-height: normal;
padding: 0 0 8px; border-radius: 4px; min-height: auto;
} .dropdown-menu {
position: absolute; visibility: hidden; opacity: 0;
display: flex; flex-direction: column; overflow: hidden;
background-color: var(--w); border-radius: 20px;
margin: 10px 0 0; padding: 0;
box-shadow: 0 2px 16px 1px #474747db;
}
.o-a:after {
content: ""; position: absolute; width: 0; height: 0;
border-color: transparent transparent #ffffff transparent;
border-style: solid; border-width: 0 14px 14px 14px;
left: 26px; top: 36px; z-index: 9998;
opacity: 0; visibility: hidden; transition: all .2s ease-in-out;
}
.is-active .o-a:after { display: none; opacity: 1; visibility: visible; }
a.dropdown-item {
border-bottom: 1px solid #fff0; color: var(--w);
font-weight: 400; font-size: 1em; line-height: normal;
padding: 20px 2em; text-decoration: none;
}
a.dropdown-item:hover { color: var(--grey); background: var(--w); transition: all .15s ease-in-out; }
.dropdown-menu a span { display: inline-block; color: var(--grey); margin: 0 18px 0 0; font-size: 12px; }
.dropdown-menu a:before {
content: ""; position: absolute; width: 35px; height: 35px;
left: 22.5px; margin: -7px 0 0 1px;
background-repeat: no-repeat; background-size: contain;
} .o-navbar .o-a:hover { color: var(--sec); }
.o-navbar .dropdown-menu a { color: var(--grey-mid); }
.o-navbar .dropdown-menu a span { color: var(--sec); }
.o-navbar .dropdown-menu a:hover { color: var(--sec); background-color: var(--grey-light); }
.o-navbar .dropdown-menu a:before { background-image: var(--sec-ico); } #o-vocabulary .dropdown-menu a:before   { margin: -10px 0 0 0; }
#o-useofenglish .dropdown-menu a:before { margin: -3px 0 0 2px; }
#o-writing .dropdown-menu a:before      { margin: -6px 0 0 -5px; } #o-dictionary .o-a,
#o-dictionary .o-a:hover {
background: transparent;
border-radius: 0;
color: var(--w);
text-decoration-line: underline;
text-decoration-color: var(--c-Dictionary);
text-decoration-thickness: 3px;
text-underline-offset: 7px;
} .hmenuON #o-hmenu { background: 0; transition: 1s all; }
.hmenuON .hamburger-lines .line1 { transform: rotate(40deg); }
.hmenuON .hamburger-lines .line2 { transform: scaleY(0); }
.hmenuON .hamburger-lines .line3 { transform: rotate(-42deg); }
.hmenuON, .hmenuON body { overflow: hidden; } .hmenuON #navbar {
position: fixed; top: 0; left: 0;
width: 100vw; height: 100dvh;
overflow: hidden;
}
.hmenuON #navbar-top { background: #313b49f7; } body.home.hmenuON #navbar {
background: #313b49f7;
z-index: 9999999;
opacity: 1; visibility: visible;
} .hmenuON #navbar-ul {
position: fixed; left: 0; top: 58px;
width: 100vw; height: calc(100dvh - 58px);
background: #313b49f7; list-style: none;
opacity: 1; visibility: visible;
overflow-y: auto; overscroll-behavior: contain;
padding: 3vh 0 12vh; margin: 0; }
.hmenuON .o-a { text-align: center; }
.hmenuON .is-active .o-a { padding: 0 0 2px; } .hmenuON .is-active .dropdown-menu {
position: relative; opacity: 1; visibility: visible;
background-color: var(--w); box-shadow: none;
margin: 0; padding: 0; transition: none;
border-radius: 10px; width: 100%; font-size: .8em; z-index: 9999;
}
.hmenuON .dropdown-menu a { pointer-events: none; }
.hmenuON .is-active .dropdown-menu a { font-size: 1.4em; padding: 16px 32px; pointer-events: auto; }
.hmenuON .dropdown-menu a:before {
content: ""; position: absolute; width: 55px; height: 44px;
left: 19px; margin: -8px 0 0 1px;
background-repeat: no-repeat; background-size: contain;
} .hmenuON #o-dictionary .o-a {
display: inline-block; padding: 8px 16px; border-radius: 4px;
}
.hmenuON #o-dictionary { text-align: center; } #navbar-ul-r {
position: absolute; top: 12px; right: 1em;
display: flex; flex-direction: row;
justify-content: center; align-items: stretch; align-content: flex-end;
list-style: none; padding: 0; margin: 0;
}
#navbar-ul-r li { margin: 0 0 0 6px; display: flex; justify-content: center; align-items: center; }
#o-login .nav-btn {
background: none; border: 2px solid; border-color: var(--w) !important;
border-radius: 10px; color: var(--w); text-decoration: none;
font-size: 1em; font-weight: 400; line-height: normal; padding: 6px 6px;
} #o-search .nav-btn {
box-sizing: content-box;
border-radius: 10px; border: 2px solid #fff0;
cursor: pointer; height: 2.3em; padding: 0; width: auto;
}
#o-search form {
position: absolute; right: 0; top: 40px;
flex-direction: row; opacity: 0; visibility: hidden;
transition: all .3s ease-in-out;
}
#o-search form #search-input-txt {
background: var(--w); border: 0; border-radius: 10px;
box-shadow: var(--b-shadow);
padding: 10px; text-align: left; top: 3em; right: 0;
width: 1em; font-size: 16px; transition: all .3s ease-in-out;
}
#o-search form #search-input-txt::placeholder { color: var(--grey-mid); font-size: 16px; }
#o-search form #search-input-txt:focus { background: var(--w); outline: none; color: var(--grey); }
.searchON #o-search form { opacity: 1; visibility: visible; display: inline-block; }
.searchON #o-search form #search-input-txt { width: 16em; transition: all .3s ease-in-out; }  @media (min-width: 22.5em) {
#logo-top { max-width: 12em; left: 0; top: 0; padding: 18px 8px 2px 10px; }
#navbar-ul-r { right: 0; }
#navbar-ul-r li { margin: 0 4px; }
#o-hmenu { padding: 4px 10px; }
#o-search form { top: 40px; right: 40px; }
}
@media (min-width: 37.5em) {
#navbar-ul-r li { margin: 0 0 0 1em; }
} @media (min-width: 1120px) {
#logo-top { max-width: 174px; left: 10px; top: 0; }
#navbar-top { display: flex; align-items: center; justify-content: center; padding: 0; }
#o-hmenu { display: none !important; }
#navbar-ul {
position: relative; left: 0; top: 0;
display: flex; flex-direction: row;
align-items: flex-end; justify-content: center;
height: auto; padding: 4px 0 0;
background: none; opacity: 1; visibility: visible;
list-style: none; transition: .5s all;
}
#navbar-ul li { width: auto; }
#navbar-ul li > a {
color: var(--w); cursor: pointer; font-size: .9em; font-weight: 700;
padding: 8px; margin: 0 6px; border-radius: 999px;
position: relative; z-index: 9999;
} .o-navbar.is-active .dropdown-menu {
display: flex; position: absolute;
opacity: 1; visibility: visible; transition: .4s all;
}
a.dropdown-item { transition: .4s all; }
#navbar-ul-r { right: 1em; top: 10px; }
#o-search form { top: 40px; right: 70px; }
#o-vocabulary .dropdown-menu a:before { margin: -7px 0 0 1px; }
} @media (min-width: 1280px) {
#logo-top { max-width: 14em; left: 0; top: 0; padding: 14px 1em; }
#navbar-ul { padding: 14px 0 0; }
#navbar-ul li { padding: 0 0 10px; }
#navbar-ul li > a { font-size: 1em; font-weight: 600; } .o-navbar.is-active .dropdown-menu { transform: translateY(-10px); }
a.dropdown-item { font-size: .9375em; padding: 19px 26px; }
.dropdown-menu a:before { left: 16.5px; }
#o-login .nav-btn { padding: 4px 6px; font-weight: 600; }
}  .te-top-ad-slot {
order: 0;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
align-self: center;
width: min(320px, 100vw);
max-width: none;
height: 50px;
min-height: 50px;
margin: 0 0 14px 50%;
transform: translateX(-50%);
overflow: hidden;
contain: layout paint;
}
.te-top-ad-unit {
flex: 0 0 auto;
align-items: center;
justify-content: center;
max-width: 100%;
overflow: hidden;
}
.te-top-ad-network {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
}
.te-top-ad-unit--desktop {
display: none;
}
.te-top-ad-unit--mobile {
display: flex;
width: min(320px, 100vw);
height: 50px;
min-height: 50px;
}
@media (min-width: 850px) {
.te-top-ad-slot {
width: 100%;
height: 90px;
min-height: 90px;
margin: 0 auto 14px;
transform: none;
}
.te-top-ad-unit--mobile {
display: none;
}
.te-top-ad-unit--desktop {
display: flex;
width: min(100%, 728px);
height: 90px;
min-height: 90px;
}
}
#page-header {
display: flex;
flex-direction: column;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 18px 16px 0;
}
.page-title {
order: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin: 18px 0 12px;
padding: 0 0 18px;
background: transparent;
border-bottom: 1px solid #d8e2ea;
color: #101b31;
font-size: 34px;
font-weight: 700;
line-height: 1.08;
letter-spacing: -.02em;
text-transform: uppercase;
text-align: left;
}
.page-title-sub {
text-transform: none;
font-weight: 400;
font-size: 13px;
letter-spacing: normal;
color: var(--grey-mid);
}
.is-entry .page-title,
.is-search .page-title,
.is-404 .page-title,
.is-archive .page-title {
text-transform: none;
letter-spacing: -.025em;
}
.is-about-dictionary .page-title {
text-transform: none;
letter-spacing: -.025em;
}
.is-entry .page-title {
width: calc(100% - 316px);
font-size: 46px;
}
#breadcrumbs {
order: 1;
display: flex;
align-items: center;
width: 100%;
min-height: 48px;
padding: 11px 16px;
background: linear-gradient(90deg, #f1f5f8, #edf3f7);
border: 1px solid rgba(55, 66, 78, .04);
border-radius: 11px;
color: #314258;
font-size: 15px;
font-weight: 400;
line-height: 1.35;
overflow: hidden;
max-width: 100%;
text-wrap: wrap;
} #breadcrumbs .breadcrumb-home {
display: block;
flex: 0 0 22px;
width: 22px;
height: 24px;
border-radius: 5px;
background: center / 17px 17px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 8.5 10 2l8 6.5v9h-5.5v-6h-5v6H2z' fill='%23b1466a'/%3E%3C/svg%3E");
transition: background-color .16s ease;
}
#breadcrumbs .breadcrumb-home:hover {
background-color: rgba(177, 70, 106, .09);
text-decoration: none;
}
#breadcrumbs a {
color: var(--c-Dictionary);
font-weight: 700;
text-decoration: none;
}
#breadcrumbs a:hover { text-decoration: underline; }
#breadcrumbs .breadcrumb-home:hover { text-decoration: none; }
#breadcrumbs .sep {
display: inline-block;
flex: 0 0 7px;
width: 7px;
height: 7px;
margin: 0 7px;
border-top: 1px solid #5d7086;
border-right: 1px solid #5d7086;
color: transparent;
font-size: 0;
font-weight: 400;
transform: rotate(45deg);
}
#breadcrumbs .breadcrumb_last {
color: var(--grey-mid);
font-weight: 400;
} .az-band {
--az-ink: #232a32;
--az-text: #37424e;
--az-muted: #6c757f;
--az-bg: #f7faff;
--az-line: #ecebf3;
--az-line-strong: #cdd3da;
--az-wine: var(--c-Dictionary);
max-width: 1100px;
margin: 16px auto;
padding: 0 16px;
font-weight: 400; }
.az-list {
display: flex; flex-wrap: wrap; gap: 6px;
margin: 0; padding: 20px 24px; list-style: none;
background: var(--w); border-radius: var(--radius-card);
box-shadow: var(--b-shadow); }
.az-letter {
position: relative;
display: grid; place-items: center;
width: 36px; height: 36px;
border-radius: 8px;
background: var(--az-bg);
box-shadow: inset 0 0 0 1px var(--az-line);
color: var(--az-text);
font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none;
transition: background-color .15s, color .15s, box-shadow .15s;
}
a.az-letter:hover,
a.az-letter:focus-visible { background: var(--az-wine); box-shadow: none; color: var(--w); }
a.az-letter:focus-visible { outline: 3px solid var(--c-Dictionary-light); outline-offset: 2px; }
.az-letter.is-current { background: var(--az-wine); box-shadow: none; color: var(--w); }
.az-letter.is-empty { background: transparent; box-shadow: none; color: var(--az-line-strong); cursor: default; }
.az-letter.az-all {
width: auto; padding: 0 16px;
background: var(--az-ink); box-shadow: none; color: var(--w);
}
a.az-letter.az-all:hover,
a.az-letter.az-all:focus-visible,
.az-letter.az-all.is-current { background: var(--az-wine); } .az-count {
position: absolute; inset-block-start: -7px; inset-inline-end: -7px;
z-index: 1;
min-width: 16px;
background: var(--az-ink); color: var(--w);
font-size: 9px; font-weight: 600; line-height: 1; text-align: center;
padding: 3px 4px; border-radius: 4px;
opacity: 0; transition: opacity .15s;
pointer-events: none;
font-variant-numeric: tabular-nums;
}
.az-letter:hover .az-count,
.az-letter:focus-visible .az-count { opacity: 1; } .az-band.az-aside {
max-width: none; margin: 0;
padding: 20px; }
.az-aside .az-list { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.az-head {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: 4px 8px;
margin-bottom: 16px;
}
.az-title { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--az-ink); }
.az-total { font-size: 14px; color: var(--az-muted); } .az-box {
padding: 24px;
background: var(--w); border-radius: var(--radius-card);
box-shadow: var(--b-shadow);
}
.az-box .az-list { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.az-titled .az-title { font-size: 20px; } .az-letter[hidden] { display: none !important; } .wrap { margin: 0 auto; padding-inline: 16px; padding-block: 0 8px; }
.maxW1100 { max-width: 1100px; }
.maxW900 { max-width: 900px; }
.card {
background: var(--w);
border-radius: var(--radius-card);
box-shadow: var(--b-shadow);
padding: 22px 24px;
margin-bottom: 16px;
} .home-search {
max-width: 620px;
margin: 16px auto 16px;
padding-inline: 16px;
}
.dict-search { display: flex; gap: 8px; }
.dict-search-field {
flex: 1; min-width: 0;
font: inherit; font-weight: 400;
padding: 11px 14px;
border: 1px solid #dbe3e6; border-radius: var(--radius);
background: var(--w); color: var(--b);
}
.dict-search-field::placeholder { color: var(--grey-mid); }
.dict-search-submit {
font: inherit; font-weight: 500;
background: var(--c-Dictionary); color: var(--w);
border: 1px solid transparent; border-radius: var(--radius);
padding: 11px 20px; cursor: pointer;
}
.dict-search-submit:hover { background: var(--grey); }
.page-primary h2,
.page-primary h3,
.page-primary h4 { color: var(--c-Dictionary); }
.page-primary { color: var(--c-Dictionary-ink); font-weight: 400; }
.page-primary h3 { font-size: 19px; font-weight: 600; margin: 26px 0 10px; }
.page-primary h3:first-child { margin-top: 0; }
.page-primary p { margin: 0 0 1em; max-width: 68ch; line-height: 1.6; }
.page-primary p:last-child { margin-bottom: 0; } .page-primary span[style*="#000000"] { color: inherit !important; } .about-page-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 16px;
align-items: start;
}
.about-page-primary,
.about-page-aside { min-width: 0; }
.about-page-aside {
display: grid;
gap: 12px;
align-content: start;
}
.about-page-aside .az-band { width: 100%; } .home .page-primary .wp-block-buttons {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 0 0 24px; padding: 0; list-style: none;
}
.home .page-primary .wp-block-button { margin: 0; }
.home .page-primary .wp-block-buttons:has(a[href*="/category/"]) .wp-block-button__link {
min-width: 34px; height: 34px;
display: grid; place-items: center;
padding: 0 9px;
border: 0; border-radius: var(--radius);
background: var(--c-Dictionary-tint); color: var(--c-Dictionary);
font-size: 14px; font-weight: 500; text-decoration: none;
}
.home .page-primary .wp-block-buttons:has(a[href*="/category/"]) .wp-block-button__link:hover {
background: var(--c-Dictionary-light);
} .home .page-primary .wp-block-buttons:not(:has(a[href*="/category/"])) .wp-block-button__link {
display: inline-block;
background: var(--c-Dictionary); color: var(--w);
border: 1px solid transparent; border-radius: var(--radius);
padding: 11px 20px; font-size: 16px; font-weight: 500; text-decoration: none;
}
.home .page-primary .wp-block-buttons:not(:has(a[href*="/category/"])) .wp-block-button__link:hover {
background: var(--grey);
} .category-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 16px;
align-items: start;
}
.category-primary {
grid-column: 1;
grid-row: 1;
min-width: 0;
}
.category-aside {
grid-column: 2;
grid-row: 1;
display: grid;
gap: 12px;
min-width: 0;
}
.category-aside .az-band { width: 100%; }
.dict-index {
margin: 0; padding: 0; list-style: none;
columns: 3 150px; column-gap: 28px;
}
.dict-index li { break-inside: avoid; margin: 0 0 3px; }
.dict-index a {
display: block;
padding: 6px 10px;
border-left: 3px solid transparent;
border-radius: 6px;
color: var(--c-Dictionary-ink); text-decoration: none;
font-size: 15px; font-weight: 400;
transition: background-color .15s, border-color .15s, color .15s;
}
.dict-index a:hover {
border-left-color: var(--c-Dictionary);
background: var(--c-Dictionary-tint);
color: var(--c-Dictionary);
} .index-filter { margin: 0 0 16px; }
.index-filter-field {
width: 100%; max-width: 420px;
font: inherit; font-weight: 400; font-size: 15px;
padding: 10px 13px 10px 42px;
border: 1px solid #dbe3e6; border-radius: var(--radius);
background-color: var(--test-bg);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5' fill='none' stroke='%236c7885' stroke-width='1.8'/%3E%3Cpath d='m12.5 12.5 4 4' fill='none' stroke='%236c7885' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
background-position: 14px center;
background-repeat: no-repeat;
background-size: 18px 18px;
color: var(--b);
}
.index-filter-field::placeholder { color: var(--grey-mid); }
.index-filter-status {
margin: 7px 0 0; min-height: 1.2em;
font-size: 13px; color: var(--grey-mid); font-weight: 400;
}
.dict-index li[hidden] { display: none !important; } .entry-shell {
padding-top: 18px;
}
.entry-shell > #breadcrumbs {
margin-bottom: 18px;
}
.entry-layout {
display: grid; grid-template-columns: minmax(0, 1fr) 300px;
gap: 16px;
align-items: start;
}
.entry-primary-column {
min-width: 0;
} .entry-title-row {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
padding: 0 0 18px;
border-bottom: 1px solid #d8e2ea;
}
.entry-title-row .page-title {
order: 0;
flex: 0 1 auto;
width: auto;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.entry-pronunciation {
order: 1;
flex: 0 0 46px;
display: grid;
place-items: center;
width: 46px;
height: 46px;
padding: 3px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--c-Dictionary);
cursor: pointer;
transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.entry-pronunciation[hidden] { display: none; }
.entry-pronunciation svg {
display: block;
width: 38px;
height: 38px;
overflow: visible;
}
.entry-pronunciation .pronunciation-speaker {
fill: currentColor;
}
.entry-pronunciation .pronunciation-wave {
fill: none;
stroke: currentColor;
stroke-width: 2.6;
stroke-linecap: round;
}
.entry-pronunciation:hover {
background: var(--c-Dictionary-tint);
color: var(--c-Dictionary);
}
.entry-pronunciation:active { transform: scale(.95); }
.entry-pronunciation:focus-visible {
outline: 3px solid var(--c-Dictionary-light);
outline-offset: 2px;
}
.entry-pronunciation.is-speaking .pronunciation-wave {
animation: te-dict-sound-wave .9s ease-in-out infinite alternate;
}
.entry-pronunciation.is-speaking .pronunciation-wave-two {
animation-delay: .15s;
}
@keyframes te-dict-sound-wave {
from { opacity: .3; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.entry-pronunciation,
.entry-pronunciation .pronunciation-wave { transition: none; animation: none; }
}
.entry-aside { display: grid; gap: 12px; }
.aside-box {
background: var(--w); border-radius: var(--radius-card);
box-shadow: var(--b-shadow); padding: 16px 18px;
}
.aside-title {
margin: 0 0 10px;
font-size: 11px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--grey-mid);
}
.aside-list { margin: 0; padding: 0; list-style: none; }
.aside-list a {
display: block; padding: 5px 0;
color: var(--c-Dictionary-ink); text-decoration: none; font-size: 15px;
}
.aside-list a:hover { color: var(--c-Dictionary); text-decoration: underline; }
.aside-more {
display: inline-block; margin-top: 10px;
font-size: 14px; font-weight: 500; color: var(--c-Dictionary); text-decoration: none;
}
.aside-more:hover { text-decoration: underline; }
.aside-search .dict-search { flex-direction: column; }
.entry-tags {
margin-top: 26px; padding-top: 16px;
border-top: 1px solid var(--grey-light);
font-size: 14px; color: var(--grey-mid);
}
.entry-tags a { color: var(--c-Dictionary); }
.entry-tags-label { font-weight: 500; } .entry-body {
color: var(--c-Dictionary-ink);
font-weight: 400;
font-size: 16.5px;
line-height: 1.62;
}
.entry-body > :first-child { margin-top: 0; }
.entry-body p { margin: 0 0 14px; max-width: 66ch; }
.entry-body strong, .entry-body b { font-weight: 600; color: inherit; }
.entry-body a { color: var(--c-Dictionary); }
.entry-body p:has(+ ul),
.entry-body p:has(+ ol) {
margin-bottom: 6px;
} .entry-body h2.sense {
display: flex; align-items: center; gap: 16px;
margin: 36px 0 16px;
padding: 4px 0;
font-size: 0;
}
.entry-body h2.sense::after {
content: ""; flex: 1; height: 1px;
background: #d5dde5;
}
.entry-body h2.sense:first-child { margin-top: 0; }
.sense-num {
flex: none;
min-width: 20px;
width: auto;
height: auto;
border: 0;
border-radius: 0;
background: transparent;
color: #101b31;
font-size: 24px;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
} .entry-body h2:not(.sense),
.entry-body h3 {
font-size: 18px; font-weight: 600; color: var(--c-Dictionary);
margin: 28px 0 10px;
} .entry-body p:has(> span[style*="#ff0000"]),
.entry-body p:has(> span[style*="#FF0000"]),
.entry-body p:has(> .example-questionable) {
display: grid;
gap: 3px;
margin: 0 0 16px;
max-width: 66ch;
}
.entry-body p:has(> span[style*="#ff0000"]) br,
.entry-body p:has(> span[style*="#FF0000"]) br,
.entry-body p:has(> .example-questionable) br {
display: none;
} .entry-body span[style*="#ff0000"],
.entry-body span[style*="#FF0000"],
.entry-body span[style*="#008000"],
.entry-body span[style*="#008800"],
.entry-body span[style*="#339966"],
.entry-body .example-questionable {
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
border-left: 4px solid;
border-radius: 7px;
padding: 8px 13px;
color: var(--c-Dictionary-ink) !important;
} .entry-body span[style*="#ff0000"]::before,
.entry-body span[style*="#FF0000"]::before,
.entry-body span[style*="#008000"]::before,
.entry-body span[style*="#008800"]::before,
.entry-body span[style*="#339966"]::before,
.entry-body .example-questionable::before {
content: "";
display: inline-block;
flex: 0 0 26px;
width: 26px;
height: 26px;
border-radius: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: 26px 26px;
} .entry-body span[style*="#ff0000"],
.entry-body span[style*="#FF0000"] {
background: linear-gradient(90deg, var(--c-wrong-bg), var(--c-wrong-bg-end));
border-left-color: var(--c-wrong);
}
.entry-body span[style*="#ff0000"]::before,
.entry-body span[style*="#FF0000"]::before {
background-color: var(--c-wrong);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Cpath d='M6 6l7 7M13 6l-7 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
} .entry-body span[style*="#008000"],
.entry-body span[style*="#008800"],
.entry-body span[style*="#339966"] {
background: linear-gradient(90deg, var(--c-right-bg), var(--c-right-bg-end));
border-left-color: var(--c-right);
}
.entry-body span[style*="#008000"]::before,
.entry-body span[style*="#008800"]::before,
.entry-body span[style*="#339966"]::before {
background-color: var(--c-right);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Cpath d='M5 9.5l3 3L14.5 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
} .entry-body .example-questionable {
background: linear-gradient(90deg, var(--c-questionable-bg), var(--c-questionable-bg-end));
border-left-color: var(--c-questionable);
}
.entry-body .example-questionable::before {
background-color: var(--c-questionable);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Cpath d='M6.8 6.8a2.8 2.8 0 1 1 3.4 2.7c-.9.35-1.4 1.05-1.4 1.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8.8' cy='14.4' r='1' fill='%23fff'/%3E%3C/svg%3E");
} .entry-body span[style*="#ff6600"] { font-weight: 500; } .entry-body p.see-also {
display: block;
margin: 22px 0 6px;
padding: 0;
max-width: 66ch;
background: transparent;
color: #737b88;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
}
.entry-body p.see-also::before {
content: "\2192";
display: inline-block;
margin-right: 7px;
color: inherit;
font-weight: 400;
}
.entry-body p.see-also a {
color: var(--c-Dictionary);
font-weight: 600;
text-decoration-line: underline;
text-decoration-color: var(--c-Dictionary-light);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color .16s ease, text-decoration-color .16s ease;
}
.entry-body p.see-also a:hover {
color: var(--c-Dictionary-ink);
text-decoration-color: var(--c-Dictionary);
} .entry-body table {
border-collapse: collapse; width: 100%;
margin: 0 0 18px; font-size: 15.5px;
display: block; overflow-x: auto;
}
.entry-body table td, .entry-body table th {
border: 1px solid var(--c-Dictionary-light);
padding: 12px 14px; vertical-align: top; text-align: left;
}
.entry-body table th { background: var(--c-Dictionary-tint); font-weight: 600; }
.entry-body iframe { max-width: 100%; border: 0; border-radius: var(--radius); }
.entry-body ul, .entry-body ol { margin: 0 0 16px; padding-left: 1.35em; max-width: 66ch; }
.entry-body li { margin-bottom: 5px; line-height: 1.45;}
.entry-body li::marker {color: var(--c-Dictionary);}
.entry-body blockquote {
margin: 0 0 16px; padding: 2px 0 2px 16px;
border-left: 3px solid var(--c-Dictionary-light); color: var(--grey);
}
.entry-body img { border-radius: var(--radius); } #sharing-buttons {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin: 30px 0 0; padding-top: 22px;
border-top: 1px solid var(--grey-light);
}
.sharing-title {
flex-basis: 100%; margin: 0 0 2px;
font-size: 11px; font-weight: 600; letter-spacing: .1em;
text-transform: uppercase; color: var(--grey-mid);
}
.resp-sharing-button__link { text-decoration: none; color: var(--w);
font-size: 13px;
}
.resp-sharing-button {
display: flex; align-items: center;
border-radius: 20px; padding: 10px 10px 10px;
transition: background-color .15s ease-out;
}
.resp-sharing-button__icon { display: inline-flex; }
.resp-sharing-button__icon svg { display: block; width: 18px; height: 18px; fill: var(--w); }
.resp-sharing-button span {
display: inline-block; color: var(--w); height: 16px;
font-size: 0; font-weight: 400; opacity: 0;
transition: opacity .25s ease-out, font-size .25s ease-out, padding .25s ease-out;
}
.resp-sharing-button__link:hover span,
.resp-sharing-button__link:focus-visible span { font-size: 13px; opacity: 1; padding-left: 8px; }
.resp-sharing-button--facebook { background-color: #3b5998; }
.resp-sharing-button--facebook:hover { background-color: #2d4373; }
.resp-sharing-button--twitter  { background-color: #111; }
.resp-sharing-button--twitter:hover { background-color: #000; }
.resp-sharing-button--linkedin { background-color: #0077b5; }
.resp-sharing-button--linkedin:hover { background-color: #046293; }
.resp-sharing-button--whatsapp { background-color: #25d366; }
.resp-sharing-button--whatsapp:hover { background-color: #1da851; }
.resp-sharing-button--email    { background-color: #777; }
.resp-sharing-button--email:hover { background-color: #5e5e5e; } .search-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 16px;
align-items: start;
}
.search-primary,
.search-aside { min-width: 0; }
.search-aside {
display: grid;
gap: 12px;
align-content: start;
}
.search-aside .az-band { width: 100%; }
.search-box { padding: 18px 20px; }
.search-results { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.search-hit {
background: var(--w); border-radius: var(--radius-card);
box-shadow: var(--b-shadow);
overflow: hidden;
transition: background-color .15s, box-shadow .15s;
}
.search-hit-title {
display: block;
padding: 14px 20px;
font-size: 18px; font-weight: 600; color: var(--c-Dictionary); text-decoration: none;
}
.search-hit:hover {
background: var(--c-Dictionary-tint);
box-shadow: 0 4px 14px rgba(23, 34, 48, .12);
}
.search-hit-title:focus-visible {
outline: 3px solid var(--c-Dictionary-light);
outline-offset: -3px;
}
.empty-state { text-align: center; padding: 34px 24px; }
.empty-state h2 { margin: 0 0 10px; font-size: 20px; font-weight: 600; color: var(--c-Dictionary); }
.empty-state p { margin: 0 auto 18px; max-width: 52ch; color: var(--grey); font-weight: 400; }
.empty-state .dict-search { max-width: 480px; margin: 0 auto; }
.not-found-message p { margin-bottom: 0; }
.pagination { display: flex; justify-content: center; margin: 8px 0 20px; }
.pagination .nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers {
min-width: 34px; height: 34px; display: grid; place-items: center;
border-radius: var(--radius); text-decoration: none;
background: var(--w); color: var(--c-Dictionary); box-shadow: var(--b-shadow);
font-size: 14px; font-weight: 500; padding: 0 8px;
}
.pagination .page-numbers.current { background: var(--c-Dictionary); color: var(--w); } .site-main { flex: 1 0 auto; } #footer {
flex: none;
font-size: 18px;
background: var(--greyblue); color: var(--w);
margin-top: 30px; padding: 20px 0;
display: flex; flex-direction: column; align-items: center;
transition: all .3s;
}
#footer-menu {
width: 100%; max-width: 1280px; margin: 0 auto;
display: flex; flex-direction: column-reverse; align-items: stretch;
}
#footer-menu .grid-col {
padding: 0 1em 2em;
border-bottom: 1px solid #5d7799;
text-align: center;
}
#footer-logo.grid-col { border-bottom: none; }
#footer ul { list-style: none; margin: 0; padding: 0; } #footer ul li { padding: 10px 0 0; line-height: normal; }
#footer h5 {
color: var(--w); font-size: 14.94px; font-weight: 700;
line-height: 1; margin: 24.95px 0 0;
}
#footer a { color: #5d7799; font-size: 14px; font-weight: 400; text-decoration: none; }
#footer a:hover { color: var(--c-Dictionary-light); transition: all .6s; } #logo-bot { max-width: 252px; margin: 0 auto; padding: 14px 36px; line-height: normal; }
#logo-bot img { width: 100%; max-width: 180px; height: auto; }
#footer-copyright {
text-align: center; padding: 42px 12px 0; font-size: 13px;
display: flex; flex-direction: column; justify-content: flex-end; line-height: 1.5;
}
#footer-copyright a { color: var(--w); font-size: 13px; }
#footer-copyright a:hover { color: var(--c-Dictionary-light); }
.footer-cta {
display: flex; flex-direction: row;
justify-content: space-around; align-items: center;
margin-top: 36px;
} .footer-cta.social-icons { justify-content: flex-start; margin-bottom: 18px; }
.footer-cta.social-icons a { flex: 1 1 auto; line-height: 0; }
.footer-cta.social-icons img { box-sizing: content-box;
width: 20px; height: 20px;
background: #5d779900; border-radius: 4px; padding: 5px; transition: all .3s;
}
.footer-cta.social-icons a:hover img { background: var(--c-Dictionary); transition: all .3s; }
.footer-btn-cta {
display: flex; align-items: center; justify-content: center;
min-height: 37px; padding: 2.5px 20px; margin: 10px 0;
border: 2px solid var(--w); border-radius: 6px;
color: var(--w) !important; font-size: 14px; font-weight: 700 !important;
letter-spacing: .01em; line-height: 1.2em; text-align: center;
transition: background .25s, transform .25s, border .25s, color .25s;
}
.footer-btn-cta:hover { background: var(--c-Dictionary); color: var(--w) !important; } .footer-btn-ico { gap: 8px; white-space: nowrap; }
.footer-btn-ico img { display: block; width: 18px; height: 18px; flex: none; } #footer-cta .footer-cta { flex-direction: column; align-items: stretch; } @media (min-width: 600px) {
#footer-menu { flex-direction: row; flex-wrap: wrap; }
#footer-menu .grid-col { width: 50%; }
}
@media (min-width: 800px) {
#footer-menu .grid-col { width: 33.3333%; }
}
@media (min-width: 900px) {
#footer-menu .grid-col {
border-left: 1px solid #5d7799; border-bottom: none;
padding: 0 24px; text-align: left;
}
#footer-logo.grid-col { border-left: none; }
#logo-bot { margin: 0; } #footer-copyright { text-align: left; padding: 42px 12px 0 36px; }
}
@media (min-width: 1200px) {
#footer-menu .grid-col { width: 20%; }
} @media (max-width: 900px) {
.entry-layout { grid-template-columns: 1fr; }
.entry-aside { order: 2; }
.is-entry .page-title { width: 100%; }
.about-page-layout { grid-template-columns: 1fr; gap: 12px; }
.about-page-aside { order: 2; }
.search-layout { grid-template-columns: 1fr; gap: 12px; }
.search-aside { order: 2; }
.category-layout {
grid-template-columns: 1fr;
gap: 12px;
}
.category-aside {
grid-column: 1;
grid-row: 1;
}
.category-primary {
grid-column: 1;
grid-row: 2;
}
}
@media (max-width: 700px) {
#page-header { padding: 12px 12px 0; }
.entry-shell { padding-top: 12px; }
#breadcrumbs { min-height: 44px; padding: 9px 12px; font-size: 14px; }
#breadcrumbs .sep { margin-inline: 5px; }
.page-title { margin-top: 14px; font-size: 28px; }
.is-entry .page-title { font-size: 36px; }
.entry-title-row .page-title { width: auto; }
.entry-title-row { gap: 8px; }
.entry-pronunciation { flex-basis: 40px; width: 40px; height: 40px; }
.entry-pronunciation svg { width: 33px; height: 33px; }
.dict-index { columns: 2 120px; }
.dict-search { flex-direction: column; }
.az-list, .az-box { padding: 16px; }
.az-box .az-list { padding: 0; }
.card { padding: 18px 16px; }
}
@media (max-width: 600px) {
.az-letter { width: 34px; height: 34px; } .az-letter.az-all { width: auto; }
} @media print {
#navbar, #footer, .az-band, .entry-aside, .skip-link, .home-search,
#sharing-buttons, .entry-pronunciation, .te-top-ad-slot { display: none !important; }
body { background: var(--w); }
.card { box-shadow: none; padding: 0; }
.page-title { background: none; color: var(--b); text-align: left; padding: 0; }
.entry-body span[style*="#ff0000"],
.entry-body span[style*="#FF0000"],
.entry-body span[style*="#008000"],
.entry-body span[style*="#008800"],
.entry-body span[style*="#339966"],
.entry-body .example-questionable { background: none; }
}
#wpadminbar {
z-index: 99999999!important;
background: #4a3039;
}