/* ========================================================================= SHIPLINE — Design Tokens Strategy: every component consumes GENERIC service variables (--svc-accent / --svc-dark / --svc-tint / --svc-contrast). The attribute re-assigns those generics. No component ever references a literal service color. ========================================================================= */ :root { /* ---- Neutral base (Pirate Ship-style flat system) ------------------- */ --ink: #1F1235; /* headings, nav */ --body: #514E66; /* paragraph text */ --paper: #FFFFFF; --mist: #F7F6FB; /* alternating sections */ --line: #E3E0EC; /* default borders */ --success: #17924A; --danger: #D23B2E; /* ---- Brand (Home / Rates / How it Works / Resources only) ----------- */ --brand: #FF6E6C; --brand-dark: #E4504E; --brand-tint: #FFE5E4; /* ---- Service palette definitions (referenced only by scopes below) -- */ --c-priority: #3DA9FC; /* Electric Blue */ --c-priority-dark: #0E5E9C; --c-priority-tint: #DCEFFE; --c-intl: #00B5A5; /* Teal */ --c-intl-dark: #00776C; --c-intl-tint: #D2F3F0; --c-moving: #FF6E6C; /* Coral */ --c-moving-dark: #D6403E; --c-moving-tint: #FFE5E4; --c-trucking: #2CB67D; /* Dark Green */ --c-trucking-dark: #1B7A52; --c-trucking-tint: #DCF4E9; --c-freight: #6246EA; /* Navy */ --c-freight-dark: #4630B8; --c-freight-tint: #E6E1FC; /* ---- Generic service slots (defaults to brand on non-service pages) - */ --svc-accent: var(--brand); --svc-dark: var(--brand-dark); --svc-tint: var(--brand-tint); --svc-contrast: #1F1235; /* HH style: ink text on colored surfaces */ /* ---- Type ------------------------------------------------------------ */ --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-data: "IBM Plex Mono", ui-monospace, monospace; --text-base: 1.125rem; /* 18px */ --leading: 1.6; /* ---- Shape & space (flat structure rules) ---------------------------- */ --radius: 12px; --radius-pill: 999px; --border-w: 2px; /* service borders are 2px solid, never shadows */ --section-pad: clamp(4rem, 9vw, 8rem); --shadow-flat: 0 1px 0 rgba(26, 43, 60, 0.08); /* max allowed elevation */ } /* ========================================================================= SERVICE SCOPES functions.php outputs etc. on the five /pricing/* child pages. One attribute → entire page re-themes. ========================================================================= */ body[data-service="priority"], body.svc-priority { --svc-accent: var(--c-priority); --svc-dark: var(--c-priority-dark); --svc-tint: var(--c-priority-tint); } body[data-service="international"], body.svc-international { --svc-accent: var(--c-intl); --svc-dark: var(--c-intl-dark); --svc-tint: var(--c-intl-tint); } body[data-service="moving"], body.svc-moving { --svc-accent: var(--c-moving); --svc-dark: var(--c-moving-dark); --svc-tint: var(--c-moving-tint); } body[data-service="trucking"], body.svc-trucking { --svc-accent: var(--c-trucking); --svc-dark: var(--c-trucking-dark); --svc-tint: var(--c-trucking-tint); } body[data-service="freight"], body.svc-freight { --svc-accent: var(--c-freight); --svc-dark: var(--c-freight-dark); --svc-tint: var(--c-freight-tint); --svc-contrast: #FFFFFF; } /* ========================================================================= COMPONENT CONSUMPTION — every rule below works on all five services ========================================================================= */ /* Hero band — full-strength service color, Shippo-style */ .svc-hero { background: var(--svc-accent); padding: var(--section-pad) 0; } .svc-hero .eyebrow { color: var(--svc-contrast); opacity: 0.8; font: 700 0.8125rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; } .svc-hero h1 { font: 700 clamp(2.25rem, 5vw, 3.5rem)/1.1 var(--font-display); color: var(--svc-contrast); } .svc-hero p { color: var(--svc-contrast); opacity: 0.92; } .svc-hero .svc-calc { border-color: var(--ink); } /* Buttons */ .btn-svc { background: var(--svc-accent); color: var(--svc-contrast); border: var(--border-w) solid var(--svc-accent); border-radius: var(--radius-pill); font: 700 1rem/1 var(--font-body); padding: 0.9em 1.8em; transition: background 0.15s ease, border-color 0.15s ease; } .btn-svc:hover, .btn-svc:focus-visible { background: var(--svc-dark); border-color: var(--svc-dark); } .btn-svc:focus-visible { outline: 3px solid var(--svc-tint); outline-offset: 2px; } .btn-svc--ghost { background: transparent; color: var(--svc-accent); } .btn-svc--ghost:hover { background: var(--svc-accent); color: var(--svc-contrast); } /* Calculator card — the signature element on every service page */ .svc-calc { background: var(--paper); border: var(--border-w) solid var(--svc-accent); border-radius: var(--radius); box-shadow: var(--shadow-flat); padding: 2rem; } .svc-calc__result { font: 500 1.75rem/1.2 var(--font-data); color: var(--svc-dark); } .svc-calc input:focus, .svc-calc select:focus { border-color: var(--svc-accent); outline: 3px solid var(--svc-tint); } /* Flat-rate matrix (Bay Area Moving) — selectable cells */ .rate-matrix button[aria-pressed="true"] { background: var(--svc-tint); border-color: var(--svc-accent); color: var(--svc-dark); } /* Trust strip checkmarks, section accents */ .trust-strip svg { color: var(--svc-accent); } .svc-section--tint { background: var(--svc-tint); } .svc-table thead th { background: var(--svc-tint); color: var(--svc-dark); } .svc-faq details[open] { border-left: 3px solid var(--svc-accent); } /* Bottom CTA band */ .cta-band { background: var(--svc-accent); color: var(--svc-contrast); padding: var(--section-pad) 0; } .cta-band .btn-invert { background: var(--paper); color: var(--svc-dark); border-radius: var(--radius-pill); font-weight: 700; } /* Element-level scoping: ANY element carrying data-service re-assigns the generic slots for itself and its children. Used by: pricing-hub .svc-card containers, and Shipline calculator widgets in "force service" mode (dropped on neutral pages). Body-level scoping above still handles whole service pages. */ [data-service="priority"] { --svc-accent: var(--c-priority); --svc-dark: var(--c-priority-dark); --svc-tint: var(--c-priority-tint); } [data-service="international"] { --svc-accent: var(--c-intl); --svc-dark: var(--c-intl-dark); --svc-tint: var(--c-intl-tint); } [data-service="moving"] { --svc-accent: var(--c-moving); --svc-dark: var(--c-moving-dark); --svc-tint: var(--c-moving-tint); } [data-service="trucking"] { --svc-accent: var(--c-trucking); --svc-dark: var(--c-trucking-dark); --svc-tint: var(--c-trucking-tint); } [data-service="freight"] { --svc-accent: var(--c-freight); --svc-dark: var(--c-freight-dark); --svc-tint: var(--c-freight-tint); } .svc-card { background: var(--paper); border: 2px solid var(--ink); border-left: 6px solid var(--svc-accent); border-radius: var(--radius); transition: border-color 0.15s ease; } .svc-card:hover { border-color: var(--svc-accent); } .svc-card .price { font: 500 1.5rem/1 var(--font-data); color: var(--svc-dark); } /* Nav dropdown color dots — the menu doubles as a legend for the system */ .svc-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 0.5em; background: var(--svc-accent); } .dropdown-panel li[data-service="priority"] .svc-dot { background: var(--c-priority); } .dropdown-panel li[data-service="international"] .svc-dot { background: var(--c-intl); } .dropdown-panel li[data-service="moving"] .svc-dot { background: var(--c-moving); } .dropdown-panel li[data-service="trucking"] .svc-dot { background: var(--c-trucking); } .dropdown-panel li[data-service="freight"] .svc-dot { background: var(--c-freight); } /* Main nav CTA */ .menu-cta > a { background: var(--brand); color: var(--ink); border-radius: var(--radius-pill); padding: 0.7em 1.5em; font-weight: 700; } .menu-cta > a:hover { background: var(--brand-dark); } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } }