/* ============================================================================ Token of Trust — "tot-navy" theme · concept v1.1 (ecommerce-hardened) ---------------------------------------------------------------------------- v1.0.0 (baseline, faithful design-11 extraction) is retained at tot-navy-1.0.0.css. v1.1 hardens it to the ecommerce style-guide quality bar: WCAG 2.2 AA contrast + visible focus-visible rings, >=44px tap targets, a semantic token layer, full interactive states, accessible form styles, trust/social-proof component slots (placeholder — never fabricate claims), an explicit CTA hierarchy, color-scheme, and perf-conscious motion. Do not minify. One rule per line; keep the section headers. ========================================================================== */ /* --- 1. Design tokens ---------------------------------------------------- */ :root { color-scheme: light; /* Enterprise anchor */ --navy: #10294b; --navy-2: #173763; --navy-soft: #1e4275; /* Soft neutrals */ --cream: #faf8f4; --card: #ffffff; --line: #e6e2d9; --line-cool: #dfe6ee; --ink: #1b2a40; --muted: #4d5a70; /* darkened from v1.0 (#5d6b80) for AA on cream + white */ /* Warm + trust accents (decorative) */ --teal: #0d9391; /* deepened for >=3:1 on cream (decorative/large use) */ --teal-ink: #0b6360; /* AA-safe teal for small text (kickers/links) */ --coral: #bf3d2c; /* AA on cream (~5.1:1) — safe as normal text (.support-line) */ --green: #1d9e5f; --green-d: #17854f; --gold: #8a6012; /* deep amber, AA on cream (~5.2:1) — safe for text + rating icons */ --grad: linear-gradient(115deg, var(--teal), #3b82c4); /* Semantic tokens (v1.1) — the layer components should consume */ --color-cta: #16794a; /* primary action bg; white text = AA (~5.4:1) */ --color-cta-hover: #115f3a; --color-trust: var(--teal-ink); --color-error: #b3261e; --color-success: #157a4a; --color-warning: #8a5a10; --surface-card: var(--card); --surface-raised: var(--card); --text-muted: var(--muted); --focus-ring: #4f7fff; /* >=3:1 focus outline on BOTH cream (~3.4:1) and navy (~3.6:1) */ /* Shape */ --r: 20px; --r-sm: 13px; --shadow: 0 12px 36px rgba(16, 41, 75, .10); --shadow-soft: 0 8px 24px rgba(27, 42, 64, .07); /* Spacing scale */ --s1: 8px; --s2: 16px; --s3: 24px; --s4: 44px; --s5: 72px; --s6: 104px; /* Type families */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --tap: 44px; /* minimum interactive target */ } /* --- 1b. Dark theme ------------------------------------------------------- Applies automatically for OS/browser dark mode, and is togglable ahead of any future manual switch via [data-theme="dark"] / [data-theme="light"] on (the attribute always wins over the media query). Same token names, dark values only — components below never re-branch on theme. */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; } } :root[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy: #17335a; --navy-2: #1f4272; --navy-soft: #2c527f; --cream: #0b1220; --card: #131c2c; --line: #263349; --line-cool: #2b3c58; --ink: #e7ecf5; --muted: #9aa9c2; --teal: #2bb3a6; --teal-ink: #5eead4; --coral: #ff9478; --green: #34d399; --green-d: #22c55e; --gold: #f2c14e; --grad: linear-gradient(115deg, var(--teal), #60a5fa); --color-cta: #1c9c5e; --color-cta-hover: #22b56c; --color-trust: var(--teal-ink); --color-error: #ff6b6b; --color-success: #34d399; --color-warning: #f2b84b; --surface-card: var(--card); --surface-raised: var(--card); --text-muted: var(--muted); --focus-ring: #7f9fff; --shadow: 0 12px 36px rgba(0, 0, 0, .45); --shadow-soft: 0 8px 24px rgba(0, 0, 0, .35); } } :root[data-theme="dark"] { --navy: #17335a; --navy-2: #1f4272; --navy-soft: #2c527f; --cream: #0b1220; --card: #131c2c; --line: #263349; --line-cool: #2b3c58; --ink: #e7ecf5; --muted: #9aa9c2; --teal: #2bb3a6; --teal-ink: #5eead4; --coral: #ff9478; --green: #34d399; --green-d: #22c55e; --gold: #f2c14e; --grad: linear-gradient(115deg, var(--teal), #60a5fa); --color-cta: #1c9c5e; --color-cta-hover: #22b56c; --color-trust: var(--teal-ink); --color-error: #ff6b6b; --color-success: #34d399; --color-warning: #f2b84b; --surface-card: var(--card); --surface-raised: var(--card); --text-muted: var(--muted); --focus-ring: #7f9fff; --shadow: 0 12px 36px rgba(0, 0, 0, .45); --shadow-soft: 0 8px 24px rgba(0, 0, 0, .35); } /* --- 2. Reset & base ----------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); background: var(--cream); color: var(--ink); line-height: 1.65; font-size: 16px; } img, svg { max-width: 100%; } a { color: inherit; } /* Global visible focus — never remove the outline, only replace it (v1.1). */ :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; } /* --- 3. Layout ----------------------------------------------------------- */ .container { max-width: 1150px; margin: 0 auto; padding: 0 var(--s3); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 12px 18px; z-index: 100; border-radius: 0 0 10px 0; } .skip-link:focus { left: 0; } .center { text-align: center; } .center .section-lede { margin: 0 auto; } section { padding: var(--s5) 0; } /* --- 4. Typography ------------------------------------------------------- */ h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); line-height: 1.12; letter-spacing: -.025em; margin: var(--s2) 0; font-weight: 800; color: var(--navy); } h1 .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } h2 { font-size: clamp(1.65rem, 3.3vw, 2.35rem); letter-spacing: -.02em; line-height: 1.16; margin: 10px 0 14px; font-weight: 800; color: var(--navy); } .kicker { font-size: .875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal-ink); } .lede { font-size: 1.13rem; color: var(--muted); max-width: 52ch; } .section-lede { color: var(--muted); max-width: 62ch; font-size: 1.05rem; } .support-line { font-size: 1rem; font-weight: 700; color: var(--coral); margin-top: 10px; } .eyebrow { display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: .875rem; font-weight: 700; color: var(--navy); } .eyebrow .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green); } .eyebrow .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: pulse 2.2s infinite; } /* --- 5. Buttons — CTA hierarchy + full states (v1.1) --------------------- */ /* primary = green/cta · secondary = navy · tertiary = line/outline */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 12px 24px; border-radius: 12px; font-weight: 700; font-size: .95rem; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, filter .15s, background .15s; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); filter: brightness(.96); } .btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; filter: grayscale(.2); } .btn.is-loading, .btn[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; } .btn.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: #fff; animation: btnspin .7s linear infinite; } @keyframes btnspin { to { transform: rotate(360deg); } } .btn-green, .btn-primary { background: var(--color-cta); color: #fff; box-shadow: 0 7px 20px rgba(21, 122, 74, .28); } .btn-green:hover, .btn-primary:hover { background: var(--color-cta-hover); } .btn-navy, .btn-secondary { background: var(--navy); color: #fff; } .btn-navy:hover, .btn-secondary:hover { background: var(--navy-2); } .btn-line, .btn-tertiary, .btn-outline { background: #fff; color: var(--navy); border: 1.5px solid var(--line-cool); } .btn-line:hover, .btn-tertiary:hover, .btn-outline:hover { border-color: var(--navy); } /* --- 6. Header / primary nav (>=44px targets) --------------------------- */ header.site { position: sticky; top: 0; z-index: 50; background: rgba(250, 248, 244, .92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .nav-row { display: flex; align-items: center; justify-content: space-between; height: 70px; } .brand { display: flex; align-items: center; text-decoration: none; min-height: var(--tap); } .brand img { height: 34px; width: auto; display: block; } nav.primary ul { display: flex; gap: 20px; list-style: none; align-items: center; } nav.primary a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--muted); } nav.primary a:hover { color: var(--navy); } .nav-cta { display: flex; gap: 12px; align-items: center; } .hamburger { display: none; background: none; border: 0; cursor: pointer; min-width: var(--tap); min-height: var(--tap); } .hamburger span { display: block; width: 24px; height: 2.5px; background: var(--ink); margin: 5px auto; border-radius: 2px; } /* --- 7. Proof strip ------------------------------------------------------ */ .proof { background: var(--navy); color: #e2ebf6; padding: 18px 0; } .proof .container { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: center; justify-content: center; } .proof span { font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; white-space: nowrap; } .proof b { color: #fff; } .proof .sep { opacity: .45; } /* --- 8. Footer ----------------------------------------------------------- */ footer.site { border-top: 1px solid var(--line); padding: var(--s5) 0; background: #f4f1ea; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s4); } .foot-grid h3 { font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 800; } .foot-grid ul { list-style: none; } .foot-grid li { margin-bottom: 4px; } .foot-grid a { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; font-size: .95rem; font-weight: 600; } .foot-grid a:hover { color: var(--teal-ink); } .copyright { margin-top: var(--s4); color: var(--muted); font-size: .9rem; } /* --- 9. Interaction / reveal -------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; } .reveal.in { opacity: 1; transform: none; } /* Composited pulse (transform + opacity) — avoids non-composited box-shadow animation. */ @keyframes pulse { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.6); opacity: 0; } } /* --- 10. Accessible forms (v1.1) ---------------------------------------- */ /* Field group: label + control + help/validation. required/optional marked. */ .form-field { display: grid; gap: 6px; margin-bottom: var(--s2); } .form-label { font-weight: 700; font-size: .95rem; color: var(--ink); } .form-label .req { color: var(--color-error); } /* required marker */ .form-label .opt { color: var(--muted); font-weight: 400; } /* optional marker */ .form-help { font-size: .9rem; color: var(--muted); } /* aria-describedby hint */ .form-control { width: 100%; min-height: var(--tap); padding: 11px 14px; border: 1.5px solid var(--line-cool); border-radius: 10px; font: inherit; font-size: 1rem; background: #fff; color: var(--ink); } .form-control::placeholder { color: #7a869a; } .form-control:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-color: var(--navy); } .form-control[aria-invalid="true"], .form-control.is-error { border-color: var(--color-error); } .form-control.is-success { border-color: var(--color-success); } .field-error { color: var(--color-error); font-size: .9rem; font-weight: 600; } /* invalid state */ .field-success { color: var(--color-success); font-size: .9rem; font-weight: 600; } /* success state */ /* --- 11. Trust / social-proof component slots (v1.1) -------------------- */ /* IMPORTANT: content is placeholder / needs-review. Never ship fabricated ratings, testimonials, badges, guarantees, or customer/partner logos — source-copy real claims or mark them needs-review. */ /* Reviews & ratings (e.g. star rating, "G2" / "Capterra" review card) */ .rating { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); } .stars { color: var(--gold); letter-spacing: 2px; font-size: 1.05rem; } .review-card { background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; } /* Testimonial / customer quote */ .testimonial { background: var(--surface-card); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--r-sm); padding: 18px 20px; } .testimonial blockquote, .testimonial .quote { font-size: 1.02rem; color: var(--ink); } .testimonial .cite { margin-top: 10px; font-size: .9rem; color: var(--muted); font-style: normal; } /* Trust badge (security / compliance / certification) */ .trust-badge { display: inline-flex; align-items: center; gap: 8px; background: #eef4ff; border: 1px solid var(--line-cool); color: var(--navy); border-radius: 999px; padding: 8px 14px; font-size: .9rem; font-weight: 700; } /* Reassurance callout (guarantee / returns / refund / risk-free) */ .reassurance { display: flex; align-items: center; gap: 10px; background: #f0f8f3; border: 1px solid #d3e9db; border-radius: var(--r-sm); padding: 12px 16px; font-weight: 600; color: var(--ink); } /* Logo strip ("as seen in" / press / customer / partner logos) */ .logo-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; opacity: .85; } .logo-strip .logo { height: 26px; display: inline-flex; align-items: center; color: var(--muted); font-weight: 800; letter-spacing: .04em; } /* --- 12. CTA hierarchy helpers + mobile CTA (v1.1) ---------------------- */ .cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .mobile-cta { display: none; } /* sticky primary CTA on small screens (below) */ /* --- 13. Responsive foundation ------------------------------------------ */ @media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr; } nav.primary { display: none; position: absolute; top: 70px; left: 0; right: 0; background: var(--cream); border-bottom: 1px solid var(--line); padding: 12px 24px; } nav.primary.open { display: block; } nav.primary ul { flex-direction: column; align-items: stretch; gap: 0; } nav.primary a { min-height: var(--tap); } .hamburger { display: inline-flex; align-items: center; justify-content: center; } .nav-cta .btn-line { display: none; } /* thumb-reachable primary CTA */ .mobile-cta { display: flex; position: sticky; bottom: 0; z-index: 60; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(250, 248, 244, .96); border-top: 1px solid var(--line); backdrop-filter: blur(10px); } .mobile-cta .btn { flex: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } .btn.is-loading::after { animation: none; } html { scroll-behavior: auto; } } /* --- 14. Mobile legibility floor (a11y) --------------------------------- */ /* On phone/tablet widths, no actionable or body text renders below the 14px WCAG legibility minimum. max(0.875rem, 1em) only ever RAISES a size (never shrinks below 14px), and !important lets it override page-local type scales so no tenant page can opt an element under the floor. Desktop (>768px) keeps its tighter editorial scale. Applies to every tenant page via the theme; pairs with the >=44px tap targets on .brand / nav / .btn. */ @media (max-width: 768px) { p, li, a, button, input, textarea, select, summary, small { font-size: max(0.875rem, 1em) !important; } } /* --- 15. Dark theme — component overrides (literals not on the token layer) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { header.site { background: rgba(11, 18, 32, .86); } footer.site { background: #0e1728; } .eyebrow { background: var(--card); } .form-control { background: var(--card); color: var(--ink); } .form-control::placeholder { color: #6b7a94; } .trust-badge { background: #12233f; color: #d7e6ff; } .reassurance { background: #0f2a1e; border-color: #1c4230; } .brand img { background: #fff; padding: 4px 10px; border-radius: 8px; } @media (max-width: 980px) { nav.primary { background: var(--cream); } } /* --navy is a dark ANCHOR (panel bg / heading ink on light surfaces); on a dark page it stays dark, so anything using it as heading/link-hover text on the page or a card must repoint to --ink (near-white) to stay AA. Its use as a background (console, ind-section, btn-navy, cta bands…) is untouched — those already pair it with an explicit light text color. */ h1, h2, .eyebrow, nav.primary a:hover { color: var(--ink); } } } :root[data-theme="dark"] header.site { background: rgba(11, 18, 32, .86); } :root[data-theme="dark"] footer.site { background: #0e1728; } :root[data-theme="dark"] .eyebrow { background: var(--card); } :root[data-theme="dark"] .form-control { background: var(--card); color: var(--ink); } :root[data-theme="dark"] .form-control::placeholder { color: #6b7a94; } :root[data-theme="dark"] .trust-badge { background: #12233f; color: #d7e6ff; } :root[data-theme="dark"] .reassurance { background: #0f2a1e; border-color: #1c4230; } :root[data-theme="dark"] .brand img { background: #fff; padding: 4px 10px; border-radius: 8px; } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] .eyebrow, :root[data-theme="dark"] nav.primary a:hover { color: var(--ink); } @media (max-width: 980px) { :root[data-theme="dark"] nav.primary { background: var(--cream); } }