/* ============================================================================ DC360 DESIGN SYSTEM v1.1 — datacenter360.ca Single source of truth for site-wide UI. Deploy once, inherit everywhere. v1.1 (2026-06-26): refined elevation scale (layered soft shadows), card hover-lift, soft gradient hero/CTA surfaces, display heading tier, global :focus-visible, button active/loading, input disabled/valid, radius-sm token, FAQ clip fix, z-index scale, sticky table head + starter primitives (pagination, empty-state, review stars, tooltip, skeleton). See §21 below. LIVE-SAFE RULES (no staging): - Every component is a prefixed class: .dc-* (e.g. .dc-btn, .dc-card). - NO bare-element selectors are styled globally (no `button{}`, `table{}`…), so loading this file changes NOTHING until a page opts in by using a class. - Base typography applies only inside a `.dc` wrapper, never to . - Tokens live on :root (variables only — inert until referenced). - After deploying, purge the asset-cleanup + SpinupWP cache. ========================================================================== */ /* 1. DESIGN TOKENS ---------------------------------------------------------- */ :root{ /* Brand / role colors (LOCKED — anchored to logo blue + orange) */ --dc-buy:#FFD814; /* Add-to-cart / primary BUY only */ --dc-buy-hover:#F0B800; --dc-blue:#2C75FF; /* Brand accent: icons, eyebrows, large text, focus (logo blue) */ --dc-blue-action:#1B5FE0; /* AA-safe interactive: links + buttons w/ white text (5.6:1) */ --dc-blue-700:#1A52C7; /* Interactive hover */ --dc-ink:#0F1E33; /* Headings, footer */ --dc-body:#33445A; /* Body text (9.9:1 on white) */ --dc-muted:#5F6E84; /* Secondary text (5.2:1 on white — AA) */ --dc-surface:#FFFFFF; --dc-alt:#F4F7FB; /* Alternate section surface */ --dc-border:#E2E8F0; --dc-green:#16A34A; /* In-stock / savings (text-safe) */ --dc-green-tint:#E7F6ED; --dc-bright:#43D359; /* Sparing bright pop (promo on dark/tint) */ --dc-sale:#D6122B; /* Sale current price */ --dc-slate:#64748B; /* Legacy / EOL text on white (4.8:1 — AA) */ --dc-slate-dark:#566276; /* Legacy text on tinted badge (5.5:1 — AA) */ --dc-orange:#FF551A; /* Logo + sparing "featured/best-seller" flag */ --dc-info:#E8F0FF; /* Blue callout tint */ --dc-warn:#B45309; /* Warning text */ --dc-warn-tint:#FEF3C7; /* Typography */ --dc-font-body:"Roboto",system-ui,-apple-system,Segoe UI,sans-serif; --dc-font-head:"Space Grotesk","Roboto",system-ui,sans-serif; --dc-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Type scale */ --dc-h1:30px; --dc-h2:22px; --dc-h3:16px; --dc-text:16px; --dc-small:13px; /* Spacing scale (4px base) */ --dc-s1:4px; --dc-s2:8px; --dc-s3:12px; --dc-s4:16px; --dc-s5:24px; --dc-s6:32px; --dc-s7:48px; --dc-s8:64px; /* Radius / shadow / motion */ --dc-radius:12px; /* cards, tables */ --dc-radius-btn:7px; /* buttons */ --dc-radius-pill:999px; --dc-shadow:0 1px 3px rgba(15,30,51,.06); --dc-shadow-card:0 1px 3px rgba(15,30,51,.06); --dc-shadow-pop:0 8px 24px rgba(15,30,51,.12); --dc-ease:.15s ease; --dc-ease-slow:.25s ease; /* Layout */ --dc-container:1120px; --dc-tap:44px; /* min touch target */ } /* 2. BASE (opt-in via .dc wrapper) ----------------------------------------- */ .dc{font-family:var(--dc-font-body);font-size:var(--dc-text);line-height:1.6;color:var(--dc-body);-webkit-font-smoothing:antialiased} .dc h1,.dc h2,.dc h3,.dc h4{font-family:var(--dc-font-head);color:var(--dc-ink);font-weight:600;line-height:1.25;margin:0 0 .4em} .dc h1{font-size:var(--dc-h1)} .dc h2{font-size:var(--dc-h2)} .dc h3{font-size:var(--dc-h3)} .dc p{margin:0 0 1em} .dc a{color:var(--dc-blue-action);text-decoration:none} .dc a:hover{text-decoration:underline} .dc-container{max-width:var(--dc-container);margin:0 auto;padding:0 20px} .dc-mono{font-family:var(--dc-font-mono)} .dc-muted{color:var(--dc-muted)} .dc-ink{color:var(--dc-ink)} /* 3. SECTIONS / SURFACES ---------------------------------------------------- */ .dc-section{padding:var(--dc-s7) 0;border-top:1px solid var(--dc-border)} .dc-section--alt{background:var(--dc-alt)} .dc-section--flush{border-top:none} .dc-eyebrow{font-family:var(--dc-font-head);font-size:12px;letter-spacing:.08em; text-transform:uppercase;color:var(--dc-blue);font-weight:600;margin-bottom:8px} .dc-divider{border:0;border-top:1px solid var(--dc-border);margin:var(--dc-s5) 0} /* 4. BUTTONS ---------------------------------------------------------------- */ .dc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--dc-font-head);font-weight:600;font-size:15px;line-height:1; min-height:var(--dc-tap);padding:12px 22px;border-radius:var(--dc-radius-btn); border:1.5px solid transparent;cursor:pointer;transition:var(--dc-ease);text-decoration:none} .dc-btn:hover{text-decoration:none} .dc-btn:focus-visible{outline:3px solid rgba(44,117,255,.45);outline-offset:2px} .dc-btn--buy,a.dc-btn--buy{background:var(--dc-buy);color:var(--dc-ink) !important;text-decoration:none} .dc-btn--buy:hover,a.dc-btn--buy:hover,.dc-btn--buy:focus,a.dc-btn--buy:focus{background:var(--dc-buy-hover);color:var(--dc-ink) !important;text-decoration:none} .dc-btn--primary,a.dc-btn--primary{background:var(--dc-blue-action);color:#fff} .dc-btn--primary:hover,a.dc-btn--primary:hover{background:var(--dc-blue-700);color:#fff} .dc-btn--outline,a.dc-btn--outline{background:#fff;color:var(--dc-blue-action);border-color:var(--dc-blue-action)} .dc-btn--outline:hover,a.dc-btn--outline:hover{background:var(--dc-info);color:var(--dc-blue-action)} .dc-btn--ghost,a.dc-btn--ghost{background:transparent;color:var(--dc-blue-action)} .dc-btn--ghost:hover,a.dc-btn--ghost:hover{background:var(--dc-info);color:var(--dc-blue-action)} .dc-btn--sm{min-height:36px;padding:8px 14px;font-size:13.5px} .dc-btn--lg{padding:15px 28px;font-size:16px} .dc-btn--block{display:flex;width:100%} .dc-btn[disabled],.dc-btn--disabled{opacity:.5;cursor:not-allowed;pointer-events:none} /* 4b. FORMS (Elementor Pro) -------------------------------------------------- Add class .dc-quoteform to the Elementor Form widget, and .dc-quoteform-card to the container that holds it. Styles Elementor's own field markup to match the design system. Reusable on any page. */ .dc-quoteform-card{max-width:720px;margin:0 auto;background:var(--dc-surface); border:1px solid var(--dc-border);border-radius:var(--dc-radius); padding:30px 30px 34px;box-shadow:0 10px 34px rgba(15,30,51,.07)} .dc-quoteform-card>h2,.dc-quoteform-card>h3{margin:0 0 4px} .dc-quoteform-card .dc-form-sub{color:var(--dc-muted);font-size:14.5px;margin:0 0 22px;line-height:1.55} .dc-quoteform .elementor-form-fields-wrapper{margin:0} .dc-quoteform .elementor-field-group{margin-bottom:16px;padding:0} .dc-quoteform .elementor-field-group>.elementor-field-label{ font-family:var(--dc-font-head);font-weight:600;font-size:13px;color:var(--dc-ink); margin-bottom:7px;display:block;letter-spacing:.01em} .dc-quoteform .elementor-mark-required{color:var(--dc-orange)} .dc-quoteform .elementor-field-group .elementor-field.elementor-field-textual{ width:100%;min-height:var(--dc-tap);border:1px solid var(--dc-border); border-radius:9px;padding:11px 14px;font-family:var(--dc-font-body); font-size:15px;color:var(--dc-body);background:var(--dc-surface); box-shadow:none;transition:border-color .15s,box-shadow .15s} .dc-quoteform .elementor-field-group .elementor-field.elementor-field-textual::placeholder{color:var(--dc-muted);opacity:.85} .dc-quoteform .elementor-field-group .elementor-field.elementor-field-textual:focus{ outline:none;border-color:var(--dc-blue-action);box-shadow:0 0 0 3px rgba(44,117,255,.16)} .dc-quoteform textarea.elementor-field.elementor-field-textual{min-height:128px;resize:vertical;line-height:1.55} .dc-quoteform .elementor-select-wrapper select.elementor-field.elementor-field-textual{ appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F6E84' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;background-size:16px} .dc-quoteform .elementor-field-type-acceptance .elementor-field-subgroup{font-size:13.5px;color:var(--dc-muted)} .dc-quoteform .elementor-field-type-acceptance a{color:var(--dc-blue-action)} .dc-quoteform .elementor-field-type-submit{margin-top:4px} .dc-quoteform .elementor-field-type-submit .elementor-button, .dc-quoteform button.elementor-button{ display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%; background:var(--dc-blue-action);color:#fff;border:0;cursor:pointer; font-family:var(--dc-font-head);font-weight:600;font-size:16px;line-height:1; min-height:var(--dc-tap);padding:14px 24px;border-radius:var(--dc-radius-btn);transition:background .15s} .dc-quoteform button.elementor-button:hover{background:var(--dc-blue-700);color:#fff} .dc-quoteform .elementor-button .elementor-button-text{color:#fff} .dc-quoteform .elementor-message{font-size:14px;border-radius:8px;margin-top:14px} /* placeholder shown only until the real Elementor form is dropped in */ .dc-formph{border:2px dashed #b9c6da;border-radius:10px;background:var(--dc-alt); padding:24px;text-align:center;color:var(--dc-muted);font-size:14px;line-height:1.55} .dc-formph b{display:block;color:var(--dc-ink);font-family:var(--dc-font-head);font-size:15px;margin-bottom:5px} /* 5. LINKS ------------------------------------------------------------------ */ .dc-link{color:var(--dc-blue-action);text-decoration:none} .dc-link:hover{text-decoration:underline} .dc-link--muted{color:var(--dc-muted)} .dc-link--arrow::after{content:" ›";font-weight:600} /* 6. BADGES / PILLS --------------------------------------------------------- */ .dc-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--dc-font-body); font-size:12px;font-weight:500;line-height:1;padding:4px 9px;border-radius:var(--dc-radius-pill);white-space:nowrap} .dc-badge--stock{background:var(--dc-green-tint);color:#0f7a3d} .dc-badge--stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dc-green)} .dc-badge--legacy{background:#eef1f6;color:var(--dc-slate-dark)} .dc-badge--legacy::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dc-slate)} .dc-badge--eol{background:#eef1f6;color:var(--dc-slate);border:1px solid #dfe5ee} .dc-badge--sale{background:#fdecef;color:var(--dc-sale)} .dc-badge--featured{background:#fff1ea;color:#C2410C} .dc-badge--info{background:var(--dc-info);color:#1b4fd1} .dc-badge--tier{background:var(--dc-ink);color:#fff} /* OOS cell: badge stacked above disabled buy button, right-aligned inside .dc-num table cells */ .dc-oos{display:inline-flex;flex-direction:column;align-items:flex-end;gap:4px} /* 7. CARDS ------------------------------------------------------------------ */ .dc-card{background:#fff;border:1px solid var(--dc-border);border-radius:var(--dc-radius); padding:22px;box-shadow:var(--dc-shadow-card)} .dc-card--flat{box-shadow:none} .dc-card--pad-sm{padding:16px} .dc-card__icon{width:42px;height:42px;border-radius:10px;background:var(--dc-info); display:flex;align-items:center;justify-content:center;margin-bottom:14px;color:var(--dc-blue)} .dc-card__title{font-family:var(--dc-font-head);font-weight:600;color:var(--dc-ink);font-size:16px;margin:0 0 6px} .dc-grid{display:grid;gap:18px} .dc-grid--2{grid-template-columns:repeat(2,1fr)} .dc-grid--3{grid-template-columns:repeat(3,1fr)} .dc-grid--4{grid-template-columns:repeat(4,1fr)} /* Product card (WooCommerce loop) */ .dc-product{display:flex;flex-direction:column;background:#fff;border:1px solid var(--dc-border); border-radius:var(--dc-radius);overflow:hidden;transition:var(--dc-ease)} .dc-product:hover{box-shadow:var(--dc-shadow-pop)} .dc-product__media{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:14px} .dc-product__media img{max-width:100%;max-height:100%;object-fit:contain} .dc-product__body{padding:14px 16px;display:flex;flex-direction:column;gap:8px;flex:1} .dc-product__name{font-family:var(--dc-font-head);font-weight:500;color:var(--dc-ink);font-size:15px;line-height:1.3} .dc-product__sku{font-family:var(--dc-font-mono);font-size:12px;color:var(--dc-muted)} /* 8. PRICE ------------------------------------------------------------------ */ /* "Our price" = the actual selling price: body font, tabular figures, bold dark ink, never underlined. */ .dc-price{font-family:var(--dc-font-body);font-weight:700;color:var(--dc-ink);font-size:17px; font-variant-numeric:tabular-nums;text-decoration:none} /* MSRP / Fortinet list price = a struck reference anchor: smaller, muted, line-through. NOT a "sale". */ .dc-price__old{font-family:var(--dc-font-body);font-weight:400;color:var(--dc-muted); text-decoration:line-through;font-size:13px;margin-right:6px;font-variant-numeric:tabular-nums} .dc-price__sale{color:var(--dc-ink)} /* legacy hook: no longer red — actual price is dark ink */ /* Live WooCommerce get_price_html() markup: =MSRP reference, =our price. Same rules as above. */ .dc-price del{color:var(--dc-muted);font-weight:400;font-size:13px;margin-right:6px;text-decoration:line-through} .dc-price ins{color:var(--dc-ink);font-weight:700;text-decoration:none} .dc-price .woocommerce-Price-amount{font-variant-numeric:tabular-nums} /* quote fallback rendered as a price slot (plugin: no/zero-price products) */ .dc-price--quote{color:var(--dc-blue-action);font-weight:600;font-size:13px;text-decoration:none} /* tiny label above/before a price, e.g. "Fortinet MSRP" / "Our price" */ .dc-price__lbl{font-family:var(--dc-font-body);font-size:10px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:var(--dc-muted);display:block;margin-bottom:1px} .dc-save{font-size:12px;font-weight:600;color:var(--dc-green)} /* Term-grid cell (pivot buy-table: rows=license type, cols=1yr/3yr/5yr). Line 1: "View product " link (primary). Line 2: prices column (List over sale) + cart icon, right. Line 3 (optional): "Request a better price" secondary link OR an "Out of stock" badge. */ .dc-term-cell{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right} /* line 1: primary SKU link — "View product" on its own line, SKU on the next (never breaks mid-SKU) */ .dc-term-cell__sku{display:inline-flex;flex-direction:column;align-items:flex-end; font-family:var(--dc-font-body);font-size:11.5px;color:var(--dc-blue-action);text-decoration:none;line-height:1.3} .dc-term-cell__sku:hover{text-decoration:underline} .dc-term-cell__view{font-size:14.5px;font-weight:500} .dc-term-cell__sku .dc-mono{font-family:var(--dc-font-mono);font-size:12px} /* SKU listed from the price list but with no WooCommerce product yet: same layout, muted, no link/price/cart */ .dc-term-cell--noprod .dc-term-cell__sku--nolink{color:var(--dc-muted);cursor:default} .dc-term-cell--noprod .dc-term-cell__sku--nolink:hover{text-decoration:none} .dc-term-cell--noprod .dc-term-cell__view{color:var(--dc-muted);font-weight:500} /* line 2: prices (left column, stacked) + cart icon (right) */ .dc-term-cell__buy{display:flex;align-items:center;justify-content:flex-end;gap:10px} .dc-term-cell__px{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.2} .dc-term-cell__px .dc-price{font-size:15px} /* "our price" (sale) = prominent */ .dc-term-cell__px .dc-price del{display:block;font-size:11px;margin:0} /* List price = small struck */ .dc-term-cell__px .dc-price ins{display:block} /* "List " label, inline at the left of the struck MSRP, not struck itself */ .dc-term-cell__px .dc-price del::before{content:'List\00a0';display:inline-block;text-decoration:none; font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--dc-muted);vertical-align:1px} /* line 3: better-price = clearly SECONDARY — smaller, italic, muted slate, no underline (vs the blue SKU link) */ .dc-term-cell__bp{font-size:10.5px;font-style:italic;color:var(--dc-muted);text-decoration:none} .dc-term-cell__bp:hover{color:var(--dc-blue-action);text-decoration:underline} /* License description line below the license name in the row header */ .dc-term-desc{font-size:12px;color:var(--dc-muted);margin-top:3px;font-weight:400;line-height:1.4} /* Compare-bundles accordion (native
, no JS): minimal — the blue summary icon alone signals it's a helper. No light-blue tint, no left accent bar (Fito rule 2026-06-27). */ .dc-acc{border:1px solid var(--dc-border); border-radius:var(--dc-radius);background:#fff;margin:14px 0 0} .dc-acc>summary{cursor:pointer;list-style:none;padding:11px 16px;font-family:var(--dc-font-head); font-weight:600;font-size:13.5px;color:var(--dc-ink)} .dc-acc>summary>i{color:var(--dc-blue-action);margin-right:7px} .dc-acc>summary::-webkit-details-marker{display:none} .dc-acc>summary::after{content:'+';float:right;font-weight:700;color:var(--dc-blue-action)} .dc-acc[open]>summary::after{content:'\2212'} .dc-acc__body{padding:0 16px 16px;background:#fff} /* 9. TABLES ----------------------------------------------------------------- */ .dc-table-scroll{overflow-x:auto;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch;border:1px solid var(--dc-border);border-radius:var(--dc-radius);background:#fff} .dc-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px} .dc-table thead th{background:var(--dc-alt);text-align:left;font-family:var(--dc-font-head); font-weight:600;font-size:13px;color:var(--dc-ink);padding:12px 14px;border-bottom:1px solid var(--dc-border);white-space:nowrap} .dc-table td{padding:11px 14px;border-bottom:1px solid var(--dc-border)} .dc-table th.dc-num,.dc-table td.dc-num{text-align:right;font-variant-numeric:tabular-nums} .dc-table tbody tr:nth-child(even){background:#fafcff} .dc-table tbody tr:hover{background:var(--dc-info)} .dc-table tbody tr:last-child td{border-bottom:none} .dc-table .dc-val{font-family:var(--dc-font-mono);font-size:13.5px;color:var(--dc-ink)} .dc-table__row--legacy{background:#fbfcfe} .dc-table__divider td{background:var(--dc-alt);font-family:var(--dc-font-head);font-size:12px; font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--dc-slate);padding:8px 14px} /* Spec table (label/value) */ .dc-spec{width:100%;border-collapse:collapse;font-size:14.5px} .dc-spec th{text-align:left;font-weight:500;color:var(--dc-muted);padding:9px 14px;border-bottom:1px solid var(--dc-border);width:46%;vertical-align:top} .dc-spec td{padding:9px 14px;border-bottom:1px solid var(--dc-border);font-family:var(--dc-font-mono);color:var(--dc-ink)} /* Compare table (included / not) */ .dc-compare{width:100%;border-collapse:collapse;font-size:14px} .dc-compare thead th{background:var(--dc-alt);font-family:var(--dc-font-head);font-weight:600; color:var(--dc-ink);padding:11px 14px;border-bottom:1px solid var(--dc-border);text-align:center} .dc-compare thead th:first-child{text-align:left} .dc-compare td{padding:10px 14px;border-bottom:1px solid var(--dc-border);text-align:center} .dc-compare td:first-child{text-align:left} .dc-compare .dc-yes{color:var(--dc-green);font-weight:600} .dc-compare .dc-no{color:var(--dc-muted)} /* 10. LISTS / BULLETS ------------------------------------------------------- */ .dc-list{list-style:none;margin:0;padding:0} .dc-list li{position:relative;padding-left:26px;margin-bottom:8px;font-size:15px} .dc-list li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2316A34A' stroke-width='2.6'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat} .dc-list--blue li::before{stroke:var(--dc-blue)} .dc-list--num{counter-reset:dc;} .dc-list--num li{padding-left:32px} .dc-list--num li::before{content:counter(dc);counter-increment:dc;background:none; width:20px;height:20px;border-radius:50%;background-color:var(--dc-info);color:var(--dc-blue); font-family:var(--dc-font-head);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;top:1px} /* 11. FORMS ----------------------------------------------------------------- */ .dc-field{display:block;margin-bottom:14px} .dc-label{display:block;font-size:13.5px;font-weight:500;color:var(--dc-ink);margin-bottom:6px} .dc-input,.dc-select,.dc-textarea{width:100%;min-height:var(--dc-tap);font-family:var(--dc-font-body); font-size:15px;color:var(--dc-ink);background:#fff;border:1px solid var(--dc-border); border-radius:var(--dc-radius-btn);padding:10px 12px;transition:var(--dc-ease)} .dc-input:focus,.dc-select:focus,.dc-textarea:focus{outline:none;border-color:var(--dc-blue);box-shadow:0 0 0 3px rgba(44,117,255,.15)} .dc-input--error{border-color:var(--dc-sale)} .dc-error{color:var(--dc-sale);font-size:12.5px;margin-top:4px} .dc-qty{display:inline-flex;align-items:center;border:1px solid var(--dc-border);border-radius:var(--dc-radius-btn);overflow:hidden} .dc-qty button{width:38px;height:38px;border:none;background:#fff;color:var(--dc-ink);font-size:18px;cursor:pointer} .dc-qty button:hover{background:var(--dc-alt)} .dc-qty input{width:46px;height:38px;border:none;border-left:1px solid var(--dc-border);border-right:1px solid var(--dc-border);text-align:center;font-family:var(--dc-font-mono)} /* 12. ALERTS / CALLOUTS ----------------------------------------------------- */ .dc-alert{border-radius:var(--dc-radius);padding:14px 16px;font-size:14.5px;display:flex;gap:10px;align-items:flex-start} .dc-alert--info{background:var(--dc-info);color:#15407f} .dc-alert--success{background:var(--dc-green-tint);color:#0f7a3d} .dc-alert--warn{background:var(--dc-warn-tint);color:var(--dc-warn)} .dc-alert--error{background:#fdecef;color:var(--dc-sale)} /* 12b. AI ASSISTANT SUBSECTION (model pages — sits beside the demo block) ----- */ .dc-ai-title{display:flex;align-items:center;gap:8px;font-family:var(--dc-font-head); font-weight:600;font-size:16px;color:var(--dc-ink);margin:0 0 5px} .dc-ai-title img{height:14px;width:auto;flex:none} .dc-ai-sub{font-size:13.5px;color:var(--dc-muted);margin:0 0 12px;line-height:1.5} /* 12c. PROFESSIONAL SERVICES section (model pages, after Specs) — split panel --- */ .dc-svc{display:grid;grid-template-columns:0.82fr 1.18fr;background:var(--dc-alt); border:1px solid var(--dc-border);border-radius:var(--dc-radius);overflow:hidden;margin:40px 0 0} .dc-svc__media{position:relative;min-height:100%} .dc-svc__media::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(15,30,51,0) 70%,var(--dc-alt) 100%)} .dc-svc__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 25%;display:block} .dc-svc__body{padding:30px 32px} .dc-svc__body h2{margin:2px 0 8px} .dc-svc__list{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin:20px 0} .dc-svc__item{display:flex;gap:13px;align-items:flex-start} .dc-svc__item>i{color:var(--dc-blue);font-size:17px;margin-top:3px;flex:none;width:30px;height:30px; display:flex;align-items:center;justify-content:center;background:var(--dc-info);border-radius:9px} .dc-svc__item .t{font-family:var(--dc-font-head);font-weight:600;color:var(--dc-ink);font-size:14.5px;line-height:1.25} .dc-svc__item .d{font-size:12.5px;color:var(--dc-muted);line-height:1.45;margin-top:3px} @media(max-width:760px){.dc-svc{grid-template-columns:1fr}.dc-svc__media{min-height:210px} .dc-svc__media img{object-position:center 20%} .dc-svc__media::after{display:none}.dc-svc__list{grid-template-columns:1fr;gap:14px} .dc-svc__body{padding:22px 20px}} /* 12d. MOBILE "JUMP TO" FLOATING SECTION MENU (replaces the sticky top nav on phones) ---- */ .dc-jump{display:none} @media(max-width:768px){ .dc-jump{display:block;position:fixed;left:14px;bottom:14px;z-index:60} .dc-jump>summary{list-style:none;cursor:pointer;background:var(--dc-blue-action);color:#fff; font-family:var(--dc-font-head);font-weight:600;font-size:14px;line-height:1;padding:13px 18px; border-radius:var(--dc-radius-pill);box-shadow:var(--dc-shadow-pop);display:inline-flex;align-items:center;gap:8px} .dc-jump>summary::-webkit-details-marker{display:none} .dc-jump>summary::before{content:"\2630";font-size:15px} .dc-jump__menu{position:absolute;left:0;bottom:calc(100% + 10px);background:#fff; border:1px solid var(--dc-border);border-radius:var(--dc-radius);box-shadow:var(--dc-shadow-pop); padding:8px;width:min(82vw,300px);max-height:62vh;overflow:auto} .dc-jump__menu a{display:block;padding:11px 12px;border-radius:8px;color:var(--dc-ink); text-decoration:none;font-size:14px;font-weight:500;font-family:var(--dc-font-head)} .dc-jump__menu a:hover{background:var(--dc-alt)} .dc-jump__menu a.feat{background:var(--dc-info);color:var(--dc-blue-action)} .dc-jump__menu a.feat i{margin-right:7px} } /* 13. FAQ ACCORDION --------------------------------------------------------- */ .dc-faq{max-width:820px} .dc-faq__item{border:1px solid var(--dc-border);border-radius:10px;margin-bottom:10px;background:#fff;overflow:hidden} .dc-faq__q{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%; text-align:left;background:none;border:none;cursor:pointer;padding:16px 18px; font-family:var(--dc-font-head);font-weight:500;font-size:15.5px;color:var(--dc-ink);min-height:var(--dc-tap)} .dc-faq__chev{flex:none;color:var(--dc-blue);transition:var(--dc-ease-slow)} .dc-faq__item.is-open .dc-faq__chev{transform:rotate(180deg)} .dc-faq__a{max-height:0;overflow:hidden;transition:max-height var(--dc-ease-slow);padding:0 18px} .dc-faq__item.is-open .dc-faq__a{max-height:400px;padding-bottom:16px} .dc-faq__a p{font-size:14.5px;margin:0;color:var(--dc-body)} /* 14. BREADCRUMB ------------------------------------------------------------ */ .dc-crumb{font-size:13px;color:var(--dc-muted)} .dc-crumb a{color:var(--dc-muted)} .dc-crumb a:hover{color:var(--dc-blue)} /* 15. STICKY SECTION NAV ---------------------------------------------------- */ .dc-snav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--dc-border)} .dc-snav__inner{display:flex;gap:6px;overflow-x:auto;max-width:var(--dc-container);margin:0 auto;padding:0 20px} .dc-snav a{font-family:var(--dc-font-head);font-size:14px;font-weight:500;color:var(--dc-body); padding:14px 12px;white-space:nowrap;border-bottom:2px solid transparent;min-height:var(--dc-tap);display:flex;align-items:center} .dc-snav a:hover{color:var(--dc-blue);text-decoration:none} .dc-snav a.is-active{color:var(--dc-blue);border-bottom-color:var(--dc-blue)} /* 16. TRUST ROW / KPI ------------------------------------------------------- */ .dc-trust{display:flex;flex-wrap:wrap;gap:10px 18px} .dc-trust__item{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--dc-ink);font-weight:500} .dc-trust__item svg{flex:none;color:var(--dc-green)} .dc-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .dc-kpi{background:#fff;border:1px solid var(--dc-border);border-radius:var(--dc-radius);padding:16px 18px;box-shadow:var(--dc-shadow-card)} .dc-kpi__n{font-family:var(--dc-font-head);font-weight:600;font-size:24px;color:var(--dc-ink);line-height:1.1} .dc-kpi__l{font-size:12.5px;color:var(--dc-muted);margin-top:4px} /* 17. ICON SIZING ----------------------------------------------------------- */ .dc-ic{display:inline-flex;color:var(--dc-blue)} .dc-ic svg{width:18px;height:18px} .dc-ic--lg svg{width:24px;height:24px} /* 18. CTA STRIP ------------------------------------------------------------- */ .dc-ctastrip{background:var(--dc-ink);color:#fff;border-radius:16px;padding:34px; display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap} .dc-ctastrip h2{color:#fff;margin:0 0 6px} .dc-ctastrip p{color:#b9c6da;margin:0;font-size:15px} /* 19. STICKY MOBILE BUY BAR ------------------------------------------------- */ .dc-buybar{display:none} /* 20. RESPONSIVE (mobile-first breakpoints) --------------------------------- */ @media(max-width:980px){ .dc-grid--4{grid-template-columns:repeat(2,1fr)} } @media(max-width:760px){ :root{--dc-h1:25px;--dc-h2:20px} .dc-section{padding:var(--dc-s6) 0} .dc-grid--2,.dc-grid--3,.dc-grid--4{grid-template-columns:1fr} .dc-kpis{grid-template-columns:repeat(2,1fr)} .dc-ctastrip{padding:24px} .dc-buybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff; border-top:1px solid var(--dc-border);box-shadow:0 -2px 10px rgba(15,30,51,.08);padding:10px 16px;gap:10px} .dc-buybar .dc-btn{flex:1} } /* Buy/term pivot tables reflow to stacked cards on phones — each row becomes a card, each term (1/3/5 yr) its own labeled line. No horizontal scroll. Add .dc-table--stack to the table; term cells carry data-label. (Fito rule 2026-06-27.) */ @media(max-width:600px){ .dc-table-scroll:has(.dc-table--stack){overflow-x:visible;border:none;border-radius:0;background:transparent} .dc-table--stack{min-width:0} .dc-table--stack thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .dc-table--stack tbody,.dc-table--stack tr,.dc-table--stack td{display:block;width:100%} .dc-table--stack tr{border:1px solid var(--dc-border);border-radius:var(--dc-radius); margin:0 0 12px;background:#fff;overflow:hidden;box-shadow:var(--dc-shadow-card)} .dc-table--stack tbody tr:nth-child(even){background:#fff} .dc-table--stack td{border:none;border-bottom:1px solid var(--dc-border);padding:11px 14px;text-align:left} .dc-table--stack tr td:last-child{border-bottom:none} .dc-table--stack td:first-child{background:var(--dc-alt)} /* license/name header band */ .dc-table--stack td.dc-num{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;text-align:right} .dc-table--stack td.dc-num::before{content:attr(data-label);font-family:var(--dc-font-head); font-weight:600;font-size:12.5px;color:var(--dc-muted);flex:none;text-align:left;padding-top:3px} .dc-table--stack td.dc-num:has(.dc-no){display:none} /* hide terms not offered */ .dc-table--stack .dc-term-cell{align-items:flex-end} .dc-table--stack .dc-term-desc{white-space:normal} } /* Respect reduced motion */ @media(prefers-reduced-motion:reduce){ .dc-faq__a,.dc-faq__chev,.dc-btn,.dc-product{transition:none} html{scroll-behavior:auto} } /* ============================================================================ 21. v1.1 ADDITIONS — polish layer + correctness gaps + starter primitives Keeps every v1.0 token + the buy-only yellow rule. Live-safe (.dc-* only). ========================================================================== */ /* 21A. New + refined tokens ------------------------------------------------- */ :root{ --dc-radius-sm:9px; /* inputs, FAQ items, card icons, qty */ --dc-shadow-xs:0 1px 2px rgba(15,30,51,.04); --dc-shadow-sm:0 1px 3px rgba(15,30,51,.05), 0 1px 2px rgba(15,30,51,.04); --dc-shadow-md:0 4px 12px rgba(15,30,51,.07), 0 2px 4px rgba(15,30,51,.04); --dc-shadow-lg:0 14px 34px rgba(15,30,51,.10), 0 4px 10px rgba(15,30,51,.05); --dc-shadow:var(--dc-shadow-sm); --dc-shadow-card:var(--dc-shadow-sm); --dc-shadow-pop:var(--dc-shadow-lg); --dc-grad-hero:linear-gradient(180deg,#F7FAFE 0%,#FFFFFF 70%); --dc-grad-alt:linear-gradient(180deg,#FFFFFF 0%,var(--dc-alt) 100%); --dc-grad-blue:linear-gradient(135deg,#2C75FF 0%,#1B5FE0 100%); --dc-grad-ink:linear-gradient(135deg,#16263F 0%,#0F1E33 100%); --dc-display:40px; --dc-tracking-tight:-0.02em; --dc-z-nav:40; --dc-z-sticky:50; --dc-z-pop:60; --dc-z-modal:100; --dc-z-toast:110; } @media(max-width:760px){ :root{ --dc-display:30px; } } /* 21B. Display heading + whitespace rhythm + hero wash ---------------------- */ .dc-display{font-family:var(--dc-font-head);font-weight:600;font-size:var(--dc-display); line-height:1.12;letter-spacing:var(--dc-tracking-tight);color:var(--dc-ink);margin:0 0 .35em} .dc h1{letter-spacing:var(--dc-tracking-tight)} .dc-section--lg{padding:var(--dc-s8) 0} .dc-hero{background:var(--dc-grad-hero)} .dc-hero--alt{background:var(--dc-grad-alt)} /* 21C. Card hover lift ------------------------------------------------------ */ .dc-card--hover{transition:transform var(--dc-ease),box-shadow var(--dc-ease)} .dc-card--hover:hover{transform:translateY(-2px);box-shadow:var(--dc-shadow-md)} .dc-product:hover{transform:translateY(-2px);box-shadow:var(--dc-shadow-md)} .dc-kpi{box-shadow:var(--dc-shadow-sm)} /* 21D. CTA strip gradients -------------------------------------------------- */ .dc-ctastrip{background:var(--dc-grad-ink)} .dc-ctastrip--blue{background:var(--dc-grad-blue)} .dc-ctastrip--blue p{color:#dbe7ff} /* 21E. Global keyboard focus ------------------------------------------------ */ .dc a:focus-visible,.dc-link:focus-visible,.dc-snav a:focus-visible, .dc-faq__q:focus-visible,.dc-crumb a:focus-visible,.dc-qty button:focus-visible{ outline:3px solid rgba(44,117,255,.45);outline-offset:2px;border-radius:4px} /* 21F. Button active + loading ---------------------------------------------- */ .dc-btn:active{transform:translateY(1px)} .dc-btn.is-loading{position:relative;color:transparent !important;pointer-events:none} .dc-btn.is-loading::after{content:"";position:absolute;width:16px;height:16px; border:2px solid currentColor;border-top-color:transparent;border-radius:50%; animation:dc-spin .6s linear infinite;color:var(--dc-ink)} .dc-btn--primary.is-loading::after,.dc-btn--outline.is-loading::after{color:#fff} @keyframes dc-spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.dc-btn.is-loading::after{animation:none}} /* 21G. Input disabled + valid ----------------------------------------------- */ .dc-input[disabled],.dc-select[disabled],.dc-textarea[disabled]{ background:var(--dc-alt);color:var(--dc-muted);cursor:not-allowed} .dc-input--valid{border-color:var(--dc-green)} .dc-input--valid:focus{box-shadow:0 0 0 3px rgba(22,163,74,.15)} /* 21H. Radius consistency + FAQ clip fix + sticky table head + z tokens ----- */ .dc-card__icon,.dc-faq__item,.dc-qty{border-radius:var(--dc-radius-sm)} .dc-faq__item.is-open .dc-faq__a{max-height:1500px} .dc-table-scroll--sticky{max-height:70vh;overflow:auto} .dc-table-scroll--sticky .dc-table thead th{position:sticky;top:0;z-index:1} .dc-snav{z-index:var(--dc-z-nav)} .dc-buybar{z-index:var(--dc-z-sticky)} /* 21I. Starter primitives (backlog: ready when the page type needs them) ---- */ .dc-pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;margin:var(--dc-s6) 0} .dc-pager a,.dc-pager span{display:inline-flex;align-items:center;justify-content:center; min-width:40px;height:40px;padding:0 10px;border:1px solid var(--dc-border);border-radius:var(--dc-radius-btn); font-family:var(--dc-font-head);font-size:14px;font-weight:500;color:var(--dc-body);background:#fff;transition:var(--dc-ease)} .dc-pager a:hover{border-color:var(--dc-blue);color:var(--dc-blue);text-decoration:none} .dc-pager .is-current{background:var(--dc-blue-action);border-color:var(--dc-blue-action);color:#fff} .dc-pager .is-disabled{opacity:.45;pointer-events:none} .dc-empty{text-align:center;max-width:480px;margin:var(--dc-s7) auto;padding:var(--dc-s6)} .dc-empty__icon{width:56px;height:56px;border-radius:50%;background:var(--dc-info); display:flex;align-items:center;justify-content:center;color:var(--dc-blue);margin:0 auto var(--dc-s4)} .dc-empty__title{font-family:var(--dc-font-head);font-weight:600;font-size:18px;color:var(--dc-ink);margin:0 0 6px} .dc-empty__text{color:var(--dc-muted);font-size:14.5px;margin:0 0 var(--dc-s4)} .dc-stars{display:inline-flex;align-items:center;gap:2px;color:#E2E8F0} .dc-stars svg{width:16px;height:16px} .dc-stars .is-on{color:#F5A623} .dc-stars__count{margin-left:6px;font-size:13px;color:var(--dc-muted)} .dc-tip{position:relative;border-bottom:1px dotted var(--dc-muted);cursor:help} .dc-tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px); transform:translateX(-50%) translateY(4px);background:var(--dc-ink);color:#fff;font-size:12.5px; font-family:var(--dc-font-body);line-height:1.4;white-space:nowrap;padding:7px 10px;border-radius:8px; box-shadow:var(--dc-shadow-md);opacity:0;pointer-events:none;transition:var(--dc-ease);z-index:var(--dc-z-pop)} .dc-tip:hover::after,.dc-tip:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)} .dc-skel{background:linear-gradient(90deg,#eef2f8 25%,#f7fafe 50%,#eef2f8 75%); background-size:200% 100%;animation:dc-shimmer 1.3s ease-in-out infinite;border-radius:var(--dc-radius-sm)} .dc-skel--line{height:12px;margin:6px 0} .dc-skel--media{aspect-ratio:1/1} @keyframes dc-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @media(prefers-reduced-motion:reduce){.dc-skel{animation:none}} /* ============================================================================ 22. SITE FOOTER (.dc-ftr*) — global footer component, dark ink band. Added 2026-06-29. Self-contained (own type + link colors), so it does NOT need a .dc wrapper. Buy-yellow never appears here (no buy action in footer); the only CTA is the blue "Request a quote" button. Mobile-first, reflows to 2-col then 1-col. Used by the Elementor footer template (id 140615). ========================================================================== */ .dc-ftr{background:var(--dc-grad-ink);color:#c7d2e2;font-family:var(--dc-font-body); font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased} .dc-ftr *{box-sizing:border-box} .dc-ftr a{color:#c7d2e2;text-decoration:none;transition:color var(--dc-ease)} .dc-ftr a:hover{color:#fff;text-decoration:none} .dc-ftr a:focus-visible{outline:3px solid rgba(91,155,255,.55);outline-offset:2px;border-radius:4px} .dc-ftr__wrap{max-width:var(--dc-container);margin:0 auto;padding:0 20px} /* 22a. Trust strip (top band) */ .dc-ftr__trust{border-bottom:1px solid rgba(255,255,255,.10)} .dc-ftr__trust .dc-ftr__wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px; padding-top:26px;padding-bottom:26px} .dc-ftr-trust{display:flex;align-items:center;gap:13px} .dc-ftr-trust__ic{flex:none;width:40px;height:40px;border-radius:10px;background:rgba(44,117,255,.16); display:flex;align-items:center;justify-content:center;color:#5b9bff} .dc-ftr-trust__ic svg{width:21px;height:21px} .dc-ftr-trust__ic + span{display:flex;flex-direction:column;gap:2px;min-width:0} .dc-ftr-trust__t{display:block;font-family:var(--dc-font-head);font-weight:600;font-size:13.5px;color:#fff;line-height:1.25} .dc-ftr-trust__d{display:block;font-size:12px;color:#8da2bd;line-height:1.35} /* 22b. Main columns */ .dc-ftr__main{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px; padding-top:46px;padding-bottom:42px} .dc-ftr__brand-logo{height:32px;width:auto;display:block;margin:0 0 16px} .dc-ftr__tagline{color:#fff;font-family:var(--dc-font-head);font-weight:500;font-size:15px; margin:0 0 8px;max-width:36ch} .dc-ftr__pitch{color:#a9bbd4;font-size:13.5px;line-height:1.55;margin:0 0 18px;max-width:42ch} .dc-ftr__col h3{font-family:var(--dc-font-head);font-weight:600;font-size:12.5px;letter-spacing:.07em; text-transform:uppercase;color:#fff;margin:0 0 16px} .dc-ftr__links{list-style:none;margin:0;padding:0} .dc-ftr__links li{margin:0 0 11px} .dc-ftr__links a{font-size:14.5px;display:inline-flex;align-items:center;min-height:24px} /* 22c. Contact block */ .dc-ftr__contact{list-style:none;margin:0 0 18px;padding:0;font-size:14px;color:#a9bbd4} .dc-ftr__contact li{display:flex;gap:11px;margin:0 0 10px;align-items:flex-start;line-height:1.45} .dc-ftr__contact svg{flex:none;width:17px;height:18px;color:#5b9bff;margin-top:2px} .dc-ftr__contact a{color:#a9bbd4} .dc-ftr__contact a:hover{color:#fff} /* 22d. CTA button (blue only — never yellow in footer) */ .dc-ftr__cta{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--dc-font-head);font-weight:600;font-size:14.5px;line-height:1;min-height:44px; padding:12px 22px;border-radius:var(--dc-radius-btn);background:var(--dc-blue-action); color:#fff;transition:background var(--dc-ease)} .dc-ftr__cta:hover{background:var(--dc-blue-700);color:#fff} .dc-ftr__cta svg{width:17px;height:17px} /* 22e. Social */ .dc-ftr__social{display:flex;gap:10px;margin-top:18px} .dc-ftr__social a{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.07); display:flex;align-items:center;justify-content:center;color:#c7d2e2} .dc-ftr__social a:hover{background:var(--dc-blue-action);color:#fff} .dc-ftr__social svg{width:18px;height:18px} /* 22f. Bottom bar (copyright + legal + payments) */ .dc-ftr__bottom{border-top:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18)} .dc-ftr__bottom .dc-ftr__wrap{display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;gap:14px 26px;padding-top:22px;padding-bottom:22px} .dc-ftr__legal{display:flex;flex-wrap:wrap;gap:7px 18px;align-items:center;font-size:13px;color:#8da2bd} .dc-ftr__legal a{font-size:13px;color:#8da2bd} .dc-ftr__legal a:hover{color:#fff} .dc-ftr__copy{font-size:13px;color:#8da2bd;margin:0} .dc-ftr__sep{color:#43526a} .dc-ftr__pay{display:flex;flex-wrap:wrap;align-items:center;gap:7px} .dc-ftr__pay-lbl{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:#7d92ae;margin-right:3px} .dc-ftr-pay{display:inline-flex;align-items:center;justify-content:center;height:26px;min-width:42px; padding:0 9px;background:#fff;border-radius:5px;font-family:var(--dc-font-head);font-weight:700; font-size:11.5px;letter-spacing:.02em;color:#0F1E33} .dc-ftr-pay--visa{color:#1a1f71} .dc-ftr-pay--mc{color:#222} .dc-ftr-pay--amex{color:#1174c4} .dc-ftr-pay--pp{color:#003087} /* 22g. Responsive */ @media(max-width:980px){ .dc-ftr__main{grid-template-columns:1fr 1fr;gap:30px 26px} .dc-ftr__brand{grid-column:1 / -1} } @media(max-width:760px){ .dc-ftr__trust .dc-ftr__wrap{grid-template-columns:1fr 1fr;gap:18px 20px} } @media(max-width:560px){ .dc-ftr__trust .dc-ftr__wrap{grid-template-columns:1fr} .dc-ftr__main{grid-template-columns:1fr;gap:28px} .dc-ftr__bottom .dc-ftr__wrap{flex-direction:column;align-items:flex-start;gap:16px} } /* Mobile: hide the legacy sticky section nav on ANY page that carries the .dc-jump floating menu replacement (FortiGate model pages, FortiAP model pages, future engines) — one rule, single source of truth (2026-06-30). */ @media(max-width:768px){body:has(.dc-jump) .dc360-nav{display:none !important}}