/* ============================================================ UPTEC BRASIL — Industry design system Derived from DESIGN.md / Uptec Brasil.dc.html Accent #0078B5 replaces the Industry default steel blue. Duotone intentionally omitted (client decision, DESIGN.md §2). ============================================================ */ :root{ /* Every token aliases a Global Styles preset, so editing a colour or font in Appearance -> Editor -> Styles drives the whole design. The literal after each comma is only a fallback if that preset is ever deleted. */ --uptec-accent: var(--wp--preset--color--uptec-accent, #0078B5); --uptec-accent-100: var(--wp--preset--color--uptec-accent-100, #e6f3fa); --uptec-accent-300: var(--wp--preset--color--uptec-accent-300, #92cbe8); --uptec-accent-600: var(--wp--preset--color--uptec-accent-600, #00699e); --uptec-accent-700: var(--wp--preset--color--uptec-accent-700, #005580); --uptec-accent-900: var(--wp--preset--color--uptec-accent-900, #002a41); --uptec-bg: var(--wp--preset--color--uptec-bg, #f2f2f3); --uptec-surface: var(--wp--preset--color--uptec-surface, #e9e9ea); --uptec-text: var(--wp--preset--color--uptec-text, #1d1f20); --uptec-muted: var(--wp--preset--color--uptec-muted, #5d5d60); --uptec-line: color-mix(in srgb, var(--uptec-text) 16%, transparent); --uptec-font-h: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", system-ui, sans-serif); --uptec-font-b: var(--wp--preset--font-family--barlow, Barlow, system-ui, sans-serif); --uptec-fs-kicker: var(--wp--preset--font-size--kicker, 12px); --uptec-fs-small: var(--wp--preset--font-size--small, 14px); --uptec-fs-card: var(--wp--preset--font-size--card, 15px); --uptec-fs-lead: var(--wp--preset--font-size--lead, 18px); --uptec-fs-stat: var(--wp--preset--font-size--stat, 46px); --uptec-container:1180px; --uptec-pad:24px; --uptec-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E"); --uptec-mark:var(--uptec-accent); /* Lucide phone + mail, used as CSS masks so they take their colour from a token like the blueprint corner marks do. */ --uptec-ico-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); --uptec-ico-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); } /* ---------- ground ---------- */ /* body colour, base font and the h1-h4 scale now come from Global Styles. */ .uptec-page :is(h1,h2,h3,h4,h5,h6){ margin:0; } /* Base size/line-height arrive by INHERITANCE from Global Styles. Never set them on `.uptec-page p` (0-1-1) — that outranks every role class at 0-1-0 and flattens the scale. */ .uptec-page p{ margin:0; } .uptec-page a{ color:var(--uptec-accent-700); text-decoration:none; } .uptec-page a:hover{ color:var(--uptec-accent); text-decoration:underline; } .uptec-page :focus-visible{ outline:2px solid var(--uptec-accent); outline-offset:2px; } .uptec-page figure{ margin:0; } /* ---------- vertical rhythm ---------- All intrinsic margins are zeroed above; one flow rule owns the rhythm, with tighter overrides for label→heading pairs and card interiors. */ .uptec-page .is-layout-flow > * + *{ margin-block-start:18px; } .uptec-page .uptec-kicker + *, .uptec-page .uptec-stat-label + *, .uptec-page .uptec-num + *, .uptec-page .card-kicker + *{ margin-block-start:10px; } .uptec-page .uptec-card.is-layout-flow > * + *{ margin-block-start:10px; } .uptec-page .uptec-cardstack.is-layout-flow > * + *{ margin-block-start:20px; } .uptec-page h1 + *,.uptec-page h2 + *{ margin-block-start:20px; } /* ---------- section rhythm ---------- */ .uptec-section{ padding-block:80px; } .uptec-section.is-tight{ padding-block:56px; } .uptec-wrap{ max-width:var(--uptec-container); margin-inline:auto; padding-inline:var(--uptec-pad); } .uptec-section + .uptec-section{ border-top:1px solid var(--uptec-line); } .uptec-section + .uptec-dark,.uptec-dark + .uptec-section{ border-top:0; } /* ---------- headings & labels ---------- */ .uptec-kicker{ font-family:var(--uptec-font-h); text-transform:uppercase; font-size:var(--uptec-fs-kicker); letter-spacing:0.16em; color:var(--uptec-accent-700); } /* h1-h4 sizes/line-heights: Global Styles (fluid presets h-1..h-4). */ .uptec-lead{ font-size:var(--uptec-fs-lead); line-height:1.6; color:var(--uptec-muted); } /* ---------- blueprint frame ---------- */ .uptec-page .blueprint{ position:relative; border:1px solid var(--uptec-line); border-radius:0; background:transparent; } .uptec-page .blueprint::after{ content:""; position:absolute; inset:-5px; pointer-events:none; z-index:2; background-color:var(--uptec-mark); -webkit-mask-image:var(--uptec-cross),var(--uptec-cross),var(--uptec-cross),var(--uptec-cross); mask-image:var(--uptec-cross),var(--uptec-cross),var(--uptec-cross),var(--uptec-cross); -webkit-mask-position:left top,right top,left bottom,right bottom; mask-position:left top,right top,left bottom,right bottom; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } .uptec-dark{ --uptec-mark:rgba(255,255,255,0.7); } .uptec-page figure.blueprint img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0; } .uptec-page .wp-block-image.blueprint{ margin:0; } .uptec-page .wp-block-image.blueprint img{ border-radius:0; } /* ---------- cards ---------- */ .uptec-card{ border:1px solid var(--uptec-line); padding:26px 24px 28px; position:relative; background:transparent; width:100%; } .uptec-card::after{ content:""; position:absolute; inset:-5px; pointer-events:none; background-color:var(--uptec-mark); -webkit-mask-image:var(--uptec-cross),var(--uptec-cross),var(--uptec-cross),var(--uptec-cross); mask-image:var(--uptec-cross),var(--uptec-cross),var(--uptec-cross),var(--uptec-cross); -webkit-mask-position:left top,right top,left bottom,right bottom; mask-position:left top,right top,left bottom,right bottom; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; } .uptec-card{ font-size:var(--uptec-fs-card); } .uptec-card p{ color:var(--uptec-muted); } .uptec-cards .wp-block-column{ display:flex; } .uptec-page .card-kicker{ font-family:var(--uptec-font-h); text-transform:uppercase; font-size:11px; letter-spacing:0.16em; color:var(--uptec-accent); } /* ---------- stat band ---------- */ .uptec-stats{ border-block:1px solid var(--uptec-line); } .uptec-stats .wp-block-column{ padding:34px 28px; } .uptec-stats .wp-block-column:first-child{ padding-left:0; } .uptec-stats .wp-block-column + .wp-block-column{ border-left:1px solid var(--uptec-line); } .uptec-stat-label{ font-family:var(--uptec-font-h); text-transform:uppercase; font-size:11px; letter-spacing:0.16em; color:var(--uptec-muted); } .uptec-stat-value{ font-family:var(--uptec-font-h); font-size:var(--uptec-fs-stat); line-height:1; font-weight:600; color:var(--uptec-accent-900); } .uptec-page .uptec-stats p:last-child{ font-size:var(--uptec-fs-small); color:var(--uptec-muted); } /* ---------- numbered blocks ---------- */ .uptec-num{ font-family:var(--uptec-font-h); font-size:13px; letter-spacing:0.16em; color:var(--uptec-accent); } .uptec-numbered .wp-block-column{ padding-top:22px; border-top:1px solid var(--uptec-line); } .uptec-grouphead{ display:flex; gap:18px; align-items:baseline; border-bottom:1px solid var(--uptec-line); padding-bottom:14px; margin-bottom:34px; } .uptec-page .uptec-grouphead > * + *{ margin-block-start:0; } /* ---------- buttons ---------- */ .uptec-page .wp-block-button__link{ font-family:var(--uptec-font-h); text-transform:uppercase; letter-spacing:0.12em; font-size:14px; font-weight:600; border-radius:0; padding:15px 30px; } .uptec-page .uptec-btn-primary .wp-block-button__link{ background:var(--uptec-accent); color:#fff; border:1px solid var(--uptec-accent); } .uptec-page .uptec-btn-primary .wp-block-button__link:hover{ background:var(--uptec-accent-600); border-color:var(--uptec-accent-600); color:#fff; } .uptec-page .uptec-btn-secondary .wp-block-button__link{ background:transparent; color:var(--uptec-text); border:1px solid var(--uptec-line); } .uptec-page .uptec-btn-secondary .wp-block-button__link:hover{ border-color:var(--uptec-accent); color:var(--uptec-accent); background:transparent; } .uptec-page .wp-block-buttons{ gap:14px; } /* ---------- hero ---------- */ .uptec-hero{ position:relative; overflow:hidden; padding-block:76px 84px; } .uptec-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(to right,rgba(0,120,181,0.10) 1px,transparent 1px), linear-gradient(to bottom,rgba(0,120,181,0.10) 1px,transparent 1px); background-size:56px 56px; -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 88%); mask-image:linear-gradient(to bottom,#000 0%,transparent 88%); } .uptec-hero > *{ position:relative; z-index:1; } .uptec-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--uptec-font-h); text-transform:uppercase; font-size:12px; letter-spacing:0.16em; color:var(--uptec-accent-700); } .uptec-eyebrow::before{ content:""; width:26px; height:1px; background:var(--uptec-accent); } /* ---------- dark field ---------- */ .uptec-dark{ background:var(--uptec-accent-900); color:#fff; } .uptec-dark h1,.uptec-dark h2,.uptec-dark h3,.uptec-dark h4{ color:#fff; } .uptec-dark p{ color:rgba(255,255,255,0.76); } .uptec-dark a{ color:#fff; } .uptec-dark .uptec-kicker{ color:var(--uptec-accent-300); } .uptec-page .uptec-dark .wp-block-button__link{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.5); } .uptec-page .uptec-dark .wp-block-button__link:hover{ background:#fff; color:var(--uptec-accent-900); border-color:#fff; } /* ---------- surface band ---------- */ .uptec-mvv{ background:var(--uptec-surface); } .uptec-mvv .wp-block-columns .wp-block-column{ padding:30px 26px; } .uptec-mvv .wp-block-columns .wp-block-column:first-child{ padding-left:0; } .uptec-mvv .wp-block-columns .wp-block-column + .wp-block-column{ border-left:1px solid var(--uptec-line); } /* ---------- data rows ---------- */ .uptec-datarow{ padding:13px 0; border-bottom:1px solid var(--uptec-line); } .uptec-page .uptec-datarow > :first-child{ font-family:var(--uptec-font-h); text-transform:uppercase; letter-spacing:0.14em; font-size:11px; color:var(--uptec-muted); } .uptec-page .uptec-datarow > :last-child{ font-weight:500; font-size:14px; text-align:right; } /* ---------- timeline ---------- */ .uptec-timeline .wp-block-column{ border-top:2px solid var(--uptec-accent); padding-top:20px; } .uptec-year{ font-family:var(--uptec-font-h); font-size:34px; font-weight:600; line-height:1; color:var(--uptec-accent-900); } /* ---------- contact ---------- */ .uptec-contact-big{ font-family:var(--uptec-font-h); font-size:clamp(26px,3.4vw,38px); line-height:1.1; } .uptec-page .uptec-contact-big a{ color:var(--uptec-accent-900); text-decoration:none; } .uptec-page .uptec-contact-big a:hover{ color:var(--uptec-accent); text-decoration:none; } /* ---------- map ---------- */ .uptec-map{ display:block; } .uptec-map iframe{ display:block; width:100%; height:380px; border:0; filter:grayscale(1); } /* ---------- reserved spaces (map / form, to be filled manually) ---------- */ .uptec-placeholder{ min-height:380px; display:flex; align-items:center; justify-content:center; background:var(--uptec-surface); } .uptec-placeholder.is-form{ min-height:300px; } .uptec-page .uptec-placeholder p{ color:var(--uptec-muted); font-family:var(--uptec-font-h); text-transform:uppercase; letter-spacing:0.16em; font-size:12px; } /* ---------- video placeholder ---------- */ .uptec-video{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:var(--uptec-surface); } .uptec-page .uptec-video p{ color:var(--uptec-muted); font-family:var(--uptec-font-h); text-transform:uppercase; letter-spacing:0.16em; font-size:12px; } .uptec-video iframe{ width:100%; height:100%; border:0; } /* ---------- form ---------- */ .uptec-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; } .uptec-form-grid .is-full{ grid-column:1 / -1; } .uptec-form label{ display:block; font-family:var(--uptec-font-h); text-transform:uppercase; font-size:11px; letter-spacing:0.16em; color:var(--uptec-muted); margin-bottom:7px; } .uptec-form input,.uptec-form select,.uptec-form textarea{ width:100%; padding:12px 14px; border:1px solid var(--uptec-line); border-radius:0; background:#fff; font-family:var(--uptec-font-b); font-size:15px; color:var(--uptec-text); box-sizing:border-box; } .uptec-form input:focus,.uptec-form select:focus,.uptec-form textarea:focus{ outline:2px solid var(--uptec-accent); outline-offset:1px; border-color:var(--uptec-accent); } .uptec-form-foot{ display:flex; align-items:center; gap:22px; margin-top:26px; flex-wrap:wrap; } .uptec-form-foot span{ font-size:14px; color:var(--uptec-muted); } .uptec-form button{ font-family:var(--uptec-font-h); text-transform:uppercase; letter-spacing:0.12em; font-size:14px; font-weight:600; background:var(--uptec-accent); color:#fff; border:1px solid var(--uptec-accent); border-radius:0; padding:15px 30px; cursor:pointer; } .uptec-form button:hover{ background:var(--uptec-accent-600); border-color:var(--uptec-accent-600); } /* ---------- responsive ---------- */ @media (max-width:900px){ .uptec-section{ padding-block:56px; } .uptec-section.is-tight{ padding-block:44px; } .uptec-hero{ padding-block:48px 56px; } .uptec-stats .wp-block-column, .uptec-mvv .wp-block-columns .wp-block-column{ padding-inline:0; } .uptec-stats .wp-block-column + .wp-block-column, .uptec-mvv .wp-block-columns .wp-block-column + .wp-block-column{ border-left:0; border-top:1px solid var(--uptec-line); } } @media (max-width:781px){ .uptec-page h1{ font-size:38px; } .uptec-card{ padding:22px 20px 24px; } .uptec-form-grid{ grid-template-columns:1fr; } .uptec-page .uptec-datarow > :last-child{ text-align:left; } .uptec-map iframe{ height:280px; } .uptec-grouphead{ margin-bottom:26px; } } /* ============================================================ HEADER / NAV / FOOTER (template parts) ============================================================ */ /* ---------- topbar ---------- */ .uptec-topbar{ background:var(--uptec-accent-900); color:#fff; } .uptec-topbar-inner{ min-height:38px; align-items:center; gap:24px; } .uptec-topbar{ font-size:13px; } .uptec-topbar p{ margin:0; } .uptec-topbar-claim{ font-family:var(--uptec-font-h); text-transform:uppercase; letter-spacing:0.1em; font-size:13px; color:rgba(255,255,255,0.72); } .uptec-topbar a{ color:#fff; text-decoration:none; } .uptec-topbar a:hover{ color:#fff; text-decoration:underline; } .uptec-topbar-links{ gap:20px; align-items:center; } /* ---------- header ---------- */ .uptec-header{ background:var(--uptec-bg); border-bottom:1px solid var(--uptec-line); } .uptec-header-inner{ align-items:center; padding-block:18px; gap:32px; } /* brand lockup: logo mark | hairline | tagline. The mark already carries the UPTEC wordmark, so the header text is the descriptor only - no duplicated wordmark. `align-self:stretch` makes the divider run the full height of the mark instead of just the text line. */ .uptec-brand{ gap:0; align-items:center; } .uptec-brand p{ margin:0; } .uptec-logo{ margin:0; flex:0 0 auto; line-height:0; } .uptec-logo img{ display:block; width:54px; height:auto; border-radius:0; } .uptec-brand-text{ align-self:stretch; display:flex; align-items:center; margin-left:18px; padding-left:18px; border-left:1px solid var(--uptec-line); } .uptec-brand-tag{ font-family:var(--uptec-font-b); font-size:15px; line-height:1.35; color:var(--uptec-text); letter-spacing:0.01em; white-space:nowrap; } /* ---------- nav ---------- Matches the canvas: 17px / 0.06em, padding 10px 14px, 4px gap between items, hover -> accent, active page -> 2px accent underline inset 14px. WordPress ships `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}` at 0-3-0. Anything at 0-2-1 LOSES to it (classes are compared before elements), which is why every colour rule here is prefixed with `.uptec-header`. */ .uptec-nav .wp-block-navigation__container{ gap:4px; align-items:center; } .uptec-header .uptec-nav a{ font-family:var(--uptec-font-h); text-transform:uppercase; letter-spacing:0.06em; font-size:17px; font-weight:600; color:var(--uptec-text); text-decoration:none; padding:10px 14px; position:relative; display:block; } .uptec-header .uptec-nav a:hover{ color:var(--uptec-accent); text-decoration:none; } /* active page — accent underline, text stays dark (as drawn in the canvas) */ .uptec-header .uptec-nav .wp-block-navigation-item.current-menu-item:not(.uptec-nav-cta) > a::after, .uptec-header .uptec-nav .wp-block-navigation-item.current_page_item:not(.uptec-nav-cta) > a::after{ content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; background:var(--uptec-accent); } .uptec-header .uptec-nav .uptec-nav-cta a{ background:var(--uptec-accent); color:#fff; margin-left:14px; padding:13px 26px; border:1px solid var(--uptec-accent); font-size:16px; letter-spacing:0.06em; } .uptec-header .uptec-nav .uptec-nav-cta a:hover{ background:var(--uptec-accent-600); border-color:var(--uptec-accent-600); color:#fff; } /* ---------- mobile overlay menu ---------- */ /* WP paints the open overlay white via `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(...)` at 0-5-0. Matching that shape + a tag takes this to 0-5-1 so the design ground wins. */ .uptec-header nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open{ background:var(--uptec-bg); } .uptec-header .wp-block-navigation__responsive-container.is-menu-open{ padding:22px 24px; } /* Uptec mark, top-left. Root-relative so it survives a domain move. */ .uptec-header .wp-block-navigation__responsive-container.is-menu-open::before{ content:""; position:absolute; top:22px; left:24px; width:56px; height:56px; background:url("/wp-content/themes/uptec-brasil-child/assets/img/uptec-logo.png") no-repeat center/contain; } .uptec-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{ padding-top:58px; } .uptec-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{ gap:4px; align-items:flex-end; } .uptec-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a{ font-family:var(--uptec-font-h); text-transform:uppercase; letter-spacing:0.12em; font-size:22px; font-weight:600; color:var(--uptec-text); padding:12px 2px; display:block; } .uptec-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover{ color:var(--uptec-accent); } .uptec-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item a{ color:var(--uptec-accent); } /* the CTA keeps its solid-button treatment inside the overlay */ .uptec-header .wp-block-navigation__responsive-container.is-menu-open .uptec-nav-cta{ margin-top:18px; } .uptec-header .wp-block-navigation__responsive-container.is-menu-open .uptec-nav-cta a{ background:var(--uptec-accent); color:#fff; border:1px solid var(--uptec-accent); padding:14px 30px; } .uptec-header .wp-block-navigation__responsive-container.is-menu-open .uptec-nav-cta a:hover{ background:var(--uptec-accent-600); border-color:var(--uptec-accent-600); color:#fff; } /* WP focuses the first item when the overlay opens - keep the ring, brand it */ .uptec-header .wp-block-navigation__responsive-container.is-menu-open :focus-visible{ outline:2px solid var(--uptec-accent); outline-offset:3px; } .uptec-header .wp-block-navigation__responsive-container-close{ color:var(--uptec-text); } .uptec-header .wp-block-navigation__responsive-container-close:hover{ color:var(--uptec-accent); } /* ---------- footer ---------- */ /* Twenty Twenty-Five's flow block-gap puts 19.2px between
and