/* Theme Name: Carroll Transportation Group Theme URI: https://carroll-trucking.com Description: Divi child theme for Carroll Transportation Group. Carries the complete design system, the TikTok Sans variable font and the motion script, so nothing has to be pasted into an admin box or uploaded to an exact path by hand. Author: Primm Advertising Template: Divi Version: 1.2.1 Text Domain: carroll-child */ /* ========================================================================== CARROLL TRANSPORTATION GROUP — homepage Built to numbers measured off https://carroll.primm-advertising-demo.com Container 1280 / 32px pad -> 1216 content. Navy #061C31 · Red #D02C2A. ========================================================================== */ .crl{ --navy:#061C31; --red:#D02C2A; --c1:#FBF8F2; --c2:#FAF6EE; --c3:#EFE7D9; --line:#E3DDD3; --muted:#515F6E; } .crl, .crl p, .crl li, .crl span, .crl a, .crl input, .crl select, .crl textarea, .crl button{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; /* the source runs Inter with these stylistic sets — without them body copy is a hair wider and wraps a word early on almost every paragraph */ font-feature-settings:'cv11','ss01'; } /* Divi's et_pb_text emits CSS for header_2_* .. header_6_* but NOT for header_* (H1), so an H1 styled through the module fields renders at the theme default — 30px dark grey on navy. Drive the H1 from here instead; every page uses the same measured H1. */ .crl .crl-h1 h1{ font-weight:700; font-size:63.36px; line-height:66.53px; letter-spacing:-0.6336px; color:var(--c2); } .crl-split .crl-h1 h1, .crl-reach .crl-h1 h1{ color:var(--navy); } .crl h1,.crl h2,.crl h3,.crl h4,.crl blockquote, .crl .crl-statn,.crl .crl-coord{ font-family:'TikTok Sans','Inter',system-ui,sans-serif; /* TikTok Sans is variable (wdth 75..125). The source runs headings CONDENSED at 90% — without this every headline is ~11% wider and breaks on different words. */ font-stretch:90%; } /* the signature move — a red italic phrase inside an upright headline */ .crl h1 *, .crl h2 *, .crl h3 *, .crl h4 *, .crl blockquote *{ font-family:inherit; } /* the accent is the COLOUR; the italic belongs only to the form. The source also ships a plain — upright and red — and forcing italic on it was wrong. */ .crl .crl-em{ color:var(--red); font-weight:inherit; display:inline-block; } .crl em.crl-em{ font-style:italic; } .crl p{ padding-bottom:0 !important; margin:0; } .crl .et_pb_text_inner > p:last-child{ margin-bottom:0; } .crl a{ text-decoration:none; } /* Divi's own @font-face for an uploaded font carries no descriptors, so its local copy only ever satisfies weight 400 at width 100% — every 700-weight, 90%-width headline would fall back to the Google copy. Declare the variable ranges ourselves so the hosted file is fully usable on its own, and the site keeps its type if Google Fonts is ever unreachable. */ @font-face{ font-family:'TikTok Sans'; font-style:normal; font-weight:400 900; font-stretch:75% 125%; font-display:swap; src:url(assets/fonts/carroll-tiktok-sans-variable.woff2) format('woff2'); } /* ---- shared bits --------------------------------------------------------- */ .crl .crl-eyebrow{ display:flex; align-items:center; gap:16px; } .crl .crl-eyebrow-t{ font-size:12px; font-weight:600; letter-spacing:2.16px; text-transform:uppercase; color:var(--red); line-height:18px; } .crl .crl-eyebrow-c{ justify-content:center; } .crl .crl-rule{ display:block; width:48px; height:1px; background:var(--red); flex:0 0 48px; } .crl .crl-arrow{ display:inline-block; margin-left:8px; } .crl .crl-redlink{ color:var(--red); font-size:14px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; display:inline-flex; align-items:center; } .crl .crl-center{ text-align:center; } .crl .crl-mb20{ margin-bottom:20px !important; } .crl .crl-mb24{ margin-bottom:24px !important; } .crl .crl-mb32{ margin-bottom:32px !important; } .crl .crl-mb40{ margin-bottom:40px !important; } .crl .et_pb_module{ margin-bottom:0; } /* ========================================================================== TYPE + BUTTON SYSTEM — defined ONCE here, reused by all 23 pages. Divi's per-module generated CSS proved unreliable for these (it emits nothing for header_* on a text module, and dropped several text/button modules on the homepage outright), and 23 hand-tuned copies is exactly the inconsistency this pass is fixing. One definition, minor tweaks by class. ========================================================================== */ /* Headings. Divi's per-module generation drops modules unpredictably, so every recurring type role is defined here once and reused across all 23 pages. Colour follows the section, which is the only thing that actually varies. */ .crl .crl-h2 h2{ font-weight:700; font-size:48px; line-height:51.84px; letter-spacing:-0.48px; color:var(--navy); } .crl-hero .crl-h2 h2, .crl-reel .crl-h2 h2, .crl-cta .crl-h2 h2{ color:var(--c2); } .crl-panel .crl-p-body h3{ font-weight:500; font-size:60px; line-height:63px; letter-spacing:-0.6px; color:var(--c2); max-width:696px; } .crl-panel .crl-p-body p{ font-size:18px; line-height:29.25px; color:var(--c2); max-width:576px; } .crl .crl-2up-body h3{ font-weight:700; font-size:31.68px; line-height:36.43px; letter-spacing:-0.3168px; color:var(--c2); } .crl .crl-reel-lede p{ font-size:16px; line-height:26px; color:var(--c2); } .crl .crl-lede p{ font-size:18px; line-height:29.25px; color:var(--c2); } .crl .crl-lede-sm p{ font-size:16px; line-height:26px; color:var(--c2); } .crl-split .crl-lede p, .crl-reach .crl-lede p, .crl-reach .crl-lede-sm p, .crl-svc-intro .crl-lede p{ color:var(--navy); } .crl .crl-btn.et_pb_button, .crl .crl-btn.et_pb_button:hover{ background-color:var(--red); background-image:none; color:#FBF8F1; border:0; border-radius:0; padding:14px 24px !important; font-size:14px; font-weight:600; letter-spacing:.56px; text-transform:uppercase; } .crl .crl-btn-ghost.et_pb_button, .crl .crl-btn-ghost.et_pb_button:hover{ background-color:transparent; color:var(--c2); border:1px solid #FFFFFF; } /* The arrow itself comes from Divi's native button_icon — never re-declare `content`, two :after rules render two glyphs. Only its POSITION needs correcting: Divi absolutely-positions the icon and reserves room with padding-right, which our fixed padding removed, so it spilled outside the button. Make it inline instead. */ .crl .crl-btn.et_pb_button:after{ position:static !important; margin-left:0 !important; opacity:1 !important; line-height:23px !important; } .crl-split .crl-btn-ghost.et_pb_button{ color:var(--navy); border-color:var(--navy); } /* Divi buttons. module_class lands on the , but the WRAPPER is display:block — two buttons stack instead of sitting side by side. :has() puts the wrapper inline. */ /* Divi scopes its button CSS through `#et-boc`, an ID — no class selector of ours can outrank it, so a plain `line-height:23px` here lost silently to Divi's 1.7em (23.8px) on every button on all 23 pages. The source measures 21px; !important is the only thing that reaches it. */ .crl .crl-btn.et_pb_button{ line-height:21px !important; } /* Divi's icon sits tight against the label; the source leaves ~14px, which is 24px of button width across the pair */ .crl .crl-btn.et_pb_button:after{ margin-left:14px !important; font-size:20px !important; line-height:23px !important; } /* ========================================================================== MOTION — measured off the source, not invented. reveal : opacity 0->1 + translate/scale over .9s cubic-bezier(.22,1,.36,1) accent : the red italic phrases slide + skew in over .7s scanline: 1px red sweep down the hero, 6s ========================================================================== */ /* module_class emits a CLASS, so the reveal hooks are classes — which also means they stay editable in the Visual Builder like any other module class */ .crl .crl-rev, .crl.crl-rev{ opacity:0; will-change:opacity,transform; transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); } .crl .crl-rev-up, .crl.crl-rev-up{ transform:translateY(40px); } .crl .crl-rev-left, .crl.crl-rev-left{ transform:translateX(-40px); } .crl .crl-rev-right, .crl.crl-rev-right{ transform:translateX(40px); } .crl .crl-rev-zoom, .crl.crl-rev-zoom{ transform:scale(.94); } .crl .crl-rev.is-in, .crl.crl-rev.is-in{ opacity:1; transform:none; } .crl .crl-em{ transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .crl .crl-rev .crl-em{ opacity:0; transform:matrix(1,0,-0.140541,1,-28.8,0); } .crl .crl-rev.is-in .crl-em{ opacity:1; transform:none; } @keyframes crl-fade-up{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } } .crl .crl-fade-up{ animation:crl-fade-up .8s ease-out both; } .crl .crl-fade-up-2{ animation:crl-fade-up .9s ease-out .12s both; } .crl .crl-fade-up-3{ animation:crl-fade-up .9s ease-out .24s both; } .crl .crl-fade-up-4{ animation:crl-fade-up .9s ease-out .36s both; } @keyframes crl-scanline{ 0%{ transform:translateY(0); opacity:0; } 8%{ opacity:.55; } 92%{ opacity:.55; } 100%{ transform:translateY(920px); opacity:0; } } .crl-hero .crl-scan{ position:absolute; inset-inline:0; top:0; height:1px; z-index:1; pointer-events:none; background:linear-gradient(to right,transparent,rgba(208,44,42,.6),transparent); animation:crl-scanline 6s ease-in-out infinite; } /* Service-panel photo settles from scale 1.08 -> 1 over 1.4s, matching the source's `scale-110 transition-transform duration-[1400ms]`. The section background is the photo, so the scale is done with background-size. For every one of these images `100% auto` IS the cover size (all are taller-than-box once width-fitted), so the end state is pixel-identical to `cover`. */ .crl-panel{ background-size:108% auto !important; transition:background-size 1.4s cubic-bezier(0,0,.2,1), opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1) !important; } .crl-panel.is-in{ background-size:100% auto !important; } @media (prefers-reduced-motion:reduce){ .crl .crl-rev, .crl.crl-rev{ opacity:1 !important; transform:none !important; transition:none !important; } .crl .crl-rev .crl-em{ opacity:1 !important; transform:none !important; } .crl .crl-fade-up, .crl .crl-fade-up-2, .crl .crl-fade-up-3, .crl .crl-fade-up-4{ animation:none; } .crl-hero .crl-scan{ animation:none; opacity:0; } } .crl .et_pb_button_module_wrapper:has(.crl-btn-inline){ display:inline-block; margin-right:16px; vertical-align:top; } .crl .et_pb_button_module_wrapper:has(.crl-btn-inline):last-of-type{ margin-right:0; } /* measured at 390: the source's button row is `flex-wrap:wrap` with a 16px gap, so the pair STACKS at its natural width. Side by side on a 390 screen squeezed "Request a Quote" onto two lines and pushed the ghost button off the edge. */ @media (max-width:980px){ .crl .et_pb_button_module_wrapper:has(.crl-btn-inline){ display:block; margin-right:0; margin-bottom:16px; } .crl .et_pb_button_module_wrapper:has(.crl-btn-inline):last-of-type{ margin-bottom:0; } .crl .crl-btn-inline.et_pb_button{ display:inline-flex; } } /* Grid helper: turn a Divi row into a real CSS grid (Divi 4 columns cannot express 176px|1fr|auto, 7/5 at a 64px gap, or 478/268/162/162). Divi's .et_pb_row clearfix ::before/::after become GRID ITEMS and silently add a whole extra row — every gridded row must kill them. */ .crl .et_pb_row{ margin-top:0 !important; margin-bottom:0 !important; } .crl .crl-grid::before, .crl .crl-grid::after{ display:none !important; } .crl .crl-grid > .et_pb_column{ width:auto !important; float:none !important; margin:0 !important; } /* the webfont module renders nothing */ .crl .crl-fonts{ display:none !important; } /* ---- 1. header ----------------------------------------------------------- */ /* Sticky is deliberate and confirmed with the client (2026-08-12): "static" meant always visible, not un-pinned. The whole strip travels, so the phone number and the quote CTA are reachable from anywhere on the page. --crl-hdr-h is the strip's real height and is the only place it is written down — the mobile panel measures its own max-height from it. The stickiness itself is DIVI'S OWN `sticky_position="top"` on the section, not CSS here. This used to say `position:sticky !important` and it never once worked: in a Theme Builder header the layout's wrapper (.et_builder_inner_content) is exactly as tall as the header, and a sticky element can only stick INSIDE its parent's box — so it had zero distance to travel and left with the page at every viewport. Nothing errored; `getComputedStyle` cheerfully reported "sticky" the whole time. Divi's native option positions against the window instead, survives the wrapper, AND shows up as a real toggle in the Visual Builder, so the client can change it without touching code. Do not re-add a `position` here — an !important would override the fixed positioning Divi applies while stuck and silently break it again. `position:relative` is the un-stuck base only, so the mobile panel has something to anchor to; Divi overrides it when the header pins. */ .crl-header{ --crl-hdr-h:118px; position:relative; z-index:500; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid rgba(227,221,211,.6); } /* ---- utility strip: phone, email, quote CTA -------------------------------- */ /* The CTA moving OUT of the main row is what pays for the ninth nav item — the main row is now two columns, not three, so the nav gets every pixel between the logo and the right edge. .crl-util is capped at 1216 (1280 row minus its 32px padding either side) so its right edge lands exactly on the nav's, not 64px outside it. */ .crl-header .crl-util-row.et_pb_row{ background:var(--navy); width:100% !important; max-width:none !important; } .crl-header .crl-util{ display:flex; align-items:center; justify-content:flex-end; gap:20px; height:37px; max-width:1216px; margin:0 auto; } .crl-header .crl-util p{ display:contents; } /* wpautop makes each anchor its own paragraph */ .crl-header .crl-util-l{ display:flex; align-items:center; gap:7px; text-decoration:none; font-size:13px; line-height:18px; color:rgba(250,246,238,.92); white-space:nowrap; } .crl-header .crl-util-l:hover{ color:#FFF; } .crl-header .crl-util-ic{ flex:0 0 13px; opacity:.75; } .crl-header .crl-util-sep{ width:1px; height:14px; flex:0 0 1px; background:rgba(250,246,238,.22); } .crl-header .crl-util-cta{ display:flex; align-items:center; gap:7px; text-decoration:none; background:var(--red); color:#FBF8F1; font-size:11.5px; font-weight:600; letter-spacing:.48px; text-transform:uppercase; line-height:18px; padding:7px 14px; white-space:nowrap; } .crl-header .crl-util-cta:hover{ color:#FBF8F1; opacity:.92; } .crl-header .crl-util-cta svg{ flex:0 0 14px; } .crl-header .crl-hdr-row{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:24px; height:80px; } .crl-header .crl-logo{ margin:0; } /* The animated logo, measured off the source: a 150x44 stage clipping a truck that drives across on a 7s loop and WIPES the wordmark into view behind it. `overflow:hidden` on the stage is what makes the truck enter and leave rather than float over the nav. The stage is 150 at EVERY width — it was built at 220, and those extra 70px are dead space the truck visibly drives through beside a 118.8px wordmark. Measure the box, not the art. */ .crl-header .crl-logo-stage{ display:block; position:relative; width:150px; height:44px; overflow:hidden; } .crl-header .crl-logo-reveal{ position:absolute; inset:0; display:flex; align-items:center; z-index:1; clip-path:inset(0 100% 0 0); animation:crl-logo-reveal 7s linear infinite; } .crl-header .crl-logo-reveal img{ width:118.8px; height:36px; object-fit:contain; display:block; } .crl-header .crl-logo-truck{ position:absolute; top:50%; left:0; height:26px; width:auto; z-index:2; pointer-events:none; transform:translate(-100%,-50%); filter:drop-shadow(0 1px 1px rgba(0,0,0,.15)); animation:crl-logo-truck 7s linear infinite; } @keyframes crl-logo-truck{ 0%{ left:0%; } 50%{ left:200%; } 100%{ left:200%; } } @keyframes crl-logo-reveal{ 0%,8%{ clip-path:inset(0 100% 0 0); } 45%,100%{ clip-path:inset(0); } } /* a looping animation behind a wordmark is exactly what reduced-motion is for */ @media (prefers-reduced-motion:reduce){ .crl-header .crl-logo-reveal{ animation:none; clip-path:none; } .crl-header .crl-logo-truck{ display:none; } } /* The nav used to be centred because the CTA held down a third column. With the CTA moved to the utility strip the nav owns the space to the right edge, and leaving it centred puts a 140px hole between the last link and the edge that reads as a mistake. Two things had to be true, and only the second is obvious: 1. justify-self is a NO-OP here. .crl-navwrap is a block module inside the column, not the grid item itself — the column is. It stayed for the mobile burger's sake and does nothing on its own. 2. Divi shrink-wraps the text module and gives it auto side margins, so it was 787px wide and centred inside a 1018px column. Aligning the flex nav INSIDE that box just aligned it within the same 787px. The module has to fill the column first. */ .crl-header .crl-navwrap{ justify-self:end; width:100%; margin-left:0; margin-right:0; } .crl-header .crl-navwrap .et_pb_text_inner{ display:flex; align-items:center; justify-content:flex-end; } .crl-header .crl-nav{ display:flex; align-items:center; gap:12px; } .crl-header .crl-navitem{ position:relative; } .crl-header .crl-nav a{ display:inline-flex; align-items:center; gap:4px; font-size:12.5px; font-weight:500; line-height:18.75px; color:rgba(6,27,49,.8); white-space:nowrap; } .crl-header .crl-nav a:hover{ color:var(--red); } .crl-header .crl-nav a.crl-nav-on{ color:var(--red); } /* dropdowns — every value measured off the source's own panel, which is always in the DOM and only toggled visible, so it can be read without hovering. The 12px `padding-top` is deliberate: it bridges the gap between the trigger and the panel so the pointer never crosses dead space and the menu never flickers shut. */ .crl-header .crl-drop{ position:absolute; left:50%; top:100%; transform:translateX(-50%); width:224px; padding-top:12px; z-index:50; visibility:hidden; opacity:0; transition:opacity .16s ease, visibility .16s ease; } .crl-header .crl-navitem:hover > .crl-drop, .crl-header .crl-navitem:focus-within > .crl-drop{ visibility:visible; opacity:1; } .crl-header .crl-drop-in{ background:#FBF8F2; border:1px solid var(--line); padding:8px; box-shadow:0 18px 40px rgba(6,28,49,.10); } .crl-header .crl-drop-in a{ display:block; font-size:13px; line-height:19.5px; font-weight:500; color:rgba(6,28,49,.8); padding:8px 12px; } .crl-header .crl-drop-in a:hover{ color:var(--red); background:rgba(239,231,217,.5); } /* one more level: Employment flies out sideways to the two job posts */ .crl-header .crl-drop-row{ position:relative; display:flex; align-items:center; } .crl-header .crl-drop-row > a{ flex:1; } .crl-header .crl-drop-more{ display:flex; padding-right:10px; transform:rotate(-90deg); opacity:.6; } /* The last three triggers sit at the right edge, so their panels anchor there instead of centring — a centred one hangs off the page. Direct child only: the flyout nested inside keeps its own positioning. */ .crl-header .crl-navitem-end > .crl-drop{ left:auto; right:0; transform:none; } /* Opens LEFT, not right. About sits near the right edge now that the nav is right-aligned, so a flyout at left:100% hangs 63px off the page and gives the whole document a horizontal scrollbar at 1280 — a bug you only see at exactly the container width, with a submenu open. There is always room on the left; there is not always room on the right. */ .crl-header .crl-drop-fly{ right:100%; left:auto; top:0; transform:none; width:256px; padding:0 8px 0 0; } .crl-header .crl-drop-row:hover > .crl-drop-fly, .crl-header .crl-drop-row:focus-within > .crl-drop-fly{ visibility:visible; opacity:1; } .crl-header .crl-chev{ opacity:.6; transition:transform .16s ease; } /* the source flips the chevron while its panel is open */ .crl-header .crl-navitem:hover > a .crl-chev, .crl-header .crl-navitem:focus-within > a .crl-chev{ transform:rotate(180deg); } .crl-header .crl-btn .et_pb_button{ padding:14px 24px !important; } /* ---- 2. hero ------------------------------------------------------------- */ .crl-hero{ position:relative; isolation:isolate; overflow:hidden; } /* The media row is the hero's only positioned ancestor chain. Divi's column/module wrappers are position:relative and collapse to 0 height around an absolutely-positioned child, which makes inset:0 resolve to nothing — force the whole chain static + full height. */ .crl-hero .crl-heromedia-row.et_pb_row{ position:absolute !important; inset:0; z-index:0; width:100% !important; max-width:none !important; padding:0 !important; margin:0 !important; } .crl-hero .crl-heromedia-row > .et_pb_column, .crl-hero .crl-heromedia-row .et_pb_code, .crl-hero .crl-heromedia-row .et_pb_code_inner{ position:static !important; width:100% !important; height:100% !important; margin:0 !important; padding:0 !important; } /* The dark ground is not cosmetic: a 25MB reel takes a beat to paint its first frame, and without it the hero opens as the navy-gradient overlay over nothing. */ .crl-hero-media{ position:absolute; inset:0; overflow:hidden; pointer-events:none; background:#040E1A; } /* Self-hosted mp4, so the fill is one line of object-fit. The YouTube embed this replaced needed 177.78vh/56.25vw cover math AND an override for FitVids, which wraps every iframe in .fluid-width-video-wrapper and pins it to 100%x100% with max-width:100%. FitVids does not touch