/* ============================================================ Wykes Design: sitewide CSS for roddywykes.com (Cargo) Paste into Cargo: Design tab > Edit CSS, replacing everything. ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap"); :root{ --wd-ground:#0F1418; /* near-black background */ --wd-plate:#151B20; /* raised panels */ --wd-ivory:#F2F1EC; /* main text */ --wd-muted:#A3ACB0; /* secondary text */ --wd-rule:#2A3339; /* lines */ --wd-y:#3D6FA8; /* Y blue */ --wd-x:#C8F542; /* Acid lime: logo, links and accents */ --wd-display:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif; --wd-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; } /* ---------- ground ---------- */ html, body, .page, .backdrop, bodycopy{ background-color:var(--wd-ground) !important; color:var(--wd-ivory); } /* Cargo's old home icon: replaced by the logo and nav */ a.custom_icon{ display:none !important; } /* ---------- type ---------- */ body, bodycopy{ font-family:var(--wd-display) !important; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; } bodycopy h1, bodycopy h2, bodycopy h3{ font-family:var(--wd-display) !important; font-weight:600 !important; letter-spacing:-0.01em; color:var(--wd-ivory) !important; text-wrap:balance; margin:0; } bodycopy h1{ font-size:clamp(30px,3.4vw,44px) !important; line-height:1.08; } bodycopy h1 b{ font-weight:600 !important; } bodycopy h2{ font-size:clamp(22px,2.4vw,30px) !important; line-height:1.15; } /* Body copy on this site is set in : keep it readable, sentence case */ bodycopy small{ font-family:var(--wd-display) !important; font-size:15.5px !important; line-height:1.65 !important; letter-spacing:0 !important; text-transform:none !important; color:var(--wd-muted) !important; } bodycopy small b{ color:var(--wd-ivory); font-weight:600; } /* captions under images and video */ .caption, figcaption{ font-family:var(--wd-mono) !important; font-size:11.5px !important; letter-spacing:0.08em; text-transform:uppercase; color:var(--wd-muted) !important; } /* ---------- links ---------- */ a, a:visited{ color:var(--wd-x); text-decoration:none; } a:hover{ color:var(--wd-ivory); } /* Links in page copy (case studies, articles, project links): mint with a fine underline. !important beats the per-page link colours set in Cargo's Design panel. */ bodycopy small a, bodycopy small a:visited, bodycopy p a, bodycopy p a:visited{ color:var(--wd-x) !important; border-bottom:1px solid rgba(200,245,66,.4) !important; } bodycopy small a:hover, bodycopy p a:hover{ color:var(--wd-ivory) !important; border-bottom-color:var(--wd-ivory) !important; } hr{ border:0; border-top:1px solid var(--wd-rule); } ::selection{ background:var(--wd-y); color:var(--wd-ivory); } /* ---------- enlarged images: solid ground behind them ---------- */ .pswp__bg, .quick-view-background{ background:var(--wd-ground) !important; opacity:0.97 !important; } .pswp__caption, .quick-view-caption{ color:var(--wd-muted) !important; } /* ---------- page padding (all pages) ---------- */ bodycopy.content_padding{ padding:36px clamp(20px,3vw,40px) 56px !important; box-sizing:border-box; } bodycopy img{ max-width:100%; height:auto; } /* ---------- navigation ---------- */ /* The nav links are empty in the page HTML; their labels come from aria-label */ .wykes-nav{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px 28px; padding:0 0 20px; margin-bottom:8px; background:var(--wd-x); /* the top bar: solid acid lime, dark logo and links */ border-bottom:0; } .wykes-nav a, .wykes-nav a:visited{ font-family:var(--wd-mono); font-size:12px; line-height:1.4; letter-spacing:0.12em; text-transform:uppercase; color:var(--wd-ground) !important; border:0 !important; opacity:.75; white-space:nowrap; } .wykes-nav a::after{ content:attr(aria-label); } .wykes-nav a:hover{ color:var(--wd-ground) !important; opacity:1; } .wykes-nav a.active, .wykes-nav a.active:visited{ color:var(--wd-ground) !important; opacity:1; } .wykes-nav a.active:not(.nav-home)::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:10px; background:var(--wd-ground); transform:rotate(45deg) translateY(-2px); } /* Every page: the nav bar runs the full width of the window, even on pages whose content column is narrow (e.g. Brand Creative) */ body:not(.homepage) .wykes-nav{ width:100vw; box-sizing:border-box; margin-left:calc(-1 * clamp(20px,3vw,40px)); padding-left:clamp(20px,3vw,40px); padding-right:clamp(20px,3vw,40px); /* sits flush with the top of the window: cancels the page's 36px top padding */ margin-top:-36px; padding-top:18px; padding-bottom:18px; margin-bottom:28px; } /* Logo + wordmark at the start of the nav row, links to the right (every page). The logo is the nav's Home link, drawn dark on the lime bar (the YX is cut out, so the lime shows through) */ .wykes-nav a.nav-home, .wykes-nav a.nav-home:visited{ display:block; flex:none; font-size:0; line-height:0; margin-right:auto; width:113px; height:44px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 513.04 200'%3E%3Cpath fill='%230F1418' fill-rule='evenodd' d='M-100 0 A100 100 0 1 0 100 0 A100 100 0 1 0 -100 0 Z M-56.20 -60.04 L-35.41 -60.04 L-17.54 -36.64 L0.33 -60.04 L21.12 -60.04 L-35.41 13.97 L-56.20 13.97 L-27.93 -23.04 Z M-15.31 -6.50 L5.48 -6.50 L20.25 12.84 L35.02 -6.50 L55.81 -6.50 L30.64 26.45 L55.81 59.40 L35.02 59.40 L20.25 40.06 L5.48 59.40 L-15.31 59.40 L9.86 26.45 Z'/%3E%3Cg transform='translate(135.00 -69.92)' fill='%230F1418'%3E%3Cpath d='M12.896484375 45.107421875H19.314453125L27.185546875 16.044921875C28.033203125 12.9267578125 28.7294921875 9.7783203125 29.3955078125 6.66015625C30.0615234375 9.7783203125 30.7880859375 12.9267578125 31.6357421875 16.044921875L39.537109375 45.107421875H45.89453125L58.24609375 0.0H52.67578125L45.41015625 28.154296875C44.44140625 31.9384765625 43.5029296875 35.72265625 42.7158203125 39.5068359375C41.8984375 35.72265625 40.9599609375 31.9384765625 39.9609375 28.154296875L32.57421875 0.0H26.27734375L18.830078125 28.154296875C17.8310546875 31.9990234375 16.892578125 35.84375 16.10546875 39.6884765625C15.2880859375 35.84375 14.41015625 31.9990234375 13.4111328125 28.154296875L6.115234375 0.0H0.60546875Z'/%3E%3Cpath d='M88.446875 45.107421875H93.89609375V26.51953125L110.4859375 0.0H104.2193359375L95.1978515625 14.591796875C93.835546875 16.83203125 92.503515625 19.072265625 91.2017578125 21.2822265625C89.9 19.072265625 88.5982421875 16.83203125 87.2056640625 14.591796875L78.15390625 0.0H71.85703125L88.446875 26.51953125Z'/%3E%3Cpath d='M127.97187500000001 45.107421875H133.42109375V30.333984375L139.9904296875 23.25L155.6115234375 45.107421875H162.059765625L143.7443359375 19.5263671875L162.059765625 0.0H154.8546875L141.17109375 14.712890625C138.5373046875 17.55859375 135.9640625 20.3134765625 133.42109375 23.12890625V0.0H127.97187500000001Z'/%3E%3Cpath d='M179.69707031250002 45.107421875H209.03203125000002V40.263671875H185.14628906250002V24.4306640625H207.27617187500002V19.5869140625H185.14628906250002V4.84375H209.03203125000002V0.0H179.69707031250002Z'/%3E%3Cpath d='M242.92617187500002 45.833984375C252.73476562500002 45.833984375 259.273828125 40.5361328125 259.273828125 32.6953125C259.273828125 26.3984375 255.15664062500002 22.5234375 246.37734375000002 20.34375L241.26113281250002 19.072265625C234.72207031250002 17.4375 232.20937500000002 15.4091796875 232.20937500000002 11.8974609375C232.20937500000002 7.4169921875 236.35683593750002 4.2685546875 242.19960937500002 4.2685546875C248.31484375000002 4.2685546875 252.28066406250002 7.689453125 252.61367187500002 13.3203125H258.00234375C257.76015625 4.662109375 251.76601562500002 -0.7265625 242.38125000000002 -0.7265625C232.96621093750002 -0.7265625 226.82070312500002 4.3896484375 226.82070312500002 12.169921875C226.82070312500002 18.3154296875 230.63515625000002 21.8876953125 239.83828125000002 24.158203125L244.89394531250002 25.3994140625C251.40273437500002 27.00390625 253.82460937500002 29.18359375 253.82460937500002 32.9375C253.82460937500002 37.78125 249.49550781250002 40.869140625 242.92617187500002 40.869140625C235.69082031250002 40.869140625 231.48281250000002 37.0244140625 231.48281250000002 30.576171875H225.91250000000002C225.91250000000002 39.9609375 232.51210937500002 45.833984375 242.92617187500002 45.833984375Z'/%3E%3C/g%3E%3Cg transform='translate(135.00 24.81)' fill='%230F1418'%3E%3Cpath d='M18.40625 45.107421875C32.150390625 45.107421875 40.021484375 36.5703125 40.021484375 22.462890625C40.021484375 8.4765625 32.150390625 0.0 19.01171875 0.0H4.48046875V45.107421875ZM9.9296875 40.263671875V4.84375H18.6484375C29.244140625 4.84375 34.572265625 11.564453125 34.572265625 22.462890625C34.572265625 33.482421875 29.244140625 40.263671875 18.04296875 40.263671875Z'/%3E%3Cpath d='M59.6265625 45.107421875H88.9615234375V40.263671875H65.07578125V24.4306640625H87.2056640625V19.5869140625H65.07578125V4.84375H88.9615234375V0.0H59.6265625Z'/%3E%3Cpath d='M122.8556640625 45.833984375C132.6642578125 45.833984375 139.2033203125 40.5361328125 139.2033203125 32.6953125C139.2033203125 26.3984375 135.0861328125 22.5234375 126.3068359375 20.34375L121.190625 19.072265625C114.6515625 17.4375 112.1388671875 15.4091796875 112.1388671875 11.8974609375C112.1388671875 7.4169921875 116.286328125 4.2685546875 122.1291015625 4.2685546875C128.2443359375 4.2685546875 132.21015625 7.689453125 132.5431640625 13.3203125H137.9318359375C137.6896484375 4.662109375 131.6955078125 -0.7265625 122.3107421875 -0.7265625C112.895703125 -0.7265625 106.7501953125 4.3896484375 106.7501953125 12.169921875C106.7501953125 18.3154296875 110.5646484375 21.8876953125 119.7677734375 24.158203125L124.8234375 25.3994140625C131.3322265625 27.00390625 133.7541015625 29.18359375 133.7541015625 32.9375C133.7541015625 37.78125 129.425 40.869140625 122.8556640625 40.869140625C115.6203125 40.869140625 111.4123046875 37.0244140625 111.4123046875 30.576171875H105.8419921875C105.8419921875 39.9609375 112.4416015625 45.833984375 122.8556640625 45.833984375Z'/%3E%3Cpath d='M163.8943359375 0.0H158.4451171875V45.107421875H163.8943359375Z'/%3E%3Cpath d='M204.115625 45.833984375C214.8626953125 45.833984375 223.1576171875 37.962890625 223.1576171875 27.427734375V22.5537109375H205.9623046875V27.3974609375H217.7689453125C217.7083984375 35.3291015625 211.6234375 40.748046875 204.115625 40.748046875C195.094140625 40.748046875 188.9486328125 33.30078125 188.9486328125 22.583984375C188.9486328125 11.806640625 195.094140625 4.359375 204.115625 4.359375C210.7455078125 4.359375 215.9828125 8.537109375 217.375390625 14.591796875H222.88515625C221.3109375 5.5703125 213.68203125 -0.7265625 204.115625 -0.7265625C192.0970703125 -0.7265625 183.4994140625 8.9306640625 183.4994140625 22.583984375C183.4994140625 36.146484375 192.12734375 45.833984375 204.115625 45.833984375Z'/%3E%3Cpath d='M242.9443359375 45.107421875H248.3935546875V18.951171875C248.3935546875 16.953125 248.3330078125 13.078125 248.12109375 7.4775390625C251.3603515625 12.896484375 253.9033203125 17.07421875 255.14453125 19.01171875L271.673828125 45.107421875H278.0009765625V0.0H272.5517578125V29.123046875C272.5517578125 30.63671875 272.642578125 34.5419921875 272.7333984375 37.6904296875C270.9169921875 34.4814453125 268.8583984375 31.060546875 267.798828125 29.365234375L249.2109375 0.0H242.9443359375Z'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat; } .wykes-nav a.nav-home::after, .wykes-nav a.nav-home::before, body.homepage .wykes-nav a.nav-home::before{ content:none !important; display:none !important; } .wykes-nav a.nav-home, .wykes-nav a.nav-home:visited{ opacity:1; } .wykes-nav a.nav-home:hover{ opacity:.8; } .wykes-nav a.nav-home:focus-visible{ outline:2px solid var(--wd-ground); outline-offset:4px; } /* Home page: lift the nav out of the left column so it runs across the top, in exactly the same position as on the other pages */ body.homepage .wykes-nav{ position:absolute; top:0; left:0; width:100vw; box-sizing:border-box; z-index:5; padding:18px clamp(20px,3vw,40px) 18px; margin:0; background:var(--wd-x); } body.homepage bodycopy.content_padding{ padding-top:120px !important; } /* The bar, logo included, is identical on every page */ /* ---------- home page left column ---------- */ /* Stacked lockup above the intro: mark on top, wordmark centred beneath it */ .wd-lockup, .wd-lockup:visited{ display:inline-flex; flex-direction:column; align-items:center; gap:16px; margin:8px 0; color:var(--wd-ivory) !important; border:0 !important; } .wd-lockup .wd-yx{ width:220px; height:auto; display:block; flex:none; } .wd-lockup .wd-wordmark{ display:none; } /* the wordmark is part of the outlined lockup artwork */ .wd-lockup .wd-wordmark{ font-size:13px; padding-left:.28em; } /* On the home page the logo links to the page you are already on, so make it a plain image: no hover, no pointer */ body.homepage .wd-lockup{ pointer-events:none; cursor:default; } .wd-wordmark{ font-family:var(--wd-display); font-weight:600; font-size:14px; letter-spacing:0.28em; text-transform:uppercase; } .wd-intro{ margin-top:32px; display:grid; gap:14px; } .wd-intro h1{ font-size:22px !important; line-height:1.25; margin:0 0 4px 0; letter-spacing:-0.005em; } .wd-intro p{ margin:0; font-family:var(--wd-display) !important; font-size:15px; line-height:1.6; color:var(--wd-muted); } .wd-intro p:first-of-type{ color:var(--wd-ivory); } /* Home page reel (the page's background video): fill the space beside the left column, centred vertically, with the same gap on the right as the page padding */ body.homepage .backdrop .video_wrapper_outer{ top:0 !important; left:0 !important; margin:0 !important; width:100% !important; height:100% !important; box-sizing:border-box !important; padding:0 clamp(20px,3vw,40px) 0 0 !important; display:flex !important; align-items:center !important; transform:none !important; } body.homepage .backdrop .video_wrapper_inner{ position:relative !important; top:0 !important; left:0 !important; margin:0 !important; width:100% !important; height:auto !important; transform:none !important; } body.homepage .backdrop .video_wrapper_inner video{ position:relative !important; top:0 !important; left:0 !important; margin:0 !important; width:100% !important; height:auto !important; display:block !important; transform:none !important; } /* Brand Film (page 38679488): the film is in the page HTML, so never show a page background video too */ body[data-page-id="38679488"] .backdrop{ display:none !important; } /* Sub-pages light up their parent section in the nav: Datum -> Industrial Design; Autodesk Gallery, Brand Creative, Brand Film, Booth Configurator -> Brand Experience */ body[data-page-id="38680875"] .wykes-nav a.nav-industrial-design, body[data-page-id="25431355"] .wykes-nav a.nav-brand-experience, body[data-page-id="37283101"] .wykes-nav a.nav-brand-experience, body[data-page-id="38679488"] .wykes-nav a.nav-brand-experience, body[data-page-id="38671568"] .wykes-nav a.nav-brand-experience{ opacity:1; } body[data-page-id="38680875"] .wykes-nav a.nav-industrial-design::before, body[data-page-id="25431355"] .wykes-nav a.nav-brand-experience::before, body[data-page-id="37283101"] .wykes-nav a.nav-brand-experience::before, body[data-page-id="38679488"] .wykes-nav a.nav-brand-experience::before, body[data-page-id="38671568"] .wykes-nav a.nav-brand-experience::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:10px; background:var(--wd-ground); transform:rotate(45deg) translateY(-2px); } /* ---------- phones ---------- */ @media (max-width:640px){ bodycopy.content_padding{ padding:24px 18px 40px !important; } .wykes-nav{ gap:8px 18px; } body:not(.homepage) .wykes-nav{ margin-left:-18px; padding-left:18px; padding-right:18px; margin-top:-24px; padding-top:16px; padding-bottom:16px; margin-bottom:24px; } /* Phones: logo on the left, the links stacked and right-aligned beside it */ .wykes-nav{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:7px; align-items:center; } .wykes-nav a.nav-home{ grid-row:1 / span 5; grid-column:1; align-self:start; flex:none; width:93px; height:36px; margin:0; background-size:auto 36px; } .wykes-nav a:not(.nav-home){ grid-column:2; justify-self:end; font-size:11px; line-height:1.3; } body.homepage .wykes-nav{ padding:16px 18px 16px; } /* Home page on phones: nav bar first, then the reel, then the intro */ body.homepage{ --wd-navh:132px; --wd-gap:24px; --wd-vidh:calc((100vw - 36px) * 0.5625); } body.homepage .wykes-nav{ top:calc(-1 * (var(--wd-navh) + var(--wd-gap) + var(--wd-vidh))); height:var(--wd-navh); align-content:flex-start; } body.homepage .backdrop{ height:var(--wd-vidh) !important; min-height:0 !important; margin-top:calc(var(--wd-navh) + var(--wd-gap)) !important; } body.homepage .backdrop .video_wrapper_outer{ padding:0 18px !important; } body.homepage bodycopy.content_padding{ padding-top:28px !important; } /* Brand Creative (page 37283101) has a background video. On phones: nav bar first, then the video, then the page, the same as the home page */ body[data-page-id="37283101"] .page_container{ --wd-navh:132px; --wd-gap:24px; --wd-vidh:calc((100vw - 36px) * 0.5625); } body[data-page-id="37283101"] .page_container .wykes-nav{ position:absolute !important; top:calc(-1 * (var(--wd-navh) + var(--wd-gap) + var(--wd-vidh))); left:0; width:100vw; height:var(--wd-navh); margin:0 !important; padding:16px 18px 16px !important; box-sizing:border-box; align-content:flex-start; } body[data-page-id="37283101"] .page_container .backdrop{ height:var(--wd-vidh) !important; min-height:0 !important; margin-top:calc(var(--wd-navh) + var(--wd-gap)) !important; } body[data-page-id="37283101"] .page_container .backdrop .video_wrapper_outer{ top:0 !important; left:0 !important; margin:0 !important; width:100% !important; height:100% !important; box-sizing:border-box !important; padding:0 18px !important; display:flex !important; align-items:center !important; transform:none !important; } body[data-page-id="37283101"] .page_container .backdrop .video_wrapper_inner{ position:relative !important; top:0 !important; left:0 !important; margin:0 !important; width:100% !important; height:auto !important; transform:none !important; } body[data-page-id="37283101"] .page_container .backdrop video{ position:relative !important; top:0 !important; left:0 !important; margin:0 !important; width:100% !important; height:auto !important; display:block !important; transform:none !important; } /* Brand Film on phones: nav bar, then the film, then the text */ body[data-page-id="38679488"] [grid-row]{ display:flex !important; flex-direction:column !important; } body[data-page-id="38679488"] [grid-col="8"]{ order:-1; margin-top:24px; } body[data-page-id="38679488"] [grid-col="8"] > br{ display:none; } body[data-page-id="38679488"] [grid-col="4"] > br:nth-child(-n+4){ display:none; } body[data-page-id="38679488"] .hero-film{ margin-bottom:0; } /* Inner pages on phones: drop the stacked line breaks above the page title (desktop spacing) */ body:not(.homepage) [grid-col="4"] > br:nth-child(-n+4){ display:none; } /* Inner pages on phones: drop the desktop spacing breaks after the text and above the images, so the gallery follows the text */ body:not(.homepage) [grid-col="4"] > small:last-of-type ~ br{ display:none; } body:not(.homepage) [grid-col="8"] > br:nth-child(-n+4){ display:none; } body:not(.homepage) [grid-col="4"] + [grid-col="8"]{ margin-top:24px; } }