/* Inter is loaded by a injected into each page's alongside this file, NOT by @import. @import is fetched only after this sheet has parsed, which delayed the webfont and produced a visible reflow when it swapped in. */ /* Metric-matched fallback: renders local Arial at Inter's proportions, so the line breaks and text widths are already correct before Inter arrives and nothing shifts or resizes when it does. */ @font-face { font-family: 'Inter Fallback'; src: local('Arial'); size-adjust: 107%; ascent-override: 90%; descent-override: 22.43%; line-gap-override: 0%; } @font-face { font-family: 'Arial Black Fallback'; src: local('Arial Bold'), local('Arial'); size-adjust: 100%; ascent-override: 90%; descent-override: 22.43%; line-gap-override: 0%; } /* ============================================================================= CRI-ONE — VAULT THEME OVERLAY ----------------------------------------------------------------------------- Applies the /vault look across every surface (static pages, Magento/Luma, Node music store) by retargeting the existing --cri-* variable system. Design rules: - Retheme through variables so the existing cascade does the work. - Override paint only (color, background, border, font, shadow). - Never override layout (display, position, width, float, grid, flex). Load LAST, after every other stylesheet. Remove the single tag to revert any page. ============================================================================= */ /* ── 1. Palette ──────────────────────────────────────────────────────────── */ :root { /* Vault palette */ --v-dark: #0a0a0a; --v-dark-2: #1a1a1a; --v-blue: #0f62fe; --v-blue-dk: #0043ce; --v-green: #00e676; --v-yellow: #ffea00; --v-bg: #f8f8f8; --v-white: #ffffff; --v-muted: #6f6f6f; --v-border: #d0d0d0; /* The *-Fallback entries sit directly after the real face so the metric- matched local font is used while the webfont loads — no reflow on swap. */ --v-display: 'Arial Black', 'Arial Black Fallback', 'Arial Bold', Gadget, sans-serif; --v-body: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Retarget the existing system — this is what re-skins the whole site */ --cri-bg: var(--v-bg); --cri-tint: #f1f1f1; --cri-panel: var(--v-white); --cri-bar: var(--v-dark); --cri-code-bg: #f2f4f8; --cri-ink: var(--v-dark); --cri-muted: var(--v-muted); --cri-code-ink: #0a0a0a; --cri-border: var(--v-border); --cri-border-input: var(--v-border); --cri-link: var(--v-blue); --cri-primary: var(--v-blue); --cri-primary-hover: var(--v-blue-dk); --cri-font: var(--v-body); --cri-font-form: var(--v-body); } /* ── 2. Base ─────────────────────────────────────────────────────────────── */ body { font-family: var(--v-body); background: var(--v-bg); color: var(--v-dark); -webkit-font-smoothing: antialiased; /* Re-centre pages that constrain their own body width. 144 blog articles declare `body { max-width:1200px; margin:0 auto }`, but Luma's reset `body { margin:0 }` loads afterwards and killed the auto margins — pinning the page hard left with a band of dead space on the right. Safe to apply everywhere: with no max-width there is no free space, so auto margins resolve to zero and nothing moves. */ margin-left: auto; margin-right: auto; } /* NOTE on typography consistency: static/luma/styles-m.*.css carried an `!important` rule re-declaring font-family on every descendant of . It won on pages that loaded it and lost on those that didn't, so type differed page to page. Rather than escalate specificity here, that rule was changed at source to `font-family: var(--v-body, )` and to skip h1–h6 and the nav. It now defers to the token below and still degrades to its original font if this theme is ever removed. No !important needed on our side. */ a { color: var(--v-blue); } a:hover { color: var(--v-blue-dk); } /* ── 3. Display type ─────────────────────────────────────────────────────── */ /* Family and tracking only — deliberately NO font-size and NO color. Many pages size their own headings as part of a bespoke layout; forcing a global scale onto them re-flowed those designs. Size is opted into via the .h1-brand / .h2-brand helpers or the .v-hero block below. `!important` on font-family only: a number of pages carry an inline `html, body, h1..h6, p, a, … { font-family: Arial … !important }` block. That is page-level markup, not a shared file, so it cannot be fixed at source the way the Luma normalizer was. Nothing else here is forced. */ h1, h2, h3, h4, h5, h6, .page-title, .page-title span, .cri-title { font-family: var(--v-display) !important; letter-spacing: -0.01em; } .h1-brand { font-size: clamp(1.9rem, 5vw, 3rem); } .h2-brand { font-size: clamp(1.5rem, 3.5vw, 2.1rem); } .h3-brand { font-size: 1.3rem; } /* ── 4. Hero ─────────────────────────────────────────────────────────────── */ .v-hero { background: linear-gradient(135deg, var(--v-dark) 0%, var(--v-dark-2) 100%); color: #fff; padding: clamp(56px, 10vw, 110px) 24px; text-align: center; position: relative; overflow: hidden; } .v-hero::before { content: ""; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(15,98,254,.10) 0%, transparent 70%); pointer-events: none; } .v-hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; } .v-hero-eyebrow { font-family: var(--v-display); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; /* Lighter than --v-blue, which lands at 3.75:1 on the dark hero — under the 4.5:1 floor for text this small. */ color: #6ea8ff; margin: 0 0 12px; } .v-hero h1, .v-hero .v-hero-title { font-family: var(--v-display); font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1.08; letter-spacing: -0.01em; color: #fff; margin: 0 0 16px; -webkit-text-fill-color: #fff; } .v-hero-lead { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0; } .v-hero a:not(.v-btn) { color: #cfe0ff; } /* ── 5. Buttons ──────────────────────────────────────────────────────────── */ /* The heavy yellow-bordered treatment is opt-in via .v-btn only. Applying it to every .action.primary re-skinned host buttons mid-layout and read as broken on pages with their own button design. */ .v-btn { display: inline-block; background: var(--v-dark); color: #fff; border: 3px solid var(--v-yellow); padding: 13px 30px; font-family: var(--v-display); font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; } .v-btn:hover { background: var(--v-blue); border-color: var(--v-blue); color: #fff; text-decoration: none; } /* Host primary buttons get the brand colour only — same shape, new palette. */ button.action.primary, .action.primary, a.action.primary { background: var(--v-blue); border-color: var(--v-blue); color: #fff; } button.action.primary:hover, .action.primary:hover, a.action.primary:hover { background: var(--v-blue-dk); border-color: var(--v-blue-dk); color: #fff; } .v-btn-primary { background: var(--v-blue); border-color: var(--v-blue); color: #fff; } .v-btn-primary:hover { background: var(--v-blue-dk); border-color: var(--v-blue-dk); } .v-btn-success { background: var(--v-green); border-color: var(--v-dark); color: var(--v-dark); } .v-btn-success:hover { background: #00c755; border-color: var(--v-dark); color: var(--v-dark); } /* ── 6. Cards ────────────────────────────────────────────────────────────── */ .v-card { background: var(--v-white); border: 1px solid var(--v-border); padding: 26px; transition: border-color .2s, box-shadow .2s, transform .2s; } .v-card:hover { border-color: var(--v-blue); box-shadow: 0 8px 24px rgba(15,98,254,.12); transform: translateY(-3px); } .v-card h3 { font-size: 1.1rem; margin: 0 0 10px; } .v-card p { color: var(--v-muted); font-size: .92rem; line-height: 1.6; margin: 0; } .v-card-icon { font-size: 2.2rem; display: block; margin-bottom: 12px; } /* ── 7. Grid + section helpers ───────────────────────────────────────────── */ .v-section { padding: clamp(40px, 6vw, 64px) 24px; } .v-section-tint { background: var(--v-bg); } .v-section-white { background: var(--v-white); } .v-wrap { max-width: 1200px; margin: 0 auto; } .v-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .v-grid-3 { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); } .v-grid-2 { display: grid; gap: 24px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 1024px) { .v-grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .v-grid-3, .v-grid-2 { grid-template-columns: 1fr; } } /* ── 7b. Element-level font declarations ─────────────────────────────────── */ /* Magento/Luma declares font-family directly on these elements, so a `body` rule never reaches them and they fell back to Arial. None of Luma's rules are !important, so matching the selector and loading later is enough. Deliberately no font-size — only the family. */ button, input, select, textarea, optgroup, blockquote, legend, caption, figcaption, .action, .action.primary, .action.secondary, .action-primary, .action-secondary, .product-item-name, .product-item-name a, .product .name a, .block-title, .block-title strong, .field .label, .fieldset > .legend, .control input, .control select, .control textarea, .minicart-wrapper, .cart.table-wrapper, .opc-wrapper, .conveyor, .conveyor-controls { font-family: var(--v-body); } /* Display face for Magento's own headings and price/title slots. */ .page-title, .page-title span, .product-info-main .page-title span, .block-title strong, .widget-title, .price { font-family: var(--v-display); } /* ── 8. Forms ────────────────────────────────────────────────────────────── */ input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=tel], input[type=number], input[type=date], textarea, select, .input-text { font-family: var(--v-body); border: 1px solid var(--v-border); background: var(--v-white); color: var(--v-dark); transition: border-color .2s, box-shadow .2s; } input:focus, textarea:focus, select:focus, .input-text:focus { outline: none; border-color: var(--v-blue); box-shadow: 0 0 0 3px rgba(15,98,254,.10); } /* ── 9. Tables ───────────────────────────────────────────────────────────── */ /* Typography only — deliberately NO `color` here. Some pages use tables on dark custom backgrounds; forcing a muted grey made that text unreadable. */ table { border-color: var(--v-border); } th { font-family: var(--v-display); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } /* ── 10. Site nav + footer ───────────────────────────────────────────────── */ /* The site's OWN footer was authored dark, so it stays dark and we set its link colours explicitly. */ #crione-bottomnav, footer[role="contentinfo"] { background: var(--v-dark); color: #c6c6c6; border-top: 4px solid var(--v-blue); } #crione-bottomnav a, footer[role="contentinfo"] a { color: #cfe0ff; } #crione-bottomnav a:hover, footer[role="contentinfo"] a:hover { color: #fff; } #crione-bottomnav .crione-nav-brand, footer[role="contentinfo"] .crione-nav-brand { color: #fff; } /* Luma's footer, by contrast, is authored for a LIGHT ground — every heading, link and caption inside it assumes dark-on-light. Painting it dark produced #333-on-#0a0a0a text. Keep it light and the original colours stay legible. */ .page-footer { background: #f1f1f1; color: var(--v-dark); border-top: 4px solid var(--v-blue); } /* --v-blue-dk here, not --v-blue: on the light footer ground the lighter blue lands at 4.07:1, just under the 4.5:1 AA floor. The deeper selectors match the specificity of page-level inline rules that would otherwise win. */ .page-footer a, .page-footer .footer.content a, .page-footer .footer-links a, .page-footer .footer.content .links a { color: var(--v-blue-dk); } .page-footer a:hover, .page-footer .footer-links a:hover { color: var(--v-blue); } .page-footer .copyright, .page-footer small { color: var(--v-muted); } .crione-nav-links a { font-family: var(--v-body); font-weight: 600; letter-spacing: .02em; } /* ── 11. Magento / Luma reskin ───────────────────────────────────────────── */ /* The shared black masthead already sits above Magento's own header, so this header stays LIGHT. Painting it dark put Magento's dark logo and links on a dark ground and made them unreadable. */ .page-header { background: var(--v-white); border-bottom: 1px solid var(--v-border); } .page-header .logo, .page-header .logo span, .page-header a:not(.action) { color: var(--v-dark); } .page-header .logo:hover { color: var(--v-blue); } /* Thin utility strip above it — light grey ground, dark text. Selector mirrors Luma's own `.page-header .panel.wrapper` so specificity ties and load order decides; this file is always loaded last. */ .page-header .panel.wrapper, .panel.wrapper { background: #ececec; border-bottom: 1px solid var(--v-border); } .page-header .panel.wrapper, .page-header .panel.wrapper a, .page-header .panel.wrapper .greet, .page-header .panel.wrapper .greet.welcome, .panel.wrapper a { color: var(--v-dark); } .page-header .panel.wrapper a:hover { color: var(--v-blue); } /* Luma paints these white for the original dark bar — re-darken for the light one. Selectors mirror Luma's own specificity; this file loads last. */ .page-header .panel.wrapper .header.links > li > a, .page-header .panel.wrapper .header.links a, .panel.wrapper .header.links a, .panel.wrapper .authorization-link a, .panel.wrapper li.authorization-link a, .panel.wrapper .customer-welcome .action.switch { color: var(--v-dark); } .panel.wrapper .header.links a:hover, .panel.wrapper .authorization-link a:hover { color: var(--v-blue); } .nav-sections { background: var(--v-white); border-bottom: 1px solid var(--v-border); } .nav-sections .navigation a { color: var(--v-dark); font-weight: 600; } .nav-sections .navigation a:hover { color: var(--v-blue); } .product-item-name a { font-weight: 700; color: var(--v-dark); } .price { font-family: var(--v-display); color: var(--v-dark); } .copyright { background: var(--v-dark); color: #8d8d8d; } /* ── 11b. Shared masthead type ───────────────────────────────────────────── */ /* Same reason as the heading rule: inline per-page `!important` normalizers would otherwise flatten the nav to Arial on some pages and not others. */ .cri-mast, .cri-mast * { font-family: var(--v-body) !important; } .cri-mast .cri-brand { font-family: 'Arial Black', Gadget, sans-serif !important; } /* ── 12. Accessibility ───────────────────────────────────────────────────── */ :focus-visible { outline: 3px solid var(--v-blue); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .v-card, .v-btn, a, button { transition: none !important; } .v-card:hover { transform: none; } }