/**
* SAFETY NOTE
* This file styles bare HTML elements on purpose. That makes it powerful on the
* front end and DANGEROUS anywhere WordPress or Elementor renders its own UI.
* It must only ever be enqueued via wp_enqueue_scripts (front end + Elementor
* canvas iframe). Never on elementor/editor/after_enqueue_styles or
* admin_enqueue_scripts — doing so repaints the builder panel and admin screens.
*/
/**
* ITVP — GLOBAL / GENERIC LAYER
* ============================================================================
* Styles raw HTML ELEMENTS (h1, p, a, button, input, table, ul…) so that any
* content — an Elementor widget, a shortcode, a plugin's output, a pasted
* block — inherits the brand automatically without needing a class.
*
* Load order (set in functions.php):
* 1. tokens.css variables only
* 2. itvp-globals.css THIS FILE — bare elements
* 3. itvp-main.css .itvp-* components and utilities
*
* RULE: never put a class selector in this file. Classes belong in
* itvp-main.css. Keeping the split means a specificity problem is always
* traceable to one layer.
* ============================================================================
*/
/* ---------------------------------------------------------------- Reset -- */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--itvp-font);
font-size: var(--itvp-base);
line-height: 1.65;
color: var(--itvp-muted);
background: var(--itvp-surface);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ----------------------------------------------------------- Typography -- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--itvp-font);
color: var(--itvp-ink);
font-weight: 800;
letter-spacing: -0.8px;
line-height: 1.15;
margin: 0 0 0.5em;
}
h1 { font-size: var(--itvp-h1); line-height: 1.05; letter-spacing: -1.8px; }
h2 { font-size: var(--itvp-h2); }
h3 { font-size: var(--itvp-h3); letter-spacing: -0.4px; }
h4 { font-size: 18px; letter-spacing: -0.2px; }
h5 { font-size: 16px; letter-spacing: 0; }
h6 { font-size: var(--itvp-sm); letter-spacing: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: 700; color: var(--itvp-ink); }
small { font-size: var(--itvp-xs); color: var(--itvp-muted-2); }
/* is the brand's accent device throughout the comps, not italics. */
em { font-style: normal; color: var(--itvp-blue-600); }
blockquote {
margin: 0 0 1em;
padding: 16px 22px;
border-left: 3px solid var(--itvp-blue-600);
background: var(--itvp-surface-alt);
border-radius: 0 var(--itvp-r-md) var(--itvp-r-md) 0;
}
hr {
border: 0;
border-top: 1px solid var(--itvp-border);
margin: 32px 0;
}
code, pre {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.92em;
background: var(--itvp-surface-alt);
border-radius: var(--itvp-r-sm);
}
code { padding: 2px 6px; }
pre { padding: 16px 18px; overflow-x: auto; }
/* ---------------------------------------------------------------- Links -- */
a {
color: var(--itvp-blue-600);
text-decoration: none;
transition: color .18s var(--itvp-ease, ease);
}
a:hover { color: var(--itvp-blue-700); }
/* Keyboard users must be able to see where they are. If this is ever
removed, replace it — do not simply delete. */
:focus-visible {
outline: 3px solid var(--itvp-blue-600);
outline-offset: 2px;
border-radius: 3px;
}
/* ---------------------------------------------------------------- Lists -- */
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: 0.4em; }
li:last-child { margin-bottom: 0; }
/* --------------------------------------------------------------- Tables -- */
table {
width: 100%;
border-collapse: collapse;
font-size: var(--itvp-sm);
margin: 0 0 1em;
}
th, td {
padding: 14px 18px;
text-align: left;
border-bottom: 1px solid var(--itvp-border);
}
thead th {
background: var(--itvp-surface-alt);
color: var(--itvp-ink);
font-weight: 800;
font-size: var(--itvp-xs);
}
tbody tr:nth-child(even) { background: var(--itvp-surface-alt); }
/* --------------------------------------------------------------- Media --- */
img, svg, video, canvas, iframe {
max-width: 100%;
height: auto;
display: block;
}
figure { margin: 0 0 1em; }
figcaption {
font-size: var(--itvp-xs);
color: var(--itvp-muted-2);
margin-top: 8px;
}
/* ---------------------------------------------------------------- Forms -- */
/* Covers Elementor Forms, Contact Form 7, comment forms and anything else a
plugin renders — so third-party output inherits the brand for free. */
input,
select,
textarea,
button { font-family: inherit; font-size: inherit; }
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 14px 16px;
color: var(--itvp-ink);
background: var(--itvp-surface);
border: 1.5px solid var(--itvp-border);
border-radius: var(--itvp-r-md);
font-size: var(--itvp-sm);
line-height: 1.4;
transition: border-color .18s ease, box-shadow .18s ease;
appearance: none;
}
input::placeholder,
textarea::placeholder { color: var(--itvp-ink-300, #94A3B4); }
input:focus,
select:focus,
textarea:focus {
outline: none;
border-color: var(--itvp-blue-600);
box-shadow: 0 0 0 3px rgba(46, 91, 230, .14);
}
input[aria-invalid="true"],
.itvp-invalid {
border-color: #D93B3B;
box-shadow: 0 0 0 3px rgba(217, 59, 59, .12);
}
textarea { min-height: 140px; resize: vertical; }
label {
display: inline-block;
margin-bottom: 6px;
font-size: var(--itvp-sm);
font-weight: 600;
color: var(--itvp-ink);
}
/* Native select needs its own arrow back after appearance:none. */
select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6072' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 42px;
}
button,
input[type="submit"],
input[type="button"] {
cursor: pointer;
border: none;
border-radius: var(--itvp-r-pill);
padding: 14px 26px;
font-weight: 800;
font-size: var(--itvp-sm);
background: var(--itvp-blue-600);
color: #fff;
transition: background .2s ease;
}
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover { background: var(--itvp-blue-700); }
button:disabled,
input:disabled,
select:disabled,
textarea:disabled { opacity: .55; cursor: not-allowed; }
/* ------------------------------------------------------------- A11y ----- */
.screen-reader-text,
.sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
::selection {
background: var(--itvp-blue-600);
color: #fff;
}
/* Anchor targets clear the sticky header instead of hiding beneath it. */
:target { scroll-margin-top: 120px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* --------------------------------------------------------------- Print -- */
@media print {
body { background: #fff; color: #000; }
a { color: #000; text-decoration: underline; }
header, footer, nav, button { display: none !important; }
}