/*----------------------------------------*/ /* 1329 WIRE — DESIGN TOKENS */ /* Figma: TAMCO / 1329 Home (532-72224) */ /* Tamlite's layout and scale, set in */ /* Proxima Nova with a monochrome palette */ /* — the CTAs are black, not a brand hue. */ /*----------------------------------------*/ /* Proxima Nova is licensed, so it ships with the theme (themes/1329wire/fonts). The design uses three weights: Regular for text, Bold for the emphasised half of a heading, Black for the hero. */ @font-face { font-family: "Proxima Nova"; src: url("../../fonts/ProximaNova-Regular.woff2") format("woff2"), url("../../fonts/ProximaNova-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: url("../../fonts/ProximaNova-Bold.woff2") format("woff2"), url("../../fonts/ProximaNova-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Proxima Nova"; src: url("../../fonts/ProximaNova-Black.woff2") format("woff2"), url("../../fonts/ProximaNova-Black.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; } :root { /* Fonts */ --rd-ff: "Proxima Nova", "Helvetica Neue", Arial, sans-serif; --rd-ff-alt: "Proxima Nova", "Helvetica Neue", Arial, sans-serif; /* Palette — black on white, no brand colour */ --rd-dark: #000; --rd-accent: #000; --rd-accent-hover: #2A2A2A; --rd-white: #FFF; --rd-txt-on-dark: #FFF; --rd-txt-muted: rgba(255, 255, 255, .75); --rd-txt-faded: rgba(255, 255, 255, .6); --rd-glass: rgba(0, 0, 0, .2); --rd-glass-border: rgba(255, 255, 255, .1); /* Light surfaces (the blocks below the banner) */ --rd-surface: #F6F6F6; --rd-txt-on-light: #000; --rd-txt-on-light-muted: rgba(0, 0, 0, .75); --rd-line-on-light: rgba(0, 0, 0, .06); --rd-border-on-light: rgba(0, 0, 0, .2); /* Shape */ --rd-radius: 8px; --rd-radius-pill: 100px; /* Layout */ --rd-gutter: 30px; --rd-hdr-top-h: 40px; --rd-hdr-main-h: 78px; --rd-hdr-h: calc(var(--rd-hdr-top-h) + var(--rd-hdr-main-h)); --rd-control-h: 46px; /* Motion */ --rd-transition: .3s ease; } /* below 1200 the header is the 36px brand strip + the 72px bar (16px padding around the 40px burger) — sticky blocks pin themselves under both */ @media (max-width: 1199px) { :root { --rd-gutter: 20px; --rd-hdr-top-h: 36px; /* the swipeable brand strip */ --rd-hdr-main-h: 72px; } } @media (max-width: 767px) { :root { --rd-gutter: 15px; } } /* What sticky blocks pin under: the whole header, or just the bar while the phone brand strip is scrolled away (html.hdr-strip-hidden, header.js) */ :root { --rd-hdr-stick: var(--rd-hdr-h); } @media (max-width: 1199px) { html.hdr-strip-hidden { --rd-hdr-stick: var(--rd-hdr-main-h); } } /*----------------------------------------*/ /* LEGACY COMPAT */ /* Pages that are not redesigned yet pin */ /* sticky elements to these variables — */ /* keep them in sync with the new header. */ /*----------------------------------------*/ :root { --header-top: var(--rd-hdr-top-h); --header-bottom: var(--rd-hdr-main-h); /* Tamlite's legacy palette (main.css), still read by the older blocks — cookie bar, SumoSelect, checkboxes, uploads, blog pager, product-style.css */ --clr-light-blue: var(--rd-accent); --clr-dark-blue: var(--rd-dark); --clr-dark-blue-2: rgba(0, 0, 0, .7); /* legacy blocks (forms, popups, account tables) use the same face */ --ff-1: var(--rd-ff); } /*----------------------------------------*/ /* TYPEFACE FOR THE REDESIGNED BLOCKS */ /* Replaces main.css's `body *` rule, */ /* which outranked a plain `header`/ */ /* `footer` selector and forced Inter. */ /*----------------------------------------*/ header, header *, footer, footer * { font-family: var(--rd-ff); } /*----------------------------------------*/ /* SLIDER PAGINATION — never overflow */ /* The pill bullets have fixed widths per */ /* page; with many pages the row used to */ /* run past the slider. It now fits the */ /* space beside the arrows: the pills and */ /* gaps shrink together instead. */ /*----------------------------------------*/ html body .swiper-controls .swiper-pagination.swiper-pagination-bullets:not(.swiper-pagination-bullets-dynamic) { flex: 1 1 auto; min-width: 0; max-width: 100%; column-gap: clamp(4px, 1.1vw, 20px); overflow: hidden; } html body .swiper-controls .swiper-pagination.swiper-pagination-bullets:not(.swiper-pagination-bullets-dynamic) .swiper-pagination-bullet { flex-shrink: 1; min-width: 4px; } /*----------------------------------------*/ /* ICONS IN THE TEMPLATES */ /* Tamlite's templates print these s */ /* from the parent folder (THEME_URI), so */ /* the child's recoloured copies never load */ /* their own — swap the source here. */ /* (?v=8 skips the cached blue files.) */ /*----------------------------------------*/ img[src*="/themes/tamlite/img/icons/big-check.svg"] { content: url("../../img/icons/big-check.svg?v=8"); } img[src*="/themes/tamlite/img/icons/calendar-icon.svg"] { content: url("../../img/icons/calendar-icon.svg?v=8"); } img[src*="/themes/tamlite/img/icons/check-dark.svg"] { content: url("../../img/icons/check-dark.svg?v=8"); } img[src*="/themes/tamlite/img/icons/check-in-folder.svg"] { content: url("../../img/icons/check-in-folder.svg?v=8"); } img[src*="/themes/tamlite/img/icons/create_new_folder.svg"] { content: url("../../img/icons/create_new_folder.svg?v=8"); } img[src*="/themes/tamlite/img/icons/facebook-dark.svg"] { content: url("../../img/icons/facebook-dark.svg?v=8"); } img[src*="/themes/tamlite/img/icons/folder-add.svg"] { content: url("../../img/icons/folder-add.svg?v=8"); } img[src*="/themes/tamlite/img/icons/linkedIn-dark.svg"] { content: url("../../img/icons/linkedIn-dark.svg?v=8"); } img[src*="/themes/tamlite/img/icons/list-view-active.svg"] { content: url("../../img/icons/list-view-active.svg?v=8"); } img[src*="/themes/tamlite/img/icons/mail-1.svg"] { content: url("../../img/icons/mail-1.svg?v=8"); } img[src*="/themes/tamlite/img/icons/map-view-active.svg"] { content: url("../../img/icons/map-view-active.svg?v=8"); } img[src*="/themes/tamlite/img/icons/search-dark.svg"] { content: url("../../img/icons/search-dark.svg?v=8"); } img[src*="/themes/tamlite/img/icons/twitter-dark.svg"] { content: url("../../img/icons/twitter-dark.svg?v=8"); } img[src*="/themes/tamlite/img/resources/ZIP.svg"] { content: url("../../img/resources/ZIP.svg?v=8"); } img[src*="/themes/tamlite/img/product/image.png"] { content: url("../../img/product/image.png?v=8"); } img[src*="/themes/tamlite/img/product/pdf.png"] { content: url("../../img/product/pdf.png?v=8"); } img[src*="/themes/tamlite/img/product/video.png"] { content: url("../../img/product/video.png?v=8"); } img[src*="/themes/tamlite/img/arrow.svg"] { content: url("../../img/arrow.svg?v=8"); } img[src*="/themes/tamlite/img/social-icon-1-change.svg"] { content: url("../../img/social-icon-1-change.svg?v=8"); } img[src*="/themes/tamlite/img/social-icon-2-change.svg"] { content: url("../../img/social-icon-2-change.svg?v=8"); } img[src*="/themes/tamlite/img/social-icon-3-change.svg"] { content: url("../../img/social-icon-3-change.svg?v=8"); } /* newsletter submit — the rule lives in the parent's root style.css */ .yikes-easy-mc-submit-button { background-image: url("../../img/icon-20.png?v=8"); } /*----------------------------------------*/ /* LEGACY HARD-CODED BLUES (parent files) */ /* root style.css and product-style.css */ /* load from the parent after this file, */ /* hence the extra `html`. */ /*----------------------------------------*/ html .popuploader div { border-left-color: var(--rd-accent); } html .prd__item--view { background-color: var(--clr-dark-blue-2); } /* SumoSelect placeholders: the parent paints every span.placeholder #4eb1cd with !important */ html span.placeholder { color: var(--rd-txt-on-light-muted) !important; } html .select2-dropdown .select2-results li { color: var(--rd-txt-on-light); } html .select2-dropdown .select2-results .select2-results__option--highlighted { background-color: var(--rd-accent); } html .features-entry .sa span::before, html .features-entry .sa span::after { color: var(--rd-accent); }