/* ======================================================= K12 CRAFTER — V2 (per design brief 2026-05-24) Palette: navy + navy-dark dark | cream-white light | blue structural | green accent Green appears only in: eyebrow / primary CTAs / prices / star ratings / trust bar Type: Poppins 700–800 headings | Manrope 400–700 body+UI Section padding: 80px Scope: ======================================================= */ .k12-v2 { --v2-navy: #001D6E; --v2-navy-dark: #0D1545; --v2-cream: #F7F8FC; --v2-blue: #0047BB; --v2-green: #2BB656; --v2-green-dark: #1E8C40; --v2-border: #DDE0EA; --v2-ink: #111827; --v2-muted: #6B7280; --v2-on-dark: rgba(255,255,255,0.85); --v2-on-dark-muted: rgba(255,255,255,0.60); --v2-shadow-hover: 0 12px 32px -8px rgba(0,71,187,0.12); --v2-head: 'Poppins', system-ui, -apple-system, sans-serif; --v2-body: 'Manrope', system-ui, -apple-system, sans-serif; background: var(--v2-cream); color: var(--v2-ink); font-family: var(--v2-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } .k12-v2 *, .k12-v2 *::before, .k12-v2 *::after { box-sizing: border-box; } .k12-v2 p { margin: 0; } .k12-v2 ul { list-style: none; padding: 0; margin: 0; } .k12-v2 a { color: inherit; text-decoration: none; } .k12-v2 img { max-width: 100%; height: auto; display: block; } .k12-v2 h1, .k12-v2 h2, .k12-v2 h3, .k12-v2 h4 { font-family: var(--v2-head); font-weight: 700; margin: 0; letter-spacing: -0.02em; line-height: 1.2; color: inherit; } /* HEADING CONTRAST — override Elementor Kit's .elementor h1 { color: #001D6E } which renders headings invisible on navy sections. Specificity (0,3,0) beats Elementor's (0,1,1). */ .k12-v2 .v2-section--dark .v2-display, .k12-v2 .v2-section--dark .v2-h2, .k12-v2 .v2-section--dark h1, .k12-v2 .v2-section--dark h2, .k12-v2 .v2-section--dark h3 { color: #fff; } .k12-v2 .v2-section--light .v2-display, .k12-v2 .v2-section--light .v2-h2, .k12-v2 .v2-section--light h1, .k12-v2 .v2-section--light h2, .k12-v2 .v2-section--light h3 { color: var(--v2-navy); } /* SECTION + CONTAINER — strict 80px rhythm */ .k12-v2 .v2-section { padding-block: 80px; } .k12-v2 .v2-section--dark { background: var(--v2-navy); color: var(--v2-on-dark); } .k12-v2 .v2-section--dark-alt { background: var(--v2-navy-dark); color: var(--v2-on-dark); } .k12-v2 .v2-section--light { background: var(--v2-cream); color: var(--v2-ink); } .k12-v2 .v2-container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 32px; } /* TYPOGRAPHY */ .k12-v2 .v2-display { font-family: var(--v2-head); font-size: clamp(2.125rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; } .k12-v2 .v2-h2 { font-family: var(--v2-head); font-size: clamp(1.625rem, 3.5vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } /* EYEBROW — spec: green Manrope 700 uppercase 0.7rem 0.14em LS, 12px above H2 */ .k12-v2 .v2-eyebrow { font-family: var(--v2-body); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-green); display: block; margin-bottom: 12px; } /* BUTTONS — four types only */ /* 1. Green CTA on dark sections */ .k12-v2 .v2-cta-green { display: inline-flex; align-items: center; gap: 10px; background: var(--v2-green); color: #fff; font-family: var(--v2-body); font-weight: 600; font-size: 0.9375rem; padding: 14px 28px; border: 1px solid var(--v2-green); border-radius: 8px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .k12-v2 .v2-cta-green:hover { background: var(--v2-green-dark); border-color: var(--v2-green-dark); transform: translateY(-1px); } /* 2. Navy CTA on light sections */ .k12-v2 .v2-cta-navy { display: inline-flex; align-items: center; gap: 10px; background: var(--v2-navy); color: #fff; font-family: var(--v2-body); font-weight: 600; font-size: 0.9375rem; padding: 14px 28px; border: 1px solid var(--v2-navy); border-radius: 8px; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .k12-v2 .v2-cta-navy:hover { background: var(--v2-navy-dark); border-color: var(--v2-navy-dark); transform: translateY(-1px); } /* 3. Ghost — soft secondary */ .k12-v2 .v2-ghost { display: inline-flex; align-items: center; gap: 10px; background: transparent; font-family: var(--v2-body); font-weight: 600; font-size: 0.9375rem; padding: 13px 27px; border-radius: 8px; cursor: pointer; transition: background 0.2s ease, opacity 0.2s ease; color: inherit; } .k12-v2 .v2-section--dark .v2-ghost, .k12-v2 .v2-section--dark-alt .v2-ghost { border: 1px solid rgba(255,255,255,0.35); color: #fff; } .k12-v2 .v2-section--dark .v2-ghost:hover, .k12-v2 .v2-section--dark-alt .v2-ghost:hover { background: rgba(255,255,255,0.08); } .k12-v2 .v2-section--light .v2-ghost { border: 1px solid var(--v2-border); color: var(--v2-ink); } .k12-v2 .v2-section--light .v2-ghost:hover { background: #fff; border-color: var(--v2-navy); } /* 4. Nav transparent link */ .k12-v2 .v2-nav__links a { background: transparent; font-family: var(--v2-body); font-weight: 500; font-size: 0.9375rem; color: var(--v2-ink); padding: 6px 0; position: relative; } .k12-v2 .v2-nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--v2-blue); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; } .k12-v2 .v2-nav__links a:hover { color: var(--v2-blue); } .k12-v2 .v2-nav__links a:hover::after { transform: scaleX(1); } /* CARDS — hairline border at rest, blue shadow on hover */ .k12-v2 .v2-card { background: #fff; border: 1px solid var(--v2-border); border-radius: 12px; transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease; overflow: hidden; display: block; color: inherit; } .k12-v2 .v2-card:hover { box-shadow: var(--v2-shadow-hover); transform: translateY(-2px); border-color: rgba(0,71,187,0.20); } /* GREEN MARKERS — stars + price */ .k12-v2 .v2-stars { color: var(--v2-green); font-size: 0.875rem; letter-spacing: 2px; display: inline-block; } .k12-v2 .v2-rating-count { color: var(--v2-muted); font-weight: 500; font-size: 0.8125rem; margin-left: 6px; letter-spacing: 0; } .k12-v2 .v2-price { color: var(--v2-green); font-family: var(--v2-body); font-weight: 700; font-size: 1.125rem; } .k12-v2 .v2-price-orig { color: var(--v2-muted); font-weight: 400; font-size: 0.875rem; text-decoration: line-through; margin-right: 8px; } /* PHOTO PLACEHOLDER */ .k12-v2 .v2-ph { position: relative; overflow: hidden; border-radius: 8px; background: rgba(0,29,110,0.04); display: flex; align-items: center; justify-content: center; } .k12-v2 .v2-section--dark .v2-ph, .k12-v2 .v2-section--dark-alt .v2-ph { background: rgba(255,255,255,0.05); } .k12-v2 .v2-ph::after { content: ''; position: absolute; inset: 12px; border: 1px dashed currentColor; opacity: 0.18; border-radius: 4px; } .k12-v2 .v2-ph__label { position: relative; font-family: var(--v2-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; color: currentColor; } .k12-v2 .v2-ph--portrait { aspect-ratio: 3/4; } .k12-v2 .v2-ph--landscape { aspect-ratio: 4/3; } .k12-v2 .v2-ph--hero { aspect-ratio: 5/4; } /* NAV */ .k12-v2 .v2-nav { position: sticky; top: 0; z-index: 50; background: rgba(247,248,252,0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--v2-border); } .k12-v2 .v2-nav__inner { max-width: 1240px; margin-inline: auto; padding: 18px 32px; display: flex; align-items: center; gap: 32px; } .k12-v2 .v2-logo { font-family: var(--v2-head); font-size: 1.25rem; font-weight: 800; color: var(--v2-navy); letter-spacing: -0.025em; } .k12-v2 .v2-nav__links { display: flex; gap: 32px; margin-left: 40px; } .k12-v2 .v2-nav__cta-wrap { margin-left: auto; } .k12-v2 .v2-nav__cta-wrap .v2-cta-navy { padding: 10px 20px; font-size: 0.875rem; } /* HERO */ .k12-v2 .v2-hero { padding-block: 96px 80px; } .k12-v2 .v2-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; } .k12-v2 .v2-hero__body { margin-top: 24px; font-size: 1.0625rem; line-height: 1.65; color: var(--v2-on-dark-muted); max-width: 480px; } .k12-v2 .v2-hero__ctas { margin-top: 36px; display: flex; gap: 16px; flex-wrap: wrap; } /* SECTION HEADERS */ .k12-v2 .v2-section-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 48px; gap: 24px; flex-wrap: wrap; } .k12-v2 .v2-section-head--center { text-align: center; flex-direction: column; align-items: center; margin-bottom: 56px; } .k12-v2 .v2-section-head--center .v2-h2 { max-width: 720px; } /* FEATURED PRODUCTS */ .k12-v2 .v2-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .k12-v2 .v2-product__media { aspect-ratio: 4/3; background: rgba(0,29,110,0.04); } .k12-v2 .v2-product__body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; } .k12-v2 .v2-product__tag { font-family: var(--v2-body); font-size: 0.6875rem; font-weight: 700; color: var(--v2-blue); letter-spacing: 0.08em; text-transform: uppercase; } .k12-v2 .v2-product__name { font-family: var(--v2-head); font-size: 1.125rem; font-weight: 700; color: var(--v2-ink); line-height: 1.3; } .k12-v2 .v2-product__desc { color: var(--v2-muted); font-size: 0.875rem; line-height: 1.55; } .k12-v2 .v2-product__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--v2-border); } /* ABOUT */ .k12-v2 .v2-about__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; } .k12-v2 .v2-about__body { font-size: 1.0625rem; line-height: 1.7; color: var(--v2-on-dark); margin-top: 20px; } .k12-v2 .v2-about__body + .v2-about__body { margin-top: 16px; } .k12-v2 .v2-about__cta { margin-top: 32px; display: inline-flex; } /* CATEGORIES — 5-card grid with visual zone + body */ .k12-v2 .v2-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .k12-v2 .v2-cat { padding: 0; display: flex; flex-direction: column; } .k12-v2 .v2-cat__visual { aspect-ratio: 5/3; position: relative; background: linear-gradient(135deg, rgba(0,71,187,0.04) 0%, rgba(0,29,110,0.10) 100%); border-bottom: 1px solid var(--v2-border); overflow: hidden; display: flex; align-items: center; justify-content: center; } .k12-v2 .v2-cat__visual-mark { font-family: var(--v2-head); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 800; color: var(--v2-navy); opacity: 0.10; letter-spacing: -0.04em; line-height: 1; user-select: none; } .k12-v2 .v2-cat__visual-tag { position: absolute; top: 12px; left: 14px; font-family: var(--v2-body); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v2-blue); opacity: 0.75; } .k12-v2 .v2-cat__body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .k12-v2 .v2-cat__name { font-family: var(--v2-head); font-size: 1.0625rem; font-weight: 700; color: var(--v2-navy); margin-bottom: 6px; } .k12-v2 .v2-cat__desc { font-size: 0.8125rem; color: var(--v2-muted); line-height: 1.5; margin-bottom: 18px; flex: 1; } .k12-v2 .v2-cat__count { font-family: var(--v2-body); font-size: 0.75rem; font-weight: 700; color: var(--v2-blue); letter-spacing: 0.06em; text-transform: uppercase; } .k12-v2 .v2-cat:hover .v2-cat__visual-mark { opacity: 0.16; } /* TRUST BAR */ .k12-v2 .v2-trust { padding-block: 64px; } .k12-v2 .v2-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .k12-v2 .v2-trust__item { display: flex; align-items: center; gap: 16px; } .k12-v2 .v2-trust__icon { width: 44px; height: 44px; flex-shrink: 0; background: rgba(43,182,86,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--v2-green); } .k12-v2 .v2-trust__icon svg { width: 22px; height: 22px; } .k12-v2 .v2-trust__value { font-family: var(--v2-head); font-size: 1.5rem; font-weight: 700; color: #fff; line-height: 1; } .k12-v2 .v2-trust__label { font-size: 0.8125rem; color: var(--v2-on-dark-muted); margin-top: 4px; } /* TESTIMONIALS */ .k12-v2 .v2-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .k12-v2 .v2-testimonial { padding: 28px; display: flex; flex-direction: column; gap: 14px; } .k12-v2 .v2-testimonial p { font-size: 0.9375rem; line-height: 1.6; color: var(--v2-ink); flex: 1; } .k12-v2 .v2-testimonial__author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--v2-border); } .k12-v2 .v2-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--v2-blue); color: #fff; font-family: var(--v2-body); font-weight: 700; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .k12-v2 .v2-testimonial__name { font-family: var(--v2-body); font-size: 0.875rem; font-weight: 700; color: var(--v2-ink); line-height: 1.2; } .k12-v2 .v2-testimonial__role { font-size: 0.75rem; color: var(--v2-muted); margin-top: 2px; } /* CLOSING CTA */ .k12-v2 .v2-closing { text-align: center; } .k12-v2 .v2-closing .v2-eyebrow { display: block; } .k12-v2 .v2-closing .v2-h2 { max-width: 720px; margin: 0 auto; } .k12-v2 .v2-closing__body { margin-top: 16px; font-size: 1.0625rem; color: var(--v2-on-dark-muted); max-width: 560px; margin-inline: auto; } .k12-v2 .v2-closing__ctas { margin-top: 36px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* EMAIL OPT-IN */ .k12-v2 .v2-email__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; } .k12-v2 .v2-email__lede { font-size: 1rem; color: var(--v2-muted); margin-top: 12px; max-width: 480px; } .k12-v2 .v2-email__form { display: flex; gap: 8px; } .k12-v2 .v2-email__input { flex: 1; padding: 14px 16px; font-family: var(--v2-body); font-size: 0.9375rem; border: 1px solid var(--v2-border); border-radius: 8px; background: #fff; color: var(--v2-ink); } .k12-v2 .v2-email__input::placeholder { color: var(--v2-muted); } .k12-v2 .v2-email__input:focus { outline: none; border-color: var(--v2-blue); box-shadow: 0 0 0 3px rgba(0,71,187,0.12); } .k12-v2 .v2-email__note { margin-top: 12px; font-size: 0.8125rem; color: var(--v2-muted); } /* FOOTER */ .k12-v2 .v2-footer { background: var(--v2-navy-dark); color: var(--v2-on-dark-muted); padding: 64px 0 32px; } .k12-v2 .v2-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.1); } .k12-v2 .v2-footer__brand { max-width: 280px; } .k12-v2 .v2-footer__brand .v2-logo { color: #fff; } .k12-v2 .v2-footer__tagline { margin-top: 12px; font-size: 0.9375rem; line-height: 1.6; color: rgba(255,255,255,0.55); } .k12-v2 .v2-footer__col-title { font-family: var(--v2-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--v2-green); margin-bottom: 16px; } .k12-v2 .v2-footer__list { display: flex; flex-direction: column; gap: 10px; } .k12-v2 .v2-footer__list a { font-size: 0.875rem; color: rgba(255,255,255,0.65); } .k12-v2 .v2-footer__list a:hover { color: #fff; } .k12-v2 .v2-footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 24px; font-size: 0.8125rem; color: rgba(255,255,255,0.4); } /* RESPONSIVE */ @media (max-width: 968px) { .k12-v2 .v2-hero__grid { grid-template-columns: 1fr; gap: 48px; } .k12-v2 .v2-about__grid { grid-template-columns: 1fr; } .k12-v2 .v2-products { grid-template-columns: 1fr; } .k12-v2 .v2-cats { grid-template-columns: repeat(2, 1fr); } .k12-v2 .v2-testimonials { grid-template-columns: 1fr; } .k12-v2 .v2-trust__grid { grid-template-columns: repeat(2, 1fr); } .k12-v2 .v2-email__grid { grid-template-columns: 1fr; } .k12-v2 .v2-footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .k12-v2 .v2-section { padding-block: 64px; } .k12-v2 .v2-nav__links { display: none; } .k12-v2 .v2-cats { grid-template-columns: 1fr; } .k12-v2 .v2-email__form { flex-direction: column; } }