/* Theme Name: iVerified Theme URI: https://ivrf.ca/ Author: Built for iVerified Data PrivateStorage Solutions Holdings Ltd. Description: The iVerified corporate site as a plain, file-based theme. Every page has a template of its own — page-contact.php, page-about.php and so on — holding that page's markup in full, so a change is made by editing the file for that page. Dark navy throughout, Outfit headings, Inter body, Bebas Neue numerals. Version: 2.0.0 Requires at least: 6.4 Tested up to: 6.9 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: iverified Tags: business, custom-colors, custom-logo, featured-images */ /* * Almost nothing belongs in this file. * * The design's whole vocabulary is in assets/css/app.css, the stylesheet the * original build compiled. That sheet carries the palette, the base layer and * all 712 utility selectors the pages use. It is a FIXED artefact: a class that * is not already in it has no styles at all, and nothing on the page says so. * If you add a class to a page file and nothing happens, that is why. * * What this file supplies is only what app.css cannot know about: the fonts, * the admin bar, focus rings, the scroll fade, and the few pieces of browser * furniture that sit on a dark ground. */ @layer components { /* --------------------------------------------------------------- * A link to a section lands below the header, not behind it * * Every band carries an id, so any of them can be linked to. Without * this the browser scrolls the band's top edge to the top of the window, * where the fixed header is already sitting, and the heading is the part * that disappears. * --------------------------------------------------------------- */ [id^="iv-band-"], #iv-main { scroll-margin-top: 88px; } @media (max-width: 1023px) { [id^="iv-band-"], #iv-main { scroll-margin-top: 76px; } } /* ------------------------------------------------------------------ * Focus * * The brief asks for accessible focus states and WCAG AA contrast. The * compiled sheet has focus utilities but nothing applies them globally, * so a keyboard user tabbing through a dark page sees the browser's own * outline, which is nearly invisible on #05070D. * --------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 2px; } /* ------------------------------------------------------------------ * Motion * * The brief: "respect prefers-reduced-motion". The fade-up on scroll is * driven by a class the script adds; this makes the whole thing a no-op * for anyone who has asked for less movement, rather than a faster * version of the same movement. * --------------------------------------------------------------- */ .iv-fade { opacity: 0; transform: translateY(40px); transition: opacity 600ms ease-out, transform 600ms ease-out; } .iv-fade.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .iv-fade, .iv-fade.is-in { opacity: 1; transform: none; transition: none; } } /* * Without JavaScript nothing would ever add .is-in, so the content would * be permanently invisible. The script removes this class on load; if it * never runs, the fade never applies. */ .no-js .iv-fade { opacity: 1; transform: none; } /* ------------------------------------------------------------------ * The mobile drawer * * Open and closed are a class on rather than an inline style, so * the scroll lock and the panel cannot disagree about which state they * are in. * --------------------------------------------------------------- */ body.iv-menu-open { overflow: hidden; } /* ------------------------------------------------------------------ * Long prose from the editor * * Only reached by a page somebody writes in wp-admin rather than through * the fields. The utilities cannot be applied to markup the theme never * sees, so the few elements TinyMCE emits are given the site's type here. * --------------------------------------------------------------- */ .iv-prose > * + * { margin-top: 1rem; } .iv-prose h2, .iv-prose h3, .iv-prose h4 { color: var(--text-primary); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin-top: 2rem; } .iv-prose h2 { font-size: 1.75rem; } .iv-prose h3 { font-size: 1.375rem; } .iv-prose a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; } .iv-prose ul, .iv-prose ol { padding-left: 1.25rem; } .iv-prose ul { list-style: disc; } .iv-prose ol { list-style: decimal; } .iv-prose li + li { margin-top: 0.5rem; } .iv-prose strong { color: var(--text-primary); font-weight: 600; } /* ------------------------------------------------------------------ * Form controls * * The quote wizard and the contact form are drawn with utilities, but a * select and a file input carry browser furniture that no utility can * reach — and on a dark ground the defaults are unreadable. * --------------------------------------------------------------- */ .iv-field select option { background: var(--bg-surface); color: var(--text-primary); } .iv-field input[type="file"]::file-selector-button { background: transparent; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-secondary); cursor: pointer; font: inherit; margin-right: 0.75rem; padding: 0.4rem 0.9rem; } .iv-field input[type="file"]::file-selector-button:hover { border-color: var(--accent-bright); color: var(--text-primary); } /* A date input's calendar picker is black-on-black in Chrome. */ .iv-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.6; } .iv-field input::placeholder, .iv-field textarea::placeholder { color: var(--text-muted); } } /* ------------------------------------------------------------------------- * Unlayered: rules that must beat a compiled utility * * Everything above sits in @layer components, which loses to the utilities * layer by design — that is what lets a utility override a component style. * The rules below have to win against one, so they stay outside every layer, * where the cascade puts them above all of them. * ------------------------------------------------------------------------- */ /* * The logo's height in the header bar. * * Set from the settings screen through a custom property on the element itself, * because the compiled utility sheet is a fixed artefact and cannot contain a * class for a number somebody chooses later. The phone value is ~77% of the * desktop one, in the same proportion as the two bar heights. */ .iv-logo { height: calc(var(--iv-logo-h, 44px) * 0.77); max-width: min(58vw, 260px); } /* * The footer's logo. A width, not a height, because the footer column is what * constrains it — and a cap, so a very wide artwork cannot push the address out * of its column. */ .iv-footer-logo { max-width: 210px; } /* * The line under the header logo. Hidden on the narrowest screens, where the * bar has to hold the logo and the menu button and nothing else fits. */ .iv-logo-descriptor { display: none; } @media (min-width: 560px) { .iv-logo-descriptor { display: block; } } @media (min-width: 1024px) { .iv-logo { height: var(--iv-logo-h, 44px); max-width: 340px; } } /* * The six-step timeline needs room for six steps. * * The compiled sheet switches this grid to six columns at 1280px, and that * measurement is against the window. The timeline does not get the window: it * sits in the middle third of a three-panel band and gets about 40% of it, * which at 1280px is roughly 82px a step. "Requirements" and "Configuration" * are both wider than that, so from 1280px to about 1600px the labels ran into * their neighbours. * * The design's own answer below 1280px is two rows of three. This extends that * answer up to the width where six columns genuinely fit, rather than inventing * a new layout. Above 1600px nothing here applies. */ @media (min-width: 1280px) and (max-width: 1599px) { .iv-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* * The admin bar, and the two fixed things it sits on top of. * * Unlayered, and it has to be. The header carries the utility `top-0` and the * drawer carries `inset-0`, both of which live in @layer utilities — and layer * order beats specificity, so `.admin-bar .iv-header` inside @layer components * loses to `.top-0` however many classes it has. These rules spent their whole * life in the components layer doing nothing, which nobody noticed because the * admin bar only exists for a logged-in editor. * * Three breakpoints because core uses three: 32px normally, 46px below 782px, * and nothing below 600px, where core makes the bar position:absolute and it * scrolls away with the page. */ .admin-bar .iv-header, .admin-bar #iv-mobile-menu { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .iv-header, .admin-bar #iv-mobile-menu { top: 46px; } } @media screen and (max-width: 600px) { .admin-bar .iv-header, .admin-bar #iv-mobile-menu { top: 0; } }