/*
Theme Name: Flavor Verbs
Theme URI: https://englishverbs.net
Author: EnglishVerbs.net
Description: Modern, lightweight theme for English verb conjugation website. Futuristic design with dark header and light content.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: flavor-verbs
*/
/* ==========================================================================
CSS Variables
========================================================================== */
:root {
--bg-dark: #1A1D23;
--bg-medium: #22262E;
--bg-light: #F8F9FA;
--bg-card: #FFFFFF;
--accent-primary: #3B82F6;
--accent-glow: #00D4FF;
--accent-green: #10B981;
--accent-orange: #F59E0B;
--accent-pink: #EC4899;
--text-dark: #1F2937;
--text-medium: #6B7280;
--text-light: #9CA3AF;
--border-light: #E5E7EB;
--border-dark: #374151;
}
/* Search highlight */
mark {
background: rgba(0, 212, 255, 0.3);
color: inherit;
padding: 2px 4px;
border-radius: 3px;
box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}
/* ==========================================================================
Reset & Base
========================================================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: var(--bg-light);
color: var(--text-dark);
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
}
/* ==========================================================================
Header
========================================================================== */
.site-header {
background: var(--bg-dark);
border-bottom: 1px solid rgba(59, 130, 246, 0.35);
}
.header-main {
max-width: 1400px;
margin: 0 auto;
padding: 15px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
margin-left: 16px; /* nudges logo + site text slightly right from the header edge */
}
.logo-image {
height: 50px;
width: auto;
display: block;
}
.logo-text {
font-size: 24px;
font-weight: 700;
color: white;
letter-spacing: -0.5px;
}
.logo-text span {
font-size: 16px;
font-weight: 500;
color: var(--accent-glow);
}
/* Navigation */
.main-nav {
display: flex;
align-items: center;
gap: 5px;
}
.main-nav > a,
.main-nav > .nav-item > a {
display: flex;
align-items: center;
color: #D1D5DB;
font-size: 14px;
font-weight: 500;
padding: 8px 14px;
transition: all 0.2s;
border-radius: 6px;
height: 36px;
}
.main-nav > a:hover,
.main-nav > .nav-item:hover > a,
.main-nav > a.current {
color: var(--accent-glow);
background: rgba(0, 212, 255, 0.1);
}
/* Dropdown Menu */
.nav-item {
position: relative;
display: flex;
align-items: center;
}
.nav-item > a::after {
content: "▾";
margin-left: 5px;
font-size: 10px;
opacity: 0.7;
}
.nav-item .dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 180px;
background: var(--bg-dark);
border: 1px solid var(--border-dark);
border-radius: 8px;
padding: 8px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.2s;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
z-index: 1000;
}
.nav-item:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(5px);
}
.nav-item .dropdown a {
display: block !important;
padding: 10px 18px;
color: #D1D5DB;
font-size: 13px;
font-weight: 500;
transition: all 0.2s;
white-space: nowrap;
}
.nav-item .dropdown a:hover {
background: rgba(0, 212, 255, 0.1);
color: var(--accent-glow);
padding-left: 22px;
}
/* Ensure dropdown is flex column */
.nav-item .dropdown {
display: flex;
flex-direction: column;
}
/* Wide mega dropdown for Grammar */
.nav-item .dropdown-wide {
min-width: 500px;
flex-direction: row;
padding: 20px;
gap: 25px;
left: 50%;
transform: translateX(-50%) translateY(10px);
}
.nav-item:hover .dropdown-wide {
transform: translateX(-50%) translateY(5px);
}
.dropdown-section {
flex: 1;
display: flex;
flex-direction: column;
}
.dropdown-heading {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--accent-glow);
padding: 0 0 8px 0;
margin-bottom: 5px;
border-bottom: 1px solid rgba(0, 212, 255, 0.2);
font-weight: 600;
}
.dropdown-section a {
padding: 8px 0 !important;
font-size: 13px !important;
}
.dropdown-section a:hover {
padding-left: 8px !important;
}
.dropdown-section a.see-all {
margin-top: 10px;
color: var(--accent-glow) !important;
font-size: 12px !important;
opacity: 0.8;
}
.dropdown-section a.see-all:hover {
opacity: 1;
}
/* ==========================================================================
Hero Section (Homepage)
========================================================================== */
.hero {
background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-medium) 100%);
padding: 35px 20px 45px;
text-align: center;
}
/* Home hero: decorative accents flanking the h1 title at the same vertical
level. Positioned via calc() from horizontal center so they stay close to
the centered title on any wide viewport. Hidden on narrow screens. */
.hero--home {
position: relative;
overflow: hidden;
--decor-offset: 350px; /* gap from horizontal center to inner edge of accent */
--decor-top: 62px; /* matches h1 vertical center (hero padding-top 35 + h1 half-height) */
}
.hero-decor {
position: absolute;
top: var(--decor-top);
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
pointer-events: none;
z-index: 0;
}
.hero-decor--left { right: calc(50% + var(--decor-offset)); }
.hero-decor--right {
left: calc(50% + var(--decor-offset));
/* Squares are 22px tall vs dots 11px — shift up so both rows share the
same vertical center line with the h1 baseline. */
top: calc(var(--decor-top) - 6px);
}
.hero-decor .accent-dot {
width: 11px;
height: 11px;
border-radius: 50%;
opacity: 0.75;
flex: 0 0 auto;
}
.hero-decor .accent-dot.cyan { background: #00D4FF; box-shadow: 0 0 18px rgba(0, 212, 255, 0.55); }
.hero-decor .accent-dot.pink { background: #EC4899; box-shadow: 0 0 18px rgba(236, 72, 153, 0.55); }
.hero-decor .accent-dot.green { background: #10B981; box-shadow: 0 0 18px rgba(16, 185, 129, 0.55); }
.hero-decor--right .article-square {
width: 22px;
height: 22px;
background: transparent;
border: 2px solid;
border-radius: 4px;
opacity: 0.8;
flex: 0 0 auto;
}
.hero-decor--right .article-square--cyan {
border-color: #00D4FF;
box-shadow: 0 0 10px rgba(0, 212, 255, 0.4), inset 0 0 8px rgba(0, 212, 255, 0.12);
transform: rotate(-6deg);
}
.hero-decor--right .article-square--pink {
border-color: #EC4899;
box-shadow: 0 0 10px rgba(236, 72, 153, 0.4), inset 0 0 8px rgba(236, 72, 153, 0.12);
transform: rotate(4deg);
}
.hero-decor--right .article-square--green {
border-color: #10B981;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.4), inset 0 0 8px rgba(16, 185, 129, 0.12);
transform: rotate(-3deg);
}
.hero--home > h1,
.hero--home > p,
.hero--home > form,
.hero--home > .quick-stats {
position: relative;
z-index: 1;
}
/* Hide decorations when they'd crowd the centered content */
@media (max-width: 1100px) {
.hero-decor { display: none; }
}
.hero h1 {
color: white;
font-size: 36px;
font-weight: 700;
margin-bottom: 10px;
}
.hero h1 span {
color: var(--accent-glow);
text-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
}
.hero p {
color: #9CA3AF;
font-size: 16px;
margin-bottom: 25px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Offset hero content on pages with sidebar to align with main content area */
body.tax-verb_type .hero {
padding-right: calc(300px + 30px + 20px); /* sidebar + gap + base padding */
}
/* Search Box */
.search-box-hero {
display: flex;
max-width: 550px;
margin: 0 auto;
background: var(--bg-dark);
border: 1px solid var(--border-dark);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}
.search-box-hero:focus-within {
border-color: var(--accent-glow);
box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
}
.search-box-hero input {
flex: 1;
padding: 18px 22px;
border: none;
background: transparent;
color: white;
font-size: 16px;
font-family: 'Inter', sans-serif;
}
.search-box-hero input::placeholder {
color: #6B7280;
}
.search-box-hero input:focus {
outline: none;
}
.search-box-hero button {
padding: 18px 30px;
background: var(--accent-primary);
border: none;
color: white;
font-weight: 600;
cursor: pointer;
font-family: 'Inter', sans-serif;
transition: background 0.2s;
}
.search-box-hero button:hover {
background: #2563EB;
}
/* Quick Stats */
.quick-stats {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 25px;
}
.stat-item {
text-align: center;
}
.stat-number {
font-size: 24px;
font-weight: 700;
color: var(--accent-glow);
font-family: 'JetBrains Mono', monospace;
}
.stat-label {
font-size: 13px;
color: #6B7280;
margin-top: 4px;
}
/* ==========================================================================
Ad Slots
========================================================================== */
.ad-slot {
background: #F3F4F6;
border: 2px dashed #D1D5DB;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
font-size: 12px;
font-weight: 500;
}
.ad-slot:empty {
display: none;
}
/* Flavor Ads: placeholder label inside dashed slot */
.ad-slot-placeholder {
flex-direction: column;
gap: 4px;
padding: 8px;
text-align: center;
}
.ad-placeholder-label {
font-size: 11px;
font-weight: 600;
color: #6b7280;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.ad-placeholder-label code {
font-family: inherit;
color: #374151;
background: transparent;
padding: 0;
}
/* Policy: clearly label live ads */
.ad-slot .ad-label {
display: block;
font-size: 10px;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.5px;
text-align: center;
margin-bottom: 4px;
}
/* ==========================================================================
Modal Verbs — hub cards + detail page tables.
Visual language matches the rest of the dark / cyan-pink-green aesthetic.
========================================================================== */
.modal-hero .modal-title { letter-spacing: -0.5px; }
.modal-hero .modal-breadcrumb { text-align: left; margin-bottom: 16px; }
.modal-hero .modal-breadcrumb a { color: #cbd5e1; text-decoration: none; }
.modal-hero .modal-breadcrumb a:hover { color: var(--accent-glow); }
.modal-hero .modal-breadcrumb .sep { color: #475569; margin: 0 6px; }
/* Hub grid of cards */
.modal-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 20px 0 30px;
}
@media (max-width: 900px) { .modal-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .modal-cards-grid { grid-template-columns: 1fr; } }
.modal-card {
position: relative;
display: block;
padding: 22px 22px 20px;
background: linear-gradient(180deg, rgba(34, 38, 46, 0.95) 0%, rgba(24, 27, 34, 0.95) 100%);
border: 1px solid rgba(0, 212, 255, 0.18);
border-radius: 6px;
color: #cbd5e1;
text-decoration: none;
overflow: hidden;
transition: transform 0.15s, border-color 0.15s;
}
.modal-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #00D4FF 20%, #EC4899 60%, #10B981 80%, transparent);
opacity: 0.55;
}
.modal-card:hover {
transform: translateY(-2px);
border-color: rgba(0, 212, 255, 0.45);
}
/* Rotating left-edge accent so the grid reads like the list items elsewhere */
.modal-card:nth-child(3n+1) { border-left: 3px solid var(--accent-glow); }
.modal-card:nth-child(3n+2) { border-left: 3px solid var(--accent-pink); }
.modal-card:nth-child(3n+3) { border-left: 3px solid var(--accent-green); }
.modal-card-name {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 28px;
font-weight: 700;
color: #fff;
letter-spacing: -0.5px;
margin-bottom: 6px;
}
.modal-card-forms {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
margin-bottom: 10px;
}
.modal-card-forms em {
font-style: normal;
color: var(--accent-glow);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-weight: 600;
}
.modal-card-summary {
font-size: 13.5px;
line-height: 1.55;
color: #cbd5e1;
margin-bottom: 14px;
}
.modal-card-cta {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 600;
color: var(--accent-glow);
letter-spacing: 0.3px;
}
/* Extra breathing room above "Browse modals" label since the inline ad
now sits directly above it — avoids the title feeling glued to the ad. */
.modal-browse-title { margin-top: 32px !important; }
/* Quick comparison table on hub */
.modal-compare-table {
position: relative;
margin-top: 14px;
border: 1px solid rgba(0, 212, 255, 0.18);
border-radius: 6px;
overflow: hidden;
background: linear-gradient(180deg, rgba(34, 38, 46, 0.98) 0%, rgba(24, 27, 34, 0.98) 100%);
}
.modal-compare-table::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #00D4FF 20%, #EC4899 60%, #10B981 80%, transparent);
opacity: 0.55;
z-index: 1;
}
.modal-compare-head,
.modal-compare-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 12px;
padding: 12px 16px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
}
.modal-compare-head {
background: rgba(0, 0, 0, 0.35);
color: #e2e8f0;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
font-weight: 700;
border-bottom: 1px solid rgba(0, 212, 255, 0.15);
}
.modal-compare-row { border-bottom: 1px dashed rgba(255, 255, 255, 0.08); color: #e2e8f0; }
.modal-compare-row:last-child { border-bottom: none; }
.modal-compare-row:hover { background: rgba(0, 212, 255, 0.04); }
.modal-c-name a { color: var(--accent-glow); font-weight: 700; text-decoration: none; }
.modal-c-name a:hover { color: #7dd3fc; }
@media (max-width: 600px) {
.modal-compare-head { display: none; }
.modal-compare-row { grid-template-columns: 1fr; gap: 4px; }
}
/* Detail page sections */
.modal-article .modal-block { margin: 32px 0; }
.modal-article .modal-block:first-child { margin-top: 8px; }
.modal-forms-table {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px 24px;
background: rgba(15, 18, 24, 0.4);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 6px;
padding: 16px 20px;
}
@media (max-width: 560px) { .modal-forms-table { grid-template-columns: 1fr; } }
.modal-form-row {
display: flex;
justify-content: space-between;
gap: 14px;
padding: 6px 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
align-items: baseline;
}
.modal-form-row:last-child { border-bottom: none; }
.modal-form-label {
color: #64748b;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
}
.modal-form-value {
color: #e2e8f0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 14px;
font-weight: 600;
}
.modal-meaning-note {
display: block;
margin-top: 4px;
font-size: 12px;
color: #64748b;
font-style: italic;
}
/* Tense-pattern table */
.modal-patterns-table {
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 6px;
overflow: hidden;
background: rgba(15, 18, 24, 0.4);
margin-top: 12px;
}
.modal-patterns-head,
.modal-patterns-row {
display: grid;
grid-template-columns: 180px 1fr 1fr 1fr;
gap: 12px;
padding: 12px 16px;
}
.modal-patterns-head {
background: rgba(0, 0, 0, 0.3);
color: #64748b;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 700;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-patterns-row { border-bottom: 1px dashed rgba(255, 255, 255, 0.06); font-size: 13.5px; }
.modal-patterns-row:last-child { border-bottom: none; }
.modal-patterns-row:hover { background: rgba(0, 212, 255, 0.04); }
.modal-p-label { color: var(--accent-glow); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.modal-p-aff { color: #e2e8f0; }
.modal-p-neg { color: #cbd5e1; }
.modal-p-q { color: #cbd5e1; font-style: italic; }
@media (max-width: 700px) {
.modal-patterns-head { display: none; }
.modal-patterns-row {
grid-template-columns: 1fr;
gap: 6px;
padding: 14px 16px;
}
.modal-p-label { font-size: 11px; }
}
/* Common mistakes card */
.modal-mistakes {
padding: 18px 22px;
background: rgba(217, 119, 6, 0.08);
border: 1px solid rgba(217, 119, 6, 0.3);
border-left: 3px solid #d97706;
border-radius: 4px;
}
.modal-mistakes h2 { color: #fbbf24 !important; border-bottom-color: rgba(217, 119, 6, 0.3) !important; }
.modal-mistakes .modal-mistakes-body { font-size: 14px; line-height: 1.65; color: #e2e8f0; }
/* Related modals */
.modal-related-list {
list-style: none;
padding: 0;
margin: 12px 0 0;
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* Related modals — pill-style list. Override base .tense-article ul li rules
(those win specificity otherwise because they're ul+li+::before, one more
element selector than .modal-related-list li alone). */
.modal-article .modal-related-list li {
padding: 0;
background: none;
border: none;
margin: 0;
line-height: 1;
display: inline-block;
overflow: visible;
transform: none !important;
}
.modal-article .modal-related-list li:hover { transform: none; background: none; }
.modal-article .modal-related-list li::before,
.modal-article .modal-related-list li::after { content: none !important; }
.modal-related-list a,
.modal-related-list .modal-related-static {
display: inline-block;
padding: 6px 14px;
background: rgba(0, 212, 255, 0.08);
border: 1px solid rgba(0, 212, 255, 0.25);
border-radius: 999px;
color: var(--accent-glow);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background 0.15s;
}
.modal-related-list a:hover { background: rgba(0, 212, 255, 0.18); }
.modal-related-list .modal-related-static { color: #64748b; border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); }
/* ==========================================================================
Verb Listing intro card (/irregular-verbs/, /regular-verbs/) — matches
the contact-card aesthetic so the context-intro sits above the verb grid
without breaking visual language.
========================================================================== */
.verb-intro {
position: relative;
background: linear-gradient(180deg, rgba(34, 38, 46, 0.95) 0%, rgba(24, 27, 34, 0.95) 100%);
border: 1px solid rgba(0, 212, 255, 0.18);
border-radius: 6px;
padding: 24px 28px;
margin: 0 0 30px;
color: #cbd5e1;
overflow: hidden;
}
/* Thin cyan→pink→green top bar, same as the contact cards */
.verb-intro::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #00D4FF 20%, #EC4899 60%, #10B981 80%, transparent);
opacity: 0.55;
}
.verb-intro h2 {
margin: 0 0 12px;
font-size: 18px;
font-weight: 700;
color: #e2e8f0;
letter-spacing: 0.2px;
}
.verb-intro p {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.65;
color: #cbd5e1;
}
.verb-intro p:last-child { margin-bottom: 0; }
.verb-intro strong { color: #fff; }
.verb-intro em {
color: var(--accent-glow);
font-style: italic;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
}
@media (max-width: 600px) {
.verb-intro { padding: 18px 20px; }
.verb-intro h2 { font-size: 16px; }
}
/* ==========================================================================
Contact Page — dark "terminal" aesthetic with cyan/pink/green accents
========================================================================== */
/* Higher specificity (.main-wrapper + .contact-wrapper) beats the base .main-wrapper
rule defined later in the file, AND scopes these overrides to the contact page
only — no bleed to other templates. */
.main-wrapper.contact-wrapper {
background: linear-gradient(180deg, #1A1D23 0%, #0f1218 100%);
color: #cbd5e1;
max-width: none;
margin: 5px 0; /* 5px body-bg gap above and below */
padding: 50px 20px 50px; /* symmetric, content-hugging */
display: block;
gap: 0;
}
.main-wrapper.contact-wrapper > .content { max-width: 1200px; margin: 0 auto; width: 100%; }
/* Base .site-footer has margin-top: 40px that creates a white gap below the
contact wrapper. Close it on contact only. */
body.page-template-page-contact .site-footer { margin-top: 5px; }
.contact-grid {
display: grid;
grid-template-columns: 360px 1fr;
gap: 28px;
}
@media (max-width: 900px) {
.contact-grid { grid-template-columns: 1fr; }
}
/* Shared card base — matte dark panel with subtle cyan edge */
.contact-side-card,
.contact-form-card {
background: linear-gradient(180deg, rgba(34, 38, 46, 0.95) 0%, rgba(24, 27, 34, 0.95) 100%);
border: 1px solid rgba(0, 212, 255, 0.18);
border-radius: 6px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 212, 255, 0.04) inset;
overflow: hidden;
position: relative;
}
/* Thin cyan top bar */
.contact-side-card::before,
.contact-form-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #00D4FF 20%, #EC4899 60%, #10B981 80%, transparent);
opacity: 0.55;
}
/* Side card (intro) */
.contact-side-head,
.contact-form-head {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.4px;
text-transform: uppercase;
color: #94a3b8;
background: rgba(0, 0, 0, 0.25);
}
.contact-form-head-hint {
margin-left: auto;
color: #475569;
text-transform: none;
font-size: 11px;
letter-spacing: 0;
}
.fc-pulse-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #10B981;
box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
animation: fc-pulse 2s ease-in-out infinite;
}
@keyframes fc-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
.contact-side-body {
padding: 22px;
font-size: 14px;
line-height: 1.6;
color: #cbd5e1;
}
.contact-side-body p { margin: 0 0 14px; }
.contact-side-body a { color: var(--accent-glow, #00D4FF); text-decoration: none; border-bottom: 1px dotted rgba(0, 212, 255, 0.5); }
.contact-side-body a:hover { color: #7dd3fc; }
.contact-side-meta {
margin-top: 18px;
padding-top: 16px;
border-top: 1px dashed rgba(255, 255, 255, 0.08);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
}
.contact-side-meta > div {
display: flex;
justify-content: space-between;
padding: 6px 0;
gap: 12px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}
.contact-side-meta .fc-k {
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contact-side-meta .fc-v { color: #e2e8f0; }
/* Form */
.fc-form { padding: 24px; }
.fc-form .fc-row { margin-bottom: 16px; }
.fc-form .fc-row-two {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
@media (max-width: 560px) {
.fc-form .fc-row-two { grid-template-columns: 1fr; }
}
.fc-form .fc-field {
display: block;
margin-bottom: 16px;
}
.fc-form .fc-label {
display: block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.6px;
color: #64748b;
margin-bottom: 8px;
}
.fc-form .fc-label em { font-style: normal; color: #475569; text-transform: none; letter-spacing: 0; font-weight: 400; }
.fc-form .fc-req { color: #EC4899; font-weight: 700; margin-left: 2px; }
/* Math challenge field — visually distinct so user notices it's a check */
.fc-form .fc-math input[type=number] {
max-width: 140px;
font-size: 15px;
text-align: center;
letter-spacing: 1px;
display: inline-block;
vertical-align: middle;
}
.fc-form .fc-math .fc-math-q {
color: #00D4FF;
font-weight: 700;
font-family: 'JetBrains Mono', ui-monospace, monospace;
padding: 0 2px;
}
/* Inline error message to the RIGHT of the math input (not below like other fields).
Green color by design — this reads more like a gentle hint than an alarming alert. */
.fc-form .fc-math .fc-field-error {
display: inline-block;
vertical-align: middle;
margin-left: 14px;
padding: 0;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
color: #10B981;
max-height: none;
overflow: visible;
opacity: 0;
transform: translateX(-4px);
transition: opacity 0.18s, transform 0.18s;
}
.fc-form .fc-math.has-error .fc-field-error {
opacity: 1;
transform: translateX(0);
padding: 0;
max-height: none;
}
/* Override the default pink error border for the math field only — green to match
the message color next to it. */
.fc-form .fc-math.has-error input[type=number] {
border-color: rgba(16, 185, 129, 0.6);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
/* Inline field-level error — same visual language as the global form-error notice,
just scoped to a single field so the user sees exactly what needs fixing. */
.fc-form .fc-field .fc-field-error {
display: block;
min-height: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s, padding 0.2s, margin 0.2s;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
color: #f9a8d4;
padding: 0 2px;
margin: 0;
}
.fc-form .fc-field.has-error .fc-field-error {
max-height: 40px;
padding: 4px 2px 0;
}
.fc-form .fc-field.has-error input,
.fc-form .fc-field.has-error textarea {
border-color: rgba(236, 72, 153, 0.6);
box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.12);
}
.fc-form input[type=text],
.fc-form input[type=email],
.fc-form input[type=number],
.fc-form textarea {
width: 100%;
padding: 12px 14px;
background: rgba(15, 18, 24, 0.85);
border: 1px solid rgba(0, 212, 255, 0.15);
border-radius: 4px;
color: #e2e8f0;
font-size: 14px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
box-sizing: border-box;
}
.fc-form textarea {
resize: vertical;
min-height: 140px;
line-height: 1.5;
}
.fc-form input::placeholder,
.fc-form textarea::placeholder { color: #475569; }
.fc-form input:focus,
.fc-form textarea:focus {
outline: none;
border-color: #00D4FF;
background: rgba(15, 18, 24, 1);
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
color: #e2e8f0;
}
.fc-form input:hover:not(:focus),
.fc-form textarea:hover:not(:focus) {
border-color: rgba(0, 212, 255, 0.35);
}
/* Chrome/Safari strip number spinners + style for dark theme */
.fc-form input[type=number]::-webkit-outer-spin-button,
.fc-form input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.fc-form input[type=number] { -moz-appearance: textfield; }
/* Honeypot — off-screen, no visual footprint */
.fc-form .fc-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
.fc-form .fc-actions {
display: flex;
align-items: center;
gap: 16px;
margin-top: 8px;
flex-wrap: wrap;
}
.fc-form .fc-submit {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
background: linear-gradient(135deg, #00D4FF 0%, #EC4899 100%);
color: #0f1218;
border: none;
border-radius: 4px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
box-shadow: 0 0 20px rgba(0, 212, 255, 0.25), 0 4px 16px rgba(0, 0, 0, 0.4);
}
.fc-form .fc-submit:hover {
transform: translateY(-1px);
box-shadow: 0 0 30px rgba(0, 212, 255, 0.45), 0 6px 20px rgba(0, 0, 0, 0.5);
filter: brightness(1.08);
}
.fc-form .fc-submit:active { transform: translateY(0); }
.fc-form .fc-submit svg { stroke-width: 2.5; }
.fc-form .fc-privacy-note {
font-size: 11px;
color: #64748b;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.fc-form .fc-privacy-note a {
color: #94a3b8;
border-bottom: 1px dotted #475569;
text-decoration: none;
}
.fc-form .fc-privacy-note a:hover { color: #00D4FF; }
/* Notices */
.fc-form-success,
.fc-form-error {
margin: 0 24px 0;
padding: 14px 16px;
border-radius: 4px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
line-height: 1.5;
}
.fc-form-success {
background: rgba(16, 185, 129, 0.12);
border: 1px solid rgba(16, 185, 129, 0.4);
color: #6ee7b7;
margin-top: 20px;
}
.fc-form-error {
background: rgba(236, 72, 153, 0.12);
border: 1px solid rgba(236, 72, 153, 0.4);
color: #f9a8d4;
margin-top: 20px;
}
.fc-form-success strong,
.fc-form-error strong { color: #e2e8f0; }
/* The info-hero is reused for contact. Tweak only what differs. */
.contact-hero {
background: linear-gradient(135deg, #1A1D23 0%, #252a35 100%);
}
/* ==========================================================================
Info Page (Privacy Policy / Terms / About / Contact) — clean prose layout
========================================================================== */
.info-article {
background: #fff;
padding: 36px 40px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
color: #1d2327;
line-height: 1.7;
font-size: 15px;
}
.info-article p {
margin: 0 0 14px;
color: #1d2327;
}
.info-article h2 {
font-size: 22px;
font-weight: 700;
color: #0f172a;
margin: 32px 0 14px;
padding-bottom: 10px;
border-bottom: 1px solid #e5e7eb;
background: none;
text-transform: none;
letter-spacing: 0;
}
.info-article h2:first-child { margin-top: 0; }
.info-article h3 {
font-size: 16px;
font-weight: 600;
color: #0f172a;
margin: 22px 0 10px;
background: none;
text-transform: none;
letter-spacing: 0;
border: none;
padding: 0;
}
.info-article ul,
.info-article ol {
margin: 0 0 16px;
padding-left: 22px;
background: none;
border: none;
}
.info-article li {
margin: 0 0 6px;
background: none;
border: none;
padding: 0;
list-style: disc;
color: #1d2327;
}
.info-article ol li { list-style: decimal; }
.info-article li::before { content: none; }
.info-article a {
color: #2563eb;
text-decoration: underline;
text-underline-offset: 2px;
}
.info-article a:hover { color: #1d4ed8; }
.info-article strong { color: #0f172a; font-weight: 700; }
.info-article hr {
border: 0;
border-top: 1px solid #e5e7eb;
margin: 28px 0;
}
.info-article em { color: #4b5563; }
.info-article code {
background: #f3f4f6;
padding: 2px 6px;
border-radius: 3px;
font-size: 13px;
color: #0f172a;
}
/* Info-page hero — align its content block with the article's content column
below (not the viewport center). Mirrors the main-wrapper grid so the right
sidebar gutter stays reserved and the title visually "belongs to the article". */
.info-hero .hero-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 300px;
gap: 30px;
text-align: center;
box-sizing: border-box;
}
.info-hero .hero-content > * {
grid-column: 1; /* everything stays in the content column */
}
/* Breadcrumb: stays flush top-left inside the content column. */
.info-hero .hero-breadcrumb {
text-align: left;
margin: 0 0 18px;
}
/* Dots + title on the same line, centered as a block. */
.info-hero .hero-title-block {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
margin: 0 0 8px;
}
.info-hero .hero-title-block .hero-accents {
position: static; /* override base .hero-accents { position:absolute } that's meant for tense-hero */
left: auto;
top: auto;
margin: 0;
justify-content: flex-start;
}
.info-hero .hero-title-block h1 {
margin: 0;
line-height: 1.1;
}
.info-hero .hero-tagline {
margin: 0;
}
/* Breadcrumb in hero for info pages */
.info-hero .hero-breadcrumb {
color: #94a3b8;
font-size: 13px;
margin: 0 0 12px;
}
.info-hero .hero-breadcrumb a {
color: #cbd5e1;
text-decoration: none;
}
.info-hero .hero-breadcrumb a:hover { color: var(--accent-glow); }
.info-hero .hero-breadcrumb .sep {
margin: 0 6px;
color: #475569;
}
@media (max-width: 1024px) {
.info-hero .hero-content {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.info-article { padding: 22px 20px; }
.info-article h2 { font-size: 18px; }
}
/* .ad-row mirrors .main-wrapper's outer bounds so a header ad placed above the
main grid lines up with the content column (not the viewport, which is
off-center due to the 300px right sidebar). */
.ad-row {
max-width: 1400px;
margin: 30px auto 0; /* top spacing so the banded header ad doesn't hug the page header */
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 300px;
gap: 30px;
box-sizing: border-box;
}
.ad-row .ad-slot-header {
grid-column: 1; /* stay in the content column only */
width: 100%;
max-width: 970px; /* AdSense Large Leaderboard — wider than old 728 */
margin: 0 auto; /* band already has vertical spacing from surroundings */
}
.ad-slot-header {
height: 90px;
max-width: 970px;
margin: 0 auto 25px; /* only bottom spacing — aligns top with sidebar-top ad */
}
.ad-container {
background: white;
padding: 20px;
text-align: center;
}
/* Ad placeholder styling (for development) */
.ad-placeholder {
border: 2px dashed #D1D5DB;
border-radius: 8px;
padding: 30px 20px;
color: #9CA3AF;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
max-width: 728px;
margin: 0 auto;
}
.ad-slot-sidebar {
height: 250px;
margin-bottom: 20px;
}
.ad-slot-sidebar-tall {
height: 600px;
margin-bottom: 20px;
}
.ad-slot-content {
height: 90px;
margin: 25px 0;
}
/* ==========================================================================
Main Layout
========================================================================== */
.main-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
display: grid;
grid-template-columns: 1fr 300px;
gap: 30px;
}
.content {
min-width: 0;
}
/* ==========================================================================
Section Titles
========================================================================== */
.section-title {
font-size: 20px;
font-weight: 700;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.section-title::before {
content: "";
width: 4px;
height: 24px;
background: var(--accent-primary);
border-radius: 2px;
}
/* Engraved separator for section titles (not the first one) */
.categories-grid + .section-title,
.popular-verbs + .section-title,
.tenses-grid + .section-title {
margin-top: 50px;
padding-top: 35px;
position: relative;
}
.categories-grid + .section-title::after,
.popular-verbs + .section-title::after,
.tenses-grid + .section-title::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: #C9CDD4;
box-shadow: 0 2px 0 #FFFFFF;
}
/* ==========================================================================
Cards
========================================================================== */
.card {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 25px;
transition: all 0.2s;
}
.card:hover {
border-color: var(--accent-primary);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
}
/* Category Cards */
.categories-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.category-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 10px;
padding: 25px;
text-decoration: none;
color: var(--text-dark);
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.category-card:hover {
border-color: var(--accent-primary);
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
transform: translateY(-2px);
}
.category-card h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.category-card p {
font-size: 14px;
color: var(--text-medium);
margin-bottom: 12px;
}
.category-count {
font-size: 12px;
color: var(--accent-primary);
font-weight: 600;
}
.category-icon {
position: absolute;
right: 20px;
top: 20px;
width: 50px;
height: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
border: 2px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Verb Items */
.verbs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.verb-item {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 15px;
text-decoration: none;
color: var(--text-dark);
transition: all 0.2s;
text-align: center;
}
.verb-item:hover {
border: 3px solid var(--accent-glow);
background: var(--bg-dark);
color: white;
padding: 13px;
}
.verb-item .verb-name {
font-family: 'JetBrains Mono', monospace;
font-weight: 600;
font-size: 15px;
}
.verb-item .verb-type {
font-size: 11px;
color: var(--text-light);
margin-top: 4px;
}
.verb-item:hover .verb-type {
color: var(--accent-glow);
}
/* Tense Cards */
.tenses-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-bottom: 40px;
}
.tense-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 20px;
text-decoration: none;
color: var(--text-dark);
transition: all 0.2s;
}
.tense-card:hover {
border-color: var(--accent-primary);
box-shadow: 0 2px 10px rgba(59, 130, 246, 0.1);
}
.tense-card h4 {
font-size: 15px;
font-weight: 600;
margin-bottom: 6px;
}
.tense-card p {
font-size: 13px;
color: var(--text-medium);
}
.tense-tag {
display: inline-block;
font-size: 10px;
padding: 3px 8px;
border-radius: 4px;
margin-top: 10px;
font-weight: 600;
}
.tense-tag.present { background: #DBEAFE; color: #1D4ED8; }
.tense-tag.past { background: #D1FAE5; color: #047857; }
.tense-tag.future { background: #FEF3C7; color: #B45309; }
/* ==========================================================================
Sidebar
========================================================================== */
.sidebar {
display: flex;
flex-direction: column;
}
/* Ad Widget - no styling when empty */
.ad-widget-wrapper {
margin-bottom: 20px;
}
.ad-widget-wrapper:empty,
.ad-widget-wrapper:has(.widget:empty),
.ad-widget-wrapper .widget_custom_html .textwidget:empty {
display: none;
}
/* Remove default widget styling from ad widgets */
.ad-widget-wrapper .widget {
background: transparent;
border: none;
padding: 0;
}
.sidebar-widget {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 18px;
margin-bottom: 20px;
}
.sidebar-widget h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-light);
}
.sidebar-widget-eyebrow {
display: block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #64748b;
margin-bottom: 4px;
}
.sidebar-widget.alphabet-widget h3 { margin-bottom: 12px; padding-bottom: 8px; }
/* Alphabet Grid */
.alphabet-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
}
.alphabet-grid a {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
background: var(--bg-light);
border-radius: 4px;
text-decoration: none;
color: var(--text-dark);
font-weight: 600;
font-size: 13px;
transition: all 0.2s;
}
.alphabet-grid a:hover {
background: var(--bg-dark);
color: var(--accent-glow);
}
/* ==========================================================================
Verb Page Specific
========================================================================== */
.verb-header {
background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-medium) 100%);
padding: 22px 0 25px; /* horizontal padding moved to .verb-header-inner so edges align with main-wrapper */
overflow-x: hidden; /* contains full-bleed divider so it doesn't spawn horizontal scroll */
}
.verb-header-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px; /* matches main-wrapper so content edges align with content/sidebar below */
}
.breadcrumb {
font-size: 12px;
color: #6B7280;
margin-bottom: 10px;
}
.breadcrumb a {
color: #9CA3AF;
transition: color 0.2s;
}
.breadcrumb a:hover {
color: var(--accent-glow);
}
.breadcrumb span {
margin: 0 6px;
}
.verb-title-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 6px;
}
.verb-title {
font-size: 26px;
font-weight: 700;
color: white;
font-family: 'JetBrains Mono', monospace;
}
.verb-badge {
padding: 4px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
}
.verb-badge.irregular {
background: rgba(16, 185, 129, 0.2);
color: #34D399;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.verb-badge.regular {
background: rgba(59, 130, 246, 0.2);
color: #60A5FA;
border: 1px solid rgba(59, 130, 246, 0.3);
}
.verb-forms {
display: flex;
gap: 20px;
margin-top: 10px;
}
.verb-form-item {
text-align: center;
}
.verb-form-label {
font-size: 10px;
color: #6B7280;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.verb-form-value {
font-size: 15px;
font-weight: 600;
color: var(--accent-glow);
font-family: 'JetBrains Mono', monospace;
margin-top: 3px;
}
.verb-definition {
color: #D1D5DB;
font-size: 14px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-dark);
}
/* ==========================================================================
Conjugation Tables
========================================================================== */
.conjugation-section {
margin-bottom: 30px;
}
.conjugation-table {
width: 100%;
border-collapse: collapse;
background: var(--bg-card);
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-light);
}
.conjugation-table th {
background: var(--bg-dark);
color: white;
padding: 12px 15px;
text-align: left;
font-size: 13px;
font-weight: 600;
}
.conjugation-table td {
padding: 12px 15px;
border-bottom: 1px solid var(--border-light);
font-size: 14px;
}
.conjugation-table tr:last-child td {
border-bottom: none;
}
.conjugation-table tr:hover td {
background: var(--bg-light);
}
.conjugation-table .pronoun {
color: var(--text-medium);
font-weight: 500;
width: 100px;
}
.conjugation-table .verb-form {
font-family: 'JetBrains Mono', monospace;
color: var(--accent-primary);
font-weight: 500;
}
/* Tense Tabs */
.tense-tabs {
display: flex;
gap: 5px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tense-tab {
padding: 10px 18px;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 6px;
font-size: 13px;
font-weight: 500;
color: var(--text-medium);
cursor: pointer;
transition: all 0.2s;
}
.tense-tab:hover {
border-color: var(--accent-primary);
color: var(--accent-primary);
}
.tense-tab.active {
background: var(--accent-primary);
border-color: var(--accent-primary);
color: white;
}
/* ==========================================================================
Examples Section
========================================================================== */
.examples-list {
list-style: none;
}
.example-item {
padding: 15px;
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
margin-bottom: 10px;
}
.example-sentence {
font-size: 15px;
color: var(--text-dark);
margin-bottom: 5px;
}
.example-sentence strong {
color: var(--accent-primary);
}
.example-translation {
font-size: 13px;
color: var(--text-medium);
font-style: italic;
}
/* ==========================================================================
Footer
========================================================================== */
.site-footer {
background: var(--bg-dark);
color: #D1D5DB;
padding: 40px 20px 20px;
margin-top: 40px;
}
.footer-inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.footer-col h4 {
font-size: 13px;
font-weight: 600;
margin-bottom: 12px;
color: white;
}
.footer-col a {
display: block;
color: #9CA3AF;
font-size: 13px;
margin-bottom: 6px;
transition: color 0.2s;
}
.footer-col a:hover {
color: var(--accent-glow);
}
.footer-bottom {
max-width: 1400px;
margin: 25px auto 0;
padding-top: 20px;
border-top: 1px solid var(--border-dark);
text-align: center;
font-size: 12px;
color: #6B7280;
}
/* ==========================================================================
Taxonomy Pagination
========================================================================== */
.navigation.pagination {
display: flex;
justify-content: flex-end;
margin-top: 25px;
padding-top: 20px;
}
.navigation.pagination .nav-links {
display: flex;
align-items: center;
gap: 6px;
}
.navigation.pagination a,
.navigation.pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
font-size: 13px;
font-weight: 500;
text-decoration: none;
border-radius: 8px;
transition: all 0.2s ease;
}
.navigation.pagination a {
background: var(--bg-card);
border: 1px solid var(--border-light);
color: var(--text-medium);
}
.navigation.pagination a:hover {
background: var(--bg-dark);
border: 3px solid var(--accent-glow);
color: var(--accent-glow);
box-shadow: 0 0 12px rgba(0, 212, 255, 0.2);
padding: 0 10px;
}
.navigation.pagination span.current {
background: #1E2128;
border: 2px solid var(--accent-glow);
color: var(--accent-glow);
font-weight: 600;
}
.navigation.pagination span.dots {
background: transparent;
border: none;
color: var(--text-light);
min-width: auto;
padding: 0 4px;
}
.navigation.pagination .prev,
.navigation.pagination .next {
font-weight: 600;
padding: 0 16px;
}
/* ==========================================================================
Taxonomy Article - Dark Elegant Design
========================================================================== */
.taxonomy-article {
background:
linear-gradient(to bottom, #0a0c0f 0px, #0a0c0f 1px, #4a5568 1px, #4a5568 2px, transparent 2px) bottom center / 100% 2px no-repeat,
linear-gradient(180deg, #1E2128 0%, #252931 100%);
border: 2px solid #a8a8a8;
border-radius: 10px;
padding: 30px 35px 40px;
margin-top: 35px;
line-height: 1.7;
position: relative;
overflow: hidden;
}
/* Decorative corner accents */
.taxonomy-article::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 120px;
height: 120px;
background: radial-gradient(circle at top right, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
pointer-events: none;
}
.taxonomy-article::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 120px;
height: 120px;
background: radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.09) 0%, transparent 70%);
pointer-events: none;
}
.taxonomy-article h2 {
font-size: 22px;
font-weight: 700;
color: #e0f2fe;
margin: 2.3em 0 1em;
padding: 0;
border: none;
position: relative;
letter-spacing: -0.3px;
line-height: 1.3;
}
.taxonomy-article h2::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
width: 48px;
height: 2px;
background: var(--accent-glow);
border-radius: 1px;
box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}
.taxonomy-article h3 {
font-size: 17px;
font-weight: 700;
color: #e8ecf4;
margin: 1.8em 0 0.6em;
padding-left: 18px;
position: relative;
border: none;
letter-spacing: -0.1px;
line-height: 1.4;
}
.taxonomy-article h3::after {
content: none;
}
.taxonomy-article h4,
.tense-article h4 {
font-size: 15px;
font-weight: 600;
color: var(--accent-glow) !important;
margin: 22px 0 10px 0;
padding: 0;
}
.taxonomy-article h5,
.tense-article h5 {
font-size: 14px;
font-weight: 600;
color: #E8ECF4 !important;
margin: 18px 0 8px 0;
}
.taxonomy-article h6,
.tense-article h6 {
font-size: 13px;
font-weight: 600;
color: #C8CDD8 !important;
margin: 15px 0 6px 0;
}
.taxonomy-article p {
color: #A0A8B8;
margin-bottom: 12px;
font-size: 14px;
text-indent: 1.5em;
}
.taxonomy-article p.lead {
font-size: 15px;
color: #C8CDD8;
line-height: 1.65;
padding-bottom: 12px;
margin-bottom: 16px;
text-indent: 0;
position: relative;
}
/* Engraved double-line under lead paragraph */
.taxonomy-article p.lead::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(to bottom,
#0a0c0f 0px,
#0a0c0f 1px,
#4a5568 1px,
#4a5568 2px
);
}
.taxonomy-article strong {
color: #FFFFFF;
font-weight: 600;
}
.taxonomy-article em {
color: var(--accent-glow);
font-style: normal;
font-weight: 500;
}
.taxonomy-article .pattern-list {
list-style: none;
padding: 0;
margin: 20px 0;
display: grid;
gap: 14px; /* more breathing room between cards */
}
/* Base card — matte dark panel, subtle cyan edge, soft inner glow.
Mirrors the .contact-form-card / .contact-side-card language. */
.taxonomy-article .pattern-list li {
position: relative;
background: linear-gradient(180deg, rgba(34, 38, 46, 0.6) 0%, rgba(24, 27, 34, 0.6) 100%);
border: 1px solid rgba(255, 255, 255, 0.06);
border-left: 3px solid var(--accent-glow);
padding: 14px 18px 14px 44px; /* left room for the chevron */
border-radius: 4px;
transition: border-color 0.15s, background 0.15s, transform 0.15s;
color: #cbd5e1;
font-size: 14px;
line-height: 1.6;
overflow: hidden;
}
/* Engraved dashed separator running along the bottom of every card —
same visual cue the contact form uses for its key/value rows. */
.taxonomy-article .pattern-list li::after {
content: '';
position: absolute;
left: 18px;
right: 18px;
bottom: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(255,255,255,0.08) 50%, transparent 50%);
background-size: 6px 1px;
background-repeat: repeat-x;
opacity: 0.7;
pointer-events: none;
}
/* Rotating accent: cyan (default), pink, green — three-color cycle matches the
three accent dots used in every hero. */
.taxonomy-article .pattern-list li:nth-child(3n+2) { border-left-color: var(--accent-pink); }
.taxonomy-article .pattern-list li:nth-child(3n+3) { border-left-color: var(--accent-green); }
.taxonomy-article .pattern-list li:hover {
background: linear-gradient(180deg, rgba(34, 38, 46, 0.9) 0%, rgba(24, 27, 34, 0.9) 100%);
border-color: rgba(255, 255, 255, 0.12);
transform: translateX(2px);
}
/* Label color matches the accent of its border — cohesive per-item palette. */
.taxonomy-article .pattern-list li strong {
color: var(--accent-glow);
display: inline;
margin-right: 6px;
font-size: 14px;
font-weight: 700;
}
.taxonomy-article .pattern-list li:nth-child(3n+2) strong { color: var(--accent-pink); }
.taxonomy-article .pattern-list li:nth-child(3n+3) strong { color: var(--accent-green); }
/* Uniform cyan dot prefix on all h3 inside articles — single accent, no rotation */
.taxonomy-article h3::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
background: var(--accent-glow);
border-radius: 50%;
box-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
margin: 0;
font-size: 0;
line-height: 0;
color: transparent;
vertical-align: baseline;
}
/* Clear legacy rotating palette — all h3 use the same cyan dot */
.taxonomy-article h3:nth-of-type(3n+1),
.taxonomy-article h3:nth-of-type(3n+2),
.taxonomy-article h3:nth-of-type(3n+3) {
color: #e8ecf4;
}
.taxonomy-article h3:nth-of-type(3n+2)::before,
.taxonomy-article h3:nth-of-type(3n+3)::before {
background: var(--accent-glow);
box-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
color: transparent;
content: "";
}
@media (max-width: 600px) {
.taxonomy-article {
padding: 22px 18px;
margin-top: 25px;
}
.taxonomy-article h2 {
font-size: 20px;
}
.taxonomy-article h3 {
font-size: 14px;
margin: 18px 0 8px 0;
}
.taxonomy-article p {
font-size: 13px;
}
.taxonomy-article p.lead {
font-size: 14px;
}
.taxonomy-article .pattern-list li {
padding: 10px 14px;
}
.navigation.pagination {
justify-content: center;
}
}
/* ==========================================================================
Similar Verbs Widget
========================================================================== */
.similar-verbs-widget {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 18px;
margin-bottom: 20px;
}
.similar-verbs-widget h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-light);
}
.similar-verbs-list {
list-style: none;
margin: 0;
padding: 0;
}
.similar-verbs-list li {
margin-bottom: 0;
}
.similar-verbs-list a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--border-light);
color: var(--text-dark);
text-decoration: none;
transition: all 0.2s;
}
.similar-verbs-list li:last-child a {
border-bottom: none;
}
.similar-verbs-list a:hover {
color: var(--accent-primary);
padding-left: 5px;
}
.similar-verb-name {
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
font-size: 13px;
}
.similar-verb-arrow {
color: var(--accent-glow);
font-size: 14px;
opacity: 0;
transition: opacity 0.2s;
}
.similar-verbs-list a:hover .similar-verb-arrow {
opacity: 1;
}
/* ==========================================================================
Tense Pages
========================================================================== */
/* Tense Hero */
.tense-hero {
display: flex;
justify-content: center;
align-items: center;
min-height: 90px;
padding: 32px 20px 45px;
padding-right: calc(300px + 30px + 20px); /* Center relative to content area */
}
/* Hero content wrapper */
.hero-content {
position: relative;
text-align: center;
}
.tense-hero h1 {
color: white;
font-size: 32px;
font-weight: 700;
margin: 0;
line-height: 1.2;
}
/* Tagline below title - absolutely positioned so it doesn't affect centering */
.hero-tagline {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
color: var(--accent-glow);
font-size: 16px;
font-style: italic;
font-weight: 500;
margin: 4px 0 0 0;
}
/* On hub pages (tense-hero), taglines are longer descriptive sentences.
Put them back in normal flow, allow wrap, center via max-width. */
.tense-hero .hero-tagline {
position: static;
transform: none;
white-space: normal;
max-width: 560px;
margin: 6px auto 0;
line-height: 1.55;
color: #cbd5e1;
text-align: center;
}
/* Decorative hollow squares — top-right corner of the first .tense-article
dark card. Purely ornamental (aria-hidden). Slight rotation gives an
organic, hand-sketched feel. */
.tense-article { position: relative; }
.article-squares {
position: absolute;
top: 18px;
right: 22px;
display: flex;
gap: 10px;
pointer-events: none;
z-index: 2;
}
.article-square {
width: 22px;
height: 22px;
border: 2px solid transparent;
border-radius: 4px;
background: transparent;
display: block;
}
.article-square--cyan {
border-color: var(--accent-glow);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.45), inset 0 0 8px rgba(0, 212, 255, 0.18);
transform: rotate(-6deg);
}
.article-square--pink {
border-color: var(--accent-pink);
box-shadow: 0 0 10px rgba(236, 72, 153, 0.45), inset 0 0 8px rgba(236, 72, 153, 0.18);
transform: rotate(4deg) translateY(2px);
}
.article-square--green {
border-color: var(--accent-green);
box-shadow: 0 0 10px rgba(16, 185, 129, 0.45), inset 0 0 8px rgba(16, 185, 129, 0.18);
transform: rotate(-3deg) translateY(-1px);
}
/* Smaller variant used on tips cards (light bg, tighter cards) */
.article-squares--sm {
top: 14px;
right: 16px;
gap: 6px;
}
.article-squares--sm .article-square {
width: 14px;
height: 14px;
border-width: 1.5px;
border-radius: 3px;
}
/* On light backgrounds the full-saturation neon colors read garish;
use the deeper palette (teal/rose/emerald) and a softer glow. */
.tips-card .article-square--cyan {
border-color: #0e7490;
box-shadow: 0 0 6px rgba(14, 116, 144, 0.3), inset 0 0 4px rgba(14, 116, 144, 0.12);
}
.tips-card .article-square--pink {
border-color: #be185d;
box-shadow: 0 0 6px rgba(190, 24, 93, 0.3), inset 0 0 4px rgba(190, 24, 93, 0.12);
}
.tips-card .article-square--green {
border-color: #047857;
box-shadow: 0 0 6px rgba(4, 120, 87, 0.3), inset 0 0 4px rgba(4, 120, 87, 0.12);
}
.tips-card { position: relative; }
/* Mobile: shrink + move slightly; hide on ultra-narrow */
@media (max-width: 768px) {
.article-squares { top: 14px; right: 14px; gap: 7px; }
.article-square { width: 16px; height: 16px; border-width: 1.5px; }
.article-squares--sm { top: 12px; right: 12px; gap: 5px; }
.article-squares--sm .article-square { width: 12px; height: 12px; }
}
@media (max-width: 420px) {
.article-squares { display: none; }
}
/* Give cards enough top padding so the absolutely-positioned decorative
squares never overlap the first line of text. The squares reserve ~40px
of vertical space (top: 18 + height: 22), so cards that host them need
at least 56-58px top padding. */
.tense-article:has(> .article-squares) {
padding-top: 58px;
}
.verb-intro:has(> .article-squares) {
padding-top: 54px;
}
.tips-card:has(> .article-squares--sm) {
padding-right: 56px; /* horizontal clearance — small squares sit inline with title */
}
.quiz-card:has(> .article-squares--sm) {
padding-right: 72px; /* extra room so the title doesn't run under the squares */
}
/* Ornament-first case — ornament is centered + low-contrast, so it doesn't
need the full squares-clearance padding. Less space, ornament sits higher. */
.tense-article:has(> .article-squares + .page-ornament),
.tip-article:has(> .article-squares + .page-ornament),
.verb-intro:has(> .article-squares + .page-ornament) {
padding-top: 26px;
}
/* First ornament after squares — small top margin so it sits a little below
the card top edge (not glued to it), but still much closer than a default
32px ornament margin would stack. */
.tense-article > .article-squares + .page-ornament,
.tip-article > .article-squares + .page-ornament,
.verb-intro > .article-squares + .page-ornament,
.coming-soon-article > .article-squares + .page-ornament {
margin-top: 10px;
}
@media (max-width: 420px) {
/* Squares hidden — restore normal top padding on narrow phones */
.tense-article:has(> .article-squares) { padding-top: 30px; }
.verb-intro:has(> .article-squares) { padding-top: 18px; }
.tips-card:has(> .article-squares--sm) { padding-right: 24px; }
.quiz-card:has(> .article-squares--sm) { padding-right: 22px; }
}
/* Hero decorative accents - left of title, vertically centered with h1 */
.hero-accents {
position: absolute;
left: -110px;
top: 14px; /* Center with h1: (32px * 1.2 - 10px) / 2 = 14px */
display: flex;
gap: 8px;
}
.accent-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.accent-dot.cyan {
background: var(--accent-glow);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.6);
}
.accent-dot.pink {
background: var(--accent-pink);
box-shadow: 0 0 10px rgba(236, 72, 153, 0.6);
}
.accent-dot.green {
background: var(--accent-green);
box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}
/* Mini search in hero - right of title, vertically centered with h1 */
.hero-search-mini {
position: absolute;
right: -340px;
top: 1px; /* Center with h1: (38px - 35px) / 2 */
display: flex;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-dark);
border-radius: 6px;
overflow: hidden;
}
.hero-search-mini input {
width: 140px;
padding: 8px 12px;
border: none;
background: transparent;
color: white;
font-size: 13px;
font-family: 'Inter', sans-serif;
}
.hero-search-mini input::placeholder {
color: #6B7280;
}
.hero-search-mini button {
padding: 8px 12px;
border: none;
background: var(--accent-glow);
color: var(--bg-dark);
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.hero-search-mini button:hover {
background: #33E0FF;
}
/* Right-arrow icon used inside search submit buttons (replaces the old → character) */
.search-submit-icon {
display: block;
width: 16px;
height: 16px;
vertical-align: middle;
}
.hero-search-mini:focus-within {
border-color: var(--accent-glow);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}
/* Right column on single verb page — stacks search above syn/ant,
lifts search up via negative margin so it sits visually at title-row level */
/* SYN/ANT column — sits at top of verb-header-content, engraved separator on right at sidebar-left position */
.verb-relations-col {
padding-left: 25px;
padding-right: 25px;
min-width: 0;
position: relative;
}
.verb-relations-col::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 1px;
background: #000;
box-shadow: 1px 0 0 #2d3542;
}
/* Search sits inside .verb-relations-col, absolutely positioned at its top-right
corner (just left of the engraved separator), then lifted to title-row level */
.verb-relations-col .verb-inline-search {
position: absolute;
top: 0;
right: 8px; /* small gap between search and the engraved separator */
transform: translateY(-82px); /* lifts search above the horizontal divider without affecting layout */
z-index: 1; /* above SYN/ANT just in case */
}
/* Engraved horizontal divider between verb title and header content — full-bleed, same style as vertical separator */
.verb-header-divider {
border: 0;
height: 1px;
background: #000000;
box-shadow: 0 1px 0 #2d3542; /* 1px offset — matches vertical separators */
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
margin-top: 16px;
margin-bottom: 28px;
}
/* Inline search on single verb page — matches compact .hero-search-mini look */
.verb-inline-search {
display: inline-flex;
align-self: flex-start;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-dark);
border-radius: 6px;
overflow: hidden;
}
.verb-inline-search input[type="text"] {
width: 140px;
padding: 8px 12px;
border: none;
background: transparent !important;
color: white !important;
font-size: 13px;
font-family: 'Inter', sans-serif;
outline: none;
box-shadow: none;
}
.verb-inline-search input[type="text"]:-webkit-autofill,
.verb-inline-search input[type="text"]:-webkit-autofill:hover,
.verb-inline-search input[type="text"]:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.3) inset !important;
-webkit-text-fill-color: white !important;
caret-color: white;
transition: background-color 5000s ease-in-out 0s;
}
.verb-inline-search input::placeholder {
color: #6B7280;
}
.verb-inline-search button {
padding: 8px 12px;
border: none;
background: var(--accent-glow);
color: var(--bg-dark);
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
.verb-inline-search button:hover {
background: #33E0FF;
}
.verb-inline-search:focus-within {
border-color: var(--accent-glow);
box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
}
/* Tense Hero Content - between hero and article */
.tense-hero-content {
margin-top: -30px;
margin-bottom: 18px; /* breathing room between breadcrumb and the header ad below it */
padding: 0;
}
/* Match sidebar-top vertical alignment with the now-lower header ad on pages
that put a breadcrumb above the ad (archive/taxonomy/listing/search/tense).
The breadcrumb has margin-top:-30px so its visual height eats into the wrapper
padding — final offset needed is small. */
body.archive .sidebar,
body.search .sidebar,
body.tax-verb_type .sidebar,
body.page-template-page-tense .sidebar,
body.page-template-page-verb-listing .sidebar {
margin-top: 10px;
}
/* Breadcrumb navigation */
.tense-breadcrumb {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #6B7280;
}
.tense-breadcrumb a {
color: #0073aa;
text-decoration: none;
transition: color 0.2s;
}
.tense-breadcrumb a:hover {
color: #005177;
text-decoration: underline;
}
.tense-breadcrumb .separator {
color: #9CA3AF;
}
.tense-breadcrumb .current {
color: #1F2937;
font-weight: 500;
}
/* Quick Links navigation */
.tense-quick-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-size: 14px;
}
.tense-quick-links .quick-links-label {
color: #6B7280;
font-weight: 500;
}
.tense-quick-links a {
color: #0073aa;
text-decoration: none;
padding: 5px 12px;
background: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 16px;
transition: all 0.2s;
}
.tense-quick-links a:hover {
background: #e5e7eb;
border-color: #0073aa;
color: #005177;
}
/* Custom text */
.tense-custom-text {
color: #374151;
font-size: 15px;
line-height: 1.6;
}
/* Tense article - reduce top margin */
.tense-article {
margin-top: 0;
}
/* When an ad-break splits the article into two dark cards, flatten the inner
corners so the two halves read as one continuous container interrupted by
the ad — not two separate pieces. */
.tense-article--split-top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-bottom: 0;
}
.tense-article--split-bottom {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 0;
}
/* Small breathing room around the inline ad — enough to separate it from the
flat-cornered card halves, but tighter than the default ad margins so the
split still reads as "one interrupted container". */
.tense-article--split-top + .ad-slot,
.tense-article--split-top + .ad-row {
margin-top: 12px;
margin-bottom: 12px;
}
.ad-slot + .tense-article--split-bottom,
.ad-row + .tense-article--split-bottom {
margin-top: 0;
}
/* Tense article main title (h1) */
.tense-article h1 {
font-size: 24px;
font-weight: 700;
color: #FFFFFF !important;
margin-bottom: 20px;
}
/* ==========================================================================
Tense article — modern dark reference (refactored 2026-04-21).
Single cyan accent for interactive/nav signals. Typography hierarchy
via size + weight instead of color rotation. Clean bullets, no panel.
========================================================================== */
.tense-article {
font-size: 17px;
line-height: 1.75;
color: #d1d5e2;
}
.tense-article p {
font-size: 17px;
line-height: 1.75;
color: #d1d5e2;
margin: 0 0 1.15em;
}
.tense-article > p:first-of-type {
font-size: 18.5px;
color: #f1f5f9;
line-height: 1.65;
margin-bottom: 1.3em;
}
.tense-article a {
color: #22d3ee;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: rgba(34, 211, 238, 0.35);
font-weight: 500;
transition: color 0.15s, text-decoration-color 0.15s;
}
.tense-article a:hover {
color: #67e8f9;
text-decoration-color: #67e8f9;
}
.tense-article strong, .tense-article b { color: #ffffff; font-weight: 700; }
/* H2 — ultra-subtle cyan-tinted white text, cyan underline does the signaling.
Goal: text reads as "bright" but has a barely-perceptible sheen that
echoes the underline color without repeating it loudly. */
.tense-article h2 {
font-size: 22px;
font-weight: 700;
color: #e0f2fe; /* sky-100 — near-white with cyan undertone */
margin: 2.3em 0 1em;
padding: 0;
position: relative;
border: none;
letter-spacing: -0.3px;
line-height: 1.3;
}
.tense-article h2::after {
content: "";
position: absolute;
left: 0;
bottom: -12px;
top: auto;
width: 48px;
height: 2px;
background: var(--accent-glow);
border-radius: 1px;
box-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}
/* Semantic H2s — last (positive closure) and 2nd-last (warning/mistakes).
Subtle tint in H2 text matches the accent; the underline carries the
stronger color signal. */
.tense-article h2:nth-last-of-type(2) {
color: #fce7f3; /* pink-100 — near-white with rose undertone */
}
.tense-article h2:nth-last-of-type(2)::after {
background: var(--accent-pink);
box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}
.tense-article h2:last-of-type {
color: #d1fae5; /* emerald-100 — near-white with green undertone */
}
.tense-article h2:last-of-type::after {
background: var(--accent-green);
box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}
/* Matching accent on list bullets inside those sections */
.tense-article h2:nth-last-of-type(2) ~ ul > li::before {
background: var(--accent-pink);
box-shadow: 0 0 5px rgba(236, 72, 153, 0.4);
}
.tense-article h2:last-of-type ~ ul > li::before {
background: var(--accent-green);
box-shadow: 0 0 5px rgba(16, 185, 129, 0.4);
}
/* First h2 — smaller top margin (article already has padding), otherwise
matches all others. No special override. */
.tense-article h2:first-of-type {
margin-top: 0.4em !important;
}
.tense-article h2:first-of-type::after {
display: block !important;
}
/* H3 — smaller, white text, cyan dot prefix */
.tense-article h3 {
font-size: 17px;
font-weight: 700;
color: #e8ecf4;
margin: 1.8em 0 0.6em;
padding-left: 18px;
position: relative;
letter-spacing: -0.1px;
line-height: 1.4;
}
.tense-article h3::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 8px;
height: 8px;
background: var(--accent-glow);
border-radius: 50%;
box-shadow: 0 0 6px rgba(0, 212, 255, 0.5);
}
/* Clear legacy rotating H3 colors */
.tense-article h3:nth-of-type(3n+1),
.tense-article h3:nth-of-type(3n+2),
.tense-article h3:nth-of-type(3n+3) {
color: #e8ecf4;
}
/* Numbered lists — clean, cyan counter, no panel */
.tense-article ol,
.taxonomy-article ol:not(.pattern-list) {
margin: 0.5em 0 1.4em;
padding-left: 6px;
list-style: none;
counter-reset: tense-counter;
display: block;
gap: 0;
}
.tense-article ol > li,
.taxonomy-article ol:not(.pattern-list) > li {
counter-increment: tense-counter;
position: relative;
padding: 0 0 0 32px;
margin-bottom: 0.75em;
background: none !important;
border: none !important;
border-radius: 0 !important;
font-size: 17px;
line-height: 1.7;
color: #d1d5e2 !important;
overflow: visible;
}
.tense-article ol > li::before,
.taxonomy-article ol:not(.pattern-list) > li::before {
content: counter(tense-counter) ".";
position: absolute;
left: 0;
top: 0;
color: var(--accent-glow);
font-weight: 700;
font-size: 16px;
font-variant-numeric: tabular-nums;
width: 24px;
text-align: right;
line-height: 1.7;
background: none;
box-shadow: none;
}
.tense-article ol > li strong,
.taxonomy-article ol:not(.pattern-list) > li strong { color: #ffffff; }
/* Unordered lists — clean bullets, no panel, generous line-height */
.tense-article ul,
.taxonomy-article ul:not(.pattern-list):not(.modal-meanings):not(.modal-related-list):not(.aux-nav-list):not(.stative-nav-chips):not(.concepts-list) {
margin: 0.5em 0 1.4em;
padding-left: 6px;
list-style: none;
display: block;
gap: 0;
}
.tense-article ul > li,
.taxonomy-article ul:not(.pattern-list):not(.modal-meanings):not(.modal-related-list):not(.aux-nav-list):not(.stative-nav-chips):not(.concepts-list) > li {
padding: 0 0 0 26px;
margin-bottom: 0.75em;
background: none;
border: none;
border-left: none;
border-radius: 0;
position: relative;
font-size: 17px;
line-height: 1.7;
color: #d1d5e2;
transition: none;
overflow: visible;
transform: none;
}
.tense-article ul > li:hover,
.taxonomy-article ul:not(.pattern-list):not(.modal-meanings):not(.modal-related-list):not(.aux-nav-list):not(.stative-nav-chips):not(.concepts-list) > li:hover {
background: none;
border-color: transparent;
transform: none;
}
/* Kill legacy rotating accent borders */
.tense-article ul > li:nth-child(3n+2),
.tense-article ul > li:nth-child(3n+3) { border-left-color: transparent; }
/* Uniform cyan dot marker — single accent, no rotation */
.tense-article ul > li::before,
.taxonomy-article ul:not(.pattern-list):not(.modal-meanings):not(.modal-related-list):not(.aux-nav-list):not(.stative-nav-chips):not(.concepts-list) > li::before {
content: "";
position: absolute;
left: 8px;
top: 0.7em;
width: 7px;
height: 7px;
background: var(--accent-glow);
border-radius: 50%;
box-shadow: 0 0 6px rgba(0, 212, 255, 0.45);
color: transparent;
font-size: 0;
line-height: 0;
}
.tense-article ul > li:nth-child(3n+2)::before,
.tense-article ul > li:nth-child(3n+3)::before {
background: var(--accent-glow);
box-shadow: 0 0 6px rgba(0, 212, 255, 0.45);
color: transparent;
}
/* Remove old engraved bottom separator */
.tense-article ul > li::after,
.taxonomy-article ul:not(.pattern-list):not(.modal-meanings):not(.modal-related-list):not(.aux-nav-list):not(.stative-nav-chips):not(.concepts-list) > li::after {
display: none;
}
/* Nested lists — tighter, smaller, dimmer bullets */
.tense-article li > ul,
.tense-article li > ol,
.taxonomy-article li > ul,
.taxonomy-article li > ol {
margin: 0.5em 0 0.4em;
padding-left: 4px;
}
.tense-article li li,
.taxonomy-article li li {
padding-left: 22px;
margin-bottom: 0.4em;
font-size: 16px;
line-height: 1.6;
background: transparent !important;
border: none !important;
border-left: none !important;
border-radius: 0;
color: #c4c9d4;
}
.tense-article li li::before,
.taxonomy-article li li::before {
content: "";
width: 5px;
height: 5px;
top: 0.7em;
left: 8px;
background: rgba(0, 212, 255, 0.6);
box-shadow: none;
color: transparent;
font-size: 0;
border-radius: 50%;
}
.tense-article li ol li,
.taxonomy-article li ol li { padding-left: 28px; }
.tense-article li ol li::before,
.taxonomy-article li ol li::before {
content: counter(tense-counter) ".";
width: 22px;
height: auto;
left: 0;
top: 0;
background: none;
box-shadow: none;
color: rgba(0, 212, 255, 0.75);
font-size: 14px;
text-align: right;
border-radius: 0;
}
/* Gutenberg inside
— inherit list item type */
.tense-article ol li p,
.tense-article ul li p,
.taxonomy-article ol li p,
.taxonomy-article ul li p {
color: inherit !important;
margin: 0;
padding: 0;
text-indent: 0;
font-size: inherit;
line-height: inherit;
}
.tense-article li p strong,
.tense-article li p b,
.taxonomy-article li p strong,
.taxonomy-article li p b { color: #ffffff !important; }
.tense-article li p em,
.tense-article li p i,
.taxonomy-article li p em,
.taxonomy-article li p i { color: #7dd3fc !important; font-style: italic; }
/* Blockquote — subtle cyan bar */
.tense-article blockquote {
background: rgba(0, 212, 255, 0.05);
border-left: 3px solid var(--accent-glow);
padding: 14px 22px;
margin: 1.4em 0;
border-radius: 0 4px 4px 0;
font-style: italic;
color: #cbd5e1;
font-size: 16.5px;
}
/* Em — muted cyan signals "defined term" */
.tense-article em,
.tense-article i {
color: #7dd3fc;
font-style: italic;
}
/* Related Tenses */
.related-tenses {
margin-top: 40px;
}
.related-tenses .section-title {
margin-bottom: 20px;
}
.related-tenses .tenses-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.tense-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 20px;
text-decoration: none;
transition: all 0.2s;
}
.tense-card:hover {
border-color: var(--accent-glow);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.1);
}
.tense-card h4 {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 8px;
}
.tense-card p {
font-size: 13px;
color: var(--text-medium);
margin-bottom: 10px;
line-height: 1.5;
}
.tense-link {
font-size: 12px;
font-weight: 600;
color: var(--accent-glow);
}
/* ==========================================================================
Responsive
========================================================================== */
@media (max-width: 1024px) {
.main-wrapper {
grid-template-columns: 1fr;
}
.ad-row {
grid-template-columns: 1fr;
}
.sidebar {
order: -1;
}
.ad-slot-sidebar-tall {
height: 250px;
}
/* Reset hero offset when sidebar is stacked */
body.tax-verb_type .hero,
.tense-hero {
padding-right: 20px;
}
}
/* Mobile Menu Toggle Button */
.mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
padding: 8px;
background: transparent;
border: 1px solid var(--border-dark);
border-radius: 6px;
cursor: pointer;
}
.mobile-menu-toggle span {
display: block;
width: 100%;
height: 2px;
background: #D1D5DB;
transition: all 0.3s;
}
.mobile-menu-toggle:hover {
border-color: var(--accent-glow);
}
.mobile-menu-toggle:hover span {
background: var(--accent-glow);
}
/* Mobile menu open state */
.mobile-menu-open .mobile-menu-toggle span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-open .mobile-menu-toggle span:nth-child(2) {
opacity: 0;
}
.mobile-menu-open .mobile-menu-toggle span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
@media (max-width: 900px) {
.categories-grid {
grid-template-columns: 1fr;
}
.verbs-grid {
grid-template-columns: repeat(2, 1fr);
}
.tenses-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 28px;
}
.quick-stats {
gap: 20px;
}
/* Show mobile menu toggle — enlarged to 44×44 tap target, high z-index so
it's never obscured by the logo link, thicker bars for visibility. */
.mobile-menu-toggle {
display: flex;
width: 44px;
height: 44px;
padding: 10px;
gap: 6px;
border-color: rgba(0, 212, 255, 0.4);
position: relative;
z-index: 5;
flex: 0 0 auto;
}
.mobile-menu-toggle span {
height: 2.5px;
background: #fff;
}
/* Shrink the logo on mobile so the hamburger doesn't get squeezed and the
logo tap area doesn't accidentally capture taps meant for the menu. */
.header-main {
padding: 10px 15px;
gap: 12px;
}
.logo {
margin-left: 0;
gap: 8px;
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
}
.logo-image {
height: 36px;
}
.logo-text {
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.logo-text span {
font-size: 13px;
}
/* Mobile navigation */
.site-header {
position: relative;
z-index: 100;
}
.main-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
background: var(--bg-dark);
border-top: 1px solid var(--border-dark);
flex-direction: column;
padding: 15px 20px;
display: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
max-height: calc(100vh - 60px);
overflow-y: auto;
}
.mobile-menu-open .main-nav {
display: flex;
}
.main-nav > a,
.main-nav > .nav-item > a {
padding: 12px 0;
border-bottom: 1px solid var(--border-dark);
text-align: left;
justify-content: flex-start;
white-space: normal;
overflow-wrap: anywhere;
width: 100%;
}
.main-nav .dropdown a {
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
}
.nav-item {
flex-direction: column;
align-items: flex-start;
}
.nav-item .dropdown {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
padding: 0 0 0 20px;
background: transparent;
}
.nav-item .dropdown a {
padding: 10px 0;
border-bottom: 1px solid rgba(55, 65, 81, 0.5);
}
/* Mobile mega dropdown */
.nav-item .dropdown-wide {
flex-direction: column;
min-width: auto;
left: 0;
transform: none;
gap: 15px;
padding: 10px 0 10px 20px;
}
.nav-item:hover .dropdown-wide {
transform: none;
}
.dropdown-section {
border-bottom: 1px solid rgba(55, 65, 81, 0.3);
padding-bottom: 10px;
}
.dropdown-section:last-child {
border-bottom: none;
}
.header-main {
position: relative;
}
.footer-inner {
grid-template-columns: repeat(2, 1fr);
}
/* Verb header mobile */
.verb-forms {
flex-wrap: wrap;
gap: 12px;
}
.verb-form-item {
flex: 0 0 calc(50% - 6px);
}
.verb-title {
font-size: 22px;
}
/* Synonyms/Antonyms mobile */
.verb-syn-ant {
flex-direction: column;
gap: 8px;
}
.syn-ant-group {
width: 100%;
}
}
/* Ultra-narrow phones (< 400px) — trim the ".net" suffix so the hamburger
always has breathing room and can never be tapped on by accident. */
@media (max-width: 400px) {
.logo-text {
font-size: 15px;
}
.logo-text span {
display: none;
}
.logo-image {
height: 32px;
}
.header-main {
padding: 8px 12px;
}
}
@media (max-width: 600px) {
.verbs-grid {
grid-template-columns: 1fr;
}
.verb-forms {
flex-wrap: wrap;
gap: 10px;
}
.verb-form-item {
flex: 0 0 calc(50% - 5px);
}
.footer-inner {
grid-template-columns: 1fr;
}
.alphabet-grid {
grid-template-columns: repeat(7, 1fr);
}
/* Hero adjustments */
.hero {
padding: 25px 15px 35px;
}
.hero h1 {
font-size: 24px;
}
.hero p {
font-size: 14px;
}
.search-box-hero {
flex-direction: column;
}
.search-box-hero input {
padding: 15px;
}
.search-box-hero button {
padding: 15px;
}
.quick-stats {
flex-wrap: wrap;
gap: 15px;
}
.stat-item {
flex: 0 0 calc(50% - 10px);
}
/* Header adjustments */
.logo-image {
height: 36px;
}
.logo-text {
font-size: 16px;
}
.logo-text span {
font-size: 11px;
}
/* Verb header phone */
.verb-title {
font-size: 20px;
}
.verb-badge {
font-size: 10px;
padding: 3px 8px;
}
.verb-form-label {
font-size: 9px;
}
.verb-form-value {
font-size: 13px;
}
/* Main content padding */
.main-wrapper {
padding: 25px 15px;
}
.section-title {
font-size: 18px;
}
}
/* ==========================================================================
Live Search Autocomplete
========================================================================== */
.live-search-dropdown {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
z-index: 9999;
overflow: hidden;
max-height: 400px;
overflow-y: auto;
min-width: 280px;
}
/* Dark theme dropdown for hero search */
.live-search-dropdown.dropdown-dark {
background: var(--bg-medium);
border-color: var(--border-dark);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.search-result-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--border-light);
color: var(--text-dark);
text-decoration: none;
transition: background 0.15s;
white-space: nowrap;
}
.dropdown-dark .search-result-item {
border-bottom-color: var(--border-dark);
color: #E8ECF4;
}
.search-result-item:last-child {
border-bottom: none;
}
.search-result-item:hover,
.search-result-item.active {
background: rgba(0, 212, 255, 0.08);
}
.dropdown-dark .search-result-item:hover,
.dropdown-dark .search-result-item.active {
background: rgba(0, 212, 255, 0.15);
}
.result-verb {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
font-weight: 500;
}
.result-verb mark {
background: rgba(0, 212, 255, 0.3);
color: inherit;
padding: 1px 3px;
border-radius: 3px;
}
.result-type {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 10px;
letter-spacing: 0.5px;
}
.result-type.type-irregular {
background: rgba(236, 72, 153, 0.15);
color: var(--accent-pink);
}
.result-type.type-regular {
background: rgba(16, 185, 129, 0.15);
color: var(--accent-green);
}
.search-no-results {
padding: 20px 16px;
text-align: center;
color: var(--text-medium);
font-size: 14px;
}
.dropdown-dark .search-no-results {
color: #9CA3AF;
}
/* Search Results Page - No Results Card */
.no-results-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 40px;
text-align: center;
}
.no-results-icon {
font-size: 48px;
margin-bottom: 15px;
}
.no-results-card h2 {
font-size: 24px;
margin-bottom: 10px;
color: var(--text-dark);
}
.no-results-card > p {
color: var(--text-medium);
margin-bottom: 30px;
}
.search-suggestions,
.popular-searches {
text-align: left;
max-width: 400px;
margin: 20px auto;
}
.search-suggestions h3,
.popular-searches h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 10px;
color: var(--text-dark);
}
.search-suggestions ul {
list-style: disc;
padding-left: 20px;
color: var(--text-medium);
font-size: 14px;
}
.search-suggestions ul li {
margin-bottom: 5px;
}
.popular-verbs-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.popular-verb-link {
display: inline-block;
padding: 6px 12px;
background: var(--bg-light);
border: 1px solid var(--border-light);
border-radius: 20px;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
color: var(--text-dark);
transition: all 0.2s;
}
.popular-verb-link:hover {
background: var(--accent-primary);
border-color: var(--accent-primary);
color: white;
}
/* ==========================================================================
Grammar Guide hub + Coming Soon cards
========================================================================== */
.grammar-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
margin-top: 14px;
}
.grammar-card {
position: relative;
display: block;
padding: 22px 22px 20px;
background: linear-gradient(180deg, rgba(34, 38, 46, 0.98) 0%, rgba(24, 27, 34, 0.98) 100%);
border: 1px solid rgba(0, 212, 255, 0.18);
border-radius: 6px;
color: #cbd5e1;
text-decoration: none;
overflow: hidden;
transition: transform 0.15s, border-color 0.15s;
}
.grammar-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #00D4FF 20%, #EC4899 60%, #10B981 80%, transparent);
opacity: 0.55;
}
.grammar-card:hover {
transform: translateY(-2px);
border-color: rgba(0, 212, 255, 0.45);
}
.grammar-card--cyan { border-left: 3px solid var(--accent-glow); }
.grammar-card--pink { border-left: 3px solid var(--accent-pink); }
.grammar-card--green { border-left: 3px solid var(--accent-green); }
.grammar-card-title {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 20px;
font-weight: 700;
color: #fff;
letter-spacing: -0.3px;
margin-bottom: 4px;
}
.grammar-card-hint {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--accent-glow);
margin-bottom: 12px;
}
.grammar-card--pink .grammar-card-hint { color: var(--accent-pink); }
.grammar-card--green .grammar-card-hint { color: var(--accent-green); }
.grammar-card-desc {
font-size: 13.5px;
line-height: 1.55;
color: #cbd5e1;
margin-bottom: 14px;
}
.grammar-card-cta {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 600;
color: var(--accent-glow);
letter-spacing: 0.3px;
}
/* Coming-soon state — slightly muted + badge */
.grammar-card.is-soon { opacity: 0.72; }
.grammar-card.is-soon:hover { opacity: 1; }
.grammar-card-badge {
position: absolute;
top: 12px;
right: 12px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: #fff;
background: rgba(236, 72, 153, 0.85);
padding: 4px 8px;
border-radius: 3px;
}
/* ==========================================================================
Grammar Tips hub — sections with grouped cards
========================================================================== */
.tips-section {
margin: 36px 0;
}
.tips-section .section-title {
margin-bottom: 6px;
}
.tips-section-desc {
color: var(--text-medium);
font-size: 14px;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.tips-cards-grid {
display: flex;
flex-direction: column;
gap: 0;
}
.tips-card {
display: block;
padding: 20px 24px 18px;
background: #fff;
border: 1px solid var(--border-light);
border-left-width: 3px;
border-radius: 6px;
text-decoration: none;
color: var(--text-dark);
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
position: relative;
margin-bottom: 16px;
}
.tips-card + .tips-card {
margin-top: 0;
}
.tips-card::after {
content: "";
position: absolute;
left: 24px;
right: 24px;
bottom: -10px;
height: 1px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}
.tips-card:last-child::after { display: none; }
.tips-card--cyan { border-left-color: #0e7490; }
.tips-card--pink { border-left-color: #be185d; }
.tips-card--green { border-left-color: #047857; }
.tips-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.tips-card-title {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.2px;
margin-bottom: 6px;
color: var(--text-dark);
}
.tips-card-desc {
font-size: 13px;
line-height: 1.5;
color: var(--text-medium);
margin-bottom: 10px;
}
.tips-card-cta {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
}
.tips-card--cyan:hover .tips-card-cta { color: #0e7490; }
.tips-card--pink:hover .tips-card-cta { color: #be185d; }
.tips-card--green:hover .tips-card-cta { color: #047857; }
/* ==========================================================================
Individual Grammar Tip page — book-style typography on warm cream bg,
neon hero on top for brand continuity.
========================================================================== */
/* Hero keeps the tense-hero dark styling but adds a category eyebrow */
.tip-hero-eyebrow {
display: inline-block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
padding: 4px 10px;
border-radius: 3px;
margin-bottom: 14px;
color: #fff;
}
.tip-hero-eyebrow--confused-pairs { background: #0e7490; }
.tip-hero-eyebrow--common-mistakes { background: #be185d; }
.tip-hero-eyebrow--usage-patterns { background: #047857; }
.tip-hero-eyebrow--other { background: #475569; }
.tip-hero-title {
font-size: 34px !important;
line-height: 1.2 !important;
letter-spacing: -0.5px !important;
margin-bottom: 10px !important;
}
.tip-hero-tagline {
font-style: italic;
max-width: 620px;
}
/* Wrapper: give the article cream background and extra vertical padding */
.main-wrapper.tip-wrapper {
background: #FBF9F4;
padding-top: 36px;
padding-bottom: 60px;
}
/* Article — book-like typography on a subtle "paper" card that fills the
content column (matches other grammar pages' width). */
.tip-article {
margin: 0;
padding: 44px 56px 40px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 4px 20px rgba(0, 0, 0, 0.04);
font-family: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
font-size: 17.5px;
line-height: 1.75;
color: #1F2937;
}
/* Inner reading column — keeps line length comfortable (65-75 chars) even in
a wider card. Achieved via content max-width rather than card max-width. */
.tip-article > * {
max-width: 780px;
margin-left: 0;
}
.tip-article p {
margin: 0 0 1.2em;
letter-spacing: -0.002em;
}
/* First paragraph — slightly larger, acts as a lead */
.tip-article > p:first-of-type {
font-size: 19px;
line-height: 1.65;
color: #0f172a;
}
/* Headings — sans-serif monospace feel for contrast against serif body,
still colored with neon accents so brand stays consistent */
.tip-article h2 {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.3px;
color: #0f172a;
margin: 2em 0 0.6em;
padding-bottom: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
position: relative;
}
.tip-article h2::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 40px;
height: 2px;
background: linear-gradient(90deg, #0e7490, #be185d 60%, #047857);
}
.tip-article h3 {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 16px;
font-weight: 700;
color: #334155;
margin: 1.8em 0 0.4em;
letter-spacing: -0.2px;
}
/* Lists — book-like, with elegant markers */
.tip-article ul,
.tip-article ol {
margin: 0 0 1.2em;
padding-left: 24px;
}
.tip-article li {
margin-bottom: 0.5em;
line-height: 1.7;
}
.tip-article ul > li::marker {
color: #0e7490;
font-size: 1.1em;
}
.tip-article ol > li::marker {
color: #be185d;
font-weight: 700;
}
/* Nested lists tighten up */
.tip-article li > ul,
.tip-article li > ol {
margin: 0.3em 0 0.5em;
}
/* Strong and em — keep book typography conventions */
.tip-article strong {
color: #0f172a;
font-weight: 700;
}
.tip-article em {
font-style: italic;
color: #334155;
}
/* Inline links — subtle, bookish with cyan accent */
.tip-article a:not(.tip-back-link) {
color: #0e7490;
text-decoration: none;
border-bottom: 1px solid rgba(14, 116, 144, 0.35);
transition: border-color 0.15s, color 0.15s;
}
.tip-article a:not(.tip-back-link):hover {
color: #164e63;
border-bottom-color: #0e7490;
}
/* Success / failure check marks and crosses already in content — make them
render with color context */
.tip-article {
/* Inline color for the unicode check/cross when they appear at end of lines */
}
/* Split-article visual continuity (same approach as tense-article split) */
.tip-article--split-top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
margin-bottom: 0;
padding-bottom: 28px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 -4px 20px rgba(0, 0, 0, 0.02);
}
.tip-article--split-bottom {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-top: none;
margin-top: 0;
padding-top: 28px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.tip-article--split-top + .ad-slot {
margin: 14px 0;
}
/* Footer: back link + related tips in same category */
.tip-footer {
margin: 48px 0 0;
padding-top: 32px;
border-top: 1px dashed rgba(0, 0, 0, 0.15);
}
.tip-back-link {
display: inline-block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #475569;
text-decoration: none;
padding: 8px 14px;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tip-back-link:hover {
background: #1F2937;
color: #fff;
border-color: #1F2937;
}
.tip-related {
margin-top: 32px;
}
.tip-related-title {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #64748b;
margin: 0 0 14px;
}
.tip-related-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 8px;
}
.tip-related-list a {
display: block;
padding: 10px 14px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 4px;
font-family: Charter, Georgia, serif;
font-size: 15px;
color: #334155;
text-decoration: none;
transition: border-color 0.15s, color 0.15s;
}
.tip-related-list a:hover {
border-color: #0e7490;
color: #0e7490;
}
@media (max-width: 768px) {
.tip-article {
font-size: 17px;
padding: 28px 24px 24px;
border-radius: 4px;
}
.tip-hero-title { font-size: 26px !important; }
.main-wrapper.tip-wrapper { padding-top: 24px; padding-bottom: 40px; }
}
/* ==========================================================================
Modal nav widget (sidebar, only on single modal_verb pages)
========================================================================== */
.modal-nav-widget .modal-nav-hub {
display: block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--accent-glow);
text-decoration: none;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(0, 212, 255, 0.2);
transition: color 0.15s;
}
.modal-nav-widget .modal-nav-hub:hover { color: #7dd3fc; }
.modal-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.modal-nav-item {
margin: 0;
border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.modal-nav-item:last-child { border-bottom: none; }
.modal-nav-item a,
.modal-nav-item .modal-nav-name {
display: block;
padding: 9px 10px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
text-decoration: none;
border-left: 3px solid transparent;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.modal-nav-item a:hover {
background: rgba(0, 212, 255, 0.06);
border-left-color: var(--accent-glow);
color: var(--accent-glow);
}
/* Rotating 3-color accent so the list reads like elsewhere on the site */
.modal-nav-item:nth-child(3n+1) a:hover { border-left-color: var(--accent-glow); color: var(--accent-glow); }
.modal-nav-item:nth-child(3n+2) a:hover { border-left-color: var(--accent-pink); color: var(--accent-pink); }
.modal-nav-item:nth-child(3n+3) a:hover { border-left-color: var(--accent-green); color: var(--accent-green); }
.modal-nav-item.is-current .modal-nav-name {
background: linear-gradient(90deg, rgba(236, 72, 153, 0.06), transparent);
border-left-color: var(--accent-pink);
color: var(--accent-pink);
font-weight: 700;
}
/* ==========================================================================
Auxiliary nav widget (sidebar, only on /auxiliary-verbs/)
========================================================================== */
.sidebar-widget .aux-nav-list {
list-style: none !important;
margin: 0 0 16px !important;
padding: 0 !important;
display: flex;
flex-direction: column;
gap: 10px;
}
.sidebar-widget .aux-nav-item {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.sidebar-widget .aux-nav-item::before { content: none !important; }
.sidebar-widget .aux-nav-item::marker { content: "" !important; }
.sidebar-widget .aux-nav-item > a {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--border-light);
border-left-width: 3px;
border-radius: 6px;
text-decoration: none;
transition: transform 0.15s ease, border-color 0.15s, background 0.15s, box-shadow 0.15s;
position: relative;
overflow: hidden;
}
.aux-nav-item--cyan > a { border-left-color: var(--accent-glow); }
.aux-nav-item--pink > a { border-left-color: var(--accent-pink); }
.aux-nav-item--green > a { border-left-color: var(--accent-green); }
.aux-nav-item > a:hover {
transform: translateX(2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.aux-nav-item--cyan > a:hover { background: rgba(0, 212, 255, 0.05); }
.aux-nav-item--pink > a:hover { background: rgba(236, 72, 153, 0.05); }
.aux-nav-item--green > a:hover { background: rgba(16, 185, 129, 0.05); }
/* Monospace chip with the verb name — clear visual anchor */
.aux-nav-name {
flex: 0 0 auto;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.3px;
text-transform: uppercase;
color: #fff;
background: #1F2937;
padding: 4px 9px;
border-radius: 4px;
min-width: 46px;
text-align: center;
}
.aux-nav-item--cyan .aux-nav-name { background: #0e7490; }
.aux-nav-item--pink .aux-nav-name { background: #be185d; }
.aux-nav-item--green .aux-nav-name { background: #047857; }
/* Cue text reads like a micro-caption next to the chip */
.aux-nav-cue {
flex: 1 1 auto;
font-size: 12.5px;
line-height: 1.35;
color: var(--text-medium);
letter-spacing: 0.1px;
}
.aux-nav-item > a:hover .aux-nav-cue {
color: var(--text-dark);
}
/* Bridge link to /modal-verbs/ — button-style for clear CTA separation */
.aux-nav-bridge {
display: block;
margin-top: 4px;
padding: 11px 14px;
background: #1F2937;
border: 1px solid #1F2937;
border-radius: 6px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #fff;
text-decoration: none;
text-align: center;
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.aux-nav-bridge:hover {
background: #111827;
border-color: #111827;
transform: translateY(-1px);
}
/* ==========================================================================
Stative-verb nav widget (sidebar, only on /stative-dynamic-verbs/)
========================================================================== */
.stative-nav-widget .stative-nav-group,
.modal-functions-widget .stative-nav-group,
.phrasal-nav-widget .stative-nav-group {
margin-bottom: 14px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--border-light);
border-left-width: 3px;
border-radius: 6px;
}
.stative-nav-group--cyan { border-left-color: #0e7490; }
.stative-nav-group--pink { border-left-color: #be185d; }
.stative-nav-group--green { border-left-color: #047857; }
.stative-nav-label {
display: block;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.8px;
color: #64748b;
margin-bottom: 6px;
}
.stative-nav-chips {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.stative-nav-chip {
display: inline-block;
padding: 4px 9px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 12px;
font-weight: 600;
color: var(--text-dark);
background: #f1f5f9;
border: 1px solid transparent;
border-radius: 4px;
text-decoration: none;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.stative-nav-group--cyan .stative-nav-chip:hover { background: #0e7490; color: #fff; border-color: #0e7490; }
.stative-nav-group--pink .stative-nav-chip:hover { background: #be185d; color: #fff; border-color: #be185d; }
.stative-nav-group--green .stative-nav-chip:hover { background: #047857; color: #fff; border-color: #047857; }
/* Ungrouped chips (passive/reporting widgets) — standalone cyan hover */
.widget-chips-wrap .stative-nav-chip:hover { background: #0e7490; color: #fff; border-color: #0e7490; }
.widget-chips-wrap { margin-bottom: 14px; }
/* Shared intro paragraph for widgets that need a context line */
.sidebar-widget .widget-intro {
font-size: 12px;
line-height: 1.5;
color: var(--text-medium);
margin: 0 0 10px;
}
/* Classic intransitive/transitive pairs widget */
.pairs-list {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.pairs-item { margin: 0; }
.pairs-link {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--border-light);
border-left: 3px solid #0e7490;
border-radius: 5px;
font-family: 'JetBrains Mono', ui-monospace, monospace;
text-decoration: none;
transition: transform 0.15s, box-shadow 0.15s;
}
.pairs-link:hover {
transform: translateX(2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.pairs-intran { color: #0e7490; font-weight: 700; font-size: 14px; }
.pairs-tran { color: #be185d; font-weight: 700; font-size: 14px; }
.pairs-sep {
color: #94a3b8;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
/* ==========================================================================
Grammar Concepts widget (sidebar, only on individual Grammar Tip pages)
========================================================================== */
.concepts-list {
list-style: none;
margin: 0 0 14px;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.concepts-item { margin: 0; }
.concepts-item > a {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--border-light);
border-left-width: 3px;
border-radius: 5px;
text-decoration: none;
transition: transform 0.15s, background 0.15s, border-color 0.15s;
}
.concepts-item--cyan > a { border-left-color: #0e7490; }
.concepts-item--pink > a { border-left-color: #be185d; }
.concepts-item--green > a { border-left-color: #047857; }
.concepts-item > a:hover { transform: translateX(2px); }
.concepts-item--cyan > a:hover { background: rgba(14, 116, 144, 0.05); }
.concepts-item--pink > a:hover { background: rgba(190, 24, 93, 0.05); }
.concepts-item--green > a:hover { background: rgba(4, 120, 87, 0.05); }
.concepts-title {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 13px;
font-weight: 700;
color: var(--text-dark);
letter-spacing: -0.1px;
}
.concepts-item--cyan > a:hover .concepts-title { color: #0e7490; }
.concepts-item--pink > a:hover .concepts-title { color: #be185d; }
.concepts-item--green > a:hover .concepts-title { color: #047857; }
.concepts-hint {
font-size: 11px;
color: var(--text-medium);
letter-spacing: 0.1px;
}
/* ==========================================================================
Page ornament — decorative typographic divider for top/bottom of articles
========================================================================== */
.page-ornament {
display: flex;
justify-content: center;
align-items: center;
margin: 32px 0;
color: rgba(255, 255, 255, 0.55);
pointer-events: none;
}
.page-ornament svg {
max-width: 100%;
height: auto;
}
/* Light-theme pages (tip book-style) */
.main-wrapper.tip-wrapper .page-ornament {
color: rgba(30, 41, 59, 0.5);
}
@media (max-width: 600px) {
.page-ornament svg { width: 180px; }
.page-ornament { margin: 24px 0; }
}
/* ==========================================================================
Contact form — public disabled notice + admin preview banner
========================================================================== */
.fc-closed-notice {
background: linear-gradient(180deg, rgba(34, 38, 46, 0.95) 0%, rgba(24, 27, 34, 0.95) 100%);
border: 1px solid rgba(0, 212, 255, 0.2);
border-radius: 8px;
padding: 36px 32px;
text-align: center;
color: #cbd5e1;
max-width: 560px;
margin: 30px auto;
}
.fc-closed-notice h3 {
color: #fff;
font-size: 20px;
margin: 0 0 12px;
letter-spacing: -0.2px;
}
.fc-closed-notice p {
font-size: 15px;
line-height: 1.6;
margin: 0;
}
/* Admin preview banner on the public contact form (visible only when
public toggle is OFF and viewer is logged-in admin) */
.fc-admin-preview-banner {
background: rgba(251, 191, 36, 0.12);
border: 1px solid rgba(251, 191, 36, 0.45);
border-left: 4px solid #f59e0b;
border-radius: 4px;
padding: 12px 16px;
margin: 0 0 20px;
font-size: 13.5px;
line-height: 1.5;
color: #e8ecf4;
}
.fc-admin-preview-banner strong { color: #fbbf24; }
.fc-admin-preview-banner em { color: #fde68a; font-style: italic; }
.fc-admin-preview-banner a {
color: #fcd34d;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.fc-admin-preview-banner a:hover { color: #fde68a; }
/* ==========================================================================
Share buttons — native Web Share API on mobile, platform links on desktop
========================================================================== */
.flavor-share {
display: flex;
align-items: center;
gap: 14px;
margin: 36px 0 0;
padding: 16px 20px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
flex-wrap: wrap;
}
.flavor-share-label {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #64748b;
}
.flavor-share-buttons {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.flavor-share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 36px;
height: 36px;
padding: 0;
background: #f1f5f9;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 6px;
color: #475569;
text-decoration: none;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
font-family: inherit;
font-size: inherit;
position: relative;
}
.flavor-share-btn:hover {
transform: translateY(-1px);
}
/* Platform-specific brand-color hovers */
.flavor-share-btn--twitter:hover { background: #0f172a; color: #fff; border-color: #0f172a; }
.flavor-share-btn--facebook:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.flavor-share-btn--linkedin:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; }
.flavor-share-btn--whatsapp:hover { background: #25d366; color: #fff; border-color: #25d366; }
.flavor-share-btn--email:hover { background: #475569; color: #fff; border-color: #475569; }
.flavor-share-btn--copy:hover { background: #0e7490; color: #fff; border-color: #0e7490; }
/* Native share button (mobile) — auto-widens to fit label */
.flavor-share-btn--native {
width: auto;
padding: 0 12px;
gap: 6px;
background: #1F2937;
color: #fff;
border-color: #1F2937;
font-weight: 600;
font-size: 12px;
}
.flavor-share-btn--native:hover {
background: #111827;
border-color: #111827;
}
/* "Copied!" toast on the copy button */
.flavor-share-copied {
position: absolute;
top: -32px;
left: 50%;
transform: translateX(-50%) translateY(4px);
background: #0e7490;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 4px 9px;
border-radius: 4px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.flavor-share-copied::after {
content: "";
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: #0e7490;
}
.flavor-share-btn--copy.is-copied .flavor-share-copied {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
@media (max-width: 600px) {
.flavor-share { padding: 12px 14px; gap: 10px; }
.flavor-share-btn { width: 34px; height: 34px; }
}
/* ==========================================================================
Quizzes — hub cards + single-quiz interactive form
========================================================================== */
/* --- Hub filter pills --- */
.quiz-filter-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0 24px;
padding: 10px 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
}
.quiz-filter-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 18px;
font: inherit;
font-size: 13px;
font-weight: 600;
color: #334155;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.quiz-filter-pill:hover { background: #f1f5f9; border-color: #94a3b8; }
.quiz-filter-pill.is-active {
background: #0f172a;
color: #fff;
border-color: #0f172a;
}
.quiz-filter-pill--cyan.is-active { background: #0e7490; border-color: #0e7490; }
.quiz-filter-pill--pink.is-active { background: #be185d; border-color: #be185d; }
.quiz-filter-pill--green.is-active { background: #047857; border-color: #047857; }
.quiz-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 1px 7px;
background: rgba(148, 163, 184, 0.2);
color: inherit;
border-radius: 10px;
font-size: 11.5px;
font-weight: 700;
font-family: var(--font-mono, ui-monospace, monospace);
}
.quiz-filter-pill.is-active .quiz-filter-count {
background: rgba(255, 255, 255, 0.18);
}
/* --- Hub --- */
.quizzes-section { margin: 36px 0; }
.quizzes-section .section-title { margin-bottom: 6px; }
.quizzes-section-desc {
color: var(--text-medium);
font-size: 14px;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.quizzes-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.quiz-card {
position: relative;
display: flex;
flex-direction: column;
gap: 8px;
padding: 20px 22px 18px;
background: #fff;
border: 1px solid var(--border-light);
border-left-width: 3px;
border-radius: 6px;
text-decoration: none;
color: var(--text-dark);
transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
min-height: 148px;
}
.quiz-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.quiz-card--cyan { border-left-color: #0e7490; }
.quiz-card--pink { border-left-color: #be185d; }
.quiz-card--green { border-left-color: #047857; }
.quiz-card--cyan:hover { border-color: #0e7490; }
.quiz-card--pink:hover { border-color: #be185d; }
.quiz-card--green:hover { border-color: #047857; }
.quiz-card-title {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 16px;
font-weight: 700;
color: var(--text-dark);
line-height: 1.35;
}
.quiz-card-desc {
font-size: 13.5px;
color: var(--text-medium);
line-height: 1.55;
flex: 1;
}
.quiz-card-meta {
display: flex;
align-items: center;
gap: 10px;
margin-top: 4px;
padding-top: 10px;
border-top: 1px dashed rgba(0, 0, 0, 0.08);
font-size: 12.5px;
}
.quiz-card-count {
color: var(--text-medium);
font-weight: 500;
}
.quiz-card-cta {
margin-left: auto;
color: #0e7490;
font-weight: 600;
}
.quiz-card--pink .quiz-card-cta { color: #be185d; }
.quiz-card--green .quiz-card-cta { color: #047857; }
.quiz-card-best {
display: inline-block;
padding: 2px 8px;
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
border-radius: 10px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
}
/* --- Single quiz header — mirrors .verb-header pattern (NOT the hero stack).
Left-aligned block: breadcrumb → title + category pill → tagline.
Uses the shared .breadcrumb class from verb-header for link styling. */
.quiz-header {
background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-medium) 100%);
padding: 22px 0 26px;
overflow-x: hidden;
}
.quiz-header-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.quiz-title-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.quiz-header .quiz-title {
font-size: 28px;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.2;
}
.quiz-category-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
flex: 0 0 auto;
}
.quiz-category-badge--cyan { background: rgba(0, 212, 255, 0.12); color: #67e8f9; border: 1px solid rgba(0, 212, 255, 0.35); }
.quiz-category-badge--pink { background: rgba(236, 72, 153, 0.12); color: #f9a8d4; border: 1px solid rgba(236, 72, 153, 0.35); }
.quiz-category-badge--green { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.35); }
.quiz-header .quiz-tagline {
color: #94a3b8;
font-size: 14px;
margin: 0;
font-style: italic;
}
@media (max-width: 600px) {
.quiz-header { padding: 18px 0 22px; }
.quiz-header .quiz-title { font-size: 22px; }
}
/* ==========================================================================
Exercises — conjugation drills
Uses verb-header-style dark intro + a large interactive drill card.
========================================================================== */
/* --- Header (mirrors .quiz-header / .verb-header pattern) --- */
.exercise-header {
background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-medium) 100%);
padding: 22px 0 26px;
overflow-x: hidden;
}
.exercise-header-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
.exercise-title-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.exercise-header .exercise-title {
font-size: 28px;
font-weight: 700;
color: #fff;
margin: 0;
line-height: 1.2;
}
.exercise-mode-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 12px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
flex: 0 0 auto;
}
/* Drill page title row — 3-column grid guarantees title is truly centered
(balanced 1fr spacers on each side) and badge has its own cell that can
never overlap the title. */
.drill-title-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 48px;
padding: 0 20px;
}
.drill-title-row h1 {
margin: 0;
grid-column: 2;
}
.drill-title-row .exercise-mode-badge {
grid-column: 3;
justify-self: start;
}
/* On narrower viewports badge stacks below title so neither is cramped. */
@media (max-width: 900px) {
.drill-title-row {
grid-template-columns: 1fr;
gap: 10px;
}
.drill-title-row h1,
.drill-title-row .exercise-mode-badge {
grid-column: 1;
justify-self: center;
}
}
.exercise-mode-badge--cyan { background: rgba(0, 212, 255, 0.12); color: #67e8f9; border: 1px solid rgba(0, 212, 255, 0.35); }
.exercise-mode-badge--pink { background: rgba(236, 72, 153, 0.12); color: #f9a8d4; border: 1px solid rgba(236, 72, 153, 0.35); }
.exercise-mode-badge--green { background: rgba(16, 185, 129, 0.12); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.35); }
.exercise-header .exercise-tagline {
color: #94a3b8;
font-size: 14px;
margin: 0;
max-width: 760px;
line-height: 1.6;
}
/* Search row inside the dark header — verb lookup */
.exercise-header-search {
display: flex;
gap: 0;
margin-top: 14px;
max-width: 480px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
overflow: hidden;
transition: border-color 0.15s, background 0.15s;
}
.exercise-header-search:focus-within {
border-color: rgba(0, 212, 255, 0.5);
background: rgba(255, 255, 255, 0.1);
}
.exercise-header-search input[type=text] {
flex: 1;
background: transparent;
border: none;
color: #f8fafc;
font-size: 14px;
padding: 10px 14px;
outline: none;
}
.exercise-header-search input[type=text]::placeholder { color: #64748b; }
.exercise-header-search button {
background: rgba(0, 212, 255, 0.15);
border: none;
border-left: 1px solid rgba(255, 255, 255, 0.08);
cursor: pointer;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.exercise-header-search button:hover { background: rgba(0, 212, 255, 0.3); }
.exercise-header-search .search-submit-icon { filter: brightness(2); opacity: 0.9; }
/* --- Hub grid: one card per drill mode --- */
.exercises-modes-section { margin: 32px 0 40px; }
.exercises-modes-desc {
color: var(--text-medium);
font-size: 14.5px;
margin: -4px 0 22px;
padding-bottom: 12px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.exercises-modes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 18px;
}
.exercise-mode-card {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding: 22px 22px 18px;
background: #fff;
border: 1px solid var(--border-light);
border-left-width: 3px;
border-radius: 8px;
text-decoration: none;
color: var(--text-dark);
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.exercise-mode-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.09);
}
.exercise-mode-card--cyan { border-left-color: #0e7490; }
.exercise-mode-card--pink { border-left-color: #be185d; }
.exercise-mode-card--green { border-left-color: #047857; }
.exercise-mode-card-head {
display: flex;
align-items: center;
gap: 12px;
}
.exercise-mode-card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 8px;
background: #0f172a;
color: #fff;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 18px;
font-weight: 700;
flex: 0 0 auto;
}
.exercise-mode-card--cyan .exercise-mode-card-icon { background: #0e7490; }
.exercise-mode-card--pink .exercise-mode-card-icon { background: #be185d; }
.exercise-mode-card--green .exercise-mode-card-icon { background: #047857; }
.exercise-mode-card-label {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 17px;
font-weight: 700;
color: var(--text-dark);
}
.exercise-mode-card-desc {
font-size: 14px;
color: var(--text-medium);
line-height: 1.55;
flex: 1;
}
.exercise-mode-card-example {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 6px;
font-size: 13.5px;
}
.exercise-mode-card-example code {
padding: 2px 8px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 4px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 13px;
color: #0f172a;
}
.exercise-mode-card-example--mix {
justify-content: center;
color: #64748b;
font-style: italic;
}
.exercise-mode-card-arrow { color: #94a3b8; font-weight: 700; }
.exercise-mode-card-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-top: 4px;
padding-top: 12px;
border-top: 1px dashed rgba(0, 0, 0, 0.08);
font-size: 13px;
}
.exercise-mode-card-cta {
color: #0e7490;
font-weight: 600;
}
.exercise-mode-card--pink .exercise-mode-card-cta { color: #be185d; }
.exercise-mode-card--green .exercise-mode-card-cta { color: #047857; }
.exercise-mode-card-best {
padding: 3px 10px;
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
border-radius: 10px;
font-size: 11.5px;
font-weight: 600;
}
/* --- Exercises vs Quizzes comparison --- */
.exercises-vs-quizzes { margin: 44px 0 32px; }
.exercises-vs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 12px;
}
.exercises-vs-card {
background: #fff;
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 18px 22px;
}
.exercises-vs-card h3 {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 15px;
margin: 0 0 10px;
color: var(--text-dark);
}
.exercises-vs-card h3 a {
color: #0e7490;
text-decoration: none;
}
.exercises-vs-card h3 a:hover { text-decoration: underline; }
.exercises-vs-card ul {
list-style: none;
padding: 0;
margin: 0;
}
.exercises-vs-card li {
font-size: 13.5px;
color: var(--text-medium);
padding: 6px 0 6px 20px;
position: relative;
line-height: 1.55;
}
.exercises-vs-card li::before {
content: "›";
position: absolute;
left: 0;
color: #94a3b8;
font-weight: 700;
}
.exercises-vs-note {
text-align: center;
color: var(--text-medium);
font-style: italic;
margin: 16px 0 0;
font-size: 14px;
}
/* --- Drill stage (single drill page) --- */
.drill-stage {
margin: 20px 0 36px;
}
/* Stats strip — always 4 equal columns; best-streak hides content (not the cell)
until first completion so the layout stays stable in a single row. */
.drill-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 18px;
}
.drill-stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 10px;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
border-radius: 8px;
min-width: 0;
}
.drill-stat-value {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 26px;
font-weight: 700;
color: #0f172a;
line-height: 1;
}
.drill-stat-value--streak { color: #be185d; }
.drill-stat--best .drill-stat-value { color: #047857; }
.drill-stat-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #64748b;
margin-top: 6px;
}
/* Level toggle — pick between irregular-only pool and all verbs */
.drill-level-toggle {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 10px;
padding: 8px 12px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
flex-wrap: wrap;
}
.drill-level-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #64748b;
}
.drill-level-pills {
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: center;
}
.drill-level-pill {
display: inline-flex;
align-items: center;
padding: 5px 12px;
font-size: 12.5px;
font-weight: 600;
color: #334155;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
text-decoration: none;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.drill-level-pill:hover { background: #f1f5f9; border-color: #94a3b8; }
.drill-level-pill.is-active {
background: #0f172a;
color: #fff;
border-color: #0f172a;
}
.drill-level-current-count {
margin-left: auto;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11.5px;
color: #64748b;
}
/* Verb picker — optional row above the drill card for jumping to a specific verb */
.drill-verb-picker {
margin: 0 0 14px;
padding: 10px 14px;
background: #f8fafc;
border: 1px dashed #cbd5e1;
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.drill-verb-picker-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #64748b;
}
.drill-verb-picker-row {
display: flex;
align-items: center;
gap: 8px;
}
.drill-verb-picker-input {
flex: 1;
font: inherit;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 14px;
padding: 7px 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 6px;
color: #0f172a;
transition: border-color 0.12s, box-shadow 0.12s;
}
.drill-verb-picker-input:focus {
outline: none;
border-color: #0e7490;
box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.12);
}
.drill-verb-picker-btn {
font: inherit;
font-size: 13px;
font-weight: 600;
padding: 7px 16px;
background: #0e7490;
color: #fff;
border: 1px solid #0e7490;
border-radius: 6px;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.drill-verb-picker-btn:hover { background: #155e75; border-color: #155e75; }
.drill-verb-picker-clear {
font-size: 12.5px;
font-weight: 600;
color: #64748b;
text-decoration: none;
padding: 4px 8px;
border-radius: 4px;
transition: background 0.12s, color 0.12s;
}
.drill-verb-picker-clear:hover {
background: #fef2f2;
color: #b91c1c;
}
/* Main drill card — where the action is */
.drill-card {
position: relative;
padding: 34px 32px 28px;
background: #fff;
border: 1px solid var(--border-light);
border-radius: 12px;
box-shadow: 0 2px 14px rgba(15, 23, 42, 0.04);
transition: border-color 0.2s, box-shadow 0.2s;
}
.drill-card.is-correct {
border-color: #10b981;
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
}
.drill-card.is-wrong {
border-color: #ef4444;
box-shadow: 0 4px 20px rgba(239, 68, 68, 0.15);
}
.drill-prompt {
text-align: center;
margin-bottom: 22px;
}
.drill-prompt-text {
display: block;
font-size: 15px;
color: #64748b;
margin-bottom: 8px;
font-weight: 500;
letter-spacing: 0.01em;
}
.drill-prompt-text strong {
color: #0f172a;
font-weight: 700;
}
.drill-verb {
display: inline-block;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 44px;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.01em;
padding: 4px 18px;
background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
border-radius: 10px;
border: 1px solid #cbd5e1;
min-width: 180px;
line-height: 1.2;
}
.drill-form {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 520px;
margin: 0 auto;
}
.drill-input {
width: 100%;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 22px;
text-align: center;
padding: 14px 18px;
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 8px;
color: #0f172a;
transition: border-color 0.15s, box-shadow 0.15s;
letter-spacing: 0.01em;
}
.drill-input:focus {
outline: none;
border-color: #0e7490;
box-shadow: 0 0 0 4px rgba(14, 116, 144, 0.12);
}
.drill-input[disabled] {
background: #f8fafc;
color: #475569;
}
.drill-input::placeholder {
color: #94a3b8;
font-size: 15px;
letter-spacing: 0;
font-family: var(--font-family, -apple-system, sans-serif);
text-transform: none;
}
.drill-form-actions {
display: flex;
gap: 8px;
justify-content: center;
}
.drill-btn {
font: inherit;
font-size: 14.5px;
font-weight: 600;
padding: 10px 22px;
border-radius: 6px;
cursor: pointer;
border: 1.5px solid transparent;
transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}
.drill-btn--check {
background: #0e7490;
color: #fff;
border-color: #0e7490;
min-width: 120px;
}
.drill-btn--check:hover { background: #155e75; border-color: #155e75; transform: translateY(-1px); }
.drill-btn--skip {
background: #fff;
color: #64748b;
border-color: #cbd5e1;
}
.drill-btn--skip:hover { background: #f8fafc; color: #334155; border-color: #94a3b8; }
.drill-btn--next {
background: #0f172a;
color: #fff;
border-color: #0f172a;
min-width: 120px;
}
.drill-btn--next:hover { background: #1e293b; border-color: #1e293b; transform: translateY(-1px); }
/* Feedback panel (shown after check/skip) */
.drill-feedback {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 16px;
margin-top: 22px;
padding: 16px 18px;
border-radius: 8px;
animation: drill-feedback-in 0.22s ease;
}
.drill-card.is-correct .drill-feedback {
background: #ecfdf5;
border: 1px solid #a7f3d0;
}
.drill-card.is-wrong .drill-feedback {
background: #fef2f2;
border: 1px solid #fecaca;
}
.drill-feedback-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
font-size: 22px;
font-weight: 700;
flex: 0 0 auto;
}
.drill-card.is-correct .drill-feedback-icon { background: #10b981; color: #fff; }
.drill-card.is-wrong .drill-feedback-icon { background: #ef4444; color: #fff; }
.drill-feedback-headline {
font-size: 15.5px;
font-weight: 700;
margin-bottom: 2px;
}
.drill-card.is-correct .drill-feedback-headline { color: #065f46; }
.drill-card.is-wrong .drill-feedback-headline { color: #991b1b; }
.drill-feedback-detail {
font-size: 14px;
line-height: 1.55;
}
.drill-card.is-correct .drill-feedback-detail { color: #065f46; }
.drill-card.is-wrong .drill-feedback-detail { color: #7f1d1d; }
.drill-feedback-detail strong {
font-family: var(--font-mono, ui-monospace, monospace);
font-weight: 700;
}
.drill-feedback-detail em {
font-family: var(--font-mono, ui-monospace, monospace);
font-style: normal;
color: #b91c1c;
text-decoration: line-through;
}
@keyframes drill-feedback-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Mode switcher (pills below card) */
.drill-mode-switcher {
margin-top: 26px;
padding: 14px 16px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.drill-mode-switcher-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #64748b;
flex: 0 0 auto;
}
.drill-mode-switcher-pills {
display: flex;
gap: 6px;
flex-wrap: wrap;
flex: 1;
}
.drill-mode-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 16px;
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
color: #334155;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.drill-mode-pill:hover { background: #f1f5f9; border-color: #94a3b8; }
.drill-mode-pill.is-current {
background: #0f172a;
color: #fff;
border-color: #0f172a;
}
.drill-mode-pill--cyan.is-current { background: #0e7490; border-color: #0e7490; }
.drill-mode-pill--pink.is-current { background: #be185d; border-color: #be185d; }
.drill-mode-pill--green.is-current { background: #047857; border-color: #047857; }
.drill-mode-pill-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
opacity: 0.85;
flex: 0 0 auto;
}
.drill-mode-pill-icon svg { width: 16px; height: 16px; display: block; }
.drill-mode-pill.is-current .drill-mode-pill-icon { opacity: 1; }
/* Keyboard hint line */
.drill-keyboard-hint {
text-align: center;
font-size: 12.5px;
color: #94a3b8;
margin: 16px 0 0;
}
.drill-keyboard-hint kbd {
display: inline-block;
padding: 2px 7px;
background: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 4px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 11.5px;
color: #334155;
box-shadow: 0 1px 0 #e2e8f0;
}
/* Related section at bottom of drill */
.drill-related { margin-top: 40px; }
.drill-related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
}
.drill-related-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 16px 20px 14px;
background: #fff;
border: 1px solid var(--border-light);
border-left-width: 3px;
border-radius: 6px;
text-decoration: none;
color: var(--text-dark);
transition: transform 0.12s, box-shadow 0.12s;
}
.drill-related-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.drill-related-card--pink { border-left-color: #be185d; }
.drill-related-card--green { border-left-color: #047857; }
.drill-related-card-title {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 15px;
font-weight: 700;
}
.drill-related-card-desc { font-size: 13.5px; color: var(--text-medium); line-height: 1.55; }
.drill-related-card-cta { font-size: 13px; font-weight: 600; color: #be185d; margin-top: 2px; }
.drill-related-card--green .drill-related-card-cta { color: #047857; }
/* Sidebar widget: Drill Modes */
.exercise-nav-widget .exercise-nav-list {
list-style: none;
margin: 10px 0 12px;
padding: 0;
}
.exercise-nav-item + .exercise-nav-item { margin-top: 4px; }
.exercise-nav-item a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
background: #fff;
border: 1px solid var(--border-light);
border-left-width: 3px;
border-radius: 6px;
text-decoration: none;
color: var(--text-dark);
font-size: 13.5px;
transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.exercise-nav-item a:hover { background: #f8fafc; transform: translateX(2px); }
.exercise-nav-item--cyan a { border-left-color: #0e7490; }
.exercise-nav-item--pink a { border-left-color: #be185d; }
.exercise-nav-item--green a { border-left-color: #047857; }
.exercise-nav-item.is-current a {
background: #0f172a;
color: #fff;
border-color: #0f172a;
}
.exercise-nav-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: #f1f5f9;
border-radius: 6px;
color: #475569;
flex: 0 0 auto;
}
.exercise-nav-icon .exercise-nav-svg { display: block; }
.exercise-nav-item--cyan .exercise-nav-icon { background: #e0f2fe; color: #0e7490; }
.exercise-nav-item--pink .exercise-nav-icon { background: #fce7f3; color: #be185d; }
.exercise-nav-item--green .exercise-nav-icon { background: #d1fae5; color: #047857; }
.exercise-nav-item.is-current .exercise-nav-icon {
background: rgba(255,255,255,0.15);
color: #fff;
}
.exercise-nav-label { font-weight: 600; }
.exercise-nav-hub {
display: inline-block;
margin-top: 4px;
font-size: 12.5px;
font-weight: 600;
color: #0e7490;
text-decoration: none;
}
.exercise-nav-hub:hover { color: #155e75; }
/* --- Sidebar widget: "Drill This Verb" (on single-verb pages) --- */
.verb-practice-widget { }
.verb-practice-lead {
font-size: 13px;
color: var(--text-medium);
line-height: 1.55;
margin: 8px 0 12px;
}
.verb-practice-list {
list-style: none;
margin: 0 0 10px;
padding: 0;
}
.verb-practice-item + .verb-practice-item { margin-top: 6px; }
.verb-practice-item a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--border-light);
border-left-width: 3px;
border-radius: 6px;
text-decoration: none;
color: var(--text-dark);
font-size: 13.5px;
transition: background 0.12s, transform 0.12s, border-color 0.12s;
}
.verb-practice-item a:hover {
background: #f8fafc;
transform: translateX(2px);
}
.verb-practice-item--cyan a { border-left-color: #0e7490; }
.verb-practice-item--pink a { border-left-color: #be185d; }
.verb-practice-item--green a { border-left-color: #047857; }
.verb-practice-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 6px;
background: #f1f5f9;
color: #475569;
flex: 0 0 auto;
}
.verb-practice-item--cyan .verb-practice-icon { background: #e0f2fe; color: #0e7490; }
.verb-practice-item--pink .verb-practice-icon { background: #fce7f3; color: #be185d; }
.verb-practice-item--green .verb-practice-icon { background: #d1fae5; color: #047857; }
.verb-practice-label {
flex: 1;
font-weight: 600;
}
.verb-practice-arrow {
color: #94a3b8;
font-weight: 700;
transition: transform 0.12s, color 0.12s;
}
.verb-practice-item a:hover .verb-practice-arrow {
color: #0f172a;
transform: translateX(2px);
}
.verb-practice-hub {
display: inline-block;
font-size: 12.5px;
font-weight: 600;
color: #0e7490;
text-decoration: none;
margin-top: 2px;
}
.verb-practice-hub:hover { color: #155e75; }
/* --- Mobile --- */
@media (max-width: 700px) {
.exercises-vs-grid { grid-template-columns: 1fr; }
.drill-stats { grid-template-columns: repeat(2, 1fr); }
.drill-card { padding: 22px 18px 18px; }
.drill-verb { font-size: 32px; padding: 4px 14px; min-width: 0; }
.drill-input { font-size: 18px; padding: 12px 14px; }
.drill-feedback { grid-template-columns: auto 1fr; gap: 10px; }
.drill-feedback .drill-btn--next { grid-column: span 2; justify-self: stretch; text-align: center; }
.drill-mode-switcher { flex-direction: column; align-items: stretch; }
}
@media (max-width: 600px) {
.exercise-header { padding: 18px 0 22px; }
.exercise-header .exercise-title { font-size: 22px; }
}
/* --- Quiz body --- */
/* .quiz-article sits inside .tense-article which is a dark container with
inherited light-gray text. Quiz content is on white cards, so force dark
text color at the article root and let each sub-element override if needed. */
.quiz-article .quiz-intro {
font-size: 16px;
line-height: 1.7;
color: #cbd5e1;
padding-bottom: 14px;
margin-bottom: 20px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.quiz-article .quiz-intro p {
margin: 0 0 10px;
color: #cbd5e1;
font-size: 16px;
line-height: 1.7;
}
.quiz-article .quiz-intro p:last-child { margin-bottom: 0; }
.quiz-article .quiz-intro a { color: #67e8f9; }
/* --- Progress bar (shown only in progressive mode) --- */
.quiz-progress {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
padding: 0 2px;
}
.quiz-progress-label {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 12px;
font-weight: 600;
color: #94a3b8;
letter-spacing: 0.04em;
flex: 0 0 auto;
min-width: 120px;
}
.quiz-progress-bar {
flex: 1;
height: 6px;
background: rgba(148, 163, 184, 0.18);
border-radius: 3px;
overflow: hidden;
}
.quiz-progress-fill {
height: 100%;
background: linear-gradient(90deg, #06b6d4 0%, #22d3ee 100%);
width: 10%;
border-radius: 3px;
transition: width 0.35s ease;
box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}
/* --- Score bar (sticky-feeling summary at top) --- */
.quiz-scorebar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
padding: 14px 18px;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
border-radius: 8px;
margin-bottom: 22px;
}
.quiz-scorebar-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #64748b;
}
.quiz-scorebar-values {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 22px;
font-weight: 700;
color: #0f172a;
line-height: 1;
}
.quiz-score-current { color: #047857; }
.quiz-score-sep { color: #94a3b8; margin: 0 3px; }
.quiz-scorebar-answered {
font-size: 13px;
color: #64748b;
margin-left: auto;
}
.quiz-scorebar-best {
padding: 3px 10px;
background: #ecfdf5;
color: #047857;
border: 1px solid #a7f3d0;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
}
.quiz-reset-btn {
padding: 5px 12px;
background: transparent;
color: #64748b;
border: 1px solid #cbd5e1;
border-radius: 6px;
font: inherit;
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.quiz-reset-btn:hover {
background: #fef2f2;
color: #b91c1c;
border-color: #fca5a5;
}
/* --- Question card --- */
.quiz-form { margin: 0; }
.quiz-q {
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 18px 20px 16px;
margin: 0 0 16px;
background: #fff;
color: #0f172a;
transition: border-color 0.2s;
}
.quiz-q.is-answered {
background: #fafbfc;
}
.quiz-q-legend {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 0;
margin: 0 0 14px;
font-size: 15.5px;
color: #0f172a;
line-height: 1.55;
}
.quiz-q-num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
padding: 3px 9px;
background: #0f172a;
color: #fff;
border-radius: 4px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.02em;
flex: 0 0 auto;
margin-top: 1px;
}
.quiz-q-prompt {
flex: 1;
font-weight: 500;
color: #0f172a;
}
.quiz-q-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.quiz-q-option {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 11px 14px;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 6px;
font: inherit;
text-align: left;
color: var(--text-dark);
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.quiz-q-option:hover:not([disabled]) {
background: #f8fafc;
border-color: #94a3b8;
}
.quiz-q-option[disabled] {
cursor: default;
opacity: 0.92;
}
.quiz-q-letter {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: #f1f5f9;
color: #475569;
border-radius: 4px;
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 12.5px;
font-weight: 700;
flex: 0 0 auto;
}
.quiz-q-text { flex: 1; font-size: 14.5px; }
.quiz-q-mark {
width: 20px;
height: 20px;
flex: 0 0 auto;
opacity: 0;
transition: opacity 0.2s;
}
.quiz-q-option.is-correct {
background: #ecfdf5;
border-color: #10b981;
color: #065f46;
}
.quiz-q-option.is-correct .quiz-q-letter {
background: #10b981;
color: #fff;
}
.quiz-q-option.is-correct .quiz-q-mark {
opacity: 1;
background: no-repeat center/contain url("data:image/svg+xml;utf8,");
}
.quiz-q-option.is-incorrect {
background: #fef2f2;
border-color: #ef4444;
color: #991b1b;
}
.quiz-q-option.is-incorrect .quiz-q-letter {
background: #ef4444;
color: #fff;
}
.quiz-q-option.is-incorrect .quiz-q-mark {
opacity: 1;
background: no-repeat center/contain url("data:image/svg+xml;utf8,");
}
.quiz-q-explanation {
margin-top: 12px;
padding: 10px 14px;
background: #eff6ff;
border-left: 3px solid #3b82f6;
border-radius: 4px;
font-size: 13.5px;
line-height: 1.55;
color: #1e3a8a;
}
.quiz-q-explanation strong { color: #1e40af; }
/* --- Per-question nav (Prev / Next) --- */
.quiz-q-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.quiz-nav-btn {
display: inline-flex;
align-items: center;
padding: 8px 16px;
background: #fff;
color: #334155;
border: 1.5px solid #e2e8f0;
border-radius: 6px;
font: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s;
}
.quiz-nav-btn:hover:not([disabled]) {
background: #f8fafc;
border-color: #94a3b8;
color: #0f172a;
transform: translateY(-1px);
}
.quiz-nav-btn[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.quiz-nav-next {
margin-left: auto;
background: #0e7490;
color: #fff;
border-color: #0e7490;
}
.quiz-nav-next:hover:not([disabled]) {
background: #155e75;
border-color: #155e75;
color: #fff;
}
/* --- Progressive mode: only .is-active question visible with fade --- */
.quiz-form--progressive .quiz-q {
display: none;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.28s ease, transform 0.28s ease;
}
.quiz-form--progressive .quiz-q.is-active {
display: block;
}
.quiz-form--progressive .quiz-q.is-visible {
opacity: 1;
transform: translateY(0);
}
/* --- Review mode: after finish, show all questions inline --- */
.quiz-form--reviewing .quiz-q {
display: block !important;
opacity: 1 !important;
transform: none !important;
}
.quiz-form--reviewing .quiz-q-nav {
display: none; /* nav has no purpose in review mode */
}
/* --- Finish block --- */
.quiz-finish {
margin-top: 22px;
padding: 24px 22px;
background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
border: 1px solid #334155;
border-radius: 10px;
color: #e2e8f0;
text-align: center;
}
.quiz-finish-score {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 22px;
font-weight: 600;
color: #f8fafc;
margin-bottom: 6px;
}
.quiz-finish-score strong { color: #6ee7b7; font-weight: 700; }
.quiz-finish-percent { color: #94a3b8; font-size: 16px; margin-left: 6px; }
.quiz-finish-msg {
font-size: 14.5px;
color: #cbd5e1;
margin-bottom: 16px;
}
.quiz-finish-actions {
display: inline-flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.quiz-retry-btn, .quiz-more-btn, .quiz-review-btn {
display: inline-block;
padding: 9px 18px;
border-radius: 6px;
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: background 0.12s, transform 0.12s;
border: none;
font-family: inherit;
}
.quiz-retry-btn {
background: #0e7490;
color: #fff;
}
.quiz-retry-btn:hover { background: #155e75; transform: translateY(-1px); }
.quiz-review-btn {
background: rgba(148, 163, 184, 0.15);
color: #e2e8f0;
border: 1px solid rgba(148, 163, 184, 0.35);
}
.quiz-review-btn:hover { background: rgba(148, 163, 184, 0.25); transform: translateY(-1px); }
.quiz-more-btn {
background: rgba(148, 163, 184, 0.15);
color: #e2e8f0;
border: 1px solid rgba(148, 163, 184, 0.35);
}
.quiz-more-btn:hover { background: rgba(148, 163, 184, 0.25); transform: translateY(-1px); }
/* --- Related quizzes grid --- */
.quiz-related { margin-top: 36px; }
.quiz-related .tenses-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
}
.quiz-related .tense-card {
display: flex;
flex-direction: column;
padding: 0;
text-decoration: none;
border-left-width: 3px;
overflow: hidden;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.quiz-related .tense-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.quiz-related .tense-card--cyan { border-left-color: #0e7490; }
.quiz-related .tense-card--pink { border-left-color: #be185d; }
.quiz-related .tense-card--green { border-left-color: #047857; }
/* Title sits in its own header band with a full-width dashed separator below. */
.quiz-related .tense-card-title {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 15px;
font-weight: 700;
padding: 14px 18px 12px;
border-bottom: 1px dashed rgba(15, 23, 42, 0.12);
line-height: 1.3;
}
.quiz-related .tense-card--cyan .tense-card-title { color: #0e7490; }
.quiz-related .tense-card--pink .tense-card-title { color: #be185d; }
.quiz-related .tense-card--green .tense-card-title { color: #047857; }
.quiz-related .tense-card-desc {
font-size: 13.5px;
color: var(--text-medium);
line-height: 1.55;
padding: 12px 18px 4px;
flex: 1;
}
.quiz-related .tense-card-cta {
font-size: 13px;
font-weight: 600;
color: #0e7490;
padding: 0 18px 14px;
}
.quiz-related .tense-card--pink .tense-card-cta { color: #be185d; }
.quiz-related .tense-card--green .tense-card-cta { color: #047857; }
/* --- Mobile --- */
/* --- Sidebar: Quiz Categories widget --- */
.quiz-nav-widget .quiz-nav-list {
list-style: none;
margin: 10px 0 12px;
padding: 0;
}
.quiz-nav-item {
margin: 0;
}
.quiz-nav-item + .quiz-nav-item {
margin-top: 4px;
}
.quiz-nav-item a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 12px;
background: #fff;
border: 1px solid var(--border-light);
border-left-width: 3px;
border-radius: 6px;
text-decoration: none;
color: var(--text-dark);
font-size: 13.5px;
transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.quiz-nav-item a:hover {
background: #f8fafc;
transform: translateX(2px);
}
.quiz-nav-item--cyan a { border-left-color: #0e7490; }
.quiz-nav-item--pink a { border-left-color: #be185d; }
.quiz-nav-item--green a { border-left-color: #047857; }
.quiz-nav-item.is-current a {
background: #0f172a;
color: #fff;
border-color: #0f172a;
}
.quiz-nav-item.is-current.quiz-nav-item--cyan a { border-left-color: #22d3ee; }
.quiz-nav-item.is-current.quiz-nav-item--pink a { border-left-color: #f472b6; }
.quiz-nav-item.is-current.quiz-nav-item--green a { border-left-color: #34d399; }
.quiz-nav-label { font-weight: 600; }
.quiz-nav-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
padding: 1px 7px;
background: rgba(148, 163, 184, 0.18);
border-radius: 10px;
font-size: 11.5px;
font-weight: 700;
font-family: var(--font-mono, ui-monospace, monospace);
color: inherit;
}
.quiz-nav-item.is-current .quiz-nav-count {
background: rgba(255, 255, 255, 0.2);
}
.quiz-nav-hub {
display: inline-block;
margin-top: 4px;
font-size: 12.5px;
font-weight: 600;
color: #0e7490;
text-decoration: none;
}
.quiz-nav-hub:hover { color: #155e75; }
@media (max-width: 600px) {
.quiz-scorebar { gap: 10px; padding: 12px 14px; }
.quiz-scorebar-answered { margin-left: 0; width: 100%; }
.quiz-q { padding: 14px 14px 12px; }
.quiz-q-legend { font-size: 15px; }
.quiz-q-option { padding: 10px 12px; gap: 10px; }
.quiz-q-letter { width: 24px; height: 24px; font-size: 12px; }
.quiz-q-text { font-size: 14px; }
.quiz-finish { padding: 20px 16px; }
.quiz-finish-score { font-size: 19px; }
.quizzes-cards-grid { grid-template-columns: 1fr; }
.quiz-progress { flex-wrap: wrap; gap: 8px; }
.quiz-progress-label { min-width: 0; flex: 1 1 auto; }
.quiz-nav-btn { padding: 8px 12px; font-size: 13px; }
}